feat(git): /git overview page and diff viewer

Add git module with repo status overview (/git) and per-repo detail page
(/git/[repo]) featuring a color-coded diff viewer (+ green, - red).
Reads repo paths from REPO_PATHS env var, calls ops-agent git_status and
git_diff commands. Status badges: clean (green), dirty (orange),
behind-origin (blue).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/git/_components/git-repos-list.tsx

@@ -0,0 +1,183 @@
+'use client'
+
+import { useCallback, useEffect, useState } from 'react'
+import Link from 'next/link'
+import { type RepoStatus, parseGitStatus } from '@/lib/parse-git'
+
+interface RepoEntry {
+  path: string
+  name: string
+  status: RepoStatus | null
+  error: string | null
+}
+
+async function fetchRepoStatus(repoPath: string): Promise<RepoStatus> {
+  const res = await fetch('/api/agent/exec', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ command_key: 'git_status', args: [repoPath] }),
+  })
+
+  if (!res.ok) {
+    const text = await res.text()
+    throw new Error(`agent ${res.status}: ${text}`)
+  }
+
+  const reader = res.body?.getReader()
+  if (!reader) throw new Error('no response body')
+
+  const decoder = new TextDecoder()
+  let buffer = ''
+  let output = ''
+
+  while (true) {
+    const { done, value } = await reader.read()
+    if (done) break
+
+    buffer += decoder.decode(value, { stream: true })
+    const lines = buffer.split('\n')
+    buffer = lines.pop() ?? ''
+
+    for (const line of lines) {
+      if (line.startsWith('data:')) {
+        try {
+          const parsed = JSON.parse(line.slice(5).trim()) as { data?: string }
+          if (parsed.data !== undefined) output += parsed.data
+        } catch {
+          // ignore malformed
+        }
+      }
+    }
+  }
+
+  return parseGitStatus(output)
+}
+
+function statusBadge(status: RepoStatus) {
+  if (status.dirty) {
+    return (
+      <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400">
+        <span className="size-1.5 rounded-full bg-orange-500 dark:bg-orange-400" />
+        dirty
+      </span>
+    )
+  }
+  if (status.behind && status.behind > 0) {
+    return (
+      <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900/30 dark:text-blue-400">
+        <span className="size-1.5 rounded-full bg-blue-500 dark:bg-blue-400" />
+        {status.behind} behind
+      </span>
+    )
+  }
+  return (
+    <span className="inline-flex items-center gap-1.5 rounded-full px-2 py-0.5 text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400">
+      <span className="size-1.5 rounded-full bg-green-500 dark:bg-green-400" />
+      clean
+    </span>
+  )
+}
+
+type Props = {
+  initialRepos: RepoEntry[]
+}
+
+export default function GitReposList({ initialRepos }: Props) {
+  const [repos, setRepos] = useState<RepoEntry[]>(initialRepos)
+  const [refreshing, setRefreshing] = useState(false)
+  const [lastUpdated, setLastUpdated] = useState<Date>(new Date())
+
+  const refresh = useCallback(async () => {
+    setRefreshing(true)
+    try {
+      const updated = await Promise.all(
+        initialRepos.map(async (r) => {
+          try {
+            const status = await fetchRepoStatus(r.path)
+            return { ...r, status, error: null }
+          } catch (err) {
+            return { ...r, status: null, error: err instanceof Error ? err.message : 'failed' }
+          }
+        }),
+      )
+      setRepos(updated)
+      setLastUpdated(new Date())
+    } finally {
+      setRefreshing(false)
+    }
+  }, [initialRepos])
+
+  useEffect(() => {
+    const id = setInterval(refresh, 30000)
+    return () => clearInterval(id)
+  }, [refresh])
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-muted-foreground">
+            {repos.length} repo{repos.length !== 1 ? 's' : ''}
+          </span>
+          {refreshing && (
+            <span className="text-xs text-muted-foreground animate-pulse">refreshing…</span>
+          )}
+        </div>
+        <span className="text-xs text-muted-foreground">
+          updated {lastUpdated.toLocaleTimeString()}
+        </span>
+      </div>
+
+      <div className="overflow-x-auto rounded-lg border border-border">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-border bg-muted/50">
+              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Repo</th>
+              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Branch</th>
+              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Status</th>
+              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Ahead</th>
+              <th className="px-4 py-3 text-left font-medium text-muted-foreground">Path</th>
+            </tr>
+          </thead>
+          <tbody>
+            {repos.map((r) => (
+              <tr
+                key={r.path}
+                className="border-b border-border last:border-0 hover:bg-muted/30 transition-colors"
+              >
+                <td className="px-4 py-3 font-medium">
+                  <Link
+                    href={`/git/${encodeURIComponent(r.name)}`}
+                    className="hover:underline text-foreground"
+                  >
+                    {r.name}
+                  </Link>
+                </td>
+                <td className="px-4 py-3 font-mono text-xs text-muted-foreground">
+                  {r.status?.branch ?? '—'}
+                </td>
+                <td className="px-4 py-3">
+                  {r.error ? (
+                    <span className="text-xs text-destructive">{r.error}</span>
+                  ) : r.status ? (
+                    statusBadge(r.status)
+                  ) : (
+                    <span className="text-xs text-muted-foreground">—</span>
+                  )}
+                </td>
+                <td className="px-4 py-3 text-xs text-muted-foreground">
+                  {r.status?.ahead !== undefined && r.status.ahead > 0 ? (
+                    <span className="text-amber-600 dark:text-amber-400">↑{r.status.ahead}</span>
+                  ) : (
+                    '—'
+                  )}
+                </td>
+                <td className="px-4 py-3 font-mono text-xs text-muted-foreground">{r.path}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}