refactor(app): establish v2 session controller

packages/app/src/pages/session.tsx

@@ -57,7 +57,7 @@ import { ServerConnection, serverName, useServer } from "@/context/server"
 import { useSettings } from "@/context/settings"
 import { useSync } from "@/context/sync"
 import { useTabs } from "@/context/tabs"
-import { TerminalProvider, useTerminal } from "@/context/terminal"
+import { TerminalProvider } from "@/context/terminal"
 import { PromptInput } from "@/components/prompt-input"
 import { PromptInputV2Composer, usePromptInputV2Controller } from "@/components/prompt-input-v2"
 import { useSettingsCommand } from "@/components/settings-dialog"
@@ -70,11 +70,11 @@ import {
   createSessionComposerRegionController,
   SessionComposerRegion,
 } from "@/pages/session/composer"
-import { createOpenReviewFile, createSessionTabs, createSizing, shouldShowFileTree } from "@/pages/session/helpers"
+import { createOpenReviewFile, createSizing, shouldShowFileTree } from "@/pages/session/helpers"
 import { MessageTimeline } from "@/pages/session/timeline/message-timeline"
 import { createTimelineModel } from "@/pages/session/timeline/model"
 import { type DiffStyle, SessionReviewTab, type SessionReviewTabProps } from "@/pages/session/review-tab"
-import { useSessionLayout } from "@/pages/session/session-layout"
+import { createSessionController } from "@/pages/session/session-controller"
 import { restorePromptModel, syncPromptModel, syncSessionModel } from "@/pages/session/session-model-helpers"
 import {
   clampSessionPanelWidth,
@@ -101,7 +101,6 @@ import { extractPromptFromParts } from "@/utils/prompt"
 import { formatServerError, isLocalSessionNotFoundError, isSessionNotFoundError } from "@/utils/server-errors"
 import { legacySessionHref, requireServerKey, sessionHref } from "@/utils/session-route"
 import { useUsageExceededDialogs } from "./session/usage-exceeded-dialogs"
-import { createSessionOwnership } from "./session/session-ownership"
 import { createSessionLineage } from "./session/session-lineage"
 
 type FollowupItem = FollowupDraft & { id: string }
@@ -366,15 +365,28 @@ export default function Page() {
   const prompt = usePrompt()
   const comments = useComments()
   const command = useCommand()
-  const terminal = useTerminal()
   const [searchParams, setSearchParams] = useSearchParams<{ prompt?: string }>()
   const location = useLocation()
   const navigate = useNavigate()
-  const { params, sessionKey, workspaceKey, tabs, view } = useSessionLayout()
+  const isDesktop = createMediaQuery("(min-width: 768px)")
+  const newSessionDesign = createMemo(() => settings.general.newLayoutDesigns())
+  const canReview = createMemo(() => !!sync().project)
+  const session = createSessionController({
+    review: isDesktop,
+    hasReview: canReview,
+    fileBrowser: (sessionID) => newSessionDesign() && isDesktop() && !!sessionID,
+  })
+  const params = session.identity.params
+  const sessionKey = session.identity.sessionKey
+  const workspaceKey = session.identity.workspaceKey
+  const tabs = session.layout.tabs
+  const view = session.layout.view
   const reviewMode = () => view().review.mode() ?? "git"
   const reviewFile = () => view().review.file()
-  const sessionOwnership = createSessionOwnership(sessionKey)
-  const newSessionDesign = createMemo(() => settings.general.newLayoutDesigns())
+  const sessionOwnership = session.ownership
+  const info = session.data.info
+  const isChildSession = session.data.isChild
+  const revertMessageID = session.data.revertMessageID
 
   createEffect(() => {
     if (!prompt.ready()) return
@@ -433,8 +445,8 @@ export default function Page() {
         const current = tabs().tabs()
         if (current.all.length > 0 || current.active) return
 
-        const all = normalizeTabs(from.all)
-        const active = from.active ? normalizeTab(from.active) : undefined
+        const all = session.tabs.normalizeAll(from.all)
+        const active = from.active ? session.tabs.normalize(from.active) : undefined
         tabs().setAll(all)
         tabs().setActive(active && all.includes(active) ? active : all[0])
 
@@ -445,7 +457,6 @@ export default function Page() {
     ),
   )
 
-  const isDesktop = createMediaQuery("(min-width: 768px)")
   const size = createSizing()
   const desktopReviewOpen = createMemo(() => isDesktop() && view().reviewPanel.opened())
   const desktopV2ReviewOpen = createMemo(() => newSessionDesign() && desktopReviewOpen() && !!params.id)
@@ -510,46 +521,16 @@ export default function Page() {
     }),
   )
 
-  function normalizeTab(tab: string) {
-    if (!tab.startsWith("file://")) return tab
-    return file.tab(tab)
-  }
-
-  function normalizeTabs(list: string[]) {
-    const seen = new Set<string>()
-    const next: string[] = []
-    for (const item of list) {
-      const value = normalizeTab(item)
-      if (seen.has(value)) continue
-      seen.add(value)
-      next.push(value)
-    }
-    return next
-  }
-
   const openReviewPanel = () => {
     if (!view().reviewPanel.opened()) view().reviewPanel.open()
   }
 
-  const info = createMemo(() => (params.id ? sync().session.get(params.id) : undefined))
-  const isChildSession = createMemo(() => !!info()?.parentID)
-  const canReview = createMemo(() => !!sync().project)
-  const reviewTab = createMemo(() => isDesktop())
-  const tabState = createSessionTabs({
-    tabs,
-    pathFromTab: file.pathFromTab,
-    normalizeTab,
-    review: reviewTab,
-    hasReview: canReview,
-  })
-  const activeTab = tabState.activeTab
-  const activeFileTab = tabState.activeFileTab
-  const revertMessageID = createMemo(() => info()?.revert?.messageID)
-  const timeline = createTimelineModel({ sessionID: () => params.id, revertMessageID })
+  const activeTab = session.tabs.activeTab
+  const activeFileTab = session.tabs.activeFileTab
+  const timeline = createTimelineModel({ session })
   const historyLoading = timeline.history.loading
   const historyMore = timeline.history.more
   const lastUserMessage = timeline.lastUserMessage
-  const messages = timeline.messages
   const messagesReady = timeline.ready
   const sessionSync = timeline.resource
   const userMessages = timeline.userMessages
@@ -1138,11 +1119,10 @@ export default function Page() {
 
   useComposerCommands()
   useSessionCommands({
+    session,
     navigateMessageByOffset,
     setActiveMessage,
     focusInput,
-    review: reviewTab,
-    fileBrowser: () => newSessionDesign() && isDesktop() && !!params.id,
   })
   command.register("session-palette", () => [
     {
@@ -1692,8 +1672,6 @@ export default function Page() {
     })
   }
 
-  const merge = (next: NonNullable<ReturnType<typeof info>>, target = sync()) => target.session.remember(next)
-
   const roll = (sessionID: string, next: NonNullable<ReturnType<typeof info>>["revert"], target = sync()) => {
     const session = target.session.get(sessionID)
     if (!session) return
@@ -1754,7 +1732,7 @@ export default function Page() {
   const queueEnabled = createMemo(() => {
     const id = params.id
     if (!id) return false
-    return settings.general.followup() === "queue" && busy(id) && !composer.blocked() && !isChildSession()
+    return settings.general.followup() === "queue" && session.data.working() && !composer.blocked() && !isChildSession()
   })
 
   const followupText = (item: FollowupDraft) => {
@@ -1932,7 +1910,7 @@ export default function Page() {
     if (followup.paused[sessionID]) return
     if (isChildSession()) return
     if (composer.blocked()) return
-    if (busy(sessionID)) return
+    if (session.data.working()) return
 
     void sendFollowup(sessionID, item.id)
   })
@@ -2080,6 +2058,7 @@ export default function Page() {
             <Show when={messagesReady() ? params.id : undefined} keyed>
               {(_id) => (
                 <MessageTimeline
+                  session={session}
                   actions={actions}
                   scroll={ui.scroll}
                   onResumeScroll={resumeScroll}
@@ -2157,7 +2136,7 @@ export default function Page() {
                 : undefined,
             onResponseSubmit: resumeScroll,
             openParent: () => {
-              const id = info()?.parentID
+              const id = session.data.parentID()
               if (!id) return
               navigate(
                 params.serverKey

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

@@ -0,0 +1,71 @@
+import { describe, expect, test } from "bun:test"
+import type { AssistantMessage, Message, UserMessage } from "@opencode-ai/sdk/v2"
+import { createRoot, createSignal } from "solid-js"
+import {
+  normalizeSessionTab,
+  normalizeSessionTabs,
+  selectSessionUserMessages,
+  selectVisibleSessionUserMessages,
+} from "./session-domain"
+import { createSessionOwnership } from "./session-ownership"
+
+const user = (id: string): UserMessage => ({
+  id,
+  sessionID: "session",
+  role: "user",
+  time: { created: 0 },
+  agent: "build",
+  model: { providerID: "provider", modelID: "model" },
+})
+
+const assistant: AssistantMessage = {
+  id: "msg_2",
+  sessionID: "session",
+  role: "assistant",
+  time: { created: 0 },
+  parentID: "msg_1",
+  modelID: "model",
+  providerID: "provider",
+  mode: "build",
+  agent: "build",
+  path: { cwd: "/workspace", root: "/workspace" },
+  cost: 0,
+  tokens: { input: 0, output: 0, reasoning: 0, cache: { read: 0, write: 0 } },
+}
+
+describe("session controller invariants", () => {
+  test("normalizes file tabs once while preserving non-file tabs and order", () => {
+    const normalize = (tab: string) => normalizeSessionTab(tab, (value) => value.toLowerCase())
+
+    expect(normalizeSessionTabs(["review", "file://SRC/A.TS", "file://src/a.ts", "context"], normalize)).toEqual([
+      "review",
+      "file://src/a.ts",
+      "context",
+    ])
+  })
+
+  test("selects user history strictly before the revert boundary", () => {
+    const messages: Message[] = [user("msg_1"), assistant, user("msg_3"), user("msg_5")]
+    const users = selectSessionUserMessages(messages)
+
+    expect(users.map((message) => message.id)).toEqual(["msg_1", "msg_3", "msg_5"])
+    expect(selectVisibleSessionUserMessages(users, "msg_3").map((message) => message.id)).toEqual(["msg_1"])
+    expect(selectVisibleSessionUserMessages(users)).toBe(users)
+  })
+
+  test("rejects work captured by a previous session", () => {
+    createRoot((dispose) => {
+      const [key, setKey] = createSignal("session-a")
+      const ownership = createSessionOwnership(key)
+      const captured = ownership.capture()
+      let ran = false
+
+      setKey("session-b")
+
+      expect(captured.current()).toBe(false)
+      expect(captured.run(() => (ran = true))).toBeUndefined()
+      expect(ran).toBe(false)
+      dispose()
+    })
+  })
+})

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

@@ -0,0 +1,101 @@
+import type { Message, UserMessage } from "@opencode-ai/sdk/v2"
+import { createMemo, type Accessor } from "solid-js"
+import { useFile } from "@/context/file"
+import { useSync } from "@/context/sync"
+import { same } from "@/utils/same"
+import { createSessionTabs } from "./helpers"
+import {
+  normalizeSessionTab,
+  normalizeSessionTabs,
+  selectSessionUserMessages,
+  selectVisibleSessionUserMessages,
+} from "./session-domain"
+import { useSessionLayout } from "./session-layout"
+import { createSessionOwnership } from "./session-ownership"
+
+const emptyMessages: Message[] = []
+const emptyUserMessages: UserMessage[] = []
+const idle = { type: "idle" as const }
+
+export function createSessionController(input: {
+  review?: Accessor<boolean>
+  hasReview?: Accessor<boolean>
+  fileBrowser?: (sessionID: string | undefined) => boolean
+}) {
+  const file = useFile()
+  const sync = useSync()
+  const layout = useSessionLayout()
+  const sessionID = createMemo(() => layout.params.id)
+  const info = createMemo(() => {
+    const id = sessionID()
+    return id ? sync().session.get(id) : undefined
+  })
+  const parentID = createMemo(() => info()?.parentID)
+  const parent = createMemo(() => {
+    const id = parentID()
+    return id ? sync().session.get(id) : undefined
+  })
+  const status = createMemo(() => {
+    const id = sessionID()
+    return id ? (sync().data.session_status[id] ?? idle) : idle
+  })
+  const messages = createMemo(() => {
+    const id = sessionID()
+    return id ? (sync().data.message[id] ?? emptyMessages) : emptyMessages
+  })
+  const userMessages = createMemo(() => selectSessionUserMessages(messages()), emptyUserMessages, { equals: same })
+  const revertMessageID = createMemo(() => info()?.revert?.messageID)
+  const visibleUserMessages = createMemo(
+    () => selectVisibleSessionUserMessages(userMessages(), revertMessageID()),
+    emptyUserMessages,
+    { equals: same },
+  )
+  const normalizeTab = (tab: string) => normalizeSessionTab(tab, file.tab)
+  const tabs = createSessionTabs({
+    tabs: layout.tabs,
+    pathFromTab: file.pathFromTab,
+    normalizeTab,
+    review: input.review,
+    hasReview: input.hasReview,
+    fileBrowser: input.fileBrowser ? () => input.fileBrowser?.(sessionID()) ?? false : undefined,
+  })
+
+  return {
+    identity: {
+      params: layout.params,
+      sessionID,
+      sessionKey: layout.sessionKey,
+      workspaceKey: layout.workspaceKey,
+    },
+    data: {
+      info,
+      parent,
+      parentID,
+      isChild: createMemo(() => !!parentID()),
+      status,
+      working: createMemo(() => {
+        const id = sessionID()
+        return id ? sync().data.session_working(id) : false
+      }),
+      revertMessageID,
+    },
+    history: {
+      messages,
+      userMessages,
+      visibleUserMessages,
+      lastUserMessage: createMemo(() => visibleUserMessages().at(-1)),
+    },
+    layout: {
+      tabs: layout.tabs,
+      view: layout.view,
+    },
+    ownership: createSessionOwnership(layout.sessionKey),
+    tabs: {
+      ...tabs,
+      normalize: normalizeTab,
+      normalizeAll: (values: string[]) => normalizeSessionTabs(values, normalizeTab),
+    },
+  }
+}
+
+export type SessionController = ReturnType<typeof createSessionController>

packages/app/src/pages/session/session-domain.ts

@@ -0,0 +1,19 @@
+import type { Message, UserMessage } from "@opencode-ai/sdk/v2"
+
+export function normalizeSessionTab(tab: string, normalizeFileTab: (tab: string) => string) {
+  if (!tab.startsWith("file://")) return tab
+  return normalizeFileTab(tab)
+}
+
+export function normalizeSessionTabs(tabs: string[], normalize: (tab: string) => string) {
+  return [...new Set(tabs.map(normalize))]
+}
+
+export function selectSessionUserMessages(messages: Message[]) {
+  return messages.filter((message): message is UserMessage => message.role === "user")
+}
+
+export function selectVisibleSessionUserMessages(messages: UserMessage[], revertMessageID?: string) {
+  if (!revertMessageID) return messages
+  return messages.filter((message) => message.id < revertMessageID)
+}

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,328 @@
+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 type { SessionController } from "@/pages/session/session-controller"
+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 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 type TimelineSessionSource = {
+  identity: Pick<SessionController["identity"], "params" | "sessionID" | "sessionKey">
+  data: Pick<SessionController["data"], "info" | "parent" | "parentID" | "status">
+  history: Pick<SessionController["history"], "messages">
+}
+
+export function createTimelineController(input: {
+  session: TimelineSessionSource
+  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 = input.session.identity.params
+  const sessionKey = input.session.identity.sessionKey
+  const sessionID = input.session.identity.sessionID
+  const status = input.session.data.status
+  const messages = input.session.history.messages
+  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 = input.session.data.info
+  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 = input.session.data.parentID
+  const parent = input.session.data.parent
+  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, type TimelineSessionSource } 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,8 @@ function TimelineDiffView(props: { diff: SummaryDiff }) {
   )
 }
 
-export function MessageTimeline(props: {
+type MessageTimelineProps = {
+  session: TimelineSessionSource
   actions?: UserActions
   scroll: { overflow: boolean; bottom: boolean; jump: boolean }
   onResumeScroll: () => void
@@ -257,88 +225,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({ session: props.session, 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 +450,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 +565,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 +576,7 @@ export function MessageTimeline(props: {
 
   createEffect(
     on(
-      sessionKey,
+      props.data.sessionKey,
       () =>
         setTitle({
           draft: "",
@@ -749,18 +589,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 +600,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 +684,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 +697,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 +760,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 +796,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 +809,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 +857,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 +973,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 +1045,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 +1069,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 +1090,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 +1105,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 +1140,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 +1213,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 +1282,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 +1298,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 +1310,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 +1330,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 +1351,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 +1374,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 +1385,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 +1414,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 +1443,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 +1451,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/app/src/pages/session/timeline/model.ts

@@ -1,23 +1,24 @@
-import type { Message, UserMessage } from "@opencode-ai/sdk/v2"
+import type { Message } from "@opencode-ai/sdk/v2"
 import { createMemo, createResource, onCleanup, untrack, type Accessor } from "solid-js"
 import { useServerSync } from "@/context/server-sync"
 import { useSync } from "@/context/sync"
-import { same } from "@/utils/same"
+import type { SessionController } from "../session-controller"
+
+export {
+  selectSessionUserMessages as selectUserMessages,
+  selectVisibleSessionUserMessages as selectVisibleUserMessages,
+} from "../session-domain"
 
-const emptyUserMessages: UserMessage[] = []
 const sessionFreshness = 15_000
 
-export function createTimelineModel(input: {
-  sessionID: Accessor<string | undefined>
-  revertMessageID: Accessor<string | undefined>
-}) {
+export function createTimelineModel(input: { session: Pick<SessionController, "identity" | "history"> }) {
   const serverSync = useServerSync()
   const sync = useSync()
   let refreshFrame: number | undefined
   let refreshTimer: number | undefined
 
   const [resource] = createResource(
-    () => input.sessionID(),
+    () => input.session.identity.sessionID(),
     (id) => {
       clearRefresh()
       if (!id) return
@@ -29,7 +30,7 @@ export function createTimelineModel(input: {
         refreshFrame = undefined
         refreshTimer = window.setTimeout(() => {
           refreshTimer = undefined
-          if (input.sessionID() !== id) return
+          if (input.session.identity.sessionID() !== id) return
           untrack(() => {
             if (stale) void sync().session.sync(id, { force: true })
           })
@@ -39,33 +40,21 @@ export function createTimelineModel(input: {
       return sync().session.sync(id)
     },
   )
-  const messages = createMemo(() => {
-    const id = input.sessionID()
-    return id ? (sync().data.message[id] ?? []) : []
-  })
   const ready = createMemo(() => {
-    const id = input.sessionID()
+    const id = input.session.identity.sessionID()
     return !id || isTimelineReady(sync().data.message[id], serverSync().session.history.loading(id))
   })
-  const userMessages = createMemo(() => selectUserMessages(messages()), emptyUserMessages, { equals: same })
-  const visibleUserMessages = createMemo(
-    () => {
-      return selectVisibleUserMessages(userMessages(), input.revertMessageID())
-    },
-    emptyUserMessages,
-    { equals: same },
-  )
   const more = createMemo(() => {
-    const id = input.sessionID()
+    const id = input.session.identity.sessionID()
     return id ? sync().session.history.more(id) : false
   })
   const loading = createMemo(() => {
-    const id = input.sessionID()
+    const id = input.session.identity.sessionID()
     return id ? sync().session.history.loading(id) : false
   })
   const loadOlder = async (options?: { before?: () => void; after?: (done: boolean) => void }) => {
     return loadOlderTimeline({
-      sessionID: input.sessionID,
+      sessionID: input.session.identity.sessionID,
       more,
       loading,
       loadMore: (sessionID) => sync().session.history.loadMore(sessionID),
@@ -78,12 +67,12 @@ export function createTimelineModel(input: {
 
   return {
     history: { loadOlder, loading, more },
-    lastUserMessage: createMemo(() => visibleUserMessages().at(-1)),
-    messages,
+    lastUserMessage: input.session.history.lastUserMessage,
+    messages: input.session.history.messages,
     ready,
     resource,
-    userMessages,
-    visibleUserMessages,
+    userMessages: input.session.history.userMessages,
+    visibleUserMessages: input.session.history.visibleUserMessages,
   }
 
   function clearRefresh() {
@@ -94,19 +83,10 @@ export function createTimelineModel(input: {
   }
 }
 
-export function selectUserMessages(messages: Message[]) {
-  return messages.filter((message): message is UserMessage => message.role === "user")
-}
-
 export function isTimelineReady(messages: Message[] | undefined, loading: boolean) {
   return messages !== undefined && (messages.some((message) => message.role === "user") || !loading)
 }
 
-export function selectVisibleUserMessages(messages: UserMessage[], revertMessageID?: string) {
-  if (!revertMessageID) return messages
-  return messages.filter((message) => message.id < revertMessageID)
-}
-
 export async function loadOlderTimeline(input: {
   sessionID: Accessor<string | undefined>
   more: Accessor<boolean>

packages/app/src/pages/session/use-session-commands.tsx

@@ -13,19 +13,25 @@ import { useSync } from "@/context/sync"
 import { useTerminal } from "@/context/terminal"
 import { showToast } from "@/utils/toast"
 import { findLast } from "@opencode-ai/core/util/array"
-import { createSessionTabs } from "@/pages/session/helpers"
 import { extractPromptFromParts } from "@/utils/prompt"
-import { UserMessage } from "@opencode-ai/sdk/v2"
-import { useSessionLayout } from "@/pages/session/session-layout"
-import { createSessionOwnership } from "./session-ownership"
+import type { UserMessage } from "@opencode-ai/sdk/v2"
 import { useLocal } from "@/context/local"
+import type { SessionController } from "./session-controller"
+
+type SessionCommandSource = {
+  identity: SessionController["identity"]
+  data: Pick<SessionController["data"], "info" | "revertMessageID">
+  history: Pick<SessionController["history"], "userMessages" | "visibleUserMessages">
+  layout: SessionController["layout"]
+  ownership: SessionController["ownership"]
+  tabs: Pick<SessionController["tabs"], "activeFileTab" | "closableTab">
+}
 
 export type SessionCommandContext = {
+  session: SessionCommandSource
   navigateMessageByOffset: (offset: number) => void
   setActiveMessage: (message: UserMessage | undefined) => void
   focusInput: () => void
-  review?: () => boolean
-  fileBrowser?: () => boolean
 }
 
 const withCategory = (category: string) => {
@@ -49,15 +55,17 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
   const layout = useLayout()
   const local = useLocal()
   const navigate = useNavigate()
-  const { params, sessionKey, tabs, view } = useSessionLayout()
-  const sessionOwnership = createSessionOwnership(sessionKey)
+  const params = actions.session.identity.params
+  const tabs = actions.session.layout.tabs
+  const view = actions.session.layout.view
+  const sessionOwnership = actions.session.ownership
   const openDialog = async <T,>(load: () => Promise<T>, show: (value: T) => void) => {
     const owner = sessionOwnership.capture()
     const value = await load()
     owner.run(() => show(value))
   }
   const runCommand = async <T,>(input: {
-    owner: ReturnType<ReturnType<typeof createSessionOwnership>["capture"]>
+    owner: ReturnType<SessionController["ownership"]["capture"]>
     prompt: T
     request: () => Promise<unknown>
     updatePrompt: (prompt: T) => void
@@ -68,39 +76,13 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
     input.owner.run(input.updateViewport)
   }
 
-  const info = () => {
-    const id = params.id
-    if (!id) return
-    return sync().session.get(id)
-  }
-  const hasReview = () => !!params.id
-  const normalizeTab = (tab: string) => {
-    if (!tab.startsWith("file://")) return tab
-    return file.tab(tab)
-  }
-  const tabState = createSessionTabs({
-    tabs,
-    pathFromTab: file.pathFromTab,
-    normalizeTab,
-    review: actions.review,
-    hasReview,
-    fileBrowser: actions.fileBrowser,
-  })
-  const activeFileTab = tabState.activeFileTab
-  const closableTab = tabState.closableTab
+  const info = actions.session.data.info
+  const activeFileTab = actions.session.tabs.activeFileTab
+  const closableTab = actions.session.tabs.closableTab
   const shown = settings.visibility.fileTree
 
-  const messages = () => {
-    const id = params.id
-    if (!id) return []
-    return sync().data.message[id] ?? []
-  }
-  const userMessages = () => messages().filter((m) => m.role === "user") as UserMessage[]
-  const visibleUserMessages = () => {
-    const revert = info()?.revert?.messageID
-    if (!revert) return userMessages()
-    return userMessages().filter((m) => m.id < revert)
-  }
+  const userMessages = actions.session.history.userMessages
+  const visibleUserMessages = actions.session.history.visibleUserMessages
 
   const showAllFiles = () => {
     if (layout.fileTree.tab() !== "changes") return
@@ -309,7 +291,7 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
     const session = sdk().api.session
     const directory = sdk().directory
     const promptSession = prompt.capture()
-    const revert = info()?.revert?.messageID
+    const revert = actions.session.data.revertMessageID()
     const messages = userMessages()
     const message = findLast(messages, (x) => !revert || x.id < revert)
     if (!message) return
@@ -338,7 +320,7 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
     const messages = userMessages()
     const promptSession = prompt.capture()
 
-    const revertMessageID = info()?.revert?.messageID
+    const revertMessageID = actions.session.data.revertMessageID()
     if (!revertMessageID) return
 
     const next = messages.find((x) => x.id > revertMessageID)

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/tui/src/app.tsx

@@ -1197,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/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/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/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/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/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/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: