@young1lin/dsh-ui-gitworkbench 0.1.5 → 0.1.7

package/src/client/GitWorkbenchPanel.tsx

@@ -47,7 +47,7 @@
  * All copy resolves through the app's locale runtime (`t`), so the panel follows
  * the user's language preference.
  */
-import { useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, type CSSProperties, type Dispatch, type PointerEvent as ReactPointerEvent, type ReactNode, type Ref, type SetStateAction } from 'react'
+import { Fragment, useCallback, useEffect, useMemo, useRef, useState, useSyncExternalStore, type CSSProperties, type Dispatch, type KeyboardEvent as ReactKeyboardEvent, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type ReactNode, type Ref, type SetStateAction } from 'react'
 import { createPortal } from 'react-dom'
 import type { PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
 import {
@@ -56,6 +56,23 @@ import {
   type Appearance, type ColorMode, type StyleEntry, type StyleScope, type StyleSettings, type ThemeFamily,
 } from './themes.ts'
 import { attachWordRanges, gutterSides, overlayRanges, parseRows, type Row, type RowWithRanges } from './diff-model.ts'
+import { parsePatch } from '../patch-model.ts'
+import { alignRows, blockCount, blockIsWholeFile, blockLines, blockTally, sideBodyState, type SideCell, type SideRow } from './side-rows.ts'
+import { countBlocks, unifiedBlocks } from './diff-nav.ts'
+import { clampPane, neighbourWidth } from './pane-size.ts'
+import { COMMIT_ROW_H, DEFAULT_HISTORY_LAYOUT, isHistoryLayout, type HistoryLayout } from './history-layout.ts'
+import { useChangeNav } from './use-change-nav.ts'
+import {
+  applySaveOk, applySides, armEdit, armRefusal, DISARMED, editableSides, gateLeave, isDirty,
+  LEAVE_GUARD_CLEAR, leaveAnswered, leaveAsked, markConflict, paneDirtyReport, reloadSides, resetSides,
+  type EditState, type LeaveGuard, type WriteResult,
+} from './side-edit.ts'
+import { FileBrowser } from './FileBrowser.tsx'
+import { decodePlaces, encodePlaces, placeAt, withPlace, type FilesPlace, type FilesPlaces } from './files-place.ts'
+import { HIGHLIGHT_IDLE_MS, HIGHLIGHT_LINE_CAP, useIdleValue } from './idle-value.ts'
+import { PathDirGlyph, PathFileGlyph } from './glyphs.tsx'
+import { detectIndent } from './indent.ts'
+import { CodeEditor } from './CodeEditor.tsx'
 import { layoutGraph, type GraphRow } from './commit-graph.ts'
 import { formatCommitDate } from './commit-filter.ts'
 import { chipsFromFilter, emptyQueryFilter, parseLogQuery, removeChip, serializeLogQuery } from './log-filter-query.ts'
@@ -71,8 +88,8 @@ import {
   fileCheckState, nextAction, nextBatch, pathsFor, rollUp, settledTicks, withPendingTicks,
   type CheckState, type Tick, type TickAction,
 } from './stage-tree.ts'
-import { grammarLoadCount, highlightForRows, shikiLangOf, shikiThemeOf, subscribeGrammarLoaded, type HighlightRun } from './highlight.ts'
-import { badgeRepeatsBranch, bindingChanged, branchOfWorktree, probesClosedBinding, samePath, showsPending, splitPath, turnSettled, viewedPath } from './worktree-view.ts'
+import { grammarLoadCount, highlightFile, highlightForRows, highlightWholeFile, shikiLangOf, shikiThemeOf, subscribeGrammarLoaded, type HighlightRun } from './highlight.ts'
+import { badgeRepeatsBranch, bindingChanged, branchOfWorktree, pathKey, probesClosedBinding, samePath, showsPending, splitPath, turnSettled, viewedPath } from './worktree-view.ts'
 import { BUSY_DELAY_MS, BUSY_HOLD_MS, holdRemaining, quietlyDisabled } from './op-feedback.ts'
 import type { WorkbenchKey } from './locales.ts'
 import css from './GitWorkbenchPanel.module.css'
@@ -186,10 +203,12 @@ export interface SyncStatus {
   readonly hasRemote: boolean
 }
 
-/** Why a write operation failed, in terms the drawer can explain. */
+/** Why a write operation failed, in terms the drawer can explain. `stale` is
+ *  a sha the host re-derived and refused; `invalid` an argument combination
+ *  the host rejected before running anything. */
 export type GitOpFailure =
   | 'auth' | 'network' | 'no-upstream' | 'diverged' | 'conflict'
-  | 'nothing-to-commit' | 'dirty' | 'unknown'
+  | 'nothing-to-commit' | 'dirty' | 'stale' | 'invalid' | 'unknown'
 
 export interface GitOpResult {
   readonly ok: boolean
@@ -200,32 +219,145 @@ export interface GitOpResult {
 }
 
 /** The host endpoints under `gitWorkbench/` that change something. */
-export type GitOpName = 'stage' | 'unstage' | 'commit' | 'fetch' | 'pull' | 'push' | 'discardFile'
+export type GitOpName = 'stage' | 'unstage' | 'commit' | 'fetch' | 'pull' | 'push' | 'discardFile' | 'applyBlocks'
 
 /** Extra arguments an operation needs beyond the worktree path. */
 export interface GitOpPayload {
   readonly paths?: readonly string[]
   readonly message?: string
   readonly amend?: boolean
-  readonly mode?: 'ff-only' | 'rebase' | 'merge'
-  /** `discardFile` only, and deliberately singular: the one irreversible thing
-   *  the drawer does takes one file per call, so a mistaken click costs one
-   *  file. */
+  /** `pull` picks how to integrate; `applyBlocks` which block mutation. One
+   *  field serves both because the payload is a flat bag keyed by op — the
+   *  host narrows and validates it per endpoint. */
+  readonly mode?: 'ff-only' | 'rebase' | 'merge' | BlockMode
+  /** `discardFile` and `applyBlocks`, and deliberately singular: the one
+   *  irreversible thing the drawer does takes one file per call, so a mistaken
+   *  click costs one file. */
   readonly path?: string
   /** `discardFile` only: the effect the confirmation stated. The host refuses
    *  if the file changed underneath the dialog and now means something else. */
   readonly expectedEffect?: string
+  /** `applyBlocks` only: the layer whose diff the `diffSha` is over, and the
+   *  block's hunk-line indices (`side-rows.blockLines`). The host re-fetches
+   *  that layer's diff and refuses unless the sha still matches. */
+  readonly layer?: SideLayer
+  readonly diffSha?: string
+  readonly lines?: readonly number[]
 }
 
 export type { DiscardAnswer, DiscardNext, DiscardPreview } from './discard-flow.ts'
+export type { WriteResult } from './side-edit.ts'
+
+/** Which side of the index a side-by-side pane shows: `unstaged` is
+ *  index→worktree (the editable side), `staged` is HEAD→index (read-only). */
+export type SideLayer = 'unstaged' | 'staged'
+
+/** A block mutation the side pane's buttons request: `stage` and `discard` act
+ *  on the unstaged layer, `unstage` on the staged one. The host enforces the
+ *  same matrix. */
+export type BlockMode = 'stage' | 'unstage' | 'discard'
+
+/**
+ * What one block action acts on, snapshotted from the diff the pane had
+ * rendered when the click (or its confirmation) happened.
+ *
+ * The snapshot is the point: `diffSha` proves the file has not changed since
+ * the pane rendered it, and `lines` — the block's hunk-line indices — only
+ * mean anything against exactly that diff. A confirmed roll-back carries the
+ * ask it opened with, so the answer cannot drift under the dialog.
+ */
+export interface BlockAsk {
+  readonly path: string
+  readonly layer: SideLayer
+  readonly diffSha: string
+  readonly lines: readonly number[]
+  /** The block's line tallies, for the roll-back confirmation's wording. */
+  readonly added: number
+  readonly deleted: number
+  /** Whether the block is the file's entire content — the untracked case,
+   *  whose roll-back DELETES the file and whose confirmation says so. */
+  readonly wholeFile: boolean
+}
+
+/**
+ * `gitWorkbench/fileSides`: one layer of one file for the side-by-side pane.
+ * Mirrors the host's `FileSides` (the client re-declares host shapes rather
+ * than importing the host module, which pulls node and the RPC decorators).
+ */
+export interface FileSides {
+  /** Unified diff at full context; '' when the layer has no change. */
+  readonly diff: string
+  /** sha1 of `diff`, echoed back by mutations to prove the same snapshot. */
+  readonly diffSha: string
+  /** Whole right-hand text, the editor's initial buffer. */
+  readonly targetText: string
+  /** Blob sha of the right-hand side; '' when it does not exist. */
+  readonly targetSha: string
+  readonly binary: boolean
+  /** True when the file is past the size guard; the client shows the old view. */
+  readonly tooLarge: boolean
+  /** True when the working-tree file is not valid UTF-8; the pane shows the
+   *  diff but withholds the editor. Optional so an older host half reads as
+   *  "fine" rather than as a refusal this client cannot explain. */
+  readonly lossyEncoding?: boolean
+}
+
+/**
+ * `gitWorkbench/fileImage`: one working-tree file's bytes, when the host's
+ * signature check confirms they are an image a browser can draw.
+ *
+ * Every field is present in both outcomes — an image and a refusal — because
+ * the gateway's payloads carry no `undefined`. `reason` is '' exactly when
+ * `ok`, and names the refusal otherwise: 'notImage', 'tooLarge', 'missing'.
+ */
+export interface FileImage {
+  readonly ok: boolean
+  /** MIME type to label the blob with; '' when declined. */
+  readonly mime: string
+  /** Short label for the caption — 'PNG', 'WebP', 'SVG'; '' when declined. */
+  readonly kind: string
+  /** The whole file, base64; '' when declined. */
+  readonly base64: string
+  /** The file's size in bytes, reported either way. */
+  readonly bytes: number
+  readonly reason: string
+}
+
+/** One line's provenance, as `gitWorkbench/blame` reports it. */
+export interface BlameLine {
+  /** Full commit sha; all zeros for a line not committed yet. */
+  readonly hash: string
+  readonly author: string
+  /** Author time, unix seconds; 0 when git did not say. */
+  readonly time: number
+  readonly summary: string
+  readonly uncommitted: boolean
+}
+
+/** `gitWorkbench/blame`'s answer. `error` is present only on failure. */
+export interface BlameAnswer {
+  readonly lines: readonly BlameLine[]
+  /** Whether the file was longer than the gutter's cap. */
+  readonly truncated: boolean
+  readonly error?: string
+}
 
 /** Translate a key of this plugin's namespace, with optional `{name}` params. */
-type Translate = (key: string, params?: Record<string, string | number>) => string
+export type Translate = (key: string, params?: Record<string, string | number>) => string
 
 type Props = PropsRuntime<'conversation.session.header.actions'> & {
   readonly t: Translate
   readonly fetchStats: (worktreePath: string | undefined, signal: AbortSignal) => Promise<WorkbenchStats | null>
   readonly fetchFileDiff: (worktreePath: string | undefined, path: string, commit: string | undefined, signal: AbortSignal) => Promise<string>
+  /** One layer of one file for the side-by-side diff pane. */
+  readonly fetchFileSides: (worktreePath: string | undefined, path: string, layer: SideLayer, signal: AbortSignal) => Promise<FileSides | null>
+  /** Save the editor buffer, checked against the sha it opened with. */
+  readonly writeChecked: (worktreePath: string | undefined, path: string, text: string, expectedSha: string, signal: AbortSignal) => Promise<WriteResult | null>
+  readonly fetchBlame: (worktreePath: string | undefined, path: string, signal: AbortSignal) => Promise<BlameAnswer | null>
+  /** One file's bytes, when they are an image. Null when the host half is
+   *  older than this client: the view then falls back to the text answer. */
+  readonly fetchFileImage: (worktreePath: string | undefined, path: string, signal: AbortSignal) => Promise<FileImage | null>
+  /** Where the symbol at a zero-based protocol position is defined. */
   readonly fetchWorktreeStatus: (sessionId: string, repoPath: string | undefined, signal: AbortSignal) => Promise<WorktreeStatus | null>
   /** Binding only, no git — the probe the shut chip can afford to poll. */
   readonly fetchSessionBinding: (sessionId: string, signal: AbortSignal) => Promise<{ worktreePath: string | null; name: string | null } | null>
@@ -252,7 +384,7 @@ type Props = PropsRuntime<'conversation.session.header.actions'> & {
  * modes with a back action, so returning to the working tree is always one click
  * (the pattern GitHub Desktop, VS Code and the JetBrains git tooling converge on).
  */
-type Tab = 'changes' | 'history' | 'compare'
+type Tab = 'changes' | 'history' | 'compare' | 'files'
 
 /** How many further commits one page request loads. */
 const HISTORY_PAGE = 30
@@ -265,6 +397,11 @@ const MIN_DRAWER_WIDTH = 760
 const MIN_COMMITS_WIDTH = 190
 const MIN_TREE_WIDTH = 170
 const MIN_DIFF_WIDTH = 300
+/** Floors for the History tab's horizontal split. The list keeps enough for a
+ *  few rows to read as a list rather than as a strip; the half below keeps
+ *  enough that the tree and the diff are still worth rendering. */
+const MIN_COMMITS_HEIGHT = 90
+const MIN_STACKED_LOWER = 200
 
 /** Longest edge a chosen background image is resampled to before storage. Past
  *  this the file grows fast while a blurred backdrop gains nothing. */
@@ -283,14 +420,35 @@ const CUSTOM_STYLE_ID = 'dsh-ui-gitworkbench-custom-css'
 const STORE_APPEARANCE = 'dsh-ui-gitworkbench:appearance'
 const STORE_WIDTH = 'dsh-ui-gitworkbench:width'
 const STORE_PANES = 'dsh-ui-gitworkbench:panes'
-
-/** Dragged pane widths in px; null on either side keeps that pane's CSS default. */
+/** Where the reader was in the Files tab, per worktree. View state, so it
+ *  belongs here beside the layout rather than in the host's per-project store:
+ *  two people on one repository should not share each other's place. */
+const STORE_FILES = 'dsh-ui-gitworkbench:files'
+/** Which way the History tab arranges its panes. Its own key rather than a
+ *  field of the appearance object: that one is about colour, and this choice
+ *  has to survive a build that adds a palette. */
+const STORE_HISTORY_LAYOUT = 'dsh-ui-gitworkbench:history-layout'
+
+/** Dragged pane sizes in px; null on any of them keeps that pane's CSS default. */
 interface PaneWidths {
   readonly commits: number | null
   readonly tree: number | null
+  /**
+   * The commit list's HEIGHT, which is what the History tab's divider moves
+   * now that the list spans the drawer's full width.
+   *
+   * Optional because storage is a durable boundary: values written before the
+   * tab was stacked have no such field, and rejecting them outright would
+   * throw away the column widths the reader had already chosen.
+   */
+  readonly commitsTall?: number | null
 }
 
-const DEFAULT_PANES: PaneWidths = { commits: null, tree: null }
+/** The two panes whose WIDTH a divider drags. `commitsTall` is deliberately
+ *  not one of them — it is a height, with its own floors. */
+type PaneWidthKey = 'commits' | 'tree'
+
+const DEFAULT_PANES: PaneWidths = { commits: null, tree: null, commitsTall: null }
 
 /**
  * @param value - value read back from storage.
@@ -298,9 +456,9 @@ const DEFAULT_PANES: PaneWidths = { commits: null, tree: null }
  */
 function isPaneWidths(value: unknown): value is PaneWidths {
   if (typeof value !== 'object' || value === null) return false
-  const { commits, tree } = value as Partial<PaneWidths>
+  const { commits, tree, commitsTall } = value as Partial<PaneWidths>
   const ok = (v: unknown): boolean => v === null || (typeof v === 'number' && Number.isFinite(v))
-  return ok(commits) && ok(tree)
+  return ok(commits) && ok(tree) && (commitsTall === undefined || ok(commitsTall))
 }
 
 /**
@@ -349,24 +507,26 @@ function writeStored(key: string, value: unknown): void {
  * crosses a child that stops propagation.
  * @returns the active flag for styling, and the pointerdown handler to attach.
  */
-function useHorizontalDrag(): {
+function usePaneDrag(axis: 'x' | 'y' = 'x'): {
   dragging: boolean
-  start: (event: ReactPointerEvent<HTMLElement>, onDrag: (clientX: number, done: boolean) => void) => void
+  start: (event: ReactPointerEvent<HTMLElement>, onDrag: (position: number, done: boolean) => void) => void
 } {
+  const along = (event: { clientX: number; clientY: number }): number =>
+    axis === 'y' ? event.clientY : event.clientX
   const [dragging, setDragging] = useState(false)
-  const start = (event: ReactPointerEvent<HTMLElement>, onDrag: (clientX: number, done: boolean) => void): void => {
+  const start = (event: ReactPointerEvent<HTMLElement>, onDrag: (position: number, done: boolean) => void): void => {
     event.preventDefault()
     const handle = event.currentTarget
     handle.setPointerCapture(event.pointerId)
     setDragging(true)
-    const onMove = (move: PointerEvent): void => { onDrag(move.clientX, false) }
+    const onMove = (move: PointerEvent): void => { onDrag(along(move), false) }
     // `pointercancel` ends a drag the browser took over (a touch became a
     // gesture, the window lost focus). It releases capture itself, so only the
     // pointerup path releases — and both must detach, or the next drag stacks a
     // second set of listeners on the same handle.
     const finish = (end: PointerEvent): void => {
       if (end.type === 'pointerup') {
-        onDrag(end.clientX, true)
+        onDrag(along(end), true)
         handle.releasePointerCapture(end.pointerId)
       }
       handle.removeEventListener('pointermove', onMove)
@@ -387,22 +547,34 @@ function useHorizontalDrag(): {
  * @param onDrag - receives the pointer's x and whether the drag just ended.
  * @returns the divider element.
  */
-function PaneDivider({ label, onDrag }: {
+function PaneDivider({ label, onDrag, axis = 'x' }: {
   label: string
-  onDrag: (clientX: number, done: boolean) => void
+  /** clientX for an 'x' handle, clientY for a 'y' one. */
+  onDrag: (position: number, done: boolean) => void
+  /** Which way the handle moves. 'y' is the History tab's stacked split. */
+  axis?: 'x' | 'y'
 }): ReactNode {
-  const { dragging, start } = useHorizontalDrag()
+  const { dragging, start } = usePaneDrag(axis)
+  const base = axis === 'y' ? `${css.paneDivider} ${css.paneDividerY}` : css.paneDivider
   return (
     <div
-      className={dragging ? `${css.paneDivider} ${css.paneDividerActive}` : css.paneDivider}
+      className={dragging ? `${base} ${css.paneDividerActive}` : base}
       role="separator"
-      aria-orientation="vertical"
+      // The orientation a separator reports is the axis it SEPARATES along,
+      // which is the opposite of the one it slides on.
+      aria-orientation={axis === 'y' ? 'horizontal' : 'vertical'}
       aria-label={label}
       onPointerDown={event => start(event, onDrag)}
     />
   )
 }
 
+/** How narrow either side-by-side column may be dragged. A column pulled to
+ *  nothing reads as a broken pane, and nothing on screen offers to pull it
+ *  back out. */
+const SPLIT_MIN = 0.15
+const SPLIT_MAX = 0.85
+
 /** Commit change sets kept in the browser before the least recently used is dropped. */
 const COMMIT_CACHE_CAPACITY = 24
 
@@ -413,6 +585,19 @@ const EMPTY_STATS: WorkbenchStats = {
   files: [], diff: '', commits: [],
 }
 
+/** How long the Files place must hold still before it is written. */
+const PLACES_WRITE_MS = 500
+
+/** One worktree's last-read file list. */
+interface FilesTree {
+  readonly paths: readonly string[]
+  readonly truncated: boolean
+}
+
+/** A worktree nobody has opened the Files tab on yet. One instance, so an
+ *  unvisited worktree does not re-render the browser on every pass. */
+const EMPTY_TREE: FilesTree = { paths: [], truncated: false }
+
 /** The overlay with nothing on it — one instance, so an empty overlay never
  *  re-renders the tree that receives it. */
 const EMPTY_TICKS: ReadonlyMap<string, TickAction> = new Map()
@@ -448,7 +633,7 @@ const STATUS_BADGE: Record<GitFileStatus, string> = {
   renamed: css.stRenamed, deleted: css.stDeleted,
 }
 
-export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetchFileDiff, fetchWorktreeStatus, fetchSessionBinding, fetchCommitStats, fetchCommits, fetchAuthors, fetchRepoTree, fetchCompare, fetchStyle, saveStyle, fetchSync, runGitOp, fetchDiscardPlan }: Props) {
+export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetchFileDiff, fetchFileSides, writeChecked, fetchBlame, fetchFileImage, fetchWorktreeStatus, fetchSessionBinding, fetchCommitStats, fetchCommits, fetchAuthors, fetchRepoTree, fetchCompare, fetchStyle, saveStyle, fetchSync, runGitOp, fetchDiscardPlan }: Props) {
   const worktreePath = useSessions((state: { byId?: Record<string, { cwd?: string } | undefined> }) =>
     state?.byId?.[sessionId]?.cwd) as string | undefined
   /** Whether the session's agent has a turn in flight — the store mirrors it
@@ -467,6 +652,34 @@ export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetch
   const [gen, setGen] = useState(0)
   /** Tree expansion state, session-lifetime: survives polls, source switches and drawer close/reopen. */
   const [collapsed, setCollapsed] = useState<Set<string> | undefined>(undefined)
+  // The Files tab's place and its last file list, ONE PER WORKTREE. Held here
+  // rather than in the browser because the browser unmounts whenever another
+  // tab is looked at: without this, coming back lost the selection and every
+  // expanded folder, which is the difference between a tab you return to and
+  // one you start over in.
+  //
+  // Per worktree because a worktree is a different place — different files, at
+  // different paths, and the open one may not exist in the next one at all.
+  // Keying the cached list too is what stops a switch from rendering the
+  // previous worktree's files until the new list arrives.
+  const [filesPlaces, setFilesPlaces] = useState<FilesPlaces>(
+    () => decodePlaces(readStored<unknown>(STORE_FILES, (value): value is unknown => true, null)),
+  )
+  const [filesTrees, setFilesTrees] = useState<ReadonlyMap<string, FilesTree>>(() => new Map())
+  const rememberPlace = useCallback((key: string, next: FilesPlace): void => {
+    setFilesPlaces(prev => withPlace(prev, key, next))
+  }, [])
+  const rememberTree = useCallback((key: string, next: FilesTree): void => {
+    setFilesTrees(prev => {
+      const map = new Map(prev)
+      map.set(key, next)
+      return map
+    })
+  }, [])
+  // Written on a pause, not on the change: expanding a folder and typing in
+  // the search box both move the place, and localStorage writes synchronously.
+  const settledPlaces = useIdleValue(filesPlaces, PLACES_WRITE_MS)
+  useEffect(() => { writeStored(STORE_FILES, encodePlaces(settledPlaces)) }, [settledPlaces])
   /** Binding + the repository's worktrees, null until the first successful fetch. */
   const [wtStatus, setWtStatus] = useState<WorktreeStatus | null>(null)
   /** Worktree the drawer reads, by absolute path. null = follow the session's own
@@ -535,6 +748,16 @@ export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetch
   const [panes, setPanes] = useState<PaneWidths>(
     () => readStored(STORE_PANES, isPaneWidths, DEFAULT_PANES),
   )
+  /**
+   * The History tab's arrangement.
+   *
+   * Panel-level, beside the palette rather than inside the tab: the choice has
+   * to hold across tab switches and reopens, and the drawer's own card is where
+   * the row height it implies is published from.
+   */
+  const [historyLayout, setHistoryLayout] = useState<HistoryLayout>(
+    () => readStored(STORE_HISTORY_LAYOUT, isHistoryLayout, DEFAULT_HISTORY_LAYOUT),
+  )
   /** Per-project and global styling; both scopes, unresolved. */
   const [style, setStyle] = useState<StyleSettings>(EMPTY_SETTINGS)
   /** Whether dsh's resolved palette is currently dark. */
@@ -837,8 +1060,10 @@ export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetch
     setPendingTicks(EMPTY_TICKS)
     setStats({
       ...EMPTY_STATS,
-      worktreePath: statsPath,
-      branch: branchOfWorktree(statsPath, worktreesRef.current),
+      // No source pinned and no session binding yet: the empty path is what
+      // EMPTY_STATS already means by "nowhere", not a missing value.
+      worktreePath: statsPath ?? '',
+      branch: branchOfWorktree(statsPath, worktreesRef.current) ?? '',
     })
   }, [statsPath])
 
@@ -854,8 +1079,8 @@ export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetch
     const prevBinding = lastBindingRef.current
     lastBindingRef.current = bindingPath
     if (prevBinding === bindingPath) return
-    const prevSource = prevBinding ?? worktreePath
-    if (sourcePath !== null && prevSource.replace(/\\/g, '/') === sourcePath.replace(/\\/g, '/')) {
+    const prevSource = prevBinding ?? worktreePath ?? null
+    if (sourcePath !== null && prevSource !== null && prevSource.replace(/\\/g, '/') === sourcePath.replace(/\\/g, '/')) {
       setSourcePath(null)
     }
   }, [bindingPath, sourcePath, worktreePath])
@@ -1014,9 +1239,10 @@ export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetch
       // made the drawer shake on every tick — and a tick's outcome is already
       // visible in place, in the box the user just clicked. So: the old banner
       // stays while the op runs (it still describes the last outcome), a
-      // successful stage/unstage clears it rather than replacing it, and only
-      // heavy operations and failures announce themselves at all.
-      if (result.ok && (op === 'stage' || op === 'unstage')) setOpResult(null)
+      // successful stage/unstage — tick or block — clears it rather than
+      // replacing it (the block visibly leaves its layer on the refetch), and
+      // only heavy operations and failures announce themselves at all.
+      if (result.ok && (op === 'stage' || op === 'unstage' || op === 'applyBlocks')) setOpResult(null)
       else setOpResult({ op, result })
       return result
     } finally {
@@ -1172,11 +1398,10 @@ export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetch
    * @param measured - the drawer's inner width and the panes' current widths.
    * @param persist - whether to store it; false for intermediate drag frames.
    */
-  const applyPane = (which: keyof PaneWidths, next: number, measured: { drawer: number; commits: number; tree: number }, persist: boolean): void => {
+  const applyPane = (which: PaneWidthKey, next: number, measured: { drawer: number; commits: number; tree: number }, persist: boolean): void => {
     const min = which === 'commits' ? MIN_COMMITS_WIDTH : MIN_TREE_WIDTH
     const other = which === 'commits' ? measured.tree : measured.commits
-    const max = Math.max(min, measured.drawer - other - MIN_DIFF_WIDTH)
-    const clamped = Math.min(Math.max(next, min), max)
+    const clamped = clampPane(next, min, measured.drawer, other, MIN_DIFF_WIDTH)
     setPanes(prev => {
       const updated = { ...prev, [which]: clamped }
       if (persist) writeStored(STORE_PANES, updated)
@@ -1184,6 +1409,29 @@ export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetch
     })
   }
 
+  /**
+   * Drag the History tab's horizontal split.
+   *
+   * Clamped the same way `applyPane` clamps a width, and for the same reason:
+   * a pane dragged to nothing reads as broken and offers nothing to drag back
+   * out. The outer `Math.max` keeps the range from inverting in a drawer too
+   * short to hold both floors — the list then simply takes its minimum.
+   *
+   * @param next - the height in px the pointer implies.
+   * @param bodyHeight - the space the two stacked halves share.
+   * @param persist - false for every intermediate frame of a drag, so a
+   *   synchronous localStorage write never lands mid-resize.
+   */
+  const applyCommitsTall = (next: number, bodyHeight: number, persist: boolean): void => {
+    const max = Math.max(MIN_COMMITS_HEIGHT, bodyHeight - MIN_STACKED_LOWER)
+    const clamped = Math.min(Math.max(next, MIN_COMMITS_HEIGHT), max)
+    setPanes(prev => {
+      const updated = { ...prev, commitsTall: clamped }
+      if (persist) writeStored(STORE_PANES, updated)
+      return updated
+    })
+  }
+
   /**
    * Drag the leading edge. Clamped at both ends — below the minimum the three
    * panes stop fitting, and past the viewport there is nothing to reveal. The
@@ -1202,6 +1450,18 @@ export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetch
     if (persist) writeStored(STORE_WIDTH, clamped)
   }
 
+  /**
+   * Pick the History tab's arrangement.
+   *
+   * Written through immediately: unlike a drag this is one click, so there is
+   * no intermediate frame to withhold a synchronous storage write for.
+   * @param next - the arrangement to switch to.
+   */
+  const applyHistoryLayout = (next: HistoryLayout): void => {
+    setHistoryLayout(next)
+    writeStored(STORE_HISTORY_LAYOUT, next)
+  }
+
   /** Tab switch. No direction refetches the working tree: `viewKey` already
    *  separates the tabs' per-file diff caches, so bumping `gen` here only cost a
    *  redundant round trip. */
@@ -1300,6 +1560,9 @@ export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetch
           onWidth={applyWidth}
           panes={panes}
           onPane={applyPane}
+          onCommitsTall={applyCommitsTall}
+          historyLayout={historyLayout}
+          onHistoryLayout={applyHistoryLayout}
           onClose={() => setOpen(false)}
           onRefresh={refresh}
           commitDraft={commitDraft}
@@ -1315,9 +1578,17 @@ export function GitWorkbenchPanel({ sessionId, useSessions, t, fetchStats, fetch
           pendingTicks={pendingTicks}
           onTick={queueTicks}
           fetchFileDiff={fetchDiffForView}
+          fetchFileSides={fetchFileSides}
+          writeChecked={writeChecked}
+          fetchBlame={fetchBlame}
+          fetchFileImage={fetchFileImage}
           viewKey={viewKey}
           gen={gen}
           collapsed={collapsed}
+          filesPlaces={filesPlaces}
+          onFilesPlace={rememberPlace}
+          filesTrees={filesTrees}
+          onFilesTree={rememberTree}
           onCollapsedChange={setCollapsed}
         />
       ) : null}
@@ -1353,6 +1624,26 @@ function ChromeGlyph({ of }: { of: keyof typeof CHROME_GLYPH }): ReactNode {
   )
 }
 
+/**
+ * Change-to-change navigation, as two chevrons.
+ *
+ * Bootstrap Icons again, at the same 16 viewBox — a pair of arrows is what
+ * every editor spells this with, and the words would be longer than the
+ * controls beside them.
+ */
+const NAV_GLYPH = {
+  prev: 'M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708l6-6z',
+  next: 'M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z',
+} as const
+
+function NavGlyph({ of }: { of: keyof typeof NAV_GLYPH }): ReactNode {
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+      <path d={NAV_GLYPH[of]} />
+    </svg>
+  )
+}
+
 /**
  * Tree glyph: a root with two working copies hanging off it.
  *
@@ -1482,7 +1773,12 @@ interface DrawerProps {
   onWidth: (next: number, persist: boolean) => void
   /** Dragged pane widths; null on either side keeps that pane's CSS default. */
   panes: PaneWidths
-  onPane: (which: keyof PaneWidths, next: number, measured: { drawer: number; commits: number; tree: number }, persist: boolean) => void
+  onPane: (which: PaneWidthKey, next: number, measured: { drawer: number; commits: number; tree: number }, persist: boolean) => void
+  /** Drag the History tab's horizontal split: the commit list's height in px. */
+  onCommitsTall: (next: number, bodyHeight: number, persist: boolean) => void
+  /** Which way the History tab arranges its panes. */
+  historyLayout: HistoryLayout
+  onHistoryLayout: (next: HistoryLayout) => void
   onClose: () => void
   onRefresh: () => void
   /** Commit draft, lifted so a tab switch cannot discard it. */
@@ -1512,14 +1808,24 @@ interface DrawerProps {
   /** Queue the git calls for a tick batch. */
   onTick: (action: TickAction, paths: readonly string[]) => void
   fetchFileDiff: (path: string, signal: AbortSignal) => Promise<string>
+  /** One layer of one file for the side-by-side pane; the drawer binds the source. */
+  fetchFileSides: (worktreePath: string | undefined, path: string, layer: SideLayer, signal: AbortSignal) => Promise<FileSides | null>
+  /** Save the side pane's editor buffer; the drawer binds the source. */
+  writeChecked: (worktreePath: string | undefined, path: string, text: string, expectedSha: string, signal: AbortSignal) => Promise<WriteResult | null>
+  fetchBlame: (worktreePath: string | undefined, path: string, signal: AbortSignal) => Promise<BlameAnswer | null>
+  fetchFileImage: (worktreePath: string | undefined, path: string, signal: AbortSignal) => Promise<FileImage | null>
   /** Identifies the view the per-file diff cache belongs to (working tree, or one commit). */
   viewKey: string
   gen: number
   collapsed: Set<string> | undefined
+  filesPlaces: FilesPlaces
+  onFilesPlace: (key: string, next: FilesPlace) => void
+  filesTrees: ReadonlyMap<string, FilesTree>
+  onFilesTree: (key: string, next: FilesTree) => void
   onCollapsedChange: (next: Set<string>) => void
 }
 
-function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectCommit, hasMoreCommits, loadingMore, onLoadMoreCommits, historyRef, onHistoryRef, historyQuery, onHistoryQuery, historyError, fetchAuthors, fetchRepoTree, branches, worktreeBranches, branchesTruncated, baseRef, headRef, onBaseRef, onHeadRef, comparable, t, binding, worktrees, sessionPath, statsPath, onSwitchSource, segments, selected, onSelect, maximized, onToggleMaximized, theme, mode, family, onMode, onFamily, style, background, onStyle, width, onWidth, panes, onPane, onClose, onRefresh, commitDraft, onCommitDraft, commitAmend, onCommitAmend, sync, treeLoading, historyLoading, busy, opResult, runOp, fetchDiscardPlan, onOpError, pendingTicks, onTick, fetchFileDiff, viewKey, gen, collapsed, onCollapsedChange }: DrawerProps): ReactNode {
+function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectCommit, hasMoreCommits, loadingMore, onLoadMoreCommits, historyRef, onHistoryRef, historyQuery, onHistoryQuery, historyError, fetchAuthors, fetchRepoTree, branches, worktreeBranches, branchesTruncated, baseRef, headRef, onBaseRef, onHeadRef, comparable, t, binding, worktrees, sessionPath, statsPath, onSwitchSource, segments, selected, onSelect, maximized, onToggleMaximized, theme, mode, family, onMode, onFamily, style, background, onStyle, width, onWidth, panes, onPane, onCommitsTall, historyLayout, onHistoryLayout, onClose, onRefresh, commitDraft, onCommitDraft, commitAmend, onCommitAmend, sync, treeLoading, historyLoading, busy, opResult, runOp, fetchDiscardPlan, onOpError, pendingTicks, onTick, fetchFileDiff, fetchFileSides, writeChecked, fetchBlame, fetchFileImage, viewKey, gen, collapsed, onCollapsedChange, filesPlaces, onFilesPlace, filesTrees, onFilesTree }: DrawerProps): ReactNode {
   // Empty stand-in while a commit's change set loads, so every hook below keeps a
   // stable shape and the panes simply render nothing.
   const body = shown ?? EMPTY_STATS
@@ -1540,6 +1846,20 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
     () => tab === 'history' ? parseLogQuery(historyQuery).paths : NO_PATHS,
     [tab, historyQuery],
   )
+  /** Working-tree files the browser can open on top of what `repoTree` knows:
+   *  `git ls-tree HEAD` cannot see an untracked file, and a browser that will
+   *  not open the file you just created reads as broken. A deleted file is
+   *  left out — opening it would only fail. */
+  /** Which worktree the Files tab is remembering for. */
+  const filesKey = pathKey(statsPath)
+  const rememberPlaceHere = useCallback(
+    (next: FilesPlace) => { onFilesPlace(filesKey, next) }, [onFilesPlace, filesKey])
+  const rememberTreeHere = useCallback(
+    (next: FilesTree) => { onFilesTree(filesKey, next) }, [onFilesTree, filesKey])
+  const browsablePaths = useMemo(
+    () => stats.files.filter(file => file.status !== 'deleted').map(file => file.path),
+    [stats.files],
+  )
   // A selection the current source no longer lists (e.g. after a source or tab
   // switch) falls back to the filtered file, else the first — never a dangling
   // highlight. See `active-file.ts` for the order and the reasoning.
@@ -1576,7 +1896,55 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
   // Reset the on-demand cache when the generation (refresh) advances.
   useEffect(() => { setFetched(new Map()) }, [gen])
 
-  const selectAndReveal = (path: string): void => onSelect(path)
+  // The side pane's dirty flag, reported upward: every gesture that would
+  // drop the editor's buffer asks before it acts, and the layer tab is only
+  // the rarest of them — clicking another file in the tree is this pane's
+  // PRIMARY navigation. The guard is the little state machine in
+  // side-edit.ts (gateLeave / leaveAsked / leaveAnswered / paneDirtyReport);
+  // the PANE is the dirty flag's only writer, so the drawer never guesses
+  // it — clearing the flag on a confirmed Leave is what let a no-op gesture
+  // (the already-active tab, the already-shown file's row) disarm the guard
+  // for every gesture after it.
+  const [leaveGuard, setLeaveGuard] = useState<LeaveGuard>(LEAVE_GUARD_CLEAR)
+  const [pendingLeave, setPendingLeave] = useState<(() => void) | null>(null)
+  const onSideDirty = useCallback((dirty: boolean): void => {
+    setLeaveGuard(prev => paneDirtyReport(prev, dirty))
+  }, [])
+  const guardLeave = (act: () => void, same: boolean): void => {
+    const gate = gateLeave(leaveGuard, same)
+    if (gate.kind === 'wait') return
+    if (gate.kind === 'ask') {
+      setPendingLeave(() => act)
+      setLeaveGuard(leaveAsked)
+      return
+    }
+    act()
+  }
+  const settleLeaveAsk = (): void => {
+    setPendingLeave(null)
+    setLeaveGuard(leaveAnswered)
+  }
+  const confirmDrawerLeave = (): void => {
+    const act = pendingLeave
+    if (act === null) return
+    // Leave closes the ask and runs the gesture; the flag keeps the pane's
+    // last report. A real navigation's reset reports clean on its own; a
+    // no-op gesture never should have prompted, and its Leave leaves the
+    // guard armed.
+    settleLeaveAsk()
+    act()
+  }
+  const closeDrawer = (): void => guardLeave(onClose, false)
+  const leaveTab = (next: Tab): void => guardLeave(() => onSwitchTab(next), next === tab)
+  // `active`, not `selected`: the pane's identity is the file it SHOWS, and
+  // the preferred-file fallback can leave `selected` naming a file the pane
+  // is not rendering — the row that changes nothing is the shown file's.
+  const selectAndReveal = (path: string): void => guardLeave(() => onSelect(path), path === active)
+  // The source picker swaps the whole worktree under the drawer — the buffer
+  // belongs to a file the new source may not even list. Picking the source
+  // already on screen changes nothing, so it runs unguarded like every other
+  // no-op gesture.
+  const leaveSource = (next: string): void => guardLeave(() => onSwitchSource(next), samePath(next, statsPath))
 
   /**
    * Roll-back, in two steps that are deliberately not one.
@@ -1618,10 +1986,43 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
     void runOp('discardFile', { path: pending.file.path, expectedEffect: pending.plan.effect })
   }
 
+  /** The BLOCK roll-back being asked about, snapshotted at click time; null
+   *  while none is open. The confirmation states this ask, and the confirmed
+   *  call carries it verbatim — so if the file moves underneath the dialog,
+   *  the host's diffSha refusal is what stops the apply, not a re-derived
+   *  (different) block. */
+  const [blockDiscard, setBlockDiscard] = useState<BlockAsk | null>(null)
+
+  /**
+   * One block action from the side pane, routed the way `askDiscard` routes a
+   * file's: stage and unstage are not destructive and run now, through the same
+   * op machinery as every tick; discard is the irreversible one, so its click
+   * only asks. The chain has no plan RPC to call — the consequence of reverting
+   * THIS block's lines is fully stated by the pane's own rows — and the
+   * "refuse if the answer changed" step is the host's stale check, which fires
+   * on the diffSha the dialog was opened against.
+   */
+  const askBlockAction = (mode: BlockMode, ask: BlockAsk): Promise<GitOpResult> => {
+    if (mode === 'discard') {
+      setBlockDiscard(ask)
+      return Promise.resolve({ ok: true })
+    }
+    return runOp('applyBlocks', { path: ask.path, layer: ask.layer, diffSha: ask.diffSha, lines: ask.lines, mode })
+  }
+
+  const confirmBlockDiscard = (): void => {
+    const ask = blockDiscard
+    if (ask === null) return
+    setBlockDiscard(null)
+    void runOp('applyBlocks', { path: ask.path, layer: ask.layer, diffSha: ask.diffSha, lines: ask.lines, mode: 'discard' })
+  }
+
   const drawerRef = useRef<HTMLDivElement>(null)
+  /** The two stacked halves' shared box, which the History split measures in. */
+  const bodyRef = useRef<HTMLDivElement>(null)
   const commitsRef = useRef<HTMLDivElement>(null)
   const treeRef = useRef<HTMLDivElement>(null)
-  const edgeDrag = useHorizontalDrag()
+  const edgeDrag = usePaneDrag()
 
   /**
    * What a pane drag is clamped against: the drawer's inner width and what the
@@ -1629,18 +2030,27 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
    * resized since the last render.
    * @returns the three widths in px.
    */
-  const measurePanes = (): { drawer: number; commits: number; tree: number } => ({
-    drawer: drawerRef.current?.clientWidth ?? window.innerWidth,
-    commits: commitsRef.current?.getBoundingClientRect().width ?? 0,
-    tree: treeRef.current?.getBoundingClientRect().width ?? 0,
-  })
+  const measurePanes = (): { drawer: number; commits: number; tree: number } => {
+    const commits = commitsRef.current?.getBoundingClientRect() ?? null
+    const tree = treeRef.current?.getBoundingClientRect() ?? null
+    return {
+      drawer: drawerRef.current?.clientWidth ?? window.innerWidth,
+      // Each width counts only where the pane is actually IN THE WAY of the
+      // other. Stacked, the commit list spans the drawer above the row rather
+      // than sitting beside the tree, and taking its width as the tree's
+      // neighbour made the ceiling smaller than the floor — the tree stayed at
+      // its minimum whatever the pointer did.
+      commits: neighbourWidth(commits, tree),
+      tree: neighbourWidth(tree, commits),
+    }
+  }
 
   /**
    * @param which - the pane a divider resizes.
    * @param ref - that pane's element, whose left edge the width is measured from.
    * @returns a drag handler for {@link PaneDivider}.
    */
-  const paneDrag = (which: keyof PaneWidths, ref: { current: HTMLDivElement | null }) =>
+  const paneDrag = (which: PaneWidthKey, ref: { current: HTMLDivElement | null }) =>
     (clientX: number, done: boolean): void => {
       const left = ref.current?.getBoundingClientRect().left
       if (left === undefined) return
@@ -1660,6 +2070,43 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
   const paneStyle = (px: number | null): CSSProperties | undefined =>
     px === null ? undefined : { width: `${px}px`, maxWidth: 'none' }
 
+  /**
+    * The History tab's commit list, sized by height instead. `flex: none` so
+    * the height is the height — a flex child in a column would otherwise
+    * stretch or shrink away from it.
+    *
+    * The floor and the ceiling are NOT applied here. A stored height is a
+    * number of pixels, and the drag that produced it clamped against the body
+    * as it stood at that moment; the window can be made shorter afterwards,
+    * and then a height that was reasonable becomes taller than everything.
+    * The lower half collapses to nothing and the handle is pushed past the
+    * bottom edge — there is no longer anything on screen to drag back, which
+    * is the one failure mode a resizable split must not have. So the clamp
+    * lives in the stylesheet, against `100%` of whatever the body currently
+    * is, from the same two constants the drag clamp uses. The reader's chosen
+    * height is kept, not rewritten: make the window tall again and it returns.
+    */
+  const paneTall = (px: number | null): CSSProperties | undefined =>
+    px === null ? undefined : { height: `${px}px`, flex: 'none' }
+
+  /** The stacked split, measured from the top of the body rather than from the
+   *  list: the list's own top is what the drag is moving the bottom of, and
+   *  measuring from a moving edge makes the handle drift under the pointer. */
+  const commitsTallDrag = (clientY: number, done: boolean): void => {
+    const box = bodyRef.current?.getBoundingClientRect()
+    if (box === undefined) return
+    onCommitsTall(clientY - box.top, box.height, done)
+  }
+
+  /**
+   * Whether the History tab is showing its stacked arrangement.
+   *
+   * Three things follow from it and they must agree: the body's direction, how
+   * the commit list is sized, and which way its divider slides. Read from one
+   * name so a fourth reader cannot be added out of step.
+   */
+  const stackedHistory = tab === 'history' && historyLayout === 'stacked'
+
   // Width and the background's three tunables are inline because both are live
   // user values; the stylesheet only says what reads them. The pane floors are
   // inline for a different reason: they belong to the drag clamp above, and
@@ -1671,6 +2118,13 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
       '--gs-min-commits': `${MIN_COMMITS_WIDTH}px`,
       '--gs-min-tree': `${MIN_TREE_WIDTH}px`,
       '--gs-min-diff': `${MIN_DIFF_WIDTH}px`,
+      '--gs-min-commits-tall': `${MIN_COMMITS_HEIGHT}px`,
+      '--gs-min-stacked-lower': `${MIN_STACKED_LOWER}px`,
+      // The commit row's height, which the lane graph also draws itself at.
+      // Published rather than written into the stylesheet twice: the two
+      // arrangements want different rows, and lanes only meet across the seam
+      // between rows while both numbers come from `COMMIT_ROW_H`.
+      '--gs-commit-row': `${COMMIT_ROW_H[historyLayout]}px`,
     } as CSSProperties,
     ...maximized || width === null ? {} : { width: `${width}px` },
     ...background === null ? {} : {
@@ -1685,7 +2139,7 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
       className={maximized ? `${css.overlay} ${css.overlayMax}` : css.overlay}
       data-gs-theme={theme}
       data-gs-part="overlay"
-      onClick={onClose}
+      onClick={closeDrawer}
     >
       <div
         ref={drawerRef}
@@ -1717,7 +2171,7 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
               sessionPath={sessionPath}
               statsPath={statsPath}
               fallbackBranch={stats.branch}
-              onSwitch={onSwitchSource}
+              onSwitch={leaveSource}
             />
             <Elided text={stats.worktreePath} className={css.headerPathMain} title={stats.worktreePath} />
             {tab === 'changes' && stats.detached ? <span className={css.headerDetached}>detached HEAD</span> : null}
@@ -1776,7 +2230,7 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
               type="button"
               className={`${css.btn} ${css.btnIcon} ${css.btnClose}`}
               aria-label={t('close')} title={t('close')}
-              onClick={onClose}
+              onClick={closeDrawer}
             ><ChromeGlyph of="close" /></button>
           </div>
         </div>
@@ -1786,22 +2240,29 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
             role="tab"
             aria-selected={tab === 'changes'}
             className={tab === 'changes' ? `${css.tab} ${css.tabActive}` : css.tab}
-            onClick={() => onSwitchTab('changes')}
+            onClick={() => leaveTab('changes')}
           >{t('tabChanges')}</button>
           <button
             type="button"
             role="tab"
             aria-selected={tab === 'history'}
             className={tab === 'history' ? `${css.tab} ${css.tabActive}` : css.tab}
-            onClick={() => onSwitchTab('history')}
+            onClick={() => leaveTab('history')}
           >{t('tabHistory')}</button>
           <button
             type="button"
             role="tab"
             aria-selected={tab === 'compare'}
             className={tab === 'compare' ? `${css.tab} ${css.tabActive}` : css.tab}
-            onClick={() => onSwitchTab('compare')}
+            onClick={() => leaveTab('compare')}
           >{t('tabCompare')}</button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={tab === 'files'}
+            className={tab === 'files' ? `${css.tab} ${css.tabActive}` : css.tab}
+            onClick={() => leaveTab('files')}
+          >{t('tabFiles')}</button>
         </div>
         {tab === 'compare' ? (
           <CompareBar
@@ -1815,14 +2276,46 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
             onHeadRef={onHeadRef}
           />
         ) : null}
-        {tab === 'history' && branches.length > 0 ? (
+        {/* History's own toolbar: which ref is listed, and how the panes are
+            arranged. The switch lives HERE rather than in the commit list's
+            head because that head is about 340px wide in the column layout and
+            already holds a title, a funnel and a search box — adding a fourth
+            control pushed it off the pane, and the narrower the reader dragged
+            the list the sooner it went. This row spans the drawer whichever
+            arrangement is in force, so the control cannot be squeezed out of
+            reach by the thing it controls.
+
+            The bar renders for the whole tab, not only when there are branches
+            to pick between: a repository with an unborn HEAD still has an
+            arrangement, and a control that comes and goes is worse than one
+            beside an empty space. */}
+        {tab === 'history' ? (
           <div className={css.compareBar}>
-            <RefPicker
-              t={t} label={t('historyRefLabel')} value={historyRef}
-              branches={branches} worktreeBranches={worktreeBranches} truncated={branchesTruncated}
-              onPick={onHistoryRef}
-              allLabel={t('allBranches')}
-            />
+            {branches.length > 0 ? (
+              <RefPicker
+                t={t} label={t('historyRefLabel')} value={historyRef}
+                branches={branches} worktreeBranches={worktreeBranches} truncated={branchesTruncated}
+                onPick={onHistoryRef}
+                allLabel={t('allBranches')}
+              />
+            ) : null}
+            {/* Two pressed-state buttons rather than one that toggles, so the
+                arrangement in force is readable without knowing which way a
+                toggle points. */}
+            <div className={css.layoutSwitch} role="group" aria-label={t('historyLayout')}>
+              <LayoutButton
+                glyph={<ColumnsGlyph />}
+                label={t('layoutColumns')}
+                on={historyLayout === 'columns'}
+                onPick={() => onHistoryLayout('columns')}
+              />
+              <LayoutButton
+                glyph={<StackedGlyph />}
+                label={t('layoutStacked')}
+                on={historyLayout === 'stacked'}
+                onPick={() => onHistoryLayout('stacked')}
+              />
+            </div>
           </div>
         ) : null}
         {/* Write operations act on the working tree, so they belong to the tab
@@ -1837,12 +2330,19 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
             role="status"
           >{opMessage(t, opResult.op, opResult.result)}</div>
         ) : null}
-        <div className={css.body}>
+        {/* History arranges itself two ways and the reader picks; see
+            `history-layout.ts` for what each is good at. Stacked, the commit
+            list spans the top and the tree and diff sit below it, so a subject
+            is never cut; in columns the list is a pane beside them, so the log
+            is as tall as the drawer. Everything else on the tab is identical,
+            which is why one flag decides all three differences here. */}
+        <div ref={bodyRef} className={css.body} data-stacked={stackedHistory ? '' : undefined}>
           {tab === 'history' ? (
             <>
               <CommitList
                 paneRef={commitsRef}
-                style={paneStyle(panes.commits)}
+                style={stackedHistory ? paneTall(panes.commitsTall ?? null) : paneStyle(panes.commits)}
+                layout={historyLayout}
                 t={t}
                 loading={historyLoading}
                 commits={commits}
@@ -1859,9 +2359,40 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
                 fetchAuthors={fetchAuthors}
                 fetchRepoTree={fetchRepoTree}
               />
-              <PaneDivider label={t('resizeCommits')} onDrag={paneDrag('commits', commitsRef)} />
+              {/* Each arrangement drags its own stored size — a width and a
+                  height are separate fields, so switching back finds the pane
+                  where it was left rather than reset. */}
+              {stackedHistory
+                ? <PaneDivider axis="y" label={t('resizeCommits')} onDrag={commitsTallDrag} />
+                : <PaneDivider label={t('resizeCommits')} onDrag={paneDrag('commits', commitsRef)} />}
             </>
           ) : null}
+          <div className={css.bodyRow}>
+          {tab === 'files' ? (
+            <FileBrowser
+              t={t}
+              palette={theme}
+              statsPath={statsPath}
+              extraPaths={browsablePaths}
+              gen={gen}
+              treeStyle={paneStyle(panes.tree)}
+              treeRef={treeRef}
+              divider={<PaneDivider label={t('resizeTree')} onDrag={paneDrag('tree', treeRef)} />}
+              place={placeAt(filesPlaces, filesKey)}
+              onPlace={rememberPlaceHere}
+              cached={filesTrees.get(filesKey) ?? EMPTY_TREE}
+              onTree={rememberTreeHere}
+              fetchRepoTree={fetchRepoTree}
+              fetchFileSides={fetchFileSides}
+              writeChecked={writeChecked}
+              fetchBlame={fetchBlame}
+              fetchFileImage={fetchFileImage}
+              onSaved={onRefresh}
+              onDirtyChange={onSideDirty}
+              onShowHistory={query => { onHistoryQuery(query); leaveTab('history') }}
+            />
+          ) : (
+            <>
           <div ref={treeRef} className={css.treeCol} style={paneStyle(panes.tree)} data-gs-part="tree">
             <FileTree
               t={t}
@@ -1917,24 +2448,65 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
             {(shown === null && tab !== 'changes') || (tab === 'compare' && !comparable) ? null
               : activeFile !== null && activeFile.binary ? (
                 <div className={css.empty}>{t('binaryFile')}</div>
+              ) : tab === 'changes' && active !== null ? (
+                <SideBySideView
+                  t={t}
+                  path={active}
+                  palette={theme}
+                  statsPath={statsPath}
+                  fetchSides={fetchFileSides}
+                  writeChecked={writeChecked}
+                  scopeKey={viewKey}
+                  gen={gen}
+                  fallbackSegment={segment}
+                  fallbackLoading={loading && segment.length === 0}
+                  onBlockAction={askBlockAction}
+                  onSaved={onRefresh}
+                  onDirtyChange={onSideDirty}
+                />
               ) : loading && segment.length === 0 ? (
                 <div className={css.empty}>{t('loadingDiff')}</div>
               ) : segment.length > 0 ? (
-                <DiffView segment={segment} path={active ?? ''} palette={theme} />
+                <DiffView segment={segment} path={active ?? ''} palette={theme} t={t} />
               ) : (
                 <div className={css.empty}>{t('noTextDiff')}</div>
               )}
           </div>
+            </>
+          )}
+          </div>
         </div>
         {discardPending?.plan != null ? (
           <DiscardConfirm
             t={t}
-            file={discardPending.file}
-            plan={discardPending.plan}
+            body={discardBodyText(t, discardPending.file, discardPending.plan)}
             onCancel={() => setDiscardPending(null)}
             onConfirm={confirmDiscard}
           />
         ) : null}
+        {blockDiscard !== null ? (
+          <DiscardConfirm
+            t={t}
+            body={blockDiscardBodyText(
+              t,
+              blockDiscard,
+              body.files.find(file => file.path === blockDiscard.path),
+            )}
+            onCancel={() => setBlockDiscard(null)}
+            onConfirm={confirmBlockDiscard}
+          />
+        ) : null}
+        {/* The drawer-level unsaved-edits guard: the file being left is the
+            one the reader was editing, and the deferred gesture — another
+            file, another tab, closing — runs only on the dialog's answer. */}
+        {pendingLeave !== null ? (
+          <LeaveEditsConfirm
+            t={t}
+            path={active ?? ''}
+            onCancel={settleLeaveAsk}
+            onConfirm={confirmDrawerLeave}
+          />
+        ) : null}
       </div>
     </div>
   )
@@ -1943,28 +2515,28 @@ function Drawer({ stats, shown, tab, onSwitchTab, commits, commitHash, onSelectC
 /**
  * The one dialog in this drawer, because this is the one act it cannot undo.
  *
- * It never asks a generic "are you sure": the body names the file and states
- * which of the three consequences is about to happen, in the host's own reading
- * of that file taken moments ago. Cancel holds the initial focus and Escape
- * closes, because the default answer to an irreversible question is no.
+ * It never asks a generic "are you sure": the caller hands it a body that names
+ * the file and states which consequence is about to happen — the whole-file
+ * roll-back's wording derived from the host's own reading of that file, the
+ * block roll-back's from the pane's rows. Cancel holds the initial focus and
+ * Escape closes, because the default answer to an irreversible question is no.
  *
  * There is deliberately no "don't ask again". This is the only path in the
  * drawer with nothing behind it, and a checkbox whose whole function is to
  * switch off the last guard is a feature that eventually gets clicked.
  */
-function DiscardConfirm({ t, file, plan, onCancel, onConfirm }: {
+function DiscardConfirm({ t, body, onCancel, onConfirm }: {
   t: Translate
-  file: GitFile
-  plan: DiscardPreview
+  body: string
   onCancel: () => void
   onConfirm: () => void
 }): ReactNode {
   const cancelRef = useRef<HTMLButtonElement>(null)
   useEffect(() => { cancelRef.current?.focus() }, [])
   useEffect(() => {
-    // Capture phase: the drawer's own Escape handler closes the whole drawer,
-    // and answering a question about deleting a file should not also dismiss
-    // the thing that asked it.
+    // Capture phase: while this question is open, Escape belongs to it alone
+    // — consumed here, before it can reach the page's other Escape handlers
+    // (an open picker's dismiss, the commit box's undo).
     const onKey = (event: KeyboardEvent): void => {
       if (event.key !== 'Escape') return
       event.stopPropagation()
@@ -1974,12 +2546,6 @@ function DiscardConfirm({ t, file, plan, onCancel, onConfirm }: {
     return () => { window.removeEventListener('keydown', onKey, true) }
   }, [onCancel])
 
-  const body = plan.effect === 'delete'
-    ? t('discardBodyDelete', { path: file.path })
-    : plan.effect === 'unrename'
-      ? t('discardBodyUnrename', { path: file.path, previousPath: plan.previousPath ?? '' })
-      : t('discardBodyRestore', { path: file.path, added: file.addedLines, deleted: file.deletedLines })
-
   return (
     <div className={css.confirmScrim} onClick={onCancel}>
       <div
@@ -2000,6 +2566,35 @@ function DiscardConfirm({ t, file, plan, onCancel, onConfirm }: {
   )
 }
 
+/**
+ * The whole-file roll-back's consequence, in the host's own fresh reading of
+ * the file — the difference between "goes back to its committed content" and
+ * "leaves the disk and cannot come back" is the entire question the dialog
+ * asks, and it is exactly what a stale row gets wrong.
+ */
+function discardBodyText(t: Translate, file: GitFile, plan: DiscardPreview): string {
+  if (plan.effect === 'delete') return t('discardBodyDelete', { path: file.path })
+  if (plan.effect === 'unrename') return t('discardBodyUnrename', { path: file.path, previousPath: plan.previousPath ?? '' })
+  return t('discardBodyRestore', { path: file.path, added: file.addedLines, deleted: file.deletedLines })
+}
+
+/**
+ * The BLOCK roll-back's consequence, in the pane's own rows.
+ *
+ * One case outranks the tally wording: an untracked file's whole content is
+ * the one block, and rolling THAT block back reverse-applies the new-file
+ * patch — which deletes the file from the working tree, not rewrites it. The
+ * file row's status is the gate (a tracked file whose every line changed has
+ * the same block shape and only rewrites), which is why the ask's shape alone
+ * is not enough.
+ */
+function blockDiscardBodyText(t: Translate, ask: BlockAsk, file: GitFile | undefined): string {
+  if (file !== undefined && file.status === 'untracked' && ask.wholeFile) {
+    return t('blockDiscardBodyDelete', { path: ask.path })
+  }
+  return t('blockDiscardBody', { path: ask.path, added: ask.added, deleted: ask.deleted })
+}
+
 /**
  * A slash-separated name that gives up its HEAD, never its tail.
  *
@@ -3006,9 +3601,6 @@ function CopyCommitButton({ t, text }: { t: Translate; text: string }): ReactNod
  */
 /* ---------- commit graph ---------- */
 
-/** Row height the graph and the list agree on. The lines only join up if every
- *  row is exactly as tall as the segment drawn for it. */
-const GRAPH_ROW_H = 48
 /** Horizontal distance between lanes. */
 const GRAPH_LANE_W = 14
 /** Ref chips shown inline before the subject; the rest collapse into a "+N". */
@@ -3022,23 +3614,28 @@ const laneX = (lane: number): number => lane * GRAPH_LANE_W + GRAPH_LANE_W / 2
 /**
  * One row's slice of the commit graph.
  *
- * Drawn as an SVG of exactly {@link GRAPH_ROW_H} pixels, so consecutive rows
- * butt together and a lane reads as one unbroken line down the list. The dot
- * sits at the vertical centre; edges leave the top edge, the dot, or the bottom
- * edge, and a cubic with its control points at the quarter heights gives the
- * S-curve every git client draws for a branch or a merge.
+ * Drawn as an SVG exactly as tall as the row, so consecutive rows butt together
+ * and a lane reads as one unbroken line down the list. The dot sits at the
+ * vertical centre; edges leave the top edge, the dot, or the bottom edge, and a
+ * cubic with its control points at the quarter heights gives the S-curve every
+ * git client draws for a branch or a merge.
+ *
+ * The height is passed in rather than read from a constant here: the two
+ * History arrangements want differently shaped rows, and the segment and the
+ * row it belongs to must come from the same entry of `COMMIT_ROW_H` or the
+ * lanes stop meeting across the seam between rows.
  */
-function GraphCell({ row, width, active }: { row: GraphRow; width: number; active: boolean }): ReactNode {
+function GraphCell({ row, width, active, rowH }: { row: GraphRow; width: number; active: boolean; rowH: number }): ReactNode {
   const lanes = Math.min(width, GRAPH_MAX_LANES)
   const w = lanes * GRAPH_LANE_W
-  const mid = GRAPH_ROW_H / 2
+  const mid = rowH / 2
   const visible = (lane: number): boolean => lane < GRAPH_MAX_LANES
   const stroke = (lane: number): string => `var(--gs-graph-${lane % 6})`
 
   const paths: ReactNode[] = []
   for (const lane of row.through) {
     if (!visible(lane)) continue
-    paths.push(<path key={`t${lane}`} d={`M ${laneX(lane)} 0 V ${GRAPH_ROW_H}`} stroke={stroke(lane)} />)
+    paths.push(<path key={`t${lane}`} d={`M ${laneX(lane)} 0 V ${rowH}`} stroke={stroke(lane)} />)
   }
   for (const lane of row.into) {
     if (!visible(lane) || !visible(row.lane)) continue
@@ -3055,11 +3652,11 @@ function GraphCell({ row, width, active }: { row: GraphRow; width: number; activ
   for (const lane of row.outOf) {
     if (!visible(lane) || !visible(row.lane)) continue
     paths.push(lane === row.lane
-      ? <path key={`o${lane}`} d={`M ${laneX(lane)} ${mid} V ${GRAPH_ROW_H}`} stroke={stroke(lane)} />
+      ? <path key={`o${lane}`} d={`M ${laneX(lane)} ${mid} V ${rowH}`} stroke={stroke(lane)} />
       : (
         <path
           key={`o${lane}`}
-          d={`M ${laneX(row.lane)} ${mid} C ${laneX(row.lane)} ${mid + mid / 2}, ${laneX(lane)} ${mid + mid / 2}, ${laneX(lane)} ${GRAPH_ROW_H}`}
+          d={`M ${laneX(row.lane)} ${mid} C ${laneX(row.lane)} ${mid + mid / 2}, ${laneX(lane)} ${mid + mid / 2}, ${laneX(lane)} ${rowH}`}
           stroke={stroke(lane)}
         />
       ))
@@ -3069,8 +3666,8 @@ function GraphCell({ row, width, active }: { row: GraphRow; width: number; activ
     <svg
       className={css.graphCell}
       width={w}
-      height={GRAPH_ROW_H}
-      viewBox={`0 0 ${w} ${GRAPH_ROW_H}`}
+      height={rowH}
+      viewBox={`0 0 ${w} ${rowH}`}
       aria-hidden="true"
       focusable="false"
     >
@@ -3091,7 +3688,7 @@ function GraphCell({ row, width, active }: { row: GraphRow; width: number; activ
   )
 }
 
-function CommitRow({ t, commit, active, onSelect, graphRow, graphWidth }: {
+function CommitRow({ t, commit, active, onSelect, graphRow, graphWidth, layout }: {
   t: Translate
   commit: GitCommit
   active: boolean
@@ -3099,6 +3696,8 @@ function CommitRow({ t, commit, active, onSelect, graphRow, graphWidth }: {
   /** This commit's lane geometry; absent while the graph is still empty. */
   graphRow?: GraphRow
   graphWidth: number
+  /** Which arrangement the list is in, which decides the row's shape. */
+  layout: HistoryLayout
 }): ReactNode {
   const rowRef = useRef<HTMLButtonElement>(null)
   const [open, setOpen] = useState(false)
@@ -3141,6 +3740,25 @@ function CommitRow({ t, commit, active, onSelect, graphRow, graphWidth }: {
 
   const refs = commit.refs ?? []
 
+  /* The part both shapes share, and the only part either is really for. */
+  const subjectRow = (
+    <span className={css.commitSubjectRow}>
+      {/* Capped at two. A release commit can carry six refs, and the
+          subject is what the row is actually for — the rest are counted
+          and named in the title rather than crowding it out. */}
+      {refs.slice(0, COMMIT_REF_CHIPS).map(ref => (
+        <span key={ref} className={css.commitRef} title={ref}>{ref}</span>
+      ))}
+      {refs.length > COMMIT_REF_CHIPS ? (
+        <span className={css.commitRefMore} title={refs.slice(COMMIT_REF_CHIPS).join('\n')}>
+          +{refs.length - COMMIT_REF_CHIPS}
+        </span>
+      ) : null}
+      <span className={css.commitSubject}>{commit.subject}</span>
+      {body.length > 0 ? <span className={css.commitHasBody} aria-hidden="true">···</span> : null}
+    </span>
+  )
+
   return (
     <>
       {/* The graph is a SIBLING of the row button, spanning the line's full
@@ -3149,7 +3767,7 @@ function CommitRow({ t, commit, active, onSelect, graphRow, graphWidth }: {
           inset and its rounded corners. */}
       <div className={css.commitLine}>
         {graphRow !== undefined
-          ? <GraphCell row={graphRow} width={graphWidth} active={active} />
+          ? <GraphCell row={graphRow} width={graphWidth} active={active} rowH={COMMIT_ROW_H[layout]} />
           : null}
         <button
           ref={rowRef}
@@ -3161,26 +3779,33 @@ function CommitRow({ t, commit, active, onSelect, graphRow, graphWidth }: {
           onMouseEnter={show}
           onMouseLeave={hide}
         >
-          <span className={css.commitTop}>
-            <code className={css.commitHash}>{commit.hash}</code>
-            {authorName.length > 0 ? <span className={css.commitAuthor}>{authorName}</span> : null}
-            <span className={css.commitWhen}>{commit.when}</span>
-          </span>
-          <span className={css.commitSubjectRow}>
-            {/* Capped at two. A release commit can carry six refs, and the
-                subject is what the row is actually for — the rest are counted
-                and named in the title rather than crowding it out. */}
-            {refs.slice(0, COMMIT_REF_CHIPS).map(ref => (
-              <span key={ref} className={css.commitRef} title={ref}>{ref}</span>
-            ))}
-            {refs.length > COMMIT_REF_CHIPS ? (
-              <span className={css.commitRefMore} title={refs.slice(COMMIT_REF_CHIPS).join('\n')}>
-                +{refs.length - COMMIT_REF_CHIPS}
+          {layout === 'stacked' ? (
+            <>
+              {/* One line, in git log --oneline's order: a fixed-width hash,
+                  then the subject, then who and when pushed to the right. The
+                  hash being fixed width is what aligns every subject into a
+                  column the eye can run down — leading with the author's name
+                  instead would start each subject at a different place. */}
+              <code className={css.commitHash}>{commit.hash}</code>
+              {subjectRow}
+              <span className={css.commitMeta}>
+                {authorName.length > 0 ? <span className={css.commitAuthor}>{authorName}</span> : null}
+                <span className={css.commitWhen}>{commit.when}</span>
               </span>
-            ) : null}
-            <span className={css.commitSubject}>{commit.subject}</span>
-            {body.length > 0 ? <span className={css.commitHasBody} aria-hidden="true">···</span> : null}
-          </span>
+            </>
+          ) : (
+            <>
+              {/* Two lines, because a pane beside the diff has no width to
+                  spare: everything but the subject goes above it, and the
+                  subject then gets the column to itself. */}
+              <span className={css.commitTop}>
+                <code className={css.commitHash}>{commit.hash}</code>
+                {authorName.length > 0 ? <span className={css.commitAuthor}>{authorName}</span> : null}
+                <span className={css.commitWhen}>{commit.when}</span>
+              </span>
+              {subjectRow}
+            </>
+          )}
         </button>
       </div>
       {open && box !== null && host !== null ? createPortal(
@@ -3274,58 +3899,6 @@ function FilterCalendar({ year, month, after, before, locale, onPick, onShift }:
   )
 }
 
-/**
- * The two node glyphs, in IntelliJ's New UI icon idiom: a 16px grid, 1px
- * strokes, no fill, rounded joins — outlines, where the old UI shipped filled
- * silhouettes. Hand-drawn here rather than imported, because the bundle purity
- * gate forbids an icon package and the drawer needs exactly these two; they
- * are shapes in that language, not JetBrains' own assets.
- *
- * `strokeWidth` is 1 against a viewBox that renders 1:1 at 16px, so every
- * stroke lands on a whole pixel instead of straddling two.
- *
- * Every place the drawer names a file or a directory uses these: the path
- * picker in the history filter, and the file tree behind all three tabs. The
- * CLASS names keep their `path` prefix — `scripts/verify_history_feature.py`
- * selects the picker's file rows by `label:has([class*="pathFileGlyph"])`.
- */
-function PathDirGlyph(): ReactNode {
-  return (
-    <svg
-      className={css.pathDirGlyph}
-      width="16" height="16" viewBox="0 0 16 16"
-      fill="none" stroke="currentColor" strokeWidth="1"
-      strokeLinejoin="round" strokeLinecap="round"
-      aria-hidden="true"
-    >
-      {/* Body, with the tab stepping up over the left third. The step is a
-          full 2px: at 1.3px it read as a rounded rectangle with a nick in it
-          rather than a folder. Every straight edge sits on a .5 coordinate so
-          a 1px stroke lands on one pixel instead of straddling two. */}
-      <path d="M2.5 12.75V4.25A.75.75 0 0 1 3.25 3.5H6l1.6 2h5.15A.75.75 0 0 1 13.5 6.25v6.5a.75.75 0 0 1-.75.75H3.25a.75.75 0 0 1-.75-.75Z" />
-    </svg>
-  )
-}
-
-function PathFileGlyph(): ReactNode {
-  return (
-    <svg
-      className={css.pathFileGlyph}
-      width="16" height="16" viewBox="0 0 16 16"
-      fill="none" stroke="currentColor" strokeWidth="1"
-      strokeLinejoin="round" strokeLinecap="round"
-      aria-hidden="true"
-    >
-      {/* Sheet, cut back at the top-right for the fold. Narrower and one step
-          taller than the folder, sharing its optical band, so the two never
-          look like different-sized icons in one column. */}
-      <path d="M3.5 12.75V3.25A.75.75 0 0 1 4.25 2.5H9l3.5 3.5v6.75a.75.75 0 0 1-.75.75H4.25a.75.75 0 0 1-.75-.75Z" />
-      {/* The fold itself — the corner turned back on the sheet. */}
-      <path d="M9 2.5v2.75a.75.75 0 0 0 .75.75h2.75" />
-    </svg>
-  )
-}
-
 /** Files shown per expanded directory. The search box is the way to a file in
  *  a crowded directory; the tree shows enough to browse without flooding the
  *  list, and says so when it cut the tail. */
@@ -3403,7 +3976,7 @@ function PathTreeRows({ dirs, depth, expanded, stateOf, onToggleOpen, onTogglePa
                   <label key={file} className={css.funnelRow} style={{ paddingLeft: (depth + 1) * PATH_INDENT + 4 }}>
                     <span className={css.funnelChevron} aria-hidden="true" />
                     <TriStateCheckbox state={stateOf(`${dir.path}/${file}`)} ariaLabel={`${dir.path}/${file}`} onChange={() => onTogglePath(`${dir.path}/${file}`)} />
-                    <PathFileGlyph />
+                    <PathFileGlyph path={`${dir.path}/${file}`} />
                     <span className={css.funnelName} title={`${dir.path}/${file}`}>{file}</span>
                   </label>
                 ))}
@@ -3420,15 +3993,81 @@ function PathTreeRows({ dirs, depth, expanded, stateOf, onToggleOpen, onTogglePa
 }
 
 /**
- * The commit log as its own full-height pane.
+ * The two arrangements, drawn in the same 16px/1px idiom as the drawer's other
+ * glyphs: a pane and its neighbour, either side by side or one over the other.
+ * The filled half is the list, so the picture says which pane moves.
+ */
+function ColumnsGlyph(): ReactNode {
+  return (
+    <svg
+      className={css.layoutGlyph}
+      width="16" height="16" viewBox="0 0 16 16"
+      fill="none" stroke="currentColor" strokeWidth="1"
+      strokeLinejoin="round" aria-hidden="true"
+    >
+      <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
+      <rect x="1.5" y="2.5" width="5" height="11" rx="1.5" fill="currentColor" stroke="none" opacity="0.55" />
+      <path d="M6.5 2.5 V13.5" />
+    </svg>
+  )
+}
+
+function StackedGlyph(): ReactNode {
+  return (
+    <svg
+      className={css.layoutGlyph}
+      width="16" height="16" viewBox="0 0 16 16"
+      fill="none" stroke="currentColor" strokeWidth="1"
+      strokeLinejoin="round" aria-hidden="true"
+    >
+      <rect x="1.5" y="2.5" width="13" height="11" rx="1.5" />
+      <rect x="1.5" y="2.5" width="13" height="4" rx="1.5" fill="currentColor" stroke="none" opacity="0.55" />
+      <path d="M1.5 6.5 H14.5" />
+    </svg>
+  )
+}
+
+/**
+ * One end of the arrangement switch.
  *
- * It sits BESIDE the file tree rather than stacked above it, which is what
- * GitHub Desktop, the JetBrains git log and GitKraken all do: a commit list and
- * the selected commit's files are peer panes, each with its own scrollbar. The
- * earlier stacked layout had to be collapsible because two scrolling lists were
- * sharing one narrow column — a control that hid the thing you were reading and
- * that nobody could be expected to discover. Side by side, there is nothing to
- * collapse and nothing to explain.
+ * `aria-pressed` rather than a radio group: these are two states of one view
+ * control, not a value being submitted, and a screen reader then reads the
+ * arrangement in force without the group needing a name per option.
+ * @param glyph - the arrangement, drawn.
+ * @param label - accessible name, also the tooltip.
+ * @param on - whether this arrangement is the one in force.
+ * @param onPick - switch to it.
+ */
+function LayoutButton({ glyph, label, on, onPick }: {
+  glyph: ReactNode
+  label: string
+  on: boolean
+  onPick: () => void
+}): ReactNode {
+  return (
+    <button
+      type="button"
+      className={on ? `${css.layoutButton} ${css.layoutButtonOn}` : css.layoutButton}
+      aria-pressed={on}
+      aria-label={label}
+      title={label}
+      onClick={onPick}
+    >{glyph}</button>
+  )
+}
+
+/**
+ * The commit log as its own pane, in whichever arrangement the reader picked.
+ *
+ * Beside the file tree it is a peer pane the way GitHub Desktop, the JetBrains
+ * git log and GitKraken all draw it — list and selected commit's files side by
+ * side, each with its own scrollbar. Across the top it is IDEA's git log
+ * instead, which is the arrangement that stops a long subject being cut; see
+ * `history-layout.ts` for what each costs. The switch that picks between them
+ * is in the toolbar row above, not in this pane's head — the head is the first
+ * thing to run out of room when the pane is dragged narrow, which is exactly
+ * when a reader reaches for the switch. Either way there is nothing to
+ * collapse and nothing to discover.
  *
  * Pages load by scrolling. A button at the end of a growing list is the worst
  * of both worlds — it retreats every time it is used, and it asks the reader to
@@ -3437,13 +4076,18 @@ function PathTreeRows({ dirs, depth, expanded, stateOf, onToggleOpen, onTogglePa
  * what GitHub and GitLens do. The observer is rebuilt whenever the list grows,
  * so a page too short to fill the pane immediately triggers the next one.
  */
-function CommitList({ paneRef, style, t, loading, commits, active, onSelect, hasMore, loadingMore, onLoadMore, query, onQueryChange, error, statsPath, refName, fetchAuthors, fetchRepoTree }: {
+function CommitList({ paneRef, style, layout, t, loading, commits, active, onSelect, hasMore, loadingMore, onLoadMore, query, onQueryChange, error, statsPath, refName, fetchAuthors, fetchRepoTree }: {
   /** The pane element, which the divider beside it measures from. Not named
    *  `ref`: React reserves that on a function component, so it would be stripped
    *  from props and never reach this element. */
   paneRef: Ref<HTMLDivElement>
-  /** Dragged width, when the divider has been used. */
+  /** Dragged size, when the divider has been used: a width beside the diff, a
+   *  height above it. */
   style: CSSProperties | undefined
+  /** The arrangement in force, which decides the row's shape as well as the
+   *  pane's. The control that CHANGES it is not in here — see the toolbar row
+   *  above the panes. */
+  layout: HistoryLayout
   t: Translate
   /** First page in flight — the pane says "loading", not "no history", which
    *  would be a claim about the repository the data has not made. */
@@ -3557,6 +4201,12 @@ function CommitList({ paneRef, style, t, loading, commits, active, onSelect, has
     return () => { ctrl.abort() }
   }, [funnelOpen, statsPath, refName, fetchAuthors, fetchRepoTree])
 
+  // Where the popover mounts: the drawer's overlay layer when there is one,
+  // the body otherwise. Same resolution the commit-row popover does, and the
+  // render below skips the portal when neither exists rather than handing
+  // createPortal a null container.
+  const funnelHost = funnelAnchorRef.current?.closest('[data-gs-part="overlay"]') ?? (typeof document === 'undefined' ? null : document.body)
+
   /** Every funnel interaction writes the filter through the box's grammar, so
    *  the box, the chips and the fetch can never disagree about the query. */
   const applyFilter = (next: LogFilter): void => { onQueryChange(serializeLogQuery(next)) }
@@ -3628,7 +4278,7 @@ function CommitList({ paneRef, style, t, loading, commits, active, onSelect, has
   }, [hasMore, loadingMore, commits.length, onLoadMore])
 
   return (
-    <div ref={paneRef} className={css.commitsPane} style={style} data-gs-part="commits">
+    <div ref={paneRef} className={css.commitsPane} style={style} data-layout={layout} data-gs-part="commits">
       {/* No count: the only number available is how many pages have been loaded,
           which is not how many commits exist. A number that cannot be right is
           worse than none. */}
@@ -3652,7 +4302,7 @@ function CommitList({ paneRef, style, t, loading, commits, active, onSelect, has
           spellCheck={false}
         />
       </div>
-      {funnelOpen && funnelBox !== null ? createPortal(
+      {funnelOpen && funnelBox !== null && funnelHost !== null ? createPortal(
         <div
           ref={funnelPanelRef}
           className={css.funnelPop}
@@ -3814,7 +4464,7 @@ function CommitList({ paneRef, style, t, loading, commits, active, onSelect, has
                         {hits.map(hit => (
                           <label key={hit.path} className={css.funnelRow}>
                             <TriStateCheckbox state={pathState(hit.path)} ariaLabel={hit.path} onChange={() => togglePath(hit.path)} />
-                            {hit.isFile ? <PathFileGlyph /> : <PathDirGlyph />}
+                            {hit.isFile ? <PathFileGlyph path={hit.path} /> : <PathDirGlyph />}
                             <span className={css.funnelName} title={hit.path}>{hit.path}</span>
                           </label>
                         ))}
@@ -3857,7 +4507,7 @@ function CommitList({ paneRef, style, t, loading, commits, active, onSelect, has
             >{t('filterClearAll')}</button>
           </div>
         </div>,
-        funnelAnchorRef.current?.closest('[data-gs-part="overlay"]') ?? (typeof document === 'undefined' ? null : document.body),
+        funnelHost,
       ) : null}
       {chips.length > 0 ? (
         <div className={css.filterChips}>
@@ -3890,6 +4540,7 @@ function CommitList({ paneRef, style, t, loading, commits, active, onSelect, has
               onSelect={onSelect}
               graphRow={graph.rows[index]}
               graphWidth={graph.width}
+              layout={layout}
             />
           ))}
           <div ref={sentinelRef} className={css.commitsSentinel} />
@@ -4350,7 +5001,7 @@ function TreeChildren({ node, depth, active, collapsed, onToggle, onSelect, onCh
                   left-to-right as "what this is, then what happened to it",
                   and the badge still lands in an aligned column — `.filePath`
                   is the only flexible child. */}
-              <PathFileGlyph />
+              <PathFileGlyph path={file.path} />
               <span className={css.filePath}>{basePart(file.path)}</span>
               {file.binary ? <span className={css.fileBinary}>BIN</span> : (
                 <span className={css.fileCounts}>
@@ -4380,8 +5031,27 @@ function TreeChildren({ node, depth, active, collapsed, onToggle, onSelect, onCh
 
 /* ---------- diff rendering: rows, word-level ranges, syntax pass ---------- */
 
-/** Render one file's unified-diff segment with word-level highlights and Shiki. */
-function DiffView({ segment, path, palette }: { segment: string; path: string; palette: string }): ReactNode {
+/**
+ * Render one file's unified-diff segment with word-level highlights and Shiki.
+ *
+ * This is what History and Compare show, and — unlike the side-by-side pane —
+ * it has no row model carrying block ids, because nothing here acts on a block:
+ * a commit's contents were decided long ago, so there is no staging and no
+ * roll-back. The walk still needs them, so the runs are read off the row kinds
+ * by `unifiedBlocks` and marked on the rows that scroll.
+ *
+ * The scroller is this component's own rather than the pane's. A bar that
+ * scrolls away is not a control, and the pane scrolls in BOTH directions —
+ * `sticky` fixes the vertical half and nothing fixes the horizontal one, since
+ * a block child of a scroller is only ever as wide as the scrollport. A header
+ * outside the scrolled box has neither problem.
+ */
+function DiffView({ segment, path, palette, t }: {
+  segment: string
+  path: string
+  palette: string
+  t: Translate
+}): ReactNode {
   const lang = shikiLangOf(path)
   const shikiTheme = shikiThemeOf(palette)
   const grammarGen = useSyncExternalStore(subscribeGrammarLoaded, grammarLoadCount)
@@ -4391,10 +5061,57 @@ function DiffView({ segment, path, palette }: { segment: string; path: string; p
     () => highlightForRows(rowsWithWords, lang, shikiTheme),
     [rowsWithWords, lang, shikiTheme, grammarGen],
   )
+  const blocks = useMemo(() => unifiedBlocks(rowsWithWords.map(row => row.kind)), [rowsWithWords])
+  const changes = useMemo(() => countBlocks(blocks), [blocks])
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const { goToChange } = useChangeNav(scrollRef)
+  // Read by the key listener below, which is attached once. `goToChange` only
+  // ever touches refs, but pinning it here says so rather than relying on it.
+  const walk = useRef(goToChange)
+  walk.current = goToChange
+
+  // F7 / Shift+F7, the spelling IDEA's diff viewer taught, on the same element
+  // that scrolls — so the key and the buttons cannot disagree about which pane
+  // they move. `tabIndex` is what makes it able to receive the key at all:
+  // diff text is not focusable, and a click on it would otherwise leave focus
+  // on the document body.
+  useEffect(() => {
+    const scroller = scrollRef.current
+    if (scroller === null) return
+    const onKey = (event: KeyboardEvent): void => {
+      if (event.key !== 'F7') return
+      event.preventDefault()
+      walk.current(event.shiftKey ? -1 : 1)
+    }
+    scroller.addEventListener('keydown', onKey)
+    return () => { scroller.removeEventListener('keydown', onKey) }
+  }, [])
+
   return (
+    <div className={css.diffWrap}>
+      {changes > 0 ? (
+        <div className={css.diffNav}>
+          <button
+            type="button"
+            className={css.blockBtn}
+            title={t('prevChangeHint')}
+            aria-label={t('prevChange')}
+            onClick={() => { goToChange(-1) }}
+          ><NavGlyph of="prev" /></button>
+          <button
+            type="button"
+            className={css.blockBtn}
+            title={t('nextChangeHint')}
+            aria-label={t('nextChange')}
+            onClick={() => { goToChange(1) }}
+          ><NavGlyph of="next" /></button>
+          <span className={css.sideNavCount}>{t('changeCount', { n: changes })}</span>
+        </div>
+      ) : null}
+      <div ref={scrollRef} className={css.diffScroll} tabIndex={-1}>
     <pre className={css.diffPre}>
       {rowsWithWords.map((row, i) => (
-        <div key={i} className={`${css.line} ${rowClass(row.kind)}`}>
+        <div key={i} className={`${css.line} ${rowClass(row.kind)}`} data-block={blocks[i]! >= 0 ? blocks[i] : undefined}>
           {sides.old ? <span className={css.lnOld}>{row.kind === 'add' || row.kind === 'hunk' ? '' : row.oldL}</span> : null}
           {sides.new ? <span className={css.lnNew}>{row.kind === 'del' || row.kind === 'hunk' ? '' : row.newL}</span> : null}
           <span className={`${css.gutter} ${row.kind === 'add' ? css.signAdd : row.kind === 'del' ? css.signDel : ''}`}>
@@ -4404,6 +5121,8 @@ function DiffView({ segment, path, palette }: { segment: string; path: string; p
         </div>
       ))}
     </pre>
+      </div>
+    </div>
   )
 }
 
@@ -4429,6 +5148,752 @@ function renderCode(row: RowWithRanges, tokens: readonly HighlightRun[]): ReactN
   ))
 }
 
+/* ---------- side-by-side diff rendering (working tree only) ---------- */
+
+/**
+ * The working tree's per-file diff as IDEA shows it: one tab per layer of the
+ * index, two columns with the whole file, aligned row by row.
+ *
+ * The rows come from `side-rows.ts` over the layer's full-context diff, so the
+ * alignment is read off the diff rather than computed. A change block — a
+ * maximal run of changed rows — carries its own actions: hovering any of its
+ * cells outlines the whole block and floats its buttons (stage + roll back on
+ * the unstaged tab, unstage on the staged one). The click carries the block's
+ * hunk-line indices and the rendered diff's sha, so the host can prove the
+ * file has not changed since the pane drew it.
+ *
+ * The unstaged tab's right column is also EDITABLE (the staged one is not, by
+ * design: editing the index would mean writing a blob with no file behind it).
+ * Editing arms explicitly — never per keystroke — and the buffer's whole life
+ * against the file and the poll is `side-edit.ts`'s to decide: a refresh over
+ * a dirty buffer keeps the buffer, a file that moved underneath raises the
+ * reload-or-overwrite banner, and the one save path carries the sha the buffer
+ * is based on so the host can refuse a stale write. While editing, the layout
+ * trades the diff's hole-aligned grid for a dense editor column (same
+ * metrics, same gutter rhythm): one grid cannot stay diff-aligned AND hold a
+ * dense buffer whenever deletions outrun additions, and re-diffing per
+ * keystroke is exactly the editor-library work the first cut declines.
+ *
+ * `tooLarge` and `binary` fall back to the unified view the pane already had
+ * (history and compare keep it unconditionally), with a notice — a silently
+ * different view reads as a broken one, not a guarded one.
+ */
+function SideBySideView({ t, path, palette, statsPath, fetchSides, writeChecked, scopeKey, gen, fallbackSegment, fallbackLoading, onBlockAction, onSaved, onDirtyChange }: {
+  t: Translate
+  path: string
+  palette: string
+  statsPath: string | undefined
+  fetchSides: (worktreePath: string | undefined, path: string, layer: SideLayer, signal: AbortSignal) => Promise<FileSides | null>
+  /** Save the editor buffer; the host refuses a stale sha and nothing is written. */
+  writeChecked: (worktreePath: string | undefined, path: string, text: string, expectedSha: string, signal: AbortSignal) => Promise<WriteResult | null>
+  /** Names the view the fetch belongs to, as `viewKey` does for the diff cache. */
+  scopeKey: string
+  /** Refresh generation: a new one means the tree was re-read, so refetch. */
+  gen: number
+  /** The drawer's polled view of this file's HEAD-diff; a CHANGE in it means
+   *  the drawer noticed the file move, so the pane refetches even between
+   *  refresh generations — this is how the poll reaches a dirty buffer. */
+  fallbackSegment: string
+  fallbackLoading: boolean
+  /** Run one block action; a discard routes to the drawer's confirmation. */
+  onBlockAction: (mode: BlockMode, ask: BlockAsk) => Promise<GitOpResult>
+  /** After a successful save: refresh the tree and the pane together. */
+  onSaved: () => void
+  /** Reports the buffer's dirty flag outward: the drawer guards every
+   *  gesture that would drop the buffer (file selection, close, main tab)
+   *  on it, so it must live where those gestures are handled. */
+  onDirtyChange: (dirty: boolean) => void
+}): ReactNode {
+  const [layer, setLayer] = useState<SideLayer>('unstaged')
+  // How much of the pane the left column gets. Lives here rather than in the
+  // drawer so it is one setting for the pane, and survives a file switch —
+  // the reader sized the columns for how they read, not for one file.
+  const [split, setSplit] = useState(0.5)
+  const colsRef = useRef<HTMLDivElement>(null)
+  /** The pane's one vertical scroller — what "next change" moves. */
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const { goToChange } = useChangeNav(scrollRef)
+
+  const [sides, setSides] = useState<FileSides | null>(null)
+  // Set when the RPC itself failed — most plausibly a host half older than
+  // this client (the two halves reload on different cycles). The unified view
+  // still renders, so an old host costs the new pane, not the diff.
+  const [failed, setFailed] = useState(false)
+  // The block under the pointer, or null over context rows and gutters. Hover
+  // names the BLOCK, not the cell: the outline and the buttons belong to a
+  // whole run of rows, and a per-cell affordance would scatter them.
+  const [hotBlock, setHotBlock] = useState<number | null>(null)
+  // The block whose stage/unstage call is in flight, disabling its buttons.
+  const [pendingBlock, setPendingBlock] = useState<number | null>(null)
+  // The editable right column's state and its one save path. `saving` disables
+  // the controls for the call's duration; `saveFailed` carries a non-stale
+  // failure's sentence (the stale case is `edit.conflict`'s banner instead).
+  const [edit, setEdit] = useState<EditState>(DISARMED)
+  const [saving, setSaving] = useState(false)
+  const [saveFailed, setSaveFailed] = useState<{ title: string; detail: string } | null>(null)
+  // The layer a dirty-buffer tab switch is waiting on the reader to confirm.
+  const [pendingLayer, setPendingLayer] = useState<SideLayer | null>(null)
+  // Internal fetch generation: a stale save or the banner's reload refetch
+  // without waiting for the drawer's next refresh.
+  const [refetch, setRefetch] = useState(0)
+  // Which edit session the fetched payload belongs to, and what a landing
+  // payload may do with the buffer. The ref is read inside the fetch callback
+  // (which closes over a render that may be several states old by the time the
+  // answer arrives), and the adopt mode is consumed once by the next run.
+  const idRef = useRef('')
+  const adoptRef = useRef<'auto' | 'reload'>('auto')
+  const editRef = useRef(edit)
+  editRef.current = edit
+
+  // Switching tabs refetches: the two layers are different diffs of the same
+  // file, and neither is a transform of the other client-side. A change in the
+  // drawer's polled segment for this file refetches too — the poll's way of
+  // saying the file moved — which is what lets a change under a DIRTY buffer
+  // raise the banner within one poll interval instead of at the next refresh.
+  //
+  // Only a NEW file/layer/scope may blank the pane and disarm the editor; a
+  // refetch of the same identity keeps the current payload on screen until the
+  // answer lands, because blanking it would unmount the editor mid-keystroke.
+  useEffect(() => {
+    const id = `${scopeKey}\x1f${path}\x1f${layer}`
+    const identityChanged = idRef.current !== id
+    if (identityChanged) idRef.current = id
+    const adopt = identityChanged ? 'reset' : adoptRef.current
+    adoptRef.current = 'auto'
+    const ctrl = new AbortController()
+    let alive = true
+    if (identityChanged) {
+      setSides(null)
+      setSaveFailed(null)
+      setPendingLayer(null)
+    }
+    if (identityChanged || !editRef.current.armed) setFailed(false)
+    fetchSides(statsPath, path, layer, ctrl.signal)
+      .then(value => {
+        if (!alive) return
+        // While armed, a failed background refetch keeps the pane as it is:
+        // dropping the editor over a transient RPC failure would cost the
+        // buffer's DOM (focus, IME composition) for no reader benefit.
+        if (value === null) {
+          if (!editRef.current.armed) setFailed(true)
+          return
+        }
+        setSides(value)
+        setEdit(prev => adopt === 'reset' ? resetSides(prev, value)
+          : adopt === 'reload' ? reloadSides(prev, value)
+          : applySides(prev, value))
+      })
+      .catch(() => { if (alive && !editRef.current.armed) setFailed(true) })
+    return () => { alive = false; ctrl.abort() }
+  }, [fetchSides, statsPath, path, layer, scopeKey, gen, fallbackSegment, refetch])
+
+  const lang = shikiLangOf(path)
+  const shikiTheme = shikiThemeOf(palette)
+  const grammarGen = useSyncExternalStore(subscribeGrammarLoaded, grammarLoadCount)
+  const rows = useMemo(() => {
+    if (sides === null || sides.diff.length === 0) return []
+    const file = parsePatch(sides.diff)
+    // A diff with no hunk (mode-only change, or text patch-model cannot parse)
+    // has no rows to align; the no-change treatment below is the honest view.
+    return file === null ? [] : alignRows(file)
+  }, [sides])
+  // Highlight each column as one file — a row is not a program, and lexing
+  // fragments is what made the unified view paint keywords as plain text.
+  //
+  // These are UNDEFINED until a lazy grammar loads, and stay undefined for a
+  // file whose extension has no grammar at all (`go.mod`, `Dockerfile`), so
+  // every read below is optional-chained. `renderSideCode` already takes
+  // `undefined` and renders the plain text for it; what crashes is indexing
+  // the array itself, and `strict` is off in tsconfig, so the compiler will
+  // not say so.
+  const leftSyntax = useMemo(
+    () => highlightFile(rows.map(row => row.left === null ? '' : row.left.text), lang, shikiTheme),
+    [rows, lang, shikiTheme, grammarGen],
+  )
+  const rightSyntax = useMemo(
+    () => highlightFile(rows.map(row => row.right === null ? '' : row.right.text), lang, shikiTheme),
+    [rows, lang, shikiTheme, grammarGen],
+  )
+
+  /** The editor half of the pane, present only on the unstaged layer. */
+  const editable = layer === 'unstaged' && edit.armed
+  const dirty = isDirty(edit)
+  // Whether this payload may enter the editor at all: text carrying \r would
+  // be normalised to \n by the textarea the moment it landed, and the next
+  // save would rewrite every line ending in the file. The gate lives in
+  // `side-edit.ts` with the rest of the buffer's rules.
+  const armable = sides !== null && editableSides(sides)
+  // Which sentence the withheld editor gets: CRLF and a non-UTF-8 encoding are
+  // different problems, and one message for both leaves the reader guessing
+  // whether converting line endings would help.
+  const refusal = sides === null ? null : armRefusal(sides)
+
+
+  // The drawer guards every gesture that would drop the buffer — selecting
+  // another file, closing, switching the main tab — so it needs the flag as
+  // it changes, not at click time from a stale render. Reported on the FLAG
+  // (not the buffer) so it fires on the transitions that matter; the cleanup
+  // clears it when this pane unmounts, so no orphaned flag prompts later.
+  useEffect(() => {
+    onDirtyChange(dirty)
+    return () => { onDirtyChange(false) }
+  }, [dirty, onDirtyChange])
+  // The buffer's lines and their highlight, for the editor's underlay: the
+  // visible text under the transparent textarea, which is what keeps syntax
+  // coloring and the caret on the same grid while typing.
+  const bufferLines = useMemo(() => edit.buffer.split('\n'), [edit.buffer])
+  // What Tab inserts, learned from the file rather than configured. Keyed on
+  // the BASE text, not the buffer: re-detecting mid-edit would let a couple of
+  // freshly typed lines redefine the unit under the reader's hands.
+  const indentOfBuffer = useMemo(() => detectIndent(edit.baseText), [edit.baseText])
+  // The index side as one text, which is what the editor tints against while
+  // the reader types. It is the diff's own left column joined back up — every
+  // row of a full-context diff carries a left cell unless the line is an
+  // addition, which by definition is not on that side.
+  const indexText = useMemo(() => {
+    const left = rows.filter(row => row.left !== null).map(row => row.left!.text)
+    return left.length === 0 ? '' : left.join('\n') + '\n'
+  }, [rows])
+  // The editor's buffer is a whole file, so it takes the whole-file pass —
+  // and it lags the typing, for the same reason the browser's does: a Shiki
+  // pass per keystroke is what makes a large file unusable to edit.
+  const paintedLines = useIdleValue(bufferLines, HIGHLIGHT_IDLE_MS)
+  const editSyntax = useMemo(
+    () => edit.armed && paintedLines.length <= HIGHLIGHT_LINE_CAP
+      ? highlightWholeFile(paintedLines, lang, shikiTheme)
+      : [],
+    [edit.armed, paintedLines, lang, shikiTheme, grammarGen],
+  )
+  // The left column while editing renders dense — one row per INDEX line, no
+  // holes — because the right column is now the dense buffer; a hole-aligned
+  // left beside a dense right is the alignment the diff view owes, not the
+  // editor. Each entry keeps its index into `rows` for its syntax tokens.
+  const leftRows = useMemo(() => rows.map((row, i) => ({ row, i })).filter(entry => entry.row.left !== null), [rows])
+
+  // Arming drops the caret straight into the buffer: the click that armed the
+  // editor said "I want to type here", and a second click to focus is a tax.
+
+  /** Arm the editor from the payload on screen; the unstaged tab, and only
+   *  for a payload `editableSides` accepts — armEdit itself refuses the rest,
+   *  so even a stray call cannot put CRLF text into the buffer. */
+  const arm = (): void => {
+    if (sides === null || layer !== 'unstaged' || !editableSides(sides)) return
+    setEdit(prev => armEdit(prev, sides))
+  }
+
+  /**
+   * The one save path, shared by the Save button, Ctrl/Cmd+S and the banner's
+   * overwrite action — they differ only in WHICH sha the host is asked to
+   * check: the buffer's basis for a save, the file as it stands NOW for an
+   * explicit overwrite of a concurrent writer's version.
+   *
+   * On success the basis moves to the sha the host read back and the drawer
+   * refreshes (tree and pane together). On `stale` the banner goes up and the
+   * pane refetches WITHOUT touching the buffer, so the banner's reload and
+   * overwrite actions read the file's true current state. Everything else is
+   * a failed save with a sentence.
+   */
+  const runSave = async (expectedSha: string): Promise<void> => {
+    if (sides === null || !dirty || saving) return
+    const savedText = edit.buffer
+    // The edit session this save belongs to. A slow RPC can outlive a file or
+    // layer switch, and applying THIS save's outcome to the NEXT file's edit
+    // state would re-base that buffer onto text it never held — so every
+    // pane-local effect below is gated on the session still being current.
+    // The tree refresh on success is not: the file on disk did move.
+    const session = idRef.current
+    setSaving(true)
+    try {
+      const result = await writeChecked(statsPath, path, savedText, expectedSha, new AbortController().signal)
+      const stillHere = idRef.current === session
+      if (result === null) {
+        if (stillHere) setSaveFailed({ title: t('saveUnavailable'), detail: '' })
+      } else if (result.ok) {
+        if (stillHere) {
+          setSaveFailed(null)
+          setEdit(prev => applySaveOk(prev, savedText, result.sha ?? ''))
+        }
+        onSaved()
+      } else if (result.failure === 'stale') {
+        if (stillHere) {
+          setEdit(prev => markConflict(prev))
+          setRefetch(n => n + 1)
+        }
+      } else {
+        if (stillHere) setSaveFailed({ title: t('saveFailed'), detail: (result.error ?? '').trim() })
+      }
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  /**
+   * The banner's two answers to a file that moved underneath. Overwrite may
+   * only run once the post-refusal refetch has landed (the fresh targetSha is
+   * what the host checks the overwrite against); until then the button waits,
+   * because re-sending the refused sha would just refuse again.
+   */
+  const canOverwrite = dirty && edit.conflict && sides !== null && sides.targetSha !== edit.baseSha
+  const overwrite = (): Promise<void> => sides === null ? Promise.resolve() : runSave(sides.targetSha)
+  /** Reload: the reader chose the file over the buffer; drop the edits. */
+  const reload = (): void => {
+    setSaveFailed(null)
+    adoptRef.current = 'reload'
+    setRefetch(n => n + 1)
+  }
+  /** Revert the buffer to its basis, in place; the conflict flag stands. */
+  const revert = (): void => {
+    setSaveFailed(null)
+    setEdit(prev => ({ ...prev, buffer: prev.baseText }))
+  }
+
+  /**
+   * A layer tab is one click away from dropping the buffer: with unsaved
+   * edits the click asks first, and only the dialog's answer switches.
+   */
+  const switchLayer = (next: SideLayer): void => {
+    if (next === layer) return
+    if (dirty) {
+      setPendingLayer(next)
+      return
+    }
+    setLayer(next)
+  }
+  const confirmLeave = (): void => {
+    const next = pendingLayer
+    setPendingLayer(null)
+    if (next !== null) setLayer(next)
+  }
+
+  /** Ctrl/Cmd+S inside the pane: the editor's other save affordance. */
+  const onPaneKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>): void => {
+    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 's') {
+      event.preventDefault()
+      if (dirty && !saving) void runSave(edit.baseSha)
+    }
+    // F7 and Shift+F7, the spelling IDEA's diff viewer taught. Chosen over
+    // Alt+Arrow because CodeMirror's default keymap binds those to moving a
+    // line, and the armed editor lives inside this same pane.
+    if (event.key === 'F7') {
+      event.preventDefault()
+      goToChange(event.shiftKey ? -1 : 1)
+    }
+  }
+
+  /**
+   * One bubbling hover listener turns the cell under the pointer into its
+   * block id: every changed row's code cells carry `data-block`, so `closest`
+   * reads the block off whatever the pointer is over — no handler per cell,
+   * and a pointer over context or a gutter simply clears the hot block.
+   */
+  /**
+   * The divider: a ratio, not a pixel width, so the columns keep their
+   * proportion when the drawer itself is resized.
+   *
+   * Clamped well short of either edge — a column dragged to nothing looks
+   * like a broken pane, and there is no affordance to drag it back out of.
+   */
+  const onSplitDrag = (clientX: number): void => {
+    const box = colsRef.current?.getBoundingClientRect()
+    if (box === undefined || box.width === 0) return
+    const ratio = (clientX - box.left) / box.width
+    setSplit(Math.min(SPLIT_MAX, Math.max(SPLIT_MIN, ratio)))
+  }
+
+  const onBodyHover = (event: ReactMouseEvent<HTMLDivElement>): void => {
+    const hit = (event.target as Element).closest('[data-block]')
+    const id = hit === null ? null : Number(hit.getAttribute('data-block'))
+    setHotBlock(prev => (prev === id ? prev : id))
+  }
+
+  /**
+   * Run one block action with the coordinates of the diff on screen.
+   *
+   * Discard never acts from the click — the drawer opens the confirmation,
+   * and the confirmed call carries this same snapshot, so a file that moved
+   * underneath the dialog is refused host-side rather than re-derived from
+   * whatever the poll has fetched since. Stage and unstage run now; the
+   * clicked block's buttons stay disabled until the answer lands, and the
+   * drawer's op lock refuses any other block click meanwhile.
+   */
+  const runBlock = async (mode: BlockMode, block: number): Promise<void> => {
+    if (sides === null) return
+    const ask: BlockAsk = {
+      path, layer, diffSha: sides.diffSha,
+      lines: blockLines(rows, block),
+      ...blockTally(rows, block),
+      wholeFile: blockIsWholeFile(rows, block),
+    }
+    if (mode === 'discard') {
+      void onBlockAction(mode, ask)
+      return
+    }
+    setPendingBlock(block)
+    try {
+      await onBlockAction(mode, ask)
+    } finally {
+      setPendingBlock(null)
+    }
+  }
+
+  /** The pane the drawer had before this view existed, notice included. */
+  const unifiedFallback = (): ReactNode => fallbackSegment.length > 0
+    ? <DiffView segment={fallbackSegment} path={path} palette={palette} t={t} />
+    : <div className={css.empty}>{fallbackLoading ? t('loadingDiff') : t('noTextDiff')}</div>
+
+  if (failed) return unifiedFallback()
+  if (sides === null) return <div className={css.empty}>{t('loadingDiff')}</div>
+  if (sides.binary) return <div className={css.empty}>{t('binaryFile')}</div>
+  if (sides.tooLarge) {
+    return (
+      <>
+        <div className={css.sideNotice}>{t('diffTooLarge')}</div>
+        {unifiedFallback()}
+      </>
+    )
+  }
+  // The tabs are the pane's, not one layer's: an empty diff here (a fully
+  // staged file's unstaged side, a file with nothing staged) is one click from
+  // the other layer, and the Edit button still arms — the working tree is the
+  // edit target even when every change in it is already staged. So the
+  // no-change treatment below is a state of the BODY (`sideBodyState`), never
+  // an early return for the pane: returning here is what used to blank the
+  // tabs for exactly these files.
+  const bodyState = sideBodyState(rows, editable)
+  /**
+   * How many separate places this file changed — the count the nav walks.
+   *
+   * Offered only for the read view. While armed, the left column is the index
+   * side rendered DENSE and the right one is a buffer whose line count has
+   * already diverged from it, so scrolling to a block would put the change at
+   * the top of one column and unrelated code at the top of the other.
+   */
+  const changes = bodyState.kind === 'rows' ? blockCount(rows) : 0
+  // The hovered block's first row hosts the action bar; a del-only block has
+  // no right cell, so its bar rides the left one instead. In the editor
+  // layout the left column is dense, so the bar rides its first left row.
+  const hotFirst = hotBlock === null ? -1 : rows.findIndex(row => row.block === hotBlock)
+  const hotFirstLeft = hotBlock === null ? -1 : leftRows.findIndex(entry => entry.row.block === hotBlock)
+  // Dirty buffer, no block actions: a patch computed from the loaded diff
+  // would land on top of edits the patch knows nothing about.
+  const barDisabled = pendingBlock !== null || dirty
+  const blockBar = (block: number): ReactNode => (
+    <span className={css.blockBar}>
+      {layer === 'staged' ? (
+        <button
+          type="button"
+          className={css.blockBtn}
+          disabled={barDisabled}
+          onClick={() => { void runBlock('unstage', block) }}
+        >{t('blockUnstage')}</button>
+      ) : (
+        <>
+          <button
+            type="button"
+            className={css.blockBtn}
+            disabled={barDisabled}
+            onClick={() => { void runBlock('stage', block) }}
+          >{t('blockStage')}</button>
+          <button
+            type="button"
+            className={`${css.blockBtn} ${css.blockBtnDanger}`}
+            disabled={barDisabled}
+            onClick={() => { void runBlock('discard', block) }}
+          >{t('blockDiscard')}</button>
+        </>
+      )}
+    </span>
+  )
+  /** Clicking the working-tree column is the arm gesture readers will try
+   *  first — unless the click was really a text selection, or landed on a
+   *  block button, in which case it keeps its own meaning. */
+  const armFromCell = (event: ReactMouseEvent<HTMLSpanElement>): void => {
+    if (edit.armed) return
+    if ((event.target as Element).closest('button') !== null) return
+    const selection = window.getSelection()
+    if (selection !== null && !selection.isCollapsed) return
+    arm()
+  }
+  return (
+    /* `tabIndex={-1}` is what makes F7 reachable. The handler below is on
+       this element, so it only sees keys whose target is inside it — and
+       clicking diff text, which is not focusable, otherwise leaves focus on
+       the document body and the key never arrives. A negative index keeps the
+       pane out of the tab order while letting a click land focus here. */
+    <div className={css.sidePane} tabIndex={-1} onKeyDown={onPaneKeyDown}>
+      <div className={css.sideTabs}>
+        <button
+          type="button"
+          aria-pressed={layer === 'unstaged'}
+          className={layer === 'unstaged' ? `${css.sideTab} ${css.sideTabActive}` : css.sideTab}
+          onClick={() => switchLayer('unstaged')}
+        >{t('tabUnstaged')}</button>
+        <button
+          type="button"
+          aria-pressed={layer === 'staged'}
+          className={layer === 'staged' ? `${css.sideTab} ${css.sideTabActive}` : css.sideTab}
+          onClick={() => switchLayer('staged')}
+        >{t('tabStaged')}</button>
+        {/* A file whose whole delta is one line is unfindable by scrolling:
+            the tint only shows once you are already looking at it. The row
+            model knows where every change is, so these two say so. The count
+            is the other half of the answer — "there is one place to look" is
+            what stops the hunt. */}
+        {changes > 0 ? (
+          <span className={css.sideNav}>
+            <button
+              type="button"
+              className={css.blockBtn}
+              title={t('prevChangeHint')}
+              aria-label={t('prevChange')}
+              onClick={() => { goToChange(-1) }}
+            ><NavGlyph of="prev" /></button>
+            <button
+              type="button"
+              className={css.blockBtn}
+              title={t('nextChangeHint')}
+              aria-label={t('nextChange')}
+              onClick={() => { goToChange(1) }}
+            ><NavGlyph of="next" /></button>
+            <span className={css.sideNavCount}>{t('changeCount', { n: changes })}</span>
+          </span>
+        ) : null}
+        {/* Editing arms explicitly and saves explicitly — the two halves of
+            "never per keystroke". Save enables only while dirty; Revert drops
+            the buffer back onto its basis without touching the file. A
+            payload the CRLF gate refuses offers no Edit button at all — the
+            notice below says why rather than leaving a button that does
+            nothing. */}
+        {layer === 'unstaged' ? (
+          <span className={css.sideActions}>
+            {edit.armed ? (
+              <>
+                <button
+                  type="button"
+                  className={`${css.blockBtn}${dirty ? ` ${css.sideSaveReady}` : ''}`}
+                  disabled={!dirty || saving}
+                  onClick={() => { void runSave(edit.baseSha) }}
+                >{t('fileSave')}</button>
+                <button
+                  type="button"
+                  className={css.blockBtn}
+                  disabled={!dirty || saving}
+                  onClick={revert}
+                >{t('fileRevert')}</button>
+              </>
+            ) : armable ? (
+              <button type="button" className={css.blockBtn} onClick={arm}>{t('editFile')}</button>
+            ) : null}
+          </span>
+        ) : null}
+      </div>
+      {dirty ? <div className={css.sideNotice}>{t('editingNotice')}</div> : null}
+      {layer === 'unstaged' && refusal !== null && !edit.armed ? <div className={css.sideNotice}>{t(refusal === 'encoding' ? 'encodingNotice' : 'crlfNotice')}</div> : null}
+      {/* §4's row: the file moved underneath a dirty buffer — by the poll's
+          notice or by a refused save — and the reader chooses which version
+          survives. Overwrite waits for the refetch the refusal triggered, so
+          it is checked against the file as it truly stands. */}
+      {dirty && edit.conflict ? (
+        <div className={css.sideBanner} role="alert">
+          <span className={css.sideBannerTitle}>{t('staleTitle')}</span>
+          <span>{t('staleBody')}</span>
+          <span className={css.sideBannerActs}>
+            <button type="button" className={`${css.blockBtn} ${css.blockBtnDanger}`} disabled={saving} onClick={reload}>{t('staleReload')}</button>
+            <button type="button" className={css.blockBtn} disabled={!canOverwrite || saving} onClick={() => { void overwrite() }}>{t('staleOverwrite')}</button>
+          </span>
+        </div>
+      ) : null}
+      {saveFailed !== null ? (
+        <div className={css.sideBanner} role="alert">
+          <span className={css.sideBannerTitle}>{saveFailed.title}</span>
+          {saveFailed.detail.length > 0 ? <span>{saveFailed.detail}</span> : null}
+          <span className={css.sideBannerActs}>
+            <button type="button" className={css.blockBtn} disabled={!dirty || saving} onClick={() => { void runSave(edit.baseSha) }}>{t('saveRetry')}</button>
+          </span>
+        </div>
+      ) : null}
+      {/* Two columns that scroll sideways independently, with a divider the
+          reader can drag. One grid spanning both sides could not do this: its
+          tracks are sized by the widest line in the file, so a drag moved
+          nothing on exactly the wide files where the space matters. Vertical
+          alignment survives the split because both columns render one row per
+          aligned row at the same line height — the diff decides the rows, the
+          layout only decides how much width each side gets. */}
+      <div ref={scrollRef} className={css.sideScroll}>
+      {bodyState.kind === 'empty' ? (
+        <div className={css.empty}>{t('noTextDiff')}</div>
+      ) : (
+      <div
+        ref={colsRef}
+        className={css.sideCols}
+        onMouseOver={onBodyHover}
+        onMouseLeave={() => { setHotBlock(null) }}
+      >
+        <div className={css.sideCol} style={{ flexBasis: `${split * 100}%` }}>
+          <div className={css.sideColGrid}>
+            {bodyState.kind === 'editor' ? (
+              /* While armed the left column renders the index side DENSE —
+                 one row per index line, no diff holes — because the right
+                 column is a buffer whose line count diverges from the diff
+                 the moment a keystroke lands. */
+              leftRows.map((entry, k) => {
+                const { row, i } = entry
+                const hot = hotBlock !== null && row.block === hotBlock
+                const hotClass = hot ? ` ${css.sideBlockHot}` : ''
+                return (
+                  <Fragment key={`l${i}`}>
+                    <span className={`${sideNumClass(row, 'left')}${hotClass}`}>{row.left!.line}</span>
+                    <span className={`${css.sideCode} ${sideCodeClass(row, 'left')}${hotClass}`} data-block={row.block >= 0 ? row.block : undefined}>
+                      {renderSideCode(row.left, leftSyntax?.[i])}
+                      {hot && k === hotFirstLeft ? blockBar(row.block) : null}
+                    </span>
+                  </Fragment>
+                )
+              })
+            ) : (
+              rows.map((row, i) => {
+                const hot = hotBlock !== null && row.block === hotBlock
+                const hotClass = hot ? ` ${css.sideBlockHot}` : ''
+                // The block's action bar rides in this column only for a row
+                // with no right-hand side — a pure deletion, where the right
+                // column has no cell to hang it on.
+                const bar = hot && i === hotFirst && row.right === null ? blockBar(row.block) : null
+                return (
+                  <Fragment key={i}>
+                    <span className={`${sideNumClass(row, 'left')}${hotClass}`}>{row.left === null ? '' : row.left.line}</span>
+                    <span className={`${css.sideCode} ${sideCodeClass(row, 'left')}${hotClass}`} data-block={row.block >= 0 ? row.block : undefined}>
+                      {renderSideCode(row.left, leftSyntax?.[i])}
+                      {bar}
+                    </span>
+                  </Fragment>
+                )
+              })
+            )}
+          </div>
+        </div>
+        <PaneDivider label={t('resizeSides')} onDrag={onSplitDrag} />
+        <div className={`${css.sideCol} ${css.sideColRight}`}>
+          {bodyState.kind === 'editor' ? (
+            <CodeEditor
+              value={edit.buffer}
+              original={indexText}
+              onChange={next => { setEdit(prev => ({ ...prev, buffer: next })) }}
+              syntax={editSyntax}
+              indent={indentOfBuffer}
+              ariaLabel={path}
+              onSave={() => { if (dirty && !saving) void runSave(edit.baseSha) }}
+            />
+          ) : (
+            <div className={css.sideColGrid}>
+              {rows.map((row, i) => {
+                const hot = hotBlock !== null && row.block === hotBlock
+                const hotClass = hot ? ` ${css.sideBlockHot}` : ''
+                const bar = hot && i === hotFirst && row.right !== null ? blockBar(row.block) : null
+                return (
+                  <Fragment key={i}>
+                    <span className={`${sideNumClass(row, 'right')}${hotClass}`}>{row.right === null ? '' : row.right.line}</span>
+                    <span
+                      className={`${css.sideCode} ${sideCodeClass(row, 'right')}${hotClass}${layer === 'unstaged' && armable ? ` ${css.sideArmable}` : ''}`}
+                      data-block={row.block >= 0 ? row.block : undefined}
+                      onClick={layer === 'unstaged' && armable ? armFromCell : undefined}
+                    >
+                      {renderSideCode(row.right, rightSyntax?.[i])}
+                      {bar}
+                    </span>
+                  </Fragment>
+                )
+              })}
+            </div>
+          )}
+        </div>
+      </div>
+      )}
+      </div>
+      {pendingLayer !== null ? (
+        <LeaveEditsConfirm t={t} path={path} onCancel={() => { setPendingLayer(null) }} onConfirm={confirmLeave} />
+      ) : null}
+    </div>
+  )
+}
+
+/**
+ * The unsaved-edits guard, rendered at both sites that defer a gesture on the
+ * buffer's answer: the pane's layer-tab switch, and the drawer level (file
+ * selection, main tab, source switch, close) for every gesture that would
+ * drop the buffer. Same reason as the roll-back confirmation — the click it
+ * answers to is one gesture away from losing work. Cancel holds the initial
+ * focus and Escape closes, because the default answer to losing edits is no.
+ */
+function LeaveEditsConfirm({ t, path, onCancel, onConfirm }: {
+  t: Translate
+  path: string
+  onCancel: () => void
+  onConfirm: () => void
+}): ReactNode {
+  const stayRef = useRef<HTMLButtonElement>(null)
+  useEffect(() => { stayRef.current?.focus() }, [])
+  useEffect(() => {
+    // Capture phase, like the roll-back dialog: while a question about edits
+    // is open, Escape answers it and nothing else — consumed here, before it
+    // can reach the page's other Escape handlers (an open picker's dismiss,
+    // the commit box's undo).
+    const onKey = (event: KeyboardEvent): void => {
+      if (event.key !== 'Escape') return
+      event.stopPropagation()
+      onCancel()
+    }
+    window.addEventListener('keydown', onKey, true)
+    return () => { window.removeEventListener('keydown', onKey, true) }
+  }, [onCancel])
+  return (
+    <div className={css.confirmScrim} onClick={onCancel}>
+      <div
+        className={css.confirmBox}
+        role="alertdialog"
+        aria-modal="true"
+        aria-label={t('unsavedTitle')}
+        onClick={event => event.stopPropagation()}
+      >
+        <div className={css.confirmTitle}>{t('unsavedTitle')}</div>
+        <div className={css.confirmBody}>{t('unsavedBody', { path })}</div>
+        <div className={css.confirmActions}>
+          <button ref={stayRef} type="button" className={css.btn} onClick={onCancel}>{t('unsavedStay')}</button>
+          <button type="button" className={`${css.btn} ${css.btnDanger}`} onClick={onConfirm}>{t('unsavedLeave')}</button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/** Line-number cell class: a PRESENT cell of a changed row carries its side's
+ *  tint into the gutter; an absent one stays blank, the way a split diff shows
+ *  a one-sided change with an empty opposite pane rather than a tinted void. */
+function sideNumClass(row: SideRow, side: 'left' | 'right'): string {
+  const cell = side === 'left' ? row.left : row.right
+  if (cell === null || row.kind === 'same') return css.sideNum
+  return `${css.sideNum} ${side === 'left' ? css.sideNumDel : css.sideNumAdd}`
+}
+
+/** Code cell class: deletions tint left, additions right, context stays quiet. */
+function sideCodeClass(row: SideRow, side: 'left' | 'right'): string {
+  const cell = side === 'left' ? row.left : row.right
+  if (cell === null || row.kind === 'same') return css.sideCodeSame
+  return `${side === 'left' ? css.sideCodeDel : css.sideCodeAdd} ${css.sideCellBlock}`
+}
+
+/** One cell's Shiki runs, or its plain text when no tokens exist. */
+function renderSideCode(cell: SideCell | null, tokens: readonly HighlightRun[] | undefined): ReactNode {
+  if (cell === null) return ''
+  if (tokens === undefined || tokens.length === 0) return cell.text
+  if (tokens.length === 1 && tokens[0]!.color === undefined && !tokens[0]!.italic) return cell.text
+  return tokens.map((tok, i) => (
+    <span
+      key={i}
+      style={tok.color === undefined && !tok.italic ? undefined : { color: tok.color, fontStyle: tok.italic ? 'italic' : undefined }}
+    >{tok.text}</span>
+  ))
+}
+
 /* ---------- shared helpers ---------- */
 
 /** Split a combined `git diff` into path -> its segment text. */