[wip] Commit diffs

CHANGELOG.md

@@ -10,6 +10,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 `/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)
 
 ### Fixed
 - Bumped `postcss` to `8.5.10`. [#1155](https://github.com/sourcebot-dev/sourcebot/pull/1155)

docs/api-reference/sourcebot-public.openapi.json

@@ -1585,6 +1585,16 @@
             "description": "The head git ref (branch, tag, or commit SHA) to diff to.",
             "name": "head",
             "in": "query"
+          },
+          {
+            "schema": {
+              "type": "string",
+              "description": "Restrict the diff to changes touching this file path. Omit to diff all changes between the two refs."
+            },
+            "required": false,
+            "description": "Restrict the diff to changes touching this file path. Omit to diff all changes between the two refs.",
+            "name": "path",
+            "in": "query"
           }
         ],
         "responses": {

packages/shared/src/env.server.ts

@@ -246,6 +246,7 @@ const options = {
 
         DEBUG_WRITE_CHAT_MESSAGES_TO_FILE: booleanSchema.default('false'),
         DEBUG_ENABLE_REACT_SCAN: booleanSchema.default('false'),
+        DEBUG_ENABLE_REACT_GRAP: booleanSchema.default('false'),
 
         LANGFUSE_SECRET_KEY: z.string().optional(),
 

packages/web/package.json

@@ -50,6 +50,7 @@
     "@codemirror/language": "^6.0.0",
     "@codemirror/language-data": "^6.5.1",
     "@codemirror/legacy-modes": "^6.4.2",
+    "@codemirror/merge": "^6.12.1",
     "@codemirror/search": "^6.5.6",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.33.0",

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

@@ -11,8 +11,8 @@ import { useNonEmptyQueryParam } from "@/hooks/useNonEmptyQueryParam";
 import { search } from "@codemirror/search";
 import CodeMirror, { EditorSelection, EditorView, ReactCodeMirrorRef, SelectionRange, ViewUpdate } from "@uiw/react-codemirror";
 import { useEffect, useMemo, useState } from "react";
-import { EditorContextMenu } from "../../../components/editorContextMenu";
-import { BrowseHighlightRange, HIGHLIGHT_RANGE_QUERY_PARAM } from "../../hooks/utils";
+import { EditorContextMenu } from "@/app/(app)/components/editorContextMenu";
+import { BrowseHighlightRange, HIGHLIGHT_RANGE_QUERY_PARAM } from "@/app/(app)/browse/hooks/utils";
 import { rangeHighlightingExtension } from "./rangeHighlightingExtension";
 
 interface PureCodePreviewPanelProps {

packages/web/src/app/(app)/browse/[...path]/components/rangeHighlightingExtension.ts → packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/rangeHighlightingExtension.ts

@@ -2,7 +2,7 @@
 
 import { StateField, Range } from "@codemirror/state";
 import { Decoration, DecorationSet, EditorView } from "@codemirror/view";
-import { BrowseHighlightRange } from "../../hooks/utils";
+import { BrowseHighlightRange } from "@/app/(app)/browse/hooks/utils";
 
 const markDecoration = Decoration.mark({
     class: "searchMatch-selected",

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

@@ -0,0 +1,127 @@
+import { Button } from "@/components/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { getCommit, getDiff } from "@/features/git";
+import { isServiceError } from "@/lib/utils";
+import { format } from "date-fns";
+import { FileCode } from "lucide-react";
+import Link from "next/link";
+import { formatAuthorsText, getCommitAuthors } from "../../../components/commitAuthors";
+import { AuthorsAvatarGroup } from "../../../components/commitParts";
+import { getBrowsePath } from "../../../hooks/utils";
+import { CommitHashLine } from "./commitHashLine";
+import { CommitMessage } from "./commitMessage";
+import { computeTotalChangeCounts, DiffStat } from "./diffStat";
+import { FileDiffList } from "./fileDiffList";
+
+interface CommitDiffPanelProps {
+    repoName: string;
+    revisionName?: string;
+    commitSha: string;
+    path: string;
+}
+
+// Git's well-known empty-tree SHA. Used as the diff base when the commit has
+// no parent (i.e. the initial commit), since `<sha>^` doesn't resolve there.
+const EMPTY_TREE_SHA = '4b825dc642cb6eb9a060e54bf8d69288fbee4904';
+
+export const CommitDiffPanel = async ({ repoName, commitSha, path }: CommitDiffPanelProps) => {
+    const [commitResponse, initialDiffResponse] = await Promise.all([
+        getCommit({ repo: repoName, ref: commitSha }),
+        getDiff({ repo: repoName, base: `${commitSha}^`, head: commitSha }),
+    ]);
+
+    if (isServiceError(commitResponse)) {
+        return (
+            <div className="p-6 text-sm text-destructive">
+                Error loading commit: {commitResponse.message}
+            </div>
+        );
+    }
+
+    // Initial commit has no parent — `<sha>^` fails. Fall back to diffing
+    // against git's empty tree so all files show as added.
+    let diffResponse = initialDiffResponse;
+    if (isServiceError(initialDiffResponse) && commitResponse.parents.length === 0) {
+        diffResponse = await getDiff({
+            repo: repoName,
+            base: EMPTY_TREE_SHA,
+            head: commitSha,
+        });
+    }
+
+    if (isServiceError(diffResponse)) {
+        return (
+            <div className="p-6 text-sm text-destructive">
+                Error loading diff: {diffResponse.message}
+            </div>
+        );
+    }
+
+    const baseSha = commitResponse.parents.length > 0 ? commitResponse.parents[0] : null;
+    const subject = commitResponse.message.split('\n')[0];
+    const formattedDate = format(new Date(commitResponse.date), 'MMM d, yyyy');
+    const totalChangeCounts = computeTotalChangeCounts(diffResponse.files);
+    const authors = getCommitAuthors(commitResponse);
+
+    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-1 min-w-0">
+                        <CommitMessage subject={subject} body={commitResponse.body} />
+                    </div>
+                    <Tooltip>
+                        <TooltipTrigger asChild>
+                            <Button asChild variant="outline" size="sm" className="flex-shrink-0">
+                                <Link
+                                    href={getBrowsePath({
+                                        repoName,
+                                        revisionName: commitResponse.hash,
+                                        path: '',
+                                        pathType: 'tree',
+                                    })}
+                                >
+                                    <FileCode className="h-4 w-4 mr-1" />
+                                    Browse files
+                                </Link>
+                            </Button>
+                        </TooltipTrigger>
+                        <TooltipContent>View code at this commit</TooltipContent>
+                    </Tooltip>
+                </div>
+                <div className="flex flex-row items-center gap-2 text-sm text-muted-foreground">
+                    <AuthorsAvatarGroup authors={authors} />
+                    <span
+                        className="font-medium text-foreground"
+                        title={authors.map((a) => a.name).join(", ")}
+                    >
+                        {formatAuthorsText(authors)}
+                    </span>
+                    <span>committed on {formattedDate}</span>
+                </div>
+                <CommitHashLine
+                    repoName={repoName}
+                    commitHash={commitResponse.hash}
+                    parents={commitResponse.parents}
+                />
+            </div>
+            <div className="flex flex-row items-center justify-between gap-2 px-4 py-2 border-b shrink-0">
+                <h2 className="text-sm font-medium">
+                    {diffResponse.files.length} file{diffResponse.files.length > 1 ? 's' : ''} changed
+                </h2>
+                <DiffStat {...totalChangeCounts} />
+            </div>
+            {diffResponse.files.length === 0 ? (
+                <div className="p-4 text-sm text-muted-foreground">No files changed.</div>
+            ) : (
+                <FileDiffList
+                    files={diffResponse.files}
+                    repoName={repoName}
+                    commitSha={commitSha}
+                    parentSha={baseSha}
+                    targetPath={path || undefined}
+                />
+            )}
+        </div>
+    );
+};

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

@@ -0,0 +1,55 @@
+'use client';
+
+import { CopyIconButton } from "@/app/(app)/components/copyIconButton";
+import { useToast } from "@/components/hooks/use-toast";
+import Link from "next/link";
+import { Fragment, useCallback } from "react";
+import { getBrowsePath } from "../../../hooks/utils";
+
+interface CommitHashLineProps {
+    repoName: string;
+    commitHash: string;
+    parents: string[];
+}
+
+export const CommitHashLine = ({ repoName, commitHash, parents }: CommitHashLineProps) => {
+    const { toast } = useToast();
+
+    const onCopyHash = useCallback(() => {
+        navigator.clipboard.writeText(commitHash).then(() => {
+            toast({ description: "✅ Copied commit SHA to clipboard" });
+        });
+        return true;
+    }, [commitHash, toast]);
+
+    return (
+        <div className="text-xs font-mono text-muted-foreground flex flex-row items-center gap-1">
+            {parents.length > 0 && (
+                <>
+                    <span>
+                        {parents.length} parent{parents.length > 1 ? 's' : ''}
+                    </span>
+                    {parents.map((parent, i) => (
+                        <Fragment key={parent}>
+                            {i > 0 && <span>+</span>}
+                            <Link
+                                href={getBrowsePath({
+                                    repoName,
+                                    path: '',
+                                    pathType: 'commit',
+                                    commitSha: parent,
+                                })}
+                                className="underline hover:text-foreground"
+                                title={parent}
+                            >
+                                {parent.slice(0, 7)}
+                            </Link>
+                        </Fragment>
+                    ))}
+                </>
+            )}
+            <span>commit {commitHash.slice(0, 7)}</span>
+            <CopyIconButton onCopy={onCopyHash} />
+        </div>
+    );
+};

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

@@ -0,0 +1,31 @@
+'use client';
+
+import { CommitBody, CommitBodyToggle } from "@/app/(app)/browse/components/commitParts";
+import { useState } from "react";
+
+interface CommitMessageProps {
+    subject: string;
+    body: string;
+}
+
+export const CommitMessage = ({ subject, body }: CommitMessageProps) => {
+    const [isBodyExpanded, setIsBodyExpanded] = useState(false);
+    const hasBody = body.trim().length > 0;
+
+    return (
+        <>
+            <div className="flex flex-row items-center gap-2">
+                <h1 className="text-lg font-semibold">{subject}</h1>
+                {hasBody && (
+                    <CommitBodyToggle
+                        pressed={isBodyExpanded}
+                        onPressedChange={setIsBodyExpanded}
+                    />
+                )}
+            </div>
+            {hasBody && isBodyExpanded && (
+                <CommitBody body={body} className="rounded max-h-[40vh] overflow-y-auto" />
+            )}
+        </>
+    );
+};

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

@@ -0,0 +1,97 @@
+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;
+    let deletions = 0;
+    for (const hunk of file.hunks) {
+        for (const raw of hunk.body.split('\n')) {
+            if (raw.startsWith('+')) {
+                additions++;
+            } else if (raw.startsWith('-')) {
+                deletions++;
+            }
+        }
+    }
+    return { additions, deletions };
+};
+
+// Sum line-level change counts across multiple files.
+export const computeTotalChangeCounts = (files: FileDiff[]) => {
+    let additions = 0;
+    let deletions = 0;
+    for (const file of files) {
+        const counts = computeChangeCounts(file);
+        additions += counts.additions;
+        deletions += counts.deletions;
+    }
+    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;
+}
+
+export const DiffStat = ({ additions, deletions }: DiffStatProps) => {
+    const total = additions + deletions;
+
+    // Skip rendering when there are no line-level changes (e.g. pure renames).
+    if (total === 0) {
+        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"
+            title={`${additions} additions, ${deletions} deletions`}
+        >
+            {additions > 0 && (
+                <span className="text-green-700 dark:text-green-400">+{additions}</span>
+            )}
+            {deletions > 0 && (
+                <span className="text-red-700 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>
+        </div>
+    );
+};