feat(web): focused single-file commit diff view

- 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>

Author: brendan-kellam

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - Added commit history viewer to code browser. [#1150](https://github.com/sourcebot-dev/sourcebot/pull/1150)
+- Added commit diff viewer to code browser. [#1154](https://github.com/sourcebot-dev/sourcebot/pull/1154)
 - Added `/api/commits/authors` to the public API to allow fetching a list of authors for a given path and revision. [#1150](https://github.com/sourcebot-dev/sourcebot/pull/1150)
 - Added optional `path` query parameter to the `/api/diff` endpoint and `get_diff` MCP tool to restrict diffs to changes touching a specific file. [#1154](https://github.com/sourcebot-dev/sourcebot/pull/1154)
 

packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx

@@ -1,23 +1,33 @@
 import { getRepoInfoByName } from "@/actions";
 import { PathHeader } from "@/app/(app)/components/pathHeader";
+import { Button } from "@/components/ui/button";
 import { Separator } from "@/components/ui/separator";
-import { cn, getCodeHostInfoForRepo, isServiceError } from "@/lib/utils";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { cn, getCodeHostInfoForRepo, isServiceError, truncateSha } from "@/lib/utils";
+import { X } from "lucide-react";
 import Image from "next/image";
+import Link from "next/link";
+import { getBrowsePath } from "../../../hooks/utils";
 import { PureCodePreviewPanel } from "./pureCodePreviewPanel";
 import { getFileSource } from '@/features/git';
 
 interface CodePreviewPanelProps {
     path: string;
     repoName: string;
     revisionName?: string;
+    // When set, the file's content is fetched at this ref while the
+    // surrounding browse context (path header) stays at `revisionName`.
+    previewRef?: string;
 }
 
-export const CodePreviewPanel = async ({ path, repoName, revisionName }: CodePreviewPanelProps) => {
+export const CodePreviewPanel = async ({ path, repoName, revisionName, previewRef }: CodePreviewPanelProps) => {
+    const contentRef = previewRef ?? revisionName;
+
     const [fileSourceResponse, repoInfoResponse] = await Promise.all([
         getFileSource({
             path,
             repo: repoName,
-            ref: revisionName,
+            ref: contentRef,
         }, { source: 'sourcebot-web-client' }),
         getRepoInfoByName(repoName),
     ]);
@@ -53,7 +63,7 @@ export const CodePreviewPanel = async ({ path, repoName, revisionName }: CodePre
                         displayName: repoInfoResponse.displayName,
                         externalWebUrl: repoInfoResponse.externalWebUrl,
                     }}
-                    revisionName={revisionName}
+                    revisionName={contentRef}
                 />
 
                 {fileWebUrl && (
@@ -74,12 +84,54 @@ export const CodePreviewPanel = async ({ path, repoName, revisionName }: CodePre
                 )}
             </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>
+                    <Tooltip key={previewRef}>
+                        <TooltipTrigger>
+                            <Button
+                                asChild
+                                variant="ghost"
+                                size="icon"
+                                className="h-6 w-6 text-muted-foreground"
+                            >
+                                <Link
+                                    href={getBrowsePath({
+                                        repoName,
+                                        revisionName,
+                                        path,
+                                        pathType: 'blob',
+                                    })}
+                                    aria-label="Close preview"
+                                >
+                                    <X className="h-4 w-4" />
+                                </Link>
+                            </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>Close preview</TooltipContent>
+                    </Tooltip>
+                </div>
+            )}
             <PureCodePreviewPanel
                 source={fileSourceResponse.source}
                 language={fileSourceResponse.language}
                 repoName={repoName}
                 path={path}
-                revisionName={revisionName ?? 'HEAD'}
+                revisionName={contentRef ?? 'HEAD'}
             />
         </>
     )

packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fileDiffList.tsx

@@ -11,8 +11,6 @@ interface FileDiffListProps {
     commitSha: string;
     // Null for the initial commit (no parent).
     parentSha: string | null;
-    // When set, scroll the matching file into view on mount.
-    targetPath?: string;
 }
 
 // Constants used to estimate row height up front so the virtualizer can size
@@ -34,33 +32,13 @@ const estimateRowHeight = (file: FileDiff): number => {
     return Math.max(estimated, MIN_ROW_HEIGHT_PX);
 };
 
-export const FileDiffList = ({ files, repoName, commitSha, parentSha, targetPath }: FileDiffListProps) => {
+export const FileDiffList = ({ files, repoName, commitSha, parentSha }: FileDiffListProps) => {
     const parentRef = useRef<HTMLDivElement>(null);
 
-    // Reorder so the URL-targeted file (matched against either side, so
-    // renames work regardless of which name the URL points to) is at the top
-    // of the list. Other files keep their original order behind it.
-    const orderedFiles = useMemo(() => {
-        if (!targetPath) {
-            return files;
-        }
-        const targetIdx = files.findIndex(
-            (file) => file.newPath === targetPath || file.oldPath === targetPath,
-        );
-        if (targetIdx < 0) {
-            return files;
-        }
-        return [
-            files[targetIdx],
-            ...files.slice(0, targetIdx),
-            ...files.slice(targetIdx + 1),
-        ];
-    }, [files, targetPath]);
-
     const virtualizer = useVirtualizer({
-        count: orderedFiles.length,
+        count: files.length,
         getScrollElement: () => parentRef.current,
-        estimateSize: (index) => estimateRowHeight(orderedFiles[index]),
+        estimateSize: (index) => estimateRowHeight(files[index]),
         overscan: 6,
     });
 
@@ -82,7 +60,7 @@ export const FileDiffList = ({ files, repoName, commitSha, parentSha, targetPath
                 }}
             >
                 {virtualizer.getVirtualItems().map((virtualRow) => {
-                    const file = orderedFiles[virtualRow.index];
+                    const file = files[virtualRow.index];
                     const rowKey = file.newPath ?? file.oldPath ?? `idx-${virtualRow.index}`;
                     return (
                         <div

packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fileDiffRow.tsx

@@ -7,23 +7,9 @@ import { useCallback, useMemo } from "react";
 import { CommitActionLink } from "../../../components/commitParts";
 import { getBrowsePath } from "../../../hooks/utils";
 import { computeChangeCounts, DiffStat } from "./diffStat";
+import { getFileStatus, StatusBadge } from "./fileStatus";
 import { LightweightDiffViewer } from "./lightweightDiffViewer";
 
-type FileStatus = 'added' | 'modified' | 'deleted' | 'renamed';
-
-const getFileStatus = (file: FileDiff): FileStatus => {
-    if (!file.oldPath) {
-        return 'added';
-    }
-    if (!file.newPath) {
-        return 'deleted';
-    }
-    if (file.oldPath !== file.newPath) {
-        return 'renamed';
-    }
-    return 'modified';
-};
-
 const getDisplayPath = (file: FileDiff): string => {
     if (getFileStatus(file) === 'renamed') {
         return `${file.oldPath} → ${file.newPath}`;
@@ -103,25 +89,3 @@ export const FileDiffRow = ({ file, yOffset, repoName, commitSha, parentSha }: F
         </div>
     );
 };
-
-const STATUS_LABELS: Record<FileStatus, string> = {
-    added: 'A',
-    modified: 'M',
-    deleted: 'D',
-    renamed: 'R',
-};
-
-const STATUS_COLORS: Record<FileStatus, string> = {
-    added: 'bg-green-500/20 text-green-700 dark:text-green-400',
-    modified: 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-400',
-    deleted: 'bg-red-500/20 text-red-700 dark:text-red-400',
-    renamed: 'bg-blue-500/20 text-blue-700 dark:text-blue-400',
-};
-
-const StatusBadge = ({ status }: { status: FileStatus }) => (
-    <span
-        className={`inline-flex items-center justify-center w-5 h-5 rounded text-xs font-mono font-bold ${STATUS_COLORS[status]}`}
-    >
-        {STATUS_LABELS[status]}
-    </span>
-);

packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/fileStatus.tsx

@@ -0,0 +1,38 @@
+import type { FileDiff } from "@/features/git";
+
+export type FileStatus = 'added' | 'modified' | 'deleted' | 'renamed';
+
+export const getFileStatus = (file: FileDiff): FileStatus => {
+    if (!file.oldPath) {
+        return 'added';
+    }
+    if (!file.newPath) {
+        return 'deleted';
+    }
+    if (file.oldPath !== file.newPath) {
+        return 'renamed';
+    }
+    return 'modified';
+};
+
+const STATUS_BADGE_LABELS: Record<FileStatus, string> = {
+    added: 'A',
+    modified: 'M',
+    deleted: 'D',
+    renamed: 'R',
+};
+
+const STATUS_BADGE_COLORS: Record<FileStatus, string> = {
+    added: 'bg-green-500/20 text-green-700 dark:text-green-400',
+    modified: 'bg-yellow-500/20 text-yellow-700 dark:text-yellow-400',
+    deleted: 'bg-red-500/20 text-red-700 dark:text-red-400',
+    renamed: 'bg-blue-500/20 text-blue-700 dark:text-blue-400',
+};
+
+export const StatusBadge = ({ status }: { status: FileStatus }) => (
+    <span
+        className={`inline-flex items-center justify-center w-5 h-5 rounded text-xs font-mono font-bold ${STATUS_BADGE_COLORS[status]}`}
+    >
+        {STATUS_BADGE_LABELS[status]}
+    </span>
+);