release: v1.0.222

This reverts commit 9d32a0354f1db3ea4893f4ad00900c6420ab78c6.

bun.lock

@@ -22,7 +22,7 @@
     },
     "packages/app": {
       "name": "@opencode-ai/app",
-      "version": "1.0.219",
+      "version": "1.0.222",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -70,7 +70,7 @@
     },
     "packages/console/app": {
       "name": "@opencode-ai/console-app",
-      "version": "1.0.219",
+      "version": "1.0.222",
       "dependencies": {
         "@cloudflare/vite-plugin": "1.15.2",
         "@ibm/plex": "6.4.1",
@@ -98,7 +98,7 @@
     },
     "packages/console/core": {
       "name": "@opencode-ai/console-core",
-      "version": "1.0.219",
+      "version": "1.0.222",
       "dependencies": {
         "@aws-sdk/client-sts": "3.782.0",
         "@jsx-email/render": "1.1.1",
@@ -125,7 +125,7 @@
     },
     "packages/console/function": {
       "name": "@opencode-ai/console-function",
-      "version": "1.0.219",
+      "version": "1.0.222",
       "dependencies": {
         "@ai-sdk/anthropic": "2.0.0",
         "@ai-sdk/openai": "2.0.2",
@@ -149,7 +149,7 @@
     },
     "packages/console/mail": {
       "name": "@opencode-ai/console-mail",
-      "version": "1.0.219",
+      "version": "1.0.222",
       "dependencies": {
         "@jsx-email/all": "2.2.3",
         "@jsx-email/cli": "1.4.3",
@@ -173,7 +173,7 @@
     },
     "packages/desktop": {
       "name": "@opencode-ai/desktop",
-      "version": "1.0.219",
+      "version": "1.0.222",
       "dependencies": {
         "@opencode-ai/app": "workspace:*",
         "@solid-primitives/storage": "catalog:",
@@ -201,7 +201,7 @@
     },
     "packages/enterprise": {
       "name": "@opencode-ai/enterprise",
-      "version": "1.0.219",
+      "version": "1.0.222",
       "dependencies": {
         "@opencode-ai/ui": "workspace:*",
         "@opencode-ai/util": "workspace:*",
@@ -230,7 +230,7 @@
     },
     "packages/function": {
       "name": "@opencode-ai/function",
-      "version": "1.0.219",
+      "version": "1.0.222",
       "dependencies": {
         "@octokit/auth-app": "8.0.1",
         "@octokit/rest": "catalog:",
@@ -246,7 +246,7 @@
     },
     "packages/opencode": {
       "name": "opencode",
-      "version": "1.0.219",
+      "version": "1.0.222",
       "bin": {
         "opencode": "./bin/opencode",
       },
@@ -294,7 +294,7 @@
         "@zip.js/zip.js": "2.7.62",
         "ai": "catalog:",
         "bonjour-service": "1.3.0",
-        "bun-pty": "0.4.2",
+        "bun-pty": "0.4.4",
         "chokidar": "4.0.3",
         "clipboardy": "4.0.0",
         "decimal.js": "10.5.0",
@@ -348,7 +348,7 @@
     },
     "packages/plugin": {
       "name": "@opencode-ai/plugin",
-      "version": "1.0.219",
+      "version": "1.0.222",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "zod": "catalog:",
@@ -368,7 +368,7 @@
     },
     "packages/sdk/js": {
       "name": "@opencode-ai/sdk",
-      "version": "1.0.219",
+      "version": "1.0.222",
       "devDependencies": {
         "@hey-api/openapi-ts": "0.88.1",
         "@tsconfig/node22": "catalog:",
@@ -379,7 +379,7 @@
     },
     "packages/slack": {
       "name": "@opencode-ai/slack",
-      "version": "1.0.219",
+      "version": "1.0.222",
       "dependencies": {
         "@opencode-ai/sdk": "workspace:*",
         "@slack/bolt": "^3.17.1",
@@ -392,7 +392,7 @@
     },
     "packages/ui": {
       "name": "@opencode-ai/ui",
-      "version": "1.0.219",
+      "version": "1.0.222",
       "dependencies": {
         "@kobalte/core": "catalog:",
         "@opencode-ai/sdk": "workspace:*",
@@ -430,7 +430,7 @@
     },
     "packages/util": {
       "name": "@opencode-ai/util",
-      "version": "1.0.219",
+      "version": "1.0.222",
       "dependencies": {
         "zod": "catalog:",
       },
@@ -441,7 +441,7 @@
     },
     "packages/web": {
       "name": "@opencode-ai/web",
-      "version": "1.0.219",
+      "version": "1.0.222",
       "dependencies": {
         "@astrojs/cloudflare": "12.6.3",
         "@astrojs/markdown-remark": "6.3.1",
@@ -2044,7 +2044,7 @@
 
     "bun-ffi-structs": ["bun-ffi-structs@0.1.2", "", { "peerDependencies": { "typescript": "^5" } }, "sha512-Lh1oQAYHDcnesJauieA4UNkWGXY9hYck7OA5IaRwE3Bp6K2F2pJSNYqq+hIy7P3uOvo3km3oxS8304g5gDMl/w=="],
 
-    "bun-pty": ["bun-pty@0.4.2", "", {}, "sha512-sHImDz6pJDsHAroYpC9ouKVgOyqZ7FP3N+stX5IdMddHve3rf9LIZBDomQcXrACQ7sQDNuwZQHG8BKR7w8krkQ=="],
+    "bun-pty": ["bun-pty@0.4.4", "", {}, "sha512-WK4G6uWsZgu1v4hKIlw6G1q2AOf8Rbga2Yr7RnxArVjjyb+mtVa/CFc9GOJf+OYSJSH8k7LonAtQOVeNAddRyg=="],
 
     "bun-types": ["bun-types@1.3.4", "", { "dependencies": { "@types/node": "*" } }, "sha512-5ua817+BZPZOlNaRgGBpZJOSAQ9RQ17pkwPD0yR7CfJg+r8DgIILByFifDTa+IPDDxzf5VNhtNlcKqFzDgJvlQ=="],
 

packages/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/app",
-  "version": "1.0.219",
+  "version": "1.0.222",
   "description": "",
   "type": "module",
   "exports": {

packages/app/src/app.tsx

@@ -10,6 +10,7 @@ import { Diff } from "@opencode-ai/ui/diff"
 import { Code } from "@opencode-ai/ui/code"
 import { ThemeProvider } from "@opencode-ai/ui/theme"
 import { GlobalSyncProvider } from "@/context/global-sync"
+import { PermissionProvider } from "@/context/permission"
 import { LayoutProvider } from "@/context/layout"
 import { GlobalSDKProvider } from "@/context/global-sdk"
 import { ServerProvider, useServer } from "@/context/server"
@@ -66,34 +67,36 @@ export function App() {
                     <ServerKey>
                       <GlobalSDKProvider>
                         <GlobalSyncProvider>
-                          <LayoutProvider>
-                            <NotificationProvider>
-                              <Router
-                                root={(props) => (
-                                  <CommandProvider>
-                                    <Layout>{props.children}</Layout>
-                                  </CommandProvider>
+                          <Router
+                            root={(props) => (
+                              <PermissionProvider>
+                                <LayoutProvider>
+                                  <NotificationProvider>
+                                    <CommandProvider>
+                                      <Layout>{props.children}</Layout>
+                                    </CommandProvider>
+                                  </NotificationProvider>
+                                </LayoutProvider>
+                              </PermissionProvider>
+                            )}
+                          >
+                            <Route path="/" component={Home} />
+                            <Route path="/:dir" component={DirectoryLayout}>
+                              <Route path="/" component={() => <Navigate href="session" />} />
+                              <Route
+                                path="/session/:id?"
+                                component={(p) => (
+                                  <Show when={p.params.id ?? "new"} keyed>
+                                    <TerminalProvider>
+                                      <PromptProvider>
+                                        <Session />
+                                      </PromptProvider>
+                                    </TerminalProvider>
+                                  </Show>
                                 )}
-                              >
-                                <Route path="/" component={Home} />
-                                <Route path="/:dir" component={DirectoryLayout}>
-                                  <Route path="/" component={() => <Navigate href="session" />} />
-                                  <Route
-                                    path="/session/:id?"
-                                    component={(p) => (
-                                      <Show when={p.params.id ?? "new"} keyed>
-                                        <TerminalProvider>
-                                          <PromptProvider>
-                                            <Session />
-                                          </PromptProvider>
-                                        </TerminalProvider>
-                                      </Show>
-                                    )}
-                                  />
-                                </Route>
-                              </Router>
-                            </NotificationProvider>
-                          </LayoutProvider>
+                              />
+                            </Route>
+                          </Router>
                         </GlobalSyncProvider>
                       </GlobalSDKProvider>
                     </ServerKey>

packages/app/src/components/dialog-select-model.tsx

@@ -1,4 +1,5 @@
-import { Component, createMemo, Show } from "solid-js"
+import { Popover as Kobalte } from "@kobalte/core/popover"
+import { Component, createMemo, createSignal, JSX, Show } from "solid-js"
 import { useLocal } from "@/context/local"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { popularProviders } from "@/hooks/use-providers"
@@ -9,9 +10,12 @@ import { List } from "@opencode-ai/ui/list"
 import { DialogSelectProvider } from "./dialog-select-provider"
 import { DialogManageModels } from "./dialog-manage-models"
 
-export const DialogSelectModel: Component<{ provider?: string }> = (props) => {
+const ModelList: Component<{
+  provider?: string
+  class?: string
+  onSelect: () => void
+}> = (props) => {
   const local = useLocal()
-  const dialog = useDialog()
 
   const models = createMemo(() =>
     local.model
@@ -20,6 +24,70 @@ export const DialogSelectModel: Component<{ provider?: string }> = (props) => {
       .filter((m) => (props.provider ? m.provider.id === props.provider : true)),
   )
 
+  return (
+    <List
+      class={`flex-1 min-h-0 [&_[data-slot=list-scroll]]:flex-1 [&_[data-slot=list-scroll]]:min-h-0 ${props.class ?? ""}`}
+      search={{ placeholder: "Search models", autofocus: true }}
+      emptyMessage="No model results"
+      key={(x) => `${x.provider.id}:${x.id}`}
+      items={models}
+      current={local.model.current()}
+      filterKeys={["provider.name", "name", "id"]}
+      sortBy={(a, b) => a.name.localeCompare(b.name)}
+      groupBy={(x) => x.provider.name}
+      sortGroupsBy={(a, b) => {
+        if (a.category === "Recent" && b.category !== "Recent") return -1
+        if (b.category === "Recent" && a.category !== "Recent") return 1
+        const aProvider = a.items[0].provider.id
+        const bProvider = b.items[0].provider.id
+        if (popularProviders.includes(aProvider) && !popularProviders.includes(bProvider)) return -1
+        if (!popularProviders.includes(aProvider) && popularProviders.includes(bProvider)) return 1
+        return popularProviders.indexOf(aProvider) - popularProviders.indexOf(bProvider)
+      }}
+      onSelect={(x) => {
+        local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
+          recent: true,
+        })
+        props.onSelect()
+      }}
+    >
+      {(i) => (
+        <div class="w-full flex items-center gap-x-2 text-13-regular">
+          <span class="truncate">{i.name}</span>
+          <Show when={i.provider.id === "opencode" && (!i.cost || i.cost?.input === 0)}>
+            <Tag>Free</Tag>
+          </Show>
+          <Show when={i.latest}>
+            <Tag>Latest</Tag>
+          </Show>
+        </div>
+      )}
+    </List>
+  )
+}
+
+export const ModelSelectorPopover: Component<{
+  provider?: string
+  children: JSX.Element
+}> = (props) => {
+  const [open, setOpen] = createSignal(false)
+
+  return (
+    <Kobalte open={open()} onOpenChange={setOpen} placement="top-start" gutter={8}>
+      <Kobalte.Trigger as="div">{props.children}</Kobalte.Trigger>
+      <Kobalte.Portal>
+        <Kobalte.Content class="w-72 h-80 flex flex-col rounded-md border border-border-base bg-surface-raised-stronger-non-alpha shadow-md z-50 outline-none">
+          <Kobalte.Title class="sr-only">Select model</Kobalte.Title>
+          <ModelList provider={props.provider} onSelect={() => setOpen(false)} class="p-1" />
+        </Kobalte.Content>
+      </Kobalte.Portal>
+    </Kobalte>
+  )
+}
+
+export const DialogSelectModel: Component<{ provider?: string }> = (props) => {
+  const dialog = useDialog()
+
   return (
     <Dialog
       title="Select model"
@@ -34,43 +102,7 @@ export const DialogSelectModel: Component<{ provider?: string }> = (props) => {
         </Button>
       }
     >
-      <List
-        search={{ placeholder: "Search models", autofocus: true }}
-        emptyMessage="No model results"
-        key={(x) => `${x.provider.id}:${x.id}`}
-        items={models}
-        current={local.model.current()}
-        filterKeys={["provider.name", "name", "id"]}
-        sortBy={(a, b) => a.name.localeCompare(b.name)}
-        groupBy={(x) => x.provider.name}
-        sortGroupsBy={(a, b) => {
-          if (a.category === "Recent" && b.category !== "Recent") return -1
-          if (b.category === "Recent" && a.category !== "Recent") return 1
-          const aProvider = a.items[0].provider.id
-          const bProvider = b.items[0].provider.id
-          if (popularProviders.includes(aProvider) && !popularProviders.includes(bProvider)) return -1
-          if (!popularProviders.includes(aProvider) && popularProviders.includes(bProvider)) return 1
-          return popularProviders.indexOf(aProvider) - popularProviders.indexOf(bProvider)
-        }}
-        onSelect={(x) => {
-          local.model.set(x ? { modelID: x.id, providerID: x.provider.id } : undefined, {
-            recent: true,
-          })
-          dialog.close()
-        }}
-      >
-        {(i) => (
-          <div class="w-full flex items-center gap-x-3">
-            <span>{i.name}</span>
-            <Show when={i.provider.id === "opencode" && (!i.cost || i.cost?.input === 0)}>
-              <Tag>Free</Tag>
-            </Show>
-            <Show when={i.latest}>
-              <Tag>Latest</Tag>
-            </Show>
-          </div>
-        )}
-      </List>
+      <ModelList provider={props.provider} onSelect={() => dialog.close()} />
       <Button
         variant="ghost"
         class="ml-3 mt-5 mb-6 text-text-base self-start"

packages/app/src/components/header.tsx

@@ -1,215 +0,0 @@
-import { useGlobalSync } from "@/context/global-sync"
-import { useGlobalSDK } from "@/context/global-sdk"
-import { useLayout } from "@/context/layout"
-import { Session } from "@opencode-ai/sdk/v2/client"
-import { Button } from "@opencode-ai/ui/button"
-import { Icon } from "@opencode-ai/ui/icon"
-import { Mark } from "@opencode-ai/ui/logo"
-import { Popover } from "@opencode-ai/ui/popover"
-import { Select } from "@opencode-ai/ui/select"
-import { TextField } from "@opencode-ai/ui/text-field"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { base64Decode } from "@opencode-ai/util/encode"
-import { useCommand } from "@/context/command"
-import { getFilename } from "@opencode-ai/util/path"
-import { A, useParams } from "@solidjs/router"
-import { createMemo, createResource, Show } from "solid-js"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { iife } from "@opencode-ai/util/iife"
-
-export function Header(props: {
-  navigateToProject: (directory: string) => void
-  navigateToSession: (session: Session | undefined) => void
-  onMobileMenuToggle?: () => void
-}) {
-  const globalSync = useGlobalSync()
-  const globalSDK = useGlobalSDK()
-  const layout = useLayout()
-  const params = useParams()
-  const command = useCommand()
-
-  return (
-    <header class="h-12 shrink-0 bg-background-base border-b border-border-weak-base flex" data-tauri-drag-region>
-      <button
-        type="button"
-        class="xl:hidden w-12 shrink-0 flex items-center justify-center border-r border-border-weak-base hover:bg-surface-raised-base-hover active:bg-surface-raised-base-active transition-colors"
-        onClick={props.onMobileMenuToggle}
-      >
-        <Icon name="menu" size="small" />
-      </button>
-      <A
-        href="/"
-        classList={{
-          "hidden xl:flex": true,
-          "w-12 shrink-0 px-4 py-3.5": true,
-          "items-center justify-start self-stretch": true,
-          "border-r border-border-weak-base": true,
-        }}
-        style={{ width: layout.sidebar.opened() ? `${layout.sidebar.width()}px` : undefined }}
-        data-tauri-drag-region
-      >
-        <Mark class="shrink-0" />
-      </A>
-      <div class="pl-4 px-6 flex items-center justify-between gap-4 w-full">
-        <Show when={layout.projects.list().length > 0 && params.dir}>
-          {(directory) => {
-            const currentDirectory = createMemo(() => base64Decode(directory()))
-            const store = createMemo(() => globalSync.child(currentDirectory())[0])
-            const sessions = createMemo(() => (store().session ?? []).filter((s) => !s.parentID))
-            const currentSession = createMemo(() => sessions().find((s) => s.id === params.id))
-            const shareEnabled = createMemo(() => store().config.share !== "disabled")
-            return (
-              <>
-                <div class="flex items-center gap-3 min-w-0">
-                  <div class="flex items-center gap-2 min-w-0">
-                    <div class="hidden xl:flex items-center gap-2">
-                      <Select
-                        options={layout.projects.list().map((project) => project.worktree)}
-                        current={currentDirectory()}
-                        label={(x) => getFilename(x)}
-                        onSelect={(x) => (x ? props.navigateToProject(x) : undefined)}
-                        class="text-14-regular text-text-base"
-                        variant="ghost"
-                      >
-                        {/* @ts-ignore */}
-                        {(i) => (
-                          <div class="flex items-center gap-2">
-                            <Icon name="folder" size="small" />
-                            <div class="text-text-strong">{getFilename(i)}</div>
-                          </div>
-                        )}
-                      </Select>
-                      <div class="text-text-weaker">/</div>
-                    </div>
-                    <Select
-                      options={sessions()}
-                      current={currentSession()}
-                      placeholder="New session"
-                      label={(x) => x.title}
-                      value={(x) => x.id}
-                      onSelect={props.navigateToSession}
-                      class="text-14-regular text-text-base max-w-[calc(100vw-180px)] md:max-w-md"
-                      variant="ghost"
-                    />
-                  </div>
-                  <Show when={currentSession()}>
-                    <Tooltip
-                      class="hidden xl:block"
-                      value={
-                        <div class="flex items-center gap-2">
-                          <span>New session</span>
-                          <span class="text-icon-base text-12-medium">{command.keybind("session.new")}</span>
-                        </div>
-                      }
-                    >
-                      <Button as={A} href={`/${params.dir}/session`} icon="plus-small">
-                        New session
-                      </Button>
-                    </Tooltip>
-                  </Show>
-                </div>
-                <div class="flex items-center gap-4">
-                  <Show when={currentSession()?.summary?.files}>
-                    <Tooltip
-                      class="hidden md:block shrink-0"
-                      value={
-                        <div class="flex items-center gap-2">
-                          <span>Toggle review</span>
-                          <span class="text-icon-base text-12-medium">{command.keybind("review.toggle")}</span>
-                        </div>
-                      }
-                    >
-                      <Button variant="ghost" class="group/review-toggle size-6 p-0" onClick={layout.review.toggle}>
-                        <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
-                          <Icon
-                            name={layout.review.opened() ? "layout-right" : "layout-left"}
-                            size="small"
-                            class="group-hover/review-toggle:hidden"
-                          />
-                          <Icon
-                            name={layout.review.opened() ? "layout-right-partial" : "layout-left-partial"}
-                            size="small"
-                            class="hidden group-hover/review-toggle:inline-block"
-                          />
-                          <Icon
-                            name={layout.review.opened() ? "layout-right-full" : "layout-left-full"}
-                            size="small"
-                            class="hidden group-active/review-toggle:inline-block"
-                          />
-                        </div>
-                      </Button>
-                    </Tooltip>
-                  </Show>
-                  <Tooltip
-                    class="hidden md:block shrink-0"
-                    value={
-                      <div class="flex items-center gap-2">
-                        <span>Toggle terminal</span>
-                        <span class="text-icon-base text-12-medium">{command.keybind("terminal.toggle")}</span>
-                      </div>
-                    }
-                  >
-                    <Button variant="ghost" class="group/terminal-toggle size-6 p-0" onClick={layout.terminal.toggle}>
-                      <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
-                        <Icon
-                          size="small"
-                          name={layout.terminal.opened() ? "layout-bottom-full" : "layout-bottom"}
-                          class="group-hover/terminal-toggle:hidden"
-                        />
-                        <Icon
-                          size="small"
-                          name="layout-bottom-partial"
-                          class="hidden group-hover/terminal-toggle:inline-block"
-                        />
-                        <Icon
-                          size="small"
-                          name={layout.terminal.opened() ? "layout-bottom" : "layout-bottom-full"}
-                          class="hidden group-active/terminal-toggle:inline-block"
-                        />
-                      </div>
-                    </Button>
-                  </Tooltip>
-                  <Show when={shareEnabled() && currentSession()}>
-                    <Popover
-                      title="Share session"
-                      trigger={
-                        <Tooltip class="shrink-0" value="Share session">
-                          <IconButton icon="share" variant="ghost" class="" />
-                        </Tooltip>
-                      }
-                    >
-                      {iife(() => {
-                        const [url] = createResource(
-                          () => currentSession(),
-                          async (session) => {
-                            if (!session) return
-                            let shareURL = session.share?.url
-                            if (!shareURL) {
-                              shareURL = await globalSDK.client.session
-                                .share({ sessionID: session.id, directory: currentDirectory() })
-                                .then((r) => r.data?.share?.url)
-                                .catch((e) => {
-                                  console.error("Failed to share session", e)
-                                  return undefined
-                                })
-                            }
-                            return shareURL
-                          },
-                        )
-                        return (
-                          <Show when={url()}>
-                            {(url) => <TextField value={url()} readOnly copyable class="w-72" />}
-                          </Show>
-                        )
-                      })}
-                    </Popover>
-                  </Show>
-                </div>
-              </>
-            )
-          }}
-        </Show>
-      </div>
-    </header>
-  )
-}

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

@@ -3,7 +3,15 @@ import { createEffect, on, Component, Show, For, onMount, onCleanup, Switch, Mat
 import { createStore, produce } from "solid-js/store"
 import { createFocusSignal } from "@solid-primitives/active-element"
 import { useLocal } from "@/context/local"
-import { ContentPart, DEFAULT_PROMPT, isPromptEqual, Prompt, usePrompt, ImageAttachmentPart } from "@/context/prompt"
+import {
+  ContentPart,
+  DEFAULT_PROMPT,
+  isPromptEqual,
+  Prompt,
+  usePrompt,
+  ImageAttachmentPart,
+  AgentPart,
+} from "@/context/prompt"
 import { useLayout } from "@/context/layout"
 import { useSDK } from "@/context/sdk"
 import { useNavigate, useParams } from "@solidjs/router"
@@ -11,18 +19,19 @@ import { useSync } from "@/context/sync"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Select } from "@opencode-ai/ui/select"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { DialogSelectModel } from "@/components/dialog-select-model"
+import { ModelSelectorPopover } from "@/components/dialog-select-model"
 import { DialogSelectModelUnpaid } from "@/components/dialog-select-model-unpaid"
 import { useProviders } from "@/hooks/use-providers"
 import { useCommand } from "@/context/command"
 import { persisted } from "@/utils/persist"
 import { Identifier } from "@/utils/id"
 import { SessionContextUsage } from "@/components/session-context-usage"
+import { usePermission } from "@/context/permission"
 
 const ACCEPTED_IMAGE_TYPES = ["image/png", "image/jpeg", "image/gif", "image/webp"]
 const ACCEPTED_FILE_TYPES = [...ACCEPTED_IMAGE_TYPES, "application/pdf"]
@@ -80,6 +89,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   const dialog = useDialog()
   const providers = useProviders()
   const command = useCommand()
+  const permission = usePermission()
   let editorRef!: HTMLDivElement
   let fileInputRef!: HTMLInputElement
   let scrollRef!: HTMLDivElement
@@ -126,7 +136,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
   const working = createMemo(() => status()?.type !== "idle")
 
   const [store, setStore] = createStore<{
-    popover: "file" | "slash" | null
+    popover: "at" | "slash" | null
     historyIndex: number
     savedPrompt: Prompt | null
     placeholder: number
@@ -169,6 +179,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     prompt.map((part) => {
       if (part.type === "text") return { ...part }
       if (part.type === "image") return { ...part }
+      if (part.type === "agent") return { ...part }
       return {
         ...part,
         selection: part.selection ? { ...part.selection } : undefined,
@@ -319,15 +330,43 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     if (!isFocused()) setStore("popover", null)
   })
 
-  const handleFileSelect = (path: string | undefined) => {
-    if (!path) return
-    addPart({ type: "file", path, content: "@" + path, start: 0, end: 0 })
+  type AtOption = { type: "agent"; name: string; display: string } | { type: "file"; path: string; display: string }
+
+  const agentList = createMemo(() =>
+    sync.data.agent
+      .filter((agent) => !agent.hidden && agent.mode !== "primary")
+      .map((agent): AtOption => ({ type: "agent", name: agent.name, display: agent.name })),
+  )
+
+  const handleAtSelect = (option: AtOption | undefined) => {
+    if (!option) return
+    if (option.type === "agent") {
+      addPart({ type: "agent", name: option.name, content: "@" + option.name, start: 0, end: 0 })
+    } else {
+      addPart({ type: "file", path: option.path, content: "@" + option.path, start: 0, end: 0 })
+    }
   }
 
-  const { flat, active, onInput, onKeyDown } = useFilteredList<string>({
-    items: local.file.searchFilesAndDirectories,
-    key: (x) => x,
-    onSelect: handleFileSelect,
+  const atKey = (x: AtOption | undefined) => {
+    if (!x) return ""
+    return x.type === "agent" ? `agent:${x.name}` : `file:${x.path}`
+  }
+
+  const {
+    flat: atFlat,
+    active: atActive,
+    onInput: atOnInput,
+    onKeyDown: atOnKeyDown,
+  } = useFilteredList<AtOption>({
+    items: async (query) => {
+      const agents = agentList()
+      const files = await local.file.searchFilesAndDirectories(query)
+      const fileOptions: AtOption[] = files.map((path) => ({ type: "file", path, display: path }))
+      return [...agents, ...fileOptions]
+    },
+    key: atKey,
+    filterKeys: ["display"],
+    onSelect: handleAtSelect,
   })
 
   const slashCommands = createMemo<SlashCommand[]>(() => {
@@ -413,6 +452,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           if (node.nodeType !== Node.ELEMENT_NODE) return false
           const el = node as HTMLElement
           if (el.dataset.type === "file") return true
+          if (el.dataset.type === "agent") return true
           return el.tagName === "BR"
         })
         if (normalized && isPromptEqual(currentParts, domParts)) return
@@ -436,6 +476,15 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             pill.style.userSelect = "text"
             pill.style.cursor = "default"
             editorRef.appendChild(pill)
+          } else if (part.type === "agent") {
+            const pill = document.createElement("span")
+            pill.textContent = part.content
+            pill.setAttribute("data-type", "agent")
+            pill.setAttribute("data-name", part.name)
+            pill.setAttribute("contenteditable", "false")
+            pill.style.userSelect = "text"
+            pill.style.cursor = "default"
+            editorRef.appendChild(pill)
           }
         })
 
@@ -471,6 +520,18 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       position += content.length
     }
 
+    const pushAgent = (agent: HTMLElement) => {
+      const content = agent.textContent ?? ""
+      parts.push({
+        type: "agent",
+        name: agent.dataset.name!,
+        content,
+        start: position,
+        end: position + content.length,
+      })
+      position += content.length
+    }
+
     const visit = (node: Node) => {
       if (node.nodeType === Node.TEXT_NODE) {
         buffer += node.textContent ?? ""
@@ -484,6 +545,11 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
         pushFile(el)
         return
       }
+      if (el.dataset.type === "agent") {
+        flushText()
+        pushAgent(el)
+        return
+      }
       if (el.tagName === "BR") {
         buffer += "\n"
         return
@@ -537,8 +603,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       const slashMatch = rawText.match(/^\/(\S*)$/)
 
       if (atMatch) {
-        onInput(atMatch[1])
-        setStore("popover", "file")
+        atOnInput(atMatch[1])
+        setStore("popover", "at")
       } else if (slashMatch) {
         slashOnInput(slashMatch[1])
         setStore("popover", "slash")
@@ -558,6 +624,36 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     queueScroll()
   }
 
+  const setRangeEdge = (range: Range, edge: "start" | "end", offset: number) => {
+    let remaining = offset
+    const nodes = Array.from(editorRef.childNodes)
+
+    for (const node of nodes) {
+      const length = getNodeLength(node)
+      const isText = node.nodeType === Node.TEXT_NODE
+      const isPill =
+        node.nodeType === Node.ELEMENT_NODE &&
+        ((node as HTMLElement).dataset.type === "file" || (node as HTMLElement).dataset.type === "agent")
+      const isBreak = node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === "BR"
+
+      if (isText && remaining <= length) {
+        if (edge === "start") range.setStart(node, remaining)
+        if (edge === "end") range.setEnd(node, remaining)
+        return
+      }
+
+      if ((isPill || isBreak) && remaining <= length) {
+        if (edge === "start" && remaining === 0) range.setStartBefore(node)
+        if (edge === "start" && remaining > 0) range.setStartAfter(node)
+        if (edge === "end" && remaining === 0) range.setEndBefore(node)
+        if (edge === "end" && remaining > 0) range.setEndAfter(node)
+        return
+      }
+
+      remaining -= length
+    }
+  }
+
   const addPart = (part: ContentPart) => {
     const selection = window.getSelection()
     if (!selection || selection.rangeCount === 0) return
@@ -580,38 +676,35 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       const gap = document.createTextNode(" ")
       const range = selection.getRangeAt(0)
 
-      const setEdge = (edge: "start" | "end", offset: number) => {
-        let remaining = offset
-        const nodes = Array.from(editorRef.childNodes)
-
-        for (const node of nodes) {
-          const length = getNodeLength(node)
-          const isText = node.nodeType === Node.TEXT_NODE
-          const isFile = node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).dataset.type === "file"
-          const isBreak = node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === "BR"
-
-          if (isText && remaining <= length) {
-            if (edge === "start") range.setStart(node, remaining)
-            if (edge === "end") range.setEnd(node, remaining)
-            return
-          }
-
-          if ((isFile || isBreak) && remaining <= length) {
-            if (edge === "start" && remaining === 0) range.setStartBefore(node)
-            if (edge === "start" && remaining > 0) range.setStartAfter(node)
-            if (edge === "end" && remaining === 0) range.setEndBefore(node)
-            if (edge === "end" && remaining > 0) range.setEndAfter(node)
-            return
-          }
-
-          remaining -= length
-        }
+      if (atMatch) {
+        const start = atMatch.index ?? cursorPosition - atMatch[0].length
+        setRangeEdge(range, "start", start)
+        setRangeEdge(range, "end", cursorPosition)
       }
 
+      range.deleteContents()
+      range.insertNode(gap)
+      range.insertNode(pill)
+      range.setStartAfter(gap)
+      range.collapse(true)
+      selection.removeAllRanges()
+      selection.addRange(range)
+    } else if (part.type === "agent") {
+      const pill = document.createElement("span")
+      pill.textContent = part.content
+      pill.setAttribute("data-type", "agent")
+      pill.setAttribute("data-name", part.name)
+      pill.setAttribute("contenteditable", "false")
+      pill.style.userSelect = "text"
+      pill.style.cursor = "default"
+
+      const gap = document.createTextNode(" ")
+      const range = selection.getRangeAt(0)
+
       if (atMatch) {
         const start = atMatch.index ?? cursorPosition - atMatch[0].length
-        setEdge("start", start)
-        setEdge("end", cursorPosition)
+        setRangeEdge(range, "start", start)
+        setRangeEdge(range, "end", cursorPosition)
       }
 
       range.deleteContents()
@@ -832,8 +925,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     }
 
     if (store.popover && (event.key === "ArrowUp" || event.key === "ArrowDown" || event.key === "Enter")) {
-      if (store.popover === "file") {
-        onKeyDown(event)
+      if (store.popover === "at") {
+        atOnKeyDown(event)
       } else {
         slashOnKeyDown(event)
       }
@@ -1073,11 +1166,12 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
     if (!existing) return
 
     const toAbsolutePath = (path: string) => (path.startsWith("/") ? path : sync.absolute(path))
-    const attachments = currentPrompt.filter(
+    const fileAttachments = currentPrompt.filter(
       (part) => part.type === "file",
     ) as import("@/context/prompt").FileAttachmentPart[]
+    const agentAttachments = currentPrompt.filter((part) => part.type === "agent") as AgentPart[]
 
-    const fileAttachmentParts = attachments.map((attachment) => {
+    const fileAttachmentParts = fileAttachments.map((attachment) => {
       const absolute = toAbsolutePath(attachment.path)
       const query = attachment.selection
         ? `?start=${attachment.selection.startLine}&end=${attachment.selection.endLine}`
@@ -1100,6 +1194,17 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       }
     })
 
+    const agentAttachmentParts = agentAttachments.map((attachment) => ({
+      id: Identifier.ascending("part"),
+      type: "agent" as const,
+      name: attachment.name,
+      source: {
+        value: attachment.content,
+        start: attachment.start,
+        end: attachment.end,
+      },
+    }))
+
     const imageAttachmentParts = store.imageAttachments.map((attachment) => ({
       id: Identifier.ascending("part"),
       type: "file" as const,
@@ -1169,7 +1274,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       type: "text" as const,
       text,
     }
-    const requestParts = [textPart, ...fileAttachmentParts, ...imageAttachmentParts]
+    const requestParts = [textPart, ...fileAttachmentParts, ...agentAttachmentParts, ...imageAttachmentParts]
     const optimisticParts = requestParts.map((part) => ({
       ...part,
       sessionID: existing.id,
@@ -1207,24 +1312,46 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                  border border-border-base bg-surface-raised-stronger-non-alpha shadow-md"
         >
           <Switch>
-            <Match when={store.popover === "file"}>
-              <Show when={flat().length > 0} fallback={<div class="text-text-weak px-2 py-1">No matching files</div>}>
-                <For each={flat()}>
-                  {(i) => (
+            <Match when={store.popover === "at"}>
+              <Show
+                when={atFlat().length > 0}
+                fallback={<div class="text-text-weak px-2 py-1">No matching results</div>}
+              >
+                <For each={atFlat().slice(0, 10)}>
+                  {(item) => (
                     <button
                       classList={{
                         "w-full flex items-center gap-x-2 rounded-md px-2 py-0.5": true,
-                        "bg-surface-raised-base-hover": active() === i,
+                        "bg-surface-raised-base-hover": atActive() === atKey(item),
                       }}
-                      onClick={() => handleFileSelect(i)}
+                      onClick={() => handleAtSelect(item)}
                     >
-                      <FileIcon node={{ path: i, type: "file" }} class="shrink-0 size-4" />
-                      <div class="flex items-center text-14-regular min-w-0">
-                        <span class="text-text-weak whitespace-nowrap truncate min-w-0">{getDirectory(i)}</span>
-                        <Show when={!i.endsWith("/")}>
-                          <span class="text-text-strong whitespace-nowrap">{getFilename(i)}</span>
-                        </Show>
-                      </div>
+                      <Show
+                        when={item.type === "agent"}
+                        fallback={
+                          <>
+                            <FileIcon
+                              node={{ path: (item as { type: "file"; path: string }).path, type: "file" }}
+                              class="shrink-0 size-4"
+                            />
+                            <div class="flex items-center text-14-regular min-w-0">
+                              <span class="text-text-weak whitespace-nowrap truncate min-w-0">
+                                {getDirectory((item as { type: "file"; path: string }).path)}
+                              </span>
+                              <Show when={!(item as { type: "file"; path: string }).path.endsWith("/")}>
+                                <span class="text-text-strong whitespace-nowrap">
+                                  {getFilename((item as { type: "file"; path: string }).path)}
+                                </span>
+                              </Show>
+                            </div>
+                          </>
+                        }
+                      >
+                        <Icon name="brain" size="small" class="text-icon-info-active shrink-0" />
+                        <span class="text-14-regular text-text-strong whitespace-nowrap">
+                          @{(item as { type: "agent"; name: string }).name}
+                        </span>
+                      </Show>
                     </button>
                   )}
                 </For>
@@ -1271,6 +1398,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
       <form
         onSubmit={handleSubmit}
         classList={{
+          "group/prompt-input": true,
           "bg-surface-raised-stronger-non-alpha shadow-xs-border relative": true,
           "rounded-md overflow-clip focus-within:shadow-xs-border": true,
           "border-icon-info-active border-dashed": store.dragging,
@@ -1332,7 +1460,8 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
             classList={{
               "select-text": true,
               "w-full px-5 py-3 pr-12 text-14-regular text-text-strong focus:outline-none whitespace-pre-wrap": true,
-              "[&_[data-type=file]]:text-icon-info-active": true,
+              "[&_[data-type=file]]:text-syntax-property": true,
+              "[&_[data-type=agent]]:text-syntax-type": true,
               "font-mono!": store.mode === "shell",
             }}
           />
@@ -1343,12 +1472,9 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 : `Ask anything... "${PLACEHOLDERS[store.placeholder]}"`}
             </div>
           </Show>
-          <div class="absolute top-4.5 right-4">
-            <SessionContextUsage />
-          </div>
         </div>
         <div class="relative p-3 flex items-center justify-between">
-          <div class="flex items-center justify-start gap-1">
+          <div class="flex items-center justify-start gap-0.5">
             <Switch>
               <Match when={store.mode === "shell"}>
                 <div class="flex items-center gap-2 px-2 h-6">
@@ -1358,15 +1484,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 </div>
               </Match>
               <Match when={store.mode === "normal"}>
-                <Tooltip
-                  placement="top"
-                  value={
-                    <div class="flex items-center gap-2">
-                      <span>Cycle agent</span>
-                      <span class="text-icon-base text-12-medium">{command.keybind("agent.cycle")}</span>
-                    </div>
-                  }
-                >
+                <TooltipKeybind placement="top" title="Cycle agent" keybind={command.keybind("agent.cycle")}>
                   <Select
                     options={local.agent.list().map((agent) => agent.name)}
                     current={local.agent.current()?.name ?? ""}
@@ -1374,54 +1492,69 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     class="capitalize"
                     variant="ghost"
                   />
-                </Tooltip>
-                <Tooltip
-                  placement="top"
-                  value={
-                    <div class="flex flex-col gap-1">
-                      <div class="flex items-center gap-2">
-                        <span>Choose model</span>
-                        <span class="text-icon-base text-12-medium">{command.keybind("model.choose")}</span>
-                      </div>
-                      <Show when={local.model.current()?.provider.name}>
-                        <span class="text-text-weak">{local.model.current()?.provider.name}</span>
-                      </Show>
-                    </div>
+                </TooltipKeybind>
+                <Show
+                  when={providers.paid().length > 0}
+                  fallback={
+                    <TooltipKeybind placement="top" title="Choose model" keybind={command.keybind("model.choose")}>
+                      <Button as="div" variant="ghost" onClick={() => dialog.show(() => <DialogSelectModelUnpaid />)}>
+                        {local.model.current()?.name ?? "Select model"}
+                        <Icon name="chevron-down" size="small" />
+                      </Button>
+                    </TooltipKeybind>
                   }
                 >
-                  <Button
-                    as="div"
-                    variant="ghost"
-                    onClick={() =>
-                      dialog.show(() =>
-                        providers.paid().length > 0 ? <DialogSelectModel /> : <DialogSelectModelUnpaid />,
-                      )
-                    }
-                  >
-                    {local.model.current()?.name ?? "Select model"}
-                    <Icon name="chevron-down" size="small" />
-                  </Button>
-                </Tooltip>
+                  <ModelSelectorPopover>
+                    <TooltipKeybind placement="top" title="Choose model" keybind={command.keybind("model.choose")}>
+                      <Button as="div" variant="ghost">
+                        {local.model.current()?.name ?? "Select model"}
+                        <Icon name="chevron-down" size="small" />
+                      </Button>
+                    </TooltipKeybind>
+                  </ModelSelectorPopover>
+                </Show>
                 <Show when={local.model.variant.list().length > 0}>
-                  <Tooltip placement="top" value="Cycle effort level">
+                  <TooltipKeybind
+                    placement="top"
+                    title="Thinking effort"
+                    keybind={command.keybind("model.variant.cycle")}
+                  >
                     <Button
                       variant="ghost"
+                      class="text-text-base _hidden group-hover/prompt-input:inline-block"
                       onClick={() => local.model.variant.cycle()}
+                    >
+                      <span class="capitalize text-12-regular">{local.model.variant.current() ?? "Default"}</span>
+                    </Button>
+                  </TooltipKeybind>
+                </Show>
+                <Show when={permission.permissionsEnabled() && params.id}>
+                  <TooltipKeybind
+                    placement="top"
+                    title="Auto-accept edits"
+                    keybind={command.keybind("permissions.autoaccept")}
+                  >
+                    <Button
+                      variant="ghost"
+                      onClick={() => permission.toggleAutoAccept(params.id!, sdk.directory)}
                       classList={{
-                        "text-icon-warning": !!local.model.variant.current(),
+                        "_hidden group-hover/prompt-input:flex size-6 items-center justify-center": true,
+                        "text-text-base": !permission.isAutoAccepting(params.id!),
+                        "hover:bg-surface-success-base": permission.isAutoAccepting(params.id!),
                       }}
                     >
-                      <Icon name="brain" size="small" />
-                      <Show when={local.model.variant.current()}>
-                        <span class="text-12-regular">{local.model.variant.current()}</span>
-                      </Show>
+                      <Icon
+                        name="chevron-double-right"
+                        size="small"
+                        classList={{ "text-icon-success-base": permission.isAutoAccepting(params.id!) }}
+                      />
                     </Button>
-                  </Tooltip>
+                  </TooltipKeybind>
                 </Show>
               </Match>
             </Switch>
           </div>
-          <div class="flex items-center gap-1 absolute right-2 bottom-2">
+          <div class="flex items-center gap-3 absolute right-2 bottom-2">
             <input
               ref={fileInputRef}
               type="file"
@@ -1433,17 +1566,16 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 e.currentTarget.value = ""
               }}
             />
-            <Show when={store.mode === "normal"}>
-              <Tooltip placement="top" value="Attach image">
-                <IconButton
-                  type="button"
-                  icon="photo"
-                  variant="ghost"
-                  class="h-10 w-8"
-                  onClick={() => fileInputRef.click()}
-                />
-              </Tooltip>
-            </Show>
+            <div class="flex items-center gap-2">
+              <SessionContextUsage />
+              <Show when={store.mode === "normal"}>
+                <Tooltip placement="top" value="Attach image">
+                  <Button type="button" variant="ghost" class="size-6" onClick={() => fileInputRef.click()}>
+                    <Icon name="photo" class="size-4.5" />
+                  </Button>
+                </Tooltip>
+              </Show>
+            </div>
             <Tooltip
               placement="top"
               inactive={!prompt.dirty() && !working()}
@@ -1469,7 +1601,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                 disabled={!prompt.dirty() && store.imageAttachments.length === 0 && !working()}
                 icon={working() ? "stop" : "arrow-up"}
                 variant="primary"
-                class="h-10 w-8"
+                class="h-6 w-4.5"
               />
             </Tooltip>
           </div>
@@ -1527,7 +1659,9 @@ function setCursorPosition(parent: HTMLElement, position: number) {
   while (node) {
     const length = getNodeLength(node)
     const isText = node.nodeType === Node.TEXT_NODE
-    const isFile = node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).dataset.type === "file"
+    const isPill =
+      node.nodeType === Node.ELEMENT_NODE &&
+      ((node as HTMLElement).dataset.type === "file" || (node as HTMLElement).dataset.type === "agent")
     const isBreak = node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).tagName === "BR"
 
     if (isText && remaining <= length) {
@@ -1540,13 +1674,13 @@ function setCursorPosition(parent: HTMLElement, position: number) {
       return
     }
 
-    if ((isFile || isBreak) && remaining <= length) {
+    if ((isPill || isBreak) && remaining <= length) {
       const range = document.createRange()
       const selection = window.getSelection()
       if (remaining === 0) {
         range.setStartBefore(node)
       }
-      if (remaining > 0 && isFile) {
+      if (remaining > 0 && isPill) {
         range.setStartAfter(node)
       }
       if (remaining > 0 && isBreak) {

packages/app/src/components/session-context-usage.tsx

@@ -35,20 +35,25 @@ export function SessionContextUsage() {
       {(ctx) => (
         <Tooltip
           value={
-            <div class="grid grid-cols-2 gap-x-3 gap-y-1">
-              <span class="opacity-70 text-right">Tokens</span>
-              <span class="text-left">{ctx().tokens}</span>
-              <span class="opacity-70 text-right">Usage</span>
-              <span class="text-left">{ctx().percentage ?? 0}%</span>
-              <span class="opacity-70 text-right">Cost</span>
-              <span class="text-left">{cost()}</span>
+            <div class="">
+              <div class="flex items-center gap-2">
+                <span class="text-text-invert-strong">{ctx().tokens}</span>
+                <span class="text-text-invert-base">Tokens</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="text-text-invert-strong">{ctx().percentage ?? 0}%</span>
+                <span class="text-text-invert-base">Usage</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span class="text-text-invert-strong">{cost()}</span>
+                <span class="text-text-invert-base">Cost</span>
+              </div>
             </div>
           }
           placement="top"
         >
-          <div class="flex items-center gap-1.5">
+          <div class="p-1">
             <ProgressCircle size={16} strokeWidth={2} percentage={ctx().percentage ?? 0} />
-            {/* <span class="text-12-medium text-text-weak">{`${ctx().percentage ?? 0}%`}</span> */}
           </div>
         </Tooltip>
       )}

packages/app/src/components/status-bar.tsx

@@ -1,53 +0,0 @@
-import { createMemo, Show, type ParentProps } from "solid-js"
-import { useSync } from "@/context/sync"
-import { useGlobalSync } from "@/context/global-sync"
-import { useServer } from "@/context/server"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Button } from "@opencode-ai/ui/button"
-import { DialogSelectServer } from "@/components/dialog-select-server"
-
-export function StatusBar(props: ParentProps) {
-  const dialog = useDialog()
-  const server = useServer()
-  const sync = useSync()
-  const globalSync = useGlobalSync()
-
-  const directoryDisplay = createMemo(() => {
-    const directory = sync.data.path.directory || ""
-    const home = globalSync.data.path.home || ""
-    const short = home && directory.startsWith(home) ? directory.replace(home, "~") : directory
-    const branch = sync.data.vcs?.branch
-    return branch ? `${short}:${branch}` : short
-  })
-
-  return (
-    <div class="h-8 w-full shrink-0 flex items-center justify-between px-2 border-t border-border-weak-base bg-background-base">
-      <div class="flex items-center gap-3">
-        <div class="flex items-center gap-1">
-          <Button
-            size="small"
-            variant="ghost"
-            onClick={() => {
-              dialog.show(() => <DialogSelectServer />)
-            }}
-          >
-            <div
-              classList={{
-                "size-1.5 rounded-full": true,
-                "bg-icon-success-base": server.healthy() === true,
-                "bg-icon-critical-base": server.healthy() === false,
-                "bg-border-weak-base": server.healthy() === undefined,
-              }}
-            />
-
-            <span class="text-12-regular text-text-weak">{server.name}</span>
-          </Button>
-        </div>
-        <Show when={directoryDisplay()}>
-          <span class="text-12-regular text-text-weak">{directoryDisplay()}</span>
-        </Show>
-      </div>
-      <div class="flex items-center">{props.children}</div>
-    </div>
-  )
-}

packages/app/src/context/global-sync.tsx

@@ -115,13 +115,14 @@ function createGlobalSync() {
       .then((x) => {
         const fourHoursAgo = Date.now() - 4 * 60 * 60 * 1000
         const nonArchived = (x.data ?? [])
+          .filter((s) => !!s?.id)
+          .filter((s) => !s.time?.archived)
           .slice()
-          .filter((s) => !s.time.archived)
           .sort((a, b) => a.id.localeCompare(b.id))
         // Include up to the limit, plus any updated in the last 4 hours
         const sessions = nonArchived.filter((s, i) => {
           if (i < store.limit) return true
-          const updated = new Date(s.time.updated).getTime()
+          const updated = new Date(s.time?.updated ?? s.time?.created).getTime()
           return updated > fourHoursAgo
         })
         setStore("session", reconcile(sessions, { key: "id" }))
@@ -169,6 +170,7 @@ function createGlobalSync() {
         sdk.permission.list().then((x) => {
           const grouped: Record<string, Permission[]> = {}
           for (const perm of x.data ?? []) {
+            if (!perm?.id || !perm.sessionID) continue
             const existing = grouped[perm.sessionID]
             if (existing) {
               existing.push(perm)
@@ -187,7 +189,10 @@ function createGlobalSync() {
                 "permission",
                 sessionID,
                 reconcile(
-                  permissions.slice().sort((a, b) => a.id.localeCompare(b.id)),
+                  permissions
+                    .filter((p) => !!p?.id)
+                    .slice()
+                    .sort((a, b) => a.id.localeCompare(b.id)),
                   { key: "id" },
                 ),
               )
@@ -414,10 +419,12 @@ function createGlobalSync() {
       ),
       retry(() =>
         globalSDK.client.project.list().then(async (x) => {
-          setGlobalStore(
-            "project",
-            x.data!.filter((p) => !p.worktree.includes("opencode-test")).sort((a, b) => a.id.localeCompare(b.id)),
-          )
+          const projects = (x.data ?? [])
+            .filter((p) => !!p?.id)
+            .filter((p) => !!p.worktree && !p.worktree.includes("opencode-test"))
+            .slice()
+            .sort((a, b) => a.id.localeCompare(b.id))
+          setGlobalStore("project", projects)
         }),
       ),
       retry(() =>

packages/app/src/context/layout.tsx

@@ -30,6 +30,8 @@ type SessionTabs = {
 
 export type LocalProject = Partial<Project> & { worktree: string; expanded: boolean }
 
+export type ReviewDiffStyle = "unified" | "split"
+
 export const { use: useLayout, provider: LayoutProvider } = createSimpleContext({
   name: "Layout",
   init: () => {
@@ -49,6 +51,7 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
         },
         review: {
           opened: true,
+          diffStyle: "split" as ReviewDiffStyle,
         },
         session: {
           width: 600,
@@ -156,6 +159,14 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
       },
       review: {
         opened: createMemo(() => store.review?.opened ?? true),
+        diffStyle: createMemo(() => store.review?.diffStyle ?? "split"),
+        setDiffStyle(diffStyle: ReviewDiffStyle) {
+          if (!store.review) {
+            setStore("review", { opened: true, diffStyle })
+            return
+          }
+          setStore("review", "diffStyle", diffStyle)
+        },
         open() {
           setStore("review", "opened", true)
         },

packages/app/src/context/permission.tsx

@@ -1,17 +1,17 @@
-import { createEffect, createRoot, onCleanup } from "solid-js"
+import { createMemo, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
 import { createSimpleContext } from "@opencode-ai/ui/context"
 import type { Permission } from "@opencode-ai/sdk/v2/client"
 import { persisted } from "@/utils/persist"
-
-type PermissionsBySession = {
-  [sessionID: string]: Permission[]
-}
+import { useGlobalSDK } from "@/context/global-sdk"
+import { useGlobalSync } from "./global-sync"
+import { useParams } from "@solidjs/router"
 
 type PermissionRespondFn = (input: {
   sessionID: string
   permissionID: string
   response: "once" | "always" | "reject"
+  directory?: string
 }) => void
 
 const AUTO_ACCEPT_TYPES = new Set(["edit", "write"])
@@ -22,109 +22,102 @@ function shouldAutoAccept(perm: Permission) {
 
 export const { use: usePermission, provider: PermissionProvider } = createSimpleContext({
   name: "Permission",
-  init: (props: { permissions: PermissionsBySession; onRespond: PermissionRespondFn }) => {
+  init: () => {
+    const params = useParams()
+    const globalSDK = useGlobalSDK()
+    const globalSync = useGlobalSync()
+
+    const permissionsEnabled = createMemo(() => {
+      if (!params.dir) return false
+      const [store] = globalSync.child(params.dir)
+      return store.config.permission !== undefined
+    })
+
     const [store, setStore, _, ready] = persisted(
-      "permission.v1",
+      "permission.v3",
       createStore({
         autoAcceptEdits: {} as Record<string, boolean>,
       }),
     )
 
     const responded = new Set<string>()
-    const watches = new Map<string, () => void>()
 
-    function respond(perm: Permission) {
-      if (responded.has(perm.id)) return
-      responded.add(perm.id)
-      props.onRespond({
-        sessionID: perm.sessionID,
-        permissionID: perm.id,
-        response: "once",
+    const respond: PermissionRespondFn = (input) => {
+      globalSDK.client.permission.respond(input).catch(() => {
+        responded.delete(input.permissionID)
       })
     }
 
-    function watch(sessionID: string) {
-      if (watches.has(sessionID)) return
+    function respondOnce(permission: Permission, directory?: string) {
+      if (responded.has(permission.id)) return
+      responded.add(permission.id)
+      respond({
+        sessionID: permission.sessionID,
+        permissionID: permission.id,
+        response: "once",
+        directory,
+      })
+    }
 
-      const dispose = createRoot((dispose) => {
-        createEffect(() => {
-          if (!store.autoAcceptEdits[sessionID]) return
+    function isAutoAccepting(sessionID: string) {
+      return store.autoAcceptEdits[sessionID] ?? false
+    }
 
-          const permissions = props.permissions[sessionID] ?? []
-          permissions.length
+    const unsubscribe = globalSDK.event.listen((e) => {
+      const event = e.details
+      if (event?.type !== "permission.updated") return
 
-          for (const perm of permissions) {
+      const perm = event.properties
+      if (!isAutoAccepting(perm.sessionID)) return
+      if (!shouldAutoAccept(perm)) return
+
+      respondOnce(perm, e.name)
+    })
+    onCleanup(unsubscribe)
+
+    function enable(sessionID: string, directory: string) {
+      setStore("autoAcceptEdits", sessionID, true)
+
+      globalSDK.client.permission
+        .list({ directory })
+        .then((x) => {
+          for (const perm of x.data ?? []) {
+            if (!perm?.id) continue
+            if (perm.sessionID !== sessionID) continue
             if (!shouldAutoAccept(perm)) continue
-            respond(perm)
+            respondOnce(perm, directory)
           }
         })
-
-        return dispose
-      })
-
-      watches.set(sessionID, dispose)
-    }
-
-    function unwatch(sessionID: string) {
-      const dispose = watches.get(sessionID)
-      if (!dispose) return
-      dispose()
-      watches.delete(sessionID)
-    }
-
-    createEffect(() => {
-      if (!ready()) return
-
-      for (const sessionID in store.autoAcceptEdits) {
-        if (!store.autoAcceptEdits[sessionID]) continue
-        watch(sessionID)
-      }
-    })
-
-    onCleanup(() => {
-      for (const dispose of watches.values()) dispose()
-      watches.clear()
-    })
-
-    function enable(sessionID: string) {
-      setStore("autoAcceptEdits", sessionID, true)
-      watch(sessionID)
-
-      const permissions = props.permissions[sessionID] ?? []
-      for (const perm of permissions) {
-        if (!shouldAutoAccept(perm)) continue
-        respond(perm)
-      }
+        .catch(() => undefined)
     }
 
     function disable(sessionID: string) {
       setStore("autoAcceptEdits", sessionID, false)
-      unwatch(sessionID)
     }
 
     return {
-      get permissions() {
-        return props.permissions
+      ready,
+      respond,
+      autoResponds(permission: Permission) {
+        return isAutoAccepting(permission.sessionID) && shouldAutoAccept(permission)
       },
-      respond: props.onRespond,
-      isAutoAccepting(sessionID: string) {
-        return store.autoAcceptEdits[sessionID] ?? false
-      },
-      toggleAutoAccept(sessionID: string) {
-        if (store.autoAcceptEdits[sessionID]) {
+      isAutoAccepting,
+      toggleAutoAccept(sessionID: string, directory: string) {
+        if (isAutoAccepting(sessionID)) {
           disable(sessionID)
           return
         }
 
-        enable(sessionID)
+        enable(sessionID, directory)
       },
-      enableAutoAccept(sessionID: string) {
-        if (store.autoAcceptEdits[sessionID]) return
-        enable(sessionID)
+      enableAutoAccept(sessionID: string, directory: string) {
+        if (isAutoAccepting(sessionID)) return
+        enable(sessionID, directory)
       },
       disableAutoAccept(sessionID: string) {
         disable(sessionID)
       },
+      permissionsEnabled,
     }
   },
 })

packages/app/src/context/prompt.tsx

@@ -21,6 +21,11 @@ export interface FileAttachmentPart extends PartBase {
   selection?: TextSelection
 }
 
+export interface AgentPart extends PartBase {
+  type: "agent"
+  name: string
+}
+
 export interface ImageAttachmentPart {
   type: "image"
   id: string
@@ -29,7 +34,7 @@ export interface ImageAttachmentPart {
   dataUrl: string
 }
 
-export type ContentPart = TextPart | FileAttachmentPart | ImageAttachmentPart
+export type ContentPart = TextPart | FileAttachmentPart | AgentPart | ImageAttachmentPart
 export type Prompt = ContentPart[]
 
 export const DEFAULT_PROMPT: Prompt = [{ type: "text", content: "", start: 0, end: 0 }]
@@ -46,6 +51,9 @@ export function isPromptEqual(promptA: Prompt, promptB: Prompt): boolean {
     if (partA.type === "file" && partA.path !== (partB as FileAttachmentPart).path) {
       return false
     }
+    if (partA.type === "agent" && partA.name !== (partB as AgentPart).name) {
+      return false
+    }
     if (partA.type === "image" && partA.id !== (partB as ImageAttachmentPart).id) {
       return false
     }
@@ -61,6 +69,7 @@ function cloneSelection(selection?: TextSelection) {
 function clonePart(part: ContentPart): ContentPart {
   if (part.type === "text") return { ...part }
   if (part.type === "image") return { ...part }
+  if (part.type === "agent") return { ...part }
   return {
     ...part,
     selection: cloneSelection(part.selection),

packages/app/src/context/sync.tsx

@@ -56,14 +56,17 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
                 const result = Binary.search(messages, input.messageID, (m) => m.id)
                 messages.splice(result.index, 0, message)
               }
-              draft.part[input.messageID] = input.parts.slice().sort((a, b) => a.id.localeCompare(b.id))
+              draft.part[input.messageID] = input.parts
+                .filter((p) => !!p?.id)
+                .slice()
+                .sort((a, b) => a.id.localeCompare(b.id))
             }),
           )
         },
         async sync(sessionID: string, _isRetry = false) {
           const [session, messages, todo, diff] = await Promise.all([
             retry(() => sdk.client.session.get({ sessionID })),
-            retry(() => sdk.client.session.messages({ sessionID, limit: 100 })),
+            retry(() => sdk.client.session.messages({ sessionID, limit: 1000 })),
             retry(() => sdk.client.session.todo({ sessionID })),
             retry(() => sdk.client.session.diff({ sessionID })),
           ])
@@ -88,6 +91,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
               reconcile(
                 (messages.data ?? [])
                   .map((x) => x.info)
+                  .filter((m) => !!m?.id)
                   .slice()
                   .sort((a, b) => a.id.localeCompare(b.id)),
                 { key: "id" },
@@ -95,11 +99,15 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
             )
 
             for (const message of messages.data ?? []) {
+              if (!message?.info?.id) continue
               setStore(
                 "part",
                 message.info.id,
                 reconcile(
-                  message.parts.slice().sort((a, b) => a.id.localeCompare(b.id)),
+                  message.parts
+                    .filter((p) => !!p?.id)
+                    .slice()
+                    .sort((a, b) => a.id.localeCompare(b.id)),
                   { key: "id" },
                 ),
               )
@@ -112,6 +120,7 @@ export const { use: useSync, provider: SyncProvider } = createSimpleContext({
           setStore("limit", (x) => x + count)
           await sdk.client.session.list().then((x) => {
             const sessions = (x.data ?? [])
+              .filter((s) => !!s?.id)
               .slice()
               .sort((a, b) => a.id.localeCompare(b.id))
               .slice(0, store.limit)

packages/app/src/pages/directory-layout.tsx

@@ -3,7 +3,7 @@ import { useParams } from "@solidjs/router"
 import { SDKProvider, useSDK } from "@/context/sdk"
 import { SyncProvider, useSync } from "@/context/sync"
 import { LocalProvider } from "@/context/local"
-import { PermissionProvider } from "@/context/permission"
+
 import { base64Decode } from "@opencode-ai/util/encode"
 import { DataProvider } from "@opencode-ai/ui/context"
 import { iife } from "@opencode-ai/util/iife"
@@ -27,11 +27,9 @@ export default function Layout(props: ParentProps) {
             }) => sdk.client.permission.respond(input)
 
             return (
-              <PermissionProvider permissions={sync.data.permission} onRespond={respond}>
-                <DataProvider data={sync.data} directory={directory()} onPermissionRespond={respond}>
-                  <LocalProvider>{props.children}</LocalProvider>
-                </DataProvider>
-              </PermissionProvider>
+              <DataProvider data={sync.data} directory={directory()} onPermissionRespond={respond}>
+                <LocalProvider>{props.children}</LocalProvider>
+              </DataProvider>
             )
           })}
         </SyncProvider>

packages/app/src/pages/layout.tsx

@@ -22,10 +22,11 @@ import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Button } from "@opencode-ai/ui/button"
 import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { Collapsible } from "@opencode-ai/ui/collapsible"
 import { DiffChanges } from "@opencode-ai/ui/diff-changes"
 import { Spinner } from "@opencode-ai/ui/spinner"
+import { Mark } from "@opencode-ai/ui/logo"
 import { getFilename } from "@opencode-ai/util/path"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { Session } from "@opencode-ai/sdk/v2/client"
@@ -44,8 +45,9 @@ import { useProviders } from "@/hooks/use-providers"
 import { showToast, Toast, toaster } from "@opencode-ai/ui/toast"
 import { useGlobalSDK } from "@/context/global-sdk"
 import { useNotification } from "@/context/notification"
+import { usePermission } from "@/context/permission"
 import { Binary } from "@opencode-ai/util/binary"
-import { Header } from "@/components/header"
+
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useTheme, type ColorScheme } from "@opencode-ai/ui/theme"
 import { DialogSelectProvider } from "@/components/dialog-select-provider"
@@ -91,6 +93,7 @@ export default function Layout(props: ParentProps) {
   const platform = usePlatform()
   const server = useServer()
   const notification = useNotification()
+  const permission = usePermission()
   const navigate = useNavigate()
   const providers = useProviders()
   const dialog = useDialog()
@@ -131,11 +134,15 @@ export default function Layout(props: ParentProps) {
     })
   }
 
-  onMount(async () => {
-    if (platform.checkUpdate && platform.update && platform.restart) {
-      const { updateAvailable, version } = await platform.checkUpdate()
-      if (updateAvailable) {
-        showToast({
+  onMount(() => {
+    if (!platform.checkUpdate || !platform.update || !platform.restart) return
+
+    let toastId: number | undefined
+
+    async function pollUpdate() {
+      const { updateAvailable, version } = await platform.checkUpdate!()
+      if (updateAvailable && toastId === undefined) {
+        toastId = showToast({
           persistent: true,
           icon: "download",
           title: "Update available",
@@ -156,31 +163,48 @@ export default function Layout(props: ParentProps) {
         })
       }
     }
+
+    pollUpdate()
+    const interval = setInterval(pollUpdate, 10 * 60 * 1000)
+    onCleanup(() => clearInterval(interval))
   })
 
   onMount(() => {
-    const seenSessions = new Set<string>()
     const toastBySession = new Map<string, number>()
+    const alertedAtBySession = new Map<string, number>()
+    const permissionAlertCooldownMs = 5000
+
     const unsub = globalSDK.event.listen((e) => {
       if (e.details?.type !== "permission.updated") return
       const directory = e.name
-      const permission = e.details.properties
-      const currentDir = params.dir ? base64Decode(params.dir) : undefined
-      const currentSession = params.id
+      const perm = e.details.properties
+      if (permission.autoResponds(perm)) return
+
+      const sessionKey = `${directory}:${perm.sessionID}`
       const [store] = globalSync.child(directory)
-      const session = store.session.find((s) => s.id === permission.sessionID)
+      const session = store.session.find((s) => s.id === perm.sessionID)
+
       const sessionTitle = session?.title ?? "New session"
       const projectName = getFilename(directory)
       const description = `${sessionTitle} in ${projectName} needs permission`
-      const href = `/${base64Encode(directory)}/session/${permission.sessionID}`
+      const href = `/${base64Encode(directory)}/session/${perm.sessionID}`
+
+      const now = Date.now()
+      const lastAlerted = alertedAtBySession.get(sessionKey) ?? 0
+      if (now - lastAlerted < permissionAlertCooldownMs) return
+      alertedAtBySession.set(sessionKey, now)
+
       void platform.notify("Permission required", description, href)
 
-      if (directory === currentDir && permission.sessionID === currentSession) return
+      const currentDir = params.dir ? base64Decode(params.dir) : undefined
+      const currentSession = params.id
+      if (directory === currentDir && perm.sessionID === currentSession) return
       if (directory === currentDir && session?.parentID === currentSession) return
 
-      const sessionKey = `${directory}:${permission.sessionID}`
-      if (seenSessions.has(sessionKey)) return
-      seenSessions.add(sessionKey)
+      const existingToastId = toastBySession.get(sessionKey)
+      if (existingToastId !== undefined) {
+        toaster.dismiss(existingToastId)
+      }
 
       const toastId = showToast({
         persistent: true,
@@ -213,7 +237,7 @@ export default function Layout(props: ParentProps) {
       if (toastId !== undefined) {
         toaster.dismiss(toastId)
         toastBySession.delete(sessionKey)
-        seenSessions.delete(sessionKey)
+        alertedAtBySession.delete(sessionKey)
       }
       const [store] = globalSync.child(currentDir)
       const childSessions = store.session.filter((s) => s.parentID === currentSession)
@@ -223,7 +247,7 @@ export default function Layout(props: ParentProps) {
         if (childToastId !== undefined) {
           toaster.dismiss(childToastId)
           toastBySession.delete(childKey)
-          seenSessions.delete(childKey)
+          alertedAtBySession.delete(childKey)
         }
       }
     })
@@ -708,17 +732,13 @@ export default function Layout(props: ParentProps) {
             </A>
           </Tooltip>
           <div class="hidden group-hover/session:flex group-active/session:flex group-focus-within/session:flex text-text-base gap-1 items-center absolute top-1 right-1">
-            <Tooltip
+            <TooltipKeybind
               placement={props.mobile ? "bottom" : "right"}
-              value={
-                <div class="flex items-center gap-2">
-                  <span>Archive session</span>
-                  <span class="text-icon-base text-12-medium">{command.keybind("session.archive")}</span>
-                </div>
-              }
+              title="Archive session"
+              keybind={command.keybind("session.archive")}
             >
               <IconButton icon="archive" variant="ghost" onClick={() => archiveSession(props.session)} />
-            </Tooltip>
+            </TooltipKeybind>
           </div>
         </div>
       </>
@@ -786,17 +806,9 @@ export default function Layout(props: ParentProps) {
                       </DropdownMenu.Content>
                     </DropdownMenu.Portal>
                   </DropdownMenu>
-                  <Tooltip
-                    placement="top"
-                    value={
-                      <div class="flex items-center gap-2">
-                        <span>New session</span>
-                        <span class="text-icon-base text-12-medium">{command.keybind("session.new")}</span>
-                      </div>
-                    }
-                  >
+                  <TooltipKeybind placement="top" title="New session" keybind={command.keybind("session.new")}>
                     <IconButton as={A} href={`${slug()}/session`} icon="plus-small" variant="ghost" />
-                  </Tooltip>
+                  </TooltipKeybind>
                 </div>
               </Button>
               <Collapsible.Content>
@@ -874,15 +886,16 @@ export default function Layout(props: ParentProps) {
       <>
         <div class="flex flex-col items-start self-stretch gap-4 p-2 min-h-0 overflow-hidden">
           <Show when={!sidebarProps.mobile}>
-            <Tooltip
+            <A href="/" class="shrink-0 h-8 flex items-center justify-start px-2" data-tauri-drag-region>
+              <Mark class="shrink-0" />
+            </A>
+          </Show>
+          <Show when={!sidebarProps.mobile}>
+            <TooltipKeybind
               class="shrink-0"
               placement="right"
-              value={
-                <div class="flex items-center gap-2">
-                  <span>Toggle sidebar</span>
-                  <span class="text-icon-base text-12-medium">{command.keybind("sidebar.toggle")}</span>
-                </div>
-              }
+              title="Toggle sidebar"
+              keybind={command.keybind("sidebar.toggle")}
               inactive={expanded()}
             >
               <Button
@@ -914,7 +927,7 @@ export default function Layout(props: ParentProps) {
                   </div>
                 </Show>
               </Button>
-            </Tooltip>
+            </TooltipKeybind>
           </Show>
           <DragDropProvider
             onDragStart={handleDragStart}
@@ -1018,11 +1031,6 @@ export default function Layout(props: ParentProps) {
 
   return (
     <div class="relative flex-1 min-h-0 flex flex-col select-none [&_input]:select-text [&_textarea]:select-text [&_[contenteditable]]:select-text">
-      <Header
-        navigateToProject={navigateToProject}
-        navigateToSession={navigateToSession}
-        onMobileMenuToggle={mobileSidebar.toggle}
-      />
       <div class="flex-1 min-h-0 flex">
         <div
           classList={{

packages/app/src/pages/session.tsx

@@ -21,7 +21,7 @@ import { DateTime } from "luxon"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Icon } from "@opencode-ai/ui/icon"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { DiffChanges } from "@opencode-ai/ui/diff-changes"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Tabs } from "@opencode-ai/ui/tabs"
@@ -51,17 +51,26 @@ import { DialogSelectFile } from "@/components/dialog-select-file"
 import { DialogSelectModel } from "@/components/dialog-select-model"
 import { DialogSelectMcp } from "@/components/dialog-select-mcp"
 import { useCommand } from "@/context/command"
-import { useNavigate, useParams } from "@solidjs/router"
+import { A, useNavigate, useParams } from "@solidjs/router"
 import { UserMessage } from "@opencode-ai/sdk/v2"
 import { useSDK } from "@/context/sdk"
 import { usePrompt } from "@/context/prompt"
 import { extractPromptFromParts } from "@/utils/prompt"
 import { ConstrainDragYAxis, getDraggableId } from "@/utils/solid-dnd"
-import { StatusBar } from "@/components/status-bar"
-import { SessionMcpIndicator } from "@/components/session-mcp-indicator"
-import { SessionLspIndicator } from "@/components/session-lsp-indicator"
 import { usePermission } from "@/context/permission"
 import { showToast } from "@opencode-ai/ui/toast"
+import { useServer } from "@/context/server"
+import { Button } from "@opencode-ai/ui/button"
+import { DialogSelectServer } from "@/components/dialog-select-server"
+import { SessionLspIndicator } from "@/components/session-lsp-indicator"
+import { SessionMcpIndicator } from "@/components/session-mcp-indicator"
+import { useGlobalSDK } from "@/context/global-sdk"
+import { Popover } from "@opencode-ai/ui/popover"
+import { Select } from "@opencode-ai/ui/select"
+import { TextField } from "@opencode-ai/ui/text-field"
+import { base64Encode } from "@opencode-ai/util/encode"
+import { iife } from "@opencode-ai/util/iife"
+import { Session } from "@opencode-ai/sdk/v2/client"
 
 function same<T>(a: readonly T[], b: readonly T[]) {
   if (a === b) return true
@@ -69,6 +78,196 @@ function same<T>(a: readonly T[], b: readonly T[]) {
   return a.every((x, i) => x === b[i])
 }
 
+function Header(props: { onMobileMenuToggle?: () => void }) {
+  const globalSDK = useGlobalSDK()
+  const layout = useLayout()
+  const params = useParams()
+  const navigate = useNavigate()
+  const command = useCommand()
+  const server = useServer()
+  const dialog = useDialog()
+  const sync = useSync()
+
+  const sessions = createMemo(() => (sync.data.session ?? []).filter((s) => !s.parentID))
+  const currentSession = createMemo(() => sessions().find((s) => s.id === params.id))
+  const shareEnabled = createMemo(() => sync.data.config.share !== "disabled")
+  const branch = createMemo(() => sync.data.vcs?.branch)
+
+  function navigateToProject(directory: string) {
+    navigate(`/${base64Encode(directory)}`)
+  }
+
+  function navigateToSession(session: Session | undefined) {
+    if (!session) return
+    navigate(`/${params.dir}/session/${session.id}`)
+  }
+
+  return (
+    <header class="h-12 shrink-0 bg-background-base border-b border-border-weak-base flex" data-tauri-drag-region>
+      <button
+        type="button"
+        class="xl:hidden w-12 shrink-0 flex items-center justify-center border-r border-border-weak-base hover:bg-surface-raised-base-hover active:bg-surface-raised-base-active transition-colors"
+        onClick={props.onMobileMenuToggle}
+      >
+        <Icon name="menu" size="small" />
+      </button>
+      <div class="px-4 flex items-center justify-between gap-4 w-full">
+        <div class="flex items-center gap-3 min-w-0">
+          <div class="flex items-center gap-2 min-w-0">
+            <div class="hidden xl:flex items-center gap-2">
+              <Select
+                options={layout.projects.list().map((project) => project.worktree)}
+                current={sync.directory}
+                label={(x) => {
+                  const name = getFilename(x)
+                  const b = x === sync.directory ? branch() : undefined
+                  return b ? `${name}:${b}` : name
+                }}
+                onSelect={(x) => (x ? navigateToProject(x) : undefined)}
+                class="text-14-regular text-text-base"
+                variant="ghost"
+              >
+                {/* @ts-ignore */}
+                {(i) => (
+                  <div class="flex items-center gap-2">
+                    <Icon name="folder" size="small" />
+                    <div class="text-text-strong">{getFilename(i)}</div>
+                  </div>
+                )}
+              </Select>
+              <div class="text-text-weaker">/</div>
+            </div>
+            <Select
+              options={sessions()}
+              current={currentSession()}
+              placeholder="New session"
+              label={(x) => x.title}
+              value={(x) => x.id}
+              onSelect={navigateToSession}
+              class="text-14-regular text-text-base max-w-[calc(100vw-180px)] md:max-w-md"
+              variant="ghost"
+            />
+          </div>
+          <Show when={currentSession()}>
+            <TooltipKeybind class="hidden xl:block" title="New session" keybind={command.keybind("session.new")}>
+              <IconButton as={A} href={`/${params.dir}/session`} icon="edit-small-2" variant="ghost" />
+            </TooltipKeybind>
+          </Show>
+        </div>
+        <div class="flex items-center gap-3">
+          <div class="hidden md:flex items-center gap-1">
+            <Button
+              size="small"
+              variant="ghost"
+              onClick={() => {
+                dialog.show(() => <DialogSelectServer />)
+              }}
+            >
+              <div
+                classList={{
+                  "size-1.5 rounded-full": true,
+                  "bg-icon-success-base": server.healthy() === true,
+                  "bg-icon-critical-base": server.healthy() === false,
+                  "bg-border-weak-base": server.healthy() === undefined,
+                }}
+              />
+              <Icon name="server" size="small" class="text-icon-weak" />
+              <span class="text-12-regular text-text-weak truncate max-w-[200px]">{server.name}</span>
+            </Button>
+            <SessionLspIndicator />
+            <SessionMcpIndicator />
+          </div>
+          <div class="flex items-center gap-1">
+            <Show when={currentSession()?.summary?.files}>
+              <TooltipKeybind
+                class="hidden md:block shrink-0"
+                title="Toggle review"
+                keybind={command.keybind("review.toggle")}
+              >
+                <Button variant="ghost" class="group/review-toggle size-6 p-0" onClick={layout.review.toggle}>
+                  <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
+                    <Icon
+                      name={layout.review.opened() ? "layout-right" : "layout-left"}
+                      size="small"
+                      class="group-hover/review-toggle:hidden"
+                    />
+                    <Icon
+                      name={layout.review.opened() ? "layout-right-partial" : "layout-left-partial"}
+                      size="small"
+                      class="hidden group-hover/review-toggle:inline-block"
+                    />
+                    <Icon
+                      name={layout.review.opened() ? "layout-right-full" : "layout-left-full"}
+                      size="small"
+                      class="hidden group-active/review-toggle:inline-block"
+                    />
+                  </div>
+                </Button>
+              </TooltipKeybind>
+            </Show>
+            <TooltipKeybind
+              class="hidden md:block shrink-0"
+              title="Toggle terminal"
+              keybind={command.keybind("terminal.toggle")}
+            >
+              <Button variant="ghost" class="group/terminal-toggle size-6 p-0" onClick={layout.terminal.toggle}>
+                <div class="relative flex items-center justify-center size-4 [&>*]:absolute [&>*]:inset-0">
+                  <Icon
+                    size="small"
+                    name={layout.terminal.opened() ? "layout-bottom-full" : "layout-bottom"}
+                    class="group-hover/terminal-toggle:hidden"
+                  />
+                  <Icon
+                    size="small"
+                    name="layout-bottom-partial"
+                    class="hidden group-hover/terminal-toggle:inline-block"
+                  />
+                  <Icon
+                    size="small"
+                    name={layout.terminal.opened() ? "layout-bottom" : "layout-bottom-full"}
+                    class="hidden group-active/terminal-toggle:inline-block"
+                  />
+                </div>
+              </Button>
+            </TooltipKeybind>
+          </div>
+          <Show when={shareEnabled() && currentSession()}>
+            <Popover
+              title="Share session"
+              trigger={
+                <Tooltip class="shrink-0" value="Share session">
+                  <IconButton icon="share" variant="ghost" class="" />
+                </Tooltip>
+              }
+            >
+              {iife(() => {
+                const [url] = createResource(
+                  () => currentSession(),
+                  async (session) => {
+                    if (!session) return
+                    let shareURL = session.share?.url
+                    if (!shareURL) {
+                      shareURL = await globalSDK.client.session
+                        .share({ sessionID: session.id, directory: sync.directory })
+                        .then((r) => r.data?.share?.url)
+                        .catch((e) => {
+                          console.error("Failed to share session", e)
+                          return undefined
+                        })
+                    }
+                    return shareURL
+                  },
+                )
+                return <Show when={url()}>{(url) => <TextField value={url()} readOnly copyable class="w-72" />}</Show>
+              })}
+            </Popover>
+          </Show>
+        </div>
+      </div>
+    </header>
+  )
+}
+
 export default function Page() {
   const layout = useLayout()
   const local = useLocal()
@@ -248,21 +447,6 @@ export default function Page() {
       slash: "open",
       onSelect: () => dialog.show(() => <DialogSelectFile />),
     },
-    // {
-    //   id: "theme.toggle",
-    //   title: "Toggle theme",
-    //   description: "Switch between themes",
-    //   category: "View",
-    //   keybind: "ctrl+t",
-    //   slash: "theme",
-    //   onSelect: () => {
-    //     const currentTheme = localStorage.getItem("theme") ?? "oc-1"
-    //     const themes = ["oc-1", "oc-2-paper"]
-    //     const nextTheme = themes[(themes.indexOf(currentTheme) + 1) % themes.length]
-    //     localStorage.setItem("theme", nextTheme)
-    //     document.documentElement.setAttribute("data-theme", nextTheme)
-    //   },
-    // },
     {
       id: "terminal.toggle",
       title: "Toggle terminal",
@@ -351,17 +535,33 @@ export default function Page() {
       keybind: "shift+mod+.",
       onSelect: () => local.agent.move(-1),
     },
+    {
+      id: "model.variant.cycle",
+      title: "Cycle thinking effort",
+      description: "Switch to the next effort level",
+      category: "Model",
+      keybind: "shift+mod+t",
+      onSelect: () => {
+        local.model.variant.cycle()
+        showToast({
+          title: "Thinking effort changed",
+          description: "The thinking effort has been changed to " + (local.model.variant.current() ?? "Default"),
+        })
+      },
+    },
     {
       id: "permissions.autoaccept",
       title: params.id && permission.isAutoAccepting(params.id) ? "Stop auto-accepting edits" : "Auto-accept edits",
       category: "Permissions",
-      disabled: !params.id,
+      keybind: "mod+shift+a",
+      disabled: !params.id || !permission.permissionsEnabled(),
       onSelect: () => {
-        if (!params.id) return
-        permission.toggleAutoAccept(params.id)
+        const sessionID = params.id
+        if (!sessionID) return
+        permission.toggleAutoAccept(sessionID, sdk.directory)
         showToast({
-          title: permission.isAutoAccepting(params.id) ? "Auto-accepting edits" : "Stopped auto-accepting edits",
-          description: permission.isAutoAccepting(params.id)
+          title: permission.isAutoAccepting(sessionID) ? "Auto-accepting edits" : "Stopped auto-accepting edits",
+          description: permission.isAutoAccepting(sessionID)
             ? "Edit and write permissions will be automatically approved"
             : "Edit and write permissions will require approval",
         })
@@ -718,6 +918,7 @@ export default function Page() {
 
   return (
     <div class="relative bg-background-base size-full overflow-hidden flex flex-col">
+      <Header />
       <div class="md:hidden flex-1 min-h-0 flex flex-col bg-background-stronger">
         <Switch>
           <Match when={!params.id}>
@@ -742,6 +943,8 @@ export default function Page() {
                 <div class="relative h-full mt-6 overflow-y-auto no-scrollbar">
                   <SessionReview
                     diffs={diffs()}
+                    diffStyle={layout.review.diffStyle()}
+                    onDiffStyleChange={layout.review.setDiffStyle}
                     classes={{
                       root: "pb-32",
                       header: "px-4",
@@ -838,13 +1041,9 @@ export default function Page() {
                       </For>
                     </SortableProvider>
                     <div class="bg-background-base h-full flex items-center justify-center border-b border-border-weak-base px-3">
-                      <Tooltip
-                        value={
-                          <div class="flex items-center gap-2">
-                            <span>Open file</span>
-                            <span class="text-icon-base text-12-medium">{command.keybind("file.open")}</span>
-                          </div>
-                        }
+                      <TooltipKeybind
+                        title="Open file"
+                        keybind={command.keybind("file.open")}
                         class="flex items-center"
                       >
                         <IconButton
@@ -853,7 +1052,7 @@ export default function Page() {
                           iconSize="large"
                           onClick={() => dialog.show(() => <DialogSelectFile />)}
                         />
-                      </Tooltip>
+                      </TooltipKeybind>
                     </div>
                   </Tabs.List>
                 </div>
@@ -867,7 +1066,8 @@ export default function Page() {
                           container: "px-6",
                         }}
                         diffs={diffs()}
-                        split
+                        diffStyle={layout.review.diffStyle()}
+                        onDiffStyleChange={layout.review.setDiffStyle}
                       />
                     </div>
                   </Tabs.Content>
@@ -959,17 +1159,13 @@ export default function Page() {
                   <For each={terminal.all()}>{(pty) => <SortableTerminalTab terminal={pty} />}</For>
                 </SortableProvider>
                 <div class="h-full flex items-center justify-center">
-                  <Tooltip
-                    value={
-                      <div class="flex items-center gap-2">
-                        <span>New terminal</span>
-                        <span class="text-icon-base text-12-medium">{command.keybind("terminal.new")}</span>
-                      </div>
-                    }
+                  <TooltipKeybind
+                    title="New terminal"
+                    keybind={command.keybind("terminal.new")}
                     class="flex items-center"
                   >
                     <IconButton icon="plus-small" variant="ghost" iconSize="large" onClick={terminal.new} />
-                  </Tooltip>
+                  </TooltipKeybind>
                 </div>
               </Tabs.List>
               <For each={terminal.all()}>
@@ -999,10 +1195,6 @@ export default function Page() {
           </DragDropProvider>
         </div>
       </Show>
-      <StatusBar>
-        <SessionLspIndicator />
-        <SessionMcpIndicator />
-      </StatusBar>
     </div>
   )
 }

packages/console/app/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-app",
-  "version": "1.0.219",
+  "version": "1.0.222",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo --noEmit",

packages/console/app/src/routes/workspace/[id]/billing/reload-section.tsx

@@ -1,5 +1,5 @@
 import { json, action, useParams, createAsync, useSubmission } from "@solidjs/router"
-import { createEffect, Show } from "solid-js"
+import { createEffect, Show, createMemo } from "solid-js"
 import { createStore } from "solid-js/store"
 import { withActor } from "~/context/auth.withActor"
 import { Billing } from "@opencode-ai/console-core/billing.js"
@@ -68,6 +68,12 @@ export function ReloadSection() {
     reloadTrigger: "",
   })
 
+  const processingFee = createMemo(() => {
+    const reloadAmount = billingInfo()?.reloadAmount
+    if (!reloadAmount) return "0.00"
+    return (((reloadAmount + 0.3) / 0.956) * 0.044 + 0.3).toFixed(2)
+  })
+
   createEffect(() => {
     if (!setReloadSubmission.pending && setReloadSubmission.result && !(setReloadSubmission.result as any).error) {
       setStore("show", false)
@@ -104,8 +110,8 @@ export function ReloadSection() {
             }
           >
             <p>
-              Auto reload is <b>enabled</b>. We'll reload <b>${billingInfo()?.reloadAmount}</b> (+$1.23 processing fee)
-              when balance reaches <b>${billingInfo()?.reloadTrigger}</b>.
+              Auto reload is <b>enabled</b>. We'll reload <b>${billingInfo()?.reloadAmount}</b> (+${processingFee()}{" "}
+              processing fee) when balance reaches <b>${billingInfo()?.reloadTrigger}</b>.
             </p>
           </Show>
           <button data-color="primary" type="button" onClick={() => show()}>

packages/console/core/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/console-core",
-  "version": "1.0.219",
+  "version": "1.0.222",
   "private": true,
   "type": "module",
   "dependencies": {

packages/console/function/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-function",
-  "version": "1.0.219",
+  "version": "1.0.222",
   "$schema": "https://json.schemastore.org/package.json",
   "private": true,
   "type": "module",

packages/console/mail/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/console-mail",
-  "version": "1.0.219",
+  "version": "1.0.222",
   "dependencies": {
     "@jsx-email/all": "2.2.3",
     "@jsx-email/cli": "1.4.3",

packages/desktop/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opencode-ai/desktop",
   "private": true,
-  "version": "1.0.219",
+  "version": "1.0.222",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo -b",

packages/desktop/scripts/predev.ts

@@ -6,7 +6,7 @@ const RUST_TARGET = Bun.env.TAURI_ENV_TARGET_TRIPLE
 
 const sidecarConfig = getCurrentSidecar(RUST_TARGET)
 
-const binaryPath = `../opencode/dist/${sidecarConfig.ocBinary}/bin/opencode`
+const binaryPath = `../opencode/dist/${sidecarConfig.ocBinary}/bin/opencode${process.platform === "win32" ? ".exe" : ""}`
 
 await $`cd ../opencode && bun run build --single`
 

packages/desktop/src/index.tsx

@@ -57,19 +57,71 @@ const platform: Platform = {
   },
 
   openLink(url: string) {
-    shellOpen(url)
+    void shellOpen(url).catch(() => undefined)
   },
 
   storage: (name = "default.dat") => {
-    const api: AsyncStorage = {
+    type StoreLike = {
+      get(key: string): Promise<string | null | undefined>
+      set(key: string, value: string): Promise<unknown>
+      delete(key: string): Promise<unknown>
+      clear(): Promise<unknown>
+      keys(): Promise<string[]>
+      length(): Promise<number>
+    }
+
+    const memory = () => {
+      const data = new Map<string, string>()
+      const store: StoreLike = {
+        get: async (key) => data.get(key),
+        set: async (key, value) => {
+          data.set(key, value)
+        },
+        delete: async (key) => {
+          data.delete(key)
+        },
+        clear: async () => {
+          data.clear()
+        },
+        keys: async () => Array.from(data.keys()),
+        length: async () => data.size,
+      }
+      return store
+    }
+
+    const api: AsyncStorage & { _store: Promise<StoreLike> | null; _getStore: () => Promise<StoreLike> } = {
       _store: null,
-      _getStore: async () => api._store || (api._store = Store.load(name)),
-      getItem: async (key: string) => (await (await api._getStore()).get(key)) ?? null,
-      setItem: async (key: string, value: string) => await (await api._getStore()).set(key, value),
-      removeItem: async (key: string) => await (await api._getStore()).delete(key),
-      clear: async () => await (await api._getStore()).clear(),
-      key: async (index: number) => (await (await api._getStore()).keys())[index],
-      getLength: async () => (await api._getStore()).length(),
+      _getStore: async () => {
+        if (api._store) return api._store
+        api._store = Store.load(name).catch(() => memory())
+        return api._store
+      },
+      getItem: async (key: string) => {
+        const store = await api._getStore()
+        const value = await store.get(key).catch(() => null)
+        if (value === undefined) return null
+        return value
+      },
+      setItem: async (key: string, value: string) => {
+        const store = await api._getStore()
+        await store.set(key, value).catch(() => undefined)
+      },
+      removeItem: async (key: string) => {
+        const store = await api._getStore()
+        await store.delete(key).catch(() => undefined)
+      },
+      clear: async () => {
+        const store = await api._getStore()
+        await store.clear().catch(() => undefined)
+      },
+      key: async (index: number) => {
+        const store = await api._getStore()
+        return (await store.keys().catch(() => []))[index]
+      },
+      getLength: async () => {
+        const store = await api._getStore()
+        return await store.length().catch(() => 0)
+      },
       get length() {
         return api.getLength()
       },
@@ -79,20 +131,25 @@ const platform: Platform = {
 
   checkUpdate: async () => {
     if (!UPDATER_ENABLED) return { updateAvailable: false }
-    update = await check()
-    if (!update) return { updateAvailable: false }
-    await update.download()
-    return { updateAvailable: true, version: update.version }
+    const next = await check().catch(() => null)
+    if (!next) return { updateAvailable: false }
+    const ok = await next
+      .download()
+      .then(() => true)
+      .catch(() => false)
+    if (!ok) return { updateAvailable: false }
+    update = next
+    return { updateAvailable: true, version: next.version }
   },
 
   update: async () => {
     if (!UPDATER_ENABLED || !update) return
-    if (ostype() === "windows") await invoke("kill_sidecar")
-    await update.install()
+    if (ostype() === "windows") await invoke("kill_sidecar").catch(() => undefined)
+    await update.install().catch(() => undefined)
   },
 
   restart: async () => {
-    await invoke("kill_sidecar")
+    await invoke("kill_sidecar").catch(() => undefined)
     await relaunch()
   },
 

packages/enterprise/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/enterprise",
-  "version": "1.0.219",
+  "version": "1.0.222",
   "private": true,
   "type": "module",
   "scripts": {

packages/enterprise/src/routes/share/[shareID].tsx

@@ -33,7 +33,7 @@ const ClientOnlyCode = clientOnly(() => import("@opencode-ai/ui/code").then((m)
 const ClientOnlyWorkerPoolProvider = clientOnly(() =>
   import("@opencode-ai/ui/pierre/worker").then((m) => ({
     default: (props: { children: any }) => (
-      <WorkerPoolProvider pool={m.workerPool}>{props.children}</WorkerPoolProvider>
+      <WorkerPoolProvider pools={m.getWorkerPools()}>{props.children}</WorkerPoolProvider>
     ),
   })),
 )

packages/extensions/zed/extension.toml

@@ -1,7 +1,7 @@
 id = "opencode"
 name = "OpenCode"
 description = "The open source coding agent."
-version = "1.0.219"
+version = "1.0.222"
 schema_version = 1
 authors = ["Anomaly"]
 repository = "https://github.com/sst/opencode"
@@ -11,26 +11,26 @@ name = "OpenCode"
 icon = "./icons/opencode.svg"
 
 [agent_servers.opencode.targets.darwin-aarch64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.219/opencode-darwin-arm64.zip"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.222/opencode-darwin-arm64.zip"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.darwin-x86_64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.219/opencode-darwin-x64.zip"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.222/opencode-darwin-x64.zip"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.linux-aarch64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.219/opencode-linux-arm64.tar.gz"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.222/opencode-linux-arm64.tar.gz"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.linux-x86_64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.219/opencode-linux-x64.tar.gz"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.222/opencode-linux-x64.tar.gz"
 cmd = "./opencode"
 args = ["acp"]
 
 [agent_servers.opencode.targets.windows-x86_64]
-archive = "https://github.com/sst/opencode/releases/download/v1.0.219/opencode-windows-x64.zip"
+archive = "https://github.com/sst/opencode/releases/download/v1.0.222/opencode-windows-x64.zip"
 cmd = "./opencode.exe"
 args = ["acp"]

packages/function/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/function",
-  "version": "1.0.219",
+  "version": "1.0.222",
   "$schema": "https://json.schemastore.org/package.json",
   "private": true,
   "type": "module",

packages/opencode/package.json

@@ -1,6 +1,6 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
-  "version": "1.0.219",
+  "version": "1.0.222",
   "name": "opencode",
   "type": "module",
   "private": true,
@@ -89,7 +89,7 @@
     "@zip.js/zip.js": "2.7.62",
     "ai": "catalog:",
     "bonjour-service": "1.3.0",
-    "bun-pty": "0.4.2",
+    "bun-pty": "0.4.4",
     "chokidar": "4.0.3",
     "clipboardy": "4.0.0",
     "decimal.js": "10.5.0",

packages/opencode/src/cli/cmd/debug/agent.ts

@@ -0,0 +1,51 @@
+import { EOL } from "os"
+import { basename } from "path"
+import { Agent } from "../../../agent/agent"
+import { Provider } from "../../../provider/provider"
+import { ToolRegistry } from "../../../tool/registry"
+import { Wildcard } from "../../../util/wildcard"
+import { bootstrap } from "../../bootstrap"
+import { cmd } from "../cmd"
+
+export const AgentCommand = cmd({
+  command: "agent <name>",
+  builder: (yargs) =>
+    yargs.positional("name", {
+      type: "string",
+      demandOption: true,
+      description: "Agent name",
+    }),
+  async handler(args) {
+    await bootstrap(process.cwd(), async () => {
+      const agentName = args.name as string
+      const agent = await Agent.get(agentName)
+      if (!agent) {
+        process.stderr.write(
+          `Agent ${agentName} not found, run '${basename(process.execPath)} agent list' to get an agent list` + EOL,
+        )
+        process.exit(1)
+      }
+      const resolvedTools = await resolveTools(agent)
+      const output = {
+        ...agent,
+        tools: resolvedTools,
+        toolOverrides: agent.tools,
+      }
+      process.stdout.write(JSON.stringify(output, null, 2) + EOL)
+    })
+  },
+})
+
+async function resolveTools(agent: Agent.Info) {
+  const providerID = agent.model?.providerID ?? (await Provider.defaultModel()).providerID
+  const toolOverrides = {
+    ...agent.tools,
+    ...(await ToolRegistry.enabled(agent)),
+  }
+  const availableTools = await ToolRegistry.tools(providerID, agent)
+  const resolved: Record<string, boolean> = {}
+  for (const tool of availableTools) {
+    resolved[tool.id] = Wildcard.all(tool.id, toolOverrides) !== false
+  }
+  return resolved
+}

packages/opencode/src/cli/cmd/debug/index.ts

@@ -8,6 +8,7 @@ import { RipgrepCommand } from "./ripgrep"
 import { ScrapCommand } from "./scrap"
 import { SkillCommand } from "./skill"
 import { SnapshotCommand } from "./snapshot"
+import { AgentCommand } from "./agent"
 
 export const DebugCommand = cmd({
   command: "debug",
@@ -20,6 +21,7 @@ export const DebugCommand = cmd({
       .command(ScrapCommand)
       .command(SkillCommand)
       .command(SnapshotCommand)
+      .command(AgentCommand)
       .command(PathsCommand)
       .command({
         command: "wait",

packages/opencode/src/cli/cmd/tui/component/prompt/autocomplete.tsx

@@ -259,7 +259,7 @@ export function Autocomplete(props: {
     const s = session()
     for (const command of sync.data.command) {
       results.push({
-        display: "/" + command.name,
+        display: "/" + command.name + (command.mcp ? " (MCP)" : ""),
         description: command.description,
         onSelect: () => {
           const newText = "/" + command.name + " "

packages/opencode/src/cli/cmd/tui/component/tips.ts

@@ -28,7 +28,7 @@ export const TIPS = [
   "Press {highlight}Ctrl+C{/highlight} when typing to clear the input field.",
   "Press {highlight}Escape{/highlight} to stop the AI mid-response.",
   "Switch to {highlight}Plan{/highlight} agent to get suggestions without making actual changes.",
-  "Use {highlight}@agent-name{/highlight} in prompts to invoke specialized subagents.",
+  "Use {highlight}@<agent-name>{/highlight} in prompts to invoke specialized subagents.",
   "Press {highlight}Ctrl+X Right/Left{/highlight} to cycle through parent and child sessions.",
   "Create {highlight}opencode.json{/highlight} in project root for project-specific settings.",
   "Place settings in {highlight}~/.config/opencode/opencode.json{/highlight} for global config.",

packages/opencode/src/command/index.ts

@@ -1,4 +1,3 @@
-import { Bus } from "@/bus"
 import { BusEvent } from "@/bus/bus-event"
 import z from "zod"
 import { Config } from "../config/config"
@@ -27,6 +26,7 @@ export namespace Command {
       description: z.string().optional(),
       agent: z.string().optional(),
       model: z.string().optional(),
+      mcp: z.boolean().optional(),
       // workaround for zod not supporting async functions natively so we use getters
       // https://zod.dev/v4/changelog?id=zfunction
       template: z.promise(z.string()).or(z.string()),
@@ -94,6 +94,7 @@ export namespace Command {
     for (const [name, prompt] of Object.entries(await MCP.prompts())) {
       result[name] = {
         name,
+        mcp: true,
         description: prompt.description,
         get template() {
           // since a getter can't be async we need to manually return a promise here

packages/opencode/src/config/config.ts

@@ -259,7 +259,7 @@ export namespace Config {
     return result
   }
 
-  const MODE_GLOB = new Bun.Glob("{mode,modes}/**/*.md")
+  const MODE_GLOB = new Bun.Glob("{mode,modes}/*.md")
   async function loadMode(dir: string) {
     const result: Record<string, Agent> = {}
     for await (const item of MODE_GLOB.scan({
@@ -288,7 +288,7 @@ export namespace Config {
     return result
   }
 
-  const PLUGIN_GLOB = new Bun.Glob("{plugin,plugins}/**/*.{ts,js}")
+  const PLUGIN_GLOB = new Bun.Glob("{plugin,plugins}/*.{ts,js}")
   async function loadPlugin(dir: string) {
     const plugins: string[] = []
 

packages/opencode/src/lsp/client.ts

@@ -98,6 +98,9 @@ export namespace LSPClient {
           },
           workspace: {
             configuration: true,
+            didChangeWatchedFiles: {
+              dynamicRegistration: true,
+            },
           },
           textDocument: {
             synchronization: {
@@ -151,6 +154,16 @@ export namespace LSPClient {
 
           const version = files[input.path]
           if (version !== undefined) {
+            log.info("workspace/didChangeWatchedFiles", input)
+            await connection.sendNotification("workspace/didChangeWatchedFiles", {
+              changes: [
+                {
+                  uri: pathToFileURL(input.path).href,
+                  type: 2, // Changed
+                },
+              ],
+            })
+
             const next = version + 1
             files[input.path] = next
             log.info("textDocument/didChange", {
@@ -167,6 +180,16 @@ export namespace LSPClient {
             return
           }
 
+          log.info("workspace/didChangeWatchedFiles", input)
+          await connection.sendNotification("workspace/didChangeWatchedFiles", {
+            changes: [
+              {
+                uri: pathToFileURL(input.path).href,
+                type: 1, // Created
+              },
+            ],
+          })
+
           log.info("textDocument/didOpen", input)
           diagnostics.delete(input.path)
           await connection.sendNotification("textDocument/didOpen", {

packages/opencode/src/mcp/index.ts

@@ -195,7 +195,7 @@ export namespace MCP {
     for (const prompt of prompts.prompts) {
       const sanitizedClientName = clientName.replace(/[^a-zA-Z0-9_-]/g, "_")
       const sanitizedPromptName = prompt.name.replace(/[^a-zA-Z0-9_-]/g, "_")
-      const key = sanitizedClientName + ":" + sanitizedPromptName + " (MCP)"
+      const key = sanitizedClientName + ":" + sanitizedPromptName
 
       commands[key] = { ...prompt, client: clientName }
     }

packages/opencode/src/provider/provider.ts

@@ -501,7 +501,7 @@ export namespace Provider {
       api: {
         id: model.id,
         url: provider.api!,
-        npm: model.provider?.npm ?? provider.npm ?? provider.id,
+        npm: model.provider?.npm ?? provider.npm ?? "@ai-sdk/openai-compatible",
       },
       status: model.status ?? "active",
       headers: model.headers ?? {},
@@ -646,7 +646,11 @@ export namespace Provider {
           api: {
             id: model.id ?? existingModel?.api.id ?? modelID,
             npm:
-              model.provider?.npm ?? provider.npm ?? existingModel?.api.npm ?? modelsDev[providerID]?.npm ?? providerID,
+              model.provider?.npm ??
+              provider.npm ??
+              existingModel?.api.npm ??
+              modelsDev[providerID]?.npm ??
+              "@ai-sdk/openai-compatible",
             url: provider?.api ?? existingModel?.api.url ?? modelsDev[providerID]?.api,
           },
           status: model.status ?? existingModel?.status ?? "active",

packages/opencode/src/pty/index.ts

@@ -7,32 +7,12 @@ import { Log } from "../util/log"
 import type { WSContext } from "hono/ws"
 import { Instance } from "../project/instance"
 import { lazy } from "@opencode-ai/util/lazy"
-import {} from "process"
-import { Installation } from "@/installation"
 import { Shell } from "@/shell/shell"
 
 export namespace Pty {
   const log = Log.create({ service: "pty" })
 
   const pty = lazy(async () => {
-    if (!Installation.isLocal()) {
-      const path = require(
-        `bun-pty/rust-pty/target/release/${
-          process.platform === "win32"
-            ? "rust_pty.dll"
-            : process.platform === "linux" && process.arch === "x64"
-              ? "librust_pty.so"
-              : process.platform === "darwin" && process.arch === "x64"
-                ? "librust_pty.dylib"
-                : process.platform === "darwin" && process.arch === "arm64"
-                  ? "librust_pty_arm64.dylib"
-                  : process.platform === "linux" && process.arch === "arm64"
-                    ? "librust_pty_arm64.so"
-                    : ""
-        }`,
-      )
-      process.env.BUN_PTY_LIB = path
-    }
     const { spawn } = await import("bun-pty")
     return spawn
   })
@@ -128,6 +108,7 @@ export namespace Pty {
       cwd,
       env,
     })
+
     const info = {
       id,
       title: input.title || `Terminal ${id.slice(-4)}`,

packages/opencode/src/session/retry.ts

@@ -5,10 +5,11 @@ export namespace SessionRetry {
   export const RETRY_INITIAL_DELAY = 2000
   export const RETRY_BACKOFF_FACTOR = 2
   export const RETRY_MAX_DELAY_NO_HEADERS = 30_000 // 30 seconds
+  export const RETRY_MAX_DELAY = 2_147_483_647 // max 32-bit signed integer for setTimeout
 
   export async function sleep(ms: number, signal: AbortSignal): Promise<void> {
     return new Promise((resolve, reject) => {
-      const timeout = setTimeout(resolve, ms)
+      const timeout = setTimeout(resolve, Math.min(ms, RETRY_MAX_DELAY))
       signal.addEventListener(
         "abort",
         () => {

packages/opencode/test/session/retry.test.ts

@@ -58,6 +58,26 @@ describe("session.retry.delay", () => {
     const longError = apiError({ "retry-after-ms": "700000" })
     expect(SessionRetry.delay(1, longError)).toBe(700000)
   })
+
+  test("sleep caps delay to max 32-bit signed integer to avoid TimeoutOverflowWarning", async () => {
+    const controller = new AbortController()
+
+    const warnings: string[] = []
+    const originalWarn = process.emitWarning
+    process.emitWarning = (warning: string | Error) => {
+      warnings.push(typeof warning === "string" ? warning : warning.message)
+    }
+
+    const promise = SessionRetry.sleep(2_560_914_000, controller.signal)
+    controller.abort()
+
+    try {
+      await promise
+    } catch {}
+
+    process.emitWarning = originalWarn
+    expect(warnings.some((w) => w.includes("TimeoutOverflowWarning"))).toBe(false)
+  })
 })
 
 describe("session.message-v2.fromError", () => {

packages/plugin/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/plugin",
-  "version": "1.0.219",
+  "version": "1.0.222",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo --noEmit",

packages/sdk/js/package.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://json.schemastore.org/package.json",
   "name": "@opencode-ai/sdk",
-  "version": "1.0.219",
+  "version": "1.0.222",
   "type": "module",
   "scripts": {
     "typecheck": "tsgo --noEmit",

packages/sdk/js/src/v2/gen/types.gen.ts

@@ -1733,6 +1733,7 @@ export type Command = {
   description?: string
   agent?: string
   model?: string
+  mcp?: boolean
   template: string
   subtask?: boolean
   hints: Array<string>

packages/sdk/openapi.json

@@ -8982,6 +8982,9 @@
           "model": {
             "type": "string"
           },
+          "mcp": {
+            "type": "boolean"
+          },
           "template": {
             "anyOf": [
               {

packages/slack/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/slack",
-  "version": "1.0.219",
+  "version": "1.0.222",
   "type": "module",
   "scripts": {
     "dev": "bun run src/index.ts",

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/ui",
-  "version": "1.0.219",
+  "version": "1.0.222",
   "type": "module",
   "exports": {
     "./*": "./src/components/*.tsx",

packages/ui/src/components/basic-tool.css

@@ -36,12 +36,12 @@
     display: flex;
     align-items: center;
     gap: 8px;
-    white-space: nowrap;
+    min-width: 0;
     overflow: hidden;
-    text-overflow: ellipsis;
   }
 
   [data-slot="basic-tool-tool-title"] {
+    flex-shrink: 0;
     font-family: var(--font-family-sans);
     font-size: var(--font-size-small);
     font-style: normal;
@@ -56,6 +56,11 @@
   }
 
   [data-slot="basic-tool-tool-subtitle"] {
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     font-family: var(--font-family-sans);
     font-size: var(--font-size-small);
     font-style: normal;
@@ -66,6 +71,11 @@
   }
 
   [data-slot="basic-tool-tool-arg"] {
+    flex-shrink: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
     font-family: var(--font-family-sans);
     font-size: var(--font-size-small);
     font-style: normal;

packages/ui/src/components/code.tsx

@@ -1,7 +1,7 @@
 import { type FileContents, File, FileOptions, LineAnnotation } from "@pierre/diffs"
 import { ComponentProps, createEffect, createMemo, splitProps } from "solid-js"
 import { createDefaultOptions, styleVariables } from "../pierre"
-import { workerPool } from "../pierre/worker"
+import { getWorkerPool } from "../pierre/worker"
 
 export type CodeProps<T = {}> = FileOptions<T> & {
   file: FileContents
@@ -21,7 +21,7 @@ export function Code<T>(props: CodeProps<T>) {
           ...createDefaultOptions<T>("unified"),
           ...others,
         },
-        workerPool,
+        getWorkerPool("unified"),
       ),
   )
 

packages/ui/src/components/collapsible.css

@@ -38,14 +38,12 @@
     }
 
     [data-slot="collapsible-arrow"] {
+      flex-shrink: 0;
       width: 24px;
       height: 24px;
       display: flex;
       align-items: center;
       justify-content: center;
-
-      /* [data-slot="collapsible-arrow-icon"] { */
-      /* } */
     }
   }
 

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

@@ -13,7 +13,7 @@ export function Diff<T>(props: SSRDiffProps<T>) {
   let container!: HTMLDivElement
   let fileDiffRef!: HTMLElement
   const [local, others] = splitProps(props, ["before", "after", "class", "classList", "annotations"])
-  const workerPool = useWorkerPool()
+  const workerPool = useWorkerPool(props.diffStyle)
 
   let fileDiffInstance: FileDiff<T> | undefined
   const cleanupFunctions: Array<() => void> = []

packages/ui/src/components/diff.tsx

@@ -1,7 +1,7 @@
 import { FileDiff } from "@pierre/diffs"
 import { createEffect, createMemo, onCleanup, splitProps } from "solid-js"
 import { createDefaultOptions, type DiffProps, styleVariables } from "../pierre"
-import { workerPool } from "../pierre/worker"
+import { getWorkerPool } from "../pierre/worker"
 
 // interface ThreadMetadata {
 //   threadId: string
@@ -20,26 +20,23 @@ export function Diff<T>(props: DiffProps<T>) {
           ...createDefaultOptions(props.diffStyle),
           ...others,
         },
-        workerPool,
+        getWorkerPool(props.diffStyle),
       ),
   )
 
-  const cleanupFunctions: Array<() => void> = []
-
   createEffect(() => {
+    const diff = fileDiff()
     container.innerHTML = ""
-    fileDiff().render({
+    diff.render({
       oldFile: local.before,
       newFile: local.after,
       lineAnnotations: local.annotations,
       containerWrapper: container,
     })
-  })
 
-  onCleanup(() => {
-    // Clean up FileDiff event handlers and dispose SolidJS components
-    fileDiff()?.cleanUp()
-    cleanupFunctions.forEach((dispose) => dispose())
+    onCleanup(() => {
+      diff.cleanUp()
+    })
   })
 
   return <div data-component="diff" style={styleVariables} ref={container} />

packages/ui/src/components/icon.tsx

@@ -12,6 +12,7 @@ const icons = {
   "chevron-down": `<path d="M6.6665 8.33325L9.99984 11.6666L13.3332 8.33325" stroke="currentColor" stroke-linecap="square"/>`,
   "chevron-right": `<path d="M8.33301 13.3327L11.6663 9.99935L8.33301 6.66602" stroke="currentColor" stroke-linecap="square"/>`,
   "chevron-grabber-vertical": `<path d="M6.66675 12.4998L10.0001 15.8332L13.3334 12.4998M6.66675 7.49984L10.0001 4.1665L13.3334 7.49984" stroke="currentColor" stroke-linecap="square"/>`,
+  "chevron-double-right": `<path d="M11.6654 13.3346L14.9987 10.0013L11.6654 6.66797M5.83203 13.3346L9.16536 10.0013L5.83203 6.66797" stroke="currentColor" stroke-linecap="square"/>`,
   "circle-x": `<path fill-rule="evenodd" clip-rule="evenodd" d="M1.6665 10.0003C1.6665 5.39795 5.39746 1.66699 9.99984 1.66699C14.6022 1.66699 18.3332 5.39795 18.3332 10.0003C18.3332 14.6027 14.6022 18.3337 9.99984 18.3337C5.39746 18.3337 1.6665 14.6027 1.6665 10.0003ZM7.49984 6.91107L6.91058 7.50033L9.41058 10.0003L6.91058 12.5003L7.49984 13.0896L9.99984 10.5896L12.4998 13.0896L13.0891 12.5003L10.5891 10.0003L13.0891 7.50033L12.4998 6.91107L9.99984 9.41107L7.49984 6.91107Z" fill="currentColor"/>`,
   close: `<path d="M3.75 3.75L16.25 16.25M16.25 3.75L3.75 16.25" stroke="currentColor" stroke-linecap="square"/>`,
   checklist: `<path d="M9.58342 13.7498H17.0834M9.58342 6.24984H17.0834M2.91675 6.6665L4.58341 7.9165L7.08341 4.1665M2.91675 14.1665L4.58341 15.4165L7.08341 11.6665" stroke="currentColor" stroke-linecap="square"/>`,
@@ -57,6 +58,7 @@ const icons = {
   share: `<path d="M10.0013 12.0846L10.0013 3.33464M13.7513 6.66797L10.0013 2.91797L6.2513 6.66797M17.0846 10.418V17.0846H2.91797V10.418" stroke="currentColor" stroke-linecap="square"/>`,
   download: `<path d="M13.9583 10.6257L10 14.584L6.04167 10.6257M10 2.08398V13.959M16.25 17.9173H3.75" stroke="currentColor" stroke-linecap="square"/>`,
   menu: `<path d="M2.5 5H17.5M2.5 10H17.5M2.5 15H17.5" stroke="currentColor" stroke-linecap="square"/>`,
+  server: `<rect x="3.35547" y="1.92969" width="13.2857" height="16.1429" stroke="currentColor"/><rect x="3.35547" y="11.9297" width="13.2857" height="6.14286" stroke="currentColor"/><rect x="12.8555" y="14.2852" width="1.42857" height="1.42857" fill="currentColor"/><rect x="10" y="14.2852" width="1.42857" height="1.42857" fill="currentColor"/>`,
 }
 
 export interface IconProps extends ComponentProps<"svg"> {

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

@@ -78,10 +78,9 @@
   [data-slot="user-message-text"] {
     white-space: pre-wrap;
     overflow: hidden;
-    background: var(--surface-inset-base);
-    padding: 6px 12px;
+    background: var(--surface-base);
+    padding: 8px 12px;
     border-radius: 4px;
-    border: 0.5px solid var(--border-weak-base);
   }
 
   .text-text-strong {
@@ -386,6 +385,7 @@
 [data-component="write-content"],
 [data-component="todos"],
 [data-component="diagnostics"] {
+  -webkit-user-select: text;
   user-select: text;
 }
 
@@ -469,14 +469,6 @@
   background-color: var(--surface-raised-strong);
   border-radius: 0 0 6px 6px;
 
-  [data-slot="permission-message"] {
-    display: none;
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large);
-  }
-
   [data-slot="permission-actions"] {
     display: flex;
     align-items: center;

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

@@ -12,6 +12,7 @@ import {
 } from "solid-js"
 import { Dynamic } from "solid-js/web"
 import {
+  AgentPart,
   AssistantMessage,
   FilePart,
   Message as MessageType,
@@ -300,6 +301,8 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
     }),
   )
 
+  const agents = createMemo(() => (props.parts?.filter((p) => p.type === "agent") as AgentPart[]) ?? [])
+
   const openImagePreview = (url: string, alt?: string) => {
     dialog.show(() => <ImagePreview src={url} alt={alt} />)
   }
@@ -337,33 +340,40 @@ export function UserMessageDisplay(props: { message: UserMessage; parts: PartTyp
       </Show>
       <Show when={text()}>
         <div data-slot="user-message-text">
-          <HighlightedText text={text()} references={inlineFiles()} />
+          <HighlightedText text={text()} references={inlineFiles()} agents={agents()} />
         </div>
       </Show>
     </div>
   )
 }
 
-function HighlightedText(props: { text: string; references: FilePart[] }) {
+type HighlightSegment = { text: string; type?: "file" | "agent" }
+
+function HighlightedText(props: { text: string; references: FilePart[]; agents: AgentPart[] }) {
   const segments = createMemo(() => {
     const text = props.text
-    const refs = [...props.references].sort((a, b) => (a.source?.text?.start ?? 0) - (b.source?.text?.start ?? 0))
 
-    const result: { text: string; highlight?: boolean }[] = []
+    const allRefs: { start: number; end: number; type: "file" | "agent" }[] = [
+      ...props.references
+        .filter((r) => r.source?.text?.start !== undefined && r.source?.text?.end !== undefined)
+        .map((r) => ({ start: r.source!.text!.start, end: r.source!.text!.end, type: "file" as const })),
+      ...props.agents
+        .filter((a) => a.source?.start !== undefined && a.source?.end !== undefined)
+        .map((a) => ({ start: a.source!.start, end: a.source!.end, type: "agent" as const })),
+    ].sort((a, b) => a.start - b.start)
+
+    const result: HighlightSegment[] = []
     let lastIndex = 0
 
-    for (const ref of refs) {
-      const start = ref.source?.text?.start
-      const end = ref.source?.text?.end
+    for (const ref of allRefs) {
+      if (ref.start < lastIndex) continue
 
-      if (start === undefined || end === undefined || start < lastIndex) continue
-
-      if (start > lastIndex) {
-        result.push({ text: text.slice(lastIndex, start) })
+      if (ref.start > lastIndex) {
+        result.push({ text: text.slice(lastIndex, ref.start) })
       }
 
-      result.push({ text: text.slice(start, end), highlight: true })
-      lastIndex = end
+      result.push({ text: text.slice(ref.start, ref.end), type: ref.type })
+      lastIndex = ref.end
     }
 
     if (lastIndex < text.length) {
@@ -375,7 +385,16 @@ function HighlightedText(props: { text: string; references: FilePart[] }) {
 
   return (
     <For each={segments()}>
-      {(segment) => <span classList={{ "text-text-strong font-medium": segment.highlight }}>{segment.text}</span>}
+      {(segment) => (
+        <span
+          classList={{
+            "text-syntax-property": segment.type === "file",
+            "text-syntax-type": segment.type === "agent",
+          }}
+        >
+          {segment.text}
+        </span>
+      )}
     </For>
   )
 }
@@ -520,22 +539,19 @@ PART_MAPPING["tool"] = function ToolPartDisplay(props) {
         </Match>
       </Switch>
       <Show when={showPermission() && permission()}>
-        {(perm) => (
-          <div data-component="permission-prompt">
-            <div data-slot="permission-message">{perm().title}</div>
-            <div data-slot="permission-actions">
-              <Button variant="ghost" size="small" onClick={() => respond("reject")}>
-                Deny
-              </Button>
-              <Button variant="secondary" size="small" onClick={() => respond("always")}>
-                Allow always
-              </Button>
-              <Button variant="primary" size="small" onClick={() => respond("once")}>
-                Allow once
-              </Button>
-            </div>
+        <div data-component="permission-prompt">
+          <div data-slot="permission-actions">
+            <Button variant="ghost" size="small" onClick={() => respond("reject")}>
+              Deny
+            </Button>
+            <Button variant="secondary" size="small" onClick={() => respond("always")}>
+              Allow always
+            </Button>
+            <Button variant="primary" size="small" onClick={() => respond("once")}>
+              Allow once
+            </Button>
           </div>
-        )}
+        </div>
       </Show>
     </div>
   )
@@ -639,7 +655,7 @@ ToolRegistry.register({
 ToolRegistry.register({
   name: "grep",
   render(props) {
-    const args = []
+    const args: string[] = []
     if (props.input.pattern) args.push("pattern=" + props.input.pattern)
     if (props.input.include) args.push("include=" + props.input.include)
     return (
@@ -768,40 +784,37 @@ ToolRegistry.register({
       <div data-component="tool-part-wrapper" data-permission={!!childPermission()}>
         <Switch>
           <Match when={childPermission()}>
-            {(perm) => (
-              <>
-                <Show
-                  when={childToolPart()}
-                  fallback={
-                    <BasicTool
-                      icon="task"
-                      defaultOpen={true}
-                      trigger={{
-                        title: `${props.input.subagent_type || props.tool} Agent`,
-                        titleClass: "capitalize",
-                        subtitle: props.input.description,
-                      }}
-                    />
-                  }
-                >
-                  {renderChildToolPart()}
-                </Show>
-                <div data-component="permission-prompt">
-                  <div data-slot="permission-message">{perm().title}</div>
-                  <div data-slot="permission-actions">
-                    <Button variant="ghost" size="small" onClick={() => respond("reject")}>
-                      Deny
-                    </Button>
-                    <Button variant="secondary" size="small" onClick={() => respond("always")}>
-                      Allow always
-                    </Button>
-                    <Button variant="primary" size="small" onClick={() => respond("once")}>
-                      Allow once
-                    </Button>
-                  </div>
+            <>
+              <Show
+                when={childToolPart()}
+                fallback={
+                  <BasicTool
+                    icon="task"
+                    defaultOpen={true}
+                    trigger={{
+                      title: `${props.input.subagent_type || props.tool} Agent`,
+                      titleClass: "capitalize",
+                      subtitle: props.input.description,
+                    }}
+                  />
+                }
+              >
+                {renderChildToolPart()}
+              </Show>
+              <div data-component="permission-prompt">
+                <div data-slot="permission-actions">
+                  <Button variant="ghost" size="small" onClick={() => respond("reject")}>
+                    Deny
+                  </Button>
+                  <Button variant="secondary" size="small" onClick={() => respond("always")}>
+                    Allow always
+                  </Button>
+                  <Button variant="primary" size="small" onClick={() => respond("once")}>
+                    Allow once
+                  </Button>
                 </div>
-              </>
-            )}
+              </div>
+            </>
           </Match>
           <Match when={true}>
             <BasicTool

packages/ui/src/components/radio-group.css

@@ -7,7 +7,7 @@
     all: unset;
     background-color: var(--surface-base);
     border-radius: var(--radius-md);
-    box-shadow: inset 0 0 0 1px var(--border-weak-base);
+    box-shadow: var(--shadow-xs-border);
     margin: 0;
     padding: 0;
     position: relative;
@@ -23,10 +23,7 @@
   [data-slot="radio-group-indicator"] {
     background: var(--button-secondary-base);
     border-radius: var(--radius-md);
-    box-shadow:
-      var(--shadow-xs),
-      inset 0 0 0 var(--indicator-focus-width, 0px) var(--border-selected),
-      inset 0 0 0 1px var(--border-base);
+    box-shadow: var(--shadow-xs-border);
     content: "";
     opacity: var(--indicator-opacity, 1);
     position: absolute;
@@ -115,7 +112,7 @@
   /* Focus state */
   [data-slot="radio-group-wrapper"]:has([data-slot="radio-group-item-input"]:focus-visible)
     [data-slot="radio-group-indicator"] {
-    --indicator-focus-width: 2px;
+    box-shadow: var(--shadow-xs-border-focus);
   }
 
   /* Hide indicator when nothing is checked */

packages/ui/src/components/session-review.css

@@ -66,6 +66,7 @@
   }
 
   [data-slot="accordion-content"] {
+    -webkit-user-select: text;
     user-select: text;
   }
 

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

@@ -1,5 +1,6 @@
 import { Accordion } from "./accordion"
 import { Button } from "./button"
+import { RadioGroup } from "./radio-group"
 import { DiffChanges } from "./diff-changes"
 import { FileIcon } from "./file-icon"
 import { Icon } from "./icon"
@@ -13,8 +14,12 @@ import { PreloadMultiFileDiffResult } from "@pierre/diffs/ssr"
 import { Dynamic } from "solid-js/web"
 import { checksum } from "@opencode-ai/util/encode"
 
+export type SessionReviewDiffStyle = "unified" | "split"
+
 export interface SessionReviewProps {
   split?: boolean
+  diffStyle?: SessionReviewDiffStyle
+  onDiffStyleChange?: (diffStyle: SessionReviewDiffStyle) => void
   class?: string
   classList?: Record<string, boolean | undefined>
   classes?: { root?: string; header?: string; container?: string }
@@ -28,6 +33,8 @@ export const SessionReview = (props: SessionReviewProps) => {
     open: props.diffs.length > 10 ? [] : props.diffs.map((d) => d.file),
   })
 
+  const diffStyle = () => props.diffStyle ?? (props.split ? "split" : "unified")
+
   const handleChange = (open: string[]) => {
     setStore("open", open)
   }
@@ -60,6 +67,15 @@ export const SessionReview = (props: SessionReviewProps) => {
       >
         <div data-slot="session-review-title">Session changes</div>
         <div data-slot="session-review-actions">
+          <Show when={props.onDiffStyleChange}>
+            <RadioGroup
+              options={["unified", "split"] as const}
+              current={diffStyle()}
+              value={(style) => style}
+              label={(style) => (style === "unified" ? "Unified" : "Split")}
+              onSelect={(style) => style && props.onDiffStyleChange?.(style)}
+            />
+          </Show>
           <Button size="normal" icon="chevron-grabber-vertical" onClick={handleExpandOrCollapseAll}>
             <Switch>
               <Match when={store.open.length > 0}>Collapse all</Match>
@@ -102,7 +118,7 @@ export const SessionReview = (props: SessionReviewProps) => {
                   <Dynamic
                     component={diffComponent}
                     preloadedDiff={diff.preloaded}
-                    diffStyle={props.split ? "split" : "unified"}
+                    diffStyle={diffStyle()}
                     before={{
                       name: diff.file!,
                       contents: diff.before!,

packages/ui/src/components/session-turn.css

@@ -118,6 +118,7 @@
 
   [data-slot="session-turn-markdown"],
   [data-slot="session-turn-accordion"] [data-slot="accordion-content"] {
+    -webkit-user-select: text;
     user-select: text;
   }
 

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

@@ -321,11 +321,10 @@ export function SessionTurn(
     return s
   })
 
-  const summary = createMemo(() => message()?.summary?.body)
   const response = createMemo(() => lastTextPart()?.text)
   const responsePartId = createMemo(() => lastTextPart()?.id)
   const hasDiffs = createMemo(() => message()?.summary?.diffs?.length)
-  const hideResponsePart = createMemo(() => !working() && !summary() && !!responsePartId())
+  const hideResponsePart = createMemo(() => !working() && !!responsePartId())
 
   function duration() {
     const msg = message()
@@ -356,7 +355,6 @@ export function SessionTurn(
     retrySeconds: 0,
     status: rawStatus(),
     duration: duration(),
-    summaryWaitTimedOut: false,
   })
 
   createEffect(() => {
@@ -397,12 +395,6 @@ export function SessionTurn(
     onCleanup(() => clearInterval(timer))
   })
 
-  createEffect(() => {
-    if (working()) {
-      setStore("summaryWaitTimedOut", false)
-    }
-  })
-
   createEffect(
     on(permissionCount, (count, prev) => {
       if (!count) return
@@ -411,42 +403,6 @@ export function SessionTurn(
     }),
   )
 
-  createEffect(() => {
-    if (working() || !isLastUserMessage()) return
-
-    const diffs = message()?.summary?.diffs
-    if (!diffs?.length) return
-    if (summary()) return
-    if (store.summaryWaitTimedOut) return
-
-    const completed = lastAssistantMessage()?.time.completed
-    if (completed && Date.now() - completed > 2000) {
-      setStore("summaryWaitTimedOut", true)
-      return
-    }
-
-    const timer = setTimeout(() => {
-      setStore("summaryWaitTimedOut", true)
-    }, 6000)
-    onCleanup(() => clearTimeout(timer))
-  })
-
-  const waitingForSummary = createMemo(() => {
-    if (!isLastUserMessage()) return false
-    if (working()) return false
-
-    const diffs = message()?.summary?.diffs
-    if (!diffs?.length) return false
-    if (summary()) return false
-
-    return !store.summaryWaitTimedOut
-  })
-
-  const showSummarySection = createMemo(() => {
-    if (working()) return false
-    return !waitingForSummary()
-  })
-
   let lastStatusChange = Date.now()
   let statusTimeout: number | undefined
   createEffect(() => {
@@ -523,7 +479,7 @@ export function SessionTurn(
                           size="small"
                           onClick={props.onStepsExpandedToggle ?? (() => {})}
                         >
-                          <Show when={working() || waitingForSummary()}>
+                          <Show when={working()}>
                             <Spinner />
                           </Show>
                           <Switch>
@@ -540,7 +496,6 @@ export function SessionTurn(
                               </span>
                               <span data-slot="session-turn-retry-attempt">(#{retry()?.attempt})</span>
                             </Match>
-                            <Match when={waitingForSummary()}>Generating summary</Match>
                             <Match when={working()}>{store.status ?? "Considering next steps"}</Match>
                             <Match when={props.stepsExpanded}>Hide steps</Match>
                             <Match when={!props.stepsExpanded}>Show steps</Match>
@@ -580,36 +535,12 @@ export function SessionTurn(
                         </For>
                       </div>
                     </Show>
-                    {/* Summary */}
-                    <Show when={showSummarySection()}>
+                    {/* Response */}
+                    <Show when={!working() && (response() || hasDiffs())}>
                       <div data-slot="session-turn-summary-section">
                         <div data-slot="session-turn-summary-header">
-                          <Switch>
-                            <Match when={summary()}>
-                              {(summary) => (
-                                <>
-                                  <h2 data-slot="session-turn-summary-title">Summary</h2>
-                                  <Markdown
-                                    data-slot="session-turn-markdown"
-                                    data-diffs={hasDiffs()}
-                                    text={summary()}
-                                  />
-                                </>
-                              )}
-                            </Match>
-                            <Match when={response()}>
-                              {(response) => (
-                                <>
-                                  <h2 data-slot="session-turn-summary-title">Response</h2>
-                                  <Markdown
-                                    data-slot="session-turn-markdown"
-                                    data-diffs={hasDiffs()}
-                                    text={response()}
-                                  />
-                                </>
-                              )}
-                            </Match>
-                          </Switch>
+                          <h2 data-slot="session-turn-summary-title">Response</h2>
+                          <Markdown data-slot="session-turn-markdown" data-diffs={hasDiffs()} text={response() ?? ""} />
                         </div>
                         <Accordion data-slot="session-turn-accordion" multiple>
                           <For each={msg().summary?.diffs ?? []}>

packages/ui/src/components/tooltip.css

@@ -2,15 +2,29 @@
   display: flex;
 }
 
+[data-slot="tooltip-keybind"] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+[data-slot="tooltip-keybind-key"] {
+  color: var(--text-invert-base);
+  font-size: var(--font-size-small);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--line-height-large);
+}
+
 [data-component="tooltip"] {
   z-index: 1000;
   max-width: 320px;
   border-radius: var(--radius-md);
   background-color: var(--surface-float-base);
-  color: var(--text-inverted-base);
-  color: rgba(253, 252, 252, 0.94);
-  padding: 2px 8px;
-  border: 0.5px solid rgba(253, 252, 252, 0.2);
+  color: var(--text-invert-strong);
+  background: var(--surface-float-base);
+  padding: 6px 12px;
+  border: 1px solid var(--border-weak-base, rgba(0, 0, 0, 0.07));
+
   box-shadow: var(--shadow-md);
   pointer-events: none !important;
   /* transition: all 150ms ease-out; */

packages/ui/src/components/tooltip.tsx

@@ -8,6 +8,26 @@ export interface TooltipProps extends ComponentProps<typeof KobalteTooltip> {
   inactive?: boolean
 }
 
+export interface TooltipKeybindProps extends Omit<TooltipProps, "value"> {
+  title: string
+  keybind: string
+}
+
+export function TooltipKeybind(props: TooltipKeybindProps) {
+  const [local, others] = splitProps(props, ["title", "keybind"])
+  return (
+    <Tooltip
+      {...others}
+      value={
+        <div data-slot="tooltip-keybind">
+          <span>{local.title}</span>
+          <span data-slot="tooltip-keybind-key">{local.keybind}</span>
+        </div>
+      }
+    />
+  )
+}
+
 export function Tooltip(props: TooltipProps) {
   const [open, setOpen] = createSignal(false)
   const [local, others] = splitProps(props, ["children", "class", "inactive"])

packages/ui/src/context/worker-pool.tsx

@@ -1,10 +1,20 @@
 import type { WorkerPoolManager } from "@pierre/diffs/worker"
 import { createSimpleContext } from "./helper"
 
-const ctx = createSimpleContext<WorkerPoolManager | undefined, { pool: WorkerPoolManager | undefined }>({
+export type WorkerPools = {
+  unified: WorkerPoolManager | undefined
+  split: WorkerPoolManager | undefined
+}
+
+const ctx = createSimpleContext<WorkerPools, { pools: WorkerPools }>({
   name: "WorkerPool",
-  init: (props) => props.pool,
+  init: (props) => props.pools,
 })
 
 export const WorkerPoolProvider = ctx.provider
-export const useWorkerPool = ctx.use
+
+export function useWorkerPool(diffStyle: "unified" | "split" | undefined) {
+  const pools = ctx.use()
+  if (diffStyle === "split") return pools.split
+  return pools.unified
+}

packages/ui/src/pierre/worker.ts

@@ -1,16 +1,15 @@
-import { getOrCreateWorkerPoolSingleton, WorkerPoolManager } from "@pierre/diffs/worker"
+import { WorkerPoolManager } from "@pierre/diffs/worker"
 import ShikiWorkerUrl from "@pierre/diffs/worker/worker.js?worker&url"
 
+export type WorkerPoolStyle = "unified" | "split"
+
 export function workerFactory(): Worker {
   return new Worker(ShikiWorkerUrl, { type: "module" })
 }
 
-export const workerPool: WorkerPoolManager | undefined = (() => {
-  if (typeof window === "undefined") {
-    return undefined
-  }
-  return getOrCreateWorkerPoolSingleton({
-    poolOptions: {
+function createPool(lineDiffType: "none" | "word-alt") {
+  const pool = new WorkerPoolManager(
+    {
       workerFactory,
       // poolSize defaults to 8. More workers = more parallelism but
       // also more memory. Too many can actually slow things down.
@@ -19,10 +18,34 @@ export const workerPool: WorkerPoolManager | undefined = (() => {
       // boot up time for workers
       poolSize: 2,
     },
-    highlighterOptions: {
+    {
       theme: "OpenCode",
-      // Optionally preload languages to avoid lazy-loading delays
-      // langs: ["typescript", "javascript", "css", "html"],
+      lineDiffType,
     },
-  })
-})()
+  )
+
+  pool.initialize()
+  return pool
+}
+
+let unified: WorkerPoolManager | undefined
+let split: WorkerPoolManager | undefined
+
+export function getWorkerPool(style: WorkerPoolStyle | undefined): WorkerPoolManager | undefined {
+  if (typeof window === "undefined") return
+
+  if (style === "split") {
+    if (!split) split = createPool("word-alt")
+    return split
+  }
+
+  if (!unified) unified = createPool("none")
+  return unified
+}
+
+export function getWorkerPools() {
+  return {
+    unified: getWorkerPool("unified"),
+    split: getWorkerPool("split"),
+  }
+}

packages/ui/src/styles/tailwind/colors.css

@@ -77,6 +77,10 @@
   --color-text-weaker: var(--text-weaker);
   --color-text-strong: var(--text-strong);
   --color-text-interactive-base: var(--text-interactive-base);
+  --color-text-invert-base: var(--text-invert-base);
+  --color-text-invert-weak: var(--text-invert-weak);
+  --color-text-invert-weaker: var(--text-invert-weaker);
+  --color-text-invert-strong: var(--text-invert-strong);
   --color-text-on-brand-base: var(--text-on-brand-base);
   --color-text-on-interactive-base: var(--text-on-interactive-base);
   --color-text-on-interactive-weak: var(--text-on-interactive-weak);

packages/ui/src/theme/themes/oc-1.json

@@ -314,9 +314,9 @@
       "surface-interactive-hover": "var(--cobalt-light-4)",
       "surface-interactive-weak": "var(--cobalt-light-2)",
       "surface-interactive-weak-hover": "var(--cobalt-light-3)",
-      "surface-success-base": "var(--apple-light-3)",
-      "surface-success-weak": "var(--apple-light-2)",
-      "surface-success-strong": "var(--apple-light-9)",
+      "surface-success-base": "var(--apple-dark-3)",
+      "surface-success-weak": "var(--apple-dark-2)",
+      "surface-success-strong": "var(--apple-dark-9)",
       "surface-warning-base": "var(--solaris-light-3)",
       "surface-warning-weak": "var(--solaris-light-2)",
       "surface-warning-strong": "var(--solaris-light-9)",
@@ -439,8 +439,8 @@
       "icon-strong-focus": "#fdfcfc",
       "icon-brand-base": "var(--white)",
       "icon-interactive-base": "var(--cobalt-dark-9)",
-      "icon-success-base": "var(--apple-dark-7)",
-      "icon-success-hover": "var(--apple-dark-8)",
+      "icon-success-base": "var(--apple-dark-9)",
+      "icon-success-hover": "var(--apple-dark-10)",
       "icon-success-active": "var(--apple-dark-11)",
       "icon-warning-base": "var(--amber-dark-7)",
       "icon-warning-hover": "var(--amber-dark-8)",

packages/util/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencode-ai/util",
-  "version": "1.0.219",
+  "version": "1.0.222",
   "private": true,
   "type": "module",
   "exports": {

packages/web/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@opencode-ai/web",
   "type": "module",
-  "version": "1.0.219",
+  "version": "1.0.222",
   "scripts": {
     "dev": "astro dev",
     "dev:remote": "VITE_API_URL=https://api.opencode.ai astro dev",

packages/web/src/content/docs/cli.mdx

@@ -362,11 +362,12 @@ This starts an HTTP server that provides API access to opencode functionality wi
 
 #### Flags
 
-| Flag         | Description           |
-| ------------ | --------------------- |
-| `--port`     | Port to listen on     |
-| `--hostname` | Hostname to listen on |
-| `--mdns`     | Enable mDNS discovery |
+| Flag         | Description                                |
+| ------------ | ------------------------------------------ |
+| `--port`     | Port to listen on                          |
+| `--hostname` | Hostname to listen on                      |
+| `--mdns`     | Enable mDNS discovery                      |
+| `--cors`     | Additional browser origin(s) to allow CORS |
 
 ---
 
@@ -457,11 +458,12 @@ This starts an HTTP server and opens a web browser to access OpenCode through a
 
 #### Flags
 
-| Flag         | Description           |
-| ------------ | --------------------- |
-| `--port`     | Port to listen on     |
-| `--hostname` | Hostname to listen on |
-| `--mdns`     | Enable mDNS discovery |
+| Flag         | Description                                |
+| ------------ | ------------------------------------------ |
+| `--port`     | Port to listen on                          |
+| `--hostname` | Hostname to listen on                      |
+| `--mdns`     | Enable mDNS discovery                      |
+| `--cors`     | Additional browser origin(s) to allow CORS |
 
 ---
 

packages/web/src/content/docs/config.mdx

@@ -132,7 +132,8 @@ You can configure server settings for the `opencode serve` and `opencode web` co
   "server": {
     "port": 4096,
     "hostname": "0.0.0.0",
-    "mdns": true
+    "mdns": true,
+    "cors": ["http://localhost:5173"]
   }
 }
 ```
@@ -142,6 +143,7 @@ Available options:
 - `port` - Port to listen on.
 - `hostname` - Hostname to listen on. When `mdns` is enabled and no hostname is set, defaults to `0.0.0.0`.
 - `mdns` - Enable mDNS service discovery. This allows other devices on the network to discover your OpenCode server.
+- `cors` - Additional origins to allow for CORS when using the HTTP server from a browser-based client. Values must be full origins (scheme + host + optional port), eg `https://app.example.com`.
 
 [Learn more about the server here](/docs/server).
 

packages/web/src/content/docs/ecosystem.mdx

@@ -15,28 +15,29 @@ You can also check out [awesome-opencode](https://github.com/awesome-opencode/aw
 
 ## Plugins
 
-| Name                                                                                              | Description                                                                                    |
-| ------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
-| [opencode-helicone-session](https://github.com/H2Shami/opencode-helicone-session)                 | Automatically inject Helicone session headers for request grouping                             |
-| [opencode-skills](https://github.com/malhashemi/opencode-skills)                                  | Manage and organize OpenCode skills and capabilities                                           |
-| [opencode-type-inject](https://github.com/nick-vi/opencode-type-inject)                           | Auto-inject TypeScript/Svelte types into file reads with lookup tools                          |
-| [opencode-openai-codex-auth](https://github.com/numman-ali/opencode-openai-codex-auth)            | Use your ChatGPT Plus/Pro subscription instead of API credits                                  |
-| [opencode-gemini-auth](https://github.com/jenslys/opencode-gemini-auth)                           | Use your existing Gemini plan instead of API billing                                           |
-| [opencode-antigravity-auth](https://github.com/NoeFabris/opencode-antigravity-auth)               | Use Antigravity's free models instead of API billing                                           |
-| [opencode-google-antigravity-auth](https://github.com/shekohex/opencode-google-antigravity-auth)  | Google Antigravity OAuth Plugin, with support for Google Search, and more robust API handling  |
-| [opencode-dynamic-context-pruning](https://github.com/Tarquinen/opencode-dynamic-context-pruning) | Optimize token usage by pruning obsolete tool outputs                                          |
-| [opencode-websearch-cited](https://github.com/ghoulr/opencode-websearch-cited.git)                | Add native websearch support for supported providers with Google grounded style                |
-| [opencode-pty](https://github.com/shekohex/opencode-pty.git)                                      | Enables AI agents to run background processes in a PTY, send interactive input to them.        |
-| [opencode-shell-strategy](https://github.com/JRedeker/opencode-shell-strategy)                    | Instructions for non-interactive shell commands - prevents hangs from TTY-dependent operations |
-| [opencode-wakatime](https://github.com/angristan/opencode-wakatime)                               | Track OpenCode usage with Wakatime                                                             |
-| [opencode-md-table-formatter](https://github.com/franlol/opencode-md-table-formatter/tree/main)   | Clean up markdown tables produced by LLMs                                                      |
-| [opencode-morph-fast-apply](https://github.com/JRedeker/opencode-morph-fast-apply)                | 10x faster code editing with Morph Fast Apply API and lazy edit markers                        |
-| [oh-my-opencode](https://github.com/code-yeongyu/oh-my-opencode)                                  | Background agents, pre-built LSP/AST/MCP tools, curated agents, Claude Code compatible         |
-| [opencode-notificator](https://github.com/panta82/opencode-notificator)                           | Desktop notifications and sound alerts for OpenCode sessions                                   |
-| [opencode-notifier](https://github.com/mohak34/opencode-notifier)                                 | Desktop notifications and sound alerts for permission, completion, and error events            |
-| [opencode-zellij-namer](https://github.com/24601/opencode-zellij-namer)                           | AI-powered automatic Zellij session naming based on OpenCode context                           |
-| [opencode-skillful](https://github.com/zenobi-us/opencode-skillful)                               | Allow OpenCode agents to lazy load prompts on demand with skill discovery and injection        |
-| [opencode-supermemory](https://github.com/supermemoryai/opencode-supermemory)                     | Persistent memory across sessions using Supermemory                                            |
+| Name                                                                                               | Description                                                                                    |
+| -------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| [opencode-helicone-session](https://github.com/H2Shami/opencode-helicone-session)                  | Automatically inject Helicone session headers for request grouping                             |
+| [opencode-skills](https://github.com/malhashemi/opencode-skills)                                   | Manage and organize OpenCode skills and capabilities                                           |
+| [opencode-type-inject](https://github.com/nick-vi/opencode-type-inject)                            | Auto-inject TypeScript/Svelte types into file reads with lookup tools                          |
+| [opencode-openai-codex-auth](https://github.com/numman-ali/opencode-openai-codex-auth)             | Use your ChatGPT Plus/Pro subscription instead of API credits                                  |
+| [opencode-gemini-auth](https://github.com/jenslys/opencode-gemini-auth)                            | Use your existing Gemini plan instead of API billing                                           |
+| [opencode-antigravity-auth](https://github.com/NoeFabris/opencode-antigravity-auth)                | Use Antigravity's free models instead of API billing                                           |
+| [opencode-google-antigravity-auth](https://github.com/shekohex/opencode-google-antigravity-auth)   | Google Antigravity OAuth Plugin, with support for Google Search, and more robust API handling  |
+| [opencode-dynamic-context-pruning](https://github.com/Tarquinen/opencode-dynamic-context-pruning)  | Optimize token usage by pruning obsolete tool outputs                                          |
+| [opencode-websearch-cited](https://github.com/ghoulr/opencode-websearch-cited.git)                 | Add native websearch support for supported providers with Google grounded style                |
+| [opencode-pty](https://github.com/shekohex/opencode-pty.git)                                       | Enables AI agents to run background processes in a PTY, send interactive input to them.        |
+| [opencode-shell-strategy](https://github.com/JRedeker/opencode-shell-strategy)                     | Instructions for non-interactive shell commands - prevents hangs from TTY-dependent operations |
+| [opencode-wakatime](https://github.com/angristan/opencode-wakatime)                                | Track OpenCode usage with Wakatime                                                             |
+| [opencode-md-table-formatter](https://github.com/franlol/opencode-md-table-formatter/tree/main)    | Clean up markdown tables produced by LLMs                                                      |
+| [opencode-morph-fast-apply](https://github.com/JRedeker/opencode-morph-fast-apply)                 | 10x faster code editing with Morph Fast Apply API and lazy edit markers                        |
+| [oh-my-opencode](https://github.com/code-yeongyu/oh-my-opencode)                                   | Background agents, pre-built LSP/AST/MCP tools, curated agents, Claude Code compatible         |
+| [opencode-notificator](https://github.com/panta82/opencode-notificator)                            | Desktop notifications and sound alerts for OpenCode sessions                                   |
+| [opencode-notifier](https://github.com/mohak34/opencode-notifier)                                  | Desktop notifications and sound alerts for permission, completion, and error events            |
+| [opencode-zellij-namer](https://github.com/24601/opencode-zellij-namer)                            | AI-powered automatic Zellij session naming based on OpenCode context                           |
+| [opencode-skillful](https://github.com/zenobi-us/opencode-skillful)                                | Allow OpenCode agents to lazy load prompts on demand with skill discovery and injection        |
+| [opencode-supermemory](https://github.com/supermemoryai/opencode-supermemory)                      | Persistent memory across sessions using Supermemory                                            |
+| [@plannotator/opencode](https://github.com/backnotprop/plannotator/tree/main/apps/opencode-plugin) | Interactive plan review with visual annotation and private/offline sharing                     |
 
 ---
 

packages/web/src/content/docs/server.mdx

@@ -13,16 +13,23 @@ The `opencode serve` command runs a headless HTTP server that exposes an OpenAPI
 ### Usage
 
 ```bash
-opencode serve [--port <number>] [--hostname <string>]
+opencode serve [--port <number>] [--hostname <string>] [--cors <origin>]
 ```
 
 #### Options
 
-| Flag         | Description           | Default     |
-| ------------ | --------------------- | ----------- |
-| `--port`     | Port to listen on     | `4096`      |
-| `--hostname` | Hostname to listen on | `127.0.0.1` |
-| `--mdns`     | Enable mDNS discovery | `false`     |
+| Flag         | Description                         | Default     |
+| ------------ | ----------------------------------- | ----------- |
+| `--port`     | Port to listen on                   | `4096`      |
+| `--hostname` | Hostname to listen on               | `127.0.0.1` |
+| `--mdns`     | Enable mDNS discovery               | `false`     |
+| `--cors`     | Additional browser origins to allow | `[]`        |
+
+`--cors` can be passed multiple times:
+
+```bash
+opencode serve --cors http://localhost:5173 --cors https://app.example.com
+```
 
 ---
 

script/changelog.ts

@@ -64,7 +64,7 @@ export async function getCommits(from: string, to: string): Promise<Commit[]> {
     const areas = new Set<string>()
 
     for (const file of files.split("\n").filter(Boolean)) {
-      if (file.startsWith("packages/opencode/src/cli/cmd/tui/")) areas.add("tui")
+      if (file.startsWith("packages/opencode/src/cli/cmd/")) areas.add("tui")
       else if (file.startsWith("packages/opencode/")) areas.add("core")
       else if (file.startsWith("packages/desktop/src-tauri/")) areas.add("tauri")
       else if (file.startsWith("packages/desktop/")) areas.add("app")

sdks/vscode/package.json

@@ -2,7 +2,7 @@
   "name": "opencode",
   "displayName": "opencode",
   "description": "opencode for VS Code",
-  "version": "1.0.219",
+  "version": "1.0.222",
   "publisher": "sst-dev",
   "repository": {
     "type": "git",