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

package/src/proxy-server.ts

@@ -10,7 +10,7 @@
 
 import http from "node:http";
 import { randomBytes } from "node:crypto";
-import { type ChatMessage, routeToCliRunner } from "./cli-runner.js";
+import { type ChatMessage, type CliToolResult, type ToolDefinition, routeToCliRunner, extractMultimodalParts, cleanupMediaFiles } from "./cli-runner.js";
 import { scheduleTokenRefresh, setAuthLogger, stopTokenRefresh } from "./claude-auth.js";
 import { grokComplete, grokCompleteStream, type ChatMessage as GrokChatMessage } from "./grok-client.js";
 import { geminiComplete, geminiCompleteStream, type ChatMessage as GeminiBrowserChatMessage } from "./gemini-browser.js";
@@ -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;
@@ -258,9 +260,8 @@ async function handleRequest(
           object: "model",
           created: now,
           owned_by: "openclaw-cli-bridge",
-          // CLI-proxy models stream plain text — no tool/function call support
           capabilities: {
-            tools: !(m.id.startsWith("cli-gemini/") || m.id.startsWith("cli-claude/") || m.id.startsWith("openai-codex/") || m.id.startsWith("opencode/") || m.id.startsWith("pi/") || m.id.startsWith("local-bitnet/")),
+            tools: !m.id.startsWith("local-bitnet/"), // all CLI models support tools via prompt injection; only bitnet is text-only
           },
         })),
       })
@@ -296,9 +297,10 @@ async function handleRequest(
       return;
     }
 
-    const { model, messages, stream = false } = parsed as { model: string; messages: ChatMessage[]; stream?: boolean; tools?: unknown; workdir?: string };
+    const { model, messages, stream = false } = parsed as { model: string; messages: ChatMessage[]; stream?: boolean; tools?: ToolDefinition[]; workdir?: string };
     const workdir = (parsed as { workdir?: string }).workdir;
-    const hasTools = Array.isArray((parsed as { tools?: unknown }).tools) && (parsed as { tools?: unknown[] }).tools!.length > 0;
+    const tools = (parsed as { tools?: ToolDefinition[] }).tools;
+    const hasTools = Array.isArray(tools) && tools.length > 0;
 
     if (!model || !messages?.length) {
       res.writeHead(400, { "Content-Type": "application/json" });
@@ -306,23 +308,10 @@ async function handleRequest(
       return;
     }
 
-    // CLI-proxy models (cli-gemini/*, cli-claude/*) are plain text completions —
-    // they cannot process tool/function call schemas. Return a clear 400 so
-    // OpenClaw can surface a meaningful error instead of getting a garbled response.
-    const isCliModel = model.startsWith("cli-gemini/") || model.startsWith("cli-claude/") || model.startsWith("openai-codex/") || model.startsWith("opencode/") || model.startsWith("pi/"); // local-bitnet/* exempt: llama-server silently ignores tools
-    if (hasTools && isCliModel) {
-      res.writeHead(400, { "Content-Type": "application/json" });
-      res.end(JSON.stringify({
-        error: {
-          message: `Model ${model} does not support tool/function calls. Use a native API model (e.g. github-copilot/gpt-5-mini) for agents that need tools.`,
-          type: "invalid_request_error",
-          code: "tools_not_supported",
-        }
-      }));
-      return;
-    }
+    // Extract multimodal content (images, audio) from messages → temp files
+    const { cleanMessages, mediaFiles } = extractMultimodalParts(messages);
 
-    opts.log(`[cli-bridge] ${model} · ${messages.length} msg(s) · stream=${stream}${hasTools ? " · tools=unsupported→rejected" : ""}`);
+    opts.log(`[cli-bridge] ${model} · ${cleanMessages.length} msg(s) · stream=${stream}${hasTools ? ` · tools=${tools!.length}` : ""}${mediaFiles.length ? ` · media=${mediaFiles.length}` : ""}`);
 
     const id = `chatcmpl-cli-${randomBytes(6).toString("hex")}`;
     const created = Math.floor(Date.now() / 1000);
@@ -344,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() });
@@ -354,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,
@@ -367,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) {
@@ -393,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() });
@@ -403,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,
@@ -416,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) {
@@ -442,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() });
@@ -452,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,
@@ -465,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) {
@@ -492,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() });
@@ -502,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,
@@ -515,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) {
@@ -559,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) => {
@@ -579,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"];
@@ -590,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() });
@@ -612,64 +620,141 @@ async function handleRequest(
     }
     // ─────────────────────────────────────────────────────────────────────────
 
-    // ── CLI runner routing (Gemini / Claude Code) ─────────────────────────────
-    let content: string;
+    // ── CLI runner routing (Gemini / Claude Code / Codex) ──────────────────────
+    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 {
-      content = await routeToCliRunner(model, messages, opts.timeoutMs ?? 120_000, { workdir });
+      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 {
-          content = await routeToCliRunner(fallbackModel, messages, opts.timeoutMs ?? 120_000, { workdir });
+          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 {
+      if (keepaliveInterval) clearInterval(keepaliveInterval);
+      cleanupMediaFiles(mediaFiles);
     }
 
-    if (stream) {
-      res.writeHead(200, {
-        "Content-Type": "text/event-stream",
-        "Cache-Control": "no-cache",
-        Connection: "keep-alive",
-        ...corsHeaders(),
-      });
+    const hasToolCalls = !!(result.tool_calls?.length);
+    const finishReason = hasToolCalls ? "tool_calls" : "stop";
 
-      // Role chunk
-      sendSseChunk(res, { id, created, model: usedModel, delta: { role: "assistant" }, finish_reason: null });
+    if (stream) {
+      // SSE headers already sent above — stream response chunks directly
 
-      // Content in chunks (~50 chars each for natural feel)
-      const chunkSize = 50;
-      for (let i = 0; i < content.length; i += chunkSize) {
+      if (hasToolCalls) {
+        // Stream tool_calls in OpenAI SSE format
+        const toolCalls = result.tool_calls!;
+        // Role chunk with all tool_calls (name + empty arguments)
         sendSseChunk(res, {
-          id,
-          created,
-          model: usedModel,
-          delta: { content: content.slice(i, i + chunkSize) },
+          id, created, model: usedModel,
+          delta: {
+            role: "assistant",
+            tool_calls: toolCalls.map((tc, idx) => ({
+              index: idx, id: tc.id, type: "function",
+              function: { name: tc.function.name, arguments: "" },
+            })),
+          },
           finish_reason: null,
         });
+        // Arguments chunks (one per tool call)
+        for (let idx = 0; idx < toolCalls.length; idx++) {
+          sendSseChunk(res, {
+            id, created, model: usedModel,
+            delta: {
+              tool_calls: [{ index: idx, function: { arguments: toolCalls[idx].function.arguments } }],
+            },
+            finish_reason: null,
+          });
+        }
+        // Stop chunk
+        sendSseChunk(res, { id, created, model: usedModel, delta: {}, finish_reason: "tool_calls" });
+      } else {
+        // Standard text streaming
+        sendSseChunk(res, { id, created, model: usedModel, delta: { role: "assistant" }, finish_reason: null });
+        const content = result.content ?? "";
+        const chunkSize = 50;
+        for (let i = 0; i < content.length; i += chunkSize) {
+          sendSseChunk(res, {
+            id, created, model: usedModel,
+            delta: { content: content.slice(i, i + chunkSize) },
+            finish_reason: null,
+          });
+        }
+        sendSseChunk(res, { id, created, model: usedModel, delta: {}, finish_reason: "stop" });
       }
 
-      // Stop chunk
-      sendSseChunk(res, { id, created, model: usedModel, delta: {}, finish_reason: "stop" });
       res.write("data: [DONE]\n\n");
       res.end();
     } else {
+      const message: Record<string, unknown> = { role: "assistant" };
+      if (hasToolCalls) {
+        message.content = null;
+        message.tool_calls = result.tool_calls;
+      } else {
+        message.content = result.content;
+      }
+
       const response = {
         id,
         object: "chat.completion",
@@ -678,8 +763,8 @@ async function handleRequest(
         choices: [
           {
             index: 0,
-            message: { role: "assistant", content },
-            finish_reason: "stop",
+            message,
+            finish_reason: finishReason,
           },
         ],
         usage: { prompt_tokens: 0, completion_tokens: 0, total_tokens: 0 },

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>