@elvatis_com/openclaw-cli-bridge-elvatis 2.10.1 → 3.1.0

package/CLAUDE.md

@@ -0,0 +1,113 @@
+# OpenClaw CLI Bridge
+
+## Project Overview
+
+OpenClaw plugin that bridges AI CLIs (Claude, Gemini, Codex, Grok, ChatGPT) as model providers via a local OpenAI-compatible HTTP proxy on `127.0.0.1:31337`. The gateway routes `vllm/` model requests here; the bridge spawns CLI subprocesses and translates between OpenAI protocol and CLI text I/O.
+
+## Architecture
+
+```
+OpenClaw Gateway ──(HTTP)──> proxy-server.ts ──(spawn)──> claude/gemini/codex CLI
+                   :31337      │
+                               ├── cli-runner.ts      (subprocess spawn, stdin prompt, timeout, stale-output detection)
+                               ├── tool-protocol.ts   (tool schema injection, JSON response parsing, tool_calls rescue)
+                               ├── config.ts          (all timeouts, thresholds, paths — single source of truth)
+                               ├── debug-log.ts       (file-based log: ~/.openclaw/cli-bridge/debug.log)
+                               ├── metrics.ts         (request metrics, persisted to ~/.openclaw/cli-bridge/metrics.json)
+                               ├── provider-sessions.ts (persistent session registry per model)
+                               ├── status-template.ts (HTML dashboard at GET /status)
+                               ├── session-manager.ts (long-running session spawn/poll/kill)
+                               ├── *-browser.ts       (Playwright web-session providers: Grok, Gemini, Claude, ChatGPT)
+                               └── gemini-api-runner.ts (native Gemini API via @google/genai SDK)
+```
+
+## Key Design Decisions
+
+- **Prompt via stdin, never CLI args** — avoids E2BIG on large sessions
+- **Tool calls via text injection** — CLI tools don't support native tool_use, so tool schemas are injected into the prompt text and responses are parsed for JSON
+- **JSON reminder sandwich** — tool instructions appear at start AND end of prompt; models (especially Haiku) forget format instructions after long conversations
+- **Stale-output detection** — if a CLI subprocess produces zero stdout for 30s, SIGTERM early instead of waiting full timeout. Claude Sonnet intermittently hangs silently on large tool prompts (API-side issue, not RAM — confirmed 28GB free, zero swap)
+- **Smart fallback** — Sonnet tries first (better tool selection), 30s stale timeout kills it fast, Haiku takes over (~10s, reliable but picks wrong tools sometimes)
+- **Compact tool schema** — when >8 tools, only send name+params (skip descriptions/full JSON schema), cuts prompt ~60%
+- **Exit 143 = our SIGTERM** — not OOM, not crash. The bridge's timeout/stale-output detector sends SIGTERM, Claude CLI exits 143
+
+## Build & Test
+
+```bash
+npm run build    # tsc — always has 5 pre-existing errors (openclaw/plugin-sdk not found at compile time, only at runtime). Dist output is still generated correctly.
+npx vitest run   # 278+ tests across 19 files. All must pass.
+```
+
+## Deploy Workflow
+
+The gateway loads plugins from `~/.openclaw/extensions/`, NOT from this workspace:
+
+```bash
+npm run build
+rsync -a --exclude node_modules --exclude .git ./ ~/.openclaw/extensions/openclaw-cli-bridge-elvatis/
+openclaw gateway restart
+```
+
+## Version Bump Checklist
+
+Bump version string in 4 files before every release:
+1. `package.json`
+2. `openclaw.plugin.json`
+3. `README.md` (line 5: "Current version")
+4. `SKILL.md` (last line: "Version:")
+
+Then: `git commit && git push && gh release create vX.Y.Z`
+
+## Config (src/config.ts)
+
+All magic numbers live here. Key values:
+
+| Constant | Value | Purpose |
+|----------|-------|---------|
+| `MAX_EFFECTIVE_TIMEOUT_MS` | 580s | Must stay UNDER gateway's `idleTimeoutSeconds` (600s) |
+| `STALE_OUTPUT_TIMEOUT_MS` | 30s | Kill silent CLI processes fast |
+| `TOOL_HEAVY_THRESHOLD` | 10 | Reduce MAX_MESSAGES from 20 to 12 when tools exceed this |
+| `COMPACT_TOOL_THRESHOLD` | 8 | Switch to compact tool schema (name+params only) |
+| `TOOL_ROUTING_THRESHOLD` | 8 | (in proxy-server) Was used for Haiku routing, now Sonnet-first with fast fallback |
+
+## Tool Protocol (src/tool-protocol.ts)
+
+Models receive tool schemas as text and must respond with:
+- `{"tool_calls":[{"name":"...","arguments":{...}}]}` — to call a tool
+- `{"content":"..."}` — to respond with text
+
+Parser tries 5 strategies: Claude JSON wrapper, direct JSON, code blocks, embedded JSON, rescue from content string. Debug logging on every path.
+
+## Known Issues
+
+- **Sonnet intermittent hangs** — `claude -p` with Sonnet goes completely silent (~50% of the time) on large tool prompts (20KB+). First call often works, subsequent calls hang. NOT RAM-related. Likely API-side rate limiting or request dedup. Workaround: 30s stale-output detection + Haiku fallback.
+- **Haiku empty responses** — occasionally returns zero stdout (len:0). Cause unclear. The JSON reminder at prompt end helps but doesn't fully solve it.
+- **Pre-existing tsc errors** — 5 errors about `openclaw/plugin-sdk` module not found. These are expected — the SDK is injected at runtime by the gateway. Dist output is still generated.
+
+## Testing
+
+```bash
+npx vitest run                    # full suite (278+ tests)
+npx vitest run test/config.test.ts  # just config
+npx vitest run test/proxy-e2e.test.ts  # proxy integration
+```
+
+Tests that mock `config.js` must use `importOriginal` spread pattern — the mock must include all exports since `debug-log.ts` and `cli-runner.ts` import from config at module level.
+
+## Debug
+
+```bash
+tail -f ~/.openclaw/cli-bridge/debug.log     # real-time request lifecycle
+curl http://127.0.0.1:31337/status           # dashboard (auto-refresh 10s)
+cat ~/.openclaw/cli-bridge/metrics.json      # persisted metrics
+cat ~/.openclaw/cli-bridge/sessions.json     # provider session state
+```
+
+## Roadmap (v3.0)
+
+- [ ] Dashboard v2: sidebar navigation, live log viewer, model config editor, routing visualization
+- [ ] User-configurable routing engine via dashboard UI
+- [ ] Multi-model fallback chains: Claude → Gemini → Codex → Haiku
+- [ ] Per-tool routing: write/exec → fast model, search/analyze → smart model
+- [ ] Model health scoring: track success rates, auto-demote unreliable models
+- [ ] Session resume: use `claude --resume` for conversation continuity instead of fresh `-p` each time

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.10.1`
+**Current version:** `3.1.0`
 
 ---
 
@@ -406,6 +406,21 @@ npm run ci          # lint + typecheck + test
 
 ## Changelog
 
+### v3.1.0
+- **feat:** cross-provider fallback chains — Sonnet → Haiku → Gemini Flash → Codex (was single-model fallback only)
+- **feat:** fallback chain loop — tries each model in order until one succeeds, logs each attempt
+- **fix:** live logs newest-on-top — latest entries now appear at the top of the log viewer
+- **feat:** SSE fallback notifications for each chain attempt so user sees what's happening
+
+### v3.0.0
+- **feat:** dashboard v2 — sidebar navigation with 9 sections (Overview, Providers, Active, Requests, Fallbacks, Sessions, Live Logs, Timeouts, Models)
+- **feat:** live log viewer — SSE-powered real-time log streaming with color-coded categories, auto-scroll, pause/resume, 500-line client buffer
+- **feat:** AJAX polling — replaces full-page meta-refresh with incremental section updates every 10s (preserves scroll position and active section)
+- **feat:** `/api/dashboard-data` endpoint — returns pre-rendered HTML sections as JSON for client-side updates
+- **feat:** `/api/logs/stream` SSE endpoint — streams debug.log in real-time with initial tail of last 100 lines
+- **feat:** mobile-responsive sidebar with hamburger toggle
+- **feat:** CLAUDE.md added with full project documentation
+
 ### v2.10.1
 - **feat:** smart tool-routing — tool-heavy requests (>8 tools) auto-route to Haiku instead of Sonnet. Haiku handles tool calls in ~11s vs Sonnet's 80-120s (with intermittent hangs). Sonnet is preserved for reasoning/text responses.
 - **fix:** reduce stale-output timeout 120s→60s — faster fallback when Sonnet goes silent

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.10.1
+**Version:** 3.1.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.10.1",
+  "version": "3.1.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.10.1",
+  "version": "3.1.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/cli-runner.ts

@@ -508,9 +508,11 @@ export async function runGemini(
   const args = ["-m", model, "-p", "", "--approval-mode", "yolo"];
   const cwd = workdir ?? tmpdir();
 
-  // When tools are present, prepend tool instructions to prompt
+  // When tools are present, sandwich the conversation between tool instructions.
+  // The reminder at the end ensures models (especially Haiku) remember the JSON format
+  // after processing a long conversation history.
   const effectivePrompt = opts?.tools?.length
-    ? buildToolPromptBlock(opts.tools) + "\n\n" + prompt
+    ? buildToolPromptBlock(opts.tools) + "\n\n" + prompt + "\n\nREMINDER: You MUST respond with ONLY valid JSON — either {\"tool_calls\":[...]} or {\"content\":\"...\"}. Nothing else."
     : prompt;
 
   const result = await runCli("gemini", args, effectivePrompt, timeoutMs, { cwd, log: opts?.log });
@@ -560,9 +562,11 @@ export async function runClaude(
     "--model", model,
   ];
 
-  // When tools are present, prepend tool instructions to prompt
+  // When tools are present, sandwich the conversation between tool instructions.
+  // The reminder at the end ensures models (especially Haiku) remember the JSON format
+  // after processing a long conversation history.
   const effectivePrompt = opts?.tools?.length
-    ? buildToolPromptBlock(opts.tools) + "\n\n" + prompt
+    ? buildToolPromptBlock(opts.tools) + "\n\n" + prompt + "\n\nREMINDER: You MUST respond with ONLY valid JSON — either {\"tool_calls\":[...]} or {\"content\":\"...\"}. Nothing else."
     : prompt;
 
   const cwd = workdir ?? homedir();
@@ -641,9 +645,11 @@ export async function runCodex(
   // Codex requires a git repo in the working directory
   ensureGitRepo(cwd);
 
-  // When tools are present, prepend tool instructions to prompt
+  // When tools are present, sandwich the conversation between tool instructions.
+  // The reminder at the end ensures models (especially Haiku) remember the JSON format
+  // after processing a long conversation history.
   const effectivePrompt = opts?.tools?.length
-    ? buildToolPromptBlock(opts.tools) + "\n\n" + prompt
+    ? buildToolPromptBlock(opts.tools) + "\n\n" + prompt + "\n\nREMINDER: You MUST respond with ONLY valid JSON — either {\"tool_calls\":[...]} or {\"content\":\"...\"}. Nothing else."
     : prompt;
 
   const result = await runCli("codex", args, effectivePrompt, timeoutMs, { cwd, log: opts?.log });

package/src/config.ts

@@ -57,7 +57,7 @@ export const TIMEOUT_GRACE_MS = 5_000;
  * assume it's stuck and SIGTERM early. 0 = disabled.
  * Prevents waiting the full timeout when Claude CLI hangs silently.
  */
-export const STALE_OUTPUT_TIMEOUT_MS = 60_000; // 1 min of silence → kill (Sonnet goes silent when rate-limited)
+export const STALE_OUTPUT_TIMEOUT_MS = 30_000; // 30s of silence → kill. Sonnet either starts producing within 30s or it's hung.
 
 /** Max messages to include in the prompt sent to CLI subprocesses. */
 export const MAX_MESSAGES = 20;
@@ -138,15 +138,21 @@ export const DEFAULT_MODEL_TIMEOUTS: Record<string, number> = {
 // ──────────────────────────────────────────────────────────────────────────────
 
 /**
- * Default fallback chain: when a primary model fails (timeout, error),
- * retry once with the lighter variant.
+ * Default fallback chains: when a primary model fails (timeout, stale, error),
+ * try each fallback in order. Cross-provider chains ensure we use all available
+ * models instead of just falling back within one provider.
+ *
+ * Strategy: same-provider fast model first, then cross-provider alternatives.
  */
-export const DEFAULT_MODEL_FALLBACKS: Record<string, string> = {
-  "cli-gemini/gemini-2.5-pro":        "cli-gemini/gemini-2.5-flash",
-  "cli-gemini/gemini-3-pro-preview":  "cli-gemini/gemini-3-flash-preview",
-  "cli-claude/claude-opus-4-6":       "cli-claude/claude-sonnet-4-6",
-  "cli-claude/claude-sonnet-4-6":     "cli-claude/claude-haiku-4-5",
-  "gemini-api/gemini-2.5-pro":       "gemini-api/gemini-2.5-flash",
+export const DEFAULT_MODEL_FALLBACKS: Record<string, string[]> = {
+  "cli-claude/claude-opus-4-6":       ["cli-claude/claude-sonnet-4-6", "cli-gemini/gemini-2.5-pro", "cli-claude/claude-haiku-4-5"],
+  "cli-claude/claude-sonnet-4-6":     ["cli-claude/claude-haiku-4-5", "cli-gemini/gemini-2.5-flash", "openai-codex/gpt-5.3-codex"],
+  "cli-claude/claude-haiku-4-5":      ["cli-gemini/gemini-2.5-flash", "openai-codex/gpt-5.1-codex-mini"],
+  "cli-gemini/gemini-2.5-pro":        ["cli-gemini/gemini-2.5-flash", "cli-claude/claude-haiku-4-5"],
+  "cli-gemini/gemini-3-pro-preview":  ["cli-gemini/gemini-3-flash-preview", "cli-gemini/gemini-2.5-flash"],
+  "openai-codex/gpt-5.4":             ["openai-codex/gpt-5.3-codex", "cli-claude/claude-haiku-4-5"],
+  "openai-codex/gpt-5.3-codex":       ["openai-codex/gpt-5.1-codex-mini", "cli-gemini/gemini-2.5-flash"],
+  "gemini-api/gemini-2.5-pro":        ["gemini-api/gemini-2.5-flash"],
 };
 
 // ──────────────────────────────────────────────────────────────────────────────

package/src/debug-log.ts

@@ -8,7 +8,7 @@
  *   tail -f ~/.openclaw/cli-bridge/debug.log
  */
 
-import { appendFileSync, statSync, renameSync, mkdirSync } from "node:fs";
+import { appendFileSync, readFileSync, openSync, readSync, closeSync, statSync, renameSync, mkdirSync, watchFile, unwatchFile } from "node:fs";
 import { join } from "node:path";
 import { homedir } from "node:os";
 
@@ -53,3 +53,49 @@ export function debugLog(category: string, message: string, data?: Record<string
 
 /** Log path for display on status page / startup messages. */
 export const DEBUG_LOG_PATH = LOG_FILE;
+
+/**
+ * Read the last N lines from the log file.
+ * Returns null if the file doesn't exist.
+ */
+export function getLogTail(lines = 100): string | null {
+  try {
+    const content = readFileSync(LOG_FILE, "utf8");
+    const allLines = content.split("\n").filter(Boolean);
+    return allLines.slice(-lines).reverse().join("\n");
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Watch the log file for new content and call the callback for each new line.
+ * Returns an unwatch function to stop watching.
+ */
+export function watchLogFile(onLine: (line: string) => void): () => void {
+  let lastSize = 0;
+  try { lastSize = statSync(LOG_FILE).size; } catch { /* file doesn't exist yet */ }
+
+  const listener = () => {
+    try {
+      const stat = statSync(LOG_FILE);
+      if (stat.size <= lastSize) {
+        // File was rotated or truncated — reset
+        lastSize = 0;
+      }
+      if (stat.size > lastSize) {
+        const buf = Buffer.alloc(stat.size - lastSize);
+        const fd = openSync(LOG_FILE, "r");
+        readSync(fd, buf, 0, buf.length, lastSize);
+        closeSync(fd);
+        const newContent = buf.toString("utf8");
+        const lines = newContent.split("\n").filter(Boolean);
+        for (const line of lines) onLine(line);
+        lastSize = stat.size;
+      }
+    } catch { /* best effort */ }
+  };
+
+  watchFile(LOG_FILE, { interval: 1000 }, listener);
+  return () => { unwatchFile(LOG_FILE, listener); };
+}

package/src/proxy-server.ts

@@ -18,7 +18,7 @@ import { claudeComplete, claudeCompleteStream, type ChatMessage as ClaudeBrowser
 import { chatgptComplete, chatgptCompleteStream, type ChatMessage as ChatGPTBrowserChatMessage } from "./chatgpt-browser.js";
 import { geminiApiComplete, geminiApiCompleteStream, type GeminiApiResult, type ContentPart } from "./gemini-api-runner.js";
 import type { BrowserContext } from "playwright";
-import { renderStatusPage, type StatusProvider } from "./status-template.js";
+import { renderStatusPage, renderDashboardData, type StatusProvider } from "./status-template.js";
 import { sessionManager } from "./session-manager.js";
 import { metrics, estimateTokens } from "./metrics.js";
 import { providerSessions } from "./provider-sessions.js";
@@ -34,7 +34,7 @@ import {
   DEFAULT_MODEL_TIMEOUTS,
   TOOL_ROUTING_THRESHOLD,
 } from "./config.js";
-import { debugLog, DEBUG_LOG_PATH } from "./debug-log.js";
+import { debugLog, DEBUG_LOG_PATH, getLogTail, watchLogFile } from "./debug-log.js";
 
 // ── Active request tracking ─────────────────────────────────────────────────
 
@@ -117,7 +117,7 @@ export interface ProxyServerOptions {
    * When a CLI model fails (timeout, error), the request is retried once
    * with the fallback model. Example: "cli-gemini/gemini-2.5-pro" → "cli-gemini/gemini-2.5-flash"
    */
-  modelFallbacks?: Record<string, string>;
+  modelFallbacks?: Record<string, string | string[]>;
   /**
    * Per-model timeout overrides (ms). Keys are model IDs (without "vllm/" prefix).
    * Use this to give heavy models more time or limit fast models.
@@ -316,6 +316,58 @@ async function handleRequest(
     return;
   }
 
+  // Dashboard data API — returns pre-rendered HTML sections for AJAX polling
+  if (url === "/api/dashboard-data" && req.method === "GET") {
+    const expiry = opts.getExpiryInfo?.() ?? { grok: null, gemini: null, claude: null, chatgpt: null };
+    const version = opts.version ?? "?";
+    const providers: StatusProvider[] = [
+      { name: "Grok",     icon: "\uD835\uDD4F",  expiry: expiry.grok,    loginCmd: "/grok-login",    ctx: opts.getGrokContext?.() ?? null },
+      { name: "Gemini",   icon: "\u2726",  expiry: expiry.gemini,  loginCmd: "/gemini-login",  ctx: opts.getGeminiContext?.() ?? null },
+      { name: "Claude",   icon: "\u25C6",  expiry: expiry.claude,  loginCmd: "/claude-login",  ctx: opts.getClaudeContext?.() ?? null },
+      { name: "ChatGPT",  icon: "\u25C9",  expiry: expiry.chatgpt, loginCmd: "/chatgpt-login", ctx: opts.getChatGPTContext?.() ?? null },
+    ];
+    const sections = renderDashboardData({
+      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": "application/json", ...corsHeaders() });
+    res.end(JSON.stringify(sections));
+    return;
+  }
+
+  // Live log streaming via SSE
+  if (url === "/api/logs/stream" && req.method === "GET") {
+    res.writeHead(200, {
+      "Content-Type": "text/event-stream",
+      "Cache-Control": "no-cache",
+      Connection: "keep-alive",
+      ...corsHeaders(),
+    });
+    // Send initial tail
+    const tail = getLogTail(100);
+    if (tail) res.write(`data: ${tail.replace(/\n/g, "\ndata: ")}\n\n`);
+    // Watch for new lines
+    const unwatch = watchLogFile((line) => {
+      try { res.write(`data: ${line}\n\n`); } catch { /* client disconnected */ }
+    });
+    // Keepalive
+    const ka = setInterval(() => {
+      try { res.write(": keepalive\n\n"); } catch { /* client disconnected */ }
+    }, 15_000);
+    req.on("close", () => { unwatch(); clearInterval(ka); });
+    return;
+  }
+
   // Model list
   if (url === "/v1/models" && req.method === "GET") {
     const now = Math.floor(Date.now() / 1000);
@@ -792,16 +844,11 @@ async function handleRequest(
     let result: CliToolResult;
     let usedModel = model;
 
-    // ── Smart tool routing: heavy tool requests → Haiku for speed ──────────
-    // Sonnet hangs intermittently on large tool prompts (20KB+, 21 tools).
-    // Haiku handles tool calls in ~11s vs Sonnet's 80-120s (when it works).
-    // Route tool-heavy requests directly to Haiku, keep Sonnet for reasoning.
-    if (hasTools && tools!.length > TOOL_ROUTING_THRESHOLD && model === "cli-claude/claude-sonnet-4-6") {
-      const toolModel = "cli-claude/claude-haiku-4-5";
-      opts.log(`[cli-bridge] tool-routing: ${model} → ${toolModel} (${tools!.length} tools)`);
-      debugLog("TOOL-ROUTE", `${model} → ${toolModel}`, { tools: tools!.length, threshold: TOOL_ROUTING_THRESHOLD });
-      usedModel = toolModel;
-    }
+    // ── Smart tool routing: Sonnet first (better reasoning), fast fallback to Haiku ──
+    // Sonnet picks the right tools but intermittently hangs on large prompts.
+    // Strategy: let Sonnet try first — if it responds, great (better tool selection).
+    // The stale-output detector (60s) kills it fast if it hangs, then fallback to Haiku.
+    // This preserves Sonnet's intelligence for tool selection while keeping Haiku as safety net.
 
     const routeOpts = { workdir, tools: hasTools ? tools : undefined, mediaFiles: mediaFiles.length ? mediaFiles : undefined, log: opts.log };
 
@@ -870,36 +917,55 @@ async function handleRequest(
       debugLog("FAIL", `${model} failed after ${(primaryDuration / 1000).toFixed(1)}s`, { isTimeout, error: msg.slice(0, 200) });
       // Record the run (with timeout flag) — session is preserved, not deleted
       providerSessions.recordRun(session.id, isTimeout);
-      const fallbackModel = opts.modelFallbacks?.[model];
-      if (fallbackModel) {
+      // ── Multi-model fallback chain: try each fallback in order ──────────
+      // Chains cross providers: Sonnet → Haiku → Gemini Flash → Codex
+      const rawFallbacks = opts.modelFallbacks?.[model];
+      const fallbackChain: string[] = Array.isArray(rawFallbacks) ? rawFallbacks
+        : typeof rawFallbacks === "string" ? [rawFallbacks]
+        : [];
+
+      if (fallbackChain.length > 0) {
         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}`);
-        debugLog("FALLBACK", `${model} → ${fallbackModel}`, { reason: isTimeout ? "timeout" : "error", primaryDuration: Math.round(primaryDuration / 1000) });
-        // Notify the user via SSE that we're retrying with a different model
-        if (sseHeadersSent) {
-          res.write(`: fallback — ${model} ${isTimeout ? "timed out" : "failed"} after ${Math.round(primaryDuration / 1000)}s, retrying with ${fallbackModel}\n\n`);
+        opts.warn(`[cli-bridge] ${model} failed (${reason}), trying fallback chain: ${fallbackChain.join(" → ")}`);
+
+        let chainSuccess = false;
+        for (const fallbackModel of fallbackChain) {
+          debugLog("FALLBACK", `${model} → ${fallbackModel}`, { reason: isTimeout ? "timeout" : "error", primaryDuration: Math.round(primaryDuration / 1000), chain: fallbackChain });
+          if (sseHeadersSent) {
+            res.write(`: fallback — trying ${fallbackModel}\n\n`);
+          }
+          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, promptPreview);
+            metrics.recordFallback(model, fallbackModel, isTimeout ? "timeout" : "error", primaryDuration, true);
+            usedModel = fallbackModel;
+            debugLog("FALLBACK-OK", `${fallbackModel} succeeded in ${((Date.now() - fallbackStart) / 1000).toFixed(1)}s`, { toolCalls: result.tool_calls?.length ?? 0 });
+            opts.log(`[cli-bridge] fallback to ${fallbackModel} succeeded`);
+            chainSuccess = true;
+            break;
+          } catch (fallbackErr) {
+            const fbDuration = Date.now() - fallbackStart;
+            metrics.recordRequest(fallbackModel, fbDuration, false, estPromptTokens, undefined, promptPreview);
+            metrics.recordFallback(model, fallbackModel, isTimeout ? "timeout" : "error", primaryDuration, false);
+            const fallbackMsg = (fallbackErr as Error).message;
+            debugLog("FALLBACK-FAIL", `${fallbackModel} failed after ${(fbDuration / 1000).toFixed(1)}s`, { error: fallbackMsg.slice(0, 150) });
+            opts.warn(`[cli-bridge] fallback ${fallbackModel} failed: ${fallbackMsg.slice(0, 100)}`);
+            // Continue to next fallback in chain
+          }
         }
-        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, 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, 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 (!chainSuccess) {
+          const chainStr = fallbackChain.join(", ");
           if (sseHeadersSent) {
-            res.write(`data: ${JSON.stringify({ error: { message: `${model}: ${msg} | fallback ${fallbackModel}: ${fallbackMsg}`, type: "cli_error" } })}\n\n`);
+            res.write(`data: ${JSON.stringify({ error: { message: `${model} and all fallbacks (${chainStr}) failed`, 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" } }));
+            res.end(JSON.stringify({ error: { message: `${model} and all fallbacks (${chainStr}) failed`, type: "cli_error" } }));
           }
           return;
         }

package/src/status-template.ts

@@ -2,7 +2,7 @@
  * status-template.ts
  *
  * Generates the HTML dashboard for the /status endpoint.
- * Extracted from proxy-server.ts for maintainability.
+ * v3.0: Sidebar navigation, section-based layout, JS polling, live log viewer.
  */
 
 import type { BrowserContext } from "playwright";
@@ -39,11 +39,11 @@ export interface StatusTemplateOptions {
 }
 
 function statusBadge(p: StatusProvider): { label: string; color: string; dot: string } {
-  if (p.ctx !== null) return { label: "Connected", color: "#22c55e", dot: "🟢" };
-  if (!p.expiry) return { label: "Never logged in", color: "#6b7280", dot: "⚪" };
-  if (p.expiry.startsWith("⚠️ EXPIRED")) return { label: "Expired", color: "#ef4444", dot: "🔴" };
-  if (p.expiry.startsWith("🚨")) return { label: "Expiring soon", color: "#f59e0b", dot: "🟡" };
-  return { label: "Logged in", color: "#3b82f6", dot: "🔵" };
+  if (p.ctx !== null) return { label: "Connected", color: "#22c55e", dot: "\u{1F7E2}" };
+  if (!p.expiry) return { label: "Never logged in", color: "#6b7280", dot: "\u26AA" };
+  if (p.expiry.startsWith("\u26A0\uFE0F EXPIRED")) return { label: "Expired", color: "#ef4444", dot: "\u{1F534}" };
+  if (p.expiry.startsWith("\u{1F6A8}")) return { label: "Expiring soon", color: "#f59e0b", dot: "\u{1F7E1}" };
+  return { label: "Logged in", color: "#3b82f6", dot: "\u{1F535}" };
 }
 
 // ── Formatting helpers ──────────────────────────────────────────────────────
@@ -91,9 +91,46 @@ function truncateId(id: string): string {
   return id.slice(0, 8) + "\u2026" + id.slice(-8);
 }
 
-// ── Active Requests ────────────────────────────────────────────────────────
+// ── Section renderers (each returns an HTML fragment) ──────────────────────
 
-function renderActiveRequests(active: ActiveRequest[]): string {
+export function renderProviders(providers: StatusProvider[]): string {
+  const rows = providers.map(p => {
+    const badge = statusBadge(p);
+    const expiryText = p.expiry
+      ? p.expiry.replace(/[\u26A0\uFE0F\u{1F6A8}\u2705\u{1F550}]/gu, "").trim()
+      : `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>
+          <td style="padding:12px 16px">
+            <span style="background:${badge.color}22;color:${badge.color};border:1px solid ${badge.color}44;
+                         border-radius:6px;padding:3px 10px;font-size:13px;font-weight:600">
+              ${badge.dot} ${badge.label}
+            </span>
+          </td>
+          <td style="padding:12px 16px;color:#9ca3af;font-size:13px">${expiryText}</td>
+          <td style="padding:12px 16px;color:#6b7280;font-size:12px;font-family:monospace">${p.loginCmd}</td>
+        </tr>`;
+  }).join("");
+
+  return `
+  <div class="card">
+    <div class="card-header">Web Session Providers</div>
+    <table>
+      <thead>
+        <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>
+          <th style="padding:10px 16px;text-align:left;font-size:12px;color:#4b5563;font-weight:600">Login</th>
+        </tr>
+      </thead>
+      <tbody>${rows}</tbody>
+    </table>
+  </div>`;
+}
+
+export function renderActiveRequests(active: ActiveRequest[]): string {
   if (active.length === 0) {
     return `
     <div class="card">
@@ -135,9 +172,7 @@ function renderActiveRequests(active: ActiveRequest[]): string {
   </div>`;
 }
 
-// ── Recent Request Log ────────────────────────────────────────────────────���
-
-function renderRecentRequestLog(entries: RequestLogEntry[]): string {
+export function renderRecentRequestLog(entries: RequestLogEntry[]): string {
   if (entries.length === 0) {
     return `
     <div class="card">
@@ -180,9 +215,7 @@ function renderRecentRequestLog(entries: RequestLogEntry[]): string {
   </div>`;
 }
 
-// ── Fallback History ───────────────────────────────────────────────────────
-
-function renderFallbackHistory(events: FallbackEvent[]): string {
+export function renderFallbackHistory(events: FallbackEvent[]): string {
   if (events.length === 0) {
     return `
     <div class="card">
@@ -228,9 +261,7 @@ function renderFallbackHistory(events: FallbackEvent[]): string {
   </div>`;
 }
 
-// ── Provider Sessions ──────────────────────────────────────────────────────
-
-function renderProviderSessions(sessions: ProviderSession[]): string {
+export function renderProviderSessions(sessions: ProviderSession[]): string {
   if (sessions.length === 0) {
     return `
     <div class="card">
@@ -272,9 +303,7 @@ function renderProviderSessions(sessions: ProviderSession[]): string {
   </div>`;
 }
 
-// ── Timeout Configuration ──────────────────────────────────────────────────
-
-function renderTimeoutConfig(config: TimeoutConfigInfo): string {
+export function renderTimeoutConfig(config: TimeoutConfigInfo): string {
   const entries = Object.entries(config.defaults).sort(([a], [b]) => a.localeCompare(b));
   const rows = entries.map(([model, ms]) => {
     return `
@@ -303,13 +332,10 @@ function renderTimeoutConfig(config: TimeoutConfigInfo): string {
   </div>`;
 }
 
-// ── Metrics sections ────────────────────────────────────────────────────────
-
-function renderMetricsSection(m: MetricsSnapshot): string {
+export 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">
@@ -330,7 +356,6 @@ function renderMetricsSection(m: MetricsSnapshot): string {
     </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>`;
@@ -371,33 +396,15 @@ function renderMetricsSection(m: MetricsSnapshot): string {
   return summaryCards + modelTable;
 }
 
-export function renderStatusPage(opts: StatusTemplateOptions): string {
-  const { version, port, providers, models } = opts;
-
-  const rows = providers.map(p => {
-    const badge = statusBadge(p);
-    const expiryText = p.expiry
-      ? p.expiry.replace(/[⚠️🚨✅🕐]/gu, "").trim()
-      : `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>
-          <td style="padding:12px 16px">
-            <span style="background:${badge.color}22;color:${badge.color};border:1px solid ${badge.color}44;
-                         border-radius:6px;padding:3px 10px;font-size:13px;font-weight:600">
-              ${badge.dot} ${badge.label}
-            </span>
-          </td>
-          <td style="padding:12px 16px;color:#9ca3af;font-size:13px">${expiryText}</td>
-          <td style="padding:12px 16px;color:#6b7280;font-size:12px;font-family:monospace">${p.loginCmd}</td>
-        </tr>`;
-  }).join("");
-
+function renderModels(
+  models: StatusTemplateOptions["models"],
+  modelCommands?: Record<string, string>,
+): string {
   const cliModels = models.filter(m => m.id.startsWith("cli-"));
   const codexModels = models.filter(m => m.id.startsWith("openai-codex/"));
   const webModels = models.filter(m => m.id.startsWith("web-"));
   const localModels = models.filter(m => m.id.startsWith("local-"));
-  const cmds = opts.modelCommands ?? {};
+  const cmds = modelCommands ?? {};
   const modelList = (items: typeof models) =>
     items.map(m => {
       const cmd = cmds[m.id];
@@ -405,27 +412,114 @@ export function renderStatusPage(opts: StatusTemplateOptions): string {
       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 `
+  <div class="models">
+    <div class="card">
+      <div class="card-header">CLI Models (${cliModels.length})</div>
+      <ul>${modelList(cliModels)}</ul>
+      <div class="card-header">Codex Models (${codexModels.length})</div>
+      <ul>${modelList(codexModels)}</ul>
+    </div>
+    <div class="card">
+      <div class="card-header">Web Session Models (${webModels.length})</div>
+      <ul>${modelList(webModels)}</ul>
+    </div>
+    <div class="card">
+      <div class="card-header">Local Models (${localModels.length})</div>
+      <ul>${modelList(localModels)}</ul>
+    </div>
+  </div>`;
+}
+
+function renderLogsSection(): string {
+  return `
+  <div class="card" style="height:calc(100vh - 160px);display:flex;flex-direction:column">
+    <div class="card-header" style="flex-shrink:0;display:flex;justify-content:space-between;align-items:center">
+      <span>Live Logs <span id="log-status" class="badge badge-ok" style="margin-left:8px">connecting...</span></span>
+      <span>
+        <button onclick="toggleLogPause()" id="log-pause-btn" style="background:#1e2130;color:#9ca3af;border:1px solid #2d3148;border-radius:6px;padding:3px 10px;font-size:11px;cursor:pointer;margin-right:4px">Pause</button>
+        <button onclick="clearLogs()" style="background:#1e2130;color:#9ca3af;border:1px solid #2d3148;border-radius:6px;padding:3px 10px;font-size:11px;cursor:pointer">Clear</button>
+      </span>
+    </div>
+    <pre id="log-output" style="flex:1;overflow-y:auto;padding:12px 16px;font-size:12px;line-height:1.6;color:#9ca3af;margin:0;white-space:pre-wrap;word-break:break-all"></pre>
+  </div>`;
+}
+
+// ── Dashboard data (for AJAX polling) ──────────────────────────────────────
+
+export interface DashboardSections {
+  providers: string;
+  metrics: string;
+  active: string;
+  recent: string;
+  fallbacks: string;
+  sessions: string;
+  timeouts: string;
+  models: string;
+}
+
+export function renderDashboardData(opts: StatusTemplateOptions): DashboardSections {
+  return {
+    providers: renderProviders(opts.providers),
+    metrics: opts.metrics ? renderMetricsSection(opts.metrics) : "",
+    active: opts.activeRequests ? renderActiveRequests(opts.activeRequests) : "",
+    recent: opts.metrics ? renderRecentRequestLog(opts.metrics.recentRequests) : "",
+    fallbacks: opts.metrics ? renderFallbackHistory(opts.metrics.fallbackHistory) : "",
+    sessions: opts.providerSessionsList ? renderProviderSessions(opts.providerSessionsList) : "",
+    timeouts: opts.timeoutConfig ? renderTimeoutConfig(opts.timeoutConfig) : "",
+    models: renderModels(opts.models, opts.modelCommands),
+  };
+}
+
+// ── Navigation definitions ────────────────────────────────────────────────
+
+const NAV_ITEMS = [
+  { id: "overview", label: "Overview", icon: "\u25C9" },
+  { id: "providers", label: "Providers", icon: "\u26A1" },
+  { id: "active", label: "Active", icon: "\u25CF" },
+  { id: "recent", label: "Requests", icon: "\u2630" },
+  { id: "fallbacks", label: "Fallbacks", icon: "\u21C4" },
+  { id: "sessions", label: "Sessions", icon: "\u29BF" },
+  { id: "logs", label: "Live Logs", icon: "\u276F" },
+  { id: "timeouts", label: "Timeouts", icon: "\u23F1" },
+  { id: "models", label: "Models", icon: "\u2726" },
+] as const;
+
+// ── Full page render ──────────────────────────────────────────────────────
+
+export function renderStatusPage(opts: StatusTemplateOptions): string {
+  const { version, port } = opts;
+  const sections = renderDashboardData(opts);
+
+  const navHtml = NAV_ITEMS.map(n =>
+    `<a href="#${n.id}" class="nav-item" data-nav="${n.id}" onclick="showSection('${n.id}')">${n.icon} ${n.label}</a>`
+  ).join("\n      ");
 
   return `<!DOCTYPE html>
 <html lang="en">
 <head>
   <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="10">
+  <title>CLI Bridge Dashboard</title>
   <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; }
+    body { background: #0f1117; color: #e5e7eb; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; min-height: 100vh; display: grid; grid-template-columns: 200px 1fr; }
+
+    /* ── Sidebar ── */
+    .sidebar { background: #13151f; border-right: 1px solid #2d3148; padding: 20px 0; position: fixed; top: 0; left: 0; bottom: 0; width: 200px; overflow-y: auto; z-index: 10; }
+    .sidebar-title { padding: 0 16px 16px; font-size: 16px; font-weight: 700; color: #f9fafb; border-bottom: 1px solid #2d3148; margin-bottom: 8px; }
+    .sidebar-version { display: block; font-size: 11px; color: #6b7280; font-weight: 400; margin-top: 2px; }
+    .nav-item { display: flex; align-items: center; gap: 8px; padding: 8px 16px; color: #9ca3af; text-decoration: none; font-size: 13px; transition: all 0.15s; border-left: 3px solid transparent; }
+    .nav-item:hover { color: #e5e7eb; background: #1a1d27; }
+    .nav-item.active { color: #3b82f6; background: #1e2130; border-left-color: #3b82f6; font-weight: 600; }
+
+    /* ── Main content ── */
+    .main { grid-column: 2; padding: 24px; min-height: 100vh; }
+    .section { display: none; }
+    .section.active { display: block; }
+    .section-title { font-size: 18px; font-weight: 700; color: #f9fafb; margin-bottom: 16px; }
+
+    /* ── Cards & tables ── */
     .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; }
@@ -433,7 +527,6 @@ export function renderStatusPage(opts: StatusTemplateOptions): string {
     .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; }
@@ -453,62 +546,211 @@ export function renderStatusPage(opts: StatusTemplateOptions): string {
     .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; }
+    .footer { color: #374151; font-size: 12px; text-align: center; margin-top: 16px; }
+
+    /* ── Log colors ── */
+    .log-fail { color: #ef4444; }
+    .log-ok { color: #22c55e; }
+    .log-warn { color: #f59e0b; }
+    .log-kill { color: #f97316; }
+    .log-route { color: #8b5cf6; }
+    .log-dim { color: #6b7280; }
+
+    /* ── Mobile ── */
+    .mobile-toggle { display: none; position: fixed; top: 8px; left: 8px; z-index: 20; background: #1a1d27; border: 1px solid #2d3148; border-radius: 8px; padding: 6px 10px; color: #e5e7eb; font-size: 18px; cursor: pointer; }
     @media (max-width: 768px) {
+      body { grid-template-columns: 1fr; }
+      .sidebar { transform: translateX(-100%); transition: transform 0.2s; }
+      .sidebar.open { transform: translateX(0); }
+      .main { grid-column: 1; }
+      .mobile-toggle { display: block; }
       .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} &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 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>
-          <th style="padding:10px 16px;text-align:left;font-size:12px;color:#4b5563;font-weight:600">Login</th>
-        </tr>
-      </thead>
-      <tbody>${rows}</tbody>
-    </table>
-  </div>
+  <button class="mobile-toggle" onclick="document.querySelector('.sidebar').classList.toggle('open')">\u2630</button>
+
+  <nav class="sidebar">
+    <div class="sidebar-title">CLI Bridge<span class="sidebar-version">v${version} \u00b7 :${port}</span></div>
+    ${navHtml}
+    <div style="padding:16px;margin-top:auto">
+      <div style="font-size:11px;color:#374151">
+        <a href="/v1/models" style="color:#4b5563;text-decoration:none">/v1/models</a> \u00b7
+        <a href="/healthz" style="color:#4b5563;text-decoration:none">/healthz</a>
+      </div>
+    </div>
+  </nav>
+
+  <main class="main">
+    <section data-section="overview" class="section active">
+      <h2 class="section-title">Overview</h2>
+      <div id="s-metrics">${sections.metrics}</div>
+      <div id="s-active">${sections.active}</div>
+    </section>
+
+    <section data-section="providers" class="section">
+      <h2 class="section-title">Providers</h2>
+      <div id="s-providers">${sections.providers}</div>
+    </section>
+
+    <section data-section="active" class="section">
+      <h2 class="section-title">Active Requests</h2>
+      <div id="s-active2">${sections.active}</div>
+    </section>
+
+    <section data-section="recent" class="section">
+      <h2 class="section-title">Recent Requests</h2>
+      <div id="s-recent">${sections.recent}</div>
+    </section>
+
+    <section data-section="fallbacks" class="section">
+      <h2 class="section-title">Fallbacks &amp; Sessions</h2>
+      <div class="two-col">
+        <div id="s-fallbacks">${sections.fallbacks}</div>
+        <div id="s-sessions">${sections.sessions}</div>
+      </div>
+    </section>
+
+    <section data-section="sessions" class="section">
+      <h2 class="section-title">Provider Sessions</h2>
+      <div id="s-sessions2">${sections.sessions}</div>
+    </section>
+
+    <section data-section="logs" class="section">
+      <h2 class="section-title">Live Logs</h2>
+      ${renderLogsSection()}
+    </section>
+
+    <section data-section="timeouts" class="section">
+      <h2 class="section-title">Timeout Configuration</h2>
+      <div id="s-timeouts">${sections.timeouts}</div>
+    </section>
+
+    <section data-section="models" class="section">
+      <h2 class="section-title">Models</h2>
+      <div id="s-models">${sections.models}</div>
+    </section>
+
+    <p class="footer">openclaw-cli-bridge-elvatis v${version}</p>
+  </main>
+
+  <script>
+    // ── Section switching ──
+    function showSection(id) {
+      document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
+      document.querySelectorAll('.nav-item').forEach(n => n.classList.remove('active'));
+      const sec = document.querySelector('[data-section="' + id + '"]');
+      const nav = document.querySelector('[data-nav="' + id + '"]');
+      if (sec) sec.classList.add('active');
+      if (nav) nav.classList.add('active');
+      location.hash = id;
+      // Close mobile sidebar
+      document.querySelector('.sidebar').classList.remove('open');
+    }
 
-  ${metricsHtml}
+    // Init from hash
+    (function() {
+      var hash = location.hash.slice(1) || 'overview';
+      showSection(hash);
+    })();
+
+    // ── AJAX polling (replaces meta-refresh) ──
+    setInterval(function() {
+      fetch('/api/dashboard-data').then(function(r) { return r.json(); }).then(function(data) {
+        var map = {
+          's-metrics': 'metrics', 's-active': 'active', 's-active2': 'active',
+          's-providers': 'providers', 's-recent': 'recent',
+          's-fallbacks': 'fallbacks', 's-sessions': 'sessions', 's-sessions2': 'sessions',
+          's-timeouts': 'timeouts', 's-models': 'models'
+        };
+        for (var elId in map) {
+          var el = document.getElementById(elId);
+          if (el && data[map[elId]]) el.innerHTML = data[map[elId]];
+        }
+      }).catch(function() { /* silent fail on poll */ });
+    }, 10000);
+
+    // ── Live log viewer ──
+    var logOutput = document.getElementById('log-output');
+    var logStatus = document.getElementById('log-status');
+    var logPaused = false;
+    var logSource = null;
+    var logLineCount = 0;
+    var MAX_LOG_LINES = 500;
+    var autoScroll = true;
+
+    function colorLogLine(line) {
+      if (line.indexOf('[FAIL]') !== -1 || line.indexOf('[ERROR]') !== -1) return '<span class="log-fail">' + line + '</span>';
+      if (line.indexOf('[OK]') !== -1) return '<span class="log-ok">' + line + '</span>';
+      if (line.indexOf('[FALLBACK]') !== -1 || line.indexOf('[WARN]') !== -1) return '<span class="log-warn">' + line + '</span>';
+      if (line.indexOf('[KILL]') !== -1) return '<span class="log-kill">' + line + '</span>';
+      if (line.indexOf('[TOOL-ROUTE]') !== -1 || line.indexOf('[TASK-ROUTE]') !== -1) return '<span class="log-route">' + line + '</span>';
+      if (line.indexOf('[TIMEOUT]') !== -1 || line.indexOf('[CLAUDE]') !== -1) return '<span class="log-dim">' + line + '</span>';
+      return line;
+    }
 
-  ${activeHtml}
+    function appendLog(text) {
+      if (!logOutput) return;
+      var lines = text.split('\\n').filter(function(l) { return l.trim(); });
+      // Newest on top — prepend lines in reverse order
+      var html = '';
+      lines.forEach(function(line) {
+        html = colorLogLine(line.replace(/</g, '&lt;').replace(/>/g, '&gt;')) + '\\n' + html;
+        logLineCount++;
+      });
+      logOutput.innerHTML = html + logOutput.innerHTML;
+      // Trim old lines from bottom
+      while (logLineCount > MAX_LOG_LINES) {
+        var idx = logOutput.innerHTML.lastIndexOf('\\n');
+        if (idx === -1) break;
+        logOutput.innerHTML = logOutput.innerHTML.slice(0, idx);
+        logLineCount--;
+      }
+    }
 
-  ${recentHtml}
+    function connectLog() {
+      if (logSource) logSource.close();
+      logSource = new EventSource('/api/logs/stream');
+      logSource.onopen = function() {
+        if (logStatus) { logStatus.textContent = 'connected'; logStatus.className = 'badge badge-ok'; }
+      };
+      logSource.onmessage = function(e) { appendLog(e.data); };
+      logSource.onerror = function() {
+        if (logStatus) { logStatus.textContent = 'disconnected'; logStatus.className = 'badge badge-error'; }
+        // Reconnect after 3s
+        setTimeout(function() { if (!logPaused) connectLog(); }, 3000);
+      };
+    }
 
-  <div class="two-col">
-    <div>${fallbackHtml}</div>
-    <div>${sessionsHtml}</div>
-  </div>
+    function toggleLogPause() {
+      logPaused = !logPaused;
+      var btn = document.getElementById('log-pause-btn');
+      if (logPaused) {
+        if (logSource) logSource.close();
+        if (btn) btn.textContent = 'Resume';
+        if (logStatus) { logStatus.textContent = 'paused'; logStatus.className = 'badge badge-warn'; }
+      } else {
+        connectLog();
+        if (btn) btn.textContent = 'Pause';
+      }
+    }
 
-  ${timeoutHtml}
+    function clearLogs() {
+      if (logOutput) { logOutput.innerHTML = ''; logLineCount = 0; }
+    }
 
-  <div class="models">
-    <div class="card">
-      <div class="card-header">CLI Models (${cliModels.length})</div>
-      <ul>${modelList(cliModels)}</ul>
-      <div class="card-header">Codex Models (${codexModels.length})</div>
-      <ul>${modelList(codexModels)}</ul>
-    </div>
-    <div class="card">
-      <div class="card-header">Web Session Models (${webModels.length})</div>
-      <ul>${modelList(webModels)}</ul>
-    </div>
-    <div class="card">
-      <div class="card-header">Local Models (${localModels.length})</div>
-      <ul>${modelList(localModels)}</ul>
-    </div>
-  </div>
+    // Auto-scroll detection
+    if (logOutput) {
+      logOutput.addEventListener('scroll', function() {
+        autoScroll = (logOutput.scrollTop + logOutput.clientHeight >= logOutput.scrollHeight - 50);
+      });
+    }
 
-  <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>
+    // Start log connection
+    connectLog();
+  </script>
 </body>
 </html>`;
 }

package/test/config.test.ts

@@ -71,11 +71,15 @@ describe("config.ts exports", () => {
     expect(DEFAULT_MODEL_TIMEOUTS["gemini-api/gemini-2.5-flash"]).toBe(180_000);
   });
 
-  it("exports model fallback chains", () => {
-    expect(DEFAULT_MODEL_FALLBACKS["cli-claude/claude-sonnet-4-6"]).toBe("cli-claude/claude-haiku-4-5");
-    expect(DEFAULT_MODEL_FALLBACKS["cli-claude/claude-opus-4-6"]).toBe("cli-claude/claude-sonnet-4-6");
-    expect(DEFAULT_MODEL_FALLBACKS["cli-gemini/gemini-2.5-pro"]).toBe("cli-gemini/gemini-2.5-flash");
-    expect(DEFAULT_MODEL_FALLBACKS["gemini-api/gemini-2.5-pro"]).toBe("gemini-api/gemini-2.5-flash");
+  it("exports model fallback chains as arrays", () => {
+    expect(DEFAULT_MODEL_FALLBACKS["cli-claude/claude-sonnet-4-6"]).toEqual(["cli-claude/claude-haiku-4-5", "cli-gemini/gemini-2.5-flash", "openai-codex/gpt-5.3-codex"]);
+    expect(DEFAULT_MODEL_FALLBACKS["cli-claude/claude-opus-4-6"]).toContain("cli-claude/claude-sonnet-4-6");
+    expect(DEFAULT_MODEL_FALLBACKS["cli-gemini/gemini-2.5-pro"]).toContain("cli-gemini/gemini-2.5-flash");
+    expect(DEFAULT_MODEL_FALLBACKS["gemini-api/gemini-2.5-pro"]).toContain("gemini-api/gemini-2.5-flash");
+    // All values must be arrays
+    for (const chain of Object.values(DEFAULT_MODEL_FALLBACKS)) {
+      expect(Array.isArray(chain)).toBe(true);
+    }
   });
 
   it("exports path constants rooted in ~/.openclaw", () => {