fix(plugin-git): make commit load-more pagination reliable

antfubot · antfubot · commit a04f69034d35 · 2026-06-19T03:34:26.000Z
diff --git a/plugins/git/src/client/components/branches-panel.tsx b/plugins/git/src/client/components/branches-panel.tsx
@@ -12,11 +12,11 @@ import { useRpcResource } from './use-rpc-resource'
 
 function BranchRow({ branch }: { branch: Branch }) {
   return (
-    <li className="border-border/60 flex items-center gap-2 border-b py-2 last:border-0">
+    <li className="border-border/60 flex items-center gap-2 border-b py-1.5 last:border-0">
       <GitBranch className={`size-4 shrink-0 ${branch.current ? 'text-primary' : 'text-muted-foreground'}`} />
       <div className="min-w-0 flex-1">
         <div className="flex items-center gap-2">
-          <span className={`truncate font-mono text-sm ${branch.current ? 'font-semibold' : ''}`}>
+          <span className={`truncate font-mono text-xs ${branch.current ? 'font-semibold' : ''}`}>
             {branch.name}
           </span>
           {branch.current && (
@@ -58,8 +58,8 @@ export function BranchesPanel() {
         <span className="text-muted-foreground text-xs">
           {data?.isRepo ? `${data.branches.length} branches` : ' '}
         </span>
-        <Button variant="ghost" size="icon" onClick={refresh} disabled={loading} aria-label="Refresh branches">
-          <RefreshCw className={loading ? 'animate-spin' : ''} />
+        <Button variant="ghost" size="icon" className="size-7" onClick={refresh} disabled={loading} aria-label="Refresh branches">
+          <RefreshCw className={`size-3.5 ${loading ? 'animate-spin' : ''}`} />
         </Button>
       </div>
 
diff --git a/plugins/git/src/client/components/dashboard.tsx b/plugins/git/src/client/components/dashboard.tsx
@@ -29,22 +29,22 @@ function ConnectionBadge() {
 function ThemeToggle() {
   const { theme, toggle } = useTheme()
   return (
-    <Button variant="ghost" size="icon" onClick={toggle} aria-label="Toggle light/dark theme">
-      {theme === 'dark' ? <Sun /> : <Moon />}
+    <Button variant="ghost" size="icon" className="size-7" onClick={toggle} aria-label="Toggle light/dark theme">
+      {theme === 'dark' ? <Sun className="size-3.5" /> : <Moon className="size-3.5" />}
     </Button>
   )
 }
 
 export function Dashboard() {
   return (
     <RpcProvider>
-      <main className="mx-auto flex max-w-3xl flex-col gap-6 px-6 py-10">
+      <main className="mx-auto flex max-w-2xl flex-col gap-4 px-4 py-6">
         <header className="flex items-center justify-between gap-3">
           <div className="flex items-center gap-2">
             <GitGraph className="text-primary size-6" />
             <div>
-              <h1 className="text-lg leading-none font-semibold">Git Dashboard</h1>
-              <p className="text-muted-foreground text-xs">
+              <h1 className="text-base leading-none font-semibold">Git Dashboard</h1>
+              <p className="text-muted-foreground text-[11px]">
                 devframe + Next.js · type-safe RPC into the host repository
               </p>
             </div>
@@ -75,8 +75,8 @@ export function Dashboard() {
             </TabsTrigger>
           </TabsList>
 
-          <Card className="mt-2">
-            <CardContent>
+          <Card className="mt-1">
+            <CardContent className="px-4">
               <TabsContent value="status"><StatusPanel /></TabsContent>
               <TabsContent value="commits"><LogPanel /></TabsContent>
               <TabsContent value="branches"><BranchesPanel /></TabsContent>
diff --git a/plugins/git/src/client/components/diff-panel.tsx b/plugins/git/src/client/components/diff-panel.tsx
@@ -93,8 +93,8 @@ export function DiffPanel() {
               </span>
             </span>
           )}
-          <Button variant="ghost" size="icon" onClick={refresh} disabled={loading} aria-label="Refresh diff">
-            <RefreshCw className={loading ? 'animate-spin' : ''} />
+          <Button variant="ghost" size="icon" className="size-7" onClick={refresh} disabled={loading} aria-label="Refresh diff">
+            <RefreshCw className={`size-3.5 ${loading ? 'animate-spin' : ''}`} />
           </Button>
         </div>
       </div>
diff --git a/plugins/git/src/client/components/log-panel.tsx b/plugins/git/src/client/components/log-panel.tsx
@@ -4,18 +4,18 @@ import type { DevframeRpcClient } from 'devframe/client'
 import type { Commit } from '../../index'
 import type { GraphRow } from '../lib/commit-graph'
 import { RefreshCw } from 'lucide-react'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { computeGraph } from '../lib/commit-graph'
+import { useRpc } from './rpc-provider'
 import { Badge } from './ui/badge'
 import { Button } from './ui/button'
 import { ScrollArea } from './ui/scroll-area'
 import { Skeleton } from './ui/skeleton'
-import { useRpcResource } from './use-rpc-resource'
 
 const PAGE = 30
-const ROW_H = 54
-const COL_W = 14
-const NODE_R = 4.5
+const ROW_H = 42
+const COL_W = 12
+const NODE_R = 4
 
 function relativeTime(epoch: number): string {
   const diff = Date.now() - epoch
@@ -98,59 +98,132 @@ function CommitRow({ commit, row, gutter }: { commit: Commit, row: GraphRow, gut
 }
 
 export function LogPanel() {
-  const [limit, setLimit] = useState(PAGE)
-  const loader = useCallback(
-    (rpc: DevframeRpcClient) => rpc.call('git:log', { limit }),
-    [limit],
-  )
-  const { data, loading, refresh } = useRpcResource(loader)
+  const { rpc } = useRpc()
+  const [isRepo, setIsRepo] = useState<boolean | null>(null)
+  const [commits, setCommits] = useState<Commit[]>([])
+  const [skip, setSkip] = useState(0)
+  const [hasMore, setHasMore] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+  const commitsRef = useRef<Commit[]>([])
+
+  useEffect(() => {
+    commitsRef.current = commits
+  }, [commits])
+
+  const loadPage = useCallback(async (
+    client: DevframeRpcClient,
+    nextSkip: number,
+    mode: 'replace' | 'append',
+  ) => {
+    setLoading(true)
+    setError(null)
+    try {
+      const page = await client.call('git:log', { limit: PAGE, skip: nextSkip })
+      setIsRepo(page.isRepo)
+      if (mode === 'replace') {
+        setCommits(page.commits)
+        setSkip(page.commits.length)
+      }
+      else {
+        const seen = new Set(commitsRef.current.map(c => c.hash))
+        const unique = page.commits.filter((c) => {
+          if (seen.has(c.hash))
+            return false
+          seen.add(c.hash)
+          return true
+        })
+        if (unique.length === 0) {
+          // Static fallback snapshots can return the same page for any args.
+          setHasMore(false)
+          return
+        }
+        setCommits(prev => [...prev, ...unique])
+        setSkip(prev => prev + unique.length)
+      }
+      setHasMore(page.hasMore)
+    }
+    catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+    }
+    finally {
+      setLoading(false)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!rpc)
+      return
+    void loadPage(rpc, 0, 'replace')
+  }, [rpc, loadPage])
+
+  const refresh = useCallback(async () => {
+    if (!rpc)
+      return
+    await loadPage(rpc, 0, 'replace')
+  }, [rpc, loadPage])
+
+  const loadMore = useCallback(async () => {
+    if (!rpc)
+      return
+    await loadPage(rpc, skip, 'append')
+  }, [rpc, skip, loadPage])
 
   const graph = useMemo(
-    () => computeGraph(data?.commits ?? []),
-    [data?.commits],
+    () => computeGraph(commits),
+    [commits],
   )
   const gutter = Math.max(graph.columns, 1) * COL_W + COL_W / 2
+  const liveBackend = rpc?.connectionMeta.backend === 'websocket'
 
   return (
     <div className="space-y-3">
       <div className="flex items-center justify-between">
         <span className="text-muted-foreground text-xs">
-          {data?.isRepo ? `${data.commits.length} commits` : ' '}
+          {isRepo ? `${commits.length} commits` : ' '}
         </span>
-        <Button variant="ghost" size="icon" onClick={refresh} disabled={loading} aria-label="Refresh log">
-          <RefreshCw className={loading ? 'animate-spin' : ''} />
+        <Button variant="ghost" size="icon" className="size-7" onClick={refresh} disabled={loading} aria-label="Refresh log">
+          <RefreshCw className={`size-3.5 ${loading ? 'animate-spin' : ''}`} />
         </Button>
       </div>
 
-      {!data && (
+      {!rpc && (
         <div className="space-y-2">
           {Array.from({ length: 5 }).map((_, i) => <Skeleton key={i} className="h-10 w-full" />)}
         </div>
       )}
 
-      {data && !data.isRepo && (
+      {error && (
+        <p className="text-destructive text-sm">{error}</p>
+      )}
+
+      {isRepo === false && (
         <p className="text-muted-foreground text-sm">The working directory is not a git repository.</p>
       )}
 
-      {data?.isRepo && data.commits.length === 0 && (
+      {isRepo === true && commits.length === 0 && (
         <p className="text-muted-foreground text-sm">No commits yet.</p>
       )}
 
-      {data?.isRepo && data.commits.length > 0 && (
-        <ScrollArea className="h-96 pr-3">
+      {isRepo === true && commits.length > 0 && (
+        <ScrollArea className="h-80 pr-3">
           <ul>
-            {data.commits.map((commit, i) => (
+            {commits.map((commit, i) => (
               <CommitRow key={commit.hash} commit={commit} row={graph.rows[i]} gutter={gutter} />
             ))}
           </ul>
         </ScrollArea>
       )}
 
-      {data?.hasMore && (
-        <Button variant="outline" size="sm" className="w-full" onClick={() => setLimit(l => l + PAGE)} disabled={loading}>
+      {isRepo === true && hasMore && (
+        <Button variant="outline" size="sm" className="w-full" onClick={loadMore} disabled={loading || !liveBackend}>
           Load more
         </Button>
       )}
+
+      {isRepo === true && hasMore && !liveBackend && (
+        <p className="text-muted-foreground text-xs">Load more is available in live mode.</p>
+      )}
     </div>
   )
 }
diff --git a/plugins/git/src/client/components/status-panel.tsx b/plugins/git/src/client/components/status-panel.tsx
@@ -155,7 +155,7 @@ export function StatusPanel() {
   )
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-3">
       <div className="flex items-center justify-between gap-2">
         <div className="flex flex-wrap items-center gap-2">
           {data?.isRepo
@@ -194,8 +194,8 @@ export function StatusPanel() {
               )
             : <Skeleton className="h-5 w-40" />}
         </div>
-        <Button variant="ghost" size="icon" onClick={refresh} disabled={loading || busy} aria-label="Refresh status">
-          <RefreshCw className={loading ? 'animate-spin' : ''} />
+        <Button variant="ghost" size="icon" className="size-7" onClick={refresh} disabled={loading || busy} aria-label="Refresh status">
+          <RefreshCw className={`size-3.5 ${loading ? 'animate-spin' : ''}`} />
         </Button>
       </div>
 
