[design-doctor effort high] clone of sourcebot#2: [design-doctor test] sourcebot-1154: Commit diff viewer

[rohanneilkapoor]

Design Doctor reasoning-effort A/B clone for #2.

Variant: high for source-only design-system audit, visual QA audit, spacing/typography audit, and designer pass/redesign agent.

This branch adds a no-op commit on top of the original PR head so the file contents are equivalent while GitHub checks stay isolated to this test PR.

Original PR body:

Softlight Overview

Design Score: 1/5

Suggested fixes

• Line up the change-summary bar with the commit details and file list so the page reads as one clean left edge.
• Match the diff header's close control to the other small action icons so the header feels consistent.
• Size the preview banner's close control to match the other small icons nearby.
• Keep the diff header tidy when author or date text is longer so it never crowds the change summary or close control.

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.

• Every header, summary bar, and file row now shares one clean left edge with steadier spacing.
• Commit controls became real buttons, icons share one size, and the 'previewing an old revision' and 'commit description' states now read clearly.

Fresh clean test PR for hosted Design Doctor rerun testing.

• Source PR: feat(web): Commit diffs sourcebot-dev/sourcebot#1154
• Source label: Sourcebot feat(web): Commit diffs sourcebot-dev/sourcebot#1154
• Batch: design-doctor-feature-parity-expanded-20260610-152904Z
• Mode: source
• Base branch: bench/source-pr-base/design-doctor-feature-parity-expanded-20260610-152904Z/sourcebot-1154
• Base SHA: 178b9c0
• Head commit: 0a11df8

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.

Note

Add commit diff viewer to the code browser

• Adds a full commit diff view (FullCommitDiffPanel) and a focused per-file diff view (FocusedCommitDiffPanel) accessible via /-/commit/<sha> routes in the browse UI.
• Clicking a commit row in the history panel navigates to the commit diff page; the short SHA in history rows links directly to the full commit diff.
• Renders a syntax-highlighted split diff with line numbers, intra-line change highlighting, and a virtualized file list for large diffs via LightweightDiffViewer and FileDiffList.
• Extends the /api/diff endpoint and get_diff MCP tool to accept an optional path parameter to scope diffs to a single file.
• Blob routes gain a diff=true&ref=<sha> query mode that renders the focused file diff instead of source; a preview banner appears when viewing a file at a non-current ref.
• Extracts shared code highlighting utilities into packages/web/src/lib/codeHighlight.ts and adds truncateSha to packages/web/src/lib/utils.ts.
• Behavioral Change: the bottom panel (history/tree) is hidden on commit routes; react-grab scripts no longer load by default in development (requires DEBUG_ENABLE_REACT_GRAB=true).

📊 Macroscope summarized 0a36376. 33 files reviewed, 0 issues evaluated, 0 issues filtered, 0 comments posted

🗂️ Filtered Issues

No issues evaluated.

[macroscopeapp]

🟢 Low commitDiffPanel/fileDiffRow.tsx:47

navigator.clipboard.writeText(pathToCopy) returns a Promise that is ignored. The function returns true synchronously before the async operation completes, so if the clipboard write fails (e.g., permission denied in non-secure contexts), the CopyIconButton still shows a success indicator to the user. Consider awaiting the Promise and returning whether it succeeded.

-    const onCopyPath = useCallback(() => {
-        const pathToCopy = file.newPath ?? file.oldPath;
-        if (!pathToCopy) {
-            return false;
-        }
-        navigator.clipboard.writeText(pathToCopy);
-        return true;
-    }, [file.newPath, file.oldPath]);

Also found in 1 other location(s)

packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/commitHashLine.tsx:22

onCopyHash returns true synchronously before navigator.clipboard.writeText completes. If the clipboard operation fails (permission denied, insecure context, etc.), CopyIconButton will still show the success checkmark because onCopy() already returned true. The return value should reflect the actual outcome of the async operation, but currently it cannot.

🚀 Reply "fix it for me" or copy this AI Prompt for your agent:

In file @packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fileDiffRow.tsx around lines 47-54:

`navigator.clipboard.writeText(pathToCopy)` returns a Promise that is ignored. The function returns `true` synchronously before the async operation completes, so if the clipboard write fails (e.g., permission denied in non-secure contexts), the `CopyIconButton` still shows a success indicator to the user. Consider awaiting the Promise and returning whether it succeeded.

Evidence trail:
packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fileDiffRow.tsx lines 47-54 (onCopyPath callback ignores Promise, returns true synchronously); packages/web/src/app/(app)/components/copyIconButton.tsx lines 8-21 (onCopy typed as () => boolean, success indicator shown based on synchronous return value)

Also found in 1 other location(s):
- packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/commitHashLine.tsx:22 -- `onCopyHash` returns `true` synchronously before `navigator.clipboard.writeText` completes. If the clipboard operation fails (permission denied, insecure context, etc.), `CopyIconButton` will still show the success checkmark because `onCopy()` already returned `true`. The return value should reflect the actual outcome of the async operation, but currently it cannot.

[rohanneilkapoor]

Closing this non-draft setup batch; replacement A/B test PRs will be opened as draft to keep production review from consuming sandbox capacity.