feat(web): add History tab to bottom panel with latest-commit summary

Adds a new History tab to the bottom panel alongside Explore. The tab is
toggled via shift+mod+h with the existing collapse-on-same/switch-on-other
semantics, and the active tab is indicated with an underline using
LowProfileTabsTrigger (now accepts an optional className).

The history panel itself is a client-side infinite-scroll list (react-query
useInfiniteQuery + IntersectionObserver) that hits a new client-side
listCommits wrapper. Each row reuses AuthorsAvatarGroup, the co-author
parsing, and the new shared CommitActionLink primitive for the
view-code-at-commit / view-repo-at-commit actions. CommitRow was refactored
to use the same primitive.

The previous CommitHeader rendered above each open file is removed.
A compact summary of the latest commit now appears in the bottom panel
header (right side) whenever the panel is collapsed, so the file/folder's
last commit stays glanceable without consuming a full row above the code.
When the panel is expanded the right side hosts the View-full-history
and Hide buttons.

Shared commit utilities (commitAuthors.ts, commitParts.tsx) moved up
from browse/[...path]/components/ to browse/components/ so both the
existing commits view and the new bottom-panel components import them
without crossing route boundaries.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: brendan-kellam

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

@@ -4,8 +4,7 @@ import { Separator } from "@/components/ui/separator";
 import { cn, getCodeHostInfoForRepo, isServiceError } from "@/lib/utils";
 import Image from "next/image";
 import { PureCodePreviewPanel } from "./pureCodePreviewPanel";
-import { CommitHeader } from "./commitHeader";
-import { getFileSource, listCommits } from '@/features/git';
+import { getFileSource } from '@/features/git';
 
 interface CodePreviewPanelProps {
     path: string;
@@ -14,19 +13,13 @@ interface CodePreviewPanelProps {
 }
 
 export const CodePreviewPanel = async ({ path, repoName, revisionName }: CodePreviewPanelProps) => {
-    const [fileSourceResponse, repoInfoResponse, commitsResponse] = await Promise.all([
+    const [fileSourceResponse, repoInfoResponse] = await Promise.all([
         getFileSource({
             path,
             repo: repoName,
             ref: revisionName,
         }, { source: 'sourcebot-web-client' }),
         getRepoInfoByName(repoName),
-        listCommits({
-            repo: repoName,
-            path,
-            ref: revisionName,
-            maxCount: 1,
-        }),
     ]);
 
     if (isServiceError(fileSourceResponse)) {
@@ -37,8 +30,6 @@ export const CodePreviewPanel = async ({ path, repoName, revisionName }: CodePre
         return <div>Error loading repo info: {repoInfoResponse.message}</div>
     }
 
-    const latestCommit = !isServiceError(commitsResponse) ? commitsResponse.commits[0] : undefined;
-
     const codeHostInfo = getCodeHostInfoForRepo({
         codeHostType: repoInfoResponse.codeHostType,
         name: repoInfoResponse.name,
@@ -83,17 +74,6 @@ export const CodePreviewPanel = async ({ path, repoName, revisionName }: CodePre
                 )}
             </div>
             <Separator />
-            {latestCommit && (
-                <>
-                    <CommitHeader
-                        commit={latestCommit}
-                        repoName={repoName}
-                        path={path}
-                        revisionName={revisionName}
-                    />
-                    <Separator />
-                </>
-            )}
             <PureCodePreviewPanel
                 source={fileSourceResponse.source}
                 language={fileSourceResponse.language}

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

@@ -3,15 +3,17 @@
 import { useCallback, useMemo, useState } from "react";
 import { formatDistanceToNow } from "date-fns";
 import { Code, FileCode } from "lucide-react";
-import Link from "next/link";
-import { Button } from "@/components/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { CopyIconButton } from "@/app/(app)/components/copyIconButton";
 import { useToast } from "@/components/hooks/use-toast";
 import type { Commit } from "@/features/git";
 import { getBrowsePath } from "../../hooks/utils";
-import { formatAuthorsText, getCommitAuthors } from "./commitAuthors";
-import { AuthorsAvatarGroup, CommitBody, CommitBodyToggle } from "./commitParts";
+import { formatAuthorsText, getCommitAuthors } from "../../components/commitAuthors";
+import {
+    AuthorsAvatarGroup,
+    CommitActionLink,
+    CommitBody,
+    CommitBodyToggle,
+} from "../../components/commitParts";
 
 interface CommitRowProps {
     commit: Commit;
@@ -81,27 +83,17 @@ export const CommitRow = ({ commit, repoName, path }: CommitRowProps) => {
                     </span>
                     <CopyIconButton onCopy={onCopySha} />
                     {hasFilePath && (
-                        <Tooltip>
-                            <TooltipTrigger asChild>
-                                <Button asChild variant="ghost" size="sm" className="h-6 w-6 text-muted-foreground">
-                                    <Link href={viewFileAtCommitHref} aria-label="View code at this commit">
-                                        <FileCode className="h-3 w-3" />
-                                    </Link>
-                                </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>View code at this commit</TooltipContent>
-                        </Tooltip>
+                        <CommitActionLink
+                            href={viewFileAtCommitHref}
+                            label="View code at this commit"
+                            icon={<FileCode className="h-3 w-3" />}
+                        />
                     )}
-                    <Tooltip>
-                        <TooltipTrigger asChild>
-                            <Button asChild variant="ghost" size="sm" className="h-6 w-6 text-muted-foreground">
-                                <Link href={viewRepoAtCommitHref} aria-label="View repository at this commit">
-                                    <Code className="h-3 w-3" />
-                                </Link>
-                            </Button>
-                        </TooltipTrigger>
-                        <TooltipContent>View repository at this commit</TooltipContent>
-                    </Tooltip>
+                    <CommitActionLink
+                        href={viewRepoAtCommitHref}
+                        label="View repository at this commit"
+                        icon={<Code className="h-3 w-3" />}
+                    />
                 </div>
             </div>
             {hasBody && isBodyExpanded && (

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

@@ -6,7 +6,7 @@ import { Separator } from "@/components/ui/separator";
 import { listCommitAuthors, listCommits } from "@/features/git";
 import { isServiceError } from "@/lib/utils";
 import { AuthorFilter } from "./authorFilter";
-import { dedupeCommitAuthorsByEmail, escapeGitBreLiteral } from "./commitAuthors";
+import { dedupeCommitAuthorsByEmail, escapeGitBreLiteral } from "../../components/commitAuthors";
 import { CommitRow } from "./commitRow";
 import { CommitsPagination } from "./commitsPagination";
 import { DateFilter } from "./dateFilter";

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

@@ -14,6 +14,7 @@ export interface BrowseState {
     isFileTreePanelCollapsed: boolean;
     isFileSearchOpen: boolean;
     activeExploreMenuTab: "references" | "definitions";
+    activeBottomPanelTab: "explore" | "history";
     bottomPanelSize: number;
 }
 
@@ -23,6 +24,7 @@ const defaultState: BrowseState = {
     isFileTreePanelCollapsed: false,
     isFileSearchOpen: false,
     activeExploreMenuTab: "references",
+    activeBottomPanelTab: "history",
     bottomPanelSize: 35,
 };