[design-doctor test] sourcebot-1154: Commit diff viewer#2
Conversation
Adds a `commit` pathType to the browse routes (`/browse/<repo>@<branch>/-/commit/<sha>[/<file>]`) that renders a placeholder CommitDiffPanel. Refactors browse path helpers into a discriminated `BrowseProps` union so commitSha is required only for pathType: 'commit'. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Wires up @codemirror/merge (via react-codemirror-merge) inside CommitDiffPanel with a static before/after demo. Adds a CodeDiff component that owns its language extension + view ref so each pane can reconfigure its language compartment independently. Also gates the react-grab dev scripts behind DEBUG_ENABLE_REACT_GRAP so they don't load on every dev page render. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Replace the CodeMirror MergeView-based commit diff rendering with a DOM based split-view that renders directly from git's hunks, inspired by Chrome DevTools' DiffView. Per-file editor instances and the matching getFileSource fetches are gone — a 50-file commit drops from ~100 network requests to 0, and per-row render cost from a full editor mount to a synchronous Lezer highlight + grid emit. - New `LightweightDiffViewer` builds a single 2-column subgrid with hunk headers spanning both sides; each cell uses `subgrid` so line numbers, markers, and content align across all rows. - Pure helpers split out: `hunkParser` (body string → DiffLine[]), `splitPairing` (DiffLine[] → SplitRow[]). - `presentableDiff` from @codemirror/merge supplies character-level intra-line diff highlighting on paired modifications. - Lezer highlight code lifted from `lightweightCodeHighlighter` into `lib/codeHighlight` so both files share the helper. - Drop `react-codemirror-merge` and `commitDiffEditor`. Long lines wrap via `whitespace-pre-wrap break-words` + `minmax(0, 1fr)` on the grid. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- File path header now sticks to the top of the scroll viewport while scrolling through that file's diff, using the negative-yOffset trick to compensate for the virtualizer's translateY positioning. Same pattern as searchResultsPanel/fileMatchContainer. - Lightweight diff viewer's grid uses `minmax(<min>, max-content)` for line-number and marker columns so they don't collapse to zero width when one side of the diff is entirely blank (fully-added or fully-deleted files), keeping the right pane aligned across files. - Drop the column gap between left and right panes and instead draw a `border-r` separator on the left cells for a cleaner divider. - Hunk header gets an optional className so the first hunk renders with just `border-b` (the file header above already provides the top border), while subsequent hunks render with `border-y` between them. - Drop the per-row footer padding in the virtualizer; rows now sit flush against each other. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- New `DiffStat` component renders GitHub-style additions/deletions counts with a 5-square indicator scaled log-ish to total change size. Added on the right of each file row header and on the right of the "N files changed" subheader for the commit total. Hidden when there are no line-level changes (pure renames). - Each file row gets a `CopyIconButton` next to the path (copies newPath, falling back to oldPath) and a `CommitActionLink` that opens the file at the commit. Deleted files link to the old path at the parent commit so the user lands on the file's last existing state rather than a 404. - `repoName`, `commitSha`, and `parentSha` are plumbed from the panel through `FileDiffList` to `FileDiffRow` to support the new link. - `computeChangeCounts` is memoized per file in the row. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…nchoring
History panel rows in both the bottom panel and the commits page are now
clickable — they navigate to the matching commit diff via router.push,
with closest('button, a') short-circuit so inner action buttons keep
their own behavior. Bottom-panel history rows also highlight via
bg-accent when their commit is the one currently being viewed.
Commit diff header now uses AuthorsAvatarGroup + getCommitAuthors +
formatAuthorsText, matching latestCommitInfo and historyRow — co-authors
parsed from the commit body show up correctly.
When the URL trailing path matches one of the commit's files, that file
is moved to the top of the FileDiffList rather than scrolled to. Avoids
estimateSize-based scroll inaccuracy and works regardless of which side
of a rename the URL points to.
Lightweight diff viewer short-circuits with "Diff too large to display"
for files containing lines over 1000 chars, matching the cutoff in
lightweightCodeHighlighter.
PathHeader's breadcrumb measurement reserved 175px for "copy button and
padding"; the actual reservation needed is ~40px. Reduced so breadcrumbs
no longer collapse prematurely on wide layouts.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Lift `truncateSha` (was a private helper in getDiffToolComponent) to `lib/utils` so PathHeader can reuse it. The branch/ref display now renders a 40-char SHA as `abc1234`, preserving any `^` / `~N` suffix. - Hide the `·` separator and the path's CopyIconButton when there's no path (repo root). Previously a dangling `·` and copy button rendered with nothing between them. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Adds a `path` query/tool parameter to restrict diff output to changes touching a single file via git's `-- <pathspec>` separator. Refactors the route handler to use the shared `getDiffRequestSchema`. Fixes SOU-1154 (sourcebot-dev#1154) Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Move single-file commit diffs from `/-/commit/<sha>/<path>` to
`/-/blob/<path>?ref=<sha>&diff=true`, keeping the user's browsing
revision in the URL. `/-/commit/<sha>` still renders the full
multi-file diff.
- New `FocusedCommitDiffPanel` with status row (file status badge +
authors + relative commit date + "View full commit" + DiffStat +
exit-X) and path-filtered `getDiff` so only the single file's diff
is fetched.
- New preview banner in `CodePreviewPanel` when `?ref=` is set, with a
close button that strips the param.
- Make `PathHeader`'s revision clickable, linking to that ref's full
commit view.
- New `HoverPrefetchLink` defers Next.js prefetching until hover; used
in history rows to avoid firing many prefetches on render.
- Hide the bottom panel on `/-/commit/` views.
- Extract `getFileStatus` / `StatusBadge` to a shared `fileStatus.tsx`.
- Workaround Radix Tooltip + RSC re-render bug (drop `asChild` from
`<TooltipTrigger>`, add `key={commitSha}`) so X / Browse-files
buttons survive client navigation between commits.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
| })} | ||
| aria-label="Exit diff view" | ||
| > | ||
| <X className="h-4 w-4" /> |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| })} | ||
| aria-label="Close preview" | ||
| > | ||
| <X className="h-4 w-4" /> |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| <span className="text-sm text-muted-foreground">by</span> | ||
| <AuthorsAvatarGroup authors={authors} /> | ||
| <span | ||
| className="text-sm font-medium" |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| parents={commitResponse.parents} | ||
| /> | ||
| </div> | ||
| <div className="flex flex-row items-center justify-between gap-2 px-4 py-2 border-b shrink-0"> |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| parents={commitResponse.parents} | ||
| /> | ||
| </div> | ||
| <div className="flex flex-row items-center justify-between gap-2 px-4 py-2 border-b shrink-0"> |
There was a problem hiding this comment.
Change summary doesn't line up with the rest of the commit page
On the commit page, the 'files changed' summary sits slightly further in from the left than the commit details above it and the file list below it. That small step makes the page feel less tidy and harder to scan as one clean column.
Prompt to fix with AI
This is a comment left during a design review.
Comment:
**Change summary doesn't line up with the rest of the commit page**
On the commit page, the 'files changed' summary sits slightly further in from the left than the commit details above it and the file list below it. That small step makes the page feel less tidy and harder to scan as one clean column.
Issue:
The summary bar wraps '<N> files changed' + DiffStat in a div with px-4 py-2 (fullCommitDiffPanel.tsx:113), so its content starts 16px from the panel edge.
Suggested fix:
Change the summary bar's px-4 to px-3 (or p-3 equivalent) so its content aligns with the commit header and file row left edge.
Screenshots:
- Before: https://drive.orianna.ai/508965ade6ff563a5472ae3764c20d75.png
- After: https://drive.orianna.ai/e76370f5939d23e98f6a138e009cc304.png
Use these screenshot URLs as visual evidence if your environment can open remote images.
How can I resolve this? Keep the fix scoped to the PR-touched UI and preserve existing design-system patterns.
| })} | ||
| aria-label="Exit diff view" | ||
| > | ||
| <X className="h-4 w-4" /> |
There was a problem hiding this comment.
Close control in the diff header feels slightly off from the other small controls
The control that exits the single-file diff uses a slightly larger glyph than the other small icon controls in this area, so the header feels a touch less consistent. Matching it to the same small-icon treatment makes the header read as one tidy set of controls.
Prompt to fix with AI
This is a comment left during a design review.
Comment:
**Close control in the diff header feels slightly off from the other small controls**
The control that exits the single-file diff uses a slightly larger glyph than the other small icon controls in this area, so the header feels a touch less consistent. Matching it to the same small-icon treatment makes the header read as one tidy set of controls.
Issue:
focusedCommitDiffPanel.tsx:157-173 hand-rolls a ghost Button size="icon" h-6 w-6 with an <X className="h-4 w-4" /> glyph, rather than reusing the shared small icon-button wrappers.
Suggested fix:
Render the close glyph at h-3 w-3 to match the area convention (ideally via the shared icon-button wrapper) so the header's controls are uniform.
Screenshots:
- Before: https://drive.orianna.ai/9ef5892b4f0081bbc673c83981229948.png
- After: https://drive.orianna.ai/9f3e81a6d773c3ed7227324625b3f8e4.png
Use these screenshot URLs as visual evidence if your environment can open remote images.
How can I resolve this? Keep the fix scoped to the PR-touched UI and preserve existing design-system patterns.
| })} | ||
| aria-label="Close preview" | ||
| > | ||
| <X className="h-4 w-4" /> |
There was a problem hiding this comment.
Preview banner's close control is sized differently from nearby small icons
The control that dismisses the 'previewing an older revision' banner uses a slightly larger glyph than the other small icon controls around it. Matching the standard small-icon size keeps the banner feeling consistent with the rest of the browser.
Prompt to fix with AI
This is a comment left during a design review.
Comment:
**Preview banner's close control is sized differently from nearby small icons**
The control that dismisses the 'previewing an older revision' banner uses a slightly larger glyph than the other small icon controls around it. Matching the standard small-icon size keeps the banner feeling consistent with the rest of the browser.
Issue:
codePreviewPanel.tsx:106-122 hand-rolls a ghost Button size="icon" h-6 w-6 with an <X className="h-4 w-4" /> glyph.
Suggested fix:
Render the banner close glyph at h-3 w-3 (ideally via the shared icon-button wrapper) so it matches the surrounding small controls.
Screenshots:
- Before: https://drive.orianna.ai/f3a9942e8d1e3c60999eae29a091097b.png
- After: https://drive.orianna.ai/f9a0f7e4e1391fc6c0c46d6491c89366.png
Use these screenshot URLs as visual evidence if your environment can open remote images.
How can I resolve this? Keep the fix scoped to the PR-touched UI and preserve existing design-system patterns.
| </div> | ||
| {file ? ( | ||
| <> | ||
| <div className="flex flex-row items-center justify-between gap-2 px-4 py-2 border-b shrink-0"> |
There was a problem hiding this comment.
Diff header can get crowded when the author or date is longer
In the single-file diff, the author name, date, and 'view full commit' link sit in one row with the change summary and close control. When the author name or date is longer, that text can push against the summary and the close control, making the header feel cramped and the close control harder to reach.
Prompt to fix with AI
This is a comment left during a design review.
Comment:
**Diff header can get crowded when the author or date is longer**
In the single-file diff, the author name, date, and 'view full commit' link sit in one row with the change summary and close control. When the author name or date is longer, that text can push against the summary and the close control, making the header feel cramped and the close control harder to reach.
Issue:
focusedCommitDiffPanel.tsx:119-178: the left metadata group is 'flex flex-row items-center gap-2' with no min-w-0 and no truncation on the author/date spans; the right group holding DiffStat + close has no flex-shrink-0 guard on its container.
Suggested fix:
Give the left metadata group min-w-0 and truncate the author/date text, and mark the trailing diffstat+close group flex-shrink-0, mirroring the full commit header's overflow protection.
Screenshots:
- Before: https://drive.orianna.ai/29dac6001586f95cc5db5b976c7210bf.png
- After: https://drive.orianna.ai/b28bcba62d12c747b7e35ecc8375dcd7.png
Use these screenshot URLs as visual evidence if your environment can open remote images.
How can I resolve this? Keep the fix scoped to the PR-touched UI and preserve existing design-system patterns.







































Softlight Overview
Design Score: 1/5
Suggested fixes
Redesign
The commit diff screens felt cramped and slightly unfinished, with mismatched edges and busy metadata; the pass lined everything up to one column, calmed the details, and made the special states read clearly.
Fresh clean test PR for hosted Design Doctor rerun testing.
Benchmark note: Commit diff viewer with full and focused views.
Do not merge. This PR exists so Design Doctor can be run against a clean pull request with no prior review artifacts.