sourcebot-dev
diff --git a/‎CHANGELOG.md‎
Lines changed: 2 additions & 0 deletions b/‎CHANGELOG.md‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎docs/api-reference/sourcebot-public.openapi.json‎
Lines changed: 10 additions & 0 deletions b/‎docs/api-reference/sourcebot-public.openapi.json‎
Lines changed: 10 additions & 0 deletions
diff --git a/‎packages/shared/src/env.server.ts‎
Lines changed: 1 addition & 0 deletions b/‎packages/shared/src/env.server.ts‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎packages/web/package.json‎
Lines changed: 1 addition & 0 deletions b/‎packages/web/package.json‎
Lines changed: 1 addition & 0 deletions
diff --git a/‎…...path]/components/codePreviewPanel.tsx‎ ‎…ts/codePreviewPanel/codePreviewPanel.tsx‎packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel.tsx renamed to packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
Lines changed: 57 additions & 5 deletions b/‎…...path]/components/codePreviewPanel.tsx‎ ‎…ts/codePreviewPanel/codePreviewPanel.tsx‎packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel.tsx renamed to packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/codePreviewPanel.tsx
Lines changed: 57 additions & 5 deletions
diff --git a/‎…ath]/components/pureCodePreviewPanel.tsx‎ ‎…odePreviewPanel/pureCodePreviewPanel.tsx‎packages/web/src/app/(app)/browse/[...path]/components/pureCodePreviewPanel.tsx renamed to packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/pureCodePreviewPanel.tsx
Lines changed: 2 additions & 2 deletions b/‎…ath]/components/pureCodePreviewPanel.tsx‎ ‎…odePreviewPanel/pureCodePreviewPanel.tsx‎packages/web/src/app/(app)/browse/[...path]/components/pureCodePreviewPanel.tsx renamed to packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/pureCodePreviewPanel.tsx
Lines changed: 2 additions & 2 deletions
diff --git a/‎…components/rangeHighlightingExtension.ts‎ ‎…eviewPanel/rangeHighlightingExtension.ts‎packages/web/src/app/(app)/browse/[...path]/components/rangeHighlightingExtension.ts renamed to packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/rangeHighlightingExtension.ts
Lines changed: 1 addition & 1 deletion b/‎…components/rangeHighlightingExtension.ts‎ ‎…eviewPanel/rangeHighlightingExtension.ts‎packages/web/src/app/(app)/browse/[...path]/components/rangeHighlightingExtension.ts renamed to packages/web/src/app/(app)/browse/[...path]/components/codePreviewPanel/rangeHighlightingExtension.ts
Lines changed: 1 addition & 1 deletion
diff --git a/‎packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/commitHashLine.tsx‎
Lines changed: 55 additions & 0 deletions b/‎packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/commitHashLine.tsx‎
Lines changed: 55 additions & 0 deletions
diff --git a/‎packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/commitMessage.tsx‎
Lines changed: 31 additions & 0 deletions b/‎packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/commitMessage.tsx‎
Lines changed: 31 additions & 0 deletions
diff --git a/‎packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/diffStat.tsx‎
Lines changed: 97 additions & 0 deletions b/‎packages/web/src/app/(app)/browse/[...path]/components/commitDiffPanel/diffStat.tsx‎
Lines changed: 97 additions & 0 deletions
@@ -9,7 +9,9 @@ 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)
 
 ### Fixed
 - Bumped `postcss` to `8.5.10`. [#1155](https://github.com/sourcebot-dev/sourcebot/pull/1155)
 
@@ -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": {
 
@@ -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_GRAB: booleanSchema.default('false'),
 
         LANGFUSE_SECRET_KEY: z.string().optional(),
 
 
@@ -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",
 
@@ -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'}
             />
         </>
     )
 
@@ -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 {
 
@@ -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",
 
@@ -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>
+    );
+};
@@ -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" />
+            )}
+        </>
+    );
+};
@@ -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>
+    );
+};