npm - mobygate - Versions diffs - 0.3.0 - Mend

mobygate 0.3.0

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

Files changed (17) hide show

package/CHANGELOG.md +207 -0
package/LICENSE +21 -0
package/README.md +429 -0
package/bin/mobygate.js +443 -0
package/index.html +805 -0
package/launchd/ai.mobygate.auth-refresh.plist +83 -0
package/lib/ascii.js +108 -0
package/lib/config.js +131 -0
package/lib/dashboard-bus.js +158 -0
package/lib/platform.js +584 -0
package/lib/session-store.js +112 -0
package/mcp-inspect.mjs +186 -0
package/package.json +62 -0
package/scripts/auth-helper.js +198 -0
package/scripts/auth-refresh.js +41 -0
package/scripts/auth-status.js +36 -0
package/server.js +1076 -0

package/index.html ADDED Viewed

@@ -0,0 +1,805 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>mobygate</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">
+  <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>
+  <style>
+    html, body { background: #0B0B09; color: #F3EFE4; font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; }
+    .whale-ascii {
+      color: #B7E56D;
+      font-family: 'JetBrains Mono', ui-monospace, monospace;
+      white-space: pre;
+      font-size: 8px;
+      line-height: 10px;
+      letter-spacing: 0;
+      margin: 0;
+    }
+    .display { font-family: 'VT323', monospace; letter-spacing: 0.02em; }
+    .pulse-dot { animation: pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
+    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
+    .row-enter { animation: rowIn .2s ease-out; }
+    @keyframes rowIn { from{opacity:0;transform:translateY(-3px)} to{opacity:1;transform:translateY(0)} }
+    .req-row:hover { background: rgba(255,255,255,0.02); cursor: pointer; }
+    /* Scrollbar styling to match */
+    ::-webkit-scrollbar { width: 8px; height: 8px; }
+    ::-webkit-scrollbar-track { background: #0B0B09; }
+    ::-webkit-scrollbar-thumb { background: #2A2A1F; border-radius: 0; }
+    ::-webkit-scrollbar-thumb:hover { background: #5A5F54; }
+  </style>
+</head>
+<body class="antialiased">
+  <div class="mx-auto px-12 pt-8 pb-7 flex flex-col gap-6 max-w-[1440px] min-h-screen">
+    <!-- ===== Header ===== -->
+    <header class="flex justify-between items-center shrink-0">
+      <div class="flex items-center gap-[22px]">
+        <pre class="whale-ascii">       ##       .
+  ## ## ##     ==
+##  ## ## ##  ===
+/"""""""""""\__/ ==
+\______ o     __/
+ \______\___,/ </pre>
+        <div class="flex flex-col gap-1">
+          <div class="flex items-baseline gap-2.5">
+            <div class="display text-[#B7E56D] text-4xl leading-8 tracking-[0.06em]">mobygate</div>
+            <div class="uppercase text-[#5A5F54] font-medium text-[11px] leading-[14px] tracking-[0.14em]" id="h-version">v0.1.0</div>
+          </div>
+          <div class="text-[#8A9A6A] text-xs leading-4">
+            OpenAI → Claude Max · local gateway · <span id="h-tty">tty0</span>
+          </div>
+        </div>
+      </div>
+      <div class="flex items-center gap-2.5">
+        <!-- Health pill -->
+        <div id="healthPill" class="flex items-center rounded-full py-2 px-3.5 gap-2 bg-[#121210] border border-[#2A2A1F]">
+          <span class="pulse-dot rounded-full bg-[#5A5F54] w-2 h-2"></span>
+          <span class="pulse-dot opacity-50 -ml-3 rounded-full bg-[#5A5F54] w-2 h-2"></span>
+          <span id="healthText" class="text-[#5A5F54] font-medium text-xs tracking-[0.08em]">connecting</span>
+          <span id="healthStream" class="text-[#5A5F54] text-[11px] leading-[14px]">· …</span>
+        </div>
+        <button id="clearLogBtn" class="rounded-full py-2 px-3.5 border border-[#2A2A1F] text-[#C9D9A8] font-medium text-xs tracking-[0.04em] hover:border-[#5A5F54] transition">clear log</button>
+        <button id="authRefreshBtn" class="flex items-center rounded-full py-2 px-3.5 gap-1.5 bg-[#E89B2E] hover:brightness-110 transition">
+          <span class="rounded-full bg-[#0B0B09] w-1.5 h-1.5"></span>
+          <span class="text-[#0B0B09] font-bold text-xs tracking-[0.04em]">force refresh auth</span>
+        </button>
+      </div>
+    </header>
+    <!-- ===== KPI strip ===== -->
+    <section class="grid grid-cols-4 gap-4 shrink-0">
+      <!-- Uptime -->
+      <div class="flex flex-col py-[22px] px-6 gap-3 bg-[#121210] border-t border-b border-r border-[#1A1A15] border-l-2 border-l-[#B7E56D]">
+        <div class="flex justify-between items-center">
+          <div class="uppercase text-[#8A9A6A] font-medium text-[10px] leading-3 tracking-[0.22em]">Uptime</div>
+          <div id="k-uptimeSince" class="text-[#5A5F54] text-[10px] leading-3">—</div>
+        </div>
+        <div class="flex items-baseline gap-2.5">
+          <div class="display text-[#F3EFE4] text-[64px] leading-[56px]" id="k-uptime">0:00</div>
+          <div class="text-[#8A9A6A] text-xs leading-4" id="k-uptimeUnit">m:ss</div>
+        </div>
+        <div class="flex items-center gap-1">
+          <span class="rounded-full bg-[#B7E56D] w-1.5 h-1.5"></span>
+          <span class="text-[#B7E56D] text-[11px] leading-[14px]" id="k-uptimeStatus">no restarts · port 3456</span>
+        </div>
+      </div>
+      <!-- Requests -->
+      <div class="flex flex-col py-[22px] px-6 gap-3 bg-[#121210] border-t border-b border-r border-[#1A1A15] border-l-2 border-l-[#E89B2E]">
+        <div class="flex justify-between items-center">
+          <div class="uppercase text-[#8A9A6A] font-medium text-[10px] leading-3 tracking-[0.22em]">Requests</div>
+          <div class="text-[#5A5F54] text-[10px] leading-3">since boot</div>
+        </div>
+        <div class="flex items-baseline gap-2.5">
+          <div class="display text-[#F3EFE4] text-[64px] leading-[56px]" id="k-total">0</div>
+          <div class="text-[#8A9A6A] text-xs leading-4" id="k-totalSub">total</div>
+        </div>
+        <div class="flex items-center gap-2.5 text-[11px] leading-[14px]">
+          <span class="flex items-center gap-1 text-[#C9D9A8]">
+            <span class="bg-[#4EA4C4] w-1.5 h-1.5"></span>
+            <span>stream <span id="k-stream">0</span></span>
+          </span>
+          <span class="flex items-center gap-1 text-[#C9D9A8]">
+            <span class="bg-[#E89B2E] w-1.5 h-1.5"></span>
+            <span>tools <span id="k-tools">0</span></span>
+          </span>
+          <span class="flex items-center gap-1 text-[#C9D9A8]">
+            <span class="bg-[#5A5F54] w-1.5 h-1.5"></span>
+            <span>img <span id="k-images">0</span></span>
+          </span>
+        </div>
+      </div>
+      <!-- Success rate -->
+      <div class="flex flex-col py-[22px] px-6 gap-3 bg-[#121210] border-t border-b border-r border-[#1A1A15] border-l-2 border-l-[#B7E56D]">
+        <div class="flex justify-between items-center">
+          <div class="uppercase text-[#8A9A6A] font-medium text-[10px] leading-3 tracking-[0.22em]">Success rate</div>
+          <div id="k-successMeta" class="text-[#5A5F54] text-[10px] leading-3">0 of 0</div>
+        </div>
+        <div class="flex items-baseline gap-2.5">
+          <div class="display text-[#B7E56D] text-[64px] leading-[56px]" id="k-successPct">—</div>
+        </div>
+        <div id="k-successBar" class="flex items-center h-1.5 gap-0.5 shrink-0">
+          <!-- filled dynamically -->
+        </div>
+        <div class="text-[#8A9A6A] text-[11px] leading-[14px]" id="k-successSub">no traffic yet</div>
+      </div>
+      <!-- Avg latency -->
+      <div class="flex flex-col py-[22px] px-6 gap-3 bg-[#121210] border-t border-b border-r border-[#1A1A15] border-l-2 border-l-[#4EA4C4]">
+        <div class="flex justify-between items-center">
+          <div class="uppercase text-[#8A9A6A] font-medium text-[10px] leading-3 tracking-[0.22em]">Avg latency</div>
+          <div id="k-latMeta" class="text-[#5A5F54] text-[10px] leading-3">p50 / p95</div>
+        </div>
+        <div class="flex items-baseline gap-2.5">
+          <div class="display text-[#F3EFE4] text-[64px] leading-[56px]" id="k-latP50">—</div>
+          <div class="text-[#4EA4C4] text-xs leading-4" id="k-latP95">p95 —</div>
+        </div>
+        <div id="k-latSpark" class="flex items-end h-[22px] gap-[3px] shrink-0">
+          <!-- sparkline filled dynamically -->
+        </div>
+      </div>
+    </section>
+    <!-- ===== Info row: Server | Auth | Traffic ===== -->
+    <section class="grid grid-cols-3 gap-4 shrink-0">
+      <!-- Server -->
+      <div class="flex flex-col py-[22px] px-6 gap-4 bg-[#121210] border border-[#1A1A15]">
+        <div class="flex justify-between items-center">
+          <div class="flex items-center gap-2">
+            <span class="bg-[#B7E56D] w-1.5 h-1.5"></span>
+            <span class="uppercase text-[#C9D9A8] font-medium text-[11px] leading-[14px] tracking-[0.22em]">Server</span>
+          </div>
+          <div class="text-[#5A5F54] text-[10px] leading-3" id="s-addr">127.0.0.1:3456</div>
+        </div>
+        <div class="flex flex-col gap-2.5">
+          <div class="flex justify-between items-baseline pb-2 border-b border-[#2A2A1F]">
+            <div class="text-[#8A9A6A] text-xs leading-4">default model</div>
+            <div class="text-[#F3EFE4] text-xs leading-4" id="s-model">—</div>
+          </div>
+          <div class="flex justify-between items-baseline pb-2 border-b border-[#2A2A1F]">
+            <div class="text-[#8A9A6A] text-xs leading-4">active sessions</div>
+            <div class="flex items-baseline gap-2">
+              <div class="text-[#F3EFE4] text-xs leading-4" id="s-sessions">0</div>
+              <div class="text-[#5A5F54] text-[10px] leading-3" id="s-sessionsSub">· idle</div>
+            </div>
+          </div>
+          <div class="flex justify-between items-baseline pb-2 border-b border-[#2A2A1F]">
+            <div class="text-[#8A9A6A] text-xs leading-4">context window</div>
+            <div class="text-[#F3EFE4] text-xs leading-4" id="s-ctx">—</div>
+          </div>
+          <div class="flex justify-between items-baseline">
+            <div class="text-[#8A9A6A] text-xs leading-4">build</div>
+            <div class="text-[#F3EFE4] text-xs leading-4" id="s-build">—</div>
+          </div>
+        </div>
+      </div>
+      <!-- Auth -->
+      <div class="flex flex-col py-[22px] px-6 gap-4 bg-[#121210] border border-[#1A1A15]">
+        <div class="flex justify-between items-center">
+          <div class="flex items-center gap-2">
+            <span class="bg-[#B7E56D] w-1.5 h-1.5"></span>
+            <span class="uppercase text-[#C9D9A8] font-medium text-[11px] leading-[14px] tracking-[0.22em]">Auth</span>
+          </div>
+          <div id="a-badge" class="py-0.5 px-2 bg-[#B7E56D1A] border border-[#B7E56D]">
+            <span class="uppercase text-[#B7E56D] font-bold text-[10px] leading-3 tracking-[0.12em]">checking</span>
+          </div>
+        </div>
+        <div class="flex flex-col gap-2.5">
+          <div class="flex justify-between items-baseline pb-2 border-b border-[#2A2A1F]">
+            <div class="text-[#8A9A6A] text-xs leading-4">email</div>
+            <div class="text-[#F3EFE4] text-xs leading-4" id="a-email">—</div>
+          </div>
+          <div class="flex justify-between items-baseline pb-2 border-b border-[#2A2A1F]">
+            <div class="text-[#8A9A6A] text-xs leading-4">plan</div>
+            <div class="flex items-center gap-1.5">
+              <div class="py-0.5 px-1.5 bg-[#E89B2E]" id="a-planBadge">
+                <span class="uppercase text-[#0B0B09] font-bold text-[10px] leading-3 tracking-widest" id="a-plan">—</span>
+              </div>
+              <div class="text-[#F3EFE4] text-xs leading-4" id="a-method">—</div>
+            </div>
+          </div>
+          <div class="flex justify-between items-baseline pb-2 border-b border-[#2A2A1F]">
+            <div class="text-[#8A9A6A] text-xs leading-4">last probe</div>
+            <div class="text-[#5A5F54] text-xs leading-4" id="a-probe">not probed ← try force refresh</div>
+          </div>
+          <div class="flex justify-between items-baseline">
+            <div class="text-[#8A9A6A] text-xs leading-4">token refreshes</div>
+            <div class="text-[#F3EFE4] text-xs leading-4" id="a-refreshes">0 · healthy</div>
+          </div>
+        </div>
+      </div>
+      <!-- Traffic -->
+      <div class="flex flex-col py-[22px] px-6 gap-4 bg-[#121210] border border-[#1A1A15]">
+        <div class="flex justify-between items-center">
+          <div class="flex items-center gap-2">
+            <span class="bg-[#4EA4C4] w-1.5 h-1.5"></span>
+            <span class="uppercase text-[#C9D9A8] font-medium text-[11px] leading-[14px] tracking-[0.22em]">Traffic</span>
+          </div>
+          <div class="text-[#5A5F54] text-[10px] leading-3">last 15 min · req/min</div>
+        </div>
+        <div class="flex items-end h-[110px] gap-1 shrink-0">
+          <div id="t-axis" class="flex flex-col items-end h-full justify-between pr-1 gap-2">
+            <!-- y-axis labels injected -->
+          </div>
+          <div id="t-bars" class="flex items-end grow h-full gap-[5px]">
+            <!-- traffic bars injected -->
+          </div>
+        </div>
+        <div class="flex justify-between items-baseline">
+          <div class="text-[#5A5F54] text-[10px] leading-3">-15m</div>
+          <div class="text-[#B7E56D] text-[10px] leading-3">now</div>
+        </div>
+      </div>
+    </section>
+    <!-- ===== Live requests ===== -->
+    <section class="flex flex-col shrink-0 bg-[#121210] border border-[#1A1A15]">
+      <div class="flex items-center justify-between py-[18px] px-6 border-b border-[#2A2A1F]">
+        <div class="flex items-center gap-2.5">
+          <span class="rounded-full bg-[#B7E56D] w-1.5 h-1.5"></span>
+          <span class="uppercase text-[#C9D9A8] font-medium text-[11px] leading-[14px] tracking-[0.22em]">Live requests</span>
+          <span class="text-[#5A5F54] text-[11px] leading-[14px]" id="r-meta">· idle</span>
+        </div>
+        <div class="flex items-center gap-2" id="r-filters">
+          <button data-filter="all" class="py-1 px-2.5 border border-[#2A2A1F] uppercase text-[10px] leading-3 tracking-[0.12em] text-[#C9D9A8]">all</button>
+          <button data-filter="errors" class="py-1 px-2.5 border border-[#2A2A1F] uppercase text-[10px] leading-3 tracking-[0.12em] text-[#5A5F54] hover:text-[#C9D9A8]">errors</button>
+          <button data-filter="slow" class="py-1 px-2.5 border border-[#2A2A1F] uppercase text-[10px] leading-3 tracking-[0.12em] text-[#5A5F54] hover:text-[#C9D9A8]">slow (&gt;15s)</button>
+        </div>
+      </div>
+      <!-- Column header -->
+      <div class="flex items-center py-2.5 px-6 gap-4 border-b border-[#2A2A1F] uppercase text-[10px] leading-3 tracking-[0.18em] text-[#5A5F54]">
+        <div class="w-[72px] shrink-0">time</div>
+        <div class="w-[100px] shrink-0">kind</div>
+        <div class="w-[180px] shrink-0">model</div>
+        <div class="w-[110px] shrink-0">session</div>
+        <div class="grow">latency</div>
+        <div class="w-[100px] text-right shrink-0">tokens in/out</div>
+        <div class="w-[70px] text-right shrink-0">status</div>
+      </div>
+      <!-- Rows container -->
+      <div id="r-rows" class="max-h-[52vh] overflow-auto">
+        <div class="py-10 text-center text-[#5A5F54] text-xs" id="r-empty">
+          no requests yet — make one from Hermes/OpenClaw and it'll appear here live
+        </div>
+      </div>
+    </section>
+    <!-- ===== Sessions panel ===== -->
+    <section class="flex flex-col shrink-0 bg-[#121210] border border-[#1A1A15]">
+      <div class="flex items-center justify-between py-[18px] px-6 border-b border-[#2A2A1F]">
+        <div class="flex items-center gap-2.5">
+          <span class="bg-[#E89B2E] w-1.5 h-1.5"></span>
+          <span class="uppercase text-[#C9D9A8] font-medium text-[11px] leading-[14px] tracking-[0.22em]">Sessions</span>
+          <span class="text-[#5A5F54] text-[11px] leading-[14px]">· <span id="sess-count">0</span> active</span>
+        </div>
+        <div class="flex items-center gap-2 text-[11px] leading-[14px]">
+          <button id="sessionsRefreshBtn" class="text-[#5A5F54] hover:text-[#C9D9A8]">refresh</button>
+          <button id="sessionsClearBtn" class="text-[#E89B2E] hover:brightness-110">expire all</button>
+        </div>
+      </div>
+      <div id="sess-rows" class="max-h-[240px] overflow-auto">
+        <div class="py-6 text-center text-[#5A5F54] text-xs" id="sess-empty">no active sessions</div>
+      </div>
+    </section>
+    <!-- ===== Log tail ===== -->
+    <section class="flex flex-col shrink-0 bg-[#121210] border border-[#1A1A15]">
+      <div class="flex items-center justify-between py-[18px] px-6 border-b border-[#2A2A1F]">
+        <div class="flex items-center gap-2.5">
+          <span class="bg-[#4EA4C4] w-1.5 h-1.5"></span>
+          <span class="uppercase text-[#C9D9A8] font-medium text-[11px] leading-[14px] tracking-[0.22em]">Server log</span>
+          <span class="text-[#5A5F54] text-[11px] leading-[14px]" id="logs-meta">—</span>
+        </div>
+        <div class="flex items-center gap-3 text-[11px] leading-[14px]">
+          <label class="flex items-center gap-1.5 cursor-pointer text-[#5A5F54]">
+            <input type="checkbox" id="logsAutoRefresh" checked class="accent-[#4EA4C4]">
+            <span>auto-refresh</span>
+          </label>
+          <button id="logsRefreshBtn" class="text-[#5A5F54] hover:text-[#C9D9A8]">refresh</button>
+        </div>
+      </div>
+      <pre id="logs-body" class="text-[11px] leading-[18px] text-[#C9D9A8] overflow-auto max-h-[40vh] p-4 whitespace-pre-wrap"></pre>
+    </section>
+    <!-- ===== Footer / status line ===== -->
+    <footer class="flex justify-between items-center shrink-0 mt-auto pt-2">
+      <div class="flex items-center gap-1.5">
+        <span class="uppercase text-[#5A5F54] text-[10px] leading-3 tracking-[0.12em]">endpoints</span>
+        <span class="text-[#5A5F54] text-[11px] leading-[14px]">/</span>
+        <a href="/health" class="py-[3px] px-2.5 border border-[#2A2A1F] text-[#C9D9A8] text-[11px] leading-[14px] hover:border-[#5A5F54]">/health</a>
+        <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>
+      </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>
+        <span class="w-px h-3 bg-[#2A2A1F]"></span>
+        <span class="text-[#B7E56D] text-[11px] leading-[14px]">mobygate</span>
+        <span class="text-[#5A5F54] text-[11px] leading-[14px]">· <span id="f-tty">tty0</span> · <span id="f-ver">0.1.0</span></span>
+      </div>
+    </footer>
+  </div>
+  <!-- ===== Details modal ===== -->
+  <div id="detailsModal" class="hidden fixed inset-0 bg-black/70 z-50 p-6 flex items-start justify-center overflow-auto">
+    <div class="bg-[#121210] border border-[#2A2A1F] max-w-3xl w-full mt-10">
+      <div class="flex items-center justify-between px-4 py-3 border-b border-[#2A2A1F]">
+        <div class="uppercase text-[#C9D9A8] font-medium text-[11px] tracking-[0.22em]">Request details</div>
+        <button id="detailsCloseBtn" class="text-[#5A5F54] hover:text-[#C9D9A8]">close ✕</button>
+      </div>
+      <pre id="detailsBody" class="text-[11px] leading-[16px] text-[#C9D9A8] p-4 overflow-auto max-h-[70vh] whitespace-pre-wrap"></pre>
+    </div>
+  </div>
+  <script type="module">
+    // ───────────────────────── helpers
+    const $ = (id) => document.getElementById(id);
+    const fmt = {
+      time(ts) { return new Date(ts).toLocaleTimeString([], { hour12: false }); },
+      ms(n)    { return n == null ? '—' : `${n}`; },
+      ctx(n)   { if (!n) return '—'; return n >= 1000 ? `${Math.floor(n / 1000)}k` : String(n); },
+      secs(ms) {
+        if (ms == null || !Number.isFinite(ms)) return '—';
+        if (ms < 1000) return `${ms}ms`;
+        return `${(ms / 1000).toFixed(1)}s`;
+      },
+      uptime(sec) {
+        if (sec == null) return '0:00';
+        const d = Math.floor(sec / 86400), h = Math.floor((sec % 86400) / 3600);
+        const m = Math.floor((sec % 3600) / 60), s = sec % 60;
+        if (d) return `${d}d ${String(h).padStart(2,'0')}:${String(m).padStart(2,'0')}`;
+        if (h) return `${h}:${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`;
+        return `${m}:${String(s).padStart(2,'0')}`;
+      },
+      uptimeSince(iso) {
+        if (!iso) return '—';
+        const d = new Date(iso);
+        const mon = d.toLocaleString('en-US', { month: 'short' });
+        const day = d.getDate();
+        const hh = String(d.getHours()).padStart(2,'0');
+        const mm = String(d.getMinutes()).padStart(2,'0');
+        return `since ${day} ${mon} ${hh}:${mm}`;
+      },
+      short(s, n=12) { return !s ? '—' : (s.length > n ? s.slice(0, n) + '…' : s); },
+      modelBase(model) {
+        // "claude-opus-4-6" → "opus"; "claude-opus-4-7[1m]" → "opus"
+        const m = /claude-(opus|sonnet|haiku)/i.exec(model || '');
+        return m ? m[1] : 'model';
+      },
+      modelCtx(resolved) {
+        // Guess context window from resolved model name
+        if (!resolved) return '200k ctx';
+        if (resolved.includes('[1m]')) return '1M ctx';
+        return '200k ctx';
+      },
+    };
+    // ───────────────────────── state
+    const inflight = new Map();
+    const completed = new Map();  // id → { startEv, endEv }
+    const allRows = [];           // DOM row data: { id, startEv, endEv?, el }
+    const MAX_ROWS = 200;
+    let currentFilter = 'all';
+    let stats = null;
+    let serverPort = 3456;
+    // ───────────────────────── KPI rendering
+    function renderStats(s, boot) {
+      stats = s;
+      // Uptime
+      $('k-uptime').textContent = fmt.uptime(s.uptimeSec);
+      $('k-uptimeUnit').textContent = s.uptimeSec >= 3600 ? 'h:mm:ss' : 'm:ss';
+      $('k-uptimeSince').textContent = fmt.uptimeSince(s.startedAt);
+      $('k-uptimeStatus').textContent = `no restarts · port ${serverPort}`;
+      // Requests
+      $('k-total').textContent = s.totalRequests;
+      $('k-stream').textContent = s.streamingRequests;
+      $('k-tools').textContent  = s.toolRequests;
+      $('k-images').textContent = s.multimodalRequests;
+      // Success rate
+      const total = s.totalRequests || 0;
+      if (total === 0) {
+        $('k-successPct').textContent = '—';
+        $('k-successPct').classList.remove('text-[#B7E56D]','text-[#E89B2E]','text-[#F3EFE4]');
+        $('k-successPct').classList.add('text-[#5A5F54]');
+        $('k-successMeta').textContent = '0 of 0';
+        $('k-successSub').textContent  = 'no traffic yet';
+        $('k-successBar').innerHTML = Array(7).fill('<div class="grow h-full bg-[#1A1A15]"></div>').join('');
+      } else {
+        const pct = Math.round((s.succeeded / total) * 100);
+        $('k-successPct').textContent = pct + '%';
+        $('k-successPct').classList.remove('text-[#5A5F54]');
+        $('k-successPct').classList.add(pct === 100 ? 'text-[#B7E56D]' : (pct >= 80 ? 'text-[#F3EFE4]' : 'text-[#E89B2E]'));
+        $('k-successMeta').textContent = `${s.succeeded} of ${total}`;
+        $('k-successSub').textContent  = s.failed === 0 ? 'zero failures · no 5xx observed' : `${s.failed} failed · check logs`;
+        // 7-bar progress
+        const filled = Math.round((pct / 100) * 7);
+        const bar = Array.from({length: 7}, (_, i) =>
+          `<div class="grow h-full ${i < filled ? 'bg-[#B7E56D]' : 'bg-[#1A1A15]'}"></div>`
+        ).join('');
+        $('k-successBar').innerHTML = bar;
+      }
+      // Latency (combined stream + sync for p50/p95; show split via sub)
+      const lat = s.latency || { stream: {}, sync: {} };
+      const combined = [...(lat.stream.recent || []), ...(lat.sync.recent || [])];
+      if (!combined.length) {
+        $('k-latP50').textContent = '—';
+        $('k-latP95').textContent = 'no data';
+        $('k-latMeta').textContent = 'p50 / p95';
+      } else {
+        const sorted = [...combined].sort((a,b)=>a-b);
+        const p50 = sorted[Math.min(sorted.length-1, Math.floor(0.5*sorted.length))];
+        const p95 = sorted[Math.min(sorted.length-1, Math.floor(0.95*sorted.length))];
+        $('k-latP50').textContent = fmt.secs(p50);
+        $('k-latP95').textContent = `p95 ${fmt.secs(p95)}`;
+        $('k-latMeta').textContent = `n=${combined.length}`;
+        renderLatencySparkline(combined);
+      }
+      // Traffic chart
+      renderTrafficChart(s.traffic || []);
+    }
+    function renderLatencySparkline(values) {
+      const max = Math.max(...values, 1);
+      const bars = values.slice(-14).map((v) => {
+        const pct = Math.max(4, Math.round((v / max) * 100));
+        return `<div class="w-[6px] bg-[#4EA4C4]" style="height:${pct}%"></div>`;
+      }).join('');
+      $('k-latSpark').innerHTML = bars || '';
+    }
+    function renderTrafficChart(series) {
+      const maxCount = Math.max(1, ...series.map(b => b.count));
+      // y-axis: max, mid, zero
+      const axis = [maxCount, Math.ceil(maxCount / 2), 0].map(n =>
+        `<div class="text-[#5A5F54] text-[9px] leading-3">${n}</div>`
+      ).join('');
+      $('t-axis').innerHTML = axis;
+      // bars
+      const bars = series.map(b => {
+        const pct = b.count > 0 ? Math.max(8, Math.round((b.count / maxCount) * 100)) : 0;
+        const cls = b.count > 0 ? 'bg-[#4EA4C4]' : 'bg-[#1A1A15]';
+        const hstyle = b.count > 0 ? `height:${pct}%` : 'height:2px';
+        return `<div class="grow shrink basis-0 ${cls}" style="${hstyle}" title="${b.count} req · ${b.minute}"></div>`;
+      }).join('');
+      $('t-bars').innerHTML = bars;
+    }
+    function renderServerCard({ port, defaultModel, activeSessions, build }) {
+      serverPort = port;
+      $('s-addr').textContent = `127.0.0.1:${port}`;
+      $('s-model').textContent = defaultModel || '—';
+      $('s-sessions').textContent = activeSessions;
+      $('s-sessionsSub').textContent = activeSessions > 0 ? '· active' : '· idle';
+      if (build) {
+        $('s-ctx').textContent = build.contextWindow ? `${Number(build.contextWindow).toLocaleString()} tok` : '—';
+        $('s-build').textContent = `v${build.version} · ${build.platform}`;
+        $('h-version').textContent = `v${build.version}`;
+        $('f-ver').textContent = build.version;
+      }
+    }
+    // ───────────────────────── Live requests
+    function statusPill(endEv) {
+      if (!endEv) return '<span class="text-[#5A5F54] text-[11px]">running…</span>';
+      const code = endEv.httpStatus || 200;
+      const ok = endEv.status === 'ok';
+      const color = ok ? '#B7E56D' : '#E89B2E';
+      const bg = ok ? '#B7E56D1F' : '#E89B2E26';
+      return `<div class="py-0.5 px-2 inline-block" style="background:${bg}"><span class="font-bold text-[10px] leading-3 tracking-widest" style="color:${color}">${code}</span></div>`;
+    }
+    function latencyBar(endEv) {
+      if (!endEv) return `
+        <div class="h-1.5 relative flex bg-[#1A1A15]"><div class="w-[20%] h-full bg-[#5A5F54] animate-pulse"></div></div>
+        <div class="text-[#5A5F54] text-[10px] leading-3 mt-1">running…</div>`;
+      const ms = endEv.durationMs || 0;
+      // Bar scales against 30s reference; >15s = slow (orange), otherwise blue, or green for <3s
+      const pct = Math.min(100, Math.max(5, (ms / 30000) * 100));
+      const slow = ms > 15000;
+      const color = slow ? '#E89B2E' : (ms < 3000 ? '#B7E56D' : '#4EA4C4');
+      const label = slow ? `${fmt.secs(ms)} · slow` : `${fmt.secs(ms)} · ok`;
+      return `
+        <div class="h-1.5 relative flex bg-[#1A1A15]"><div class="h-full" style="width:${pct.toFixed(1)}%;background:${color}"></div></div>
+        <div class="text-[10px] leading-3 mt-1" style="color:${color}">${label}</div>`;
+    }
+    function kindChips(ev) {
+      const chips = [];
+      if (ev.stream) chips.push(`<div class="py-0.5 px-1.5 border" style="background:#4EA4C426;border-color:#4EA4C4"><span class="uppercase text-[9px] leading-3 tracking-[0.08em]" style="color:#4EA4C4">stream</span></div>`);
+      if (ev.tools)  chips.push(`<div class="py-0.5 px-1.5 border" style="background:#E89B2E26;border-color:#E89B2E"><span class="uppercase text-[9px] leading-3 tracking-[0.08em]" style="color:#E89B2E">tool</span></div>`);
+      if (ev.images) chips.push(`<div class="py-0.5 px-1.5 border" style="background:#5A5F5426;border-color:#5A5F54"><span class="uppercase text-[9px] leading-3 tracking-[0.08em]" style="color:#8A9A6A">img</span></div>`);
+      if (!chips.length) chips.push(`<div class="py-0.5 px-1.5 border" style="background:#8A9A6A1F;border-color:#2A2A1F"><span class="uppercase text-[9px] leading-3 tracking-[0.08em] text-[#8A9A6A]">sync</span></div>`);
+      return chips.join('');
+    }
+    function requestMatchesFilter(row) {
+      if (currentFilter === 'all') return true;
+      if (!row.endEv) return currentFilter !== 'errors'; // still running
+      if (currentFilter === 'errors') return row.endEv.status !== 'ok';
+      if (currentFilter === 'slow') return (row.endEv.durationMs || 0) > 15000;
+      return true;
+    }
+    function rebuildRowEl(row) {
+      const { startEv, endEv, id } = row;
+      row.el.id = `req-${id}`;
+      row.el.className = 'req-row flex items-center py-[14px] px-6 gap-4 border-b border-[#1A1A15] row-enter';
+      row.el.onclick = () => openDetails(id);
+      row.el.innerHTML = `
+        <div class="w-[72px] shrink-0 text-[#C9D9A8] text-xs leading-4">${fmt.time(startEv.ts)}</div>
+        <div class="w-[100px] flex shrink-0 gap-1">${kindChips(startEv)}</div>
+        <div class="w-[180px] flex flex-col shrink-0 gap-0.5">
+          <div class="text-[#F3EFE4] text-xs leading-4 truncate">${startEv.model || '—'}</div>
+          <div class="text-[#5A5F54] text-[10px] leading-3">${fmt.modelBase(startEv.model)} · ${fmt.modelCtx(startEv.resolvedModel)}</div>
+        </div>
+        <div class="w-[110px] shrink-0 text-[#8A9A6A] text-xs leading-4 truncate" title="${startEv.session || ''}">${startEv.session ? fmt.short(startEv.session) : '—'}</div>
+        <div class="grow flex flex-col gap-1">${latencyBar(endEv)}</div>
+        <div class="w-[100px] text-right shrink-0 text-[#8A9A6A] text-[11px] leading-[14px]">${endEv && (endEv.inputTokens || endEv.outputTokens) ? `${endEv.inputTokens || 0}/${endEv.outputTokens || 0}` : '—'}</div>
+        <div class="w-[70px] flex justify-end shrink-0">${statusPill(endEv)}</div>
+      `;
+      row.el.style.display = requestMatchesFilter(row) ? '' : 'none';
+    }
+    function upsertRequestRow(startEv, endEv) {
+      let row = allRows.find(r => r.id === startEv.id);
+      if (!row) {
+        const el = document.createElement('div');
+        row = { id: startEv.id, startEv, endEv, el };
+        allRows.unshift(row);
+        const container = $('r-rows');
+        $('r-empty').style.display = 'none';
+        container.prepend(el);
+        while (allRows.length > MAX_ROWS) {
+          const doomed = allRows.pop();
+          doomed.el.remove();
+          completed.delete(doomed.id);
+        }
+      } else {
+        row.startEv = startEv;
+        if (endEv) row.endEv = endEv;
+      }
+      rebuildRowEl(row);
+      if (row.endEv) completed.set(row.id, { startEv: row.startEv, endEv: row.endEv });
+      updateRequestMeta();
+    }
+    function updateRequestMeta() {
+      const inflightCount = [...allRows].filter(r => !r.endEv).length;
+      const visible = allRows.filter(requestMatchesFilter).length;
+      const total = allRows.length;
+      const status = inflightCount > 0 ? 'streaming' : 'idle';
+      $('r-meta').textContent = `· showing ${visible} of ${total} · ${status}`;
+      $('f-stream').textContent = inflightCount > 0 ? 'stream · active' : 'stream · connected';
+    }
+    // Filter buttons
+    for (const btn of $('r-filters').querySelectorAll('button')) {
+      btn.addEventListener('click', () => {
+        currentFilter = btn.dataset.filter;
+        for (const b of $('r-filters').querySelectorAll('button')) {
+          const active = b.dataset.filter === currentFilter;
+          b.classList.toggle('text-[#C9D9A8]', active);
+          b.classList.toggle('text-[#5A5F54]', !active);
+        }
+        // Rebuild visibility
+        for (const row of allRows) rebuildRowEl(row);
+        updateRequestMeta();
+      });
+    }
+    $('clearLogBtn').addEventListener('click', () => {
+      for (const row of allRows) row.el.remove();
+      allRows.length = 0;
+      completed.clear();
+      $('r-empty').style.display = '';
+      updateRequestMeta();
+    });
+    // ───────────────────────── Details modal
+    function openDetails(reqId) {
+      const pair = completed.get(reqId) || { startEv: inflight.get(reqId), endEv: null };
+      if (!pair.startEv) return;
+      $('detailsBody').textContent = JSON.stringify({
+        start: pair.startEv,
+        end: pair.endEv || '(still running — end event not received yet)',
+      }, null, 2);
+      $('detailsModal').classList.remove('hidden');
+    }
+    $('detailsCloseBtn').addEventListener('click', () => $('detailsModal').classList.add('hidden'));
+    $('detailsModal').addEventListener('click', (e) => {
+      if (e.target.id === 'detailsModal') $('detailsModal').classList.add('hidden');
+    });
+    // ───────────────────────── Auth
+    async function loadAuth({ verify = false } = {}) {
+      try {
+        const r = await fetch('/auth/status' + (verify ? '' : '?quick=1'));
+        const j = await r.json();
+        // Badge
+        const badgeText = j.loggedIn ? 'logged in' : 'not logged in';
+        const color = j.loggedIn ? '#B7E56D' : '#E89B2E';
+        $('a-badge').style.background = j.loggedIn ? '#B7E56D1A' : '#E89B2E1A';
+        $('a-badge').style.borderColor = color;
+        $('a-badge').firstElementChild.style.color = color;
+        $('a-badge').firstElementChild.textContent = badgeText;
+        $('a-email').textContent  = j.email || '—';
+        $('a-plan').textContent   = (j.subscriptionType || j.plan || '—').toUpperCase();
+        $('a-method').textContent = j.authMethod ? `via ${j.authMethod.replace('_', ' ').replace('oauth token', 'claude.ai')}` : '—';
+        $('a-probe').textContent  = j.probeMs != null ? `${j.probeMs}ms · ${j.verified ? 'ok' : 'failed'}` : (verify ? 'failed' : 'not probed ← try force refresh');
+      } catch {
+        $('a-badge').firstElementChild.textContent = 'offline';
+      }
+    }
+    $('authRefreshBtn').addEventListener('click', async () => {
+      const btn = $('authRefreshBtn');
+      btn.disabled = true;
+      const label = btn.querySelector('span:last-child');
+      const orig = label.textContent;
+      label.textContent = 'probing…';
+      try { await fetch('/auth/refresh', { method: 'POST' }); await loadAuth(); }
+      finally { btn.disabled = false; label.textContent = orig; }
+    });
+    // ───────────────────────── Sessions
+    async function loadSessions() {
+      try {
+        const r = await fetch('/dashboard/sessions');
+        const j = await r.json();
+        $('sess-count').textContent = j.sessions.length;
+        const host = $('sess-rows');
+        if (!j.sessions.length) {
+          host.innerHTML = '<div class="py-6 text-center text-[#5A5F54] text-xs">no active sessions</div>';
+          return;
+        }
+        host.innerHTML = '';
+        for (const s of j.sessions) {
+          const row = document.createElement('div');
+          row.className = 'flex items-center py-3 px-6 gap-4 border-b border-[#1A1A15]';
+          row.innerHTML = `
+            <div class="grow min-w-0 text-[#F3EFE4] text-xs leading-4 truncate" title="${s.key}">${s.key}</div>
+            <div class="w-[160px] shrink-0 text-[#8A9A6A] text-xs leading-4 truncate">${s.model || '—'}</div>
+            <div class="w-[60px] text-right shrink-0 text-[#8A9A6A] text-xs">${s.messageCount}</div>
+            <div class="w-[80px] text-right shrink-0 text-[#5A5F54] text-[11px]">${fmt.uptime(s.idleSec)}</div>
+            <div class="w-[80px] text-right shrink-0 text-[#5A5F54] text-[11px]">${fmt.uptime(s.ttlRemainingSec)} left</div>
+            <button class="text-[#E89B2E] text-[11px] hover:brightness-110 shrink-0" data-key="${s.key}">expire</button>
+          `;
+          row.querySelector('button').addEventListener('click', async () => {
+            await fetch('/sessions/' + encodeURIComponent(s.key), { method: 'DELETE' });
+            loadSessions();
+          });
+          host.appendChild(row);
+        }
+      } catch {}
+    }
+    $('sessionsRefreshBtn').addEventListener('click', loadSessions);
+    $('sessionsClearBtn').addEventListener('click', async () => {
+      if (!confirm('Expire all sessions?')) return;
+      await fetch('/sessions', { method: 'DELETE' });
+      loadSessions();
+    });
+    // ───────────────────────── Logs
+    let logsAutoTimer = null;
+    async function loadLogs() {
+      try {
+        const r = await fetch('/dashboard/logs?lines=200');
+        const j = await r.json();
+        const pane = $('logs-body');
+        const wasAtBottom = pane.scrollTop + pane.clientHeight >= pane.scrollHeight - 10;
+        pane.textContent = (j.lines || []).join('\n');
+        if (wasAtBottom) pane.scrollTop = pane.scrollHeight;
+        $('logs-meta').textContent = j.sizeBytes != null
+          ? `· ${(j.sizeBytes / 1024).toFixed(1)} KB · ${j.totalLines} lines`
+          : (j.note || '');
+      } catch (e) {
+        $('logs-body').textContent = '(logs unreadable: ' + e.message + ')';
+      }
+    }
+    function armLogAutoRefresh() {
+      if (logsAutoTimer) clearInterval(logsAutoTimer);
+      if ($('logsAutoRefresh').checked) logsAutoTimer = setInterval(loadLogs, 2500);
+    }
+    $('logsRefreshBtn').addEventListener('click', loadLogs);
+    $('logsAutoRefresh').addEventListener('change', armLogAutoRefresh);
+    // ───────────────────────── Health pill
+    function setHealth(ok) {
+      const dots = $('healthPill').querySelectorAll('.pulse-dot');
+      const color = ok ? '#B7E56D' : '#E89B2E';
+      for (const d of dots) { d.classList.remove('bg-[#5A5F54]', 'bg-[#B7E56D]', 'bg-[#E89B2E]'); d.style.background = color; }
+      $('healthText').textContent = ok ? 'healthy' : 'disconnected';
+      $('healthText').style.color = color;
+      $('healthStream').textContent = ok ? '· live' : '· offline';
+    }
+    // ───────────────────────── Snapshot + stream
+    async function loadSnapshot() {
+      try {
+        const r = await fetch('/dashboard/recent?limit=100');
+        const j = await r.json();
+        renderServerCard({ port: j.port, defaultModel: j.defaultModel, activeSessions: j.activeSessions, build: j.build });
+        renderStats(j.stats);
+        // Replay request events in chronological order
+        const starts = new Map();
+        const chronological = [...j.recent].reverse();
+        for (const ev of chronological) {
+          if (ev.type === 'request.start') { starts.set(ev.id, ev); upsertRequestRow(ev, null); }
+          else if (ev.type === 'request.end' && starts.has(ev.id)) {
+            upsertRequestRow(starts.get(ev.id), ev);
+          }
+        }
+      } catch (e) { console.warn('snapshot failed', e); }
+    }
+    function connectStream() {
+      const es = new EventSource('/events');
+      es.onopen  = () => setHealth(true);
+      es.onerror = () => setHealth(false);
+      es.onmessage = (m) => {
+        let ev; try { ev = JSON.parse(m.data); } catch { return; }
+        if (ev.type === 'request.start') {
+          inflight.set(ev.id, ev);
+          upsertRequestRow(ev, null);
+          if (stats) { stats.totalRequests++; renderStats(stats); }
+        } else if (ev.type === 'request.end') {
+          const startEv = inflight.get(ev.id) || allRows.find(r => r.id === ev.id)?.startEv;
+          inflight.delete(ev.id);
+          if (startEv) upsertRequestRow(startEv, ev);
+          // Re-fetch stats to pick up new p50/p95 and traffic bucket
+          fetch('/dashboard/recent?limit=1').then(r => r.json()).then(j => renderStats(j.stats)).catch(() => {});
+        } else if (ev.type === 'auth.refresh') {
+          loadAuth({ verify: false });
+        } else if (ev.type === 'session.created' || ev.type === 'session.updated' || ev.type === 'session.expired') {
+          loadSessions();
+        } else if (ev.type === 'server.boot') {
+          loadSnapshot();
+          loadAuth({ verify: false });
+          loadSessions();
+          loadLogs();
+        }
+      };
+    }
+    // Uptime ticker
+    setInterval(() => {
+      if (stats) {
+        stats.uptimeSec++;
+        $('k-uptime').textContent = fmt.uptime(stats.uptimeSec);
+        $('k-uptimeUnit').textContent = stats.uptimeSec >= 3600 ? 'h:mm:ss' : 'm:ss';
+      }
+    }, 1000);
+    // Kick off
+    loadSnapshot();
+    loadAuth({ verify: false });
+    loadSessions();
+    loadLogs();
+    armLogAutoRefresh();
+    connectStream();
+  </script>
+</body>
+</html>