refactor(app): split server management controllers

Co-authored-by: Aiden Cline <rekram1-node@users.noreply.github.com>

.opencode/plugins/tui/discovery-smoke.ts

@@ -0,0 +1,16 @@
+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)
+  },
+}

bun.lock

@@ -147,6 +147,11 @@
         "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",
@@ -164,6 +169,11 @@
         "@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:",
       },
@@ -364,6 +374,7 @@
         "@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:*",
@@ -1696,6 +1707,8 @@
 
     "@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=="],
@@ -3272,6 +3285,28 @@
 
     "@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=="],
@@ -4036,6 +4071,8 @@
 
     "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=="],

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

@@ -6,22 +6,17 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { List } from "@opencode-ai/ui/list"
 import { TextField } from "@opencode-ai/ui/text-field"
-import { useMutation } from "@tanstack/solid-query"
-import { showToast } from "@/utils/toast"
-import { useNavigate } from "@solidjs/router"
-import { createEffect, createMemo, createResource, Show } from "solid-js"
-import { createStore } from "solid-js/store"
+import { Show } from "solid-js"
 import { ServerHealthIndicator, ServerRow } from "@/components/server/server-row"
-import { useGlobal } from "@/context/global"
 import { useLanguage } from "@/context/language"
-import { usePlatform } from "@/context/platform"
-import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
-import { detectServerProtocol } from "@/utils/server-protocol"
-import { type ServerHealth, useCheckServerHealth } from "@/utils/server-health"
+import { ServerConnection } from "@/context/server"
 import { useSettings } from "@/context/settings"
-import { useTabs } from "@/context/tabs"
-
-const DEFAULT_USERNAME = "opencode"
+import {
+  type ServerDomainController,
+  type ServerFormController,
+  useServerDomainController,
+  useServerFormController,
+} from "@/components/server/server-management-controller"
 
 interface ServerFormProps {
   value: string
@@ -40,76 +35,6 @@ interface ServerFormProps {
   onBack: () => void
 }
 
-function showRequestError(language: ReturnType<typeof useLanguage>, err: unknown) {
-  showToast({
-    variant: "error",
-    title: language.t("common.requestFailed"),
-    description: err instanceof Error ? err.message : String(err),
-  })
-}
-
-function useDefaultServer() {
-  const language = useLanguage()
-  const platform = usePlatform()
-  const [defaultKey, defaultUrlActions] = createResource(
-    async () => {
-      try {
-        const key = await platform.getDefaultServer?.()
-        if (!key) return null
-        return key
-      } catch (err) {
-        showRequestError(language, err)
-        return null
-      }
-    },
-    { initialValue: null },
-  )
-
-  const canDefault = createMemo(() => !!platform.getDefaultServer && !!platform.setDefaultServer)
-  const setDefault = async (key: ServerConnection.Key | null) => {
-    try {
-      await platform.setDefaultServer?.(key)
-      defaultUrlActions.mutate(key)
-    } catch (err) {
-      showRequestError(language, err)
-    }
-  }
-
-  return { defaultKey: () => defaultKey.latest, canDefault, setDefault }
-}
-
-function useServerPreview() {
-  const checkServerHealth = useCheckServerHealth()
-
-  const looksComplete = (value: string) => {
-    const normalized = normalizeServerUrl(value)
-    if (!normalized) return false
-    const host = normalized.replace(/^https?:\/\//, "").split("/")[0]
-    if (!host) return false
-    if (host.includes("localhost") || host.startsWith("127.0.0.1")) return true
-    return host.includes(".") || host.includes(":")
-  }
-
-  const previewStatus = async (
-    value: string,
-    username: string,
-    password: string,
-    setStatus: (value: boolean | undefined) => void,
-  ) => {
-    setStatus(undefined)
-    if (!looksComplete(value)) return
-    const normalized = normalizeServerUrl(value)
-    if (!normalized) return
-    const http: ServerConnection.HttpBase = { url: normalized }
-    if (username) http.username = username
-    if (password) http.password = password
-    const result = await checkServerHealth(http)
-    setStatus(result.healthy)
-  }
-
-  return { previewStatus }
-}
-
 function ServerForm(props: ServerFormProps) {
   const language = useLanguage()
   const keyDown = (event: KeyboardEvent) => {
@@ -177,401 +102,40 @@ function ServerForm(props: ServerFormProps) {
 
 export function DialogSelectServer() {
   const dialog = useDialog()
-  const controller = useServerManagementController({ onSelect: dialog.close })
+  const language = useLanguage()
+  const domain = useServerDomainController({ onSelect: () => dialog.close() })
+  const form = useServerFormController({ onSelect: () => dialog.close() })
+  const title = () => {
+    if (!form.state.open()) return language.t("dialog.server.title")
+    return (
+      <div class="flex items-center gap-2 -ml-2">
+        <IconButton icon="arrow-left" variant="ghost" onClick={form.reset} aria-label={language.t("common.goBack")} />
+        <span>
+          {form.state.adding() ? language.t("dialog.server.add.title") : language.t("dialog.server.edit.title")}
+        </span>
+      </div>
+    )
+  }
 
   return (
-    <Dialog title={controller.formTitle()}>
+    <Dialog title={title()}>
       <div class="flex flex-1 min-h-0 flex-col px-5">
-        <Show when={controller.isFormMode()} fallback={<ServerConnectionList controller={controller} />}>
-          <ServerConnectionForm controller={controller} />
+        <Show
+          when={form.state.open()}
+          fallback={<ServerConnectionList domain={domain} onAdd={form.start.add} onEdit={form.start.edit} />}
+        >
+          <ServerConnectionForm form={form} />
         </Show>
       </div>
     </Dialog>
   )
 }
 
-export function useServerManagementController(options: { onSelect?: () => void; navigateOnAdd?: boolean } = {}) {
-  const navigate = useNavigate()
-  const server = useServer()
-  const tabs = useTabs()
-  const global = useGlobal()
-  const platform = usePlatform()
-  const language = useLanguage()
-  const { defaultKey, canDefault, setDefault } = useDefaultServer()
-  const { previewStatus } = useServerPreview()
-  const checkServerHealth = useCheckServerHealth()
-  const [store, setStore] = createStore({
-    addServer: {
-      url: "",
-      name: "",
-      username: DEFAULT_USERNAME,
-      password: "",
-      error: "",
-      showForm: false,
-      status: undefined as boolean | undefined,
-    },
-    editServer: {
-      id: undefined as string | undefined,
-      value: "",
-      name: "",
-      username: "",
-      password: "",
-      error: "",
-      status: undefined as boolean | undefined,
-    },
-  })
-
-  const resetAdd = () => {
-    setStore("addServer", {
-      url: "",
-      name: "",
-      username: DEFAULT_USERNAME,
-      password: "",
-      error: "",
-      showForm: false,
-      status: undefined,
-    })
-  }
-  const resetEdit = () => {
-    setStore("editServer", {
-      id: undefined,
-      value: "",
-      name: "",
-      username: "",
-      password: "",
-      error: "",
-      status: undefined,
-    })
-  }
-
-  const addMutation = useMutation(() => ({
-    mutationFn: async (value: string) => {
-      const normalized = normalizeServerUrl(value)
-      if (!normalized) {
-        resetAdd()
-        return
-      }
-
-      const conn: ServerConnection.Http = {
-        type: "http",
-        http: { url: normalized },
-      }
-      if (store.addServer.name.trim()) conn.displayName = store.addServer.name.trim()
-      if (store.addServer.password) conn.http.password = store.addServer.password
-      if (store.addServer.password && store.addServer.username) conn.http.username = store.addServer.username
-      const result = await checkServerHealth(conn.http)
-      if (!result.healthy) {
-        setStore("addServer", { error: language.t("dialog.server.add.error") })
-        return
-      }
-      if (
-        !settings.general.newLayoutDesigns() &&
-        (await detectServerProtocol(conn.http, platform.fetch ?? globalThis.fetch)) === "v2"
-      ) {
-        setStore("addServer", { error: language.t("dialog.server.add.error") })
-        return
-      }
-
-      resetAdd()
-      if (options.navigateOnAdd === false) {
-        server.add(conn)
-        options.onSelect?.()
-        return
-      }
-      await select(conn, true)
-    },
-  }))
-
-  const editMutation = useMutation(() => ({
-    mutationFn: async (input: { original: ServerConnection.Any; value: string }) => {
-      if (input.original.type !== "http") return
-      const normalized = normalizeServerUrl(input.value)
-      if (!normalized) {
-        resetEdit()
-        return
-      }
-
-      const name = store.editServer.name.trim() || undefined
-      const username = store.editServer.username || undefined
-      const password = store.editServer.password || undefined
-      const existingName = input.original.displayName
-      if (
-        normalized === input.original.http.url &&
-        name === existingName &&
-        username === input.original.http.username &&
-        password === input.original.http.password
-      ) {
-        resetEdit()
-        return
-      }
-
-      const conn: ServerConnection.Http = {
-        type: "http",
-        displayName: name,
-        http: { url: normalized, username, password },
-      }
-      const result = await checkServerHealth(conn.http)
-      if (!result.healthy) {
-        setStore("editServer", { error: language.t("dialog.server.add.error") })
-        return
-      }
-      if (
-        !settings.general.newLayoutDesigns() &&
-        (await detectServerProtocol(conn.http, platform.fetch ?? globalThis.fetch)) === "v2"
-      ) {
-        setStore("editServer", { error: language.t("dialog.server.add.error") })
-        return
-      }
-      if (normalized === input.original.http.url) {
-        server.add(conn)
-      } else {
-        replaceServer(input.original, conn)
-      }
-
-      resetEdit()
-    },
-  }))
-
-  const replaceServer = (original: ServerConnection.Http, next: ServerConnection.Http) => {
-    const originalKey = ServerConnection.key(original)
-    const active = server.key
-    tabs.removeServer(originalKey)
-    const newConn = server.add(next)
-    if (!newConn) return
-    const nextActive = active === originalKey ? ServerConnection.key(newConn) : active
-    if (nextActive) server.setActive(nextActive)
-    server.remove(originalKey)
-  }
-
-  const items = createMemo(() => {
-    const current = server.current
-    const list = server.list
-    if (!current) return list
-    if (!list.includes(current)) return [current, ...list]
-    return [current, ...list.filter((x) => x !== current)]
-  })
-
-  const settings = useSettings()
-  const current = createMemo<ServerConnection.Any | undefined>(() =>
-    settings.general.newLayoutDesigns()
-      ? undefined
-      : (items().find((x) => ServerConnection.key(x) === server.key) ?? items()[0]),
-  )
-
-  const sortedItems = createMemo(() => {
-    const raw = items()
-    const list = settings.general.newLayoutDesigns()
-      ? raw
-      : raw.filter((x) => global.ensureServerCtx(x).sdk.protocolKind() !== "v2")
-    if (!list.length) return list
-    const active = current()
-    const order = new Map(list.map((url, index) => [url, index] as const))
-    const rank = (value?: ServerHealth) => {
-      if (value?.healthy === true) return 0
-      if (value?.healthy === false) return 2
-      return 1
-    }
-    return list.slice().sort((a, b) => {
-      if (a === active) return -1
-      if (b === active) return 1
-      const diff =
-        rank(global.servers.health[ServerConnection.key(a)]) - rank(global.servers.health[ServerConnection.key(b)])
-      if (diff !== 0) return diff
-      return (order.get(a) ?? 0) - (order.get(b) ?? 0)
-    })
-  })
-
-  async function select(conn: ServerConnection.Any, persist?: boolean) {
-    if (!persist && global.servers.health[ServerConnection.key(conn)]?.healthy === false) return
-    options.onSelect?.()
-    if (persist && conn.type === "http") {
-      server.add(conn)
-      navigate("/")
-      return
-    }
-    navigate("/")
-    queueMicrotask(() => server.setActive(ServerConnection.key(conn)))
-  }
-
-  const handleAddChange = (value: string) => {
-    if (addMutation.isPending) return
-    setStore("addServer", { url: value, error: "" })
-    void previewStatus(value, store.addServer.username, store.addServer.password, (next) =>
-      setStore("addServer", { status: next }),
-    )
-  }
-
-  const handleAddNameChange = (value: string) => {
-    if (addMutation.isPending) return
-    setStore("addServer", { name: value, error: "" })
-  }
-
-  const handleAddUsernameChange = (value: string) => {
-    if (addMutation.isPending) return
-    setStore("addServer", { username: value, error: "" })
-    void previewStatus(store.addServer.url, value, store.addServer.password, (next) =>
-      setStore("addServer", { status: next }),
-    )
-  }
-
-  const handleAddPasswordChange = (value: string) => {
-    if (addMutation.isPending) return
-    setStore("addServer", { password: value, error: "" })
-    void previewStatus(store.addServer.url, store.addServer.username, value, (next) =>
-      setStore("addServer", { status: next }),
-    )
-  }
-
-  const handleEditChange = (value: string) => {
-    if (editMutation.isPending) return
-    setStore("editServer", { value, error: "" })
-    void previewStatus(value, store.editServer.username, store.editServer.password, (next) =>
-      setStore("editServer", { status: next }),
-    )
-  }
-
-  const handleEditNameChange = (value: string) => {
-    if (editMutation.isPending) return
-    setStore("editServer", { name: value, error: "" })
-  }
-
-  const handleEditUsernameChange = (value: string) => {
-    if (editMutation.isPending) return
-    setStore("editServer", { username: value, error: "" })
-    void previewStatus(store.editServer.value, value, store.editServer.password, (next) =>
-      setStore("editServer", { status: next }),
-    )
-  }
-
-  const handleEditPasswordChange = (value: string) => {
-    if (editMutation.isPending) return
-    setStore("editServer", { password: value, error: "" })
-    void previewStatus(store.editServer.value, store.editServer.username, value, (next) =>
-      setStore("editServer", { status: next }),
-    )
-  }
-
-  const mode = createMemo<"list" | "add" | "edit">(() => {
-    if (store.editServer.id) return "edit"
-    if (store.addServer.showForm) return "add"
-    return "list"
-  })
-
-  const editing = createMemo(() => {
-    if (!store.editServer.id) return
-    return items().find((x) => x.type === "http" && x.http.url === store.editServer.id)
-  })
-
-  const resetForm = () => {
-    resetAdd()
-    resetEdit()
-  }
-
-  const startAdd = () => {
-    resetEdit()
-    setStore("addServer", {
-      showForm: true,
-      url: "",
-      name: "",
-      username: DEFAULT_USERNAME,
-      password: "",
-      error: "",
-      status: undefined,
-    })
-  }
-
-  const startEdit = (conn: ServerConnection.Http) => {
-    resetAdd()
-    setStore("editServer", {
-      id: conn.http.url,
-      value: conn.http.url,
-      name: conn.displayName ?? "",
-      username: conn.http.username ?? "",
-      password: conn.http.password ?? "",
-      error: "",
-      status: global.servers.health[ServerConnection.key(conn)]?.healthy,
-    })
-  }
-
-  const submitForm = () => {
-    if (mode() === "add") {
-      if (addMutation.isPending) return
-      setStore("addServer", { error: "" })
-      addMutation.mutate(store.addServer.url)
-      return
-    }
-    const original = editing()
-    if (!original) return
-    if (editMutation.isPending) return
-    setStore("editServer", { error: "" })
-    editMutation.mutate({ original, value: store.editServer.value })
-  }
-
-  const isFormMode = createMemo(() => mode() !== "list")
-  const isAddMode = createMemo(() => mode() === "add")
-  const formBusy = createMemo(() => (isAddMode() ? addMutation.isPending : editMutation.isPending))
-
-  const formTitle = createMemo(() => {
-    if (!isFormMode()) return language.t("dialog.server.title")
-    return (
-      <div class="flex items-center gap-2 -ml-2">
-        <IconButton icon="arrow-left" variant="ghost" onClick={resetForm} aria-label={language.t("common.goBack")} />
-        <span>{isAddMode() ? language.t("dialog.server.add.title") : language.t("dialog.server.edit.title")}</span>
-      </div>
-    )
-  })
-
-  createEffect(() => {
-    if (!store.editServer.id) return
-    if (editing()) return
-    resetEdit()
-  })
-
-  async function handleRemove(key: ServerConnection.Key) {
-    try {
-      if (key.startsWith("wsl:")) await platform.wslServers?.removeServer(key)
-      tabs.removeServer(key)
-      server.remove(key)
-      if ((await platform.getDefaultServer?.()) === key) {
-        await setDefault(null)
-      }
-    } catch (err) {
-      showRequestError(language, err)
-    }
-  }
-
-  return {
-    defaultKey,
-    canDefault,
-    current,
-    sortedItems,
-    status: () => global.servers.health,
-    isFormMode,
-    isAddMode,
-    formTitle,
-    formBusy,
-    formValue: () => (isAddMode() ? store.addServer.url : store.editServer.value),
-    formName: () => (isAddMode() ? store.addServer.name : store.editServer.name),
-    formUsername: () => (isAddMode() ? store.addServer.username : store.editServer.username),
-    formPassword: () => (isAddMode() ? store.addServer.password : store.editServer.password),
-    formError: () => (isAddMode() ? store.addServer.error : store.editServer.error),
-    formStatus: () => (isAddMode() ? store.addServer.status : store.editServer.status),
-    select,
-    setDefault,
-    startAdd,
-    startEdit,
-    resetForm,
-    submitForm,
-    canRemove: server.canRemove,
-    handleRemove,
-    handleFormChange: () => (isAddMode() ? handleAddChange : handleEditChange),
-    handleFormNameChange: () => (isAddMode() ? handleAddNameChange : handleEditNameChange),
-    handleFormUsernameChange: () => (isAddMode() ? handleAddUsernameChange : handleEditUsernameChange),
-    handleFormPasswordChange: () => (isAddMode() ? handleAddPasswordChange : handleEditPasswordChange),
-  }
-}
-
-export function ServerConnectionList(props: { controller: ReturnType<typeof useServerManagementController> }) {
+export function ServerConnectionList(props: {
+  domain: ServerDomainController
+  onAdd: () => void
+  onEdit: (server: ServerConnection.Http) => void
+}) {
   const language = useLanguage()
   const settings = useSettings()
 
@@ -585,10 +149,10 @@ export function ServerConnectionList(props: { controller: ReturnType<typeof useS
         }}
         noInitialSelection
         emptyMessage={language.t("dialog.server.empty")}
-        items={props.controller.sortedItems}
+        items={props.domain.collection.items}
         key={(x) => x.http.url}
         onSelect={(x) => {
-          if (x && !settings.general.newLayoutDesigns()) void props.controller.select(x)
+          if (x && !settings.general.newLayoutDesigns()) void props.domain.selection.select(x)
         }}
         divider={true}
       >
@@ -597,15 +161,15 @@ export function ServerConnectionList(props: { controller: ReturnType<typeof useS
           return (
             <div class="flex items-center gap-3 min-w-0 flex-1 w-full group/item">
               <div class="flex flex-col h-full items-center w-5">
-                <ServerHealthIndicator health={props.controller.status()[key]} />
+                <ServerHealthIndicator health={props.domain.collection.health()[key]} />
               </div>
               <ServerRow
                 conn={i}
-                dimmed={props.controller.status()[key]?.healthy === false}
-                status={props.controller.status()[key]}
+                dimmed={props.domain.collection.health()[key]?.healthy === false}
+                status={props.domain.collection.health()[key]}
                 class="flex items-center gap-3 min-w-0 flex-1"
                 badge={
-                  <Show when={props.controller.defaultKey() === ServerConnection.key(i)}>
+                  <Show when={props.domain.defaults.key() === ServerConnection.key(i)}>
                     <span class="text-text-base bg-surface-base text-14-regular px-1.5 rounded-xs">
                       {language.t("dialog.server.status.default")}
                     </span>
@@ -614,7 +178,12 @@ export function ServerConnectionList(props: { controller: ReturnType<typeof useS
                 showCredentials
               />
               <div class="flex items-center justify-center gap-4 pl-4">
-                <Show when={props.controller.current() && ServerConnection.key(props.controller.current()!) === key}>
+                <Show
+                  when={
+                    props.domain.collection.current() &&
+                    ServerConnection.key(props.domain.collection.current()!) === key
+                  }
+                >
                   <Icon name="check" class="h-6" />
                 </Show>
 
@@ -633,27 +202,27 @@ export function ServerConnectionList(props: { controller: ReturnType<typeof useS
                         <DropdownMenu.Item
                           onSelect={() => {
                             if (i.type !== "http") return
-                            props.controller.startEdit(i)
+                            props.onEdit(i)
                           }}
                         >
                           <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.edit")}</DropdownMenu.ItemLabel>
                         </DropdownMenu.Item>
-                        <Show when={props.controller.canDefault() && props.controller.defaultKey() !== key}>
-                          <DropdownMenu.Item onSelect={() => props.controller.setDefault(key)}>
+                        <Show when={props.domain.defaults.available() && props.domain.defaults.key() !== key}>
+                          <DropdownMenu.Item onSelect={() => props.domain.defaults.set(key)}>
                             <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.default")}</DropdownMenu.ItemLabel>
                           </DropdownMenu.Item>
                         </Show>
-                        <Show when={props.controller.canDefault() && props.controller.defaultKey() === key}>
-                          <DropdownMenu.Item onSelect={() => props.controller.setDefault(null)}>
+                        <Show when={props.domain.defaults.available() && props.domain.defaults.key() === key}>
+                          <DropdownMenu.Item onSelect={() => props.domain.defaults.set(null)}>
                             <DropdownMenu.ItemLabel>
                               {language.t("dialog.server.menu.defaultRemove")}
                             </DropdownMenu.ItemLabel>
                           </DropdownMenu.Item>
                         </Show>
-                        <Show when={props.controller.canRemove(key)}>
+                        <Show when={props.domain.connection.canRemove(key)}>
                           <DropdownMenu.Separator />
                           <DropdownMenu.Item
-                            onSelect={() => props.controller.handleRemove(ServerConnection.key(i))}
+                            onSelect={() => props.domain.connection.remove(key)}
                             class="text-text-on-critical-base hover:bg-surface-critical-weak"
                           >
                             <DropdownMenu.ItemLabel>{language.t("dialog.server.menu.delete")}</DropdownMenu.ItemLabel>
@@ -674,7 +243,7 @@ export function ServerConnectionList(props: { controller: ReturnType<typeof useS
           variant="secondary"
           icon="plus-small"
           size="large"
-          onClick={props.controller.startAdd}
+          onClick={props.onAdd}
           class="py-1.5 pl-1.5 pr-3 flex items-center gap-1.5"
         >
           {language.t("dialog.server.add.button")}
@@ -684,38 +253,38 @@ export function ServerConnectionList(props: { controller: ReturnType<typeof useS
   )
 }
 
-export function ServerConnectionForm(props: { controller: ReturnType<typeof useServerManagementController> }) {
+export function ServerConnectionForm(props: { form: ServerFormController }) {
   const language = useLanguage()
 
   return (
     <div class="flex flex-1 min-h-0 flex-col gap-4">
       <ServerForm
-        value={props.controller.formValue()}
-        name={props.controller.formName()}
-        username={props.controller.formUsername()}
-        password={props.controller.formPassword()}
+        value={props.form.state.value()}
+        name={props.form.state.name()}
+        username={props.form.state.username()}
+        password={props.form.state.password()}
         placeholder={language.t("dialog.server.add.placeholder")}
-        busy={props.controller.formBusy()}
-        error={props.controller.formError()}
-        status={props.controller.formStatus()}
-        onChange={props.controller.handleFormChange()}
-        onNameChange={props.controller.handleFormNameChange()}
-        onUsernameChange={props.controller.handleFormUsernameChange()}
-        onPasswordChange={props.controller.handleFormPasswordChange()}
-        onSubmit={props.controller.submitForm}
-        onBack={props.controller.resetForm}
+        busy={props.form.state.busy()}
+        error={props.form.state.error()}
+        status={props.form.state.status()}
+        onChange={props.form.change.value}
+        onNameChange={props.form.change.name}
+        onUsernameChange={props.form.change.username}
+        onPasswordChange={props.form.change.password}
+        onSubmit={props.form.submit}
+        onBack={props.form.reset}
       />
       <div class="shrink-0 pb-5">
         <Button
           variant="primary"
           size="large"
-          onClick={props.controller.submitForm}
-          disabled={props.controller.formBusy()}
+          onClick={props.form.submit}
+          disabled={props.form.state.busy()}
           class="px-3 py-1.5"
         >
-          {props.controller.formBusy()
+          {props.form.state.busy()
             ? language.t("dialog.server.add.checking")
-            : props.controller.isAddMode()
+            : props.form.state.adding()
               ? language.t("dialog.server.add.button")
               : language.t("common.save")}
         </Button>

packages/app/src/components/server/server-management-controller.ts

@@ -0,0 +1,336 @@
+import { useNavigate } from "@solidjs/router"
+import { useMutation } from "@tanstack/solid-query"
+import { createEffect, createMemo, createResource, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useGlobal } from "@/context/global"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { normalizeServerUrl, ServerConnection, useServer } from "@/context/server"
+import { useSettings } from "@/context/settings"
+import { useTabs } from "@/context/tabs"
+import { type ServerHealth, useCheckServerHealth } from "@/utils/server-health"
+import { detectServerProtocol } from "@/utils/server-protocol"
+import { showToast } from "@/utils/toast"
+import { createServerHealthPreview, replaceServerConnection, type ServerFormValues } from "./server-management"
+
+const DEFAULT_USERNAME = "opencode"
+
+type FormMode = "list" | "add" | "edit"
+
+function showRequestError(language: ReturnType<typeof useLanguage>, err: unknown) {
+  showToast({
+    variant: "error",
+    title: language.t("common.requestFailed"),
+    description: err instanceof Error ? err.message : String(err),
+  })
+}
+
+function useDefaultServer() {
+  const language = useLanguage()
+  const platform = usePlatform()
+  const [defaultKey, defaultKeyActions] = createResource(
+    async () => {
+      try {
+        return (await platform.getDefaultServer?.()) ?? null
+      } catch (err) {
+        showRequestError(language, err)
+        return null
+      }
+    },
+    { initialValue: null },
+  )
+
+  const set = async (key: ServerConnection.Key | null) => {
+    try {
+      await platform.setDefaultServer?.(key)
+      defaultKeyActions.mutate(key)
+    } catch (err) {
+      showRequestError(language, err)
+    }
+  }
+
+  return {
+    key: () => defaultKey.latest,
+    available: createMemo(() => !!platform.getDefaultServer && !!platform.setDefaultServer),
+    set,
+  }
+}
+
+function useServerMutations() {
+  const server = useServer()
+  const tabs = useTabs()
+
+  return {
+    add: (connection: ServerConnection.Http) => server.add(connection),
+    replace: (original: ServerConnection.Http, next: ServerConnection.Http) =>
+      replaceServerConnection(original, next, {
+        active: () => server.key,
+        removeTabs: (key) => tabs.removeServer(key),
+        add: (connection) => server.add(connection),
+        setActive: (key) => server.setActive(key),
+        remove: (key) => server.remove(key),
+      }),
+  }
+}
+
+export function useServerActionsController() {
+  const server = useServer()
+  const tabs = useTabs()
+  const platform = usePlatform()
+  const language = useLanguage()
+  const defaults = useDefaultServer()
+
+  const remove = async (key: ServerConnection.Key) => {
+    try {
+      if (key.startsWith("wsl:")) await platform.wslServers?.removeServer(key)
+      tabs.removeServer(key)
+      server.remove(key)
+      if ((await platform.getDefaultServer?.()) === key) await defaults.set(null)
+    } catch (err) {
+      showRequestError(language, err)
+    }
+  }
+
+  return { defaults, connection: { canRemove: server.canRemove, remove } }
+}
+
+export type ServerActionsController = ReturnType<typeof useServerActionsController>
+
+export function useServerCollectionController() {
+  const server = useServer()
+  const global = useGlobal()
+  const settings = useSettings()
+  const actions = useServerActionsController()
+
+  const items = createMemo(() => {
+    const current = server.current
+    const list = server.list
+    if (!current) return list
+    if (!list.includes(current)) return [current, ...list]
+    return [current, ...list.filter((item) => item !== current)]
+  })
+  const current = createMemo<ServerConnection.Any | undefined>(() =>
+    settings.general.newLayoutDesigns()
+      ? undefined
+      : (items().find((item) => ServerConnection.key(item) === server.key) ?? items()[0]),
+  )
+  const sorted = createMemo(() => {
+    const raw = items()
+    const list = settings.general.newLayoutDesigns()
+      ? raw
+      : raw.filter((item) => global.ensureServerCtx(item).sdk.protocolKind() !== "v2")
+    if (!list.length) return list
+    const active = current()
+    const order = new Map(list.map((item, index) => [item, index] as const))
+    const rank = (value?: ServerHealth) => {
+      if (value?.healthy === true) return 0
+      if (value?.healthy === false) return 2
+      return 1
+    }
+    return list.slice().sort((a, b) => {
+      if (a === active) return -1
+      if (b === active) return 1
+      const diff =
+        rank(global.servers.health[ServerConnection.key(a)]) - rank(global.servers.health[ServerConnection.key(b)])
+      if (diff !== 0) return diff
+      return (order.get(a) ?? 0) - (order.get(b) ?? 0)
+    })
+  })
+
+  return {
+    collection: {
+      items: sorted,
+      current,
+      health: () => global.servers.health,
+    },
+    ...actions,
+  }
+}
+
+export type ServerCollectionController = ReturnType<typeof useServerCollectionController>
+
+export function useServerDomainController(options: { onSelect?: () => void } = {}) {
+  const navigate = useNavigate()
+  const server = useServer()
+  const global = useGlobal()
+  const collection = useServerCollectionController()
+
+  const select = async (connection: ServerConnection.Any) => {
+    if (global.servers.health[ServerConnection.key(connection)]?.healthy === false) return
+    options.onSelect?.()
+    navigate("/")
+    queueMicrotask(() => server.setActive(ServerConnection.key(connection)))
+  }
+
+  return { ...collection, selection: { select } }
+}
+
+export type ServerDomainController = ReturnType<typeof useServerDomainController>
+
+export function useServerFormController(options: { onSelect?: () => void; navigateOnAdd?: boolean } = {}) {
+  const navigate = useNavigate()
+  const server = useServer()
+  const global = useGlobal()
+  const platform = usePlatform()
+  const language = useLanguage()
+  const settings = useSettings()
+  const mutations = useServerMutations()
+  const checkServerHealth = useCheckServerHealth()
+  const healthPreview = createServerHealthPreview(checkServerHealth)
+  const [store, setStore] = createStore({
+    mode: "list" as FormMode,
+    originalUrl: undefined as string | undefined,
+    values: { url: "", name: "", username: DEFAULT_USERNAME, password: "" },
+    error: "",
+    status: undefined as boolean | undefined,
+  })
+
+  onCleanup(healthPreview.cancel)
+
+  const reset = () => {
+    healthPreview.cancel()
+    setStore({
+      mode: "list",
+      originalUrl: undefined,
+      values: { url: "", name: "", username: DEFAULT_USERNAME, password: "" },
+      error: "",
+      status: undefined,
+    })
+  }
+  const allServers = () => {
+    if (!server.current || server.list.includes(server.current)) return server.list
+    return [server.current, ...server.list]
+  }
+  const editing = createMemo(() =>
+    allServers().find((item) => item.type === "http" && item.http.url === store.originalUrl),
+  )
+
+  const request = useMutation(() => ({
+    mutationFn: async () => {
+      const normalized = normalizeServerUrl(store.values.url)
+      if (!normalized) {
+        reset()
+        return
+      }
+
+      const original = store.mode === "edit" ? editing() : undefined
+      if (store.mode === "edit" && !original) return
+      const name = store.values.name.trim() || undefined
+      const username = store.values.username || undefined
+      const password = store.values.password || undefined
+      if (
+        original?.type === "http" &&
+        normalized === original.http.url &&
+        name === original.displayName &&
+        username === original.http.username &&
+        password === original.http.password
+      ) {
+        reset()
+        return
+      }
+
+      const connection: ServerConnection.Http = {
+        type: "http",
+        displayName: name,
+        http: {
+          url: normalized,
+          username: store.mode === "add" && !password ? undefined : username,
+          password,
+        },
+      }
+      const result = await checkServerHealth(connection.http)
+      if (!result.healthy) {
+        setStore("error", language.t("dialog.server.add.error"))
+        return
+      }
+      if (
+        !settings.general.newLayoutDesigns() &&
+        (await detectServerProtocol(connection.http, platform.fetch ?? globalThis.fetch)) === "v2"
+      ) {
+        setStore("error", language.t("dialog.server.add.error"))
+        return
+      }
+
+      if (original?.type === "http") {
+        if (normalized === original.http.url) mutations.add(connection)
+        if (normalized !== original.http.url) mutations.replace(original, connection)
+        reset()
+        return
+      }
+
+      reset()
+      if (options.navigateOnAdd === false) {
+        mutations.add(connection)
+        options.onSelect?.()
+        return
+      }
+      mutations.add(connection)
+      options.onSelect?.()
+      navigate("/")
+    },
+  }))
+
+  const preview = () => void healthPreview.preview(store.values, (status) => setStore("status", status))
+  const change = (field: keyof ServerFormValues, value: string) => {
+    if (request.isPending) return
+    setStore("values", field, value)
+    setStore("error", "")
+    if (field !== "name") preview()
+  }
+  const startAdd = () => {
+    reset()
+    setStore("mode", "add")
+  }
+  const startEdit = (connection: ServerConnection.Http) => {
+    reset()
+    setStore({
+      mode: "edit",
+      originalUrl: connection.http.url,
+      values: {
+        url: connection.http.url,
+        name: connection.displayName ?? "",
+        username: connection.http.username ?? "",
+        password: connection.http.password ?? "",
+      },
+      error: "",
+      status: global.servers.health[ServerConnection.key(connection)]?.healthy,
+    })
+  }
+  const submit = () => {
+    if (store.mode === "list" || request.isPending) return
+    setStore("error", "")
+    request.mutate()
+  }
+
+  createEffect(() => {
+    if (store.mode !== "edit") return
+    if (editing()) return
+    reset()
+  })
+
+  return {
+    state: {
+      mode: () => store.mode,
+      open: () => store.mode !== "list",
+      adding: () => store.mode === "add",
+      busy: () => request.isPending,
+      value: () => store.values.url,
+      name: () => store.values.name,
+      username: () => store.values.username,
+      password: () => store.values.password,
+      error: () => store.error,
+      status: () => store.status,
+    },
+    change: {
+      value: (value: string) => change("url", value),
+      name: (value: string) => change("name", value),
+      username: (value: string) => change("username", value),
+      password: (value: string) => change("password", value),
+    },
+    start: { add: startAdd, edit: startEdit },
+    reset,
+    submit,
+  }
+}
+
+export type ServerFormController = ReturnType<typeof useServerFormController>

packages/app/src/components/server/server-management.test.ts

@@ -0,0 +1,99 @@
+import { describe, expect, test } from "bun:test"
+import { ServerConnection } from "@/context/server"
+import { createServerHealthPreview, replaceServerConnection, type ServerFormValues } from "./server-management"
+
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  const promise = new Promise<T>((done) => {
+    resolve = done
+  })
+  return { promise, resolve }
+}
+
+const values = (url: string): ServerFormValues => ({ url, name: "", username: "opencode", password: "" })
+
+describe("createServerHealthPreview", () => {
+  test("ignores an older response that resolves after the latest response", async () => {
+    const first = deferred<{ healthy: boolean }>()
+    const second = deferred<{ healthy: boolean }>()
+    const requests = [first, second]
+    const status: Array<boolean | undefined> = []
+    const preview = createServerHealthPreview(() => requests.shift()!.promise)
+
+    const older = preview.preview(values("old.example.com"), (value) => status.push(value))
+    const latest = preview.preview(values("new.example.com"), (value) => status.push(value))
+    second.resolve({ healthy: true })
+    await latest
+    first.resolve({ healthy: false })
+    await older
+
+    expect(status).toEqual([undefined, undefined, true])
+  })
+
+  test("an incomplete value invalidates an in-flight response", async () => {
+    const request = deferred<{ healthy: boolean }>()
+    const status: Array<boolean | undefined> = []
+    const preview = createServerHealthPreview(() => request.promise)
+
+    const pending = preview.preview(values("server.example.com"), (value) => status.push(value))
+    await preview.preview(values("server"), (value) => status.push(value))
+    request.resolve({ healthy: true })
+    await pending
+
+    expect(status).toEqual([undefined, undefined])
+  })
+
+  test("cancellation prevents an in-flight response from updating status", async () => {
+    const request = deferred<{ healthy: boolean }>()
+    const status: Array<boolean | undefined> = []
+    const preview = createServerHealthPreview(() => request.promise)
+
+    const pending = preview.preview(values("server.example.com"), (value) => status.push(value))
+    preview.cancel()
+    request.resolve({ healthy: true })
+    await pending
+
+    expect(status).toEqual([undefined])
+  })
+})
+
+describe("replaceServerConnection", () => {
+  const original: ServerConnection.Http = { type: "http", http: { url: "https://old.example.com" } }
+  const next: ServerConnection.Http = { type: "http", http: { url: "https://new.example.com" } }
+
+  test("moves active selection after adding the replacement and removes the original", () => {
+    const calls: string[] = []
+
+    replaceServerConnection(original, next, {
+      active: () => ServerConnection.key(original),
+      removeTabs: (key) => calls.push(`tabs:${key}`),
+      add: (server) => {
+        calls.push(`add:${ServerConnection.key(server)}`)
+        return server
+      },
+      setActive: (key) => calls.push(`active:${key}`),
+      remove: (key) => calls.push(`remove:${key}`),
+    })
+
+    expect(calls).toEqual([
+      "tabs:https://old.example.com",
+      "add:https://new.example.com",
+      "active:https://new.example.com",
+      "remove:https://old.example.com",
+    ])
+  })
+
+  test("keeps the original when the replacement cannot be added", () => {
+    const removed: ServerConnection.Key[] = []
+
+    replaceServerConnection(original, next, {
+      active: () => ServerConnection.key(original),
+      removeTabs: () => {},
+      add: () => undefined,
+      setActive: () => {},
+      remove: (key) => removed.push(key),
+    })
+
+    expect(removed).toEqual([])
+  })
+})

packages/app/src/components/server/server-management.ts

@@ -0,0 +1,60 @@
+import { normalizeServerUrl, ServerConnection } from "@/context/server"
+import type { ServerHealth } from "@/utils/server-health"
+
+export type ServerFormValues = {
+  url: string
+  name: string
+  username: string
+  password: string
+}
+
+export function createServerHealthPreview(
+  check: (server: ServerConnection.HttpBase) => Promise<Pick<ServerHealth, "healthy">>,
+) {
+  let generation = 0
+
+  const cancel = () => {
+    generation += 1
+  }
+
+  const preview = async (values: ServerFormValues, setStatus: (value: boolean | undefined) => void) => {
+    const current = ++generation
+    setStatus(undefined)
+    const normalized = normalizeServerUrl(values.url)
+    if (!normalized) return
+    const host = normalized.replace(/^https?:\/\//, "").split("/")[0]
+    if (!host) return
+    if (!host.includes("localhost") && !host.startsWith("127.0.0.1") && !host.includes(".") && !host.includes(":"))
+      return
+
+    const http: ServerConnection.HttpBase = { url: normalized }
+    if (values.username) http.username = values.username
+    if (values.password) http.password = values.password
+    const result = await check(http)
+    if (current !== generation) return
+    setStatus(result.healthy)
+  }
+
+  return { cancel, preview }
+}
+
+export function replaceServerConnection(
+  original: ServerConnection.Http,
+  next: ServerConnection.Http,
+  operations: {
+    active: () => ServerConnection.Key | undefined
+    removeTabs: (key: ServerConnection.Key) => void
+    add: (server: ServerConnection.Http) => ServerConnection.Any | undefined
+    setActive: (key: ServerConnection.Key) => void
+    remove: (key: ServerConnection.Key) => void
+  },
+) {
+  const originalKey = ServerConnection.key(original)
+  const active = operations.active()
+  operations.removeTabs(originalKey)
+  const added = operations.add(next)
+  if (!added) return
+  const nextActive = active === originalKey ? ServerConnection.key(added) : active
+  if (nextActive) operations.setActive(nextActive)
+  operations.remove(originalKey)
+}

packages/app/src/components/server/server-row-menu.tsx

@@ -2,13 +2,13 @@ import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
 import { type Component, Show } from "solid-js"
-import { useServerManagementController } from "@/components/dialog-select-server"
+import type { ServerActionsController } from "@/components/server/server-management-controller"
 import { useLanguage } from "@/context/language"
 import { ServerConnection } from "@/context/server"
 
 export const ServerRowMenu: Component<{
   server: ServerConnection.Any
-  controller: ReturnType<typeof useServerManagementController>
+  domain: ServerActionsController
   onEdit: (server: ServerConnection.Http) => void
   open?: boolean
   onOpenChange?: (open: boolean) => void
@@ -19,13 +19,13 @@ export const ServerRowMenu: Component<{
     <ServerRowMenuView
       server={props.server}
       labels={serverMenuLabels(language)}
-      canDefault={props.controller.canDefault()}
-      isDefault={props.controller.defaultKey() === key}
-      canRemove={props.controller.canRemove(key)}
+      canDefault={props.domain.defaults.available()}
+      isDefault={props.domain.defaults.key() === key}
+      canRemove={props.domain.connection.canRemove(key)}
       onEdit={props.onEdit}
-      onSetDefault={() => props.controller.setDefault(key)}
-      onRemoveDefault={() => props.controller.setDefault(null)}
-      onRemove={() => props.controller.handleRemove(key)}
+      onSetDefault={() => props.domain.defaults.set(key)}
+      onRemoveDefault={() => props.domain.defaults.set(null)}
+      onRemove={() => props.domain.connection.remove(key)}
       open={props.open}
       onOpenChange={props.onOpenChange}
     />

packages/app/src/components/settings-servers.tsx

@@ -1,16 +1,19 @@
 import { Show, type Component } from "solid-js"
+import { IconButton } from "@opencode-ai/ui/icon-button"
 import { useLanguage } from "@/context/language"
-import { ServerConnectionForm, ServerConnectionList, useServerManagementController } from "./dialog-select-server"
+import { useServerDomainController, useServerFormController } from "./server/server-management-controller"
+import { ServerConnectionForm, ServerConnectionList } from "./dialog-select-server"
 
 export const SettingsServers: Component = () => {
   const language = useLanguage()
-  const controller = useServerManagementController()
+  const domain = useServerDomainController()
+  const form = useServerFormController()
 
   return (
     <div class="flex flex-col h-full overflow-y-auto no-scrollbar px-4 pb-10 sm:px-10 sm:pb-10">
       <div class="flex flex-col flex-1 min-h-0 max-w-[720px]">
         <Show
-          when={controller.isFormMode()}
+          when={form.state.open()}
           fallback={
             <>
               <div class="sticky top-0 z-10 bg-[linear-gradient(to_bottom,var(--surface-stronger-non-alpha)_calc(100%_-_24px),transparent)]">
@@ -18,13 +21,25 @@ export const SettingsServers: Component = () => {
                   <h2 class="text-16-medium text-text-strong">{language.t("status.popover.tab.servers")}</h2>
                 </div>
               </div>
-              <ServerConnectionList controller={controller} />
+              <ServerConnectionList domain={domain} onAdd={form.start.add} onEdit={form.start.edit} />
             </>
           }
         >
           <div class="flex flex-1 min-h-0 flex-col gap-4 pt-6">
-            <div class="text-16-medium text-text-strong">{controller.formTitle()}</div>
-            <ServerConnectionForm controller={controller} />
+            <div class="text-16-medium text-text-strong">
+              <div class="flex items-center gap-2 -ml-2">
+                <IconButton
+                  icon="arrow-left"
+                  variant="ghost"
+                  onClick={form.reset}
+                  aria-label={language.t("common.goBack")}
+                />
+                <span>
+                  {form.state.adding() ? language.t("dialog.server.add.title") : language.t("dialog.server.edit.title")}
+                </span>
+              </div>
+            </div>
+            <ServerConnectionForm form={form} />
           </div>
         </Show>
       </div>

packages/app/src/components/settings-v2/dialog-server-v2.tsx

@@ -6,7 +6,7 @@ import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { type Component, Show, createEffect, createSignal, onCleanup, onMount } from "solid-js"
 import { useLanguage } from "@/context/language"
 import { type ServerConnection } from "@/context/server"
-import { useServerManagementController } from "../dialog-select-server"
+import { useServerFormController } from "../server/server-management-controller"
 import "./settings-v2.css"
 
 export const DialogServerV2: Component<{
@@ -15,39 +15,39 @@ export const DialogServerV2: Component<{
 }> = (props) => {
   const dialog = useDialog()
   const language = useLanguage()
-  const controller = useServerManagementController({
+  const form = useServerFormController({
     onSelect: () => dialog.close(),
     navigateOnAdd: false,
   })
   const [opened, setOpened] = createSignal(false)
 
   onMount(() => {
-    if (props.mode === "add") controller.startAdd()
-    if (props.mode === "edit" && props.server) controller.startEdit(props.server)
+    if (props.mode === "add") form.start.add()
+    if (props.mode === "edit" && props.server) form.start.edit(props.server)
     setOpened(true)
   })
 
   onCleanup(() => {
-    controller.resetForm()
+    form.reset()
   })
 
   createEffect(() => {
     if (!opened()) return
-    if (controller.isFormMode()) return
+    if (form.state.open()) return
     dialog.close()
   })
 
   const keyDown = (event: KeyboardEvent) => {
     if (event.key !== "Enter" || event.isComposing) return
     event.preventDefault()
-    controller.submitForm()
+    form.submit()
   }
 
   const title = () =>
     props.mode === "add" ? language.t("dialog.server.add.title") : language.t("dialog.server.edit.title")
 
   const submitLabel = () => {
-    if (controller.formBusy()) return language.t("dialog.server.add.checking")
+    if (form.state.busy()) return language.t("dialog.server.add.checking")
     if (props.mode === "add") return language.t("dialog.server.add.button")
     return language.t("common.save")
   }
@@ -66,16 +66,16 @@ export const DialogServerV2: Component<{
               type="text"
               appearance="large"
               class="!w-full self-stretch"
-              value={controller.formValue()}
+              value={form.state.value()}
               placeholder={language.t("dialog.server.add.placeholder")}
-              invalid={!!controller.formError()}
-              disabled={controller.formBusy()}
+              invalid={!!form.state.error()}
+              disabled={form.state.busy()}
               autofocus
-              onInput={(event) => controller.handleFormChange()(event.currentTarget.value)}
+              onInput={(event) => form.change.value(event.currentTarget.value)}
               onKeyDown={keyDown}
             />
-            <Show when={controller.formError()}>
-              <span class="settings-v2-server-dialog-error">{controller.formError()}</span>
+            <Show when={form.state.error()}>
+              <span class="settings-v2-server-dialog-error">{form.state.error()}</span>
             </Show>
           </div>
           <div class="flex w-full min-w-0 flex-col gap-2">
@@ -84,10 +84,10 @@ export const DialogServerV2: Component<{
               type="text"
               appearance="large"
               class="!w-full self-stretch"
-              value={controller.formName()}
+              value={form.state.name()}
               placeholder={language.t("dialog.server.add.namePlaceholder")}
-              disabled={controller.formBusy()}
-              onInput={(event) => controller.handleFormNameChange()(event.currentTarget.value)}
+              disabled={form.state.busy()}
+              onInput={(event) => form.change.name(event.currentTarget.value)}
               onKeyDown={keyDown}
             />
           </div>
@@ -98,10 +98,10 @@ export const DialogServerV2: Component<{
                 type="text"
                 appearance="large"
                 class="!w-full self-stretch"
-                value={controller.formUsername()}
+                value={form.state.username()}
                 placeholder={language.t("dialog.server.add.usernamePlaceholder")}
-                disabled={controller.formBusy()}
-                onInput={(event) => controller.handleFormUsernameChange()(event.currentTarget.value)}
+                disabled={form.state.busy()}
+                onInput={(event) => form.change.username(event.currentTarget.value)}
                 onKeyDown={keyDown}
               />
             </div>
@@ -111,10 +111,10 @@ export const DialogServerV2: Component<{
                 type="password"
                 appearance="large"
                 class="!w-full self-stretch"
-                value={controller.formPassword()}
+                value={form.state.password()}
                 placeholder={language.t("dialog.server.add.passwordPlaceholder")}
-                disabled={controller.formBusy()}
-                onInput={(event) => controller.handleFormPasswordChange()(event.currentTarget.value)}
+                disabled={form.state.busy()}
+                onInput={(event) => form.change.password(event.currentTarget.value)}
                 onKeyDown={keyDown}
               />
             </div>
@@ -122,10 +122,10 @@ export const DialogServerV2: Component<{
         </div>
       </DialogBody>
       <DialogFooter>
-        <ButtonV2 variant="neutral" disabled={controller.formBusy()} onClick={() => dialog.close()}>
+        <ButtonV2 variant="neutral" disabled={form.state.busy()} onClick={() => dialog.close()}>
           {language.t("common.cancel")}
         </ButtonV2>
-        <ButtonV2 variant="contrast" disabled={controller.formBusy()} onClick={controller.submitForm}>
+        <ButtonV2 variant="contrast" disabled={form.state.busy()} onClick={form.submit}>
           {submitLabel()}
         </ButtonV2>
       </DialogFooter>

packages/app/src/components/settings-v2/servers.tsx

@@ -10,7 +10,7 @@ import { ServerRowMenu } from "@/components/server/server-row-menu"
 import { ServerHealthIndicator } from "@/components/server/server-row"
 import { useLanguage } from "@/context/language"
 import { ServerConnection, serverName } from "@/context/server"
-import { useServerManagementController } from "../dialog-select-server"
+import { useServerCollectionController } from "../server/server-management-controller"
 import { DialogServerV2 } from "./dialog-server-v2"
 import { SettingsListV2 } from "./parts/list"
 import { AddServerMenu, isWslServer, useFilteredWslServers, WslServerSettings } from "@/wsl/settings"
@@ -19,16 +19,16 @@ import "./settings-v2.css"
 export const SettingsServersV2: Component = () => {
   const dialog = useDialog()
   const language = useLanguage()
-  const controller = useServerManagementController()
+  const domain = useServerCollectionController()
   const [store, setStore] = createStore({ filter: "" })
   const wslServers = useFilteredWslServers(() => store.filter)
 
   const showSearch = createMemo(
-    () => controller.sortedItems().filter((item) => !isWslServer(item)).length + wslServers().length > 1,
+    () => domain.collection.items().filter((item) => !isWslServer(item)).length + wslServers().length > 1,
   )
 
   const filtered = createMemo(() => {
-    const items = controller.sortedItems().filter((item) => !isWslServer(item))
+    const items = domain.collection.items().filter((item) => !isWslServer(item))
     const query = store.filter.trim()
     if (!query) return items
     return fuzzysort
@@ -39,11 +39,11 @@ export const SettingsServersV2: Component = () => {
   })
 
   const openAdd = () => {
-    dialog.push(() => <DialogServerV2 mode="add" />)
+    void dialog.push(() => <DialogServerV2 mode="add" />)
   }
 
   const openEdit = (server: ServerConnection.Http) => {
-    dialog.push(() => <DialogServerV2 mode="edit" server={server} />)
+    void dialog.push(() => <DialogServerV2 mode="edit" server={server} />)
   }
 
   return (
@@ -97,12 +97,12 @@ export const SettingsServersV2: Component = () => {
           }
         >
           <SettingsListV2>
-            <WslServerSettings controller={controller} servers={wslServers} />
+            <WslServerSettings domain={domain} servers={wslServers} />
             <For each={filtered()}>
               {(item) => {
                 const key = ServerConnection.key(item)
-                const health = () => controller.status()[key]
-                const isDefault = () => controller.defaultKey() === key
+                const health = () => domain.collection.health()[key]
+                const isDefault = () => domain.defaults.key() === key
                 return (
                   <div class="settings-v2-servers-row">
                     <div class="settings-v2-servers-lead">
@@ -122,10 +122,10 @@ export const SettingsServersV2: Component = () => {
                       </div>
                     </div>
                     <div class="settings-v2-servers-actions">
-                      <Show when={controller.canDefault() && isDefault()}>
+                      <Show when={domain.defaults.available() && isDefault()}>
                         <Tag>{language.t("dialog.server.status.default")}</Tag>
                       </Show>
-                      <ServerRowMenu server={item} controller={controller} onEdit={openEdit} />
+                      <ServerRowMenu server={item} domain={domain} onEdit={openEdit} />
                     </div>
                   </div>
                 )

packages/app/src/pages/home/home-projects-controller.tsx

@@ -1,5 +1,5 @@
 import { useDirectoryPicker } from "@/components/directory-picker"
-import { useServerManagementController } from "@/components/dialog-select-server"
+import { useServerActionsController } from "@/components/server/server-management-controller"
 import { useSettingsCommand } from "@/components/settings-dialog"
 import { DialogServerV2 } from "@/components/settings-v2/dialog-server-v2"
 import { type LocalProject } from "@/context/layout"
@@ -22,7 +22,7 @@ export function createHomeProjectsController(home: HomeController) {
   const language = useLanguage()
   const notification = useNotification()
   const openSettings = useSettingsCommand()
-  const serverManagement = useServerManagementController({ navigateOnAdd: false })
+  const serverManagement = useServerActionsController()
   const [_state, setState, _, ready] = persisted(
     Persist.global("home.servers", ["home.servers.v1"]),
     createStore({ collapsed: {} as Record<string, boolean> }),
@@ -56,12 +56,12 @@ export function createHomeProjectsController(home: HomeController) {
         const key = ServerConnection.key(conn)
         setState("collapsed", key, !state().collapsed[key])
       },
-      canDefault: serverManagement.canDefault,
-      defaultKey: serverManagement.defaultKey,
+      canDefault: serverManagement.defaults.available,
+      defaultKey: serverManagement.defaults.key,
       setDefault: (conn: ServerConnection.Any | undefined) =>
-        serverManagement.setDefault(conn ? ServerConnection.key(conn) : null),
-      canRemove: (conn: ServerConnection.Any) => serverManagement.canRemove(ServerConnection.key(conn)),
-      remove: (conn: ServerConnection.Any) => serverManagement.handleRemove(ServerConnection.key(conn)),
+        serverManagement.defaults.set(conn ? ServerConnection.key(conn) : null),
+      canRemove: (conn: ServerConnection.Any) => serverManagement.connection.canRemove(ServerConnection.key(conn)),
+      remove: (conn: ServerConnection.Any) => serverManagement.connection.remove(ServerConnection.key(conn)),
       edit: (conn: ServerConnection.Http) => dialog.show(() => <DialogServerV2 mode="edit" server={conn} />),
       focus: home.selection.focusServer,
     },

packages/app/src/wsl/settings.tsx

@@ -7,7 +7,7 @@ import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
 import { useMutation } from "@tanstack/solid-query"
 import fuzzysort from "fuzzysort"
 import { type Accessor, For, Show, createMemo } from "solid-js"
-import type { useServerManagementController } from "@/components/dialog-select-server"
+import type { ServerCollectionController } from "@/components/server/server-management-controller"
 import { ServerHealthIndicator } from "@/components/server/server-row"
 import { useLanguage } from "@/context/language"
 import { usePlatform } from "@/context/platform"
@@ -17,8 +17,6 @@ import { DialogAddWslServer } from "./dialog-add-server"
 import { useWslServers } from "./context"
 import { wslOpencodeAction, wslRuntimeRetryable } from "./settings-model"
 
-type Controller = ReturnType<typeof useServerManagementController>
-
 export function isWslServer(server: ServerConnection.Any) {
   return server.type === "sidecar" && server.variant === "wsl"
 }
@@ -28,7 +26,7 @@ export function AddServerMenu(props: { onAddServer: () => void }) {
   const dialog = useDialog()
   const language = useLanguage()
   const openAddWsl = () => {
-    dialog.push(() => <DialogAddWslServer />)
+    void dialog.push(() => <DialogAddWslServer />)
   }
   return (
     <Show
@@ -67,7 +65,7 @@ export function useFilteredWslServers(filter: Accessor<string>) {
 }
 
 export function WslServerSettings(props: {
-  controller: Controller
+  domain: Pick<ServerCollectionController, "collection" | "defaults" | "connection">
   servers: ReturnType<typeof useFilteredWslServers>
 }) {
   const platform = usePlatform()
@@ -86,7 +84,7 @@ export function WslServerSettings(props: {
   }))
 
   const remove = (key: ServerConnection.Key) => {
-    request.mutate(() => props.controller.handleRemove(key))
+    request.mutate(() => props.domain.connection.remove(key))
   }
 
   return (
@@ -100,7 +98,7 @@ export function WslServerSettings(props: {
           return (
             <div class="settings-v2-servers-row">
               <div class="settings-v2-servers-lead">
-                <ServerHealthIndicator health={props.controller.status()[key]} />
+                <ServerHealthIndicator health={props.domain.collection.health()[key]} />
                 <div class="settings-v2-servers-copy">
                   <span class="flex min-w-0 items-center gap-1">
                     <span class="settings-v2-servers-name">{item.config.distro}</span>
@@ -114,7 +112,7 @@ export function WslServerSettings(props: {
                 </div>
               </div>
               <div class="settings-v2-servers-actions">
-                <Show when={props.controller.canDefault() && props.controller.defaultKey() === key}>
+                <Show when={props.domain.defaults.available() && props.domain.defaults.key() === key}>
                   <Tag>{language.t("dialog.server.status.default")}</Tag>
                 </Show>
                 <Show when={opencodeAction()}>
@@ -145,13 +143,13 @@ export function WslServerSettings(props: {
                             {language.t("wsl.server.retryStart")}
                           </MenuV2.Item>
                         </Show>
-                        <Show when={props.controller.canDefault() && props.controller.defaultKey() !== key}>
-                          <MenuV2.Item onSelect={() => props.controller.setDefault(key)}>
+                        <Show when={props.domain.defaults.available() && props.domain.defaults.key() !== key}>
+                          <MenuV2.Item onSelect={() => props.domain.defaults.set(key)}>
                             {language.t("dialog.server.menu.default")}
                           </MenuV2.Item>
                         </Show>
-                        <Show when={props.controller.canDefault() && props.controller.defaultKey() === key}>
-                          <MenuV2.Item onSelect={() => props.controller.setDefault(null)}>
+                        <Show when={props.domain.defaults.available() && props.domain.defaults.key() === key}>
+                          <MenuV2.Item onSelect={() => props.domain.defaults.set(null)}>
                             {language.t("dialog.server.menu.defaultRemove")}
                           </MenuV2.Item>
                         </Show>

packages/cli/package.json

@@ -56,6 +56,16 @@
     "@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",

packages/cli/script/build.ts

@@ -5,6 +5,7 @@ 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"
 
@@ -22,7 +23,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 plugin = createSolidTransformPlugin()
+const solidPlugin = createSolidTransformPlugin()
 
 const allTargets: {
   os: string
@@ -55,6 +56,16 @@ 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,
@@ -69,7 +80,7 @@ for (const item of targets) {
   const result = await Bun.build({
     entrypoints: ["./src/index.ts"],
     tsconfig: "./tsconfig.json",
-    plugins: [plugin],
+    plugins: [solidPlugin, parcelWatcherPlugin],
     external: ["node-gyp"],
     format: "esm",
     minify: true,

packages/cli/script/node-assets.ts

@@ -37,6 +37,8 @@ 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)),

packages/cli/script/service-smoke.ts

@@ -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.mkdtemp(path.join(os.tmpdir(), "opencode-service-smoke-"))
+const root = await fs.realpath(await fs.mkdtemp(path.join(os.tmpdir(), "opencode-service-smoke-")))
 const env = {
   ...process.env,
   HOME: root,
@@ -29,6 +29,7 @@ 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()
@@ -49,6 +50,11 @@ 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),
@@ -88,6 +94,7 @@ 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)
@@ -133,3 +140,31 @@ 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")
+}

packages/cli/src/node/target.ts

@@ -11,6 +11,8 @@ 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,
@@ -19,6 +21,10 @@ 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`,
   }
 }
 

packages/cli/vite.node.config.ts

@@ -30,6 +30,44 @@ 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" },
@@ -156,6 +194,11 @@ 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"`
 }
@@ -174,6 +217,7 @@ export function mainConfig(input: NodeBuildInput): UserConfig {
     plugins: [
       rawTextPlugin(),
       runtimeRequirePlugin(),
+      fffNodePlugin(),
       solid({
         solid: {
           generate: "universal",

packages/core/package.json

@@ -92,6 +92,7 @@
     "@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:*",

packages/core/script/fsevents-diagnostic.mjs

@@ -1,57 +0,0 @@
-import watcher from "@parcel/watcher"
-import { execFileSync } from "node:child_process"
-import fs from "node:fs/promises"
-import os from "node:os"
-import path from "node:path"
-
-const rounds = Number(process.env.FSEVENTS_ROUNDS ?? 100)
-const width = Number(process.env.FSEVENTS_WIDTH ?? 25)
-const root = await fs.mkdtemp(path.join(os.tmpdir(), "opencode-fsevents-"))
-const targets = Array.from({ length: width }, (_, index) => path.join(root, `project-${index}`))
-await Promise.all(targets.map((target) => fs.mkdir(target)))
-
-function openFiles() {
-  try {
-    return Number(execFileSync("sh", ["-c", `lsof -p ${process.pid} 2>/dev/null | wc -l`], { encoding: "utf8" }).trim())
-  } catch {
-    return -1
-  }
-}
-
-function sample(round) {
-  const memory = process.memoryUsage()
-  console.log(
-    JSON.stringify({
-      round,
-      subscriptions: round * width,
-      rss: memory.rss,
-      heapUsed: memory.heapUsed,
-      external: memory.external,
-      openFiles: openFiles(),
-    }),
-  )
-}
-
-try {
-  sample(0)
-  for (let round = 1; round <= rounds; round++) {
-    const subscriptions = await Promise.all(
-      targets.map((target) => watcher.subscribe(target, () => {}, { backend: "fs-events" })),
-    )
-    await Promise.all(
-      targets.map((target, index) => fs.writeFile(path.join(target, "event.txt"), `${round}-${index}`)),
-    )
-    await new Promise((resolve) => setTimeout(resolve, 10))
-    await Promise.all(subscriptions.map((subscription) => subscription.unsubscribe()))
-
-    if (round % 10 === 0 || round === rounds) sample(round)
-  }
-
-  if (globalThis.gc) {
-    globalThis.gc()
-    await new Promise((resolve) => setTimeout(resolve, 100))
-    sample("after-gc")
-  }
-} finally {
-  await fs.rm(root, { recursive: true, force: true })
-}

packages/core/src/filesystem/fff.node.ts

@@ -1,71 +1,52 @@
+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 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 type Init = InitOptions
 
 export interface Search {
-  items: File[]
-  scores: Array<{ total: number }>
+  items: FileItem[]
+  scores: SearchResult["scores"]
   totalMatched: number
   totalFiles: number
 }
 
 export interface DirSearch {
-  items: Directory[]
-  scores: Array<{ total: number }>
+  items: DirItem[]
+  scores: DirSearchResult["scores"]
   totalMatched: number
   totalDirs: number
 }
 
 export interface MixedSearch {
-  items: Mixed[]
-  scores: Array<{ total: number }>
+  items: MixedItem[]
+  scores: MixedSearchResult["scores"]
   totalMatched: number
   totalFiles: number
   totalDirs: number
 }
 
-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 type File = FileItem
+export type Directory = DirItem
+export type Mixed = MixedItem
+export type Cursor = GrepCursor | null
+export type Hit = GrepMatch
 
 export interface Grep {
-  items: Hit[]
+  items: GrepResult["items"]
   totalMatched: number
   totalFilesSearched: number
   totalFiles: number
@@ -128,11 +109,30 @@ export interface Picker {
 }
 
 export function available() {
-  return false
+  return FileFinder?.isAvailable() ?? false
 }
 
-export function create(_opts: Init): Result<Picker> {
-  return { ok: false, error: "fff unavailable on node runtime" }
+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 * as Fff from "./fff.node"

packages/core/src/filesystem/watcher-binding.ts

@@ -0,0 +1,13 @@
+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"}` : ""}`,
+  )
+}

packages/core/src/filesystem/watcher.ts

@@ -9,23 +9,14 @@ 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 { createRequire } from "node:module"
-
-declare const OPENCODE_LIBC: string | undefined
+import loadBinding from "./watcher-binding"
 
 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 {
-    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")
+    return createWrapper(loadBinding()) as typeof import("@parcel/watcher")
   } catch {
     return
   }

packages/core/src/tool/plugin/shell.ts

@@ -205,8 +205,12 @@ export const Plugin = {
                 yield* context.progress({ shellID: info.id })
 
                 const captureShell = Effect.fn("ShellTool.captureShell")(function* () {
-                  const page = yield* shell.output(info.id, { limit: MAX_CAPTURE_BYTES })
-                  const truncated = page.size > page.cursor
+                  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 notice = truncated ? `\n\n[output truncated; full output saved to: ${info.file}]` : ""
                   return {
                     output: `${page.output || "(no output)"}${notice}`,

packages/core/test/filesystem/watcher-stress.test.ts

@@ -1,46 +0,0 @@
-import watcher from "@parcel/watcher"
-import { describe, expect, test } from "bun:test"
-import fs from "node:fs/promises"
-import os from "node:os"
-import path from "node:path"
-
-const backend = process.platform === "darwin" ? "fs-events" : process.platform === "linux" ? "inotify" : undefined
-const describeNative = backend ? describe : describe.skip
-
-async function descriptors() {
-  if (process.platform === "linux") return fs.readdir("/proc/self/fd").then((entries) => entries.length)
-  return Number(Bun.spawnSync(["sh", "-c", `lsof -p ${process.pid} 2>/dev/null | wc -l`]).stdout.toString().trim())
-}
-
-describeNative("native watcher stress diagnostic", () => {
-  test(
-    "releases native descriptors after repeated subscription churn",
-    async () => {
-      const root = await fs.mkdtemp(path.join(os.tmpdir(), "opencode-watcher-stress-"))
-      const targets = Array.from({ length: 20 }, (_, index) => path.join(root, `project-${index}`))
-      await Promise.all(targets.map((target) => fs.mkdir(target)))
-      const before = await descriptors()
-
-      try {
-        for (let round = 0; round < 100; round++) {
-          const subscriptions = await Promise.all(
-            targets.map((target) => watcher.subscribe(target, () => {}, { backend })),
-          )
-          await Promise.all(
-            targets.map((target, index) => fs.writeFile(path.join(target, "event.txt"), `${round}-${index}`)),
-          )
-          await Promise.all(subscriptions.map((subscription) => subscription.unsubscribe()))
-        }
-
-        Bun.gc(true)
-        await Bun.sleep(250)
-        const after = await descriptors()
-        console.log(JSON.stringify({ subscriptions: targets.length * 100, before, after }))
-        expect(after - before).toBeLessThanOrEqual(4)
-      } finally {
-        await fs.rm(root, { recursive: true, force: true })
-      }
-    },
-    60_000,
-  )
-})

packages/core/test/tool-shell.test.ts

@@ -165,8 +165,8 @@ const bodyExitCommand = isWindows
   : "printf body && exit 7"
 const overflowCommand = (bytes: number) =>
   isWindows
-    ? `[Console]::Out.Write(('x' * ${bytes})); Start-Sleep -Milliseconds 100`
-    : `head -c ${bytes} /dev/zero | tr '\\0' 'x'`
+    ? `[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`
 const progressOverflowCommand = (bytes: number, release: string) =>
   isWindows
     ? `[Console]::Out.Write(('x' * ${bytes})); while (!(Test-Path -LiteralPath '${release}')) { Start-Sleep -Milliseconds 50 }`
@@ -410,7 +410,11 @@ describe("ShellTool", () => {
           Effect.andThen((settled) =>
             Effect.sync(() => {
               expect(settled.metadata).toMatchObject({ exit: 0, truncated: true })
-              expect(settled.content?.[0]).toMatchObject({
+              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({
                 type: "text",
                 text: expect.stringContaining("output truncated; full output saved to:"),
               })

packages/plugin/src/tui/context.ts

@@ -230,11 +230,11 @@ export interface DialogSelectOptions<Value> {
 }
 
 export interface Dialog {
-  /** 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. */
+  /** Shows a dialog. */
+  show(render: () => JSX.Element, onClose?: () => void): void
+  /** Sets the active dialog's presentation options. */
   set(options: DialogOptions): void
-  /** Closes this plugin's active dialog. */
+  /** Closes the active dialog. */
   clear(): void
   alert(options: DialogAlertOptions): Promise<void>
   confirm(options: DialogConfirmOptions): Promise<boolean | undefined>

packages/tui/package.json

@@ -11,7 +11,6 @@
   },
   "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",
@@ -37,9 +36,6 @@
     "./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",

packages/tui/src/app.tsx

@@ -51,6 +51,7 @@ 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"
@@ -65,6 +66,7 @@ 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 { Home } from "./routes/home"
@@ -79,7 +81,6 @@ 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"
@@ -92,9 +93,28 @@ import { AttentionProvider } from "./context/attention"
 
 registerOpencodeSpinner()
 
-const appGlobalBindingCommands = [
-  "session.list",
-  "session.new",
+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 = [
   "session.quick_switch.1",
   "session.quick_switch.2",
   "session.quick_switch.3",
@@ -254,8 +274,6 @@ 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)
@@ -277,113 +295,113 @@ export const run = Effect.fn("Tui.run")(function* (input: TuiInput) {
                     <ErrorBoundary
                       fallback={(error, reset) => <ErrorComponent error={error} reset={reset} mode={mode} />}
                     >
-                    <TuiPathsProvider
-                      value={{
-                        cwd: process.cwd(),
-                        home: global.home,
-                        state: global.state,
-                        worktree: global.data + "/worktree",
-                      }}
-                    >
-                      <TuiLifecycleProvider
+                      <TuiPathsProvider
                         value={{
-                          add(finalizer) {
-                            finalizers.add(finalizer)
-                            return () => finalizers.delete(finalizer)
-                          },
+                          cwd: process.cwd(),
+                          home: global.home,
+                          state: global.state,
+                          worktree: global.data + "/worktree",
                         }}
                       >
-                        <TuiTerminalEnvironmentProvider
+                        <TuiLifecycleProvider
                           value={{
-                            platform: process.platform,
-                            multiplexer: process.env.TMUX ? "tmux" : process.env.STY ? "screen" : undefined,
-                            displayServer: process.env.WAYLAND_DISPLAY
-                              ? "wayland"
-                              : process.env.DISPLAY
-                                ? "x11"
-                                : undefined,
+                            add(finalizer) {
+                              finalizers.add(finalizer)
+                              return () => finalizers.delete(finalizer)
+                            },
                           }}
                         >
-                          <TuiStartupProvider
+                          <TuiTerminalEnvironmentProvider
                             value={{
-                              initialRoute: process.env.OPENCODE_SCRAP
-                                ? { type: "plugin", id: "scrap", name: "scrap" }
-                                : process.env.OPENCODE_ROUTE
-                                  ? JSON.parse(process.env.OPENCODE_ROUTE)
+                              platform: process.platform,
+                              multiplexer: process.env.TMUX ? "tmux" : process.env.STY ? "screen" : undefined,
+                              displayServer: process.env.WAYLAND_DISPLAY
+                                ? "wayland"
+                                : process.env.DISPLAY
+                                  ? "x11"
                                   : 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
-                                        }
-                                      >
-                                        <PluginRuntimeProvider value={pluginRuntime}>
+                            <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
+                                          }
+                                        >
                                           <ClientProvider api={api} service={service}>
                                             <PermissionProvider>
                                               <DataProvider>
                                                 <LocationProvider>
-                                                  <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>
+                                                  </SessionTabsProvider>
                                                 </LocationProvider>
                                               </DataProvider>
                                             </PermissionProvider>
                                           </ClientProvider>
-                                        </PluginRuntimeProvider>
-                                      </RouteProvider>
-                                    </ToastProvider>
-                                  </Keymap.Provider>
-                                </ConfigProvider>
-                              </ArgsProvider>
-                            </ClipboardProvider>
-                          </TuiStartupProvider>
-                        </TuiTerminalEnvironmentProvider>
-                      </TuiLifecycleProvider>
-                    </TuiPathsProvider>
+                                        </RouteProvider>
+                                      </ToastProvider>
+                                    </Keymap.Provider>
+                                  </ConfigProvider>
+                                </ArgsProvider>
+                              </ClipboardProvider>
+                            </TuiStartupProvider>
+                          </TuiTerminalEnvironmentProvider>
+                        </TuiLifecycleProvider>
+                      </TuiPathsProvider>
                     </ErrorBoundary>
                   </TuiAppProvider>
                 </EpilogueProvider>
@@ -419,6 +437,7 @@ 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()
@@ -429,7 +448,6 @@ function App(props: { pair?: DialogPairCredentials }) {
   const location = useLocation()
   const exit = useExit()
   const promptRef = usePromptRef()
-  const pluginRuntime = usePluginRuntime()
   const plugins = usePlugin()
   const clipboard = useClipboard()
 
@@ -623,9 +641,71 @@ function App(props: { pair?: DialogPairCredentials }) {
         title: `Switch to session in quick slot ${i + 1}`,
         category: "Session",
         palette: undefined,
-        run: () => {
-          local.session.quickSwitch(i + 1)
-        },
+        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),
       })),
       {
         name: "model.list",
@@ -1004,6 +1084,18 @@ 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
@@ -1099,16 +1191,15 @@ 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 />

packages/tui/src/component/dialog-config.tsx

@@ -93,6 +93,14 @@ 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",

packages/tui/src/component/dialog-session-list.tsx

@@ -15,6 +15,7 @@ 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()
@@ -25,6 +26,7 @@ export function DialogSessionList() {
   const mode = themes.mode
   const client = useClient()
   const local = useLocal()
+  const sessionTabs = useSessionTabs()
   const toast = useToast()
   const [filter, setFilter] = createSignal("")
   const shortcuts = Keymap.useShortcuts()
@@ -79,6 +81,7 @@ 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
@@ -96,7 +99,7 @@ export function DialogSessionList() {
         .filter((session) => !session.parentID)
         .map((session) => [session.id, session]),
     )
-    const pinned = local.session.pinned().filter((sessionID) => sessionMap.has(sessionID))
+    const pinned = sessionTabs.enabled() ? [] : 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]))
 
@@ -104,7 +107,7 @@ export function DialogSessionList() {
       const directory = session.location.directory
       const footer =
         directory !== data.location.info()?.project.directory ? Locale.truncate(path.basename(directory), 20) : ""
-      const slot = slotByID.get(session.id)
+      const slot = sessionTabs.enabled() ? undefined : slotByID.get(session.id)
       const deleting = toDelete() === session.id
       return {
         title: deleting ? `Press ${shortcuts.get("session.delete")} again to confirm` : session.title,
@@ -164,7 +167,8 @@ export function DialogSessionList() {
         {
           command: "session.pin.toggle",
           title: "pin/unpin",
-          onTrigger: (option: { value: string }) => local.session.togglePin(option.value),
+          hidden: sessionTabs.enabled(),
+          onTrigger: (option) => local.session.togglePin(option.value),
         },
         {
           command: "session.delete",

packages/tui/src/component/session-tabs.tsx

@@ -0,0 +1,250 @@
+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>
+  )
+}

packages/tui/src/component/tab-pulse.tsx

@@ -0,0 +1,266 @@
+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}
+    />
+  )
+}

packages/tui/src/config/index.tsx

@@ -122,6 +122,13 @@ 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({

packages/tui/src/config/v1/keybind.ts

@@ -87,6 +87,13 @@ 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"),
@@ -97,7 +104,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,<leader>down", "Toggle subagent picker"),
+  session_child_first: keybind("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"),
@@ -111,6 +118,15 @@ 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"),
@@ -214,24 +230,9 @@ 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
@@ -289,6 +290,13 @@ 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",
@@ -313,6 +321,15 @@ 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",
@@ -393,19 +410,6 @@ 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]) => [

packages/tui/src/context/session-tabs-model.ts

@@ -0,0 +1,153 @@
+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,
+  }
+}

packages/tui/src/context/session-tabs.tsx

@@ -0,0 +1,267 @@
+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 })
+      },
+    }
+  },
+})

packages/tui/src/feature-plugins/builtins.ts

@@ -1,49 +0,0 @@
-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()
-  }
-}

packages/tui/src/feature-plugins/system/plugins.tsx

@@ -1,280 +1,90 @@
-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 { Plugin } from "@opencode-ai/plugin/tui"
+import { createMemo, createSignal } from "solid-js"
+import { usePlugin } from "../../plugin/context"
 import { DialogSelect, type DialogSelectOption } from "../../ui/dialog-select"
-import { Show, createEffect, createMemo, createSignal } from "solid-js"
-import { Keymap } from "../../context/keymap"
 
-const id = "internal:plugin-manager"
+const id = "opencode.plugins"
 
-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)),
+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>
+          ),
+        }),
+      ),
   )
 
-  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
+  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))
       .then((ok) => {
-        if (!ok) {
-          props.api.ui.toast({
-            variant: "error",
-            message: `Failed to update plugin ${item.id}`,
-          })
-        }
-        setList(props.api.plugins.list())
+        if (ok) return
+        props.context.ui.toast.show({ variant: "error", message: `Failed to update plugin ${current.id}` })
       })
-      .finally(() => {
-        setLock(false)
+      .catch((error) => {
+        props.context.ui.toast.show({
+          variant: "error",
+          message: error instanceof Error ? error.message : String(error),
+        })
       })
+      .finally(() => setLocked(false))
   }
 
   return (
     <DialogSelect
       title="Plugins"
-      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)
-      }}
+      options={options()}
+      locked={locked()}
+      preserveSelection={true}
+      actions={[{ title: "toggle", command: "plugins.toggle", onTrigger: toggle }]}
+      onSelect={toggle}
     />
   )
 }
 
-function show(api: TuiPluginApi) {
-  api.ui.dialog.replace(() => <View api={api} />)
-}
-
-const tui: TuiPlugin = async (api) => {
-  api.keymap.registerLayer({
+function Commands(props: { context: Plugin.Context }) {
+  const plugins = usePlugin()
+  props.context.keymap.layer(() => ({
+    mode: "global",
     commands: [
       {
-        name: "plugins.list",
+        id: "plugins.list",
         title: "Plugins",
-        category: "System",
-        namespace: "palette",
+        group: "System",
+        palette: true,
         run() {
-          show(api)
-        },
-      },
-      {
-        name: "plugins.install",
-        title: "Install plugin",
-        category: "System",
-        namespace: "palette",
-        run() {
-          showInstall(api)
+          props.context.ui.dialog.show(() => <View context={props.context} plugins={plugins} />)
         },
       },
     ],
-    bindings: ["plugins.list", "plugins.install"].flatMap((command) => api.tuiConfig.keybinds.get(command)),
-  })
+  }))
+  return null
 }
 
-const plugin: BuiltinTuiPlugin = {
+export default Plugin.define({
   id,
-  tui,
-}
-
-export default plugin
+  setup(context) {
+    context.ui.slot("app", () => <Commands context={context} />)
+  },
+})

packages/tui/src/feature-plugins/system/scrap.tsx

@@ -1,5 +1,26 @@
 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 }
 
 function Commands(props: { context: Plugin.Context }) {
   props.context.keymap.layer(() => ({
@@ -24,6 +45,50 @@ 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) }))
+  }
 
   props.context.keymap.layer(() => ({
     commands: [
@@ -35,12 +100,60 @@ 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} backgroundColor={theme.background.default}>
-      <box flexGrow={1} />
+    <box
+      width={dimensions().width}
+      height={dimensions().height}
+      flexDirection="column"
+      backgroundColor={theme.background.default}
+    >
+      <SessionTabs controller={controller} animations={animations()} />
       <box
         height={1}
         flexShrink={0}
@@ -49,10 +162,13 @@ function Scrap(props: { context: Plugin.Context }) {
         paddingRight={1}
         flexDirection="row"
       >
-        <text fg={elevatedTheme.text.subdued}>~/code/anomalyco/opencode</text>
+        <text fg={elevatedTheme.text.subdued}>tab playground</text>
         <box flexGrow={1} />
-        <text fg={elevatedTheme.text.subdued}>esc home</text>
+        <text fg={elevatedTheme.text.subdued}>
+          h/l select | t add | d close | b busy | u unread | a attention | m motion | esc home
+        </text>
       </box>
+      <box flexGrow={1} />
     </box>
   )
 }

packages/tui/src/feature-plugins/system/which-key.tsx

@@ -1,607 +0,0 @@
-/** @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

packages/tui/src/mini/footer.command.tsx

@@ -767,19 +767,23 @@ export function RunSubagentSelectBody(props: {
   onRows?: (rows: number) => void
   mono?: boolean
 }) {
+  const [active, setActive] = createSignal(true)
   const entries = createMemo<SubagentEntry[]>(() =>
-    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,
-      }
-    }),
+    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,
+        }
+      }),
   )
   const controller = createSearchablePanelController({
     entries,
@@ -788,6 +792,12 @@ 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,
   })
 
@@ -801,6 +811,7 @@ export function RunSubagentSelectBody(props: {
       theme={props.theme}
       inputRef={controller.inputRef}
       onQuery={controller.setQuery}
+      hint={`tab show ${active() ? "inactive" : "active"}`}
       mono={props.mono}
     >
       <RunFooterMenu

packages/tui/src/plugin/api.ts

@@ -1,40 +0,0 @@
-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>

packages/tui/src/plugin/builtins.ts

@@ -5,6 +5,7 @@ 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 = [
@@ -14,6 +15,7 @@ export const builtins = [
   SidebarLsp,
   SidebarFooter,
   Notifications,
+  Plugins,
   Scrap,
   DiffViewer,
 ]

packages/tui/src/plugin/command-shim.ts

@@ -1,108 +0,0 @@
-// 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)
-    },
-  }
-}

packages/tui/src/plugin/context.tsx

@@ -16,6 +16,7 @@ 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"
@@ -33,6 +34,9 @@ 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>
@@ -44,9 +48,16 @@ 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>
@@ -55,8 +66,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>
@@ -103,28 +114,11 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
     })
     const owned: Dispose[] = []
     let context: Context
-    let activeDialog: symbol | undefined
     const dialogApi: Dialog = {
       show(render, onClose) {
-        const token = Symbol()
-        let closed = false
-        activeDialog = token
-        dialog.replace(
-          () => <PluginContextProvider value={context}>{render()}</PluginContextProvider>,
-          () => {
-            if (closed) return
-            closed = true
-            if (activeDialog === token) activeDialog = undefined
-            onClose?.()
-          },
-        )
-        return () => {
-          if (closed || activeDialog !== token) return
-          dialog.clear()
-        }
+        dialog.replace(() => <PluginContextProvider value={context}>{render()}</PluginContextProvider>, onClose)
       },
       set(options) {
-        if (!activeDialog) return
         dialog.setSize(options.size ?? "medium")
         dialog.setCentered(options.centered ?? false)
       },
@@ -220,7 +214,6 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
         toast.show({ ...options, variant: options.variant ?? "info" })
       },
     }
-    owned.push(async () => dialogApi.clear())
     context = {
       options: item.options ?? {},
       get location() {
@@ -353,7 +346,7 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
         .filter(([, registration]) => registration.active)
         .map(([id]) => deactivate(id)),
     )
-    const entries = config.data.plugins ?? []
+    const entries = [...(await discoverTuiPlugins(paths.cwd)), ...(config.data.plugins ?? [])]
     batch(() => {
       setStore("registrations", reconcileStore({}))
       setStore("states", [])
@@ -361,8 +354,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: {},
@@ -406,23 +399,24 @@ export function PluginProvider(props: ParentProps<{ packages: PackageResolver }>
         continue
       }
 
-      const item = { target, plugin, options }
-      setStore("registrations", item.plugin.id, {
-        ...item,
+      setStore("registrations", plugin.id, {
+        plugin,
+        source: "external",
+        options,
         active: false,
         routes: {},
         slots: {},
         cleanups: [],
       })
-      const error = await activate(item.plugin.id).then(
+      const error = await activate(plugin.id).then(
         () => undefined,
         (error) => (error instanceof Error ? error.message : String(error)),
       )
       setStore("states", (items) => [
-        ...items.filter((state) => state.target !== item.target && (!("id" in state) || state.id !== item.plugin.id)),
+        ...items.filter((state) => state.target !== target && (!("id" in state) || state.id !== plugin.id)),
         error
-          ? { target: item.target, status: "failed", error }
-          : { target: item.target, id: item.plugin.id, status: "active" },
+          ? { target, status: "failed", error }
+          : { target, id: plugin.id, status: "active" },
       ])
     }
   }
@@ -456,6 +450,8 @@ 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) =>

packages/tui/src/plugin/discovery.ts

@@ -0,0 +1,16 @@
+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()
+}

packages/tui/src/plugin/runtime.tsx

@@ -1,79 +0,0 @@
-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
-}

packages/tui/src/plugin/slots.tsx

@@ -1,65 +0,0 @@
-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)
-    },
-  }
-}

packages/tui/src/routes/home.tsx

@@ -5,7 +5,6 @@ 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"
@@ -19,7 +18,6 @@ const placeholder = {
 }
 
 export function Home() {
-  const pluginRuntime = usePluginRuntime()
   const route = useRouteData("home")
   const promptRef = usePromptRef()
   const [ref, setRef] = createSignal<PromptRef | undefined>()
@@ -70,20 +68,11 @@ export function Home() {
         <box flexGrow={1} minHeight={0} />
         <box height={4} minHeight={0} flexShrink={1} />
         <box flexShrink={0}>
-          <pluginRuntime.Slot name="home_logo" mode="replace">
-            <Logo />
-          </pluginRuntime.Slot>
+          <Logo />
         </box>
         <box height={1} minHeight={0} flexShrink={1} />
         <box width="100%" maxWidth={75} zIndex={1000} paddingTop={1} flexShrink={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>
+          <Prompt ref={bind} placeholders={placeholder} disabled={forms().length > 0} />
         </box>
         <box flexGrow={1} minHeight={0} />
       </box>

packages/tui/src/routes/session/composer/index.tsx

@@ -98,12 +98,6 @@ 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,
-      },
     ],
   }))
 

packages/tui/src/routes/session/composer/subagents-tab.tsx

@@ -27,6 +27,7 @@ export function SubagentsTab(props: { sessionID: string }) {
   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()
@@ -72,10 +73,9 @@ export function SubagentsTab(props: { sessionID: string }) {
       }
     }
 
-    return result
+    return result.filter((entry) => (store.active ? entry.status === "running" : entry.status !== "running"))
   })
 
-  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)
+        setStore({ selected: 0, active: true })
       }
       wasActive = false
       return
@@ -140,8 +140,15 @@ export function SubagentsTab(props: { sessionID: string }) {
       label: "Subagents",
       hints: () => {
         const entry = selectedEntry()
-        if (!entry || entry.status !== "running") return []
-        return [{ label: "interrupt", shortcut: shortcuts.get("composer.subagent.interrupt") ?? "" }]
+        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") ?? "",
+          },
+        ]
       },
       onClose: () => {
         const parentID = session()?.parentID
@@ -189,6 +196,16 @@ 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",
@@ -206,7 +223,10 @@ 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 subagents</text>}>
+        <Show
+          when={entries().length > 0}
+          fallback={<text fg={theme.text.subdued}> No {store.active ? "active" : "inactive"} subagents</text>}
+        >
           <For each={entries()}>
             {(entry, index) => {
               const active = createMemo(() => index() === selected())

packages/tui/src/routes/session/index.tsx

@@ -76,7 +76,6 @@ import { useClipboard } from "../../context/clipboard"
 import { nextThinkingMode, reasoningSummary, type ThinkingMode } from "../../context/thinking"
 import { getScrollAcceleration } from "../../util/scroll"
 import { collapseToolOutput } from "../../util/collapse-tool-output"
-import { usePluginRuntime } from "../../plugin/runtime"
 import { Keymap, type KeymapCommand } from "../../context/keymap"
 import { usePathFormatter } from "../../context/path-format"
 import { useLocation } from "../../context/location"
@@ -124,7 +123,6 @@ export function Session() {
     await mkdir(path.dirname(file), { recursive: true })
     await writeFile(file, content)
   }
-  const pluginRuntime = usePluginRuntime()
   const route = useRouteData("session")
   const { navigate } = useRoute()
   const data = useData()
@@ -986,26 +984,15 @@ export function Session() {
                   </Show>
                 </Match>
                 <Match when={!disabled()}>
-                  <pluginRuntime.Slot
-                    name="session_prompt"
-                    mode="replace"
-                    session_id={route.sessionID}
+                  <Prompt
                     visible={true}
-                    disabled={false}
-                    on_submit={toBottom}
                     ref={bind}
-                  >
-                    <Prompt
-                      visible={true}
-                      ref={bind}
-                      disabled={false}
-                      onSubmit={() => {
-                        toBottom()
-                      }}
-                      sessionID={route.sessionID}
-                      right={<pluginRuntime.Slot name="session_prompt_right" session_id={route.sessionID} />}
-                    />
-                  </pluginRuntime.Slot>
+                    disabled={false}
+                    onSubmit={() => {
+                      toBottom()
+                    }}
+                    sessionID={route.sessionID}
+                  />
                 </Match>
               </Switch>
             </box>

packages/tui/src/routes/session/sidebar.tsx

@@ -2,13 +2,11 @@ import { useData } from "../../context/data"
 import { createMemo, Show } from "solid-js"
 import { useThemes } 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 config = useConfig().data
@@ -38,21 +36,14 @@ export function Sidebar(props: { sessionID: string; overlay?: boolean }) {
           }}
         >
           <box flexShrink={0} gap={1} paddingRight={1}>
-            <pluginRuntime.Slot
-              name="sidebar_title"
-              mode="single_winner"
-              session_id={props.sessionID}
-              title={session()!.title}
-            >
-              <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>
+            <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>
             <PluginSlot name="sidebar.content" input={{ sessionID: props.sessionID }} mode="all" />
           </box>
         </scrollbox>

packages/tui/src/ui/animation.ts

@@ -0,0 +1,235 @@
+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
+}

packages/tui/src/util/locale.ts

@@ -67,20 +67,30 @@ export function truncate(str: string, len: number): string {
 
 const graphemeSegmenter = new Intl.Segmenter(undefined, { granularity: "grapheme" })
 
+export function graphemes(str: string) {
+  return Array.from(graphemeSegmenter.segment(str), (item) => item.segment)
+}
+
+export function takeWidth(str: string, width: number) {
+  if (width <= 0) return ""
+  if (stringWidth(str) <= width) return str
+
+  const result: string[] = []
+  let used = 0
+  for (const segment of graphemes(str)) {
+    const next = stringWidth(segment)
+    if (used + next > width) break
+    result.push(segment)
+    used += next
+  }
+  return result.join("")
+}
+
 export function truncateWidth(str: string, width: number): string {
   if (width <= 0) return ""
   if (stringWidth(str) <= width) return str
   if (width === 1) return "…"
-
-  const result: string[] = []
-  let used = 0
-  for (const item of graphemeSegmenter.segment(str)) {
-    const next = stringWidth(item.segment)
-    if (used + next > width - 1) break
-    result.push(item.segment)
-    used += next
-  }
-  return result.join("") + "…"
+  return takeWidth(str, width - 1) + "…"
 }
 
 export function truncateLeft(str: string, len: number): string {

packages/tui/src/util/signal.ts

@@ -1,4 +1,5 @@
 import { createEffect, createSignal, on, onCleanup, type Accessor } from "solid-js"
+import { createAnimatable, tween } from "../ui/animation"
 
 export function createDebouncedSignal<T>(value: T, ms: number): [Accessor<T>, (value: T) => void] {
   const [get, set] = createSignal(value)
@@ -17,35 +18,32 @@ export function createDebouncedSignal<T>(value: T, ms: number): [Accessor<T>, (v
 }
 
 export function createFadeIn(show: Accessor<boolean>, enabled: Accessor<boolean>) {
-  const [alpha, setAlpha] = createSignal(show() ? 1 : 0)
+  const alpha = createAnimatable(
+    { value: show() ? 1 : 0 },
+    {
+      enabled,
+      transition: tween({ duration: 0.16 }),
+    },
+  )
   let revealed = show()
 
   createEffect(
     on([show, enabled], ([visible, animate]) => {
       if (!visible) {
-        setAlpha(0)
+        alpha.jump({ value: 0 })
         return
       }
 
       if (!animate || revealed) {
         revealed = true
-        setAlpha(1)
+        alpha.jump({ value: 1 })
         return
       }
 
-      const start = performance.now()
       revealed = true
-      setAlpha(0)
-
-      const timer = setInterval(() => {
-        const progress = Math.min((performance.now() - start) / 160, 1)
-        setAlpha(progress * progress * (3 - 2 * progress))
-        if (progress >= 1) clearInterval(timer)
-      }, 16)
-
-      onCleanup(() => clearInterval(timer))
+      alpha.animate({ value: 1 })
     }),
   )
 
-  return alpha
+  return () => alpha.value().value
 }

packages/tui/test/component/tab-pulse.test.ts

@@ -0,0 +1,47 @@
+import { expect, test } from "bun:test"
+import { RGBA } from "@opentui/core"
+import { blendTabPulseColor, completionPulseOpacity, unreadGlowIntensity } from "../../src/component/tab-pulse"
+import { tint } from "../../src/theme/color"
+
+test("completion pulse rises quickly and fades over the remaining duration", () => {
+  expect(completionPulseOpacity(0)).toBe(0)
+  expect(completionPulseOpacity(0.08)).toBeCloseTo(0.5)
+  expect(completionPulseOpacity(0.16)).toBe(1)
+  expect(completionPulseOpacity(0.58)).toBeCloseTo(0.5)
+  expect(completionPulseOpacity(1)).toBe(0)
+})
+
+test("unread glow peaks behind the tab number and fades to the normal background", () => {
+  const intensities = Array.from({ length: 22 }, (_, index) => unreadGlowIntensity(index, 22))
+
+  expect(intensities[0]).toBe(1)
+  expect(intensities[1]).toBe(1)
+  expect(intensities[2]).toBeLessThan(1)
+  expect(intensities.slice(1)).toEqual(intensities.slice(1).sort((a, b) => b - a))
+  expect(intensities[13]).toBe(0)
+  expect(intensities.at(-1)).toBe(0)
+})
+
+test("unread glow reaches the normal background on compact tabs", () => {
+  expect(unreadGlowIntensity(0, 8)).toBe(1)
+  expect(unreadGlowIntensity(7, 8)).toBe(0)
+})
+
+test("reuses a color while preserving the original glow and pulse blend stages", () => {
+  const output = RGBA.fromInts(0, 0, 0)
+  const background = RGBA.fromHex("#1a1b26")
+  const glowColor = RGBA.fromHex("#82aaff")
+  const runningColor = RGBA.fromHex("#c8d3f5")
+  const completionColor = RGBA.fromHex("#ff9e64")
+
+  for (const glow of [0, 0.08, 0.16]) {
+    for (const running of [0, 0.01, 0.07, 0.14]) {
+      for (const completion of [0, 0.03, 0.09, 0.18]) {
+        blendTabPulseColor(output, background, glowColor, runningColor, completionColor, glow, running, completion)
+        expect(output.buffer).toEqual(
+          tint(tint(tint(background, glowColor, glow), runningColor, running), completionColor, completion).buffer,
+        )
+      }
+    }
+  }
+})

packages/tui/test/config-v2.test.tsx

@@ -2,13 +2,7 @@
 import { testRender } from "@opentui/solid"
 import { expect, test } from "bun:test"
 import { Schema } from "effect"
-import {
-  resolve,
-  ConfigProvider,
-  Info,
-  useConfig,
-  type Interface,
-} from "../src/config"
+import { resolve, ConfigProvider, Info, useConfig, type Interface } from "../src/config"
 
 test("validates mini replay settings", () => {
   const decode = Schema.decodeUnknownSync(Info)
@@ -20,6 +14,13 @@ test("validates mini replay settings", () => {
   expect(() => decode({ mini: { replay_limit: 1.5 } })).toThrow()
 })
 
+test("validates the session tabs setting", () => {
+  const decode = Schema.decodeUnknownSync(Info)
+
+  expect(decode({ tabs: { enabled: true } })).toEqual({ tabs: { enabled: true } })
+  expect(() => decode({ tabs: { enabled: "on" } })).toThrow()
+})
+
 test("resolves nested config and keybind defaults", () => {
   const config = resolve(
     {

packages/tui/test/config.test.tsx

@@ -100,7 +100,26 @@ test("resolves message navigation defaults", () => {
 test("opens the subagent picker with down", () => {
   const config = resolve({}, { terminalSuspend: true })
 
-  expect(config.keybinds.get("session.child.first")).toMatchObject([{ key: "down,<leader>down" }])
+  expect(config.keybinds.get("session.child.first")).toMatchObject([{ key: "down" }])
+})
+
+test("navigates session tabs with leader arrows", () => {
+  const config = resolve({}, { terminalSuspend: true })
+
+  expect(config.keybinds.get("session.tab.next")).toMatchObject([{ key: "ctrl+tab,<leader>right" }])
+  expect(config.keybinds.get("session.tab.previous")).toMatchObject([{ key: "ctrl+shift+tab,<leader>left" }])
+  expect(config.keybinds.get("session.tab.history.back")).toMatchObject([{ key: "ctrl+o" }])
+  expect(config.keybinds.get("session.tab.history.forward")).toMatchObject([{ key: "ctrl+i" }])
+  expect(config.keybinds.get("session.tab.next_unread")).toMatchObject([{ key: "<leader>down" }])
+  expect(config.keybinds.get("session.tab.previous_unread")).toMatchObject([{ key: "<leader>up" }])
+})
+
+test("preserves pinned session bindings alongside tab bindings", () => {
+  const config = resolve({}, { terminalSuspend: true })
+
+  expect(config.keybinds.get("session.pin.toggle")).toMatchObject([{ key: "ctrl+f" }])
+  expect(config.keybinds.get("session.quick_switch.1")).toMatchObject([{ key: "<leader>1" }])
+  expect(config.keybinds.get("session.tab.select.1")).toMatchObject([{ key: "<leader>1,ctrl+1" }])
 })
 
 test("disables suspend and assigns ctrl+z to undo when unsupported", () => {

packages/tui/test/context/session-tabs-model.test.ts

@@ -0,0 +1,174 @@
+import { describe, expect, test } from "bun:test"
+import {
+  adaptiveSessionTabLayout,
+  closeSessionTab,
+  cycleSessionTab,
+  moveSessionTabHistory,
+  openSessionTab,
+  recordSessionTabHistory,
+  sessionTabComplete,
+} from "../../src/context/session-tabs-model"
+
+describe("session tabs", () => {
+  test("opens each session once and refreshes its title", () => {
+    const tabs = openSessionTab([{ sessionID: "a", title: "Old" }], { sessionID: "a", title: "New" })
+    expect(tabs).toEqual([{ sessionID: "a", title: "New" }])
+    expect(openSessionTab(tabs, { sessionID: "b" })).toEqual([{ sessionID: "a", title: "New" }, { sessionID: "b" }])
+    expect(openSessionTab(tabs, { sessionID: "a", title: "New" })).toBe(tabs)
+  })
+
+  test("selects the right tab then the left tab after closing", () => {
+    expect(closeSessionTab([{ sessionID: "a" }, { sessionID: "b" }, { sessionID: "c" }], "b")).toEqual({
+      tabs: [{ sessionID: "a" }, { sessionID: "c" }],
+      next: "c",
+    })
+    expect(closeSessionTab([{ sessionID: "a" }, { sessionID: "b" }], "b").next).toBe("a")
+    expect(closeSessionTab([{ sessionID: "a" }], "a").next).toBeUndefined()
+  })
+
+  test("cycles through a filtered tab set in either direction", () => {
+    const tabs = ["a", "c", "e"].map((sessionID) => ({ sessionID }))
+    expect(cycleSessionTab(tabs, "c", 1)?.sessionID).toBe("e")
+    expect(cycleSessionTab(tabs, "c", -1)?.sessionID).toBe("a")
+    expect(cycleSessionTab(tabs, "e", 1)?.sessionID).toBe("a")
+    expect(cycleSessionTab(tabs, "b", 1)?.sessionID).toBe("a")
+  })
+
+  test("moves backward and forward through selection history", () => {
+    const tabs = ["a", "b", "c", "d"].map((sessionID) => ({ sessionID }))
+    const history = ["a", "b", "c", "d"].reduce(recordSessionTabHistory, { entries: [], index: -1 })
+    const backToC = moveSessionTabHistory(history, tabs, "d", -1)
+    const backToB = moveSessionTabHistory(backToC.history, tabs, "c", -1)
+    const forwardToC = moveSessionTabHistory(backToB.history, tabs, "b", 1)
+    const forwardToD = moveSessionTabHistory(forwardToC.history, tabs, "c", 1)
+
+    expect([backToC.sessionID, backToB.sessionID, forwardToC.sessionID, forwardToD.sessionID]).toEqual([
+      "c",
+      "b",
+      "c",
+      "d",
+    ])
+  })
+
+  test("truncates forward history after a new selection", () => {
+    const tabs = ["a", "b", "c", "d"].map((sessionID) => ({ sessionID }))
+    const history = ["a", "b", "c"].reduce(recordSessionTabHistory, { entries: [], index: -1 })
+    const back = moveSessionTabHistory(history, tabs, "c", -1)
+    const branched = recordSessionTabHistory(back.history, "d")
+
+    expect(branched).toEqual({ entries: ["a", "b", "d"], index: 2 })
+    expect(moveSessionTabHistory(branched, tabs, "d", 1).sessionID).toBeUndefined()
+  })
+
+  test("skips closed tabs and duplicate entries for the active tab", () => {
+    const tabs = ["a", "b"].map((sessionID) => ({ sessionID }))
+    const history = ["a", "b", "c", "b"].reduce(recordSessionTabHistory, { entries: [], index: -1 })
+
+    expect(moveSessionTabHistory(history, tabs, "b", -1).sessionID).toBe("a")
+    expect(recordSessionTabHistory(history, "b")).toBe(history)
+  })
+
+  test("returns to the latest history entry when no tab is active", () => {
+    const tabs = ["a", "b"].map((sessionID) => ({ sessionID }))
+    const history = ["a", "b"].reduce(recordSessionTabHistory, { entries: [], index: -1 })
+
+    expect(moveSessionTabHistory(history, tabs, undefined, -1).sessionID).toBe("b")
+  })
+
+  test("returns to the previous selected open tab after closing the active tab", () => {
+    const tabs = ["a", "b", "c"].map((sessionID) => ({ sessionID }))
+    const history = ["a", "c"].reduce(recordSessionTabHistory, { entries: [], index: -1 })
+    const closed = closeSessionTab(tabs, "b")
+    const current = recordSessionTabHistory(history, "b")
+
+    expect(moveSessionTabHistory(current, closed.tabs, "b", -1).sessionID).toBe("c")
+  })
+
+  test("reveals completion activity only after session work becomes idle", () => {
+    expect(sessionTabComplete("activity", true)).toBe(false)
+    expect(sessionTabComplete("activity", false)).toBe(true)
+    expect(sessionTabComplete("error", false)).toBe(false)
+  })
+
+  test("expands the active tab and keeps inactive widths equal", () => {
+    const tabs = ["a", "b", "c", "d", "e", "f", "g"].map((sessionID) => ({ sessionID }))
+    const layout = adaptiveSessionTabLayout(tabs, "d", 76)
+
+    expect(layout).toMatchObject({ before: 0, after: 0, start: 0, total: 76 })
+    expect(layout.widths).toEqual([9, 9, 9, 22, 9, 9, 9])
+    expect(layout.widths.reduce((total, width) => total + width, 0)).toBe(76)
+  })
+
+  test("does not reserve an active tab slot on the new session page", () => {
+    const tabs = ["a", "b", "c", "d", "e"].map((sessionID) => ({ sessionID }))
+    const layout = adaptiveSessionTabLayout(tabs, "dummy", 40)
+
+    expect(layout.tabs).toEqual(tabs)
+    expect(layout.widths).toEqual([8, 8, 8, 8, 8])
+    expect(layout.widths.reduce((total, width) => total + width, 0)).toBe(layout.total)
+  })
+
+  test("keeps the visible tab window stable on the new session page", () => {
+    const tabs = Array.from({ length: 10 }, (_, index) => ({ sessionID: String(index) }))
+    const selected = adaptiveSessionTabLayout(tabs, "7", 70)
+    const home = adaptiveSessionTabLayout(tabs, undefined, 70, selected.start)
+
+    expect(selected.start).toBeGreaterThan(0)
+    expect(home.start).toBe(selected.start)
+  })
+
+  test("only swaps old and new active width inside a sticky window", () => {
+    const tabs = ["a", "b", "c", "d", "e", "f", "g"].map((sessionID) => ({ sessionID }))
+    const before = adaptiveSessionTabLayout(tabs, "c", 76)
+    const after = adaptiveSessionTabLayout(tabs, "d", 76, before.start)
+
+    expect(before.start).toBe(after.start)
+    expect(before.widths).toEqual([9, 9, 22, 9, 9, 9, 9])
+    expect(after.widths).toEqual([9, 9, 9, 22, 9, 9, 9])
+  })
+
+  test("shares roomy width equally without changing widths on selection", () => {
+    const tabs = ["a", "b", "c"].map((sessionID) => ({ sessionID }))
+    const before = adaptiveSessionTabLayout(tabs, "a", 100)
+    const after = adaptiveSessionTabLayout(tabs, "c", 100, before.start)
+
+    expect(before.widths).toEqual([32, 32, 32])
+    expect(after.widths).toEqual(before.widths)
+    expect(before.total).toBe(96)
+  })
+
+  test("caps a single tab instead of stretching it across the terminal", () => {
+    const layout = adaptiveSessionTabLayout([{ sessionID: "a" }], "a", 100)
+
+    expect(layout.widths).toEqual([32])
+    expect(layout.total).toBe(32)
+  })
+
+  test("fills roomy space equally below the maximum width", () => {
+    const tabs = ["a", "b", "c", "d"].map((sessionID) => ({ sessionID }))
+
+    expect(adaptiveSessionTabLayout(tabs, "b", 100).widths).toEqual([25, 25, 25, 25])
+  })
+
+  test("expands only the active tab under compact pressure", () => {
+    const tabs = ["a", "b", "c", "d", "e"].map((sessionID) => ({ sessionID }))
+    const before = adaptiveSessionTabLayout(tabs, "c", 100)
+    const after = adaptiveSessionTabLayout(tabs, "d", 100, before.start)
+
+    expect(before.widths).toEqual([19, 19, 24, 19, 19])
+    expect(after.widths).toEqual([19, 19, 19, 24, 19])
+  })
+
+  test("moves the window only after selection crosses its edge", () => {
+    const tabs = Array.from({ length: 10 }, (_, index) => ({ sessionID: String(index) }))
+    const initial = adaptiveSessionTabLayout(tabs, "3", 70)
+    const inside = adaptiveSessionTabLayout(tabs, "4", 70, initial.start)
+    const crossed = adaptiveSessionTabLayout(tabs, "7", 70, inside.start)
+
+    expect(initial.start).toBe(0)
+    expect(inside.start).toBe(0)
+    expect(crossed.start).toBeGreaterThan(0)
+    expect(crossed.tabs.some((tab) => tab.sessionID === "7")).toBe(true)
+    expect(crossed.widths.reduce((total, width) => total + width, 0)).toBe(crossed.total)
+  })
+})

packages/tui/test/mini/footer.view.test.tsx

@@ -820,7 +820,7 @@ test("direct command panel keeps completed subagents available", async () => {
   }
 })
 
-test("direct subagent panel renders active subagents", async () => {
+test("direct subagent panel toggles between active and inactive subagents", async () => {
   const [tabs] = createSignal([
     subagent({ sessionID: "s-1", label: "Explore", description: "Inspect auth flow" }),
     subagent({ sessionID: "s-2", label: "General", description: "Write migration plan", status: "completed" }),
@@ -856,12 +856,22 @@ test("direct subagent panel renders active subagents", async () => {
 
     expect(frame).toContain("Select subagent")
     expect(frame).toContain("Inspect auth flow")
-    expect(frame).toContain("Write migration plan")
-    expect(frame).toContain("done")
+    expect(frame).not.toContain("Write migration plan")
+    expect(frame).not.toContain("done")
+    expect(frame).toContain("tab show inactive")
     expect(frame).not.toContain("┌")
     expect(frame).not.toContain("┃")
     expectPaletteList(list, 0)
-    expect(rows).toBe(8)
+    expect(rows).toBe(7)
+
+    app.mockInput.pressKey("TAB")
+    await app.renderOnce()
+    const inactive = app.captureCharFrame()
+
+    expect(inactive).not.toContain("Inspect auth flow")
+    expect(inactive).toContain("Write migration plan")
+    expect(inactive).toContain("done")
+    expect(inactive).toContain("tab show active")
   } finally {
     app.renderer.destroy()
   }

packages/tui/test/plugin-discovery.test.ts

@@ -0,0 +1,27 @@
+import { mkdir, writeFile } from "node:fs/promises"
+import path from "node:path"
+import { expect, test } from "bun:test"
+import { discoverTuiPlugins } from "../src/plugin/discovery"
+import { tmpdir } from "./fixture/fixture"
+
+test("discovers project TUI plugin files in stable order", async () => {
+  await using tmp = await tmpdir()
+  const directory = path.join(tmp.path, ".opencode", "plugins", "tui")
+  await mkdir(path.join(directory, "nested"), { recursive: true })
+  await Promise.all([
+    writeFile(path.join(directory, "second.tsx"), "export default {}"),
+    writeFile(path.join(directory, "first.js"), "export default {}"),
+    writeFile(path.join(directory, "ignored.json"), "{}"),
+    writeFile(path.join(directory, "nested", "ignored.ts"), "export default {}"),
+  ])
+
+  expect(await discoverTuiPlugins(tmp.path)).toEqual([
+    path.join(directory, "first.js"),
+    path.join(directory, "second.tsx"),
+  ])
+})
+
+test("returns no project TUI plugins when the directory is absent", async () => {
+  await using tmp = await tmpdir()
+  expect(await discoverTuiPlugins(tmp.path)).toEqual([])
+})

packages/tui/test/plugin/runtime.test.ts

@@ -1,50 +0,0 @@
-import { expect, test } from "bun:test"
-import { createPluginRuntime } from "../../src/plugin/runtime"
-
-test("routes use the latest registration and restore previous registrations", () => {
-  const runtime = createPluginRuntime()
-  const first = () => "first"
-  const second = () => "second"
-  runtime.routes.register([{ name: "demo", render: first }])
-  const dispose = runtime.routes.register([{ name: "demo", render: second }])
-
-  expect(runtime.routes.get("demo")).toBe(second)
-  dispose()
-  expect(runtime.routes.get("demo")).toBe(first)
-})
-
-test("facade publishes and clears presentation state", async () => {
-  const runtime = createPluginRuntime()
-  runtime.update({
-    commands: {
-      async activate() {
-        return true
-      },
-      async deactivate() {
-        return true
-      },
-      async add() {
-        return true
-      },
-      async install() {
-        return { ok: true, dir: "/tmp", tui: true }
-      },
-    },
-    status: [
-      {
-        id: "demo",
-        source: "internal",
-        spec: "demo",
-        target: "demo",
-        enabled: true,
-        active: true,
-      },
-    ],
-  })
-
-  expect(await runtime.commands().activate("demo")).toBe(true)
-  expect(runtime.status()).toHaveLength(1)
-  runtime.clear()
-  expect(await runtime.commands().activate("demo")).toBe(false)
-  expect(runtime.status()).toEqual([])
-})

packages/tui/test/plugin/slots.test.tsx

@@ -1,38 +0,0 @@
-/** @jsxImportSource @opentui/solid */
-import { expect, test } from "bun:test"
-import { createSlot, createSolidSlotRegistry, testRender, useRenderer } from "@opentui/solid"
-import { onMount } from "solid-js"
-
-type Slots = {
-  prompt: {}
-}
-
-test("replace slot mounts plugin content once", async () => {
-  let mounts = 0
-
-  const Probe = () => {
-    onMount(() => {
-      mounts += 1
-    })
-    return <box />
-  }
-
-  const App = () => {
-    const registry = createSolidSlotRegistry<Slots>(useRenderer(), {})
-    const Slot = createSlot(registry)
-    registry.register({ id: "plugin", slots: { prompt: () => <Probe /> } })
-
-    return (
-      <Slot name="prompt" mode="replace">
-        <box />
-      </Slot>
-    )
-  }
-
-  const app = await testRender(() => <App />)
-  try {
-    expect(mounts).toBe(1)
-  } finally {
-    app.renderer.destroy()
-  }
-})

packages/tui/test/ui/animation.test.ts

@@ -0,0 +1,45 @@
+import { expect, test } from "bun:test"
+import { createRoot } from "solid-js"
+import { createAnimatable, spring, tween } from "../../src/ui/animation"
+
+test("animates numeric objects and arrays to their targets", async () => {
+  let dispose = () => {}
+  const visual = createRoot((nextDispose) => {
+    dispose = nextDispose
+    return createAnimatable(
+      { widths: [8, 8], selection: 0 },
+      { transition: tween({ duration: 0.02, ease: (progress) => progress }) },
+    )
+  })
+
+  try {
+    visual.animate({ widths: [12, 4], selection: 1 })
+    await Bun.sleep(80)
+    expect(visual.value()).toEqual({ widths: [12, 4], selection: 1 })
+  } finally {
+    dispose()
+  }
+})
+
+test("retains spring state while retargeting and supports immediate jumps", async () => {
+  let dispose = () => {}
+  const visual = createRoot((nextDispose) => {
+    dispose = nextDispose
+    return createAnimatable({ value: 0 }, { transition: spring({ visualDuration: 0.02 }) })
+  })
+
+  try {
+    visual.animate({ value: 1 })
+    await Bun.sleep(20)
+    const target = visual.value().value
+    visual.animate({ value: target })
+    await Bun.sleep(20)
+    expect(visual.value().value).not.toBe(target)
+    await Bun.sleep(80)
+    expect(visual.value().value).toBeCloseTo(target)
+    visual.jump({ value: 0 })
+    expect(visual.value().value).toBe(0)
+  } finally {
+    dispose()
+  }
+})

packages/tui/test/util/locale.test.ts

@@ -7,3 +7,8 @@ test("truncates text from the right by terminal width", () => {
   expect(Locale.truncateWidth("abcdefgh", 1)).toBe("…")
   expect(Locale.truncateWidth("abcdefgh", 0)).toBe("")
 })
+
+test("takes whole graphemes within terminal width", () => {
+  expect(Locale.takeWidth("ab界cd", 4)).toBe("ab界")
+  expect(Locale.graphemes("a👨‍👩‍👧‍👦b")).toEqual(["a", "👨‍👩‍👧‍👦", "b"])
+})

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

@@ -7,6 +7,11 @@ import { Tabs, TabItem } from "@astrojs/starlight/components"
 import config from "../../../config.mjs"
 export const console = config.console
 
+:::note
+OpenCode 1 installs and runs as `opencode`. OpenCode 2 installs separately as `opencode2`, so you can keep both versions
+installed and run them side by side. See the [OpenCode 2 docs](https://opencode.ai/v2/docs/) to install V2.
+:::
+
 [**OpenCode**](/) is an open source AI coding agent. It's available as a terminal-based interface, desktop app, or IDE extension.
 
 ![OpenCode TUI with the opencode theme](../../assets/lander/screenshot.png)
@@ -31,7 +36,8 @@ To use OpenCode in your terminal, you'll need:
 
 ## Install
 
-The easiest way to install OpenCode is through the install script.
+The easiest way to install OpenCode 1 is through the install script. These installation methods provide the `opencode`
+binary and do not replace an `opencode2` installation.
 
 ```bash
 curl -fsSL https://opencode.ai/install | bash

packages/www/content/docs/index.mdx

@@ -8,6 +8,11 @@ description: "Get started with OpenCode."
   wipe your data, things may break, and APIs, configuration, and plugin APIs may change.
 </Callout>
 
+<Callout type="note">
+  OpenCode 2 installs and runs as `opencode2`. It does not replace OpenCode 1's `opencode` binary, so you can keep both
+  versions installed and run them side by side.
+</Callout>
+
 ## Install
 
 <Callout type="note">The curl install script is not available in beta.</Callout>
@@ -37,10 +42,8 @@ You can also install it with the following package managers.
   </Tab>
 </Tabs>
 
-The package uses a trusted postinstall script to select the native binary for your platform. The Bun and pnpm commands
-above explicitly allow that script to run.
-
-<Callout type="note">During beta, the binary is called `opencode2`.</Callout>
+The package uses a trusted postinstall script to select the native `opencode2` binary for your platform. The Bun and pnpm
+commands above explicitly allow that script to run.
 
 ### Homebrew
 

packages/www/content/docs/migrate-v1.mdx

@@ -3,6 +3,11 @@ title: "Migrate from V1"
 description: "Move from OpenCode V1 to the OpenCode 2.0 beta."
 ---
 
+<Callout type="note">
+  OpenCode 1 and OpenCode 2 can be installed side by side. V1 runs as `opencode`, while V2 installs and runs separately as
+  `opencode2`.
+</Callout>
+
 ## Breaking changes
 
 V2 has three intentional breaking changes:
@@ -27,9 +32,6 @@ an expected migration requirement.
   continue to change.
 </Callout>
 
-During the beta, OpenCode V1 and V2 use different executable names. You can keep using `opencode` for V1 while trying V2
-with `opencode2`.
-
 ## Install the beta
 
 Install the beta from the `next` distribution tag: