From 384cff3768bd209f7a7ecd33f44a00359a1f8d2f Mon Sep 17 00:00:00 2001
From: Luke Parker <10430890+Hona@users.noreply.github.com>
Date: Fri, 21 Aug 2026 09:16:07 +1000
Subject: [PATCH] refactor(app): establish session vertical slice (#43637)

---
 .../reproduction/timeline-suspense/main.tsx   |    2 +-
 packages/app/src/app.tsx                      |    2 +-
 .../app/src/components/command-palette.ts     |    4 +-
 .../app/src/components/prompt-input-v2.tsx    |    2 +-
 packages/app/src/components/session/index.ts  |    5 -
 .../src/pages/layout/project-avatar-state.ts  |    2 +-
 .../new-session-draft-controller.ts           |    8 +-
 .../new-session-layout.ts                     |    0
 .../pages/new-session/new-session-view.tsx    |    2 +-
 packages/app/src/pages/session.tsx            | 2005 -----------------
 .../src/pages/session/terminal-panel-v2.tsx   |  322 ---
 .../commands}/use-composer-commands.tsx       |    4 +-
 .../commands}/use-session-commands.tsx        |  123 +-
 .../src/session/composer/active-session.tsx   |  416 ++++
 .../src/{pages => }/session/composer/index.ts |    0
 .../composer/prompt-model-selection.ts        |    0
 .../composer/session-composer-controls.ts     |    1 -
 .../composer/session-composer-pullout.tsx     |    0
 .../session-composer-region-controller.ts     |    2 +-
 .../composer/session-composer-region.tsx      |   10 +-
 .../composer/session-composer-state.test.ts   |    2 +-
 .../composer/session-composer-state.ts        |    4 +-
 .../composer/session-followup-dock.tsx        |    0
 .../composer}/session-new-view.tsx            |    0
 .../composer/session-revert-dock.stories.tsx  |    4 +-
 .../session/composer/session-revert-dock.tsx  |    0
 .../files}/file-tab-scroll.test.ts            |    0
 .../files}/file-tab-scroll.ts                 |    0
 .../session => session/files}/file-tabs.tsx   |   10 +-
 .../files/list.tsx}                           |    4 +-
 .../files/open-in-app-button.tsx}             |    4 +-
 .../session => session/files}/open-in-app.tsx |    0
 .../files}/session-context-format.ts          |    0
 .../files}/session-context-tab.tsx            |    2 +-
 .../files}/session-file-browser-tab.tsx       |   10 +-
 .../files}/session-side-panel.tsx             |   27 +-
 .../files}/session-sortable-tab.tsx           |    0
 .../files/tab.tsx}                            |    2 +-
 .../app/src/{pages => }/session/handoff.ts    |    0
 .../header}/session-header-actions.tsx        |    4 +-
 .../header}/session-header.tsx                |   14 +-
 .../src/{pages => }/session/helpers.test.ts   |    0
 .../app/src/{pages => }/session/helpers.ts    |    2 +-
 .../session/message-gesture.test.ts           |    0
 .../{pages => }/session/message-gesture.ts    |    0
 .../session/message-id-from-hash.ts           |    0
 .../model.test.ts}                            |    0
 .../model.ts}                                 |   38 +-
 .../requests}/session-background-dock.tsx     |    2 +-
 .../requests}/session-permission-dock.tsx     |    0
 .../requests}/session-question-dock.tsx       |    0
 .../requests}/session-request-tree.ts         |    0
 packages/app/src/session/review/model.ts      |  427 ++++
 .../review/panel-state.ts}                    |    4 +-
 .../review/panel.tsx}                         |   28 +-
 .../review}/review-diff-kinds.test.ts         |    0
 .../review}/review-diff-kinds.ts              |    0
 .../session => session/review}/review-tab.tsx |    0
 packages/app/src/session/review/view.tsx      |  224 ++
 packages/app/src/session/route-error.tsx      |   56 +
 packages/app/src/session/route.tsx            |  122 +
 packages/app/src/session/screen-layout.ts     |  110 +
 packages/app/src/session/screen.tsx           |  202 ++
 .../src/{pages => }/session/session-domain.ts |    0
 .../src/{pages => }/session/session-frame.tsx |    0
 .../src/{pages => }/session/session-layout.ts |    0
 .../session/session-model-helpers.test.ts     |    0
 .../session/session-model-helpers.ts          |    0
 .../{pages => }/session/session-ownership.ts  |    0
 .../session/session-panel-layout.test.ts      |    0
 .../session/session-panel-layout.ts           |    0
 .../session/session-panel-width.test.ts       |    0
 .../session/session-panel-width.ts            |    0
 .../{pages => }/session/session-resolution.ts |    0
 .../session-screen.stories.tsx}               |  182 +-
 .../story-model.tsx}                          |   59 +-
 packages/app/src/session/terminal/panel.tsx   |  305 +++
 packages/app/src/session/terminal/surface.tsx |   64 +
 .../terminal/tab.tsx}                         |   16 +-
 .../terminal}/terminal-label.ts               |    6 +-
 .../terminal}/terminal-panel.test.ts          |    0
 .../timeline/controller-projection.test.ts    |    0
 .../session/timeline/controller-projection.ts |    0
 .../session/timeline/controller.tsx           |    8 +-
 .../app/src/session/timeline/interaction.ts   |  328 +++
 .../session/timeline/measure.test.ts          |    0
 .../{pages => }/session/timeline/measure.ts   |    0
 .../session/timeline/message-timeline.tsx     |   32 +-
 .../session/timeline/model.test.ts            |    0
 .../src/{pages => }/session/timeline/model.ts |    4 +-
 .../timeline/observe-element-offset.test.ts   |    0
 .../timeline/observe-element-offset.ts        |    0
 .../session/timeline/projection.ts            |    0
 .../timeline}/session-context-usage.tsx       |    4 +-
 .../timeline}/session-workspace-menu.tsx      |    0
 .../session/timeline/virtual-items.ts         |    0
 .../session/timeline/virtualizer.tsx          |    2 +-
 .../session/usage-exceeded-dialogs.tsx        |    2 +-
 .../session/use-session-hash-scroll.test.ts   |    0
 .../session/use-session-hash-scroll.ts        |    0
 ...ate.test.ts => review-panel-state.test.ts} |    7 +-
 .../test-browser/session-ownership.test.ts    |    2 +-
 .../test-browser/session-resolution.test.ts   |    2 +-
 .../app/test-browser/solid-virtual.test.ts    |    2 +-
 104 files changed, 2575 insertions(+), 2662 deletions(-)
 delete mode 100644 packages/app/src/components/session/index.ts
 rename packages/app/src/pages/{session => new-session}/new-session-layout.ts (100%)
 delete mode 100644 packages/app/src/pages/session.tsx
 delete mode 100644 packages/app/src/pages/session/terminal-panel-v2.tsx
 rename packages/app/src/{pages/session => session/commands}/use-composer-commands.tsx (96%)
 rename packages/app/src/{pages/session => session/commands}/use-session-commands.tsx (81%)
 create mode 100644 packages/app/src/session/composer/active-session.tsx
 rename packages/app/src/{pages => }/session/composer/index.ts (100%)
 rename packages/app/src/{pages => }/session/composer/prompt-model-selection.ts (100%)
 rename packages/app/src/{pages => }/session/composer/session-composer-controls.ts (98%)
 rename packages/app/src/{pages => }/session/composer/session-composer-pullout.tsx (100%)
 rename packages/app/src/{pages => }/session/composer/session-composer-region-controller.ts (97%)
 rename packages/app/src/{pages => }/session/composer/session-composer-region.tsx (93%)
 rename packages/app/src/{pages => }/session/composer/session-composer-state.test.ts (97%)
 rename packages/app/src/{pages => }/session/composer/session-composer-state.ts (98%)
 rename packages/app/src/{pages => }/session/composer/session-followup-dock.tsx (100%)
 rename packages/app/src/{components/session => session/composer}/session-new-view.tsx (100%)
 rename packages/app/src/{pages => }/session/composer/session-revert-dock.stories.tsx (95%)
 rename packages/app/src/{pages => }/session/composer/session-revert-dock.tsx (100%)
 rename packages/app/src/{pages/session => session/files}/file-tab-scroll.test.ts (100%)
 rename packages/app/src/{pages/session => session/files}/file-tab-scroll.ts (100%)
 rename packages/app/src/{pages/session => session/files}/file-tabs.tsx (98%)
 rename packages/app/src/{pages/session/v2/session-file-list-v2.tsx => session/files/list.tsx} (98%)
 rename packages/app/src/{components/session/open-in-app-v2.tsx => session/files/open-in-app-button.tsx} (96%)
 rename packages/app/src/{components/session => session/files}/open-in-app.tsx (100%)
 rename packages/app/src/{components/session => session/files}/session-context-format.ts (100%)
 rename packages/app/src/{components/session => session/files}/session-context-tab.tsx (99%)
 rename packages/app/src/{pages/session/v2 => session/files}/session-file-browser-tab.tsx (95%)
 rename packages/app/src/{pages/session => session/files}/session-side-panel.tsx (96%)
 rename packages/app/src/{components/session => session/files}/session-sortable-tab.tsx (100%)
 rename packages/app/src/{components/session/session-sortable-tab-v2.tsx => session/files/tab.tsx} (98%)
 rename packages/app/src/{pages => }/session/handoff.ts (100%)
 rename packages/app/src/{components/session => session/header}/session-header-actions.tsx (92%)
 rename packages/app/src/{components/session => session/header}/session-header.tsx (70%)
 rename packages/app/src/{pages => }/session/helpers.test.ts (100%)
 rename packages/app/src/{pages => }/session/helpers.ts (99%)
 rename packages/app/src/{pages => }/session/message-gesture.test.ts (100%)
 rename packages/app/src/{pages => }/session/message-gesture.ts (100%)
 rename packages/app/src/{pages => }/session/message-id-from-hash.ts (100%)
 rename packages/app/src/{pages/session/session-controller.test.ts => session/model.test.ts} (100%)
 rename packages/app/src/{pages/session/session-controller.ts => session/model.ts} (69%)
 rename packages/app/src/{pages/session/composer => session/requests}/session-background-dock.tsx (97%)
 rename packages/app/src/{pages/session/composer => session/requests}/session-permission-dock.tsx (100%)
 rename packages/app/src/{pages/session/composer => session/requests}/session-question-dock.tsx (100%)
 rename packages/app/src/{pages/session/composer => session/requests}/session-request-tree.ts (100%)
 create mode 100644 packages/app/src/session/review/model.ts
 rename packages/app/src/{pages/session/v2/review-panel-v2-state.ts => session/review/panel-state.ts} (90%)
 rename packages/app/src/{pages/session/v2/review-panel-v2.tsx => session/review/panel.tsx} (93%)
 rename packages/app/src/{pages/session/v2 => session/review}/review-diff-kinds.test.ts (100%)
 rename packages/app/src/{pages/session/v2 => session/review}/review-diff-kinds.ts (100%)
 rename packages/app/src/{pages/session => session/review}/review-tab.tsx (100%)
 create mode 100644 packages/app/src/session/review/view.tsx
 create mode 100644 packages/app/src/session/route-error.tsx
 create mode 100644 packages/app/src/session/route.tsx
 create mode 100644 packages/app/src/session/screen-layout.ts
 create mode 100644 packages/app/src/session/screen.tsx
 rename packages/app/src/{pages => }/session/session-domain.ts (100%)
 rename packages/app/src/{pages => }/session/session-frame.tsx (100%)
 rename packages/app/src/{pages => }/session/session-layout.ts (100%)
 rename packages/app/src/{pages => }/session/session-model-helpers.test.ts (100%)
 rename packages/app/src/{pages => }/session/session-model-helpers.ts (100%)
 rename packages/app/src/{pages => }/session/session-ownership.ts (100%)
 rename packages/app/src/{pages => }/session/session-panel-layout.test.ts (100%)
 rename packages/app/src/{pages => }/session/session-panel-layout.ts (100%)
 rename packages/app/src/{pages => }/session/session-panel-width.test.ts (100%)
 rename packages/app/src/{pages => }/session/session-panel-width.ts (100%)
 rename packages/app/src/{pages => }/session/session-resolution.ts (100%)
 rename packages/app/src/{pages/session/session-preview.stories.tsx => session/session-screen.stories.tsx} (57%)
 rename packages/app/src/{pages/session/session-preview.tsx => session/story-model.tsx} (86%)
 create mode 100644 packages/app/src/session/terminal/panel.tsx
 create mode 100644 packages/app/src/session/terminal/surface.tsx
 rename packages/app/src/{components/session/session-sortable-terminal-tab-v2.tsx => session/terminal/tab.tsx} (90%)
 rename packages/app/src/{pages/session => session/terminal}/terminal-label.ts (61%)
 rename packages/app/src/{pages/session => session/terminal}/terminal-panel.test.ts (100%)
 rename packages/app/src/{pages => }/session/timeline/controller-projection.test.ts (100%)
 rename packages/app/src/{pages => }/session/timeline/controller-projection.ts (100%)
 rename packages/app/src/{pages => }/session/timeline/controller.tsx (97%)
 create mode 100644 packages/app/src/session/timeline/interaction.ts
 rename packages/app/src/{pages => }/session/timeline/measure.test.ts (100%)
 rename packages/app/src/{pages => }/session/timeline/measure.ts (100%)
 rename packages/app/src/{pages => }/session/timeline/message-timeline.tsx (97%)
 rename packages/app/src/{pages => }/session/timeline/model.test.ts (100%)
 rename packages/app/src/{pages => }/session/timeline/model.ts (95%)
 rename packages/app/src/{pages => }/session/timeline/observe-element-offset.test.ts (100%)
 rename packages/app/src/{pages => }/session/timeline/observe-element-offset.ts (100%)
 rename packages/app/src/{pages => }/session/timeline/projection.ts (100%)
 rename packages/app/src/{components => session/timeline}/session-context-usage.tsx (97%)
 rename packages/app/src/{components => session/timeline}/session-workspace-menu.tsx (100%)
 rename packages/app/src/{pages => }/session/timeline/virtual-items.ts (100%)
 rename packages/app/src/{pages => }/session/timeline/virtualizer.tsx (99%)
 rename packages/app/src/{pages => }/session/usage-exceeded-dialogs.tsx (97%)
 rename packages/app/src/{pages => }/session/use-session-hash-scroll.test.ts (100%)
 rename packages/app/src/{pages => }/session/use-session-hash-scroll.ts (100%)
 rename packages/app/test-browser/{review-panel-v2-state.test.ts => review-panel-state.test.ts} (86%)

diff --git a/packages/app/e2e/reproduction/timeline-suspense/main.tsx b/packages/app/e2e/reproduction/timeline-suspense/main.tsx
index cdcd809be3b..fc6507c8453 100644
--- a/packages/app/e2e/reproduction/timeline-suspense/main.tsx
+++ b/packages/app/e2e/reproduction/timeline-suspense/main.tsx
@@ -1,7 +1,7 @@
 import { createResource, createSignal, For, onMount, Suspense } from "solid-js"
 import { render } from "solid-js/web"
 import { createVirtualizer, observeElementOffset, observeElementRect } from "@tanstack/solid-virtual"
-import { observeElementOffsetReconnectAware } from "../../../src/pages/session/timeline/observe-element-offset"
+import { observeElementOffsetReconnectAware } from "../../../src/session/timeline/observe-element-offset"
 
 const rowCount = 2_000
 const rowHeight = 40
diff --git a/packages/app/src/app.tsx b/packages/app/src/app.tsx
index 62b697f63ad..ba00623de59 100644
--- a/packages/app/src/app.tsx
+++ b/packages/app/src/app.tsx
@@ -36,7 +36,7 @@ import { ServerProvider } from "./context/server"
 
 const File = lazy(() => import("@opencode-ai/session-ui/file").then((module) => ({ default: module.File })))
 const loadDraftRoute = () => Promise.all([import("@/pages/draft-route"), File.preload()]).then(([module]) => module)
-const loadSessionRoute = () => Promise.all([import("@/pages/session"), File.preload()]).then(([module]) => module)
+const loadSessionRoute = () => Promise.all([import("@/session/route"), File.preload()]).then(([module]) => module)
 const DraftRoute = lazy(() => loadDraftRoute().then((module) => ({ default: module.DraftRoute })))
 const TargetSessionRouteContent = lazy(() =>
   loadSessionRoute().then((module) => ({ default: module.TargetSessionRouteContent })),
diff --git a/packages/app/src/components/command-palette.ts b/packages/app/src/components/command-palette.ts
index 1f51bf44553..e298a904501 100644
--- a/packages/app/src/components/command-palette.ts
+++ b/packages/app/src/components/command-palette.ts
@@ -12,8 +12,8 @@ import { ServerConnection } from "@/context/servers"
 import { useServerSDK } from "@/context/server-sdk"
 import { useTabs } from "@/context/tabs"
 import { displayName, projectForSession } from "@/pages/layout/helpers"
-import { createSessionTabs } from "@/pages/session/helpers"
-import { useSessionLayout } from "@/pages/session/session-layout"
+import { createSessionTabs } from "@/session/helpers"
+import { useSessionLayout } from "@/session/session-layout"
 import { useServer } from "@/context/server"
 
 export type CommandPaletteEntry = {
diff --git a/packages/app/src/components/prompt-input-v2.tsx b/packages/app/src/components/prompt-input-v2.tsx
index 1a1620c8797..b6e4516c634 100644
--- a/packages/app/src/components/prompt-input-v2.tsx
+++ b/packages/app/src/components/prompt-input-v2.tsx
@@ -24,7 +24,7 @@ import { type ImageAttachmentPart, usePrompt } from "@/context/prompt"
 import { usePlatform } from "@/context/platform"
 import { useWorkspaceLocation } from "@/context/location"
 import { useData } from "@/context/server"
-import { createSessionTabs } from "@/pages/session/helpers"
+import { createSessionTabs } from "@/session/helpers"
 import { showToast } from "@/utils/toast"
 import { PromptInputV2, type PromptInputV2Suggestion } from "@opencode-ai/session-ui/v2/prompt-input"
 import {
diff --git a/packages/app/src/components/session/index.ts b/packages/app/src/components/session/index.ts
deleted file mode 100644
index ec3e584b598..00000000000
--- a/packages/app/src/components/session/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { SessionHeader } from "./session-header"
-export { SessionContextTab } from "./session-context-tab"
-export { FileVisual } from "./session-sortable-tab"
-export { SortableTabV2 } from "./session-sortable-tab-v2"
-export { NewSessionView } from "./session-new-view"
diff --git a/packages/app/src/pages/layout/project-avatar-state.ts b/packages/app/src/pages/layout/project-avatar-state.ts
index c77e0dd6f55..9cd229c405e 100644
--- a/packages/app/src/pages/layout/project-avatar-state.ts
+++ b/packages/app/src/pages/layout/project-avatar-state.ts
@@ -1,6 +1,6 @@
 import { createMemo, type Accessor } from "solid-js"
 import { useGlobal, useServerCtx } from "@/context/global"
-import { sessionPermissionRequest, sessionQuestionForm } from "@/pages/session/composer/session-request-tree"
+import { sessionPermissionRequest, sessionQuestionForm } from "@/session/requests/session-request-tree"
 import { ServerConnection } from "@/context/servers"
 
 export function useSessionTabAvatarState(
diff --git a/packages/app/src/pages/new-session/new-session-draft-controller.ts b/packages/app/src/pages/new-session/new-session-draft-controller.ts
index 3c922226604..d259815faef 100644
--- a/packages/app/src/pages/new-session/new-session-draft-controller.ts
+++ b/packages/app/src/pages/new-session/new-session-draft-controller.ts
@@ -4,10 +4,10 @@ import { usePromptInputV2Controller } from "@/components/prompt-input-v2"
 import { useComments } from "@/context/comments"
 import { useLocal } from "@/context/local"
 import { usePrompt } from "@/context/prompt"
-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"
+import { createPromptInputController, createPromptProjectControls } from "@/session/composer"
+import { createPromptModelSelection } from "@/session/composer/prompt-model-selection"
+import { useSessionKey } from "@/session/session-layout"
+import { useComposerCommands } from "@/session/commands/use-composer-commands"
 
 export function createNewSessionDraftController(props: {
   worktree: () => string
diff --git a/packages/app/src/pages/session/new-session-layout.ts b/packages/app/src/pages/new-session/new-session-layout.ts
similarity index 100%
rename from packages/app/src/pages/session/new-session-layout.ts
rename to packages/app/src/pages/new-session/new-session-layout.ts
diff --git a/packages/app/src/pages/new-session/new-session-view.tsx b/packages/app/src/pages/new-session/new-session-view.tsx
index 6cd73f4ae1b..50f164b50ab 100644
--- a/packages/app/src/pages/new-session/new-session-view.tsx
+++ b/packages/app/src/pages/new-session/new-session-view.tsx
@@ -17,7 +17,7 @@ import { StatusPopoverV2 } from "@/components/status-popover"
 import { useLanguage } from "@/context/language"
 import { useWorkspaceLocation } from "@/context/location"
 import { useProviders } from "@/hooks/use-providers"
-import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/session/new-session-layout"
+import { NEW_SESSION_CONTENT_WIDTH } from "@/pages/new-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"
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx
deleted file mode 100644
index a31cfb25457..00000000000
--- a/packages/app/src/pages/session.tsx
+++ /dev/null
@@ -1,2005 +0,0 @@
-import type { FileDiffInfo, SessionMessageUser } from "@opencode-ai/client/promise"
-import type { SessionUserActions } from "@opencode-ai/session-ui/message"
-import { getFilename } from "@opencode-ai/util/path"
-import { useDialog } from "@opencode-ai/ui/context/dialog"
-import { createQuery, skipToken, useMutation, useQueryClient } from "@tanstack/solid-query"
-import {
-  batch,
-  ErrorBoundary,
-  onCleanup,
-  Suspense,
-  Show,
-  Match,
-  Switch,
-  createMemo,
-  createEffect,
-  createComputed,
-  createSignal,
-  on,
-  onMount,
-  type ParentProps,
-  untrack,
-} from "solid-js"
-import { makeEventListener } from "@solid-primitives/event-listener"
-import { createMediaQuery } from "@solid-primitives/media"
-import { createResizeObserver } from "@solid-primitives/resize-observer"
-import { debounce } from "@solid-primitives/scheduled"
-import { useLocal } from "@/context/local"
-import { FileProvider, selectionFromLines, useFile, type FileSelection, type SelectedLineRange } from "@/context/file"
-import { createStore } from "solid-js/store"
-import type { SessionReviewLineComment } from "@opencode-ai/session-ui/session-review"
-import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
-import { Select } from "@opencode-ai/ui/select"
-import { isScrollKeyTarget, scrollKey, scrollKeyOwner } from "@opencode-ai/ui/scroll-view"
-import { Tabs } from "@opencode-ai/ui/tabs"
-import { Button } from "@opencode-ai/ui/button"
-import { createAutoScroll } from "@opencode-ai/ui/hooks"
-import { previewSelectedLines } from "@opencode-ai/session-ui/pierre/selection-bridge"
-import { showToast } from "@/utils/toast"
-import { checksum } from "@opencode-ai/util/encode"
-import { containsDirectory, isWorkspaceDirectory } from "@/utils/workspace"
-import { useLocation, useNavigate, useParams, useSearchParams } from "@solidjs/router"
-import { NewSessionView, SessionHeader } from "@/components/session"
-import { ErrorPage } from "@/pages/error"
-import { CommentsProvider, useComments } from "@/context/comments"
-import { useCommand } from "@/context/command"
-import { SessionUIProvider } from "@/pages/directory-layout"
-import { useData, useServer } from "@/context/server"
-import { useLanguage } from "@/context/language"
-import { useLayout } from "@/context/layout"
-import { ModelsProvider } from "@/context/models"
-import { useNotification } from "@/context/notification"
-import { PromptProvider, usePrompt } from "@/context/prompt"
-import { usePlatform } from "@/context/platform"
-import { LocationProvider, useWorkspaceLocation } from "@/context/location"
-import { useServerSDK } from "@/context/server-sdk"
-import { ServerConnection, serverName, useServers } from "@/context/servers"
-import { useSettings } from "@/context/settings"
-import { useTabs } from "@/context/tabs"
-import { TerminalProvider } from "@/context/terminal"
-import { PromptInputV2Composer, usePromptInputV2Controller } from "@/components/prompt-input-v2"
-import { useSettingsCommand } from "@/components/settings-dialog"
-import { setCursorPosition } from "@/components/prompt-input/editor-dom"
-import { promptLength } from "@/components/prompt-input/history"
-import type { FollowupDraft } from "@/components/prompt-input/submit"
-import {
-  createPromptInputController,
-  createSessionComposerController,
-  createSessionComposerRegionController,
-  SessionComposerRegion,
-} from "@/pages/session/composer"
-import { createOpenReviewFile, createSizing, shouldShowFileTree } from "@/pages/session/helpers"
-import { MessageTimeline } from "@/pages/session/timeline/message-timeline"
-import { createTimelineModel } from "@/pages/session/timeline/model"
-import { type DiffStyle, SessionReviewTab, type SessionReviewTabProps } from "@/pages/session/review-tab"
-import { createSessionController } from "@/pages/session/session-controller"
-import { restorePromptModel, syncPromptModel, syncSessionModel } from "@/pages/session/session-model-helpers"
-import {
-  clampSessionPanelWidth,
-  SESSION_PANEL_WIDTH_MIN,
-  sessionPanelWidthMax,
-} from "@/pages/session/session-panel-width"
-import { SessionSidePanel } from "@/pages/session/session-side-panel"
-import { sessionPanelLayout } from "@/pages/session/session-panel-layout"
-import { SessionPanelFrame, SessionRouteFrame } from "@/pages/session/session-frame"
-import { SessionReviewEmptyChangesV2 } from "@opencode-ai/session-ui/v2/session-review-empty-changes-v2"
-import { SessionReviewV2SidebarToggle } from "@opencode-ai/session-ui/v2/session-review-v2"
-import { ReviewPanelV2 } from "@/pages/session/v2/review-panel-v2"
-import { createReviewPanelV2State } from "@/pages/session/v2/review-panel-v2-state"
-import { reviewDiffDirectory, reviewDiffNeedsLoad, reviewRootDirectory } from "@/pages/session/v2/review-diff-kinds"
-import { TerminalPanelV2 } from "@/pages/session/terminal-panel-v2"
-import { useComposerCommands } from "@/pages/session/use-composer-commands"
-import { useSessionCommands } from "@/pages/session/use-session-commands"
-import { useSessionHashScroll } from "@/pages/session/use-session-hash-scroll"
-import { SessionMessage } from "@opencode-ai/schema/session-message"
-import { Persist, persisted } from "@/utils/persist"
-import { formatServerError, isLocalSessionNotFoundError, isSessionNotFoundError } from "@/utils/server-errors"
-import { requireServerKey, sessionHref } from "@/utils/session-route"
-import { useUsageExceededDialogs } from "./session/usage-exceeded-dialogs"
-import { createSessionResolution } from "./session/session-resolution"
-
-type FollowupItem = FollowupDraft & { id: string }
-type FollowupEdit = Pick<FollowupItem, "id" | "prompt" | "context">
-const emptyFollowups: FollowupItem[] = []
-
-type ChangeMode = "git" | "branch" | "turn"
-type VcsMode = "git" | "branch"
-
-const sessionViewState = () => ({
-  messageId: undefined as string | undefined,
-  mobileTab: "session" as "session" | "changes",
-})
-
-function isCurrentSessionNotFoundError(error: unknown, sessionID: string | undefined) {
-  if (!sessionID) return false
-  return isSessionNotFoundError(error, sessionID) || isLocalSessionNotFoundError(error, sessionID)
-}
-
-// Rendered under app.tsx's TargetSessionRoute, which owns the per-server keyed
-// remount around the server-scoped providers. Nothing here may key on the
-// session ID: session tabs on the same server share this route instance, and
-// workspace-scoped state (terminal, directory providers) lives below.
-export function TargetSessionRouteContent() {
-  const params = useParams<{ serverKey: string; id: string }>()
-  const data = useData()
-  const directory = createMemo(() => data.session.get(params.id)?.location.directory)
-  return (
-    // Settings must keep the target-server SDK, sync, and models context and remain registered
-    // when session content falls back to the route error boundary.
-    <>
-      <MarkSessionNotificationsViewed sessionID={() => params.id} />
-      <ModelsProvider directory={directory}>
-        <TargetSessionSettingsCommand />
-        <SessionRouteErrorBoundary sessionID={params.id} serverKey={requireServerKey(params.serverKey)} padded>
-          <ResolvedTargetSessionRoute />
-        </SessionRouteErrorBoundary>
-      </ModelsProvider>
-    </>
-  )
-}
-
-function TargetSessionSettingsCommand() {
-  useSettingsCommand()
-  return null
-}
-
-export function SessionRouteErrorBoundary(
-  props: ParentProps<{ sessionID?: string; serverKey?: ServerConnection.Key; padded?: boolean }>,
-) {
-  return (
-    <ErrorBoundary
-      fallback={(error) => (
-        <SessionRouteFrame padded={props.padded}>
-          <SessionPanelFrame raised={!!props.sessionID}>
-            <SessionErrorFallback error={error} sessionID={props.sessionID} serverKey={props.serverKey} />
-          </SessionPanelFrame>
-        </SessionRouteFrame>
-      )}
-    >
-      {props.children}
-    </ErrorBoundary>
-  )
-}
-
-function SessionErrorFallback(props: { error: unknown; sessionID?: string; serverKey?: ServerConnection.Key }) {
-  const language = useLanguage()
-  const server = useServers()
-  const tabs = useTabs()
-
-  const displayServer = createMemo(() => {
-    const key = props.serverKey
-    const conn = server.list.find((item) => ServerConnection.key(item) === key)
-    return conn ? serverName(conn) : key
-  })
-  const closeTab = () => {
-    if (!props.sessionID || !props.serverKey) return
-    tabs.removeSessionTab({ server: props.serverKey, sessionId: props.sessionID })
-  }
-  if (isCurrentSessionNotFoundError(props.error, props.sessionID)) {
-    return (
-      <div class="flex-1 min-h-0 overflow-hidden">
-        <div class="h-full px-6 pb-42 -mt-4 flex flex-col items-center justify-center text-center gap-4">
-          <div class="flex flex-col items-center gap-2">
-            <div class="text-16-medium text-text max-w-md">{language.t("session.error.notFound")}</div>
-            <div class="text-13-regular text-text-weak max-w-md">
-              {language.t("session.error.notFound.description")}
-            </div>
-          </div>
-          <Show when={props.sessionID}>
-            {(sessionID) => (
-              <div class="max-w-full flex flex-col items-center gap-1">
-                <div class="max-w-full text-11-regular text-text-faint break-all">{displayServer()}</div>
-                <code class="max-w-full rounded-[4px] px-1 py-0.5 font-mono text-xs font-medium leading-4 text-text-base break-all bg-[color-mix(in_oklch,var(--v2-text-text-base)_8%,transparent)]">
-                  {sessionID()}
-                </code>
-              </div>
-            )}
-          </Show>
-          <Button variant="neutral" size="normal" icon="xmark-small" onClick={closeTab}>
-            {language.t("session.error.notFound.closeTab")}
-          </Button>
-        </div>
-      </div>
-    )
-  }
-  return <ErrorPage error={props.error} />
-}
-
-function ResolvedTargetSessionRoute() {
-  const params = useParams<{ id: string }>()
-  const server = useServer()
-  const data = useData()
-  const current = createSessionResolution(
-    () => params.id,
-    () => data.session,
-    { children: true },
-  )
-  const directory = createMemo(() => current()?.location.directory)
-
-  return (
-    // Non-keyed: closes only while the target's directory is unknown (uncached
-    // session mid-resolution), which tears down the workspace subtree including
-    // the terminal. Same-workspace tab switches keep it open because warm
-    // targets resolve synchronously from the sync cache.
-    <Show when={directory()}>
-      {(dir) => (
-        <LocationProvider directory={dir()}>
-          <SessionUIProvider directory={dir()} server={server.key}>
-            <TargetSessionPage />
-          </SessionUIProvider>
-        </LocationProvider>
-      )}
-    </Show>
-  )
-}
-
-// Owns the workspace-identity remount. Must not include the session ID in the
-// key: SessionPage handles session changes reactively, and remounting here
-// destroys workspace-scoped state (terminal PTYs, file/prompt providers).
-function TargetSessionPage() {
-  const location = useWorkspaceLocation()
-  const serverSDK = useServerSDK()
-  return (
-    <Show when={`${serverSDK.scope}\0${location().directory}`} keyed>
-      <TerminalProvider>
-        <FileProvider>
-          <PromptProvider>
-            <CommentsProvider>
-              <Page />
-            </CommentsProvider>
-          </PromptProvider>
-        </FileProvider>
-      </TerminalProvider>
-    </Show>
-  )
-}
-
-function MarkSessionNotificationsViewed(props: { sessionID?: () => string | undefined }) {
-  const notification = useNotification()
-  createEffect(() => {
-    const sessionID = props.sessionID?.()
-    if (!notification.ready() || !sessionID) return
-    if (notification.session.unseenCount(sessionID) === 0) return
-    notification.session.markViewed(sessionID)
-  })
-  return null
-}
-
-export default function Page() {
-  const data = useData()
-  const layout = useLayout()
-  const local = useLocal()
-  const file = useFile()
-  const queryClient = useQueryClient()
-  const dialog = useDialog()
-  const language = useLanguage()
-  const sdk = useWorkspaceLocation()
-  const serverSDK = useServerSDK()
-  const settings = useSettings()
-  const platform = usePlatform()
-  const prompt = usePrompt()
-  const comments = useComments()
-  const command = useCommand()
-  const [searchParams, setSearchParams] = useSearchParams<{ prompt?: string }>()
-  const location = useLocation()
-  const navigate = useNavigate()
-  const params = useParams()
-  const isDesktop = createMediaQuery("(min-width: 768px)")
-  const project = createMemo(() => {
-    const info = params.id ? data.session.get(params.id) : undefined
-    const value = info?.projectID
-      ? data.project.get(info.projectID)
-      : data.project.list().find((item) => containsDirectory(item.canonical, sdk().directory))
-    if (!value) return
-    return { ...value, worktree: value.canonical, worktrees: [] }
-  })
-  const canReview = createMemo(() => !!project())
-  const controller = createSessionController({
-    review: isDesktop,
-    hasReview: canReview,
-    fileBrowser: (sessionID) => isDesktop() && !!sessionID,
-  })
-  const reviewMode = () => controller.layout.view().review.mode() ?? "git"
-  const reviewFile = () => controller.layout.view().review.file()
-
-  createEffect(() => {
-    if (!prompt.ready()) return
-    untrack(() => {
-      if (controller.identity.params.id) return
-      const text = searchParams.prompt
-      if (!text) return
-      prompt.set([{ type: "text", content: text, start: 0, end: text.length }], text.length)
-      setSearchParams({ ...searchParams, prompt: undefined })
-    })
-  })
-
-  const [ui, setUi] = createStore({
-    pendingMessage: undefined as string | undefined,
-    reviewSnap: false,
-    scrollGesture: 0,
-    scroll: {
-      overflow: false,
-      bottom: true,
-      jump: false,
-    },
-  })
-
-  const composer = createSessionComposerController()
-  const inputController = createPromptInputController({
-    sessionKey: controller.identity.sessionKey,
-    sessionID: () => controller.identity.params.id,
-  })
-
-  const sessionPanelKey = createMemo(() =>
-    controller.identity.params.id ? `${serverSDK.scope}\0${controller.identity.params.id}` : undefined,
-  )
-
-  const size = createSizing()
-  const desktopReviewOpen = createMemo(() => isDesktop() && controller.layout.view().reviewPanel.opened())
-  const desktopV2ReviewOpen = createMemo(() => desktopReviewOpen() && !!controller.identity.params.id)
-  const terminalOpen = createMemo(() => controller.layout.view().terminal.opened())
-  const desktopTerminalOpen = createMemo(() => isDesktop() && terminalOpen())
-  const desktopInlineTerminalOnlyOpen = createMemo(() => desktopTerminalOpen() && !desktopV2ReviewOpen())
-  const desktopFileTreeOpen = createMemo(
-    () =>
-      isDesktop() &&
-      shouldShowFileTree({
-        visible: settings.visibility.fileTree(),
-        opened: layout.fileTree.opened(),
-      }),
-  )
-  const desktopSessionResizeOpen = createMemo(() => desktopV2ReviewOpen() || desktopTerminalOpen())
-  const desktopSidePanelOpen = createMemo(() => desktopSessionResizeOpen() || desktopFileTreeOpen())
-  let panelRow: HTMLDivElement | undefined
-  const [panelRowWidth, setPanelRowWidth] = createSignal<number>()
-  createResizeObserver(
-    () => panelRow,
-    ({ width }) => setPanelRowWidth(width),
-  )
-  const splitReview = createMemo(() => desktopV2ReviewOpen() && layout.review.diffStyle() === "split")
-  // The observer reports the content-box width, which already excludes the row
-  // padding; only the flex gap between the panels remains to subtract.
-  const sessionPanelAvailable = createMemo(() => {
-    const width = panelRowWidth()
-    if (width === undefined) return undefined
-    return width - 8
-  })
-  const sessionPanelMax = createMemo(() => {
-    const available = sessionPanelAvailable()
-    if (available === undefined) return 1000
-    return sessionPanelWidthMax({ available, split: splitReview() })
-  })
-  // Clamp at render time so window or sidebar resizes squeeze the chat panel
-  // instead of the review pane, without overwriting the persisted width.
-  const sessionPanelResizedWidth = createMemo(() =>
-    clampSessionPanelWidth({
-      width: layout.session.width(),
-      available: sessionPanelAvailable(),
-      split: splitReview(),
-    }),
-  )
-  const sessionPanelWidth = createMemo(() => {
-    if (!desktopSidePanelOpen()) return "100%"
-    if (desktopSessionResizeOpen()) return `${sessionPanelResizedWidth()}px`
-    return `calc(100% - ${layout.fileTree.width()}px)`
-  })
-  const centered = createMemo(() => isDesktop())
-  const desktopV2PanelLayout = createMemo(() =>
-    sessionPanelLayout({
-      review: desktopV2ReviewOpen(),
-      terminal: desktopTerminalOpen(),
-      files: desktopFileTreeOpen(),
-    }),
-  )
-
-  const openReviewPanel = () => {
-    if (!controller.layout.view().reviewPanel.opened()) controller.layout.view().reviewPanel.open()
-  }
-
-  const sessionDirectory = createMemo(() => controller.data.info()?.location.directory ?? sdk().directory)
-  const workspaceSession = createMemo(() => isWorkspaceDirectory(project(), sessionDirectory()))
-  const timeline = createTimelineModel({ session: controller })
-  const historyLoading = timeline.history.loading
-  const historyMore = timeline.history.more
-  const lastUserMessage = timeline.lastUserMessage
-  const messagesReady = timeline.ready
-  const sessionSync = timeline.resource
-  const userMessages = timeline.userMessages
-  const visibleUserMessages = timeline.visibleUserMessages
-
-  createEffect(() => {
-    const tab = controller.tabs.activeFileTab()
-    if (!tab) return
-
-    const path = file.pathFromTab(tab)
-    if (path) void file.load(path)
-  })
-
-  createEffect(
-    on(
-      () => [lastUserMessage(), controller.data.info()] as const,
-      () => {
-        const message = lastUserMessage()
-        const info = controller.data.info()
-        const metadata = message?.metadata
-        const agent = typeof metadata?.agent === "string" ? metadata.agent : info?.agent
-        const model = metadata?.model
-        const selected =
-          model &&
-          typeof model === "object" &&
-          !Array.isArray(model) &&
-          typeof model.providerID === "string" &&
-          typeof model.modelID === "string"
-            ? {
-                providerID: model.providerID,
-                modelID: model.modelID,
-                variant: typeof model.variant === "string" ? model.variant : undefined,
-              }
-            : info?.model
-              ? { providerID: info.model.providerID, modelID: info.model.id, variant: info.model.variant }
-              : undefined
-        if (!info || !agent || !selected) return
-        syncSessionModel(local, { sessionID: info.id, agent, model: selected })
-      },
-    ),
-  )
-
-  let restoredModelSession: string | undefined
-  createEffect(() => {
-    const id = controller.identity.params.id
-    if (!id || !prompt.ready() || !local.session.ready()) return
-    if (restoredModelSession !== id) {
-      restoredModelSession = id
-      if (restorePromptModel(local, prompt)) return
-    }
-    syncPromptModel(local, prompt)
-  })
-
-  createEffect(
-    on(
-      () => ({ dir: sdk().directory, id: controller.identity.params.id }),
-      (next, prev) => {
-        if (!prev) return
-        if (next.dir === prev.dir && next.id === prev.id) return
-        if (prev.id && !next.id) local.session.reset()
-      },
-      { defer: true },
-    ),
-  )
-
-  const [store, setStore] = createStore({
-    ...sessionViewState(),
-    newSessionWorktree: "main",
-    sessionDetailsOpen: false,
-    deferRender: false,
-  })
-
-  const [followup, setFollowup] = persisted(
-    Persist.serverWorkspace(serverSDK.scope, sdk().directory, "followup"),
-    createStore<{
-      items: Record<string, FollowupItem[] | undefined>
-      failed: Record<string, string | undefined>
-      paused: Record<string, boolean | undefined>
-      edit: Record<string, FollowupEdit | undefined>
-    }>({
-      items: {},
-      failed: {},
-      paused: {},
-      edit: {},
-    }),
-  )
-
-  createComputed((prev) => {
-    const key = controller.identity.sessionKey()
-    if (key !== prev) {
-      setStore("deferRender", true)
-      const owner = controller.ownership.capture()
-      requestAnimationFrame(() => {
-        setTimeout(() => owner.run(() => setStore("deferRender", false)), 0)
-      })
-    }
-    return key
-  })
-
-  let reviewFrame: number | undefined
-
-  createComputed((prev) => {
-    const open = desktopReviewOpen()
-    if (prev === undefined || prev === open) return open
-
-    if (reviewFrame !== undefined) cancelAnimationFrame(reviewFrame)
-    setUi("reviewSnap", true)
-    reviewFrame = requestAnimationFrame(() => {
-      reviewFrame = undefined
-      setUi("reviewSnap", false)
-    })
-    return open
-  }, desktopReviewOpen())
-
-  const nogit = createMemo(() => {
-    const current = project()
-    return !!current && current.vcs !== "git"
-  })
-  const vcs = createMemo(() => data.location.vcs.info({ directory: sdk().directory }))
-  const changesOptions = createMemo<ChangeMode[]>(() => {
-    const list: ChangeMode[] = []
-    const current = project()
-    if (current?.vcs === "git") list.push("git")
-    if (
-      current?.vcs === "git" &&
-      vcs()?.branch.current &&
-      vcs()?.branch.default &&
-      vcs()?.branch.current !== vcs()?.branch.default
-    ) {
-      list.push("branch")
-    }
-    return list
-  })
-  const mobileChanges = createMemo(() => !isDesktop() && store.mobileTab === "changes")
-  const wantsReview = createMemo(() =>
-    isDesktop()
-      ? desktopFileTreeOpen() ||
-        (desktopReviewOpen() && (controller.tabs.activeTab() === "review" || !!controller.tabs.activeFileTab()))
-      : store.mobileTab === "changes",
-  )
-  const vcsMode = createMemo<VcsMode | undefined>(() => {
-    const mode = reviewMode()
-    if (mode === "git" || mode === "branch") return mode
-  })
-  const vcsKey = createMemo(
-    () =>
-      [
-        serverSDK.scope,
-        "session-vcs",
-        sdk().directory,
-        vcs()?.branch.current ?? "",
-        vcs()?.branch.default ?? "",
-      ] as const,
-  )
-  const vcsQuery = createQuery(() => {
-    const mode = vcsMode()
-    const enabled = serverSDK.connection.status() === "connected" && wantsReview() && project()?.vcs === "git"
-
-    return {
-      queryKey: [...vcsKey(), mode] as const,
-      enabled,
-      refetchOnMount: "always" as const,
-      refetchOnWindowFocus: true,
-      queryFn: mode
-        ? () =>
-            serverSDK.api.vcs
-              .diff({
-                location: { directory: sdk().directory },
-                mode: mode === "git" ? "working" : mode,
-              })
-              .then((result) => result.data)
-        : skipToken,
-    }
-  })
-  const sessionDetailsQuery = createQuery(() => ({
-    queryKey: [serverSDK.scope, "session-details", sessionDirectory()] as const,
-    enabled: store.sessionDetailsOpen && serverSDK.connection.status() === "connected" && project()?.vcs === "git",
-    queryFn: () =>
-      serverSDK.api.vcs
-        .diff({ location: { directory: sessionDirectory() }, mode: "working" })
-        .then((result) => result.data)
-        .catch((error) => {
-          console.debug("[session-review] failed to load session details diff", { error })
-          return []
-        }),
-  }))
-  const sessionDetailsDiffs = () => (sessionDetailsQuery.isFetched ? (sessionDetailsQuery.data ?? []) : undefined)
-  const refreshVcs = debounce(() => {
-    void queryClient.invalidateQueries({ queryKey: vcsKey() })
-    void queryClient.invalidateQueries({ queryKey: [serverSDK.scope, "session-details", sessionDirectory()] })
-  }, 100)
-  onCleanup(
-    sdk().event.listen((event) => {
-      if (event.type === "filesystem.changed") refreshVcs()
-    }),
-  )
-  createEffect(
-    on(
-      () => desktopReviewOpen() || mobileChanges(),
-      (open, previous) => {
-        if (!open || previous || !desktopFileTreeOpen() || vcsQuery.isFetching) return
-        refreshVcs()
-      },
-      { defer: true },
-    ),
-  )
-  const reviewDiffs = () => {
-    if (reviewMode() === "git" || reviewMode() === "branch")
-      // avoids suspense
-      return vcsQuery.isFetched ? (vcsQuery.data ?? []) : []
-    // TODO: Restore turn diffs when the V2 transcript exposes snapshot diffs.
-    return []
-  }
-  const activeReviewFile = () => {
-    const diffs = reviewDiffs()
-    const selected = reviewFile()
-    if (selected && diffs.some((diff) => diff.file === selected)) return selected
-    return diffs[0]?.file
-  }
-  const reviewCount = () => reviewDiffs().length
-  const hasReview = () => reviewCount() > 0
-  const reviewReady = () => {
-    if (reviewMode() === "git" || reviewMode() === "branch") return !vcsQuery.isPending
-    return true
-  }
-  const loadReviewDiff = async (file: string, version?: number): Promise<FileDiffInfo | undefined> => {
-    const mode = vcsMode()
-    if (!mode) return
-    const root = reviewRootDirectory(project()?.worktree ?? sdk().directory)
-    const directory = reviewDiffDirectory(root, file)
-    const source = reviewDiffs().find((diff) => diff.file === file)
-    const valid = (diff: FileDiffInfo | undefined) => {
-      if (!diff || !source) return
-      if (diff.additions !== source.additions || diff.deletions !== source.deletions) return
-      if (reviewDiffNeedsLoad(diff)) return
-      return diff
-    }
-    const request = (scope: string, context?: number) =>
-      queryClient
-        .fetchQuery({
-          queryKey: [serverSDK.scope, ...vcsKey(), mode, "directory", scope, context, version] as const,
-          staleTime: Number.POSITIVE_INFINITY,
-          retry: 2,
-          queryFn: () =>
-            serverSDK.api.vcs
-              .diff({
-                location: { directory: scope },
-                mode: mode === "git" ? "working" : mode,
-                context,
-              })
-              .then((result) => result.data),
-        })
-        .then((diffs) => diffs.find((diff) => diff.file === file))
-
-    if (directory !== root) {
-      try {
-        const scoped = valid(await request(directory))
-        if (scoped) return scoped
-      } catch (error) {
-        console.debug("[session-review] failed to load scoped vcs diff", { mode, file, directory, error })
-      }
-    }
-    try {
-      const bounded = valid(await request(root, 3))
-      if (bounded) return bounded
-    } catch (error) {
-      console.debug("[session-review] failed to load bounded vcs diff", { mode, file, root, error })
-    }
-  }
-
-  const newSessionWorktree = createMemo(() => {
-    if (store.newSessionWorktree === "create") return "create"
-    const current = project()
-    if (current && sdk().directory !== current.worktree) return sdk().directory
-    return "main"
-  })
-
-  const setActiveMessage = (message: SessionMessageUser | undefined) => {
-    messageMark = scrollMark
-    setStore("messageId", message?.id)
-  }
-
-  const anchor = (id: string) => `message-${id}`
-
-  const cursor = () => {
-    const root = scroller
-    if (!root) return store.messageId
-
-    const box = root.getBoundingClientRect()
-    const line = box.top + 100
-    const list = [...root.querySelectorAll<HTMLElement>("[data-message-id]")]
-      .map((el) => {
-        const id = el.dataset.messageId
-        if (!id) return
-
-        const rect = el.getBoundingClientRect()
-        return { id, top: rect.top, bottom: rect.bottom }
-      })
-      .filter((item): item is { id: string; top: number; bottom: number } => !!item)
-
-    const shown = list.filter((item) => item.bottom > box.top && item.top < box.bottom)
-    const hit = shown.find((item) => item.top <= line && item.bottom >= line)
-    if (hit) return hit.id
-
-    const near = [...shown].sort((a, b) => {
-      const da = Math.abs(a.top - line)
-      const db = Math.abs(b.top - line)
-      if (da !== db) return da - db
-      return a.top - b.top
-    })[0]
-    if (near) return near.id
-
-    return list.filter((item) => item.top <= line).at(-1)?.id ?? list[0]?.id ?? store.messageId
-  }
-
-  function navigateMessageByOffset(offset: number) {
-    const msgs = visibleUserMessages()
-    if (msgs.length === 0) return
-
-    const current = store.messageId && messageMark === scrollMark ? store.messageId : cursor()
-    const base = current ? msgs.findIndex((m) => m.id === current) : msgs.length
-    const currentIndex = base === -1 ? msgs.length : base
-    const targetIndex = currentIndex + offset
-    if (targetIndex < 0 || targetIndex > msgs.length) return
-
-    if (targetIndex === msgs.length) {
-      resumeScroll()
-      return
-    }
-
-    autoScroll.pause()
-    scrollToMessage(msgs[targetIndex], "auto")
-  }
-
-  const gitMutation = useMutation(() => ({
-    // TODO: Restore Git initialization when the V2 client exposes this operation.
-    mutationFn: async () => Promise.reject(new Error("Git initialization is unavailable")),
-    onError: (err) => {
-      showToast({
-        variant: "error",
-        title: language.t("common.requestFailed"),
-        description: formatServerError(err, language.t),
-      })
-    },
-  }))
-
-  function initGit() {
-    if (gitMutation.isPending) return
-    gitMutation.mutate()
-  }
-
-  let inputRef!: HTMLDivElement
-  let promptDock: HTMLDivElement | undefined
-  let dockHeight = 0
-  let scroller: HTMLDivElement | undefined
-  let content: HTMLDivElement | undefined
-  let revealMessage = (_id: string) => {}
-  let scrollToEnd = () => {}
-  let scrollMark = 0
-  let messageMark = 0
-
-  const scrollGestureWindowMs = 250
-
-  const markScrollGesture = (target?: EventTarget | null) => {
-    const root = scroller
-    if (!root) return
-
-    const el = target instanceof Element ? target : undefined
-    const nested = el?.closest("[data-scrollable]")
-    if (nested && nested !== root) return
-
-    setUi("scrollGesture", Date.now())
-  }
-
-  const hasScrollGesture = () => Date.now() - ui.scrollGesture < scrollGestureWindowMs
-
-  // TODO: Restore todo refresh when todos are available from the current session API.
-
-  createEffect(
-    on(
-      () => visibleUserMessages().at(-1)?.id,
-      (lastId, prevLastId) => {
-        if (lastId && prevLastId && lastId > prevLastId) {
-          setStore("messageId", undefined)
-        }
-      },
-      { defer: true },
-    ),
-  )
-
-  createEffect(
-    on(
-      controller.identity.sessionKey,
-      () => {
-        setStore(sessionViewState())
-        setUi("pendingMessage", undefined)
-      },
-      { defer: true },
-    ),
-  )
-
-  createEffect(
-    on(
-      () => sdk().directory,
-      (dir) => {
-        if (!dir) return
-        setStore("newSessionWorktree", "main")
-      },
-      { defer: true },
-    ),
-  )
-
-  const selectionPreview = (path: string, selection: FileSelection) => {
-    const content = file.get(path)?.content?.content
-    if (!content) return undefined
-    return previewSelectedLines(content, { start: selection.startLine, end: selection.endLine })
-  }
-
-  const addCommentToContext = (input: {
-    file: string
-    selection: SelectedLineRange
-    comment: string
-    preview?: string
-    origin?: "review" | "file"
-  }) => {
-    const selection = selectionFromLines(input.selection)
-    const preview = input.preview ?? selectionPreview(input.file, selection)
-    const saved = comments.add({
-      file: input.file,
-      selection: input.selection,
-      comment: input.comment,
-    })
-    prompt.context.add({
-      type: "file",
-      path: input.file,
-      selection,
-      comment: input.comment,
-      commentID: saved.id,
-      commentOrigin: input.origin,
-      preview,
-    })
-  }
-
-  const updateCommentInContext = (input: {
-    id: string
-    file: string
-    selection: SelectedLineRange
-    comment: string
-    preview?: string
-  }) => {
-    comments.update(input.file, input.id, input.comment)
-    prompt.context.updateComment(input.file, input.id, {
-      comment: input.comment,
-      ...(input.preview ? { preview: input.preview } : {}),
-    })
-  }
-
-  const removeCommentFromContext = (input: { id: string; file: string }) => {
-    comments.remove(input.file, input.id)
-    prompt.context.removeComment(input.file, input.id)
-  }
-
-  const reviewCommentActions = createMemo(() => ({
-    moreLabel: language.t("common.moreOptions"),
-    editLabel: language.t("common.edit"),
-    deleteLabel: language.t("common.delete"),
-    saveLabel: language.t("common.save"),
-  }))
-
-  const isEditableTarget = (target: EventTarget | null | undefined) => {
-    if (!(target instanceof HTMLElement)) return false
-    return /^(INPUT|TEXTAREA|SELECT|BUTTON)$/.test(target.tagName) || target.isContentEditable
-  }
-
-  const deepActiveElement = () => {
-    let current: Element | null = document.activeElement
-    while (current instanceof HTMLElement && current.shadowRoot?.activeElement) {
-      current = current.shadowRoot.activeElement
-    }
-    return current instanceof HTMLElement ? current : undefined
-  }
-
-  const handleKeyDown = (event: KeyboardEvent) => {
-    const path = event.composedPath()
-    const target = path.find((item): item is HTMLElement => item instanceof HTMLElement)
-    const activeElement = deepActiveElement()
-
-    const protectedTarget = path.some(
-      (item) => item instanceof HTMLElement && item.closest("[data-prevent-autofocus]") !== null,
-    )
-    if (protectedTarget || isEditableTarget(target)) return
-
-    if (activeElement) {
-      const isProtected = activeElement.closest("[data-prevent-autofocus]")
-      const isInput = isEditableTarget(activeElement)
-      if (isProtected || isInput) return
-    }
-    if (dialog.active) return
-
-    if (activeElement === inputRef) {
-      if (event.key === "Escape") inputRef?.blur()
-      return
-    }
-
-    const key = scrollKey(event)
-    if (key) {
-      if (!scroller || !isScrollKeyTarget(target ?? null, key)) return
-      if (scrollKeyOwner(scroller, target ?? null, key) !== scroller) return
-      markScrollGesture(scroller)
-      return
-    }
-
-    if (event.key.length === 1 && event.key !== "Unidentified" && !(event.ctrlKey || event.metaKey)) {
-      if (composer.blocked() || controller.data.isChild()) return
-      const input = inputRef
-      if (!input) return
-      input.focus()
-      setCursorPosition(input, prompt.cursor() ?? promptLength(prompt.current()))
-    }
-  }
-
-  createEffect(() => {
-    if (!layout.ready()) return
-    if (serverSDK.connection.status() !== "connected") return
-    if (!project()) return
-    const list = changesOptions()
-    const mode = reviewMode()
-    if (list.includes(mode)) return
-    const next = list[0]
-    if (!next) return
-    controller.layout.view().review.setMode(next)
-  })
-
-  createEffect(
-    on(
-      () => data.session.status(controller.identity.params.id ?? ""),
-      (next, prev) => {
-        if (next !== "idle" || prev === undefined || prev === "idle") return
-        refreshVcs()
-      },
-      { defer: true },
-    ),
-  )
-
-  const fileTreeTab = () => layout.fileTree.tab()
-  const setFileTreeTab = (value: "changes" | "all") => layout.fileTree.setTab(value)
-
-  const [tree, setTree] = createStore({
-    reviewScroll: undefined as HTMLDivElement | undefined,
-    pendingDiff: undefined as string | undefined,
-  })
-
-  createEffect(
-    on(
-      controller.identity.sessionKey,
-      () => {
-        setTree({
-          reviewScroll: undefined,
-          pendingDiff: undefined,
-        })
-      },
-      { defer: true },
-    ),
-  )
-
-  const showAllFiles = () => {
-    if (fileTreeTab() !== "changes") return
-    setFileTreeTab("all")
-  }
-
-  const focusInput = () => {
-    if (controller.data.isChild()) return
-    inputRef?.focus()
-  }
-
-  useComposerCommands()
-  useSessionCommands({
-    session: controller,
-    background: {
-      blocking: () => composer.background.blocking().length > 0,
-      move: composer.background.move,
-    },
-    navigateMessageByOffset,
-    setActiveMessage,
-    focusInput,
-  })
-  command.register("session-palette", () => [
-    {
-      id: "command.palette",
-      title: language.t("command.palette"),
-      hidden: true,
-      onSelect: () => command.trigger("file.open", "palette"),
-    },
-  ])
-
-  const openReviewFile = createOpenReviewFile({
-    showAllFiles,
-    tabForPath: file.tab,
-    openTab: controller.layout.tabs().open,
-    setActive: controller.layout.tabs().setActive,
-    loadFile: file.load,
-  })
-
-  const changesLabel = (option: ChangeMode) => {
-    if (option === "git") return language.t("ui.sessionReview.title.git")
-    if (option === "branch") return language.t("ui.sessionReview.title.branch")
-    return language.t("ui.sessionReview.title.lastTurn")
-  }
-
-  const changesTitle = () => {
-    if (!canReview()) {
-      return null
-    }
-
-    return (
-      <Select
-        options={changesOptions()}
-        current={reviewMode()}
-        label={changesLabel}
-        placement="bottom-start"
-        gutter={6}
-        onSelect={(option) => option && controller.layout.view().review.setMode(option)}
-      />
-    )
-  }
-
-  const empty = (text: string) => (
-    <div class="h-full pb-64 -mt-4 flex flex-col items-center justify-center text-center gap-6">
-      <div class="text-14-regular text-text-weak max-w-56">{text}</div>
-    </div>
-  )
-
-  const createGit = (input: { emptyClass: string }) => (
-    <div class={input.emptyClass}>
-      <div class="flex flex-col gap-3">
-        <div class="text-14-medium text-text-strong">{language.t("session.review.noVcs.createGit.title")}</div>
-        <div class="text-14-regular text-text-base max-w-md" style={{ "line-height": "var(--line-height-normal)" }}>
-          {language.t("session.review.noVcs.createGit.description")}
-        </div>
-      </div>
-      {/* TODO: Restore the init button when the V2 client exposes Git initialization. */}
-    </div>
-  )
-
-  const reviewEmptyText = createMemo(() => {
-    if (reviewMode() === "git") return language.t("session.review.noUncommittedChanges")
-    if (reviewMode() === "branch") return language.t("session.review.noBranchChanges")
-    return language.t("session.review.noChanges")
-  })
-
-  const reviewEmpty = (input: { loadingClass: string; emptyClass: string }) => {
-    if (reviewMode() === "git" || reviewMode() === "branch") {
-      if (!reviewReady()) return <div class={input.loadingClass}>{language.t("session.review.loadingChanges")}</div>
-      return empty(reviewEmptyText())
-    }
-
-    if (reviewMode() === "turn") {
-      if (nogit()) return createGit(input)
-      return empty(reviewEmptyText())
-    }
-
-    return (
-      <div class={input.emptyClass}>
-        <div class="text-14-regular text-text-weak max-w-56">{reviewEmptyText()}</div>
-      </div>
-    )
-  }
-
-  const reviewEmptyV2 = () => {
-    if ((reviewMode() === "git" || reviewMode() === "branch") && !reviewReady()) {
-      return <div class="px-6 py-4 text-text-weak">{language.t("session.review.loadingChanges")}</div>
-    }
-    if (reviewMode() === "turn" && nogit()) {
-      // TODO: Restore SessionReviewEmptyNoGitV2 when the V2 client exposes Git initialization.
-      return empty(language.t("session.review.noVcs.createGit.description"))
-    }
-    return <SessionReviewEmptyChangesV2 />
-  }
-
-  const reviewContent = (input: {
-    diffStyle: DiffStyle
-    onDiffStyleChange?: (style: DiffStyle) => void
-    classes?: SessionReviewTabProps["classes"]
-    loadingClass: string
-    emptyClass: string
-  }) => (
-    <Show when={!store.deferRender}>
-      <SessionReviewTab
-        title={changesTitle()}
-        empty={reviewEmpty(input)}
-        diffs={reviewDiffs()}
-        view={controller.layout.view()}
-        diffStyle={input.diffStyle}
-        onDiffStyleChange={input.onDiffStyleChange}
-        onScrollRef={(el) => setTree("reviewScroll", el)}
-        focusedFile={activeReviewFile()}
-        onLineComment={(comment) => addCommentToContext({ ...comment, origin: "review" })}
-        onLineCommentUpdate={updateCommentInContext}
-        onLineCommentDelete={removeCommentFromContext}
-        lineCommentActions={reviewCommentActions()}
-        commentMentions={{
-          items: file.searchFilesAndDirectories,
-        }}
-        comments={comments.all()}
-        focusedComment={comments.focus()}
-        onFocusedCommentChange={comments.setFocus}
-        onViewFile={openReviewFile}
-        classes={input.classes}
-      />
-    </Show>
-  )
-
-  const reviewV2State = createReviewPanelV2State()
-
-  // Getters defer reactive reads to the consuming scope. Eager reads here ran inside
-  // the side panel's Show children and remounted the whole review panel on unrelated
-  // updates such as session switches.
-  const reviewPanelV2Props = () => ({
-    get title() {
-      return changesTitle()
-    },
-    get empty() {
-      return reviewEmptyV2()
-    },
-    get diffs() {
-      return reviewDiffs()
-    },
-    get diffsReady() {
-      return reviewReady()
-    },
-    get diffVersion() {
-      return vcsQuery.dataUpdatedAt
-    },
-    loadDiff: loadReviewDiff,
-    get activeFile() {
-      return activeReviewFile()
-    },
-    onSelectFile: focusReviewDiff,
-    get diffStyle() {
-      return layout.review.diffStyle()
-    },
-    onDiffStyleChange: layout.review.setDiffStyle,
-    state: reviewV2State,
-    onLineComment: (comment: SessionReviewLineComment) => addCommentToContext({ ...comment, origin: "review" }),
-    onLineCommentUpdate: updateCommentInContext,
-    onLineCommentDelete: removeCommentFromContext,
-    get lineCommentActions() {
-      return reviewCommentActions()
-    },
-    get comments() {
-      return comments.all()
-    },
-    get focusedComment() {
-      return comments.focus()
-    },
-    onFocusedCommentChange: (focus: { file: string; id: string } | null) => {
-      // The preview clears the focus once it has opened the comment; persist the
-      // focused file as the active selection so the preview stays on it. Skip
-      // files outside the current diff set (their focus is cleared unhandled).
-      if (!focus) {
-        const current = comments.focus()
-        if (current && reviewDiffs().some((diff) => diff.file === current.file)) focusReviewDiff(current.file)
-      }
-      comments.setFocus(focus)
-    },
-  })
-
-  // Latch: defer only the first diff render off the mount critical path. This Page
-  // stays mounted across same-workspace session tab switches, so gating on every
-  // deferRender flip tore down and remounted the whole review pane on tab switch.
-  const reviewPanelV2Rendered = createMemo<boolean>((prev) => prev || !store.deferRender, false)
-
-  const reviewPanelV2 = () => (
-    <div class="flex flex-col h-full overflow-hidden bg-v2-background-bg-base contain-strict">
-      <Show when={reviewPanelV2Rendered()}>
-        <ReviewPanelV2 {...reviewPanelV2Props()} />
-      </Show>
-    </div>
-  )
-
-  createEffect(
-    on(
-      controller.tabs.activeFileTab,
-      (active) => {
-        if (!active) return
-        if (fileTreeTab() !== "changes") return
-        showAllFiles()
-      },
-      { defer: true },
-    ),
-  )
-
-  const reviewDiffId = (path: string) => {
-    const sum = checksum(path)
-    if (!sum) return
-    return `session-review-diff-${sum}`
-  }
-
-  const reviewDiffTop = (path: string) => {
-    const root = tree.reviewScroll
-    if (!root) return
-
-    const id = reviewDiffId(path)
-    if (!id) return
-
-    const el = document.getElementById(id)
-    if (!(el instanceof HTMLElement)) return
-    if (!root.contains(el)) return
-
-    const a = el.getBoundingClientRect()
-    const b = root.getBoundingClientRect()
-    return a.top - b.top + root.scrollTop
-  }
-
-  const scrollToReviewDiff = (path: string) => {
-    const root = tree.reviewScroll
-    if (!root) return false
-
-    const top = reviewDiffTop(path)
-    if (top === undefined) return false
-
-    controller.layout.view().setScroll("review", { x: root.scrollLeft, y: top })
-    root.scrollTo({ top, behavior: "auto" })
-    return true
-  }
-
-  const focusReviewDiff = (path: string) => {
-    openReviewPanel()
-    controller.layout.view().review.openPath(path)
-    controller.layout.view().review.setFile(path)
-    setTree("pendingDiff", path)
-  }
-
-  createEffect(() => {
-    const pending = tree.pendingDiff
-    if (!pending) return
-    if (!tree.reviewScroll) return
-    if (!reviewReady()) return
-
-    const attempt = (count: number) => {
-      if (tree.pendingDiff !== pending) return
-      if (count > 60) {
-        setTree("pendingDiff", undefined)
-        return
-      }
-
-      const root = tree.reviewScroll
-      if (!root) {
-        requestAnimationFrame(() => attempt(count + 1))
-        return
-      }
-
-      if (!scrollToReviewDiff(pending)) {
-        requestAnimationFrame(() => attempt(count + 1))
-        return
-      }
-
-      const top = reviewDiffTop(pending)
-      if (top === undefined) {
-        requestAnimationFrame(() => attempt(count + 1))
-        return
-      }
-
-      if (Math.abs(root.scrollTop - top) <= 1) {
-        setTree("pendingDiff", undefined)
-        return
-      }
-
-      requestAnimationFrame(() => attempt(count + 1))
-    }
-
-    requestAnimationFrame(() => attempt(0))
-  })
-
-  let treeDir: string | undefined
-  createEffect(() => {
-    const dir = sdk().directory
-    if (!isDesktop()) return
-    if (!layout.fileTree.opened()) return
-    if (serverSDK.connection.status() !== "connected") return
-
-    fileTreeTab()
-    const refresh = treeDir !== dir
-    treeDir = dir
-    void (refresh ? file.tree.refresh("") : file.tree.list(""))
-  })
-
-  createEffect(
-    on(
-      () => sdk().directory,
-      () => {
-        const tab = controller.tabs.activeFileTab()
-        if (!tab) return
-        const path = file.pathFromTab(tab)
-        if (!path) return
-        void file.load(path, { force: true })
-      },
-      { defer: true },
-    ),
-  )
-
-  const autoScroll = createAutoScroll({
-    working: () => true,
-    overflowAnchor: "none",
-  })
-  const shouldAnchorBottom = () =>
-    !location.hash && !store.messageId && !ui.pendingMessage && !autoScroll.userScrolled()
-  createEffect(
-    on(
-      () => controller.identity.params.id,
-      (id, previous) => {
-        if (!id || !previous || id === previous) return
-        if (location.hash || store.messageId || ui.pendingMessage) return
-        autoScroll.resume()
-      },
-    ),
-  )
-
-  let scrollStateFrame: number | undefined
-  let scrollStateTarget: HTMLDivElement | undefined
-  let fillFrame: number | undefined
-
-  const jumpThreshold = (el: HTMLDivElement) => Math.max(400, el.clientHeight)
-
-  const updateScrollState = (el: HTMLDivElement) => {
-    const max = el.scrollHeight - el.clientHeight
-    const distance = max - el.scrollTop
-    const overflow = max > 1
-    const bottom = !overflow || distance <= 2
-    const jump = overflow && distance > jumpThreshold(el)
-
-    if (ui.scroll.overflow === overflow && ui.scroll.bottom === bottom && ui.scroll.jump === jump) return
-    setUi("scroll", { overflow, bottom, jump })
-  }
-
-  const scheduleScrollState = (el: HTMLDivElement) => {
-    scrollStateTarget = el
-    if (scrollStateFrame !== undefined) return
-
-    scrollStateFrame = requestAnimationFrame(() => {
-      scrollStateFrame = undefined
-
-      const target = scrollStateTarget
-      scrollStateTarget = undefined
-      if (!target) return
-
-      updateScrollState(target)
-    })
-  }
-
-  const resumeScroll = () => {
-    setStore("messageId", undefined)
-    autoScroll.resume()
-    scrollToEnd()
-    clearMessageHash()
-
-    const el = scroller
-    if (el) scheduleScrollState(el)
-  }
-
-  // When the user returns to the bottom, treat the active message as "latest".
-  createEffect(
-    on(
-      autoScroll.userScrolled,
-      (scrolled) => {
-        if (scrolled) return
-        setStore("messageId", undefined)
-        clearMessageHash()
-      },
-      { defer: true },
-    ),
-  )
-
-  let fill = () => {}
-
-  const setScrollRef = (el: HTMLDivElement | undefined) => {
-    scroller = el
-    autoScroll.scrollRef(el)
-    if (!el) return
-    scheduleScrollState(el)
-    fill()
-  }
-
-  const markUserScroll = () => {
-    scrollMark += 1
-  }
-
-  createResizeObserver(
-    () => content,
-    () => {
-      const el = scroller
-      if (el) scheduleScrollState(el)
-      fill()
-    },
-  )
-
-  let captureHistoryAnchor = () => {}
-  let restoreHistoryAnchor = (_done: boolean) => {}
-  const historyRequests = new Set<string>()
-  let historyContinuationFrame: number | undefined
-  const loadOlder = async () => {
-    const owner = controller.ownership.capture()
-    if (historyLoading() || historyRequests.has(owner.key)) return
-    historyRequests.add(owner.key)
-    const before = timeline.messages().length
-    try {
-      await timeline.history.loadOlder({
-        before: () => owner.run(captureHistoryAnchor),
-        after: (done) => owner.run(() => restoreHistoryAnchor(done)),
-      })
-    } finally {
-      historyRequests.delete(owner.key)
-    }
-    if (!owner.current() || timeline.messages().length <= before) return
-    if (!autoScroll.userScrolled() || !scroller || scroller.scrollTop >= 200 || !historyMore()) return
-    if (historyContinuationFrame !== undefined) cancelAnimationFrame(historyContinuationFrame)
-    historyContinuationFrame = requestAnimationFrame(() => {
-      historyContinuationFrame = undefined
-      owner.run(onHistoryScroll)
-    })
-  }
-  const onHistoryScroll = () => {
-    if (
-      historyRequests.has(controller.ownership.key()) ||
-      historyLoading() ||
-      !autoScroll.userScrolled() ||
-      !scroller ||
-      scroller.scrollTop >= 200
-    )
-      return
-    void loadOlder()
-  }
-
-  onCleanup(() => {
-    if (historyContinuationFrame !== undefined) cancelAnimationFrame(historyContinuationFrame)
-  })
-
-  fill = () => {
-    if (fillFrame !== undefined) return
-
-    fillFrame = requestAnimationFrame(() => {
-      fillFrame = undefined
-
-      if (!controller.identity.params.id || !messagesReady()) return
-      if (autoScroll.userScrolled() || historyLoading()) return
-
-      const el = scroller
-      if (!el) return
-      if (el.scrollHeight > el.clientHeight + 1) return
-      if (!historyMore()) return
-
-      void loadOlder()
-    })
-  }
-
-  createEffect(
-    on(
-      () =>
-        [
-          controller.identity.params.id,
-          messagesReady(),
-          historyMore(),
-          historyLoading(),
-          autoScroll.userScrolled(),
-          visibleUserMessages().length,
-        ] as const,
-      ([id, ready, more, loading, scrolled]) => {
-        if (!id || !ready || loading || scrolled) return
-        if (!more) return
-        fill()
-      },
-      { defer: true },
-    ),
-  )
-
-  const queuedFollowups = createMemo(() => {
-    const id = controller.identity.params.id
-    if (!id) return emptyFollowups
-    return followup.items[id] ?? emptyFollowups
-  })
-
-  const editingFollowup = createMemo(() => {
-    const id = controller.identity.params.id
-    if (!id) return
-    return followup.edit[id]
-  })
-
-  const workspaceMoveEligible = createMemo(() => {
-    const id = controller.identity.params.id
-    if (!id) return false
-    return (followup.items[id]?.length ?? 0) === 0 && !followup.failed[id] && !followup.paused[id] && !followup.edit[id]
-  })
-
-  const followupMutation = useMutation(() => ({
-    mutationFn: async (input: { sessionID: string; id: string; manual?: boolean }) => {
-      if (!(followup.items[input.sessionID] ?? []).some((entry) => entry.id === input.id)) return
-
-      if (input.manual) setFollowup("paused", input.sessionID, undefined)
-      setFollowup("failed", input.sessionID, undefined)
-
-      // TODO: Restore queued followups once submission no longer requires the legacy sync transcript.
-      setFollowup("failed", input.sessionID, input.id)
-    },
-  }))
-
-  const followupBusy = (sessionID: string) =>
-    followupMutation.isPending && followupMutation.variables?.sessionID === sessionID
-
-  const sendingFollowup = createMemo(() => {
-    const id = controller.identity.params.id
-    if (!id) return
-    if (!followupBusy(id)) return
-    return followupMutation.variables?.id
-  })
-
-  const queueEnabled = createMemo(() => {
-    const id = controller.identity.params.id
-    if (!id) return false
-    // TODO: Restore queued followups with current session admission APIs.
-    return false
-  })
-
-  const followupText = (item: FollowupDraft) => {
-    const text = item.prompt
-      .map((part) => {
-        if (part.type === "image") return `[image:${part.filename}]`
-        if (part.type === "file") return `[file:${part.path}]`
-        if (part.type === "agent") return `@${part.name}`
-        return part.content
-      })
-      .join("")
-      .split(/\r?\n/)
-      .map((line) => line.trim())
-      .find((line) => !!line)
-
-    if (text) return text
-    return `[${language.t("common.attachment")}]`
-  }
-
-  const queueFollowup = (draft: FollowupDraft) => {
-    setFollowup("items", draft.sessionID, (items) => [
-      ...(items ?? []),
-      { id: SessionMessage.ID.create(), ...draft },
-    ])
-    setFollowup("failed", draft.sessionID, undefined)
-    setFollowup("paused", draft.sessionID, undefined)
-  }
-
-  const followupDock = createMemo(() => queuedFollowups().map((item) => ({ id: item.id, text: followupText(item) })))
-
-  const sendFollowup = (sessionID: string, id: string, opts?: { manual?: boolean }) => {
-    if (data.session.get(sessionID)?.parentID) return Promise.resolve()
-    const item = (followup.items[sessionID] ?? []).find((entry) => entry.id === id)
-    if (!item) return Promise.resolve()
-    if (followupBusy(sessionID)) return Promise.resolve()
-
-    return followupMutation.mutateAsync({ sessionID, id, manual: opts?.manual })
-  }
-
-  const editFollowup = (id: string) => {
-    const sessionID = controller.identity.params.id
-    if (!sessionID) return
-    if (followupBusy(sessionID)) return
-
-    const item = queuedFollowups().find((entry) => entry.id === id)
-    if (!item) return
-
-    setFollowup("items", sessionID, (items) => (items ?? []).filter((entry) => entry.id !== id))
-    setFollowup("failed", sessionID, (value) => (value === id ? undefined : value))
-    setFollowup("edit", sessionID, {
-      id: item.id,
-      prompt: item.prompt,
-      context: item.context,
-    })
-  }
-
-  const clearFollowupEdit = () => {
-    const id = controller.identity.params.id
-    if (!id) return
-    setFollowup("edit", id, undefined)
-  }
-
-  // TODO: Restore revert drafts when current transcript messages expose prompt parts.
-  const reverting = () => false
-  const restoring = () => undefined
-  const revert = (_input: { sessionID: string; messageID: string }) => undefined
-  const restore = (_id: string) => undefined
-  const rolled = () => []
-
-  // attachment bytes are embedded as a data URL, so downloading always works;
-  // revealing requires the on-disk path captured by the client that attached the file
-  const openAttachment: NonNullable<SessionUserActions["openAttachment"]> = (file) => {
-    const url = file.source.type === "uri" ? file.source.uri : `data:${file.mime};base64,${file.data}`
-    const download = () => {
-      const anchor = document.createElement("a")
-      anchor.href = url
-      anchor.download = getFilename(file.name) || "attachment"
-      anchor.click()
-    }
-    const path = file.name ?? ""
-    const absolute = path.startsWith("/") || path.startsWith("\\\\") || /^[a-zA-Z]:[\\/]/.test(path)
-    if (platform.revealPath && absolute) {
-      void platform.revealPath(path).then(
-        (revealed) => {
-          if (!revealed) download()
-        },
-        () => download(),
-      )
-      return
-    }
-    download()
-  }
-
-  const actions = { revert, openAttachment } satisfies SessionUserActions
-
-  createEffect(() => {
-    const sessionID = controller.identity.params.id
-    if (!sessionID) return
-
-    const item = queuedFollowups()[0]
-    if (!item) return
-    if (followupBusy(sessionID)) return
-    if (followup.failed[sessionID] === item.id) return
-    if (followup.paused[sessionID]) return
-    if (controller.data.isChild()) return
-    if (composer.blocked()) return
-    if (controller.data.working()) return
-
-    void sendFollowup(sessionID, item.id)
-  })
-
-  createResizeObserver(
-    () => promptDock,
-    ({ height }) => {
-      const next = Math.ceil(height)
-
-      if (next === dockHeight) return
-
-      const el = scroller
-      const delta = next - dockHeight
-      const stick = el
-        ? !autoScroll.userScrolled() || el.scrollHeight - el.clientHeight - el.scrollTop < 10 + Math.max(0, delta)
-        : false
-
-      dockHeight = next
-
-      if (stick) scrollToEnd()
-
-      if (el) scheduleScrollState(el)
-      fill()
-    },
-  )
-
-  const { clearMessageHash, scrollToMessage } = useSessionHashScroll({
-    sessionKey: controller.identity.sessionKey,
-    sessionID: () => controller.identity.params.id,
-    messagesReady,
-    visibleUserMessages,
-    historyMore,
-    historyLoading,
-    // TODO: Restore hash paging when the current message API exposes history cursors.
-    loadMore: async () => undefined,
-    currentMessageId: () => store.messageId,
-    pendingMessage: () => ui.pendingMessage,
-    setPendingMessage: (value) => setUi("pendingMessage", value),
-    setActiveMessage,
-    autoScroll: {
-      pause: autoScroll.pause,
-      forceScrollToBottom: () => {
-        autoScroll.resume()
-        scrollToEnd()
-      },
-    },
-    scroller: () => scroller,
-    anchor,
-    revealMessage: (id) => revealMessage(id),
-    scheduleScrollState,
-    consumePendingMessage: layout.pendingMessage.consume,
-  })
-
-  createEffect(
-    on(
-      () => controller.identity.params.id,
-      (id) => {
-        if (!id) requestAnimationFrame(() => inputRef?.focus())
-      },
-    ),
-  )
-
-  onMount(() => {
-    makeEventListener(document, "keydown", handleKeyDown)
-  })
-
-  onCleanup(() => {
-    if (reviewFrame !== undefined) cancelAnimationFrame(reviewFrame)
-    if (scrollStateFrame !== undefined) cancelAnimationFrame(scrollStateFrame)
-    if (fillFrame !== undefined) cancelAnimationFrame(fillFrame)
-  })
-
-  useUsageExceededDialogs()
-
-  const mobileTabs = (compact = false, bottom = false) => (
-    <Tabs value={store.mobileTab} class="h-auto">
-      <Tabs.List
-        classList={{
-          "!h-9": compact,
-          "[&::after]:!border-b-0 [&::after]:!border-t [&::after]:!border-border-weak-base": bottom,
-        }}
-      >
-        <Tabs.Trigger
-          value="session"
-          classes={{ button: compact ? "w-full !py-2" : "w-full" }}
-          classList={{
-            "!w-1/2 !max-w-none": true,
-            "!border-b-0 !border-t !border-border-weak-base [&:has([data-selected])]:!border-t-transparent": bottom,
-          }}
-          onClick={() => setStore("mobileTab", "session")}
-        >
-          {language.t("session.tab.session")}
-        </Tabs.Trigger>
-        <Tabs.Trigger
-          value="changes"
-          classes={{ button: compact ? "w-full !py-2" : "w-full" }}
-          classList={{
-            "!w-1/2 !max-w-none !border-r-0": true,
-            "!border-b-0 !border-t !border-border-weak-base [&:has([data-selected])]:!border-t-transparent": bottom,
-          }}
-          onClick={() => setStore("mobileTab", "changes")}
-        >
-          {hasReview()
-            ? language.t("session.review.filesChanged", { count: reviewCount() })
-            : language.plural("session.review.change", 0)}
-        </Tabs.Trigger>
-      </Tabs.List>
-    </Tabs>
-  )
-  const mobileTabsBottom = createMemo(() => !isDesktop() && settings.general.mobileTitlebarPosition() === "bottom")
-
-  const sessionErrorFallback = (error: unknown, reset: () => void) => {
-    createEffect(on(controller.identity.sessionKey, reset, { defer: true }))
-    return <SessionErrorFallback error={error} sessionID={controller.identity.params.id} />
-  }
-
-  const sessionPanelContent = () => (
-    <>
-      {sessionSync() ?? ""}
-      <Show when={!isDesktop() && !!controller.identity.params.id && !mobileTabsBottom()}>{mobileTabs(true)}</Show>
-      <div class="flex-1 min-h-0 overflow-hidden">
-        <Switch>
-          <Match when={controller.identity.params.id && mobileChanges()}>
-            <div class="relative h-full overflow-hidden">
-              {reviewContent({
-                diffStyle: "unified",
-                classes: {
-                  root: "pb-8 [&_[data-slot=session-review-list]]:pb-0",
-                  header: "px-4 !h-16 !pb-4",
-                  container: "px-4",
-                },
-                loadingClass: "px-4 py-4 text-text-weak",
-                emptyClass: "h-full pb-64 -mt-4 flex flex-col items-center justify-center text-center gap-6",
-              })}
-            </div>
-          </Match>
-          <Match when={controller.identity.params.id}>
-            <Show when={messagesReady() ? controller.identity.params.id : undefined} keyed>
-              {(_id) => (
-                <MessageTimeline
-                  session={controller}
-                  actions={actions}
-                  scroll={ui.scroll}
-                  onResumeScroll={resumeScroll}
-                  setScrollRef={setScrollRef}
-                  onScheduleScrollState={scheduleScrollState}
-                  onAutoScrollHandleScroll={autoScroll.handleScroll}
-                  onMarkScrollGesture={markScrollGesture}
-                  hasScrollGesture={hasScrollGesture()}
-                  onUserScroll={markUserScroll}
-                  onHistoryScroll={onHistoryScroll}
-                  onAutoScrollInteraction={autoScroll.handleInteraction}
-                  shouldAnchorBottom={shouldAnchorBottom()}
-                  centered={centered()}
-                  setContentRef={(el) => {
-                    content = el
-                    autoScroll.contentRef(el)
-
-                    const root = scroller
-                    if (root) scheduleScrollState(root)
-                  }}
-                  userMessages={visibleUserMessages()}
-                  diffs={sessionDetailsDiffs}
-                  onReview={openReviewPanel}
-                  workspaceMoveEligible={workspaceMoveEligible()}
-                  onSummaryOpenChange={(open) => setStore("sessionDetailsOpen", open)}
-                  setHistoryAnchor={(handlers) => {
-                    captureHistoryAnchor = handlers.capture
-                    restoreHistoryAnchor = handlers.restore
-                  }}
-                  anchor={anchor}
-                  setRevealMessage={(fn) => {
-                    revealMessage = fn
-                  }}
-                  setScrollToEnd={(fn) => {
-                    scrollToEnd = fn
-                  }}
-                />
-              )}
-            </Show>
-          </Match>
-          <Match when={true}>
-            <NewSessionView worktree={newSessionWorktree()} />
-          </Match>
-        </Switch>
-      </div>
-
-      <Show when={controller.identity.params.id && !mobileChanges()}>
-        {(_) => {
-          const region = createSessionComposerRegionController({
-            state: composer,
-            sessionKey: controller.identity.sessionKey,
-            sessionID: () => controller.identity.params.id,
-            prompt,
-            ready: () => !store.deferRender && messagesReady(),
-            centered,
-            followup: () =>
-              controller.identity.params.id && !controller.data.isChild()
-                ? {
-                    items: followupDock(),
-                    sending: sendingFollowup(),
-                    onSend: (id) => void sendFollowup(controller.identity.params.id!, id, { manual: true }),
-                    onEdit: editFollowup,
-                  }
-                : undefined,
-            revert: () =>
-              rolled().length > 0
-                ? {
-                    items: rolled(),
-                    restoring: restoring(),
-                    disabled: reverting(),
-                    onRestore: restore,
-                  }
-                : undefined,
-            onResponseSubmit: resumeScroll,
-            openParent: () => {
-              const id = controller.data.parentID()
-              if (!id) return
-              navigate(sessionHref(requireServerKey(controller.identity.params.serverKey), id))
-            },
-            setPromptRef: (el) => {
-              inputRef = el
-            },
-            setDockRef: (el) => {
-              promptDock = el
-            },
-          })
-          const promptInputController = usePromptInputV2Controller({
-            get controls() {
-              return inputController()
-            },
-            ref: (el) => {
-              inputRef = el
-            },
-            get newSessionWorktree() {
-              return newSessionWorktree()
-            },
-            onNewSessionWorktreeReset: () => setStore("newSessionWorktree", "main"),
-            onSubmit: () => {
-              comments.clear()
-              resumeScroll()
-            },
-            get edit() {
-              return editingFollowup()
-            },
-            onEditLoaded: clearFollowupEdit,
-            shouldQueue: queueEnabled,
-            onQueue: queueFollowup,
-            onAbort: () => {
-              const id = controller.identity.params.id
-              if (!id) return
-              setFollowup("paused", id, true)
-            },
-          })
-          return (
-            <SessionComposerRegion
-              controller={region}
-              promptInput={
-                <PromptInputV2Composer
-                  controller={promptInputController}
-                  borderUnderlay
-                  accentSubmit={workspaceSession()}
-                />
-              }
-            />
-          )
-        }}
-      </Show>
-      <Show when={!!controller.identity.params.id && mobileTabsBottom()}>{mobileTabs(true, true)}</Show>
-    </>
-  )
-
-  return (
-    <SessionRouteFrame>
-      <SessionHeader />
-      <div ref={panelRow} class="flex-1 min-h-0 flex flex-col md:flex-row gap-2 p-2">
-        <div
-          classList={{
-            "@container relative shrink-0 flex flex-col min-h-0 h-full flex-1 md:flex-none transition-[width]": true,
-            "duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
-              !size.active() && !ui.reviewSnap && !desktopInlineTerminalOnlyOpen(),
-          }}
-          style={{
-            width: sessionPanelWidth(),
-          }}
-        >
-          <Show when={sessionPanelKey()} keyed>
-            {(_) => (
-              <SessionPanelFrame raised={!!controller.identity.params.id}>
-                <ErrorBoundary fallback={sessionErrorFallback}>{sessionPanelContent()}</ErrorBoundary>
-              </SessionPanelFrame>
-            )}
-          </Show>
-
-          <Show when={desktopSessionResizeOpen()}>
-            <div onPointerDown={() => size.start()}>
-              <ResizeHandle
-                class="-end-1"
-                direction="horizontal"
-                size={sessionPanelResizedWidth()}
-                min={SESSION_PANEL_WIDTH_MIN}
-                max={sessionPanelMax()}
-                onResize={(width) => {
-                  size.touch()
-                  layout.session.resize(width)
-                }}
-              />
-            </div>
-          </Show>
-        </div>
-
-        <Show when={isDesktop() ? desktopV2PanelLayout().visible : terminalOpen()}>
-          <div class="min-w-0 h-full flex flex-1 flex-col">
-            <Show when={isDesktop() && (desktopV2ReviewOpen() || desktopFileTreeOpen())}>
-              <div class="min-h-0 flex-1">
-                <Suspense>
-                  <SessionSidePanel
-                    canReview={canReview()}
-                    diffs={reviewDiffs()}
-                    diffsReady={reviewReady()}
-                    hasReview={hasReview()}
-                    reviewHasFocusableContent={hasReview() || reviewV2State.sidebarOpened()}
-                    reviewCount={reviewCount()}
-                    reviewPanel={reviewPanelV2}
-                    reviewSidebarToggle={(disabled) => (
-                      <SessionReviewV2SidebarToggle
-                        opened={reviewV2State.sidebarOpened()}
-                        disabled={disabled}
-                        onToggle={reviewV2State.toggleSidebar}
-                      />
-                    )}
-                    fileBrowserState={reviewV2State}
-                    activeDiff={activeReviewFile()}
-                    focusReviewDiff={focusReviewDiff}
-                    reviewSnap={ui.reviewSnap}
-                    size={size}
-                    stacked={desktopV2PanelLayout().stacked}
-                  />
-                </Suspense>
-              </div>
-            </Show>
-            <Show when={desktopV2PanelLayout().stacked}>
-              <div class="relative h-2 shrink-0" onPointerDown={() => size.start()}>
-                <ResizeHandle
-                  class="!relative !inset-auto !h-full !w-full !transform-none"
-                  direction="vertical"
-                  size={layout.terminal.height()}
-                  min={100}
-                  max={typeof window === "undefined" ? 600 : window.innerHeight * 0.6}
-                  collapseThreshold={50}
-                  onResize={(height) => {
-                    size.touch()
-                    layout.terminal.resize(height)
-                  }}
-                  onCollapse={() => controller.layout.view().terminal.close()}
-                />
-              </div>
-            </Show>
-            <Show when={terminalOpen()}>
-              <div
-                classList={{
-                  "min-h-0 shrink-0": desktopV2PanelLayout().stacked,
-                  "min-h-0 flex-1": !desktopV2PanelLayout().stacked,
-                }}
-              >
-                <TerminalPanelV2 stacked={desktopV2PanelLayout().stacked} />
-              </div>
-            </Show>
-          </div>
-        </Show>
-      </div>
-    </SessionRouteFrame>
-  )
-}
diff --git a/packages/app/src/pages/session/terminal-panel-v2.tsx b/packages/app/src/pages/session/terminal-panel-v2.tsx
deleted file mode 100644
index fca4d34c1c7..00000000000
--- a/packages/app/src/pages/session/terminal-panel-v2.tsx
+++ /dev/null
@@ -1,322 +0,0 @@
-import { For, Show, createEffect, createMemo, on, onCleanup, onMount } from "solid-js"
-import { createStore } from "solid-js/store"
-import { makeEventListener } from "@solid-primitives/event-listener"
-import { createMediaQuery } from "@solid-primitives/media"
-import { DragDropProvider, PointerSensor } from "@dnd-kit/solid"
-import { isSortable } from "@dnd-kit/solid/sortable"
-import { Accessibility, AutoScroller, Feedback, PointerActivationConstraints } from "@dnd-kit/dom"
-import { RestrictToHorizontalAxis } from "@dnd-kit/abstract/modifiers"
-import { RestrictToElement } from "@dnd-kit/dom/modifiers"
-import { Tabs } from "@opencode-ai/ui/tabs"
-import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
-import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Icon } from "@opencode-ai/ui/icon"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
-import { Keybind } from "@opencode-ai/ui/keybind"
-
-import { SortableTerminalTabV2 } from "@/components/session/session-sortable-terminal-tab-v2"
-import { Terminal } from "@/components/terminal"
-import { useCommand } from "@/context/command"
-import { useLanguage } from "@/context/language"
-import { useLayout } from "@/context/layout"
-import { useTerminal } from "@/context/terminal"
-import { useWorkspaceLocation } from "@/context/location"
-import { terminalTabLabel } from "@/pages/session/terminal-label"
-import { createSizing, focusTerminalById } from "@/pages/session/helpers"
-import { getTerminalHandoff, setTerminalHandoff } from "@/pages/session/handoff"
-import { useSessionLayout } from "@/pages/session/session-layout"
-
-export function TerminalPanelV2(props: { stacked?: boolean } = {}) {
-  const layout = useLayout()
-  const terminal = useTerminal()
-  const sdk = useWorkspaceLocation()
-  const language = useLanguage()
-  const command = useCommand()
-  const { workspaceKey, view } = useSessionLayout()
-
-  const isDesktop = createMediaQuery("(min-width: 768px)")
-  const opened = createMemo(() => view().terminal.opened())
-  const size = createSizing()
-  const height = createMemo(() => layout.terminal.height())
-  const close = () => view().terminal.close()
-  let root: HTMLDivElement | undefined
-  let tabList: HTMLDivElement | undefined
-
-  onCleanup(() => terminal.cancelFocus())
-
-  const [store, setStore] = createStore({
-    autoCreated: false,
-    recovered: {} as Record<string, boolean>,
-    view: typeof window === "undefined" ? 1000 : (window.visualViewport?.height ?? window.innerHeight),
-  })
-
-  const max = () => store.view * 0.6
-  const pane = () => Math.min(height(), max())
-  const stacked = createMemo(() => isDesktop() && props.stacked)
-  const panelHeight = createMemo(() =>
-    isDesktop() ? (stacked() ? `${pane()}px` : "100%") : opened() ? `${pane()}px` : "0px",
-  )
-  const contentHeight = createMemo(() => (isDesktop() ? (stacked() ? `${pane()}px` : "100%") : `${pane()}px`))
-  const newTerminalKeybind = createMemo(() => command.keybindParts("terminal.new"))
-
-  onMount(() => {
-    if (typeof window === "undefined") return
-
-    const sync = () => setStore("view", window.visualViewport?.height ?? window.innerHeight)
-    const port = window.visualViewport
-
-    sync()
-    makeEventListener(window, "resize", sync)
-    if (port) makeEventListener(port, "resize", sync)
-  })
-
-  createEffect(() => {
-    if (!opened()) {
-      setStore("autoCreated", false)
-      return
-    }
-
-    if (!terminal.ready() || terminal.all().length !== 0 || store.autoCreated) return
-    terminal.new()
-    setStore("autoCreated", true)
-  })
-
-  createEffect(
-    on(
-      () => terminal.all().length,
-      (count, prevCount) => {
-        if (prevCount === undefined || prevCount <= 0 || count !== 0) return
-        if (!opened()) return
-        close()
-      },
-    ),
-  )
-
-  createEffect(
-    on(
-      () => [opened(), terminal.active(), terminal.focusRequested(terminal.active())] as const,
-      ([next, id, requested]) => {
-        if (!next || !id || !requested) return
-        focusTerminalById(id)
-      },
-    ),
-  )
-
-  createEffect(() => {
-    if (opened()) return
-    const active = document.activeElement
-    if (!(active instanceof HTMLElement)) return
-    if (!root?.contains(active)) return
-    active.blur()
-  })
-
-  createEffect(() => {
-    const dir = sdk().directory
-    if (!dir) return
-    if (!terminal.ready()) return
-    language.locale()
-
-    setTerminalHandoff(
-      workspaceKey(),
-      terminal.all().map((pty) =>
-        terminalTabLabel({
-          title: pty.title,
-          titleNumber: pty.titleNumber,
-          t: language.t as (key: string, vars?: Record<string, string | number | boolean>) => string,
-        }),
-      ),
-    )
-  })
-
-  const handoff = createMemo(() => {
-    const dir = sdk().directory
-    if (!dir) return []
-    return getTerminalHandoff(workspaceKey()) ?? []
-  })
-
-  const all = terminal.all
-  const ids = createMemo(() => all().map((pty) => pty.id))
-
-  const recoverTerminal = (key: string, id: string, clone: (id: string) => Promise<void>) => {
-    if (store.recovered[key]) return
-    setStore("recovered", key, true)
-    void clone(id)
-  }
-
-  const terminalRecoveryKey = (pty: { id: string; title: string; titleNumber: number }) => {
-    return String(pty.titleNumber || pty.title || pty.id)
-  }
-
-  const markTerminalConnected = (key: string, id: string, trim: (id: string) => void) => {
-    setStore("recovered", key, false)
-    trim(id)
-  }
-
-  const handleTerminalDragEnd = () => {
-    const activeId = terminal.active()
-    if (!activeId) return
-    requestAnimationFrame(() => {
-      if (terminal.active() !== activeId) return
-      focusTerminalById(activeId)
-    })
-  }
-
-  return (
-    <aside
-      ref={root}
-      id="terminal-panel"
-      role="region"
-      aria-label={language.t("terminal.title")}
-      aria-hidden={!opened()}
-      inert={!opened()}
-      class="relative shrink-0 overflow-hidden bg-v2-background-bg-base"
-      classList={{
-        "w-full": !isDesktop() || stacked(),
-        "min-w-0 h-full flex-1": isDesktop() && opened() && !stacked(),
-        "w-0 h-full pointer-events-none": isDesktop() && !opened(),
-        "rounded-[10px] shadow-[var(--v2-elevation-raised)]": isDesktop(),
-        "transition-[height] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[height] motion-reduce:transition-none":
-          !isDesktop() && !size.active(),
-      }}
-      style={{ height: panelHeight() }}
-    >
-      <div classList={{ "md:hidden": !stacked(), hidden: stacked() }} onPointerDown={() => size.start()}>
-        <ResizeHandle
-          class="-top-1"
-          direction="vertical"
-          size={pane()}
-          min={100}
-          max={max()}
-          collapseThreshold={50}
-          onResize={(next) => {
-            size.touch()
-            layout.terminal.resize(next)
-          }}
-          onCollapse={close}
-        />
-      </div>
-      <div
-        class="absolute inset-0 flex flex-col overflow-hidden"
-        classList={{
-          "border-t border-border-weak-base": opened() && !isDesktop(),
-          "pointer-events-none": !opened(),
-        }}
-        style={{ height: contentHeight() }}
-      >
-        <Show
-          when={terminal.ready()}
-          fallback={
-            <div class="flex flex-col h-full pointer-events-none">
-              <div class="h-10 flex items-center gap-2 px-2 border-b border-border-weaker-base bg-v2-background-bg-base overflow-hidden">
-                <For each={handoff()}>
-                  {(title) => (
-                    <div class="px-2 py-1 rounded-md bg-surface-base text-14-regular text-text-weak truncate max-w-40">
-                      {title}
-                    </div>
-                  )}
-                </For>
-                <div class="flex-1" />
-                <div class="text-text-weak pr-2">
-                  {language.t("common.loading")}
-                  {language.t("common.loading.ellipsis")}
-                </div>
-              </div>
-              <div class="flex-1 flex items-center justify-center text-text-weak">{language.t("terminal.loading")}</div>
-            </div>
-          }
-        >
-          <DragDropProvider
-            sensors={[
-              PointerSensor.configure({
-                activationConstraints: [new PointerActivationConstraints.Distance({ value: 4 })],
-                preventActivation: (event) =>
-                  event.target instanceof Element &&
-                  !!event.target.closest('[data-slot="tabs-trigger-close-button"], input, [contenteditable="true"]'),
-              }),
-            ]}
-            modifiers={[RestrictToHorizontalAxis, RestrictToElement.configure({ element: () => tabList ?? null })]}
-            plugins={(defaults) => [
-              ...defaults.filter((plugin) => plugin !== Accessibility),
-              AutoScroller.configure({ acceleration: 8, threshold: { x: 0.05, y: 0 } }),
-              Feedback.configure({ dropAnimation: null }),
-            ]}
-            onDragEnd={(event) => {
-              const source = event.operation.source
-              if (!event.canceled && isSortable(source) && source.initialIndex !== source.index) {
-                terminal.move(source.id.toString(), source.index)
-              }
-              handleTerminalDragEnd()
-            }}
-          >
-            <div class="flex flex-col h-full">
-              <Tabs
-                variant="panel"
-                value={terminal.active()}
-                onChange={(id) => terminal.open(id)}
-                class="!h-[52px] !flex-none"
-              >
-                <Tabs.List
-                  ref={tabList}
-                  onPointerDown={(event: PointerEvent & { currentTarget: HTMLDivElement }) => {
-                    const active = document.activeElement
-                    if (event.target === active) return
-                    if (active instanceof HTMLInputElement && event.currentTarget.contains(active)) active.blur()
-                  }}
-                >
-                  <For each={all()}>
-                    {(pty, index) => <SortableTerminalTabV2 terminal={pty} index={index()} onClose={close} />}
-                  </For>
-                  <div class="h-full flex items-center justify-center">
-                    <Tooltip
-                      value={
-                        <>
-                          {language.t("command.terminal.new")}
-                          <Show when={newTerminalKeybind().length > 0}>
-                            <Keybind keys={newTerminalKeybind()} variant="neutral" />
-                          </Show>
-                        </>
-                      }
-                      placement="bottom"
-                      class="flex items-center"
-                    >
-                      <IconButton
-                        icon={<Icon name="plus-small" size="large" />}
-                        variant="ghost"
-                        onClick={() => terminal.new({ focus: true })}
-                        aria-label={language.t("command.terminal.new")}
-                      />
-                    </Tooltip>
-                  </div>
-                </Tabs.List>
-              </Tabs>
-              <div class="flex-1 min-h-0 relative">
-                <Show when={opened() && terminal.active()} keyed>
-                  {(id) => {
-                    const ops = terminal.bind()
-                    return (
-                      <Show when={all().find((pty) => pty.id === id)}>
-                        {(pty) => (
-                          <div id={`terminal-wrapper-${id}`} class="absolute inset-0">
-                            <Terminal
-                              pty={pty()}
-                              autoFocus={terminal.focusRequested(id)}
-                              onAutoFocus={() => terminal.consumeFocus(id)}
-                              class="!px-[14px]"
-                              onConnect={() => markTerminalConnected(terminalRecoveryKey(pty()), id, ops.trim)}
-                              onCleanup={ops.update}
-                              onConnectError={() => recoverTerminal(terminalRecoveryKey(pty()), id, ops.clone)}
-                            />
-                          </div>
-                        )}
-                      </Show>
-                    )
-                  }}
-                </Show>
-              </div>
-            </div>
-          </DragDropProvider>
-        </Show>
-      </div>
-    </aside>
-  )
-}
diff --git a/packages/app/src/pages/session/use-composer-commands.tsx b/packages/app/src/session/commands/use-composer-commands.tsx
similarity index 96%
rename from packages/app/src/pages/session/use-composer-commands.tsx
rename to packages/app/src/session/commands/use-composer-commands.tsx
index e7e51489ee7..7d914c6445e 100644
--- a/packages/app/src/pages/session/use-composer-commands.tsx
+++ b/packages/app/src/session/commands/use-composer-commands.tsx
@@ -3,8 +3,8 @@ import { useLanguage } from "@/context/language"
 import { useLocal, type ModelSelection } from "@/context/local"
 import { useDialog } from "@opencode-ai/ui/context/dialog"
 import { getCursorPosition, setCursorPosition } from "@/components/prompt-input/editor-dom"
-import { useSessionLayout } from "./session-layout"
-import { createSessionOwnership } from "./session-ownership"
+import { useSessionLayout } from "@/session/session-layout"
+import { createSessionOwnership } from "@/session/session-ownership"
 
 const withCategory = (category: string) => {
   return (option: Omit<CommandOption, "category">): CommandOption => ({
diff --git a/packages/app/src/pages/session/use-session-commands.tsx b/packages/app/src/session/commands/use-session-commands.tsx
similarity index 81%
rename from packages/app/src/pages/session/use-session-commands.tsx
rename to packages/app/src/session/commands/use-session-commands.tsx
index e3bc090e4a4..b16c430a942 100644
--- a/packages/app/src/pages/session/use-session-commands.tsx
+++ b/packages/app/src/session/commands/use-session-commands.tsx
@@ -15,15 +15,15 @@ import { showToast } from "@/utils/toast"
 import { downloadSessionExport, fetchSessionExport, sessionExportFilename } from "@/utils/session-export"
 import { extractPromptComments, extractPromptFromMessage } from "@/utils/prompt"
 import type { SessionMessageUser } from "@opencode-ai/client/promise"
-import type { SessionController } from "./session-controller"
+import type { SessionModel } from "@/session/model"
 
 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">
+  identity: SessionModel["identity"]
+  data: Pick<SessionModel["data"], "info" | "revertMessageID">
+  history: Pick<SessionModel["history"], "userMessages" | "visibleUserMessages">
+  layout: SessionModel["layout"]
+  ownership: SessionModel["ownership"]
+  tabs: Pick<SessionModel["tabs"], "activeFileTab" | "closableTab">
 }
 
 export type SessionCommandContext = {
@@ -63,7 +63,7 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
     owner.run(() => show(value))
   }
   const runCommand = async <T,>(input: {
-    owner: ReturnType<SessionController["ownership"]["capture"]>
+    owner: ReturnType<SessionModel["ownership"]["capture"]>
     prompt: T
     request: () => Promise<unknown>
     updatePrompt: (prompt: T) => void
@@ -116,82 +116,6 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
     if (sessionID) return permission.isAutoAccepting(sessionID, sdk().directory)
     return permission.isAutoAcceptingDirectory(sdk().directory)
   }
-  const write = async (value: string) => {
-    const body = typeof document === "undefined" ? undefined : document.body
-    if (body) {
-      const textarea = document.createElement("textarea")
-      textarea.value = value
-      textarea.setAttribute("readonly", "")
-      textarea.style.position = "fixed"
-      textarea.style.opacity = "0"
-      textarea.style.pointerEvents = "none"
-      body.appendChild(textarea)
-      textarea.select()
-      const copied = document.execCommand("copy")
-      body.removeChild(textarea)
-      if (copied) return true
-    }
-
-    const clipboard = typeof navigator === "undefined" ? undefined : navigator.clipboard
-    if (!clipboard?.writeText) return false
-    return clipboard.writeText(value).then(
-      () => true,
-      () => false,
-    )
-  }
-
-  const copyShare = async (url: string, existing: boolean) => {
-    if (!(await write(url))) {
-      showToast({
-        title: language.t("toast.session.share.copyFailed.title"),
-        variant: "error",
-      })
-      return
-    }
-
-    showToast({
-      title: existing ? language.t("session.share.copy.copied") : language.t("toast.session.share.success.title"),
-      description: language.t("toast.session.share.success.description"),
-      variant: "success",
-    })
-  }
-
-  const share = async () => {
-    const sessionID = actions.session.identity.params.id
-    if (!sessionID) return
-
-    const existing = undefined
-    if (existing) {
-      await copyShare(existing, true)
-      return
-    }
-
-    // TODO: Restore sharing when the V2 client exposes a session sharing API.
-    const url = undefined
-    if (!url) {
-      showToast({
-        title: language.t("toast.session.share.failed.title"),
-        description: language.t("toast.session.share.failed.description"),
-        variant: "error",
-      })
-      return
-    }
-
-    await copyShare(url, false)
-  }
-
-  const unshare = async () => {
-    const sessionID = actions.session.identity.params.id
-    if (!sessionID) return
-
-    // TODO: Restore unsharing when the V2 client exposes a session sharing API.
-    showToast({
-      title: language.t("toast.session.unshare.failed.title"),
-      description: language.t("toast.session.unshare.failed.description"),
-      variant: "error",
-    })
-  }
-
   const exportSession = async () => {
     const sessionID = actions.session.identity.params.id
     if (!sessionID) return
@@ -373,36 +297,6 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
     )
   }
 
-  const shareCmds = () => {
-    // TODO: Restore these commands when the V2 client exposes session sharing.
-    // Sharing remains disabled until the current API exposes it.
-    return []
-    /*
-    return [
-      sessionCommand({
-        id: "session.share",
-        title: actions.session.data.info()?.share?.url
-          ? language.t("session.share.copy.copyLink")
-          : language.t("command.session.share"),
-        description: actions.session.data.info()?.share?.url
-          ? language.t("toast.session.share.success.description")
-          : language.t("command.session.share.description"),
-        slash: "share",
-        disabled: !actions.session.identity.params.id,
-        onSelect: share,
-      }),
-      sessionCommand({
-        id: "session.unshare",
-        title: language.t("command.session.unshare"),
-        description: language.t("command.session.unshare.description"),
-        slash: "unshare",
-        disabled: !actions.session.identity.params.id || !actions.session.data.info()?.share?.url,
-        onSelect: unshare,
-      }),
-    ]
-    */
-  }
-
   const sessionCmds = () => [
     sessionCommand({
       id: "session.new",
@@ -594,7 +488,6 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
 
   command.register("session", () => [
     ...sessionCmds(),
-    ...shareCmds(),
     ...fileCmds(),
     ...contextCmds(),
     ...viewCmds(),
diff --git a/packages/app/src/session/composer/active-session.tsx b/packages/app/src/session/composer/active-session.tsx
new file mode 100644
index 00000000000..39f0df3a563
--- /dev/null
+++ b/packages/app/src/session/composer/active-session.tsx
@@ -0,0 +1,416 @@
+import type { SessionUserActions } from "@opencode-ai/session-ui/message"
+import { SessionMessage } from "@opencode-ai/schema/session-message"
+import { getFilename } from "@opencode-ai/util/path"
+import { useDialog } from "@opencode-ai/ui/context/dialog"
+import { isScrollKeyTarget, scrollKey, scrollKeyOwner } from "@opencode-ai/ui/scroll-view"
+import { useMutation } from "@tanstack/solid-query"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import { useNavigate, useSearchParams } from "@solidjs/router"
+import { createEffect, createMemo, on, onMount, Show, untrack, type Accessor } from "solid-js"
+import { createStore } from "solid-js/store"
+import { PromptInputV2Composer, usePromptInputV2Controller } from "@/components/prompt-input-v2"
+import { setCursorPosition } from "@/components/prompt-input/editor-dom"
+import { promptLength } from "@/components/prompt-input/history"
+import type { FollowupDraft } from "@/components/prompt-input/submit"
+import { useComments } from "@/context/comments"
+import { useCommand } from "@/context/command"
+import { useLanguage } from "@/context/language"
+import { useLocal } from "@/context/local"
+import { usePlatform } from "@/context/platform"
+import { usePrompt } from "@/context/prompt"
+import { useWorkspaceLocation } from "@/context/location"
+import { useServerSDK } from "@/context/server-sdk"
+import { useComposerCommands } from "../commands/use-composer-commands"
+import { useSessionCommands } from "../commands/use-session-commands"
+import type { SessionModel } from "../model"
+import type { SessionScreenLayout } from "../screen-layout"
+import { restorePromptModel, syncPromptModel, syncSessionModel } from "../session-model-helpers"
+import type { SessionTimelineInteraction } from "../timeline/interaction"
+import { Persist, persisted } from "@/utils/persist"
+import { requireServerKey, sessionHref } from "@/utils/session-route"
+import {
+  createPromptInputController,
+  createSessionComposerController,
+  createSessionComposerRegionController,
+  SessionComposerRegion,
+} from "./index"
+
+type FollowupItem = FollowupDraft & { id: string }
+type FollowupEdit = Pick<FollowupItem, "id" | "prompt" | "context">
+const emptyFollowups: FollowupItem[] = []
+
+export function createActiveSessionComposer(input: {
+  session: SessionModel
+  screen: SessionScreenLayout
+  timeline: SessionTimelineInteraction
+  deferRender: Accessor<boolean>
+}) {
+  const comments = useComments()
+  const command = useCommand()
+  const dialog = useDialog()
+  const language = useLanguage()
+  const local = useLocal()
+  const location = useWorkspaceLocation()
+  const navigate = useNavigate()
+  const platform = usePlatform()
+  const prompt = usePrompt()
+  const server = useServerSDK()
+  const [searchParams, setSearchParams] = useSearchParams<{ prompt?: string }>()
+  const state = createSessionComposerController()
+  const controls = createPromptInputController({
+    sessionKey: input.session.identity.sessionKey,
+    sessionID: () => input.session.identity.params.id,
+  })
+  const [view, setView] = createStore({ newSessionWorktree: "main" })
+  const [followup, setFollowup] = persisted(
+    Persist.serverWorkspace(server.scope, location().directory, "followup"),
+    createStore<{
+      items: Record<string, FollowupItem[] | undefined>
+      failed: Record<string, string | undefined>
+      paused: Record<string, boolean | undefined>
+      edit: Record<string, FollowupEdit | undefined>
+    }>({ items: {}, failed: {}, paused: {}, edit: {} }),
+  )
+  let promptRef: HTMLDivElement | undefined
+
+  createEffect(() => {
+    if (!prompt.ready()) return
+    untrack(() => {
+      if (input.session.identity.params.id) return
+      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(
+    on(
+      () => [input.timeline.lastUserMessage(), input.session.data.info()] as const,
+      () => {
+        const message = input.timeline.lastUserMessage()
+        const info = input.session.data.info()
+        const metadata = message?.metadata
+        const agent = typeof metadata?.agent === "string" ? metadata.agent : info?.agent
+        const model = metadata?.model
+        const selected =
+          model &&
+          typeof model === "object" &&
+          !Array.isArray(model) &&
+          typeof model.providerID === "string" &&
+          typeof model.modelID === "string"
+            ? {
+                providerID: model.providerID,
+                modelID: model.modelID,
+                variant: typeof model.variant === "string" ? model.variant : undefined,
+              }
+            : info?.model
+              ? { providerID: info.model.providerID, modelID: info.model.id, variant: info.model.variant }
+              : undefined
+        if (info && agent && selected) syncSessionModel(local, { sessionID: info.id, agent, model: selected })
+      },
+    ),
+  )
+  let restoredModelSession: string | undefined
+  createEffect(() => {
+    const id = input.session.identity.params.id
+    if (!id || !prompt.ready() || !local.session.ready()) return
+    if (restoredModelSession !== id) {
+      restoredModelSession = id
+      if (restorePromptModel(local, prompt)) return
+    }
+    syncPromptModel(local, prompt)
+  })
+  createEffect(
+    on(
+      () => ({ directory: location().directory, id: input.session.identity.params.id }),
+      (next, previous) => {
+        if (!previous || (next.directory === previous.directory && next.id === previous.id)) return
+        if (previous.id && !next.id) local.session.reset()
+      },
+      { defer: true },
+    ),
+  )
+  createEffect(
+    on(
+      () => location().directory,
+      (directory) => {
+        if (directory) setView("newSessionWorktree", "main")
+      },
+      { defer: true },
+    ),
+  )
+  const newSessionWorktree = createMemo(() => {
+    if (view.newSessionWorktree === "create") return "create"
+    const project = input.session.project()
+    if (project && location().directory !== project.worktree) return location().directory
+    return "main"
+  })
+  const queuedFollowups = createMemo(() => {
+    const id = input.session.identity.params.id
+    return id ? (followup.items[id] ?? emptyFollowups) : emptyFollowups
+  })
+  const editingFollowup = createMemo<FollowupEdit | undefined>(() => {
+    const id = input.session.identity.params.id
+    return id ? followup.edit[id] : undefined
+  })
+  const followupMutation = useMutation(() => ({
+    mutationFn: async (request: { sessionID: string; id: string; manual?: boolean }) => {
+      if (!(followup.items[request.sessionID] ?? []).some((entry) => entry.id === request.id)) return
+      if (request.manual) setFollowup("paused", request.sessionID, undefined)
+      setFollowup("failed", request.sessionID, undefined)
+      // TODO: Restore queued followups once submission uses current admission APIs.
+      setFollowup("failed", request.sessionID, request.id)
+    },
+  }))
+  const followupBusy = (sessionID: string) =>
+    followupMutation.isPending && followupMutation.variables?.sessionID === sessionID
+  const sendingFollowup = createMemo<string | undefined>(() => {
+    const id = input.session.identity.params.id
+    return id && followupBusy(id) ? followupMutation.variables?.id : undefined
+  })
+  const followupText = (item: FollowupDraft) => {
+    const text = item.prompt
+      .map((part) => {
+        if (part.type === "image") return `[image:${part.filename}]`
+        if (part.type === "file") return `[file:${part.path}]`
+        if (part.type === "agent") return `@${part.name}`
+        return part.content
+      })
+      .join("")
+      .split(/\r?\n/)
+      .map((line) => line.trim())
+      .find((line) => !!line)
+    return text || `[${language.t("common.attachment")}]`
+  }
+  const sendFollowup = (sessionID: string, id: string, manual?: boolean) => {
+    if (input.session.shared.data.session.get(sessionID)?.parentID) return Promise.resolve()
+    if (!(followup.items[sessionID] ?? []).some((entry) => entry.id === id) || followupBusy(sessionID)) {
+      return Promise.resolve()
+    }
+    return followupMutation.mutateAsync({ sessionID, id, manual })
+  }
+  const editFollowup = (id: string) => {
+    const sessionID = input.session.identity.params.id
+    if (!sessionID || followupBusy(sessionID)) return
+    const item = queuedFollowups().find((entry) => entry.id === id)
+    if (!item) return
+    setFollowup("items", sessionID, (items) => (items ?? []).filter((entry) => entry.id !== id))
+    setFollowup("failed", sessionID, (value) => (value === id ? undefined : value))
+    setFollowup("edit", sessionID, { id: item.id, prompt: item.prompt, context: item.context })
+  }
+  const openAttachment: NonNullable<SessionUserActions["openAttachment"]> = (file) => {
+    const url = file.source.type === "uri" ? file.source.uri : `data:${file.mime};base64,${file.data}`
+    const download = () => {
+      const anchor = document.createElement("a")
+      anchor.href = url
+      anchor.download = getFilename(file.name) || "attachment"
+      anchor.click()
+    }
+    const path = file.name ?? ""
+    const absolute = path.startsWith("/") || path.startsWith("\\\\") || /^[a-zA-Z]:[\\/]/.test(path)
+    if (!platform.revealPath || !absolute) return download()
+    void platform.revealPath(path).then((revealed) => {
+      if (!revealed) download()
+    }, download)
+  }
+  createEffect(() => {
+    const sessionID = input.session.identity.params.id
+    const item = queuedFollowups()[0]
+    if (!sessionID || !item || followupBusy(sessionID)) return
+    if (followup.failed[sessionID] === item.id || followup.paused[sessionID]) return
+    if (input.session.data.isChild() || state.blocked() || input.session.data.working()) return
+    void sendFollowup(sessionID, item.id)
+  })
+  const focus = () => {
+    if (!input.session.data.isChild()) promptRef?.focus()
+  }
+  createEffect(
+    on(
+      () => input.session.identity.params.id,
+      (id) => {
+        if (!id) requestAnimationFrame(focus)
+      },
+    ),
+  )
+  const editable = (target: EventTarget | null | undefined) => {
+    if (!(target instanceof HTMLElement)) return false
+    return /^(INPUT|TEXTAREA|SELECT|BUTTON)$/.test(target.tagName) || target.isContentEditable
+  }
+  const activeElement = () => {
+    let current: Element | null = document.activeElement
+    while (current instanceof HTMLElement && current.shadowRoot?.activeElement)
+      current = current.shadowRoot.activeElement
+    return current instanceof HTMLElement ? current : undefined
+  }
+  const handleKeyDown = (event: KeyboardEvent) => {
+    const path = event.composedPath()
+    const target = path.find((item): item is HTMLElement => item instanceof HTMLElement)
+    const active = activeElement()
+    if (
+      path.some((item) => item instanceof HTMLElement && item.closest("[data-prevent-autofocus]") !== null) ||
+      editable(target) ||
+      (active && (active.closest("[data-prevent-autofocus]") || editable(active))) ||
+      dialog.active
+    )
+      return
+    if (active === promptRef) {
+      if (event.key === "Escape") promptRef?.blur()
+      return
+    }
+    const key = scrollKey(event)
+    if (key) {
+      const scroller = input.timeline.scroller()
+      if (!scroller || !isScrollKeyTarget(target ?? null, key)) return
+      if (scrollKeyOwner(scroller, target ?? null, key) !== scroller) return
+      input.timeline.view.markGesture(scroller)
+      return
+    }
+    if (event.key.length !== 1 || event.key === "Unidentified" || event.ctrlKey || event.metaKey) return
+    if (state.blocked() || input.session.data.isChild() || !promptRef) return
+    promptRef.focus()
+    setCursorPosition(promptRef, prompt.cursor() ?? promptLength(prompt.current()))
+  }
+  onMount(() => makeEventListener(document, "keydown", handleKeyDown))
+  useComposerCommands()
+  useSessionCommands({
+    session: input.session,
+    background: {
+      blocking: () => state.background.blocking().length > 0,
+      move: state.background.move,
+    },
+    navigateMessageByOffset: input.timeline.actions.navigateMessage,
+    setActiveMessage: input.timeline.actions.setActiveMessage,
+    focusInput: focus,
+  })
+  command.register("session-palette", () => [
+    {
+      id: "command.palette",
+      title: language.t("command.palette"),
+      hidden: true,
+      onSelect: () => command.trigger("file.open", "palette"),
+    },
+  ])
+
+  return {
+    actions: {
+      focus,
+      timeline: { revert: () => undefined, openAttachment } satisfies SessionUserActions,
+    },
+    blocked: state.blocked,
+    background: state.background,
+    newSessionWorktree,
+    queue: {
+      edit: editingFollowup,
+      enabled: () => false,
+      enqueue: (draft: FollowupDraft) => {
+        setFollowup("items", draft.sessionID, (items) => [
+          ...(items ?? []),
+          { id: SessionMessage.ID.create(), ...draft },
+        ])
+        setFollowup("failed", draft.sessionID, undefined)
+        setFollowup("paused", draft.sessionID, undefined)
+      },
+      onEditLoaded: () => {
+        const id = input.session.identity.params.id
+        if (id) setFollowup("edit", id, undefined)
+      },
+      pause: () => {
+        const id = input.session.identity.params.id
+        if (id) setFollowup("paused", id, true)
+      },
+    },
+    region: {
+      centered: input.screen.centered,
+      followup: () =>
+        input.session.identity.params.id && !input.session.data.isChild()
+          ? {
+              items: queuedFollowups().map((item) => ({ id: item.id, text: followupText(item) })),
+              sending: sendingFollowup(),
+              onSend: (id: string) => void sendFollowup(input.session.identity.params.id!, id, true),
+              onEdit: editFollowup,
+            }
+          : undefined,
+      openParent: () => {
+        const id = input.session.data.parentID()
+        if (id) navigate(sessionHref(requireServerKey(input.session.identity.params.serverKey), id))
+      },
+      prompt,
+      ready: () => !input.deferRender() && input.timeline.ready(),
+      setDockRef: input.timeline.view.setDockRef,
+      setPromptRef: (element: HTMLDivElement) => {
+        promptRef = element
+      },
+      state,
+    },
+    input: {
+      controls,
+      setPromptRef: (element: HTMLDivElement) => {
+        promptRef = element
+      },
+    },
+    resetWorktree: () => setView("newSessionWorktree", "main"),
+    submit: () => {
+      comments.clear()
+      input.timeline.actions.resume()
+    },
+    workspaceMoveEligible: createMemo(() => {
+      const id = input.session.identity.params.id
+      if (!id) return false
+      return (
+        (followup.items[id]?.length ?? 0) === 0 && !followup.failed[id] && !followup.paused[id] && !followup.edit[id]
+      )
+    }),
+  }
+}
+
+export type ActiveSessionComposerModel = ReturnType<typeof createActiveSessionComposer>
+
+export function ActiveSessionComposer(props: {
+  model: ActiveSessionComposerModel
+  session: SessionModel
+  accentSubmit: boolean
+  onResponseSubmit: () => void
+}) {
+  const region = createSessionComposerRegionController({
+    state: props.model.region.state,
+    sessionKey: props.session.identity.sessionKey,
+    sessionID: () => props.session.identity.params.id,
+    prompt: props.model.region.prompt,
+    ready: props.model.region.ready,
+    centered: props.model.region.centered,
+    followup: props.model.region.followup,
+    revert: () => undefined,
+    onResponseSubmit: props.onResponseSubmit,
+    openParent: props.model.region.openParent,
+    setPromptRef: props.model.region.setPromptRef,
+    setDockRef: props.model.region.setDockRef,
+  })
+  const promptInput = usePromptInputV2Controller({
+    get controls() {
+      return props.model.input.controls()
+    },
+    ref: props.model.input.setPromptRef,
+    get newSessionWorktree() {
+      return props.model.newSessionWorktree()
+    },
+    onNewSessionWorktreeReset: props.model.resetWorktree,
+    onSubmit: props.model.submit,
+    get edit() {
+      return props.model.queue.edit()
+    },
+    onEditLoaded: props.model.queue.onEditLoaded,
+    shouldQueue: props.model.queue.enabled,
+    onQueue: props.model.queue.enqueue,
+    onAbort: props.model.queue.pause,
+  })
+  return (
+    <Show when={props.session.identity.params.id}>
+      <SessionComposerRegion
+        controller={region}
+        promptInput={
+          <PromptInputV2Composer controller={promptInput} borderUnderlay accentSubmit={props.accentSubmit} />
+        }
+      />
+    </Show>
+  )
+}
diff --git a/packages/app/src/pages/session/composer/index.ts b/packages/app/src/session/composer/index.ts
similarity index 100%
rename from packages/app/src/pages/session/composer/index.ts
rename to packages/app/src/session/composer/index.ts
diff --git a/packages/app/src/pages/session/composer/prompt-model-selection.ts b/packages/app/src/session/composer/prompt-model-selection.ts
similarity index 100%
rename from packages/app/src/pages/session/composer/prompt-model-selection.ts
rename to packages/app/src/session/composer/prompt-model-selection.ts
diff --git a/packages/app/src/pages/session/composer/session-composer-controls.ts b/packages/app/src/session/composer/session-composer-controls.ts
similarity index 98%
rename from packages/app/src/pages/session/composer/session-composer-controls.ts
rename to packages/app/src/session/composer/session-composer-controls.ts
index c98c4ecbcef..a43de2ce6c3 100644
--- a/packages/app/src/pages/session/composer/session-composer-controls.ts
+++ b/packages/app/src/session/composer/session-composer-controls.ts
@@ -1,4 +1,3 @@
-import { useNavigate, useSearchParams } from "@solidjs/router"
 import { type Accessor, createMemo } from "solid-js"
 import type { PromptInputControls } from "@/components/prompt-input/contracts"
 import type { PromptProjectControls } from "@/components/prompt-project-selector"
diff --git a/packages/app/src/pages/session/composer/session-composer-pullout.tsx b/packages/app/src/session/composer/session-composer-pullout.tsx
similarity index 100%
rename from packages/app/src/pages/session/composer/session-composer-pullout.tsx
rename to packages/app/src/session/composer/session-composer-pullout.tsx
diff --git a/packages/app/src/pages/session/composer/session-composer-region-controller.ts b/packages/app/src/session/composer/session-composer-region-controller.ts
similarity index 97%
rename from packages/app/src/pages/session/composer/session-composer-region-controller.ts
rename to packages/app/src/session/composer/session-composer-region-controller.ts
index 1107313eab5..15fcba485d9 100644
--- a/packages/app/src/pages/session/composer/session-composer-region-controller.ts
+++ b/packages/app/src/session/composer/session-composer-region-controller.ts
@@ -1,7 +1,7 @@
 import { type Accessor, createEffect, createMemo, createResource } from "solid-js"
 import type { PromptInputState } from "@/components/prompt-input"
 import { useData } from "@/context/server"
-import { getSessionHandoff, setSessionHandoff } from "@/pages/session/handoff"
+import { getSessionHandoff, setSessionHandoff } from "@/session/handoff"
 import type { SessionComposerController } from "./session-composer-state"
 
 export type SessionComposerFollowupDock = {
diff --git a/packages/app/src/pages/session/composer/session-composer-region.tsx b/packages/app/src/session/composer/session-composer-region.tsx
similarity index 93%
rename from packages/app/src/pages/session/composer/session-composer-region.tsx
rename to packages/app/src/session/composer/session-composer-region.tsx
index c183b6c6fb7..e87fe03340c 100644
--- a/packages/app/src/pages/session/composer/session-composer-region.tsx
+++ b/packages/app/src/session/composer/session-composer-region.tsx
@@ -1,10 +1,10 @@
 import { Show, type JSX } from "solid-js"
 import { useLanguage } from "@/context/language"
-import { SessionPermissionDock } from "@/pages/session/composer/session-permission-dock"
-import { SessionQuestionDock } from "@/pages/session/composer/session-question-dock"
-import { SessionFollowupDock } from "@/pages/session/composer/session-followup-dock"
-import { SessionRevertDock } from "@/pages/session/composer/session-revert-dock"
-import { SessionBackgroundDock } from "@/pages/session/composer/session-background-dock"
+import { SessionPermissionDock } from "@/session/requests/session-permission-dock"
+import { SessionQuestionDock } from "@/session/requests/session-question-dock"
+import { SessionFollowupDock } from "@/session/composer/session-followup-dock"
+import { SessionRevertDock } from "@/session/composer/session-revert-dock"
+import { SessionBackgroundDock } from "@/session/requests/session-background-dock"
 import type { SessionComposerRegionController } from "./session-composer-region-controller"
 
 type SessionComposerRegionState = Pick<
diff --git a/packages/app/src/pages/session/composer/session-composer-state.test.ts b/packages/app/src/session/composer/session-composer-state.test.ts
similarity index 97%
rename from packages/app/src/pages/session/composer/session-composer-state.test.ts
rename to packages/app/src/session/composer/session-composer-state.test.ts
index aceb0daa699..fc0c3ebee7d 100644
--- a/packages/app/src/pages/session/composer/session-composer-state.test.ts
+++ b/packages/app/src/session/composer/session-composer-state.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test"
 import type { FormInfo, PermissionRequest, SessionInfo } from "@opencode-ai/client/promise"
-import { sessionPermissionRequest, sessionQuestionForm } from "./session-request-tree"
+import { sessionPermissionRequest, sessionQuestionForm } from "@/session/requests/session-request-tree"
 
 const session = (input: { id: string; parentID?: string }) =>
   ({
diff --git a/packages/app/src/pages/session/composer/session-composer-state.ts b/packages/app/src/session/composer/session-composer-state.ts
similarity index 98%
rename from packages/app/src/pages/session/composer/session-composer-state.ts
rename to packages/app/src/session/composer/session-composer-state.ts
index 1e792d9561e..ef60b75c5e4 100644
--- a/packages/app/src/pages/session/composer/session-composer-state.ts
+++ b/packages/app/src/session/composer/session-composer-state.ts
@@ -7,11 +7,9 @@ import { useServerSDK } from "@/context/server-sdk"
 import { useLanguage } from "@/context/language"
 import { usePermission } from "@/context/permission"
 import { useWorkspaceLocation } from "@/context/location"
-import { sessionPermissionRequest, sessionQuestionForm } from "./session-request-tree"
+import { sessionPermissionRequest, sessionQuestionForm } from "@/session/requests/session-request-tree"
 import { useData } from "@/context/server"
 
-const idle = { type: "idle" as const }
-
 export function createSessionComposerController() {
   const params = useParams()
   const sdk = useWorkspaceLocation()
diff --git a/packages/app/src/pages/session/composer/session-followup-dock.tsx b/packages/app/src/session/composer/session-followup-dock.tsx
similarity index 100%
rename from packages/app/src/pages/session/composer/session-followup-dock.tsx
rename to packages/app/src/session/composer/session-followup-dock.tsx
diff --git a/packages/app/src/components/session/session-new-view.tsx b/packages/app/src/session/composer/session-new-view.tsx
similarity index 100%
rename from packages/app/src/components/session/session-new-view.tsx
rename to packages/app/src/session/composer/session-new-view.tsx
diff --git a/packages/app/src/pages/session/composer/session-revert-dock.stories.tsx b/packages/app/src/session/composer/session-revert-dock.stories.tsx
similarity index 95%
rename from packages/app/src/pages/session/composer/session-revert-dock.stories.tsx
rename to packages/app/src/session/composer/session-revert-dock.stories.tsx
index 97ee84163f6..d0da0675f7d 100644
--- a/packages/app/src/pages/session/composer/session-revert-dock.stories.tsx
+++ b/packages/app/src/session/composer/session-revert-dock.stories.tsx
@@ -1,7 +1,7 @@
 import { For } from "solid-js"
 import { createStore } from "solid-js/store"
 import { DockShell } from "@opencode-ai/ui/dock-surface"
-import { SessionRevertDock } from "@/pages/session/composer/session-revert-dock"
+import { SessionRevertDock } from "@/session/composer/session-revert-dock"
 import { SettingsProvider } from "@/context/settings"
 
 export default {
@@ -15,7 +15,7 @@ export default {
 Real \`SessionRevertDock\` from app code, rendered above a mock composer card.
 
 ### Source path
-- \`packages/app/src/pages/session/composer/session-revert-dock.tsx\`
+- \`packages/app/src/session/composer/session-revert-dock.tsx\`
 
 ### Why the mock composer
 The live composer overlaps the dock's bottom by 18px (\`session-composer-region-controller.ts\` \`lift()\`).
diff --git a/packages/app/src/pages/session/composer/session-revert-dock.tsx b/packages/app/src/session/composer/session-revert-dock.tsx
similarity index 100%
rename from packages/app/src/pages/session/composer/session-revert-dock.tsx
rename to packages/app/src/session/composer/session-revert-dock.tsx
diff --git a/packages/app/src/pages/session/file-tab-scroll.test.ts b/packages/app/src/session/files/file-tab-scroll.test.ts
similarity index 100%
rename from packages/app/src/pages/session/file-tab-scroll.test.ts
rename to packages/app/src/session/files/file-tab-scroll.test.ts
diff --git a/packages/app/src/pages/session/file-tab-scroll.ts b/packages/app/src/session/files/file-tab-scroll.ts
similarity index 100%
rename from packages/app/src/pages/session/file-tab-scroll.ts
rename to packages/app/src/session/files/file-tab-scroll.ts
diff --git a/packages/app/src/pages/session/file-tabs.tsx b/packages/app/src/session/files/file-tabs.tsx
similarity index 98%
rename from packages/app/src/pages/session/file-tabs.tsx
rename to packages/app/src/session/files/file-tabs.tsx
index 35d1ab3c2b5..7578861bd93 100644
--- a/packages/app/src/pages/session/file-tabs.tsx
+++ b/packages/app/src/session/files/file-tabs.tsx
@@ -1,4 +1,4 @@
-import { createEffect, createMemo, createSignal, Match, on, onCleanup, Show, Switch } from "solid-js"
+import { createEffect, createMemo, createSignal, Match, on, onCleanup, Switch } from "solid-js"
 import { createStore } from "solid-js/store"
 import { Dynamic } from "solid-js/web"
 import { makeEventListener } from "@solid-primitives/event-listener"
@@ -16,9 +16,9 @@ import { selectionFromLines, useFile, type FileSelection, type SelectedLineRange
 import { useComments } from "@/context/comments"
 import { useLanguage } from "@/context/language"
 import { usePrompt } from "@/context/prompt"
-import { getSessionHandoff } from "@/pages/session/handoff"
-import { useSessionLayout } from "@/pages/session/session-layout"
-import { createSessionTabs } from "@/pages/session/helpers"
+import { getSessionHandoff } from "@/session/handoff"
+import { useSessionLayout } from "@/session/session-layout"
+import { createSessionTabs } from "@/session/helpers"
 
 type SessionFileViewProps = {
   tab: string
@@ -452,7 +452,7 @@ export function SessionFileView(props: SessionFileViewProps) {
 
   const content = () => (
     <div class="mt-3 relative h-full min-h-0">
-      <ScrollView class="h-full" viewportRef={scrollSync.setViewport} onScroll={scrollSync.handleScroll as any}>
+      <ScrollView class="h-full" viewportRef={scrollSync.setViewport} onScroll={scrollSync.handleScroll}>
         <Switch>
           <Match when={state()?.loaded}>{renderFile(contents())}</Match>
           <Match when={state()?.loading}>
diff --git a/packages/app/src/pages/session/v2/session-file-list-v2.tsx b/packages/app/src/session/files/list.tsx
similarity index 98%
rename from packages/app/src/pages/session/v2/session-file-list-v2.tsx
rename to packages/app/src/session/files/list.tsx
index 263e666b875..48906a4be94 100644
--- a/packages/app/src/pages/session/v2/session-file-list-v2.tsx
+++ b/packages/app/src/session/files/list.tsx
@@ -3,7 +3,7 @@ import "@opencode-ai/ui/file-tree.css"
 import { getDirectory, getFilename } from "@opencode-ai/util/path"
 import { createEffect, createMemo, createSignal, For, Show } from "solid-js"
 import { kindChange, kindLabel, type Kind } from "@/components/file-tree-v2"
-import { normalizePath } from "@/pages/session/v2/review-diff-kinds"
+import { normalizePath } from "@/session/review/review-diff-kinds"
 import { createVirtualizer, defaultRangeExtractor } from "@tanstack/solid-virtual"
 import { virtualScrollElement } from "@/components/virtual-scroll-element"
 
@@ -38,7 +38,7 @@ export function applyFileListKeyDown(
 // row data-slots on purpose so file-tree-v2.css styles both. data-highlighted has
 // no CSS of its own — it folds into data-selected below and only exists as the
 // scrollIntoView query hook.
-export function SessionFileListV2(props: {
+export function SessionFileList(props: {
   files: readonly string[]
   active?: string
   highlighted?: string
diff --git a/packages/app/src/components/session/open-in-app-v2.tsx b/packages/app/src/session/files/open-in-app-button.tsx
similarity index 96%
rename from packages/app/src/components/session/open-in-app-v2.tsx
rename to packages/app/src/session/files/open-in-app-button.tsx
index 79337673745..3e02c8fe6a0 100644
--- a/packages/app/src/components/session/open-in-app-v2.tsx
+++ b/packages/app/src/session/files/open-in-app-button.tsx
@@ -6,9 +6,9 @@ import { Menu } from "@opencode-ai/ui/menu"
 import { SplitButton, SplitButtonAction, SplitButtonMenuTrigger } from "@opencode-ai/ui/split-button"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 import { useLanguage } from "@/context/language"
-import { type OpenApp, useOpenInApp } from "@/components/session/open-in-app"
+import { type OpenApp, useOpenInApp } from "@/session/files/open-in-app"
 
-export function OpenInAppV2(props: { directory: () => string }) {
+export function OpenInAppButton(props: { directory: () => string }) {
   const language = useLanguage()
   const state = useOpenInApp(props)
 
diff --git a/packages/app/src/components/session/open-in-app.tsx b/packages/app/src/session/files/open-in-app.tsx
similarity index 100%
rename from packages/app/src/components/session/open-in-app.tsx
rename to packages/app/src/session/files/open-in-app.tsx
diff --git a/packages/app/src/components/session/session-context-format.ts b/packages/app/src/session/files/session-context-format.ts
similarity index 100%
rename from packages/app/src/components/session/session-context-format.ts
rename to packages/app/src/session/files/session-context-format.ts
diff --git a/packages/app/src/components/session/session-context-tab.tsx b/packages/app/src/session/files/session-context-tab.tsx
similarity index 99%
rename from packages/app/src/components/session/session-context-tab.tsx
rename to packages/app/src/session/files/session-context-tab.tsx
index c1ed1e45be6..231439bab1b 100644
--- a/packages/app/src/components/session/session-context-tab.tsx
+++ b/packages/app/src/session/files/session-context-tab.tsx
@@ -17,7 +17,7 @@ import { useLanguage } from "@/context/language"
 import { useProviders } from "@/hooks/use-providers"
 import { useWorkspaceLocation } from "@/context/location"
 import { useServerSDK } from "@/context/server-sdk"
-import { useSessionLayout } from "@/pages/session/session-layout"
+import { useSessionLayout } from "@/session/session-layout"
 import { createSessionContextFormatter } from "./session-context-format"
 
 function Stat(props: { label: string; value: JSX.Element }) {
diff --git a/packages/app/src/pages/session/v2/session-file-browser-tab.tsx b/packages/app/src/session/files/session-file-browser-tab.tsx
similarity index 95%
rename from packages/app/src/pages/session/v2/session-file-browser-tab.tsx
rename to packages/app/src/session/files/session-file-browser-tab.tsx
index 5e528d9c8ce..5e626b454ff 100644
--- a/packages/app/src/pages/session/v2/session-file-browser-tab.tsx
+++ b/packages/app/src/session/files/session-file-browser-tab.tsx
@@ -6,13 +6,12 @@ import { SessionReviewV2Sidebar } from "@opencode-ai/session-ui/v2/session-revie
 import FileTreeV2, { type Kind } from "@/components/file-tree-v2"
 import { useFile } from "@/context/file"
 import { useLanguage } from "@/context/language"
-import { useLayout } from "@/context/layout"
 import { useWorkspaceLocation } from "@/context/location"
 import { useServerSDK } from "@/context/server-sdk"
 import { displayName } from "@/pages/layout/helpers"
-import { useSessionLayout } from "@/pages/session/session-layout"
-import { SessionFileView } from "@/pages/session/file-tabs"
-import { applyFileListKeyDown, SessionFileListV2 } from "@/pages/session/v2/session-file-list-v2"
+import { useSessionLayout } from "@/session/session-layout"
+import { SessionFileView } from "@/session/files/file-tabs"
+import { applyFileListKeyDown, SessionFileList } from "@/session/files/list"
 import { pathKey } from "@/utils/path-key"
 import { useServer } from "@/context/server"
 
@@ -38,7 +37,6 @@ export function SessionFileBrowserTab(props: {
 }) {
   const file = useFile()
   const language = useLanguage()
-  const layout = useLayout()
   const sdk = useWorkspaceLocation()
   const server = useServer()
   const serverSDK = useServerSDK()
@@ -143,7 +141,7 @@ export function SessionFileBrowserTab(props: {
                   </div>
                 }
               >
-                <SessionFileListV2
+                <SessionFileList
                   id={resultsID}
                   role="listbox"
                   optionID={optionID}
diff --git a/packages/app/src/pages/session/session-side-panel.tsx b/packages/app/src/session/files/session-side-panel.tsx
similarity index 96%
rename from packages/app/src/pages/session/session-side-panel.tsx
rename to packages/app/src/session/files/session-side-panel.tsx
index 097a501d1a7..ad517f5e354 100644
--- a/packages/app/src/pages/session/session-side-panel.tsx
+++ b/packages/app/src/session/files/session-side-panel.tsx
@@ -1,6 +1,6 @@
 import { For, Match, Show, Switch, createEffect, createMemo, onCleanup, type JSX } from "solid-js"
 import { createMediaQuery } from "@solid-primitives/media"
-import { DragDropProvider as DndKitProvider, PointerSensor } from "@dnd-kit/solid"
+import { DragDropProvider, PointerSensor } from "@dnd-kit/solid"
 import { isSortable } from "@dnd-kit/solid/sortable"
 import { Accessibility, AutoScroller, Feedback, PointerActivationConstraints } from "@dnd-kit/dom"
 import { RestrictToHorizontalAxis } from "@dnd-kit/abstract/modifiers"
@@ -16,30 +16,31 @@ import type { FileDiffInfo } from "@opencode-ai/client/promise"
 
 import FileTree from "@/components/file-tree"
 import { normalizeFileTreeV2Path } from "@/components/file-tree-v2-model"
-import { SessionContextUsage } from "@/components/session-context-usage"
+import { SessionContextUsage } from "@/session/timeline/session-context-usage"
 
 const reviewTabID = "session-side-panel-review-tab"
 const reviewTabPanelID = "session-side-panel-review-tabpanel"
 const fileBrowserTabPanelID = "session-side-panel-file-browser-tabpanel"
-import { SessionContextTab, SortableTabV2 } from "@/components/session"
-import { OpenInAppV2 } from "@/components/session/open-in-app-v2"
+import { SessionContextTab } from "@/session/files/session-context-tab"
+import { SortableTab } from "@/session/files/tab"
+import { OpenInAppButton } from "@/session/files/open-in-app-button"
 import { useCommand } from "@/context/command"
 import { useFile, type SelectedLineRange } from "@/context/file"
 import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
 import { useWorkspaceLocation } from "@/context/location"
 import { useSettings } from "@/context/settings"
-import { createFileTabListSync } from "@/pages/session/file-tab-scroll"
+import { createFileTabListSync } from "@/session/files/file-tab-scroll"
 import {
   SESSION_OPEN_FILE_TAB,
   createOpenSessionFileTab,
   createSessionTabs,
   shouldShowFileTree,
   type Sizing,
-} from "@/pages/session/helpers"
-import { setSessionHandoff } from "@/pages/session/handoff"
-import { useSessionLayout } from "@/pages/session/session-layout"
-import { SessionFileBrowserTab, type SessionFileBrowserState } from "@/pages/session/v2/session-file-browser-tab"
+} from "@/session/helpers"
+import { setSessionHandoff } from "@/session/handoff"
+import { useSessionLayout } from "@/session/session-layout"
+import { SessionFileBrowserTab, type SessionFileBrowserState } from "@/session/files/session-file-browser-tab"
 
 type ReviewDiff = FileDiffInfo
 type RenderDiff = FileDiffInfo
@@ -261,7 +262,7 @@ export function SessionSidePanel(props: {
             <Show when={reviewOpen()}>
               <div class="relative min-w-0 h-full flex-1 overflow-hidden bg-v2-background-bg-base">
                 <div class="size-full min-w-0 h-full bg-v2-background-bg-base">
-                  <DndKitProvider
+                  <DragDropProvider
                     sensors={[
                       PointerSensor.configure({
                         activationConstraints: [new PointerActivationConstraints.Distance({ value: 4 })],
@@ -345,7 +346,7 @@ export function SessionSidePanel(props: {
                               <Show
                                 when={tab === SESSION_OPEN_FILE_TAB}
                                 fallback={
-                                  <SortableTabV2
+                                  <SortableTab
                                     tab={tab}
                                     index={tabs().all().indexOf(tab)}
                                     temporary={temporaryTab() === tab}
@@ -414,7 +415,7 @@ export function SessionSidePanel(props: {
                           onPointerDown={(event) => event.stopPropagation()}
                           onClick={(event) => event.stopPropagation()}
                         >
-                          <OpenInAppV2 directory={projectDirectory} />
+                          <OpenInAppButton directory={projectDirectory} />
                         </div>
                       </div>
 
@@ -476,7 +477,7 @@ export function SessionSidePanel(props: {
                         </div>
                       </Show>
                     </Tabs>
-                  </DndKitProvider>
+                  </DragDropProvider>
                 </div>
               </div>
             </Show>
diff --git a/packages/app/src/components/session/session-sortable-tab.tsx b/packages/app/src/session/files/session-sortable-tab.tsx
similarity index 100%
rename from packages/app/src/components/session/session-sortable-tab.tsx
rename to packages/app/src/session/files/session-sortable-tab.tsx
diff --git a/packages/app/src/components/session/session-sortable-tab-v2.tsx b/packages/app/src/session/files/tab.tsx
similarity index 98%
rename from packages/app/src/components/session/session-sortable-tab-v2.tsx
rename to packages/app/src/session/files/tab.tsx
index edf1e55ecdb..42434e8852a 100644
--- a/packages/app/src/components/session/session-sortable-tab-v2.tsx
+++ b/packages/app/src/session/files/tab.tsx
@@ -9,7 +9,7 @@ import { useLanguage } from "@/context/language"
 import { useCommand } from "@/context/command"
 import { FileVisual } from "./session-sortable-tab"
 
-export function SortableTabV2(props: {
+export function SortableTab(props: {
   tab: string
   index: number
   temporary?: boolean
diff --git a/packages/app/src/pages/session/handoff.ts b/packages/app/src/session/handoff.ts
similarity index 100%
rename from packages/app/src/pages/session/handoff.ts
rename to packages/app/src/session/handoff.ts
diff --git a/packages/app/src/components/session/session-header-actions.tsx b/packages/app/src/session/header/session-header-actions.tsx
similarity index 92%
rename from packages/app/src/components/session/session-header-actions.tsx
rename to packages/app/src/session/header/session-header-actions.tsx
index 25f1a0d4c4c..fae5c64b921 100644
--- a/packages/app/src/components/session/session-header-actions.tsx
+++ b/packages/app/src/session/header/session-header-actions.tsx
@@ -4,7 +4,7 @@ import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Keybind } from "@opencode-ai/ui/keybind"
 import { Tooltip } from "@opencode-ai/ui/tooltip"
 
-export type SessionHeaderV2ActionsState = {
+export type SessionHeaderActionsState = {
   status?: { label: string; content: () => JSX.Element }
   reviewLabel: string
   reviewKeybind: string[]
@@ -13,7 +13,7 @@ export type SessionHeaderV2ActionsState = {
   onReviewToggle: () => void
 }
 
-export function SessionHeaderV2Actions(props: { state: SessionHeaderV2ActionsState }) {
+export function SessionHeaderActions(props: { state: SessionHeaderActionsState }) {
   return (
     <div class="flex items-center gap-2">
       <Show when={props.state.status}>
diff --git a/packages/app/src/components/session/session-header.tsx b/packages/app/src/session/header/session-header.tsx
similarity index 70%
rename from packages/app/src/components/session/session-header.tsx
rename to packages/app/src/session/header/session-header.tsx
index 8c36334e7dc..a1adee10e2b 100644
--- a/packages/app/src/components/session/session-header.tsx
+++ b/packages/app/src/session/header/session-header.tsx
@@ -4,11 +4,11 @@ import { Portal } from "solid-js/web"
 import { useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
-import { useSessionLayout } from "@/pages/session/session-layout"
-import { StatusPopoverV2 } from "../status-popover"
-import { reviewTooltipKeybind } from "../command-tooltip-keybind"
-import { useTitlebarRightMount } from "../titlebar"
-import { SessionHeaderV2Actions, type SessionHeaderV2ActionsState } from "./session-header-actions"
+import { useSessionLayout } from "@/session/session-layout"
+import { reviewTooltipKeybind } from "@/components/command-tooltip-keybind"
+import { StatusPopoverV2 } from "@/components/status-popover"
+import { useTitlebarRightMount } from "@/components/titlebar"
+import { SessionHeaderActions, type SessionHeaderActionsState } from "./session-header-actions"
 
 export function SessionHeader() {
   const command = useCommand()
@@ -19,7 +19,7 @@ export function SessionHeader() {
   const status = settings.visibility.status
   const isDesktop = createMediaQuery("(min-width: 768px)")
 
-  const v2ActionsState = createMemo<SessionHeaderV2ActionsState>(() => ({
+  const actions = createMemo<SessionHeaderActionsState>(() => ({
     status: status() ? { label: language.t("status.popover.trigger"), content: () => <StatusPopoverV2 /> } : undefined,
     reviewLabel: language.t("command.review.toggle"),
     reviewKeybind: reviewTooltipKeybind(command),
@@ -34,7 +34,7 @@ export function SessionHeader() {
     <Show when={rightMount()} keyed>
       {(mount) => (
         <Portal mount={mount}>
-          <SessionHeaderV2Actions state={v2ActionsState()} />
+          <SessionHeaderActions state={actions()} />
         </Portal>
       )}
     </Show>
diff --git a/packages/app/src/pages/session/helpers.test.ts b/packages/app/src/session/helpers.test.ts
similarity index 100%
rename from packages/app/src/pages/session/helpers.test.ts
rename to packages/app/src/session/helpers.test.ts
diff --git a/packages/app/src/pages/session/helpers.ts b/packages/app/src/session/helpers.ts
similarity index 99%
rename from packages/app/src/pages/session/helpers.ts
rename to packages/app/src/session/helpers.ts
index 6e86050ef68..d74d8aaaa0a 100644
--- a/packages/app/src/pages/session/helpers.ts
+++ b/packages/app/src/session/helpers.ts
@@ -119,7 +119,7 @@ export const createOpenReviewFile = (input: {
   tabForPath: (path: string) => string
   openTab: (tab: string) => void
   setActive: (tab: string) => void
-  loadFile: (path: string) => any | Promise<void>
+  loadFile: (path: string) => unknown
 }) => {
   return (path: string) => {
     batch(() => {
diff --git a/packages/app/src/pages/session/message-gesture.test.ts b/packages/app/src/session/message-gesture.test.ts
similarity index 100%
rename from packages/app/src/pages/session/message-gesture.test.ts
rename to packages/app/src/session/message-gesture.test.ts
diff --git a/packages/app/src/pages/session/message-gesture.ts b/packages/app/src/session/message-gesture.ts
similarity index 100%
rename from packages/app/src/pages/session/message-gesture.ts
rename to packages/app/src/session/message-gesture.ts
diff --git a/packages/app/src/pages/session/message-id-from-hash.ts b/packages/app/src/session/message-id-from-hash.ts
similarity index 100%
rename from packages/app/src/pages/session/message-id-from-hash.ts
rename to packages/app/src/session/message-id-from-hash.ts
diff --git a/packages/app/src/pages/session/session-controller.test.ts b/packages/app/src/session/model.test.ts
similarity index 100%
rename from packages/app/src/pages/session/session-controller.test.ts
rename to packages/app/src/session/model.test.ts
diff --git a/packages/app/src/pages/session/session-controller.ts b/packages/app/src/session/model.ts
similarity index 69%
rename from packages/app/src/pages/session/session-controller.ts
rename to packages/app/src/session/model.ts
index 87d3f53549d..32e857dc3a5 100644
--- a/packages/app/src/pages/session/session-controller.ts
+++ b/packages/app/src/session/model.ts
@@ -1,8 +1,11 @@
 import type { SessionMessageInfo, SessionMessageUser } from "@opencode-ai/client/promise"
-import { createMemo, type Accessor } from "solid-js"
+import { createMediaQuery } from "@solid-primitives/media"
+import { createMemo } from "solid-js"
 import { useFile } from "@/context/file"
+import { useWorkspaceLocation } from "@/context/location"
 import { useData } from "@/context/server"
 import { same } from "@/utils/same"
+import { containsDirectory, isWorkspaceDirectory } from "@/utils/workspace"
 import { createSessionTabs } from "./helpers"
 import {
   normalizeSessionTab,
@@ -17,14 +20,12 @@ const emptyMessages: SessionMessageInfo[] = []
 const emptyUserMessages: SessionMessageUser[] = []
 const idle = { type: "idle" as const }
 
-export function createSessionController(input: {
-  review?: Accessor<boolean>
-  hasReview?: Accessor<boolean>
-  fileBrowser?: (sessionID: string | undefined) => boolean
-}) {
+export function useSessionModel() {
   const file = useFile()
   const data = useData()
   const layout = useSessionLayout()
+  const location = useWorkspaceLocation()
+  const isDesktop = createMediaQuery("(min-width: 768px)")
   const sessionID = createMemo(() => layout.params.id)
   const info = createMemo(() => {
     const id = sessionID()
@@ -50,17 +51,34 @@ export function createSessionController(input: {
     emptyUserMessages,
     { equals: same },
   )
+  const project = createMemo(() => {
+    const current = info()
+    const value = current?.projectID
+      ? data.project.get(current.projectID)
+      : data.project.list().find((item) => containsDirectory(item.canonical, location().directory))
+    if (!value) return
+    return { ...value, worktree: value.canonical, worktrees: [] }
+  })
+  const canReview = createMemo(() => !!project())
   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,
+    review: isDesktop,
+    hasReview: canReview,
+    fileBrowser: () => isDesktop() && !!sessionID(),
   })
 
   return {
+    shared: { data },
+    project,
+    canReview,
+    isDesktop,
+    workspace: {
+      directory: createMemo(() => info()?.location.directory ?? location().directory),
+      current: createMemo(() => isWorkspaceDirectory(project(), info()?.location.directory ?? location().directory)),
+    },
     identity: {
       params: layout.params,
       sessionID,
@@ -98,4 +116,4 @@ export function createSessionController(input: {
   }
 }
 
-export type SessionController = ReturnType<typeof createSessionController>
+export type SessionModel = ReturnType<typeof useSessionModel>
diff --git a/packages/app/src/pages/session/composer/session-background-dock.tsx b/packages/app/src/session/requests/session-background-dock.tsx
similarity index 97%
rename from packages/app/src/pages/session/composer/session-background-dock.tsx
rename to packages/app/src/session/requests/session-background-dock.tsx
index 89021a35b40..cbdf6a5f8eb 100644
--- a/packages/app/src/pages/session/composer/session-background-dock.tsx
+++ b/packages/app/src/session/requests/session-background-dock.tsx
@@ -3,7 +3,7 @@ import { useCommand } from "@/context/command"
 import { Keybind } from "@opencode-ai/ui/keybind"
 import { For, createMemo } from "solid-js"
 import { createStore } from "solid-js/store"
-import { SessionComposerPullout } from "./session-composer-pullout"
+import { SessionComposerPullout } from "@/session/composer/session-composer-pullout"
 
 export function SessionBackgroundDock(props: {
   blocking: { type: "shell" | "subagent"; id?: string; label?: string }[]
diff --git a/packages/app/src/pages/session/composer/session-permission-dock.tsx b/packages/app/src/session/requests/session-permission-dock.tsx
similarity index 100%
rename from packages/app/src/pages/session/composer/session-permission-dock.tsx
rename to packages/app/src/session/requests/session-permission-dock.tsx
diff --git a/packages/app/src/pages/session/composer/session-question-dock.tsx b/packages/app/src/session/requests/session-question-dock.tsx
similarity index 100%
rename from packages/app/src/pages/session/composer/session-question-dock.tsx
rename to packages/app/src/session/requests/session-question-dock.tsx
diff --git a/packages/app/src/pages/session/composer/session-request-tree.ts b/packages/app/src/session/requests/session-request-tree.ts
similarity index 100%
rename from packages/app/src/pages/session/composer/session-request-tree.ts
rename to packages/app/src/session/requests/session-request-tree.ts
diff --git a/packages/app/src/session/review/model.ts b/packages/app/src/session/review/model.ts
new file mode 100644
index 00000000000..f0a4b3f6a02
--- /dev/null
+++ b/packages/app/src/session/review/model.ts
@@ -0,0 +1,427 @@
+import type { FileDiffInfo } from "@opencode-ai/client/promise"
+import type { SessionReviewLineComment } from "@opencode-ai/session-ui/session-review"
+import { previewSelectedLines } from "@opencode-ai/session-ui/pierre/selection-bridge"
+import { checksum } from "@opencode-ai/util/encode"
+import { createQuery, skipToken, useQueryClient } from "@tanstack/solid-query"
+import { debounce } from "@solid-primitives/scheduled"
+import { createEffect, createMemo, on, onCleanup, type Accessor } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useComments } from "@/context/comments"
+import { selectionFromLines, useFile, type FileSelection, type SelectedLineRange } from "@/context/file"
+import { useLanguage } from "@/context/language"
+import { useLayout } from "@/context/layout"
+import { usePrompt } from "@/context/prompt"
+import { useWorkspaceLocation } from "@/context/location"
+import { useServerSDK } from "@/context/server-sdk"
+import { createOpenReviewFile } from "../helpers"
+import type { SessionModel } from "../model"
+import type { SessionScreenLayout } from "../screen-layout"
+import { createReviewPanelState } from "./panel-state"
+import { reviewDiffDirectory, reviewDiffNeedsLoad, reviewRootDirectory } from "./review-diff-kinds"
+import type { DiffStyle } from "./review-tab"
+
+export type ChangeMode = "git" | "branch" | "turn"
+type VcsMode = "git" | "branch"
+
+export function createSessionReview(input: {
+  session: SessionModel
+  screen: SessionScreenLayout
+  deferRender: Accessor<boolean>
+}) {
+  const data = input.session.shared.data
+  const queryClient = useQueryClient()
+  const comments = useComments()
+  const file = useFile()
+  const language = useLanguage()
+  const layout = useLayout()
+  const prompt = usePrompt()
+  const location = useWorkspaceLocation()
+  const server = useServerSDK()
+  const [state, setState] = createStore({
+    mobileTab: "session" as "session" | "changes",
+    detailsOpen: false,
+    scroll: undefined as HTMLDivElement | undefined,
+    pendingFile: undefined as string | undefined,
+  })
+  const mode = () => input.session.layout.view().review.mode() ?? "git"
+  const selectedFile = () => input.session.layout.view().review.file()
+  createEffect(() => {
+    const tab = input.session.tabs.activeFileTab()
+    if (!tab) return
+    const path = file.pathFromTab(tab)
+    if (path) void file.load(path)
+  })
+  const vcs = createMemo(() => data.location.vcs.info({ directory: location().directory }))
+  const options = createMemo<ChangeMode[]>(() => {
+    const list: ChangeMode[] = []
+    const project = input.session.project()
+    if (project?.vcs === "git") list.push("git")
+    if (
+      project?.vcs === "git" &&
+      vcs()?.branch.current &&
+      vcs()?.branch.default &&
+      vcs()?.branch.current !== vcs()?.branch.default
+    ) {
+      list.push("branch")
+    }
+    return list
+  })
+  const mobileChanges = createMemo(() => !input.session.isDesktop() && state.mobileTab === "changes")
+  const vcsMode = createMemo<VcsMode | undefined>(() => {
+    const value = mode()
+    return value === "git" || value === "branch" ? value : undefined
+  })
+  const vcsKey = createMemo(
+    () =>
+      [
+        server.scope,
+        "session-vcs",
+        location().directory,
+        vcs()?.branch.current ?? "",
+        vcs()?.branch.default ?? "",
+      ] as const,
+  )
+  const wantsReview = createMemo(() =>
+    input.session.isDesktop()
+      ? input.screen.files.open() ||
+        (input.screen.review.open() &&
+          (input.session.tabs.activeTab() === "review" || !!input.session.tabs.activeFileTab()))
+      : mobileChanges(),
+  )
+  const vcsQuery = createQuery(() => {
+    const value = vcsMode()
+    return {
+      queryKey: [...vcsKey(), value] as const,
+      enabled: server.connection.status() === "connected" && wantsReview() && input.session.project()?.vcs === "git",
+      refetchOnMount: "always" as const,
+      refetchOnWindowFocus: true,
+      queryFn: value
+        ? () =>
+            server.api.vcs
+              .diff({
+                location: { directory: location().directory },
+                mode: value === "git" ? "working" : value,
+              })
+              .then((result) => result.data)
+        : skipToken,
+    }
+  })
+  const detailsQuery = createQuery(() => ({
+    queryKey: [server.scope, "session-details", input.session.workspace.directory()] as const,
+    enabled: state.detailsOpen && server.connection.status() === "connected" && input.session.project()?.vcs === "git",
+    queryFn: () =>
+      server.api.vcs
+        .diff({ location: { directory: input.session.workspace.directory() }, mode: "working" })
+        .then((result) => result.data)
+        .catch((error) => {
+          console.debug("[session-review] failed to load session details diff", { error })
+          return []
+        }),
+  }))
+  const refresh = debounce(() => {
+    void queryClient.invalidateQueries({ queryKey: vcsKey() })
+    void queryClient.invalidateQueries({
+      queryKey: [server.scope, "session-details", input.session.workspace.directory()],
+    })
+  }, 100)
+  onCleanup(
+    location().event.listen((event) => {
+      if (event.type === "filesystem.changed") refresh()
+    }),
+  )
+  createEffect(
+    on(
+      () => input.screen.review.open() || mobileChanges(),
+      (open, previous) => {
+        if (!open || previous || !input.screen.files.open() || vcsQuery.isFetching) return
+        refresh()
+      },
+      { defer: true },
+    ),
+  )
+  const diffs = () => {
+    if (mode() === "git" || mode() === "branch") return vcsQuery.isFetched ? (vcsQuery.data ?? []) : []
+    return []
+  }
+  const activeFile = () => {
+    const list = diffs()
+    const selected = selectedFile()
+    if (selected && list.some((diff) => diff.file === selected)) return selected
+    return list[0]?.file
+  }
+  const count = () => diffs().length
+  const hasChanges = () => count() > 0
+  const ready = () => {
+    if (mode() === "git" || mode() === "branch") return !vcsQuery.isPending
+    return true
+  }
+  const loadDiff = async (path: string, version?: number): Promise<FileDiffInfo | undefined> => {
+    const value = vcsMode()
+    if (!value) return undefined
+    const root = reviewRootDirectory(input.session.project()?.worktree ?? location().directory)
+    const directory = reviewDiffDirectory(root, path)
+    const source = diffs().find((diff) => diff.file === path)
+    const valid = (diff: FileDiffInfo | undefined): FileDiffInfo | undefined => {
+      if (!diff || !source) return undefined
+      if (diff.additions !== source.additions || diff.deletions !== source.deletions) return undefined
+      if (reviewDiffNeedsLoad(diff)) return undefined
+      return diff
+    }
+    const request = (scope: string, context?: number) =>
+      queryClient
+        .fetchQuery({
+          queryKey: [server.scope, ...vcsKey(), value, "directory", scope, context, version] as const,
+          staleTime: Number.POSITIVE_INFINITY,
+          retry: 2,
+          queryFn: () =>
+            server.api.vcs
+              .diff({
+                location: { directory: scope },
+                mode: value === "git" ? "working" : value,
+                context,
+              })
+              .then((result) => result.data),
+        })
+        .then((result) => result.find((diff) => diff.file === path))
+
+    if (directory !== root) {
+      try {
+        const scoped = valid(await request(directory))
+        if (scoped) return scoped
+      } catch (error) {
+        console.debug("[session-review] failed to load scoped vcs diff", { mode: value, path, directory, error })
+      }
+    }
+    try {
+      const bounded = valid(await request(root, 3))
+      if (bounded) return bounded
+    } catch (error) {
+      console.debug("[session-review] failed to load bounded vcs diff", { mode: value, path, root, error })
+    }
+    return undefined
+  }
+  const selectionPreview = (path: string, selection: FileSelection): string | undefined => {
+    const content = file.get(path)?.content?.content
+    if (!content) return undefined
+    return previewSelectedLines(content, { start: selection.startLine, end: selection.endLine })
+  }
+  const addComment = (comment: SessionReviewLineComment) => {
+    const selection = selectionFromLines(comment.selection)
+    const saved = comments.add({ file: comment.file, selection: comment.selection, comment: comment.comment })
+    prompt.context.add({
+      type: "file",
+      path: comment.file,
+      selection,
+      comment: comment.comment,
+      commentID: saved.id,
+      commentOrigin: "review",
+      preview: comment.preview ?? selectionPreview(comment.file, selection),
+    })
+  }
+  const updateComment = (comment: {
+    id: string
+    file: string
+    selection: SelectedLineRange
+    comment: string
+    preview?: string
+  }) => {
+    comments.update(comment.file, comment.id, comment.comment)
+    prompt.context.updateComment(comment.file, comment.id, {
+      comment: comment.comment,
+      ...(comment.preview ? { preview: comment.preview } : {}),
+    })
+  }
+  const removeComment = (comment: { id: string; file: string }) => {
+    comments.remove(comment.file, comment.id)
+    prompt.context.removeComment(comment.file, comment.id)
+  }
+  const commentActions = createMemo(() => ({
+    moreLabel: language.t("common.moreOptions"),
+    editLabel: language.t("common.edit"),
+    deleteLabel: language.t("common.delete"),
+    saveLabel: language.t("common.save"),
+  }))
+  const showAllFiles = () => {
+    if (layout.fileTree.tab() !== "changes") return
+    layout.fileTree.setTab("all")
+  }
+  const open = () => {
+    if (!input.session.layout.view().reviewPanel.opened()) input.session.layout.view().reviewPanel.open()
+  }
+  const openFile = createOpenReviewFile({
+    showAllFiles,
+    tabForPath: file.tab,
+    openTab: (tab) => input.session.layout.tabs().open(tab),
+    setActive: (tab) => input.session.layout.tabs().setActive(tab),
+    loadFile: file.load,
+  })
+  const reviewDiffId = (path: string): string | undefined => {
+    const sum = checksum(path)
+    if (!sum) return undefined
+    return `session-review-diff-${sum}`
+  }
+  const reviewDiffTop = (path: string): number | undefined => {
+    if (!state.scroll) return undefined
+    const id = reviewDiffId(path)
+    if (!id) return undefined
+    const element = document.getElementById(id)
+    if (!(element instanceof HTMLElement) || !state.scroll.contains(element)) return undefined
+    const target = element.getBoundingClientRect()
+    const root = state.scroll.getBoundingClientRect()
+    return target.top - root.top + state.scroll.scrollTop
+  }
+  const scrollToFile = (path: string) => {
+    if (!state.scroll) return false
+    const top = reviewDiffTop(path)
+    if (top === undefined) return false
+    input.session.layout.view().setScroll("review", { x: state.scroll.scrollLeft, y: top })
+    state.scroll.scrollTo({ top, behavior: "auto" })
+    return true
+  }
+  const focusFile = (path: string) => {
+    open()
+    input.session.layout.view().review.openPath(path)
+    input.session.layout.view().review.setFile(path)
+    setState("pendingFile", path)
+  }
+  createEffect(() => {
+    const pending = state.pendingFile
+    if (!pending || !state.scroll || !ready()) return
+    const attempt = (count: number) => {
+      if (state.pendingFile !== pending) return
+      if (count > 60) {
+        setState("pendingFile", undefined)
+        return
+      }
+      if (!state.scroll || !scrollToFile(pending)) {
+        requestAnimationFrame(() => attempt(count + 1))
+        return
+      }
+      const top = reviewDiffTop(pending)
+      if (top === undefined || Math.abs(state.scroll.scrollTop - top) > 1) {
+        requestAnimationFrame(() => attempt(count + 1))
+        return
+      }
+      setState("pendingFile", undefined)
+    }
+    requestAnimationFrame(() => attempt(0))
+  })
+  createEffect(
+    on(
+      input.session.tabs.activeFileTab,
+      (active) => {
+        if (!active || layout.fileTree.tab() !== "changes") return
+        showAllFiles()
+      },
+      { defer: true },
+    ),
+  )
+  let treeDirectory: string | undefined
+  createEffect(() => {
+    const directory = location().directory
+    if (!input.session.isDesktop() || !layout.fileTree.opened() || server.connection.status() !== "connected") return
+    layout.fileTree.tab()
+    const refreshTree = treeDirectory !== directory
+    treeDirectory = directory
+    void (refreshTree ? file.tree.refresh("") : file.tree.list(""))
+  })
+  createEffect(
+    on(
+      () => location().directory,
+      () => {
+        const tab = input.session.tabs.activeFileTab()
+        if (!tab) return
+        const path = file.pathFromTab(tab)
+        if (path) void file.load(path, { force: true })
+      },
+      { defer: true },
+    ),
+  )
+  createEffect(() => {
+    if (!layout.ready() || server.connection.status() !== "connected" || !input.session.project()) return
+    const list = options()
+    const value = mode()
+    if (list.includes(value)) return
+    const next = list[0]
+    if (next) input.session.layout.view().review.setMode(next)
+  })
+  createEffect(
+    on(
+      () => data.session.status(input.session.identity.params.id ?? ""),
+      (next, previous) => {
+        if (next !== "idle" || previous === undefined || previous === "idle") return
+        refresh()
+      },
+      { defer: true },
+    ),
+  )
+  createEffect(
+    on(
+      input.session.identity.sessionKey,
+      () => {
+        setState("mobileTab", "session")
+        setState("scroll", undefined)
+        setState("pendingFile", undefined)
+      },
+      { defer: true },
+    ),
+  )
+
+  const panelState = createReviewPanelState()
+  const panelRendered = createMemo<boolean>((previous) => previous || !input.deferRender(), false)
+  return {
+    activeFile,
+    canReview: input.session.canReview,
+    comments: {
+      actions: commentActions,
+      add: addComment,
+      all: comments.all,
+      focus: comments.focus,
+      mentions: file.searchFilesAndDirectories,
+      remove: removeComment,
+      changeFocus: (focus: { file: string; id: string } | null) => {
+        if (!focus) {
+          const current = comments.focus()
+          if (current && diffs().some((diff) => diff.file === current.file)) focusFile(current.file)
+        }
+        comments.setFocus(focus)
+      },
+      setFocus: comments.setFocus,
+      update: updateComment,
+    },
+    count,
+    deferRender: input.deferRender,
+    details: {
+      diffs: () => (detailsQuery.isFetched ? (detailsQuery.data ?? []) : undefined),
+      setOpen: (open: boolean) => setState("detailsOpen", open),
+    },
+    diffVersion: () => vcsQuery.dataUpdatedAt,
+    diffStyle: {
+      current: layout.review.diffStyle,
+      set: (style: DiffStyle) => layout.review.setDiffStyle(style),
+    },
+    diffs,
+    focusFile,
+    hasChanges,
+    loadDiff,
+    mobile: {
+      changes: mobileChanges,
+      setTab: (tab: "session" | "changes") => setState("mobileTab", tab),
+      tab: () => state.mobileTab,
+    },
+    mode,
+    noGit: createMemo(() => !!input.session.project() && input.session.project()?.vcs !== "git"),
+    open,
+    openFile,
+    options,
+    panelState,
+    panelRendered,
+    ready,
+    screen: input.screen,
+    setMode: (value: ChangeMode) => input.session.layout.view().review.setMode(value),
+    setScroll: (element: HTMLDivElement | undefined) => setState("scroll", element),
+    view: input.session.layout.view,
+  }
+}
+
+export type SessionReviewModel = ReturnType<typeof createSessionReview>
diff --git a/packages/app/src/pages/session/v2/review-panel-v2-state.ts b/packages/app/src/session/review/panel-state.ts
similarity index 90%
rename from packages/app/src/pages/session/v2/review-panel-v2-state.ts
rename to packages/app/src/session/review/panel-state.ts
index 587b55c7089..dc307333b15 100644
--- a/packages/app/src/pages/session/v2/review-panel-v2-state.ts
+++ b/packages/app/src/session/review/panel-state.ts
@@ -9,7 +9,7 @@ import { createStore } from "solid-js/store"
 import type { Platform } from "@/context/platform"
 import { Persist, persisted } from "@/utils/persist"
 
-export function createReviewPanelV2State(platform?: Platform) {
+export function createReviewPanelState(platform?: Platform) {
   const [store, setStore, , ready] = persisted(
     Persist.global("review-panel-v2"),
     createStore({
@@ -40,4 +40,4 @@ export function createReviewPanelV2State(platform?: Platform) {
   }
 }
 
-export type ReviewPanelV2State = ReturnType<typeof createReviewPanelV2State>
+export type ReviewPanelState = ReturnType<typeof createReviewPanelState>
diff --git a/packages/app/src/pages/session/v2/review-panel-v2.tsx b/packages/app/src/session/review/panel.tsx
similarity index 93%
rename from packages/app/src/pages/session/v2/review-panel-v2.tsx
rename to packages/app/src/session/review/panel.tsx
index 56d9b5306bf..634fb44bca1 100644
--- a/packages/app/src/pages/session/v2/review-panel-v2.tsx
+++ b/packages/app/src/session/review/panel.tsx
@@ -27,13 +27,13 @@ import {
   reviewDiffKinds,
   reviewDiffNeedsLoad,
   type RenderDiff,
-} from "@/pages/session/v2/review-diff-kinds"
-import type { ReviewPanelV2State } from "@/pages/session/v2/review-panel-v2-state"
-import { applyFileListKeyDown, SessionFileListV2 } from "@/pages/session/v2/session-file-list-v2"
+} from "@/session/review/review-diff-kinds"
+import type { ReviewPanelState } from "@/session/review/panel-state"
+import { applyFileListKeyDown, SessionFileList } from "@/session/files/list"
 
 type ReviewDiff = FileDiffInfo
 
-export type ReviewPanelV2Props = {
+export type ReviewPanelProps = {
   title?: JSX.Element
   empty?: JSX.Element
   diffs: ReviewDiff[]
@@ -44,7 +44,7 @@ export type ReviewPanelV2Props = {
   onSelectFile: (path: string) => void
   diffStyle: SessionReviewDiffStyle
   onDiffStyleChange?: (style: SessionReviewDiffStyle) => void
-  state: ReviewPanelV2State
+  state: ReviewPanelState
   onLineComment?: (comment: SessionReviewLineComment) => void
   onLineCommentUpdate?: (comment: SessionReviewCommentUpdate) => void
   onLineCommentDelete?: (comment: SessionReviewCommentDelete) => void
@@ -55,7 +55,7 @@ export type ReviewPanelV2Props = {
   fileList?: "tree" | "flat"
 }
 
-export function ReviewPanelV2(props: ReviewPanelV2Props) {
+export function ReviewPanel(props: ReviewPanelProps) {
   const sdk = useWorkspaceLocation()
   const serverSDK = useServerSDK()
   const readFile = async (path: string) =>
@@ -67,11 +67,11 @@ export function ReviewPanelV2(props: ReviewPanelV2Props) {
         return undefined
       })
 
-  return <ReviewPanelV2View {...props} readFile={readFile} />
+  return <ReviewPanelView {...props} readFile={readFile} />
 }
 
-export function ReviewPanelV2View(
-  props: ReviewPanelV2Props & {
+export function ReviewPanelView(
+  props: ReviewPanelProps & {
     readFile?: (path: string) => Promise<{ type: "text"; content: string } | undefined>
   },
 ) {
@@ -127,7 +127,7 @@ export function ReviewPanelV2View(
       sidebar={
         // Always mounted: the sidebar header hosts the changes-mode dropdown,
         // which must stay reachable when the current mode has zero diffs.
-        <ReviewPanelV2Sidebar
+        <ReviewPanelSidebar
           title={props.title}
           state={props.state}
           diffsReady={props.diffsReady}
@@ -178,9 +178,9 @@ export function ReviewPanelV2View(
   )
 }
 
-function ReviewPanelV2Sidebar(props: {
+function ReviewPanelSidebar(props: {
   title?: JSX.Element
-  state: ReviewPanelV2State
+  state: ReviewPanelState
   diffsReady: boolean
   onSelectFile: (path: string) => void
   diffs: RenderDiff[]
@@ -247,7 +247,7 @@ function ReviewPanelV2Sidebar(props: {
                 />
               }
             >
-              <SessionFileListV2
+              <SessionFileList
                 files={props.filteredFiles}
                 kinds={props.kinds}
                 active={props.activeDiff}
@@ -260,7 +260,7 @@ function ReviewPanelV2Sidebar(props: {
             when={props.filteredFiles.length > 0}
             fallback={<div class="px-2 py-2 text-12-regular text-text-weak">{language.t("palette.empty")}</div>}
           >
-            <SessionFileListV2
+            <SessionFileList
               files={props.filteredFiles}
               kinds={props.kinds}
               active={props.activeDiff}
diff --git a/packages/app/src/pages/session/v2/review-diff-kinds.test.ts b/packages/app/src/session/review/review-diff-kinds.test.ts
similarity index 100%
rename from packages/app/src/pages/session/v2/review-diff-kinds.test.ts
rename to packages/app/src/session/review/review-diff-kinds.test.ts
diff --git a/packages/app/src/pages/session/v2/review-diff-kinds.ts b/packages/app/src/session/review/review-diff-kinds.ts
similarity index 100%
rename from packages/app/src/pages/session/v2/review-diff-kinds.ts
rename to packages/app/src/session/review/review-diff-kinds.ts
diff --git a/packages/app/src/pages/session/review-tab.tsx b/packages/app/src/session/review/review-tab.tsx
similarity index 100%
rename from packages/app/src/pages/session/review-tab.tsx
rename to packages/app/src/session/review/review-tab.tsx
diff --git a/packages/app/src/session/review/view.tsx b/packages/app/src/session/review/view.tsx
new file mode 100644
index 00000000000..7c339fbf020
--- /dev/null
+++ b/packages/app/src/session/review/view.tsx
@@ -0,0 +1,224 @@
+import { SessionReviewEmptyChangesV2 } from "@opencode-ai/session-ui/v2/session-review-empty-changes-v2"
+import { SessionReviewV2SidebarToggle } from "@opencode-ai/session-ui/v2/session-review-v2"
+import { Select } from "@opencode-ai/ui/select"
+import { Tabs } from "@opencode-ai/ui/tabs"
+import { Match, Show, Suspense, Switch } from "solid-js"
+import { useLanguage } from "@/context/language"
+import { SessionSidePanel } from "../files/session-side-panel"
+import { ReviewPanel } from "./panel"
+import { SessionReviewTab } from "./review-tab"
+import type { ChangeMode, SessionReviewModel } from "./model"
+
+export function SessionMobileTabs(props: { review: SessionReviewModel; compact?: boolean; bottom?: boolean }) {
+  const language = useLanguage()
+  return (
+    <Tabs value={props.review.mobile.tab()} class="h-auto">
+      <Tabs.List
+        classList={{
+          "!h-9": props.compact,
+          "[&::after]:!border-b-0 [&::after]:!border-t [&::after]:!border-border-weak-base": props.bottom,
+        }}
+      >
+        <Tabs.Trigger
+          value="session"
+          classes={{ button: props.compact ? "w-full !py-2" : "w-full" }}
+          classList={{
+            "!w-1/2 !max-w-none": true,
+            "!border-b-0 !border-t !border-border-weak-base [&:has([data-selected])]:!border-t-transparent":
+              props.bottom,
+          }}
+          onClick={() => props.review.mobile.setTab("session")}
+        >
+          {language.t("session.tab.session")}
+        </Tabs.Trigger>
+        <Tabs.Trigger
+          value="changes"
+          classes={{ button: props.compact ? "w-full !py-2" : "w-full" }}
+          classList={{
+            "!w-1/2 !max-w-none !border-r-0": true,
+            "!border-b-0 !border-t !border-border-weak-base [&:has([data-selected])]:!border-t-transparent":
+              props.bottom,
+          }}
+          onClick={() => props.review.mobile.setTab("changes")}
+        >
+          {props.review.hasChanges()
+            ? language.t("session.review.filesChanged", { count: props.review.count() })
+            : language.plural("session.review.change", 0)}
+        </Tabs.Trigger>
+      </Tabs.List>
+    </Tabs>
+  )
+}
+
+export function SessionMobileReview(props: { review: SessionReviewModel }) {
+  return (
+    <div class="relative h-full overflow-hidden">
+      <ReviewContent review={props.review} />
+    </div>
+  )
+}
+
+export function SessionDesktopReview(props: { review: SessionReviewModel }) {
+  return (
+    <Suspense>
+      <SessionSidePanel
+        canReview={props.review.canReview()}
+        diffs={props.review.diffs()}
+        diffsReady={props.review.ready()}
+        hasReview={props.review.hasChanges()}
+        reviewHasFocusableContent={props.review.hasChanges() || props.review.panelState.sidebarOpened()}
+        reviewCount={props.review.count()}
+        reviewPanel={() => <ReviewPanelContent review={props.review} />}
+        reviewSidebarToggle={(disabled) => (
+          <SessionReviewV2SidebarToggle
+            opened={props.review.panelState.sidebarOpened()}
+            disabled={disabled}
+            onToggle={props.review.panelState.toggleSidebar}
+          />
+        )}
+        fileBrowserState={props.review.panelState}
+        activeDiff={props.review.activeFile()}
+        focusReviewDiff={props.review.focusFile}
+        reviewSnap={props.review.screen.review.snap()}
+        size={props.review.screen.size}
+        stacked={props.review.screen.side.layout().stacked}
+      />
+    </Suspense>
+  )
+}
+
+function ReviewContent(props: { review: SessionReviewModel }) {
+  return (
+    <Show when={!props.review.deferRender()}>
+      <SessionReviewTab
+        title={<ReviewTitle review={props.review} />}
+        empty={<ReviewEmpty review={props.review} loadingClass="px-4 py-4 text-text-weak" />}
+        diffs={props.review.diffs()}
+        view={props.review.view()}
+        diffStyle="unified"
+        onScrollRef={props.review.setScroll}
+        focusedFile={props.review.activeFile()}
+        onLineComment={props.review.comments.add}
+        onLineCommentUpdate={props.review.comments.update}
+        onLineCommentDelete={props.review.comments.remove}
+        lineCommentActions={props.review.comments.actions()}
+        commentMentions={{ items: props.review.comments.mentions }}
+        comments={props.review.comments.all()}
+        focusedComment={props.review.comments.focus()}
+        onFocusedCommentChange={props.review.comments.setFocus}
+        onViewFile={props.review.openFile}
+        classes={{
+          root: "pb-8 [&_[data-slot=session-review-list]]:pb-0",
+          header: "px-4 !h-16 !pb-4",
+          container: "px-4",
+        }}
+      />
+    </Show>
+  )
+}
+
+function ReviewPanelContent(props: { review: SessionReviewModel }) {
+  return (
+    <div class="flex flex-col h-full overflow-hidden bg-v2-background-bg-base contain-strict">
+      <Show when={props.review.panelRendered()}>
+        <ReviewPanel
+          title={<ReviewTitle review={props.review} />}
+          empty={<ReviewPanelEmpty review={props.review} />}
+          diffs={props.review.diffs()}
+          diffsReady={props.review.ready()}
+          diffVersion={props.review.diffVersion()}
+          loadDiff={props.review.loadDiff}
+          activeFile={props.review.activeFile()}
+          onSelectFile={props.review.focusFile}
+          diffStyle={props.review.diffStyle.current()}
+          onDiffStyleChange={props.review.diffStyle.set}
+          state={props.review.panelState}
+          onLineComment={props.review.comments.add}
+          onLineCommentUpdate={props.review.comments.update}
+          onLineCommentDelete={props.review.comments.remove}
+          lineCommentActions={props.review.comments.actions()}
+          comments={props.review.comments.all()}
+          focusedComment={props.review.comments.focus()}
+          onFocusedCommentChange={props.review.comments.changeFocus}
+        />
+      </Show>
+    </div>
+  )
+}
+
+function ReviewTitle(props: { review: SessionReviewModel }) {
+  const language = useLanguage()
+  const label = (option: ChangeMode) => {
+    if (option === "git") return language.t("ui.sessionReview.title.git")
+    if (option === "branch") return language.t("ui.sessionReview.title.branch")
+    return language.t("ui.sessionReview.title.lastTurn")
+  }
+  return (
+    <Show when={props.review.canReview()}>
+      <Select
+        options={props.review.options()}
+        current={props.review.mode()}
+        label={label}
+        placement="bottom-start"
+        gutter={6}
+        onSelect={(option) => option && props.review.setMode(option)}
+      />
+    </Show>
+  )
+}
+
+function ReviewEmpty(props: { review: SessionReviewModel; loadingClass: string }) {
+  const language = useLanguage()
+  const loading = () => (props.review.mode() === "git" || props.review.mode() === "branch") && !props.review.ready()
+  const noGit = () => props.review.mode() === "turn" && props.review.noGit()
+  const text = () => {
+    if (props.review.mode() === "git") return language.t("session.review.noUncommittedChanges")
+    if (props.review.mode() === "branch") return language.t("session.review.noBranchChanges")
+    return language.t("session.review.noChanges")
+  }
+  return (
+    <Switch>
+      <Match when={loading()}>
+        <div class={props.loadingClass}>{language.t("session.review.loadingChanges")}</div>
+      </Match>
+      <Match when={noGit()}>
+        <div class="h-full pb-64 -mt-4 flex flex-col items-center justify-center text-center gap-6">
+          <div class="flex flex-col gap-3">
+            <div class="text-14-medium text-text-strong">{language.t("session.review.noVcs.createGit.title")}</div>
+            <div class="text-14-regular text-text-base max-w-md" style={{ "line-height": "var(--line-height-normal)" }}>
+              {language.t("session.review.noVcs.createGit.description")}
+            </div>
+          </div>
+        </div>
+      </Match>
+      <Match when={true}>
+        <div class="h-full pb-64 -mt-4 flex flex-col items-center justify-center text-center gap-6">
+          <div class="text-14-regular text-text-weak max-w-56">{text()}</div>
+        </div>
+      </Match>
+    </Switch>
+  )
+}
+
+function ReviewPanelEmpty(props: { review: SessionReviewModel }) {
+  const language = useLanguage()
+  const loading = () => (props.review.mode() === "git" || props.review.mode() === "branch") && !props.review.ready()
+  const noGit = () => props.review.mode() === "turn" && props.review.noGit()
+  return (
+    <Switch>
+      <Match when={loading()}>
+        <div class="px-6 py-4 text-text-weak">{language.t("session.review.loadingChanges")}</div>
+      </Match>
+      <Match when={noGit()}>
+        <div class="h-full pb-64 -mt-4 flex flex-col items-center justify-center text-center gap-6">
+          <div class="text-14-regular text-text-weak max-w-56">
+            {language.t("session.review.noVcs.createGit.description")}
+          </div>
+        </div>
+      </Match>
+      <Match when={true}>
+        <SessionReviewEmptyChangesV2 />
+      </Match>
+    </Switch>
+  )
+}
diff --git a/packages/app/src/session/route-error.tsx b/packages/app/src/session/route-error.tsx
new file mode 100644
index 00000000000..1f3b92d0927
--- /dev/null
+++ b/packages/app/src/session/route-error.tsx
@@ -0,0 +1,56 @@
+import { Button } from "@opencode-ai/ui/button"
+import { createMemo, Show } from "solid-js"
+import { ErrorPage } from "@/pages/error"
+import { useLanguage } from "@/context/language"
+import { ServerConnection, serverName, useServers } from "@/context/servers"
+import { useTabs } from "@/context/tabs"
+import { isLocalSessionNotFoundError, isSessionNotFoundError } from "@/utils/server-errors"
+
+export function SessionErrorFallback(props: { error: unknown; sessionID?: string; serverKey?: ServerConnection.Key }) {
+  const language = useLanguage()
+  const server = useServers()
+  const tabs = useTabs()
+  const displayServer = createMemo(() => {
+    const conn = server.list.find((item) => ServerConnection.key(item) === props.serverKey)
+    return conn ? serverName(conn) : props.serverKey
+  })
+
+  if (!isCurrentSessionNotFoundError(props.error, props.sessionID)) return <ErrorPage error={props.error} />
+
+  return (
+    <div class="flex-1 min-h-0 overflow-hidden">
+      <div class="h-full px-6 pb-42 -mt-4 flex flex-col items-center justify-center text-center gap-4">
+        <div class="flex flex-col items-center gap-2">
+          <div class="text-16-medium text-text max-w-md">{language.t("session.error.notFound")}</div>
+          <div class="text-13-regular text-text-weak max-w-md">{language.t("session.error.notFound.description")}</div>
+        </div>
+        <Show when={props.sessionID}>
+          {(sessionID) => (
+            <div class="max-w-full flex flex-col items-center gap-1">
+              <div class="max-w-full text-11-regular text-text-faint break-all">{displayServer()}</div>
+              <code class="max-w-full rounded-[4px] px-1 py-0.5 font-mono text-xs font-medium leading-4 text-text-base break-all bg-[color-mix(in_oklch,var(--v2-text-text-base)_8%,transparent)]">
+                {sessionID()}
+              </code>
+            </div>
+          )}
+        </Show>
+        <Button
+          variant="neutral"
+          size="normal"
+          icon="xmark-small"
+          onClick={() => {
+            if (!props.sessionID || !props.serverKey) return
+            tabs.removeSessionTab({ server: props.serverKey, sessionId: props.sessionID })
+          }}
+        >
+          {language.t("session.error.notFound.closeTab")}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+function isCurrentSessionNotFoundError(error: unknown, sessionID: string | undefined) {
+  if (!sessionID) return false
+  return isSessionNotFoundError(error, sessionID) || isLocalSessionNotFoundError(error, sessionID)
+}
diff --git a/packages/app/src/session/route.tsx b/packages/app/src/session/route.tsx
new file mode 100644
index 00000000000..df776b93860
--- /dev/null
+++ b/packages/app/src/session/route.tsx
@@ -0,0 +1,122 @@
+import { ErrorBoundary, createEffect, createMemo, Show, type ParentProps } from "solid-js"
+import { useParams } from "@solidjs/router"
+import { CommentsProvider } from "@/context/comments"
+import { FileProvider } from "@/context/file"
+import { LocationProvider, useWorkspaceLocation } from "@/context/location"
+import { ModelsProvider } from "@/context/models"
+import { useNotification } from "@/context/notification"
+import { PromptProvider } from "@/context/prompt"
+import { useData, useServer } from "@/context/server"
+import { useServerSDK } from "@/context/server-sdk"
+import { ServerConnection } from "@/context/servers"
+import { TerminalProvider } from "@/context/terminal"
+import { useSettingsCommand } from "@/components/settings-dialog"
+import { SessionUIProvider } from "@/pages/directory-layout"
+import { requireServerKey } from "@/utils/session-route"
+import { useSessionModel } from "./model"
+import { SessionPanelFrame, SessionRouteFrame } from "./session-frame"
+import { SessionErrorFallback } from "./route-error"
+import { createSessionResolution } from "./session-resolution"
+import { SessionScreen } from "./screen"
+
+export function TargetSessionRouteContent() {
+  const params = useParams<{ serverKey: string; id: string }>()
+  const data = useData()
+  const directory = createMemo(() => data.session.get(params.id)?.location.directory)
+
+  return (
+    <>
+      <MarkSessionNotificationsViewed sessionID={() => params.id} />
+      <ModelsProvider directory={directory}>
+        <TargetSessionSettingsCommand />
+        <SessionRouteErrorBoundary sessionID={params.id} serverKey={requireServerKey(params.serverKey)} padded>
+          <ResolvedTargetSessionRoute />
+        </SessionRouteErrorBoundary>
+      </ModelsProvider>
+    </>
+  )
+}
+
+function TargetSessionSettingsCommand() {
+  useSettingsCommand()
+  return null
+}
+
+function SessionRouteErrorBoundary(
+  props: ParentProps<{ sessionID?: string; serverKey?: ServerConnection.Key; padded?: boolean }>,
+) {
+  return (
+    <ErrorBoundary
+      fallback={(error) => (
+        <SessionRouteFrame padded={props.padded}>
+          <SessionPanelFrame raised={!!props.sessionID}>
+            <SessionErrorFallback error={error} sessionID={props.sessionID} serverKey={props.serverKey} />
+          </SessionPanelFrame>
+        </SessionRouteFrame>
+      )}
+    >
+      {props.children}
+    </ErrorBoundary>
+  )
+}
+
+function ResolvedTargetSessionRoute() {
+  const params = useParams<{ id: string }>()
+  const server = useServer()
+  const data = useData()
+  const current = createSessionResolution(
+    () => params.id,
+    () => data.session,
+    { children: true },
+  )
+  const directory = createMemo(() => current()?.location.directory)
+
+  return (
+    <Show when={directory()}>
+      {(value) => (
+        <LocationProvider directory={value()}>
+          <SessionUIProvider directory={value()} server={server.key}>
+            <TargetSessionPage />
+          </SessionUIProvider>
+        </LocationProvider>
+      )}
+    </Show>
+  )
+}
+
+function TargetSessionPage() {
+  const location = useWorkspaceLocation()
+  const server = useServerSDK()
+
+  return (
+    // Keep workspace-scoped file, prompt, comment, and terminal state alive when
+    // the user switches between Sessions in the same workspace.
+    <Show when={`${server.scope}\0${location().directory}`} keyed>
+      <TerminalProvider>
+        <FileProvider>
+          <PromptProvider>
+            <CommentsProvider>
+              <SessionPage />
+            </CommentsProvider>
+          </PromptProvider>
+        </FileProvider>
+      </TerminalProvider>
+    </Show>
+  )
+}
+
+function SessionPage() {
+  const session = useSessionModel()
+  return <SessionScreen session={session} />
+}
+
+function MarkSessionNotificationsViewed(props: { sessionID: () => string | undefined }) {
+  const notification = useNotification()
+  createEffect(() => {
+    const sessionID = props.sessionID()
+    if (!notification.ready() || !sessionID) return
+    if (notification.session.unseenCount(sessionID) === 0) return
+    notification.session.markViewed(sessionID)
+  })
+  return null
+}
diff --git a/packages/app/src/session/screen-layout.ts b/packages/app/src/session/screen-layout.ts
new file mode 100644
index 00000000000..a2fee4c3bf1
--- /dev/null
+++ b/packages/app/src/session/screen-layout.ts
@@ -0,0 +1,110 @@
+import { createComputed, createMemo, createSignal, onCleanup } from "solid-js"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
+import { useLayout } from "@/context/layout"
+import { useSettings } from "@/context/settings"
+import { createSizing, shouldShowFileTree } from "./helpers"
+import type { SessionModel } from "./model"
+import { sessionPanelLayout } from "./session-panel-layout"
+import { clampSessionPanelWidth, sessionPanelWidthMax } from "./session-panel-width"
+
+export function createSessionScreenLayout(session: SessionModel, serverScope: string) {
+  const layout = useLayout()
+  const settings = useSettings()
+  const size = createSizing()
+  const reviewOpen = createMemo(() => session.isDesktop() && session.layout.view().reviewPanel.opened())
+  const reviewPanelOpen = createMemo(() => reviewOpen() && !!session.identity.params.id)
+  const terminalOpen = createMemo(() => session.layout.view().terminal.opened())
+  const desktopTerminalOpen = createMemo(() => session.isDesktop() && terminalOpen())
+  const fileTreeOpen = createMemo(
+    () =>
+      session.isDesktop() &&
+      shouldShowFileTree({
+        visible: settings.visibility.fileTree(),
+        opened: layout.fileTree.opened(),
+      }),
+  )
+  const resizable = createMemo(() => reviewPanelOpen() || desktopTerminalOpen())
+  const sidePanelOpen = createMemo(() => resizable() || fileTreeOpen())
+  const [rowWidth, setRowWidth] = createSignal<number>()
+  let row: HTMLDivElement | undefined
+  createResizeObserver(
+    () => row,
+    ({ width }) => setRowWidth(width),
+  )
+  const available = createMemo<number | undefined>(() => {
+    const width = rowWidth()
+    if (width === undefined) return undefined
+    return width - 8
+  })
+  const splitReview = createMemo(() => reviewPanelOpen() && layout.review.diffStyle() === "split")
+  const resizedWidth = createMemo(() =>
+    clampSessionPanelWidth({
+      width: layout.session.width(),
+      available: available(),
+      split: splitReview(),
+    }),
+  )
+  const panelWidth = createMemo(() => {
+    if (!sidePanelOpen()) return "100%"
+    if (resizable()) return `${resizedWidth()}px`
+    return `calc(100% - ${layout.fileTree.width()}px)`
+  })
+  const panelMax = createMemo(() => {
+    const width = available()
+    if (width === undefined) return 1000
+    return sessionPanelWidthMax({ available: width, split: splitReview() })
+  })
+  const panelLayout = createMemo(() =>
+    sessionPanelLayout({
+      review: reviewPanelOpen(),
+      terminal: desktopTerminalOpen(),
+      files: fileTreeOpen(),
+    }),
+  )
+  const [reviewSnap, setReviewSnap] = createSignal(false)
+  let reviewFrame: number | undefined
+  createComputed((previous) => {
+    const open = reviewOpen()
+    if (previous === undefined || previous === open) return open
+
+    if (reviewFrame !== undefined) cancelAnimationFrame(reviewFrame)
+    setReviewSnap(true)
+    reviewFrame = requestAnimationFrame(() => {
+      reviewFrame = undefined
+      setReviewSnap(false)
+    })
+    return open
+  }, reviewOpen())
+  onCleanup(() => {
+    if (reviewFrame !== undefined) cancelAnimationFrame(reviewFrame)
+  })
+
+  return {
+    centered: createMemo(() => session.isDesktop()),
+    files: { open: fileTreeOpen },
+    panel: {
+      key: createMemo(() => (session.identity.params.id ? `${serverScope}\0${session.identity.params.id}` : undefined)),
+      max: panelMax,
+      ref: (element: HTMLDivElement) => {
+        row = element
+      },
+      resizable,
+      resizedWidth,
+      width: panelWidth,
+    },
+    review: {
+      open: reviewOpen,
+      panelOpen: reviewPanelOpen,
+      snap: reviewSnap,
+    },
+    side: { layout: panelLayout, open: sidePanelOpen },
+    size,
+    terminal: {
+      desktopOpen: desktopTerminalOpen,
+      inlineOnlyOpen: createMemo(() => desktopTerminalOpen() && !reviewPanelOpen()),
+      open: terminalOpen,
+    },
+  }
+}
+
+export type SessionScreenLayout = ReturnType<typeof createSessionScreenLayout>
diff --git a/packages/app/src/session/screen.tsx b/packages/app/src/session/screen.tsx
new file mode 100644
index 00000000000..49856ec9e28
--- /dev/null
+++ b/packages/app/src/session/screen.tsx
@@ -0,0 +1,202 @@
+import { ErrorBoundary, Show, Match, Switch, createMemo, createEffect, createComputed, on } from "solid-js"
+import { createStore } from "solid-js/store"
+import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
+import { NewSessionView } from "@/session/composer/session-new-view"
+import { SessionHeader } from "@/session/header/session-header"
+import { useLayout } from "@/context/layout"
+import { useServerSDK } from "@/context/server-sdk"
+import { useSettings } from "@/context/settings"
+import { MessageTimeline } from "@/session/timeline/message-timeline"
+import type { SessionModel } from "@/session/model"
+import { SESSION_PANEL_WIDTH_MIN } from "@/session/session-panel-width"
+import { SessionPanelFrame, SessionRouteFrame } from "@/session/session-frame"
+import { TerminalPanel } from "@/session/terminal/panel"
+import { useUsageExceededDialogs } from "./usage-exceeded-dialogs"
+import { SessionErrorFallback } from "./route-error"
+import { createSessionScreenLayout } from "./screen-layout"
+import { createSessionReview } from "./review/model"
+import { SessionDesktopReview, SessionMobileReview, SessionMobileTabs } from "./review/view"
+import { createSessionTimelineInteraction } from "./timeline/interaction"
+import { ActiveSessionComposer, createActiveSessionComposer } from "./composer/active-session"
+
+export function SessionScreen(props: { session: SessionModel }) {
+  const session = props.session
+  const layout = useLayout()
+  const serverSDK = useServerSDK()
+  const settings = useSettings()
+  const isDesktop = session.isDesktop
+  const screen = createSessionScreenLayout(session, serverSDK.scope)
+  const timeline = createSessionTimelineInteraction(session)
+  const messagesReady = timeline.ready
+  const [store, setStore] = createStore({ deferRender: false })
+
+  createComputed((prev) => {
+    const key = session.identity.sessionKey()
+    if (key !== prev) {
+      setStore("deferRender", true)
+      const owner = session.ownership.capture()
+      requestAnimationFrame(() => {
+        setTimeout(() => owner.run(() => setStore("deferRender", false)), 0)
+      })
+    }
+    return key
+  })
+  const review = createSessionReview({ session, screen, deferRender: () => store.deferRender })
+  const composer = createActiveSessionComposer({
+    session,
+    screen,
+    timeline,
+    deferRender: () => store.deferRender,
+  })
+
+  useUsageExceededDialogs()
+
+  const mobileTabsBottom = createMemo(() => !isDesktop() && settings.general.mobileTitlebarPosition() === "bottom")
+
+  const sessionErrorFallback = (error: unknown, reset: () => void) => {
+    createEffect(on(session.identity.sessionKey, reset, { defer: true }))
+    return <SessionErrorFallback error={error} sessionID={session.identity.params.id} />
+  }
+
+  const sessionPanelContent = () => (
+    <>
+      {timeline.resource() ?? ""}
+      <Show when={!isDesktop() && !!session.identity.params.id && !mobileTabsBottom()}>
+        <SessionMobileTabs review={review} compact />
+      </Show>
+      <div class="flex-1 min-h-0 overflow-hidden">
+        <Switch>
+          <Match when={session.identity.params.id && review.mobile.changes()}>
+            <SessionMobileReview review={review} />
+          </Match>
+          <Match when={session.identity.params.id}>
+            <Show when={messagesReady() ? session.identity.params.id : undefined} keyed>
+              {(_id) => (
+                <MessageTimeline
+                  session={session}
+                  actions={composer.actions.timeline}
+                  scroll={timeline.scroll}
+                  onResumeScroll={timeline.actions.resume}
+                  setScrollRef={timeline.view.setScrollRef}
+                  onScheduleScrollState={timeline.view.scheduleScrollState}
+                  onAutoScrollHandleScroll={timeline.autoScroll.handleScroll}
+                  onMarkScrollGesture={timeline.view.markGesture}
+                  hasScrollGesture={timeline.view.hasGesture()}
+                  onUserScroll={timeline.view.markUserScroll}
+                  onHistoryScroll={timeline.view.onHistoryScroll}
+                  onAutoScrollInteraction={timeline.autoScroll.handleInteraction}
+                  shouldAnchorBottom={timeline.view.shouldAnchorBottom()}
+                  centered={screen.centered()}
+                  setContentRef={timeline.view.setContentRef}
+                  userMessages={timeline.userMessages()}
+                  diffs={review.details.diffs}
+                  onReview={review.open}
+                  workspaceMoveEligible={composer.workspaceMoveEligible()}
+                  onSummaryOpenChange={review.details.setOpen}
+                  setHistoryAnchor={timeline.view.setHistoryAnchor}
+                  anchor={timeline.view.anchor}
+                  setRevealMessage={timeline.view.setRevealMessage}
+                  setScrollToEnd={timeline.view.setScrollToEnd}
+                />
+              )}
+            </Show>
+          </Match>
+          <Match when={true}>
+            <NewSessionView worktree={composer.newSessionWorktree()} />
+          </Match>
+        </Switch>
+      </div>
+
+      <Show when={session.identity.params.id && !review.mobile.changes()}>
+        <ActiveSessionComposer
+          model={composer}
+          session={session}
+          accentSubmit={session.workspace.current()}
+          onResponseSubmit={timeline.actions.resume}
+        />
+      </Show>
+      <Show when={!!session.identity.params.id && mobileTabsBottom()}>
+        <SessionMobileTabs review={review} compact bottom />
+      </Show>
+    </>
+  )
+
+  return (
+    <SessionRouteFrame>
+      <SessionHeader />
+      <div ref={screen.panel.ref} class="flex-1 min-h-0 flex flex-col md:flex-row gap-2 p-2">
+        <div
+          classList={{
+            "@container relative shrink-0 flex flex-col min-h-0 h-full flex-1 md:flex-none transition-[width]": true,
+            "duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
+              !screen.size.active() && !screen.review.snap() && !screen.terminal.inlineOnlyOpen(),
+          }}
+          style={{
+            width: screen.panel.width(),
+          }}
+        >
+          <Show when={screen.panel.key()} keyed>
+            {(_) => (
+              <SessionPanelFrame raised={!!session.identity.params.id}>
+                <ErrorBoundary fallback={sessionErrorFallback}>{sessionPanelContent()}</ErrorBoundary>
+              </SessionPanelFrame>
+            )}
+          </Show>
+
+          <Show when={screen.panel.resizable()}>
+            <div onPointerDown={() => screen.size.start()}>
+              <ResizeHandle
+                class="-end-1"
+                direction="horizontal"
+                size={screen.panel.resizedWidth()}
+                min={SESSION_PANEL_WIDTH_MIN}
+                max={screen.panel.max()}
+                onResize={(width) => {
+                  screen.size.touch()
+                  layout.session.resize(width)
+                }}
+              />
+            </div>
+          </Show>
+        </div>
+
+        <Show when={isDesktop() ? screen.side.layout().visible : screen.terminal.open()}>
+          <div class="min-w-0 h-full flex flex-1 flex-col">
+            <Show when={isDesktop() && (screen.review.panelOpen() || screen.files.open())}>
+              <div class="min-h-0 flex-1">
+                <SessionDesktopReview review={review} />
+              </div>
+            </Show>
+            <Show when={screen.side.layout().stacked}>
+              <div class="relative h-2 shrink-0" onPointerDown={() => screen.size.start()}>
+                <ResizeHandle
+                  class="!relative !inset-auto !h-full !w-full !transform-none"
+                  direction="vertical"
+                  size={layout.terminal.height()}
+                  min={100}
+                  max={typeof window === "undefined" ? 600 : window.innerHeight * 0.6}
+                  collapseThreshold={50}
+                  onResize={(height) => {
+                    screen.size.touch()
+                    layout.terminal.resize(height)
+                  }}
+                  onCollapse={() => session.layout.view().terminal.close()}
+                />
+              </div>
+            </Show>
+            <Show when={screen.terminal.open()}>
+              <div
+                classList={{
+                  "min-h-0 shrink-0": screen.side.layout().stacked,
+                  "min-h-0 flex-1": !screen.side.layout().stacked,
+                }}
+              >
+                <TerminalPanel stacked={screen.side.layout().stacked} />
+              </div>
+            </Show>
+          </div>
+        </Show>
+      </div>
+    </SessionRouteFrame>
+  )
+}
diff --git a/packages/app/src/pages/session/session-domain.ts b/packages/app/src/session/session-domain.ts
similarity index 100%
rename from packages/app/src/pages/session/session-domain.ts
rename to packages/app/src/session/session-domain.ts
diff --git a/packages/app/src/pages/session/session-frame.tsx b/packages/app/src/session/session-frame.tsx
similarity index 100%
rename from packages/app/src/pages/session/session-frame.tsx
rename to packages/app/src/session/session-frame.tsx
diff --git a/packages/app/src/pages/session/session-layout.ts b/packages/app/src/session/session-layout.ts
similarity index 100%
rename from packages/app/src/pages/session/session-layout.ts
rename to packages/app/src/session/session-layout.ts
diff --git a/packages/app/src/pages/session/session-model-helpers.test.ts b/packages/app/src/session/session-model-helpers.test.ts
similarity index 100%
rename from packages/app/src/pages/session/session-model-helpers.test.ts
rename to packages/app/src/session/session-model-helpers.test.ts
diff --git a/packages/app/src/pages/session/session-model-helpers.ts b/packages/app/src/session/session-model-helpers.ts
similarity index 100%
rename from packages/app/src/pages/session/session-model-helpers.ts
rename to packages/app/src/session/session-model-helpers.ts
diff --git a/packages/app/src/pages/session/session-ownership.ts b/packages/app/src/session/session-ownership.ts
similarity index 100%
rename from packages/app/src/pages/session/session-ownership.ts
rename to packages/app/src/session/session-ownership.ts
diff --git a/packages/app/src/pages/session/session-panel-layout.test.ts b/packages/app/src/session/session-panel-layout.test.ts
similarity index 100%
rename from packages/app/src/pages/session/session-panel-layout.test.ts
rename to packages/app/src/session/session-panel-layout.test.ts
diff --git a/packages/app/src/pages/session/session-panel-layout.ts b/packages/app/src/session/session-panel-layout.ts
similarity index 100%
rename from packages/app/src/pages/session/session-panel-layout.ts
rename to packages/app/src/session/session-panel-layout.ts
diff --git a/packages/app/src/pages/session/session-panel-width.test.ts b/packages/app/src/session/session-panel-width.test.ts
similarity index 100%
rename from packages/app/src/pages/session/session-panel-width.test.ts
rename to packages/app/src/session/session-panel-width.test.ts
diff --git a/packages/app/src/pages/session/session-panel-width.ts b/packages/app/src/session/session-panel-width.ts
similarity index 100%
rename from packages/app/src/pages/session/session-panel-width.ts
rename to packages/app/src/session/session-panel-width.ts
diff --git a/packages/app/src/pages/session/session-resolution.ts b/packages/app/src/session/session-resolution.ts
similarity index 100%
rename from packages/app/src/pages/session/session-resolution.ts
rename to packages/app/src/session/session-resolution.ts
diff --git a/packages/app/src/pages/session/session-preview.stories.tsx b/packages/app/src/session/session-screen.stories.tsx
similarity index 57%
rename from packages/app/src/pages/session/session-preview.stories.tsx
rename to packages/app/src/session/session-screen.stories.tsx
index a619615036c..e2c34750d83 100644
--- a/packages/app/src/pages/session/session-preview.stories.tsx
+++ b/packages/app/src/session/session-screen.stories.tsx
@@ -2,6 +2,7 @@ import {
   activePermissionRequest,
   activeQuestionRequest,
   attachmentsAndCommentsDocument,
+  compactionDocument,
   editThenTestDocument,
   emptySessionDocument,
   largeCompletedDocument,
@@ -9,12 +10,32 @@ import {
   permissionPendingDocument,
   questionPendingDocument,
   queuedPrompts,
-  recoveryDocument,
-  thinkingDocument,
+  retryDocument,
+  streamingDocument,
+  STORY_TIME,
+  subagentDocument,
+  terminalPassedDocument,
 } from "@opencode-ai/session-ui/storybook"
-import { SessionPreview } from "./session-preview"
+import { SessionPreview } from "./story-model"
 
 const description = "opencode · modular-session-ui"
+const retryAfterInterruption = {
+  ...retryDocument,
+  messages: [
+    ...compactionDocument.messages,
+    ...retryDocument.messages.map((message, index) => {
+      const created = STORY_TIME + 70_000 + index * 1_000
+      if (message.type !== "assistant" || !message.retry) {
+        return { ...message, time: { ...message.time, created } }
+      }
+      return {
+        ...message,
+        time: { ...message.time, created },
+        retry: { ...message.retry, at: created },
+      }
+    }),
+  ],
+}
 const implementAndVerify = () => (
   <SessionPreview
     title="Update active Session status"
@@ -39,23 +60,6 @@ export default {
   },
 }
 
-export const StartACodingTask = {
-  render: () => (
-    <SessionPreview
-      title="New Session"
-      description={description}
-      document={emptySessionDocument}
-      draft="Find why the Session header shifts after the first streamed response"
-    />
-  ),
-}
-
-export const AgentIsThinking = {
-  render: () => (
-    <SessionPreview title="Fix Session header shift" description={description} document={thinkingDocument} />
-  ),
-}
-
 export const ImplementAndVerifyLight = {
   globals: { theme: "light" },
   render: implementAndVerify,
@@ -78,50 +82,6 @@ export const QueueAFollowUp = {
   ),
 }
 
-export const PermissionRequired = {
-  render: () => (
-    <SessionPreview
-      title="Publish canary preview"
-      description={description}
-      document={permissionPendingDocument}
-      request={{ type: "permission", value: activePermissionRequest }}
-    />
-  ),
-}
-
-export const AnswerAProductQuestion = {
-  render: () => (
-    <SessionPreview
-      title="Add the Session review panel"
-      description={description}
-      document={questionPendingDocument}
-      request={{ type: "question", value: activeQuestionRequest }}
-    />
-  ),
-}
-
-export const ReviewChanges = {
-  render: () => (
-    <SessionPreview
-      title="Update active Session status"
-      description={description}
-      document={editThenTestDocument}
-      reviewOpened
-    />
-  ),
-}
-
-export const RecoverFromAFailedTest = {
-  render: () => (
-    <SessionPreview
-      title="Keep tool disclosure stable"
-      description={description}
-      document={recoveryDocument}
-      draft="Also run the App browser test"
-    />
-  ),
-}
-
 export const WorkFromAttachments = {
   render: () => (
     <SessionPreview
@@ -149,9 +109,99 @@ export const MixedDirectionRtl = {
   render: () => (
     <SessionPreview
       title="مراجعة واجهة Session"
-      description="opencode · packages/app/src/session.tsx"
+      description="opencode · packages/app/src/session/screen.tsx"
       document={attachmentsAndCommentsDocument}
-      draft="راجع المسار packages/app/src/session.tsx ثم شغّل bun test"
+      draft="راجع المسار packages/app/src/session/screen.tsx ثم شغّل bun test"
+    />
+  ),
+}
+
+export const EmptySession = {
+  render: () => <SessionPreview title="New Session" description={description} document={emptySessionDocument} />,
+}
+
+export const StreamingSession = {
+  render: () => (
+    <SessionPreview title="Stream the Session response" description={description} document={streamingDocument} />
+  ),
+}
+
+export const EditThenShellTest = {
+  render: implementAndVerify,
+}
+
+export const PermissionRequest = {
+  render: () => (
+    <SessionPreview
+      title="Publish canary preview"
+      description={description}
+      document={permissionPendingDocument}
+      request={{ type: "permission", value: activePermissionRequest }}
+    />
+  ),
+}
+
+export const QuestionRequest = {
+  render: () => (
+    <SessionPreview
+      title="Add the Session review panel"
+      description={description}
+      document={questionPendingDocument}
+      request={{ type: "question", value: activeQuestionRequest }}
+    />
+  ),
+}
+
+export const RetryAndInterruption = {
+  render: () => (
+    <SessionPreview title="Recover the interrupted run" description={description} document={retryAfterInterruption} />
+  ),
+}
+
+export const ReviewPlusTerminal = {
+  render: () => (
+    <SessionPreview
+      title="Review the terminal verification"
+      description={description}
+      document={{ ...terminalPassedDocument, diffs: editThenTestDocument.diffs }}
+      reviewOpened
+      terminal={{ title: "Terminal 1", lines: ["$ bun test", "27 pass", "0 fail"] }}
+    />
+  ),
+}
+
+export const ChildSession = {
+  render: () => (
+    <SessionPreview
+      title="Inspect the child Session"
+      description={description}
+      document={subagentDocument}
+      child={{ parentID: "ses_story_parent" }}
+    />
+  ),
+}
+
+export const MobileLayout = {
+  globals: { viewport: { value: "mobile1", isRotated: false } },
+  parameters: { viewport: { defaultViewport: "mobile1" } },
+  render: () => (
+    <SessionPreview
+      title="Review the mobile Session"
+      description={description}
+      document={attachmentsAndCommentsDocument}
+    />
+  ),
+}
+
+export const NarrowLayout = {
+  globals: { viewport: { value: "tablet", isRotated: false } },
+  parameters: { viewport: { defaultViewport: "tablet" } },
+  render: () => (
+    <SessionPreview
+      title="Review the narrow Session"
+      description={description}
+      document={editThenTestDocument}
+      reviewOpened
     />
   ),
 }
diff --git a/packages/app/src/pages/session/session-preview.tsx b/packages/app/src/session/story-model.tsx
similarity index 86%
rename from packages/app/src/pages/session/session-preview.tsx
rename to packages/app/src/session/story-model.tsx
index be85be44e02..e3095c9c03e 100644
--- a/packages/app/src/pages/session/session-preview.tsx
+++ b/packages/app/src/session/story-model.tsx
@@ -1,11 +1,11 @@
 import type { ModelSelection } from "@/context/local"
 import { PromptInputV2Composer, type PromptInputV2ComposerController } from "@/components/prompt-input-v2"
-import { SessionHeaderV2Actions } from "@/components/session/session-header-actions"
+import { SessionHeaderActions } from "@/session/header/session-header-actions"
 import {
   SessionComposerRegion,
   type SessionComposerRegionViewController,
-} from "@/pages/session/composer/session-composer-region"
-import { SessionPanelFrame, SessionRouteFrame } from "@/pages/session/session-frame"
+} from "@/session/composer/session-composer-region"
+import { SessionPanelFrame, SessionRouteFrame } from "@/session/session-frame"
 import type { FormInfo, PermissionRequest, SessionStatus } from "@opencode-ai/client/promise"
 import type { SessionDocument } from "@opencode-ai/session-ui/document"
 import { CurrentSessionProviders, STORY_MODEL } from "@opencode-ai/session-ui/storybook"
@@ -19,8 +19,9 @@ import { QueryClient, QueryClientProvider } from "@tanstack/solid-query"
 import { Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { useLanguage } from "@/context/language"
-import { ReviewPanelV2View } from "@/pages/session/v2/review-panel-v2"
-import { createReviewPanelV2State } from "@/pages/session/v2/review-panel-v2-state"
+import { ReviewPanelView } from "@/session/review/panel"
+import { createReviewPanelState } from "@/session/review/panel-state"
+import { TerminalSurface } from "@/session/terminal/surface"
 
 const modelReady = Object.assign(() => true, { promise: undefined }) satisfies ModelSelection["ready"]
 const storyComposerModel = {
@@ -84,6 +85,8 @@ export type SessionPreviewProps = {
   request?: { type: "permission"; value: PermissionRequest } | { type: "question"; value: FormInfo }
   reviewOpened?: boolean
   backgroundTasks?: { id: string; type: "shell" | "subagent"; label: string }[]
+  child?: { parentID: string }
+  terminal?: { title: string; lines: string[] }
 }
 
 export function SessionPreview(props: SessionPreviewProps) {
@@ -230,8 +233,8 @@ function SessionSurfaceState(props: SessionPreviewProps & { onReset: () => void
     openParent: () => setState("activity", "Opened the parent Session locally"),
     setPromptRef() {},
     setDockRef() {},
-    parentID: () => undefined,
-    child: () => false,
+    parentID: () => props.child?.parentID,
+    child: () => !!props.child,
     showComposer: () => true,
     handoffPrompt: () => undefined,
     promptReady: () => true,
@@ -274,8 +277,14 @@ function SessionSurfaceState(props: SessionPreviewProps & { onReset: () => void
                   />
                 </section>
                 <Show when={state.reviewOpened}>
-                  <aside id="review-panel" class="min-w-0 flex-1 border-l border-border-weak-base md:max-w-[52%]">
-                    <SessionReviewPane diffs={props.document.diffs} />
+                  <aside
+                    id="review-panel"
+                    class="min-w-0 flex-1 flex flex-col gap-2 border-l border-border-weak-base md:max-w-[52%]"
+                  >
+                    <div class="min-h-0 flex-1">
+                      <SessionReviewPane diffs={props.document.diffs} />
+                    </div>
+                    <Show when={props.terminal}>{(terminal) => <SessionTerminalPreview terminal={terminal()} />}</Show>
                   </aside>
                 </Show>
               </div>
@@ -290,6 +299,32 @@ function SessionSurfaceState(props: SessionPreviewProps & { onReset: () => void
   )
 }
 
+function SessionTerminalPreview(props: { terminal: NonNullable<SessionPreviewProps["terminal"]> }) {
+  return (
+    <TerminalSurface
+      label={props.terminal.title}
+      opened
+      desktop
+      stacked
+      height="220px"
+      contentHeight="220px"
+      pane={220}
+      max={360}
+      resizing={false}
+      onResizeStart={() => undefined}
+      onResize={() => undefined}
+      onCollapse={() => undefined}
+    >
+      <div class="h-10 shrink-0 flex items-center border-b border-border-weaker-base px-3 text-13-medium text-text-strong">
+        {props.terminal.title}
+      </div>
+      <pre dir="ltr" class="min-h-0 flex-1 overflow-auto px-4 py-3 font-mono text-12-regular text-text-base">
+        {props.terminal.lines.join("\n")}
+      </pre>
+    </TerminalSurface>
+  )
+}
+
 function SessionSurfaceHeader(props: {
   title: string
   description: string
@@ -311,7 +346,7 @@ function SessionSurfaceHeader(props: {
         </div>
       </div>
       <div class="flex shrink-0 items-center gap-2">
-        <SessionHeaderV2Actions
+        <SessionHeaderActions
           state={{
             reviewLabel: language.t("command.review.toggle"),
             reviewKeybind: [],
@@ -330,13 +365,13 @@ function SessionSurfaceHeader(props: {
 
 function SessionReviewPane(props: { diffs: SessionDocument["diffs"] }) {
   const language = useLanguage()
-  const review = createReviewPanelV2State()
+  const review = createReviewPanelState()
   const [state, setState] = createStore({
     active: props.diffs[0]?.file,
     diffStyle: "unified" as "unified" | "split",
   })
   return (
-    <ReviewPanelV2View
+    <ReviewPanelView
       title={language.t("ui.sessionReview.title.lastTurn")}
       empty={<SessionReviewEmptyChangesV2 />}
       diffs={props.diffs}
diff --git a/packages/app/src/session/terminal/panel.tsx b/packages/app/src/session/terminal/panel.tsx
new file mode 100644
index 00000000000..c63064fcee1
--- /dev/null
+++ b/packages/app/src/session/terminal/panel.tsx
@@ -0,0 +1,305 @@
+import { For, Show, createEffect, createMemo, on, onCleanup, onMount } from "solid-js"
+import { createStore } from "solid-js/store"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import { createMediaQuery } from "@solid-primitives/media"
+import { DragDropProvider, PointerSensor } from "@dnd-kit/solid"
+import { isSortable } from "@dnd-kit/solid/sortable"
+import { Accessibility, AutoScroller, Feedback, PointerActivationConstraints } from "@dnd-kit/dom"
+import { RestrictToHorizontalAxis } from "@dnd-kit/abstract/modifiers"
+import { RestrictToElement } from "@dnd-kit/dom/modifiers"
+import { Tabs } from "@opencode-ai/ui/tabs"
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { Keybind } from "@opencode-ai/ui/keybind"
+
+import { SortableTerminalTab } from "@/session/terminal/tab"
+import { Terminal } from "@/components/terminal"
+import { useCommand } from "@/context/command"
+import { useLanguage } from "@/context/language"
+import { useLayout } from "@/context/layout"
+import { useTerminal } from "@/context/terminal"
+import { useWorkspaceLocation } from "@/context/location"
+import { terminalTabLabel } from "@/session/terminal/terminal-label"
+import { createSizing, focusTerminalById } from "@/session/helpers"
+import { getTerminalHandoff, setTerminalHandoff } from "@/session/handoff"
+import { useSessionLayout } from "@/session/session-layout"
+import { TerminalSurface } from "./surface"
+
+export function TerminalPanel(props: { stacked?: boolean } = {}) {
+  const layout = useLayout()
+  const terminal = useTerminal()
+  const sdk = useWorkspaceLocation()
+  const language = useLanguage()
+  const command = useCommand()
+  const { workspaceKey, view } = useSessionLayout()
+
+  const isDesktop = createMediaQuery("(min-width: 768px)")
+  const opened = createMemo(() => view().terminal.opened())
+  const size = createSizing()
+  const height = createMemo(() => layout.terminal.height())
+  const close = () => view().terminal.close()
+  let root: HTMLElement | undefined
+  let tabList: HTMLDivElement | undefined
+
+  onCleanup(() => terminal.cancelFocus())
+
+  const [store, setStore] = createStore({
+    autoCreated: false,
+    recovered: {} as Record<string, boolean>,
+    view: typeof window === "undefined" ? 1000 : (window.visualViewport?.height ?? window.innerHeight),
+  })
+
+  const max = () => store.view * 0.6
+  const pane = () => Math.min(height(), max())
+  const stacked = createMemo(() => isDesktop() && !!props.stacked)
+  const panelHeight = createMemo(() =>
+    isDesktop() ? (stacked() ? `${pane()}px` : "100%") : opened() ? `${pane()}px` : "0px",
+  )
+  const contentHeight = createMemo(() => (isDesktop() ? (stacked() ? `${pane()}px` : "100%") : `${pane()}px`))
+  const newTerminalKeybind = createMemo(() => command.keybindParts("terminal.new"))
+
+  onMount(() => {
+    if (typeof window === "undefined") return
+
+    const sync = () => setStore("view", window.visualViewport?.height ?? window.innerHeight)
+    const port = window.visualViewport
+
+    sync()
+    makeEventListener(window, "resize", sync)
+    if (port) makeEventListener(port, "resize", sync)
+  })
+
+  createEffect(() => {
+    if (!opened()) {
+      setStore("autoCreated", false)
+      return
+    }
+
+    if (!terminal.ready() || terminal.all().length !== 0 || store.autoCreated) return
+    terminal.new()
+    setStore("autoCreated", true)
+  })
+
+  createEffect(
+    on(
+      () => terminal.all().length,
+      (count, prevCount) => {
+        if (prevCount === undefined || prevCount <= 0 || count !== 0) return
+        if (!opened()) return
+        close()
+      },
+    ),
+  )
+
+  createEffect(
+    on(
+      () => [opened(), terminal.active(), terminal.focusRequested(terminal.active())] as const,
+      ([next, id, requested]) => {
+        if (!next || !id || !requested) return
+        focusTerminalById(id)
+      },
+    ),
+  )
+
+  createEffect(() => {
+    if (opened()) return
+    const active = document.activeElement
+    if (!(active instanceof HTMLElement)) return
+    if (!root?.contains(active)) return
+    active.blur()
+  })
+
+  createEffect(() => {
+    const dir = sdk().directory
+    if (!dir) return
+    if (!terminal.ready()) return
+    language.locale()
+
+    setTerminalHandoff(
+      workspaceKey(),
+      terminal.all().map((pty) =>
+        terminalTabLabel({
+          title: pty.title,
+          titleNumber: pty.titleNumber,
+          t: language.t as (key: string, vars?: Record<string, string | number | boolean>) => string,
+        }),
+      ),
+    )
+  })
+
+  const handoff = createMemo(() => {
+    const dir = sdk().directory
+    if (!dir) return []
+    return getTerminalHandoff(workspaceKey()) ?? []
+  })
+
+  const all = terminal.all
+
+  const recoverTerminal = (key: string, id: string, clone: (id: string) => Promise<void>) => {
+    if (store.recovered[key]) return
+    setStore("recovered", key, true)
+    void clone(id)
+  }
+
+  const terminalRecoveryKey = (pty: { id: string; title: string; titleNumber: number }) => {
+    return String(pty.titleNumber || pty.title || pty.id)
+  }
+
+  const markTerminalConnected = (key: string, id: string, trim: (id: string) => void) => {
+    setStore("recovered", key, false)
+    trim(id)
+  }
+
+  const handleTerminalDragEnd = () => {
+    const activeId = terminal.active()
+    if (!activeId) return
+    requestAnimationFrame(() => {
+      if (terminal.active() !== activeId) return
+      focusTerminalById(activeId)
+    })
+  }
+
+  return (
+    <TerminalSurface
+      ref={(element) => {
+        root = element
+      }}
+      label={language.t("terminal.title")}
+      opened={opened()}
+      desktop={isDesktop()}
+      stacked={stacked()}
+      height={panelHeight()}
+      contentHeight={contentHeight()}
+      pane={pane()}
+      max={max()}
+      resizing={size.active()}
+      onResizeStart={size.start}
+      onResize={(next) => {
+        size.touch()
+        layout.terminal.resize(next)
+      }}
+      onCollapse={close}
+    >
+      <Show
+        when={terminal.ready()}
+        fallback={
+          <div class="flex flex-col h-full pointer-events-none">
+            <div class="h-10 flex items-center gap-2 px-2 border-b border-border-weaker-base bg-v2-background-bg-base overflow-hidden">
+              <For each={handoff()}>
+                {(title) => (
+                  <div class="px-2 py-1 rounded-md bg-surface-base text-14-regular text-text-weak truncate max-w-40">
+                    {title}
+                  </div>
+                )}
+              </For>
+              <div class="flex-1" />
+              <div class="text-text-weak pr-2">
+                {language.t("common.loading")}
+                {language.t("common.loading.ellipsis")}
+              </div>
+            </div>
+            <div class="flex-1 flex items-center justify-center text-text-weak">{language.t("terminal.loading")}</div>
+          </div>
+        }
+      >
+        <DragDropProvider
+          sensors={[
+            PointerSensor.configure({
+              activationConstraints: [new PointerActivationConstraints.Distance({ value: 4 })],
+              preventActivation: (event) =>
+                event.target instanceof Element &&
+                !!event.target.closest('[data-slot="tabs-trigger-close-button"], input, [contenteditable="true"]'),
+            }),
+          ]}
+          modifiers={[RestrictToHorizontalAxis, RestrictToElement.configure({ element: () => tabList ?? null })]}
+          plugins={(defaults) => [
+            ...defaults.filter((plugin) => plugin !== Accessibility),
+            AutoScroller.configure({ acceleration: 8, threshold: { x: 0.05, y: 0 } }),
+            Feedback.configure({ dropAnimation: null }),
+          ]}
+          onDragEnd={(event) => {
+            const source = event.operation.source
+            if (!event.canceled && isSortable(source) && source.initialIndex !== source.index) {
+              terminal.move(source.id.toString(), source.index)
+            }
+            handleTerminalDragEnd()
+          }}
+        >
+          <div class="flex flex-col h-full">
+            <Tabs
+              variant="panel"
+              value={terminal.active()}
+              onChange={(id) => terminal.open(id)}
+              class="!h-[52px] !flex-none"
+            >
+              <Tabs.List
+                ref={tabList}
+                onPointerDown={(event: PointerEvent & { currentTarget: HTMLDivElement }) => {
+                  const active = document.activeElement
+                  if (event.target === active) return
+                  if (active instanceof HTMLInputElement && event.currentTarget.contains(active)) active.blur()
+                }}
+              >
+                <For each={all()}>
+                  {(pty, index) => <SortableTerminalTab terminal={pty} index={index()} onClose={close} />}
+                </For>
+                <div class="h-full flex items-center justify-center">
+                  <Tooltip
+                    value={
+                      <>
+                        {language.t("command.terminal.new")}
+                        <Show when={newTerminalKeybind().length > 0}>
+                          <Keybind keys={newTerminalKeybind()} variant="neutral" />
+                        </Show>
+                      </>
+                    }
+                    placement="bottom"
+                    class="flex items-center"
+                  >
+                    <IconButton
+                      icon={<Icon name="plus-small" size="large" />}
+                      variant="ghost"
+                      onClick={() => terminal.new({ focus: true })}
+                      aria-label={language.t("command.terminal.new")}
+                    />
+                  </Tooltip>
+                </div>
+              </Tabs.List>
+            </Tabs>
+            <div class="flex-1 min-h-0 relative">
+              <Show when={opened() && terminal.active()} keyed>
+                {(id) => {
+                  const ops = terminal.bind()
+                  return (
+                    <Show when={all().find((pty) => pty.id === id)}>
+                      {(pty) => (
+                        <div id={`terminal-wrapper-${id}`} class="absolute inset-0">
+                          <Terminal
+                            pty={pty()}
+                            autoFocus={terminal.focusRequested(id)}
+                            onAutoFocus={() => terminal.consumeFocus(id)}
+                            class="!px-[14px]"
+                            onConnect={() =>
+                              markTerminalConnected(terminalRecoveryKey(pty()), id, (terminalID) =>
+                                ops.trim(terminalID),
+                              )
+                            }
+                            onCleanup={(terminal) => ops.update(terminal)}
+                            onConnectError={() =>
+                              recoverTerminal(terminalRecoveryKey(pty()), id, (terminalID) => ops.clone(terminalID))
+                            }
+                          />
+                        </div>
+                      )}
+                    </Show>
+                  )
+                }}
+              </Show>
+            </div>
+          </div>
+        </DragDropProvider>
+      </Show>
+    </TerminalSurface>
+  )
+}
diff --git a/packages/app/src/session/terminal/surface.tsx b/packages/app/src/session/terminal/surface.tsx
new file mode 100644
index 00000000000..489ddeea423
--- /dev/null
+++ b/packages/app/src/session/terminal/surface.tsx
@@ -0,0 +1,64 @@
+import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
+import type { ParentProps } from "solid-js"
+
+export function TerminalSurface(
+  props: ParentProps<{
+    label: string
+    opened: boolean
+    desktop: boolean
+    stacked: boolean
+    height: string
+    contentHeight: string
+    pane: number
+    max: number
+    resizing: boolean
+    onResizeStart: () => void
+    onResize: (height: number) => void
+    onCollapse: () => void
+    ref?: (element: HTMLElement) => void
+  }>,
+) {
+  return (
+    <aside
+      ref={props.ref}
+      id="terminal-panel"
+      role="region"
+      aria-label={props.label}
+      aria-hidden={!props.opened}
+      inert={!props.opened}
+      class="relative shrink-0 overflow-hidden bg-v2-background-bg-base"
+      classList={{
+        "w-full": !props.desktop || props.stacked,
+        "min-w-0 h-full flex-1": props.desktop && props.opened && !props.stacked,
+        "w-0 h-full pointer-events-none": props.desktop && !props.opened,
+        "rounded-[10px] shadow-[var(--v2-elevation-raised)]": props.desktop,
+        "transition-[height] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[height] motion-reduce:transition-none":
+          !props.desktop && !props.resizing,
+      }}
+      style={{ height: props.height }}
+    >
+      <div classList={{ "md:hidden": !props.stacked, hidden: props.stacked }} onPointerDown={props.onResizeStart}>
+        <ResizeHandle
+          class="-top-1"
+          direction="vertical"
+          size={props.pane}
+          min={100}
+          max={props.max}
+          collapseThreshold={50}
+          onResize={props.onResize}
+          onCollapse={props.onCollapse}
+        />
+      </div>
+      <div
+        class="absolute inset-0 flex flex-col overflow-hidden"
+        classList={{
+          "border-t border-border-weak-base": props.opened && !props.desktop,
+          "pointer-events-none": !props.opened,
+        }}
+        style={{ height: props.contentHeight }}
+      >
+        {props.children}
+      </div>
+    </aside>
+  )
+}
diff --git a/packages/app/src/components/session/session-sortable-terminal-tab-v2.tsx b/packages/app/src/session/terminal/tab.tsx
similarity index 90%
rename from packages/app/src/components/session/session-sortable-terminal-tab-v2.tsx
rename to packages/app/src/session/terminal/tab.tsx
index dc63bf08a51..95387e96db8 100644
--- a/packages/app/src/components/session/session-sortable-terminal-tab-v2.tsx
+++ b/packages/app/src/session/terminal/tab.tsx
@@ -4,12 +4,12 @@ import { createStore } from "solid-js/store"
 import { useSortable } from "@dnd-kit/solid/sortable"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { Menu } from "@opencode-ai/ui/menu"
-import { isDefaultTitle as isDefaultTerminalTitle } from "@/context/terminal-title"
+import { isDefaultTitle } from "@/context/terminal-title"
 import { useTerminal, type LocalPTY } from "@/context/terminal"
 import { useLanguage } from "@/context/language"
-import { focusTerminalById } from "@/pages/session/helpers"
+import { focusTerminalById } from "@/session/helpers"
 
-export function SortableTerminalTabV2(props: { terminal: LocalPTY; index: number; onClose?: () => void }): JSX.Element {
+export function SortableTerminalTab(props: { terminal: LocalPTY; index: number; onClose?: () => void }): JSX.Element {
   const terminal = useTerminal()
   const language = useLanguage()
   const sortable = useSortable({
@@ -29,15 +29,15 @@ export function SortableTerminalTabV2(props: { terminal: LocalPTY; index: number
   let blurFrame: number | undefined
   let editRequested = false
 
-  const isDefaultTitle = () => {
+  const defaultTitle = () => {
     const number = props.terminal.titleNumber
     if (!Number.isFinite(number) || number <= 0) return false
-    return isDefaultTerminalTitle(props.terminal.title, number)
+    return isDefaultTitle(props.terminal.title, number)
   }
 
   const label = () => {
     language.locale()
-    if (props.terminal.title && !isDefaultTitle()) return props.terminal.title
+    if (props.terminal.title && !defaultTitle()) return props.terminal.title
 
     const number = props.terminal.titleNumber
     if (Number.isFinite(number) && number > 0) return language.t("terminal.title.numbered", { number })
@@ -131,9 +131,7 @@ export function SortableTerminalTabV2(props: { terminal: LocalPTY; index: number
               focus()
             }}
             onMiddleClick={close}
-            closeButton={
-              <Tabs.CloseButton class="h-5 w-5" onClick={close} aria-label={language.t("terminal.close")} />
-            }
+            closeButton={<Tabs.CloseButton class="h-5 w-5" onClick={close} aria-label={language.t("terminal.close")} />}
             hideCloseButton
           >
             <span
diff --git a/packages/app/src/pages/session/terminal-label.ts b/packages/app/src/session/terminal/terminal-label.ts
similarity index 61%
rename from packages/app/src/pages/session/terminal-label.ts
rename to packages/app/src/session/terminal/terminal-label.ts
index 8a34712e436..ec528f3f48f 100644
--- a/packages/app/src/pages/session/terminal-label.ts
+++ b/packages/app/src/session/terminal/terminal-label.ts
@@ -1,4 +1,4 @@
-import { isDefaultTitle as isDefaultTerminalTitle } from "@/context/terminal-title"
+import { isDefaultTitle } from "@/context/terminal-title"
 
 export const terminalTabLabel = (input: {
   title?: string
@@ -7,9 +7,9 @@ export const terminalTabLabel = (input: {
 }) => {
   const title = input.title ?? ""
   const number = input.titleNumber ?? 0
-  const isDefaultTitle = Number.isFinite(number) && number > 0 && isDefaultTerminalTitle(title, number)
+  const defaultTitle = Number.isFinite(number) && number > 0 && isDefaultTitle(title, number)
 
-  if (title && !isDefaultTitle) return title
+  if (title && !defaultTitle) return title
   if (number > 0) return input.t("terminal.title.numbered", { number })
   if (title) return title
   return input.t("terminal.title")
diff --git a/packages/app/src/pages/session/terminal-panel.test.ts b/packages/app/src/session/terminal/terminal-panel.test.ts
similarity index 100%
rename from packages/app/src/pages/session/terminal-panel.test.ts
rename to packages/app/src/session/terminal/terminal-panel.test.ts
diff --git a/packages/app/src/pages/session/timeline/controller-projection.test.ts b/packages/app/src/session/timeline/controller-projection.test.ts
similarity index 100%
rename from packages/app/src/pages/session/timeline/controller-projection.test.ts
rename to packages/app/src/session/timeline/controller-projection.test.ts
diff --git a/packages/app/src/pages/session/timeline/controller-projection.ts b/packages/app/src/session/timeline/controller-projection.ts
similarity index 100%
rename from packages/app/src/pages/session/timeline/controller-projection.ts
rename to packages/app/src/session/timeline/controller-projection.ts
diff --git a/packages/app/src/pages/session/timeline/controller.tsx b/packages/app/src/session/timeline/controller.tsx
similarity index 97%
rename from packages/app/src/pages/session/timeline/controller.tsx
rename to packages/app/src/session/timeline/controller.tsx
index c10358511e6..3d479aacd60 100644
--- a/packages/app/src/pages/session/timeline/controller.tsx
+++ b/packages/app/src/session/timeline/controller.tsx
@@ -11,7 +11,7 @@ import { usePlatform } from "@/context/platform"
 import { useSettings } from "@/context/settings"
 import { useWorkspaceLocation } from "@/context/location"
 import { useTabs } from "@/context/tabs"
-import type { SessionController } from "@/pages/session/session-controller"
+import type { SessionModel } from "@/session/model"
 import { useServerSDK } from "@/context/server-sdk"
 import { sessionHref } from "@/utils/session-route"
 import { sessionTitle } from "@/utils/session-title"
@@ -38,9 +38,9 @@ const taskDescription = (message: SessionMessageInfo, sessionID: string): string
 }
 
 export type TimelineSessionSource = {
-  identity: Pick<SessionController["identity"], "params" | "sessionID" | "sessionKey">
-  data: Pick<SessionController["data"], "info" | "parent" | "parentID" | "status">
-  history: Pick<SessionController["history"], "messages">
+  identity: Pick<SessionModel["identity"], "params" | "sessionID" | "sessionKey">
+  data: Pick<SessionModel["data"], "info" | "parent" | "parentID" | "status">
+  history: Pick<SessionModel["history"], "messages">
 }
 
 export function createTimelineController(input: { session: TimelineSessionSource }) {
diff --git a/packages/app/src/session/timeline/interaction.ts b/packages/app/src/session/timeline/interaction.ts
new file mode 100644
index 00000000000..92dd5b0f9f3
--- /dev/null
+++ b/packages/app/src/session/timeline/interaction.ts
@@ -0,0 +1,328 @@
+import type { SessionMessageUser } from "@opencode-ai/client/promise"
+import { createAutoScroll } from "@opencode-ai/ui/hooks"
+import { createResizeObserver } from "@solid-primitives/resize-observer"
+import { useLocation } from "@solidjs/router"
+import { createEffect, on, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useLayout } from "@/context/layout"
+import type { SessionModel } from "../model"
+import { useSessionHashScroll } from "../use-session-hash-scroll"
+import { createTimelineModel } from "./model"
+
+export function createSessionTimelineInteraction(session: SessionModel) {
+  const layout = useLayout()
+  const location = useLocation()
+  const timeline = createTimelineModel({ session })
+  const [state, setState] = createStore({
+    messageID: undefined as string | undefined,
+    pendingMessage: undefined as string | undefined,
+    gestureAt: 0,
+    scroll: {
+      overflow: false,
+      bottom: true,
+      jump: false,
+    },
+  })
+  const autoScroll = createAutoScroll({ working: () => true, overflowAnchor: "none" })
+  let scroller: HTMLDivElement | undefined
+  let content: HTMLDivElement | undefined
+  let dock: HTMLDivElement | undefined
+  let dockHeight = 0
+  let revealMessage = (_id: string) => {}
+  let scrollToEnd = () => {}
+  let captureHistoryAnchor = () => {}
+  let restoreHistoryAnchor = (_done: boolean) => {}
+  let scrollMark = 0
+  let messageMark = 0
+  let scrollStateFrame: number | undefined
+  let scrollStateTarget: HTMLDivElement | undefined
+  let fillFrame: number | undefined
+  let historyContinuationFrame: number | undefined
+  const historyRequests = new Set<string>()
+  const visibleUserMessages = timeline.visibleUserMessages
+  const anchor = (id: string) => `message-${id}`
+
+  const cursor = () => {
+    if (!scroller) return state.messageID
+    const box = scroller.getBoundingClientRect()
+    const line = box.top + 100
+    const list = [...scroller.querySelectorAll<HTMLElement>("[data-message-id]")]
+      .map((element) => {
+        const id = element.dataset.messageId
+        if (!id) return undefined
+        const rect = element.getBoundingClientRect()
+        return { id, top: rect.top, bottom: rect.bottom }
+      })
+      .filter((item): item is { id: string; top: number; bottom: number } => !!item)
+    const shown = list.filter((item) => item.bottom > box.top && item.top < box.bottom)
+    const hit = shown.find((item) => item.top <= line && item.bottom >= line)
+    if (hit) return hit.id
+    const near = [...shown].sort((a, b) => {
+      const aDistance = Math.abs(a.top - line)
+      const bDistance = Math.abs(b.top - line)
+      if (aDistance !== bDistance) return aDistance - bDistance
+      return a.top - b.top
+    })[0]
+    if (near) return near.id
+    return list.filter((item) => item.top <= line).at(-1)?.id ?? list[0]?.id ?? state.messageID
+  }
+  const setActiveMessage = (message: SessionMessageUser | undefined) => {
+    messageMark = scrollMark
+    setState("messageID", message?.id)
+  }
+  const jumpThreshold = (element: HTMLDivElement) => Math.max(400, element.clientHeight)
+  const updateScrollState = (element: HTMLDivElement) => {
+    const max = element.scrollHeight - element.clientHeight
+    const distance = max - element.scrollTop
+    const overflow = max > 1
+    const bottom = !overflow || distance <= 2
+    const jump = overflow && distance > jumpThreshold(element)
+    if (state.scroll.overflow === overflow && state.scroll.bottom === bottom && state.scroll.jump === jump) return
+    setState("scroll", { overflow, bottom, jump })
+  }
+  const scheduleScrollState = (element: HTMLDivElement) => {
+    scrollStateTarget = element
+    if (scrollStateFrame !== undefined) return
+    scrollStateFrame = requestAnimationFrame(() => {
+      scrollStateFrame = undefined
+      const target = scrollStateTarget
+      scrollStateTarget = undefined
+      if (target) updateScrollState(target)
+    })
+  }
+  const { clearMessageHash, scrollToMessage } = useSessionHashScroll({
+    sessionKey: session.identity.sessionKey,
+    sessionID: () => session.identity.params.id,
+    messagesReady: timeline.ready,
+    visibleUserMessages,
+    historyMore: timeline.history.more,
+    historyLoading: timeline.history.loading,
+    loadMore: async () => undefined,
+    currentMessageId: () => state.messageID,
+    pendingMessage: () => state.pendingMessage,
+    setPendingMessage: (value) => setState("pendingMessage", value),
+    setActiveMessage,
+    autoScroll: {
+      pause: autoScroll.pause,
+      forceScrollToBottom: () => {
+        autoScroll.resume()
+        scrollToEnd()
+      },
+    },
+    scroller: () => scroller,
+    anchor,
+    revealMessage: (id) => revealMessage(id),
+    scheduleScrollState,
+    consumePendingMessage: (key) => layout.pendingMessage.consume(key),
+  })
+  const resume = () => {
+    setState("messageID", undefined)
+    autoScroll.resume()
+    scrollToEnd()
+    clearMessageHash()
+    if (scroller) scheduleScrollState(scroller)
+  }
+  const navigateMessage = (offset: number) => {
+    const messages = visibleUserMessages()
+    if (messages.length === 0) return
+    const current = state.messageID && messageMark === scrollMark ? state.messageID : cursor()
+    const base = current ? messages.findIndex((message) => message.id === current) : messages.length
+    const target = (base === -1 ? messages.length : base) + offset
+    if (target < 0 || target > messages.length) return
+    if (target === messages.length) {
+      resume()
+      return
+    }
+    autoScroll.pause()
+    scrollToMessage(messages[target], "auto")
+  }
+  const shouldAnchorBottom = () =>
+    !location.hash && !state.messageID && !state.pendingMessage && !autoScroll.userScrolled()
+  const markGesture = (target?: EventTarget | null) => {
+    if (!scroller) return
+    const element = target instanceof Element ? target : undefined
+    const nested = element?.closest("[data-scrollable]")
+    if (nested && nested !== scroller) return
+    setState("gestureAt", Date.now())
+  }
+  const setScrollRef = (element: HTMLDivElement | undefined) => {
+    scroller = element
+    autoScroll.scrollRef(element)
+    if (!element) return
+    scheduleScrollState(element)
+    fill()
+  }
+  const loadOlder = async () => {
+    const owner = session.ownership.capture()
+    if (timeline.history.loading() || historyRequests.has(owner.key)) return
+    historyRequests.add(owner.key)
+    const before = timeline.messages().length
+    try {
+      await timeline.history.loadOlder({
+        before: () => owner.run(captureHistoryAnchor),
+        after: (done) => owner.run(() => restoreHistoryAnchor(done)),
+      })
+    } finally {
+      historyRequests.delete(owner.key)
+    }
+    if (!owner.current() || timeline.messages().length <= before) return
+    if (!autoScroll.userScrolled() || !scroller || scroller.scrollTop >= 200 || !timeline.history.more()) return
+    if (historyContinuationFrame !== undefined) cancelAnimationFrame(historyContinuationFrame)
+    historyContinuationFrame = requestAnimationFrame(() => {
+      historyContinuationFrame = undefined
+      owner.run(onHistoryScroll)
+    })
+  }
+  const onHistoryScroll = () => {
+    if (
+      historyRequests.has(session.ownership.key()) ||
+      timeline.history.loading() ||
+      !autoScroll.userScrolled() ||
+      !scroller ||
+      scroller.scrollTop >= 200
+    )
+      return
+    void loadOlder()
+  }
+  const fill = () => {
+    if (fillFrame !== undefined) return
+    fillFrame = requestAnimationFrame(() => {
+      fillFrame = undefined
+      if (!session.identity.params.id || !timeline.ready()) return
+      if (autoScroll.userScrolled() || timeline.history.loading() || !scroller) return
+      if (scroller.scrollHeight > scroller.clientHeight + 1 || !timeline.history.more()) return
+      void loadOlder()
+    })
+  }
+  createEffect(
+    on(
+      () => visibleUserMessages().at(-1)?.id,
+      (lastID, previousID) => {
+        if (lastID && previousID && lastID > previousID) setState("messageID", undefined)
+      },
+      { defer: true },
+    ),
+  )
+  createEffect(
+    on(
+      session.identity.sessionKey,
+      () => {
+        setState("messageID", undefined)
+        setState("pendingMessage", undefined)
+      },
+      { defer: true },
+    ),
+  )
+  createEffect(
+    on(
+      () => session.identity.params.id,
+      (id, previous) => {
+        if (!id || !previous || id === previous || state.messageID || state.pendingMessage || location.hash) return
+        autoScroll.resume()
+      },
+    ),
+  )
+  createEffect(
+    on(
+      autoScroll.userScrolled,
+      (scrolled) => {
+        if (scrolled) return
+        setState("messageID", undefined)
+        clearMessageHash()
+      },
+      { defer: true },
+    ),
+  )
+  createEffect(
+    on(
+      () =>
+        [
+          session.identity.params.id,
+          timeline.ready(),
+          timeline.history.more(),
+          timeline.history.loading(),
+          autoScroll.userScrolled(),
+          visibleUserMessages().length,
+        ] as const,
+      ([id, ready, more, loading, scrolled]) => {
+        if (id && ready && more && !loading && !scrolled) fill()
+      },
+      { defer: true },
+    ),
+  )
+  createResizeObserver(
+    () => content,
+    () => {
+      if (scroller) scheduleScrollState(scroller)
+      fill()
+    },
+  )
+  createResizeObserver(
+    () => dock,
+    ({ height }) => {
+      const next = Math.ceil(height)
+      if (next === dockHeight) return
+      const delta = next - dockHeight
+      const stick = scroller
+        ? !autoScroll.userScrolled() ||
+          scroller.scrollHeight - scroller.clientHeight - scroller.scrollTop < 10 + Math.max(0, delta)
+        : false
+      dockHeight = next
+      if (stick) scrollToEnd()
+      if (scroller) scheduleScrollState(scroller)
+      fill()
+    },
+  )
+  onCleanup(() => {
+    if (historyContinuationFrame !== undefined) cancelAnimationFrame(historyContinuationFrame)
+    if (scrollStateFrame !== undefined) cancelAnimationFrame(scrollStateFrame)
+    if (fillFrame !== undefined) cancelAnimationFrame(fillFrame)
+  })
+
+  return {
+    actions: {
+      navigateMessage,
+      resume,
+      setActiveMessage,
+    },
+    autoScroll,
+    lastUserMessage: timeline.lastUserMessage,
+    resource: timeline.resource,
+    ready: timeline.ready,
+    scroll: state.scroll,
+    scroller: () => scroller,
+    userMessages: visibleUserMessages,
+    view: {
+      anchor,
+      hasGesture: () => Date.now() - state.gestureAt < 250,
+      markGesture,
+      markUserScroll: () => {
+        scrollMark += 1
+      },
+      onHistoryScroll,
+      scheduleScrollState,
+      setContentRef: (element: HTMLDivElement | undefined) => {
+        content = element
+        autoScroll.contentRef(element)
+        if (scroller) scheduleScrollState(scroller)
+      },
+      setDockRef: (element: HTMLDivElement | undefined) => {
+        dock = element
+      },
+      setHistoryAnchor: (handlers: { capture: () => void; restore: (done: boolean) => void }) => {
+        captureHistoryAnchor = handlers.capture
+        restoreHistoryAnchor = handlers.restore
+      },
+      setRevealMessage: (reveal: (id: string) => void) => {
+        revealMessage = reveal
+      },
+      setScrollRef,
+      setScrollToEnd: (scroll: () => void) => {
+        scrollToEnd = scroll
+      },
+      shouldAnchorBottom,
+    },
+  }
+}
+
+export type SessionTimelineInteraction = ReturnType<typeof createSessionTimelineInteraction>
diff --git a/packages/app/src/pages/session/timeline/measure.test.ts b/packages/app/src/session/timeline/measure.test.ts
similarity index 100%
rename from packages/app/src/pages/session/timeline/measure.test.ts
rename to packages/app/src/session/timeline/measure.test.ts
diff --git a/packages/app/src/pages/session/timeline/measure.ts b/packages/app/src/session/timeline/measure.ts
similarity index 100%
rename from packages/app/src/pages/session/timeline/measure.ts
rename to packages/app/src/session/timeline/measure.ts
diff --git a/packages/app/src/pages/session/timeline/message-timeline.tsx b/packages/app/src/session/timeline/message-timeline.tsx
similarity index 97%
rename from packages/app/src/pages/session/timeline/message-timeline.tsx
rename to packages/app/src/session/timeline/message-timeline.tsx
index 92baca81d94..7d4a8f9549d 100644
--- a/packages/app/src/pages/session/timeline/message-timeline.tsx
+++ b/packages/app/src/session/timeline/message-timeline.tsx
@@ -11,8 +11,8 @@ import { ProjectAvatar } from "@opencode-ai/ui/project-avatar"
 import { Button } from "@opencode-ai/ui/button"
 import type { Project } from "@/types"
 import { getFilename } from "@opencode-ai/util/path"
-import { Popover as KobaltePopover } from "@kobalte/core/popover"
-import { SessionContextUsage } from "@/components/session-context-usage"
+import { Popover } from "@kobalte/core/popover"
+import { SessionContextUsage } from "@/session/timeline/session-context-usage"
 import { useLanguage } from "@/context/language"
 import { useData } from "@/context/server"
 import { useWorkspaceLocation } from "@/context/location"
@@ -21,7 +21,7 @@ import { createSessionTimelineRowRenderer } from "@opencode-ai/session-ui/timeli
 import { createTimelineController, type TimelineController, type TimelineSessionSource } from "./controller"
 import { createTimelineVirtualizer } from "./virtualizer"
 import { containsDirectory, isWorkspaceDirectory, workspaceDirectories } from "@/utils/workspace"
-import { SessionWorkspaceMenu } from "@/components/session-workspace-menu"
+import { SessionWorkspaceMenu } from "@/session/timeline/session-workspace-menu"
 import { getProjectAvatarVariant } from "@/context/layout"
 import { displayName, getProjectAvatarSource } from "@/pages/layout/helpers"
 import type { SessionMessageUser } from "@opencode-ai/client/promise"
@@ -480,8 +480,8 @@ function MessageTimelineView(
                   <SessionContextUsage placement="bottom" />
                   <Show when={!parentID() && project()}>
                     {(project) => (
-                      <KobaltePopover open={summaryOpen()} placement="bottom-end" gutter={6} onOpenChange={setSummary}>
-                        <KobaltePopover.Trigger
+                      <Popover open={summaryOpen()} placement="bottom-end" gutter={6} onOpenChange={setSummary}>
+                        <Popover.Trigger
                           as={IconButton}
                           icon={<Icon name="window-analytics" />}
                           variant="ghost-muted"
@@ -490,8 +490,8 @@ function MessageTimelineView(
                           aria-label={language.t("session.summary.title")}
                           aria-expanded={summaryOpen()}
                         />
-                        <KobaltePopover.Portal>
-                          <KobaltePopover.Content class="z-50 border-0 bg-transparent p-0 outline-none">
+                        <Popover.Portal>
+                          <Popover.Content class="z-50 border-0 bg-transparent p-0 outline-none">
                             <SessionSummaryPanel
                               project={project()}
                               directory={sessionDirectory()}
@@ -508,9 +508,9 @@ function MessageTimelineView(
                                 props.onReview()
                               }}
                             />
-                          </KobaltePopover.Content>
-                        </KobaltePopover.Portal>
-                      </KobaltePopover>
+                          </Popover.Content>
+                        </Popover.Portal>
+                      </Popover>
                     )}
                   </Show>
                   <Show when={!parentID()}>
@@ -583,7 +583,7 @@ function MessageTimelineView(
                       </Menu.Portal>
                     </Menu>
 
-                    <KobaltePopover
+                    <Popover
                       open={share.open}
                       anchorRef={() => more}
                       placement="bottom-end"
@@ -594,8 +594,8 @@ function MessageTimelineView(
                         setShare("open", open)
                       }}
                     >
-                      <KobaltePopover.Portal>
-                        <KobaltePopover.Content
+                      <Popover.Portal>
+                        <Popover.Content
                           data-component="popover-content"
                           class="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)]"
                           style={{ "min-width": "320px" }}
@@ -688,9 +688,9 @@ function MessageTimelineView(
                               </div>
                             </Show>
                           </div>
-                        </KobaltePopover.Content>
-                      </KobaltePopover.Portal>
-                    </KobaltePopover>
+                        </Popover.Content>
+                      </Popover.Portal>
+                    </Popover>
                   </Show>
                 </div>
               )}
diff --git a/packages/app/src/pages/session/timeline/model.test.ts b/packages/app/src/session/timeline/model.test.ts
similarity index 100%
rename from packages/app/src/pages/session/timeline/model.test.ts
rename to packages/app/src/session/timeline/model.test.ts
diff --git a/packages/app/src/pages/session/timeline/model.ts b/packages/app/src/session/timeline/model.ts
similarity index 95%
rename from packages/app/src/pages/session/timeline/model.ts
rename to packages/app/src/session/timeline/model.ts
index a7c1429a106..4d386cb0cdc 100644
--- a/packages/app/src/pages/session/timeline/model.ts
+++ b/packages/app/src/session/timeline/model.ts
@@ -1,14 +1,14 @@
 import type { SessionMessageInfo } from "@opencode-ai/client/promise"
 import { createMemo, createResource, type Accessor } from "solid-js"
 import { useData } from "@/context/server"
-import type { SessionController } from "../session-controller"
+import type { SessionModel } from "../model"
 
 export {
   selectSessionUserMessages as selectUserMessages,
   selectVisibleSessionUserMessages as selectVisibleUserMessages,
 } from "../session-domain"
 
-export function createTimelineModel(input: { session: Pick<SessionController, "identity" | "history"> }) {
+export function createTimelineModel(input: { session: Pick<SessionModel, "identity" | "history"> }) {
   const data = useData()
 
   const [resource] = createResource(
diff --git a/packages/app/src/pages/session/timeline/observe-element-offset.test.ts b/packages/app/src/session/timeline/observe-element-offset.test.ts
similarity index 100%
rename from packages/app/src/pages/session/timeline/observe-element-offset.test.ts
rename to packages/app/src/session/timeline/observe-element-offset.test.ts
diff --git a/packages/app/src/pages/session/timeline/observe-element-offset.ts b/packages/app/src/session/timeline/observe-element-offset.ts
similarity index 100%
rename from packages/app/src/pages/session/timeline/observe-element-offset.ts
rename to packages/app/src/session/timeline/observe-element-offset.ts
diff --git a/packages/app/src/pages/session/timeline/projection.ts b/packages/app/src/session/timeline/projection.ts
similarity index 100%
rename from packages/app/src/pages/session/timeline/projection.ts
rename to packages/app/src/session/timeline/projection.ts
diff --git a/packages/app/src/components/session-context-usage.tsx b/packages/app/src/session/timeline/session-context-usage.tsx
similarity index 97%
rename from packages/app/src/components/session-context-usage.tsx
rename to packages/app/src/session/timeline/session-context-usage.tsx
index d34ffe83ac1..7f7b3b31d4e 100644
--- a/packages/app/src/components/session-context-usage.tsx
+++ b/packages/app/src/session/timeline/session-context-usage.tsx
@@ -10,8 +10,8 @@ import { useData } from "@/context/server"
 import { useLanguage } from "@/context/language"
 import { useProviders } from "@/hooks/use-providers"
 import { useWorkspaceLocation } from "@/context/location"
-import { useSessionLayout } from "@/pages/session/session-layout"
-import { createSessionTabs } from "@/pages/session/helpers"
+import { useSessionLayout } from "@/session/session-layout"
+import { createSessionTabs } from "@/session/helpers"
 
 interface SessionContextUsageProps {
   variant?: "button" | "indicator"
diff --git a/packages/app/src/components/session-workspace-menu.tsx b/packages/app/src/session/timeline/session-workspace-menu.tsx
similarity index 100%
rename from packages/app/src/components/session-workspace-menu.tsx
rename to packages/app/src/session/timeline/session-workspace-menu.tsx
diff --git a/packages/app/src/pages/session/timeline/virtual-items.ts b/packages/app/src/session/timeline/virtual-items.ts
similarity index 100%
rename from packages/app/src/pages/session/timeline/virtual-items.ts
rename to packages/app/src/session/timeline/virtual-items.ts
diff --git a/packages/app/src/pages/session/timeline/virtualizer.tsx b/packages/app/src/session/timeline/virtualizer.tsx
similarity index 99%
rename from packages/app/src/pages/session/timeline/virtualizer.tsx
rename to packages/app/src/session/timeline/virtualizer.tsx
index dbf68598634..3774a32380e 100644
--- a/packages/app/src/pages/session/timeline/virtualizer.tsx
+++ b/packages/app/src/session/timeline/virtualizer.tsx
@@ -1,7 +1,7 @@
 import { createVirtualizer, defaultRangeExtractor, elementScroll, type VirtualItem } from "@tanstack/solid-virtual"
 import { isScrollKeyTarget, scrollKey, scrollKeyOwner, ScrollView } from "@opencode-ai/ui/scroll-view"
 import { TimelineRow } from "@opencode-ai/session-ui/timeline/projection"
-import { normalizeWheelDelta, shouldMarkBoundaryGesture } from "@/pages/session/message-gesture"
+import { normalizeWheelDelta, shouldMarkBoundaryGesture } from "@/session/message-gesture"
 import { useLanguage } from "@/context/language"
 import {
   createEffect,
diff --git a/packages/app/src/pages/session/usage-exceeded-dialogs.tsx b/packages/app/src/session/usage-exceeded-dialogs.tsx
similarity index 97%
rename from packages/app/src/pages/session/usage-exceeded-dialogs.tsx
rename to packages/app/src/session/usage-exceeded-dialogs.tsx
index 7214a800359..8082232d908 100644
--- a/packages/app/src/pages/session/usage-exceeded-dialogs.tsx
+++ b/packages/app/src/session/usage-exceeded-dialogs.tsx
@@ -75,7 +75,7 @@ export function useUsageExceededDialogs() {
               setGoUpsellState(keys.lastSeenAt, Date.now())
               if (dontShowAgain) setGoUpsellState(keys.dontShow, Date.now())
               else {
-                void import("../../components/dialog-connect-provider").then((x) => {
+                void import("@/components/dialog-connect-provider").then((x) => {
                   const controller = x.useProviderConnectController()
                   controller.select("opencode-go")
                   void dialog.show(() => <x.DialogConnectProvider controller={controller} />)
diff --git a/packages/app/src/pages/session/use-session-hash-scroll.test.ts b/packages/app/src/session/use-session-hash-scroll.test.ts
similarity index 100%
rename from packages/app/src/pages/session/use-session-hash-scroll.test.ts
rename to packages/app/src/session/use-session-hash-scroll.test.ts
diff --git a/packages/app/src/pages/session/use-session-hash-scroll.ts b/packages/app/src/session/use-session-hash-scroll.ts
similarity index 100%
rename from packages/app/src/pages/session/use-session-hash-scroll.ts
rename to packages/app/src/session/use-session-hash-scroll.ts
diff --git a/packages/app/test-browser/review-panel-v2-state.test.ts b/packages/app/test-browser/review-panel-state.test.ts
similarity index 86%
rename from packages/app/test-browser/review-panel-v2-state.test.ts
rename to packages/app/test-browser/review-panel-state.test.ts
index 5f1073d2982..a3c0ebce667 100644
--- a/packages/app/test-browser/review-panel-v2-state.test.ts
+++ b/packages/app/test-browser/review-panel-state.test.ts
@@ -2,8 +2,9 @@ import { beforeAll, expect, mock, test } from "bun:test"
 import type { AsyncStorage } from "@solid-primitives/storage"
 import { createEffect, createRoot } from "solid-js"
 import type { Platform } from "@/context/platform"
+import type { ReviewPanelState } from "@/session/review/panel-state"
 
-let createReviewPanelV2State: typeof import("@/pages/session/v2/review-panel-v2-state").createReviewPanelV2State
+let createReviewPanelState: (platform?: Platform) => ReviewPanelState
 let read: ((value: string | null) => void) | undefined
 
 const storage: AsyncStorage = {
@@ -32,13 +33,13 @@ beforeAll(async () => {
     SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX: 480,
   }))
 
-  createReviewPanelV2State = (await import("@/pages/session/v2/review-panel-v2-state")).createReviewPanelV2State
+  createReviewPanelState = (await import("@/session/review/panel-state")).createReviewPanelState
 })
 
 test("enables sidebar motion only after custom width hydration", async () => {
   await new Promise<void>((resolve, reject) => {
     createRoot((dispose) => {
-      const state = createReviewPanelV2State(platform)
+      const state = createReviewPanelState(platform)
 
       try {
         expect(state.sidebarTransition()).toBeFalse()
diff --git a/packages/app/test-browser/session-ownership.test.ts b/packages/app/test-browser/session-ownership.test.ts
index 2f81c7d5954..efa84f27031 100644
--- a/packages/app/test-browser/session-ownership.test.ts
+++ b/packages/app/test-browser/session-ownership.test.ts
@@ -1,6 +1,6 @@
 import { describe, expect, test } from "bun:test"
 import { createRoot, createSignal } from "solid-js"
-import { createSessionOwnership } from "@/pages/session/session-ownership"
+import { createSessionOwnership } from "@/session/session-ownership"
 
 describe("createSessionOwnership", () => {
   test("invalidates captured work when its Solid owner is disposed", () => {
diff --git a/packages/app/test-browser/session-resolution.test.ts b/packages/app/test-browser/session-resolution.test.ts
index 30d4601e913..821a520e4db 100644
--- a/packages/app/test-browser/session-resolution.test.ts
+++ b/packages/app/test-browser/session-resolution.test.ts
@@ -1,6 +1,6 @@
 import { expect, test } from "bun:test"
 import { createRoot, createSignal } from "solid-js"
-import { createSessionResolution } from "@/pages/session/session-resolution"
+import { createSessionResolution } from "@/session/session-resolution"
 
 type Session = { id: string; directory: string }
 
diff --git a/packages/app/test-browser/solid-virtual.test.ts b/packages/app/test-browser/solid-virtual.test.ts
index 9327eacf426..bb8feabe8cd 100644
--- a/packages/app/test-browser/solid-virtual.test.ts
+++ b/packages/app/test-browser/solid-virtual.test.ts
@@ -1,7 +1,7 @@
 import { expect, test } from "bun:test"
 import { createVirtualizer, defaultRangeExtractor, Virtualizer } from "@tanstack/solid-virtual"
 import { createRoot, createSignal } from "solid-js"
-import { filterVirtualIndexes } from "@/pages/session/timeline/virtual-items"
+import { filterVirtualIndexes } from "@/session/timeline/virtual-items"
 
 test("end anchoring survives consecutive resizes when the first scroll write is clamped", () => {
   const writes: { offset: number; adjustments?: number }[] = []