@klars/agentobs 0.1.0

package/dist/server/public/app.js

@@ -0,0 +1,502 @@
+/**
+ * Dashboard client.
+ *
+ * Plain ES modules, no build step and no framework - the page is a handful of
+ * tables and one chart, and keeping it dependency-free means the dashboard
+ * ships inside the npm package with nothing to compile.
+ */
+
+const state = {
+  range: '7d',
+  status: '',
+  timeline: [],
+};
+
+const RANGE_LABEL = {
+  today: 'today',
+  '7d': 'this week',
+  '30d': 'this month',
+  all: 'all time',
+};
+
+/* ---------- formatting ---------- */
+
+/**
+ * Money formatter.
+ *
+ * `null` renders as an em dash, never as $0.00: a missing price for a model
+ * is not the same fact as a call that cost nothing, and conflating them is
+ * exactly the fabrication this product promises not to do.
+ */
+function money(value) {
+  if (value === null || value === undefined) return '—';
+  if (value === 0) return '$0.00';
+  if (value < 0.01) return `$${value.toFixed(4)}`;
+  return `$${value.toFixed(2)}`;
+}
+
+function count(value) {
+  if (value === null || value === undefined) return '—';
+  return new Intl.NumberFormat().format(value);
+}
+
+function ms(value) {
+  if (value === null || value === undefined) return '—';
+  if (value < 1000) return `${Math.round(value)}`;
+  return `${(value / 1000).toFixed(1)}s`;
+}
+
+function percent(value) {
+  if (value === null || value === undefined) return '—';
+  return `${(value * 100).toFixed(1)}%`;
+}
+
+function relativeTime(iso) {
+  const then = Date.parse(iso);
+  if (Number.isNaN(then)) return iso ?? '—';
+  const secs = Math.round((Date.now() - then) / 1000);
+  if (secs < 60) return `${secs}s ago`;
+  if (secs < 3600) return `${Math.round(secs / 60)}m ago`;
+  if (secs < 86400) return `${Math.round(secs / 3600)}h ago`;
+  return new Date(then).toLocaleDateString();
+}
+
+/** Always build DOM via textContent - tool inputs are untrusted strings. */
+function cell(text, className) {
+  const td = document.createElement('td');
+  td.textContent = text;
+  if (className) td.className = className;
+  return td;
+}
+
+function statusPill(status) {
+  const span = document.createElement('span');
+  const known = ['success', 'error', 'blocked', 'pending'].includes(status);
+  span.className = `pill pill-${known ? status : 'pending'}`;
+  span.textContent = status;
+  return span;
+}
+
+/* ---------- data ---------- */
+
+async function fetchJson(path) {
+  const url = new URL(path, window.location.origin);
+  url.searchParams.set('range', state.range);
+  const token = new URLSearchParams(window.location.search).get('token');
+  if (token) url.searchParams.set('token', token);
+  const res = await fetch(url, { headers: { Accept: 'application/json' } });
+  if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+  return res.json();
+}
+
+function setConnection(ok, message) {
+  const el = document.getElementById('conn-state');
+  el.className = `conn ${ok ? 'is-live' : 'is-down'}`;
+  el.textContent = message;
+}
+
+async function refresh() {
+  try {
+    const [summary, timeline, tools, calls, sessions] = await Promise.all([
+      fetchJson('/api/summary'),
+      fetchJson('/api/timeline'),
+      fetchJson('/api/tools-breakdown'),
+      fetchJson(`/api/tool-calls${state.status ? `?status=${state.status}` : ''}`),
+      fetchJson('/api/sessions'),
+    ]);
+
+    renderSummary(summary);
+    state.timeline = timeline;
+    drawTimeline();
+    renderTimelineTable(timeline);
+    renderTools(tools);
+    renderActivity(calls.calls ?? []);
+    renderSessions(sessions.sessions ?? []);
+    setConnection(true, `Live · updated ${new Date().toLocaleTimeString()}`);
+  } catch (err) {
+    setConnection(false, `Disconnected: ${err.message}`);
+  }
+}
+
+/* ---------- render ---------- */
+
+function renderSummary(s) {
+  document.getElementById('hero-cost').textContent = money(s.total_cost_usd);
+  document.getElementById('hero-tokens-in').textContent = count(s.tokens_in);
+  document.getElementById('hero-tokens-out').textContent = count(s.tokens_out);
+  document.getElementById('hero-duration').textContent = ms(s.avg_duration_ms);
+
+  // Say plainly when the cost figure is incomplete, rather than presenting a
+  // partial total as if it were the whole spend.
+  const note = document.getElementById('hero-note');
+  if (s.tool_calls === 0) {
+    note.textContent = 'No activity recorded yet.';
+  } else if (s.uncosted_calls > 0) {
+    note.textContent = `${count(s.uncosted_calls)} call${s.uncosted_calls === 1 ? '' : 's'} have no price for their model — add it to ~/.agentobs/pricing.json to include them.`;
+  } else {
+    note.textContent = `Across ${count(s.tool_calls)} tool calls in ${count(s.sessions)} session${s.sessions === 1 ? '' : 's'}.`;
+  }
+
+  document.getElementById('stat-calls').textContent = count(s.tool_calls);
+  document.getElementById('stat-calls-sub').textContent = `${count(s.tokens_in + s.tokens_out)} tokens`;
+  document.getElementById('stat-sessions').textContent = count(s.sessions);
+  document.getElementById('stat-sessions-sub').textContent = RANGE_LABEL[s.range] ?? '';
+  document.getElementById('stat-errors').textContent = percent(s.error_rate);
+  document.getElementById('stat-errors-sub').textContent = `${count(s.errors)} failed`;
+  document.getElementById('stat-blocked').textContent = count(s.blocked);
+
+  for (const el of document.querySelectorAll('[data-range-label]')) {
+    el.textContent = RANGE_LABEL[state.range] ?? '';
+  }
+}
+
+function renderTimelineTable(rows) {
+  const body = document.getElementById('timeline-table-body');
+  body.replaceChildren();
+  for (const row of rows) {
+    const tr = document.createElement('tr');
+    tr.append(
+      cell(row.bucket),
+      cell(count(row.calls), 'num'),
+      cell(count(row.errors), 'num'),
+      cell(money(row.cost_usd), 'num'),
+    );
+    body.append(tr);
+  }
+}
+
+function renderTools(rows) {
+  const body = document.getElementById('tools-body');
+  body.replaceChildren();
+  if (rows.length === 0) {
+    const tr = document.createElement('tr');
+    tr.append(Object.assign(cell('No tool calls recorded yet.', 'empty'), { colSpan: 5 }));
+    body.append(tr);
+    return;
+  }
+  for (const row of rows) {
+    const tr = document.createElement('tr');
+    const name = cell('');
+    name.append(document.createTextNode(row.tool_name));
+    if (row.blocked > 0) {
+      const badge = document.createElement('span');
+      badge.className = 'badge';
+      badge.textContent = `${row.blocked} blocked`;
+      name.append(badge);
+    }
+    tr.append(
+      name,
+      cell(count(row.calls), 'num'),
+      cell(count(row.errors), 'num'),
+      cell(ms(row.avg_duration_ms), 'num'),
+      cell(money(row.cost_usd), 'num'),
+    );
+    body.append(tr);
+  }
+}
+
+function renderSessions(rows) {
+  const body = document.getElementById('sessions-body');
+  body.replaceChildren();
+  if (rows.length === 0) {
+    const tr = document.createElement('tr');
+    tr.append(Object.assign(cell('No sessions yet.', 'empty'), { colSpan: 4 }));
+    body.append(tr);
+    return;
+  }
+  for (const row of rows) {
+    const tr = document.createElement('tr');
+    const agent = cell('');
+    agent.append(document.createTextNode(row.agent_name));
+    // Coarse sessions know only duration and exit code. Labelling them keeps
+    // the UI from implying per-tool-call detail it does not have.
+    if (row.fidelity === 'coarse') {
+      const badge = document.createElement('span');
+      badge.className = 'badge';
+      badge.textContent = 'coarse';
+      badge.title = 'Process-wrapped: duration and exit code only, no per-tool-call detail.';
+      agent.append(badge);
+    }
+    tr.append(
+      agent,
+      cell(relativeTime(row.started_at)),
+      cell(row.fidelity === 'coarse' ? '—' : count(row.tool_call_count), 'num'),
+      cell(money(row.total_cost_usd), 'num'),
+    );
+    body.append(tr);
+  }
+}
+
+function renderActivity(rows) {
+  const body = document.getElementById('activity-body');
+  body.replaceChildren();
+  if (rows.length === 0) {
+    const tr = document.createElement('tr');
+    tr.append(
+      Object.assign(cell('Nothing yet. Run an agent to see activity here.', 'empty'), {
+        colSpan: 6,
+      }),
+    );
+    body.append(tr);
+    return;
+  }
+  for (const row of rows) {
+    const tr = document.createElement('tr');
+
+    const status = document.createElement('td');
+    status.append(statusPill(row.status));
+    if (row.rule_matched) {
+      const badge = document.createElement('span');
+      badge.className = 'badge';
+      badge.textContent = row.rule_matched;
+      badge.title = 'Policy rule that produced this decision';
+      status.append(badge);
+    }
+
+    const input = document.createElement('td');
+    const code = document.createElement('code');
+    code.className = 'mono truncate';
+    code.textContent = row.input_summary || '—';
+    code.title = row.error_message || row.output_summary || row.input_summary || '';
+    input.append(code);
+
+    tr.append(
+      status,
+      cell(row.tool_name),
+      input,
+      cell(relativeTime(row.started_at)),
+      cell(ms(row.duration_ms), 'num'),
+      cell(money(row.cost_usd), 'num'),
+    );
+    body.append(tr);
+  }
+}
+
+/* ---------- chart ---------- */
+
+const canvas = document.getElementById('timeline');
+const tip = document.getElementById('timeline-tip');
+let bars = [];
+
+function cssVar(name) {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+
+/**
+ * Grouped bar chart on a plain canvas.
+ *
+ * One y-scale only - calls and errors are both counts, so they share it. A
+ * second axis for cost would be a dual-axis chart, which misleads by making
+ * two unrelated scales look comparable.
+ */
+function drawTimeline() {
+  const rows = state.timeline;
+  const dpr = window.devicePixelRatio || 1;
+  const cssWidth = canvas.clientWidth || canvas.parentElement.clientWidth;
+  const cssHeight = 220;
+
+  canvas.width = cssWidth * dpr;
+  canvas.height = cssHeight * dpr;
+  canvas.style.height = `${cssHeight}px`;
+
+  const ctx = canvas.getContext('2d');
+  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+  ctx.clearRect(0, 0, cssWidth, cssHeight);
+
+  const pad = { top: 12, right: 8, bottom: 26, left: 40 };
+  const plotW = cssWidth - pad.left - pad.right;
+  const plotH = cssHeight - pad.top - pad.bottom;
+  bars = [];
+
+  const muted = cssVar('--text-muted');
+  const gridColor = cssVar('--grid');
+  const axisColor = cssVar('--axis');
+
+  if (rows.length === 0) {
+    ctx.fillStyle = muted;
+    ctx.font = '13px ' + cssVar('--font');
+    ctx.textAlign = 'center';
+    ctx.fillText('No activity in this range', cssWidth / 2, cssHeight / 2);
+    return;
+  }
+
+  const maxCalls = Math.max(1, ...rows.map((r) => r.calls));
+  const ticks = niceTicks(maxCalls, 4);
+  const top = ticks[ticks.length - 1];
+  const y = (v) => pad.top + plotH - (v / top) * plotH;
+
+  // Recessive gridlines, drawn under the data.
+  ctx.strokeStyle = gridColor;
+  ctx.lineWidth = 1;
+  ctx.fillStyle = muted;
+  ctx.font = '11px ' + cssVar('--font');
+  ctx.textAlign = 'right';
+  ctx.textBaseline = 'middle';
+  for (const t of ticks) {
+    const yy = Math.round(y(t)) + 0.5;
+    ctx.beginPath();
+    ctx.moveTo(pad.left, yy);
+    ctx.lineTo(pad.left + plotW, yy);
+    ctx.stroke();
+    ctx.fillText(String(t), pad.left - 8, yy);
+  }
+
+  const slot = plotW / rows.length;
+  // Cap the width so a 7-bucket week doesn't render as slabs, but keep bars
+  // substantial enough to read as data rather than hairlines.
+  const barW = Math.max(4, Math.min(46, slot * 0.62));
+  const errW = Math.max(3, barW * 0.4);
+  const radius = 4;
+
+  rows.forEach((row, i) => {
+    const cx = pad.left + slot * i + slot / 2;
+    const x = cx - barW / 2;
+    const h = Math.max(row.calls > 0 ? 2 : 0, plotH - (y(row.calls) - pad.top));
+
+    if (h > 0) {
+      ctx.fillStyle = cssVar('--series-1');
+      roundedTop(ctx, x, y(row.calls), barW, h, radius);
+      ctx.fill();
+    }
+
+    // Errors ride in front, inset, in the reserved critical status color -
+    // never a categorical slot, so a status never impersonates a series.
+    if (row.errors > 0) {
+      const eh = Math.max(2, plotH - (y(row.errors) - pad.top));
+      ctx.fillStyle = cssVar('--surface');
+      roundedTop(ctx, cx - errW / 2 - 1, y(row.errors) - 1, errW + 2, eh + 1, radius);
+      ctx.fill();
+      ctx.fillStyle = cssVar('--status-critical');
+      roundedTop(ctx, cx - errW / 2, y(row.errors), errW, eh, radius);
+      ctx.fill();
+    }
+
+    bars.push({ x: pad.left + slot * i, w: slot, row });
+  });
+
+  // Baseline.
+  ctx.strokeStyle = axisColor;
+  ctx.beginPath();
+  ctx.moveTo(pad.left, pad.top + plotH + 0.5);
+  ctx.lineTo(pad.left + plotW, pad.top + plotH + 0.5);
+  ctx.stroke();
+
+  // Thin out x labels so they never collide.
+  ctx.fillStyle = muted;
+  ctx.textAlign = 'center';
+  ctx.textBaseline = 'top';
+  const step = Math.max(1, Math.ceil(rows.length / Math.floor(plotW / 70)));
+  rows.forEach((row, i) => {
+    if (i % step !== 0 && i !== rows.length - 1) return;
+    ctx.fillText(shortLabel(row.bucket), pad.left + slot * i + slot / 2, pad.top + plotH + 8);
+  });
+}
+
+function roundedTop(ctx, x, y, w, h, r) {
+  const rr = Math.min(r, w / 2, h);
+  ctx.beginPath();
+  ctx.moveTo(x, y + h);
+  ctx.lineTo(x, y + rr);
+  ctx.quadraticCurveTo(x, y, x + rr, y);
+  ctx.lineTo(x + w - rr, y);
+  ctx.quadraticCurveTo(x + w, y, x + w, y + rr);
+  ctx.lineTo(x + w, y + h);
+  ctx.closePath();
+}
+
+function niceTicks(max, target) {
+  const raw = max / target;
+  const mag = 10 ** Math.floor(Math.log10(raw));
+  const norm = raw / mag;
+  const stepMult = norm <= 1 ? 1 : norm <= 2 ? 2 : norm <= 5 ? 5 : 10;
+  const step = stepMult * mag;
+  const out = [];
+  for (let v = 0; v <= max + step; v += step) out.push(Math.round(v));
+  return out;
+}
+
+function shortLabel(bucket) {
+  if (bucket.includes('T')) return bucket.split('T')[1];
+  const parts = bucket.split('-');
+  return parts.length === 3 ? `${parts[1]}/${parts[2]}` : bucket;
+}
+
+canvas.addEventListener('mousemove', (event) => {
+  const rect = canvas.getBoundingClientRect();
+  const x = event.clientX - rect.left;
+  const hit = bars.find((b) => x >= b.x && x < b.x + b.w);
+  if (!hit) {
+    tip.classList.remove('is-visible');
+    return;
+  }
+  tip.textContent = `${hit.row.bucket} · ${hit.row.calls} calls · ${hit.row.errors} errors · ${money(hit.row.cost_usd)}`;
+  tip.classList.add('is-visible');
+  const wrapRect = canvas.parentElement.getBoundingClientRect();
+  const left = Math.min(
+    Math.max(8, event.clientX - wrapRect.left + 12),
+    wrapRect.width - tip.offsetWidth - 8,
+  );
+  tip.style.left = `${left}px`;
+  tip.style.top = `${event.clientY - wrapRect.top - 40}px`;
+});
+
+canvas.addEventListener('mouseleave', () => tip.classList.remove('is-visible'));
+
+/* ---------- controls ---------- */
+
+function bindGroup(selector, attr, onPick) {
+  for (const btn of document.querySelectorAll(selector)) {
+    btn.addEventListener('click', () => {
+      for (const sibling of btn.parentElement.children) {
+        sibling.setAttribute('aria-pressed', String(sibling === btn));
+      }
+      onPick(btn.dataset[attr] ?? '');
+    });
+  }
+}
+
+bindGroup('.rangeset button', 'range', (value) => {
+  state.range = value;
+  refresh();
+});
+
+bindGroup('.filterset button', 'status', (value) => {
+  state.status = value;
+  refresh();
+});
+
+for (const btn of document.querySelectorAll('[data-toggle-table]')) {
+  btn.addEventListener('click', () => {
+    const wrap = document.querySelector(`[data-table="${btn.dataset.toggleTable}"]`);
+    const hidden = wrap.classList.toggle('is-hidden');
+    btn.textContent = hidden ? 'Show data table' : 'Hide data table';
+  });
+}
+
+const themeToggle = document.getElementById('theme-toggle');
+themeToggle.addEventListener('click', () => {
+  const current =
+    document.documentElement.getAttribute('data-theme') ||
+    (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+  const next = current === 'dark' ? 'light' : 'dark';
+  document.documentElement.setAttribute('data-theme', next);
+  try {
+    localStorage.setItem('agentobs-theme', next);
+  } catch {
+    // Private windows and blocked site data throw here; the page must still
+    // render, it just won't remember the choice.
+  }
+  drawTimeline();
+});
+
+try {
+  const saved = localStorage.getItem('agentobs-theme');
+  if (saved) document.documentElement.setAttribute('data-theme', saved);
+} catch {
+  /* ignore */
+}
+
+window.addEventListener('resize', drawTimeline);
+
+refresh();
+setInterval(refresh, 5000);

package/dist/server/public/index.html

@@ -0,0 +1,196 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="color-scheme" content="light dark" />
+    <title>AgentObs</title>
+    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>&#128200;</text></svg>" />
+    <link rel="stylesheet" href="/app.css" />
+  </head>
+  <body>
+    <a class="skip-link" href="#main">Skip to content</a>
+
+    <header class="topbar">
+      <div class="brand">
+        <span class="brand-mark" aria-hidden="true"></span>
+        <div>
+          <h1>AgentObs</h1>
+          <p class="brand-sub">Agent observability &amp; control</p>
+        </div>
+      </div>
+
+      <div class="topbar-actions">
+        <div class="rangeset" role="group" aria-label="Time range">
+          <button type="button" data-range="today">Today</button>
+          <button type="button" data-range="7d" aria-pressed="true">7 days</button>
+          <button type="button" data-range="30d">30 days</button>
+          <button type="button" data-range="all">All</button>
+        </div>
+        <button type="button" id="theme-toggle" class="icon-btn" aria-label="Switch theme">
+          <span aria-hidden="true">◐</span>
+        </button>
+      </div>
+    </header>
+
+    <main id="main">
+      <!-- Hero: exactly one per view - the number this dashboard exists to report. -->
+      <section class="hero" aria-labelledby="hero-label">
+        <div>
+          <p class="hero-label" id="hero-label">Spend <span data-range-label>this week</span></p>
+          <p class="hero-figure" id="hero-cost">—</p>
+          <p class="hero-note" id="hero-note">No activity recorded yet.</p>
+        </div>
+        <dl class="hero-side">
+          <div><dt>Tokens in</dt><dd id="hero-tokens-in">—</dd></div>
+          <div><dt>Tokens out</dt><dd id="hero-tokens-out">—</dd></div>
+          <div><dt>Avg duration</dt><dd id="hero-duration">—</dd></div>
+        </dl>
+      </section>
+
+      <section class="tiles" aria-label="Key metrics">
+        <article class="tile">
+          <p class="tile-label">Tool calls</p>
+          <p class="tile-value" id="stat-calls">—</p>
+          <p class="tile-sub" id="stat-calls-sub">&nbsp;</p>
+        </article>
+        <article class="tile">
+          <p class="tile-label">Sessions</p>
+          <p class="tile-value" id="stat-sessions">—</p>
+          <p class="tile-sub" id="stat-sessions-sub">&nbsp;</p>
+        </article>
+        <article class="tile">
+          <p class="tile-label">Error rate</p>
+          <p class="tile-value" id="stat-errors">—</p>
+          <p class="tile-sub" id="stat-errors-sub">&nbsp;</p>
+        </article>
+        <article class="tile">
+          <p class="tile-label">Blocked</p>
+          <p class="tile-value" id="stat-blocked">—</p>
+          <p class="tile-sub" id="stat-blocked-sub">by policy</p>
+        </article>
+      </section>
+
+      <section class="panel" aria-labelledby="timeline-title">
+        <div class="panel-head">
+          <div>
+            <h2 id="timeline-title">Activity over time</h2>
+            <p class="panel-sub">Tool calls per bucket, errors marked separately.</p>
+          </div>
+          <div class="legend" id="timeline-legend">
+            <span class="legend-item"><i class="swatch swatch-calls"></i>Calls</span>
+            <span class="legend-item"><i class="swatch swatch-errors"></i>Errors</span>
+          </div>
+        </div>
+        <div class="chart-wrap">
+          <canvas id="timeline" height="220" aria-describedby="timeline-table-note"></canvas>
+          <div class="tooltip" id="timeline-tip" role="status" aria-live="polite"></div>
+        </div>
+        <p class="panel-note" id="timeline-table-note">
+          <button type="button" class="linklike" data-toggle-table="timeline">
+            Show data table
+          </button>
+        </p>
+        <div class="table-wrap is-hidden" data-table="timeline">
+          <table>
+            <caption class="sr-only">Activity over time, as a table</caption>
+            <thead>
+              <tr><th scope="col">Bucket</th><th scope="col">Calls</th><th scope="col">Errors</th><th scope="col">Cost</th></tr>
+            </thead>
+            <tbody id="timeline-table-body"></tbody>
+          </table>
+        </div>
+      </section>
+
+      <div class="split">
+        <section class="panel" aria-labelledby="tools-title">
+          <div class="panel-head">
+            <div>
+              <h2 id="tools-title">Tools</h2>
+              <p class="panel-sub">Where the calls and the money go.</p>
+            </div>
+          </div>
+          <div class="table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th scope="col">Tool</th>
+                  <th scope="col" class="num">Calls</th>
+                  <th scope="col" class="num">Errors</th>
+                  <th scope="col" class="num">Avg ms</th>
+                  <th scope="col" class="num">Cost</th>
+                </tr>
+              </thead>
+              <tbody id="tools-body">
+                <tr><td colspan="5" class="empty">No tool calls recorded yet.</td></tr>
+              </tbody>
+            </table>
+          </div>
+        </section>
+
+        <section class="panel" aria-labelledby="sessions-title">
+          <div class="panel-head">
+            <div>
+              <h2 id="sessions-title">Sessions</h2>
+              <p class="panel-sub">Coarse sessions show only duration and exit code.</p>
+            </div>
+          </div>
+          <div class="table-wrap">
+            <table>
+              <thead>
+                <tr>
+                  <th scope="col">Agent</th>
+                  <th scope="col">Started</th>
+                  <th scope="col" class="num">Calls</th>
+                  <th scope="col" class="num">Cost</th>
+                </tr>
+              </thead>
+              <tbody id="sessions-body">
+                <tr><td colspan="4" class="empty">No sessions yet.</td></tr>
+              </tbody>
+            </table>
+          </div>
+        </section>
+      </div>
+
+      <section class="panel" aria-labelledby="activity-title">
+        <div class="panel-head">
+          <div>
+            <h2 id="activity-title">Recent activity</h2>
+            <p class="panel-sub">Inputs are truncated and secret-redacted before storage.</p>
+          </div>
+          <div class="filterset" role="group" aria-label="Filter by status">
+            <button type="button" data-status="" aria-pressed="true">All</button>
+            <button type="button" data-status="success">Success</button>
+            <button type="button" data-status="error">Errors</button>
+            <button type="button" data-status="blocked">Blocked</button>
+          </div>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <thead>
+              <tr>
+                <th scope="col">Status</th>
+                <th scope="col">Tool</th>
+                <th scope="col">Input</th>
+                <th scope="col">When</th>
+                <th scope="col" class="num">ms</th>
+                <th scope="col" class="num">Cost</th>
+              </tr>
+            </thead>
+            <tbody id="activity-body">
+              <tr><td colspan="6" class="empty">Nothing yet. Run an agent to see activity here.</td></tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+
+    <footer class="footer">
+      <span id="conn-state" class="conn">Connecting…</span>
+      <span>Local data only · <code>~/.agentobs/agentobs.db</code></span>
+    </footer>
+
+    <script type="module" src="/app.js"></script>
+  </body>
+</html>