mobygate 0.8.4 → 0.9.4

package/bin/mobygate.js

@@ -950,6 +950,12 @@ Usage:
                        changing the active model.
   mobygate disconnect  Remove moby entries from a client config.
                        Usage: mobygate disconnect <client-id>
+  mobygate captures    Search the captures index. Subcommands:
+                         query [text]  Filter + list captures
+                         show <id>     Print a capture's summary
+                         stats         Aggregate stats over the index
+                         rebuild       Backfill index from disk captures
+                       Run \`mobygate captures query --help\` for filters.
   mobygate uninstall   Remove installed services
   mobygate version     Print version + install mode + path
 
@@ -958,6 +964,213 @@ Repo:   ${REPO_ROOT}
 `);
 }
 
+// ---------- captures ----------
+
+function capturesUsage() {
+  print(`mobygate captures — search the SQLite-indexed capture log
+
+Usage:
+  mobygate captures query [text] [filters]
+  mobygate captures show <request_id>
+  mobygate captures stats
+  mobygate captures rebuild
+
+Query filters (all optional, combinable):
+  --since <dur>          1h, 24h, 7d, 30d (default: all)
+  --model <substr>       claude-opus-4-7, sonnet, etc. (LIKE match)
+  --session <key>        exact session_key match
+  --status <s>           ok | client_disconnect | error
+  --stop <reason>        end_turn | tool_use | max_tokens | ...
+  --min-duration <ms>    only requests slower than N ms
+  --max-duration <ms>    only requests faster than N ms
+  --has-tools            only requests that declared tools
+  --limit <n>            default 20, max 1000
+  --json                 emit rows as JSON instead of a table
+
+Text (positional) does a LIKE %text% over first/last user message + session_key.
+
+Examples:
+  mobygate captures query --since 1h --status client_disconnect
+  mobygate captures query "webflow" --model opus --limit 5
+  mobygate captures query --has-tools --min-duration 5000
+  mobygate captures show 809ba4e41301425d8587ed64
+`);
+}
+
+function parseDuration(s) {
+  if (!s) return null;
+  const m = String(s).match(/^(\d+)\s*([smhd])?$/);
+  if (!m) return null;
+  const n = parseInt(m[1], 10);
+  const unit = m[2] || 's';
+  const mult = { s: 1000, m: 60_000, h: 3_600_000, d: 86_400_000 }[unit];
+  return n * mult;
+}
+
+function takeFlag(args, name) {
+  const i = args.indexOf(name);
+  if (i === -1) return null;
+  const val = args[i + 1];
+  args.splice(i, 2);
+  return val;
+}
+
+function takeBool(args, name) {
+  const i = args.indexOf(name);
+  if (i === -1) return false;
+  args.splice(i, 1);
+  return true;
+}
+
+function truncate(s, n) {
+  if (s == null) return '';
+  s = String(s).replace(/\s+/g, ' ').trim();
+  return s.length > n ? s.slice(0, n - 1) + '…' : s;
+}
+
+function fmtDuration(ms) {
+  if (ms == null) return '-';
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+function fmtTokens(n) {
+  if (n == null) return '-';
+  if (n < 1000) return String(n);
+  if (n < 1_000_000) return `${(n / 1000).toFixed(1)}k`;
+  return `${(n / 1_000_000).toFixed(2)}M`;
+}
+
+async function cmdCaptures() {
+  const sub = process.argv[3];
+  if (!sub || sub === '--help' || sub === '-h' || sub === 'help') {
+    capturesUsage();
+    return;
+  }
+
+  const idx = await import('../lib/captures-index.js');
+
+  if (sub === 'query') {
+    const args = process.argv.slice(4);
+    if (args.includes('--help') || args.includes('-h')) { capturesUsage(); return; }
+
+    const filters = {};
+    const since = takeFlag(args, '--since');
+    if (since) filters.sinceMs = parseDuration(since);
+    const model = takeFlag(args, '--model');
+    if (model) filters.model = model;
+    const session = takeFlag(args, '--session');
+    if (session) filters.sessionKey = session;
+    const status = takeFlag(args, '--status');
+    if (status) filters.status = status;
+    const stop = takeFlag(args, '--stop');
+    if (stop) filters.stopReason = stop;
+    const minDur = takeFlag(args, '--min-duration');
+    if (minDur) filters.minDurationMs = parseInt(minDur, 10);
+    const maxDur = takeFlag(args, '--max-duration');
+    if (maxDur) filters.maxDurationMs = parseInt(maxDur, 10);
+    if (takeBool(args, '--has-tools')) filters.hasTools = true;
+    const limit = takeFlag(args, '--limit');
+    if (limit) filters.limit = parseInt(limit, 10);
+    const asJson = takeBool(args, '--json');
+    // Remaining positional args are the search text.
+    const text = args.filter((a) => !a.startsWith('--')).join(' ');
+    if (text) filters.text = text;
+
+    const { rows, error } = await idx.queryCaptures(filters);
+    if (error) die(`captures query failed: ${error}`);
+
+    if (asJson) { print(JSON.stringify(rows, null, 2)); return; }
+
+    if (!rows.length) {
+      print(c.dim('(no captures match)'));
+      return;
+    }
+
+    // Header
+    print(
+      c.bold('TIME             '.padEnd(17)) +
+      c.bold('REQUEST_ID      '.padEnd(16)) +
+      c.bold('STATUS         '.padEnd(15)) +
+      c.bold('STOP        '.padEnd(12)) +
+      c.bold('DUR     '.padEnd(8)) +
+      c.bold('IN  '.padEnd(6)) +
+      c.bold('OUT '.padEnd(6)) +
+      c.bold('CACHE  '.padEnd(7)) +
+      c.bold('PREVIEW')
+    );
+    print(c.dim('─'.repeat(110)));
+    for (const r of rows) {
+      const ts = (r.ts || '').slice(5, 19).replace('T', ' ');
+      const idShort = (r.request_id || '').slice(0, 14);
+      const stColor = r.status === 'ok' ? c.green : r.status === 'client_disconnect' ? c.yell : r.status ? c.red : c.dim;
+      const status = stColor((r.status || '-').padEnd(13));
+      const stop = (r.stop_reason || '-').padEnd(10);
+      const dur = fmtDuration(r.duration_ms).padEnd(6);
+      const inT = fmtTokens(r.total_input_tokens).padEnd(4);
+      const outT = fmtTokens(r.output_tokens).padEnd(4);
+      const hit = r.cache_hit_pct != null ? `${r.cache_hit_pct.toFixed(0)}%`.padEnd(5) : '-    ';
+      const preview = truncate(r.first_user_text || r.last_user_text || '', 50);
+      print(`${ts.padEnd(17)}${idShort.padEnd(16)}${status} ${stop}  ${dur}  ${inT}  ${outT}  ${hit}  ${c.dim(preview)}`);
+    }
+    print(c.dim(`\n${rows.length} row${rows.length === 1 ? '' : 's'}`));
+    return;
+  }
+
+  if (sub === 'show') {
+    const id = process.argv[4];
+    if (!id) die('usage: mobygate captures show <request_id>');
+    const row = await idx.getCapture(id);
+    if (!row) die(`no capture found for request_id=${id}`);
+    if (row.summary_path && existsSync(row.summary_path)) {
+      print(readFileSync(row.summary_path, 'utf8'));
+    } else {
+      print(JSON.stringify(row, null, 2));
+    }
+    return;
+  }
+
+  if (sub === 'stats') {
+    const s = await idx.captureStats();
+    if (s.error) die(`stats failed: ${s.error}`);
+    print(c.bold(`Captures index: ${s.total} rows`));
+    print('');
+    print(c.bold('By status:'));
+    for (const r of s.byStatus) print(`  ${(r.status || '(none)').padEnd(20)} ${r.n}`);
+    print('');
+    print(c.bold('Top models:'));
+    for (const r of s.byModel) print(`  ${(r.m || '(none)').padEnd(28)} ${r.n}`);
+    print('');
+    print(c.bold('By stop_reason:'));
+    for (const r of s.byStop) print(`  ${(r.stop_reason || '(none)').padEnd(20)} ${r.n}`);
+    print('');
+    print(c.bold('Token totals:'));
+    print(`  input (uncached):    ${fmtTokens(s.tokens.in_t)}`);
+    print(`  cache_read:          ${fmtTokens(s.tokens.cr_t)}`);
+    print(`  cache_create:        ${fmtTokens(s.tokens.cc_t)}`);
+    print(`  output:              ${fmtTokens(s.tokens.out_t)}`);
+    print(`  avg cache hit:       ${s.tokens.avg_hit ? s.tokens.avg_hit.toFixed(1) + '%' : '-'}`);
+    print(`  avg duration:        ${fmtDuration(Math.round(s.tokens.avg_ms || 0))}`);
+    return;
+  }
+
+  if (sub === 'rebuild') {
+    info('Backfilling captures index from ~/.mobygate/captures/ — this scans every .json file.');
+    const start = Date.now();
+    const result = await idx.rebuildFromFilesystem((p) => {
+      process.stdout.write(`\r  indexed ${p.indexed}/${p.scanned} ...`);
+    });
+    process.stdout.write('\r');
+    if (result.error) die(`rebuild failed: ${result.error}`);
+    const ms = Date.now() - start;
+    ok(`Indexed ${result.indexed} captures (${result.errors} errors, ${ms}ms).`);
+    return;
+  }
+
+  capturesUsage();
+  process.exit(1);
+}
+
 // ---------- dispatch ----------
 
 const cmd = process.argv[2];
@@ -965,6 +1178,7 @@ const COMMANDS = {
   init: cmdInit,
   connect: cmdConnect,
   disconnect: cmdDisconnect,
+  captures: cmdCaptures,
   update: cmdUpdate,
   upgrade: cmdUpdate,
   doctor: cmdDoctor,

package/dashboard.css

@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.visible{visibility:visible}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:0}.z-50{z-index:50}.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.-ml-3{margin-left:-.75rem}.mt-1{margin-top:.25rem}.mt-10{margin-top:2.5rem}.mt-auto{margin-top:auto}.inline-block{display:inline-block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-1\.5{height:.375rem}.h-2{height:.5rem}.h-3{height:.75rem}.h-\[110px\]{height:110px}.h-\[22px\]{height:22px}.h-full{height:100%}.max-h-\[180px\]{max-height:180px}.max-h-\[240px\]{max-height:240px}.max-h-\[40vh\]{max-height:40vh}.max-h-\[52vh\]{max-height:52vh}.max-h-\[70vh\]{max-height:70vh}.min-h-screen{min-height:100vh}.w-1\.5{width:.375rem}.w-2{width:.5rem}.w-\[100px\]{width:100px}.w-\[110px\]{width:110px}.w-\[160px\]{width:160px}.w-\[180px\]{width:180px}.w-\[20\%\]{width:20%}.w-\[60px\]{width:60px}.w-\[6px\]{width:6px}.w-\[70px\]{width:70px}.w-\[72px\]{width:72px}.w-\[80px\]{width:80px}.w-full{width:100%}.w-px{width:1px}.min-w-0{min-width:0}.max-w-3xl{max-width:48rem}.max-w-\[1440px\]{max-width:1440px}.shrink{flex-shrink:1}.shrink-0{flex-shrink:0}.grow{flex-grow:1}.basis-0{flex-basis:0px}@keyframes pulse{50%{opacity:.5}}.animate-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}.cursor-pointer{cursor:pointer}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.flex-col{flex-direction:column}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.items-baseline{align-items:baseline}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-0\.5{gap:.125rem}.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-2{gap:.5rem}.gap-2\.5{gap:.625rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-\[22px\]{gap:22px}.gap-\[3px\]{gap:3px}.gap-\[5px\]{gap:5px}.overflow-auto{overflow:auto}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.whitespace-pre-wrap{white-space:pre-wrap}.rounded-full{border-radius:9999px}.rounded-md{border-radius:.375rem}.rounded-r-md{border-top-right-radius:.375rem;border-bottom-right-radius:.375rem}.border{border-width:1px}.border-b{border-bottom-width:1px}.border-l-2{border-left-width:2px}.border-r{border-right-width:1px}.border-t{border-top-width:1px}.border-\[\#1A1A15\]{--tw-border-opacity:1;border-color:rgb(26 26 21/var(--tw-border-opacity,1))}.border-\[\#2A2A1F\]{--tw-border-opacity:1;border-color:rgb(42 42 31/var(--tw-border-opacity,1))}.border-\[\#B7E56D\]{--tw-border-opacity:1;border-color:rgb(183 229 109/var(--tw-border-opacity,1))}.border-l-\[\#4EA4C4\]{--tw-border-opacity:1;border-left-color:rgb(78 164 196/var(--tw-border-opacity,1))}.border-l-\[\#B7E56D\]{--tw-border-opacity:1;border-left-color:rgb(183 229 109/var(--tw-border-opacity,1))}.border-l-\[\#E89B2E\]{--tw-border-opacity:1;border-left-color:rgb(232 155 46/var(--tw-border-opacity,1))}.bg-\[\#0B0B09\]{--tw-bg-opacity:1;background-color:rgb(11 11 9/var(--tw-bg-opacity,1))}.bg-\[\#121210\]{--tw-bg-opacity:1;background-color:rgb(18 18 16/var(--tw-bg-opacity,1))}.bg-\[\#1A1A15\]{--tw-bg-opacity:1;background-color:rgb(26 26 21/var(--tw-bg-opacity,1))}.bg-\[\#2A2A1F\]{--tw-bg-opacity:1;background-color:rgb(42 42 31/var(--tw-bg-opacity,1))}.bg-\[\#4EA4C4\]{--tw-bg-opacity:1;background-color:rgb(78 164 196/var(--tw-bg-opacity,1))}.bg-\[\#5A5F54\]{--tw-bg-opacity:1;background-color:rgb(90 95 84/var(--tw-bg-opacity,1))}.bg-\[\#B7E56D1A\]{background-color:#b7e56d1a}.bg-\[\#B7E56D\]{--tw-bg-opacity:1;background-color:rgb(183 229 109/var(--tw-bg-opacity,1))}.bg-\[\#E89B2E\]{--tw-bg-opacity:1;background-color:rgb(232 155 46/var(--tw-bg-opacity,1))}.bg-black\/70{background-color:rgba(0,0,0,.7)}.p-4{padding:1rem}.p-6{padding:1.5rem}.px-1\.5{padding-left:.375rem;padding-right:.375rem}.px-12{padding-left:3rem;padding-right:3rem}.px-2{padding-left:.5rem;padding-right:.5rem}.px-2\.5{padding-left:.625rem;padding-right:.625rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-3\.5{padding-left:.875rem;padding-right:.875rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}.py-1{padding-top:.25rem;padding-bottom:.25rem}.py-1\.5{padding-top:.375rem;padding-bottom:.375rem}.py-10{padding-top:2.5rem;padding-bottom:2.5rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-2\.5{padding-top:.625rem;padding-bottom:.625rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-6{padding-top:1.5rem;padding-bottom:1.5rem}.py-\[14px\]{padding-top:14px;padding-bottom:14px}.py-\[18px\]{padding-top:18px;padding-bottom:18px}.py-\[22px\]{padding-top:22px;padding-bottom:22px}.py-\[3px\]{padding-top:3px;padding-bottom:3px}.pb-2{padding-bottom:.5rem}.pb-7{padding-bottom:1.75rem}.pr-1{padding-right:.25rem}.pt-2{padding-top:.5rem}.pt-8{padding-top:2rem}.text-center{text-align:center}.text-right{text-align:right}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-\[10px\]{font-size:10px}.text-\[11px\]{font-size:11px}.text-\[64px\]{font-size:64px}.text-\[9px\]{font-size:9px}.text-xs{font-size:.75rem;line-height:1rem}.font-bold{font-weight:700}.font-medium{font-weight:500}.uppercase{text-transform:uppercase}.leading-3{line-height:.75rem}.leading-4{line-height:1rem}.leading-8{line-height:2rem}.leading-\[14px\]{line-height:14px}.leading-\[15px\]{line-height:15px}.leading-\[16px\]{line-height:16px}.leading-\[18px\]{line-height:18px}.leading-\[56px\]{line-height:56px}.tracking-\[0\.04em\]{letter-spacing:.04em}.tracking-\[0\.06em\]{letter-spacing:.06em}.tracking-\[0\.08em\]{letter-spacing:.08em}.tracking-\[0\.12em\]{letter-spacing:.12em}.tracking-\[0\.14em\]{letter-spacing:.14em}.tracking-\[0\.18em\]{letter-spacing:.18em}.tracking-\[0\.22em\]{letter-spacing:.22em}.tracking-widest{letter-spacing:.1em}.text-\[\#0B0B09\]{--tw-text-opacity:1;color:rgb(11 11 9/var(--tw-text-opacity,1))}.text-\[\#4EA4C4\]{--tw-text-opacity:1;color:rgb(78 164 196/var(--tw-text-opacity,1))}.text-\[\#5A5F54\]{--tw-text-opacity:1;color:rgb(90 95 84/var(--tw-text-opacity,1))}.text-\[\#8A9A6A\]{--tw-text-opacity:1;color:rgb(138 154 106/var(--tw-text-opacity,1))}.text-\[\#B7E56D\]{--tw-text-opacity:1;color:rgb(183 229 109/var(--tw-text-opacity,1))}.text-\[\#C9D9A8\]{--tw-text-opacity:1;color:rgb(201 217 168/var(--tw-text-opacity,1))}.text-\[\#E89B2E\]{--tw-text-opacity:1;color:rgb(232 155 46/var(--tw-text-opacity,1))}.text-\[\#F3EFE4\]{--tw-text-opacity:1;color:rgb(243 239 228/var(--tw-text-opacity,1))}.underline{text-decoration-line:underline}.decoration-dotted{text-decoration-style:dotted}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.accent-\[\#4EA4C4\]{accent-color:#4ea4c4}.opacity-50{opacity:.5}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.hover\:border-\[\#5A5F54\]:hover{--tw-border-opacity:1;border-color:rgb(90 95 84/var(--tw-border-opacity,1))}.hover\:bg-\[\#1A1F12\]:hover{--tw-bg-opacity:1;background-color:rgb(26 31 18/var(--tw-bg-opacity,1))}.hover\:text-\[\#C9D9A8\]:hover{--tw-text-opacity:1;color:rgb(201 217 168/var(--tw-text-opacity,1))}.hover\:brightness-110:hover{--tw-brightness:brightness(1.1);filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}

package/index.html

@@ -7,21 +7,7 @@
   <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">
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-    /* Design tokens transcribed from the Paper artboard C1-0.
-       Using arbitrary Tailwind values for exact fidelity with the design. */
-    tailwind.config = {
-      theme: {
-        extend: {
-          fontFamily: {
-            display: ['VT323', 'system-ui', 'monospace'],
-            mono: ['"JetBrains Mono"', 'ui-monospace', 'SFMono-Regular', 'Menlo', 'monospace'],
-          },
-        },
-      },
-    };
-  </script>
+  <link rel="stylesheet" href="/dashboard.css">
   <style>
     html, body { background: #0B0B09; color: #F3EFE4; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
     .whale-ascii {

package/inspector.html

@@ -121,12 +121,61 @@
     ::-webkit-scrollbar-track { background: var(--bg); }
     ::-webkit-scrollbar-thumb { background: var(--border); }
     ::-webkit-scrollbar-thumb:hover { background: var(--muted); }
+
+    /* Tabs */
+    .tabs { display: flex; gap: 0; }
+    .tab {
+      padding: 6px 14px; border: 1px solid var(--border); background: var(--bg);
+      cursor: pointer; color: var(--dim); font-size: 12px; border-right: none;
+    }
+    .tab:last-child { border-right: 1px solid var(--border); }
+    .tab.active { background: var(--bg-3); color: var(--accent); border-color: var(--accent); }
+    .tab:hover { color: var(--fg); }
+
+    .view { display: none; }
+    .view.active { display: grid; grid-template-columns: 460px 1fr; height: calc(100vh - 53px); }
+    .view-full { display: none; }
+    .view-full.active { display: block; height: calc(100vh - 53px); overflow-y: auto; padding: 20px 28px; }
+
+    /* Sessions view */
+    .totals-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
+    .totals-grid .stat { padding: 12px 14px; border: 1px solid var(--border); background: var(--bg-2); }
+    .bucket-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 24px; }
+    .bucket-cell { padding: 10px 12px; border: 1px solid var(--border); background: var(--bg-2); }
+    .bucket-cell .lbl { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; }
+    .bucket-cell .pct { font-family: 'VT323', monospace; font-size: 22px; line-height: 1; margin-top: 2px; }
+    .bucket-cell .pct.bleed { color: var(--crit); }
+    .bucket-cell .pct.warm { color: var(--hit); }
+    .bucket-cell .sub { color: var(--dim); font-size: 11px; margin-top: 2px; }
+
+    .sessions-table { width: 100%; border-collapse: collapse; font-size: 11px; }
+    .sessions-table th {
+      text-align: left; padding: 8px 10px; color: var(--dim); font-weight: 500;
+      border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg);
+      text-transform: uppercase; font-size: 10px; letter-spacing: 0.05em;
+    }
+    .sessions-table td {
+      padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--fg);
+    }
+    .sessions-table tr:hover td { background: var(--bg-2); }
+    .sessions-table .num { text-align: right; font-variant-numeric: tabular-nums; }
+    .sessions-table .cost-high { color: var(--crit); font-weight: 500; }
+    .sessions-table .cost-med  { color: var(--warn); }
+    .sessions-table .bucket-singleton { color: var(--crit); }
+    .sessions-table .bucket-short    { color: var(--warn); }
+    .sessions-table .bucket-medium   { color: var(--dim); }
+    .sessions-table .bucket-warm     { color: var(--hit); }
+    .sessions-table .preview { color: var(--dim); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .sessions-table .sk { font-family: 'JetBrains Mono', monospace; color: var(--dim); }
   </style>
 </head>
 <body>
   <header>
     <div class="title display">mobygate :: inspector</div>
-    <div class="breadcrumb">~/.mobygate/captures/</div>
+    <div class="tabs">
+      <div class="tab active" data-tab="captures">Captures</div>
+      <div class="tab" data-tab="sessions">Sessions</div>
+    </div>
     <div class="spacer"></div>
     <button id="toggle" class="toggle">
       <span class="dot"></span>
@@ -135,7 +184,8 @@
     <a href="/">← dashboard</a>
   </header>
 
-  <div class="layout">
+  <!-- Captures tab (existing two-pane layout) -->
+  <div class="view active" id="view-captures">
     <div class="list-pane" id="list-pane">
       <div class="list-stats" id="list-stats">loading…</div>
       <div id="list"></div>
@@ -145,6 +195,13 @@
     </div>
   </div>
 
+  <!-- Sessions tab (new in v0.8.5) -->
+  <div class="view-full" id="view-sessions">
+    <div id="sessions-content">
+      <div style="padding:40px;color:var(--dim);text-align:center">loading session costs…</div>
+    </div>
+  </div>
+
   <script>
     let selectedFilename = null;
     let captureCache = []; // last fetch result, used to compute deltas
@@ -412,11 +469,151 @@
       return head + `<div class="placeholder">… ${msgs.length - 15} messages collapsed …</div>` + tail;
     }
 
+    // ──────────── tab switching ────────────
+
+    let activeTab = 'captures';
+    let sessionsLoaded = false;
+
+    document.querySelectorAll('.tab').forEach(t => {
+      t.addEventListener('click', () => {
+        const tab = t.dataset.tab;
+        document.querySelectorAll('.tab').forEach(x => x.classList.toggle('active', x.dataset.tab === tab));
+        document.querySelectorAll('.view').forEach(v => v.classList.toggle('active', v.id === `view-${tab}`));
+        document.querySelectorAll('.view-full').forEach(v => v.classList.toggle('active', v.id === `view-${tab}`));
+        activeTab = tab;
+        if (tab === 'sessions') refreshSessions();
+      });
+    });
+
+    // ──────────── sessions view ────────────
+
+    async function refreshSessions() {
+      try {
+        const r = await fetch('/dashboard/session-costs');
+        const data = await r.json();
+        renderSessions(data);
+        sessionsLoaded = true;
+      } catch (e) {
+        document.getElementById('sessions-content').innerHTML =
+          `<div class="placeholder">failed: ${esc(e.message)}</div>`;
+      }
+    }
+
+    function renderSessions(data) {
+      const sessions = data.sessions || [];
+      const buckets = data.buckets || {};
+
+      // Header stats
+      const totalsHtml = `
+        <div class="totals-grid">
+          <div class="stat">
+            <div class="label">total cost</div>
+            <div class="val accent">$${(data.total_cost_usd || 0).toFixed(2)}</div>
+            <div class="sub">across all tracked turns</div>
+          </div>
+          <div class="stat">
+            <div class="label">sessions</div>
+            <div class="val">${data.session_count || 0}</div>
+            <div class="sub">distinct session keys</div>
+          </div>
+          <div class="stat">
+            <div class="label">turns</div>
+            <div class="val">${fmt(data.total_turns || 0)}</div>
+            <div class="sub">non-tool-use end_turns only</div>
+          </div>
+          <div class="stat">
+            <div class="label">avg / turn</div>
+            <div class="val ${(data.total_cost_usd / Math.max(data.total_turns,1)) > 0.15 ? 'warn' : ''}">$${((data.total_cost_usd || 0) / Math.max(data.total_turns, 1)).toFixed(3)}</div>
+            <div class="sub">lower = better cache discipline</div>
+          </div>
+        </div>
+      `;
+
+      // Bucket breakdown
+      const order = ['warm', 'medium', 'short', 'singleton'];
+      const labels = {
+        warm: { name: '11+ turns (warm)', desc: 'cache amortized', cls: 'warm' },
+        medium: { name: '4-10 turns (medium)', desc: 'partial amortize', cls: '' },
+        short: { name: '2-3 turns (short)', desc: 'limited amortize', cls: '' },
+        singleton: { name: '1 turn (singleton)', desc: 'cache_creation tax — bleed', cls: 'bleed' },
+      };
+      const bucketsHtml = order.map(k => {
+        const b = buckets[k] || { sessions: 0, cost: 0, pct_of_total: 0 };
+        const lbl = labels[k];
+        return `
+          <div class="bucket-cell">
+            <div class="lbl">${lbl.name}</div>
+            <div class="pct ${lbl.cls}">${b.pct_of_total}%</div>
+            <div class="sub">${b.sessions} sessions · $${b.cost.toFixed(2)} · ${lbl.desc}</div>
+          </div>
+        `;
+      }).join('');
+
+      // Session table
+      const rowsHtml = sessions.map(s => {
+        const costClass = s.cost_usd > 1.0 ? 'cost-high' : s.cost_usd > 0.3 ? 'cost-med' : '';
+        const lastSeen = s.last_seen ? s.last_seen.replace(/_/, ' ').replace(/-/g, ':').slice(0, 16) : '?';
+        return `
+          <tr>
+            <td><span class="sk">${esc(s.session_key.slice(0, 22))}</span></td>
+            <td class="bucket-${s.bucket}">${s.bucket}</td>
+            <td class="num">${s.turns}</td>
+            <td class="num ${costClass}">$${s.cost_usd.toFixed(4)}</td>
+            <td class="num">$${s.per_turn_usd.toFixed(4)}</td>
+            <td>${esc(s.model || '?')}</td>
+            <td>${esc((s.path || '').replace('/v1/', ''))}</td>
+            <td class="preview">${esc(s.first_user || '(no first message captured)')}</td>
+          </tr>
+        `;
+      }).join('');
+
+      document.getElementById('sessions-content').innerHTML = `
+        <h2 style="font-family:'VT323',monospace;color:var(--accent);font-size:24px;margin:0 0 4px">Sessions cost breakdown</h2>
+        <div style="color:var(--dim);font-size:11px;margin-bottom:20px">
+          Aggregated from <code>[model-billed]</code> log lines. Updated each request. Generated ${new Date(data.generatedAt).toLocaleTimeString()}.
+        </div>
+
+        ${totalsHtml}
+
+        <h3 style="color:var(--accent);font-size:12px;text-transform:uppercase;letter-spacing:0.05em;margin:16px 0 10px">Cost by session warmth</h3>
+        <div class="bucket-grid">${bucketsHtml}</div>
+
+        <h3 style="color:var(--accent);font-size:12px;text-transform:uppercase;letter-spacing:0.05em;margin:24px 0 10px">All sessions (by cost, descending)</h3>
+        <table class="sessions-table">
+          <thead>
+            <tr>
+              <th>session_key</th>
+              <th>bucket</th>
+              <th class="num">turns</th>
+              <th class="num">cost</th>
+              <th class="num">$/turn</th>
+              <th>model</th>
+              <th>shape</th>
+              <th>first user message</th>
+            </tr>
+          </thead>
+          <tbody>${rowsHtml}</tbody>
+        </table>
+
+        <div style="color:var(--dim);font-size:11px;margin-top:24px;line-height:1.5">
+          <b>How to read this:</b><br>
+          • <span style="color:var(--hit)">Warm</span> sessions = cache working, low $/turn — these are the wins.<br>
+          • <span style="color:var(--crit)">Singleton</span> sessions = sessions that fired once and never got cache amortization. High % here means money is bleeding to cache_creation tax on idle channels.<br>
+          • If a singleton is &gt; $0.50, it's typically a one-shot from a rarely-visited Discord channel.<br>
+          • <b>Mitigation:</b> consolidate channels, or set up an OpenClaw cron to ping high-value channels every 4 min to keep their wire cache warm.
+        </div>
+      `;
+    }
+
     // ──────────── kickoff ────────────
 
     refreshToggleState();
     refreshList();
-    setInterval(() => { refreshList(); refreshToggleState(); }, 3000);
+    setInterval(() => {
+      if (activeTab === 'captures') { refreshList(); }
+      if (activeTab === 'sessions' && sessionsLoaded) { refreshSessions(); }
+      refreshToggleState();
+    }, 5000);
   </script>
 </body>
 </html>

package/lib/anthropic.js

@@ -46,7 +46,12 @@ import { v4 as uuidv4 } from 'uuid';
  */
 export function extractSdkUsage(message) {
   if (!message) return { input_tokens: 0, output_tokens: 0, cache_read_input_tokens: 0, cache_creation_input_tokens: 0, modelUsage: null };
-  const u = message.usage || message;
+  // Order: explicit `.usage` (SDK result message), inner Anthropic
+  // Message `.message.usage` (assistant turn — present on every turn the
+  // SDK emits, so we can capture usage even when the loop is aborted on
+  // tool_use before the SDK delivers its final `result`), then flat fields
+  // on the message itself as a last-resort fallback.
+  const u = message.usage || message.message?.usage || message;
   return {
     input_tokens: u.input_tokens || 0,
     output_tokens: u.output_tokens || 0,