From c1a982a1794d128f1f5ecf708f1d20ba583e0cae Mon Sep 17 00:00:00 2001
From: liujing <a362165265@qq.com>
Date: Mon, 20 Jul 2026 02:48:08 +0800
Subject: [PATCH] feat: add local workflow web console

---
 README.md                           |   13 +
 skills/agent-workflow-host/SKILL.md |    3 +
 src/cli.ts                          |   13 +-
 src/index.ts                        |    5 +
 src/workflow-args.test.ts           |   23 +
 src/workflow-args.ts                |   32 +-
 src/workflow-web-assets.ts          | 1445 +++++++++++++++++++++++++++
 src/workflow-web-parser.test.ts     |  186 ++++
 src/workflow-web-parser.ts          |  221 ++++
 src/workflow-web.test.ts            |  472 +++++++++
 src/workflow-web.ts                 |  661 ++++++++++++
 11 files changed, 3071 insertions(+), 3 deletions(-)
 create mode 100644 src/workflow-web-assets.ts
 create mode 100644 src/workflow-web-parser.test.ts
 create mode 100644 src/workflow-web-parser.ts
 create mode 100644 src/workflow-web.test.ts
 create mode 100644 src/workflow-web.ts

diff --git a/README.md b/README.md
index 0bd9457..76cc6ed 100644
--- a/README.md
+++ b/README.md
@@ -172,6 +172,19 @@ agent-workflow logs --run <run-id> --follow
 agent-workflow logs --run <run-id> --tail 200
 ```
 
+### `agent-workflow web`
+
+Start a local read-only web server to monitor agent executions, runs, cycles, and logs in real-time.
+
+```bash
+agent-workflow web [--port <n>]
+```
+
+- **`--port <n>`** — specify a custom port to listen on (default: `4317`).
+- **Security & Scope** — The server binds exclusively to the loopback interface (`127.0.0.1`) for local-only access. It refuses any external or remote listener configurations. Since executor logs can contain sensitive code, configuration details, or tokens/credentials, binding to `127.0.0.1` ensures that the console remains local.
+- **Observability Boundaries & Limits** — The console is completely read-only and provides no endpoints to modify or control workflows. It directly parses and displays the execution progress, cycles, timeline, and stdout/stderr output. It cannot recover or display private reasoning tokens/processes of underlying models that are not output to the console.
+- **Interaction with `logs --follow`** — The web server directly reads the persisted run files without taking any logs follow locks or interfering with the main executor loop, allowing you to use both the CLI `logs --follow` and the web console concurrently.
+
 ### `agent-workflow abort`
 
 Terminate an active workflow.
diff --git a/skills/agent-workflow-host/SKILL.md b/skills/agent-workflow-host/SKILL.md
index 77ce8c2..c8a7fb4 100644
--- a/skills/agent-workflow-host/SKILL.md
+++ b/skills/agent-workflow-host/SKILL.md
@@ -108,10 +108,13 @@ Executor has been running for ~2m. Current activity: Editing src/parser.ts (PID
 - Invite the user once after the Run starts to watch live output independently; do not repeat this command in every progress update:
   ```
   Watch live: agent-workflow logs --run <run-id> --follow
+  Or view Web console: agent-workflow web [--port <port>] (defaults to http://127.0.0.1:4317/)
   ```
 
 Start that `logs --follow` command at most once for a given Run in the current Codex thread. If it reports that a follower is already active, do not retry the same command; use `agent-workflow status --run <run-id> --json` for progress instead.
 
+The `agent-workflow web` command starts a local read-only web server that reads workflow state files without taking follower locks or interrupting the main execution loop. It only binds to the local loopback interface (127.0.0.1) for safety, as logs can contain sensitive code and environment details. The web interface displays status, execution events, cycle summaries, and live log updates. The console displays the CLI's actual stdout/stderr outputs and parsed structured activity; it cannot reconstruct unlogged private model reasoning.
+
 `timeoutSeconds` is a consecutive inactivity timeout. Observable executor output refreshes the deadline, so do not treat total runtime beyond that value as a timeout while activity continues.
 
 ### `awaiting_scope_resolution`
diff --git a/src/cli.ts b/src/cli.ts
index 2915b7e..b84c57e 100644
--- a/src/cli.ts
+++ b/src/cli.ts
@@ -24,6 +24,7 @@ import {
 } from "./workflow-engine.js";
 import { WorkflowConfigError } from "./workflow-config.js";
 import { WorkflowLockError } from "./workflow-state.js";
+import { startWorkflowWebServer } from "./workflow-web.js";
 
 async function main() {
   let args: WorkflowArgs;
@@ -91,12 +92,22 @@ async function main() {
         });
         break;
 
+      case "web":
+        await startWorkflowWebServer(args.port);
+        // Keep the process alive
+        await new Promise(() => {});
+        break;
+
       default: {
         const _exhaustive: never = args;
         throw new Error(`Unknown subcommand: ${(_exhaustive as any).sub}`);
       }
     }
-  } catch (err) {
+  } catch (err: any) {
+    if (err && err.code === "EADDRINUSE") {
+      process.stderr.write(`Error: Port is already in use.\n`);
+      process.exit(1);
+    }
     if (err instanceof WorkflowEngineError) {
       process.stderr.write(`Error: ${err.message}\n`);
       process.exit(err.exitCode);
diff --git a/src/index.ts b/src/index.ts
index e18cc1c..629c636 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -134,6 +134,7 @@ export type {
   WorkflowAbortArgs,
   WorkflowLogsArgs,
   WorkflowExtendArgs,
+  WorkflowWebArgs,
 } from "./workflow-args.js";
 
 export type {
@@ -202,3 +203,7 @@ export {
 export type {
   VcsProvider,
 } from "./vcs-provider.js";
+
+export {
+  startWorkflowWebServer,
+} from "./workflow-web.js";
diff --git a/src/workflow-args.test.ts b/src/workflow-args.test.ts
index afd7719..0d4da2c 100644
--- a/src/workflow-args.test.ts
+++ b/src/workflow-args.test.ts
@@ -40,3 +40,26 @@ describe("workflow retry-execute arguments", () => {
     });
   });
 });
+
+describe("workflow web arguments", () => {
+  it("accepts no options", () => {
+    expect(parseWorkflowArgs(["web"])).toEqual({
+      sub: "web",
+      port: undefined,
+    });
+  });
+
+  it("accepts a custom port", () => {
+    expect(parseWorkflowArgs(["web", "--port", "8080"])).toEqual({
+      sub: "web",
+      port: 8080,
+    });
+  });
+
+  it("throws on invalid port", () => {
+    expect(() => parseWorkflowArgs(["web", "--port", "abc"])).toThrow();
+    expect(() => parseWorkflowArgs(["web", "--port", "-1"])).toThrow();
+    expect(() => parseWorkflowArgs(["web", "--port", "0"])).toThrow();
+    expect(() => parseWorkflowArgs(["web", "--port", "70000"])).toThrow();
+  });
+});
diff --git a/src/workflow-args.ts b/src/workflow-args.ts
index 6557667..f7fb556 100644
--- a/src/workflow-args.ts
+++ b/src/workflow-args.ts
@@ -2,7 +2,7 @@
  * Argument parsing for agent-workflow subcommands.
  */
 
-export type WorkflowSubcommand = "start" | "review" | "retry-review" | "retry-execute" | "decide" | "status" | "abort" | "logs" | "extend";
+export type WorkflowSubcommand = "start" | "review" | "retry-review" | "retry-execute" | "decide" | "status" | "abort" | "logs" | "extend" | "web";
 
 export interface WorkflowStartArgs {
   sub: "start";
@@ -60,6 +60,11 @@ export interface WorkflowExtendArgs {
   additionalCycles: number;
 }
 
+export interface WorkflowWebArgs {
+  sub: "web";
+  port?: number;
+}
+
 export type WorkflowArgs =
   | WorkflowStartArgs
   | WorkflowReviewArgs
@@ -69,7 +74,8 @@ export type WorkflowArgs =
   | WorkflowStatusArgs
   | WorkflowAbortArgs
   | WorkflowLogsArgs
-  | WorkflowExtendArgs;
+  | WorkflowExtendArgs
+  | WorkflowWebArgs;
 
 export class WorkflowArgsError extends Error {
   constructor(message: string) {
@@ -104,6 +110,7 @@ Usage:
   agent-workflow status --run <run-id> [--json]
   agent-workflow abort  --run <run-id> --reason <text>
   agent-workflow logs   --run <run-id> [--follow] [--tail <lines>]
+  agent-workflow web    [--port <n>]
 
 Outputs AGENT_WORKFLOW_META_JSON: to stderr (set AGENT_WORKFLOW_META_STDOUT=1 for stdout).
 
@@ -122,6 +129,8 @@ Examples:
   agent-workflow status --run <id>
   agent-workflow status --run <id> --json
   agent-workflow abort  --run <id> --reason "changed requirements"
+  agent-workflow web
+  agent-workflow web --port 4317
 `.trimStart();
 
 export function workflowUsage(exitCode = 0): never {
@@ -331,6 +340,25 @@ export function parseWorkflowArgs(argv: string[]): WorkflowArgs {
       return { sub: "extend", runId, additionalCycles };
     }
 
+    case "web": {
+      let port: number | undefined;
+      while (rest.length > 0) {
+        const arg = rest.shift()!;
+        if (arg === "--port") {
+          const p = parsePositiveInt(arg, requireValue(arg, rest));
+          if (p < 1 || p > 65535) {
+            throw new WorkflowArgsError("--port must be between 1 and 65535");
+          }
+          port = p;
+        } else if (arg === "-h" || arg === "--help") {
+          workflowUsage(0);
+        } else {
+          throw new WorkflowArgsError(`Unknown option: ${arg}`);
+        }
+      }
+      return { sub: "web", port };
+    }
+
     default:
       throw new WorkflowArgsError(`Unknown workflow subcommand: ${sub}\n\n${WORKFLOW_USAGE}`);
   }
diff --git a/src/workflow-web-assets.ts b/src/workflow-web-assets.ts
new file mode 100644
index 0000000..0832332
--- /dev/null
+++ b/src/workflow-web-assets.ts
@@ -0,0 +1,1445 @@
+/**
+ * Embedded HTML, CSS, and JS assets for the local web console.
+ */
+
+export function getAssetsHtml(): string {
+  return `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>智能体工作流控制台</title>
+  <style>
+    :root {
+      --bg-dark: #0f111a;
+      --bg-card: #181b28;
+      --bg-sidebar: #131622;
+      --accent: #6366f1;
+      --accent-hover: #4f46e5;
+      --border: #24293f;
+      --text: #e2e8f0;
+      --text-muted: #94a3b8;
+
+      --status-executing: #3b82f6;
+      --status-review: #f59e0b;
+      --status-completed: #10b981;
+      --status-failed: #ef4444;
+      --status-aborted: #6b7280;
+      --status-needs-human: #f43f5e;
+      --status-scope: #ec4899;
+      --status-host: #8b5cf6;
+      --status-blocked: #ef4444;
+      --status-budget: #d97706;
+
+      --log-thinking: #d97706;
+      --log-tool: #8b5cf6;
+      --log-result: #10b981;
+      --log-error: #f43f5e;
+      --log-system: #06b6d4;
+      --log-progress: #3b82f6;
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    body {
+      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+      background-color: var(--bg-dark);
+      color: var(--text);
+      display: flex;
+      height: 100vh;
+      overflow: hidden;
+    }
+
+    /* Workbench Layout */
+    .app-container {
+      display: flex;
+      width: 100%;
+      height: 100%;
+    }
+
+    /* Sidebar */
+    .sidebar {
+      width: 320px;
+      background-color: var(--bg-sidebar);
+      border-right: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+    }
+
+    .sidebar-header {
+      padding: 20px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .sidebar-header h1 {
+      font-size: 1.25rem;
+      font-weight: 600;
+      background: linear-gradient(135deg, #a5b4fc, #6366f1);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+
+    .filters-section {
+      padding: 15px 20px;
+      border-bottom: 1px solid var(--border);
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    .search-input, .select-input {
+      width: 100%;
+      background-color: var(--bg-card);
+      border: 1px solid var(--border);
+      color: var(--text);
+      padding: 8px 12px;
+      border-radius: 6px;
+      outline: none;
+      font-family: inherit;
+      font-size: 0.9rem;
+      transition: border-color 0.2s;
+    }
+
+    .search-input:focus, .select-input:focus {
+      border-color: var(--accent);
+    }
+
+    .run-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 10px;
+    }
+
+    .run-item {
+      padding: 12px;
+      border-radius: 8px;
+      margin-bottom: 8px;
+      cursor: pointer;
+      background-color: transparent;
+      border: 1px solid transparent;
+      transition: all 0.2s;
+    }
+
+    .run-item:hover {
+      background-color: var(--bg-card);
+    }
+
+    .run-item.active {
+      background-color: var(--bg-card);
+      border-color: var(--accent);
+    }
+
+    .run-item-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 6px;
+    }
+
+    .run-id {
+      font-size: 0.85rem;
+      font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, monospace;
+      color: var(--text-muted);
+    }
+
+    .status-badge {
+      font-size: 0.7rem;
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .run-title {
+      font-size: 0.95rem;
+      font-weight: 500;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-bottom: 4px;
+    }
+
+    .run-meta {
+      display: flex;
+      gap: 10px;
+      font-size: 0.75rem;
+      color: var(--text-muted);
+    }
+
+    /* Main Area */
+    .main-content {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      background-color: var(--bg-dark);
+    }
+
+    .no-run-selected {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      flex: 1;
+      color: var(--text-muted);
+      gap: 15px;
+    }
+
+    .no-run-selected svg {
+      width: 48px;
+      height: 48px;
+      stroke: var(--text-muted);
+    }
+
+    .main-header {
+      padding: 20px;
+      border-bottom: 1px solid var(--border);
+      background-color: var(--bg-sidebar);
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+    }
+
+    .run-details-header h2 {
+      font-size: 1.5rem;
+      font-weight: 600;
+      margin-bottom: 5px;
+    }
+
+    .run-details-path {
+      font-size: 0.85rem;
+      color: var(--text-muted);
+      font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, monospace;
+    }
+
+    .tabs-bar {
+      display: flex;
+      background-color: var(--bg-sidebar);
+      border-bottom: 1px solid var(--border);
+      padding: 0 20px;
+    }
+
+    .tab-btn {
+      background: none;
+      border: none;
+      color: var(--text-muted);
+      padding: 12px 20px;
+      cursor: pointer;
+      font-size: 0.95rem;
+      font-family: inherit;
+      font-weight: 500;
+      border-bottom: 2px solid transparent;
+      transition: all 0.2s;
+    }
+
+    .tab-btn:hover {
+      color: var(--text);
+    }
+
+    .tab-btn.active {
+      color: var(--accent);
+      border-bottom-color: var(--accent);
+    }
+
+    .tab-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px;
+      display: none;
+    }
+
+    .tab-content.active {
+      display: block;
+    }
+
+    /* Summary Tab Grid */
+    .summary-grid {
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      gap: 20px;
+    }
+
+    .card {
+      background-color: var(--bg-card);
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      padding: 20px;
+      margin-bottom: 20px;
+    }
+
+    .card h3 {
+      font-size: 1.1rem;
+      font-weight: 600;
+      margin-bottom: 15px;
+      border-bottom: 1px solid var(--border);
+      padding-bottom: 8px;
+    }
+
+    .meta-list {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .meta-item {
+      display: flex;
+      justify-content: space-between;
+      font-size: 0.9rem;
+    }
+
+    .meta-label {
+      color: var(--text-muted);
+    }
+
+    .meta-value {
+      font-weight: 500;
+      word-break: break-all;
+    }
+
+    .audit-trail-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      font-size: 0.85rem;
+    }
+
+    .audit-trail-item {
+      display: flex;
+      flex-direction: column;
+      border-left: 2px solid var(--accent);
+      padding-left: 8px;
+      margin-bottom: 4px;
+    }
+
+    .audit-trail-time {
+      color: var(--text-muted);
+      font-size: 0.75rem;
+    }
+
+    /* Logs & Timeline Layout */
+    .logs-panel {
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+    }
+
+    .control-bar {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-bottom: 15px;
+      align-items: center;
+      background-color: var(--bg-card);
+      padding: 10px 15px;
+      border-radius: 8px;
+      border: 1px solid var(--border);
+    }
+
+    .control-group {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .control-label {
+      font-size: 0.85rem;
+      color: var(--text-muted);
+    }
+
+    .control-btn {
+      background-color: var(--bg-dark);
+      border: 1px solid var(--border);
+      color: var(--text);
+      padding: 6px 12px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 0.85rem;
+      font-family: inherit;
+      transition: all 0.2s;
+    }
+
+    .control-btn:hover {
+      border-color: var(--accent);
+    }
+
+    .control-btn.active {
+      background-color: var(--accent);
+      border-color: var(--accent);
+    }
+
+    .logs-view-wrapper {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      background-color: #0b0c15;
+      border: 1px solid var(--border);
+      border-radius: 8px;
+      overflow: hidden;
+      height: 500px;
+    }
+
+    .timeline-container, .raw-logs-container {
+      flex: 1;
+      overflow-y: auto;
+      padding: 15px;
+      font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, monospace;
+      font-size: 0.85rem;
+      line-height: 1.5;
+    }
+
+    .timeline-item {
+      display: flex;
+      margin-bottom: 8px;
+      border-left: 2px solid transparent;
+      padding-left: 10px;
+    }
+
+    .timeline-item.thinking { border-left-color: var(--log-thinking); }
+    .timeline-item.tool_call { border-left-color: var(--log-tool); }
+    .timeline-item.tool_result { border-left-color: var(--log-result); }
+    .timeline-item.result { border-left-color: var(--log-result); }
+    .timeline-item.error { border-left-color: var(--log-error); }
+    .timeline-item.system { border-left-color: var(--log-system); }
+    .timeline-item.progress { border-left-color: var(--log-progress); }
+
+    .item-badge {
+      font-size: 0.7rem;
+      font-weight: 600;
+      padding: 1px 5px;
+      border-radius: 3px;
+      margin-right: 10px;
+      text-transform: uppercase;
+      flex-shrink: 0;
+      height: fit-content;
+    }
+
+    .badge-thinking { background-color: rgba(217, 119, 6, 0.15); color: var(--log-thinking); }
+    .badge-tool_call { background-color: rgba(139, 92, 246, 0.15); color: var(--log-tool); }
+    .badge-tool_result { background-color: rgba(16, 185, 129, 0.15); color: var(--log-result); }
+    .badge-result { background-color: rgba(16, 185, 129, 0.15); color: var(--log-result); }
+    .badge-error { background-color: rgba(244, 63, 94, 0.15); color: var(--log-error); }
+    .badge-system { background-color: rgba(6, 182, 212, 0.15); color: var(--log-system); }
+    .badge-progress { background-color: rgba(59, 130, 246, 0.15); color: var(--log-progress); }
+    .badge-stats { background-color: rgba(245, 158, 11, 0.15); color: #f59e0b; }
+    .badge-text { background-color: rgba(255, 255, 255, 0.05); color: var(--text-muted); }
+
+    .item-content {
+      word-break: break-all;
+      white-space: pre-wrap;
+    }
+
+    .load-more-btn {
+      width: 100%;
+      background-color: var(--bg-card);
+      border: 1px solid var(--border);
+      color: var(--text);
+      padding: 10px;
+      text-align: center;
+      cursor: pointer;
+      font-size: 0.9rem;
+      font-family: inherit;
+      border-radius: 6px;
+      margin-bottom: 10px;
+      display: none;
+    }
+
+    .load-more-btn:hover {
+      border-color: var(--accent);
+      color: var(--text);
+    }
+
+    /* Scrollbars */
+    ::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+    ::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    ::-webkit-scrollbar-thumb {
+      background: var(--border);
+      border-radius: 3px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: var(--text-muted);
+    }
+
+    /* Real Responsive Layout */
+    @media (max-width: 768px) {
+      body {
+        flex-direction: column;
+        overflow: hidden;
+      }
+      .app-container {
+        flex-direction: column;
+        height: 100vh;
+      }
+      .sidebar {
+        width: 100%;
+        height: 35vh;
+        border-right: none;
+        border-bottom: 1px solid var(--border);
+      }
+      .main-content {
+        height: 65vh;
+        overflow-y: hidden;
+      }
+      .summary-grid {
+        grid-template-columns: 1fr;
+      }
+      .control-bar {
+        flex-direction: column;
+        align-items: stretch;
+      }
+      .control-group {
+        justify-content: space-between;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="app-container">
+    <!-- Sidebar -->
+    <div class="sidebar">
+      <div class="sidebar-header">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <rect x="3" y="3" width="18" height="18" rx="2" />
+          <path d="M9 3v18M15 3v18M3 9h18M3 15h18" />
+        </svg>
+        <h1>智能体执行监控</h1>
+      </div>
+      <div class="filters-section">
+        <input type="text" id="search-box" class="search-input" placeholder="搜索项目或运行记录...">
+        <select id="executor-filter" class="select-input">
+          <option value="">全部执行器</option>
+          <option value="claude">Claude Code</option>
+          <option value="reasonix">Reasonix</option>
+          <option value="agy">Agy</option>
+        </select>
+        <select id="status-filter" class="select-input">
+          <option value="">全部状态</option>
+          <option value="executing">执行中</option>
+          <option value="awaiting_review">等待审查</option>
+          <option value="awaiting_scope_resolution">等待范围处理</option>
+          <option value="awaiting_host">等待主机决定</option>
+          <option value="completed">已完成</option>
+          <option value="failed">失败</option>
+          <option value="aborted">已中止</option>
+          <option value="needs_human">需要人工处理</option>
+          <option value="blocked">已阻塞</option>
+          <option value="budget_exhausted">周期已耗尽</option>
+        </select>
+      </div>
+      <div class="run-list" id="runs-container">
+        <!-- Run items populated dynamically -->
+      </div>
+    </div>
+
+    <!-- Main Content -->
+    <div class="main-content" id="main-panel">
+      <div class="no-run-selected" id="no-run-selected-view">
+        <svg viewBox="0 0 24 24" fill="none" stroke-width="1.5">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M9 17.25v1.007a3 3 0 01-.879 2.122L7.5 21h9l-.621-.621A3 3 0 0115 18.257V17.25m6-12V15a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 15V5.25m18 0A2.25 2.25 0 0018.75 3H5.25A2.25 2.25 0 003 5.25m18 0V12a2.25 2.25 0 01-2.25 2.25H5.25A2.25 2.25 0 013 12V5.25" />
+        </svg>
+        <p>请从列表中选择运行记录查看执行详情</p>
+      </div>
+
+      <div style="display: none; flex-direction: column; height: 100%;" id="run-active-view">
+        <div class="main-header">
+          <div class="run-details-header">
+            <h2 id="view-run-id">run-id</h2>
+            <div class="run-details-path" id="view-repo-root">/path/to/repo</div>
+          </div>
+          <div>
+            <span class="status-badge" id="view-status-badge">执行中</span>
+          </div>
+        </div>
+
+        <div class="tabs-bar">
+          <button class="tab-btn active" data-tab="summary" onclick="switchTab('summary')">概要</button>
+          <button class="tab-btn" data-tab="logs" onclick="switchTab('logs')">时间线与日志</button>
+        </div>
+
+        <!-- Summary Tab -->
+        <div id="tab-summary" class="tab-content active">
+          <div class="summary-grid">
+            <div>
+              <div class="card">
+                <h3>工作流计划</h3>
+                <div style="margin-bottom: 15px;">
+                  <strong style="color: var(--text-muted); font-size: 0.85rem; text-transform: uppercase;">标题</strong>
+                  <div id="view-plan-title" style="font-size: 1.1rem; font-weight: 500; margin-top: 5px;">计划标题</div>
+                </div>
+                <div style="margin-bottom: 15px;">
+                  <strong style="color: var(--text-muted); font-size: 0.85rem; text-transform: uppercase;">验收标准</strong>
+                  <ul id="view-plan-ac" style="margin-top: 5px; padding-left: 20px; font-size: 0.95rem; line-height: 1.6;"></ul>
+                </div>
+                <div>
+                  <strong style="color: var(--text-muted); font-size: 0.85rem; text-transform: uppercase;">文件范围</strong>
+                  <ul id="view-plan-scope" style="margin-top: 5px; padding-left: 20px; font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, monospace; font-size: 0.85rem; line-height: 1.6;"></ul>
+                </div>
+              </div>
+
+              <div class="card">
+                <h3>验证命令</h3>
+                <div id="view-plan-commands" style="font-family: ui-monospace, SFMono-Regular, SF Mono, Menlo, Monaco, Consolas, monospace; font-size: 0.85rem; line-height: 1.6;"></div>
+              </div>
+            </div>
+
+            <div>
+              <div class="card">
+                <h3>执行详情</h3>
+                <div class="meta-list">
+                  <div class="meta-item">
+                    <span class="meta-label">执行器</span>
+                    <span class="meta-value" id="view-executor">claude</span>
+                  </div>
+                  <div class="meta-item">
+                    <span class="meta-label">版本控制</span>
+                    <span class="meta-value" id="view-vcs">git</span>
+                  </div>
+                  <div class="meta-item">
+                    <span class="meta-label">最大周期</span>
+                    <span class="meta-value" id="view-max-cycles">5</span>
+                  </div>
+                  <div class="meta-item">
+                    <span class="meta-label">当前周期</span>
+                    <span class="meta-value" id="view-current-cycle">1</span>
+                  </div>
+                  <div class="meta-item">
+                    <span class="meta-label">创建时间</span>
+                    <span class="meta-value" id="view-created-at">-</span>
+                  </div>
+                  <div class="meta-item">
+                    <span class="meta-label">更新时间</span>
+                    <span class="meta-value" id="view-updated-at">-</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="card">
+                <h3>工作流审计记录</h3>
+                <div id="view-audit-trail" class="audit-trail-list">
+                  <!-- Audit events populated dynamically -->
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Logs Tab -->
+        <div id="tab-logs" class="tab-content" style="height: 100%;">
+          <div class="logs-panel">
+            <div class="control-bar">
+              <div class="control-group">
+                <span class="control-label">周期：</span>
+                <select id="cycle-select" class="select-input" style="width: 80px;" onchange="onCycleChange()"></select>
+              </div>
+              <div class="control-group">
+                <span class="control-label">尝试：</span>
+                <select id="attempt-select" class="select-input" style="width: 80px;" onchange="onAttemptChange()"></select>
+              </div>
+              <div class="control-group" id="agy-file-group" style="display: none;">
+                <span class="control-label">日志文件：</span>
+                <select id="log-file-select" class="select-input" style="width: 140px;" onchange="onLogFileChange()">
+                  <option value="exec">标准输出/错误</option>
+                  <option value="agy">Agy 会话</option>
+                </select>
+              </div>
+              <div class="control-group">
+                <span class="control-label">视图：</span>
+                <button id="view-timeline-btn" class="control-btn active" onclick="switchLogView('timeline')">时间线</button>
+                <button id="view-raw-btn" class="control-btn" onclick="switchLogView('raw')">原始日志</button>
+              </div>
+              <div class="control-group">
+                <button id="filter-thinking-btn" class="control-btn active" onclick="toggleThinking()">隐藏思考</button>
+                <button id="filter-errors-btn" class="control-btn" onclick="toggleErrorsOnly()">仅看错误</button>
+              </div>
+              <div class="control-group" style="margin-left: auto;">
+                <button id="scroll-btn" class="control-btn active" onclick="toggleAutoScroll()">自动滚动：开启</button>
+              </div>
+            </div>
+
+            <div class="logs-view-wrapper">
+              <div id="timeline-view" class="timeline-container">
+                <div id="timeline-items-container"></div>
+                <button id="load-more-timeline-btn" class="load-more-btn" onclick="loadMoreTimeline()">加载更多时间线</button>
+              </div>
+              <div id="raw-view" class="raw-logs-container" style="display: none;">
+                <button id="load-more-raw-btn" class="load-more-btn" onclick="loadMoreRawLogs()">加载更多日志</button>
+                <pre id="raw-log-pre" style="white-space: pre-wrap; word-break: break-all;"></pre>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    let runs = [];
+    let activeRun = null;
+    let sseConn = null;
+
+    // Log state
+    let selectedCycle = 1;
+    let selectedAttempt = 0;
+    let selectedLogFile = 'exec'; // 'exec' | 'agy'
+    let currentLogView = 'timeline'; // 'timeline' | 'raw'
+    let hideThinking = true;
+    let errorsOnly = false;
+    let autoScroll = true;
+
+    // Chunk loading limits
+    const chunkLimit = 50000; // 50KB chunks
+
+    // Timeline pagination states
+    let timelineOffset = 0;
+    let timelineFullyLoaded = false;
+    let timelineEntries = [];
+    let timelineResidual = "";
+
+    // Raw log pagination states
+    let rawOffset = 0;
+    let rawLogFullyLoaded = false;
+    let rawResidual = "";
+
+    // Escape state-derived values
+    function escapeHtml(text) {
+      if (text === null || text === undefined) return '';
+      return String(text)
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+    }
+
+    // Fetch and populate the runs list
+    async function loadRuns() {
+      try {
+        const res = await fetch('/api/runs');
+        runs = await res.json();
+        renderRuns();
+      } catch (err) {
+        console.error('Failed to load runs:', err);
+      }
+    }
+
+    function renderRuns() {
+      const container = document.getElementById('runs-container');
+      const searchVal = document.getElementById('search-box').value.toLowerCase();
+      const execFilter = document.getElementById('executor-filter').value;
+      const statusFilter = document.getElementById('status-filter').value;
+
+      container.innerHTML = '';
+
+      const filtered = runs.filter(run => {
+        const matchesSearch = run.runId.toLowerCase().includes(searchVal) ||
+                              (run.repoRoot && run.repoRoot.toLowerCase().includes(searchVal)) ||
+                              (run.plan && run.plan.title && run.plan.title.toLowerCase().includes(searchVal));
+        const matchesExec = !execFilter || run.executor === execFilter;
+        const matchesStatus = !statusFilter || run.status === statusFilter;
+        return matchesSearch && matchesExec && matchesStatus;
+      });
+
+      filtered.forEach(run => {
+        const item = document.createElement('div');
+        item.className = 'run-item' + (activeRun && activeRun.runId === run.runId ? ' active' : '');
+        item.onclick = () => selectRun(run.runId);
+
+        const badgeColor = getStatusColor(run.status);
+        const title = (run.plan && run.plan.title) ? run.plan.title : '未命名计划';
+        const projName = run.repoRoot ? run.repoRoot.split('/').pop() : '未知项目';
+
+        item.innerHTML = \`
+          <div class="run-item-header">
+            <span class="run-id">\${escapeHtml(run.runId.slice(0, 16))}...</span>
+            <span class="status-badge" style="background-color: \${badgeColor}15; color: \${badgeColor}">\${escapeHtml(getStatusLabel(run.status))}</span>
+          </div>
+          <div class="run-title">\&nbsp;\${escapeHtml(title)}</div>
+          <div class="run-meta">
+            <span>\${escapeHtml(projName)}</span>
+            <span>•</span>
+            <span style="text-transform: capitalize;">\${escapeHtml(run.executor)}</span>
+          </div>
+        \`;
+        container.appendChild(item);
+      });
+    }
+
+    function getStatusColor(status) {
+      switch (status) {
+        case 'executing': return 'var(--status-executing)';
+        case 'awaiting_review': return 'var(--status-review)';
+        case 'awaiting_scope_resolution': return 'var(--status-scope)';
+        case 'awaiting_host': return 'var(--status-host)';
+        case 'completed': return 'var(--status-completed)';
+        case 'failed': return 'var(--status-failed)';
+        case 'aborted': return 'var(--status-aborted)';
+        case 'needs_human': return 'var(--status-needs-human)';
+        case 'blocked': return 'var(--status-blocked)';
+        case 'budget_exhausted': return 'var(--status-budget)';
+        default: return 'var(--text-muted)';
+      }
+    }
+
+    function getStatusLabel(status) {
+      const labels = {
+        executing: '执行中',
+        awaiting_review: '等待审查',
+        awaiting_scope_resolution: '等待范围处理',
+        awaiting_host: '等待主机决定',
+        completed: '已完成',
+        failed: '失败',
+        aborted: '已中止',
+        needs_human: '需要人工处理',
+        blocked: '已阻塞',
+        budget_exhausted: '周期已耗尽',
+      };
+      return labels[status] || status;
+    }
+
+    function getEventLabel(kind) {
+      const labels = {
+        workflow_started: '工作流已启动',
+        workflow_stopped: '工作流已停止',
+        workflow_aborted: '工作流已中止',
+        cycle_started: '周期已开始',
+        executor_started: '执行器已启动',
+        executor_completed: '执行器已完成',
+        executor_retried: '执行器已重试',
+        executor_session_reused: '已复用执行器会话',
+        executor_session_rebound: '已重新绑定执行器会话',
+        review_started: '审查已开始',
+        review_completed: '审查已完成',
+        review_retried: '审查已重试',
+        decision_received: '已收到主机决定',
+        scope_violation_detected: '检测到范围违规',
+        scope_resolution_started: '范围处理已开始',
+        budget_extended: '周期预算已扩展',
+      };
+      return labels[kind] || kind.replace(/_/g, ' ');
+    }
+
+    function getTimelineTypeLabel(type) {
+      const labels = {
+        thinking: '思考',
+        tool_call: '工具',
+        tool_result: '工具结果',
+        result: '结果',
+        error: '错误',
+        system: '系统',
+        progress: '进度',
+        stats: '统计',
+        text: '文本',
+        raw: '原始',
+      };
+      return labels[type] || type;
+    }
+
+    // Switch between details tabs
+    function switchTab(tab) {
+      document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.remove('active'));
+      document.querySelectorAll('.tab-content').forEach(content => content.classList.remove('active'));
+
+      const activeBtn = Array.from(document.querySelectorAll('.tab-btn')).find(btn => btn.dataset.tab === tab);
+      if (activeBtn) activeBtn.classList.add('active');
+
+      const contentDiv = document.getElementById('tab-' + tab);
+      if (contentDiv) contentDiv.classList.add('active');
+    }
+
+    // Switch log formats
+    function switchLogView(view) {
+      currentLogView = view;
+      document.getElementById('view-timeline-btn').className = 'control-btn' + (view === 'timeline' ? ' active' : '');
+      document.getElementById('view-raw-btn').className = 'control-btn' + (view === 'raw' ? ' active' : '');
+
+      if (view === 'timeline') {
+        document.getElementById('timeline-view').style.display = 'block';
+        document.getElementById('raw-view').style.display = 'none';
+      } else {
+        document.getElementById('timeline-view').style.display = 'none';
+        document.getElementById('raw-view').style.display = 'block';
+        resetRawLogs();
+      }
+    }
+
+    function toggleThinking() {
+      hideThinking = !hideThinking;
+      const btn = document.getElementById('filter-thinking-btn');
+      btn.className = 'control-btn' + (hideThinking ? ' active' : '');
+      renderTimeline();
+    }
+
+    function toggleErrorsOnly() {
+      errorsOnly = !errorsOnly;
+      const btn = document.getElementById('filter-errors-btn');
+      btn.className = 'control-btn' + (errorsOnly ? ' active' : '');
+      renderTimeline();
+    }
+
+    function toggleAutoScroll() {
+      autoScroll = !autoScroll;
+      const btn = document.getElementById('scroll-btn');
+      btn.className = 'control-btn' + (autoScroll ? ' active' : '');
+      btn.textContent = '自动滚动：' + (autoScroll ? '开启' : '关闭');
+      if (autoScroll) {
+        scrollToBottom();
+      }
+    }
+
+    function scrollToBottom() {
+      const timeline = document.getElementById('timeline-view');
+      const raw = document.getElementById('raw-view');
+      if (currentLogView === 'timeline') {
+        timeline.scrollTop = timeline.scrollHeight;
+      } else {
+        raw.scrollTop = raw.scrollHeight;
+      }
+    }
+
+    // Select and load run details
+    async function selectRun(runId) {
+      if (sseConn) {
+        sseConn.close();
+        sseConn = null;
+      }
+
+      try {
+        const res = await fetch('/api/runs/' + runId);
+        activeRun = await res.json();
+
+        document.getElementById('no-run-selected-view').style.display = 'none';
+        document.getElementById('run-active-view').style.display = 'flex';
+
+        renderRuns();
+
+        document.getElementById('view-run-id').textContent = activeRun.runId;
+        document.getElementById('view-repo-root').textContent = activeRun.repoRoot;
+
+        const badge = document.getElementById('view-status-badge');
+        badge.textContent = getStatusLabel(activeRun.status);
+        const color = getStatusColor(activeRun.status);
+        badge.style.backgroundColor = color + '15';
+        badge.style.color = color;
+
+        document.getElementById('view-plan-title').textContent = activeRun.plan.title || '未命名计划';
+
+        const acList = document.getElementById('view-plan-ac');
+        acList.innerHTML = '';
+        (activeRun.plan.acceptanceCriteria || []).forEach(ac => {
+          const li = document.createElement('li');
+          li.textContent = ac;
+          acList.appendChild(li);
+        });
+
+        const scopeList = document.getElementById('view-plan-scope');
+        scopeList.innerHTML = '';
+        (activeRun.plan.scope || []).forEach(file => {
+          const li = document.createElement('li');
+          li.textContent = file;
+          scopeList.appendChild(li);
+        });
+
+        const commandsDiv = document.getElementById('view-plan-commands');
+        commandsDiv.innerHTML = '';
+        (activeRun.plan.verificationCommands || []).forEach(cmd => {
+          const div = document.createElement('div');
+          div.style.marginBottom = '6px';
+          div.textContent = '$ ' + cmd.join(' ');
+          commandsDiv.appendChild(div);
+        });
+
+        document.getElementById('view-executor').textContent = activeRun.executor;
+        document.getElementById('view-vcs').textContent = activeRun.vcsKind || 'none';
+        document.getElementById('view-max-cycles').textContent = activeRun.maxCycles;
+        document.getElementById('view-current-cycle').textContent = activeRun.currentCycle;
+        document.getElementById('view-created-at').textContent = new Date(activeRun.createdAt).toLocaleString('zh-CN');
+        document.getElementById('view-updated-at').textContent = new Date(activeRun.updatedAt).toLocaleString('zh-CN');
+
+        selectedCycle = activeRun.currentCycle || 1;
+        selectedAttempt = 0;
+        selectedLogFile = 'exec';
+
+        populateCyclesDropdown();
+        onCycleOrAttemptUIChange();
+        loadWorkflowEvents();
+
+        if (activeRun.status === 'executing') {
+          setupSSE(runId);
+        }
+      } catch (err) {
+        console.error('Failed to load run details:', err);
+      }
+    }
+
+    async function loadWorkflowEvents() {
+      try {
+        const res = await fetch(\`/api/runs/\${activeRun.runId}/events\`);
+        const events = await res.json();
+        const container = document.getElementById('view-audit-trail');
+        container.innerHTML = '';
+
+        if (events.length === 0) {
+          container.innerHTML = '<div style="color: var(--text-muted);">暂无审计事件。</div>';
+          return;
+        }
+
+        events.forEach(evt => {
+          const div = document.createElement('div');
+          div.className = 'audit-trail-item';
+
+          let cycleSuffix = evt.cycleIndex ? \` [周期 \${evt.cycleIndex}]\` : '';
+          let dataStr = evt.data ? \` - \${JSON.stringify(evt.data)}\` : '';
+
+          div.innerHTML = \`
+            <strong style="text-transform: capitalize; color: var(--accent);">\${escapeHtml(getEventLabel(evt.kind))}\${escapeHtml(cycleSuffix)}</strong>
+            <span class="audit-trail-time">\${escapeHtml(new Date(evt.timestamp).toLocaleString('zh-CN'))}\${escapeHtml(dataStr)}</span>
+          \`;
+          container.appendChild(div);
+        });
+      } catch (err) {
+        console.error('Failed to load events:', err);
+      }
+    }
+
+    function populateCyclesDropdown() {
+      const cycleSelect = document.getElementById('cycle-select');
+      cycleSelect.innerHTML = '';
+      const totalCycles = Math.max(activeRun.currentCycle || 1, activeRun.cycles ? activeRun.cycles.length : 1);
+      for (let c = 1; c <= totalCycles; c++) {
+        const opt = document.createElement('option');
+        opt.value = c;
+        opt.textContent = c;
+        cycleSelect.appendChild(opt);
+      }
+      cycleSelect.value = selectedCycle;
+    }
+
+    function onCycleChange() {
+      selectedCycle = parseInt(document.getElementById('cycle-select').value);
+      selectedAttempt = 0;
+      onCycleOrAttemptUIChange();
+    }
+
+    function onAttemptChange() {
+      selectedAttempt = parseInt(document.getElementById('attempt-select').value);
+      onCycleOrAttemptUIChange();
+    }
+
+    function onLogFileChange() {
+      selectedLogFile = document.getElementById('log-file-select').value;
+      if (currentLogView === 'timeline') {
+        resetTimeline();
+      } else {
+        resetRawLogs();
+      }
+    }
+
+    async function onCycleOrAttemptUIChange() {
+      const attemptSelect = document.getElementById('attempt-select');
+      attemptSelect.innerHTML = '';
+
+      let maxAttempts = 0;
+      if (activeRun.cycles) {
+        const cycleRec = activeRun.cycles.find(cy => cy.cycleIndex === selectedCycle);
+        if (cycleRec && cycleRec.executorAttemptLogs) {
+          maxAttempts = Math.max(0, cycleRec.executorAttemptLogs.length - 1);
+        }
+      }
+
+      if (selectedCycle === activeRun.currentCycle) {
+        maxAttempts = Math.max(maxAttempts, 0);
+      }
+
+      for (let a = 0; a <= maxAttempts; a++) {
+        const opt = document.createElement('option');
+        opt.value = a;
+        opt.textContent = a;
+        attemptSelect.appendChild(opt);
+      }
+
+      attemptSelect.value = Math.min(selectedAttempt, maxAttempts);
+      selectedAttempt = parseInt(attemptSelect.value);
+
+      const agyGroup = document.getElementById('agy-file-group');
+      if (activeRun.executor === 'agy') {
+        agyGroup.style.display = 'flex';
+      } else {
+        agyGroup.style.display = 'none';
+        selectedLogFile = 'exec';
+      }
+
+      if (currentLogView === 'timeline') {
+        resetTimeline();
+      } else {
+        resetRawLogs();
+      }
+    }
+
+    // Timeline view initialization and pagination
+    async function resetTimeline() {
+      timelineOffset = 0;
+      timelineFullyLoaded = false;
+      timelineEntries = [];
+      timelineResidual = "";
+      document.getElementById('timeline-items-container').innerHTML = '';
+      document.getElementById('load-more-timeline-btn').style.display = 'none';
+      await loadMoreTimeline();
+    }
+
+    async function loadMoreTimeline() {
+      try {
+        const url = \`/api/runs/\${activeRun.runId}/logs?cycle=\${selectedCycle}&attempt=\${selectedAttempt}&type=\${selectedLogFile}&offset=\${timelineOffset}&limit=\${chunkLimit}\`;
+        const res = await fetch(url);
+        const logData = await res.json();
+
+        const combinedContent = timelineResidual + (logData.content || '');
+        let contentToParse = combinedContent;
+        if (logData.hasMore) {
+          const lastNewlineIndex = Math.max(combinedContent.lastIndexOf('\\n'), combinedContent.lastIndexOf('\\r'));
+          if (lastNewlineIndex !== -1) {
+            contentToParse = combinedContent.substring(0, lastNewlineIndex + 1);
+            timelineResidual = combinedContent.substring(lastNewlineIndex + 1);
+          } else {
+            contentToParse = "";
+            timelineResidual = combinedContent;
+          }
+        } else {
+          timelineResidual = "";
+        }
+
+        const parsed = parseLogContent(contentToParse, activeRun.executor);
+        timelineEntries.push(...parsed);
+        timelineOffset = logData.nextOffset;
+        timelineFullyLoaded = !logData.hasMore;
+
+        renderTimeline();
+
+        const btn = document.getElementById('load-more-timeline-btn');
+        if (logData.hasMore) {
+          btn.style.display = 'block';
+          btn.textContent = '加载更多时间线（剩余 ' + Math.round((logData.size - logData.nextOffset) / 1024) + ' KB）';
+        } else {
+          btn.style.display = 'none';
+        }
+        if (autoScroll) scrollToBottom();
+      } catch (err) {
+        console.error('Failed to load timeline entries:', err);
+      }
+    }
+
+    // Align browser log parser with workflow-web-parser.ts
+    function parseLogContent(content, executor) {
+      const entries = [];
+      const lines = content.split(/\\r?\\n/);
+      if (lines.length > 0 && lines[lines.length - 1] === '') {
+        lines.pop();
+      }
+
+      const ANSI_REGEX = /[\\u001b\\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
+      const REASONIX_THINKING_REGEX = /▎\\s*thinking|^(?:thinking|thought|reasoning|inside thinking)[:\\-\\s]|\\[(?:thinking|thought|reasoning)\\]|^🤔/i;
+      const REASONIX_TOOL_REGEX = /->\\s*tool|^(?:tool|action|calling|running|using|executing|executing tool)[:\\-\\s]|\\[(?:tool|action)\\]/i;
+      const REASONIX_STATS_REGEX = /·\\s*\\d+\\s*tok|^(?:tokens|cost|stats|duration|elapsed|prompt tokens|completion tokens|total tokens|statistics)[:\\-\\s\\d]/i;
+
+      lines.forEach(line => {
+        const trimmed = line.trim();
+        if (!trimmed) {
+          entries.push({ type: 'raw', content: '', raw: line });
+          return;
+        }
+
+        if (executor === 'claude' && trimmed.startsWith('{') && trimmed.endsWith('}')) {
+          try {
+            const parsed = JSON.parse(trimmed);
+            const type = parsed.type || '';
+
+            if (type === 'assistant') {
+              const contentArray = parsed.message && parsed.message.content;
+              if (Array.isArray(contentArray)) {
+                contentArray.forEach(item => {
+                  if (item && typeof item === 'object') {
+                    if (item.type === 'thinking') {
+                      entries.push({ type: 'thinking', content: item.thinking || '', raw: line });
+                    } else if (item.type === 'text') {
+                      entries.push({ type: 'text', content: item.text || '', raw: line });
+                    } else if (item.type === 'tool_use') {
+                      entries.push({
+                        type: 'tool_call',
+                        content: \`Calling tool \${item.name} with input: '\${JSON.stringify(item.input || {})}'\`,
+                        raw: line
+                      });
+                    } else {
+                      entries.push({ type: 'raw', content: JSON.stringify(item), raw: line });
+                    }
+                  }
+                });
+                return;
+              }
+            }
+
+            if (type === 'user') {
+              const contentArray = parsed.message && parsed.message.content;
+              if (Array.isArray(contentArray)) {
+                contentArray.forEach(item => {
+                  if (item && typeof item === 'object') {
+                    if (item.type === 'tool_result') {
+                      entries.push({
+                        type: 'tool_result',
+                        content: \`Tool result: '\${item.content || ''}'\`,
+                        raw: line
+                      });
+                    } else {
+                      entries.push({ type: 'raw', content: JSON.stringify(item), raw: line });
+                    }
+                  }
+                });
+                return;
+              }
+            }
+
+            if (type === 'result' || parsed.result !== undefined) {
+              if (parsed.is_error === true) {
+                entries.push({ type: 'error', content: parsed.result || 'Error', raw: line });
+              } else {
+                entries.push({ type: 'result', content: parsed.result || '', raw: line });
+              }
+              return;
+            }
+
+            if (type === 'error' || parsed.error !== undefined) {
+              entries.push({ type: 'error', content: parsed.error || '', raw: line });
+              return;
+            }
+
+            if (type === 'system') {
+              entries.push({
+                type: 'system',
+                content: parsed.subtype === 'init' ? \`Session initialized: '\${parsed.session_id || ''}'\` : (parsed.message || JSON.stringify(parsed)),
+                raw: line
+              });
+              return;
+            }
+
+            if (
+              type === 'progress' ||
+              type === 'token_progress' ||
+              parsed.progress !== undefined ||
+              parsed.token_progress !== undefined ||
+              parsed.thinking_tokens !== undefined ||
+              parsed.tokens !== undefined
+            ) {
+              let pContent = '';
+              if (parsed.thinking_tokens !== undefined) {
+                pContent = \`Thinking tokens: '\${parsed.thinking_tokens}'\`;
+                if (parsed.total_tokens !== undefined) {
+                  pContent += \` / Total: '\${parsed.total_tokens}'\`;
+                }
+              } else if (parsed.tokens !== undefined) {
+                pContent = \`Tokens: '\${parsed.tokens}'\`;
+              } else {
+                pContent = parsed.message || parsed.token_progress || JSON.stringify(parsed);
+              }
+              entries.push({ type: 'progress', content: pContent, raw: line });
+              return;
+            }
+
+            entries.push({ type: 'raw', content: trimmed, raw: line });
+          } catch (e) {
+            entries.push({ type: 'raw', content: line, raw: line });
+          }
+        } else if (executor === 'reasonix') {
+          const clean = line.replace(ANSI_REGEX, '');
+          if (REASONIX_THINKING_REGEX.test(clean)) {
+            entries.push({ type: 'thinking', content: clean, raw: line });
+          } else if (REASONIX_TOOL_REGEX.test(clean)) {
+            entries.push({ type: 'tool_call', content: clean, raw: line });
+          } else if (REASONIX_STATS_REGEX.test(clean)) {
+            entries.push({ type: 'stats', content: clean, raw: line });
+          } else {
+            entries.push({ type: 'text', content: clean, raw: line });
+          }
+        } else {
+          entries.push({ type: 'raw', content: line, raw: line });
+        }
+      });
+
+      return entries.map(e => {
+        if (e.content) e.content = e.content.replace(/'/g, "'");
+        return e;
+      });
+    }
+
+    function renderTimeline() {
+      const container = document.getElementById('timeline-items-container');
+      container.innerHTML = '';
+
+      timelineEntries.forEach(entry => {
+        if (hideThinking && entry.type === 'thinking') return;
+        if (errorsOnly && entry.type !== 'error') return;
+
+        const row = document.createElement('div');
+        row.className = \`timeline-item \${entry.type}\`;
+
+        const typeLabel = getTimelineTypeLabel(entry.type);
+
+        row.innerHTML = \`
+          <span class="item-badge badge-\${entry.type}">\${escapeHtml(typeLabel)}</span>
+          <span class="item-content">\&nbsp;\${escapeHtml(entry.content || entry.raw)}</span>
+        \`;
+        container.appendChild(row);
+      });
+
+      if (autoScroll) scrollToBottom();
+    }
+
+    // Raw log chunk loading logic with visible hasMore controls and gap protection
+    async function resetRawLogs() {
+      rawOffset = 0;
+      rawLogFullyLoaded = false;
+      rawResidual = "";
+      document.getElementById('raw-log-pre').textContent = '';
+      document.getElementById('load-more-raw-btn').style.display = 'none';
+      await loadMoreRawLogs();
+    }
+
+    async function loadMoreRawLogs() {
+      try {
+        const url = \`/api/runs/\${activeRun.runId}/logs?cycle=\${selectedCycle}&attempt=\${selectedAttempt}&type=\${selectedLogFile}&offset=\${rawOffset}&limit=\${chunkLimit}\`;
+        const res = await fetch(url);
+        const data = await res.json();
+
+        const pre = document.getElementById('raw-log-pre');
+
+        const combinedContent = rawResidual + (data.content || '');
+        let displayContent = combinedContent;
+        if (data.hasMore) {
+          const lastNewlineIndex = Math.max(combinedContent.lastIndexOf('\\n'), combinedContent.lastIndexOf('\\r'));
+          if (lastNewlineIndex !== -1) {
+            displayContent = combinedContent.substring(0, lastNewlineIndex + 1);
+            rawResidual = combinedContent.substring(lastNewlineIndex + 1);
+          } else {
+            displayContent = "";
+            rawResidual = combinedContent;
+          }
+        } else {
+          rawResidual = "";
+        }
+
+        if (rawOffset === 0) {
+          pre.textContent = displayContent;
+        } else {
+          pre.textContent += displayContent;
+        }
+
+        rawOffset = data.nextOffset;
+        rawLogFullyLoaded = !data.hasMore;
+
+        const btn = document.getElementById('load-more-raw-btn');
+        if (data.hasMore) {
+          btn.style.display = 'block';
+          btn.textContent = '加载更多日志（剩余 ' + Math.round((data.size - data.nextOffset) / 1024) + ' KB）';
+        } else {
+          btn.style.display = 'none';
+        }
+
+        if (autoScroll) scrollToBottom();
+      } catch (err) {
+        console.error('Failed to load raw logs:', err);
+      }
+    }
+
+    // Real-time SSE listener
+    function setupSSE(runId) {
+      const url = \`/api/runs/\${runId}/stream\`;
+      sseConn = new EventSource(url);
+
+      sseConn.addEventListener('state', (e) => {
+        const updatedState = JSON.parse(e.data);
+        activeRun = updatedState;
+
+        const badge = document.getElementById('view-status-badge');
+        badge.textContent = getStatusLabel(activeRun.status);
+        const color = getStatusColor(activeRun.status);
+        badge.style.backgroundColor = color + '15';
+        badge.style.color = color;
+
+        document.getElementById('view-current-cycle').textContent = activeRun.currentCycle;
+        document.getElementById('view-updated-at').textContent = new Date(activeRun.updatedAt).toLocaleString('zh-CN');
+
+        populateCyclesDropdown();
+        loadWorkflowEvents();
+
+        // Close EventSource when state reports any non-executing status to prevent infinite reconnection loop
+        if (activeRun.status !== 'executing') {
+          console.log('Run status changed to terminal:', activeRun.status, 'Closing SSE connection.');
+          if (sseConn) {
+            sseConn.close();
+            sseConn = null;
+          }
+        }
+      });
+
+      sseConn.addEventListener('event', (e) => {
+        loadWorkflowEvents();
+      });
+
+      sseConn.addEventListener('log_rotation', (e) => {
+        const rotation = JSON.parse(e.data);
+        console.log('Log rotation event:', rotation);
+        if (rotation.cycleIndex === selectedCycle) {
+          selectedAttempt = rotation.attemptIndex;
+          onCycleOrAttemptUIChange();
+        }
+      });
+
+      sseConn.addEventListener('log_append', (e) => {
+        if (selectedCycle === activeRun.currentCycle) {
+          const appendedText = e.data;
+
+          // Gap protection: only append live logs if fully caught up
+          if (currentLogView === 'timeline') {
+            if (timelineFullyLoaded) {
+              const parsed = parseLogContent(appendedText, activeRun.executor);
+              timelineEntries.push(...parsed);
+              renderTimeline();
+            }
+          } else {
+            if (rawLogFullyLoaded) {
+              const pre = document.getElementById('raw-log-pre');
+              pre.textContent += appendedText;
+              if (autoScroll) scrollToBottom();
+            }
+          }
+        }
+      });
+
+      sseConn.onerror = (err) => {
+        // Only log, do not close connection here for transient errors
+        // EventSource will automatically reconnect if server went down temporarily
+        console.error('SSE connection error:', err);
+      };
+    }
+
+    document.getElementById('search-box').addEventListener('input', renderRuns);
+    document.getElementById('executor-filter').addEventListener('change', renderRuns);
+    document.getElementById('status-filter').addEventListener('change', renderRuns);
+
+    // Initial load
+    loadRuns();
+    // Poll for list updates periodically
+    setInterval(loadRuns, 5000);
+  </script>
+</body>
+</html>`;
+}
diff --git a/src/workflow-web-parser.test.ts b/src/workflow-web-parser.test.ts
new file mode 100644
index 0000000..4b6c06a
--- /dev/null
+++ b/src/workflow-web-parser.test.ts
@@ -0,0 +1,186 @@
+import { describe, expect, it } from "vitest";
+import { parseLogLine, parseLogContent } from "./workflow-web-parser.js";
+
+describe("workflow-web-parser - Claude stream-json", () => {
+  it("parses thinking block inside assistant message", () => {
+    const line = `{"type":"assistant","message":{"content":[{"type":"thinking","thinking":"secret thought"}]}}`;
+    const res = parseLogLine(line, "claude");
+    expect(res).toHaveLength(1);
+    expect(res[0]).toEqual({
+      type: "thinking",
+      content: "secret thought",
+      raw: line,
+    });
+  });
+
+  it("parses text block inside assistant message", () => {
+    const line = `{"type":"assistant","message":{"content":[{"type":"text","text":"hello world"}]}}`;
+    const res = parseLogLine(line, "claude");
+    expect(res).toHaveLength(1);
+    expect(res[0]).toEqual({
+      type: "text",
+      content: "hello world",
+      raw: line,
+    });
+  });
+
+  it("parses tool_use block inside assistant message", () => {
+    const line = `{"type":"assistant","message":{"content":[{"type":"tool_use","name":"Read","input":{"file_path":"src/index.ts"}}]}}`;
+    const res = parseLogLine(line, "claude");
+    expect(res).toHaveLength(1);
+    expect(res[0].type).toBe("tool_call");
+    expect(res[0].content).toContain("Calling tool Read");
+    expect(res[0].meta?.name).toBe("Read");
+  });
+
+  it("parses user message tool_result block", () => {
+    const line = `{"type":"user","message":{"content":[{"type":"tool_result","tool_use_id":"tool-123","content":"File contents here"}]}}`;
+    const res = parseLogLine(line, "claude");
+    expect(res).toHaveLength(1);
+    expect(res[0]).toEqual({
+      type: "tool_result",
+      content: "Tool result: File contents here",
+      meta: { type: "tool_result", tool_use_id: "tool-123", content: "File contents here" },
+      raw: line,
+    });
+  });
+
+  it("parses result block", () => {
+    const line = `{"type":"result","result":"Success outcome"}`;
+    const res = parseLogLine(line, "claude");
+    expect(res[0]).toEqual({
+      type: "result",
+      content: "Success outcome",
+      meta: { type: "result", result: "Success outcome" },
+      raw: line,
+    });
+  });
+
+  it("parses error result block", () => {
+    const line = `{"type":"result","is_error":true,"result":"Rate Limit"}`;
+    const res = parseLogLine(line, "claude");
+    expect(res[0]).toEqual({
+      type: "error",
+      content: "Rate Limit",
+      meta: { type: "result", is_error: true, result: "Rate Limit" },
+      raw: line,
+    });
+  });
+
+  it("parses token_progress block", () => {
+    const line = `{"type":"progress","token_progress":456}`;
+    const res = parseLogLine(line, "claude");
+    expect(res[0]).toEqual({
+      type: "progress",
+      content: "456",
+      meta: { type: "progress", token_progress: 456 },
+      raw: line,
+    });
+  });
+
+  it("parses thinking_tokens progress block", () => {
+    const line = `{"type":"progress","thinking_tokens":120,"total_tokens":850}`;
+    const res = parseLogLine(line, "claude");
+    expect(res[0]).toEqual({
+      type: "progress",
+      content: "Thinking tokens: 120 / Total: 850",
+      meta: { type: "progress", thinking_tokens: 120, total_tokens: 850 },
+      raw: line,
+    });
+  });
+});
+
+describe("workflow-web-parser - Reasonix heuristics", () => {
+  it("cleans ANSI codes and parses thinking", () => {
+    const line = "\u001b[32mThinking: I should explore the directory structure\u001b[0m";
+    const res = parseLogLine(line, "reasonix");
+    expect(res[0]).toEqual({
+      type: "thinking",
+      content: "Thinking: I should explore the directory structure",
+      raw: line,
+    });
+  });
+
+  it("parses Reasonix '▎ thinking' line", () => {
+    const line = "▎ thinking ... some thought";
+    const res = parseLogLine(line, "reasonix");
+    expect(res[0]).toEqual({
+      type: "thinking",
+      content: "▎ thinking ... some thought",
+      raw: line,
+    });
+  });
+
+  it("cleans ANSI codes and parses tool call", () => {
+    const line = "\u001b[34mCalling tool Read with args...\u001b[0m";
+    const res = parseLogLine(line, "reasonix");
+    expect(res[0]).toEqual({
+      type: "tool_call",
+      content: "Calling tool Read with args...",
+      raw: line,
+    });
+  });
+
+  it("parses Reasonix '-> tool' line", () => {
+    const line = "-> tool calling edit";
+    const res = parseLogLine(line, "reasonix");
+    expect(res[0]).toEqual({
+      type: "tool_call",
+      content: "-> tool calling edit",
+      raw: line,
+    });
+  });
+
+  it("cleans ANSI codes and parses statistics", () => {
+    const line = "Tokens used: 1250";
+    const res = parseLogLine(line, "reasonix");
+    expect(res[0]).toEqual({
+      type: "stats",
+      content: "Tokens used: 1250",
+      raw: line,
+    });
+  });
+
+  it("parses Reasonix '· N tok' line", () => {
+    const line = "· 452 tok";
+    const res = parseLogLine(line, "reasonix");
+    expect(res[0]).toEqual({
+      type: "stats",
+      content: "· 452 tok",
+      raw: line,
+    });
+  });
+
+  it("cleans ANSI codes and parses normal text", () => {
+    const line = "\u001b[1mStandard console log output\u001b[0m";
+    const res = parseLogLine(line, "reasonix");
+    expect(res[0]).toEqual({
+      type: "text",
+      content: "Standard console log output",
+      raw: line,
+    });
+  });
+});
+
+describe("workflow-web-parser - Agy raw fallback", () => {
+  it("passes through line as raw", () => {
+    const line = "random unformatted output line";
+    const res = parseLogLine(line, "agy");
+    expect(res[0]).toEqual({
+      type: "raw",
+      content: line,
+      raw: line,
+    });
+  });
+});
+
+describe("parseLogContent", () => {
+  it("splits text by lines and parses all", () => {
+    const content = "line 1\nline 2\r\nline 3\n";
+    const res = parseLogContent(content, "agy");
+    expect(res).toHaveLength(3);
+    expect(res[0].content).toBe("line 1");
+    expect(res[1].content).toBe("line 2");
+    expect(res[2].content).toBe("line 3");
+  });
+});
diff --git a/src/workflow-web-parser.ts b/src/workflow-web-parser.ts
new file mode 100644
index 0000000..8f671e6
--- /dev/null
+++ b/src/workflow-web-parser.ts
@@ -0,0 +1,221 @@
+/**
+ * Unified parser for executor logs.
+ * Supports Claude stream-json, Reasonix console logs, and Agy stdout/stderr logs.
+ */
+
+export interface ParsedLogEntry {
+  type: "thinking" | "text" | "tool_call" | "tool_result" | "system" | "error" | "result" | "progress" | "stats" | "raw";
+  content: string;
+  meta?: Record<string, any>;
+  raw: string;
+}
+
+const ANSI_REGEX = /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-ORZcf-nqry=><]/g;
+
+// Reasonix heuristics after stripping ANSI
+export const REASONIX_THINKING_REGEX = /▎\s*thinking|^(?:thinking|thought|reasoning|inside thinking)[:\-\s]|\[(?:thinking|thought|reasoning)\]|^🤔/i;
+export const REASONIX_TOOL_REGEX = /->\s*tool|^(?:tool|action|calling|running|using|executing|executing tool)[:\-\s]|\[(?:tool|action)\]/i;
+export const REASONIX_STATS_REGEX = /·\s*\d+\s*tok|^(?:tokens|cost|stats|duration|elapsed|prompt tokens|completion tokens|total tokens|statistics)[:\-\s\d]/i;
+
+/**
+ * Parse a single line from an executor log.
+ */
+export function parseLogLine(line: string, executor: string): ParsedLogEntry[] {
+  if (!line) {
+    return [{ type: "raw", content: "", raw: "" }];
+  }
+
+  const trimmed = line.trim();
+
+  // 1. Claude stream-json parser
+  if (executor === "claude" && trimmed.startsWith("{") && trimmed.endsWith("}")) {
+    try {
+      const parsed = JSON.parse(trimmed) as Record<string, any>;
+      const type = String(parsed.type ?? "");
+
+      if (type === "assistant") {
+        const message = parsed.message as Record<string, any> | undefined;
+        const content = message?.content;
+        if (Array.isArray(content)) {
+          const entries: ParsedLogEntry[] = [];
+          for (const item of content) {
+            if (typeof item !== "object" || item === null) continue;
+            const block = item as Record<string, any>;
+            const blockType = String(block.type ?? "");
+
+            if (blockType === "thinking") {
+              entries.push({
+                type: "thinking",
+                content: String(block.thinking ?? ""),
+                raw: line,
+              });
+            } else if (blockType === "text") {
+              entries.push({
+                type: "text",
+                content: String(block.text ?? ""),
+                raw: line,
+              });
+            } else if (blockType === "tool_use") {
+              entries.push({
+                type: "tool_call",
+                content: `Calling tool ${block.name} with input: ${JSON.stringify(block.input ?? {})}`,
+                meta: block,
+                raw: line,
+              });
+            } else {
+              entries.push({
+                type: "raw",
+                content: JSON.stringify(block),
+                raw: line,
+              });
+            }
+          }
+          if (entries.length > 0) return entries;
+        }
+      }
+
+      if (type === "user") {
+        const message = parsed.message as Record<string, any> | undefined;
+        const content = message?.content;
+        if (Array.isArray(content)) {
+          const entries: ParsedLogEntry[] = [];
+          for (const item of content) {
+            if (typeof item !== "object" || item === null) continue;
+            const block = item as Record<string, any>;
+            const blockType = String(block.type ?? "");
+
+            if (blockType === "tool_result") {
+              entries.push({
+                type: "tool_result",
+                content: `Tool result: ${String(block.content ?? "")}`,
+                meta: block,
+                raw: line,
+              });
+            } else {
+              entries.push({
+                type: "raw",
+                content: JSON.stringify(block),
+                raw: line,
+              });
+            }
+          }
+          if (entries.length > 0) return entries;
+        }
+      }
+
+      if (type === "result" || parsed.result !== undefined) {
+        if (parsed.is_error === true) {
+          return [{
+            type: "error",
+            content: String(parsed.result ?? parsed.error ?? "Error occurred"),
+            meta: parsed,
+            raw: line,
+          }];
+        }
+        return [{
+          type: "result",
+          content: String(parsed.result ?? ""),
+          meta: parsed,
+          raw: line,
+        }];
+      }
+
+      if (type === "error" || parsed.error !== undefined) {
+        return [{
+          type: "error",
+          content: String(parsed.error ?? ""),
+          meta: parsed,
+          raw: line,
+        }];
+      }
+
+      if (type === "system") {
+        return [{
+          type: "system",
+          content: parsed.subtype === "init"
+            ? `Session initialized: ${parsed.session_id ?? ""}`
+            : String(parsed.message ?? JSON.stringify(parsed)),
+          meta: parsed,
+          raw: line,
+        }];
+      }
+
+      if (
+        type === "progress" ||
+        type === "token_progress" ||
+        parsed.token_progress !== undefined ||
+        parsed.progress !== undefined ||
+        parsed.tokenProgress !== undefined ||
+        parsed.thinking_tokens !== undefined ||
+        parsed.tokens !== undefined
+      ) {
+        let content = "";
+        if (parsed.thinking_tokens !== undefined) {
+          content = `Thinking tokens: ${parsed.thinking_tokens}`;
+          if (parsed.total_tokens !== undefined) {
+            content += ` / Total: ${parsed.total_tokens}`;
+          }
+        } else if (parsed.tokens !== undefined) {
+          content = `Tokens: ${parsed.tokens}`;
+        } else {
+          content = String(parsed.message ?? parsed.token_progress ?? JSON.stringify(parsed));
+        }
+
+        return [{
+          type: "progress",
+          content,
+          meta: parsed,
+          raw: line,
+        }];
+      }
+
+      // Fallback inside JSON
+      return [{
+        type: "raw",
+        content: trimmed,
+        meta: parsed,
+        raw: line,
+      }];
+    } catch {
+      // JSON parse failed, fallback to raw
+    }
+  }
+
+  // 2. Reasonix parser
+  if (executor === "reasonix") {
+    const clean = line.replace(ANSI_REGEX, "");
+    if (REASONIX_THINKING_REGEX.test(clean)) {
+      return [{ type: "thinking", content: clean, raw: line }];
+    }
+    if (REASONIX_TOOL_REGEX.test(clean)) {
+      return [{ type: "tool_call", content: clean, raw: line }];
+    }
+    if (REASONIX_STATS_REGEX.test(clean)) {
+      return [{ type: "stats", content: clean, raw: line }];
+    }
+    return [{ type: "text", content: clean, raw: line }];
+  }
+
+  // 3. Agy or any fallback
+  return [{
+    type: "raw",
+    content: line,
+    raw: line,
+  }];
+}
+
+/**
+ * Parse an entire log content string.
+ */
+export function parseLogContent(content: string, executor: string): ParsedLogEntry[] {
+  if (!content) return [];
+  const lines = content.split(/\r?\n/);
+  if (lines.length > 0 && lines[lines.length - 1] === "") {
+    lines.pop();
+  }
+  const result: ParsedLogEntry[] = [];
+  for (const line of lines) {
+    result.push(...parseLogLine(line, executor));
+  }
+  return result;
+}
diff --git a/src/workflow-web.test.ts b/src/workflow-web.test.ts
new file mode 100644
index 0000000..c4ebe43
--- /dev/null
+++ b/src/workflow-web.test.ts
@@ -0,0 +1,472 @@
+import { describe, expect, it, beforeAll, afterAll } from "vitest";
+import fs from "node:fs";
+import os from "node:os";
+import path from "node:path";
+import http from "node:http";
+import { Buffer } from "node:buffer";
+import { startWorkflowWebServer, splitCompleteUtf8, hasSymlinkInPath } from "./workflow-web.js";
+import { writeState, appendEvent, attemptLogPath, readState } from "./workflow-state.js";
+import type { WorkflowState } from "./workflow-types.js";
+
+// Make request helper
+function makeRequest(
+  url: string,
+  method = "GET",
+  headers: Record<string, string> = { "Host": "127.0.0.1:14319" }
+): Promise<{ status: number; headers: http.IncomingHttpHeaders; body: string }> {
+  return new Promise((resolve, reject) => {
+    const req = http.request(url, { method, headers }, (res) => {
+      let body = "";
+      res.on("data", (chunk) => { body += chunk; });
+      res.on("end", () => {
+        resolve({
+          status: res.statusCode || 0,
+          headers: res.headers,
+          body,
+        });
+      });
+    });
+    req.on("error", reject);
+    req.end();
+  });
+}
+
+describe("workflow-web", () => {
+  let tmpDir: string;
+  let server: http.Server;
+  let port = 14319;
+  let baseUrl = `http://127.0.0.1:${port}`;
+  let runId = "test-run-123";
+  let repoRoot = "/tmp/fake-repo-root";
+  let hash = "75b89b99";
+
+  beforeAll(async () => {
+    // Setup temp workflows root directory
+    tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "agent-workflow-web-test-"));
+    process.env.AGENT_WORKFLOW_DIR = tmpDir;
+
+    const runDir = path.join(tmpDir, hash, runId);
+    fs.mkdirSync(runDir, { recursive: true });
+
+    const mockState: WorkflowState = {
+      version: "1",
+      runId,
+      repoHash: hash,
+      repoRoot,
+      executor: "claude",
+      status: "executing",
+      maxCycles: 5,
+      currentCycle: 1,
+      cycles: [
+        {
+          cycleIndex: 1,
+          startedAt: new Date().toISOString(),
+          executorAttemptLogs: [`cycle-1-exec.log`],
+        }
+      ],
+      plan: {
+        version: "1",
+        title: "Test Plan Title",
+        planMarkdown: "Implement something",
+        scope: ["src/index.ts"],
+        acceptanceCriteria: ["AC1"],
+        verificationCommands: [["npm", "test"]],
+      },
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    };
+
+    writeState(runDir, mockState);
+    appendEvent(runDir, { kind: "workflow_started", runId, timestamp: new Date().toISOString() });
+
+    // Write mock logs
+    const logPath = attemptLogPath(runDir, 1, 0);
+    fs.writeFileSync(logPath, "Hello world line 1\nHello world line 2\n", "utf8");
+
+    // Start server
+    server = await startWorkflowWebServer(port);
+  });
+
+  afterAll(() => {
+    return new Promise<void>((resolve) => {
+      server.close(() => {
+        fs.rmSync(tmpDir, { recursive: true, force: true });
+        resolve();
+      });
+    });
+  });
+
+  it("serves HTML assets on /", async () => {
+    const res = await makeRequest(`${baseUrl}/`);
+    expect(res.status).toBe(200);
+    expect(res.headers["content-type"]).toContain("text/html");
+    expect(res.body).toContain("智能体工作流控制台");
+    expect(res.body).toContain("智能体执行监控");
+    expect(res.body).toContain("全部状态");
+    expect(res.body).toContain("时间线与日志");
+  });
+
+  it("serves list of runs on /api/runs", async () => {
+    const res = await makeRequest(`${baseUrl}/api/runs`);
+    expect(res.status).toBe(200);
+    expect(res.headers["content-type"]).toContain("application/json");
+
+    const runsList = JSON.parse(res.body);
+    expect(runsList).toHaveLength(1);
+    expect(runsList[0].runId).toBe(runId);
+    expect(runsList[0].plan.title).toBe("Test Plan Title");
+  });
+
+  it("serves individual run state on /api/runs/:runId", async () => {
+    const res = await makeRequest(`${baseUrl}/api/runs/${runId}`);
+    expect(res.status).toBe(200);
+    const state = JSON.parse(res.body);
+    expect(state.runId).toBe(runId);
+    expect(state.plan.title).toBe("Test Plan Title");
+  });
+
+  it("serves events on /api/runs/:runId/events", async () => {
+    const res = await makeRequest(`${baseUrl}/api/runs/${runId}/events`);
+    expect(res.status).toBe(200);
+    const events = JSON.parse(res.body);
+    expect(events).toHaveLength(1);
+    expect(events[0].kind).toBe("workflow_started");
+  });
+
+  it("serves log files on /api/runs/:runId/logs", async () => {
+    const res = await makeRequest(`${baseUrl}/api/runs/${runId}/logs?cycle=1&attempt=0`);
+    expect(res.status).toBe(200);
+    const logs = JSON.parse(res.body);
+    expect(logs.content).toBe("Hello world line 1\nHello world line 2\n");
+    expect(logs.hasMore).toBe(false);
+  });
+
+  it("serves log files paginated/with offset", async () => {
+    const res = await makeRequest(`${baseUrl}/api/runs/${runId}/logs?cycle=1&attempt=0&offset=6&limit=5`);
+    expect(res.status).toBe(200);
+    const logs = JSON.parse(res.body);
+    expect(logs.content).toBe("world");
+    expect(logs.nextOffset).toBe(11);
+  });
+
+  it("rejects path traversal in runId", async () => {
+    const res = await makeRequest(`${baseUrl}/api/runs/..%2F..%2Fsomefile`);
+    expect(res.status).toBe(404);
+  });
+
+  it("rejects path traversal in logs search params", async () => {
+    const badRes = await makeRequest(`${baseUrl}/api/runs/${runId}/logs?cycle=1&attempt=0&type=..%2F..%2Fetc%2Fpasswd`);
+    expect(badRes.status).toBe(403);
+  });
+
+  it("rejects non-GET/HEAD methods with 405", async () => {
+    const res = await makeRequest(`${baseUrl}/`, "POST");
+    expect(res.status).toBe(405);
+    expect(res.headers["allow"]).toBe("GET, HEAD");
+  });
+
+  it("supports HEAD request", async () => {
+    const res = await makeRequest(`${baseUrl}/api/runs`, "HEAD");
+    expect(res.status).toBe(200);
+    expect(res.body).toBe("");
+  });
+
+  it("rejects invalid Host header", async () => {
+    const res = await makeRequest(`${baseUrl}/`, "GET", { "Host": "evil.example" });
+    expect(res.status).toBe(400);
+  });
+
+  it("rejects invalid Origin header", async () => {
+    const res = await makeRequest(`${baseUrl}/`, "GET", {
+      "Host": "127.0.0.1:14319",
+      "Origin": "http://evil.example"
+    });
+    expect(res.status).toBe(403);
+  });
+
+  it("rejects out of bounds query parameters", async () => {
+    const res1 = await makeRequest(`${baseUrl}/api/runs/${runId}/logs?cycle=0&attempt=0`);
+    expect(res1.status).toBe(400);
+    const res2 = await makeRequest(`${baseUrl}/api/runs/${runId}/logs?cycle=1001&attempt=0`);
+    expect(res2.status).toBe(400);
+
+    const res3 = await makeRequest(`${baseUrl}/api/runs/${runId}/logs?cycle=1&attempt=-1`);
+    expect(res3.status).toBe(400);
+
+    const res4 = await makeRequest(`${baseUrl}/api/runs/${runId}/logs?cycle=1&attempt=0&offset=-5`);
+    expect(res4.status).toBe(400);
+
+    const res5 = await makeRequest(`${baseUrl}/api/runs/${runId}/logs?cycle=1&attempt=0&limit=3`);
+    expect(res5.status).toBe(400);
+  });
+
+  it("supports HEAD stream check without hanging", async () => {
+    const res = await makeRequest(`${baseUrl}/api/runs/${runId}/stream`, "HEAD");
+    expect(res.status).toBe(200);
+    expect(res.headers["content-type"]).toBe("text/event-stream");
+  });
+
+  it("rejects startWorkflowWebServer with invalid port", async () => {
+    await expect(startWorkflowWebServer(70000)).rejects.toThrow();
+    await expect(startWorkflowWebServer(0)).rejects.toThrow();
+  });
+
+  // UI contract tests (Finding codex-5-1, codex-5-4)
+  it("does not contain &sq placeholders in generated HTML", async () => {
+    const res = await makeRequest(`${baseUrl}/`);
+    expect(res.body).not.toContain("&sq");
+    expect(res.body).toContain("`/api/runs/${activeRun.runId}/events`");
+    expect(res.body).toContain("`/api/runs/${runId}/stream`");
+  });
+
+  it("includes responsive mobile layout CSS for sidebar", async () => {
+    const res = await makeRequest(`${baseUrl}/`);
+    expect(res.body).toContain("@media (max-width: 768px)");
+    expect(res.body).toContain("height: 35vh;");
+    expect(res.body).toContain("height: 65vh;");
+    expect(res.body).not.toContain("height: 250px;");
+  });
+
+  // Javascript validity contract test (Finding codex-6-2)
+  it("generates syntactically valid Javascript that defines resetTimeline and loadLogs", async () => {
+    const res = await makeRequest(`${baseUrl}/`);
+    const scriptMatch = res.body.match(/<script>([\s\S]*?)<\/script>/);
+    expect(scriptMatch).not.toBeNull();
+    const scriptContent = scriptMatch![1];
+
+    // Test that the script can be evaluated without SyntaxError
+    const vm = require("node:vm");
+    const script = new vm.Script(scriptContent);
+    const sandbox = {
+      window: {},
+      document: {
+        getElementById: () => ({ style: {}, addEventListener: () => {} }),
+        querySelectorAll: () => ([]),
+        createElement: () => ({ style: {} }),
+      },
+      fetch: async () => ({ json: async () => ({}) }),
+      EventSource: class { addEventListener() {} },
+      setInterval: () => {},
+      console: { log: () => {}, error: () => {} }
+    };
+    vm.createContext(sandbox);
+
+    // Evaluate the script (declarations and initial setup)
+    expect(() => {
+      script.runInContext(sandbox);
+    }).not.toThrow();
+
+    // Verify required functions are defined
+    expect(typeof sandbox.resetTimeline).toBe("function");
+    expect(typeof sandbox.resetRawLogs).toBe("function");
+  });
+
+  // symlinks containment tests (Finding codex-4-4)
+  it("rejects symlinks in run listing and direct requests", async () => {
+    // 1. Create a symlinked hash directory
+    const externalDir = fs.mkdtempSync(path.join(os.tmpdir(), "external-symlink-target-"));
+    const targetStateFile = path.join(externalDir, "state.json");
+
+    const mockExternalState = {
+      runId: "external-symlink-run",
+      repoRoot: "/tmp/external-repo",
+      status: "completed",
+      createdAt: new Date().toISOString(),
+      updatedAt: new Date().toISOString(),
+    };
+    fs.writeFileSync(targetStateFile, JSON.stringify(mockExternalState), "utf8");
+
+    // Create a symlinked hash under tmpDir
+    const symlinkHash = path.join(tmpDir, "symlink-hash");
+    try { fs.unlinkSync(symlinkHash); } catch {}
+    fs.symlinkSync(externalDir, symlinkHash, "dir");
+
+    // 2. Create a symlinked run directory inside safe hash
+    const symlinkRun = path.join(tmpDir, hash, "symlink-run");
+    try { fs.unlinkSync(symlinkRun); } catch {}
+    fs.symlinkSync(externalDir, symlinkRun, "dir");
+
+    // 3. Create a symlinked state file inside a real run dir
+    const symStateRunDir = path.join(tmpDir, hash, "run-with-symlink-state");
+    try { fs.rmSync(symStateRunDir, { recursive: true, force: true }); } catch {}
+    fs.mkdirSync(symStateRunDir, { recursive: true });
+
+    const symStatePath = path.join(symStateRunDir, "state.json");
+    try { fs.unlinkSync(symStatePath); } catch {}
+    fs.symlinkSync(targetStateFile, symStatePath);
+
+    // Verify listing rejects all symlinked items
+    const listRes = await makeRequest(`${baseUrl}/api/runs`);
+    const list = JSON.parse(listRes.body);
+    const ids = list.map((r: any) => r.runId);
+    expect(ids).not.toContain("external-symlink-run");
+    expect(ids).not.toContain("run-with-symlink-state");
+
+    // Verify direct API accesses to symlinked paths fail
+    const apiRes1 = await makeRequest(`${baseUrl}/api/runs/symlink-run`);
+    expect(apiRes1.status).toBe(404);
+
+    const apiRes2 = await makeRequest(`${baseUrl}/api/runs/run-with-symlink-state`);
+    expect(apiRes2.status).toBe(404);
+
+    // Clean up
+    fs.rmSync(externalDir, { recursive: true, force: true });
+    try { fs.unlinkSync(symlinkHash); } catch {}
+    try { fs.unlinkSync(symlinkRun); } catch {}
+    try { fs.rmSync(symStateRunDir, { recursive: true, force: true }); } catch {}
+  });
+
+  // Client-contract & SSE tests (Finding codex-4-5)
+  it("emits initial state snapshot and does not replay historical events over SSE", async () => {
+    return new Promise<void>((resolve, reject) => {
+      const req = http.request(`${baseUrl}/api/runs/${runId}/stream`, {
+        headers: { "Accept": "text/event-stream" }
+      }, (res) => {
+        let buffer = "";
+        let stateReceived = false;
+        let eventReceived = false;
+
+        res.on("data", (chunk) => {
+          buffer += chunk.toString();
+          if (buffer.includes("event: state")) {
+            stateReceived = true;
+          }
+          if (buffer.includes("event: event")) {
+            eventReceived = true;
+          }
+          // Once state event is read, test the assertions
+          if (stateReceived) {
+            req.destroy();
+            expect(stateReceived).toBe(true);
+            expect(eventReceived).toBe(false); // Historical events must not be replayed
+            resolve();
+          }
+        });
+        res.on("error", reject);
+      });
+      req.end();
+    });
+  });
+
+  it("closes SSE connection when state transitions to non-executing status", async () => {
+    const runDir = path.join(tmpDir, hash, runId);
+
+    return new Promise<void>((resolve, reject) => {
+      const req = http.request(`${baseUrl}/api/runs/${runId}/stream`, {
+        headers: { "Accept": "text/event-stream" }
+      }, (res) => {
+        res.on("data", (chunk) => {
+          const state = readState(runDir);
+          if (state && state.status === "executing") {
+            state.status = "completed";
+            writeState(runDir, state);
+          }
+        });
+        res.on("end", () => {
+          // SSE closed by server on terminal state change
+          resolve();
+        });
+        res.on("error", reject);
+      });
+      req.end();
+    });
+  });
+});
+
+describe("splitCompleteUtf8 helper", () => {
+  it("splits clean buffers fully", () => {
+    const buf = Buffer.from("hello world", "utf8");
+    const { complete, residual } = splitCompleteUtf8(buf);
+    expect(complete.toString("utf8")).toBe("hello world");
+    expect(residual.length).toBe(0);
+  });
+
+  it("correctly identifies incomplete UTF-8 characters at the end", () => {
+    const char = "中";
+    const buf = Buffer.from(char, "utf8");
+
+    const incompleteBuf = buf.subarray(0, 2);
+    const { complete, residual } = splitCompleteUtf8(incompleteBuf);
+    expect(complete.length).toBe(0);
+    expect(residual).toEqual(incompleteBuf);
+
+    const { complete: complete2, residual: residual2 } = splitCompleteUtf8(buf);
+    expect(complete2.toString("utf8")).toBe("中");
+    expect(residual2.length).toBe(0);
+  });
+});
+
+describe("UTF-8 boundary and EOF API progression", () => {
+  let tmpDir: string;
+  let server: http.Server;
+  let baseUrl: string;
+
+  beforeAll(async () => {
+    tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), "agent-workflow-web-utf8-"));
+    process.env.AGENT_WORKFLOW_DIR = tmpDir;
+
+    const runId = "utf8-run";
+    const runDir = path.join(tmpDir, "hash1", runId);
+    fs.mkdirSync(runDir, { recursive: true });
+
+    const mockState: WorkflowState = {
+      version: "1", runId, repoHash: "hash1", repoRoot: "/tmp",
+      executor: "claude", status: "executing", maxCycles: 1, currentCycle: 1,
+      cycles: [{ cycleIndex: 1, startedAt: new Date().toISOString(), executorAttemptLogs: ["cycle-1-exec.log"] }],
+      plan: { version: "1", title: "", planMarkdown: "", scope: [], acceptanceCriteria: [], verificationCommands: [] },
+      createdAt: new Date().toISOString(), updatedAt: new Date().toISOString(),
+    };
+    writeState(runDir, mockState);
+
+    // Write incomplete UTF-8 at EOF (3 bytes of a 4-byte emoji 🚀)
+    // 🚀 is F0 9F 9A 80
+    const logPath = attemptLogPath(runDir, 1, 0);
+    const incompleteEmoji = Buffer.from([0xF0, 0x9F, 0x9A]);
+    fs.writeFileSync(logPath, incompleteEmoji);
+
+    server = await startWorkflowWebServer(14320);
+    baseUrl = `http://127.0.0.1:14320`;
+  });
+
+  afterAll(() => {
+    return new Promise<void>((resolve) => {
+      server.close(() => {
+        fs.rmSync(tmpDir, { recursive: true, force: true });
+        resolve();
+      });
+    });
+  });
+
+  it("advances nextOffset without infinite loops when reading incomplete UTF-8 at EOF", async () => {
+    const res = await makeRequest(`${baseUrl}/api/runs/utf8-run/logs?cycle=1&attempt=0&offset=0&limit=4`);
+    const data = JSON.parse(res.body);
+    // Since it's incomplete and at EOF, it should just decode to replacement character (\\ufffd) and advance offset
+    expect(data.nextOffset).toBe(3); // advanced by 3 bytes
+    expect(data.hasMore).toBe(false); // nextOffset == fileSize (3 == 3)
+  });
+});
+
+describe("hasSymlinkInPath", () => {
+  it("detects symlinks at various levels", () => {
+    const tempRoot = fs.mkdtempSync(path.join(os.tmpdir(), "symlink-test-"));
+    const dirA = path.join(tempRoot, "dirA");
+    fs.mkdirSync(dirA);
+
+    const realFile = path.join(dirA, "real.txt");
+    fs.writeFileSync(realFile, "hello");
+
+    expect(hasSymlinkInPath(realFile, tempRoot)).toBe(false);
+
+    // Symlinked file
+    const symlinkFile = path.join(dirA, "sym.txt");
+    fs.symlinkSync(realFile, symlinkFile);
+    expect(hasSymlinkInPath(symlinkFile, tempRoot)).toBe(true);
+
+    // Symlinked directory
+    const symlinkDir = path.join(tempRoot, "dirB");
+    fs.symlinkSync(dirA, symlinkDir, "dir");
+    expect(hasSymlinkInPath(path.join(symlinkDir, "real.txt"), tempRoot)).toBe(true);
+
+    fs.rmSync(tempRoot, { recursive: true, force: true });
+  });
+});
diff --git a/src/workflow-web.ts b/src/workflow-web.ts
new file mode 100644
index 0000000..2afa320
--- /dev/null
+++ b/src/workflow-web.ts
@@ -0,0 +1,661 @@
+import http from "node:http";
+import fs from "node:fs";
+import path from "node:path";
+import { Buffer } from "node:buffer";
+import {
+  workflowsRoot,
+  findRunDir,
+  stateFilePath,
+  eventsFilePath,
+  attemptLogPath,
+  readState
+} from "./workflow-state.js";
+import { getAssetsHtml } from "./workflow-web-assets.js";
+
+// Helper to write JSON responses
+function sendJson(res: http.ServerResponse, status: number, obj: any) {
+  res.writeHead(status, {
+    "Content-Type": "application/json",
+  });
+  res.end(JSON.stringify(obj));
+}
+
+// Helper to send HTML
+function sendHtml(res: http.ServerResponse, status: number, html: string) {
+  res.writeHead(status, { "Content-Type": "text/html; charset=utf-8" });
+  res.end(html);
+}
+
+// Helper to send plain errors
+function sendError(res: http.ServerResponse, status: number, message: string) {
+  res.writeHead(status, { "Content-Type": "text/plain; charset=utf-8" });
+  res.end(message);
+}
+
+export function splitCompleteUtf8(buffer: Buffer): { complete: Buffer; residual: Buffer } {
+  const len = buffer.length;
+  if (len === 0) return { complete: buffer, residual: Buffer.alloc(0) };
+
+  const checkLen = Math.min(len, 4);
+  for (let i = 1; i <= checkLen; i++) {
+    const byte = buffer[len - i];
+    if ((byte & 0xC0) === 0xC0) {
+      let expectedBytes = 0;
+      if ((byte & 0xE0) === 0xC0) expectedBytes = 2;
+      else if ((byte & 0xF0) === 0xE0) expectedBytes = 3;
+      else if ((byte & 0xF8) === 0xF0) expectedBytes = 4;
+
+      if (i < expectedBytes) {
+        const complete = buffer.subarray(0, len - i) as Buffer;
+        const residual = buffer.subarray(len - i) as Buffer;
+        return { complete, residual };
+      }
+      break;
+    }
+    if ((byte & 0x80) === 0x00) {
+      break;
+    }
+  }
+  return { complete: buffer, residual: Buffer.alloc(0) as Buffer };
+}
+
+/**
+ * Verify that no segment of targetPath from rootDir downwards is a symlink.
+ * Blocks all symlinks (including in-root symlink aliases).
+ */
+export function hasSymlinkInPath(targetPath: string, rootDir: string): boolean {
+  try {
+    const resolvedRoot = path.resolve(rootDir);
+    const resolvedTarget = path.resolve(targetPath);
+    const relative = path.relative(resolvedRoot, resolvedTarget);
+    if (relative.startsWith('..') || path.isAbsolute(relative)) {
+      return true; // Out of bounds
+    }
+
+    let current = resolvedRoot;
+    if (relative === "") {
+      try {
+        return fs.lstatSync(current).isSymbolicLink();
+      } catch (err: any) {
+        if (err.code === 'ENOENT') return false;
+        return true;
+      }
+    }
+
+    const segments = relative.split(path.sep);
+    for (const segment of segments) {
+      current = path.join(current, segment);
+      try {
+        if (fs.lstatSync(current).isSymbolicLink()) {
+          return true;
+        }
+      } catch (err: any) {
+        if (err.code === 'ENOENT') return false;
+        return true;
+      }
+    }
+    return false;
+  } catch {
+    return true; // Reject on stat error
+  }
+}
+
+function getSafeRunDir(runId: string): string | undefined {
+  if (!/^[a-zA-Z0-9_\-\:]+$/.test(runId)) {
+    return undefined;
+  }
+  const dir = findRunDir(runId);
+  if (!dir) return undefined;
+
+  const root = workflowsRoot();
+  if (hasSymlinkInPath(dir, root)) {
+    return undefined;
+  }
+  return path.resolve(dir);
+}
+
+function isSafeLogPath(logPath: string, runDir: string): boolean {
+  if (hasSymlinkInPath(logPath, runDir)) {
+    return false;
+  }
+  const filename = path.basename(logPath);
+  return (
+    /^cycle-\d+-exec\.log$/.test(filename) ||
+    /^cycle-\d+-exec-retry-\d+\.log$/.test(filename) ||
+    /^cycle-\d+-agy\.log$/.test(filename)
+  );
+}
+
+function listAllRuns(): any[] {
+  const root = workflowsRoot();
+  try {
+    if (!fs.existsSync(root) || fs.lstatSync(root).isSymbolicLink()) return [];
+  } catch {
+    return [];
+  }
+
+  const results: any[] = [];
+  let repoHashes: string[] = [];
+  try {
+    repoHashes = fs.readdirSync(root);
+  } catch {
+    return [];
+  }
+
+  for (const hash of repoHashes) {
+    const hashDir = path.join(root, hash);
+    try {
+      const hashStat = fs.lstatSync(hashDir);
+      if (hashStat.isSymbolicLink() || !hashStat.isDirectory()) continue;
+
+      const runIds = fs.readdirSync(hashDir);
+      for (const runId of runIds) {
+        if (!/^[a-zA-Z0-9_\-\:]+$/.test(runId)) continue;
+        const runDir = path.join(hashDir, runId);
+        const runStat = fs.lstatSync(runDir);
+        if (runStat.isSymbolicLink() || !runStat.isDirectory()) continue;
+
+        const stateFile = stateFilePath(runDir);
+        if (!fs.existsSync(stateFile) || fs.lstatSync(stateFile).isSymbolicLink()) continue;
+
+        const fd = fs.openSync(stateFile, fs.constants.O_RDONLY | (fs.constants.O_NOFOLLOW || 0));
+        const stateStr = fs.readFileSync(fd, "utf8");
+        fs.closeSync(fd);
+
+        const state = JSON.parse(stateStr);
+        if (state && state.runId && state.status) {
+          results.push({
+            runId: state.runId,
+            repoRoot: state.repoRoot,
+            status: state.status,
+            executor: state.executor,
+            currentCycle: state.currentCycle,
+            maxCycles: state.maxCycles,
+            createdAt: state.createdAt,
+            updatedAt: state.updatedAt,
+            plan: {
+              title: state.plan?.title || "",
+            },
+          });
+        }
+      }
+    } catch {
+      // Ignore corrupt/disappearing/symlinked entries
+    }
+  }
+
+  results.sort((a, b) => {
+    const timeA = new Date(a.updatedAt || a.createdAt || 0).getTime();
+    const timeB = new Date(b.updatedAt || b.createdAt || 0).getTime();
+    return timeB - timeA;
+  });
+
+  return results;
+}
+
+function handleSseStream(req: http.IncomingMessage, res: http.ServerResponse, runId: string) {
+  const runDir = getSafeRunDir(runId);
+  if (!runDir) {
+    return sendError(res, 404, "Run directory not found or invalid run ID");
+  }
+
+  res.writeHead(200, {
+    "Content-Type": "text/event-stream",
+    "Cache-Control": "no-cache",
+    "Connection": "keep-alive",
+  });
+
+  let pollInterval: NodeJS.Timeout;
+  let heartbeatInterval: NodeJS.Timeout;
+  let watcher: fs.FSWatcher | undefined;
+  let cleanedUp = false;
+
+  // Single idempotent cleanup path declared before first poll
+  const cleanup = () => {
+    if (cleanedUp) return;
+    cleanedUp = true;
+    clearInterval(pollInterval);
+    clearInterval(heartbeatInterval);
+    if (watcher) {
+      try {
+        watcher.close();
+      } catch {
+        // ignore
+      }
+    }
+    res.end();
+  };
+
+  function pushEvent(event: string, data: string) {
+    if (cleanedUp) return;
+    res.write(`event: ${event}\n`);
+    const lines = data.split("\n");
+    for (const line of lines) {
+      res.write(`data: ${line}\n`);
+    }
+    res.write("\n");
+  }
+
+  let lastStateStr = "";
+  let lastEventsLineCount = 0;
+  let currentLogPath = "";
+  let logBytesRead = 0;
+  let logResidualBuffer = Buffer.alloc(0);
+
+  // Initialize historical event cursor to the current size to avoid replaying history over SSE
+  const eventsFile = eventsFilePath(runDir);
+  if (fs.existsSync(eventsFile) && !fs.lstatSync(eventsFile).isSymbolicLink()) {
+    try {
+      const fd = fs.openSync(eventsFile, fs.constants.O_RDONLY | (fs.constants.O_NOFOLLOW || 0));
+      const eventsStr = fs.readFileSync(fd, "utf8");
+      fs.closeSync(fd);
+      const lines = eventsStr.split("\n").filter(l => l.trim() !== "");
+      lastEventsLineCount = lines.length;
+    } catch {
+      // ignore
+    }
+  }
+
+  // Helper to resolve active log path from state
+  const getActiveLogPath = (stateObj: any) => {
+    if (!stateObj || stateObj.currentCycle === undefined) return "";
+    const cycle = stateObj.currentCycle;
+    let attempt = 0;
+    const progressFile = path.join(runDir, ".progress.json");
+    if (fs.existsSync(progressFile) && !fs.lstatSync(progressFile).isSymbolicLink()) {
+      try {
+        const fd = fs.openSync(progressFile, fs.constants.O_RDONLY | (fs.constants.O_NOFOLLOW || 0));
+        const progStr = fs.readFileSync(fd, "utf8");
+        fs.closeSync(fd);
+        const prog = JSON.parse(progStr);
+        if (prog && prog.cycleIndex === cycle && prog.attemptIndex !== undefined) {
+          attempt = prog.attemptIndex;
+        }
+      } catch {
+        // ignore
+      }
+    } else {
+      if (stateObj.cycles) {
+        const cyRec = stateObj.cycles.find((cy: any) => cy.cycleIndex === cycle);
+        if (cyRec && cyRec.executorAttemptLogs) {
+          attempt = Math.max(0, cyRec.executorAttemptLogs.length - 1);
+        }
+      }
+    }
+    return attemptLogPath(runDir, cycle, attempt);
+  };
+
+  const poll = () => {
+    if (cleanedUp) return;
+    try {
+      const stateFile = stateFilePath(runDir);
+      let stateObj: any = null;
+      if (fs.existsSync(stateFile) && !fs.lstatSync(stateFile).isSymbolicLink()) {
+        const fd = fs.openSync(stateFile, fs.constants.O_RDONLY | (fs.constants.O_NOFOLLOW || 0));
+        const stateStr = fs.readFileSync(fd, "utf8");
+        fs.closeSync(fd);
+
+        if (stateStr !== lastStateStr) {
+          lastStateStr = stateStr;
+          pushEvent("state", stateStr);
+        }
+        try {
+          stateObj = JSON.parse(stateStr);
+        } catch {
+          // ignore
+        }
+      }
+
+      if (fs.existsSync(eventsFile) && !fs.lstatSync(eventsFile).isSymbolicLink()) {
+        const fd = fs.openSync(eventsFile, fs.constants.O_RDONLY | (fs.constants.O_NOFOLLOW || 0));
+        const eventsStr = fs.readFileSync(fd, "utf8");
+        fs.closeSync(fd);
+
+        const lines = eventsStr.split("\n").filter(l => l.trim() !== "");
+        if (lines.length > lastEventsLineCount) {
+          const newLines = lines.slice(lastEventsLineCount);
+          lastEventsLineCount = lines.length;
+          for (const line of newLines) {
+            pushEvent("event", line);
+          }
+        }
+      }
+
+      if (stateObj) {
+        const activeLog = getActiveLogPath(stateObj);
+        if (activeLog && activeLog !== currentLogPath) {
+          currentLogPath = activeLog;
+          logBytesRead = 0;
+          logResidualBuffer = Buffer.alloc(0);
+
+          if (fs.existsSync(activeLog) && !fs.lstatSync(activeLog).isSymbolicLink()) {
+            logBytesRead = fs.statSync(activeLog).size;
+          }
+
+          pushEvent("log_rotation", JSON.stringify({
+            cycleIndex: stateObj.currentCycle,
+            attemptIndex: stateObj.cycles && stateObj.cycles[stateObj.currentCycle - 1] && stateObj.cycles[stateObj.currentCycle - 1].executorAttemptLogs ? Math.max(0, stateObj.cycles[stateObj.currentCycle - 1].executorAttemptLogs.length - 1) : 0,
+            logFilePath: activeLog,
+          }));
+        }
+      }
+
+      if (currentLogPath && fs.existsSync(currentLogPath) && !fs.lstatSync(currentLogPath).isSymbolicLink()) {
+        const stat = fs.statSync(currentLogPath);
+        if (stat.size < logBytesRead) {
+          logBytesRead = 0;
+          logResidualBuffer = Buffer.alloc(0);
+        }
+        if (stat.size > logBytesRead) {
+          const sizeToRead = stat.size - logBytesRead;
+          const buffer = Buffer.alloc(sizeToRead);
+          const fd = fs.openSync(currentLogPath, fs.constants.O_RDONLY | (fs.constants.O_NOFOLLOW || 0));
+          fs.readSync(fd, buffer, 0, sizeToRead, logBytesRead);
+          fs.closeSync(fd);
+
+          logBytesRead += sizeToRead;
+
+          const combined = Buffer.concat([logResidualBuffer, buffer]) as Buffer;
+          const { complete, residual } = splitCompleteUtf8(combined);
+          logResidualBuffer = residual as any;
+
+          if (complete.length > 0) {
+            pushEvent("log_append", complete.toString("utf8"));
+          }
+        }
+      }
+
+      // Close the connection when execution reaches a terminal/non-executing state
+      if (stateObj && stateObj.status !== "executing") {
+        cleanup();
+      }
+    } catch (err) {
+      console.error("Error polling run updates:", err);
+    }
+  };
+
+  // Pre-determine logBytesRead of current log before first state check to avoid replaying history
+  try {
+    const stateFile = stateFilePath(runDir);
+    if (fs.existsSync(stateFile) && !fs.lstatSync(stateFile).isSymbolicLink()) {
+      const fd = fs.openSync(stateFile, fs.constants.O_RDONLY | (fs.constants.O_NOFOLLOW || 0));
+      const stateStr = fs.readFileSync(fd, "utf8");
+      fs.closeSync(fd);
+      const stateObj = JSON.parse(stateStr);
+      currentLogPath = getActiveLogPath(stateObj);
+      if (currentLogPath && fs.existsSync(currentLogPath) && !fs.lstatSync(currentLogPath).isSymbolicLink()) {
+        logBytesRead = fs.statSync(currentLogPath).size;
+      }
+    }
+  } catch {
+    // ignore
+  }
+
+  // First poll runs before interval/watcher is initialized
+  poll();
+
+  if (!cleanedUp) {
+    try {
+      watcher = fs.watch(runDir, () => {
+        poll();
+      });
+    } catch {
+      // ignore
+    }
+
+    pollInterval = setInterval(poll, 250);
+
+    // Heartbeats
+    heartbeatInterval = setInterval(() => {
+      if (!cleanedUp) {
+        res.write(":\n\n");
+      }
+    }, 15000);
+  }
+
+  req.on("close", cleanup);
+  req.on("error", cleanup);
+}
+
+export function startWorkflowWebServer(port = 4317): Promise<http.Server> {
+  if (!Number.isInteger(port) || port < 1 || port > 65535) {
+    return Promise.reject(new Error("Port must be between 1 and 65535"));
+  }
+
+  return new Promise<http.Server>((resolve, reject) => {
+    const server = http.createServer((req, res) => {
+      // 1. Host validation
+      const host = req.headers.host || "";
+      if (!/^(localhost|127\.0\.0\.1)(:\d+)?$/i.test(host)) {
+        return sendError(res, 400, "Bad Request: Invalid Host header");
+      }
+
+      // 2. Origin validation
+      const origin = req.headers.origin;
+      if (origin && !/^https?:\/\/(localhost|127\.0\.0\.1)(:\d+)?$/i.test(origin)) {
+        return sendError(res, 403, "Forbidden: Invalid Origin");
+      }
+
+      // 3. Referer validation
+      const referer = req.headers.referer;
+      if (referer) {
+        try {
+          const parsedReferer = new URL(referer);
+          if (!/^(localhost|127\.0\.0\.1)$/i.test(parsedReferer.hostname)) {
+            return sendError(res, 403, "Forbidden: Invalid Referer");
+          }
+        } catch {
+          return sendError(res, 400, "Bad Request: Malformed Referer header");
+        }
+      }
+
+      const method = req.method;
+      if (method !== "GET" && method !== "HEAD") {
+        res.writeHead(405, { "Allow": "GET, HEAD" });
+        return res.end("Method Not Allowed");
+      }
+
+      const parsedUrl = new URL(req.url || "", `http://${host}`);
+      const pathname = parsedUrl.pathname;
+
+      if (pathname === "/" || pathname === "/index.html") {
+        if (method === "HEAD") {
+          res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+          return res.end();
+        }
+        return sendHtml(res, 200, getAssetsHtml());
+      }
+
+      if (pathname === "/api/runs") {
+        const list = listAllRuns();
+        if (method === "HEAD") {
+          res.writeHead(200, { "Content-Type": "application/json" });
+          return res.end();
+        }
+        return sendJson(res, 200, list);
+      }
+
+      const runMatch = pathname.match(/^\/api\/runs\/([a-zA-Z0-9_\-\:]+)$/);
+      if (runMatch) {
+        const runId = runMatch[1];
+        const runDir = getSafeRunDir(runId);
+        if (!runDir) {
+          return sendError(res, 404, "Run not found");
+        }
+        const stateFile = stateFilePath(runDir);
+        if (hasSymlinkInPath(stateFile, runDir)) {
+          return sendError(res, 404, "Run not found");
+        }
+        let stateStr = "";
+        try {
+          const fd = fs.openSync(stateFile, fs.constants.O_RDONLY | (fs.constants.O_NOFOLLOW || 0));
+          stateStr = fs.readFileSync(fd, "utf8");
+          fs.closeSync(fd);
+        } catch {
+          return sendError(res, 404, "Run state file is missing or corrupt");
+        }
+        let state: any;
+        try {
+          state = JSON.parse(stateStr);
+        } catch {
+          return sendError(res, 404, "Run state file is missing or corrupt");
+        }
+        if (method === "HEAD") {
+          res.writeHead(200, { "Content-Type": "application/json" });
+          return res.end();
+        }
+        return sendJson(res, 200, state);
+      }
+
+      const eventsMatch = pathname.match(/^\/api\/runs\/([a-zA-Z0-9_\-\:]+)\/events$/);
+      if (eventsMatch) {
+        const runId = eventsMatch[1];
+        const runDir = getSafeRunDir(runId);
+        if (!runDir) {
+          return sendError(res, 404, "Run not found");
+        }
+        const eventsFile = eventsFilePath(runDir);
+        if (hasSymlinkInPath(eventsFile, runDir)) {
+          return sendError(res, 404, "Events file is missing or contains symlinks");
+        }
+        let events: any[] = [];
+        if (fs.existsSync(eventsFile) && !fs.lstatSync(eventsFile).isSymbolicLink()) {
+          try {
+            const fd = fs.openSync(eventsFile, fs.constants.O_RDONLY | (fs.constants.O_NOFOLLOW || 0));
+            const content = fs.readFileSync(fd, "utf8");
+            fs.closeSync(fd);
+            events = content
+              .split("\n")
+              .filter(line => line.trim() !== "")
+              .map(line => JSON.parse(line));
+          } catch {
+            // ignore
+          }
+        }
+        if (method === "HEAD") {
+          res.writeHead(200, { "Content-Type": "application/json" });
+          return res.end();
+        }
+        return sendJson(res, 200, events);
+      }
+
+      const logsMatch = pathname.match(/^\/api\/runs\/([a-zA-Z0-9_\-\:]+)\/logs$/);
+      if (logsMatch) {
+        const runId = logsMatch[1];
+        const runDir = getSafeRunDir(runId);
+        if (!runDir) {
+          return sendError(res, 404, "Run not found");
+        }
+
+        const cycleStr = parsedUrl.searchParams.get("cycle") || "1";
+        const attemptStr = parsedUrl.searchParams.get("attempt") || "0";
+        const offsetStr = parsedUrl.searchParams.get("offset") || "0";
+        const limitStr = parsedUrl.searchParams.get("limit") || "100000";
+
+        const cycle = parseInt(cycleStr, 10);
+        const attempt = parseInt(attemptStr, 10);
+        const offset = parseInt(offsetStr, 10);
+        const limit = parseInt(limitStr, 10);
+
+        if (
+          !/^\d+$/.test(cycleStr) || cycle < 1 || cycle > 1000 ||
+          !/^\d+$/.test(attemptStr) || attempt < 0 || attempt > 1000 ||
+          !/^\d+$/.test(offsetStr) || offset < 0 || offset > 100 * 1024 * 1024 ||
+          !/^\d+$/.test(limitStr) || limit < 4 || limit > 10 * 1024 * 1024
+        ) {
+          return sendError(res, 400, "Bad Request: Invalid numeric parameters");
+        }
+
+        const type = parsedUrl.searchParams.get("type") || "exec";
+        if (type !== "exec" && type !== "agy") {
+          return sendError(res, 403, "Access to requested log file is forbidden");
+        }
+
+        let logPath = "";
+        if (type === "agy") {
+          logPath = path.join(runDir, `cycle-${cycle}-agy.log`);
+        } else {
+          logPath = attemptLogPath(runDir, cycle, attempt);
+        }
+
+        if (!isSafeLogPath(logPath, runDir)) {
+          return sendError(res, 403, "Access to requested log file is forbidden");
+        }
+
+        if (!fs.existsSync(logPath)) {
+          if (method === "HEAD") {
+            res.writeHead(200, { "Content-Type": "application/json" });
+            return res.end();
+          }
+          return sendJson(res, 200, { content: "", nextOffset: 0, size: 0, hasMore: false });
+        }
+
+        let logContent = "";
+        let fileSize = 0;
+        let nextOffset = offset;
+        try {
+          const stat = fs.statSync(logPath);
+          fileSize = stat.size;
+          const start = Math.min(offset, fileSize);
+          const end = Math.min(start + limit, fileSize);
+          const readLength = end - start;
+
+          if (readLength > 0) {
+            const fd = fs.openSync(logPath, fs.constants.O_RDONLY | (fs.constants.O_NOFOLLOW || 0));
+            const buffer = Buffer.alloc(readLength);
+            fs.readSync(fd, buffer, 0, readLength, start);
+            fs.closeSync(fd);
+            const { complete } = splitCompleteUtf8(buffer);
+            if (complete.length === 0) {
+              logContent = buffer.toString("utf8");
+              nextOffset = start + buffer.length;
+            } else {
+              logContent = complete.toString("utf8");
+              nextOffset = start + complete.length;
+            }
+          } else {
+            nextOffset = end;
+          }
+        } catch (err: any) {
+          return sendError(res, 500, `Error reading log file: ${err.message}`);
+        }
+
+        if (method === "HEAD") {
+          res.writeHead(200, { "Content-Type": "application/json" });
+          return res.end();
+        }
+        return sendJson(res, 200, {
+          content: logContent,
+          nextOffset,
+          size: fileSize,
+          hasMore: nextOffset < fileSize,
+        });
+      }
+
+      const streamMatch = pathname.match(/^\/api\/runs\/([a-zA-Z0-9_\-\:]+)\/stream$/);
+      if (streamMatch) {
+        const runId = streamMatch[1];
+        if (method === "HEAD") {
+          res.writeHead(200, {
+            "Content-Type": "text/event-stream",
+            "Cache-Control": "no-cache",
+            "Connection": "keep-alive",
+          });
+          return res.end();
+        }
+        return handleSseStream(req, res, runId);
+      }
+
+      return sendError(res, 404, "Not Found");
+    });
+
+    server.on("error", (err: any) => {
+      reject(err);
+    });
+
+    server.listen(port, "127.0.0.1", () => {
+      process.stdout.write(`Local web console started.\nAccess URL: http://127.0.0.1:${port}/\n`);
+      resolve(server);
+    });
+  });
+}