syndes 0.1.0

package/dashboard/web/views/ledger.js

@@ -0,0 +1,164 @@
+/**
+ * Ledger — proof, not a data dump.
+ *
+ * The point of this page is that "tamper-evident" is something you can check
+ * rather than a claim you have to accept. So the verify result comes first, and
+ * the records read as sentences.
+ *
+ * Hashes are deliberately NOT in the table. A column of truncated hex teaches a
+ * reader nothing and pushes out the column that does. They live in the drawer,
+ * where someone who actually wants to check a link will look.
+ */
+
+import { api } from '../api.js';
+import { h, card, figure, table, chip, empty, drawer, dropdown, kv, bytes, when, clock, DASH } from '../ui.js';
+
+const KIND_LABEL = {
+  'prompt.submit': 'Prompt', 'tool.post': 'Tool call', 'tool.blocked': 'Permission stop',
+  'file.touch': 'File change', 'session.start': 'Session start', 'session.end': 'Session end',
+  'session.compact': 'Compaction', 'git.commit': 'Commit', 'coach.nudge': 'Coach nudge',
+  'ledger.seal': 'Day sealed', 'ledger.prune': 'Records pruned', 'ledger.genesis': 'Chain opened',
+  'ledger.install': 'Installed', 'ledger.tracking': 'Tracking changed',
+};
+
+/** Machine records. Present in the chain, useless in a list a human reads. */
+const HIDDEN = new Set(['usage.sample', 'tool.pre', 'turn.stop', 'turn.subagent_stop', 'turn.notify']);
+
+export async function render({ range }) {
+  const outlet = h('div.content--fit', {
+    style: 'display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:var(--s4);min-height:0',
+  });
+  await paint(outlet, { range, kind: 'meaningful' });
+  return outlet;
+}
+
+async function paint(outlet, filter) {
+  const params = { limit: '400', range: filter.range };
+  if (filter.kind && filter.kind !== 'meaningful' && filter.kind !== 'all') params.kind = filter.kind;
+
+  const [chain, verified] = await Promise.all([api.ledger(params), api.verify(true)]);
+
+  const visible = chain.records
+    .filter((record) => (filter.kind === 'meaningful' ? !HIDDEN.has(record.kind) : true))
+    .slice(-120)
+    .reverse();
+
+  outlet.replaceChildren(
+    proof(verified),
+    h('div.grid.g-4', {}, [
+      card(null, figure('Records', ((chain.height.seq ?? -1) + 1).toLocaleString())),
+      card(null, figure('Days', String(chain.days.length))),
+      card(null, figure('Sealed', String(chain.seals.length))),
+      card(null, figure('On disk', bytes(chain.usage.bytes))),
+    ]),
+    card('Activity', visible.length
+      ? h('div.scroll-y', { style: 'flex:1' }, [table(
+          ['Seq', 'Time', 'What happened', 'Session'],
+          visible.map((record) => [
+            String(record.seq),
+            clock(record.ts),
+            h('div', { style: 'display:flex;align-items:center;gap:10px' }, [
+              chip(KIND_LABEL[record.kind] ?? record.kind),
+              h('span', { style: 'color:var(--ink-2)', text: sentence(record) }),
+            ]),
+            record.session ? record.session.slice(0, 8) : DASH,
+          ]),
+          { align: ['right', null, null, null], onRow: (index) => openRecord(visible[index]) },
+        )])
+      : empty('Nothing in this range.'), {
+      className: 'fill',
+      note: 'newest first · click a row to see its place in the chain',
+      actions: kindFilter(filter, outlet),
+    }),
+  );
+}
+
+function proof(verified) {
+  const ok = verified.ok;
+  return card(null, [
+    h('div', { style: 'display:flex;align-items:center;gap:18px;flex-wrap:wrap' }, [
+      h('div', {
+        style: `width:52px;height:52px;border-radius:999px;display:grid;place-items:center;flex:none;background:var(--${ok ? 'lime' : 'orange'});color:var(--black);font-size:24px;font-weight:700`,
+        text: ok ? '✓' : '!',
+      }),
+      h('div', {}, [
+        h('div', { style: 'font-size:19px;font-weight:700;letter-spacing:-0.01em', text: ok ? 'The chain is intact' : `${verified.problems.length} problem(s) found` }),
+        h('div', { style: 'font-size:13px;color:var(--ink-2);margin-top:3px', text: ok
+          ? `Every one of ${verified.records.toLocaleString()} records still hashes to the one before it, across ${verified.days} day(s).`
+          : verified.problems[0]?.detail ?? '' }),
+      ]),
+      h('div', { style: 'margin-left:auto;display:flex;gap:8px;flex-wrap:wrap' }, [
+        chip(`${verified.checkedSeals} seals checked`),
+        chip(`tip ${verified.tip?.seq ?? '—'}`),
+      ]),
+    ]),
+  ]);
+}
+
+function kindFilter(filter, outlet) {
+  return dropdown({
+    onCard: true,
+    value: filter.kind,
+    options: [
+      { id: 'meaningful', label: 'What a person did', hint: 'hides machine records' },
+      { id: 'all', label: 'Everything', hint: 'including usage samples' },
+      { id: 'prompt.submit', label: 'Prompts only' },
+      { id: 'file.touch', label: 'File changes only' },
+      { id: 'tool.blocked', label: 'Permission stops only' },
+    ],
+    onChange: async (value) => { filter.kind = value; await paint(outlet, filter); },
+  });
+}
+
+/** Plain language. The envelope is in the drawer; the list is for reading. */
+function sentence(record) {
+  const data = record.data ?? {};
+  switch (record.kind) {
+    case 'prompt.submit': return data.text ? clip(data.text) : `${data.words} words`;
+    case 'tool.post': return `${data.tool}${data.target ? ` · ${clip(data.target, 44)}` : ''}${data.failed ? ' · failed' : ''}`;
+    case 'tool.blocked': return `${data.tool}${data.target ? ` · ${clip(data.target, 40)}` : ''}`;
+    case 'file.touch': return `${clip(data.path, 48)}${data.readFirst ? '' : ' · not read first'}`;
+    case 'session.start': return data.projectName ?? data.source ?? '';
+    case 'session.end': return data.reason ?? '';
+    case 'session.compact': return data.trigger === 'auto' ? 'window ran out' : 'by hand';
+    case 'git.commit': return clip(data.subject, 50);
+    case 'coach.nudge': return clip(data.evidence ?? data.rule, 60);
+    case 'ledger.seal': return `${data.day} · ${data.count} records`;
+    case 'ledger.prune': return `${data.days?.length ?? 0} day(s) removed, declared in the chain`;
+    default: return '';
+  }
+}
+
+function clip(text, limit = 70) {
+  if (typeof text !== 'string') return '';
+  const flat = text.replace(/\s+/g, ' ').trim();
+  return flat.length > limit ? `${flat.slice(0, limit - 1)}…` : flat;
+}
+
+/** Where the hashes live — for someone who actually wants to check a link. */
+function openRecord(record) {
+  drawer(KIND_LABEL[record.kind] ?? record.kind, `Sequence ${record.seq} · ${when(record.ts)}`, [
+    h('div', { style: 'font-size:14px', text: sentence(record) || 'No further detail recorded.' }),
+    h('div.kv', {}, [
+      kv('Kind', record.kind),
+      kv('Session', record.session ?? DASH),
+      kv('Recorded', new Date(record.ts).toISOString()),
+    ]),
+    h('div', {}, [
+      h('h3.card__title', { style: 'margin-bottom:12px', text: 'Chain link' }),
+      h('div', { style: 'display:grid;gap:10px' }, [
+        hashRow('Follows', record.prev),
+        hashRow('This record', record.hash),
+      ]),
+      h('p', { style: 'font-size:12px;color:var(--ink-3);margin-top:12px;line-height:1.6',
+        text: 'Each hash covers the record and the one before it. Changing any field here would break every hash after it, which is what syndes verify walks.' }),
+    ]),
+  ]);
+}
+
+function hashRow(label, value) {
+  return h('div', {}, [
+    h('div', { style: 'font-size:11px;color:var(--ink-3);margin-bottom:4px', text: label }),
+    h('div', { style: 'font-family:var(--mono);font-size:11px;word-break:break-all;background:var(--surface-2);padding:10px 12px;border-radius:12px', text: value }),
+  ]);
+}

package/dashboard/web/views/overview.js

@@ -0,0 +1,214 @@
+/**
+ * Overview — everything you need to know before you click anything.
+ *
+ * Four questions, in the order people actually ask them:
+ *   1. Am I working well?     the score, and what dragged it
+ *   2. What did it cost me?   throughput and spend, with the shape of the trend
+ *   3. When did I work?       a day-by-day timeline
+ *   4. What should I change?  the top findings, with their evidence
+ *
+ * Anything that does not answer one of those four is not on this page.
+ */
+
+import { api } from '../api.js';
+import { h, card, figure, trend, chip, dot, meter, legend, empty, compact, usd, duration, percent } from '../ui.js';
+import { dial, capsules, timeline, dualLine } from '../charts.js';
+
+/** Tone by what a tool costs you, which is what the colour is claiming. */
+const FAMILY_TONE = {
+  read: 'lime', search: 'lime', delegate: 'lime', plan: 'lime',
+  edit: 'white', execute: 'white', web: 'white', mcp: 'white', other: 'white',
+};
+
+export async function render({ range, go }) {
+  const [data, practices] = await Promise.all([api.overview(range), api.practices()]);
+
+  if ((data.ledger?.seq ?? -1) < 0) return firstRun();
+
+  // Fixed top row, and the bottom row takes whatever is left — so the view is
+  // exactly one screen and the findings list scrolls inside its own card.
+  return h('div.content--fit', {
+    style: 'display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--s4);min-height:0',
+  }, [
+    h('div.grid.g-3', {}, [scoreCard(data), throughputCard(data), timelineCard(data)]),
+    h('div.grid.fill', { style: 'grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)' }, [
+      distributionCard(data),
+      fixCard(practices.findings, go),
+    ]),
+  ]);
+}
+
+/**
+ * Nothing recorded yet.
+ *
+ * An empty dashboard with five empty charts tells the user their tool is
+ * broken. It is not — it has simply never been given anything, and the fix is
+ * one command.
+ */
+function firstRun() {
+  return h('div', { style: 'display:grid;place-items:center;height:100%' }, [
+    h('div', { style: 'max-width:520px;display:grid;gap:18px;justify-items:center;text-align:center' }, [
+      h('div', { style: 'font-size:26px;font-weight:750;letter-spacing:-0.02em;text-transform:uppercase', text: 'Nothing recorded yet' }),
+      h('p', { style: 'color:var(--ink-2);line-height:1.7;margin:0', text: 'syndes has not been wired into Claude Code on this machine, so there is nothing to show. Installing takes a second and starts recording from your next session.' }),
+      h('code', {
+        style: 'font-family:var(--mono);font-size:14px;color:var(--black);background:var(--lime);padding:12px 20px;border-radius:var(--r-pill)',
+        text: 'syndes install',
+      }),
+      h('p', { style: 'color:var(--ink-3);font-size:12px;margin:0', text: 'Already installed? Open a Claude Code session — the first prompt starts the chain.' }),
+    ]),
+  ]);
+}
+
+// ── 1. Score ───────────────────────────────────────────────────────────────
+
+function scoreCard({ score, scoreDelta }) {
+  const rows = score.pillars.map((pillar) => h('div.pillar', {}, [
+    h('span.pillar__n', { text: pillar.score === null ? '—' : String(pillar.score) }),
+    h('div', {}, [
+      h('div.pillar__name', { text: pillar.label }),
+      meter((pillar.score ?? 0) / 100, pillar.score === null ? 'white' : pillar.score >= 70 ? 'lime' : pillar.score < 45 ? 'orange' : 'white'),
+    ]),
+    chip(String(pillar.weight)),
+  ]));
+
+  return card('Score', [
+    h('div', { style: 'display:flex;align-items:center;gap:22px' }, [
+      h('div', { style: 'position:relative;display:grid;place-items:center' }, [
+        dial(score.total, { size: 132 }),
+        h('div', { style: 'position:absolute;display:grid;justify-items:center;gap:1px' }, [
+          h('div', { style: 'font-size:34px;font-weight:750;letter-spacing:-0.04em;line-height:1', text: score.total === null ? '—' : String(score.total) }),
+          h('div', { style: 'font-size:10px;color:var(--ink-3)', text: 'OF 100' }),
+        ]),
+      ]),
+      h('div', { style: 'display:grid;gap:8px' }, [
+        scoreDelta === null ? null : trend(score.total, score.total - scoreDelta, { format: (value) => `${Math.round(value)} pts` }),
+        chip(`${score.confidence} confidence`),
+      ]),
+    ]),
+    h('div.pillars', {}, rows),
+  ], { note: 'weighted' });
+}
+
+// ── 2. Throughput and spend ────────────────────────────────────────────────
+
+/**
+ * Which agent the work came from.
+ *
+ * Shown only when there is more than one: a single-agent user does not need to
+ * be told every day that all their work came from the one tool they use.
+ */
+function sourceChips(metrics) {
+  const sources = Object.entries(metrics.volume?.bySource ?? {})
+    .filter(([, bucket]) => bucket.toolCalls || bucket.prompts)
+    .sort((a, b) => b[1].records - a[1].records);
+  if (sources.length < 2) return [];
+  return sources.map(([id, bucket]) => chip(`${NAMES[id] ?? id} · ${compact(bucket.toolCalls)}`));
+}
+
+const NAMES = { 'claude-code': 'Claude Code', codex: 'Codex' };
+
+function throughputCard({ headline, previousHeadline: before, series, cost, metrics }) {
+  return card('Throughput', [
+    h('div.pair', {}, [
+      figure('Active time', duration(headline.activeMs), { small: true }),
+      figure('Spend', usd(headline.usd), { small: true }),
+    ]),
+    // One trend line, not one per figure: repeating "no prior period" twice
+    // spends two rows saying nothing.
+    trend(headline.toolCalls, before.toolCalls, { format: (value) => `${compact(value)} calls` }),
+    h('div', { style: 'flex:1;min-height:0;display:grid;align-items:center' }, [
+      dualLine(
+        series.map((day) => day.toolCalls),
+        series.map((day) => day.tokens / 1000),
+        { height: 110 },
+      ),
+    ]),
+    legend([
+      { tone: 'lime', label: 'tool calls' },
+      { tone: 'orange', label: 'tokens' },
+    ]),
+    h('div', { style: 'display:flex;gap:10px;flex-wrap:wrap' }, [
+      chip(`${percent(headline.cacheHitRate)} from cache`, 'lime'),
+      chip(`${compact(headline.tokens)} tokens`),
+      cost.estimated ? chip('estimated pricing') : null,
+      ...sourceChips(metrics),
+    ]),
+  ]);
+}
+
+// ── 3. When the work happened ──────────────────────────────────────────────
+
+function timelineCard({ series }) {
+  const days = series.slice(-9);
+  const maxMinutes = Math.max(...days.map((day) => day.activeMs / 60_000), 10);
+  const step = Math.max(10, Math.ceil(maxMinutes / 4 / 10) * 10);
+  const ticks = [];
+  for (let value = 0; value <= maxMinutes + step; value += step) ticks.push({ at: value, label: String(value) });
+
+  const bars = days.map((day) => ({
+    row: day.day.slice(5).replace('-', '.'),
+    start: 0,
+    end: day.activeMs / 60_000,
+    value: `${Math.round(day.activeMs / 60_000)}m`,
+    empty: 'no activity',
+    // Orange marks a day the context window ran out — the thing worth spotting
+    // in a week at a glance.
+    tone: day.compacts > 0 ? 'orange' : 'lime',
+  }));
+
+  return card('Active minutes by day', [
+    days.length
+      ? timeline(bars, { min: 0, max: Math.max(...ticks.map((tick) => tick.at)), ticks })
+      : empty('Nothing recorded in this range'),
+    legend([
+      { tone: 'lime', label: 'clean day' },
+      { tone: 'orange', label: 'context ran out' },
+    ], days.reduce((sum, day) => sum + Math.round(day.activeMs / 60_000), 0)),
+  ]);
+}
+
+// ── 4. Where the calls went ────────────────────────────────────────────────
+
+function distributionCard({ metrics }) {
+  const families = Object.entries(metrics.tools.byFamily ?? {})
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, 7)
+    .map(([name, value]) => ({ label: name, value, tone: FAMILY_TONE[name] ?? 'white' }));
+
+  const friction = [];
+  if (metrics.friction.blocks) friction.push({ label: 'blocked', value: metrics.friction.blocks, tone: 'orange' });
+  if (metrics.rework.errors) friction.push({ label: 'failed', value: metrics.rework.errors, tone: 'orange' });
+
+  const items = [...families, ...friction];
+
+  return card('Where the calls went', [
+    h('div.card__scroll', { style: 'display:grid;align-content:center' }, [
+      items.length ? capsules(items, { height: 170 }) : empty('No tool calls in this range'),
+    ]),
+    legend([
+      { tone: 'lime', label: 'cheap to run' },
+      { tone: 'white', label: 'edits and commands' },
+      { tone: 'orange', label: 'friction' },
+    ], compact(metrics.tools.calls)),
+  ]);
+}
+
+// ── 5. What to change ──────────────────────────────────────────────────────
+
+function fixCard(findings, go) {
+  const live = findings.filter((finding) => !finding.muted).slice(0, 3);
+
+  return card('What to change', h('div.card__scroll', {}, live.length
+    ? live.map((finding) => h('div.finding', {}, [
+        h('div.finding__head', {}, [
+          dot(finding.severity >= 3 ? 'orange' : finding.severity === 2 ? 'white' : 'lime'),
+          h('span.finding__title', { text: finding.title }),
+          chip(finding.pillar),
+        ]),
+        h('div.finding__evidence', { text: finding.evidence }),
+        h('div.finding__fix', {}, [h('span', { text: finding.fix })]),
+      ]))
+    : [empty('No rule found a pattern worth changing.')]), {
+    actions: h('button.btn.btn--ghost.btn--sm', { text: 'All habits', style: 'margin-left:auto', onclick: () => go('habits') }),
+  });
+}

package/dashboard/web/views/sessions.js

@@ -0,0 +1,133 @@
+/**
+ * Sessions — where the time actually went.
+ *
+ * The columns are chosen so the interesting row is visible without reading:
+ * a long session with few prompts and no edits is the one worth opening, and
+ * duration sits next to prompts and edits for exactly that reason.
+ *
+ * The drawer shows a readable timeline, never raw records. Anyone who wants the
+ * envelope with its hashes goes to the Ledger, where that is the point.
+ */
+
+import { api } from '../api.js';
+import { h, card, figure, table, chip, dot, empty, drawer, kv, compact, duration, when, clock, DASH } from '../ui.js';
+
+const MARK = {
+  'session.start': '▸', 'session.end': '◾', 'session.compact': '⊗',
+  'prompt.submit': '»', 'turn.stop': '·', 'turn.subagent_stop': '·', 'turn.notify': '!',
+  'tool.pre': '→', 'tool.post': '←', 'tool.blocked': '⏸',
+  'file.touch': '✎', 'git.commit': '⎇', 'coach.nudge': '★',
+};
+
+/** Records that exist for the metrics, not for a human reading a timeline. */
+const NOISE = new Set(['usage.sample', 'tool.pre']);
+
+export async function render({ range }) {
+  const sessions = await api.sessions(range);
+  if (!sessions.length) return card('Sessions', empty('No sessions in this range.'));
+
+  const totalMs = sessions.reduce((sum, session) => sum + session.durationMs, 0);
+  const rough = sessions.filter((session) => session.compacts > 0 || session.errors > 0).length;
+
+  const rows = sessions.map((session) => [
+    h('div', { style: 'display:flex;align-items:center;gap:10px' }, [
+      dot(health(session)),
+      h('span', { text: when(session.startedAt) }),
+    ]),
+    session.projectName ?? DASH,
+    duration(session.durationMs),
+    String(session.prompts),
+    compact(session.toolCalls),
+    String(session.writes),
+    session.blocks ? String(session.blocks) : DASH,
+    compact(session.tokens),
+  ]);
+
+  return h('div.content--fit', {
+    style: 'display:grid;grid-template-rows:auto minmax(0,1fr);gap:var(--s4);min-height:0',
+  }, [
+    h('div.grid.g-4', {}, [
+      card(null, figure('Sessions', sessions.length)),
+      card(null, figure('Time in session', duration(totalMs))),
+      card(null, figure('Needed attention', rough, { unit: rough === 1 ? 'session' : 'sessions' })),
+      card(null, figure('Longest', duration(Math.max(...sessions.map((session) => session.durationMs))))),
+    ]),
+
+    card('Sessions', [
+      h('div.scroll-y', { style: 'flex:1' }, [table(
+        ['Started', 'Project', 'Duration', 'Prompts', 'Tools', 'Edits', 'Blocked', 'Tokens'],
+        rows,
+        {
+          align: [null, null, 'right', 'right', 'right', 'right', 'right', 'right'],
+          onRow: (index) => openSession(sessions[index]),
+        },
+      )]),
+      h('div.legend', {}, [
+        h('span.legend__item', {}, [dot('lime'), h('span', { text: 'clean' })]),
+        h('span.legend__item', {}, [dot('orange'), h('span', { text: 'context ran out or tools failed' })]),
+        h('span.legend__total', { text: 'click a row for the timeline' }),
+      ]),
+    ], { note: `${sessions.length} in range`, className: 'fill' }),
+  ]);
+}
+
+function health(session) {
+  return session.compacts > 0 || session.errors > 2 ? 'orange' : 'lime';
+}
+
+async function openSession(session) {
+  const body = h('div', {}, [h('div.skel', { style: 'height:220px' })]);
+  drawer(session.projectName ?? 'Session', `${when(session.startedAt)} · ${duration(session.durationMs)}`, body);
+
+  const { events } = await api.session(session.id);
+  const readable = events.filter((record) => !NOISE.has(record.kind));
+
+  body.replaceChildren(
+    h('div.grid.g-3', { style: 'gap:14px' }, [
+      figure('Prompts', session.prompts, { small: true }),
+      figure('Tool calls', compact(session.toolCalls), { small: true }),
+      figure('Files', session.files, { small: true }),
+    ]),
+    h('div.kv', {}, [
+      kv('Model', session.models.join(', ') || DASH),
+      kv('Tokens', compact(session.tokens)),
+      kv('Permission stops', String(session.blocks)),
+      kv('Compactions', String(session.compacts)),
+      kv('Tool failures', String(session.errors)),
+      kv('Ended', session.ended ? session.reason : 'still open'),
+    ]),
+    h('div', {}, [
+      h('h3.card__title', { style: 'margin-bottom:12px', text: `Timeline · ${readable.length} events` }),
+      h('div.tl', {}, readable.map((record) => h('div.tl__row', {}, [
+        h('span.tl__t', { text: clock(record.ts) }),
+        h('span.tl__x', { text: MARK[record.kind] ?? '·' }),
+        h('span.tl__d', { text: describe(record), title: describe(record) }),
+      ]))),
+    ]),
+  );
+}
+
+/** One plain sentence per record. No JSON reaches this view. */
+function describe(record) {
+  const data = record.data ?? {};
+  switch (record.kind) {
+    case 'session.start': return `Session started (${data.source})`;
+    case 'session.end': return `Session ended (${data.reason})`;
+    case 'session.compact': return data.trigger === 'auto' ? 'Context ran out and was summarised' : 'Context compacted by hand';
+    case 'prompt.submit': return data.text ?? `Prompt · ${data.words} words`;
+    case 'tool.post': return `${data.tool}${data.target ? ` · ${short(data.target)}` : ''}${data.failed ? ' · failed' : ''}`;
+    case 'tool.blocked': return `Waiting for permission · ${data.tool}`;
+    case 'file.touch': return `${data.op === 'write' ? 'Wrote' : 'Edited'} ${short(data.path)}${data.readFirst ? '' : ' · not read first'}`;
+    case 'git.commit': return `Commit · ${data.subject}`;
+    case 'turn.notify': return data.message ?? 'Notification';
+    case 'coach.nudge': return `Coach · ${data.evidence ?? data.rule}`;
+    case 'turn.stop': return 'Turn finished';
+    default: return record.kind.replace(/\./g, ' ');
+  }
+}
+
+function short(path) {
+  if (typeof path !== 'string') return DASH;
+  const parts = path.split(/[\\/]/);
+  return parts.length > 2 ? `…/${parts.slice(-2).join('/')}` : path;
+}