refactor(app): extract session timeline controller

packages/app/src/pages/session/timeline/controller-projection.ts

@@ -0,0 +1,26 @@
+export function timelineChildTitle(input: {
+  parentID?: string
+  taskDescription?: string
+  title?: string
+  fallback: string
+}) {
+  if (!input.parentID) return input.title ?? ""
+  if (input.taskDescription) return input.taskDescription
+  return input.title?.replace(/\s+\(@[^)]+ subagent\)$/, "") || input.fallback
+}
+
+export function timelineRemovedSessionIDs(sessions: readonly { id: string; parentID?: string }[], sessionID: string) {
+  const removed = new Set([sessionID])
+  const byParent = Map.groupBy(
+    sessions.filter((session) => session.parentID),
+    (session) => session.parentID!,
+  )
+  const visit = (id: string) =>
+    byParent.get(id)?.forEach((child) => {
+      if (removed.has(child.id)) return
+      removed.add(child.id)
+      visit(child.id)
+    })
+  visit(sessionID)
+  return removed
+}

packages/app/src/pages/session/timeline/controller.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, test } from "bun:test"
+import { timelineChildTitle, timelineRemovedSessionIDs } from "./controller-projection"
+
+describe("timeline controller", () => {
+  test("projects child titles from task descriptions and session fallbacks", () => {
+    expect(timelineChildTitle({ title: "Root", fallback: "New session" })).toBe("Root")
+    expect(
+      timelineChildTitle({ parentID: "parent", taskDescription: "Investigate timeline", fallback: "New session" }),
+    ).toBe("Investigate timeline")
+    expect(
+      timelineChildTitle({ parentID: "parent", title: "Fallback (@build subagent)", fallback: "New session" }),
+    ).toBe("Fallback")
+    expect(timelineChildTitle({ parentID: "parent", fallback: "New session" })).toBe("New session")
+  })
+
+  test("collects the removed session and all descendants", () => {
+    const removed = timelineRemovedSessionIDs(
+      [
+        { id: "root" },
+        { id: "child", parentID: "root" },
+        { id: "grandchild", parentID: "child" },
+        { id: "sibling", parentID: "root" },
+        { id: "unrelated" },
+      ],
+      "root",
+    )
+
+    expect([...removed]).toEqual(["root", "child", "grandchild", "sibling"])
+  })
+})

packages/app/src/pages/session/timeline/controller.tsx

@@ -0,0 +1,330 @@
+import type { Message, Part, UserMessage } from "@opencode-ai/sdk/v2"
+import { Button } from "@opencode-ai/ui/button"
+import { Dialog } from "@opencode-ai/ui/dialog"
+import { DialogFooter, DialogHeader, DialogTitleGroup, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
+import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
+import { useNavigate } from "@solidjs/router"
+import { createEffect, createMemo, on, type Accessor } from "solid-js"
+import { createStore, produce } from "solid-js/store"
+import { notifySessionTabsRemoved } from "@/components/titlebar-session-events"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { useServerSDK } from "@/context/server-sdk"
+import { useSettings } from "@/context/settings"
+import { useSDK } from "@/context/sdk"
+import { useSync } from "@/context/sync"
+import { useTabs } from "@/context/tabs"
+import { useSessionKey } from "@/pages/session/session-layout"
+import { legacySessionHref, requireServerKey, sessionHref } from "@/utils/session-route"
+import { sessionTitle } from "@/utils/session-title"
+import { showToast } from "@/utils/toast"
+import { timelineChildTitle, timelineRemovedSessionIDs } from "./controller-projection"
+import { createTimelineProjection } from "./projection"
+
+const emptyMessages: Message[] = []
+const emptyParts: Part[] = []
+const idle = { type: "idle" as const }
+
+const taskDescription = (part: Part, sessionID: string): string | undefined => {
+  if (part.type !== "tool" || part.tool !== "task") return undefined
+  const metadata = "metadata" in part.state ? part.state.metadata : undefined
+  if (metadata?.sessionId !== sessionID) return undefined
+  const value = part.state.input?.description
+  if (typeof value === "string" && value) return value
+  return undefined
+}
+
+export function createTimelineController(input: { userMessages: Accessor<UserMessage[]> }) {
+  const navigate = useNavigate()
+  const serverSDK = useServerSDK()
+  const sdk = useSDK()
+  const sync = useSync()
+  const settings = useSettings()
+  const tabs = useTabs()
+  const dialog = useDialog()
+  const language = useLanguage()
+  const platform = usePlatform()
+  const { params, sessionKey } = useSessionKey()
+  const sessionID = createMemo(() => params.id)
+  const status = createMemo(() => {
+    const id = sessionID()
+    if (!id) return idle
+    return sync().data.session_status[id] ?? idle
+  })
+  const messages = createMemo(() => (sessionID() ? (sync().data.message[sessionID()!] ?? []) : []))
+  const projectedMessages = createMemo(() => {
+    const id = sessionID()
+    if (!id) return []
+    const visible = new Set(input.userMessages().map((message) => message.id))
+    const boundary = messages().find((message) => message.role === "user" && !visible.has(message.id))?.id
+    const projected = sync().data.session_message[id] ?? []
+    return boundary ? projected.filter((message) => message.id < boundary) : projected
+  })
+  const info = createMemo(() => {
+    const id = sessionID()
+    return id ? sync().session.get(id) : undefined
+  })
+  const titleValue = createMemo(() => info()?.title)
+  const titleLabel = createMemo(() => sessionTitle(titleValue()))
+  const shareUrl = createMemo(() => info()?.share?.url)
+  const shareEnabled = createMemo(() => sync().data.config.share !== "disabled")
+  const parentID = createMemo(() => info()?.parentID)
+  const parent = createMemo(() => {
+    const id = parentID()
+    return id ? sync().session.get(id) : undefined
+  })
+  const parentMessages = createMemo(() => {
+    const id = parentID()
+    return id ? (sync().data.message[id] ?? emptyMessages) : emptyMessages
+  })
+  const parentTitle = createMemo(() => sessionTitle(parent()?.title) ?? language.t("command.session.new"))
+  const parts = (messageID: string) => sync().data.part[messageID] ?? emptyParts
+  const part = (messageID: string, partID: string) => parts(messageID).find((item) => item.id === partID)
+  const childTaskDescription = createMemo(() => {
+    const id = sessionID()
+    if (!id) return undefined
+    return parentMessages()
+      .flatMap((message) => parts(message.id))
+      .map((item) => taskDescription(item, id))
+      .findLast((value): value is string => !!value)
+  })
+  const childTitle = createMemo(() => {
+    return timelineChildTitle({
+      parentID: parentID(),
+      taskDescription: childTaskDescription(),
+      title: titleLabel(),
+      fallback: language.t("command.session.new"),
+    })
+  })
+  const showHeader = createMemo(() => !!(titleValue() || parentID()))
+  const projection = createTimelineProjection({
+    messages,
+    userMessages: input.userMessages,
+    sessionMessages: projectedMessages,
+    parts,
+    status,
+    showReasoningSummaries: settings.general.showReasoningSummaries,
+    inlineComments: settings.general.newLayoutDesigns,
+  })
+  const [pending, setPending] = createStore({ rename: false, share: false, unshare: false })
+
+  const errorMessage = (error: unknown) => {
+    if (error && typeof error === "object" && "data" in error) {
+      const data = error.data
+      if (data && typeof data === "object" && "message" in data && typeof data.message === "string") return data.message
+    }
+    if (error instanceof Error) return error.message
+    return language.t("common.requestFailed")
+  }
+  const rename = async (title: string) => {
+    const id = sessionID()
+    if (!id || pending.rename) return false
+    const next = title.trim()
+    if (!next || next === (titleLabel() ?? "")) return true
+    setPending("rename", true)
+    const success = await sdk()
+      .api.session.rename({ sessionID: id, title: next })
+      .then(() => true)
+      .catch((error) => {
+        showToast({ title: language.t("common.requestFailed"), description: errorMessage(error) })
+        return false
+      })
+    setPending("rename", false)
+    if (!success) return false
+    sync().set(
+      produce((draft) => {
+        const index = draft.session.findIndex((session) => session.id === id)
+        if (index !== -1) draft.session[index].title = next
+      }),
+    )
+    return true
+  }
+  const share = async () => {
+    const id = sessionID()
+    if (!id || pending.share || !shareEnabled()) return
+    setPending("share", true)
+    await serverSDK()
+      .client.session.share({ sessionID: id })
+      .catch((error) => console.error("Failed to share session", error))
+    setPending("share", false)
+  }
+  const unshare = async () => {
+    const id = sessionID()
+    if (!id || pending.unshare || !shareEnabled()) return
+    setPending("unshare", true)
+    await serverSDK()
+      .client.session.unshare({ sessionID: id })
+      .catch((error) => console.error("Failed to unshare session", error))
+    setPending("unshare", false)
+  }
+  const href = (id: string) =>
+    params.serverKey ? sessionHref(requireServerKey(params.serverKey), id) : legacySessionHref(sdk().directory, id)
+  const navigateAfterRemoval = (id: string, parent?: string, next?: string) => {
+    if (params.id !== id) return
+    if (parent) return navigate(href(parent))
+    if (next) return navigate(href(next))
+    if (params.serverKey)
+      return tabs.newDraft({ server: requireServerKey(params.serverKey), directory: sdk().directory })
+    navigate(`/${params.dir}/session`)
+  }
+  const archive = async (id: string) => {
+    const session = sync().session.get(id)
+    if (!session || (await sdk().protocol) !== "v1") return
+    const index = sync().data.session.findIndex((item) => item.id === id)
+    const next = index === -1 ? undefined : (sync().data.session[index + 1] ?? sync().data.session[index - 1])
+    await sdk()
+      .client.session.update({ sessionID: id, directory: sdk().directory, time: { archived: Date.now() } })
+      .then(() => {
+        sync().set(
+          produce((draft) => {
+            const index = draft.session.findIndex((item) => item.id === id)
+            if (index !== -1) draft.session.splice(index, 1)
+          }),
+        )
+        sync().session.evict(id)
+        void navigateAfterRemoval(id, session.parentID, next?.id)
+        notifySessionTabsRemoved({ directory: sdk().directory, sessionIDs: [id] })
+      })
+      .catch((error) => showToast({ title: language.t("common.requestFailed"), description: errorMessage(error) }))
+  }
+  const remove = async (id: string) => {
+    const session = sync().session.get(id)
+    if (!session) return false
+    const sessions = sync().data.session.filter((item) => !item.parentID && !item.time?.archived)
+    const index = sessions.findIndex((item) => item.id === id)
+    const next = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])
+    const success = await sdk()
+      .api.session.remove({ sessionID: id })
+      .then(() => true)
+      .catch((error) => {
+        showToast({ title: language.t("session.delete.failed.title"), description: errorMessage(error) })
+        return false
+      })
+    if (!success) return false
+    const removed = timelineRemovedSessionIDs(sync().data.session, id)
+    void navigateAfterRemoval(id, session.parentID, next?.id)
+    sync().set(produce((draft) => void (draft.session = draft.session.filter((item) => !removed.has(item.id)))))
+    removed.forEach((sessionID) => sync().session.evict(sessionID))
+    notifySessionTabsRemoved({ directory: sdk().directory, sessionIDs: [...removed] })
+    return true
+  }
+
+  function DeleteDialog(props: { sessionID: string }) {
+    const name = createMemo(
+      () => sessionTitle(sync().session.get(props.sessionID)?.title) ?? language.t("command.session.new"),
+    )
+    const confirm = async () => {
+      await remove(props.sessionID)
+      dialog.close()
+    }
+    if (settings.general.newLayoutDesigns())
+      return (
+        <DialogV2 fit>
+          <DialogHeader hideClose>
+            <DialogTitleGroup
+              title={language.t("session.delete.title")}
+              description={language.t("session.delete.confirm", { name: name() })}
+            />
+          </DialogHeader>
+          <DialogFooter>
+            <ButtonV2 variant="ghost" onClick={() => dialog.close()}>
+              {language.t("common.cancel")}
+            </ButtonV2>
+            <ButtonV2 variant="danger" onClick={confirm}>
+              {language.t("session.delete.button")}
+            </ButtonV2>
+          </DialogFooter>
+        </DialogV2>
+      )
+    return (
+      <Dialog title={language.t("session.delete.title")} fit>
+        <div class="flex flex-col gap-4 pl-6 pr-2.5 pb-3">
+          <div class="flex flex-col gap-1">
+            <span class="text-14-regular text-text-strong">
+              {language.t("session.delete.confirm", { name: name() })}
+            </span>
+          </div>
+          <div class="flex justify-end gap-2">
+            <Button variant="ghost" size="large" onClick={() => dialog.close()}>
+              {language.t("common.cancel")}
+            </Button>
+            <Button variant="primary" size="large" onClick={confirm}>
+              {language.t("session.delete.button")}
+            </Button>
+          </div>
+        </div>
+      </Dialog>
+    )
+  }
+
+  createEffect(
+    on(
+      () => [parentID(), childTaskDescription()] as const,
+      ([id, description]) => {
+        if (!id || description || sync().data.message[id] !== undefined) return
+        void sync().session.sync(id)
+      },
+      { defer: true },
+    ),
+  )
+
+  return {
+    data: {
+      sessionKey,
+      sessionID,
+      status,
+      titleValue,
+      titleLabel,
+      shareUrl,
+      shareEnabled,
+      parentID,
+      parentTitle,
+      childTitle,
+      showHeader,
+      parts,
+      part,
+      projection,
+      newLayoutDesigns: settings.general.newLayoutDesigns,
+      showReasoningSummaries: settings.general.showReasoningSummaries,
+      shellToolPartsExpanded: settings.general.shellToolPartsExpanded,
+      editToolPartsExpanded: settings.general.editToolPartsExpanded,
+    },
+    pending: {
+      rename: () => pending.rename,
+      share: () => pending.share,
+      unshare: () => pending.unshare,
+    },
+    action: {
+      rename,
+      share,
+      unshare,
+      archive,
+      showDelete: (id: string) => dialog.show(() => <DeleteDialog sessionID={id} />),
+      navigateParent: () => {
+        const id = parentID()
+        if (id) navigate(href(id))
+      },
+      viewShare: () => {
+        const url = shareUrl()
+        if (url) platform.openLink(url)
+      },
+      copyShareUrl: async () => {
+        const url = shareUrl()
+        if (!url) return
+        await navigator.clipboard.writeText(url).then(
+          () =>
+            showToast({
+              variant: "success",
+              icon: "circle-check",
+              title: language.t("session.share.copy.copied"),
+              description: url,
+            }),
+          (error) => showToast({ title: language.t("common.requestFailed"), description: errorMessage(error) }),
+        )
+      },
+    },
+  }
+}
+
+export type TimelineController = ReturnType<typeof createTimelineController>

packages/app/src/pages/session/timeline/message-timeline.tsx

@@ -11,10 +11,8 @@ import {
   type Accessor,
   type JSX,
 } from "solid-js"
-import { createStore, produce } from "solid-js/store"
+import { createStore } from "solid-js/store"
 import { Dynamic } from "solid-js/web"
-import { useNavigate } from "@solidjs/router"
-import { useMutation } from "@tanstack/solid-query"
 import { createVirtualizer, defaultRangeExtractor, elementScroll, type VirtualItem } from "@tanstack/solid-virtual"
 import { Accordion } from "@opencode-ai/ui/accordion"
 import { Button } from "@opencode-ai/ui/button"
@@ -35,8 +33,6 @@ import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
-import { Dialog } from "@opencode-ai/ui/dialog"
-import { DialogFooter, DialogHeader, DialogTitleGroup, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
 import { InlineInput } from "@opencode-ai/ui/inline-input"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { SessionRetry } from "@opencode-ai/session-ui/session-retry"
@@ -45,43 +41,22 @@ import { StickyAccordionHeader } from "@opencode-ai/ui/sticky-accordion-header"
 import { TextField } from "@opencode-ai/ui/text-field"
 import { TextReveal } from "@opencode-ai/ui/text-reveal"
 import { TextShimmer } from "@opencode-ai/ui/text-shimmer"
-import type {
-  AssistantMessage,
-  Message as MessageType,
-  Part as PartType,
-  ToolPart,
-  UserMessage,
-} from "@opencode-ai/sdk/v2"
-import { showToast } from "@/utils/toast"
+import type { AssistantMessage, ToolPart, UserMessage } from "@opencode-ai/sdk/v2"
 import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
 import { Popover as KobaltePopover } from "@kobalte/core/popover"
 import { normalize } from "@opencode-ai/session-ui/session-diff"
 import { useFileComponent } from "@opencode-ai/ui/context/file"
 import { shouldMarkBoundaryGesture, normalizeWheelDelta } from "@/pages/session/message-gesture"
 import { SessionContextUsage } from "@/components/session-context-usage"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { useLanguage } from "@/context/language"
-import { useSessionKey } from "@/pages/session/session-layout"
-import { useServerSDK } from "@/context/server-sdk"
-import { usePlatform } from "@/context/platform"
-import { useSettings } from "@/context/settings"
-import { useTabs } from "@/context/tabs"
-import { legacySessionHref, requireServerKey, sessionHref } from "@/utils/session-route"
-import { useSDK } from "@/context/sdk"
-import { useSync } from "@/context/sync"
-import { notifySessionTabsRemoved } from "@/components/titlebar-session-events"
-import { sessionTitle } from "@/utils/session-title"
 import { scheduleConnectedMeasure } from "./measure"
 import { observeElementOffsetReconnectAware } from "./observe-element-offset"
-import { createTimelineProjection } from "./projection"
 import { MessageComment, SummaryDiff, TimelineRow, TimelineRowMap } from "./rows"
 import { filterVirtualIndexes } from "./virtual-items"
+import { createTimelineController, type TimelineController } from "./controller"
 
-const emptyMessages: MessageType[] = []
-const emptyParts: PartType[] = []
 const emptyTools: ToolPart[] = []
 const emptyAssistantMessages: AssistantMessage[] = []
-const idle = { type: "idle" as const }
 
 type FramedTimelineRow = Exclude<TimelineRow.TimelineRow, { _tag: "TurnGap" }>
 type TimelineRowByTag<T extends TimelineRow.TimelineRow["_tag"]> = Extract<TimelineRow.TimelineRow, { _tag: T }>
@@ -89,14 +64,6 @@ type TimelineRowByTag<T extends TimelineRow.TimelineRow["_tag"]> = Extract<Timel
 const timelineFallbackItemSize = 60
 const timelineCache = new Map<string, { measurements: VirtualItem[]; toolOpen: Record<string, boolean | undefined> }>()
 
-const taskDescription = (part: PartType, sessionID: string) => {
-  if (part.type !== "tool" || part.tool !== "task") return
-  const metadata = "metadata" in part.state ? part.state.metadata : undefined
-  if (metadata?.sessionId !== sessionID) return
-  const value = part.state.input?.description
-  if (typeof value === "string" && value) return value
-}
-
 const boundaryTarget = (root: HTMLElement, target: EventTarget | null) => {
   const current = target instanceof Element ? target : undefined
   const nested = current?.closest("[data-scrollable]")
@@ -237,7 +204,7 @@ function TimelineDiffView(props: { diff: SummaryDiff }) {
   )
 }
 
-export function MessageTimeline(props: {
+type MessageTimelineProps = {
   actions?: UserActions
   scroll: { overflow: boolean; bottom: boolean; jump: boolean }
   onResumeScroll: () => void
@@ -257,88 +224,42 @@ export function MessageTimeline(props: {
   setRevealMessage?: (fn: (id: string) => void) => void
   setScrollToEnd?: (fn: () => void) => void
   setHistoryAnchor?: (handlers: { capture: () => void; restore: (done: boolean) => void }) => void
-}) {
-  let touchGesture: number | undefined
+}
 
-  const navigate = useNavigate()
-  const serverSDK = useServerSDK()
-  const sdk = useSDK()
-  const sync = useSync()
-  const settings = useSettings()
-  const tabs = useTabs()
-  const dialog = useDialog()
+export function MessageTimeline(props: MessageTimelineProps) {
+  const controller = createTimelineController({ userMessages: () => props.userMessages })
+  return (
+    <MessageTimelineView {...props} data={controller.data} action={controller.action} pending={controller.pending} />
+  )
+}
+
+function MessageTimelineView(
+  props: MessageTimelineProps & {
+    data: TimelineController["data"]
+    action: TimelineController["action"]
+    pending: TimelineController["pending"]
+  },
+) {
+  let touchGesture: number | undefined
   const language = useLanguage()
-  const { params, sessionKey } = useSessionKey()
-  const ownerSessionKey = sessionKey()
+  const ownerSessionKey = props.data.sessionKey()
   const cached = timelineCache.get(ownerSessionKey)
   const initialMeasurements = cached?.measurements
   const coldBottomMount = !initialMeasurements?.length && props.shouldAnchorBottom()
-  const platform = usePlatform()
 
   const [listRoot, setListRoot] = createSignal<HTMLDivElement>()
-  const sessionID = createMemo(() => params.id)
-  const sessionStatus = createMemo(() => {
-    const id = sessionID()
-    if (!id) return idle
-    return sync().data.session_status[id] ?? idle
-  })
-  const sessionMessages = createMemo(() => (sessionID() ? (sync().data.message[sessionID()!] ?? []) : []))
-  const projectedMessages = createMemo(() => {
-    const id = sessionID()
-    if (!id) return []
-    const visible = new Set(props.userMessages.map((message) => message.id))
-    const boundary = sessionMessages().find((message) => message.role === "user" && !visible.has(message.id))?.id
-    const messages = sync().data.session_message[id] ?? []
-    return boundary ? messages.filter((message) => message.id < boundary) : messages
-  })
-  const info = createMemo(() => {
-    const id = sessionID()
-    if (!id) return
-    return sync().session.get(id)
-  })
-  const titleValue = createMemo(() => info()?.title)
-  const titleLabel = createMemo(() => sessionTitle(titleValue()))
-  const shareUrl = createMemo(() => info()?.share?.url)
-  const shareEnabled = createMemo(() => sync().data.config.share !== "disabled")
-  const parentID = createMemo(() => info()?.parentID)
-  const parent = createMemo(() => {
-    const id = parentID()
-    if (!id) return
-    return sync().session.get(id)
-  })
-  const parentMessages = createMemo(() => {
-    const id = parentID()
-    if (!id) return emptyMessages
-    return sync().data.message[id] ?? emptyMessages
-  })
-  const parentTitle = createMemo(() => sessionTitle(parent()?.title) ?? language.t("command.session.new"))
-  const getMsgParts = (msgId: string) => sync().data.part[msgId] ?? emptyParts
-  const getMsgPart = (messageID: string, partID: string) => getMsgParts(messageID).find((part) => part.id === partID)
-  const childTaskDescription = createMemo(() => {
-    const id = sessionID()
-    if (!id) return
-    return parentMessages()
-      .flatMap((message) => getMsgParts(message.id))
-      .map((part) => taskDescription(part, id))
-      .findLast((value): value is string => !!value)
-  })
-  const childTitle = createMemo(() => {
-    if (!parentID()) return titleLabel() ?? ""
-    if (childTaskDescription()) return childTaskDescription()
-    const value = titleLabel()?.replace(/\s+\(@[^)]+ subagent\)$/, "")
-    if (value) return value
-    return language.t("command.session.new")
-  })
-  const showHeader = createMemo(() => !!(titleValue() || parentID()))
-  const projection = createTimelineProjection({
-    messages: sessionMessages,
-    userMessages: () => props.userMessages,
-    sessionMessages: projectedMessages,
-    parts: getMsgParts,
-    status: sessionStatus,
-    showReasoningSummaries: settings.general.showReasoningSummaries,
-    inlineComments: settings.general.newLayoutDesigns,
-  })
+  const sessionID = props.data.sessionID
+  const sessionStatus = props.data.status
+  const titleLabel = props.data.titleLabel
+  const shareUrl = props.data.shareUrl
+  const shareEnabled = props.data.shareEnabled
+  const parentID = props.data.parentID
+  const parentTitle = props.data.parentTitle
+  const childTitle = props.data.childTitle
+  const showHeader = props.data.showHeader
+  const getMsgParts = props.data.parts
+  const getMsgPart = props.data.part
+  const projection = props.data.projection
   const activeMessageID = projection.activeMessageID
   const assistantMessagesByParent = projection.assistantMessagesByParent
   const lastAssistantGroupKey = projection.lastAssistantGroupKey
@@ -528,9 +449,9 @@ export function MessageTimeline(props: {
     virtualizer.scrollToEnd()
   }
 
-  let measuredSessionKey = sessionKey()
+  let measuredSessionKey = props.data.sessionKey()
   createEffect(() => {
-    const key = sessionKey()
+    const key = props.data.sessionKey()
     timelineRows().length
     if (measuredSessionKey !== key) {
       measuredSessionKey = key
@@ -643,88 +564,6 @@ export function MessageTimeline(props: {
     props.setScrollRef(undefined)
   })
 
-  const viewShare = () => {
-    const url = shareUrl()
-    if (!url) return
-    platform.openLink(url)
-  }
-
-  const errorMessage = (err: unknown) => {
-    if (err && typeof err === "object" && "data" in err) {
-      const data = (err as { data?: { message?: string } }).data
-      if (data?.message) return data.message
-    }
-    if (err instanceof Error) return err.message
-    return language.t("common.requestFailed")
-  }
-
-  const shareMutation = useMutation(() => ({
-    mutationFn: (id: string) => serverSDK().client.session.share({ sessionID: id }),
-    onError: (err) => {
-      console.error("Failed to share session", err)
-    },
-  }))
-
-  const unshareMutation = useMutation(() => ({
-    mutationFn: (id: string) => serverSDK().client.session.unshare({ sessionID: id }),
-    onError: (err) => {
-      console.error("Failed to unshare session", err)
-    },
-  }))
-
-  const titleMutation = useMutation(() => ({
-    mutationFn: (input: { id: string; title: string }) =>
-      sdk().api.session.rename({ sessionID: input.id, title: input.title }),
-    onSuccess: (_, input) => {
-      sync().set(
-        produce((draft) => {
-          const index = draft.session.findIndex((s) => s.id === input.id)
-          if (index !== -1) draft.session[index].title = input.title
-        }),
-      )
-      setTitle("editing", false)
-    },
-    onError: (err) => {
-      showToast({
-        title: language.t("common.requestFailed"),
-        description: errorMessage(err),
-      })
-    },
-  }))
-
-  const shareSession = () => {
-    const id = sessionID()
-    if (!id || shareMutation.isPending) return
-    if (!shareEnabled()) return
-    shareMutation.mutate(id)
-  }
-
-  const unshareSession = () => {
-    const id = sessionID()
-    if (!id || unshareMutation.isPending) return
-    if (!shareEnabled()) return
-    unshareMutation.mutate(id)
-  }
-  const copyShareUrl = () => {
-    const url = shareUrl()
-    if (!url) return
-    void navigator.clipboard
-      .writeText(url)
-      .then(() =>
-        showToast({
-          variant: "success",
-          icon: "circle-check",
-          title: language.t("session.share.copy.copied"),
-          description: url,
-        }),
-      )
-      .catch((err: unknown) =>
-        showToast({
-          title: language.t("common.requestFailed"),
-          description: errorMessage(err),
-        }),
-      )
-  }
   const selectShareUrlText: JSX.EventHandler<HTMLDivElement, MouseEvent> = (event) => {
     const selection = window.getSelection()
     if (!selection) return
@@ -736,7 +575,7 @@ export function MessageTimeline(props: {
 
   createEffect(
     on(
-      sessionKey,
+      props.data.sessionKey,
       () =>
         setTitle({
           draft: "",
@@ -749,18 +588,6 @@ export function MessageTimeline(props: {
     ),
   )
 
-  createEffect(
-    on(
-      () => [parentID(), childTaskDescription()] as const,
-      ([id, description]) => {
-        if (!id || description) return
-        if (sync().data.message[id] !== undefined) return
-        void sync().session.sync(id)
-      },
-      { defer: true },
-    ),
-  )
-
   const openTitleEditor = () => {
     if (!sessionID() || parentID()) return
     setTitle({ editing: true, draft: titleLabel() ?? "" })
@@ -772,193 +599,12 @@ export function MessageTimeline(props: {
   }
 
   const closeTitleEditor = () => {
-    if (titleMutation.isPending) return
+    if (props.pending.rename()) return
     setTitle("editing", false)
   }
 
-  const saveTitleEditor = () => {
-    const id = sessionID()
-    if (!id) return
-    if (titleMutation.isPending) return
-
-    const next = title.draft.trim()
-    if (!next || next === (titleLabel() ?? "")) {
-      setTitle("editing", false)
-      return
-    }
-
-    titleMutation.mutate({ id, title: next })
-  }
-
-  const navigateAfterSessionRemoval = (sessionID: string, parentID?: string, nextSessionID?: string) => {
-    if (params.id !== sessionID) return
-    const href = (id: string) =>
-      params.serverKey ? sessionHref(requireServerKey(params.serverKey), id) : legacySessionHref(sdk().directory, id)
-    if (parentID) {
-      navigate(href(parentID))
-      return
-    }
-    if (nextSessionID) {
-      navigate(href(nextSessionID))
-      return
-    }
-    if (params.serverKey) {
-      tabs.newDraft({ server: requireServerKey(params.serverKey), directory: sdk().directory })
-      return
-    }
-    navigate(`/${params.dir}/session`)
-  }
-
-  const archiveSession = async (sessionID: string) => {
-    const session = sync().session.get(sessionID)
-    if (!session) return
-    if ((await sdk().protocol) !== "v1") return
-
-    const sessions = sync().data.session ?? []
-    const index = sessions.findIndex((s) => s.id === sessionID)
-    const nextSession = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])
-
-    await sdk()
-      .client.session.update({ sessionID, directory: sdk().directory, time: { archived: Date.now() } })
-      .then(() => {
-        sync().set(
-          produce((draft) => {
-            const index = draft.session.findIndex((s) => s.id === sessionID)
-            if (index !== -1) draft.session.splice(index, 1)
-          }),
-        )
-        sync().session.evict(sessionID)
-        navigateAfterSessionRemoval(sessionID, session.parentID, nextSession?.id)
-        notifySessionTabsRemoved({ directory: sdk().directory, sessionIDs: [sessionID] })
-      })
-      .catch((err) => {
-        showToast({
-          title: language.t("common.requestFailed"),
-          description: errorMessage(err),
-        })
-      })
-  }
-
-  const deleteSession = async (sessionID: string) => {
-    const session = sync().session.get(sessionID)
-    if (!session) return false
-
-    const sessions = (sync().data.session ?? []).filter((s) => !s.parentID && !s.time?.archived)
-    const index = sessions.findIndex((s) => s.id === sessionID)
-    const nextSession = index === -1 ? undefined : (sessions[index + 1] ?? sessions[index - 1])
-
-    const result = await sdk()
-      .api.session.remove({ sessionID })
-      .then(() => true)
-      .catch((err) => {
-        showToast({
-          title: language.t("session.delete.failed.title"),
-          description: errorMessage(err),
-        })
-        return false
-      })
-
-    if (!result) return false
-
-    const removed = new Set<string>([sessionID])
-    const byParent = new Map<string, string[]>()
-    for (const item of sync().data.session) {
-      const parentID = item.parentID
-      if (!parentID) continue
-      const existing = byParent.get(parentID)
-      if (existing) {
-        existing.push(item.id)
-        continue
-      }
-      byParent.set(parentID, [item.id])
-    }
-
-    const stack = [sessionID]
-    while (stack.length) {
-      const parentID = stack.pop()
-      if (!parentID) continue
-
-      const children = byParent.get(parentID)
-      if (!children) continue
-
-      for (const child of children) {
-        if (removed.has(child)) continue
-        removed.add(child)
-        stack.push(child)
-      }
-    }
-
-    navigateAfterSessionRemoval(sessionID, session.parentID, nextSession?.id)
-
-    sync().set(
-      produce((draft) => {
-        draft.session = draft.session.filter((s) => !removed.has(s.id))
-      }),
-    )
-
-    for (const id of removed) {
-      sync().session.evict(id)
-    }
-    notifySessionTabsRemoved({ directory: sdk().directory, sessionIDs: [...removed] })
-    return true
-  }
-
-  const navigateParent = () => {
-    const id = parentID()
-    if (!id) return
-    navigate(
-      params.serverKey ? sessionHref(requireServerKey(params.serverKey), id) : legacySessionHref(sdk().directory, id),
-    )
-  }
-
-  function DialogDeleteSession(props: { sessionID: string }) {
-    const name = createMemo(
-      () => sessionTitle(sync().session.get(props.sessionID)?.title) ?? language.t("command.session.new"),
-    )
-    const handleDelete = async () => {
-      await deleteSession(props.sessionID)
-      dialog.close()
-    }
-
-    if (settings.general.newLayoutDesigns())
-      return (
-        <DialogV2 fit>
-          <DialogHeader hideClose>
-            <DialogTitleGroup
-              title={language.t("session.delete.title")}
-              description={language.t("session.delete.confirm", { name: name() })}
-            />
-          </DialogHeader>
-          <DialogFooter>
-            <ButtonV2 variant="ghost" onClick={() => dialog.close()}>
-              {language.t("common.cancel")}
-            </ButtonV2>
-            <ButtonV2 variant="danger" onClick={handleDelete}>
-              {language.t("session.delete.button")}
-            </ButtonV2>
-          </DialogFooter>
-        </DialogV2>
-      )
-
-    return (
-      <Dialog title={language.t("session.delete.title")} fit>
-        <div class="flex flex-col gap-4 pl-6 pr-2.5 pb-3">
-          <div class="flex flex-col gap-1">
-            <span class="text-14-regular text-text-strong">
-              {language.t("session.delete.confirm", { name: name() })}
-            </span>
-          </div>
-          <div class="flex justify-end gap-2">
-            <Button variant="ghost" size="large" onClick={() => dialog.close()}>
-              {language.t("common.cancel")}
-            </Button>
-            <Button variant="primary" size="large" onClick={handleDelete}>
-              {language.t("session.delete.button")}
-            </Button>
-          </div>
-        </div>
-      </Dialog>
-    )
+  const saveTitleEditor = async () => {
+    if (await props.action.rename(title.draft)) setTitle("editing", false)
   }
 
   const workingTurn = (userMessageID: string) => sessionStatus().type !== "idle" && activeMessageID() === userMessageID
@@ -1037,7 +683,7 @@ export function MessageTimeline(props: {
     const defaultOpen = createMemo(() => {
       const item = part()
       if (!item) return
-      return partDefaultOpen(item, settings.general.shellToolPartsExpanded(), settings.general.editToolPartsExpanded())
+      return partDefaultOpen(item, props.data.shellToolPartsExpanded(), props.data.editToolPartsExpanded())
     })
 
     return (
@@ -1050,7 +696,7 @@ export function MessageTimeline(props: {
                 message={message()}
                 showAssistantCopyPartID={assistantCopyPartID(row().userMessageID)}
                 turnDurationMs={turnDurationMs(row().userMessageID)}
-                useV2Actions={settings.general.newLayoutDesigns()}
+                useV2Actions={props.data.newLayoutDesigns()}
                 defaultOpen={defaultOpen()}
                 toolOpen={toolOpen[part().id] ?? defaultOpen()}
                 onToolOpenChange={(open) => setToolOpen(part().id, open)}
@@ -1113,8 +759,8 @@ export function MessageTimeline(props: {
                       <div
                         classList={{
                           "shrink-0 max-w-[260px] rounded-[6px] border-border-weak-base bg-background-stronger px-2.5 py-2": true,
-                          "border-[0.5px]": settings.general.newLayoutDesigns(),
-                          border: !settings.general.newLayoutDesigns(),
+                          "border-[0.5px]": props.data.newLayoutDesigns(),
+                          border: !props.data.newLayoutDesigns(),
                         }}
                       >
                         <div class="flex items-center gap-1.5 min-w-0 text-11-medium text-text-strong">
@@ -1149,7 +795,7 @@ export function MessageTimeline(props: {
           if (m?.role === "user") return m
         })
         const messageComments = createMemo(() => {
-          if (!settings.general.newLayoutDesigns()) return []
+          if (!props.data.newLayoutDesigns()) return []
           return getMsgParts(userMessageRow().userMessageID).flatMap((part) => MessageComment.fromPart(part) ?? [])
         })
         return (
@@ -1162,7 +808,7 @@ export function MessageTimeline(props: {
                       message={message()}
                       parts={getMsgParts(userMessageRow().userMessageID)}
                       actions={props.actions}
-                      useV2Actions={settings.general.newLayoutDesigns()}
+                      useV2Actions={props.data.newLayoutDesigns()}
                       comments={messageComments()}
                     />
                   </div>
@@ -1210,7 +856,7 @@ export function MessageTimeline(props: {
             <div data-slot="session-turn-message-container" class="w-full px-4 md:px-5">
               <TimelineThinkingRow
                 reasoningHeading={thinkingRow().reasoningHeading}
-                showReasoningSummaries={settings.general.showReasoningSummaries()}
+                showReasoningSummaries={props.data.showReasoningSummaries()}
               />
             </div>
           </TimelineRowFrame>
@@ -1326,16 +972,16 @@ export function MessageTimeline(props: {
       <div
         class="absolute left-1/2 -translate-x-1/2 z-[60] pointer-events-none transition-all duration-200 ease-out"
         classList={{
-          "bottom-8": settings.general.newLayoutDesigns(),
-          "bottom-6": !settings.general.newLayoutDesigns(),
+          "bottom-8": props.data.newLayoutDesigns(),
+          "bottom-6": !props.data.newLayoutDesigns(),
           "opacity-100 translate-y-0 scale-100": props.scroll.overflow && props.scroll.jump,
           "opacity-0 translate-y-2 pointer-events-none": !props.scroll.overflow || !props.scroll.jump,
-          "scale-[0.8]": (!props.scroll.overflow || !props.scroll.jump) && settings.general.newLayoutDesigns(),
-          "scale-95": (!props.scroll.overflow || !props.scroll.jump) && !settings.general.newLayoutDesigns(),
+          "scale-[0.8]": (!props.scroll.overflow || !props.scroll.jump) && props.data.newLayoutDesigns(),
+          "scale-95": (!props.scroll.overflow || !props.scroll.jump) && !props.data.newLayoutDesigns(),
         }}
       >
         <Show
-          when={settings.general.newLayoutDesigns()}
+          when={props.data.newLayoutDesigns()}
           fallback={
             <button
               type="button"
@@ -1398,22 +1044,22 @@ export function MessageTimeline(props: {
             classList={{
               "sticky top-0 z-30": true,
               "bg-[linear-gradient(to_bottom,var(--v2-background-bg-base)_48px,transparent)]":
-                settings.general.newLayoutDesigns(),
+                props.data.newLayoutDesigns(),
               "bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]":
-                !settings.general.newLayoutDesigns(),
+                !props.data.newLayoutDesigns(),
               "w-full": true,
               "pb-4": true,
               "pr-3": true,
-              "pl-2.5": settings.general.newLayoutDesigns(),
-              "pl-2 md:pl-4": !settings.general.newLayoutDesigns(),
-              "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered && !settings.general.newLayoutDesigns(),
+              "pl-2.5": props.data.newLayoutDesigns(),
+              "pl-2 md:pl-4": !props.data.newLayoutDesigns(),
+              "md:max-w-200 md:mx-auto 2xl:max-w-[1000px]": props.centered && !props.data.newLayoutDesigns(),
             }}
           >
             <div class="h-12 w-full flex items-center justify-between gap-2">
               <div
                 classList={{
                   "flex items-center gap-1 min-w-0 flex-1": true,
-                  "pr-3": !settings.general.newLayoutDesigns(),
+                  "pr-3": !props.data.newLayoutDesigns(),
                 }}
               >
                 <div class="flex items-center min-w-0 flex-1 w-full">
@@ -1422,7 +1068,7 @@ export function MessageTimeline(props: {
                       type="button"
                       data-slot="session-title-parent"
                       class="min-w-0 max-w-[40%] truncate pl-2 text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-faint transition-colors hover:text-v2-text-text-muted"
-                      onClick={navigateParent}
+                      onClick={props.action.navigateParent}
                     >
                       {parentTitle()}
                     </button>
@@ -1443,8 +1089,8 @@ export function MessageTimeline(props: {
                           classList={{
                             "truncate text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base": true,
                             "w-fit rounded-[6px] px-2 py-1 hover:bg-v2-overlay-simple-overlay-hover":
-                              settings.general.newLayoutDesigns(),
-                            "grow-1 min-w-0": !settings.general.newLayoutDesigns(),
+                              props.data.newLayoutDesigns(),
+                            "grow-1 min-w-0": !props.data.newLayoutDesigns(),
                           }}
                           onClick={openTitleEditor}
                         >
@@ -1458,15 +1104,14 @@ export function MessageTimeline(props: {
                         }}
                         data-slot="session-title-child"
                         value={title.draft}
-                        disabled={titleMutation.isPending}
+                        disabled={props.pending.rename()}
                         classList={{
                           "block text-[13px] font-[530] leading-4 tracking-[-0.04px] text-v2-text-text-base": true,
-                          "w-full flex-1 grow-1 min-w-0 pl-1 -ml-1 rounded-[6px]": !settings.general.newLayoutDesigns(),
-                          "field-sizing-content self-start rounded-[6px] px-2 py-1 ":
-                            settings.general.newLayoutDesigns(),
+                          "w-full flex-1 grow-1 min-w-0 pl-1 -ml-1 rounded-[6px]": !props.data.newLayoutDesigns(),
+                          "field-sizing-content self-start rounded-[6px] px-2 py-1 ": props.data.newLayoutDesigns(),
                         }}
                         style={{
-                          "--inline-input-shadow": settings.general.newLayoutDesigns()
+                          "--inline-input-shadow": props.data.newLayoutDesigns()
                             ? "none"
                             : "var(--shadow-xs-border-select)",
                         }}
@@ -1494,17 +1139,17 @@ export function MessageTimeline(props: {
                   <div
                     classList={{
                       "shrink-0 flex items-center": true,
-                      "gap-2": settings.general.newLayoutDesigns(),
-                      "gap-3": !settings.general.newLayoutDesigns(),
+                      "gap-2": props.data.newLayoutDesigns(),
+                      "gap-3": !props.data.newLayoutDesigns(),
                     }}
                   >
                     <SessionContextUsage
                       placement="bottom"
-                      buttonAppearance={settings.general.newLayoutDesigns() ? "v2" : "default"}
+                      buttonAppearance={props.data.newLayoutDesigns() ? "v2" : "default"}
                     />
                     <Show when={!parentID()}>
                       <Show
-                        when={settings.general.newLayoutDesigns()}
+                        when={props.data.newLayoutDesigns()}
                         fallback={
                           <DropdownMenu
                             gutter={4}
@@ -1567,13 +1212,11 @@ export function MessageTimeline(props: {
                                     </DropdownMenu.ItemLabel>
                                   </DropdownMenu.Item>
                                 </Show>
-                                <DropdownMenu.Item onSelect={() => void archiveSession(id)}>
+                                <DropdownMenu.Item onSelect={() => void props.action.archive(id)}>
                                   <DropdownMenu.ItemLabel>{language.t("common.archive")}</DropdownMenu.ItemLabel>
                                 </DropdownMenu.Item>
                                 <DropdownMenu.Separator />
-                                <DropdownMenu.Item
-                                  onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id} />)}
-                                >
+                                <DropdownMenu.Item onSelect={() => props.action.showDelete(id)}>
                                   <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
                                 </DropdownMenu.Item>
                               </DropdownMenu.Content>
@@ -1638,11 +1281,11 @@ export function MessageTimeline(props: {
                                   {language.t("session.share.action.share")}...
                                 </MenuV2.Item>
                               </Show>
-                              <MenuV2.Item onSelect={() => void archiveSession(id)}>
+                              <MenuV2.Item onSelect={() => void props.action.archive(id)}>
                                 {language.t("common.archive")}
                               </MenuV2.Item>
                               <MenuV2.Separator />
-                              <MenuV2.Item onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id} />)}>
+                              <MenuV2.Item onSelect={() => props.action.showDelete(id)}>
                                 {language.t("common.delete")}...
                               </MenuV2.Item>
                             </MenuV2.Content>
@@ -1654,7 +1297,7 @@ export function MessageTimeline(props: {
                         open={share.open}
                         anchorRef={() => more}
                         placement="bottom-end"
-                        gutter={settings.general.newLayoutDesigns() ? 6 : 4}
+                        gutter={props.data.newLayoutDesigns() ? 6 : 4}
                         modal={false}
                         onOpenChange={(open) => {
                           if (open) setShare("dismiss", null)
@@ -1666,7 +1309,7 @@ export function MessageTimeline(props: {
                             data-component="popover-content"
                             classList={{
                               "flex w-80 max-w-none flex-col items-start gap-3 rounded-[10px] border-0 bg-v2-background-bg-layer-01 p-3 shadow-[var(--v2-elevation-floating)]":
-                                settings.general.newLayoutDesigns(),
+                                props.data.newLayoutDesigns(),
                             }}
                             style={{ "min-width": "320px" }}
                             onEscapeKeyDown={(event) => {
@@ -1686,7 +1329,7 @@ export function MessageTimeline(props: {
                             }}
                           >
                             <Show
-                              when={settings.general.newLayoutDesigns()}
+                              when={props.data.newLayoutDesigns()}
                               fallback={
                                 <div class="flex flex-col p-3">
                                   <div class="flex flex-col gap-1">
@@ -1707,10 +1350,10 @@ export function MessageTimeline(props: {
                                           size="large"
                                           variant="primary"
                                           class="w-full"
-                                          onClick={shareSession}
-                                          disabled={shareMutation.isPending}
+                                          onClick={() => void props.action.share()}
+                                          disabled={props.pending.share()}
                                         >
-                                          {shareMutation.isPending
+                                          {props.pending.share()
                                             ? language.t("session.share.action.publishing")
                                             : language.t("session.share.action.publish")}
                                         </Button>
@@ -1730,10 +1373,10 @@ export function MessageTimeline(props: {
                                             size="large"
                                             variant="secondary"
                                             class="w-full shadow-none border border-border-weak-base"
-                                            onClick={unshareSession}
-                                            disabled={unshareMutation.isPending}
+                                            onClick={() => void props.action.unshare()}
+                                            disabled={props.pending.unshare()}
                                           >
-                                            {unshareMutation.isPending
+                                            {props.pending.unshare()
                                               ? language.t("session.share.action.unpublishing")
                                               : language.t("session.share.action.unpublish")}
                                           </Button>
@@ -1741,8 +1384,8 @@ export function MessageTimeline(props: {
                                             size="large"
                                             variant="primary"
                                             class="w-full"
-                                            onClick={viewShare}
-                                            disabled={unshareMutation.isPending}
+                                            onClick={props.action.viewShare}
+                                            disabled={props.pending.unshare()}
                                           >
                                             {language.t("session.share.action.view")}
                                           </Button>
@@ -1770,10 +1413,10 @@ export function MessageTimeline(props: {
                                     <ButtonV2
                                       variant="contrast"
                                       class="w-full"
-                                      onClick={shareSession}
-                                      disabled={shareMutation.isPending}
+                                      onClick={() => void props.action.share()}
+                                      disabled={props.pending.share()}
                                     >
-                                      {shareMutation.isPending
+                                      {props.pending.share()
                                         ? language.t("session.share.action.publishing")
                                         : language.t("session.share.action.publish")}
                                     </ButtonV2>
@@ -1799,7 +1442,7 @@ export function MessageTimeline(props: {
                                         variant="ghost-muted"
                                         icon={<IconV2 name="outline-copy" />}
                                         aria-label={language.t("session.share.copy.copyLink")}
-                                        onClick={copyShareUrl}
+                                        onClick={() => void props.action.copyShareUrl()}
                                       />
                                       <IconButtonV2
                                         type="button"
@@ -1807,18 +1450,18 @@ export function MessageTimeline(props: {
                                         variant="ghost-muted"
                                         icon={<IconV2 name="outline-square-arrow" />}
                                         aria-label={language.t("session.share.action.view")}
-                                        onClick={viewShare}
-                                        disabled={unshareMutation.isPending}
+                                        onClick={props.action.viewShare}
+                                        disabled={props.pending.unshare()}
                                       />
                                     </div>
                                     <div class="flex w-full">
                                       <ButtonV2
                                         variant="outline"
                                         class="w-full"
-                                        onClick={unshareSession}
-                                        disabled={unshareMutation.isPending}
+                                        onClick={() => void props.action.unshare()}
+                                        disabled={props.pending.unshare()}
                                       >
-                                        {unshareMutation.isPending
+                                        {props.pending.unshare()
                                           ? language.t("session.share.action.unpublishing")
                                           : language.t("session.share.action.unpublish")}
                                       </ButtonV2>

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/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/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/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

@@ -81,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"
@@ -275,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)
@@ -354,49 +351,47 @@ export const run = Effect.fn("Tui.run")(function* (input: TuiInput) {
                                               : undefined
                                           }
                                         >
-                                          <PluginRuntimeProvider value={pluginRuntime}>
-                                            <ClientProvider api={api} service={service}>
-                                              <PermissionProvider>
-                                                <DataProvider>
-                                                  <LocationProvider>
-                                                    <SessionTabsProvider>
-                                                      <ThemeProvider mode={mode}>
-                                                        <ThemeErrorToast />
-                                                        <LocalProvider>
-                                                          <PromptStashProvider>
-                                                            <DialogProvider>
-                                                              <FrecencyProvider>
-                                                                <PromptHistoryProvider>
-                                                                  <PromptRefProvider>
-                                                                    <EditorContextProvider>
-                                                                      <AttentionProvider>
-                                                                        <PluginProvider packages={input.packages}>
-                                                                          <App
-                                                                            pair={
-                                                                              input.server.endpoint.auth
-                                                                                ? input.server.endpoint.auth
-                                                                                : {
-                                                                                    username: "opencode",
-                                                                                    password: "",
-                                                                                  }
-                                                                            }
-                                                                          />
-                                                                        </PluginProvider>
-                                                                      </AttentionProvider>
-                                                                    </EditorContextProvider>
-                                                                  </PromptRefProvider>
-                                                                </PromptHistoryProvider>
-                                                              </FrecencyProvider>
-                                                            </DialogProvider>
-                                                          </PromptStashProvider>
-                                                        </LocalProvider>
-                                                      </ThemeProvider>
-                                                    </SessionTabsProvider>
-                                                  </LocationProvider>
-                                                </DataProvider>
-                                              </PermissionProvider>
-                                            </ClientProvider>
-                                          </PluginRuntimeProvider>
+                                          <ClientProvider api={api} service={service}>
+                                            <PermissionProvider>
+                                              <DataProvider>
+                                                <LocationProvider>
+                                                  <SessionTabsProvider>
+                                                    <ThemeProvider mode={mode}>
+                                                      <ThemeErrorToast />
+                                                      <LocalProvider>
+                                                        <PromptStashProvider>
+                                                          <DialogProvider>
+                                                            <FrecencyProvider>
+                                                              <PromptHistoryProvider>
+                                                                <PromptRefProvider>
+                                                                  <EditorContextProvider>
+                                                                    <AttentionProvider>
+                                                                      <PluginProvider packages={input.packages}>
+                                                                        <App
+                                                                          pair={
+                                                                            input.server.endpoint.auth
+                                                                              ? input.server.endpoint.auth
+                                                                              : {
+                                                                                  username: "opencode",
+                                                                                  password: "",
+                                                                                }
+                                                                          }
+                                                                        />
+                                                                      </PluginProvider>
+                                                                    </AttentionProvider>
+                                                                  </EditorContextProvider>
+                                                                </PromptRefProvider>
+                                                              </PromptHistoryProvider>
+                                                            </FrecencyProvider>
+                                                          </DialogProvider>
+                                                        </PromptStashProvider>
+                                                      </LocalProvider>
+                                                    </ThemeProvider>
+                                                  </SessionTabsProvider>
+                                                </LocationProvider>
+                                              </DataProvider>
+                                            </PermissionProvider>
+                                          </ClientProvider>
                                         </RouteProvider>
                                       </ToastProvider>
                                     </Keymap.Provider>
@@ -453,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()
 
@@ -1203,7 +1197,7 @@ function App(props: { pair?: DialogPairCredentials }) {
         <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 > 1 && route.data.type !== "plugin"}>
+              <Show when={sessionTabs.enabled() && sessionTabs.tabs().length > 0 && route.data.type !== "plugin"}>
                 <SessionTabs />
               </Show>
               <Switch>

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

@@ -94,9 +94,9 @@ export const settings: Setting[] = [
     keywords: ["transcript", "messages"],
   },
   {
-    title: "Tabs",
-    category: "Session",
-    path: ["session", "tabs"],
+    title: "Enabled",
+    category: "Tabs",
+    path: ["tabs", "enabled"],
     default: false,
     values: [false, true],
     labels: ["off", "on"],

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

@@ -4,19 +4,33 @@ 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 } from "../context/session-tabs-model"
+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"
 
-export function SessionTabs() {
-  const tabs = useSessionTabs()
+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()]
@@ -48,7 +62,7 @@ export function SessionTabs() {
     activities: layout().tabs.map((tab) => Number(statuses().get(tab.sessionID)!.complete)),
   }))
   const motion = createAnimatable(targets(), {
-    enabled: () => config.animations ?? true,
+    enabled: animations,
     transition: spring({ visualDuration: 0.1 }),
   })
   const identity = createMemo(() =>
@@ -167,10 +181,12 @@ export function SessionTabs() {
               onMouseUp={() => tabs.select(tab.sessionID)}
             >
               <TabPulse
-                enabled={config.animations ?? true}
+                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()}
               />

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

@@ -1,12 +1,13 @@
 import { OptimizedBuffer, Renderable, RGBA, type RenderableOptions, type RenderContext } from "@opentui/core"
 import { extend } from "@opentui/solid"
-import { tint } from "../theme/color"
 
 type TabPulseOptions = RenderableOptions<TabPulseRenderable> & {
   enabled?: boolean
   active?: boolean
   complete?: boolean
+  glow?: boolean
   color?: RGBA
+  glowColor?: RGBA
   completionColor?: RGBA
   backgroundColor?: RGBA
 }
@@ -19,6 +20,9 @@ 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))
@@ -33,17 +37,44 @@ 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
@@ -52,7 +83,9 @@ class TabPulseRenderable extends Renderable {
     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()
   }
@@ -103,12 +136,24 @@ class TabPulseRenderable extends Renderable {
     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
@@ -144,15 +189,19 @@ class TabPulseRenderable extends Renderable {
   }
 
   protected override renderSelf(buffer: OptimizedBuffer): void {
-    if (!this.visible || this.isDestroyed || !this._enabled || this.width <= 0) return
-    const runningOpacity = this._active
-      ? 1
-      : this.fadeClock === undefined
-        ? 0
-        : 1 - smootherstep(clamp(this.fadeClock / RUN_FADE_OUT))
+    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.completionClock === undefined ? 0 : completionPulseOpacity(this.completionClock / COMPLETION_DURATION)
-    if (runningOpacity === 0 && completionOpacity === 0) return
+      !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
@@ -163,14 +212,20 @@ class TabPulseRenderable extends Renderable {
         intensityAt(index, front, RUN_HEAD, RUN_TAIL),
         intensityAt(index, secondFront, RUN_HEAD, RUN_TAIL),
       )
-      const running = tint(this._backgroundColor, this._color, intensity * 0.14 * runningOpacity)
-      buffer.setCell(
-        this.screenX + index,
-        this.screenY,
-        " ",
-        RGBA.defaultForeground(),
-        tint(running, this._completionColor, completionOpacity * 0.18),
+      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)
     }
   }
 }
@@ -187,7 +242,9 @@ export function TabPulse(props: {
   enabled?: boolean
   active: boolean
   complete?: boolean
+  glow?: boolean
   color: RGBA
+  glowColor?: RGBA
   completionColor?: RGBA
   backgroundColor: RGBA
 }) {
@@ -199,7 +256,9 @@ export function TabPulse(props: {
       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

@@ -120,11 +120,15 @@ export const Info = Schema.Struct({
       markdown: Schema.optional(Schema.Literals(["source", "rendered"])).annotate({
         description: "Show Markdown syntax markers or conceal them in rendered transcript content",
       }),
-      tabs: Schema.optional(Schema.Boolean).annotate({
+    }),
+  ).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 transcript presentation settings" }),
+  ).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

@@ -230,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
@@ -425,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.tsx

@@ -34,7 +34,7 @@ export const { use: useSessionTabs, provider: SessionTabsProvider } = createSimp
     const event = useEvent()
     const config = useConfig().data
     const filePath = path.join(useTuiPaths().state, "session-tabs.json")
-    const enabled = () => config.session?.tabs ?? false
+    const enabled = () => config.tabs?.enabled ?? false
     const state: {
       pending: boolean
       saving: boolean

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

@@ -48,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>
@@ -59,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>
@@ -107,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)
       },
@@ -224,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() {
@@ -365,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: {},
@@ -410,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" },
       ])
     }
   }
@@ -460,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/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/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/test/component/tab-pulse.test.ts

@@ -1,5 +1,7 @@
 import { expect, test } from "bun:test"
-import { completionPulseOpacity } from "../../src/component/tab-pulse"
+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)
@@ -8,3 +10,38 @@ test("completion pulse rises quickly and fades over the remaining duration", ()
   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

@@ -17,8 +17,8 @@ test("validates mini replay settings", () => {
 test("validates the session tabs setting", () => {
   const decode = Schema.decodeUnknownSync(Info)
 
-  expect(decode({ session: { tabs: true } })).toEqual({ session: { tabs: true } })
-  expect(() => decode({ session: { tabs: "on" } })).toThrow()
+  expect(decode({ tabs: { enabled: true } })).toEqual({ tabs: { enabled: true } })
+  expect(() => decode({ tabs: { enabled: "on" } })).toThrow()
 })
 
 test("resolves nested config and keybind defaults", () => {

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/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/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: