@elvatis_com/openclaw-cli-bridge-elvatis 2.3.0 → 2.4.0

package/.ai/handoff/DASHBOARD.md

@@ -7,7 +7,7 @@ _Last updated: 2026-04-10_
 
 | Component | Version | Build | Tests | Status |
 |-----------|---------|-------|-------|--------|
-| openclaw-cli-bridge-elvatis | 2.3.0 | ✅ | ✅ | ✅ Stable |
+| openclaw-cli-bridge-elvatis | 2.4.0 | ✅ | ✅ | ✅ Stable |
 <!-- /SECTION: plugin_status -->
 
 <!-- SECTION: release_state -->
@@ -15,9 +15,9 @@ _Last updated: 2026-04-10_
 
 | Platform | Published Version | Status |
 |----------|------------------|--------|
-| GitHub | v2.3.0 | ✅ Pushed to main |
-| npm | 2.3.0 | ✅ Published (via CI) |
-| ClawHub | 2.3.0 | ✅ Published (via CI) |
+| GitHub | v2.4.0 | ✅ Pushed to main |
+| npm | 2.4.0 | ⏳ Pending (via CI) |
+| ClawHub | 2.4.0 | ⏳ Pending (via CI) |
 <!-- /SECTION: release_state -->
 
 <!-- SECTION: open_tasks -->
@@ -31,6 +31,7 @@ _No open tasks._
 
 | Task | Title | Version |
 |------|-------|---------|
+| T-020 | Metrics & health dashboard: request volume, latency, errors, token usage | 2.4.0 |
 | T-019 | Full-featured CLI bridge: tool calls + multimodal + autonomous execution | 2.3.0 |
 | T-018 | Fix vllm apiKey corruption (401) + harden config-patcher | 2.2.1 |
 | T-017 | Fix log spam, restart loops, CLI blocking | 2.2.0 |

package/openclaw.plugin.json

@@ -2,7 +2,7 @@
   "id": "openclaw-cli-bridge-elvatis",
   "slug": "openclaw-cli-bridge-elvatis",
   "name": "OpenClaw CLI Bridge",
-  "version": "2.2.2",
+  "version": "2.4.0",
   "license": "MIT",
   "description": "Phase 1: openai-codex auth bridge. Phase 2: local HTTP proxy routing model calls through gemini/claude CLIs (vllm provider).",
   "providers": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elvatis_com/openclaw-cli-bridge-elvatis",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Bridges gemini, claude, and codex CLI tools as OpenClaw model providers. Reads existing CLI auth without re-login.",
   "type": "module",
   "openclaw": {

package/src/metrics.ts

@@ -0,0 +1,85 @@
+/**
+ * metrics.ts
+ *
+ * In-memory metrics collector for the CLI bridge proxy.
+ * Tracks request counts, errors, latency, and token usage per model.
+ * All operations are O(1) — cannot block the event loop.
+ */
+
+export interface ModelMetrics {
+  model: string;
+  requests: number;
+  errors: number;
+  totalLatencyMs: number;
+  promptTokens: number;
+  completionTokens: number;
+  lastRequestAt: number | null;
+}
+
+export interface MetricsSnapshot {
+  startedAt: number;
+  totalRequests: number;
+  totalErrors: number;
+  models: ModelMetrics[]; // sorted by requests desc
+}
+
+class MetricsCollector {
+  private startedAt = Date.now();
+  private data = new Map<string, ModelMetrics>();
+
+  recordRequest(
+    model: string,
+    durationMs: number,
+    success: boolean,
+    promptTokens?: number,
+    completionTokens?: number,
+  ): void {
+    let entry = this.data.get(model);
+    if (!entry) {
+      entry = {
+        model,
+        requests: 0,
+        errors: 0,
+        totalLatencyMs: 0,
+        promptTokens: 0,
+        completionTokens: 0,
+        lastRequestAt: null,
+      };
+      this.data.set(model, entry);
+    }
+    entry.requests++;
+    if (!success) entry.errors++;
+    entry.totalLatencyMs += durationMs;
+    if (promptTokens) entry.promptTokens += promptTokens;
+    if (completionTokens) entry.completionTokens += completionTokens;
+    entry.lastRequestAt = Date.now();
+  }
+
+  getMetrics(): MetricsSnapshot {
+    let totalRequests = 0;
+    let totalErrors = 0;
+    const models: ModelMetrics[] = [];
+
+    for (const entry of this.data.values()) {
+      totalRequests += entry.requests;
+      totalErrors += entry.errors;
+      models.push({ ...entry });
+    }
+
+    models.sort((a, b) => b.requests - a.requests);
+
+    return {
+      startedAt: this.startedAt,
+      totalRequests,
+      totalErrors,
+      models,
+    };
+  }
+
+  reset(): void {
+    this.startedAt = Date.now();
+    this.data.clear();
+  }
+}
+
+export const metrics = new MetricsCollector();

package/src/proxy-server.ts

@@ -19,6 +19,7 @@ import { chatgptComplete, chatgptCompleteStream, type ChatMessage as ChatGPTBrow
 import type { BrowserContext } from "playwright";
 import { renderStatusPage, type StatusProvider } from "./status-template.js";
 import { sessionManager } from "./session-manager.js";
+import { metrics } from "./metrics.js";
 
 export type GrokCompleteOptions = Parameters<typeof grokComplete>[1];
 export type GrokCompleteStreamOptions = Parameters<typeof grokCompleteStream>[1];
@@ -222,6 +223,7 @@ async function handleRequest(
         chatgpt: sessionStatus("chatgpt", opts.getChatGPTContext, expiry.chatgpt),
       },
       models: CLI_MODELS.length,
+      metrics: metrics.getMetrics(),
     };
     res.writeHead(200, { "Content-Type": "application/json", ...corsHeaders() });
     res.end(JSON.stringify(health, null, 2));
@@ -240,7 +242,7 @@ async function handleRequest(
       { name: "ChatGPT",  icon: "◉",  expiry: expiry.chatgpt, loginCmd: "/chatgpt-login", ctx: opts.getChatGPTContext?.() ?? null },
     ];
 
-    const html = renderStatusPage({ version, port: opts.port, providers, models: CLI_MODELS, modelCommands: opts.modelCommands });
+    const html = renderStatusPage({ version, port: opts.port, providers, models: CLI_MODELS, modelCommands: opts.modelCommands, metrics: metrics.getMetrics() });
     res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
     res.end(html);
     return;
@@ -331,6 +333,7 @@ async function handleRequest(
       const grokMessages = messages as GrokChatMessage[];
       const doGrokComplete = opts._grokComplete ?? grokComplete;
       const doGrokCompleteStream = opts._grokCompleteStream ?? grokCompleteStream;
+      const grokStart = Date.now();
       try {
         if (stream) {
           res.writeHead(200, { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", Connection: "keep-alive", ...corsHeaders() });
@@ -341,11 +344,13 @@ async function handleRequest(
             (token) => sendSseChunk(res, { id, created, model, delta: { content: token }, finish_reason: null }),
             opts.log
           );
+          metrics.recordRequest(model, Date.now() - grokStart, true, result.promptTokens, result.completionTokens);
           sendSseChunk(res, { id, created, model, delta: {}, finish_reason: result.finishReason });
           res.write("data: [DONE]\n\n");
           res.end();
         } else {
           const result = await doGrokComplete(grokCtx, { messages: grokMessages, model: grokModel, timeoutMs }, opts.log);
+          metrics.recordRequest(model, Date.now() - grokStart, true, result.promptTokens, result.completionTokens);
           res.writeHead(200, { "Content-Type": "application/json", ...corsHeaders() });
           res.end(JSON.stringify({
             id, object: "chat.completion", created, model,
@@ -354,6 +359,7 @@ async function handleRequest(
           }));
         }
       } catch (err) {
+        metrics.recordRequest(model, Date.now() - grokStart, false);
         const msg = (err as Error).message;
         opts.warn(`[cli-bridge] Grok error for ${model}: ${msg}`);
         if (!res.headersSent) {
@@ -380,6 +386,7 @@ async function handleRequest(
       const geminiMessages = messages as GeminiBrowserChatMessage[];
       const doGeminiComplete = opts._geminiComplete ?? geminiComplete;
       const doGeminiCompleteStream = opts._geminiCompleteStream ?? geminiCompleteStream;
+      const geminiStart = Date.now();
       try {
         if (stream) {
           res.writeHead(200, { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", Connection: "keep-alive", ...corsHeaders() });
@@ -390,11 +397,13 @@ async function handleRequest(
             (token) => sendSseChunk(res, { id, created, model, delta: { content: token }, finish_reason: null }),
             opts.log
           );
+          metrics.recordRequest(model, Date.now() - geminiStart, true);
           sendSseChunk(res, { id, created, model, delta: {}, finish_reason: result.finishReason });
           res.write("data: [DONE]\n\n");
           res.end();
         } else {
           const result = await doGeminiComplete(geminiCtx, { messages: geminiMessages, model, timeoutMs }, opts.log);
+          metrics.recordRequest(model, Date.now() - geminiStart, true);
           res.writeHead(200, { "Content-Type": "application/json", ...corsHeaders() });
           res.end(JSON.stringify({
             id, object: "chat.completion", created, model,
@@ -403,6 +412,7 @@ async function handleRequest(
           }));
         }
       } catch (err) {
+        metrics.recordRequest(model, Date.now() - geminiStart, false);
         const msg = (err as Error).message;
         opts.warn(`[cli-bridge] Gemini browser error for ${model}: ${msg}`);
         if (!res.headersSent) {
@@ -429,6 +439,7 @@ async function handleRequest(
       const claudeMessages = messages as ClaudeBrowserChatMessage[];
       const doClaudeComplete = opts._claudeComplete ?? claudeComplete;
       const doClaudeCompleteStream = opts._claudeCompleteStream ?? claudeCompleteStream;
+      const claudeStart = Date.now();
       try {
         if (stream) {
           res.writeHead(200, { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", Connection: "keep-alive", ...corsHeaders() });
@@ -439,11 +450,13 @@ async function handleRequest(
             (token) => sendSseChunk(res, { id, created, model, delta: { content: token }, finish_reason: null }),
             opts.log
           );
+          metrics.recordRequest(model, Date.now() - claudeStart, true);
           sendSseChunk(res, { id, created, model, delta: {}, finish_reason: result.finishReason });
           res.write("data: [DONE]\n\n");
           res.end();
         } else {
           const result = await doClaudeComplete(claudeCtx, { messages: claudeMessages, model, timeoutMs }, opts.log);
+          metrics.recordRequest(model, Date.now() - claudeStart, true);
           res.writeHead(200, { "Content-Type": "application/json", ...corsHeaders() });
           res.end(JSON.stringify({
             id, object: "chat.completion", created, model,
@@ -452,6 +465,7 @@ async function handleRequest(
           }));
         }
       } catch (err) {
+        metrics.recordRequest(model, Date.now() - claudeStart, false);
         const msg = (err as Error).message;
         opts.warn(`[cli-bridge] Claude browser error for ${model}: ${msg}`);
         if (!res.headersSent) {
@@ -479,6 +493,7 @@ async function handleRequest(
       const chatgptMessages = messages as ChatGPTBrowserChatMessage[];
       const doChatGPTComplete = opts._chatgptComplete ?? chatgptComplete;
       const doChatGPTCompleteStream = opts._chatgptCompleteStream ?? chatgptCompleteStream;
+      const chatgptStart = Date.now();
       try {
         if (stream) {
           res.writeHead(200, { "Content-Type": "text/event-stream", "Cache-Control": "no-cache", Connection: "keep-alive", ...corsHeaders() });
@@ -489,11 +504,13 @@ async function handleRequest(
             (token) => sendSseChunk(res, { id, created, model, delta: { content: token }, finish_reason: null }),
             opts.log
           );
+          metrics.recordRequest(model, Date.now() - chatgptStart, true);
           sendSseChunk(res, { id, created, model, delta: {}, finish_reason: result.finishReason });
           res.write("data: [DONE]\n\n");
           res.end();
         } else {
           const result = await doChatGPTComplete(chatgptCtx, { messages: chatgptMessages, model: chatgptModel, timeoutMs }, opts.log);
+          metrics.recordRequest(model, Date.now() - chatgptStart, true);
           res.writeHead(200, { "Content-Type": "application/json", ...corsHeaders() });
           res.end(JSON.stringify({
             id, object: "chat.completion", created, model,
@@ -502,6 +519,7 @@ async function handleRequest(
           }));
         }
       } catch (err) {
+        metrics.recordRequest(model, Date.now() - chatgptStart, false);
         const msg = (err as Error).message;
         opts.warn(`[cli-bridge] ChatGPT browser error for ${model}: ${msg}`);
         if (!res.headersSent) {
@@ -546,6 +564,7 @@ async function handleRequest(
       const bitnetMessages = [{ role: "system", content: BITNET_SYSTEM }, ...truncated];
       const requestBody = JSON.stringify({ ...parsed, messages: bitnetMessages, tools: undefined });
 
+      const bitnetStart = Date.now();
       try {
         const targetUrl = new URL("/v1/chat/completions", bitnetUrl);
         const proxyRes = await new Promise<http.IncomingMessage>((resolve, reject) => {
@@ -566,6 +585,7 @@ async function handleRequest(
           proxyReq.end();
         });
 
+        metrics.recordRequest(model, Date.now() - bitnetStart, true);
         // Forward status + headers
         const fwdHeaders: Record<string, string> = { ...corsHeaders() };
         const ct = proxyRes.headers["content-type"];
@@ -577,6 +597,7 @@ async function handleRequest(
         res.writeHead(proxyRes.statusCode ?? 200, fwdHeaders);
         proxyRes.pipe(res);
       } catch (err) {
+        metrics.recordRequest(model, Date.now() - bitnetStart, false);
         const msg = (err as Error).message;
         if (msg.includes("ECONNREFUSED") || msg.includes("ECONNRESET") || msg.includes("ENOTFOUND")) {
           res.writeHead(503, { "Content-Type": "application/json", ...corsHeaders() });
@@ -603,33 +624,75 @@ async function handleRequest(
     let result: CliToolResult;
     let usedModel = model;
     const routeOpts = { workdir, tools: hasTools ? tools : undefined, mediaFiles: mediaFiles.length ? mediaFiles : undefined };
+
+    // ── Dynamic timeout: scale with conversation size ────────────────────────
+    const baseTimeout = opts.timeoutMs ?? 300_000; // 5 min default (was 120s)
+    const msgExtra = Math.max(0, cleanMessages.length - 10) * 2_000;
+    const toolExtra = (tools?.length ?? 0) * 5_000;
+    const effectiveTimeout = Math.min(baseTimeout + msgExtra + toolExtra, 600_000);
+
+    // ── SSE keepalive: send headers early so OpenClaw doesn't read-timeout ──
+    let sseHeadersSent = false;
+    let keepaliveInterval: ReturnType<typeof setInterval> | null = null;
+    if (stream) {
+      res.writeHead(200, {
+        "Content-Type": "text/event-stream",
+        "Cache-Control": "no-cache",
+        Connection: "keep-alive",
+        ...corsHeaders(),
+      });
+      sseHeadersSent = true;
+      res.write(": keepalive\n\n");
+      keepaliveInterval = setInterval(() => { res.write(": keepalive\n\n"); }, 15_000);
+    }
+
+    const cliStart = Date.now();
     try {
-      result = await routeToCliRunner(model, cleanMessages, opts.timeoutMs ?? 120_000, routeOpts);
+      result = await routeToCliRunner(model, cleanMessages, effectiveTimeout, routeOpts);
+      metrics.recordRequest(model, Date.now() - cliStart, true);
     } catch (err) {
+      const primaryDuration = Date.now() - cliStart;
       const msg = (err as Error).message;
       // ── Model fallback: retry once with a lighter model if configured ────
       const fallbackModel = opts.modelFallbacks?.[model];
       if (fallbackModel) {
+        metrics.recordRequest(model, primaryDuration, false);
         opts.warn(`[cli-bridge] ${model} failed (${msg}), falling back to ${fallbackModel}`);
+        const fallbackStart = Date.now();
         try {
-          result = await routeToCliRunner(fallbackModel, cleanMessages, opts.timeoutMs ?? 120_000, routeOpts);
+          result = await routeToCliRunner(fallbackModel, cleanMessages, effectiveTimeout, routeOpts);
+          metrics.recordRequest(fallbackModel, Date.now() - fallbackStart, true);
           usedModel = fallbackModel;
           opts.log(`[cli-bridge] fallback to ${fallbackModel} succeeded`);
         } catch (fallbackErr) {
+          metrics.recordRequest(fallbackModel, Date.now() - fallbackStart, false);
           const fallbackMsg = (fallbackErr as Error).message;
           opts.warn(`[cli-bridge] fallback ${fallbackModel} also failed: ${fallbackMsg}`);
-          res.writeHead(500, { "Content-Type": "application/json" });
-          res.end(JSON.stringify({ error: { message: `${model}: ${msg} | fallback ${fallbackModel}: ${fallbackMsg}`, type: "cli_error" } }));
+          if (sseHeadersSent) {
+            res.write(`data: ${JSON.stringify({ error: { message: `${model}: ${msg} | fallback ${fallbackModel}: ${fallbackMsg}`, type: "cli_error" } })}\n\n`);
+            res.write("data: [DONE]\n\n");
+            res.end();
+          } else {
+            res.writeHead(500, { "Content-Type": "application/json" });
+            res.end(JSON.stringify({ error: { message: `${model}: ${msg} | fallback ${fallbackModel}: ${fallbackMsg}`, type: "cli_error" } }));
+          }
           return;
         }
       } else {
+        metrics.recordRequest(model, primaryDuration, false);
         opts.warn(`[cli-bridge] CLI error for ${model}: ${msg}`);
-        res.writeHead(500, { "Content-Type": "application/json" });
-        res.end(JSON.stringify({ error: { message: msg, type: "cli_error" } }));
+        if (sseHeadersSent) {
+          res.write(`data: ${JSON.stringify({ error: { message: msg, type: "cli_error" } })}\n\n`);
+          res.write("data: [DONE]\n\n");
+          res.end();
+        } else {
+          res.writeHead(500, { "Content-Type": "application/json" });
+          res.end(JSON.stringify({ error: { message: msg, type: "cli_error" } }));
+        }
         return;
       }
     } finally {
-      // Clean up temp media files after response
+      if (keepaliveInterval) clearInterval(keepaliveInterval);
       cleanupMediaFiles(mediaFiles);
     }
 
@@ -637,12 +700,7 @@ async function handleRequest(
     const finishReason = hasToolCalls ? "tool_calls" : "stop";
 
     if (stream) {
-      res.writeHead(200, {
-        "Content-Type": "text/event-stream",
-        "Cache-Control": "no-cache",
-        Connection: "keep-alive",
-        ...corsHeaders(),
-      });
+      // SSE headers already sent above — stream response chunks directly
 
       if (hasToolCalls) {
         // Stream tool_calls in OpenAI SSE format

package/src/status-template.ts

@@ -6,6 +6,7 @@
  */
 
 import type { BrowserContext } from "playwright";
+import type { MetricsSnapshot } from "./metrics.js";
 
 export interface StatusProvider {
   name: string;
@@ -22,6 +23,8 @@ export interface StatusTemplateOptions {
   models: Array<{ id: string; name: string; contextWindow: number; maxTokens: number }>;
   /** Maps model ID → slash command name (e.g. "openai-codex/gpt-5.3-codex" → "/cli-codex") */
   modelCommands?: Record<string, string>;
+  /** In-memory metrics snapshot — optional for backward compat */
+  metrics?: MetricsSnapshot;
 }
 
 function statusBadge(p: StatusProvider): { label: string; color: string; dot: string } {
@@ -32,6 +35,114 @@ function statusBadge(p: StatusProvider): { label: string; color: string; dot: st
   return { label: "Logged in", color: "#3b82f6", dot: "🔵" };
 }
 
+// ── Formatting helpers ──────────────────────────────────────────────────────
+
+function formatDuration(ms: number): string {
+  if (ms < 1000) return `${Math.round(ms)}ms`;
+  if (ms < 60_000) return `${(ms / 1000).toFixed(1)}s`;
+  return `${(ms / 60_000).toFixed(1)}m`;
+}
+
+function formatTokens(n: number): string {
+  if (n === 0) return "—";
+  if (n < 1000) return String(n);
+  if (n < 1_000_000) return `${(n / 1000).toFixed(1)}k`;
+  return `${(n / 1_000_000).toFixed(2)}M`;
+}
+
+function timeAgo(epochMs: number | null): string {
+  if (!epochMs) return "—";
+  const diff = Date.now() - epochMs;
+  if (diff < 60_000) return "just now";
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
+  return `${Math.floor(diff / 86_400_000)}d ago`;
+}
+
+function formatUptime(startedAt: number): string {
+  const diff = Date.now() - startedAt;
+  const s = Math.floor(diff / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m ${s % 60}s`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ${m % 60}m`;
+  const d = Math.floor(h / 24);
+  return `${d}d ${h % 24}h`;
+}
+
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+// ── Metrics sections ────────────────────────────────────────────────────────
+
+function renderMetricsSection(m: MetricsSnapshot): string {
+  const errorRate = m.totalRequests > 0 ? ((m.totalErrors / m.totalRequests) * 100).toFixed(1) : "0.0";
+  const totalTokens = m.models.reduce((sum, mod) => sum + mod.promptTokens + mod.completionTokens, 0);
+
+  // Summary cards
+  const summaryCards = `
+  <div class="summary-grid">
+    <div class="summary-card">
+      <div class="summary-value">${m.totalRequests}</div>
+      <div class="summary-label">Total Requests</div>
+    </div>
+    <div class="summary-card">
+      <div class="summary-value" style="color:${m.totalErrors > 0 ? '#ef4444' : '#22c55e'}">${errorRate}%</div>
+      <div class="summary-label">Error Rate</div>
+    </div>
+    <div class="summary-card">
+      <div class="summary-value">${formatTokens(totalTokens)}</div>
+      <div class="summary-label">Total Tokens</div>
+    </div>
+    <div class="summary-card">
+      <div class="summary-value">${formatUptime(m.startedAt)}</div>
+      <div class="summary-label">Uptime</div>
+    </div>
+  </div>`;
+
+  // Per-model stats table
+  let modelRows: string;
+  if (m.models.length === 0) {
+    modelRows = `<tr><td colspan="6" style="padding:16px;color:#6b7280;text-align:center;font-style:italic">No requests recorded yet.</td></tr>`;
+  } else {
+    modelRows = m.models.map(mod => {
+      const avgLatency = mod.requests > 0 ? mod.totalLatencyMs / mod.requests : 0;
+      const modErrorRate = mod.requests > 0 ? ((mod.errors / mod.requests) * 100).toFixed(1) : "0.0";
+      return `
+        <tr>
+          <td class="metrics-cell"><code style="color:#93c5fd">${escapeHtml(mod.model)}</code></td>
+          <td class="metrics-cell" style="text-align:right">${mod.requests}</td>
+          <td class="metrics-cell" style="text-align:right;color:${mod.errors > 0 ? '#ef4444' : '#6b7280'}">${mod.errors} <span style="color:#6b7280;font-size:11px">(${modErrorRate}%)</span></td>
+          <td class="metrics-cell" style="text-align:right">${formatDuration(avgLatency)}</td>
+          <td class="metrics-cell" style="text-align:right">${formatTokens(mod.promptTokens)} / ${formatTokens(mod.completionTokens)}</td>
+          <td class="metrics-cell" style="text-align:right;color:#9ca3af">${timeAgo(mod.lastRequestAt)}</td>
+        </tr>`;
+    }).join("");
+  }
+
+  const modelTable = `
+  <div class="card">
+    <div class="card-header">Per-Model Stats</div>
+    <table class="metrics-table">
+      <thead>
+        <tr style="background:#13151f">
+          <th class="metrics-th" style="text-align:left">Model</th>
+          <th class="metrics-th" style="text-align:right">Requests</th>
+          <th class="metrics-th" style="text-align:right">Errors</th>
+          <th class="metrics-th" style="text-align:right">Avg Latency</th>
+          <th class="metrics-th" style="text-align:right">Tokens (in/out)</th>
+          <th class="metrics-th" style="text-align:right">Last Request</th>
+        </tr>
+      </thead>
+      <tbody>${modelRows}</tbody>
+    </table>
+  </div>`;
+
+  return summaryCards + modelTable;
+}
+
 export function renderStatusPage(opts: StatusTemplateOptions): string {
   const { version, port, providers, models } = opts;
 
@@ -66,6 +177,8 @@ export function renderStatusPage(opts: StatusTemplateOptions): string {
       return `<li style="margin:2px 0;font-size:13px;color:#d1d5db"><code style="color:#93c5fd">${m.id}</code>${cmdBadge}</li>`;
     }).join("");
 
+  const metricsHtml = opts.metrics ? renderMetricsSection(opts.metrics) : "";
+
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
@@ -86,6 +199,13 @@ export function renderStatusPage(opts: StatusTemplateOptions): string {
     ul { list-style: none; padding: 12px 16px; }
     .footer { color: #374151; font-size: 12px; text-align: center; margin-top: 16px; }
     code { background: #1e2130; padding: 1px 5px; border-radius: 4px; }
+    .summary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
+    .summary-card { background: #1a1d27; border: 1px solid #2d3148; border-radius: 12px; padding: 20px 16px; text-align: center; }
+    .summary-value { font-size: 28px; font-weight: 700; color: #f9fafb; margin-bottom: 4px; }
+    .summary-label { font-size: 12px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; }
+    .metrics-table { width: 100%; border-collapse: collapse; }
+    .metrics-th { padding: 10px 16px; font-size: 12px; color: #4b5563; font-weight: 600; }
+    .metrics-cell { padding: 10px 16px; font-size: 13px; }
   </style>
 </head>
 <body>
@@ -107,6 +227,8 @@ export function renderStatusPage(opts: StatusTemplateOptions): string {
     </table>
   </div>
 
+  ${metricsHtml}
+
   <div class="models">
     <div class="card">
       <div class="card-header">CLI Models (${cliModels.length})</div>