fix(app): bind provider query client

packages/app/src/components/dialog-connect-provider.tsx

@@ -1,4 +1,3 @@
-import type { IntegrationMethod, IntegrationOauthConnectOutput } from "@opencode-ai/client/promise"
 import { Button } from "@opencode-ai/ui/button"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { Dialog } from "@opencode-ai/ui/dialog"
@@ -13,21 +12,9 @@ import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
 import { DialogBody, DialogHeader, DialogTitle, DialogV2 } from "@opencode-ai/ui/v2/dialog-v2"
 import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
 import { showToast } from "@/utils/toast"
-import {
-  type Accessor,
-  type Component,
-  createEffect,
-  createMemo,
-  createResource,
-  createUniqueId,
-  For,
-  Match,
-  onCleanup,
-  onMount,
-  Show,
-  Switch,
-} from "solid-js"
-import { createStore, produce } from "solid-js/store"
+import { type Accessor, type Component, createMemo, createUniqueId, For, Match, onMount, Show, Switch } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useQueryClient } from "@tanstack/solid-query"
 import { useParams } from "@solidjs/router"
 import { Link } from "@/components/link"
 import { useServerSDK } from "@/context/server-sdk"
@@ -37,10 +24,10 @@ import { useSettings } from "@/context/settings"
 import { popularProviders, useProviders } from "@/hooks/use-providers"
 import { CustomProviderForm } from "./dialog-custom-provider"
 import { decode64 } from "@/utils/base64"
+import { pathKey } from "@/utils/path-key"
+import { createProviderConnectionController } from "./provider-connection-controller"
 
 const CUSTOM_ID = "_custom"
-type ConnectMethod = Extract<IntegrationMethod, { type: "key" | "oauth" }>
-
 export function useProviderConnectController(options: { onBack?: () => void } = {}) {
   const [store, setStore] = createStore({ selected: undefined as string | undefined })
   const reset = () => setStore("selected", undefined)
@@ -384,118 +371,91 @@ function ProviderConnection(props: {
   const dialog = useDialog()
   const serverSync = useServerSync()
   const serverSDK = useServerSDK()
+  const queryClient = useQueryClient()
   const params = useParams()
   const language = useLanguage()
   const settings = useSettings()
   const newLayout = settings.general.newLayoutDesigns
   const providers = useProviders(() => props.directory?.())
   const directory = () => props.directory?.() ?? decode64(params.dir)
-  const location = () => {
-    const value = directory()
-    return value ? { directory: value } : undefined
-  }
-
-  const alive = { value: true }
-  const timer = { current: undefined as ReturnType<typeof setTimeout> | undefined }
-
-  onCleanup(() => {
-    alive.value = false
-    if (timer.current === undefined) return
-    clearTimeout(timer.current)
-    timer.current = undefined
-  })
 
   const provider = createMemo(
     () => providers.all().get(props.provider) ?? serverSync().data.provider.all.get(props.provider)!,
   )
-  const fallback = createMemo<ConnectMethod[]>(() => [
-    {
-      type: "key" as const,
-      label: language.t("provider.connect.method.apiKey"),
+  const controller = createProviderConnectionController({
+    provider: props.provider,
+    directory,
+    fallbackKeyLabel: () => language.t("provider.connect.method.apiKey"),
+    requestFailed: () => language.t("common.requestFailed"),
+    invalidCode: () => language.t("provider.connect.oauth.code.invalid"),
+    services: {
+      integration: {
+        load: (integrationID, value) =>
+          serverSDK()
+            .api.integration.get({
+              integrationID,
+              location: value ? { directory: value } : undefined,
+            })
+            .then((result) => result.data),
+      },
+      connection: {
+        key: (integrationID, value, key) =>
+          serverSDK().api.integration.connect.key({
+            integrationID,
+            location: value ? { directory: value } : undefined,
+            key,
+          }),
+        oauth: (integrationID, value, methodID, inputs) =>
+          serverSDK()
+            .api.integration.oauth.connect({
+              integrationID,
+              methodID,
+              inputs,
+              location: value ? { directory: value } : undefined,
+            })
+            .then((result) => result.data),
+        status: (integrationID, value, attemptID) =>
+          serverSDK()
+            .api.integration.oauth.status({
+              integrationID,
+              attemptID,
+              location: value ? { directory: value } : undefined,
+            })
+            .then((result) => result.data),
+        complete: (integrationID, value, attemptID, code) =>
+          serverSDK().api.integration.oauth.complete({
+            integrationID,
+            attemptID,
+            location: value ? { directory: value } : undefined,
+            code,
+          }),
+      },
+      provider: {
+        refresh: () =>
+          queryClient.refetchQueries(serverSync().queryOptions.providers(directory() ? pathKey(directory()!) : null)),
+      },
+      completion: {
+        finish: () => {
+          dialog.close()
+          showToast({
+            variant: "success",
+            icon: "circle-check",
+            title: language.t("provider.connect.toast.connected.title", { provider: provider().name }),
+            description: language.t("provider.connect.toast.connected.description", { provider: provider().name }),
+          })
+        },
+      },
     },
-  ])
-  const [integration] = createResource(
-    () => ({ provider: props.provider, directory: directory() }),
-    (input) =>
-      serverSDK()
-        .api.integration.get({
-          integrationID: input.provider,
-          location: input.directory ? { directory: input.directory } : undefined,
-        })
-        .then((result) => result.data),
-  )
-  const loading = createMemo(() => integration.loading)
-  const methods = createMemo<ConnectMethod[]>(() => {
-    const values = integration.latest?.methods.filter(
-      (method): method is ConnectMethod => method.type === "key" || method.type === "oauth",
-    )
-    return values?.length ? values : fallback()
   })
-  const [store, setStore] = createStore({
-    methodIndex: undefined as undefined | number,
-    authorization: undefined as undefined | IntegrationOauthConnectOutput["data"],
-    promptInputs: undefined as undefined | Record<string, string>,
-    state: "pending" as undefined | "pending" | "complete" | "error" | "prompt",
-    error: undefined as string | undefined,
-  })
-
-  type Action =
-    | { type: "method.select"; index: number }
-    | { type: "method.reset" }
-    | { type: "auth.prompt" }
-    | { type: "auth.inputs"; inputs: Record<string, string> }
-    | { type: "auth.pending" }
-    | { type: "auth.complete"; authorization: IntegrationOauthConnectOutput["data"] }
-    | { type: "auth.error"; error: string }
-
-  function dispatch(action: Action) {
-    setStore(
-      produce((draft) => {
-        if (action.type === "method.select") {
-          draft.methodIndex = action.index
-          draft.authorization = undefined
-          draft.promptInputs = undefined
-          draft.state = undefined
-          draft.error = undefined
-          return
-        }
-        if (action.type === "method.reset") {
-          draft.methodIndex = undefined
-          draft.authorization = undefined
-          draft.promptInputs = undefined
-          draft.state = undefined
-          draft.error = undefined
-          return
-        }
-        if (action.type === "auth.prompt") {
-          draft.state = "prompt"
-          draft.error = undefined
-          return
-        }
-        if (action.type === "auth.inputs") {
-          draft.promptInputs = action.inputs
-          draft.state = undefined
-          draft.error = undefined
-          return
-        }
-        if (action.type === "auth.pending") {
-          draft.state = "pending"
-          draft.error = undefined
-          return
-        }
-        if (action.type === "auth.complete") {
-          draft.state = "complete"
-          draft.authorization = action.authorization
-          draft.error = undefined
-          return
-        }
-        draft.state = "error"
-        draft.error = action.error
-      }),
-    )
-  }
-
-  const method = createMemo(() => (store.methodIndex !== undefined ? methods().at(store.methodIndex!) : undefined))
+  const loading = controller.data.loading
+  const methods = controller.data.methods
+  const method = controller.data.method
+  const methodIndex = controller.data.methodIndex
+  const authorization = controller.data.authorization
+  const state = controller.auth.state
+  const error = controller.auth.error
+  const connectKey = controller.auth.connectKey
+  const completeCode = controller.auth.completeCode
 
   const methodLabel = (value?: { type?: string; label?: string }) => {
     if (!value) return ""
@@ -513,56 +473,7 @@ function ProviderConnection(props: {
     }
   }
 
-  function formatError(value: unknown, fallback: string): string {
-    if (value && typeof value === "object" && "data" in value) {
-      const data = (value as { data?: { message?: unknown } }).data
-      if (typeof data?.message === "string" && data.message) return data.message
-    }
-    if (value && typeof value === "object" && "error" in value) {
-      const nested = formatError((value as { error?: unknown }).error, "")
-      if (nested) return nested
-    }
-    if (value && typeof value === "object" && "message" in value) {
-      const message = (value as { message?: unknown }).message
-      if (typeof message === "string" && message) return message
-    }
-    if (value instanceof Error && value.message) return value.message
-    if (typeof value === "string" && value) return value
-    return fallback
-  }
-
-  async function selectMethod(index: number, inputs?: Record<string, string>) {
-    if (timer.current !== undefined) {
-      clearTimeout(timer.current)
-      timer.current = undefined
-    }
-
-    const method = methods()[index]
-    dispatch({ type: "method.select", index })
-
-    if (method.type === "oauth") {
-      if (method.prompts?.length && !inputs) {
-        dispatch({ type: "auth.prompt" })
-        return
-      }
-      dispatch({ type: "auth.pending" })
-      await serverSDK()
-        .api.integration.oauth.connect({
-          integrationID: props.provider,
-          methodID: method.id,
-          inputs: inputs ?? {},
-          location: location(),
-        })
-        .then((x) => {
-          if (!alive.value) return
-          dispatch({ type: "auth.complete", authorization: x.data })
-        })
-        .catch((e) => {
-          if (!alive.value) return
-          dispatch({ type: "auth.error", error: formatError(e, language.t("common.requestFailed")) })
-        })
-    }
-  }
+  const selectMethod = controller.auth.select
 
   function AuthPromptsView() {
     const [formStore, setFormStore] = createStore({
@@ -583,7 +494,7 @@ function ProviderConnection(props: {
     const current = createMemo(() => {
       const all = prompts()
       const index = all.findIndex((prompt, index) => index >= formStore.index && matches(prompt, formStore.value))
-      if (index === -1) return
+      if (index === -1) return undefined
       return {
         index,
         prompt: all[index],
@@ -597,13 +508,14 @@ function ProviderConnection(props: {
     })
 
     async function next(index: number, value: Record<string, string>) {
-      if (store.methodIndex === undefined) return
+      const selected = methodIndex()
+      if (selected === undefined) return
       const next = prompts().findIndex((prompt, i) => i > index && matches(prompt, value))
       if (next !== -1) {
         setFormStore("index", next)
         return
       }
-      await selectMethod(store.methodIndex, value)
+      await selectMethod(selected, value)
     }
 
     async function handleSubmit(e: SubmitEvent) {
@@ -617,12 +529,12 @@ function ProviderConnection(props: {
     const item = () => current()
     const text = createMemo(() => {
       const prompt = item()?.prompt
-      if (!prompt || prompt.type !== "text") return
+      if (!prompt || prompt.type !== "text") return undefined
       return prompt
     })
     const select = createMemo(() => {
       const prompt = item()?.prompt
-      if (!prompt || prompt.type !== "select") return
+      if (!prompt || prompt.type !== "select") return undefined
       return prompt
     })
 
@@ -693,32 +605,9 @@ function ProviderConnection(props: {
     listRef?.onKeyDown(e)
   }
 
-  let auto = false
-  createEffect(() => {
-    if (auto) return
-    if (loading()) return
-    if (methods().length === 1) {
-      auto = true
-      void selectMethod(0)
-    }
-  })
-
-  async function complete() {
-    await serverSync()
-      .refreshProviders()
-      .catch(() => undefined)
-    dialog.close()
-    showToast({
-      variant: "success",
-      icon: "circle-check",
-      title: language.t("provider.connect.toast.connected.title", { provider: provider().name }),
-      description: language.t("provider.connect.toast.connected.description", { provider: provider().name }),
-    })
-  }
-
   function goBack() {
-    if (methods().length > 1 && store.methodIndex !== undefined) {
-      dispatch({ type: "method.reset" })
+    if (methods().length > 1 && methodIndex() !== undefined) {
+      controller.auth.reset()
       return
     }
     props.onBack()
@@ -806,9 +695,9 @@ function ProviderConnection(props: {
     async function handleSubmit(e: SubmitEvent) {
       e.preventDefault()
 
-      const form = e.currentTarget as HTMLFormElement
-      const formData = new FormData(form)
-      const apiKey = formData.get("apiKey") as string
+      if (!(e.currentTarget instanceof HTMLFormElement)) return
+      const value = new FormData(e.currentTarget).get("apiKey")
+      const apiKey = typeof value === "string" ? value : ""
 
       if (!apiKey?.trim()) {
         setFormStore("error", language.t("provider.connect.apiKey.required"))
@@ -816,12 +705,7 @@ function ProviderConnection(props: {
       }
 
       setFormStore("error", undefined)
-      await serverSDK().api.integration.connect.key({
-        integrationID: props.provider,
-        location: location(),
-        key: apiKey,
-      })
-      await complete()
+      await connectKey(apiKey)
     }
 
     if (newLayout())
@@ -936,9 +820,9 @@ function ProviderConnection(props: {
     async function handleSubmit(e: SubmitEvent) {
       e.preventDefault()
 
-      const form = e.currentTarget as HTMLFormElement
-      const formData = new FormData(form)
-      const code = formData.get("code") as string
+      if (!(e.currentTarget instanceof HTMLFormElement)) return
+      const value = new FormData(e.currentTarget).get("code")
+      const code = typeof value === "string" ? value : ""
 
       if (!code?.trim()) {
         setFormStore("error", language.t("provider.connect.oauth.code.required"))
@@ -946,20 +830,7 @@ function ProviderConnection(props: {
       }
 
       setFormStore("error", undefined)
-      const result = await serverSDK()
-        .api.integration.oauth.complete({
-          integrationID: props.provider,
-          attemptID: store.authorization!.attemptID,
-          location: location(),
-          code,
-        })
-        .then(() => ({ ok: true as const }))
-        .catch((error) => ({ ok: false as const, error }))
-      if (result.ok) {
-        await complete()
-        return
-      }
-      setFormStore("error", formatError(result.error, language.t("provider.connect.oauth.code.invalid")))
+      setFormStore("error", await completeCode(code))
     }
 
     if (newLayout())
@@ -967,7 +838,7 @@ function ProviderConnection(props: {
         <div class="flex flex-col gap-5 px-3 text-[13px] font-[440] leading-5 tracking-[-0.04px] text-v2-text-text-muted">
           <div>
             {language.t("provider.connect.oauth.code.visit.prefix")}
-            <Link href={store.authorization!.url} class="text-v2-text-text-base">
+            <Link href={authorization()!.url} class="text-v2-text-text-base">
               {language.t("provider.connect.oauth.code.visit.link")}
             </Link>
             {language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
@@ -1006,7 +877,7 @@ function ProviderConnection(props: {
       <div class="flex flex-col gap-6">
         <div class="text-14-regular text-text-base">
           {language.t("provider.connect.oauth.code.visit.prefix")}
-          <Link href={store.authorization!.url}>{language.t("provider.connect.oauth.code.visit.link")}</Link>
+          <Link href={authorization()!.url}>{language.t("provider.connect.oauth.code.visit.link")}</Link>
           {language.t("provider.connect.oauth.code.visit.suffix", { provider: provider().name })}
         </div>
         <form onSubmit={handleSubmit} class="flex flex-col items-start gap-4">
@@ -1032,52 +903,18 @@ function ProviderConnection(props: {
 
   function OAuthAutoView() {
     const code = createMemo(() => {
-      const instructions = store.authorization?.instructions
+      const instructions = authorization()?.instructions
       if (instructions?.includes(":")) {
         return instructions.split(":").pop()?.trim()
       }
       return instructions
     })
 
-    onMount(() => {
-      const poll = async () => {
-        const authorization = store.authorization
-        if (!authorization || !alive.value) return
-        const result = await serverSDK()
-          .api.integration.oauth.status({
-            integrationID: props.provider,
-            attemptID: authorization.attemptID,
-            location: location(),
-          })
-          .then((value) => ({ ok: true as const, status: value.data }))
-          .catch((error) => ({ ok: false as const, error }))
-        if (!alive.value) return
-        if (!result.ok) {
-          dispatch({ type: "auth.error", error: formatError(result.error, language.t("common.requestFailed")) })
-          return
-        }
-        if (result.status.status === "complete") {
-          await complete()
-          return
-        }
-        if (result.status.status === "failed") {
-          dispatch({ type: "auth.error", error: result.status.message })
-          return
-        }
-        if (result.status.status === "expired") {
-          dispatch({ type: "auth.error", error: language.t("common.requestFailed") })
-          return
-        }
-        timer.current = setTimeout(poll, 1_000)
-      }
-      void poll()
-    })
-
     return (
       <div class="flex flex-col gap-6">
         <div class="text-14-regular text-text-base">
           {language.t("provider.connect.oauth.auto.visit.prefix")}
-          <Link href={store.authorization!.url}>{language.t("provider.connect.oauth.auto.visit.link")}</Link>
+          <Link href={authorization()!.url}>{language.t("provider.connect.oauth.auto.visit.link")}</Link>
           {language.t("provider.connect.oauth.auto.visit.suffix", { provider: provider().name })}
         </div>
         <TextField
@@ -1121,7 +958,7 @@ function ProviderConnection(props: {
         <div
           onKeyDown={handleKey}
           tabIndex={newLayout() ? undefined : 0}
-          autofocus={!newLayout() && store.methodIndex === undefined ? true : undefined}
+          autofocus={!newLayout() && methodIndex() === undefined ? true : undefined}
         >
           <Switch>
             <Match when={loading()}>
@@ -1132,10 +969,10 @@ function ProviderConnection(props: {
                 </div>
               </div>
             </Match>
-            <Match when={store.methodIndex === undefined}>
+            <Match when={methodIndex() === undefined}>
               <MethodSelection />
             </Match>
-            <Match when={store.state === "pending"}>
+            <Match when={state() === "pending"}>
               <div class="text-14-regular text-text-base">
                 <div class="flex items-center gap-x-2">
                   <Spinner />
@@ -1143,14 +980,14 @@ function ProviderConnection(props: {
                 </div>
               </div>
             </Match>
-            <Match when={store.state === "prompt"}>
+            <Match when={state() === "prompt"}>
               <AuthPromptsView />
             </Match>
-            <Match when={store.state === "error"}>
+            <Match when={state() === "error"}>
               <div class="text-14-regular text-text-base">
                 <div class="flex items-center gap-x-2">
                   <Icon name="circle-ban-sign" class="text-icon-critical-base" />
-                  <span>{language.t("provider.connect.status.failed", { error: store.error ?? "" })}</span>
+                  <span>{language.t("provider.connect.status.failed", { error: error() ?? "" })}</span>
                 </div>
               </div>
             </Match>
@@ -1159,10 +996,10 @@ function ProviderConnection(props: {
             </Match>
             <Match when={method()?.type === "oauth"}>
               <Switch>
-                <Match when={store.authorization?.mode === "code"}>
+                <Match when={authorization()?.mode === "code"}>
                   <OAuthCodeView />
                 </Match>
-                <Match when={store.authorization?.mode === "auto"}>
+                <Match when={authorization()?.mode === "auto"}>
                   <OAuthAutoView />
                 </Match>
               </Switch>

packages/app/src/components/provider-connection-controller.test.ts

@@ -0,0 +1,129 @@
+import { describe, expect, test, vi } from "bun:test"
+import { createRoot } from "solid-js"
+import {
+  createProviderConnectionWorkflowController,
+  type ProviderConnectMethod,
+} from "./provider-connection-controller"
+
+const authorization = {
+  attemptID: "attempt-1",
+  url: "https://example.com/auth",
+  instructions: "Code: ABCD",
+  mode: "auto" as const,
+  time: { created: 0, expires: 1 },
+}
+
+function services(options: {
+  methods: readonly ProviderConnectMethod[]
+  status?: () => Promise<{ status: "pending" | "complete" }>
+  refresh?: () => void
+  finish?: () => void
+}) {
+  return {
+    connection: {
+      key: async () => undefined,
+      oauth: async () => authorization,
+      status: options.status ?? (async () => ({ status: "pending" as const })),
+      complete: async () => undefined,
+    },
+    provider: { refresh: async () => options.refresh?.() },
+    completion: { finish: options.finish ?? (() => undefined) },
+  }
+}
+
+function create(options: Parameters<typeof services>[0]) {
+  return createRoot((dispose) => ({
+    dispose,
+    controller: createProviderConnectionWorkflowController({
+      provider: "example",
+      directory: () => "/project",
+      requestFailed: () => "Request failed",
+      invalidCode: () => "Invalid code",
+      loading: () => false,
+      methods: () => [...options.methods],
+      services: services(options),
+      pollInterval: 100,
+    }),
+  }))
+}
+
+async function settle() {
+  await Promise.resolve()
+  await Promise.resolve()
+  await Promise.resolve()
+  await Promise.resolve()
+}
+
+describe("provider connection controller", () => {
+  test("moves prompted OAuth methods through prompt and authorization states", async () => {
+    const owned = create({
+      methods: [
+        {
+          id: "oauth",
+          type: "oauth",
+          label: "OAuth",
+          prompts: [{ type: "text", key: "account", message: "Account" }],
+        },
+      ],
+    })
+
+    await owned.controller.auth.select(0)
+    expect(owned.controller.auth.state()).toBe("prompt")
+
+    await owned.controller.auth.select(0, { account: "team" })
+    expect(owned.controller.auth.state()).toBe("complete")
+    expect(owned.controller.data.authorization()).toEqual(authorization)
+    owned.dispose()
+  })
+
+  test("polls auto OAuth independently and completes after provider refresh", async () => {
+    vi.useFakeTimers()
+    try {
+      const calls: string[] = []
+      const statuses = [{ status: "pending" as const }, { status: "complete" as const }]
+      const owned = create({
+        methods: [{ id: "oauth", type: "oauth", label: "OAuth" }],
+        status: async () => statuses.shift() ?? { status: "complete" as const },
+        refresh: () => calls.push("refresh"),
+        finish: () => calls.push("finish"),
+      })
+
+      await owned.controller.auth.select(0)
+      await settle()
+      expect(owned.controller.data.authorization()).toEqual(authorization)
+      expect(calls).toEqual([])
+
+      vi.advanceTimersByTime(100)
+      await settle()
+      expect(calls).toEqual(["refresh", "finish"])
+      owned.dispose()
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+
+  test("cancels an owned poll timer on reset and disposal", async () => {
+    vi.useFakeTimers()
+    try {
+      const status = vi.fn(async () => ({ status: "pending" as const }))
+      const owned = create({ methods: [{ id: "oauth", type: "oauth", label: "OAuth" }], status })
+
+      await owned.controller.auth.select(0)
+      expect(status).toHaveBeenCalledTimes(1)
+
+      owned.controller.auth.reset()
+      vi.advanceTimersByTime(1_000)
+      await settle()
+      expect(status).toHaveBeenCalledTimes(1)
+
+      await owned.controller.auth.select(0)
+      expect(status).toHaveBeenCalledTimes(2)
+      owned.dispose()
+      vi.advanceTimersByTime(1_000)
+      await settle()
+      expect(status).toHaveBeenCalledTimes(2)
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+})

packages/app/src/components/provider-connection-controller.ts

@@ -0,0 +1,254 @@
+import type { IntegrationMethod, IntegrationOauthConnectOutput } from "@opencode-ai/client/promise"
+import { createEffect, createMemo, createResource, onCleanup } from "solid-js"
+import { createStore, produce } from "solid-js/store"
+
+export type ProviderConnectMethod = Extract<IntegrationMethod, { type: "key" | "oauth" }>
+type Authorization = IntegrationOauthConnectOutput["data"]
+type OAuthStatus = { status: "pending" | "complete" | "expired" } | { status: "failed"; message: string }
+
+type ProviderConnectionServices = {
+  integration: {
+    load: (provider: string, directory?: string) => Promise<{ methods: readonly IntegrationMethod[] } | null>
+  }
+  connection: {
+    key: (provider: string, directory: string | undefined, key: string) => Promise<unknown>
+    oauth: (
+      provider: string,
+      directory: string | undefined,
+      method: string,
+      inputs: Record<string, string>,
+    ) => Promise<Authorization>
+    status: (provider: string, directory: string | undefined, attempt: string) => Promise<OAuthStatus>
+    complete: (provider: string, directory: string | undefined, attempt: string, code: string) => Promise<unknown>
+  }
+  provider: { refresh: () => Promise<unknown> }
+  completion: { finish: () => void }
+}
+
+export function createProviderConnectionController(options: {
+  provider: string
+  directory: () => string | undefined
+  fallbackKeyLabel: () => string
+  requestFailed: () => string
+  invalidCode: () => string
+  services: ProviderConnectionServices
+  pollInterval?: number
+}) {
+  const [integration] = createResource(
+    () => ({ provider: options.provider, directory: options.directory() }),
+    (input) => options.services.integration.load(input.provider, input.directory),
+  )
+  const methods = createMemo<ProviderConnectMethod[]>(() => {
+    const values = integration.latest?.methods.filter(
+      (method): method is ProviderConnectMethod => method.type === "key" || method.type === "oauth",
+    )
+    if (values?.length) return [...values]
+    return [{ type: "key", label: options.fallbackKeyLabel() }]
+  })
+  return createProviderConnectionWorkflowController({
+    ...options,
+    loading: () => integration.loading,
+    methods,
+  })
+}
+
+export function createProviderConnectionWorkflowController(options: {
+  provider: string
+  directory: () => string | undefined
+  requestFailed: () => string
+  invalidCode: () => string
+  loading: () => boolean
+  methods: () => ProviderConnectMethod[]
+  services: Pick<ProviderConnectionServices, "connection" | "provider" | "completion">
+  pollInterval?: number
+}) {
+  const [store, setStore] = createStore({
+    methodIndex: undefined as number | undefined,
+    authorization: undefined as Authorization | undefined,
+    state: "pending" as "pending" | "complete" | "error" | "prompt" | undefined,
+    error: undefined as string | undefined,
+  })
+  const polling = {
+    generation: 0,
+    timer: undefined as ReturnType<typeof setTimeout> | undefined,
+    disposed: false,
+  }
+  const methods = options.methods
+  const method = createMemo(() => (store.methodIndex === undefined ? undefined : methods().at(store.methodIndex)))
+
+  type Action =
+    | { type: "method.select"; index: number }
+    | { type: "method.reset" }
+    | { type: "auth.prompt" }
+    | { type: "auth.pending" }
+    | { type: "auth.complete"; authorization: Authorization }
+    | { type: "auth.error"; error: string }
+
+  const dispatch = (action: Action) => {
+    setStore(
+      produce((draft) => {
+        if (action.type === "method.select") {
+          draft.methodIndex = action.index
+          draft.authorization = undefined
+          draft.state = undefined
+          draft.error = undefined
+          return
+        }
+        if (action.type === "method.reset") {
+          draft.methodIndex = undefined
+          draft.authorization = undefined
+          draft.state = undefined
+          draft.error = undefined
+          return
+        }
+        if (action.type === "auth.prompt") {
+          draft.state = "prompt"
+          draft.error = undefined
+          return
+        }
+        if (action.type === "auth.pending") {
+          draft.state = "pending"
+          draft.error = undefined
+          return
+        }
+        if (action.type === "auth.complete") {
+          draft.state = "complete"
+          draft.authorization = action.authorization
+          draft.error = undefined
+          return
+        }
+        draft.state = "error"
+        draft.error = action.error
+      }),
+    )
+  }
+
+  const cancelPolling = () => {
+    polling.generation++
+    if (polling.timer === undefined) return
+    clearTimeout(polling.timer)
+    polling.timer = undefined
+  }
+  const finish = async () => {
+    cancelPolling()
+    await options.services.provider.refresh().catch(() => undefined)
+    if (polling.disposed) return
+    options.services.completion.finish()
+  }
+  const poll = async (authorization: Authorization, generation: number) => {
+    const result = await options.services.connection
+      .status(options.provider, options.directory(), authorization.attemptID)
+      .then((status) => ({ ok: true as const, status }))
+      .catch((error) => ({ ok: false as const, error }))
+    if (polling.disposed || generation !== polling.generation) return
+    if (!result.ok) {
+      dispatch({ type: "auth.error", error: formatProviderConnectionError(result.error, options.requestFailed()) })
+      return
+    }
+    if (result.status.status === "complete") {
+      await finish()
+      return
+    }
+    if (result.status.status === "failed") {
+      dispatch({ type: "auth.error", error: result.status.message })
+      return
+    }
+    if (result.status.status === "expired") {
+      dispatch({ type: "auth.error", error: options.requestFailed() })
+      return
+    }
+    polling.timer = setTimeout(() => void poll(authorization, generation), options.pollInterval ?? 1_000)
+  }
+  const select = async (index: number, inputs?: Record<string, string>) => {
+    cancelPolling()
+    const generation = polling.generation
+    const selected = methods()[index]
+    dispatch({ type: "method.select", index })
+    if (selected.type !== "oauth") return
+    if (selected.prompts?.length && !inputs) {
+      dispatch({ type: "auth.prompt" })
+      return
+    }
+    dispatch({ type: "auth.pending" })
+    const result = await options.services.connection
+      .oauth(options.provider, options.directory(), selected.id, inputs ?? {})
+      .then((authorization) => ({ ok: true as const, authorization }))
+      .catch((error) => ({ ok: false as const, error }))
+    if (polling.disposed || generation !== polling.generation) return
+    if (!result.ok) {
+      dispatch({ type: "auth.error", error: formatProviderConnectionError(result.error, options.requestFailed()) })
+      return
+    }
+    dispatch({ type: "auth.complete", authorization: result.authorization })
+    if (result.authorization.mode === "auto") void poll(result.authorization, generation)
+  }
+  const reset = () => {
+    cancelPolling()
+    dispatch({ type: "method.reset" })
+  }
+  const connectKey = async (key: string) => {
+    await options.services.connection.key(options.provider, options.directory(), key)
+    await finish()
+  }
+  const completeCode = async (code: string) => {
+    const authorization = store.authorization
+    if (!authorization) return options.invalidCode()
+    const result = await options.services.connection
+      .complete(options.provider, options.directory(), authorization.attemptID, code)
+      .then(() => ({ ok: true as const }))
+      .catch((error) => ({ ok: false as const, error }))
+    if (!result.ok) return formatProviderConnectionError(result.error, options.invalidCode())
+    await finish()
+    return undefined
+  }
+
+  let auto = false
+  createEffect(() => {
+    if (auto || options.loading() || methods().length !== 1) return
+    auto = true
+    void select(0)
+  })
+  onCleanup(() => {
+    polling.disposed = true
+    cancelPolling()
+  })
+
+  return {
+    data: {
+      loading: options.loading,
+      methods,
+      method,
+      methodIndex: () => store.methodIndex,
+      authorization: () => store.authorization,
+    },
+    auth: {
+      state: () => store.state,
+      error: () => store.error,
+      select,
+      reset,
+      connectKey,
+      completeCode,
+    },
+  }
+}
+
+export type ProviderConnectionController = ReturnType<typeof createProviderConnectionController>
+
+export function formatProviderConnectionError(value: unknown, fallback: string): string {
+  if (value && typeof value === "object" && "data" in value) {
+    const data = value.data
+    if (data && typeof data === "object" && "message" in data && typeof data.message === "string" && data.message)
+      return data.message
+  }
+  if (value && typeof value === "object" && "error" in value) {
+    const nested = formatProviderConnectionError(value.error, "")
+    if (nested) return nested
+  }
+  if (value && typeof value === "object" && "message" in value) {
+    const message = value.message
+    if (typeof message === "string" && message) return message
+  }
+  if (value instanceof Error && value.message) return value.message
+  if (typeof value === "string" && value) return value
+  return fallback
+}

packages/app/src/components/session/index.ts

@@ -4,3 +4,4 @@ export { SortableTab, FileVisual } from "./session-sortable-tab"
 export { SortableTabV2 } from "./session-sortable-tab-v2"
 export { SortableTerminalTab } from "./session-sortable-terminal-tab"
 export { NewSessionView } from "./session-new-view"
+export { NewSessionDesignView } from "./session-new-design-view"

packages/app/src/components/session/session-new-design-view.tsx

@@ -0,0 +1,16 @@
+import type { JSX } from "solid-js"
+import { WordmarkV2 } from "@opencode-ai/ui/v2/wordmark-v2"
+import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
+
+export function NewSessionDesignView(props: { children: JSX.Element }) {
+  return (
+    <div data-component="session-new-design" class="relative size-full overflow-hidden bg-v2-background-bg-deep ">
+      <div class="absolute inset-x-0 top-[25.375%] flex justify-center px-6">
+        <div class={NEW_SESSION_CONTENT_WIDTH}>
+          <WordmarkV2 class="h-auto w-full text-v2-background-bg-inverse" />
+          <div class="mt-8">{props.children}</div>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/app/src/pages/new-session.tsx

@@ -1,49 +1,290 @@
-import { createPromptProjectController } from "@/components/prompt-project-selector"
-import { useTitlebarRightMount } from "@/components/titlebar"
+import { Show, createEffect, createMemo, createResource, createSignal, onCleanup, untrack } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Portal } from "solid-js/web"
+import { useSearchParams } from "@solidjs/router"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { NewSessionDesignView } from "@/components/session"
+import { PromptInputV2Composer, usePromptInputV2Controller } from "@/components/prompt-input-v2"
+import { StatusPopoverV2 } from "@/components/status-popover"
+import {
+  PromptProjectAddButton,
+  PromptProjectSelector,
+  createPromptProjectController,
+} from "@/components/prompt-project-selector"
+import { useComments } from "@/context/comments"
+import { usePrompt } from "@/context/prompt"
+import { useSDK } from "@/context/sdk"
+import { useSync } from "@/context/sync"
+import { useServerSync } from "@/context/server-sync"
+import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
-import { createEffect, createResource } from "solid-js"
-import { createNewSessionDraftController } from "./new-session/new-session-draft-controller"
-import { NewSessionStatus, NewSessionView } from "./new-session/new-session-view"
-import { createNewSessionWorkspaceController } from "./new-session/new-session-workspace-controller"
-import { useNewSessionCommands } from "./new-session/use-new-session-commands"
+import { createPromptInputController, createPromptProjectControls } from "@/pages/session/composer"
+import { useSessionKey } from "@/pages/session/session-layout"
+import { useComposerCommands } from "@/pages/session/use-composer-commands"
+import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
+import { PromptGitStatus, PromptWorkspaceSelector } from "@/components/prompt-workspace-selector"
+import { useTitlebarRightMount } from "@/components/titlebar"
+import { useCommand } from "@/context/command"
+import { useProviders } from "@/hooks/use-providers"
+import { useSettingsCommand } from "@/components/settings-dialog"
+import { Persist, persisted } from "@/utils/persist"
+import createPresence from "solid-presence"
+import { useLocal } from "@/context/local"
+import { createPromptModelSelection } from "@/pages/session/composer/prompt-model-selection"
 
-/** The draft-only V2 session page. Submitting promotes the draft into a real session. */
+const workspaceBarEnabled = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
+const providerTipDismissalDuration = 30 * 24 * 60 * 60 * 1000
+const providerTipExitDuration = 250
+
+/**
+ * The `/new-session` draft page. Unlike `session.tsx`, this only renders the prompt
+ * composer for a brand-new session — no terminal, review pane, file tree, or message
+ * timeline. Submitting promotes the draft into a real session (see prompt-input/submit).
+ */
 export default function NewSessionPage() {
+  const prompt = usePrompt()
+  const sdk = useSDK()
+  const sync = useSync()
+  const serverSync = useServerSync()
+  const comments = useComments()
+  const language = useLanguage()
   const settings = useSettings()
+  const dialog = useDialog()
+  const command = useCommand()
+  const providers = useProviders(() => sdk().directory)
+  const openProviders = () => {
+    void import("@/components/dialog-connect-provider").then(({ DialogConnectProvider }) => {
+      void dialog.show(() => <DialogConnectProvider directory={() => sdk().directory} />)
+    })
+  }
+  useSettingsCommand()
+  const route = useSessionKey()
+  const [searchParams, setSearchParams] = useSearchParams<{ draftId?: string; prompt?: string }>()
+  const local = useLocal()
+  const model = createPromptModelSelection({ agent: local.agent.current })
+
+  useComposerCommands({ model })
+
+  const inputController = createPromptInputController({
+    sessionKey: route.sessionKey,
+    sessionID: () => route.params.id,
+    queryOptions: serverSync().queryOptions,
+    model,
+  })
+  const projectControls = createPromptProjectControls()
+
+  const [store, setStore] = createStore<{ worktree?: string }>({})
   const rightMount = useTitlebarRightMount()
-  const workspace = createNewSessionWorkspaceController()
-  const draft = createNewSessionDraftController({
-    worktree: workspace.selection.value,
-    resetWorktree: workspace.selection.reset,
+
+  const showWorkspaceBar = createMemo(() => workspaceBarEnabled && sync().project?.vcs === "git")
+  const newSessionWorktree = createMemo(() => {
+    if (!showWorkspaceBar()) return "main"
+    if (store.worktree) return store.worktree
+    const project = sync().project
+    if (project && sdk().directory !== project.worktree) return sdk().directory
+    return "main"
   })
-  const project = createPromptProjectController({
-    controls: draft.project.controls,
-    onDone: draft.input.restoreFocus,
+  const projectRoot = createMemo(() => sync().project?.worktree ?? sdk().directory)
+  const localBranch = createMemo(() => serverSync().child(projectRoot())[0].vcs?.branch)
+  const selectedBranch = createMemo(() => {
+    const worktree = newSessionWorktree()
+    if (worktree === "main" || worktree === "create") return localBranch()
+    return serverSync().child(worktree)[0].vcs?.branch ?? localBranch()
   })
-  useNewSessionCommands({
-    restoreFocus: draft.input.restoreFocus,
-    project: {
-      empty: project.empty,
-      open: () => project.setOpen(true),
+  const promptInputV2Controller = usePromptInputV2Controller({
+    get controls() {
+      return inputController()
     },
+    get newSessionWorktree() {
+      return newSessionWorktree()
+    },
+    onNewSessionWorktreeReset: () => setStore("worktree", undefined),
+    onSubmit: () => comments.clear(),
   })
+  const projectController = createPromptProjectController({
+    controls: projectControls,
+    onDone: promptInputV2Controller.restoreFocus,
+  })
+
+  command.register("new-session", () => [
+    {
+      id: "command.palette",
+      title: language.t("command.palette"),
+      hidden: true,
+      onSelect: async () => {
+        const { DialogSelectFile } = await import("@/components/dialog-select-file")
+        void dialog.show(() => <DialogSelectFile />)
+      },
+    },
+    {
+      id: "input.focus",
+      title: language.t("command.input.focus"),
+      category: language.t("command.category.view"),
+      keybind: "ctrl+l",
+      onSelect: () => promptInputV2Controller.restoreFocus(),
+    },
+    {
+      id: "project.select",
+      title: language.t("session.new.project.search"),
+      category: language.t("command.category.project"),
+      keybind: "mod+shift+o",
+      disabled: projectController.empty(),
+      onSelect: () => projectController.setOpen(true),
+    },
+  ])
+
   createEffect(() => {
-    if (!draft.prompt.ready()) return
-    draft.input.restoreFocus()
+    if (!prompt.ready()) return
+    untrack(() => {
+      const text = searchParams.prompt
+      if (!text) return
+      prompt.set([{ type: "text", content: text, start: 0, end: text.length }], text.length)
+      setSearchParams({ ...searchParams, prompt: undefined })
+    })
   })
+
+  createEffect(() => {
+    if (!prompt.ready()) return
+    promptInputV2Controller.restoreFocus()
+  })
+
   const ready = Promise.resolve()
   const [suspendUntilPromptReady] = createResource(
-    () => draft.prompt.readyPromise() ?? ready,
+    () => prompt.ready.promise ?? ready,
     (promise) => promise.then(() => true),
   )
 
   return (
     <div class="relative size-full overflow-hidden flex flex-col">
       {suspendUntilPromptReady()}
-      <NewSessionStatus mount={rightMount} visible={settings.visibility.status} />
+      <Show when={rightMount()}>
+        {(mount) => (
+          <Portal mount={mount()}>
+            <Show when={settings.visibility.status()}>
+              <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
+                <StatusPopoverV2 />
+              </Tooltip>
+            </Show>
+          </Portal>
+        )}
+      </Show>
       <div class="flex-1 min-h-0 flex flex-col gap-2 p-2">
-        <NewSessionView input={draft.input} project={project} workspace={workspace} />
+        <div class="@container relative flex flex-col min-h-0 h-full flex-1">
+          <div class="flex-1 min-h-0 overflow-hidden rounded-[10px]">
+            <NewSessionDesignView>
+              <div class={NEW_SESSION_CONTENT_WIDTH}>
+                <div class="flex flex-col gap-8">
+                  <PromptInputV2Composer controller={promptInputV2Controller} />
+                  <Show when={projectController.empty()}>
+                    <PromptProjectAddButton controller={projectController} />
+                  </Show>
+                  <Show when={projectController.selected()}>
+                    <div class="flex min-h-7 min-w-0 flex-col items-center justify-center gap-0 text-v2-text-text-faint sm:flex-row">
+                      <PromptProjectSelector controller={projectController} placement="bottom" />
+                      <Show
+                        when={showWorkspaceBar()}
+                        fallback={<PromptGitStatus branch={selectedBranch()} noGit={sync().project?.vcs !== "git"} />}
+                      >
+                        <PromptWorkspaceSelector
+                          value={newSessionWorktree()}
+                          projectRoot={projectRoot()}
+                          workspaces={sync().project?.sandboxes ?? []}
+                          branch={selectedBranch()}
+                          onChange={(value) =>
+                            setStore(
+                              "worktree",
+                              value === "main" && sync().project?.worktree !== sdk().directory
+                                ? sync().project?.worktree
+                                : value,
+                            )
+                          }
+                          onDone={promptInputV2Controller.restoreFocus}
+                        />
+                      </Show>
+                    </div>
+                  </Show>
+                </div>
+                {/*</Show>*/}
+              </div>
+            </NewSessionDesignView>
+            <ProviderTip
+              ready={() => serverSync().child(sdk().directory)[0].provider_ready}
+              connected={() => providers.paid().length > 0}
+              openProviders={openProviders}
+            />
+          </div>
+        </div>
       </div>
     </div>
   )
 }
+
+function ProviderTip(props: { ready: () => boolean; connected: () => boolean; openProviders: () => void }) {
+  const language = useLanguage()
+  const [persistedState, setPersistedState, , persistedReady] = persisted(
+    Persist.global("new-session.provider-tip"),
+    createStore({ dismissedAt: 0 }),
+  )
+  const visible = createMemo(
+    () =>
+      props.ready() &&
+      persistedReady() &&
+      !props.connected() &&
+      Date.now() - persistedState.dismissedAt >= providerTipDismissalDuration,
+  )
+
+  function dismiss() {
+    setPersistedState("dismissedAt", Date.now())
+  }
+
+  const [ref, setRef] = createSignal<HTMLDivElement>()
+  const presence = createPresence({
+    show: () => visible(),
+    element: () => ref() ?? null,
+  })
+
+  return (
+    <Show when={presence.present()}>
+      <div class="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center px-10">
+        <div
+          ref={setRef}
+          data-component="provider-tip"
+          data-visible={visible()}
+          class="group/provider-tip pointer-events-auto relative flex h-6 max-w-full items-center transition-[opacity,transform] duration-[250ms] ease-[cubic-bezier(0.215,0.61,0.355,1)] motion-reduce:transition-none"
+          classList={{
+            "data-[visible=false]:animate-out fade-out slide-out-to-bottom-4": true,
+          }}
+        >
+          <button
+            type="button"
+            class="flex h-6 min-w-0 items-center rounded-[4px] pl-1.5 text-[13px] leading-none tracking-[-0.04px] text-v2-text-text-faint transition-[background-color,color] duration-150 ease-in-out hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-text-text-muted focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-text-text-muted focus-visible:outline-none"
+            onClick={props.openProviders}
+          >
+            <span class="truncate">{language.t("home.providerTip")}</span>
+            <span class="flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
+              <IconV2 name="chevron-down" size="small" class="-rotate-90" />
+            </span>
+          </button>
+          <TooltipV2
+            class="hover-reveal absolute left-full top-0 flex h-6 w-7 items-center justify-end delay-0 duration-0 group-hover/provider-tip:delay-[250ms] group-hover/provider-tip:duration-150 group-hover/provider-tip:opacity-100 focus-within:delay-0 focus-within:duration-0 focus-within:opacity-100"
+            placement="top"
+            openDelay={1000}
+            value={language.t("common.dismiss")}
+          >
+            <button
+              type="button"
+              class="flex size-6 items-center justify-center rounded-[4px] text-v2-icon-icon-muted transition-[background-color,color] duration-150 ease-in-out hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-icon-icon-base focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-icon-icon-base focus-visible:outline-none"
+              aria-label={language.t("common.dismiss")}
+              onClick={dismiss}
+            >
+              <IconV2 name="xmark-small" />
+            </button>
+          </TooltipV2>
+        </div>
+      </div>
+    </Show>
+  )
+}

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

@@ -1,64 +0,0 @@
-import { useSearchParams } from "@solidjs/router"
-import { createEffect, untrack } from "solid-js"
-import { usePromptInputV2Controller } from "@/components/prompt-input-v2"
-import { useComments } from "@/context/comments"
-import { useLocal } from "@/context/local"
-import { usePrompt } from "@/context/prompt"
-import { useServerSync } from "@/context/server-sync"
-import { createPromptInputController, createPromptProjectControls } from "@/pages/session/composer"
-import { createPromptModelSelection } from "@/pages/session/composer/prompt-model-selection"
-import { useSessionKey } from "@/pages/session/session-layout"
-import { useComposerCommands } from "@/pages/session/use-composer-commands"
-
-export function createNewSessionDraftController(workspace: { worktree: () => string; resetWorktree: () => void }) {
-  const prompt = usePrompt()
-  const serverSync = useServerSync()
-  const comments = useComments()
-  const local = useLocal()
-  const route = useSessionKey()
-  const [searchParams, setSearchParams] = useSearchParams<{ draftId?: string; prompt?: string }>()
-  const model = createPromptModelSelection({ agent: () => local.agent.current() })
-
-  useComposerCommands({ model })
-
-  const controls = createPromptInputController({
-    sessionKey: route.sessionKey,
-    sessionID: () => route.params.id,
-    queryOptions: serverSync().queryOptions,
-    model,
-  })
-  const projectControls = createPromptProjectControls()
-  const input = usePromptInputV2Controller({
-    get controls() {
-      return controls()
-    },
-    get newSessionWorktree() {
-      return workspace.worktree()
-    },
-    onNewSessionWorktreeReset: workspace.resetWorktree,
-    onSubmit: comments.clear,
-  })
-
-  createEffect(() => {
-    if (!prompt.ready()) return
-    untrack(() => {
-      const text = searchParams.prompt
-      if (!text) return
-      prompt.set([{ type: "text", content: text, start: 0, end: text.length }], text.length)
-      setSearchParams({ ...searchParams, prompt: undefined })
-    })
-  })
-
-  return {
-    input,
-    prompt: {
-      ready: prompt.ready,
-      readyPromise: () => prompt.ready.promise,
-    },
-    project: {
-      controls: projectControls,
-    },
-  }
-}
-
-export type NewSessionDraftController = ReturnType<typeof createNewSessionDraftController>

packages/app/src/pages/new-session/new-session-view.tsx

@@ -1,165 +0,0 @@
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
-import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
-import { WordmarkV2 } from "@opencode-ai/ui/v2/wordmark-v2"
-import { Show, createMemo, createSignal, type Accessor } from "solid-js"
-import { createStore } from "solid-js/store"
-import { Portal } from "solid-js/web"
-import createPresence from "solid-presence"
-import { PromptInputV2Composer } from "@/components/prompt-input-v2"
-import { PromptGitStatus, PromptWorkspaceSelector } from "@/components/prompt-workspace-selector"
-import {
-  PromptProjectAddButton,
-  PromptProjectSelector,
-  type PromptProjectController,
-} from "@/components/prompt-project-selector"
-import { StatusPopoverV2 } from "@/components/status-popover"
-import { useLanguage } from "@/context/language"
-import { useSDK } from "@/context/sdk"
-import { useServerSync } from "@/context/server-sync"
-import { useProviders } from "@/hooks/use-providers"
-import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
-import { Persist, persisted } from "@/utils/persist"
-import type { NewSessionDraftController } from "./new-session-draft-controller"
-import type { NewSessionWorkspaceController } from "./new-session-workspace-controller"
-
-const providerTipDismissalDuration = 30 * 24 * 60 * 60 * 1000
-
-export function NewSessionView(props: {
-  input: NewSessionDraftController["input"]
-  project: PromptProjectController
-  workspace: NewSessionWorkspaceController
-}) {
-  return (
-    <div class="@container relative flex flex-col min-h-0 h-full flex-1">
-      <div
-        data-component="session-new-design"
-        class="relative flex-1 min-h-0 overflow-hidden rounded-[10px] bg-v2-background-bg-deep"
-      >
-        <div class="absolute inset-x-0 top-[25.375%] flex justify-center px-6">
-          <div class={NEW_SESSION_CONTENT_WIDTH}>
-            <WordmarkV2 class="h-auto w-full text-v2-background-bg-inverse" />
-            <div class="mt-8 flex flex-col gap-8">
-              <PromptInputV2Composer controller={props.input} />
-              <Show when={props.project.empty()}>
-                <PromptProjectAddButton controller={props.project} />
-              </Show>
-              <Show when={props.project.selected()}>
-                <div class="flex min-h-7 min-w-0 flex-col items-center justify-center gap-0 text-v2-text-text-faint sm:flex-row">
-                  <PromptProjectSelector controller={props.project} placement="bottom" />
-                  <Show
-                    when={props.workspace.bar.visible()}
-                    fallback={
-                      <PromptGitStatus
-                        branch={props.workspace.bar.branch()}
-                        noGit={!props.workspace.project.git()}
-                      />
-                    }
-                  >
-                    <PromptWorkspaceSelector
-                      value={props.workspace.selection.value()}
-                      projectRoot={props.workspace.project.root()}
-                      workspaces={props.workspace.project.workspaces()}
-                      branch={props.workspace.bar.branch()}
-                      onChange={props.workspace.selection.set}
-                      onDone={props.input.restoreFocus}
-                    />
-                  </Show>
-                </div>
-              </Show>
-            </div>
-          </div>
-        </div>
-        <ProviderTip />
-      </div>
-    </div>
-  )
-}
-
-export function NewSessionStatus(props: { mount: Accessor<HTMLElement | null>; visible: Accessor<boolean> }) {
-  const language = useLanguage()
-
-  return (
-    <Show when={props.mount()}>
-      {(mount) => (
-        <Portal mount={mount()}>
-          <Show when={props.visible()}>
-            <Tooltip placement="bottom" value={language.t("status.popover.trigger")}>
-              <StatusPopoverV2 />
-            </Tooltip>
-          </Show>
-        </Portal>
-      )}
-    </Show>
-  )
-}
-
-function ProviderTip() {
-  const language = useLanguage()
-  const dialog = useDialog()
-  const sdk = useSDK()
-  const serverSync = useServerSync()
-  const providers = useProviders(() => sdk().directory)
-  const [persistedState, setPersistedState, , persistedReady] = persisted(
-    Persist.global("new-session.provider-tip"),
-    createStore({ dismissedAt: 0 }),
-  )
-  const visible = createMemo(
-    () =>
-      serverSync().child(sdk().directory)[0].provider_ready &&
-      persistedReady() &&
-      providers.paid().length === 0 &&
-      Date.now() - persistedState.dismissedAt >= providerTipDismissalDuration,
-  )
-  const [ref, setRef] = createSignal<HTMLDivElement>()
-  const presence = createPresence({
-    show: visible,
-    element: () => ref() ?? null,
-  })
-  const openProviders = () => {
-    void import("@/components/dialog-connect-provider").then(({ DialogConnectProvider }) => {
-      void dialog.show(() => <DialogConnectProvider directory={() => sdk().directory} />)
-    })
-  }
-
-  return (
-    <Show when={presence.present()}>
-      <div class="pointer-events-none absolute inset-x-0 bottom-4 flex justify-center px-10">
-        <div
-          ref={setRef}
-          data-component="provider-tip"
-          data-visible={visible()}
-          class="group/provider-tip pointer-events-auto relative flex h-6 max-w-full items-center transition-[opacity,transform] duration-[250ms] ease-[cubic-bezier(0.215,0.61,0.355,1)] motion-reduce:transition-none"
-          classList={{ "data-[visible=false]:animate-out fade-out slide-out-to-bottom-4": true }}
-        >
-          <button
-            type="button"
-            class="flex h-6 min-w-0 items-center rounded-[4px] pl-1.5 text-[13px] leading-none tracking-[-0.04px] text-v2-text-text-faint transition-[background-color,color] duration-150 ease-in-out hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-text-text-muted focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-text-text-muted focus-visible:outline-none"
-            onClick={openProviders}
-          >
-            <span class="truncate">{language.t("home.providerTip")}</span>
-            <span class="flex size-6 shrink-0 items-center justify-center" aria-hidden="true">
-              <IconV2 name="chevron-down" size="small" class="-rotate-90" />
-            </span>
-          </button>
-          <TooltipV2
-            class="hover-reveal absolute left-full top-0 flex h-6 w-7 items-center justify-end delay-0 duration-0 group-hover/provider-tip:delay-[250ms] group-hover/provider-tip:duration-150 group-hover/provider-tip:opacity-100 focus-within:delay-0 focus-within:duration-0 focus-within:opacity-100"
-            placement="top"
-            openDelay={1000}
-            value={language.t("common.dismiss")}
-          >
-            <button
-              type="button"
-              class="flex size-6 items-center justify-center rounded-[4px] text-v2-icon-icon-muted transition-[background-color,color] duration-150 ease-in-out hover:bg-v2-overlay-simple-overlay-hover hover:text-v2-icon-icon-base focus-visible:bg-v2-overlay-simple-overlay-hover focus-visible:text-v2-icon-icon-base focus-visible:outline-none"
-              aria-label={language.t("common.dismiss")}
-              onClick={() => setPersistedState("dismissedAt", Date.now())}
-            >
-              <IconV2 name="xmark-small" />
-            </button>
-          </TooltipV2>
-        </div>
-      </div>
-    </Show>
-  )
-}

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

@@ -1,43 +0,0 @@
-import { describe, expect, test } from "bun:test"
-import {
-  normalizeNewSessionWorktree,
-  resolveNewSessionBranch,
-  resolveNewSessionWorktree,
-} from "./new-session-workspace-controller"
-
-describe("new session workspace selection", () => {
-  test("uses main when the workspace bar is unavailable", () => {
-    expect(
-      resolveNewSessionWorktree({
-        enabled: false,
-        selected: "/project/feature",
-        directory: "/project/feature",
-        projectWorktree: "/project",
-      }),
-    ).toBe("main")
-  })
-
-  test("derives an existing worktree from the current directory", () => {
-    expect(
-      resolveNewSessionWorktree({ enabled: true, directory: "/project/feature", projectWorktree: "/project" }),
-    ).toBe("/project/feature")
-    expect(resolveNewSessionWorktree({ enabled: true, directory: "/project", projectWorktree: "/project" })).toBe(
-      "main",
-    )
-  })
-
-  test("normalizes main to the project root outside the main worktree", () => {
-    expect(normalizeNewSessionWorktree("main", "/project/feature", "/project")).toBe("/project")
-    expect(normalizeNewSessionWorktree("main", "/project", "/project")).toBe("main")
-  })
-
-  test("falls back to the local branch for main, create, and unknown worktrees", () => {
-    const branch = (worktree: string) => (worktree === "/project/feature" ? "feature" : undefined)
-    expect(resolveNewSessionBranch({ worktree: "main", local: "dev", worktreeBranch: branch })).toBe("dev")
-    expect(resolveNewSessionBranch({ worktree: "create", local: "dev", worktreeBranch: branch })).toBe("dev")
-    expect(resolveNewSessionBranch({ worktree: "/project/feature", local: "dev", worktreeBranch: branch })).toBe(
-      "feature",
-    )
-    expect(resolveNewSessionBranch({ worktree: "/missing", local: "dev", worktreeBranch: branch })).toBe("dev")
-  })
-})

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

@@ -1,77 +0,0 @@
-import { createMemo, createSignal } from "solid-js"
-import { useSDK } from "@/context/sdk"
-import { useServerSync } from "@/context/server-sync"
-import { useSync } from "@/context/sync"
-
-const workspaceBarEnabled = import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"
-
-export function resolveNewSessionWorktree(input: {
-  enabled: boolean
-  selected?: string
-  directory: string
-  projectWorktree?: string
-}) {
-  if (!input.enabled) return "main"
-  if (input.selected) return input.selected
-  if (input.projectWorktree && input.directory !== input.projectWorktree) return input.directory
-  return "main"
-}
-
-export function normalizeNewSessionWorktree(value: string, directory: string, projectWorktree?: string) {
-  if (value === "main" && projectWorktree !== directory) return projectWorktree
-  return value
-}
-
-export function resolveNewSessionBranch(input: {
-  worktree: string
-  local?: string
-  worktreeBranch: (worktree: string) => string | undefined
-}) {
-  if (input.worktree === "main" || input.worktree === "create") return input.local
-  return input.worktreeBranch(input.worktree) ?? input.local
-}
-
-export function createNewSessionWorkspaceController() {
-  const sdk = useSDK()
-  const sync = useSync()
-  const serverSync = useServerSync()
-  const [worktree, setWorktree] = createSignal<string>()
-  const visible = createMemo(() => workspaceBarEnabled && sync().project?.vcs === "git")
-  const value = createMemo(() =>
-    resolveNewSessionWorktree({
-      enabled: visible(),
-      selected: worktree(),
-      directory: sdk().directory,
-      projectWorktree: sync().project?.worktree,
-    }),
-  )
-  const projectRoot = createMemo(() => sync().project?.worktree ?? sdk().directory)
-  const localBranch = createMemo(() => serverSync().child(projectRoot())[0].vcs?.branch)
-  const branch = createMemo(() =>
-    resolveNewSessionBranch({
-      worktree: value(),
-      local: localBranch(),
-      worktreeBranch: (worktree) => serverSync().child(worktree)[0].vcs?.branch,
-    }),
-  )
-
-  return {
-    selection: {
-      value,
-      reset: () => setWorktree(),
-      set: (worktree: string) =>
-        setWorktree(normalizeNewSessionWorktree(worktree, sdk().directory, sync().project?.worktree)),
-    },
-    project: {
-      root: projectRoot,
-      workspaces: () => sync().project?.sandboxes ?? [],
-      git: () => sync().project?.vcs === "git",
-    },
-    bar: {
-      visible,
-      branch,
-    },
-  }
-}
-
-export type NewSessionWorkspaceController = ReturnType<typeof createNewSessionWorkspaceController>

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

@@ -1,44 +0,0 @@
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { useSettingsCommand } from "@/components/settings-dialog"
-import { useCommand } from "@/context/command"
-import { useLanguage } from "@/context/language"
-
-export function useNewSessionCommands(input: {
-  restoreFocus: () => void
-  project: {
-    empty: () => boolean
-    open: () => void
-  }
-}) {
-  const command = useCommand()
-  const dialog = useDialog()
-  const language = useLanguage()
-
-  useSettingsCommand()
-  command.register("new-session", () => [
-    {
-      id: "command.palette",
-      title: language.t("command.palette"),
-      hidden: true,
-      onSelect: async () => {
-        const { DialogSelectFile } = await import("@/components/dialog-select-file")
-        void dialog.show(() => <DialogSelectFile />)
-      },
-    },
-    {
-      id: "input.focus",
-      title: language.t("command.input.focus"),
-      category: language.t("command.category.view"),
-      keybind: "ctrl+l",
-      onSelect: input.restoreFocus,
-    },
-    {
-      id: "project.select",
-      title: language.t("session.new.project.search"),
-      category: language.t("command.category.project"),
-      keybind: "mod+shift+o",
-      disabled: input.project.empty(),
-      onSelect: input.project.open,
-    },
-  ])
-}

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 } from "@/context/terminal"
+import { TerminalProvider, useTerminal } 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, createSizing, shouldShowFileTree } from "@/pages/session/helpers"
+import { createOpenReviewFile, createSessionTabs, 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 { createSessionController } from "@/pages/session/session-controller"
+import { useSessionLayout } from "@/pages/session/session-layout"
 import { restorePromptModel, syncPromptModel, syncSessionModel } from "@/pages/session/session-model-helpers"
 import {
   clampSessionPanelWidth,
@@ -101,6 +101,7 @@ 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 }
@@ -365,28 +366,15 @@ 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 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 { params, sessionKey, workspaceKey, tabs, view } = useSessionLayout()
   const reviewMode = () => view().review.mode() ?? "git"
   const reviewFile = () => view().review.file()
-  const sessionOwnership = session.ownership
-  const info = session.data.info
-  const isChildSession = session.data.isChild
-  const revertMessageID = session.data.revertMessageID
+  const sessionOwnership = createSessionOwnership(sessionKey)
+  const newSessionDesign = createMemo(() => settings.general.newLayoutDesigns())
 
   createEffect(() => {
     if (!prompt.ready()) return
@@ -445,8 +433,8 @@ export default function Page() {
         const current = tabs().tabs()
         if (current.all.length > 0 || current.active) return
 
-        const all = session.tabs.normalizeAll(from.all)
-        const active = from.active ? session.tabs.normalize(from.active) : undefined
+        const all = normalizeTabs(from.all)
+        const active = from.active ? normalizeTab(from.active) : undefined
         tabs().setAll(all)
         tabs().setActive(active && all.includes(active) ? active : all[0])
 
@@ -457,6 +445,7 @@ 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)
@@ -521,16 +510,46 @@ 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 activeTab = session.tabs.activeTab
-  const activeFileTab = session.tabs.activeFileTab
-  const timeline = createTimelineModel({ session })
+  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 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
@@ -1119,10 +1138,11 @@ export default function Page() {
 
   useComposerCommands()
   useSessionCommands({
-    session,
     navigateMessageByOffset,
     setActiveMessage,
     focusInput,
+    review: reviewTab,
+    fileBrowser: () => newSessionDesign() && isDesktop() && !!params.id,
   })
   command.register("session-palette", () => [
     {
@@ -1672,6 +1692,8 @@ 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
@@ -1732,7 +1754,7 @@ export default function Page() {
   const queueEnabled = createMemo(() => {
     const id = params.id
     if (!id) return false
-    return settings.general.followup() === "queue" && session.data.working() && !composer.blocked() && !isChildSession()
+    return settings.general.followup() === "queue" && busy(id) && !composer.blocked() && !isChildSession()
   })
 
   const followupText = (item: FollowupDraft) => {
@@ -1910,7 +1932,7 @@ export default function Page() {
     if (followup.paused[sessionID]) return
     if (isChildSession()) return
     if (composer.blocked()) return
-    if (session.data.working()) return
+    if (busy(sessionID)) return
 
     void sendFollowup(sessionID, item.id)
   })
@@ -2058,7 +2080,6 @@ export default function Page() {
             <Show when={messagesReady() ? params.id : undefined} keyed>
               {(_id) => (
                 <MessageTimeline
-                  session={session}
                   actions={actions}
                   scroll={ui.scroll}
                   onResumeScroll={resumeScroll}
@@ -2136,7 +2157,7 @@ export default function Page() {
                 : undefined,
             onResponseSubmit: resumeScroll,
             openParent: () => {
-              const id = session.data.parentID()
+              const id = info()?.parentID
               if (!id) return
               navigate(
                 params.serverKey

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

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

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

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

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

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

@@ -1,328 +0,0 @@
-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,8 +11,10 @@ import {
   type Accessor,
   type JSX,
 } from "solid-js"
-import { createStore } from "solid-js/store"
+import { createStore, produce } 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"
@@ -33,6 +35,8 @@ 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"
@@ -41,22 +45,43 @@ 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, ToolPart, UserMessage } from "@opencode-ai/sdk/v2"
+import type {
+  AssistantMessage,
+  Message as MessageType,
+  Part as PartType,
+  ToolPart,
+  UserMessage,
+} from "@opencode-ai/sdk/v2"
+import { showToast } from "@/utils/toast"
 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 }>
@@ -64,6 +89,14 @@ 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]")
@@ -204,8 +237,7 @@ function TimelineDiffView(props: { diff: SummaryDiff }) {
   )
 }
 
-type MessageTimelineProps = {
-  session: TimelineSessionSource
+export function MessageTimeline(props: {
   actions?: UserActions
   scroll: { overflow: boolean; bottom: boolean; jump: boolean }
   onResumeScroll: () => void
@@ -225,42 +257,88 @@ type MessageTimelineProps = {
   setRevealMessage?: (fn: (id: string) => void) => void
   setScrollToEnd?: (fn: () => void) => void
   setHistoryAnchor?: (handlers: { capture: () => void; restore: (done: boolean) => void }) => void
-}
-
-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 navigate = useNavigate()
+  const serverSDK = useServerSDK()
+  const sdk = useSDK()
+  const sync = useSync()
+  const settings = useSettings()
+  const tabs = useTabs()
+  const dialog = useDialog()
   const language = useLanguage()
-  const ownerSessionKey = props.data.sessionKey()
+  const { params, sessionKey } = useSessionKey()
+  const ownerSessionKey = 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 = 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 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 activeMessageID = projection.activeMessageID
   const assistantMessagesByParent = projection.assistantMessagesByParent
   const lastAssistantGroupKey = projection.lastAssistantGroupKey
@@ -450,9 +528,9 @@ function MessageTimelineView(
     virtualizer.scrollToEnd()
   }
 
-  let measuredSessionKey = props.data.sessionKey()
+  let measuredSessionKey = sessionKey()
   createEffect(() => {
-    const key = props.data.sessionKey()
+    const key = sessionKey()
     timelineRows().length
     if (measuredSessionKey !== key) {
       measuredSessionKey = key
@@ -565,6 +643,88 @@ function MessageTimelineView(
     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
@@ -576,7 +736,7 @@ function MessageTimelineView(
 
   createEffect(
     on(
-      props.data.sessionKey,
+      sessionKey,
       () =>
         setTitle({
           draft: "",
@@ -589,6 +749,18 @@ function MessageTimelineView(
     ),
   )
 
+  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() ?? "" })
@@ -600,12 +772,193 @@ function MessageTimelineView(
   }
 
   const closeTitleEditor = () => {
-    if (props.pending.rename()) return
+    if (titleMutation.isPending) return
     setTitle("editing", false)
   }
 
-  const saveTitleEditor = async () => {
-    if (await props.action.rename(title.draft)) 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 workingTurn = (userMessageID: string) => sessionStatus().type !== "idle" && activeMessageID() === userMessageID
@@ -684,7 +1037,7 @@ function MessageTimelineView(
     const defaultOpen = createMemo(() => {
       const item = part()
       if (!item) return
-      return partDefaultOpen(item, props.data.shellToolPartsExpanded(), props.data.editToolPartsExpanded())
+      return partDefaultOpen(item, settings.general.shellToolPartsExpanded(), settings.general.editToolPartsExpanded())
     })
 
     return (
@@ -697,7 +1050,7 @@ function MessageTimelineView(
                 message={message()}
                 showAssistantCopyPartID={assistantCopyPartID(row().userMessageID)}
                 turnDurationMs={turnDurationMs(row().userMessageID)}
-                useV2Actions={props.data.newLayoutDesigns()}
+                useV2Actions={settings.general.newLayoutDesigns()}
                 defaultOpen={defaultOpen()}
                 toolOpen={toolOpen[part().id] ?? defaultOpen()}
                 onToolOpenChange={(open) => setToolOpen(part().id, open)}
@@ -760,8 +1113,8 @@ function MessageTimelineView(
                       <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]": props.data.newLayoutDesigns(),
-                          border: !props.data.newLayoutDesigns(),
+                          "border-[0.5px]": settings.general.newLayoutDesigns(),
+                          border: !settings.general.newLayoutDesigns(),
                         }}
                       >
                         <div class="flex items-center gap-1.5 min-w-0 text-11-medium text-text-strong">
@@ -796,7 +1149,7 @@ function MessageTimelineView(
           if (m?.role === "user") return m
         })
         const messageComments = createMemo(() => {
-          if (!props.data.newLayoutDesigns()) return []
+          if (!settings.general.newLayoutDesigns()) return []
           return getMsgParts(userMessageRow().userMessageID).flatMap((part) => MessageComment.fromPart(part) ?? [])
         })
         return (
@@ -809,7 +1162,7 @@ function MessageTimelineView(
                       message={message()}
                       parts={getMsgParts(userMessageRow().userMessageID)}
                       actions={props.actions}
-                      useV2Actions={props.data.newLayoutDesigns()}
+                      useV2Actions={settings.general.newLayoutDesigns()}
                       comments={messageComments()}
                     />
                   </div>
@@ -857,7 +1210,7 @@ function MessageTimelineView(
             <div data-slot="session-turn-message-container" class="w-full px-4 md:px-5">
               <TimelineThinkingRow
                 reasoningHeading={thinkingRow().reasoningHeading}
-                showReasoningSummaries={props.data.showReasoningSummaries()}
+                showReasoningSummaries={settings.general.showReasoningSummaries()}
               />
             </div>
           </TimelineRowFrame>
@@ -973,16 +1326,16 @@ function MessageTimelineView(
       <div
         class="absolute left-1/2 -translate-x-1/2 z-[60] pointer-events-none transition-all duration-200 ease-out"
         classList={{
-          "bottom-8": props.data.newLayoutDesigns(),
-          "bottom-6": !props.data.newLayoutDesigns(),
+          "bottom-8": settings.general.newLayoutDesigns(),
+          "bottom-6": !settings.general.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) && props.data.newLayoutDesigns(),
-          "scale-95": (!props.scroll.overflow || !props.scroll.jump) && !props.data.newLayoutDesigns(),
+          "scale-[0.8]": (!props.scroll.overflow || !props.scroll.jump) && settings.general.newLayoutDesigns(),
+          "scale-95": (!props.scroll.overflow || !props.scroll.jump) && !settings.general.newLayoutDesigns(),
         }}
       >
         <Show
-          when={props.data.newLayoutDesigns()}
+          when={settings.general.newLayoutDesigns()}
           fallback={
             <button
               type="button"
@@ -1045,22 +1398,22 @@ function MessageTimelineView(
             classList={{
               "sticky top-0 z-30": true,
               "bg-[linear-gradient(to_bottom,var(--v2-background-bg-base)_48px,transparent)]":
-                props.data.newLayoutDesigns(),
+                settings.general.newLayoutDesigns(),
               "bg-[linear-gradient(to_bottom,var(--background-stronger)_48px,transparent)]":
-                !props.data.newLayoutDesigns(),
+                !settings.general.newLayoutDesigns(),
               "w-full": true,
               "pb-4": true,
               "pr-3": true,
-              "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(),
+              "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(),
             }}
           >
             <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": !props.data.newLayoutDesigns(),
+                  "pr-3": !settings.general.newLayoutDesigns(),
                 }}
               >
                 <div class="flex items-center min-w-0 flex-1 w-full">
@@ -1069,7 +1422,7 @@ function MessageTimelineView(
                       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={props.action.navigateParent}
+                      onClick={navigateParent}
                     >
                       {parentTitle()}
                     </button>
@@ -1090,8 +1443,8 @@ function MessageTimelineView(
                           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":
-                              props.data.newLayoutDesigns(),
-                            "grow-1 min-w-0": !props.data.newLayoutDesigns(),
+                              settings.general.newLayoutDesigns(),
+                            "grow-1 min-w-0": !settings.general.newLayoutDesigns(),
                           }}
                           onClick={openTitleEditor}
                         >
@@ -1105,14 +1458,15 @@ function MessageTimelineView(
                         }}
                         data-slot="session-title-child"
                         value={title.draft}
-                        disabled={props.pending.rename()}
+                        disabled={titleMutation.isPending}
                         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]": !props.data.newLayoutDesigns(),
-                          "field-sizing-content self-start rounded-[6px] px-2 py-1 ": props.data.newLayoutDesigns(),
+                          "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(),
                         }}
                         style={{
-                          "--inline-input-shadow": props.data.newLayoutDesigns()
+                          "--inline-input-shadow": settings.general.newLayoutDesigns()
                             ? "none"
                             : "var(--shadow-xs-border-select)",
                         }}
@@ -1140,17 +1494,17 @@ function MessageTimelineView(
                   <div
                     classList={{
                       "shrink-0 flex items-center": true,
-                      "gap-2": props.data.newLayoutDesigns(),
-                      "gap-3": !props.data.newLayoutDesigns(),
+                      "gap-2": settings.general.newLayoutDesigns(),
+                      "gap-3": !settings.general.newLayoutDesigns(),
                     }}
                   >
                     <SessionContextUsage
                       placement="bottom"
-                      buttonAppearance={props.data.newLayoutDesigns() ? "v2" : "default"}
+                      buttonAppearance={settings.general.newLayoutDesigns() ? "v2" : "default"}
                     />
                     <Show when={!parentID()}>
                       <Show
-                        when={props.data.newLayoutDesigns()}
+                        when={settings.general.newLayoutDesigns()}
                         fallback={
                           <DropdownMenu
                             gutter={4}
@@ -1213,11 +1567,13 @@ function MessageTimelineView(
                                     </DropdownMenu.ItemLabel>
                                   </DropdownMenu.Item>
                                 </Show>
-                                <DropdownMenu.Item onSelect={() => void props.action.archive(id)}>
+                                <DropdownMenu.Item onSelect={() => void archiveSession(id)}>
                                   <DropdownMenu.ItemLabel>{language.t("common.archive")}</DropdownMenu.ItemLabel>
                                 </DropdownMenu.Item>
                                 <DropdownMenu.Separator />
-                                <DropdownMenu.Item onSelect={() => props.action.showDelete(id)}>
+                                <DropdownMenu.Item
+                                  onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id} />)}
+                                >
                                   <DropdownMenu.ItemLabel>{language.t("common.delete")}</DropdownMenu.ItemLabel>
                                 </DropdownMenu.Item>
                               </DropdownMenu.Content>
@@ -1282,11 +1638,11 @@ function MessageTimelineView(
                                   {language.t("session.share.action.share")}...
                                 </MenuV2.Item>
                               </Show>
-                              <MenuV2.Item onSelect={() => void props.action.archive(id)}>
+                              <MenuV2.Item onSelect={() => void archiveSession(id)}>
                                 {language.t("common.archive")}
                               </MenuV2.Item>
                               <MenuV2.Separator />
-                              <MenuV2.Item onSelect={() => props.action.showDelete(id)}>
+                              <MenuV2.Item onSelect={() => dialog.show(() => <DialogDeleteSession sessionID={id} />)}>
                                 {language.t("common.delete")}...
                               </MenuV2.Item>
                             </MenuV2.Content>
@@ -1298,7 +1654,7 @@ function MessageTimelineView(
                         open={share.open}
                         anchorRef={() => more}
                         placement="bottom-end"
-                        gutter={props.data.newLayoutDesigns() ? 6 : 4}
+                        gutter={settings.general.newLayoutDesigns() ? 6 : 4}
                         modal={false}
                         onOpenChange={(open) => {
                           if (open) setShare("dismiss", null)
@@ -1310,7 +1666,7 @@ function MessageTimelineView(
                             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)]":
-                                props.data.newLayoutDesigns(),
+                                settings.general.newLayoutDesigns(),
                             }}
                             style={{ "min-width": "320px" }}
                             onEscapeKeyDown={(event) => {
@@ -1330,7 +1686,7 @@ function MessageTimelineView(
                             }}
                           >
                             <Show
-                              when={props.data.newLayoutDesigns()}
+                              when={settings.general.newLayoutDesigns()}
                               fallback={
                                 <div class="flex flex-col p-3">
                                   <div class="flex flex-col gap-1">
@@ -1351,10 +1707,10 @@ function MessageTimelineView(
                                           size="large"
                                           variant="primary"
                                           class="w-full"
-                                          onClick={() => void props.action.share()}
-                                          disabled={props.pending.share()}
+                                          onClick={shareSession}
+                                          disabled={shareMutation.isPending}
                                         >
-                                          {props.pending.share()
+                                          {shareMutation.isPending
                                             ? language.t("session.share.action.publishing")
                                             : language.t("session.share.action.publish")}
                                         </Button>
@@ -1374,10 +1730,10 @@ function MessageTimelineView(
                                             size="large"
                                             variant="secondary"
                                             class="w-full shadow-none border border-border-weak-base"
-                                            onClick={() => void props.action.unshare()}
-                                            disabled={props.pending.unshare()}
+                                            onClick={unshareSession}
+                                            disabled={unshareMutation.isPending}
                                           >
-                                            {props.pending.unshare()
+                                            {unshareMutation.isPending
                                               ? language.t("session.share.action.unpublishing")
                                               : language.t("session.share.action.unpublish")}
                                           </Button>
@@ -1385,8 +1741,8 @@ function MessageTimelineView(
                                             size="large"
                                             variant="primary"
                                             class="w-full"
-                                            onClick={props.action.viewShare}
-                                            disabled={props.pending.unshare()}
+                                            onClick={viewShare}
+                                            disabled={unshareMutation.isPending}
                                           >
                                             {language.t("session.share.action.view")}
                                           </Button>
@@ -1414,10 +1770,10 @@ function MessageTimelineView(
                                     <ButtonV2
                                       variant="contrast"
                                       class="w-full"
-                                      onClick={() => void props.action.share()}
-                                      disabled={props.pending.share()}
+                                      onClick={shareSession}
+                                      disabled={shareMutation.isPending}
                                     >
-                                      {props.pending.share()
+                                      {shareMutation.isPending
                                         ? language.t("session.share.action.publishing")
                                         : language.t("session.share.action.publish")}
                                     </ButtonV2>
@@ -1443,7 +1799,7 @@ function MessageTimelineView(
                                         variant="ghost-muted"
                                         icon={<IconV2 name="outline-copy" />}
                                         aria-label={language.t("session.share.copy.copyLink")}
-                                        onClick={() => void props.action.copyShareUrl()}
+                                        onClick={copyShareUrl}
                                       />
                                       <IconButtonV2
                                         type="button"
@@ -1451,18 +1807,18 @@ function MessageTimelineView(
                                         variant="ghost-muted"
                                         icon={<IconV2 name="outline-square-arrow" />}
                                         aria-label={language.t("session.share.action.view")}
-                                        onClick={props.action.viewShare}
-                                        disabled={props.pending.unshare()}
+                                        onClick={viewShare}
+                                        disabled={unshareMutation.isPending}
                                       />
                                     </div>
                                     <div class="flex w-full">
                                       <ButtonV2
                                         variant="outline"
                                         class="w-full"
-                                        onClick={() => void props.action.unshare()}
-                                        disabled={props.pending.unshare()}
+                                        onClick={unshareSession}
+                                        disabled={unshareMutation.isPending}
                                       >
-                                        {props.pending.unshare()
+                                        {unshareMutation.isPending
                                           ? language.t("session.share.action.unpublishing")
                                           : language.t("session.share.action.unpublish")}
                                       </ButtonV2>

packages/app/src/pages/session/timeline/model.ts

@@ -1,24 +1,23 @@
-import type { Message } from "@opencode-ai/sdk/v2"
+import type { Message, UserMessage } 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 type { SessionController } from "../session-controller"
-
-export {
-  selectSessionUserMessages as selectUserMessages,
-  selectVisibleSessionUserMessages as selectVisibleUserMessages,
-} from "../session-domain"
+import { same } from "@/utils/same"
 
+const emptyUserMessages: UserMessage[] = []
 const sessionFreshness = 15_000
 
-export function createTimelineModel(input: { session: Pick<SessionController, "identity" | "history"> }) {
+export function createTimelineModel(input: {
+  sessionID: Accessor<string | undefined>
+  revertMessageID: Accessor<string | undefined>
+}) {
   const serverSync = useServerSync()
   const sync = useSync()
   let refreshFrame: number | undefined
   let refreshTimer: number | undefined
 
   const [resource] = createResource(
-    () => input.session.identity.sessionID(),
+    () => input.sessionID(),
     (id) => {
       clearRefresh()
       if (!id) return
@@ -30,7 +29,7 @@ export function createTimelineModel(input: { session: Pick<SessionController, "i
         refreshFrame = undefined
         refreshTimer = window.setTimeout(() => {
           refreshTimer = undefined
-          if (input.session.identity.sessionID() !== id) return
+          if (input.sessionID() !== id) return
           untrack(() => {
             if (stale) void sync().session.sync(id, { force: true })
           })
@@ -40,21 +39,33 @@ export function createTimelineModel(input: { session: Pick<SessionController, "i
       return sync().session.sync(id)
     },
   )
+  const messages = createMemo(() => {
+    const id = input.sessionID()
+    return id ? (sync().data.message[id] ?? []) : []
+  })
   const ready = createMemo(() => {
-    const id = input.session.identity.sessionID()
+    const id = input.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.session.identity.sessionID()
+    const id = input.sessionID()
     return id ? sync().session.history.more(id) : false
   })
   const loading = createMemo(() => {
-    const id = input.session.identity.sessionID()
+    const id = input.sessionID()
     return id ? sync().session.history.loading(id) : false
   })
   const loadOlder = async (options?: { before?: () => void; after?: (done: boolean) => void }) => {
     return loadOlderTimeline({
-      sessionID: input.session.identity.sessionID,
+      sessionID: input.sessionID,
       more,
       loading,
       loadMore: (sessionID) => sync().session.history.loadMore(sessionID),
@@ -67,12 +78,12 @@ export function createTimelineModel(input: { session: Pick<SessionController, "i
 
   return {
     history: { loadOlder, loading, more },
-    lastUserMessage: input.session.history.lastUserMessage,
-    messages: input.session.history.messages,
+    lastUserMessage: createMemo(() => visibleUserMessages().at(-1)),
+    messages,
     ready,
     resource,
-    userMessages: input.session.history.userMessages,
-    visibleUserMessages: input.session.history.visibleUserMessages,
+    userMessages,
+    visibleUserMessages,
   }
 
   function clearRefresh() {
@@ -83,10 +94,19 @@ export function createTimelineModel(input: { session: Pick<SessionController, "i
   }
 }
 
+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,25 +13,19 @@ 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 type { UserMessage } from "@opencode-ai/sdk/v2"
+import { UserMessage } from "@opencode-ai/sdk/v2"
+import { useSessionLayout } from "@/pages/session/session-layout"
+import { createSessionOwnership } from "./session-ownership"
 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) => {
@@ -55,17 +49,15 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
   const layout = useLayout()
   const local = useLocal()
   const navigate = useNavigate()
-  const params = actions.session.identity.params
-  const tabs = actions.session.layout.tabs
-  const view = actions.session.layout.view
-  const sessionOwnership = actions.session.ownership
+  const { params, sessionKey, tabs, view } = useSessionLayout()
+  const sessionOwnership = createSessionOwnership(sessionKey)
   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<SessionController["ownership"]["capture"]>
+    owner: ReturnType<ReturnType<typeof createSessionOwnership>["capture"]>
     prompt: T
     request: () => Promise<unknown>
     updatePrompt: (prompt: T) => void
@@ -76,13 +68,39 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
     input.owner.run(input.updateViewport)
   }
 
-  const info = actions.session.data.info
-  const activeFileTab = actions.session.tabs.activeFileTab
-  const closableTab = actions.session.tabs.closableTab
+  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 shown = settings.visibility.fileTree
 
-  const userMessages = actions.session.history.userMessages
-  const visibleUserMessages = actions.session.history.visibleUserMessages
+  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 showAllFiles = () => {
     if (layout.fileTree.tab() !== "changes") return
@@ -291,7 +309,7 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
     const session = sdk().api.session
     const directory = sdk().directory
     const promptSession = prompt.capture()
-    const revert = actions.session.data.revertMessageID()
+    const revert = info()?.revert?.messageID
     const messages = userMessages()
     const message = findLast(messages, (x) => !revert || x.id < revert)
     if (!message) return
@@ -320,7 +338,7 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
     const messages = userMessages()
     const promptSession = prompt.capture()
 
-    const revertMessageID = actions.session.data.revertMessageID()
+    const revertMessageID = info()?.revert?.messageID
     if (!revertMessageID) return
 
     const next = messages.find((x) => x.id > revertMessageID)