switchboard-fyi 0.1.0

package/bin/switchboard-inspector.mjs

@@ -0,0 +1,814 @@
+#!/usr/bin/env node
+
+import fs from "node:fs";
+import http from "node:http";
+import path from "node:path";
+import { URL } from "node:url";
+import {
+  harnessLogPath,
+  knownHarnesses,
+  logPath,
+  normalizeHarness,
+  readJsonl,
+  switchboardHome,
+} from "../lib/switchboard-core.mjs";
+
+const args = process.argv.slice(2);
+const host = readFlag("--host", "127.0.0.1");
+const port = Number(readFlag("--port", process.env.PORT || "8799"));
+const maxEvents = Number(readFlag("--max-events", "1000"));
+const requestedHarness = readFlag("--harness", "");
+const scopeHarness = requestedHarness ? normalizeHarness(requestedHarness) : null;
+const unsafeBind = args.includes("--unsafe-bind") || process.env.SWITCHBOARD_UNSAFE_BIND === "1";
+if (requestedHarness && !scopeHarness) throw new Error(`Unknown Switchboard harness: ${requestedHarness}`);
+if (!unsafeBind && !isLoopbackHost(host)) {
+  throw new Error("Refusing to bind Switchboard inspector to a non-loopback host. Use --unsafe-bind only for trusted local development.");
+}
+
+function readFlag(name, fallback) {
+  const index = args.indexOf(name);
+  if (index === -1 || index === args.length - 1) return fallback;
+  return args[index + 1];
+}
+
+function isLoopbackHost(value) {
+  return ["127.0.0.1", "::1", "localhost"].includes(String(value || "").toLowerCase());
+}
+
+function send(res, status, body, headers = {}) {
+  res.writeHead(status, {
+    "cache-control": "no-store",
+    ...headers,
+  });
+  res.end(body);
+}
+
+function sendJson(res, status, body) {
+  send(res, status, JSON.stringify(body), { "content-type": "application/json" });
+}
+
+function decisionIdFor(event) {
+  return (
+    event.decisionId ||
+    event.route?.decisionId ||
+    event.routingPacketSummary?.decisionId ||
+    event.route?.routingApi?.decisionId ||
+    null
+  );
+}
+
+function eventTime(event) {
+  const value = Date.parse(event.ts || "");
+  return Number.isFinite(value) ? value : 0;
+}
+
+function eventHarness(event, fallback = null) {
+  return normalizeHarness(event?.harness || event?.integration || fallback);
+}
+
+function eventSources() {
+  const sources = [];
+  if (scopeHarness) {
+    sources.push({ file: harnessLogPath(scopeHarness, "events.jsonl"), fallbackHarness: scopeHarness });
+    sources.push({ file: logPath("events.jsonl"), fallbackHarness: null });
+    return sources;
+  }
+  for (const harness of knownHarnesses()) {
+    sources.push({ file: harnessLogPath(harness, "events.jsonl"), fallbackHarness: harness });
+  }
+  sources.push({ file: logPath("events.jsonl"), fallbackHarness: null });
+  return sources;
+}
+
+function readEvents() {
+  const seen = new Set();
+  const output = [];
+  for (const source of eventSources()) {
+    for (const event of readJsonl(source.file)) {
+      const harness = eventHarness(event, source.fallbackHarness);
+      if (scopeHarness && harness !== scopeHarness) continue;
+      const decisionId = decisionIdFor(event) || "";
+      const key = `${event.ts || ""}|${event.kind || ""}|${decisionId}|${event.sessionId || ""}|${event.path || ""}`;
+      if (seen.has(key)) continue;
+      seen.add(key);
+      output.push({ ...event, harness: event.harness || harness || undefined });
+    }
+  }
+  return output.sort((a, b) => eventTime(a) - eventTime(b)).slice(-maxEvents);
+}
+
+function compactText(value, length = 260) {
+  const text = String(value || "").replace(/\s+/g, " ").trim();
+  return text.length > length ? `${text.slice(0, length - 1)}...` : text;
+}
+
+function eventSummary(event) {
+  const route = event.route || {};
+  return {
+    ts: event.ts,
+    kind: event.kind,
+    harness: event.harness,
+    sessionId: event.sessionId || null,
+    requestedModel: event.requestedModel || null,
+    forwardedModel: event.forwardedModel || route.targetModel || null,
+    router: route.source || event.provider || null,
+    targetTier: route.targetTier || route.wouldTargetTier || null,
+    reasonCode: route.reasonCode || null,
+    confidence: route.confidence ?? null,
+    upstreamStatus: event.status ?? null,
+    upstreamLatencyMs: event.latencyMs ?? event.headerLatencyMs ?? null,
+    outputTextChars: event.outputTextChars ?? null,
+    promptPreview: event.promptPreview || event.payload?.context?.routingText || "",
+  };
+}
+
+function buildCalls() {
+  const rows = readEvents();
+  const grouped = new Map();
+  const ungrouped = [];
+
+  for (const event of rows) {
+    const id = decisionIdFor(event);
+    if (!id) {
+      ungrouped.push(event);
+      continue;
+    }
+    if (!grouped.has(id)) {
+      grouped.set(id, {
+        decisionId: id,
+        firstTs: event.ts,
+        lastTs: event.ts,
+        events: [],
+      });
+    }
+    const group = grouped.get(id);
+    group.events.push(event);
+    if (eventTime(event) < eventTime({ ts: group.firstTs })) group.firstTs = event.ts;
+    if (eventTime(event) > eventTime({ ts: group.lastTs })) group.lastTs = event.ts;
+  }
+
+  const calls = [...grouped.values()].map((call) => {
+    const payload = call.events.find((event) => event.kind === "classification_api_payload" || event.kind === "routing_api_payload");
+    const decision = call.events.find((event) => event.kind === "classification_api_result" || event.kind === "routing_api_decision");
+    const modelRequest = call.events.find((event) => event.kind === "model_request");
+    const routeApplied = call.events.find((event) => event.kind === "route_applied");
+    const forwardAttempt = call.events.find((event) => event.kind === "forward_attempt");
+    const forwardResult = call.events.find((event) => event.kind === "forward_result");
+    const upstreamResponse = call.events.find((event) => event.kind === "upstream_response");
+    const route = routeApplied?.route || modelRequest?.route || decision?.route || {};
+    const packet = payload?.payload || null;
+    const requested = routeApplied?.requestedModel || modelRequest?.requestedModel || packet?.observed?.requestedModel || null;
+    const forwarded = routeApplied?.forwardedModel || forwardAttempt?.forwardedModel || route.targetModel || requested;
+    const payloadBytes = payload?.payloadBytes || routeApplied?.routingPacketSummary?.payloadBytes || modelRequest?.routingPacketSummary?.payloadBytes || 0;
+    const fullPacketBytes =
+      payload?.fullPacketBytes ||
+      routeApplied?.routingPacketSummary?.fullPacketBytes ||
+      modelRequest?.routingPacketSummary?.fullPacketBytes ||
+      0;
+    const prompt =
+      routeApplied?.promptPreview ||
+      modelRequest?.promptPreview ||
+      packet?.context?.routingText ||
+      packet?.context?.latestUserText ||
+      "";
+
+    return {
+      decisionId: call.decisionId,
+      firstTs: call.firstTs,
+      lastTs: call.lastTs,
+      harness: routeApplied?.harness || modelRequest?.harness || payload?.harness || decision?.harness || "-",
+      router: route.source || decision?.provider || payload?.provider || "switchboard",
+      targetTier: route.targetTier || route.wouldTargetTier || "-",
+      difficulty: route.difficulty ?? null,
+      decision: route.decision || "-",
+      reasonCode: route.reasonCode || "-",
+      confidence: route.confidence ?? null,
+      requestedModel: requested || "-",
+      forwardedModel: forwarded || "-",
+      estimatedInputTokens: route.estimatedInputTokens || packet?.derived?.estimatedInputTokens || 0,
+      payloadBytes,
+      fullPacketBytes,
+      routingLatencyMs: route.routingApi?.latencyMs ?? null,
+      upstreamStatus: forwardResult?.status ?? null,
+      upstreamLatencyMs: upstreamResponse?.latencyMs ?? null,
+      upstreamBodyBytes: upstreamResponse?.bodyBytes ?? null,
+      upstreamOutputTextChars: upstreamResponse?.outputTextChars ?? null,
+      upstreamOk: upstreamResponse?.ok ?? null,
+      promptPreview: compactText(prompt, 320),
+      hasPayload: Boolean(payload),
+      hasDecision: Boolean(decision),
+      hasRouteApplied: Boolean(routeApplied),
+      hasForwardResult: Boolean(forwardResult),
+      hasUpstreamResponse: Boolean(upstreamResponse),
+      payload,
+      decisionEvent: decision,
+      modelRequest,
+      routeApplied,
+      forwardAttempt,
+      forwardResult,
+      upstreamResponse,
+      events: call.events.map(eventSummary),
+      rawEvents: call.events,
+    };
+  });
+
+  calls.sort((a, b) => eventTime({ ts: b.lastTs }) - eventTime({ ts: a.lastTs }));
+
+  return {
+    generatedAt: new Date().toISOString(),
+    logFile: scopeHarness ? harnessLogPath(scopeHarness, "events.jsonl") : logPath("events.jsonl"),
+    logFiles: eventSources().map((source) => source.file),
+    scopeHarness,
+    switchboardHome: switchboardHome(),
+    calls,
+    ungroupedCount: ungrouped.length,
+  };
+}
+
+function handleApi(req, res, url) {
+  if (url.pathname === "/api/calls") {
+    sendJson(res, 200, buildCalls());
+    return true;
+  }
+  if (url.pathname === "/api/status") {
+    const files = eventSources().map((source) => source.file);
+    const stats = files.map((file) => {
+      try {
+        const value = fs.statSync(file);
+        return { file, size: value.size, mtime: value.mtime.toISOString() };
+      } catch {
+        return { file, size: 0, mtime: null };
+      }
+    });
+    sendJson(res, 200, {
+      ok: true,
+      switchboardHome: switchboardHome(),
+      scopeHarness,
+      logFile: scopeHarness ? harnessLogPath(scopeHarness, "events.jsonl") : logPath("events.jsonl"),
+      logFiles: files,
+      stat: stats[0] || null,
+      stats,
+    });
+    return true;
+  }
+  return false;
+}
+
+const html = String.raw`<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Switchboard Inspector</title>
+  <style>
+    :root {
+      color-scheme: dark;
+      --bg: #0d1014;
+      --panel: #151a20;
+      --panel-2: #1b222b;
+      --line: #303945;
+      --text: #eef3f7;
+      --muted: #9ba9b7;
+      --green: #3bc982;
+      --yellow: #f4bf52;
+      --blue: #63a8ff;
+      --red: #ff6b6b;
+      --teal: #41c7b9;
+      --code: #10141a;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      min-height: 100vh;
+      background: var(--bg);
+      color: var(--text);
+      font: 14px/1.45 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    }
+    header {
+      height: 58px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 18px;
+      border-bottom: 1px solid var(--line);
+      background: #11161c;
+      position: sticky;
+      top: 0;
+      z-index: 5;
+    }
+    h1 {
+      font-size: 17px;
+      font-weight: 650;
+      margin: 0;
+      letter-spacing: 0;
+    }
+    .header-meta {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .layout {
+      display: grid;
+      grid-template-columns: minmax(360px, 42vw) minmax(520px, 1fr);
+      height: calc(100vh - 58px);
+      min-height: 620px;
+    }
+    aside {
+      border-right: 1px solid var(--line);
+      background: var(--panel);
+      min-width: 0;
+      overflow: hidden;
+      display: flex;
+      flex-direction: column;
+    }
+    main {
+      min-width: 0;
+      overflow: auto;
+      background: var(--bg);
+    }
+    .toolbar {
+      display: grid;
+      grid-template-columns: 1fr 108px 108px;
+      gap: 8px;
+      padding: 12px;
+      border-bottom: 1px solid var(--line);
+      background: var(--panel);
+    }
+    input, select {
+      width: 100%;
+      height: 34px;
+      border: 1px solid var(--line);
+      border-radius: 6px;
+      background: #0f141a;
+      color: var(--text);
+      padding: 0 10px;
+      font: inherit;
+      outline: none;
+    }
+    input:focus, select:focus { border-color: var(--blue); }
+    .call-list {
+      overflow: auto;
+      min-height: 0;
+    }
+    .call {
+      width: 100%;
+      text-align: left;
+      border: 0;
+      border-bottom: 1px solid var(--line);
+      background: transparent;
+      color: inherit;
+      padding: 12px;
+      cursor: pointer;
+      display: block;
+    }
+    .call:hover { background: #1a2028; }
+    .call.active {
+      background: #202833;
+      box-shadow: inset 3px 0 0 var(--teal);
+    }
+    .row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      min-width: 0;
+    }
+    .model {
+      color: var(--text);
+      font-size: 13px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      min-width: 0;
+    }
+    .time {
+      color: var(--muted);
+      font-variant-numeric: tabular-nums;
+      font-size: 12px;
+      white-space: nowrap;
+    }
+    .prompt {
+      color: #c8d2dc;
+      margin-top: 8px;
+      font-size: 13px;
+      min-height: 18px;
+    }
+    .chips {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin-top: 9px;
+    }
+    .chip {
+      display: inline-flex;
+      align-items: center;
+      min-height: 22px;
+      border: 1px solid var(--line);
+      border-radius: 999px;
+      padding: 2px 8px;
+      color: #dbe6ef;
+      background: #111820;
+      font-size: 12px;
+      white-space: nowrap;
+    }
+    .chip.lower { border-color: rgba(59, 201, 130, .55); color: var(--green); }
+    .chip.mid { border-color: rgba(244, 191, 82, .55); color: var(--yellow); }
+    .chip.best { border-color: rgba(99, 168, 255, .55); color: var(--blue); }
+    .chip.error { border-color: rgba(255, 107, 107, .65); color: var(--red); }
+    .detail {
+      padding: 16px;
+      max-width: 1280px;
+      margin: 0 auto;
+    }
+    .summary {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(0, 1fr));
+      gap: 10px;
+      margin-bottom: 14px;
+    }
+    .metric {
+      border: 1px solid var(--line);
+      background: var(--panel);
+      border-radius: 8px;
+      padding: 10px;
+      min-width: 0;
+    }
+    .metric .label {
+      color: var(--muted);
+      font-size: 12px;
+      margin-bottom: 5px;
+    }
+    .metric .value {
+      font-size: 16px;
+      font-weight: 650;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .tabs {
+      display: flex;
+      gap: 6px;
+      border-bottom: 1px solid var(--line);
+      margin-top: 14px;
+    }
+    .tab {
+      border: 1px solid transparent;
+      border-bottom: 0;
+      background: transparent;
+      color: var(--muted);
+      padding: 9px 12px;
+      border-radius: 7px 7px 0 0;
+      cursor: pointer;
+      font: inherit;
+    }
+    .tab.active {
+      background: var(--panel);
+      color: var(--text);
+      border-color: var(--line);
+    }
+    .pane {
+      display: none;
+      border: 1px solid var(--line);
+      border-top: 0;
+      background: var(--panel);
+      border-radius: 0 0 8px 8px;
+      min-height: 360px;
+    }
+    .pane.active { display: block; }
+    .split {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+      padding: 12px;
+    }
+    .block {
+      min-width: 0;
+      border: 1px solid var(--line);
+      background: var(--panel-2);
+      border-radius: 8px;
+      overflow: hidden;
+    }
+    .block-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 10px;
+      padding: 9px 10px;
+      color: var(--muted);
+      border-bottom: 1px solid var(--line);
+      font-size: 12px;
+      text-transform: uppercase;
+    }
+    pre {
+      margin: 0;
+      padding: 12px;
+      white-space: pre-wrap;
+      word-break: break-word;
+      overflow: auto;
+      max-height: 62vh;
+      background: var(--code);
+      color: #dce8f2;
+      font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    }
+    .empty {
+      padding: 36px;
+      color: var(--muted);
+      text-align: center;
+    }
+    .copy {
+      border: 1px solid var(--line);
+      background: #10161d;
+      color: var(--text);
+      border-radius: 5px;
+      height: 26px;
+      padding: 0 8px;
+      cursor: pointer;
+      font-size: 12px;
+    }
+    .copy:hover { border-color: var(--blue); }
+    @media (max-width: 980px) {
+      .layout { grid-template-columns: 1fr; height: auto; }
+      aside { height: 48vh; border-right: 0; border-bottom: 1px solid var(--line); }
+      .summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+      .split { grid-template-columns: 1fr; }
+      header { position: static; }
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Switchboard Inspector</h1>
+    <div class="header-meta">
+      <span id="status">Loading...</span>
+      <span id="log-path"></span>
+    </div>
+  </header>
+  <div class="layout">
+    <aside>
+      <div class="toolbar">
+        <input id="search" placeholder="Search calls" />
+        <select id="tier">
+          <option value="">All tiers</option>
+          <option value="lower">Lower</option>
+          <option value="mid">Mid</option>
+          <option value="best">Best</option>
+          <option value="error">Errors</option>
+        </select>
+        <select id="tool">
+          <option value="">All tools</option>
+          <option value="codex">Codex</option>
+          <option value="claude">Claude</option>
+        </select>
+      </div>
+      <div id="call-list" class="call-list"></div>
+    </aside>
+    <main>
+      <div id="detail" class="detail">
+        <div class="empty">Waiting for route events.</div>
+      </div>
+    </main>
+  </div>
+  <script>
+    const state = { calls: [], selectedId: null, tab: 'overview', query: '', tier: '', tool: '', autoRefresh: true };
+    const $ = (id) => document.getElementById(id);
+    const formatJson = (value) => JSON.stringify(value ?? null, null, 2);
+    const safe = (value) => String(value ?? '');
+    const shortTime = (value) => value ? new Date(value).toLocaleTimeString() : '-';
+    const compactNumber = (value) => {
+      const n = Number(value || 0);
+      if (n >= 1_000_000) return (n / 1_000_000).toFixed(1) + 'm';
+      if (n >= 1_000) return (n / 1_000).toFixed(1) + 'k';
+      return String(n);
+    };
+    const tierClass = (call) => call.reasonCode === 'routing_api_error' ? 'error' : safe(call.targetTier);
+    const isMatch = (call) => {
+      const q = state.query.toLowerCase().trim();
+      const text = [
+        call.decisionId, call.harness, call.router, call.targetTier, call.reasonCode,
+        call.requestedModel, call.forwardedModel, call.promptPreview
+      ].join(' ').toLowerCase();
+      if (q && !text.includes(q)) return false;
+      if (state.tool && call.harness !== state.tool) return false;
+      if (state.tier === 'error' && call.reasonCode !== 'routing_api_error') return false;
+      if (state.tier && state.tier !== 'error' && call.targetTier !== state.tier) return false;
+      return true;
+    };
+    function copyJson(id) {
+      const node = document.querySelector('[data-json-id="' + id + '"]');
+      if (!node) return;
+      navigator.clipboard?.writeText(node.textContent);
+    }
+    window.copyJson = copyJson;
+    function jsonBlock(title, id, value) {
+      return '<div class="block"><div class="block-title"><span>' + escapeHtml(title) + '</span><button class="copy" data-copy-id="' + escapeHtml(id) + '">Copy</button></div><pre data-json-id="' + escapeHtml(id) + '">' + escapeHtml(formatJson(value)) + '</pre></div>';
+    }
+    function escapeHtml(value) {
+      return String(value).replace(/[&<>"']/g, (ch) => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[ch]));
+    }
+    function renderList() {
+      const calls = state.calls.filter(isMatch);
+      $('call-list').innerHTML = calls.length ? calls.map((call) => {
+        const active = call.decisionId === state.selectedId ? ' active' : '';
+        const chipClass = tierClass(call);
+        return '<button class="call' + active + '" data-id="' + call.decisionId + '">' +
+          '<div class="row"><div class="model">' + escapeHtml(call.requestedModel + ' -> ' + call.forwardedModel) + '</div><div class="time">' + shortTime(call.lastTs) + '</div></div>' +
+          '<div class="prompt">' + escapeHtml(call.promptPreview || '(no preview)') + '</div>' +
+          '<div class="chips">' +
+            '<span class="chip">' + escapeHtml(call.harness) + '</span>' +
+            '<span class="chip">' + escapeHtml(call.router) + '</span>' +
+            '<span class="chip ' + chipClass + '">' + escapeHtml(call.targetTier || '-') + '</span>' +
+            '<span class="chip">' + escapeHtml(call.reasonCode || '-') + '</span>' +
+            '<span class="chip">' + compactNumber(call.estimatedInputTokens) + ' tok</span>' +
+          '</div>' +
+        '</button>';
+      }).join('') : '<div class="empty">No matching calls.</div>';
+      document.querySelectorAll('.call').forEach((node) => {
+        node.addEventListener('click', () => {
+          state.selectedId = node.dataset.id;
+          render();
+        });
+      });
+    }
+    function scrollTargets() {
+      return {
+        list: $('call-list'),
+        main: document.querySelector('main'),
+        panes: [...document.querySelectorAll('.pane.active pre')],
+      };
+    }
+    function snapshotScroll() {
+      const targets = scrollTargets();
+      return {
+        listTop: targets.list?.scrollTop || 0,
+        mainTop: targets.main?.scrollTop || 0,
+        paneTops: targets.panes.map((node) => node.scrollTop || 0),
+      };
+    }
+    function restoreScroll(snapshot) {
+      if (!snapshot) return;
+      requestAnimationFrame(() => {
+        const targets = scrollTargets();
+        if (targets.list) targets.list.scrollTop = snapshot.listTop;
+        if (targets.main) targets.main.scrollTop = snapshot.mainTop;
+        targets.panes.forEach((node, index) => {
+          node.scrollTop = snapshot.paneTops[index] || 0;
+        });
+      });
+    }
+    function metric(label, value) {
+      return '<div class="metric"><div class="label">' + escapeHtml(label) + '</div><div class="value">' + escapeHtml(value) + '</div></div>';
+    }
+    function tabs(call) {
+      const names = [
+        ['overview', 'Overview'],
+        ['payload', 'Payload'],
+        ['decision', 'Decision'],
+        ['applied', 'Applied Route'],
+        ['result', 'Upstream Result'],
+        ['raw', 'Raw Events']
+      ];
+      return '<div class="tabs">' + names.map(([id, label]) =>
+        '<button class="tab ' + (state.tab === id ? 'active' : '') + '" data-tab="' + id + '">' + label + '</button>'
+      ).join('') + '</div>' +
+      names.map(([id]) => '<div class="pane ' + (state.tab === id ? 'active' : '') + '">' + paneContent(id, call) + '</div>').join('');
+    }
+    function paneContent(id, call) {
+      if (id === 'overview') {
+        return '<div class="split">' +
+          jsonBlock('Context', 'context', call.payload?.payload?.context) +
+          jsonBlock('Route', 'route', call.routeApplied?.route || call.modelRequest?.route || call.decisionEvent?.route) +
+        '</div>';
+      }
+      if (id === 'payload') {
+        return '<div class="split">' +
+          jsonBlock('Compact Classifier Payload', 'payload', call.payload?.payload) +
+          jsonBlock('Full Packet Summary', 'observed', call.payload?.fullPacketSummary || { observed: call.payload?.payload?.observed, derived: call.payload?.payload?.derived }) +
+        '</div>';
+      }
+      if (id === 'decision') {
+        return '<div class="split">' +
+          jsonBlock('Routing API Decision Event', 'decision', call.decisionEvent) +
+          jsonBlock('Classifier Response', 'classifier', call.decisionEvent?.route?.routingApi) +
+        '</div>';
+      }
+      if (id === 'applied') {
+        return '<div class="split">' +
+          jsonBlock('Route Applied', 'applied', call.routeApplied) +
+          jsonBlock('Forwarding', 'forwarding', { attempt: call.forwardAttempt, result: call.forwardResult }) +
+        '</div>';
+      }
+      if (id === 'result') {
+        return '<div class="split">' +
+          jsonBlock('Upstream Response Summary', 'upstream-response', call.upstreamResponse) +
+          jsonBlock('Result Audit', 'result-audit', {
+            decisionId: call.decisionId,
+            originalRequestedModel: call.upstreamResponse?.originalRequestedModel || call.requestedModel,
+            requestedModel: call.requestedModel,
+            forwardedModel: call.forwardedModel,
+            targetTier: call.targetTier,
+            reasonCode: call.reasonCode,
+            classifierConfidence: call.confidence,
+            upstreamStatus: call.upstreamStatus,
+            upstreamOk: call.upstreamOk,
+            upstreamLatencyMs: call.upstreamLatencyMs,
+            upstreamOutputTextChars: call.upstreamOutputTextChars,
+            outputPreview: call.upstreamResponse?.outputPreview || '',
+            usage: call.upstreamResponse?.usage || null,
+            errorSummary: call.upstreamResponse?.errorSummary || null,
+          }) +
+        '</div>';
+      }
+      return '<div class="split">' + jsonBlock('Raw Events', 'raw', call.rawEvents) + jsonBlock('Event Summaries', 'summaries', call.events) + '</div>';
+    }
+    function renderDetail() {
+      const call = state.calls.find((item) => item.decisionId === state.selectedId) || state.calls[0];
+      if (!call) {
+        $('detail').innerHTML = '<div class="empty">No route events yet.</div>';
+        return;
+      }
+      state.selectedId = call.decisionId;
+      $('detail').innerHTML =
+        '<div class="summary">' +
+          metric('Tier', call.targetTier || '-') +
+          metric('Route', call.requestedModel + ' -> ' + call.forwardedModel) +
+          metric('Reason', call.reasonCode || '-') +
+          metric('Classifier latency', call.routingLatencyMs == null ? '-' : call.routingLatencyMs + 'ms') +
+          metric('Input tokens', compactNumber(call.estimatedInputTokens)) +
+          metric('Classifier payload', compactNumber(call.payloadBytes) + ' bytes') +
+          metric('Full packet', compactNumber(call.fullPacketBytes) + ' bytes') +
+          metric('Upstream', call.upstreamStatus == null ? '-' : String(call.upstreamStatus)) +
+          metric('Result latency', call.upstreamLatencyMs == null ? '-' : call.upstreamLatencyMs + 'ms') +
+          metric('Output chars', call.upstreamOutputTextChars == null ? '-' : compactNumber(call.upstreamOutputTextChars)) +
+        '</div>' +
+        '<div class="block"><div class="block-title"><span>Prompt Preview</span></div><pre>' + escapeHtml(call.promptPreview || '') + '</pre></div>' +
+        tabs(call);
+      document.querySelectorAll('.tab').forEach((node) => {
+        node.addEventListener('click', () => {
+          state.tab = node.dataset.tab;
+          renderDetail();
+        });
+      });
+      document.querySelectorAll('[data-copy-id]').forEach((node) => {
+        node.addEventListener('click', () => copyJson(node.dataset.copyId));
+      });
+    }
+    function render(options = {}) {
+      const scroll = options.preserveScroll ? snapshotScroll() : null;
+      renderList();
+      renderDetail();
+      restoreScroll(scroll);
+    }
+    async function load() {
+      if (!state.autoRefresh && state.calls.length) return;
+      const scroll = snapshotScroll();
+      const res = await fetch('/api/calls');
+      const data = await res.json();
+      state.calls = data.calls || [];
+      $('status').textContent = state.calls.length + ' grouped calls | updated ' + new Date(data.generatedAt).toLocaleTimeString();
+      $('log-path').textContent = data.logFile || '';
+      if (!state.selectedId && state.calls[0]) state.selectedId = state.calls[0].decisionId;
+      render({ preserveScroll: true });
+      restoreScroll(scroll);
+    }
+    $('search').addEventListener('input', (event) => { state.query = event.target.value; renderList(); });
+    $('tier').addEventListener('change', (event) => { state.tier = event.target.value; renderList(); });
+    $('tool').addEventListener('change', (event) => { state.tool = event.target.value; renderList(); });
+    load();
+    setInterval(load, 2500);
+  </script>
+</body>
+</html>`;
+
+function createServer() {
+  return http.createServer((req, res) => {
+    const url = new URL(req.url || "/", `http://${req.headers.host || "localhost"}`);
+    if (handleApi(req, res, url)) return;
+    if (url.pathname === "/" || url.pathname === "/index.html") {
+      send(res, 200, html, { "content-type": "text/html; charset=utf-8" });
+      return;
+    }
+    sendJson(res, 404, { error: { message: "Not found" } });
+  });
+}
+
+function startServer(selectedPort, attempt = 0) {
+  const server = createServer();
+  server.once("error", (error) => {
+    if (error?.code === "EADDRINUSE" && attempt < 50) {
+      const nextPort = selectedPort + 1;
+      console.error(`Switchboard inspector port ${selectedPort} is busy; using ${nextPort}.`);
+      startServer(nextPort, attempt + 1);
+      return;
+    }
+    throw error;
+  });
+  server.listen(selectedPort, host, () => {
+    console.log(`Switchboard inspector listening on http://${host}:${selectedPort}`);
+    console.log(`Scope: ${scopeHarness || "all harnesses"}`);
+    console.log(`Log files: ${eventSources().map((source) => source.file).join(", ")}`);
+  });
+}
+
+startServer(port);