ccsniff 1.0.25 → 1.0.27

package/gui/app.js

@@ -0,0 +1,241 @@
+import { mount, components as C, h } from 'anentrypoint-design';
+
+const TABS = ['overview', 'sessions', 'projects', 'tools', 'timeline', 'errors', 'subagents', 'live', 'search'];
+const state = {
+  tab: 'overview',
+  data: { snapshot: null, sessions: [], projects: [], tools: [], timeline: [], stats: null, errors: [], subagents: [] },
+  query: '',
+  searchResults: [],
+  searching: false,
+  liveLog: [],
+};
+
+const api = (p) => fetch(p).then(r => r.json());
+
+async function loadAll() {
+  const [snapshot, sessions, projects, tools, timeline, stats, errors, subagents] = await Promise.all([
+    api('/api/snapshot'), api('/api/sessions'), api('/api/projects'), api('/api/tools'),
+    api('/api/timeline'), api('/api/stats'), api('/api/errors'), api('/api/subagents'),
+  ]);
+  state.data = { snapshot, sessions, projects, tools, timeline, stats, errors, subagents };
+  render();
+}
+
+function ts(t) { return new Date(t).toISOString().slice(0, 19).replace('T', ' '); }
+function n(v) { return (v || 0).toLocaleString(); }
+function dur(ms) { const s = Math.round((ms || 0) / 1000); return s < 60 ? s + 's' : Math.round(s / 60) + 'm'; }
+
+function Stat(lbl, val, sub) {
+  return h('div', { class: 'stat' }, h('div', { class: 'lbl' }, lbl), h('div', { class: 'val' }, val), sub ? h('div', { class: 'lbl', style: 'margin-top:4px' }, sub) : null);
+}
+
+function Overview() {
+  const s = state.data.snapshot || {};
+  const st = state.data.stats || { role: {}, type: {}, model: {} };
+  return h('div', { class: 'grid' },
+    h('div', { class: 'grid cols-4' },
+      Stat('events', n(s.events)),
+      Stat('sessions', n(s.sessions)),
+      Stat('projects', n(s.projects)),
+      Stat('tools', n(s.tools)),
+      Stat('errors', n(s.errors)),
+      Stat('files', n(s.files)),
+      Stat('total cost', '$' + (st.totalCostUsd || 0).toFixed(4)),
+      Stat('total duration', dur(st.totalDurationMs)),
+    ),
+    C.Panel({ head: 'roles', children: dist(st.role) }),
+    C.Panel({ head: 'block types', children: dist(st.type) }),
+    C.Panel({ head: 'models', children: dist(st.model) }),
+    C.Panel({ head: 'window', children: h('div', { class: 'row-grid', style: 'grid-template-columns: 140px 1fr' },
+      h('span', {}, 'earliest'), h('span', {}, s.earliest ? ts(s.earliest) : '—'),
+      h('span', {}, 'latest'), h('span', {}, s.latest ? ts(s.latest) : '—'),
+      h('span', {}, 'indexed'), h('span', {}, s.indexedAt ? ts(s.indexedAt) : '—'),
+      h('span', {}, 'bytes (text)'), h('span', {}, n(s.bytes)),
+    ) }),
+  );
+}
+
+function dist(map) {
+  const entries = Object.entries(map || {}).sort((a, b) => b[1] - a[1]);
+  const max = entries[0]?.[1] || 1;
+  return h('div', {}, ...entries.map(([k, v]) => h('div', { class: 'row-grid', style: 'grid-template-columns: 200px 80px 1fr' },
+    h('span', {}, k), h('span', {}, n(v)),
+    h('span', { class: 'bar' }, h('i', { style: `width:${(v / max) * 100}%` })),
+  )));
+}
+
+function SessionsView() {
+  const list = state.data.sessions.slice(0, 200);
+  return C.Panel({ head: `sessions · ${list.length}`, children: h('div', {},
+    h('div', { class: 'row-grid sessions', style: 'opacity:.55' },
+      h('span', {}, 'last'), h('span', {}, 'turns'), h('span', {}, 'tools'), h('span', {}, 'ev'), h('span', {}, 'err'), h('span', {}, 'project · sid')),
+    ...list.map(s => h('div', { class: 'row-grid sessions' },
+      h('span', {}, ts(s.last).slice(5)),
+      h('span', {}, n(s.userTurns)),
+      h('span', {}, n(s.tools)),
+      h('span', {}, n(s.events)),
+      h('span', { class: s.errors ? 'err' : '' }, n(s.errors)),
+      h('span', { class: 'truncate' }, (s.isSubagent ? '★ ' : '') + (s.project || '—') + '  ', h('span', { class: 'accent' }, s.sid.slice(0, 8))),
+    )),
+  ) });
+}
+
+function ProjectsView() {
+  return C.Panel({ head: `projects · ${state.data.projects.length}`, children: h('div', {},
+    h('div', { class: 'row-grid projects', style: 'opacity:.55' },
+      h('span', {}, 'project'), h('span', {}, 'sessions'), h('span', {}, 'events'), h('span', {}, 'tools'), h('span', {}, 'last')),
+    ...state.data.projects.map(p => h('div', { class: 'row-grid projects' },
+      h('span', { class: 'truncate accent' }, p.project),
+      h('span', {}, n(p.sessions)),
+      h('span', {}, n(p.events)),
+      h('span', {}, n(p.tools)),
+      h('span', {}, ts(p.last).slice(5)),
+    )),
+  ) });
+}
+
+function ToolsView() {
+  const max = state.data.tools[0]?.count || 1;
+  return C.Panel({ head: `tools · ${state.data.tools.length}`, children: h('div', {},
+    h('div', { class: 'row-grid tools', style: 'opacity:.55' },
+      h('span', {}, 'tool'), h('span', {}, 'count'), h('span', {}, 'sessions'), h('span', {}, 'errors'), h('span', {}, 'bar')),
+    ...state.data.tools.map(t => h('div', { class: 'row-grid tools' },
+      h('span', { class: 'accent' }, t.tool),
+      h('span', {}, n(t.count)),
+      h('span', {}, n(t.sessions)),
+      h('span', { class: t.errors ? 'err' : '' }, n(t.errors)),
+      h('span', { class: 'bar' }, h('i', { style: `width:${(t.count / max) * 100}%` })),
+    )),
+  ) });
+}
+
+function TimelineView() {
+  const buckets = state.data.timeline;
+  const max = buckets.reduce((m, b) => Math.max(m, b.events), 1);
+  return C.Panel({ head: `timeline · 1h buckets · ${buckets.length}`, children: h('div', {},
+    h('div', { class: 'spark', style: 'padding:12px' }, ...buckets.map(b => h('i', { style: `height:${(b.events / max) * 100}%`, title: `${ts(b.t)}  ev:${b.events} tools:${b.tools} err:${b.errors}` }))),
+    h('div', { class: 'row-grid', style: 'grid-template-columns:160px 80px 80px 80px 80px;opacity:.55' },
+      h('span', {}, 'bucket'), h('span', {}, 'events'), h('span', {}, 'tools'), h('span', {}, 'sess'), h('span', {}, 'err')),
+    ...buckets.slice(-40).reverse().map(b => h('div', { class: 'row-grid', style: 'grid-template-columns:160px 80px 80px 80px 80px' },
+      h('span', {}, ts(b.t).slice(5)), h('span', {}, n(b.events)), h('span', {}, n(b.tools)), h('span', {}, n(b.sessions)), h('span', { class: b.errors ? 'err' : '' }, n(b.errors)),
+    )),
+  ) });
+}
+
+function ErrorsView() {
+  return C.Panel({ head: `errors · ${state.data.errors.length}`, children: h('div', {},
+    h('div', { class: 'row-grid errors', style: 'opacity:.55' }, h('span', {}, 'when'), h('span', {}, 'session'), h('span', {}, 'message')),
+    ...state.data.errors.map(e => h('div', { class: 'row-grid errors err' },
+      h('span', {}, ts(e.ts).slice(5)),
+      h('span', {}, (e.sid || '').slice(0, 8)),
+      h('span', { class: 'truncate' }, e.error + (e.recoverable ? ' (recoverable)' : '')),
+    )),
+  ) });
+}
+
+function SubagentsView() {
+  return C.Panel({ head: `subagents · ${state.data.subagents.length} parents`, children: h('div', {},
+    ...state.data.subagents.map(p => h('div', { style: 'padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.05)' },
+      h('div', { class: 'accent' }, 'parent ', p.parent.slice(0, 8), ' · ', n(p.children.length), ' children'),
+      ...p.children.map(c => h('div', { class: 'row-grid', style: 'grid-template-columns:90px 100px 1fr' },
+        h('span', {}, c.sid.slice(0, 8)), h('span', {}, n(c.events) + ' ev'), h('span', { class: 'truncate' }, c.project || '—'),
+      )),
+    )),
+  ) });
+}
+
+function LiveView() {
+  return C.Panel({ head: `live · ${state.liveLog.length} events (last 200)`, children: h('div', { class: 'live' },
+    ...state.liveLog.slice().reverse().map((e, i) => h('div', { key: i, class: 'e' },
+      h('span', { class: 'ts' }, ts(e.ts || Date.now()).slice(11)),
+      h('span', { class: 'k' }, e._kind || 'event'),
+      h('span', {}, fmtLive(e)),
+    )),
+  ) });
+}
+
+function fmtLive(e) {
+  if (e._kind === 'conversation') return 'new ' + (e.conv?.title || e.conv?.id?.slice(0, 8));
+  if (e._kind === 'start' || e._kind === 'complete') return (e.sid || '').slice(0, 8);
+  if (e._kind === 'error') return e.error;
+  const tag = `${e.role || ''}/${e.type || ''}` + (e.tool ? ':' + e.tool : '');
+  return tag + '  ' + (e.text || '').slice(0, 200);
+}
+
+function SearchView() {
+  return C.Panel({ head: `bm25 search · ${state.searchResults.length} hits`, children: h('div', {},
+    h('div', { style: 'padding:12px' },
+      h('input', {
+        class: 'search', placeholder: 'query (BM25 over all event text)…', value: state.query,
+        oninput: (e) => { state.query = e.target.value; },
+        onkeydown: (e) => { if (e.key === 'Enter') doSearch(); },
+      }),
+      h('div', { style: 'margin-top:8px;font-size:11px;opacity:.6' }, state.searching ? 'searching…' : 'enter to search · zero deps · idf-weighted'),
+    ),
+    h('div', { class: 'row-grid search', style: 'opacity:.55' },
+      h('span', {}, 'score'), h('span', {}, 'when'), h('span', {}, 'role'), h('span', {}, 'tool'), h('span', {}, 'snippet')),
+    ...state.searchResults.map(r => h('div', { class: 'row-grid search' },
+      h('span', { class: 'accent' }, r.score.toFixed(2)),
+      h('span', {}, ts(r.ts).slice(5)),
+      h('span', {}, r.role + '/' + (r.type || '?')),
+      h('span', {}, r.tool || '—'),
+      h('span', { class: 'truncate' }, h('span', { class: 'pill' }, r.project || '—'), r.snippet),
+    )),
+  ) });
+}
+
+async function doSearch() {
+  if (!state.query.trim()) return;
+  state.searching = true; render();
+  const res = await api('/api/search?q=' + encodeURIComponent(state.query) + '&limit=200');
+  state.searchResults = res.results || [];
+  state.searching = false; render();
+}
+
+const VIEWS = { overview: Overview, sessions: SessionsView, projects: ProjectsView, tools: ToolsView, timeline: TimelineView, errors: ErrorsView, subagents: SubagentsView, live: LiveView, search: SearchView };
+
+function App() {
+  const s = state.data.snapshot || {};
+  return C.AppShell({
+    topbar: C.Topbar({
+      brand: '247420', leaf: 'ccsniff',
+      items: TABS.map(t => [t, '#/' + t]),
+      active: state.tab,
+      onNav: (t) => { state.tab = t; location.hash = '#/' + t; render(); },
+    }),
+    main: h('div', { style: 'padding:16px;display:flex;flex-direction:column;gap:16px' },
+      C.Crumb({ trail: ['247420', 'ccsniff'], leaf: state.tab, right: h('span', { class: 'pill' }, n(s.events) + ' events') }),
+      (VIEWS[state.tab] || Overview)(),
+    ),
+    status: C.Status({
+      left: ['ccsniff', '·', n(s.sessions) + ' sessions', '·', n(s.events) + ' events'],
+      right: [state.searching ? 'searching' : 'live', '·', s.indexedAt ? ts(s.indexedAt).slice(11) : '—'],
+    }),
+  });
+}
+
+const root = document.getElementById('app');
+function render() { mount(root, App); window.__ccsniff = { state, render, doSearch }; }
+render();
+
+(function initRoute() {
+  const h0 = (location.hash || '').replace(/^#\//, '');
+  if (TABS.includes(h0)) state.tab = h0;
+})();
+
+(async function init() {
+  await loadAll();
+  setInterval(loadAll, 15_000);
+  const sse = new EventSource('/api/stream');
+  const push = (kind, data) => {
+    const item = { ...data, _kind: kind, ts: data?.ts || Date.now() };
+    state.liveLog.push(item);
+    if (state.liveLog.length > 200) state.liveLog = state.liveLog.slice(-200);
+    if (state.tab === 'live') render();
+  };
+  sse.addEventListener('event', e => push('event', JSON.parse(e.data)));
+  sse.addEventListener('error', e => { try { push('error', JSON.parse(e.data)); } catch {} });
+  sse.addEventListener('start', e => push('start', JSON.parse(e.data)));
+  sse.addEventListener('complete', e => push('complete', JSON.parse(e.data)));
+  sse.addEventListener('conversation', e => push('conversation', JSON.parse(e.data)));
+})();

package/gui/index.html

@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en" class="ds-247420" data-theme="dark">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>ccsniff — observatory</title>
+  <link rel="stylesheet" href="https://unpkg.com/anentrypoint-design@latest/dist/247420.css">
+  <script type="importmap">
+    { "imports": {
+      "anentrypoint-design": "https://unpkg.com/anentrypoint-design@latest/dist/247420.js"
+    } }
+  </script>
+  <style>
+    body { margin: 0; }
+    .grid { display: grid; gap: 12px; }
+    .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+    .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+    .stat { padding: 14px 16px; border-radius: 10px; background: var(--panel-bg, #111); }
+    .stat .lbl { font-size: 11px; opacity: .65; text-transform: uppercase; letter-spacing: .08em; }
+    .stat .val { font-size: 22px; font-weight: 600; margin-top: 4px; }
+    .row-grid { display: grid; gap: 4px 12px; align-items: start; padding: 6px 12px; border-bottom: 1px solid rgba(255,255,255,.05); font-family: var(--ff-mono, ui-monospace, monospace); font-size: 12px; }
+    .row-grid.sessions { grid-template-columns: 110px 80px 60px 60px 60px 1fr; }
+    .row-grid.projects { grid-template-columns: 1fr 90px 90px 90px 110px; }
+    .row-grid.tools    { grid-template-columns: 1fr 80px 80px 80px 110px; }
+    .row-grid.events   { grid-template-columns: 110px 90px 90px 110px 1fr; }
+    .row-grid.search   { grid-template-columns: 60px 100px 90px 90px 1fr; }
+    .row-grid.errors   { grid-template-columns: 110px 100px 1fr; }
+    .row-grid .truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+    .row-grid .accent { color: var(--panel-accent, #6cf); }
+    .row-grid .err { color: #f66; }
+    .bar { height: 6px; background: rgba(255,255,255,.08); border-radius: 3px; overflow: hidden; }
+    .bar > i { display: block; height: 100%; background: var(--panel-accent, #6cf); }
+    .spark { display: flex; align-items: flex-end; gap: 2px; height: 60px; }
+    .spark > i { display: block; flex: 1; background: var(--panel-accent, #6cf); min-height: 1px; opacity: .8; }
+    .live { font-family: var(--ff-mono, ui-monospace, monospace); font-size: 12px; max-height: 360px; overflow: auto; padding: 6px 12px; }
+    .live .e { padding: 2px 0; border-bottom: 1px dashed rgba(255,255,255,.05); }
+    .live .e .ts { opacity: .5; margin-right: 8px; }
+    .live .e .k { color: var(--panel-accent, #6cf); margin-right: 8px; }
+    input.search { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); color: inherit; font: inherit; }
+    .pill { display: inline-block; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 10px; margin-right: 4px; }
+    .pill.err { background: rgba(255,80,80,.18); color: #f88; }
+    .tab-active { background: rgba(255,255,255,.08); border-radius: 6px; }
+  </style>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="./app.js"></script>
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ccsniff",
-  "version": "1.0.25",
+  "version": "1.0.27",
   "description": "Watch Claude Code JSONL output files and emit structured events as a Node.js EventEmitter",
   "type": "module",
   "main": "./src/index.js",
@@ -14,8 +14,13 @@
     "ccsniff": "./src/cli.js"
   },
   "files": [
-    "src/"
+    "src/",
+    "gui/"
   ],
+  "scripts": {
+    "test": "node test.js",
+    "gui": "node src/cli.js gui"
+  },
   "keywords": [
     "claude",
     "claude-code",

package/src/bm25.js

@@ -0,0 +1,69 @@
+const STOP = new Set(['the','a','an','and','or','but','of','to','in','on','for','is','it','this','that','with','as','by','at','be','from']);
+
+export function tokenize(s) {
+  if (!s) return [];
+  const out = [];
+  const re = /[A-Za-z0-9_]{2,}/g;
+  let m;
+  while ((m = re.exec(String(s).toLowerCase())) !== null) {
+    if (!STOP.has(m[0])) out.push(m[0]);
+  }
+  return out;
+}
+
+export function buildIndex(docs, getText) {
+  const N = docs.length;
+  const df = new Map();
+  const lens = new Array(N);
+  const tfs = new Array(N);
+  let total = 0;
+  for (let i = 0; i < N; i++) {
+    const toks = tokenize(getText ? getText(docs[i]) : docs[i]);
+    const tf = new Map();
+    for (const t of toks) tf.set(t, (tf.get(t) || 0) + 1);
+    for (const t of tf.keys()) df.set(t, (df.get(t) || 0) + 1);
+    tfs[i] = tf;
+    lens[i] = toks.length;
+    total += toks.length;
+  }
+  const avgdl = total / Math.max(1, N);
+  const idf = new Map();
+  for (const [t, n] of df) idf.set(t, Math.log(1 + (N - n + 0.5) / (n + 0.5)));
+  return { N, avgdl, idf, tfs, lens, docs };
+}
+
+export function search(idx, query, { k1 = 1.5, b = 0.75, limit = 50 } = {}) {
+  const qToks = [...new Set(tokenize(query))];
+  if (!qToks.length) return [];
+  const scores = new Float64Array(idx.N);
+  const matched = new Array(idx.N);
+  for (const t of qToks) {
+    const w = idx.idf.get(t);
+    if (w === undefined) continue;
+    for (let i = 0; i < idx.N; i++) {
+      const f = idx.tfs[i].get(t);
+      if (!f) continue;
+      const dl = idx.lens[i];
+      const norm = 1 - b + b * (dl / (idx.avgdl || 1));
+      const s = w * ((f * (k1 + 1)) / (f + k1 * norm));
+      scores[i] += s;
+      if (!matched[i]) matched[i] = [];
+      matched[i].push(t);
+    }
+  }
+  const ranked = [];
+  for (let i = 0; i < idx.N; i++) if (scores[i] > 0) ranked.push({ i, score: scores[i], terms: matched[i] });
+  ranked.sort((a, b) => b.score - a.score);
+  return ranked.slice(0, limit);
+}
+
+export function snippet(text, terms, max = 240) {
+  if (!text) return '';
+  const lc = text.toLowerCase();
+  let pos = -1;
+  for (const t of terms || []) { const p = lc.indexOf(t); if (p >= 0 && (pos < 0 || p < pos)) pos = p; }
+  if (pos < 0) return text.slice(0, max);
+  const start = Math.max(0, pos - 60);
+  const end = Math.min(text.length, start + max);
+  return (start > 0 ? '…' : '') + text.slice(start, end) + (end < text.length ? '…' : '');
+}

package/src/cli.js

@@ -2,6 +2,26 @@
 import { JsonlReplayer, rollup } from './index.js';
 import path from 'path';
 
+if (process.argv[2] === 'gui') {
+  const { createServer } = await import('./gui-server.js');
+  const args = process.argv.slice(3);
+  let port = 0, host = '127.0.0.1', open = false;
+  for (let i = 0; i < args.length; i++) {
+    const a = args[i];
+    if (a === '--port') port = parseInt(args[++i], 10) || 0;
+    else if (a === '--host') host = args[++i];
+    else if (a === '--open') open = true;
+  }
+  if (!port) port = 4791;
+  const { url } = await createServer({ port, host });
+  process.stdout.write(`ccsniff gui · ${url}\n`);
+  if (open) {
+    const cmd = process.platform === 'win32' ? `start "" "${url}"` : process.platform === 'darwin' ? `open "${url}"` : `xdg-open "${url}"`;
+    try { (await import('child_process')).exec(cmd); } catch {}
+  }
+  process.stdin.resume();
+} else {
+
 const FLAGS = {
   string: ['since', 'until', 'before', 'after', 'grep', 'igrep', 'cwd', 'project', 'role', 'type', 'tool', 'session', 'sid', 'parent', 'rollup', 'format', 'sort'],
   multi: ['grep', 'igrep', 'role', 'type', 'tool', 'session', 'sid', 'project', 'cwd'],
@@ -390,3 +410,4 @@ for (const ev of rows) process.stdout.write(formatRow(ev, opts));
 process.stderr.write(`# ${stats.events} events / ${stats.files} files / ${rows.length} matched\n`);
 
 }
+}

package/src/gui-server.js

@@ -0,0 +1,315 @@
+import http from 'http';
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { JsonlReplayer, JsonlWatcher } from './index.js';
+import { buildIndex, search, snippet, tokenize } from './bm25.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const GUI_DIR = path.join(__dirname, '..', 'gui');
+const MIME = { '.html': 'text/html; charset=utf-8', '.js': 'text/javascript; charset=utf-8', '.css': 'text/css; charset=utf-8', '.json': 'application/json', '.svg': 'image/svg+xml' };
+
+function blockText(b) {
+  if (!b) return '';
+  if (typeof b.text === 'string') return b.text;
+  if (typeof b.content === 'string') return b.content;
+  if (Array.isArray(b.content)) return b.content.map(c => c?.text || '').join('');
+  if (b.input) { try { return JSON.stringify(b.input); } catch { return ''; } }
+  return '';
+}
+
+function flattenEvent(ev, idx) {
+  const c = ev.conversation || {};
+  const b = ev.block || {};
+  return {
+    i: idx,
+    ts: ev.timestamp || 0,
+    sid: c.id || '',
+    parent: c.parentSid || null,
+    cwd: c.cwd || '',
+    project: path.basename(c.cwd || ''),
+    isSubagent: !!c.isSubagent,
+    role: ev.role,
+    type: b.type || null,
+    tool: b.name || null,
+    text: blockText(b),
+    isError: !!b.is_error || ev.role === 'streaming_error',
+    cost: b.total_cost_usd || null,
+    duration: b.duration_ms || null,
+    subtype: b.subtype || null,
+    model: b.model || null,
+  };
+}
+
+class Store {
+  constructor(projectsDir) {
+    this.projectsDir = projectsDir;
+    this.events = [];
+    this.errors = [];
+    this.fileBytes = 0;
+    this.fileCount = 0;
+    this.index = null;
+    this.lastBuilt = 0;
+    this.watcher = null;
+    this.sseClients = new Set();
+  }
+
+  loadOnce() {
+    const r = new JsonlReplayer(this.projectsDir);
+    let i = 0;
+    r.on('streaming_progress', ev => { this.events.push(flattenEvent(ev, i++)); });
+    r.on('streaming_error', ev => { this.errors.push({ ts: ev.timestamp, sid: ev.conversationId, error: ev.error, recoverable: ev.recoverable }); });
+    const stats = r.replay({});
+    this.fileCount = stats.files;
+    this.rebuildIndex();
+    return stats;
+  }
+
+  rebuildIndex() {
+    this.index = buildIndex(this.events, e => e.text);
+    this.lastBuilt = Date.now();
+  }
+
+  startLive() {
+    if (this.watcher) return;
+    this.watcher = new JsonlWatcher(this.projectsDir);
+    this.watcher.on('streaming_progress', ev => {
+      const fl = flattenEvent(ev, this.events.length);
+      this.events.push(fl);
+      this.broadcast('event', fl);
+    });
+    this.watcher.on('streaming_error', ev => {
+      const e = { ts: ev.timestamp, sid: ev.conversationId, error: ev.error, recoverable: ev.recoverable };
+      this.errors.push(e);
+      this.broadcast('error', e);
+    });
+    this.watcher.on('streaming_start', ev => this.broadcast('start', { sid: ev.conversationId, ts: ev.timestamp }));
+    this.watcher.on('streaming_complete', ev => this.broadcast('complete', { sid: ev.conversationId, ts: ev.timestamp }));
+    this.watcher.on('conversation_created', ev => this.broadcast('conversation', { conv: ev.conversation, ts: ev.timestamp }));
+    this.watcher.start();
+  }
+
+  stop() {
+    if (this.watcher) this.watcher.stop();
+    for (const r of this.sseClients) try { r.end(); } catch {}
+    this.sseClients.clear();
+  }
+
+  broadcast(kind, data) {
+    const payload = `event: ${kind}\ndata: ${JSON.stringify(data)}\n\n`;
+    for (const res of this.sseClients) { try { res.write(payload); } catch {} }
+  }
+
+  snapshot() {
+    const sids = new Set(), projects = new Set(), tools = new Map();
+    let earliest = Infinity, latest = 0, bytes = 0;
+    for (const e of this.events) {
+      sids.add(e.sid); if (e.project) projects.add(e.project);
+      if (e.tool) tools.set(e.tool, (tools.get(e.tool) || 0) + 1);
+      if (e.ts < earliest) earliest = e.ts;
+      if (e.ts > latest) latest = e.ts;
+      bytes += (e.text || '').length;
+    }
+    return {
+      events: this.events.length, sessions: sids.size, projects: projects.size,
+      tools: tools.size, errors: this.errors.length, files: this.fileCount,
+      bytes, earliest: earliest === Infinity ? 0 : earliest, latest, indexedAt: this.lastBuilt,
+    };
+  }
+
+  sessions() {
+    const map = new Map();
+    for (const e of this.events) {
+      let s = map.get(e.sid);
+      if (!s) { s = { sid: e.sid, project: e.project, cwd: e.cwd, parent: e.parent, isSubagent: e.isSubagent, first: e.ts, last: e.ts, events: 0, tools: 0, userTurns: 0, cost: 0, errors: 0 }; map.set(e.sid, s); }
+      s.events++;
+      if (e.ts < s.first) s.first = e.ts;
+      if (e.ts > s.last) s.last = e.ts;
+      if (e.type === 'tool_use') s.tools++;
+      if (e.role === 'user' && e.type === 'text') s.userTurns++;
+      if (e.cost) s.cost += e.cost;
+      if (e.isError) s.errors++;
+    }
+    return [...map.values()].sort((a, b) => b.last - a.last);
+  }
+
+  projects() {
+    const map = new Map();
+    for (const e of this.events) {
+      if (!e.project) continue;
+      let p = map.get(e.project);
+      if (!p) { p = { project: e.project, sessions: new Set(), events: 0, tools: 0, last: 0, errors: 0, cost: 0 }; map.set(e.project, p); }
+      p.events++;
+      p.sessions.add(e.sid);
+      if (e.type === 'tool_use') p.tools++;
+      if (e.ts > p.last) p.last = e.ts;
+      if (e.cost) p.cost += e.cost;
+      if (e.isError) p.errors++;
+    }
+    return [...map.values()].map(p => ({ ...p, sessions: p.sessions.size })).sort((a, b) => b.last - a.last);
+  }
+
+  tools() {
+    const map = new Map();
+    for (const e of this.events) {
+      if (!e.tool) continue;
+      let t = map.get(e.tool);
+      if (!t) { t = { tool: e.tool, count: 0, sessions: new Set(), errors: 0, last: 0 }; map.set(e.tool, t); }
+      t.count++;
+      t.sessions.add(e.sid);
+      if (e.isError) t.errors++;
+      if (e.ts > t.last) t.last = e.ts;
+    }
+    return [...map.values()].map(t => ({ ...t, sessions: t.sessions.size })).sort((a, b) => b.count - a.count);
+  }
+
+  timeline(bucketMs = 3600_000) {
+    const buckets = new Map();
+    for (const e of this.events) {
+      const k = Math.floor(e.ts / bucketMs) * bucketMs;
+      let b = buckets.get(k);
+      if (!b) { b = { t: k, events: 0, tools: 0, errors: 0, sessions: new Set() }; buckets.set(k, b); }
+      b.events++;
+      if (e.type === 'tool_use') b.tools++;
+      if (e.isError) b.errors++;
+      b.sessions.add(e.sid);
+    }
+    return [...buckets.values()].map(b => ({ ...b, sessions: b.sessions.size })).sort((a, b) => a.t - b.t);
+  }
+
+  stats() {
+    const role = {}, type = {}, model = {};
+    let cost = 0, dur = 0, results = 0;
+    for (const e of this.events) {
+      role[e.role || '?'] = (role[e.role || '?'] || 0) + 1;
+      type[e.type || '?'] = (type[e.type || '?'] || 0) + 1;
+      if (e.model) model[e.model] = (model[e.model] || 0) + 1;
+      if (e.cost) { cost += e.cost; results++; }
+      if (e.duration) dur += e.duration;
+    }
+    return { role, type, model, totalCostUsd: cost, totalDurationMs: dur, results };
+  }
+
+  errorsList() { return this.errors.slice(-200).reverse(); }
+
+  subagents() {
+    const tree = new Map();
+    for (const e of this.events) {
+      if (!e.isSubagent) continue;
+      const parent = e.parent || 'orphan';
+      let p = tree.get(parent);
+      if (!p) { p = { parent, children: new Map() }; tree.set(parent, p); }
+      let c = p.children.get(e.sid);
+      if (!c) { c = { sid: e.sid, project: e.project, events: 0, last: 0 }; p.children.set(e.sid, c); }
+      c.events++;
+      if (e.ts > c.last) c.last = e.ts;
+    }
+    return [...tree.values()].map(p => ({ parent: p.parent, children: [...p.children.values()] }));
+  }
+
+  search(q, { limit = 50, role, type, project, sid } = {}) {
+    if (!this.index) this.rebuildIndex();
+    const hits = search(this.index, q, { limit: limit * 4 });
+    const out = [];
+    for (const h of hits) {
+      const e = this.events[h.i];
+      if (role && e.role !== role) continue;
+      if (type && e.type !== type) continue;
+      if (project && e.project !== project) continue;
+      if (sid && !e.sid.startsWith(sid)) continue;
+      out.push({ ...e, score: h.score, terms: h.terms, snippet: snippet(e.text, h.terms) });
+      if (out.length >= limit) break;
+    }
+    return out;
+  }
+
+  events_filtered({ role, type, project, sid, tool, since, until, limit = 200, offset = 0, q } = {}) {
+    let arr = this.events;
+    if (q) {
+      const tokens = new Set(tokenize(q));
+      arr = arr.filter(e => { const t = tokenize(e.text); return [...tokens].every(x => t.includes(x)); });
+    }
+    arr = arr.filter(e => {
+      if (role && e.role !== role) return false;
+      if (type && e.type !== type) return false;
+      if (project && e.project !== project) return false;
+      if (sid && !e.sid.startsWith(sid)) return false;
+      if (tool && e.tool !== tool) return false;
+      if (since && e.ts < since) return false;
+      if (until && e.ts > until) return false;
+      return true;
+    });
+    return { total: arr.length, rows: arr.slice(offset, offset + limit) };
+  }
+}
+
+function send(res, code, body, type = 'application/json') {
+  res.writeHead(code, { 'Content-Type': type, 'Cache-Control': 'no-cache', 'Access-Control-Allow-Origin': '*' });
+  res.end(typeof body === 'string' || Buffer.isBuffer(body) ? body : JSON.stringify(body));
+}
+
+function serveStatic(req, res) {
+  const url = new URL(req.url, 'http://x');
+  let p = url.pathname === '/' ? '/index.html' : url.pathname;
+  const file = path.join(GUI_DIR, p);
+  if (!file.startsWith(GUI_DIR)) return send(res, 403, 'forbidden', 'text/plain');
+  fs.readFile(file, (err, buf) => {
+    if (err) return send(res, 404, 'not found', 'text/plain');
+    const ext = path.extname(file);
+    send(res, 200, buf, MIME[ext] || 'application/octet-stream');
+  });
+}
+
+function parseQuery(u) {
+  const q = {};
+  for (const [k, v] of u.searchParams) q[k] = v;
+  if (q.limit) q.limit = parseInt(q.limit, 10);
+  if (q.offset) q.offset = parseInt(q.offset, 10);
+  if (q.since) q.since = parseInt(q.since, 10);
+  if (q.until) q.until = parseInt(q.until, 10);
+  if (q.bucket) q.bucket = parseInt(q.bucket, 10);
+  return q;
+}
+
+export function createServer({ projectsDir, port = 0, host = '127.0.0.1' } = {}) {
+  const store = new Store(projectsDir);
+  store.loadOnce();
+  store.startLive();
+
+  const server = http.createServer((req, res) => {
+    const u = new URL(req.url, 'http://x');
+    const q = parseQuery(u);
+    const path = u.pathname;
+    if (!path.startsWith('/api/')) return serveStatic(req, res);
+    try {
+      if (path === '/api/snapshot') return send(res, 200, store.snapshot());
+      if (path === '/api/sessions') return send(res, 200, store.sessions());
+      if (path === '/api/projects') return send(res, 200, store.projects());
+      if (path === '/api/tools') return send(res, 200, store.tools());
+      if (path === '/api/timeline') return send(res, 200, store.timeline(q.bucket || 3600_000));
+      if (path === '/api/stats') return send(res, 200, store.stats());
+      if (path === '/api/errors') return send(res, 200, store.errorsList());
+      if (path === '/api/subagents') return send(res, 200, store.subagents());
+      if (path === '/api/events') return send(res, 200, store.events_filtered(q));
+      if (path === '/api/search') return send(res, 200, { query: q.q || '', results: q.q ? store.search(q.q, q) : [] });
+      if (path === '/api/reindex') { store.rebuildIndex(); return send(res, 200, { ok: true, at: store.lastBuilt }); }
+      if (path === '/api/stream') {
+        res.writeHead(200, { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', Connection: 'keep-alive', 'Access-Control-Allow-Origin': '*' });
+        res.write('event: hello\ndata: {}\n\n');
+        store.sseClients.add(res);
+        req.on('close', () => store.sseClients.delete(res));
+        return;
+      }
+      send(res, 404, { error: 'not found' });
+    } catch (e) {
+      send(res, 500, { error: String(e?.message || e) });
+    }
+  });
+
+  return new Promise(resolve => {
+    server.listen(port, host, () => {
+      const addr = server.address();
+      resolve({ server, store, url: `http://${host}:${addr.port}`, port: addr.port, close: () => { store.stop(); return new Promise(r => server.close(r)); } });
+    });
+  });
+}