@zerwiz/ymir 0.1.34 → 0.1.35

package/apps/hlidskjalf/src/gates/Runes.tsx

@@ -0,0 +1,116 @@
+import { useMemo, useState } from 'react';
+import { useYmir } from '../state/store';
+import { useUI } from '../state/ui';
+import { TraceRow } from '../components/TraceRow';
+import { MetricTile } from '../components/MetricTile';
+import type { RuneEntry } from '../types';
+
+const LEVELS = ['all', 'ok', 'info', 'warn', 'danger'] as const;
+
+export function Runes() {
+  const runes = useYmir((s) => s.runes);
+  const realm = useYmir((s) => s.realm);
+  const { toast } = useUI();
+  const [level, setLevel] = useState<(typeof LEVELS)[number]>('all');
+  const [q, setQ] = useState('');
+
+  function exportJsonl() {
+    const jsonl = runes.map((r) => JSON.stringify(r)).join('\n');
+    const blob = new Blob([jsonl], { type: 'application/x-ndjson' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `runes-${realm}-${new Date().toISOString().slice(0, 10)}.jsonl`;
+    a.click();
+    URL.revokeObjectURL(url);
+    toast({ kind: 'ok', title: 'Runes exported', body: `${runes.length} entries · JSONL` });
+  }
+
+  const shown = useMemo(
+    () =>
+      runes.filter((r) => {
+        const levelOk = level === 'all' || r.level === level;
+        const qOk =
+          q.trim().length === 0 ||
+          [r.agent, r.module, r.event, r.order, r.checksum]
+            .join(' ')
+            .toLowerCase()
+            .includes(q.toLowerCase());
+        return levelOk && qOk;
+      }),
+    [runes, level, q],
+  );
+
+  return (
+    <>
+      <div className="stage-head">
+        <div>
+          <h1 className="stage-title">Runes</h1>
+          <p className="stage-deck">
+            Append-only ledger · a rune carved stays carved · checksum chain verified
+          </p>
+        </div>
+        <button className="btn" onClick={exportJsonl}>
+          <span aria-hidden="true">ᚱ</span> Export JSONL
+        </button>
+      </div>
+
+      <div className="metric-grid" style={{ marginBottom: 'var(--ymir-space-4)' }}>
+        <MetricTile label="Entries" value={runes.length} delta="append-strict" />
+        <MetricTile label="Chain status" value={runes.length ? 'VALID' : 'EMPTY'} tone={runes.length ? 'var(--ymir-ok)' : 'var(--ymir-warn)'} delta={`head ${runes[0]?.checksum?.slice(0, 6) ?? '—'}`} />
+        <MetricTile label="Warnings" value={runes.filter((r) => r.level === 'warn').length} tone="var(--ymir-warn)" delta="degraded" />
+        <MetricTile label="Failures" value={runes.filter((r) => r.level === 'danger').length} tone="var(--ymir-danger)" delta="sealed safely" />
+      </div>
+
+      <section className="panel">
+        <div className="panel-head">
+          <div className="panel-title">
+            <span className="glyph" aria-hidden="true">ᚱ</span>
+            Ledger
+          </div>
+          <div className="row">
+            <div className="stream-tabs" role="group" aria-label="Level filter">
+              {LEVELS.map((l) => (
+                <button
+                  key={l}
+                  className="stream-tab"
+                  aria-pressed={level === l}
+                  onClick={() => setLevel(l)}
+                >
+                  {l}
+                </button>
+              ))}
+            </div>
+            <label className="search" style={{ maxWidth: 220, height: 30 }}>
+              <span aria-hidden="true">ᛊ</span>
+              <input
+                value={q}
+                onChange={(e) => setQ(e.target.value)}
+                placeholder="filter…"
+                aria-label="Filter runes"
+              />
+            </label>
+          </div>
+        </div>
+        <div className="panel-body flush">
+          <div className="trace-row" style={{ color: 'var(--ymir-text-2)', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.1em' }} role="row">
+            <span>timestamp</span>
+            <span>agent</span>
+            <span>module</span>
+            <span>event</span>
+            <span style={{ textAlign: 'right' }}>checksum</span>
+          </div>
+          {shown.map((r: RuneEntry) => (
+            <TraceRow key={r.id} rune={r} />
+          ))}
+          {shown.length === 0 ? (
+            <div className="empty">
+              <span className="glyph" aria-hidden="true">ᚱ</span>
+              <p>No rune matches the filter.</p>
+            </div>
+          ) : null}
+        </div>
+      </section>
+    </>
+  );
+}

package/apps/hlidskjalf/src/gates/Runtime.tsx

@@ -0,0 +1,106 @@
+import { useYmir } from '../state/store';
+import { StatusChip } from '../components/Status';
+
+/**
+ * Runtime — the Sága session digest as injected at session open (plan 29).
+ * Reads `/api/runtime` (bin/saga-session-start.sh); when nothing is loaded it
+ * says so. Read-only: the digest is what Brokk received, not an editor.
+ */
+export function Runtime() {
+  const runtime = useYmir((s) => s.runtime);
+
+  const digest =
+    runtime?.digest ||
+      'Digest not loaded — start the gate API (`npm run api`) and sign in live.';
+
+  const m = runtime?.markers;
+
+  return (
+    <>
+      <div className="stage-head">
+        <div>
+          <h1 className="stage-title">Runtime</h1>
+          <p className="stage-deck">
+            Sága, the seeress · the digest injected at session open · {runtime?.doc ?? 'docs/session-start.md'}
+          </p>
+        </div>
+        <div className="row">
+          <StatusChip status={runtime ? 'nominal' : 'down'} />
+        </div>
+      </div>
+
+      <div className="gate-grid" style={{ gridTemplateColumns: 'minmax(0, 1fr) 320px' }}>
+        <section className="panel">
+          <div className="panel-head">
+            <div className="panel-title">
+              <span className="glyph" aria-hidden="true">ᛖ</span>
+              Session digest
+            </div>
+            <span className="mono dim" style={{ fontSize: 10 }}>
+              {runtime ? 'live · saga-session-start.sh' : 'offline'}
+            </span>
+          </div>
+          <div className="panel-body flush">
+            <pre
+              className="mono"
+              style={{
+                margin: 0,
+                padding: 'var(--ymir-space-3)',
+                fontSize: 12,
+                lineHeight: 1.55,
+                whiteSpace: 'pre-wrap',
+                color: 'var(--ymir-text-1)',
+                overflow: 'auto',
+                maxHeight: 460,
+              }}
+            >
+              {digest}
+            </pre>
+          </div>
+        </section>
+
+        <aside className="col" style={{ gap: 'var(--ymir-space-4)' }}>
+          <section className="panel">
+            <div className="panel-head">
+              <div className="panel-title">
+                <span className="glyph" aria-hidden="true">ᛜ</span>
+                Markers
+              </div>
+            </div>
+            <div className="panel-body col" style={{ gap: 8, fontSize: 13 }}>
+              <div className="row-between">
+                <span className="muted">lock (Gleipnir)</span>
+                <span className="mono">{m?.lock || '—'}</span>
+              </div>
+              <div className="row-between">
+                <span className="muted">started</span>
+                <span className="mono" style={{ color: m?.started ? 'var(--ymir-ok)' : 'var(--ymir-warn)' }}>
+                  {m?.started ? 'yes' : 'no'}
+                </span>
+              </div>
+              <div className="row-between">
+                <span className="muted">armed (Sýn)</span>
+                <span className="mono" style={{ color: m?.armed ? 'var(--ymir-ok)' : 'var(--ymir-warn)' }}>
+                  {m?.armed ? 'yes' : 'no'}
+                </span>
+              </div>
+            </div>
+          </section>
+
+          <section className="panel">
+            <div className="panel-head">
+              <div className="panel-title">
+                <span className="glyph" aria-hidden="true">ᛊ</span>
+                The mechanism
+              </div>
+            </div>
+            <div className="panel-body col" style={{ gap: 6, fontSize: 12, color: 'var(--ymir-text-1)' }}>
+              <span>Run-tier harnesses execute the digest before the first turn; the result is injected as hidden context.</span>
+              <span className="mono dim">docs/session-start.md · docs/lore.md §XII</span>
+            </div>
+          </section>
+        </aside>
+      </div>
+    </>
+  );
+}

package/apps/hlidskjalf/src/gates/Sessions.tsx

@@ -0,0 +1,109 @@
+import { useYmir } from '../state/store';
+import { StatusChip } from '../components/Status';
+import { MetricTile } from '../components/MetricTile';
+import { VISUALIZER_URL } from '../data/metadata';
+
+function tone(status: string | null) {
+  return status === 'success' ? 'nominal' : status === 'fail' ? 'down' : 'degraded';
+}
+
+/** Sessions — every Smiðja factory run, from the repo's own smidja.db (W0080). */
+export function Sessions() {
+  const rows = useYmir((s) => s.smidjaSessions);
+  const db = useYmir((s) => s.smidjaDb);
+  const live = useYmir((s) => s.live);
+  const setGate = useYmir((s) => s.setGate);
+  const select = useYmir((s) => s.setSelectedSession);
+  const load = useYmir((s) => s.loadSessionDetail);
+
+  function open(id: string) {
+    select(id);
+    void load(id);
+    setGate('trace');
+  }
+
+  const runs = rows.length;
+  const ok = rows.filter((r) => r.status === 'success').length;
+  const fail = rows.filter((r) => r.status === 'fail').length;
+  const tokens = rows.reduce((a, r) => a + (r.total_tokens ?? 0), 0);
+
+  return (
+    <>
+      <div className="stage-head">
+        <div>
+          <h1 className="stage-title">Sessions · Smiðja</h1>
+          <p className="stage-deck">Factory runs · phase progress · tokens &amp; cost · smidja.db ({db})</p>
+        </div>
+        <div className="row">
+          <button className="btn" onClick={() => void useYmir.getState().refreshSmidja()} title="Re-read smidja.db">
+            <span aria-hidden="true">⟳</span> Refresh
+          </button>
+          <a className="btn btn-primary" href={VISUALIZER_URL} target="_blank" rel="noreferrer">
+            <span aria-hidden="true">ᛋ</span> Open visualizer
+          </a>
+          <StatusChip status={db === 'present' ? 'nominal' : live === false ? 'degraded' : 'down'} />
+        </div>
+      </div>
+
+      <div className="metric-grid" style={{ marginBottom: 'var(--ymir-space-4)' }}>
+        <MetricTile label="Runs" value={runs} delta={`${ok} success`} />
+        <MetricTile label="Failed" value={fail} tone="var(--ymir-danger)" delta="see Decisions" />
+        <MetricTile label="Tokens" value={tokens.toLocaleString()} delta="billed total" />
+        <MetricTile label="Source" value="smidja.db" delta="repo-local" />
+      </div>
+
+      <section className="panel">
+        <div className="panel-head">
+          <div className="panel-title">
+            <span className="glyph" aria-hidden="true">ᛋ</span>
+            Runs
+          </div>
+        </div>
+        <div className="panel-body flush">
+          {rows.length === 0 ? (
+            <div className="empty" style={{ padding: 24 }}>
+              <span className="glyph" aria-hidden="true">ᛋ</span>
+              <p>
+                No runs in <span className="mono">smidja/smidja_data/smidja.db</span>. Run a Smiðja chain to
+                write a trace; the view fills itself.
+              </p>
+            </div>
+          ) : (
+            <table className="data-table">
+              <thead>
+                <tr>
+                  <th>Run</th>
+                  <th>Factory</th>
+                  <th>Allfather</th>
+                  <th>Status</th>
+                  <th>Tokens</th>
+                  <th>Cost</th>
+                  <th>Started</th>
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map((r) => (
+                  <tr
+                    key={r.smidja_id}
+                    onClick={() => open(r.smidja_id)}
+                    style={{ cursor: 'pointer' }}
+                  >
+                    <td className="mono">{r.smidja_id.slice(0, 12)}</td>
+                    <td className="mono">{r.smidja_name ?? '—'}</td>
+                    <td className="muted">{r.engineer ?? '—'}</td>
+                    <td>
+                      <StatusChip status={tone(r.status)} />
+                    </td>
+                    <td className="num">{(r.total_tokens ?? 0).toLocaleString()}</td>
+                    <td className="num">${(r.total_cost ?? 0).toFixed(3)}</td>
+                    <td className="mono dim">{r.started_at?.slice(0, 19).replace('T', ' ') ?? '—'}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
+        </div>
+      </section>
+    </>
+  );
+}

package/apps/hlidskjalf/src/gates/Stats.tsx

@@ -0,0 +1,268 @@
+import { useState } from 'react';
+import { useYmir } from '../state/store';
+import { MetricTile } from '../components/MetricTile';
+
+const pct = (n: number) => `${(n * 100).toFixed(1)}%`;
+const M = (n: number) => `${(n / 1_000_000).toFixed(3)}M`;
+const usd = (n: number) => `$${n.toFixed(4)}`;
+const usd2 = (n: number) => `$${n.toFixed(2)}`;
+
+/** Stats — 1:1 with the Smiðja visualizer: runs, token optimization,
+ *  local-vs-online providers, commercial comparison, by chain & workflow. */
+export function Stats() {
+  const stats = useYmir((s) => s.smidjaStats);
+  const [selectedModel, setSelectedModel] = useState('');
+  const harnessUsage = useYmir((st) => st.usage);
+
+  // THE GATE REPORTS THE HARNESSES (pi + opencode). The smithy keeps its own.
+  const harness = harnessUsage?.gate ?? null;
+
+  const totals = harness?.totals ?? stats?.totals ?? { runs: 0, success: 0, fail: 0, running: 0, tokens: 0, cost: 0 };
+  const usage = harness?.usage ?? stats?.usage ?? { input: 0, output: 0, cache_read: 0, cache_write: 0, total: 0 };
+  const providers = harness?.providers ?? stats?.providers ?? {
+    local: { events: 0, sessions: 0, tokens: 0, cost: 0, input: 0, output: 0, cache_read: 0 },
+    online: { events: 0, sessions: 0, tokens: 0, cost: 0, input: 0, output: 0, cache_read: 0 },
+    per_model: [],
+  };
+  const catalog = stats?.vendor_catalog ?? [];
+  const byChain = harness?.by_chain ?? stats?.by_chain ?? [];
+  const byModel = harness?.by_model ?? stats?.by_model ?? [];
+  const chosen =
+    catalog.find((m) => m.id === selectedModel) ?? catalog[0] ?? null;
+
+  const successRate = totals.runs ? pct(totals.success / totals.runs) : '—';
+  const providerShare = (kind: 'local' | 'online') => {
+    const total = providers.local.tokens + providers.online.tokens;
+    return total ? pct(providers[kind].tokens / total) : '—';
+  };
+
+  const tierGroups = [1, 2, 3].map((t) => ({
+    label: catalog.find((m) => m.tier === t)?.tier_label ?? `Tier ${t}`,
+    models: catalog.filter((m) => m.tier === t),
+  }));
+
+  return (
+    <>
+      <div className="stage-head">
+        <div>
+          <h1 className="stage-title">Statistics</h1>
+          <p className="stage-deck">Every harness run — pi &amp; opencode · tokens, cost, savings</p>
+        </div>
+      </div>
+
+      {harnessUsage && (
+        <section className="panel" style={{ marginTop: 12, padding: 12 }}>
+          <h2 style={{ fontSize: 13, opacity: 0.8, margin: '0 0 6px' }}>
+            Harnesses · opencode &amp; pi
+          </h2>
+          <p className="pf-line dim" style={{ margin: '0 0 8px' }}>
+            {harnessUsage.totals.messages.toLocaleString()} messages ·{' '}
+            {(harnessUsage.totals.input / 1e6).toFixed(1)}M in / {(harnessUsage.totals.output / 1e6).toFixed(1)}M out ·
+            cache-hit {(harnessUsage.totals.cache_hit_ratio * 100).toFixed(1)}% · last {harnessUsage.window_days} days
+          </p>
+          <table className="pf-table">
+            <thead>
+              <tr><th>Model</th><th>Source</th><th>Messages</th><th>In</th><th>Out</th></tr>
+            </thead>
+            <tbody>
+              {harnessUsage.by_model.slice(0, 8).map((m) => (
+                <tr key={m.source + m.model}>
+                  <td>{m.model}</td>
+                  <td>{m.source}</td>
+                  <td>{m.messages.toLocaleString()}</td>
+                  <td>{(m.input / 1e6).toFixed(1)}M</td>
+                  <td>{(m.output / 1e6).toFixed(1)}M</td>
+                </tr>
+              ))}
+              {harnessUsage.by_model.length === 0 && (
+                <tr><td colSpan={5} style={{ padding: 6, opacity: 0.6 }}>no harness usage in the window</td></tr>
+              )}
+            </tbody>
+          </table>
+        </section>
+      )}
+
+      <section className="panel" style={{ marginBottom: 'var(--ymir-space-4)' }}>
+        <div className="panel-head">
+          <div className="panel-title"><span className="glyph" aria-hidden="true">ᛗ</span> Runs</div>
+        </div>
+        <div className="metric-grid">
+          <MetricTile label="Total runs" value={totals.runs} />
+          <MetricTile label="Success" value={totals.success} tone="var(--ymir-ok)" />
+          <MetricTile label="Fail" value={totals.fail} tone="var(--ymir-danger)" />
+          <MetricTile label="Running" value={totals.running} tone="var(--ymir-cyan-1)" />
+          <MetricTile label="Success rate" value={successRate} />
+          <MetricTile label="Tokens" value={totals.tokens.toLocaleString()} />
+          <MetricTile label="Actual cost" value={usd(totals.cost)} tone="var(--ymir-warn)" />
+        </div>
+      </section>
+
+      <section className="panel" style={{ marginBottom: 'var(--ymir-space-4)' }}>
+        <div className="panel-head">
+          <div className="panel-title"><span className="glyph" aria-hidden="true">ᚦ</span> Token optimization <span className="dim">(LLM token metrics)</span></div>
+        </div>
+        <div className="metric-grid">
+          <MetricTile label="Uncached input" value={M(usage.input)} />
+          <MetricTile label="Output" value={M(usage.output)} />
+          <MetricTile label="Cache read" value={M(usage.cache_read)} tone="var(--ymir-ok)" />
+          <MetricTile label="Cache write" value={M(usage.cache_write)} />
+          <MetricTile label="Total tokens" value={M(usage.total)} />
+          <MetricTile label="Cache-hit ratio" value={pct(stats?.cache_hit_ratio ?? 0)} tone="var(--ymir-ok)" />
+          <MetricTile label="Avg CHR / run" value={pct(stats?.avg_cache_hit_per_run ?? 0)} />
+        </div>
+      </section>
+
+      <section className="panel" style={{ marginBottom: 'var(--ymir-space-4)' }}>
+        <div className="panel-head">
+          <div className="panel-title">
+            <span className="glyph" aria-hidden="true">ᛋ</span> Model provider <span className="dim">(local = own hardware vs online cloud APIs)</span>
+          </div>
+        </div>
+        <div className="metric-grid">
+          <MetricTile label={`Local tokens · ${providerShare('local')}`} value={M(providers.local.tokens)} tone="var(--ymir-ok)" />
+          <MetricTile label={`Online tokens · ${providerShare('online')}`} value={M(providers.online.tokens)} tone="var(--ymir-danger)" />
+          <MetricTile label="Local calls" value={providers.local.events} tone="var(--ymir-ok)" />
+          <MetricTile label="Online calls" value={providers.online.events} tone="var(--ymir-danger)" />
+          <MetricTile label="Local cost" value={usd(providers.local.cost)} tone="var(--ymir-ok)" />
+          <MetricTile label="Online cost" value={usd(providers.online.cost)} tone="var(--ymir-danger)" />
+          <MetricTile label="Local sessions" value={providers.local.sessions} tone="var(--ymir-ok)" />
+          <MetricTile label="Online sessions" value={providers.online.sessions} tone="var(--ymir-danger)" />
+        </div>
+        <div className="split-bar" title={`local ${providerShare('local')} / online ${providerShare('online')}`}>
+          <div className="split-local" style={{ width: providerShare('local') }} />
+          <div className="split-online" style={{ width: providerShare('online') }} />
+        </div>
+        <div className="split-legend">
+          <span><i className="dot dot-local" /> local (pi, LM Studio, Ollama) — {providerShare('local')}</span>
+          <span><i className="dot dot-online" /> online (cloud APIs) — {providerShare('online')}</span>
+        </div>
+        {providers.per_model.length ? (
+          <table className="data-table">
+            <thead>
+              <tr><th>Model</th><th>Agent</th><th>Kind</th><th>Cells</th><th>Tokens</th><th>Cost</th></tr>
+            </thead>
+            <tbody>
+              {providers.per_model.map((m) => (
+                <tr key={m.model}>
+                  <td className="mono">{m.model}</td>
+                  <td className="muted">{m.coding_agent ?? '—'}</td>
+                  <td><span className={`badge ${m.kind}`}>{m.kind}</span></td>
+                  <td className="num">{m.events}</td>
+                  <td className="num">{M(m.tokens)}</td>
+                  <td className="num">{usd(m.cost)}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        ) : null}
+      </section>
+
+      <section className="panel" style={{ marginBottom: 'var(--ymir-space-4)' }}>
+        <div className="panel-head">
+          <div className="panel-title">
+            <span className="glyph" aria-hidden="true">ᚠ</span> Commercial comparison <span className="dim">(what these runs would cost on vendors, with caching)</span>
+          </div>
+        </div>
+        <div className="row" style={{ gap: 10, marginBottom: 12, flexWrap: 'wrap' }}>
+          <label className="field" style={{ minWidth: 300 }}>
+            <span>Model</span>
+            <select
+              id="vendor-model"
+              value={chosen?.id ?? ''}
+              onChange={(e) => setSelectedModel(e.target.value)}
+            >
+              {tierGroups.map((g) => (
+                <optgroup key={g.label} label={g.label}>
+                  {g.models.map((m) => (
+                    <option key={m.id} value={m.id}>#{m.rank} {m.name} — {m.provider}</option>
+                  ))}
+                </optgroup>
+              ))}
+            </select>
+          </label>
+          {chosen ? (
+            <span className="dim" style={{ fontSize: 12 }}>
+              rates: ${chosen.input_price.toFixed(2)} in / ${chosen.cache_price.toFixed(2)} cache / ${chosen.output_price.toFixed(2)} out per 1M
+            </span>
+          ) : null}
+        </div>
+        {chosen ? (
+          <table className="data-table">
+            <thead>
+              <tr><th>Model</th><th>Cached cost</th><th>Total cost</th><th>Savings vs actual</th><th>Saved</th></tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td><b>{chosen.name}</b> <span className="dim">· {chosen.provider} · #{chosen.rank}</span></td>
+                <td className="num">{usd2(chosen.cached_cost)}</td>
+                <td className="num">{usd2(chosen.total_cost)}</td>
+                <td className="num" style={{ color: 'var(--ymir-ok)' }}>+{usd2(chosen.savings)}</td>
+                <td className="num" style={{ color: 'var(--ymir-ok)' }}>{pct(chosen.savings_pct)}</td>
+              </tr>
+            </tbody>
+          </table>
+        ) : null}
+      </section>
+
+      <div className="gate-grid cols-2">
+        <section className="panel">
+          <div className="panel-head">
+            <div className="panel-title"><span className="glyph" aria-hidden="true">ᛚ</span> By chain</div>
+          </div>
+          <div className="panel-body flush">
+            {byChain.length ? (
+              <table className="data-table">
+                <thead>
+                  <tr><th>Chain</th><th>Runs</th><th>Success</th><th>Rate</th><th>Tokens</th><th>Cost</th></tr>
+                </thead>
+                <tbody>
+                  {byChain.map((c, i) => (
+                    <tr key={`${c.chain}-${i}`}>
+                      <td className="mono">{c.chain}</td>
+                      <td className="num">{c.runs}</td>
+                      <td className="num">{c.success}</td>
+                      <td className="num">{c.runs ? pct(c.success / c.runs) : '—'}</td>
+                      <td className="num">{c.tokens.toLocaleString()}</td>
+                      <td className="num">{usd(c.cost)}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            ) : (
+              <div className="muted" style={{ padding: 12 }}>No runs yet.</div>
+            )}
+          </div>
+        </section>
+
+        <section className="panel">
+          <div className="panel-head">
+            <div className="panel-title"><span className="glyph" aria-hidden="true">ᛗ</span> By workflow</div>
+          </div>
+          <div className="panel-body flush">
+            {byModel.length ? (
+              <table className="data-table">
+                <thead>
+                  <tr><th>Workflow</th><th>Runs</th><th>Success</th><th>Rate</th><th>Tokens</th><th>Cost</th></tr>
+                </thead>
+                <tbody>
+                  {byModel.map((m) => (
+                    <tr key={m.model}>
+                      <td className="mono">{m.model}</td>
+                      <td className="num">{m.runs}</td>
+                      <td className="num">{m.success}</td>
+                      <td className="num">{m.runs ? pct(m.success / m.runs) : '—'}</td>
+                      <td className="num">{m.tokens.toLocaleString()}</td>
+                      <td className="num">{usd(m.cost)}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            ) : (
+              <div className="muted" style={{ padding: 12 }}>No workflows yet.</div>
+            )}
+          </div>
+        </section>
+      </div>
+    </>
+  );
+}