diff: GitHub-style formatting, whole-file syntax context, working expand

[mattmoran56]

Summary

Rebuild the diff viewer's look-and-feel to match what makes GitHub's review surface easy to read, fix the broken "Show N unchanged lines" expander in the worktree path, and use whole-file context for syntax highlighting so hunks that start mid-class or mid-string still tokenise correctly.

What changed

• GitHub-style row layout — Three visual zones per row: gutter (line numbers, more saturated tint), indicator (+ / −, strongest tint), body (softest tint). Hunk header is an accent band. Tabular line numbers, vertical separator before code. Context rows stay completely untinted so the eye lands on the actual change.
• Whole-file context for syntax highlighting — useDiffHighlighting now splices visible add/context lines into the full-file blob at their real line numbers before handing the text to Shiki. Tokens stay correct even when a hunk begins inside a class body or template literal. Falls back gracefully when the blob isn't available.
• Click-anywhere expander — The "Show N unchanged lines" strip is one big click target (defaults to expand-all for an in-between gap, expand-down for a tail). The discrete ↑20 / ↓20 / ⇕ buttons inside the row override that default for fine-grained control.
• Working worktree expansion — The expander was previously inert in the worktree DiffViewer (no onExpand handler, blobLines: null hard-coded). New useExpandableBlob hook fetches the file via window.api.file.read for working changes or a new git.showFile IPC for a specific commit, caches the lines, and tracks expanded line ranges. Same component now drives both worktree and PR diff.
• Testing hooks — Added data-line-type, data-expander-row, and data-expand-direction attributes so the diff is testable from Playwright.

Screenshots

Storybook (Git/DiffViewer story — component in isolation)

Unified mode:

Side-by-side / split mode:

Unified, with the in-between expander already triggered (10 unchanged lines spliced in from the blob, tokenised against the whole-file context):

Split, with the same expansion applied:

Real mock app — PR #42 → Files tab

Unified, with the file-list sidebar collapsed for a wider canvas:

After clicking the tail expander (↓20):

Tight crop of just the diff column for use in PR descriptions:

Test plan

• 542 unit tests pass (npm test), including 26 new tests:
  • parsePatch / buildDisplayLines — 12 tests covering hunk parsing, line numbering, tail vs. between-hunk expanders, hunk collapse, blob splicing
  • buildFullText (highlight-context helper) — 6 tests covering both old/new sides, blob gaps, line-number-extending-past-blob
  • useExpandableBlob — 8 tests covering worktree vs. commit fetch, STEP=20 caps, up / down / all directions, cache dedupe, reset on file change
• 4 new Playwright e2e tests pass (npm run test:e2e):
  • Expander row is present below the hunk
  • Clicking the down arrow expands context
  • Clicking anywhere on the row (label area, not the buttons) expands context
  • Clicking the label updates the gap label
• Visual-regression baselines need refresh — app-git-view and app-pr-review Storybook screenshots will change because of the new row styling. Run npm run test:screenshots:update and commit the new baselines after eyeballing the diffs.
• Native run (npm run dev) — open a worktree, select a file, click anywhere on the "Show more lines below" strip to confirm the expansion fetches from the working tree.

Notes for reviewers

• The git.showFile IPC is a thin wrapper over git show <ref>:<path> returning UTF-8 text (the existing showFileBase64 is kept for image diffs). The PR uses gh api .../contents/{path}?ref=... and falls back to git show — the worktree only needs the local path.
• The new useExpandableBlob hook lives next to DiffViewer.tsx (src/renderer/components/git/) since it's only used by the worktree viewer. The PR viewer keeps using the store-backed expandContext flow because it already has GraphQL-style refs (baseRefOid / headRefOid).
• Mock data gets a real diff --git header in mockUnifiedDiff so the Files-tab path actually mounts the diff viewer (it previously fell into the "Select a file to review" empty state because extractFileDiff couldn't find the file).

https://claude.ai/code/session_01753bVuHDnsb62Y3ZiM1eiV

---

Generated by Claude Code