@elvatis_com/openclaw-cli-bridge-elvatis 2.8.5 → 2.9.0

package/README.md

@@ -2,7 +2,7 @@
 
 > OpenClaw plugin that bridges locally installed AI CLIs (Codex, Gemini, Claude Code, OpenCode, Pi) as model providers — with slash commands for instant model switching, restore, health testing, and model listing.
 
-**Current version:** `2.8.5`
+**Current version:** `2.9.0`
 
 ---
 
@@ -406,6 +406,16 @@ npm run ci          # lint + typecheck + test
 
 ## Changelog
 
+### v2.9.0
+- **feat:** enhanced `/status` dashboard with 5 new panels:
+  - **Active Requests**: live in-flight requests with model, elapsed time, message/tool count, prompt preview
+  - **Recent Request Log**: last 20 requests with latency, success/fail, prompt preview, token counts
+  - **Fallback History**: last 10 fallback events with reason, timing, and outcome
+  - **Provider Sessions**: CLI session state (active/idle/expired), run count, timeout count
+  - **Timeout Configuration**: per-model base timeouts and dynamic scaling formula
+- **feat:** auto-refresh reduced from 30s to 10s for more responsive monitoring
+- **feat:** responsive two-column layout for fallback history and provider sessions
+
 ### v2.8.5
 - **fix:** sync `openclaw.plugin.json` configSchema defaults with code: Sonnet/Opus 300s to 420s, Haiku 90s to 120s. The schema `default` block was overriding `DEFAULT_MODEL_TIMEOUTS` via `cfg.modelTimeouts`, making all code-level timeout bumps ineffective.
 

package/SKILL.md

@@ -68,4 +68,4 @@ On gateway restart, if any session has expired, a **WhatsApp alert** is sent aut
 
 See `README.md` for full configuration reference and architecture diagram.
 
-**Version:** 2.8.5
+**Version:** 2.9.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.8.5",
+  "version": "2.9.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.8.5",
+  "version": "2.9.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

@@ -23,11 +23,32 @@ export interface ModelMetrics {
   lastRequestAt: number | null;
 }
 
+export interface RequestLogEntry {
+  timestamp: number;
+  model: string;
+  latencyMs: number;
+  success: boolean;
+  promptPreview: string;
+  promptTokens: number;
+  completionTokens: number;
+}
+
+export interface FallbackEvent {
+  timestamp: number;
+  originalModel: string;
+  fallbackModel: string;
+  reason: "timeout" | "error";
+  failedDurationMs: number;
+  fallbackSuccess: boolean;
+}
+
 export interface MetricsSnapshot {
   startedAt: number;
   totalRequests: number;
   totalErrors: number;
   models: ModelMetrics[]; // sorted by requests desc
+  recentRequests: RequestLogEntry[];
+  fallbackHistory: FallbackEvent[];
 }
 
 // ── Token estimation ────────────────────────────────────────────────────────
@@ -42,6 +63,19 @@ export function estimateTokens(text: string): number {
   return Math.ceil(text.length / 4);
 }
 
+// ── Circular buffer ─────────────────────────────────────────────────────────
+
+class CircularBuffer<T> {
+  private items: T[] = [];
+  constructor(private capacity: number) {}
+  push(item: T): void {
+    if (this.items.length >= this.capacity) this.items.shift();
+    this.items.push(item);
+  }
+  toArray(): T[] { return [...this.items]; }
+  clear(): void { this.items.length = 0; }
+}
+
 // ── Persistence format ──────────────────────────────────────────────────────
 
 interface PersistedMetrics {
@@ -57,6 +91,8 @@ class MetricsCollector {
   private data = new Map<string, ModelMetrics>();
   private flushTimer: ReturnType<typeof setTimeout> | null = null;
   private dirty = false;
+  private recentRequests = new CircularBuffer<RequestLogEntry>(20);
+  private fallbackEvents = new CircularBuffer<FallbackEvent>(10);
 
   constructor() {
     this.load();
@@ -68,6 +104,7 @@ class MetricsCollector {
     success: boolean,
     promptTokens?: number,
     completionTokens?: number,
+    promptPreview?: string,
   ): void {
     let entry = this.data.get(model);
     if (!entry) {
@@ -88,6 +125,15 @@ class MetricsCollector {
     if (promptTokens) entry.promptTokens += promptTokens;
     if (completionTokens) entry.completionTokens += completionTokens;
     entry.lastRequestAt = Date.now();
+    this.recentRequests.push({
+      timestamp: Date.now(),
+      model,
+      latencyMs: durationMs,
+      success,
+      promptPreview: promptPreview ?? "",
+      promptTokens: promptTokens ?? 0,
+      completionTokens: completionTokens ?? 0,
+    });
     this.scheduleSave();
   }
 
@@ -109,12 +155,33 @@ class MetricsCollector {
       totalRequests,
       totalErrors,
       models,
+      recentRequests: this.recentRequests.toArray(),
+      fallbackHistory: this.fallbackEvents.toArray(),
     };
   }
 
+  recordFallback(
+    originalModel: string,
+    fallbackModel: string,
+    reason: "timeout" | "error",
+    failedDurationMs: number,
+    fallbackSuccess: boolean,
+  ): void {
+    this.fallbackEvents.push({
+      timestamp: Date.now(),
+      originalModel,
+      fallbackModel,
+      reason,
+      failedDurationMs,
+      fallbackSuccess,
+    });
+  }
+
   reset(): void {
     this.startedAt = Date.now();
     this.data.clear();
+    this.recentRequests.clear();
+    this.fallbackEvents.clear();
     this.saveNow();
   }
 

package/src/proxy-server.ts

@@ -31,8 +31,26 @@ import {
   DEFAULT_BITNET_SERVER_URL,
   BITNET_MAX_MESSAGES,
   BITNET_SYSTEM_PROMPT,
+  DEFAULT_MODEL_TIMEOUTS,
 } from "./config.js";
 
+// ── Active request tracking ─────────────────────────────────────────────────
+
+export interface ActiveRequest {
+  id: string;
+  model: string;
+  startedAt: number;
+  messageCount: number;
+  toolCount: number;
+  promptPreview: string;
+}
+
+const activeRequests = new Map<string, ActiveRequest>();
+
+export function getActiveRequests(): ActiveRequest[] {
+  return [...activeRequests.values()];
+}
+
 export type GrokCompleteOptions = Parameters<typeof grokComplete>[1];
 export type GrokCompleteStreamOptions = Parameters<typeof grokCompleteStream>[1];
 export type GrokCompleteResult = Awaited<ReturnType<typeof grokComplete>>;
@@ -276,7 +294,20 @@ 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, metrics: metrics.getMetrics() });
+    const html = renderStatusPage({
+      version, port: opts.port, providers, models: CLI_MODELS,
+      modelCommands: opts.modelCommands,
+      metrics: metrics.getMetrics(),
+      activeRequests: getActiveRequests(),
+      providerSessionsList: providerSessions.listSessions(),
+      timeoutConfig: {
+        defaults: { ...DEFAULT_MODEL_TIMEOUTS, ...(opts.modelTimeouts ?? {}) },
+        baseDefault: opts.timeoutMs ?? DEFAULT_PROXY_TIMEOUT_MS,
+        maxEffective: MAX_EFFECTIVE_TIMEOUT_MS,
+        perExtraMsg: TIMEOUT_PER_EXTRA_MSG_MS,
+        perTool: TIMEOUT_PER_TOOL_MS,
+      },
+    });
     res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
     res.end(html);
     return;
@@ -354,6 +385,13 @@ async function handleRequest(
     const id = `chatcmpl-cli-${randomBytes(6).toString("hex")}`;
     const created = Math.floor(Date.now() / 1000);
 
+    // Extract prompt preview from last user message for dashboard
+    const lastUserMsg = [...cleanMessages].reverse().find(m => m.role === "user");
+    const promptPreview = typeof lastUserMsg?.content === "string" ? lastUserMsg.content.slice(0, 80) : "";
+
+    // Track active request for dashboard
+    activeRequests.set(id, { id, model, startedAt: Date.now(), messageCount: cleanMessages.length, toolCount: tools?.length ?? 0, promptPreview });
+
     // ── Grok web-session routing ──────────────────────────────────────────────
     if (model.startsWith("web-grok/")) {
       let grokCtx = opts.getGrokContext?.() ?? null;
@@ -787,7 +825,7 @@ async function handleRequest(
     try {
       result = await routeToCliRunner(model, cleanMessages, effectiveTimeout, routeOpts);
       const estCompletionTokens = estimateTokens(result.content ?? "");
-      metrics.recordRequest(model, Date.now() - cliStart, true, estPromptTokens, estCompletionTokens);
+      metrics.recordRequest(model, Date.now() - cliStart, true, estPromptTokens, estCompletionTokens, promptPreview);
       providerSessions.recordRun(session.id, false);
     } catch (err) {
       const primaryDuration = Date.now() - cliStart;
@@ -798,18 +836,20 @@ async function handleRequest(
       providerSessions.recordRun(session.id, isTimeout);
       const fallbackModel = opts.modelFallbacks?.[model];
       if (fallbackModel) {
-        metrics.recordRequest(model, primaryDuration, false, estPromptTokens);
+        metrics.recordRequest(model, primaryDuration, false, estPromptTokens, undefined, promptPreview);
         const reason = isTimeout ? `timeout by supervisor, session=${session.id} preserved` : msg;
         opts.warn(`[cli-bridge] ${model} failed (${reason}), falling back to ${fallbackModel}`);
         const fallbackStart = Date.now();
         try {
           result = await routeToCliRunner(fallbackModel, cleanMessages, effectiveTimeout, routeOpts);
           const fbCompTokens = estimateTokens(result.content ?? "");
-          metrics.recordRequest(fallbackModel, Date.now() - fallbackStart, true, estPromptTokens, fbCompTokens);
+          metrics.recordRequest(fallbackModel, Date.now() - fallbackStart, true, estPromptTokens, fbCompTokens, promptPreview);
+          metrics.recordFallback(model, fallbackModel, isTimeout ? "timeout" : "error", primaryDuration, true);
           usedModel = fallbackModel;
           opts.log(`[cli-bridge] fallback to ${fallbackModel} succeeded (response will report original model: ${model})`);
         } catch (fallbackErr) {
-          metrics.recordRequest(fallbackModel, Date.now() - fallbackStart, false, estPromptTokens);
+          metrics.recordRequest(fallbackModel, Date.now() - fallbackStart, false, estPromptTokens, undefined, promptPreview);
+          metrics.recordFallback(model, fallbackModel, isTimeout ? "timeout" : "error", primaryDuration, false);
           const fallbackMsg = (fallbackErr as Error).message;
           opts.warn(`[cli-bridge] fallback ${fallbackModel} also failed: ${fallbackMsg}`);
           if (sseHeadersSent) {
@@ -823,7 +863,7 @@ async function handleRequest(
           return;
         }
       } else {
-        metrics.recordRequest(model, primaryDuration, false, estPromptTokens);
+        metrics.recordRequest(model, primaryDuration, false, estPromptTokens, undefined, promptPreview);
         opts.warn(`[cli-bridge] CLI error for ${model}: ${msg}`);
         if (sseHeadersSent) {
           res.write(`data: ${JSON.stringify({ error: { message: msg, type: "cli_error" } })}\n\n`);
@@ -838,6 +878,7 @@ async function handleRequest(
     } finally {
       if (keepaliveInterval) clearInterval(keepaliveInterval);
       cleanupMediaFiles(mediaFiles);
+      activeRequests.delete(id);
     }
 
     const hasToolCalls = !!(result.tool_calls?.length);

package/src/status-template.ts

@@ -6,7 +6,9 @@
  */
 
 import type { BrowserContext } from "playwright";
-import type { MetricsSnapshot } from "./metrics.js";
+import type { MetricsSnapshot, RequestLogEntry, FallbackEvent } from "./metrics.js";
+import type { ProviderSession } from "./provider-sessions.js";
+import type { ActiveRequest } from "./proxy-server.js";
 
 export interface StatusProvider {
   name: string;
@@ -16,15 +18,24 @@ export interface StatusProvider {
   ctx: BrowserContext | null;
 }
 
+export interface TimeoutConfigInfo {
+  defaults: Record<string, number>;
+  baseDefault: number;
+  maxEffective: number;
+  perExtraMsg: number;
+  perTool: number;
+}
+
 export interface StatusTemplateOptions {
   version: string;
   port: number;
   providers: StatusProvider[];
   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;
+  activeRequests?: ActiveRequest[];
+  providerSessionsList?: ProviderSession[];
+  timeoutConfig?: TimeoutConfigInfo;
 }
 
 function statusBadge(p: StatusProvider): { label: string; color: string; dot: string } {
@@ -44,14 +55,14 @@ function formatDuration(ms: number): string {
 }
 
 function formatTokens(n: number): string {
-  if (n === 0) return "—";
+  if (n === 0) return "\u2014";
   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 "—";
+  if (!epochMs) return "\u2014";
   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`;
@@ -75,6 +86,223 @@ function escapeHtml(s: string): string {
   return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
 
+function truncateId(id: string): string {
+  if (id.length <= 20) return id;
+  return id.slice(0, 8) + "\u2026" + id.slice(-8);
+}
+
+// ── Active Requests ────────────────────────────────────────────────────────
+
+function renderActiveRequests(active: ActiveRequest[]): string {
+  if (active.length === 0) {
+    return `
+    <div class="card">
+      <div class="card-header">Active Requests <span class="badge badge-ok">0</span></div>
+      <div class="empty-state">No active requests</div>
+    </div>`;
+  }
+
+  const rows = active.map(r => {
+    const elapsed = Date.now() - r.startedAt;
+    const elapsedClass = elapsed > 300_000 ? ' style="color:#ef4444;font-weight:600"' : elapsed > 120_000 ? ' style="color:#f59e0b"' : "";
+    return `
+      <tr>
+        <td class="metrics-cell"><span class="pulse-dot"></span></td>
+        <td class="metrics-cell"><code class="model-id">${escapeHtml(r.model)}</code></td>
+        <td class="metrics-cell" style="text-align:right"${elapsedClass}>${formatDuration(elapsed)}</td>
+        <td class="metrics-cell" style="text-align:right">${r.messageCount}</td>
+        <td class="metrics-cell" style="text-align:right">${r.toolCount}</td>
+        <td class="metrics-cell prompt-preview">${escapeHtml(r.promptPreview || "\u2014")}</td>
+      </tr>`;
+  }).join("");
+
+  return `
+  <div class="card">
+    <div class="card-header">Active Requests <span class="badge badge-active">${active.length}</span></div>
+    <table class="metrics-table">
+      <thead>
+        <tr class="table-head">
+          <th class="metrics-th" style="width:24px"></th>
+          <th class="metrics-th" style="text-align:left">Model</th>
+          <th class="metrics-th" style="text-align:right">Elapsed</th>
+          <th class="metrics-th" style="text-align:right">Msgs</th>
+          <th class="metrics-th" style="text-align:right">Tools</th>
+          <th class="metrics-th" style="text-align:left">Prompt</th>
+        </tr>
+      </thead>
+      <tbody>${rows}</tbody>
+    </table>
+  </div>`;
+}
+
+// ── Recent Request Log ────────────────────────────────────────────────────���
+
+function renderRecentRequestLog(entries: RequestLogEntry[]): string {
+  if (entries.length === 0) {
+    return `
+    <div class="card">
+      <div class="card-header">Recent Requests</div>
+      <div class="empty-state">No requests recorded yet</div>
+    </div>`;
+  }
+
+  const rows = [...entries].reverse().map(r => {
+    const statusIcon = r.success
+      ? '<span style="color:#22c55e">&#10003;</span>'
+      : '<span style="color:#ef4444">&#10007;</span>';
+    return `
+      <tr>
+        <td class="metrics-cell" style="color:#6b7280;font-size:12px;white-space:nowrap">${timeAgo(r.timestamp)}</td>
+        <td class="metrics-cell"><code class="model-id">${escapeHtml(r.model)}</code></td>
+        <td class="metrics-cell" style="text-align:right">${formatDuration(r.latencyMs)}</td>
+        <td class="metrics-cell" style="text-align:center">${statusIcon}</td>
+        <td class="metrics-cell prompt-preview">${escapeHtml(r.promptPreview || "\u2014")}</td>
+        <td class="metrics-cell" style="text-align:right;color:#6b7280;font-size:12px">${formatTokens(r.promptTokens)} / ${formatTokens(r.completionTokens)}</td>
+      </tr>`;
+  }).join("");
+
+  return `
+  <div class="card">
+    <div class="card-header">Recent Requests <span style="color:#4b5563;font-weight:400">(last ${entries.length})</span></div>
+    <table class="metrics-table">
+      <thead>
+        <tr class="table-head">
+          <th class="metrics-th" style="text-align:left">Time</th>
+          <th class="metrics-th" style="text-align:left">Model</th>
+          <th class="metrics-th" style="text-align:right">Latency</th>
+          <th class="metrics-th" style="text-align:center">OK</th>
+          <th class="metrics-th" style="text-align:left">Prompt</th>
+          <th class="metrics-th" style="text-align:right">Tokens (in/out)</th>
+        </tr>
+      </thead>
+      <tbody>${rows}</tbody>
+    </table>
+  </div>`;
+}
+
+// ── Fallback History ───────────────────────────────────────────────────────
+
+function renderFallbackHistory(events: FallbackEvent[]): string {
+  if (events.length === 0) {
+    return `
+    <div class="card">
+      <div class="card-header">Fallback History</div>
+      <div class="empty-state">No fallback events</div>
+    </div>`;
+  }
+
+  const rows = [...events].reverse().map(e => {
+    const reasonBadge = e.reason === "timeout"
+      ? '<span class="badge badge-warn">timeout</span>'
+      : '<span class="badge badge-error">error</span>';
+    const outcomeBadge = e.fallbackSuccess
+      ? '<span class="badge badge-ok">success</span>'
+      : '<span class="badge badge-error">failed</span>';
+    return `
+      <tr>
+        <td class="metrics-cell" style="color:#6b7280;font-size:12px;white-space:nowrap">${timeAgo(e.timestamp)}</td>
+        <td class="metrics-cell"><code class="model-id">${escapeHtml(e.originalModel)}</code></td>
+        <td class="metrics-cell"><code class="model-id">${escapeHtml(e.fallbackModel)}</code></td>
+        <td class="metrics-cell">${reasonBadge}</td>
+        <td class="metrics-cell" style="text-align:right">${formatDuration(e.failedDurationMs)}</td>
+        <td class="metrics-cell">${outcomeBadge}</td>
+      </tr>`;
+  }).join("");
+
+  return `
+  <div class="card">
+    <div class="card-header">Fallback History <span style="color:#4b5563;font-weight:400">(last ${events.length})</span></div>
+    <table class="metrics-table">
+      <thead>
+        <tr class="table-head">
+          <th class="metrics-th" style="text-align:left">Time</th>
+          <th class="metrics-th" style="text-align:left">Original Model</th>
+          <th class="metrics-th" style="text-align:left">Fallback Model</th>
+          <th class="metrics-th" style="text-align:left">Reason</th>
+          <th class="metrics-th" style="text-align:right">Failed After</th>
+          <th class="metrics-th" style="text-align:left">Outcome</th>
+        </tr>
+      </thead>
+      <tbody>${rows}</tbody>
+    </table>
+  </div>`;
+}
+
+// ── Provider Sessions ──────────────────────────────────────────────────────
+
+function renderProviderSessions(sessions: ProviderSession[]): string {
+  if (sessions.length === 0) {
+    return `
+    <div class="card">
+      <div class="card-header">Provider Sessions</div>
+      <div class="empty-state">No active sessions</div>
+    </div>`;
+  }
+
+  const sorted = [...sessions].sort((a, b) => b.updatedAt - a.updatedAt);
+  const rows = sorted.map(s => {
+    const stateColor = s.state === "active" ? "#22c55e" : s.state === "idle" ? "#3b82f6" : "#6b7280";
+    const stateBadge = `<span class="badge" style="background:${stateColor}22;color:${stateColor};border-color:${stateColor}44">${s.state}</span>`;
+    const timeoutWarn = s.timeoutCount > 0 ? ` <span style="color:#ef4444;font-size:11px">(${s.timeoutCount} timeouts)</span>` : "";
+    return `
+      <tr>
+        <td class="metrics-cell" style="font-family:monospace;font-size:12px;color:#9ca3af">${truncateId(s.id)}</td>
+        <td class="metrics-cell"><code class="model-id">${escapeHtml(s.modelAlias)}</code></td>
+        <td class="metrics-cell">${stateBadge}</td>
+        <td class="metrics-cell" style="text-align:right">${s.runCount}${timeoutWarn}</td>
+        <td class="metrics-cell" style="text-align:right;color:#6b7280;font-size:12px">${timeAgo(s.updatedAt)}</td>
+      </tr>`;
+  }).join("");
+
+  return `
+  <div class="card">
+    <div class="card-header">Provider Sessions <span style="color:#4b5563;font-weight:400">(${sessions.length})</span></div>
+    <table class="metrics-table">
+      <thead>
+        <tr class="table-head">
+          <th class="metrics-th" style="text-align:left">Session ID</th>
+          <th class="metrics-th" style="text-align:left">Model</th>
+          <th class="metrics-th" style="text-align:left">State</th>
+          <th class="metrics-th" style="text-align:right">Runs</th>
+          <th class="metrics-th" style="text-align:right">Last Activity</th>
+        </tr>
+      </thead>
+      <tbody>${rows}</tbody>
+    </table>
+  </div>`;
+}
+
+// ── Timeout Configuration ──────────────────────────────────────────────────
+
+function renderTimeoutConfig(config: TimeoutConfigInfo): string {
+  const entries = Object.entries(config.defaults).sort(([a], [b]) => a.localeCompare(b));
+  const rows = entries.map(([model, ms]) => {
+    return `
+      <tr>
+        <td class="metrics-cell"><code class="model-id">${escapeHtml(model)}</code></td>
+        <td class="metrics-cell" style="text-align:right">${Math.round(ms / 1000)}s</td>
+      </tr>`;
+  }).join("");
+
+  return `
+  <div class="card">
+    <div class="card-header">Timeout Configuration</div>
+    <div style="padding:12px 16px;color:#9ca3af;font-size:13px;border-bottom:1px solid #1f2335">
+      <strong style="color:#d1d5db">Formula:</strong> base timeout + (msgs beyond 10 &times; ${config.perExtraMsg / 1000}s) + (tools &times; ${config.perTool / 1000}s), capped at ${Math.round(config.maxEffective / 1000)}s
+      <br><span style="color:#6b7280">Default base: ${Math.round(config.baseDefault / 1000)}s</span>
+    </div>
+    <table class="metrics-table">
+      <thead>
+        <tr class="table-head">
+          <th class="metrics-th" style="text-align:left">Model</th>
+          <th class="metrics-th" style="text-align:right">Base Timeout</th>
+        </tr>
+      </thead>
+      <tbody>${rows}</tbody>
+    </table>
+  </div>`;
+}
+
 // ── Metrics sections ────────────────────────────────────────────────────────
 
 function renderMetricsSection(m: MetricsSnapshot): string {
@@ -112,7 +340,7 @@ function renderMetricsSection(m: MetricsSnapshot): string {
       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"><code class="model-id">${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>
@@ -127,7 +355,7 @@ function renderMetricsSection(m: MetricsSnapshot): string {
     <div class="card-header">Per-Model Stats</div>
     <table class="metrics-table">
       <thead>
-        <tr style="background:#13151f">
+        <tr class="table-head">
           <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>
@@ -150,7 +378,7 @@ export function renderStatusPage(opts: StatusTemplateOptions): string {
     const badge = statusBadge(p);
     const expiryText = p.expiry
       ? p.expiry.replace(/[⚠️🚨✅🕐]/gu, "").trim()
-      : `Not logged in — run <code>${p.loginCmd}</code>`;
+      : `Not logged in \u2014 run <code>${p.loginCmd}</code>`;
     return `
         <tr>
           <td style="padding:12px 16px;font-weight:600;font-size:15px">${p.icon} ${p.name}</td>
@@ -174,10 +402,15 @@ export function renderStatusPage(opts: StatusTemplateOptions): string {
     items.map(m => {
       const cmd = cmds[m.id];
       const cmdBadge = cmd ? `<span style="color:#6b7280;font-size:11px;margin-left:8px">${cmd}</span>` : "";
-      return `<li style="margin:2px 0;font-size:13px;color:#d1d5db"><code style="color:#93c5fd">${m.id}</code>${cmdBadge}</li>`;
+      return `<li style="margin:2px 0;font-size:13px;color:#d1d5db"><code class="model-id">${m.id}</code>${cmdBadge}</li>`;
     }).join("");
 
   const metricsHtml = opts.metrics ? renderMetricsSection(opts.metrics) : "";
+  const activeHtml = opts.activeRequests ? renderActiveRequests(opts.activeRequests) : "";
+  const recentHtml = opts.metrics ? renderRecentRequestLog(opts.metrics.recentRequests) : "";
+  const fallbackHtml = opts.metrics ? renderFallbackHistory(opts.metrics.fallbackHistory) : "";
+  const sessionsHtml = opts.providerSessionsList ? renderProviderSessions(opts.providerSessionsList) : "";
+  const timeoutHtml = opts.timeoutConfig ? renderTimeoutConfig(opts.timeoutConfig) : "";
 
   return `<!DOCTYPE html>
 <html lang="en">
@@ -185,20 +418,24 @@ export function renderStatusPage(opts: StatusTemplateOptions): string {
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>CLI Bridge Status</title>
-  <meta http-equiv="refresh" content="30">
+  <meta http-equiv="refresh" content="10">
   <style>
     * { box-sizing: border-box; margin: 0; padding: 0; }
     body { background: #0f1117; color: #e5e7eb; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; min-height: 100vh; padding: 32px 24px; }
     h1 { font-size: 22px; font-weight: 700; color: #f9fafb; margin-bottom: 4px; }
     .subtitle { color: #6b7280; font-size: 13px; margin-bottom: 28px; }
+    .subtitle a { color: #3b82f6; text-decoration: none; }
+    .subtitle a:hover { text-decoration: underline; }
     .card { background: #1a1d27; border: 1px solid #2d3148; border-radius: 12px; overflow: hidden; margin-bottom: 24px; }
     .card-header { padding: 14px 16px; border-bottom: 1px solid #2d3148; font-size: 12px; font-weight: 600; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; }
     table { width: 100%; border-collapse: collapse; }
     tr:not(:last-child) td { border-bottom: 1px solid #1f2335; }
+    .table-head { background: #13151f; }
     .models { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
     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; }
+    .model-id { color: #93c5fd; }
     .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; }
@@ -206,17 +443,31 @@ export function renderStatusPage(opts: StatusTemplateOptions): string {
     .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; }
+    .empty-state { padding: 24px 16px; color: #4b5563; text-align: center; font-style: italic; font-size: 13px; }
+    .prompt-preview { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #9ca3af; font-family: monospace; font-size: 12px; }
+    .badge { display: inline-block; border-radius: 6px; padding: 2px 8px; font-size: 11px; font-weight: 600; border: 1px solid transparent; }
+    .badge-ok { background: #22c55e22; color: #22c55e; border-color: #22c55e44; }
+    .badge-warn { background: #f59e0b22; color: #f59e0b; border-color: #f59e0b44; }
+    .badge-error { background: #ef444422; color: #ef4444; border-color: #ef444444; }
+    .badge-active { background: #3b82f622; color: #3b82f6; border-color: #3b82f644; }
+    .pulse-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; animation: pulse 1.5s ease-in-out infinite; }
+    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
+    .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+    @media (max-width: 768px) {
+      .summary-grid { grid-template-columns: repeat(2, 1fr); }
+      .models, .two-col { grid-template-columns: 1fr; }
+    }
   </style>
 </head>
 <body>
   <h1>CLI Bridge</h1>
-  <p class="subtitle">v${version} &nbsp;&middot;&nbsp; Port ${port} &nbsp;&middot;&nbsp; Auto-refreshes every 30s</p>
+  <p class="subtitle">v${version} &middot; Port ${port} &middot; Auto-refreshes every 10s &middot; <a href="/status">\u21bb Refresh</a></p>
 
   <div class="card">
     <div class="card-header">Web Session Providers</div>
     <table>
       <thead>
-        <tr style="background:#13151f">
+        <tr class="table-head">
           <th style="padding:10px 16px;text-align:left;font-size:12px;color:#4b5563;font-weight:600">Provider</th>
           <th style="padding:10px 16px;text-align:left;font-size:12px;color:#4b5563;font-weight:600">Status</th>
           <th style="padding:10px 16px;text-align:left;font-size:12px;color:#4b5563;font-weight:600">Session</th>
@@ -229,6 +480,17 @@ export function renderStatusPage(opts: StatusTemplateOptions): string {
 
   ${metricsHtml}
 
+  ${activeHtml}
+
+  ${recentHtml}
+
+  <div class="two-col">
+    <div>${fallbackHtml}</div>
+    <div>${sessionsHtml}</div>
+  </div>
+
+  ${timeoutHtml}
+
   <div class="models">
     <div class="card">
       <div class="card-header">CLI Models (${cliModels.length})</div>
@@ -246,7 +508,7 @@ export function renderStatusPage(opts: StatusTemplateOptions): string {
     </div>
   </div>
 
-  <p class="footer">openclaw-cli-bridge-elvatis v${version} &nbsp;&middot;&nbsp; <a href="/v1/models" style="color:#4b5563">/v1/models</a> &nbsp;&middot;&nbsp; <a href="/health" style="color:#4b5563">/health</a> &nbsp;&middot;&nbsp; <a href="/healthz" style="color:#4b5563">/healthz</a></p>
+  <p class="footer">openclaw-cli-bridge-elvatis v${version} &middot; <a href="/v1/models" style="color:#4b5563">/v1/models</a> &middot; <a href="/health" style="color:#4b5563">/health</a> &middot; <a href="/healthz" style="color:#4b5563">/healthz</a></p>
 </body>
 </html>`;
 }