@elvatis_com/openclaw-cli-bridge-elvatis 2.10.0 → 3.0.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.0`
+**Current version:** `3.0.0`
 
 ---
 
@@ -406,6 +406,20 @@ npm run ci          # lint + typecheck + test
 
 ## Changelog
 
+### 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
+- **feat:** per-model spawn logging with prompt size for debugging
+
 ### v2.10.0
 - **fix:** cap effective timeout at 580s (under gateway's 600s `idleTimeoutSeconds`) so bridge fallback fires BEFORE gateway kills the request — eliminates the race condition where both compete to handle the timeout
 - **fix:** reduce Sonnet base timeout 420s→300s, Opus 420s→360s — ensures fallback triggers faster for stuck CLI sessions

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.0
+**Version:** 3.0.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.0",
+  "version": "3.0.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.0",
+  "version": "3.0.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,12 +562,15 @@ 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();
+  debugLog("CLAUDE", `spawn ${model}`, { promptLen: effectivePrompt.length, promptKB: Math.round(effectivePrompt.length / 1024), cwd, timeoutMs: Math.round(timeoutMs / 1000) });
   const result = await runCli("claude", args, effectivePrompt, timeoutMs, { cwd, log: opts?.log });
 
   // On 401: attempt one token refresh + retry before giving up.
@@ -640,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 = 120_000; // 2 min of silence → kill
+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;
@@ -71,6 +71,13 @@ export const MAX_MESSAGES_HEAVY_TOOLS = 12;
 /** Tool count threshold that triggers reduced message limit. */
 export const TOOL_HEAVY_THRESHOLD = 10;
 
+/**
+ * Tool count threshold that triggers smart routing to a faster model.
+ * When Sonnet receives a request with this many tools, route to Haiku instead.
+ * Haiku handles tool calls in ~11s vs Sonnet's 80-120s (and Sonnet hangs intermittently).
+ */
+export const TOOL_ROUTING_THRESHOLD = 8;
+
 /** Max characters per message content before truncation. */
 export const MAX_MSG_CHARS = 4_000;
 

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).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";
@@ -32,8 +32,9 @@ import {
   BITNET_MAX_MESSAGES,
   BITNET_SYSTEM_PROMPT,
   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 ─────────────────────────────────────────────────
 
@@ -315,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);
@@ -790,6 +843,13 @@ async function handleRequest(
     // ── CLI runner routing (Gemini / Claude Code / Codex) ──────────────────────
     let result: CliToolResult;
     let usedModel = model;
+
+    // ── 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 };
 
     // ── Provider session: ensure a persistent session for this model ────────
@@ -843,12 +903,12 @@ async function handleRequest(
 
     const cliStart = Date.now();
     try {
-      result = await routeToCliRunner(model, cleanMessages, effectiveTimeout, routeOpts);
+      result = await routeToCliRunner(usedModel, cleanMessages, effectiveTimeout, routeOpts);
       const latencyMs = Date.now() - cliStart;
       const estCompletionTokens = estimateTokens(result.content ?? "");
-      metrics.recordRequest(model, latencyMs, true, estPromptTokens, estCompletionTokens, promptPreview);
+      metrics.recordRequest(usedModel, latencyMs, true, estPromptTokens, estCompletionTokens, promptPreview);
       providerSessions.recordRun(session.id, false);
-      debugLog("OK", `${model} completed in ${(latencyMs / 1000).toFixed(1)}s`, { toolCalls: result.tool_calls?.length ?? 0, contentLen: result.content?.length ?? 0 });
+      debugLog("OK", `${usedModel} completed in ${(latencyMs / 1000).toFixed(1)}s`, { toolCalls: result.tool_calls?.length ?? 0, contentLen: result.content?.length ?? 0 });
     } catch (err) {
       const primaryDuration = Date.now() - cliStart;
       const msg = (err as Error).message;

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,209 @@ 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(); });
+      lines.forEach(function(line) {
+        logOutput.innerHTML += colorLogLine(line.replace(/</g, '&lt;').replace(/>/g, '&gt;')) + '\\n';
+        logLineCount++;
+      });
+      // Trim old lines
+      while (logLineCount > MAX_LOG_LINES) {
+        var idx = logOutput.innerHTML.indexOf('\\n');
+        if (idx === -1) break;
+        logOutput.innerHTML = logOutput.innerHTML.slice(idx + 1);
+        logLineCount--;
+      }
+      if (autoScroll) logOutput.scrollTop = logOutput.scrollHeight;
+    }
 
-  ${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>`;
 }