PyPI - tokenjam - Versions diffs - 0.2.0__py3-none-any.whl - Mend

tokenjam 0.2.0__py3-none-any.whl

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

Files changed (86) hide show

tokenjam/__init__.py +1 -0
tokenjam/api/__init__.py +0 -0
tokenjam/api/app.py +104 -0
tokenjam/api/deps.py +18 -0
tokenjam/api/middleware.py +28 -0
tokenjam/api/routes/__init__.py +0 -0
tokenjam/api/routes/agents.py +33 -0
tokenjam/api/routes/alerts.py +77 -0
tokenjam/api/routes/budget.py +96 -0
tokenjam/api/routes/cost.py +43 -0
tokenjam/api/routes/drift.py +63 -0
tokenjam/api/routes/logs.py +511 -0
tokenjam/api/routes/metrics.py +81 -0
tokenjam/api/routes/otlp.py +63 -0
tokenjam/api/routes/spans.py +202 -0
tokenjam/api/routes/status.py +84 -0
tokenjam/api/routes/tools.py +22 -0
tokenjam/api/routes/traces.py +92 -0
tokenjam/cli/__init__.py +0 -0
tokenjam/cli/cmd_alerts.py +94 -0
tokenjam/cli/cmd_budget.py +119 -0
tokenjam/cli/cmd_cost.py +90 -0
tokenjam/cli/cmd_demo.py +82 -0
tokenjam/cli/cmd_doctor.py +173 -0
tokenjam/cli/cmd_drift.py +238 -0
tokenjam/cli/cmd_export.py +200 -0
tokenjam/cli/cmd_mcp.py +78 -0
tokenjam/cli/cmd_onboard.py +779 -0
tokenjam/cli/cmd_serve.py +85 -0
tokenjam/cli/cmd_status.py +153 -0
tokenjam/cli/cmd_stop.py +87 -0
tokenjam/cli/cmd_tools.py +45 -0
tokenjam/cli/cmd_traces.py +161 -0
tokenjam/cli/cmd_uninstall.py +159 -0
tokenjam/cli/main.py +110 -0
tokenjam/core/__init__.py +0 -0
tokenjam/core/alerts.py +619 -0
tokenjam/core/api_backend.py +235 -0
tokenjam/core/config.py +360 -0
tokenjam/core/cost.py +102 -0
tokenjam/core/db.py +718 -0
tokenjam/core/drift.py +256 -0
tokenjam/core/ingest.py +265 -0
tokenjam/core/models.py +225 -0
tokenjam/core/pricing.py +54 -0
tokenjam/core/retention.py +21 -0
tokenjam/core/schema_validator.py +156 -0
tokenjam/demo/__init__.py +0 -0
tokenjam/demo/env.py +96 -0
tokenjam/mcp/__init__.py +0 -0
tokenjam/mcp/server.py +1067 -0
tokenjam/otel/__init__.py +0 -0
tokenjam/otel/exporters.py +26 -0
tokenjam/otel/provider.py +207 -0
tokenjam/otel/semconv.py +144 -0
tokenjam/pricing/models.toml +70 -0
tokenjam/py.typed +0 -0
tokenjam/sdk/__init__.py +21 -0
tokenjam/sdk/agent.py +206 -0
tokenjam/sdk/bootstrap.py +120 -0
tokenjam/sdk/http_exporter.py +109 -0
tokenjam/sdk/integrations/__init__.py +0 -0
tokenjam/sdk/integrations/anthropic.py +200 -0
tokenjam/sdk/integrations/autogen.py +97 -0
tokenjam/sdk/integrations/base.py +27 -0
tokenjam/sdk/integrations/bedrock.py +103 -0
tokenjam/sdk/integrations/crewai.py +96 -0
tokenjam/sdk/integrations/gemini.py +131 -0
tokenjam/sdk/integrations/langchain.py +156 -0
tokenjam/sdk/integrations/langgraph.py +101 -0
tokenjam/sdk/integrations/litellm.py +323 -0
tokenjam/sdk/integrations/llamaindex.py +52 -0
tokenjam/sdk/integrations/nemoclaw.py +139 -0
tokenjam/sdk/integrations/openai.py +159 -0
tokenjam/sdk/integrations/openai_agents_sdk.py +47 -0
tokenjam/sdk/transport.py +98 -0
tokenjam/ui/index.html +1213 -0
tokenjam/utils/__init__.py +0 -0
tokenjam/utils/formatting.py +43 -0
tokenjam/utils/ids.py +15 -0
tokenjam/utils/time_parse.py +54 -0
tokenjam-0.2.0.dist-info/METADATA +622 -0
tokenjam-0.2.0.dist-info/RECORD +86 -0
tokenjam-0.2.0.dist-info/WHEEL +4 -0
tokenjam-0.2.0.dist-info/entry_points.txt +2 -0
tokenjam-0.2.0.dist-info/licenses/LICENSE +21 -0

tokenjam/ui/index.html ADDED Viewed

@@ -0,0 +1,1213 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Token Juice</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@600;700;800&display=swap" rel="stylesheet">
+<style>
+:root {
+  --bg: #070d1a;
+  --surface: #0f1729;
+  --surface2: #1a2840;
+  --border: #1e2d4a;
+  --text: #e2e8f0;
+  --text-dim: #64748b;
+  --accent: #3d8eff;
+  --warn: #f59e0b;
+  --error: #ef4444;
+  --success: #22c55e;
+  --info: #3d8eff;
+}
+* { margin:0; padding:0; box-sizing:border-box; }
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  display: flex;
+  min-height: 100vh;
+}
+code, .mono {
+  font-family: 'IBM Plex Mono', monospace;
+}
+/* Sidebar */
+.sidebar {
+  width: 200px;
+  background: var(--surface);
+  border-right: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  padding: 16px 0;
+  flex-shrink: 0;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  z-index: 10;
+}
+.sidebar-brand {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--text);
+  padding: 0 16px 16px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.sidebar-brand .brand-claw { color: var(--accent); }
+.sidebar a {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+  color: var(--text-dim);
+  text-decoration: none;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 13px;
+  transition: background 0.15s, color 0.15s;
+}
+.sidebar a:hover { background: rgba(255,255,255,0.04); color: var(--text); }
+.sidebar a.active { color: var(--accent); background: rgba(61,142,255,0.08); }
+.sidebar a .icon { width: 16px; text-align: center; font-size: 14px; }
+.sidebar-footer {
+  margin-top: auto;
+  border-top: 1px solid var(--border);
+  padding-top: 8px;
+}
+.sidebar-footer a.footer-link {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 16px;
+  color: var(--text-dim);
+  text-decoration: none;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 13px;
+  transition: background 0.15s, color 0.15s;
+}
+.sidebar-footer a.footer-link:hover { background: rgba(255,255,255,0.04); color: var(--text); }
+.sidebar-footer .version {
+  padding: 4px 16px 8px;
+  font-size: 10px;
+  color: var(--text-dim);
+  font-family: 'IBM Plex Mono', monospace;
+}
+/* Main */
+.main {
+  flex: 1;
+  margin-left: 200px;
+  padding: 24px 32px;
+  min-width: 0;
+}
+.page-title {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-size: 20px;
+  font-weight: 700;
+  margin-bottom: 20px;
+  color: var(--text);
+}
+/* Cards */
+.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 24px; }
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 16px;
+}
+.card.clickable { cursor: pointer; transition: border-color 0.15s; }
+.card.clickable:hover { border-color: var(--accent); }
+.card-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 12px;
+  font-family: 'IBM Plex Mono', monospace;
+  font-weight: 600;
+  font-size: 14px;
+}
+.status-dot {
+  width: 8px; height: 8px; border-radius: 50%;
+  display: inline-block;
+}
+.status-dot.active { background: var(--success); }
+.status-dot.completed { background: var(--success); }
+.status-dot.idle { background: var(--text-dim); }
+.status-dot.error { background: var(--error); }
+.status-dot.stale { background: var(--warn); }
+.card-row {
+  display: flex;
+  justify-content: space-between;
+  padding: 3px 0;
+  font-size: 13px;
+  font-family: 'IBM Plex Mono', monospace;
+}
+.card-row .label { color: var(--text-dim); }
+.card-row .value { color: var(--text); }
+.budget-bar {
+  height: 4px;
+  background: var(--border);
+  border-radius: 2px;
+  margin-top: 6px;
+  overflow: hidden;
+}
+.budget-bar-fill { height: 100%; border-radius: 2px; background: var(--success); transition: width 0.3s; }
+.budget-bar-fill.warn { background: var(--warn); }
+.budget-bar-fill.over { background: var(--error); }
+/* Info tooltip */
+.info-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px; height: 14px;
+  border-radius: 50%;
+  background: var(--border);
+  color: var(--text-dim);
+  font-size: 10px;
+  font-family: sans-serif;
+  cursor: default;
+  position: relative;
+  margin-left: 4px;
+  vertical-align: middle;
+  line-height: 1;
+}
+.info-btn .info-tip {
+  display: none;
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  background: var(--surface2);
+  color: var(--text);
+  border: 1px solid #2e4a70;
+  border-radius: 4px;
+  padding: 7px 10px;
+  font-size: 11px;
+  line-height: 1.5;
+  font-family: 'IBM Plex Mono', monospace;
+  white-space: normal;
+  max-width: 260px;
+  z-index: 100;
+  pointer-events: none;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
+}
+.info-btn:hover .info-tip { display: block; }
+/* Tables */
+.table-wrap { overflow-x: auto; }
+table {
+  width: 100%;
+  border-collapse: collapse;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 13px;
+}
+th {
+  text-align: left;
+  padding: 8px 12px;
+  color: var(--text-dim);
+  font-weight: 500;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+td {
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+  white-space: nowrap;
+}
+tr:hover td { background: rgba(255,255,255,0.02); }
+tr.clickable { cursor: pointer; }
+tr.clickable:hover td { background: rgba(61,142,255,0.06); }
+td.chevron { color: var(--text-dim); font-size: 14px; text-align: center; width: 24px; }
+tr.clickable:hover td.chevron { color: var(--accent); }
+/* Badges */
+.badge {
+  display: inline-block;
+  padding: 2px 8px;
+  border-radius: 10px;
+  font-size: 11px;
+  font-weight: 600;
+  font-family: 'IBM Plex Mono', monospace;
+}
+.badge-ok, .badge-completed { background: rgba(34,197,94,0.15); color: var(--success); }
+.badge-error { background: rgba(239,68,68,0.15); color: var(--error); }
+.badge-active { background: rgba(34,197,94,0.15); color: var(--success); }
+.badge-stale { background: rgba(245,158,11,0.15); color: var(--warn); }
+.badge-critical { background: rgba(239,68,68,0.15); color: var(--error); }
+.badge-warning { background: rgba(245,158,11,0.15); color: var(--warn); }
+.badge-info { background: rgba(61,142,255,0.15); color: var(--info); }
+/* Filters */
+.filters {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+.filters select, .filters input {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 12px;
+}
+.filters select:focus, .filters input:focus { outline: none; border-color: var(--accent); }
+.btn {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: 6px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 12px;
+}
+.btn:hover { border-color: var(--accent); color: var(--accent); }
+.btn-back { margin-bottom: 16px; }
+/* Waterfall */
+.waterfall { margin: 16px 0; }
+.wf-row {
+  display: flex;
+  align-items: center;
+  height: 28px;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: background 0.1s;
+}
+.wf-row:hover { background: rgba(255,255,255,0.04); }
+.wf-row:hover .wf-label { color: var(--text); }
+.wf-row:hover .wf-bar { box-shadow: 0 0 8px rgba(61,142,255,0.25); }
+.wf-row.selected { background: rgba(61,142,255,0.08); border-left: 2px solid var(--accent); }
+.wf-row.selected .wf-label { color: var(--accent); }
+.wf-label {
+  flex-shrink: 0;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 12px;
+  color: var(--text-dim);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding-right: 8px;
+}
+.wf-track { flex: 1; position: relative; height: 18px; }
+.wf-bar-wrap { position: absolute; height: 100%; }
+.wf-tip {
+  display: none;
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  right: auto;
+  background: #1a2236;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 8px 10px;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 11px;
+  color: var(--text);
+  white-space: pre;
+  z-index: 100;
+  pointer-events: none;
+  line-height: 1.5;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
+}
+.wf-bar-wrap:hover .wf-tip { display: block; }
+.wf-bar-wrap.tip-flip .wf-tip { left: auto; right: 0; }
+.wf-bar {
+  position: absolute;
+  height: 100%;
+  border-radius: 3px;
+  min-width: 2px;
+  display: flex;
+  align-items: center;
+  padding: 0 6px;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 10px;
+  color: #fff;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.wf-bar.agent { background: var(--success); color: #070d1a; }
+.wf-bar.llm { background: var(--accent); }
+.wf-bar.tool { background: var(--warn); color: #070d1a; }
+.wf-bar.other { background: var(--text-dim); }
+/* Span detail */
+.span-detail {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 16px;
+  margin-top: 16px;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 12px;
+}
+.span-detail h3 {
+  font-size: 14px;
+  margin-bottom: 12px;
+  color: var(--accent);
+}
+.detail-grid {
+  display: grid;
+  grid-template-columns: 140px 1fr;
+  gap: 4px 12px;
+}
+.detail-grid .dk { color: var(--text-dim); }
+.detail-grid .dv { color: var(--text); word-break: break-all; }
+/* Summary row */
+.summary {
+  display: flex;
+  gap: 24px;
+  margin-bottom: 16px;
+  flex-wrap: wrap;
+}
+.summary-item {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 12px 16px;
+  min-width: 140px;
+}
+.summary-label {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 11px;
+  color: var(--text-dim);
+  text-transform: uppercase;
+  margin-bottom: 4px;
+}
+.summary-value {
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 20px;
+  font-weight: 600;
+}
+/* Drift */
+.drift-section {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 16px;
+}
+.drift-section h3 {
+  font-family: 'Bricolage Grotesque', sans-serif;
+  font-size: 15px;
+  font-weight: 700;
+  margin-bottom: 12px;
+}
+/* Empty state */
+.empty {
+  text-align: center;
+  padding: 48px 24px;
+  color: var(--text-dim);
+  font-size: 14px;
+}
+.empty code {
+  display: block;
+  margin-top: 12px;
+  color: var(--accent);
+  font-size: 13px;
+}
+/* Expand toggle */
+.expand-toggle { display: inline-block; width: 16px; font-size: 10px; color: var(--text-dim); transition: transform 0.15s; }
+.expand-toggle.open { transform: rotate(90deg); }
+/* Waterfall hint */
+.wf-hint { font-size: 11px; color: var(--text-dim); margin-top: 8px; font-family: 'IBM Plex Mono', monospace; }
+/* Alert detail expand */
+.alert-detail {
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 12px;
+  margin: 8px 12px;
+  font-family: 'IBM Plex Mono', monospace;
+  font-size: 11px;
+  white-space: pre-wrap;
+  word-break: break-all;
+  color: var(--text-dim);
+}
+</style>
+</head>
+<body>
+<nav class="sidebar">
+  <div class="sidebar-brand"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="24" height="24" style="flex-shrink:0"><circle cx="16" cy="16" r="5" fill="var(--accent)"/><path d="M16 4v5M16 23v5M4 16h5M23 16h5" stroke="var(--accent)" stroke-width="2.5" stroke-linecap="round"/><path d="M8.2 8.2l3.5 3.5M20.3 20.3l3.5 3.5M20.3 11.7l3.5-3.5M8.2 23.8l3.5-3.5" stroke="var(--accent)" stroke-width="2" stroke-linecap="round" opacity="0.6"/></svg><span>Open<span class="brand-claw">Claw</span>Watch</span></div>
+  <a href="#/status" class="nav-link" data-view="status"><span class="icon">&bull;</span> Status</a>
+  <a href="#/traces" class="nav-link" data-view="traces"><span class="icon">&diamond;</span> Traces</a>
+  <a href="#/cost" class="nav-link" data-view="cost"><span class="icon">$</span> Cost</a>
+  <a href="#/alerts" class="nav-link" data-view="alerts"><span class="icon">!</span> Alerts</a>
+  <a href="#/drift" class="nav-link" data-view="drift"><span class="icon">~</span> Drift</a>
+  <a href="#/budget" class="nav-link" data-view="budget"><span class="icon">$</span> Budget</a>
+  <div class="sidebar-footer">
+    <a href="/docs" target="_blank" class="footer-link"><span class="icon">&#x2737;</span> API docs</a>
+    <a href="https://github.com/Metabuilder-Labs/tokenjuice" target="_blank" class="footer-link"><span class="icon">&#x2197;</span> GitHub</a>
+    <div class="version">v0.1.4</div>
+  </div>
+</nav>
+<div class="main" id="app"></div>
+<script type="module">
+import { h, render, Component } from 'https://esm.sh/preact@10.25.4';
+import { useState, useEffect, useCallback } from 'https://esm.sh/preact@10.25.4/hooks';
+import htm from 'https://esm.sh/htm@3.1.1';
+const html = htm.bind(h);
+// --- API ---
+const apiKeyMeta = document.querySelector('meta[name="ocw-api-key"]');
+const API_KEY = apiKeyMeta ? apiKeyMeta.getAttribute('content') : null;
+async function api(path, params = {}) {
+  const qs = new URLSearchParams();
+  for (const [k, v] of Object.entries(params)) {
+    if (v != null && v !== '') qs.set(k, v);
+  }
+  const url = '/api/v1' + path + (qs.toString() ? '?' + qs : '');
+  const headers = {};
+  if (API_KEY) headers['Authorization'] = 'Bearer ' + API_KEY;
+  const resp = await fetch(url, { headers });
+  if (!resp.ok) throw new Error(`API ${resp.status}`);
+  return resp.json();
+}
+async function apiPost(path, body) {
+  const headers = { 'Content-Type': 'application/json' };
+  if (API_KEY) headers['Authorization'] = 'Bearer ' + API_KEY;
+  const resp = await fetch('/api/v1' + path, {
+    method: 'POST', headers, body: JSON.stringify(body),
+  });
+  if (!resp.ok) throw new Error(`API ${resp.status}`);
+  return resp.json();
+}
+// --- Helpers ---
+function fmtCost(usd) {
+  if (usd == null) return '$0.0000';
+  if (usd === 0) return '$0.0000';
+  return usd < 0.001 ? '$' + usd.toFixed(6) : '$' + usd.toFixed(4);
+}
+function fmtTokens(n) {
+  if (n == null) return '-';
+  if (n >= 1e6) return (n/1e6).toFixed(1) + 'M';
+  if (n >= 1e3) return (n/1e3).toFixed(1) + 'k';
+  return String(n);
+}
+function fmtDur(ms) {
+  if (ms == null) return '-';
+  if (ms < 1000) return ms.toFixed(0) + 'ms';
+  if (ms < 60000) return (ms/1000).toFixed(1) + 's';
+  const m = Math.floor(ms/60000);
+  const s = Math.round((ms % 60000)/1000);
+  return m + 'm ' + s + 's';
+}
+function fmtAgo(iso) {
+  if (!iso) return '-';
+  const d = new Date(iso);
+  const sec = (Date.now() - d.getTime()) / 1000;
+  if (sec < 60) return Math.floor(sec) + 's ago';
+  if (sec < 3600) return Math.floor(sec/60) + 'm ago';
+  if (sec < 86400) return Math.floor(sec/3600) + 'h ago';
+  return Math.floor(sec/86400) + 'd ago';
+}
+function spanKindClass(name) {
+  const n = (name || '').toLowerCase();
+  if (n.includes('agent') || n === 'invoke_agent') return 'agent';
+  if (n.includes('llm') || n.includes('invoke_llm') || n.includes('gen_ai.llm')) return 'llm';
+  if (n.includes('tool') || n.includes('invoke_tool') || n.includes('gen_ai.tool')) return 'tool';
+  return 'other';
+}
+function friendlySpanName(name) {
+  const map = {
+    'gen_ai.llm.call': 'LLM Call',
+    'gen_ai.tool.call': 'Tool Call',
+    'invoke_agent': 'Agent Run',
+    'invoke_llm': 'LLM Call',
+    'invoke_tool': 'Tool Call',
+    'openclaw.agent.turn': 'Agent Turn',
+    'openclaw.request': 'Request',
+    'openclaw.model.usage': 'Model Usage',
+  };
+  if (map[name]) return map[name];
+  if (name && name.startsWith('tool.')) return 'Tool: ' + name.slice(5);
+  if (!name) return '-';
+  // sentence case fallback
+  return name.charAt(0).toUpperCase() + name.slice(1).replace(/[._]/g, ' ');
+}
+function friendlyAlertType(type) {
+  const map = {
+    'sensitive_action': 'Sensitive Action',
+    'cost_budget_daily': 'Daily Budget',
+    'cost_budget_session': 'Session Budget',
+    'drift_detected': 'Drift Detected',
+    'retry_loop': 'Retry Loop',
+    'token_anomaly': 'Token Anomaly',
+    'schema_violation': 'Schema Violation',
+    'failure_rate': 'Failure Rate',
+  };
+  return map[type] || type;
+}
+// --- Router ---
+function getView() {
+  const h = location.hash.replace('#/', '') || 'status';
+  const parts = h.split('/');
+  return { view: parts[0], param: parts[1] || null };
+}
+// ============================
+// Status View
+// ============================
+function StatusView() {
+  const [data, setData] = useState(null);
+  const [alerts, setAlerts] = useState([]);
+  const load = useCallback(async () => {
+    const [s, a] = await Promise.all([
+      api('/status'),
+      api('/alerts', { since: '24h' }),
+    ]);
+    setData(s);
+    setAlerts((a.alerts || []).slice(0, 5));
+  }, []);
+  useEffect(() => { load(); const t = setInterval(load, 5000); return () => clearInterval(t); }, [load]);
+  if (!data) return html`<div class="empty">Loading...</div>`;
+  if (!data.agents.length) return html`<div class="empty">No agents found. Run an agent with ${'`@watch()`'} to start recording.<code>pip install tokenjuice && tj onboard</code></div>`;
+  return html`
+    <div class="page-title">Status</div>
+    <div style="font-size:12px;color:var(--text-dim);margin:-14px 0 16px;font-family:'IBM Plex Mono',monospace">Click on an agent tile for details</div>
+    <div class="cards">
+      ${data.agents.map(a => html`
+        <div class="card clickable" onClick=${() => { location.hash = '#/traces'; }}>
+          <div class="card-header">
+            <span class="status-dot ${a.status}"></span>
+            ${a.agent_id}
+            <span class="badge badge-${a.status}" style="margin-left:auto">${a.status}</span>
+          </div>
+          <div class="card-row"><span class="label">Cost today <span class="info-btn">i<span class="info-tip">Estimated from token usage. If you're on a subscription plan (e.g. Claude Max), your actual spend may differ.</span></span></span><span class="value">${fmtCost(a.cost_today)}</span></div>
+          <div class="card-row"><span class="label">Tokens</span><span class="value">${fmtTokens(a.input_tokens)} in / ${fmtTokens(a.output_tokens)} out</span></div>
+          <div class="card-row"><span class="label">Tool calls</span><span class="value">${a.tool_call_count}${a.error_count ? ' (' + a.error_count + ' failed)' : ''}</span></div>
+          ${a.duration_seconds != null ? html`<div class="card-row"><span class="label">Duration</span><span class="value">${fmtDur(a.duration_seconds * 1000)}</span></div>` : null}
+          ${a.last_span_time ? html`<div class="card-row"><span class="label">Last seen</span><span class="value">${fmtAgo(a.last_span_time)}</span></div>` : null}
+          ${a.active_alerts > 0 ? html`<div class="card-row"><span class="label">Alerts</span><span class="value" style="color:var(--error)">${a.active_alerts} active</span></div>` : null}
+        </div>
+      `)}
+    </div>
+    ${alerts.length > 0 ? html`
+      <div class="page-title" style="font-size:14px;margin-top:8px">Recent Alerts</div>
+      <div class="table-wrap"><table>
+        <thead><tr><th>Time</th><th>Severity</th><th>Type</th><th>Title</th><th>Agent</th></tr></thead>
+        <tbody>
+          ${alerts.map(a => html`
+            <tr><td>${fmtAgo(a.fired_at)}</td>
+            <td><span class="badge badge-${a.severity}">${a.severity}</span></td>
+            <td>${friendlyAlertType(a.type)}</td>
+            <td>${a.title}</td>
+            <td class="mono">${a.agent_id || '-'}</td></tr>
+          `)}
+        </tbody>
+      </table></div>
+    ` : null}
+  `;
+}
+// ============================
+// Traces View
+// ============================
+function TracesListView() {
+  const [traces, setTraces] = useState([]);
+  const [agentStatus, setAgentStatus] = useState({});
+  const [since, setSince] = useState('24h');
+  const [statusF, setStatusF] = useState('');
+  const load = useCallback(async () => {
+    const [td, sd] = await Promise.all([
+      api('/traces', { since, status: statusF || undefined, limit: 100 }),
+      api('/status'),
+    ]);
+    setTraces(td.traces || []);
+    const map = {};
+    for (const a of (sd.agents || [])) map[a.agent_id] = a.status;
+    setAgentStatus(map);
+  }, [since, statusF]);
+  useEffect(() => { load(); const t = setInterval(load, 10000); return () => clearInterval(t); }, [load]);
+  return html`
+    <div class="page-title">Traces</div>
+    <div style="font-size:12px;color:var(--text-dim);margin:-14px 0 16px;font-family:'IBM Plex Mono',monospace">Click on a trace row for details</div>
+    <div class="filters">
+      <select value=${since} onChange=${e => setSince(e.target.value)}>
+        <option value="1h">Last 1h</option>
+        <option value="6h">Last 6h</option>
+        <option value="24h">Last 24h</option>
+        <option value="7d">Last 7d</option>
+      </select>
+      <select value=${statusF} onChange=${e => setStatusF(e.target.value)}>
+        <option value="">All results</option>
+        <option value="ok">ok</option>
+        <option value="error">error</option>
+      </select>
+      <button class="btn" onClick=${load}>Refresh</button>
+    </div>
+    ${traces.length === 0 ? html`<div class="empty">No traces yet. Run an agent with ${'`@watch()`'} to start recording.</div>` : html`
+      <div class="table-wrap"><table>
+        <thead><tr><th>Agent</th><th>Type</th><th>Time</th><th>Duration</th><th>Cost <span class="info-btn">i<span class="info-tip">Estimated from token usage. If you're on a subscription plan (e.g. Claude Max), your actual spend may differ.</span></span></th><th>Result <span class="info-btn">i<span class="info-tip">Shows "error" if even a single span in this trace failed</span></span></th><th>Status <span class="info-btn">i<span class="info-tip">Agent liveness: active (seen in last 5 min), stale (no recent spans), completed or idle</span></span></th><th>Spans</th><th></th></tr></thead>
+        <tbody>
+          ${dedup(traces).map(t => {
+            const st = agentStatus[t.agent_id];
+            return html`
+            <tr class="clickable" onClick=${() => location.hash = '#/traces/' + t.trace_id} title=${'Trace ' + t.trace_id}>
+              <td class="mono">${t.agent_id || '-'}</td>
+              <td>${friendlySpanName(t.name)}</td>
+              <td>${fmtAgo(t.start_time)}</td>
+              <td>${fmtDur(t.duration_ms)}</td>
+              <td>${fmtCost(t.cost_usd)}</td>
+              <td><span class="badge badge-${t.status_code}">${t.status_code}</span></td>
+              <td>${st ? html`<span class="status-dot ${st}" style="margin-right:5px"></span><span class="badge badge-${st}">${st}</span>` : html`<span style="color:var(--text-dim)">-</span>`}</td>
+              <td>${t.span_count}</td>
+              <td class="chevron">\u2192</td>
+            </tr>
+          `})}
+        </tbody>
+      </table></div>
+    `}
+  `;
+}
+function dedup(traces) {
+  const seen = new Set();
+  return traces.filter(t => {
+    if (seen.has(t.trace_id)) return false;
+    seen.add(t.trace_id);
+    return true;
+  });
+}
+// ============================
+// Trace Detail + Waterfall
+// ============================
+function TraceDetailView({ traceId }) {
+  const [spans, setSpans] = useState([]);
+  const [selected, setSelected] = useState(null);
+  useEffect(() => {
+    api('/traces/' + traceId).then(d => setSpans(d.spans || []));
+  }, [traceId]);
+  if (!spans.length) return html`<div class="empty">Loading trace...</div>`;
+  // Build tree
+  const byId = {};
+  spans.forEach(s => byId[s.span_id] = s);
+  const children = {};
+  spans.forEach(s => {
+    const pid = s.parent_span_id || '__root__';
+    (children[pid] = children[pid] || []).push(s);
+  });
+  const spanIds = new Set(spans.map(s => s.span_id));
+  const roots = spans.filter(s => !s.parent_span_id || !spanIds.has(s.parent_span_id));
+  // Timeline bounds
+  const times = spans.map(s => new Date(s.start_time).getTime()).filter(t => !isNaN(t));
+  const endTimes = spans.map(s => s.end_time ? new Date(s.end_time).getTime() : new Date(s.start_time).getTime() + (s.duration_ms || 0)).filter(t => !isNaN(t));
+  const traceStart = Math.min(...times);
+  const traceEnd = Math.max(...endTimes);
+  const traceDur = traceEnd - traceStart || 1;
+  // Flatten tree for rendering
+  function flatten(nodeList, depth) {
+    let result = [];
+    for (const s of (nodeList || [])) {
+      result.push({ span: s, depth });
+      result = result.concat(flatten(children[s.span_id], depth + 1));
+    }
+    return result;
+  }
+  const rows = flatten(roots, 0);
+  const labelW = 100;
+  const sel = selected ? spans.find(s => s.span_id === selected) : null;
+  // Determine agent name from root span
+  const rootSpan = roots.length ? roots[0] : spans[0];
+  const agentName = rootSpan ? (rootSpan.agent_id || traceId.slice(0, 12)) : traceId.slice(0, 12);
+  return html`
+    <button class="btn btn-back" onClick=${() => location.hash = '#/traces'}>\u2190 Back to traces</button>
+    <div class="page-title">Trace details for ${agentName}</div>
+    <div style="font-size:12px;color:var(--text-dim);margin:-14px 0 16px;font-family:'IBM Plex Mono',monospace">Click a span for details</div>
+    <div class="waterfall">
+      ${rows.map(({ span: s, depth }) => {
+        const st = new Date(s.start_time).getTime() - traceStart;
+        const dur = s.duration_ms || 0;
+        const left = (st / traceDur * 100).toFixed(2);
+        const width = Math.max(dur / traceDur * 100, 3).toFixed(2);
+        const kind = spanKindClass(s.name);
+        const friendly = friendlySpanName(s.name);
+        const isAgent = kind === 'agent';
+        const detail = s.model || s.tool_name || '';
+        const costStr = s.cost_usd != null && s.cost_usd > 0 ? ' \u2014 ' + fmtCost(s.cost_usd) : '';
+        const barLabel = isAgent
+          ? fmtDur(s.duration_ms) + costStr
+          : (detail ? detail + ' \u2014 ' : '') + fmtDur(s.duration_ms) + costStr;
+        const tipLines = [friendly];
+        tipLines.push('Duration: ' + fmtDur(s.duration_ms));
+        if (s.provider) tipLines.push('Provider: ' + s.provider);
+        if (s.model) tipLines.push('Model: ' + s.model);
+        if (s.tool_name) tipLines.push('Tool: ' + s.tool_name);
+        if (s.input_tokens != null) tipLines.push('Input tokens: ' + fmtTokens(s.input_tokens));
+        if (s.output_tokens != null) tipLines.push('Output tokens: ' + fmtTokens(s.output_tokens));
+        if (s.cost_usd != null) tipLines.push('Cost: ' + fmtCost(s.cost_usd));
+        const tooltip = tipLines.join('\n');
+        return html`
+          <div class="wf-row ${selected === s.span_id ? 'selected' : ''}" onClick=${() => setSelected(s.span_id)}>
+            <div class="wf-label" style="width:${labelW}px;padding-left:${depth * 16 + 8}px">${friendly}</div>
+            <div class="wf-track">
+              <div class="wf-bar-wrap${left > 50 ? ' tip-flip' : ''}" style="left:${left}%;width:${width}%">
+                <div class="wf-bar ${kind}" style="width:100%">${barLabel}</div>
+                <div class="wf-tip">${tooltip}</div>
+              </div>
+            </div>
+          </div>
+        `;
+      })}
+    </div>
+    ${sel ? html`
+      <div class="span-detail">
+        <h3>${friendlySpanName(sel.name)}</h3>
+        <div style="color:var(--text-dim);font-size:11px;margin:-8px 0 12px;font-family:'IBM Plex Mono',monospace">${sel.name}</div>
+        <div class="detail-grid">
+          <span class="dk">Duration</span><span class="dv">${fmtDur(sel.duration_ms)}</span>
+          <span class="dk">Status</span><span class="dv">${sel.status_code}</span>
+          <span class="dk">Span ID</span><span class="dv">${sel.span_id}</span>
+          ${sel.provider ? html`<span class="dk">Provider</span><span class="dv">${sel.provider}</span>` : null}
+          ${sel.model ? html`<span class="dk">Model</span><span class="dv">${sel.model}</span>` : null}
+          ${sel.tool_name ? html`<span class="dk">Tool</span><span class="dv">${sel.tool_name}</span>` : null}
+          ${sel.input_tokens != null ? html`<span class="dk">Input tokens</span><span class="dv">${fmtTokens(sel.input_tokens)}</span>` : null}
+          ${sel.output_tokens != null ? html`<span class="dk">Output tokens</span><span class="dv">${fmtTokens(sel.output_tokens)}</span>` : null}
+          ${sel.cost_usd != null ? html`<span class="dk">Cost</span><span class="dv">${fmtCost(sel.cost_usd)}</span>` : null}
+          ${sel.agent_id ? html`<span class="dk">Agent</span><span class="dv">${sel.agent_id}</span>` : null}
+          ${sel.conversation_id ? html`<span class="dk">Conversation</span><span class="dv">${sel.conversation_id}</span>` : null}
+          ${sel.session_id ? html`<span class="dk">Session</span><span class="dv">${sel.session_id}</span>` : null}
+          <span class="dk">Trace ID</span><span class="dv">${sel.trace_id}</span>
+          ${sel.attributes && Object.keys(sel.attributes).length > 0 ? html`
+            <span class="dk">Attributes</span><span class="dv"><pre style="margin:0;white-space:pre-wrap;font-size:11px">${JSON.stringify(sel.attributes, null, 2)}</pre></span>
+          ` : null}
+        </div>
+      </div>
+    ` : null}
+  `;
+}
+// ============================
+// Cost View
+// ============================
+function CostView() {
+  const [rows, setRows] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [since, setSince] = useState('7d');
+  const [groupBy, setGroupBy] = useState('day');
+  const load = useCallback(async () => {
+    const d = await api('/cost', { since, group_by: groupBy });
+    setRows(d.rows || []);
+    setTotal(d.total_cost_usd || 0);
+  }, [since, groupBy]);
+  useEffect(() => { load(); const t = setInterval(load, 10000); return () => clearInterval(t); }, [load]);
+  const totalIn = rows.reduce((s, r) => s + (r.input_tokens || 0), 0);
+  const totalOut = rows.reduce((s, r) => s + (r.output_tokens || 0), 0);
+  return html`
+    <div class="page-title">Cost</div>
+    <div class="filters">
+      <select value=${since} onChange=${e => setSince(e.target.value)}>
+        <option value="1h">Last 1h</option>
+        <option value="6h">Last 6h</option>
+        <option value="24h">Last 24h</option>
+        <option value="7d">Last 7d</option>
+        <option value="30d">Last 30d</option>
+      </select>
+      <select value=${groupBy} onChange=${e => setGroupBy(e.target.value)}>
+        <option value="day">By day</option>
+        <option value="agent">By agent</option>
+        <option value="model">By model</option>
+        <option value="tool">By tool</option>
+      </select>
+      <button class="btn" onClick=${load}>Refresh</button>
+    </div>
+    <div class="summary">
+      <div class="summary-item"><div class="summary-label">Total cost <span class="info-btn">i<span class="info-tip">Estimated from token usage. If you're on a subscription plan (e.g. Claude Max), your actual spend may differ.</span></span></div><div class="summary-value" style="color:var(--accent)">${fmtCost(total)}</div></div>
+      <div class="summary-item"><div class="summary-label">Input tokens</div><div class="summary-value">${fmtTokens(totalIn)}</div></div>
+      <div class="summary-item"><div class="summary-label">Output tokens</div><div class="summary-value">${fmtTokens(totalOut)}</div></div>
+    </div>
+    ${rows.length === 0 ? html`<div class="empty">No cost data for the selected period.</div>` : html`
+      <div class="table-wrap"><table>
+        <thead><tr>
+          <th>${groupBy === 'day' ? 'Date' : groupBy === 'agent' ? 'Agent' : groupBy === 'model' ? 'Model' : 'Tool'}</th>
+          ${groupBy !== 'agent' ? html`<th>Agent</th>` : null}
+          ${groupBy !== 'model' ? html`<th>Model</th>` : null}
+          <th>Input</th><th>Output</th><th>Cost <span class="info-btn">i<span class="info-tip">Estimated from token usage. If you're on a subscription plan (e.g. Claude Max), your actual spend may differ.</span></span></th>
+        </tr></thead>
+        <tbody>
+          ${rows.map(r => html`
+            <tr>
+              <td class="mono">${r.group || '-'}</td>
+              ${groupBy !== 'agent' ? html`<td class="mono">${r.agent_id || '-'}</td>` : null}
+              ${groupBy !== 'model' ? html`<td class="mono">${r.model || '-'}</td>` : null}
+              <td>${fmtTokens(r.input_tokens)}</td>
+              <td>${fmtTokens(r.output_tokens)}</td>
+              <td>${fmtCost(r.cost_usd)}</td>
+            </tr>
+          `)}
+          <tr style="font-weight:600;border-top:2px solid var(--border)">
+            <td colspan=${1 + (groupBy !== 'agent' ? 1 : 0) + (groupBy !== 'model' ? 1 : 0)}></td>
+            <td>${fmtTokens(totalIn)}</td>
+            <td>${fmtTokens(totalOut)}</td>
+            <td>${fmtCost(total)}</td>
+          </tr>
+        </tbody>
+      </table></div>
+    `}
+  `;
+}
+// ============================
+// Alerts View
+// ============================
+function AlertsView() {
+  const [alerts, setAlerts] = useState([]);
+  const [severity, setSeverity] = useState('');
+  const [expanded, setExpanded] = useState(null);
+  const load = useCallback(async () => {
+    const d = await api('/alerts', { severity: severity || undefined });
+    setAlerts(d.alerts || []);
+  }, [severity]);
+  useEffect(() => { load(); const t = setInterval(load, 10000); return () => clearInterval(t); }, [load]);
+  return html`
+    <div class="page-title">Alerts</div>
+    <div class="filters">
+      <select value=${severity} onChange=${e => setSeverity(e.target.value)}>
+        <option value="">All severities</option>
+        <option value="critical">Critical</option>
+        <option value="warning">Warning</option>
+        <option value="info">Info</option>
+      </select>
+      <button class="btn" onClick=${load}>Refresh</button>
+    </div>
+    ${alerts.length === 0 ? html`<div class="empty">No alerts fired. Configure sensitive actions in ${'`.ocw/config.toml`'}.</div>` : html`
+      <div class="table-wrap"><table>
+        <thead><tr><th></th><th>Time</th><th>Severity</th><th>Type</th><th>Title</th><th>Agent</th></tr></thead>
+        <tbody>
+          ${alerts.map(a => html`
+            <tr class="clickable" onClick=${() => setExpanded(expanded === a.alert_id ? null : a.alert_id)}>
+              <td><span class="expand-toggle ${expanded === a.alert_id ? 'open' : ''}">\u25B8</span></td>
+              <td>${fmtAgo(a.fired_at)}</td>
+              <td><span class="badge badge-${a.severity}">${a.severity}</span></td>
+              <td>${friendlyAlertType(a.type)}</td>
+              <td>${a.title}</td>
+              <td class="mono">${a.agent_id || '-'}</td>
+            </tr>
+            ${expanded === a.alert_id ? html`<tr><td colspan="6"><div class="alert-detail">${JSON.stringify(a.detail, null, 2)}</div></td></tr>` : null}
+          `)}
+        </tbody>
+      </table></div>
+    `}
+  `;
+}
+// ============================
+// Drift View
+// ============================
+function DriftView() {
+  const [data, setData] = useState(null);
+  useEffect(() => {
+    api('/drift').then(d => setData(d));
+    const t = setInterval(() => api('/drift').then(d => setData(d)), 10000);
+    return () => clearInterval(t);
+  }, []);
+  if (!data) return html`<div class="empty">Loading...</div>`;
+  const agents = data.agents || [];
+  if (!agents.length) return html`<div class="empty">No baselines built yet. Run at least 10 sessions to establish a behavioral baseline.</div>`;
+  const metrics = [
+    ['Input tokens', 'avg_input_tokens', 'stddev_input_tokens', 'input_tokens'],
+    ['Output tokens', 'avg_output_tokens', 'stddev_output_tokens', 'output_tokens'],
+    ['Session duration', 'avg_session_duration_s', 'stddev_session_duration', 'duration_seconds'],
+    ['Tool calls', 'avg_tool_call_count', 'stddev_tool_call_count', 'tool_call_count'],
+  ];
+  return html`
+    <div class="page-title">Drift Detection</div>
+    ${agents.map(a => html`
+      <div class="drift-section">
+        <h3>${a.agent_id}</h3>
+        ${!a.baseline ? html`<div style="color:var(--text-dim);font-size:13px">No baseline yet.</div>` : html`
+          <div style="font-size:12px;color:var(--text-dim);margin-bottom:12px;font-family:'IBM Plex Mono',monospace">
+            Baseline: ${a.baseline.sessions_sampled} sessions sampled${a.baseline.computed_at ? ', computed ' + fmtAgo(a.baseline.computed_at) : ''}
+          </div>
+          <table>
+            <thead><tr><th>Metric</th><th>Baseline</th><th>Latest</th><th>Z-score (threshold: 2.0\u03C3)</th><th></th></tr></thead>
+            <tbody>
+              ${metrics.map(([label, avgKey, stdKey, latestKey]) => {
+                const avg = a.baseline[avgKey];
+                const std = a.baseline[stdKey];
+                const latest = a.latest_session ? a.latest_session[latestKey] : null;
+                let z = null;
+                let zDisplay = '-';
+                if (avg != null && latest != null) {
+                  if (std != null && std > 0) {
+                    z = (latest - avg) / std;
+                    zDisplay = z.toFixed(2);
+                  } else if (std === 0 || std == null) {
+                    // Match drift.py z_score: inf when stddev=0 and value != mean
+                    if (latest !== avg) {
+                      z = Infinity;
+                      zDisplay = 'inf';
+                    } else {
+                      z = 0;
+                      zDisplay = '0.00';
+                    }
+                  }
+                }
+                const pass = z == null || (Number.isFinite(z) && Math.abs(z) < 2);
+                return html`
+                  <tr>
+                    <td>${label}</td>
+                    <td class="mono">${avg != null ? avg.toFixed(1) : '-'}${std != null ? ' +/- ' + std.toFixed(1) : ''}</td>
+                    <td class="mono">${latest != null ? (typeof latest === 'number' ? latest.toFixed(1) : latest) : '-'}</td>
+                    <td class="mono" style="color:${pass ? 'var(--success)' : 'var(--error)'}">${zDisplay}</td>
+                    <td><span class="badge ${pass ? 'badge-ok' : 'badge-critical'}">${pass ? 'pass' : 'drift'}</span></td>
+                  </tr>
+                `;
+              })}
+            </tbody>
+          </table>
+        `}
+      </div>
+    `)}
+  `;
+}
+// ============================
+// Budget View
+// ============================
+function BudgetRow({ scope, label, daily, session, effectiveDaily, effectiveSession, onSave }) {
+  const [dailyVal, setDailyVal] = useState(daily != null ? String(daily) : '');
+  const [sessionVal, setSessionVal] = useState(session != null ? String(session) : '');
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+  const save = async () => {
+    setSaving(true);
+    try {
+      await onSave(scope, dailyVal, sessionVal);
+      setSaved(true);
+      setTimeout(() => setSaved(false), 2000);
+    } catch (e) {
+      alert('Save failed: ' + e.message);
+    } finally {
+      setSaving(false);
+    }
+  };
+  const dailyPlaceholder = (effectiveDaily != null && daily == null)
+    ? `default: $${effectiveDaily}` : 'no limit';
+  const sessionPlaceholder = (effectiveSession != null && session == null)
+    ? `default: $${effectiveSession}` : 'no limit';
+  return html`
+    <tr>
+      <td class="mono">${label}</td>
+      <td>
+        <input type="number" min="0" step="0.01" placeholder=${dailyPlaceholder}
+          value=${dailyVal} onInput=${e => setDailyVal(e.target.value)}
+          style="width:120px;background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:4px 6px;color:var(--text);font-size:13px" />
+      </td>
+      <td>
+        <input type="number" min="0" step="0.01" placeholder=${sessionPlaceholder}
+          value=${sessionVal} onInput=${e => setSessionVal(e.target.value)}
+          style="width:120px;background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:4px 6px;color:var(--text);font-size:13px" />
+      </td>
+      <td>
+        <button class="btn" onClick=${save} disabled=${saving}
+          style="padding:4px 12px;font-size:12px">
+          ${saving ? 'Saving...' : saved ? '\u2713 Saved' : 'Save'}
+        </button>
+      </td>
+    </tr>
+  `;
+}
+function BudgetView() {
+  const [data, setData] = useState(null);
+  const [alerts, setAlerts] = useState([]);
+  const [error, setError] = useState(null);
+  const load = () => Promise.all([
+    api('/budget'),
+    api('/alerts', { type: 'cost_budget_daily', since: '24h' })
+      .then(d => d.alerts || [])
+      .catch(() => []),
+    api('/alerts', { type: 'cost_budget_session', since: '24h' })
+      .then(d => d.alerts || [])
+      .catch(() => []),
+  ]).then(([budget, daily, session]) => {
+    setData(budget);
+    setAlerts([...daily, ...session].sort((a, b) => b.fired_at.localeCompare(a.fired_at)));
+  }).catch(e => setError(e.message));
+  useEffect(() => { load(); const t = setInterval(load, 10000); return () => clearInterval(t); }, []);
+  const handleSave = async (scope, dailyStr, sessionStr) => {
+    // Empty field means "no limit" — send 0 so the server runs validate_budget_value(0) → None.
+    const daily = dailyStr !== '' ? parseFloat(dailyStr) : 0;
+    const session = sessionStr !== '' ? parseFloat(sessionStr) : 0;
+    const updated = await apiPost('/budget', {
+      scope,
+      daily_usd: daily,
+      session_usd: session,
+    });
+    setData(updated);
+  };
+  if (error) return html`<div class="empty" style="color:var(--error)">${error}</div>`;
+  if (!data) return html`<div class="empty">Loading...</div>`;
+  const agentEntries = Object.entries(data.agents || {});
+  return html`
+    <div class="page-title">Budget</div>
+    <div style="font-size:13px;font-weight:600;margin-bottom:8px">Budget limits</div>
+    <div style="color:var(--text-dim);font-size:12px;margin-bottom:12px">
+      Clear a field or enter 0 to remove a limit. Changes are written to your config file immediately.
+    </div>
+    <div class="table-wrap"><table>
+      <thead><tr><th>Scope</th><th>Daily (USD)</th><th>Per-session (USD)</th><th></th></tr></thead>
+      <tbody>
+        <${BudgetRow}
+          scope="defaults"
+          label="defaults"
+          daily=${data.defaults.daily_usd}
+          session=${data.defaults.session_usd}
+          onSave=${handleSave}
+        />
+        ${agentEntries.map(([id, b]) => html`
+          <${BudgetRow}
+            key=${id}
+            scope=${id}
+            label=${id}
+            daily=${b.configured.daily_usd}
+            session=${b.configured.session_usd}
+            effectiveDaily=${b.effective.daily_usd}
+            effectiveSession=${b.effective.session_usd}
+            onSave=${handleSave}
+          />
+        `)}
+        ${agentEntries.length === 0 ? html`
+          <tr><td colspan="4" style="color:var(--text-dim);font-size:13px;padding:12px 0">
+            No agents configured yet. Run your agent once to register it.
+          </td></tr>
+        ` : null}
+      </tbody>
+    </table></div>
+    ${alerts.length === 0
+      ? html`<div class="empty" style="margin-top:20px">No budget alerts in the last 24h.</div>`
+      : html`
+        <div style="margin-top:24px">
+          <div style="font-size:13px;font-weight:600;margin-bottom:8px;color:var(--error)">
+            Budget alerts (last 24h)
+          </div>
+          <div class="table-wrap"><table>
+            <thead><tr><th>Time</th><th>Severity</th><th>Type</th><th>Agent</th><th>Detail</th></tr></thead>
+            <tbody>
+              ${alerts.map(a => html`
+                <tr>
+                  <td>${fmtAgo(a.fired_at)}</td>
+                  <td><span class="badge badge-${a.severity}">${a.severity}</span></td>
+                  <td>${friendlyAlertType(a.type)}</td>
+                  <td class="mono">${a.agent_id || '-'}</td>
+                  <td style="color:var(--text-dim);font-size:12px">${a.detail.message || ''}</td>
+                </tr>
+              `)}
+            </tbody>
+          </table></div>
+        </div>
+      `}
+  `;
+}
+// ============================
+// App Router
+// ============================
+function App() {
+  const [route, setRoute] = useState(getView());
+  useEffect(() => {
+    const handler = () => setRoute(getView());
+    window.addEventListener('hashchange', handler);
+    return () => window.removeEventListener('hashchange', handler);
+  }, []);
+  // Update active nav link
+  useEffect(() => {
+    document.querySelectorAll('.nav-link').forEach(el => {
+      el.classList.toggle('active', el.dataset.view === route.view);
+    });
+  }, [route.view]);
+  // Default to status
+  if (!location.hash || location.hash === '#/') {
+    location.hash = '#/status';
+    return null;
+  }
+  switch (route.view) {
+    case 'status': return html`<${StatusView} />`;
+    case 'traces':
+      if (route.param) return html`<${TraceDetailView} traceId=${route.param} />`;
+      return html`<${TracesListView} />`;
+    case 'cost': return html`<${CostView} />`;
+    case 'alerts': return html`<${AlertsView} />`;
+    case 'drift': return html`<${DriftView} />`;
+    case 'budget': return html`<${BudgetView} />`;
+    default: return html`<div class="empty">Page not found.</div>`;
+  }
+}
+render(html`<${App} />`, document.getElementById('app'));
+</script>
+</body>
+</html>