mobygate 0.8.0 → 0.8.1

package/CHANGELOG.md

@@ -4,6 +4,111 @@ All notable changes to mobygate are documented here. Format loosely follows
 [Keep a Changelog](https://keepachangelog.com/en/1.1.0/); version numbers are
 [Semantic Versioning](https://semver.org/).
 
+## [0.8.1] — 2026-04-27
+
+Diagnostic visibility release. Adds a request/response capture system,
+a session inspector UI, a `mobygate tail` CLI, and fixes the v0.8.0
+connector idempotency bug. Born out of an OpenClaw debugging session
+where it took an hour of forensics to discover OpenClaw was using
+OpenAI shape (no cache_control) instead of `/v1/messages` — a one-line
+config flip — because mobygate had no visibility into what its
+upstream clients were actually sending.
+
+### Added
+
+- **Request/response capture system** (`lib/request-capture.js`).
+  - Off by default. Three ways to enable:
+    1. Env var: `MOBY_CAPTURE=1 mobygate start`
+    2. Touch file: `touch ~/.mobygate/.capture-enabled` (survives
+       restarts, dashboard-toggleable)
+    3. Dashboard inspector toggle button
+  - Writes paired files per request to `~/.mobygate/captures/`:
+    - `{ts}_{path}_{requestId}.json` — raw inbound body
+    - `{ts}_{path}_{requestId}.summary.txt` — human-readable analysis
+      (system blocks, cache_control markers, message timeline, tool
+      definitions, token breakdown)
+  - On response: appends actual usage from the SDK including
+    `cache_read_input_tokens`, `cache_creation_input_tokens`,
+    `input_tokens`, `output_tokens`, plus computed cache hit % and
+    "savings vs uncached" estimate.
+  - Auto-rotation: keeps last `MOBY_CAPTURE_KEEP=100` captures (200
+    files), prunes oldest in the background.
+
+- **Session inspector UI** at `/inspector`. New focused dashboard for
+  browsing captures:
+  - List view: all recent captures sorted newest-first, one-line stats
+    (timestamp, path, model, msgs, tokens, cache hit %), live polling
+    every 3s.
+  - Detail view: full request body decoded — system blocks (with
+    cache_control highlighted in green), messages timeline (color-coded
+    by role, tool_use/tool_result expanded with previews), tool
+    definitions, response usage stats.
+  - Capture toggle in header — flips the touch file live without
+    restarting mobygate.
+  - Linked from the main dashboard's endpoints row.
+
+- **`mobygate tail` CLI** — `tail -f` style live view of captures as
+  they land. Shows last 10 historical entries, then watches the
+  captures dir for new files. Color-codes `/v1/messages` (green,
+  native shape) vs `/v1/chat/completions` (yellow, OpenAI shape) so
+  shape mismatches jump off the screen.
+
+- **`extractSdkUsage()` helper** in `lib/anthropic.js` — defensive
+  extraction of cache + token fields from SDK result messages,
+  handles both flat (`message.input_tokens`) and nested
+  (`message.usage.input_tokens`) shapes from the Claude Agent SDK.
+  Used by all 4 mobygate handlers (the OpenAI streaming handler also
+  now tracks usage where it didn't before).
+
+- **Connector migration detection** — `openclawConnector.inspect()`
+  now reports "shadow providers": entries in OpenClaw's config that
+  point at mobygate's base URL but aren't registered under our
+  canonical `moby` / `moby-native` names. Catches pre-v0.8.0
+  hand-rolled `claude-max-proxy`-style configs (which silently bypass
+  the native surface). Returned as `shadowProviders: [{ name, api,
+  baseUrl, recommendation }]` in inspect output.
+
+- **Cache endpoints for the dashboard:**
+  - `GET /dashboard/captures` — list captures with summary stats
+  - `GET /dashboard/captures/:filename` — full body + summary for one
+    capture
+  - `GET /dashboard/captures-state` — current toggle state
+  - `POST /dashboard/captures-toggle` — flip toggle live
+  - All require local-origin (DNS-rebinding protection).
+
+### Fixed
+
+- **Connector idempotency** (v0.8.0 OPEN bug). `mobygate connect <id>`
+  run twice with no real change was producing spurious "(changed)"
+  diffs and rewriting byte-identical files. Root cause: `diffSummary`
+  walks objects structurally (sensitive to key order); the actual
+  serialized JSON output was identical. Fix: `writeConfigSafe` now
+  byte-compares the rendered output against the existing file content
+  before deciding to write. Returns `unchanged: true` if no real
+  change. Both `hermesConnector.apply()` and
+  `openclawConnector.apply()` updated to surface this flag.
+
+- **Tool name display in capture analyzer**. OpenAI-shape tools nest
+  the name under `tool.function.name`; the analyzer was only checking
+  `tool.name` and showing `(unnamed)` for everything. Now handles
+  both shapes via the new `toolName(t)` helper.
+
+### Notes
+
+The capture system was the lever that made the entire OpenClaw
+debugging session productive. Without it we had no visibility into
+which wire format clients were using, whether `cache_control` markers
+were being set, where in the request the breakpoints landed, or how
+the conversation was growing turn-over-turn. With it, the diagnosis
+took 60 seconds: "this is `/v1/chat/completions`, no `system` array,
+no cache markers, 33k tokens per turn."
+
+The migration detection in `openclawConnector.inspect()` is a small
+prevent-the-next-occurrence add. If `inspect()` had reported
+`claude-max-proxy` as a shadow provider with a "flip api to
+anthropic-messages" recommendation, today's hour-long forensics would
+have been a single CLI command.
+
 ## [0.8.0] — 2026-04-25
 
 Auto-wire third-party clients to use mobygate. The "find your client's

package/bin/mobygate.js

@@ -480,6 +480,78 @@ function cmdLogs() {
   spawnSync(cmd, args, { stdio: 'inherit' });
 }
 
+// `mobygate tail` — watch captures live, print a one-line summary as
+// each new request lands. Reads the .summary.txt file paired with each
+// new .json file in ~/.mobygate/captures/.
+async function cmdTail() {
+  const { homedir } = await import('os');
+  const { watch, existsSync, readFileSync, mkdirSync, statSync } = await import('fs');
+  const { readdir } = await import('fs/promises');
+  const { join } = await import('path');
+
+  const dir = process.env.MOBYGATE_CAPTURE_DIR
+    || join(process.env.MOBYGATE_HOME || join(homedir(), '.mobygate'), 'captures');
+
+  if (!existsSync(dir)) {
+    print(`Captures directory does not exist yet: ${dir}`);
+    print(`Enable capture (touch ~/.mobygate/.capture-enabled OR set MOBY_CAPTURE=1) and send a request.`);
+    return;
+  }
+
+  // Print recent history first (last 10), then watch.
+  const initial = (await readdir(dir))
+    .filter(n => n.endsWith('.summary.txt'))
+    .map(n => ({ name: n, mtime: statSync(join(dir, n)).mtimeMs }))
+    .sort((a, b) => a.mtime - b.mtime)
+    .slice(-10);
+
+  for (const { name } of initial) {
+    printSummaryLine(join(dir, name));
+  }
+
+  print(''); // blank line separator before live tail
+  print('--- watching for new captures (Ctrl-C to stop) ---');
+
+  const seen = new Set(initial.map(x => x.name));
+  watch(dir, (_event, name) => {
+    if (!name || !name.endsWith('.summary.txt')) return;
+    if (seen.has(name)) return;
+    seen.add(name);
+    // Wait briefly so the file is flushed (fs.watch can fire on the
+    // creation rename before content is fully written).
+    setTimeout(() => printSummaryLine(join(dir, name)), 50);
+  });
+}
+
+function printSummaryLine(summaryPath) {
+  try {
+    const text = readFileSync(summaryPath, 'utf8');
+    const grab = (re) => { const m = text.match(re); return m ? m[1].trim() : '?'; };
+    const ts = grab(/timestamp:\s+(\S+)/).slice(11, 19);
+    const path = grab(/^path:\s+(\S+)/m);
+    const model = grab(/^model:\s+(\S+)/m);
+    const msgs = grab(/^messages:\s+(\d+)/m);
+    const tokens = grab(/grand total:\s+(\d+)/);
+    const hit = grab(/cache hit rate:\s+([\d.]+)%/);
+    const status = grab(/^status:\s+(\S+)/m);
+    const dur = grab(/^duration:\s+(\d+) ms/m);
+
+    const hitDisplay = hit === '?' ? '─' : `${hit}% hit`;
+    const statusDisplay = status === '?' ? '(in flight)' : `${status} ${dur}ms`;
+
+    // Color-code the path: green for /v1/messages (native), yellow for /v1/chat/completions
+    const isNative = path === '/v1/messages';
+    const pathColored = isNative ? `\x1b[32m${path}\x1b[0m` : `\x1b[33m${path}\x1b[0m`;
+    const hitColored = hit === '?' ? hitDisplay
+      : parseFloat(hit) > 50 ? `\x1b[32m${hitDisplay}\x1b[0m`
+      : `\x1b[33m${hitDisplay}\x1b[0m`;
+
+    print(`${ts} ${pathColored.padEnd(35)} ${model.padEnd(22)} msgs=${msgs.padEnd(4)} tok=${tokens.padEnd(6)} ${hitColored.padEnd(20)} ${statusDisplay}`);
+  } catch (e) {
+    print(`(failed to read ${summaryPath}: ${e.message})`);
+  }
+}
+
 async function cmdAuth() {
   section('mobygate auth');
   const status = await getAuthStatus();
@@ -869,6 +941,7 @@ Usage:
   mobygate restart     Stop + start
   mobygate status      Show service + auth + /health state
   mobygate logs        Tail the server log
+  mobygate tail        Watch captures live (request/response inspector)
   mobygate auth        Show auth status + run a refresh probe
   mobygate connect     Auto-wire detected clients (Hermes, OpenClaw) to
                        use mobygate. Add: <id> for one client, --all for
@@ -900,6 +973,7 @@ const COMMANDS = {
   restart: cmdRestart,
   status: cmdStatus,
   logs: cmdLogs,
+  tail: cmdTail,
   auth: cmdAuth,
   uninstall: cmdUninstall,
   version: cmdVersion,

package/index.html

@@ -361,6 +361,7 @@
         <a href="/auth/status?quick=1" class="py-[3px] px-2.5 border border-[#2A2A1F] text-[#C9D9A8] text-[11px] leading-[14px] hover:border-[#5A5F54]">/auth/status</a>
         <a href="/v1/models" class="py-[3px] px-2.5 border border-[#2A2A1F] text-[#C9D9A8] text-[11px] leading-[14px] hover:border-[#5A5F54]">/v1/models</a>
         <a href="/events" class="py-[3px] px-2.5 border border-[#2A2A1F] text-[#C9D9A8] text-[11px] leading-[14px] hover:border-[#5A5F54]">/events</a>
+        <a href="/inspector" class="py-[3px] px-2.5 border border-[#B7E56D] text-[#B7E56D] text-[11px] leading-[14px] hover:bg-[#1A1F12]">/inspector</a>
       </div>
       <div class="flex items-center gap-3">
         <span class="uppercase text-[#5A5F54] text-[10px] leading-3 tracking-[0.12em]" id="f-stream">stream · connecting</span>

package/inspector.html

@@ -0,0 +1,422 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>mobygate — inspector</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=VT323&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      --bg: #0B0B09;
+      --bg-2: #14140F;
+      --bg-3: #1F1F17;
+      --fg: #F3EFE4;
+      --muted: #5A5F54;
+      --dim: #8A8F84;
+      --accent: #B7E56D;
+      --warn: #F1B05A;
+      --crit: #E66B5C;
+      --hit: #6CC994;
+      --border: #2A2A1F;
+    }
+    * { box-sizing: border-box; }
+    html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: 13px; height: 100vh; overflow: hidden; }
+    .display { font-family: 'VT323', monospace; letter-spacing: 0.02em; }
+    a { color: var(--accent); text-decoration: none; }
+    a:hover { text-decoration: underline; }
+    button { font-family: inherit; font-size: inherit; }
+    pre, code { font-family: 'JetBrains Mono', ui-monospace, monospace; }
+
+    header {
+      display: flex; align-items: center; gap: 16px;
+      padding: 12px 20px; border-bottom: 1px solid var(--border);
+      background: var(--bg-2);
+    }
+    header .title { font-size: 28px; line-height: 1; color: var(--accent); }
+    header .breadcrumb { color: var(--dim); font-size: 12px; }
+    header .spacer { flex: 1; }
+    header .toggle {
+      display: flex; align-items: center; gap: 8px;
+      padding: 6px 12px; border: 1px solid var(--border);
+      background: var(--bg-3); cursor: pointer; color: var(--fg);
+    }
+    header .toggle.on { border-color: var(--accent); color: var(--accent); }
+    header .toggle .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
+    header .toggle.on .dot { background: var(--accent); animation: pulse 1.8s infinite; }
+    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }
+
+    .layout { display: grid; grid-template-columns: 460px 1fr; height: calc(100vh - 53px); }
+
+    .list-pane { border-right: 1px solid var(--border); overflow-y: auto; background: var(--bg); }
+    .list-stats { padding: 10px 16px; color: var(--dim); font-size: 11px; border-bottom: 1px solid var(--border); }
+    .row {
+      padding: 10px 16px; border-bottom: 1px solid var(--border);
+      cursor: pointer; transition: background .1s;
+    }
+    .row:hover { background: var(--bg-2); }
+    .row.active { background: var(--bg-3); border-left: 3px solid var(--accent); padding-left: 13px; }
+    .row .r1 { display: flex; gap: 8px; align-items: baseline; margin-bottom: 4px; }
+    .row .r1 .ts { color: var(--dim); font-size: 11px; }
+    .row .r1 .path { color: var(--fg); font-size: 12px; }
+    .row .r1 .path.native { color: var(--accent); }
+    .row .r2 { color: var(--dim); font-size: 11px; display: flex; gap: 12px; flex-wrap: wrap; }
+    .row .r2 .pill { padding: 1px 6px; background: var(--bg-3); border-radius: 2px; }
+    .row .r2 .hit { color: var(--hit); }
+    .row .r2 .nohit { color: var(--warn); }
+
+    .detail-pane { overflow-y: auto; padding: 20px 28px; }
+    .detail-pane.empty { display: flex; align-items: center; justify-content: center; color: var(--dim); }
+
+    .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; }
+    .stat {
+      padding: 12px 14px; border: 1px solid var(--border); background: var(--bg-2);
+    }
+    .stat .label { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
+    .stat .val { color: var(--fg); font-family: 'VT323', monospace; font-size: 24px; line-height: 1; }
+    .stat .val.accent { color: var(--accent); }
+    .stat .val.warn { color: var(--warn); }
+    .stat .val.crit { color: var(--crit); }
+    .stat .sub { color: var(--dim); font-size: 11px; margin-top: 2px; }
+
+    .section { margin-bottom: 24px; }
+    .section h3 { color: var(--accent); font-size: 12px; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.05em; }
+
+    .sys-block {
+      padding: 8px 12px; margin-bottom: 4px;
+      border-left: 2px solid var(--border); background: var(--bg-2);
+      font-size: 11px;
+    }
+    .sys-block.cached { border-left-color: var(--hit); }
+    .sys-block .head { color: var(--dim); margin-bottom: 4px; }
+    .sys-block .head .marker { color: var(--hit); margin-left: 8px; }
+    .sys-block .preview { color: var(--fg); white-space: pre-wrap; max-height: 80px; overflow: hidden; opacity: 0.7; }
+
+    .msg-row { padding: 6px 0; border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 40px 80px 70px 1fr; gap: 12px; align-items: center; font-size: 11px; }
+    .msg-row .idx { color: var(--dim); text-align: right; }
+    .msg-row .role { padding: 1px 6px; background: var(--bg-3); text-align: center; }
+    .msg-row .role.user { color: #88B4FF; }
+    .msg-row .role.assistant { color: var(--accent); }
+    .msg-row .role.tool { color: var(--warn); }
+    .msg-row .role.system { color: var(--crit); }
+    .msg-row .bytes { color: var(--dim); text-align: right; }
+    .msg-row .preview { color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
+    .msg-row.cached { background: rgba(108, 201, 148, 0.04); }
+
+    .tool-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
+    .tool { padding: 6px 10px; background: var(--bg-2); border: 1px solid var(--border); font-size: 11px; }
+
+    .usage-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 8px; font-size: 11px; }
+    .usage-grid > div { padding: 8px 12px; background: var(--bg-2); border: 1px solid var(--border); }
+    .usage-grid .label { color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; }
+    .usage-grid .val { color: var(--fg); font-size: 18px; font-family: 'VT323', monospace; line-height: 1; margin-top: 4px; }
+    .usage-grid .val.hit { color: var(--hit); }
+    .usage-grid .val.dim { color: var(--dim); }
+
+    .placeholder { color: var(--dim); font-size: 12px; padding: 16px; text-align: center; }
+
+    /* Scrollbar */
+    ::-webkit-scrollbar { width: 8px; height: 8px; }
+    ::-webkit-scrollbar-track { background: var(--bg); }
+    ::-webkit-scrollbar-thumb { background: var(--border); }
+    ::-webkit-scrollbar-thumb:hover { background: var(--muted); }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="title display">mobygate :: inspector</div>
+    <div class="breadcrumb">~/.mobygate/captures/</div>
+    <div class="spacer"></div>
+    <button id="toggle" class="toggle">
+      <span class="dot"></span>
+      <span id="toggle-label">capture: ?</span>
+    </button>
+    <a href="/">← dashboard</a>
+  </header>
+
+  <div class="layout">
+    <div class="list-pane" id="list-pane">
+      <div class="list-stats" id="list-stats">loading…</div>
+      <div id="list"></div>
+    </div>
+    <div class="detail-pane empty" id="detail">
+      <div>Select a capture from the left to inspect.</div>
+    </div>
+  </div>
+
+  <script>
+    let selectedFilename = null;
+    let captureCache = []; // last fetch result, used to compute deltas
+
+    // ──────────── helpers ────────────
+
+    const esc = (s) => String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
+    const fmt = (n) => Number(n || 0).toLocaleString();
+    const fmtBytes = (b) => {
+      if (b < 1024) return b + ' B';
+      if (b < 1024*1024) return (b/1024).toFixed(1) + ' KB';
+      return (b/(1024*1024)).toFixed(1) + ' MB';
+    };
+    const fmtTime = (ms) => {
+      const d = new Date(ms);
+      return d.toLocaleTimeString('en-US', { hour12: false });
+    };
+
+    // ──────────── capture toggle ────────────
+
+    async function refreshToggleState() {
+      try {
+        const r = await fetch('/dashboard/captures-state');
+        const s = await r.json();
+        const btn = document.getElementById('toggle');
+        const lbl = document.getElementById('toggle-label');
+        btn.classList.toggle('on', !!s.enabled);
+        lbl.textContent = 'capture: ' + (s.enabled ? 'ON' : 'off') + (s.envVar ? ' (env)' : '');
+      } catch {}
+    }
+
+    document.getElementById('toggle').addEventListener('click', async () => {
+      const cur = document.getElementById('toggle').classList.contains('on');
+      try {
+        await fetch('/dashboard/captures-toggle', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ enabled: !cur }),
+        });
+        refreshToggleState();
+      } catch {}
+    });
+
+    // ──────────── list rendering ────────────
+
+    async function refreshList() {
+      try {
+        const r = await fetch('/dashboard/captures?limit=200');
+        const data = await r.json();
+        captureCache = data.captures || [];
+        renderList(captureCache, data);
+      } catch (e) {
+        document.getElementById('list-stats').textContent = 'failed: ' + e.message;
+      }
+    }
+
+    function renderList(captures, meta) {
+      const stats = document.getElementById('list-stats');
+      if (!captures.length) {
+        stats.textContent = 'no captures yet — toggle capture on and send a request';
+        document.getElementById('list').innerHTML = '';
+        return;
+      }
+      stats.textContent = `${captures.length} captures · ${meta.total} total`;
+
+      const html = captures.map(c => {
+        const isNative = c.path === '/v1/messages';
+        const hitClass = c.cacheHitPct == null ? '' : (parseFloat(c.cacheHitPct) > 50 ? 'hit' : 'nohit');
+        const hitText = c.cacheHitPct == null ? 'no resp yet' : `${c.cacheHitPct}% cache`;
+        const sel = c.filename === selectedFilename ? ' active' : '';
+        return `<div class="row${sel}" data-fn="${esc(c.filename)}">
+          <div class="r1">
+            <span class="ts">${fmtTime(c.ts)}</span>
+            <span class="path${isNative ? ' native' : ''}">${esc(c.path)}</span>
+            <span class="ts" style="margin-left:auto">${esc(c.model || '')}</span>
+          </div>
+          <div class="r2">
+            <span class="pill">${c.msgCount} msgs</span>
+            <span class="pill">${fmt(c.grandTokens)} tok</span>
+            <span class="pill ${hitClass}">${hitText}</span>
+            ${c.cacheControlSystem ? `<span class="pill">sys-cache ${esc(c.cacheControlSystem)}</span>` : ''}
+          </div>
+        </div>`;
+      }).join('');
+      document.getElementById('list').innerHTML = html;
+
+      // Wire row clicks
+      document.querySelectorAll('.row').forEach(el => {
+        el.addEventListener('click', () => loadDetail(el.dataset.fn));
+      });
+    }
+
+    // ──────────── detail rendering ────────────
+
+    async function loadDetail(filename) {
+      selectedFilename = filename;
+      document.querySelectorAll('.row').forEach(r => r.classList.toggle('active', r.dataset.fn === filename));
+      const detail = document.getElementById('detail');
+      detail.classList.remove('empty');
+      detail.innerHTML = `<div class="placeholder">loading ${esc(filename)}…</div>`;
+      try {
+        const r = await fetch('/dashboard/captures/' + encodeURIComponent(filename));
+        const data = await r.json();
+        renderDetail(data);
+      } catch (e) {
+        detail.innerHTML = `<div class="placeholder">failed: ${esc(e.message)}</div>`;
+      }
+    }
+
+    function renderDetail({ filename, body, summary }) {
+      const sysBlocks = Array.isArray(body.system) ? body.system : (typeof body.system === 'string' ? [{ type: 'text', text: body.system }] : []);
+      const msgs = body.messages || [];
+      const tools = body.tools || [];
+      const sysBytes = sysBlocks.reduce((a, b) => a + (b?.text?.length || 0), 0);
+      const msgBytes = msgs.reduce((a, m) => {
+        if (typeof m.content === 'string') return a + m.content.length;
+        if (Array.isArray(m.content)) return a + m.content.reduce((aa, b) => aa + (b?.text?.length || 0) + (b?.input ? JSON.stringify(b.input).length : 0) + (typeof b?.content === 'string' ? b.content.length : 0), 0);
+        return a;
+      }, 0);
+      const toolBytes = JSON.stringify(tools).length;
+      const grand = sysBytes + msgBytes + toolBytes;
+
+      // Pull response stats out of the appended summary text
+      const grab = (re) => { const m = summary.match(re); return m ? m[1].trim() : null; };
+      const inputUncached = parseInt(grab(/input_tokens \(uncached\):\s+(\d+)/) || '0', 10);
+      const cacheRead = parseInt(grab(/cache_read_input_tokens:\s+(\d+)/) || '0', 10);
+      const cacheCreate = parseInt(grab(/cache_creation_input_tokens:\s+(\d+)/) || '0', 10);
+      const outputTokens = parseInt(grab(/output_tokens:\s+(\d+)/) || '0', 10);
+      const cacheHit = grab(/cache hit rate:\s+([\d.]+)%/);
+      const savings = grab(/savings from cache:\s+([\d.]+)%/);
+      const duration = grab(/duration:\s+(\d+) ms/);
+
+      const sysHtml = sysBlocks.length === 0
+        ? '<div class="placeholder">no system block</div>'
+        : sysBlocks.map((b, i) => {
+            const cached = !!b.cache_control;
+            const preview = (b.text || '').slice(0, 600);
+            return `<div class="sys-block${cached ? ' cached' : ''}">
+              <div class="head">[${i}] ${esc(b.type || '?')} · ${fmt((b.text||'').length)} bytes${cached ? `<span class="marker">cache_control: ${esc(JSON.stringify(b.cache_control))}</span>` : ''}</div>
+              <div class="preview">${esc(preview)}${(b.text||'').length > 600 ? '…' : ''}</div>
+            </div>`;
+          }).join('');
+
+      const msgHtml = msgs.length > 60
+        ? renderTrimmedMessages(msgs)
+        : msgs.map((m, i) => renderMessageRow(m, i)).join('');
+
+      const toolsHtml = tools.length === 0
+        ? '<div class="placeholder">no tools declared</div>'
+        : `<div class="tool-list">${tools.map(t => {
+            const name = t.name || t.function?.name || '(unnamed)';
+            return `<div class="tool">${esc(name)}</div>`;
+          }).join('')}</div>`;
+
+      const usageHtml = (cacheRead + cacheCreate + inputUncached + outputTokens === 0)
+        ? '<div class="placeholder">response not captured yet (request still in flight, or capture was off when response landed)</div>'
+        : `<div class="usage-grid">
+            <div>
+              <div class="label">cache hit rate</div>
+              <div class="val hit">${cacheHit || '0'}%</div>
+              <div class="label" style="margin-top:6px">savings</div>
+              <div class="val ${parseFloat(savings)>50?'hit':''}" style="font-size:14px">${savings || '0'}%</div>
+            </div>
+            <div>
+              <div class="label">input (uncached)</div>
+              <div class="val">${fmt(inputUncached)}</div>
+            </div>
+            <div>
+              <div class="label">cache read</div>
+              <div class="val hit">${fmt(cacheRead)}</div>
+            </div>
+            <div>
+              <div class="label">cache create</div>
+              <div class="val ${cacheCreate>0?'':'dim'}">${fmt(cacheCreate)}</div>
+              <div class="label" style="margin-top:6px">output</div>
+              <div class="val" style="font-size:14px">${fmt(outputTokens)}</div>
+            </div>
+          </div>`;
+
+      document.getElementById('detail').innerHTML = `
+        <div class="stat-grid">
+          <div class="stat">
+            <div class="label">model</div>
+            <div class="val accent">${esc(body.model || '?')}</div>
+            <div class="sub">${body.stream ? 'streaming' : 'sync'} · ${duration ? duration + ' ms' : '—'}</div>
+          </div>
+          <div class="stat">
+            <div class="label">messages</div>
+            <div class="val">${msgs.length}</div>
+            <div class="sub">${fmtBytes(msgBytes)}</div>
+          </div>
+          <div class="stat">
+            <div class="label">total wire</div>
+            <div class="val">${fmt(Math.round(grand/4))}</div>
+            <div class="sub">~tokens · ${fmtBytes(grand)}</div>
+          </div>
+          <div class="stat">
+            <div class="label">system block</div>
+            <div class="val ${sysBlocks.some(b=>b.cache_control)?'accent':'warn'}">${fmtBytes(sysBytes)}</div>
+            <div class="sub">${sysBlocks.length} block(s) · ${sysBlocks.filter(b=>b.cache_control).length} cached</div>
+          </div>
+        </div>
+
+        <div class="section">
+          <h3>Response usage</h3>
+          ${usageHtml}
+        </div>
+
+        <div class="section">
+          <h3>System blocks</h3>
+          ${sysHtml}
+        </div>
+
+        <div class="section">
+          <h3>Messages timeline (${msgs.length})</h3>
+          ${msgHtml}
+        </div>
+
+        <div class="section">
+          <h3>Tools (${tools.length})</h3>
+          ${toolsHtml}
+        </div>
+
+        <div class="section">
+          <h3>Raw summary</h3>
+          <pre style="background:var(--bg-2);padding:12px;border:1px solid var(--border);font-size:11px;color:var(--dim);white-space:pre-wrap;max-height:300px;overflow:auto">${esc(summary)}</pre>
+        </div>
+      `;
+    }
+
+    function renderMessageRow(m, i) {
+      const role = m.role || '?';
+      const cached = Array.isArray(m.content) && m.content.some(b => b?.cache_control);
+      let preview = '';
+      let bytes = 0;
+      if (typeof m.content === 'string') {
+        preview = m.content.slice(0, 200);
+        bytes = m.content.length;
+      } else if (Array.isArray(m.content)) {
+        const parts = m.content.map(b => {
+          if (b?.type === 'text') return b.text || '';
+          if (b?.type === 'tool_use') return `🔧 ${b.name || '?'}(${JSON.stringify(b.input || {}).slice(0, 80)})`;
+          if (b?.type === 'tool_result') {
+            const tc = Array.isArray(b.content) ? (b.content.find(x => x.type === 'text')?.text || '') : (b.content || '');
+            return `← ${String(tc).slice(0, 100)}`;
+          }
+          if (b?.type === 'image') return '🖼️ [image]';
+          return JSON.stringify(b).slice(0, 80);
+        });
+        preview = parts.join(' · ').slice(0, 250);
+        bytes = m.content.reduce((a, b) => a + (b?.text?.length || 0) + (b?.input ? JSON.stringify(b.input).length : 0) + (typeof b?.content === 'string' ? b.content.length : 0), 0);
+      }
+      return `<div class="msg-row${cached ? ' cached' : ''}">
+        <span class="idx">${i}</span>
+        <span class="role ${role}">${role}</span>
+        <span class="bytes">${fmtBytes(bytes)}</span>
+        <span class="preview">${esc(preview)}${cached ? ' 🔒' : ''}</span>
+      </div>`;
+    }
+
+    function renderTrimmedMessages(msgs) {
+      // Show first 5 and last 10 for long conversations
+      const head = msgs.slice(0, 5).map((m, i) => renderMessageRow(m, i)).join('');
+      const tail = msgs.slice(-10).map((m, i) => renderMessageRow(m, msgs.length - 10 + i)).join('');
+      return head + `<div class="placeholder">… ${msgs.length - 15} messages collapsed …</div>` + tail;
+    }
+
+    // ──────────── kickoff ────────────
+
+    refreshToggleState();
+    refreshList();
+    setInterval(() => { refreshList(); refreshToggleState(); }, 3000);
+  </script>
+</body>
+</html>

package/lib/anthropic.js

@@ -27,6 +27,29 @@
 
 import { v4 as uuidv4 } from 'uuid';
 
+// ---------------------------------------------------------------------------
+// SDK usage extraction
+// ---------------------------------------------------------------------------
+
+/**
+ * Pulls the full token usage from an SDK 'result' message — defensive
+ * against shape variations (the Claude Agent SDK sometimes nests these
+ * under `.usage`, sometimes places them flat on the message). Returns
+ * a complete usage shape with cache_read / cache_creation fields zeroed
+ * out if absent. Used by the 4 mobygate handlers to populate response
+ * captures and dashboard cache-hit metrics.
+ */
+export function extractSdkUsage(message) {
+  if (!message) return { input_tokens: 0, output_tokens: 0, cache_read_input_tokens: 0, cache_creation_input_tokens: 0 };
+  const u = message.usage || message;
+  return {
+    input_tokens: u.input_tokens || 0,
+    output_tokens: u.output_tokens || 0,
+    cache_read_input_tokens: u.cache_read_input_tokens || 0,
+    cache_creation_input_tokens: u.cache_creation_input_tokens || 0,
+  };
+}
+
 // ---------------------------------------------------------------------------
 // Content extraction — read individual block types out of an Anthropic message
 // ---------------------------------------------------------------------------