feat(plugin-git): light/dark theme, commit graph, and write actions

- Light/dark mode following the system preference with a manual toggle
  and a no-flash inline script; theme tokens already shipped in globals.css.
- SourceTree-style commit graph in the log: git:log now returns parent
  hashes (--topo-order) and the client computes lanes and draws colored
  SVG edges/nodes alongside fixed-height commit rows.
- Stage / unstage / commit from the UI via gated git:stage, git:unstage,
  and git:commit actions (createGitDevframe({ write: true }) or --write).
  Status reports canWrite; the UI exposes per-file and bulk controls plus
  a commit box only when write mode is on over a live connection.

Author: antfubot

plugins/git/README.md

@@ -1,10 +1,13 @@
 # @devframes/plugin-git
 
 Git integration for [devframe](https://github.com/devframes/devframe) — a
-read-only repository dashboard (status, log, branches, diff) with a **Next.js
-App Router + shadcn/ui** SPA over type-safe RPC. The host process shells out to
-`git` and exposes the repository; the same bundle runs as a live dev server or
-a fully static deployment.
+repository dashboard with a **Next.js App Router + shadcn/ui** SPA over
+type-safe RPC. The host process shells out to `git` and exposes the repository;
+the same bundle runs as a live dev server or a fully static deployment.
+
+Status, a SourceTree-style **commit graph**, branches, and diffs are read-only;
+staging, unstaging, and committing are available when write mode is enabled. The
+UI follows the system **light/dark** preference with a manual toggle.
 
 ## Install
 
@@ -18,6 +21,7 @@ Run the dashboard against the current repository:
 
 ```sh
 npx devframe-git              # dev server (live RPC over WebSocket)
+npx devframe-git --write      # also enable staging / committing from the UI
 npx devframe-git build        # static deploy → dist-static/
 npx devframe-git --port 4000
 ```
@@ -40,20 +44,31 @@ await createCli(createGitDevframe({ repoRoot: process.cwd() })).parse()
 | `basePath` | adapter-resolved | Mount path (`/` standalone, `/__git/` hosted). |
 | `distDir` | bundled SPA | Override the served SPA directory. |
 | `port` | `9710` | Preferred dev-server port. |
+| `write` | `false` | Enable staging, unstaging, and committing from the UI. |
 
 ## RPC surface
 
-Every function is a `query` with `snapshot: true`: resolved live over WebSocket
-in dev, and served from a snapshot baked at build time for static deploys. Each
-degrades to an empty, `isRepo: false` result outside a git repository.
+The read functions are each a `query` with `snapshot: true`: resolved live over
+WebSocket in dev, and served from a snapshot baked at build time for static
+deploys. Each degrades to an empty, `isRepo: false` result outside a git
+repository.
 
 - `git:status` — branch, upstream tracking (ahead/behind), staged / unstaged /
-  untracked files, parsed from `git status --porcelain=v2`.
-- `git:log` — paginated commit history (`limit` / `skip`).
+  untracked files, parsed from `git status --porcelain=v2`. Reports `canWrite`.
+- `git:log` — paginated commit history (`limit` / `skip`) including parent
+  hashes, which drive the commit graph.
 - `git:branches` — local branches with SHA, upstream, ahead/behind, tip subject.
 - `git:diff` — per-file added/deleted counts for the working tree or index, plus
   a unified patch for a selected file.
 
+Write actions are `action` functions, registered only when write mode is enabled
+(`createGitDevframe({ write: true })` or the `--write` flag) and gated behind
+`status.canWrite` in the UI. Each returns fresh status (commit returns a result):
+
+- `git:stage` — `git add` the given paths.
+- `git:unstage` — `git restore --staged` the given paths.
+- `git:commit` — commit the staged changes with a message.
+
 ## Develop
 
 ```sh

plugins/git/src/client/app/layout.tsx

@@ -7,9 +7,15 @@ export const metadata: Metadata = {
   description: 'A devframe Git integration with a Next.js App Router + shadcn/ui SPA.',
 }
 
+// Set the theme class before paint to avoid a flash of the wrong theme.
+const themeScript = `(function(){try{var k='devframe-git-theme';var t=localStorage.getItem(k);if(t!=='light'&&t!=='dark'){t=window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light';}if(t==='dark')document.documentElement.classList.add('dark');}catch(e){document.documentElement.classList.add('dark');}})();`
+
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
-    <html lang="en" className="dark">
+    <html lang="en" suppressHydrationWarning>
+      <head>
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
       <body>{children}</body>
     </html>
   )

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

@@ -1,12 +1,14 @@
 'use client'
 
-import { FileDiff, GitBranch, GitCommitHorizontal, GitGraph, ListTree } from 'lucide-react'
+import { FileDiff, GitBranch, GitCommitHorizontal, GitGraph, ListTree, Moon, Sun } from 'lucide-react'
 import { BranchesPanel } from './branches-panel'
 import { DiffPanel } from './diff-panel'
 import { LogPanel } from './log-panel'
 import { RpcProvider, useRpc } from './rpc-provider'
 import { StatusPanel } from './status-panel'
+import { useTheme } from './theme'
 import { Badge } from './ui/badge'
+import { Button } from './ui/button'
 import { Card, CardContent } from './ui/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from './ui/tabs'
 
@@ -24,6 +26,15 @@ 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>
+  )
+}
+
 export function Dashboard() {
   return (
     <RpcProvider>
@@ -38,7 +49,10 @@ export function Dashboard() {
               </p>
             </div>
           </div>
-          <ConnectionBadge />
+          <div className="flex items-center gap-2">
+            <ConnectionBadge />
+            <ThemeToggle />
+          </div>
         </header>
 
         <Tabs defaultValue="status">

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

@@ -2,15 +2,20 @@
 
 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, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
+import { computeGraph } from '../lib/commit-graph'
 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
 
 function relativeTime(epoch: number): string {
   const diff = Date.now() - epoch
@@ -28,20 +33,65 @@ function relativeTime(epoch: number): string {
   return new Date(epoch).toLocaleDateString()
 }
 
-function CommitRow({ commit }: { commit: Commit }) {
+function cx(col: number): number {
+  return col * COL_W + COL_W / 2
+}
+
+function linkPath(fromCol: number, fromY: number, toCol: number, toY: number): string {
+  const x1 = cx(fromCol)
+  const x2 = cx(toCol)
+  if (fromCol === toCol)
+    return `M ${x1} ${fromY} L ${x2} ${toY}`
+  const midY = (fromY + toY) / 2
+  return `M ${x1} ${fromY} C ${x1} ${midY} ${x2} ${midY} ${x2} ${toY}`
+}
+
+function GraphCell({ row, width }: { row: GraphRow, width: number }) {
+  const mid = ROW_H / 2
   return (
-    <li className="border-border/60 flex flex-col gap-1 border-b py-2 last:border-0">
-      <div className="flex items-baseline gap-2">
-        <code className="text-muted-foreground shrink-0 text-xs">{commit.shortHash}</code>
-        <span className="truncate text-sm font-medium">{commit.subject}</span>
-      </div>
-      <div className="text-muted-foreground flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
-        <span>{commit.author}</span>
-        <span aria-hidden>·</span>
-        <span title={new Date(commit.date).toLocaleString()}>{relativeTime(commit.date)}</span>
-        {commit.refs.map(ref => (
-          <Badge key={ref} variant="outline" className="px-1.5 py-0 font-mono text-[10px]">{ref}</Badge>
-        ))}
+    <svg width={width} height={ROW_H} className="block shrink-0" style={{ overflow: 'visible' }} aria-hidden>
+      {row.topLinks.map((link, i) => (
+        <path
+          key={`t${i}`}
+          d={linkPath(link.from, 0, link.to, mid)}
+          fill="none"
+          stroke={link.color}
+          strokeWidth={1.6}
+          strokeLinecap="round"
+        />
+      ))}
+      {row.bottomLinks.map((link, i) => (
+        <path
+          key={`b${i}`}
+          d={linkPath(link.from, mid, link.to, ROW_H)}
+          fill="none"
+          stroke={link.color}
+          strokeWidth={1.6}
+          strokeLinecap="round"
+        />
+      ))}
+      <circle cx={cx(row.col)} cy={mid} r={NODE_R} fill={row.color} stroke="var(--color-card)" strokeWidth={2} />
+    </svg>
+  )
+}
+
+function CommitRow({ commit, row, gutter }: { commit: Commit, row: GraphRow, gutter: number }) {
+  return (
+    <li className="flex items-stretch" style={{ height: ROW_H }}>
+      <GraphCell row={row} width={gutter} />
+      <div className="flex min-w-0 flex-1 flex-col justify-center gap-0.5 pl-2">
+        <div className="flex items-center gap-2">
+          <span className="truncate text-sm font-medium">{commit.subject}</span>
+          {commit.refs.map(ref => (
+            <Badge key={ref} variant="outline" className="shrink-0 px-1.5 py-0 font-mono text-[10px]">{ref}</Badge>
+          ))}
+        </div>
+        <div className="text-muted-foreground flex items-center gap-2 text-xs">
+          <code className="shrink-0">{commit.shortHash}</code>
+          <span className="truncate">{commit.author}</span>
+          <span aria-hidden>·</span>
+          <span className="shrink-0" title={new Date(commit.date).toLocaleString()}>{relativeTime(commit.date)}</span>
+        </div>
       </div>
     </li>
   )
@@ -55,6 +105,12 @@ export function LogPanel() {
   )
   const { data, loading, refresh } = useRpcResource(loader)
 
+  const graph = useMemo(
+    () => computeGraph(data?.commits ?? []),
+    [data?.commits],
+  )
+  const gutter = Math.max(graph.columns, 1) * COL_W + COL_W / 2
+
   return (
     <div className="space-y-3">
       <div className="flex items-center justify-between">
@@ -81,9 +137,11 @@ export function LogPanel() {
       )}
 
       {data?.isRepo && data.commits.length > 0 && (
-        <ScrollArea className="h-80 pr-3">
+        <ScrollArea className="h-96 pr-3">
           <ul>
-            {data.commits.map(commit => <CommitRow key={commit.hash} commit={commit} />)}
+            {data.commits.map((commit, i) => (
+              <CommitRow key={commit.hash} commit={commit} row={graph.rows[i]} gutter={gutter} />
+            ))}
           </ul>
         </ScrollArea>
       )}