npm - patchwarden - Versions diffs - 0.6.1 → 0.6.4 - Mend

patchwarden 0.6.1 → 0.6.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (65) hide show

package/PatchWarden-Control-Tray.cmd +11 -0
package/PatchWarden-Control.cmd +6 -0
package/PatchWarden-Desktop.cmd +5 -0
package/PatchWarden.cmd +1 -1
package/README.en.md +106 -18
package/README.md +30 -19
package/Restart-PatchWarden-Control.cmd +6 -0
package/Stop-PatchWarden.cmd +11 -0
package/dist/controlCenter.d.ts +14 -0
package/dist/controlCenter.js +2002 -0
package/dist/doctor.js +3 -3
package/dist/version.d.ts +1 -1
package/dist/version.js +1 -1
package/docs/control-center/README.md +33 -0
package/docs/control-center/control-center-daily-driver.md +211 -0
package/docs/control-center/control-center-mvp.md +205 -0
package/docs/control-center/control-center-phase2.md +159 -0
package/docs/demo.md +3 -0
package/docs/release-v0.6.4.md +45 -0
package/examples/openai-tunnel/README.md +5 -5
package/examples/openai-tunnel/tunnel-client.example.yaml +3 -3
package/package.json +23 -15
package/scripts/README.md +47 -0
package/scripts/{brand-check.js → checks/brand-check.js} +2 -2
package/scripts/checks/control-center-smoke.js +1098 -0
package/scripts/{control-smoke.js → checks/control-smoke.js} +17 -3
package/scripts/{doctor-smoke.js → checks/doctor-smoke.js} +1 -1
package/scripts/{http-mcp-smoke.js → checks/http-mcp-smoke.js} +2 -2
package/scripts/{lifecycle-smoke.js → checks/lifecycle-smoke.js} +12 -12
package/scripts/{mcp-manifest-check.js → checks/mcp-manifest-check.js} +2 -2
package/scripts/{mcp-smoke.js → checks/mcp-smoke.js} +4 -2
package/scripts/{package-manifest-check.js → checks/package-manifest-check.js} +2 -1
package/scripts/{tunnel-supervisor-smoke.js → checks/tunnel-supervisor-smoke.js} +2 -2
package/scripts/{unit-tests.js → checks/unit-tests.js} +1 -1
package/scripts/{watcher-supervisor-smoke.js → checks/watcher-supervisor-smoke.js} +11 -5
package/scripts/control/control-center-tray.ps1 +281 -0
package/scripts/{get-patchwarden-health.ps1 → control/get-patchwarden-health.ps1} +3 -3
package/scripts/{manage-patchwarden.ps1 → control/manage-patchwarden.ps1} +30 -4
package/scripts/control/restart-control-center.ps1 +173 -0
package/scripts/{restart-patchwarden.ps1 → control/restart-patchwarden.ps1} +1 -1
package/scripts/control/start-control-center.ps1 +263 -0
package/scripts/{start-patchwarden-tunnel.ps1 → control/start-patchwarden-tunnel.ps1} +48 -6
package/scripts/control/stop-patchwarden.ps1 +114 -0
package/scripts/launchers/Check-PatchWarden-Health.cmd +1 -1
package/scripts/launchers/Reset-PatchWarden-Tunnel-Key.cmd +1 -1
package/scripts/launchers/Restart-PatchWarden.cmd +1 -1
package/scripts/launchers/Start-PatchWarden-Direct-Tunnel.cmd +1 -1
package/scripts/launchers/Start-PatchWarden-Tunnel.cmd +1 -1
package/scripts/{patchwarden-mcp-direct.cmd → mcp/patchwarden-mcp-direct.cmd} +1 -1
package/scripts/{patchwarden-mcp-stdio.cmd → mcp/patchwarden-mcp-stdio.cmd} +1 -1
package/scripts/{pack-clean.js → release/pack-clean.js} +9 -1
package/src/controlCenter.ts +2152 -0
package/src/doctor.ts +4 -4
package/src/version.ts +1 -1
package/ui/colors_and_type.css +141 -0
package/ui/pages/audit.html +743 -0
package/ui/pages/dashboard.html +1154 -0
package/ui/pages/direct-sessions.html +652 -0
package/ui/pages/logs.html +502 -0
package/ui/pages/task-detail.html +1229 -0
package/ui/pages/tasks.html +702 -0
package/ui/pages/workspace.html +947 -0
package/ui/partials/project-shell.html +362 -0
package/ui/vendor/lucide.js +12 -0
package/ui/vendor/tailwindcss-browser.js +947 -0

package/ui/pages/dashboard.html ADDED Viewed

@@ -0,0 +1,1154 @@
+<!DOCTYPE html>
+<html lang="zh-CN" class="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>控制台</title>
+    <style id="theme-vars">
+/* PatchWarden Brand CSS — Dark Security Theme */
+/* Prefix: pw */
+:root {
+  /* ── Primary Palette ── */
+  --pw-bg: #0a0e14;
+  --pw-bg-elevated: #111820;
+  --pw-bg-surface: #161d27;
+  --pw-bg-hover: #1c2533;
+  --pw-bg-active: #222d3d;
+  --pw-border: #1e2a3a;
+  --pw-border-subtle: #172030;
+  --pw-border-focus: #2dd4a8;
+  /* ── Text ── */
+  --pw-text-primary: #e8edf4;
+  --pw-text-secondary: #8b99ad;
+  --pw-text-tertiary: #5a6a80;
+  --pw-text-inverse: #0a0e14;
+  --pw-text-accent: #2dd4a8;
+  /* ── Brand Accent — Security Green ── */
+  --pw-accent: #2dd4a8;
+  --pw-accent-hover: #34eabc;
+  --pw-accent-muted: rgba(45, 212, 168, 0.12);
+  --pw-accent-subtle: rgba(45, 212, 168, 0.06);
+  /* ── State Colors ── */
+  --pw-state-success: #22c55e;
+  --pw-state-success-bg: rgba(34, 197, 94, 0.1);
+  --pw-state-warning: #f59e0b;
+  --pw-state-warning-bg: rgba(245, 158, 11, 0.1);
+  --pw-state-error: #ef4444;
+  --pw-state-error-bg: rgba(239, 68, 68, 0.1);
+  --pw-state-info: #3b82f6;
+  --pw-state-info-bg: rgba(59, 130, 246, 0.1);
+  /* ── Radius ── */
+  --pw-radius-sm: 4px;
+  --pw-radius-md: 8px;
+  --pw-radius-lg: 12px;
+  --pw-radius-full: 9999px;
+  /* ── Shadows — static surfaces use border only; floating layers use subtle shadow ── */
+  --pw-shadow-float: 0 8px 32px rgba(0, 0, 0, 0.4);
+  --pw-shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.5);
+  /* ── Typography ── */
+  --pw-font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
+  --pw-font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas', monospace;
+  --pw-text-xs: 0.75rem;
+  --pw-text-sm: 0.8125rem;
+  --pw-text-base: 0.875rem;
+  --pw-text-lg: 1rem;
+  --pw-text-xl: 1.25rem;
+  --pw-text-2xl: 1.5rem;
+  --pw-text-3xl: 2rem;
+  --pw-leading-tight: 1.25;
+  --pw-leading-normal: 1.5;
+  --pw-leading-relaxed: 1.625;
+  --pw-weight-normal: 400;
+  --pw-weight-medium: 500;
+  --pw-weight-semibold: 600;
+  --pw-weight-bold: 700;
+  /* ── Spacing ── */
+  --pw-space-1: 4px;
+  --pw-space-2: 8px;
+  --pw-space-3: 12px;
+  --pw-space-4: 16px;
+  --pw-space-5: 20px;
+  --pw-space-6: 24px;
+  --pw-space-8: 32px;
+  --pw-space-10: 40px;
+  --pw-space-12: 48px;
+  /* ── Transitions ── */
+  --pw-transition-fast: 150ms ease;
+  --pw-transition-base: 200ms ease;
+  --pw-transition-slow: 300ms ease;
+}
+html.dark {
+  --pw-bg: #0a0e14;
+  --pw-bg-elevated: #111820;
+  --pw-bg-surface: #161d27;
+  --pw-bg-hover: #1c2533;
+  --pw-bg-active: #222d3d;
+  --pw-border: #1e2a3a;
+  --pw-border-subtle: #172030;
+  --pw-text-primary: #e8edf4;
+  --pw-text-secondary: #8b99ad;
+  --pw-text-tertiary: #5a6a80;
+}
+    </style>
+    <script src="/vendor/tailwindcss-browser.js"></script>
+    <script src="/vendor/lucide.js"></script>
+    <style type="text/tailwindcss">
+  @theme inline {
+    --color-accent: var(--pw-accent);
+    --color-border: var(--pw-border);
+  }
+  @layer base {
+    body { background: var(--pw-background); color: var(--pw-text-primary); }
+    td, th { @apply break-words; word-break: break-all; word-break: auto-phrase; }
+    th { @apply whitespace-nowrap; }
+  }
+    </style>
+    <style>
+      .no-scrollbar::-webkit-scrollbar { display: none; }
+      .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
+      [data-icon] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        -webkit-mask-size: contain;
+        mask-size: contain;
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-position: center;
+        mask-position: center;
+        background-color: currentColor;
+      }
+    </style>
+</head>
+<body class="flex h-screen overflow-hidden">
+  <!-- ========== SIDEBAR ========== -->
+  <aside class="flex flex-col w-60 shrink-0 h-screen" style="background-color: var(--pw-bg); border-right: 1px solid var(--pw-border);">
+    <!-- Logo Area -->
+    <div class="flex items-center gap-3 px-5 py-5" style="border-bottom: 1px solid var(--pw-border-subtle);">
+      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--pw-accent)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
+        <path d="M9 12l2 2 4-4"/>
+      </svg>
+      <span class="truncate text-lg font-semibold tracking-tight" style="color: var(--pw-text-primary); font-family: var(--pw-font-mono);">PatchWarden</span>
+    </div>
+    <!-- Navigation -->
+    <nav class="flex-1 flex flex-col gap-1 px-3 pt-4 overflow-y-auto">
+      <a href="/pages/dashboard.html" data-nav-key="dashboard" data-active="true" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors truncate" style="color: var(--pw-text-secondary); font-family: var(--pw-font-sans);">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0">
+          <rect x="3" y="3" width="7" height="7" rx="1"/>
+          <rect x="14" y="3" width="7" height="7" rx="1"/>
+          <rect x="3" y="14" width="7" height="7" rx="1"/>
+          <rect x="14" y="14" width="7" height="7" rx="1"/>
+        </svg>
+        <span class="truncate" data-zh="控制台" data-en="Dashboard">控制台</span>
+      </a>
+      <a href="/pages/tasks.html" data-nav-key="tasks" data-dom-id="nav-tasks" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors truncate" style="color: var(--pw-text-secondary); font-family: var(--pw-font-sans);">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0">
+          <path d="M9 11l3 3L22 4"/>
+          <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/>
+        </svg>
+        <span class="truncate" data-zh="任务面板" data-en="Tasks">任务面板</span>
+      </a>
+      <a href="/pages/workspace.html" data-nav-key="workspace" data-dom-id="nav-workspace" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors truncate" style="color: var(--pw-text-secondary); font-family: var(--pw-font-sans);">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0">
+          <path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2z"/>
+        </svg>
+        <span class="truncate" data-zh="工作区" data-en="Workspace">工作区</span>
+      </a>
+      <a href="/pages/audit.html" data-nav-key="audit" data-dom-id="nav-audit" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors truncate" style="color: var(--pw-text-secondary); font-family: var(--pw-font-sans);">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+          <polyline points="14 2 14 8 20 8"/>
+          <line x1="16" y1="13" x2="8" y2="13"/>
+          <line x1="16" y1="17" x2="8" y2="17"/>
+          <polyline points="10 9 9 9 8 9"/>
+        </svg>
+        <span class="truncate" data-zh="审计日志" data-en="Audit Log">审计日志</span>
+      </a>
+      <a href="/pages/direct-sessions.html" data-nav-key="direct-sessions" data-dom-id="nav-direct-sessions" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors truncate" style="color: var(--pw-text-secondary); font-family: var(--pw-font-sans);">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0">
+          <path d="M4 15s1-1 4-1 5 2 8 2 4-1 4-1V3s-1 1-4 1-5-2-8-2-4 1-4 1z"/>
+          <line x1="4" y1="22" x2="4" y2="15"/>
+        </svg>
+        <span class="truncate" data-zh="Direct 会话" data-en="Direct Sessions">Direct 会话</span>
+      </a>
+      <a href="/pages/logs.html" data-nav-key="logs" data-dom-id="nav-logs" class="flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors truncate" style="color: var(--pw-text-secondary); font-family: var(--pw-font-sans);">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0">
+          <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
+          <polyline points="14 2 14 8 20 8"/>
+          <line x1="16" y1="13" x2="8" y2="13"/>
+          <line x1="16" y1="17" x2="8" y2="17"/>
+        </svg>
+        <span class="truncate" data-zh="日志" data-en="Logs">日志</span>
+      </a>
+    </nav>
+    <!-- Bottom Section -->
+    <div class="px-5 py-4" style="border-top: 1px solid var(--pw-border-subtle);">
+      <div class="flex items-center gap-2 mb-3">
+        <span class="text-xs font-medium px-2 py-0.5 rounded-md whitespace-nowrap" style="color: var(--pw-text-tertiary); background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border-subtle); font-family: var(--pw-font-mono);">Control Center</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <span id="sidebar-status-dot" class="shrink-0 w-2 h-2 rounded-full" style="background-color: var(--pw-state-warning);"></span>
+        <span id="sidebar-status-text" class="text-xs truncate" style="color: var(--pw-text-tertiary);">连接中…</span>
+      </div>
+    </div>
+  </aside>
+  <!-- ========== MAIN AREA ========== -->
+  <div class="flex flex-col flex-1 min-w-0 h-screen overflow-hidden">
+    <!-- Top Bar -->
+    <header class="flex items-center justify-between shrink-0 px-6 py-3" style="border-bottom: 1px solid var(--pw-border); background-color: var(--pw-bg);">
+      <h1 class="text-lg font-semibold truncate min-w-0" data-zh="控制台" data-en="Dashboard" style="color: var(--pw-text-primary); font-family: var(--pw-font-sans); text-wrap: balance; word-break: keep-all; overflow-wrap: break-word;">
+        控制台
+      </h1>
+      <div class="flex items-center gap-3 shrink-0">
+        <span id="header-workspace" class="text-xs truncate max-w-[260px]" style="color: var(--pw-text-tertiary); font-family: var(--pw-font-mono);" title=""></span>
+        <div class="shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold" style="background-color: var(--pw-accent-muted); color: var(--pw-accent); font-family: var(--pw-font-mono);">PW</div>
+      </div>
+    </header>
+    <!-- Page Content Area -->
+    <main class="flex-1 overflow-y-auto p-6" style="background-color: var(--pw-bg-elevated);">
+      <!-- ===== TOP TOOLBAR ===== -->
+      <div class="flex flex-wrap items-center gap-2 mb-4">
+        <button data-action="start-all" class="flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap" style="background-color: var(--pw-state-success); color: var(--pw-text-inverse); font-family: var(--pw-font-sans);">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polygon points="5 3 19 12 5 21 5 3"/></svg>
+          <span>Start All</span>
+        </button>
+        <button data-action="stop-all" class="flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap" style="background-color: var(--pw-state-error); color: #fff; font-family: var(--pw-font-sans);">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><rect x="6" y="6" width="12" height="12" rx="1"/></svg>
+          <span>Stop All</span>
+        </button>
+        <button data-action="restart-all" class="flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap" style="background-color: var(--pw-state-warning); color: var(--pw-text-inverse); font-family: var(--pw-font-sans);">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/></svg>
+          <span>Restart All</span>
+        </button>
+        <button data-action="refresh" class="flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap" style="background-color: var(--pw-bg-surface); color: var(--pw-text-primary); border: 1px solid var(--pw-border); font-family: var(--pw-font-sans);">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M3 21v-5h5"/></svg>
+          <span>Refresh</span>
+        </button>
+        <div class="flex-1 min-w-0"></div>
+        <button data-action="open-core-tunnel" class="flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap" style="background-color: transparent; color: var(--pw-accent); border: 1px solid var(--pw-accent); font-family: var(--pw-font-sans);">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+          <span>Open Core Tunnel UI</span>
+        </button>
+        <button data-action="open-direct-tunnel" class="flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap" style="background-color: transparent; color: var(--pw-accent); border: 1px solid var(--pw-accent); font-family: var(--pw-font-sans);">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
+          <span>Open Direct Tunnel UI</span>
+        </button>
+        <button data-action="open-logs-folder" class="flex items-center gap-1.5 px-3.5 py-2 rounded-lg text-sm font-medium transition-colors whitespace-nowrap" style="background-color: var(--pw-bg-surface); color: var(--pw-text-primary); border: 1px solid var(--pw-border); font-family: var(--pw-font-sans);">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20h16a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.93a2 2 0 0 1-1.66-.9l-.82-1.2A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13c0 1.1.9 2 2 2z"/></svg>
+          <span>Open Logs Folder</span>
+        </button>
+      </div>
+      <!-- ===== ERROR BANNER ===== -->
+      <div id="error-banner" class="hidden mb-4 rounded-lg px-4 py-3 text-sm" style="background-color: var(--pw-state-error-bg); border: 1px solid var(--pw-state-error); color: var(--pw-state-error); font-family: var(--pw-font-sans);"></div>
+      <!-- ===== SETUP CHECKLIST ===== -->
+      <div id="setup-checklist-card" class="rounded-lg mb-4" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+        <div class="flex items-center justify-between px-4 py-3" style="border-bottom: 1px solid var(--pw-border);">
+          <h2 class="text-sm font-semibold truncate" style="color: var(--pw-text-primary);">Setup checklist</h2>
+          <span id="setup-checklist-summary" class="text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary);">checking</span>
+        </div>
+        <div id="setup-checklist-body" class="grid grid-cols-1 md:grid-cols-3 gap-0"></div>
+      </div>
+      <!-- ===== TOAST CONTAINER (fixed, top-right) ===== -->
+      <div id="toast-container" class="fixed top-4 right-4 z-50 flex flex-col gap-2 max-w-sm pointer-events-none"></div>
+      <!-- ===== SERVICE CARDS ROW ===== -->
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 mb-6">
+        <div id="card-core" class="rounded-lg" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+          <div class="px-4 py-6 text-center text-sm" style="color: var(--pw-text-tertiary);">加载中…</div>
+        </div>
+        <div id="card-direct" class="rounded-lg" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+          <div class="px-4 py-6 text-center text-sm" style="color: var(--pw-text-tertiary);">加载中…</div>
+        </div>
+      </div>
+      <!-- ===== HEALTH SUGGESTIONS CARD ===== -->
+      <div id="suggestions-card" class="hidden rounded-lg mb-6" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+        <div class="flex items-center justify-between px-4 py-3" style="border-bottom: 1px solid var(--pw-border);">
+          <h2 class="text-sm font-semibold truncate" data-zh="健康建议" data-en="Health Suggestions" style="color: var(--pw-text-primary);">健康建议</h2>
+          <span id="suggestions-count" class="text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary);">—</span>
+        </div>
+        <div id="suggestions-body" class="px-4 py-2"></div>
+      </div>
+      <!-- ===== TWO-COLUMN LAYOUT ===== -->
+      <div class="grid grid-cols-1 lg:grid-cols-5 gap-4 mb-6">
+        <!-- LEFT COLUMN: 最近任务 (3/5 width) -->
+        <div class="lg:col-span-3 rounded-lg" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+          <div class="flex items-center justify-between px-4 py-3" style="border-bottom: 1px solid var(--pw-border);">
+            <h2 class="text-sm font-semibold truncate" data-zh="最近任务" data-en="Recent Tasks" style="color: var(--pw-text-primary);">最近任务</h2>
+            <span id="recent-tasks-count" class="text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary);">—</span>
+          </div>
+          <div id="recent-tasks-body">
+            <div class="px-4 py-6 text-center text-sm" style="color: var(--pw-text-tertiary);">加载中…</div>
+          </div>
+        </div>
+        <!-- RIGHT COLUMN: 系统状态 (2/5 width) -->
+        <div class="lg:col-span-2 rounded-lg" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+          <div class="px-4 py-3" style="border-bottom: 1px solid var(--pw-border);">
+            <h2 class="text-sm font-semibold truncate" data-zh="系统状态" data-en="System Status" style="color: var(--pw-text-primary);">系统状态</h2>
+          </div>
+          <div id="system-status-body" class="px-4 py-2">
+            <div class="py-3 text-center text-sm" style="color: var(--pw-text-tertiary);">加载中…</div>
+          </div>
+        </div>
+      </div>
+      <!-- ===== 活动日志 ===== -->
+      <div class="rounded-lg mb-6" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+        <div class="flex items-center justify-between px-4 py-3" style="border-bottom: 1px solid var(--pw-border);">
+          <h2 class="text-sm font-semibold truncate" data-zh="活动日志" data-en="Activity Log" style="color: var(--pw-text-primary);">活动日志</h2>
+          <span class="text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary);">Core + Direct stdout 尾部</span>
+        </div>
+        <div id="activity-log-body">
+          <div class="px-4 py-3 text-xs" style="color: var(--pw-text-tertiary);">加载日志中…</div>
+        </div>
+      </div>
+      <!-- ===== 活动时间线 (Events) ===== -->
+      <div class="rounded-lg" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+        <div class="flex items-center justify-between px-4 py-3" style="border-bottom: 1px solid var(--pw-border);">
+          <h2 class="text-sm font-semibold truncate" data-zh="活动时间线" data-en="Activity Timeline" style="color: var(--pw-text-primary);">活动时间线</h2>
+          <span id="events-count" class="text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary);">—</span>
+        </div>
+        <div id="events-body" class="px-4 py-2">
+          <div class="py-3 text-center text-sm" style="color: var(--pw-text-tertiary);">加载中…</div>
+        </div>
+      </div>
+    </main>
+  </div>
+  <!-- Nav + input styling -->
+  <style>
+    [data-nav-key] {
+      transition: background-color var(--pw-transition-fast), color var(--pw-transition-fast);
+    }
+    [data-nav-key]:hover {
+      background-color: var(--pw-bg-hover);
+      color: var(--pw-text-primary);
+    }
+    [data-nav-key][data-active="true"] {
+      background-color: var(--pw-accent-subtle);
+      color: var(--pw-accent);
+      border-left: 3px solid var(--pw-accent);
+      padding-left: 9px;
+    }
+    input[type="text"]:focus {
+      border-color: var(--pw-border-focus);
+      background-color: var(--pw-bg-hover);
+    }
+    input[type="text"]::placeholder {
+      color: var(--pw-text-tertiary);
+    }
+    /* Task row hover */
+    .divide-y > div:hover {
+      background-color: var(--pw-bg-hover);
+    }
+    /* Button hover states */
+    button:hover {
+      opacity: 0.9;
+    }
+    button:active {
+      opacity: 0.8;
+    }
+    button:disabled {
+      opacity: 0.6;
+      cursor: not-allowed;
+    }
+    [data-action] {
+      cursor: pointer;
+    }
+    /* Spinner */
+    @keyframes pw-spin {
+      from { transform: rotate(0deg); }
+      to { transform: rotate(360deg); }
+    }
+    .pw-spin {
+      animation: pw-spin 0.6s linear infinite;
+    }
+    /* Task row hover */
+    [data-task-row]:hover {
+      background-color: var(--pw-bg-hover);
+    }
+    /* Stat card hover */
+    [style*="border-image"] {
+      transition: background-color var(--pw-transition-fast);
+    }
+    /* Toast notifications */
+    .pw-toast {
+      pointer-events: auto;
+      display: flex;
+      align-items: flex-start;
+      gap: 8px;
+      padding: 10px 12px;
+      border-radius: 8px;
+      border: 1px solid var(--pw-border);
+      background-color: var(--pw-bg-surface);
+      box-shadow: var(--pw-shadow-float);
+      font-family: var(--pw-font-sans);
+      font-size: 12px;
+      color: var(--pw-text-primary);
+      animation: pw-toast-in 200ms ease;
+      max-width: 360px;
+    }
+    .pw-toast.pw-toast-success { border-left: 3px solid var(--pw-state-success); }
+    .pw-toast.pw-toast-warning { border-left: 3px solid var(--pw-state-warning); }
+    .pw-toast.pw-toast-error { border-left: 3px solid var(--pw-state-error); }
+    .pw-toast.pw-toast-info { border-left: 3px solid var(--pw-state-info); }
+    .pw-toast .pw-toast-title { font-weight: 600; margin-bottom: 2px; }
+    .pw-toast .pw-toast-msg { color: var(--pw-text-secondary); word-break: break-word; }
+    .pw-toast .pw-toast-close { margin-left: auto; cursor: pointer; color: var(--pw-text-tertiary); font-size: 14px; line-height: 1; padding: 0 2px; }
+    .pw-toast .pw-toast-close:hover { color: var(--pw-text-primary); }
+    @keyframes pw-toast-in {
+      from { opacity: 0; transform: translateX(20px); }
+      to { opacity: 1; transform: translateX(0); }
+    }
+    .pw-toast.pw-toast-leaving { animation: pw-toast-out 200ms ease forwards; }
+    @keyframes pw-toast-out {
+      to { opacity: 0; transform: translateX(20px); }
+    }
+  </style>
+  <script>
+  (function () {
+    'use strict';
+    let controlToken = null;
+    let statusTimer = null;
+    // ---------- Utilities ----------
+    function $(id) { return document.getElementById(id); }
+    function escapeHtml(s) {
+      if (s === null || s === undefined) return '';
+      return String(s).replace(/[&<>"']/g, function (c) {
+        return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+      });
+    }
+    function shortId(id) {
+      if (!id) return '—';
+      const s = String(id);
+      return s.length > 22 ? s.slice(0, 10) + '…' + s.slice(-8) : s;
+    }
+    function shortSha(sha) {
+      if (!sha) return '—';
+      const s = String(sha);
+      return s.length > 16 ? s.slice(0, 16) : s;
+    }
+    function fmtTime(s) {
+      if (!s) return '—';
+      const d = new Date(s);
+      if (isNaN(d.getTime())) return escapeHtml(s);
+      return d.toLocaleString();
+    }
+    function statusKind(s) {
+      const v = String(s || '').toLowerCase();
+      if (['running', 'active', 'available', 'healthy', 'ready', 'ok', 'online', 'started', 'completed', 'done', 'success', 'live'].indexOf(v) >= 0) return 'success';
+      if (['pending', 'stale', 'degraded', 'paused', 'waiting', 'queued'].indexOf(v) >= 0) return 'warning';
+      if (['failed', 'error', 'missing', 'stopped', 'unavailable', 'dead', 'crashed'].indexOf(v) >= 0) return 'error';
+      // substring fallback for reason text like "connection refused"
+      if (v.indexOf('refus') >= 0 || v.indexOf('error') >= 0 || v.indexOf('fail') >= 0) return 'error';
+      return 'neutral';
+    }
+    function statusColors(kind) {
+      if (kind === 'success') return { color: 'var(--pw-state-success)', bg: 'var(--pw-state-success-bg)' };
+      if (kind === 'warning') return { color: 'var(--pw-state-warning)', bg: 'var(--pw-state-warning-bg)' };
+      if (kind === 'error') return { color: 'var(--pw-state-error)', bg: 'var(--pw-state-error-bg)' };
+      return { color: 'var(--pw-text-secondary)', bg: 'var(--pw-bg-hover)' };
+    }
+    function dotHtml(kind) {
+      const c = statusColors(kind);
+      return '<span class="shrink-0 w-2 h-2 rounded-full" style="background-color: ' + c.color + ';"></span>';
+    }
+    function badgeHtml(text, kind) {
+      const c = statusColors(kind);
+      return '<span class="shrink-0 text-xs font-medium px-2 py-0.5 rounded-full whitespace-nowrap" style="color: ' + c.color + '; background-color: ' + c.bg + ';">' + escapeHtml(text) + '</span>';
+    }
+    function showError(msg) {
+      const el = $('error-banner');
+      if (!el) return;
+      el.textContent = msg;
+      el.classList.remove('hidden');
+    }
+    function clearError() {
+      const el = $('error-banner');
+      if (el) el.classList.add('hidden');
+    }
+    function setSidebarStatus(kind, text) {
+      const dot = $('sidebar-status-dot');
+      const txt = $('sidebar-status-text');
+      const c = statusColors(kind);
+      if (dot) dot.style.backgroundColor = c.color;
+      if (txt) txt.textContent = text;
+    }
+    // ---------- Toast notifications (dedup by key) ----------
+    const shownToastKeys = new Set();
+    function showToast(kind, title, msg, key) {
+      // kind: success | warning | error | info
+      // key: dedup id; if already shown and still active, skip.
+      if (key && shownToastKeys.has(key)) return;
+      if (key) shownToastKeys.add(key);
+      const container = $('toast-container');
+      if (!container) return;
+      const el = document.createElement('div');
+      el.className = 'pw-toast pw-toast-' + (kind || 'info');
+      el.innerHTML =
+        '<div class="min-w-0 flex-1">'
+        + '<div class="pw-toast-title">' + escapeHtml(title || '') + '</div>'
+        + (msg ? '<div class="pw-toast-msg">' + escapeHtml(msg) + '</div>' : '')
+        + '</div>'
+        + '<span class="pw-toast-close" title="关闭">×</span>';
+      const closeBtn = el.querySelector('.pw-toast-close');
+      if (closeBtn) closeBtn.addEventListener('click', function () { dismissToast(el, key); });
+      container.appendChild(el);
+      // Auto-dismiss after 8s; keep the key deduped until dismissed so repeated
+      // state doesn't re-fire the same event.
+      setTimeout(function () { dismissToast(el, key); }, 8000);
+    }
+    function dismissToast(el, key) {
+      if (!el || el.classList.contains('pw-toast-leaving')) return;
+      el.classList.add('pw-toast-leaving');
+      setTimeout(function () {
+        if (el.parentNode) el.parentNode.removeChild(el);
+        if (key) shownToastKeys.delete(key);
+      }, 220);
+    }
+    // ---------- Health suggestions ----------
+    function renderSuggestions(status) {
+      const card = $('suggestions-card');
+      const body = $('suggestions-body');
+      const countEl = $('suggestions-count');
+      if (!card || !body) return;
+      const suggestions = (status && Array.isArray(status.suggestions)) ? status.suggestions : [];
+      if (suggestions.length === 0) {
+        card.classList.add('hidden');
+        return;
+      }
+      card.classList.remove('hidden');
+      if (countEl) countEl.textContent = String(suggestions.length);
+      let html = '';
+      suggestions.forEach(function (s) {
+        const kind = s.severity === 'error' ? 'error' : (s.severity === 'warning' ? 'warning' : 'info');
+        const c = statusColors(kind);
+        const actionHtml = s.action
+          ? '<button class="suggestion-action ml-2 text-xs px-2 py-0.5 rounded whitespace-nowrap" data-suggestion-action="' + escapeHtml(s.action) + '" style="background-color: ' + c.bg + '; color: ' + c.color + '; border: 1px solid ' + c.color + ';">执行</button>'
+          : '';
+        const linkHtml = s.link
+          ? '<a href="' + escapeHtml(s.link) + '" class="ml-2 text-xs px-2 py-0.5 rounded whitespace-nowrap" style="background-color: var(--pw-accent-muted); color: var(--pw-accent);">查看</a>'
+          : '';
+        html +=
+          '<div class="flex items-center gap-2 py-1.5" style="border-bottom: 1px solid var(--pw-border-subtle);">'
+          + dotHtml(kind)
+          + '<span class="flex-1 min-w-0 text-xs" style="color: var(--pw-text-primary);">' + escapeHtml(s.message || '') + '</span>'
+          + '<span class="text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary); font-family: var(--pw-font-mono);">' + escapeHtml(s.code || '') + '</span>'
+          + actionHtml + linkHtml
+          + '</div>';
+      });
+      body.innerHTML = html;
+      // Wire suggestion action buttons
+      body.querySelectorAll('[data-suggestion-action]').forEach(function (btn) {
+        btn.addEventListener('click', function () {
+          const action = btn.getAttribute('data-suggestion-action');
+          if (action) postAction(action, btn).then(function () {
+            return Promise.all([refreshStatus(), refreshTasks()]);
+          }).catch(function (err) {
+            showError('建议操作失败: ' + err.message);
+          });
+        });
+      });
+    }
+    // ---------- Setup checklist ----------
+    function renderSetupChecklist(status) {
+      const body = $('setup-checklist-body');
+      const summary = $('setup-checklist-summary');
+      if (!body) return;
+      const setup = (status && status.setup) || {};
+      const tunnel = setup.tunnel_client || {};
+      const watcher = setup.watcher || ((status && status.watcher) || {});
+      const workspaceRoot = setup.workspace_root || (status && status.workspace_root) || '';
+      const items = [
+        {
+          label: 'tunnel-client.exe',
+          ok: !!tunnel.available,
+          value: tunnel.available ? (tunnel.path || 'available') : 'missing',
+          hint: tunnel.available ? 'Ready for Web UI and tray start/restart.' : 'Expected at TUNNEL_CLIENT_EXE, PATCHWARDEN_TUNNEL_CLIENT_EXE, PATH, or the saved D:\\ai_agent tunnel-client folder.'
+        },
+        {
+          label: 'workspaceRoot',
+          ok: !!workspaceRoot,
+          value: workspaceRoot || 'not loaded',
+          hint: 'This is the workspace currently managed by PatchWarden tasks.'
+        },
+        {
+          label: 'Watcher',
+          ok: watcher.status === 'healthy',
+          value: watcher.status || 'missing',
+          hint: watcher.status === 'healthy' ? 'Task execution watcher is healthy.' : (watcher.reason || 'Start Core/Watcher when you want queued tasks to execute.')
+        }
+      ];
+      const missingCount = items.filter(function (item) { return !item.ok; }).length;
+      if (summary) {
+        summary.textContent = missingCount === 0 ? 'ready' : (missingCount + ' needs attention');
+        summary.style.color = missingCount === 0 ? 'var(--pw-state-success)' : 'var(--pw-state-warning)';
+      }
+      let html = '';
+      items.forEach(function (item) {
+        const kind = item.ok ? 'success' : 'warning';
+        const c = statusColors(kind);
+        html +=
+          '<div class="min-w-0 px-4 py-3" style="border-right: 1px solid var(--pw-border-subtle);">'
+          + '<div class="flex items-center gap-2 mb-1">'
+          + dotHtml(kind)
+          + '<span class="text-xs font-semibold whitespace-nowrap" style="color: var(--pw-text-primary); font-family: var(--pw-font-mono);">' + escapeHtml(item.label) + '</span>'
+          + '<span class="ml-auto text-xs px-2 py-0.5 rounded-full" style="color: ' + c.color + '; background-color: ' + c.bg + ';">' + (item.ok ? 'ok' : 'check') + '</span>'
+          + '</div>'
+          + '<div class="text-xs truncate" style="color: var(--pw-text-secondary); font-family: var(--pw-font-mono);" title="' + escapeHtml(item.value) + '">' + escapeHtml(item.value) + '</div>'
+          + '<div class="text-xs mt-1" style="color: var(--pw-text-tertiary);">' + escapeHtml(item.hint) + '</div>'
+          + '</div>';
+      });
+      body.innerHTML = html;
+    }
+    // ---------- Activity timeline (events) ----------
+    function eventKind(type) {
+      if (!type) return 'neutral';
+      if (type.indexOf('stopped') >= 0 || type.indexOf('failed') >= 0 || type.indexOf('.failed') >= 0) return 'error';
+      if (type.indexOf('started') >= 0 || type.indexOf('done') >= 0 || type.indexOf('pass') >= 0) return 'success';
+      if (type.indexOf('stale') >= 0 || type.indexOf('warn') >= 0 || type.indexOf('reconcil') >= 0) return 'warning';
+      if (type.indexOf('status_changed') >= 0) return 'info';
+      return 'neutral';
+    }
+    function renderEvents(payload) {
+      const body = $('events-body');
+      const countEl = $('events-count');
+      if (!body) return;
+      const events = (payload && Array.isArray(payload.events)) ? payload.events : [];
+      if (countEl) countEl.textContent = '共 ' + events.length + ' 条';
+      if (events.length === 0) {
+        body.innerHTML = '<div class="py-3 text-center text-sm" style="color: var(--pw-text-tertiary);">暂无事件</div>';
+        return;
+      }
+      // Newest first (server returns ascending; reverse for display)
+      const ordered = events.slice().reverse();
+      let html = '';
+      ordered.forEach(function (ev) {
+        const kind = eventKind(ev.type);
+        const c = statusColors(kind);
+        const payloadStr = ev.payload ? JSON.stringify(ev.payload) : '';
+        html +=
+          '<div class="flex items-start gap-2 py-1.5" style="border-bottom: 1px solid var(--pw-border-subtle);">'
+          + '<span class="shrink-0 mt-0.5 w-2 h-2 rounded-full" style="background-color: ' + c.color + ';"></span>'
+          + '<span class="shrink-0 text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary); font-family: var(--pw-font-mono);">' + escapeHtml(fmtTime(ev.timestamp)) + '</span>'
+          + '<span class="shrink-0 text-xs font-medium whitespace-nowrap" style="color: ' + c.color + '; font-family: var(--pw-font-mono);">' + escapeHtml(ev.type || '') + '</span>'
+          + '<span class="flex-1 min-w-0 text-xs truncate" style="color: var(--pw-text-secondary); font-family: var(--pw-font-mono);" title="' + escapeHtml(payloadStr) + '">' + escapeHtml(payloadStr) + '</span>'
+          + '</div>';
+      });
+      body.innerHTML = html;
+    }
+    async function refreshEvents() {
+      try {
+        const data = await fetchJson('/api/events?limit=30');
+        renderEvents(data);
+      } catch (err) {
+        const body = $('events-body');
+        if (body) body.innerHTML = '<div class="py-3 text-center text-sm" style="color: var(--pw-state-error);">事件加载失败: ' + escapeHtml(err.message) + '</div>';
+      }
+    }
+    // ---------- Notification detection (toasts on status change) ----------
+    // Tracks the previous /api/status snapshot to detect transitions.
+    let prevNotifySnapshot = null;
+    function detectAndNotify(status) {
+      if (!status) return;
+      const curr = {
+        core_available: !!(status.core && status.core.available),
+        direct_available: !!(status.direct && status.direct.available),
+        watcher_status: (status.watcher && status.watcher.status) || '',
+        task_statuses: {},
+      };
+      const tasks = (status.tasks && status.tasks.tasks) || [];
+      tasks.forEach(function (t) {
+        if (t && t.task_id) curr.task_statuses[t.task_id] = t.status;
+      });
+      if (prevNotifySnapshot) {
+        // core available -> error
+        if (prevNotifySnapshot.core_available && !curr.core_available) {
+          showToast('error', 'Core 不可用', 'PatchWarden Core 已停止响应', 'core_unavailable');
+        } else if (!prevNotifySnapshot.core_available && curr.core_available) {
+          showToast('success', 'Core 已就绪', 'PatchWarden Core 已恢复可用', 'core_available');
+        }
+        // direct available -> error
+        if (prevNotifySnapshot.direct_available && !curr.direct_available) {
+          showToast('error', 'Direct 不可用', 'PatchWarden Direct 已停止响应', 'direct_unavailable');
+        } else if (!prevNotifySnapshot.direct_available && curr.direct_available) {
+          showToast('success', 'Direct 已就绪', 'PatchWarden Direct 已恢复可用', 'direct_available');
+        }
+        // watcher healthy -> stale
+        if (prevNotifySnapshot.watcher_status !== curr.watcher_status) {
+          if (curr.watcher_status === 'stale' || curr.watcher_status === 'unreadable') {
+            showToast('error', 'Watcher 异常', 'Watcher 状态变为 ' + curr.watcher_status, 'watcher_' + curr.watcher_status);
+          } else if (curr.watcher_status === 'healthy' && (prevNotifySnapshot.watcher_status === 'stale' || prevNotifySnapshot.watcher_status === 'unreadable')) {
+            showToast('success', 'Watcher 已恢复', 'Watcher 状态变为 healthy', 'watcher_healthy');
+          }
+        }
+        // task running -> done/failed
+        for (const id in curr.task_statuses) {
+          const prevStatus = prevNotifySnapshot.task_statuses[id];
+          const newStatus = curr.task_statuses[id];
+          if (prevStatus && prevStatus !== newStatus) {
+            if (newStatus === 'done') {
+              showToast('success', '任务完成', '任务 ' + id.slice(0, 12) + '… 已完成', 'task_' + id + '_done');
+            } else if (newStatus === 'failed' || newStatus === 'failed_verification' || newStatus === 'failed_scope_violation' || newStatus === 'failed_policy_violation' || newStatus === 'timeout') {
+              showToast('error', '任务失败', '任务 ' + id.slice(0, 12) + '… 状态: ' + newStatus, 'task_' + id + '_' + newStatus);
+            }
+          }
+        }
+      }
+      prevNotifySnapshot = curr;
+    }
+    // ---------- Audit toast polling (slow) ----------
+    let seenAuditKeys = new Set();
+    async function refreshAuditForToasts() {
+      try {
+        const data = await fetchJson('/api/audit');
+        const audits = (data && Array.isArray(data.audits)) ? data.audits : [];
+        audits.forEach(function (a) {
+          const key = (a.task_id || a.session_id || '') + '|' + (a.checked_at || '');
+          if (seenAuditKeys.has(key)) return;
+          // Only notify on new audits seen after initial load; seed the set on
+          // first poll so existing audits don't all fire toasts.
+          if (seenAuditKeys.size < 100 && !auditSeeded) {
+            seenAuditKeys.add(key);
+            return;
+          }
+          seenAuditKeys.add(key);
+          const verdict = String(a.verdict || a.decision || '').toLowerCase();
+          const label = a.task_id ? ('任务 ' + String(a.task_id).slice(0, 12) + '…') : ('会话 ' + String(a.session_id || '').slice(0, 12) + '…');
+          if (verdict === 'fail' || verdict === 'failed') {
+            showToast('error', '审计未通过', label + ' 审计结果: fail', 'audit_' + key);
+          } else if (verdict === 'warn' || verdict === 'warning') {
+            showToast('warning', '审计警告', label + ' 审计结果: warn', 'audit_' + key);
+          } else if (verdict === 'pass' || verdict === 'passed') {
+            showToast('success', '审计通过', label + ' 审计结果: pass', 'audit_' + key);
+          }
+        });
+        auditSeeded = true;
+      } catch {
+        /* audit polling is best-effort */
+      }
+    }
+    let auditSeeded = false;
+    // ---------- Network ----------
+    async function fetchJson(url) {
+      const res = await fetch(url);
+      if (!res.ok) throw new Error('HTTP ' + res.status + ' · ' + url);
+      return res.json();
+    }
+    async function loadToken() {
+      try {
+        const data = await fetchJson('/control-token.json');
+        controlToken = data.token || null;
+      } catch (err) {
+        controlToken = null;
+        console.error('loadToken failed:', err);
+      }
+    }
+    async function postAction(url, btnEl) {
+      if (!controlToken) await loadToken();
+      const orig = btnEl ? btnEl.innerHTML : null;
+      if (btnEl) {
+        btnEl.disabled = true;
+        btnEl.innerHTML =
+          '<span class="inline-block w-3 h-3 align-middle border-2 border-current border-t-transparent rounded-full pw-spin"></span>' +
+          '<span class="ml-1.5">处理中…</span>';
+      }
+      try {
+        const res = await fetch(url, {
+          method: 'POST',
+          headers: { 'X-PatchWarden-Control-Token': controlToken || '' }
+        });
+        let data = null;
+        try { data = await res.json(); } catch (_) { /* ignore */ }
+        if (!res.ok) {
+          const msg = (data && (data.error || data.reason || data.message)) || ('HTTP ' + res.status);
+          throw new Error(msg);
+        }
+        return data;
+      } finally {
+        if (btnEl) {
+          btnEl.disabled = false;
+          btnEl.innerHTML = orig;
+        }
+      }
+    }
+    // ---------- Render: Service Card ----------
+    function renderServiceCard(prefix, label, status) {
+      const cardEl = $('card-' + prefix);
+      if (!cardEl) return;
+      const svc = (status && status[prefix]) || {};
+      const tunnel = (status && status.tunnel && status.tunnel[prefix]) || {};
+      const tools = (status && status.tools && status.tools[prefix]) || {};
+      const available = !!svc.available;
+      const kind = available ? 'success' : 'error';
+      const dotColor = available ? 'var(--pw-state-success)' : 'var(--pw-state-error)';
+      const reasonText = svc.reason ? escapeHtml(svc.reason) : '—';
+      const rows = [
+        { label: 'PID', html: tunnel.pid != null ? escapeHtml(tunnel.pid) : '—' },
+        { label: 'tool_profile', html: tools.tool_profile ? escapeHtml(tools.tool_profile) : '—' },
+        { label: 'tool_count', html: tools.tool_count != null ? escapeHtml(tools.tool_count) : '—' },
+        {
+          label: 'health',
+          html: available
+            ? '<span style="color: var(--pw-state-success);">available</span>'
+            : '<span style="color: var(--pw-state-error);">unavailable</span>',
+          text: available ? 'available' : 'unavailable'
+        },
+        { label: 'reason', html: reasonText },
+        { label: 'last_error', html: tunnel.last_error ? escapeHtml(tunnel.last_error) : '—' }
+      ];
+      let rowsHtml = '';
+      rows.forEach(function (r, i) {
+        const last = i === rows.length - 1;
+        const styleAttr = last ? '' : ' style="border-bottom: 1px solid var(--pw-border-subtle);"';
+        const text = r.text != null ? escapeHtml(r.text) : r.html;
+        rowsHtml +=
+          '<div class="flex items-center justify-between gap-3 py-1.5"' + styleAttr + '>'
+          + '<span class="text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary); font-family: var(--pw-font-mono);">' + r.label + '</span>'
+          + '<span class="text-xs text-right min-w-0 truncate" style="color: var(--pw-text-primary); font-family: var(--pw-font-mono);" title="' + text + '">' + r.html + '</span>'
+          + '</div>';
+      });
+      cardEl.innerHTML =
+        '<div class="px-4 py-3 flex items-center justify-between gap-2" style="border-bottom: 1px solid var(--pw-border);">'
+        + '<div class="flex items-center gap-2 min-w-0">'
+        + '<span class="shrink-0 w-2.5 h-2.5 rounded-full" style="background-color: ' + dotColor + ';"></span>'
+        + '<h2 class="text-sm font-semibold truncate" style="color: var(--pw-text-primary); font-family: var(--pw-font-sans);">' + escapeHtml(label) + '</h2>'
+        + '</div>'
+        + badgeHtml(available ? 'available' : 'unavailable', kind)
+        + '</div>'
+        + '<div class="px-4 py-2">' + rowsHtml + '</div>';
+    }
+    // ---------- Render: System Status ----------
+    function renderSystemStatus(status) {
+      const el = $('system-status-body');
+      if (!el) return;
+      const watcher = (status && status.watcher) || {};
+      const tunnel = (status && status.tunnel) || {};
+      const tools = (status && status.tools && status.tools.core) || {};
+      const agents = (status && status.agents) || [];
+      const watcherKind = statusKind(watcher.status);
+      const coreReady = !!(tunnel.core && tunnel.core.ready);
+      const directReady = !!(tunnel.direct && tunnel.direct.ready);
+      const tunnelReady = coreReady && directReady;
+      const tunnelKind = tunnelReady ? 'success' : (coreReady || directReady ? 'warning' : 'error');
+      let agentsHtml = '';
+      if (!agents.length) {
+        agentsHtml = '<span class="text-xs" style="color: var(--pw-text-tertiary);">无</span>';
+      } else {
+        agents.forEach(function (a) {
+          const k = a.available ? 'success' : 'error';
+          agentsHtml +=
+            '<span class="inline-flex items-center gap-1.5 text-xs px-2 py-0.5 rounded" style="background-color: var(--pw-bg-hover); color: var(--pw-text-secondary); font-family: var(--pw-font-mono);">'
+            + dotHtml(k) + escapeHtml(a.name || '?')
+            + '</span>';
+        });
+      }
+      function row(label, valueHtml, kind) {
+        return '<div class="flex items-center justify-between gap-3 py-1.5" style="border-bottom: 1px solid var(--pw-border-subtle);">'
+          + '<span class="text-sm whitespace-nowrap" style="color: var(--pw-text-secondary); font-family: var(--pw-font-sans);">' + label + '</span>'
+          + '<span class="flex items-center gap-2 min-w-0">' + (kind !== undefined ? dotHtml(kind) : '') + valueHtml + '</span>'
+          + '</div>';
+      }
+      const watcherText = escapeHtml(watcher.status || '—') +
+        (watcher.last_heartbeat_at ? ' · ' + fmtTime(watcher.last_heartbeat_at) : '');
+      el.innerHTML =
+        row('Watcher',
+          '<span class="text-xs whitespace-nowrap" style="color: var(--pw-text-primary); font-family: var(--pw-font-mono);">' + watcherText + '</span>',
+          watcherKind)
+        + row('Tunnel ready',
+          '<span class="text-xs whitespace-nowrap" style="color: var(--pw-text-primary); font-family: var(--pw-font-mono);">core ' + (coreReady ? '✓' : '✗') + ' / direct ' + (directReady ? '✓' : '✗') + '</span>',
+          tunnelKind)
+        + row('schema_epoch',
+          '<span class="text-xs whitespace-nowrap" style="color: var(--pw-text-primary); font-family: var(--pw-font-mono);">' + (tools.schema_epoch != null ? escapeHtml(tools.schema_epoch) : '—') + '</span>',
+          undefined)
+        + row('tool_manifest_sha256',
+          '<span class="text-xs whitespace-nowrap" style="color: var(--pw-text-primary); font-family: var(--pw-font-mono);" title="' + escapeHtml(tools.tool_manifest_sha256 || '') + '">' + shortSha(tools.tool_manifest_sha256) + '</span>',
+          undefined)
+        + '<div class="pt-2">'
+        + '<div class="text-xs mb-1.5" style="color: var(--pw-text-tertiary); font-family: var(--pw-font-sans);">Agents</div>'
+        + '<div class="flex flex-wrap gap-1.5">' + agentsHtml + '</div>'
+        + '</div>';
+    }
+    // ---------- Render: Recent Tasks ----------
+    function renderTasks(payload) {
+      const bodyEl = $('recent-tasks-body');
+      const countEl = $('recent-tasks-count');
+      if (!bodyEl) return;
+      const tasks = (payload && payload.tasks) || [];
+      const total = (payload && typeof payload.total === 'number') ? payload.total : tasks.length;
+      const top = tasks.slice(0, 5);
+      if (countEl) countEl.textContent = '共 ' + total + ' 条 · 显示 ' + top.length;
+      if (!top.length) {
+        bodyEl.innerHTML = '<div class="px-4 py-6 text-center text-sm" style="color: var(--pw-text-tertiary);">暂无任务</div>';
+        return;
+      }
+      let html = '';
+      top.forEach(function (t) {
+        const kind = statusKind(t.status);
+        const c = statusColors(kind);
+        const href = '/pages/task-detail.html?id=' + encodeURIComponent(t.task_id || '');
+        html +=
+          '<a href="' + href + '" data-task-row class="flex items-center gap-3 px-4 py-3 transition-colors cursor-pointer" style="border-bottom: 1px solid var(--pw-border-subtle);">'
+          + '<span class="shrink-0 text-xs font-medium px-2 py-0.5 rounded whitespace-nowrap" style="color: var(--pw-text-secondary); background-color: var(--pw-bg-hover); font-family: var(--pw-font-mono);" title="' + escapeHtml(t.task_id || '') + '">' + escapeHtml(shortId(t.task_id)) + '</span>'
+          + '<span class="flex-1 min-w-0 text-sm truncate" style="color: var(--pw-text-primary);" title="' + escapeHtml(t.title || '') + '">' + escapeHtml(t.title || '—') + '</span>'
+          + '<span class="shrink-0 text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary); font-family: var(--pw-font-mono);" title="phase">' + escapeHtml(t.phase || '—') + '</span>'
+          + '<span class="shrink-0 text-xs font-medium px-2 py-0.5 rounded-full whitespace-nowrap" style="color: ' + c.color + '; background-color: ' + c.bg + ';">' + escapeHtml(t.status || '—') + '</span>'
+          + '<span class="shrink-0 text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary);">' + escapeHtml(fmtTime(t.created_at)) + '</span>'
+          + '</a>';
+      });
+      bodyEl.innerHTML = html;
+    }
+    // ---------- Render: Activity Log ----------
+    async function refreshLogs() {
+      const el = $('activity-log-body');
+      if (!el) return;
+      el.innerHTML = '<div class="px-4 py-3 text-xs" style="color: var(--pw-text-tertiary);">加载日志中…</div>';
+      let coreText = '';
+      let directText = '';
+      try {
+        const core = await fetchJson('/api/logs/core');
+        if (core && core.stdout) coreText = String(core.stdout);
+        if (!coreText && core && core.reason) coreText = '[error] ' + core.reason;
+      } catch (e) {
+        coreText = '[fetch-error] ' + e.message;
+      }
+      try {
+        const direct = await fetchJson('/api/logs/direct');
+        if (direct && direct.stdout) directText = String(direct.stdout);
+        if (!directText && direct && direct.reason) directText = '[error] ' + direct.reason;
+      } catch (e) {
+        directText = '[fetch-error] ' + e.message;
+      }
+      function tail(text, n) {
+        if (!text) return '';
+        const lines = text.replace(/\r\n/g, '\n').split('\n');
+        if (lines.length <= n) return text;
+        return '…(' + (lines.length - n) + ' 行已省略)\n' + lines.slice(lines.length - n).join('\n');
+      }
+      const merged =
+        '=== Core stdout (tail) ===\n' + (tail(coreText, 200) || '(空)') +
+        '\n\n=== Direct stdout (tail) ===\n' + (tail(directText, 200) || '(空)') + '\n';
+      el.innerHTML =
+        '<details class="px-4 py-3">'
+        + '<summary class="cursor-pointer text-xs font-medium" style="color: var(--pw-text-primary); font-family: var(--pw-font-sans);">Show Core / Direct log tails</summary>'
+        + '<pre class="mt-3 text-xs overflow-auto m-0" style="color: var(--pw-text-secondary); font-family: var(--pw-font-mono); white-space: pre-wrap; word-break: break-all; max-height: 320px;">' + escapeHtml(merged) + '</pre>'
+        + '</details>';
+    }
+    // ---------- Refresh orchestrators ----------
+    async function refreshStatus() {
+      try {
+        const data = await fetchJson('/api/status');
+        clearError();
+        renderServiceCard('core', 'PatchWarden Core (chatgpt_core)', data);
+        renderServiceCard('direct', 'PatchWarden Direct (chatgpt_direct)', data);
+        renderSetupChecklist(data);
+        renderSystemStatus(data);
+        renderSuggestions(data);
+        detectAndNotify(data);
+        // Sidebar + header cosmetics wired to real state
+        const watcher = (data && data.watcher) || {};
+        const wKind = statusKind(watcher.status);
+        setSidebarStatus(wKind, watcher.status ? ('Watcher: ' + watcher.status) : '已连接');
+        const wsEl = $('header-workspace');
+        if (wsEl && data && data.workspace_root) {
+          wsEl.textContent = data.workspace_root;
+          wsEl.setAttribute('title', data.workspace_root);
+        }
+      } catch (err) {
+        showError('加载状态失败: ' + err.message);
+        setSidebarStatus('error', '状态获取失败');
+      }
+    }
+    async function refreshTasks() {
+      try {
+        const data = await fetchJson('/api/tasks');
+        renderTasks(data);
+      } catch (err) {
+        const bodyEl = $('recent-tasks-body');
+        if (bodyEl) {
+          bodyEl.innerHTML = '<div class="px-4 py-3 text-sm" style="color: var(--pw-state-error);">任务加载失败: ' + escapeHtml(err.message) + '</div>';
+        }
+      }
+    }
+    async function refreshAll() {
+      await Promise.all([refreshStatus(), refreshTasks(), refreshLogs(), refreshEvents()]);
+    }
+    // ---------- Actions ----------
+    async function handleAction(action, btnEl) {
+      try {
+        if (action === 'refresh') {
+          await Promise.all([refreshStatus(), refreshTasks()]);
+          return;
+        }
+        if (action === 'open-core-tunnel' || action === 'open-direct-tunnel') {
+          const which = action === 'open-core-tunnel' ? 'core' : 'direct';
+          const orig = btnEl ? btnEl.innerHTML : null;
+          if (btnEl) {
+            btnEl.disabled = true;
+            btnEl.innerHTML = '<span class="inline-block w-3 h-3 align-middle border-2 border-current border-t-transparent rounded-full pw-spin"></span><span class="ml-1.5">加载中…</span>';
+          }
+          try {
+            const data = await fetchJson('/api/tunnel-ui-url');
+            const entry = data && data[which];
+            if (!entry || !entry.url) {
+              showError((which === 'core' ? 'Core' : 'Direct') + ' 隧道 UI 不可用: ' + (entry && entry.reason ? entry.reason : '未提供 URL'));
+            } else {
+              window.open(entry.url, '_blank', 'noopener');
+            }
+          } finally {
+            if (btnEl) {
+              btnEl.disabled = false;
+              btnEl.innerHTML = orig;
+            }
+          }
+          return;
+        }
+        const map = {
+          'start-all': '/api/start-all',
+          'stop-all': '/api/stop-all',
+          'restart-all': '/api/restart-all',
+          'open-logs-folder': '/api/open-logs-folder'
+        };
+        const url = map[action];
+        if (!url) return;
+        await postAction(url, btnEl);
+        // Refresh state after state-changing POSTs (open-logs-folder has no state change)
+        if (action !== 'open-logs-folder') {
+          await Promise.all([refreshStatus(), refreshTasks()]);
+        }
+      } catch (err) {
+        showError('操作失败 (' + action + '): ' + err.message);
+      }
+    }
+    // ---------- Init ----------
+    document.addEventListener('DOMContentLoaded', function () {
+      document.querySelectorAll('[data-action]').forEach(function (btn) {
+        btn.addEventListener('click', function () {
+          handleAction(btn.getAttribute('data-action'), btn);
+        });
+      });
+      loadToken().then(function () {
+        auditSeeded = false;
+        seenAuditKeys = new Set();
+        return refreshAll().then(function () {
+          // Seed audit keys after first load so existing audits don't all fire toasts.
+          return refreshAuditForToasts();
+        });
+      }).catch(function (err) {
+        showError('初始化失败: ' + err.message);
+      });
+      // Auto-refresh /api/status every 30s (no logs to avoid performance issues)
+      statusTimer = setInterval(function () { refreshStatus(); }, 30000);
+      // Refresh activity timeline every 60s
+      setInterval(function () { refreshEvents(); }, 60000);
+      // Audit toast polling: every 90s, best-effort
+      setInterval(function () { refreshAuditForToasts(); }, 90000);
+    });
+  })();
+  </script>
+  <script>lucide.createIcons();</script>
+</body>
+</html>