Split workspace into electron and ui packages

packages/ui/src/components/advanced-settings-modal.tsx

@@ -0,0 +1,60 @@
+import { Component } from "solid-js"
+import { Dialog } from "@kobalte/core/dialog"
+import OpenCodeBinarySelector from "./opencode-binary-selector"
+import EnvironmentVariablesEditor from "./environment-variables-editor"
+
+interface AdvancedSettingsModalProps {
+  open: boolean
+  onClose: () => void
+  selectedBinary: string
+  onBinaryChange: (binary: string) => void
+  isLoading?: boolean
+}
+
+const AdvancedSettingsModal: Component<AdvancedSettingsModalProps> = (props) => {
+  return (
+    <Dialog open={props.open} onOpenChange={(open) => !open && props.onClose()}>
+      <Dialog.Portal>
+        <Dialog.Overlay class="modal-overlay" />
+        <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <Dialog.Content class="modal-surface w-full max-w-5xl max-h-[90vh] flex flex-col overflow-hidden">
+            <header class="px-6 py-4 border-b" style={{ "border-color": "var(--border-base)" }}>
+              <Dialog.Title class="text-xl font-semibold text-primary">Advanced Settings</Dialog.Title>
+            </header>
+
+            <div class="flex-1 overflow-y-auto p-6 space-y-6">
+              <OpenCodeBinarySelector
+                selectedBinary={props.selectedBinary}
+                onBinaryChange={props.onBinaryChange}
+                disabled={Boolean(props.isLoading)}
+                isVisible={props.open}
+              />
+
+              <div class="panel">
+                <div class="panel-header">
+                  <h3 class="panel-title">Environment Variables</h3>
+                  <p class="panel-subtitle">Applied whenever a new OpenCode instance starts</p>
+                </div>
+                <div class="panel-body">
+                  <EnvironmentVariablesEditor disabled={Boolean(props.isLoading)} />
+                </div>
+              </div>
+            </div>
+
+            <div class="px-6 py-4 border-t flex justify-end" style={{ "border-color": "var(--border-base)" }}>
+              <button
+                type="button"
+                class="selector-button selector-button-secondary"
+                onClick={props.onClose}
+              >
+                Close
+              </button>
+            </div>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}
+
+export default AdvancedSettingsModal

packages/ui/src/components/agent-selector.tsx

@@ -0,0 +1,124 @@
+import { Select } from "@kobalte/core/select"
+import { For, Show, createEffect, createMemo } from "solid-js"
+import { agents, fetchAgents, sessions } from "../stores/sessions"
+import { ChevronDown } from "lucide-solid"
+import type { Agent } from "../types/session"
+import Kbd from "./kbd"
+
+interface AgentSelectorProps {
+  instanceId: string
+  sessionId: string
+  currentAgent: string
+  onAgentChange: (agent: string) => Promise<void>
+}
+
+export default function AgentSelector(props: AgentSelectorProps) {
+  const instanceAgents = () => agents().get(props.instanceId) || []
+
+  const session = createMemo(() => {
+    const instanceSessions = sessions().get(props.instanceId)
+    return instanceSessions?.get(props.sessionId)
+  })
+
+  const isChildSession = createMemo(() => {
+    return session()?.parentId !== null && session()?.parentId !== undefined
+  })
+
+  const availableAgents = createMemo(() => {
+    const allAgents = instanceAgents()
+    if (isChildSession()) {
+      return allAgents
+    }
+
+    const filtered = allAgents.filter((agent) => agent.mode !== "subagent")
+
+    const currentAgent = allAgents.find((a) => a.name === props.currentAgent)
+    if (currentAgent && !filtered.find((a) => a.name === props.currentAgent)) {
+      return [currentAgent, ...filtered]
+    }
+
+    return filtered
+  })
+
+  createEffect(() => {
+    const list = availableAgents()
+    if (list.length === 0) return
+    if (!list.some((agent) => agent.name === props.currentAgent)) {
+      void props.onAgentChange(list[0].name)
+    }
+  })
+
+  createEffect(() => {
+    if (instanceAgents().length === 0) {
+      fetchAgents(props.instanceId).catch(console.error)
+    }
+  })
+
+  const handleChange = async (value: Agent | null) => {
+    if (value && value.name !== props.currentAgent) {
+      await props.onAgentChange(value.name)
+    }
+  }
+
+  return (
+    <div class="sidebar-selector">
+      <Select
+        value={availableAgents().find((a) => a.name === props.currentAgent)}
+        onChange={handleChange}
+        options={availableAgents()}
+        optionValue="name"
+        optionTextValue="name"
+        placeholder="Select agent..."
+        itemComponent={(itemProps) => (
+          <Select.Item
+            item={itemProps.item}
+            class="selector-option"
+          >
+            <div class="flex flex-col flex-1 min-w-0">
+              <Select.ItemLabel class="selector-option-label flex items-center gap-2">
+                <span>{itemProps.item.rawValue.name}</span>
+                <Show when={itemProps.item.rawValue.mode === "subagent"}>
+                  <span class="neutral-badge">subagent</span>
+                </Show>
+              </Select.ItemLabel>
+              <Show when={itemProps.item.rawValue.description}>
+                <Select.ItemDescription class="selector-option-description">
+                  {itemProps.item.rawValue.description.length > 50
+                    ? itemProps.item.rawValue.description.slice(0, 50) + "..."
+                    : itemProps.item.rawValue.description}
+                </Select.ItemDescription>
+              </Show>
+            </div>
+          </Select.Item>
+        )}
+      >
+        <Select.Trigger
+          data-agent-selector
+          class="selector-trigger"
+        >
+          <Select.Value<Agent>>
+            {(state) => (
+              <div class="selector-trigger-label">
+                <span class="selector-trigger-primary">
+                  Agent: {state.selectedOption()?.name ?? "None"}
+                </span>
+              </div>
+            )}
+          </Select.Value>
+          <Select.Icon class="selector-trigger-icon">
+            <ChevronDown class="w-3 h-3" />
+          </Select.Icon>
+        </Select.Trigger>
+
+        <Select.Portal>
+          <Select.Content class="selector-popover max-h-80 overflow-auto p-1 z-50">
+            <Select.Listbox class="selector-listbox" />
+          </Select.Content>
+        </Select.Portal>
+      </Select>
+      <span class="hint sidebar-selector-hint">
+        <Kbd shortcut="cmd+shift+a" />
+      </span>
+    </div>
+  )
+}

packages/ui/src/components/attachment-chip.tsx

@@ -0,0 +1,27 @@
+import { Component } from "solid-js"
+import type { Attachment } from "../types/attachment"
+
+interface AttachmentChipProps {
+  attachment: Attachment
+  onRemove: () => void
+}
+
+const AttachmentChip: Component<AttachmentChipProps> = (props) => {
+  return (
+    <div
+      class="attachment-chip"
+      title={props.attachment.source.type === "file" ? props.attachment.source.path : undefined}
+    >
+      <span class="font-mono">{props.attachment.display}</span>
+      <button
+        onClick={props.onRemove}
+        class="attachment-remove"
+        aria-label="Remove attachment"
+      >
+        ×
+      </button>
+    </div>
+  )
+}
+
+export default AttachmentChip

packages/ui/src/components/code-block-inline.tsx

@@ -0,0 +1,107 @@
+import { createSignal, onMount, Show, createEffect } from "solid-js"
+import type { Highlighter } from "shiki/bundle/full"
+import { useTheme } from "../lib/theme"
+import { getSharedHighlighter, escapeHtml } from "../lib/markdown"
+
+const inlineLoadedLanguages = new Set<string>()
+
+type LoadLanguageArg = Parameters<Highlighter["loadLanguage"]>[0]
+type CodeToHtmlOptions = Parameters<Highlighter["codeToHtml"]>[1]
+
+interface CodeBlockInlineProps {
+  code: string
+  language?: string
+}
+
+export function CodeBlockInline(props: CodeBlockInlineProps) {
+  const { isDark } = useTheme()
+  const [html, setHtml] = createSignal("")
+  const [copied, setCopied] = createSignal(false)
+  const [ready, setReady] = createSignal(false)
+  let highlighter: Highlighter | null = null
+
+  onMount(async () => {
+    highlighter = await getSharedHighlighter()
+    setReady(true)
+    await updateHighlight()
+  })
+
+  createEffect(() => {
+    if (ready()) {
+      isDark()
+      props.code
+      props.language
+      void updateHighlight()
+    }
+  })
+
+  const updateHighlight = async () => {
+    if (!highlighter) return
+
+    if (!props.language) {
+      setHtml(`<pre><code>${escapeHtml(props.code)}</code></pre>`)
+      return
+    }
+
+    try {
+      const language = props.language as LoadLanguageArg
+      if (!inlineLoadedLanguages.has(props.language)) {
+        await highlighter.loadLanguage(language)
+        inlineLoadedLanguages.add(props.language)
+      }
+
+      const highlighted = highlighter.codeToHtml(props.code, {
+        lang: props.language as CodeToHtmlOptions["lang"],
+        theme: isDark() ? "github-dark" : "github-light",
+      })
+      setHtml(highlighted)
+    } catch {
+      setHtml(`<pre><code>${escapeHtml(props.code)}</code></pre>`)
+    }
+  }
+
+  const copyCode = async () => {
+    await navigator.clipboard.writeText(props.code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <Show
+      when={ready()}
+      fallback={
+        <pre class="tool-call-content">
+          <code>{props.code}</code>
+        </pre>
+      }
+    >
+      <div class="code-block-inline">
+        <div class="code-block-header">
+          <Show when={props.language}>
+            <span class="code-block-language">{props.language}</span>
+          </Show>
+          <button onClick={copyCode} class="code-block-copy">
+            <svg
+              class="copy-icon"
+              width="16"
+              height="16"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+            >
+              <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+              <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+            </svg>
+            <span class="copy-text">
+              <Show when={copied()} fallback="Copy">
+                Copied!
+              </Show>
+            </span>
+          </button>
+        </div>
+        <div innerHTML={html()} />
+      </div>
+    </Show>
+  )
+}

packages/ui/src/components/command-palette.tsx

@@ -0,0 +1,287 @@
+import { Component, createSignal, For, Show, createEffect, createMemo } from "solid-js"
+import { Dialog } from "@kobalte/core/dialog"
+import type { Command } from "../lib/commands"
+import Kbd from "./kbd"
+
+interface CommandPaletteProps {
+  open: boolean
+  onClose: () => void
+  commands: Command[]
+  onExecute: (command: Command) => void
+}
+
+function buildShortcutString(shortcut: Command["shortcut"]): string {
+  if (!shortcut) return ""
+
+  const parts: string[] = []
+
+  if (shortcut.meta || shortcut.ctrl) parts.push("cmd")
+  if (shortcut.shift) parts.push("shift")
+  if (shortcut.alt) parts.push("alt")
+  parts.push(shortcut.key)
+
+  return parts.join("+")
+}
+
+const CommandPalette: Component<CommandPaletteProps> = (props) => {
+  const [query, setQuery] = createSignal("")
+  const [selectedCommandId, setSelectedCommandId] = createSignal<string | null>(null)
+  const [isPointerSelecting, setIsPointerSelecting] = createSignal(false)
+  let inputRef: HTMLInputElement | undefined
+  let listRef: HTMLDivElement | undefined
+
+  const categoryOrder = ["Custom Commands", "Instance", "Session", "Agent & Model", "Input & Focus", "System", "Other"] as const
+
+  type CommandGroup = { category: string; commands: Command[]; startIndex: number }
+  type ProcessedCommands = { groups: CommandGroup[]; ordered: Command[] }
+
+  const processedCommands = createMemo<ProcessedCommands>(() => {
+    const source = props.commands ?? []
+    const q = query().trim().toLowerCase()
+
+    const filtered = q
+      ? source.filter((cmd) => {
+          const label = typeof cmd.label === "function" ? cmd.label() : cmd.label
+          const labelMatch = label.toLowerCase().includes(q)
+          const descMatch = cmd.description.toLowerCase().includes(q)
+          const keywordMatch = cmd.keywords?.some((k) => k.toLowerCase().includes(q))
+          const categoryMatch = cmd.category?.toLowerCase().includes(q)
+          return labelMatch || descMatch || keywordMatch || categoryMatch
+        })
+      : source
+
+    const groupsMap = new Map<string, Command[]>()
+    for (const cmd of filtered) {
+      const category = cmd.category || "Other"
+      const list = groupsMap.get(category)
+      if (list) {
+        list.push(cmd)
+      } else {
+        groupsMap.set(category, [cmd])
+      }
+    }
+
+    const groups: CommandGroup[] = []
+    const ordered: Command[] = []
+    const processedCategories = new Set<string>()
+
+    const addGroup = (category: string) => {
+      const cmds = groupsMap.get(category)
+      if (!cmds || cmds.length === 0 || processedCategories.has(category)) return
+      groups.push({ category, commands: cmds, startIndex: ordered.length })
+      ordered.push(...cmds)
+      processedCategories.add(category)
+    }
+
+    for (const category of categoryOrder) {
+      addGroup(category)
+    }
+
+    for (const [category] of groupsMap) {
+      addGroup(category)
+    }
+
+    return { groups, ordered }
+  })
+
+  const groupedCommandList = () => processedCommands().groups
+  const orderedCommands = () => processedCommands().ordered
+  const selectedIndex = createMemo(() => {
+    const ordered = orderedCommands()
+    if (ordered.length === 0) return -1
+    const id = selectedCommandId()
+    if (!id) return 0
+    const index = ordered.findIndex((cmd) => cmd.id === id)
+    return index >= 0 ? index : 0
+  })
+
+  createEffect(() => {
+    if (props.open) {
+      setQuery("")
+      setSelectedCommandId(null)
+      setIsPointerSelecting(false)
+      setTimeout(() => inputRef?.focus(), 100)
+    }
+  })
+ 
+  createEffect(() => {
+    const ordered = orderedCommands()
+    if (ordered.length === 0) {
+      if (selectedCommandId() !== null) {
+        setSelectedCommandId(null)
+      }
+      return
+    }
+ 
+    const currentId = selectedCommandId()
+    if (!currentId || !ordered.some((cmd) => cmd.id === currentId)) {
+      setSelectedCommandId(ordered[0].id)
+    }
+  })
+
+
+  createEffect(() => {
+    const index = selectedIndex()
+    if (!listRef || index < 0) return
+
+    const selectedButton = listRef.querySelector(`[data-command-index="${index}"]`) as HTMLElement
+    if (selectedButton) {
+      selectedButton.scrollIntoView({ block: "nearest", behavior: "smooth" })
+    }
+  })
+
+  function handleKeyDown(e: KeyboardEvent) {
+    const ordered = orderedCommands()
+
+    if (e.key === "Escape") {
+      e.preventDefault()
+      e.stopPropagation()
+      props.onClose()
+      return
+    }
+
+    if (ordered.length === 0) {
+      if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter") {
+        e.preventDefault()
+        e.stopPropagation()
+      }
+      return
+    }
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault()
+      e.stopPropagation()
+      setIsPointerSelecting(false)
+      const current = selectedIndex()
+      const nextIndex = Math.min((current < 0 ? 0 : current) + 1, ordered.length - 1)
+      setSelectedCommandId(ordered[nextIndex]?.id ?? null)
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault()
+      e.stopPropagation()
+      setIsPointerSelecting(false)
+      const current = selectedIndex()
+      const nextIndex = current <= 0 ? ordered.length - 1 : current - 1
+      setSelectedCommandId(ordered[nextIndex]?.id ?? null)
+    } else if (e.key === "Enter") {
+      e.preventDefault()
+      e.stopPropagation()
+      const index = selectedIndex()
+      if (index < 0 || index >= ordered.length) return
+      const command = ordered[index]
+      if (!command) return
+      props.onExecute(command)
+      props.onClose()
+    }
+  }
+
+  function handleCommandClick(command: Command) {
+    props.onExecute(command)
+    props.onClose()
+  }
+
+  function handlePointerLeave() {
+    setIsPointerSelecting(false)
+  }
+ 
+  return (
+
+    <Dialog open={props.open} onOpenChange={(open) => !open && props.onClose()}>
+      <Dialog.Portal>
+        <Dialog.Overlay class="modal-overlay" />
+        <div class="fixed inset-0 z-50 flex items-start justify-center pt-[20vh]">
+          <Dialog.Content
+            class="modal-surface w-full max-w-2xl max-h-[60vh]"
+            onKeyDown={handleKeyDown}
+          >
+            <Dialog.Title class="sr-only">Command Palette</Dialog.Title>
+            <Dialog.Description class="sr-only">Search and execute commands</Dialog.Description>
+
+            <div class="modal-search-container">
+              <div class="flex items-center gap-3">
+                <svg class="w-5 h-5 modal-search-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+                  />
+                </svg>
+                <input
+                  ref={inputRef}
+                  type="text"
+                  value={query()}
+                  onInput={(e) => {
+                    setQuery(e.currentTarget.value)
+                    setSelectedCommandId(null)
+                  }}
+                  placeholder="Type a command or search..."
+                  class="modal-search-input"
+                />
+              </div>
+            </div>
+
+            <div
+              ref={listRef}
+              class="modal-list-container"
+              data-pointer-mode={isPointerSelecting() ? "pointer" : "keyboard"}
+              onPointerLeave={handlePointerLeave}
+            >
+              <Show
+                when={orderedCommands().length > 0}
+                fallback={<div class="modal-empty-state">No commands found for "{query()}"</div>}
+              >
+                <For each={groupedCommandList()}>
+                  {(group) => (
+                    <div class="py-2">
+                      <div class="modal-section-header">
+                        {group.category}
+                      </div>
+                      <For each={group.commands}>
+                        {(command, localIndex) => {
+                          const commandIndex = group.startIndex + localIndex()
+                          return (
+                            <button
+                              type="button"
+                              data-command-index={commandIndex}
+                              onClick={() => handleCommandClick(command)}
+                              class={`modal-item ${selectedCommandId() === command.id ? "modal-item-highlight" : ""}`}
+                              onPointerMove={(event) => {
+                                if (event.movementX === 0 && event.movementY === 0) return
+                                if (event.pointerType === "mouse" || event.pointerType === "pen" || event.pointerType === "touch") {
+                                  if (!isPointerSelecting()) {
+                                    setIsPointerSelecting(true)
+                                  }
+                                  setSelectedCommandId(command.id)
+                                }
+                              }}
+                            >
+                              <div class="flex-1 min-w-0">
+                                <div class="modal-item-label">
+                                  {typeof command.label === "function" ? command.label() : command.label}
+                                </div>
+                                <div class="modal-item-description">
+                                  {command.description}
+                                </div>
+                              </div>
+                              <Show when={command.shortcut}>
+                                <div class="mt-1">
+                                  <Kbd shortcut={buildShortcutString(command.shortcut)} />
+                                </div>
+                              </Show>
+                            </button>
+                          )
+                        }}
+                      </For>
+                    </div>
+                  )}
+                </For>
+              </Show>
+            </div>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}
+
+export default CommandPalette

packages/ui/src/components/diff-viewer.tsx

@@ -0,0 +1,103 @@
+import { createMemo, Show, onMount, createEffect } from "solid-js"
+import { DiffView, DiffModeEnum } from "@git-diff-view/solid"
+import type { DiffHighlighterLang } from "@git-diff-view/core"
+import { getLanguageFromPath } from "../lib/markdown"
+import { normalizeDiffText } from "../lib/diff-utils"
+import { setToolRenderCache } from "../lib/tool-render-cache"
+import type { DiffViewMode } from "../stores/preferences"
+
+interface ToolCallDiffViewerProps {
+  diffText: string
+  filePath?: string
+  theme: "light" | "dark"
+  mode: DiffViewMode
+  onRendered?: () => void
+  cachedHtml?: string
+  cacheKey?: string
+}
+
+type DiffData = {
+  oldFile?: { fileName?: string | null; fileLang?: string | null; content?: string | null }
+  newFile?: { fileName?: string | null; fileLang?: string | null; content?: string | null }
+  hunks: string[]
+}
+
+export function ToolCallDiffViewer(props: ToolCallDiffViewerProps) {
+  const diffData = createMemo<DiffData | null>(() => {
+    const normalized = normalizeDiffText(props.diffText)
+    if (!normalized) {
+      return null
+    }
+
+    const language = getLanguageFromPath(props.filePath) || "text"
+    const fileName = props.filePath || "diff"
+
+    return {
+      oldFile: {
+        fileName,
+        fileLang: (language || "text") as DiffHighlighterLang | null,
+      },
+      newFile: {
+        fileName,
+        fileLang: (language || "text") as DiffHighlighterLang | null,
+      },
+      hunks: [normalized],
+    }
+  })
+
+  let diffContainerRef: HTMLDivElement | undefined
+
+  const captureAndCacheHtml = () => {
+    if (diffContainerRef && props.cacheKey && !props.cachedHtml) {
+      // Extract the rendered HTML from DiffView container
+      const renderedHtml = diffContainerRef.innerHTML
+      if (renderedHtml) {
+        setToolRenderCache(props.cacheKey, {
+          text: props.diffText,
+          html: renderedHtml,
+          theme: props.theme,
+          mode: props.mode,
+        })
+      }
+    }
+    props.onRendered?.()
+  }
+
+  // Also capture HTML when diff data changes
+  createEffect(() => {
+    const data = diffData()
+    if (data && !props.cachedHtml) {
+      // Delay to allow DiffView to re-render with new data
+      setTimeout(captureAndCacheHtml, 100)
+    }
+  })
+
+  return (
+    <div class="tool-call-diff-viewer">
+      <Show
+        when={props.cachedHtml}
+        fallback={
+          <div ref={diffContainerRef}>
+            <Show
+              when={diffData()}
+              fallback={<pre class="tool-call-diff-fallback">{props.diffText}</pre>}
+            >
+              {(data) => (
+                <DiffView
+                  data={data()}
+                  diffViewMode={props.mode === "split" ? DiffModeEnum.Split : DiffModeEnum.Unified}
+                  diffViewTheme={props.theme}
+                  diffViewHighlight
+                  diffViewWrap={false}
+                  diffViewFontSize={13}
+                />
+              )}
+            </Show>
+          </div>
+        }
+      >
+        <div innerHTML={props.cachedHtml} />
+      </Show>
+    </div>
+  )
+}

packages/ui/src/components/empty-state.tsx

@@ -0,0 +1,51 @@
+import { Component } from "solid-js"
+import { Loader2 } from "lucide-solid"
+
+const codeNomadIcon = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
+
+interface EmptyStateProps {
+  onSelectFolder: () => void
+  isLoading?: boolean
+}
+
+const EmptyState: Component<EmptyStateProps> = (props) => {
+  return (
+    <div class="flex h-full w-full items-center justify-center bg-surface-secondary">
+      <div class="max-w-[500px] px-8 py-12 text-center">
+        <div class="mb-8 flex justify-center">
+          <img src={codeNomadIcon} alt="CodeNomad logo" class="h-24 w-auto" loading="lazy" />
+        </div>
+
+        <h1 class="mb-3 text-3xl font-semibold text-primary">CodeNomad</h1>
+        <p class="mb-8 text-base text-secondary">Select a folder to start coding with AI</p>
+
+
+        <button
+          onClick={props.onSelectFolder}
+          disabled={props.isLoading}
+          class="mb-4 button-primary"
+        >
+          {props.isLoading ? (
+            <>
+              <Loader2 class="h-4 w-4 animate-spin" />
+              Selecting...
+            </>
+          ) : (
+            "Select Folder"
+          )}
+        </button>
+
+        <p class="text-sm text-muted">
+          Keyboard shortcut: {navigator.platform.includes("Mac") ? "Cmd" : "Ctrl"}+N
+        </p>
+
+        <div class="mt-6 space-y-1 text-sm text-muted">
+          <p>Examples: ~/projects/my-app</p>
+          <p>You can have multiple instances of the same folder</p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default EmptyState

packages/ui/src/components/environment-variables-editor.tsx

@@ -0,0 +1,148 @@
+import { Component, createSignal, For, Show } from "solid-js"
+import { Plus, Trash2, Key, Globe } from "lucide-solid"
+import { useConfig } from "../stores/preferences"
+
+interface EnvironmentVariablesEditorProps {
+  disabled?: boolean
+}
+
+const EnvironmentVariablesEditor: Component<EnvironmentVariablesEditorProps> = (props) => {
+  const {
+    preferences,
+    addEnvironmentVariable,
+    removeEnvironmentVariable,
+    updateEnvironmentVariables,
+  } = useConfig()
+  const [envVars, setEnvVars] = createSignal<Record<string, string>>(preferences().environmentVariables || {})
+  const [newKey, setNewKey] = createSignal("")
+  const [newValue, setNewValue] = createSignal("")
+
+  const entries = () => Object.entries(envVars())
+
+  function handleAddVariable() {
+    const key = newKey().trim()
+    const value = newValue().trim()
+
+    if (!key) return
+
+    addEnvironmentVariable(key, value)
+    setEnvVars({ ...envVars(), [key]: value })
+    setNewKey("")
+    setNewValue("")
+  }
+
+  function handleRemoveVariable(key: string) {
+    removeEnvironmentVariable(key)
+    const { [key]: removed, ...rest } = envVars()
+    setEnvVars(rest)
+  }
+
+  function handleUpdateVariable(key: string, value: string) {
+    const updated = { ...envVars(), [key]: value }
+    setEnvVars(updated)
+    updateEnvironmentVariables(updated)
+  }
+
+  function handleKeyPress(e: KeyboardEvent) {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault()
+      handleAddVariable()
+    }
+  }
+
+  return (
+    <div class="space-y-3">
+      <div class="flex items-center gap-2 mb-3">
+        <Globe class="w-4 h-4 icon-muted" />
+        <span class="text-sm font-medium text-secondary">Environment Variables</span>
+        <span class="text-xs text-muted">
+          ({entries().length} variable{entries().length !== 1 ? "s" : ""})
+        </span>
+      </div>
+
+      {/* Existing variables */}
+      <Show when={entries().length > 0}>
+        <div class="space-y-2">
+          <For each={entries()}>
+            {([key, value]) => (
+              <div class="flex items-center gap-2">
+                <div class="flex-1 flex items-center gap-2">
+                  <Key class="w-3.5 h-3.5 icon-muted flex-shrink-0" />
+                  <input
+                    type="text"
+                    value={key}
+                    disabled={props.disabled}
+                    class="flex-1 px-2.5 py-1.5 text-sm bg-surface-secondary border border-base rounded text-muted cursor-not-allowed"
+                    placeholder="Variable name"
+                    title="Variable name (read-only)"
+                  />
+                  <input
+                    type="text"
+                    value={value}
+                    disabled={props.disabled}
+                    onInput={(e) => handleUpdateVariable(key, e.currentTarget.value)}
+                    class="flex-1 px-2.5 py-1.5 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed"
+                    placeholder="Variable value"
+                  />
+                </div>
+                <button
+                  onClick={() => handleRemoveVariable(key)}
+                  disabled={props.disabled}
+                  class="p-1.5 icon-muted icon-danger-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+                  title="Remove variable"
+                >
+                  <Trash2 class="w-3.5 h-3.5" />
+                </button>
+              </div>
+            )}
+          </For>
+        </div>
+      </Show>
+
+      {/* Add new variable */}
+      <div class="flex items-center gap-2 pt-2 border-t border-base">
+        <div class="flex-1 flex items-center gap-2">
+          <Key class="w-3.5 h-3.5 icon-muted flex-shrink-0" />
+          <input
+            type="text"
+            value={newKey()}
+            onInput={(e) => setNewKey(e.currentTarget.value)}
+            onKeyPress={handleKeyPress}
+            disabled={props.disabled}
+            class="flex-1 px-2.5 py-1.5 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed"
+            placeholder="Variable name"
+          />
+          <input
+            type="text"
+            value={newValue()}
+            onInput={(e) => setNewValue(e.currentTarget.value)}
+            onKeyPress={handleKeyPress}
+            disabled={props.disabled}
+            class="flex-1 px-2.5 py-1.5 text-sm bg-surface-base border border-base rounded text-primary focus-ring-accent disabled:opacity-50 disabled:cursor-not-allowed"
+            placeholder="Variable value"
+          />
+        </div>
+        <button
+          onClick={handleAddVariable}
+          disabled={props.disabled || !newKey().trim()}
+          class="p-1.5 icon-muted icon-accent-hover disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          title="Add variable"
+        >
+          <Plus class="w-3.5 h-3.5" />
+        </button>
+      </div>
+
+      <Show when={entries().length === 0}>
+        <div class="text-xs text-muted text-center py-2">
+          No environment variables configured. Add variables above to customize the OpenCode environment.
+        </div>
+      </Show>
+
+      <div class="text-xs text-muted mt-2">
+        These variables will be available in the OpenCode environment when starting instances.
+      </div>
+    </div>
+  )
+}
+
+export default EnvironmentVariablesEditor

packages/ui/src/components/file-picker.tsx

@@ -0,0 +1,221 @@
+import { Component, createSignal, createEffect, For, Show, onCleanup } from "solid-js"
+
+import type { OpencodeClient } from "@opencode-ai/sdk/client"
+
+interface FileItem {
+  path: string
+  added?: number
+  removed?: number
+  isGitFile: boolean
+}
+
+interface FilePickerProps {
+  open: boolean
+  onSelect: (path: string) => void
+  onNavigate: (direction: "up" | "down") => void
+  onClose: () => void
+  instanceClient: OpencodeClient
+  searchQuery: string
+  textareaRef?: HTMLTextAreaElement
+  workspaceFolder: string
+}
+
+const FilePicker: Component<FilePickerProps> = (props) => {
+  const [files, setFiles] = createSignal<FileItem[]>([])
+  const [selectedIndex, setSelectedIndex] = createSignal(0)
+  const [loading, setLoading] = createSignal(false)
+  const [allFiles, setAllFiles] = createSignal<FileItem[]>([])
+  const [isInitialized, setIsInitialized] = createSignal(false)
+
+  let containerRef: HTMLDivElement | undefined
+  let scrollContainerRef: HTMLDivElement | undefined
+
+  async function fetchFiles(searchQuery: string) {
+    console.log(`[FilePicker] Fetching files for query: "${searchQuery}"`)
+    setLoading(true)
+
+    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,
+          isGitFile: false,
+        }))
+        setAllFiles(scannedFiles)
+        console.log(`[FilePicker] Found ${scannedFiles.length} files`)
+      }
+
+      const filteredFiles = searchQuery.trim()
+        ? allFiles().filter((f) => f.path.toLowerCase().includes(searchQuery.toLowerCase()))
+        : allFiles()
+
+      console.log(`[FilePicker] Showing ${filteredFiles.length} files`)
+      setFiles(filteredFiles)
+      setSelectedIndex(0)
+
+      setTimeout(() => {
+        if (scrollContainerRef) {
+          scrollContainerRef.scrollTop = 0
+        }
+      }, 0)
+    } catch (error) {
+      console.error(`[FilePicker] Failed to fetch files:`, error)
+      setFiles([])
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  let lastQuery = ""
+
+  createEffect(() => {
+    console.log(
+      `[FilePicker] Effect triggered - open: ${props.open}, query: "${props.searchQuery}", isInitialized: ${isInitialized()}`,
+    )
+
+    if (props.open && !isInitialized()) {
+      setIsInitialized(true)
+      console.log("[FilePicker] First open - fetching files")
+      fetchFiles(props.searchQuery)
+      lastQuery = props.searchQuery
+      return
+    }
+
+    if (props.open && props.searchQuery !== lastQuery) {
+      console.log(`[FilePicker] Query changed from "${lastQuery}" to "${props.searchQuery}"`)
+      lastQuery = props.searchQuery
+      fetchFiles(props.searchQuery)
+    }
+  })
+
+  function scrollToSelected() {
+    setTimeout(() => {
+      const selectedElement = containerRef?.querySelector('[data-file-selected="true"]')
+      if (selectedElement) {
+        selectedElement.scrollIntoView({ block: "nearest", behavior: "smooth" })
+      }
+    }, 0)
+  }
+
+  function handleSelect(path: string) {
+    props.onSelect(path)
+  }
+
+  function handleNavigateUp() {
+    setSelectedIndex((prev) => {
+      const next = Math.max(prev - 1, 0)
+      scrollToSelected()
+      return next
+    })
+  }
+
+  function handleNavigateDown() {
+    setSelectedIndex((prev) => {
+      const next = Math.min(prev + 1, files().length - 1)
+      scrollToSelected()
+      return next
+    })
+  }
+
+  createEffect(() => {
+    if (!props.open) return
+    const listener = (e: KeyboardEvent) => {
+      if (!props.open) return
+      const fileList = files()
+
+      if (e.key === "Escape") {
+        e.preventDefault()
+        e.stopPropagation()
+        props.onClose()
+        return
+      }
+
+      if (fileList.length === 0) return
+
+      if (e.key === "ArrowDown") {
+        e.preventDefault()
+        e.stopPropagation()
+        handleNavigateDown()
+        props.onNavigate("down")
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault()
+        e.stopPropagation()
+        handleNavigateUp()
+        props.onNavigate("up")
+      } else if (e.key === "Enter") {
+        e.preventDefault()
+        e.stopPropagation()
+        if (fileList[selectedIndex()]) {
+          handleSelect(fileList[selectedIndex()].path)
+        }
+      }
+    }
+
+    document.addEventListener("keydown", listener, true)
+    onCleanup(() => document.removeEventListener("keydown", listener, true))
+  })
+
+  return (
+    <Show when={props.open}>
+      <div
+        ref={containerRef}
+        class="dropdown-surface bottom-full left-0 mb-2 max-w-2xl rounded-lg"
+        style={{ "z-index": 100 }}
+      >
+        <div ref={scrollContainerRef} class="dropdown-content max-h-96">
+          <Show
+            when={!loading() && isInitialized()}
+            fallback={
+              <div class="dropdown-loading">
+                <div class="spinner inline-block h-4 w-4 mr-2"></div>
+                <span>Loading files...</span>
+              </div>
+            }
+          >
+            <Show
+              when={files().length > 0}
+              fallback={<div class="dropdown-empty">No matching files</div>}
+            >
+              <For each={files()}>
+                {(file, index) => (
+                  <div
+                    data-file-selected={index() === selectedIndex()}
+                    class={`dropdown-item border-b px-4 py-2 font-mono text-sm ${
+                      index() === selectedIndex() ? "dropdown-item-highlight" : ""
+                    }`}
+                    style="border-color: var(--border-muted)"
+                    onClick={() => handleSelect(file.path)}
+                    onMouseEnter={() => setSelectedIndex(index())}
+                  >
+                    <div class="flex items-center justify-between">
+                      <span>{file.path}</span>
+                      <Show when={file.isGitFile && (file.added || file.removed)}>
+                        <div class="flex gap-2">
+                          <Show when={file.added}>
+                            <span class="dropdown-diff-added">+{file.added}</span>
+                          </Show>
+                          <Show when={file.removed}>
+                            <span class="dropdown-diff-removed">-{file.removed}</span>
+                          </Show>
+                        </div>
+                      </Show>
+                    </div>
+                  </div>
+                )}
+              </For>
+            </Show>
+          </Show>
+        </div>
+
+        <div class="dropdown-footer p-2">
+          <div class="flex items-center justify-between px-2">
+            <span>↑↓ Navigate • Enter Select • Esc Close</span>
+          </div>
+        </div>
+      </div>
+    </Show>
+  )
+}
+
+export default FilePicker

packages/ui/src/components/folder-selection-view.tsx

@@ -0,0 +1,385 @@
+import { Component, createSignal, Show, For, onMount, onCleanup, createEffect } from "solid-js"
+import { Folder, Clock, Trash2, FolderPlus, Settings, ChevronRight } from "lucide-solid"
+import { useConfig } from "../stores/preferences"
+import AdvancedSettingsModal from "./advanced-settings-modal"
+import Kbd from "./kbd"
+
+const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
+
+interface FolderSelectionViewProps {
+  onSelectFolder: (folder?: string, binaryPath?: string) => void
+  isLoading?: boolean
+  advancedSettingsOpen?: boolean
+  onAdvancedSettingsOpen?: () => void
+  onAdvancedSettingsClose?: () => void
+}
+
+const FolderSelectionView: Component<FolderSelectionViewProps> = (props) => {
+  const { recentFolders, removeRecentFolder, preferences, updateLastUsedBinary } = useConfig()
+  const [selectedIndex, setSelectedIndex] = createSignal(0)
+  const [focusMode, setFocusMode] = createSignal<"recent" | "new" | null>("recent")
+  const [selectedBinary, setSelectedBinary] = createSignal(preferences().lastUsedBinary || "opencode")
+  let recentListRef: HTMLDivElement | undefined
+ 
+  const folders = () => recentFolders()
+  const isLoading = () => Boolean(props.isLoading)
+
+  // Update selected binary when preferences change
+  createEffect(() => {
+    const lastUsed = preferences().lastUsedBinary
+    if (lastUsed && lastUsed !== selectedBinary()) {
+      setSelectedBinary(lastUsed)
+    }
+  })
+
+
+  function scrollToIndex(index: number) {
+    const container = recentListRef
+    if (!container) return
+    const element = container.querySelector(`[data-folder-index="${index}"]`) as HTMLElement | null
+    if (!element) return
+
+    const containerRect = container.getBoundingClientRect()
+    const elementRect = element.getBoundingClientRect()
+
+    if (elementRect.top < containerRect.top) {
+      container.scrollTop -= containerRect.top - elementRect.top
+    } else if (elementRect.bottom > containerRect.bottom) {
+      container.scrollTop += elementRect.bottom - containerRect.bottom
+    }
+  }
+
+
+  function handleKeyDown(e: KeyboardEvent) {
+    const normalizedKey = e.key.toLowerCase()
+    const isBrowseShortcut = (e.metaKey || e.ctrlKey) && !e.shiftKey && normalizedKey === "n"
+    const blockedKeys = [
+      "ArrowDown",
+      "ArrowUp",
+      "PageDown",
+      "PageUp",
+      "Home",
+      "End",
+      "Enter",
+      "Backspace",
+      "Delete",
+    ]
+
+    if (isLoading()) {
+      if (isBrowseShortcut || blockedKeys.includes(e.key)) {
+        e.preventDefault()
+      }
+      return
+    }
+
+    const folderList = folders()
+
+    if (isBrowseShortcut) {
+      e.preventDefault()
+      handleBrowse()
+      return
+    }
+
+    if (folderList.length === 0) return
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault()
+      const newIndex = Math.min(selectedIndex() + 1, folderList.length - 1)
+      setSelectedIndex(newIndex)
+      setFocusMode("recent")
+      scrollToIndex(newIndex)
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault()
+      const newIndex = Math.max(selectedIndex() - 1, 0)
+      setSelectedIndex(newIndex)
+      setFocusMode("recent")
+      scrollToIndex(newIndex)
+    } else if (e.key === "PageDown") {
+      e.preventDefault()
+      const pageSize = 5
+      const newIndex = Math.min(selectedIndex() + pageSize, folderList.length - 1)
+      setSelectedIndex(newIndex)
+      setFocusMode("recent")
+      scrollToIndex(newIndex)
+    } else if (e.key === "PageUp") {
+      e.preventDefault()
+      const pageSize = 5
+      const newIndex = Math.max(selectedIndex() - pageSize, 0)
+      setSelectedIndex(newIndex)
+      setFocusMode("recent")
+      scrollToIndex(newIndex)
+    } else if (e.key === "Home") {
+      e.preventDefault()
+      setSelectedIndex(0)
+      setFocusMode("recent")
+      scrollToIndex(0)
+    } else if (e.key === "End") {
+      e.preventDefault()
+      const newIndex = folderList.length - 1
+      setSelectedIndex(newIndex)
+      setFocusMode("recent")
+      scrollToIndex(newIndex)
+    } else if (e.key === "Enter") {
+      e.preventDefault()
+      handleEnterKey()
+    } else if (e.key === "Backspace" || e.key === "Delete") {
+      e.preventDefault()
+      if (folderList.length > 0 && focusMode() === "recent") {
+        const folder = folderList[selectedIndex()]
+        if (folder) {
+          handleRemove(folder.path)
+        }
+      }
+    }
+  }
+
+
+  function handleEnterKey() {
+    if (isLoading()) return
+    const folderList = folders()
+    const index = selectedIndex()
+
+    const folder = folderList[index]
+    if (folder) {
+      handleFolderSelect(folder.path)
+    }
+  }
+
+
+  onMount(() => {
+    window.addEventListener("keydown", handleKeyDown)
+    onCleanup(() => {
+      window.removeEventListener("keydown", handleKeyDown)
+    })
+  })
+
+  function formatRelativeTime(timestamp: number): string {
+    const seconds = Math.floor((Date.now() - timestamp) / 1000)
+    const minutes = Math.floor(seconds / 60)
+    const hours = Math.floor(minutes / 60)
+    const days = Math.floor(hours / 24)
+
+    if (days > 0) return `${days}d ago`
+    if (hours > 0) return `${hours}h ago`
+    if (minutes > 0) return `${minutes}m ago`
+    return "just now"
+  }
+
+  function handleFolderSelect(path: string) {
+    if (isLoading()) return
+    updateLastUsedBinary(selectedBinary())
+    props.onSelectFolder(path, selectedBinary())
+  }
+ 
+  function handleBrowse() {
+    if (isLoading()) return
+    updateLastUsedBinary(selectedBinary())
+    props.onSelectFolder(undefined, selectedBinary())
+  }
+
+
+  function handleBinaryChange(binary: string) {
+    setSelectedBinary(binary)
+  }
+
+  function handleRemove(path: string, e?: Event) {
+    if (isLoading()) return
+    e?.stopPropagation()
+    removeRecentFolder(path)
+
+    const folderList = folders()
+    if (selectedIndex() >= folderList.length && folderList.length > 0) {
+      setSelectedIndex(folderList.length - 1)
+    }
+  }
+
+
+  function getDisplayPath(path: string): string {
+    if (path.startsWith("/Users/")) {
+      return path.replace(/^\/Users\/[^/]+/, "~")
+    }
+    return path
+  }
+
+  return (
+    <>
+      <div
+        class="flex h-screen w-full items-start justify-center overflow-hidden py-6 relative"
+        style="background-color: var(--surface-secondary)"
+      >
+        <div
+          class="w-full max-w-3xl h-full px-8 pb-2 flex flex-col overflow-hidden"
+          aria-busy={isLoading() ? "true" : "false"}
+        >
+        <div class="mb-6 text-center shrink-0">
+          <div class="mb-3 flex justify-center">
+            <img src={codeNomadLogo} alt="CodeNomad logo" class="h-48 w-auto" loading="lazy" />
+          </div>
+          <h1 class="mb-2 text-3xl font-semibold text-primary">CodeNomad</h1>
+          <p class="text-base text-secondary">Select a folder to start coding with AI</p>
+        </div>
+
+ 
+          <div class="space-y-4 flex-1 min-h-0 overflow-hidden flex flex-col">
+
+            <Show
+              when={folders().length > 0}
+              fallback={
+                <div class="panel panel-empty-state flex-1">
+                  <div class="panel-empty-state-icon">
+                    <Clock class="w-12 h-12 mx-auto" />
+                  </div>
+                  <p class="panel-empty-state-title">No Recent Folders</p>
+                  <p class="panel-empty-state-description">Browse for a folder to get started</p>
+                </div>
+              }
+            >
+              <div class="panel flex flex-col flex-1 min-h-0">
+                <div class="panel-header">
+                  <h2 class="panel-title">Recent Folders</h2>
+                  <p class="panel-subtitle">
+                    {folders().length} {folders().length === 1 ? "folder" : "folders"} available
+                  </p>
+                </div>
+                <div class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto" ref={(el) => (recentListRef = el)}>
+                  <For each={folders()}>
+                    {(folder, index) => (
+                      <div
+                        class="panel-list-item"
+                        classList={{
+                          "panel-list-item-highlight": focusMode() === "recent" && selectedIndex() === index(),
+                          "panel-list-item-disabled": isLoading(),
+                        }}
+                      >
+                        <div class="flex items-center gap-2 w-full px-1">
+                          <button
+                            data-folder-index={index()}
+                            class="panel-list-item-content flex-1"
+                            disabled={isLoading()}
+                            onClick={() => handleFolderSelect(folder.path)}
+                            onMouseEnter={() => {
+                              if (isLoading()) return
+                              setFocusMode("recent")
+                              setSelectedIndex(index())
+                            }}
+                          >
+                            <div class="flex items-center justify-between gap-3 w-full">
+                              <div class="flex-1 min-w-0">
+                                <div class="flex items-center gap-2 mb-1">
+                                  <Folder class="w-4 h-4 flex-shrink-0 icon-muted" />
+                                  <span class="text-sm font-medium truncate text-primary">
+                                    {folder.path.split("/").pop()}
+                                  </span>
+                                </div>
+                                <div class="text-xs font-mono truncate pl-6 text-muted">
+                                  {getDisplayPath(folder.path)}
+                                </div>
+                                <div class="text-xs mt-1 pl-6 text-muted">
+                                  {formatRelativeTime(folder.lastAccessed)}
+                                </div>
+                              </div>
+                              <Show when={focusMode() === "recent" && selectedIndex() === index()}>
+                                <kbd class="kbd">↵</kbd>
+                              </Show>
+                            </div>
+                          </button>
+                          <button
+                            onClick={(e) => handleRemove(folder.path, e)}
+                            disabled={isLoading()}
+                            class="p-2 transition-all hover:bg-red-100 dark:hover:bg-red-900/30 opacity-70 hover:opacity-100 rounded"
+                            title="Remove from recent"
+                          >
+                            <Trash2 class="w-3.5 h-3.5 transition-colors icon-muted hover:text-red-600 dark:hover:text-red-400" />
+                          </button>
+                        </div>
+                      </div>
+                    )}
+                  </For>
+                </div>
+              </div>
+            </Show>
+
+            <div class="panel shrink-0">
+              <div class="panel-header">
+                <h2 class="panel-title">Browse for Folder</h2>
+                <p class="panel-subtitle">Select any folder on your computer</p>
+              </div>
+
+              <div class="panel-body">
+                <button
+                  onClick={handleBrowse}
+                  disabled={props.isLoading}
+                  class="button-primary w-full flex items-center justify-center text-sm disabled:cursor-not-allowed"
+                  onMouseEnter={() => setFocusMode("new")}
+                >
+                  <div class="flex items-center gap-2">
+                    <FolderPlus class="w-4 h-4" />
+                    <span>{props.isLoading ? "Opening..." : "Browse Folders"}</span>
+                  </div>
+                  <Kbd shortcut="cmd+n" class="ml-2" />
+                </button>
+              </div>
+
+              {/* Advanced settings section */}
+              <div class="panel-section w-full">
+                <button
+                  onClick={() => props.onAdvancedSettingsOpen?.()}
+                  class="panel-section-header w-full justify-between"
+                >
+                  <div class="flex items-center gap-2">
+                    <Settings class="w-4 h-4 icon-muted" />
+                    <span class="text-sm font-medium text-secondary">Advanced Settings</span>
+                  </div>
+                  <ChevronRight class="w-4 h-4 icon-muted" />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div class="mt-1 panel panel-footer shrink-0">
+            <div class="panel-footer-hints">
+              <Show when={folders().length > 0}>
+                <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">Del</kbd>
+                  <span>Remove</span>
+                </div>
+              </Show>
+              <div class="flex items-center gap-1.5">
+                <Kbd shortcut="cmd+n" />
+                <span>Browse</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <Show when={isLoading()}>
+          <div class="folder-loading-overlay">
+            <div class="folder-loading-indicator">
+              <div class="spinner" />
+              <p class="folder-loading-text">Starting instance…</p>
+              <p class="folder-loading-subtext">Hang tight while we prepare your workspace.</p>
+            </div>
+          </div>
+        </Show>
+      </div>
+
+      <AdvancedSettingsModal
+        open={Boolean(props.advancedSettingsOpen)}
+        onClose={() => props.onAdvancedSettingsClose?.()}
+        selectedBinary={selectedBinary()}
+        onBinaryChange={handleBinaryChange}
+        isLoading={props.isLoading}
+      />
+    </>
+  )
+}
+
+export default FolderSelectionView

packages/ui/src/components/hint-row.tsx

@@ -0,0 +1,12 @@
+import { Component, JSX } from "solid-js"
+
+interface HintRowProps {
+  children: JSX.Element
+  class?: string
+}
+
+const HintRow: Component<HintRowProps> = (props) => {
+  return <span class={`text-xs text-muted ${props.class || ""}`}>{props.children}</span>
+}
+
+export default HintRow

packages/ui/src/components/info-view.tsx

@@ -0,0 +1,161 @@
+import { Component, For, createSignal, createEffect, Show, onMount, onCleanup, createMemo } from "solid-js"
+import { instances, getInstanceLogs, isInstanceLogStreaming, setInstanceLogStreaming } from "../stores/instances"
+import { ChevronDown } from "lucide-solid"
+import InstanceInfo from "./instance-info"
+
+interface InfoViewProps {
+  instanceId: string
+}
+
+const logsScrollState = new Map<string, { scrollTop: number; autoScroll: boolean }>()
+
+const InfoView: Component<InfoViewProps> = (props) => {
+  let scrollRef: HTMLDivElement | undefined
+  const savedState = logsScrollState.get(props.instanceId)
+  const [autoScroll, setAutoScroll] = createSignal(savedState?.autoScroll ?? false)
+
+  const instance = () => instances().get(props.instanceId)
+  const logs = createMemo(() => getInstanceLogs(props.instanceId))
+  const streamingEnabled = createMemo(() => isInstanceLogStreaming(props.instanceId))
+
+  const handleEnableLogs = () => setInstanceLogStreaming(props.instanceId, true)
+  const handleDisableLogs = () => setInstanceLogStreaming(props.instanceId, false)
+ 
+  onMount(() => {
+
+    if (scrollRef && savedState) {
+      scrollRef.scrollTop = savedState.scrollTop
+    }
+  })
+
+  onCleanup(() => {
+    if (scrollRef) {
+      logsScrollState.set(props.instanceId, {
+        scrollTop: scrollRef.scrollTop,
+        autoScroll: autoScroll(),
+      })
+    }
+  })
+
+  createEffect(() => {
+    if (autoScroll() && scrollRef && logs().length > 0) {
+      scrollRef.scrollTop = scrollRef.scrollHeight
+    }
+  })
+
+  const handleScroll = () => {
+    if (!scrollRef) return
+
+    const isAtBottom = scrollRef.scrollHeight - scrollRef.scrollTop <= scrollRef.clientHeight + 50
+
+    setAutoScroll(isAtBottom)
+  }
+
+  const scrollToBottom = () => {
+    if (scrollRef) {
+      scrollRef.scrollTop = scrollRef.scrollHeight
+      setAutoScroll(true)
+    }
+  }
+
+  const formatTime = (timestamp: number) => {
+    const date = new Date(timestamp)
+    return date.toLocaleTimeString("en-US", {
+      hour12: false,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    })
+  }
+
+  const getLevelColor = (level: string) => {
+    switch (level) {
+      case "error":
+        return "log-level-error"
+      case "warn":
+        return "log-level-warn"
+      case "debug":
+        return "log-level-debug"
+      default:
+        return "log-level-default"
+    }
+  }
+
+  return (
+    <div class="log-container">
+      <div class="flex-1 flex flex-col lg:flex-row gap-4 p-4 overflow-hidden">
+        <div class="lg:w-80 flex-shrink-0 overflow-y-auto">
+          <Show when={instance()}>{(inst) => <InstanceInfo instance={inst()} />}</Show>
+        </div>
+
+        <div class="panel flex-1 flex flex-col min-h-0 overflow-hidden">
+          <div class="log-header">
+            <h2 class="panel-title">Server Logs</h2>
+            <div class="flex items-center gap-2">
+              <Show
+                when={streamingEnabled()}
+                fallback={
+                  <button type="button" class="button-tertiary" onClick={handleEnableLogs}>
+                    Show server logs
+                  </button>
+                }
+              >
+                <button type="button" class="button-tertiary" onClick={handleDisableLogs}>
+                  Hide server logs
+                </button>
+              </Show>
+            </div>
+          </div>
+ 
+          <div
+            ref={scrollRef}
+            onScroll={handleScroll}
+            class="log-content"
+          >
+            <Show
+              when={streamingEnabled()}
+              fallback={
+                <div class="log-paused-state">
+                  <p class="log-paused-title">Server logs are paused</p>
+                  <p class="log-paused-description">Enable streaming to watch your OpenCode server activity.</p>
+                  <button type="button" class="button-primary" onClick={handleEnableLogs}>
+                    Show server logs
+                  </button>
+                </div>
+              }
+            >
+              <Show
+                when={logs().length > 0}
+                fallback={<div class="log-empty-state">Waiting for server output...</div>}
+              >
+                <For each={logs()}>
+                  {(entry) => (
+                    <div class="log-entry">
+                      <span class="log-timestamp">
+                        {formatTime(entry.timestamp)}
+                      </span>
+                      <span class={`log-message ${getLevelColor(entry.level)}`}>{entry.message}</span>
+                    </div>
+                  )}
+                </For>
+              </Show>
+            </Show>
+          </div>
+ 
+          <Show when={!autoScroll() && streamingEnabled()}>
+            <button
+              onClick={scrollToBottom}
+              class="scroll-to-bottom"
+            >
+              <ChevronDown class="w-4 h-4" />
+              Scroll to bottom
+            </button>
+          </Show>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+
+export default InfoView

packages/ui/src/components/instance-disconnected-modal.tsx

@@ -0,0 +1,47 @@
+import { Dialog } from "@kobalte/core/dialog"
+
+interface InstanceDisconnectedModalProps {
+  open: boolean
+  folder?: string
+  reason?: string
+  onClose: () => void
+}
+
+export default function InstanceDisconnectedModal(props: InstanceDisconnectedModalProps) {
+  const folderLabel = props.folder || "this workspace"
+  const reasonLabel = props.reason || "The server stopped responding"
+
+  return (
+    <Dialog open={props.open} modal>
+      <Dialog.Portal>
+        <Dialog.Overlay class="modal-overlay" />
+        <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <Dialog.Content class="modal-surface w-full max-w-md p-6 flex flex-col gap-6">
+            <div>
+              <Dialog.Title class="text-xl font-semibold text-primary">Instance Disconnected</Dialog.Title>
+              <Dialog.Description class="text-sm text-secondary mt-2">
+                {folderLabel} can no longer be reached. Close the tab to continue working.
+              </Dialog.Description>
+            </div>
+
+            <div class="rounded-lg border border-base bg-surface-secondary p-4 text-sm text-secondary">
+              <p class="font-medium text-primary">Details</p>
+              <p class="mt-2 text-secondary">{reasonLabel}</p>
+              {props.folder && (
+                <p class="mt-2 text-secondary">
+                  Folder: <span class="font-mono text-primary break-all">{props.folder}</span>
+                </p>
+              )}
+            </div>
+
+            <div class="flex justify-end">
+              <button type="button" class="selector-button selector-button-primary" onClick={props.onClose}>
+                Close Instance
+              </button>
+            </div>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}

packages/ui/src/components/instance-info.tsx

@@ -0,0 +1,339 @@
+import { Component, Show, For, createSignal, createEffect, onCleanup } from "solid-js"
+import type { Instance, RawMcpStatus } from "../types/instance"
+import { fetchLspStatus, updateInstance } from "../stores/instances"
+
+interface InstanceInfoProps {
+  instance: Instance
+  compact?: boolean
+}
+
+type ParsedMcpStatus = {
+  name: string
+  status: "running" | "stopped" | "error"
+  error?: string
+}
+
+function parseMcpStatus(status: RawMcpStatus): ParsedMcpStatus[] {
+  if (!status || typeof status !== "object") return []
+
+  const result: ParsedMcpStatus[] = []
+
+  for (const [name, value] of Object.entries(status)) {
+    if (!value || typeof value !== "object") continue
+    const rawStatus = (value as { status?: string }).status
+    if (!rawStatus) continue
+
+    let mappedStatus: ParsedMcpStatus["status"]
+    if (rawStatus === "connected") {
+      mappedStatus = "running"
+    } else if (rawStatus === "failed") {
+      mappedStatus = "error"
+    } else {
+      mappedStatus = "stopped"
+    }
+
+    result.push({
+      name,
+      status: mappedStatus,
+      error: typeof (value as { error?: unknown }).error === "string" ? (value as { error?: string }).error : undefined,
+    })
+  }
+
+  return result
+}
+
+const pendingMetadataRequests = new Set<string>()
+
+const InstanceInfo: Component<InstanceInfoProps> = (props) => {
+  const [isLoadingMetadata, setIsLoadingMetadata] = createSignal(true)
+
+  const metadata = () => props.instance.metadata
+  const mcpServers = () => {
+    const status = metadata()?.mcpStatus
+    return status ? parseMcpStatus(status) : []
+  }
+  const lspServers = () => metadata()?.lspStatus ?? []
+
+  createEffect(() => {
+    const instance = props.instance
+    const instanceId = instance.id
+    const client = instance.client
+    const hasMetadata = Boolean(instance.metadata)
+
+    if (!client) {
+      setIsLoadingMetadata(false)
+      pendingMetadataRequests.delete(instanceId)
+      return
+    }
+
+    if (hasMetadata) {
+      setIsLoadingMetadata(false)
+      pendingMetadataRequests.delete(instanceId)
+      return
+    }
+
+    if (pendingMetadataRequests.has(instanceId)) {
+      setIsLoadingMetadata(true)
+      return
+    }
+
+    let cancelled = false
+    pendingMetadataRequests.add(instanceId)
+    setIsLoadingMetadata(true)
+
+    void (async () => {
+      try {
+        const [projectResult, mcpResult, lspResult] = await Promise.allSettled([
+          client.project.current(),
+          client.mcp.status(),
+          fetchLspStatus(instanceId),
+        ])
+
+        if (cancelled) {
+          return
+        }
+
+        const project = projectResult.status === "fulfilled" ? projectResult.value.data : undefined
+        const mcpStatus = mcpResult.status === "fulfilled" ? (mcpResult.value.data as RawMcpStatus) : undefined
+        const lspStatus = lspResult.status === "fulfilled" ? lspResult.value ?? [] : undefined
+
+        const nextMetadata = {
+          ...(instance.metadata ?? {}),
+          ...(project ? { project } : {}),
+          ...(mcpStatus ? { mcpStatus } : {}),
+          ...(lspStatus ? { lspStatus } : {}),
+        }
+
+        if (!nextMetadata.version) {
+          nextMetadata.version = "0.15.8"
+        }
+
+        updateInstance(instanceId, { metadata: nextMetadata })
+      } catch (error) {
+        if (!cancelled) {
+          console.error("Failed to load instance metadata:", error)
+        }
+      } finally {
+        pendingMetadataRequests.delete(instanceId)
+        if (!cancelled) {
+          setIsLoadingMetadata(false)
+        }
+      }
+    })()
+
+    onCleanup(() => {
+      cancelled = true
+    })
+  })
+
+  return (
+    <div class="panel">
+      <div class="panel-header">
+        <h2 class="panel-title">Instance Information</h2>
+      </div>
+      <div class="panel-body space-y-3">
+        <div>
+          <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">Folder</div>
+          <div class="text-xs text-primary font-mono break-all px-2 py-1.5 rounded border bg-surface-secondary border-base">
+            {props.instance.folder}
+          </div>
+        </div>
+
+        <Show when={!isLoadingMetadata() && metadata()?.project}>
+          {(project) => (
+            <>
+              <div>
+                <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
+                  Project
+                </div>
+                <div class="text-xs font-mono px-2 py-1.5 rounded border truncate bg-surface-secondary border-base text-primary">
+                  {project().id}
+                </div>
+              </div>
+
+              <Show when={project().vcs}>
+                <div>
+                  <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
+                    Version Control
+                  </div>
+                  <div class="flex items-center gap-2 text-xs text-primary">
+                    <svg
+                      class="w-3.5 h-3.5"
+                      style="color: var(--status-warning);"
+                      fill="currentColor"
+                      viewBox="0 0 24 24"
+                    >
+                      <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z" />
+                    </svg>
+                    <span class="capitalize">{project().vcs}</span>
+                  </div>
+                </div>
+              </Show>
+            </>
+          )}
+        </Show>
+
+        <Show when={metadata()?.version}>
+          <div>
+            <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
+              OpenCode Version
+            </div>
+            <div class="text-xs px-2 py-1.5 rounded border bg-surface-secondary border-base text-primary">
+              v{metadata()?.version}
+            </div>
+          </div>
+        </Show>
+
+        <Show when={props.instance.binaryPath}>
+          <div>
+            <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1">
+              Binary Path
+            </div>
+            <div class="text-xs font-mono break-all px-2 py-1.5 rounded border bg-surface-secondary border-base text-primary">
+              {props.instance.binaryPath}
+            </div>
+          </div>
+        </Show>
+
+        <Show when={props.instance.environmentVariables && Object.keys(props.instance.environmentVariables).length > 0}>
+          <div>
+            <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1.5">
+              Environment Variables ({Object.keys(props.instance.environmentVariables!).length})
+            </div>
+            <div class="space-y-1">
+              <For each={Object.entries(props.instance.environmentVariables!)}>
+                {([key, value]) => (
+                  <div class="flex items-center gap-2 px-2 py-1.5 rounded border bg-surface-secondary border-base">
+                    <span class="text-xs font-mono font-medium flex-1 text-primary" title={key}>
+                      {key}
+                    </span>
+                    <span class="text-xs font-mono flex-1 text-secondary" title={value}>
+                      {value}
+                    </span>
+                  </div>
+                )}
+              </For>
+            </div>
+          </div>
+        </Show>
+
+        <Show when={!isLoadingMetadata() && lspServers().length > 0}>
+          <div>
+            <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1.5">
+              LSP Servers
+            </div>
+            <div class="space-y-1.5">
+              <For each={lspServers()}>
+                {(server) => (
+                  <div class="px-2 py-1.5 rounded border bg-surface-secondary border-base">
+                    <div class="flex items-center justify-between gap-2">
+                      <div class="flex flex-col flex-1 min-w-0">
+                        <span class="text-xs text-primary font-medium truncate">{server.name ?? server.id}</span>
+                        <span class="text-[11px] text-secondary truncate" title={server.root}>
+                          {server.root}
+                        </span>
+                      </div>
+                      <div class="flex items-center gap-1.5 flex-shrink-0 text-xs text-secondary">
+                        <div class={`status-dot ${server.status === "connected" ? "ready animate-pulse" : "error"}`} />
+                        <span>{server.status === "connected" ? "Connected" : "Error"}</span>
+                      </div>
+                    </div>
+                  </div>
+                )}
+              </For>
+            </div>
+          </div>
+        </Show>
+
+        <Show when={!isLoadingMetadata() && mcpServers().length > 0}>
+          <div>
+            <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1.5">
+              MCP Servers
+            </div>
+            <div class="space-y-1.5">
+              <For each={mcpServers()}>
+                {(server) => (
+                  <div class="px-2 py-1.5 rounded border bg-surface-secondary border-base">
+                    <div class="flex items-center justify-between gap-2">
+                      <span class="text-xs text-primary font-medium truncate">{server.name}</span>
+                      <div class="flex items-center gap-1.5 flex-shrink-0 text-xs text-secondary">
+                        <div
+                          class={`status-dot ${
+                            server.status === "running"
+                              ? "ready animate-pulse"
+                              : server.status === "error"
+                                ? "error"
+                                : "stopped"
+                          }`}
+                        />
+                        <span>
+                          {
+                            server.status === "running"
+                              ? "Connected"
+                              : server.status === "error"
+                                ? "Error"
+                                : "Disabled"
+                          }
+                        </span>
+                      </div>
+                    </div>
+                    <Show when={server.error}>
+                      {(error) => (
+                        <div class="text-[11px] mt-1 break-words" style={{ color: "var(--status-error)" }}>
+                          {error()}
+                        </div>
+                      )}
+                    </Show>
+                  </div>
+                )}
+              </For>
+            </div>
+          </div>
+        </Show>
+
+        <Show when={isLoadingMetadata()}>
+          <div class="text-xs text-muted py-1">
+            <div class="flex items-center gap-1.5">
+              <svg class="animate-spin h-3 w-3 icon-muted" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                <path
+                  class="opacity-75"
+                  fill="currentColor"
+                  d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                />
+              </svg>
+              Loading...
+            </div>
+          </div>
+        </Show>
+
+        <div>
+          <div class="text-xs font-medium text-muted uppercase tracking-wide mb-1.5">Server</div>
+          <div class="space-y-1 text-xs">
+            <div class="flex justify-between items-center">
+              <span class="text-secondary">Port:</span>
+              <span class="text-primary font-mono">{props.instance.port}</span>
+            </div>
+            <div class="flex justify-between items-center">
+              <span class="text-secondary">PID:</span>
+              <span class="text-primary font-mono">{props.instance.pid}</span>
+            </div>
+            <div class="flex justify-between items-center">
+              <span class="text-secondary">Status:</span>
+              <span
+                class={`status-badge ${props.instance.status}`}
+              >
+                <div
+                  class={`status-dot ${props.instance.status === "ready" ? "ready" : props.instance.status === "starting" ? "starting" : props.instance.status === "error" ? "error" : "stopped"} ${props.instance.status === "ready" || props.instance.status === "starting" ? "animate-pulse" : ""}`}
+                />
+                {props.instance.status}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default InstanceInfo

packages/ui/src/components/instance-tab.tsx

@@ -0,0 +1,59 @@
+import { Component } from "solid-js"
+import type { Instance } from "../types/instance"
+import { FolderOpen, X } from "lucide-solid"
+
+interface InstanceTabProps {
+  instance: Instance
+  active: boolean
+  onSelect: () => void
+  onClose: () => void
+}
+
+function formatFolderName(path: string, instances: Instance[], currentInstance: Instance): string {
+  const name = path.split("/").pop() || path
+
+  const duplicates = instances.filter((i) => {
+    const iName = i.folder.split("/").pop() || i.folder
+    return iName === name
+  })
+
+  if (duplicates.length > 1) {
+    const index = duplicates.findIndex((i) => i.id === currentInstance.id)
+    return `~/${name} (${index + 1})`
+  }
+
+  return `~/${name}`
+}
+
+const InstanceTab: Component<InstanceTabProps> = (props) => {
+  return (
+    <div class="group">
+      <button
+        class={`tab-base ${props.active ? "tab-active" : "tab-inactive"}`}
+        onClick={props.onSelect}
+        title={props.instance.folder}
+        role="tab"
+        aria-selected={props.active}
+      >
+        <FolderOpen class="w-4 h-4 flex-shrink-0" />
+        <span class="tab-label">
+          {props.instance.folder.split("/").pop() || props.instance.folder}
+        </span>
+        <span
+          class="tab-close ml-auto"
+          onClick={(e) => {
+            e.stopPropagation()
+            props.onClose()
+          }}
+          role="button"
+          tabIndex={0}
+          aria-label="Close instance"
+        >
+          <X class="w-3 h-3" />
+        </span>
+      </button>
+    </div>
+  )
+}
+
+export default InstanceTab

packages/ui/src/components/instance-tabs.tsx

@@ -0,0 +1,54 @@
+import { Component, For, Show } from "solid-js"
+import type { Instance } from "../types/instance"
+import InstanceTab from "./instance-tab"
+import KeyboardHint from "./keyboard-hint"
+import { Plus } from "lucide-solid"
+import { keyboardRegistry } from "../lib/keyboard-registry"
+
+interface InstanceTabsProps {
+  instances: Map<string, Instance>
+  activeInstanceId: string | null
+  onSelect: (instanceId: string) => void
+  onClose: (instanceId: string) => void
+  onNew: () => void
+}
+
+const InstanceTabs: Component<InstanceTabsProps> = (props) => {
+  return (
+    <div class="tab-bar tab-bar-instance">
+      <div class="tab-container" role="tablist">
+        <div class="flex items-center gap-1 overflow-x-auto">
+          <For each={Array.from(props.instances.entries())}>
+            {([id, instance]) => (
+              <InstanceTab
+                instance={instance}
+                active={id === props.activeInstanceId}
+                onSelect={() => props.onSelect(id)}
+                onClose={() => props.onClose(id)}
+              />
+            )}
+          </For>
+          <button
+            class="new-tab-button"
+            onClick={props.onNew}
+            title="New instance (Cmd/Ctrl+N)"
+            aria-label="New instance"
+          >
+            <Plus class="w-4 h-4" />
+          </button>
+        </div>
+        <Show when={Array.from(props.instances.entries()).length > 1}>
+          <div class="flex-shrink-0 ml-4">
+            <KeyboardHint
+              shortcuts={[keyboardRegistry.get("instance-prev")!, keyboardRegistry.get("instance-next")!].filter(
+                Boolean,
+              )}
+            />
+          </div>
+        </Show>
+      </div>
+    </div>
+  )
+}
+
+export default InstanceTabs

packages/ui/src/components/instance-welcome-view.tsx

@@ -0,0 +1,313 @@
+import { Component, createSignal, Show, For, createEffect, onMount, onCleanup, createMemo } from "solid-js"
+import type { Instance } from "../types/instance"
+import { getParentSessions, createSession, setActiveParentSession } from "../stores/sessions"
+import InstanceInfo from "./instance-info"
+import KeyboardHint from "./keyboard-hint"
+import Kbd from "./kbd"
+import { keyboardRegistry, type KeyboardShortcut } from "../lib/keyboard-registry"
+import { isMac } from "../lib/keyboard-utils"
+
+
+interface InstanceWelcomeViewProps {
+  instance: Instance
+}
+
+const InstanceWelcomeView: Component<InstanceWelcomeViewProps> = (props) => {
+  const [isCreating, setIsCreating] = createSignal(false)
+  const [selectedIndex, setSelectedIndex] = createSignal(0)
+  const [focusMode, setFocusMode] = createSignal<"sessions" | "new-session" | null>("sessions")
+
+  const parentSessions = () => getParentSessions(props.instance.id)
+  const newSessionShortcut = createMemo<KeyboardShortcut>(() => {
+    const registered = keyboardRegistry.get("session-new")
+    if (registered) return registered
+    return {
+      id: "session-new-display",
+      key: "n",
+      modifiers: {
+        shift: true,
+        meta: isMac(),
+        ctrl: !isMac(),
+      },
+      handler: () => {},
+      description: "New Session",
+      context: "global",
+    }
+  })
+  const newSessionShortcutString = createMemo(() => (isMac() ? "cmd+shift+n" : "ctrl+shift+n"))
+
+  createEffect(() => {
+    const sessions = parentSessions()
+    if (sessions.length === 0) {
+      setFocusMode("new-session")
+      setSelectedIndex(0)
+    } else {
+      setFocusMode("sessions")
+      setSelectedIndex(0)
+    }
+  })
+
+  function scrollToIndex(index: number) {
+    const element = document.querySelector(`[data-session-index="${index}"]`)
+    if (element) {
+      element.scrollIntoView({ block: "nearest", behavior: "auto" })
+    }
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    const sessions = parentSessions()
+
+    if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === "n") {
+      e.preventDefault()
+      handleNewSession()
+      return
+    }
+
+    if (sessions.length === 0) return
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault()
+      const newIndex = Math.min(selectedIndex() + 1, sessions.length - 1)
+      setSelectedIndex(newIndex)
+      setFocusMode("sessions")
+      scrollToIndex(newIndex)
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault()
+      const newIndex = Math.max(selectedIndex() - 1, 0)
+      setSelectedIndex(newIndex)
+      setFocusMode("sessions")
+      scrollToIndex(newIndex)
+    } else if (e.key === "PageDown") {
+      e.preventDefault()
+      const pageSize = 5
+      const newIndex = Math.min(selectedIndex() + pageSize, sessions.length - 1)
+      setSelectedIndex(newIndex)
+      setFocusMode("sessions")
+      scrollToIndex(newIndex)
+    } else if (e.key === "PageUp") {
+      e.preventDefault()
+      const pageSize = 5
+      const newIndex = Math.max(selectedIndex() - pageSize, 0)
+      setSelectedIndex(newIndex)
+      setFocusMode("sessions")
+      scrollToIndex(newIndex)
+    } else if (e.key === "Home") {
+      e.preventDefault()
+      setSelectedIndex(0)
+      setFocusMode("sessions")
+      scrollToIndex(0)
+    } else if (e.key === "End") {
+      e.preventDefault()
+      const newIndex = sessions.length - 1
+      setSelectedIndex(newIndex)
+      setFocusMode("sessions")
+      scrollToIndex(newIndex)
+    } else if (e.key === "Enter") {
+      e.preventDefault()
+      handleEnterKey()
+    }
+  }
+
+  async function handleEnterKey() {
+    const sessions = parentSessions()
+    const index = selectedIndex()
+
+    if (index < sessions.length) {
+      await handleSessionSelect(sessions[index].id)
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener("keydown", handleKeyDown)
+    onCleanup(() => {
+      window.removeEventListener("keydown", handleKeyDown)
+    })
+  })
+
+  function formatRelativeTime(timestamp: number): string {
+    const seconds = Math.floor((Date.now() - timestamp) / 1000)
+    const minutes = Math.floor(seconds / 60)
+    const hours = Math.floor(minutes / 60)
+    const days = Math.floor(hours / 24)
+
+    if (days > 0) return `${days}d ago`
+    if (hours > 0) return `${hours}h ago`
+    if (minutes > 0) return `${minutes}m ago`
+    return "just now"
+  }
+
+  function formatTimestamp(timestamp: number): string {
+    return new Date(timestamp).toLocaleString()
+  }
+
+  async function handleSessionSelect(sessionId: string) {
+    setActiveParentSession(props.instance.id, sessionId)
+  }
+
+  async function handleNewSession() {
+    if (isCreating()) return
+
+    setIsCreating(true)
+    try {
+      const session = await createSession(props.instance.id)
+      setActiveParentSession(props.instance.id, session.id)
+    } catch (error) {
+      console.error("Failed to create session:", error)
+    } finally {
+      setIsCreating(false)
+    }
+  }
+
+  return (
+    <div class="flex-1 flex flex-col overflow-hidden bg-surface-secondary">
+      <div class="flex-1 flex flex-col lg:flex-row gap-4 p-4 overflow-auto">
+        <div class="flex-1 flex flex-col gap-4 min-h-0">
+          <Show
+            when={parentSessions().length > 0}
+            fallback={
+              <div class="panel panel-empty-state flex-1 flex flex-col justify-center">
+                <div class="panel-empty-state-icon">
+                  <svg class="w-12 h-12 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      stroke-width="2"
+                      d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
+                    />
+                  </svg>
+                </div>
+                <p class="panel-empty-state-title">No Previous Sessions</p>
+                <p class="panel-empty-state-description">Create a new session below to get started</p>
+              </div>
+            }
+          >
+            <div class="panel flex flex-col flex-1 min-h-0">
+              <div class="panel-header">
+                <h2 class="panel-title">Resume Session</h2>
+                <p class="panel-subtitle">
+                  {parentSessions().length} {parentSessions().length === 1 ? "session" : "sessions"} available
+                </p>
+              </div>
+              <div class="panel-list panel-list--fill flex-1 min-h-0 overflow-auto">
+                <For each={parentSessions()}>
+                  {(session, index) => (
+                    <div 
+                      class="panel-list-item"
+                      classList={{
+                        "panel-list-item-highlight": focusMode() === "sessions" && selectedIndex() === index(),
+                      }}
+                    >
+                      <button
+                        data-session-index={index()}
+                        class="panel-list-item-content group w-full"
+                        onClick={() => handleSessionSelect(session.id)}
+                        onMouseEnter={() => {
+                          setFocusMode("sessions")
+                          setSelectedIndex(index())
+                        }}
+                      >
+                        <div class="flex items-center justify-between gap-3 w-full">
+                          <div class="flex-1 min-w-0">
+                            <div class="flex items-center gap-2">
+                              <span
+                                class="text-sm font-medium text-primary truncate transition-colors"
+                                classList={{
+                                  "text-accent":
+                                    focusMode() === "sessions" && selectedIndex() === index(),
+                                }}
+                              >
+                                {session.title || "Untitled Session"}
+                              </span>
+                            </div>
+                            <div class="flex items-center gap-3 text-xs text-muted mt-0.5">
+                              <span>{session.agent}</span>
+                              <span>•</span>
+                              <span>{formatRelativeTime(session.time.updated)}</span>
+                            </div>
+                          </div>
+                          <Show when={focusMode() === "sessions" && selectedIndex() === index()}>
+                            <kbd class="kbd flex-shrink-0">↵</kbd>
+                          </Show>
+                        </div>
+                      </button>
+                    </div>
+                  )}
+                </For>
+              </div>
+            </div>
+          </Show>
+
+          <div class="panel flex-shrink-0">
+            <div class="panel-header">
+              <h2 class="panel-title">Start New Session</h2>
+              <p class="panel-subtitle">We’ll reuse your last agent/model automatically</p>
+            </div>
+            <div class="panel-body">
+              <div class="space-y-3">
+                <button
+                  type="button"
+                  class="button-primary w-full flex items-center justify-center text-sm disabled:cursor-not-allowed"
+                  onClick={handleNewSession}
+                  disabled={isCreating()}
+                >
+                  <div class="flex items-center gap-2">
+                    {isCreating() ? (
+                      <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                        <path
+                          class="opacity-75"
+                          fill="currentColor"
+                          d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                        />
+                      </svg>
+                    ) : (
+                      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                      </svg>
+                    )}
+                    <span>Create Session</span>
+                  </div>
+                  <Kbd shortcut={newSessionShortcutString()} class="ml-2" />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="lg:w-80 flex-shrink-0">
+          <div class="sticky top-0">
+            <InstanceInfo instance={props.instance} />
+          </div>
+        </div>
+      </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">PgUp</kbd>
+            <kbd class="kbd">PgDn</kbd>
+            <span>Jump</span>
+          </div>
+          <div class="flex items-center gap-1.5">
+            <kbd class="kbd">Home</kbd>
+            <kbd class="kbd">End</kbd>
+            <span>First/Last</span>
+          </div>
+          <div class="flex items-center gap-1.5">
+            <kbd class="kbd">Enter</kbd>
+            <span>Resume</span>
+          </div>
+          <KeyboardHint shortcuts={[newSessionShortcut()]} separator="" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default InstanceWelcomeView
+

packages/ui/src/components/instance/instance-shell.tsx

@@ -0,0 +1,173 @@
+import { Show, createMemo, createSignal, type Component } from "solid-js"
+import type { Accessor } from "solid-js"
+import type { Instance } from "../../types/instance"
+import type { Command } from "../../lib/commands"
+import { activeParentSessionId, activeSessionId as activeSessionMap, getSessionFamily, setActiveSession } from "../../stores/sessions"
+import { keyboardRegistry, type KeyboardShortcut } from "../../lib/keyboard-registry"
+import { buildCustomCommandEntries } from "../../lib/command-utils"
+import { getCommands as getInstanceCommands } from "../../stores/commands"
+import { isOpen as isCommandPaletteOpen, hideCommandPalette } from "../../stores/command-palette"
+import SessionList from "../session-list"
+import KeyboardHint from "../keyboard-hint"
+import InstanceWelcomeView from "../instance-welcome-view"
+import InfoView from "../info-view"
+import AgentSelector from "../agent-selector"
+import ModelSelector from "../model-selector"
+import CommandPalette from "../command-palette"
+import ContextUsagePanel from "../session/context-usage-panel"
+import SessionView from "../session/session-view"
+
+interface InstanceShellProps {
+  instance: Instance
+  escapeInDebounce: boolean
+  paletteCommands: Accessor<Command[]>
+  onCloseSession: (sessionId: string) => Promise<void> | void
+  onNewSession: () => Promise<void> | void
+  handleSidebarAgentChange: (sessionId: string, agent: string) => Promise<void>
+  handleSidebarModelChange: (sessionId: string, model: { providerId: string; modelId: string }) => Promise<void>
+  onExecuteCommand: (command: Command) => void
+}
+
+const DEFAULT_SESSION_SIDEBAR_WIDTH = 280
+
+const InstanceShell: Component<InstanceShellProps> = (props) => {
+  const [sessionSidebarWidth, setSessionSidebarWidth] = createSignal(DEFAULT_SESSION_SIDEBAR_WIDTH)
+
+  const activeSessions = createMemo(() => {
+    const parentId = activeParentSessionId().get(props.instance.id)
+    if (!parentId) return new Map<string, ReturnType<typeof getSessionFamily>[number]>()
+    const sessionFamily = getSessionFamily(props.instance.id, parentId)
+    return new Map(sessionFamily.map((s) => [s.id, s]))
+  })
+
+  const activeSessionIdForInstance = createMemo(() => {
+    return activeSessionMap().get(props.instance.id) || null
+  })
+
+  const activeSessionForInstance = createMemo(() => {
+    const sessionId = activeSessionIdForInstance()
+    if (!sessionId || sessionId === "info") return null
+    return activeSessions().get(sessionId) ?? null
+  })
+
+  const customCommands = createMemo(() => buildCustomCommandEntries(props.instance.id, getInstanceCommands(props.instance.id)))
+  const instancePaletteCommands = createMemo(() => [...props.paletteCommands(), ...customCommands()])
+  const paletteOpen = createMemo(() => isCommandPaletteOpen(props.instance.id))
+
+  const keyboardShortcuts = createMemo(() =>
+    [keyboardRegistry.get("session-prev"), keyboardRegistry.get("session-next")].filter(
+      (shortcut): shortcut is KeyboardShortcut => Boolean(shortcut),
+    ),
+  )
+
+  const handleSessionSelect = (sessionId: string) => {
+    setActiveSession(props.instance.id, sessionId)
+  }
+
+  return (
+    <>
+      <Show when={activeSessions().size > 0} fallback={<InstanceWelcomeView instance={props.instance} />}>
+        <div class="flex flex-1 min-h-0">
+          <div class="session-sidebar flex flex-col bg-surface-secondary" style={{ width: `${sessionSidebarWidth()}px` }}>
+            <SessionList
+              instanceId={props.instance.id}
+              sessions={activeSessions()}
+              activeSessionId={activeSessionIdForInstance()}
+              onSelect={handleSessionSelect}
+              onClose={(id) => {
+                const result = props.onCloseSession(id)
+                if (result instanceof Promise) {
+                  void result.catch((error) => console.error("Failed to close session:", error))
+                }
+              }}
+              onNew={() => {
+                const result = props.onNewSession()
+                if (result instanceof Promise) {
+                  void result.catch((error) => console.error("Failed to create session:", error))
+                }
+              }}
+              showHeader
+              showFooter={false}
+              headerContent={
+                <div class="session-sidebar-header">
+                  <span class="session-sidebar-title text-sm font-semibold uppercase text-primary">Sessions</span>
+                  <div class="session-sidebar-shortcuts">
+                    {keyboardShortcuts().length ? (
+                      <KeyboardHint shortcuts={keyboardShortcuts()} separator=" " showDescription={false} />
+                    ) : null}
+                  </div>
+                </div>
+              }
+              onWidthChange={setSessionSidebarWidth}
+            />
+
+            <div class="session-sidebar-separator border-t border-base" />
+            <Show when={activeSessionForInstance()}>
+              {(activeSession) => (
+                <>
+                  <ContextUsagePanel instanceId={props.instance.id} sessionId={activeSession().id} />
+                  <div class="session-sidebar-controls px-3 py-3 border-r border-base flex flex-col gap-3">
+                    <AgentSelector
+                      instanceId={props.instance.id}
+                      sessionId={activeSession().id}
+                      currentAgent={activeSession().agent}
+                      onAgentChange={(agent) => props.handleSidebarAgentChange(activeSession().id, agent)}
+                    />
+
+                    <ModelSelector
+                      instanceId={props.instance.id}
+                      sessionId={activeSession().id}
+                      currentModel={activeSession().model}
+                      onModelChange={(model) => props.handleSidebarModelChange(activeSession().id, model)}
+                    />
+                  </div>
+                </>
+              )}
+            </Show>
+          </div>
+
+          <div class="content-area flex-1 min-h-0 overflow-hidden flex flex-col">
+            <Show
+              when={activeSessionIdForInstance() === "info"}
+              fallback={
+                <Show
+                  when={activeSessionIdForInstance()}
+                  keyed
+                  fallback={
+                    <div class="flex items-center justify-center h-full">
+                      <div class="text-center text-gray-500 dark:text-gray-400">
+                        <p class="mb-2">No session selected</p>
+                        <p class="text-sm">Select a session to view messages</p>
+                      </div>
+                    </div>
+                  }
+                >
+                  {(sessionId) => (
+                    <SessionView
+                      sessionId={sessionId}
+                      activeSessions={activeSessions()}
+                      instanceId={props.instance.id}
+                      instanceFolder={props.instance.folder}
+                      escapeInDebounce={props.escapeInDebounce}
+                    />
+                  )}
+                </Show>
+              }
+            >
+              <InfoView instanceId={props.instance.id} />
+            </Show>
+          </div>
+        </div>
+      </Show>
+
+      <CommandPalette
+        open={paletteOpen()}
+        onClose={() => hideCommandPalette(props.instance.id)}
+        commands={instancePaletteCommands()}
+        onExecute={props.onExecuteCommand}
+      />
+    </>
+  )
+}
+
+export default InstanceShell

packages/ui/src/components/kbd.tsx

@@ -0,0 +1,79 @@
+import { Component, JSX, For } from "solid-js"
+import { isMac } from "../lib/keyboard-utils"
+
+interface KbdProps {
+  children?: JSX.Element
+  shortcut?: string
+  class?: string
+}
+
+const SPECIAL_KEY_LABELS: Record<string, string> = {
+  enter: "Enter",
+  return: "Enter",
+  esc: "Esc",
+  escape: "Esc",
+  tab: "Tab",
+  space: "Space",
+  backspace: "Backspace",
+  delete: "Delete",
+  pageup: "Page Up",
+  pagedown: "Page Down",
+  home: "Home",
+  end: "End",
+  arrowup: "↑",
+  arrowdown: "↓",
+  arrowleft: "←",
+  arrowright: "→",
+}
+
+const Kbd: Component<KbdProps> = (props) => {
+  const parts = () => {
+    if (props.children) return [{ text: props.children, isModifier: false }]
+    if (!props.shortcut) return []
+
+    const result: { text: string | JSX.Element; isModifier: boolean }[] = []
+    const shortcut = props.shortcut.toLowerCase()
+    const tokens = shortcut.split("+")
+
+    tokens.forEach((token) => {
+      const trimmed = token.trim()
+      const lower = trimmed.toLowerCase()
+
+      if (lower === "cmd" || lower === "command") {
+        result.push({ text: isMac() ? "Cmd" : "Ctrl", isModifier: false })
+      } else if (lower === "shift") {
+        result.push({ text: "Shift", isModifier: false })
+      } else if (lower === "alt" || lower === "option") {
+        result.push({ text: isMac() ? "Option" : "Alt", isModifier: false })
+      } else if (lower === "ctrl" || lower === "control") {
+        result.push({ text: "Ctrl", isModifier: false })
+      } else {
+        const label = SPECIAL_KEY_LABELS[lower]
+        if (label) {
+          result.push({ text: label, isModifier: false })
+        } else if (trimmed.length === 1) {
+          result.push({ text: trimmed.toUpperCase(), isModifier: false })
+        } else {
+          result.push({ text: trimmed.charAt(0).toUpperCase() + trimmed.slice(1), isModifier: false })
+        }
+      }
+    })
+
+    return result
+  }
+
+  return (
+    <kbd class={`kbd ${props.class || ""}`}>
+      <For each={parts()}>
+        {(part, index) => (
+          <>
+            {index() > 0 && <span class="kbd-separator">+</span>}
+            <span>{part.text}</span>
+          </>
+        )}
+      </For>
+    </kbd>
+  )
+}
+
+export default Kbd

packages/ui/src/components/keyboard-hint.tsx

@@ -0,0 +1,44 @@
+import { Component, For } from "solid-js"
+import { formatShortcut, isMac } from "../lib/keyboard-utils"
+import type { KeyboardShortcut } from "../lib/keyboard-registry"
+import Kbd from "./kbd"
+import HintRow from "./hint-row"
+
+const KeyboardHint: Component<{
+  shortcuts: KeyboardShortcut[]
+  separator?: string
+  showDescription?: boolean
+}> = (props) => {
+  function buildShortcutString(shortcut: KeyboardShortcut): string {
+    const parts: string[] = []
+
+    if (shortcut.modifiers.ctrl || shortcut.modifiers.meta) {
+      parts.push("cmd")
+    }
+    if (shortcut.modifiers.shift) {
+      parts.push("shift")
+    }
+    if (shortcut.modifiers.alt) {
+      parts.push("alt")
+    }
+    parts.push(shortcut.key)
+
+    return parts.join("+")
+  }
+
+  return (
+    <HintRow>
+      <For each={props.shortcuts}>
+        {(shortcut, i) => (
+          <>
+            {i() > 0 && <span class="mx-1">{props.separator || "•"}</span>}
+            {props.showDescription !== false && <span class="mr-1">{shortcut.description}</span>}
+            <Kbd shortcut={buildShortcutString(shortcut)} />
+          </>
+        )}
+      </For>
+    </HintRow>
+  )
+}
+
+export default KeyboardHint

packages/ui/src/components/logs-view.tsx

@@ -0,0 +1,171 @@
+import { Component, For, createSignal, createEffect, Show, onMount, onCleanup, createMemo } from "solid-js"
+import { instances, getInstanceLogs, isInstanceLogStreaming, setInstanceLogStreaming } from "../stores/instances"
+import { ChevronDown } from "lucide-solid"
+
+interface LogsViewProps {
+  instanceId: string
+}
+
+const logsScrollState = new Map<string, { scrollTop: number; autoScroll: boolean }>()
+
+const LogsView: Component<LogsViewProps> = (props) => {
+  let scrollRef: HTMLDivElement | undefined
+  const savedState = logsScrollState.get(props.instanceId)
+  const [autoScroll, setAutoScroll] = createSignal(savedState?.autoScroll ?? false)
+
+  const instance = () => instances().get(props.instanceId)
+  const logs = createMemo(() => getInstanceLogs(props.instanceId))
+  const streamingEnabled = createMemo(() => isInstanceLogStreaming(props.instanceId))
+
+  const handleEnableLogs = () => setInstanceLogStreaming(props.instanceId, true)
+  const handleDisableLogs = () => setInstanceLogStreaming(props.instanceId, false)
+ 
+  onMount(() => {
+
+    if (scrollRef && savedState) {
+      scrollRef.scrollTop = savedState.scrollTop
+    }
+  })
+
+  onCleanup(() => {
+    if (scrollRef) {
+      logsScrollState.set(props.instanceId, {
+        scrollTop: scrollRef.scrollTop,
+        autoScroll: autoScroll(),
+      })
+    }
+  })
+
+  createEffect(() => {
+    if (autoScroll() && scrollRef && logs().length > 0) {
+      scrollRef.scrollTop = scrollRef.scrollHeight
+    }
+  })
+
+  const handleScroll = () => {
+    if (!scrollRef) return
+
+    const isAtBottom = scrollRef.scrollHeight - scrollRef.scrollTop <= scrollRef.clientHeight + 50
+
+    setAutoScroll(isAtBottom)
+  }
+
+  const scrollToBottom = () => {
+    if (scrollRef) {
+      scrollRef.scrollTop = scrollRef.scrollHeight
+      setAutoScroll(true)
+    }
+  }
+
+  const formatTime = (timestamp: number) => {
+    const date = new Date(timestamp)
+    return date.toLocaleTimeString("en-US", {
+      hour12: false,
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    })
+  }
+
+  const getLevelColor = (level: string) => {
+    switch (level) {
+      case "error":
+        return "log-level-error"
+      case "warn":
+        return "log-level-warn"
+      case "debug":
+        return "log-level-debug"
+      default:
+        return "log-level-default"
+    }
+  }
+
+  return (
+    <div class="log-container">
+      <div class="log-header">
+        <h3 class="text-sm font-medium" style="color: var(--text-secondary)">Server Logs</h3>
+        <div class="flex items-center gap-2">
+          <Show
+            when={streamingEnabled()}
+            fallback={
+              <button type="button" class="button-tertiary" onClick={handleEnableLogs}>
+                Show server logs
+              </button>
+            }
+          >
+            <button type="button" class="button-tertiary" onClick={handleDisableLogs}>
+              Hide server logs
+            </button>
+          </Show>
+        </div>
+      </div>
+
+      <Show when={instance()?.environmentVariables && Object.keys(instance()?.environmentVariables!).length > 0}>
+        <div class="env-vars-container">
+          <div class="env-vars-title">
+            Environment Variables ({Object.keys(instance()?.environmentVariables!).length})
+          </div>
+          <div class="space-y-1">
+            <For each={Object.entries(instance()?.environmentVariables!)}>
+              {([key, value]) => (
+                <div class="env-var-item">
+                  <span class="env-var-key">{key}</span>
+                  <span class="env-var-separator">=</span>
+                  <span class="env-var-value" title={value}>
+                    {value}
+                  </span>
+                </div>
+              )}
+            </For>
+          </div>
+        </div>
+      </Show>
+
+      <div
+        ref={scrollRef}
+        onScroll={handleScroll}
+        class="log-content"
+      >
+        <Show
+          when={streamingEnabled()}
+          fallback={
+            <div class="log-paused-state">
+              <p class="log-paused-title">Server logs are paused</p>
+              <p class="log-paused-description">Enable streaming to watch your OpenCode server activity.</p>
+              <button type="button" class="button-primary" onClick={handleEnableLogs}>
+                Show server logs
+              </button>
+            </div>
+          }
+        >
+          <Show
+            when={logs().length > 0}
+            fallback={<div class="log-empty-state">Waiting for server output...</div>}
+          >
+            <For each={logs()}>
+              {(entry) => (
+                <div class="log-entry">
+                  <span class="log-timestamp">{formatTime(entry.timestamp)}</span>
+                  <span class={`log-message ${getLevelColor(entry.level)}`}>{entry.message}</span>
+                </div>
+              )}
+            </For>
+          </Show>
+        </Show>
+      </div>
+ 
+      <Show when={!autoScroll() && streamingEnabled()}>
+        <button
+          onClick={scrollToBottom}
+          class="scroll-to-bottom"
+        >
+          <ChevronDown class="w-4 h-4" />
+          Scroll to bottom
+        </button>
+      </Show>
+    </div>
+
+  )
+}
+
+export default LogsView

packages/ui/src/components/markdown.tsx

@@ -0,0 +1,139 @@
+import { createEffect, createSignal, onMount, onCleanup } from "solid-js"
+import { renderMarkdown, onLanguagesLoaded, initMarkdown, decodeHtmlEntities } from "../lib/markdown"
+import type { TextPart } from "../types/message"
+
+interface MarkdownProps {
+  part: TextPart
+  isDark?: boolean
+  size?: "base" | "sm" | "tight"
+  disableHighlight?: boolean
+  onRendered?: () => void
+}
+
+export function Markdown(props: MarkdownProps) {
+  const [html, setHtml] = createSignal("")
+  let containerRef: HTMLDivElement | undefined
+  let latestRequestedText = ""
+
+  const notifyRendered = () => {
+    Promise.resolve().then(() => props.onRendered?.())
+  }
+
+  createEffect(async () => {
+    const part = props.part
+    const rawText = typeof part.text === "string" ? part.text : ""
+    const text = decodeHtmlEntities(rawText)
+    const dark = Boolean(props.isDark)
+    const themeKey = dark ? "dark" : "light"
+    const highlightEnabled = !props.disableHighlight
+
+    latestRequestedText = text
+
+    await initMarkdown(dark)
+
+    if (!highlightEnabled) {
+      part.renderCache = undefined
+
+      try {
+        const rendered = await renderMarkdown(text, { suppressHighlight: true })
+
+        if (latestRequestedText === text) {
+          setHtml(rendered)
+          notifyRendered()
+        }
+      } catch (error) {
+        console.error("Failed to render markdown:", error)
+        if (latestRequestedText === text) {
+          setHtml(text)
+          notifyRendered()
+        }
+      }
+      return
+    }
+
+    const cache = part.renderCache
+    if (cache && cache.text === text && cache.theme === themeKey) {
+      setHtml(cache.html)
+      notifyRendered()
+      return
+    }
+
+    try {
+      const rendered = await renderMarkdown(text)
+
+      if (latestRequestedText === text) {
+        setHtml(rendered)
+        part.renderCache = { text, html: rendered, theme: themeKey }
+        notifyRendered()
+      }
+    } catch (error) {
+      console.error("Failed to render markdown:", error)
+      if (latestRequestedText === text) {
+        setHtml(text)
+        part.renderCache = { text, html: text, theme: themeKey }
+        notifyRendered()
+      }
+    }
+  })
+
+  onMount(() => {
+    const handleClick = async (e: Event) => {
+      const target = e.target as HTMLElement
+      const copyButton = target.closest(".code-block-copy") as HTMLButtonElement
+
+      if (copyButton) {
+        e.preventDefault()
+        const code = copyButton.getAttribute("data-code")
+        if (code) {
+          const decodedCode = decodeURIComponent(code)
+          await navigator.clipboard.writeText(decodedCode)
+          const copyText = copyButton.querySelector(".copy-text")
+          if (copyText) {
+            copyText.textContent = "Copied!"
+            setTimeout(() => {
+              copyText.textContent = "Copy"
+            }, 2000)
+          }
+        }
+      }
+    }
+
+    containerRef?.addEventListener("click", handleClick)
+
+    // Register listener for language loading completion
+    const cleanupLanguageListener = onLanguagesLoaded(async () => {
+      if (props.disableHighlight) {
+        return
+      }
+
+      const part = props.part
+      const rawText = typeof part.text === "string" ? part.text : ""
+      const text = decodeHtmlEntities(rawText)
+
+      if (latestRequestedText !== text) {
+        return
+      }
+
+      try {
+        const rendered = await renderMarkdown(text)
+        if (latestRequestedText === text) {
+          setHtml(rendered)
+          const themeKey = Boolean(props.isDark) ? "dark" : "light"
+          part.renderCache = { text, html: rendered, theme: themeKey }
+          notifyRendered()
+        }
+      } catch (error) {
+        console.error("Failed to re-render markdown after language load:", error)
+      }
+    })
+
+    onCleanup(() => {
+      containerRef?.removeEventListener("click", handleClick)
+      cleanupLanguageListener()
+    })
+  })
+
+  const proseClass = () => "markdown-body"
+
+  return <div ref={containerRef} class={proseClass()} innerHTML={html()} />
+}

packages/ui/src/components/message-item.tsx

@@ -0,0 +1,165 @@
+import { For, Show } from "solid-js"
+import type { Message, SDKPart, MessageInfo, ClientPart } from "../types/message"
+import { partHasRenderableText } from "../types/message"
+import MessagePart from "./message-part"
+
+interface MessageItemProps {
+  message: Message
+  messageInfo?: MessageInfo
+  instanceId: string
+  sessionId: string
+  isQueued?: boolean
+  parts?: ClientPart[]
+  onRevert?: (messageId: string) => void
+  onFork?: (messageId?: string) => void
+}
+
+export default function MessageItem(props: MessageItemProps) {
+  const isUser = () => props.message.type === "user"
+  const timestamp = () => {
+    const date = new Date(props.message.timestamp)
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+  }
+
+  const messageParts = () => props.parts ?? props.message.parts
+
+  const errorMessage = () => {
+    const info = props.messageInfo
+    if (!info || info.role !== "assistant" || !info.error) return null
+
+    const error = info.error
+    if (error.name === "ProviderAuthError") {
+      return error.data?.message || "Authentication error"
+    }
+    if (error.name === "MessageOutputLengthError") {
+      return "Message output length exceeded"
+    }
+    if (error.name === "MessageAbortedError") {
+      return "Request was aborted"
+    }
+    if (error.name === "UnknownError") {
+      return error.data?.message || "Unknown error occurred"
+    }
+    return null
+  }
+
+  const hasContent = () => {
+    if (errorMessage() !== null) {
+      return true
+    }
+
+    return messageParts().some((part) => partHasRenderableText(part))
+  }
+
+  const isGenerating = () => {
+    const info = props.messageInfo
+    return !hasContent() && info && info.role === "assistant" && info.time.completed !== undefined && info.time.completed === 0
+  }
+
+  const handleRevert = () => {
+    if (props.onRevert && isUser()) {
+      props.onRevert(props.message.id)
+    }
+  }
+
+  const containerClass = () =>
+    isUser()
+      ? "message-item-base bg-[var(--message-user-bg)] border-l-4 border-[var(--message-user-border)]"
+      : "message-item-base assistant-message bg-[var(--message-assistant-bg)] border-l-4 border-[var(--message-assistant-border)]"
+ 
+  const agentIdentifier = () => {
+    if (isUser()) return ""
+    const info = props.messageInfo
+    if (!info || info.role !== "assistant") return ""
+    return info.mode || ""
+  }
+
+  const modelIdentifier = () => {
+    if (isUser()) return ""
+    const info = props.messageInfo
+    if (!info || info.role !== "assistant") return ""
+    const modelID = info.modelID || ""
+    const providerID = info.providerID || ""
+    if (modelID && providerID) return `${providerID}/${modelID}`
+    return modelID
+  }
+ 
+  return (
+
+    <div class={containerClass()}>
+      <div class="flex justify-between items-center gap-2.5 pb-0.5">
+        <div class="flex flex-col">
+          <Show when={isUser()}>
+            <span class="font-semibold text-xs text-[var(--message-user-border)]">You</span>
+          </Show>
+
+          <Show when={!isUser()}>
+            <div class="flex flex-wrap gap-x-3 gap-y-0.5 text-[11px] text-[var(--message-assistant-border)]">
+              <Show when={agentIdentifier()}>{(value) => <span>Agent: {value()}</span>}</Show>
+              <Show when={modelIdentifier()}>{(value) => <span>Model: {value()}</span>}</Show>
+            </div>
+          </Show>
+        </div>
+        <div class="flex items-center gap-2">
+          <Show when={isUser() && props.onRevert}>
+            <button
+              class="bg-transparent border border-[var(--border-base)] text-[var(--text-muted)] cursor-pointer px-3 py-0.5 rounded text-xs font-semibold leading-none transition-all duration-200 flex items-center justify-center h-6 hover:bg-[var(--surface-hover)] hover:border-[var(--accent-primary)] hover:text-[var(--accent-primary)] active:scale-95"
+              onClick={handleRevert}
+              title="Revert to this message"
+              aria-label="Revert to this message"
+            >
+              Revert to
+            </button>
+          </Show>
+          <Show when={isUser() && props.onFork}>
+            <button
+              class="bg-transparent border border-[var(--border-base)] text-[var(--text-muted)] cursor-pointer px-3 py-0.5 rounded text-xs font-semibold leading-none transition-all duration-200 flex items-center justify-center h-6 hover:bg-[var(--surface-hover)] hover:border-[var(--accent-primary)] hover:text-[var(--accent-primary)] active:scale-95"
+              onClick={() => props.onFork?.(props.message.id)}
+              title="Fork from this message"
+              aria-label="Fork from this message"
+            >
+              Fork
+            </button>
+          </Show>
+          <span class="text-[11px] text-[var(--text-muted)]">{timestamp()}</span>
+        </div>
+      </div>
+
+      <div class="pt-1 whitespace-pre-wrap break-words leading-[1.1]">
+
+        <Show when={props.isQueued && isUser()}>
+          <div class="message-queued-badge">QUEUED</div>
+        </Show>
+
+        <Show when={errorMessage()}>
+          <div class="message-error-block">⚠️ {errorMessage()}</div>
+        </Show>
+
+        <Show when={isGenerating()}>
+          <div class="message-generating">
+            <span class="generating-spinner">⏳</span> Generating...
+          </div>
+        </Show>
+
+        <For each={messageParts()}>{(part) => (
+          <MessagePart
+            part={part}
+            messageType={props.message.type}
+            instanceId={props.instanceId}
+            sessionId={props.sessionId}
+          />
+        )}</For>
+      </div>
+
+      <Show when={props.message.status === "sending"}>
+        <div class="message-sending">
+          <span class="generating-spinner">●</span> Sending...
+        </div>
+      </Show>
+
+      <Show when={props.message.status === "error"}>
+        <div class="message-error">⚠ Message failed to send</div>
+      </Show>
+    </div>
+  )
+}

packages/ui/src/components/message-part.tsx

@@ -0,0 +1,105 @@
+import { Show, Match, Switch } from "solid-js"
+import ToolCall from "./tool-call"
+import { isItemExpanded, toggleItemExpanded } from "../stores/tool-call-state"
+import { Markdown } from "./markdown"
+import { useTheme } from "../lib/theme"
+import { useConfig } from "../stores/preferences"
+import { partHasRenderableText, SDKPart, TextPart, ClientPart } from "../types/message"
+
+type ToolCallPart = Extract<ClientPart, { type: "tool" }>
+
+interface MessagePartProps {
+  part: ClientPart
+  messageType?: "user" | "assistant"
+  instanceId: string
+  sessionId: string
+}
+export default function MessagePart(props: MessagePartProps) {
+  const { isDark } = useTheme()
+  const { preferences } = useConfig()
+  const partType = () => props.part?.type || ""
+  const reasoningId = () => `reasoning-${props.part?.id || ""}`
+  const isReasoningExpanded = () => isItemExpanded(reasoningId())
+  const isAssistantMessage = () => props.messageType === "assistant"
+  const textContainerClass = () => (isAssistantMessage() ? "message-text message-text-assistant" : "message-text")
+
+  const plainTextContent = () => {
+    const part = props.part
+
+    if ((part.type === "text" || part.type === "reasoning") && typeof part.text === "string") {
+      return part.text
+    }
+
+    return ""
+  }
+
+  const createTextPartForMarkdown = (): TextPart => {
+    const part = props.part
+    if ((part.type === "text" || part.type === "reasoning") && typeof part.text === "string") {
+      return {
+        id: part.id,
+        type: "text",
+        text: part.text,
+        synthetic: part.type === "text" ? part.synthetic : false,
+        version: (part as { version?: number }).version
+      }
+    }
+    return {
+      id: part.id,
+      type: "text", 
+      text: "",
+      synthetic: false
+    }
+  }
+
+  function handleReasoningClick(e: Event) {
+    e.preventDefault()
+    toggleItemExpanded(reasoningId())
+  }
+
+  return (
+    <Switch>
+      <Match when={partType() === "text"}>
+        <Show when={!(props.part.type === "text" && props.part.synthetic) && partHasRenderableText(props.part)}>
+          <div class={textContainerClass()}>
+            <Show
+              when={isAssistantMessage()}
+              fallback={<span>{plainTextContent()}</span>}
+            >
+              <Markdown part={createTextPartForMarkdown()} isDark={isDark()} size={isAssistantMessage() ? "tight" : "base"} />
+            </Show>
+          </div>
+        </Show>
+      </Match>
+
+      <Match when={partType() === "tool"}>
+        <ToolCall
+          toolCall={props.part as ToolCallPart}
+          toolCallId={props.part?.id}
+          instanceId={props.instanceId}
+          sessionId={props.sessionId}
+        />
+      </Match>
+
+
+
+      <Match when={partType() === "reasoning"}>
+        <Show when={preferences().showThinkingBlocks && partHasRenderableText(props.part)}>
+          <div class="message-reasoning">
+            <div class="reasoning-container">
+              <div class="reasoning-header" onClick={handleReasoningClick}>
+                <span class="reasoning-icon">{isReasoningExpanded() ? "▼" : "▶"}</span>
+                <span class="reasoning-label">Reasoning</span>
+              </div>
+              <Show when={isReasoningExpanded()}>
+                <div class={`${textContainerClass()} mt-2`}>
+                  <Markdown part={createTextPartForMarkdown()} isDark={isDark()} size={isAssistantMessage() ? "tight" : "base"} />
+                </div>
+              </Show>
+            </div>
+          </div>
+        </Show>
+      </Match>
+    </Switch>
+  )
+}

packages/ui/src/components/message-stream.tsx

@@ -0,0 +1,705 @@
+import { For, Show, createSignal, createEffect, createMemo, onCleanup } from "solid-js"
+import type { Message, MessageDisplayParts, SDKPart, MessageInfo, ClientPart } from "../types/message"
+
+type ToolCallPart = Extract<ClientPart, { type: "tool" }>
+
+// Import ToolState types from SDK
+type ToolState = import("@opencode-ai/sdk").ToolState
+type ToolStateRunning = import("@opencode-ai/sdk").ToolStateRunning  
+type ToolStateCompleted = import("@opencode-ai/sdk").ToolStateCompleted
+type ToolStateError = import("@opencode-ai/sdk").ToolStateError
+
+// Type guards
+function isToolStateRunning(state: ToolState): state is ToolStateRunning {
+  return state.status === "running"
+}
+
+function isToolStateCompleted(state: ToolState): state is ToolStateCompleted {
+  return state.status === "completed"
+}
+
+function isToolStateError(state: ToolState): state is ToolStateError {
+  return state.status === "error"
+}
+
+// Type guard to check if a part is a tool part
+function isToolPart(part: ClientPart): part is ToolCallPart {
+  return part.type === "tool"
+}
+import MessageItem from "./message-item"
+import ToolCall from "./tool-call"
+import { sseManager } from "../lib/sse-manager"
+import Kbd from "./kbd"
+import { useConfig } from "../stores/preferences"
+import { getSessionInfo, computeDisplayParts, sessions, setActiveSession, setActiveParentSession } from "../stores/sessions"
+import { setActiveInstanceId } from "../stores/instances"
+
+const codeNomadLogo = new URL("../images/CodeNomad-Icon.png", import.meta.url).href
+const SCROLL_OFFSET = 64
+const SCROLL_DIRECTION_THRESHOLD = 10
+
+interface TaskSessionLocation {
+  sessionId: string
+  instanceId: string
+  parentId: string | null
+}
+
+const messageScrollState = new Map<string, { scrollTop: number; autoScroll: boolean }>()
+
+function findTaskSessionLocation(sessionId: string): TaskSessionLocation | null {
+  if (!sessionId) return null
+  const allSessions = sessions()
+  for (const [instanceId, sessionMap] of allSessions) {
+    const session = sessionMap?.get(sessionId)
+    if (session) {
+      return {
+        sessionId: session.id,
+        instanceId,
+        parentId: session.parentId ?? null,
+      }
+    }
+  }
+  return null
+}
+
+function navigateToTaskSession(location: TaskSessionLocation) {
+  setActiveInstanceId(location.instanceId)
+  const parentToActivate = location.parentId ?? location.sessionId
+  setActiveParentSession(location.instanceId, parentToActivate)
+  if (location.parentId) {
+    setActiveSession(location.instanceId, location.sessionId)
+  }
+}
+
+// Format tokens like TUI (e.g., "110K", "1.2M")
+function formatTokens(tokens: number): string {
+  if (tokens >= 1000000) {
+    return `${(tokens / 1000000).toFixed(1)}M`
+  } else if (tokens >= 1000) {
+    return `${(tokens / 1000).toFixed(0)}K`
+  }
+  return tokens.toString()
+}
+
+// Format session info for the session view header
+function formatSessionInfo(usageTokens: number, contextWindow: number, usagePercent: number | null): string {
+  if (contextWindow > 0) {
+    const windowStr = formatTokens(contextWindow)
+    const usageStr = formatTokens(usageTokens)
+    const percent = usagePercent ?? Math.min(100, Math.max(0, Math.round((usageTokens / contextWindow) * 100)))
+    return `${usageStr} of ${windowStr} (${percent}%)`
+  }
+
+  return formatTokens(usageTokens)
+}
+
+interface MessageStreamProps {
+  instanceId: string
+  sessionId: string
+  messages: Message[]
+  messagesInfo?: Map<string, MessageInfo>
+  revert?: {
+    messageID: string
+    partID?: string
+    snapshot?: string
+    diff?: string
+  }
+  loading?: boolean
+  onRevert?: (messageId: string) => void
+  onFork?: (messageId?: string) => void
+}
+
+interface MessageDisplayItem {
+  type: "message"
+  message: Message
+  combinedParts: ClientPart[]
+  isQueued: boolean
+  messageInfo?: MessageInfo
+}
+
+interface ToolDisplayItem {
+  type: "tool"
+  key: string
+  toolPart: ToolCallPart
+  messageInfo?: MessageInfo
+  messageId: string
+  messageVersion: number
+  partVersion: number
+}
+
+type DisplayItem = MessageDisplayItem | ToolDisplayItem
+
+interface MessageCacheEntry {
+  message: Message
+  version: number
+  showThinking: boolean
+  isQueued: boolean
+  messageInfo?: MessageInfo
+  displayParts: MessageDisplayParts
+  item: MessageDisplayItem
+}
+
+interface ToolCacheEntry {
+  toolPart: ClientPart
+  messageInfo?: MessageInfo
+  signature: string
+  contentKey: string
+  item: ToolDisplayItem
+}
+
+
+
+interface SessionCache {
+  messageItemCache: Map<string, MessageCacheEntry>
+  toolItemCache: Map<string, ToolCacheEntry>
+}
+
+const sessionCaches = new Map<string, SessionCache>()
+
+function getSessionCache(instanceId: string, sessionId: string): SessionCache {
+  const key = `${instanceId}:${sessionId}`
+  let cache = sessionCaches.get(key)
+  if (!cache) {
+    cache = {
+      messageItemCache: new Map(),
+      toolItemCache: new Map(),
+    }
+    sessionCaches.set(key, cache)
+  }
+  return cache
+}
+
+export default function MessageStream(props: MessageStreamProps) {
+  const { preferences } = useConfig()
+  let containerRef: HTMLDivElement | undefined
+  const [autoScroll, setAutoScroll] = createSignal(true)
+  const [showScrollBottomButton, setShowScrollBottomButton] = createSignal(false)
+  const [showScrollTopButton, setShowScrollTopButton] = createSignal(false)
+
+  const sessionCache = getSessionCache(props.instanceId, props.sessionId)
+  let messageItemCache = sessionCache.messageItemCache
+  let toolItemCache = sessionCache.toolItemCache
+  let scrollAnimationFrame: number | null = null
+  let lastKnownScrollTop = 0
+
+  const makeScrollKey = (instanceId: string, sessionId: string) => `${instanceId}:${sessionId}`
+
+  const scrollStateKey = () => makeScrollKey(props.instanceId, props.sessionId)
+  const connectionStatus = () => sseManager.getStatus(props.instanceId)
+
+  function createToolSignature(message: Message, toolPart: ClientPart, toolIndex: number, messageInfo?: MessageInfo): string {
+    const messageId = message.id
+    const partId = typeof toolPart?.id === "string" ? toolPart.id : `${messageId}-tool-${toolIndex}`
+    return `${messageId}:${partId}`
+  }
+
+  function createToolContentKey(toolPart: ClientPart, messageInfo?: MessageInfo): string {
+    const state = isToolPart(toolPart) ? toolPart.state : undefined
+    const version = typeof toolPart?.version === "number" ? toolPart.version : 0
+    const status = state?.status ?? "unknown"
+    return `${toolPart.id}:${version}:${status}`
+  }
+
+  const sessionInfo = createMemo(() =>
+    getSessionInfo(props.instanceId, props.sessionId) ?? {
+      tokens: 0,
+      cost: 0,
+      contextWindow: 0,
+      isSubscriptionModel: false,
+      contextUsageTokens: 0,
+      contextUsagePercent: null,
+    },
+  )
+
+  const formattedSessionInfo = createMemo(() => {
+    const info = sessionInfo()
+    return formatSessionInfo(info.contextUsageTokens, info.contextWindow, info.contextUsagePercent)
+  })
+
+  function isNearBottom(element: HTMLDivElement, offset = SCROLL_OFFSET) {
+    const { scrollTop, scrollHeight, clientHeight } = element
+    const distance = scrollHeight - (scrollTop + clientHeight)
+    return distance <= offset
+  }
+
+  function isNearTop(element: HTMLDivElement, offset = SCROLL_OFFSET) {
+    return element.scrollTop <= offset
+  }
+
+  function scrollToBottom(options: { smooth?: boolean } = {}) {
+    if (!containerRef) return
+
+    const behavior = options.smooth ? "smooth" : "auto"
+
+    requestAnimationFrame(() => {
+      if (!containerRef) return
+      containerRef.scrollTo({ top: containerRef.scrollHeight, behavior })
+      setAutoScroll(true)
+      updateScrollIndicators(containerRef)
+    })
+  }
+
+
+  function scrollToTop(options: { smooth?: boolean } = {}) {
+    if (!containerRef) return
+
+    const behavior = options.smooth ? "smooth" : "auto"
+    setAutoScroll(false)
+
+    requestAnimationFrame(() => {
+      if (!containerRef) return
+      containerRef.scrollTo({ top: 0, behavior })
+      setShowScrollTopButton(false)
+      updateScrollIndicators(containerRef)
+    })
+  }
+
+  function handleScroll(event: Event) {
+    if (!containerRef) return
+
+    if (scrollAnimationFrame !== null) {
+      cancelAnimationFrame(scrollAnimationFrame)
+    }
+
+    const isUserScroll = event.isTrusted
+
+    scrollAnimationFrame = requestAnimationFrame(() => {
+      if (!containerRef) return
+
+      const currentScrollTop = containerRef.scrollTop
+      const movingUp = currentScrollTop < lastKnownScrollTop - SCROLL_DIRECTION_THRESHOLD
+      lastKnownScrollTop = currentScrollTop
+
+      const atBottom = isNearBottom(containerRef)
+
+      if (isUserScroll) {
+        if (movingUp && !atBottom && autoScroll()) {
+          setAutoScroll(false)
+        } else if (!movingUp && atBottom && !autoScroll()) {
+          setAutoScroll(true)
+        }
+      }
+
+      updateScrollIndicators(containerRef)
+      scrollAnimationFrame = null
+    })
+  }
+
+  const messageView = createMemo(() => {
+    const showThinking = preferences().showThinkingBlocks
+
+    const items: DisplayItem[] = []
+    const newMessageCache = new Map<string, MessageCacheEntry>()
+    const newToolCache = new Map<string, ToolCacheEntry>()
+    const tokenSegments: string[] = []
+
+    let lastAssistantIndex = -1
+    for (let i = props.messages.length - 1; i >= 0; i--) {
+      if (props.messages[i].type === "assistant") {
+        lastAssistantIndex = i
+        break
+      }
+    }
+
+    tokenSegments.push(`count:${props.messages.length}`)
+    tokenSegments.push(`revert:${props.revert?.messageID ?? ""}`)
+    tokenSegments.push(`thinking:${showThinking ? 1 : 0}`)
+
+    for (let index = 0; index < props.messages.length; index++) {
+      const message = props.messages[index]
+      const messageInfo = props.messagesInfo?.get(message.id)
+
+      if (props.revert?.messageID && message.id === props.revert.messageID) {
+        break
+      }
+
+      tokenSegments.push(`${message.id}:${message.version ?? 0}:${message.status}:${message.parts.length}`)
+
+      const baseDisplayParts = message.displayParts
+      const displayParts: MessageDisplayParts =
+        !baseDisplayParts || baseDisplayParts.showThinking !== showThinking
+          ? computeDisplayParts(message, showThinking)
+          : (baseDisplayParts as MessageDisplayParts)
+
+      const combinedParts = displayParts.combined
+      const version = message.version ?? 0
+      const isQueued = message.type === "user" && (lastAssistantIndex === -1 || index > lastAssistantIndex)
+
+      const hasRenderableContent =
+        message.type !== "assistant" ||
+        combinedParts.length > 0 ||
+        Boolean(messageInfo && messageInfo.role === "assistant" && messageInfo.error) ||
+        message.status === "error"
+
+      if (hasRenderableContent) {
+        const cacheEntry = messageItemCache.get(message.id)
+        if (
+          cacheEntry &&
+          cacheEntry.version === version &&
+          cacheEntry.showThinking === showThinking &&
+          cacheEntry.isQueued === isQueued &&
+          cacheEntry.messageInfo === messageInfo
+        ) {
+          cacheEntry.displayParts = displayParts
+          cacheEntry.version = version
+          cacheEntry.showThinking = showThinking
+          cacheEntry.isQueued = isQueued
+          cacheEntry.messageInfo = messageInfo
+          cacheEntry.item.message = message
+          cacheEntry.item.combinedParts = combinedParts
+          cacheEntry.item.isQueued = isQueued
+          cacheEntry.item.messageInfo = messageInfo
+          newMessageCache.set(message.id, cacheEntry)
+          items.push(cacheEntry.item)
+        } else {
+          const messageItem: MessageDisplayItem = {
+            type: "message",
+            message,
+            combinedParts,
+            isQueued,
+            messageInfo,
+          }
+          newMessageCache.set(message.id, {
+            message,
+            version,
+            showThinking,
+            isQueued,
+            messageInfo,
+            displayParts,
+            item: messageItem,
+          })
+          items.push(messageItem)
+        }
+      }
+
+      const toolParts = displayParts.tool.filter(isToolPart)
+      for (let toolIndex = 0; toolIndex < toolParts.length; toolIndex++) {
+        const toolPart = toolParts[toolIndex]
+        const originalIndex = displayParts.tool.indexOf(toolPart)
+        const toolKey = toolPart?.id || `${message.id}-tool-${originalIndex}`
+        const messageVersion = typeof message.version === "number" ? message.version : 0
+        const partVersion = typeof toolPart?.version === "number" ? toolPart.version : 0
+
+        const toolSignature = createToolSignature(message, toolPart, originalIndex, messageInfo)
+        const contentKey = createToolContentKey(toolPart, messageInfo)
+        tokenSegments.push(`tool:${toolKey}:${partVersion}`)
+        const toolEntry = toolItemCache.get(toolKey)
+
+        if (toolEntry && toolEntry.signature === toolSignature) {
+          if (toolEntry.contentKey !== contentKey) {
+            const updatedItem: ToolDisplayItem = {
+              ...toolEntry.item,
+              toolPart,
+              messageInfo,
+              messageId: message.id,
+              messageVersion,
+              partVersion,
+            }
+            toolEntry.toolPart = toolPart
+            toolEntry.messageInfo = messageInfo
+            toolEntry.signature = toolSignature
+            toolEntry.contentKey = contentKey
+            toolEntry.item = updatedItem
+            console.debug("[ToolCall] update", toolKey, toolPart.state?.status)
+            newToolCache.set(toolKey, toolEntry)
+            items.push(updatedItem)
+          } else {
+            const cachedItem = toolEntry.item
+            cachedItem.toolPart = toolPart
+            cachedItem.messageInfo = messageInfo
+            cachedItem.messageId = message.id
+            cachedItem.messageVersion = messageVersion
+            cachedItem.partVersion = partVersion
+            toolEntry.toolPart = toolPart
+            toolEntry.messageInfo = messageInfo
+            newToolCache.set(toolKey, toolEntry)
+            items.push(cachedItem)
+          }
+        } else {
+          const toolItem: ToolDisplayItem = {
+            type: "tool",
+            key: toolKey,
+            toolPart,
+            messageInfo,
+            messageId: message.id,
+            messageVersion,
+            partVersion,
+          }
+          console.debug("[ToolCall] create", toolKey, toolPart.state?.status)
+          newToolCache.set(toolKey, { toolPart, messageInfo, signature: toolSignature, contentKey, item: toolItem })
+          items.push(toolItem)
+        }
+      }
+    }
+
+    messageItemCache = newMessageCache
+    toolItemCache = newToolCache
+    sessionCache.messageItemCache = messageItemCache
+    sessionCache.toolItemCache = toolItemCache
+
+    tokenSegments.push(`items:${items.length}`)
+
+    if (items.length > 0) {
+      const tail = items[items.length - 1]
+      if (tail.type === "message") {
+        tokenSegments.push(`tail:${tail.message.id}:${tail.message.version ?? 0}`)
+      } else {
+        tokenSegments.push(`tail:${tail.key}`)
+      }
+    }
+
+    return { items, token: tokenSegments.join("|") }
+  })
+
+  const displayItems = () => messageView().items
+  const changeToken = () => messageView().token
+
+  function updateScrollIndicators(element: HTMLDivElement) {
+    const itemsLength = displayItems().length
+    setShowScrollBottomButton(!isNearBottom(element) && itemsLength > 0)
+    setShowScrollTopButton(!isNearTop(element) && itemsLength > 0)
+    persistScrollState()
+  }
+
+  function getActiveScrollKey() {
+    return containerRef?.dataset.scrollKey || scrollStateKey()
+  }
+
+  function persistScrollState() {
+    if (!containerRef) return
+    const key = getActiveScrollKey()
+    messageScrollState.set(key, {
+      scrollTop: containerRef.scrollTop,
+      autoScroll: autoScroll(),
+    })
+  }
+
+  createEffect(() => {
+    const key = scrollStateKey()
+    if (containerRef) {
+      containerRef.dataset.scrollKey = key
+    }
+    const savedState = messageScrollState.get(key)
+    const shouldAutoScroll = savedState?.autoScroll ?? true
+
+    setAutoScroll(shouldAutoScroll)
+
+    requestAnimationFrame(() => {
+      if (!containerRef) return
+
+      if (savedState) {
+        if (shouldAutoScroll) {
+          scrollToBottom({ smooth: false })
+        } else {
+          const maxScrollTop = Math.max(containerRef.scrollHeight - containerRef.clientHeight, 0)
+          containerRef.scrollTop = Math.min(savedState.scrollTop, maxScrollTop)
+          updateScrollIndicators(containerRef)
+        }
+      } else {
+        scrollToBottom({ smooth: false })
+      }
+    })
+
+    onCleanup(() => {
+      if (containerRef) {
+        messageScrollState.set(key, {
+          scrollTop: containerRef.scrollTop,
+          autoScroll: autoScroll(),
+        })
+        if (containerRef.dataset.scrollKey === key) {
+          delete containerRef.dataset.scrollKey
+        }
+      }
+    })
+  })
+
+  let previousToken: string | undefined
+  createEffect(() => {
+    const token = changeToken()
+    const shouldScroll = autoScroll()
+
+    if (!token || token === previousToken) {
+      return
+    }
+
+    previousToken = token
+
+    if (!shouldScroll) {
+      return
+    }
+
+    scrollToBottom()
+  })
+
+  createEffect(() => {
+    if (displayItems().length === 0) {
+      setShowScrollBottomButton(false)
+      setShowScrollTopButton(false)
+      setAutoScroll(true)
+      persistScrollState()
+    }
+  })
+
+  onCleanup(() => {
+    if (scrollAnimationFrame !== null) {
+      cancelAnimationFrame(scrollAnimationFrame)
+    }
+  })
+
+  return (
+    <div class="message-stream-container">
+      <div class="connection-status">
+        <div class="connection-status-text connection-status-info flex items-center gap-2 text-sm font-medium">
+          <span>{formattedSessionInfo()}</span>
+        </div>
+        <div class="connection-status-text connection-status-shortcut flex items-center gap-2 text-sm font-medium">
+          <span>Command Palette</span>
+          <Kbd shortcut="cmd+shift+p" />
+        </div>
+        <div class="connection-status-meta flex items-center justify-end gap-3">
+          <Show when={connectionStatus() === "connected"}>
+            <span class="status-indicator connected">
+              <span class="status-dot" />
+              Connected
+            </span>
+          </Show>
+          <Show when={connectionStatus() === "connecting"}>
+            <span class="status-indicator connecting">
+              <span class="status-dot" />
+              Connecting...
+            </span>
+          </Show>
+          <Show when={connectionStatus() === "error" || connectionStatus() === "disconnected"}>
+            <span class="status-indicator disconnected">
+              <span class="status-dot" />
+              Disconnected
+            </span>
+          </Show>
+        </div>
+      </div>
+      <div ref={containerRef} class="message-stream" onScroll={handleScroll}>
+        <Show when={!props.loading && displayItems().length === 0}>
+          <div class="empty-state">
+            <div class="empty-state-content">
+              <div class="flex flex-col items-center gap-3 mb-6">
+                <img src={codeNomadLogo} alt="CodeNomad logo" class="h-48 w-auto" loading="lazy" />
+                <h1 class="text-3xl font-semibold text-primary">CodeNomad</h1>
+              </div>
+              <h3>Start a conversation</h3>
+              <p>Type a message below or open the Command Palette:</p>
+              <ul>
+                <li>
+                  <span>Command Palette</span>
+                  <Kbd shortcut="cmd+shift+p" class="ml-2" />
+                </li>
+                <li>Ask about your codebase</li>
+                <li>
+                  Attach files with <code>@</code>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </Show>
+
+        <Show when={props.loading}>
+          <div class="loading-state">
+            <div class="spinner" />
+            <p>Loading messages...</p>
+          </div>
+        </Show>
+
+        <For each={displayItems()} fallback={null}>
+          {(item) => {
+            if (item.type === "message") {
+              return (
+                <MessageItem
+                  message={item.message}
+                  messageInfo={item.messageInfo}
+                  instanceId={props.instanceId}
+                  sessionId={props.sessionId}
+                  isQueued={item.isQueued}
+                  parts={item.combinedParts}
+                  onRevert={props.onRevert}
+                  onFork={props.onFork}
+                />
+
+              )
+            }
+
+            const toolPart = item.toolPart
+
+            const taskSessionId =
+              (isToolStateRunning(toolPart.state) || isToolStateCompleted(toolPart.state) || isToolStateError(toolPart.state))
+                ? toolPart.state.metadata?.sessionId === "string" ? toolPart.state.metadata.sessionId : ""
+                : ""
+            const taskLocation = taskSessionId ? findTaskSessionLocation(taskSessionId) : null
+
+            const handleGoToTaskSession = (event: Event) => {
+              event.preventDefault()
+              event.stopPropagation()
+              if (!taskLocation) return
+              navigateToTaskSession(taskLocation)
+            }
+
+            return (
+              <div class="tool-call-message" data-key={item.key}>
+                <div class="tool-call-header-label">
+                  <div class="tool-call-header-meta">
+                    <span class="tool-call-icon">🔧</span>
+                    <span>Tool Call</span>
+                    <span class="tool-name">{toolPart?.tool || "unknown"}</span>
+                  </div>
+                  <Show when={taskSessionId}>
+                    <button
+                      class="tool-call-header-button"
+                      type="button"
+                      disabled={!taskLocation}
+                      onClick={handleGoToTaskSession}
+                      title={!taskLocation ? "Session not available yet" : "Go to session"}
+                    >
+                      Go to Session
+                    </button>
+                  </Show>
+                </div>
+                <ToolCall
+                  toolCall={toolPart}
+                  toolCallId={item.key}
+                  messageId={item.messageId}
+                  messageVersion={item.messageVersion}
+                  partVersion={item.partVersion}
+                  instanceId={props.instanceId}
+                  sessionId={props.sessionId}
+                />
+              </div>
+            )
+          }}
+        </For>
+      </div>
+
+      <Show when={showScrollTopButton() || showScrollBottomButton()}>
+        <div class="message-scroll-button-wrapper">
+          <Show when={showScrollTopButton()}>
+            <button
+              type="button"
+              class="message-scroll-button"
+              onClick={() => scrollToTop({ smooth: true })}
+              aria-label="Scroll to first message"
+            >
+              <span class="message-scroll-icon" aria-hidden="true">↑</span>
+            </button>
+          </Show>
+          <Show when={showScrollBottomButton()}>
+            <button
+              type="button"
+              class="message-scroll-button"
+              onClick={() => scrollToBottom({ smooth: true })}
+              aria-label="Scroll to latest message"
+            >
+              <span class="message-scroll-icon" aria-hidden="true">↓</span>
+            </button>
+          </Show>
+        </div>
+      </Show>
+    </div>
+  )
+}

packages/ui/src/components/model-selector.tsx

@@ -0,0 +1,140 @@
+import { Combobox } from "@kobalte/core/combobox"
+import { createEffect, createMemo, createSignal } from "solid-js"
+import { providers, fetchProviders } from "../stores/sessions"
+import { ChevronDown } from "lucide-solid"
+import type { Model } from "../types/session"
+import Kbd from "./kbd"
+
+interface ModelSelectorProps {
+  instanceId: string
+  sessionId: string
+  currentModel: { providerId: string; modelId: string }
+  onModelChange: (model: { providerId: string; modelId: string }) => Promise<void>
+}
+
+interface FlatModel extends Model {
+  providerName: string
+  key: string
+  searchText: string
+}
+
+export default function ModelSelector(props: ModelSelectorProps) {
+  const instanceProviders = () => providers().get(props.instanceId) || []
+  const [isOpen, setIsOpen] = createSignal(false)
+  let triggerRef!: HTMLButtonElement
+  let searchInputRef!: HTMLInputElement
+
+  createEffect(() => {
+    if (instanceProviders().length === 0) {
+      fetchProviders(props.instanceId).catch(console.error)
+    }
+  })
+
+  const allModels = createMemo<FlatModel[]>(() =>
+    instanceProviders().flatMap((p) =>
+      p.models.map((m) => ({
+        ...m,
+        providerName: p.name,
+        key: `${m.providerId}/${m.id}`,
+        searchText: `${m.name} ${p.name} ${m.providerId} ${m.id} ${m.providerId}/${m.id}`,
+      })),
+    ),
+  )
+
+  const currentModelValue = createMemo(() =>
+    allModels().find((m) => m.providerId === props.currentModel.providerId && m.id === props.currentModel.modelId),
+  )
+
+  const handleChange = async (value: FlatModel | null) => {
+    if (!value) return
+    await props.onModelChange({ providerId: value.providerId, modelId: value.id })
+  }
+
+  const customFilter = (option: FlatModel, inputValue: string) => {
+    return option.searchText.toLowerCase().includes(inputValue.toLowerCase())
+  }
+
+  createEffect(() => {
+    if (isOpen()) {
+      setTimeout(() => {
+        searchInputRef?.focus()
+      }, 100)
+    }
+  })
+
+  return (
+    <div class="sidebar-selector">
+      <Combobox<FlatModel>
+        value={currentModelValue()}
+        onChange={handleChange}
+        onOpenChange={setIsOpen}
+        options={allModels()}
+        optionValue="key"
+        optionTextValue="searchText"
+        optionLabel="name"
+        placeholder="Search models..."
+        defaultFilter={customFilter}
+        allowsEmptyCollection
+        itemComponent={(itemProps) => (
+          <Combobox.Item
+            item={itemProps.item}
+            class="selector-option"
+          >
+            <div class="selector-option-content">
+              <Combobox.ItemLabel class="selector-option-label">
+                {itemProps.item.rawValue.name}
+              </Combobox.ItemLabel>
+              <Combobox.ItemDescription class="selector-option-description">
+                {itemProps.item.rawValue.providerName} • {itemProps.item.rawValue.providerId}/
+                {itemProps.item.rawValue.id}
+              </Combobox.ItemDescription>
+            </div>
+            <Combobox.ItemIndicator class="selector-option-indicator">
+              <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+              </svg>
+            </Combobox.ItemIndicator>
+          </Combobox.Item>
+        )}
+      >
+        <Combobox.Control class="relative w-full" data-model-selector-control>
+          <Combobox.Input class="sr-only" data-model-selector />
+          <Combobox.Trigger
+            ref={triggerRef}
+            class="selector-trigger"
+          >
+            <div class="selector-trigger-label selector-trigger-label--stacked">
+              <span class="selector-trigger-primary selector-trigger-primary--align-left">
+                Model: {currentModelValue()?.name ?? "None"}
+              </span>
+              {currentModelValue() && (
+                <span class="selector-trigger-secondary">
+                  {currentModelValue()!.providerId}/{currentModelValue()!.id}
+                </span>
+              )}
+            </div>
+            <Combobox.Icon class="selector-trigger-icon">
+              <ChevronDown class="w-3 h-3" />
+            </Combobox.Icon>
+          </Combobox.Trigger>
+        </Combobox.Control>
+
+        <Combobox.Portal>
+          <Combobox.Content class="selector-popover">
+            <div class="selector-search-container">
+              <Combobox.Input
+                ref={searchInputRef}
+                class="selector-search-input"
+                placeholder="Search models..."
+              />
+            </div>
+            <Combobox.Listbox class="selector-listbox" />
+          </Combobox.Content>
+        </Combobox.Portal>
+      </Combobox>
+      <span class="hint sidebar-selector-hint">
+        <Kbd shortcut="cmd+shift+m" />
+      </span>
+    </div>
+  )
+}

packages/ui/src/components/opencode-binary-selector.tsx

@@ -0,0 +1,324 @@
+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"
+
+interface BinaryOption {
+  path: string
+  version?: string
+  lastUsed?: number
+  isDefault?: boolean
+}
+
+interface OpenCodeBinarySelectorProps {
+  selectedBinary: string
+  onBinaryChange: (binary: string) => void
+  disabled?: boolean
+  isVisible?: boolean
+}
+
+const OpenCodeBinarySelector: Component<OpenCodeBinarySelectorProps> = (props) => {
+  const {
+    opencodeBinaries,
+    addOpenCodeBinary,
+    removeOpenCodeBinary,
+    preferences,
+    updatePreferences,
+  } = useConfig()
+  const [customPath, setCustomPath] = createSignal("")
+  const [validating, setValidating] = createSignal(false)
+  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 binaries = () => opencodeBinaries()
+  const lastUsedBinary = () => preferences().lastUsedBinary
+
+  const customBinaries = createMemo(() => binaries().filter((binary) => binary.path !== "opencode"))
+
+  const binaryOptions = createMemo<BinaryOption[]>(() => [{ path: "opencode", isDefault: true }, ...customBinaries()])
+
+  const currentSelectionPath = () => props.selectedBinary || "opencode"
+
+  createEffect(() => {
+    if (!props.selectedBinary && lastUsedBinary()) {
+      props.onBinaryChange(lastUsedBinary()!)
+    } else if (!props.selectedBinary) {
+      const firstBinary = binaries()[0]
+      if (firstBinary) {
+        props.onBinaryChange(firstBinary.path)
+      }
+    }
+  })
+
+  createEffect(() => {
+    const cache = new Map(versionInfo())
+    let updated = false
+
+    binaries().forEach((binary) => {
+      if (binary.version && !cache.has(binary.path)) {
+        cache.set(binary.path, binary.version)
+        updated = true
+      }
+    })
+
+    if (updated) {
+      setVersionInfo(cache)
+    }
+  })
+
+  createEffect(() => {
+    if (!props.isVisible) return
+    const cache = versionInfo()
+    const pathsToValidate = ["opencode", ...customBinaries().map((binary) => binary.path)].filter(
+      (path) => !cache.has(path),
+    )
+
+    if (pathsToValidate.length === 0) return
+
+    setTimeout(() => {
+      pathsToValidate.forEach((path) => {
+        validateBinary(path).catch(console.error)
+      })
+    }, 0)
+  })
+
+  onCleanup(() => {
+    setValidatingPaths(new Set<string>())
+    setValidating(false)
+  })
+
+  async function validateBinary(path: string): Promise<{ valid: boolean; version?: string; error?: string }> {
+    if (versionInfo().has(path)) {
+      const cachedVersion = versionInfo().get(path)
+      return cachedVersion ? { valid: true, version: cachedVersion } : { valid: true }
+    }
+
+    if (validatingPaths().has(path)) {
+      return { valid: false, error: "Already validating" }
+    }
+
+    try {
+      setValidatingPaths((prev) => new Set(prev).add(path))
+      setValidating(true)
+      setValidationError(null)
+
+      const result = await window.electronAPI.validateOpenCodeBinary(path)
+
+      if (result.valid && result.version) {
+        const updatedVersionInfo = new Map(versionInfo())
+        updatedVersionInfo.set(path, result.version)
+        setVersionInfo(updatedVersionInfo)
+      }
+
+      return result
+    } catch (error) {
+      return { valid: false, error: error instanceof Error ? error.message : String(error) }
+    } finally {
+      setValidatingPaths((prev) => {
+        const next = new Set(prev)
+        next.delete(path)
+        if (next.size === 0) {
+          setValidating(false)
+        }
+        return next
+      })
+    }
+  }
+
+  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")
+    }
+  }
+
+  async function handleValidateAndAdd(path: string) {
+    const validation = await validateBinary(path)
+
+    if (validation.valid) {
+      addOpenCodeBinary(path, validation.version)
+      props.onBinaryChange(path)
+      updatePreferences({ lastUsedBinary: path })
+      setCustomPath("")
+      setValidationError(null)
+    } else {
+      setValidationError(validation.error || "Invalid OpenCode binary")
+    }
+  }
+
+  async function handleCustomPathSubmit() {
+    const path = customPath().trim()
+    if (!path) return
+    await handleValidateAndAdd(path)
+  }
+
+  function handleSelectBinary(path: string) {
+    if (props.disabled) return
+    if (path === props.selectedBinary) return
+    props.onBinaryChange(path)
+    updatePreferences({ lastUsedBinary: path })
+  }
+
+  function handleRemoveBinary(path: string, event: Event) {
+    event.stopPropagation()
+    if (props.disabled) return
+    removeOpenCodeBinary(path)
+
+    if (props.selectedBinary === path) {
+      props.onBinaryChange("opencode")
+      updatePreferences({ lastUsedBinary: "opencode" })
+    }
+  }
+
+  function formatRelativeTime(timestamp?: number): string {
+    if (!timestamp) return ""
+    const seconds = Math.floor((Date.now() - timestamp) / 1000)
+    const minutes = Math.floor(seconds / 60)
+    const hours = Math.floor(minutes / 60)
+    const days = Math.floor(hours / 24)
+
+    if (days > 0) return `${days}d ago`
+    if (hours > 0) return `${hours}h ago`
+    if (minutes > 0) return `${minutes}m ago`
+    return "just now"
+  }
+
+  function getDisplayName(path: string): string {
+    if (path === "opencode") return "opencode (system PATH)"
+    const parts = path.split(/[/\\]/)
+    return parts[parts.length - 1] ?? path
+  }
+
+  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>
+        </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>
+
+        <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>
+
+        <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}
+                >
+                  <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)}
+                    disabled={props.disabled}
+                    title="Remove binary"
+                  >
+                    <Trash2 class="w-3.5 h-3.5" />
+                  </button>
+                </Show>
+              </div>
+            )
+          }}
+        </For>
+      </div>
+    </div>
+  )
+}
+
+export default OpenCodeBinarySelector

packages/ui/src/components/prompt-input.tsx

@@ -0,0 +1,893 @@
+import { createSignal, Show, onMount, For, onCleanup, createEffect, on, untrack } from "solid-js"
+import UnifiedPicker from "./unified-picker"
+import { addToHistory, getHistory } from "../stores/message-history"
+import { getAttachments, addAttachment, clearAttachments, removeAttachment } from "../stores/attachments"
+import { resolvePastedPlaceholders } from "../lib/prompt-placeholders"
+import { createFileAttachment, createTextAttachment, createAgentAttachment } from "../types/attachment"
+import type { Attachment } from "../types/attachment"
+import type { Agent } from "../types/session"
+import Kbd from "./kbd"
+import HintRow from "./hint-row"
+import { getActiveInstance } from "../stores/instances"
+import { agents, getSessionDraftPrompt, setSessionDraftPrompt, clearSessionDraftPrompt } from "../stores/sessions"
+
+interface PromptInputProps {
+  instanceId: string
+  instanceFolder: string
+  sessionId: string
+  onSend: (prompt: string, attachments: Attachment[]) => Promise<void>
+  onRunShell?: (command: string) => Promise<void>
+  disabled?: boolean
+  escapeInDebounce?: boolean
+}
+
+export default function PromptInput(props: PromptInputProps) {
+  const [prompt, setPromptInternal] = createSignal("")
+  const [history, setHistory] = createSignal<string[]>([])
+  const [historyIndex, setHistoryIndex] = createSignal(-1)
+  const [historyDraft, setHistoryDraft] = createSignal<string | null>(null)
+  const [isFocused, setIsFocused] = createSignal(false)
+  const [showPicker, setShowPicker] = createSignal(false)
+  const [searchQuery, setSearchQuery] = createSignal("")
+  const [atPosition, setAtPosition] = createSignal<number | null>(null)
+  const [isDragging, setIsDragging] = createSignal(false)
+  const [ignoredAtPositions, setIgnoredAtPositions] = createSignal<Set<number>>(new Set<number>())
+  const [pasteCount, setPasteCount] = createSignal(0)
+  const [imageCount, setImageCount] = createSignal(0)
+  const [mode, setMode] = createSignal<"normal" | "shell">("normal")
+  let textareaRef: HTMLTextAreaElement | undefined
+  let containerRef: HTMLDivElement | undefined
+
+
+
+
+  const attachments = () => getAttachments(props.instanceId, props.sessionId)
+  const instanceAgents = () => agents().get(props.instanceId) || []
+
+  const setPrompt = (value: string) => {
+    setPromptInternal(value)
+    setSessionDraftPrompt(props.instanceId, props.sessionId, value)
+  }
+
+  const clearPrompt = () => {
+    clearSessionDraftPrompt(props.instanceId, props.sessionId)
+    setPromptInternal("")
+    setHistoryDraft(null)
+    setMode("normal")
+  }
+
+  function syncAttachmentCounters(currentPrompt: string, sessionAttachments: Attachment[]) {
+    let highestPaste = 0
+    let highestImage = 0
+
+    for (const match of currentPrompt.matchAll(/\[pasted #(\d+)\]/g)) {
+      const value = Number.parseInt(match[1], 10)
+      if (!Number.isNaN(value)) {
+        highestPaste = Math.max(highestPaste, value)
+      }
+    }
+
+    for (const attachment of sessionAttachments) {
+      if (attachment.source.type === "text") {
+        const placeholderMatch = attachment.display.match(/pasted #(\d+)/)
+        if (placeholderMatch) {
+          const value = Number.parseInt(placeholderMatch[1], 10)
+          if (!Number.isNaN(value)) {
+            highestPaste = Math.max(highestPaste, value)
+          }
+        }
+      }
+      if (attachment.source.type === "file" && attachment.mediaType.startsWith("image/")) {
+        const imageMatch = attachment.display.match(/Image #(\d+)/)
+        if (imageMatch) {
+          const value = Number.parseInt(imageMatch[1], 10)
+          if (!Number.isNaN(value)) {
+            highestImage = Math.max(highestImage, value)
+          }
+        }
+      }
+    }
+
+    for (const match of currentPrompt.matchAll(/\[Image #(\d+)\]/g)) {
+      const value = Number.parseInt(match[1], 10)
+      if (!Number.isNaN(value)) {
+        highestImage = Math.max(highestImage, value)
+      }
+    }
+
+    setPasteCount(highestPaste)
+    setImageCount(highestImage)
+  }
+
+  createEffect(
+    on(
+      () => `${props.instanceId}:${props.sessionId}`,
+      () => {
+        const instanceId = props.instanceId
+        const sessionId = props.sessionId
+
+        onCleanup(() => {
+          setSessionDraftPrompt(instanceId, sessionId, prompt())
+        })
+
+        const storedPrompt = getSessionDraftPrompt(instanceId, sessionId)
+        const currentAttachments = untrack(() => getAttachments(instanceId, sessionId))
+
+        setPromptInternal(storedPrompt)
+        setSessionDraftPrompt(instanceId, sessionId, storedPrompt)
+        setHistoryIndex(-1)
+        setHistoryDraft(null)
+        setIgnoredAtPositions(new Set<number>())
+        setShowPicker(false)
+        setAtPosition(null)
+        setSearchQuery("")
+        syncAttachmentCounters(storedPrompt, currentAttachments)
+      }
+    )
+  )
+
+  function handleRemoveAttachment(attachmentId: string) {
+    const currentAttachments = attachments()
+    const attachment = currentAttachments.find((a) => a.id === attachmentId)
+
+    removeAttachment(props.instanceId, props.sessionId, attachmentId)
+
+    if (attachment) {
+      const currentPrompt = prompt()
+      let newPrompt = currentPrompt
+
+      if (attachment.source.type === "file") {
+        if (attachment.mediaType.startsWith("image/")) {
+          const imageMatch = attachment.display.match(/\[Image #(\d+)\]/)
+          if (imageMatch) {
+            const placeholder = `[Image #${imageMatch[1]}]`
+            newPrompt = currentPrompt.replace(placeholder, "").replace(/\s+/g, " ").trim()
+          }
+        } else {
+          const filename = attachment.filename
+          newPrompt = currentPrompt.replace(`@${filename}`, "").replace(/\s+/g, " ").trim()
+        }
+      } else if (attachment.source.type === "agent") {
+        const agentName = attachment.filename
+        newPrompt = currentPrompt.replace(`@${agentName}`, "").replace(/\s+/g, " ").trim()
+      } else if (attachment.source.type === "text") {
+        const placeholderMatch = attachment.display.match(/pasted #(\d+)/)
+        if (placeholderMatch) {
+          const placeholder = `[pasted #${placeholderMatch[1]}]`
+          newPrompt = currentPrompt.replace(placeholder, "").replace(/\s+/g, " ").trim()
+        }
+      }
+
+      setPrompt(newPrompt)
+    }
+  }
+
+  async function handlePaste(e: ClipboardEvent) {
+    const items = e.clipboardData?.items
+    if (!items) return
+
+    for (let i = 0; i < items.length; i++) {
+      const item = items[i]
+
+      if (item.type.startsWith("image/")) {
+        e.preventDefault()
+
+        const blob = item.getAsFile()
+        if (!blob) continue
+
+        const count = imageCount() + 1
+        setImageCount(count)
+
+        const reader = new FileReader()
+        reader.onload = () => {
+          const base64Data = (reader.result as string).split(",")[1]
+          const display = `[Image #${count}]`
+          const filename = `image-${count}.png`
+
+          const attachment = createFileAttachment(
+            filename,
+            filename,
+            "image/png",
+            new TextEncoder().encode(base64Data),
+            props.instanceFolder,
+          )
+          attachment.url = `data:image/png;base64,${base64Data}`
+          attachment.display = display
+          addAttachment(props.instanceId, props.sessionId, attachment)
+
+          const textarea = textareaRef
+          if (textarea) {
+            const start = textarea.selectionStart
+            const end = textarea.selectionEnd
+            const currentText = prompt()
+            const placeholder = `[Image #${count}]`
+            const newText = currentText.substring(0, start) + placeholder + currentText.substring(end)
+            setPrompt(newText)
+
+            setTimeout(() => {
+              const newCursorPos = start + placeholder.length
+              textarea.setSelectionRange(newCursorPos, newCursorPos)
+              textarea.focus()
+            }, 0)
+          }
+        }
+        reader.readAsDataURL(blob)
+
+        return
+      }
+    }
+
+    const pastedText = e.clipboardData?.getData("text/plain")
+    if (!pastedText) return
+
+    const lineCount = pastedText.split("\n").length
+    const charCount = pastedText.length
+
+    const isLongPaste = charCount > 150 || lineCount > 3
+
+    if (isLongPaste) {
+      e.preventDefault()
+
+      const count = pasteCount() + 1
+      setPasteCount(count)
+
+      const summary = lineCount > 1 ? `${lineCount} lines` : `${charCount} chars`
+      const display = `pasted #${count} (${summary})`
+      const filename = `paste-${count}.txt`
+
+      const attachment = createTextAttachment(pastedText, display, filename)
+      addAttachment(props.instanceId, props.sessionId, attachment)
+
+      const textarea = textareaRef
+      if (textarea) {
+        const start = textarea.selectionStart
+        const end = textarea.selectionEnd
+        const currentText = prompt()
+        const placeholder = `[pasted #${count}]`
+        const newText = currentText.substring(0, start) + placeholder + currentText.substring(end)
+        setPrompt(newText)
+
+        setTimeout(() => {
+          const newCursorPos = start + placeholder.length
+          textarea.setSelectionRange(newCursorPos, newCursorPos)
+          textarea.focus()
+        }, 0)
+      }
+    }
+  }
+
+  onMount(() => {
+    const handleGlobalKeyDown = (e: KeyboardEvent) => {
+      const activeElement = document.activeElement as HTMLElement
+
+      const isInputElement =
+        activeElement?.tagName === "INPUT" ||
+        activeElement?.tagName === "TEXTAREA" ||
+        activeElement?.tagName === "SELECT" ||
+        activeElement?.isContentEditable
+
+      if (isInputElement) return
+
+      const isModifierKey = e.ctrlKey || e.metaKey || e.altKey
+      if (isModifierKey) return
+
+      const isSpecialKey =
+        e.key === "Tab" || e.key === "Enter" || e.key.startsWith("Arrow") || e.key === "Backspace" || e.key === "Delete"
+      if (isSpecialKey) return
+
+      if (e.key.length === 1 && textareaRef && !props.disabled) {
+        textareaRef.focus()
+      }
+    }
+
+    document.addEventListener("keydown", handleGlobalKeyDown)
+
+    onCleanup(() => {
+      document.removeEventListener("keydown", handleGlobalKeyDown)
+    })
+
+    void (async () => {
+      const loaded = await getHistory(props.instanceFolder)
+      setHistory(loaded)
+    })()
+  })
+
+  function handleKeyDown(e: KeyboardEvent) {
+    const textarea = textareaRef
+    if (!textarea) {
+      return
+    }
+
+    const currentText = prompt()
+    const cursorAtBufferStart = textarea.selectionStart === 0 && textarea.selectionEnd === 0
+    const isShellMode = mode() === "shell"
+
+    if (!isShellMode && e.key === "!" && cursorAtBufferStart && currentText.length === 0 && !props.disabled) {
+      e.preventDefault()
+      setMode("shell")
+      return
+    }
+
+    if (showPicker() && e.key === "Escape") {
+      e.preventDefault()
+      e.stopPropagation()
+      handlePickerClose()
+      return
+    }
+
+    if (isShellMode) {
+      if (e.key === "Escape") {
+        e.preventDefault()
+        e.stopPropagation()
+        setMode("normal")
+        return
+      }
+      if (e.key === "Backspace" && cursorAtBufferStart && currentText.length === 0) {
+        e.preventDefault()
+        setMode("normal")
+        return
+      }
+    }
+
+    if (e.key === "Backspace" || e.key === "Delete") {
+      const cursorPos = textarea.selectionStart
+      const text = currentText
+
+      const pastePlaceholderRegex = /\[pasted #(\d+)\]/g
+      let pasteMatch
+
+      while ((pasteMatch = pastePlaceholderRegex.exec(text)) !== null) {
+        const placeholderStart = pasteMatch.index
+        const placeholderEnd = pasteMatch.index + pasteMatch[0].length
+        const pasteNumber = pasteMatch[1]
+
+        const isDeletingFromEnd = e.key === "Backspace" && cursorPos === placeholderEnd
+        const isDeletingFromStart = e.key === "Delete" && cursorPos === placeholderStart
+        const isSelected =
+          textarea.selectionStart <= placeholderStart &&
+          textarea.selectionEnd >= placeholderEnd &&
+          textarea.selectionStart !== textarea.selectionEnd
+
+        if (isDeletingFromEnd || isDeletingFromStart || isSelected) {
+          e.preventDefault()
+
+          const currentAttachments = attachments()
+          const attachment = currentAttachments.find(
+            (a) => a.source.type === "text" && a.display.includes(`pasted #${pasteNumber}`),
+          )
+
+          if (attachment) {
+            removeAttachment(props.instanceId, props.sessionId, attachment.id)
+          }
+
+          const newText = text.substring(0, placeholderStart) + text.substring(placeholderEnd)
+          setPrompt(newText)
+
+          setTimeout(() => {
+            textarea.setSelectionRange(placeholderStart, placeholderStart)
+          }, 0)
+
+          return
+        }
+      }
+
+      const imagePlaceholderRegex = /\[Image #(\d+)\]/g
+      let imageMatch
+
+      while ((imageMatch = imagePlaceholderRegex.exec(text)) !== null) {
+        const placeholderStart = imageMatch.index
+        const placeholderEnd = imageMatch.index + imageMatch[0].length
+        const imageNumber = imageMatch[1]
+
+        const isDeletingFromEnd = e.key === "Backspace" && cursorPos === placeholderEnd
+        const isDeletingFromStart = e.key === "Delete" && cursorPos === placeholderStart
+        const isSelected =
+          textarea.selectionStart <= placeholderStart &&
+          textarea.selectionEnd >= placeholderEnd &&
+          textarea.selectionStart !== textarea.selectionEnd
+
+        if (isDeletingFromEnd || isDeletingFromStart || isSelected) {
+          e.preventDefault()
+
+          const currentAttachments = attachments()
+          const attachment = currentAttachments.find(
+            (a) =>
+              a.source.type === "file" &&
+              a.mediaType.startsWith("image/") &&
+              a.display.includes(`Image #${imageNumber}`),
+          )
+
+          if (attachment) {
+            removeAttachment(props.instanceId, props.sessionId, attachment.id)
+          }
+
+          const newText = text.substring(0, placeholderStart) + text.substring(placeholderEnd)
+          setPrompt(newText)
+
+          setTimeout(() => {
+            textarea.setSelectionRange(placeholderStart, placeholderStart)
+          }, 0)
+
+          return
+        }
+      }
+
+      const mentionRegex = /@(\S+)/g
+      let mentionMatch
+
+      while ((mentionMatch = mentionRegex.exec(text)) !== null) {
+        const mentionStart = mentionMatch.index
+        const mentionEnd = mentionMatch.index + mentionMatch[0].length
+        const name = mentionMatch[1]
+
+        const isDeletingFromEnd = e.key === "Backspace" && cursorPos === mentionEnd
+        const isDeletingFromStart = e.key === "Delete" && cursorPos === mentionStart
+        const isSelected =
+          textarea.selectionStart <= mentionStart &&
+          textarea.selectionEnd >= mentionEnd &&
+          textarea.selectionStart !== textarea.selectionEnd
+
+        if (isDeletingFromEnd || isDeletingFromStart || isSelected) {
+          const currentAttachments = attachments()
+          const attachment = currentAttachments.find(
+            (a) => (a.source.type === "file" || a.source.type === "agent") && a.filename === name,
+          )
+
+          if (attachment) {
+            e.preventDefault()
+
+            removeAttachment(props.instanceId, props.sessionId, attachment.id)
+
+            setIgnoredAtPositions((prev) => {
+              const next = new Set(prev)
+              next.delete(mentionStart)
+              return next
+            })
+
+            const newText = text.substring(0, mentionStart) + text.substring(mentionEnd)
+            setPrompt(newText)
+
+            setTimeout(() => {
+              textarea.setSelectionRange(mentionStart, mentionStart)
+            }, 0)
+
+            return
+          }
+        }
+      }
+    }
+
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault()
+      if (showPicker()) {
+        handlePickerClose()
+      }
+      handleSend()
+      return
+    }
+
+    const atStart = textarea.selectionStart === 0 && textarea.selectionEnd === 0
+    const currentHistory = history()
+
+    if (e.key === "ArrowUp" && !showPicker() && atStart && currentHistory.length > 0) {
+      e.preventDefault()
+      if (historyIndex() === -1) {
+        setHistoryDraft(prompt())
+      }
+      const newIndex = historyIndex() === -1 ? 0 : Math.min(historyIndex() + 1, currentHistory.length - 1)
+      setHistoryIndex(newIndex)
+      setPrompt(currentHistory[newIndex])
+      return
+    }
+
+    if (e.key === "ArrowDown" && !showPicker() && historyIndex() >= 0) {
+      e.preventDefault()
+      const newIndex = historyIndex() - 1
+      if (newIndex >= 0) {
+        setHistoryIndex(newIndex)
+        setPrompt(currentHistory[newIndex])
+      } else {
+        setHistoryIndex(-1)
+        const draft = historyDraft()
+        setPrompt(draft ?? "")
+        setHistoryDraft(null)
+      }
+    }
+  }
+
+  async function handleSend() {
+    const text = prompt().trim()
+    const currentAttachments = attachments()
+    if (props.disabled || !text) return
+
+    const resolvedPrompt = resolvePastedPlaceholders(text, currentAttachments)
+    const isShellMode = mode() === "shell"
+
+    clearPrompt()
+    clearAttachments(props.instanceId, props.sessionId)
+    setIgnoredAtPositions(new Set<number>())
+    setPasteCount(0)
+    setImageCount(0)
+    setHistoryDraft(null)
+
+    try {
+      await addToHistory(props.instanceFolder, resolvedPrompt)
+      const updated = await getHistory(props.instanceFolder)
+      setHistory(updated)
+      setHistoryIndex(-1)
+      if (isShellMode) {
+        if (props.onRunShell) {
+          await props.onRunShell(resolvedPrompt)
+        } else {
+          await props.onSend(resolvedPrompt, [])
+        }
+      } else {
+        await props.onSend(text, currentAttachments)
+      }
+    } catch (error) {
+      console.error("Failed to send message:", error)
+      alert("Failed to send message: " + (error instanceof Error ? error.message : String(error)))
+    } finally {
+      textareaRef?.focus()
+    }
+  }
+
+  function handleInput(e: Event) {
+    const target = e.target as HTMLTextAreaElement
+    const value = target.value
+    setPrompt(value)
+    setHistoryIndex(-1)
+    setHistoryDraft(null)
+
+    const cursorPos = target.selectionStart
+    const textBeforeCursor = value.substring(0, cursorPos)
+    const lastAtIndex = textBeforeCursor.lastIndexOf("@")
+
+    const previousAtPosition = atPosition()
+
+    if (lastAtIndex === -1) {
+      setIgnoredAtPositions(new Set<number>())
+    } else if (previousAtPosition !== null && lastAtIndex !== previousAtPosition) {
+      setIgnoredAtPositions((prev) => {
+        const next = new Set(prev)
+        next.delete(previousAtPosition)
+        return next
+      })
+    }
+
+    if (lastAtIndex !== -1) {
+      const textAfterAt = value.substring(lastAtIndex + 1, cursorPos)
+      const hasSpace = textAfterAt.includes(" ") || textAfterAt.includes("\n")
+
+      if (!hasSpace && cursorPos === lastAtIndex + textAfterAt.length + 1) {
+        if (!ignoredAtPositions().has(lastAtIndex)) {
+          setAtPosition(lastAtIndex)
+          setSearchQuery(textAfterAt)
+          setShowPicker(true)
+        }
+        return
+      }
+    }
+
+    setShowPicker(false)
+    setAtPosition(null)
+  }
+
+  function handlePickerSelect(item: { type: "agent"; agent: Agent } | { type: "file"; file: { path: string; isGitFile: boolean } }) {
+    if (item.type === "agent") {
+      const agentName = item.agent.name
+      const existingAttachments = attachments()
+      const alreadyAttached = existingAttachments.some(
+        (att) => att.source.type === "agent" && att.source.name === agentName,
+      )
+
+      if (!alreadyAttached) {
+        const attachment = createAgentAttachment(agentName)
+        addAttachment(props.instanceId, props.sessionId, attachment)
+      }
+
+      const currentPrompt = prompt()
+      const pos = atPosition()
+      const cursorPos = textareaRef?.selectionStart || 0
+
+      if (pos !== null) {
+        const before = currentPrompt.substring(0, pos)
+        const after = currentPrompt.substring(cursorPos)
+        const attachmentText = `@${agentName}`
+        const newPrompt = before + attachmentText + " " + after
+        setPrompt(newPrompt)
+
+        setTimeout(() => {
+          if (textareaRef) {
+            const newCursorPos = pos + attachmentText.length + 1
+            textareaRef.setSelectionRange(newCursorPos, newCursorPos)
+          }
+        }, 0)
+      }
+    } else if (item.type === "file") {
+      const path = item.file.path
+      const isFolder = path.endsWith("/")
+      const filename = path.split("/").pop() || path
+
+      if (isFolder) {
+        const currentPrompt = prompt()
+        const pos = atPosition()
+        const cursorPos = textareaRef?.selectionStart || 0
+
+        if (pos !== null) {
+          const before = currentPrompt.substring(0, pos + 1)
+          const after = currentPrompt.substring(cursorPos)
+          const newPrompt = before + path + after
+          setPrompt(newPrompt)
+          setSearchQuery(path)
+
+          setTimeout(() => {
+            if (textareaRef) {
+              const newCursorPos = pos + 1 + path.length
+              textareaRef.setSelectionRange(newCursorPos, newCursorPos)
+            }
+          }, 0)
+        }
+
+        return
+      }
+
+      const existingAttachments = attachments()
+      const alreadyAttached = existingAttachments.some((att) => att.source.type === "file" && att.source.path === path)
+
+      if (!alreadyAttached) {
+        const attachment = createFileAttachment(path, filename, "text/plain", undefined, props.instanceFolder)
+        addAttachment(props.instanceId, props.sessionId, attachment)
+      }
+
+      const currentPrompt = prompt()
+      const pos = atPosition()
+      const cursorPos = textareaRef?.selectionStart || 0
+
+      if (pos !== null) {
+        const before = currentPrompt.substring(0, pos)
+        const after = currentPrompt.substring(cursorPos)
+        const attachmentText = `@${filename}`
+        const newPrompt = before + attachmentText + " " + after
+        setPrompt(newPrompt)
+
+        setTimeout(() => {
+          if (textareaRef) {
+            const newCursorPos = pos + attachmentText.length + 1
+            textareaRef.setSelectionRange(newCursorPos, newCursorPos)
+          }
+        }, 0)
+      }
+    }
+
+    setShowPicker(false)
+    setAtPosition(null)
+    setSearchQuery("")
+    textareaRef?.focus()
+  }
+
+  function handlePickerClose() {
+    const pos = atPosition()
+    if (pos !== null) {
+      setIgnoredAtPositions((prev) => new Set(prev).add(pos))
+    }
+    setShowPicker(false)
+    setAtPosition(null)
+    setSearchQuery("")
+    setTimeout(() => textareaRef?.focus(), 0)
+  }
+
+  function handleDragOver(e: DragEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(true)
+  }
+
+  function handleDragLeave(e: DragEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(false)
+  }
+
+  function handleDrop(e: DragEvent) {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsDragging(false)
+
+    const files = e.dataTransfer?.files
+    if (!files || files.length === 0) return
+
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i]
+      const path = (file as File & { path?: string }).path || file.name
+      const filename = file.name
+      const mime = file.type || "text/plain"
+
+      const attachment = createFileAttachment(path, filename, mime, undefined, props.instanceFolder)
+      addAttachment(props.instanceId, props.sessionId, attachment)
+    }
+
+    textareaRef?.focus()
+  }
+
+  const canSend = () => {
+    if (props.disabled) return false
+    const hasText = prompt().trim().length > 0
+    if (mode() === "shell") return hasText
+    return hasText || attachments().length > 0
+  }
+
+  const shellHint = () => (mode() === "shell" ? { key: "Esc", text: "to exit shell mode" } : { key: "!", text: "for shell mode" })
+
+  const instance = () => getActiveInstance()
+
+  return (
+    <div class="prompt-input-container">
+      <div
+        ref={containerRef}
+        class={`prompt-input-wrapper relative ${isDragging() ? "border-2" : ""}`}
+        style={
+          isDragging()
+            ? "border-color: var(--accent-primary); background-color: rgba(0, 102, 255, 0.05);"
+            : ""
+        }
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+        onDrop={handleDrop}
+      >
+        <Show when={showPicker() && instance()}>
+          <UnifiedPicker
+            open={showPicker()}
+            onClose={handlePickerClose}
+            onSelect={handlePickerSelect}
+            agents={instanceAgents()}
+            instanceClient={instance()!.client}
+            searchQuery={searchQuery()}
+            textareaRef={textareaRef}
+            workspaceFolder={props.instanceFolder}
+          />
+        </Show>
+
+        <div class="flex flex-1 flex-col">
+          <Show when={attachments().length > 0}>
+            <div class="flex flex-wrap gap-1.5 border-b pb-2" style="border-color: var(--border-base);">
+              <For each={attachments()}>
+                {(attachment) => {
+                  const isImage = attachment.mediaType.startsWith("image/")
+                  return (
+                    <div class="attachment-chip">
+                      <Show
+                        when={isImage}
+                        fallback={
+                          <Show
+                            when={attachment.source.type === "text"}
+                            fallback={
+                              <Show
+                                when={attachment.source.type === "agent"}
+                                fallback={
+                                  <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path
+                                      stroke-linecap="round"
+                                      stroke-linejoin="round"
+                                      stroke-width="2"
+                                      d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                                    />
+                                  </svg>
+                                }
+                              >
+                                <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                  <path
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                    stroke-width="2"
+                                    d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                                  />
+                                </svg>
+                              </Show>
+                            }
+                          >
+                            <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                              <path
+                                stroke-linecap="round"
+                                stroke-linejoin="round"
+                                stroke-width="2"
+                                d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"
+                              />
+                            </svg>
+                          </Show>
+                        }
+                      >
+                        <img src={attachment.url} alt={attachment.filename} class="h-5 w-5 rounded object-cover" />
+                      </Show>
+                      <span>{attachment.source.type === "text" ? attachment.display : attachment.filename}</span>
+                      <button
+                        onClick={() => handleRemoveAttachment(attachment.id)}
+                        class="attachment-remove"
+                        aria-label="Remove attachment"
+                      >
+                        <svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M6 18L18 6M6 6l12 12"
+                          />
+                        </svg>
+                      </button>
+                    </div>
+                  )
+                }}
+              </For>
+            </div>
+          </Show>
+          <textarea
+            ref={textareaRef}
+            class={`prompt-input ${mode() === "shell" ? "shell-mode" : ""}`}
+            placeholder={
+              mode() === "shell"
+                ? "Run a shell command (Esc to exit)..."
+                : "Type your message, @file, @agent, or paste images and text..."
+            }
+            value={prompt()}
+            onInput={handleInput}
+            onKeyDown={handleKeyDown}
+            onPaste={handlePaste}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            disabled={props.disabled}
+            rows={4}
+            style={attachments().length > 0 ? { "padding-top": "8px" } : {}}
+            spellcheck={false}
+            autocorrect="off"
+            autoCapitalize="off"
+            autocomplete="off"
+          />
+        </div>
+
+        <button
+          class={`send-button ${mode() === "shell" ? "shell-mode" : ""}`}
+          onClick={handleSend}
+          disabled={!canSend()}
+          aria-label="Send message"
+        >
+          <Show
+            when={mode() === "shell"}
+            fallback={<span class="send-icon">▶</span>}
+          >
+            <svg class="shell-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M5 8l5 4-5 4" />
+              <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h6" />
+            </svg>
+          </Show>
+        </button>
+      </div>
+      <div class="prompt-input-hints">
+        <div class="flex justify-between w-full gap-4">
+          <HintRow>
+            <Show
+              when={props.escapeInDebounce}
+              fallback={
+                <>
+                  <Kbd>Enter</Kbd> for new line • <Kbd shortcut="cmd+enter" /> to send • <Kbd>@</Kbd> for files/agents • <Kbd>↑↓</Kbd> for history
+                  <Show when={attachments().length > 0}>
+                    <span class="ml-2 text-xs" style="color: var(--text-muted);">• {attachments().length} file(s) attached</span>
+                  </Show>
+                  <span class="ml-2">
+                    • <Kbd>{shellHint().key}</Kbd> {shellHint().text}
+                  </span>
+                </>
+              }
+            >
+              <span class="font-medium" style="color: var(--status-warning);">
+                Press <Kbd>Esc</Kbd> again to abort session
+              </span>
+            </Show>
+          </HintRow>
+          <Show when={mode() === "shell"}>
+            <HintRow>Shell mode active</HintRow>
+          </Show>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/ui/src/components/session-list.tsx

@@ -0,0 +1,380 @@
+import { Component, For, Show, createSignal, createEffect, onCleanup, onMount, createMemo, JSX } from "solid-js"
+import type { Session, SessionStatus } from "../types/session"
+import { getSessionStatus } from "../stores/session-status"
+import { MessageSquare, Info, X, Copy } from "lucide-solid"
+import KeyboardHint from "./keyboard-hint"
+import Kbd from "./kbd"
+import { keyboardRegistry } from "../lib/keyboard-registry"
+import { formatShortcut } from "../lib/keyboard-utils"
+import { showToastNotification } from "../lib/notifications"
+
+
+interface SessionListProps {
+  instanceId: string
+  sessions: Map<string, Session>
+  activeSessionId: string | null
+  onSelect: (sessionId: string) => void
+  onClose: (sessionId: string) => void
+  onNew: () => void
+  showHeader?: boolean
+  showFooter?: boolean
+  headerContent?: JSX.Element
+  footerContent?: JSX.Element
+  onWidthChange?: (width: number) => void
+}
+
+const MIN_WIDTH = 200
+const MAX_WIDTH = 500
+const DEFAULT_WIDTH = 280
+const STORAGE_KEY = "opencode-session-sidebar-width"
+
+function formatSessionStatus(status: SessionStatus): string {
+  switch (status) {
+    case "working":
+      return "Working"
+    case "compacting":
+      return "Compacting"
+    default:
+      return "Idle"
+  }
+}
+
+function arraysEqual(prev: readonly string[] | undefined, next: readonly string[]): boolean {
+  if (!prev) {
+    return false
+  }
+
+  if (prev.length !== next.length) {
+    return false
+  }
+
+  for (let i = 0; i < prev.length; i++) {
+    if (prev[i] !== next[i]) {
+      return false
+    }
+  }
+
+  return true
+}
+
+const SessionList: Component<SessionListProps> = (props) => {
+  const [sidebarWidth, setSidebarWidth] = createSignal(DEFAULT_WIDTH)
+  const [isResizing, setIsResizing] = createSignal(false)
+  const [startX, setStartX] = createSignal(0)
+  const [startWidth, setStartWidth] = createSignal(DEFAULT_WIDTH)
+  const infoShortcut = keyboardRegistry.get("switch-to-info")
+
+  const selectSession = (sessionId: string) => {
+    props.onSelect(sessionId)
+  }
+
+  let mouseMoveHandler: ((event: MouseEvent) => void) | null = null
+  let mouseUpHandler: (() => void) | null = null
+  let touchMoveHandler: ((event: TouchEvent) => void) | null = null
+  let touchEndHandler: (() => void) | null = null
+
+  onMount(() => {
+    if (typeof window === "undefined") return
+    const saved = window.localStorage.getItem(STORAGE_KEY)
+    if (!saved) return
+
+    const width = Number.parseInt(saved, 10)
+    if (Number.isFinite(width) && width >= MIN_WIDTH && width <= MAX_WIDTH) {
+      setSidebarWidth(width)
+      setStartWidth(width)
+    }
+  })
+
+  createEffect(() => {
+    if (typeof window === "undefined") return
+    const width = sidebarWidth()
+    window.localStorage.setItem(STORAGE_KEY, width.toString())
+  })
+
+  createEffect(() => {
+    props.onWidthChange?.(sidebarWidth())
+  })
+ 
+  const copySessionId = async (event: MouseEvent, sessionId: string) => {
+    event.stopPropagation()
+ 
+    try {
+      if (typeof navigator === "undefined" || !navigator.clipboard) {
+        throw new Error("Clipboard API unavailable")
+      }
+ 
+      await navigator.clipboard.writeText(sessionId)
+      showToastNotification({ message: "Session ID copied", variant: "success" })
+    } catch (error) {
+      console.error(`Failed to copy session ID ${sessionId}:`, error)
+      showToastNotification({ message: "Unable to copy session ID", variant: "error" })
+    }
+  }
+ 
+  const clampWidth = (width: number) => Math.max(MIN_WIDTH, Math.min(MAX_WIDTH, width))
+ 
+
+  const removeMouseListeners = () => {
+    if (mouseMoveHandler) {
+      document.removeEventListener("mousemove", mouseMoveHandler)
+      mouseMoveHandler = null
+    }
+    if (mouseUpHandler) {
+      document.removeEventListener("mouseup", mouseUpHandler)
+      mouseUpHandler = null
+    }
+  }
+ 
+  const removeTouchListeners = () => {
+    if (touchMoveHandler) {
+      document.removeEventListener("touchmove", touchMoveHandler)
+      touchMoveHandler = null
+    }
+    if (touchEndHandler) {
+      document.removeEventListener("touchend", touchEndHandler)
+      touchEndHandler = null
+    }
+  }
+ 
+  const stopResizing = () => {
+    setIsResizing(false)
+    removeMouseListeners()
+    removeTouchListeners()
+  }
+ 
+  const handleMouseMove = (event: MouseEvent) => {
+    if (!isResizing()) return
+    const diff = event.clientX - startX()
+    const newWidth = clampWidth(startWidth() + diff)
+    setSidebarWidth(newWidth)
+  }
+ 
+  const handleMouseUp = () => {
+    stopResizing()
+  }
+ 
+  const handleTouchMove = (event: TouchEvent) => {
+    if (!isResizing()) return
+    const touch = event.touches[0]
+    if (!touch) return
+    const diff = touch.clientX - startX()
+    const newWidth = clampWidth(startWidth() + diff)
+    setSidebarWidth(newWidth)
+  }
+ 
+  const handleTouchEnd = () => {
+    stopResizing()
+  }
+ 
+  const handleMouseDown = (event: MouseEvent) => {
+    event.preventDefault()
+    setIsResizing(true)
+    setStartX(event.clientX)
+    setStartWidth(sidebarWidth())
+ 
+    mouseMoveHandler = handleMouseMove
+    mouseUpHandler = handleMouseUp
+ 
+    document.addEventListener("mousemove", handleMouseMove)
+    document.addEventListener("mouseup", handleMouseUp)
+  }
+ 
+  const handleTouchStart = (event: TouchEvent) => {
+    event.preventDefault()
+    const touch = event.touches[0]
+    if (!touch) return
+    setIsResizing(true)
+    setStartX(touch.clientX)
+    setStartWidth(sidebarWidth())
+ 
+    touchMoveHandler = handleTouchMove
+    touchEndHandler = handleTouchEnd
+ 
+    document.addEventListener("touchmove", handleTouchMove)
+    document.addEventListener("touchend", handleTouchEnd)
+  }
+ 
+  onCleanup(() => {
+    removeMouseListeners()
+    removeTouchListeners()
+  })
+ 
+  const SessionRow: Component<{ sessionId: string; canClose?: boolean }> = (rowProps) => {
+    const session = () => props.sessions.get(rowProps.sessionId)
+    if (!session()) {
+      return <></>
+    }
+    const isActive = () => props.activeSessionId === rowProps.sessionId
+    const title = () => session()?.title || "Untitled"
+    const status = () => getSessionStatus(props.instanceId, rowProps.sessionId)
+    const statusLabel = () => formatSessionStatus(status())
+    const pendingPermission = () => Boolean(session()?.pendingPermission)
+    const statusClassName = () => (pendingPermission() ? "session-permission" : `session-${status()}`)
+    const statusText = () => (pendingPermission() ? "Needs Permission" : statusLabel())
+ 
+    return (
+       <div class="session-list-item group">
+
+        <button
+          class={`session-item-base ${isActive() ? "session-item-active" : "session-item-inactive"}`}
+          onClick={() => selectSession(rowProps.sessionId)}
+          title={title()}
+          role="button"
+          aria-selected={isActive()}
+        >
+          <div class="session-item-row session-item-header">
+            <div class="session-item-title-row">
+              <MessageSquare class="w-4 h-4 flex-shrink-0" />
+              <span class="session-item-title truncate">{title()}</span>
+            </div>
+            <Show when={rowProps.canClose}>
+              <span
+                class="session-item-close opacity-80 hover:opacity-100 hover:bg-status-error hover:text-white rounded p-0.5 transition-all"
+                onClick={(event) => {
+                  event.stopPropagation()
+                  props.onClose(rowProps.sessionId)
+                }}
+                role="button"
+                tabIndex={0}
+                aria-label="Close session"
+              >
+                <X class="w-3 h-3" />
+              </span>
+            </Show>
+          </div>
+          <div class="session-item-row session-item-meta">
+            <span class={`status-indicator session-status session-status-list ${statusClassName()}`}>
+              <span class="status-dot" />
+              {statusText()}
+            </span>
+            <div class="session-item-actions">
+              <span
+                class={`session-item-close opacity-80 hover:opacity-100 ${isActive() ? "hover:bg-white/20" : "hover:bg-surface-hover"}`}
+                onClick={(event) => copySessionId(event, rowProps.sessionId)}
+                role="button"
+                tabIndex={0}
+                aria-label="Copy session ID"
+                title="Copy session ID"
+              >
+                <Copy class="w-3 h-3" />
+              </span>
+            </div>
+          </div>
+        </button>
+      </div>
+    )
+  }
+ 
+  const userSessionIds = createMemo(
+    () => {
+      const ids: string[] = []
+      for (const session of props.sessions.values()) {
+        if (session.parentId === null) {
+          ids.push(session.id)
+        }
+      }
+      return ids
+    },
+    undefined,
+    { equals: arraysEqual },
+  )
+ 
+  const childSessionIds = createMemo(
+    () => {
+      const children: { id: string; updated: number }[] = []
+      for (const session of props.sessions.values()) {
+        if (session.parentId !== null) {
+          children.push({ id: session.id, updated: session.time.updated ?? 0 })
+        }
+      }
+      if (children.length <= 1) {
+        return children.map((entry) => entry.id)
+      }
+      children.sort((a, b) => b.updated - a.updated)
+      return children.map((entry) => entry.id)
+    },
+    undefined,
+    { equals: arraysEqual },
+  )
+ 
+  return (
+    <div
+
+      class="session-list-container bg-surface-secondary border-r border-base flex flex-col"
+      style={{ width: `${sidebarWidth()}px` }}
+    >
+      <div
+        class="session-resize-handle"
+        onMouseDown={handleMouseDown}
+        onTouchStart={handleTouchStart}
+        role="presentation"
+        aria-hidden="true"
+      />
+
+      <Show when={props.showHeader !== false}>
+        <div class="session-list-header p-3 border-b border-base">
+          {props.headerContent ?? (
+            <div class="flex items-center justify-between gap-3">
+              <h3 class="text-sm font-semibold text-primary">Sessions</h3>
+              <KeyboardHint
+                shortcuts={[keyboardRegistry.get("session-prev")!, keyboardRegistry.get("session-next")!].filter(Boolean)}
+              />
+            </div>
+          )}
+        </div>
+      </Show>
+
+      <div class="session-list flex-1 overflow-y-auto">
+          <div class="session-section">
+            <div class="session-section-header px-3 py-2 text-xs font-semibold text-primary/70 uppercase tracking-wide">
+              Instance
+            </div>
+            <div class="session-list-item group">
+              <button
+                class={`session-item-base ${props.activeSessionId === "info" ? "session-item-active" : "session-item-inactive"}`}
+                onClick={() => selectSession("info")}
+                title="Instance Info"
+                role="button"
+                aria-selected={props.activeSessionId === "info"}
+              >
+                <div class="session-item-row session-item-header">
+                  <div class="session-item-title-row">
+                    <Info class="w-4 h-4 flex-shrink-0" />
+                    <span class="session-item-title truncate">Instance Info</span>
+                  </div>
+                  {infoShortcut && <Kbd shortcut={formatShortcut(infoShortcut)} class="ml-2 not-italic" />}
+                </div>
+              </button>
+            </div>
+          </div>
+
+
+        <Show when={userSessionIds().length > 0}>
+          <div class="session-section">
+            <div class="session-section-header px-3 py-2 text-xs font-semibold text-primary/70 uppercase tracking-wide">
+              User Session
+            </div>
+            <For each={userSessionIds()}>{(id) => <SessionRow sessionId={id} canClose />}</For>
+          </div>
+        </Show>
+
+        <Show when={childSessionIds().length > 0}>
+          <div class="session-section">
+            <div class="session-section-header px-3 py-2 text-xs font-semibold text-primary/70 uppercase tracking-wide">
+              Agent Sessions
+            </div>
+            <For each={childSessionIds()}>{(id) => <SessionRow sessionId={id} />}</For>
+          </div>
+        </Show>
+      </div>
+
+      <Show when={props.showFooter !== false}>
+        <div class="session-list-footer p-3 border-t border-base">
+          {props.footerContent ?? null}
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+export default SessionList

packages/ui/src/components/session-picker.tsx

@@ -0,0 +1,190 @@
+import { Component, createSignal, Show, For, createEffect } from "solid-js"
+import { Dialog } from "@kobalte/core/dialog"
+import type { Session, Agent } from "../types/session"
+import { getParentSessions, createSession, setActiveParentSession } from "../stores/sessions"
+import { instances, stopInstance } from "../stores/instances"
+import { agents } from "../stores/sessions"
+
+interface SessionPickerProps {
+  instanceId: string
+  open: boolean
+  onClose: () => void
+}
+
+const SessionPicker: Component<SessionPickerProps> = (props) => {
+  const [selectedAgent, setSelectedAgent] = createSignal<string>("")
+  const [isCreating, setIsCreating] = createSignal(false)
+
+  const instance = () => instances().get(props.instanceId)
+  const parentSessions = () => getParentSessions(props.instanceId)
+  const agentList = () => agents().get(props.instanceId) || []
+
+  createEffect(() => {
+    const list = agentList()
+    if (list.length === 0) {
+      setSelectedAgent("")
+      return
+    }
+    const current = selectedAgent()
+    if (!current || !list.some((agent) => agent.name === current)) {
+      setSelectedAgent(list[0].name)
+    }
+  })
+
+  function formatRelativeTime(timestamp: number): string {
+    const seconds = Math.floor((Date.now() - timestamp) / 1000)
+    const minutes = Math.floor(seconds / 60)
+    const hours = Math.floor(minutes / 60)
+    const days = Math.floor(hours / 24)
+
+    if (days > 0) return `${days}d ago`
+    if (hours > 0) return `${hours}h ago`
+    if (minutes > 0) return `${minutes}m ago`
+    return "just now"
+  }
+
+  async function handleSessionSelect(sessionId: string) {
+    setActiveParentSession(props.instanceId, sessionId)
+    props.onClose()
+  }
+
+  async function handleNewSession() {
+    setIsCreating(true)
+    try {
+      const session = await createSession(props.instanceId, selectedAgent())
+      setActiveParentSession(props.instanceId, session.id)
+      props.onClose()
+    } catch (error) {
+      console.error("Failed to create session:", error)
+    } finally {
+      setIsCreating(false)
+    }
+  }
+
+  async function handleCancel() {
+    await stopInstance(props.instanceId)
+    props.onClose()
+  }
+
+  return (
+    <Dialog open={props.open} onOpenChange={(open) => !open && handleCancel()}>
+      <Dialog.Portal>
+        <Dialog.Overlay class="modal-overlay" />
+        <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <Dialog.Content class="modal-surface w-full max-w-lg p-6">
+            <Dialog.Title class="text-xl font-semibold text-primary mb-4">
+              OpenCode • {instance()?.folder.split("/").pop()}
+            </Dialog.Title>
+
+            <div class="space-y-6">
+              <Show
+                when={parentSessions().length > 0}
+                fallback={<div class="text-center py-4 text-sm text-muted">No previous sessions</div>}
+              >
+                <div>
+                  <h3 class="text-sm font-medium text-secondary mb-2">
+                    Resume a session ({parentSessions().length}):
+                  </h3>
+                  <div class="space-y-1 max-h-[400px] overflow-y-auto">
+                    <For each={parentSessions()}>
+                      {(session) => (
+                        <button
+                          type="button"
+                          class="selector-option w-full text-left hover:bg-surface-hover focus:bg-surface-hover"
+                          onClick={() => handleSessionSelect(session.id)}
+                        >
+                          <div class="selector-option-content w-full">
+                            <span class="selector-option-label truncate">
+                              {session.title || "Untitled"}
+                            </span>
+                          </div>
+                          <span class="selector-badge-time flex-shrink-0">
+                            {formatRelativeTime(session.time.updated)}
+                          </span>
+                        </button>
+                      )}
+                    </For>
+                  </div>
+                </div>
+              </Show>
+
+              <div class="relative">
+                <div class="absolute inset-0 flex items-center">
+                  <div class="w-full border-t border-base" />
+                </div>
+                <div class="relative flex justify-center text-sm">
+                  <span class="px-2 bg-surface-base text-muted">or</span>
+                </div>
+              </div>
+
+              <div>
+                <h3 class="text-sm font-medium text-secondary mb-2">Start new session:</h3>
+                <div class="space-y-3">
+                  <Show
+                    when={agentList().length > 0}
+                    fallback={<div class="text-sm text-muted">Loading agents...</div>}
+                  >
+                    <select
+                      class="selector-input w-full"
+                      value={selectedAgent()}
+                      onChange={(e) => setSelectedAgent(e.currentTarget.value)}
+                    >
+                      <For each={agentList()}>{(agent) => <option value={agent.name}>{agent.name}</option>}</For>
+                    </select>
+                  </Show>
+
+                  <button
+                    class="button-primary w-full flex items-center justify-center text-sm disabled:cursor-not-allowed"
+                    onClick={handleNewSession}
+                    disabled={isCreating() || agentList().length === 0}
+                  >
+                    <div class="flex items-center gap-2">
+                      <Show
+                        when={!isCreating()}
+                        fallback={
+                          <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
+                            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
+                            <path
+                              class="opacity-75"
+                              fill="currentColor"
+                              d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                            />
+                          </svg>
+                        }
+                      >
+                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+                        </svg>
+                      </Show>
+                      <Show
+                        when={!isCreating()}
+                        fallback={<span>Creating...</span>}
+                      >
+                        <span>{agentList().length === 0 ? "Loading agents..." : "Create Session"}</span>
+                      </Show>
+                    </div>
+                    <kbd class="kbd ml-2">
+                      Cmd+Enter
+                    </kbd>
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div class="mt-6 flex justify-end">
+              <button
+                type="button"
+                class="selector-button selector-button-secondary"
+                onClick={handleCancel}
+              >
+                Cancel
+              </button>
+            </div>
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}
+
+export default SessionPicker

packages/ui/src/components/session/context-usage-panel.tsx

@@ -0,0 +1,63 @@
+import { createMemo, type Component } from "solid-js"
+import { getSessionInfo } from "../../stores/sessions"
+import { formatTokenTotal } from "../../lib/formatters"
+
+interface ContextUsagePanelProps {
+  instanceId: string
+  sessionId: string
+}
+
+const ContextUsagePanel: Component<ContextUsagePanelProps> = (props) => {
+  const info = createMemo(
+    () =>
+      getSessionInfo(props.instanceId, props.sessionId) ?? {
+        tokens: 0,
+        cost: 0,
+        contextWindow: 0,
+        isSubscriptionModel: false,
+        contextUsageTokens: 0,
+        contextUsagePercent: null,
+      },
+  )
+
+  const tokens = createMemo(() => info().tokens)
+  const contextUsageTokens = createMemo(() => info().contextUsageTokens ?? 0)
+  const contextWindow = createMemo(() => info().contextWindow)
+  const contextUsagePercent = createMemo(() => info().contextUsagePercent)
+
+  const costLabel = createMemo(() => {
+    if (info().isSubscriptionModel || info().cost <= 0) return "Included in plan"
+    return `$${info().cost.toFixed(2)} spent`
+  })
+
+  return (
+    <div class="session-context-panel border-r border-base border-b px-3 py-3">
+      <div class="flex items-center justify-between gap-4">
+        <div>
+          <div class="text-xs font-semibold text-primary/70 uppercase tracking-wide">Tokens (last call)</div>
+          <div class="text-lg font-semibold text-primary">{formatTokenTotal(tokens())}</div>
+        </div>
+        <div class="text-xs text-primary/70 text-right leading-tight">{costLabel()}</div>
+      </div>
+      <div class="mt-4">
+        <div class="flex items-center justify-between mb-1">
+          <div class="text-xs font-semibold text-primary/70 uppercase tracking-wide">Context window usage</div>
+          <div class="text-sm font-medium text-primary">{contextUsagePercent() !== null ? `${contextUsagePercent()}%` : "--"}</div>
+        </div>
+        <div class="text-sm text-primary/90">
+          {contextWindow()
+            ? `${formatTokenTotal(contextUsageTokens())} of ${formatTokenTotal(contextWindow())}`
+            : "Window size unavailable"}
+        </div>
+      </div>
+      <div class="mt-3 h-1.5 rounded-full bg-base relative overflow-hidden">
+        <div
+          class="absolute inset-y-0 left-0 rounded-full bg-accent-primary transition-[width]"
+          style={{ width: contextUsagePercent() === null ? "0%" : `${contextUsagePercent()}%` }}
+        />
+      </div>
+    </div>
+  )
+}
+
+export default ContextUsagePanel

packages/ui/src/components/session/session-view.tsx

@@ -0,0 +1,150 @@
+import { Show, createMemo, createEffect, onCleanup, type Component } from "solid-js"
+import type { Session } from "../../types/session"
+import type { Attachment } from "../../types/attachment"
+import type { ClientPart } from "../../types/message"
+import MessageStream from "../message-stream"
+import PromptInput from "../prompt-input"
+import { instances } from "../../stores/instances"
+import { loadMessages, sendMessage, forkSession, isSessionMessagesLoading, setActiveParentSession, setActiveSession, runShellCommand } from "../../stores/sessions"
+
+interface SessionViewProps {
+  sessionId: string
+  activeSessions: Map<string, Session>
+  instanceId: string
+  instanceFolder: string
+  escapeInDebounce: boolean
+}
+
+export const SessionView: Component<SessionViewProps> = (props) => {
+  const session = () => props.activeSessions.get(props.sessionId)
+  const messagesLoading = createMemo(() => isSessionMessagesLoading(props.instanceId, props.sessionId))
+
+  createEffect(() => {
+    const currentSession = session()
+    if (currentSession) {
+      loadMessages(props.instanceId, currentSession.id).catch(console.error)
+    }
+  })
+
+  async function handleSendMessage(prompt: string, attachments: Attachment[]) {
+    await sendMessage(props.instanceId, props.sessionId, prompt, attachments)
+  }
+
+  async function handleRunShell(command: string) {
+    await runShellCommand(props.instanceId, props.sessionId, command)
+  }
+
+  function getUserMessageText(messageId: string): string | null {
+    const currentSession = session()
+    if (!currentSession) return null
+
+    const targetMessage = currentSession.messages.find((m) => m.id === messageId)
+    const targetInfo = currentSession.messagesInfo.get(messageId)
+    if (!targetMessage || targetInfo?.role !== "user") {
+      return null
+    }
+
+    const textParts = targetMessage.parts.filter((p): p is ClientPart & { type: "text"; text: string } => p.type === "text")
+    if (textParts.length === 0) {
+      return null
+    }
+
+    return textParts.map((p) => p.text).join("\n")
+  }
+
+  async function handleRevert(messageId: string) {
+    const instance = instances().get(props.instanceId)
+    if (!instance || !instance.client) return
+
+    try {
+      await instance.client.session.revert({
+        path: { id: props.sessionId },
+        body: { messageID: messageId },
+      })
+
+      const restoredText = getUserMessageText(messageId)
+      if (restoredText) {
+        const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
+        if (textarea) {
+          textarea.value = restoredText
+          textarea.dispatchEvent(new Event("input", { bubbles: true }))
+          textarea.focus()
+        }
+      }
+    } catch (error) {
+      console.error("Failed to revert:", error)
+      alert("Failed to revert to message")
+    }
+  }
+
+  async function handleFork(messageId?: string) {
+    if (!messageId) {
+      console.warn("Fork requires a user message id")
+      return
+    }
+
+    const restoredText = getUserMessageText(messageId)
+
+    try {
+      const forkedSession = await forkSession(props.instanceId, props.sessionId, { messageId })
+
+      const parentToActivate = forkedSession.parentId ?? forkedSession.id
+      setActiveParentSession(props.instanceId, parentToActivate)
+      if (forkedSession.parentId) {
+        setActiveSession(props.instanceId, forkedSession.id)
+      }
+
+      await loadMessages(props.instanceId, forkedSession.id).catch(console.error)
+
+      if (restoredText) {
+        const textarea = document.querySelector(".prompt-input") as HTMLTextAreaElement
+        if (textarea) {
+          textarea.value = restoredText
+          textarea.dispatchEvent(new Event("input", { bubbles: true }))
+          textarea.focus()
+        }
+      }
+    } catch (error) {
+      console.error("Failed to fork session:", error)
+      alert("Failed to fork session")
+    }
+  }
+
+
+  return (
+    <Show
+      when={session()}
+      fallback={
+        <div class="flex items-center justify-center h-full">
+          <div class="text-center text-gray-500">Session not found</div>
+        </div>
+      }
+    >
+      {(s) => (
+        <div class="session-view">
+          <MessageStream
+            instanceId={props.instanceId}
+            sessionId={s().id}
+            messages={s().messages || []}
+            messagesInfo={s().messagesInfo}
+            revert={s().revert}
+            loading={messagesLoading()}
+            onRevert={handleRevert}
+            onFork={handleFork}
+          />
+
+          <PromptInput
+            instanceId={props.instanceId}
+            instanceFolder={props.instanceFolder}
+            sessionId={s().id}
+            onSend={handleSendMessage}
+            onRunShell={handleRunShell}
+            escapeInDebounce={props.escapeInDebounce}
+          />
+        </div>
+      )}
+    </Show>
+  )
+}
+
+export default SessionView

packages/ui/src/components/unified-picker.tsx

@@ -0,0 +1,291 @@
+import { Component, createSignal, createEffect, For, Show, onCleanup } from "solid-js"
+import type { Agent } from "../types/session"
+import type { OpencodeClient } from "@opencode-ai/sdk/client"
+
+interface FileItem {
+  path: string
+  added?: number
+  removed?: number
+  isGitFile: boolean
+}
+
+type PickerItem = { type: "agent"; agent: Agent } | { type: "file"; file: FileItem }
+
+interface UnifiedPickerProps {
+  open: boolean
+  onSelect: (item: PickerItem) => void
+  onClose: () => void
+  agents: Agent[]
+  instanceClient: OpencodeClient | null
+  searchQuery: string
+  textareaRef?: HTMLTextAreaElement
+  workspaceFolder: string
+}
+
+const UnifiedPicker: Component<UnifiedPickerProps> = (props) => {
+  const [files, setFiles] = createSignal<FileItem[]>([])
+  const [filteredAgents, setFilteredAgents] = createSignal<Agent[]>([])
+  const [selectedIndex, setSelectedIndex] = createSignal(0)
+  const [loading, setLoading] = createSignal(false)
+  const [allFiles, setAllFiles] = createSignal<FileItem[]>([])
+  const [isInitialized, setIsInitialized] = createSignal(false)
+
+  let containerRef: HTMLDivElement | undefined
+  let scrollContainerRef: HTMLDivElement | undefined
+
+  async function fetchFiles(searchQuery: string) {
+    setLoading(true)
+
+    try {
+      if (allFiles().length === 0) {
+        const scannedPaths = await window.electronAPI.scanDirectory(props.workspaceFolder)
+        const scannedFiles: FileItem[] = scannedPaths.map((path) => ({
+          path,
+          isGitFile: false,
+        }))
+        setAllFiles(scannedFiles)
+      }
+
+      const filteredFiles = searchQuery.trim()
+        ? allFiles().filter((f) => f.path.toLowerCase().includes(searchQuery.toLowerCase()))
+        : allFiles()
+
+      setFiles(filteredFiles)
+      setSelectedIndex(0)
+
+      setTimeout(() => {
+        if (scrollContainerRef) {
+          scrollContainerRef.scrollTop = 0
+        }
+      }, 0)
+    } catch (error) {
+      console.error(`[UnifiedPicker] Failed to fetch files:`, error)
+      setFiles([])
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  let lastQuery = ""
+
+  createEffect(() => {
+    if (props.open && !isInitialized()) {
+      setIsInitialized(true)
+      fetchFiles(props.searchQuery)
+      lastQuery = props.searchQuery
+      return
+    }
+
+    if (props.open && props.searchQuery !== lastQuery) {
+      lastQuery = props.searchQuery
+      fetchFiles(props.searchQuery)
+    }
+  })
+
+  createEffect(() => {
+    if (!props.open) return
+
+    const query = props.searchQuery.toLowerCase()
+    const filtered = query
+      ? props.agents.filter(
+          (agent) =>
+            agent.name.toLowerCase().includes(query) ||
+            (agent.description && agent.description.toLowerCase().includes(query)),
+        )
+      : props.agents
+
+    setFilteredAgents(filtered)
+  })
+
+  const allItems = (): PickerItem[] => {
+    const items: PickerItem[] = []
+    filteredAgents().forEach((agent) => items.push({ type: "agent", agent }))
+    files().forEach((file) => items.push({ type: "file", file }))
+    return items
+  }
+
+  function scrollToSelected() {
+    setTimeout(() => {
+      const selectedElement = containerRef?.querySelector('[data-picker-selected="true"]')
+      if (selectedElement) {
+        selectedElement.scrollIntoView({ block: "nearest", behavior: "smooth" })
+      }
+    }, 0)
+  }
+
+  function handleSelect(item: PickerItem) {
+    props.onSelect(item)
+  }
+
+  function handleKeyDown(e: KeyboardEvent) {
+    if (!props.open) return
+
+    const items = allItems()
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault()
+      setSelectedIndex((prev) => Math.min(prev + 1, items.length - 1))
+      scrollToSelected()
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault()
+      setSelectedIndex((prev) => Math.max(prev - 1, 0))
+      scrollToSelected()
+    } else if (e.key === "Enter") {
+      e.preventDefault()
+      const selected = items[selectedIndex()]
+      if (selected) {
+        handleSelect(selected)
+      }
+    } else if (e.key === "Escape") {
+      e.preventDefault()
+      props.onClose()
+    }
+  }
+
+  createEffect(() => {
+    if (props.open) {
+      document.addEventListener("keydown", handleKeyDown)
+      onCleanup(() => {
+        document.removeEventListener("keydown", handleKeyDown)
+      })
+    }
+  })
+
+  const agentCount = () => filteredAgents().length
+  const fileCount = () => files().length
+
+  return (
+    <Show when={props.open}>
+      <div
+        ref={containerRef}
+        class="dropdown-surface bottom-full left-0 mb-1 max-w-md"
+      >
+        <div class="dropdown-header">
+          <div class="dropdown-header-title">
+            Select Agent or File
+            <Show when={loading()}>
+              <span class="ml-2">Loading...</span>
+            </Show>
+          </div>
+        </div>
+
+        <div ref={scrollContainerRef} class="dropdown-content max-h-60">
+          <Show when={agentCount() === 0 && fileCount() === 0}>
+            <div class="dropdown-empty">No results found</div>
+          </Show>
+
+          <Show when={agentCount() > 0}>
+            <div class="dropdown-section-header">
+              AGENTS
+            </div>
+            <For each={filteredAgents()}>
+              {(agent) => {
+                const itemIndex = allItems().findIndex(
+                  (item) => item.type === "agent" && item.agent.name === agent.name,
+                )
+                return (
+                  <div
+                    class={`dropdown-item ${
+                      itemIndex === selectedIndex() ? "dropdown-item-highlight" : ""
+                    }`}
+                    data-picker-selected={itemIndex === selectedIndex()}
+                    onClick={() => handleSelect({ type: "agent", agent })}
+                  >
+                    <div class="flex items-start gap-2">
+                      <svg
+                        class="dropdown-icon-accent h-4 w-4 mt-0.5"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                          stroke-width="2"
+                          d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+                        />
+                      </svg>
+                      <div class="flex-1">
+                        <div class="flex items-center gap-2">
+                          <span class="text-sm font-medium">{agent.name}</span>
+                          <Show when={agent.mode === "subagent"}>
+                            <span class="dropdown-badge">
+                              subagent
+                            </span>
+                          </Show>
+                        </div>
+                        <Show when={agent.description}>
+                          <div class="mt-0.5 text-xs" style="color: var(--text-muted)">
+                            {agent.description && agent.description.length > 80
+                              ? agent.description.slice(0, 80) + "..."
+                              : agent.description}
+                          </div>
+                        </Show>
+                      </div>
+                    </div>
+                  </div>
+                )
+              }}
+            </For>
+          </Show>
+
+          <Show when={fileCount() > 0}>
+            <div class="dropdown-section-header">
+              FILES
+            </div>
+            <For each={files()}>
+              {(file) => {
+                const itemIndex = allItems().findIndex((item) => item.type === "file" && item.file.path === file.path)
+                const isFolder = file.path.endsWith("/")
+                return (
+                  <div
+                    class={`dropdown-item py-1.5 ${
+                      itemIndex === selectedIndex() ? "dropdown-item-highlight" : ""
+                    }`}
+                    data-picker-selected={itemIndex === selectedIndex()}
+                    onClick={() => handleSelect({ type: "file", file })}
+                  >
+                    <div class="flex items-center gap-2 text-sm">
+                      <Show
+                        when={isFolder}
+                        fallback={
+                          <svg class="dropdown-icon h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                            />
+                          </svg>
+                        }
+                      >
+                        <svg class="dropdown-icon-accent h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            stroke-width="2"
+                            d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+                          />
+                        </svg>
+                      </Show>
+                      <span class="truncate">{file.path}</span>
+                    </div>
+                  </div>
+                )
+              }}
+            </For>
+          </Show>
+        </div>
+
+        <div class="dropdown-footer">
+          <div>
+            <span class="font-medium">↑↓</span> navigate • <span class="font-medium">Enter</span> select •{" "}
+            <span class="font-medium">Esc</span> close
+          </div>
+        </div>
+      </div>
+    </Show>
+  )
+}
+
+export default UnifiedPicker