refactor(ui): isolate session components (#33670)

packages/app/src/app.tsx

@@ -4,7 +4,7 @@ import { I18nProvider } from "@opencode-ai/ui/context"
 import { DialogProvider } from "@opencode-ai/ui/context/dialog"
 import { FileComponentProvider } from "@opencode-ai/ui/context/file"
 import { MarkedProvider } from "@opencode-ai/ui/context/marked"
-import { File } from "@opencode-ai/ui/file"
+import { File } from "@opencode-ai/session-ui/file"
 import { Font } from "@opencode-ai/ui/font"
 import { Splash } from "@opencode-ai/ui/logo"
 import { ThemeProvider } from "@opencode-ai/ui/theme/context"

packages/app/src/components/session/session-context-tab.tsx

@@ -7,8 +7,8 @@ import { same } from "@/utils/same"
 import { Icon } from "@opencode-ai/ui/icon"
 import { Accordion } from "@opencode-ai/ui/accordion"
 import { StickyAccordionHeader } from "@opencode-ai/ui/sticky-accordion-header"
-import { File } from "@opencode-ai/ui/file"
-import { Markdown } from "@opencode-ai/ui/markdown"
+import { File } from "@opencode-ai/session-ui/file"
+import { Markdown } from "@opencode-ai/session-ui/markdown"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import type { Message, Part, UserMessage } from "@opencode-ai/sdk/v2/client"
 import { useLanguage } from "@/context/language"

packages/app/src/context/global-sync/bootstrap.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, test } from "bun:test"
 import { createStore } from "solid-js/store"
 import { QueryClient } from "@tanstack/solid-query"
 import type { Config, OpencodeClient, Project } from "@opencode-ai/sdk/v2/client"
-import type { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
+import type { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
 import { bootstrapDirectory, loadPathQuery, loadProvidersQuery } from "./bootstrap"
 import type { State, VcsCache } from "./types"
 import { ServerScope } from "@/utils/server-scope"

packages/app/src/context/global-sync/bootstrap.ts

@@ -19,7 +19,7 @@ import { cmp, normalizeAgentList, normalizeProviderList } from "./utils"
 import { formatServerError } from "@/utils/server-errors"
 import { QueryClient, queryOptions } from "@tanstack/solid-query"
 import { loadMcpQuery } from "../server-sync"
-import { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
+import { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
 import { ScopedKey, type ServerScope } from "@/utils/server-scope"
 
 type GlobalStore = {

packages/app/src/context/global-sync/child-store.test.ts

@@ -1,7 +1,7 @@
 import { beforeAll, describe, expect, mock, test } from "bun:test"
 import { createRoot, getOwner, type Owner } from "solid-js"
 import { createStore } from "solid-js/store"
-import type { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
+import type { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
 import type { State } from "./types"
 import type { QueryOptionsApi } from "../server-sync"
 import { ServerScope } from "@/utils/server-scope"

packages/app/src/context/global-sync/child-store.ts

@@ -17,7 +17,7 @@ import { canDisposeDirectory, pickDirectoriesToEvict } from "./eviction"
 import { useQuery } from "@tanstack/solid-query"
 import { QueryOptionsApi } from "../server-sync"
 import { directoryKey, type DirectoryKey } from "./utils"
-import { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
+import { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
 import type { ServerScope } from "@/utils/server-scope"
 
 export function createChildStoreManager(input: {

packages/app/src/context/global-sync/types.ts

@@ -15,7 +15,7 @@ import type {
   Todo,
   VcsInfo,
 } from "@opencode-ai/sdk/v2/client"
-import { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
+import { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
 import type { Accessor } from "solid-js"
 import type { SetStoreFunction, Store } from "solid-js/store"
 

packages/app/src/context/global-sync/utils.ts

@@ -1,5 +1,5 @@
 import type { Agent, Project, ProviderListResponse } from "@opencode-ai/sdk/v2/client"
-import { NormalizedProviderListResponse } from "@opencode-ai/ui/context"
+import { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
 export { pathKey as directoryKey, type PathKey as DirectoryKey } from "@/utils/path-key"
 
 export const cmp = (a: string, b: string) => (a < b ? -1 : a > b ? 1 : 0)

packages/app/src/context/server-sync.tsx

@@ -29,7 +29,8 @@ import { createRefreshQueue } from "./global-sync/queue"
 import { directoryKey } from "./global-sync/utils"
 import { PathKey } from "@/utils/path-key"
 import { createDirSyncContext } from "./directory-sync"
-import { createSimpleContext, NormalizedProviderListResponse } from "@opencode-ai/ui/context"
+import { createSimpleContext } from "@opencode-ai/ui/context"
+import { NormalizedProviderListResponse } from "@opencode-ai/session-ui/context"
 import { createRefCountMap } from "@/utils/refcount"
 import { useGlobal } from "./global"
 import { ServerConnection, useServer } from "./server"

packages/app/src/index.css

@@ -1,4 +1,5 @@
 @import "@opencode-ai/ui/styles/tailwind";
+@import "@opencode-ai/session-ui/styles";
 @import "@opencode-ai/ui/v2/styles/tailwind.css";
 
 @font-face {

packages/app/src/pages/directory-layout.tsx

@@ -1,4 +1,4 @@
-import { DataProvider } from "@opencode-ai/ui/context"
+import { DataProvider } from "@opencode-ai/session-ui/context"
 import { showToast } from "@/utils/toast"
 import { base64Encode } from "@opencode-ai/core/util/encode"
 import { useLocation, useNavigate, useParams } from "@solidjs/router"

packages/app/src/pages/home.tsx

@@ -60,7 +60,7 @@ import { ServerHealthIndicator } from "@/components/server/server-row"
 import { type ServerHealth } from "@/utils/server-health"
 import { Persist, persisted } from "@/utils/persist"
 import { useMarked } from "@opencode-ai/ui/context/marked"
-import { preloadMarkdown } from "@opencode-ai/ui/markdown-cache"
+import { preloadMarkdown } from "@opencode-ai/session-ui/markdown-cache"
 
 const HOME_SESSION_LIMIT = 64
 const HOME_ROW_LAYOUT =

packages/app/src/pages/layout/session-tab-avatar.tsx

@@ -3,7 +3,7 @@ import { getProjectAvatarVariant } from "@/context/layout"
 import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
 import { useSessionTabAvatarState } from "@/pages/layout/project-avatar-state"
 import { ProjectAvatar } from "@opencode-ai/ui/v2/project-avatar-v2"
-import { SessionProgressIndicatorV2 } from "@opencode-ai/ui/v2/session-progress-indicator-v2"
+import { SessionProgressIndicatorV2 } from "@opencode-ai/session-ui/v2/session-progress-indicator-v2"
 import { Show } from "solid-js"
 
 export function SessionTabAvatar(props: {

packages/app/src/pages/session.tsx

@@ -25,7 +25,7 @@ import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Select } from "@opencode-ai/ui/select"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { createAutoScroll } from "@opencode-ai/ui/hooks"
-import { previewSelectedLines } from "@opencode-ai/ui/pierre/selection-bridge"
+import { previewSelectedLines } from "@opencode-ai/session-ui/pierre/selection-bridge"
 import { Button } from "@opencode-ai/ui/button"
 import { showToast } from "@/utils/toast"
 import { base64Encode, checksum } from "@opencode-ai/core/util/encode"

packages/app/src/pages/session/composer/session-permission-dock.tsx

@@ -1,7 +1,7 @@
 import { For, Show } from "solid-js"
 import type { PermissionRequest } from "@opencode-ai/sdk/v2"
 import { Button } from "@opencode-ai/ui/button"
-import { DockPrompt } from "@opencode-ai/ui/dock-prompt"
+import { DockPrompt } from "@opencode-ai/session-ui/dock-prompt"
 import { Icon } from "@opencode-ai/ui/icon"
 import { useLanguage } from "@/context/language"
 

packages/app/src/pages/session/composer/session-question-dock.tsx

@@ -2,7 +2,7 @@ import { For, Show, createMemo, onCleanup, onMount, type Component } from "solid
 import { createStore } from "solid-js/store"
 import { useMutation } from "@tanstack/solid-query"
 import { Button } from "@opencode-ai/ui/button"
-import { DockPrompt } from "@opencode-ai/ui/dock-prompt"
+import { DockPrompt } from "@opencode-ai/session-ui/dock-prompt"
 import { Icon } from "@opencode-ai/ui/icon"
 import { showToast } from "@/utils/toast"
 import type { QuestionAnswer, QuestionRequest } from "@opencode-ai/sdk/v2"

packages/app/src/pages/session/composer/todo-panel-motion.stories.tsx

@@ -0,0 +1,605 @@
+// @ts-nocheck
+import { createEffect, createMemo, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import type { Todo } from "@opencode-ai/sdk/v2"
+import { useServerSync } from "@/context/global-sync"
+import { SessionComposerRegion, createSessionComposerState } from "@/pages/session/composer"
+
+export default {
+  title: "UI/Todo Panel Motion",
+  id: "components-todo-panel-motion",
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `### Overview
+This playground renders the real session composer region from app code.
+
+### Source path
+- \`packages/app/src/pages/session/composer/session-composer-region.tsx\`
+
+### Includes
+- \`SessionTodoDock\` (real)
+- \`PromptInput\` (real)
+
+No visual reimplementation layer is used for the dock/input stack.`,
+      },
+    },
+  },
+}
+
+const pool = [
+  "Refactor ToolStatusTitle DOM measurement to offscreen global measurer (unconstrained by timeline layout)",
+  "Remove inline measure nodes/CSS hooks and keep width morph behavior intact",
+  "Run typechecks/tests and report what changed",
+  "Verify reduced-motion behavior in timeline",
+  "Review diff for animation edge cases",
+  "Document rollout notes in PR description",
+  "Check keyboard and screen reader semantics",
+  "Add storybook controls for iteration speed",
+]
+
+const btn = (accent?: boolean) =>
+  ({
+    padding: "6px 14px",
+    "border-radius": "6px",
+    border: "1px solid var(--color-divider, #333)",
+    background: accent ? "var(--color-accent, #58f)" : "var(--color-fill-element, #222)",
+    color: "var(--color-text, #eee)",
+    cursor: "pointer",
+    "font-size": "13px",
+  }) as const
+
+const css = `
+[data-component="todo-stage"] {
+  display: grid;
+  gap: 20px;
+  padding: 20px;
+}
+
+[data-component="todo-preview"] {
+  height: 560px;
+  min-height: 0;
+}
+
+[data-component="todo-session-root"] {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  background: var(--background-base);
+  border: 1px solid var(--border-weak-base);
+  border-radius: 12px;
+}
+
+[data-component="todo-session-frame"] {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+[data-component="todo-session-panel"] {
+  position: relative;
+  flex: 1 1 auto;
+  min-height: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--background-stronger);
+}
+
+[data-slot="todo-preview-content"] {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: hidden;
+}
+
+[data-slot="todo-preview-scroll"] {
+  height: 100%;
+  overflow: auto;
+  min-height: 0;
+  padding: 14px 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+[data-slot="todo-preview-spacer"] {
+  flex: 1 1 auto;
+  min-height: 0;
+}
+
+[data-slot="todo-preview-msg"] {
+  border-radius: 8px;
+  border: 1px solid var(--border-weak-base);
+  background: var(--surface-base);
+  color: var(--text-weak);
+  padding: 8px 10px;
+  font-size: 13px;
+  line-height: 1.35;
+}
+
+[data-slot="todo-preview-msg"][data-strong="true"] {
+  color: var(--text-strong);
+}
+`
+
+export const Playground = {
+  render: () => {
+    const global = useServerSync()
+    const [cfg, setCfg] = createStore({
+      open: true,
+      step: 1,
+      dockOpenDuration: 0.3,
+      dockOpenBounce: 0,
+      dockCloseDuration: 0.3,
+      dockCloseBounce: 0,
+      drawerExpandDuration: 0.3,
+      drawerExpandBounce: 0,
+      drawerCollapseDuration: 0.3,
+      drawerCollapseBounce: 0,
+      subtitleDuration: 600,
+      subtitleAuto: true,
+      subtitleTravel: 25,
+      subtitleEdge: 17,
+      countDuration: 600,
+      countMask: 18,
+      countMaskHeight: 0,
+      countWidthDuration: 560,
+    })
+    const open = () => cfg.open
+    const step = () => cfg.step
+    const dockOpenDuration = () => cfg.dockOpenDuration
+    const dockOpenBounce = () => cfg.dockOpenBounce
+    const dockCloseDuration = () => cfg.dockCloseDuration
+    const dockCloseBounce = () => cfg.dockCloseBounce
+    const drawerExpandDuration = () => cfg.drawerExpandDuration
+    const drawerExpandBounce = () => cfg.drawerExpandBounce
+    const drawerCollapseDuration = () => cfg.drawerCollapseDuration
+    const drawerCollapseBounce = () => cfg.drawerCollapseBounce
+    const subtitleDuration = () => cfg.subtitleDuration
+    const subtitleAuto = () => cfg.subtitleAuto
+    const subtitleTravel = () => cfg.subtitleTravel
+    const subtitleEdge = () => cfg.subtitleEdge
+    const countDuration = () => cfg.countDuration
+    const countMask = () => cfg.countMask
+    const countMaskHeight = () => cfg.countMaskHeight
+    const countWidthDuration = () => cfg.countWidthDuration
+    const state = createSessionComposerState({ closeMs: () => Math.round(dockCloseDuration() * 1000) })
+    let frame
+    let composerRef
+    let scrollRef
+
+    const todos = createMemo<Todo[]>(() => {
+      const done = Math.max(0, Math.min(3, step()))
+      return pool.slice(0, 3).map((content, i) => ({
+        id: `todo-${i + 1}`,
+        content,
+        status: i < done ? "completed" : i === done && done < 3 ? "in_progress" : "pending",
+      }))
+    })
+
+    createEffect(() => {
+      global.todo.set("story-session", todos())
+    })
+
+    const clear = () => {
+      if (frame) cancelAnimationFrame(frame)
+      frame = undefined
+    }
+
+    const pin = () => {
+      if (!scrollRef) return
+      scrollRef.scrollTop = scrollRef.scrollHeight
+    }
+
+    const collapsed = () =>
+      !!composerRef?.querySelector('[data-action="session-todo-toggle-button"][data-collapsed="true"]')
+
+    const setCollapsed = (value: boolean) => {
+      const button = composerRef?.querySelector('[data-action="session-todo-toggle-button"]')
+      if (!(button instanceof HTMLButtonElement)) return
+      if (collapsed() === value) return
+      button.click()
+    }
+
+    const openDock = () => {
+      clear()
+      setCfg("open", true)
+      frame = requestAnimationFrame(() => {
+        pin()
+        frame = undefined
+      })
+    }
+
+    const closeDock = () => {
+      clear()
+      setCfg("open", false)
+    }
+
+    const dockOpen = () => open()
+
+    const toggleDock = () => {
+      if (dockOpen()) {
+        closeDock()
+        return
+      }
+      openDock()
+    }
+
+    const toggleDrawer = () => {
+      if (!dockOpen()) {
+        openDock()
+        frame = requestAnimationFrame(() => {
+          pin()
+          setCollapsed(true)
+          frame = undefined
+        })
+        return
+      }
+      setCollapsed(!collapsed())
+    }
+
+    const cycle = () => {
+      setCfg("step", (value) => (value + 1) % 4)
+    }
+
+    onCleanup(clear)
+
+    return (
+      <div data-component="todo-stage">
+        <style>{css}</style>
+
+        <div data-component="todo-preview">
+          <div data-component="todo-session-root">
+            <div data-component="todo-session-frame">
+              <div data-component="todo-session-panel">
+                <div data-slot="todo-preview-content">
+                  <div data-slot="todo-preview-scroll" class="scroll-view__viewport" ref={scrollRef}>
+                    <div data-slot="todo-preview-spacer" />
+                    <div data-slot="todo-preview-msg" data-strong="true">
+                      Thinking Checking type safety
+                    </div>
+                    <div data-slot="todo-preview-msg">Shell Prints five topic blocks between timed commands</div>
+                  </div>
+                </div>
+
+                <div ref={composerRef}>
+                  <SessionComposerRegion
+                    state={state}
+                    centered={false}
+                    inputRef={() => {}}
+                    newSessionWorktree=""
+                    onNewSessionWorktreeReset={() => {}}
+                    onSubmit={() => {}}
+                    onResponseSubmit={pin}
+                    setPromptDockRef={() => {}}
+                    dockOpenVisualDuration={dockOpenDuration()}
+                    dockOpenBounce={dockOpenBounce()}
+                    dockCloseVisualDuration={dockCloseDuration()}
+                    dockCloseBounce={dockCloseBounce()}
+                    drawerExpandVisualDuration={drawerExpandDuration()}
+                    drawerExpandBounce={drawerExpandBounce()}
+                    drawerCollapseVisualDuration={drawerCollapseDuration()}
+                    drawerCollapseBounce={drawerCollapseBounce()}
+                    subtitleDuration={subtitleDuration()}
+                    subtitleTravel={subtitleAuto() ? undefined : subtitleTravel()}
+                    subtitleEdge={subtitleAuto() ? undefined : subtitleEdge()}
+                    countDuration={countDuration()}
+                    countMask={countMask()}
+                    countMaskHeight={countMaskHeight()}
+                    countWidthDuration={countWidthDuration()}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div style={{ display: "flex", gap: "8px", "flex-wrap": "wrap" }}>
+          <button onClick={toggleDock} style={btn(dockOpen())}>
+            {dockOpen() ? "Animate close" : "Animate open"}
+          </button>
+          <button onClick={toggleDrawer} style={btn(dockOpen() && collapsed())}>
+            {dockOpen() && collapsed() ? "Expand todo dock" : "Collapse todo dock"}
+          </button>
+          <button onClick={cycle} style={btn(step() > 0)}>
+            Cycle progress ({step()}/3 done)
+          </button>
+          {[0, 1, 2, 3].map((value) => (
+            <button onClick={() => setCfg("step", value)} style={btn(step() === value)}>
+              {value} done
+            </button>
+          ))}
+        </div>
+
+        <div style={{ display: "grid", gap: "10px", "max-width": "560px" }}>
+          <div style={{ "font-size": "12px", color: "var(--color-text-secondary, #a3a3a3)" }}>Dock open</div>
+          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
+            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
+              duration
+            </span>
+            <input
+              type="range"
+              min="0.1"
+              max="1"
+              step="0.01"
+              value={dockOpenDuration()}
+              onInput={(event) => setCfg("dockOpenDuration", event.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
+            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
+              {Math.round(dockOpenDuration() * 1000)}ms
+            </span>
+          </label>
+          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
+            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
+              bounce
+            </span>
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.01"
+              value={dockOpenBounce()}
+              onInput={(event) => setCfg("dockOpenBounce", event.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
+            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
+              {dockOpenBounce().toFixed(2)}
+            </span>
+          </label>
+
+          <div style={{ "font-size": "12px", color: "var(--color-text-secondary, #a3a3a3)", "margin-top": "4px" }}>
+            Dock close
+          </div>
+          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
+            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
+              duration
+            </span>
+            <input
+              type="range"
+              min="0.1"
+              max="1"
+              step="0.01"
+              value={dockCloseDuration()}
+              onInput={(event) => setCfg("dockCloseDuration", event.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
+            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
+              {Math.round(dockCloseDuration() * 1000)}ms
+            </span>
+          </label>
+          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
+            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
+              bounce
+            </span>
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.01"
+              value={dockCloseBounce()}
+              onInput={(event) => setCfg("dockCloseBounce", event.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
+            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
+              {dockCloseBounce().toFixed(2)}
+            </span>
+          </label>
+
+          <div style={{ "font-size": "12px", color: "var(--color-text-secondary, #a3a3a3)", "margin-top": "4px" }}>
+            Drawer expand
+          </div>
+          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
+            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
+              duration
+            </span>
+            <input
+              type="range"
+              min="0.1"
+              max="1"
+              step="0.01"
+              value={drawerExpandDuration()}
+              onInput={(event) => setCfg("drawerExpandDuration", event.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
+            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
+              {Math.round(drawerExpandDuration() * 1000)}ms
+            </span>
+          </label>
+          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
+            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
+              bounce
+            </span>
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.01"
+              value={drawerExpandBounce()}
+              onInput={(event) => setCfg("drawerExpandBounce", event.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
+            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
+              {drawerExpandBounce().toFixed(2)}
+            </span>
+          </label>
+
+          <div style={{ "font-size": "12px", color: "var(--color-text-secondary, #a3a3a3)", "margin-top": "4px" }}>
+            Drawer collapse
+          </div>
+          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
+            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
+              duration
+            </span>
+            <input
+              type="range"
+              min="0.1"
+              max="1"
+              step="0.01"
+              value={drawerCollapseDuration()}
+              onInput={(event) => setCfg("drawerCollapseDuration", event.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
+            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
+              {Math.round(drawerCollapseDuration() * 1000)}ms
+            </span>
+          </label>
+          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
+            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
+              bounce
+            </span>
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.01"
+              value={drawerCollapseBounce()}
+              onInput={(event) => setCfg("drawerCollapseBounce", event.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
+            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
+              {drawerCollapseBounce().toFixed(2)}
+            </span>
+          </label>
+
+          <div style={{ "font-size": "12px", color: "var(--color-text-secondary, #a3a3a3)", "margin-top": "4px" }}>
+            Subtitle odometer
+          </div>
+          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
+            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
+              duration
+            </span>
+            <input
+              type="range"
+              min="120"
+              max="1400"
+              step="10"
+              value={subtitleDuration()}
+              onInput={(event) => setCfg("subtitleDuration", event.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
+            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
+              {Math.round(subtitleDuration())}ms
+            </span>
+          </label>
+          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
+            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
+              auto fit
+            </span>
+            <input
+              type="checkbox"
+              checked={subtitleAuto()}
+              onInput={(event) => setCfg("subtitleAuto", event.currentTarget.checked)}
+            />
+            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
+              {subtitleAuto() ? "on" : "off"}
+            </span>
+          </label>
+          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
+            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
+              travel
+            </span>
+            <input
+              type="range"
+              min="0"
+              max="40"
+              step="1"
+              value={subtitleTravel()}
+              onInput={(event) => setCfg("subtitleTravel", event.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
+            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>{subtitleTravel()}px</span>
+          </label>
+          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
+            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
+              edge
+            </span>
+            <input
+              type="range"
+              min="1"
+              max="40"
+              step="1"
+              value={subtitleEdge()}
+              onInput={(event) => setCfg("subtitleEdge", event.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
+            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>{subtitleEdge()}%</span>
+          </label>
+
+          <div style={{ "font-size": "12px", color: "var(--color-text-secondary, #a3a3a3)", "margin-top": "4px" }}>
+            Count odometer
+          </div>
+          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
+            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
+              duration
+            </span>
+            <input
+              type="range"
+              min="120"
+              max="1400"
+              step="10"
+              value={countDuration()}
+              onInput={(event) => setCfg("countDuration", event.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
+            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
+              {Math.round(countDuration())}ms
+            </span>
+          </label>
+          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
+            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
+              mask
+            </span>
+            <input
+              type="range"
+              min="4"
+              max="40"
+              step="1"
+              value={countMask()}
+              onInput={(event) => setCfg("countMask", event.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
+            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>{countMask()}%</span>
+          </label>
+          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
+            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
+              mask height
+            </span>
+            <input
+              type="range"
+              min="0"
+              max="14"
+              step="1"
+              value={countMaskHeight()}
+              onInput={(event) => setCfg("countMaskHeight", event.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
+            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>{countMaskHeight()}px</span>
+          </label>
+          <label style={{ display: "flex", "align-items": "center", gap: "12px" }}>
+            <span style={{ width: "110px", "font-size": "13px", color: "var(--color-text-secondary, #a3a3a3)" }}>
+              width spring
+            </span>
+            <input
+              type="range"
+              min="0"
+              max="1200"
+              step="10"
+              value={countWidthDuration()}
+              onInput={(event) => setCfg("countWidthDuration", event.currentTarget.valueAsNumber)}
+              style={{ flex: 1 }}
+            />
+            <span style={{ width: "64px", "text-align": "right", "font-size": "13px" }}>
+              {Math.round(countWidthDuration())}ms
+            </span>
+          </label>
+        </div>
+      </div>
+    )
+  },
+}

packages/app/src/pages/session/file-tabs.tsx

@@ -2,10 +2,10 @@ import { createEffect, createMemo, createSignal, Match, on, onCleanup, Switch }
 import { createStore } from "solid-js/store"
 import { Dynamic } from "solid-js/web"
 import { makeEventListener } from "@solid-primitives/event-listener"
-import type { FileSearchHandle } from "@opencode-ai/ui/file"
+import type { FileSearchHandle } from "@opencode-ai/session-ui/file"
 import { useFileComponent } from "@opencode-ai/ui/context/file"
-import { cloneSelectedLineRange, previewSelectedLines } from "@opencode-ai/ui/pierre/selection-bridge"
-import { createLineCommentController } from "@opencode-ai/ui/line-comment-annotations"
+import { cloneSelectedLineRange, previewSelectedLines } from "@opencode-ai/session-ui/pierre/selection-bridge"
+import { createLineCommentController } from "@opencode-ai/session-ui/line-comment-annotations"
 import { sampledChecksum } from "@opencode-ai/core/util/encode"
 import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { IconButton } from "@opencode-ai/ui/icon-button"

packages/app/src/pages/session/review-tab.tsx

@@ -1,12 +1,12 @@
 import { createEffect, onCleanup, type JSX } from "solid-js"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import type { SnapshotFileDiff, VcsFileDiff } from "@opencode-ai/sdk/v2"
-import { SessionReview } from "@opencode-ai/ui/session-review"
+import { SessionReview } from "@opencode-ai/session-ui/session-review"
 import type {
   SessionReviewCommentActions,
   SessionReviewCommentDelete,
   SessionReviewCommentUpdate,
-} from "@opencode-ai/ui/session-review"
+} from "@opencode-ai/session-ui/session-review"
 import type { SelectedLineRange } from "@/context/file"
 import { useSDK } from "@/context/sdk"
 import { useLayout } from "@/context/layout"

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

@@ -26,7 +26,7 @@ import {
   Part as MessagePart,
   partDefaultOpen,
   type UserActions,
-} from "@opencode-ai/ui/message-part"
+} from "@opencode-ai/session-ui/message-part"
 import { DiffChanges } from "@opencode-ai/ui/diff-changes"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { Icon } from "@opencode-ai/ui/icon"
@@ -35,7 +35,7 @@ import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
 import { Dialog } from "@opencode-ai/ui/dialog"
 import { InlineInput } from "@opencode-ai/ui/inline-input"
 import { Spinner } from "@opencode-ai/ui/spinner"
-import { SessionRetry } from "@opencode-ai/ui/session-retry"
+import { SessionRetry } from "@opencode-ai/session-ui/session-retry"
 import { ScrollView } from "@opencode-ai/ui/scroll-view"
 import { StickyAccordionHeader } from "@opencode-ai/ui/sticky-accordion-header"
 import { TextField } from "@opencode-ai/ui/text-field"
@@ -51,7 +51,7 @@ import type {
 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/ui/session-diff"
+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"

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

@@ -1,6 +1,6 @@
 import { parseCommentNote, readCommentMetadata } from "@/utils/comment-note"
 import { AssistantMessage, Part, SessionStatus, SnapshotFileDiff, UserMessage } from "@opencode-ai/sdk/v2"
-import { groupParts, PartGroup, renderable } from "@opencode-ai/ui/message-part"
+import { groupParts, PartGroup, renderable } from "@opencode-ai/session-ui/message-part"
 import { Data, Equal } from "effect"
 
 export type SummaryDiff = SnapshotFileDiff & { file: string }

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

@@ -1,7 +1,7 @@
 import { useNavigate } from "@solidjs/router"
 import { useCommand, type CommandOption } from "@/context/command"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { previewSelectedLines } from "@opencode-ai/ui/pierre/selection-bridge"
+import { previewSelectedLines } from "@opencode-ai/session-ui/pierre/selection-bridge"
 import { useFile, selectionFromLines, type FileSelection, type SelectedLineRange } from "@/context/file"
 import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"