PyPI - code-context-control - Versions diffs - 2.28.0__py3-none-any.whl - Mend

code-context-control 2.28.0__py3-none-any.whl

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (150) hide show

cli/__init__.py +1 -0
cli/_hook_utils.py +99 -0
cli/c3.py +6152 -0
cli/commands/__init__.py +1 -0
cli/commands/common.py +312 -0
cli/commands/parser.py +286 -0
cli/docs.html +3178 -0
cli/edits.html +878 -0
cli/hook_auto_snapshot.py +142 -0
cli/hook_c3_signal.py +61 -0
cli/hook_c3read.py +116 -0
cli/hook_edit_ledger.py +213 -0
cli/hook_edit_unlock.py +170 -0
cli/hook_filter.py +130 -0
cli/hook_ghost_files.py +238 -0
cli/hook_pretool_enforce.py +334 -0
cli/hook_read.py +200 -0
cli/hook_session_stats.py +62 -0
cli/hook_terse_advisor.py +190 -0
cli/hub.html +3764 -0
cli/hub_server.py +1619 -0
cli/mcp_proxy.py +428 -0
cli/mcp_server.py +660 -0
cli/server.py +2985 -0
cli/tools/__init__.py +4 -0
cli/tools/_helpers.py +65 -0
cli/tools/agent.py +1165 -0
cli/tools/compress.py +215 -0
cli/tools/delegate.py +1184 -0
cli/tools/edit.py +313 -0
cli/tools/edits.py +118 -0
cli/tools/filter.py +285 -0
cli/tools/impact.py +163 -0
cli/tools/memory.py +469 -0
cli/tools/read.py +224 -0
cli/tools/search.py +337 -0
cli/tools/session.py +95 -0
cli/tools/shell.py +193 -0
cli/tools/status.py +306 -0
cli/tools/validate.py +310 -0
cli/ui/api.js +36 -0
cli/ui/app.js +207 -0
cli/ui/components/chat.js +758 -0
cli/ui/components/dashboard.js +689 -0
cli/ui/components/edits.js +220 -0
cli/ui/components/instructions.js +481 -0
cli/ui/components/memory.js +626 -0
cli/ui/components/sessions.js +606 -0
cli/ui/components/settings.js +1404 -0
cli/ui/components/sidebar.js +156 -0
cli/ui/icons.js +51 -0
cli/ui/shared.js +119 -0
cli/ui/theme.js +22 -0
cli/ui.html +168 -0
cli/ui_legacy.html +6797 -0
cli/ui_nano.html +503 -0
code_context_control-2.28.0.dist-info/METADATA +248 -0
code_context_control-2.28.0.dist-info/RECORD +150 -0
code_context_control-2.28.0.dist-info/WHEEL +5 -0
code_context_control-2.28.0.dist-info/entry_points.txt +4 -0
code_context_control-2.28.0.dist-info/licenses/LICENSE +201 -0
code_context_control-2.28.0.dist-info/top_level.txt +5 -0
core/__init__.py +75 -0
core/config.py +269 -0
core/ide.py +188 -0
oracle/__init__.py +1 -0
oracle/config.py +75 -0
oracle/oracle.html +3900 -0
oracle/oracle_server.py +663 -0
oracle/services/__init__.py +1 -0
oracle/services/c3_bridge.py +210 -0
oracle/services/chat_engine.py +1103 -0
oracle/services/chat_store.py +155 -0
oracle/services/cross_memory.py +154 -0
oracle/services/federated_graph.py +463 -0
oracle/services/health_checker.py +117 -0
oracle/services/insight_engine.py +307 -0
oracle/services/memory_reader.py +106 -0
oracle/services/memory_writer.py +182 -0
oracle/services/ollama_bridge.py +332 -0
oracle/services/project_scanner.py +87 -0
oracle/services/review_agent.py +206 -0
services/__init__.py +1 -0
services/activity_log.py +93 -0
services/agent_base.py +124 -0
services/agents.py +1529 -0
services/auto_memory.py +407 -0
services/bench/__init__.py +6 -0
services/bench/external/__init__.py +29 -0
services/bench/external/aider_polyglot.py +405 -0
services/bench/external/swe_bench.py +485 -0
services/benchmark_dashboard.py +596 -0
services/claude_md.py +785 -0
services/compressor.py +592 -0
services/context_snapshot.py +356 -0
services/conversation_store.py +870 -0
services/doc_index.py +537 -0
services/e2e_benchmark.py +2884 -0
services/e2e_evaluator.py +396 -0
services/e2e_tasks.py +743 -0
services/edit_ledger.py +459 -0
services/embedding_index.py +341 -0
services/error_reporting.py +123 -0
services/file_memory.py +734 -0
services/hub_service.py +585 -0
services/indexer.py +712 -0
services/memory.py +318 -0
services/memory_consolidator.py +538 -0
services/memory_graph.py +382 -0
services/memory_grounder.py +304 -0
services/memory_scorer.py +246 -0
services/metrics.py +86 -0
services/notifications.py +209 -0
services/ollama_client.py +201 -0
services/output_filter.py +488 -0
services/parser.py +1238 -0
services/project_manager.py +579 -0
services/protocol.py +306 -0
services/proxy_state.py +152 -0
services/retrieval_broker.py +129 -0
services/router.py +414 -0
services/runtime.py +326 -0
services/session_benchmark.py +1945 -0
services/session_manager.py +1026 -0
services/session_preloader.py +251 -0
services/text_index.py +90 -0
services/tool_classifier.py +176 -0
services/transcript_index.py +340 -0
services/validation_cache.py +155 -0
services/vector_store.py +299 -0
services/version_tracker.py +271 -0
services/watcher.py +192 -0
tui/__init__.py +0 -0
tui/backend.py +59 -0
tui/main.py +145 -0
tui/screens/__init__.py +1 -0
tui/screens/benchmark_view.py +109 -0
tui/screens/claudemd_view.py +46 -0
tui/screens/compress_view.py +52 -0
tui/screens/index_view.py +74 -0
tui/screens/init_view.py +82 -0
tui/screens/mcp_view.py +73 -0
tui/screens/optimize_view.py +41 -0
tui/screens/pipe_view.py +46 -0
tui/screens/projects_view.py +355 -0
tui/screens/search_view.py +55 -0
tui/screens/session_view.py +143 -0
tui/screens/stats.py +158 -0
tui/screens/ui_view.py +54 -0
tui/theme.tcss +335 -0

cli/ui_nano.html ADDED Viewed

@@ -0,0 +1,503 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>C3 Nano</title>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.production.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.production.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.9/babel.min.js"></script>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    html, body, #root { width: 100%; height: 100%; overflow: hidden; }
+    body { font-family: 'DM Sans', -apple-system, sans-serif; }
+    .mono { font-family: 'JetBrains Mono', monospace; }
+    ::-webkit-scrollbar { width: 5px; }
+    ::-webkit-scrollbar-track { background: transparent; }
+    ::-webkit-scrollbar-thumb { border-radius: 3px; }
+    @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }
+    @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
+    .fade-up { animation: fadeUp 0.25s ease forwards; }
+  </style>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="text/babel">
+    const { useState, useEffect, useCallback } = React;
+    // ─── Theme ───
+    const DARK = {
+      bg: "#0a0e14", surface: "#0f1720", surfaceAlt: "#141e2b", border: "#1e2733",
+      text: "#c5cdd8", dim: "#6b7d95", accent: "#36d7b7", blue: "#65a9ff",
+      warn: "#ffbf57", error: "#ff6f7a", ok: "#50e39f", purple: "#b38aff",
+    };
+    const LIGHT = {
+      bg: "#edf2f8", surface: "#ffffff", surfaceAlt: "#f7f9fd", border: "#cfd9e8",
+      text: "#172436", dim: "#5e738f", accent: "#008a76", blue: "#1f6ed4",
+      warn: "#b07a00", error: "#c6374b", ok: "#1f9d5b", purple: "#7c5cbf",
+    };
+    // ─── API ───
+    const API = window.location.origin;
+    const parse = async (r) => {
+      const ct = (r.headers.get("content-type") || "").toLowerCase();
+      if (ct.includes("application/json")) {
+        const j = await r.json().catch(() => null);
+        if (!r.ok) throw new Error(j?.error || j?.message || `HTTP ${r.status}`);
+        return j || {};
+      }
+      const t = await r.text().catch(() => "");
+      if (!r.ok) throw new Error(t || `HTTP ${r.status}`);
+      return {};
+    };
+    const api = {
+      get: async (p) => parse(await fetch(`${API}${p}`)),
+      post: async (p, b = {}) => parse(await fetch(`${API}${p}`, {
+        method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(b),
+      })),
+    };
+    // ─── Helpers ───
+    const timeAgo = (iso) => {
+      if (!iso) return "-";
+      const s = Math.floor((Date.now() - new Date(iso).getTime()) / 1000);
+      if (isNaN(s) || s < 0) return "-";
+      if (s < 60) return `${s}s`;
+      if (s < 3600) return `${Math.floor(s / 60)}m`;
+      if (s < 86400) return `${Math.floor(s / 3600)}h`;
+      return `${Math.floor(s / 86400)}d`;
+    };
+    const localTime = (iso) => {
+      if (!iso) return "-";
+      const d = new Date(iso);
+      return isNaN(d.getTime()) ? "-" : d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" });
+    };
+    const fmtDuration = (iso) => {
+      if (!iso) return "-";
+      const sec = Math.max(0, Math.floor((Date.now() - new Date(iso).getTime()) / 1000));
+      const h = Math.floor(sec / 3600), m = Math.floor((sec % 3600) / 60), s = sec % 60;
+      return h > 0 ? `${h}h ${m}m` : `${m}m ${s}s`;
+    };
+    const fmtK = n => n >= 1000 ? (n / 1000).toFixed(1) + "K" : String(n);
+    // ─── Tiny Components ───
+    const Dot = ({ color, pulse }) => (
+      <span style={{
+        width: 7, height: 7, borderRadius: "50%", background: color, display: "inline-block",
+        boxShadow: `0 0 8px ${color}80`, animation: pulse ? "pulse 1.2s linear infinite" : "none",
+      }} />
+    );
+    const Badge = ({ color, children }) => (
+      <span className="mono" style={{
+        fontSize: 9, fontWeight: 600, color, background: `${color}15`, border: `1px solid ${color}30`,
+        padding: "1px 5px", borderRadius: 4, letterSpacing: 0.2,
+      }}>{children}</span>
+    );
+    const MiniBar = ({ value, max = 100, color, height = 4 }) => (
+      <div style={{ height, borderRadius: height, background: `${color}20`, overflow: "hidden" }}>
+        <div style={{ height: "100%", width: `${Math.min(100, max > 0 ? (value / max) * 100 : 0)}%`, background: color, borderRadius: height, transition: "width 0.3s" }} />
+      </div>
+    );
+    const Stat = ({ t, label, value, color }) => (
+      <div style={{ background: `${color}10`, border: `1px solid ${color}25`, borderRadius: 6, padding: "6px 8px" }}>
+        <div className="mono" style={{ fontSize: 9, color: t.dim, textTransform: "uppercase", letterSpacing: 0.8 }}>{label}</div>
+        <div className="mono" style={{ fontSize: 16, color, fontWeight: 700, marginTop: 1 }}>{value}</div>
+      </div>
+    );
+    const Card = ({ t, title, badge, children }) => (
+      <section className="fade-up" style={{
+        background: t.surface, border: `1px solid ${t.border}`, borderRadius: 8,
+        padding: 12, display: "flex", flexDirection: "column", gap: 8,
+      }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <span style={{ fontSize: 11, fontWeight: 700, color: t.dim, textTransform: "uppercase", letterSpacing: 1, flex: 1 }}>{title}</span>
+          {badge}
+        </div>
+        {children}
+      </section>
+    );
+    // ─── App ───
+    function App() {
+      const [dark, setDark] = useState(() => localStorage.getItem("c3-nano-theme") !== "light");
+      const t = dark ? DARK : LIGHT;
+      const [connected, setConnected] = useState(true);
+      const [loading, setLoading] = useState(false);
+      const [health, setHealth] = useState(null);
+      const [stats, setStats] = useState({});
+      const [session, setSession] = useState(null);
+      const [activity, setActivity] = useState([]);
+      const [notifications, setNotifications] = useState([]);
+      const [actionMsg, setActionMsg] = useState("");
+      const [showShutdown, setShowShutdown] = useState(false);
+      const [shutdownBusy, setShutdownBusy] = useState(false);
+      const [shutdownForce, setShutdownForce] = useState(false);
+      const [tick, setTick] = useState(0);
+      useEffect(() => {
+        localStorage.setItem("c3-nano-theme", dark ? "dark" : "light");
+      }, [dark]);
+      const loadHealth = useCallback(async () => {
+        try { const h = await api.get("/api/health"); setHealth(h); setConnected(true); } catch { setConnected(false); }
+      }, []);
+      const loadStats = useCallback(async () => {
+        try { const s = await api.get("/api/stats"); setStats(s); setConnected(true); } catch { setConnected(false); }
+      }, []);
+      const loadSession = useCallback(async () => {
+        try { setSession(await api.get("/api/sessions/current") || null); } catch {}
+      }, []);
+      const loadActivity = useCallback(async () => {
+        try { const a = await api.get("/api/activity?limit=12"); setActivity(Array.isArray(a) ? a : []); } catch {}
+      }, []);
+      const loadNotifications = useCallback(async () => {
+        try { const n = await api.get("/api/notifications?limit=30"); setNotifications(Array.isArray(n) ? n : []); } catch {}
+      }, []);
+      const refreshAll = useCallback(async () => {
+        setLoading(true);
+        await Promise.all([loadHealth(), loadStats(), loadSession(), loadActivity(), loadNotifications()]);
+        setLoading(false);
+      }, [loadHealth, loadStats, loadSession, loadActivity, loadNotifications]);
+      useEffect(() => { refreshAll(); }, [refreshAll]);
+      useEffect(() => {
+        const fast = setInterval(() => { loadSession(); loadActivity(); }, 5000);
+        const mid = setInterval(() => { loadNotifications(); loadStats(); }, 12000);
+        const slow = setInterval(loadHealth, 20000);
+        const ticker = setInterval(() => setTick(x => x + 1), 1000);
+        return () => { clearInterval(fast); clearInterval(mid); clearInterval(slow); clearInterval(ticker); };
+      }, [loadSession, loadActivity, loadNotifications, loadStats, loadHealth]);
+      const ackOne = async (id) => { try { await api.post("/api/notifications/ack", { id }); setNotifications(p => p.filter(n => n.id !== id)); } catch {} };
+      const ackAll = async () => { try { await api.post("/api/notifications/ack-all"); setNotifications([]); } catch {} };
+      const rebuildIndex = async () => {
+        setActionMsg("Rebuilding index...");
+        try { await api.post("/api/index/rebuild", {}); setActionMsg("Index rebuilt."); loadActivity(); } catch { setActionMsg("Rebuild failed."); }
+        setTimeout(() => setActionMsg(""), 3000);
+      };
+      const confirmShutdown = async (force = false) => {
+        setShutdownBusy(true); setShutdownForce(force);
+        try { await api.post("/api/shutdown", { force_close_terminal: force }); } catch {}
+        setConnected(false);
+        setTimeout(() => { try { window.close(); } catch {} window.location.href = "about:blank"; }, 450);
+      };
+      const eventSummary = (e) => {
+        if (!e) return "-";
+        if (e.type === "tool_call") return (e.tool || "tool") + (e.result_summary ? `: ${e.result_summary}` : "");
+        if (e.type === "decision") return e.decision || e.data || "decision";
+        if (e.type === "file_change") return e.file || e.data || "file change";
+        if (e.type === "session_start") return `session started`;
+        if (e.type === "session_save") return `session saved`;
+        return e.type || "event";
+      };
+      // Derived
+      const projectName = stats?.project_path ? stats.project_path.split(/[/\\]/).pop() : "C3";
+      const orig = stats?.total_original_tokens || 0;
+      const comp = stats?.total_compressed_tokens || 0;
+      const saved = orig - comp;
+      const pct = stats?.savings_pct || 0;
+      const convUsage = stats?.conversation_token_usage;
+      const sourceUsage = convUsage?.sources || {};
+      const sourceEntries = Object.entries(sourceUsage).sort((a, b) => (b[1]?.total_tokens || 0) - (a[1]?.total_tokens || 0));
+      const totalSourceTokens = sourceEntries.reduce((sum, [, d]) => sum + (d?.total_tokens || 0), 0);
+      const budget = stats?.context_budget;
+      const hasBudget = budget && budget.call_count > 0;
+      const budgetPct = hasBudget ? Math.min(100, Math.round((budget.response_tokens / (budget.threshold || 35000)) * 100)) : 0;
+      const budgetColor = budgetPct >= 90 ? t.error : budgetPct >= 70 ? t.warn : t.accent;
+      const sessionDuration = session?.live ? fmtDuration(session.started) : (session?.duration || "-");
+      const sourceLabel = session?.source_system || session?.source_ide || "unknown";
+      return (
+        <div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", background: t.bg, color: t.text }}>
+          {/* ── Header ── */}
+          <header style={{
+            borderBottom: `1px solid ${t.border}`, background: t.surface, padding: "8px 14px",
+            display: "flex", alignItems: "center", gap: 10, flexShrink: 0,
+          }}>
+            <Dot color={connected ? t.ok : t.error} pulse={connected} />
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+                <span style={{ fontSize: 14, fontWeight: 700 }}>
+                  C<span style={{ color: t.accent }}>3</span> <span style={{ fontWeight: 400, color: t.dim }}>Nano</span>
+                </span>
+                <span className="mono" style={{ fontSize: 10, color: t.dim }}>{projectName}</span>
+              </div>
+            </div>
+            {/* Source badges */}
+            <div style={{ display: "flex", gap: 4, flexWrap: "wrap" }}>
+              {(health?.sources ? Object.entries(health.sources) : []).map(([k, v]) => (
+                <Badge key={k} color={v ? t.ok : t.error}>{k}</Badge>
+              ))}
+            </div>
+            {/* Actions */}
+            <div style={{ display: "flex", alignItems: "center", gap: 6 }}>
+              <button onClick={refreshAll} disabled={loading}
+                className="mono" style={{
+                  height: 26, padding: "0 8px", borderRadius: 5, border: `1px solid ${t.border}`,
+                  background: "transparent", color: t.dim, fontSize: 10, cursor: "pointer",
+                }}>
+                {loading ? "..." : "Refresh"}
+              </button>
+              <button onClick={() => setDark(v => !v)}
+                className="mono" style={{
+                  height: 26, padding: "0 8px", borderRadius: 5, border: `1px solid ${t.border}`,
+                  background: "transparent", color: t.dim, fontSize: 10, cursor: "pointer",
+                }}>
+                {dark ? "Light" : "Dark"}
+              </button>
+              <button onClick={async () => {
+                  try { const h = await api.get('/api/hub/info'); window.location.href = h.url; }
+                  catch { window.location.href = 'http://localhost:3330'; }
+                }}
+                className="mono" style={{
+                  height: 26, padding: "0 8px", borderRadius: 5, border: `1px solid ${t.warn}40`,
+                  background: `${t.warn}12`, color: t.warn, fontSize: 10, fontWeight: 700, cursor: "pointer",
+                }}>
+                Hub
+              </button>
+              <a href="/" className="mono" style={{
+                height: 26, padding: "0 10px", borderRadius: 5, border: `1px solid ${t.purple}40`,
+                background: `${t.purple}12`, color: t.purple, fontSize: 10, fontWeight: 700,
+                textDecoration: "none", display: "flex", alignItems: "center",
+              }}>
+                Full UI
+              </a>
+              <a href="/edits" className="mono" style={{
+                height: 26, padding: "0 10px", borderRadius: 5, border: `1px solid ${t.accent}40`,
+                background: `${t.accent}12`, color: t.accent, fontSize: 10, fontWeight: 700,
+                textDecoration: "none", display: "flex", alignItems: "center",
+              }}>
+                Ledger
+              </a>
+              <button onClick={() => setShowShutdown(true)}
+                className="mono" style={{
+                  height: 26, padding: "0 8px", borderRadius: 5, border: `1px solid ${t.error}40`,
+                  background: `${t.error}12`, color: t.error, fontSize: 10, fontWeight: 600, cursor: "pointer",
+                }}>
+                Shut Down
+              </button>
+            </div>
+          </header>
+          {/* ── Content ── */}
+          <main style={{ flex: 1, overflow: "auto", padding: 12 }}>
+            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))", gap: 10 }}>
+              {/* Card: Overview */}
+              <Card t={t} title="Overview" badge={<Badge color={t.accent}>{pct}% savings</Badge>}>
+                <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6 }}>
+                  <Stat t={t} label="Saved" value={fmtK(saved)} color={t.accent} />
+                  <Stat t={t} label="Files" value={stats?.index?.files_indexed || 0} color={t.blue} />
+                  <Stat t={t} label="Sessions" value={stats?.sessions_count || 0} color={t.warn} />
+                </div>
+                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                  <span className="mono" style={{ fontSize: 9, color: t.dim, flexShrink: 0 }}>Savings</span>
+                  <MiniBar value={pct} color={t.accent} />
+                  <span className="mono" style={{ fontSize: 10, color: t.accent, fontWeight: 600, flexShrink: 0 }}>{pct}%</span>
+                </div>
+                {hasBudget && (
+                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                    <span className="mono" style={{ fontSize: 9, color: t.dim, flexShrink: 0 }}>Budget</span>
+                    <MiniBar value={budgetPct} color={budgetColor} />
+                    <span className="mono" style={{ fontSize: 10, color: budgetColor, fontWeight: 600, flexShrink: 0 }}>{budgetPct}%</span>
+                  </div>
+                )}
+              </Card>
+              {/* Card: Current Session */}
+              <Card t={t} title="Current Session" badge={<Badge color={t.blue}>source:{sourceLabel}</Badge>}>
+                {!session ? (
+                  <div style={{ color: t.dim, fontSize: 12 }}>No active session.</div>
+                ) : (
+                  <>
+                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
+                      <Stat t={t} label="Session" value={(session.id || "-").slice(0, 12)} color={t.blue} />
+                      <Stat t={t} label="Duration" value={sessionDuration} color={t.accent} />
+                    </div>
+                    <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 6 }}>
+                      <Stat t={t} label="Tools" value={Array.isArray(session.tool_calls) ? session.tool_calls.length : (session.tool_calls || 0)} color={t.warn} />
+                      <Stat t={t} label="Decisions" value={Array.isArray(session.decisions) ? session.decisions.length : (session.decisions || 0)} color={t.purple} />
+                      <Stat t={t} label="Files" value={Array.isArray(session.files_touched) ? session.files_touched.length : (session.files_touched || 0)} color={t.ok} />
+                    </div>
+                    <div className="mono" style={{ fontSize: 9, color: t.dim }}>
+                      started {localTime(session.started)} ({timeAgo(session.started)} ago)
+                    </div>
+                  </>
+                )}
+              </Card>
+              {/* Card: Token Usage by Source (provider-agnostic) */}
+              {sourceEntries.length > 0 && (
+                <Card t={t} title="Token Usage" badge={<Badge color={t.purple}>{fmtK(totalSourceTokens)} total</Badge>}>
+                  <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+                    {sourceEntries.map(([name, data], idx) => {
+                      const tokens = data?.total_tokens || 0;
+                      const input = data?.input_tokens || 0;
+                      const output = data?.output_tokens || 0;
+                      const calls = data?.call_count || data?.sessions || 0;
+                      const colors = [t.accent, t.blue, t.purple, t.warn, t.error];
+                      const color = colors[idx % colors.length];
+                      const sourcePct = totalSourceTokens > 0 ? Math.round((tokens / totalSourceTokens) * 100) : 0;
+                      return (
+                        <div key={name} style={{
+                          background: t.surfaceAlt, border: `1px solid ${t.border}`, borderRadius: 6, padding: "7px 10px",
+                        }}>
+                          <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
+                            <Dot color={color} />
+                            <span className="mono" style={{ fontSize: 11, fontWeight: 600, color: t.text, flex: 1 }}>{name}</span>
+                            <span className="mono" style={{ fontSize: 10, color }}>{fmtK(tokens)}</span>
+                            {calls > 0 && <span className="mono" style={{ fontSize: 9, color: t.dim }}>{calls} calls</span>}
+                            <Badge color={color}>{sourcePct}%</Badge>
+                          </div>
+                          <MiniBar value={sourcePct} color={color} />
+                          {(input > 0 || output > 0) && (
+                            <div style={{ display: "flex", gap: 10, marginTop: 4 }}>
+                              <span className="mono" style={{ fontSize: 9, color: t.dim }}>{fmtK(input)} in</span>
+                              <span className="mono" style={{ fontSize: 9, color: t.dim }}>{fmtK(output)} out</span>
+                            </div>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
+                </Card>
+              )}
+              {/* Card: Activity */}
+              <Card t={t} title="Activity" badge={<Badge color={t.blue}>{activity.length}</Badge>}>
+                <div style={{ display: "flex", flexDirection: "column", gap: 4, maxHeight: 220, overflow: "auto" }}>
+                  {activity.length === 0 && <div style={{ color: t.dim, fontSize: 12 }}>No recent activity.</div>}
+                  {activity.map((e, i) => (
+                    <div key={i} style={{
+                      display: "flex", alignItems: "center", gap: 8, padding: "5px 8px",
+                      borderRadius: 5, background: t.surfaceAlt, border: `1px solid ${t.border}`,
+                    }}>
+                      <Badge color={t.blue}>{e.type || "event"}</Badge>
+                      <span className="mono" style={{ fontSize: 10, color: t.text, flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                        {eventSummary(e)}
+                      </span>
+                      <span className="mono" style={{ fontSize: 9, color: t.dim, flexShrink: 0 }}>{timeAgo(e.timestamp)}</span>
+                    </div>
+                  ))}
+                </div>
+              </Card>
+              {/* Card: Notifications */}
+              <Card t={t} title="Notifications"
+                badge={
+                  <div style={{ display: "flex", gap: 4 }}>
+                    <Badge color={t.warn}>{notifications.length}</Badge>
+                    {notifications.length > 0 && (
+                      <button onClick={ackAll} className="mono" style={{
+                        border: `1px solid ${t.border}`, borderRadius: 4, background: "transparent",
+                        color: t.dim, fontSize: 9, padding: "1px 5px", cursor: "pointer",
+                      }}>Dismiss all</button>
+                    )}
+                  </div>
+                }>
+                <div style={{ display: "flex", flexDirection: "column", gap: 4, maxHeight: 220, overflow: "auto" }}>
+                  {notifications.length === 0 && <div style={{ color: t.dim, fontSize: 12 }}>No notifications.</div>}
+                  {notifications.slice(0, 15).map((n, i) => {
+                    const sev = (n.severity || "info").toLowerCase();
+                    const sevColor = sev === "critical" ? t.error : sev === "warning" ? t.warn : t.blue;
+                    return (
+                      <div key={n.id || i} style={{
+                        display: "flex", alignItems: "center", gap: 6, padding: "5px 8px",
+                        borderRadius: 5, background: t.surfaceAlt, borderLeft: `3px solid ${sevColor}`,
+                      }}>
+                        <Badge color={sevColor}>{sev}</Badge>
+                        <span className="mono" style={{ fontSize: 10, color: t.text, flex: 1, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                          {n.title || "notification"}{n.message ? ` - ${n.message}` : ""}
+                        </span>
+                        <button onClick={() => ackOne(n.id)} style={{
+                          border: "none", background: "transparent", color: t.dim, fontSize: 9, cursor: "pointer", padding: "2px",
+                        }}>x</button>
+                      </div>
+                    );
+                  })}
+                </div>
+              </Card>
+              {/* Card: Quick Actions */}
+              <Card t={t} title="Actions">
+                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6 }}>
+                  <button onClick={rebuildIndex} className="mono" style={{
+                    height: 34, borderRadius: 6, border: `1px solid ${t.blue}40`,
+                    background: `${t.blue}12`, color: t.blue, fontWeight: 700, fontSize: 11, cursor: "pointer",
+                  }}>Rebuild Index</button>
+                  <button onClick={loadHealth} className="mono" style={{
+                    height: 34, borderRadius: 6, border: `1px solid ${t.accent}40`,
+                    background: `${t.accent}12`, color: t.accent, fontWeight: 700, fontSize: 11, cursor: "pointer",
+                  }}>Refresh Health</button>
+                </div>
+                {actionMsg && (
+                  <div className="mono" style={{ fontSize: 10, color: actionMsg.includes("fail") ? t.error : t.dim }}>
+                    {actionMsg}
+                  </div>
+                )}
+              </Card>
+            </div>
+          </main>
+          {/* ── Shutdown Modal ── */}
+          {showShutdown && (
+            <div style={{
+              position: "fixed", inset: 0, background: "rgba(4,10,18,0.6)",
+              display: "flex", alignItems: "center", justifyContent: "center", zIndex: 9999,
+            }}>
+              <div style={{
+                width: "min(400px, calc(100vw - 24px))",
+                background: t.surface, border: `1px solid ${t.border}`, borderRadius: 8,
+                boxShadow: "0 16px 48px rgba(0,0,0,0.3)", padding: 16, display: "flex", flexDirection: "column", gap: 10,
+              }}>
+                <div style={{ fontSize: 14, fontWeight: 700, color: t.text }}>Shut Down C3?</div>
+                <div style={{ fontSize: 12, color: t.dim, lineHeight: 1.5 }}>
+                  Stops the C3 server and ends the current session.
+                </div>
+                <div style={{ display: "flex", justifyContent: "flex-end", gap: 6, marginTop: 4 }}>
+                  <button onClick={() => { if (!shutdownBusy) setShowShutdown(false); }}
+                    disabled={shutdownBusy} className="mono" style={{
+                      height: 30, padding: "0 10px", borderRadius: 5, border: `1px solid ${t.border}`,
+                      background: "transparent", color: t.dim, fontSize: 10, cursor: shutdownBusy ? "default" : "pointer",
+                      opacity: shutdownBusy ? 0.5 : 1,
+                    }}>Cancel</button>
+                  <button onClick={() => confirmShutdown(false)} disabled={shutdownBusy}
+                    className="mono" style={{
+                      height: 30, padding: "0 10px", borderRadius: 5, border: `1px solid ${t.error}60`,
+                      background: `${t.error}15`, color: t.error, fontSize: 10, fontWeight: 700, cursor: "pointer",
+                      opacity: shutdownBusy ? 0.7 : 1,
+                    }}>
+                    {shutdownBusy && !shutdownForce ? "Stopping..." : "Shut Down"}
+                  </button>
+                  <button onClick={() => confirmShutdown(true)} disabled={shutdownBusy}
+                    className="mono" style={{
+                      height: 30, padding: "0 10px", borderRadius: 5, border: `1px solid ${t.error}80`,
+                      background: `${t.error}22`, color: t.error, fontSize: 10, fontWeight: 700, cursor: "pointer",
+                      opacity: shutdownBusy ? 0.7 : 1,
+                    }}>
+                    {shutdownBusy && shutdownForce ? "Closing..." : "Shut Down + Close Terminal"}
+                  </button>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      );
+    }
+    ReactDOM.render(React.createElement(App), document.getElementById("root"));
+  </script>
+</body>
+</html>