@openhoo/hoopilot 1.2.0 → 2.0.0

package/dist/cli.js

@@ -2,18 +2,27 @@
 import {
   asRecord,
   envValue,
+  errorMessage,
+  firstNumber,
+  isLoopbackHostname,
   isTrustedTokenBaseUrl,
   main,
+  modelIdsFromResponse,
+  parseJsonObject,
+  parseStreamingProxyMode,
+  randomId,
+  removeUndefined,
+  safeJsonParse,
   trimTrailingSlash,
   truncatedResponseText
-} from "./chunk-JU6F5L34.js";
+} from "./chunk-6ALEIJJM.js";
 
 // src/cli.ts
 import { spawn } from "child_process";
 import { readFileSync as readFileSync2 } from "fs";
 
 // src/auth-store.ts
-import { chmodSync, mkdirSync, readFileSync, renameSync, writeFileSync } from "fs";
+import { chmodSync, mkdirSync, readFileSync, renameSync, rmSync, writeFileSync } from "fs";
 import { dirname, join } from "path";
 var StoredCopilotAuthError = class extends Error {
   constructor(message) {
@@ -64,7 +73,7 @@ function readStoredCopilotAuth(path = authStorePath()) {
   if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
     throw new StoredCopilotAuthError(`Hoopilot auth file at ${path} must contain a JSON object.`);
   }
-  const record = parsed;
+  const record = asRecord(parsed);
   const token = typeof record.token === "string" ? record.token.trim() : "";
   if (!token) {
     throw new StoredCopilotAuthError(`Hoopilot auth file at ${path} does not contain a token.`);
@@ -90,7 +99,15 @@ function writeStoredCopilotAuth(auth, path = authStorePath()) {
 `;
   const tmpPath = `${path}.${process.pid}.tmp`;
   writeFileSync(tmpPath, data, { mode: 384 });
-  renameSync(tmpPath, path);
+  try {
+    renameSync(tmpPath, path);
+  } catch (error) {
+    try {
+      rmSync(tmpPath, { force: true });
+    } catch {
+    }
+    throw error;
+  }
   try {
     chmodSync(path, 384);
   } catch {
@@ -135,23 +152,20 @@ var CopilotAuth = class {
       throw error;
     }
     if (stored) {
-      return this.#cacheAccess({
+      this.#cachedAccess = {
         apiBaseUrl: trimTrailingSlash(
           this.#hasCopilotApiBaseUrlOverride ? this.#copilotApiBaseUrl : stored.apiBaseUrl ?? this.#copilotApiBaseUrl
         ),
         expiresAtMs: Date.now() + STORED_TOKEN_TTL_MS,
         source: "github-copilot-oauth",
         token: stored.token
-      });
+      };
+      return this.#cachedAccess;
     }
     throw new CopilotAuthError(
       "No GitHub Copilot OAuth credential found. Run `hoopilot login` to sign in through your browser."
     );
   }
-  #cacheAccess(access) {
-    this.#cachedAccess = access;
-    return access;
-  }
 };
 
 // src/copilot.ts
@@ -159,23 +173,26 @@ var DEFAULT_GITHUB_API_BASE_URL = "https://api.github.com";
 var ALLOWED_COPILOT_API_HOSTS = ["api.githubcopilot.com"];
 var ALLOWED_GITHUB_API_HOSTS = ["api.github.com"];
 var COPILOT_USAGE_API_VERSION = "2025-04-01";
+var EDITOR_PLUGIN_VERSION = "hoopilot/0.1.0";
+var EDITOR_VERSION = "Hoopilot/0.1.0";
+var HOOPILOT_USER_AGENT = "hoopilot/0.1.0";
 function applyCopilotHeaders(headers, token) {
   headers.set("accept", headers.get("accept") ?? "application/json");
   headers.set("authorization", `Bearer ${token}`);
   headers.set("copilot-integration-id", "vscode-chat");
-  headers.set("editor-plugin-version", "hoopilot/0.1.0");
-  headers.set("editor-version", "Hoopilot/0.1.0");
+  headers.set("editor-plugin-version", EDITOR_PLUGIN_VERSION);
+  headers.set("editor-version", EDITOR_VERSION);
   headers.set("openai-intent", "conversation-panel");
-  headers.set("user-agent", "hoopilot/0.1.0");
+  headers.set("user-agent", HOOPILOT_USER_AGENT);
   headers.set("x-github-api-version", "2026-06-01");
   return headers;
 }
 function applyGithubApiHeaders(headers, token) {
   headers.set("accept", headers.get("accept") ?? "application/json");
   headers.set("authorization", `token ${token}`);
-  headers.set("editor-plugin-version", "hoopilot/0.1.0");
-  headers.set("editor-version", "Hoopilot/0.1.0");
-  headers.set("user-agent", "hoopilot/0.1.0");
+  headers.set("editor-plugin-version", EDITOR_PLUGIN_VERSION);
+  headers.set("editor-version", EDITOR_VERSION);
+  headers.set("user-agent", HOOPILOT_USER_AGENT);
   headers.set("x-github-api-version", COPILOT_USAGE_API_VERSION);
   return headers;
 }
@@ -188,7 +205,7 @@ function parseRateLimitHeaders(headers, nowMs = Date.now()) {
   if (limit === void 0 && remaining === void 0 && used === void 0 && resetEpochSeconds === void 0 && retryAfterSeconds === void 0) {
     return void 0;
   }
-  return removeUndefinedRateLimit({
+  return removeUndefined({
     limit,
     observedAtMs: nowMs,
     remaining,
@@ -206,11 +223,6 @@ function headerInt(headers, name) {
   const value = Number.parseInt(raw.trim(), 10);
   return Number.isFinite(value) && value >= 0 ? value : void 0;
 }
-function removeUndefinedRateLimit(rateLimit) {
-  return Object.fromEntries(
-    Object.entries(rateLimit).filter(([, value]) => value !== void 0)
-  );
-}
 var CopilotClient = class {
   #auth;
   #allowUnsafeUpstream;
@@ -307,7 +319,7 @@ function normalizeCopilotUsage(body) {
     for (const category of /* @__PURE__ */ new Set([...Object.keys(remaining), ...Object.keys(monthly)])) {
       const entitlement = numberOrUndefined(monthly[category]);
       const left = numberOrUndefined(remaining[category]);
-      quotas[category] = removeUndefinedQuota({
+      quotas[category] = removeUndefined({
         entitlement,
         percentRemaining: entitlement !== void 0 && entitlement > 0 && left !== void 0 ? left / entitlement * 100 : void 0,
         remaining: left,
@@ -315,7 +327,7 @@ function normalizeCopilotUsage(body) {
       });
     }
   }
-  return removeUndefinedUsage({
+  return removeUndefined({
     accessTypeSku: stringOrUndefined(record.access_type_sku),
     chatEnabled: typeof record.chat_enabled === "boolean" ? record.chat_enabled : void 0,
     plan: stringOrUndefined(record.copilot_plan),
@@ -327,7 +339,7 @@ function normalizeQuotaDetail(detail) {
   const entitlement = numberOrUndefined(detail.entitlement);
   const overageCount = numberOrUndefined(detail.overage_count);
   const remaining = numberOrUndefined(detail.remaining) ?? numberOrUndefined(detail.quota_remaining);
-  return removeUndefinedQuota({
+  return removeUndefined({
     entitlement,
     hasQuota: typeof detail.has_quota === "boolean" ? detail.has_quota : void 0,
     overageCount,
@@ -351,21 +363,10 @@ function usedFrom(entitlement, remaining, overageCount) {
   const overage = remaining === 0 ? overageCount ?? 0 : 0;
   return Math.max(0, base + overage);
 }
-function numberOrUndefined(value) {
-  return typeof value === "number" && Number.isFinite(value) ? value : void 0;
-}
+var numberOrUndefined = firstNumber;
 function stringOrUndefined(value) {
   return typeof value === "string" && value.length > 0 ? value : void 0;
 }
-function removeUndefinedQuota(quota) {
-  return Object.fromEntries(
-    Object.entries(quota).filter(([, value]) => value !== void 0)
-  );
-}
-function removeUndefinedUsage(usage) {
-  const entries = Object.entries(usage).filter(([, value]) => value !== void 0);
-  return Object.fromEntries(entries);
-}
 
 // src/github-device.ts
 import { setTimeout as sleep } from "timers/promises";
@@ -497,11 +498,16 @@ function positiveSeconds(value, fallback) {
 }
 async function parseJsonResponse(response, context) {
   const text = await response.text();
+  let value;
   try {
-    return JSON.parse(text);
+    value = JSON.parse(text);
   } catch {
     throw new Error(`${context}: ${text.slice(0, 500)}`);
   }
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    throw new Error(`${context}: ${text.slice(0, 500)}`);
+  }
+  return value;
 }
 
 // src/logger.ts
@@ -565,21 +571,29 @@ function createHoopilotLogger(options = {}) {
     timestamp: pino.stdTimeFunctions.isoTime
   };
   if (format === "pretty") {
-    return pino(
-      pinoOptions,
-      pretty({
-        colorize: options.colorize ?? process.stderr.isTTY,
-        destination: options.stream ?? 1,
-        ignore: "pid,hostname",
-        singleLine: true,
-        translateTime: "SYS:standard"
-      })
+    return asHoopilotLogger(
+      pino(
+        pinoOptions,
+        pretty({
+          // Probe the same sink we write to (stdout / fd 1), so colors are not
+          // emitted into a redirected file when only stderr is a TTY. A custom
+          // stream's TTY-ness is unknown, so default to no color there.
+          colorize: options.colorize ?? (options.stream ? false : process.stdout.isTTY),
+          destination: options.stream ?? 1,
+          ignore: "pid,hostname",
+          singleLine: true,
+          translateTime: "SYS:standard"
+        })
+      )
     );
   }
   if (options.stream) {
-    return pino(pinoOptions, options.stream);
+    return asHoopilotLogger(pino(pinoOptions, options.stream));
   }
-  return pino(pinoOptions);
+  return asHoopilotLogger(pino(pinoOptions));
+}
+function asHoopilotLogger(logger) {
+  return logger;
 }
 function parseLogFormat(value) {
   if (!value) {
@@ -621,6 +635,10 @@ function isLogLevel(value) {
   return LOG_LEVELS.includes(value);
 }
 
+// src/server.ts
+import { createHash, timingSafeEqual } from "crypto";
+import { Elysia } from "elysia";
+
 // src/openai.ts
 var DEFAULT_MODEL = "gpt-4.1";
 var OpenAICompatibilityError = class extends Error {
@@ -693,13 +711,6 @@ function compactionOutputFromResponsesSse(text) {
   }
   return deltas ? [messageOutputItem(deltas)] : [];
 }
-function safeJsonParse(text) {
-  try {
-    return JSON.parse(text);
-  } catch {
-    return void 0;
-  }
-}
 function chatCompletionToCompletion(completion) {
   return removeUndefined({
     choices: completionChoices(completion).map((choice, index) => {
@@ -895,21 +906,18 @@ function extractTokenUsage(usage) {
     asRecord(record.prompt_tokens_details).cached_tokens,
     asRecord(record.input_tokens_details).cached_tokens
   );
-  return removeUndefined({
-    cachedTokens: cached,
+  const result = {
     completionTokens,
     promptTokens,
-    reasoningTokens: reasoning,
     totalTokens: total ?? promptTokens + completionTokens
-  });
-}
-function firstNumber(...values) {
-  for (const value of values) {
-    if (typeof value === "number" && Number.isFinite(value)) {
-      return value;
-    }
+  };
+  if (cached !== void 0) {
+    result.cachedTokens = cached;
   }
-  return void 0;
+  if (reasoning !== void 0) {
+    result.reasoningTokens = reasoning;
+  }
+  return result;
 }
 function completionChoices(completion) {
   const choices = Array.isArray(completion.choices) ? completion.choices : [];
@@ -935,7 +943,7 @@ function processCompletionSseBlock(block, enqueue, markTerminal) {
     enqueue("[DONE]");
     return;
   }
-  const parsed = parseJson(data);
+  const parsed = parseJsonObject(data);
   if (!parsed) {
     return;
   }
@@ -999,19 +1007,6 @@ function encodeDataSse(data) {
 
 `;
 }
-function parseJson(data) {
-  try {
-    return asRecord(JSON.parse(data));
-  } catch {
-    return void 0;
-  }
-}
-function removeUndefined(record) {
-  return Object.fromEntries(Object.entries(record).filter(([, value]) => value !== void 0));
-}
-function randomId() {
-  return crypto.randomUUID().replaceAll("-", "");
-}
 function epochSeconds() {
   return Math.floor(Date.now() / 1e3);
 }
@@ -1024,13 +1019,13 @@ var AnthropicCompatibilityError = class extends Error {
   }
 };
 function anthropicMessagesToResponsesRequest(request) {
-  return removeUndefined2({
+  return removeUndefined({
     input: anthropicMessagesToResponsesInput(request.messages),
     instructions: anthropicSystemToInstructions(request.system),
     max_output_tokens: typeof request.max_tokens === "number" && Number.isFinite(request.max_tokens) ? request.max_tokens : void 0,
     metadata: request.metadata,
     model: normalizeRequestedModel(request.model),
-    parallel_tool_calls: true,
+    parallel_tool_calls: asRecord(request.tool_choice).disable_parallel_tool_use !== true,
     reasoning: anthropicThinkingToReasoning(request.thinking),
     stop: anthropicStopSequences(request.stop_sequences),
     stream: request.stream === true,
@@ -1045,7 +1040,7 @@ function responsesResponseToAnthropicMessage(response, fallbackModel) {
   const usage = anthropicUsage(response.usage);
   return {
     content,
-    id: textValue(response.id) || `msg_${randomId2()}`,
+    id: textValue(response.id) || `msg_${randomId()}`,
     model: textValue(response.model) || fallbackModel,
     role: "assistant",
     stop_reason: anthropicStopReason(response, content),
@@ -1122,7 +1117,7 @@ function createAnthropicStreamState(options) {
   return {
     blocks: /* @__PURE__ */ new Map(),
     completed: false,
-    messageId: options.messageId ?? `msg_${randomId2()}`,
+    messageId: options.messageId ?? `msg_${randomId()}`,
     model: options.model,
     nextBlockIndex: 0,
     sawToolUse: false,
@@ -1176,7 +1171,7 @@ function anthropicMessagesToResponsesInput(messages) {
         flushMessage();
         input.push({
           arguments: JSON.stringify(asRecord(part.input)),
-          call_id: textValue(part.id) || `call_${randomId2()}`,
+          call_id: textValue(part.id) || `call_${randomId()}`,
           name: textValue(part.name),
           type: "function_call"
         });
@@ -1287,7 +1282,7 @@ function anthropicTools(tools) {
   }
   const converted = tools.map((tool) => {
     const record = asRecord(tool);
-    return removeUndefined2({
+    return removeUndefined({
       description: record.description,
       name: record.name,
       parameters: record.input_schema,
@@ -1358,7 +1353,7 @@ function anthropicContentFromResponsesOutput(response) {
     }
     if (type === "function_call") {
       content.push({
-        id: textValue(record.call_id) || textValue(record.id) || `call_${randomId2()}`,
+        id: textValue(record.call_id) || textValue(record.id) || `call_${randomId()}`,
         input: parseToolInput(textValue(record.arguments)),
         name: textValue(record.name),
         type: "tool_use"
@@ -1385,12 +1380,12 @@ function anthropicStopReason(response, content) {
 }
 function anthropicUsage(usage) {
   const record = asRecord(usage);
-  const inputTokens = firstNumber2(record.input_tokens, record.prompt_tokens) ?? 0;
-  const outputTokens = firstNumber2(record.output_tokens, record.completion_tokens) ?? 0;
+  const inputTokens = firstNumber(record.input_tokens, record.prompt_tokens) ?? 0;
+  const outputTokens = firstNumber(record.output_tokens, record.completion_tokens) ?? 0;
   const details = asRecord(record.input_tokens_details);
-  return removeUndefined2({
-    cache_creation_input_tokens: firstNumber2(record.cache_creation_input_tokens),
-    cache_read_input_tokens: firstNumber2(record.cache_read_input_tokens, details.cached_tokens) ?? void 0,
+  return removeUndefined({
+    cache_creation_input_tokens: firstNumber(record.cache_creation_input_tokens),
+    cache_read_input_tokens: firstNumber(record.cache_read_input_tokens, details.cached_tokens) ?? void 0,
     input_tokens: inputTokens,
     output_tokens: outputTokens
   });
@@ -1572,7 +1567,7 @@ function ensureToolBlock(state, payload, item, enqueue) {
     state.blocks.set(key, block);
     enqueue("content_block_start", {
       content_block: {
-        id: textValue(item.call_id) || textValue(item.id) || `call_${randomId2()}`,
+        id: textValue(item.call_id) || textValue(item.id) || `call_${randomId()}`,
         input: {},
         name: textValue(item.name),
         type: "tool_use"
@@ -1606,13 +1601,6 @@ function parseSseBlock(block) {
   }
   return { data: data.join("\n"), event };
 }
-function parseJsonObject(text) {
-  try {
-    return asRecord(JSON.parse(text));
-  } catch {
-    return void 0;
-  }
-}
 function parseToolInput(argumentsText) {
   const parsed = parseJsonObject(argumentsText);
   return parsed ?? {};
@@ -1644,29 +1632,824 @@ function textValue(value) {
   }
   return "";
 }
-function firstNumber2(...values) {
-  for (const value of values) {
-    if (typeof value === "number" && Number.isFinite(value)) {
-      return value;
-    }
-  }
-  return void 0;
-}
 function indexValue(value) {
   return typeof value === "number" && Number.isFinite(value) ? value : 0;
 }
-function removeUndefined2(record) {
-  return Object.fromEntries(Object.entries(record).filter(([, value]) => value !== void 0));
-}
 function encodeSse(event, data) {
   return `event: ${event}
 data: ${JSON.stringify(data)}
 
 `;
 }
-function randomId2() {
-  return crypto.randomUUID().replaceAll("-", "");
-}
+
+// src/dashboard.ts
+var DASHBOARD_HTML = `<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<meta name="color-scheme" content="dark light" />
+<title>hoopilot &middot; dashboard</title>
+<style>
+:root {
+  --bg-0:#0b0e14; --bg-1:#11151c; --bg-2:#171c25; --bg-3:#1f2630;
+  --border:#262d38; --border-strong:#37404d;
+  --text-0:#e6edf3; --text-1:#9aa7b4; --text-2:#5e6b78; --text-dim:#3a434e; --text-inv:#0b0e14;
+  --accent:#4ea1ff; --accent-2:#56d4dd; --accent-soft:rgba(78,161,255,.14);
+  --amber:#f5b042;
+  --ok:#3fb950; --warn:#d8a13a; --danger:#f0556a; --info:#a371f7; --cache:#7c8cff;
+  --spark:#4ea1ff; --spark-fill:color-mix(in srgb, var(--accent) 14%, transparent);
+  --grid-line:rgba(255,255,255,.05);
+  --flash:color-mix(in srgb, var(--accent) 22%, transparent);
+  --flash-up:color-mix(in srgb, var(--ok) 22%, transparent);
+  --flash-down:color-mix(in srgb, var(--danger) 22%, transparent);
+  --c1:#4ea1ff; --c2:#3fb950; --c3:#d8a13a; --c4:#a371f7; --c5:#56d4dd; --c6:#f0556a;
+  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif;
+}
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme="dark"]) {
+    --bg-0:#f6f8fa; --bg-1:#ffffff; --bg-2:#f0f3f6; --bg-3:#e9edf1;
+    --border:#d0d7de; --border-strong:#b6bec8;
+    --text-0:#1f2328; --text-1:#5a6570; --text-2:#8a96a3; --text-dim:#bcc2c9; --text-inv:#ffffff;
+    --accent:#0969da; --accent-2:#0a7ea4; --accent-soft:rgba(9,105,218,.12);
+    --amber:#b5730a;
+    --ok:#1a7f37; --warn:#9a6700; --danger:#cf222e; --info:#8250df; --cache:#5563e0;
+    --spark:#0969da; --spark-fill:color-mix(in srgb, var(--accent) 12%, transparent);
+    --grid-line:rgba(0,0,0,.06);
+    --flash:color-mix(in srgb, var(--accent) 16%, transparent);
+    --flash-up:color-mix(in srgb, var(--ok) 16%, transparent);
+    --flash-down:color-mix(in srgb, var(--danger) 16%, transparent);
+    --c1:#0969da; --c2:#1a7f37; --c3:#9a6700; --c4:#8250df; --c5:#0a7ea4; --c6:#cf222e;
+  }
+}
+[data-theme="light"] {
+  --bg-0:#f6f8fa; --bg-1:#ffffff; --bg-2:#f0f3f6; --bg-3:#e9edf1;
+  --border:#d0d7de; --border-strong:#b6bec8;
+  --text-0:#1f2328; --text-1:#5a6570; --text-2:#8a96a3; --text-dim:#bcc2c9; --text-inv:#ffffff;
+  --accent:#0969da; --accent-2:#0a7ea4; --accent-soft:rgba(9,105,218,.12);
+  --amber:#b5730a;
+  --ok:#1a7f37; --warn:#9a6700; --danger:#cf222e; --info:#8250df; --cache:#5563e0;
+  --spark:#0969da; --spark-fill:color-mix(in srgb, var(--accent) 12%, transparent);
+  --grid-line:rgba(0,0,0,.06);
+  --flash:color-mix(in srgb, var(--accent) 16%, transparent);
+  --flash-up:color-mix(in srgb, var(--ok) 16%, transparent);
+  --flash-down:color-mix(in srgb, var(--danger) 16%, transparent);
+  --c1:#0969da; --c2:#1a7f37; --c3:#9a6700; --c4:#8250df; --c5:#0a7ea4; --c6:#cf222e;
+}
+* { box-sizing: border-box; }
+html, body { margin:0; padding:0; }
+body {
+  background: var(--bg-0); color: var(--text-0); font-family: var(--sans);
+  font-size: 13px; line-height: 1.4; -webkit-font-smoothing: antialiased;
+}
+.mono { font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero; }
+.num { font-family: var(--mono); font-variant-numeric: tabular-nums slashed-zero; }
+.shell { max-width: 1280px; margin: 0 auto; padding: 0 24px 28px; }
+@media (min-width: 1080px) { .shell { border-left:1px solid var(--border); border-right:1px solid var(--border); } }
+@media (max-width: 680px) { .shell { padding: 0 12px 24px; } }
+
+/* header */
+header.bar {
+  position: sticky; top: 0; z-index: 20; background: var(--bg-1);
+  border-bottom: 1px solid var(--border); height: 48px;
+}
+.bar-in { max-width:1280px; margin:0 auto; height:48px; padding:0 24px; display:flex; align-items:center; gap:12px; }
+@media (max-width:680px){ .bar-in{ padding:0 12px; gap:8px; } }
+.wordmark { font-family: var(--mono); font-weight:700; font-size:14px; color:var(--text-0); letter-spacing:-.01em; }
+.caret { display:inline-block; width:7px; height:15px; background:var(--amber); margin-left:3px; vertical-align:-2px; animation: blink 1.1s steps(1) infinite; }
+.chip { font-family: var(--mono); font-size:11px; padding:2px 7px; border-radius:10px; background:var(--bg-3); color:var(--text-1); white-space:nowrap; }
+.chip.plan-pro { background:var(--accent-soft); color:var(--accent); }
+.chip.plan-business { background:color-mix(in srgb, var(--info) 16%, transparent); color:var(--info); }
+.chip.plan-free, .chip.plan-offline { background:var(--bg-3); color:var(--text-2); }
+.spacer { flex:1; }
+.pill { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-family:var(--mono); padding:3px 9px; border-radius:11px; background:var(--bg-3); color:var(--text-1); }
+.dot { width:7px; height:7px; border-radius:50%; background:var(--text-2); flex:none; }
+.pill.live .dot { background:var(--ok); }
+.pill.paused .dot { background:var(--text-2); }
+.pill.reconnect { color:var(--warn); } .pill.reconnect .dot { background:var(--warn); }
+.pill.authkey { color:var(--warn); } .pill.authkey .dot { background:var(--warn); }
+.heartbeat { animation: hb .5s ease-out; }
+.updated { font-family:var(--mono); font-size:11px; color:var(--text-2); white-space:nowrap; }
+.updated.warn { color:var(--warn); } .updated.danger { color:var(--danger); }
+.seg { display:inline-flex; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
+.seg button { background:transparent; color:var(--text-1); border:0; font-family:var(--mono); font-size:11px; padding:3px 8px; cursor:pointer; }
+.seg button + button { border-left:1px solid var(--border); }
+.seg button.active { background:var(--accent); color:var(--text-inv); }
+.iconbtn { background:transparent; border:1px solid var(--border); border-radius:6px; color:var(--text-1); cursor:pointer; font-size:13px; line-height:1; padding:4px 7px; min-width:30px; }
+.iconbtn:hover { background:var(--bg-3); }
+button:focus-visible, input:focus-visible, .seg button:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
+#scanbar { position:absolute; left:0; bottom:-1px; height:1px; width:100%; overflow:hidden; }
+#scanbar::after { content:""; position:absolute; left:0; top:0; height:1px; width:40%;
+  background:linear-gradient(90deg, transparent, var(--accent), transparent);
+  animation: scan var(--scan-ms, 4000ms) linear infinite; }
+header.bar.paused #scanbar::after, header.bar.frozen #scanbar::after { animation-play-state:paused; opacity:.35; }
+
+/* disconnect banner */
+#banner { display:none; margin-top:10px; padding:7px 12px; border-radius:5px; font-family:var(--mono); font-size:12px;
+  background:color-mix(in srgb, var(--danger) 16%, transparent); color:var(--danger); border:1px solid color-mix(in srgb, var(--danger) 40%, transparent); }
+#banner.ok { background:color-mix(in srgb, var(--ok) 16%, transparent); color:var(--ok); border-color:color-mix(in srgb, var(--ok) 40%, transparent); }
+#banner.show { display:block; }
+
+/* hero strip */
+.hero { display:grid; grid-template-columns:repeat(4,1fr); margin:18px 0 16px; }
+.vital { padding:6px 18px; }
+.vital + .vital { border-left:1px solid var(--border); }
+.vital .eyebrow { font-size:10px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-1); }
+.vital .vnum { font-family:var(--mono); font-variant-numeric:tabular-nums slashed-zero; font-weight:600; font-size:clamp(2rem,5vw,3.25rem); line-height:1.02; letter-spacing:-.02em; color:var(--text-0); }
+.vital .vsub { font-size:11px; color:var(--text-2); min-height:14px; }
+.vital .vspark { display:block; width:100%; height:24px; margin-top:4px; }
+.vital.active { }
+.vital.active .eyebrow { color:var(--accent); }
+@media (max-width:1079px){ .hero{ grid-template-columns:repeat(2,1fr); } .vital:nth-child(3){ border-left:0; } .vital:nth-child(n+3){ border-top:1px solid var(--border); padding-top:12px; } }
+@media (max-width:600px){ .hero{ grid-template-columns:1fr; } .vital + .vital{ border-left:0; border-top:1px solid var(--border); } }
+
+/* grid + panels */
+.grid { display:grid; grid-template-columns:repeat(12,1fr); gap:12px; }
+.panel { position:relative; background:var(--bg-1); border:1px solid var(--border); border-radius:4px; padding:16px 12px 12px; min-width:0; }
+.panel > .ptitle { position:absolute; top:-8px; left:10px; padding:0 6px; background:var(--bg-1);
+  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-1); }
+.span5{ grid-column:span 5; } .span3{ grid-column:span 3; } .span4{ grid-column:span 4; }
+.span7{ grid-column:span 7; } .span8{ grid-column:span 8; }
+@media (max-width:1079px){ .grid{ grid-template-columns:repeat(6,1fr); }
+  .span5,.span7,.span8{ grid-column:span 6; } .span3{ grid-column:span 3; } .span4{ grid-column:span 6; } }
+@media (max-width:680px){ .grid{ grid-template-columns:1fr; }
+  .span3,.span4,.span5,.span7,.span8{ grid-column:span 1; } }
+
+.headline { font-family:var(--mono); font-variant-numeric:tabular-nums slashed-zero; font-weight:600; font-size:22px; line-height:1.1; }
+.cap { font-size:11px; color:var(--text-2); }
+.stack-bar { display:flex; height:8px; border-radius:4px; overflow:hidden; background:var(--bg-3); margin:8px 0; }
+.stack-bar i { display:block; height:100%; }
+.stack-bar.empty { outline:1px dashed var(--border); background:transparent; }
+
+table.tbl { width:100%; border-collapse:collapse; font-family:var(--mono); font-variant-numeric:tabular-nums slashed-zero; font-size:12px; }
+.scrollx { overflow-x:auto; }
+table.tbl th { font-size:10px; font-weight:600; text-transform:uppercase; color:var(--text-2); text-align:right; padding:4px 6px; border-bottom:1px solid var(--border); white-space:nowrap; }
+table.tbl th.l { text-align:left; }
+table.tbl td { padding:3px 6px; text-align:right; white-space:nowrap; border-bottom:1px solid color-mix(in srgb, var(--border) 55%, transparent); }
+table.tbl td.l { text-align:left; max-width:160px; overflow:hidden; text-overflow:ellipsis; }
+table.tbl tr:hover td { background:var(--bg-2); }
+table.tbl tr.total td { border-top:1px solid var(--border-strong); border-bottom:0; font-weight:600; color:var(--text-0); }
+.minibar { display:inline-block; height:6px; border-radius:3px; background:var(--accent); vertical-align:middle; min-width:1px; }
+.ghost td { color:var(--text-2); text-align:center; }
+.reasoning { color:var(--info); } .cached { color:var(--cache); }
+
+.legend { display:flex; flex-wrap:wrap; gap:4px 14px; margin-top:8px; }
+.legend .li { display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; color:var(--text-1); }
+.legend .sw { width:8px; height:8px; border-radius:2px; flex:none; }
+
+.lat-trio { display:flex; gap:18px; align-items:baseline; }
+.lat-trio .b { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:20px; font-weight:600; }
+.lat-trio .b small { display:block; font-size:10px; font-weight:600; text-transform:uppercase; color:var(--text-2); letter-spacing:.05em; }
+.lat-p95 { color:var(--info); }
+.lat-track { position:relative; height:22px; margin-top:10px; }
+.lat-track .line { position:absolute; top:11px; left:0; right:0; height:1px; background:var(--border); }
+.lat-track .tick { position:absolute; top:5px; width:2px; height:12px; border-radius:1px; }
+.lat-track .tick.p50 { background:var(--accent); } .lat-track .tick.p95 { background:var(--info); }
+.lat-track .tlab { position:absolute; top:-2px; font-family:var(--mono); font-size:9px; color:var(--text-2); transform:translateX(-50%); }
+details.routes { margin-top:10px; } details.routes summary { cursor:pointer; font-size:11px; color:var(--text-2); font-family:var(--mono); }
+
+.qrow { margin:10px 0; } .qrow .qhead { display:flex; justify-content:space-between; align-items:baseline; font-size:12px; }
+.qrow .qname { color:var(--text-1); } .qrow .qval { font-family:var(--mono); font-variant-numeric:tabular-nums; color:var(--text-0); }
+.qbar { position:relative; height:8px; border-radius:4px; background:var(--bg-3); margin-top:5px; overflow:hidden; }
+.qbar i { position:absolute; left:0; top:0; height:100%; border-radius:4px; }
+.qbar.over i.ext { background:repeating-linear-gradient(45deg, var(--danger), var(--danger) 3px, transparent 3px, transparent 6px); }
+.inf { font-family:var(--mono); font-size:12px; color:var(--ok); }
+.emptybox { border:1px solid var(--border); border-radius:5px; padding:14px; text-align:center; color:var(--text-2); }
+.emptybox .keyglyph { font-size:20px; color:var(--text-1); }
+.emptybox h4 { margin:8px 0 4px; font-family:var(--sans); font-size:13px; color:var(--text-1); font-weight:600; }
+.emptybox .errline { font-family:var(--mono); font-size:11px; color:var(--text-2); word-break:break-word; margin:4px 0; }
+.prompt { font-family:var(--mono); font-size:12px; color:var(--text-1); }
+
+.upblocks { display:flex; gap:18px; }
+.upblk { } .upblk .v { font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:20px; font-weight:600; }
+.upblk .k { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-2); }
+.upblk.err.hot { color:var(--danger); }
+.rate { font-family:var(--mono); font-size:12px; } .rate.warn{ color:var(--warn);} .rate.danger{ color:var(--danger);} .rate.ok{ color:var(--ok); }
+#up-spark, #thru-svg { display:block; width:100%; }
+#up-spark { height:30px; margin-top:8px; }
+#thru-svg { height:88px; margin-top:6px; }
+.flag { font-family:var(--mono); font-size:10px; color:var(--text-2); }
+
+footer.foot { margin-top:14px; padding-top:10px; border-top:1px solid var(--border); display:flex; flex-wrap:wrap; gap:4px 14px;
+  font-family:var(--mono); font-size:11px; color:var(--text-2); }
+footer.foot .end { margin-left:auto; }
+@media (max-width:680px){ footer.foot .end{ margin-left:0; } }
+
+.skel { color:var(--text-dim); }
+.flash { animation: flash .6s ease-out; } .flash-up { animation: flashup .6s ease-out; } .flash-down { animation: flashdown .6s ease-out; }
+
+/* auth takeover */
+#auth { display:none; }
+#auth.show { display:flex; justify-content:center; padding:64px 16px; }
+.authcard { width:100%; max-width:420px; background:var(--bg-1); border:1px solid var(--border); border-radius:6px; padding:22px 18px; position:relative; }
+.authcard h3 { margin:0 0 10px; font-family:var(--mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-1); }
+.authcard p { font-size:12px; color:var(--text-2); margin:0 0 14px; }
+.authcard .row { display:flex; gap:8px; }
+.authcard input { flex:1; background:var(--bg-0); border:1px solid var(--border); border-radius:5px; color:var(--text-0); font-family:var(--mono); font-size:13px; padding:8px 10px; }
+.authcard input.bad { border-color:var(--danger); }
+.authcard button { background:var(--accent); color:var(--text-inv); border:0; border-radius:5px; font-family:var(--mono); font-size:12px; padding:0 14px; cursor:pointer; }
+.authcard .err { color:var(--danger); font-family:var(--mono); font-size:11px; min-height:14px; margin-top:8px; }
+.authcard .clear { position:absolute; top:14px; right:16px; font-size:11px; color:var(--text-2); cursor:pointer; }
+.dim { opacity:.45; filter:grayscale(.4); transition:opacity .2s, filter .2s; }
+
+@keyframes blink { 50% { opacity:0; } }
+@keyframes scan { 0%{ transform:translateX(-100%);} 100%{ transform:translateX(350%);} }
+@keyframes hb { 0%{ transform:scale(1);} 35%{ transform:scale(1.7);} 100%{ transform:scale(1);} }
+@keyframes flash { from{ background:var(--flash);} to{ background:transparent;} }
+@keyframes flashup { from{ background:var(--flash-up);} to{ background:transparent;} }
+@keyframes flashdown { from{ background:var(--flash-down);} to{ background:transparent;} }
+@media (prefers-reduced-motion: reduce) {
+  .caret { animation:none; } #scanbar::after { animation:none; opacity:.3; }
+  .heartbeat { animation:none; }
+  .flash, .flash-up, .flash-down { animation:none; box-shadow: inset 2px 0 0 var(--accent); }
+}
+</style>
+</head>
+<body>
+<header class="bar" id="bar">
+  <div class="bar-in">
+    <span class="wordmark">hoopilot<span class="caret" aria-hidden="true"></span></span>
+    <span class="chip" id="version-chip">v&middot;&middot;&middot;</span>
+    <span class="chip plan-offline" id="plan-chip">&mdash; offline</span>
+    <span class="spacer"></span>
+    <span class="pill" id="conn-pill" aria-live="polite"><span class="dot" id="conn-dot"></span><span id="conn-text">connecting</span></span>
+    <span class="updated" id="updated"></span>
+    <span class="seg" id="seg" role="group" aria-label="Refresh interval">
+      <button data-ms="2000">2s</button><button data-ms="4000" class="active">4s</button><button data-ms="10000">10s</button>
+    </span>
+    <button class="iconbtn" id="btn-pause" title="Pause / resume" aria-label="Pause or resume">&#10074;&#10074;</button>
+    <button class="iconbtn" id="btn-theme" title="Theme: auto / dark / light" aria-label="Cycle theme">A</button>
+  </div>
+  <div id="scanbar" aria-hidden="true"></div>
+</header>
+
+<div class="shell">
+  <div id="banner" role="status" aria-live="polite"></div>
+
+  <section id="content">
+    <section class="hero" aria-label="Vitals">
+      <div class="vital" id="v-req"><div class="eyebrow">Req / s</div><div class="vnum skel" id="req-num">&middot;&middot;&middot;</div><div class="vsub" id="req-sub"></div><svg class="vspark" id="req-spark" viewBox="0 0 200 24" preserveAspectRatio="none" aria-hidden="true"><path class="area" fill="var(--spark-fill)" stroke="none"/><path class="line" fill="none" stroke="var(--ok)" stroke-width="1.5" vector-effect="non-scaling-stroke"/><circle r="1.6" fill="var(--ok)" style="display:none"/></svg></div>
+      <div class="vital" id="v-tok"><div class="eyebrow">Tokens / s</div><div class="vnum skel" id="tok-num">&middot;&middot;&middot;</div><div class="vsub" id="tok-sub"></div><svg class="vspark" id="tok-spark" viewBox="0 0 200 24" preserveAspectRatio="none" aria-hidden="true"><path class="area" fill="var(--spark-fill)" stroke="none"/><path class="line" fill="none" stroke="var(--accent)" stroke-width="1.5" vector-effect="non-scaling-stroke"/><circle r="1.6" fill="var(--accent)" style="display:none"/></svg></div>
+      <div class="vital" id="v-inflight"><div class="eyebrow">In&#8209;flight</div><div class="vnum skel" id="inflight-num">&middot;&middot;&middot;</div><div class="vsub" id="inflight-sub"></div><svg class="vspark" id="inflight-spark" viewBox="0 0 200 24" preserveAspectRatio="none" aria-hidden="true"><path class="area" fill="var(--spark-fill)" stroke="none"/><path class="line" fill="none" stroke="var(--accent-2)" stroke-width="1.5" vector-effect="non-scaling-stroke"/><circle r="1.6" fill="var(--accent-2)" style="display:none"/></svg></div>
+      <div class="vital" id="v-uptime"><div class="eyebrow">Uptime</div><div class="vnum skel" id="uptime-num">&middot;&middot;&middot;</div><div class="vsub" id="uptime-sub"></div></div>
+    </section>
+
+    <section class="grid">
+      <div class="panel span5"><span class="ptitle">&#9508; Proxy &middot; requests &#9504;</span>
+        <div class="headline"><span id="req-total" class="skel">&middot;&middot;&middot;</span> <span class="cap">requests</span></div>
+        <div class="stack-bar empty" id="route-sharebar"></div>
+        <div class="stack-bar empty" id="status-healthbar"></div>
+        <div class="scrollx"><table class="tbl"><thead><tr><th class="l">Route</th><th>Count</th><th>%</th><th style="width:60px">&nbsp;</th></tr></thead><tbody id="routes-body"><tr class="ghost"><td colspan="4">loading&hellip;</td></tr></tbody></table></div>
+      </div>
+
+      <div class="panel span3"><span class="ptitle">&#9508; Status &#9504;</span>
+        <div class="headline"><span id="error-rate" class="skel">&middot;&middot;&middot;</span> <span class="cap">err rate</span></div>
+        <div class="stack-bar empty" id="status-bar"></div>
+        <div class="legend" id="status-legend"></div>
+      </div>
+
+      <div class="panel span4"><span class="ptitle">&#9508; Latency &middot; ms &#9504;</span>
+        <div class="lat-trio">
+          <div class="b"><small>p50</small><span id="lat-p50" class="skel">&middot;</span></div>
+          <div class="b lat-p95"><small>p95</small><span id="lat-p95" class="skel">&middot;</span></div>
+          <div class="b"><small>avg</small><span id="lat-avg" class="skel">&middot;</span></div>
+          <div class="b"><small>obs</small><span id="lat-count" class="skel">&middot;</span></div>
+        </div>
+        <div class="lat-track" id="lat-track"><div class="line"></div></div>
+        <details class="routes"><summary>by route</summary><div class="scrollx"><table class="tbl"><thead><tr><th class="l">Route</th><th>avg ms</th><th>count</th></tr></thead><tbody id="lat-routes"></tbody></table></div></details>
+      </div>
+
+      <div class="panel span7"><span class="ptitle">&#9508; Tokens &middot; by model &#9504;</span>
+        <div class="headline"><span id="tok-total" class="skel">&middot;&middot;&middot;</span> <span class="cap">tokens &middot; <span id="tok-cache">cache &middot;%</span></span></div>
+        <div class="stack-bar empty" id="tok-mixbar"></div>
+        <div class="legend" id="tok-legend"></div>
+        <div class="scrollx" style="margin-top:8px"><table class="tbl"><thead><tr><th class="l">Model</th><th>prompt</th><th>compl</th><th>reason</th><th>cached</th><th>total</th><th>reqs</th></tr></thead><tbody id="tok-body"><tr class="ghost"><td colspan="7">no token usage yet</td></tr></tbody></table></div>
+      </div>
+
+      <div class="panel span5"><span class="ptitle">&#9508; Copilot &middot; quota &#9504;</span>
+        <div id="copilot-body"><div class="emptybox skel">loading&hellip;</div></div>
+      </div>
+
+      <div class="panel span4"><span class="ptitle">&#9508; Upstream &middot; copilot edge &#9504;</span>
+        <div class="upblocks">
+          <div class="upblk"><div class="v" id="up-total">&middot;</div><div class="k">calls</div></div>
+          <div class="upblk err" id="up-errblk"><div class="v" id="up-errors">&middot;</div><div class="k">errors</div></div>
+          <div class="upblk"><div class="v rate" id="up-rate">&middot;</div><div class="k">err rate</div></div>
+        </div>
+        <svg id="up-spark" viewBox="0 0 320 30" preserveAspectRatio="none" aria-hidden="true"><path class="area" fill="var(--spark-fill)" stroke="none"/><path class="line" fill="none" stroke="var(--danger)" stroke-width="1.5" vector-effect="non-scaling-stroke"/></svg>
+        <div class="flag" id="up-flag"></div>
+      </div>
+
+      <div class="panel span8"><span class="ptitle">&#9508; Throughput &#9504;</span>
+        <div class="cap"><span style="color:var(--accent)">&#9632;</span> tokens/s <span id="thru-tok" class="num"></span> &nbsp; <span style="color:var(--accent-2)">&#9632;</span> req/s <span id="thru-req" class="num"></span> <span class="end" id="thru-peak" style="float:right"></span></div>
+        <svg id="thru-svg" viewBox="0 0 320 88" preserveAspectRatio="none" aria-hidden="true">
+          <defs><linearGradient id="thrugrad" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="var(--accent)" stop-opacity="0.28"/><stop offset="100%" stop-color="var(--accent)" stop-opacity="0"/></linearGradient></defs>
+          <line class="grid" x1="0" y1="22" x2="320" y2="22" stroke="var(--grid-line)"/>
+          <line class="grid" x1="0" y1="44" x2="320" y2="44" stroke="var(--grid-line)"/>
+          <line class="grid" x1="0" y1="66" x2="320" y2="66" stroke="var(--grid-line)"/>
+          <path id="thru-tok-area" fill="url(#thrugrad)" stroke="none"/>
+          <path id="thru-tok-line" fill="none" stroke="var(--accent)" stroke-width="1.5" vector-effect="non-scaling-stroke"/>
+          <path id="thru-req-line" fill="none" stroke="var(--accent-2)" stroke-width="1.2" vector-effect="non-scaling-stroke" opacity="0.9"/>
+        </svg>
+      </div>
+    </section>
+  </section>
+
+  <section id="auth" aria-live="polite">
+    <div class="authcard">
+      <span class="clear" id="auth-clear" style="display:none">clear key</span>
+      <h3>&#9508; Auth required &#9504;</h3>
+      <p>This hoopilot proxy requires an API key. It is stored locally in your browser and sent as <span class="mono">x-api-key</span>.</p>
+      <div class="row"><input id="auth-input" type="password" placeholder="x-api-key" autocomplete="off" spellcheck="false" /><button id="auth-connect">connect</button></div>
+      <div class="err" id="auth-err"></div>
+    </div>
+  </section>
+
+  <footer class="foot">
+    <span id="foot-started">started &middot;</span>
+    <span id="foot-uptime">uptime &middot;</span>
+    <span id="foot-total">&middot; req</span>
+    <span id="foot-tokens">&middot; tokens</span>
+    <span id="foot-upstream">upstream &middot;</span>
+    <span class="end" id="foot-cadence"></span>
+  </footer>
+</div>
+
+<script>
+(function(){
+  "use strict";
+  var byId = function(id){ return document.getElementById(id); };
+  var CAP = 60;
+
+  // ---- persistent state ----
+  var LS = window.localStorage;
+  var apiKey = "";
+  try { apiKey = LS.getItem("hoopilot.apiKey") || ""; } catch (e) { apiKey = ""; }
+  var theme = "auto";
+  try { theme = LS.getItem("hoopilot.theme") || "auto"; } catch (e) { theme = "auto"; }
+  var intervalMs = 4000;
+  try { var sv = parseInt(LS.getItem("hoopilot.intervalMs") || "", 10); if (sv === 2000 || sv === 4000 || sv === 10000) intervalMs = sv; } catch (e) {}
+
+  // ---- runtime state ----
+  var paused = false;
+  var timer = null;
+  var inflightFetch = null;
+  var lastSuccessAt = 0;
+  var prevSample = null;        // { t, reqTotal, tokTotal, upTotal, startedAt }
+  var lastRender = {};          // for change-flash
+  var backoffMs = 0;
+  var lastUptime = null;        // seconds; ticked locally between polls
+  var hist = { req:[], tok:[], inflight:[], up:[] };
+
+  // ---- formatting helpers ----
+  function humanInt(n){
+    if (n === null || n === undefined || !isFinite(n)) return "0";
+    var a = Math.abs(n);
+    if (a >= 1000000) return (n/1000000).toFixed(a >= 10000000 ? 0 : 1) + "M";
+    if (a >= 1000) return (n/1000).toFixed(a >= 10000 ? 0 : 1) + "k";
+    return String(Math.round(n));
+  }
+  function rate(n){
+    if (n === null || n === undefined || !isFinite(n)) return "0";
+    if (n >= 100) return String(Math.round(n));
+    if (n >= 10) return n.toFixed(1);
+    return n.toFixed(2);
+  }
+  function pct(n){ if (!isFinite(n)) return "0%"; return (n >= 10 ? Math.round(n) : Math.round(n*10)/10) + "%"; }
+  function fmtMs(n){ if (n === null || n === undefined || !isFinite(n) || n <= 0) return "0"; if (n >= 1000) return (n/1000).toFixed(2) + "s"; if (n >= 100) return String(Math.round(n)); return Math.round(n*10)/10 + ""; }
+  function pad2(n){ return (n < 10 ? "0" : "") + n; }
+  function fmtUptime(sec){
+    sec = Math.max(0, Math.floor(sec));
+    var d = Math.floor(sec/86400); sec -= d*86400;
+    var h = Math.floor(sec/3600); sec -= h*3600;
+    var m = Math.floor(sec/60); var s = sec - m*60;
+    if (d > 0) return d + "d " + pad2(h) + ":" + pad2(m);
+    if (h > 0) return h + ":" + pad2(m) + ":" + pad2(s);
+    return m + ":" + pad2(s);
+  }
+  function titleize(key){
+    var map = { premium_interactions:"Premium requests", chat:"Chat", completions:"Completions", code_review:"Code review" };
+    if (map[key]) return map[key];
+    return key.split("_").map(function(w){ return w ? w.charAt(0).toUpperCase() + w.slice(1) : w; }).join(" ");
+  }
+  function relTime(iso){
+    var t = Date.parse(iso); if (!isFinite(t)) return iso || "";
+    var s = Math.max(0, Math.round((Date.now() - t)/1000));
+    return fmtUptime(s) + " ago";
+  }
+  function clearEl(el){ while (el && el.firstChild) el.removeChild(el.firstChild); }
+  function mk(tag, cls, txt){ var e = document.createElement(tag); if (cls) e.className = cls; if (txt !== undefined && txt !== null) e.textContent = txt; return e; }
+
+  // Set numeric text and flash on discrete change.
+  function setNum(id, value, kind, num){
+    var el = byId(id); if (!el) return;
+    el.classList.remove("skel");
+    var s = String(value);
+    if (el.textContent !== s){
+      el.textContent = s;
+      // Compare on the raw number (num) when provided, so directional flash works
+      // even when value is a pre-formatted display string.
+      var n = (num !== undefined) ? num : value;
+      var prev = lastRender[id];
+      if (prev !== undefined){
+        var cls = "flash";
+        if (kind === "delta" && typeof n === "number" && typeof prev === "number"){
+          cls = n > prev ? "flash-up" : (n < prev ? "flash-down" : null);
+        }
+        if (cls){ el.classList.remove("flash","flash-up","flash-down"); void el.offsetWidth; el.classList.add(cls); }
+      }
+      lastRender[id] = n;
+    }
+  }
+  function setText(id, s){ var el = byId(id); if (el){ el.classList.remove("skel"); el.textContent = s; } }
+
+  // ---- sparkline rendering ----
+  function pushHist(arr, v){ arr.push(v); if (arr.length > CAP) arr.shift(); }
+  function buildSpark(values, w, h){
+    var pts = []; for (var i=0;i<values.length;i++){ if (isFinite(values[i])) pts.push({ i:i, v:values[i] }); }
+    if (pts.length < 2) return null;
+    var min = Infinity, max = -Infinity;
+    for (var j=0;j<values.length;j++){ var v = values[j]; if (isFinite(v)){ if (v<min) min=v; if (v>max) max=v; } }
+    var flat = (max - min) <= 0;
+    var pad = flat ? 1 : (max - min) * 0.05; var lo = min - pad, hi = max + pad; var span = hi - lo; if (span <= 0) span = 1;
+    var n = values.length;
+    var line = "", lastX = 0, lastY = 0, started = false;
+    for (var k=0;k<n;k++){
+      var val = values[k]; if (!isFinite(val)) continue;
+      var x = (n === 1) ? w : (k * (w/(n-1)));
+      var norm = flat ? 0.5 : (val - lo)/span;
+      var y = h - norm*(h-2) - 1;
+      line += (started ? " L" : "M") + x.toFixed(2) + "," + y.toFixed(2);
+      lastX = x; lastY = y; started = true;
+    }
+    var area = line + " L" + lastX.toFixed(2) + "," + h + " L0," + h + " Z";
+    return { line:line, area:area, lastX:lastX, lastY:lastY };
+  }
+  function drawSpark(svgId, values){
+    var svg = byId(svgId); if (!svg) return;
+    var vb = svg.viewBox.baseVal; var w = vb.width || 200, h = vb.height || 24;
+    var sp = buildSpark(values, w, h);
+    var line = svg.querySelector(".line"), area = svg.querySelector(".area"), dot = svg.querySelector("circle");
+    if (!sp){ if (line) line.setAttribute("d",""); if (area) area.setAttribute("d",""); if (dot) dot.style.display = "none"; return; }
+    if (line) line.setAttribute("d", sp.line);
+    if (area) area.setAttribute("d", sp.area);
+    if (dot){ dot.setAttribute("cx", sp.lastX.toFixed(2)); dot.setAttribute("cy", sp.lastY.toFixed(2)); dot.style.display = ""; }
+  }
+
+  // ---- theme ----
+  function applyTheme(){
+    var root = document.documentElement;
+    if (theme === "dark") root.setAttribute("data-theme","dark");
+    else if (theme === "light") root.setAttribute("data-theme","light");
+    else root.removeAttribute("data-theme");
+    byId("btn-theme").textContent = theme === "dark" ? "D" : (theme === "light" ? "L" : "A");
+  }
+  byId("btn-theme").addEventListener("click", function(){
+    theme = theme === "auto" ? "dark" : (theme === "dark" ? "light" : "auto");
+    try { LS.setItem("hoopilot.theme", theme); } catch (e) {}
+    applyTheme();
+  });
+
+  // ---- interval + pause ----
+  function setActiveSeg(){
+    var btns = byId("seg").querySelectorAll("button");
+    for (var i=0;i<btns.length;i++){ btns[i].classList.toggle("active", parseInt(btns[i].getAttribute("data-ms"),10) === intervalMs); }
+    document.documentElement.style.setProperty("--scan-ms", intervalMs + "ms");
+  }
+  byId("seg").addEventListener("click", function(ev){
+    var b = ev.target.closest ? ev.target.closest("button") : null; if (!b) return;
+    intervalMs = parseInt(b.getAttribute("data-ms"),10) || 4000;
+    try { LS.setItem("hoopilot.intervalMs", String(intervalMs)); } catch (e) {}
+    setActiveSeg();
+    if (!paused){ schedule(0); }
+  });
+  byId("btn-pause").addEventListener("click", function(){
+    paused = !paused;
+    byId("btn-pause").innerHTML = paused ? "&#9654;" : "&#10074;&#10074;";
+    byId("bar").classList.toggle("paused", paused);
+    if (paused){ if (timer){ clearTimeout(timer); timer = null; } setPill("paused","PAUSED",false); }
+    else { setPill("live","LIVE",false); schedule(0); }
+  });
+
+  // ---- connection pill / banner ----
+  function setPill(kind, text, beat){
+    var pill = byId("conn-pill"); var dot = byId("conn-dot");
+    pill.className = "pill " + kind;
+    byId("conn-text").textContent = text;
+    if (beat && dot){ dot.classList.remove("heartbeat"); void dot.offsetWidth; dot.classList.add("heartbeat"); }
+  }
+  function showBanner(text, ok){
+    var b = byId("banner"); b.textContent = text; b.className = "show" + (ok ? " ok" : "");
+    if (ok){ setTimeout(function(){ b.classList.remove("show"); }, 2000); }
+  }
+  function hideBanner(){ byId("banner").classList.remove("show"); }
+  function setDimmed(on){ byId("content").classList.toggle("dim", on); }
+
+  // ---- auth takeover ----
+  function showAuth(rejected){
+    byId("content").style.display = "none";
+    byId("auth").classList.add("show");
+    setPill("authkey","API KEY",false);
+    byId("auth-err").textContent = rejected ? "key rejected" : "";
+    byId("auth-input").classList.toggle("bad", !!rejected);
+    byId("auth-clear").style.display = apiKey ? "" : "none";
+    byId("auth-input").focus();
+  }
+  function hideAuth(){ byId("auth").classList.remove("show"); byId("content").style.display = ""; }
+  byId("auth-connect").addEventListener("click", function(){
+    var v = byId("auth-input").value.trim(); if (!v) return;
+    apiKey = v; try { LS.setItem("hoopilot.apiKey", apiKey); } catch (e) {}
+    hideAuth(); schedule(0);
+  });
+  byId("auth-input").addEventListener("keydown", function(ev){ if (ev.key === "Enter") byId("auth-connect").click(); });
+  byId("auth-clear").addEventListener("click", function(){
+    apiKey = ""; try { LS.removeItem("hoopilot.apiKey"); } catch (e) {}
+    byId("auth-input").value = ""; byId("auth-clear").style.display = "none"; byId("auth-input").focus();
+  });
+
+  // ---- the poll loop (setTimeout-chained, never setInterval) ----
+  var pollGen = 0;
+  function schedule(delay){
+    if (timer){ clearTimeout(timer); }
+    if (paused) return;
+    timer = setTimeout(poll, delay === undefined ? intervalMs : delay);
+  }
+  function poll(){
+    if (paused) return;
+    // A new poll supersedes any in-flight one. Bump the generation so the old
+    // request's settled handlers (including its abort rejection) become no-ops
+    // and never flash a false "disconnected".
+    pollGen += 1; var myGen = pollGen;
+    if (inflightFetch){ try { inflightFetch.abort(); } catch (e) {} }
+    var ctrl = new AbortController(); inflightFetch = ctrl;
+    var to = setTimeout(function(){ try { ctrl.abort(); } catch (e) {} }, 3000);
+    var headers = { "accept":"application/json" };
+    if (apiKey) headers["x-api-key"] = apiKey;
+    fetch("/v1/usage", { headers: headers, signal: ctrl.signal, cache:"no-store" }).then(function(res){
+      clearTimeout(to);
+      if (myGen !== pollGen) return null;
+      if (res.status === 401 || res.status === 403){ inflightFetch = null; showAuth(!!apiKey); return null; }
+      if (!res.ok) throw new Error("HTTP " + res.status);
+      return res.json();
+    }).then(function(data){
+      if (myGen !== pollGen || data === null || paused) return;
+      inflightFetch = null;
+      onData(data);
+      backoffMs = 0; lastSuccessAt = Date.now();
+      hideAuth(); setDimmed(false); hideBanner();
+      setPill("live","LIVE",true);
+      byId("bar").classList.remove("frozen");
+      schedule(intervalMs);
+    }).catch(function(err){
+      clearTimeout(to);
+      if (myGen !== pollGen || paused) return;
+      inflightFetch = null;
+      onDisconnect(err);
+    });
+  }
+  function onDisconnect(err){
+    setPill("reconnect","RECONNECTING",false);
+    setDimmed(true);
+    byId("bar").classList.add("frozen");
+    backoffMs = backoffMs ? Math.min(Math.round(backoffMs * 1.5), 30000) : intervalMs;
+    showBanner("Disconnected (" + (err && err.message ? err.message : "no response") + ") \\u2014 retrying in " + Math.round(backoffMs/1000) + "s", false);
+    schedule(backoffMs);
+  }
+
+  // ---- main render ----
+  function onData(usage){
+    var proxy = usage.proxy || {};
+    var now = Date.now();
+
+    setText("version-chip", "v" + (usage.version || "?"));
+
+    // rates
+    var reqTotal = (proxy.requests && proxy.requests.total) || 0;
+    var tokTotal = (proxy.tokens && proxy.tokens.total) || 0;
+    var upTotal = (proxy.upstream && proxy.upstream.total) || 0;
+    var startedAt = proxy.startedAt || "";
+    var reqPerSec = NaN, tokPerSec = NaN, upDelta = 0, restarted = false;
+    if (prevSample){
+      var dt = (now - prevSample.t)/1000;
+      if (prevSample.startedAt && startedAt && prevSample.startedAt !== startedAt) restarted = true;
+      if (reqTotal < prevSample.reqTotal || tokTotal < prevSample.tokTotal) restarted = true;
+      if (restarted){ reqPerSec = 0; tokPerSec = 0; upDelta = 0; }
+      else if (dt > 0 && isFinite(dt)){
+        reqPerSec = Math.max(0, (reqTotal - prevSample.reqTotal)/dt);
+        tokPerSec = Math.max(0, (tokTotal - prevSample.tokTotal)/dt);
+        upDelta = Math.max(0, upTotal - prevSample.upTotal);
+      }
+    }
+    prevSample = { t:now, reqTotal:reqTotal, tokTotal:tokTotal, upTotal:upTotal, startedAt:startedAt };
+
+    // hero vitals
+    if (isFinite(reqPerSec)){ pushHist(hist.req, reqPerSec); setNum("req-num", rate(reqPerSec)); } else setText("req-num","\\u2014");
+    if (isFinite(tokPerSec)){ pushHist(hist.tok, tokPerSec); setNum("tok-num", humanInt(tokPerSec)); } else setText("tok-num","\\u2014");
+    var inflight = proxy.inFlight || 0;
+    pushHist(hist.inflight, inflight); setNum("inflight-num", String(inflight), "delta", inflight);
+    byId("v-inflight").classList.toggle("active", inflight > 0);
+    setText("uptime-num", fmtUptime(proxy.uptimeSeconds || 0));
+
+    setText("req-sub", hist.req.length ? ("avg " + rate(avg(hist.req)) + "/s") : "warming up");
+    setText("tok-sub", hist.tok.length ? ("peak " + humanInt(Math.max.apply(null, hist.tok)) + "/s") : "warming up");
+    setText("inflight-sub", inflight + " now");
+    setText("uptime-sub", startedAt ? ("since " + relTime(startedAt)) : "");
+
+    drawSpark("req-spark", hist.req);
+    drawSpark("tok-spark", hist.tok);
+    drawSpark("inflight-spark", hist.inflight);
+
+    renderRequests(proxy);
+    renderStatus(proxy);
+    renderLatency(proxy.latency || {});
+    renderTokens(proxy.tokens || {});
+    renderCopilot(usage);
+    renderUpstream(proxy.upstream || {}, upDelta, restarted);
+    renderThroughput();
+    renderFooter(usage, proxy);
+
+    setNum("req-total", humanInt(reqTotal));
+    setNum("tok-total", humanInt(tokTotal));
+    lastUptime = proxy.uptimeSeconds || 0;
+  }
+
+  function avg(arr){ if (!arr.length) return 0; var s = 0; for (var i=0;i<arr.length;i++) s += arr[i]; return s/arr.length; }
+
+  var ROUTE_COLORS = ["var(--c1)","var(--c2)","var(--c3)","var(--c4)","var(--c5)","var(--c6)"];
+  function renderRequests(proxy){
+    var byRoute = (proxy.requests && proxy.requests.byRoute) || {};
+    var total = (proxy.requests && proxy.requests.total) || 0;
+    var rows = Object.keys(byRoute).map(function(k){ return { k:k, v:byRoute[k] }; }).sort(function(a,b){ return b.v - a.v; });
+    var share = byId("route-sharebar"); clearEl(share); share.className = "stack-bar" + (total ? "" : " empty");
+    var body = byId("routes-body"); clearEl(body);
+    if (!rows.length){ var tr = mk("tr","ghost"); var td = mk("td",null,"no requests yet"); td.colSpan = 4; tr.appendChild(td); body.appendChild(tr); return; }
+    rows.forEach(function(r, idx){
+      var p = total ? (r.v/total*100) : 0;
+      var seg = mk("i"); seg.style.width = p + "%"; seg.style.background = ROUTE_COLORS[idx % ROUTE_COLORS.length]; seg.title = r.k + " " + pct(p); share.appendChild(seg);
+      var tr = mk("tr");
+      var name = mk("td","l", r.k); name.title = r.k; tr.appendChild(name);
+      tr.appendChild(mk("td",null, humanInt(r.v)));
+      tr.appendChild(mk("td",null, pct(p)));
+      var btd = mk("td"); var bar = mk("span","minibar"); bar.style.width = Math.max(2, p) + "%"; bar.style.background = ROUTE_COLORS[idx % ROUTE_COLORS.length]; btd.appendChild(bar); tr.appendChild(btd);
+      body.appendChild(tr);
+    });
+    var tot = mk("tr","total"); tot.appendChild(mk("td","l","total")); tot.appendChild(mk("td",null, humanInt(total))); tot.appendChild(mk("td",null,"100%")); tot.appendChild(mk("td")); body.appendChild(tot);
+  }
+
+  function statusClass(code){ var c = String(code).charAt(0); if (c === "2") return "ok"; if (c === "3") return "info"; if (c === "4") return "warn"; if (c === "5") return "danger"; return "muted"; }
+  function statusColor(cls){ return cls === "ok" ? "var(--ok)" : cls === "info" ? "var(--info)" : cls === "warn" ? "var(--warn)" : cls === "danger" ? "var(--danger)" : "var(--text-2)"; }
+  function renderStatus(proxy){
+    var byStatus = (proxy.requests && proxy.requests.byStatus) || {};
+    var total = 0, errs = 0; var groups = { ok:0, info:0, warn:0, danger:0, muted:0 };
+    var codes = Object.keys(byStatus).map(function(k){ return { k:k, v:byStatus[k] }; }).sort(function(a,b){ return b.v - a.v; });
+    codes.forEach(function(c){ total += c.v; var cls = statusClass(c.k); groups[cls] += c.v; if (cls === "warn" || cls === "danger") errs += c.v; });
+    var bar = byId("status-bar"); clearEl(bar); bar.className = "stack-bar" + (total ? "" : " empty");
+    ["ok","info","warn","danger","muted"].forEach(function(cls){ if (groups[cls] > 0){ var seg = mk("i"); seg.style.width = (groups[cls]/total*100) + "%"; seg.style.background = statusColor(cls); bar.appendChild(seg); } });
+    var leg = byId("status-legend"); clearEl(leg);
+    if (!codes.length){ leg.appendChild(mk("span","li","no requests yet")); }
+    codes.forEach(function(c){ var li = mk("span","li"); var sw = mk("span","sw"); sw.style.background = statusColor(statusClass(c.k)); li.appendChild(sw); li.appendChild(mk("span",null, c.k + " " + humanInt(c.v))); leg.appendChild(li); });
+    var er = total ? (errs/total*100) : 0;
+    setNum("error-rate", pct(er));
+    var el = byId("error-rate"); el.style.color = er > 5 ? "var(--danger)" : er > 1 ? "var(--warn)" : "var(--ok)";
+  }
+
+  function renderLatency(lat){
+    setText("lat-p50", fmtMs(lat.p50Ms)); setText("lat-avg", fmtMs(lat.avgMs)); setText("lat-count", humanInt(lat.count || 0));
+    var p95 = byId("lat-p95"); p95.classList.remove("skel"); p95.textContent = fmtMs(lat.p95Ms);
+    p95.style.color = (lat.p50Ms > 0 && lat.p95Ms > 2*lat.p50Ms) ? "var(--warn)" : "var(--info)";
+    // track: position p50 and p95 across 0..(p95*1.15)
+    var track = byId("lat-track"); var old = track.querySelectorAll(".tick,.tlab"); for (var i=0;i<old.length;i++) old[i].remove();
+    var maxv = Math.max(lat.p95Ms || 0, lat.avgMs || 0, 1) * 1.15;
+    function place(v, cls){ if (!isFinite(v) || v <= 0) return; var x = Math.min(100, v/maxv*100); var t = mk("div","tick " + cls); t.style.left = x + "%"; track.appendChild(t); var lab = mk("div","tlab", fmtMs(v)); lab.style.left = x + "%"; track.appendChild(lab); }
+    place(lat.p50Ms, "p50"); place(lat.p95Ms, "p95");
+    var lr = byId("lat-routes"); clearEl(lr);
+    var byRoute = lat.byRoute || {}; var rows = Object.keys(byRoute).map(function(k){ return { k:k, v:byRoute[k] }; }).sort(function(a,b){ return (b.v.avgMs||0) - (a.v.avgMs||0); });
+    rows.forEach(function(r){ var tr = mk("tr"); var n = mk("td","l", r.k); n.title = r.k; tr.appendChild(n); tr.appendChild(mk("td",null, fmtMs(r.v.avgMs))); tr.appendChild(mk("td",null, humanInt(r.v.count||0))); lr.appendChild(tr); });
+  }
+
+  function renderTokens(tok){
+    var prompt = tok.prompt||0, completion = tok.completion||0, reasoning = tok.reasoning||0, cached = tok.cached||0;
+    var sum = prompt + completion + reasoning;
+    var bar = byId("tok-mixbar"); clearEl(bar); bar.className = "stack-bar" + (sum ? "" : " empty");
+    var parts = [ ["prompt", prompt, "var(--text-1)"], ["completion", completion, "var(--accent)"], ["reasoning", reasoning, "var(--info)"] ];
+    parts.forEach(function(p){ if (sum && p[1] > 0){ var seg = mk("i"); seg.style.width = (p[1]/sum*100) + "%"; seg.style.background = p[2]; seg.title = p[0]; bar.appendChild(seg); } });
+    var leg = byId("tok-legend"); clearEl(leg);
+    var legParts = parts.concat([["cached", cached, "var(--cache)"]]);
+    legParts.forEach(function(p){ var li = mk("span","li"); var sw = mk("span","sw"); sw.style.background = p[2]; li.appendChild(sw); var den = (p[0] === "cached") ? prompt : sum; var sh = den ? " " + pct(p[1]/den*100) : ""; li.appendChild(mk("span",null, p[0] + " " + humanInt(p[1]) + sh)); leg.appendChild(li); });
+    var cacheRate = prompt ? (cached/prompt*100) : 0; setText("tok-cache", "cache " + pct(cacheRate));
+    var body = byId("tok-body"); clearEl(body);
+    var byModel = tok.byModel || {}; var rows = Object.keys(byModel).map(function(k){ return { k:k, v:byModel[k] }; }).sort(function(a,b){ return (b.v.total||0) - (a.v.total||0); });
+    if (!rows.length){ var tr = mk("tr","ghost"); var td = mk("td",null,"no token usage yet"); td.colSpan = 7; tr.appendChild(td); body.appendChild(tr); return; }
+    rows.forEach(function(r){ var m = r.v; var tr = mk("tr"); var n = mk("td","l", r.k); n.title = r.k; tr.appendChild(n);
+      tr.appendChild(mk("td",null, humanInt(m.prompt||0))); tr.appendChild(mk("td",null, humanInt(m.completion||0)));
+      tr.appendChild(mk("td","reasoning", humanInt(m.reasoning||0))); tr.appendChild(mk("td","cached", humanInt(m.cached||0)));
+      tr.appendChild(mk("td",null, humanInt(m.total||0))); tr.appendChild(mk("td",null, humanInt(m.requests||0))); body.appendChild(tr); });
+  }
+
+  function planClass(plan){ if (!plan) return "plan-offline"; if (plan.indexOf("pro") >= 0) return "plan-pro"; if (plan.indexOf("business") >= 0 || plan.indexOf("enterprise") >= 0) return "plan-business"; return "plan-free"; }
+  function renderCopilot(usage){
+    var box = byId("copilot-body"); clearEl(box);
+    var cp = usage.copilot; var planChip = byId("plan-chip");
+    if (!cp){
+      planChip.className = "chip plan-offline"; planChip.textContent = "\\u2014 offline";
+      var eb = mk("div","emptybox"); eb.appendChild(mk("div","keyglyph","\\u26bf"));
+      eb.appendChild(mk("h4",null,"Copilot not connected"));
+      if (usage.copilot_error) eb.appendChild(mk("div","errline", usage.copilot_error));
+      eb.appendChild(mk("div","prompt","$ hoopilot login"));
+      box.appendChild(eb); return;
+    }
+    planChip.className = "chip " + planClass(cp.plan); planChip.textContent = cp.plan || "copilot";
+    var head = mk("div","cap");
+    var bits = [];
+    if (cp.accessTypeSku) bits.push(cp.accessTypeSku);
+    if (cp.chatEnabled !== undefined) bits.push(cp.chatEnabled ? "chat on" : "chat off");
+    if (cp.quotaResetDate) bits.push("resets " + cp.quotaResetDate);
+    head.textContent = bits.join("  \\u00b7  "); box.appendChild(head);
+    var quotas = cp.quotas || {}; var keys = Object.keys(quotas);
+    if (!keys.length){ box.appendChild(mk("div","cap","No metered quotas reported.")); return; }
+    var order = { premium_interactions:0, chat:1, completions:2 };
+    keys.sort(function(a,b){ var ra = order[a]===undefined?9:order[a], rb = order[b]===undefined?9:order[b]; return ra-rb || a.localeCompare(b); });
+    keys.forEach(function(k){
+      var q = quotas[k]; var row = mk("div","qrow");
+      var hd = mk("div","qhead"); hd.appendChild(mk("span","qname", titleize(k)));
+      if (q.unlimited){ hd.appendChild(mk("span","inf","\\u221e unlimited")); row.appendChild(hd); box.appendChild(row); return; }
+      var ent = q.entitlement, rem = q.remaining, used = q.used;
+      var usedPct = (q.percentRemaining !== undefined) ? (100 - q.percentRemaining) : ((ent && used !== undefined) ? (used/ent*100) : 0);
+      usedPct = Math.max(0, Math.min(100, usedPct));
+      var valTxt = (used !== undefined && ent !== undefined) ? (humanInt(used) + " / " + humanInt(ent)) : (rem !== undefined ? (humanInt(rem) + " left") : pct(100-usedPct) + " left");
+      hd.appendChild(mk("span","qval", valTxt)); row.appendChild(hd);
+      var bar = mk("div","qbar"); var fill = mk("i"); fill.style.width = usedPct + "%";
+      fill.style.background = usedPct > 85 ? "var(--danger)" : usedPct > 60 ? "var(--warn)" : "var(--ok)"; bar.appendChild(fill);
+      if (q.overageCount && q.overagePermitted){ bar.classList.add("over"); var ext = mk("i","ext"); ext.style.left = "100%"; ext.style.width = "8%"; bar.appendChild(ext); }
+      row.appendChild(bar);
+      if (q.overageCount){ var ov = mk("div","flag", humanInt(q.overageCount) + " overage" + (q.tokenBasedBilling ? " \\u00b7 token billing" : "")); row.appendChild(ov); }
+      box.appendChild(row);
+    });
+  }
+
+  function renderUpstream(up, delta, restarted){
+    setNum("up-total", humanInt(up.total||0));
+    setNum("up-errors", humanInt(up.errors||0), "delta", up.errors||0);
+    var er = up.total ? (up.errors/up.total*100) : 0;
+    var rt = byId("up-rate"); rt.textContent = pct(er); rt.className = "v rate " + (er > 5 ? "danger" : er > 1 ? "warn" : "ok");
+    byId("up-errblk").classList.toggle("hot", (up.errors||0) > 0);
+    pushHist(hist.up, delta||0); drawSpark("up-spark", hist.up);
+    byId("up-flag").textContent = restarted ? "\\u21bb restarted" : "";
+  }
+
+  function renderThroughput(){
+    drawDual("thru-tok-line","thru-tok-area", hist.tok, true);
+    drawDual("thru-req-line", null, hist.req, false);
+    setText("thru-tok", hist.tok.length ? rate(hist.tok[hist.tok.length-1]) : "\\u2014");
+    setText("thru-req", hist.req.length ? rate(hist.req[hist.req.length-1]) : "\\u2014");
+    var peakTok = hist.tok.length ? Math.max.apply(null, hist.tok) : 0;
+    setText("thru-peak", "peak " + humanInt(peakTok) + " tok/s");
+  }
+  function drawDual(lineId, areaId, values, withArea){
+    var svg = byId("thru-svg"); var vb = svg.viewBox.baseVal; var w = vb.width, h = vb.height;
+    var sp = buildSpark(values, w, h);
+    var line = byId(lineId); var area = areaId ? byId(areaId) : null;
+    if (!sp){ if (line) line.setAttribute("d",""); if (area) area.setAttribute("d",""); return; }
+    if (line) line.setAttribute("d", sp.line);
+    if (area && withArea) area.setAttribute("d", sp.area);
+  }
+
+  function renderFooter(usage, proxy){
+    setText("foot-started", proxy.startedAt ? ("started " + new Date(proxy.startedAt).toLocaleString()) : "started \\u2014");
+    setText("foot-uptime", "uptime " + fmtUptime(proxy.uptimeSeconds||0));
+    setText("foot-total", humanInt((proxy.requests && proxy.requests.total)||0) + " req");
+    setText("foot-tokens", humanInt((proxy.tokens && proxy.tokens.total)||0) + " tokens");
+    var up = proxy.upstream || {}; setText("foot-upstream", "upstream " + humanInt(up.total||0) + " / " + humanInt(up.errors||0) + " err");
+    setText("foot-cadence", "polling /v1/usage every " + Math.round(intervalMs/1000) + "s \\u00b7 GET /dashboard");
+  }
+
+  // ---- 1s freshness + uptime ticker (independent of the poll loop) ----
+  setInterval(function(){
+    if (lastSuccessAt){
+      var ago = Math.round((Date.now() - lastSuccessAt)/1000);
+      var u = byId("updated"); u.textContent = "updated " + ago + "s ago";
+      // Staleness only matters while polling; a deliberate pause is not "stale".
+      u.className = "updated" + (paused ? "" : ago > intervalMs/1000*4 ? " danger" : ago > intervalMs/1000*2 ? " warn" : "");
+    }
+    // Tick uptime locally between polls so the seconds advance smoothly; each
+    // successful poll re-seeds lastUptime from the authoritative server value.
+    if (!paused && lastUptime !== null){
+      lastUptime += 1;
+      byId("uptime-num").textContent = fmtUptime(lastUptime);
+      var fu = byId("foot-uptime"); if (fu) fu.textContent = "uptime " + fmtUptime(lastUptime);
+    }
+  }, 1000);
+
+  // ---- boot ----
+  applyTheme(); setActiveSeg();
+  setPill("","CONNECTING",false);
+  poll();
+})();
+</script>
+</body>
+</html>
+`;
 
 // src/metrics.ts
 var PROMETHEUS_CONTENT_TYPE = "text/plain; version=0.0.4; charset=utf-8";
@@ -1752,26 +2535,23 @@ var MetricsRegistry = class {
     const resource = this.#rateLimitResource(rateLimit.resource);
     this.#githubRateLimit.set(resource, { ...rateLimit, resource });
   }
-  // Sanitize the model into a bounded label. The model can originate from a
-  // client request, so cap its length, strip characters that would corrupt the
-  // exposition format, and fold overflow past the cardinality limit into
-  // UNKNOWN_MODEL to keep the series count bounded.
-  #modelLabel(model) {
-    const cleaned = cleanLabel(model).slice(0, MAX_MODEL_LABEL_LENGTH) || UNKNOWN_MODEL;
-    if (!this.#tokens.has(cleaned) && this.#tokens.size >= MAX_TRACKED_MODELS) {
+  // Clean a raw value into a bounded exposition-format label: cap its length,
+  // strip characters that would corrupt the format, and fold overflow past the
+  // cardinality limit into UNKNOWN_MODEL so the series count stays bounded.
+  #boundedLabel(value, tracked, maxEntries) {
+    const cleaned = cleanLabel(value).slice(0, MAX_MODEL_LABEL_LENGTH) || UNKNOWN_MODEL;
+    if (!tracked.has(cleaned) && tracked.size >= maxEntries) {
       return UNKNOWN_MODEL;
     }
     return cleaned;
   }
-  // The resource comes from a trusted upstream header, but clean and bound it
-  // with the same discipline as model labels: strip control characters that
-  // would corrupt the exposition format and fold overflow into "unknown".
+  // The model can originate from a (possibly hostile) client request.
+  #modelLabel(model) {
+    return this.#boundedLabel(model, this.#tokens, MAX_TRACKED_MODELS);
+  }
+  // The resource comes from a trusted upstream header, but is bounded the same way.
   #rateLimitResource(resource) {
-    const cleaned = cleanLabel(resource).slice(0, MAX_MODEL_LABEL_LENGTH) || UNKNOWN_MODEL;
-    if (!this.#githubRateLimit.has(cleaned) && this.#githubRateLimit.size >= MAX_TRACKED_RATELIMIT_RESOURCES) {
-      return UNKNOWN_MODEL;
-    }
-    return cleaned;
+    return this.#boundedLabel(resource, this.#githubRateLimit, MAX_TRACKED_RATELIMIT_RESOURCES);
   }
   #observeDuration(route, seconds) {
     const value = Number.isFinite(seconds) && seconds >= 0 ? seconds : 0;
@@ -1824,6 +2604,7 @@ var MetricsRegistry = class {
     return {
       githubRateLimit,
       inFlight: this.#inFlight,
+      latency: this.#latencySnapshot(),
       requests: { byRoute, byStatus, total: requestsTotal },
       startedAt: new Date(this.#startedAtMs).toISOString(),
       tokens: { byModel, extraction: { ...this.#extraction }, ...tokenTotals },
@@ -1831,6 +2612,37 @@ var MetricsRegistry = class {
       uptimeSeconds: Math.max(0, Math.round((now() - this.#startedAtMs) / 1e3))
     };
   }
+  // Summarize the duration histogram into a JSON latency view: per-route count and
+  // exact average, plus overall average and estimated p50/p95. The percentiles come
+  // from the buckets aggregated across routes, so they share /metrics' resolution.
+  #latencySnapshot() {
+    const byRoute = {};
+    const aggregateBuckets = new Array(DURATION_BUCKETS_SECONDS.length).fill(0);
+    let totalCount = 0;
+    let totalSum = 0;
+    for (const [route, entry] of this.#durations) {
+      byRoute[route] = {
+        avgMs: entry.count > 0 ? round2(entry.sum / entry.count * 1e3) : 0,
+        count: entry.count
+      };
+      totalCount += entry.count;
+      totalSum += entry.sum;
+      for (let i = 0; i < aggregateBuckets.length; i += 1) {
+        aggregateBuckets[i] = (aggregateBuckets[i] ?? 0) + (entry.buckets[i] ?? 0);
+      }
+    }
+    return {
+      avgMs: totalCount > 0 ? round2(totalSum / totalCount * 1e3) : 0,
+      byRoute,
+      count: totalCount,
+      p50Ms: round2(
+        quantileFromBuckets(aggregateBuckets, DURATION_BUCKETS_SECONDS, totalCount, 0.5) * 1e3
+      ),
+      p95Ms: round2(
+        quantileFromBuckets(aggregateBuckets, DURATION_BUCKETS_SECONDS, totalCount, 0.95) * 1e3
+      )
+    };
+  }
   /** Render the Prometheus text exposition format (version 0.0.4). */
   renderPrometheus(now = Date.now) {
     const lines = [];
@@ -2065,7 +2877,7 @@ function recordResponseTextUsage(text, isSse, fallbackModel, onUsage, onOutcome)
       considerSseLine(line, accumulator.consider);
     }
   } else {
-    const parsed = safeParse(text);
+    const parsed = safeJsonParse(text);
     if (parsed !== void 0) {
       accumulator.consider(parsed);
     }
@@ -2127,7 +2939,7 @@ async function consumeUsage(stream, isSse, fallbackModel, onUsage, signal, onOut
         considerSseLine(finalBuffer, accumulator.consider);
       }
     } else if (!overflowed && finalBuffer) {
-      const parsed = safeParse(finalBuffer);
+      const parsed = safeJsonParse(finalBuffer);
       if (parsed !== void 0) {
         accumulator.consider(parsed);
       }
@@ -2170,24 +2982,37 @@ function considerSseLine(line, consider) {
   if (!data || data === "[DONE]") {
     return;
   }
-  const parsed = safeParse(data);
+  const parsed = safeJsonParse(data);
   if (parsed !== void 0) {
     consider(parsed);
   }
 }
-function safeParse(text) {
-  try {
-    return JSON.parse(text);
-  } catch {
-    return void 0;
-  }
-}
 function modelText(value) {
   return typeof value === "string" ? value.trim() : "";
 }
 function nonNegative(value) {
   return Number.isFinite(value) && value > 0 ? value : 0;
 }
+function round2(value) {
+  return Math.round(value * 100) / 100;
+}
+function quantileFromBuckets(bucketCounts, bounds, count, q) {
+  if (count <= 0) {
+    return 0;
+  }
+  const rank = q * count;
+  let cumulative = 0;
+  for (let i = 0; i < bounds.length; i += 1) {
+    const inBucket = bucketCounts[i] ?? 0;
+    if (inBucket > 0 && cumulative + inBucket >= rank) {
+      const lower = i === 0 ? 0 : bounds[i - 1] ?? 0;
+      const upper = bounds[i] ?? lower;
+      return lower + (upper - lower) * ((rank - cumulative) / inBucket);
+    }
+    cumulative += inBucket;
+  }
+  return bounds[bounds.length - 1] ?? 0;
+}
 function cleanLabel(value) {
   let result = "";
   for (const char of value) {
@@ -2251,8 +3076,9 @@ async function getVersion() {
     resolved = BAKED_VERSION;
   } else {
     try {
-      const manifest = await Bun.file(new URL("../package.json", import.meta.url)).json();
-      resolved = typeof manifest.version === "string" ? manifest.version : "0.0.0";
+      const manifest = asRecord(await Bun.file(new URL("../package.json", import.meta.url)).json());
+      const version = manifest.version;
+      resolved = typeof version === "string" ? version : "0.0.0";
     } catch {
       resolved = "0.0.0";
     }
@@ -2278,6 +3104,18 @@ var RequestBodyTooLargeError = class extends Error {
     this.name = "RequestBodyTooLargeError";
   }
 };
+var InvalidJsonError = class extends Error {
+  constructor() {
+    super(INVALID_JSON_MESSAGE);
+    this.name = "InvalidJsonError";
+  }
+};
+var JsonNotObjectError = class extends Error {
+  constructor() {
+    super(JSON_OBJECT_MESSAGE);
+    this.name = "JsonNotObjectError";
+  }
+};
 function createHoopilotHandler(options = {}) {
   const client = new CopilotClient(options);
   const apiKey = options.apiKey ?? envValue(options.env?.HOOPILOT_API_KEY);
@@ -2287,8 +3125,19 @@ function createHoopilotHandler(options = {}) {
   const readUsage = createUsageReader(client, metrics);
   const recordTokens = (model, usage) => metrics.recordTokens(model, usage);
   const recordExtraction = (extracted) => metrics.recordTokenExtraction(extracted);
-  const streamingProxyMode = resolveStreamingProxyMode(options);
-  const bufferProxyBodies = shouldBufferProxyBodies(streamingProxyMode);
+  const bufferProxyBodies = shouldBufferProxyBodies(resolveStreamingProxyMode(options));
+  const requestContext = /* @__PURE__ */ new WeakMap();
+  const app = buildApp({
+    apiKey,
+    allowedOrigins,
+    bufferProxyBodies,
+    client,
+    metrics,
+    readUsage,
+    recordExtraction,
+    recordTokens,
+    requestContext
+  });
   return async (request) => {
     const startedAt = performance.now();
     const url = new URL(request.url);
@@ -2304,7 +3153,24 @@ function createHoopilotHandler(options = {}) {
     metrics.startRequest();
     const origin = request.headers.get("origin")?.trim() || void 0;
     const corsOrigin = resolveCorsAllowOrigin(origin, allowedOrigins);
-    const finish = (response) => finishResponse(response, {
+    const inner = normalizeInnerRequest(request, apiPath, url);
+    requestContext.set(inner, {
+      apiPath,
+      logger: requestLogger,
+      origin,
+      originalPath: url.pathname
+    });
+    let response;
+    try {
+      response = await app.handle(inner);
+    } catch (error) {
+      requestLogger.error(
+        { err: errorDetails(error), event: "http.request.failed" },
+        "request failed"
+      );
+      response = jsonError(500, "internal_error", errorMessage(error));
+    }
+    return finishResponse(response, {
       corsOrigin,
       logger: requestLogger,
       method: request.method,
@@ -2315,141 +3181,175 @@ function createHoopilotHandler(options = {}) {
       closeConnection: bufferProxyBodies,
       trackStreamingBody: !bufferProxyBodies
     });
+  };
+}
+function buildApp(deps) {
+  const {
+    apiKey,
+    allowedOrigins,
+    bufferProxyBodies,
+    client,
+    metrics,
+    readUsage,
+    recordExtraction,
+    recordTokens,
+    requestContext
+  } = deps;
+  const contextFor = (request) => {
+    const stored = requestContext.get(request);
+    if (stored) {
+      return stored;
+    }
+    const originalPath = new URL(request.url).pathname;
+    return {
+      apiPath: canonicalApiPath(originalPath),
+      logger: noopLogger,
+      origin: request.headers.get("origin")?.trim() || void 0,
+      originalPath
+    };
+  };
+  const loggerFor = (request) => contextFor(request).logger;
+  const noBody = { parse: "none" };
+  return new Elysia().onRequest(({ request }) => {
+    const { apiPath, logger, origin } = contextFor(request);
     const browserOrigin = forbiddenBrowserOrigin(origin, request, allowedOrigins);
     if (browserOrigin) {
-      requestLogger.warn(
+      logger.warn(
         { event: "http.request.forbidden_origin", origin: browserOrigin },
         "blocked cross-origin browser request"
       );
-      return finish(jsonError(403, "forbidden_origin", FORBIDDEN_BROWSER_ORIGIN_MESSAGE));
+      return jsonError(403, "forbidden_origin", FORBIDDEN_BROWSER_ORIGIN_MESSAGE);
     }
     if (request.method === "OPTIONS") {
-      return finish(new Response(null, { headers: corsHeaders() }));
+      return new Response(null, { headers: corsHeaders() });
+    }
+    if (request.method === "GET" && apiPath === "/dashboard") {
+      return dashboardResponse();
     }
     if (!isAuthorized(request, apiKey)) {
-      requestLogger.warn({ event: "http.request.unauthorized" }, "invalid hoopilot api key");
-      return finish(jsonError(401, "invalid_api_key", "Invalid or missing Hoopilot API key."));
+      logger.warn({ event: "http.request.unauthorized" }, "invalid hoopilot api key");
+      return jsonError(401, "invalid_api_key", "Invalid or missing Hoopilot API key.");
     }
-    try {
-      if (request.method === "GET" && (apiPath === "/" || apiPath === "/healthz")) {
-        return finish(jsonResponse({ name: "hoopilot", object: "health", status: "ok" }));
-      }
-      if (request.method === "GET" && apiPath === "/metrics") {
-        return finish(metricsResponse(metrics));
-      }
-      if (request.method === "GET" && apiPath === "/v1/usage") {
-        return finish(await handleUsage(metrics, readUsage, request.signal));
-      }
-      if (request.method === "GET" && apiPath === "/v1/responses") {
-        return finish(websocketUnsupportedResponse());
-      }
-      if (request.method === "GET" && apiPath === "/v1/models") {
-        return finish(await handleModels(client, metrics, request.signal, requestLogger));
-      }
-      if (request.method === "POST" && apiPath === "/v1/messages") {
-        return finish(
-          await handleAnthropicMessages(
-            client,
-            metrics,
-            recordTokens,
-            recordExtraction,
-            request,
-            requestLogger,
-            bufferProxyBodies
-          )
-        );
-      }
-      if (request.method === "POST" && apiPath === "/v1/messages/count_tokens") {
-        return finish(handleAnthropicCountTokens(await readJson(request)));
-      }
-      if (request.method === "POST" && apiPath === "/v1/chat/completions") {
-        return finish(
-          await handleChatCompletions(
-            client,
-            metrics,
-            recordTokens,
-            recordExtraction,
-            request,
-            requestLogger,
-            bufferProxyBodies
-          )
-        );
-      }
-      if (request.method === "POST" && apiPath === "/v1/completions") {
-        return finish(
-          await handleCompletions(
-            client,
-            metrics,
-            recordTokens,
-            recordExtraction,
-            request,
-            requestLogger,
-            bufferProxyBodies
-          )
-        );
-      }
-      if (request.method === "POST" && apiPath === "/v1/responses/compact") {
-        return finish(
-          await handleResponsesCompact(
-            client,
-            metrics,
-            recordTokens,
-            recordExtraction,
-            request,
-            requestLogger
-          )
-        );
-      }
-      if (request.method === "POST" && apiPath === "/v1/responses") {
-        return finish(
-          await handleResponses(
-            client,
-            metrics,
-            recordTokens,
-            recordExtraction,
-            request,
-            requestLogger,
-            bufferProxyBodies
-          )
-        );
-      }
-      return finish(jsonError(404, "not_found", `No route for ${request.method} ${url.pathname}.`));
-    } catch (error) {
-      if (error instanceof CopilotAuthError) {
-        requestLogger.warn(
-          { err: errorDetails(error), event: "copilot.auth.missing" },
-          "copilot auth failed"
-        );
-        return finish(jsonError(401, "copilot_auth_error", error.message));
-      }
-      const message = errorMessage(error);
-      if (message === INVALID_JSON_MESSAGE || message === JSON_OBJECT_MESSAGE) {
-        requestLogger.warn(
-          { err: errorDetails(error), event: "http.request.failed" },
-          "request body was not usable json"
-        );
-        return finish(jsonError(400, "invalid_request_error", message));
-      } else if (error instanceof OpenAICompatibilityError || error instanceof AnthropicCompatibilityError) {
-        requestLogger.warn(
-          { err: errorDetails(error), event: "http.request.failed" },
-          "request body used unsupported compatibility fields"
-        );
-        return finish(jsonError(400, "invalid_request_error", message));
-      } else if (error instanceof RequestBodyTooLargeError) {
-        requestLogger.warn(
-          { err: errorDetails(error), event: "http.request.failed" },
-          "request body exceeded size limit"
-        );
-        return finish(jsonError(413, "request_too_large", message));
-      } else {
-        requestLogger.error(
-          { err: errorDetails(error), event: "http.request.failed" },
-          "request failed"
-        );
-      }
-      return finish(jsonError(500, "internal_error", message));
+  }).onError(({ code, error, request }) => {
+    const { logger, originalPath } = contextFor(request);
+    if (code === "NOT_FOUND") {
+      return jsonError(404, "not_found", `No route for ${request.method} ${originalPath}.`);
+    }
+    if (error instanceof CopilotAuthError) {
+      logger.warn(
+        { err: errorDetails(error), event: "copilot.auth.missing" },
+        "copilot auth failed"
+      );
+      return jsonError(401, "copilot_auth_error", error.message);
+    }
+    const message = errorMessage(error);
+    if (error instanceof InvalidJsonError || error instanceof JsonNotObjectError) {
+      logger.warn(
+        { err: errorDetails(error), event: "http.request.failed" },
+        "request body was not usable json"
+      );
+      return jsonError(400, "invalid_request_error", message);
     }
+    if (error instanceof OpenAICompatibilityError || error instanceof AnthropicCompatibilityError) {
+      logger.warn(
+        { err: errorDetails(error), event: "http.request.failed" },
+        "request body used unsupported compatibility fields"
+      );
+      return jsonError(400, "invalid_request_error", message);
+    }
+    if (error instanceof RequestBodyTooLargeError) {
+      logger.warn(
+        { err: errorDetails(error), event: "http.request.failed" },
+        "request body exceeded size limit"
+      );
+      return jsonError(413, "request_too_large", message);
+    }
+    logger.error({ err: errorDetails(error), event: "http.request.failed" }, "request failed");
+    return jsonError(500, "internal_error", message);
+  }).get("/", () => jsonResponse({ name: "hoopilot", object: "health", status: "ok" })).get("/healthz", () => jsonResponse({ name: "hoopilot", object: "health", status: "ok" })).get("/metrics", () => metricsResponse(metrics)).get("/v1/usage", ({ request }) => handleUsage(metrics, readUsage, request.signal)).get(
+    "/v1/models",
+    ({ request }) => handleModels(client, metrics, request.signal, loggerFor(request))
+  ).get("/v1/responses", () => websocketUnsupportedResponse()).post(
+    "/v1/messages",
+    ({ request }) => handleAnthropicMessages(
+      client,
+      metrics,
+      recordTokens,
+      recordExtraction,
+      request,
+      loggerFor(request),
+      bufferProxyBodies
+    ),
+    noBody
+  ).post(
+    "/v1/messages/count_tokens",
+    ({ request }) => handleAnthropicCountTokens(request),
+    noBody
+  ).post(
+    "/v1/chat/completions",
+    ({ request }) => handleChatCompletions(
+      client,
+      metrics,
+      recordTokens,
+      recordExtraction,
+      request,
+      loggerFor(request),
+      bufferProxyBodies
+    ),
+    noBody
+  ).post(
+    "/v1/completions",
+    ({ request }) => handleCompletions(
+      client,
+      metrics,
+      recordTokens,
+      recordExtraction,
+      request,
+      loggerFor(request),
+      bufferProxyBodies
+    ),
+    noBody
+  ).post(
+    "/v1/responses/compact",
+    ({ request }) => handleResponsesCompact(
+      client,
+      metrics,
+      recordTokens,
+      recordExtraction,
+      request,
+      loggerFor(request)
+    ),
+    noBody
+  ).post(
+    "/v1/responses",
+    ({ request }) => handleResponses(
+      client,
+      metrics,
+      recordTokens,
+      recordExtraction,
+      request,
+      loggerFor(request),
+      bufferProxyBodies
+    ),
+    noBody
+  );
+}
+function normalizeInnerRequest(request, canonicalPath, url) {
+  if (canonicalPath === url.pathname) {
+    return request;
+  }
+  const target = new URL(url);
+  target.pathname = canonicalPath;
+  const init = {
+    headers: request.headers,
+    method: request.method,
+    signal: request.signal
   };
+  if (request.body) {
+    init.body = request.body;
+    init.duplex = "half";
+  }
+  return new Request(target, init);
 }
 function startHoopilotServer(options = {}) {
   const host = options.host ?? envValue(options.env?.HOST) ?? DEFAULT_HOST;
@@ -2528,7 +3428,8 @@ async function handleAnthropicMessages(client, metrics, recordTokens, recordExtr
   recordExtraction(usage !== void 0);
   return jsonResponse(responsesResponseToAnthropicMessage(body, model));
 }
-function handleAnthropicCountTokens(body) {
+async function handleAnthropicCountTokens(request) {
+  const body = await readJson(request);
   return jsonResponse(estimateAnthropicMessageTokens(body));
 }
 async function handleModels(client, metrics, signal, logger) {
@@ -2614,14 +3515,14 @@ async function handleCompletions(client, metrics, recordTokens, recordExtraction
   return jsonResponse(chatCompletionToCompletion(completion));
 }
 async function handleResponses(client, metrics, recordTokens, recordExtraction, request, logger, bufferProxyBodies) {
-  const body = await readJsonText(request);
+  const { json, text: body } = await readJsonText(request);
   const upstream = await client.responses(body, request.signal);
   metrics.recordUpstream("/responses", upstream.ok);
   if (!upstream.ok) {
     return proxyError(upstream, logger);
   }
   logUpstreamSuccess(logger, "/responses", upstream.status);
-  const model = normalizeRequestedModel(asRecord(safeParseJson(body)).model);
+  const model = normalizeRequestedModel(json.model);
   return proxyResponse(
     await responseWithObservedUsage(
       upstream,
@@ -2709,17 +3610,16 @@ function parseJsonObject2(text) {
   try {
     parsed = JSON.parse(text);
   } catch {
-    throw new Error(INVALID_JSON_MESSAGE);
+    throw new InvalidJsonError();
   }
   if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
-    throw new Error(JSON_OBJECT_MESSAGE);
+    throw new JsonNotObjectError();
   }
   return parsed;
 }
 async function readJsonText(request) {
   const text = await readRequestText(request);
-  parseJsonObject2(text);
-  return text;
+  return { json: parseJsonObject2(text), text };
 }
 async function readRequestText(request) {
   const contentLength = request.headers.get("content-length");
@@ -2777,7 +3677,7 @@ function jsonError(status, code, message) {
   );
 }
 function upstreamErrorResponse(status, text) {
-  const parsedError = asRecord(asRecord(safeParseJson(text)).error);
+  const parsedError = asRecord(asRecord(safeJsonParse(text)).error);
   if (Object.keys(parsedError).length > 0) {
     return jsonResponse({ error: parsedError }, status);
   }
@@ -2799,13 +3699,18 @@ function corsHeaders() {
     "access-control-expose-headers": "x-request-id"
   };
 }
+function secretEquals(candidate, secret) {
+  const a = createHash("sha256").update(candidate).digest();
+  const b = createHash("sha256").update(secret).digest();
+  return timingSafeEqual(a, b);
+}
 function isAuthorized(request, apiKey) {
   if (!apiKey) {
     return true;
   }
   const authorization = request.headers.get("authorization") ?? "";
   const bearer = authorization.match(/^Bearer\s+(.+)$/i)?.[1];
-  return bearer === apiKey || request.headers.get("x-api-key") === apiKey;
+  return bearer !== void 0 && secretEquals(bearer, apiKey) || secretEquals(request.headers.get("x-api-key") ?? "", apiKey);
 }
 function forbiddenBrowserOrigin(origin, request, allowedOrigins) {
   if (origin) {
@@ -2842,7 +3747,7 @@ function upstreamAuthMessage(message) {
   return `GitHub Copilot rejected the credential or account access: ${message}`;
 }
 function isLoopbackHost(host) {
-  return host === "localhost" || host === "127.0.0.1" || host === "::1" || host === "[::1]";
+  return isLoopbackHostname(host);
 }
 function urlHost(host) {
   return host.includes(":") && !host.startsWith("[") ? `[${host}]` : host;
@@ -2861,9 +3766,6 @@ function normalizeServerPort(value) {
   }
   return port;
 }
-function errorMessage(error) {
-  return error instanceof Error ? error.message : String(error);
-}
 function serverLogger(options) {
   if (options.logger) {
     return options.logger.child({ component: "server" });
@@ -2879,10 +3781,7 @@ function serverLogger(options) {
 }
 function resolveStreamingProxyMode(options) {
   const value = options.streamingProxyMode ?? envValue(options.env?.HOOPILOT_STREAM_MODE) ?? envValue(options.env?.HOOPILOT_STREAMING_PROXY_MODE) ?? "auto";
-  if (value === "auto" || value === "buffer" || value === "live") {
-    return value;
-  }
-  throw new Error(`Invalid stream mode: ${value}. Expected auto, live, or buffer.`);
+  return parseStreamingProxyMode(value);
 }
 function shouldBufferProxyBodies(mode) {
   if (mode === "buffer") {
@@ -2940,11 +3839,13 @@ function responseWithRequestId(response, requestId, closeConnection, corsOrigin)
 function trackStreamCompletion(body, onComplete) {
   const reader = body.getReader();
   let fired = false;
-  const fire = () => {
-    if (!fired) {
-      fired = true;
-      onComplete();
+  const release = () => {
+    if (fired) {
+      return;
     }
+    fired = true;
+    onComplete();
+    reader.releaseLock();
   };
   return new ReadableStream({
     async pull(controller) {
@@ -2952,18 +3853,25 @@ function trackStreamCompletion(body, onComplete) {
         const { done, value } = await reader.read();
         if (done) {
           controller.close();
-          fire();
+          release();
           return;
         }
         controller.enqueue(value);
       } catch (error) {
-        fire();
+        release();
         controller.error(error);
       }
     },
-    cancel(reason) {
-      fire();
-      return reader.cancel(reason);
+    async cancel(reason) {
+      if (!fired) {
+        fired = true;
+        onComplete();
+      }
+      try {
+        await reader.cancel(reason);
+      } finally {
+        reader.releaseLock();
+      }
     }
   });
 }
@@ -3011,44 +3919,26 @@ function canonicalApiPath(path) {
       return withoutTrailingSlash;
   }
 }
+var API_ROUTES = [
+  { method: "GET", path: "/", name: "health" },
+  { method: "GET", path: "/healthz", name: "health" },
+  { method: "GET", path: "/dashboard", name: "dashboard" },
+  { method: "GET", path: "/metrics", name: "metrics" },
+  { method: "GET", path: "/v1/usage", name: "usage" },
+  { method: "GET", path: "/v1/models", name: "models" },
+  { method: "GET", path: "/v1/responses", name: "responses_websocket" },
+  { method: "POST", path: "/v1/messages", name: "anthropic_messages" },
+  { method: "POST", path: "/v1/messages/count_tokens", name: "anthropic_count_tokens" },
+  { method: "POST", path: "/v1/chat/completions", name: "chat_completions" },
+  { method: "POST", path: "/v1/completions", name: "completions" },
+  { method: "POST", path: "/v1/responses/compact", name: "responses_compact" },
+  { method: "POST", path: "/v1/responses", name: "responses" }
+];
 function routeFor(method, path) {
   if (method === "OPTIONS") {
     return "cors.preflight";
   }
-  if (method === "GET" && (path === "/" || path === "/healthz")) {
-    return "health";
-  }
-  if (method === "GET" && path === "/metrics") {
-    return "metrics";
-  }
-  if (method === "GET" && path === "/v1/usage") {
-    return "usage";
-  }
-  if (method === "GET" && path === "/v1/models") {
-    return "models";
-  }
-  if (method === "POST" && path === "/v1/messages") {
-    return "anthropic_messages";
-  }
-  if (method === "POST" && path === "/v1/messages/count_tokens") {
-    return "anthropic_count_tokens";
-  }
-  if (method === "POST" && path === "/v1/chat/completions") {
-    return "chat_completions";
-  }
-  if (method === "POST" && path === "/v1/completions") {
-    return "completions";
-  }
-  if (method === "POST" && path === "/v1/responses/compact") {
-    return "responses_compact";
-  }
-  if (method === "POST" && path === "/v1/responses") {
-    return "responses";
-  }
-  if (method === "GET" && path === "/v1/responses") {
-    return "responses_websocket";
-  }
-  return "not_found";
+  return API_ROUTES.find((entry) => entry.method === method && entry.path === path)?.name ?? "not_found";
 }
 function isStreamingResponse(response) {
   return response.headers.get("content-type")?.includes("text/event-stream") ?? false;
@@ -3072,10 +3962,28 @@ function metricsResponse(metrics) {
     status: 200
   });
 }
+function dashboardResponse() {
+  return new Response(DASHBOARD_HTML, {
+    headers: {
+      ...corsHeaders(),
+      "content-security-policy": "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src 'self'; connect-src 'self'; base-uri 'none'; form-action 'none'; frame-ancestors 'none'",
+      "content-type": "text/html; charset=utf-8",
+      "referrer-policy": "no-referrer",
+      "x-content-type-options": "nosniff",
+      "x-frame-options": "DENY"
+    },
+    status: 200
+  });
+}
 async function handleUsage(metrics, readUsage, signal) {
   const { copilot, error } = await readUsage(signal);
   const proxy = metrics.snapshot();
-  const body = { copilot: copilot ?? null, object: "usage", proxy };
+  const body = {
+    copilot: copilot ?? null,
+    object: "usage",
+    proxy,
+    version: await getVersion()
+  };
   if (error) {
     body.copilot_error = error;
   }
@@ -3108,17 +4016,10 @@ function createUsageReader(client, metrics, now = Date.now, ttlMs = USAGE_CACHE_
     }
   };
 }
-function safeParseJson(text) {
-  try {
-    return JSON.parse(text);
-  } catch {
-    return void 0;
-  }
-}
 
 // src/update.ts
 import { execFileSync } from "child_process";
-import { createHash } from "crypto";
+import { createHash as createHash2 } from "crypto";
 import {
   chmodSync as chmodSync2,
   copyFileSync,
@@ -3126,7 +4027,7 @@ import {
   mkdirSync as mkdirSync2,
   realpathSync,
   renameSync as renameSync2,
-  rmSync,
+  rmSync as rmSync2,
   writeFileSync as writeFileSync2
 } from "fs";
 import { readFile, writeFile } from "fs/promises";
@@ -3300,10 +4201,11 @@ Run: ${upgradeCommandFor(kind)}
 function parseState(text) {
   try {
     const data = JSON.parse(text);
+    const record = data && typeof data === "object" ? data : {};
     return {
-      lastCheck: typeof data.lastCheck === "number" ? data.lastCheck : 0,
-      latestVersion: typeof data.latestVersion === "string" ? data.latestVersion : null,
-      etag: typeof data.etag === "string" ? data.etag : null
+      lastCheck: typeof record.lastCheck === "number" ? record.lastCheck : 0,
+      latestVersion: typeof record.latestVersion === "string" ? record.latestVersion : null,
+      etag: typeof record.etag === "string" ? record.etag : null
     };
   } catch {
     return { lastCheck: 0, latestVersion: null, etag: null };
@@ -3357,6 +4259,7 @@ function latestReleaseApiUrl() {
 
 // src/update.ts
 var REQUEST_TIMEOUT_MS2 = 8e3;
+var DOWNLOAD_TIMEOUT_MS = REQUEST_TIMEOUT_MS2 * 10;
 var SHA256SUMS = "SHA256SUMS";
 function userAgent(version) {
   return `hoopilot/${version}`;
@@ -3494,15 +4397,15 @@ async function downloadToFile(url, dest, version) {
   const response = await fetch(url, {
     headers: { "User-Agent": userAgent(version) },
     redirect: "follow",
-    signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS2 * 10)
+    signal: AbortSignal.timeout(DOWNLOAD_TIMEOUT_MS)
   });
   if (!response.ok || !response.body) {
     throw new Error(`Download failed (${response.status}) for ${url}`);
   }
-  await writeFile(dest, new Uint8Array(await response.arrayBuffer()));
+  await Bun.write(dest, response);
 }
 async function sha256File(path) {
-  return createHash("sha256").update(await readFile(path)).digest("hex");
+  return createHash2("sha256").update(await readFile(path)).digest("hex");
 }
 async function verifyChecksum(release, assetName, file, version) {
   const sums = release.assets.find((asset) => asset.name === SHA256SUMS);
@@ -3514,7 +4417,7 @@ async function verifyChecksum(release, assetName, file, version) {
   const response = await fetch(sums.url, {
     headers: { "User-Agent": userAgent(version) },
     redirect: "follow",
-    signal: AbortSignal.timeout(REQUEST_TIMEOUT_MS2)
+    signal: AbortSignal.timeout(DOWNLOAD_TIMEOUT_MS)
   });
   if (!response.ok) {
     throw new Error(`Could not download ${SHA256SUMS} (${response.status}).`);
@@ -3532,7 +4435,7 @@ function swapBinary(tmpFile, exePath) {
   if (process.platform === "win32") {
     const oldExe = `${exePath}.old`;
     try {
-      rmSync(oldExe, { force: true });
+      rmSync2(oldExe, { force: true });
     } catch {
     }
     renameSync2(exePath, oldExe);
@@ -3589,7 +4492,7 @@ function refreshCodexxShim(dir, logger) {
       { err: errorDetails(error), event: "update.codexx_shim_failed" },
       "could not refresh codexx shim"
     );
-    console.warn(`Updated hoopilot, but could not refresh the codexx shim: ${errorMessage2(error)}`);
+    console.warn(`Updated hoopilot, but could not refresh the codexx shim: ${errorMessage(error)}`);
   }
 }
 function cleanupOldBinary() {
@@ -3597,7 +4500,7 @@ function cleanupOldBinary() {
     return;
   }
   try {
-    rmSync(`${realpathSync(process.execPath)}.old`, { force: true });
+    rmSync2(`${realpathSync(process.execPath)}.old`, { force: true });
   } catch {
   }
 }
@@ -3661,7 +4564,7 @@ async function runUpdate(currentVersion, logger) {
     throw error;
   } finally {
     try {
-      rmSync(tmpFile, { force: true });
+      rmSync2(tmpFile, { force: true });
     } catch {
     }
   }
@@ -3674,12 +4577,8 @@ async function runUpdate(currentVersion, logger) {
     console.log("Restart hoopilot to run the new version.");
   }
 }
-function errorMessage2(error) {
-  return error instanceof Error ? error.message : String(error);
-}
 
 // src/cli.ts
-var ALLOWED_COPILOT_API_HOSTS2 = ["api.githubcopilot.com"];
 async function main2(argv = Bun.argv.slice(2)) {
   cleanupOldBinary();
   const command = argv[0];
@@ -3812,7 +4711,7 @@ function parseArgs(argv) {
         args.logLevel = parseLogLevel(optionValue(name, inlineValue, rest));
         break;
       case "--stream-mode":
-        args.streamingProxyMode = parseStreamMode(optionValue(name, inlineValue, rest));
+        args.streamingProxyMode = parseStreamingProxyMode(optionValue(name, inlineValue, rest));
         break;
       case "--host":
         args.host = optionValue(name, inlineValue, rest);
@@ -3832,12 +4731,6 @@ function parseArgs(argv) {
   }
   return args;
 }
-function parseStreamMode(value) {
-  if (value === "auto" || value === "buffer" || value === "live") {
-    return value;
-  }
-  throw new Error(`Invalid stream mode: ${value}. Expected auto, live, or buffer.`);
-}
 function optionValue(name, inlineValue, rest) {
   const value = inlineValue ?? rest.shift();
   if (!value) {
@@ -3898,11 +4791,7 @@ async function runModels(options = {}) {
   logger.debug({ event: "models.list.started" }, "fetching github copilot models");
   const response = await new CopilotClient(options).models();
   if (!response.ok) {
-    const message = `GitHub Copilot API model list failed with ${response.status}: ${await truncatedResponseText(response)}`;
-    if (response.status === 401 || response.status === 403) {
-      throw new CopilotAuthError(message);
-    }
-    throw new Error(message);
+    await throwForCopilotResponse(response, "GitHub Copilot API model list");
   }
   const ids = modelIdsFromResponse(await response.json().catch(() => void 0));
   if (ids.length === 0) {
@@ -3922,11 +4811,7 @@ async function runUsage(options = {}) {
   logger.debug({ event: "usage.fetch.started" }, "fetching github copilot quota");
   const response = await new CopilotClient(options).usage();
   if (!response.ok) {
-    const message = `GitHub Copilot usage request failed with ${response.status}: ${await truncatedResponseText(response)}`;
-    if (response.status === 401 || response.status === 403) {
-      throw new CopilotAuthError(message);
-    }
-    throw new Error(message);
+    await throwForCopilotResponse(response, "GitHub Copilot usage request");
   }
   const rateLimit = parseRateLimitHeaders(response.headers);
   const usage = normalizeCopilotUsage(await response.json().catch(() => ({})));
@@ -4026,7 +4911,7 @@ async function verifyCopilotOAuthToken(token, options = {}) {
     options.copilotApiBaseUrl ?? envValue(options.env?.COPILOT_API_BASE_URL) ?? DEFAULT_COPILOT_API_BASE_URL
   );
   const allowUnsafeUpstream = envValue(options.env?.HOOPILOT_ALLOW_UNSAFE_UPSTREAM) === "1";
-  if (!isTrustedTokenBaseUrl(apiBaseUrl, ALLOWED_COPILOT_API_HOSTS2, allowUnsafeUpstream)) {
+  if (!isTrustedTokenBaseUrl(apiBaseUrl, ALLOWED_COPILOT_API_HOSTS, allowUnsafeUpstream)) {
     throw new Error(
       `Refusing to send the GitHub OAuth token to an untrusted Copilot API host: ${apiBaseUrl}`
     );
@@ -4037,19 +4922,22 @@ async function verifyCopilotOAuthToken(token, options = {}) {
     method: "GET"
   });
   if (!response.ok) {
-    const message = `GitHub Copilot API verification failed with ${response.status}: ${await truncatedResponseText(response)}`;
-    if (response.status === 401 || response.status === 403) {
-      throw new CopilotAuthError(message);
-    }
-    throw new Error(message);
+    await throwForCopilotResponse(response, "GitHub Copilot API verification");
   }
   return {
     apiBaseUrl,
-    expiresAtMs: Date.now() + 10 * 6e4,
+    expiresAtMs: Date.now() + STORED_TOKEN_TTL_MS,
     source: "github-copilot-oauth",
     token
   };
 }
+async function throwForCopilotResponse(response, label) {
+  const message = `${label} failed with ${response.status}: ${await truncatedResponseText(response)}`;
+  if (response.status === 401 || response.status === 403) {
+    throw new CopilotAuthError(message);
+  }
+  throw new Error(message);
+}
 function openBrowserBestEffort(url, spawnOpener = spawn) {
   const platform = process.platform;
   const command = platform === "win32" ? "cmd" : platform === "darwin" ? "open" : "xdg-open";
@@ -4065,21 +4953,6 @@ function openBrowserBestEffort(url, spawnOpener = spawn) {
   } catch {
   }
 }
-function modelIdsFromResponse(body) {
-  const record = asRecord(body);
-  const data = Array.isArray(record.data) ? record.data : Array.isArray(body) ? body : [];
-  const seen = /* @__PURE__ */ new Set();
-  const ids = [];
-  for (const model of data) {
-    const id = asRecord(model).id;
-    if (typeof id !== "string" || id.length === 0 || seen.has(id)) {
-      continue;
-    }
-    seen.add(id);
-    ids.push(id);
-  }
-  return ids;
-}
 function withRuntimeEnv(args) {
   return { ...args, env: process.env };
 }
@@ -4129,7 +5002,7 @@ Commands:
 
 While the server runs, GET /metrics exposes Prometheus metrics (request counts,
 token usage, latency) and GET /v1/usage returns those metrics plus live Copilot
-quota as JSON.
+quota as JSON. Open GET /dashboard in a browser for a live usage and status view.
 
 Options:
   -p, --port <port>                 Port to listen on. Default: 4141
@@ -4163,7 +5036,7 @@ Environment:
 }
 if (import.meta.main) {
   main2().catch((error) => {
-    console.error(error instanceof Error ? error.message : String(error));
+    console.error(errorMessage(error));
     process.exit(1);
   });
 }