@keith9681/dsh-sidebar 0.15.2

package/src/client/BrowserView.tsx

@@ -0,0 +1,253 @@
+/**
+ * The built-in browser tab: an address bar plus a sandboxed iframe.
+ *
+ * Security model (see browser.ts + the sandbox tokens below): the iframe is
+ * ALWAYS sandboxed without `allow-same-origin` (opaque origin — the visited
+ * page can never sit on the GUI's origin, read its storage, or reach
+ * /sidebar/api) and without `allow-top-navigation` (a page must not hijack
+ * the GUI). The address bar only accepts http(s) and refuses loopback /
+ * the GUI's own origin. The side card setting "关闭浏览器沙箱" drops the
+ * sandbox attribute entirely for fully trusted sites — the visited page then
+ * runs with the GUI's own origin and full session access, so a persistent
+ * warning bar renders while it is off.
+ *
+ * The URL is persisted onto the tab (path/title via the patchTab reducer)
+ * so a reload restores the visited page; the back/forward stack only tracks
+ * address-bar navigations (in-frame link clicks are cross-origin and
+ * invisible — a documented limitation).
+ */
+import { useEffect, useState } from 'react'
+import {
+  IconChevronLeftOutline14,
+  IconChevronRightOutline14,
+  IconLinkOutline14,
+  IconRefreshOutline14,
+  IconWarningOutline16,
+} from '@deepseek-ai/dsh-client-ui-primitives'
+import { VscLinkExternal } from 'react-icons/vsc'
+import { api } from './api.ts'
+import { embeddabilityOf, normalizeBrowserUrl } from './browser.ts'
+import { patchTab } from './state.ts'
+import { SandboxStatusBar } from './SandboxStatusBar.tsx'
+import { t } from './locales.ts'
+import type { TabComponentProps } from './service.ts'
+import css from './sidebar.module.css'
+
+/**
+ * The browser iframe sandbox tokens. NO allow-same-origin (opaque origin —
+ * no GUI storage/API access), NO allow-top-navigation (a browsed page must
+ * not hijack the GUI). allow-forms/allow-popups/allow-downloads/allow-modals
+ * keep login flows working; allow-popups-to-escape-sandbox lets OAuth
+ * popups open as normal tabs (they are cross-origin to the GUI either way).
+ */
+export const BROWSER_IFRAME_SANDBOX =
+  'allow-scripts allow-forms allow-popups allow-downloads allow-modals allow-popups-to-escape-sandbox'
+
+export function BrowserView(props: TabComponentProps) {
+  const { store, tab } = props
+  // The current address (initialized from the persisted tab.path so a
+  // reload restores the visited page).
+  const [url, setUrl] = useState<string | undefined>(tab.path)
+  const [input, setInput] = useState<string>(tab.path ?? '')
+  /** Blocked/invalid hint shown under the address bar (null = none). */
+  const [message, setMessage] = useState<string | null>(null)
+  /** Address-bar navigation history (in-frame clicks are not tracked). */
+  const [history, setHistory] = useState<string[]>(tab.path !== undefined ? [tab.path] : [])
+  const [cursor, setCursor] = useState<number>(tab.path !== undefined ? 0 : -1)
+  /** Bumped on reload to remount the iframe (also remounts on sandbox flip). */
+  const [reloadKey, setReloadKey] = useState(0)
+  /** TEMPORARY sandbox unlock for THIS surface only (never writes the global
+   *  side card setting; lasts until the tab unmounts or the user restores). */
+  const [localUnlock, setLocalUnlock] = useState(false)
+  const noSandbox = store.getPrefs().browserNoSandbox === true || localUnlock
+  /** A site that refuses to be embedded (X-Frame-Options / frame-ancestors):
+   *  the probe verdict shown instead of the blank iframe. */
+  const [embedBlocked, setEmbedBlocked] = useState<string | null>(null)
+  /** The user asked to load the refused site anyway (keeps the plain iframe). */
+  const [forceEmbed, setForceEmbed] = useState(false)
+
+  // Probe every navigation (address bar, history, restored path): when the
+  // target forbids embedding, show the reason + open-in-browser instead of
+  // the browser's cryptic "refused to connect" blank frame. A failed probe
+  // (unreachable) keeps the plain iframe.
+  useEffect(() => {
+    if (url === undefined) return
+    let cancelled = false
+    setEmbedBlocked(null)
+    setForceEmbed(false)
+    void api.browserProbe(url).then((probe) => {
+      if (!cancelled && embeddabilityOf(probe) === 'blocked') setEmbedBlocked(url)
+    }).catch(() => { /* unreachable: keep the plain iframe */ })
+    return () => { cancelled = true }
+  }, [url])
+
+  const persist = (nextUrl: string): void => {
+    let host = nextUrl
+    try { host = new URL(nextUrl).hostname } catch { /* keep the URL as title */ }
+    store.reduce(state => patchTab(state, tab.id, { path: nextUrl, title: host }))
+  }
+
+  const navigateTo = (raw: string): void => {
+    const result = normalizeBrowserUrl(raw, window.location.origin)
+    if (result.kind === 'ok') {
+      const next = result.url
+      setUrl(next)
+      setInput(next)
+      setMessage(null)
+      // Push onto the stack, dropping any stale forward entries.
+      setHistory(previous => [...previous.slice(0, cursor + 1), next])
+      setCursor(previous => previous + 1)
+      setReloadKey(key => key + 1)
+      persist(next)
+      return
+    }
+    setMessage(result.kind === 'invalid'
+      ? t('browserInvalid')
+      : result.reason === 'scheme' ? t('browserBlockedScheme')
+      : t('browserBlockedLoopback'))
+  }
+
+  const goBack = (): void => {
+    if (cursor <= 0) return
+    const next = history[cursor - 1]!
+    setCursor(cursor - 1)
+    setUrl(next)
+    setInput(next)
+    setReloadKey(key => key + 1)
+  }
+
+  const goForward = (): void => {
+    if (cursor >= history.length - 1) return
+    const next = history[cursor + 1]!
+    setCursor(cursor + 1)
+    setUrl(next)
+    setInput(next)
+    setReloadKey(key => key + 1)
+  }
+
+  return (
+    <div className={css.browser}>
+      <div className={css.browserBar}>
+        <button
+          type="button"
+          className={css.iconButton}
+          aria-label={t('browserBack')}
+          title={t('browserBack')}
+          disabled={cursor <= 0}
+          onClick={goBack}
+        >
+          <IconChevronLeftOutline14 />
+        </button>
+        <button
+          type="button"
+          className={css.iconButton}
+          aria-label={t('browserForward')}
+          title={t('browserForward')}
+          disabled={cursor >= history.length - 1}
+          onClick={goForward}
+        >
+          <IconChevronRightOutline14 />
+        </button>
+        <button
+          type="button"
+          className={css.iconButton}
+          aria-label={t('refresh')}
+          title={t('refresh')}
+          onClick={() => { setReloadKey(key => key + 1) }}
+        >
+          <IconRefreshOutline14 />
+        </button>
+        <input
+          className={css.browserInput}
+          value={input}
+          placeholder={t('browserPlaceholder')}
+          spellCheck={false}
+          onChange={event => { setInput(event.target.value) }}
+          onKeyDown={event => {
+            if (event.key === 'Enter') navigateTo(input)
+          }}
+        />
+        <button
+          type="button"
+          className={css.iconButton}
+          aria-label={t('browserGo')}
+          title={t('browserGo')}
+          onClick={() => { navigateTo(input) }}
+        >
+          <IconLinkOutline14 />
+        </button>
+        <button
+          type="button"
+          className={css.iconButton}
+          aria-label={t('browserOpenExternal')}
+          title={t('browserOpenExternal')}
+          disabled={url === undefined}
+          onClick={() => {
+            if (url !== undefined) window.open(url, '_blank', 'noopener')
+          }}
+        >
+          <VscLinkExternal size={15} />
+        </button>
+      </div>
+      {message !== null && <div className={css.browserMessage}>{message}</div>}
+      <SandboxStatusBar
+        sandboxed={!noSandbox}
+        local={localUnlock}
+        dangerCopy={t('browserNoSandboxWarning')}
+        onUnlock={() => { setLocalUnlock(true) }}
+        onRestore={() => { setLocalUnlock(false) }}
+      />
+      {url === undefined ? (
+        <div className={css.browserStart}>{t('browserStart')}</div>
+      ) : embedBlocked !== null && !forceEmbed ? (
+        <BrowserEmbedBlocked
+          url={embedBlocked}
+          onOpenInBrowser={() => { window.open(embedBlocked, '_blank', 'noopener') }}
+          onLoadAnyway={() => { setForceEmbed(true) }}
+        />
+      ) : (
+        <iframe
+          key={`${reloadKey}:${noSandbox ? 'ns' : 'sb'}`}
+          className={css.browserFrame}
+          src={url}
+          sandbox={noSandbox ? undefined : BROWSER_IFRAME_SANDBOX}
+          referrerPolicy="no-referrer"
+          allow=""
+          title={url}
+        />
+      )}
+    </div>
+  )
+}
+
+/**
+ * The embed-refusal panel: shown when the probed site forbids being
+ * displayed inside other pages (X-Frame-Options / frame-ancestors) — the
+ * iframe would only show the browser's "refused to connect" blank. Explains
+ * the reason and offers the real-browser open plus a load-anyway escape.
+ * Exported so the copy and the actions are testable without a DOM.
+ */
+export function BrowserEmbedBlocked(props: {
+  url: string
+  onOpenInBrowser: () => void
+  onLoadAnyway: () => void
+}) {
+  const { url, onOpenInBrowser, onLoadAnyway } = props
+  let host = url
+  try { host = new URL(url).hostname } catch { /* keep the raw URL */ }
+  return (
+    <div className={css.browserBlocked}>
+      <IconWarningOutline16 size={16} />
+      <div className={css.browserBlockedTitle}>{t('browserEmbedBlocked', { host })}</div>
+      <div className={css.browserBlockedDesc}>{t('browserEmbedBlockedDesc')}</div>
+      <div className={css.browserBlockedActions}>
+        <button type="button" className={css.browserBlockedButton} onClick={onOpenInBrowser}>
+          {t('browserOpenExternal')}
+        </button>
+        <button type="button" className={css.browserBlockedButton} onClick={onLoadAnyway}>
+          {t('browserEmbedAnyway')}
+        </button>
+      </div>
+    </div>
+  )
+}

package/src/client/DiffTab.tsx

@@ -0,0 +1,110 @@
+/**
+ * The diff tab: one change opened from the git panel, like VSCode's diff
+ * editor. A worktree ref loads the file's unified diff (`git diff`, staged or
+ * not; untracked files — which git diff never covers — render as a full-file
+ * addition from their content), a commit ref loads the commit's full patch
+ * (`git.show`-style). The header carries a refresh button because the tab
+ * stays mounted while the git panel's staging/discard operations change the
+ * very content it shows.
+ */
+import { useCallback, useEffect, useState } from 'react'
+import { IconRefreshOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { SessionScope } from './api.ts'
+import { api } from './api.ts'
+import type { SidebarDiffRef } from './state.ts'
+import { DiffView } from './DiffView.tsx'
+import { t } from './locales.ts'
+import css from './sidebar.module.css'
+
+/** The loaded diff surface (untracked content rendered as a full addition). */
+interface DiffData {
+  diff: string
+  untracked?: string
+}
+
+export function DiffTab(props: { sessionId: string; cwd: string | undefined; diff: SidebarDiffRef }) {
+  const { sessionId, cwd, diff } = props
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [data, setData] = useState<DiffData | null>(null)
+  const [tick, setTick] = useState(0)
+
+  const refresh = useCallback((): void => { setTick(value => value + 1) }, [])
+
+  useEffect(() => {
+    let cancelled = false
+    const scope: SessionScope = { sessionId, cwd }
+    setLoading(true)
+    setError(null)
+    setData(null)
+    const load = async (): Promise<void> => {
+      try {
+        if (diff.kind === 'commit') {
+          const result = await api.gitCommitDiff(scope, diff.hashFull)
+          if (!cancelled) setData({ diff: result.diff })
+          return
+        }
+        let result = await api.gitDiff(scope, diff.path, diff.staged)
+        if (result.diff === '') {
+          // The requested side is empty — try the OTHER side once: the ref
+          // may predate the staged-flag fix, or the change moved sides (a
+          // file staged after its tab opened). Both sides empty means the
+          // file genuinely has no text changes.
+          const other = await api.gitDiff(scope, diff.path, !diff.staged)
+          if (other.diff !== '') result = other
+        }
+        if (result.diff !== '') {
+          if (!cancelled) setData({ diff: result.diff })
+          return
+        }
+        // Empty diff: an untracked file (git diff never lists it) falls back
+        // to a full-file addition; anything else is a genuine no-text-change.
+        if (diff.untracked === true && !diff.staged) {
+          const text = await api.fsRead(scope, diff.path)
+          if (!cancelled) {
+            setData(text.kind === 'text' ? { diff: '', untracked: text.content } : { diff: '' })
+          }
+          return
+        }
+        if (!cancelled) setData({ diff: '' })
+      } catch (reason) {
+        if (!cancelled) setError(reason instanceof Error ? reason.message : String(reason))
+      } finally {
+        if (!cancelled) setLoading(false)
+      }
+    }
+    void load()
+    return () => { cancelled = true }
+  }, [sessionId, cwd, diff, tick])
+
+  return (
+    <div className={css.gitDiffTab}>
+      <div className={css.gitDiffTabHeader}>
+        <span className={css.gitDiffTabTitle} title={diff.kind === 'worktree' ? diff.path : `${diff.hash} ${diff.subject}`}>
+          {diff.kind === 'worktree' ? diff.path : `${diff.hash} ${diff.subject}`}
+        </span>
+        <button
+          type="button"
+          className={css.iconButton}
+          aria-label={t('refresh')}
+          title={t('refresh')}
+          onClick={refresh}
+        >
+          <IconRefreshOutline16 size={14} />
+        </button>
+      </div>
+      {loading && <div className={css.gitPlaceholder}>{t('loading')}</div>}
+      {!loading && error !== null && <div className={css.gitError}>{t('diffLoadError')}: {error}</div>}
+      {!loading && error === null && data !== null && (
+        <>
+          {data.untracked !== undefined
+            ? <DiffView diff="" untrackedPath={diff.kind === 'worktree' ? diff.path : ''} untrackedContent={data.untracked} />
+            : <DiffView diff={data.diff} />}
+          {data.diff === '' && data.untracked === undefined && (
+            <div className={css.gitEmpty}>{t('diffEmpty')}</div>
+          )}
+        </>
+      )}
+    </div>
+  )
+}

package/src/client/DiffView.tsx

@@ -0,0 +1,305 @@
+/**
+ * The real diff surface for the git panel: parses the host's unified diff
+ * text (`git diff` / `git show`) and renders it VSCode-style — per-file
+ * sections with hunks (`@@ -a,b +c,d @@` headers), old/new line-number
+ * gutters, and aligned context / deleted / added rows colored through the
+ * DSH tokens. Untracked files produce no `git diff` output, so the caller
+ * can pass the file content to render as a full-file addition instead.
+ *
+ * The parser is a pure function (`parseUnifiedDiff`) so the interesting
+ * cases are unit-tested without a DOM.
+ */
+import { useEffect, useMemo, useState, type ReactNode } from 'react'
+import clsx from 'clsx'
+import { t } from './locales.ts'
+import css from './sidebar.module.css'
+
+/** One rendered diff line. */
+export interface DiffLine {
+  kind: 'ctx' | 'del' | 'add' | 'meta'
+  /** The line content without its diff marker ('' for the no-newline marker). */
+  text: string
+  /** Old-side line number (null for pure additions / metadata). */
+  oldNum: number | null
+  /** New-side line number (null for pure deletions / metadata). */
+  newNum: number | null
+}
+
+/** One parsed hunk. */
+export interface DiffHunk {
+  /** The old-side start line (`-a[,b]`). */
+  oldStart: number
+  /** The new-side start line (`+c[,d]`). */
+  newStart: number
+  /** The section text after the trailing `@@` (may be empty). */
+  header: string
+  lines: DiffLine[]
+}
+
+/** One parsed file section of a unified diff. */
+export interface DiffFile {
+  /** The `---` path verbatim ('/dev/null' for a new file). */
+  oldPath: string
+  /** The `+++` path verbatim ('/dev/null' for a deleted file). */
+  newPath: string
+  /** The file changed with binary content: no hunks to draw. */
+  binary: boolean
+  hunks: DiffHunk[]
+}
+
+/** The parsed unified diff. */
+export interface ParsedDiff {
+  files: DiffFile[]
+}
+
+/** Parse the hunk header `@@ -a[,b] +c[,d] @@ section` (section may contain '@@'). */
+function parseHunkHeader(line: string): { oldStart: number; newStart: number; header: string } | null {
+  const match = /^@@ -(\d+)(?:,(\d+))? \+(\d+)(?:,(\d+))? @@(.*)$/.exec(line)
+  if (match === null) return null
+  return { oldStart: Number(match[1]), newStart: Number(match[3]), header: match[5] ?? '' }
+}
+
+/**
+ * Parse `git diff --no-color` output into file sections and hunks. Rows
+ * outside a file section (leading noise) and metadata rows between the
+ * `diff --git`/`---`/`+++` headers and the first hunk (index lines, mode
+ * changes, rename/similarity lines) are skipped; a section that never
+ * reaches a hunk (a mode/rename-only change) stays hunkless so the caller
+ * can still draw its path.
+ */
+export function parseUnifiedDiff(text: string): ParsedDiff {
+  const files: DiffFile[] = []
+  let current: DiffFile | null = null
+  let inHunk = false
+  let hunk: DiffHunk | null = null
+  let oldNum = 0
+  let newNum = 0
+  const flushHunk = (): void => {
+    if (current !== null && hunk !== null) current.hunks.push(hunk)
+    hunk = null
+    inHunk = false
+  }
+  for (const raw of text.split('\n')) {
+    if (raw.startsWith('diff --git ')) {
+      flushHunk()
+      current = { oldPath: '', newPath: '', binary: false, hunks: [] }
+      files.push(current)
+      continue
+    }
+    if (current === null) continue
+    if (raw.startsWith('Binary files ') || raw === 'GIT binary patch') {
+      flushHunk()
+      current.binary = true
+      continue
+    }
+    if (raw.startsWith('--- ')) {
+      flushHunk()
+      current.oldPath = raw.slice(4)
+      continue
+    }
+    if (raw.startsWith('+++ ')) {
+      current.newPath = raw.slice(4)
+      continue
+    }
+    const header = parseHunkHeader(raw)
+    if (header !== null) {
+      flushHunk()
+      hunk = { oldStart: header.oldStart, newStart: header.newStart, header: header.header, lines: [] }
+      oldNum = header.oldStart
+      newNum = header.newStart
+      inHunk = true
+      continue
+    }
+    if (!inHunk || hunk === null) continue
+    const marker = raw[0]
+    if (marker === '\\') {
+      // ``: metadata attached to the previous row.
+      hunk.lines.push({ kind: 'meta', text: raw.slice(1), oldNum: null, newNum: null })
+      continue
+    }
+    if (marker === ' ') {
+      hunk.lines.push({ kind: 'ctx', text: raw.slice(1), oldNum, newNum })
+      oldNum += 1
+      newNum += 1
+    } else if (marker === '-') {
+      hunk.lines.push({ kind: 'del', text: raw.slice(1), oldNum, newNum: null })
+      oldNum += 1
+    } else if (marker === '+') {
+      hunk.lines.push({ kind: 'add', text: raw.slice(1), oldNum: null, newNum })
+      newNum += 1
+    } else {
+      // Not a diff line (a hunk can never contain one): stop the hunk.
+      flushHunk()
+    }
+  }
+  flushHunk()
+  return { files }
+}
+
+/** Build the untracked-file shape: one file, one hunk of pure additions. */
+function untrackedFile(path: string, content: string): DiffFile {
+  const lines: DiffLine[] = []
+  const body = content.endsWith('\n') ? content.slice(0, -1) : content
+  if (body !== '') {
+    let num = 1
+    for (const line of body.split('\n')) {
+      lines.push({ kind: 'add', text: line, oldNum: null, newNum: num })
+      num += 1
+    }
+  }
+  return { oldPath: '/dev/null', newPath: `b/${path}`, binary: false, hunks: [{ oldStart: 0, newStart: 1, header: '', lines }] }
+}
+
+/** Strip the `a/` / `b/` prefix git puts on diff paths (not on /dev/null). */
+function displayPath(path: string): string {
+  if (path === '/dev/null') return path
+  if (path.startsWith('a/') || path.startsWith('b/')) return path.slice(2)
+  return path
+}
+
+/** The file header badge: added / deleted / renamed / binary ('' for a plain edit). */
+function fileTag(file: DiffFile): string | null {
+  if (file.binary) return t('diffBinary')
+  if (file.oldPath === '/dev/null') return t('diffAdded')
+  if (file.newPath === '/dev/null') return t('diffDeleted')
+  const oldPath = displayPath(file.oldPath)
+  const newPath = displayPath(file.newPath)
+  if (oldPath !== newPath) return t('diffRenamed')
+  return null
+}
+
+/** Cap the flattened rows like DiffBlock: head + tail, expand button between. */
+const MAX_DIFF_ROWS = 500
+
+const TEST_PATH = /(^|\/)(?:__tests__|tests?|specs?|fixtures?|mocks?|snapshots?)(?:\/|$)|\.(?:test|spec)\.[^/]+$/i
+const DOC_PATH = /(^|\/)(?:docs?|documentation)(?:\/|$)|(^|\/)(?:readme|changelog|contributing|license|authors|notice)(?:\.[^/]*)?$/i
+const GENERATED_PATH = /(^|\/)(?:dist|build|coverage|generated|vendor|node_modules)(?:\/|$)|(^|\/)(?:package-lock\.json|pnpm-lock\.yaml|yarn\.lock|bun\.lockb?|composer\.lock|cargo\.lock|poetry\.lock)$/i
+const SOURCE_PATH = /\.(?:js|jsx|mjs|cjs|ts|tsx|mts|cts|py|pyw|rb|php|java|kt|kts|scala|go|rs|swift|c|h|cc|cpp|cxx|hpp|hh|hxx|cs|fs|fsx|vb|dart|lua|r|ex|exs|erl|hrl|clj|cljs|cljc|groovy|sh|bash|zsh|fish|ps1|sql|vue|svelte|astro|html|htm|css|scss|sass|less)$/i
+
+/** Source files open by default; tests, docs, generated files and unknown types stay folded. */
+function defaultExpandedFiles(files: DiffFile[]): Set<number> {
+  const expanded = new Set<number>()
+  files.forEach((file, index) => {
+    const path = displayPath(file.newPath === '/dev/null' ? file.oldPath : file.newPath)
+    if (!file.binary && file.hunks.length > 0
+      && !TEST_PATH.test(path) && !DOC_PATH.test(path) && !GENERATED_PATH.test(path)
+      && SOURCE_PATH.test(path)) {
+      expanded.add(index)
+    }
+  })
+  return expanded
+}
+
+export interface DiffViewProps {
+  /** Unified diff text (`git.diff` or `git.commit-diff` payloads). */
+  diff: string
+  /** Untracked-file content: when present, renders as a full-file addition instead of parsing. */
+  untrackedPath?: string
+  untrackedContent?: string
+}
+
+export function DiffView({ diff, untrackedPath, untrackedContent }: DiffViewProps) {
+  const parsed = useMemo<ParsedDiff>(() => {
+    if (untrackedPath !== undefined) {
+      return { files: [untrackedFile(untrackedPath, untrackedContent ?? '')] }
+    }
+    return parseUnifiedDiff(diff)
+  }, [diff, untrackedPath, untrackedContent])
+  const [expanded, setExpanded] = useState(false)
+  const [expandedFiles, setExpandedFiles] = useState<Set<number>>(() => defaultExpandedFiles(parsed.files))
+
+  useEffect(() => { setExpandedFiles(defaultExpandedFiles(parsed.files)) }, [parsed])
+
+  // Flatten into display rows so the cap can slice a single list.
+  const rows = useMemo(() => {
+    const out: Array<{ key: string; file: DiffFile; fileIndex: number; type: 'path' | 'hunk' | 'line'; hunk?: DiffHunk; line?: DiffLine }> = []
+    parsed.files.forEach((file, fileIndex) => {
+      out.push({ key: `f${fileIndex}`, file, fileIndex, type: 'path' })
+      if (file.binary || !expandedFiles.has(fileIndex)) return
+      file.hunks.forEach((hunk, hunkIndex) => {
+        out.push({ key: `f${fileIndex}h${hunkIndex}`, file, fileIndex, type: 'hunk', hunk })
+        hunk.lines.forEach((line, lineIndex) => {
+          out.push({ key: `f${fileIndex}h${hunkIndex}l${lineIndex}`, file, fileIndex, type: 'line', hunk, line })
+        })
+      })
+    })
+    return out
+  }, [parsed, expandedFiles])
+
+  const hidden = rows.length - MAX_DIFF_ROWS
+  const capped = hidden > 0 && !expanded
+  const headLines = Math.ceil(MAX_DIFF_ROWS / 2)
+  const tailLines = MAX_DIFF_ROWS - headLines
+  const head = capped ? rows.slice(0, headLines) : rows
+  const tail = capped ? rows.slice(rows.length - tailLines) : []
+
+  if (rows.length === 0) return null
+
+  const renderRow = (row: (typeof rows)[number]): ReactNode => {
+    if (row.type === 'path') {
+      const tag = fileTag(row.file)
+      const from = displayPath(row.file.oldPath)
+      const to = displayPath(row.file.newPath)
+      const expandable = !row.file.binary && row.file.hunks.length > 0
+      const fileExpanded = expandedFiles.has(row.fileIndex)
+      return (
+        <button
+          key={row.key}
+          type="button"
+          className={css.gitDiffFile}
+          disabled={!expandable}
+          aria-expanded={expandable ? fileExpanded : undefined}
+          onClick={() => {
+            setExpandedFiles(current => {
+              const next = new Set(current)
+              if (next.has(row.fileIndex)) next.delete(row.fileIndex)
+              else next.add(row.fileIndex)
+              return next
+            })
+          }}
+        >
+          {expandable && <span aria-hidden="true" className={clsx(css.gitDiffFileChevron, fileExpanded && css.gitDiffFileChevronExpanded)}>›</span>}
+          <span className={css.gitDiffFilePath}>{to}</span>
+          {from !== to && <span className={css.gitDiffFileOld}>← {from}</span>}
+          {tag !== null && <span className={css.gitDiffFileTag}>{tag}</span>}
+        </button>
+      )
+    }
+    if (row.type === 'hunk') {
+      const hunk = row.hunk!
+      return (
+        <div key={row.key} className={css.gitDiffHunk}>
+          <span className={css.gitDiffHunkHeader}>@@ -{hunk.oldStart},{hunk.lines.filter(l => l.oldNum !== null).length} +{hunk.newStart},{hunk.lines.filter(l => l.newNum !== null).length} @@</span>
+          {hunk.header !== '' && <span className={css.gitDiffHunkSection}>{hunk.header}</span>}
+        </div>
+      )
+    }
+    const line = row.line!
+    const lineClass = line.kind === 'del' ? css.gitDiffDel : line.kind === 'add' ? css.gitDiffAdd : line.kind === 'meta' ? css.gitDiffMeta : css.gitDiffCtx
+    return (
+      <div key={row.key} className={clsx(css.gitDiffLine, lineClass)}>
+        {line.kind === 'meta'
+          ? <span className={css.gitDiffMetaText}>{line.text}</span>
+          : (
+            <>
+              <span className={css.gitDiffNum}>{line.oldNum ?? ''}</span>
+              <span className={css.gitDiffNum}>{line.newNum ?? ''}</span>
+              <span className={css.gitDiffCode}>{line.text}</span>
+            </>
+          )}
+      </div>
+    )
+  }
+
+  return (
+    <div className={css.gitDiff}>
+      {head.map(renderRow)}
+      {hidden > 0 && (
+        <button type="button" className={css.gitDiffExpand} aria-expanded={expanded} onClick={() => { setExpanded(value => !value) }}>
+          {expanded ? t('diffCollapse') : t('diffExpand', { count: hidden })}
+        </button>
+      )}
+      {tail.map(renderRow)}
+    </div>
+  )
+}