feat(app): v2 review panel overhaul (#31882)

Co-authored-by: LukeParkerDev <10430890+Hona@users.noreply.github.com>

packages/app/e2e/performance/timeline/session-tab-switch-benchmark.spec.ts

@@ -2,7 +2,13 @@ import type { Page } from "@playwright/test"
 import { expectSessionTitle } from "../../utils/waits"
 import { benchmark, expect, withBenchmarkPage } from "../benchmark"
 import { fixture } from "./session-timeline-stress.fixture"
-import { installStressSessionTabs, mockStressTimeline, stressSessionHref } from "./timeline-test-helpers"
+import {
+  createReviewDiffs,
+  installStressSessionTabs,
+  installTimelineSettings,
+  mockStressTimeline,
+  stressSessionHref,
+} from "./timeline-test-helpers"
 import { measureSessionSwitch, waitForStableTimeline } from "./session-tab-switch-probe"
 
 type Result = Awaited<ReturnType<typeof measureSessionSwitch>>
@@ -20,8 +26,41 @@ benchmark("benchmarks cold and hot session tab switching", async ({ browser, rep
   report({ results, summary: summarize(results) })
 })
 
-async function trial(page: Page, mode: "cold" | "hot") {
-  await mockStressTimeline(page)
+benchmark(
+  "benchmarks v2 session tab switching with and without the review pane",
+  async ({ browser, report }, testInfo) => {
+    benchmark.setTimeout(360_000)
+    const runs = Number(process.env.SESSION_TAB_SWITCH_RUNS ?? 5)
+    const results = {
+      closed: { cold: [] as Result[], hot: [] as Result[] },
+      open: { cold: [] as Result[], hot: [] as Result[] },
+    }
+    for (const reviewPane of ["closed", "open"] as const) {
+      for (const mode of ["cold", "hot"] as const) {
+        for (let run = 0; run < runs; run++) {
+          results[reviewPane][mode].push(
+            await withBenchmarkPage(
+              browser,
+              `session-tab-switch-v2-${reviewPane}-${mode}-${run}`,
+              (page) => trial(page, mode, { newLayoutDesigns: true, reviewPane }),
+              testInfo,
+            ),
+          )
+        }
+      }
+    }
+    report({ results, summary: summarizeReviewPane(results) }, { runs, reviewDiffs: createReviewDiffs().length })
+  },
+)
+
+async function trial(
+  page: Page,
+  mode: "cold" | "hot",
+  options?: { newLayoutDesigns?: boolean; reviewPane?: "closed" | "open" },
+) {
+  const reviewDiffs = options?.newLayoutDesigns ? createReviewDiffs() : undefined
+  await mockStressTimeline(page, { vcsDiff: reviewDiffs })
+  if (options?.newLayoutDesigns) await installTimelineSettings(page)
   await installStressSessionTabs(page)
   if (mode === "hot") {
     await page.goto(stressSessionHref(fixture.targetID))
@@ -33,6 +72,10 @@ async function trial(page: Page, mode: "cold" | "hot") {
     await expectSessionTitle(page, fixture.expected.sourceTitle)
   }
   await waitForStableTimeline(page, fixture.expected.sourceMessageIDs.at(-1)!)
+  if (options?.reviewPane === "open") {
+    await openReviewPane(page)
+    await waitForStableTimeline(page, fixture.expected.sourceMessageIDs.at(-1)!)
+  }
 
   const destinationIDs = fixture.messages[fixture.targetID].map((message) => message.info.id)
   const sourceIDs = fixture.messages[fixture.sourceID].map((message) => message.info.id)
@@ -70,6 +113,15 @@ function summarize(results: Record<"cold" | "hot", Result[]>) {
   )
 }
 
+function summarizeReviewPane(results: Record<"closed" | "open", Record<"cold" | "hot", Result[]>>) {
+  return Object.fromEntries(
+    Object.entries(results).map(([reviewPane, values]) => [
+      reviewPane,
+      summarize(values as Record<"cold" | "hot", Result[]>),
+    ]),
+  )
+}
+
 async function switchSession(page: Page, sessionID: string, title: string) {
   const href = stressSessionHref(sessionID)
   const tab = page.locator(`[data-slot="titlebar-tabs"] a[href="${href}"]`).first()
@@ -77,3 +129,16 @@ async function switchSession(page: Page, sessionID: string, title: string) {
   await tab.click()
   await expectSessionTitle(page, title)
 }
+
+async function openReviewPane(page: Page) {
+  await page.getByRole("button", { name: "Toggle review" }).click()
+  const panel = page.locator("#review-panel")
+  await expect(panel).toBeVisible()
+  // Text-based readiness works across review implementations; the legacy list mounts
+  // diff viewers lazily while V2 mounts the active preview eagerly.
+  await page.waitForFunction(() => {
+    const panel = document.querySelector<HTMLElement>("#review-panel")
+    const text = panel?.textContent ?? ""
+    return text.includes("generated-000.ts") && text.includes("+3")
+  })
+}

packages/app/e2e/performance/timeline/session-tab-switch-metrics.ts

@@ -5,6 +5,12 @@ export type SessionSwitchSample = {
   hasVisibleRows: boolean
   last: boolean
   bottomErrorPx?: number
+  review?: {
+    fileHost: boolean
+    fileHostReplaced: boolean
+    header: string
+    replacedLevels: string[]
+  }
 }
 
 export function classifySessionSwitch(samples: SessionSwitchSample[]) {
@@ -23,6 +29,10 @@ export function classifySessionSwitch(samples: SessionSwitchSample[]) {
       (sample) => sample.hasVisibleRows && sample.destination.length === 0 && sample.source.length === 0,
     ).length,
     sourceSamples: samples.filter((sample) => sample.source.length > 0).length,
+    reviewFileHostMissingSamples: samples.filter((sample) => sample.review && !sample.review.fileHost).length,
+    reviewFileHostReplacedSamples: samples.filter((sample) => sample.review?.fileHostReplaced).length,
+    reviewHeaders: [...new Set(samples.flatMap((sample) => (sample.review ? [sample.review.header] : [])))],
+    reviewReplacedLevels: [...new Set(samples.flatMap((sample) => sample.review?.replacedLevels ?? []))],
   }
 }
 

packages/app/e2e/performance/timeline/session-tab-switch-probe.ts

@@ -16,11 +16,41 @@ async function installSessionSwitchProbe(
     const samples: SessionSwitchSample[] = []
     let started: number | undefined
     let running = true
+    const reviewLevels: Record<string, string> = {
+      panel: "#review-panel",
+      tabs: '#review-panel [data-component="tabs"]',
+      body: '#review-panel [data-slot="session-review-v2-body"]',
+      review: '#review-panel [data-component="session-review-v2"]',
+      preview: '#review-panel [data-slot="session-review-v2-preview"]',
+      scroll: '#review-panel [data-slot="session-review-v2-diff-scroll"]',
+      file: '#review-panel [data-component="file"][data-mode="diff"]',
+    }
+    const initialReviewNodes: Record<string, Element | null> = {}
     const sample = () => {
       if (!running || started === undefined) return
       setTimeout(() => {
         if (!running || started === undefined) return
         const observedAtMs = performance.now() - started
+        const reviewPanel = document.querySelector<HTMLElement>("#review-panel")
+        const reviewFile = reviewPanel?.querySelector('[data-component="file"][data-mode="diff"]')
+        const initialReviewFile = initialReviewNodes.file
+        const replacedLevels = Object.entries(reviewLevels).flatMap(([name, selector]) => {
+          const initial = initialReviewNodes[name]
+          if (!initial) return []
+          const current = document.querySelector(selector)
+          return current && current !== initial ? [name] : []
+        })
+        const review = reviewPanel
+          ? {
+              fileHost: !!reviewFile,
+              fileHostReplaced: !!initialReviewFile && !!reviewFile && reviewFile !== initialReviewFile,
+              header:
+                reviewPanel
+                  .querySelector<HTMLElement>('[data-slot="session-review-v2-file-header"]')
+                  ?.textContent?.trim() ?? "",
+              replacedLevels,
+            }
+          : undefined
         const root = [...document.querySelectorAll<HTMLElement>(".scroll-view__viewport")].find((element) =>
           element.querySelector("[data-timeline-row]"),
         )
@@ -44,9 +74,10 @@ async function installSessionSwitchProbe(
             hasVisibleRows,
             last: visible.includes(lastID),
             bottomErrorPx: spacer ? spacer.bottom - view.bottom : undefined,
+            review,
           })
         } else {
-          samples.push({ observedAtMs, destination: [], source: [], hasVisibleRows: false, last: false })
+          samples.push({ observedAtMs, destination: [], source: [], hasVisibleRows: false, last: false, review })
         }
         requestAnimationFrame(sample)
       }, 0)
@@ -57,6 +88,9 @@ async function installSessionSwitchProbe(
         const link = event.target instanceof Element ? event.target.closest("a") : undefined
         if (link?.getAttribute("href") !== href) return
         started = performance.now()
+        for (const [name, selector] of Object.entries(reviewLevels)) {
+          initialReviewNodes[name] = document.querySelector(selector)
+        }
         requestAnimationFrame(sample)
       },
       { capture: true, once: true },

packages/app/e2e/performance/timeline/session-timeline-benchmark.fixture.ts

@@ -93,36 +93,53 @@ const assistantMessage = {
   parts: [editPart],
 }
 
-export async function setupTimelineBenchmark(page: Page, options: { historyTurns: number; eventBatch: number }) {
+export async function setupTimelineBenchmark(
+  page: Page,
+  options: {
+    historyTurns: number
+    eventBatch: number
+    newLayoutDesigns?: boolean
+    vcsDiff?: unknown[]
+    turnDiffs?: unknown[]
+  },
+) {
   const events: EventPayload[] = []
   let eventBatch = options.eventBatch
+  const currentUserMessage = options.turnDiffs
+    ? { ...userMessage, info: { ...userMessage.info, summary: { diffs: options.turnDiffs } } }
+    : userMessage
   await mockOpenCodeServer(page, {
     directory,
     project: project(),
     provider: provider(),
     sessions: [session()],
+    vcsDiff: options.vcsDiff,
     pageMessages: () => ({
       items: [
         ...Array.from({ length: options.historyTurns }, (_, index) => performanceTurn(index)).flat(),
-        userMessage,
+        currentUserMessage,
         assistantMessage,
       ],
     }),
     events: () => events.splice(0, eventBatch),
     eventRetry: 16,
   })
-  await page.addInitScript(() => {
-    localStorage.setItem(
-      "settings.v3",
-      JSON.stringify({
-        general: {
-          editToolPartsExpanded: true,
-          shellToolPartsExpanded: true,
-          showReasoningSummaries: true,
-        },
-      }),
-    )
-  })
+  await page.addInitScript(
+    (input) => {
+      localStorage.setItem(
+        "settings.v3",
+        JSON.stringify({
+          general: {
+            newLayoutDesigns: input.newLayoutDesigns,
+            editToolPartsExpanded: true,
+            shellToolPartsExpanded: true,
+            showReasoningSummaries: true,
+          },
+        }),
+      )
+    },
+    { newLayoutDesigns: options.newLayoutDesigns ?? false },
+  )
   await page.setViewportSize({ width: 1366, height: 768 })
   const scroller = page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") })
   const text = page.locator(`[data-timeline-part-id="${textPartID}"]`).first()

packages/app/e2e/performance/timeline/session-timeline-benchmark.spec.ts

@@ -1,3 +1,4 @@
+import type { Page } from "@playwright/test"
 import { benchmark, benchmarkDiagnostics, expect } from "../benchmark"
 import {
   buildInitialStreamEvent,
@@ -6,80 +7,300 @@ import {
   textPartID,
 } from "./session-timeline-benchmark.fixture"
 import { startTimelineProfile } from "./session-timeline-profile"
+import { createReviewDiffs } from "./timeline-test-helpers"
 import {
   collectTimelineStreamMetrics,
   installTimelineStreamProbe,
   startTimelineStreamProbe,
 } from "./session-timeline-stream-probe"
 
+type TimelineStreamOptions = {
+  newLayoutDesigns?: boolean
+  reviewDiffs?: boolean
+  reviewPane?: boolean
+}
+
+type ReviewPaneSample = {
+  observedAtMs: number
+  panelVisible: boolean
+  header: string
+  diffViewers: number
+  diffLines: number
+  codeBlocks: number
+  ready: boolean
+}
+
+type ReviewPaneProbe = {
+  samples: ReviewPaneSample[]
+  start: () => void
+  stop: () => void
+}
+
+const reviewReadyStreak = 3
+
 benchmark.describe("performance: session timeline streaming", () => {
   benchmark("streams assistant text without remounting or oscillating", async ({ page, report }) => {
-    benchmark.setTimeout(480_000)
-    const cpuThrottle = Number(process.env.TIMELINE_CPU_THROTTLE ?? 30)
-    const deltaCount = Number(process.env.TIMELINE_DELTA_COUNT ?? 160)
-    const historyTurns = Number(process.env.TIMELINE_HISTORY_TURNS ?? 320)
-    const eventBatch = Number(process.env.TIMELINE_EVENT_BATCH ?? 1)
-    const minimal = process.env.TIMELINE_MINIMAL === "1"
-    const profileCPU = process.env.TIMELINE_CPU_PROFILE === "1"
-    const profileVisual = !minimal && profileCPU && process.env.TIMELINE_VISUAL_PROFILE !== "0"
+    benchmark.setTimeout(Number(process.env.TIMELINE_COMPLETION_TIMEOUT_MS ?? 420_000) + 60_000)
+    const result = await runTimelineStreamBenchmark(page, {})
+    report(result.metrics, result.context)
+  })
+
+  benchmark("streams assistant text in v2 with review pane closed", async ({ page, report }) => {
+    benchmark.setTimeout(Number(process.env.TIMELINE_COMPLETION_TIMEOUT_MS ?? 420_000) + 60_000)
+    const result = await runTimelineStreamBenchmark(page, { newLayoutDesigns: true })
+    report(result.metrics, result.context)
+  })
+
+  benchmark("streams assistant text in v2 with review diffs and pane closed", async ({ page, report }) => {
+    benchmark.setTimeout(Number(process.env.TIMELINE_COMPLETION_TIMEOUT_MS ?? 420_000) + 60_000)
+    const result = await runTimelineStreamBenchmark(page, { newLayoutDesigns: true, reviewDiffs: true })
+    report(result.metrics, result.context)
+  })
+
+  benchmark("streams assistant text in v2 with review pane open", async ({ page, report }) => {
+    benchmark.setTimeout(Number(process.env.TIMELINE_COMPLETION_TIMEOUT_MS ?? 420_000) + 60_000)
+    const result = await runTimelineStreamBenchmark(page, { newLayoutDesigns: true, reviewPane: true })
+    report(result.metrics, result.context)
+  })
+})
+
+benchmark.describe("performance: review pane", () => {
+  benchmark("loads v2 review diffs and switches active files", async ({ page, report }) => {
+    benchmark.setTimeout(240_000)
+    const historyTurns = Number(process.env.REVIEW_PANE_HISTORY_TURNS ?? 72)
+    const diffs = createReviewDiffs()
     const fixture = await setupTimelineBenchmark(page, {
       historyTurns,
-      eventBatch,
+      eventBatch: 1,
+      newLayoutDesigns: true,
+      vcsDiff: diffs,
     })
 
-    fixture.transport.enqueue(buildInitialStreamEvent(deltaCount))
-    const contentStart = performance.now()
+    fixture.transport.enqueue(buildInitialStreamEvent(1))
     await expect(fixture.text).toBeVisible()
     await expect(fixture.text).toContainText("Implementation plan")
-    const initialContentObservedMs = performance.now() - contentStart
     await fixture.scrollToBottom()
     await fixture.waitForStableGeometry()
 
-    const profile = await startTimelineProfile(page, { cpuThrottle, profileCPU })
-    await installTimelineStreamProbe(page, { textPartID, finalIndex: deltaCount, profileVisual, minimal })
-    const deltas = buildStreamDeltaEvents(deltaCount)
-    await startTimelineStreamProbe(page)
-    fixture.transport.enqueue(deltas)
-
-    await page.waitForFunction(
-      (finalIndex) =>
-        (
-          window as Window & {
-            __timelineStreamBenchmark?: { applied: { index: number }[] }
-          }
-        ).__timelineStreamBenchmark?.applied.some((value) => value.index === finalIndex),
-      deltaCount,
-      { timeout: 420_000 },
-    )
-    await expect(fixture.text).toContainText("benchmark-complete")
-    await expect(fixture.text).toContainText("Streaming")
-    await fixture.waitForStableGeometry()
-    const metrics = await collectTimelineStreamMetrics(page, {
-      textPartID,
-      finalIndex: deltaCount,
-      navigations: benchmarkDiagnostics(page).navigations,
-    })
-    const delivered = deltas.length - fixture.transport.pendingCount()
-    await profile.stop()
+    const open = await measureReviewPaneLoad(page, diffs[0]!.file)
+    const switches = []
+    for (const diff of diffs.slice(1, 4)) switches.push(await measureReviewNextFile(page, diff.file))
 
     report(
       {
-        endToEndInitialContentObservedMs: initialContentObservedMs,
-        ...metrics,
-        deliveredDeltas: delivered,
-        pendingDeltas: fixture.transport.pendingCount(),
+        open,
+        switches,
       },
       {
-        cpuThrottle,
-        profileCPU,
-        profileVisual,
-        minimal,
-        queuedDeltas: deltas.length,
         historyTurns,
-        eventBatch,
+        reviewDiffs: diffs.length,
       },
     )
-
-    await profile.reset()
   })
 })
+
+async function runTimelineStreamBenchmark(page: Page, options: TimelineStreamOptions) {
+  const completionTimeoutMs = Number(process.env.TIMELINE_COMPLETION_TIMEOUT_MS ?? 420_000)
+  const cpuThrottle = Number(process.env.TIMELINE_CPU_THROTTLE ?? 30)
+  const deltaCount = Number(process.env.TIMELINE_DELTA_COUNT ?? 160)
+  const historyTurns = Number(process.env.TIMELINE_HISTORY_TURNS ?? 320)
+  const eventBatch = Number(process.env.TIMELINE_EVENT_BATCH ?? 1)
+  const minimal = process.env.TIMELINE_MINIMAL === "1"
+  const profileCPU = process.env.TIMELINE_CPU_PROFILE === "1"
+  const profileVisual = !minimal && profileCPU && process.env.TIMELINE_VISUAL_PROFILE !== "0"
+  const diffs = options.reviewDiffs || options.reviewPane ? createReviewDiffs() : undefined
+  const fixture = await setupTimelineBenchmark(page, {
+    historyTurns,
+    eventBatch,
+    newLayoutDesigns: options.newLayoutDesigns,
+    // Turn diffs exercise timeline data cost; the pane-open scenario serves the same
+    // diffs through the default git mode so it works across review implementations.
+    turnDiffs: options.reviewDiffs ? diffs : undefined,
+    vcsDiff: options.reviewPane ? diffs : undefined,
+  })
+
+  fixture.transport.enqueue(buildInitialStreamEvent(deltaCount))
+  const contentStart = performance.now()
+  await expect(fixture.text).toBeVisible()
+  await expect(fixture.text).toContainText("Implementation plan")
+  const initialContentObservedMs = performance.now() - contentStart
+  await fixture.scrollToBottom()
+  await fixture.waitForStableGeometry()
+
+  const reviewPane = options.reviewPane && diffs ? await measureReviewPaneLoad(page, diffs[0]!.file) : undefined
+  if (reviewPane) await fixture.waitForStableGeometry()
+
+  const profile = await startTimelineProfile(page, { cpuThrottle, profileCPU })
+  await installTimelineStreamProbe(page, { textPartID, finalIndex: deltaCount, profileVisual, minimal })
+  const deltas = buildStreamDeltaEvents(deltaCount)
+  await startTimelineStreamProbe(page)
+  fixture.transport.enqueue(deltas)
+
+  await page.waitForFunction(
+    (finalIndex) =>
+      (
+        window as Window & {
+          __timelineStreamBenchmark?: { applied: { index: number }[] }
+        }
+      ).__timelineStreamBenchmark?.applied.some((value) => value.index === finalIndex),
+    deltaCount,
+    { timeout: completionTimeoutMs },
+  )
+  await expect(fixture.text).toContainText("benchmark-complete")
+  await expect(fixture.text).toContainText("Streaming")
+  await fixture.waitForStableGeometry()
+  const metrics = await collectTimelineStreamMetrics(page, {
+    textPartID,
+    finalIndex: deltaCount,
+    navigations: benchmarkDiagnostics(page).navigations,
+  })
+  const delivered = deltas.length - fixture.transport.pendingCount()
+  await profile.stop()
+
+  const result = {
+    metrics: {
+      endToEndInitialContentObservedMs: initialContentObservedMs,
+      ...metrics,
+      deliveredDeltas: delivered,
+      pendingDeltas: fixture.transport.pendingCount(),
+      reviewPane: reviewPane ?? null,
+    },
+    context: {
+      cpuThrottle,
+      profileCPU,
+      profileVisual,
+      minimal,
+      queuedDeltas: deltas.length,
+      historyTurns,
+      eventBatch,
+      newLayoutDesigns: options.newLayoutDesigns === true,
+      reviewPane: options.reviewPane === true ? "open" : "closed",
+      reviewDiffs: diffs?.length ?? 0,
+    },
+  }
+
+  await profile.reset()
+  return result
+}
+
+async function measureReviewPaneLoad(page: Page, file: string) {
+  // Default git mode reads the mocked /vcs/diff data, so opening the pane is enough
+  // and the flow works across review pane implementations.
+  await installReviewPaneProbe(page, { file })
+  await startReviewPaneProbe(page)
+  await page.getByRole("button", { name: "Toggle review" }).click()
+  await expect(page.locator("#review-panel")).toBeVisible()
+  return collectReviewPaneProbe(page)
+}
+
+async function measureReviewNextFile(page: Page, file: string) {
+  await installReviewPaneProbe(page, { file })
+  await startReviewPaneProbe(page)
+  await page.getByRole("button", { name: "Next file" }).click()
+  return collectReviewPaneProbe(page)
+}
+
+async function installReviewPaneProbe(page: Page, input: { file: string }) {
+  await page.evaluate((input) => {
+    const samples: ReviewPaneSample[] = []
+    const basename = input.file.split(/[\\/]/).at(-1) ?? input.file
+    let started: number | undefined
+    let running = true
+
+    const paneState = () => {
+      const panel = document.querySelector<HTMLElement>("#review-panel")
+      const review = panel?.querySelector<HTMLElement>('[data-component="session-review-v2"]')
+      const rect = (review ?? panel)?.getBoundingClientRect()
+      const text = panel?.textContent ?? ""
+      const previewHeader = panel?.querySelector<HTMLElement>(
+        '[data-slot="session-review-v2-file-header"]',
+      )?.textContent
+      const header = previewHeader ?? text
+      const viewers = panel ? [...panel.querySelectorAll<HTMLElement>('[data-component="file"][data-mode="diff"]')] : []
+      const codeBlocks = panel?.querySelectorAll("code").length ?? 0
+      const diffLines = viewers.reduce(
+        (sum, viewer) =>
+          sum +
+          (viewer.shadowRoot?.querySelectorAll("[data-line]").length ?? viewer.querySelectorAll("[data-line]").length),
+        0,
+      )
+      const panelVisible =
+        !!panel && panel.getAttribute("aria-hidden") !== "true" && !!rect && rect.width > 0 && rect.height > 0
+      return {
+        panelVisible,
+        header: header.slice(0, 500),
+        diffViewers: viewers.length,
+        diffLines,
+        codeBlocks,
+        ready:
+          panelVisible &&
+          header.includes(basename) &&
+          (viewers.length > 0 || text.includes("+3") || diffLines > 0 || codeBlocks > 0),
+      }
+    }
+
+    const sample = () => {
+      if (!running || started === undefined) return
+      requestAnimationFrame(() => {
+        setTimeout(() => {
+          if (!running || started === undefined) return
+          samples.push({ observedAtMs: performance.now() - started, ...paneState() })
+          if (performance.now() - started < 10_000) sample()
+        }, 0)
+      })
+    }
+
+    ;(window as Window & { __reviewPaneProbe?: ReviewPaneProbe }).__reviewPaneProbe = {
+      samples,
+      start: () => {
+        started = performance.now()
+        performance.mark("opencode.review-pane.click")
+        sample()
+      },
+      stop: () => {
+        running = false
+      },
+    }
+  }, input)
+}
+
+async function startReviewPaneProbe(page: Page) {
+  await page.evaluate(() => {
+    ;(window as Window & { __reviewPaneProbe?: ReviewPaneProbe }).__reviewPaneProbe!.start()
+  })
+}
+
+async function collectReviewPaneProbe(page: Page) {
+  await page.waitForFunction((streak) => {
+    const samples = (window as Window & { __reviewPaneProbe?: ReviewPaneProbe }).__reviewPaneProbe?.samples
+    if (!samples) return false
+    return samples.some((_, index) => {
+      const stable = samples.slice(index, index + streak)
+      return stable.length === streak && stable.every((sample) => sample.ready)
+    })
+  }, reviewReadyStreak)
+
+  const samples = await page.evaluate(() => {
+    const probe = (window as Window & { __reviewPaneProbe?: ReviewPaneProbe }).__reviewPaneProbe!
+    probe.stop()
+    return probe.samples
+  })
+  return { summary: summarizeReviewPaneSamples(samples), samples }
+}
+
+function summarizeReviewPaneSamples(samples: ReviewPaneSample[]) {
+  const firstReady = samples.find((sample) => sample.ready)
+  const stableIndex = samples.findIndex((_, index) => {
+    const stable = samples.slice(index, index + reviewReadyStreak)
+    return stable.length === reviewReadyStreak && stable.every((sample) => sample.ready)
+  })
+  return {
+    samples: samples.length,
+    firstReadyObservedMs: firstReady?.observedAtMs ?? null,
+    stableReadyObservedMs: stableIndex === -1 ? null : samples[stableIndex + reviewReadyStreak - 1]!.observedAtMs,
+    notReadySamples: samples.filter((sample) => !sample.ready).length,
+    maxDiffViewers: Math.max(0, ...samples.map((sample) => sample.diffViewers)),
+    maxDiffLines: Math.max(0, ...samples.map((sample) => sample.diffLines)),
+    maxCodeBlocks: Math.max(0, ...samples.map((sample) => sample.codeBlocks)),
+  }
+}

packages/app/e2e/performance/timeline/timeline-test-helpers.ts

@@ -21,7 +21,10 @@ export async function installTimelineSettings(page: Page) {
 
 export function mockStressTimeline(
   page: Page,
-  input?: { onMessages?: (input: { sessionID: string; before?: string; phase: "start" | "end" }) => void },
+  input?: {
+    onMessages?: (input: { sessionID: string; before?: string; phase: "start" | "end" }) => void
+    vcsDiff?: unknown[]
+  },
 ) {
   return mockOpenCodeServer(page, {
     sessions: fixture.sessions,
@@ -30,6 +33,7 @@ export function mockStressTimeline(
     project: fixture.project,
     pageMessages,
     onMessages: input?.onMessages,
+    vcsDiff: input?.vcsDiff,
   })
 }
 
@@ -78,3 +82,53 @@ export function stressDraftHref(draftID: string) {
 function stressServer() {
   return `http://${process.env.PLAYWRIGHT_SERVER_HOST ?? "127.0.0.1"}:${process.env.PLAYWRIGHT_SERVER_PORT ?? "4096"}`
 }
+
+export function createReviewDiffs() {
+  return Array.from({ length: Number(process.env.REVIEW_PANE_DIFF_COUNT ?? 72) }, (_, index) => {
+    const lines = index % 3 === 0 ? 300 : index % 3 === 1 ? 120 : 38
+    const file = `src/review/generated-${String(index).padStart(3, "0")}.ts`
+    const before = reviewSource(index, lines)
+    const after = before
+      .replace(`value_${index}_4`, `updated_${index}_4`)
+      .replace(
+        `value_${index}_${Math.max(8, Math.floor(lines / 2))}`,
+        `updated_${index}_${Math.max(8, Math.floor(lines / 2))}`,
+      )
+      .replace(`value_${index}_${lines - 4}`, `updated_${index}_${lines - 4}`)
+    return {
+      file,
+      patch: reviewPatch(file, before, after),
+      additions: 3,
+      deletions: 3,
+      status: "modified" as const,
+    }
+  })
+}
+
+function reviewSource(seed: number, lines: number) {
+  return Array.from(
+    { length: lines },
+    (_, index) => `export const value_${seed}_${index} = "${reviewWords(seed + index, index % 5 === 0 ? 180 : 42)}"`,
+  ).join("\n")
+}
+
+function reviewPatch(file: string, before: string, after: string) {
+  const beforeLines = before.split("\n")
+  const afterLines = after.split("\n")
+  return [
+    `diff --git a/${file} b/${file}`,
+    `--- a/${file}`,
+    `+++ b/${file}`,
+    `@@ -1,${beforeLines.length} +1,${afterLines.length} @@`,
+    ...beforeLines.flatMap((line, index) => {
+      const next = afterLines[index]!
+      if (line === next) return [` ${line}`]
+      return [`-${line}`, `+${next}`]
+    }),
+  ].join("\n")
+}
+
+function reviewWords(seed: number, length: number) {
+  const words = ["alpha", "bravo", "charlie", "delta", "echo", "foxtrot", "golf", "hotel", "india", "juliet"]
+  return Array.from({ length: Math.ceil(length / 7) }, (_, index) => words[(seed + index * 3) % words.length]).join(" ")
+}

packages/app/e2e/regression/review-image-flash.spec.ts

@@ -0,0 +1,202 @@
+import { expect, test, type Page } from "@playwright/test"
+import { base64Encode } from "@opencode-ai/core/util/encode"
+import { mockOpenCodeServer } from "../utils/mock-server"
+import { expectAppVisible, expectSessionTitle } from "../utils/waits"
+
+const directory = "C:/OpenCode/ReviewImageFlashRegression"
+const sessionID = "ses_review_image_flash_regression"
+const title = "Review image flash regression"
+const imageFile = "assets/preview.png"
+
+test("clicking an image file in the v2 review pane does not blank the panel", async ({ page }) => {
+  await openReview(page)
+  await installReviewFlashProbe(page)
+
+  await page.getByRole("button", { name: /preview\.png/ }).click()
+  await waitForReviewFlashProbe(page, 400)
+  const trace = await collectReviewFlashProbe(page)
+  const bad = trace.samples.filter((sample) => sample.blank || sample.blackCenter)
+
+  expect(trace.samples.length).toBeGreaterThan(0)
+  expect(
+    bad,
+    JSON.stringify({ bad: bad.slice(0, 8), first: trace.samples.slice(0, 8), last: trace.samples.slice(-4) }, null, 2),
+  ).toEqual([])
+})
+
+async function openReview(page: Page) {
+  await page.setViewportSize({ width: 960, height: 900 })
+  await page.addInitScript(() => {
+    localStorage.setItem("settings.v3", JSON.stringify({ general: { newLayoutDesigns: true } }))
+  })
+  await mockOpenCodeServer(page, {
+    directory,
+    project: {
+      id: "proj_review_image_flash_regression",
+      worktree: directory,
+      vcs: "git",
+      name: "review-image-flash-regression",
+      time: { created: 1700000000000, updated: 1700000000000 },
+      sandboxes: [],
+    },
+    provider: { all: [], connected: [], default: {} },
+    sessions: [
+      {
+        id: sessionID,
+        slug: "review-image-flash-regression",
+        projectID: "proj_review_image_flash_regression",
+        directory,
+        title,
+        version: "dev",
+        time: { created: 1700000000000, updated: 1700000000000 },
+      },
+    ],
+    vcsDiff: [
+      {
+        file: "src/example.ts",
+        additions: 1,
+        deletions: 1,
+        status: "modified",
+        patch:
+          "diff --git a/src/example.ts b/src/example.ts\n--- a/src/example.ts\n+++ b/src/example.ts\n@@ -1 +1 @@\n-export const value = 'before'\n+export const value = 'after'\n",
+      },
+      {
+        file: imageFile,
+        patch: "",
+        additions: 1,
+        deletions: 0,
+        status: "added",
+      },
+    ],
+    fileContent: async (path) => {
+      if (path !== imageFile) return undefined
+      await new Promise((resolve) => setTimeout(resolve, 250))
+      return {
+        type: "binary",
+        content: "iVBORw0KGgo=",
+        encoding: "base64",
+        mimeType: "image/png",
+      }
+    },
+    fileList: (path) => {
+      if (!path) {
+        return [
+          { name: "assets", path: "assets", absolute: `${directory}/assets`, type: "directory", ignored: false },
+          { name: "src", path: "src", absolute: `${directory}/src`, type: "directory", ignored: false },
+        ]
+      }
+      if (path === "assets") {
+        return [
+          {
+            name: "preview.png",
+            path: imageFile,
+            absolute: `${directory}/${imageFile}`,
+            type: "file",
+            ignored: false,
+          },
+        ]
+      }
+      if (path === "src") {
+        return [
+          {
+            name: "example.ts",
+            path: "src/example.ts",
+            absolute: `${directory}/src/example.ts`,
+            type: "file",
+            ignored: false,
+          },
+        ]
+      }
+      return []
+    },
+    pageMessages: () => ({
+      items: [
+        {
+          info: {
+            id: "msg_review_image_flash_regression",
+            sessionID,
+            role: "user",
+            time: { created: 1700000000000 },
+            summary: { diffs: [] },
+            agent: "build",
+            model: { providerID: "opencode", modelID: "test" },
+          },
+          parts: [
+            {
+              id: "prt_review_image_flash_regression",
+              sessionID,
+              messageID: "msg_review_image_flash_regression",
+              type: "text",
+              text: "Review this change.",
+            },
+          ],
+        },
+      ],
+    }),
+  })
+
+  await page.goto(`/${base64Encode(directory)}/session/${sessionID}`)
+  await expectSessionTitle(page, title)
+  await page.getByRole("button", { name: "Toggle review" }).click()
+  await expectAppVisible(page.locator('#review-panel [data-component="session-review-v2"]'))
+  await expectAppVisible(page.getByRole("button", { name: /preview\.png/ }))
+}
+
+async function installReviewFlashProbe(page: Page) {
+  await page.evaluate(() => {
+    const samples: Array<{
+      observedAtMs: number
+      blank: boolean
+      blackCenter: boolean
+      text: string
+      background: string
+    }> = []
+    const startedAt = performance.now()
+    const sample = () => {
+      const panel = document.querySelector<HTMLElement>('#review-panel [data-component="session-review-v2"]')
+      const rect = panel?.getBoundingClientRect()
+      const center = rect
+        ? document.elementFromPoint(rect.left + rect.width / 2, rect.top + rect.height / 2)
+        : undefined
+      const background = center instanceof Element ? getComputedStyle(center).backgroundColor : ""
+      samples.push({
+        observedAtMs: performance.now() - startedAt,
+        blank: !panel || panel.textContent?.trim().length === 0,
+        blackCenter: background === "rgb(0, 0, 0)",
+        text: panel?.textContent?.trim().slice(0, 80) ?? "",
+        background,
+      })
+      if (performance.now() - startedAt < 500) requestAnimationFrame(sample)
+    }
+    document.addEventListener(
+      "click",
+      (event) => {
+        const target = event.target instanceof Element ? event.target : undefined
+        if (!target?.closest('[data-slot="file-tree-v2-row"]')) return
+        requestAnimationFrame(sample)
+      },
+      { capture: true, once: true },
+    )
+    ;(window as Window & { __reviewImageFlash?: { samples: typeof samples; startedAt: number } }).__reviewImageFlash = {
+      samples,
+      startedAt,
+    }
+  })
+}
+
+async function waitForReviewFlashProbe(page: Page, durationMs: number) {
+  await page.waitForFunction((durationMs) => {
+    const state = (window as Window & { __reviewImageFlash?: { samples: unknown[]; startedAt: number } })
+      .__reviewImageFlash
+    return !!state && state.samples.length > 0 && performance.now() - state.startedAt >= durationMs
+  }, durationMs)
+}
+
+async function collectReviewFlashProbe(page: Page) {
+  return page.evaluate(() => {
+    return (window as Window & { __reviewImageFlash?: { samples: unknown[]; startedAt: number } }).__reviewImageFlash!
+  }) as Promise<{
+    startedAt: number
+    samples: Array<{ observedAtMs: number; blank: boolean; blackCenter: boolean; text: string; background: string }>
+  }>
+}

packages/app/e2e/utils/mock-server.ts

@@ -17,6 +17,8 @@ export interface MockServerConfig {
   todos?: (sessionID: string) => unknown[]
   permissions?: unknown[] | (() => unknown[])
   questions?: unknown[] | (() => unknown[])
+  fileList?: (path: string) => unknown | Promise<unknown>
+  fileContent?: (path: string) => unknown | Promise<unknown>
   sessionStatus?: unknown
 }
 
@@ -56,6 +58,10 @@ export async function mockOpenCodeServer(page: Page, config: MockServerConfig) {
       return json(route, typeof config.questions === "function" ? config.questions() : (config.questions ?? []))
     if (path === "/session/status") return json(route, config.sessionStatus ?? {})
     if (path === "/vcs/diff" && config.vcsDiff) return json(route, config.vcsDiff)
+    if (path === "/file" && config.fileList)
+      return json(route, await config.fileList(url.searchParams.get("path") ?? ""))
+    if (path === "/file/content" && config.fileContent)
+      return json(route, await config.fileContent(url.searchParams.get("path") ?? ""))
     if (emptyObject.has(path)) return json(route, {})
     if (emptyList.has(path)) return json(route, [])
     if (path in staticRoutes) return json(route, staticRoutes[path])

packages/app/src/components/file-tree-v2.tsx

@@ -0,0 +1,421 @@
+import { useFile } from "@/context/file"
+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 { Icon } from "@opencode-ai/ui/v2/icon"
+import {
+  dirsToExpand,
+  pathToFileUrl,
+  shouldListRoot,
+  visibleKind,
+  withFileDragImage,
+  type Filter,
+  type Kind,
+} from "@/components/file-tree"
+
+export type { Kind } from "@/components/file-tree"
+
+const MAX_DEPTH = 128
+
+function visibleNodesForPath(path: string, children: (dir: string) => FileNode[], current: Filter | undefined) {
+  const nodes = children(path)
+  if (!current) return nodes
+
+  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)
+  })
+
+  return out
+}
+
+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
+}
+
+export const kindLabel = (kind: Kind) => {
+  if (kind === "add") return "A"
+  if (kind === "del") return "D"
+  return ""
+}
+
+export const kindChange = (kind: Kind) => {
+  if (kind === "add") return "added"
+  if (kind === "del") return "deleted"
+  return "modified"
+}
+
+const FileTreeNodeV2 = (
+  p: ParentProps &
+    ComponentProps<"div"> &
+    ComponentProps<"button"> & {
+      node: FileNode
+      level: number
+      active?: string
+      draggable: boolean
+      kinds?: ReadonlyMap<string, Kind>
+      marks?: Set<string>
+      as?: "div" | "button"
+    },
+) => {
+  const [local, rest] = splitProps(p, [
+    "node",
+    "level",
+    "active",
+    "draggable",
+    "kinds",
+    "marks",
+    "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,
+      }}
+      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 || local.node.type !== "file") return null
+        return (
+          <span data-slot="file-tree-v2-change" data-change={kindChange(value)}>
+            {kindLabel(value)}
+          </span>
+        )
+      })()}
+    </Dynamic>
+  )
+}
+
+// V2-styled fork of FileTree for the review sidebar. Unlike the v1 tree it never
+// lists unloaded subdirectories, so callers must pass `allowed` (nodes are
+// synthesized from that list) for nested content to appear.
+export default function FileTreeV2(props: {
+  path: string
+  active?: string
+  level?: number
+  allowed?: readonly string[]
+  kinds?: ReadonlyMap<string, Kind>
+  draggable?: boolean
+  onFileClick?: (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>(props.kinds?.keys() ?? [])
+    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,
+    })
+    // Nodes come from the `allowed` filter; skip listing so directories that only
+    // exist on the diff's base branch do not each fail with an error toast.
+    for (const dir of dirs) file.tree.expand(dir, { list: false })
+  })
+
+  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()))
+
+  return (
+    // group/file-tree-v2 scopes the group-hover guide lines below; hosts may add
+    // an outer group with the same name to widen the hover area.
+    <div data-component="file-tree-v2" class="group/file-tree-v2">
+      <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()).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, { list: false }) : file.tree.collapse(node.path)
+                  }
+                >
+                  <Collapsible.Trigger>
+                    <FileTreeNodeV2
+                      node={node}
+                      level={level}
+                      active={props.active}
+                      draggable={draggable()}
+                      kinds={kinds()}
+                      marks={marks()}
+                    >
+                      <div
+                        data-slot="file-tree-v2-chevron"
+                        data-expanded={expanded() ? "" : undefined}
+                        class="size-4 flex items-center justify-center"
+                      >
+                        <Icon name="chevron-down" />
+                      </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}
+                          kinds={props.kinds}
+                          active={props.active}
+                          draggable={props.draggable}
+                          onFileClick={props.onFileClick}
+                          _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}
+                  draggable={draggable()}
+                  kinds={kinds()}
+                  marks={marks()}
+                  as="button"
+                  type="button"
+                  onClick={() => props.onFileClick?.(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>
+  )
+}

packages/app/src/components/file-tree.tsx

@@ -21,13 +21,13 @@ import type { FileNode } from "@opencode-ai/sdk/v2"
 
 const MAX_DEPTH = 128
 
-function pathToFileUrl(filepath: string): string {
+export function pathToFileUrl(filepath: string): string {
   return `file://${encodeFilePath(filepath)}`
 }
 
-type Kind = "add" | "del" | "mix"
+export type Kind = "add" | "del" | "mix"
 
-type Filter = {
+export type Filter = {
   files: Set<string>
   dirs: Set<string>
 }
@@ -78,7 +78,7 @@ const kindDotColor = (kind: Kind) => {
   return "background-color: var(--icon-diff-modified-base)"
 }
 
-const visibleKind = (node: FileNode, kinds?: ReadonlyMap<string, Kind>, marks?: Set<string>) => {
+export 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
@@ -99,7 +99,7 @@ const buildDragImage = (target: HTMLElement) => {
   return image
 }
 
-const withFileDragImage = (event: DragEvent) => {
+export const withFileDragImage = (event: DragEvent) => {
   const image = buildDragImage(event.currentTarget as HTMLElement)
   if (!image) return
   document.body.appendChild(image)

packages/app/src/context/comments.tsx

@@ -85,7 +85,15 @@ function createCommentSessionState(store: Store<CommentStore>, setStore: SetStor
     active: null as CommentFocus | null,
   })
 
-  const all = () => aggregate(store.comments)
+  // Reuse the previous array when contents are unchanged so consumers keep a stable
+  // identity; a fresh array per call cascaded into diff annotation re-renders.
+  let lastAll: LineComment[] = []
+  const all = () => {
+    const next = aggregate(store.comments)
+    if (next.length === lastAll.length && next.every((item, index) => item === lastAll[index])) return lastAll
+    lastAll = next
+    return next
+  }
 
   const setRef = (
     key: "focus" | "active",

packages/app/src/context/file/tree-store.ts

@@ -127,10 +127,14 @@ export function createFileTreeStore(options: TreeStoreOptions) {
     return promise
   }
 
-  const expandDir = (input: string) => {
+  // `list: false` marks a directory expanded without fetching its children, for
+  // trees whose nodes are synthesized from a filter; listing directories that
+  // only exist on a diff's base branch fails and surfaces error toasts.
+  const expandDir = (input: string, behavior?: { list?: boolean }) => {
     const dir = options.normalizeDir(input)
     ensureDir(dir)
     setTree("dir", dir, "expanded", true)
+    if (behavior?.list === false) return
     void listDir(dir)
   }
 

packages/app/src/pages/session.tsx

@@ -24,8 +24,10 @@ import { debounce } from "@solid-primitives/scheduled"
 import { useLocal } from "@/context/local"
 import { FileProvider, selectionFromLines, useFile, type FileSelection, type SelectedLineRange } from "@/context/file"
 import { createStore } from "solid-js/store"
+import type { SessionReviewLineComment } from "@opencode-ai/session-ui/session-review"
 import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
 import { Select } from "@opencode-ai/ui/select"
+import { SelectV2 } from "@opencode-ai/ui/v2/select-v2"
 import { isScrollKeyTarget, scrollKey, scrollKeyOwner } from "@opencode-ai/ui/scroll-view"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { ButtonV2 } from "@opencode-ai/ui/v2/button-v2"
@@ -77,6 +79,10 @@ import { type DiffStyle, SessionReviewTab, type SessionReviewTabProps } from "@/
 import { useSessionLayout } from "@/pages/session/session-layout"
 import { syncSessionModel } from "@/pages/session/session-model-helpers"
 import { SessionSidePanel } from "@/pages/session/session-side-panel"
+import { SessionReviewEmptyChangesV2 } from "@opencode-ai/session-ui/v2/session-review-empty-changes-v2"
+import { SessionReviewEmptyNoGitV2 } from "@opencode-ai/session-ui/v2/session-review-empty-no-git-v2"
+import { ReviewPanelV2 } 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 { useComposerCommands } from "@/pages/session/use-composer-commands"
 import { useSessionCommands } from "@/pages/session/use-session-commands"
@@ -1052,22 +1058,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"
@@ -1076,6 +1082,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>
@@ -1122,6 +1146,16 @@ export default function Page() {
     )
   }
 
+  const reviewEmptyV2 = () => {
+    if ((store.changes === "git" || store.changes === "branch") && !reviewReady()) {
+      return <div class="px-6 py-4 text-text-weak">{language.t("session.review.loadingChanges")}</div>
+    }
+    if (store.changes === "turn" && nogit()) {
+      return <SessionReviewEmptyNoGitV2 pending={gitMutation.isPending} onInitGit={initGit} />
+    }
+    return <SessionReviewEmptyChangesV2 />
+  }
+
   const reviewContent = (input: {
     diffStyle: DiffStyle
     onDiffStyleChange?: (style: DiffStyle) => void
@@ -1155,6 +1189,63 @@ export default function Page() {
     </Show>
   )
 
+  const reviewV2State = createReviewPanelV2State()
+
+  // Getters defer reactive reads to the consuming scope. Eager reads here ran inside
+  // the side panel's Show children and remounted the whole review panel on unrelated
+  // updates such as session switches.
+  const reviewPanelV2Props = () => ({
+    get title() {
+      return changesTitleV2()
+    },
+    get empty() {
+      return reviewEmptyV2()
+    },
+    diffs: reviewDiffs,
+    diffsReady: reviewReady,
+    get activeFile() {
+      return tree.activeDiff
+    },
+    onSelectFile: focusReviewDiff,
+    get diffStyle() {
+      return layout.review.diffStyle()
+    },
+    onDiffStyleChange: layout.review.setDiffStyle,
+    state: reviewV2State,
+    onLineComment: (comment: SessionReviewLineComment) => addCommentToContext({ ...comment, origin: "review" }),
+    onLineCommentUpdate: updateCommentInContext,
+    onLineCommentDelete: removeCommentFromContext,
+    get lineCommentActions() {
+      return reviewCommentActions()
+    },
+    get comments() {
+      return comments.all()
+    },
+    get focusedComment() {
+      return comments.focus()
+    },
+    onFocusedCommentChange: (focus: { file: string; id: string } | null) => {
+      // The preview clears the focus once it has opened the comment; persist the
+      // focused file as the active selection so the preview stays on it. Skip
+      // files outside the current diff set (their focus is cleared unhandled).
+      if (!focus) {
+        const current = comments.focus()
+        if (current && reviewDiffs().some((diff) => diff.file === current.file)) focusReviewDiff(current.file)
+      }
+      comments.setFocus(focus)
+    },
+  })
+
+  const reviewPanelV2 = () => (
+    <div class="flex flex-col h-full overflow-hidden bg-background-stronger contain-strict">
+      {/* The route remounts per session; defer the diff render off the switch critical path
+          like the legacy review tab does. */}
+      <Show when={!store.deferRender}>
+        <ReviewPanelV2 {...reviewPanelV2Props()} />
+      </Show>
+    </div>
+  )
+
   const reviewPanel = () => (
     <div
       classList={{
@@ -2078,7 +2169,7 @@ export default function Page() {
           empty={reviewEmptyText}
           hasReview={hasReview}
           reviewCount={reviewCount}
-          reviewPanel={reviewPanel}
+          reviewPanel={() => (newSessionDesign() ? reviewPanelV2() : reviewPanel())}
           activeDiff={tree.activeDiff}
           focusReviewDiff={focusReviewDiff}
           reviewSnap={ui.reviewSnap}

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)
+  })
+})

packages/app/src/pages/session/v2/review-diff-kinds.ts

@@ -0,0 +1,42 @@
+import type { SnapshotFileDiff, VcsFileDiff } from "@opencode-ai/sdk/v2"
+import type { Kind } from "@/components/file-tree-v2"
+
+export 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: Kind | undefined, b: Kind) => {
+    if (!a) return b
+    if (a === b) return a
+    return "mix" as const
+  }
+
+  const out = new Map<string, Kind>()
+  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("/")
+    parts.slice(0, -1).forEach((_, idx) => {
+      const dir = parts.slice(0, idx + 1).join("/")
+      if (!dir) return
+      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))
+}

packages/app/src/pages/session/v2/review-panel-v2-state.ts

@@ -0,0 +1,40 @@
+import {
+  SESSION_REVIEW_V2_SIDEBAR_WIDTH_DEFAULT,
+  SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX,
+  SESSION_REVIEW_V2_SIDEBAR_WIDTH_MIN,
+  type SessionReviewExpandMode,
+} from "@opencode-ai/session-ui/v2/session-review-v2"
+import { createSignal } from "solid-js"
+import { createStore } from "solid-js/store"
+import { Persist, persisted } from "@/utils/persist"
+
+export function createReviewPanelV2State() {
+  const [store, setStore] = persisted(
+    Persist.global("review-panel-v2"),
+    createStore({
+      sidebarOpened: true,
+      sidebarWidth: SESSION_REVIEW_V2_SIDEBAR_WIDTH_DEFAULT,
+      expandMode: "collapse" as SessionReviewExpandMode,
+    }),
+  )
+  // The filter is transient by design: a persisted filter would silently hide
+  // files after a reload.
+  const [filter, setFilter] = createSignal("")
+
+  return {
+    sidebarOpened: () => store.sidebarOpened,
+    sidebarWidth: () => store.sidebarWidth,
+    filter,
+    setFilter,
+    expandMode: () => store.expandMode,
+    setExpandMode: (mode: SessionReviewExpandMode) => setStore("expandMode", mode),
+    resizeSidebar: (width: number) =>
+      setStore(
+        "sidebarWidth",
+        Math.min(SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX, Math.max(SESSION_REVIEW_V2_SIDEBAR_WIDTH_MIN, width)),
+      ),
+    toggleSidebar: () => setStore("sidebarOpened", (opened) => !opened),
+  }
+}
+
+export type ReviewPanelV2State = ReturnType<typeof createReviewPanelV2State>

packages/app/src/pages/session/v2/review-panel-v2.tsx

@@ -0,0 +1,234 @@
+import { createMemo, createSignal, Show, type JSX } from "solid-js"
+import type { SnapshotFileDiff, VcsFileDiff } from "@opencode-ai/sdk/v2"
+import {
+  SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX,
+  SESSION_REVIEW_V2_SIDEBAR_WIDTH_MIN,
+  SessionReviewV2,
+  SessionReviewV2Sidebar,
+  SessionReviewV2SidebarToggle,
+} from "@opencode-ai/session-ui/v2/session-review-v2"
+import { SessionReviewFilePreviewV2 } from "@opencode-ai/session-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/session-ui/session-review"
+import FileTreeV2 from "@/components/file-tree-v2"
+import { useLanguage } from "@/context/language"
+import { useSDK } from "@/context/sdk"
+import {
+  filterRenderableDiff,
+  filterReviewFiles,
+  reviewDiffKinds,
+  type RenderDiff,
+} from "@/pages/session/v2/review-diff-kinds"
+import type { ReviewPanelV2State } from "@/pages/session/v2/review-panel-v2-state"
+import { applyFileListKeyDown, SessionFileListV2 } from "@/pages/session/v2/session-file-list-v2"
+
+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
+}
+
+export function ReviewPanelV2(props: ReviewPanelV2Props) {
+  const sdk = useSDK()
+
+  const diffs = createMemo(() => props.diffs().filter(filterRenderableDiff))
+  const filteredFiles = createMemo(() =>
+    filterReviewFiles(
+      diffs().map((diff) => diff.file),
+      props.state.filter(),
+    ),
+  )
+  const searching = createMemo(() => props.state.filter().trim().length > 0)
+  const kinds = createMemo(() => reviewDiffKinds(diffs()))
+  const activeDiff = createMemo(() => {
+    // A focused comment takes over the preview until the preview applies it and
+    // clears the focus; the owner then persists the file as the active selection.
+    const focus = props.focusedComment
+    if (focus && diffs().some((diff) => diff.file === focus.file)) return focus.file
+    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()))
+
+  const readFile = 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
+      })
+
+  return (
+    <SessionReviewV2
+      title={props.title}
+      stats={<DiffChanges changes={diffs()} />}
+      empty={props.empty}
+      sidebarOpen={props.state.sidebarOpened()}
+      sidebarToggle={
+        <SessionReviewV2SidebarToggle opened={props.state.sidebarOpened()} onToggle={props.state.toggleSidebar} />
+      }
+      sidebar={
+        // Always mounted: the sidebar header hosts the changes-mode dropdown,
+        // which must stay reachable when the current mode has zero diffs.
+        <ReviewPanelV2Sidebar
+          title={props.title}
+          state={props.state}
+          diffsReady={props.diffsReady}
+          onSelectFile={props.onSelectFile}
+          diffs={diffs}
+          filteredFiles={filteredFiles}
+          searching={searching}
+          kinds={kinds}
+          activeDiff={activeDiff}
+        />
+      }
+      activeFile={activeDiff()}
+      files={filteredFiles()}
+      onSelectFile={props.onSelectFile}
+      diffStyle={props.diffStyle}
+      onDiffStyleChange={props.onDiffStyleChange}
+      expandMode={props.state.expandMode()}
+      onExpandModeChange={props.state.setExpandMode}
+      hasDiffs={diffs().length > 0}
+      preview={
+        // Key on the file path, not the diff object identity, so refreshed diff data
+        // updates the mounted preview instead of remounting the whole viewer.
+        <Show when={activeDiff()} keyed>
+          {(file) => (
+            <Show when={activeItem()}>
+              {(diff) => (
+                <SessionReviewFilePreviewV2
+                  file={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>
+          )}
+        </Show>
+      }
+    />
+  )
+}
+
+function ReviewPanelV2Sidebar(props: {
+  title?: JSX.Element
+  state: ReviewPanelV2State
+  diffsReady: () => boolean
+  onSelectFile: (path: string) => void
+  diffs: () => RenderDiff[]
+  filteredFiles: () => string[]
+  searching: () => boolean
+  kinds: () => ReturnType<typeof reviewDiffKinds>
+  activeDiff: () => string | undefined
+}) {
+  const language = useLanguage()
+  const [explicitHighlight, setExplicitHighlight] = createSignal<string | undefined>()
+  const highlightedPath = createMemo(() => {
+    if (!props.searching()) return undefined
+    const files = props.filteredFiles()
+    if (files.length === 0) return undefined
+    const explicit = explicitHighlight()
+    if (explicit && files.includes(explicit)) return explicit
+    return files[0]
+  })
+
+  const onFilterKeyDown = (event: KeyboardEvent & { currentTarget: HTMLInputElement }) => {
+    if (!props.searching()) return
+    applyFileListKeyDown(event, props.filteredFiles(), highlightedPath(), {
+      onHighlight: setExplicitHighlight,
+      onSelect: props.onSelectFile,
+    })
+  }
+
+  return (
+    <SessionReviewV2Sidebar
+      open={props.state.sidebarOpened()}
+      title={props.title}
+      stats={<DiffChanges changes={props.diffs()} />}
+      filter={props.state.filter()}
+      onFilterChange={props.state.setFilter}
+      onFilterKeyDown={onFilterKeyDown}
+      width={props.state.sidebarWidth()}
+      onWidthChange={props.state.resizeSidebar}
+      minWidth={SESSION_REVIEW_V2_SIDEBAR_WIDTH_MIN}
+      maxWidth={SESSION_REVIEW_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={props.searching()}
+          fallback={
+            <FileTreeV2
+              path=""
+              allowed={props.filteredFiles()}
+              kinds={props.kinds()}
+              draggable={false}
+              active={props.activeDiff()}
+              onFileClick={(node) => props.onSelectFile(node.path)}
+            />
+          }
+        >
+          <Show
+            when={props.filteredFiles().length > 0}
+            fallback={<div class="px-2 py-2 text-12-regular text-text-weak">{language.t("palette.empty")}</div>}
+          >
+            <SessionFileListV2
+              files={props.filteredFiles()}
+              kinds={props.kinds()}
+              active={props.activeDiff()}
+              highlighted={highlightedPath()}
+              onFileClick={(path) => {
+                setExplicitHighlight(path)
+                props.onSelectFile(path)
+              }}
+            />
+          </Show>
+        </Show>
+      </Show>
+    </SessionReviewV2Sidebar>
+  )
+}

packages/app/src/pages/session/v2/session-file-list-v2.tsx

@@ -0,0 +1,109 @@
+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 { kindChange, kindLabel, type Kind } from "@/components/file-tree-v2"
+import { normalizePath } from "@/pages/session/v2/review-diff-kinds"
+
+// Drives the highlight/selection of the flat search-result list from the filter
+// input's keyboard events.
+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()
+}
+
+// Flat variant of FileTreeV2 for filtered results: reuses its data-component and
+// row data-slots on purpose so file-tree-v2.css styles both. data-highlighted has
+// no CSS of its own — it folds into data-selected below and only exists as the
+// scrollIntoView query hook.
+export function SessionFileListV2(props: {
+  files: readonly string[]
+  active?: string
+  highlighted?: string
+  kinds?: ReadonlyMap<string, Kind>
+  onFileClick: (path: string) => void
+}) {
+  const active = () => normalizePath(props.active ?? "")
+  const highlighted = () => normalizePath(props.highlighted ?? "")
+  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"
+    >
+      <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 = () => (normalized.includes("/") ? getDirectory(normalized) : undefined)
+          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)}
+            >
+              <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())}
+                  </span>
+                )}
+              </Show>
+            </button>
+          )
+        }}
+      </For>
+    </div>
+  )
+}

packages/session-ui/src/components/file-media.tsx

@@ -1,5 +1,6 @@
 import type { FileContent } from "@opencode-ai/sdk/v2"
-import { createEffect, createMemo, createResource, Match, on, Show, Switch, type JSX } from "solid-js"
+import { createEffect, createMemo, Match, on, onCleanup, Show, Switch, untrack, type JSX } from "solid-js"
+import { createStore } from "solid-js/store"
 import { useI18n } from "@opencode-ai/ui/context/i18n"
 import {
   dataUrlFromMediaValue,
@@ -30,6 +31,13 @@ function mediaValue(cfg: FileMediaOptions, mode: "image" | "audio") {
 
 export function FileMedia(props: { media?: FileMediaOptions; fallback: () => JSX.Element }) {
   const i18n = useI18n()
+  const [remote, setRemote] = createStore<{
+    key?: string
+    loading?: boolean
+    error?: boolean
+    src?: string
+    mime?: string
+  }>({})
   const cfg = () => props.media
   const kind = createMemo(() => {
     const media = cfg()
@@ -81,50 +89,66 @@ export function FileMedia(props: { media?: FileMediaOptions; fallback: () => JSX
     }
   })
 
-  const [loaded] = createResource(request, async (input) => {
-    return input.readFile(input.path).then(
+  createEffect(() => {
+    const input = request()
+    if (!input) {
+      setRemote({ key: undefined, loading: false, error: false, src: undefined, mime: undefined })
+      return
+    }
+
+    let active = true
+    // Keep the previous media visible while re-reading the same file (e.g. a vcs
+    // diff refresh); only a key change resets to the loading placeholder.
+    if (untrack(() => remote.key) === input.key) setRemote({ loading: true, error: false })
+    else setRemote({ key: input.key, loading: true, error: false, src: undefined, mime: undefined })
+    void input.readFile(input.path).then(
       (result) => {
+        if (!active) return
         const src = dataUrlFromMediaValue(result as any, input.kind)
         if (!src) {
           input.onError?.({ kind: input.kind })
-          return { key: input.key, error: true as const }
+          setRemote({ key: input.key, loading: false, error: true, src: undefined, mime: undefined })
+          return
         }
 
-        return {
+        setRemote({
           key: input.key,
+          loading: false,
+          error: false,
           src,
           mime: input.kind === "audio" ? normalizeMimeType(result?.mimeType) : undefined,
-        }
+        })
       },
       () => {
+        if (!active) return
         input.onError?.({ kind: input.kind })
-        return { key: input.key, error: true as const }
+        setRemote({ key: input.key, loading: false, error: true, src: undefined, mime: undefined })
       },
     )
-  })
 
-  const remote = createMemo(() => {
-    const input = request()
-    const value = loaded()
-    if (!input || !value || value.key !== input.key) return
-    return value
+    onCleanup(() => {
+      active = false
+    })
   })
 
   const src = createMemo(() => {
-    const value = remote()
-    return direct() ?? (value && "src" in value ? value.src : undefined)
+    const input = request()
+    if (!input || remote.key !== input.key || remote.error) return direct()
+    return direct() ?? remote.src
   })
   const status = createMemo(() => {
     if (direct()) return "ready" as const
-    if (!request()) return "idle" as const
-    if (loaded.loading) return "loading" as const
-    if (remote()?.error) return "error" as const
+    const input = request()
+    if (!input) return "idle" as const
+    if (remote.key !== input.key || remote.loading) return "loading" as const
+    if (remote.error) return "error" as const
     if (src()) return "ready" as const
     return "idle" as const
   })
   const audioMime = createMemo(() => {
-    const value = remote()
-    return value && "mime" in value ? value.mime : undefined
+    const input = request()
+    if (!input || remote.key !== input.key) return
+    return remote.mime
   })
 
   const svgSource = createMemo(() => {

packages/session-ui/src/components/file.tsx

@@ -456,11 +456,18 @@ function useAnnotationRerender<A>(opts: {
   current: () => AnnotationTarget<A> | undefined
   annotations: () => A[]
 }) {
+  const applied = new WeakSet<AnnotationTarget<A>>()
   createEffect(() => {
     opts.viewer.rendered()
     const active = opts.current()
     if (!active) return
-    active.setLineAnnotations(opts.annotations())
+    const annotations = opts.annotations()
+    // renderViewer always draws with empty annotations, so skip the extra rerender
+    // when this instance has nothing applied and nothing to apply.
+    if (annotations.length === 0 && !applied.has(active)) return
+    if (annotations.length === 0) applied.delete(active)
+    else applied.add(active)
+    active.setLineAnnotations(annotations)
     active.rerender()
     requestAnimationFrame(() => opts.viewer.find.refresh({ reset: true }))
   })

packages/session-ui/src/components/line-comment-annotations.tsx

@@ -34,7 +34,7 @@ type HoverCommentLine = {
   side?: "additions" | "deletions"
 }
 
-type LineCommentStateProps<T> = {
+export type LineCommentStateProps<T> = {
   opened: Accessor<T | null>
   setOpened: (id: T | null) => void
   selected: Accessor<SelectedLineRange | null>
@@ -45,7 +45,7 @@ type LineCommentStateProps<T> = {
   hoverSelected?: (range: SelectedLineRange) => void
 }
 
-type LineCommentShape = {
+export type LineCommentShape = {
   id: string
   selection: SelectedLineRange
   comment: string
@@ -95,9 +95,14 @@ type DraftProps = {
   submitLabel?: string
 }
 
-export function createLineCommentAnnotationRenderer<T>(props: {
-  renderComment: (comment: T) => CommentProps
-  renderDraft: (range: SelectedLineRange) => DraftProps
+// Generic host machinery shared by the v1 and v2 annotation renderers: each
+// annotation key gets a detached DOM host with its own Solid root, updated in
+// place through a signal so Pierre can reparent the host without re-rendering.
+export function createLineCommentAnnotationRenderer<T, C, D>(props: {
+  renderComment: (comment: T) => C
+  renderDraft: (range: SelectedLineRange) => D
+  commentElement: (view: Accessor<C>) => JSX.Element
+  draftElement: (view: Accessor<D>) => JSX.Element
 }) {
   const nodes = new Map<
     string,
@@ -123,37 +128,7 @@ export function createLineCommentAnnotationRenderer<T>(props: {
           if (next.kind !== "comment") return props.renderComment(active.comment)
           return props.renderComment(next.comment)
         })
-        return (
-          <Show
-            when={view().editor}
-            fallback={
-              <LineComment
-                inline
-                id={view().id}
-                open={view().open}
-                comment={view().comment}
-                selection={view().selection}
-                actions={view().actions}
-                onClick={view().onClick}
-                onMouseEnter={view().onMouseEnter}
-              />
-            }
-          >
-            <LineCommentEditor
-              inline
-              id={view().id}
-              value={view().editor!.value}
-              selection={view().editor!.selection}
-              onInput={view().editor!.onInput}
-              onCancel={view().editor!.onCancel}
-              onSubmit={view().editor!.onSubmit}
-              onPopoverFocusOut={view().editor!.onPopoverFocusOut}
-              cancelLabel={view().editor!.cancelLabel}
-              submitLabel={view().editor!.submitLabel}
-              mention={view().editor!.mention}
-            />
-          </Show>
-        )
+        return props.commentElement(view)
       }
 
       const view = createMemo(() => {
@@ -161,18 +136,7 @@ export function createLineCommentAnnotationRenderer<T>(props: {
         if (next.kind !== "draft") return props.renderDraft(active.range)
         return props.renderDraft(next.range)
       })
-      return (
-        <LineCommentEditor
-          inline
-          value={view().value}
-          selection={view().selection}
-          onInput={view().onInput}
-          onCancel={view().onCancel}
-          onSubmit={view().onSubmit}
-          onPopoverFocusOut={view().onPopoverFocusOut}
-          mention={view().mention}
-        />
-      )
+      return props.draftElement(view)
     }, host)
 
     const node = { host, dispose, setMeta: setCurrent }
@@ -205,6 +169,55 @@ export function createLineCommentAnnotationRenderer<T>(props: {
   return { render, reconcile, cleanup }
 }
 
+function lineCommentElement(view: Accessor<CommentProps>) {
+  return (
+    <Show
+      when={view().editor}
+      fallback={
+        <LineComment
+          inline
+          id={view().id}
+          open={view().open}
+          comment={view().comment}
+          selection={view().selection}
+          actions={view().actions}
+          onClick={view().onClick}
+          onMouseEnter={view().onMouseEnter}
+        />
+      }
+    >
+      <LineCommentEditor
+        inline
+        id={view().id}
+        value={view().editor!.value}
+        selection={view().editor!.selection}
+        onInput={view().editor!.onInput}
+        onCancel={view().editor!.onCancel}
+        onSubmit={view().editor!.onSubmit}
+        onPopoverFocusOut={view().editor!.onPopoverFocusOut}
+        cancelLabel={view().editor!.cancelLabel}
+        submitLabel={view().editor!.submitLabel}
+        mention={view().editor!.mention}
+      />
+    </Show>
+  )
+}
+
+function lineCommentDraftElement(view: Accessor<DraftProps>) {
+  return (
+    <LineCommentEditor
+      inline
+      value={view().value}
+      selection={view().selection}
+      onInput={view().onInput}
+      onCancel={view().onCancel}
+      onSubmit={view().onSubmit}
+      onPopoverFocusOut={view().onPopoverFocusOut}
+      mention={view().mention}
+    />
+  )
+}
+
 export function createLineCommentState<T>(props: LineCommentStateProps<T>) {
   const [state, setState] = createStore({
     draft: "",
@@ -314,7 +327,9 @@ export function createLineCommentController<T extends LineCommentShape>(
 ): {
   note: ReturnType<typeof createLineCommentState<string>>
   annotations: Accessor<DiffLineAnnotation<LineCommentAnnotationMeta<T>>[]>
-  renderAnnotation: ReturnType<typeof createManagedLineCommentAnnotationRenderer<T>>["renderAnnotation"]
+  renderAnnotation: ReturnType<
+    typeof createManagedLineCommentAnnotationRenderer<T, CommentProps, DraftProps>
+  >["renderAnnotation"]
   renderGutterUtility: ReturnType<typeof createLineCommentGutterRenderer>
   onLineSelected: (range: SelectedLineRange | null) => void
   onLineSelectionEnd: (range: SelectedLineRange | null) => void
@@ -324,7 +339,9 @@ export function createLineCommentController<T extends LineCommentShape>(
 ): {
   note: ReturnType<typeof createLineCommentState<string>>
   annotations: Accessor<LineCommentAnnotation<T>[]>
-  renderAnnotation: ReturnType<typeof createManagedLineCommentAnnotationRenderer<T>>["renderAnnotation"]
+  renderAnnotation: ReturnType<
+    typeof createManagedLineCommentAnnotationRenderer<T, CommentProps, DraftProps>
+  >["renderAnnotation"]
   renderGutterUtility: ReturnType<typeof createLineCommentGutterRenderer>
   onLineSelected: (range: SelectedLineRange | null) => void
   onLineSelectionEnd: (range: SelectedLineRange | null) => void
@@ -353,8 +370,10 @@ export function createLineCommentController<T extends LineCommentShape>(
           draftKey: props.draftKey,
         })
 
-  const { renderAnnotation } = createManagedLineCommentAnnotationRenderer<T>({
+  const { renderAnnotation } = createManagedLineCommentAnnotationRenderer<T, CommentProps, DraftProps>({
     annotations,
+    commentElement: lineCommentElement,
+    draftElement: lineCommentDraftElement,
     renderComment: (comment) => {
       const edit = () => note.openEditor(comment.id, comment.selection, comment.comment)
       const remove = () => {
@@ -471,77 +490,111 @@ export function createLineCommentAnnotations<T>(
   const line = (range: SelectedLineRange) => Math.max(range.start, range.end)
 
   if ("getSide" in props) {
-    return createMemo<DiffLineAnnotation<LineCommentAnnotationMeta<T>>[]>(() => {
+    return createMemo<DiffLineAnnotation<LineCommentAnnotationMeta<T>>[]>(
+      () => {
+        const list = props.comments().map((comment) => {
+          const range = props.getCommentSelection(comment)
+          return {
+            side: props.getSide(range),
+            lineNumber: line(range),
+            metadata: {
+              kind: "comment",
+              key: `comment:${props.getCommentId(comment)}`,
+              comment,
+            } satisfies LineCommentAnnotationMeta<T>,
+          }
+        })
+
+        const range = props.draftRange()
+        if (!range) return list
+
+        return [
+          ...list,
+          {
+            side: props.getSide(range),
+            lineNumber: line(range),
+            metadata: {
+              kind: "draft",
+              key: `draft:${props.draftKey()}`,
+              range,
+            } satisfies LineCommentAnnotationMeta<T>,
+          },
+        ]
+      },
+      [],
+      // Stable identity for unchanged annotations avoids no-op diff rerenders downstream.
+      { equals: sameAnnotationLists },
+    )
+  }
+
+  return createMemo<LineCommentAnnotation<T>[]>(
+    () => {
       const list = props.comments().map((comment) => {
         const range = props.getCommentSelection(comment)
-        return {
-          side: props.getSide(range),
+        const entry: LineCommentAnnotation<T> = {
           lineNumber: line(range),
           metadata: {
             kind: "comment",
             key: `comment:${props.getCommentId(comment)}`,
             comment,
-          } satisfies LineCommentAnnotationMeta<T>,
+          },
         }
+
+        return entry
       })
 
       const range = props.draftRange()
       if (!range) return list
 
-      return [
-        ...list,
-        {
-          side: props.getSide(range),
-          lineNumber: line(range),
-          metadata: {
-            kind: "draft",
-            key: `draft:${props.draftKey()}`,
-            range,
-          } satisfies LineCommentAnnotationMeta<T>,
-        },
-      ]
-    })
-  }
-
-  return createMemo<LineCommentAnnotation<T>[]>(() => {
-    const list = props.comments().map((comment) => {
-      const range = props.getCommentSelection(comment)
-      const entry: LineCommentAnnotation<T> = {
+      const draft: LineCommentAnnotation<T> = {
         lineNumber: line(range),
         metadata: {
-          kind: "comment",
-          key: `comment:${props.getCommentId(comment)}`,
-          comment,
+          kind: "draft",
+          key: `draft:${props.draftKey()}`,
+          range,
         },
       }
 
-      return entry
-    })
-
-    const range = props.draftRange()
-    if (!range) return list
+      return [...list, draft]
+    },
+    [],
+    { equals: sameAnnotationLists },
+  )
+}
 
-    const draft: LineCommentAnnotation<T> = {
-      lineNumber: line(range),
-      metadata: {
-        kind: "draft",
-        key: `draft:${props.draftKey()}`,
-        range,
-      },
-    }
+type AnnotationListItem = {
+  lineNumber: number
+  side?: unknown
+  metadata: { kind: string; key: string; comment?: unknown; range?: unknown }
+}
 
-    return [...list, draft]
+function sameAnnotationLists(previous: AnnotationListItem[], next: AnnotationListItem[]) {
+  if (previous.length !== next.length) return false
+  return previous.every((item, index) => {
+    const other = next[index]!
+    return (
+      item.lineNumber === other.lineNumber &&
+      item.side === other.side &&
+      item.metadata.kind === other.metadata.kind &&
+      item.metadata.key === other.metadata.key &&
+      item.metadata.comment === other.metadata.comment &&
+      item.metadata.range === other.metadata.range
+    )
   })
 }
 
-export function createManagedLineCommentAnnotationRenderer<T>(props: {
+export function createManagedLineCommentAnnotationRenderer<T, C, D>(props: {
   annotations: Accessor<LineCommentAnnotation<T>[]>
-  renderComment: (comment: T) => CommentProps
-  renderDraft: (range: SelectedLineRange) => DraftProps
+  renderComment: (comment: T) => C
+  renderDraft: (range: SelectedLineRange) => D
+  commentElement: (view: Accessor<C>) => JSX.Element
+  draftElement: (view: Accessor<D>) => JSX.Element
 }) {
-  const renderer = createLineCommentAnnotationRenderer<T>({
+  const renderer = createLineCommentAnnotationRenderer<T, C, D>({
     renderComment: props.renderComment,
     renderDraft: props.renderDraft,
+    commentElement: props.commentElement,
+    draftElement: props.draftElement,
   })
 
   createEffect(() => {

packages/session-ui/src/pierre/comment-hover.ts

@@ -39,10 +39,18 @@ export function createHoverCommentUtility(props: {
     line = next
   }
 
-  const loop = () => {
-    if (!button.isConnected) return
+  // The hovered line changes when the pointer moves or when content scrolls under
+  // a stationary pointer, so track both with passive listeners instead of polling
+  // every animation frame. There is no teardown hook for this utility; like the
+  // rAF loop this replaced, the listeners self-detach on the first event after
+  // the button leaves the DOM.
+  const onHoverInvalidated = () => {
+    if (!button.isConnected) {
+      document.removeEventListener("pointermove", onHoverInvalidated)
+      document.removeEventListener("scroll", onHoverInvalidated, true)
+      return
+    }
     sync()
-    requestAnimationFrame(loop)
   }
 
   const open = () => {
@@ -51,7 +59,8 @@ export function createHoverCommentUtility(props: {
     props.onSelect(next)
   }
 
-  requestAnimationFrame(loop)
+  document.addEventListener("pointermove", onHoverInvalidated, { passive: true })
+  document.addEventListener("scroll", onHoverInvalidated, { passive: true, capture: true })
   button.addEventListener("mouseenter", sync)
   button.addEventListener("mousemove", sync)
   button.addEventListener("pointerdown", (event) => {

packages/session-ui/src/v2/components/line-comment-annotations-v2.tsx

@@ -0,0 +1,212 @@
+import { type SelectedLineRange } from "@pierre/diffs"
+import { Show, type Accessor, type JSX } from "solid-js"
+import {
+  createLineCommentAnnotations,
+  createLineCommentGutterRenderer,
+  createLineCommentState,
+  createManagedLineCommentAnnotationRenderer,
+  type LineCommentShape,
+  type LineCommentStateProps,
+} from "../../components/line-comment-annotations"
+import { useI18n } from "@opencode-ai/ui/context/i18n"
+import { cloneSelectedLineRange, formatSelectedLineLabel } from "../../pierre/selection-bridge"
+import { LineCommentEditorV2, LineCommentV2 } from "@opencode-ai/ui/v2/line-comment-v2"
+
+type LineCommentControllerV2Props<T extends LineCommentShape> = {
+  comments: Accessor<T[]>
+  draftKey: Accessor<string>
+  label: string
+  state: LineCommentStateProps<string>
+  getSide: (range: SelectedLineRange) => "additions" | "deletions"
+  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
+}
+
+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
+  cancelLabel?: string
+  submitLabel?: string
+}
+
+function lineCommentElementV2(view: Accessor<CommentProps>) {
+  return (
+    <Show
+      when={view().editor}
+      fallback={
+        <div
+          data-prevent-autofocus=""
+          data-comment-id={view().id}
+          onMouseDown={(event) => event.stopPropagation()}
+          onClick={view().onClick}
+          onMouseEnter={view().onMouseEnter}
+        >
+          <LineCommentV2 comment={view().comment} selection={view().selection} actions={view().actions} />
+        </div>
+      }
+    >
+      <div data-prevent-autofocus="" data-comment-id={view().id} 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>
+  )
+}
+
+function lineCommentDraftElementV2(view: Accessor<DraftProps>) {
+  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}
+        cancelLabel={view().cancelLabel}
+        submitLabel={view().submitLabel}
+      />
+    </div>
+  )
+}
+
+export function createLineCommentControllerV2<T extends LineCommentShape>(props: LineCommentControllerV2Props<T>) {
+  const i18n = useI18n()
+  const note = createLineCommentState<string>(props.state)
+
+  const annotations = createLineCommentAnnotations({
+    comments: props.comments,
+    getCommentId: (comment) => comment.id,
+    getCommentSelection: (comment) => comment.selection,
+    draftRange: note.commenting,
+    draftKey: props.draftKey,
+    getSide: props.getSide,
+  })
+
+  const { renderAnnotation } = createManagedLineCommentAnnotationRenderer<T, CommentProps, DraftProps>({
+    annotations,
+    commentElement: lineCommentElementV2,
+    draftElement: lineCommentDraftElementV2,
+    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()
+                },
+                cancelLabel: i18n.t("ui.lineComment.cancel"),
+                submitLabel: props.editSubmitLabel,
+              }
+            : undefined
+        },
+        onMouseEnter: () => note.hoverComment(comment.selection),
+        onClick: () => {
+          if (note.isEditing(comment.id)) return
+          note.toggleComment(comment.id, comment.selection)
+        },
+      }
+    },
+    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()
+      },
+      cancelLabel: i18n.t("ui.lineComment.cancel"),
+      submitLabel: i18n.t("ui.lineComment.submit"),
+    }),
+  })
+
+  const renderGutterUtility = createLineCommentGutterRenderer({
+    label: props.label,
+    getSelectedRange: () => {
+      if (note.opened()) return null
+      return 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) {
+      note.cancelDraft()
+      return
+    }
+
+    note.openDraft(range)
+  }
+
+  const onLineNumberSelectionEnd = (range: SelectedLineRange | null) => {
+    if (!range) return
+    note.openDraft(range)
+  }
+
+  return {
+    annotations,
+    renderAnnotation,
+    renderGutterUtility,
+    onLineSelected,
+    onLineSelectionEnd,
+    onLineNumberSelectionEnd,
+  }
+}

packages/session-ui/src/v2/components/session-review-empty-changes-v2.tsx

@@ -0,0 +1,17 @@
+import { useI18n } from "@opencode-ai/ui/context/i18n"
+import { Icon } from "@opencode-ai/ui/v2/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>
+  )
+}

packages/session-ui/src/v2/components/session-review-empty-no-git-v2.tsx

@@ -0,0 +1,28 @@
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { useI18n } from "@opencode-ai/ui/context/i18n"
+import { ButtonV2 } from "@opencode-ai/ui/v2/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>
+  )
+}

packages/session-ui/src/v2/components/session-review-file-preview-v2.tsx

@@ -0,0 +1,282 @@
+import { getDirectory, getFilename } from "@opencode-ai/core/util/path"
+import type { SelectedLineRange } from "@pierre/diffs"
+import { DiffChanges } from "@opencode-ai/ui/v2/diff-changes-v2"
+import { FileIcon } from "@opencode-ai/ui/file-icon"
+import { useFileComponent } from "@opencode-ai/ui/context/file"
+import { useI18n } from "@opencode-ai/ui/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, onCleanup, 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 "@opencode-ai/ui/v2/line-comment-v2"
+import { MenuV2 } from "@opencode-ai/ui/v2/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>
+  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()
+  let scrollRef: HTMLDivElement | undefined
+  let focusToken = 0
+
+  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,
+    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,
+  })
+
+  onCleanup(() => {
+    focusToken++
+  })
+
+  createEffect(() => {
+    const focus = props.focusedComment
+    if (!focus) return
+    if (focus.file !== props.file) {
+      // The focused file has no mounted preview (e.g. not in the current diff
+      // set); clear the focus anyway so it cannot hijack a later diff refresh.
+      // V1 clears unconditionally the same way.
+      untrack(() => {
+        const token = focusToken
+        requestAnimationFrame(() => {
+          if (token !== focusToken) return
+          props.onFocusedCommentChange?.(null)
+        })
+      })
+      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))
+
+      // The diff renders asynchronously, so poll for the comment anchor before
+      // scrolling; clear the focus once handled so revisiting the file does not
+      // re-open a stale comment (mirrors the v1 review behavior).
+      focusToken++
+      const token = focusToken
+      const scrollTo = (attempt: number) => {
+        if (token !== focusToken) return
+        const anchor = scrollRef?.querySelector(`[data-comment-id="${focus.id}"]`)
+        if (anchor instanceof HTMLElement) {
+          anchor.scrollIntoView({ block: "center" })
+          return
+        }
+        if (attempt >= 120) return
+        requestAnimationFrame(() => scrollTo(attempt + 1))
+      }
+      requestAnimationFrame(() => scrollTo(0))
+      requestAnimationFrame(() => {
+        if (token !== focusToken) return
+        props.onFocusedCommentChange?.(null)
+      })
+    })
+  })
+
+  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"}
+      enableLineSelection={lineCommentsEnabled()}
+      enableGutterUtility={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}
+      renderGutterUtility={lineCommentsEnabled() ? commentsUi.renderGutterUtility : 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
+        ref={(el) => {
+          scrollRef = el
+        }}
+        data-slot="session-review-v2-diff-scroll"
+      >
+        <Show
+          when={diffCanRender() || mediaKind()}
+          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>
+      </div>
+    </>
+  )
+}

packages/session-ui/src/v2/components/session-review-v2.css

@@ -0,0 +1,432 @@
+[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;
+}
+
+[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));
+}
+
+[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar"][aria-hidden="true"] {
+  border-right-width: 0;
+}
+
+[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));
+}
+
+[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;
+}
+
+[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-slot="session-review-v2-sidebar-title"]
+  [data-component="select-v2-root"] {
+  width: fit-content;
+  max-width: 100%;
+  min-width: 0;
+}
+
+[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;
+}
+
+[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;
+}
+
+[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar-tree"] {
+  flex: 1;
+  min-height: 0;
+}
+
+[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar-tree"] .scroll-view__viewport {
+  padding: 0 8px 12px;
+}
+
+[data-component="session-review-v2-sidebar-root"] [data-slot="session-review-v2-sidebar-tree"] .scroll-view__thumb {
+  width: 16px;
+}
+
+[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));
+}
+
+[data-component="session-review-v2-sidebar-root"]
+  [data-slot="session-review-v2-sidebar-tree"]
+  .scroll-view__thumb:hover::after,
+[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%;
+}
+
+[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"] {
+  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-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);
+}

packages/session-ui/src/v2/components/session-review-v2.tsx

@@ -0,0 +1,322 @@
+import { IconButton } from "@opencode-ai/ui/icon-button"
+import { useI18n } from "@opencode-ai/ui/context/i18n"
+import { SegmentedControlItemV2, SegmentedControlV2 } from "@opencode-ai/ui/v2/segmented-control-v2"
+import { TextInputV2 } from "@opencode-ai/ui/v2/text-input-v2"
+import { KeybindV2 } from "@opencode-ai/ui/v2/keybind-v2"
+import { Icon } 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 type { SessionReviewDiffStyle } from "../../components/session-review"
+import { ResizeHandle } from "@opencode-ai/ui/resize-handle"
+import { ScrollView } from "@opencode-ai/ui/scroll-view"
+import { makeEventListener } from "@solid-primitives/event-listener"
+import { Show, createEffect, createMemo, createSignal, type JSX } from "solid-js"
+import "./session-review-v2.css"
+
+export const SESSION_REVIEW_V2_SIDEBAR_WIDTH_DEFAULT = 240
+export const SESSION_REVIEW_V2_SIDEBAR_WIDTH_MIN = 200
+export const SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX = 480
+
+export type SessionReviewExpandMode = "expand" | "collapse"
+
+export type SessionReviewV2Props = {
+  title?: JSX.Element
+  stats?: JSX.Element
+  empty?: JSX.Element
+  sidebarOpen?: boolean
+  sidebar?: JSX.Element
+  sidebarToggle?: 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
+}
+
+export type SessionReviewV2SidebarProps = {
+  open: boolean
+  title?: JSX.Element
+  stats?: JSX.Element
+  filter: string
+  onFilterChange: (value: string) => void
+  onFilterKeyDown?: JSX.EventHandlerUnion<HTMLInputElement, KeyboardEvent>
+  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 ?? SESSION_REVIEW_V2_SIDEBAR_WIDTH_DEFAULT
+  const minWidth = () => props.minWidth ?? SESSION_REVIEW_V2_SIDEBAR_WIDTH_MIN
+  const maxWidth = () => props.maxWidth ?? SESSION_REVIEW_V2_SIDEBAR_WIDTH_MAX
+
+  createEffect(() => {
+    if (!resizing()) return
+    const stop = () => setResizing(false)
+    makeEventListener(document, "pointerup", stop)
+    makeEventListener(document, "pointercancel", stop)
+  })
+
+  return (
+    <div data-component="session-review-v2-sidebar-root">
+      <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>
+            {props.stats}
+          </div>
+          <div data-slot="session-review-v2-sidebar-filter">
+            <TextInputV2
+              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 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
+  // Memoize slot getters so Show conditions do not instantiate throwaway elements.
+  const title = createMemo(() => props.title)
+  const stats = createMemo(() => props.stats)
+
+  const cycle = (file: string | undefined) => {
+    if (!file) return
+    props.onSelectFile(file)
+  }
+
+  // The prev/next tooltips advertise < and >; keep the keys working while the
+  // pane is mounted, but never while typing in an input or comment editor.
+  makeEventListener(document, "keydown", (event) => {
+    if (event.defaultPrevented || event.ctrlKey || event.metaKey || event.altKey) return
+    if (event.key !== "<" && event.key !== ">") return
+    const target = event.target
+    if (target instanceof HTMLElement && (target.isContentEditable || target.closest("input, textarea, select"))) return
+    if (!props.hasDiffs || !canCycle()) return
+    event.preventDefault()
+    cycle(event.key === "<" ? prev() : next())
+  })
+
+  return (
+    <div data-component="session-review-v2">
+      <div data-slot="session-review-v2-body">
+        {props.sidebar}
+
+        <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">
+                {props.sidebarToggle}
+                <Show when={showCollapsedMeta()}>
+                  <div data-slot="session-review-v2-toolbar-collapsed-meta">
+                    <Show when={title()}>
+                      <div data-slot="session-review-v2-toolbar-title">{title()}</div>
+                    </Show>
+                    {stats()}
+                    <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">
+                  <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={props.expandMode}
+                  onChange={(value) => {
+                    if (value !== "expand" && value !== "collapse") return
+                    props.onExpandModeChange(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")}>
+                      <Icon name="expand" />
+                    </SegmentedControlItemV2>
+                  </TooltipV2>
+                  <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
+                    <SegmentedControlItemV2 value="collapse" aria-label={i18n.t("ui.sessionReviewV2.hideNonDiffLines")}>
+                      <Icon 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")}>
+                        <Icon name="unified" />
+                      </SegmentedControlItemV2>
+                    </TooltipV2>
+                    <TooltipV2 openDelay={2000} value={i18n.t("ui.sessionReviewV2.splitDiff")}>
+                      <SegmentedControlItemV2 value="split" aria-label={i18n.t("ui.sessionReviewV2.splitDiff")}>
+                        <Icon name="split" />
+                      </SegmentedControlItemV2>
+                    </TooltipV2>
+                  </SegmentedControlV2>
+                </Show>
+              </div>
+            </div>
+            <Show when={props.activeFile} 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={<Icon name="filetree" />}
+      />
+    </TooltipV2>
+  )
+}

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 {

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">) => {
@@ -72,10 +75,10 @@ export function scrollTopFromThumbPointer(input: {
 
 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",
@@ -96,16 +99,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
@@ -240,9 +264,15 @@ export function ScrollView(props: ScrollViewProps) {
         data-scrollable
         onScroll={(e) => {
           updateThumb()
+          markScrolling()
           if (typeof events.onScroll === "function") events.onScroll(e as any)
         }}
-        onWheel={events.onWheel as any}
+        onWheel={(e) => {
+          markScrolling()
+          const handler = events.onWheel
+          if (typeof handler === "function") handler(e as any)
+          if (Array.isArray(handler)) handler[0](handler[1], e as any)
+        }}
         onTouchStart={events.onTouchStart as any}
         onTouchMove={events.onTouchMove as any}
         onTouchEnd={events.onTouchEnd as any}
@@ -266,7 +296,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`,

packages/ui/src/i18n/en.ts

@@ -15,6 +15,23 @@ 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.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}}",
@@ -35,6 +52,7 @@ export const dict: Record<string, string> = {
   "ui.lineComment.editorLabel.suffix": "",
   "ui.lineComment.placeholder": "Add comment",
   "ui.lineComment.submit": "Comment",
+  "ui.lineComment.cancel": "Cancel",
 
   "ui.sessionTurn.steps.show": "Show steps",
   "ui.sessionTurn.steps.hide": "Hide steps",

packages/ui/src/v2/components/file-tree-v2.css

@@ -0,0 +1,120 @@
+[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"] [data-slot="file-tree-v2-change"][data-change="modified"] {
+  opacity: 0;
+}
+
+[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);
+}

packages/ui/src/v2/components/icon.tsx

@@ -57,6 +57,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"/>`,
+  },
   check: {
     viewBox: "0 0 16 16",
     body: `<path d="M3.53613 8.17857L6.39328 11.75L12.4647 4.25" stroke="currentColor"/>`,
@@ -93,6 +97,26 @@ 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"/>`,
+  },
+  split: {
+    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"/>`,
+  },
+  unified: {
+    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"/>`,
+  },
+  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"/>`,
+  },
   "outline-sliders": {
     viewBox: "0 0 16 16",
     body: `<path d="M11.7779 4.66675H14.4446M11.7779 4.66675C11.7779 5.77132 10.8825 6.66675 9.77789 6.66675C8.67332 6.66675 7.77789 5.77132 7.77789 4.66675M11.7779 4.66675C11.7779 3.56218 10.8825 2.66675 9.77789 2.66675C8.67332 2.66675 7.77789 3.56218 7.77789 4.66675M1.55566 4.66675H7.77789M4.22233 11.3334H1.55566M4.22233 11.3334C4.22233 12.438 5.11776 13.3334 6.22233 13.3334C7.3269 13.3334 8.22233 12.438 8.22233 11.3334M4.22233 11.3334C4.22233 10.2288 5.11776 9.33341 6.22233 9.33341C7.3269 9.33341 8.22233 10.2288 8.22233 11.3334M14.4446 11.3334H8.22233" stroke="currentColor"/>`,

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);

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>