Add CLI server and move UI to HTTP API

2025-11-17 18:18:45 +00:00
parent 89bd32814f
commit 08d81f8bb5
40 changed files with 3153 additions and 462 deletions
--- a/packages/ui/src/components/file-picker.tsx
+++ b/packages/ui/src/components/file-picker.tsx
@@ -1,6 +1,7 @@
 import { Component, createSignal, createEffect, For, Show, onCleanup } from "solid-js"

 import type { OpencodeClient } from "@opencode-ai/sdk/client"
+import { cliApi } from "../lib/api-client"

 interface FileItem {
  path: string
@@ -17,7 +18,7 @@ interface FilePickerProps {
  instanceClient: OpencodeClient
  searchQuery: string
  textareaRef?: HTMLTextAreaElement
-  workspaceFolder: string
+  workspaceId: string
 }

 const FilePicker: Component<FilePickerProps> = (props) => {
@@ -36,10 +37,10 @@ const FilePicker: Component<FilePickerProps> = (props) => {

    try {
      if (allFiles().length === 0) {
-        console.log(`[FilePicker] Scanning workspace: ${props.workspaceFolder}`)
-        const scannedPaths = await window.electronAPI.scanDirectory(props.workspaceFolder)
-        const scannedFiles: FileItem[] = scannedPaths.map((path) => ({
-          path,
+        console.log(`[FilePicker] Scanning workspace: ${props.workspaceId}`)
+        const entries = await cliApi.listWorkspaceFiles(props.workspaceId)
+        const scannedFiles: FileItem[] = entries.map<FileItem>((entry) => ({
+          path: entry.path,
          isGitFile: false,
        }))
        setAllFiles(scannedFiles)
--- a/packages/ui/src/components/filesystem-browser-dialog.tsx
+++ b/packages/ui/src/components/filesystem-browser-dialog.tsx
@@ -0,0 +1,297 @@
+import { Component, Show, For, createSignal, createMemo, createEffect, onCleanup } from "solid-js"
+import { Folder as FolderIcon, File as FileIcon, Loader2, Search, X } from "lucide-solid"
+import type { FileSystemEntry } from "../../../cli/src/api-types"
+import { cliApi } from "../lib/api-client"
+import { getServerMeta } from "../lib/server-meta"
+
+const MAX_RESULTS = 200
+
+let cachedEntries: FileSystemEntry[] | null = null
+let entriesPromise: Promise<FileSystemEntry[]> | null = null
+
+async function loadFileSystemEntries(): Promise<FileSystemEntry[]> {
+  if (cachedEntries) {
+    return cachedEntries
+  }
+  if (entriesPromise) {
+    return entriesPromise
+  }
+  entriesPromise = cliApi
+    .listFileSystem(".")
+    .then((entries) => {
+      cachedEntries = entries.slice().sort((a, b) => a.path.localeCompare(b.path))
+      entriesPromise = null
+      return cachedEntries
+    })
+    .catch((error) => {
+      entriesPromise = null
+      throw error
+    })
+  return entriesPromise
+}
+
+function resolveAbsolutePath(root: string, relativePath: string): string {
+  if (!root) {
+    return relativePath
+  }
+  if (!relativePath || relativePath === "." || relativePath === "./") {
+    return root
+  }
+  const separator = root.includes("\\") ? "\\" : "/"
+  const trimmedRoot = root.endsWith(separator) ? root : `${root}${separator}`
+  const normalized = relativePath.replace(/[\\/]+/g, separator).replace(/^[\\/]+/, "")
+  return `${trimmedRoot}${normalized}`
+}
+
+function formatRootLabel(root: string): string {
+  if (!root) return "Workspace Root"
+  const parts = root.split(/[/\\]/).filter(Boolean)
+  return parts[parts.length - 1] || root || "Workspace Root"
+}
+
+interface FileSystemBrowserDialogProps {
+  open: boolean
+  mode: "directories" | "files"
+  title: string
+  description?: string
+  onSelect: (absolutePath: string) => void
+  onClose: () => void
+}
+
+const FileSystemBrowserDialog: Component<FileSystemBrowserDialogProps> = (props) => {
+  const [entries, setEntries] = createSignal<FileSystemEntry[]>([])
+  const [rootPath, setRootPath] = createSignal("")
+  const [loading, setLoading] = createSignal(false)
+  const [error, setError] = createSignal<string | null>(null)
+  const [searchQuery, setSearchQuery] = createSignal("")
+  const [selectedIndex, setSelectedIndex] = createSignal(0)
+
+  let searchInputRef: HTMLInputElement | undefined
+
+  async function refreshEntries() {
+    setLoading(true)
+    setError(null)
+    try {
+      const [items, meta] = await Promise.all([loadFileSystemEntries(), getServerMeta()])
+      setEntries(items)
+      setRootPath(meta.workspaceRoot)
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Unable to load filesystem"
+      setError(message)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const filteredEntries = createMemo(() => {
+    const query = searchQuery().trim().toLowerCase()
+    const mode = props.mode
+    const root = rootPath()
+    const matchesType = entries().filter((entry) => (mode === "directories" ? entry.type === "directory" : entry.type === "file"))
+
+    const baseEntries = mode === "directories" && root
+      ? [
+          {
+            name: formatRootLabel(root),
+            path: ".",
+            type: "directory" as const,
+          },
+          ...matchesType,
+        ]
+      : matchesType
+
+    if (!query) {
+      return baseEntries
+    }
+
+    return baseEntries.filter((entry) => {
+      const absolute = resolveAbsolutePath(root, entry.path)
+      return absolute.toLowerCase().includes(query) || entry.name.toLowerCase().includes(query)
+    })
+  })
+
+  const visibleEntries = createMemo(() => filteredEntries().slice(0, MAX_RESULTS))
+
+  createEffect(() => {
+    const list = visibleEntries()
+    if (list.length === 0) {
+      setSelectedIndex(0)
+      return
+    }
+    if (selectedIndex() >= list.length) {
+      setSelectedIndex(list.length - 1)
+    }
+  })
+
+  createEffect(() => {
+    if (!props.open) {
+      return
+    }
+    setSearchQuery("")
+    setSelectedIndex(0)
+    void refreshEntries()
+    setTimeout(() => searchInputRef?.focus(), 50)
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (!props.open) return
+      const results = visibleEntries()
+      if (event.key === "Escape") {
+        event.preventDefault()
+        props.onClose()
+        return
+      }
+      if (results.length === 0) {
+        return
+      }
+      if (event.key === "ArrowDown") {
+        event.preventDefault()
+        setSelectedIndex((prev) => Math.min(prev + 1, results.length - 1))
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault()
+        setSelectedIndex((prev) => Math.max(prev - 1, 0))
+      } else if (event.key === "Enter") {
+        event.preventDefault()
+        const entry = results[selectedIndex()]
+        if (entry) {
+          handleEntrySelect(entry)
+        }
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    onCleanup(() => {
+      window.removeEventListener("keydown", handleKeyDown)
+    })
+  })
+
+  function handleEntrySelect(entry: FileSystemEntry) {
+    const absolute = resolveAbsolutePath(rootPath(), entry.path)
+    props.onSelect(absolute)
+  }
+
+  function handleOverlayClick(event: MouseEvent) {
+    if (event.target === event.currentTarget) {
+      props.onClose()
+    }
+  }
+
+  return (
+    <Show when={props.open}>
+      <div class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 p-6" onClick={handleOverlayClick}>
+        <div class="modal-surface max-h-full w-full max-w-3xl overflow-hidden rounded-xl bg-surface p-0" role="dialog" aria-modal="true">
+          <div class="panel flex flex-col">
+            <div class="panel-header flex items-start justify-between gap-4">
+              <div>
+                <h3 class="panel-title">{props.title}</h3>
+                <p class="panel-subtitle">
+                  {props.description || "Search for a path under the configured workspace root."}
+                </p>
+                <Show when={rootPath()}>
+                  <p class="text-xs text-muted mt-1 font-mono break-all">Root: {rootPath()}</p>
+                </Show>
+              </div>
+              <button type="button" class="selector-button selector-button-secondary" onClick={props.onClose}>
+                <X class="w-4 h-4" />
+                Close
+              </button>
+            </div>
+
+            <div class="panel-body">
+              <label class="w-full text-sm text-secondary mb-2 block">Filter</label>
+              <div class="selector-input-group">
+                <div class="flex items-center gap-2 px-3 text-muted">
+                  <Search class="w-4 h-4" />
+                </div>
+                <input
+                  ref={(el) => {
+                    searchInputRef = el
+                  }}
+                  type="text"
+                  value={searchQuery()}
+                  onInput={(event) => setSearchQuery(event.currentTarget.value)}
+                  placeholder={props.mode === "directories" ? "Search for folders" : "Search for files"}
+                  class="selector-input"
+                />
+              </div>
+            </div>
+
+            <div class="panel-list panel-list--fill max-h-96 overflow-auto">
+              <Show
+                when={!loading() && !error()}
+                fallback={
+                  <div class="flex items-center justify-center py-6 text-sm text-secondary">
+                    <Show
+                      when={loading()}
+                      fallback={<span class="text-red-500">{error()}</span>}
+                    >
+                      <div class="flex items-center gap-2">
+                        <Loader2 class="w-4 h-4 animate-spin" />
+                        <span>Loading filesystem…</span>
+                      </div>
+                    </Show>
+                  </div>
+                }
+              >
+                <Show
+                  when={visibleEntries().length > 0}
+                  fallback={
+                    <div class="flex flex-col items-center justify-center gap-2 py-10 text-sm text-secondary">
+                      <p>No matches.</p>
+                      <Show when={searchQuery().trim().length === 0}>
+                        <button type="button" class="selector-button selector-button-secondary" onClick={refreshEntries}>
+                          Retry
+                        </button>
+                      </Show>
+                    </div>
+                  }
+                >
+                  <For each={visibleEntries()}>
+                    {(entry, index) => (
+                      <button
+                        type="button"
+                        class="panel-list-item flex items-center gap-3 text-left"
+                        classList={{ "panel-list-item-highlight": selectedIndex() === index() }}
+                        onMouseEnter={() => setSelectedIndex(index())}
+                        onClick={() => handleEntrySelect(entry)}
+                      >
+                        <div class="flex h-8 w-8 items-center justify-center rounded-md bg-surface-secondary text-muted">
+                          <Show when={entry.type === "directory"} fallback={<FileIcon class="w-4 h-4" />}>
+                            <FolderIcon class="w-4 h-4" />
+                          </Show>
+                        </div>
+                        <div class="flex flex-col">
+                          <span class="text-sm font-medium text-primary">{entry.name || entry.path}</span>
+                          <span class="text-xs font-mono text-muted">{resolveAbsolutePath(rootPath(), entry.path)}</span>
+                        </div>
+                      </button>
+                    )}
+                  </For>
+                </Show>
+              </Show>
+            </div>
+
+            <div class="panel-footer">
+              <div class="panel-footer-hints">
+                <div class="flex items-center gap-1.5">
+                  <kbd class="kbd">↑</kbd>
+                  <kbd class="kbd">↓</kbd>
+                  <span>Navigate</span>
+                </div>
+                <div class="flex items-center gap-1.5">
+                  <kbd class="kbd">Enter</kbd>
+                  <span>Select</span>
+                </div>
+                <div class="flex items-center gap-1.5">
+                  <kbd class="kbd">Esc</kbd>
+                  <span>Close</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Show>
+  )
+}
+
+export default FileSystemBrowserDialog
--- a/packages/ui/src/components/folder-selection-view.tsx
+++ b/packages/ui/src/components/folder-selection-view.tsx
@@ -2,12 +2,13 @@ import { Component, createSignal, Show, For, onMount, onCleanup, createEffect }
 import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight } from "lucide-solid"
 import { useConfig } from "../stores/preferences"
 import AdvancedSettingsModal from "./advanced-settings-modal"
+import FileSystemBrowserDialog from "./filesystem-browser-dialog"
 import Kbd from "./kbd"

 const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href

 interface FolderSelectionViewProps {
-  onSelectFolder: (folder?: string, binaryPath?: string) => void
+  onSelectFolder: (folder: string, binaryPath?: string) => void
  isLoading?: boolean
  advancedSettingsOpen?: boolean
  onAdvancedSettingsOpen?: () => void
@@ -19,6 +20,7 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
  const [selectedIndex, setSelectedIndex] = createSignal(0)
  const [focusMode, setFocusMode] = createSignal<"recent" | "new" | null>("recent")
  const [selectedBinary, setSelectedBinary] = createSignal(preferences().lastUsedBinary || "opencode")
+  const [isFolderBrowserOpen, setIsFolderBrowserOpen] = createSignal(false)
  let recentListRef: HTMLDivElement | undefined
 
  const folders = () => recentFolders()
@@ -173,12 +175,17 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
 
  function handleBrowse() {
    if (isLoading()) return
-    updateLastUsedBinary(selectedBinary())
-    props.onSelectFolder(undefined, selectedBinary())
+    setFocusMode("new")
+    setIsFolderBrowserOpen(true)
  }
-
-
+ 
+  function handleBrowserSelect(path: string) {
+    setIsFolderBrowserOpen(false)
+    handleFolderSelect(path)
+  }
+ 
  function handleBinaryChange(binary: string) {
+
    setSelectedBinary(binary)
  }

@@ -378,6 +385,15 @@ const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
        onBinaryChange={handleBinaryChange}
        isLoading={props.isLoading}
      />
+
+      <FileSystemBrowserDialog
+        open={isFolderBrowserOpen()}
+        mode="directories"
+        title="Browse for Folder"
+        description="Select any directory exposed by the CLI server."
+        onClose={() => setIsFolderBrowserOpen(false)}
+        onSelect={handleBrowserSelect}
+      />
    </>
  )
 }
--- a/packages/ui/src/components/opencode-binary-selector.tsx
+++ b/packages/ui/src/components/opencode-binary-selector.tsx
@@ -1,6 +1,8 @@
 import { Component, For, Show, createEffect, createMemo, createSignal, onCleanup } from "solid-js"
 import { FolderOpen, Trash2, Check, AlertCircle, Loader2, Plus } from "lucide-solid"
 import { useConfig } from "../stores/preferences"
+import { cliApi } from "../lib/api-client"
+import FileSystemBrowserDialog from "./filesystem-browser-dialog"

 interface BinaryOption {
  path: string
@@ -29,6 +31,7 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
  const [validationError, setValidationError] = createSignal<string | null>(null)
  const [versionInfo, setVersionInfo] = createSignal<Map<string, string>>(new Map<string, string>())
  const [validatingPaths, setValidatingPaths] = createSignal<Set<string>>(new Set<string>())
+  const [isBinaryBrowserOpen, setIsBinaryBrowserOpen] = createSignal(false)

  const binaries = () => opencodeBinaries()
  const lastUsedBinary = () => preferences().lastUsedBinary
@@ -102,7 +105,7 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
      setValidating(true)
      setValidationError(null)

-      const result = await window.electronAPI.validateOpenCodeBinary(path)
+      const result = await cliApi.validateBinary(path)

      if (result.valid && result.version) {
        const updatedVersionInfo = new Map(versionInfo())
@@ -125,18 +128,12 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
    }
  }

-  async function handleBrowseBinary() {
-    try {
-      const path = await window.electronAPI.selectOpenCodeBinary()
-      if (!path) return
-
-      setCustomPath(path)
-      await handleValidateAndAdd(path)
-    } catch (error) {
-      setValidationError(error instanceof Error ? error.message : "Failed to select binary")
-    }
+  function handleBrowseBinary() {
+    if (props.disabled) return
+    setValidationError(null)
+    setIsBinaryBrowserOpen(true)
  }
-
+ 
  async function handleValidateAndAdd(path: string) {
    const validation = await validateBinary(path)

@@ -150,8 +147,15 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
      setValidationError(validation.error || "Invalid OpenCode binary")
    }
  }
-
+ 
+  function handleBinaryBrowserSelect(path: string) {
+    setIsBinaryBrowserOpen(false)
+    setCustomPath(path)
+    void handleValidateAndAdd(path)
+  }
+ 
  async function handleCustomPathSubmit() {
+
    const path = customPath().trim()
    if (!path) return
    await handleValidateAndAdd(path)
@@ -197,128 +201,140 @@ const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) =
  const isPathValidating = (path: string) => validatingPaths().has(path)

  return (
-    <div class="panel">
-      <div class="panel-header flex items-center justify-between gap-3">
-        <div>
-          <h3 class="panel-title">OpenCode Binary</h3>
-          <p class="panel-subtitle">Choose which executable OpenCode should run</p>
-        </div>
-        <Show when={validating()}>
-          <div class="selector-loading text-xs">
-            <Loader2 class="selector-loading-spinner" />
-            <span>Checking versions…</span>
+    <>
+      <div class="panel">
+        <div class="panel-header flex items-center justify-between gap-3">
+          <div>
+            <h3 class="panel-title">OpenCode Binary</h3>
+            <p class="panel-subtitle">Choose which executable OpenCode should run</p>
+          </div>
+          <Show when={validating()}>
+            <div class="selector-loading text-xs">
+              <Loader2 class="selector-loading-spinner" />
+              <span>Checking versions…</span>
+            </div>
+          </Show>
+        </div>
+
+        <div class="panel-body space-y-3">
+          <div class="selector-input-group">
+            <input
+              type="text"
+              value={customPath()}
+              onInput={(e) => setCustomPath(e.currentTarget.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  e.preventDefault()
+                  handleCustomPathSubmit()
+                }
+              }}
+              disabled={props.disabled}
+              placeholder="Enter path to opencode binary…"
+              class="selector-input"
+            />
+            <button
+              type="button"
+              onClick={handleCustomPathSubmit}
+              disabled={props.disabled || !customPath().trim()}
+              class="selector-button selector-button-primary"
+            >
+              <Plus class="w-4 h-4" />
+              Add
+            </button>
          </div>
-        </Show>
-      </div>

-      <div class="panel-body space-y-3">
-        <div class="selector-input-group">
-          <input
-            type="text"
-            value={customPath()}
-            onInput={(e) => setCustomPath(e.currentTarget.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") {
-                e.preventDefault()
-                handleCustomPathSubmit()
-              }
-            }}
-            disabled={props.disabled}
-            placeholder="Enter path to opencode binary…"
-            class="selector-input"
-          />
          <button
            type="button"
-            onClick={handleCustomPathSubmit}
-            disabled={props.disabled || !customPath().trim()}
-            class="selector-button selector-button-primary"
+            onClick={handleBrowseBinary}
+            disabled={props.disabled}
+            class="selector-button selector-button-secondary w-full flex items-center justify-center gap-2"
          >
-            <Plus class="w-4 h-4" />
-            Add
+            <FolderOpen class="w-4 h-4" />
+            Browse for Binary…
          </button>
+
+          <Show when={validationError()}>
+            <div class="selector-validation-error">
+              <div class="selector-validation-error-content">
+                <AlertCircle class="selector-validation-error-icon" />
+                <span class="selector-validation-error-text">{validationError()}</span>
+              </div>
+            </div>
+          </Show>
        </div>

-        <button
-          type="button"
-          onClick={handleBrowseBinary}
-          disabled={props.disabled}
-          class="selector-button selector-button-secondary w-full flex items-center justify-center gap-2"
-        >
-          <FolderOpen class="w-4 h-4" />
-          Browse for Binary…
-        </button>
+        <div class="panel-list panel-list--fill max-h-80 overflow-y-auto">
+          <For each={binaryOptions()}>
+            {(binary) => {
+              const isDefault = binary.isDefault
+              const versionLabel = () => versionInfo().get(binary.path) ?? binary.version

-        <Show when={validationError()}>
-          <div class="selector-validation-error">
-            <div class="selector-validation-error-content">
-              <AlertCircle class="selector-validation-error-icon" />
-              <span class="selector-validation-error-text">{validationError()}</span>
-            </div>
-          </div>
-        </Show>
-      </div>
-
-      <div class="panel-list panel-list--fill max-h-80 overflow-y-auto">
-        <For each={binaryOptions()}>
-          {(binary) => {
-            const isDefault = binary.isDefault
-            const versionLabel = () => versionInfo().get(binary.path) ?? binary.version
-
-            return (
-              <div
-                class="panel-list-item flex items-center"
-                classList={{ "panel-list-item-highlight": currentSelectionPath() === binary.path }}
-              >
-                <button
-                  type="button"
-                  class="panel-list-item-content flex-1"
-                  onClick={() => handleSelectBinary(binary.path)}
-                  disabled={props.disabled}
+              return (
+                <div
+                  class="panel-list-item flex items-center"
+                  classList={{ "panel-list-item-highlight": currentSelectionPath() === binary.path }}
                >
-                  <div class="flex flex-col flex-1 min-w-0 gap-1.5">
-                    <div class="flex items-center gap-2">
-                      <Check
-                        class={`w-4 h-4 transition-opacity ${currentSelectionPath() === binary.path ? "opacity-100" : "opacity-0"}`}
-                      />
-                      <span class="text-sm font-medium truncate text-primary">{getDisplayName(binary.path)}</span>
-                    </div>
-                    <Show when={!isDefault}>
-                      <div class="text-xs font-mono truncate pl-6 text-muted">{binary.path}</div>
-                    </Show>
-                    <div class="flex items-center gap-2 text-xs text-muted pl-6 flex-wrap">
-                      <Show when={versionLabel()}>
-                        <span class="selector-badge-version">v{versionLabel()}</span>
-                      </Show>
-                      <Show when={isPathValidating(binary.path)}>
-                        <span class="selector-badge-time">Checking…</span>
-                      </Show>
-                      <Show when={!isDefault && binary.lastUsed}>
-                        <span class="selector-badge-time">{formatRelativeTime(binary.lastUsed)}</span>
-                      </Show>
-                      <Show when={isDefault}>
-                        <span class="selector-badge-time">Use binary from system PATH</span>
-                      </Show>
-                    </div>
-                  </div>
-                </button>
-                <Show when={!isDefault}>
                  <button
                    type="button"
-                    class="p-2 text-muted hover:text-primary"
-                    onClick={(event) => handleRemoveBinary(binary.path, event)}
+                    class="panel-list-item-content flex-1"
+                    onClick={() => handleSelectBinary(binary.path)}
                    disabled={props.disabled}
-                    title="Remove binary"
                  >
-                    <Trash2 class="w-3.5 h-3.5" />
+                    <div class="flex flex-col flex-1 min-w-0 gap-1.5">
+                      <div class="flex items-center gap-2">
+                        <Check
+                          class={`w-4 h-4 transition-opacity ${currentSelectionPath() === binary.path ? "opacity-100" : "opacity-0"}`}
+                        />
+                        <span class="text-sm font-medium truncate text-primary">{getDisplayName(binary.path)}</span>
+                      </div>
+                      <Show when={!isDefault}>
+                        <div class="text-xs font-mono truncate pl-6 text-muted">{binary.path}</div>
+                      </Show>
+                      <div class="flex items-center gap-2 text-xs text-muted pl-6 flex-wrap">
+                        <Show when={versionLabel()}>
+                          <span class="selector-badge-version">v{versionLabel()}</span>
+                        </Show>
+                        <Show when={isPathValidating(binary.path)}>
+                          <span class="selector-badge-time">Checking…</span>
+                        </Show>
+                        <Show when={!isDefault && binary.lastUsed}>
+                          <span class="selector-badge-time">{formatRelativeTime(binary.lastUsed)}</span>
+                        </Show>
+                        <Show when={isDefault}>
+                          <span class="selector-badge-time">Use binary from system PATH</span>
+                        </Show>
+                      </div>
+                    </div>
                  </button>
-                </Show>
-              </div>
-            )
-          }}
-        </For>
+                  <Show when={!isDefault}>
+                    <button
+                      type="button"
+                      class="p-2 text-muted hover:text-primary"
+                      onClick={(event) => handleRemoveBinary(binary.path, event)}
+                      disabled={props.disabled}
+                      title="Remove binary"
+                    >
+                      <Trash2 class="w-3.5 h-3.5" />
+                    </button>
+                  </Show>
+                </div>
+              )
+            }}
+          </For>
+        </div>
      </div>
-    </div>
+
+      <FileSystemBrowserDialog
+        open={isBinaryBrowserOpen()}
+        mode="files"
+        title="Select OpenCode Binary"
+        description="Browse files exposed by the CLI server."
+        onClose={() => setIsBinaryBrowserOpen(false)}
+        onSelect={handleBinaryBrowserSelect}
+      />
+    </>
  )
 }
-
+ 
 export default OpenCodeBinarySelector
+
--- a/packages/ui/src/components/prompt-input.tsx
+++ b/packages/ui/src/components/prompt-input.tsx
@@ -26,7 +26,7 @@ export default function PromptInput(props: PromptInputProps) {
  const [history, setHistory] = createSignal<string[]>([])
  const [historyIndex, setHistoryIndex] = createSignal(-1)
  const [historyDraft, setHistoryDraft] = createSignal<string | null>(null)
-  const [isFocused, setIsFocused] = createSignal(false)
+  const [, setIsFocused] = createSignal(false)
  const [showPicker, setShowPicker] = createSignal(false)
  const [searchQuery, setSearchQuery] = createSignal("")
  const [atPosition, setAtPosition] = createSignal<number | null>(null)
@@ -744,7 +744,7 @@ export default function PromptInput(props: PromptInputProps) {
            instanceClient={instance()!.client}
            searchQuery={searchQuery()}
            textareaRef={textareaRef}
-            workspaceFolder={props.instanceFolder}
+            workspaceId={props.instanceId}
          />
        </Show>

--- a/packages/ui/src/components/unified-picker.tsx
+++ b/packages/ui/src/components/unified-picker.tsx
@@ -1,6 +1,7 @@
 import { Component, createSignal, createEffect, For, Show, onCleanup } from "solid-js"
 import type { Agent } from "../types/session"
 import type { OpencodeClient } from "@opencode-ai/sdk/client"
+import { cliApi } from "../lib/api-client"

 interface FileItem {
  path: string
@@ -19,7 +20,7 @@ interface UnifiedPickerProps {
  instanceClient: OpencodeClient | null
  searchQuery: string
  textareaRef?: HTMLTextAreaElement
-  workspaceFolder: string
+  workspaceId: string
 }

 const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
@@ -38,9 +39,9 @@ const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {

    try {
      if (allFiles().length === 0) {
-        const scannedPaths = await window.electronAPI.scanDirectory(props.workspaceFolder)
-        const scannedFiles: FileItem[] = scannedPaths.map((path) => ({
-          path,
+        const entries = await cliApi.listWorkspaceFiles(props.workspaceId)
+        const scannedFiles: FileItem[] = entries.map<FileItem>((entry) => ({
+          path: entry.path,
          isGitFile: false,
        }))
        setAllFiles(scannedFiles)