[design-doctor capture-replay replay] clone of sourcebot#2: [design-doctor test] sourcebot-1154: Commit diff viewer#23
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.
| <AuthorsAvatarGroup authors={authors} /> | ||
| <span | ||
| className="text-sm font-medium" | ||
| title={authors.map((a) => a.name).join(", ")} |
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.
| path, | ||
| pathType: 'blob', | ||
| })} | ||
| aria-label="Exit diff view" |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| path, | ||
| pathType: 'blob', | ||
| })} | ||
| aria-label="Close preview" |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| </span> | ||
| <span | ||
| className="text-sm text-muted-foreground" | ||
| title={absoluteDate} |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| <div className="flex flex-row items-center gap-2"> | ||
| <DiffStat {...computeChangeCounts(file)} /> | ||
| <Tooltip key={commitSha}> | ||
| <TooltipTrigger> |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
| <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.
| </Link> | ||
| </span> | ||
| <Tooltip key={previewRef}> | ||
| <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.
| <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.
| pathType: 'commit', | ||
| commitSha: parent, | ||
| })} | ||
| className="underline hover:text-foreground" |
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> | ||
| {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.
| <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.
| <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"> |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
RedesignFull commit diff
Single-file diff
Preview banner
Expanded message
Commit history
Prompt to build with AIDeveloper outputReal app context
Prototype detailsCalm, aligned commit-diff surfacesMatched before/after Full commit diff pageFocused single-file commit diffFile preview banner at revisionFull commit diff with commit body expandedCommit history list with clickable rows
Status: 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..8e522ec2 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 { Eye, X } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import { getBrowsePath } from "../../../hooks/utils";
@@ -54,7 +54,7 @@ export const CodePreviewPanel = async ({ path, repoName, revisionName, previewRe
return (
<>
- <div className="flex flex-row py-1 px-2 items-center justify-between">
+ <div className="flex flex-row px-4 py-2 items-center justify-between">
<PathHeader
path={path}
repo={{
@@ -85,9 +85,10 @@ 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{" "}
+ <div className="flex flex-row items-center justify-between gap-2 px-4 py-2 border-b bg-muted/40 shrink-0">
+ <span className="flex flex-row items-center gap-2 text-sm text-muted-foreground">
+ <Eye className="h-4 w-4 flex-shrink-0" />
+ Previewing file at revision
<Link
href={getBrowsePath({
repoName,
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..908c7b83 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
@@ -24,7 +24,10 @@ export const CommitMessage = ({ subject, body }: CommitMessageProps) => {
)}
</div>
{hasBody && isBodyExpanded && (
- <CommitBody body={body} className="rounded max-h-[40vh] overflow-y-auto" />
+ <CommitBody
+ body={body}
+ className="mt-1 rounded-md border max-h-[40vh] overflow-y-auto"
+ />
)}
</>
);
diff --git a/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/diffStat.tsx b/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/diffStat.tsx
index b30b6567..b2828ffd 100644
--- a/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/diffStat.tsx
+++ b/packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/diffStat.tsx
@@ -1,7 +1,5 @@
import { FileDiff } from "@/features/git";
-const TOTAL_SQUARES = 5;
-
// Count `+`/`-` lines across all hunks in a file.
export const computeChangeCounts = (file: FileDiff) => {
let additions = 0;
@@ -30,28 +28,6 @@ export const computeTotalChangeCounts = (files: FileDiff[]) => {
return { additions, deletions };
};
-// Map a total change count to a number of filled squares (0–5) using a
-// log-ish scale so tiny diffs still show one square and huge diffs cap out.
-// Mirrors GitHub's diffstat indicator behavior.
-const filledSquaresForTotal = (total: number): number => {
- if (total === 0) {
- return 0;
- }
- if (total < 5) {
- return 1;
- }
- if (total < 10) {
- return 2;
- }
- if (total < 30) {
- return 3;
- }
- if (total < 100) {
- return 4;
- }
- return 5;
-};
-
interface DiffStatProps {
additions: number;
deletions: number;
@@ -65,33 +41,33 @@ export const DiffStat = ({ additions, deletions }: DiffStatProps) => {
return null;
}
- const filled = filledSquaresForTotal(total);
- const greenCount = Math.round((filled * additions) / total);
- const redCount = filled - greenCount;
- const emptyCount = TOTAL_SQUARES - filled;
-
return (
<div
- className="flex flex-row items-center gap-2 text-xs flex-shrink-0 font-mono"
+ className="flex flex-row items-center gap-2.5 text-xs flex-shrink-0 font-mono tabular-nums"
title={`${additions} additions, ${deletions} deletions`}
>
{additions > 0 && (
- <span className="text-green-700 dark:text-green-400">+{additions}</span>
+ <span className="text-green-600 dark:text-green-400">+{additions}</span>
)}
{deletions > 0 && (
- <span className="text-red-700 dark:text-red-400">-{deletions}</span>
+ <span className="text-red-600 dark:text-red-400">-{deletions}</span>
)}
- <div className="flex flex-row gap-px">
- {Array.from({ length: greenCount }).map((_, i) => (
- <span key={`g-${i}`} className="w-2 h-2 bg-green-500 dark:bg-green-400 rounded-[1px]" />
- ))}
- {Array.from({ length: redCount }).map((_, i) => (
- <span key={`r-${i}`} className="w-2 h-2 bg-red-500 dark:bg-red-400 rounded-[1px]" />
- ))}
- {Array.from({ length: emptyCount }).map((_, i) => (
- <span key={`e-${i}`} className="w-2 h-2 bg-border rounded-[1px]" />
- ))}
- </div>
+ {/* A single proportion bar: one calm pill split green/red by the
+ add:delete ratio, instead of a row of discrete squares. */}
+ <span className="flex h-1.5 w-10 overflow-hidden rounded-full bg-muted">
+ {additions > 0 && (
+ <span
+ className="bg-green-500 dark:bg-green-400"
+ style={{ width: `${(additions / total) * 100}%` }}
+ />
+ )}
+ {deletions > 0 && (
+ <span
+ className="bg-red-500 dark:bg-red-400"
+ style={{ width: `${(deletions / total) * 100}%` }}
+ />
+ )}
+ </span>
</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..1408732e 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 px-4 py-2 items-center border-b shrink-0">
<PathHeader
path={path}
pathType="blob"
@@ -116,27 +116,23 @@ 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">
<StatusBadge status={getFileStatus(file)} />
<h2 className="text-sm font-medium">
{FILE_STATUS_LABELS[getFileStatus(file)]}
</h2>
- <span className="text-sm text-muted-foreground">by</span>
+ <span className="text-muted-foreground">·</span>
<AuthorsAvatarGroup authors={authors} />
<span
- className="text-sm font-medium"
- title={authors.map((a) => a.name).join(", ")}
+ className="text-sm text-muted-foreground truncate"
+ title={`${authors.map((a) => a.name).join(", ")} · ${absoluteDate}`}
>
- {formatAuthorsText(authors)}
+ {formatAuthorsText(authors)} committed {relativeDate}
</span>
- <span
- className="text-sm text-muted-foreground"
- title={absoluteDate}
- >
- {relativeDate}
- </span>
- <span className="text-muted-foreground">·</span>
+ </div>
+ <div className="flex flex-row items-center gap-3 flex-shrink-0">
+ <DiffStat {...computeChangeCounts(file)} />
<Link
href={getBrowsePath({
repoName,
@@ -145,13 +141,10 @@ export const FocusedCommitDiffPanel = async ({
pathType: 'commit',
commitSha,
})}
- className="text-sm text-link hover:underline"
+ className="text-sm text-link hover:underline whitespace-nowrap"
>
View full commit
</Link>
- </div>
- <div className="flex flex-row items-center gap-2">
- <DiffStat {...computeChangeCounts(file)} />
<Tooltip key={commitSha}>
<TooltipTrigger>
<Button
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.Remaining issues
CostClaude Code reported cost: $55.0280 Claude Code session costs and timings
|
| 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.
Files-changed summary sits indented from the rest of the commit view
On the commit view, the "files changed" summary line is nudged inward from the commit details above it and the file rows below it, so the left edge steps in and back out as you scan down. Aligning it makes the page feel cleaner and easier to read.
Prompt to fix with AI
This is a comment left during a design review.
Comment:
**Files-changed summary sits indented from the rest of the commit view**
On the commit view, the "files changed" summary line is nudged inward from the commit details above it and the file rows below it, so the left edge steps in and back out as you scan down. Aligning it makes the page feel cleaner and easier to read.
Issue:
The "{n} files changed" bar is rendered with className "flex flex-row items-center justify-between gap-2 px-4 py-2 border-b shrink-0" (16px horizontal padding) at fullCommitDiffPanel.tsx:113, while the commit header block above uses p-3 (12px) and each file-diff row header below uses py-2 px-3 (12px).
Suggested fix:
Change the summary bar's px-4 to px-3 in fullCommitDiffPanel.tsx so its left edge aligns with the p-3 commit header above and the px-3 file-row headers below.
Screenshots:
- Before: https://drive.orianna.ai/35f7a07bcf7809d609c4799b8c25f73e.png
- After: https://drive.orianna.ai/dae43e7ff974a0b0b600241ad515fcfb.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 status row is indented from the file path above it
In the focused single-file diff, the row showing the change status, author, and commit link starts further in than the file path header directly above it, so the left edge steps inward. Aligning them makes the header feel more deliberate.
Prompt to fix with AI
This is a comment left during a design review.
Comment:
**Single-file diff status row is indented from the file path above it**
In the focused single-file diff, the row showing the change status, author, and commit link starts further in than the file path header directly above it, so the left edge steps inward. Aligning them makes the header feel more deliberate.
Issue:
The meta bar at focusedCommitDiffPanel.tsx:119 uses px-4 py-2 border-b (16px), while the PathHeader row directly above it uses py-1 px-2 (8px) and the diff content below has no left gutter padding.
Suggested fix:
Reduce the meta bar's px-4 toward the surrounding rows (px-3, or px-2 to match the path-header row) in focusedCommitDiffPanel.tsx so the stacked header bars share a left edge.
Screenshots:
- Before: https://drive.orianna.ai/ceb281c1e9407eb632572b3b1936333c.png
- After: https://drive.orianna.ai/f19cd6dbf1f80c2b08e28da73f831bba.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.
Preview banner is indented from the file path above it
When previewing a file at an older revision, the preview banner starts further in than the file path header directly above it, so the left edge steps inward. Aligning the banner makes the preview feel tidier.
Prompt to fix with AI
This is a comment left during a design review.
Comment:
**Preview banner is indented from the file path above it**
When previewing a file at an older revision, the preview banner starts further in than the file path header directly above it, so the left edge steps inward. Aligning the banner makes the preview feel tidier.
Issue:
The preview banner at codePreviewPanel.tsx:88 uses px-4 py-2 border-b (16px), while the PathHeader row above it uses py-1 px-2 (8px) and the code content below starts at the left gutter.
Suggested fix:
Reduce the preview banner's px-4 toward the surrounding rows (px-2 to match the path-header row, or px-3 for the section-bar convention) in codePreviewPanel.tsx so the stacked rows share a left edge.
Screenshots:
- Before: https://drive.orianna.ai/32bf55bd9b4493ffad77bd597a489c53.png
- After: https://drive.orianna.ai/a714c0b225644509abd9fa531da54565.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:
replay(capture-replay ENABLED (CAPTURE_REPLAY_ENABLED=true)).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: 2/5
Suggested fixes
Redesign
The commit diff screens had a ragged left edge and a fiddly 'barcode' change meter; this pass lines everything up on one calm edge and swaps the meter for a single clean +/- count and proportion bar.
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.