fix(core): clarify Code Mode tool boundary

fix(ai): retry transient client statuses
2026-07-29 14:41:48 -04:00 · 2026-07-29 11:46:26 -05:00 · 2026-07-28 14:19:42 -05:00
119 changed files with 2882 additions and 3914 deletions
@@ -1,16 +0,0 @@
-import type { Context } from "../../../packages/plugin/src/tui/context"
-
-export default {
-  id: "test.tui-discovery-smoke",
-  setup(context: Context) {
-    const timer = setTimeout(() => {
-      context.ui.toast.show({
-        title: "TUI plugin discovery works",
-        message: "Loaded .opencode/plugins/tui/discovery-smoke.ts",
-        variant: "success",
-        duration: 30_000,
-      })
-    }, 1_000)
-    return () => clearTimeout(timer)
-  },
-}
@@ -147,11 +147,6 @@
        "ws": "8.21.0",
      },
      "devDependencies": {
-        "@ff-labs/fff-bin-darwin-arm64": "0.10.1",
-        "@ff-labs/fff-bin-linux-arm64-gnu": "0.10.1",
-        "@ff-labs/fff-bin-linux-x64-gnu": "0.10.1",
-        "@ff-labs/fff-bin-win32-arm64": "0.10.1",
-        "@ff-labs/fff-bin-win32-x64": "0.10.1",
        "@lydell/node-pty-darwin-arm64": "1.2.0-beta.12",
        "@lydell/node-pty-darwin-x64": "1.2.0-beta.12",
        "@lydell/node-pty-linux-arm64": "1.2.0-beta.12",
@@ -169,11 +164,6 @@
        "@types/bun": "catalog:",
        "@types/semver": "catalog:",
        "@typescript/native-preview": "catalog:",
-        "@yuuang/ffi-rs-darwin-arm64": "1.3.2",
-        "@yuuang/ffi-rs-linux-arm64-gnu": "1.3.2",
-        "@yuuang/ffi-rs-linux-x64-gnu": "1.3.2",
-        "@yuuang/ffi-rs-win32-arm64-msvc": "1.3.2",
-        "@yuuang/ffi-rs-win32-x64-msvc": "1.3.2",
        "vite": "catalog:",
        "vite-plugin-solid": "catalog:",
      },
@@ -374,7 +364,6 @@
        "@effect/platform-node": "catalog:",
        "@effect/sql-sqlite-bun": "catalog:",
        "@ff-labs/fff-bun": "0.10.1",
-        "@ff-labs/fff-node": "0.10.1",
        "@lydell/node-pty": "catalog:",
        "@modelcontextprotocol/sdk": "1.29.0",
        "@opencode-ai/ai": "workspace:*",
@@ -607,20 +596,17 @@
        "@tsconfig/node22": "catalog:",
        "@types/node": "catalog:",
        "@typescript/native-preview": "catalog:",
-        "solid-js": "catalog:",
        "typescript": "catalog:",
      },
      "peerDependencies": {
        "@opentui/core": ">=0.4.5",
        "@opentui/keymap": ">=0.4.5",
        "@opentui/solid": ">=0.4.5",
-        "solid-js": ">=1.9.0",
      },
      "optionalPeers": [
        "@opentui/core",
        "@opentui/keymap",
        "@opentui/solid",
-        "solid-js",
      ],
    },
    "packages/protocol": {
@@ -1707,8 +1693,6 @@

    "@ff-labs/fff-bun": ["@ff-labs/fff-bun@0.10.1", "", { "optionalDependencies": { "@ff-labs/fff-bin-android-arm64": "0.10.1", "@ff-labs/fff-bin-darwin-arm64": "0.10.1", "@ff-labs/fff-bin-darwin-x64": "0.10.1", "@ff-labs/fff-bin-linux-arm64-gnu": "0.10.1", "@ff-labs/fff-bin-linux-arm64-musl": "0.10.1", "@ff-labs/fff-bin-linux-x64-gnu": "0.10.1", "@ff-labs/fff-bin-linux-x64-musl": "0.10.1", "@ff-labs/fff-bin-win32-arm64": "0.10.1", "@ff-labs/fff-bin-win32-x64": "0.10.1" }, "os": [ "!aix", "!sunos", "!freebsd", "!openbsd", ], "cpu": [ "x64", "arm64", ] }, "sha512-9oUCxypGbf2q3vNfKZ31wdzt5KqjhA9S6TwQaFol/j1lkSHVGvtIa3RvdGHPs1UUuvR/MO7b6pHj054BR9bXPQ=="],

-    "@ff-labs/fff-node": ["@ff-labs/fff-node@0.10.1", "", { "dependencies": { "ffi-rs": "^1.0.0" }, "optionalDependencies": { "@ff-labs/fff-bin-android-arm64": "0.10.1", "@ff-labs/fff-bin-darwin-arm64": "0.10.1", "@ff-labs/fff-bin-darwin-x64": "0.10.1", "@ff-labs/fff-bin-linux-arm64-gnu": "0.10.1", "@ff-labs/fff-bin-linux-arm64-musl": "0.10.1", "@ff-labs/fff-bin-linux-x64-gnu": "0.10.1", "@ff-labs/fff-bin-linux-x64-musl": "0.10.1", "@ff-labs/fff-bin-win32-arm64": "0.10.1", "@ff-labs/fff-bin-win32-x64": "0.10.1" }, "os": [ "!aix", "!sunos", "!freebsd", "!openbsd", ], "cpu": [ "x64", "arm64", ] }, "sha512-I2TIWHkey4wpLCncUQymBz/yWrjp/TE91yjrPvSLaPMUMRf3wXwEmelGNnZ5ynxy3cUauYg5b5hsUwhOK4skfA=="],
-
    "@floating-ui/core": ["@floating-ui/core@1.8.0", "", { "dependencies": { "@floating-ui/utils": "^0.2.12" } }, "sha512-0CIZ5itps/8x7BG8dEIhs53BvCUH2PCoogtakwRTut+Arm58sJooJ0AuZhLw2HJYIR5cMLNPBSS728sPho2khQ=="],

    "@floating-ui/dom": ["@floating-ui/dom@1.8.0", "", { "dependencies": { "@floating-ui/core": "^1.8.0", "@floating-ui/utils": "^0.2.12" } }, "sha512-yXSrzeHZBTZadLOlfyhCkJHNeLJnHRnRInwdZ40L7ZiaAtrBwoYlsDrX3v5zB1Utk7CLfzcOVnVVWoXEky7Ceg=="],
@@ -3285,28 +3269,6 @@

    "@xmldom/xmldom": ["@xmldom/xmldom@0.8.13", "", {}, "sha512-KRYzxepc14G/CEpEGc3Yn+JKaAeT63smlDr+vjB8jRfgTBBI9wRj/nkQEO+ucV8p8I9bfKLWp37uHgFrbntPvw=="],

-    "@yuuang/ffi-rs-android-arm64": ["@yuuang/ffi-rs-android-arm64@1.3.2", "", { "os": "android", "cpu": "arm64" }, "sha512-eDYLT0kVBkp7e2BwdRDmt6N1rkeDPUHDefk3ZX0/nok+GLsqfy1WBoSL3Yg7HVXN1EyW8OBVc2uK8Zq8HbmaSA=="],
-
-    "@yuuang/ffi-rs-darwin-arm64": ["@yuuang/ffi-rs-darwin-arm64@1.3.2", "", { "os": "darwin", "cpu": "arm64" }, "sha512-kRdgPaOM6TfuC5wHUwstlatk4HNie2lwSLJWQL2LiAUIJ7+96CoiWUNVhwBcFrhdfxhnWenYS6F668CV0vit8Q=="],
-
-    "@yuuang/ffi-rs-darwin-x64": ["@yuuang/ffi-rs-darwin-x64@1.3.2", "", { "os": "darwin", "cpu": "x64" }, "sha512-O3AlVgre8FQcZRJe44Xs7A6iDLumoPXqbw40+eJCa2gyXaXyLPdHoWrS1W9rBCa1QZRRnG7zRulPVFw8C5uo8g=="],
-
-    "@yuuang/ffi-rs-linux-arm-gnueabihf": ["@yuuang/ffi-rs-linux-arm-gnueabihf@1.3.2", "", { "os": "linux", "cpu": "arm" }, "sha512-IXiNdTbIcTCPny5eeElijFWYeKSJjQWSjt9ZyJNdLHYiB1Np+XD6K7wNZS6EOMgMelhW1kQE62T654skGkVDIA=="],
-
-    "@yuuang/ffi-rs-linux-arm64-gnu": ["@yuuang/ffi-rs-linux-arm64-gnu@1.3.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-gWFO6xufUK9lPYUqDvKa6IR243dPqdetgl9Q7HrZWaDu7wLo06QQrosw8QTzndafQnOcBKm6LoLujmGCfTgJOA=="],
-
-    "@yuuang/ffi-rs-linux-arm64-musl": ["@yuuang/ffi-rs-linux-arm64-musl@1.3.2", "", { "os": "linux", "cpu": "arm64" }, "sha512-lejvOSqypPziQH5rzfkDlJ6e92qhWbDutE9ttOO6z5I2k83zoh9iZhZWhaXSU5VqgQpcshRkrbtXb9gy1ft5dA=="],
-
-    "@yuuang/ffi-rs-linux-x64-gnu": ["@yuuang/ffi-rs-linux-x64-gnu@1.3.2", "", { "os": "linux", "cpu": "x64" }, "sha512-s8VCFazaJKmgY2hgMTpWk4TtBY/zy5ovbaGgwyY0FvBD0YvyhcET4IrMsDJpHhFVTPCYfKZ1dN45clD/YiFp6g=="],
-
-    "@yuuang/ffi-rs-linux-x64-musl": ["@yuuang/ffi-rs-linux-x64-musl@1.3.2", "", { "os": "linux", "cpu": "x64" }, "sha512-Ahr5chfKZKWUik20bEZRug+be57LZ2yYrtolyjSRoo7A4ZniBUHBZUNWm6TD6i0CJayqyxWeVk/XiaABD8bY0w=="],
-
-    "@yuuang/ffi-rs-win32-arm64-msvc": ["@yuuang/ffi-rs-win32-arm64-msvc@1.3.2", "", { "os": "win32", "cpu": "arm64" }, "sha512-yhpLcj0qel5VNlpzxPZfNmi7+rEX8444QHjUP6WWLxdRfqPllROu/Cp3OpkBpw3BLdxfcDhWkjWMD5QsJN0Pvg=="],
-
-    "@yuuang/ffi-rs-win32-ia32-msvc": ["@yuuang/ffi-rs-win32-ia32-msvc@1.3.2", "", { "os": "win32", "cpu": [ "x64", "ia32", ] }, "sha512-BFVSbdtg/7mJBw5kQFOPKFiA+SF7z3240HpzHN81Umm4Bp4dWkyx0msYn8+Q7/BBJiLQ4F6bi3Nftk58YA9r9w=="],
-
-    "@yuuang/ffi-rs-win32-x64-msvc": ["@yuuang/ffi-rs-win32-x64-msvc@1.3.2", "", { "os": "win32", "cpu": "x64" }, "sha512-ZL5MJ76n2rjwGo26kCWW7wK6QT/cee00Rx8pfW79pz6vM6jqfhoE7zTnwFiw4aOQUes9+HUc5DeeJ3z+Vb9oLg=="],
-
    "@zip.js/zip.js": ["@zip.js/zip.js@2.7.62", "", {}, "sha512-OaLvZ8j4gCkLn048ypkZu29KX30r8/OfFF2w4Jo5WXFr+J04J+lzJ5TKZBVgFXhlvSkqNFQdfnY1Q8TMTCyBVA=="],

    "abbrev": ["abbrev@4.0.0", "", {}, "sha512-a1wflyaL0tHtJSmLSOVybYhy22vRih4eduhhrkcjgrWGnRfrZtovJ2FRjxuTtkkj47O/baf0R86QU5OuYpz8fA=="],
@@ -4071,8 +4033,6 @@

    "file-uri-to-path": ["file-uri-to-path@1.0.0", "", {}, "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="],

-    "ffi-rs": ["ffi-rs@1.3.2", "", { "optionalDependencies": { "@yuuang/ffi-rs-android-arm64": "1.3.2", "@yuuang/ffi-rs-darwin-arm64": "1.3.2", "@yuuang/ffi-rs-darwin-x64": "1.3.2", "@yuuang/ffi-rs-linux-arm-gnueabihf": "1.3.2", "@yuuang/ffi-rs-linux-arm64-gnu": "1.3.2", "@yuuang/ffi-rs-linux-arm64-musl": "1.3.2", "@yuuang/ffi-rs-linux-x64-gnu": "1.3.2", "@yuuang/ffi-rs-linux-x64-musl": "1.3.2", "@yuuang/ffi-rs-win32-arm64-msvc": "1.3.2", "@yuuang/ffi-rs-win32-ia32-msvc": "1.3.2", "@yuuang/ffi-rs-win32-x64-msvc": "1.3.2" } }, "sha512-4s8dX9VbBw/jd5NOuE3EJRqXaIVdjMyiumeeDzrOhtjQRwp6Bz2za7iksWXTnvTQKV/tTdm1s1w7mObe92zPjQ=="],
-
    "filelist": ["filelist@1.0.6", "", { "dependencies": { "minimatch": "^5.0.1" } }, "sha512-5giy2PkLYY1cP39p17Ech+2xlpTRL9HLspOfEgm0L6CwBXBTgsK5ou0JtzYuepxkaQ/tvhCFIJ5uXo0OrM2DxA=="],

    "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
@@ -1,3 +1,4 @@
+import type { IntegrationMethod, IntegrationOauthConnectOutput } from "@opencode-ai/client/promise"
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
@@ -12,9 +13,21 @@ import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { DialogBody, DialogHeader, DialogTitle, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { showToast } from "@/utils/toast"
-import { type Accessor, type Component, createMemo, createUniqueId, For, Match, onMount, Show, Switch } from "solid-js"
-import { createStore } from "solid-js/store"
-import { useQueryClient } from "@tanstack/solid-query"
+import {
+  type Accessor,
+  type Component,
+  createEffect,
+  createMemo,
+  createResource,
+  createUniqueId,
+  For,
+  Match,
+  onCleanup,
+  onMount,
+  Show,
+  Switch,
+} from "solid-js"
+import { createStore, produce } from "solid-js/store"
 import { useParams } from "@solidjs/router"
 import { Link } from "@/components/link"
 import { useServerSDK } from "@/context/server-sdk"
@@ -24,10 +37,10 @@ import { useSettings } from "@/context/settings"
 import { popularProviders, useProviders } from "@/hooks/use-providers"
 import { CustomProviderForm } from "./dialog-custom-provider"
 import { decode64 } from "@/utils/base64"
-import { pathKey } from "@/utils/path-key"
-import { createProviderConnectionController } from "./provider-connection-controller"

 const CUSTOM_ID = "_custom"
+type ConnectMethod = Extract<IntegrationMethod, { type: "key" | "oauth" }>
+
 export function useProviderConnectController(options: { onBack?: () => void } = {}) {
  const [store, setStore] = createStore({ selected: undefined as string | undefined })
  const reset = () => setStore("selected", undefined)
@@ -371,91 +384,118 @@ function ProviderConnection(props: {
  const dialog = useDialog()
  const serverSync = useServerSync()
  const serverSDK = useServerSDK()
-  const queryClient = useQueryClient()
  const params = useParams()
  const language = useLanguage()
  const settings = useSettings()
  const newLayout = settings.general.newLayoutDesigns
  const providers = useProviders(() => props.directory?.())
  const directory = () => props.directory?.() ?? decode64(params.dir)
+  const location = () => {
+    const value = directory()
+    return value ? { directory: value } : undefined
+  }
+
+  const alive = { value: true }
+  const timer = { current: undefined as ReturnType<typeof setTimeout> | undefined }
+
+  onCleanup(() => {
+    alive.value = false
+    if (timer.current === undefined) return
+    clearTimeout(timer.current)
+    timer.current = undefined
+  })

  const provider = createMemo(
    () => providers.all().get(props.provider) ?? serverSync().data.provider.all.get(props.provider)!,
  )
-  const controller = createProviderConnectionController({
-    provider: props.provider,
-    directory,
-    fallbackKeyLabel: () => language.t("provider.connect.method.apiKey"),
-    requestFailed: () => language.t("common.requestFailed"),
-    invalidCode: () => language.t("provider.connect.oauth.code.invalid"),
-    services: {
-      integration: {
-        load: (integrationID, value) =>
-          serverSDK()
-            .api.integration.get({
-              integrationID,
-              location: value ? { directory: value } : undefined,
-            })
-            .then((result) => result.data),
-      },
-      connection: {
-        key: (integrationID, value, key) =>
-          serverSDK().api.integration.connect.key({
-            integrationID,
-            location: value ? { directory: value } : undefined,
-            key,
-          }),
-        oauth: (integrationID, value, methodID, inputs) =>
-          serverSDK()
-            .api.integration.oauth.connect({
-              integrationID,
-              methodID,
-              inputs,
-              location: value ? { directory: value } : undefined,
-            })
-            .then((result) => result.data),
-        status: (integrationID, value, attemptID) =>
-          serverSDK()
-            .api.integration.oauth.status({
-              integrationID,
-              attemptID,
-              location: value ? { directory: value } : undefined,
-            })
-            .then((result) => result.data),
-        complete: (integrationID, value, attemptID, code) =>
-          serverSDK().api.integration.oauth.complete({
-            integrationID,
-            attemptID,
-            location: value ? { directory: value } : undefined,
-            code,
-          }),
-      },
-      provider: {
-        refresh: () =>
-          queryClient.refetchQueries(serverSync().queryOptions.providers(directory() ? pathKey(directory()!) : null)),
-      },
-      completion: {
-        finish: () => {
-          dialog.close()
-          showToast({
-            variant: "success",
-            icon: "circle-check",
-            title: language.t("provider.connect.toast.connected.title", { provider: provider().name }),
-            description: language.t("provider.connect.toast.connected.description", { provider: provider().name }),
-          })
-        },
-      },
+  const fallback = createMemo<ConnectMethod[]>(() => [
+    {
+      type: "key" as const,
+      label: language.t("provider.connect.method.apiKey"),
    },
+  ])
+  const [integration] = createResource(
+    () => ({ provider: props.provider, directory: directory() }),
+    (input) =>
+      serverSDK()
+        .api.integration.get({
+          integrationID: input.provider,
+          location: input.directory ? { directory: input.directory } : undefined,
+        })
+        .then((result) => result.data),
+  )
+  const loading = createMemo(() => integration.loading)
+  const methods = createMemo<ConnectMethod[]>(() => {
+    const values = integration.latest?.methods.filter(
+      (method): method is ConnectMethod => method.type === "key" || method.type === "oauth",
+    )
+    return values?.length ? values : fallback()
  })
-  const loading = controller.data.loading
-  const methods = controller.data.methods
-  const method = controller.data.method
-  const methodIndex = controller.data.methodIndex
-  const authorization = controller.data.authorization
-  const state = controller.auth.state
-  const error = controller.auth.error
-  const connectKey = controller.auth.connectKey
-  const completeCode = controller.auth.completeCode
+  const [store, setStore] = createStore({
+    methodIndex: undefined as undefined | number,
+    authorization: undefined as undefined | IntegrationOauthConnectOutput["data"],
+    promptInputs: undefined as undefined | Record<string, string>,
+    state: "pending" as undefined | "pending" | "complete" | "error" | "prompt",
+    error: undefined as string | undefined,
+  })
+
+  type Action =
+    | { type: "method.select"; index: number }
+    | { type: "method.reset" }
+    | { type: "auth.prompt" }
+    | { type: "auth.inputs"; inputs: Record<string, string> }
+    | { type: "auth.pending" }
+    | { type: "auth.complete"; authorization: IntegrationOauthConnectOutput["data"] }
+    | { type: "auth.error"; error: string }
+
+  function dispatch(action: Action) {
+    setStore(
+      produce((draft) => {
+        if (action.type === "method.select") {
+          draft.methodIndex = action.index
+          draft.authorization = undefined
+          draft.promptInputs = undefined
+          draft.state = undefined
+          draft.error = undefined
+          return
+        }
+        if (action.type === "method.reset") {
+          draft.methodIndex = undefined
+          draft.authorization = undefined
+          draft.promptInputs = undefined
+          draft.state = undefined
+          draft.error = undefined
+          return
+        }
+        if (action.type === "auth.prompt") {
+          draft.state = "prompt"
+          draft.error = undefined
+          return
+        }
+        if (action.type === "auth.inputs") {
+          draft.promptInputs = action.inputs
+          draft.state = undefined
+          draft.error = undefined
+          return
+        }
+        if (action.type === "auth.pending") {
+          draft.state = "pending"
+          draft.error = undefined
+          return
+        }
+        if (action.type === "auth.complete") {
+          draft.state = "complete"
+          draft.authorization = action.authorization
+          draft.error = undefined
+          return
+        }
+        draft.state = "error"
+        draft.error = action.error
+      }),
+    )
+  }
+
+  const method = createMemo(() => (store.methodIndex !== undefined ? methods().at(store.methodIndex!) : undefined))

  const methodLabel = (value?: { type?: string; label?: string }) => {
    if (!value) return ""
@@ -473,7 +513,56 @@ function ProviderConnection(props: {
    }
  }

-  const selectMethod = controller.auth.select
+  function formatError(value: unknown, fallback: string): string {
+    if (value && typeof value === "object" && "data" in value) {
+      const data = (value as { data?: { message?: unknown } }).data
+      if (typeof data?.message === "string" && data.message) return data.message
+    }
+    if (value && typeof value === "object" && "error" in value) {
+      const nested = formatError((value as { error?: unknown }).error, "")
+      if (nested) return nested
+    }
+    if (value && typeof value === "object" && "message" in value) {
+      const message = (value as { message?: unknown }).message
+      if (typeof message === "string" && message) return message
+    }
+    if (value instanceof Error && value.message) return value.message
+    if (typeof value === "string" && value) return value
+    return fallback
+  }
+
+  async function selectMethod(index: number, inputs?: Record<string, string>) {
+    if (timer.current !== undefined) {
+      clearTimeout(timer.current)
+      timer.current = undefined
+    }
+
+    const method = methods()[index]
+    dispatch({ type: "method.select", index })
+
+    if (method.type === "oauth") {
+      if (method.prompts?.length && !inputs) {
+        dispatch({ type: "auth.prompt" })
+        return
+      }
+      dispatch({ type: "auth.pending" })
+      await serverSDK()
+        .api.integration.oauth.connect({
+          integrationID: props.provider,
+          methodID: method.id,
+          inputs: inputs ?? {},
+          location: location(),
+        })
+        .then((x) => {
+          if (!alive.value) return
+          dispatch({ type: "auth.complete", authorization: x.data })
+        })
+        .catch((e) => {
+          if (!alive.value) return
+          dispatch({ type: "auth.error", error: formatError(e, language.t("common.requestFailed")) })
+        })
+    }
+  }

  function AuthPromptsView() {
    const [formStore, setFormStore] = createStore({
@@ -494,7 +583,7 @@ function ProviderConnection(props: {
    const current = createMemo(() => {
      const all = prompts()
      const index = all.findIndex((prompt, index) => index >= formStore.index && matches(prompt, formStore.value))
-      if (index === -1) return undefined
+      if (index === -1) return
      return {
        index,
        prompt: all[index],
@@ -508,14 +597,13 @@ function ProviderConnection(props: {
    })

    async function next(index: number, value: Record<string, string>) {
-      const selected = methodIndex()
-      if (selected === undefined) return
+      if (store.methodIndex === undefined) return
      const next = prompts().findIndex((prompt, i) => i > index && matches(prompt, value))
      if (next !== -1) {
        setFormStore("index", next)
        return
      }
-      await selectMethod(selected, value)
+      await selectMethod(store.methodIndex, value)
    }

    async function handleSubmit(e: SubmitEvent) {
@@ -529,12 +617,12 @@ function ProviderConnection(props: {
    const item = () => current()
    const text = createMemo(() => {
      const prompt = item()?.prompt
-      if (!prompt || prompt.type !== "text") return undefined
+      if (!prompt || prompt.type !== "text") return
      return prompt
    })
    const select = createMemo(() => {
      const prompt = item()?.prompt
-      if (!prompt || prompt.type !== "select") return undefined
+      if (!prompt || prompt.type !== "select") return
      return prompt
    })

@@ -605,9 +693,32 @@ function ProviderConnection(props: {
    listRef?.onKeyDown(e)
  }

+  let auto = false
+  createEffect(() => {
+    if (auto) return
+    if (loading()) return
+    if (methods().length === 1) {
+      auto = true
+      void selectMethod(0)
+    }
+  })
+
+  async function complete() {
+    await serverSync()
+      .refreshProviders()
+      .catch(() => undefined)
+    dialog.close()
+    showToast({
+      variant: "success",
+      icon: "circle-check",
+      title: language.t("provider.connect.toast.connected.title", { provider: provider().name }),
+      description: language.t("provider.connect.toast.connected.description", { provider: provider().name }),
+    })
+  }
+
  function goBack() {
-    if (methods().length > 1 && methodIndex() !== undefined) {
-      controller.auth.reset()
+    if (methods().length > 1 && store.methodIndex !== undefined) {
+      dispatch({ type: "method.reset" })
      return
    }
    props.onBack()
@@ -695,9 +806,9 @@ function ProviderConnection(props: {
    async function handleSubmit(e: SubmitEvent) {
      e.preventDefault()

-      if (!(e.currentTarget instanceof HTMLFormElement)) return
-      const value = new FormData(e.currentTarget).get("apiKey")
-      const apiKey = typeof value === "string" ? value : ""
+      const form = e.currentTarget as HTMLFormElement
+      const formData = new FormData(form)
+      const apiKey = formData.get("apiKey") as string

      if (!apiKey?.trim()) {
        setFormStore("error", language.t("provider.connect.apiKey.required"))
@@ -705,7 +816,12 @@ function ProviderConnection(props: {
      }

      setFormStore("error", undefined)
-      await connectKey(apiKey)
+      await serverSDK().api.integration.connect.key({
+        integrationID: props.provider,
+        location: location(),
+        key: apiKey,
+      })
+      await complete()
    }

    if (newLayout())
@@ -820,9 +936,9 @@ function ProviderConnection(props: {
    async function handleSubmit(e: SubmitEvent) {
      e.preventDefault()

-      if (!(e.currentTarget instanceof HTMLFormElement)) return
-      const value = new FormData(e.currentTarget).get("code")
-      const code = typeof value === "string" ? value : ""
+      const form = e.currentTarget as HTMLFormElement
+      const formData = new FormData(form)
+      const code = formData.get("code") as string

      if (!code?.trim()) {
        setFormStore("error", language.t("provider.connect.oauth.code.required"))
@@ -830,7 +946,20 @@ function ProviderConnection(props: {
      }

      setFormStore("error", undefined)
-      setFormStore("error", await completeCode(code))
+      const result = await serverSDK()
+        .api.integration.oauth.complete({
+          integrationID: props.provider,
+          attemptID: store.authorization!.attemptID,
+          location: location(),
+          code,
+        })
+        .then(() => ({ ok: true as const }))
+        .catch((error) => ({ ok: false as const, error }))
+      if (result.ok) {
+        await complete()
+        return
+      }
+      setFormStore("error", formatError(result.error, language.t("provider.connect.oauth.code.invalid")))
    }

    if (newLayout())
@@ -838,7 +967,7 @@ function ProviderConnection(props: {
        <div class="flex flex-col gap-5 px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
          <div>
            {language.t("provider.connect.oauth.code.visit.prefix")}
-            <Link href={authorization()!.url} class="text-v2-text-text-base">
+            <Link href={store.authorization!.url} class="text-v2-text-text-base">
              {language.t("provider.connect.oauth.code.visit.link")}
            </Link>
            {language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
@@ -877,7 +1006,7 @@ function ProviderConnection(props: {
      <div class="flex flex-col gap-6">
        <div class="text-14-regular text-text-base">
          {language.t("provider.connect.oauth.code.visit.prefix")}
-          <Link href={authorization()!.url}>{language.t("provider.connect.oauth.code.visit.link")}</Link>
+          <Link href={store.authorization!.url}>{language.t("provider.connect.oauth.code.visit.link")}</Link>
          {language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
        </div>
        <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
@@ -903,18 +1032,52 @@ function ProviderConnection(props: {

  function OAuthAutoView() {
    const code = createMemo(() => {
-      const instructions = authorization()?.instructions
+      const instructions = store.authorization?.instructions
      if (instructions?.includes(":")) {
        return instructions.split(":").pop()?.trim()
      }
      return instructions
    })

+    onMount(() => {
+      const poll = async () => {
+        const authorization = store.authorization
+        if (!authorization || !alive.value) return
+        const result = await serverSDK()
+          .api.integration.oauth.status({
+            integrationID: props.provider,
+            attemptID: authorization.attemptID,
+            location: location(),
+          })
+          .then((value) => ({ ok: true as const, status: value.data }))
+          .catch((error) => ({ ok: false as const, error }))
+        if (!alive.value) return
+        if (!result.ok) {
+          dispatch({ type: "auth.error", error: formatError(result.error, language.t("common.requestFailed")) })
+          return
+        }
+        if (result.status.status === "complete") {
+          await complete()
+          return
+        }
+        if (result.status.status === "failed") {
+          dispatch({ type: "auth.error", error: result.status.message })
+          return
+        }
+        if (result.status.status === "expired") {
+          dispatch({ type: "auth.error", error: language.t("common.requestFailed") })
+          return
+        }
+        timer.current = setTimeout(poll, 1_000)
+      }
+      void poll()
+    })
+
    return (
      <div class="flex flex-col gap-6">
        <div class="text-14-regular text-text-base">
          {language.t("provider.connect.oauth.auto.visit.prefix")}
-          <Link href={authorization()!.url}>{language.t("provider.connect.oauth.auto.visit.link")}</Link>
+          <Link href={store.authorization!.url}>{language.t("provider.connect.oauth.auto.visit.link")}</Link>
          {language.t("provider.connect.oauth.auto.visit.suffix", { provider: provider().name })}
        </div>
        <TextField
@@ -958,7 +1121,7 @@ function ProviderConnection(props: {
        <div
          onKeyDown={handleKey}
          tabIndex={newLayout() ? undefined : 0}
-          autofocus={!newLayout() && methodIndex() === undefined ? true : undefined}
+          autofocus={!newLayout() && store.methodIndex === undefined ? true : undefined}
        >
          <Switch>
            <Match when={loading()}>
@@ -969,10 +1132,10 @@ function ProviderConnection(props: {
                </div>
              </div>
            </Match>
-            <Match when={methodIndex() === undefined}>
+            <Match when={store.methodIndex === undefined}>
              <MethodSelection />
            </Match>
-            <Match when={state() === "pending"}>
+            <Match when={store.state === "pending"}>
              <div class="text-14-regular text-text-base">
                <div class="flex items-center gap-x-2">
                  <Spinner />
@@ -980,14 +1143,14 @@ function ProviderConnection(props: {
                </div>
              </div>
            </Match>
-            <Match when={state() === "prompt"}>
+            <Match when={store.state === "prompt"}>
              <AuthPromptsView />
            </Match>
-            <Match when={state() === "error"}>
+            <Match when={store.state === "error"}>
              <div class="text-14-regular text-text-base">
                <div class="flex items-center gap-x-2">
                  <Icon name="circle-ban-sign" class="text-icon-critical-base" />
-                  <span>{language.t("provider.connect.status.failed", { error: error() ?? "" })}</span>
+                  <span>{language.t("provider.connect.status.failed", { error: store.error ?? "" })}</span>
                </div>
              </div>
            </Match>
@@ -996,10 +1159,10 @@ function ProviderConnection(props: {
            </Match>
            <Match when={method()?.type === "oauth"}>
              <Switch>
-                <Match when={authorization()?.mode === "code"}>
+                <Match when={store.authorization?.mode === "code"}>
                  <OAuthCodeView />
                </Match>
-                <Match when={authorization()?.mode === "auto"}>
+                <Match when={store.authorization?.mode === "auto"}>
                  <OAuthAutoView />
                </Match>
              </Switch>
@@ -1,129 +0,0 @@
-import { describe, expect, test, vi } from "bun:test"
-import { createRoot } from "solid-js"
-import {
-  createProviderConnectionWorkflowController,
-  type ProviderConnectMethod,
-} from "./provider-connection-controller"
-
-const authorization = {
-  attemptID: "attempt-1",
-  url: "https://example.com/auth",
-  instructions: "Code: ABCD",
-  mode: "auto" as const,
-  time: { created: 0, expires: 1 },
-}
-
-function services(options: {
-  methods: readonly ProviderConnectMethod[]
-  status?: () => Promise<{ status: "pending" | "complete" }>
-  refresh?: () => void
-  finish?: () => void
-}) {
-  return {
-    connection: {
-      key: async () => undefined,
-      oauth: async () => authorization,
-      status: options.status ?? (async () => ({ status: "pending" as const })),
-      complete: async () => undefined,
-    },
-    provider: { refresh: async () => options.refresh?.() },
-    completion: { finish: options.finish ?? (() => undefined) },
-  }
-}
-
-function create(options: Parameters<typeof services>[0]) {
-  return createRoot((dispose) => ({
-    dispose,
-    controller: createProviderConnectionWorkflowController({
-      provider: "example",
-      directory: () => "/project",
-      requestFailed: () => "Request failed",
-      invalidCode: () => "Invalid code",
-      loading: () => false,
-      methods: () => [...options.methods],
-      services: services(options),
-      pollInterval: 100,
-    }),
-  }))
-}
-
-async function settle() {
-  await Promise.resolve()
-  await Promise.resolve()
-  await Promise.resolve()
-  await Promise.resolve()
-}
-
-describe("provider connection controller", () => {
-  test("moves prompted OAuth methods through prompt and authorization states", async () => {
-    const owned = create({
-      methods: [
-        {
-          id: "oauth",
-          type: "oauth",
-          label: "OAuth",
-          prompts: [{ type: "text", key: "account", message: "Account" }],
-        },
-      ],
-    })
-
-    await owned.controller.auth.select(0)
-    expect(owned.controller.auth.state()).toBe("prompt")
-
-    await owned.controller.auth.select(0, { account: "team" })
-    expect(owned.controller.auth.state()).toBe("complete")
-    expect(owned.controller.data.authorization()).toEqual(authorization)
-    owned.dispose()
-  })
-
-  test("polls auto OAuth independently and completes after provider refresh", async () => {
-    vi.useFakeTimers()
-    try {
-      const calls: string[] = []
-      const statuses = [{ status: "pending" as const }, { status: "complete" as const }]
-      const owned = create({
-        methods: [{ id: "oauth", type: "oauth", label: "OAuth" }],
-        status: async () => statuses.shift() ?? { status: "complete" as const },
-        refresh: () => calls.push("refresh"),
-        finish: () => calls.push("finish"),
-      })
-
-      await owned.controller.auth.select(0)
-      await settle()
-      expect(owned.controller.data.authorization()).toEqual(authorization)
-      expect(calls).toEqual([])
-
-      vi.advanceTimersByTime(100)
-      await settle()
-      expect(calls).toEqual(["refresh", "finish"])
-      owned.dispose()
-    } finally {
-      vi.useRealTimers()
-    }
-  })
-
-  test("cancels an owned poll timer on reset and disposal", async () => {
-    vi.useFakeTimers()
-    try {
-      const status = vi.fn(async () => ({ status: "pending" as const }))
-      const owned = create({ methods: [{ id: "oauth", type: "oauth", label: "OAuth" }], status })
-
-      await owned.controller.auth.select(0)
-      expect(status).toHaveBeenCalledTimes(1)
-
-      owned.controller.auth.reset()
-      vi.advanceTimersByTime(1_000)
-      await settle()
-      expect(status).toHaveBeenCalledTimes(1)
-
-      await owned.controller.auth.select(0)
-      expect(status).toHaveBeenCalledTimes(2)
-      owned.dispose()
-      vi.advanceTimersByTime(1_000)
-      await settle()
-      expect(status).toHaveBeenCalledTimes(2)
-    } finally {
-      vi.useRealTimers()
-    }
-  })
-})
@@ -1,254 +0,0 @@
-import type { IntegrationMethod, IntegrationOauthConnectOutput } from "@opencode-ai/client/promise"
-import { createEffect, createMemo, createResource, onCleanup } from "solid-js"
-import { createStore, produce } from "solid-js/store"
-
-export type ProviderConnectMethod = Extract<IntegrationMethod, { type: "key" | "oauth" }>
-type Authorization = IntegrationOauthConnectOutput["data"]
-type OAuthStatus = { status: "pending" | "complete" | "expired" } | { status: "failed"; message: string }
-
-type ProviderConnectionServices = {
-  integration: {
-    load: (provider: string, directory?: string) => Promise<{ methods: readonly IntegrationMethod[] } | null>
-  }
-  connection: {
-    key: (provider: string, directory: string | undefined, key: string) => Promise<unknown>
-    oauth: (
-      provider: string,
-      directory: string | undefined,
-      method: string,
-      inputs: Record<string, string>,
-    ) => Promise<Authorization>
-    status: (provider: string, directory: string | undefined, attempt: string) => Promise<OAuthStatus>
-    complete: (provider: string, directory: string | undefined, attempt: string, code: string) => Promise<unknown>
-  }
-  provider: { refresh: () => Promise<unknown> }
-  completion: { finish: () => void }
-}
-
-export function createProviderConnectionController(options: {
-  provider: string
-  directory: () => string | undefined
-  fallbackKeyLabel: () => string
-  requestFailed: () => string
-  invalidCode: () => string
-  services: ProviderConnectionServices
-  pollInterval?: number
-}) {
-  const [integration] = createResource(
-    () => ({ provider: options.provider, directory: options.directory() }),
-    (input) => options.services.integration.load(input.provider, input.directory),
-  )
-  const methods = createMemo<ProviderConnectMethod[]>(() => {
-    const values = integration.latest?.methods.filter(
-      (method): method is ProviderConnectMethod => method.type === "key" || method.type === "oauth",
-    )
-    if (values?.length) return [...values]
-    return [{ type: "key", label: options.fallbackKeyLabel() }]
-  })
-  return createProviderConnectionWorkflowController({
-    ...options,
-    loading: () => integration.loading,
-    methods,
-  })
-}
-
-export function createProviderConnectionWorkflowController(options: {
-  provider: string
-  directory: () => string | undefined
-  requestFailed: () => string
-  invalidCode: () => string
-  loading: () => boolean
-  methods: () => ProviderConnectMethod[]
-  services: Pick<ProviderConnectionServices, "connection" | "provider" | "completion">
-  pollInterval?: number
-}) {
-  const [store, setStore] = createStore({
-    methodIndex: undefined as number | undefined,
-    authorization: undefined as Authorization | undefined,
-    state: "pending" as "pending" | "complete" | "error" | "prompt" | undefined,
-    error: undefined as string | undefined,
-  })
-  const polling = {
-    generation: 0,
-    timer: undefined as ReturnType<typeof setTimeout> | undefined,
-    disposed: false,
-  }
-  const methods = options.methods
-  const method = createMemo(() => (store.methodIndex === undefined ? undefined : methods().at(store.methodIndex)))
-
-  type Action =
-    | { type: "method.select"; index: number }
-    | { type: "method.reset" }
-    | { type: "auth.prompt" }
-    | { type: "auth.pending" }
-    | { type: "auth.complete"; authorization: Authorization }
-    | { type: "auth.error"; error: string }
-
-  const dispatch = (action: Action) => {
-    setStore(
-      produce((draft) => {
-        if (action.type === "method.select") {
-          draft.methodIndex = action.index
-          draft.authorization = undefined
-          draft.state = undefined
-          draft.error = undefined
-          return
-        }
-        if (action.type === "method.reset") {
-          draft.methodIndex = undefined
-          draft.authorization = undefined
-          draft.state = undefined
-          draft.error = undefined
-          return
-        }
-        if (action.type === "auth.prompt") {
-          draft.state = "prompt"
-          draft.error = undefined
-          return
-        }
-        if (action.type === "auth.pending") {
-          draft.state = "pending"
-          draft.error = undefined
-          return
-        }
-        if (action.type === "auth.complete") {
-          draft.state = "complete"
-          draft.authorization = action.authorization
-          draft.error = undefined
-          return
-        }
-        draft.state = "error"
-        draft.error = action.error
-      }),
-    )
-  }
-
-  const cancelPolling = () => {
-    polling.generation++
-    if (polling.timer === undefined) return
-    clearTimeout(polling.timer)
-    polling.timer = undefined
-  }
-  const finish = async () => {
-    cancelPolling()
-    await options.services.provider.refresh().catch(() => undefined)
-    if (polling.disposed) return
-    options.services.completion.finish()
-  }
-  const poll = async (authorization: Authorization, generation: number) => {
-    const result = await options.services.connection
-      .status(options.provider, options.directory(), authorization.attemptID)
-      .then((status) => ({ ok: true as const, status }))
-      .catch((error) => ({ ok: false as const, error }))
-    if (polling.disposed || generation !== polling.generation) return
-    if (!result.ok) {
-      dispatch({ type: "auth.error", error: formatProviderConnectionError(result.error, options.requestFailed()) })
-      return
-    }
-    if (result.status.status === "complete") {
-      await finish()
-      return
-    }
-    if (result.status.status === "failed") {
-      dispatch({ type: "auth.error", error: result.status.message })
-      return
-    }
-    if (result.status.status === "expired") {
-      dispatch({ type: "auth.error", error: options.requestFailed() })
-      return
-    }
-    polling.timer = setTimeout(() => void poll(authorization, generation), options.pollInterval ?? 1_000)
-  }
-  const select = async (index: number, inputs?: Record<string, string>) => {
-    cancelPolling()
-    const generation = polling.generation
-    const selected = methods()[index]
-    dispatch({ type: "method.select", index })
-    if (selected.type !== "oauth") return
-    if (selected.prompts?.length && !inputs) {
-      dispatch({ type: "auth.prompt" })
-      return
-    }
-    dispatch({ type: "auth.pending" })
-    const result = await options.services.connection
-      .oauth(options.provider, options.directory(), selected.id, inputs ?? {})
-      .then((authorization) => ({ ok: true as const, authorization }))
-      .catch((error) => ({ ok: false as const, error }))
-    if (polling.disposed || generation !== polling.generation) return
-    if (!result.ok) {
-      dispatch({ type: "auth.error", error: formatProviderConnectionError(result.error, options.requestFailed()) })
-      return
-    }
-    dispatch({ type: "auth.complete", authorization: result.authorization })
-    if (result.authorization.mode === "auto") void poll(result.authorization, generation)
-  }
-  const reset = () => {
-    cancelPolling()
-    dispatch({ type: "method.reset" })
-  }
-  const connectKey = async (key: string) => {
-    await options.services.connection.key(options.provider, options.directory(), key)
-    await finish()
-  }
-  const completeCode = async (code: string) => {
-    const authorization = store.authorization
-    if (!authorization) return options.invalidCode()
-    const result = await options.services.connection
-      .complete(options.provider, options.directory(), authorization.attemptID, code)
-      .then(() => ({ ok: true as const }))
-      .catch((error) => ({ ok: false as const, error }))
-    if (!result.ok) return formatProviderConnectionError(result.error, options.invalidCode())
-    await finish()
-    return undefined
-  }
-
-  let auto = false
-  createEffect(() => {
-    if (auto || options.loading() || methods().length !== 1) return
-    auto = true
-    void select(0)
-  })
-  onCleanup(() => {
-    polling.disposed = true
-    cancelPolling()
-  })
-
-  return {
-    data: {
-      loading: options.loading,
-      methods,
-      method,
-      methodIndex: () => store.methodIndex,
-      authorization: () => store.authorization,
-    },
-    auth: {
-      state: () => store.state,
-      error: () => store.error,
-      select,
-      reset,
-      connectKey,
-      completeCode,
-    },
-  }
-}
-
-export type ProviderConnectionController = ReturnType<typeof createProviderConnectionController>
-
-export function formatProviderConnectionError(value: unknown, fallback: string): string {
-  if (value && typeof value === "object" && "data" in value) {
-    const data = value.data
-    if (data && typeof data === "object" && "message" in data && typeof data.message === "string" && data.message)
-      return data.message
-  }
-  if (value && typeof value === "object" && "error" in value) {
-    const nested = formatProviderConnectionError(value.error, "")
-    if (nested) return nested
-  }
-  if (value && typeof value === "object" && "message" in value) {
-    const message = value.message
-    if (typeof message === "string" && message) return message
-  }
-  if (value instanceof Error && value.message) return value.message
-  if (typeof value === "string" && value) return value
-  return fallback
-}
@@ -56,16 +56,6 @@
    "@lydell/node-pty-linux-x64": "1.2.0-beta.12",
    "@lydell/node-pty-win32-arm64": "1.2.0-beta.12",
    "@lydell/node-pty-win32-x64": "1.2.0-beta.12",
-    "@ff-labs/fff-bin-darwin-arm64": "0.10.1",
-    "@ff-labs/fff-bin-linux-arm64-gnu": "0.10.1",
-    "@ff-labs/fff-bin-linux-x64-gnu": "0.10.1",
-    "@ff-labs/fff-bin-win32-arm64": "0.10.1",
-    "@ff-labs/fff-bin-win32-x64": "0.10.1",
-    "@yuuang/ffi-rs-darwin-arm64": "1.3.2",
-    "@yuuang/ffi-rs-linux-arm64-gnu": "1.3.2",
-    "@yuuang/ffi-rs-linux-x64-gnu": "1.3.2",
-    "@yuuang/ffi-rs-win32-arm64-msvc": "1.3.2",
-    "@yuuang/ffi-rs-win32-x64-msvc": "1.3.2",
    "@parcel/watcher-darwin-arm64": "2.5.1",
    "@parcel/watcher-linux-arm64-glibc": "2.5.1",
    "@parcel/watcher-linux-x64-glibc": "2.5.1",
@@ -5,7 +5,6 @@ import { rm } from "fs/promises"
 import path from "path"
 import { Script } from "@opencode-ai/script"
 import { createSolidTransformPlugin } from "@opentui/solid/bun-plugin"
-import type { BunPlugin } from "bun"
 import pkg from "../package.json"
 import { modelsData } from "./generate"

@@ -23,7 +22,7 @@ await rm(outdir, { recursive: true, force: true })
 const singleFlag = process.argv.includes("--single")
 const baselineFlag = process.argv.includes("--baseline")
 const skipInstall = process.argv.includes("--skip-install")
-const solidPlugin = createSolidTransformPlugin()
+const plugin = createSolidTransformPlugin()

 const allTargets: {
  os: string
@@ -56,16 +55,6 @@ const targets = singleFlag
 if (!skipInstall) await $`bun install --os="*" --cpu="*" @opentui/core@${pkg.dependencies["@opentui/core"]}`

 for (const item of targets) {
-  const parcelWatcherPackage = `@parcel/watcher-${item.os}-${item.arch}${item.os === "linux" ? `-${item.abi ?? "glibc"}` : ""}`
-  const parcelWatcherPlugin: BunPlugin = {
-    name: "parcel-watcher-binding",
-    setup(build) {
-      build.onLoad({ filter: /filesystem\/watcher-binding\.ts$/ }, () => ({
-        contents: `import binding from ${JSON.stringify(parcelWatcherPackage)}; export default () => binding`,
-        loader: "js",
-      }))
-    },
-  }
  const target = [
    binary,
    item.os === "win32" ? "windows" : item.os,
@@ -80,7 +69,7 @@ for (const item of targets) {
  const result = await Bun.build({
    entrypoints: ["./src/index.ts"],
    tsconfig: "./tsconfig.json",
-    plugins: [solidPlugin, parcelWatcherPlugin],
+    plugins: [plugin],
    external: ["node-gyp"],
    format: "esm",
    minify: true,
@@ -37,8 +37,6 @@ export async function collectNodeAssets(target: NodeTarget) {
      ...(target.platform === "linux" ? { libc: "glibc" as const } : {}),
    }),
    { key: target.parcelWatcherAsset, source: fileURLToPath(import.meta.resolve(target.parcelWatcherPackage)) },
-    { key: target.fffAsset, source: fileURLToPath(import.meta.resolve(target.fffPackage)) },
-    { key: target.fffFfiAsset, source: fileURLToPath(import.meta.resolve(target.fffFfiPackage)) },
    {
      key: photonWasmAsset,
      source: fileURLToPath(import.meta.resolve(photonWasmAsset)),
@@ -13,7 +13,7 @@ const directory = path.join(import.meta.dir, "..", "dist", ...(nodeBuild ? ["nod
 const binary = path.join(directory, `opencode2${nodeBuild ? "-node" : ""}${process.platform === "win32" ? ".exe" : ""}`)
 if (!(await Bun.file(binary).exists())) throw new Error(`Missing compiled CLI in ${directory}`)

-const root = await fs.realpath(await fs.mkdtemp(path.join(os.tmpdir(), "opencode-service-smoke-")))
+const root = await fs.mkdtemp(path.join(os.tmpdir(), "opencode-service-smoke-"))
 const env = {
  ...process.env,
  HOME: root,
@@ -29,7 +29,6 @@ const processes: Array<ReturnType<typeof Bun.spawn>> = []
 const errors: Array<Promise<string>> = []
 let failure: unknown
 try {
-  await fs.mkdir(path.join(root, ".opencode"))
  spawnService()
  spawnService()
  const registration = await waitForRegistration()
@@ -50,11 +49,6 @@ try {
    { signal: AbortSignal.timeout(5_000) },
  )
  if (tokenOpenApi.status !== 200) throw new Error("Compiled application rejected query authentication")
-  if ((await pluginIDs(info.url, headers)).includes("smoke")) throw new Error("Smoke plugin existed before creation")
-  const plugin = path.join(root, ".opencode", "plugins", "smoke.ts")
-  await fs.mkdir(path.dirname(plugin), { recursive: true })
-  await fs.writeFile(plugin, pluginSource())
-  await waitForPlugin(info.url, headers)

  const unauthorizedHealth = await fetch(new URL("/api/health", info.url), {
    signal: AbortSignal.timeout(5_000),
@@ -94,7 +88,6 @@ try {
 } finally {
  processes.forEach((process) => process.kill())
  await Promise.all(processes.map((process) => process.exited))
-  if (failure) errors.push(fs.readFile(path.join(root, "data", "opencode", "log", "opencode.log"), "utf8").catch(() => ""))
 }

 const output = await Promise.all(errors)
@@ -140,31 +133,3 @@ async function waitForReady(url: string, headers: HeadersInit) {
 function exitsWithin(process: Bun.Subprocess, milliseconds: number) {
  return Promise.race([process.exited.then(() => true), Bun.sleep(milliseconds).then(() => false)])
 }
-
-function pluginSource() {
-  return 'export default { id: "smoke", setup: async () => {} }\n'
-}
-
-async function pluginIDs(url: string, headers: HeadersInit) {
-  const endpoint = new URL("/api/plugin", url)
-  endpoint.searchParams.set("location[directory]", root)
-  const response = await fetch(endpoint, { headers, signal: AbortSignal.timeout(5_000) })
-  const body: unknown = await response.json()
-  if (typeof body !== "object" || body === null || !("data" in body) || !Array.isArray(body.data)) {
-    throw new Error("Compiled service returned an invalid plugin list")
-  }
-  return body.data.flatMap((plugin) =>
-    typeof plugin === "object" && plugin !== null && "id" in plugin && typeof plugin.id === "string"
-      ? [plugin.id]
-      : [],
-  )
-}
-
-async function waitForPlugin(url: string, headers: HeadersInit) {
-  const deadline = Date.now() + 10_000
-  while (Date.now() < deadline) {
-    if ((await pluginIDs(url, headers)).includes("smoke")) return
-    await Bun.sleep(25)
-  }
-  throw new Error("Compiled service did not discover the created plugin")
-}
@@ -11,8 +11,6 @@ export function nodeTarget(platform: string, arch: string) {
  const targetArch = arch as "arm64" | "x64"
  const nodePtyPackage = `@lydell/node-pty-${targetPlatform}-${targetArch}`
  const parcelWatcherPackage = `@parcel/watcher-${targetPlatform}-${targetArch}${targetPlatform === "linux" ? "-glibc" : ""}`
-  const fffPackage = `@ff-labs/fff-bin-${targetPlatform}-${targetArch}${targetPlatform === "linux" ? "-gnu" : ""}`
-  const fffFfiPackage = `@yuuang/ffi-rs-${targetPlatform}-${targetArch}${targetPlatform === "linux" ? "-gnu" : targetPlatform === "win32" ? "-msvc" : ""}`

  return {
    platform: targetPlatform,
@@ -21,10 +19,6 @@ export function nodeTarget(platform: string, arch: string) {
    nodePtyEntryAsset: `${nodePtyPackage}/lib/index.js`,
    parcelWatcherPackage,
    parcelWatcherAsset: `${parcelWatcherPackage}/watcher.node`,
-    fffPackage,
-    fffAsset: `${fffPackage}/${targetPlatform === "darwin" ? "libfff_c.dylib" : targetPlatform === "win32" ? "fff_c.dll" : "libfff_c.so"}`,
-    fffFfiPackage,
-    fffFfiAsset: `${fffFfiPackage}/ffi-rs.${targetPlatform}-${targetArch}${targetPlatform === "linux" ? "-gnu" : targetPlatform === "win32" ? "-msvc" : ""}.node`,
  }
 }

@@ -30,44 +30,6 @@ function runtimeRequirePlugin(): Plugin {
  }
 }

-function fffNodePlugin(): Plugin {
-  return {
-    name: "opencode:fff-node",
-    enforce: "pre",
-    transform(code, id) {
-      const normalized = id.replaceAll("\\", "/")
-      if (normalized.endsWith("/ffi-rs/index.js")) {
-        const start = code.indexOf("if (!nativeBinding) {")
-        if (start === -1) this.error("Failed to rewrite ffi-rs native binding loader")
-        return `const unavailable = () => { throw new Error("ffi-rs native binding unavailable") }
-const nativeBinding = globalThis.__OPENCODE_FFF_FFI ?? {
-  DataType: new Proxy({}, { get: (target, key) => target[key] ?? key }),
-  PointerType: {},
-  FFITypeTag: {},
-  open: unavailable,
-  close: unavailable,
-  load: unavailable,
-  isNullPointer: unavailable,
-  createPointer: unavailable,
-  restorePointer: unavailable,
-  unwrapPointer: unavailable,
-  wrapPointer: unavailable,
-  freePointer: unavailable,
-}
-const loadError = undefined
-${code.slice(start)}`
-      }
-      if (!normalized.endsWith("/fff-node/dist/src/binary.js")) return
-      const transformed = code.replace(
-        "export function findBinary() {",
-        "export function findBinary() { if (process.env.FFF_BINARY_PATH) return process.env.FFF_BINARY_PATH;",
-      )
-      if (transformed === code) this.error("Failed to rewrite FFF binary loader")
-      return transformed
-    },
-  }
-}
-
 const resolve = {
  alias: [
    { find: /^solid-js\/store$/, replacement: "solid-js/store/dist/store.js" },
@@ -194,11 +156,6 @@ process.env.OTUI_ASSET_ROOT = __ocAssetRoot
 process.env.OPENCODE_NODE_PTY_PATH = __ocPath.join(__ocAssetRoot, ${JSON.stringify(input.target.nodePtyEntryAsset)})
 process.env.OPENCODE_PARCEL_WATCHER_PATH = __ocPath.join(__ocAssetRoot, ${JSON.stringify(input.target.parcelWatcherAsset)})
 process.env.OPENCODE_PHOTON_WASM_PATH = __ocPath.join(__ocAssetRoot, ${JSON.stringify(photonWasmAsset)})
-process.env.FFF_BINARY_PATH = __ocPath.join(__ocAssetRoot, ${JSON.stringify(input.target.fffAsset)})
-process.env.OPENCODE_FFF_FFI_PATH = __ocPath.join(__ocAssetRoot, ${JSON.stringify(input.target.fffFfiAsset)})
-try {
-  globalThis.__OPENCODE_FFF_FFI = require(process.env.OPENCODE_FFF_FFI_PATH)
-} catch {}
 globalThis.__OPENCODE_PHOTON_WASM_PATH = process.env.OPENCODE_PHOTON_WASM_PATH
 if (process.platform === "linux") process.env.OPENTUI_LIBC = "glibc"`
 }
@@ -217,7 +174,6 @@ export function mainConfig(input: NodeBuildInput): UserConfig {
    plugins: [
      rawTextPlugin(),
      runtimeRequirePlugin(),
-      fffNodePlugin(),
      solid({
        solid: {
          generate: "universal",
@@ -92,7 +92,6 @@
    "@lydell/node-pty": "catalog:",
    "@modelcontextprotocol/sdk": "1.29.0",
    "@ff-labs/fff-bun": "0.10.1",
-    "@ff-labs/fff-node": "0.10.1",
    "@opencode-ai/codemode": "workspace:*",
    "@opencode-ai/effect-drizzle-sqlite": "workspace:*",
    "@opencode-ai/effect-sqlite-node": "workspace:*",
@@ -6,7 +6,9 @@ import { Instructions } from "../instructions/index"
 import { CodeModeCatalog } from "./catalog"

 // prettier-ignore
-const prompt = (hasMoreTools: boolean) => `The Code Mode tool catalog below is ${hasMoreTools ? "partial" : "complete"}.${hasMoreTools ? `
+const prompt = (hasMoreTools: boolean) => `The Code Mode tool catalog below is ${hasMoreTools ? "partial" : "complete"}.
+
+The Code Mode catalog and \`search\` results are the complete set of tools available within Code Mode. Tools presented elsewhere are not available in this runtime.${hasMoreTools ? `

 ## Search

@@ -33,7 +33,7 @@ type CollectedFiles = {

 // Invariant model-facing guidance; the changing tool catalog is delivered through Instructions.
 const description = [
-  "Run JavaScript to orchestrate tool calls and compose their results through `{ code }` in a confined Code Mode runtime.",
+  "Run JavaScript in a confined Code Mode runtime to orchestrate tool calls and compose their results.",
  "Imports, direct filesystem access, and timers are unavailable. Do not use `fetch`; all external access goes through `tools`.",
  "Within `{ code }`, the only callable tools are those explicitly listed in the Code Mode catalog instructions or returned by `search`. Inside `{ code }`, ignore tools shown outside the Code Mode catalog. They are not available in the Code Mode runtime.",
  'Call tools through `tools` using only exact paths and signatures from the catalog. Do not infer or normalize tool names; preserve bracket notation such as `tools.<namespace>["tool-name"](input)`.',
@@ -1,52 +1,71 @@
-import type {
-  DirItem,
-  DirSearchResult,
-  FileItem,
-  GrepCursor,
-  GrepMatch,
-  GrepResult,
-  InitOptions,
-  MixedItem,
-  MixedSearchResult,
-  SearchResult,
-} from "@ff-labs/fff-node"
-
-const { FileFinder } = await import("@ff-labs/fff-node").catch(() => ({ FileFinder: undefined }))
-
 export type Result<T> = { ok: true; value: T } | { ok: false; error: string }

-export type Init = InitOptions
+export interface Init {
+  basePath: string
+  frecencyDbPath?: string
+  historyDbPath?: string
+  useUnsafeNoLock?: boolean
+  disableMmapCache?: boolean
+  disableContentIndexing?: boolean
+  disableWatch?: boolean
+  aiMode?: boolean
+  logFilePath?: string
+  logLevel?: "trace" | "debug" | "info" | "warn" | "error"
+  enableFsRootScanning?: boolean
+  enableHomeDirScanning?: boolean
+}
+
+export interface File {
+  relativePath: string
+  fileName: string
+  modified: number
+}
+
+export interface Directory {
+  relativePath: string
+  dirName: string
+  maxAccessFrecency: number
+}
+
+export type Mixed = { type: "file"; item: File } | { type: "directory"; item: Directory }

 export interface Search {
-  items: FileItem[]
-  scores: SearchResult["scores"]
+  items: File[]
+  scores: Array<{ total: number }>
  totalMatched: number
  totalFiles: number
 }

 export interface DirSearch {
-  items: DirItem[]
-  scores: DirSearchResult["scores"]
+  items: Directory[]
+  scores: Array<{ total: number }>
  totalMatched: number
  totalDirs: number
 }

 export interface MixedSearch {
-  items: MixedItem[]
-  scores: MixedSearchResult["scores"]
+  items: Mixed[]
+  scores: Array<{ total: number }>
  totalMatched: number
  totalFiles: number
  totalDirs: number
 }

-export type File = FileItem
-export type Directory = DirItem
-export type Mixed = MixedItem
-export type Cursor = GrepCursor | null
-export type Hit = GrepMatch
+export type Cursor = null
+
+export interface Hit {
+  relativePath: string
+  fileName: string
+  lineNumber: number
+  byteOffset: number
+  lineContent: string
+  matchRanges: [number, number][]
+  contextBefore?: string[]
+  contextAfter?: string[]
+}

 export interface Grep {
-  items: GrepResult["items"]
+  items: Hit[]
  totalMatched: number
  totalFilesSearched: number
  totalFiles: number
@@ -109,30 +128,11 @@ export interface Picker {
 }

 export function available() {
-  return FileFinder?.isAvailable() ?? false
+  return false
 }

-export function create(opts: Init): Result<Picker> {
-  if (!FileFinder) return { ok: false, error: "fff unavailable on node runtime" }
-  const made = FileFinder.create(opts)
-  if (!made.ok) return made
-  const pick = made.value
-  return {
-    ok: true,
-    value: {
-      destroy: () => pick.destroy(),
-      isScanning: () => pick.isScanning(),
-      waitForScan: (timeoutMs) => pick.waitForScan(timeoutMs),
-      refreshGitStatus: () => pick.refreshGitStatus(),
-      fileSearch: (query, next) => pick.fileSearch(query, next),
-      glob: (pattern, next) => pick.glob(pattern, next),
-      directorySearch: (query, next) => pick.directorySearch(query, next),
-      mixedSearch: (query, next) => pick.mixedSearch(query, next),
-      grep: (query, next) => pick.grep(query, next),
-      trackQuery: (query, file) => pick.trackQuery(query, file),
-      getHistoricalQuery: (offset) => pick.getHistoricalQuery(offset),
-    },
-  }
+export function create(_opts: Init): Result<Picker> {
+  return { ok: false, error: "fff unavailable on node runtime" }
 }

 export * as Fff from "./fff.node"
@@ -1,13 +0,0 @@
-import { createRequire } from "node:module"
-
-declare const OPENCODE_LIBC: string | undefined
-
-const require = createRequire(import.meta.url)
-
-export default function load() {
-  const libc = typeof OPENCODE_LIBC === "undefined" ? undefined : OPENCODE_LIBC
-  return require(
-    process.env.OPENCODE_PARCEL_WATCHER_PATH ??
-      `@parcel/watcher-${process.platform}-${process.arch}${process.platform === "linux" ? `-${libc || "glibc"}` : ""}`,
-  )
-}
@@ -9,14 +9,23 @@ import { Cause, Context, Effect, Layer, PubSub, RcMap, Schema, Stream } from "ef
 import { lazy } from "../util/lazy"
 import { watch as watchFileSystem } from "node:fs"
 import path from "path"
-import loadBinding from "./watcher-binding"
+import { createRequire } from "node:module"
+
+declare const OPENCODE_LIBC: string | undefined

 const SUBSCRIBE_TIMEOUT_MS = 10_000
+const require = createRequire(import.meta.url)
+
 export const Event = { Updated: FileSystem.Event.Changed }

 const watcher = lazy((): typeof import("@parcel/watcher") | undefined => {
  try {
-    return createWrapper(loadBinding()) as typeof import("@parcel/watcher")
+    const libc = typeof OPENCODE_LIBC === "undefined" ? undefined : OPENCODE_LIBC
+    const binding = require(
+      process.env.OPENCODE_PARCEL_WATCHER_PATH ??
+        `@parcel/watcher-${process.platform}-${process.arch}${process.platform === "linux" ? `-${libc || "glibc"}` : ""}`,
+    )
+    return createWrapper(binding) as typeof import("@parcel/watcher")
  } catch {
    return
  }
@@ -44,7 +44,6 @@ type Active = {
 * here; callers (e.g. `ShellTool`) own that association and store the shell ID.
 */
 export interface Interface {
-  readonly name: () => Effect.Effect<string>
  readonly create: (input: Shell.CreateInput) => Effect.Effect<Shell.Info>
  // Currently running commands only; exited shells are retained for get/output but excluded here.
  readonly list: () => Effect.Effect<Shell.Info[]>
@@ -135,13 +134,6 @@ export const layer = (options?: ShellSelect.Options) => Layer.effect(
      return session.info
    })

-    const resolve = () =>
-      config
-        .entries()
-        .pipe(Effect.map((entries) => ShellSelect.preferred(Config.latest(entries, "shell"), options)))
-
-    const name = () => resolve().pipe(Effect.map(ShellSelect.name))
-
    const output = Effect.fn("Shell.output")(function* (id: Shell.ID, input?: Shell.OutputInput) {
      const session = yield* require(id)
      const cursor = input?.cursor ?? 0
@@ -175,7 +167,8 @@ export const layer = (options?: ShellSelect.Options) => Layer.effect(
    const create = Effect.fn("Shell.create")(function* (input: Shell.CreateInput) {
      const id = Shell.ID.ascending()
      const cwd = input.cwd ?? location.directory
-      const shell = yield* resolve()
+      const configShell = Config.latest(yield* config.entries(), "shell")
+      const shell = ShellSelect.preferred(configShell, options)
      const args = ShellSelect.args(shell, input.command)
      const file = path.join(outputDir, `${id}.out`)
      const env = {
@@ -319,7 +312,7 @@ export const layer = (options?: ShellSelect.Options) => Layer.effect(
      return session.info
    })

-    return Service.of({ name, create, list, get, wait, timeout, output, remove })
+    return Service.of({ create, list, get, wait, timeout, output, remove })
  }),
 )

@@ -15,40 +15,22 @@ import { Shell } from "../../shell"

 export const name = "shell"
 export const DEFAULT_TIMEOUT_MS = 2 * 60 * 1_000
+export const MAX_TIMEOUT_MS = 10 * 60 * 1_000
 export const MAX_CAPTURE_BYTES = 1024 * 1024

 const BACKGROUND_STARTED = "The command was moved to the background."
 const BACKGROUND_INSTRUCTION =
  "You will be notified automatically when the command finishes. DO NOT sleep, poll, or proactively check on its progress."
-const OS =
-  process.platform === "darwin"
-    ? "macOS"
-    : process.platform === "win32"
-      ? "Windows"
-      : process.platform === "linux"
-        ? "Linux"
-        : process.platform
-const description = (shell?: string) =>
-  [
-    "Execute a shell command and return its output.",
-    ...(shell ? [`Commands run on ${OS} using ${shell}.`] : []),
-    "Quote file paths containing spaces or special characters.",
-    "Prefer dedicated tools over shell commands when possible.",
-    "When output is large, the full result is saved to a file and a truncated preview is returned.",
-    "Rely on automatic truncation unless filtering the output is more useful.",
-    "Commands accept an optional timeout, background commands have no timeout by default.",
-    "Background commands return immediately, and you will be notified when they complete.",
-  ].join(" ")

 export const Input = Schema.Struct({
  command: Schema.String.annotate({ description: "Shell command string to execute" }),
  workdir: Schema.optionalKey(Schema.String).annotate({
-    description:
-      "Working directory to execute the command in. Defaults to the current working directory. When possible, avoid changing directories in the command and set the working directory here instead.",
-  }),
-  timeout: Schema.optionalKey(NonNegativeInt).annotate({
-    description: `Timeout in milliseconds. Set to 0 to disable the timeout. Defaults to ${DEFAULT_TIMEOUT_MS} for foreground commands. Background commands have no timeout by default.`,
+    description: "Working directory. Defaults to the active Location; relative paths resolve from that Location.",
  }),
+  timeout: Schema.optionalKey(NonNegativeInt.check(Schema.isLessThanOrEqualTo(MAX_TIMEOUT_MS)))
+    .annotate({
+      description: `Optional timeout in milliseconds. Zero means unlimited. Foreground commands default to ${DEFAULT_TIMEOUT_MS}; background commands default to unlimited. May not exceed ${MAX_TIMEOUT_MS}.`,
+    }),
  background: Schema.optionalKey(Schema.Boolean).annotate({
    description:
      "Run the command in the background and return immediately. You will be notified when it completes. DO NOT poll its progress.",
@@ -87,11 +69,13 @@ const modelOutput = (output: Output): string | undefined => {
 // TODO: Port tree-sitter bash / PowerShell parser-based approval reduction.
 // TODO: Port BashArity reusable command-prefix approvals.
 // TODO: Replace token-based command-argument external-directory advisories with parser-based detection.
+// TODO: Restore PowerShell and cmd-specific invocation/path handling on Windows.
 // TODO: Add plugin shell.env environment augmentation once plugin hooks exist.
 // TODO: Persist job status and define restart recovery before exposing remote observation.
 // TODO: Add HTTP job observation only after durable status, restart recovery, and authorization are defined.
 // TODO: Revisit process-group cleanup and platform coverage with shell-specific tests if current AppProcess semantics do not fully cover it.
 // TODO: Revisit binary output handling if stdout/stderr decoding is text-only.
+// TODO: Stream full shell output into managed storage while retaining only a bounded in-memory preview.

 const shellTokens = (command: string) => command.match(/(?:[^\s"']+|"[^"]*"|'[^']*')+/g) ?? []
 const unquote = (value: string) => value.replace(/^(['"])(.*)\1$/, "$2")
@@ -160,7 +144,7 @@ export const Plugin = {
          ({
            name,
            options: { codemode: false },
-            description: description(),
+            description: `Execute one shell command string with the host user's filesystem, process, and network authority. The active Location is the default working directory. Relative workdir values resolve from that Location. External workdir values require external_directory approval; best-effort command-argument path warnings are advisory only. An optional timeout may be provided in milliseconds (zero: unlimited; foreground default: ${DEFAULT_TIMEOUT_MS}; maximum: ${MAX_TIMEOUT_MS}). Background commands default to unlimited. Uses the configured shell when set; otherwise uses /bin/sh on POSIX and COMSPEC or cmd.exe on Windows. Background mode (background=true) launches the command asynchronously and returns immediately; you are notified when it finishes.`,
            input: Input,
            output: Output,
            execute: (input, context) =>
@@ -205,12 +189,8 @@ export const Plugin = {
                yield* context.progress({ shellID: info.id })

                const captureShell = Effect.fn("ShellTool.captureShell")(function* () {
-                  const latest = yield* shell.output(info.id, { cursor: Number.MAX_SAFE_INTEGER })
-                  const truncated = latest.size > MAX_CAPTURE_BYTES
-                  const page = yield* shell.output(info.id, {
-                    cursor: Math.max(0, latest.size - MAX_CAPTURE_BYTES),
-                    limit: MAX_CAPTURE_BYTES,
-                  })
+                  const page = yield* shell.output(info.id, { limit: MAX_CAPTURE_BYTES })
+                  const truncated = page.size > page.cursor
                  const notice = truncated ? `\n\n[output truncated; full output saved to: ${info.file}]` : ""
                  return {
                    output: `${page.output || "(no output)"}${notice}`,
@@ -311,13 +291,5 @@ export const Plugin = {
        ),
      )
      .pipe(Effect.orDie)
-
-    yield* ctx.session.hook("context", (event) =>
-      Effect.gen(function* () {
-        const tool = event.tools[name]
-        if (!tool) return
-        tool.description = description(yield* shell.name())
-      }),
-    )
  }),
 }
@@ -44,6 +44,9 @@ describe("CodeModeInstructions", () => {
  it.effect("renders the initial catalog, semantic deltas, and removal", () =>
    Effect.gen(function* () {
      const initialized = yield* readInitial(CodeModeInstructions.make([echo]))
+      expect(initialized.text).toContain(
+        "The Code Mode catalog and `search` results are the complete set of tools available within Code Mode. Tools presented elsewhere are not available in this runtime.",
+      )
      expect(initialized.text).toContain("## Available tools")
      expect(initialized.text).not.toContain("## Search")
      expect(initialized.text).toContain(`  - ${echo.signature} // Echo text`)
@@ -22,7 +22,7 @@ const createCodeMode = (tools: ReadonlyMap<string, Info>) =>
 test("execute describes invariant Code Mode behavior", () => {
  expect(createCodeMode(new Map()).description).toBe(
    [
-      "Run JavaScript to orchestrate tool calls and compose their results through `{ code }` in a confined Code Mode runtime.",
+      "Run JavaScript in a confined Code Mode runtime to orchestrate tool calls and compose their results.",
      "Imports, direct filesystem access, and timers are unavailable. Do not use `fetch`; all external access goes through `tools`.",
      "Within `{ code }`, the only callable tools are those explicitly listed in the Code Mode catalog instructions or returned by `search`. Inside `{ code }`, ignore tools shown outside the Code Mode catalog. They are not available in the Code Mode runtime.",
      'Call tools through `tools` using only exact paths and signatures from the catalog. Do not infer or normalize tool names; preserve bracket notation such as `tools.<namespace>["tool-name"](input)`.',
@@ -165,8 +165,8 @@ const bodyExitCommand = isWindows
  : "printf body && exit 7"
 const overflowCommand = (bytes: number) =>
  isWindows
-    ? `[Console]::Out.Write('output-start' + ('x' * ${bytes}) + 'output-end'); Start-Sleep -Milliseconds 100`
-    : `printf output-start; head -c ${bytes} /dev/zero | tr '\\0' 'x'; printf output-end`
+    ? `[Console]::Out.Write(('x' * ${bytes})); Start-Sleep -Milliseconds 100`
+    : `head -c ${bytes} /dev/zero | tr '\\0' 'x'`
 const progressOverflowCommand = (bytes: number, release: string) =>
  isWindows
    ? `[Console]::Out.Write(('x' * ${bytes})); while (!(Test-Path -LiteralPath '${release}')) { Start-Sleep -Milliseconds 50 }`
@@ -200,11 +200,10 @@ describe("ShellTool", () => {
        return withSession(tmp.path, (registry) =>
          Effect.gen(function* () {
            const definitions = yield* toolDefinitions(registry)
-            const definition = definitions.find((tool) => tool.name === "shell")
-            expect(definition?.description).toStartWith("Execute a shell command and return its output.")
-            expect(definition?.inputSchema).not.toHaveProperty("properties.timeout.maximum")
+            const shell = definitions.find((tool) => tool.name === "shell")
+            expect(shell).toBeDefined()
            // Code Mode receives the declared output schema, including the command output text.
-            expect(definition?.outputSchema).toHaveProperty("properties.output")
+            expect(shell?.outputSchema).toHaveProperty("properties.output")
            expect(
              (yield* toolDefinitions(registry, [{ action: "shell", resource: "*", effect: "deny" }])).map(
                (tool) => tool.name,
@@ -410,11 +409,7 @@ describe("ShellTool", () => {
          Effect.andThen((settled) =>
            Effect.sync(() => {
              expect(settled.metadata).toMatchObject({ exit: 0, truncated: true })
-              const content = settled.content?.[0]
-              if (!content || content.type !== "text") throw new Error("Expected text content")
-              expect(content.text.includes("output-start")).toBe(false)
-              expect(content.text.includes("output-end")).toBe(true)
-              expect(content).toMatchObject({
+              expect(settled.content?.[0]).toMatchObject({
                type: "text",
                text: expect.stringContaining("output truncated; full output saved to:"),
              })
@@ -32,8 +32,7 @@
  "peerDependencies": {
    "@opentui/core": ">=0.4.5",
    "@opentui/keymap": ">=0.4.5",
-    "@opentui/solid": ">=0.4.5",
-    "solid-js": ">=1.9.0"
+    "@opentui/solid": ">=0.4.5"
  },
  "peerDependenciesMeta": {
    "@opentui/core": {
@@ -44,9 +43,6 @@
    },
    "@opentui/solid": {
      "optional": true
-    },
-    "solid-js": {
-      "optional": true
    }
  },
  "devDependencies": {
@@ -56,7 +52,6 @@
    "@tsconfig/bun": "catalog:",
    "@tsconfig/node22": "catalog:",
    "@types/node": "catalog:",
-    "solid-js": "catalog:",
    "typescript": "catalog:",
    "@typescript/native-preview": "catalog:"
  }
@@ -230,11 +230,11 @@ export interface DialogSelectOptions<Value> {
 }

 export interface Dialog {
-  /** Shows a dialog. */
-  show(render: () => JSX.Element, onClose?: () => void): void
-  /** Sets the active dialog's presentation options. */
+  /** Shows a dialog and returns a function that closes it. */
+  show(render: () => JSX.Element, onClose?: () => void): () => void
+  /** Sets the presentation options for this plugin's active dialog. */
  set(options: DialogOptions): void
-  /** Closes the active dialog. */
+  /** Closes this plugin's active dialog. */
  clear(): void
  alert(options: DialogAlertOptions): Promise<void>
  confirm(options: DialogConfirmOptions): Promise<boolean | undefined>
@@ -1,2 +1 @@
 export * as Plugin from "./plugin.js"
-export { PluginContextProvider, usePlugin } from "./solid.js"
@@ -1,19 +0,0 @@
-import { createComponent, createContext, useContext, type JSX } from "solid-js"
-import type { Context } from "./context.js"
-
-const PluginContext = createContext<Context>()
-
-export function PluginContextProvider(props: { readonly value: Context; readonly children: JSX.Element }) {
-  return createComponent(PluginContext.Provider, {
-    value: props.value,
-    get children() {
-      return props.children
-    },
-  })
-}
-
-export function usePlugin() {
-  const context = useContext(PluginContext)
-  if (!context) throw new Error("PluginContextProvider is missing")
-  return context
-}
@@ -11,6 +11,7 @@
  },
  "exports": {
    ".": "./src/index.tsx",
+    "./builtins": "./src/feature-plugins/builtins.ts",
    "./config": "./src/config/index.tsx",
    "./config/keybind": "./src/config/keybind.ts",
    "./config/v1": "./src/config/v1/index.tsx",
@@ -36,6 +37,9 @@
    "./context/keymap": "./src/context/keymap.tsx",
    "./prompt/content": "./src/prompt/content.ts",
    "./prompt/display": "./src/prompt/display.ts",
+    "./plugin/runtime": "./src/plugin/runtime.tsx",
+    "./plugin/slots": "./src/plugin/slots.tsx",
+    "./plugin/command-shim": "./src/plugin/command-shim.ts",
    "./parsers-config": "./src/parsers-config.ts",
    "./util/error": "./src/util/error.ts",
    "./util/filetype": "./src/util/filetype.ts",
@@ -51,7 +51,6 @@ import { StartupLoading } from "./component/startup-loading"
 import { DevToolsBar } from "./component/devtools-bar"
 import { Reconnecting } from "./component/reconnecting"
 import { DataProvider, useData } from "./context/data"
-import { SessionTabsProvider, useSessionTabs } from "./context/session-tabs"
 import { LocationProvider, useLocation } from "./context/location"
 import { LocalProvider, useLocal } from "./context/local"
 import { PermissionProvider } from "./context/permission"
@@ -66,9 +65,8 @@ import { DialogThemeList } from "./component/dialog-theme-list"
 import { DialogHelp } from "./ui/dialog-help"
 import { DialogAgent } from "./component/dialog-agent"
 import { DialogSessionList } from "./component/dialog-session-list"
-import { SessionTabs } from "./component/session-tabs"
 import { ThemeErrorToast } from "./component/theme-error-toast"
-import { ThemeProvider, useTheme, useThemes } from "./context/theme"
+import { ThemeProvider, useTheme } from "./context/theme"
 import { Home } from "./routes/home"
 import { Session } from "./routes/session"
 import { PromptHistoryProvider } from "./component/prompt/history"
@@ -81,6 +79,7 @@ import { ArgsProvider, useArgs, type Args } from "./context/args"
 import open from "open"
 import { PromptRefProvider, usePromptRef } from "./context/prompt"
 import { Config, ConfigProvider, useConfig } from "./config"
+import { createPluginRuntime, PluginRuntimeProvider, usePluginRuntime } from "./plugin/runtime"
 import { PluginProvider, PluginRoute, PluginSlot, usePlugin, type PackageResolver } from "./plugin/context"
 import { CommandPaletteDialog } from "./component/command-palette"
 import { COMMAND_PALETTE_COMMAND, Keymap, type KeymapCommand } from "./context/keymap"
@@ -93,28 +92,9 @@ import { AttentionProvider } from "./context/attention"

 registerOpencodeSpinner()

-const appGlobalBindingCommands = ["session.list", "session.new"] as const
-
-const sessionTabBindingCommands = [
-  "session.tab.next",
-  "session.tab.previous",
-  "session.tab.history.back",
-  "session.tab.history.forward",
-  "session.tab.next_unread",
-  "session.tab.previous_unread",
-  "session.tab.close",
-  "session.tab.select.1",
-  "session.tab.select.2",
-  "session.tab.select.3",
-  "session.tab.select.4",
-  "session.tab.select.5",
-  "session.tab.select.6",
-  "session.tab.select.7",
-  "session.tab.select.8",
-  "session.tab.select.9",
-] as const
-
-const pinnedSessionBindingCommands = [
+const appGlobalBindingCommands = [
+  "session.list",
+  "session.new",
  "session.quick_switch.1",
  "session.quick_switch.2",
  "session.quick_switch.3",
@@ -274,6 +254,8 @@ export const run = Effect.fn("Tui.run")(function* (input: TuiInput) {
        () => Effect.sync(() => process.off("SIGHUP", onSighup)),
      )
      renderer.once("destroy", () => Deferred.doneUnsafe(shutdown, Effect.void))
+      const pluginRuntime = createPluginRuntime()
+
      yield* Effect.tryPromise(async () => {
        // Prewarm palette before ThemeProvider mounts so `system` theme avoids a first-paint fallback flash.
        void renderer.getPalette({ size: 16 }).catch(() => undefined)
@@ -295,113 +277,113 @@ export const run = Effect.fn("Tui.run")(function* (input: TuiInput) {
                    <ErrorBoundary
                      fallback={(error, reset) => <ErrorComponent error={error} reset={reset} mode={mode} />}
                    >
-                      <TuiPathsProvider
+                    <TuiPathsProvider
+                      value={{
+                        cwd: process.cwd(),
+                        home: global.home,
+                        state: global.state,
+                        worktree: global.data + "/worktree",
+                      }}
+                    >
+                      <TuiLifecycleProvider
                        value={{
-                          cwd: process.cwd(),
-                          home: global.home,
-                          state: global.state,
-                          worktree: global.data + "/worktree",
+                          add(finalizer) {
+                            finalizers.add(finalizer)
+                            return () => finalizers.delete(finalizer)
+                          },
                        }}
                      >
-                        <TuiLifecycleProvider
+                        <TuiTerminalEnvironmentProvider
                          value={{
-                            add(finalizer) {
-                              finalizers.add(finalizer)
-                              return () => finalizers.delete(finalizer)
-                            },
+                            platform: process.platform,
+                            multiplexer: process.env.TMUX ? "tmux" : process.env.STY ? "screen" : undefined,
+                            displayServer: process.env.WAYLAND_DISPLAY
+                              ? "wayland"
+                              : process.env.DISPLAY
+                                ? "x11"
+                                : undefined,
                          }}
                        >
-                          <TuiTerminalEnvironmentProvider
+                          <TuiStartupProvider
                            value={{
-                              platform: process.platform,
-                              multiplexer: process.env.TMUX ? "tmux" : process.env.STY ? "screen" : undefined,
-                              displayServer: process.env.WAYLAND_DISPLAY
-                                ? "wayland"
-                                : process.env.DISPLAY
-                                  ? "x11"
+                              initialRoute: process.env.OPENCODE_SCRAP
+                                ? { type: "plugin", id: "scrap", name: "scrap" }
+                                : process.env.OPENCODE_ROUTE
+                                  ? JSON.parse(process.env.OPENCODE_ROUTE)
                                  : undefined,
+                              skipInitialLoading: Boolean(process.env.OPENCODE_FAST_BOOT),
                            }}
                          >
-                            <TuiStartupProvider
-                              value={{
-                                initialRoute: process.env.OPENCODE_SCRAP
-                                  ? { type: "plugin", id: "scrap", name: "scrap" }
-                                  : process.env.OPENCODE_ROUTE
-                                    ? JSON.parse(process.env.OPENCODE_ROUTE)
-                                    : undefined,
-                                skipInitialLoading: Boolean(process.env.OPENCODE_FAST_BOOT),
-                              }}
-                            >
-                              <ClipboardProvider>
-                                <ArgsProvider {...input.args}>
-                                  <ConfigProvider
-                                    config={config}
-                                    service={input.config}
-                                    options={{ terminalSuspend: process.platform !== "win32" }}
-                                  >
-                                    <Keymap.Provider>
-                                      <ToastProvider>
-                                        <RouteProvider
-                                          initialRoute={
-                                            input.args.continue
-                                              ? {
-                                                  type: "session",
-                                                  sessionID: "dummy",
-                                                }
-                                              : undefined
-                                          }
-                                        >
+                            <ClipboardProvider>
+                              <ArgsProvider {...input.args}>
+                                <ConfigProvider
+                                  config={config}
+                                  service={input.config}
+                                  options={{ terminalSuspend: process.platform !== "win32" }}
+                                >
+                                  <Keymap.Provider>
+                                    <ToastProvider>
+                                      <RouteProvider
+                                        initialRoute={
+                                          input.args.continue
+                                            ? {
+                                                type: "session",
+                                                sessionID: "dummy",
+                                              }
+                                            : undefined
+                                        }
+                                      >
+                                        <PluginRuntimeProvider value={pluginRuntime}>
                                          <ClientProvider api={api} service={service}>
                                            <PermissionProvider>
                                              <DataProvider>
                                                <LocationProvider>
-                                                  <SessionTabsProvider>
-                                                    <ThemeProvider mode={mode}>
-                                                      <ThemeErrorToast />
-                                                      <LocalProvider>
-                                                        <PromptStashProvider>
-                                                          <DialogProvider>
-                                                            <FrecencyProvider>
-                                                              <PromptHistoryProvider>
-                                                                <PromptRefProvider>
-                                                                  <EditorContextProvider>
-                                                                    <AttentionProvider>
-                                                                      <PluginProvider packages={input.packages}>
-                                                                        <App
-                                                                          pair={
-                                                                            input.server.endpoint.auth
-                                                                              ? input.server.endpoint.auth
-                                                                              : {
-                                                                                  username: "opencode",
-                                                                                  password: "",
-                                                                                }
-                                                                          }
-                                                                        />
-                                                                      </PluginProvider>
-                                                                    </AttentionProvider>
-                                                                  </EditorContextProvider>
-                                                                </PromptRefProvider>
-                                                              </PromptHistoryProvider>
-                                                            </FrecencyProvider>
-                                                          </DialogProvider>
-                                                        </PromptStashProvider>
-                                                      </LocalProvider>
-                                                    </ThemeProvider>
-                                                  </SessionTabsProvider>
+                                                  <ThemeProvider mode={mode}>
+                                                    <ThemeErrorToast />
+                                                    <LocalProvider>
+                                                      <PromptStashProvider>
+                                                        <DialogProvider>
+                                                          <FrecencyProvider>
+                                                            <PromptHistoryProvider>
+                                                              <PromptRefProvider>
+                                                                <EditorContextProvider>
+                                                                  <AttentionProvider>
+                                                                    <PluginProvider packages={input.packages}>
+                                                                      <App
+                                                                        pair={
+                                                                          input.server.endpoint.auth
+                                                                            ? input.server.endpoint.auth
+                                                                            : {
+                                                                                username: "opencode",
+                                                                                password: "",
+                                                                              }
+                                                                        }
+                                                                      />
+                                                                    </PluginProvider>
+                                                                  </AttentionProvider>
+                                                                </EditorContextProvider>
+                                                              </PromptRefProvider>
+                                                            </PromptHistoryProvider>
+                                                          </FrecencyProvider>
+                                                        </DialogProvider>
+                                                      </PromptStashProvider>
+                                                    </LocalProvider>
+                                                  </ThemeProvider>
                                                </LocationProvider>
                                              </DataProvider>
                                            </PermissionProvider>
                                          </ClientProvider>
-                                        </RouteProvider>
-                                      </ToastProvider>
-                                    </Keymap.Provider>
-                                  </ConfigProvider>
-                                </ArgsProvider>
-                              </ClipboardProvider>
-                            </TuiStartupProvider>
-                          </TuiTerminalEnvironmentProvider>
-                        </TuiLifecycleProvider>
-                      </TuiPathsProvider>
+                                        </PluginRuntimeProvider>
+                                      </RouteProvider>
+                                    </ToastProvider>
+                                  </Keymap.Provider>
+                                </ConfigProvider>
+                              </ArgsProvider>
+                            </ClipboardProvider>
+                          </TuiStartupProvider>
+                        </TuiTerminalEnvironmentProvider>
+                      </TuiLifecycleProvider>
+                    </TuiPathsProvider>
                    </ErrorBoundary>
                  </TuiAppProvider>
                </EpilogueProvider>
@@ -437,17 +419,17 @@ function App(props: { pair?: DialogPairCredentials }) {
  const renderer = useRenderer()
  const dialog = useDialog()
  const local = useLocal()
-  const sessionTabs = useSessionTabs()
  const keymap = Keymap.use()
  const event = useEvent()
  const client = useClient()
  const toast = useToast()
-  const theme = useTheme()
-  const { mode, supports, setMode, locked, lock, unlock } = useThemes()
+  const themeState = useTheme()
+  const { themeV2, mode, supports, setMode, locked, lock, unlock } = themeState
  const data = useData()
  const location = useLocation()
  const exit = useExit()
  const promptRef = usePromptRef()
+  const pluginRuntime = usePluginRuntime()
  const plugins = usePlugin()
  const clipboard = useClipboard()

@@ -641,71 +623,9 @@ function App(props: { pair?: DialogPairCredentials }) {
        title: `Switch to session in quick slot ${i + 1}`,
        category: "Session",
        palette: undefined,
-        enabled: () => !sessionTabs.enabled(),
-        run: () => local.session.quickSwitch(i + 1),
-      })),
-      {
-        name: "session.tab.next",
-        title: "Next open session tab",
-        category: "Session",
-        palette: undefined,
-        enabled: sessionTabs.enabled,
-        run: () => sessionTabs.cycle(1),
-      },
-      {
-        name: "session.tab.previous",
-        title: "Previous open session tab",
-        category: "Session",
-        palette: undefined,
-        enabled: sessionTabs.enabled,
-        run: () => sessionTabs.cycle(-1),
-      },
-      {
-        name: "session.tab.history.back",
-        title: "Back in session tab history",
-        category: "Session",
-        palette: undefined,
-        enabled: sessionTabs.enabled,
-        run: () => sessionTabs.history(-1),
-      },
-      {
-        name: "session.tab.history.forward",
-        title: "Forward in session tab history",
-        category: "Session",
-        palette: undefined,
-        enabled: sessionTabs.enabled,
-        run: () => sessionTabs.history(1),
-      },
-      {
-        name: "session.tab.next_unread",
-        title: "Next unread session tab",
-        category: "Session",
-        palette: undefined,
-        enabled: sessionTabs.enabled,
-        run: () => sessionTabs.cycleUnread(1),
-      },
-      {
-        name: "session.tab.previous_unread",
-        title: "Previous unread session tab",
-        category: "Session",
-        palette: undefined,
-        enabled: sessionTabs.enabled,
-        run: () => sessionTabs.cycleUnread(-1),
-      },
-      {
-        name: "session.tab.close",
-        title: "Close current session tab",
-        category: "Session",
-        enabled: sessionTabs.enabled,
-        run: () => sessionTabs.close(),
-      },
-      ...Array.from({ length: 9 }, (_, i) => ({
-        name: `session.tab.select.${i + 1}`,
-        title: `Switch to session tab ${i + 1}`,
-        category: "Session",
-        palette: undefined,
-        enabled: sessionTabs.enabled,
-        run: () => sessionTabs.selectIndex(i),
+        run: () => {
+          local.session.quickSwitch(i + 1)
+        },
      })),
      {
        name: "model.list",
@@ -1084,18 +1004,6 @@ function App(props: { pair?: DialogPairCredentials }) {
    bindings: appGlobalBindingCommands,
  }))

-  Keymap.createLayer(() => ({
-    mode: "global",
-    enabled: sessionTabs.enabled,
-    bindings: sessionTabBindingCommands,
-  }))
-
-  Keymap.createLayer(() => ({
-    mode: "global",
-    enabled: () => !sessionTabs.enabled(),
-    bindings: pinnedSessionBindingCommands,
-  }))
-
  Keymap.createLayer(() => ({
    enabled: () => {
      const current = promptRef.current
@@ -1182,7 +1090,7 @@ function App(props: { pair?: DialogPairCredentials }) {
      width={dimensions().width}
      height={dimensions().height}
      flexDirection="column"
-      backgroundColor={theme.background.default}
+      backgroundColor={themeV2.background.default}
      onMouseDown={(evt) => {
        if (copyOnSelectEnabled()) return
        if (evt.button !== MouseButton.RIGHT) return
@@ -1191,15 +1099,16 @@ function App(props: { pair?: DialogPairCredentials }) {
        evt.preventDefault()
        evt.stopPropagation()
      }}
-      onMouseUp={copyOnSelectEnabled() ? () => Selection.copy(renderer, toast, clipboard) : undefined}
+      onMouseUp={
+        copyOnSelectEnabled()
+          ? () => Selection.copy(renderer, toast, clipboard)
+          : undefined
+      }
    >
      <box flexGrow={1} minHeight={0} flexDirection="row">
        <box flexGrow={1} minWidth={0} flexDirection="column">
          <Show when={plugins.ready()}>
            <box flexGrow={1} minHeight={0} flexDirection="column">
-              <Show when={sessionTabs.enabled() && sessionTabs.tabs().length > 0 && route.data.type !== "plugin"}>
-                <SessionTabs />
-              </Show>
              <Switch>
                <Match when={route.data.type === "home"}>
                  <Home />
@@ -7,7 +7,7 @@ import {
 } from "@opentui/core"
 import { extend, useRenderer } from "@opentui/solid"
 import { onCleanup, onMount } from "solid-js"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { tint } from "../theme/color"
 import { GoUpsellArtPainter } from "./bg-pulse-render"

@@ -70,9 +70,7 @@ declare module "@opentui/solid" {
 extend({ go_upsell_art: GoUpsellArtRenderable })

 export function BgPulse() {
-  const themes = useThemes()
-  const theme = themes.contextual("elevated")
-  const mode = themes.mode
+  const { themeV2, mode } = useTheme().contextual("elevated")
  const renderer = useRenderer()
  let targetFps = renderer.targetFps
  let maxFps = renderer.maxFps
@@ -93,9 +91,9 @@ export function BgPulse() {
    <go_upsell_art
      width="100%"
      height="100%"
-      backgroundPanel={theme.background.default}
-      primary={theme.hue.interactive[mode() === "light" ? 800 : 200]}
-      logoBase={tint(theme.background.default, theme.text.default, 0.62)}
+      backgroundPanel={themeV2.background.default}
+      primary={themeV2.hue.interactive[mode() === "light" ? 800 : 200]}
+      logoBase={tint(themeV2.background.default, themeV2.text.default, 0.62)}
      live
    />
  )
@@ -11,7 +11,7 @@ import { useData } from "../context/data"
 import { useLocation } from "../context/location"
 import { useRoute } from "../context/route"
 import { Keymap } from "../context/keymap"
-import { useTheme, useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { DevTools } from "../devtools"
 import { usePlugin } from "../plugin/context"
 import { errorMessage } from "../util/error"
@@ -31,12 +31,12 @@ export function DevToolsBar() {
  const location = useLocation()
  const route = useRoute()
  const plugins = usePlugin()
-  const themes = useThemes()
+  const theme = useTheme()
  const keymap = Keymap.use()
  const renderer = useRenderer()
  const dimensions = useTerminalDimensions()
-  const { current: theme, mode, supports, setMode } = themes
-  const elevatedTheme = themes.contextual("elevated")
+  const { themeV2, mode, supports, setMode } = theme
+  const elevatedTheme = theme.contextual("elevated").themeV2
  const [panel, setPanel] = createSignal<Panel>()
  const [dumping, setDumping] = createSignal(false)
  const [dumpPath, setDumpPath] = createSignal<string>()
@@ -196,8 +196,8 @@ export function DevToolsBar() {
            })),
          },
          theme: {
-            name: themes.selected,
-            mode: themes.mode(),
+            name: theme.selected,
+            mode: theme.mode(),
          },
        },
        null,
@@ -213,7 +213,7 @@ export function DevToolsBar() {
  }

  return (
-    <box height={1} flexShrink={0} flexDirection="row" backgroundColor={theme.raise(theme.background.default)}>
+    <box height={1} flexShrink={0} flexDirection="row" backgroundColor={themeV2.raise(themeV2.background.default)}>
      <Show when={panel()}>
        <box
          position="absolute"
@@ -230,12 +230,12 @@ export function DevToolsBar() {
        <text
          fg={
            panel() === "server"
-              ? theme.text.action.primary.focused
+              ? themeV2.text.action.primary.focused
              : serverIndicator().state === "connected"
-                ? theme.text.feedback.success.default
+                ? themeV2.text.feedback.success.default
                : serverIndicator().state === "disconnected"
-                  ? theme.text.feedback.error.default
-                  : theme.text.default
+                  ? themeV2.text.feedback.error.default
+                  : themeV2.text.default
          }
        >
          {serverIndicator().icon}
@@ -243,10 +243,10 @@ export function DevToolsBar() {
        <text
          fg={
            panel() === "server"
-              ? theme.text.action.primary.focused
+              ? themeV2.text.action.primary.focused
              : serverIndicator().state === "disconnected"
-                ? theme.text.feedback.error.default
-                : theme.text.subdued
+                ? themeV2.text.feedback.error.default
+                : themeV2.text.subdued
          }
        >
          {" "}
@@ -279,10 +279,10 @@ export function DevToolsBar() {
        <text
          fg={
            panel() === "ui"
-              ? theme.text.action.primary.focused
+              ? themeV2.text.action.primary.focused
              : runtime() === "high"
-                ? theme.text.feedback.error.default
-                : theme.text.subdued
+                ? themeV2.text.feedback.error.default
+                : themeV2.text.subdued
          }
        >
          {statusIcon(runtime())}
@@ -290,10 +290,10 @@ export function DevToolsBar() {
        <text
          fg={
            panel() === "ui"
-              ? theme.text.action.primary.focused
+              ? themeV2.text.action.primary.focused
              : runtime() === "high"
-                ? theme.text.feedback.error.default
-                : theme.text.subdued
+                ? themeV2.text.feedback.error.default
+                : themeV2.text.subdued
          }
        >
          {" "}
@@ -320,11 +320,11 @@ export function DevToolsBar() {
        </Show>
      </BarItem>
      <BarItem active={panel() === "theme"} onClick={() => toggle("theme")}>
-        <text fg={panel() === "theme" ? theme.text.action.primary.focused : theme.text.subdued}>Theme</text>
+        <text fg={panel() === "theme" ? themeV2.text.action.primary.focused : themeV2.text.subdued}>Theme</text>
        <Show when={panel() === "theme"}>
          <PanelBox>
            <PanelTitle>Theme</PanelTitle>
-            <Row label="Name" value={themes.selected} />
+            <Row label="Name" value={theme.selected} />
            <Row label="Mode" value={mode()} />
            <For each={themePerformance()}>{(entry) => <Row label={entry.key} value={String(entry.value)} />}</For>
            <Show when={canSwitchMode()}>
@@ -336,7 +336,7 @@ export function DevToolsBar() {
        </Show>
      </BarItem>
      <BarItem active={panel() === "tools"} onClick={() => toggle("tools")}>
-        <text fg={panel() === "tools" ? theme.text.action.primary.focused : theme.text.subdued}>Tools</text>
+        <text fg={panel() === "tools" ? themeV2.text.action.primary.focused : themeV2.text.subdued}>Tools</text>
        <Show when={panel() === "tools"}>
          <PanelBox>
            <PanelTitle>Tools</PanelTitle>
@@ -406,14 +406,14 @@ export function DevToolsBar() {
        </Show>
      </BarItem>
      <box flexGrow={1} minWidth={0}>
-        <TimeToFirstDraw visible={timing()} width="100%" fg={theme.text.subdued} label="Time to first draw" />
+        <TimeToFirstDraw visible={timing()} width="100%" fg={themeV2.text.subdued} label="Time to first draw" />
      </box>
    </box>
  )
 }

 function BarItem(props: ParentProps<{ active: boolean; onClick: () => void }>) {
-  const theme = useTheme()
+  const { themeV2 } = useTheme()
  const renderer = useRenderer()
  return (
    <box
@@ -423,7 +423,7 @@ function BarItem(props: ParentProps<{ active: boolean; onClick: () => void }>) {
      flexDirection="row"
      paddingLeft={1}
      paddingRight={1}
-      backgroundColor={props.active ? theme.background.action.primary.focused : undefined}
+      backgroundColor={props.active ? themeV2.background.action.primary.focused : undefined}
      onMouseUp={() => {
        if (renderer.getSelection()?.getSelectedText()) return
        props.onClick()
@@ -435,7 +435,7 @@ function BarItem(props: ParentProps<{ active: boolean; onClick: () => void }>) {
 }

 function PanelBox(props: ParentProps) {
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const renderer = useRenderer()
  return (
    <box
@@ -448,7 +448,7 @@ function PanelBox(props: ParentProps) {
      paddingRight={2}
      paddingTop={1}
      paddingBottom={1}
-      backgroundColor={theme.background.default}
+      backgroundColor={themeV2.background.default}
      flexDirection="column"
      onMouseUp={(event) => {
        if (renderer.getSelection()?.getSelectedText()) return
@@ -461,32 +461,32 @@ function PanelBox(props: ParentProps) {
 }

 function PanelTitle(props: ParentProps) {
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  return (
-    <text fg={theme.text.default} attributes={TextAttributes.BOLD} marginBottom={1}>
+    <text fg={themeV2.text.default} attributes={TextAttributes.BOLD} marginBottom={1}>
      {props.children}
    </text>
  )
 }

 function Row(props: { label: string; value: string }) {
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  return (
    <box flexDirection="row">
-      <text fg={theme.text.subdued}>{props.label}</text>
+      <text fg={themeV2.text.subdued}>{props.label}</text>
      <box flexGrow={1} />
-      <text fg={theme.text.default}>{props.value}</text>
+      <text fg={themeV2.text.default}>{props.value}</text>
    </box>
  )
 }

 function Action(props: ParentProps<{ onClick: () => void; disabled?: boolean; hoverBackground?: boolean }>) {
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const [hovered, setHovered] = createSignal(false)
  return (
    <box
      backgroundColor={
-        props.hoverBackground && hovered() && !props.disabled ? theme.background.action.primary.hovered : undefined
+        props.hoverBackground && hovered() && !props.disabled ? themeV2.background.action.primary.hovered : undefined
      }
      onMouseOver={() => setHovered(true)}
      onMouseOut={() => setHovered(false)}
@@ -495,7 +495,7 @@ function Action(props: ParentProps<{ onClick: () => void; disabled?: boolean; ho
        if (!props.disabled) props.onClick()
      }}
    >
-      <text fg={props.disabled ? theme.text.subdued : theme.text.action.primary.default}>{props.children}</text>
+      <text fg={props.disabled ? themeV2.text.subdued : themeV2.text.action.primary.default}>{props.children}</text>
    </box>
  )
 }
@@ -506,7 +506,7 @@ function cpuPercent(microseconds: number, milliseconds: number) {
 }

 function ProcessStat(props: { label: string; values: readonly number[]; unit: string; decimals?: number }) {
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const value = () => {
    const value = props.values.at(-1)
    if (value === undefined) return "--"
@@ -515,13 +515,13 @@ function ProcessStat(props: { label: string; values: readonly number[]; unit: st
  return (
    <box flexDirection="row">
      <box width={7}>
-        <text fg={theme.text.subdued}>{props.label}</text>
+        <text fg={themeV2.text.subdued}>{props.label}</text>
      </box>
      <box flexGrow={1}>
-        <text fg={props.values.length ? theme.text.default : theme.text.subdued}>{brailleGraph(props.values)}</text>
+        <text fg={props.values.length ? themeV2.text.default : themeV2.text.subdued}>{brailleGraph(props.values)}</text>
      </box>
      <box width={8} alignItems="flex-end">
-        <text fg={props.values.length ? theme.text.default : theme.text.subdued}>{value()}</text>
+        <text fg={props.values.length ? themeV2.text.default : themeV2.text.subdued}>{value()}</text>
      </box>
    </box>
  )
@@ -1,6 +1,6 @@
 import { createMemo, createSignal } from "solid-js"
 import { useConfig } from "../config"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { DialogSelect } from "../ui/dialog-select"
 import { useToast } from "../ui/toast"

@@ -93,14 +93,6 @@ export const settings: Setting[] = [
    values: ["none", "auto"],
    keywords: ["transcript", "messages"],
  },
-  {
-    title: "Enabled",
-    category: "Tabs",
-    path: ["tabs", "enabled"],
-    default: false,
-    values: [false, true],
-    labels: ["off", "on"],
-  },
  {
    title: "Layout",
    category: "Diffs",
@@ -275,7 +267,7 @@ export function settingID(setting: Setting) {
 export function DialogConfig(props: { current?: string }) {
  const config = useConfig()
  const toast = useToast()
-  const themes = useThemes()
+  const themeState = useTheme()
  const current = Math.max(
    0,
    settings.findIndex((setting) => settingID(setting) === props.current),
@@ -288,12 +280,12 @@ export function DialogConfig(props: { current?: string }) {
      if (!result || typeof result !== "object") return undefined
      return (result as Record<string, unknown>)[key]
    }, config.data)
-    if (setting.path.join(".") === "theme.name") return current ?? themes.selected
+    if (setting.path.join(".") === "theme.name") return current ?? themeState.selected
    return current ?? setting.default
  }
  const values = (setting: Setting) =>
    setting.path.join(".") === "theme.name"
-      ? Object.keys(themes.all()).sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }))
+      ? Object.keys(themeState.all()).sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }))
      : setting.values
  const display = (setting: Setting) => {
    const current = value(setting)
@@ -11,7 +11,7 @@ import { describeOS, describeTerminal } from "../util/system"
 import { useTuiApp } from "../context/runtime"

 export function DialogDebug() {
-  const theme = useTheme()
+  const { themeV2 } = useTheme()
  const dialog = useDialog()
  const route = useRoute()
  const local = useLocal()
@@ -55,10 +55,10 @@ export function DialogDebug() {
  return (
    <box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}>
      <box flexDirection="row" justifyContent="space-between">
-        <text fg={theme.text.default} attributes={TextAttributes.BOLD}>
+        <text fg={themeV2.text.default} attributes={TextAttributes.BOLD}>
          Debug
        </text>
-        <text fg={theme.text.subdued} onMouseUp={() => dialog.clear()}>
+        <text fg={themeV2.text.subdued} onMouseUp={() => dialog.clear()}>
          esc
        </text>
      </box>
@@ -68,10 +68,10 @@ export function DialogDebug() {
        <For each={entries()}>
          {(entry) => (
            <box flexDirection="row" gap={1}>
-              <text flexShrink={0} fg={theme.text.subdued}>
+              <text flexShrink={0} fg={themeV2.text.subdued}>
                {entry.label.padEnd(10)}
              </text>
-              <text fg={theme.text.default} wrapMode="word">
+              <text fg={themeV2.text.default} wrapMode="word">
                {entry.value}
              </text>
            </box>
@@ -79,12 +79,12 @@ export function DialogDebug() {
        </For>
      </box>
      <box flexDirection="row" justifyContent="space-between">
-        <text fg={theme.text.subdued}>Share this when reporting an issue.</text>
+        <text fg={themeV2.text.subdued}>Share this when reporting an issue.</text>
        <text onMouseUp={copy}>
-          <span style={{ fg: copied() ? theme.text.feedback.success.default : theme.text.default }}>
+          <span style={{ fg: copied() ? themeV2.text.feedback.success.default : themeV2.text.default }}>
            <b>{copied() ? "✓ copied" : "copy"}</b>{" "}
          </span>
-          <span style={{ fg: theme.text.subdued }}>enter</span>
+          <span style={{ fg: themeV2.text.subdued }}>enter</span>
        </text>
      </box>
    </box>
@@ -11,7 +11,7 @@ import { useClipboard } from "../context/clipboard"
 import { useData } from "../context/data"
 import { useClient } from "../context/client"
 import { Keymap } from "../context/keymap"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { useDialog } from "../ui/dialog"
 import { DialogPrompt } from "../ui/dialog-prompt"
 import { DialogSelect } from "../ui/dialog-select"
@@ -64,7 +64,7 @@ export function DialogIntegration(
 ) {
  const data = useData()
  const dialog = useDialog()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const options = createMemo(() => {
    const providers = data.location.websearch.list() ?? []
    const providersByID = new Map(providers.map((provider) => [provider.id, provider]))
@@ -87,7 +87,7 @@ export function DialogIntegration(
        disabled: methods.length === 0 && credentials.length === 0,
        gutter:
          integration.connections.length > 0
-            ? () => <text fg={theme.text.feedback.success.default}>✓</text>
+            ? () => <text fg={themeV2.text.feedback.success.default}>✓</text>
            : undefined,
        onSelect: () => {
          if (credentials.length) return manageConnections(integration, methods, dialog, props.onConnected)
@@ -103,12 +103,12 @@ export function DialogIntegration(
      options={options()}
      emptyView={
        <box paddingLeft={4} paddingRight={4} paddingTop={1}>
-          <text fg={theme.text.subdued}>No integrations available</text>
+          <text fg={themeV2.text.subdued}>No integrations available</text>
        </box>
      }
      noMatchView={
        <box paddingLeft={4} paddingRight={4} paddingTop={1}>
-          <text fg={theme.text.subdued}>No integrations found</text>
+          <text fg={themeV2.text.subdued}>No integrations found</text>
        </box>
      }
    />
@@ -303,16 +303,16 @@ function CommandPending(props: {

 function CommandView(props: { title: string; output: string; message: string }) {
  const dialog = useDialog()
-  const theme = useThemes().contextual("elevated")
-  const overlayTheme = useThemes().contextual("overlay")
+  const { themeV2 } = useTheme().contextual("elevated")
+  const { themeV2: overlayTheme } = useTheme().contextual("overlay")
  onMount(() => dialog.setSize("large"))
  return (
    <box gap={1} paddingBottom={1}>
      <box flexDirection="row" justifyContent="space-between" paddingLeft={2} paddingRight={2}>
-        <text attributes={TextAttributes.BOLD} fg={theme.text.default}>
+        <text attributes={TextAttributes.BOLD} fg={themeV2.text.default}>
          {props.title}
        </text>
-        <text fg={theme.text.subdued} onMouseUp={() => dialog.clear()}>
+        <text fg={themeV2.text.subdued} onMouseUp={() => dialog.clear()}>
          esc close
        </text>
      </box>
@@ -326,7 +326,7 @@ function CommandView(props: { title: string; output: string; message: string })
        <text fg={overlayTheme.text.default}>{props.output.trim()}</text>
      </box>
      <box paddingLeft={2} paddingRight={2}>
-        <text fg={theme.text.subdued}>{props.message}</text>
+        <text fg={themeV2.text.subdued}>{props.message}</text>
      </box>
    </box>
  )
@@ -341,7 +341,7 @@ function KeyMethod(props: {
  const dialog = useDialog()
  const client = useClient()
  const toast = useToast()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const [error, setError] = createSignal<string>()

  return (
@@ -360,7 +360,7 @@ function KeyMethod(props: {
          .catch((cause) => setError(message(cause)))
      }}
      description={() => (
-        <Show when={error()}>{(value) => <text fg={theme.text.feedback.error.default}>{value()}</text>}</Show>
+        <Show when={error()}>{(value) => <text fg={themeV2.text.feedback.error.default}>{value()}</text>}</Show>
      )}
    />
  )
@@ -516,7 +516,7 @@ function OAuthCode(props: {
  const dialog = useDialog()
  const client = useClient()
  const toast = useToast()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const [error, setError] = createSignal<string>()
  let settled = false

@@ -550,9 +550,9 @@ function OAuthCode(props: {
      }}
      description={() => (
        <box gap={1}>
-          <text fg={theme.text.subdued}>{props.attempt.instructions}</text>
-          <Link href={props.attempt.url} fg={theme.markdown.link} />
-          <Show when={error()}>{(value) => <text fg={theme.text.feedback.error.default}>{value()}</text>}</Show>
+          <text fg={themeV2.text.subdued}>{props.attempt.instructions}</text>
+          <Link href={props.attempt.url} fg={themeV2.markdown.link} />
+          <Show when={error()}>{(value) => <text fg={themeV2.text.feedback.error.default}>{value()}</text>}</Show>
        </box>
      )}
    />
@@ -561,31 +561,31 @@ function OAuthCode(props: {

 function OAuthView(props: { title: string; url?: string; instructions?: string; message: string; copy?: boolean }) {
  const dialog = useDialog()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  return (
    <box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}>
      <box flexDirection="row" justifyContent="space-between">
-        <text attributes={TextAttributes.BOLD} fg={theme.text.default}>
+        <text attributes={TextAttributes.BOLD} fg={themeV2.text.default}>
          {props.title}
        </text>
-        <text fg={theme.text.subdued} onMouseUp={() => dialog.clear()}>
+        <text fg={themeV2.text.subdued} onMouseUp={() => dialog.clear()}>
          esc
        </text>
      </box>
      <Show when={props.url}>
        {(url) => (
          <box gap={1}>
-            <Link href={url()} fg={theme.markdown.link} />
+            <Link href={url()} fg={themeV2.markdown.link} />
            <Show when={props.instructions}>
-              {(instructions) => <text fg={theme.text.subdued}>{instructions()}</text>}
+              {(instructions) => <text fg={themeV2.text.subdued}>{instructions()}</text>}
            </Show>
          </box>
        )}
      </Show>
-      <text fg={theme.text.subdued}>{props.message}</text>
+      <text fg={themeV2.text.subdued}>{props.message}</text>
      <Show when={props.copy}>
-        <text fg={theme.text.default}>
-          c <span style={{ fg: theme.text.subdued }}>copy</span>
+        <text fg={themeV2.text.default}>
+          c <span style={{ fg: themeV2.text.subdued }}>copy</span>
        </text>
      </Show>
    </box>
@@ -5,7 +5,7 @@ import { Keymap } from "../context/keymap"
 import { pipe, sortBy } from "remeda"
 import { DialogSelect } from "../ui/dialog-select"
 import { useDialog } from "../ui/dialog"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { TextAttributes, type ScrollBoxRenderable } from "@opentui/core"
 import type { McpServer } from "@opencode-ai/client"
 import { useClipboard } from "../context/clipboard"
@@ -20,12 +20,12 @@ function statusError(status: McpServer["status"]) {
 }

 function Status(props: { enabled: boolean; loading: boolean }) {
-  const theme = useThemes().contextual("elevated")
-  if (props.loading) return <span style={{ fg: theme.text.subdued }}>⋯ Loading</span>
+  const { themeV2 } = useTheme().contextual("elevated")
+  if (props.loading) return <span style={{ fg: themeV2.text.subdued }}>⋯ Loading</span>
  if (props.enabled) {
-    return <span style={{ fg: theme.text.feedback.success.default, attributes: TextAttributes.BOLD }}>✓ Enabled</span>
+    return <span style={{ fg: themeV2.text.feedback.success.default, attributes: TextAttributes.BOLD }}>✓ Enabled</span>
  }
-  return <span style={{ fg: theme.text.subdued }}>○ Disabled</span>
+  return <span style={{ fg: themeV2.text.subdued }}>○ Disabled</span>
 }

 export function DialogMcp() {
@@ -33,7 +33,7 @@ export function DialogMcp() {
  const dialog = useDialog()
  const client = useClient()
  const toast = useToast()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const [focused, setFocused] = createSignal<string>()
  const [detail, setDetail] = createSignal<McpServer>()
  const [loading, setLoading] = createSignal<string | null>(null)
@@ -110,7 +110,7 @@ export function DialogMcp() {
            ]}
            footer={
              <Show when={focusedError()}>
-                <text fg={theme.text.subdued}>enter to view error</text>
+                <text fg={themeV2.text.subdued}>enter to view error</text>
              </Show>
            }
          />
@@ -134,8 +134,8 @@ function DialogMcpError(props: { server: McpServer; onBack: () => void }) {
  const dialog = useDialog()
  const clipboard = useClipboard()
  const toast = useToast()
-  const theme = useThemes().contextual("elevated")
-  const overlayTheme = useThemes().contextual("overlay")
+  const { themeV2 } = useTheme().contextual("elevated")
+  const { themeV2: overlayTheme } = useTheme().contextual("overlay")
  const dimensions = useTerminalDimensions()
  const config = useConfig().data
  const [copied, setCopied] = createSignal(false)
@@ -171,14 +171,14 @@ function DialogMcpError(props: { server: McpServer; onBack: () => void }) {
  return (
    <box paddingLeft={4} paddingRight={4} paddingBottom={1} gap={1}>
      <box flexDirection="row" justifyContent="space-between">
-        <text attributes={TextAttributes.BOLD} fg={theme.text.default}>
+        <text attributes={TextAttributes.BOLD} fg={themeV2.text.default}>
          MCP server: {props.server.name}
        </text>
-        <text fg={theme.text.subdued} onMouseUp={props.onBack}>
+        <text fg={themeV2.text.subdued} onMouseUp={props.onBack}>
          esc back
        </text>
      </box>
-      <text fg={theme.text.feedback.error.default}>✗ Failed</text>
+      <text fg={themeV2.text.feedback.error.default}>✗ Failed</text>
      <box
        backgroundColor={overlayTheme.background.default}
        paddingLeft={2}
@@ -198,8 +198,8 @@ function DialogMcpError(props: { server: McpServer; onBack: () => void }) {
        </scrollbox>
      </box>
      <box flexDirection="row" justifyContent="space-between">
-        <text fg={theme.text.subdued}>↑↓ scroll</text>
-        <text fg={theme.text.subdued} onMouseUp={copy}>
+        <text fg={themeV2.text.subdued}>↑↓ scroll</text>
+        <text fg={themeV2.text.subdued} onMouseUp={copy}>
          {copied() ? "✓ copied" : "c copy details"}
        </text>
      </box>
@@ -6,7 +6,7 @@ import { DialogSelect, type DialogSelectOption } from "../ui/dialog-select"
 import { useDialog } from "../ui/dialog"
 import { useClient } from "../context/client"
 import { Keymap } from "../context/keymap"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { useData } from "../context/data"
 import { abbreviateHome } from "../runtime"
 import { useTuiPaths } from "../context/runtime"
@@ -38,7 +38,7 @@ export function DialogMoveSession(props: DialogMoveSessionProps) {
  const dialog = useDialog()
  const client = useClient()
  const dimensions = useTerminalDimensions()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const sessionData = useData()
  const route = useRoute()
  const toast = useToast()
@@ -172,18 +172,18 @@ export function DialogMoveSession(props: DialogMoveSessionProps) {
      return {
        title,
        titleView: isRemoving ? (
-          <span style={{ fg: theme.text.feedback.error.default }}>Deleting {item.location}</span>
+          <span style={{ fg: themeV2.text.feedback.error.default }}>Deleting {item.location}</span>
        ) : deleting ? (
-          <span style={{ fg: theme.text.action.destructive.default }}>
+          <span style={{ fg: themeV2.text.action.destructive.default }}>
            Press {shortcuts.get("dialog.move_session.delete")} again to confirm
          </span>
        ) : suffix ? (
          <>
            {visible.slice(0, split)}
-            <span style={{ fg: theme.text.subdued }}>{visible.slice(split)}</span>
+            <span style={{ fg: themeV2.text.subdued }}>{visible.slice(split)}</span>
          </>
        ) : undefined,
-        bg: deleting ? theme.background.action.destructive.default : undefined,
+        bg: deleting ? themeV2.background.action.destructive.default : undefined,
        value: {
          type: "directory",
          directory: item.location,
@@ -316,7 +316,7 @@ export function DialogMoveSession(props: DialogMoveSessionProps) {
        title="Move session"
        titleView={
          <box flexDirection="row" gap={1}>
-            <text fg={theme.text.default} attributes={TextAttributes.BOLD}>
+            <text fg={themeV2.text.default} attributes={TextAttributes.BOLD}>
              Move session
            </text>
            <Show when={working() || directories.loading || loadedProject.loading}>
@@ -329,25 +329,25 @@ export function DialogMoveSession(props: DialogMoveSessionProps) {
        emptyView={
          showError() ? (
            <box paddingLeft={4} paddingRight={4} paddingTop={1}>
-              <text fg={theme.text.feedback.error.default} attributes={TextAttributes.BOLD}>
+              <text fg={themeV2.text.feedback.error.default} attributes={TextAttributes.BOLD}>
                Could not load project directories
              </text>
-              <text fg={theme.text.subdued}>{errorMessage(loadError())}</text>
-              <text fg={theme.text.subdued}>Close and reopen Move session to try again.</text>
+              <text fg={themeV2.text.subdued}>{errorMessage(loadError())}</text>
+              <text fg={themeV2.text.subdued}>Close and reopen Move session to try again.</text>
            </box>
          ) : directories.loading || loadedProject.loading ? (
            <box paddingLeft={4} paddingRight={4} paddingTop={1}>
-              <text fg={theme.text.subdued}>Loading project directories…</text>
+              <text fg={themeV2.text.subdued}>Loading project directories…</text>
            </box>
          ) : (
            <box paddingLeft={4} paddingRight={4} paddingTop={1}>
-              <text fg={theme.text.subdued}>No project directories available</text>
+              <text fg={themeV2.text.subdued}>No project directories available</text>
            </box>
          )
        }
        noMatchView={
          <box paddingLeft={4} paddingRight={4} paddingTop={1}>
-            <text fg={theme.text.subdued}>No project directories found</text>
+            <text fg={themeV2.text.subdued}>No project directories found</text>
          </box>
        }
        locked={showError() || directories.loading || loadedProject.loading || Boolean(removing())}
@@ -3,7 +3,7 @@ import { useTerminalDimensions } from "@opentui/solid"
 import { createMemo, createResource, createSignal, For, Show } from "solid-js"
 import { renderUnicodeCompact } from "uqr"
 import { useClient } from "../context/client"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { useDialog } from "../ui/dialog"
 import { errorMessage } from "../util/error"

@@ -16,7 +16,7 @@ export function DialogPair(props: { credentials?: DialogPairCredentials }) {
  const client = useClient()
  const dialog = useDialog()
  const dimensions = useTerminalDimensions()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const [loadError, setLoadError] = createSignal<unknown>()
  const [showPassword, setShowPassword] = createSignal(false)
  const [passwordHover, setPasswordHover] = createSignal(false)
@@ -47,17 +47,17 @@ export function DialogPair(props: { credentials?: DialogPairCredentials }) {
      <box flexDirection={horizontal() ? "row" : "column"} alignItems={horizontal() ? "flex-start" : "center"} gap={2}>
        <box width={horizontal() ? 29 : "100%"} flexShrink={0} gap={1}>
          <box>
-            <text fg={theme.text.subdued}>URLs</text>
-            <For each={value.urls}>{(url) => <text fg={theme.text.default}>{url}</text>}</For>
+            <text fg={themeV2.text.subdued}>URLs</text>
+            <For each={value.urls}>{(url) => <text fg={themeV2.text.default}>{url}</text>}</For>
          </box>
          <box>
-            <text fg={theme.text.subdued}>Username</text>
-            <text fg={theme.text.default}>{value.username}</text>
+            <text fg={themeV2.text.subdued}>Username</text>
+            <text fg={themeV2.text.default}>{value.username}</text>
          </box>
          <box>
-            <text fg={theme.text.subdued}>Password</text>
+            <text fg={themeV2.text.subdued}>Password</text>
            <text
-              fg={passwordHover() ? theme.text.default : theme.text.subdued}
+              fg={passwordHover() ? themeV2.text.default : themeV2.text.subdued}
              wrapMode="word"
              onMouseOver={() => setPasswordHover(true)}
              onMouseOut={() => setPasswordHover(false)}
@@ -67,7 +67,7 @@ export function DialogPair(props: { credentials?: DialogPairCredentials }) {
            </text>
          </box>
          <Show when={value.urls.some((url) => ["localhost", "127.0.0.1", "[::1]"].includes(new URL(url).hostname))}>
-            <text fg={theme.text.subdued} wrapMode="word">
+            <text fg={themeV2.text.subdued} wrapMode="word">
              Run `opencode service set hostname 0.0.0.0` to access the service remotely.
            </text>
          </Show>
@@ -78,7 +78,7 @@ export function DialogPair(props: { credentials?: DialogPairCredentials }) {
          flexShrink={0}
          alignItems={horizontal() ? "flex-end" : "center"}
        >
-          <text fg={theme.text.default}>{renderUnicodeCompact(JSON.stringify(value), { border: 1 })}</text>
+          <text fg={themeV2.text.default}>{renderUnicodeCompact(JSON.stringify(value), { border: 1 })}</text>
        </box>
      </box>
    )
@@ -87,17 +87,17 @@ export function DialogPair(props: { credentials?: DialogPairCredentials }) {
  return (
    <box paddingLeft={2} paddingRight={2} paddingBottom={1} gap={1}>
      <box flexDirection="row" justifyContent="space-between">
-        <text fg={theme.text.default} attributes={TextAttributes.BOLD}>
+        <text fg={themeV2.text.default} attributes={TextAttributes.BOLD}>
          Pair
        </text>
-        <text fg={theme.text.subdued} onMouseUp={() => dialog.clear()}>
+        <text fg={themeV2.text.subdued} onMouseUp={() => dialog.clear()}>
          esc
        </text>
      </box>
      <Show
        when={loadError()}
        fallback={
-          <Show when={info()} fallback={<text fg={theme.text.subdued}>Loading server information…</text>}>
+          <Show when={info()} fallback={<text fg={themeV2.text.subdued}>Loading server information…</text>}>
            <Show
              when={dimensions().height >= 36}
              fallback={
@@ -116,11 +116,11 @@ export function DialogPair(props: { credentials?: DialogPairCredentials }) {
      >
        {(error) => (
          <box>
-            <text fg={theme.text.feedback.error.default} attributes={TextAttributes.BOLD}>
+            <text fg={themeV2.text.feedback.error.default} attributes={TextAttributes.BOLD}>
              Could not load server information
            </text>
-            <text fg={theme.text.subdued}>{errorMessage(error())}</text>
-            <text fg={theme.text.subdued}>Close and reopen Pair to try again.</text>
+            <text fg={themeV2.text.subdued}>{errorMessage(error())}</text>
+            <text fg={themeV2.text.subdued}>Close and reopen Pair to try again.</text>
          </box>
        )}
      </Show>
@@ -2,12 +2,12 @@ import { InputRenderable, TextAttributes } from "@opentui/core"
 import { Slug } from "@opencode-ai/core/util/slug"
 import { createSignal, onMount } from "solid-js"
 import { Keymap } from "../context/keymap"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { useDialog, type DialogContext } from "../ui/dialog"

 export function DialogProjectCopyName(props: { onConfirm: (name: string) => void }) {
  const dialog = useDialog()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const shortcuts = Keymap.useShortcuts()
  const [inputTarget, setInputTarget] = createSignal<InputRenderable>()
  let input: InputRenderable
@@ -47,10 +47,10 @@ export function DialogProjectCopyName(props: { onConfirm: (name: string) => void
  return (
    <box paddingLeft={2} paddingRight={2} gap={1}>
      <box flexDirection="row" justifyContent="space-between">
-        <text attributes={TextAttributes.BOLD} fg={theme.text.default}>
+        <text attributes={TextAttributes.BOLD} fg={themeV2.text.default}>
          Name project copy
        </text>
-        <text fg={theme.text.subdued} onMouseUp={() => dialog.clear()}>
+        <text fg={themeV2.text.subdued} onMouseUp={() => dialog.clear()}>
          esc
        </text>
      </box>
@@ -61,17 +61,17 @@ export function DialogProjectCopyName(props: { onConfirm: (name: string) => void
        }}
        onSubmit={confirm}
        placeholder="Project copy name"
-        placeholderColor={theme.text.subdued}
-        textColor={theme.text.formfield.default}
-        focusedTextColor={theme.text.formfield.default}
-        cursorColor={theme.text.formfield.default}
+        placeholderColor={themeV2.text.subdued}
+        textColor={themeV2.text.formfield.default}
+        focusedTextColor={themeV2.text.formfield.default}
+        cursorColor={themeV2.text.formfield.default}
      />
      <box paddingBottom={1} flexDirection="row" gap={2}>
-        <text fg={theme.text.default}>
-          enter <span style={{ fg: theme.text.subdued }}>submit</span>
+        <text fg={themeV2.text.default}>
+          enter <span style={{ fg: themeV2.text.subdued }}>submit</span>
        </text>
-        <text fg={theme.text.default}>
-          {shortcuts.get("dialog.project_copy.generate")} <span style={{ fg: theme.text.subdued }}>generate one</span>
+        <text fg={themeV2.text.default}>
+          {shortcuts.get("dialog.project_copy.generate")} <span style={{ fg: themeV2.text.subdued }}>generate one</span>
        </text>
      </box>
    </box>
@@ -2,7 +2,7 @@ import { RGBA, TextAttributes } from "@opentui/core"
 import open from "open"
 import { createSignal } from "solid-js"
 import { Keymap } from "../context/keymap"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { useDialog, type DialogContext } from "../ui/dialog"
 import { Link } from "../ui/link"
 import { BgPulse } from "./bg-pulse"
@@ -38,9 +38,9 @@ function panelOverlay(color: RGBA) {

 export function DialogRetryAction(props: DialogRetryActionProps) {
  const dialog = useDialog()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const showGoTreatment = () => props.link === GO_URL
-  const textBg = () => (showGoTreatment() ? panelOverlay(theme.background.default) : undefined)
+  const textBg = () => (showGoTreatment() ? panelOverlay(themeV2.background.default) : undefined)
  const [selected, setSelected] = createSignal<"dismiss" | "action">("action")

  Keymap.createLayer(() => ({
@@ -85,26 +85,26 @@ export function DialogRetryAction(props: DialogRetryActionProps) {
      ) : null}
      <box zIndex={1} paddingLeft={PAD_X} paddingRight={PAD_X} paddingBottom={1} gap={1}>
        <box flexDirection="row" justifyContent="space-between">
-          <text attributes={TextAttributes.BOLD} fg={theme.text.default} bg={textBg()}>
+          <text attributes={TextAttributes.BOLD} fg={themeV2.text.default} bg={textBg()}>
            {props.title}
          </text>
-          <text fg={theme.text.subdued} bg={textBg()} onMouseUp={() => dialog.clear()}>
+          <text fg={themeV2.text.subdued} bg={textBg()} onMouseUp={() => dialog.clear()}>
            esc
          </text>
        </box>
        <box gap={0}>
-          <text fg={theme.text.subdued} bg={textBg()}>
+          <text fg={themeV2.text.subdued} bg={textBg()}>
            {props.message}
          </text>
        </box>
        {props.link ? (
          showGoTreatment() ? (
            <box alignItems="center" justifyContent="flex-end" height={7} paddingBottom={1}>
-              <Link href={props.link} fg={theme.markdown.link} bg={textBg()} wrapMode="none" />
+              <Link href={props.link} fg={themeV2.markdown.link} bg={textBg()} wrapMode="none" />
            </box>
          ) : (
            <box width="100%" flexDirection="row" justifyContent="center" paddingBottom={1}>
-              <Link href={props.link} fg={theme.markdown.link} wrapMode="none" />
+              <Link href={props.link} fg={themeV2.markdown.link} wrapMode="none" />
            </box>
          )
        ) : (
@@ -115,13 +115,13 @@ export function DialogRetryAction(props: DialogRetryActionProps) {
            paddingLeft={2}
            paddingRight={2}
            backgroundColor={
-              selected() === "dismiss" ? theme.background.action.primary.focused : RGBA.fromInts(0, 0, 0, 0)
+              selected() === "dismiss" ? themeV2.background.action.primary.focused : RGBA.fromInts(0, 0, 0, 0)
            }
            onMouseOver={() => setSelected("dismiss")}
            onMouseUp={() => dismiss(props, dialog)}
          >
            <text
-              fg={selected() === "dismiss" ? theme.text.action.primary.focused : theme.text.subdued}
+              fg={selected() === "dismiss" ? themeV2.text.action.primary.focused : themeV2.text.subdued}
              bg={selected() === "dismiss" ? undefined : textBg()}
              attributes={selected() === "dismiss" ? TextAttributes.BOLD : undefined}
            >
@@ -132,13 +132,13 @@ export function DialogRetryAction(props: DialogRetryActionProps) {
            paddingLeft={2}
            paddingRight={2}
            backgroundColor={
-              selected() === "action" ? theme.background.action.primary.focused : RGBA.fromInts(0, 0, 0, 0)
+              selected() === "action" ? themeV2.background.action.primary.focused : RGBA.fromInts(0, 0, 0, 0)
            }
            onMouseOver={() => setSelected("action")}
            onMouseUp={() => runAction(props, dialog)}
          >
            <text
-              fg={selected() === "action" ? theme.text.action.primary.focused : theme.text.default}
+              fg={selected() === "action" ? themeV2.text.action.primary.focused : themeV2.text.default}
              bg={selected() === "action" ? undefined : textBg()}
              attributes={selected() === "action" ? TextAttributes.BOLD : undefined}
            >
@@ -1,6 +1,6 @@
 import { TextAttributes } from "@opentui/core"
 import { Keymap } from "../context/keymap"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { useDialog } from "../ui/dialog"
 import { createStore } from "solid-js/store"
 import { For } from "solid-js"
@@ -13,7 +13,7 @@ export function DialogSessionDeleteFailed(props: {
  onDone?: () => void
 }) {
  const dialog = useDialog()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const [store, setStore] = createStore({
    active: "delete" as "delete" | "restore",
  })
@@ -64,17 +64,17 @@ export function DialogSessionDeleteFailed(props: {
  return (
    <box paddingLeft={2} paddingRight={2} gap={1}>
      <box flexDirection="row" justifyContent="space-between">
-        <text attributes={TextAttributes.BOLD} fg={theme.text.default}>
+        <text attributes={TextAttributes.BOLD} fg={themeV2.text.default}>
          Failed to Delete Session
        </text>
-        <text fg={theme.text.subdued} onMouseUp={() => dialog.clear()}>
+        <text fg={themeV2.text.subdued} onMouseUp={() => dialog.clear()}>
          esc
        </text>
      </box>
-      <text fg={theme.text.subdued} wrapMode="word">
+      <text fg={themeV2.text.subdued} wrapMode="word">
        {`The session "${props.session}" could not be deleted because the workspace "${props.workspace}" is not available.`}
      </text>
-      <text fg={theme.text.subdued} wrapMode="word">
+      <text fg={themeV2.text.subdued} wrapMode="word">
        Choose how you want to recover this broken workspace session.
      </text>
      <box flexDirection="column" paddingBottom={1} gap={1}>
@@ -86,7 +86,7 @@ export function DialogSessionDeleteFailed(props: {
              paddingRight={1}
              paddingTop={1}
              paddingBottom={1}
-              backgroundColor={item.id === store.active ? theme.background.action.primary.focused : undefined}
+              backgroundColor={item.id === store.active ? themeV2.background.action.primary.focused : undefined}
              onMouseUp={() => {
                setStore("active", item.id)
                void confirm()
@@ -94,12 +94,12 @@ export function DialogSessionDeleteFailed(props: {
            >
              <text
                attributes={TextAttributes.BOLD}
-                fg={item.id === store.active ? theme.text.action.primary.focused : theme.text.default}
+                fg={item.id === store.active ? themeV2.text.action.primary.focused : themeV2.text.default}
              >
                {item.title}
              </text>
              <text
-                fg={item.id === store.active ? theme.text.action.primary.focused : theme.text.subdued}
+                fg={item.id === store.active ? themeV2.text.action.primary.focused : themeV2.text.subdued}
                wrapMode="word"
              >
                {item.description}
@@ -7,7 +7,7 @@ import { useRoute } from "../context/route"
 import { useData } from "../context/data"
 import { Keymap } from "../context/keymap"
 import { Locale } from "../util/locale"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { useClient } from "../context/client"
 import { useLocal } from "../context/local"
 import { createDebouncedSignal } from "../util/signal"
@@ -15,18 +15,14 @@ import { useToast } from "../ui/toast"
 import { DialogSessionRename } from "./dialog-session-rename"
 import { Spinner } from "./spinner"
 import { errorMessage } from "../util/error"
-import { useSessionTabs } from "../context/session-tabs"

 export function DialogSessionList() {
  const dialog = useDialog()
  const route = useRoute()
  const data = useData()
-  const themes = useThemes()
-  const theme = themes.contextual("elevated")
-  const mode = themes.mode
+  const { themeV2, mode } = useTheme().contextual("elevated")
  const client = useClient()
  const local = useLocal()
-  const sessionTabs = useSessionTabs()
  const toast = useToast()
  const [filter, setFilter] = createSignal("")
  const shortcuts = Keymap.useShortcuts()
@@ -81,7 +77,6 @@ export function DialogSessionList() {
  })

  const quickSwitchHint = createMemo(() => {
-    if (sessionTabs.enabled()) return
    const first = shortcuts.get("session.quick_switch.1")
    const last = shortcuts.get("session.quick_switch.9")
    if (!first || !last) return
@@ -99,7 +94,7 @@ export function DialogSessionList() {
        .filter((session) => !session.parentID)
        .map((session) => [session.id, session]),
    )
-    const pinned = sessionTabs.enabled() ? [] : local.session.pinned().filter((sessionID) => sessionMap.has(sessionID))
+    const pinned = local.session.pinned().filter((sessionID) => sessionMap.has(sessionID))
    const pinnedSet = new Set(pinned)
    const slotByID = new Map(local.session.slots().map((sessionID, index) => [sessionID, index + 1]))

@@ -107,20 +102,20 @@ export function DialogSessionList() {
      const directory = session.location.directory
      const footer =
        directory !== data.location.info()?.project.directory ? Locale.truncate(path.basename(directory), 20) : ""
-      const slot = sessionTabs.enabled() ? undefined : slotByID.get(session.id)
+      const slot = slotByID.get(session.id)
      const deleting = toDelete() === session.id
      return {
        title: deleting ? `Press ${shortcuts.get("session.delete")} again to confirm` : session.title,
        value: session.id,
        category,
        footer,
-        bg: deleting ? theme.background.action.destructive.focused : undefined,
-        fg: deleting ? theme.text.action.destructive.focused : undefined,
+        bg: deleting ? themeV2.background.action.destructive.focused : undefined,
+        fg: deleting ? themeV2.text.action.destructive.focused : undefined,
        gutter: data.session.family(session.id).some((id) => data.session.status(id) === "running")
          ? () => <Spinner />
          : slot === undefined
            ? undefined
-            : () => <text fg={theme.hue.accent[mode() === "light" ? 800 : 200]}>{slot}</text>,
+            : () => <text fg={themeV2.hue.accent[mode() === "light" ? 800 : 200]}>{slot}</text>,
      }
    }

@@ -148,12 +143,12 @@ export function DialogSessionList() {
      }}
      emptyView={
        <box paddingLeft={4} paddingRight={4} paddingTop={1}>
-          <text fg={theme.text.subdued}>No sessions available</text>
+          <text fg={themeV2.text.subdued}>No sessions available</text>
        </box>
      }
      noMatchView={
        <box paddingLeft={4} paddingRight={4} paddingTop={1}>
-          <text fg={searchState().error ? theme.text.feedback.error.default : theme.text.subdued}>
+          <text fg={searchState().error ? themeV2.text.feedback.error.default : themeV2.text.subdued}>
            {searchState().message}
          </text>
        </box>
@@ -167,8 +162,7 @@ export function DialogSessionList() {
        {
          command: "session.pin.toggle",
          title: "pin/unpin",
-          hidden: sessionTabs.enabled(),
-          onTrigger: (option) => local.session.togglePin(option.value),
+          onTrigger: (option: { value: string }) => local.session.togglePin(option.value),
        },
        {
          command: "session.delete",
@@ -15,7 +15,7 @@ export type DialogSkillProps = {
 export function DialogSkill(props: DialogSkillProps) {
  const dialog = useDialog()
  const data = useData()
-  const theme = useTheme()
+  const { themeV2 } = useTheme()
  dialog.setSize("large")

  const [loadError, setLoadError] = createSignal<unknown>()
@@ -63,29 +63,29 @@ export function DialogSkill(props: DialogSkillProps) {
        <Switch
          fallback={
            <box paddingLeft={4} paddingRight={4} paddingTop={1}>
-              <text fg={theme.text.subdued}>No skills available</text>
+              <text fg={themeV2.text.subdued}>No skills available</text>
            </box>
          }
        >
          <Match when={showError()}>
            <box paddingLeft={4} paddingRight={4} paddingTop={1}>
-              <text fg={theme.text.feedback.error.default} attributes={TextAttributes.BOLD}>
+              <text fg={themeV2.text.feedback.error.default} attributes={TextAttributes.BOLD}>
                Could not load skills
              </text>
-              <text fg={theme.text.subdued}>{errorMessage(loadError())}</text>
-              <text fg={theme.text.subdued}>Close and reopen Skills to try again.</text>
+              <text fg={themeV2.text.subdued}>{errorMessage(loadError())}</text>
+              <text fg={themeV2.text.subdued}>Close and reopen Skills to try again.</text>
            </box>
          </Match>
          <Match when={skills.loading}>
            <box paddingLeft={4} paddingRight={4} paddingTop={1}>
-              <text fg={theme.text.subdued}>Loading skills…</text>
+              <text fg={themeV2.text.subdued}>Loading skills…</text>
            </box>
          </Match>
        </Switch>
      }
      noMatchView={
        <box paddingLeft={4} paddingRight={4} paddingTop={1}>
-          <text fg={theme.text.subdued}>No skills found</text>
+          <text fg={themeV2.text.subdued}>No skills found</text>
        </box>
      }
    />
@@ -3,7 +3,7 @@ import { DialogSelect } from "../ui/dialog-select"
 import { createMemo, createSignal } from "solid-js"
 import { Locale } from "../util/locale"
 import { Keymap } from "../context/keymap"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { usePromptStash, type StashEntry } from "./prompt/stash"

 function getRelativeTime(timestamp: number): string {
@@ -29,7 +29,7 @@ function getStashPreview(input: string, maxLength: number = 50): string {
 export function DialogStash(props: { onSelect: (entry: StashEntry) => void }) {
  const dialog = useDialog()
  const stash = usePromptStash()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const shortcuts = Keymap.useShortcuts()

  const [toDelete, setToDelete] = createSignal<number>()
@@ -45,8 +45,8 @@ export function DialogStash(props: { onSelect: (entry: StashEntry) => void }) {
          title: isDeleting
            ? `Press ${shortcuts.get("stash.delete")} again to confirm`
            : getStashPreview(entry.prompt.text),
-          bg: isDeleting ? theme.background.action.destructive.focused : undefined,
-          fg: isDeleting ? theme.text.action.destructive.focused : undefined,
+          bg: isDeleting ? themeV2.background.action.destructive.focused : undefined,
+          fg: isDeleting ? themeV2.text.action.destructive.focused : undefined,
          value: index,
          description: getRelativeTime(entry.timestamp),
          footer: lineCount > 1 ? `~${lineCount} lines` : undefined,
@@ -1,5 +1,5 @@
 import { TextAttributes } from "@opentui/core"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { useDialog } from "../ui/dialog"
 import { useData } from "../context/data"
 import { For, Match, Switch, Show, createMemo } from "solid-js"
@@ -8,30 +8,30 @@ export type DialogStatusProps = {}

 export function DialogStatus() {
  const data = useData()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const dialog = useDialog()

  const mcp = createMemo(() => data.location.mcp.server.list() ?? [])
  const color = (status: string) => {
-    if (status === "connected") return theme.text.feedback.success.default
-    if (status === "failed") return theme.text.feedback.error.default
-    if (status === "needs_auth") return theme.text.feedback.warning.default
-    if (status === "needs_client_registration") return theme.text.feedback.error.default
-    return theme.text.subdued
+    if (status === "connected") return themeV2.text.feedback.success.default
+    if (status === "failed") return themeV2.text.feedback.error.default
+    if (status === "needs_auth") return themeV2.text.feedback.warning.default
+    if (status === "needs_client_registration") return themeV2.text.feedback.error.default
+    return themeV2.text.subdued
  }
  return (
    <box paddingLeft={2} paddingRight={2} gap={1} paddingBottom={1}>
      <box flexDirection="row" justifyContent="space-between">
-        <text fg={theme.text.default} attributes={TextAttributes.BOLD}>
+        <text fg={themeV2.text.default} attributes={TextAttributes.BOLD}>
          Status
        </text>
-        <text fg={theme.text.subdued} onMouseUp={() => dialog.clear()}>
+        <text fg={themeV2.text.subdued} onMouseUp={() => dialog.clear()}>
          esc
        </text>
      </box>
-      <Show when={mcp().length > 0} fallback={<text fg={theme.text.default}>No MCP servers</text>}>
+      <Show when={mcp().length > 0} fallback={<text fg={themeV2.text.default}>No MCP servers</text>}>
        <box>
-          <text fg={theme.text.default}>
+          <text fg={themeV2.text.default}>
            {mcp().length} MCP server{mcp().length === 1 ? "" : "s"}
          </text>
          <For each={mcp()}>
@@ -40,9 +40,9 @@ export function DialogStatus() {
                <text flexShrink={0} style={{ fg: color(item.status.status) }}>
                  •
                </text>
-                <text fg={theme.text.default} wrapMode="word">
+                <text fg={themeV2.text.default} wrapMode="word">
                  <b>{item.name}</b>{" "}
-                  <span style={{ fg: theme.text.subdued }}>
+                  <span style={{ fg: themeV2.text.subdued }}>
                    <Switch fallback={item.status.status}>
                      <Match when={item.status.status === "connected"}>Connected</Match>
                      <Match when={item.status.status === "failed" && item.status}>{(val) => val().error}</Match>
@@ -1,11 +1,11 @@
 import { DialogSelect, type DialogSelectRef } from "../ui/dialog-select"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { useDialog } from "../ui/dialog"
 import { onCleanup } from "solid-js"

 export function DialogThemeList() {
-  const themes = useThemes()
-  const options = Object.keys(themes.all())
+  const theme = useTheme()
+  const options = Object.keys(theme.all())
    .sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base" }))
    .map((value) => ({
      title: value,
@@ -14,10 +14,10 @@ export function DialogThemeList() {
  const dialog = useDialog()
  let confirmed = false
  let ref: DialogSelectRef<string>
-  const initial = themes.selected
+  const initial = theme.selected

  onCleanup(() => {
-    if (!confirmed) themes.set(initial)
+    if (!confirmed) theme.set(initial)
  })

  return (
@@ -26,10 +26,10 @@ export function DialogThemeList() {
      options={options}
      current={initial}
      onMove={(opt) => {
-        themes.set(opt.value)
+        theme.set(opt.value)
      }}
      onSelect={(opt) => {
-        themes.set(opt.value)
+        theme.set(opt.value)
        confirmed = true
        dialog.clear()
      }}
@@ -38,12 +38,12 @@ export function DialogThemeList() {
      }}
      onFilter={(query) => {
        if (query.length === 0) {
-          themes.set(initial)
+          theme.set(initial)
          return
        }

        const first = ref.filtered[0]
-        if (first) themes.set(first.value)
+        if (first) theme.set(first.value)
      }}
    />
  )
@@ -4,7 +4,7 @@ import type { VcsFileStatus } from "@opencode-ai/client"
 import { createMemo, For } from "solid-js"
 import { createStore } from "solid-js/store"
 import { FilePath } from "../ui/file-path"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { useConfig } from "../config"
 import { useDialog, type DialogContext } from "../ui/dialog"
 import { getScrollAcceleration } from "../util/scroll"
@@ -31,8 +31,8 @@ export function DialogWorkspaceFileChanges(props: {
  message?: string
 }) {
  const dialog = useDialog()
-  const theme = useThemes().contextual("elevated")
-  const overlayTheme = useThemes().contextual("overlay")
+  const { themeV2 } = useTheme().contextual("elevated")
+  const { themeV2: overlayTheme } = useTheme().contextual("overlay")
  const config = useConfig().data
  const dimensions = useTerminalDimensions()
  const scrollAcceleration = createMemo(() => getScrollAcceleration(config))
@@ -72,15 +72,15 @@ export function DialogWorkspaceFileChanges(props: {
  return (
    <box gap={1}>
      <box flexDirection="row" justifyContent="space-between" paddingLeft={2} paddingRight={2}>
-        <text attributes={TextAttributes.BOLD} fg={theme.text.default}>
+        <text attributes={TextAttributes.BOLD} fg={themeV2.text.default}>
          {props.title ?? "File Changes Found"}
        </text>
-        <text fg={theme.text.subdued} onMouseUp={() => dialog.clear()}>
+        <text fg={themeV2.text.subdued} onMouseUp={() => dialog.clear()}>
          esc
        </text>
      </box>
      <box paddingLeft={2} paddingRight={2}>
-        <text fg={theme.text.subdued} wrapMode="word">
+        <text fg={themeV2.text.subdued} wrapMode="word">
          {props.message ?? "Do you want to move these changes with the session?"}
        </text>
      </box>
@@ -118,14 +118,16 @@ export function DialogWorkspaceFileChanges(props: {
            <box
              paddingLeft={2}
              paddingRight={2}
-              backgroundColor={item === store.active ? theme.background.action.primary.focused : undefined}
+              backgroundColor={item === store.active ? themeV2.background.action.primary.focused : undefined}
              onMouseUp={() => {
                setStore("active", item)
                props.onSelect(item)
                dialog.clear()
              }}
            >
-              <text fg={item === store.active ? theme.text.action.primary.focused : theme.text.subdued}>{item}</text>
+              <text fg={item === store.active ? themeV2.text.action.primary.focused : themeV2.text.subdued}>
+                {item}
+              </text>
            </box>
          )}
        </For>
@@ -5,10 +5,10 @@ import { tint } from "../theme/color"
 import { logo } from "../logo"

 export function Logo() {
-  const theme = useTheme()
+  const { themeV2 } = useTheme()

  const renderLine = (line: string, fg: RGBA, bold: boolean): JSX.Element[] => {
-    const shadow = tint(theme.background.default, fg, 0.25)
+    const shadow = tint(themeV2.background.default, fg, 0.25)
    const attrs = bold ? TextAttributes.BOLD : undefined
    return Array.from(line).map((char) => {
      if (char === "_") {
@@ -52,8 +52,8 @@ export function Logo() {
      <For each={logo.left}>
        {(line, index) => (
          <box flexDirection="row" gap={1}>
-            <box flexDirection="row">{renderLine(line, theme.text.subdued, false)}</box>
-            <box flexDirection="row">{renderLine(logo.right[index()], theme.text.default, true)}</box>
+            <box flexDirection="row">{renderLine(line, themeV2.text.subdued, false)}</box>
+            <box flexDirection="row">{renderLine(logo.right[index()], themeV2.text.default, true)}</box>
          </box>
        )}
      </For>
@@ -1,20 +1,20 @@
 import { useTheme } from "../context/theme"

 export function PluginRouteMissing(props: { id: string; name: string; onHome: () => void }) {
-  const theme = useTheme()
+  const { themeV2 } = useTheme()

  return (
    <box width="100%" height="100%" alignItems="center" justifyContent="center" flexDirection="column" gap={1}>
-      <text fg={theme.text.feedback.warning.default}>
+      <text fg={themeV2.text.feedback.warning.default}>
        Unknown plugin route: {props.id}/{props.name}
      </text>
      <box
        onMouseUp={props.onHome}
-        backgroundColor={theme.background.action.primary.hovered}
+        backgroundColor={themeV2.background.action.primary.hovered}
        paddingLeft={1}
        paddingRight={1}
      >
-        <text fg={theme.text.action.primary.hovered}>go home</text>
+        <text fg={themeV2.text.action.primary.hovered}>go home</text>
      </box>
    </box>
  )
@@ -12,7 +12,7 @@ import { getScrollAcceleration } from "../../util/scroll"
 import { useTuiPaths } from "../../context/runtime"
 import { useConfig } from "../../config"
 import { useLocation } from "../../context/location"
-import { useThemes } from "../../context/theme"
+import { useTheme } from "../../context/theme"
 import { SplitBorder } from "../../ui/border"
 import { useTerminalDimensions } from "@opentui/solid"
 import { Locale } from "../../util/locale"
@@ -57,7 +57,7 @@ export function Autocomplete(props: {
  const data = useData()
  const keymap = Keymap.use()
  const keymapCommands = Keymap.useCommands()
-  const theme = useThemes().contextual("overlay")
+  const { themeV2 } = useTheme().contextual("overlay")
  const dimensions = useTerminalDimensions()
  const frecency = useFrecency()
  const config = useConfig().data
@@ -698,11 +698,11 @@ export function Autocomplete(props: {
      width={position().width}
      zIndex={100}
      {...SplitBorder}
-      borderColor={theme.border.default}
+      borderColor={themeV2.border.default}
    >
      <scrollbox
        ref={(r: ScrollBoxRenderable) => (scroll = r)}
-        backgroundColor={theme.background.default}
+        backgroundColor={themeV2.background.default}
        height={height()}
        scrollbarOptions={{ visible: false }}
        scrollAcceleration={scrollAcceleration()}
@@ -711,7 +711,9 @@ export function Autocomplete(props: {
          each={options()}
          fallback={
            <box paddingLeft={1} paddingRight={1}>
-              <text fg={emptyError() ? theme.text.feedback.error.default : theme.text.subdued}>{emptyMessage()}</text>
+              <text fg={emptyError() ? themeV2.text.feedback.error.default : themeV2.text.subdued}>
+                {emptyMessage()}
+              </text>
            </box>
          }
        >
@@ -719,7 +721,7 @@ export function Autocomplete(props: {
            <box
              paddingLeft={1}
              paddingRight={1}
-              backgroundColor={index === store.selected ? theme.background.action.primary.focused : undefined}
+              backgroundColor={index === store.selected ? themeV2.background.action.primary.focused : undefined}
              flexDirection="row"
              onMouseMove={() => {
                setStore("input", "mouse")
@@ -735,14 +737,14 @@ export function Autocomplete(props: {
              onMouseUp={() => select()}
            >
              <text
-                fg={index === store.selected ? theme.text.action.primary.focused : theme.text.default}
+                fg={index === store.selected ? themeV2.text.action.primary.focused : themeV2.text.default}
                flexShrink={0}
              >
                {option().display}
              </text>
              <Show when={option().description}>
                <text
-                  fg={index === store.selected ? theme.text.action.primary.focused : theme.text.subdued}
+                  fg={index === store.selected ? themeV2.text.action.primary.focused : themeV2.text.subdued}
                  wrapMode="none"
                >
                  {" " + option().description?.trimStart()}
@@ -12,7 +12,7 @@ import { registerOpencodeSpinner } from "../register-spinner"
 import path from "path"
 import { fileURLToPath } from "url"
 import { useLocal } from "../../context/local"
-import { useTheme, useThemes } from "../../context/theme"
+import { useTheme } from "../../context/theme"
 import { tint } from "../../theme/color"
 import { EmptyBorder, SplitBorder } from "../../ui/border"
 import { useTuiPaths, useTuiTerminalEnvironment } from "../../context/runtime"
@@ -189,8 +189,7 @@ export function Prompt(props: PromptProps) {
  const renderer = useRenderer()
  const exit = useExit()
  const dimensions = useTerminalDimensions()
-  const theme = useTheme()
-  const { currentSyntax: syntax } = useThemes()
+  const { themeV2, syntax } = useTheme()
  const animationsEnabled = createMemo(() => config.animations ?? true)
  const list = createMemo(() => props.placeholders?.normal ?? [])
  const shell = createMemo(() => props.placeholders?.shell ?? [])
@@ -297,8 +296,8 @@ export function Prompt(props: PromptProps) {

  createEffect(() => {
    if (!input || input.isDestroyed) return
-    if (props.disabled) input.cursorColor = theme.background.surface.offset
-    if (!props.disabled) input.cursorColor = theme.text.default
+    if (props.disabled) input.cursorColor = themeV2.background.surface.offset
+    if (!props.disabled) input.cursorColor = themeV2.text.default
  })

  const usage = createMemo(() => {
@@ -1300,10 +1299,10 @@ export function Prompt(props: PromptProps) {
  }

  const highlight = createMemo(() => {
-    if (leader()) return theme.border.default
-    if (store.mode === "shell") return theme.text.action.primary.selected
+    if (leader()) return themeV2.border.default
+    if (store.mode === "shell") return themeV2.text.action.primary.selected
    const agent = local.agent.current()
-    if (!agent) return theme.border.default
+    if (!agent) return themeV2.border.default
    return local.agent.color(agent.id)
  })
  const agentLabel = createMemo(() => {
@@ -1325,7 +1324,7 @@ export function Prompt(props: PromptProps) {
    () => !!local.agent.current() && store.mode === "normal" && showVariant(),
    animationsEnabled,
  )
-  const borderHighlight = createMemo(() => tint(theme.border.default, highlight(), agentMetaAlpha()))
+  const borderHighlight = createMemo(() => tint(themeV2.border.default, highlight(), agentMetaAlpha()))

  const placeholderText = createMemo(() => {
    if (props.showPlaceholder === false) return undefined
@@ -1345,7 +1344,7 @@ export function Prompt(props: PromptProps) {

  const spinnerDef = createMemo(() => {
    const agent = status() === "running" ? local.agent.current() : local.agent.current()
-    const color = agent ? local.agent.color(agent.id) : theme.border.default
+    const color = agent ? local.agent.color(agent.id) : themeV2.border.default
    return {
      frames: createFrames({
        color,
@@ -1365,7 +1364,7 @@ export function Prompt(props: PromptProps) {
  })
  const maxHeight = createMemo(() => Math.max(6, Math.floor(dimensions().height / 3)))

-  const promptBg = createMemo(() => theme.raise(theme.background.surface.offset))
+  const promptBg = createMemo(() => themeV2.raise(themeV2.background.surface.offset))

  return (
    <>
@@ -1391,9 +1390,9 @@ export function Prompt(props: PromptProps) {
            <textarea
              width="100%"
              placeholder={placeholderText()}
-              placeholderColor={theme.text.subdued}
-              textColor={leader() ? theme.text.subdued : theme.text.default}
-              focusedTextColor={leader() ? theme.text.subdued : theme.text.default}
+              placeholderColor={themeV2.text.subdued}
+              textColor={leader() ? themeV2.text.subdued : themeV2.text.default}
+              focusedTextColor={leader() ? themeV2.text.subdued : themeV2.text.default}
              minHeight={1}
              maxHeight={maxHeight()}
              onContentChange={() => {
@@ -1453,7 +1452,7 @@ export function Prompt(props: PromptProps) {
                setTimeout(() => {
                  // setTimeout is a workaround and needs to be addressed properly
                  if (!input || input.isDestroyed) return
-                  input.cursorColor = theme.text.default
+                  input.cursorColor = themeV2.text.default
                }, 0)
              }}
              onMouseDown={(r: MouseEvent) => {
@@ -1461,7 +1460,7 @@ export function Prompt(props: PromptProps) {
                r.target?.focus()
              }}
              focusedBackgroundColor="transparent"
-              cursorColor={props.disabled ? theme.background.surface.offset : theme.text.default}
+              cursorColor={props.disabled ? themeV2.background.surface.offset : themeV2.text.default}
              syntaxStyle={syntax()}
            />
            <box flexDirection="row" flexShrink={0} paddingTop={1} gap={1} justifyContent="space-between">
@@ -1471,24 +1470,24 @@ export function Prompt(props: PromptProps) {
                    <>
                      <text fg={fadeColor(highlight(), agentMetaAlpha())}>{label()}</text>
                      <Show when={store.mode === "normal" && local.permission.mode === "auto"}>
-                        <text fg={fadeColor(theme.text.subdued, agentMetaAlpha())}>auto</text>
+                        <text fg={fadeColor(themeV2.text.subdued, agentMetaAlpha())}>auto</text>
                      </Show>
                      <Show when={store.mode === "normal"}>
                        <box flexDirection="row" gap={1}>
-                          <text fg={fadeColor(theme.text.subdued, modelMetaAlpha())}>·</text>
+                          <text fg={fadeColor(themeV2.text.subdued, modelMetaAlpha())}>·</text>
                          <text
                            flexShrink={0}
-                            fg={fadeColor(leader() ? theme.text.subdued : theme.text.default, modelMetaAlpha())}
+                            fg={fadeColor(leader() ? themeV2.text.subdued : themeV2.text.default, modelMetaAlpha())}
                          >
                            {local.model.parsed().model}
                          </text>
-                          <text fg={fadeColor(theme.text.subdued, modelMetaAlpha())}>{currentProviderLabel()}</text>
+                          <text fg={fadeColor(themeV2.text.subdued, modelMetaAlpha())}>{currentProviderLabel()}</text>
                          <Show when={showVariant()}>
-                            <text fg={fadeColor(theme.text.subdued, variantMetaAlpha())}>·</text>
+                            <text fg={fadeColor(themeV2.text.subdued, variantMetaAlpha())}>·</text>
                            <text>
                              <span
                                style={{
-                                  fg: fadeColor(theme.text.feedback.warning.default, variantMetaAlpha()),
+                                  fg: fadeColor(themeV2.text.feedback.warning.default, variantMetaAlpha()),
                                  bold: true,
                                }}
                              >
@@ -1542,12 +1541,12 @@ export function Prompt(props: PromptProps) {
              <Match when={status() === "running"}>
                <box flexDirection="row" gap={1} flexGrow={1} justifyContent="flex-start">
                  <box marginLeft={1}>
-                    <Show when={config.animations ?? true} fallback={<text fg={theme.text.subdued}>[⋯]</text>}>
+                    <Show when={config.animations ?? true} fallback={<text fg={themeV2.text.subdued}>[⋯]</text>}>
                      <spinner color={spinnerDef().color} frames={spinnerDef().frames} interval={40} />
                    </Show>
                  </box>
                  <text
-                    fg={store.interrupt > 0 ? theme.background.action.primary.default : theme.text.default}
+                    fg={store.interrupt > 0 ? themeV2.background.action.primary.default : themeV2.text.default}
                    wrapMode="none"
                    truncate
                    flexShrink={1}
@@ -1555,7 +1554,7 @@ export function Prompt(props: PromptProps) {
                    esc{" "}
                    <span
                      style={{
-                        fg: store.interrupt > 0 ? theme.background.action.primary.default : theme.text.subdued,
+                        fg: store.interrupt > 0 ? themeV2.background.action.primary.default : themeV2.text.subdued,
                      }}
                    >
                      {store.interrupt > 0 ? "again to interrupt" : "interrupt"}
@@ -1566,16 +1565,16 @@ export function Prompt(props: PromptProps) {
              <Match when={move.progress()}>
                {(progress) => (
                  <box paddingLeft={3} height={1} minHeight={0} flexShrink={1}>
-                    <Spinner color={theme.hue.accent[500]}>
+                    <Spinner color={themeV2.hue.accent[500]}>
                      {progress()}
-                      <span style={{ fg: theme.text.subdued }}>{".".repeat(move.creatingDots())}</span>
+                      <span style={{ fg: themeV2.text.subdued }}>{".".repeat(move.creatingDots())}</span>
                    </Spinner>
                  </box>
                )}
              </Match>
              <Match when={move.pendingNew()}>
                <box paddingLeft={3} height={1} minHeight={0} flexShrink={1}>
-                  <text fg={theme.hue.accent[500]} wrapMode="none" truncate>
+                  <text fg={themeV2.hue.accent[500]} wrapMode="none" truncate>
                    (new working copy)
                  </text>
                </box>
@@ -1583,7 +1582,7 @@ export function Prompt(props: PromptProps) {
              <Match when={true}>
                <Show when={!props.hint && locationLabel()} fallback={props.hint ?? <text />}>
                  {(location) => (
-                    <text fg={theme.text.subdued} wrapMode="none" truncate flexGrow={1} flexShrink={1}>
+                    <text fg={themeV2.text.subdued} wrapMode="none" truncate flexGrow={1} flexShrink={1}>
                      {location()}
                    </text>
                  )}
@@ -1597,7 +1596,7 @@ export function Prompt(props: PromptProps) {
                wrapMode="none"
                truncate
                flexShrink={1}
-                fg={editorContextLabelState() === "pending" ? theme.hue.accent[500] : theme.text.subdued}
+                fg={editorContextLabelState() === "pending" ? themeV2.hue.accent[500] : themeV2.text.subdued}
              >
                {file()}
              </text>
@@ -1607,40 +1606,40 @@ export function Prompt(props: PromptProps) {
            <Match when={store.mode === "normal"}>
              <Switch>
                <Match when={liveWorkStatusVisible() || statusItems().length > 0}>
-                  <text fg={theme.text.subdued} wrapMode="none" truncate flexShrink={1}>
+                  <text fg={themeV2.text.subdued} wrapMode="none" truncate flexShrink={1}>
                    <Show when={liveWorkStatusVisible() && liveWorkShortcut()}>
-                      {(shortcut) => <span style={{ fg: theme.text.default }}>{shortcut()} </span>}
+                      {(shortcut) => <span style={{ fg: themeV2.text.default }}>{shortcut()} </span>}
                    </Show>
                    <Show when={subagentStatusLabel()}>
-                      {(label) => <span style={{ fg: theme.text.subdued }}>{label()}</span>}
+                      {(label) => <span style={{ fg: themeV2.text.subdued }}>{label()}</span>}
                    </Show>
                    <Show when={subagentStatusLabel() && shellStatusLabel()}>
-                      <span style={{ fg: theme.text.subdued }}> · </span>
+                      <span style={{ fg: themeV2.text.subdued }}> · </span>
                    </Show>
                    <Show when={shellStatusLabel()}>
-                      {(label) => <span style={{ fg: theme.text.subdued }}>{label()}</span>}
+                      {(label) => <span style={{ fg: themeV2.text.subdued }}>{label()}</span>}
                    </Show>
                    <Show when={liveWorkStatusVisible() && statusItems().length > 0}>
-                      <span style={{ fg: theme.text.subdued }}> · </span>
+                      <span style={{ fg: themeV2.text.subdued }}> · </span>
                    </Show>
                    <Show when={statusItems().length > 0}>
-                      <span style={{ fg: theme.text.subdued }}>{statusItems().join(" · ")}</span>
+                      <span style={{ fg: themeV2.text.subdued }}>{statusItems().join(" · ")}</span>
                    </Show>
                  </text>
                </Match>
                <Match when={true}>
-                  <text fg={theme.text.default} flexShrink={0}>
-                    {agentShortcut()} <span style={{ fg: theme.text.subdued }}>agents</span>
+                  <text fg={themeV2.text.default} flexShrink={0}>
+                    {agentShortcut()} <span style={{ fg: themeV2.text.subdued }}>agents</span>
                  </text>
                </Match>
              </Switch>
-              <text fg={theme.text.default} flexShrink={0}>
-                {paletteShortcut()} <span style={{ fg: theme.text.subdued }}>commands</span>
+              <text fg={themeV2.text.default} flexShrink={0}>
+                {paletteShortcut()} <span style={{ fg: themeV2.text.subdued }}>commands</span>
              </text>
            </Match>
            <Match when={store.mode === "shell"}>
-              <text fg={theme.text.default} flexShrink={0}>
-                esc <span style={{ fg: theme.text.subdued }}>exit shell mode</span>
+              <text fg={themeV2.text.default} flexShrink={0}>
+                esc <span style={{ fg: themeV2.text.subdued }}>exit shell mode</span>
              </text>
            </Match>
          </Switch>
@@ -1,9 +1,9 @@
 import { RGBA } from "@opentui/core"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { Spinner } from "./spinner"

 export function Reconnecting() {
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")

  return (
    <box
@@ -21,15 +21,15 @@ export function Reconnecting() {
        width={48}
        maxWidth="90%"
        flexDirection="column"
-        backgroundColor={theme.background.default}
+        backgroundColor={themeV2.background.default}
        paddingTop={1}
        paddingBottom={1}
        paddingLeft={2}
        paddingRight={2}
        gap={1}
      >
-        <Spinner color={theme.text.default}>Restarting service...</Spinner>
-        <text fg={theme.text.subdued}>Your session will resume automatically.</text>
+        <Spinner color={themeV2.text.default}>Restarting service...</Spinner>
+        <text fg={themeV2.text.subdued}>Your session will resume automatically.</text>
      </box>
    </box>
  )
@@ -1,250 +0,0 @@
-import { RGBA, TextAttributes } from "@opentui/core"
-import { For, Show, createEffect, createMemo, createSignal } from "solid-js"
-import { useTerminalDimensions } from "@opentui/solid"
-import { useConfig } from "../config"
-import { useSessionTabs } from "../context/session-tabs"
-import { useTheme, useThemes } from "../context/theme"
-import {
-  adaptiveSessionTabLayout,
-  sessionTabComplete,
-  SESSION_TAB_OVERFLOW_WIDTH,
-  type SessionTabUnread,
-} from "../context/session-tabs-model"
-import { createAnimatable, spring } from "../ui/animation"
-import { Locale } from "../util/locale"
-import { stringWidth } from "../util/string-width"
-import { TabPulse } from "./tab-pulse"
-import { tint } from "../theme/color"
-
-type ContextController = ReturnType<typeof useSessionTabs>
-export type SessionTabsStatus = Omit<ReturnType<ContextController["status"]>, "unread"> & {
-  unread: SessionTabUnread | undefined
-}
-export type SessionTabsController = Pick<ContextController, "tabs" | "current" | "select" | "close"> & {
-  status(sessionID: string): SessionTabsStatus
-}
-
-export function SessionTabs(props: { controller?: SessionTabsController; animations?: boolean } = {}) {
-  const tabs = props.controller ?? useSessionTabs()
-  const dimensions = useTerminalDimensions()
-  const theme = useTheme()
-  const { mode } = useThemes()
-  const config = useConfig().data
-  const animations = () => props.animations ?? config.animations ?? true
-  const [hovered, setHovered] = createSignal<string>()
-  const hueStep = () => (mode() === "light" ? 800 : 200)
-  const accent = () => theme.hue.accent[hueStep()]
-  const activeNumber = () => tint(theme.hue.interactive[hueStep()], theme.background.default, 0.25)
-  const idleNumber = () => tint(theme.text.subdued, theme.background.default, 0.35)
-  const activeID = createMemo(tabs.current)
-  const items = tabs.tabs
-  const layout = createMemo((previous: ReturnType<typeof adaptiveSessionTabLayout> | undefined) =>
-    adaptiveSessionTabLayout(items(), activeID(), dimensions().width, previous?.start),
-  )
-  const statuses = createMemo(
-    () =>
-      new Map(
-        layout().tabs.map((tab) => {
-          const status = tabs.status(tab.sessionID)
-          return [
-            tab.sessionID,
-            {
-              ...status,
-              complete: sessionTabComplete(status.unread, status.busy),
-            },
-          ] as const
-        }),
-      ),
-  )
-  const targets = createMemo(() => ({
-    widths: layout().widths,
-    selections: layout().tabs.map((tab) => Number(tab.sessionID === activeID())),
-    activities: layout().tabs.map((tab) => Number(statuses().get(tab.sessionID)!.complete)),
-  }))
-  const motion = createAnimatable(targets(), {
-    enabled: animations,
-    transition: spring({ visualDuration: 0.1 }),
-  })
-  const identity = createMemo(() =>
-    layout()
-      .tabs.map((tab) => tab.sessionID)
-      .join(":"),
-  )
-  let signature = ""
-  let total = 0
-
-  createEffect(() => {
-    const next = targets()
-    const nextSignature = identity()
-    const reset = (signature && signature !== nextSignature) || (total && total !== layout().total)
-    signature = nextSignature
-    total = layout().total
-    if (reset) return motion.jump(next)
-    motion.animate(next)
-  })
-
-  const visuals = createMemo(() => {
-    const current = signature === identity() && total === layout().total ? motion.value() : targets()
-    const widths = current.widths.map((width) => Math.max(1, Math.round(width)))
-    const active = layout().tabs.findIndex((tab) => tab.sessionID === activeID())
-    if (active !== -1) widths[active]! += layout().total - widths.reduce((sum, width) => sum + width, 0)
-    return new Map(
-      layout().tabs.map((tab, index) => [
-        tab.sessionID,
-        {
-          width: widths[index]!,
-          selection: current.selections[index] ?? Number(tab.sessionID === activeID()),
-          activity: current.activities[index] ?? Number(statuses().get(tab.sessionID)!.complete),
-        },
-      ]),
-    )
-  })
-
-  return (
-    <box
-      height={1}
-      flexShrink={0}
-      position="relative"
-      flexDirection="row"
-      zIndex={1}
-      renderAfter={function (buffer) {
-        const x = Math.max(0, this.screenX)
-        const y = this.screenY + this.height
-        const width = Math.min(this.width, buffer.width - x)
-        if (y < 0 || y >= buffer.height || width <= 0) return
-        buffer.fillRect(
-          x,
-          y,
-          width,
-          1,
-          RGBA.fromValues(
-            theme.background.default.r,
-            theme.background.default.g,
-            theme.background.default.b,
-            mode() === "light" ? 0.14 : 0.28,
-          ),
-        )
-      }}
-    >
-      <Show when={layout().before > 0}>
-        <text width={SESSION_TAB_OVERFLOW_WIDTH} fg={theme.text.subdued}>
-          ‹{layout().before}
-        </text>
-      </Show>
-      <For each={layout().tabs}>
-        {(tab) => {
-          const selected = () => activeID() === tab.sessionID
-          const status = () => statuses().get(tab.sessionID)!
-          const width = () => visuals().get(tab.sessionID)?.width ?? 1
-          const selection = () => visuals().get(tab.sessionID)?.selection ?? Number(selected())
-          const activity = () => visuals().get(tab.sessionID)?.activity ?? Number(status().complete)
-          const background = () => {
-            const base =
-              hovered() === tab.sessionID && !selected()
-                ? theme.background.action.primary.hovered
-                : theme.background.default
-            return tint(base, theme.raise(theme.background.surface.offset), selection())
-          }
-          const pulseBackground = () => background()
-          const pulseColor = () => tint(pulseBackground(), theme.text.default, 0.45)
-          const title = () => tab.title ?? "Untitled session"
-          const availableTitleWidth = () => Math.max(1, width() - 3)
-          const visibleTitle = createMemo(() => Locale.takeWidth(title(), availableTitleWidth()))
-          const visibleTitleParts = createMemo(() => Locale.graphemes(visibleTitle()))
-          const fadeWidth = () => (hovered() === tab.sessionID ? 6 : 4)
-          const fadedTitleParts = createMemo(() => visibleTitleParts().slice(-fadeWidth()))
-          const titleFades = createMemo(
-            () => stringWidth(title()) >= availableTitleWidth() && availableTitleWidth() > fadeWidth(),
-          )
-          const foreground = () => {
-            if (hovered() === tab.sessionID) return theme.text.default
-            return tint(theme.text.subdued, theme.text.default, selection())
-          }
-          const numberColor = () => {
-            if (status().attention) return theme.text.feedback.warning.default
-            if (status().unread === "error") return theme.text.feedback.error.default
-            const base =
-              hovered() === tab.sessionID && !selected()
-                ? foreground()
-                : tint(idleNumber(), activeNumber(), selection())
-            return tint(base, accent(), activity())
-          }
-          const closeColor = () => tint(theme.text.subdued, theme.text.default, 0.6)
-          return (
-            <box
-              width={width()}
-              position="relative"
-              flexDirection="row"
-              backgroundColor={background()}
-              onMouseOver={() => setHovered(tab.sessionID)}
-              onMouseOut={() => setHovered(undefined)}
-              onMouseUp={() => tabs.select(tab.sessionID)}
-            >
-              <TabPulse
-                enabled={animations()}
-                active={status().busy}
-                complete={status().complete}
-                glow={status().unread === "activity" && !status().busy && !selected() && !status().attention}
-                color={pulseColor()}
-                glowColor={accent()}
-                completionColor={accent()}
-                backgroundColor={pulseBackground()}
-              />
-              <box zIndex={1} width="100%" flexDirection="row">
-                <text width={1}> </text>
-                <text width={2} fg={numberColor()} attributes={selected() ? TextAttributes.BOLD : undefined}>
-                  {items().findIndex((item) => item.sessionID === tab.sessionID) + 1}
-                </text>
-                <Show
-                  when={titleFades()}
-                  fallback={
-                    <text width={availableTitleWidth()} fg={foreground()} wrapMode="none">
-                      {visibleTitle()}
-                    </text>
-                  }
-                >
-                  <text width={availableTitleWidth()} fg={foreground()} wrapMode="none">
-                    {visibleTitleParts().slice(0, -fadeWidth()).join("")}
-                    <For each={fadedTitleParts()}>
-                      {(character, index) => (
-                        <span
-                          style={{
-                            fg: tint(
-                              foreground(),
-                              pulseBackground(),
-                              0.2 + 0.72 * (index() / Math.max(1, fadedTitleParts().length - 1)),
-                            ),
-                          }}
-                        >
-                          {character}
-                        </span>
-                      )}
-                    </For>
-                  </text>
-                </Show>
-                <text
-                  position="absolute"
-                  right={1}
-                  zIndex={2}
-                  width={1}
-                  fg={closeColor()}
-                  onMouseUp={(event) => {
-                    event.stopPropagation()
-                    tabs.close(tab.sessionID)
-                  }}
-                >
-                  {hovered() === tab.sessionID ? "×" : ""}
-                </text>
-              </box>
-            </box>
-          )
-        }}
-      </For>
-      <Show when={layout().after > 0}>
-        <text width={SESSION_TAB_OVERFLOW_WIDTH} fg={theme.text.subdued}>
-          {layout().after}›
-        </text>
-      </Show>
-    </box>
-  )
-}
@@ -11,9 +11,9 @@ export { SPINNER_FRAMES } from "./spinner-frames"
 registerOpencodeSpinner()

 export function Spinner(props: { children?: JSX.Element; color?: RGBA }) {
-  const theme = useTheme()
+  const { themeV2 } = useTheme()
  const config = useConfig().data
-  const color = () => props.color ?? theme.text.subdued
+  const color = () => props.color ?? themeV2.text.subdued
  return (
    <Show
      when={config.animations ?? true}
@@ -1,9 +1,9 @@
 import { createEffect, createMemo, createSignal, onCleanup, Show } from "solid-js"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { Spinner } from "./spinner"

 export function StartupLoading(props: { ready: () => boolean }) {
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const [show, setShow] = createSignal(false)
  const text = createMemo(() => (props.ready() ? "Finishing startup..." : "Loading plugins..."))
  let wait: NodeJS.Timeout | undefined
@@ -54,8 +54,8 @@ export function StartupLoading(props: { ready: () => boolean }) {
  return (
    <Show when={show()}>
      <box position="absolute" zIndex={5000} left={0} right={0} bottom={1} justifyContent="center" alignItems="center">
-        <box backgroundColor={theme.background.default} paddingLeft={1} paddingRight={1}>
-          <Spinner color={theme.text.subdued}>{text()}</Spinner>
+        <box backgroundColor={themeV2.background.default} paddingLeft={1} paddingRight={1}>
+          <Spinner color={themeV2.text.subdued}>{text()}</Spinner>
        </box>
      </box>
    </Show>
@@ -1,266 +0,0 @@
-import { OptimizedBuffer, Renderable, RGBA, type RenderableOptions, type RenderContext } from "@opentui/core"
-import { extend } from "@opentui/solid"
-
-type TabPulseOptions = RenderableOptions<TabPulseRenderable> & {
-  enabled?: boolean
-  active?: boolean
-  complete?: boolean
-  glow?: boolean
-  color?: RGBA
-  glowColor?: RGBA
-  completionColor?: RGBA
-  backgroundColor?: RGBA
-}
-
-const clamp = (value: number) => Math.max(0, Math.min(1, value))
-const smootherstep = (value: number) => value * value * value * (value * (value * 6 - 15) + 10)
-const RUN_DURATION = 2_800
-const RUN_HEAD = 4
-const RUN_TAIL = 18
-const RUN_FADE_OUT = 500
-const COMPLETION_DURATION = 900
-const COMPLETION_ATTACK = 0.16
-const GLOW_TAIL = 12
-const GLOW_OPACITY = 0.16
-const DEFAULT_FOREGROUND = RGBA.defaultForeground()
-const intensityAt = (index: number, front: number, head: number, tail: number) => {
-  const distance = front - index
-  return distance < 0 ? smootherstep(clamp(1 + distance / head)) : smootherstep(clamp(1 - distance / tail))
-}
-const coast = (value: number) => {
-  const ramp = 0.2
-  if (value < ramp) return (value * value) / (2 * ramp * (1 - ramp))
-  if (value > 1 - ramp) return 1 - ((1 - value) * (1 - value)) / (2 * ramp * (1 - ramp))
-  return (value - ramp / 2) / (1 - ramp)
-}
-export const completionPulseOpacity = (progress: number) =>
-  progress < COMPLETION_ATTACK
-    ? smootherstep(clamp(progress / COMPLETION_ATTACK))
-    : 1 - smootherstep(clamp((progress - COMPLETION_ATTACK) / (1 - COMPLETION_ATTACK)))
-export const unreadGlowIntensity = (index: number, width: number) => {
-  const tail = Math.min(GLOW_TAIL, Math.max(1, width - 2))
-  return smootherstep(clamp(1 - Math.max(0, index - 1) / tail))
-}
-export function blendTabPulseColor(
-  output: RGBA,
-  background: RGBA,
-  glowColor: RGBA,
-  runningColor: RGBA,
-  completionColor: RGBA,
-  glow: number,
-  running: number,
-  completion: number,
-) {
-  output.r = background.r + (glowColor.r - background.r) * glow
-  output.g = background.g + (glowColor.g - background.g) * glow
-  output.b = background.b + (glowColor.b - background.b) * glow
-  output.r += (runningColor.r - output.r) * running
-  output.g += (runningColor.g - output.g) * running
-  output.b += (runningColor.b - output.b) * running
-  output.r += (completionColor.r - output.r) * completion
-  output.g += (completionColor.g - output.g) * completion
-  output.b += (completionColor.b - output.b) * completion
-}
-class TabPulseRenderable extends Renderable {
-  private _enabled: boolean
-  private _active: boolean
-  private _complete: boolean
-  private _glow: boolean
-  private _color: RGBA
-  private _glowColor: RGBA
-  private _completionColor: RGBA
-  private _backgroundColor: RGBA
-  private clock = 0
-  private fadeClock: number | undefined
-  private completionClock: number | undefined
-  private completionPending = false
-  private renderColor = RGBA.fromInts(0, 0, 0)
-
-  constructor(ctx: RenderContext, options: TabPulseOptions = {}) {
-    const enabled = options.enabled ?? true
-    const active = options.active ?? false
-    super(ctx, { ...options, height: 1, live: enabled && active })
-    this._enabled = enabled
-    this._active = active
-    this._complete = options.complete ?? false
-    this._glow = options.glow ?? false
-    this._color = options.color ?? RGBA.defaultForeground()
-    this._glowColor = options.glowColor ?? this._color
-    this._completionColor = options.completionColor ?? this._color
-    this._backgroundColor = options.backgroundColor ?? RGBA.defaultBackground()
-  }
-
-  set enabled(value: boolean) {
-    if (value === this._enabled) return
-    this._enabled = value
-    if (!value) {
-      this.fadeClock = undefined
-      this.completionClock = undefined
-      this.completionPending = false
-      this.live = false
-    } else if (this._active) {
-      this.live = true
-    }
-    this.requestRender()
-  }
-
-  set active(value: boolean) {
-    if (value === this._active) return
-    this._active = value
-    if (!this._enabled) return
-    if (value) {
-      this.fadeClock = undefined
-      this.completionClock = undefined
-      this.completionPending = false
-      this.live = true
-    } else {
-      this.fadeClock = 0
-      this.completionPending = true
-      this.live = true
-    }
-    this.requestRender()
-  }
-
-  set complete(value: boolean) {
-    if (value === this._complete) return
-    this._complete = value
-    if (!value) {
-      this.completionClock = undefined
-      this.completionPending = false
-    }
-    if (value && this.completionPending) {
-      this.completionClock = 0
-      this.completionPending = false
-      this.live = this._enabled
-    }
-    this.requestRender()
-  }
-
-  set glow(value: boolean) {
-    if (value === this._glow) return
-    this._glow = value
-    this.requestRender()
-  }
-
-  set color(value: RGBA) {
-    if (value.equals(this._color)) return
-    this._color = value
-    this.requestRender()
-  }
-
-  set glowColor(value: RGBA) {
-    if (value.equals(this._glowColor)) return
-    this._glowColor = value
-    this.requestRender()
-  }
-
-  set completionColor(value: RGBA) {
-    if (value.equals(this._completionColor)) return
-    this._completionColor = value
-    this.requestRender()
-  }
-
-  set backgroundColor(value: RGBA) {
-    if (value.equals(this._backgroundColor)) return
-    this._backgroundColor = value
-    this.requestRender()
-  }
-
-  protected override onUpdate(deltaTime: number): void {
-    if (!this._enabled) return
-    if (this._active || this.fadeClock !== undefined) this.clock += deltaTime
-    if (this.fadeClock !== undefined) {
-      this.fadeClock += deltaTime
-      if (this.fadeClock >= RUN_FADE_OUT) this.fadeClock = undefined
-    }
-    if (this.completionPending) {
-      if (this._complete) {
-        this.completionClock = 0
-        this.completionPending = false
-      } else if (this.fadeClock === undefined) {
-        this.completionPending = false
-      }
-    }
-    if (this.completionClock !== undefined) {
-      this.completionClock += deltaTime
-      if (this.completionClock >= COMPLETION_DURATION) this.completionClock = undefined
-    }
-    this.live = this._active || this.fadeClock !== undefined || this.completionClock !== undefined
-  }
-
-  protected override renderSelf(buffer: OptimizedBuffer): void {
-    if (!this.visible || this.isDestroyed || this.width <= 0) return
-    const runningOpacity = !this._enabled
-      ? 0
-      : this._active
-        ? 1
-        : this.fadeClock === undefined
-          ? 0
-          : 1 - smootherstep(clamp(this.fadeClock / RUN_FADE_OUT))
-    const completionOpacity =
-      !this._enabled || this.completionClock === undefined
-        ? 0
-        : completionPulseOpacity(this.completionClock / COMPLETION_DURATION)
-    if (!this._glow && runningOpacity === 0 && completionOpacity === 0) return
-    const progress = (this.clock % RUN_DURATION) / RUN_DURATION
-    const start = -RUN_HEAD
-    const end = this.width - 1 + RUN_TAIL
-    const front = start + coast(progress) * (end - start)
-    const secondFront = start + coast((progress + 0.5) % 1) * (end - start)
-    for (let index = 0; index < this.width; index++) {
-      const intensity = Math.max(
-        intensityAt(index, front, RUN_HEAD, RUN_TAIL),
-        intensityAt(index, secondFront, RUN_HEAD, RUN_TAIL),
-      )
-      const glow = this._glow ? unreadGlowIntensity(index, this.width) * GLOW_OPACITY : 0
-      const running = intensity * 0.14 * runningOpacity
-      const completion = completionOpacity * 0.18
-      blendTabPulseColor(
-        this.renderColor,
-        this._backgroundColor,
-        this._glowColor,
-        this._color,
-        this._completionColor,
-        glow,
-        running,
-        completion,
-      )
-      buffer.setCell(this.screenX + index, this.screenY, " ", DEFAULT_FOREGROUND, this.renderColor)
-    }
-  }
-}
-
-declare module "@opentui/solid" {
-  interface OpenTUIComponents {
-    tab_pulse: typeof TabPulseRenderable
-  }
-}
-
-extend({ tab_pulse: TabPulseRenderable })
-
-export function TabPulse(props: {
-  enabled?: boolean
-  active: boolean
-  complete?: boolean
-  glow?: boolean
-  color: RGBA
-  glowColor?: RGBA
-  completionColor?: RGBA
-  backgroundColor: RGBA
-}) {
-  return (
-    <tab_pulse
-      position="absolute"
-      zIndex={0}
-      width="100%"
-      enabled={props.enabled ?? true}
-      active={props.active}
-      complete={props.complete ?? false}
-      glow={props.glow ?? false}
-      color={props.color}
-      glowColor={props.glowColor ?? props.color}
-      completionColor={props.completionColor ?? props.color}
-      backgroundColor={props.backgroundColor}
-    />
-  )
-}
@@ -1,13 +1,13 @@
 import { onCleanup } from "solid-js"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { useToast } from "../ui/toast"

 export function ThemeErrorToast() {
-  const themes = useThemes()
+  const theme = useTheme()
  const toast = useToast()

  onCleanup(
-    themes.onError(({ name, error }) =>
+    theme.onError(({ name, error }) =>
      toast.show({
        variant: "error",
        title: `Failed to load theme: ${name}`,
@@ -122,13 +122,6 @@ export const Info = Schema.Struct({
      }),
    }),
  ).annotate({ description: "Session transcript presentation settings" }),
-  tabs: Schema.optional(
-    Schema.Struct({
-      enabled: Schema.optional(Schema.Boolean).annotate({
-        description: "Use a persistent session tab strip instead of pinned quick-switch sessions",
-      }),
-    }),
-  ).annotate({ description: "Session tab settings" }),
  mini: Schema.optional(
    Schema.Struct({
      thinking: Schema.optional(Schema.Literals(["show", "hide"])).annotate({
@@ -87,13 +87,6 @@ export const Definitions = {
  session_move: keybind("none", "Move session"),
  session_new: keybind("<leader>n", "Create a new session"),
  session_list: keybind("<leader>l", "List all sessions"),
-  session_tab_next: keybind("ctrl+tab,<leader>right", "Switch to next open session tab"),
-  session_tab_previous: keybind("ctrl+shift+tab,<leader>left", "Switch to previous open session tab"),
-  session_tab_history_back: keybind("ctrl+o", "Go back in session tab history"),
-  session_tab_history_forward: keybind("ctrl+i", "Go forward in session tab history"),
-  session_tab_next_unread: keybind("<leader>down", "Switch to next unread session tab"),
-  session_tab_previous_unread: keybind("<leader>up", "Switch to previous unread session tab"),
-  session_tab_close: keybind("<leader>w", "Close current session tab"),
  session_timeline: keybind("<leader>g", "Show session timeline"),
  session_fork: keybind("none", "Fork session from message"),
  session_rename: keybind("ctrl+r", "Rename session"),
@@ -104,7 +97,7 @@ export const Definitions = {
  session_background: keybind("ctrl+b", "Background blocking session tools"),
  session_compact: keybind("<leader>c", "Compact the session"),
  session_queued_prompts: keybind("<leader>q", "View pending work"),
-  session_child_first: keybind("down", "Toggle subagent picker"),
+  session_child_first: keybind("down,<leader>down", "Toggle subagent picker"),
  session_child_cycle: keybind("right", "Go to next child session"),
  session_child_cycle_reverse: keybind("left", "Go to previous child session"),
  session_parent: keybind("up", "Go to parent session"),
@@ -118,15 +111,6 @@ export const Definitions = {
  session_quick_switch_7: keybind("<leader>7", "Switch to session in quick slot 7"),
  session_quick_switch_8: keybind("<leader>8", "Switch to session in quick slot 8"),
  session_quick_switch_9: keybind("<leader>9", "Switch to session in quick slot 9"),
-  session_tab_select_1: keybind("<leader>1,ctrl+1", "Switch to session tab 1"),
-  session_tab_select_2: keybind("<leader>2,ctrl+2", "Switch to session tab 2"),
-  session_tab_select_3: keybind("<leader>3,ctrl+3", "Switch to session tab 3"),
-  session_tab_select_4: keybind("<leader>4,ctrl+4", "Switch to session tab 4"),
-  session_tab_select_5: keybind("<leader>5,ctrl+5", "Switch to session tab 5"),
-  session_tab_select_6: keybind("<leader>6,ctrl+6", "Switch to session tab 6"),
-  session_tab_select_7: keybind("<leader>7,ctrl+7", "Switch to session tab 7"),
-  session_tab_select_8: keybind("<leader>8,ctrl+8", "Switch to session tab 8"),
-  session_tab_select_9: keybind("<leader>9,ctrl+9", "Switch to session tab 9"),

  stash_delete: keybind("ctrl+d", "Delete stash entry"),
  model_provider_list: keybind("ctrl+a", "Open provider list from model dialog"),
@@ -230,9 +214,24 @@ export const Definitions = {
  "permission.prompt.fullscreen": keybind("ctrl+f", "Toggle permission prompt fullscreen"),
  "plugins.toggle": keybind("space", "Toggle plugin"),
  "dialog.mcp.toggle": keybind("space", "Toggle MCP server"),
+  "dialog.plugins.install": keybind("shift+i", "Install plugin from plugin dialog"),

  terminal_suspend: keybind("ctrl+z", "Suspend terminal"),
  terminal_title_toggle: keybind("none", "Toggle terminal title"),
+  plugin_manager: keybind("none", "Open plugin manager dialog"),
+  plugin_install: keybind("none", "Install plugin"),
+
+  which_key_toggle: keybind("ctrl+alt+k", "Toggle which-key panel"),
+  which_key_layout_toggle: keybind("ctrl+alt+shift+k", "Switch which-key layout"),
+  which_key_pending_toggle: keybind("ctrl+alt+shift+p", "Toggle which-key pending preview"),
+  which_key_group_previous: keybind("ctrl+alt+left,ctrl+alt+[", "Previous which-key group"),
+  which_key_group_next: keybind("ctrl+alt+right,ctrl+alt+]", "Next which-key group"),
+  which_key_scroll_up: keybind("ctrl+alt+up,ctrl+alt+p", "Scroll which-key up"),
+  which_key_scroll_down: keybind("ctrl+alt+down,ctrl+alt+n", "Scroll which-key down"),
+  which_key_page_up: keybind("ctrl+alt+pageup", "Page which-key up"),
+  which_key_page_down: keybind("ctrl+alt+pagedown", "Page which-key down"),
+  which_key_home: keybind("ctrl+alt+home", "Jump to first which-key binding"),
+  which_key_end: keybind("ctrl+alt+end", "Jump to last which-key binding"),
 } satisfies Record<string, Definition>

 type KeybindName = keyof typeof Definitions
@@ -290,13 +289,6 @@ export const CommandMap = {
  session_move: "session.move",
  session_new: "session.new",
  session_list: "session.list",
-  session_tab_next: "session.tab.next",
-  session_tab_previous: "session.tab.previous",
-  session_tab_history_back: "session.tab.history.back",
-  session_tab_history_forward: "session.tab.history.forward",
-  session_tab_next_unread: "session.tab.next_unread",
-  session_tab_previous_unread: "session.tab.previous_unread",
-  session_tab_close: "session.tab.close",
  session_timeline: "session.timeline",
  session_fork: "session.fork",
  session_rename: "session.rename",
@@ -321,15 +313,6 @@ export const CommandMap = {
  session_quick_switch_7: "session.quick_switch.7",
  session_quick_switch_8: "session.quick_switch.8",
  session_quick_switch_9: "session.quick_switch.9",
-  session_tab_select_1: "session.tab.select.1",
-  session_tab_select_2: "session.tab.select.2",
-  session_tab_select_3: "session.tab.select.3",
-  session_tab_select_4: "session.tab.select.4",
-  session_tab_select_5: "session.tab.select.5",
-  session_tab_select_6: "session.tab.select.6",
-  session_tab_select_7: "session.tab.select.7",
-  session_tab_select_8: "session.tab.select.8",
-  session_tab_select_9: "session.tab.select.9",
  stash_delete: "stash.delete",
  model_provider_list: "model.dialog.provider",
  model_favorite_toggle: "model.dialog.favorite",
@@ -410,6 +393,19 @@ export const CommandMap = {
  history_next: "prompt.history.next",
  terminal_suspend: "terminal.suspend",
  terminal_title_toggle: "terminal.title.toggle",
+  plugin_manager: "plugins.list",
+  plugin_install: "plugins.install",
+  which_key_toggle: "which-key.toggle",
+  which_key_layout_toggle: "which-key.layout.toggle",
+  which_key_pending_toggle: "which-key.pending.toggle",
+  which_key_group_previous: "which-key.group.previous",
+  which_key_group_next: "which-key.group.next",
+  which_key_scroll_up: "which-key.scroll.up",
+  which_key_scroll_down: "which-key.scroll.down",
+  which_key_page_up: "which-key.page.up",
+  which_key_page_down: "which-key.page.down",
+  which_key_home: "which-key.home",
+  which_key_end: "which-key.end",
 } satisfies BindingCommandMap
 const CommandDescriptions = Object.fromEntries(
  Object.entries(Definitions).map(([name, item]) => [
@@ -17,7 +17,7 @@ import {
  type ModelPreference,
  type ModelPreferenceModel,
 } from "../model-preference"
-import { useTheme, useThemes } from "./theme"
+import { useTheme } from "./theme"
 import { useToast } from "../ui/toast"
 import { useRoute } from "./route"
 import { useData } from "./data"
@@ -50,8 +50,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
    const data = useData()
    const client = useClient()
    const toast = useToast()
-    const theme = useTheme()
-    const { mode } = useThemes()
+    const { themeV2, mode } = useTheme()
    const route = useRoute()
    const paths = useTuiPaths()
    const args = useArgs()
@@ -83,7 +82,7 @@ export const { use: useLocal, provider: LocalProvider } = createSimpleContext({
      const colors = createMemo(() => {
        const step = mode() === "light" ? 800 : 200
        return dedupeWith(
-          theme.categorical.map((scale) => scale[step]),
+          themeV2.categorical.map((scale) => scale[step]),
          (first, second) => first.equals(second),
        )
      })
@@ -1,153 +0,0 @@
-export type SessionTab = {
-  sessionID: string
-  title?: string
-}
-
-export type SessionTabUnread = "activity" | "error"
-
-export type SessionTabHistory = {
-  entries: readonly string[]
-  index: number
-}
-
-export function sessionTabComplete(unread: SessionTabUnread | undefined, busy: boolean) {
-  return unread === "activity" && !busy
-}
-
-export const SESSION_TAB_WIDTH = 22
-export const SESSION_TAB_MAX_WIDTH = 32
-export const SESSION_TAB_MIN_WIDTH = 8
-export const SESSION_TAB_OVERFLOW_WIDTH = 3
-
-export function openSessionTab(tabs: SessionTab[], tab: SessionTab): SessionTab[] {
-  const index = tabs.findIndex((item) => item.sessionID === tab.sessionID)
-  if (index === -1) return [...tabs, tab]
-  if (!tab.title || tabs[index]?.title === tab.title) return tabs
-  return tabs.map((item, position) => (position === index ? { ...item, title: tab.title } : item))
-}
-
-export function closeSessionTab(tabs: readonly SessionTab[], sessionID: string) {
-  const index = tabs.findIndex((tab) => tab.sessionID === sessionID)
-  if (index === -1) return { tabs: [...tabs], next: undefined }
-  return {
-    tabs: tabs.filter((tab) => tab.sessionID !== sessionID),
-    next: tabs[index + 1]?.sessionID ?? tabs[index - 1]?.sessionID,
-  }
-}
-
-export function cycleSessionTab(tabs: readonly SessionTab[], active: string | undefined, direction: 1 | -1) {
-  if (tabs.length === 0) return
-  const index = tabs.findIndex((tab) => tab.sessionID === active)
-  const start = index === -1 ? (direction === 1 ? -1 : 0) : index
-  return tabs[(start + direction + tabs.length) % tabs.length]
-}
-
-export function recordSessionTabHistory(history: SessionTabHistory, sessionID: string): SessionTabHistory {
-  if (history.entries[history.index] === sessionID) return history
-  const entries = [...history.entries.slice(0, history.index + 1), sessionID]
-  return { entries, index: entries.length - 1 }
-}
-
-export function moveSessionTabHistory(
-  history: SessionTabHistory,
-  tabs: readonly SessionTab[],
-  active: string | undefined,
-  direction: 1 | -1,
-) {
-  if (!active) {
-    const sessionID = history.entries[history.index]
-    return tabs.some((tab) => tab.sessionID === sessionID) ? { history, sessionID } : { history, sessionID: undefined }
-  }
-  const entries = history.entries.map((sessionID, index) => ({ sessionID, index }))
-  const candidates = direction === -1 ? entries.slice(0, history.index).reverse() : entries.slice(history.index + 1)
-  const target = candidates.find(
-    (entry) => entry.sessionID !== active && tabs.some((tab) => tab.sessionID === entry.sessionID),
-  )
-  if (!target) return { history, sessionID: undefined }
-  return { history: { ...history, index: target.index }, sessionID: target.sessionID }
-}
-
-export function adaptiveSessionTabLayout(
-  tabs: readonly SessionTab[],
-  active: string | undefined,
-  available: number,
-  previousStart = 0,
-) {
-  if (tabs.length === 0) return { tabs: [], widths: [], before: 0, after: 0, start: 0, total: 0 }
-
-  const activeIndex = tabs.findIndex((tab) => tab.sessionID === active)
-  const fit = (width: number) =>
-    Math.min(
-      tabs.length,
-      Math.max(
-        1,
-        activeIndex === -1
-          ? Math.floor(Math.max(0, width) / SESSION_TAB_MIN_WIDTH)
-          : 1 + Math.floor((Math.max(0, width) - SESSION_TAB_WIDTH) / SESSION_TAB_MIN_WIDTH),
-      ),
-    )
-  const solve = (count: number, start: number, attempts: number): { count: number; start: number } => {
-    const boundedStart = Math.min(Math.max(0, start), tabs.length - count)
-    const nextStart = Math.min(
-      Math.max(
-        0,
-        activeIndex === -1
-          ? boundedStart
-          : activeIndex < boundedStart
-            ? activeIndex
-            : activeIndex >= boundedStart + count
-              ? activeIndex - count + 1
-              : boundedStart,
-      ),
-      tabs.length - count,
-    )
-    const markers =
-      (nextStart > 0 ? SESSION_TAB_OVERFLOW_WIDTH : 0) +
-      (nextStart + count < tabs.length ? SESSION_TAB_OVERFLOW_WIDTH : 0)
-    const nextCount = fit(available - markers)
-    if (nextCount === count || attempts === 0) return { count, start: nextStart }
-    return solve(nextCount, nextStart, attempts - 1)
-  }
-  const solved = solve(fit(available), previousStart, 3)
-  const visible = tabs.slice(solved.start, solved.start + solved.count)
-  const before = solved.start
-  const after = tabs.length - solved.start - solved.count
-  const contentWidth = Math.max(
-    1,
-    available - (before > 0 ? SESSION_TAB_OVERFLOW_WIDTH : 0) - (after > 0 ? SESSION_TAB_OVERFLOW_WIDTH : 0),
-  )
-  const roomy = contentWidth >= SESSION_TAB_WIDTH * visible.length
-  const total = roomy ? Math.min(contentWidth, SESSION_TAB_MAX_WIDTH * visible.length) : contentWidth
-  if (roomy || activeIndex === -1) {
-    const width = Math.floor(total / visible.length)
-    const remainder = total - width * visible.length
-    return {
-      tabs: visible,
-      widths: visible.map((_, index) => width + Number(index < remainder)),
-      before,
-      after,
-      start: solved.start,
-      total,
-    }
-  }
-  const inactiveWidth =
-    visible.length === 1
-      ? 0
-      : Math.min(
-          SESSION_TAB_WIDTH,
-          Math.max(
-            SESSION_TAB_MIN_WIDTH,
-            Math.floor((total - Math.min(SESSION_TAB_WIDTH, total)) / (visible.length - 1)),
-          ),
-        )
-  const activeWidth = visible.length === 1 ? total : total - inactiveWidth * (visible.length - 1)
-
-  return {
-    tabs: visible,
-    widths: visible.map((tab) => (tab.sessionID === active ? activeWidth : inactiveWidth)),
-    before,
-    after,
-    start: solved.start,
-    total,
-  }
-}
@@ -1,267 +0,0 @@
-import { batch, createEffect, onCleanup, untrack } from "solid-js"
-import { createStore, produce, reconcile } from "solid-js/store"
-import path from "path"
-import { isDeepEqual } from "remeda"
-import { createSimpleContext } from "./helper"
-import { useData } from "./data"
-import { useEvent } from "./event"
-import { useRoute } from "./route"
-import { useTuiPaths } from "./runtime"
-import { useConfig } from "../config"
-import { readJson, writeJsonAtomic } from "../util/persistence"
-import { isRecord } from "../util/record"
-import {
-  closeSessionTab,
-  cycleSessionTab,
-  moveSessionTabHistory,
-  openSessionTab,
-  recordSessionTabHistory,
-  type SessionTab,
-  type SessionTabHistory,
-  type SessionTabUnread,
-} from "./session-tabs-model"
-
-type PersistedState = {
-  tabs: SessionTab[]
-  unread: Record<string, SessionTabUnread>
-}
-
-export const { use: useSessionTabs, provider: SessionTabsProvider } = createSimpleContext({
-  name: "SessionTabs",
-  init: () => {
-    const route = useRoute()
-    const data = useData()
-    const event = useEvent()
-    const config = useConfig().data
-    const filePath = path.join(useTuiPaths().state, "session-tabs.json")
-    const enabled = () => config.tabs?.enabled ?? false
-    const state: {
-      pending: boolean
-      saving: boolean
-      snapshot: string
-      value?: PersistedState
-    } = { pending: false, saving: false, snapshot: "" }
-    const [store, setStore] = createStore<PersistedState & { ready: boolean }>({
-      ready: false,
-      tabs: [],
-      unread: {},
-    })
-    let history: SessionTabHistory = { entries: [], index: -1 }
-
-    const root = (sessionID: string) => data.session.root(sessionID)
-    const current = () => (route.data.type === "session" ? root(route.data.sessionID) : undefined)
-    const status = (sessionID: string) => {
-      const session = root(sessionID)
-      const members = data.session.family(session)
-      const family = members.length > 0 ? members : [session]
-      return {
-        unread: store.unread[session],
-        attention: family.some(
-          (id) => (data.session.permission.list(id)?.length ?? 0) > 0 || (data.session.form.list(id)?.length ?? 0) > 0,
-        ),
-        busy: family.some((id) => data.session.status(id) === "running" || data.session.pending.list(id).length > 0),
-      }
-    }
-
-    function save() {
-      if (!store.ready) {
-        state.pending = true
-        return
-      }
-      const value = { tabs: [...store.tabs], unread: { ...store.unread } }
-      const snapshot = JSON.stringify(value)
-      if (snapshot === state.snapshot && !state.saving) return
-      state.value = value
-      state.pending = true
-      flush()
-    }
-
-    function flush() {
-      if (state.saving || !state.pending || !state.value) return
-      const value = state.value
-      const snapshot = JSON.stringify(value)
-      state.pending = false
-      if (snapshot === state.snapshot) return
-      state.saving = true
-      void writeJsonAtomic(filePath, value)
-        .then(() => {
-          state.snapshot = snapshot
-        })
-        .catch(() => {})
-        .finally(() => {
-          state.saving = false
-          flush()
-        })
-    }
-
-    function open(sessionID: string) {
-      const session = root(sessionID)
-      const next = openSessionTab(store.tabs, { sessionID: session, title: data.session.get(session)?.title })
-      if (next === store.tabs) return { sessionID: session, changed: false }
-      setStore("tabs", reconcile(next))
-      return { sessionID: session, changed: true }
-    }
-
-    function clearUnread(sessionID: string) {
-      const session = root(sessionID)
-      if (!store.unread[session]) return false
-      setStore(
-        "unread",
-        produce((draft) => {
-          delete draft[session]
-        }),
-      )
-      return true
-    }
-
-    function markUnread(sessionID: string, unread: SessionTabUnread) {
-      if (!enabled()) return
-      const session = root(sessionID)
-      if (current() === session || !store.tabs.some((tab) => tab.sessionID === session)) return
-      if (store.unread[session] === unread) return
-      setStore("unread", session, unread)
-      save()
-    }
-
-    readJson<unknown>(filePath)
-      .then((value) => {
-        if (!isRecord(value)) return
-        const persisted = value
-        if (Array.isArray(persisted.tabs))
-          setStore(
-            "tabs",
-            persisted.tabs.flatMap((tab) => {
-              if (!isRecord(tab) || typeof tab.sessionID !== "string") return []
-              if ("title" in tab && tab.title !== undefined && typeof tab.title !== "string") return []
-              return [{ sessionID: tab.sessionID, title: typeof tab.title === "string" ? tab.title : undefined }]
-            }),
-          )
-        if (persisted.unread && typeof persisted.unread === "object")
-          setStore(
-            "unread",
-            Object.fromEntries(
-              Object.entries(persisted.unread).filter(
-                (entry): entry is [string, SessionTabUnread] => entry[1] === "activity" || entry[1] === "error",
-              ),
-            ),
-          )
-      })
-      .catch(() => {})
-      .finally(() => {
-        setStore("ready", true)
-        if (state.pending) save()
-        else state.snapshot = JSON.stringify({ tabs: store.tabs, unread: store.unread })
-      })
-
-    createEffect(() => {
-      if (!enabled()) return
-      if (!store.ready || route.data.type !== "session" || route.data.sessionID === "dummy") return
-      const routeSessionID = route.data.sessionID
-      batch(() => {
-        const opened = open(routeSessionID)
-        history = recordSessionTabHistory(history, opened.sessionID)
-        const changed = clearUnread(opened.sessionID)
-        if (opened.changed || changed) untrack(save)
-      })
-    })
-
-    createEffect(() => {
-      if (!enabled() || !store.ready) return
-      const next = store.tabs.reduce<SessionTab[]>((tabs, tab) => {
-        const sessionID = root(tab.sessionID)
-        return openSessionTab(tabs, { sessionID, title: data.session.get(sessionID)?.title ?? tab.title })
-      }, [])
-      const unread = Object.entries(store.unread).reduce<Record<string, SessionTabUnread>>((result, entry) => {
-        const sessionID = root(entry[0])
-        result[sessionID] = result[sessionID] === "error" ? "error" : entry[1]
-        return result
-      }, {})
-      if (isDeepEqual(next, store.tabs) && isDeepEqual(unread, store.unread)) return
-      batch(() => {
-        setStore("tabs", reconcile(next))
-        setStore("unread", reconcile(unread))
-      })
-      save()
-    })
-
-    onCleanup(event.on("session.execution.succeeded", (evt) => markUnread(evt.data.sessionID, "activity")))
-    onCleanup(event.on("session.execution.interrupted", (evt) => markUnread(evt.data.sessionID, "activity")))
-    onCleanup(event.on("session.execution.failed", (evt) => markUnread(evt.data.sessionID, "error")))
-    onCleanup(
-      event.on("session.error", (evt) => {
-        if (evt.data.sessionID) markUnread(evt.data.sessionID, "error")
-      }),
-    )
-    onCleanup(
-      event.on("session.deleted", (evt) => {
-        remove(evt.data.sessionID, enabled())
-      }),
-    )
-
-    function remove(sessionID: string, navigate: boolean) {
-      const target = root(sessionID)
-      const closed = closeSessionTab(store.tabs, target)
-      if (closed.tabs.length === store.tabs.length) return
-      const selected = navigate && current() === target
-      const previous = selected
-        ? moveSessionTabHistory(recordSessionTabHistory(history, target), closed.tabs, target, -1)
-        : { history, sessionID: undefined }
-      const next = previous.sessionID ?? closed.next
-      history = previous.history
-      batch(() => {
-        setStore("tabs", reconcile(closed.tabs))
-        clearUnread(target)
-        if (selected) route.navigate(next ? { type: "session", sessionID: next } : { type: "home" })
-      })
-      save()
-    }
-
-    return {
-      enabled,
-      tabs() {
-        return store.tabs
-      },
-      current,
-      status,
-      select(sessionID: string) {
-        if (!enabled()) return
-        route.navigate({ type: "session", sessionID: root(sessionID) })
-      },
-      close(sessionID?: string) {
-        if (!enabled()) return
-        const target = sessionID ? root(sessionID) : current()
-        if (!target) {
-          const previous = store.tabs.at(-1)
-          if (route.data.type === "home" && previous) route.navigate({ type: "session", sessionID: previous.sessionID })
-          return
-        }
-        remove(target, true)
-      },
-      cycle(direction: 1 | -1) {
-        if (!enabled()) return
-        const tab = cycleSessionTab(store.tabs, current(), direction)
-        if (tab) route.navigate({ type: "session", sessionID: tab.sessionID })
-      },
-      cycleUnread(direction: 1 | -1) {
-        if (!enabled()) return
-        const tab = cycleSessionTab(
-          store.tabs.filter((tab) => store.unread[tab.sessionID] || status(tab.sessionID).attention),
-          current(),
-          direction,
-        )
-        if (tab) route.navigate({ type: "session", sessionID: tab.sessionID })
-      },
-      history(direction: 1 | -1) {
-        if (!enabled()) return
-        const next = moveSessionTabHistory(history, store.tabs, current(), direction)
-        history = next.history
-        if (next.sessionID) route.navigate({ type: "session", sessionID: next.sessionID })
-      },
-      selectIndex(index: number) {
-        if (!enabled()) return
-        const tab = store.tabs[index]
-        if (tab) route.navigate({ type: "session", sessionID: tab.sessionID })
-      },
-    }
-  },
-})
@@ -96,13 +96,13 @@ type State = {
 }

 type ContextName = "elevated" | "overlay"
-type Themes = {
-  current: ComponentTheme
-  contextual(context: ContextName): ComponentTheme
+type ThemeService = {
+  themeV2: ComponentTheme
+  contextual(context: ContextName): ThemeService
  readonly selected: string
  all: typeof allThemes
  has: typeof hasTheme
-  currentSyntax: Accessor<SyntaxStyle>
+  syntax: Accessor<SyntaxStyle>
  mode: Accessor<"dark" | "light">
  modes: Accessor<readonly ("dark" | "light")[]>
  supports(mode: "dark" | "light"): boolean
@@ -308,7 +308,7 @@ const themeContext = createSimpleContext({
    const valuesV2 = () => selected().theme
    valuesV2()
    themePerformance.set("Init", `${(performance.now() - initStarted).toFixed(2)} ms`)
-    const current = createComponentTheme(valuesV2, mode)
+    const themeV2 = createComponentTheme(valuesV2, mode)
    const contextsV2 = {
      elevated: createComponentTheme(() => valuesV2().contexts["@context:elevated"] ?? valuesV2(), mode),
      overlay: createComponentTheme(() => valuesV2().contexts["@context:overlay"] ?? valuesV2(), mode),
@@ -316,19 +316,19 @@ const themeContext = createSimpleContext({

    createEffect(() => renderer.setBackgroundColor(valuesV2().background.default))

-    const currentSyntax = createSyntaxStyleMemo(() => generateSyntax(valuesV2(), mode()))
+    const syntax = createSyntaxStyleMemo(() => generateSyntax(valuesV2(), mode()))
    function contextual(context: ContextName) {
-      return contextsV2[context]
+      return contextualServices[context]
    }
-    const service: Themes = {
-      current,
-      currentSyntax,
+    const service: ThemeService = {
+      themeV2,
      contextual,
      get selected() {
        return store.active
      },
      all: allThemes,
      has: hasTheme,
+      syntax,
      mode,
      modes,
      supports: (requested) => modes().includes(requested),
@@ -355,28 +355,21 @@ const themeContext = createSimpleContext({
        return store.ready
      },
    }
-    return {
-      current,
-      themes: service,
-      get ready() {
-        return service.ready
-      },
+    const contextualServices = {
+      elevated: Object.assign(Object.create(service) as ThemeService, { themeV2: contextsV2.elevated }),
+      overlay: Object.assign(Object.create(service) as ThemeService, { themeV2: contextsV2.overlay }),
    }
+    return service
  },
 })

-export function useThemes() {
-  return themeContext.use().themes
-}
-export function useTheme() {
-  return themeContext.use().current
-}
+export const useTheme = themeContext.use
 export const ThemeProvider = themeContext.provider

 export function ThemeContextProvider(props: ParentProps<{ context: ContextName }>) {
-  const themes = useThemes()
+  const theme = useTheme()
  return (
-    <themeContext.context.Provider value={{ current: themes.contextual(props.context), themes, ready: themes.ready }}>
+    <themeContext.context.Provider value={theme.contextual(props.context)}>
      {props.children}
    </themeContext.context.Provider>
  )
@@ -0,0 +1,49 @@
+import type { TuiPlugin, TuiPluginApi, TuiPluginModule } from "@opencode-ai/plugin/v1/tui"
+import type { PluginRuntime } from "../plugin/runtime"
+import PluginManager from "./system/plugins"
+import WhichKey from "./system/which-key"
+
+export type BuiltinTuiPlugin = Omit<TuiPluginModule, "id"> & {
+  id: string
+  tui: TuiPlugin
+  enabled?: boolean
+}
+
+export function createBuiltinPlugins(): BuiltinTuiPlugin[] {
+  return [PluginManager, WhichKey]
+}
+
+export async function loadBuiltinPlugins(api: TuiPluginApi, runtime: PluginRuntime) {
+  const slots = runtime.setupSlots(api)
+  const dispose: Array<() => void> = []
+
+  for (const plugin of createBuiltinPlugins()) {
+    if (plugin.enabled === false) continue
+    const scoped = Object.assign(Object.create(api), {
+      slots: {
+        register(input: Parameters<typeof slots.register>[0]) {
+          dispose.push(slots.register({ ...input, id: plugin.id }))
+          return plugin.id
+        },
+      },
+    }) as TuiPluginApi
+    const now = Date.now()
+    await plugin.tui(scoped, undefined, {
+      id: plugin.id,
+      source: "internal",
+      spec: plugin.id,
+      target: plugin.id,
+      first_time: now,
+      last_time: now,
+      time_changed: now,
+      load_count: 1,
+      fingerprint: plugin.id,
+      state: "first",
+    })
+  }
+
+  return () => {
+    for (const fn of dispose.reverse()) fn()
+    slots.dispose()
+  }
+}
@@ -11,7 +11,7 @@ function Directory(props: { context: Plugin.Context; maxWidth: number }) {

  return (
    <Show when={directory()}>
-      {(value) => <FilePath value={value()} maxWidth={props.maxWidth} fg={props.context.theme.text.subdued} />}
+      {(value) => <FilePath value={value()} maxWidth={props.maxWidth} fg={props.context.theme.themeV2.text.subdued} />}
    </Show>
  )
 }
@@ -24,16 +24,18 @@ function Mcp(props: { context: Plugin.Context }) {
  return (
    <Show when={list().length}>
      <box gap={1} flexDirection="row" flexShrink={0}>
-        <text fg={props.context.theme.text.default}>
+        <text fg={props.context.theme.themeV2.text.default}>
          <Switch>
            <Match when={failed()}>
-              <span style={{ fg: props.context.theme.text.feedback.error.default }}>⊙ </span>
+              <span style={{ fg: props.context.theme.themeV2.text.feedback.error.default }}>⊙ </span>
            </Match>
            <Match when={true}>
              <span
                style={{
                  fg:
-                    count() > 0 ? props.context.theme.text.feedback.success.default : props.context.theme.text.subdued,
+                    count() > 0
+                      ? props.context.theme.themeV2.text.feedback.success.default
+                      : props.context.theme.themeV2.text.subdued,
                }}
              >
                ⊙{" "}
@@ -42,7 +44,7 @@ function Mcp(props: { context: Plugin.Context }) {
          </Switch>
          {count()} MCP
        </text>
-        <text fg={props.context.theme.text.subdued}>/status</text>
+        <text fg={props.context.theme.themeV2.text.subdued}>/status</text>
      </box>
    </Show>
  )
@@ -75,7 +77,7 @@ function View(props: { context: Plugin.Context }) {
      <Mcp context={props.context} />
      <box flexGrow={1} />
      <box flexShrink={0}>
-        <text fg={props.context.theme.text.subdued}>{props.context.app.version}</text>
+        <text fg={props.context.theme.themeV2.text.subdued}>{props.context.app.version}</text>
      </box>
    </box>
  )
@@ -1,5 +1,6 @@
 import { Plugin } from "@opencode-ai/plugin/tui"
 import { createMemo, Show } from "solid-js"
+import { useTheme } from "../../context/theme"
 import { contextUsage } from "../../util/session"

 const money = new Intl.NumberFormat("en-US", {
@@ -8,7 +9,7 @@ const money = new Intl.NumberFormat("en-US", {
 })

 function View(props: { context: Plugin.Context; sessionID: string }) {
-  const theme = props.context.theme
+  const { themeV2 } = useTheme()
  const msg = createMemo(() => props.context.data.session.message.list(props.sessionID))
  const session = createMemo(() => props.context.data.session.get(props.sessionID))
  const cost = createMemo(() => props.context.data.session.cost(props.sessionID))
@@ -19,20 +20,20 @@ function View(props: { context: Plugin.Context; sessionID: string }) {

  return (
    <box>
-      <text fg={theme.text.default}>
+      <text fg={themeV2.text.default}>
        <b>Context</b>
      </text>
-      <Show when={state()} fallback={<text fg={theme.text.subdued}>Not measured</text>}>
+      <Show when={state()} fallback={<text fg={themeV2.text.subdued}>Not measured</text>}>
        {(value) => (
          <>
-            <text fg={theme.text.subdued}>{value().tokens.toLocaleString()} tokens</text>
+            <text fg={themeV2.text.subdued}>{value().tokens.toLocaleString()} tokens</text>
            <Show when={value().percent !== undefined}>
-              <text fg={theme.text.subdued}>{value().percent}% used</text>
+              <text fg={themeV2.text.subdued}>{value().percent}% used</text>
            </Show>
          </>
        )}
      </Show>
-      <text fg={theme.text.subdued}>{money.format(cost())} spent</text>
+      <text fg={themeV2.text.subdued}>{money.format(cost())} spent</text>
    </box>
  )
 }
@@ -8,7 +8,7 @@ function View(props: { context: Plugin.Context }) {
  )
  return (
    <Show when={directory()}>
-      {(value) => <FilePath value={value()} maxWidth={38} fg={props.context.theme.text.subdued} />}
+      {(value) => <FilePath value={value()} maxWidth={38} fg={props.context.theme.themeV2.text.subdued} />}
    </Show>
  )
 }
@@ -1,14 +1,14 @@
-import { Plugin, usePlugin } from "@opencode-ai/plugin/tui"
+import { Plugin } from "@opencode-ai/plugin/tui"
+import { useTheme } from "../../context/theme"

 function View() {
-  const context = usePlugin()
-  const theme = context.theme
+  const { themeV2 } = useTheme()
  return (
    <box>
-      <text fg={theme.text.default}>
+      <text fg={themeV2.text.default}>
        <b>LSP</b>
      </text>
-      <text fg={theme.text.subdued}>LSP status unavailable</text>
+      <text fg={themeV2.text.subdued}>LSP status unavailable</text>
    </box>
  )
 }
@@ -1,9 +1,10 @@
 import { Plugin } from "@opencode-ai/plugin/tui"
 import { createMemo, For, Match, Show, Switch, createSignal } from "solid-js"
+import { useTheme } from "../../context/theme"

 function View(props: { context: Plugin.Context; sessionID: string }) {
  const [open, setOpen] = createSignal(true)
-  const theme = props.context.theme
+  const { themeV2 } = useTheme()
  const session = createMemo(() => props.context.data.session.get(props.sessionID))
  const list = createMemo(() => props.context.data.location.mcp.server.list(session()?.location) ?? [])
  const on = createMemo(() => list().filter((item) => item.status.status === "connected").length)
@@ -18,12 +19,12 @@ function View(props: { context: Plugin.Context; sessionID: string }) {
  )

  const dot = (status: string) => {
-    if (status === "connected") return theme.text.feedback.success.default
-    if (status === "failed") return theme.text.feedback.error.default
-    if (status === "disabled") return theme.text.subdued
-    if (status === "needs_auth") return theme.text.feedback.warning.default
-    if (status === "needs_client_registration") return theme.text.feedback.error.default
-    return theme.text.subdued
+    if (status === "connected") return themeV2.text.feedback.success.default
+    if (status === "failed") return themeV2.text.feedback.error.default
+    if (status === "disabled") return themeV2.text.subdued
+    if (status === "needs_auth") return themeV2.text.feedback.warning.default
+    if (status === "needs_client_registration") return themeV2.text.feedback.error.default
+    return themeV2.text.subdued
  }

  return (
@@ -31,12 +32,12 @@ function View(props: { context: Plugin.Context; sessionID: string }) {
      <box>
        <box flexDirection="row" gap={1} onMouseDown={() => list().length > 2 && setOpen((x) => !x)}>
          <Show when={list().length > 2}>
-            <text fg={theme.text.default}>{open() ? "▼" : "▶"}</text>
+            <text fg={themeV2.text.default}>{open() ? "▼" : "▶"}</text>
          </Show>
-          <text fg={theme.text.default}>
+          <text fg={themeV2.text.default}>
            <b>MCP</b>
            <Show when={!open()}>
-              <span style={{ fg: theme.text.subdued }}>
+              <span style={{ fg: themeV2.text.subdued }}>
                {" "}
                ({on()} active{bad() > 0 ? `, ${bad()} error${bad() > 1 ? "s" : ""}` : ""})
              </span>
@@ -55,9 +56,9 @@ function View(props: { context: Plugin.Context; sessionID: string }) {
                >
                  •
                </text>
-                <text fg={theme.text.default} wrapMode="word">
+                <text fg={themeV2.text.default} wrapMode="word">
                  {item.name}{" "}
-                  <span style={{ fg: theme.text.subdued }}>
+                  <span style={{ fg: themeV2.text.subdued }}>
                    <Switch fallback={item.status.status}>
                      <Match when={item.status.status === "connected"}>Connected</Match>
                      <Match when={item.status.status === "failed"}>
@@ -1,16 +1,15 @@
 /** @jsxImportSource @opentui/solid */
 import type { ScrollBoxRenderable } from "@opentui/core"
-import type { Plugin } from "@opencode-ai/plugin/tui"
 import { Locale } from "../../util/locale"
 import { tint } from "../../theme/color"
 import { createEffect, createMemo, For, Match, Switch } from "solid-js"
 import { buildFileTree, flattenFileTree, type FileTreeItem, type FileTreeRow } from "./diff-viewer-file-tree-utils"
 import { Panel } from "./diff-viewer-ui"
+import { useTheme } from "../../context/theme"

 const FILE_TREE_STATUS_WIDTH = 2

 export type DiffViewerFileTreeProps = {
-  readonly context: Plugin.Context
  readonly width: number
  readonly files: readonly FileTreeItem[]
  readonly loading: boolean
@@ -24,7 +23,7 @@ export type DiffViewerFileTreeProps = {
 }

 export function DiffViewerFileTree(props: DiffViewerFileTreeProps) {
-  const theme = props.context.theme
+  const { themeV2 } = useTheme()
  const tree = createMemo(() => buildFileTree(props.files))
  const rows = createMemo(() => flattenFileTree(tree(), props.expandedNodes))
  let scroll: ScrollBoxRenderable | undefined
@@ -39,10 +38,10 @@ export function DiffViewerFileTree(props: DiffViewerFileTreeProps) {
    requestAnimationFrame(scrollSelectedIntoView)
  })

-  const fadedColor = () => tint(theme.text.default, theme.background.default, 0.75)
+  const fadedColor = () => tint(themeV2.text.default, themeV2.background.default, 0.75)

  return (
-    <Panel border="both" width={props.width} context={props.context}>
+    <Panel border="both" width={props.width}>
      <scrollbox
        ref={(element: ScrollBoxRenderable) => (scroll = element)}
        verticalScrollbarOptions={{ visible: false }}
@@ -53,7 +52,7 @@ export function DiffViewerFileTree(props: DiffViewerFileTreeProps) {
            <text />
          </Match>
          <Match when={props.files.length === 0}>
-            <text fg={theme.text.default}>No files</text>
+            <text fg={themeV2.text.default}>No files</text>
          </Match>
          <Match when={props.files.length > 0}>
            <For each={rows()}>
@@ -72,11 +71,11 @@ export function DiffViewerFileTree(props: DiffViewerFileTreeProps) {
                  <box
                    flexDirection="row"
                    width="100%"
-                    backgroundColor={highlighted() ? theme.background.action.primary.focused : undefined}
+                    backgroundColor={highlighted() ? themeV2.background.action.primary.focused : undefined}
                    onMouseUp={() => props.onRowClick?.(row)}
                  >
                    <text
-                      fg={highlighted() ? theme.text.action.primary.focused : fadedColor()}
+                      fg={highlighted() ? themeV2.text.action.primary.focused : fadedColor()}
                      wrapMode="none"
                      flexShrink={0}
                    >
@@ -86,12 +85,12 @@ export function DiffViewerFileTree(props: DiffViewerFileTreeProps) {
                      <text
                        fg={
                          highlighted()
-                            ? theme.text.action.primary.focused
+                            ? themeV2.text.action.primary.focused
                            : selected()
-                              ? theme.text.formfield.selected
+                              ? themeV2.text.formfield.selected
                              : reviewed() || row.kind === "directory"
-                                ? theme.text.subdued
-                                : theme.text.default
+                                ? themeV2.text.subdued
+                                : themeV2.text.default
                        }
                        wrapMode="none"
                      >
@@ -99,7 +98,7 @@ export function DiffViewerFileTree(props: DiffViewerFileTreeProps) {
                      </text>
                    </box>
                    <text
-                      fg={highlighted() ? theme.text.action.primary.focused : theme.text.subdued}
+                      fg={highlighted() ? themeV2.text.action.primary.focused : themeV2.text.subdued}
                      wrapMode="none"
                      flexShrink={0}
                    >
@@ -1,13 +1,13 @@
 import type { BorderSides, ColorInput } from "@opentui/core"
-import type { Plugin } from "@opencode-ai/plugin/tui"
 import type { JSX } from "@opentui/solid"
+import { useTheme } from "../../context/theme"
 import { createContext, Show, splitProps, useContext } from "solid-js"

 export type Axis = "x" | "y"
 export type SeparatorEdge = "edge" | "edge-in" | "edge-out"
 export type PanelBorder = "start" | "end" | "both" | "none"

-const PanelGroupContext = createContext<{ axis: Axis; context: Plugin.Context }>()
+const PanelGroupContext = createContext<{ axis: Axis }>()

 function crossAxis(axis: Axis) {
  return axis === "x" ? "y" : "x"
@@ -17,10 +17,10 @@ function usePanelGroup() {
  return useContext(PanelGroupContext)
 }

-export function PanelGroup(props: JSX.IntrinsicElements["box"] & { axis: Axis; context: Plugin.Context }) {
-  const [local, boxProps] = splitProps(props, ["axis", "context", "children"])
+export function PanelGroup(props: JSX.IntrinsicElements["box"] & { axis: Axis }) {
+  const [local, boxProps] = splitProps(props, ["axis", "children"])
  return (
-    <PanelGroupContext.Provider value={{ axis: local.axis, context: local.context }}>
+    <PanelGroupContext.Provider value={{ axis: local.axis }}>
      <box minWidth={0} minHeight={0} padding={0} flexDirection={local.axis === "x" ? "row" : "column"} {...boxProps}>
        {local.children}
      </box>
@@ -28,28 +28,24 @@ export function PanelGroup(props: JSX.IntrinsicElements["box"] & { axis: Axis; c
  )
 }

-export function Panel(
-  props: Omit<JSX.IntrinsicElements["box"], "border"> & { border?: PanelBorder; context?: Plugin.Context },
-) {
+export function Panel(props: Omit<JSX.IntrinsicElements["box"], "border"> & { border?: PanelBorder }) {
  const group = usePanelGroup()
-  const [local, boxProps] = splitProps(props, ["border", "context"])
-  const context = local.context ?? group?.context
-  if (!context) throw new Error("Panel context is missing")
-  const theme = context.theme
+  const { themeV2 } = useTheme()
+  const [local, boxProps] = splitProps(props, ["border"])
  const border = local.border ?? "start"
  const borderProps =
    border === "none"
      ? {}
      : {
          border: panelBorderSides(group?.axis ?? "y", border),
-          borderColor: theme.border.default,
+          borderColor: themeV2.border.default,
        }

  return (
    <box
      minWidth={0}
      minHeight={0}
-      flexDirection={crossAxis(group?.axis ?? "y") === "x" ? "row" : "column"}
+      flexDirection={crossAxis(group?.axis || "y") === "x" ? "row" : "column"}
      {...borderProps}
      {...boxProps}
    />
@@ -63,10 +59,9 @@ function panelBorderSides(axis: Axis, border: Exclude<PanelBorder, "none">): Bor

 export function Separator(props: { axis?: Axis; color?: ColorInput; start?: SeparatorEdge; end?: SeparatorEdge }) {
  const group = usePanelGroup()
-  if (!group) throw new Error("PanelGroup is missing")
-  const theme = group.context.theme
-  const color = () => props.color ?? theme.border.default
-  const axis = () => props.axis ?? crossAxis(group.axis)
+  const { themeV2 } = useTheme()
+  const color = () => props.color ?? themeV2.border.default
+  const axis = () => props.axis ?? crossAxis(group?.axis ?? "y")
  if (axis() === "y") {
    return (
      <Show
@@ -10,6 +10,7 @@ import {
  type ScrollBoxRenderable,
 } from "@opentui/core"
 import { LANGUAGE_EXTENSIONS } from "../../util/filetype"
+import { useTheme } from "../../context/theme"
 import { useTerminalDimensions } from "@opentui/solid"
 import path from "path"
 import { createEffect, createMemo, createResource, createSignal, For, Match, onCleanup, Show, Switch } from "solid-js"
@@ -82,7 +83,8 @@ function DiffViewer(props: { context: Plugin.Context }) {
  const dimensions = useTerminalDimensions()
  const config = useConfig()
  const dialog = props.context.ui.dialog
-  const theme = props.context.theme
+  const themeState = useTheme()
+  const themeV2 = themeState.themeV2
  const params = () => {
    const route = props.context.ui.router.current()
    return (route.type === "plugin" ? route.data : undefined) as
@@ -736,13 +738,13 @@ function DiffViewer(props: { context: Plugin.Context }) {

  return (
    <box position="absolute" zIndex={2500} left={0} top={0} width={dimensions().width} height={dimensions().height}>
-      <PanelGroup axis="y" context={props.context} width="100%" height="100%">
+      <PanelGroup axis="y" width="100%" height="100%">
        <Panel border="none" flexShrink={0} padding={0} paddingLeft={1}>
-          <text fg={theme.text.default}>Diff </text>
-          <text fg={theme.text.subdued}>{diffSourceLabel(mode())}</text>
+          <text fg={themeV2.text.default}>Diff </text>
+          <text fg={themeV2.text.subdued}>{diffSourceLabel(mode())}</text>
          <box flexGrow={1} />
          <Show when={!diff.loading && !diff.error}>
-            <text fg={theme.text.subdued}>
+            <text fg={themeV2.text.subdued}>
              {files().length} {files().length === 1 ? "file" : "files"}
            </text>
          </Show>
@@ -753,13 +755,13 @@ function DiffViewer(props: { context: Plugin.Context }) {
            <Match when={diff.loading}>
              <Separator axis="x" />
              <box flexGrow={1} paddingLeft={1}>
-                <text fg={theme.text.subdued}>Loading diff…</text>
+                <text fg={themeV2.text.subdued}>Loading diff…</text>
              </box>
            </Match>
            <Match when={!diff.loading && diff.error}>
              <Separator axis="x" />
              <box flexGrow={1} paddingLeft={1}>
-                <text fg={theme.text.feedback.error.default}>
+                <text fg={themeV2.text.feedback.error.default}>
                  Could not load diff. Reopen the diff viewer to try again.
                </text>
              </box>
@@ -767,14 +769,13 @@ function DiffViewer(props: { context: Plugin.Context }) {
            <Match when={!diff.loading && files().length === 0}>
              <Separator axis="x" />
              <box flexGrow={1} paddingLeft={1}>
-                <text fg={theme.text.subdued}>No changes to show</text>
+                <text fg={themeV2.text.subdued}>No changes to show</text>
              </box>
            </Match>
            <Match when={!diff.loading}>
-              <PanelGroup axis="x" context={props.context}>
+              <PanelGroup axis="x">
                <Show when={showFileTree()}>
                  <DiffViewerFileTree
-                    context={props.context}
                    files={files()}
                    loading={diff.loading}
                    error={diff.error}
@@ -811,52 +812,56 @@ function DiffViewer(props: { context: Plugin.Context }) {
                              paddingLeft={1}
                              paddingRight={1}
                              border={patchLeftBorder()}
-                              borderColor={theme.border.default}
+                              borderColor={themeV2.border.default}
                            >
-                              <text fg={reviewed() ? theme.text.subdued : theme.text.default}>{entry.file.file}</text>
+                              <text fg={reviewed() ? themeV2.text.subdued : themeV2.text.default}>
+                                {entry.file.file}
+                              </text>
                              <box flexGrow={1} />
-                              <text fg={reviewed() ? theme.text.subdued : theme.diff.text.added}>
+                              <text fg={reviewed() ? themeV2.text.subdued : themeV2.diff.text.added}>
                                +{entry.file.additions}
                              </text>
-                              <text fg={reviewed() ? theme.text.subdued : theme.diff.text.removed}>
+                              <text fg={reviewed() ? themeV2.text.subdued : themeV2.diff.text.removed}>
                                -{entry.file.deletions}
                              </text>
                            </box>
                            <Separator axis="x" start={showFileTree() ? "edge" : undefined} />
                            <Show
                              when={entry.file.patch}
-                              fallback={<text fg={theme.text.subdued}>No patch available for this file.</text>}
+                              fallback={<text fg={themeV2.text.subdued}>No patch available for this file.</text>}
                            >
                              {(patch) => (
-                                <box border={patchLeftBorder()} borderColor={theme.border.default}>
+                                <box border={patchLeftBorder()} borderColor={themeV2.border.default}>
                                  <diff
                                    ref={(element: DiffRenderable) => diffNodeByFileIndex.set(entry.fileIndex, element)}
                                    diff={patch()}
                                    view={view()}
                                    filetype={reviewed() ? PLAIN_TEXT_FILETYPE : filetype(entry.file.file)}
-                                    syntaxStyle={theme.syntaxStyle()}
+                                    syntaxStyle={themeState.syntax()}
                                    showLineNumbers={true}
                                    width="100%"
                                    wrapMode="char"
-                                    fg={reviewed() ? theme.text.subdued : theme.text.default}
+                                    fg={reviewed() ? themeV2.text.subdued : themeV2.text.default}
                                    addedBg={
-                                      reviewed() ? theme.background.surface.overlay : theme.diff.background.added
+                                      reviewed() ? themeV2.background.surface.overlay : themeV2.diff.background.added
                                    }
                                    removedBg={
-                                      reviewed() ? theme.background.surface.overlay : theme.diff.background.removed
+                                      reviewed() ? themeV2.background.surface.overlay : themeV2.diff.background.removed
                                    }
-                                    addedSignColor={reviewed() ? theme.text.subdued : theme.diff.highlight.added}
-                                    removedSignColor={reviewed() ? theme.text.subdued : theme.diff.highlight.removed}
-                                    lineNumberFg={theme.diff.lineNumber.text}
+                                    addedSignColor={reviewed() ? themeV2.text.subdued : themeV2.diff.highlight.added}
+                                    removedSignColor={
+                                      reviewed() ? themeV2.text.subdued : themeV2.diff.highlight.removed
+                                    }
+                                    lineNumberFg={themeV2.diff.lineNumber.text}
                                    addedLineNumberBg={
                                      reviewed()
-                                        ? theme.background.surface.overlay
-                                        : theme.diff.lineNumber.background.added
+                                        ? themeV2.background.surface.overlay
+                                        : themeV2.diff.lineNumber.background.added
                                    }
                                    removedLineNumberBg={
                                      reviewed()
-                                        ? theme.background.surface.overlay
-                                        : theme.diff.lineNumber.background.removed
+                                        ? themeV2.background.surface.overlay
+                                        : themeV2.diff.lineNumber.background.removed
                                    }
                                  />
                                </box>
@@ -867,7 +872,11 @@ function DiffViewer(props: { context: Plugin.Context }) {
                      }}
                    </For>
                    <Show when={patchFillerHeight() > 0}>
-                      <box height={patchFillerHeight()} border={patchLeftBorder()} borderColor={theme.border.default} />
+                      <box
+                        height={patchFillerHeight()}
+                        border={patchLeftBorder()}
+                        borderColor={themeV2.border.default}
+                      />
                    </Show>
                  </scrollbox>
                  <Separator axis="x" start={showFileTree() ? "edge-in" : undefined} />
@@ -880,57 +889,57 @@ function DiffViewer(props: { context: Plugin.Context }) {
        <Panel flexShrink={0} gap={2} paddingLeft={1} border="none">
          <Show when={switchFocusShortcut()}>
            {(shortcut) => (
-              <text fg={theme.text.default}>
-                {shortcut()} <span style={{ fg: theme.text.subdued }}>focus file tree</span>
+              <text fg={themeV2.text.default}>
+                {shortcut()} <span style={{ fg: themeV2.text.subdued }}>focus file tree</span>
              </text>
            )}
          </Show>
          <Show when={nextFileShortcut()}>
            {(shortcut) => (
-              <text fg={theme.text.default}>
-                {shortcut()} <span style={{ fg: theme.text.subdued }}>next file</span>
+              <text fg={themeV2.text.default}>
+                {shortcut()} <span style={{ fg: themeV2.text.subdued }}>next file</span>
              </text>
            )}
          </Show>
          <Show when={nextHunkShortcut()}>
            {(shortcut) => (
-              <text fg={theme.text.default}>
-                {shortcut()} <span style={{ fg: theme.text.subdued }}>next hunk</span>
+              <text fg={themeV2.text.default}>
+                {shortcut()} <span style={{ fg: themeV2.text.subdued }}>next hunk</span>
              </text>
            )}
          </Show>
          <Show when={previousHunkShortcut()}>
            {(shortcut) => (
-              <text fg={theme.text.default}>
-                {shortcut()} <span style={{ fg: theme.text.subdued }}>previous hunk</span>
+              <text fg={themeV2.text.default}>
+                {shortcut()} <span style={{ fg: themeV2.text.subdued }}>previous hunk</span>
              </text>
            )}
          </Show>
          <Show when={previousFileShortcut()}>
            {(shortcut) => (
-              <text fg={theme.text.default}>
-                {shortcut()} <span style={{ fg: theme.text.subdued }}>previous file</span>
+              <text fg={themeV2.text.default}>
+                {shortcut()} <span style={{ fg: themeV2.text.subdued }}>previous file</span>
              </text>
            )}
          </Show>
          <Show when={switchSourceShortcut()}>
            {(shortcut) => (
-              <text fg={theme.text.default}>
-                {shortcut()} <span style={{ fg: theme.text.subdued }}>switch source</span>
+              <text fg={themeV2.text.default}>
+                {shortcut()} <span style={{ fg: themeV2.text.subdued }}>switch source</span>
              </text>
            )}
          </Show>
          <Show when={markReviewedShortcut()}>
            {(shortcut) => (
-              <text fg={theme.text.default}>
-                {shortcut()} <span style={{ fg: theme.text.subdued }}>mark reviewed</span>
+              <text fg={themeV2.text.default}>
+                {shortcut()} <span style={{ fg: themeV2.text.subdued }}>mark reviewed</span>
              </text>
            )}
          </Show>
          <Show when={helpShortcut()}>
            {(shortcut) => (
-              <text fg={theme.text.default}>
-                {shortcut()} <span style={{ fg: theme.text.subdued }}>all</span>
+              <text fg={themeV2.text.default}>
+                {shortcut()} <span style={{ fg: themeV2.text.subdued }}>all</span>
              </text>
            )}
          </Show>
@@ -941,7 +950,7 @@ function DiffViewer(props: { context: Plugin.Context }) {
 }

 function DiffViewerHelpDialog(props: { context: Plugin.Context }) {
-  const theme = props.context.theme.contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const shortcut = (id: string) => () => props.context.keymap.shortcuts(id)[0]
  const rows = [
    {
@@ -1009,30 +1018,30 @@ function DiffViewerHelpDialog(props: { context: Plugin.Context }) {
  return (
    <box paddingLeft={2} paddingRight={2} paddingBottom={1} gap={1}>
      <box flexDirection="row" justifyContent="space-between">
-        <text attributes={TextAttributes.BOLD} fg={theme.text.default}>
+        <text attributes={TextAttributes.BOLD} fg={themeV2.text.default}>
          Diff shortcuts
        </text>
-        <text fg={theme.text.subdued}>esc</text>
+        <text fg={themeV2.text.subdued}>esc</text>
      </box>
      <box flexDirection="row">
-        <text fg={theme.text.subdued} width={5} wrapMode="none">
+        <text fg={themeV2.text.subdued} width={5} wrapMode="none">
          Key
        </text>
-        <text fg={theme.text.subdued} width={22} wrapMode="none">
+        <text fg={themeV2.text.subdued} width={22} wrapMode="none">
          Action
        </text>
-        <text fg={theme.text.subdued}>Description</text>
+        <text fg={themeV2.text.subdued}>Description</text>
      </box>
      <For each={rows}>
        {(row) => (
          <box flexDirection="row">
-            <text fg={theme.text.default} width={5} wrapMode="none">
+            <text fg={themeV2.text.default} width={5} wrapMode="none">
              {row.shortcut() || "-"}
            </text>
-            <text fg={theme.text.default} width={22} wrapMode="none">
+            <text fg={themeV2.text.default} width={22} wrapMode="none">
              {row.action}
            </text>
-            <text fg={theme.text.subdued}>{row.description}</text>
+            <text fg={themeV2.text.subdued}>{row.description}</text>
          </box>
        )}
      </For>
@@ -1,90 +1,280 @@
-import { Plugin } from "@opencode-ai/plugin/tui"
-import { createMemo, createSignal } from "solid-js"
-import { usePlugin } from "../../plugin/context"
+import type { TuiPlugin, TuiPluginApi, TuiPluginStatus } from "@opencode-ai/plugin/v1/tui"
+import type { BuiltinTuiPlugin } from "../builtins"
+import { useTerminalDimensions } from "@opentui/solid"
+import { fileURLToPath } from "url"
 import { DialogSelect, type DialogSelectOption } from "../../ui/dialog-select"
+import { Show, createEffect, createMemo, createSignal } from "solid-js"
+import { Keymap } from "../../context/keymap"

-const id = "opencode.plugins"
+const id = "internal:plugin-manager"

-function View(props: { context: Plugin.Context; plugins: ReturnType<typeof usePlugin> }) {
-  const [locked, setLocked] = createSignal(false)
-  const options = createMemo(() =>
-    props.plugins
-      .registered()
-      .filter((plugin) => plugin.id !== id)
-      .sort((a, b) => a.id.localeCompare(b.id))
-      .map(
-        (plugin): DialogSelectOption<string> => ({
-          title: plugin.id,
-          value: plugin.id,
-          category: plugin.source === "builtin" ? "Built-in" : "External",
-          footer: (
-            <span
-              style={{
-                fg: plugin.active
-                  ? props.context.theme.text.feedback.success.default
-                  : props.context.theme.text.subdued,
-              }}
-            >
-              {plugin.active ? "active" : "inactive"}
-            </span>
-          ),
-        }),
-      ),
+function state(api: TuiPluginApi, item: TuiPluginStatus) {
+  if (!item.enabled) {
+    return <span style={{ fg: api.theme.current.textMuted }}>disabled</span>
+  }
+
+  return (
+    <span style={{ fg: item.active ? api.theme.current.success : api.theme.current.error }}>
+      {item.active ? "active" : "inactive"}
+    </span>
+  )
+}
+
+function source(spec: string) {
+  if (!spec.startsWith("file://")) return
+  return fileURLToPath(spec)
+}
+
+function meta(item: TuiPluginStatus, width: number) {
+  if (item.source === "internal") {
+    if (width >= 120) return "Built-in plugin"
+    return "Built-in"
+  }
+  const next = source(item.spec)
+  if (next) return next
+  return item.spec
+}
+
+function Install(props: { api: TuiPluginApi }) {
+  const [global, setGlobal] = createSignal(false)
+  const [busy, setBusy] = createSignal(false)
+
+  Keymap.createLayer(() => ({
+    mode: "modal",
+    enabled: !busy(),
+    commands: [
+      {
+        bind: "tab",
+        title: "Toggle install scope",
+        group: "Plugins",
+        run: () => {
+          setGlobal((value) => !value)
+        },
+      },
+    ],
+  }))
+
+  return (
+    <props.api.ui.DialogPrompt
+      title="Install plugin"
+      placeholder="npm package name"
+      busy={busy()}
+      busyText="Installing plugin..."
+      description={() => (
+        <box flexDirection="row" gap={1}>
+          <text fg={props.api.theme.current.textMuted}>scope:</text>
+          <text fg={busy() ? props.api.theme.current.textMuted : props.api.theme.current.text}>
+            {global() ? "global" : "local"}
+          </text>
+          <Show when={!busy()}>
+            <text fg={props.api.theme.current.textMuted}>(tab toggle)</text>
+          </Show>
+        </box>
+      )}
+      onConfirm={(raw) => {
+        if (busy()) return
+        const mod = raw.trim()
+        if (!mod) {
+          props.api.ui.toast({
+            variant: "error",
+            message: "Plugin package name is required",
+          })
+          return
+        }
+
+        setBusy(true)
+        void props.api.plugins
+          .install(mod, { global: global() })
+          .then((out) => {
+            if (!out.ok) {
+              props.api.ui.toast({
+                variant: "error",
+                message: out.message,
+              })
+              if (out.missing) {
+                props.api.ui.toast({
+                  variant: "info",
+                  message: "Check npm registry/auth settings and try again.",
+                })
+              }
+              show(props.api)
+              return
+            }
+
+            props.api.ui.toast({
+              variant: "success",
+              message: `Installed ${mod} (${global() ? "global" : "local"}: ${out.dir})`,
+            })
+            if (!out.tui) {
+              props.api.ui.toast({
+                variant: "info",
+                message: "Package has no TUI target to load in this app.",
+              })
+              show(props.api)
+              return
+            }
+
+            return props.api.plugins.add(mod).then((ok) => {
+              if (!ok) {
+                props.api.ui.toast({
+                  variant: "warning",
+                  message: "Installed plugin, but runtime load failed. See console/logs; restart TUI to retry.",
+                })
+                show(props.api)
+                return
+              }
+
+              props.api.ui.toast({
+                variant: "success",
+                message: `Loaded ${mod} in current session.`,
+              })
+              show(props.api)
+            })
+          })
+          .finally(() => {
+            setBusy(false)
+          })
+      }}
+      onCancel={() => {
+        show(props.api)
+      }}
+    />
+  )
+}
+
+function row(api: TuiPluginApi, item: TuiPluginStatus, width: number): DialogSelectOption<string> {
+  return {
+    title: item.id,
+    value: item.id,
+    category: item.source === "internal" ? "Internal" : "External",
+    description: meta(item, width),
+    footer: state(api, item),
+    disabled: item.id === id,
+  }
+}
+
+function showInstall(api: TuiPluginApi) {
+  api.ui.dialog.replace(() => <Install api={api} />)
+}
+
+function View(props: { api: TuiPluginApi }) {
+  const size = useTerminalDimensions()
+  const [list, setList] = createSignal(props.api.plugins.list())
+  const [cur, setCur] = createSignal<string | undefined>()
+  const [lock, setLock] = createSignal(false)
+
+  createEffect(() => {
+    const width = size().width
+    if (width >= 128) {
+      props.api.ui.dialog.setSize("xlarge")
+      return
+    }
+    if (width >= 96) {
+      props.api.ui.dialog.setSize("large")
+      return
+    }
+    props.api.ui.dialog.setSize("medium")
+  })
+
+  const rows = createMemo(() =>
+    [...list()]
+      .sort((a, b) => {
+        const x = a.source === "internal" ? 1 : 0
+        const y = b.source === "internal" ? 1 : 0
+        if (x !== y) return x - y
+        return a.id.localeCompare(b.id)
+      })
+      .map((item) => row(props.api, item, size().width)),
  )

-  const toggle = (plugin: DialogSelectOption<string>) => {
-    if (locked()) return
-    const current = props.plugins.registered().find((item) => item.id === plugin.value)
-    if (!current) return
-    setLocked(true)
-    void (current.active ? props.plugins.deactivate(current.id) : props.plugins.activate(current.id))
+  const flip = (x: string) => {
+    if (lock()) return
+    const item = list().find((entry) => entry.id === x)
+    if (!item) return
+    setLock(true)
+    const task = item.active ? props.api.plugins.deactivate(x) : props.api.plugins.activate(x)
+    void task
      .then((ok) => {
-        if (ok) return
-        props.context.ui.toast.show({ variant: "error", message: `Failed to update plugin ${current.id}` })
+        if (!ok) {
+          props.api.ui.toast({
+            variant: "error",
+            message: `Failed to update plugin ${item.id}`,
+          })
+        }
+        setList(props.api.plugins.list())
      })
-      .catch((error) => {
-        props.context.ui.toast.show({
-          variant: "error",
-          message: error instanceof Error ? error.message : String(error),
-        })
+      .finally(() => {
+        setLock(false)
      })
-      .finally(() => setLocked(false))
  }

  return (
    <DialogSelect
      title="Plugins"
-      options={options()}
-      locked={locked()}
-      preserveSelection={true}
-      actions={[{ title: "toggle", command: "plugins.toggle", onTrigger: toggle }]}
-      onSelect={toggle}
+      options={rows()}
+      current={cur()}
+      onMove={(item) => setCur(item.value)}
+      actions={[
+        {
+          title: "toggle",
+          command: "plugins.toggle",
+          hidden: lock(),
+          onTrigger: (item) => {
+            setCur(item.value)
+            flip(item.value)
+          },
+        },
+        {
+          title: "install",
+          command: "dialog.plugins.install",
+          selection: "none",
+          hidden: lock(),
+          onTrigger: () => {
+            showInstall(props.api)
+          },
+        },
+      ]}
+      onSelect={(item) => {
+        setCur(item.value)
+        flip(item.value)
+      }}
    />
  )
 }

-function Commands(props: { context: Plugin.Context }) {
-  const plugins = usePlugin()
-  props.context.keymap.layer(() => ({
-    mode: "global",
+function show(api: TuiPluginApi) {
+  api.ui.dialog.replace(() => <View api={api} />)
+}
+
+const tui: TuiPlugin = async (api) => {
+  api.keymap.registerLayer({
    commands: [
      {
-        id: "plugins.list",
+        name: "plugins.list",
        title: "Plugins",
-        group: "System",
-        palette: true,
+        category: "System",
+        namespace: "palette",
        run() {
-          props.context.ui.dialog.show(() => <View context={props.context} plugins={plugins} />)
+          show(api)
+        },
+      },
+      {
+        name: "plugins.install",
+        title: "Install plugin",
+        category: "System",
+        namespace: "palette",
+        run() {
+          showInstall(api)
        },
      },
    ],
-  }))
-  return null
+    bindings: ["plugins.list", "plugins.install"].flatMap((command) => api.tuiConfig.keybinds.get(command)),
+  })
 }

-export default Plugin.define({
+const plugin: BuiltinTuiPlugin = {
  id,
-  setup(context) {
-    context.ui.slot("app", () => <Commands context={context} />)
-  },
-})
+  tui,
+}
+
+export default plugin
@@ -1,26 +1,6 @@
 import { Plugin } from "@opencode-ai/plugin/tui"
 import { useTerminalDimensions } from "@opentui/solid"
-import { batch, createSignal } from "solid-js"
-import { SessionTabs, type SessionTabsController } from "../../component/session-tabs"
-
-type FixtureStatus = ReturnType<SessionTabsController["status"]>
-
-const FIXTURE_TABS = [
-  { sessionID: "fixture-1", title: "Implement session tabs" },
-  { sessionID: "fixture-2", title: "Investigate rendering" },
-  { sessionID: "fixture-3", title: "A deliberately long session title for truncation" },
-  { sessionID: "fixture-4", title: "Fix provider state" },
-  { sessionID: "fixture-5", title: "Review animation" },
-  { sessionID: "fixture-6", title: "Untitled behavior" },
-  { sessionID: "fixture-7", title: "Queue follow-up work" },
-  { sessionID: "fixture-8", title: "Check narrow layout" },
-  { sessionID: "fixture-9", title: "Profile terminal output" },
-  { sessionID: "fixture-10", title: "Handle permission" },
-  { sessionID: "fixture-11", title: "Run focused tests" },
-  { sessionID: "fixture-12", title: "Prepare review" },
-]
-
-const EMPTY_STATUS: FixtureStatus = { unread: undefined, attention: false, busy: false }
+import { useTheme } from "../../context/theme"

 function Commands(props: { context: Plugin.Context }) {
  props.context.keymap.layer(() => ({
@@ -43,52 +23,8 @@ function Commands(props: { context: Plugin.Context }) {

 function Scrap(props: { context: Plugin.Context }) {
  const dimensions = useTerminalDimensions()
-  const theme = props.context.theme
-  const elevatedTheme = props.context.theme.contextual("elevated")
-  const [tabs, setTabs] = createSignal(FIXTURE_TABS.slice(0, 6))
-  const [active, setActive] = createSignal<string | undefined>("fixture-2")
-  const [animations, setAnimations] = createSignal(true)
-  const [statuses, setStatuses] = createSignal<Record<string, FixtureStatus>>({
-    "fixture-2": { ...EMPTY_STATUS, busy: true },
-    "fixture-3": { ...EMPTY_STATUS, unread: "activity" },
-    "fixture-4": { ...EMPTY_STATUS, unread: "error" },
-    "fixture-5": { ...EMPTY_STATUS, attention: true },
-    "fixture-6": { ...EMPTY_STATUS, busy: true, attention: true },
-  })
-  const controller = {
-    tabs,
-    current: active,
-    status(sessionID) {
-      return statuses()[sessionID] ?? EMPTY_STATUS
-    },
-    select(sessionID) {
-      setActive(sessionID)
-    },
-    close(sessionID?: string) {
-      const target = sessionID ?? active()
-      if (!target) return
-      const items = tabs()
-      const index = items.findIndex((tab) => tab.sessionID === target)
-      if (index === -1) return
-      const next = items.filter((tab) => tab.sessionID !== target)
-      batch(() => {
-        setTabs(next)
-        if (active() === target) setActive(next[index]?.sessionID ?? next[index - 1]?.sessionID)
-      })
-    },
-  } satisfies SessionTabsController
-
-  const cycle = (direction: 1 | -1) => {
-    const items = tabs()
-    if (items.length === 0) return
-    const index = items.findIndex((tab) => tab.sessionID === active())
-    controller.select(items[(index + direction + items.length) % items.length]!.sessionID)
-  }
-  const updateStatus = (update: (status: FixtureStatus) => FixtureStatus) => {
-    const sessionID = active()
-    if (!sessionID) return
-    setStatuses((current) => ({ ...current, [sessionID]: update(current[sessionID] ?? EMPTY_STATUS) }))
-  }
+  const { themeV2 } = useTheme()
+  const { themeV2: elevatedTheme } = useTheme().contextual("elevated")

  props.context.keymap.layer(() => ({
    commands: [
@@ -100,60 +36,12 @@ function Scrap(props: { context: Plugin.Context }) {
          props.context.ui.router.navigate({ type: "home" })
        },
      },
-      { bind: "h", title: "Previous tab", group: "Scrap", run: () => cycle(-1) },
-      { bind: "l", title: "Next tab", group: "Scrap", run: () => cycle(1) },
-      {
-        bind: "t",
-        title: "Add tab",
-        group: "Scrap",
-        run() {
-          const next = FIXTURE_TABS.find((fixture) => !tabs().some((tab) => tab.sessionID === fixture.sessionID))
-          if (next) setTabs((current) => [...current, next])
-        },
-      },
-      { bind: "d", title: "Close tab", group: "Scrap", run: () => controller.close() },
-      {
-        bind: "b",
-        title: "Toggle busy",
-        group: "Scrap",
-        run: () =>
-          updateStatus((status) =>
-            status.busy ? { ...status, busy: false, unread: "activity" } : { ...status, busy: true, unread: undefined },
-          ),
-      },
-      {
-        bind: "u",
-        title: "Cycle unread",
-        group: "Scrap",
-        run: () =>
-          updateStatus((status) => ({
-            ...status,
-            unread: status.unread === undefined ? "activity" : status.unread === "activity" ? "error" : undefined,
-          })),
-      },
-      {
-        bind: "a",
-        title: "Toggle attention",
-        group: "Scrap",
-        run: () => updateStatus((status) => ({ ...status, attention: !status.attention })),
-      },
-      {
-        bind: "m",
-        title: "Toggle motion",
-        group: "Scrap",
-        run: () => setAnimations((enabled) => !enabled),
-      },
    ],
  }))

  return (
-    <box
-      width={dimensions().width}
-      height={dimensions().height}
-      flexDirection="column"
-      backgroundColor={theme.background.default}
-    >
-      <SessionTabs controller={controller} animations={animations()} />
+    <box width={dimensions().width} height={dimensions().height} backgroundColor={themeV2.background.default}>
+      <box flexGrow={1} />
      <box
        height={1}
        flexShrink={0}
@@ -162,13 +50,10 @@ function Scrap(props: { context: Plugin.Context }) {
        paddingRight={1}
        flexDirection="row"
      >
-        <text fg={elevatedTheme.text.subdued}>tab playground</text>
+        <text fg={elevatedTheme.text.subdued}>~/code/anomalyco/opencode</text>
        <box flexGrow={1} />
-        <text fg={elevatedTheme.text.subdued}>
-          h/l select | t add | d close | b busy | u unread | a attention | m motion | esc home
-        </text>
+        <text fg={elevatedTheme.text.subdued}>esc home</text>
      </box>
-      <box flexGrow={1} />
    </box>
  )
 }
@@ -0,0 +1,607 @@
+/** @jsxImportSource @opentui/solid */
+import { RGBA, TextAttributes, type KeyEvent, type Renderable } from "@opentui/core"
+import { useTerminalDimensions } from "@opentui/solid"
+import { createEffect, createMemo, createSignal, For, Show } from "solid-js"
+import { Keymap } from "../../context/keymap"
+import type { ActiveKey } from "@opentui/keymap"
+import type { TuiPlugin, TuiPluginApi } from "@opencode-ai/plugin/v1/tui"
+import type { BuiltinTuiPlugin } from "../builtins"
+
+const command = {
+  toggle: "which-key.toggle",
+  toggleLayout: "which-key.layout.toggle",
+  togglePending: "which-key.pending.toggle",
+  groupPrevious: "which-key.group.previous",
+  groupNext: "which-key.group.next",
+  scrollUp: "which-key.scroll.up",
+  scrollDown: "which-key.scroll.down",
+  pageUp: "which-key.page.up",
+  pageDown: "which-key.page.down",
+  home: "which-key.home",
+  end: "which-key.end",
+} as const
+
+const LAYER_PRIORITY = 900
+const toggleCommands = [command.toggle, command.toggleLayout, command.togglePending] as const
+const scrollCommands = [
+  command.scrollUp,
+  command.scrollDown,
+  command.pageUp,
+  command.pageDown,
+  command.home,
+  command.end,
+] as const
+const panelCommands = [command.groupPrevious, command.groupNext, ...scrollCommands] as const
+const COLUMN_GAP = 4
+const TAB_GAP = 3
+const MIN_TAB_GAP = 1
+const TAB_CONTENT_GAP = 1
+const MIN_COLUMN_WIDTH = 28
+const MAX_COLUMN_WIDTH = 44
+const PANEL_HEIGHT_RATIO = 0.3
+const MIN_PANEL_HEIGHT = 8
+const MAX_PANEL_HEIGHT = 16
+const PANEL_TOP_PADDING = 1
+const FOOTER_HEIGHT = 1
+const FOOTER_MARGIN = 1
+const UNKNOWN = "Unknown"
+
+type Layout = "dock" | "overlay"
+
+type Color = RGBA | string
+
+type Skin = {
+  panel: Color
+  text: Color
+  muted: Color
+  subtle: Color
+  key: Color
+  accent: Color
+  tab: Color
+  tabText: Color
+}
+
+type Entry = {
+  type: "entry"
+  key: string
+  label: string
+  group: string
+  continues: boolean
+}
+
+type Group = {
+  label: string
+  entries: Entry[]
+}
+
+type HeaderItem = { type: "tab"; group: Group } | { type: "scroll" }
+
+type GroupHeader = {
+  type: "group"
+  label: string
+}
+
+type Item = Entry | GroupHeader
+
+function text(value: unknown) {
+  if (typeof value !== "string") return undefined
+  const trimmed = value.trim()
+  return trimmed || undefined
+}
+
+function ink(api: TuiPluginApi, name: string, fallback: string): Color {
+  const value = Reflect.get(api.theme.current, name)
+  if (typeof value === "string") return value
+  if (value instanceof RGBA) return value
+  return fallback
+}
+
+function skin(api: TuiPluginApi): Skin {
+  return {
+    panel: ink(api, "backgroundMenu", "#1c1c1c"),
+    text: ink(api, "text", "#f0f0f0"),
+    muted: ink(api, "textMuted", "#a5a5a5"),
+    subtle: ink(api, "borderSubtle", "#6f6f6f"),
+    key: ink(api, "warning", "#ffd75f"),
+    accent: ink(api, "primary", "#5f87ff"),
+    tab: ink(api, "primary", "#5f87ff"),
+    tabText: ink(api, "selectedListItemText", "#ffffff"),
+  }
+}
+
+function activeKeyLabel(active: ActiveKey<Renderable, KeyEvent>) {
+  if (active.continues) return text(active.tokenName) ?? text(active.display) ?? UNKNOWN
+  return (
+    text(active.commandAttrs?.title) ?? text(active.bindingAttrs?.desc) ?? text(active.commandAttrs?.desc) ?? UNKNOWN
+  )
+}
+
+function activeKeyGroup(active: ActiveKey<Renderable, KeyEvent>) {
+  if (active.continues) return "System"
+  return text(active.commandAttrs?.category) ?? text(active.bindingAttrs?.group) ?? UNKNOWN
+}
+
+function activeKeyEntry(api: TuiPluginApi, active: ActiveKey<Renderable, KeyEvent>): Entry {
+  const key = api.keys.formatSequence([
+    {
+      stroke: active.stroke,
+      display: active.display,
+      tokenName: active.tokenName,
+    },
+  ])
+  const label = activeKeyLabel(active)
+  return {
+    type: "entry",
+    key,
+    label: active.continues ? `+${label}` : label,
+    group: activeKeyGroup(active),
+    continues: active.continues,
+  }
+}
+
+function grouped(entries: Entry[]): Group[] {
+  const map = new Map<string, Entry[]>()
+  for (const entry of entries) map.set(entry.group, [...(map.get(entry.group) ?? []), entry])
+  return [...map]
+    .map(([label, entries]) => ({
+      label,
+      entries: entries.toSorted(
+        (a, b) =>
+          Number(b.continues) - Number(a.continues) || a.label.localeCompare(b.label) || a.key.localeCompare(b.key),
+      ),
+    }))
+    .toSorted((a, b) => a.label.localeCompare(b.label))
+}
+
+function commandShortcut(_api: TuiPluginApi, name: string) {
+  const shortcuts = Keymap.useShortcuts()
+  return () => shortcuts.get(name) ?? ""
+}
+
+function layout(value: unknown): Layout {
+  if (value === "overlay") return "overlay"
+  return "dock"
+}
+
+function HomeHint(props: { api: TuiPluginApi }) {
+  const trigger = commandShortcut(props.api, command.toggle)
+  const look = createMemo(() => skin(props.api))
+
+  return (
+    <box width="100%" maxWidth={75} alignItems="center" paddingTop={1} flexShrink={0}>
+      <text fg={look().muted} wrapMode="none">
+        Show keyboard shortcuts with <span style={{ fg: look().subtle }}>{trigger() || command.toggle}</span>
+      </text>
+    </box>
+  )
+}
+
+function WhichKeyPanel(props: {
+  api: TuiPluginApi
+  layout: Layout
+  mode: () => Layout
+  pendingPreview: () => boolean
+  pinned: () => boolean
+}) {
+  const dimensions = useTerminalDimensions()
+  const [offset, setOffset] = createSignal(0)
+  const [activeGroup, setActiveGroup] = createSignal<string | undefined>()
+  const pending = Keymap.usePendingSequence()
+  const active = Keymap.useActiveKeys()
+  const pendingActive = createMemo(() => pending().length > 0 && active().length > 0)
+  const pendingAutoVisible = createMemo(() => props.mode() === "overlay" && props.pendingPreview() && pendingActive())
+  const visible = createMemo(() => props.pinned() || pendingAutoVisible())
+  const pendingMode = createMemo(() => visible() && pendingActive())
+  const left = 0
+  const width = createMemo(() => Math.max(1, dimensions().width))
+  const panelHeight = createMemo(() =>
+    Math.max(MIN_PANEL_HEIGHT, Math.min(MAX_PANEL_HEIGHT, Math.floor(dimensions().height * PANEL_HEIGHT_RATIO))),
+  )
+  const contentWidth = createMemo(() => Math.max(1, width() - 2))
+  const columns = createMemo(() =>
+    Math.max(1, Math.min(3, Math.floor((contentWidth() + COLUMN_GAP) / (MAX_COLUMN_WIDTH + COLUMN_GAP)) || 1)),
+  )
+  const entries = createMemo(() => active().map((item) => activeKeyEntry(props.api, item)))
+  const groups = createMemo(() => grouped(entries()))
+  const tabsVisible = createMemo(() => !pendingMode() && groups().length > 0)
+  const headerVisible = createMemo(() => tabsVisible() || pendingMode())
+  const footerVisible = createMemo(() => !pendingMode())
+  const rows = createMemo(() =>
+    Math.max(
+      1,
+      panelHeight() -
+        PANEL_TOP_PADDING -
+        (headerVisible() ? 1 : 0) -
+        (tabsVisible() ? TAB_CONTENT_GAP : 0) -
+        (footerVisible() ? FOOTER_MARGIN + FOOTER_HEIGHT : 0),
+    ),
+  )
+  const pageSize = createMemo(() => rows() * columns())
+  const currentGroup = createMemo(() => {
+    const group = activeGroup()
+    return groups().find((item) => item.label === group) ?? groups()[0]
+  })
+  const activeEntries = createMemo(() => currentGroup()?.entries ?? [])
+  const items = createMemo<Item[]>(() => {
+    if (!pendingMode()) return activeEntries()
+    return groups().flatMap((group) => [{ type: "group", label: group.label } satisfies GroupHeader, ...group.entries])
+  })
+  const maxOffset = createMemo(() => Math.max(0, items().length - pageSize()))
+  const shown = createMemo(() => {
+    const columnsItems: Item[][] = []
+    let index = offset()
+    for (let column = 0; column < columns() && index < items().length; column++) {
+      const list: Item[] = []
+      while (list.length < rows() && index < items().length) {
+        list.push(items()[index]!)
+        index += 1
+      }
+      columnsItems.push(list)
+    }
+    return columnsItems
+  })
+  const rowIndexes = createMemo(() => Array.from({ length: rows() }, (_, index) => index))
+  const trigger = commandShortcut(props.api, command.toggle)
+  const modeTrigger = commandShortcut(props.api, command.toggleLayout)
+  const upActive = createMemo(() => offset() > 0)
+  const downActive = createMemo(() => offset() < maxOffset())
+  const scrollable = createMemo(() => maxOffset() > 0)
+  const headerItems = createMemo<HeaderItem[]>(() => [
+    ...(tabsVisible() ? groups().map((group) => ({ type: "tab" as const, group })) : []),
+    ...(scrollable() ? [{ type: "scroll" as const }] : []),
+  ])
+  const tabGap = createMemo(() => {
+    const itemCount = headerItems().length
+    if (itemCount <= 1) return 0
+    const itemWidth = headerItems().reduce(
+      (sum, item) => sum + (item.type === "tab" ? item.group.label.length + 2 : 3),
+      0,
+    )
+    return Math.max(MIN_TAB_GAP, Math.min(TAB_GAP, Math.floor((contentWidth() - itemWidth) / (itemCount - 1))))
+  })
+  const nextMode = createMemo(() => (props.mode() === "dock" ? "overlay" : "dock"))
+  const look = createMemo(() => skin(props.api))
+  const columnWidth = createMemo(() =>
+    Math.max(1, Math.min(MAX_COLUMN_WIDTH, Math.floor((contentWidth() - (columns() - 1) * COLUMN_GAP) / columns()))),
+  )
+  const clamp = (value: number) => Math.max(0, Math.min(maxOffset(), value))
+  const scroll = (delta: number) => setOffset((value) => clamp(value + delta))
+  const moveGroup = (delta: number) => {
+    if (pendingMode()) return
+    const list = groups()
+    if (!list.length) return
+    const index = Math.max(
+      0,
+      list.findIndex((item) => item.label === currentGroup()?.label),
+    )
+    setActiveGroup(list[(index + delta + list.length) % list.length]!.label)
+    setOffset(0)
+  }
+
+  Keymap.createLayer(() => ({
+    priority: 1000,
+    enabled: visible(),
+    commands: [
+      {
+        id: command.groupPrevious,
+        bind: false,
+        title: "Previous key binding group",
+        description: "Show the previous which-key group",
+        group: "System",
+        run() {
+          moveGroup(-1)
+        },
+      },
+      {
+        id: command.groupNext,
+        bind: false,
+        title: "Next key binding group",
+        description: "Show the next which-key group",
+        group: "System",
+        run() {
+          moveGroup(1)
+        },
+      },
+      {
+        id: command.scrollUp,
+        bind: false,
+        title: "Scroll key bindings up",
+        description: "Scroll the which-key panel up",
+        group: "System",
+        run() {
+          scroll(-columns())
+        },
+      },
+      {
+        id: command.scrollDown,
+        bind: false,
+        title: "Scroll key bindings down",
+        description: "Scroll the which-key panel down",
+        group: "System",
+        run() {
+          scroll(columns())
+        },
+      },
+      {
+        id: command.pageUp,
+        bind: false,
+        title: "Page key bindings up",
+        description: "Page the which-key panel up",
+        group: "System",
+        run() {
+          scroll(-pageSize())
+        },
+      },
+      {
+        id: command.pageDown,
+        bind: false,
+        title: "Page key bindings down",
+        description: "Page the which-key panel down",
+        group: "System",
+        run() {
+          scroll(pageSize())
+        },
+      },
+      {
+        id: command.home,
+        bind: false,
+        title: "First key binding",
+        description: "Jump to the first which-key binding",
+        group: "System",
+        run() {
+          setOffset(0)
+        },
+      },
+      {
+        id: command.end,
+        bind: false,
+        title: "Last key binding",
+        description: "Jump to the last which-key binding",
+        group: "System",
+        run() {
+          setOffset(maxOffset())
+        },
+      },
+    ],
+    bindings: pendingMode() ? scrollCommands : panelCommands,
+  }))
+
+  createEffect(() => {
+    if (pendingMode()) return
+    const group = currentGroup()
+    if (group?.label === activeGroup()) return
+    setActiveGroup(group?.label)
+  })
+
+  createEffect(() => {
+    if (pendingMode()) return
+    activeGroup()
+    setOffset(0)
+  })
+
+  createEffect(() => {
+    if (!visible()) setOffset(0)
+  })
+
+  createEffect(() => {
+    pending()
+    setOffset(0)
+  })
+
+  createEffect(() => {
+    setOffset((value) => clamp(value))
+  })
+
+  return (
+    <Show when={visible()}>
+      <box
+        position={props.layout === "overlay" ? "absolute" : "relative"}
+        zIndex={3500}
+        left={left}
+        bottom={props.layout === "overlay" ? 0 : undefined}
+        width={dimensions().width}
+        height={panelHeight()}
+        backgroundColor={look().panel}
+        paddingLeft={1}
+        paddingRight={1}
+        paddingTop={1}
+        flexShrink={0}
+        flexDirection="column"
+      >
+        <Show when={headerVisible()}>
+          <box width="100%" flexDirection="row" justifyContent="center" gap={tabGap()} flexShrink={0}>
+            <For each={headerItems()}>
+              {(item) => (
+                <Show
+                  when={item.type === "tab" ? item.group : undefined}
+                  fallback={
+                    <box flexShrink={0}>
+                      <text wrapMode="none">
+                        <span style={{ fg: upActive() ? look().text : look().muted }}>↑</span>
+                        <span style={{ fg: look().muted }}> </span>
+                        <span style={{ fg: downActive() ? look().text : look().muted }}>↓</span>
+                      </text>
+                    </box>
+                  }
+                >
+                  {(group) => {
+                    const selected = createMemo(() => currentGroup()?.label === group().label)
+                    return (
+                      <box
+                        paddingLeft={1}
+                        paddingRight={1}
+                        flexShrink={0}
+                        backgroundColor={selected() ? look().tab : undefined}
+                        onMouseDown={() => {
+                          setActiveGroup(group().label)
+                          setOffset(0)
+                        }}
+                      >
+                        <text
+                          fg={selected() ? look().tabText : look().muted}
+                          attributes={selected() ? TextAttributes.BOLD : undefined}
+                          wrapMode="none"
+                        >
+                          {group().label}
+                        </text>
+                      </box>
+                    )
+                  }}
+                </Show>
+              )}
+            </For>
+          </box>
+        </Show>
+        <Show when={tabsVisible()}>
+          <box height={TAB_CONTENT_GAP} flexShrink={0} />
+        </Show>
+        <box height={rows()} flexShrink={0} flexDirection="column">
+          <Show when={shown().length > 0} fallback={<text fg={look().muted}>No reachable bindings</text>}>
+            <For each={rowIndexes()}>
+              {(row) => (
+                <box width="100%" flexDirection="row" justifyContent="center" gap={COLUMN_GAP}>
+                  <For each={shown()}>
+                    {(column) => {
+                      const item = createMemo(() => column[row])
+                      const entry = createMemo(() => {
+                        const value = item()
+                        if (value?.type !== "entry") return undefined
+                        return value
+                      })
+                      return (
+                        <box width={columnWidth()} flexDirection="row" gap={1} justifyContent="space-between">
+                          <Show when={item()}>
+                            {(value) => (
+                              <Show
+                                when={entry()}
+                                fallback={
+                                  <text fg={look().accent} attributes={TextAttributes.BOLD} wrapMode="none" truncate>
+                                    {value().label}
+                                  </text>
+                                }
+                              >
+                                {(binding) => (
+                                  <>
+                                    <box flexGrow={1} minWidth={0}>
+                                      <text
+                                        fg={binding().continues ? look().accent : look().muted}
+                                        wrapMode="none"
+                                        truncate
+                                      >
+                                        {binding().label}
+                                      </text>
+                                    </box>
+                                    <box flexShrink={0}>
+                                      <text fg={look().text} attributes={TextAttributes.BOLD} wrapMode="none" truncate>
+                                        {binding().key}
+                                      </text>
+                                    </box>
+                                  </>
+                                )}
+                              </Show>
+                            )}
+                          </Show>
+                        </box>
+                      )
+                    }}
+                  </For>
+                </box>
+              )}
+            </For>
+          </Show>
+        </box>
+        <Show when={footerVisible()}>
+          <box height={FOOTER_MARGIN} flexShrink={0} />
+          <box width="100%" flexDirection="row" justifyContent="space-between" flexShrink={0}>
+            <box>
+              <text fg={look().text} wrapMode="none">
+                toggle <span style={{ fg: look().subtle }}>{trigger() || command.toggle}</span>
+              </text>
+            </box>
+            <box>
+              <text fg={look().text} wrapMode="none">
+                {nextMode()} <span style={{ fg: look().subtle }}>{modeTrigger() || command.toggleLayout}</span>
+              </text>
+            </box>
+          </box>
+        </Show>
+      </box>
+    </Show>
+  )
+}
+
+const tui: TuiPlugin = async (api) => {
+  const [pinned, setPinned] = createSignal(false)
+  const [mode, setMode] = createSignal(layout("dock"))
+  const [pendingPreview, setPendingPreview] = createSignal(false)
+
+  api.keymap.registerLayer({
+    priority: LAYER_PRIORITY,
+    commands: [
+      {
+        name: command.toggle,
+        title: "Show key bindings",
+        desc: "Toggle which-key overlay",
+        category: "System",
+        run() {
+          setPinned((value) => !value)
+        },
+      },
+      {
+        name: command.toggleLayout,
+        title: "Toggle key bindings layout",
+        desc: "Switch which-key between dock and overlay mode",
+        category: "System",
+        run() {
+          setMode((value) => {
+            const next = value === "dock" ? "overlay" : "dock"
+            return next
+          })
+        },
+      },
+      {
+        name: command.togglePending,
+        title: "Toggle pending key preview",
+        desc: "Automatically show which-key for pending key sequences in overlay mode",
+        category: "System",
+        run() {
+          setPendingPreview((value) => {
+            return !value
+          })
+        },
+      },
+    ],
+    bindings: toggleCommands.flatMap((command) => api.tuiConfig.keybinds.get(command)),
+  })
+
+  api.slots.register({
+    order: 200,
+    slots: {
+      home_bottom() {
+        return <HomeHint api={api} />
+      },
+      app() {
+        return (
+          <Show when={mode() === "overlay"}>
+            <WhichKeyPanel api={api} layout="overlay" mode={mode} pendingPreview={pendingPreview} pinned={pinned} />
+          </Show>
+        )
+      },
+      app_bottom() {
+        return (
+          <Show when={mode() === "dock"}>
+            <WhichKeyPanel api={api} layout="dock" mode={mode} pendingPreview={pendingPreview} pinned={pinned} />
+          </Show>
+        )
+      },
+    },
+  })
+}
+
+const plugin: BuiltinTuiPlugin = {
+  id: "which-key",
+  enabled: false,
+  tui,
+}
+
+export default plugin
@@ -767,23 +767,19 @@ export function RunSubagentSelectBody(props: {
  onRows?: (rows: number) => void
  mono?: boolean
 }) {
-  const [active, setActive] = createSignal(true)
  const entries = createMemo<SubagentEntry[]>(() =>
-    props
-      .tabs()
-      .filter((item) => (active() ? item.status === "running" : item.status !== "running"))
-      .map((item) => {
-        const title = item.description || item.title || item.label
-        return {
-          category: "",
-          display: title,
-          description: title === item.label ? undefined : item.label,
-          footer: subagentStatusLabel(item.status),
-          keywords: `${item.label} ${item.description} ${item.title ?? ""} ${item.status}`,
-          sessionID: item.sessionID,
-          current: props.current() === item.sessionID,
-        }
-      }),
+    props.tabs().map((item) => {
+      const title = item.description || item.title || item.label
+      return {
+        category: "",
+        display: title,
+        description: title === item.label ? undefined : item.label,
+        footer: subagentStatusLabel(item.status),
+        keywords: `${item.label} ${item.description} ${item.title ?? ""} ${item.status}`,
+        sessionID: item.sessionID,
+        current: props.current() === item.sessionID,
+      }
+    }),
  )
  const controller = createSearchablePanelController({
    entries,
@@ -792,12 +788,6 @@ export function RunSubagentSelectBody(props: {
    onSelect: (item) => props.onSelect(item.sessionID),
    isCurrent: (item) => item.current,
    closeOnFirstUp: true,
-    onKey(event) {
-      if (event.name.toLowerCase() !== "tab") return false
-      event.preventDefault()
-      setActive((value) => !value)
-      return true
-    },
    onRows: props.onRows,
  })

@@ -811,7 +801,6 @@ export function RunSubagentSelectBody(props: {
      theme={props.theme}
      inputRef={controller.inputRef}
      onQuery={controller.setQuery}
-      hint={`tab show ${active() ? "inactive" : "active"}`}
      mono={props.mono}
    >
      <RunFooterMenu
@@ -0,0 +1,40 @@
+import type { TuiRouteDefinition } from "@opencode-ai/plugin/v1/tui"
+import { createSignal } from "solid-js"
+
+type RouteEntry = {
+  key: symbol
+  render: TuiRouteDefinition["render"]
+}
+
+export type RouteMap = Map<string, RouteEntry[]>
+
+export function createPluginRoutes() {
+  const routes: RouteMap = new Map()
+  const [revision, setRevision] = createSignal(0)
+
+  return {
+    register(list: TuiRouteDefinition[]) {
+      const key = Symbol()
+      list.forEach((item) => routes.set(item.name, [...(routes.get(item.name) ?? []), { key, render: item.render }]))
+      setRevision((value) => value + 1)
+
+      return () => {
+        list.forEach((item) => {
+          const next = routes.get(item.name)?.filter((entry) => entry.key !== key) ?? []
+          if (next.length) {
+            routes.set(item.name, next)
+            return
+          }
+          routes.delete(item.name)
+        })
+        setRevision((value) => value + 1)
+      }
+    },
+    get(name: string) {
+      revision()
+      return routes.get(name)?.at(-1)?.render
+    },
+  }
+}
+
+export type PluginRoutes = ReturnType<typeof createPluginRoutes>
@@ -5,7 +5,6 @@ import SidebarLsp from "../feature-plugins/sidebar/lsp"
 import SidebarMcp from "../feature-plugins/sidebar/mcp"
 import DiffViewer from "../feature-plugins/system/diff-viewer"
 import Notifications from "../feature-plugins/system/notifications"
-import Plugins from "../feature-plugins/system/plugins"
 import Scrap from "../feature-plugins/system/scrap"

 export const builtins = [
@@ -15,7 +14,6 @@ export const builtins = [
  SidebarLsp,
  SidebarFooter,
  Notifications,
-  Plugins,
  Scrap,
  DiffViewer,
 ]
@@ -0,0 +1,108 @@
+// Legacy `api.command` bridge for v1 plugins; remove in v2.
+import type { TuiCommand, TuiPluginApi } from "@opencode-ai/plugin/v1/tui"
+import { TuiKeybind } from "../config/keybind"
+import type { DialogContext } from "../ui/dialog"
+
+const COMMAND_PALETTE_SHOW = "command.palette.show"
+const warned = new Set<string>()
+
+type Warn = (api: string, replacement: string) => void
+type LegacyDialog = TuiPluginApi["ui"]["dialog"]
+type CommandShimDialog = DialogContext | LegacyDialog
+type LegacyKeybinds = TuiPluginApi["tuiConfig"]["keybinds"]
+
+function warnCommandShim(api: string, replacement: string) {
+  // Warn v1 plugins about deprecated `api.command`; remove this shim path in v2.
+  console.warn("[tui.plugin] deprecated TUI plugin API", { api, replacement })
+}
+
+function createCommandShimDialog(dialog: CommandShimDialog): LegacyDialog {
+  if (!("stack" in dialog)) return dialog
+  return {
+    replace(render, onClose) {
+      dialog.replace(render, onClose)
+    },
+    clear() {
+      dialog.clear()
+    },
+    setSize(size) {
+      dialog.setSize(size)
+    },
+    get size() {
+      return dialog.size
+    },
+    get depth() {
+      return dialog.stack.length
+    },
+    get open() {
+      return dialog.stack.length > 0
+    },
+  }
+}
+
+function warnOnce(api: string, replacement: string, warn: Warn) {
+  if (warned.has(api)) return
+  warned.add(api)
+  warn(api, replacement)
+}
+
+function toCommand(item: TuiCommand, dialog: LegacyDialog) {
+  return {
+    namespace: "palette",
+    name: item.value,
+    title: item.title,
+    desc: item.description,
+    category: item.category,
+    suggested: item.suggested,
+    hidden: item.hidden,
+    enabled: item.enabled,
+    slash: item.slash,
+    run() {
+      return item.onSelect?.(dialog)
+    },
+  }
+}
+
+function toBindings(commands: TuiCommand[], keybinds: LegacyKeybinds) {
+  return commands.flatMap((item) =>
+    item.keybind
+      ? keybinds.has(TuiKeybind.CommandMap[item.keybind as keyof typeof TuiKeybind.CommandMap] ?? item.keybind)
+        ? keybinds
+            .get(TuiKeybind.CommandMap[item.keybind as keyof typeof TuiKeybind.CommandMap] ?? item.keybind)
+            .map((binding) => ({ ...binding, cmd: item.value, desc: binding.desc ?? item.title }))
+        : [
+            {
+              key: item.keybind,
+              cmd: item.value,
+              desc: item.title,
+            },
+          ]
+      : [],
+  )
+}
+
+export function createCommandShim(
+  keymap: TuiPluginApi["keymap"],
+  dialog: CommandShimDialog,
+  keybinds: LegacyKeybinds,
+): TuiPluginApi["command"] {
+  const shimDialog = createCommandShimDialog(dialog)
+  return {
+    register(cb) {
+      warnOnce("api.command.register", "api.keymap.registerLayer({ commands, bindings })", warnCommandShim)
+      const commands = cb()
+      return keymap.registerLayer({
+        commands: commands.map((item) => toCommand(item, shimDialog)),
+        bindings: toBindings(commands, keybinds),
+      })
+    },
+    trigger(value) {
+      warnOnce("api.command.trigger", "api.keymap.dispatchCommand(name)", warnCommandShim)
+      keymap.dispatchCommand(value)
+    },
+    show() {
+      warnOnce("api.command.show", `api.keymap.dispatchCommand("${COMMAND_PALETTE_SHOW}")`, warnCommandShim)
+      keymap.dispatchCommand(COMMAND_PALETTE_SHOW)
+    },
+  }
+}
@@ -1,4 +1,4 @@
-import { PluginContextProvider, type Plugin } from "@opencode-ai/plugin/tui"
+import type { Plugin } from "@opencode-ai/plugin/tui"
 import {
  batch,
  createContext,
@@ -16,7 +16,6 @@ import { fileURLToPath, pathToFileURL } from "url"
 import type { Context, Dialog, Page, Slot, SlotMap, SlotName, Toast } from "@opencode-ai/plugin/tui/context"
 import { createStore, produce, reconcile as reconcileStore } from "solid-js/store"
 import { useRenderer } from "@opentui/solid"
-import { ensureRuntimePluginSupport } from "@opentui/solid/runtime-plugin-support/configure"
 import { useConfig } from "../config"
 import { useClient } from "../context/client"
 import { useData } from "../context/data"
@@ -24,7 +23,7 @@ import { Keymap } from "../context/keymap"
 import { useRoute } from "../context/route"
 import { useTuiApp, useTuiLifecycle, useTuiPaths } from "../context/runtime"
 import { useLocation } from "../context/location"
-import { useTheme, useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { DialogAlert } from "../ui/dialog-alert"
 import { DialogConfirm } from "../ui/dialog-confirm"
 import { DialogPrompt } from "../ui/dialog-prompt"
@@ -34,9 +33,6 @@ import { useToast } from "../ui/toast"
 import { useAttention } from "../context/attention"
 import { abbreviateHome } from "../util/path-format"
 import { builtins } from "./builtins"
-import { discoverTuiPlugins } from "./discovery"
-
-ensureRuntimePluginSupport()

 export interface PackageResolver {
  readonly resolve: (spec: string) => Promise<string | undefined>
@@ -48,16 +44,9 @@ type State =
  | { readonly target: string; readonly status: "unsupported" }
  | { readonly target: string; readonly status: "failed"; readonly error: string }

-type RegisteredPlugin = {
-  readonly id: string
-  readonly source: "builtin" | "external"
-  readonly active: boolean
-}
-
 type Value = {
  readonly ready: () => boolean
  readonly list: () => ReadonlyArray<State>
-  readonly registered: () => ReadonlyArray<RegisteredPlugin>
  readonly route: (id: string, name: string) => Page["render"] | undefined
  readonly slot: <Name extends SlotName>(name: Name) => ReadonlyArray<Slot<Name>>
  readonly activate: (id: string) => Promise<boolean>
@@ -66,8 +55,8 @@ type Value = {

 type Dispose = () => Promise<void>
 type Registration = {
+  target: string
  plugin: Plugin.Definition
-  source: RegisteredPlugin["source"]
  options?: Readonly<Record<string, any>>
  active: boolean
  routes: Record<string, Page>
@@ -91,8 +80,6 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
  const paths = useTuiPaths()
  const location = useLocation()
  const theme = useTheme()
-  const themes = useThemes()
-  const pluginTheme = createPluginTheme(theme, themes)
  const dialog = useDialog()
  const toast = useToast()
  const attention = useAttention()
@@ -113,12 +100,25 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
      setStore("registrations", id, "cleanups", [])
    })
    const owned: Dispose[] = []
-    let context: Context
+    let activeDialog: symbol | undefined
    const dialogApi: Dialog = {
      show(render, onClose) {
-        dialog.replace(() => <PluginContextProvider value={context}>{render()}</PluginContextProvider>, onClose)
+        const token = Symbol()
+        let closed = false
+        activeDialog = token
+        dialog.replace(render, () => {
+          if (closed) return
+          closed = true
+          if (activeDialog === token) activeDialog = undefined
+          onClose?.()
+        })
+        return () => {
+          if (closed || activeDialog !== token) return
+          dialog.clear()
+        }
      },
      set(options) {
+        if (!activeDialog) return
        dialog.setSize(options.size ?? "medium")
        dialog.setCentered(options.centered ?? false)
      },
@@ -214,7 +214,8 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
        toast.show({ ...options, variant: options.variant ?? "info" })
      },
    }
-    context = {
+    owned.push(async () => dialogApi.clear())
+    const context: Context = {
      options: item.options ?? {},
      get location() {
        return location.current
@@ -224,7 +225,7 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
      client: client.api,
      data,
      attention,
-      theme: pluginTheme,
+      theme,
      keymap: {
        layer: Keymap.createLayer,
        dispatch: keymap.dispatch,
@@ -244,10 +245,7 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
          register(page) {
            if (store.registrations[item.plugin.id]?.routes[page.name])
              throw new Error(`Route already registered: ${page.name}`)
-            setStore("registrations", item.plugin.id, "routes", page.name, {
-              ...page,
-              render: (input) => <PluginContextProvider value={context}>{page.render(input)}</PluginContextProvider>,
-            })
+            setStore("registrations", item.plugin.id, "routes", page.name, page)
            let registered = true
            const unregister = () => {
              if (!registered) return
@@ -277,9 +275,7 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
        },
        slot(name, render) {
          if (store.registrations[item.plugin.id]?.slots[name]) throw new Error(`Slot already registered: ${name}`)
-          setStore("registrations", item.plugin.id, "slots", name, () => (input: SlotMap[typeof name]) => (
-            <PluginContextProvider value={context}>{render(input)}</PluginContextProvider>
-          ))
+          setStore("registrations", item.plugin.id, "slots", name, () => render)
          let registered = true
          const unregister = () => {
            if (!registered) return
@@ -346,7 +342,7 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
        .filter(([, registration]) => registration.active)
        .map(([id]) => deactivate(id)),
    )
-    const entries = [...(await discoverTuiPlugins(paths.cwd)), ...(config.data.plugins ?? [])]
+    const entries = config.data.plugins ?? []
    batch(() => {
      setStore("registrations", reconcileStore({}))
      setStore("states", [])
@@ -354,8 +350,8 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>

    for (const plugin of builtins) {
      setStore("registrations", plugin.id, {
+        target: plugin.id,
        plugin,
-        source: "builtin",
        active: false,
        routes: {},
        slots: {},
@@ -399,24 +395,23 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
        continue
      }

-      setStore("registrations", plugin.id, {
-        plugin,
-        source: "external",
-        options,
+      const item = { target, plugin, options }
+      setStore("registrations", item.plugin.id, {
+        ...item,
        active: false,
        routes: {},
        slots: {},
        cleanups: [],
      })
-      const error = await activate(plugin.id).then(
+      const error = await activate(item.plugin.id).then(
        () => undefined,
        (error) => (error instanceof Error ? error.message : String(error)),
      )
      setStore("states", (items) => [
-        ...items.filter((state) => state.target !== target && (!("id" in state) || state.id !== plugin.id)),
+        ...items.filter((state) => state.target !== item.target && (!("id" in state) || state.id !== item.plugin.id)),
        error
-          ? { target, status: "failed", error }
-          : { target, id: plugin.id, status: "active" },
+          ? { target: item.target, status: "failed", error }
+          : { target: item.target, id: item.plugin.id, status: "active" },
      ])
    }
  }
@@ -450,8 +445,6 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
      value={{
        ready: () => store.ready,
        list: () => store.states,
-        registered: () =>
-          Object.entries(store.registrations).map(([id, plugin]) => ({ id, source: plugin.source, active: plugin.active })),
        route: (id, name) => store.registrations[id]?.routes[name]?.render,
        slot: (name) =>
          Object.values(store.registrations).flatMap((registration) =>
@@ -525,24 +518,6 @@ function isPlugin(value: unknown): value is Plugin.Definition {
  )
 }

-type PluginTheme = ReturnType<typeof useTheme> & {
-  contextual(context: "elevated" | "overlay"): PluginTheme
-  syntaxStyle(): ReturnType<ReturnType<typeof useThemes>["currentSyntax"]>
-}
-
-export function createPluginTheme(theme: ReturnType<typeof useTheme>, themes: ReturnType<typeof useThemes>): PluginTheme {
-  return new Proxy(theme as PluginTheme, {
-    get(target, property, receiver) {
-      if (property === "contextual") {
-        return (context: "elevated" | "overlay") => createPluginTheme(themes.contextual(context), themes)
-      }
-      if (property === "syntaxStyle") return themes.currentSyntax
-      if (Reflect.has(target, property)) return Reflect.get(target, property, receiver)
-      return Reflect.get(themes, property, themes)
-    },
-  })
-}
-
 export function usePlugin() {
  const value = useContext(PluginContext)
  if (!value) throw new Error("PluginProvider is missing")
@@ -1,16 +0,0 @@
-import { readdir } from "node:fs/promises"
-import path from "node:path"
-
-const extensions = new Set([".cjs", ".cts", ".js", ".jsx", ".mjs", ".mts", ".ts", ".tsx"])
-
-export async function discoverTuiPlugins(cwd: string) {
-  const directory = path.join(cwd, ".opencode", "plugins", "tui")
-  const entries = await readdir(directory, { withFileTypes: true }).catch((error: unknown) => {
-    if (error && typeof error === "object" && Reflect.get(error, "code") === "ENOENT") return []
-    return Promise.reject(error)
-  })
-  return entries
-    .filter((entry) => (entry.isFile() || entry.isSymbolicLink()) && extensions.has(path.extname(entry.name)))
-    .map((entry) => path.join(directory, entry.name))
-    .sort()
-}
@@ -0,0 +1,79 @@
+import type {
+  TuiPluginApi,
+  TuiPluginInstallOptions,
+  TuiPluginInstallResult,
+  TuiPluginStatus,
+} from "@opencode-ai/plugin/v1/tui"
+import { createContext, createSignal, useContext, type JSX, type ParentProps } from "solid-js"
+import { createPluginRoutes } from "./api"
+import { createSlots, type HostSlots } from "./slots"
+
+export function createPluginRuntime() {
+  const [commands, setCommands] = createSignal<PluginRuntimeCommands>(emptyCommands)
+  const [status, setStatus] = createSignal<ReadonlyArray<TuiPluginStatus>>([])
+  const slots = createSlots()
+
+  return {
+    Slot: slots.Slot,
+    routes: createPluginRoutes(),
+    commands,
+    status,
+    update(input: { commands?: PluginRuntimeCommands; status?: ReadonlyArray<TuiPluginStatus> }) {
+      if (input.commands) setCommands(input.commands)
+      if (input.status) setStatus(input.status)
+    },
+    clear() {
+      setCommands(emptyCommands)
+      setStatus([])
+      slots.clear()
+    },
+    setupSlots(api: TuiPluginApi): HostSlots {
+      return slots.setup(api)
+    },
+  }
+}
+
+export type PluginRuntimeCommands = {
+  activate: (id: string) => Promise<boolean>
+  deactivate: (id: string) => Promise<boolean>
+  add: (spec: string) => Promise<boolean>
+  install: (spec: string, options?: TuiPluginInstallOptions) => Promise<TuiPluginInstallResult>
+}
+
+const emptyCommands: PluginRuntimeCommands = {
+  async activate() {
+    return false
+  },
+  async deactivate() {
+    return false
+  },
+  async add() {
+    return false
+  },
+  async install() {
+    return { ok: false, message: "Plugin runtime is not available." }
+  },
+}
+
+export type PluginRuntime = ReturnType<typeof createPluginRuntime>
+
+export type TuiPluginHost = {
+  start(input: {
+    api: TuiPluginApi
+    runtime: PluginRuntime
+    dispose?: () => void
+  }): Promise<void>
+  dispose(): Promise<void>
+}
+
+const Context = createContext<PluginRuntime>()
+
+export function PluginRuntimeProvider(props: ParentProps<{ value: PluginRuntime }>): JSX.Element {
+  return <Context.Provider value={props.value}>{props.children}</Context.Provider>
+}
+
+export function usePluginRuntime() {
+  const runtime = useContext(Context)
+  if (!runtime) throw new Error("usePluginRuntime must be used within PluginRuntimeProvider")
+  return runtime
+}
@@ -0,0 +1,65 @@
+import type { TuiPluginApi, TuiSlotContext, TuiSlotMap, TuiSlotProps } from "@opencode-ai/plugin/v1/tui"
+import { createSlot, createSolidSlotRegistry, type JSX, type SolidPlugin } from "@opentui/solid"
+import { createSignal } from "solid-js"
+import { isRecord } from "../util/record"
+
+type RuntimeSlotMap = TuiSlotMap<Record<string, object>>
+type SlotView = <Name extends string>(props: TuiSlotProps<Name>) => JSX.Element | null
+
+export type HostSlotPlugin<Slots extends Record<string, object> = {}> = SolidPlugin<TuiSlotMap<Slots>, TuiSlotContext>
+export type HostPluginApi = TuiPluginApi
+export type HostSlots = {
+  register: {
+    (plugin: HostSlotPlugin): () => void
+    <Slots extends Record<string, object>>(plugin: HostSlotPlugin<Slots>): () => void
+  }
+  dispose: () => void
+}
+
+function isHostSlotPlugin(value: unknown): value is HostSlotPlugin<Record<string, object>> {
+  if (!isRecord(value)) return false
+  if (typeof value.id !== "string") return false
+  return isRecord(value.slots)
+}
+
+export function createSlots() {
+  const empty: SlotView = (props) => props.children ?? null
+  const [view, setView] = createSignal<SlotView>(empty)
+  const Slot: SlotView = (props) => view()(props)
+
+  return {
+    Slot,
+    setup(api: HostPluginApi): HostSlots {
+      const registry = createSolidSlotRegistry<RuntimeSlotMap, TuiSlotContext>(
+        api.renderer,
+        { theme: api.theme },
+        {
+          onPluginError(event) {
+            console.error("[tui.slot] plugin error", {
+              plugin: event.pluginId,
+              slot: event.slot,
+              phase: event.phase,
+              source: event.source,
+              message: event.error.message,
+            })
+          },
+        },
+      )
+      const slot = createSlot<RuntimeSlotMap, TuiSlotContext>(registry)
+      setView(() => (props: TuiSlotProps<string>) => slot(props))
+
+      return {
+        register(plugin: HostSlotPlugin) {
+          if (!isHostSlotPlugin(plugin)) return () => {}
+          return registry.register(plugin)
+        },
+        dispose() {
+          setView(() => empty)
+        },
+      }
+    },
+    clear() {
+      setView(() => empty)
+    },
+  }
+}
@@ -5,6 +5,7 @@ import { useArgs } from "../context/args"
 import { useRouteData } from "../context/route"
 import { usePromptRef } from "../context/prompt"
 import { useLocal } from "../context/local"
+import { usePluginRuntime } from "../plugin/runtime"
 import { useEditorContext } from "../context/editor"
 import { useData } from "../context/data"
 import { useLocation } from "../context/location"
@@ -18,6 +19,7 @@ const placeholder = {
 }

 export function Home() {
+  const pluginRuntime = usePluginRuntime()
  const route = useRouteData("home")
  const promptRef = usePromptRef()
  const [ref, setRef] = createSignal<PromptRef | undefined>()
@@ -68,11 +70,20 @@ export function Home() {
        <box flexGrow={1} minHeight={0} />
        <box height={4} minHeight={0} flexShrink={1} />
        <box flexShrink={0}>
-          <Logo />
+          <pluginRuntime.Slot name="home_logo" mode="replace">
+            <Logo />
+          </pluginRuntime.Slot>
        </box>
        <box height={1} minHeight={0} flexShrink={1} />
        <box width="100%" maxWidth={75} zIndex={1000} paddingTop={1} flexShrink={0}>
-          <Prompt ref={bind} placeholders={placeholder} disabled={forms().length > 0} />
+          <pluginRuntime.Slot name="home_prompt" mode="replace" ref={bind}>
+            <Prompt
+              ref={bind}
+              right={<pluginRuntime.Slot name="home_prompt_right" />}
+              placeholders={placeholder}
+              disabled={forms().length > 0}
+            />
+          </pluginRuntime.Slot>
        </box>
        <box flexGrow={1} minHeight={0} />
      </box>
@@ -1,7 +1,7 @@
 import { createEffect, createMemo, For, onCleanup, Show, useContext, createContext } from "solid-js"
 import { createStore } from "solid-js/store"
 import { TextAttributes } from "@opentui/core"
-import { useThemes } from "../../../context/theme"
+import { useTheme } from "../../../context/theme"
 import { SplitBorder } from "../../../ui/border"
 import { Keymap } from "../../../context/keymap"
 import { SubagentsTab } from "./subagents-tab"
@@ -39,7 +39,7 @@ export type ComposerProps = {
 }

 export function Composer(props: ComposerProps) {
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")

  const [store, setStore] = createStore({
    tabs: {} as Record<string, Tab>,
@@ -98,6 +98,12 @@ export function Composer(props: ComposerProps) {
      { bind: "left", title: "Previous tab", group: "Composer", run: () => switchTab(-1) },
      { bind: "right", title: "Next tab", group: "Composer", run: () => switchTab(1) },
      { bind: "escape", title: "Close composer", group: "Composer", run: close },
+      {
+        bind: "<leader>down",
+        title: "Toggle composer",
+        group: "Composer",
+        run: close,
+      },
    ],
  }))

@@ -107,8 +113,8 @@ export function Composer(props: ComposerProps) {
        <box
          {...SplitBorder}
          border={["left"]}
-          borderColor={theme.border.default}
-          backgroundColor={theme.background.default}
+          borderColor={themeV2.border.default}
+          backgroundColor={themeV2.background.default}
          paddingLeft={1}
          paddingRight={2}
          paddingTop={1}
@@ -119,7 +125,7 @@ export function Composer(props: ComposerProps) {
              <Show
                when={tabList().length > 1}
                fallback={
-                  <text fg={theme.text.default} attributes={TextAttributes.BOLD}>
+                  <text fg={themeV2.text.default} attributes={TextAttributes.BOLD}>
                    {tabList()[0]?.label ?? ""}
                  </text>
                }
@@ -130,7 +136,7 @@ export function Composer(props: ComposerProps) {
                      const isActive = createMemo(() => store.active === t.id)
                      return (
                        <text
-                          fg={isActive() ? theme.text.default : theme.text.subdued}
+                          fg={isActive() ? themeV2.text.default : themeV2.text.subdued}
                          attributes={isActive() ? TextAttributes.BOLD : undefined}
                        >
                          {t.label}
@@ -140,7 +146,7 @@ export function Composer(props: ComposerProps) {
                  </For>
                </box>
              </Show>
-              <text fg={theme.text.subdued} onMouseUp={close}>
+              <text fg={themeV2.text.subdued} onMouseUp={close}>
                esc
              </text>
            </box>
@@ -150,19 +156,19 @@ export function Composer(props: ComposerProps) {
              <For each={footerHints()}>
                {(hint) => (
                  <text>
-                    <span style={{ fg: theme.text.default }}>
+                    <span style={{ fg: themeV2.text.default }}>
                      <b>{hint.label}</b>{" "}
                    </span>
-                    <span style={{ fg: theme.text.subdued }}>{hint.shortcut}</span>
+                    <span style={{ fg: themeV2.text.subdued }}>{hint.shortcut}</span>
                  </text>
                )}
              </For>
              <Show when={tabList().length > 1}>
                <text>
-                  <span style={{ fg: theme.text.default }}>
+                  <span style={{ fg: themeV2.text.default }}>
                    <b>tabs</b>{" "}
                  </span>
-                  <span style={{ fg: theme.text.subdued }}>←/→</span>
+                  <span style={{ fg: themeV2.text.subdued }}>←/→</span>
                </text>
              </Show>
            </box>
@@ -12,7 +12,7 @@ export function ShellTab(props: { sessionID: string }) {
  const data = useData()
  const location = useLocation()
  const client = useClient()
-  const theme = useTheme()
+  const { themeV2 } = useTheme()
  const composer = useComposerTab()
  const shortcuts = Keymap.useShortcuts()

@@ -98,7 +98,7 @@ export function ShellTab(props: { sessionID: string }) {
  return (
    <Show when={composer.active("shell")}>
      <scrollbox scrollbarOptions={{ visible: false }} maxHeight={5} ref={(r: ScrollBoxRenderable) => (scroll = r)}>
-        <Show when={entries().length > 0} fallback={<text fg={theme.text.subdued}> No shell commands</text>}>
+        <Show when={entries().length > 0} fallback={<text fg={themeV2.text.subdued}> No shell commands</text>}>
          <For each={entries()}>
            {(shell, index) => {
              const active = createMemo(() => index() === store.selected)
@@ -108,12 +108,12 @@ export function ShellTab(props: { sessionID: string }) {
                  paddingLeft={1}
                  paddingRight={1}
                  backgroundColor={
-                    active() ? theme.background.action.primary.focused : theme.background.action.primary.default
+                    active() ? themeV2.background.action.primary.focused : themeV2.background.action.primary.default
                  }
                  onMouseOver={() => setStore("selected", index())}
                >
                  <text
-                    fg={active() ? theme.text.action.primary.focused : theme.text.action.primary.default}
+                    fg={active() ? themeV2.text.action.primary.focused : themeV2.text.action.primary.default}
                    attributes={active() ? TextAttributes.BOLD : undefined}
                    wrapMode="none"
                  >
@@ -21,13 +21,12 @@ export function SubagentsTab(props: { sessionID: string }) {
  const route = useRouteData("session")
  const data = useData()
  const client = useClient()
-  const theme = useTheme()
+  const { themeV2 } = useTheme()
  const navigate = useRoute().navigate
  const composer = useComposerTab()
  const shortcuts = Keymap.useShortcuts()

  const session = createMemo(() => data.session.get(props.sessionID))
-  const [store, setStore] = createStore({ selected: 0, active: true })

  const entries = createMemo<SubagentEntry[]>(() => {
    const current = session()
@@ -73,9 +72,10 @@ export function SubagentsTab(props: { sessionID: string }) {
      }
    }

-    return result.filter((entry) => (store.active ? entry.status === "running" : entry.status !== "running"))
+    return result
  })

+  const [store, setStore] = createStore({ selected: 0 })
  let selectedSessionID = ""
  let wasActive = false
  let scroll: ScrollBoxRenderable | undefined
@@ -90,7 +90,7 @@ export function SubagentsTab(props: { sessionID: string }) {
    if (!active) {
      if (wasActive) {
        selectedSessionID = ""
-        setStore({ selected: 0, active: true })
+        setStore("selected", 0)
      }
      wasActive = false
      return
@@ -140,15 +140,8 @@ export function SubagentsTab(props: { sessionID: string }) {
      label: "Subagents",
      hints: () => {
        const entry = selectedEntry()
-        return [
-          ...(entry?.status === "running"
-            ? [{ label: "interrupt", shortcut: shortcuts.get("composer.subagent.interrupt") ?? "" }]
-            : []),
-          {
-            label: `show ${store.active ? "inactive" : "active"}`,
-            shortcut: shortcuts.get("composer.subagent.toggle-activity") ?? "",
-          },
-        ]
+        if (!entry || entry.status !== "running") return []
+        return [{ label: "interrupt", shortcut: shortcuts.get("composer.subagent.interrupt") ?? "" }]
      },
      onClose: () => {
        const parentID = session()?.parentID
@@ -196,16 +189,6 @@ export function SubagentsTab(props: { sessionID: string }) {
          if (entry) navigate({ type: "session", sessionID: entry.sessionID })
        },
      },
-      {
-        id: "composer.subagent.toggle-activity",
-        title: "Toggle active subagents",
-        group: "Composer",
-        bind: "ctrl+a",
-        run() {
-          setStore({ selected: 0, active: !store.active })
-          scroll?.scrollTo(0)
-        },
-      },
      {
        id: "composer.subagent.interrupt",
        title: "Interrupt subagent",
@@ -223,10 +206,7 @@ export function SubagentsTab(props: { sessionID: string }) {
  return (
    <Show when={composer.active("subagents")}>
      <scrollbox scrollbarOptions={{ visible: false }} maxHeight={5} ref={(r: ScrollBoxRenderable) => (scroll = r)}>
-        <Show
-          when={entries().length > 0}
-          fallback={<text fg={theme.text.subdued}> No {store.active ? "active" : "inactive"} subagents</text>}
-        >
+        <Show when={entries().length > 0} fallback={<text fg={themeV2.text.subdued}> No subagents</text>}>
          <For each={entries()}>
            {(entry, index) => {
              const active = createMemo(() => index() === selected())
@@ -241,10 +221,10 @@ export function SubagentsTab(props: { sessionID: string }) {
                  paddingRight={1}
                  backgroundColor={
                    active()
-                      ? theme.background.action.primary.focused
+                      ? themeV2.background.action.primary.focused
                      : entry.current
-                        ? theme.background.action.primary.selected
-                        : theme.background.action.primary.default
+                        ? themeV2.background.action.primary.selected
+                        : themeV2.background.action.primary.default
                  }
                  onMouseOver={() => setStore("selected", index())}
                  onMouseUp={() => {
@@ -256,10 +236,10 @@ export function SubagentsTab(props: { sessionID: string }) {
                    <text
                      fg={
                        active()
-                          ? theme.text.action.primary.focused
+                          ? themeV2.text.action.primary.focused
                          : entry.current
-                            ? theme.text.action.primary.selected
-                            : theme.text.action.primary.default
+                            ? themeV2.text.action.primary.selected
+                            : themeV2.text.action.primary.default
                      }
                      attributes={active() ? TextAttributes.BOLD : undefined}
                      wrapMode="none"
@@ -268,7 +248,7 @@ export function SubagentsTab(props: { sessionID: string }) {
                    </text>
                  </box>
                  <Show when={status()}>
-                    <text fg={active() ? theme.text.action.primary.focused : theme.text.subdued} wrapMode="none">
+                    <text fg={active() ? themeV2.text.action.primary.focused : themeV2.text.subdued} wrapMode="none">
                      {status()}
                    </text>
                  </Show>
@@ -8,7 +8,7 @@ import { useRoute } from "../../context/route"
 import { usePermission } from "../../context/permission"

 export function Footer() {
-  const theme = useTheme()
+  const { themeV2 } = useTheme()
  const data = useData()
  const route = useRoute()
  const permission = usePermission()
@@ -54,35 +54,35 @@ export function Footer() {

  return (
    <box flexDirection="row" justifyContent="space-between" gap={1} flexShrink={0}>
-      <text fg={theme.text.subdued}>{directory()}</text>
+      <text fg={themeV2.text.subdued}>{directory()}</text>
      <box gap={2} flexDirection="row" flexShrink={0}>
        <Switch>
          <Match when={store.welcome}>
-            <text fg={theme.text.default}>
-              Get started <span style={{ fg: theme.text.subdued }}>/connect</span>
+            <text fg={themeV2.text.default}>
+              Get started <span style={{ fg: themeV2.text.subdued }}>/connect</span>
            </text>
          </Match>
          <Match when={connected()}>
            <Show when={permission.mode !== "auto" && permissions().length > 0}>
-              <text fg={theme.text.feedback.warning.default}>
-                <span style={{ fg: theme.text.feedback.warning.default }}>△</span> {permissions().length} Permission
+              <text fg={themeV2.text.feedback.warning.default}>
+                <span style={{ fg: themeV2.text.feedback.warning.default }}>△</span> {permissions().length} Permission
                {permissions().length > 1 ? "s" : ""}
              </text>
            </Show>
            <Show when={mcp()}>
-              <text fg={theme.text.default}>
+              <text fg={themeV2.text.default}>
                <Switch>
                  <Match when={mcpError()}>
-                    <span style={{ fg: theme.text.feedback.error.default }}>⊙ </span>
+                    <span style={{ fg: themeV2.text.feedback.error.default }}>⊙ </span>
                  </Match>
                  <Match when={true}>
-                    <span style={{ fg: theme.text.feedback.success.default }}>⊙ </span>
+                    <span style={{ fg: themeV2.text.feedback.success.default }}>⊙ </span>
                  </Match>
                </Switch>
                {mcp()} MCP
              </text>
            </Show>
-            <text fg={theme.text.subdued}>/status</text>
+            <text fg={themeV2.text.subdued}>/status</text>
          </Match>
        </Switch>
      </box>
@@ -3,7 +3,7 @@ import { createMemo, createSignal, For, onCleanup, onMount, Show } from "solid-j
 import { useRenderer, useTerminalDimensions } from "@opentui/solid"
 import type { ScrollBoxRenderable, TextareaRenderable } from "@opentui/core"
 import open from "open"
-import { useThemes } from "../../context/theme"
+import { useTheme } from "../../context/theme"
 import type { FormField, FormValue } from "@opencode-ai/client"
 import type { FormWithLocation } from "../../context/data"
 import { useClient } from "../../context/client"
@@ -44,9 +44,7 @@ function requestOptions(form: FormWithLocation) {

 export function FormPrompt(props: { form: FormWithLocation }) {
  const client = useClient()
-  const themes = useThemes()
-  const theme = themes.contextual("elevated")
-  const themeMode = themes.mode
+  const { themeV2, mode: themeMode } = useTheme().contextual("elevated")
  const renderer = useRenderer()
  const dimensions = useTerminalDimensions()
  const keymap = Keymap.use()
@@ -626,27 +624,27 @@ export function FormPrompt(props: { form: FormWithLocation }) {

  return (
    <box
-      backgroundColor={theme.background.default}
+      backgroundColor={themeV2.background.default}
      border={["left"]}
-      borderColor={theme.hue.interactive[themeMode() === "light" ? 800 : 200]}
+      borderColor={themeV2.hue.interactive[themeMode() === "light" ? 800 : 200]}
      customBorderChars={SplitBorder.customBorderChars}
    >
      <box gap={1} paddingLeft={1} paddingRight={3} paddingTop={1} paddingBottom={1}>
        <box paddingLeft={1}>
-          <text fg={theme.text.subdued}>{props.form.title}</text>
+          <text fg={themeV2.text.subdued}>{props.form.title}</text>
        </box>
        <Show when={message()}>
          <box paddingLeft={1}>
-            <text fg={theme.text.default}>{message()}</text>
+            <text fg={themeV2.text.default}>{message()}</text>
          </box>
        </Show>
        <Show when={!single() && !tabbed()}>
          <box flexDirection="row" gap={1} paddingLeft={1}>
-            <text fg={theme.text.subdued}>
+            <text fg={themeV2.text.subdued}>
              {confirm() ? "Review" : `Field ${Math.min(store.tab, fields().length - 1) + 1} of ${fields().length}`}
            </text>
            <Show when={fields().length > 0}>
-              <text fg={theme.text.subdued}>
+              <text fg={themeV2.text.subdued}>
                · {answered()}/{fields().length} completed
              </text>
            </Show>
@@ -663,10 +661,10 @@ export function FormPrompt(props: { form: FormWithLocation }) {
                    paddingRight={2}
                    backgroundColor={
                      isTab()
-                        ? theme.background.formfield.selected
+                        ? themeV2.background.formfield.selected
                        : tabHover() === index()
-                          ? theme.background.formfield.focused
-                          : theme.background.default
+                          ? themeV2.background.formfield.focused
+                          : themeV2.background.default
                    }
                    onMouseOver={() => setTabHover(index())}
                    onMouseOut={() => setTabHover(null)}
@@ -678,12 +676,12 @@ export function FormPrompt(props: { form: FormWithLocation }) {
                    <text
                      fg={
                        isTab()
-                          ? theme.text.formfield.selected
+                          ? themeV2.text.formfield.selected
                          : tabHover() === index()
-                            ? theme.text.formfield.focused
+                            ? themeV2.text.formfield.focused
                            : isAnswered()
-                              ? theme.text.default
-                              : theme.text.subdued
+                              ? themeV2.text.default
+                              : themeV2.text.subdued
                      }
                    >
                      {truncate(formLabel(item), 24)}
@@ -695,10 +693,10 @@ export function FormPrompt(props: { form: FormWithLocation }) {
            <box
              backgroundColor={
                confirm()
-                  ? theme.background.formfield.selected
+                  ? themeV2.background.formfield.selected
                  : tabHover() === "confirm"
-                    ? theme.background.formfield.focused
-                    : theme.background.default
+                    ? themeV2.background.formfield.focused
+                    : themeV2.background.default
              }
              onMouseOver={() => setTabHover("confirm")}
              onMouseOut={() => setTabHover(null)}
@@ -707,7 +705,7 @@ export function FormPrompt(props: { form: FormWithLocation }) {
                selectTabFromMouse()
              }}
            >
-              <text fg={confirm() ? theme.text.formfield.selected : theme.text.formfield.default}>Confirm</text>
+              <text fg={confirm() ? themeV2.text.formfield.selected : themeV2.text.formfield.default}>Confirm</text>
            </box>
          </box>
        </Show>
@@ -716,13 +714,13 @@ export function FormPrompt(props: { form: FormWithLocation }) {
          {(external) => (
            <box paddingLeft={1} gap={1}>
              <Show when={external().title}>
-                <text fg={theme.text.default}>{external().title}</text>
+                <text fg={themeV2.text.default}>{external().title}</text>
              </Show>
              <Show when={external().description}>
-                <text fg={theme.text.subdued}>{external().description}</text>
+                <text fg={themeV2.text.subdued}>{external().description}</text>
              </Show>
              <text
-                fg={theme.background.action.primary.default}
+                fg={themeV2.background.action.primary.default}
                onMouseUp={() => {
                  if (renderer.getSelection()?.getSelectedText()) return
                  openExternal()
@@ -731,7 +729,9 @@ export function FormPrompt(props: { form: FormWithLocation }) {
                {external().url}
              </text>
              <text
-                fg={store.answers[external().key] === true ? theme.text.feedback.success.default : theme.text.subdued}
+                fg={
+                  store.answers[external().key] === true ? themeV2.text.feedback.success.default : themeV2.text.subdued
+                }
              >
                {store.answers[external().key] === true
                  ? "✓ Acknowledged"
@@ -746,7 +746,7 @@ export function FormPrompt(props: { form: FormWithLocation }) {
        <Show when={!confirm() && answerField()}>
          <box paddingLeft={1} gap={1}>
            <box>
-              <text fg={theme.text.default}>{answerField()!.description ?? formLabel(answerField()!)}</text>
+              <text fg={themeV2.text.default}>{answerField()!.description ?? formLabel(answerField()!)}</text>
            </box>
            <Show when={textual() ? answerField()!.key : undefined} keyed>
              <box paddingLeft={1}>
@@ -763,12 +763,12 @@ export function FormPrompt(props: { form: FormWithLocation }) {
                    input() || formDisplayValue(answerField()!, store.answers[answerField()!.key], "(none)")
                  }
                  placeholder={placeholder()}
-                  placeholderColor={theme.text.subdued}
+                  placeholderColor={themeV2.text.subdued}
                  minHeight={1}
                  maxHeight={6}
-                  textColor={theme.text.default}
-                  focusedTextColor={theme.text.default}
-                  cursorColor={theme.text.default}
+                  textColor={themeV2.text.default}
+                  focusedTextColor={themeV2.text.default}
+                  cursorColor={themeV2.text.default}
                />
              </box>
            </Show>
@@ -793,35 +793,39 @@ export function FormPrompt(props: { form: FormWithLocation }) {
                      >
                        <box flexDirection="row">
                          <box
-                            backgroundColor={active() ? theme.background.formfield.focused : theme.background.default}
+                            backgroundColor={
+                              active() ? themeV2.background.formfield.focused : themeV2.background.default
+                            }
                            paddingRight={1}
                          >
                            <text
-                              fg={active() ? theme.text.formfield.focused : theme.text.formfield.default}
+                              fg={active() ? themeV2.text.formfield.focused : themeV2.text.formfield.default}
                            >{`${i() + 1}.`}</text>
                          </box>
                          <box
-                            backgroundColor={active() ? theme.background.formfield.focused : theme.background.default}
+                            backgroundColor={
+                              active() ? themeV2.background.formfield.focused : themeV2.background.default
+                            }
                          >
                            <text
                              fg={
                                active()
-                                  ? theme.text.formfield.focused
+                                  ? themeV2.text.formfield.focused
                                  : picked()
-                                    ? theme.text.formfield.selected
-                                    : theme.text.formfield.default
+                                    ? themeV2.text.formfield.selected
+                                    : themeV2.text.formfield.default
                              }
                            >
                              {multi() ? `[${picked() ? "✓" : " "}] ${row.label}` : row.label}
                            </text>
                          </box>
                          <Show when={!multi()}>
-                            <text fg={theme.text.formfield.selected}>{picked() ? " ✓" : ""}</text>
+                            <text fg={themeV2.text.formfield.selected}>{picked() ? " ✓" : ""}</text>
                          </Show>
                        </box>
                        <Show when={row.description}>
                          <box paddingLeft={3}>
-                            <text fg={theme.text.subdued}>{row.description}</text>
+                            <text fg={themeV2.text.subdued}>{row.description}</text>
                          </box>
                        </Show>
                      </box>
@@ -839,28 +843,30 @@ export function FormPrompt(props: { form: FormWithLocation }) {
                  >
                    <box flexDirection="row">
                      <box
-                        backgroundColor={other() ? theme.background.formfield.focused : theme.background.default}
+                        backgroundColor={other() ? themeV2.background.formfield.focused : themeV2.background.default}
                        paddingRight={1}
                      >
-                        <text fg={other() ? theme.text.formfield.focused : theme.text.formfield.default}>
+                        <text fg={other() ? themeV2.text.formfield.focused : themeV2.text.formfield.default}>
                          {`${rows().length + 1}.`}
                        </text>
                      </box>
-                      <box backgroundColor={other() ? theme.background.formfield.focused : theme.background.default}>
+                      <box
+                        backgroundColor={other() ? themeV2.background.formfield.focused : themeV2.background.default}
+                      >
                        <text
                          fg={
                            other()
-                              ? theme.text.formfield.focused
+                              ? themeV2.text.formfield.focused
                              : customPicked()
-                                ? theme.text.feedback.success.default
-                                : theme.text.default
+                                ? themeV2.text.feedback.success.default
+                                : themeV2.text.default
                          }
                        >
                          {multi() ? `[${customPicked() ? "✓" : " "}] Type your own answer` : "Type your own answer"}
                        </text>
                      </box>
                      <Show when={!multi()}>
-                        <text fg={theme.text.feedback.success.default}>{customPicked() ? " ✓" : ""}</text>
+                        <text fg={themeV2.text.feedback.success.default}>{customPicked() ? " ✓" : ""}</text>
                      </Show>
                    </box>
                    <Show when={store.editing}>
@@ -876,18 +882,18 @@ export function FormPrompt(props: { form: FormWithLocation }) {
                          }}
                          initialValue={input()}
                          placeholder="Type your own answer"
-                          placeholderColor={theme.text.subdued}
+                          placeholderColor={themeV2.text.subdued}
                          minHeight={1}
                          maxHeight={6}
-                          textColor={theme.text.default}
-                          focusedTextColor={theme.text.default}
-                          cursorColor={theme.text.default}
+                          textColor={themeV2.text.default}
+                          focusedTextColor={themeV2.text.default}
+                          cursorColor={themeV2.text.default}
                        />
                      </box>
                    </Show>
                    <Show when={!store.editing && input()}>
                      <box paddingLeft={3}>
-                        <text fg={theme.text.subdued}>{input()}</text>
+                        <text fg={themeV2.text.subdued}>{input()}</text>
                      </box>
                    </Show>
                  </box>
@@ -900,7 +906,7 @@ export function FormPrompt(props: { form: FormWithLocation }) {
        <Show when={confirm()}>
          <Show when={tabbed()}>
            <box paddingLeft={1}>
-              <text fg={theme.text.default}>Review</text>
+              <text fg={themeV2.text.default}>Review</text>
            </box>
          </Show>
          <scrollbox
@@ -915,12 +921,12 @@ export function FormPrompt(props: { form: FormWithLocation }) {
                  return (
                    <box paddingLeft={1}>
                      <text>
-                        <span style={{ fg: theme.text.subdued }}>{truncate(formLabel(item), 40)}:</span>{" "}
+                        <span style={{ fg: themeV2.text.subdued }}>{truncate(formLabel(item), 40)}:</span>{" "}
                        <span
                          style={{
                            fg: acknowledged()
-                              ? theme.text.feedback.success.default
-                              : theme.text.feedback.error.default,
+                              ? themeV2.text.feedback.success.default
+                              : themeV2.text.feedback.error.default,
                          }}
                        >
                          {acknowledged() ? "Acknowledged" : "(acknowledgement required)"}
@@ -936,15 +942,15 @@ export function FormPrompt(props: { form: FormWithLocation }) {
                return (
                  <box paddingLeft={1}>
                    <text>
-                      <span style={{ fg: theme.text.subdued }}>{truncate(formLabel(item), 40)}:</span>{" "}
+                      <span style={{ fg: themeV2.text.subdued }}>{truncate(formLabel(item), 40)}:</span>{" "}
                      <span
                        style={{
                          fg:
                            invalid() || missing()
-                              ? theme.text.feedback.error.default
+                              ? themeV2.text.feedback.error.default
                              : answered()
-                                ? theme.text.default
-                                : theme.text.subdued,
+                                ? themeV2.text.default
+                                : themeV2.text.subdued,
                        }}
                      >
                        {invalid() ?? (answered() ? value() : missing() ? "(required)" : "(not answered)")}
@@ -968,41 +974,41 @@ export function FormPrompt(props: { form: FormWithLocation }) {
      >
        <box flexDirection="row" gap={2}>
          <Show when={!single()}>
-            <text fg={theme.text.default}>
-              {"⇆"} <span style={{ fg: theme.text.subdued }}>tab</span>
+            <text fg={themeV2.text.default}>
+              {"⇆"} <span style={{ fg: themeV2.text.subdued }}>tab</span>
            </text>
          </Show>
          <Show when={!confirm() && !textual() && !externalField()}>
-            <text fg={theme.text.default}>
-              {"↑↓"} <span style={{ fg: theme.text.subdued }}>select</span>
+            <text fg={themeV2.text.default}>
+              {"↑↓"} <span style={{ fg: themeV2.text.subdued }}>select</span>
            </text>
          </Show>
          <Show when={confirm() && fields().length > 0}>
-            <text fg={theme.text.default}>
-              {"↑↓"} <span style={{ fg: theme.text.subdued }}>scroll</span>
+            <text fg={themeV2.text.default}>
+              {"↑↓"} <span style={{ fg: themeV2.text.subdued }}>scroll</span>
            </text>
          </Show>
          <text
-            fg={theme.text.default}
+            fg={themeV2.text.default}
            onMouseUp={() => {
              if (renderer.getSelection()?.getSelectedText()) return
              if (confirm()) submit()
              if (externalField()) acknowledgeExternal()
            }}
          >
-            enter <span style={{ fg: theme.text.subdued }}>{actionLabel()}</span>
+            enter <span style={{ fg: themeV2.text.subdued }}>{actionLabel()}</span>
          </text>
          <Show when={externalField() && clipboard.write}>
-            <text fg={theme.text.default} onMouseUp={copyExternal}>
-              c <span style={{ fg: theme.text.subdued }}>copy</span>
+            <text fg={themeV2.text.default} onMouseUp={copyExternal}>
+              c <span style={{ fg: themeV2.text.subdued }}>copy</span>
            </text>
          </Show>
-          <text fg={theme.text.default} onMouseUp={cancel}>
-            esc <span style={{ fg: theme.text.subdued }}>dismiss</span>
+          <text fg={themeV2.text.default} onMouseUp={cancel}>
+            esc <span style={{ fg: themeV2.text.subdued }}>dismiss</span>
          </text>
        </box>
        <Show when={store.error}>
-          <text fg={theme.text.feedback.error.default}>{store.error}</text>
+          <text fg={themeV2.text.feedback.error.default}>{store.error}</text>
        </Show>
      </box>
    </box>
@@ -2,7 +2,7 @@ import { createStore } from "solid-js/store"
 import { createMemo, For, Match, Show, Switch } from "solid-js"
 import { Portal, useRenderer, useTerminalDimensions, type JSX } from "@opentui/solid"
 import type { TextareaRenderable } from "@opentui/core"
-import { useTheme, useThemes } from "../../context/theme"
+import { useTheme } from "../../context/theme"
 import type { PermissionRequest } from "@opencode-ai/client"
 import { useClient } from "../../context/client"
 import { SplitBorder } from "../../ui/border"
@@ -18,9 +18,9 @@ import { SimulationSemantics } from "../../simulation/semantics"
 type PermissionStage = "permission" | "always" | "reject"

 function EditBody(props: { file?: string; diff?: string; patch?: string }) {
-  const theme = useTheme()
-  const themes = useThemes()
-  const syntax = themes.currentSyntax
+  const themeState = useTheme()
+  const themeV2 = themeState.themeV2
+  const syntax = themeState.syntax
  const config = useConfig().data
  const dimensions = useTerminalDimensions()

@@ -45,8 +45,8 @@ function EditBody(props: { file?: string; diff?: string; patch?: string }) {
          scrollAcceleration={scrollAcceleration()}
          verticalScrollbarOptions={{
            trackOptions: {
-              backgroundColor: theme.background.default,
-              foregroundColor: theme.scrollbar.default,
+              backgroundColor: themeV2.background.default,
+              foregroundColor: themeV2.scrollbar.default,
            },
          }}
        >
@@ -58,16 +58,16 @@ function EditBody(props: { file?: string; diff?: string; patch?: string }) {
            showLineNumbers={true}
            width="100%"
            wrapMode="word"
-            fg={theme.text.default}
-            addedBg={theme.diff.background.added}
-            removedBg={theme.diff.background.removed}
-            contextBg={theme.diff.background.context}
-            addedSignColor={theme.diff.highlight.added}
-            removedSignColor={theme.diff.highlight.removed}
-            lineNumberFg={theme.diff.lineNumber.text}
-            lineNumberBg={theme.diff.background.context}
-            addedLineNumberBg={theme.diff.lineNumber.background.added}
-            removedLineNumberBg={theme.diff.lineNumber.background.removed}
+            fg={themeV2.text.default}
+            addedBg={themeV2.diff.background.added}
+            removedBg={themeV2.diff.background.removed}
+            contextBg={themeV2.diff.background.context}
+            addedSignColor={themeV2.diff.highlight.added}
+            removedSignColor={themeV2.diff.highlight.removed}
+            lineNumberFg={themeV2.diff.lineNumber.text}
+            lineNumberBg={themeV2.diff.background.context}
+            addedLineNumberBg={themeV2.diff.lineNumber.background.added}
+            removedLineNumberBg={themeV2.diff.lineNumber.background.removed}
          />
        </scrollbox>
      </Show>
@@ -76,7 +76,7 @@ function EditBody(props: { file?: string; diff?: string; patch?: string }) {
          when={props.patch}
          fallback={
            <box paddingLeft={1}>
-              <text fg={theme.text.subdued}>No diff provided</text>
+              <text fg={themeV2.text.subdued}>No diff provided</text>
            </box>
          }
        >
@@ -86,8 +86,8 @@ function EditBody(props: { file?: string; diff?: string; patch?: string }) {
              scrollAcceleration={scrollAcceleration()}
              verticalScrollbarOptions={{
                trackOptions: {
-                  backgroundColor: theme.background.default,
-                  foregroundColor: theme.scrollbar.default,
+                  backgroundColor: themeV2.background.default,
+                  foregroundColor: themeV2.scrollbar.default,
                },
              }}
            >
@@ -97,7 +97,7 @@ function EditBody(props: { file?: string; diff?: string; patch?: string }) {
                streaming={true}
                syntaxStyle={syntax()}
                content={patch()}
-                fg={theme.text.subdued}
+                fg={themeV2.text.subdued}
              />
            </scrollbox>
          )}
@@ -128,7 +128,7 @@ export function PermissionPrompt(props: { request: PermissionRequest; directory?
    return { input: undefined, metadata: undefined }
  })

-  const theme = useTheme()
+  const { themeV2 } = useTheme()

  return (
    <Switch>
@@ -140,7 +140,7 @@ export function PermissionPrompt(props: { request: PermissionRequest; directory?
          body={
            <box paddingLeft={1} gap={1}>
              <For each={permissionAlwaysLines(props.request)}>
-                {(line, index) => <text fg={index() === 0 ? theme.text.subdued : theme.text.default}>{line}</text>}
+                {(line, index) => <text fg={index() === 0 ? themeV2.text.subdued : themeV2.text.default}>{line}</text>}
              </For>
            </box>
          }
@@ -192,9 +192,9 @@ export function PermissionPrompt(props: { request: PermissionRequest; directory?
            ) : props.request.action === "external_directory" ? (
              <Show when={current.lines.length > 0}>
                <box paddingLeft={1} gap={1}>
-                  <text fg={theme.text.subdued}>Patterns</text>
+                  <text fg={themeV2.text.subdued}>Patterns</text>
                  <box>
-                    <For each={current.lines}>{(line) => <text fg={theme.text.default}>{line}</text>}</For>
+                    <For each={current.lines}>{(line) => <text fg={themeV2.text.default}>{line}</text>}</For>
                  </box>
                </box>
              </Show>
@@ -207,8 +207,8 @@ export function PermissionPrompt(props: { request: PermissionRequest; directory?
                        props.request.action === "shell" ||
                        props.request.action === "subagent" ||
                        props.request.action === "task"
-                          ? theme.text.default
-                          : theme.text.subdued
+                          ? themeV2.text.default
+                          : themeV2.text.subdued
                      }
                    >
                      {line}
@@ -221,15 +221,15 @@ export function PermissionPrompt(props: { request: PermissionRequest; directory?
          const header = () => (
            <box flexDirection="column" gap={0}>
              <box flexDirection="row" gap={1} flexShrink={0}>
-                <text fg={theme.text.feedback.warning.default}>{"△"}</text>
-                <text fg={theme.text.default}>Permission required</text>
+                <text fg={themeV2.text.feedback.warning.default}>{"△"}</text>
+                <text fg={themeV2.text.default}>Permission required</text>
              </box>
              <Show when={props.request.action !== "shell" && current.title}>
                <box flexDirection="row" gap={1} paddingLeft={2} flexShrink={0}>
-                  <text fg={theme.text.subdued} flexShrink={0}>
+                  <text fg={themeV2.text.subdued} flexShrink={0}>
                    {current.icon}
                  </text>
-                  <text fg={theme.text.default}>{current.title}</text>
+                  <text fg={themeV2.text.default}>{current.title}</text>
                </box>
              </Show>
            </box>
@@ -297,7 +297,7 @@ function RejectPrompt(props: {
  onCancel: () => void
 }) {
  let input: TextareaRenderable
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const dimensions = useTerminalDimensions()
  const narrow = createMemo(() => dimensions().width < 80)
  Keymap.createLayer(() => ({
@@ -329,18 +329,18 @@ function RejectPrompt(props: {
        role: "dialog",
        label: `Reject permission: ${props.action}`,
      }))}
-      backgroundColor={theme.background.default}
+      backgroundColor={themeV2.background.default}
      border={["left"]}
-      borderColor={theme.text.feedback.error.default}
+      borderColor={themeV2.text.feedback.error.default}
      customBorderChars={SplitBorder.customBorderChars}
    >
      <box gap={1} paddingLeft={1} paddingRight={3} paddingTop={1} paddingBottom={1}>
        <box flexDirection="row" gap={1} paddingLeft={1}>
-          <text fg={theme.text.feedback.error.default}>{"△"}</text>
-          <text fg={theme.text.default}>Reject permission</text>
+          <text fg={themeV2.text.feedback.error.default}>{"△"}</text>
+          <text fg={themeV2.text.default}>Reject permission</text>
        </box>
        <box paddingLeft={1}>
-          <text fg={theme.text.subdued}>Tell OpenCode what to do differently</text>
+          <text fg={themeV2.text.subdued}>Tell OpenCode what to do differently</text>
        </box>
      </box>
      <box
@@ -350,7 +350,7 @@ function RejectPrompt(props: {
        paddingLeft={2}
        paddingRight={3}
        paddingBottom={1}
-        backgroundColor={theme.raise(theme.background.default)}
+        backgroundColor={themeV2.raise(themeV2.background.default)}
        justifyContent={narrow() ? "flex-start" : "space-between"}
        alignItems={narrow() ? "flex-start" : "center"}
        gap={1}
@@ -369,9 +369,9 @@ function RejectPrompt(props: {
            val.traits = { status: "REJECT" }
          }}
          focused
-          textColor={theme.text.default}
-          focusedTextColor={theme.text.default}
-          cursorColor={theme.text.default}
+          textColor={themeV2.text.default}
+          focusedTextColor={themeV2.text.default}
+          cursorColor={themeV2.text.default}
        />
        <box
          id="session.permission.reject.actions"
@@ -394,8 +394,8 @@ function RejectPrompt(props: {
            }))}
            onMouseUp={() => props.onConfirm(input.plainText)}
          >
-            <text fg={theme.text.default}>
-              enter <span style={{ fg: theme.text.subdued }}>confirm</span>
+            <text fg={themeV2.text.default}>
+              enter <span style={{ fg: themeV2.text.subdued }}>confirm</span>
            </text>
          </box>
          <box
@@ -408,8 +408,8 @@ function RejectPrompt(props: {
            }))}
            onMouseUp={props.onCancel}
          >
-            <text fg={theme.text.default}>
-              esc <span style={{ fg: theme.text.subdued }}>cancel</span>
+            <text fg={themeV2.text.default}>
+              esc <span style={{ fg: themeV2.text.subdued }}>cancel</span>
            </text>
          </box>
        </box>
@@ -429,7 +429,7 @@ function Prompt<const T extends Record<string, string>>(props: {
  fullscreen?: boolean
  onSelect: (option: keyof T) => void
 }) {
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const dimensions = useTerminalDimensions()
  const keys = Object.keys(props.options) as (keyof T)[]
  const [store, setStore] = createStore({
@@ -534,9 +534,9 @@ function Prompt<const T extends Record<string, string>>(props: {
        label: props.semanticLabel ?? props.title,
        expanded: store.expanded,
      }))}
-      backgroundColor={theme.background.default}
+      backgroundColor={themeV2.background.default}
      border={["left"]}
-      borderColor={theme.background.action.primary.focused}
+      borderColor={themeV2.background.action.primary.focused}
      customBorderChars={SplitBorder.customBorderChars}
      {...(store.expanded
        ? { top: dimensions().height * -1 + 1, bottom: 1, left: 2, right: 2, position: "absolute" }
@@ -554,8 +554,8 @@ function Prompt<const T extends Record<string, string>>(props: {
          when={props.header}
          fallback={
            <box flexDirection="row" gap={1} paddingLeft={1} flexShrink={0}>
-              <text fg={theme.text.feedback.warning.default}>{"△"}</text>
-              <text fg={theme.text.default}>{props.title}</text>
+              <text fg={themeV2.text.feedback.warning.default}>{"△"}</text>
+              <text fg={themeV2.text.default}>{props.title}</text>
            </box>
          }
        >
@@ -573,7 +573,7 @@ function Prompt<const T extends Record<string, string>>(props: {
        paddingLeft={2}
        paddingRight={3}
        paddingBottom={1}
-        backgroundColor={theme.raise(theme.background.default)}
+        backgroundColor={themeV2.raise(themeV2.background.default)}
        justifyContent={narrow() ? "flex-start" : "space-between"}
        alignItems={narrow() ? "flex-start" : "center"}
      >
@@ -604,8 +604,8 @@ function Prompt<const T extends Record<string, string>>(props: {
                paddingRight={1}
                backgroundColor={
                  option === store.selected
-                    ? theme.background.action.primary.focused
-                    : theme.background.action.primary.default
+                    ? themeV2.background.action.primary.focused
+                    : themeV2.background.action.primary.default
                }
                onMouseOver={() => setStore("selected", option)}
                onMouseUp={() => {
@@ -614,7 +614,11 @@ function Prompt<const T extends Record<string, string>>(props: {
                }}
              >
                <text
-                  fg={option === store.selected ? theme.text.action.primary.focused : theme.text.action.primary.default}
+                  fg={
+                    option === store.selected
+                      ? themeV2.text.action.primary.focused
+                      : themeV2.text.action.primary.default
+                  }
                >
                  {props.options[option]}
                </text>
@@ -624,15 +628,15 @@ function Prompt<const T extends Record<string, string>>(props: {
        </box>
        <box flexDirection="row" gap={2} flexShrink={0}>
          <Show when={props.fullscreen}>
-            <text fg={theme.text.default}>
-              {shortcuts.get("permission.prompt.fullscreen")} <span style={{ fg: theme.text.subdued }}>{hint()}</span>
+            <text fg={themeV2.text.default}>
+              {shortcuts.get("permission.prompt.fullscreen")} <span style={{ fg: themeV2.text.subdued }}>{hint()}</span>
            </text>
          </Show>
-          <text fg={theme.text.default}>
-            {"⇆"} <span style={{ fg: theme.text.subdued }}>select</span>
+          <text fg={themeV2.text.default}>
+            {"⇆"} <span style={{ fg: themeV2.text.subdued }}>select</span>
          </text>
-          <text fg={theme.text.default}>
-            enter <span style={{ fg: theme.text.subdued }}>confirm</span>
+          <text fg={themeV2.text.default}>
+            enter <span style={{ fg: themeV2.text.subdued }}>confirm</span>
          </text>
        </box>
      </box>
@@ -1,14 +1,16 @@
 import { useData } from "../../context/data"
 import { createMemo, Show } from "solid-js"
-import { useThemes } from "../../context/theme"
+import { useTheme } from "../../context/theme"
 import { useConfig } from "../../config"
+import { usePluginRuntime } from "../../plugin/runtime"
 import { PluginSlot } from "../../plugin/context"

 import { getScrollAcceleration } from "../../util/scroll"

 export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
+  const pluginRuntime = usePluginRuntime()
  const data = useData()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const config = useConfig().data
  const session = createMemo(() => data.session.get(props.sessionID))
  const scrollAcceleration = createMemo(() => getScrollAcceleration(config))
@@ -16,7 +18,7 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
  return (
    <Show when={session()}>
      <box
-        backgroundColor={theme.background.default}
+        backgroundColor={themeV2.background.default}
        width={42}
        height="100%"
        paddingTop={1}
@@ -30,20 +32,27 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
          scrollAcceleration={scrollAcceleration()}
          verticalScrollbarOptions={{
            trackOptions: {
-              backgroundColor: theme.background.default,
-              foregroundColor: theme.scrollbar.default,
+              backgroundColor: themeV2.background.default,
+              foregroundColor: themeV2.scrollbar.default,
            },
          }}
        >
          <box flexShrink={0} gap={1} paddingRight={1}>
-            <box paddingRight={1}>
-              <text fg={theme.text.default}>
-                <b>{session()!.title}</b>
-              </text>
-              <Show when={session()!.location.workspaceID}>
-                <text fg={theme.text.subdued}>{session()!.location.workspaceID}</text>
-              </Show>
-            </box>
+            <pluginRuntime.Slot
+              name="sidebar_title"
+              mode="single_winner"
+              session_id={props.sessionID}
+              title={session()!.title}
+            >
+              <box paddingRight={1}>
+                <text fg={themeV2.text.default}>
+                  <b>{session()!.title}</b>
+                </text>
+                <Show when={session()!.location.workspaceID}>
+                  <text fg={themeV2.text.subdued}>{session()!.location.workspaceID}</text>
+                </Show>
+              </box>
+            </pluginRuntime.Slot>
            <PluginSlot name="sidebar.content" input={{ sessionID: props.sessionID }} mode="all" />
          </box>
        </scrollbox>
@@ -1,7 +1,7 @@
 import { createMemo, createSignal, Show } from "solid-js"
 import { useRouteData } from "../../context/route"
 import { useData } from "../../context/data"
-import { useThemes } from "../../context/theme"
+import { useTheme } from "../../context/theme"
 import { SplitBorder } from "../../ui/border"
 import { Locale } from "../../util/locale"
 import { useTerminalDimensions } from "@opentui/solid"
@@ -42,7 +42,7 @@ export function SubagentFooter() {
    }
  })

-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const keymap = Keymap.use()
  const shortcuts = Keymap.useShortcuts()
  const [hover, setHover] = createSignal<"parent" | "prev" | "next" | null>(null)
@@ -57,18 +57,18 @@ export function SubagentFooter() {
        paddingRight={1}
        {...SplitBorder}
        border={["left"]}
-        borderColor={theme.border.default}
+        borderColor={themeV2.border.default}
        flexShrink={0}
-        backgroundColor={theme.background.default}
+        backgroundColor={themeV2.background.default}
      >
        <box flexDirection="row" justifyContent="space-between" gap={1}>
          <box flexDirection="row" gap={1}>
-            <text fg={theme.text.default}>
+            <text fg={themeV2.text.default}>
              <b>{subagentInfo()}</b>
            </text>
            <Show when={usage()}>
              {(item) => (
-                <text fg={theme.text.subdued} wrapMode="none">
+                <text fg={themeV2.text.subdued} wrapMode="none">
                  {[item().context, item().cost].filter(Boolean).join(" · ")}
                </text>
              )}
@@ -80,31 +80,35 @@ export function SubagentFooter() {
              onMouseOut={() => setHover(null)}
              onMouseUp={() => keymap.dispatch("session.parent")}
              backgroundColor={
-                hover() === "parent" ? theme.background.action.primary.hovered : theme.background.default
+                hover() === "parent" ? themeV2.background.action.primary.hovered : themeV2.background.default
              }
            >
-              <text fg={theme.text.default}>
-                Parent <span style={{ fg: theme.text.subdued }}>{shortcuts.get("session.parent")}</span>
+              <text fg={themeV2.text.default}>
+                Parent <span style={{ fg: themeV2.text.subdued }}>{shortcuts.get("session.parent")}</span>
              </text>
            </box>
            <box
              onMouseOver={() => setHover("prev")}
              onMouseOut={() => setHover(null)}
              onMouseUp={() => keymap.dispatch("session.child.previous")}
-              backgroundColor={hover() === "prev" ? theme.background.action.primary.hovered : theme.background.default}
+              backgroundColor={
+                hover() === "prev" ? themeV2.background.action.primary.hovered : themeV2.background.default
+              }
            >
-              <text fg={theme.text.default}>
-                Prev <span style={{ fg: theme.text.subdued }}>{shortcuts.get("session.child.previous")}</span>
+              <text fg={themeV2.text.default}>
+                Prev <span style={{ fg: themeV2.text.subdued }}>{shortcuts.get("session.child.previous")}</span>
              </text>
            </box>
            <box
              onMouseOver={() => setHover("next")}
              onMouseOut={() => setHover(null)}
              onMouseUp={() => keymap.dispatch("session.child.next")}
-              backgroundColor={hover() === "next" ? theme.background.action.primary.hovered : theme.background.default}
+              backgroundColor={
+                hover() === "next" ? themeV2.background.action.primary.hovered : themeV2.background.default
+              }
            >
-              <text fg={theme.text.default}>
-                Next <span style={{ fg: theme.text.subdued }}>{shortcuts.get("session.child.next")}</span>
+              <text fg={themeV2.text.default}>
+                Next <span style={{ fg: themeV2.text.subdued }}>{shortcuts.get("session.child.next")}</span>
              </text>
            </box>
          </box>
@@ -1,235 +0,0 @@
-import { createEffect, createSignal, onCleanup, type Accessor } from "solid-js"
-
-type AnimatableValue = number | readonly number[]
-type AnimatableTarget = Record<string, AnimatableValue>
-type Ease = (progress: number) => number
-
-type SpringTransition = {
-  type: "spring"
-  visualDuration: number
-  restDelta: number
-  restSpeed: number
-}
-
-type TweenTransition = {
-  type: "tween"
-  duration: number
-  ease: Ease
-}
-
-type Transition = SpringTransition | TweenTransition
-
-type ValueState = {
-  scalar: boolean
-  value: number[]
-  target: number[]
-  velocity: number[]
-  from: number[]
-}
-
-type AnimationTask = (now: number) => boolean
-
-const tasks = new Set<AnimationTask>()
-let timer: ReturnType<typeof setInterval> | undefined
-
-const smoothstep = (progress: number) => progress * progress * (3 - 2 * progress)
-
-export function spring(options: { visualDuration: number; restDelta?: number; restSpeed?: number }): Transition {
-  return {
-    type: "spring",
-    visualDuration: options.visualDuration,
-    restDelta: options.restDelta ?? 0.002,
-    restSpeed: options.restSpeed ?? 0.002,
-  }
-}
-
-export function tween(options: { duration: number; ease?: Ease }): Transition {
-  return {
-    type: "tween",
-    duration: options.duration,
-    ease: options.ease ?? smoothstep,
-  }
-}
-
-export function createAnimatable<T extends AnimatableTarget>(
-  initial: T,
-  options: {
-    transition: Transition
-    enabled?: Accessor<boolean>
-  },
-) {
-  const enabled = options.enabled ?? (() => true)
-  const state = new Map<string, ValueState>()
-  const [value, setValue] = createSignal(clone(initial), { equals: false })
-  let target = clone(initial)
-  let started = performance.now()
-  let previous = started
-
-  rebuild(initial)
-
-  const step: AnimationTask = (now) => {
-    if (!enabled()) {
-      jump(target)
-      return false
-    }
-
-    const delta = Math.min(0.05, (now - previous) / 1_000)
-    previous = now
-    const moving = options.transition.type === "spring" ? advanceSpring(delta) : advanceTween(now)
-    if (!moving) {
-      jump(target)
-      return false
-    }
-    setValue(() => read())
-    return true
-  }
-
-  function animate(next: T) {
-    if (sameTarget(next)) return
-    target = clone(next)
-    if (!enabled() || !sameShape(next)) return jump(next)
-
-    started = performance.now()
-    previous = started
-    for (const [key, current] of state) {
-      current.from = [...current.value]
-      current.target = values(next[key]!)
-    }
-    if (settled()) return jump(next)
-    schedule(step)
-  }
-
-  function jump(next: T) {
-    target = clone(next)
-    unschedule(step)
-    rebuild(next)
-    setValue(() => clone(next))
-  }
-
-  function stop() {
-    unschedule(step)
-  }
-
-  function rebuild(next: T) {
-    state.clear()
-    for (const [key, nextValue] of Object.entries(next)) {
-      const value = values(nextValue)
-      state.set(key, {
-        scalar: typeof nextValue === "number",
-        value,
-        target: [...value],
-        velocity: value.map(() => 0),
-        from: [...value],
-      })
-    }
-    started = performance.now()
-    previous = started
-  }
-
-  function sameShape(next: T) {
-    const entries = Object.entries(next)
-    if (entries.length !== state.size) return false
-    return entries.every(([key, nextValue]) => {
-      const current = state.get(key)
-      if (!current || current.scalar !== (typeof nextValue === "number")) return false
-      return current.value.length === values(nextValue).length
-    })
-  }
-
-  function sameTarget(next: T) {
-    if (!sameShape(next)) return false
-    return Object.entries(next).every(([key, value]) =>
-      values(value).every((part, index) => part === state.get(key)!.target[index]),
-    )
-  }
-
-  function settled() {
-    return [...state.values()].every(
-      (current) =>
-        current.value.every((value, index) => value === current.target[index]) &&
-        current.velocity.every((velocity) => velocity === 0),
-    )
-  }
-
-  function advanceSpring(delta: number) {
-    const transition = options.transition
-    if (transition.type !== "spring") return false
-    const frequency = (2 * Math.PI) / (Math.max(0.001, transition.visualDuration) * 1.2)
-    let moving = false
-
-    for (const current of state.values()) {
-      current.value.forEach((value, index) => {
-        const target = current.target[index]!
-        const velocity = current.velocity[index]!
-        const offset = value - target
-        const decay = Math.exp(-frequency * delta)
-        const nextVelocity = velocity + frequency * offset
-        current.value[index] = target + (offset + nextVelocity * delta) * decay
-        current.velocity[index] = (velocity - frequency * nextVelocity * delta) * decay
-        moving ||=
-          Math.abs(current.value[index]! - target) > transition.restDelta ||
-          Math.abs(current.velocity[index]!) > transition.restSpeed
-      })
-    }
-    return moving
-  }
-
-  function advanceTween(now: number) {
-    const transition = options.transition
-    if (transition.type !== "tween") return false
-    const progress = Math.min(1, (now - started) / 1_000 / Math.max(0.001, transition.duration))
-    const eased = transition.ease(progress)
-    for (const current of state.values())
-      current.value.forEach((_, index) => {
-        const from = current.from[index]!
-        current.value[index] = from + (current.target[index]! - from) * eased
-        current.velocity[index] = 0
-      })
-    return progress < 1
-  }
-
-  function read() {
-    return Object.fromEntries(
-      [...state].map(([key, current]) => [key, current.scalar ? current.value[0]! : [...current.value]]),
-    ) as T
-  }
-
-  createEffect(() => {
-    if (enabled()) return
-    jump(target)
-  })
-  onCleanup(stop)
-
-  return { value, animate, jump }
-}
-
-function values(value: AnimatableValue) {
-  return typeof value === "number" ? [value] : [...value]
-}
-
-function clone<T extends AnimatableTarget>(target: T) {
-  return Object.fromEntries(
-    Object.entries(target).map(([key, value]) => [key, typeof value === "number" ? value : [...value]]),
-  ) as T
-}
-
-function schedule(task: AnimationTask) {
-  tasks.add(task)
-  if (timer) return
-  timer = setInterval(tick, 16)
-}
-
-function unschedule(task: AnimationTask) {
-  tasks.delete(task)
-  if (tasks.size > 0 || !timer) return
-  clearInterval(timer)
-  timer = undefined
-}
-
-function tick() {
-  const now = performance.now()
-  for (const task of tasks) if (!task(now)) tasks.delete(task)
-  if (tasks.size > 0 || !timer) return
-  clearInterval(timer)
-  timer = undefined
-}
@@ -1,6 +1,6 @@
 import { TextAttributes } from "@opentui/core"
 import { Keymap } from "../context/keymap"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { useDialog, type DialogContext } from "./dialog"

 export type DialogAlertProps = {
@@ -11,7 +11,7 @@ export type DialogAlertProps = {

 export function DialogAlert(props: DialogAlertProps) {
  const dialog = useDialog()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")

  Keymap.createLayer(() => ({
    mode: "modal",
@@ -30,27 +30,27 @@ export function DialogAlert(props: DialogAlertProps) {
  return (
    <box paddingLeft={2} paddingRight={2} gap={1}>
      <box flexDirection="row" justifyContent="space-between">
-        <text attributes={TextAttributes.BOLD} fg={theme.text.default}>
+        <text attributes={TextAttributes.BOLD} fg={themeV2.text.default}>
          {props.title}
        </text>
-        <text fg={theme.text.subdued} onMouseUp={() => dialog.clear()}>
+        <text fg={themeV2.text.subdued} onMouseUp={() => dialog.clear()}>
          esc
        </text>
      </box>
      <box paddingBottom={1}>
-        <text fg={theme.text.subdued}>{props.message}</text>
+        <text fg={themeV2.text.subdued}>{props.message}</text>
      </box>
      <box flexDirection="row" justifyContent="flex-end" paddingBottom={1}>
        <box
          paddingLeft={3}
          paddingRight={3}
-          backgroundColor={theme.background.action.primary.focused}
+          backgroundColor={themeV2.background.action.primary.focused}
          onMouseUp={() => {
            props.onConfirm?.()
            dialog.clear()
          }}
        >
-          <text fg={theme.text.action.primary.focused}>ok</text>
+          <text fg={themeV2.text.action.primary.focused}>ok</text>
        </box>
      </box>
    </box>
@@ -1,6 +1,6 @@
 import { TextAttributes } from "@opentui/core"
 import { Keymap } from "../context/keymap"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { useDialog, type DialogContext } from "./dialog"
 import { createStore } from "solid-js/store"
 import { For } from "solid-js"
@@ -21,7 +21,7 @@ export type DialogConfirmResult = boolean | undefined

 export function DialogConfirm(props: DialogConfirmProps) {
  const dialog = useDialog()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const [store, setStore] = createStore({
    active: "confirm" as "confirm" | "cancel",
  })
@@ -60,15 +60,15 @@ export function DialogConfirm(props: DialogConfirmProps) {
  return (
    <box paddingLeft={2} paddingRight={2} gap={1}>
      <box flexDirection="row" justifyContent="space-between">
-        <text attributes={TextAttributes.BOLD} fg={theme.text.default}>
+        <text attributes={TextAttributes.BOLD} fg={themeV2.text.default}>
          {props.title}
        </text>
-        <text fg={theme.text.subdued} onMouseUp={() => dialog.clear()}>
+        <text fg={themeV2.text.subdued} onMouseUp={() => dialog.clear()}>
          esc
        </text>
      </box>
      <box paddingBottom={1}>
-        <text fg={theme.text.subdued}>{props.message}</text>
+        <text fg={themeV2.text.subdued}>{props.message}</text>
      </box>
      <box flexDirection="row" justifyContent="flex-end" paddingBottom={1}>
        <For each={["cancel", "confirm"] as const}>
@@ -76,14 +76,14 @@ export function DialogConfirm(props: DialogConfirmProps) {
            <box
              paddingLeft={1}
              paddingRight={1}
-              backgroundColor={key === store.active ? theme.background.action.primary.focused : undefined}
+              backgroundColor={key === store.active ? themeV2.background.action.primary.focused : undefined}
              onMouseUp={() => {
                if (key === "confirm") props.onConfirm?.()
                if (key === "cancel") props.onCancel?.()
                dialog.clear()
              }}
            >
-              <text fg={key === store.active ? theme.text.action.primary.focused : theme.text.subdued}>
+              <text fg={key === store.active ? themeV2.text.action.primary.focused : themeV2.text.subdued}>
                {Locale.titlecase(props.label?.[key] ?? key)}
              </text>
            </box>
@@ -1,6 +1,6 @@
 import { TextAttributes } from "@opentui/core"
 import { Keymap } from "../context/keymap"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { useDialog, type DialogContext } from "./dialog"
 import { createStore } from "solid-js/store"
 import { For, Show } from "solid-js"
@@ -17,8 +17,8 @@ type Active = ExportFormat | "thinking" | "copy" | "export"

 export function DialogExportOptions(props: DialogExportOptionsProps) {
  const dialog = useDialog()
-  const theme = useThemes().contextual("elevated")
-  const overlayTheme = useThemes().contextual("overlay")
+  const { themeV2 } = useTheme().contextual("elevated")
+  const { themeV2: overlayTheme } = useTheme().contextual("overlay")
  const [store, setStore] = createStore({
    format: "markdown" as ExportFormat,
    thinking: props.defaultThinking,
@@ -73,15 +73,15 @@ export function DialogExportOptions(props: DialogExportOptionsProps) {
  return (
    <box paddingLeft={2} paddingRight={2} gap={1}>
      <box flexDirection="row" justifyContent="space-between">
-        <text attributes={TextAttributes.BOLD} fg={theme.text.default}>
+        <text attributes={TextAttributes.BOLD} fg={themeV2.text.default}>
          Export session
        </text>
-        <text fg={theme.text.subdued} onMouseUp={() => dialog.clear()}>
+        <text fg={themeV2.text.subdued} onMouseUp={() => dialog.clear()}>
          esc
        </text>
      </box>
      <box flexDirection="row" gap={1}>
-        <text fg={theme.text.default}>Export as:</text>
+        <text fg={themeV2.text.default}>Export as:</text>
        <box flexDirection="row" gap={1}>
          <For each={["markdown", "json"] as const}>
            {(format) => (
@@ -90,20 +90,20 @@ export function DialogExportOptions(props: DialogExportOptionsProps) {
                paddingRight={1}
                backgroundColor={
                  store.active === format
-                    ? theme.background.formfield.focused
+                    ? themeV2.background.formfield.focused
                    : store.format === format
-                      ? theme.background.formfield.selected
-                      : theme.background.formfield.default
+                      ? themeV2.background.formfield.selected
+                      : themeV2.background.formfield.default
                }
                onMouseUp={() => selectFormat(format)}
              >
                <text
                  fg={
                    store.active === format
-                      ? theme.text.formfield.focused
+                      ? themeV2.text.formfield.focused
                      : store.format === format
-                        ? theme.text.formfield.selected
-                        : theme.text.formfield.default
+                        ? themeV2.text.formfield.selected
+                        : themeV2.text.formfield.default
                  }
                >
                  {store.format === format ? "◉" : "○"} {format === "markdown" ? "Markdown" : "JSON"}
@@ -119,10 +119,10 @@ export function DialogExportOptions(props: DialogExportOptionsProps) {
          gap={1}
          backgroundColor={
            store.active === "thinking"
-              ? theme.background.formfield.focused
+              ? themeV2.background.formfield.focused
              : store.thinking
-                ? theme.background.formfield.selected
-                : theme.background.formfield.default
+                ? themeV2.background.formfield.selected
+                : themeV2.background.formfield.default
          }
          onMouseUp={() => {
            setStore("active", "thinking")
@@ -132,10 +132,10 @@ export function DialogExportOptions(props: DialogExportOptionsProps) {
          <text
            fg={
              store.active === "thinking"
-                ? theme.text.formfield.focused
+                ? themeV2.text.formfield.focused
                : store.thinking
-                  ? theme.text.formfield.selected
-                  : theme.text.formfield.default
+                  ? themeV2.text.formfield.selected
+                  : themeV2.text.formfield.default
            }
          >
            {store.thinking ? "[x]" : "[ ]"}
@@ -143,10 +143,10 @@ export function DialogExportOptions(props: DialogExportOptionsProps) {
          <text
            fg={
              store.active === "thinking"
-                ? theme.text.formfield.focused
+                ? themeV2.text.formfield.focused
                : store.thinking
-                  ? theme.text.formfield.selected
-                  : theme.text.formfield.default
+                  ? themeV2.text.formfield.selected
+                  : themeV2.text.formfield.default
            }
          >
            Include thinking
@@ -167,12 +167,14 @@ export function DialogExportOptions(props: DialogExportOptionsProps) {
          paddingRight={4}
          backgroundColor={
            store.active === "export"
-              ? theme.background.action.primary.focused
-              : theme.background.action.primary.default
+              ? themeV2.background.action.primary.focused
+              : themeV2.background.action.primary.default
          }
          onMouseUp={() => confirm("export")}
        >
-          <text fg={store.active === "export" ? theme.text.action.primary.focused : theme.text.action.primary.default}>
+          <text
+            fg={store.active === "export" ? themeV2.text.action.primary.focused : themeV2.text.action.primary.default}
+          >
            Export
          </text>
        </box>
@@ -1,11 +1,11 @@
 import { TextAttributes } from "@opentui/core"
 import { Keymap } from "../context/keymap"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { useDialog, type DialogContext } from "./dialog"

 export function DialogExportResult(props: { path: string; onClose?: () => void }) {
  const dialog = useDialog()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")

  const close = () => {
    props.onClose?.()
@@ -27,24 +27,24 @@ export function DialogExportResult(props: { path: string; onClose?: () => void }
  return (
    <box paddingLeft={2} paddingRight={2} gap={1}>
      <box flexDirection="row" justifyContent="space-between">
-        <text attributes={TextAttributes.BOLD} fg={theme.text.default}>
+        <text attributes={TextAttributes.BOLD} fg={themeV2.text.default}>
          Session exported
        </text>
-        <text fg={theme.text.subdued} onMouseUp={close}>
+        <text fg={themeV2.text.subdued} onMouseUp={close}>
          esc
        </text>
      </box>
      <box>
-        <text fg={theme.text.default}>{props.path}</text>
+        <text fg={themeV2.text.default}>{props.path}</text>
      </box>
      <box flexDirection="row" justifyContent="flex-end" gap={1} paddingBottom={1}>
        <box
          paddingLeft={3}
          paddingRight={3}
-          backgroundColor={theme.background.action.primary.focused}
+          backgroundColor={themeV2.background.action.primary.focused}
          onMouseUp={close}
        >
-          <text fg={theme.text.action.primary.focused}>Close</text>
+          <text fg={themeV2.text.action.primary.focused}>Close</text>
        </box>
      </box>
    </box>
@@ -1,11 +1,11 @@
 import { TextAttributes } from "@opentui/core"
 import { Keymap } from "../context/keymap"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { useDialog } from "./dialog"

 export function DialogHelp() {
  const dialog = useDialog()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const shortcuts = Keymap.useShortcuts()

  Keymap.createLayer(() => ({
@@ -19,15 +19,15 @@ export function DialogHelp() {
  return (
    <box paddingLeft={2} paddingRight={2} gap={1}>
      <box flexDirection="row" justifyContent="space-between">
-        <text attributes={TextAttributes.BOLD} fg={theme.text.default}>
+        <text attributes={TextAttributes.BOLD} fg={themeV2.text.default}>
          Help
        </text>
-        <text fg={theme.text.subdued} onMouseUp={() => dialog.clear()}>
+        <text fg={themeV2.text.subdued} onMouseUp={() => dialog.clear()}>
          esc/enter
        </text>
      </box>
      <box paddingBottom={1}>
-        <text fg={theme.text.subdued}>
+        <text fg={themeV2.text.subdued}>
          Press {shortcuts.get("command.palette.show")} to see all available actions and commands in any context.
        </text>
      </box>
@@ -35,10 +35,10 @@ export function DialogHelp() {
        <box
          paddingLeft={3}
          paddingRight={3}
-          backgroundColor={theme.background.action.primary.focused}
+          backgroundColor={themeV2.background.action.primary.focused}
          onMouseUp={() => dialog.clear()}
        >
-          <text fg={theme.text.action.primary.focused}>ok</text>
+          <text fg={themeV2.text.action.primary.focused}>ok</text>
        </box>
      </box>
    </box>
@@ -1,6 +1,6 @@
 import { TextareaRenderable, TextAttributes } from "@opentui/core"
 import { Keymap } from "../context/keymap"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { useDialog, type DialogContext } from "./dialog"
 import { Show, createEffect, createSignal, onMount, type JSX } from "solid-js"
 import { Spinner } from "../component/spinner"
@@ -18,7 +18,7 @@ export type DialogPromptProps = {

 export function DialogPrompt(props: DialogPromptProps) {
  const dialog = useDialog()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const shortcuts = Keymap.useShortcuts()
  const [textareaTarget, setTextareaTarget] = createSignal<TextareaRenderable>()
  let textarea: TextareaRenderable
@@ -74,10 +74,10 @@ export function DialogPrompt(props: DialogPromptProps) {
  return (
    <box paddingLeft={2} paddingRight={2} gap={1}>
      <box flexDirection="row" justifyContent="space-between">
-        <text attributes={TextAttributes.BOLD} fg={theme.text.default}>
+        <text attributes={TextAttributes.BOLD} fg={themeV2.text.default}>
          {props.title}
        </text>
-        <text fg={theme.text.subdued} onMouseUp={() => dialog.clear()}>
+        <text fg={themeV2.text.subdued} onMouseUp={() => dialog.clear()}>
          esc
        </text>
      </box>
@@ -91,20 +91,20 @@ export function DialogPrompt(props: DialogPromptProps) {
          }}
          initialValue={props.value}
          placeholder={props.placeholder ?? "Enter text"}
-          placeholderColor={theme.text.subdued}
-          textColor={props.busy ? theme.text.formfield.disabled : theme.text.formfield.default}
-          focusedTextColor={props.busy ? theme.text.formfield.disabled : theme.text.formfield.default}
-          cursorColor={props.busy ? theme.background.formfield.disabled : theme.text.default}
+          placeholderColor={themeV2.text.subdued}
+          textColor={props.busy ? themeV2.text.formfield.disabled : themeV2.text.formfield.default}
+          focusedTextColor={props.busy ? themeV2.text.formfield.disabled : themeV2.text.formfield.default}
+          cursorColor={props.busy ? themeV2.background.formfield.disabled : themeV2.text.default}
        />
        <Show when={props.busy}>
-          <Spinner color={theme.text.subdued}>{props.busyText ?? "Working..."}</Spinner>
+          <Spinner color={themeV2.text.subdued}>{props.busyText ?? "Working..."}</Spinner>
        </Show>
      </box>
      <box paddingBottom={1} gap={1} flexDirection="row">
-        <Show when={!props.busy} fallback={<text fg={theme.text.subdued}>processing...</text>}>
+        <Show when={!props.busy} fallback={<text fg={themeV2.text.subdued}>processing...</text>}>
          <Show when={shortcuts.get("dialog.prompt.submit")}>
-            <text fg={theme.text.default}>
-              {shortcuts.get("dialog.prompt.submit")} <span style={{ fg: theme.text.subdued }}>submit</span>
+            <text fg={themeV2.text.default}>
+              {shortcuts.get("dialog.prompt.submit")} <span style={{ fg: themeV2.text.subdued }}>submit</span>
            </text>
          </Show>
        </Show>
@@ -1,6 +1,6 @@
 import { InputRenderable, RGBA, ScrollBoxRenderable, TextAttributes } from "@opentui/core"
 import { Keymap, type KeymapCommand } from "../context/keymap"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { entries, filter, flatMap, groupBy, pipe } from "remeda"
 import { batch, createEffect, createMemo, createSignal, For, Show, type JSX, on, onCleanup } from "solid-js"
 import { createStore } from "solid-js/store"
@@ -95,9 +95,7 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
  type VisibleAction = (Action & { label: string }) | FooterHint

  const dialog = useDialog()
-  const themes = useThemes()
-  const theme = themes.contextual("elevated")
-  const mode = themes.mode
+  const { themeV2, mode } = useTheme().contextual("elevated")
  const config = useConfig().data
  const scrollAcceleration = createMemo(() => getScrollAcceleration(config))

@@ -524,10 +522,10 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
    if (!isActionItem(action.item))
      return (
        <text>
-          <span style={{ fg: theme.text.default }}>
+          <span style={{ fg: themeV2.text.default }}>
            <b>{action.item.title}</b>{" "}
          </span>
-          <span style={{ fg: theme.text.subdued }}>{action.item.label}</span>
+          <span style={{ fg: themeV2.text.subdued }}>{action.item.label}</span>
        </text>
      )
    const item = action.item
@@ -536,16 +534,16 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
    return (
      <box
        flexDirection="row"
-        backgroundColor={active() ? theme.background.action.primary.focused : RGBA.fromInts(0, 0, 0, 0)}
+        backgroundColor={active() ? themeV2.background.action.primary.focused : RGBA.fromInts(0, 0, 0, 0)}
        onMouseUp={() => trigger(item)}
      >
        <text
          fg={
            disabled()
-              ? theme.text.action.primary.disabled
+              ? themeV2.text.action.primary.disabled
              : active()
-                ? theme.text.action.primary.focused
-                : theme.text.default
+                ? themeV2.text.action.primary.focused
+                : themeV2.text.default
          }
          attributes={active() ? TextAttributes.BOLD : undefined}
        >
@@ -554,10 +552,10 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
        <text
          fg={
            disabled()
-              ? theme.text.action.primary.disabled
+              ? themeV2.text.action.primary.disabled
              : active()
-                ? theme.text.action.primary.focused
-                : theme.text.subdued
+                ? themeV2.text.action.primary.focused
+                : themeV2.text.subdued
          }
        >
          {" " + item.label}
@@ -571,11 +569,11 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
      <box paddingLeft={4} paddingRight={4}>
        <box flexDirection="row" justifyContent="space-between">
          {props.titleView ?? (
-            <text fg={theme.text.default} attributes={TextAttributes.BOLD}>
+            <text fg={themeV2.text.default} attributes={TextAttributes.BOLD}>
              {props.title}
            </text>
          )}
-          <text fg={theme.text.subdued} onMouseUp={() => dialog.clear()}>
+          <text fg={themeV2.text.subdued} onMouseUp={() => dialog.clear()}>
            esc
          </text>
        </box>
@@ -589,9 +587,9 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
                  props.onFilter?.(e)
                })
              }}
-              focusedBackgroundColor={theme.background.formfield.focused}
-              cursorColor={theme.text.formfield.focused}
-              focusedTextColor={theme.text.formfield.focused}
+              focusedBackgroundColor={themeV2.background.formfield.focused}
+              cursorColor={themeV2.text.formfield.focused}
+              focusedTextColor={themeV2.text.formfield.focused}
              ref={(r) => {
                input = r
                input.traits = { status: "FILTER" }
@@ -602,7 +600,7 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
                }, 1)
              }}
              placeholder={props.placeholder ?? "Search"}
-              placeholderColor={theme.text.subdued}
+              placeholderColor={themeV2.text.subdued}
            />
          </box>
        </Show>
@@ -616,14 +614,14 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
              fallback={
                props.emptyView ?? (
                  <box paddingLeft={4} paddingRight={4} paddingTop={1}>
-                    <text fg={theme.text.subdued}>No items available</text>
+                    <text fg={themeV2.text.subdued}>No items available</text>
                  </box>
                )
              }
            >
              {props.noMatchView ?? (
                <box paddingLeft={4} paddingRight={4} paddingTop={1}>
-                  <text fg={theme.text.subdued}>No results found</text>
+                  <text fg={themeV2.text.subdued}>No results found</text>
                </box>
              )}
            </Show>
@@ -645,7 +643,10 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
                      <Show
                        when={options[0]?.categoryView}
                        fallback={
-                          <text fg={theme.hue.accent[mode() === "light" ? 800 : 200]} attributes={TextAttributes.BOLD}>
+                          <text
+                            fg={themeV2.hue.accent[mode() === "light" ? 800 : 200]}
+                            attributes={TextAttributes.BOLD}
+                          >
                            {category}
                          </text>
                        }
@@ -694,8 +695,8 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
                            backgroundColor={
                              active()
                                ? actionFocused()
-                                  ? theme.background.surface.overlay
-                                  : (option.bg ?? theme.background.action.primary.focused)
+                                  ? themeV2.background.surface.overlay
+                                  : (option.bg ?? themeV2.background.action.primary.focused)
                                : RGBA.fromInts(0, 0, 0, 0)
                            }
                          >
@@ -724,7 +725,7 @@ export function DialogSelect<T>(props: DialogSelectProps<T>) {
                            {(detail) => (
                              <box paddingLeft={3} paddingRight={3}>
                                <text
-                                  fg={option.detailsColor ?? theme.text.subdued}
+                                  fg={option.detailsColor ?? themeV2.text.subdued}
                                  wrapMode={option.detailsWrap ? "word" : "none"}
                                >
                                  {option.detailsWrap
@@ -773,12 +774,12 @@ function Option(props: {
  activeColor?: RGBA
  onMouseOver?: () => void
 }) {
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const text = createMemo(() => {
-    if (props.active && !props.muted) return props.activeColor ?? theme.text.action.primary.focused
-    if (props.muted && (props.active || props.current)) return theme.text.subdued
-    if (props.current) return theme.text.formfield.selected
-    return theme.text.default
+    if (props.active && !props.muted) return props.activeColor ?? themeV2.text.action.primary.focused
+    if (props.muted && (props.active || props.current)) return themeV2.text.subdued
+    if (props.current) return themeV2.text.formfield.selected
+    return themeV2.text.default
  })

  return (
@@ -808,14 +809,14 @@ function Option(props: {
              ? Locale.truncateLeft(props.title, props.titleWidth ?? 61)
              : Locale.truncate(props.title, props.titleWidth ?? 61))}
        <Show when={props.description}>
-          <span style={{ fg: props.active && !props.muted ? text() : theme.text.subdued }}>
+          <span style={{ fg: props.active && !props.muted ? text() : themeV2.text.subdued }}>
            {" " + props.description}
          </span>
        </Show>
      </text>
      <Show when={props.footer}>
        <box flexShrink={0}>
-          <text fg={props.active && !props.muted ? text() : theme.text.subdued}>{props.footer}</text>
+          <text fg={props.active && !props.muted ? text() : themeV2.text.subdued}>{props.footer}</text>
        </box>
      </Show>
    </>
@@ -1,7 +1,7 @@
 import { useRenderer, useTerminalDimensions } from "@opentui/solid"
 import { batch, createContext, createEffect, onCleanup, Show, useContext, type JSX, type ParentProps } from "solid-js"
 import { Keymap } from "../context/keymap"
-import { useThemes } from "../context/theme"
+import { useTheme } from "../context/theme"
 import { MouseButton, Renderable, RGBA } from "@opentui/core"
 import { createStore } from "solid-js/store"
 import { useToast } from "./toast"
@@ -16,7 +16,7 @@ export function Dialog(
  }>,
 ) {
  const dimensions = useTerminalDimensions()
-  const theme = useThemes().contextual("elevated")
+  const { themeV2 } = useTheme().contextual("elevated")
  const renderer = useRenderer()

  let dismiss = false
@@ -59,7 +59,7 @@ export function Dialog(
        }}
        width={width()}
        maxWidth={dimensions().width - 2}
-        backgroundColor={theme.background.default}
+        backgroundColor={themeV2.background.default}
        paddingTop={1}
      >
        {props.children}
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Aiden Cline	6f3ec85d1e	fix(core): clarify Code Mode tool boundary	2026-07-29 11:46:26 -05:00
Aiden Cline	adcf010368	fix(ai): retry transient client statuses	2026-07-28 14:19:42 -05:00