feat(plugin-git): infinite-scroll commit log and commit details panel

Replace the manual Load more button with an IntersectionObserver sentinel
that streams the next 30-commit page as the list scrolls, and make commit
rows selectable. Selecting a commit opens a details panel in the right
sidebar (subject, refs, author/committer, parents, message, changed files,
and the patch) backed by a new git:show RPC. The RPC bakes per-commit
records for the snapshot window so static builds show details offline.

Author: antfubot

plugins/git/src/client/components/commit-details-panel.tsx

@@ -0,0 +1,22 @@
+'use client'
+
+import type { DevframeRpcClient } from 'devframe/client'
+import type { CommitDetail } from '../../index'
+import { useCallback } from 'react'
+import { useRpcResource } from './use-rpc-resource'
+import { CommitDetailsView } from './views/commit-details-view'
+
+export interface CommitDetailsPanelProps {
+  hash: string
+  onClose?: () => void
+}
+
+export function CommitDetailsPanel({ hash, onClose }: CommitDetailsPanelProps) {
+  const loader = useCallback(
+    (rpc: DevframeRpcClient): Promise<CommitDetail> => rpc.call('git:show', { hash }),
+    [hash],
+  )
+  const { data, loading, error } = useRpcResource<CommitDetail>(loader)
+
+  return <CommitDetailsView data={data} loading={loading} error={error} onClose={onClose} />
+}

plugins/git/src/client/components/dashboard.tsx

@@ -5,6 +5,7 @@ import type { Branch, GitBranches } from '../../index'
 import { FileDiff, GitBranch, GitCommitHorizontal, GitGraph, ListTree, Moon, RefreshCw, Sun } from 'lucide-react'
 import { useCallback, useEffect, useState } from 'react'
 import { cn } from '../lib/utils'
+import { CommitDetailsPanel } from './commit-details-panel'
 import { DiffPanel } from './diff-panel'
 import { LogPanel } from './log-panel'
 import { RpcProvider, useRpc } from './rpc-provider'
@@ -93,6 +94,7 @@ function BranchRow({
 function DashboardBody() {
   const [pane, setPane] = useState<DashboardPane>('commits')
   const [selectedBranch, setSelectedBranch] = useState<string | null>(null)
+  const [selectedCommit, setSelectedCommit] = useState<string | null>(null)
 
   const branchesLoader = useCallback((rpc: DevframeRpcClient) => rpc.call('git:branches'), [])
   const {
@@ -116,9 +118,13 @@ function DashboardBody() {
 
   const selectBranch = (name: string) => {
     setSelectedBranch(name)
+    setSelectedCommit(null)
     setPane('commits')
   }
 
+  // The detail panel only makes sense alongside the commit list.
+  const showCommitDetails = pane === 'commits' && selectedCommit !== null
+
   return (
     <main className="flex min-h-svh w-full flex-col gap-4 px-4 py-5 md:px-6">
       <header className="flex items-center justify-between gap-3">
@@ -184,61 +190,79 @@ function DashboardBody() {
           </Card>
         </aside>
 
-        <section className="min-w-0">
-          <Card className="h-full">
-            <CardContent className="p-4">
+        <section className="flex min-w-0 flex-col">
+          <Card className="flex h-full min-h-0 flex-col py-4">
+            <CardContent className="flex min-h-0 flex-1 flex-col px-4">
               {pane === 'status' && <StatusPanel />}
-              {pane === 'commits' && <LogPanel branch={selectedBranch} />}
+              {pane === 'commits' && (
+                <LogPanel
+                  branch={selectedBranch}
+                  selectedHash={selectedCommit}
+                  onSelectCommit={setSelectedCommit}
+                />
+              )}
               {pane === 'diff' && <DiffPanel />}
             </CardContent>
           </Card>
         </section>
 
         <aside className="hidden min-w-0 xl:block">
-          <Card className="h-full">
-            <CardHeader className="flex-row items-center justify-between space-y-0 pb-2">
-              <div>
-                <CardTitle className="text-sm">Branches</CardTitle>
-                <CardDescription>
-                  {branches?.isRepo ? `${branches.branches.length} branches` : ' '}
-                </CardDescription>
-              </div>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="size-7"
-                onClick={refreshBranches}
-                disabled={branchesLoading}
-                aria-label="Refresh branches"
-              >
-                <RefreshCw className={cn('size-3.5', branchesLoading && 'animate-spin')} />
-              </Button>
-            </CardHeader>
-            <CardContent>
-              {!branches && (
-                <div className="space-y-2">
-                  {Array.from({ length: 5 }).map((_, i) => <Skeleton key={i} className="h-9 w-full" />)}
-                </div>
-              )}
+          <Card className="h-full py-4">
+            <CardContent className="px-4">
+              {showCommitDetails && selectedCommit
+                ? (
+                    <CommitDetailsPanel
+                      hash={selectedCommit}
+                      onClose={() => setSelectedCommit(null)}
+                    />
+                  )
+                : (
+                    <>
+                      <div className="flex items-center justify-between pb-2">
+                        <div>
+                          <CardTitle className="text-sm">Branches</CardTitle>
+                          <CardDescription>
+                            {branches?.isRepo ? `${branches.branches.length} branches` : ' '}
+                          </CardDescription>
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="icon"
+                          className="size-7"
+                          onClick={refreshBranches}
+                          disabled={branchesLoading}
+                          aria-label="Refresh branches"
+                        >
+                          <RefreshCw className={cn('size-3.5', branchesLoading && 'animate-spin')} />
+                        </Button>
+                      </div>
 
-              {branches && !branches.isRepo && (
-                <p className="text-muted-foreground text-sm">The working directory is not a git repository.</p>
-              )}
+                      {!branches && (
+                        <div className="space-y-2">
+                          {Array.from({ length: 5 }).map((_, i) => <Skeleton key={i} className="h-9 w-full" />)}
+                        </div>
+                      )}
 
-              {branches?.isRepo && (
-                <ScrollArea className="h-[calc(100vh-16rem)] pr-2">
-                  <ul className="space-y-1">
-                    {branches.branches.map(branch => (
-                      <BranchRow
-                        key={branch.name}
-                        branch={branch}
-                        selected={branch.name === selectedBranch}
-                        onSelect={selectBranch}
-                      />
-                    ))}
-                  </ul>
-                </ScrollArea>
-              )}
+                      {branches && !branches.isRepo && (
+                        <p className="text-muted-foreground text-sm">The working directory is not a git repository.</p>
+                      )}
+
+                      {branches?.isRepo && (
+                        <ScrollArea className="h-[calc(100vh-16rem)] pr-2">
+                          <ul className="space-y-1">
+                            {branches.branches.map(branch => (
+                              <BranchRow
+                                key={branch.name}
+                                branch={branch}
+                                selected={branch.name === selectedBranch}
+                                onSelect={selectBranch}
+                              />
+                            ))}
+                          </ul>
+                        </ScrollArea>
+                      )}
+                    </>
+                  )}
             </CardContent>
           </Card>
         </aside>

plugins/git/src/client/components/log-panel.tsx

@@ -10,9 +10,13 @@ const PAGE = 30
 
 export interface LogPanelProps {
   branch?: string | null
+  /** Hash of the currently selected commit (drives row highlight). */
+  selectedHash?: string | null
+  /** Called when a commit row is activated. */
+  onSelectCommit?: (hash: string) => void
 }
 
-export function LogPanel({ branch }: LogPanelProps) {
+export function LogPanel({ branch, selectedHash, onSelectCommit }: LogPanelProps) {
   const { rpc } = useRpc()
   const [isRepo, setIsRepo] = useState<boolean | null>(null)
   const [commits, setCommits] = useState<Commit[]>([])
@@ -116,8 +120,10 @@ export function LogPanel({ branch }: LogPanelProps) {
       selectedRef={branch ?? null}
       currentBranch={currentBranch}
       workingChanges={workingChanges}
+      selectedHash={selectedHash}
       onRefresh={refresh}
       onLoadMore={loadMore}
+      onSelectCommit={onSelectCommit}
     />
   )
 }

plugins/git/src/client/components/views/commit-details-view.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import type { CommitDetail } from '../../../index'
+import { CommitDetailsView } from './commit-details-view'
+
+const now = Date.now()
+
+const PATCH = `diff --git a/src/client/components/views/log-panel-view.tsx b/src/client/components/views/log-panel-view.tsx
+index 1234567..89abcde 100644
+--- a/src/client/components/views/log-panel-view.tsx
++++ b/src/client/components/views/log-panel-view.tsx
+@@ -300,12 +300,9 @@ export function LogPanelView(props: LogPanelViewProps) {
+-      {isRepo === true && hasMore && (
+-        <Button variant="outline" size="sm" onClick={onLoadMore}>Load more</Button>
+-      )}
++      {hasMore && (
++        <div ref={sentinelRef}>Loading more…</div>
++      )}`
+
+const detail: CommitDetail = {
+  isRepo: true,
+  found: true,
+  hash: 'a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0',
+  shortHash: 'a1b2c3d',
+  author: 'Ada Lovelace',
+  email: 'ada@example.dev',
+  date: now - 36e5,
+  committer: 'Ada Lovelace',
+  committerEmail: 'ada@example.dev',
+  commitDate: now - 36e5,
+  subject: 'Auto-load commits on scroll instead of a Load more button',
+  body: 'Replaces the manual pagination control with an IntersectionObserver\nsentinel so history streams in as the user scrolls.',
+  parents: ['b2c3d4e5f6a7b8c9'],
+  refs: ['HEAD -> main', 'origin/main'],
+  files: [
+    { path: 'src/client/components/views/log-panel-view.tsx', additions: 41, deletions: 18, binary: false },
+    { path: 'src/client/components/log-panel.tsx', additions: 6, deletions: 1, binary: false },
+    { path: 'public/preview.png', additions: 0, deletions: 0, binary: true },
+  ],
+  totalAdditions: 47,
+  totalDeletions: 19,
+  patch: PATCH,
+  truncated: false,
+}
+
+const meta = {
+  title: 'Panels/CommitDetails',
+  component: CommitDetailsView,
+  args: {
+    data: detail,
+    loading: false,
+    error: null,
+    onClose: () => undefined,
+  },
+} satisfies Meta<typeof CommitDetailsView>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+export const Loading: Story = { args: { data: null, loading: true } }
+export const StaticNoPatch: Story = { args: { data: { ...detail, patch: null } } }
+export const NotFound: Story = { args: { data: { ...detail, found: false } } }
+export const Error: Story = { args: { data: null, error: 'fatal: bad object deadbeef' } }