@geminilight/mindos 0.1.0

package/app/components/renderers/ConfigRenderer.tsx

@@ -0,0 +1,236 @@
+'use client';
+
+import { useMemo, useState, useEffect, useCallback } from 'react';
+import { Check, Loader2, Plus, X } from 'lucide-react';
+import type { RendererContext } from '@/lib/renderers/registry';
+
+type JsonValue = null | boolean | number | string | JsonValue[] | { [k: string]: JsonValue };
+
+type UiSection = {
+  id: string;
+  title: string;
+  description?: string;
+  fields: string[];
+};
+
+type KeySpec = {
+  type?: string;
+  control?: string;
+  label?: string;
+  description?: string;
+  constraints?: { min?: number; max?: number };
+};
+
+type ConfigSchema = {
+  uiSchema?: { sections?: UiSection[] };
+  keySpecs?: Record<string, KeySpec>;
+};
+
+function getByPath(obj: unknown, path: string): JsonValue {
+  const parts = path.split('.');
+  let cur: unknown = obj;
+  for (const p of parts) {
+    if (!cur || typeof cur !== 'object' || !(p in (cur as Record<string, unknown>))) return null;
+    cur = (cur as Record<string, unknown>)[p];
+  }
+  return cur as JsonValue;
+}
+
+function setByPath(obj: Record<string, unknown>, path: string, value: JsonValue): Record<string, unknown> {
+  const parts = path.split('.');
+  const next = structuredClone(obj) as Record<string, unknown>;
+  let cur: Record<string, unknown> = next;
+  for (let i = 0; i < parts.length - 1; i++) {
+    const k = parts[i];
+    const v = cur[k];
+    if (!v || typeof v !== 'object' || Array.isArray(v)) cur[k] = {};
+    cur = cur[k] as Record<string, unknown>;
+  }
+  cur[parts[parts.length - 1]] = value;
+  return next;
+}
+
+export function ConfigRenderer({ content, saveAction }: RendererContext) {
+  const parsed = useMemo(() => {
+    try {
+      return JSON.parse(content) as Record<string, unknown>;
+    } catch {
+      return null;
+    }
+  }, [content]);
+
+  const [data, setData] = useState<Record<string, unknown> | null>(parsed);
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const [error, setError] = useState('');
+  const [tagInput, setTagInput] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    setData(parsed);
+    setError('');
+  }, [parsed]);
+
+  const schema = (data ?? {}) as ConfigSchema;
+  const sections = schema.uiSchema?.sections ?? [];
+  const keySpecs = schema.keySpecs ?? {};
+
+  const persist = useCallback(async (next: Record<string, unknown>) => {
+    setSaving(true);
+    setSaved(false);
+    setError('');
+    try {
+      await saveAction(`${JSON.stringify(next, null, 2)}\n`);
+      setSaved(true);
+      setTimeout(() => setSaved(false), 1200);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'Failed to save');
+    } finally {
+      setSaving(false);
+    }
+  }, [saveAction]);
+
+  const updateValue = useCallback(async (path: string, value: JsonValue) => {
+    if (!data) return;
+    const next = setByPath(data, path, value);
+    setData(next);
+    await persist(next);
+  }, [data, persist]);
+
+  if (!parsed || !data) {
+    return (
+      <div className="rounded-xl border border-border p-4 text-sm text-red-400">
+        CONFIG.json parse failed. Please check JSON format.
+      </div>
+    );
+  }
+
+  return (
+    <div className="max-w-3xl mx-auto flex flex-col gap-3">
+      <div className="flex items-center justify-between rounded-xl border border-border bg-card px-4 py-2.5">
+        <div className="text-xs text-muted-foreground">CONFIG Control Panel</div>
+        <div className="text-xs flex items-center gap-2">
+          {saving && <span className="inline-flex items-center gap-1 text-muted-foreground"><Loader2 size={12} className="animate-spin" />Saving</span>}
+          {!saving && saved && <span className="inline-flex items-center gap-1" style={{ color: '#7aad80' }}><Check size={12} />Saved</span>}
+        </div>
+      </div>
+
+      {error && <div className="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-xs text-red-300">{error}</div>}
+
+      {sections.map((section) => (
+        <div key={section.id} className="rounded-xl border border-border bg-card p-4">
+          <div className="mb-3">
+            <h3 className="text-sm font-semibold text-foreground">{section.title}</h3>
+            {section.description && <p className="text-xs text-muted-foreground mt-1">{section.description}</p>}
+          </div>
+
+          <div className="space-y-3">
+            {section.fields.map((fieldPath) => {
+              const spec = keySpecs[fieldPath] ?? {};
+              const value = getByPath(data, fieldPath);
+              const label = spec.label || fieldPath;
+
+              return (
+                <div key={fieldPath} className="rounded-lg border border-border/80 bg-background px-3 py-2.5">
+                  <div className="flex items-center justify-between gap-3 mb-1.5">
+                    <div>
+                      <div className="text-sm text-foreground">{label}</div>
+                      {spec.description && <div className="text-xs text-muted-foreground mt-0.5">{spec.description}</div>}
+                    </div>
+
+                    {spec.control === 'switch' && typeof value === 'boolean' && (
+                      <button
+                        type="button"
+                        onClick={() => updateValue(fieldPath, !value)}
+                        className="px-2.5 py-1 rounded-md text-xs font-medium"
+                        style={{
+                          background: value ? 'var(--amber)' : 'var(--muted)',
+                          color: value ? '#131210' : 'var(--muted-foreground)',
+                        }}
+                      >
+                        {value ? 'ON' : 'OFF'}
+                      </button>
+                    )}
+                  </div>
+
+                  {spec.control === 'text' && typeof value === 'string' && (
+                    <input
+                      defaultValue={value}
+                      onBlur={(e) => updateValue(fieldPath, e.target.value)}
+                      className="w-full px-2 py-1.5 text-sm bg-card border border-border rounded text-foreground"
+                    />
+                  )}
+
+                  {spec.control === 'number' && typeof value === 'number' && (
+                    <input
+                      type="number"
+                      defaultValue={value}
+                      min={spec.constraints?.min}
+                      max={spec.constraints?.max}
+                      onBlur={(e) => {
+                        const raw = Number(e.target.value);
+                        const min = spec.constraints?.min;
+                        const max = spec.constraints?.max;
+                        let next = Number.isFinite(raw) ? raw : value;
+                        if (typeof min === 'number' && next < min) next = min;
+                        if (typeof max === 'number' && next > max) next = max;
+                        updateValue(fieldPath, next);
+                      }}
+                      className="w-full px-2 py-1.5 text-sm bg-card border border-border rounded text-foreground"
+                    />
+                  )}
+
+                  {spec.control === 'tag-list' && Array.isArray(value) && (
+                    <div className="flex flex-col gap-2">
+                      <div className="flex flex-wrap gap-1.5">
+                        {value.map((tag, idx) => (
+                          <span key={`${String(tag)}-${idx}`} className="inline-flex items-center gap-1 px-2 py-0.5 rounded border border-border text-xs bg-muted text-foreground">
+                            {String(tag)}
+                            <button
+                              type="button"
+                              onClick={() => updateValue(fieldPath, value.filter((_, i) => i !== idx))}
+                              className="text-muted-foreground hover:text-foreground"
+                            >
+                              <X size={11} />
+                            </button>
+                          </span>
+                        ))}
+                      </div>
+                      <div className="flex items-center gap-2">
+                        <input
+                          value={tagInput[fieldPath] ?? ''}
+                          onChange={(e) => setTagInput((prev) => ({ ...prev, [fieldPath]: e.target.value }))}
+                          onKeyDown={(e) => {
+                            if (e.key !== 'Enter') return;
+                            e.preventDefault();
+                            const nextTag = (tagInput[fieldPath] ?? '').trim();
+                            if (!nextTag) return;
+                            updateValue(fieldPath, [...value, nextTag]);
+                            setTagInput((prev) => ({ ...prev, [fieldPath]: '' }));
+                          }}
+                          className="flex-1 px-2 py-1.5 text-sm bg-card border border-border rounded text-foreground"
+                          placeholder="Add item"
+                        />
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const nextTag = (tagInput[fieldPath] ?? '').trim();
+                            if (!nextTag) return;
+                            updateValue(fieldPath, [...value, nextTag]);
+                            setTagInput((prev) => ({ ...prev, [fieldPath]: '' }));
+                          }}
+                          className="px-2.5 py-1.5 rounded-md text-xs bg-muted text-foreground inline-flex items-center gap-1"
+                        >
+                          <Plus size={12} /> Add
+                        </button>
+                      </div>
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/app/components/renderers/CsvRenderer.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import { LayoutGrid, Columns, Table2, Settings2 } from 'lucide-react';
+import type { RendererContext } from '@/lib/renderers/registry';
+import type { ViewType, CsvConfig } from './csv/types';
+import { defaultConfig, loadConfig, saveConfig, parseCSV } from './csv/types';
+import { TableView } from './csv/TableView';
+import { GalleryView } from './csv/GalleryView';
+import { BoardView } from './csv/BoardView';
+import { ConfigPanel } from './csv/ConfigPanel';
+
+const VIEW_TABS: { id: ViewType; icon: React.ReactNode; label: string }[] = [
+  { id: 'table',   icon: <Table2 size={13} />,    label: 'Table' },
+  { id: 'gallery', icon: <LayoutGrid size={13} />, label: 'Gallery' },
+  { id: 'board',   icon: <Columns size={13} />,    label: 'Board' },
+];
+
+export function CsvRenderer({ filePath, content, saveAction }: RendererContext) {
+  const { headers, rows } = useMemo(() => parseCSV(content), [content]);
+  const [cfg, setCfg] = useState<CsvConfig>(() => defaultConfig(headers));
+  const [configLoaded, setConfigLoaded] = useState(false);
+  const [showConfig, setShowConfig] = useState(false);
+
+  useEffect(() => {
+    setCfg(loadConfig(filePath, headers));
+    setConfigLoaded(true);
+  }, [filePath]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const updateConfig = useCallback((next: CsvConfig) => {
+    setCfg(next);
+    saveConfig(filePath, next);
+  }, [filePath]);
+
+  if (!configLoaded) return null;
+  const view = cfg.activeView;
+
+  return (
+    <div className="max-w-[1100px] mx-auto px-0 py-2">
+      {/* Toolbar */}
+      <div className="flex items-center gap-2 mb-4 relative">
+        <div className="flex items-center gap-0.5 p-1 rounded-lg" style={{ background: 'var(--muted)' }}>
+          {VIEW_TABS.map(tab => (
+            <button key={tab.id} onClick={() => updateConfig({ ...cfg, activeView: tab.id })}
+              className="flex items-center gap-1.5 px-3 py-1.5 rounded text-xs font-medium transition-colors"
+              style={{
+                fontFamily: "'IBM Plex Mono',monospace",
+                background: view === tab.id ? 'var(--card)' : 'transparent',
+                color: view === tab.id ? 'var(--foreground)' : 'var(--muted-foreground)',
+                boxShadow: view === tab.id ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
+              }}
+            >{tab.icon}{tab.label}</button>
+          ))}
+        </div>
+        <div className="flex-1" />
+        <span className="text-xs" style={{ color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono',monospace", opacity: 0.5 }}>
+          {rows.length} rows
+        </span>
+        <div className="relative">
+          <button onClick={() => setShowConfig(v => !v)}
+            className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs transition-colors"
+            style={{ background: showConfig ? 'var(--accent)' : 'var(--muted)', color: showConfig ? 'var(--foreground)' : 'var(--muted-foreground)' }}
+            title="View settings"
+          ><Settings2 size={13} /></button>
+          {showConfig && (
+            <ConfigPanel headers={headers} cfg={cfg} view={view}
+              onClose={() => setShowConfig(false)} onChange={updateConfig} />
+          )}
+        </div>
+      </div>
+
+      {view === 'table' && <TableView headers={headers} rows={rows} cfg={cfg.table} saveAction={saveAction} />}
+      {view === 'gallery' && <GalleryView headers={headers} rows={rows} cfg={cfg.gallery} />}
+      {view === 'board' && <BoardView headers={headers} rows={rows} cfg={cfg.board} saveAction={saveAction} />}
+    </div>
+  );
+}

package/app/components/renderers/DiffRenderer.tsx

@@ -0,0 +1,310 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { GitCompare, CheckCircle2, XCircle, FileEdit, ChevronDown } from 'lucide-react';
+import { apiFetch } from '@/lib/api';
+import type { RendererContext } from '@/lib/renderers/registry';
+
+// ─── Diff entry format ────────────────────────────────────────────────────────
+// Agent writes diff entries as fenced blocks:
+//
+// ```agent-diff
+// { "ts": "2025-01-15T10:30:00Z", "path": "Profile/Identity.md",
+//   "tool": "mindos_write_file",
+//   "before": "...full old content...",
+//   "after": "...full new content..." }
+// ```
+
+interface DiffEntry {
+  ts: string;
+  path: string;
+  tool: string;
+  before: string;
+  after: string;
+}
+
+// ─── Parser ───────────────────────────────────────────────────────────────────
+
+function parseDiffs(content: string): DiffEntry[] {
+  const entries: DiffEntry[] = [];
+  const re = /```agent-diff\n([\s\S]*?)```/g;
+  let m: RegExpExecArray | null;
+  while ((m = re.exec(content)) !== null) {
+    try {
+      const entry = JSON.parse(m[1].trim()) as DiffEntry;
+      if (entry.path && entry.ts) entries.push(entry);
+    } catch { /* skip */ }
+  }
+  return entries.sort((a, b) => new Date(b.ts).getTime() - new Date(a.ts).getTime());
+}
+
+// ─── Diff algorithm (line-level Myers-light) ──────────────────────────────────
+
+type LineChange = { type: 'equal' | 'insert' | 'delete'; text: string };
+
+function diffLines(oldText: string, newText: string): LineChange[] {
+  const oldLines = oldText.split('\n');
+  const newLines = newText.split('\n');
+
+  // LCS-based diff (simple patience-like for short files)
+  const result: LineChange[] = [];
+
+  // Build LCS table
+  const m = oldLines.length, n = newLines.length;
+  // For large files, limit context
+  if (m > 500 || n > 500) {
+    // Truncate and just show a summary
+    const added = newLines.filter(l => !oldLines.includes(l)).length;
+    const removed = oldLines.filter(l => !newLines.includes(l)).length;
+    result.push({ type: 'delete', text: `[... ${removed} lines removed, ${added} lines added — file too large for line diff ...]` });
+    return result;
+  }
+
+  const dp: number[][] = Array.from({ length: m + 1 }, () => new Array(n + 1).fill(0));
+  for (let i = m - 1; i >= 0; i--) {
+    for (let j = n - 1; j >= 0; j--) {
+      if (oldLines[i] === newLines[j]) {
+        dp[i][j] = 1 + dp[i + 1][j + 1];
+      } else {
+        dp[i][j] = Math.max(dp[i + 1][j], dp[i][j + 1]);
+      }
+    }
+  }
+
+  let i = 0, j = 0;
+  while (i < m || j < n) {
+    if (i < m && j < n && oldLines[i] === newLines[j]) {
+      result.push({ type: 'equal', text: oldLines[i] });
+      i++; j++;
+    } else if (j < n && (i >= m || dp[i][j + 1] >= dp[i + 1][j])) {
+      result.push({ type: 'insert', text: newLines[j] });
+      j++;
+    } else {
+      result.push({ type: 'delete', text: oldLines[i] });
+      i++;
+    }
+  }
+
+  return result;
+}
+
+// Collapse long equal runs — show 3 context lines around changes
+function collapseContext(changes: LineChange[], ctx = 3): Array<LineChange | { type: 'collapse'; count: number }> {
+  type AnyLine = LineChange | { type: 'collapse'; count: number };
+  const result: AnyLine[] = [];
+  const changed = new Set<number>();
+
+  changes.forEach((c, i) => { if (c.type !== 'equal') { for (let k = Math.max(0, i - ctx); k <= Math.min(changes.length - 1, i + ctx); k++) changed.add(k); } });
+
+  let skipStart = -1;
+  for (let i = 0; i < changes.length; i++) {
+    if (changed.has(i)) {
+      if (skipStart !== -1) {
+        result.push({ type: 'collapse', count: i - skipStart });
+        skipStart = -1;
+      }
+      result.push(changes[i]);
+    } else {
+      if (skipStart === -1) skipStart = i;
+    }
+  }
+  if (skipStart !== -1) result.push({ type: 'collapse', count: changes.length - skipStart });
+
+  return result;
+}
+
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+
+function relativeTs(ts: string): string {
+  const diff = Date.now() - new Date(ts).getTime();
+  const m = Math.floor(diff / 60000);
+  const h = Math.floor(diff / 3600000);
+  const d = Math.floor(diff / 86400000);
+  if (m < 1) return 'just now';
+  if (m < 60) return `${m}m ago`;
+  if (h < 24) return `${h}h ago`;
+  return `${d}d ago`;
+}
+
+function stats(changes: LineChange[]): { added: number; removed: number } {
+  return {
+    added: changes.filter(c => c.type === 'insert').length,
+    removed: changes.filter(c => c.type === 'delete').length,
+  };
+}
+
+// ─── Diff card ────────────────────────────────────────────────────────────────
+
+function DiffCard({ entry, saveAction, fullContent }: {
+  entry: DiffEntry;
+  saveAction: (c: string) => Promise<void>;
+  fullContent: string;
+}) {
+  const router = useRouter();
+  const [expanded, setExpanded] = useState(false);
+  const [approved, setApproved] = useState<boolean | null>(null);
+
+  const changes = useMemo(() => diffLines(entry.before, entry.after), [entry]);
+  const collapsed = useMemo(() => collapseContext(changes), [changes]);
+  const { added, removed } = stats(changes);
+
+  const toolShort = entry.tool.replace('mindos_', '');
+
+  async function handleApprove() {
+    setApproved(true);
+    // Mark this diff as approved by updating the block in the source file
+    const updated = fullContent.replace(
+      `"ts": "${entry.ts}", "path": "${entry.path}"`,
+      `"ts": "${entry.ts}", "path": "${entry.path}", "approved": true`,
+    );
+    await saveAction(updated);
+  }
+
+  async function handleReject() {
+    setApproved(false);
+    // Revert: write the "before" content back to the target file
+    await apiFetch('/api/file', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ op: 'save_file', path: entry.path, content: entry.before }),
+    });
+    const updated = fullContent.replace(
+      `"ts": "${entry.ts}", "path": "${entry.path}"`,
+      `"ts": "${entry.ts}", "path": "${entry.path}", "approved": false, "reverted": true`,
+    );
+    await saveAction(updated);
+  }
+
+  return (
+    <div style={{ border: '1px solid var(--border)', borderRadius: 10, overflow: 'hidden', background: 'var(--card)', marginBottom: 10 }}>
+      {/* header */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 9, padding: '10px 14px', borderBottom: expanded ? '1px solid var(--border)' : 'none' }}>
+        <FileEdit size={13} style={{ color: 'var(--amber)', flexShrink: 0 }} />
+        <span
+          style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.78rem', color: 'var(--amber)', flex: 1, minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', cursor: 'pointer' }}
+          onClick={() => router.push('/view/' + entry.path.split('/').map(encodeURIComponent).join('/'))}
+          title={entry.path}
+        >
+          {entry.path}
+        </span>
+
+        {/* diff stats */}
+        <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.7rem', color: '#7aad80', flexShrink: 0 }}>+{added}</span>
+        <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.7rem', color: '#c85050', flexShrink: 0 }}>−{removed}</span>
+
+        {/* tool badge */}
+        <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.65rem', padding: '1px 7px', borderRadius: 999, background: 'var(--muted)', color: 'var(--muted-foreground)', flexShrink: 0 }}>
+          {toolShort}
+        </span>
+
+        {/* timestamp */}
+        <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.65rem', color: 'var(--muted-foreground)', opacity: 0.6, flexShrink: 0 }}>
+          {relativeTs(entry.ts)}
+        </span>
+
+        {/* approve/reject — only if not yet decided */}
+        {approved === null ? (
+          <>
+            <button
+              onClick={handleApprove}
+              title="Approve this change"
+              style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: '#7aad80', display: 'flex', alignItems: 'center' }}
+            >
+              <CheckCircle2 size={15} />
+            </button>
+            <button
+              onClick={handleReject}
+              title="Reject & revert this change"
+              style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: '#c85050', display: 'flex', alignItems: 'center' }}
+            >
+              <XCircle size={15} />
+            </button>
+          </>
+        ) : (
+          <span style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.68rem', color: approved ? '#7aad80' : '#c85050' }}>
+            {approved ? '✓ approved' : '✕ reverted'}
+          </span>
+        )}
+
+        <button
+          onClick={() => setExpanded(v => !v)}
+          style={{ background: 'none', border: 'none', cursor: 'pointer', padding: 2, color: 'var(--muted-foreground)', display: 'flex', alignItems: 'center' }}
+        >
+          <ChevronDown size={13} style={{ transform: expanded ? 'rotate(180deg)' : 'none', transition: 'transform .15s' }} />
+        </button>
+      </div>
+
+      {/* diff view */}
+      {expanded && (
+        <div style={{ fontFamily: "'IBM Plex Mono',monospace", fontSize: '0.72rem', lineHeight: 1.5, overflowX: 'auto' }}>
+          {collapsed.map((line, i) => {
+            if (line.type === 'collapse') {
+              return (
+                <div key={i} style={{ padding: '2px 14px', background: 'var(--muted)', color: 'var(--muted-foreground)', opacity: 0.6, fontSize: '0.65rem' }}>
+                  ··· {line.count} unchanged lines ···
+                </div>
+              );
+            }
+            const bg =
+              line.type === 'insert' ? 'rgba(122,173,128,0.12)' :
+              line.type === 'delete' ? 'rgba(200,80,80,0.10)' :
+              'transparent';
+            const color =
+              line.type === 'insert' ? '#7aad80' :
+              line.type === 'delete' ? '#c85050' :
+              'var(--muted-foreground)';
+            const prefix =
+              line.type === 'insert' ? '+' :
+              line.type === 'delete' ? '−' :
+              ' ';
+            return (
+              <div key={i} style={{ display: 'flex', background: bg, borderLeft: line.type !== 'equal' ? `2px solid ${color}` : '2px solid transparent' }}>
+                <span style={{ width: 20, textAlign: 'center', color, opacity: 0.8, flexShrink: 0, userSelect: 'none' }}>{prefix}</span>
+                <span style={{ padding: '1px 8px 1px 0', color: line.type === 'equal' ? 'var(--muted-foreground)' : color, whiteSpace: 'pre', flex: 1 }}>
+                  {line.text || ' '}
+                </span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ─── Main renderer ────────────────────────────────────────────────────────────
+
+export function DiffRenderer({ content, saveAction }: RendererContext) {
+  const entries = useMemo(() => parseDiffs(content), [content]);
+
+  if (entries.length === 0) {
+    return (
+      <div style={{ padding: '3rem 1rem', textAlign: 'center', color: 'var(--muted-foreground)', fontFamily: "'IBM Plex Mono',monospace", fontSize: 12 }}>
+        <GitCompare size={28} style={{ margin: '0 auto 10px', opacity: 0.3 }} />
+        <p>No agent diffs logged yet.</p>
+        <p style={{ marginTop: 6, opacity: 0.6, fontSize: 11 }}>
+          Agent writes appear here as <code style={{ background: 'var(--muted)', padding: '1px 5px', borderRadius: 4 }}>```agent-diff</code> blocks.
+        </p>
+      </div>
+    );
+  }
+
+  const totalAdded = entries.reduce((acc, e) => acc + diffLines(e.before, e.after).filter(c => c.type === 'insert').length, 0);
+  const totalRemoved = entries.reduce((acc, e) => acc + diffLines(e.before, e.after).filter(c => c.type === 'delete').length, 0);
+
+  return (
+    <div style={{ maxWidth: 800, margin: '0 auto', padding: '1.5rem 0' }}>
+      {/* stats bar */}
+      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: '1.2rem', fontFamily: "'IBM Plex Mono',monospace", fontSize: 11, color: 'var(--muted-foreground)' }}>
+        <span>{entries.length} change{entries.length !== 1 ? 's' : ''}</span>
+        <span style={{ color: '#7aad80' }}>+{totalAdded}</span>
+        <span style={{ color: '#c85050' }}>−{totalRemoved}</span>
+      </div>
+
+      {entries.map((entry, i) => (
+        <DiffCard key={i} entry={entry} saveAction={saveAction} fullContent={content} />
+      ))}
+    </div>
+  );
+}