BuzzbeeSCD/openchamber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add OpenCode CLI path override and settings UI

Browse Source 
- Add opencodeBinary field to settings and persistence flow
- Introduce OpenCode CLI settings panel with Browse and Save actions
This commit is contained in:
Bohdan Triapitsyn
2026-02-06 01:32:32 +02:00
parent b17fb60393
commit 234a91b444
17 changed files with 736 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui/src/App.tsx
+3 -1
View File
@@ -221,7 +221,9 @@ function App({ apis }: AppProps) {
if (!data || cancelled) return;
const openCodeRunning = data.openCodeRunning === true;
const err = typeof data.lastOpenCodeError === 'string' ? data.lastOpenCodeError : '';
const cliMissing = !openCodeRunning && /ENOENT|spawn\s+opencode|opencode(\.exe)?\s+not\s+found|not\s+found/i.test(err);
const cliMissing =
!openCodeRunning &&
/ENOENT|spawn\s+opencode|Unable\s+to\s+locate\s+the\s+opencode\s+CLI|OpenCode\s+CLI\s+not\s+found|opencode(\.exe)?\s+not\s+found|env:\s*(node|bun):\s*No\s+such\s+file\s+or\s+directory|(node|bun):\s*No\s+such\s+file\s+or\s+directory/i.test(err);
setShowCliOnboarding(cliMissing);
} catch {
// ignore
packages/ui/src/components/onboarding/OnboardingScreen.tsx
+98
View File
@@ -1,6 +1,9 @@
import React from 'react';
import { RiFileCopyLine, RiCheckLine, RiExternalLinkLine } from '@remixicon/react';
import { isDesktopShell, isTauriShell } from '@/lib/desktop';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { updateDesktopSettings } from '@/lib/persistence';
const INSTALL_COMMAND = 'curl -fsSL https://opencode.ai/install | bash';
const POLL_INTERVAL_MS = 3000;
@@ -37,6 +40,7 @@ export function OnboardingScreen({ onCliAvailable }: OnboardingScreenProps) {
const [showHint, setShowHint] = React.useState(false);
const [isDesktopApp, setIsDesktopApp] = React.useState(false);
const [isRetrying, setIsRetrying] = React.useState(false);
const [opencodeBinary, setOpencodeBinary] = React.useState('');
React.useEffect(() => {
const timer = setTimeout(() => setShowHint(true), HINT_DELAY_MS);
@@ -47,6 +51,27 @@ export function OnboardingScreen({ onCliAvailable }: OnboardingScreenProps) {
setIsDesktopApp(isDesktopShell());
}, []);
React.useEffect(() => {
let cancelled = false;
void (async () => {
try {
const response = await fetch('/api/config/settings', { method: 'GET', headers: { Accept: 'application/json' } });
if (!response.ok) return;
const data = (await response.json().catch(() => null)) as null | { opencodeBinary?: unknown };
if (!data || cancelled) return;
const value = typeof data.opencodeBinary === 'string' ? data.opencodeBinary.trim() : '';
if (value) {
setOpencodeBinary(value);
}
} catch {
// ignore
}
})();
return () => {
cancelled = true;
};
}, []);
const handleDragStart = React.useCallback(async (e: React.MouseEvent) => {
if ((e.target as HTMLElement).closest('button, a, input, select, textarea, code')) {
return;
@@ -83,6 +108,43 @@ export function OnboardingScreen({ onCliAvailable }: OnboardingScreenProps) {
}
}, []);
const handleBrowse = React.useCallback(async () => {
if (typeof window === 'undefined') {
return;
}
if (!isDesktopApp || !isTauriShell()) {
return;
}
const tauri = (window as unknown as { __TAURI__?: { dialog?: { open?: (opts: Record<string, unknown>) => Promise<unknown> } } }).__TAURI__;
if (!tauri?.dialog?.open) {
return;
}
try {
const selected = await tauri.dialog.open({
title: 'Select opencode binary',
multiple: false,
directory: false,
});
if (typeof selected === 'string' && selected.trim().length > 0) {
setOpencodeBinary(selected.trim());
}
} catch {
// ignore
}
}, [isDesktopApp]);
const handleApplyPath = React.useCallback(async () => {
setIsRetrying(true);
try {
await updateDesktopSettings({ opencodeBinary: opencodeBinary.trim() });
await fetch('/api/config/reload', { method: 'POST' });
} finally {
setTimeout(() => setIsRetrying(false), 1000);
}
}, [opencodeBinary]);
const handleCopy = React.useCallback(async () => {
try {
await navigator.clipboard.writeText(INSTALL_COMMAND);
@@ -168,6 +230,39 @@ export function OnboardingScreen({ onCliAvailable }: OnboardingScreenProps) {
{isRetrying ? 'Retrying…' : 'Retry'}
</button>
</div>
<div className="mx-auto w-full max-w-xl pt-4">
<div className="space-y-2">
<div className="text-sm text-muted-foreground">Already installed? Set the OpenCode CLI path:</div>
<div className="flex gap-2">
<Input
value={opencodeBinary}
onChange={(e) => setOpencodeBinary(e.target.value)}
placeholder="/Users/you/.bun/bin/opencode"
disabled={isRetrying}
className="flex-1 font-mono text-xs"
/>
<Button
type="button"
variant="secondary"
onClick={handleBrowse}
disabled={isRetrying || !isDesktopApp || !isTauriShell()}
>
Browse
</Button>
<Button
type="button"
onClick={handleApplyPath}
disabled={isRetrying}
>
Apply
</Button>
</div>
<div className="text-xs text-muted-foreground/70">
Saves to <code className="text-foreground/70">~/.config/openchamber/settings.json</code> and reloads OpenCode configuration.
</div>
</div>
</div>
</div>
{showHint && (
@@ -178,6 +273,9 @@ export function OnboardingScreen({ onCliAvailable }: OnboardingScreenProps) {
<p className="text-sm text-muted-foreground/70">
or set <code className="text-foreground/70">OPENCODE_BINARY</code> environment variable.
</p>
<p className="text-sm text-muted-foreground/70">
If you see <code className="text-foreground/70">env: node: No such file or directory</code> or <code className="text-foreground/70">env: bun: No such file or directory</code>, install that runtime or ensure it is on PATH.
</p>
</div>
)}
</div>
packages/ui/src/components/sections/openchamber/OpenChamberPage.tsx
+13
View File
@@ -8,6 +8,7 @@ import { GitSettings } from './GitSettings';
import { WorktreeSectionContent } from './WorktreeSectionContent';
import { NotificationSettings } from './NotificationSettings';
import { GitHubSettings } from './GitHubSettings';
import { OpenCodeCliSettings } from './OpenCodeCliSettings';
import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
import { useDeviceInfo } from '@/lib/device';
import { isVSCodeRuntime, isWebRuntime } from '@/lib/desktop';
@@ -21,6 +22,7 @@ interface OpenChamberPageProps {
export const OpenChamberPage: React.FC<OpenChamberPageProps> = ({ section }) => {
const { isMobile } = useDeviceInfo();
const showAbout = isMobile && isWebRuntime();
const isVSCode = isVSCodeRuntime();
// If no section specified, show all (mobile/legacy behavior)
if (!section) {
@@ -35,6 +37,11 @@ export const OpenChamberPage: React.FC<OpenChamberPageProps> = ({ section }) =>
<div className="border-t border-border/40 pt-6">
<DefaultsSettings />
</div>
{!isVSCode && (
<div className="border-t border-border/40 pt-6">
<OpenCodeCliSettings />
</div>
)}
<div className="border-t border-border/40 pt-6">
<SessionRetentionSettings />
</div>
@@ -93,9 +100,15 @@ const ChatSectionContent: React.FC = () => {
// Sessions section: Default model & agent, Session retention, Memory limits
const SessionsSectionContent: React.FC = () => {
const isVSCode = isVSCodeRuntime();
return (
<div className="space-y-6">
<DefaultsSettings />
{!isVSCode && (
<div className="border-t border-border/40 pt-6">
<OpenCodeCliSettings />
</div>
)}
<div className="border-t border-border/40 pt-6">
<SessionRetentionSettings />
</div>
packages/ui/src/components/sections/openchamber/OpenCodeCliSettings.tsx
+123
View File
@@ -0,0 +1,123 @@
import * as React from 'react';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { isDesktopShell, isTauriShell } from '@/lib/desktop';
import { updateDesktopSettings } from '@/lib/persistence';
import { reloadOpenCodeConfiguration } from '@/stores/useAgentsStore';
export const OpenCodeCliSettings: React.FC = () => {
const [value, setValue] = React.useState('');
const [isLoading, setIsLoading] = React.useState(true);
const [isSaving, setIsSaving] = React.useState(false);
React.useEffect(() => {
let cancelled = false;
void (async () => {
try {
const response = await fetch('/api/config/settings', {
method: 'GET',
headers: { Accept: 'application/json' },
});
if (!response.ok) {
return;
}
const data = (await response.json().catch(() => null)) as null | { opencodeBinary?: unknown };
if (cancelled || !data) {
return;
}
const next = typeof data.opencodeBinary === 'string' ? data.opencodeBinary.trim() : '';
setValue(next);
} catch {
// ignore
} finally {
if (!cancelled) {
setIsLoading(false);
}
}
})();
return () => {
cancelled = true;
};
}, []);
const handleBrowse = React.useCallback(async () => {
if (typeof window === 'undefined') {
return;
}
if (!isDesktopShell() || !isTauriShell()) {
return;
}
const tauri = (window as unknown as { __TAURI__?: { dialog?: { open?: (opts: Record<string, unknown>) => Promise<unknown> } } }).__TAURI__;
if (!tauri?.dialog?.open) {
return;
}
try {
const selected = await tauri.dialog.open({
title: 'Select opencode binary',
multiple: false,
directory: false,
});
if (typeof selected === 'string' && selected.trim().length > 0) {
setValue(selected.trim());
}
} catch {
// ignore
}
}, []);
const handleSaveAndReload = React.useCallback(async () => {
setIsSaving(true);
try {
await updateDesktopSettings({ opencodeBinary: value.trim() });
await reloadOpenCodeConfiguration({ message: 'Restarting OpenCode…', mode: 'projects', scopes: ['all'] });
} finally {
setIsSaving(false);
}
}, [value]);
return (
<div className="space-y-3">
<div className="space-y-1">
<h3 className="typography-ui-header font-semibold text-foreground">OpenCode CLI</h3>
<p className="typography-meta text-muted-foreground">
Optional absolute path to the <code className="font-mono text-xs">opencode</code> binary.
Useful when your desktop app launch environment has a stale PATH.
If your <code className="font-mono text-xs">opencode</code> shim requires Node/Bun (e.g. <code className="font-mono text-xs">env node</code> or <code className="font-mono text-xs">env bun</code>), make sure that runtime is installed.
</p>
</div>
<div className="flex gap-2">
<Input
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="/Users/you/.bun/bin/opencode"
disabled={isLoading || isSaving}
className="flex-1 font-mono text-xs"
/>
<Button
type="button"
variant="secondary"
onClick={handleBrowse}
disabled={isLoading || isSaving || !isDesktopShell() || !isTauriShell()}
>
Browse
</Button>
<Button
type="button"
onClick={handleSaveAndReload}
disabled={isLoading || isSaving}
>
{isSaving ? 'Saving…' : 'Save + Reload'}
</Button>
</div>
<div className="typography-micro text-muted-foreground">
Tip: you can also use <span className="font-mono">OPENCODE_BINARY</span> env var, but this setting persists in
<span className="font-mono"> ~/.config/openchamber/settings.json</span>.
</div>
</div>
);
};
packages/ui/src/lib/api/types.ts
+1
View File
@@ -389,6 +389,7 @@ export interface SettingsPayload {
darkThemeId?: string;
lastDirectory?: string;
homeDirectory?: string;
opencodeBinary?: string;
projects?: ProjectEntry[];
activeProjectId?: string;
approvedDirectories?: string[];
packages/ui/src/lib/desktop.ts
+2
View File
@@ -37,6 +37,8 @@ export type DesktopSettings = {
darkThemeId?: string;
lastDirectory?: string;
homeDirectory?: string;
// Optional absolute path to `opencode` binary.
opencodeBinary?: string;
projects?: ProjectEntry[];
activeProjectId?: string;
approvedDirectories?: string[];
packages/ui/src/lib/persistence.ts
+5
View File
@@ -350,6 +350,11 @@ const sanitizeWebSettings = (payload: unknown): DesktopSettings | null => {
result.homeDirectory = candidate.homeDirectory;
}
if (typeof candidate.opencodeBinary === 'string') {
const trimmed = candidate.opencodeBinary.trim();
result.opencodeBinary = trimmed.length > 0 ? trimmed : undefined;
}
const projects = sanitizeProjects(candidate.projects);
if (projects) {
result.projects = projects;