diff --git a/packages/app/src/components/file-tree-v2.tsx b/packages/app/src/components/file-tree-v2.tsx
new file mode 100644
index 000000000000..21802201c72b
--- /dev/null
+++ b/packages/app/src/components/file-tree-v2.tsx
@@ -0,0 +1,511 @@
+import { useFile } from "@/context/file"
+import { encodeFilePath } from "@/context/file/path"
+import { Collapsible } from "@opencode-ai/ui/collapsible"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import "@opencode-ai/ui/v2/file-tree-v2.css"
+import {
+  createEffect,
+  createMemo,
+  For,
+  Match,
+  on,
+  Show,
+  splitProps,
+  Switch,
+  untrack,
+  type ComponentProps,
+  type ParentProps,
+} from "solid-js"
+import { Dynamic } from "solid-js/web"
+import type { FileNode } from "@opencode-ai/sdk/v2"
+import { dirsToExpand, shouldListRoot } from "@/components/file-tree"
+
+const MAX_DEPTH = 128
+
+function pathToFileUrl(filepath: string): string {
+  return `file://${encodeFilePath(filepath)}`
+}
+
+type Kind = "add" | "del" | "mix"
+
+type Filter = {
+  files: Set<string>
+  dirs: Set<string>
+}
+
+function visibleNodesForPath(
+  path: string,
+  children: (dir: string) => FileNode[],
+  current: Filter | undefined,
+  query?: string,
+) {
+  const nodes = children(path)
+  if (!current) {
+    const value = query?.trim().toLowerCase()
+    if (!value) return nodes
+    return nodes.filter((node) => {
+      if (node.type === "directory") return true
+      return node.name.toLowerCase().includes(value)
+    })
+  }
+
+  const parent = (item: string) => {
+    const idx = item.lastIndexOf("/")
+    if (idx === -1) return ""
+    return item.slice(0, idx)
+  }
+
+  const leaf = (item: string) => {
+    const idx = item.lastIndexOf("/")
+    return idx === -1 ? item : item.slice(idx + 1)
+  }
+
+  const out = nodes.filter((node) => {
+    if (node.type === "file") return current.files.has(node.path)
+    return current.dirs.has(node.path)
+  })
+
+  const seen = new Set(out.map((node) => node.path))
+
+  for (const dir of current.dirs) {
+    if (parent(dir) !== path) continue
+    if (seen.has(dir)) continue
+    out.push({
+      name: leaf(dir),
+      path: dir,
+      absolute: dir,
+      type: "directory",
+      ignored: false,
+    })
+    seen.add(dir)
+  }
+
+  for (const item of current.files) {
+    if (parent(item) !== path) continue
+    if (seen.has(item)) continue
+    out.push({
+      name: leaf(item),
+      path: item,
+      absolute: item,
+      type: "file",
+      ignored: false,
+    })
+    seen.add(item)
+  }
+
+  out.sort((a, b) => {
+    if (a.type !== b.type) {
+      return a.type === "directory" ? -1 : 1
+    }
+    return a.name.localeCompare(b.name)
+  })
+
+  const value = query?.trim().toLowerCase()
+  if (!value) return out
+
+  return out.filter((node) => {
+    if (node.type === "directory") return true
+    return node.name.toLowerCase().includes(value)
+  })
+}
+
+const INDENT_STEP = 16
+
+function rowPaddingLeft(level: number, type: FileNode["type"]) {
+  if (type === "directory") return 8 + level * INDENT_STEP
+  if (level === 0) return 8
+  return 8 + level * INDENT_STEP - INDENT_STEP
+}
+
+function guideLineLeft(level: number) {
+  return rowPaddingLeft(level, "directory") + 8
+}
+
+type ChangeState = "modified" | "added" | "deleted" | "renamed" | "untracked"
+
+const kindLabel = (kind: Kind, showModifiedLabel: boolean) => {
+  if (kind === "add") return "A"
+  if (kind === "del") return "D"
+  if (showModifiedLabel) return "M"
+  return ""
+}
+
+const kindChangeState = (kind: Kind): ChangeState => {
+  if (kind === "add") return "added"
+  if (kind === "del") return "deleted"
+  return "modified"
+}
+
+const visibleKind = (node: FileNode, kinds?: ReadonlyMap<string, Kind>, marks?: Set<string>) => {
+  const kind = kinds?.get(node.path)
+  if (!kind) return
+  if (!marks?.has(node.path)) return
+  return kind
+}
+
+const buildDragImage = (target: HTMLElement) => {
+  const icon = target.querySelector('[data-component="file-icon"]') ?? target.querySelector("svg")
+  const text = target.querySelector("span")
+  if (!icon || !text) return
+
+  const image = document.createElement("div")
+  image.className =
+    "flex items-center gap-x-2 px-2 py-1 bg-surface-raised-base rounded-md border border-border-base text-12-regular text-text-strong"
+  image.style.position = "absolute"
+  image.style.top = "-1000px"
+  image.innerHTML = (icon as SVGElement).outerHTML + (text as HTMLSpanElement).outerHTML
+  return image
+}
+
+const withFileDragImage = (event: DragEvent) => {
+  const image = buildDragImage(event.currentTarget as HTMLElement)
+  if (!image) return
+  document.body.appendChild(image)
+  event.dataTransfer?.setDragImage(image, 0, 12)
+  setTimeout(() => document.body.removeChild(image), 0)
+}
+
+const FileTreeNodeV2 = (
+  p: ParentProps &
+    ComponentProps<"div"> &
+    ComponentProps<"button"> & {
+      node: FileNode
+      level: number
+      active?: string
+      nodeClass?: string
+      draggable: boolean
+      kinds?: ReadonlyMap<string, Kind>
+      marks?: Set<string>
+      showModifiedLabel?: boolean
+      showFolderChangeIndicator?: boolean
+      as?: "div" | "button"
+    },
+) => {
+  const [local, rest] = splitProps(p, [
+    "node",
+    "level",
+    "active",
+    "nodeClass",
+    "draggable",
+    "kinds",
+    "marks",
+    "showModifiedLabel",
+    "showFolderChangeIndicator",
+    "as",
+    "children",
+    "class",
+    "classList",
+  ])
+  const kind = () => visibleKind(local.node, local.kinds, local.marks)
+
+  return (
+    <Dynamic
+      component={local.as ?? "div"}
+      data-slot="file-tree-v2-row"
+      data-selected={local.node.path === local.active ? "" : undefined}
+      data-ignored={local.node.ignored ? "" : undefined}
+      classList={{
+        ...local.classList,
+        [local.class ?? ""]: !!local.class,
+        [local.nodeClass ?? ""]: !!local.nodeClass,
+      }}
+      style={`padding-left: ${rowPaddingLeft(local.level, local.node.type)}px`}
+      draggable={local.draggable}
+      onDragStart={(event: DragEvent) => {
+        if (!local.draggable) return
+        event.dataTransfer?.setData("text/plain", `file:${local.node.path}`)
+        event.dataTransfer?.setData("text/uri-list", pathToFileUrl(local.node.path))
+        if (event.dataTransfer) event.dataTransfer.effectAllowed = "copy"
+        withFileDragImage(event)
+      }}
+      {...rest}
+    >
+      {local.children}
+      <span class="flex-1 min-w-0 text-12-medium whitespace-nowrap truncate">{local.node.name}</span>
+      {(() => {
+        const value = kind()
+        if (!value) return null
+        if (local.node.type === "file") {
+          return (
+            <span data-slot="file-tree-v2-change" data-change={kindChangeState(value)}>
+              {kindLabel(value, local.showModifiedLabel ?? false)}
+            </span>
+          )
+        }
+        if (local.showFolderChangeIndicator === false) return null
+        return <span data-slot="file-tree-v2-descendant-change" aria-hidden="true" />
+      })()}
+    </Dynamic>
+  )
+}
+
+export default function FileTreeV2(props: {
+  path: string
+  class?: string
+  nodeClass?: string
+  active?: string
+  level?: number
+  allowed?: readonly string[]
+  modified?: readonly string[]
+  kinds?: ReadonlyMap<string, Kind>
+  query?: string
+  showModifiedLabel?: boolean
+  showFolderChangeIndicator?: boolean
+  draggable?: boolean
+  onFileClick?: (file: FileNode) => void
+  onFileDoubleClick?: (file: FileNode) => void
+
+  _filter?: Filter
+  _marks?: Set<string>
+  _deeps?: Map<string, number>
+  _kinds?: ReadonlyMap<string, Kind>
+  _chain?: readonly string[]
+}) {
+  const file = useFile()
+  const level = props.level ?? 0
+  const draggable = () => props.draggable ?? true
+
+  const key = (p: string) =>
+    file
+      .normalize(p)
+      .replace(/[\\/]+$/, "")
+      .replaceAll("\\", "/")
+  const chain = props._chain ? [...props._chain, key(props.path)] : [key(props.path)]
+
+  const filter = createMemo(() => {
+    if (props._filter) return props._filter
+
+    const allowed = props.allowed
+    if (!allowed) return
+
+    const files = new Set(allowed)
+    const dirs = new Set<string>()
+
+    for (const item of allowed) {
+      const parts = item.split("/")
+      const parents = parts.slice(0, -1)
+      for (const [idx] of parents.entries()) {
+        const dir = parents.slice(0, idx + 1).join("/")
+        if (dir) dirs.add(dir)
+      }
+    }
+
+    return { files, dirs }
+  })
+
+  const marks = createMemo(() => {
+    if (props._marks) return props._marks
+
+    const out = new Set<string>()
+    for (const item of props.modified ?? []) out.add(item)
+    for (const item of props.kinds?.keys() ?? []) out.add(item)
+    if (out.size === 0) return
+    return out
+  })
+
+  const kinds = createMemo(() => {
+    if (props._kinds) return props._kinds
+    return props.kinds
+  })
+
+  const deeps = createMemo(() => {
+    if (props._deeps) return props._deeps
+
+    const out = new Map<string, number>()
+
+    const root = props.path
+    if (!(file.tree.state(root)?.expanded ?? false)) return out
+
+    const seen = new Set<string>()
+    const stack: { dir: string; lvl: number; i: number; kids: string[]; max: number }[] = []
+
+    const push = (dir: string, lvl: number) => {
+      const id = key(dir)
+      if (seen.has(id)) return
+      seen.add(id)
+
+      const kids = file.tree
+        .children(dir)
+        .filter((node) => node.type === "directory" && (file.tree.state(node.path)?.expanded ?? false))
+        .map((node) => node.path)
+
+      stack.push({ dir, lvl, i: 0, kids, max: lvl })
+    }
+
+    push(root, level - 1)
+
+    while (stack.length > 0) {
+      const top = stack[stack.length - 1]!
+
+      if (top.i < top.kids.length) {
+        const next = top.kids[top.i]!
+        top.i++
+        push(next, top.lvl + 1)
+        continue
+      }
+
+      out.set(top.dir, top.max)
+      stack.pop()
+
+      const parent = stack[stack.length - 1]
+      if (!parent) continue
+      parent.max = Math.max(parent.max, top.max)
+    }
+
+    return out
+  })
+
+  createEffect(() => {
+    const current = filter()
+    const dirs = dirsToExpand({
+      level,
+      filter: current,
+      expanded: (dir) => untrack(() => file.tree.state(dir)?.expanded) ?? false,
+    })
+    for (const dir of dirs) file.tree.expand(dir)
+  })
+
+  createEffect(
+    on(
+      () => props.path,
+      (path) => {
+        const dir = untrack(() => file.tree.state(path))
+        if (!shouldListRoot({ level, dir })) return
+        void file.tree.list(path)
+      },
+      { defer: false },
+    ),
+  )
+
+  const nodes = createMemo(() => visibleNodesForPath(props.path, file.tree.children, filter(), props.query))
+
+  return (
+    <div
+      data-component="file-tree-v2"
+      data-show-modified-label={props.showModifiedLabel ? "" : undefined}
+      class={props.class}
+    >
+      <For each={nodes()}>
+        {(node) => {
+          const expanded = () => file.tree.state(node.path)?.expanded ?? false
+          const deep = () => deeps().get(node.path) ?? -1
+          const hasChildren = () =>
+            visibleNodesForPath(node.path, file.tree.children, filter(), props.query).length > 0
+          return (
+            <Switch>
+              <Match when={node.type === "directory"}>
+                <Collapsible
+                  variant="ghost"
+                  class="w-full"
+                  data-scope="file-tree-v2"
+                  forceMount={false}
+                  open={expanded()}
+                  onOpenChange={(open) => (open ? file.tree.expand(node.path) : file.tree.collapse(node.path))}
+                >
+                  <Collapsible.Trigger>
+                    <FileTreeNodeV2
+                      node={node}
+                      level={level}
+                      active={props.active}
+                      nodeClass={props.nodeClass}
+                      draggable={draggable()}
+                      kinds={kinds()}
+                      marks={marks()}
+                      showModifiedLabel={props.showModifiedLabel}
+                      showFolderChangeIndicator={props.showFolderChangeIndicator}
+                    >
+                      <div
+                        data-slot="file-tree-v2-chevron"
+                        data-expanded={expanded() ? "" : undefined}
+                        class="size-4 flex items-center justify-center"
+                      >
+                        <svg
+                          width="16"
+                          height="16"
+                          viewBox="0 0 16 16"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                          aria-hidden="true"
+                        >
+                          <path d="M5 6.5L8 9.5L11 6.5" stroke="currentColor" />
+                        </svg>
+                      </div>
+                    </FileTreeNodeV2>
+                  </Collapsible.Trigger>
+                  <Show when={hasChildren()}>
+                    <Collapsible.Content class="relative">
+                      <div
+                        classList={{
+                          "absolute top-0 bottom-0 w-px pointer-events-none bg-border-weak-base opacity-0 transition-opacity duration-150 ease-out motion-reduce:transition-none": true,
+                          "group-hover/file-tree-v2:opacity-100": expanded() && deep() === level,
+                          "group-hover/file-tree-v2:opacity-50": !(expanded() && deep() === level),
+                        }}
+                        style={`left: ${guideLineLeft(level)}px`}
+                      />
+                      <Show
+                        when={level < MAX_DEPTH && !chain.includes(key(node.path))}
+                        fallback={<div class="px-2 py-1 text-12-regular text-text-weak">...</div>}
+                      >
+                        <FileTreeV2
+                          path={node.path}
+                          level={level + 1}
+                          allowed={props.allowed}
+                          modified={props.modified}
+                          kinds={props.kinds}
+                          query={props.query}
+                          showModifiedLabel={props.showModifiedLabel}
+                          showFolderChangeIndicator={props.showFolderChangeIndicator}
+                          active={props.active}
+                          draggable={props.draggable}
+                          onFileClick={props.onFileClick}
+                          onFileDoubleClick={props.onFileDoubleClick}
+                          _filter={filter()}
+                          _marks={marks()}
+                          _deeps={deeps()}
+                          _kinds={kinds()}
+                          _chain={chain}
+                        />
+                      </Show>
+                    </Collapsible.Content>
+                  </Show>
+                </Collapsible>
+              </Match>
+              <Match when={node.type === "file"}>
+                <FileTreeNodeV2
+                  node={node}
+                  level={level}
+                  active={props.active}
+                  nodeClass={props.nodeClass}
+                  draggable={draggable()}
+                  kinds={kinds()}
+                  marks={marks()}
+                  showModifiedLabel={props.showModifiedLabel}
+                  showFolderChangeIndicator={props.showFolderChangeIndicator}
+                  as="button"
+                  type="button"
+                  onClick={() => props.onFileClick?.(node)}
+                  onDblClick={() => props.onFileDoubleClick?.(node)}
+                >
+                  <Show when={level > 0}>
+                    <div class="w-4 shrink-0" />
+                  </Show>
+                  <Show
+                    when={!node.ignored}
+                    fallback={
+                      <FileIcon node={node} class="size-4 filetree-icon filetree-icon--mono" mono />
+                    }
+                  >
+                    <span class="filetree-iconpair size-4">
+                      <FileIcon node={node} class="size-4 filetree-icon filetree-icon--color" />
+                      <FileIcon node={node} class="size-4 filetree-icon filetree-icon--mono" mono />
+                    </span>
+                  </Show>
+                </FileTreeNodeV2>
+              </Match>
+            </Switch>
+          )
+        }}
+      </For>
+    </div>
+  )
+}
diff --git a/packages/app/src/components/session/index.ts b/packages/app/src/components/session/index.ts
index 8e424f0f36f7..b5eb690ccf87 100644
--- a/packages/app/src/components/session/index.ts
+++ b/packages/app/src/components/session/index.ts
@@ -1,6 +1,8 @@
 export { SessionHeader } from "./session-header"
 export { SessionContextTab } from "./session-context-tab"
 export { SortableTab, FileVisual } from "./session-sortable-tab"
+export { SortableTabV2 } from "./session-sortable-tab-v2"
 export { SortableTerminalTab } from "./session-sortable-terminal-tab"
+export { SortableTerminalTabV2 } from "./session-sortable-terminal-tab-v2"
 export { NewSessionView } from "./session-new-view"
 export { NewSessionDesignView } from "./session-new-design-view"
diff --git a/packages/app/src/components/session/open-in-app-v2.tsx b/packages/app/src/components/session/open-in-app-v2.tsx
new file mode 100644
index 000000000000..df633a8ded8c
--- /dev/null
+++ b/packages/app/src/components/session/open-in-app-v2.tsx
@@ -0,0 +1,92 @@
+import { For, Show } from "solid-js"
+import { AppIcon } from "@opencode-ai/ui/app-icon"
+import { Icon } from "@opencode-ai/ui/icon"
+import { Spinner } from "@opencode-ai/ui/spinner"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { MenuV2 } from "@opencode-ai/ui/v2/menu-v2"
+import { SplitButtonV2, SplitButtonV2Action, SplitButtonV2MenuTrigger } from "@opencode-ai/ui/v2/split-button-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { useLanguage } from "@/context/language"
+import { OPEN_APPS, type OpenApp, useOpenInApp } from "@/components/session/open-in-app"
+
+export function OpenInAppV2(props: { directory: () => string }) {
+  const language = useLanguage()
+  const state = useOpenInApp(props)
+
+  return (
+    <Show when={props.directory() && state.canOpen()}>
+      <SplitButtonV2 class="session-review-v2-open-in-app">
+        <TooltipV2
+          placement="bottom"
+          value={language.t("session.header.open.ariaLabel", { app: state.current().label })}
+          class="flex items-center"
+        >
+          <SplitButtonV2Action
+            onClick={() => state.openDir(state.current().id)}
+            disabled={state.opening()}
+            aria-label={language.t("session.header.open.ariaLabel", { app: state.current().label })}
+          >
+            <Show when={state.opening()} fallback={<AppIcon id={state.current().icon} class="size-[18px]" />}>
+              <Spinner class="size-3.5" />
+            </Show>
+          </SplitButtonV2Action>
+        </TooltipV2>
+        <MenuV2
+          gutter={4}
+          modal={false}
+          placement="bottom-end"
+          open={state.menu.open}
+          onOpenChange={(open) => state.setMenu("open", open)}
+        >
+          <MenuV2.Trigger
+            as={SplitButtonV2MenuTrigger}
+            disabled={state.opening()}
+            aria-label={language.t("session.header.open.menu")}
+          >
+            <IconV2 name="chevron-down" size="small" />
+          </MenuV2.Trigger>
+          <MenuV2.Portal>
+            <MenuV2.Content class="open-in-app-v2-menu">
+              <MenuV2.Group>
+                <MenuV2.GroupLabel>{language.t("session.header.openIn")}</MenuV2.GroupLabel>
+                <MenuV2.RadioGroup
+                  value={state.current().id}
+                  onChange={(value) => {
+                    if (!OPEN_APPS.includes(value as OpenApp)) return
+                    state.selectApp(value as OpenApp)
+                  }}
+                >
+                  <For each={state.options()}>
+                    {(option) => (
+                      <MenuV2.RadioItem
+                        value={option.id}
+                        disabled={state.opening()}
+                        onSelect={() => {
+                          state.setMenu("open", false)
+                          state.openDir(option.id)
+                        }}
+                      >
+                        <AppIcon id={option.icon} />
+                        {option.label}
+                      </MenuV2.RadioItem>
+                    )}
+                  </For>
+                </MenuV2.RadioGroup>
+              </MenuV2.Group>
+              <MenuV2.Separator />
+              <MenuV2.Item
+                onSelect={() => {
+                  state.setMenu("open", false)
+                  state.copyPath()
+                }}
+              >
+                <Icon name="copy" size="small" class="text-icon-weak" />
+                {language.t("session.header.open.copyPath")}
+              </MenuV2.Item>
+            </MenuV2.Content>
+          </MenuV2.Portal>
+        </MenuV2>
+      </SplitButtonV2>
+    </Show>
+  )
+}
diff --git a/packages/app/src/components/session/open-in-app.tsx b/packages/app/src/components/session/open-in-app.tsx
new file mode 100644
index 000000000000..0d5cd9067122
--- /dev/null
+++ b/packages/app/src/components/session/open-in-app.tsx
@@ -0,0 +1,232 @@
+import { createEffect, createMemo } from "solid-js"
+import { createStore } from "solid-js/store"
+import { useLanguage } from "@/context/language"
+import { usePlatform } from "@/context/platform"
+import { useServer } from "@/context/server"
+import { Persist, persisted } from "@/utils/persist"
+import { showToast } from "@/utils/toast"
+
+export const OPEN_APPS = [
+  "vscode",
+  "cursor",
+  "zed",
+  "textmate",
+  "antigravity",
+  "finder",
+  "terminal",
+  "iterm2",
+  "ghostty",
+  "warp",
+  "xcode",
+  "android-studio",
+  "powershell",
+  "sublime-text",
+] as const
+
+export type OpenApp = (typeof OPEN_APPS)[number]
+export type OpenAppOS = "macos" | "windows" | "linux" | "unknown"
+
+export const MAC_OPEN_APPS = [
+  {
+    id: "vscode",
+    label: "session.header.open.app.vscode",
+    icon: "vscode",
+    openWith: "Visual Studio Code",
+  },
+  { id: "cursor", label: "session.header.open.app.cursor", icon: "cursor", openWith: "Cursor" },
+  { id: "zed", label: "session.header.open.app.zed", icon: "zed", openWith: "Zed" },
+  { id: "textmate", label: "session.header.open.app.textmate", icon: "textmate", openWith: "TextMate" },
+  {
+    id: "antigravity",
+    label: "session.header.open.app.antigravity",
+    icon: "antigravity",
+    openWith: "Antigravity",
+  },
+  { id: "terminal", label: "session.header.open.app.terminal", icon: "terminal", openWith: "Terminal" },
+  { id: "iterm2", label: "session.header.open.app.iterm2", icon: "iterm2", openWith: "iTerm" },
+  { id: "ghostty", label: "session.header.open.app.ghostty", icon: "ghostty", openWith: "Ghostty" },
+  { id: "warp", label: "session.header.open.app.warp", icon: "warp", openWith: "Warp" },
+  { id: "xcode", label: "session.header.open.app.xcode", icon: "xcode", openWith: "Xcode" },
+  {
+    id: "android-studio",
+    label: "session.header.open.app.androidStudio",
+    icon: "android-studio",
+    openWith: "Android Studio",
+  },
+  {
+    id: "sublime-text",
+    label: "session.header.open.app.sublimeText",
+    icon: "sublime-text",
+    openWith: "Sublime Text",
+  },
+] as const
+
+export const WINDOWS_OPEN_APPS = [
+  { id: "vscode", label: "session.header.open.app.vscode", icon: "vscode", openWith: "code" },
+  { id: "cursor", label: "session.header.open.app.cursor", icon: "cursor", openWith: "cursor" },
+  { id: "zed", label: "session.header.open.app.zed", icon: "zed", openWith: "zed" },
+  {
+    id: "powershell",
+    label: "session.header.open.app.powershell",
+    icon: "powershell",
+    openWith: "powershell",
+  },
+  {
+    id: "sublime-text",
+    label: "session.header.open.app.sublimeText",
+    icon: "sublime-text",
+    openWith: "Sublime Text",
+  },
+] as const
+
+export const LINUX_OPEN_APPS = [
+  { id: "vscode", label: "session.header.open.app.vscode", icon: "vscode", openWith: "code" },
+  { id: "cursor", label: "session.header.open.app.cursor", icon: "cursor", openWith: "cursor" },
+  { id: "zed", label: "session.header.open.app.zed", icon: "zed", openWith: "zed" },
+  {
+    id: "sublime-text",
+    label: "session.header.open.app.sublimeText",
+    icon: "sublime-text",
+    openWith: "Sublime Text",
+  },
+] as const
+
+export function detectOpenAppOS(platform: ReturnType<typeof usePlatform>): OpenAppOS {
+  if (platform.platform === "desktop" && platform.os) return platform.os
+  if (typeof navigator !== "object") return "unknown"
+  const value = navigator.platform || navigator.userAgent
+  if (/Mac/i.test(value)) return "macos"
+  if (/Win/i.test(value)) return "windows"
+  if (/Linux/i.test(value)) return "linux"
+  return "unknown"
+}
+
+export function openAppFileManager(os: OpenAppOS) {
+  if (os === "macos") return { label: "session.header.open.finder", icon: "finder" as const }
+  if (os === "windows") return { label: "session.header.open.fileExplorer", icon: "file-explorer" as const }
+  return { label: "session.header.open.fileManager", icon: "finder" as const }
+}
+
+export function openAppsForOS(os: OpenAppOS) {
+  if (os === "macos") return MAC_OPEN_APPS
+  if (os === "windows") return WINDOWS_OPEN_APPS
+  return LINUX_OPEN_APPS
+}
+
+const showRequestError = (language: ReturnType<typeof useLanguage>, err: unknown) => {
+  showToast({
+    variant: "error",
+    title: language.t("common.requestFailed"),
+    description: err instanceof Error ? err.message : String(err),
+  })
+}
+
+export function useOpenInApp(input: { directory: () => string }) {
+  const platform = usePlatform()
+  const server = useServer()
+  const language = useLanguage()
+
+  const os = createMemo(() => detectOpenAppOS(platform))
+  const apps = createMemo(() => openAppsForOS(os()))
+  const fileManager = createMemo(() => openAppFileManager(os()))
+
+  const [exists, setExists] = createStore<Partial<Record<OpenApp, boolean>>>({
+    finder: true,
+  })
+
+  createEffect(() => {
+    if (platform.platform !== "desktop") return
+    if (!platform.checkAppExists) return
+
+    const list = apps()
+
+    setExists(Object.fromEntries(list.map((app) => [app.id, undefined])) as Partial<Record<OpenApp, boolean>>)
+
+    void Promise.all(
+      list.map((app) =>
+        Promise.resolve(platform.checkAppExists?.(app.openWith))
+          .then((value) => Boolean(value))
+          .catch(() => false)
+          .then((ok) => [app.id, ok] as const),
+      ),
+    ).then((entries) => {
+      setExists(Object.fromEntries(entries) as Partial<Record<OpenApp, boolean>>)
+    })
+  })
+
+  const options = createMemo(() => {
+    return [
+      { id: "finder", label: language.t(fileManager().label), icon: fileManager().icon },
+      ...apps()
+        .filter((app) => exists[app.id])
+        .map((app) => ({ ...app, label: language.t(app.label) })),
+    ] as const
+  })
+
+  const [prefs, setPrefs] = persisted(
+    Persist.global("open.app"),
+    createStore({ app: "finder" as OpenApp | "finder" }),
+  )
+  const [menu, setMenu] = createStore({ open: false })
+  const [openRequest, setOpenRequest] = createStore({
+    app: undefined as OpenApp | undefined,
+  })
+
+  const canOpen = createMemo(() => platform.platform === "desktop" && !!platform.openPath && server.isLocal())
+  const current = createMemo(
+    () =>
+      options().find((o) => o.id === prefs.app) ??
+      options()[0] ??
+      ({ id: "finder", label: fileManager().label, icon: fileManager().icon } as const),
+  )
+  const opening = createMemo(() => openRequest.app !== undefined)
+
+  const selectApp = (app: OpenApp | "finder") => {
+    if (!options().some((item) => item.id === app)) return
+    setPrefs("app", app)
+  }
+
+  const openDir = (app: OpenApp | "finder") => {
+    if (opening() || !canOpen() || !platform.openPath) return
+    const directory = input.directory()
+    if (!directory) return
+
+    const item = options().find((o) => o.id === app)
+    const openWith = item && "openWith" in item ? item.openWith : undefined
+    setOpenRequest("app", app)
+    platform
+      .openPath(directory, openWith)
+      .catch((err: unknown) => showRequestError(language, err))
+      .finally(() => {
+        setOpenRequest("app", undefined)
+      })
+  }
+
+  const copyPath = () => {
+    const directory = input.directory()
+    if (!directory) return
+    navigator.clipboard
+      .writeText(directory)
+      .then(() => {
+        showToast({
+          variant: "success",
+          icon: "circle-check",
+          title: language.t("session.share.copy.copied"),
+          description: directory,
+        })
+      })
+      .catch((err: unknown) => showRequestError(language, err))
+  }
+
+  return {
+    canOpen,
+    opening,
+    current,
+    options,
+    menu,
+    setMenu,
+    openDir,
+    selectApp,
+    copyPath,
+  }
+}
diff --git a/packages/app/src/components/session/session-header.tsx b/packages/app/src/components/session/session-header.tsx
index b983633d8069..7ee6cff31dd4 100644
--- a/packages/app/src/components/session/session-header.tsx
+++ b/packages/app/src/components/session/session-header.tsx
@@ -5,136 +5,29 @@ import { Icon } from "@opencode-ai/ui/icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Keybind } from "@opencode-ai/ui/keybind"
 import { Spinner } from "@opencode-ai/ui/spinner"
-import { showToast } from "@/utils/toast"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { getFilename } from "@opencode-ai/core/util/path"
-import { createEffect, createMemo, createSignal, For, onMount, Show } from "solid-js"
-import { createStore } from "solid-js/store"
+import { createMemo, createSignal, For, onMount, Show } from "solid-js"
 import { Portal } from "solid-js/web"
 import { useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
 import { useLayout } from "@/context/layout"
 import { usePlatform } from "@/context/platform"
-import { useServer } from "@/context/server"
 import { useSettings } from "@/context/settings"
 import { useSync } from "@/context/sync"
 import { useTerminal } from "@/context/terminal"
-import { focusTerminalById } from "@/pages/session/helpers"
+import { focusTerminalById, toggleSessionTerminal } from "@/pages/session/helpers"
 import { useSessionLayout } from "@/pages/session/session-layout"
 import { messageAgentColor } from "@/utils/agent"
 import { decode64 } from "@/utils/base64"
-import { Persist, persisted } from "@/utils/persist"
+import { OPEN_APPS, type OpenApp, useOpenInApp } from "@/components/session/open-in-app"
 import { StatusPopover, StatusPopoverV2 } from "../status-popover"
 import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
 import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
 
-const OPEN_APPS = [
-  "vscode",
-  "cursor",
-  "zed",
-  "textmate",
-  "antigravity",
-  "finder",
-  "terminal",
-  "iterm2",
-  "ghostty",
-  "warp",
-  "xcode",
-  "android-studio",
-  "powershell",
-  "sublime-text",
-] as const
-
-type OpenApp = (typeof OPEN_APPS)[number]
-type OS = "macos" | "windows" | "linux" | "unknown"
-
-const MAC_APPS = [
-  {
-    id: "vscode",
-    label: "session.header.open.app.vscode",
-    icon: "vscode",
-    openWith: "Visual Studio Code",
-  },
-  { id: "cursor", label: "session.header.open.app.cursor", icon: "cursor", openWith: "Cursor" },
-  { id: "zed", label: "session.header.open.app.zed", icon: "zed", openWith: "Zed" },
-  { id: "textmate", label: "session.header.open.app.textmate", icon: "textmate", openWith: "TextMate" },
-  {
-    id: "antigravity",
-    label: "session.header.open.app.antigravity",
-    icon: "antigravity",
-    openWith: "Antigravity",
-  },
-  { id: "terminal", label: "session.header.open.app.terminal", icon: "terminal", openWith: "Terminal" },
-  { id: "iterm2", label: "session.header.open.app.iterm2", icon: "iterm2", openWith: "iTerm" },
-  { id: "ghostty", label: "session.header.open.app.ghostty", icon: "ghostty", openWith: "Ghostty" },
-  { id: "warp", label: "session.header.open.app.warp", icon: "warp", openWith: "Warp" },
-  { id: "xcode", label: "session.header.open.app.xcode", icon: "xcode", openWith: "Xcode" },
-  {
-    id: "android-studio",
-    label: "session.header.open.app.androidStudio",
-    icon: "android-studio",
-    openWith: "Android Studio",
-  },
-  {
-    id: "sublime-text",
-    label: "session.header.open.app.sublimeText",
-    icon: "sublime-text",
-    openWith: "Sublime Text",
-  },
-] as const
-
-const WINDOWS_APPS = [
-  { id: "vscode", label: "session.header.open.app.vscode", icon: "vscode", openWith: "code" },
-  { id: "cursor", label: "session.header.open.app.cursor", icon: "cursor", openWith: "cursor" },
-  { id: "zed", label: "session.header.open.app.zed", icon: "zed", openWith: "zed" },
-  {
-    id: "powershell",
-    label: "session.header.open.app.powershell",
-    icon: "powershell",
-    openWith: "powershell",
-  },
-  {
-    id: "sublime-text",
-    label: "session.header.open.app.sublimeText",
-    icon: "sublime-text",
-    openWith: "Sublime Text",
-  },
-] as const
-
-const LINUX_APPS = [
-  { id: "vscode", label: "session.header.open.app.vscode", icon: "vscode", openWith: "code" },
-  { id: "cursor", label: "session.header.open.app.cursor", icon: "cursor", openWith: "cursor" },
-  { id: "zed", label: "session.header.open.app.zed", icon: "zed", openWith: "zed" },
-  {
-    id: "sublime-text",
-    label: "session.header.open.app.sublimeText",
-    icon: "sublime-text",
-    openWith: "Sublime Text",
-  },
-] as const
-
-const detectOS = (platform: ReturnType<typeof usePlatform>): OS => {
-  if (platform.platform === "desktop" && platform.os) return platform.os
-  if (typeof navigator !== "object") return "unknown"
-  const value = navigator.platform || navigator.userAgent
-  if (/Mac/i.test(value)) return "macos"
-  if (/Win/i.test(value)) return "windows"
-  if (/Linux/i.test(value)) return "linux"
-  return "unknown"
-}
-
-const showRequestError = (language: ReturnType<typeof useLanguage>, err: unknown) => {
-  showToast({
-    variant: "error",
-    title: language.t("common.requestFailed"),
-    description: err instanceof Error ? err.message : String(err),
-  })
-}
-
 export function SessionHeader() {
   const layout = useLayout()
   const command = useCommand()
-  const server = useServer()
   const platform = usePlatform()
   const language = useLanguage()
   const settings = useSettings()
@@ -154,61 +47,16 @@ export function SessionHeader() {
     return getFilename(projectDirectory())
   })
   const hotkey = createMemo(() => command.keybind("file.open"))
-  const os = createMemo(() => detectOS(platform))
+  const openIn = useOpenInApp({ directory: projectDirectory })
   const isDesktopV2 = createMemo(() => platform.platform === "desktop" && settings.general.newLayoutDesigns())
   const search = createMemo(() => (isDesktopV2() ? settings.general.showSearch() : true))
   const tree = createMemo(() => (isDesktopV2() ? settings.general.showFileTree() : true))
   const term = createMemo(() => (isDesktopV2() ? settings.general.showTerminal() : true))
   const status = createMemo(() => (isDesktopV2() ? settings.general.showStatus() : true))
 
-  const [exists, setExists] = createStore<Partial<Record<OpenApp, boolean>>>({
-    finder: true,
-  })
-
-  const apps = createMemo(() => {
-    if (os() === "macos") return MAC_APPS
-    if (os() === "windows") return WINDOWS_APPS
-    return LINUX_APPS
-  })
-
-  const fileManager = createMemo(() => {
-    if (os() === "macos") return { label: "session.header.open.finder", icon: "finder" as const }
-    if (os() === "windows") return { label: "session.header.open.fileExplorer", icon: "file-explorer" as const }
-    return { label: "session.header.open.fileManager", icon: "finder" as const }
-  })
-
-  createEffect(() => {
-    if (platform.platform !== "desktop") return
-    if (!platform.checkAppExists) return
-
-    const list = apps()
-
-    setExists(Object.fromEntries(list.map((app) => [app.id, undefined])) as Partial<Record<OpenApp, boolean>>)
-
-    void Promise.all(
-      list.map((app) =>
-        Promise.resolve(platform.checkAppExists?.(app.openWith))
-          .then((value) => Boolean(value))
-          .catch(() => false)
-          .then((ok) => [app.id, ok] as const),
-      ),
-    ).then((entries) => {
-      setExists(Object.fromEntries(entries) as Partial<Record<OpenApp, boolean>>)
-    })
-  })
-
-  const options = createMemo(() => {
-    return [
-      { id: "finder", label: language.t(fileManager().label), icon: fileManager().icon },
-      ...apps()
-        .filter((app) => exists[app.id])
-        .map((app) => ({ ...app, label: language.t(app.label) })),
-    ] as const
-  })
-
   const toggleTerminal = () => {
     const next = !view().terminal.opened()
-    view().terminal.toggle()
+    toggleSessionTerminal(view(), { openReviewPanel: isDesktopV2() && !!params.id })
     if (!next) return
 
     const id = terminal.active()
@@ -216,20 +64,6 @@ export function SessionHeader() {
     focusTerminalById(id)
   }
 
-  const [prefs, setPrefs] = persisted(Persist.global("open.app"), createStore({ app: "finder" as OpenApp }))
-  const [menu, setMenu] = createStore({ open: false })
-  const [openRequest, setOpenRequest] = createStore({
-    app: undefined as OpenApp | undefined,
-  })
-
-  const canOpen = createMemo(() => platform.platform === "desktop" && !!platform.openPath && server.isLocal())
-  const current = createMemo(
-    () =>
-      options().find((o) => o.id === prefs.app) ??
-      options()[0] ??
-      ({ id: "finder", label: fileManager().label, icon: fileManager().icon } as const),
-  )
-  const opening = createMemo(() => openRequest.app !== undefined)
   const tint = createMemo(() =>
     messageAgentColor(params.id ? sync.data.message[params.id] : undefined, sync.data.agent),
   )
@@ -242,43 +76,6 @@ export function SessionHeader() {
     onReviewToggle: () => view().reviewPanel.toggle(),
   }))
 
-  const selectApp = (app: OpenApp) => {
-    if (!options().some((item) => item.id === app)) return
-    setPrefs("app", app)
-  }
-
-  const openDir = (app: OpenApp) => {
-    if (opening() || !canOpen() || !platform.openPath) return
-    const directory = projectDirectory()
-    if (!directory) return
-
-    const item = options().find((o) => o.id === app)
-    const openWith = item && "openWith" in item ? item.openWith : undefined
-    setOpenRequest("app", app)
-    platform
-      .openPath(directory, openWith)
-      .catch((err: unknown) => showRequestError(language, err))
-      .finally(() => {
-        setOpenRequest("app", undefined)
-      })
-  }
-
-  const copyPath = () => {
-    const directory = projectDirectory()
-    if (!directory) return
-    navigator.clipboard
-      .writeText(directory)
-      .then(() => {
-        showToast({
-          variant: "success",
-          icon: "circle-check",
-          title: language.t("session.share.copy.copied"),
-          description: directory,
-        })
-      })
-      .catch((err: unknown) => showRequestError(language, err))
-  }
-
   const [centerMount, setCenterMount] = createSignal<HTMLElement | null>(null)
   const [rightMount, setRightMount] = createSignal<HTMLElement | null>(null)
   onMount(() => {
@@ -328,13 +125,13 @@ export function SessionHeader() {
                   <Show when={projectDirectory()}>
                     <div class="hidden xl:flex items-center">
                       <Show
-                        when={canOpen()}
+                        when={openIn.canOpen()}
                         fallback={
                           <div class="flex h-[24px] box-border items-center rounded-md border border-border-weak-base bg-surface-panel overflow-hidden">
                             <Button
                               variant="ghost"
                               class="rounded-none h-full py-0 pr-3 pl-0.5 gap-1.5 border-none shadow-none"
-                              onClick={copyPath}
+                              onClick={openIn.copyPath}
                               aria-label={language.t("session.header.open.copyPath")}
                             >
                               <Icon name="copy" size="small" class="text-icon-base" />
@@ -351,14 +148,14 @@ export function SessionHeader() {
                               variant="ghost"
                               class="rounded-none h-full px-0.5 border-none shadow-none disabled:!cursor-default"
                               classList={{
-                                "bg-surface-raised-base-active": opening(),
+                                "bg-surface-raised-base-active": openIn.opening(),
                               }}
-                              onClick={() => openDir(current().id)}
-                              disabled={opening()}
-                              aria-label={language.t("session.header.open.ariaLabel", { app: current().label })}
+                              onClick={() => openIn.openDir(openIn.current().id)}
+                              disabled={openIn.opening()}
+                              aria-label={language.t("session.header.open.ariaLabel", { app: openIn.current().label })}
                             >
                               <div class="flex size-5 shrink-0 items-center justify-center [&_[data-component=app-icon]]:size-5">
-                                <Show when={opening()} fallback={<AppIcon id={current().icon} />}>
+                                <Show when={openIn.opening()} fallback={<AppIcon id={openIn.current().icon} />}>
                                   <Spinner class="size-3.5" style={{ color: tint() ?? "var(--icon-base)" }} />
                                 </Show>
                               </div>
@@ -366,17 +163,17 @@ export function SessionHeader() {
                             <DropdownMenu
                               gutter={4}
                               placement="bottom-end"
-                              open={menu.open}
-                              onOpenChange={(open) => setMenu("open", open)}
+                              open={openIn.menu.open}
+                              onOpenChange={(open) => openIn.setMenu("open", open)}
                             >
                               <DropdownMenu.Trigger
                                 as={IconButton}
                                 icon="chevron-down"
                                 variant="ghost"
-                                disabled={opening()}
+                                disabled={openIn.opening()}
                                 class="rounded-none h-full w-[20px] p-0 border-none shadow-none data-[expanded]:bg-surface-raised-base-active disabled:!cursor-default"
                                 classList={{
-                                  "bg-surface-raised-base-active": opening(),
+                                  "bg-surface-raised-base-active": openIn.opening(),
                                 }}
                                 aria-label={language.t("session.header.open.menu")}
                               />
@@ -388,20 +185,20 @@ export function SessionHeader() {
                                     </DropdownMenu.GroupLabel>
                                     <DropdownMenu.RadioGroup
                                       class="mt-1"
-                                      value={current().id}
+                                      value={openIn.current().id}
                                       onChange={(value) => {
                                         if (!OPEN_APPS.includes(value as OpenApp)) return
-                                        selectApp(value as OpenApp)
+                                        openIn.selectApp(value as OpenApp)
                                       }}
                                     >
-                                      <For each={options()}>
+                                      <For each={openIn.options()}>
                                         {(o) => (
                                           <DropdownMenu.RadioItem
                                             value={o.id}
-                                            disabled={opening()}
+                                            disabled={openIn.opening()}
                                             onSelect={() => {
-                                              setMenu("open", false)
-                                              openDir(o.id)
+                                              openIn.setMenu("open", false)
+                                              openIn.openDir(o.id)
                                             }}
                                           >
                                             <div class="flex size-5 shrink-0 items-center justify-center [&_[data-component=app-icon]]:size-5">
@@ -419,8 +216,8 @@ export function SessionHeader() {
                                   <DropdownMenu.Separator />
                                   <DropdownMenu.Item
                                     onSelect={() => {
-                                      setMenu("open", false)
-                                      copyPath()
+                                      openIn.setMenu("open", false)
+                                      openIn.copyPath()
                                     }}
                                   >
                                     <div class="flex size-5 shrink-0 items-center justify-center">
diff --git a/packages/app/src/components/session/session-sortable-tab-v2.tsx b/packages/app/src/components/session/session-sortable-tab-v2.tsx
new file mode 100644
index 000000000000..05dc57f79f79
--- /dev/null
+++ b/packages/app/src/components/session/session-sortable-tab-v2.tsx
@@ -0,0 +1,39 @@
+import { createMemo, Show } from "solid-js"
+import type { JSX } from "solid-js"
+import { createSortable } from "@thisbeyond/solid-dnd"
+import { TooltipKeybind } from "@opencode-ai/ui/tooltip"
+import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
+import { useFile } from "@/context/file"
+import { useLanguage } from "@/context/language"
+import { useCommand } from "@/context/command"
+import { FileVisual } from "./session-sortable-tab"
+
+export function SortableTabV2(props: { tab: string; onTabClose: (tab: string) => void }): JSX.Element {
+  const file = useFile()
+  const language = useLanguage()
+  const command = useCommand()
+  const sortable = createSortable(props.tab)
+  const path = createMemo(() => file.pathFromTab(props.tab))
+  const content = createMemo(() => {
+    const value = path()
+    if (!value) return
+    return <FileVisual path={value} textClass="truncate" />
+  })
+  return (
+    <div use:sortable class="flex shrink-0 items-center" classList={{ "opacity-0": sortable.isActiveDraggable }}>
+      <div class="relative">
+        <TabsV2.Trigger value={props.tab} onMiddleClick={() => props.onTabClose(props.tab)}>
+          <Show when={content()}>{(value) => value()}</Show>
+          <TooltipKeybind
+            title={language.t("common.closeTab")}
+            keybind={command.keybind("tab.close")}
+            placement="bottom"
+            gutter={10}
+          >
+            <TabsV2.CloseButton onClick={() => props.onTabClose(props.tab)} />
+          </TooltipKeybind>
+        </TabsV2.Trigger>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/app/src/components/session/session-sortable-tab.tsx b/packages/app/src/components/session/session-sortable-tab.tsx
index f04228ca66c7..5a122e5e63be 100644
--- a/packages/app/src/components/session/session-sortable-tab.tsx
+++ b/packages/app/src/components/session/session-sortable-tab.tsx
@@ -10,7 +10,7 @@ import { useFile } from "@/context/file"
 import { useLanguage } from "@/context/language"
 import { useCommand } from "@/context/command"
 
-export function FileVisual(props: { path: string; active?: boolean }): JSX.Element {
+export function FileVisual(props: { path: string; active?: boolean; textClass?: string }): JSX.Element {
   return (
     <div class="flex items-center gap-x-1.5 min-w-0">
       <Show
@@ -22,7 +22,7 @@ export function FileVisual(props: { path: string; active?: boolean }): JSX.Eleme
           <FileIcon node={{ path: props.path, type: "file" }} mono class="absolute inset-0 size-4 tab-fileicon-mono" />
         </span>
       </Show>
-      <span class="text-14-medium truncate">{getFilename(props.path)}</span>
+      <span class={props.textClass ?? "text-14-medium truncate"}>{getFilename(props.path)}</span>
     </div>
   )
 }
diff --git a/packages/app/src/components/session/session-sortable-terminal-tab-v2.tsx b/packages/app/src/components/session/session-sortable-terminal-tab-v2.tsx
new file mode 100644
index 000000000000..ba7655b49fd9
--- /dev/null
+++ b/packages/app/src/components/session/session-sortable-terminal-tab-v2.tsx
@@ -0,0 +1,199 @@
+import type { JSX } from "solid-js"
+import { Show, createEffect, onCleanup } from "solid-js"
+import { createStore } from "solid-js/store"
+import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { DropdownMenu } from "@opencode-ai/ui/dropdown-menu"
+import { Icon } from "@opencode-ai/ui/icon"
+import { useTerminal, type LocalPTY } from "@/context/terminal"
+import { useLanguage } from "@/context/language"
+import { focusTerminalById } from "@/pages/session/helpers"
+import { terminalTabLabel } from "@/pages/session/terminal-label"
+
+export function SortableTerminalTabV2(props: {
+  terminal: LocalPTY
+  onClose?: () => void
+  dragged: boolean
+  pressed: boolean
+  dragActive: boolean
+  onStripPointerDown: (event: PointerEvent) => void
+}): JSX.Element {
+  const terminal = useTerminal()
+  const language = useLanguage()
+  const [store, setStore] = createStore({
+    editing: false,
+    title: props.terminal.title,
+    menuOpen: false,
+    menuPosition: { x: 0, y: 0 },
+    blurEnabled: false,
+  })
+  let input: HTMLInputElement | undefined
+  let blurFrame: number | undefined
+  let editRequested = false
+
+  const label = () =>
+    terminalTabLabel({
+      title: props.terminal.title,
+      titleNumber: props.terminal.titleNumber,
+      t: language.t as (key: string, vars?: Record<string, string | number | boolean>) => string,
+    })
+
+  const close = () => {
+    const count = terminal.all().length
+    void terminal.close(props.terminal.id)
+    if (count === 1) {
+      props.onClose?.()
+    }
+  }
+
+  const focus = () => {
+    if (store.editing) return
+    if (document.activeElement instanceof HTMLElement) document.activeElement.blur()
+    focusTerminalById(props.terminal.id)
+  }
+
+  const edit = (e?: Event) => {
+    if (e) {
+      e.stopPropagation()
+      e.preventDefault()
+    }
+
+    setStore("blurEnabled", false)
+    setStore("title", props.terminal.title)
+    setStore("editing", true)
+  }
+
+  const save = () => {
+    if (!store.blurEnabled) return
+
+    const value = store.title.trim()
+    if (value && value !== props.terminal.title) {
+      terminal.update({ id: props.terminal.id, title: value })
+    }
+    setStore("editing", false)
+  }
+
+  const keydown = (e: KeyboardEvent) => {
+    if (e.key === "Enter") {
+      e.preventDefault()
+      save()
+      return
+    }
+    if (e.key === "Escape") {
+      e.preventDefault()
+      setStore("editing", false)
+    }
+  }
+
+  const menu = (e: MouseEvent) => {
+    e.preventDefault()
+    setStore("menuPosition", { x: e.clientX, y: e.clientY })
+    setStore("menuOpen", true)
+  }
+
+  createEffect(() => {
+    if (!store.editing) return
+    if (!input) return
+    input.focus()
+    input.select()
+    if (blurFrame !== undefined) cancelAnimationFrame(blurFrame)
+    blurFrame = requestAnimationFrame(() => {
+      blurFrame = undefined
+      setStore("blurEnabled", true)
+    })
+  })
+
+  onCleanup(() => {
+    if (blurFrame === undefined) return
+    cancelAnimationFrame(blurFrame)
+  })
+
+  return (
+    <div
+      data-session-tab-slot
+      data-tab-key={props.terminal.id}
+      class="session-review-v2-file-tab-slot flex shrink-0 items-center touch-none"
+      classList={{
+        "pointer-events-none": props.dragActive,
+        "invisible": props.dragged,
+        "session-review-v2-file-tab-slot--pressed": props.pressed,
+      }}
+      onPointerDown={(event) => {
+        if (props.dragged) return
+        props.onStripPointerDown(event)
+      }}
+    >
+      <div class="relative">
+        <TabsV2.Trigger
+          value={props.terminal.id}
+          data-session-tab
+          onClick={focus}
+          onMouseDown={(e) => e.preventDefault()}
+          onMiddleClick={close}
+          onContextMenu={menu}
+          onDblClick={edit}
+        >
+          <div classList={{ invisible: store.editing }}>{label()}</div>
+          <div class="-mr-1.5">
+            <IconButtonV2
+              size="small"
+              variant="ghost-muted"
+              class="session-review-v2-tab-close"
+              onMouseDown={(event) => {
+                event.preventDefault()
+                event.stopPropagation()
+              }}
+              onClick={(event) => {
+                event.stopPropagation()
+                close()
+              }}
+              icon={<IconV2 name="xmark-small" />}
+              aria-label={language.t("terminal.close")}
+            />
+          </div>
+        </TabsV2.Trigger>
+        <Show when={store.editing}>
+          <div class="absolute inset-0 flex items-center px-3 bg-muted z-10 pointer-events-auto">
+            <input
+              ref={input}
+              type="text"
+              value={store.title}
+              onInput={(e) => setStore("title", e.currentTarget.value)}
+              onBlur={save}
+              onKeyDown={keydown}
+              onMouseDown={(e) => e.stopPropagation()}
+              class="bg-transparent border-none outline-none text-sm min-w-0 flex-1"
+            />
+          </div>
+        </Show>
+        <DropdownMenu open={store.menuOpen} onOpenChange={(open) => setStore("menuOpen", open)}>
+          <DropdownMenu.Portal>
+            <DropdownMenu.Content
+              class="fixed"
+              style={{
+                left: `${store.menuPosition.x}px`,
+                top: `${store.menuPosition.y}px`,
+              }}
+              onCloseAutoFocus={(e) => {
+                if (!editRequested) return
+                e.preventDefault()
+                editRequested = false
+                requestAnimationFrame(() => edit())
+              }}
+            >
+              <DropdownMenu.Item onSelect={() => (editRequested = true)}>
+                <Icon name="edit" class="w-4 h-4 mr-2" />
+                {language.t("common.rename")}
+              </DropdownMenu.Item>
+              <DropdownMenu.Item onSelect={close}>
+                <Icon name="close" class="w-4 h-4 mr-2" />
+                {language.t("common.close")}
+              </DropdownMenu.Item>
+            </DropdownMenu.Content>
+          </DropdownMenu.Portal>
+        </DropdownMenu>
+      </div>
+    </div>
+  )
+}
diff --git a/packages/app/src/components/session/session-tab-drag-v2.ts b/packages/app/src/components/session/session-tab-drag-v2.ts
new file mode 100644
index 000000000000..6ae639c92dfe
--- /dev/null
+++ b/packages/app/src/components/session/session-tab-drag-v2.ts
@@ -0,0 +1,146 @@
+export type TabDragLayout = {
+  tabWidthById: Map<string, number>
+  dividerWidth: number
+  listLeft: number
+}
+
+export const ACTIVATION_DISTANCE = 4
+export const HYSTERESIS_DEADBAND = 8
+export const AUTOSCROLL_EDGE = 24
+export const AUTOSCROLL_MAX_SPEED = 8
+export const FLOATER_OVERSHOOT_MAX = 8
+
+export function pointerDistance(x1: number, y1: number, x2: number, y2: number) {
+  const dx = x2 - x1
+  const dy = y2 - y1
+  return Math.sqrt(dx * dx + dy * dy)
+}
+
+export function captureTabDragLayout(list: HTMLElement, order: string[]) {
+  const tabWidthById = new Map<string, number>()
+  const slots = list.querySelectorAll<HTMLElement>("[data-session-tab-slot]")
+  for (const slot of slots) {
+    const id = slot.dataset.tabKey
+    if (!id) continue
+    const tab = slot.querySelector<HTMLElement>("[data-session-tab]")
+    if (!tab) continue
+    tabWidthById.set(id, tab.getBoundingClientRect().width)
+  }
+
+  let dividerWidth = 0
+  if (order.length >= 2) {
+    const firstId = order[0]
+    const secondId = order[1]
+    const firstSlot = Array.from(slots).find((slot) => slot.dataset.tabKey === firstId)
+    const secondSlot = Array.from(slots).find((slot) => slot.dataset.tabKey === secondId)
+    if (firstSlot && secondSlot) {
+      const firstLeft = firstSlot.getBoundingClientRect().left
+      const secondLeft = secondSlot.getBoundingClientRect().left
+      const firstWidth = tabWidthById.get(firstId) ?? 0
+      dividerWidth = Math.max(secondLeft - firstLeft - firstWidth, 0)
+    }
+  }
+
+  return {
+    tabWidthById,
+    dividerWidth,
+    listLeft: getDraggableStripLeft(list),
+  }
+}
+
+export function syncLayoutScroll(list: HTMLElement, layout: TabDragLayout) {
+  layout.listLeft = getDraggableStripLeft(list)
+}
+
+function getDraggableStripLeft(list: HTMLElement) {
+  const slots = Array.from(list.querySelectorAll<HTMLElement>("[data-session-tab-slot]"))
+  if (slots.length === 0) return list.getBoundingClientRect().left
+  return Math.min(...slots.map((slot) => slot.getBoundingClientRect().left))
+}
+
+function slotWidthAt(order: readonly string[], index: number, layout: TabDragLayout) {
+  const id = order[index]
+  if (!id) return 0
+  const tabWidth = layout.tabWidthById.get(id) ?? 0
+  return index === 0 ? tabWidth : layout.dividerWidth + tabWidth
+}
+
+function slotLeft(order: readonly string[], index: number, layout: TabDragLayout) {
+  let left = layout.listLeft
+  for (const [i] of order.entries()) {
+    if (i >= index) break
+    left += slotWidthAt(order, i, layout)
+  }
+  return left
+}
+
+export function insertIndexFromVirtualLayout(
+  pointerX: number,
+  order: readonly string[],
+  draggedId: string,
+  currentIndex: number,
+  layout: TabDragLayout,
+  deadband = HYSTERESIS_DEADBAND,
+) {
+  if (order.length === 0) return 0
+
+  const others = order.filter((id) => id !== draggedId)
+  let target = currentIndex
+
+  if (currentIndex > 0) {
+    const seam = slotLeft(others, currentIndex, layout)
+    if (pointerX < seam - deadband) target = currentIndex - 1
+  }
+
+  if (target === currentIndex && currentIndex < order.length - 1) {
+    const seam = slotLeft(others, currentIndex + 1, layout)
+    if (pointerX >= seam) target = currentIndex + 1
+  }
+
+  return target
+}
+
+export function movePlaceholder(order: readonly string[], draggedId: string, toIndex: number) {
+  const fromIndex = order.indexOf(draggedId)
+  if (fromIndex === -1 || fromIndex === toIndex) return [...order]
+  const next = [...order]
+  next.splice(toIndex, 0, ...next.splice(fromIndex, 1))
+  return next
+}
+
+export function draftOrderChanged(initial: readonly string[], final: readonly string[]) {
+  if (initial.length === 0 || final.length === 0 || initial.length !== final.length) return false
+  return final.some((key, index) => key !== initial[index])
+}
+
+function easeOvershoot(overshoot: number) {
+  return (FLOATER_OVERSHOOT_MAX * overshoot) / (overshoot + FLOATER_OVERSHOOT_MAX)
+}
+
+export function clampFloaterLeft(left: number, width: number, stripLeft: number, stripRight: number) {
+  const stripWidth = stripRight - stripLeft
+  if (width >= stripWidth) return stripLeft
+
+  const maxLeft = stripRight - width
+  if (left > maxLeft) return maxLeft + easeOvershoot(left - maxLeft)
+  if (left < stripLeft) return stripLeft - easeOvershoot(stripLeft - left)
+
+  return left
+}
+
+export function autoscrollSpeed(pointerX: number, containerLeft: number, containerRight: number) {
+  const leftEdge = containerLeft + AUTOSCROLL_EDGE
+  const rightEdge = containerRight - AUTOSCROLL_EDGE
+
+  if (pointerX < leftEdge) {
+    const depth = (leftEdge - pointerX) / AUTOSCROLL_EDGE
+    return -Math.ceil(AUTOSCROLL_MAX_SPEED * Math.min(depth, 1))
+  }
+
+  if (pointerX > rightEdge) {
+    const depth = (pointerX - rightEdge) / AUTOSCROLL_EDGE
+    return Math.ceil(AUTOSCROLL_MAX_SPEED * Math.min(depth, 1))
+  }
+
+  return 0
+}
diff --git a/packages/app/src/components/terminal.tsx b/packages/app/src/components/terminal.tsx
index 035eb3285695..fb2e26f0cf67 100644
--- a/packages/app/src/components/terminal.tsx
+++ b/packages/app/src/components/terminal.tsx
@@ -383,7 +383,8 @@ export const Terminal = (props: TerminalProps) => {
         }
 
         // allow for toggle terminal keybinds in parent
-        const config = settings.keybinds.get(TOGGLE_TERMINAL_ID) ?? DEFAULT_TOGGLE_TERMINAL_KEYBIND
+        const fallback = settings.general.newLayoutDesigns() ? "mod+j" : DEFAULT_TOGGLE_TERMINAL_KEYBIND
+        const config = settings.keybinds.get(TOGGLE_TERMINAL_ID) ?? fallback
         const keybinds = parseKeybind(config)
 
         return matchKeybind(keybinds, event)
diff --git a/packages/app/src/context/command.tsx b/packages/app/src/context/command.tsx
index e979ad6a0595..28078266d52a 100644
--- a/packages/app/src/context/command.tsx
+++ b/packages/app/src/context/command.tsx
@@ -170,13 +170,7 @@ export function matchKeybind(keybinds: Keybind[], event: KeyboardEvent): boolean
   return false
 }
 
-export function formatKeybind(config: string, t?: (key: KeyLabel) => string): string {
-  if (!config || config === "none") return ""
-
-  const keybinds = parseKeybind(config)
-  if (keybinds.length === 0) return ""
-
-  const kb = keybinds[0]
+function displayKeybindParts(kb: Keybind, t?: (key: KeyLabel) => string) {
   const parts: string[] = []
 
   if (kb.ctrl) parts.push(IS_MAC ? "⌃" : keyText("common.key.ctrl", t))
@@ -184,40 +178,55 @@ export function formatKeybind(config: string, t?: (key: KeyLabel) => string): st
   if (kb.shift) parts.push(IS_MAC ? "⇧" : keyText("common.key.shift", t))
   if (kb.meta) parts.push(IS_MAC ? "⌘" : keyText("common.key.meta", t))
 
-  if (kb.key) {
-    const keys: Record<string, string> = {
-      arrowup: "↑",
-      arrowdown: "↓",
-      arrowleft: "←",
-      arrowright: "→",
-      comma: ",",
-      plus: "+",
-    }
-    const named: Record<string, KeyLabel> = {
-      backspace: "common.key.backspace",
-      delete: "common.key.delete",
-      end: "common.key.end",
-      enter: "common.key.enter",
-      esc: "common.key.esc",
-      escape: "common.key.esc",
-      home: "common.key.home",
-      insert: "common.key.insert",
-      pagedown: "common.key.pageDown",
-      pageup: "common.key.pageUp",
-      space: "common.key.space",
-      tab: "common.key.tab",
-    }
-    const key = kb.key.toLowerCase()
-    const displayKey =
-      keys[key] ??
-      (named[key]
-        ? keyText(named[key], t)
-        : key.length === 1
-          ? key.toUpperCase()
-          : key.charAt(0).toUpperCase() + key.slice(1))
-    parts.push(displayKey)
+  if (!kb.key) return parts
+
+  const keys: Record<string, string> = {
+    arrowup: "↑",
+    arrowdown: "↓",
+    arrowleft: "←",
+    arrowright: "→",
+    comma: ",",
+    plus: "+",
+  }
+  const named: Record<string, KeyLabel> = {
+    backspace: "common.key.backspace",
+    delete: "common.key.delete",
+    end: "common.key.end",
+    enter: "common.key.enter",
+    esc: "common.key.esc",
+    escape: "common.key.esc",
+    home: "common.key.home",
+    insert: "common.key.insert",
+    pagedown: "common.key.pageDown",
+    pageup: "common.key.pageUp",
+    space: "common.key.space",
+    tab: "common.key.tab",
   }
+  const key = kb.key.toLowerCase()
+  const displayKey =
+    keys[key] ??
+    (named[key]
+      ? keyText(named[key], t)
+      : key.length === 1
+        ? key.toUpperCase()
+        : key.charAt(0).toUpperCase() + key.slice(1))
+  parts.push(displayKey)
+
+  return parts
+}
+
+export function formatKeybindParts(config: string, t?: (key: KeyLabel) => string): string[] {
+  if (!config || config === "none") return []
+
+  const keybinds = parseKeybind(config)
+  if (keybinds.length === 0) return []
+
+  return displayKeybindParts(keybinds[0], t)
+}
 
+export function formatKeybind(config: string, t?: (key: KeyLabel) => string): string {
+  const parts = formatKeybindParts(config, t)
+  if (parts.length === 0) return ""
   return IS_MAC ? parts.join("") : parts.join("+")
 }
 
@@ -402,25 +411,32 @@ export const { use: useCommand, provider: CommandProvider } = createSimpleContex
       })
     }
 
+    const keybindConfig = (id: string) => {
+      if (id === PALETTE_ID) return settings.keybinds.get(PALETTE_ID) ?? DEFAULT_PALETTE_KEYBIND
+
+      const base = actionId(id)
+      const option = options().find((x) => actionId(x.id) === base)
+      if (option?.keybind) return option.keybind
+
+      const meta = catalog[base]
+      return bind(base, meta?.keybind)
+    }
+
     return {
       register,
       trigger(id: string, source?: CommandSource) {
         run(id, source)
       },
       keybind(id: string) {
-        if (id === PALETTE_ID) {
-          return formatKeybind(settings.keybinds.get(PALETTE_ID) ?? DEFAULT_PALETTE_KEYBIND, language.t)
-        }
-
-        const base = actionId(id)
-        const option = options().find((x) => actionId(x.id) === base)
-        if (option?.keybind) return formatKeybind(option.keybind, language.t)
-
-        const meta = catalog[base]
-        const config = bind(base, meta?.keybind)
+        const config = keybindConfig(id)
         if (!config) return ""
         return formatKeybind(config, language.t)
       },
+      keybindParts(id: string) {
+        const config = keybindConfig(id)
+        if (!config) return []
+        return formatKeybindParts(config, language.t)
+      },
       show: showPalette,
       keybinds(enabled: boolean) {
         setStore("suspendCount", (count) => Math.max(0, count + (enabled ? -1 : 1)))
diff --git a/packages/app/src/context/file.tsx b/packages/app/src/context/file.tsx
index fcfd750c2e07..280fa4c0aecb 100644
--- a/packages/app/src/context/file.tsx
+++ b/packages/app/src/context/file.tsx
@@ -199,8 +199,8 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
       return promise
     }
 
-    const search = (query: string, dirs: "true" | "false") =>
-      sdk.client.find.files({ query, dirs }).then(
+    const search = (query: string, dirs: "true" | "false", limit = 100) =>
+      sdk.client.find.files({ query, dirs, limit }).then(
         (x) => (x.data ?? []).map(path.normalize),
         () => [],
       )
@@ -260,6 +260,7 @@ export const { use: useFile, provider: FileProvider } = createSimpleContext({
         refresh: (input: string) => tree.listDir(input, { force: true }),
         state: tree.dirState,
         children: tree.children,
+        files: tree.allFiles,
         expand: tree.expandDir,
         collapse: tree.collapseDir,
         toggle(input: string) {
diff --git a/packages/app/src/context/file/tree-store.ts b/packages/app/src/context/file/tree-store.ts
index a86051d286ec..8f1527735d31 100644
--- a/packages/app/src/context/file/tree-store.ts
+++ b/packages/app/src/context/file/tree-store.ts
@@ -157,12 +157,22 @@ export function createFileTreeStore(options: TreeStoreOptions) {
     return out
   }
 
+  const allFiles = () => {
+    const out: string[] = []
+    for (const id of Object.keys(tree.node)) {
+      const node = tree.node[id]
+      if (node?.type === "file") out.push(node.path)
+    }
+    return out
+  }
+
   return {
     listDir,
     expandDir,
     collapseDir,
     dirState,
     children,
+    allFiles,
     node: (path: string) => tree.node[path],
     isLoaded: (path: string) => Boolean(tree.dir[path]?.loaded),
     reset,
diff --git a/packages/app/src/desktop-menu.ts b/packages/app/src/desktop-menu.ts
index 677738fde90a..7c0800b61bfd 100644
--- a/packages/app/src/desktop-menu.ts
+++ b/packages/app/src/desktop-menu.ts
@@ -142,7 +142,12 @@ export const DESKTOP_MENU: DesktopMenu[] = [
     label: "View",
     items: [
       { type: "item", label: "Toggle Sidebar", command: "sidebar.toggle", accelerator: { macos: "Cmd+B" } },
-      { type: "item", label: "Toggle Terminal", command: "terminal.toggle", accelerator: { macos: "Ctrl+`" } },
+      {
+        type: "item",
+        label: "Toggle Terminal",
+        command: "terminal.toggle",
+        accelerator: { macos: "Ctrl+`" },
+      },
       { type: "item", label: "Toggle File Tree", command: "fileTree.toggle" },
       { type: "separator" },
       { type: "item", label: "Reload", action: "view.reload", role: "reload" },
diff --git a/packages/app/src/i18n/en.ts b/packages/app/src/i18n/en.ts
index eef4d80bfc53..3764b84853a2 100644
--- a/packages/app/src/i18n/en.ts
+++ b/packages/app/src/i18n/en.ts
@@ -598,6 +598,7 @@ export const dict = {
   "session.tab.context": "Context",
   "session.panel.reviewAndFiles": "Review and files",
   "session.review.filesChanged": "{{count}} Files Changed",
+  "session.review.filesChangedTab": "Files changed {{count}}",
   "session.review.change.one": "Change",
   "session.review.change.other": "Changes",
   "session.review.loadingChanges": "Loading changes...",
diff --git a/packages/app/src/pages/session.tsx b/packages/app/src/pages/session.tsx
index e4a0f73ca22e..d23790618823 100644
--- a/packages/app/src/pages/session.tsx
+++ b/packages/app/src/pages/session.tsx
@@ -22,8 +22,10 @@ import { debounce } from "@solid-primitives/scheduled"
 import { useLocal } from "@/context/local"
 import { selectionFromLines, useFile, type FileSelection, type SelectedLineRange } from "@/context/file"
 import { createStore } from "solid-js/store"
+import type { SessionReviewLineComment } from "@opencode-ai/ui/session-review"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Select } from "@opencode-ai/ui/select"
+import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { createAutoScroll } from "@opencode-ai/ui/hooks"
 import { previewSelectedLines } from "@opencode-ai/ui/pierre/selection-bridge"
@@ -58,6 +60,11 @@ import { useSessionLayout } from "@/pages/session/session-layout"
 import { useServer } from "@/context/server"
 import { syncSessionModel } from "@/pages/session/session-model-helpers"
 import { SessionSidePanel } from "@/pages/session/session-side-panel"
+import { SessionSidePanelV2 } from "@/pages/session/v2/session-side-panel-v2"
+import { SessionReviewEmptyChangesV2 } from "@opencode-ai/ui/v2/session-review-empty-changes-v2"
+import { SessionReviewEmptyNoGitV2 } from "@opencode-ai/ui/v2/session-review-empty-no-git-v2"
+import { ReviewPanelV2, ReviewPanelV2Sidebar } from "@/pages/session/v2/review-panel-v2"
+import { createReviewPanelV2State } from "@/pages/session/v2/review-panel-v2-state"
 import { TerminalPanel } from "@/pages/session/terminal-panel"
 import { useSessionCommands } from "@/pages/session/use-session-commands"
 import { useSessionHashScroll } from "@/pages/session/use-session-hash-scroll"
@@ -916,22 +923,22 @@ export default function Page() {
     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
     }
 
-    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 (
       <Select
         options={changesOptions()}
         current={store.changes}
-        label={label}
+        label={changesLabel}
         onSelect={(option) => option && setStore("changes", option)}
         variant="ghost"
         size="small"
@@ -940,6 +947,24 @@ export default function Page() {
     )
   }
 
+  const changesTitleV2 = () => {
+    if (!canReview()) {
+      return null
+    }
+
+    return (
+      <SelectV2
+        appearance="inline"
+        options={changesOptions()}
+        current={store.changes}
+        label={changesLabel}
+        placement="bottom-start"
+        gutter={6}
+        onSelect={(option) => option && setStore("changes", 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>
@@ -986,6 +1011,22 @@ export default function Page() {
     )
   }
 
+  const reviewEmptyV2 = (input: { loadingClass: string }) => {
+    if (store.changes === "git" || store.changes === "branch") {
+      if (!reviewReady()) return <div class={input.loadingClass}>{language.t("session.review.loadingChanges")}</div>
+      return <SessionReviewEmptyChangesV2 />
+    }
+
+    if (store.changes === "turn") {
+      if (nogit()) {
+        return <SessionReviewEmptyNoGitV2 pending={gitMutation.isPending} onInitGit={initGit} />
+      }
+      return <SessionReviewEmptyChangesV2 />
+    }
+
+    return <SessionReviewEmptyChangesV2 />
+  }
+
   const reviewContent = (input: {
     diffStyle: DiffStyle
     onDiffStyleChange?: (style: DiffStyle) => void
@@ -1019,6 +1060,37 @@ export default function Page() {
     </Show>
   )
 
+  const reviewV2State = createReviewPanelV2State()
+
+  const reviewPanelV2Props = () => ({
+    title: changesTitleV2(),
+    empty: reviewEmptyV2({
+      loadingClass: "px-6 py-4 text-text-weak",
+    }),
+    diffs: reviewDiffs,
+    diffsReady: reviewReady,
+    activeFile: tree.activeDiff,
+    onSelectFile: focusReviewDiff,
+    diffStyle: layout.review.diffStyle(),
+    onDiffStyleChange: layout.review.setDiffStyle,
+    state: reviewV2State,
+    onLineComment: (comment: SessionReviewLineComment) => addCommentToContext({ ...comment, origin: "review" }),
+    onLineCommentUpdate: updateCommentInContext,
+    onLineCommentDelete: removeCommentFromContext,
+    lineCommentActions: reviewCommentActions(),
+    comments: comments.all(),
+    focusedComment: comments.focus(),
+    onFocusedCommentChange: comments.setFocus,
+  })
+
+  const reviewPanelV2 = () => (
+    <div class="flex flex-col h-full overflow-hidden bg-background-stronger contain-strict">
+      <ReviewPanelV2 {...reviewPanelV2Props()} />
+    </div>
+  )
+
+  const reviewSidebarV2 = () => <ReviewPanelV2Sidebar {...reviewPanelV2Props()} />
+
   const reviewPanel = () => (
     <div class="flex flex-col h-full overflow-hidden bg-background-stronger contain-strict">
       <div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
@@ -1843,22 +1915,64 @@ export default function Page() {
           </Show>
         </div>
 
-        <SessionSidePanel
-          canReview={canReview}
-          diffs={reviewDiffs}
-          diffsReady={reviewReady}
-          empty={reviewEmptyText}
-          hasReview={hasReview}
-          reviewCount={reviewCount}
-          reviewPanel={reviewPanel}
-          activeDiff={tree.activeDiff}
-          focusReviewDiff={focusReviewDiff}
-          reviewSnap={ui.reviewSnap}
-          size={size}
-        />
+        <Show
+          when={newSessionDesign() && !!params.id}
+          fallback={
+            <SessionSidePanel
+              canReview={canReview}
+              diffs={reviewDiffs}
+              diffsReady={reviewReady}
+              empty={reviewEmptyText}
+              hasReview={hasReview}
+              reviewCount={reviewCount}
+              reviewPanel={reviewPanel}
+              activeDiff={tree.activeDiff}
+              focusReviewDiff={focusReviewDiff}
+              reviewSnap={ui.reviewSnap}
+              size={size}
+            />
+          }
+        >
+          <div
+            class="flex flex-col min-h-0 h-full flex-1 min-w-0"
+            classList={{ "gap-2": desktopReviewOpen() && view().terminal.opened() }}
+          >
+            <div class="flex-1 min-h-0 min-w-0 flex">
+              <SessionSidePanelV2
+                canReview={canReview}
+                diffs={reviewDiffs}
+                diffsReady={reviewReady}
+                hasReview={hasReview}
+                reviewCount={reviewCount}
+                reviewPanel={reviewPanelV2}
+                reviewSidebar={reviewSidebarV2}
+                reviewV2State={reviewV2State}
+                fileTabReview={reviewPanelV2Props}
+                reviewSnap={ui.reviewSnap}
+                size={size}
+              />
+            </div>
+            <Show when={desktopReviewOpen()}>
+              <div
+                class="shrink-0 overflow-hidden"
+                classList={{
+                  "rounded-[6px] shadow-[var(--v2-elevation-raised)] bg-background-stronger":
+                    view().terminal.opened(),
+                }}
+              >
+                <TerminalPanel
+                  variant="v2"
+                  maxHeight={() => (typeof window === "undefined" ? 400 : window.innerHeight * 0.4)}
+                />
+              </div>
+            </Show>
+          </div>
+        </Show>
       </div>
 
-      <TerminalPanel />
+      <Show when={!newSessionDesign() || !params.id}>
+        <TerminalPanel />
+      </Show>
     </div>
   )
 }
diff --git a/packages/app/src/pages/session/file-tabs.tsx b/packages/app/src/pages/session/file-tabs.tsx
index 364760eab0bc..0aa0bea3190c 100644
--- a/packages/app/src/pages/session/file-tabs.tsx
+++ b/packages/app/src/pages/session/file-tabs.tsx
@@ -171,7 +171,7 @@ function createScrollSync(input: { tab: () => string; view: ReturnType<typeof us
   }
 }
 
-export function FileTabContent(props: { tab: string }) {
+export function FileTabContent(props: { tab: string; embedded?: boolean }) {
   const file = useFile()
   const comments = useComments()
   const language = useLanguage()
@@ -440,17 +440,25 @@ export function FileTabContent(props: { tab: string }) {
     </div>
   )
 
+  const body = (
+    <ScrollView class="h-full" viewportRef={scrollSync.setViewport} onScroll={scrollSync.handleScroll as any}>
+      <Switch>
+        <Match when={state()?.loaded}>{renderFile(contents())}</Match>
+        <Match when={state()?.loading}>
+          <div class="px-6 py-4 text-text-weak">{language.t("common.loading")}...</div>
+        </Match>
+        <Match when={state()?.error}>{(err) => <div class="px-6 py-4 text-text-weak">{err()}</div>}</Match>
+      </Switch>
+    </ScrollView>
+  )
+
+  if (props.embedded) {
+    return <div class="relative h-full min-h-0 overflow-hidden">{body}</div>
+  }
+
   return (
     <Tabs.Content value={props.tab} class="mt-3 relative h-full">
-      <ScrollView class="h-full" viewportRef={scrollSync.setViewport} onScroll={scrollSync.handleScroll as any}>
-        <Switch>
-          <Match when={state()?.loaded}>{renderFile(contents())}</Match>
-          <Match when={state()?.loading}>
-            <div class="px-6 py-4 text-text-weak">{language.t("common.loading")}...</div>
-          </Match>
-          <Match when={state()?.error}>{(err) => <div class="px-6 py-4 text-text-weak">{err()}</div>}</Match>
-        </Switch>
-      </ScrollView>
+      {body}
     </Tabs.Content>
   )
 }
diff --git a/packages/app/src/pages/session/helpers.ts b/packages/app/src/pages/session/helpers.ts
index e136ba9991bb..0f4607679bc1 100644
--- a/packages/app/src/pages/session/helpers.ts
+++ b/packages/app/src/pages/session/helpers.ts
@@ -4,6 +4,7 @@ import { makeEventListener } from "@solid-primitives/event-listener"
 import { same } from "@/utils/same"
 
 const emptyTabs: string[] = []
+export const SESSION_OPEN_FILE_TAB = "open-file"
 
 type Tabs = {
   active: Accessor<string | undefined>
@@ -31,7 +32,7 @@ export const createSessionTabs = (input: TabsInput) => {
         .tabs()
         .all()
         .flatMap((tab) => {
-          if (tab === "context" || tab === "review") return []
+          if (tab === "context" || tab === "review" || tab === SESSION_OPEN_FILE_TAB) return []
           const value = input.pathFromTab(tab) ? input.normalizeTab(tab) : tab
           if (seen.has(value)) return []
           seen.add(value)
@@ -44,6 +45,7 @@ export const createSessionTabs = (input: TabsInput) => {
   const activeTab = createMemo(() => {
     const active = input.tabs().active()
     if (active === "context") return active
+    if (active === SESSION_OPEN_FILE_TAB) return active
     if (active === "review" && review()) return active
     if (active && input.pathFromTab(active)) return input.normalizeTab(active)
 
@@ -61,6 +63,7 @@ export const createSessionTabs = (input: TabsInput) => {
   const closableTab = createMemo(() => {
     const active = activeTab()
     if (active === "context") return active
+    if (active === SESSION_OPEN_FILE_TAB) return active
     if (!openedTabs().includes(active)) return
     return active
   })
@@ -74,6 +77,20 @@ export const createSessionTabs = (input: TabsInput) => {
   }
 }
 
+export const toggleSessionTerminal = (
+  view: {
+    terminal: { opened: () => boolean; toggle: () => void }
+    reviewPanel: { opened: () => boolean; open: () => void }
+  },
+  options?: { openReviewPanel?: boolean },
+) => {
+  const opening = !view.terminal.opened()
+  if (opening && options?.openReviewPanel && !view.reviewPanel.opened()) {
+    view.reviewPanel.open()
+  }
+  view.terminal.toggle()
+}
+
 export const focusTerminalById = (id: string) => {
   const wrapper = document.getElementById(`terminal-wrapper-${id}`)
   const terminal = wrapper?.querySelector('[data-component="terminal"]')
diff --git a/packages/app/src/pages/session/terminal-panel.tsx b/packages/app/src/pages/session/terminal-panel.tsx
index 444d83d1d5a0..57a5e1e360b7 100644
--- a/packages/app/src/pages/session/terminal-panel.tsx
+++ b/packages/app/src/pages/session/terminal-panel.tsx
@@ -1,7 +1,12 @@
 import { For, Show, createEffect, createMemo, on, onCleanup, onMount } from "solid-js"
+import { Portal } from "solid-js/web"
 import { createStore } from "solid-js/store"
 import { makeEventListener } from "@solid-primitives/event-listener"
 import { Tabs } from "@opencode-ai/ui/tabs"
+import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { TooltipKeybind } from "@opencode-ai/ui/tooltip"
@@ -9,7 +14,7 @@ import { DragDropProvider, DragDropSensors, DragOverlay, SortableProvider, close
 import type { DragEvent } from "@thisbeyond/solid-dnd"
 import { ConstrainDragYAxis, getDraggableId } from "@/utils/solid-dnd"
 
-import { SortableTerminalTab } from "@/components/session"
+import { SortableTerminalTab, SortableTerminalTabV2 } from "@/components/session"
 import { Terminal } from "@/components/terminal"
 import { useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
@@ -19,16 +24,19 @@ 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"
+import { useTerminalPanelTabsV2 } from "@/pages/session/use-terminal-panel-tabs-v2"
 
-export function TerminalPanel() {
+export function TerminalPanel(props: { maxHeight?: () => number; variant?: "default" | "v2" } = {}) {
   const delays = [120, 240]
   const layout = useLayout()
   const terminal = useTerminal()
   const language = useLanguage()
   const command = useCommand()
   const { params, workspaceKey, view } = useSessionLayout()
+  const tabsV2 = useTerminalPanelTabsV2({ terminal, enabled: () => props.variant === "v2" })
 
   const opened = createMemo(() => view().terminal.opened())
+  const isV2 = () => props.variant === "v2"
   const size = createSizing()
   const height = createMemo(() => layout.terminal.height())
   const close = () => view().terminal.close()
@@ -41,7 +49,11 @@ export function TerminalPanel() {
     view: typeof window === "undefined" ? 1000 : (window.visualViewport?.height ?? window.innerHeight),
   })
 
-  const max = () => store.view * 0.6
+  const max = () => {
+    const viewportMax = store.view * 0.6
+    if (!props.maxHeight) return viewportMax
+    return Math.min(viewportMax, props.maxHeight())
+  }
   const pane = () => Math.min(height(), max())
 
   onMount(() => {
@@ -190,6 +202,170 @@ export function TerminalPanel() {
     })
   }
 
+  const terminalById = (id: string) => all().find((pty) => pty.id === id)
+
+  const terminalContent = () => (
+    <div class="flex-1 min-h-0 relative">
+      <Show when={terminal.active()} keyed>
+        {(id) => {
+          const ops = terminal.bind()
+          return (
+            <Show when={terminalById(id)}>
+              {(pty) => (
+                <div id={`terminal-wrapper-${id}`} class="absolute inset-0">
+                  <Terminal
+                    pty={pty()}
+                    autoFocus={opened()}
+                    onConnect={() => markTerminalConnected(terminalRecoveryKey(pty()), id, ops.trim)}
+                    onCleanup={ops.update}
+                    onConnectError={() => recoverTerminal(terminalRecoveryKey(pty()), id, ops.clone)}
+                  />
+                </div>
+              )}
+            </Show>
+          )
+        }}
+      </Show>
+    </div>
+  )
+
+  const loadingTabsBar = () => (
+    <Show
+      when={isV2()}
+      fallback={
+        <div class="h-10 flex items-center gap-2 px-2 border-b border-border-weaker-base bg-background-stronger 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="session-review-v2-tabs-bar">
+        <div class="session-review-v2-tabs-list flex flex-1 min-w-0 items-center gap-2 overflow-hidden">
+          <For each={handoff()}>
+            {(title) => (
+              <div class="px-2 py-1 rounded-md bg-surface-base text-13-regular text-text-weak truncate max-w-40">
+                {title}
+              </div>
+            )}
+          </For>
+          <div class="flex-1" />
+          <div class="text-text-weak pr-2 text-13-regular">
+            {language.t("common.loading")}
+            {language.t("common.loading.ellipsis")}
+          </div>
+        </div>
+      </div>
+    </Show>
+  )
+
+  const v1Tabs = () => (
+    <>
+      <Tabs
+        variant="alt"
+        value={terminal.active()}
+        onChange={(id) => terminal.open(id)}
+        class="!h-auto !flex-none"
+      >
+        <Tabs.List class="h-10 border-b border-border-weaker-base">
+          <SortableProvider ids={ids()}>
+            <For each={all()}>{(pty) => <SortableTerminalTab terminal={pty} onClose={close} />}</For>
+          </SortableProvider>
+          <div class="h-full flex items-center justify-center">
+            <TooltipKeybind
+              title={language.t("command.terminal.new")}
+              keybind={command.keybind("terminal.new")}
+              class="flex items-center"
+            >
+              <IconButton
+                icon="plus-small"
+                variant="ghost"
+                iconSize="large"
+                onClick={terminal.new}
+                aria-label={language.t("command.terminal.new")}
+              />
+            </TooltipKeybind>
+          </div>
+        </Tabs.List>
+      </Tabs>
+      {terminalContent()}
+    </>
+  )
+
+  const v2Tabs = () => (
+    <>
+      <TabsV2
+        variant="pill"
+        value={terminal.active()}
+        onChange={(id) => terminal.open(id)}
+        class="session-review-v2-tabs flex flex-col h-full min-h-0"
+      >
+        <div class="session-review-v2-tabs-bar">
+          <TabsV2.List class="session-review-v2-tabs-list" ref={tabsV2.setTabListRef}>
+            <For each={tabsV2.visibleStripTabs()}>
+              {(id) => (
+                <Show when={terminalById(id)}>
+                  {(pty) => (
+                    <SortableTerminalTabV2
+                      terminal={pty()}
+                      onClose={close}
+                      dragged={tabsV2.drag.active && tabsV2.drag.draggedTab === id}
+                      pressed={tabsV2.pressedTab() === id}
+                      dragActive={tabsV2.drag.active}
+                      onStripPointerDown={(event) => tabsV2.onStripPointerDown(id, event)}
+                    />
+                  )}
+                </Show>
+              )}
+            </For>
+            <div class="session-review-v2-tabs-actions shrink-0 sticky right-0 z-10 flex items-center justify-center">
+              <TooltipV2 placement="bottom" value={language.t("command.terminal.new")} class="flex items-center">
+                <IconButtonV2
+                  variant="ghost-muted"
+                  size="large"
+                  icon={<IconV2 name="plus" size="small" />}
+                  onClick={terminal.new}
+                  aria-label={language.t("command.terminal.new")}
+                />
+              </TooltipV2>
+            </div>
+          </TabsV2.List>
+        </div>
+        <div class="session-review-v2-panel-body">{terminalContent()}</div>
+      </TabsV2>
+      <Show when={tabsV2.drag.active && tabsV2.drag.draggedTab} keyed>
+        {(id) => (
+          <Show when={terminalById(id)}>
+            {(pty) => (
+              <Portal>
+                <div style={tabsV2.floaterStyle()}>
+                  <div data-component="tabs-v2-drag-preview">
+                    <div class="truncate">
+                      {terminalTabLabel({
+                        title: pty().title,
+                        titleNumber: pty().titleNumber,
+                        t: language.t as (key: string, vars?: Record<string, string | number | boolean>) => string,
+                      })}
+                    </div>
+                  </div>
+                </div>
+              </Portal>
+            )}
+          </Show>
+        )}
+      </Show>
+    </>
+  )
+
   return (
     <div
       ref={root}
@@ -200,7 +376,7 @@ export function TerminalPanel() {
       inert={!opened()}
       class="relative w-full shrink-0 overflow-hidden bg-background-stronger"
       classList={{
-        "border-t border-border-weak-base": opened(),
+        "border-t border-border-weak-base": opened() && !isV2(),
         "transition-[height] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[height] motion-reduce:transition-none":
           !size.active(),
       }}
@@ -231,101 +407,42 @@ export function TerminalPanel() {
           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-background-stronger 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>
+              {loadingTabsBar()}
               <div class="flex-1 flex items-center justify-center text-text-weak">{language.t("terminal.loading")}</div>
             </div>
           }
         >
-          <DragDropProvider
-            onDragStart={handleTerminalDragStart}
-            onDragEnd={handleTerminalDragEnd}
-            onDragOver={handleTerminalDragOver}
-            collisionDetector={closestCenter}
-          >
-            <DragDropSensors />
-            <ConstrainDragYAxis />
-            <div class="flex flex-col h-full">
-              <Tabs
-                variant="alt"
-                value={terminal.active()}
-                onChange={(id) => terminal.open(id)}
-                class="!h-auto !flex-none"
-              >
-                <Tabs.List class="h-10 border-b border-border-weaker-base">
-                  <SortableProvider ids={ids()}>
-                    <For each={all()}>{(pty) => <SortableTerminalTab terminal={pty} onClose={close} />}</For>
-                  </SortableProvider>
-                  <div class="h-full flex items-center justify-center">
-                    <TooltipKeybind
-                      title={language.t("command.terminal.new")}
-                      keybind={command.keybind("terminal.new")}
-                      class="flex items-center"
-                    >
-                      <IconButton
-                        icon="plus-small"
-                        variant="ghost"
-                        iconSize="large"
-                        onClick={terminal.new}
-                        aria-label={language.t("command.terminal.new")}
-                      />
-                    </TooltipKeybind>
-                  </div>
-                </Tabs.List>
-              </Tabs>
-              <div class="flex-1 min-h-0 relative">
-                <Show when={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={opened()}
-                              onConnect={() => markTerminalConnected(terminalRecoveryKey(pty()), id, ops.trim)}
-                              onCleanup={ops.update}
-                              onConnectError={() => recoverTerminal(terminalRecoveryKey(pty()), id, ops.clone)}
-                            />
-                          </div>
-                        )}
-                      </Show>
-                    )
-                  }}
+          <Show when={isV2()} fallback={
+            <DragDropProvider
+              onDragStart={handleTerminalDragStart}
+              onDragEnd={handleTerminalDragEnd}
+              onDragOver={handleTerminalDragOver}
+              collisionDetector={closestCenter}
+            >
+              <DragDropSensors />
+              <ConstrainDragYAxis />
+              <div class="flex flex-col h-full min-h-0">{v1Tabs()}</div>
+              <DragOverlay>
+                <Show when={store.activeDraggable} keyed>
+                  {(id) => (
+                    <Show when={terminalById(id)}>
+                      {(t) => (
+                        <div class="relative p-1 h-10 flex items-center bg-background-stronger text-14-regular">
+                          {terminalTabLabel({
+                            title: t().title,
+                            titleNumber: t().titleNumber,
+                            t: language.t as (key: string, vars?: Record<string, string | number | boolean>) => string,
+                          })}
+                        </div>
+                      )}
+                    </Show>
+                  )}
                 </Show>
-              </div>
-            </div>
-            <DragOverlay>
-              <Show when={store.activeDraggable} keyed>
-                {(id) => (
-                  <Show when={all().find((pty) => pty.id === id)}>
-                    {(t) => (
-                      <div class="relative p-1 h-10 flex items-center bg-background-stronger text-14-regular">
-                        {terminalTabLabel({
-                          title: t().title,
-                          titleNumber: t().titleNumber,
-                          t: language.t as (key: string, vars?: Record<string, string | number | boolean>) => string,
-                        })}
-                      </div>
-                    )}
-                  </Show>
-                )}
-              </Show>
-            </DragOverlay>
-          </DragDropProvider>
+              </DragOverlay>
+            </DragDropProvider>
+          }>
+            <div class="flex flex-col h-full min-h-0">{v2Tabs()}</div>
+          </Show>
         </Show>
       </div>
     </div>
diff --git a/packages/app/src/pages/session/use-session-commands.tsx b/packages/app/src/pages/session/use-session-commands.tsx
index 7a5aa6246f81..3cc9d4b45534 100644
--- a/packages/app/src/pages/session/use-session-commands.tsx
+++ b/packages/app/src/pages/session/use-session-commands.tsx
@@ -15,7 +15,7 @@ import { useSync } from "@/context/sync"
 import { useTerminal } from "@/context/terminal"
 import { showToast } from "@/utils/toast"
 import { findLast } from "@opencode-ai/core/util/array"
-import { createSessionTabs } from "@/pages/session/helpers"
+import { createSessionTabs, toggleSessionTerminal } from "@/pages/session/helpers"
 import { extractPromptFromParts } from "@/utils/prompt"
 import { UserMessage } from "@opencode-ai/sdk/v2"
 import { useSessionLayout } from "@/pages/session/session-layout"
@@ -430,6 +430,7 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
         onSelect: openFile,
       }),
       tab &&
+        !settings.general.newLayoutDesigns() &&
         fileCommand({
           id: "tab.close",
           title: language.t("command.tab.close"),
@@ -454,9 +455,10 @@ export const useSessionCommands = (actions: SessionCommandContext) => {
     viewCommand({
       id: "terminal.toggle",
       title: language.t("command.terminal.toggle"),
-      keybind: "ctrl+`",
+      keybind: desktopV2() && !!params.id ? "mod+j" : "ctrl+`",
       slash: "terminal",
-      onSelect: () => view().terminal.toggle(),
+      onSelect: () =>
+        toggleSessionTerminal(view(), { openReviewPanel: desktopV2() && !!params.id }),
     }),
     viewCommand({
       id: "review.toggle",
diff --git a/packages/app/src/pages/session/use-terminal-panel-tabs-v2.ts b/packages/app/src/pages/session/use-terminal-panel-tabs-v2.ts
new file mode 100644
index 000000000000..08fe8e9de236
--- /dev/null
+++ b/packages/app/src/pages/session/use-terminal-panel-tabs-v2.ts
@@ -0,0 +1,273 @@
+import { createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js"
+import { createStore } from "solid-js/store"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import {
+  ACTIVATION_DISTANCE,
+  autoscrollSpeed,
+  captureTabDragLayout,
+  clampFloaterLeft,
+  draftOrderChanged,
+  insertIndexFromVirtualLayout,
+  movePlaceholder,
+  pointerDistance,
+  syncLayoutScroll,
+  type TabDragLayout,
+} from "@/components/session/session-tab-drag-v2"
+import type { useTerminal } from "@/context/terminal"
+
+type Terminal = ReturnType<typeof useTerminal>
+
+type Input = {
+  terminal: Terminal
+  enabled?: () => boolean
+}
+
+export function useTerminalPanelTabsV2(input: Input) {
+  const enabled = () => input.enabled?.() ?? true
+  const [pressedTab, setPressedTab] = createSignal<string | undefined>()
+  const [drag, setDrag] = createStore({
+    active: false,
+    draggedTab: undefined as string | undefined,
+    pointerX: 0,
+    floaterTop: 0,
+    dragWidth: 0,
+    grabOffsetX: 0,
+    draftOrder: [] as string[],
+    initialOrder: [] as string[],
+    placeholderIndex: 0,
+  })
+  const [gesture, setGesture] = createStore({
+    pending: undefined as
+      | {
+          tab: string
+          startX: number
+          startY: number
+          pointerID: number
+          width: number
+          grabOffsetX: number
+          grabOffsetY: number
+        }
+      | undefined,
+  })
+
+  let tabListRef: HTMLDivElement | undefined
+  let dragPointerID: number | undefined
+  let dragLayout: TabDragLayout | undefined
+  let autoscrollFrame: number | undefined
+
+  const stripTabs = createMemo(() => input.terminal.all().map((pty) => pty.id))
+
+  const visibleStripTabs = createMemo(() => {
+    if (!drag.active || drag.draftOrder.length === 0) return stripTabs()
+    return drag.draftOrder
+  })
+
+  const reorderStripTabs = (order: string[]) => {
+    for (const [index, id] of order.entries()) {
+      const current = input.terminal.all().findIndex((pty) => pty.id === id)
+      if (current !== index) input.terminal.move(id, index)
+    }
+  }
+
+  const updateInsertIndex = () => {
+    if (!drag.active || !dragLayout || !drag.draggedTab) return
+    const nextIndex = insertIndexFromVirtualLayout(
+      drag.pointerX,
+      drag.draftOrder,
+      drag.draggedTab,
+      drag.placeholderIndex,
+      dragLayout,
+    )
+    if (nextIndex === drag.placeholderIndex) return
+    const next = movePlaceholder(drag.draftOrder, drag.draggedTab, nextIndex)
+    setDrag({
+      draftOrder: next,
+      placeholderIndex: nextIndex,
+    })
+  }
+
+  const syncScroll = () => {
+    if (!tabListRef || !dragLayout) return
+    syncLayoutScroll(tabListRef, dragLayout)
+    updateInsertIndex()
+  }
+
+  const draggableStripLeft = () => {
+    if (dragLayout) return dragLayout.listLeft
+    if (!tabListRef) return 0
+    const slots = Array.from(tabListRef.querySelectorAll<HTMLElement>("[data-session-tab-slot]"))
+    if (slots.length === 0) return tabListRef.getBoundingClientRect().left
+    return Math.min(...slots.map((slot) => slot.getBoundingClientRect().left))
+  }
+
+  const stopAutoscroll = () => {
+    if (autoscrollFrame === undefined) return
+    cancelAnimationFrame(autoscrollFrame)
+    autoscrollFrame = undefined
+  }
+
+  const tickAutoscroll = () => {
+    if (!drag.active || !tabListRef) return
+    const rect = tabListRef.getBoundingClientRect()
+    const speed = autoscrollSpeed(drag.pointerX, draggableStripLeft(), rect.right)
+    if (speed !== 0) {
+      tabListRef.scrollLeft += speed
+      syncScroll()
+    }
+    autoscrollFrame = requestAnimationFrame(tickAutoscroll)
+  }
+
+  const startAutoscroll = () => {
+    stopAutoscroll()
+    autoscrollFrame = requestAnimationFrame(tickAutoscroll)
+  }
+
+  const startDrag = (tab: string) => {
+    const order = stripTabs()
+    const index = order.indexOf(tab)
+    const pending = gesture.pending
+    if (index === -1 || !pending || !tabListRef) return
+
+    dragLayout = captureTabDragLayout(tabListRef, order)
+    dragPointerID = pending.pointerID
+    setGesture("pending", undefined)
+    setDrag({
+      active: true,
+      draggedTab: tab,
+      pointerX: pending.startX,
+      floaterTop: pending.startY - pending.grabOffsetY,
+      dragWidth: pending.width,
+      grabOffsetX: pending.grabOffsetX,
+      draftOrder: order,
+      initialOrder: order,
+      placeholderIndex: index,
+    })
+    setPressedTab(undefined)
+    startAutoscroll()
+  }
+
+  const finishDrag = (commit: boolean) => {
+    if (commit && drag.active && draftOrderChanged(drag.initialOrder, drag.draftOrder)) {
+      reorderStripTabs(drag.draftOrder)
+    }
+    setDrag({
+      active: false,
+      draggedTab: undefined,
+      pointerX: 0,
+      floaterTop: 0,
+      dragWidth: 0,
+      grabOffsetX: 0,
+      draftOrder: [],
+      initialOrder: [],
+      placeholderIndex: 0,
+    })
+    setGesture("pending", undefined)
+    setPressedTab(undefined)
+    dragPointerID = undefined
+    dragLayout = undefined
+    stopAutoscroll()
+  }
+
+  const onStripPointerDown = (tab: string, event: PointerEvent) => {
+    if (event.button !== 0 || drag.active) return
+    const tabEl = (event.currentTarget as HTMLElement).querySelector<HTMLElement>("[data-session-tab]")
+    if (!tabEl) return
+    input.terminal.open(tab)
+    setPressedTab(tab)
+    const rect = tabEl.getBoundingClientRect()
+    setGesture("pending", {
+      tab,
+      startX: event.clientX,
+      startY: event.clientY,
+      pointerID: event.pointerId,
+      width: rect.width,
+      grabOffsetX: event.clientX - rect.left,
+      grabOffsetY: event.clientY - rect.top,
+    })
+  }
+
+  const onPointerMove = (event: PointerEvent) => {
+    const pending = gesture.pending
+    if (pending && !drag.active) {
+      if (event.pointerId !== pending.pointerID) return
+      if (pointerDistance(pending.startX, pending.startY, event.clientX, event.clientY) < ACTIVATION_DISTANCE) return
+      startDrag(pending.tab)
+    }
+    if (!drag.active) return
+    if (dragPointerID !== undefined && event.pointerId !== dragPointerID) return
+    setDrag("pointerX", event.clientX)
+    syncScroll()
+  }
+
+  const onPointerUp = (event: PointerEvent) => {
+    if (drag.active) {
+      if (dragPointerID !== undefined && event.pointerId !== dragPointerID) return
+      setDrag("pointerX", event.clientX)
+      syncScroll()
+      finishDrag(true)
+      return
+    }
+    if (!gesture.pending) return
+    if (event.pointerId !== gesture.pending.pointerID) return
+    setGesture("pending", undefined)
+    setPressedTab(undefined)
+  }
+
+  const onPointerCancel = (event: PointerEvent) => {
+    if (drag.active) {
+      if (dragPointerID !== undefined && event.pointerId !== dragPointerID) return
+      finishDrag(false)
+      return
+    }
+    if (!gesture.pending) return
+    if (event.pointerId !== gesture.pending.pointerID) return
+    setGesture("pending", undefined)
+    setPressedTab(undefined)
+  }
+
+  onMount(() => {
+    if (!enabled()) return
+
+    const cleanups = [
+      makeEventListener(window, "pointermove", onPointerMove),
+      makeEventListener(window, "pointerup", onPointerUp),
+      makeEventListener(window, "pointercancel", onPointerCancel),
+    ]
+    return () => {
+      for (const cleanup of cleanups) cleanup()
+    }
+  })
+
+  createEffect(() => {
+    if (!enabled() || !drag.active || !tabListRef) return
+    return makeEventListener(tabListRef, "scroll", syncScroll)
+  })
+
+  onCleanup(stopAutoscroll)
+
+  const floaterStyle = () => {
+    const strip = tabListRef?.getBoundingClientRect()
+    const left = strip
+      ? clampFloaterLeft(drag.pointerX - drag.grabOffsetX, drag.dragWidth, draggableStripLeft(), strip.right)
+      : drag.pointerX - drag.grabOffsetX
+    return {
+      position: "fixed" as const,
+      top: `${drag.floaterTop}px`,
+      left: `${left}px`,
+      width: `${drag.dragWidth}px`,
+      "z-index": "10000",
+      "pointer-events": "none" as const,
+    }
+  }
+
+  return {
+    drag,
+    pressedTab,
+    visibleStripTabs,
+    setTabListRef: (el: HTMLDivElement) => {
+      tabListRef = el
+    },
+    onStripPointerDown,
+    floaterStyle,
+  }
+}
diff --git a/packages/app/src/pages/session/v2/file-tab-content-v2.tsx b/packages/app/src/pages/session/v2/file-tab-content-v2.tsx
new file mode 100644
index 000000000000..d9e3b2a5443d
--- /dev/null
+++ b/packages/app/src/pages/session/v2/file-tab-content-v2.tsx
@@ -0,0 +1,47 @@
+import { createMemo, Show } from "solid-js"
+import { SessionReviewFilePreviewV2 } from "@opencode-ai/ui/v2/session-review-file-preview-v2"
+import { useFile } from "@/context/file"
+import { useSDK } from "@/context/sdk"
+import { FileTabContent } from "@/pages/session/file-tabs"
+import { filterRenderableDiff } from "@/pages/session/v2/review-diff-kinds"
+import { makeReadFile, type ReviewPanelV2Props } from "@/pages/session/v2/review-panel-v2"
+
+export function FileTabContentV2(props: { tab: string; review: () => ReviewPanelV2Props }) {
+  const file = useFile()
+  const sdk = useSDK()
+  const review = props.review
+  const readFile = makeReadFile(sdk)
+
+  const path = createMemo(() => file.pathFromTab(props.tab))
+  const diffItem = createMemo(() => {
+    const value = path()
+    if (!value) return
+    return review().diffs().filter(filterRenderableDiff).find((diff) => diff.file === value)
+  })
+
+  return (
+    <Show when={diffItem()} keyed fallback={<FileTabContent tab={props.tab} embedded />}>
+      {(diff) => {
+        const model = review()
+        return (
+          <div data-component="session-review-v2" class="flex flex-col h-full min-h-0 overflow-hidden">
+            <SessionReviewFilePreviewV2
+              file={diff.file}
+              diff={diff}
+              diffStyle={model.diffStyle}
+              expandMode={model.state.expandMode()}
+              readFile={readFile}
+              onLineComment={model.onLineComment}
+              onLineCommentUpdate={model.onLineCommentUpdate}
+              onLineCommentDelete={model.onLineCommentDelete}
+              lineCommentActions={model.lineCommentActions}
+              comments={model.comments}
+              focusedComment={model.focusedComment}
+              onFocusedCommentChange={model.onFocusedCommentChange}
+            />
+          </div>
+        )
+      }}
+    </Show>
+  )
+}
diff --git a/packages/app/src/pages/session/v2/files-panel-v2.tsx b/packages/app/src/pages/session/v2/files-panel-v2.tsx
new file mode 100644
index 000000000000..5ee8e06e4952
--- /dev/null
+++ b/packages/app/src/pages/session/v2/files-panel-v2.tsx
@@ -0,0 +1,195 @@
+import { createEffect, createMemo, onCleanup, Show, type JSX } from "solid-js"
+import { createStore } from "solid-js/store"
+import type { SnapshotFileDiff, VcsFileDiff } from "@opencode-ai/sdk/v2"
+import { SessionReviewV2Sidebar } from "@opencode-ai/ui/v2/session-review-v2"
+import FileTreeV2 from "@/components/file-tree-v2"
+import { useFile } from "@/context/file"
+import { useLanguage } from "@/context/language"
+import { useSDK } from "@/context/sdk"
+import {
+  REVIEW_PANEL_V2_SIDEBAR_WIDTH_MAX,
+  REVIEW_PANEL_V2_SIDEBAR_WIDTH_MIN,
+  type ReviewPanelV2State,
+} from "@/pages/session/v2/review-panel-v2-state"
+import {
+  applyFileListKeyDown,
+  filterRenderableDiff,
+  normalizePath,
+  reviewDiffKinds,
+} from "@/pages/session/v2/review-diff-kinds"
+import { SessionFileListV2 } from "@/pages/session/v2/session-file-list-v2"
+
+type ReviewDiff = SnapshotFileDiff | VcsFileDiff
+
+const SEARCH_DEBOUNCE_MS = 120
+const SEARCH_LIMIT = 200
+
+export type FilesPanelV2SidebarProps = {
+  title: string | JSX.Element
+  state: ReviewPanelV2State
+  open?: boolean
+  focusFilterToken?: number
+  diffs: () => ReviewDiff[]
+  activeFile?: string
+  onOpenFile: (path: string) => void
+  onOpenFilePersist?: (path: string) => void
+}
+
+export function FilesPanelV2Sidebar(props: FilesPanelV2SidebarProps) {
+  const sdk = useSDK()
+  const file = useFile()
+  const language = useLanguage()
+  const open = createMemo(() => props.open ?? props.state.sidebarOpened())
+  const diffs = createMemo(() => props.diffs().filter(filterRenderableDiff))
+  const diffFiles = createMemo(() => diffs().map((diff) => diff.file))
+  const kinds = createMemo(() => reviewDiffKinds(diffs()))
+  const query = createMemo(() => props.state.filesFilter().trim())
+  const flatMode = createMemo(() => query().length > 0)
+  const [store, setStore] = createStore({
+    files: [] as string[],
+    loading: false,
+    error: undefined as string | undefined,
+    highlightedPath: undefined as string | undefined,
+  })
+
+  createEffect(() => {
+    const value = query()
+    const directory = sdk.directory
+    if (!directory || !value) {
+      setStore({
+        files: [],
+        loading: false,
+        error: undefined,
+        highlightedPath: undefined,
+      })
+      return
+    }
+
+    let cancelled = false
+    const timeout = setTimeout(() => {
+      setStore("loading", true)
+
+      void sdk.client.find
+        .files({
+          query: value,
+          dirs: "false",
+          fallback: "glob",
+          limit: SEARCH_LIMIT,
+        })
+        .then((response: { data?: string[] }) => {
+          if (cancelled) return
+          const normalized = (response.data ?? []).map(normalizePath)
+          const unique = [...new Set(normalized)]
+          setStore({
+            files: unique,
+            loading: false,
+            error: undefined,
+          })
+        })
+        .catch((error: unknown) => {
+          if (cancelled) return
+          console.error(`[files-panel-v2] file search failed query="${value}"`, error)
+          setStore({
+            files: [],
+            loading: false,
+            error: error instanceof Error ? error.message : "Search failed. Please try again.",
+            highlightedPath: undefined,
+          })
+        })
+    }, SEARCH_DEBOUNCE_MS)
+
+    onCleanup(() => {
+      cancelled = true
+      clearTimeout(timeout)
+    })
+  })
+
+  createEffect(() => {
+    const mode = flatMode()
+    const files = store.files
+    if (!mode || files.length === 0) {
+      if (store.highlightedPath) setStore("highlightedPath", undefined)
+      return
+    }
+    if (store.highlightedPath && files.includes(store.highlightedPath)) return
+    setStore("highlightedPath", files[0]!)
+  })
+
+  const onFilterKeyDown = (event: KeyboardEvent & { currentTarget: HTMLInputElement }) => {
+    if (!flatMode()) return
+    applyFileListKeyDown(event, store.files, store.highlightedPath, {
+      onHighlight: (path) => setStore("highlightedPath", path),
+      onSelect: props.onOpenFile,
+    })
+  }
+
+  const activeFile = createMemo(() => {
+    const active = props.activeFile
+    if (!active) return
+    return normalizePath(file.pathFromTab(active) ?? active)
+  })
+
+  return (
+    <SessionReviewV2Sidebar
+      variant="files"
+      open={open()}
+      title={props.title}
+      filter={props.state.filesFilter()}
+      onFilterChange={props.state.setFilesFilter}
+      onFilterKeyDown={onFilterKeyDown}
+      focusFilterToken={props.focusFilterToken}
+      width={props.state.sidebarWidth()}
+      onWidthChange={props.state.resizeSidebar}
+      minWidth={REVIEW_PANEL_V2_SIDEBAR_WIDTH_MIN}
+      maxWidth={REVIEW_PANEL_V2_SIDEBAR_WIDTH_MAX}
+    >
+      <Show
+        when={flatMode()}
+        fallback={
+          <FileTreeV2
+            path=""
+            modified={diffFiles()}
+            kinds={kinds()}
+            showModifiedLabel
+            active={activeFile()}
+            onFileClick={(node) => props.onOpenFile(node.path)}
+            onFileDoubleClick={(node) => props.onOpenFilePersist?.(node.path)}
+          />
+        }
+      >
+        <Show
+          when={!store.loading}
+          fallback={
+            <div class="px-2 py-2 text-12-regular text-text-weak">
+              {language.t("common.loading")}
+              {language.t("common.loading.ellipsis")}
+            </div>
+          }
+        >
+          <Show
+            when={!store.error}
+            fallback={<div class="px-2 py-2 text-12-regular text-text-danger">{store.error}</div>}
+          >
+            <Show
+              when={store.files.length > 0}
+              fallback={<div class="px-2 py-2 text-12-regular text-text-weak">{language.t("palette.empty")}</div>}
+            >
+              <SessionFileListV2
+                files={store.files}
+                kinds={kinds()}
+                showModifiedLabel
+                active={activeFile()}
+                highlighted={store.highlightedPath}
+                onFileClick={(path) => {
+                  setStore("highlightedPath", path)
+                  props.onOpenFile(path)
+                }}
+                onFileDoubleClick={props.onOpenFilePersist}
+              />
+            </Show>
+          </Show>
+        </Show>
+      </Show>
+    </SessionReviewV2Sidebar>
+  )
+}
diff --git a/packages/app/src/pages/session/v2/review-diff-kinds.test.ts b/packages/app/src/pages/session/v2/review-diff-kinds.test.ts
new file mode 100644
index 000000000000..b5a26cb32147
--- /dev/null
+++ b/packages/app/src/pages/session/v2/review-diff-kinds.test.ts
@@ -0,0 +1,23 @@
+import { describe, expect, test } from "bun:test"
+import { filterReviewFiles, reviewDiffKinds } from "./review-diff-kinds"
+
+describe("reviewDiffKinds", () => {
+  test("maps file and directory kinds", () => {
+    const kinds = reviewDiffKinds([
+      { file: "src/a.ts", additions: 1, deletions: 0, status: "added" },
+      { file: "src/b.ts", additions: 0, deletions: 2, status: "deleted" },
+    ])
+
+    expect(kinds.get("src/a.ts")).toBe("add")
+    expect(kinds.get("src/b.ts")).toBe("del")
+    expect(kinds.get("src")).toBe("mix")
+  })
+})
+
+describe("filterReviewFiles", () => {
+  test("filters by path substring", () => {
+    const files = ["src/a.ts", "src/b.ts", "lib/c.ts"]
+    expect(filterReviewFiles(files, "b.ts")).toEqual(["src/b.ts"])
+    expect(filterReviewFiles(files, "")).toEqual(files)
+  })
+})
diff --git a/packages/app/src/pages/session/v2/review-diff-kinds.ts b/packages/app/src/pages/session/v2/review-diff-kinds.ts
new file mode 100644
index 000000000000..99957f5bba4e
--- /dev/null
+++ b/packages/app/src/pages/session/v2/review-diff-kinds.ts
@@ -0,0 +1,68 @@
+import type { SnapshotFileDiff, VcsFileDiff } from "@opencode-ai/sdk/v2"
+
+export type ReviewDiffKind = "add" | "del" | "mix"
+
+type RenderDiff = (SnapshotFileDiff & { file: string }) | VcsFileDiff
+
+export function normalizePath(p: string) {
+  return p.replaceAll("\\", "/").replace(/\/+$/, "")
+}
+
+export function filterRenderableDiff(value: SnapshotFileDiff | VcsFileDiff): value is RenderDiff {
+  return typeof value.file === "string"
+}
+
+export function reviewDiffKinds(diffs: RenderDiff[]) {
+  const merge = (a: ReviewDiffKind | undefined, b: ReviewDiffKind) => {
+    if (!a) return b
+    if (a === b) return a
+    return "mix" as const
+  }
+
+  const out = new Map<string, ReviewDiffKind>()
+  for (const diff of diffs) {
+    const file = normalizePath(diff.file)
+    const kind = diff.status === "added" ? "add" : diff.status === "deleted" ? "del" : "mix"
+
+    out.set(file, kind)
+
+    const parts = file.split("/")
+    for (const [idx] of parts.slice(0, -1).entries()) {
+      const dir = parts.slice(0, idx + 1).join("/")
+      if (!dir) continue
+      out.set(dir, merge(out.get(dir), kind))
+    }
+  }
+  return out
+}
+
+export function filterReviewFiles(files: string[], query: string) {
+  const value = query.trim().toLowerCase()
+  if (!value) return files
+  return files.filter((file) => file.toLowerCase().includes(value))
+}
+
+export function applyFileListKeyDown(
+  event: KeyboardEvent,
+  files: readonly string[],
+  highlighted: string | undefined,
+  options: { onHighlight: (path: string) => void; onSelect: (path: string) => void },
+) {
+  if (files.length === 0) return
+
+  if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+    const currentIndex = highlighted ? files.indexOf(highlighted) : -1
+    const delta = event.key === "ArrowDown" ? 1 : -1
+    const start = currentIndex === -1 ? (delta > 0 ? 0 : files.length - 1) : currentIndex + delta
+    const index = Math.max(0, Math.min(files.length - 1, start))
+    options.onHighlight(files[index]!)
+    event.preventDefault()
+    return
+  }
+
+  if (event.key !== "Enter") return
+  const target = highlighted ?? files[0]
+  if (!target) return
+  options.onSelect(target)
+  event.preventDefault()
+}
diff --git a/packages/app/src/pages/session/v2/review-panel-v2-state.ts b/packages/app/src/pages/session/v2/review-panel-v2-state.ts
new file mode 100644
index 000000000000..f87964d46e00
--- /dev/null
+++ b/packages/app/src/pages/session/v2/review-panel-v2-state.ts
@@ -0,0 +1,41 @@
+import type { SessionReviewExpandMode } from "@opencode-ai/ui/v2/session-review-v2"
+import { createStore } from "solid-js/store"
+import { Persist, persisted } from "@/utils/persist"
+
+export const REVIEW_PANEL_V2_SIDEBAR_WIDTH_DEFAULT = 240
+export const REVIEW_PANEL_V2_SIDEBAR_WIDTH_MIN = 200
+export const REVIEW_PANEL_V2_SIDEBAR_WIDTH_MAX = 480
+
+export function createReviewPanelV2State() {
+  const [store, setStore] = persisted(
+    Persist.global("review-panel-v2"),
+    createStore({
+      sidebarOpened: true,
+      sidebarWidth: REVIEW_PANEL_V2_SIDEBAR_WIDTH_DEFAULT,
+      filter: "",
+      filesFilter: "",
+      expandMode: "collapse" as SessionReviewExpandMode,
+    }),
+  )
+
+  return {
+    sidebarOpened: () => store.sidebarOpened,
+    sidebarWidth: () => store.sidebarWidth,
+    filter: () => store.filter,
+    filesFilter: () => store.filesFilter,
+    expandMode: () => store.expandMode,
+    setFilter: (value: string) => setStore("filter", value),
+    setFilesFilter: (value: string) => setStore("filesFilter", value),
+    setExpandMode: (mode: SessionReviewExpandMode) => setStore("expandMode", mode),
+    resizeSidebar: (width: number) =>
+      setStore(
+        "sidebarWidth",
+        Math.min(REVIEW_PANEL_V2_SIDEBAR_WIDTH_MAX, Math.max(REVIEW_PANEL_V2_SIDEBAR_WIDTH_MIN, width)),
+      ),
+    toggleSidebar: () => setStore("sidebarOpened", (opened) => !opened),
+    openSidebar: () => setStore("sidebarOpened", true),
+    closeSidebar: () => setStore("sidebarOpened", false),
+  }
+}
+
+export type ReviewPanelV2State = ReturnType<typeof createReviewPanelV2State>
diff --git a/packages/app/src/pages/session/v2/review-panel-v2.tsx b/packages/app/src/pages/session/v2/review-panel-v2.tsx
new file mode 100644
index 000000000000..68c36f45c124
--- /dev/null
+++ b/packages/app/src/pages/session/v2/review-panel-v2.tsx
@@ -0,0 +1,223 @@
+import { createEffect, createMemo, createSignal, Show, type JSX } from "solid-js"
+import type { SnapshotFileDiff, VcsFileDiff } from "@opencode-ai/sdk/v2"
+import { SessionReviewV2, SessionReviewV2Sidebar } from "@opencode-ai/ui/v2/session-review-v2"
+import { SessionReviewFilePreviewV2 } from "@opencode-ai/ui/v2/session-review-file-preview-v2"
+import { DiffChanges } from "@opencode-ai/ui/v2/diff-changes-v2"
+import type {
+  SessionReviewComment,
+  SessionReviewCommentActions,
+  SessionReviewCommentDelete,
+  SessionReviewCommentUpdate,
+  SessionReviewDiffStyle,
+  SessionReviewFocus,
+  SessionReviewLineComment,
+} from "@opencode-ai/ui/session-review"
+import FileTreeV2 from "@/components/file-tree-v2"
+import { useLanguage } from "@/context/language"
+import { useSDK } from "@/context/sdk"
+import {
+  applyFileListKeyDown,
+  filterRenderableDiff,
+  filterReviewFiles,
+  reviewDiffKinds,
+} from "@/pages/session/v2/review-diff-kinds"
+import {
+  REVIEW_PANEL_V2_SIDEBAR_WIDTH_MAX,
+  REVIEW_PANEL_V2_SIDEBAR_WIDTH_MIN,
+  type ReviewPanelV2State,
+} from "@/pages/session/v2/review-panel-v2-state"
+import { SessionFileListV2 } from "@/pages/session/v2/session-file-list-v2"
+
+export function makeReadFile(sdk: ReturnType<typeof useSDK>) {
+  return async (path: string) =>
+    sdk.client.file
+      .read({ path })
+      .then((x) => x.data)
+      .catch((error) => {
+        console.debug("[session-review-v2] failed to read file", { path, error })
+        return undefined
+      })
+}
+
+type ReviewDiff = SnapshotFileDiff | VcsFileDiff
+
+export type ReviewPanelV2Props = {
+  title?: JSX.Element
+  empty?: JSX.Element
+  diffs: () => ReviewDiff[]
+  diffsReady: () => boolean
+  activeFile?: string
+  onSelectFile: (path: string) => void
+  diffStyle: SessionReviewDiffStyle
+  onDiffStyleChange?: (style: SessionReviewDiffStyle) => void
+  state: ReviewPanelV2State
+  onLineComment?: (comment: SessionReviewLineComment) => void
+  onLineCommentUpdate?: (comment: SessionReviewCommentUpdate) => void
+  onLineCommentDelete?: (comment: SessionReviewCommentDelete) => void
+  lineCommentActions?: SessionReviewCommentActions
+  comments?: SessionReviewComment[]
+  focusedComment?: SessionReviewFocus | null
+  onFocusedCommentChange?: (focus: SessionReviewFocus | null) => void
+}
+
+function useReviewPanelV2Data(props: ReviewPanelV2Props) {
+  const diffs = createMemo(() => props.diffs().filter(filterRenderableDiff))
+  const diffFiles = createMemo(() => diffs().map((diff) => diff.file))
+  const filteredFiles = createMemo(() => filterReviewFiles(diffFiles(), props.state.filter()))
+  const searching = createMemo(() => props.state.filter().trim().length > 0)
+  const kinds = createMemo(() => reviewDiffKinds(diffs()))
+  const activeDiff = createMemo(() => {
+    const active = props.activeFile
+    if (searching()) return active
+    const files = filteredFiles()
+    if (active && files.includes(active)) return active
+    return files[0]
+  })
+  const activeItem = createMemo(() => diffs().find((diff) => diff.file === activeDiff()))
+
+  return { diffs, filteredFiles, searching, kinds, activeDiff, activeItem }
+}
+
+function useReviewPanelV2ActiveFile(
+  props: ReviewPanelV2Props,
+  filteredFiles: () => string[],
+  searching: () => boolean,
+) {
+  createEffect(() => {
+    if (searching()) return
+    const files = filteredFiles()
+    const active = props.activeFile
+    if (files.length === 0) return
+    if (active && files.includes(active)) return
+    props.onSelectFile(files[0]!)
+  })
+}
+
+export function ReviewPanelV2Sidebar(props: ReviewPanelV2Props) {
+  const language = useLanguage()
+  const model = useReviewPanelV2Data(props)
+  const flatMode = createMemo(() => model.searching())
+  const [highlightedPath, setHighlightedPath] = createSignal<string | undefined>()
+  useReviewPanelV2ActiveFile(props, model.filteredFiles, model.searching)
+
+  createEffect(() => {
+    const files = model.filteredFiles()
+    if (!flatMode() || files.length === 0) {
+      if (highlightedPath()) setHighlightedPath(undefined)
+      return
+    }
+    const highlighted = highlightedPath()
+    if (highlighted && files.includes(highlighted)) return
+    setHighlightedPath(files[0]!)
+  })
+
+  const onFilterKeyDown = (event: KeyboardEvent & { currentTarget: HTMLInputElement }) => {
+    if (!flatMode()) return
+    applyFileListKeyDown(event, model.filteredFiles(), highlightedPath(), {
+      onHighlight: setHighlightedPath,
+      onSelect: props.onSelectFile,
+    })
+  }
+
+  return (
+    <SessionReviewV2Sidebar
+      open={props.state.sidebarOpened()}
+      title={props.title}
+      stats={<DiffChanges changes={model.diffs()} />}
+      filter={props.state.filter()}
+      onFilterChange={props.state.setFilter}
+      onFilterKeyDown={onFilterKeyDown}
+      width={props.state.sidebarWidth()}
+      onWidthChange={props.state.resizeSidebar}
+      minWidth={REVIEW_PANEL_V2_SIDEBAR_WIDTH_MIN}
+      maxWidth={REVIEW_PANEL_V2_SIDEBAR_WIDTH_MAX}
+    >
+      <Show
+        when={props.diffsReady()}
+        fallback={
+          <div class="px-2 py-2 text-12-regular text-text-weak">
+            {language.t("common.loading")}
+            {language.t("common.loading.ellipsis")}
+          </div>
+        }
+      >
+        <Show
+          when={flatMode()}
+          fallback={
+            <FileTreeV2
+              path=""
+              allowed={model.filteredFiles()}
+              kinds={model.kinds()}
+              showFolderChangeIndicator={false}
+              draggable={false}
+              active={model.activeDiff()}
+              onFileClick={(node) => props.onSelectFile(node.path)}
+            />
+          }
+        >
+          <Show
+            when={model.filteredFiles().length > 0}
+            fallback={<div class="px-2 py-2 text-12-regular text-text-weak">{language.t("palette.empty")}</div>}
+          >
+            <SessionFileListV2
+              files={model.filteredFiles()}
+              kinds={model.kinds()}
+              active={model.activeDiff()}
+              highlighted={highlightedPath()}
+              onFileClick={(path) => {
+                setHighlightedPath(path)
+                props.onSelectFile(path)
+              }}
+            />
+          </Show>
+        </Show>
+      </Show>
+    </SessionReviewV2Sidebar>
+  )
+}
+
+export function ReviewPanelV2(props: ReviewPanelV2Props) {
+  const sdk = useSDK()
+  const model = useReviewPanelV2Data(props)
+  const readFile = makeReadFile(sdk)
+
+  return (
+    <SessionReviewV2
+      hideSidebar
+      title={props.title}
+      stats={<DiffChanges changes={model.diffs()} />}
+      empty={props.empty}
+      sidebarOpen={props.state.sidebarOpened()}
+      filter={props.state.filter()}
+      onFilterChange={props.state.setFilter}
+      activeFile={model.activeDiff()}
+      files={model.filteredFiles()}
+      onSelectFile={props.onSelectFile}
+      diffStyle={props.diffStyle}
+      onDiffStyleChange={props.onDiffStyleChange}
+      expandMode={props.state.expandMode()}
+      onExpandModeChange={props.state.setExpandMode}
+      hasDiffs={model.diffs().length > 0}
+      preview={
+        <Show when={model.activeItem()} keyed>
+          {(diff) => (
+            <SessionReviewFilePreviewV2
+              file={diff.file}
+              diff={diff}
+              diffStyle={props.diffStyle}
+              expandMode={props.state.expandMode()}
+              readFile={readFile}
+              onLineComment={props.onLineComment}
+              onLineCommentUpdate={props.onLineCommentUpdate}
+              onLineCommentDelete={props.onLineCommentDelete}
+              lineCommentActions={props.lineCommentActions}
+              comments={props.comments}
+              focusedComment={props.focusedComment}
+              onFocusedCommentChange={props.onFocusedCommentChange}
+            />
+          )}
+        </Show>
+      }
+    />
+  )
+}
diff --git a/packages/app/src/pages/session/v2/session-file-list-v2.tsx b/packages/app/src/pages/session/v2/session-file-list-v2.tsx
new file mode 100644
index 000000000000..436440f1567c
--- /dev/null
+++ b/packages/app/src/pages/session/v2/session-file-list-v2.tsx
@@ -0,0 +1,101 @@
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import "@opencode-ai/ui/v2/file-tree-v2.css"
+import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
+import { createEffect, For, Show } from "solid-js"
+import { normalizePath } from "@/pages/session/v2/review-diff-kinds"
+
+type FileKind = "add" | "del" | "mix"
+
+function kindLabel(kind: FileKind, showModifiedLabel: boolean) {
+  if (kind === "add") return "A"
+  if (kind === "del") return "D"
+  if (!showModifiedLabel) return ""
+  return "M"
+}
+
+function kindChange(kind: FileKind) {
+  if (kind === "add") return "added"
+  if (kind === "del") return "deleted"
+  return "modified"
+}
+
+export function SessionFileListV2(props: {
+  files: readonly string[]
+  active?: string
+  highlighted?: string
+  kinds?: ReadonlyMap<string, FileKind>
+  showModifiedLabel?: boolean
+  onFileClick: (path: string) => void
+  onFileDoubleClick?: (path: string) => void
+}) {
+  const active = () => normalizePath(props.active ?? "")
+  const highlighted = () => normalizePath(props.highlighted ?? "")
+  const showModifiedLabel = () => props.showModifiedLabel ?? false
+  let rootRef: HTMLDivElement | undefined
+
+  createEffect(() => {
+    highlighted()
+    if (!rootRef) return
+    queueMicrotask(() => {
+      const row = rootRef?.querySelector<HTMLElement>('[data-slot="file-tree-v2-row"][data-highlighted]')
+      row?.scrollIntoView({ block: "nearest" })
+    })
+  })
+
+  return (
+    <div
+      ref={(el) => {
+        rootRef = el
+      }}
+      data-component="file-tree-v2"
+      data-show-modified-label={showModifiedLabel() ? "" : undefined}
+    >
+      <For each={props.files}>
+        {(path) => {
+          const normalized = normalizePath(path)
+          const selected = () => {
+            if (highlighted()) return highlighted() === normalized
+            return active() === normalized
+          }
+          const highlightedRow = () => highlighted() === normalized
+          const kind = () => props.kinds?.get(normalized)
+          const directory = () => getDirectory(normalized)
+          const filename = () => getFilename(normalized)
+          return (
+            <button
+              type="button"
+              data-slot="file-tree-v2-row"
+              data-selected={selected() ? "" : undefined}
+              data-highlighted={highlightedRow() ? "" : undefined}
+              style="padding-left: 8px"
+              onClick={() => props.onFileClick(path)}
+              onDblClick={() => props.onFileDoubleClick?.(path)}
+            >
+              <span class="filetree-iconpair size-4">
+                <FileIcon node={{ path, type: "file" }} class="size-4 filetree-icon filetree-icon--color" />
+                <FileIcon node={{ path, type: "file" }} class="size-4 filetree-icon filetree-icon--mono" mono />
+              </span>
+              <span class="flex min-w-0 flex-1 items-center overflow-hidden whitespace-nowrap">
+                <Show when={directory()}>
+                  {(value) => (
+                    <span class="text-12-medium text-text-muted truncate min-w-0 shrink">
+                      {value()}
+                    </span>
+                  )}
+                </Show>
+                <span class="text-12-medium text-text-base truncate min-w-0 shrink-0">{filename()}</span>
+              </span>
+              <Show when={kind()}>
+                {(value) => (
+                  <span data-slot="file-tree-v2-change" data-change={kindChange(value())}>
+                    {kindLabel(value(), showModifiedLabel())}
+                  </span>
+                )}
+              </Show>
+            </button>
+          )
+        }}
+      </For>
+    </div>
+  )
+}
diff --git a/packages/app/src/pages/session/v2/session-side-panel-v2.tsx b/packages/app/src/pages/session/v2/session-side-panel-v2.tsx
new file mode 100644
index 000000000000..4e76b56244bf
--- /dev/null
+++ b/packages/app/src/pages/session/v2/session-side-panel-v2.tsx
@@ -0,0 +1,419 @@
+import { createEffect, createMemo, createSignal, For, onCleanup, Show, type JSX } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Portal } from "solid-js/web"
+import { createMediaQuery } from "@solid-primitives/media"
+import { TabsV2 } from "@opencode-ai/ui/v2/tabs-v2"
+import { Icon as IconV2 } from "@opencode-ai/ui/v2/icon"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/icon-button-v2"
+import { TooltipV2 } from "@opencode-ai/ui/v2/tooltip-v2"
+import { Mark } from "@opencode-ai/ui/logo"
+import { SessionReviewEmptyOpenFileV2 } from "@opencode-ai/ui/v2/session-review-empty-open-file-v2"
+import { SessionReviewV2SidebarToggle } from "@opencode-ai/ui/v2/session-review-v2"
+import type { SnapshotFileDiff, VcsFileDiff } from "@opencode-ai/sdk/v2"
+import { SessionContextUsage } from "@/components/session-context-usage"
+import { SessionContextTab, FileVisual } from "@/components/session"
+import { OpenInAppV2 } from "@/components/session/open-in-app-v2"
+import { getFilename } from "@opencode-ai/core/util/path"
+import { decode64 } from "@/utils/base64"
+import { useFile, type SelectedLineRange } from "@/context/file"
+import { useLanguage } from "@/context/language"
+import { useLayout } from "@/context/layout"
+import { useSettings } from "@/context/settings"
+import { FilesPanelV2Sidebar } from "@/pages/session/v2/files-panel-v2"
+import { createFileTabListSync } from "@/pages/session/file-tab-scroll"
+import { FileTabContentV2 } from "@/pages/session/v2/file-tab-content-v2"
+import type { ReviewPanelV2Props } from "@/pages/session/v2/review-panel-v2"
+import { SESSION_OPEN_FILE_TAB, type Sizing } from "@/pages/session/helpers"
+import { setSessionHandoff } from "@/pages/session/handoff"
+import { useSessionLayout } from "@/pages/session/session-layout"
+import type { ReviewPanelV2State } from "@/pages/session/v2/review-panel-v2-state"
+import { useSessionSidePanelTabsV2 } from "@/pages/session/v2/use-session-side-panel-tabs-v2"
+
+export function SessionSidePanelV2(props: {
+  canReview: () => boolean
+  diffs: () => (SnapshotFileDiff | VcsFileDiff)[]
+  diffsReady: () => boolean
+  hasReview: () => boolean
+  reviewCount: () => number
+  reviewPanel: () => JSX.Element
+  reviewSidebar: () => JSX.Element
+  reviewV2State: ReviewPanelV2State
+  fileTabReview: () => ReviewPanelV2Props
+  reviewSnap: boolean
+  size: Sizing
+}) {
+  const settings = useSettings()
+  const layout = useLayout()
+  const file = useFile()
+  const language = useLanguage()
+  const { sessionKey, tabs, view, params } = useSessionLayout()
+
+  const isDesktop = createMediaQuery("(min-width: 768px)")
+  const reviewOpen = createMemo(() => isDesktop() && view().reviewPanel.opened())
+  const reviewTab = createMemo(() => isDesktop())
+  const panelWidth = createMemo(() => {
+    if (!reviewOpen()) return "0px"
+    return "auto"
+  })
+
+  const normalizeTab = (tab: string) => {
+    if (!tab.startsWith("file://")) return tab
+    return file.tab(tab)
+  }
+
+  const openReviewPanel = () => {
+    if (!view().reviewPanel.opened()) view().reviewPanel.open()
+  }
+
+  const tabsV2 = useSessionSidePanelTabsV2({
+    tabs,
+    tabForPath: file.tab,
+    normalizeTab,
+    pathFromTab: file.pathFromTab,
+    loadFile: file.load,
+    openReviewPanel,
+    review: reviewTab,
+    hasReview: props.canReview,
+  })
+  const contextOpen = tabsV2.tabState.contextOpen
+  const activeTab = tabsV2.tabState.activeTab
+  const activeFileTab = tabsV2.tabState.activeFileTab
+  const [focusFilesFilterToken, setFocusFilesFilterToken] = createSignal(0)
+  const [tracking, setTracking] = createStore({
+    prevActiveTab: undefined as string | undefined,
+    prevTemporaryTab: undefined as string | undefined,
+    prevHadOpenFileTab: false,
+    wasOpenFileTab: false,
+    initialized: false,
+  })
+  const filesSidebarOpen = createMemo(
+    () => props.reviewV2State.sidebarOpened() || activeTab() === SESSION_OPEN_FILE_TAB,
+  )
+
+  createEffect(() => {
+    const currentActiveTab = activeTab()
+    const currentTemporaryTab = tabsV2.temporaryTab()
+    const currentHadOpenFileTab = tabs().all().includes(SESSION_OPEN_FILE_TAB)
+    const isOpenFileTab = currentActiveTab === SESSION_OPEN_FILE_TAB
+    if (isOpenFileTab && !tracking.wasOpenFileTab) {
+      const shouldClearFilter =
+        tracking.initialized &&
+        !tracking.prevHadOpenFileTab &&
+        tracking.prevActiveTab !== tracking.prevTemporaryTab
+      if (shouldClearFilter) props.reviewV2State.setFilesFilter("")
+      setFocusFilesFilterToken((token) => token + 1)
+    }
+    setTracking({
+      prevActiveTab: currentActiveTab,
+      prevTemporaryTab: currentTemporaryTab,
+      prevHadOpenFileTab: currentHadOpenFileTab,
+      wasOpenFileTab: isOpenFileTab,
+      initialized: true,
+    })
+  })
+
+  createEffect(() => {
+    if (!file.ready()) return
+
+    setSessionHandoff(sessionKey(), {
+      files: tabs()
+        .all()
+        .reduce<Record<string, SelectedLineRange | null>>((acc, tab) => {
+          const path = file.pathFromTab(tab)
+          if (!path) return acc
+
+          const selected = file.selectedLines(path)
+          acc[path] =
+            selected && typeof selected === "object" && "start" in selected && "end" in selected
+              ? (selected as SelectedLineRange)
+              : null
+
+          return acc
+        }, {}),
+    })
+  })
+
+  const projectDirectory = createMemo(() => decode64(params.dir) ?? "")
+  const project = createMemo(() => {
+    const directory = projectDirectory()
+    if (!directory) return
+    return layout.projects.list().find((p) => p.worktree === directory || p.sandboxes?.includes(directory))
+  })
+  const projectName = createMemo(() => {
+    const current = project()
+    if (current) return current.name || getFilename(current.worktree)
+    return getFilename(projectDirectory())
+  })
+  const onReviewTab = () => activeTab() === "review" && props.canReview()
+
+  const reviewTabLabel = () => {
+    const filesChanged = language.t("session.review.filesChangedTab", { count: "" }).trim()
+    const count = props.reviewCount()
+    if (count <= 0) return filesChanged
+    return `${filesChanged} ${count}`
+  }
+
+  return (
+    <Show when={isDesktop() && !!params.id}>
+      <aside
+        id="review-panel"
+        aria-label={language.t("session.panel.reviewAndFiles")}
+        aria-hidden={!reviewOpen()}
+        inert={!reviewOpen()}
+        class="relative min-w-0 h-full flex shrink-0 overflow-hidden bg-background-base"
+        classList={{
+          "pointer-events-none": !reviewOpen(),
+          "transition-[width] duration-[240ms] ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[width] motion-reduce:transition-none":
+            !props.size.active() && !props.reviewSnap,
+          "rounded-[6px] shadow-[var(--v2-elevation-raised)] overflow-hidden": settings.general.newLayoutDesigns(),
+          "flex-1": reviewOpen(),
+        }}
+        style={{ width: panelWidth() }}
+      >
+        <Show when={reviewOpen()}>
+          <div class="size-full flex">
+            <div
+              aria-hidden={!reviewOpen()}
+              inert={!reviewOpen()}
+              class="relative min-w-0 h-full flex-1 overflow-hidden bg-background-base"
+              classList={{
+                "pointer-events-none": !reviewOpen(),
+              }}
+            >
+              <div class="size-full min-w-0 h-full bg-background-base">
+                <TabsV2
+                  variant="pill"
+                  value={activeTab()}
+                  onChange={() => {}}
+                  class="session-review-v2-tabs flex flex-col h-full min-h-0"
+                >
+                  <div class="session-review-v2-tabs-bar">
+                    <Show when={reviewTab() && props.canReview() && reviewOpen()}>
+                      <div class="session-review-v2-sidebar-toggle-slot">
+                        <SessionReviewV2SidebarToggle
+                          opened={props.reviewV2State.sidebarOpened()}
+                          onToggle={props.reviewV2State.toggleSidebar}
+                        />
+                      </div>
+                    </Show>
+                    <TabsV2.List
+                      class="session-review-v2-tabs-list"
+                      ref={(el: HTMLDivElement) => {
+                        tabsV2.setTabListRef(el)
+                        const stop = createFileTabListSync({ el, contextOpen })
+                        onCleanup(stop)
+                      }}
+                    >
+                      <Show when={reviewTab() && props.canReview()}>
+                        <TabsV2.Trigger
+                          value="review"
+                          onPointerDown={(event) => {
+                            if (event.button !== 0) return
+                            tabsV2.handleTabsChange("review")
+                          }}
+                        >
+                          <div>{reviewTabLabel()}</div>
+                        </TabsV2.Trigger>
+                      </Show>
+                      <Show when={contextOpen()}>
+                        <TabsV2.Trigger
+                          value="context"
+                          onMiddleClick={() => tabs().close("context")}
+                          onPointerDown={(event) => {
+                            if (event.button !== 0) return
+                            tabsV2.handleTabsChange("context")
+                          }}
+                        >
+                          <div class="flex items-center gap-2">
+                            <SessionContextUsage variant="indicator" />
+                            <div>{language.t("session.tab.context")}</div>
+                          </div>
+                          <div class="-mr-1.5">
+                            <IconButtonV2
+                              size="small"
+                              variant="ghost-muted"
+                              class="session-review-v2-tab-close"
+                              onMouseDown={(event) => {
+                                event.preventDefault()
+                                event.stopPropagation()
+                              }}
+                              onClick={() => tabs().close("context")}
+                              icon={<IconV2 name="xmark-small" />}
+                              aria-label="Close tab"
+                            />
+                          </div>
+                        </TabsV2.Trigger>
+                      </Show>
+                      <For each={tabsV2.visibleStripTabs()}>
+                        {(tab) => {
+                          const path = () => file.pathFromTab(tab)
+                          const placeholder = () => tab === SESSION_OPEN_FILE_TAB
+                          const temporary = () => tabsV2.temporaryTab() === tab
+                          const dragged = () => tabsV2.drag.active && tabsV2.drag.draggedTab === tab
+                          return (
+                            <div
+                              data-session-tab-slot
+                              data-tab-key={tab}
+                              class="session-review-v2-file-tab-slot flex shrink-0 items-center touch-none"
+                              classList={{
+                                "pointer-events-none": tabsV2.drag.active,
+                                "invisible": dragged(),
+                                "session-review-v2-file-tab-slot--pressed": tabsV2.pressedTab() === tab,
+                              }}
+                              onPointerDown={(event) => {
+                                if (dragged()) return
+                                tabsV2.onStripPointerDown(tab, event)
+                              }}
+                            >
+                              <TabsV2.Trigger
+                                value={tab}
+                                data-session-tab
+                                data-temporary={temporary() ? "" : undefined}
+                                classList={{ "session-review-v2-file-tab--temporary": temporary() }}
+                                onMiddleClick={() => tabsV2.closeTab(tab)}
+                                onDblClick={() => {
+                                  if (placeholder()) return
+                                  tabsV2.persistTab(tab)
+                                }}
+                              >
+                                <Show
+                                  when={placeholder()}
+                                  fallback={
+                                    <Show when={path()}>{(value) => <FileVisual path={value()} textClass="truncate" />}</Show>
+                                  }
+                                >
+                                  <div class="flex items-center gap-1.5">
+                                    <IconV2 name="open-file" size="small" />
+                                    <div>{language.t("command.file.open")}</div>
+                                  </div>
+                                </Show>
+                                <div class="-mr-1.5">
+                                  <IconButtonV2
+                                    size="small"
+                                    variant="ghost-muted"
+                                    class="session-review-v2-tab-close"
+                                    onMouseDown={(event) => {
+                                      event.preventDefault()
+                                      event.stopPropagation()
+                                    }}
+                                    onClick={() => tabsV2.closeTab(tab)}
+                                    icon={<IconV2 name="xmark-small" />}
+                                    aria-label="Close tab"
+                                  />
+                                </div>
+                              </TabsV2.Trigger>
+                            </div>
+                          )
+                        }}
+                      </For>
+                      <div class="session-review-v2-tabs-actions shrink-0 sticky right-0 z-10 flex items-center justify-center">
+                        <TooltipV2 placement="bottom" value={language.t("command.file.open")} class="flex items-center">
+                          <IconButtonV2
+                            variant="ghost-muted"
+                            size="large"
+                            icon={<IconV2 name="plus" size="small" />}
+                            onClick={tabsV2.openPlaceholderTab}
+                            aria-label={language.t("command.file.open")}
+                          />
+                        </TooltipV2>
+                      </div>
+                    </TabsV2.List>
+                    <OpenInAppV2 directory={projectDirectory} />
+                  </div>
+
+                  <div class="session-review-v2-panel-body">
+                    <Show
+                      when={onReviewTab()}
+                      fallback={
+                        <FilesPanelV2Sidebar
+                          title={projectName()}
+                          state={props.reviewV2State}
+                          open={filesSidebarOpen()}
+                          focusFilterToken={focusFilesFilterToken()}
+                          diffs={props.diffs}
+                          activeFile={activeFileTab()}
+                          onOpenFile={(path) => tabsV2.openFileTab(path)}
+                          onOpenFilePersist={(path) => tabsV2.openFileTab(path, { persist: true })}
+                        />
+                      }
+                    >
+                      {props.reviewSidebar()}
+                    </Show>
+                    <div class="flex flex-col flex-1 min-w-0 min-h-0 overflow-hidden">
+                      <Show when={reviewTab() && props.canReview()}>
+                        <TabsV2.Content value="review" class="flex flex-col h-full overflow-hidden contain-strict">
+                          <Show when={reviewOpen() && activeTab() === "review"}>{props.reviewPanel()}</Show>
+                        </TabsV2.Content>
+                      </Show>
+
+                      <TabsV2.Content
+                        value={SESSION_OPEN_FILE_TAB}
+                        class="flex flex-col h-full overflow-hidden contain-strict"
+                      >
+                        <Show when={activeTab() === SESSION_OPEN_FILE_TAB}>
+                          <SessionReviewEmptyOpenFileV2 />
+                        </Show>
+                      </TabsV2.Content>
+
+                      <TabsV2.Content value="empty" class="flex flex-col h-full overflow-hidden contain-strict">
+                        <Show when={activeTab() === "empty"}>
+                          <div class="relative pt-2 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-6">
+                              <Mark class="w-14 opacity-10" />
+                              <div class="text-14-regular text-text-weak max-w-56">
+                                {language.t("session.files.selectToOpen")}
+                              </div>
+                            </div>
+                          </div>
+                        </Show>
+                      </TabsV2.Content>
+
+                      <Show when={contextOpen()}>
+                        <TabsV2.Content value="context" class="flex flex-col h-full overflow-hidden contain-strict">
+                          <Show when={activeTab() === "context"}>
+                            <div class="relative pt-2 flex-1 min-h-0 overflow-hidden">
+                              <SessionContextTab />
+                            </div>
+                          </Show>
+                        </TabsV2.Content>
+                      </Show>
+
+                      <Show when={activeFileTab()} keyed>
+                        {(tab) => <FileTabContentV2 tab={tab} review={props.fileTabReview} />}
+                      </Show>
+                    </div>
+                  </div>
+                </TabsV2>
+                <Show when={tabsV2.drag.active && tabsV2.drag.draggedTab} keyed>
+                  {(tab) => {
+                    const path = file.pathFromTab(tab)
+                    const temporary = tabsV2.temporaryTab() === tab
+                    return (
+                      <Portal>
+                        <div style={tabsV2.floaterStyle()}>
+                          <div data-component="tabs-v2-drag-preview" data-temporary={temporary ? "" : undefined}>
+                            <Show
+                              when={path}
+                              fallback={
+                                <div class="flex items-center gap-1.5">
+                                  <IconV2 name="open-file" size="small" />
+                                  <div>{language.t("command.file.open")}</div>
+                                </div>
+                              }
+                            >
+                              {(value) => <FileVisual active path={value()} textClass="truncate" />}
+                            </Show>
+                          </div>
+                        </div>
+                      </Portal>
+                    )
+                  }}
+                </Show>
+              </div>
+            </div>
+          </div>
+        </Show>
+      </aside>
+    </Show>
+  )
+}
diff --git a/packages/app/src/pages/session/v2/use-session-side-panel-tabs-v2.ts b/packages/app/src/pages/session/v2/use-session-side-panel-tabs-v2.ts
new file mode 100644
index 000000000000..35f3d0d23e38
--- /dev/null
+++ b/packages/app/src/pages/session/v2/use-session-side-panel-tabs-v2.ts
@@ -0,0 +1,432 @@
+import { batch, createEffect, createMemo, createSignal, onCleanup, onMount } from "solid-js"
+import { createStore } from "solid-js/store"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import { createSessionTabs, SESSION_OPEN_FILE_TAB } from "@/pages/session/helpers"
+import {
+  ACTIVATION_DISTANCE,
+  autoscrollSpeed,
+  captureTabDragLayout,
+  clampFloaterLeft,
+  draftOrderChanged,
+  insertIndexFromVirtualLayout,
+  movePlaceholder,
+  pointerDistance,
+  syncLayoutScroll,
+  type TabDragLayout,
+} from "@/components/session/session-tab-drag-v2"
+
+type TabsStore = {
+  all: () => string[]
+  active: () => string | undefined
+  setAll: (all: string[]) => void
+  setActive: (tab: string | undefined) => void
+  open: (tab: string) => void | Promise<void>
+  close: (tab: string) => void
+}
+
+type Input = {
+  tabs: () => TabsStore
+  tabForPath: (path: string) => string
+  normalizeTab: (tab: string) => string
+  pathFromTab: (tab: string) => string | undefined
+  loadFile: (path: string) => void
+  openReviewPanel: () => void
+  review: () => boolean
+  hasReview: () => boolean
+}
+
+function replaceTab(all: string[], from: string, to: string) {
+  const fromIndex = all.indexOf(from)
+  if (fromIndex === -1) return all
+  const next = all.filter((value) => value !== from)
+  if (next.includes(to)) return next
+  next.splice(fromIndex, 0, to)
+  return next
+}
+
+export function useSessionSidePanelTabsV2(input: Input) {
+  const tabState = createSessionTabs({
+    tabs: input.tabs,
+    pathFromTab: input.pathFromTab,
+    normalizeTab: input.normalizeTab,
+    review: input.review,
+    hasReview: input.hasReview,
+  })
+
+  const [temporaryTab, setTemporaryTab] = createSignal<string | undefined>()
+  const [pressedTab, setPressedTab] = createSignal<string | undefined>()
+  const [drag, setDrag] = createStore({
+    active: false,
+    draggedTab: undefined as string | undefined,
+    pointerX: 0,
+    floaterTop: 0,
+    dragWidth: 0,
+    grabOffsetX: 0,
+    draftOrder: [] as string[],
+    initialOrder: [] as string[],
+    placeholderIndex: 0,
+  })
+  const [gesture, setGesture] = createStore({
+    pending: undefined as
+      | {
+          tab: string
+          startX: number
+          startY: number
+          pointerID: number
+          width: number
+          grabOffsetX: number
+          grabOffsetY: number
+        }
+      | undefined,
+  })
+
+  let tabListRef: HTMLDivElement | undefined
+  let dragPointerID: number | undefined
+  let dragLayout: TabDragLayout | undefined
+  let autoscrollFrame: number | undefined
+  let activeToken = 0
+
+  const setActiveStable = (tab: string | undefined) => {
+    activeToken += 1
+    const token = activeToken
+    input.tabs().setActive(tab)
+    queueMicrotask(() => {
+      if (token !== activeToken) return
+      if (input.tabs().active() === tab) return
+      input.tabs().setActive(tab)
+    })
+  }
+
+  const stripTabs = createMemo(() => {
+    const seen = new Set<string>()
+    return input
+      .tabs()
+      .all()
+      .flatMap((tab) => {
+        if (tab === "context" || tab === "review") return []
+        const value = tab.startsWith("file://") ? input.normalizeTab(tab) : tab
+        if (value !== SESSION_OPEN_FILE_TAB && !input.pathFromTab(value)) return []
+        if (seen.has(value)) return []
+        seen.add(value)
+        return [value]
+      })
+  })
+
+  const visibleStripTabs = createMemo(() => {
+    if (!drag.active || drag.draftOrder.length === 0) return stripTabs()
+    return drag.draftOrder
+  })
+
+  const closeTab = (tab: string) => {
+    if (temporaryTab() === tab) setTemporaryTab(undefined)
+    input.tabs().close(tab)
+  }
+
+  const persistTab = (tab: string) => {
+    if (temporaryTab() !== tab) return
+    setTemporaryTab(undefined)
+  }
+
+  const setTabs = (all: string[], active: string) => {
+    batch(() => {
+      input.tabs().setAll(all)
+      setActiveStable(active)
+    })
+  }
+
+  const openPlaceholderTab = () => {
+    const all = input.tabs().all()
+    const temporary = temporaryTab()
+    if (all.includes(SESSION_OPEN_FILE_TAB)) {
+      setActiveStable(SESSION_OPEN_FILE_TAB)
+      setTemporaryTab(SESSION_OPEN_FILE_TAB)
+      return
+    }
+    if (temporary && all.includes(temporary)) {
+      const next = replaceTab(all, temporary, SESSION_OPEN_FILE_TAB)
+      setTabs(next, SESSION_OPEN_FILE_TAB)
+      setTemporaryTab(SESSION_OPEN_FILE_TAB)
+      return
+    }
+    batch(() => {
+      input.tabs().open(SESSION_OPEN_FILE_TAB)
+      setActiveStable(SESSION_OPEN_FILE_TAB)
+    })
+    setTemporaryTab(SESSION_OPEN_FILE_TAB)
+  }
+
+  const openFileTab = (path: string, options?: { persist?: boolean }) => {
+    const persist = options?.persist ?? false
+    const next = input.tabForPath(path)
+    const all = input.tabs().all()
+    const active = input.tabs().active()
+    const existing = all.includes(next)
+    const temporary = temporaryTab()
+    const replaceFrom =
+      active === SESSION_OPEN_FILE_TAB && all.includes(SESSION_OPEN_FILE_TAB)
+        ? SESSION_OPEN_FILE_TAB
+        : !persist && temporary && temporary !== next && all.includes(temporary)
+          ? temporary
+          : undefined
+
+    const finalize = () => {
+      input.openReviewPanel()
+      input.loadFile(path)
+      setActiveStable(next)
+    }
+
+    if (replaceFrom) {
+      const reordered = replaceTab(all, replaceFrom, next)
+      setTabs(reordered, next)
+      if (!persist && !existing) setTemporaryTab(next)
+      else setTemporaryTab(undefined)
+      finalize()
+      return
+    }
+
+    if (existing) {
+      if (persist && temporary === next) setTemporaryTab(undefined)
+      if (!persist && temporary === SESSION_OPEN_FILE_TAB) setTemporaryTab(undefined)
+      finalize()
+      return
+    }
+
+    batch(() => {
+      input.tabs().open(next)
+      setActiveStable(next)
+    })
+    if (!persist) setTemporaryTab(next)
+    if (persist && temporary === SESSION_OPEN_FILE_TAB) setTemporaryTab(undefined)
+    finalize()
+  }
+
+  const reorderStripTabs = (nextOrder: string[]) => {
+    const specials = input.tabs().all().filter((tab) => tab === "context" || tab === "review")
+    input.tabs().setAll([...specials, ...nextOrder])
+  }
+
+  const updateInsertIndex = () => {
+    if (!drag.active || !dragLayout || !drag.draggedTab) return
+    const nextIndex = insertIndexFromVirtualLayout(
+      drag.pointerX,
+      drag.draftOrder,
+      drag.draggedTab,
+      drag.placeholderIndex,
+      dragLayout,
+    )
+    if (nextIndex === drag.placeholderIndex) return
+    const next = movePlaceholder(drag.draftOrder, drag.draggedTab, nextIndex)
+    setDrag({
+      draftOrder: next,
+      placeholderIndex: nextIndex,
+    })
+  }
+
+  const syncScroll = () => {
+    if (!tabListRef || !dragLayout) return
+    syncLayoutScroll(tabListRef, dragLayout)
+    updateInsertIndex()
+  }
+
+  const draggableStripLeft = () => {
+    if (dragLayout) return dragLayout.listLeft
+    if (!tabListRef) return 0
+    const slots = Array.from(tabListRef.querySelectorAll<HTMLElement>("[data-session-tab-slot]"))
+    if (slots.length === 0) return tabListRef.getBoundingClientRect().left
+    return Math.min(...slots.map((slot) => slot.getBoundingClientRect().left))
+  }
+
+  const stopAutoscroll = () => {
+    if (autoscrollFrame === undefined) return
+    cancelAnimationFrame(autoscrollFrame)
+    autoscrollFrame = undefined
+  }
+
+  const tickAutoscroll = () => {
+    if (!drag.active || !tabListRef) return
+    const rect = tabListRef.getBoundingClientRect()
+    const speed = autoscrollSpeed(drag.pointerX, draggableStripLeft(), rect.right)
+    if (speed !== 0) {
+      tabListRef.scrollLeft += speed
+      syncScroll()
+    }
+    autoscrollFrame = requestAnimationFrame(tickAutoscroll)
+  }
+
+  const startAutoscroll = () => {
+    stopAutoscroll()
+    autoscrollFrame = requestAnimationFrame(tickAutoscroll)
+  }
+
+  const startDrag = (tab: string) => {
+    const order = stripTabs()
+    const index = order.indexOf(tab)
+    const pending = gesture.pending
+    if (index === -1 || !pending || !tabListRef) return
+
+    dragLayout = captureTabDragLayout(tabListRef, order)
+    dragPointerID = pending.pointerID
+    setGesture("pending", undefined)
+    setDrag({
+      active: true,
+      draggedTab: tab,
+      pointerX: pending.startX,
+      floaterTop: pending.startY - pending.grabOffsetY,
+      dragWidth: pending.width,
+      grabOffsetX: pending.grabOffsetX,
+      draftOrder: order,
+      initialOrder: order,
+      placeholderIndex: index,
+    })
+    setPressedTab(undefined)
+    startAutoscroll()
+  }
+
+  const finishDrag = (commit: boolean) => {
+    if (commit && drag.active && draftOrderChanged(drag.initialOrder, drag.draftOrder)) {
+      reorderStripTabs(drag.draftOrder)
+    }
+    setDrag({
+      active: false,
+      draggedTab: undefined,
+      pointerX: 0,
+      floaterTop: 0,
+      dragWidth: 0,
+      grabOffsetX: 0,
+      draftOrder: [],
+      initialOrder: [],
+      placeholderIndex: 0,
+    })
+    setGesture("pending", undefined)
+    setPressedTab(undefined)
+    dragPointerID = undefined
+    dragLayout = undefined
+    stopAutoscroll()
+  }
+
+  const onStripPointerDown = (tab: string, event: PointerEvent) => {
+    if (event.button !== 0 || drag.active) return
+    const tabEl = (event.currentTarget as HTMLElement).querySelector<HTMLElement>("[data-session-tab]")
+    if (!tabEl) return
+    setActiveStable(tab)
+    setPressedTab(tab)
+    const rect = tabEl.getBoundingClientRect()
+    setGesture("pending", {
+      tab,
+      startX: event.clientX,
+      startY: event.clientY,
+      pointerID: event.pointerId,
+      width: rect.width,
+      grabOffsetX: event.clientX - rect.left,
+      grabOffsetY: event.clientY - rect.top,
+    })
+  }
+
+  const onPointerMove = (event: PointerEvent) => {
+    const pending = gesture.pending
+    if (pending && !drag.active) {
+      if (event.pointerId !== pending.pointerID) return
+      if (pointerDistance(pending.startX, pending.startY, event.clientX, event.clientY) < ACTIVATION_DISTANCE) return
+      startDrag(pending.tab)
+    }
+    if (!drag.active) return
+    if (dragPointerID !== undefined && event.pointerId !== dragPointerID) return
+    setDrag("pointerX", event.clientX)
+    syncScroll()
+  }
+
+  const onPointerUp = (event: PointerEvent) => {
+    if (drag.active) {
+      if (dragPointerID !== undefined && event.pointerId !== dragPointerID) return
+      setDrag("pointerX", event.clientX)
+      syncScroll()
+      finishDrag(true)
+      return
+    }
+    if (!gesture.pending) return
+    if (event.pointerId !== gesture.pending.pointerID) return
+    setGesture("pending", undefined)
+    setPressedTab(undefined)
+  }
+
+  const onPointerCancel = (event: PointerEvent) => {
+    if (drag.active) {
+      if (dragPointerID !== undefined && event.pointerId !== dragPointerID) return
+      finishDrag(false)
+      return
+    }
+    if (!gesture.pending) return
+    if (event.pointerId !== gesture.pending.pointerID) return
+    setGesture("pending", undefined)
+    setPressedTab(undefined)
+  }
+
+  onMount(() => {
+    const cleanups = [
+      makeEventListener(window, "pointermove", onPointerMove),
+      makeEventListener(window, "pointerup", onPointerUp),
+      makeEventListener(window, "pointercancel", onPointerCancel),
+    ]
+    return () => {
+      for (const cleanup of cleanups) cleanup()
+    }
+  })
+
+  createEffect(() => {
+    const temporary = temporaryTab()
+    if (!temporary) return
+    if (stripTabs().includes(temporary)) return
+    setTemporaryTab(undefined)
+  })
+
+  createEffect(() => {
+    if (!drag.active || !tabListRef) return
+    return makeEventListener(tabListRef, "scroll", syncScroll)
+  })
+
+  onCleanup(stopAutoscroll)
+
+  const handleTabsChange = (value: string) => {
+    if (value === "review" || value === "context" || value === SESSION_OPEN_FILE_TAB) {
+      setActiveStable(value)
+      return
+    }
+    if (!input.pathFromTab(value)) return
+    setActiveStable(value)
+  }
+
+  const floaterStyle = () => {
+    const strip = tabListRef?.getBoundingClientRect()
+    const left = strip
+      ? clampFloaterLeft(drag.pointerX - drag.grabOffsetX, drag.dragWidth, draggableStripLeft(), strip.right)
+      : drag.pointerX - drag.grabOffsetX
+    return {
+      position: "fixed" as const,
+      top: `${drag.floaterTop}px`,
+      left: `${left}px`,
+      width: `${drag.dragWidth}px`,
+      "z-index": "10000",
+      "pointer-events": "none" as const,
+    }
+  }
+
+  return {
+    tabState,
+    drag,
+    pressedTab,
+    temporaryTab,
+    stripTabs,
+    visibleStripTabs,
+    setTabListRef: (el: HTMLDivElement) => {
+      tabListRef = el
+    },
+    openPlaceholderTab,
+    openFileTab,
+    closeTab,
+    persistTab,
+    onStripPointerDown,
+    handleTabsChange,
+    floaterStyle,
+  }
+}
+
diff --git a/packages/core/src/filesystem/search.ts b/packages/core/src/filesystem/search.ts
index 8ffa0318a770..7717ea263f9b 100644
--- a/packages/core/src/filesystem/search.ts
+++ b/packages/core/src/filesystem/search.ts
@@ -29,6 +29,7 @@ export interface FileInput {
   readonly limit?: number
   readonly current?: string
   readonly kind?: "file" | "directory" | "all"
+  readonly fallback?: "none" | "glob"
 }
 
 export interface FileResult {
@@ -159,6 +160,10 @@ function collectPaths<T>(
   })
 }
 
+function escapeGlob(text: string) {
+  return text.replaceAll("\\", "\\\\").replace(/[?*[\]{}()!]/g, "\\$&")
+}
+
 function searchFff(
   pick: Fff.Picker,
   kind: "file" | "directory" | "all",
@@ -326,6 +331,57 @@ export const layer: Layer.Layer<Service, never, FSUtil.Service | Ripgrep.Service
     const files: Interface["files"] = (input) => rg.files(input)
     const tree: Interface["tree"] = (input) => rg.tree(input)
 
+    const fallbackFileSearch = Effect.fn("Search.fileFallback")(function* (input: {
+      cwd: string
+      query: string
+      kind: "file" | "directory" | "all"
+      limit: number
+      error: unknown
+    }) {
+      return yield* Effect.gen(function* () {
+        const dir = FSUtil.resolve(input.cwd)
+        const pattern = `**/*${escapeGlob(input.query)}*`
+        yield* Effect.logWarning("fff file search fallback to glob", {
+          dir,
+          query: input.query,
+          kind: input.kind,
+          pattern,
+          error: input.error,
+        })
+        const scanned = yield* Effect.tryPromise({
+          try: () => Glob.scan(pattern, { cwd: dir, include: "all", dot: true }),
+          catch: (cause) => new Error("glob fallback scan failed", { cause }),
+        })
+        const typed = yield* Effect.forEach(
+          scanned,
+          Effect.fnUntraced(function* (relative) {
+            const absolute = path.join(dir, relative)
+            const stat = yield* fs.stat(absolute).pipe(Effect.catch(() => Effect.succeed(undefined)))
+            const type = stat?.type === "Directory" ? "directory" : stat?.type === "File" ? "file" : undefined
+            if (!type) return
+            if (input.kind !== "all" && input.kind !== type) return
+            return { path: normalize(relative), type } satisfies FileResult
+          }),
+          { concurrency: 32, discard: false },
+        )
+        const seen = new Set<string>()
+        const deduped = typed.flatMap((item): FileResult[] => {
+          if (!item) return []
+          if (seen.has(item.path)) return []
+          seen.add(item.path)
+          return [item]
+        })
+        deduped.sort((a, b) => a.path.length - b.path.length || a.path.localeCompare(b.path))
+        return deduped.slice(0, input.limit)
+      }).pipe(
+        Effect.catch((error) =>
+          Effect.logWarning("glob fallback file search failed", { query: input.query, error }).pipe(
+            Effect.as([] as FileResult[]),
+          ),
+        ),
+      )
+    })
+
     // in 99% of use cases user that is opened opencode at certain directory will
     // conduct a file search in this direcotry, it could be switched later but
     // mostly always we will need a file picker for cwd
@@ -360,36 +416,59 @@ export const layer: Layer.Layer<Service, never, FSUtil.Service | Ripgrep.Service
     const file: Interface["file"] = Effect.fn("Search.file")(function* (input) {
       const query = input.query.trim()
       const kind = input.kind ?? "file"
-
-      const entry = yield* acquire(input.cwd)
-      if (!entry) return yield* Effect.fail(new Error("fff is unavailable"))
-      yield* entry.ready
+      const fallback = input.fallback ?? "none"
       const dir = FSUtil.resolve(input.cwd)
       const limit = input.limit ?? 100
-      const fffResult = yield* fffSync(`${kind} search`, () =>
-        searchFff(entry.pick, kind, query, {
-          pageIndex: 0,
-          currentFile: input.current, // supports both relative and absolute (relative preferred)
-          pageSize: limit,
-        }),
-      ).pipe(
-        Effect.catch((error) =>
-          Effect.logWarning(`fff ${kind} search failed`, { dir, query, error }).pipe(
-            Effect.andThen(Effect.fail(error)),
+
+      const rows = yield* Effect.gen(function* () {
+        const entry = yield* acquire(input.cwd)
+        if (!entry) return yield* Effect.fail(new Error("fff is unavailable"))
+        yield* entry.ready
+        const fffResult = yield* fffSync(`${kind} search`, () =>
+          searchFff(entry.pick, kind, query, {
+            pageIndex: 0,
+            currentFile: input.current, // supports both relative and absolute (relative preferred)
+            pageSize: limit,
+          }),
+        ).pipe(
+          Effect.catch((error) =>
+            Effect.logWarning(`fff ${kind} search failed`, { dir, query, error }).pipe(
+              Effect.andThen(Effect.fail(error)),
+            ),
           ),
-        ),
+        )
+        if (!fffResult.ok) {
+          yield* Effect.logWarning(`fff ${kind} search failed`, { dir, query, error: fffResult.error })
+          return yield* Effect.fail(new Error(fffResult.error))
+        }
+        if (fffResult.value.length === 0 && fallback === "glob") {
+          return yield* fallbackFileSearch({
+            cwd: input.cwd,
+            query,
+            kind,
+            limit,
+            error: "fff returned no matches",
+          })
+        }
+        return fffResult.value
+      }).pipe(
+        fallback === "glob"
+          ? Effect.catch((error) =>
+              fallbackFileSearch({
+                cwd: input.cwd,
+                query,
+                kind,
+                limit,
+                error,
+              }),
+            )
+          : Effect.catch((error) => Effect.fail(error)),
       )
-      if (!fffResult.ok) {
-        yield* Effect.logWarning(`fff ${kind} search failed`, { dir, query, error: fffResult.error })
-        return yield* Effect.fail(new Error(fffResult.error))
-      }
-
-      const rows = fffResult.value
       remember(
         state,
         dir,
         query,
-        rows.map((row) => path.join(dir, row.path)),
+        rows.map((row: FileResult) => path.join(dir, row.path)),
       )
       return rows.slice(0, limit)
     })
diff --git a/packages/opencode/src/server/routes/instance/httpapi/groups/file.ts b/packages/opencode/src/server/routes/instance/httpapi/groups/file.ts
index e873c404e382..1aa724077344 100644
--- a/packages/opencode/src/server/routes/instance/httpapi/groups/file.ts
+++ b/packages/opencode/src/server/routes/instance/httpapi/groups/file.ts
@@ -28,6 +28,7 @@ export const FindFileQuery = Schema.Struct({
   query: Schema.String,
   dirs: Schema.optional(Schema.Literals(["true", "false"])),
   type: Schema.optional(Schema.Literals(["file", "directory"])),
+  fallback: Schema.optional(Schema.Literals(["none", "glob"])),
   limit: Schema.optional(
     Schema.NumberFromString.check(Schema.isInt(), Schema.isGreaterThanOrEqualTo(1), Schema.isLessThanOrEqualTo(200)),
   ),
diff --git a/packages/opencode/src/server/routes/instance/httpapi/handlers/file.ts b/packages/opencode/src/server/routes/instance/httpapi/handlers/file.ts
index 66146b1d5b91..82de456e0dce 100644
--- a/packages/opencode/src/server/routes/instance/httpapi/handlers/file.ts
+++ b/packages/opencode/src/server/routes/instance/httpapi/handlers/file.ts
@@ -31,17 +31,27 @@ export const fileHandlers = HttpApiBuilder.group(InstanceHttpApi, "file", (handl
     })
 
     const findFile = Effect.fn("FileHttpApi.findFile")(function* (ctx: {
-      query: { query: string; dirs?: "true" | "false"; type?: "file" | "directory"; limit?: number }
+      query: {
+        query: string
+        dirs?: "true" | "false"
+        type?: "file" | "directory"
+        fallback?: "none" | "glob"
+        limit?: number
+      }
     }) {
       const directory = (yield* InstanceState.context).directory
       const limit = ctx.query.limit ?? 10
       const kind = ctx.query.type ?? (ctx.query.dirs === "false" ? "file" : "all")
+      const fallback = ctx.query.fallback ?? "none"
       const started = performance.now()
-      const fff = yield* search.file({ cwd: directory, query: ctx.query.query, limit, kind }).pipe(Effect.orDie)
+      const fff = yield* search
+        .file({ cwd: directory, query: ctx.query.query, limit, kind, fallback })
+        .pipe(Effect.orDie)
       yield* Effect.logInfo("find file", {
-        engine: "fff",
+        engine: "search.file",
         query: ctx.query.query,
         kind,
+        fallback,
         directory,
         limit,
         results: fff.length,
diff --git a/packages/sdk/js/src/v2/gen/sdk.gen.ts b/packages/sdk/js/src/v2/gen/sdk.gen.ts
index c16ab6dd1a6b..e7c0f4651e2c 100644
--- a/packages/sdk/js/src/v2/gen/sdk.gen.ts
+++ b/packages/sdk/js/src/v2/gen/sdk.gen.ts
@@ -1736,6 +1736,7 @@ export class Find extends HeyApiClient {
       query: string
       dirs?: "true" | "false"
       type?: "file" | "directory"
+      fallback?: "none" | "glob"
       limit?: number
     },
     options?: Options<never, ThrowOnError>,
@@ -1750,6 +1751,7 @@ export class Find extends HeyApiClient {
             { in: "query", key: "query" },
             { in: "query", key: "dirs" },
             { in: "query", key: "type" },
+            { in: "query", key: "fallback" },
             { in: "query", key: "limit" },
           ],
         },
diff --git a/packages/sdk/js/src/v2/gen/types.gen.ts b/packages/sdk/js/src/v2/gen/types.gen.ts
index 2dce3f6f59bd..8378e8fe3fa6 100644
--- a/packages/sdk/js/src/v2/gen/types.gen.ts
+++ b/packages/sdk/js/src/v2/gen/types.gen.ts
@@ -6054,6 +6054,7 @@ export type FindFilesData = {
     query: string
     dirs?: "true" | "false"
     type?: "file" | "directory"
+    fallback?: "none" | "glob"
     limit?: number
   }
   url: "/find/file"
diff --git a/packages/ui/src/components/collapsible.css b/packages/ui/src/components/collapsible.css
index 82c133f738aa..8e0b6f1a9a7b 100644
--- a/packages/ui/src/components/collapsible.css
+++ b/packages/ui/src/components/collapsible.css
@@ -127,6 +127,12 @@
       height: 24px;
     }
   }
+
+  &[data-variant="ghost"][data-scope="file-tree-v2"] {
+    > [data-slot="collapsible-trigger"] {
+      height: 28px;
+    }
+  }
 }
 
 @keyframes slideDown {
diff --git a/packages/ui/src/components/scroll-view.tsx b/packages/ui/src/components/scroll-view.tsx
index 3ff00f117d22..a94ab1c995c1 100644
--- a/packages/ui/src/components/scroll-view.tsx
+++ b/packages/ui/src/components/scroll-view.tsx
@@ -1,11 +1,14 @@
-import { onMount, splitProps, type ComponentProps, Show, mergeProps } from "solid-js"
+import { onCleanup, onMount, splitProps, type ComponentProps, Show, mergeProps } from "solid-js"
 import { createResizeObserver } from "@solid-primitives/resize-observer"
 import { createStore } from "solid-js/store"
 import { useI18n } from "../context/i18n"
 
+export type ScrollViewThumbVisibility = "hover" | "scroll"
+
 export interface ScrollViewProps extends ComponentProps<"div"> {
   viewportRef?: (el: HTMLDivElement) => void
   orientation?: "vertical" | "horizontal" // currently only vertical is fully implemented for thumb
+  thumbVisibility?: ScrollViewThumbVisibility
 }
 
 export const scrollKey = (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey" | "metaKey" | "shiftKey">) => {
@@ -29,10 +32,10 @@ export const scrollKey = (event: Pick<KeyboardEvent, "key" | "altKey" | "ctrlKey
 
 export function ScrollView(props: ScrollViewProps) {
   const i18n = useI18n()
-  const merged = mergeProps({ orientation: "vertical" }, props)
+  const merged = mergeProps({ orientation: "vertical", thumbVisibility: "hover" }, props)
   const [local, events, rest] = splitProps(
     merged,
-    ["class", "children", "viewportRef", "orientation", "style"],
+    ["class", "children", "viewportRef", "orientation", "thumbVisibility", "style"],
     [
       "onScroll",
       "onWheel",
@@ -53,16 +56,37 @@ export function ScrollView(props: ScrollViewProps) {
   const [state, setState] = createStore({
     isHovered: false,
     isDragging: false,
+    isScrolling: false,
     thumbHeight: 0,
     thumbTop: 0,
     showThumb: false,
   })
   const isHovered = () => state.isHovered
   const isDragging = () => state.isDragging
+  const isScrolling = () => state.isScrolling
   const thumbHeight = () => state.thumbHeight
   const thumbTop = () => state.thumbTop
   const showThumb = () => state.showThumb
 
+  let scrollIdleTimer: ReturnType<typeof setTimeout> | undefined
+
+  const markScrolling = () => {
+    if (local.thumbVisibility !== "scroll") return
+    setState("isScrolling", true)
+    if (scrollIdleTimer !== undefined) clearTimeout(scrollIdleTimer)
+    scrollIdleTimer = setTimeout(() => setState("isScrolling", false), 800)
+  }
+
+  const thumbVisible = () => {
+    if (isDragging()) return true
+    if (local.thumbVisibility === "scroll") return isScrolling()
+    return isHovered()
+  }
+
+  onCleanup(() => {
+    if (scrollIdleTimer !== undefined) clearTimeout(scrollIdleTimer)
+  })
+
   const updateThumb = () => {
     if (!viewportRef) return
     const { scrollTop, scrollHeight, clientHeight } = viewportRef
@@ -197,9 +221,13 @@ export function ScrollView(props: ScrollViewProps) {
         class="scroll-view__viewport"
         onScroll={(e) => {
           updateThumb()
+          markScrolling()
           if (typeof events.onScroll === "function") events.onScroll(e as any)
         }}
-        onWheel={events.onWheel as any}
+        onWheel={(e) => {
+          markScrolling()
+          if (typeof events.onWheel === "function") events.onWheel(e as any)
+        }}
         onTouchStart={events.onTouchStart as any}
         onTouchMove={events.onTouchMove as any}
         onTouchEnd={events.onTouchEnd as any}
@@ -223,7 +251,7 @@ export function ScrollView(props: ScrollViewProps) {
           ref={thumbRef}
           onPointerDown={onThumbPointerDown}
           class="scroll-view__thumb"
-          data-visible={isHovered() || isDragging()}
+          data-visible={thumbVisible()}
           data-dragging={isDragging()}
           style={{
             height: `${thumbHeight()}px`,
diff --git a/packages/ui/src/i18n/en.ts b/packages/ui/src/i18n/en.ts
index 0f691a214cac..6da0a7f50a5e 100644
--- a/packages/ui/src/i18n/en.ts
+++ b/packages/ui/src/i18n/en.ts
@@ -15,6 +15,25 @@ export const dict: Record<string, string> = {
   "ui.sessionReview.largeDiff.title": "Diff too large to render",
   "ui.sessionReview.largeDiff.meta": "Limit: {{limit}} changed lines. Current: {{current}} changed lines.",
   "ui.sessionReview.largeDiff.renderAnyway": "Render anyway",
+  "ui.sessionReviewV2.expandMode": "Expand or collapse diff",
+  "ui.sessionReviewV2.filterFiles": "Filter files",
+  "ui.sessionReviewV2.toggleSidebar": "Toggle file tree",
+  "ui.sessionReviewV2.showAllLines": "Show all lines",
+  "ui.sessionReviewV2.hideNonDiffLines": "Hide non-diff lines",
+  "ui.sessionReviewV2.unifiedDiff": "Unified diff",
+  "ui.sessionReviewV2.splitDiff": "Split diff",
+  "ui.sessionReviewV2.previousFile": "Previous file",
+  "ui.sessionReviewV2.nextFile": "Next file",
+  "ui.sessionReviewV2.diffView": "Diff view",
+  "ui.sessionReviewV2.empty.noGit.title": "No tracked changes",
+  "ui.sessionReviewV2.empty.noGit.description": "Track, review, and undo changes in this project",
+  "ui.sessionReviewV2.empty.noGit.action": "Create Git repository",
+  "ui.sessionReviewV2.empty.noGit.actionLoading": "Creating Git repository...",
+  "ui.sessionReviewV2.empty.openFile.title": "Open file",
+  "ui.sessionReviewV2.empty.openFile.description": "Search or select a file from file tree",
+  "ui.sessionReviewV2.empty.changes.title": "No file changes yet",
+  "ui.sessionReviewV2.empty.changes.description": "Project changes will appear here",
+
   "ui.sessionReview.openFile": "Open file",
   "ui.sessionReview.selection.line": "line {{line}}",
   "ui.sessionReview.selection.lines": "lines {{start}}-{{end}}",
diff --git a/packages/ui/src/v2/components/basic-tool-v2.css b/packages/ui/src/v2/components/basic-tool-v2.css
index 256552ab1b0e..421a6ccd4b54 100644
--- a/packages/ui/src/v2/components/basic-tool-v2.css
+++ b/packages/ui/src/v2/components/basic-tool-v2.css
@@ -115,7 +115,7 @@
     flex-shrink: 0;
   }
 
-  [data-slot="basic-tool-v2-diff"] [data-component="diff-changes"] {
+  [data-slot="basic-tool-v2-diff"] [data-component="diff-changes-v2"] {
     gap: 4px;
   }
 
diff --git a/packages/ui/src/v2/components/diff-changes-v2.css b/packages/ui/src/v2/components/diff-changes-v2.css
index a4405dc0c0dd..d4511d3cc572 100644
--- a/packages/ui/src/v2/components/diff-changes-v2.css
+++ b/packages/ui/src/v2/components/diff-changes-v2.css
@@ -1,4 +1,4 @@
-[data-component="diff-changes"] {
+[data-component="diff-changes-v2"] {
   display: flex;
   gap: 8px;
   justify-content: flex-end;
@@ -15,10 +15,10 @@
   }
 
   [data-slot="diff-changes-additions"] {
-    color: var(--state-fg-success);
+    color: var(--v2-state-fg-success);
   }
 
   [data-slot="diff-changes-deletions"] {
-    color: var(--state-fg-danger);
+    color: var(--v2-state-fg-danger);
   }
 }
diff --git a/packages/ui/src/v2/components/diff-changes-v2.stories.tsx b/packages/ui/src/v2/components/diff-changes-v2.stories.tsx
index cc855412ad0a..6ab9bc54a70e 100644
--- a/packages/ui/src/v2/components/diff-changes-v2.stories.tsx
+++ b/packages/ui/src/v2/components/diff-changes-v2.stories.tsx
@@ -18,7 +18,7 @@ Pair with \`Diff\`/\`DiffSSR\` to contextualize a change set.
 - Ensure surrounding context conveys meaning of the counts/bars.
 
 ### Theming/tokens
-- Uses \`data-component="diff-changes"\` and diff color tokens.
+- Uses \`data-component="diff-changes-v2"\` and v2 diff color tokens.
 
 `
 
diff --git a/packages/ui/src/v2/components/diff-changes-v2.tsx b/packages/ui/src/v2/components/diff-changes-v2.tsx
index 9413d2e9c246..0bfdff09ae16 100644
--- a/packages/ui/src/v2/components/diff-changes-v2.tsx
+++ b/packages/ui/src/v2/components/diff-changes-v2.tsx
@@ -19,7 +19,7 @@ export function DiffChanges(props: {
 
   return (
     <Show when={total() > 0}>
-      <div data-component="diff-changes" classList={{ [props.class ?? ""]: true }}>
+      <div data-component="diff-changes-v2" classList={{ [props.class ?? ""]: true }}>
         <span data-slot="diff-changes-additions">{`+${additions()}`}</span>
         <span data-slot="diff-changes-deletions">{`-${deletions()}`}</span>
       </div>
diff --git a/packages/ui/src/v2/components/file-tree-v2.css b/packages/ui/src/v2/components/file-tree-v2.css
new file mode 100644
index 000000000000..aa0f77c17f39
--- /dev/null
+++ b/packages/ui/src/v2/components/file-tree-v2.css
@@ -0,0 +1,153 @@
+[data-component="file-tree-v2"] {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"] {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 6px;
+  padding-right: 8px;
+  border: none;
+  border-radius: 6px;
+  background-color: transparent;
+  color: var(--v2-text-text-muted);
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color 120ms ease,
+    color 120ms ease;
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-ignored] {
+  color: var(--v2-text-text-faint);
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"]:hover {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected] {
+  color: var(--v2-text-text-base);
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected]:hover {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="file-tree-v2"] .filetree-icon--mono {
+  color: var(--v2-icon-icon-muted);
+}
+
+[data-component="file-tree-v2"] .filetree-iconpair .filetree-icon--color {
+  opacity: 0;
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected] .filetree-iconpair .filetree-icon--color {
+  opacity: 1;
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected] .filetree-iconpair .filetree-icon--mono {
+  opacity: 0;
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-chevron"] {
+  color: var(--v2-text-text-muted);
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-chevron"] svg {
+  transition: transform 120ms ease;
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-chevron"]:not([data-expanded]) svg {
+  transform: rotate(-90deg);
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-row"][data-selected] [data-slot="file-tree-v2-chevron"] {
+  color: var(--v2-text-text-base);
+}
+
+[data-component="file-tree-v2"] .filetree-iconpair {
+  position: relative;
+  display: inline-flex;
+  width: 16px;
+  height: 16px;
+}
+
+[data-component="file-tree-v2"] .filetree-iconpair [data-component="file-icon"] {
+  position: absolute;
+  inset: 0;
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"] {
+  box-sizing: border-box;
+  flex: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  font-size: 11px;
+  font-weight: 530;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  text-align: center;
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums lining-nums;
+  font-feature-settings:
+    "tnum" on,
+    "lnum" on;
+}
+
+[data-component="file-tree-v2"]:not([data-show-modified-label])
+  [data-slot="file-tree-v2-change"][data-change="modified"] {
+  opacity: 0;
+}
+
+[data-component="file-tree-v2"][data-show-modified-label] [data-slot="file-tree-v2-change"][data-change="modified"] {
+  color: var(--v2-state-fg-info);
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"][data-change="added"] {
+  color: var(--v2-state-fg-success);
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"][data-change="deleted"] {
+  color: var(--v2-state-fg-danger);
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"][data-change="renamed"] {
+  color: var(--v2-state-fg-warning);
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-change"][data-change="untracked"] {
+  color: var(--v2-text-text-muted);
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-descendant-change"] {
+  box-sizing: border-box;
+  flex: none;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  opacity: 0.5;
+}
+
+[data-component="file-tree-v2"] [data-slot="file-tree-v2-descendant-change"]::before {
+  content: "";
+  width: 37.5%;
+  height: 37.5%;
+  border-radius: 50%;
+  background-color: var(--v2-icon-icon-accent);
+}
diff --git a/packages/ui/src/v2/components/icon.tsx b/packages/ui/src/v2/components/icon.tsx
index 60202a85c8a7..e7a1937a1139 100644
--- a/packages/ui/src/v2/components/icon.tsx
+++ b/packages/ui/src/v2/components/icon.tsx
@@ -49,6 +49,10 @@ const icons = {
     viewBox: "0 0 16 16",
     body: `<path d="M5 6.5L8 9.5L11 6.5" stroke="currentColor"/>`,
   },
+  collapse: {
+    viewBox: "0 0 16 16",
+    body: `<path d="M8 1V6M11 3L8 6L5 3" stroke="currentColor"/><path d="M8 15V10M11 13L8 10L5 13" stroke="currentColor"/><path d="M4 8H6" stroke="currentColor"/><path d="M7 8H9" stroke="currentColor"/><path d="M10 8H12" stroke="currentColor"/>`,
+  },
   close: {
     viewBox: "0 0 20 20",
     body: `<path d="M14.4446 5.55566L5.55566 14.4446M5.55566 5.55566L14.4446 14.4446" stroke="currentColor" stroke-linejoin="round"/>`,
@@ -65,6 +69,30 @@ const icons = {
     viewBox: "0 0 16 16",
     body: `<path d="M2.5 7.5H3.5V8.5H2.5V7.5Z" stroke="currentColor"/><path d="M7.5 7.5H8.5V8.5H7.5V7.5Z" stroke="currentColor"/><path d="M12.5 7.5H13.5V8.5H12.5V7.5Z" stroke="currentColor"/>`,
   },
+  expand: {
+    viewBox: "0 0 16 16",
+    body: `<path d="M8.25 6.17773V1.17773M11.25 4.17773L8.25 1.17773L5.25 4.17773" stroke="currentColor"/><path d="M8.25 9.17773V14.1777M11.25 11.1777L8.25 14.1777L5.25 11.1777" stroke="currentColor"/><path d="M4.25 7.67773H12.25" stroke="currentColor"/>`,
+  },
+  filetree: {
+    viewBox: "0 0 16 16",
+    body: `<path d="M2.5 1.5V12.2484H6.75M2.5 4.74838H6.75" stroke="currentColor"/><rect x="8.5" y="3.2168" width="6" height="3" fill="none" stroke="currentColor"/><rect x="8.5" y="10.75" width="6" height="3" fill="none" stroke="currentColor"/>`,
+  },
+  "open-file": {
+    viewBox: "0 0 16 16",
+    body: `<path d="M5.33366 10.6663H10.667V11.9997H5.33366V10.6663ZM5.33366 7.99967H10.667V9.33301H5.33366V7.99967ZM9.33366 1.33301H4.00033C3.26699 1.33301 2.66699 1.93301 2.66699 2.66634V13.333C2.66699 14.0663 3.26033 14.6663 3.99366 14.6663H12.0003C12.7337 14.6663 13.3337 14.0663 13.3337 13.333V5.33301L9.33366 1.33301ZM12.0003 13.333H4.00033V2.66634H8.66699V5.99967H12.0003V13.333Z" fill="currentColor"/>`,
+  },
+  split: {
+    viewBox: "0 0 16 16",
+    body: `<path d="M3.00001 4.00045L12.9998 4L13 6.99955L3 7L3.00001 4.00045Z" fill="currentColor" fill-opacity="0.5"/><path d="M3.0001 9H13L12.9999 12H3L3.0001 9Z" fill="currentColor" fill-opacity="0.5"/><path d="M1 14H15L15 2H1V14Z" stroke="currentColor"/>`,
+  },
+  unified: {
+    viewBox: "0 0 16 16",
+    body: `<path d="M1 14H15L15 2H1V14Z" stroke="currentColor"/><rect x="3" y="4" width="4" height="8" fill="currentColor" fill-opacity="0.5"/><rect x="9" y="4" width="4" height="8" fill="currentColor" fill-opacity="0.5"/>`,
+  },
+  review: {
+    viewBox: "0 0 20 20",
+    body: `<path d="M7 14.5H13M7 7.99512H10.0049M10.0049 7.99512H13M10.0049 7.99512V5M10.0049 7.99512V11M18 18V2L2 2L2 18H18Z" stroke="currentColor"/>`,
+  },
 }
 
 const spriteID = "opencode-v2-icon-sprite"
diff --git a/packages/ui/src/v2/components/line-comment-annotations-v2.tsx b/packages/ui/src/v2/components/line-comment-annotations-v2.tsx
new file mode 100644
index 000000000000..e3f8cfe526c0
--- /dev/null
+++ b/packages/ui/src/v2/components/line-comment-annotations-v2.tsx
@@ -0,0 +1,350 @@
+import { type SelectedLineRange } from "@pierre/diffs"
+import { createEffect, createMemo, createSignal, onCleanup, Show, type Accessor, type JSX } from "solid-js"
+import { render as renderSolid } from "solid-js/web"
+import {
+  createLineCommentAnnotations,
+  createLineCommentHoverRenderer,
+  createLineCommentState,
+  type LineCommentAnnotation,
+  type LineCommentAnnotationMeta,
+} from "../../components/line-comment-annotations"
+import { useI18n } from "../../context/i18n"
+import { cloneSelectedLineRange, formatSelectedLineLabel } from "../../pierre/selection-bridge"
+import { LineCommentEditorV2, LineCommentV2 } from "./line-comment-v2"
+
+type LineCommentShape = {
+  id: string
+  selection: SelectedLineRange
+  comment: string
+}
+
+type LineCommentStateProps<T> = {
+  opened: Accessor<T | null>
+  setOpened: (id: T | null) => void
+  selected: Accessor<SelectedLineRange | null>
+  setSelected: (range: SelectedLineRange | null) => void
+  commenting: Accessor<SelectedLineRange | null>
+  setCommenting: (range: SelectedLineRange | null) => void
+  syncSelected?: (range: SelectedLineRange | null) => void
+  hoverSelected?: (range: SelectedLineRange) => void
+}
+
+type LineCommentControllerProps<T extends LineCommentShape> = {
+  comments: Accessor<T[]>
+  draftKey: Accessor<string>
+  label: string
+  state: LineCommentStateProps<string>
+  onSubmit: (input: { comment: string; selection: SelectedLineRange }) => void
+  onUpdate?: (input: { id: string; comment: string; selection: SelectedLineRange }) => void
+  onDelete?: (comment: T) => void
+  renderCommentActions?: (comment: T, controls: { edit: VoidFunction; remove: VoidFunction }) => JSX.Element
+  editSubmitLabel?: string
+  onDraftPopoverFocusOut?: JSX.EventHandlerUnion<HTMLDivElement, FocusEvent>
+  getHoverSelectedRange?: Accessor<SelectedLineRange | null>
+  cancelDraftOnCommentToggle?: boolean
+  clearSelectionOnSelectionEndNull?: boolean
+}
+
+type LineCommentControllerWithSideProps<T extends LineCommentShape> = LineCommentControllerProps<T> & {
+  getSide: (range: SelectedLineRange) => "additions" | "deletions"
+}
+
+type CommentProps = {
+  id?: string
+  comment: JSX.Element
+  selection: JSX.Element
+  actions?: JSX.Element
+  editor?: DraftProps
+  onClick?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>
+  onMouseEnter?: JSX.EventHandlerUnion<HTMLDivElement, MouseEvent>
+}
+
+type DraftProps = {
+  value: string
+  selection: JSX.Element
+  onInput: (value: string) => void
+  onCancel: VoidFunction
+  onSubmit: (value: string) => void
+  onPopoverFocusOut?: JSX.EventHandlerUnion<HTMLDivElement, FocusEvent>
+  cancelLabel?: string
+  submitLabel?: string
+}
+
+function createLineCommentAnnotationRendererV2<T>(props: {
+  renderComment: (comment: T) => CommentProps
+  renderDraft: (range: SelectedLineRange) => DraftProps
+}) {
+  const nodes = new Map<
+    string,
+    {
+      host: HTMLDivElement
+      dispose: VoidFunction
+      setMeta: (meta: LineCommentAnnotationMeta<T>) => void
+    }
+  >()
+
+  const mount = (meta: LineCommentAnnotationMeta<T>) => {
+    if (typeof document === "undefined") return
+
+    const host = document.createElement("div")
+    host.setAttribute("data-prevent-autofocus", "")
+    const [current, setCurrent] = createSignal(meta)
+
+    const dispose = renderSolid(() => {
+      const active = current()
+      if (active.kind === "comment") {
+        const view = createMemo(() => {
+          const next = current()
+          if (next.kind !== "comment") return props.renderComment(active.comment)
+          return props.renderComment(next.comment)
+        })
+        return (
+          <Show
+            when={view().editor}
+            fallback={
+              <div
+                data-prevent-autofocus=""
+                onMouseDown={(event) => event.stopPropagation()}
+                onClick={view().onClick as any}
+                onMouseEnter={view().onMouseEnter as any}
+              >
+                <LineCommentV2
+                  comment={view().comment}
+                  selection={view().selection}
+                  actions={view().actions}
+                />
+              </div>
+            }
+          >
+            <div data-prevent-autofocus="" onMouseDown={(event) => event.stopPropagation()}>
+              <LineCommentEditorV2
+                value={view().editor!.value}
+                selection={view().editor!.selection}
+                onInput={view().editor!.onInput}
+                onCancel={view().editor!.onCancel}
+                onSubmit={view().editor!.onSubmit}
+                cancelLabel={view().editor!.cancelLabel}
+                submitLabel={view().editor!.submitLabel}
+              />
+            </div>
+          </Show>
+        )
+      }
+
+      const view = createMemo(() => {
+        const next = current()
+        if (next.kind !== "draft") return props.renderDraft(active.range)
+        return props.renderDraft(next.range)
+      })
+      return (
+        <div data-prevent-autofocus="" onMouseDown={(event) => event.stopPropagation()}>
+          <LineCommentEditorV2
+            value={view().value}
+            selection={view().selection}
+            onInput={view().onInput}
+            onCancel={view().onCancel}
+            onSubmit={view().onSubmit}
+          />
+        </div>
+      )
+    }, host)
+
+    const node = { host, dispose, setMeta: setCurrent }
+    nodes.set(meta.key, node)
+    return node
+  }
+
+  const render = <A extends { metadata: LineCommentAnnotationMeta<T> }>(annotation: A) => {
+    const meta = annotation.metadata
+    const node = nodes.get(meta.key) ?? mount(meta)
+    if (!node) return
+    node.setMeta(meta)
+    return node.host
+  }
+
+  const reconcile = <A extends { metadata: LineCommentAnnotationMeta<T> }>(annotations: A[]) => {
+    const keys = new Set(annotations.map((annotation) => annotation.metadata.key))
+    for (const key of nodes.keys()) {
+      if (keys.has(key)) continue
+      nodes.get(key)?.dispose()
+      nodes.delete(key)
+    }
+  }
+
+  const cleanup = () => {
+    for (const node of nodes.values()) node.dispose()
+    nodes.clear()
+  }
+
+  return { render, reconcile, cleanup }
+}
+
+function createManagedLineCommentAnnotationRendererV2<T>(props: {
+  annotations: Accessor<LineCommentAnnotation<T>[]>
+  renderComment: (comment: T) => CommentProps
+  renderDraft: (range: SelectedLineRange) => DraftProps
+}) {
+  const renderer = createLineCommentAnnotationRendererV2<T>({
+    renderComment: props.renderComment,
+    renderDraft: props.renderDraft,
+  })
+
+  createEffect(() => {
+    renderer.reconcile(props.annotations())
+  })
+
+  onCleanup(() => {
+    renderer.cleanup()
+  })
+
+  return {
+    renderAnnotation: renderer.render,
+  }
+}
+
+export function createLineCommentControllerV2<T extends LineCommentShape>(
+  props: LineCommentControllerWithSideProps<T>,
+): {
+  annotations: ReturnType<typeof createLineCommentAnnotations<T>>
+  renderAnnotation: ReturnType<typeof createManagedLineCommentAnnotationRendererV2<T>>["renderAnnotation"]
+  renderHoverUtility: ReturnType<typeof createLineCommentHoverRenderer>
+  onLineSelected: (range: SelectedLineRange | null) => void
+  onLineSelectionEnd: (range: SelectedLineRange | null) => void
+  onLineNumberSelectionEnd: (range: SelectedLineRange | null) => void
+}
+export function createLineCommentControllerV2<T extends LineCommentShape>(
+  props: LineCommentControllerProps<T>,
+): {
+  annotations: ReturnType<typeof createLineCommentAnnotations<T>>
+  renderAnnotation: ReturnType<typeof createManagedLineCommentAnnotationRendererV2<T>>["renderAnnotation"]
+  renderHoverUtility: ReturnType<typeof createLineCommentHoverRenderer>
+  onLineSelected: (range: SelectedLineRange | null) => void
+  onLineSelectionEnd: (range: SelectedLineRange | null) => void
+  onLineNumberSelectionEnd: (range: SelectedLineRange | null) => void
+}
+export function createLineCommentControllerV2<T extends LineCommentShape>(
+  props: LineCommentControllerProps<T> | LineCommentControllerWithSideProps<T>,
+) {
+  const i18n = useI18n()
+  const note = createLineCommentState<string>(props.state)
+
+  const annotations =
+    "getSide" in props
+      ? createLineCommentAnnotations({
+          comments: props.comments,
+          getCommentId: (comment) => comment.id,
+          getCommentSelection: (comment) => comment.selection,
+          draftRange: note.commenting,
+          draftKey: props.draftKey,
+          getSide: props.getSide,
+        })
+      : createLineCommentAnnotations({
+          comments: props.comments,
+          getCommentId: (comment) => comment.id,
+          getCommentSelection: (comment) => comment.selection,
+          draftRange: note.commenting,
+          draftKey: props.draftKey,
+        })
+
+  const { renderAnnotation } = createManagedLineCommentAnnotationRendererV2<T>({
+    annotations,
+    renderComment: (comment) => {
+      const edit = () => note.openEditor(comment.id, comment.selection, comment.comment)
+      const remove = () => {
+        note.reset()
+        props.onDelete?.(comment)
+      }
+
+      return {
+        id: comment.id,
+        comment: comment.comment,
+        selection: formatSelectedLineLabel(comment.selection, i18n.t),
+        get actions() {
+          return props.renderCommentActions?.(comment, { edit, remove })
+        },
+        get editor() {
+          return note.isEditing(comment.id)
+            ? {
+                get value() {
+                  return note.draft()
+                },
+                selection: formatSelectedLineLabel(comment.selection, i18n.t),
+                onInput: note.setDraft,
+                onCancel: note.cancelDraft,
+                onSubmit: (value: string) => {
+                  props.onUpdate?.({
+                    id: comment.id,
+                    comment: value,
+                    selection: cloneSelectedLineRange(comment.selection),
+                  })
+                  note.cancelDraft()
+                },
+                submitLabel: props.editSubmitLabel,
+              }
+            : undefined
+        },
+        onMouseEnter: () => note.hoverComment(comment.selection),
+        onClick: () => {
+          if (note.isEditing(comment.id)) return
+          note.toggleComment(comment.id, comment.selection, { cancelDraft: props.cancelDraftOnCommentToggle })
+        },
+      }
+    },
+    renderDraft: (range) => ({
+      get value() {
+        return note.draft()
+      },
+      selection: formatSelectedLineLabel(range, i18n.t),
+      onInput: note.setDraft,
+      onCancel: note.cancelDraft,
+      onSubmit: (comment) => {
+        props.onSubmit({ comment, selection: cloneSelectedLineRange(range) })
+        note.cancelDraft()
+      },
+      onPopoverFocusOut: props.onDraftPopoverFocusOut,
+    }),
+  })
+
+  const renderHoverUtility = createLineCommentHoverRenderer({
+    label: props.label,
+    getSelectedRange: () => {
+      if (note.opened()) return null
+      return props.getHoverSelectedRange?.() ?? note.selected()
+    },
+    onOpenDraft: note.openDraft,
+  })
+
+  const onLineSelected = (range: SelectedLineRange | null) => {
+    if (!range) {
+      note.select(null)
+      note.cancelDraft()
+      return
+    }
+
+    note.select(range)
+  }
+
+  const onLineSelectionEnd = (range: SelectedLineRange | null) => {
+    if (!range) {
+      if (props.clearSelectionOnSelectionEndNull) note.select(null)
+      note.cancelDraft()
+      return
+    }
+
+    note.finishSelection(range)
+  }
+
+  const onLineNumberSelectionEnd = (range: SelectedLineRange | null) => {
+    if (!range) return
+    note.openDraft(range)
+  }
+
+  return {
+    annotations,
+    renderAnnotation,
+    renderHoverUtility,
+    onLineSelected,
+    onLineSelectionEnd,
+    onLineNumberSelectionEnd,
+  }
+}
diff --git a/packages/ui/src/v2/components/line-comment-v2.css b/packages/ui/src/v2/components/line-comment-v2.css
index e0843d836789..55a3120813a6 100644
--- a/packages/ui/src/v2/components/line-comment-v2.css
+++ b/packages/ui/src/v2/components/line-comment-v2.css
@@ -19,9 +19,9 @@
 }
 
 [data-component="line-comment-v2"] [data-slot="line-comment-v2-shell"] {
-  background: var(--background-bg-layer-01);
+  background: var(--v2-background-bg-layer-01);
   border-radius: 6px;
-  box-shadow: var(--elevation-raised);
+  box-shadow: var(--v2-elevation-raised);
 }
 
 /* --- Display (read) --- */
@@ -50,7 +50,7 @@
   font-weight: 440;
   line-height: 1;
   letter-spacing: -0.04px;
-  color: var(--text-text-base);
+  color: var(--v2-text-text-base);
   font-variation-settings: "slnt" 0;
 }
 
@@ -60,7 +60,7 @@
   font-weight: 530;
   line-height: 1;
   letter-spacing: 0.05px;
-  color: var(--text-text-faint);
+  color: var(--v2-text-text-faint);
   font-variation-settings: "slnt" 0;
 }
 
@@ -84,7 +84,7 @@
   border: none;
   border-radius: 4px;
   background: transparent;
-  color: var(--icon-icon-muted);
+  color: var(--v2-icon-icon-muted);
   cursor: pointer;
   outline: none;
 }
@@ -94,16 +94,16 @@
 }
 
 [data-slot="line-comment-v2-overflow"]:focus-visible {
-  outline: 2px solid var(--border-border-focus);
+  outline: 2px solid var(--v2-border-border-focus);
   outline-offset: 2px;
 }
 
 [data-slot="line-comment-v2-overflow"]:is(:hover, [data-state="hover"]) {
-  background-color: var(--overlay-simple-overlay-hover);
+  background-color: var(--v2-overlay-simple-overlay-hover);
 }
 
 [data-slot="line-comment-v2-overflow"]:is(:active, [data-state="pressed"]) {
-  background-color: var(--overlay-simple-overlay-pressed);
+  background-color: var(--v2-overlay-simple-overlay-pressed);
 }
 
 [data-slot="line-comment-v2-overflow"] svg {
@@ -139,7 +139,7 @@
   font-weight: 530;
   line-height: 1;
   letter-spacing: -0.04px;
-  color: var(--text-text-base);
+  color: var(--v2-text-text-base);
   user-select: none;
 }
 
@@ -151,26 +151,26 @@
   padding: 8px;
   margin: 0;
   resize: vertical;
-  border: 1px solid var(--border-border-base);
+  border: 1px solid var(--v2-border-border-base);
   border-radius: 6px;
-  background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
+  background: linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
   font-size: 13px;
   font-style: normal;
   font-weight: 440;
   line-height: 1.35;
   letter-spacing: -0.04px;
-  color: var(--text-text-base);
+  color: var(--v2-text-text-base);
   font-variation-settings: "slnt" 0;
   outline: none;
 }
 
 [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-textarea"]::placeholder {
-  color: var(--text-text-faint);
+  color: var(--v2-text-text-faint);
   user-select: none;
 }
 
 [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-textarea"]:focus {
-  border-color: var(--border-border-focus);
+  border-color: var(--v2-border-border-focus);
 }
 
 [data-component="line-comment-v2"][data-variant="editor"] [data-slot="line-comment-v2-footer"] {
@@ -190,7 +190,7 @@
   font-weight: 530;
   line-height: 1;
   letter-spacing: 0.05px;
-  color: var(--text-text-faint);
+  color: var(--v2-text-text-faint);
   font-variation-settings: "slnt" 0;
 }
 
diff --git a/packages/ui/src/v2/components/segmented-control-v2.css b/packages/ui/src/v2/components/segmented-control-v2.css
index 6303a357ff04..aa58aee88df3 100644
--- a/packages/ui/src/v2/components/segmented-control-v2.css
+++ b/packages/ui/src/v2/components/segmented-control-v2.css
@@ -11,10 +11,10 @@
   width: 232px;
   max-width: 100%;
   height: 28px;
-  background: var(--background-bg-layer-01);
+  background: var(--v2-background-bg-layer-02);
   border: none;
   border-radius: 6px;
-  box-shadow: 0 0 0 0.5px var(--border-border-base);
+  box-shadow: inset 0 0 0 0.5px var(--v2-border-border-base);
   flex: none;
 }
 
@@ -33,7 +33,6 @@
   border-radius: 6px;
   background: transparent;
   box-shadow: none;
-  cursor: pointer;
   font-style: normal;
   font-weight: 440;
   font-size: 13px;
@@ -41,7 +40,7 @@
   letter-spacing: -0.04px;
   font-variant-numeric: tabular-nums;
   font-variation-settings: "slnt" 0;
-  color: var(--text-text-muted);
+  color: var(--v2-text-text-muted);
   transition:
     background-color 0.12s ease,
     color 0.12s ease,
@@ -54,15 +53,15 @@
 }
 
 [data-slot="segmented-control-v2-item"]:where(:focus-visible) {
-  outline: 2px solid var(--border-border-focus);
+  outline: 2px solid var(--v2-border-border-focus);
   outline-offset: 1px;
   z-index: 2;
 }
 
 [data-slot="segmented-control-v2-item"]:where([data-pressed]) {
-  background: var(--background-bg-base);
-  color: var(--text-text-base);
-  box-shadow: 0 0 0 0.5px var(--border-border-strong);
+  background: var(--v2-background-bg-base);
+  color: var(--v2-text-text-base);
+  box-shadow: inset 0 0 0 0.5px var(--v2-border-border-strong);
   z-index: 1;
 }
 
diff --git a/packages/ui/src/v2/components/session-review-empty-changes-v2.tsx b/packages/ui/src/v2/components/session-review-empty-changes-v2.tsx
new file mode 100644
index 000000000000..ae3344f54590
--- /dev/null
+++ b/packages/ui/src/v2/components/session-review-empty-changes-v2.tsx
@@ -0,0 +1,19 @@
+import { useI18n } from "../../context/i18n"
+import { Icon } from "./icon"
+import "./session-review-v2.css"
+
+export function SessionReviewEmptyChangesV2() {
+  const i18n = useI18n()
+
+  return (
+    <div data-slot="session-review-v2-empty-changes">
+      <Icon name="review" size="large" />
+      <div data-slot="session-review-v2-empty-changes-title">
+        {i18n.t("ui.sessionReviewV2.empty.changes.title")}
+      </div>
+      <div data-slot="session-review-v2-empty-changes-description">
+        {i18n.t("ui.sessionReviewV2.empty.changes.description")}
+      </div>
+    </div>
+  )
+}
diff --git a/packages/ui/src/v2/components/session-review-empty-no-git-v2.tsx b/packages/ui/src/v2/components/session-review-empty-no-git-v2.tsx
new file mode 100644
index 000000000000..cdca80444a42
--- /dev/null
+++ b/packages/ui/src/v2/components/session-review-empty-no-git-v2.tsx
@@ -0,0 +1,28 @@
+import { FileIcon } from "../../components/file-icon"
+import { useI18n } from "../../context/i18n"
+import { ButtonV2 } from "./button-v2"
+import "./session-review-v2.css"
+
+export type SessionReviewEmptyNoGitV2Props = {
+  pending: boolean
+  onInitGit: () => void
+}
+
+export function SessionReviewEmptyNoGitV2(props: SessionReviewEmptyNoGitV2Props) {
+  const i18n = useI18n()
+
+  return (
+    <div data-slot="session-review-v2-empty-no-git">
+      <FileIcon node={{ path: ".gitignore", type: "file" }} mono />
+      <div data-slot="session-review-v2-empty-no-git-title">{i18n.t("ui.sessionReviewV2.empty.noGit.title")}</div>
+      <div data-slot="session-review-v2-empty-no-git-description">
+        {i18n.t("ui.sessionReviewV2.empty.noGit.description")}
+      </div>
+      <ButtonV2 variant="neutral" size="normal" disabled={props.pending} onClick={props.onInitGit}>
+        {props.pending
+          ? i18n.t("ui.sessionReviewV2.empty.noGit.actionLoading")
+          : i18n.t("ui.sessionReviewV2.empty.noGit.action")}
+      </ButtonV2>
+    </div>
+  )
+}
diff --git a/packages/ui/src/v2/components/session-review-empty-open-file-v2.tsx b/packages/ui/src/v2/components/session-review-empty-open-file-v2.tsx
new file mode 100644
index 000000000000..27a8cffa23fe
--- /dev/null
+++ b/packages/ui/src/v2/components/session-review-empty-open-file-v2.tsx
@@ -0,0 +1,54 @@
+import { useI18n } from "../../context/i18n"
+import "./session-review-v2.css"
+
+function OpenFilePlaceholderIcon() {
+  return (
+    <svg
+      data-slot="session-review-v2-empty-open-file-icon"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        d="M3.125 1.875V15.3105H8.4375M3.125 5.93548H8.4375"
+        stroke="var(--v2-icon-icon-muted)"
+        stroke-width="1.25"
+      />
+      <rect
+        x="10.625"
+        y="4.02148"
+        width="7.5"
+        height="3.75"
+        stroke="var(--v2-icon-icon-base)"
+        stroke-width="1.25"
+      />
+      <rect
+        x="10.625"
+        y="13.4375"
+        width="7.5"
+        height="3.75"
+        stroke="var(--v2-icon-icon-base)"
+        stroke-width="1.25"
+      />
+    </svg>
+  )
+}
+
+export function SessionReviewEmptyOpenFileV2() {
+  const i18n = useI18n()
+
+  return (
+    <div data-slot="session-review-v2-empty-open-file">
+      <OpenFilePlaceholderIcon />
+      <div data-slot="session-review-v2-empty-open-file-title">
+        {i18n.t("ui.sessionReviewV2.empty.openFile.title")}
+      </div>
+      <div data-slot="session-review-v2-empty-open-file-description">
+        {i18n.t("ui.sessionReviewV2.empty.openFile.description")}
+      </div>
+    </div>
+  )
+}
diff --git a/packages/ui/src/v2/components/session-review-file-preview-v2.tsx b/packages/ui/src/v2/components/session-review-file-preview-v2.tsx
new file mode 100644
index 000000000000..b58e36fe4de6
--- /dev/null
+++ b/packages/ui/src/v2/components/session-review-file-preview-v2.tsx
@@ -0,0 +1,245 @@
+import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
+import type { SelectedLineRange } from "@pierre/diffs"
+import { DiffChanges } from "./diff-changes-v2"
+import { FileIcon } from "../../components/file-icon"
+import { useFileComponent } from "../../context/file"
+import { useI18n } from "../../context/i18n"
+import { mediaKindFromPath } from "../../pierre/media"
+import { cloneSelectedLineRange, previewSelectedLines } from "../../pierre/selection-bridge"
+import type { FileContent, SnapshotFileDiff, VcsFileDiff } from "@opencode-ai/sdk/v2"
+import { createEffect, createMemo, Show, untrack } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Dynamic } from "solid-js/web"
+import { normalize, text, type ViewDiff } from "../../components/session-diff"
+import type {
+  SessionReviewComment,
+  SessionReviewCommentActions,
+  SessionReviewCommentDelete,
+  SessionReviewCommentUpdate,
+  SessionReviewDiffStyle,
+  SessionReviewFocus,
+  SessionReviewLineComment,
+} from "../../components/session-review"
+import type { SessionReviewExpandMode } from "./session-review-v2"
+import { createLineCommentControllerV2 } from "./line-comment-annotations-v2"
+import { LineCommentV2OverflowIcon } from "./line-comment-v2"
+import { MenuV2 } from "./menu-v2"
+import "./session-review-v2.css"
+
+type ReviewDiff = (SnapshotFileDiff & { file: string }) | VcsFileDiff
+
+export type SessionReviewFilePreviewV2Props = {
+  file: string
+  diff: ReviewDiff
+  diffStyle: SessionReviewDiffStyle
+  expandMode?: SessionReviewExpandMode
+  readFile?: (path: string) => Promise<FileContent | undefined>
+  onRendered?: VoidFunction
+  onLineComment?: (comment: SessionReviewLineComment) => void
+  onLineCommentUpdate?: (comment: SessionReviewCommentUpdate) => void
+  onLineCommentDelete?: (comment: SessionReviewCommentDelete) => void
+  lineCommentActions?: SessionReviewCommentActions
+  comments?: SessionReviewComment[]
+  focusedComment?: SessionReviewFocus | null
+  onFocusedCommentChange?: (focus: SessionReviewFocus | null) => void
+}
+
+function statusLabel(status: ViewDiff["status"]) {
+  if (status === "added") return "A"
+  if (status === "deleted") return "D"
+  return "M"
+}
+
+function statusType(status: ViewDiff["status"]) {
+  if (status === "added") return "added"
+  if (status === "deleted") return "deleted"
+  return "modified"
+}
+
+function selectionSide(range: SelectedLineRange) {
+  return range.endSide ?? range.side ?? "additions"
+}
+
+function selectionPreview(diff: ViewDiff, range: SelectedLineRange) {
+  const side = selectionSide(range)
+  const contents = text(diff, side)
+  if (contents.length === 0) return undefined
+  return previewSelectedLines(contents, range)
+}
+
+function ReviewCommentMenuV2(props: {
+  labels: SessionReviewCommentActions
+  onEdit: VoidFunction
+  onDelete: VoidFunction
+}) {
+  return (
+    <div onMouseDown={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}>
+      <MenuV2 gutter={4}>
+        <MenuV2.Trigger
+          as="button"
+          type="button"
+          data-slot="line-comment-v2-overflow"
+          aria-label={props.labels.moreLabel}
+        >
+          <LineCommentV2OverflowIcon />
+        </MenuV2.Trigger>
+        <MenuV2.Portal>
+          <MenuV2.Content>
+            <MenuV2.Item onSelect={props.onEdit}>{props.labels.editLabel}</MenuV2.Item>
+            <MenuV2.Item onSelect={props.onDelete}>{props.labels.deleteLabel}</MenuV2.Item>
+          </MenuV2.Content>
+        </MenuV2.Portal>
+      </MenuV2>
+    </div>
+  )
+}
+
+export function SessionReviewFilePreviewV2(props: SessionReviewFilePreviewV2Props) {
+  const i18n = useI18n()
+  const fileComponent = useFileComponent()
+
+  const [store, setStore] = createStore({
+    selection: null as SelectedLineRange | null,
+    commenting: null as SelectedLineRange | null,
+    opened: null as string | null,
+  })
+
+  const view = createMemo(() => ({
+    ...normalize(props.diff),
+    preloaded: "preloaded" in props.diff ? props.diff.preloaded : undefined,
+  }))
+  const diffCanRender = createMemo(() => view().additions !== 0 || view().deletions !== 0)
+  const mediaKind = createMemo(() => mediaKindFromPath(props.file))
+  const comments = createMemo(() => (props.comments ?? []).filter((comment) => comment.file === props.file))
+  const commentedLines = createMemo(() => comments().map((comment) => comment.selection))
+  const lineCommentsEnabled = () => props.onLineComment != null
+
+  const commentsUi = createLineCommentControllerV2<SessionReviewComment>({
+    comments,
+    label: i18n.t("ui.lineComment.submit"),
+    draftKey: () => props.file,
+    state: {
+      opened: () => store.opened,
+      setOpened: (id) => setStore("opened", id),
+      selected: () => store.selection,
+      setSelected: (range) => setStore("selection", range),
+      commenting: () => store.commenting,
+      setCommenting: (range) => setStore("commenting", range),
+    },
+    getSide: selectionSide,
+    clearSelectionOnSelectionEndNull: false,
+    onSubmit: ({ comment, selection }) => {
+      props.onLineComment?.({
+        file: props.file,
+        selection,
+        comment,
+        preview: selectionPreview(view(), selection),
+      })
+    },
+    onUpdate: ({ id, comment, selection }) => {
+      props.onLineCommentUpdate?.({
+        id,
+        file: props.file,
+        selection,
+        comment,
+        preview: selectionPreview(view(), selection),
+      })
+    },
+    onDelete: (comment) => {
+      props.onLineCommentDelete?.({
+        id: comment.id,
+        file: props.file,
+      })
+    },
+    editSubmitLabel: props.lineCommentActions?.saveLabel,
+    renderCommentActions: props.lineCommentActions
+      ? (comment, controls) => (
+          <ReviewCommentMenuV2
+            labels={props.lineCommentActions!}
+            onEdit={controls.edit}
+            onDelete={controls.remove}
+          />
+        )
+      : undefined,
+  })
+
+  createEffect(() => {
+    const focus = props.focusedComment
+    if (!focus || focus.file !== props.file) return
+
+    untrack(() => {
+      setStore("opened", focus.id)
+
+      const comment = (props.comments ?? []).find((item) => item.file === focus.file && item.id === focus.id)
+      if (comment) setStore("selection", cloneSelectedLineRange(comment.selection))
+    })
+  })
+
+  const expandUnchanged = () => props.expandMode === "expand"
+
+  const diffViewer = () => (
+    <Dynamic
+      component={fileComponent}
+      mode="diff"
+      fileDiff={view().fileDiff}
+      preloadedDiff={view().preloaded}
+      diffStyle={props.diffStyle}
+      expandUnchanged={expandUnchanged()}
+      hunkSeparators={view().fileDiff.isPartial ? "simple" : "line-info-basic"}
+      onRendered={props.onRendered}
+      enableLineSelection={lineCommentsEnabled()}
+      enableHoverUtility={lineCommentsEnabled()}
+      onLineSelected={(range: SelectedLineRange | null) => {
+        if (!lineCommentsEnabled()) return
+        commentsUi.onLineSelected(range)
+      }}
+      onLineSelectionEnd={(range: SelectedLineRange | null) => {
+        if (!lineCommentsEnabled()) return
+        commentsUi.onLineSelectionEnd(range)
+      }}
+      onLineNumberSelectionEnd={commentsUi.onLineNumberSelectionEnd}
+      annotations={commentsUi.annotations()}
+      renderAnnotation={commentsUi.renderAnnotation}
+      renderHoverUtility={lineCommentsEnabled() ? commentsUi.renderHoverUtility : undefined}
+      selectedLines={store.selection}
+      commentedLines={commentedLines()}
+      media={{
+        mode: "auto",
+        path: props.file,
+        deleted: view().status === "deleted",
+        readFile: view().status === "deleted" ? undefined : props.readFile,
+      }}
+    />
+  )
+
+  return (
+    <>
+      <div data-slot="session-review-v2-file-header">
+        <div data-slot="session-review-v2-file-title">
+          <div data-slot="session-review-v2-file-status" data-type={statusType(view().status)}>
+            {statusLabel(view().status)}
+          </div>
+          <FileIcon node={{ path: props.file, type: "file" }} />
+          <span data-slot="session-review-v2-file-name">{getFilename(props.file)}</span>
+          <Show when={props.file.includes("/")}>
+            <span data-slot="session-review-v2-file-path">{getDirectory(props.file)}</span>
+          </Show>
+        </div>
+        <DiffChanges changes={view()} />
+      </div>
+      <div data-slot="session-review-v2-diff-scroll">
+        <Show
+          when={diffCanRender()}
+          fallback={
+            <div data-slot="session-review-v2-empty">
+              <span class="text-12-regular text-text-weak">{i18n.t("ui.fileMedia.binary.title")}</span>
+            </div>
+          }
+        >
+          {diffViewer()}
+        </Show>
+        <Show when={mediaKind() && !diffCanRender()}>{diffViewer()}</Show>
+      </div>
+    </>
+  )
+}
diff --git a/packages/ui/src/v2/components/session-review-v2.css b/packages/ui/src/v2/components/session-review-v2.css
new file mode 100644
index 000000000000..e75f95cc987c
--- /dev/null
+++ b/packages/ui/src/v2/components/session-review-v2.css
@@ -0,0 +1,632 @@
+[data-component="session-review-v2"] {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--background-stronger, var(--v2-background-bg-base));
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-body"] {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+[data-component="session-review-v2-sidebar-root"] {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  min-width: 0;
+  min-height: 0;
+  height: 100%;
+  overflow: hidden;
+}
+
+:is([data-component="session-review-v2"], [data-component="session-review-v2-sidebar-root"])
+  [data-slot="session-review-v2-sidebar"] {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  min-height: 0;
+  overflow: hidden;
+  border-right: 1px solid var(--border-weaker-base, var(--v2-border-border-weak));
+  background: var(--background-stronger, var(--v2-background-bg-base));
+}
+
+:is([data-component="session-review-v2"], [data-component="session-review-v2-sidebar-root"])
+  [data-slot="session-review-v2-sidebar"][aria-hidden="true"] {
+  border-right-width: 0;
+}
+
+:is([data-component="session-review-v2"], [data-component="session-review-v2-sidebar-root"])
+  [data-slot="session-review-v2-sidebar"]:not([data-resizing]) {
+  transition:
+    width 200ms cubic-bezier(0.22, 1, 0.36, 1),
+    border-right-width 200ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar-resize"] {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0;
+  z-index: 20;
+  width: 0;
+  overflow: visible;
+}
+
+[data-component="session-review-v2-sidebar-root"] [data-component="resize-handle"]::after {
+  background: var(--v2-border-border-muted, var(--border-weak-base));
+}
+
+:is([data-component="session-review-v2"], [data-component="session-review-v2-sidebar-root"])
+  [data-slot="session-review-v2-sidebar-header"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 16px 8px 8px;
+  flex-shrink: 0;
+}
+
+:is([data-component="session-review-v2"], [data-component="session-review-v2-sidebar-root"])
+  [data-slot="session-review-v2-sidebar-title"] {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-strong, var(--v2-text-text-base));
+}
+
+[data-component="session-review-v2-sidebar-root"][data-variant="files"]
+  [data-slot="session-review-v2-sidebar-title"] {
+  margin-left: 8px;
+}
+
+:is([data-component="session-review-v2"], [data-component="session-review-v2-sidebar-root"])
+  [data-slot="session-review-v2-sidebar-title"]
+  [data-component="select-v2-root"] {
+  width: fit-content;
+  max-width: 100%;
+  min-width: 0;
+}
+
+:is([data-component="session-review-v2"], [data-component="session-review-v2-sidebar-root"])
+  [data-slot="session-review-v2-sidebar-filter"] {
+  padding: 0 8px 8px;
+  flex-shrink: 0;
+  min-width: 0;
+  box-sizing: border-box;
+}
+
+:is([data-component="session-review-v2"], [data-component="session-review-v2-sidebar-root"])
+  [data-slot="session-review-v2-sidebar-filter"]
+  [data-component="text-input-v2"] {
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  margin-top: 2px;
+}
+
+:is([data-component="session-review-v2"], [data-component="session-review-v2-sidebar-root"])
+  [data-slot="session-review-v2-sidebar-tree"] {
+  flex: 1;
+  min-height: 0;
+}
+
+:is([data-component="session-review-v2"], [data-component="session-review-v2-sidebar-root"])
+  [data-slot="session-review-v2-sidebar-tree"]
+  .scroll-view__viewport {
+  padding: 0 8px 12px;
+}
+
+:is([data-component="session-review-v2"], [data-component="session-review-v2-sidebar-root"])
+  [data-slot="session-review-v2-sidebar-tree"]
+  .scroll-view__thumb {
+  width: 16px;
+}
+
+:is([data-component="session-review-v2"], [data-component="session-review-v2-sidebar-root"])
+  [data-slot="session-review-v2-sidebar-tree"]
+  .scroll-view__thumb::after {
+  width: 6px;
+  background-color: var(--v2-border-border-muted, var(--border-weak-base));
+}
+
+:is([data-component="session-review-v2"], [data-component="session-review-v2-sidebar-root"])
+  [data-slot="session-review-v2-sidebar-tree"]
+  .scroll-view__thumb:hover::after,
+:is([data-component="session-review-v2"], [data-component="session-review-v2-sidebar-root"])
+  [data-slot="session-review-v2-sidebar-tree"]
+  .scroll-view__thumb[data-dragging="true"]::after {
+  background-color: var(--v2-border-border-strong, var(--border-strong-base));
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-preview"] {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-toolbar"] {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 8px 12px;
+  padding-left: 8px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border-weaker-base, var(--v2-border-border-weak));
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-toolbar-group"] {
+  display: flex;
+  align-items: center;
+  gap: 0px;
+}
+
+[data-component="session-review-v2"] .session-review-v2-toolbar-group--start {
+  min-width: 0;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-toolbar-collapsed-meta"] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  padding-right: 8px;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-toolbar-title"] {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--text-strong, var(--v2-text-text-base));
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-toolbar-title"] [data-component="select-v2-root"] {
+  width: fit-content;
+  max-width: 100%;
+  min-width: 0;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-position"] {
+  flex: none;
+  flex-grow: 0;
+  font-family: var(--v2-font-family-sans);
+  font-style: normal;
+  font-weight: 440;
+  font-size: 11px;
+  line-height: 100%;
+  letter-spacing: 0.05px;
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums lining-nums;
+  font-feature-settings:
+    "tnum" on,
+    "lnum" on;
+  font-variation-settings: "slnt" 0;
+  color: var(--v2-grey-600);
+  white-space: nowrap;
+}
+
+[data-component="session-review-v2"] .session-review-v2-file-nav-button {
+  width: 36px;
+  height: 28px;
+  min-width: 36px;
+  min-height: 28px;
+  padding: 0;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-toolbar-group"] [data-component="tooltip-v2-trigger"] {
+  display: inline-flex;
+}
+
+[data-component="session-review-v2"] .session-review-v2-segmented-control [data-component="tooltip-v2-trigger"] {
+  display: flex;
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+[data-component="session-review-v2"]
+  .session-review-v2-segmented-control
+  [data-component="tooltip-v2-trigger"]
+  [data-slot="segmented-control-v2-item"] {
+  width: 100%;
+}
+
+.session-review-v2-sidebar-toggle-slot [data-component="tooltip-v2-trigger"] {
+  display: inline-flex;
+}
+
+.session-review-v2-tabs-actions [data-component="tooltip-v2-trigger"] {
+  display: inline-flex;
+}
+
+[data-component="tabs-v2"].session-review-v2-tabs .session-review-v2-tab-close {
+  margin-left: -5px;
+  flex-shrink: 0;
+}
+
+.session-review-v2-tabs-bar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+  padding: 12px;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  border-bottom: 1px solid var(--border-weaker-base, var(--v2-border-border-weak));
+  background-color: var(--background-stronger, var(--v2-background-bg-base));
+}
+
+.session-review-v2-tabs-bar .session-review-v2-open-in-app {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.session-review-v2-sidebar-toggle-slot {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+[data-component="tabs-v2"].session-review-v2-tabs {
+  background-color: var(--background-stronger, var(--v2-background-bg-base));
+}
+
+[data-component="tabs-v2"].session-review-v2-tabs .session-review-v2-tabs-list,
+[data-component="tabs-v2"].session-review-v2-tabs [data-slot="tabs-v2-list"].session-review-v2-tabs-list {
+  box-sizing: border-box;
+  flex: 1 1 0;
+  min-width: 0;
+  width: 100%;
+  height: fit-content;
+  padding: 0;
+  gap: 8px;
+  align-items: center;
+  background-color: transparent;
+  border-bottom: none;
+}
+
+[data-component="tabs-v2"].session-review-v2-tabs .session-review-v2-tabs-actions {
+  position: relative;
+  margin-left: -2px;
+  flex-shrink: 0;
+  background-color: var(--background-stronger, var(--v2-background-bg-base));
+}
+
+[data-component="tabs-v2"].session-review-v2-tabs [data-slot="tabs-v2-trigger"] .tab-fileicon-color,
+[data-component="tabs-v2"].session-review-v2-tabs [data-slot="tabs-v2-trigger"] .tab-fileicon-mono {
+  pointer-events: none;
+}
+
+[data-component="tabs-v2"].session-review-v2-tabs [data-slot="tabs-v2-trigger"] .tab-fileicon-color {
+  display: none;
+}
+
+[data-component="tabs-v2"].session-review-v2-tabs [data-slot="tabs-v2-trigger"] .tab-fileicon-mono {
+  display: block;
+  color: currentColor;
+}
+
+[data-component="tabs-v2"].session-review-v2-tabs [data-slot="tabs-v2-trigger"][data-selected] .tab-fileicon-color,
+[data-component="tabs-v2"].session-review-v2-tabs [data-slot="tabs-v2-trigger"]:hover .tab-fileicon-color {
+  display: block;
+}
+
+[data-component="tabs-v2"].session-review-v2-tabs [data-slot="tabs-v2-trigger"][data-selected] .tab-fileicon-mono,
+[data-component="tabs-v2"].session-review-v2-tabs [data-slot="tabs-v2-trigger"]:hover .tab-fileicon-mono {
+  display: none;
+}
+
+[data-component="tabs-v2"].session-review-v2-tabs .session-review-v2-file-tab--temporary [data-slot="tabs-v2-trigger"] {
+  font-style: italic;
+}
+
+[data-component="tabs-v2"].session-review-v2-tabs .session-review-v2-file-tab-slot--pressed [data-slot="tabs-v2-trigger-wrapper"] {
+  background-color: var(--v2-background-bg-layer-02);
+}
+
+[data-component="tabs-v2"].session-review-v2-tabs[data-variant="pill"]
+  [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
+  background-color: var(--v2-background-bg-layer-02);
+}
+
+[data-component="tabs-v2-drag-preview"] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 28px;
+  max-width: 320px;
+  padding-inline: 10px;
+  overflow: hidden;
+  color: var(--v2-text-text-base);
+  isolation: isolate;
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 100%;
+  letter-spacing: -0.04px;
+}
+
+[data-component="tabs-v2-drag-preview"]::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  height: 28px;
+  border-radius: 6px;
+  background-color: var(--v2-background-bg-base);
+}
+
+[data-component="tabs-v2-drag-preview"]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  height: 28px;
+  border-radius: 6px;
+  background-color: var(--v2-background-bg-layer-02);
+  box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
+}
+
+[data-component="tabs-v2-drag-preview"][data-temporary] {
+  font-style: italic;
+}
+
+[data-component="tabs-v2-drag-preview"] > * {
+  position: relative;
+  z-index: 1;
+}
+
+.session-review-v2-panel-body {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+[data-component="icon-button-v2"].session-review-v2-sidebar-toggle {
+  width: 36px;
+  height: 28px;
+  min-width: 36px;
+  min-height: 28px;
+  border-radius: 6px;
+  color: var(--v2-icon-icon-base);
+}
+
+[data-component="icon-button-v2"][data-variant="ghost"].session-review-v2-sidebar-toggle[aria-expanded="true"]:not(
+    :disabled
+  ),
+[data-component="icon-button-v2"][data-variant="ghost"].session-review-v2-sidebar-toggle[aria-expanded="true"]:is(
+    :hover,
+    [data-state="hover"],
+    :active,
+    [data-state="pressed"]
+  ):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-header"] {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  flex-shrink: 0;
+  border-bottom: 1px solid var(--border-weaker-base, var(--v2-border-border-weak));
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-title"] {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  flex: 1;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-header"] [data-component="diff-changes-v2"] {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-status"] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  font-size: 11px;
+  font-weight: 530;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  text-transform: uppercase;
+  font-variant-numeric: tabular-nums lining-nums;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-status"][data-type="added"] {
+  color: var(--icon-diff-add-base, var(--v2-state-fg-success));
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-status"][data-type="deleted"] {
+  color: var(--icon-diff-delete-base, var(--v2-state-fg-danger));
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-status"][data-type="modified"] {
+  color: var(--v2-state-fg-info);
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-name"] {
+  flex: none;
+  font-size: 13px;
+  font-weight: 530;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  font-variant-numeric: tabular-nums lining-nums;
+  color: var(--v2-text-text-base);
+  white-space: nowrap;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-file-path"] {
+  flex: none;
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 1;
+  letter-spacing: -0.04px;
+  font-variant-numeric: tabular-nums lining-nums;
+  color: var(--v2-text-text-muted);
+  white-space: nowrap;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-diff-scroll"] {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  --line-comment-z: 5;
+  --line-comment-popover-z: 30;
+  --line-comment-open-z: 6;
+}
+
+[data-component="session-review-v2"] .session-review-v2-toolbar-group--segments {
+  gap: 12px;
+}
+
+[data-component="session-review-v2"] .session-review-v2-toolbar-group--segments .session-review-v2-segmented-control {
+  width: auto;
+}
+
+[data-component="session-review-v2"]
+  .session-review-v2-toolbar-group--segments
+  .session-review-v2-segmented-control--icon
+  [data-slot="segmented-control-v2-item"] {
+  flex: 0 0 auto;
+}
+
+[data-component="session-review-v2"] [data-slot="session-review-v2-empty"] {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  padding-bottom: 160px;
+}
+
+[data-slot="session-review-v2-empty-no-git"] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 24px;
+  padding-bottom: 160px;
+  text-align: center;
+}
+
+[data-slot="session-review-v2-empty-no-git"] [data-component="file-icon"] {
+  width: 20px;
+  height: 20px;
+  color: var(--v2-icon-icon-muted);
+}
+
+[data-slot="session-review-v2-empty-no-git-title"] {
+  flex: none;
+  font-size: 13px;
+  font-weight: 530;
+  line-height: 100%;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-base);
+}
+
+[data-slot="session-review-v2-empty-no-git-description"] {
+  flex: none;
+  margin: 0 0 4px;
+  max-width: 360px;
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 20px;
+  text-align: center;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-muted);
+}
+
+[data-slot="session-review-v2-empty-open-file"] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 24px;
+  padding-bottom: 160px;
+  text-align: center;
+}
+
+[data-slot="session-review-v2-empty-open-file-icon"] {
+  flex: none;
+}
+
+[data-slot="session-review-v2-empty-open-file-title"] {
+  flex: none;
+  margin-top: 4px;
+  font-size: 13px;
+  font-weight: 530;
+  line-height: 100%;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-base);
+}
+
+[data-slot="session-review-v2-empty-open-file-description"] {
+  flex: none;
+  max-width: 282px;
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 20px;
+  text-align: center;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-muted);
+}
+
+[data-slot="session-review-v2-empty-changes"] {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 24px;
+  padding-bottom: 160px;
+  text-align: center;
+}
+
+[data-slot="session-review-v2-empty-changes"] [data-slot="icon-svg"] {
+  flex: none;
+  color: var(--v2-icon-icon-muted);
+}
+
+[data-slot="session-review-v2-empty-changes-title"] {
+  flex: none;
+  margin-top: 4px;
+  font-size: 13px;
+  font-weight: 530;
+  line-height: 100%;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-base);
+}
+
+[data-slot="session-review-v2-empty-changes-description"] {
+  flex: none;
+  max-width: 282px;
+  font-size: 13px;
+  font-weight: 440;
+  line-height: 20px;
+  text-align: center;
+  letter-spacing: -0.04px;
+  color: var(--v2-text-text-muted);
+}
diff --git a/packages/ui/src/v2/components/session-review-v2.tsx b/packages/ui/src/v2/components/session-review-v2.tsx
new file mode 100644
index 000000000000..1bb58f2bf292
--- /dev/null
+++ b/packages/ui/src/v2/components/session-review-v2.tsx
@@ -0,0 +1,366 @@
+import { IconButton } from "../../components/icon-button"
+import { useI18n } from "../../context/i18n"
+import { KeybindV2 } from "./keybind-v2"
+import { SegmentedControlItemV2, SegmentedControlV2 } from "./segmented-control-v2"
+import { TextInputV2 } from "./text-input-v2"
+import { Icon as IconV2 } from "./icon"
+import { IconButtonV2 } from "./icon-button-v2"
+import { TooltipV2 } from "./tooltip-v2"
+import type { SessionReviewDiffStyle } from "../../components/session-review"
+import { ResizeHandle } from "../../components/resize-handle"
+import { ScrollView } from "../../components/scroll-view"
+import { Show, createEffect, createSignal, onCleanup, type JSX } from "solid-js"
+import "./session-review-v2.css"
+
+const SIDEBAR_WIDTH_DEFAULT = 240
+const SIDEBAR_WIDTH_MIN = 200
+const SIDEBAR_WIDTH_MAX = 480
+
+export type SessionReviewExpandMode = "expand" | "collapse"
+
+export type SessionReviewV2Props = {
+  title?: JSX.Element
+  stats?: JSX.Element
+  empty?: JSX.Element
+  sidebarOpen?: boolean
+  filter: string
+  onFilterChange: (value: string) => void
+  sidebar?: JSX.Element
+  activeFile?: string
+  files: string[]
+  onSelectFile: (file: string) => void
+  diffStyle: SessionReviewDiffStyle
+  onDiffStyleChange?: (style: SessionReviewDiffStyle) => void
+  expandMode?: SessionReviewExpandMode
+  onExpandModeChange?: (mode: SessionReviewExpandMode) => void
+  preview?: JSX.Element
+  hasDiffs: boolean
+  hideSidebar?: boolean
+}
+
+export type SessionReviewV2SidebarProps = {
+  open: boolean
+  variant?: "review" | "files"
+  title?: JSX.Element
+  stats?: JSX.Element
+  filter: string
+  onFilterChange: (value: string) => void
+  onFilterKeyDown?: JSX.EventHandlerUnion<HTMLInputElement, KeyboardEvent>
+  focusFilterToken?: number
+  width?: number
+  onWidthChange?: (width: number) => void
+  minWidth?: number
+  maxWidth?: number
+  children?: JSX.Element
+}
+
+export function SessionReviewV2Sidebar(props: SessionReviewV2SidebarProps) {
+  const i18n = useI18n()
+  const [resizing, setResizing] = createSignal(false)
+  const width = () => props.width ?? SIDEBAR_WIDTH_DEFAULT
+  const minWidth = () => props.minWidth ?? SIDEBAR_WIDTH_MIN
+  const maxWidth = () => props.maxWidth ?? SIDEBAR_WIDTH_MAX
+  let filterInputRef: HTMLInputElement | undefined
+
+  createEffect(() => {
+    const token = props.focusFilterToken
+    if (!props.open || !token || token <= 0) return
+    queueMicrotask(() => {
+      if (!props.open) return
+      filterInputRef?.focus()
+      filterInputRef?.select()
+    })
+  })
+
+  createEffect(() => {
+    if (!resizing()) return
+    const stop = () => setResizing(false)
+    document.addEventListener("mouseup", stop)
+    onCleanup(() => document.removeEventListener("mouseup", stop))
+  })
+
+  return (
+    <div
+      data-component="session-review-v2-sidebar-root"
+      data-variant={props.variant ?? "review"}
+    >
+      <aside
+        data-slot="session-review-v2-sidebar"
+        data-resizing={resizing() ? "" : undefined}
+        aria-hidden={!props.open}
+        inert={!props.open}
+        style={{ width: props.open ? `${width()}px` : "0px" }}
+      >
+        <Show when={props.open}>
+          <div data-slot="session-review-v2-sidebar-header">
+            <div data-slot="session-review-v2-sidebar-title">{props.title}</div>
+            <Show when={props.stats}>{props.stats}</Show>
+          </div>
+          <div data-slot="session-review-v2-sidebar-filter">
+            <TextInputV2
+              ref={(el) => {
+                filterInputRef = el
+              }}
+              type="search"
+              value={props.filter}
+              onInput={(event) => props.onFilterChange(event.currentTarget.value)}
+              onKeyDown={props.onFilterKeyDown}
+              showClearButton={props.filter.length > 0}
+              clearLabel={i18n.t("ui.list.clearFilter")}
+              onClearClick={() => props.onFilterChange("")}
+              placeholder={i18n.t("ui.sessionReviewV2.filterFiles")}
+              aria-label={i18n.t("ui.sessionReviewV2.filterFiles")}
+              leadingIcon={
+                <svg
+                  width="14"
+                  height="14"
+                  viewBox="0 0 14 14"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                  aria-hidden="true"
+                >
+                  <path
+                    d="M12.25 12.25L10.0625 10.0625M11.0833 6.41667C11.0833 8.994 8.994 11.0833 6.41667 11.0833C3.83934 11.0833 1.75 8.994 1.75 6.41667C1.75 3.83934 3.83934 1.75 6.41667 1.75C8.994 1.75 11.0833 3.83934 11.0833 6.41667Z"
+                    stroke="currentColor"
+                    stroke-linecap="square"
+                  />
+                </svg>
+              }
+            />
+          </div>
+          <ScrollView
+            data-slot="session-review-v2-sidebar-tree"
+            class="group/file-tree-v2"
+            thumbVisibility="scroll"
+          >
+            {props.children}
+          </ScrollView>
+        </Show>
+      </aside>
+      <Show when={props.open && props.onWidthChange}>
+        <div
+          data-slot="session-review-v2-sidebar-resize"
+          onPointerDown={() => setResizing(true)}
+        >
+          <ResizeHandle
+            direction="horizontal"
+            size={width()}
+            min={minWidth()}
+            max={maxWidth()}
+            onResize={(next) => props.onWidthChange?.(next)}
+          />
+        </div>
+      </Show>
+    </div>
+  )
+}
+
+export function SessionReviewV2(props: SessionReviewV2Props) {
+  const i18n = useI18n()
+  const [localExpandMode, setLocalExpandMode] = createSignal<SessionReviewExpandMode>("collapse")
+
+  const expandMode = () => props.expandMode ?? localExpandMode()
+  const setExpandMode = (mode: SessionReviewExpandMode) => {
+    if (props.expandMode === undefined) setLocalExpandMode(mode)
+    props.onExpandModeChange?.(mode)
+  }
+
+  const fileIndex = () => {
+    const files = props.files
+    if (files.length === 0) return -1
+
+    const active = props.activeFile
+    const i = active ? files.indexOf(active) : -1
+    if (i >= 0) return i
+    return 0
+  }
+
+  const prev = () => {
+    const files = props.files
+    if (files.length === 0) return
+    return files[(fileIndex() - 1 + files.length) % files.length]
+  }
+
+  const next = () => {
+    const files = props.files
+    if (files.length === 0) return
+    return files[(fileIndex() + 1) % files.length]
+  }
+
+  const canCycle = () => props.files.length > 0
+  const showCollapsedMeta = () => props.sidebarOpen === false
+
+  return (
+    <div data-component="session-review-v2">
+      <div data-slot="session-review-v2-body">
+        <Show when={!props.hideSidebar}>
+          <SessionReviewV2Sidebar
+            open={props.sidebarOpen ?? true}
+            title={props.title}
+            stats={props.stats}
+            filter={props.filter}
+            onFilterChange={props.onFilterChange}
+          >
+            {props.sidebar}
+          </SessionReviewV2Sidebar>
+        </Show>
+
+        <div data-slot="session-review-v2-preview">
+          <Show when={props.hasDiffs} fallback={props.empty}>
+            <div data-slot="session-review-v2-toolbar">
+              <div
+                data-slot="session-review-v2-toolbar-group"
+                class="session-review-v2-toolbar-group--start"
+              >
+                <Show when={showCollapsedMeta()}>
+                  <div data-slot="session-review-v2-toolbar-collapsed-meta">
+                    <Show when={props.title}>
+                      <div data-slot="session-review-v2-toolbar-title">{props.title}</div>
+                    </Show>
+                    <Show when={props.stats}>{props.stats}</Show>
+                    <Show when={canCycle()}>
+                      <span data-slot="session-review-v2-file-position">
+                        {fileIndex() + 1}/{props.files.length}
+                      </span>
+                    </Show>
+                  </div>
+                </Show>
+                <div
+                  data-slot="session-review-v2-toolbar-group"
+                  class="session-review-v2-toolbar-group--file-nav"
+                >
+                <TooltipV2
+                  openDelay={2000}
+                  value={
+                    <>
+                      {i18n.t("ui.sessionReviewV2.previousFile")}
+                      <KeybindV2 keys={["<"]} variant="neutral" />
+                    </>
+                  }
+                >
+                  <IconButton
+                    icon="arrow-left"
+                    variant="ghost"
+                    size="small"
+                    class="session-review-v2-file-nav-button"
+                    disabled={!canCycle()}
+                    onClick={() => {
+                      const file = prev()
+                      if (!file) return
+                      props.onSelectFile(file)
+                    }}
+                    aria-label={i18n.t("ui.sessionReviewV2.previousFile")}
+                  />
+                </TooltipV2>
+                <TooltipV2
+                  openDelay={2000}
+                  value={
+                    <>
+                      {i18n.t("ui.sessionReviewV2.nextFile")}
+                      <KeybindV2 keys={[">"]} variant="neutral" />
+                    </>
+                  }
+                >
+                  <IconButton
+                    icon="arrow-right"
+                    variant="ghost"
+                    size="small"
+                    class="session-review-v2-file-nav-button"
+                    disabled={!canCycle()}
+                    onClick={() => {
+                      const file = next()
+                      if (!file) return
+                      props.onSelectFile(file)
+                    }}
+                    aria-label={i18n.t("ui.sessionReviewV2.nextFile")}
+                  />
+                </TooltipV2>
+                </div>
+              </div>
+              <div
+                data-slot="session-review-v2-toolbar-group"
+                class="session-review-v2-toolbar-group--segments"
+              >
+                <SegmentedControlV2
+                  value={expandMode()}
+                  onChange={(value) => {
+                    if (value !== "expand" && value !== "collapse") return
+                    setExpandMode(value)
+                  }}
+                  class="session-review-v2-segmented-control session-review-v2-segmented-control--icon"
+                  aria-label={i18n.t("ui.sessionReviewV2.expandMode")}
+                >
+                  <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.showAllLines")}>
+                    <SegmentedControlItemV2
+                      value="expand"
+                      aria-label={i18n.t("ui.sessionReviewV2.showAllLines")}
+                    >
+                      <IconV2 name="expand" />
+                    </SegmentedControlItemV2>
+                  </TooltipV2>
+                  <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
+                    <SegmentedControlItemV2
+                      value="collapse"
+                      aria-label={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}
+                    >
+                      <IconV2 name="collapse" />
+                    </SegmentedControlItemV2>
+                  </TooltipV2>
+                </SegmentedControlV2>
+                <Show when={props.onDiffStyleChange}>
+                  <SegmentedControlV2
+                    value={props.diffStyle}
+                    onChange={(value) => {
+                      if (value !== "unified" && value !== "split") return
+                      props.onDiffStyleChange?.(value)
+                    }}
+                    class="session-review-v2-segmented-control session-review-v2-segmented-control--icon"
+                    aria-label={i18n.t("ui.sessionReviewV2.diffView")}
+                  >
+                    <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.unifiedDiff")}>
+                      <SegmentedControlItemV2
+                        value="unified"
+                        aria-label={i18n.t("ui.sessionReviewV2.unifiedDiff")}
+                      >
+                        <IconV2 name="split" />
+                      </SegmentedControlItemV2>
+                    </TooltipV2>
+                    <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.splitDiff")}>
+                      <SegmentedControlItemV2
+                        value="split"
+                        aria-label={i18n.t("ui.sessionReviewV2.splitDiff")}
+                      >
+                        <IconV2 name="unified" />
+                      </SegmentedControlItemV2>
+                    </TooltipV2>
+                  </SegmentedControlV2>
+                </Show>
+              </div>
+            </div>
+            <Show when={props.preview} fallback={<div data-slot="session-review-v2-empty">{props.empty}</div>}>
+              {props.preview}
+            </Show>
+          </Show>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export function SessionReviewV2SidebarToggle(props: { opened: boolean; onToggle: () => void }) {
+  const i18n = useI18n()
+
+  return (
+    <TooltipV2 value={i18n.t("ui.sessionReviewV2.toggleSidebar")}>
+      <IconButtonV2
+        variant="ghost"
+        size="small"
+        class="session-review-v2-sidebar-toggle"
+        aria-label={i18n.t("ui.sessionReviewV2.toggleSidebar")}
+        aria-expanded={props.opened}
+        onClick={props.onToggle}
+        icon={<IconV2 name="filetree" />}
+      />
+    </TooltipV2>
+  )
+}
diff --git a/packages/ui/src/v2/components/split-button-v2.css b/packages/ui/src/v2/components/split-button-v2.css
new file mode 100644
index 000000000000..e8469f494d5a
--- /dev/null
+++ b/packages/ui/src/v2/components/split-button-v2.css
@@ -0,0 +1,99 @@
+[data-component="split-button-v2"] {
+  display: inline-flex;
+  align-items: stretch;
+  flex-shrink: 0;
+  height: 28px;
+  border-radius: 6px;
+  background-color: transparent;
+  box-shadow: none;
+  overflow: hidden;
+}
+
+[data-component="split-button-v2"]:is(:hover, :has([data-component="split-button-v2-menu-trigger"][data-expanded])) {
+  box-shadow: inset 0 0 0 1px var(--v2-border-border-muted);
+}
+
+[data-component="split-button-v2-action"],
+[data-component="split-button-v2-menu-trigger"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 28px;
+  margin: 0;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--v2-icon-icon-base);
+  cursor: default;
+  outline: none;
+}
+
+[data-component="split-button-v2-action"] {
+  width: 28px;
+  flex-shrink: 0;
+}
+
+[data-component="split-button-v2-action"]:hover:not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="split-button-v2-action"]:is(:active, [data-pressed]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="split-button-v2-action"]:is(:focus-visible, [data-focus]) {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+[data-component="split-button-v2-action"]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-component="split-button-v2-menu-trigger"] {
+  width: 20px;
+  flex-shrink: 0;
+}
+
+[data-component="split-button-v2-menu-trigger"]:is(:hover, [data-expanded]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-hover);
+}
+
+[data-component="split-button-v2-menu-trigger"]:is(:active, [data-pressed]):not(:disabled) {
+  background-color: var(--v2-overlay-simple-overlay-pressed);
+}
+
+[data-component="split-button-v2-menu-trigger"]:is(:focus-visible, [data-focus]) {
+  outline: 2px solid var(--v2-border-border-focus);
+  outline-offset: -2px;
+  z-index: 1;
+}
+
+[data-component="split-button-v2-menu-trigger"]:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+[data-component="split-button-v2-action"] [data-component="app-icon"] {
+  width: 16px;
+  height: 16px;
+}
+
+[data-component="menu-v2-content"].open-in-app-v2-menu [data-component="app-icon"] {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+[data-component="menu-v2-content"].open-in-app-v2-menu [data-component="icon"] {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+}
+
+[data-component="menu-v2-content"].open-in-app-v2-menu [data-component="icon"] [data-slot="icon-svg"] {
+  width: 16px;
+  height: 16px;
+}
diff --git a/packages/ui/src/v2/components/split-button-v2.tsx b/packages/ui/src/v2/components/split-button-v2.tsx
new file mode 100644
index 000000000000..3475db1c775d
--- /dev/null
+++ b/packages/ui/src/v2/components/split-button-v2.tsx
@@ -0,0 +1,48 @@
+import { splitProps, type ComponentProps, type ParentProps } from "solid-js"
+import "./split-button-v2.css"
+
+export function SplitButtonV2(props: ParentProps<{ class?: string; classList?: ComponentProps<"div">["classList"] }>) {
+  const [split, rest] = splitProps(props, ["class", "classList", "children"])
+  return (
+    <div
+      data-component="split-button-v2"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+      {...rest}
+    >
+      {split.children}
+    </div>
+  )
+}
+
+export function SplitButtonV2Action(props: ComponentProps<"button">) {
+  const [split, rest] = splitProps(props, ["class", "classList"])
+  return (
+    <button
+      type="button"
+      data-component="split-button-v2-action"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+      {...rest}
+    />
+  )
+}
+
+export function SplitButtonV2MenuTrigger(props: ComponentProps<"button">) {
+  const [split, rest] = splitProps(props, ["class", "classList"])
+  return (
+    <button
+      type="button"
+      data-component="split-button-v2-menu-trigger"
+      classList={{
+        ...split.classList,
+        [split.class ?? ""]: !!split.class,
+      }}
+      {...rest}
+    />
+  )
+}
diff --git a/packages/ui/src/v2/components/tabs-v2.css b/packages/ui/src/v2/components/tabs-v2.css
index 10e4261bae17..e6f8da484abd 100644
--- a/packages/ui/src/v2/components/tabs-v2.css
+++ b/packages/ui/src/v2/components/tabs-v2.css
@@ -90,8 +90,7 @@
   color: var(--v2-text-text-faint);
 }
 
-[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-list"],
-[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"] [data-slot="tabs-v2-list"] {
+[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-list"] {
   gap: 6px;
   padding-inline: 8px;
   height: 32px;
@@ -99,8 +98,7 @@
   position: relative;
 }
 
-[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-list"]::before,
-[data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"] [data-slot="tabs-v2-list"]::before {
+[data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-list"]::before {
   height: 1px;
   content: "";
   width: calc(100% + 16px);
@@ -111,8 +109,12 @@
 }
 
 [data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"] [data-slot="tabs-v2-list"] {
-  padding-bottom: 8px;
-  align-items: start;
+  gap: 6px;
+  padding-inline: 8px;
+  height: auto;
+  min-height: 28px;
+  align-items: center;
+  position: relative;
 }
 
 [data-component="tabs-v2"][data-variant="normal"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger-wrapper"] {
@@ -144,10 +146,15 @@
 }
 
 [data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"] [data-slot="tabs-v2-trigger-wrapper"] {
-  height: 24px;
-  border-radius: 4px;
-  border: 0.5px solid transparent;
+  height: 28px;
+  min-height: 28px;
+  max-height: 28px;
+  flex-shrink: 0;
+  border-radius: 6px;
+  border: none;
   box-sizing: border-box;
+  background-color: transparent;
+  box-shadow: none;
   color: var(--v2-text-text-muted);
 }
 
@@ -155,22 +162,21 @@
   width: 100%;
   height: 100%;
   justify-content: center;
-  padding: 0 6px;
-  border: 0.5px solid transparent;
+  padding: 0 10px;
+  border: none;
+  font-weight: 400;
 }
 
 [data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"]
   [data-slot="tabs-v2-trigger-wrapper"]:hover:not(:disabled):not(:has([data-selected])) {
-  background-color: var(--v2-background-bg-layer-01);
   color: var(--v2-text-text-base);
-  border: 0.5px solid var(--v2-border-border-muted);
 }
 
 [data-component="tabs-v2"][data-variant="pill"][data-orientation="horizontal"]
   [data-slot="tabs-v2-trigger-wrapper"]:has([data-selected]) {
   background-color: var(--v2-background-bg-layer-02);
   color: var(--v2-text-text-base);
-  border: 0.5px solid var(--v2-border-border-muted);
+  box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
 }
 
 [data-component="tabs-v2"][data-variant="settings"][data-orientation="vertical"] [data-slot="tabs-v2-list"] {
diff --git a/packages/ui/src/v2/components/text-input-v2.css b/packages/ui/src/v2/components/text-input-v2.css
index c6bcafaf1e53..3da53c3cca0d 100644
--- a/packages/ui/src/v2/components/text-input-v2.css
+++ b/packages/ui/src/v2/components/text-input-v2.css
@@ -53,11 +53,30 @@
   align-items: center;
   align-self: stretch;
   padding: 0;
+  gap: 6px;
   min-width: 0;
   flex: 1 1 auto;
   min-height: 0;
 }
 
+[data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  padding-left: 8px;
+  color: var(--v2-icon-icon-muted);
+}
+
+[data-component="text-input-v2"] [data-slot="text-input-v2-leading-icon"] :is(svg, [data-slot="icon-svg"]) {
+  display: block;
+  flex: none;
+}
+
+[data-component="text-input-v2"][data-leading-icon] [data-slot="text-input-v2-input"] {
+  padding-left: 0;
+}
+
 [data-component="text-input-v2"] [data-slot="text-input-v2-input"] {
   display: block;
   width: 100%;
@@ -81,6 +100,12 @@
   color: var(--v2-text-text-faint);
 }
 
+[data-component="text-input-v2"] [data-slot="text-input-v2-input"][type="search"]::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+  display: none;
+}
+
 [data-component="text-input-v2"][data-numeric] [data-slot="text-input-v2-input"] {
   font-variant-numeric: tabular-nums;
 }
@@ -134,6 +159,14 @@
   color: currentColor;
 }
 
+[data-component="text-input-v2"] [data-slot="text-input-v2-icon-button"][data-variant="clear"] {
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border-radius: 6px;
+  margin-right: -8px;
+}
+
 [data-component="text-input-v2"][data-invalid]:not([data-disabled]) [data-slot="text-input-v2-input"] {
   color: var(--v2-state-fg-danger);
   caret-color: var(--v2-state-fg-danger);
diff --git a/packages/ui/src/v2/components/text-input-v2.tsx b/packages/ui/src/v2/components/text-input-v2.tsx
index e7684ba4ae37..375b54669db7 100644
--- a/packages/ui/src/v2/components/text-input-v2.tsx
+++ b/packages/ui/src/v2/components/text-input-v2.tsx
@@ -1,13 +1,20 @@
-import { type ComponentProps, Show, splitProps } from "solid-js"
+import { type ComponentProps, type JSX, Show, splitProps } from "solid-js"
 import { Icon } from "./icon"
 import "./text-input-v2.css"
 
 export interface TextInputV2Props extends Omit<ComponentProps<"input">, "type"> {
+  /** Icon or adornment shown before the field value. */
+  leadingIcon?: JSX.Element
   /** Show the trailing copy action. */
   showCopyButton?: boolean
+  /** Show the trailing clear action. */
+  showClearButton?: boolean
   /** Accessible label for the copy button. */
   copyLabel?: string
+  /** Accessible label for the clear button. */
+  clearLabel?: string
   onCopyClick?: (event: MouseEvent) => void
+  onClearClick?: (event: MouseEvent) => void
   /** Apply tabular numerals to the field value. */
   numeric?: boolean
   /** Error styling for the field and value text. */
@@ -21,9 +28,13 @@ export function TextInputV2(props: TextInputV2Props) {
   const [local, inputProps] = splitProps(props, [
     "class",
     "classList",
+    "leadingIcon",
     "showCopyButton",
+    "showClearButton",
     "copyLabel",
+    "clearLabel",
     "onCopyClick",
+    "onClearClick",
     "numeric",
     "invalid",
     "appearance",
@@ -37,12 +48,16 @@ export function TextInputV2(props: TextInputV2Props) {
       data-invalid={local.invalid ? "" : undefined}
       data-numeric={local.numeric ? "" : undefined}
       data-appearance={local.appearance ?? "base"}
+      data-leading-icon={local.leadingIcon ? "" : undefined}
       classList={{
         ...local.classList,
         [local.class ?? ""]: !!local.class,
       }}
     >
       <div data-slot="text-input-v2-value">
+        <Show when={local.leadingIcon}>
+          <span data-slot="text-input-v2-leading-icon">{local.leadingIcon}</span>
+        </Show>
         <input
           {...inputProps}
           type={inputProps.type ?? "text"}
@@ -51,15 +66,26 @@ export function TextInputV2(props: TextInputV2Props) {
           data-slot="text-input-v2-input"
         />
       </div>
-      <Show when={local.showCopyButton}>
+      <Show when={local.showClearButton || local.showCopyButton}>
         <button
           type="button"
           data-slot="text-input-v2-icon-button"
-          aria-label={local.copyLabel ?? "Copy"}
+          data-variant={local.showClearButton ? "clear" : "copy"}
+          aria-label={local.showClearButton ? (local.clearLabel ?? "Clear") : (local.copyLabel ?? "Copy")}
           disabled={local.disabled}
-          onClick={local.onCopyClick}
+          onMouseDown={(event) => {
+            if (!local.showClearButton) return
+            event.preventDefault()
+          }}
+          onClick={(event) => {
+            if (local.showClearButton) {
+              local.onClearClick?.(event)
+              return
+            }
+            local.onCopyClick?.(event)
+          }}
         >
-          <Icon name="copy" />
+          <Icon name={local.showClearButton ? "xmark-small" : "copy"} />
         </button>
       </Show>
     </div>
diff --git a/packages/ui/src/v2/components/tooltip-v2.css b/packages/ui/src/v2/components/tooltip-v2.css
index 19f17f1b617b..b85f5e0f3295 100644
--- a/packages/ui/src/v2/components/tooltip-v2.css
+++ b/packages/ui/src/v2/components/tooltip-v2.css
@@ -6,8 +6,8 @@
   padding: 5px 6px;
   gap: 6px;
 
-  background: var(--background-bg-layer-01);
-  box-shadow: var(--elevation-floating);
+  background: var(--v2-background-bg-layer-01);
+  box-shadow: var(--v2-elevation-floating);
   border-radius: 4px;
 
   font-style: normal;
@@ -15,7 +15,7 @@
   font-size: 11px;
   line-height: 12px;
   letter-spacing: 0.05px;
-  color: var(--text-text-base);
+  color: var(--v2-text-text-base);
   font-variant-numeric: tabular-nums;
   font-variation-settings: "slnt" 0;
 
diff --git a/packages/ui/src/v2/components/tooltip-v2.tsx b/packages/ui/src/v2/components/tooltip-v2.tsx
index ac9c5d060853..07f5d0762bcc 100644
--- a/packages/ui/src/v2/components/tooltip-v2.tsx
+++ b/packages/ui/src/v2/components/tooltip-v2.tsx
@@ -29,6 +29,8 @@ export function TooltipV2(props: TooltipV2Props) {
     "forceOpen",
     "ignoreSafeArea",
     "value",
+    "openDelay",
+    "placement",
   ])
 
   const close = () => setState("open", false)
@@ -89,7 +91,8 @@ export function TooltipV2(props: TooltipV2Props) {
         <KobalteTooltip
           gutter={4}
           {...others}
-          openDelay={0}
+          placement={local.placement ?? "bottom"}
+          openDelay={local.openDelay ?? 0}
           closeDelay={0}
           ignoreSafeArea={local.ignoreSafeArea ?? true}
           open={local.forceOpen || state.open}
@@ -125,7 +128,7 @@ export function TooltipV2(props: TooltipV2Props) {
                 if (theme) el.setAttribute("data-theme", theme)
               }}
               data-component="tooltip-v2"
-              data-placement={props.placement}
+              data-placement={local.placement ?? "bottom"}
               data-force-open={local.forceOpen}
               class={local.contentClass}
               style={local.contentStyle}