[design-doctor capture-replay baseline] clone of sourcebot#2: [design-doctor test] sourcebot-1154: Commit diff viewer#24
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>
![softlight[bot]](https://avatars.githubusercontent.com/in/1467739?s=60&v=4){kind=small}
| 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.
| {file ? ( | ||
| <> | ||
| <div className="flex flex-row items-center justify-between gap-2 px-4 py-2 border-b shrink-0"> | ||
| <div className="flex flex-row items-center gap-2"> |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| </div> | ||
| {file ? ( | ||
| <> | ||
| <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.
| )} | ||
| </div> | ||
| {hasBody && isBodyExpanded && ( | ||
| <CommitBody body={body} className="rounded max-h-[40vh] overflow-y-auto" /> |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
RedesignFull commit diff
Expanded description
Single-file diff
Preview banner
Prompt to build with AIDeveloper outputReal app context
Prototype detailsOne clean column for the commit diff viewerMatched before/after Full commit diff viewerFull commit diff — expanded commit descriptionFocused single-file commit diffBlob preview-at-revision bannerBefore/after match gaps
PR-before surfaces with no matching Redesign after:
Changed files
Prototype diff excerptdiff --git a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
index bad7e67c..853ebe1c 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
@@ -4,7 +4,7 @@ import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
import { cn, getCodeHostInfoForRepo, isServiceError, truncateSha } from "@/lib/utils";
-import { X } from "lucide-react";
+import { History, X } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { getBrowsePath } from "../../../hooks/utils";
@@ -85,22 +85,25 @@ export const CodePreviewPanel = async ({ path, repoName, revisionName, previewRe
</div>
<Separator />
{previewRef && (
- <div className="flex flex-row items-center justify-between gap-2 px-4 py-2 border-b shrink-0">
- <span className="text-sm">
- Previewing file at revision{" "}
- <Link
- href={getBrowsePath({
- repoName,
- revisionName,
- path: '',
- pathType: 'commit',
- commitSha: previewRef,
- })}
- className="font-mono text-link hover:underline"
- >
- {truncateSha(previewRef)}
- </Link>
- </span>
+ <div className="flex flex-row items-center justify-between gap-2 px-2 py-2 border-b shrink-0 bg-muted/40">
+ <div className="flex flex-row items-center gap-1.5 min-w-0 text-sm text-muted-foreground">
+ <History className="h-3.5 w-3.5 flex-shrink-0" />
+ <span className="truncate">
+ Previewing file at revision{" "}
+ <Link
+ href={getBrowsePath({
+ repoName,
+ revisionName,
+ path: '',
+ pathType: 'commit',
+ commitSha: previewRef,
+ })}
+ className="font-mono text-link hover:underline"
+ >
+ {truncateSha(previewRef)}
+ </Link>
+ </span>
+ </div>
<Tooltip key={previewRef}>
<TooltipTrigger>
<Button
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/commitMessage.tsx b/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/commitMessage.tsx
index 7d9a27d4..9473f4e3 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/commitMessage.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/commitMessage.tsx
@@ -13,7 +13,7 @@ export const CommitMessage = ({ subject, body }: CommitMessageProps) => {
const hasBody = body.trim().length > 0;
return (
- <>
+ <div className="flex flex-col gap-3">
<div className="flex flex-row items-center gap-2">
<h1 className="text-lg font-semibold">{subject}</h1>
{hasBody && (
@@ -24,8 +24,8 @@ export const CommitMessage = ({ subject, body }: CommitMessageProps) => {
)}
</div>
{hasBody && isBodyExpanded && (
- <CommitBody body={body} className="rounded max-h-[40vh] overflow-y-auto" />
+ <CommitBody body={body} className="rounded-md border bg-muted/50 max-h-[40vh] overflow-y-auto" />
)}
- </>
+ </div>
);
};
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fileDiffRow.tsx b/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fileDiffRow.tsx
index d7c5c50e..5e84797a 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fileDiffRow.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fileDiffRow.tsx
@@ -58,7 +58,7 @@ export const FileDiffRow = ({ file, yOffset, repoName, commitSha, parentSha }: F
return (
<div className="flex flex-col">
<div
- className="flex flex-row items-center gap-2 py-2 px-3 border-b bg-muted sticky z-10"
+ className="flex flex-row items-center gap-2 py-2 px-4 border-b bg-muted sticky z-10"
style={{ top: `-${yOffset}px` }}
>
<StatusBadge status={status} />
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.tsx b/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.tsx
index 308ab9f6..fb544364 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/focusedCommitDiffPanel.tsx
@@ -101,7 +101,7 @@ export const FocusedCommitDiffPanel = async ({
return (
<div className="flex flex-col h-full">
- <div className="flex flex-row py-1 px-2 items-center border-b shrink-0">
+ <div className="flex flex-row py-1 px-4 items-center border-b shrink-0">
<PathHeader
path={path}
pathType="blob"
@@ -116,27 +116,27 @@ export const FocusedCommitDiffPanel = async ({
</div>
{file ? (
<>
- <div className="flex flex-row items-center justify-between gap-2 px-4 py-2 border-b shrink-0">
- <div className="flex flex-row items-center gap-2">
+ <div className="flex flex-row items-center justify-between gap-3 px-4 py-2 border-b shrink-0">
+ <div className="flex flex-row items-center gap-2 min-w-0 overflow-hidden">
<StatusBadge status={getFileStatus(file)} />
- <h2 className="text-sm font-medium">
+ <h2 className="text-sm font-medium flex-shrink-0">
{FILE_STATUS_LABELS[getFileStatus(file)]}
</h2>
- <span className="text-sm text-muted-foreground">by</span>
+ <span className="text-sm text-muted-foreground flex-shrink-0">by</span>
<AuthorsAvatarGroup authors={authors} />
<span
- className="text-sm font-medium"
+ className="text-sm font-medium truncate min-w-0"
title={authors.map((a) => a.name).join(", ")}
>
{formatAuthorsText(authors)}
</span>
<span
- className="text-sm text-muted-foreground"
+ className="text-sm text-muted-foreground flex-shrink-0"
title={absoluteDate}
>
{relativeDate}
</span>
- <span className="text-muted-foreground">·</span>
+ <span className="text-muted-foreground flex-shrink-0">·</span>
<Link
href={getBrowsePath({
repoName,
@@ -145,12 +145,12 @@ export const FocusedCommitDiffPanel = async ({
pathType: 'commit',
commitSha,
})}
- className="text-sm text-link hover:underline"
+ className="text-sm text-link hover:underline flex-shrink-0"
>
View full commit
</Link>
</div>
- <div className="flex flex-row items-center gap-2">
+ <div className="flex flex-row items-center gap-2 flex-shrink-0">
<DiffStat {...computeChangeCounts(file)} />
<Tooltip key={commitSha}>
<TooltipTrigger>
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fullCommitDiffPanel.tsx b/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fullCommitDiffPanel.tsx
index 1379f69d..56fbfaad 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fullCommitDiffPanel.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fullCommitDiffPanel.tsx
@@ -70,8 +70,8 @@ export const FullCommitDiffPanel = async ({ repoName, commitSha }: FullCommitDif
return (
<div className="flex flex-col h-full">
- <div className="flex flex-col gap-2 p-3 border-b shrink-0">
- <div className="flex flex-row items-start gap-2">
+ <div className="flex flex-col gap-2.5 px-4 py-3 border-b shrink-0">
+ <div className="flex flex-row items-start gap-3">
<div className="flex-1 min-w-0">
<CommitMessage subject={subject} body={commitResponse.body} />
</div>Remaining issues
CostClaude Code reported cost: $61.8944 Claude Code session costs and timings
|
| <CommitMessage subject={subject} body={commitResponse.body} /> | ||
| </div> | ||
| <Tooltip key={commitSha}> | ||
| <TooltipTrigger> |
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.
| </div> | ||
| {file ? ( | ||
| <> | ||
| <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.
| className="text-sm font-medium" | ||
| title={authors.map((a) => a.name).join(", ")} | ||
| > | ||
| {formatAuthorsText(authors)} |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| )} | ||
| </div> | ||
| {hasBody && isBodyExpanded && ( | ||
| <CommitBody body={body} className="rounded max-h-[40vh] overflow-y-auto" /> |
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 diff, the 'N files changed' bar sits slightly further in than the commit details above it and the file rows below it, so the page's left edge looks ragged. Aligning it to the same column makes everything read as one clean, scannable line of sight.
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 diff, the 'N files changed' bar sits slightly further in than the commit details above it and the file rows below it, so the page's left edge looks ragged. Aligning it to the same column makes everything read as one clean, scannable line of sight.
Issue:
The '<n> files changed' summary bar uses px-4 (16px) horizontal padding, while the commit header above it uses p-3 (12px) and every file diff row below it uses px-3 (12px). The bar's content starts 4px to the right of everything else on the page, so the left edge steps in and out instead of forming one clean column.
Suggested fix:
Change the summary bar's horizontal padding from px-4 to px-3 so it shares the 12px left edge used by the commit header (p-3) and the file rows (px-3). Keep py-2.
Screenshots:
- Before: https://drive.orianna.ai/a4525a54f41b31584a8bcdbf094c720f.png
- After: https://drive.orianna.ai/aa3924d6bec0dc33fa9a506bb2d997eb.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> | ||
| {hasBody && isBodyExpanded && ( | ||
| <CommitBody body={body} className="rounded max-h-[40vh] overflow-y-auto" /> |
There was a problem hiding this comment.
Commit description sits too tight under its title
When you expand a commit's description, it butts right up against the title with no space between them, so the two run together as one dense block. A little breathing room lets the description read clearly as its own section.
Prompt to fix with AI
This is a comment left during a design review.
Comment:
**Commit description sits too tight under its title**
When you expand a commit's description, it butts right up against the title with no space between them, so the two run together as one dense block. A little breathing room lets the description read clearly as its own section.
Issue:
When the body is expanded, the CommitBody block renders as a direct sibling of the title row inside a plain (non-gap) container, so there is no vertical space between the commit subject and the description. The two sit flush, making the description feel crammed against the title rather than reading as its own block.
Suggested fix:
Add mt-2 to the expanded CommitBody in commitMessage.tsx so the description is separated from the title by the same 8px step used elsewhere in the header (gap-2).
Screenshots:
- Before: https://drive.orianna.ai/6207815f09ae80ad66b95a64a3246205.png
- After: https://drive.orianna.ai/58c757a3f9b3ed14ff012ac98fa7c104.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.
Single-file diff header rows don't share a left edge
In the focused single-file diff, the file path row and the file-details row beneath it start at slightly different left positions, giving the header a stepped, unfinished look. Aligning them to one edge makes the header feel tidy and intentional.
Prompt to fix with AI
This is a comment left during a design review.
Comment:
**Single-file diff header rows don't share a left edge**
In the focused single-file diff, the file path row and the file-details row beneath it start at slightly different left positions, giving the header a stepped, unfinished look. Aligning them to one edge makes the header feel tidy and intentional.
Issue:
The focused diff has two stacked header rows: the PathHeader row uses py-1 px-2 (8px), while the file-details row below it (status badge, author, date, View full commit) uses px-4 (16px). The details row's content starts 8px to the right of the path row above it, so the two header rows do not share a left edge and the header looks stepped.
Suggested fix:
Change the file-details header row's horizontal padding from px-4 to px-2 so it aligns with the PathHeader row directly above it (py-1 px-2). Keep py-2 for its vertical breathing room.
Screenshots:
- Before: https://drive.orianna.ai/1a74c3eef6a6b109b36943be5f852540.png
- After: https://drive.orianna.ai/1cd9d8b1066e941bdd3332d79bc56929.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> | ||
| <Separator /> | ||
| {previewRef && ( | ||
| <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.
'Previewing an older version' banner is indented from the file header
The banner shown when you preview a file at an older revision starts further in than the file path header directly above it, so its left edge looks misaligned with the rest of the view. Matching the edge lets the banner read as a calm, deliberate part of the page.
Prompt to fix with AI
This is a comment left during a design review.
Comment:
**'Previewing an older version' banner is indented from the file header**
The banner shown when you preview a file at an older revision starts further in than the file path header directly above it, so its left edge looks misaligned with the rest of the view. Matching the edge lets the banner read as a calm, deliberate part of the page.
Issue:
The 'Previewing file at revision' banner uses px-4 (16px) horizontal padding, while the PathHeader row directly above it uses py-1 px-2 (8px). The banner text starts 8px to the right of the file path header, so the banner's left edge is misaligned with the header it belongs under.
Suggested fix:
Change the preview banner's horizontal padding from px-4 to px-2 so its left edge matches the PathHeader row above it (py-1 px-2). Keep py-2.
Screenshots:
- Before: https://drive.orianna.ai/d7127273a17983df230b78c1b1dc18fa.png
- After: https://drive.orianna.ai/2c757e11f9176f52289e991cb15ac7dc.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.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Design Doctor capture-replay A/B clone for #2.
Variant:
baseline(capture-replay disabled (CAPTURE_REPLAY_ENABLED=false)).Reasoning-effort settings are held at branch defaults for both variants, so the only difference is the capture-replay flag.
This branch is pinned to the original PR head SHA so the code contents are equivalent.
Original PR body:
Softlight Overview
Design Score: 1/5
Suggested fixes
Redesign
The commit diff screens looked cramped and unfinished with mismatched left edges and a flush description; the pass lined everything up to one clean column and made each special state read as a calm, intentional block.
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.