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/task-detail.html ADDED Viewed

@@ -0,0 +1,1229 @@
+<!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 data-zh="任务详情" data-en="Task Detail">任务详情</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;
+      }
+      .pw-spin { animation: pw-spin 1s linear infinite; }
+      @keyframes pw-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+    </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-dom-id="nav-dashboard" 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" 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">
+          <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);">Core v0.6.0</span>
+      </div>
+      <div class="flex items-center gap-2">
+        <span class="shrink-0 w-2 h-2 rounded-full" style="background-color: var(--pw-state-success);"></span>
+        <span class="text-xs truncate" style="color: var(--pw-text-tertiary);">Connected</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="Task Detail" 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-2 shrink-0">
+        <button id="btnRefresh" title="刷新" class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors" style="background-color: var(--pw-bg-surface); color: var(--pw-text-secondary); border: 1px solid var(--pw-border-subtle); font-family: var(--pw-font-sans);">
+          <svg id="btnRefreshIcon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/>
+            <path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/>
+          </svg>
+          <span data-zh="刷新" data-en="Refresh">刷新</span>
+        </button>
+        <button id="btnCopyId" title="复制 task_id" class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors" style="background-color: var(--pw-bg-surface); color: var(--pw-text-secondary); border: 1px solid var(--pw-border-subtle); 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"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>
+          <span data-zh="复制 ID" data-en="Copy ID">复制 ID</span>
+        </button>
+        <button id="btnOpenFolder" title="打开任务目录" class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors" style="background-color: var(--pw-bg-surface); color: var(--pw-text-secondary); border: 1px solid var(--pw-border-subtle); 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="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
+          <span data-zh="打开目录" data-en="Open Folder">打开目录</span>
+        </button>
+        <button id="btnAudit" title="运行 audit_task" class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium whitespace-nowrap transition-colors" style="background-color: var(--pw-accent-muted); color: var(--pw-accent); border: 1px solid rgba(45, 212, 168, 0.3); 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="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 data-zh="运行审计" data-en="Run Audit">运行审计</span>
+        </button>
+        <div class="shrink-0 w-8 h-8 rounded-full flex items-center justify-center text-xs font-semibold ml-2" 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);">
+      <!-- Breadcrumb + Back -->
+      <div class="flex items-center gap-2 mb-6">
+        <a href="/pages/tasks.html" data-dom-id="back-tasks" class="inline-flex items-center gap-1.5 text-sm font-medium transition-colors whitespace-nowrap" style="color: var(--pw-accent); font-family: var(--pw-font-sans);">
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m15 18-6-6 6-6"/></svg>
+          <span data-zh="返回任务列表" data-en="Back to Tasks">返回任务列表</span>
+        </a>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--pw-text-tertiary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="shrink-0"><path d="m9 18 6-6-6-6"/></svg>
+        <span id="breadcrumbId" class="text-sm truncate" style="color: var(--pw-text-tertiary); font-family: var(--pw-font-mono);">—</span>
+      </div>
+      <!-- ===== Loading State ===== -->
+      <div id="loadingState" class="rounded-lg py-16 text-center" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+        <svg class="pw-spin inline-block mb-3" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--pw-text-tertiary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <line x1="12" y1="2" x2="12" y2="6"/>
+          <line x1="12" y1="18" x2="12" y2="22"/>
+          <line x1="4.93" y1="4.93" x2="7.76" y2="7.76"/>
+          <line x1="16.24" y1="16.24" x2="19.07" y2="19.07"/>
+          <line x1="2" y1="12" x2="6" y2="12"/>
+          <line x1="18" y1="12" x2="22" y2="12"/>
+          <line x1="4.93" y1="19.07" x2="7.76" y2="16.24"/>
+          <line x1="16.24" y1="7.76" x2="19.07" y2="4.93"/>
+        </svg>
+        <p class="text-sm" style="color: var(--pw-text-tertiary); font-family: var(--pw-font-sans);" data-zh="加载中..." data-en="Loading...">加载中...</p>
+      </div>
+      <!-- ===== Error State ===== -->
+      <div id="errorState" class="hidden rounded-lg py-16 text-center" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+        <svg class="inline-block mb-3" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="var(--pw-state-error)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <circle cx="12" cy="12" r="10"/>
+          <line x1="12" y1="8" x2="12" y2="12"/>
+          <line x1="12" y1="16" x2="12.01" y2="16"/>
+        </svg>
+        <p id="errorTitle" class="text-sm font-medium" style="color: var(--pw-state-error); font-family: var(--pw-font-sans);" data-zh="加载失败" data-en="Load Failed">加载失败</p>
+        <p id="errorMessage" class="text-xs mt-2 px-6 break-words" style="color: var(--pw-text-tertiary); font-family: var(--pw-font-mono);"></p>
+        <a href="/pages/tasks.html" class="inline-block mt-4 px-4 py-1.5 rounded-md text-xs font-medium transition-colors" style="background-color: var(--pw-bg-hover); color: var(--pw-text-secondary); border: 1px solid var(--pw-border-subtle); font-family: var(--pw-font-sans);" data-zh="返回任务列表" data-en="Back to Tasks">返回任务列表</a>
+      </div>
+      <!-- ===== Detail Content (hidden until loaded) ===== -->
+      <div id="detailContent" class="hidden flex flex-col gap-6">
+        <!-- ===== Stale / Reconcile Banner ===== -->
+        <div id="staleBanner" class="hidden rounded-lg px-4 py-3 flex items-start gap-3" style="background-color: var(--pw-state-warning-bg); border: 1px solid var(--pw-state-warning);">
+          <svg class="shrink-0 mt-0.5" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--pw-state-warning)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
+          </svg>
+          <div class="min-w-0 flex-1">
+            <p class="text-sm font-medium" style="color: var(--pw-state-warning);" data-zh="任务疑似僵死" data-en="Task appears stale">任务疑似僵死</p>
+            <p id="staleReasonsText" class="text-xs mt-1 break-words" style="color: var(--pw-text-secondary); font-family: var(--pw-font-mono);"></p>
+          </div>
+          <button id="btnReconcile" class="shrink-0 px-3 py-1 rounded-md text-xs font-medium transition-colors" style="background-color: var(--pw-bg-hover); color: var(--pw-text-primary); border: 1px solid var(--pw-border-subtle); font-family: var(--pw-font-sans);" data-zh="Reconcile" data-en="Reconcile">Reconcile</button>
+        </div>
+        <!-- Task Header Card -->
+        <section class="rounded-lg p-5" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+          <div class="flex flex-col gap-4">
+            <!-- Top row: ID + Status -->
+            <div class="flex flex-wrap items-center gap-3">
+              <span id="hdrTaskId" class="text-xl font-semibold truncate" style="color: var(--pw-text-primary); font-family: var(--pw-font-mono);">—</span>
+              <span id="hdrStatusBadge" class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-xs font-medium whitespace-nowrap" style="background-color: var(--pw-state-warning-bg); color: var(--pw-state-warning); border: 1px solid rgba(245, 158, 11, 0.2);">
+                <span class="shrink-0 w-1.5 h-1.5 rounded-full" style="background-color: var(--pw-state-warning);"></span>
+                <span id="hdrStatusText">—</span>
+              </span>
+            </div>
+            <!-- Metadata grid -->
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-3 text-sm">
+              <div class="flex flex-col gap-0.5 min-w-0">
+                <span class="text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary);" data-zh="阶段" data-en="Phase">阶段</span>
+                <span id="hdrPhase" class="truncate" style="color: var(--pw-text-primary); font-family: var(--pw-font-mono);">—</span>
+              </div>
+              <div class="flex flex-col gap-0.5 min-w-0">
+                <span class="text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary);" data-zh="Agent" data-en="Agent">Agent</span>
+                <span id="hdrAgent" class="truncate" style="color: var(--pw-text-primary); font-family: var(--pw-font-mono);">—</span>
+              </div>
+              <div class="flex flex-col gap-0.5 min-w-0">
+                <span class="text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary);" data-zh="创建时间" data-en="Created">创建时间</span>
+                <span id="hdrCreatedAt" class="truncate" style="color: var(--pw-text-secondary); font-family: var(--pw-font-mono);">—</span>
+              </div>
+              <div class="flex flex-col gap-0.5 min-w-0">
+                <span class="text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary);" data-zh="更新时间" data-en="Updated">更新时间</span>
+                <span id="hdrUpdatedAt" class="truncate" style="color: var(--pw-text-secondary); font-family: var(--pw-font-mono);">—</span>
+              </div>
+              <div class="flex flex-col gap-0.5 min-w-0">
+                <span class="text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary);" data-zh="测试命令" data-en="Test Command">测试命令</span>
+                <span id="hdrTestCommand" class="truncate" style="color: var(--pw-text-secondary); font-family: var(--pw-font-mono);">—</span>
+              </div>
+              <div class="flex flex-col gap-0.5 min-w-0">
+                <span class="text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary);" data-zh="超时(秒)" data-en="Timeout (s)">超时(秒)</span>
+                <span id="hdrTimeout" class="truncate" style="color: var(--pw-text-secondary); font-family: var(--pw-font-mono);">—</span>
+              </div>
+            </div>
+            <!-- Code metadata block -->
+            <div class="rounded-md p-3 text-xs leading-relaxed" style="background-color: var(--pw-bg); border: 1px solid var(--pw-border-subtle); font-family: var(--pw-font-mono); color: var(--pw-text-secondary);">
+              <div class="flex items-start gap-2 mb-1">
+                <span class="shrink-0" style="color: var(--pw-text-tertiary);">repo_path:</span>
+                <span id="hdrRepoPath" class="break-all" style="color: var(--pw-text-primary);">—</span>
+              </div>
+              <div class="flex items-start gap-2 mb-1">
+                <span class="shrink-0" style="color: var(--pw-text-tertiary);">verify_commands:</span>
+                <span id="hdrVerifyCommands" class="break-all" style="color: var(--pw-text-primary);">—</span>
+              </div>
+              <div class="flex items-start gap-2">
+                <span class="shrink-0" style="color: var(--pw-text-tertiary);">plan_id:</span>
+                <span id="hdrPlanId" class="break-all" style="color: var(--pw-text-primary);">—</span>
+              </div>
+            </div>
+            <!-- Error block (only shown when status.error present) -->
+            <div id="hdrErrorBlock" class="hidden rounded-md p-3 text-xs leading-relaxed" style="background-color: var(--pw-state-error-bg); color: var(--pw-state-error); font-family: var(--pw-font-mono);">
+              <div class="flex items-start gap-2">
+                <span class="shrink-0 font-semibold">error:</span>
+                <span id="hdrErrorText" class="break-all whitespace-pre-wrap"></span>
+              </div>
+            </div>
+          </div>
+        </section>
+        <!-- Two-Column Layout -->
+        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
+          <!-- Left Column (~58%) -->
+          <div class="lg:col-span-7 flex flex-col gap-6">
+            <!-- Execution Status Card -->
+            <section class="rounded-lg p-5" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+              <h2 class="text-base font-semibold mb-4" data-zh="执行状态" data-en="Execution Status" style="color: var(--pw-text-primary); font-family: var(--pw-font-sans);">执行状态</h2>
+              <div class="grid grid-cols-1 sm:grid-cols-3 gap-x-6 gap-y-3 text-sm">
+                <div class="flex flex-col gap-0.5 min-w-0">
+                  <span class="text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary);" data-zh="运行阶段" data-en="Runtime Phase">运行阶段</span>
+                  <span id="rtPhase" class="truncate" style="color: var(--pw-text-primary); font-family: var(--pw-font-mono);">—</span>
+                </div>
+                <div class="flex flex-col gap-0.5 min-w-0">
+                  <span class="text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary);" data-zh="最近心跳" data-en="Last Heartbeat">最近心跳</span>
+                  <span id="rtHeartbeat" class="truncate" style="color: var(--pw-text-secondary); font-family: var(--pw-font-mono);">—</span>
+                </div>
+                <div class="flex flex-col gap-0.5 min-w-0">
+                  <span class="text-xs whitespace-nowrap" style="color: var(--pw-text-tertiary);" data-zh="当前命令" data-en="Current Command">当前命令</span>
+                  <span id="rtCurrentCmd" class="truncate" style="color: var(--pw-text-secondary); font-family: var(--pw-font-mono);">—</span>
+                </div>
+              </div>
+            </section>
+            <!-- Diff Preview Card -->
+            <section class="rounded-lg overflow-hidden" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+              <div class="flex items-center gap-2 px-4 py-3" style="border-bottom: 1px solid var(--pw-border);">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--pw-text-secondary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg>
+                <h2 class="text-base font-semibold" data-zh="变更预览" data-en="Diff Preview" style="color: var(--pw-text-primary); font-family: var(--pw-font-sans);">变更预览</h2>
+              </div>
+              <div id="diffEmpty" class="px-4 py-8 text-center text-sm" style="color: var(--pw-text-tertiary); font-family: var(--pw-font-sans);" data-zh="暂无 diff 内容" data-en="No diff available">暂无 diff 内容</div>
+              <pre id="diffContent" class="hidden px-4 py-3 text-xs leading-relaxed overflow-x-auto whitespace-pre-wrap break-all" style="background-color: #0d1117; color: var(--pw-text-secondary); font-family: var(--pw-font-mono); max-height: 480px; overflow-y: auto;"></pre>
+            </section>
+            <!-- Changed Files Card -->
+            <section class="rounded-lg overflow-hidden" 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);">
+                <div class="flex items-center gap-2">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--pw-text-secondary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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"/></svg>
+                  <h2 class="text-base font-semibold" data-zh="变更文件" data-en="Changed Files" style="color: var(--pw-text-primary); font-family: var(--pw-font-sans);">变更文件</h2>
+                </div>
+                <span id="cfCountBadge" class="hidden text-xs px-2 py-0.5 rounded-md whitespace-nowrap" style="color: var(--pw-text-tertiary); background-color: var(--pw-bg-hover); font-family: var(--pw-font-mono);">—</span>
+              </div>
+              <div id="cfEmpty" class="px-4 py-8 text-center text-sm" style="color: var(--pw-text-tertiary); font-family: var(--pw-font-sans);" data-zh="暂无变更文件记录" data-en="No changed-files record">暂无变更文件记录</div>
+              <div id="cfBody" class="hidden px-4 py-3 flex flex-col gap-3">
+                <!-- file_stats summary row -->
+                <div id="cfStatsRow" class="hidden grid grid-cols-2 sm:grid-cols-4 gap-2 text-xs"></div>
+                <!-- changed files list (truncated) -->
+                <div id="cfList" class="rounded-md p-2 text-xs leading-relaxed overflow-auto" style="background-color: #0d1117; color: var(--pw-text-secondary); font-family: var(--pw-font-mono); max-height: 320px;"></div>
+              </div>
+            </section>
+            <!-- Verify Log Card -->
+            <section class="rounded-lg overflow-hidden" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+              <div class="flex items-center gap-2 px-4 py-3" style="border-bottom: 1px solid var(--pw-border);">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--pw-text-secondary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>
+                <h2 class="text-base font-semibold" data-zh="验证日志" data-en="Verify Log" style="color: var(--pw-text-primary); font-family: var(--pw-font-sans);">验证日志</h2>
+              </div>
+              <div id="verifyLogEmpty" class="px-4 py-8 text-center text-sm" style="color: var(--pw-text-tertiary); font-family: var(--pw-font-sans);" data-zh="暂无验证日志" data-en="No verify log">暂无验证日志</div>
+              <pre id="verifyLogContent" class="hidden px-4 py-3 text-xs leading-relaxed overflow-x-auto whitespace-pre-wrap break-all" style="background-color: #0d1117; color: var(--pw-text-secondary); font-family: var(--pw-font-mono); max-height: 320px; overflow-y: auto;"></pre>
+            </section>
+          </div>
+          <!-- Right Column (~42%) -->
+          <div class="lg:col-span-5 flex flex-col gap-6">
+            <!-- Result Summary Card -->
+            <section class="rounded-lg p-5" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+              <h2 class="text-base font-semibold mb-4" data-zh="结果摘要" data-en="Result Summary" style="color: var(--pw-text-primary); font-family: var(--pw-font-sans);">结果摘要</h2>
+              <div class="flex flex-col gap-3">
+                <div class="flex items-center justify-between text-sm">
+                  <span style="color: var(--pw-text-secondary);" data-zh="任务状态" data-en="Status">任务状态</span>
+                  <span id="rsStatus" class="font-semibold" style="color: var(--pw-text-primary); font-family: var(--pw-font-mono);">—</span>
+                </div>
+                <div class="flex items-center justify-between text-sm">
+                  <span style="color: var(--pw-text-secondary);" data-zh="验证状态" data-en="Verify Status">验证状态</span>
+                  <span id="rsVerifyStatus" class="font-semibold" style="color: var(--pw-text-primary); font-family: var(--pw-font-mono);">—</span>
+                </div>
+                <div id="rsSummaryBlock" class="hidden rounded-md p-3 text-xs leading-relaxed" style="background-color: var(--pw-bg); border: 1px solid var(--pw-border-subtle); color: var(--pw-text-secondary); font-family: var(--pw-font-sans);">
+                  <span id="rsSummary" class="break-all whitespace-pre-wrap"></span>
+                </div>
+              </div>
+            </section>
+            <!-- Audit Results Card -->
+            <section class="rounded-lg p-5" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+              <div class="flex items-center justify-between mb-4">
+                <h2 class="text-base font-semibold" data-zh="审计结果" data-en="Audit Result" style="color: var(--pw-text-primary); font-family: var(--pw-font-sans);">审计结果</h2>
+                <span id="auditVerdictBadge" class="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium whitespace-nowrap" style="background-color: var(--pw-bg-hover); color: var(--pw-text-tertiary); border: 1px solid var(--pw-border-subtle);">—</span>
+              </div>
+              <div class="flex flex-col gap-3">
+                <div class="flex items-center justify-between text-sm">
+                  <span style="color: var(--pw-text-secondary);" data-zh="范围变更" data-en="Scope Changes">范围变更</span>
+                  <span id="auditScope" class="font-semibold" style="color: var(--pw-text-primary); font-family: var(--pw-font-mono);">—</span>
+                </div>
+                <div class="flex items-center justify-between text-sm">
+                  <span style="color: var(--pw-text-secondary);" data-zh="检查时间" data-en="Checked At">检查时间</span>
+                  <span id="auditCheckedAt" class="truncate" style="color: var(--pw-text-secondary); font-family: var(--pw-font-mono);">—</span>
+                </div>
+                <div id="auditEmptyHint" class="text-xs" style="color: var(--pw-text-tertiary); font-family: var(--pw-font-sans);" data-zh="暂无审计记录" data-en="No audit record yet">暂无审计记录</div>
+              </div>
+            </section>
+            <!-- Independent Review Card (audit_task artifact) -->
+            <section class="rounded-lg overflow-hidden" 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);">
+                <div class="flex items-center gap-2">
+                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--pw-text-secondary)" 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"/></svg>
+                  <h2 class="text-base font-semibold" data-zh="独立审计报告" data-en="Independent Review" style="color: var(--pw-text-primary); font-family: var(--pw-font-sans);">独立审计报告</h2>
+                </div>
+                <span id="reviewVerdictBadge" class="text-xs px-2 py-0.5 rounded-md whitespace-nowrap" style="color: var(--pw-text-tertiary); background-color: var(--pw-bg-hover); font-family: var(--pw-font-mono);">—</span>
+              </div>
+              <div id="reviewEmpty" class="px-4 py-8 text-center text-sm" style="color: var(--pw-text-tertiary); font-family: var(--pw-font-sans);" data-zh="尚未运行 audit_task" data-en="audit_task not run yet">尚未运行 audit_task</div>
+              <pre id="reviewContent" class="hidden px-4 py-3 text-xs leading-relaxed overflow-x-auto whitespace-pre-wrap break-all" style="background-color: #0d1117; color: var(--pw-text-secondary); font-family: var(--pw-font-mono); max-height: 320px; overflow-y: auto;"></pre>
+            </section>
+            <!-- Verification Summary Card -->
+            <section class="rounded-lg p-5" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+              <h2 class="text-base font-semibold mb-4" data-zh="验证摘要" data-en="Verification Summary" style="color: var(--pw-text-primary); font-family: var(--pw-font-sans);">验证摘要</h2>
+              <div class="flex flex-col gap-3">
+                <div class="flex items-center justify-between text-sm">
+                  <span style="color: var(--pw-text-secondary);" data-zh="验证状态" data-en="Status">验证状态</span>
+                  <span id="vsStatus" class="font-semibold" style="color: var(--pw-text-primary); font-family: var(--pw-font-mono);">—</span>
+                </div>
+                <div class="flex items-center justify-between text-sm">
+                  <span style="color: var(--pw-text-secondary);" data-zh="检查时间" data-en="Checked At">检查时间</span>
+                  <span id="vsCheckedAt" class="truncate" style="color: var(--pw-text-secondary); font-family: var(--pw-font-mono);">—</span>
+                </div>
+                <div id="vsCommandsBlock" class="hidden rounded-md p-2 text-xs leading-relaxed" style="background-color: var(--pw-bg); border: 1px solid var(--pw-border-subtle); color: var(--pw-text-secondary); font-family: var(--pw-font-mono);">
+                  <div class="text-xs mb-1" style="color: var(--pw-text-tertiary);" data-zh="验证命令" data-en="Commands">验证命令</div>
+                  <pre id="vsCommands" class="whitespace-pre-wrap break-all"></pre>
+                </div>
+                <div id="vsEmptyHint" class="text-xs" style="color: var(--pw-text-tertiary); font-family: var(--pw-font-sans);" data-zh="暂无验证摘要" data-en="No verification summary">暂无验证摘要</div>
+              </div>
+            </section>
+            <!-- Warnings / Errors Card -->
+            <section class="rounded-lg overflow-hidden" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+              <div class="flex items-center gap-2 px-4 py-3" style="border-bottom: 1px solid var(--pw-border);">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--pw-text-secondary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+                <h2 class="text-base font-semibold" data-zh="警告 / 错误" data-en="Warnings / Errors" style="color: var(--pw-text-primary); font-family: var(--pw-font-sans);">警告 / 错误</h2>
+              </div>
+              <div id="weEmpty" class="px-4 py-6 text-center text-sm" style="color: var(--pw-text-tertiary); font-family: var(--pw-font-sans);" data-zh="无警告或错误" data-en="No warnings or errors">无警告或错误</div>
+              <div id="weBody" class="hidden px-4 py-3 flex flex-col gap-3">
+                <div id="weWarningsBlock" class="hidden">
+                  <div class="text-xs mb-1.5 font-medium" style="color: var(--pw-state-warning);" data-zh="警告" data-en="Warnings">警告</div>
+                  <div id="weWarnings" class="rounded-md p-2 text-xs leading-relaxed" style="background-color: var(--pw-state-warning-bg); color: var(--pw-state-warning); font-family: var(--pw-font-mono);"></div>
+                </div>
+                <div id="weErrorsBlock" class="hidden">
+                  <div class="text-xs mb-1.5 font-medium" style="color: var(--pw-state-error);" data-zh="错误" data-en="Errors">错误</div>
+                  <div id="weErrors" class="rounded-md p-2 text-xs leading-relaxed" style="background-color: var(--pw-state-error-bg); color: var(--pw-state-error); font-family: var(--pw-font-mono);"></div>
+                </div>
+              </div>
+            </section>
+            <!-- Test Log Card -->
+            <section class="rounded-lg overflow-hidden" style="background-color: var(--pw-bg-surface); border: 1px solid var(--pw-border);">
+              <div class="flex items-center gap-2 px-4 py-3" style="border-bottom: 1px solid var(--pw-border);">
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--pw-text-secondary)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="4 17 10 11 4 5"/><line x1="12" y1="19" x2="20" y2="19"/></svg>
+                <h2 class="text-base font-semibold" data-zh="测试日志" data-en="Test Log" style="color: var(--pw-text-primary); font-family: var(--pw-font-sans);">测试日志</h2>
+              </div>
+              <div id="logEmpty" class="px-4 py-8 text-center text-sm" style="color: var(--pw-text-tertiary); font-family: var(--pw-font-sans);" data-zh="暂无测试日志" data-en="No test log available">暂无测试日志</div>
+              <pre id="logContent" class="hidden px-4 py-3 text-xs leading-relaxed overflow-x-auto whitespace-pre-wrap break-all" style="background-color: #0d1117; color: var(--pw-text-secondary); font-family: var(--pw-font-mono); max-height: 480px; overflow-y: auto;"></pre>
+            </section>
+          </div>
+        </div>
+      </div>
+    </main>
+  </div>
+  <!-- Active nav item styling + sidebar hover states -->
+  <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;
+    }
+  </style>
+  <script>
+    (function () {
+      'use strict';
+      // ---- DOM helpers ----
+      function $(id) { return document.getElementById(id); }
+      function show(el) { el && el.classList.remove('hidden'); }
+      function hide(el) { el && el.classList.add('hidden'); }
+      function text(el, value) { if (el) el.textContent = value; }
+      function escapeText(s) {
+        if (s === null || s === undefined) return '';
+        return String(s);
+      }
+      function pad2(n) { return String(n).padStart(2, '0'); }
+      function formatTime(iso) {
+        if (!iso) return '—';
+        var d = new Date(iso);
+        if (isNaN(d.getTime())) return String(iso);
+        return d.getFullYear() + '-' + pad2(d.getMonth() + 1) + '-' + pad2(d.getDate())
+             + ' ' + pad2(d.getHours()) + ':' + pad2(d.getMinutes()) + ':' + pad2(d.getSeconds());
+      }
+      // status -> { color, text, bg, border }
+      // color: success (green) | info (blue) | warning (yellow) | error (red) | muted (gray)
+      var STATUS_META = {
+        pending:                { color: 'warning', text: '等待中' },
+        running:                { color: 'info',    text: '运行中' },
+        done:                   { color: 'success', text: '已完成' },
+        failed:                 { color: 'error',   text: '失败' },
+        failed_scope_violation: { color: 'error',   text: '范围违规' },
+        canceled:               { color: 'muted',   text: '已取消' },
+        timeout:                { color: 'muted',   text: '超时' }
+      };
+      var PHASE_LABELS = {
+        queued:               '排队中',
+        preparing:            '准备中',
+        running:              '运行中',
+        verifying:            '验证中',
+        collecting_artifacts: '收集产物',
+        completed:            '已完成'
+      };
+      function getStatusMeta(status) {
+        return STATUS_META[status] || { color: 'muted', text: status || '—' };
+      }
+      function getPhaseLabel(phase) {
+        return PHASE_LABELS[phase] || phase || '—';
+      }
+      var COLOR_VARS = {
+        success: { fg: 'var(--pw-state-success)', bg: 'var(--pw-state-success-bg)', border: 'rgba(34, 197, 94, 0.2)' },
+        info:    { fg: 'var(--pw-state-info)',    bg: 'var(--pw-state-info-bg)',    border: 'rgba(59, 130, 246, 0.2)' },
+        warning: { fg: 'var(--pw-state-warning)', bg: 'var(--pw-state-warning-bg)', border: 'rgba(245, 158, 11, 0.2)' },
+        error:   { fg: 'var(--pw-state-error)',   bg: 'var(--pw-state-error-bg)',   border: 'rgba(239, 68, 68, 0.2)' },
+        muted:   { fg: 'var(--pw-text-tertiary)', bg: 'var(--pw-bg-hover)',         border: 'var(--pw-border-subtle)' }
+      };
+      function applyBadgeColors(el, color) {
+        if (!el) return;
+        var c = COLOR_VARS[color] || COLOR_VARS.muted;
+        el.style.backgroundColor = c.bg;
+        el.style.color = c.fg;
+        el.style.borderColor = c.border;
+      }
+      function applyVerdictBadge(el, verdict) {
+        if (!el) return;
+        var v = String(verdict || '').toLowerCase();
+        var color = 'muted';
+        if (v === 'pass' || v === 'passed') color = 'success';
+        else if (v === 'warn' || v === 'warning') color = 'warning';
+        else if (v === 'fail' || v === 'failed' || v === 'error') color = 'error';
+        applyBadgeColors(el, color);
+        text(el, verdict || '—');
+      }
+      function renderListOrJoin(value) {
+        if (value === null || value === undefined) return '—';
+        if (Array.isArray(value)) {
+          if (value.length === 0) return '—';
+          return value.map(function (v) { return JSON.stringify(v); }).join(', ');
+        }
+        return String(value);
+      }
+      function escapeHtml(s) {
+        if (s === null || s === undefined) return '';
+        return String(s).replace(/[&<>"']/g, function (c) {
+          return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+        });
+      }
+      // ---- Control token (loaded lazily for POST actions) ----
+      var controlToken = null;
+      function loadToken() {
+        return fetch('/control-token.json', { cache: 'no-store' })
+          .then(function (res) { return res.json(); })
+          .then(function (data) { controlToken = (data && data.token) || null; })
+          .catch(function () { controlToken = null; });
+      }
+      function ensureToken() {
+        if (controlToken) return Promise.resolve();
+        return loadToken();
+      }
+      function postAction(url) {
+        return ensureToken().then(function () {
+          return fetch(url, {
+            method: 'POST',
+            headers: { 'X-PatchWarden-Control-Token': controlToken || '' },
+            cache: 'no-store'
+          });
+        });
+      }
+      // ---- State rendering ----
+      function showLoading() {
+        show($('loadingState'));
+        hide($('errorState'));
+        hide($('detailContent'));
+      }
+      function showError(title, msg) {
+        hide($('loadingState'));
+        show($('errorState'));
+        hide($('detailContent'));
+        text($('errorTitle'), title || '加载失败');
+        text($('errorMessage'), msg || '');
+      }
+      function showDetail() {
+        hide($('loadingState'));
+        hide($('errorState'));
+        show($('detailContent'));
+      }
+      // ---- Render task detail ----
+      function renderDetail(data) {
+        var taskId = data.task_id || '—';
+        text($('breadcrumbId'), taskId);
+        text($('hdrTaskId'), taskId);
+        // Status
+        var status = (data.status && data.status.status) || data.status_status || null;
+        var statusMeta = getStatusMeta(status);
+        text($('hdrStatusText'), statusMeta.text);
+        applyBadgeColors($('hdrStatusBadge'), statusMeta.color);
+        // Phase
+        var phase = (data.status && data.status.phase) || null;
+        text($('hdrPhase'), getPhaseLabel(phase));
+        // Agent
+        var agent = (data.status && data.status.agent) || null;
+        text($('hdrAgent'), agent || '—');
+        // Times
+        var createdAt = (data.status && data.status.created_at) || null;
+        var updatedAt = (data.status && data.status.updated_at) || null;
+        text($('hdrCreatedAt'), formatTime(createdAt));
+        text($('hdrUpdatedAt'), formatTime(updatedAt));
+        // Test command + timeout
+        var testCommand = (data.status && data.status.test_command) || null;
+        text($('hdrTestCommand'), testCommand || '—');
+        var timeoutSeconds = (data.status && data.status.timeout_seconds);
+        text($('hdrTimeout'), (timeoutSeconds === null || timeoutSeconds === undefined) ? '—' : String(timeoutSeconds));
+        // Code metadata
+        var repoPath = (data.status && data.status.repo_path) || null;
+        text($('hdrRepoPath'), repoPath || '—');
+        var verifyCommands = (data.status && data.status.verify_commands) || null;
+        text($('hdrVerifyCommands'), renderListOrJoin(verifyCommands));
+        var planId = (data.status && data.status.plan_id) || null;
+        text($('hdrPlanId'), planId || '—');
+        // Error block
+        var statusError = (data.status && data.status.error) || null;
+        if (statusError) {
+          text($('hdrErrorText'), escapeText(statusError));
+          show($('hdrErrorBlock'));
+        } else {
+          hide($('hdrErrorBlock'));
+        }
+        // ---- Execution status (runtime) ----
+        var runtime = data.runtime || null;
+        var rtPhase = runtime ? (runtime.phase || null) : null;
+        text($('rtPhase'), getPhaseLabel(rtPhase));
+        var rtHeartbeat = runtime ? (runtime.last_heartbeat_at || null) : null;
+        text($('rtHeartbeat'), formatTime(rtHeartbeat));
+        var rtCmd = runtime ? (runtime.current_command || null) : null;
+        text($('rtCurrentCmd'), rtCmd || '—');
+        // ---- Result summary ----
+        var result = data.result || null;
+        var rsStatus = result ? (result.status || null) : null;
+        text($('rsStatus'), rsStatus || '—');
+        var rsVerify = result ? (result.verify_status || null) : null;
+        text($('rsVerifyStatus'), rsVerify || '—');
+        var rsSummary = result ? (result.summary || null) : null;
+        if (rsSummary) {
+          text($('rsSummary'), escapeText(rsSummary));
+          show($('rsSummaryBlock'));
+        } else {
+          hide($('rsSummaryBlock'));
+        }
+        // ---- Audit ----
+        var audit = data.audit || null;
+        var verdict = audit ? (audit.verdict || audit.decision || null) : null;
+        applyVerdictBadge($('auditVerdictBadge'), verdict);
+        var scopeChanges = audit ? (audit.scope_changes || null) : null;
+        text($('auditScope'), scopeChanges || '—');
+        var checkedAt = audit ? (audit.checked_at || null) : null;
+        text($('auditCheckedAt'), formatTime(checkedAt));
+        if (audit) {
+          hide($('auditEmptyHint'));
+        } else {
+          show($('auditEmptyHint'));
+        }
+        // ---- Diff preview ----
+        // API returns diff_patch (snake_case); also accept diff/testLog/test_log defensively.
+        var diff = data.diff_patch || data.diff || data.diffPatch || null;
+        var diffEl = $('diffContent');
+        var diffEmpty = $('diffEmpty');
+        if (diff) {
+          text(diffEl, escapeText(diff));
+          show(diffEl);
+          hide(diffEmpty);
+        } else {
+          hide(diffEl);
+          show(diffEmpty);
+        }
+        // ---- Test log ----
+        var testLog = data.test_log || data.testLog || null;
+        var logEl = $('logContent');
+        var logEmpty = $('logEmpty');
+        if (testLog) {
+          text(logEl, escapeText(testLog));
+          show(logEl);
+          hide(logEmpty);
+        } else {
+          hide(logEl);
+          show(logEmpty);
+        }
+        // ---- Changed files ----
+        renderChangedFiles(data.changed_files, data.file_stats);
+        // ---- Verify log ----
+        var verifyLog = data.verify_log || null;
+        var vlEl = $('verifyLogContent');
+        var vlEmpty = $('verifyLogEmpty');
+        if (verifyLog) {
+          text(vlEl, escapeText(verifyLog));
+          show(vlEl);
+          hide(vlEmpty);
+        } else {
+          hide(vlEl);
+          show(vlEmpty);
+        }
+        // ---- Independent review (audit_task artifact) ----
+        var review = data.independent_review || null;
+        var rvContent = review ? (review.content || null) : null;
+        var rvVerdict = review ? (review.verdict || null) : null;
+        var rvEl = $('reviewContent');
+        var rvEmpty = $('reviewEmpty');
+        var rvBadge = $('reviewVerdictBadge');
+        if (rvContent) {
+          text(rvEl, escapeText(rvContent));
+          show(rvEl);
+          hide(rvEmpty);
+        } else {
+          hide(rvEl);
+          show(rvEmpty);
+        }
+        applyVerdictBadge(rvBadge, rvVerdict);
+        // ---- Verification summary ----
+        renderVerificationSummary(data.verification_summary);
+        // ---- Warnings / Errors ----
+        renderWarningsErrors(data.warnings, data.errors);
+        // ---- Stale / Reconcile banner ----
+        renderStaleBanner(data.stale, data.reconcile);
+        showDetail();
+      }
+      // ---- Render: changed files ----
+      function renderChangedFiles(changedFiles, fileStats) {
+        var emptyEl = $('cfEmpty');
+        var bodyEl = $('cfBody');
+        var listEl = $('cfList');
+        var statsEl = $('cfStatsRow');
+        var badgeEl = $('cfCountBadge');
+        if (!changedFiles) {
+          hide(bodyEl);
+          hide(badgeEl);
+          show(emptyEl);
+          return;
+        }
+        // Build a list of paths to display.
+        var paths = [];
+        if (Array.isArray(changedFiles.files)) {
+          for (var i = 0; i < changedFiles.files.length; i++) {
+            var f = changedFiles.files[i];
+            if (typeof f === 'string') paths.push(f);
+            else if (f && typeof f === 'object' && typeof f.path === 'string') paths.push(f.path);
+          }
+        }
+        if (paths.length === 0 && Array.isArray(changedFiles.changed_files)) {
+          for (var j = 0; j < changedFiles.changed_files.length; j++) {
+            var cf = changedFiles.changed_files[j];
+            if (typeof cf === 'string') paths.push(cf);
+            else if (cf && typeof cf === 'object' && typeof cf.path === 'string') paths.push(cf.path);
+          }
+        }
+        // file_stats summary
+        var statsHtml = '';
+        if (fileStats && typeof fileStats === 'object') {
+          var counts = fileStats.counts || fileStats;
+          var statItems = [
+            { label: 'modified', value: counts.modified != null ? counts.modified : null },
+            { label: 'added', value: counts.added != null ? counts.added : null },
+            { label: 'deleted', value: counts.deleted != null ? counts.deleted : null },
+            { label: 'untracked', value: counts.untracked != null ? counts.untracked : null }
+          ];
+          var hasAny = false;
+          statsHtml = statItems.map(function (it) {
+            if (it.value === null || it.value === undefined) return '';
+            hasAny = true;
+            return '<div class="rounded-md px-2 py-1.5" style="background-color: var(--pw-bg); border: 1px solid var(--pw-border-subtle);">'
+              + '<div class="text-xs" style="color: var(--pw-text-tertiary);">' + escapeHtml(it.label) + '</div>'
+              + '<div class="text-sm font-semibold" style="color: var(--pw-text-primary); font-family: var(--pw-font-mono);">' + escapeHtml(String(it.value)) + '</div>'
+              + '</div>';
+          }).join('');
+          if (hasAny) {
+            show(statsEl);
+            statsEl.innerHTML = statsHtml;
+          } else {
+            hide(statsEl);
+          }
+        } else {
+          hide(statsEl);
+        }
+        if (paths.length === 0) {
+          hide(bodyEl);
+          hide(badgeEl);
+          show(emptyEl);
+          return;
+        }
+        // Render path list (cap at 500 to avoid rendering huge DOM).
+        var displayCount = Math.min(paths.length, 500);
+        var listHtml = '';
+        for (var k = 0; k < displayCount; k++) {
+          listHtml += escapeHtml(paths[k]) + '\n';
+        }
+        if (paths.length > displayCount) {
+          listHtml += '\n... (' + (paths.length - displayCount) + ' more truncated)';
+        }
+        listEl.textContent = listHtml;
+        // Badge
+        text(badgeEl, paths.length + ' 个文件');
+        show(badgeEl);
+        hide(emptyEl);
+        show(bodyEl);
+      }
+      // ---- Render: verification summary ----
+      function renderVerificationSummary(vs) {
+        var statusEl = $('vsStatus');
+        var checkedEl = $('vsCheckedAt');
+        var cmdsBlock = $('vsCommandsBlock');
+        var cmdsEl = $('vsCommands');
+        var emptyHint = $('vsEmptyHint');
+        if (!vs) {
+          text(statusEl, '—');
+          text(checkedEl, '—');
+          hide(cmdsBlock);
+          show(emptyHint);
+          return;
+        }
+        hide(emptyHint);
+        text(statusEl, vs.status || '—');
+        text(checkedEl, formatTime(vs.checked_at));
+        if (Array.isArray(vs.commands) && vs.commands.length > 0) {
+          text(cmdsEl, vs.commands.map(function (c) { return JSON.stringify(c); }).join('\n'));
+          show(cmdsBlock);
+        } else {
+          hide(cmdsBlock);
+        }
+      }
+      // ---- Render: warnings / errors ----
+      function renderWarningsErrors(warnings, errors) {
+        var emptyEl = $('weEmpty');
+        var bodyEl = $('weBody');
+        var warnBlock = $('weWarningsBlock');
+        var errBlock = $('weErrorsBlock');
+        var warnEl = $('weWarnings');
+        var errEl = $('weErrors');
+        var wList = Array.isArray(warnings) ? warnings : [];
+        var eList = Array.isArray(errors) ? errors : [];
+        if (wList.length === 0 && eList.length === 0) {
+          show(emptyEl);
+          hide(bodyEl);
+          return;
+        }
+        hide(emptyEl);
+        show(bodyEl);
+        if (wList.length > 0) {
+          warnEl.textContent = wList.map(function (w) { return String(w); }).join('\n---\n');
+          show(warnBlock);
+        } else {
+          hide(warnBlock);
+        }
+        if (eList.length > 0) {
+          errEl.textContent = eList.map(function (e) { return String(e); }).join('\n---\n');
+          show(errBlock);
+        } else {
+          hide(errBlock);
+        }
+      }
+      // ---- Render: stale / reconcile banner ----
+      function renderStaleBanner(stale, reconcile) {
+        var banner = $('staleBanner');
+        var reasonsEl = $('staleReasonsText');
+        var btnReconcile = $('btnReconcile');
+        var isStale = !!(stale && stale.is_stale);
+        if (!isStale) {
+          hide(banner);
+          return;
+        }
+        var reasons = (stale && Array.isArray(stale.stale_reasons)) ? stale.stale_reasons : [];
+        var reasonsText = reasons.length > 0 ? reasons.join(' · ') : 'task appears stale';
+        // Append reconcile state if present.
+        if (reconcile && reconcile.decision) {
+          reasonsText += '\n[reconcile: ' + reconcile.decision;
+          if (reconcile.reconciled_at) reasonsText += ' @ ' + reconcile.reconciled_at;
+          reasonsText += ']';
+        }
+        text(reasonsEl, reasonsText);
+        show(banner);
+      }
+      // ---- Action: run audit_task ----
+      function runAudit(taskId) {
+        var btn = $('btnAudit');
+        if (btn) {
+          btn.disabled = true;
+          btn.style.opacity = '0.6';
+        }
+        postAction('/api/tasks/' + encodeURIComponent(taskId) + '/audit')
+          .then(function (res) {
+            return res.json().then(function (data) {
+              return { ok: res.ok, status: res.status, data: data };
+            });
+          })
+          .then(function (r) {
+            if (!r.ok) {
+              var msg = (r.data && r.data.error) || ('HTTP ' + r.status);
+              alert('运行审计失败: ' + msg);
+            } else {
+              alert('审计完成。verdict=' + ((r.data && r.data.audit && r.data.audit.verdict) || '—'));
+              loadTask(taskId);
+            }
+          })
+          .catch(function (err) {
+            alert('运行审计失败: ' + ((err && err.message) || '未知错误'));
+          })
+          .finally(function () {
+            if (btn) {
+              btn.disabled = false;
+              btn.style.opacity = '';
+            }
+          });
+      }
+      // ---- Action: reconcile ----
+      function runReconcile(taskId) {
+        var btn = $('btnReconcile');
+        if (btn) {
+          btn.disabled = true;
+          btn.style.opacity = '0.6';
+        }
+        postAction('/api/tasks/' + encodeURIComponent(taskId) + '/reconcile')
+          .then(function (res) {
+            return res.json().then(function (data) {
+              return { ok: res.ok, status: res.status, data: data };
+            });
+          })
+          .then(function (r) {
+            if (!r.ok) {
+              var msg = (r.data && r.data.error) || ('HTTP ' + r.status);
+              alert('Reconcile 失败: ' + msg);
+            } else {
+              var decision = (r.data && r.data.decision) || '—';
+              alert('Reconcile 完成: ' + decision);
+              loadTask(taskId);
+            }
+          })
+          .catch(function (err) {
+            alert('Reconcile 失败: ' + ((err && err.message) || '未知错误'));
+          })
+          .finally(function () {
+            if (btn) {
+              btn.disabled = false;
+              btn.style.opacity = '';
+            }
+          });
+      }
+      // ---- Action: open task folder ----
+      function openFolder(taskId) {
+        postAction('/api/tasks/' + encodeURIComponent(taskId) + '/open-folder')
+          .then(function (res) {
+            return res.json().then(function (data) {
+              return { ok: res.ok, status: res.status, data: data };
+            });
+          })
+          .then(function (r) {
+            if (!r.ok) {
+              var msg = (r.data && r.data.error) || ('HTTP ' + r.status);
+              alert('打开目录失败: ' + msg);
+            }
+          })
+          .catch(function (err) {
+            alert('打开目录失败: ' + ((err && err.message) || '未知错误'));
+          });
+      }
+      // ---- Action: copy task id ----
+      function copyTaskId(taskId) {
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          navigator.clipboard.writeText(taskId).then(
+            function () { /* silent success */ },
+            function () { fallbackCopy(taskId); }
+          );
+        } else {
+          fallbackCopy(taskId);
+        }
+      }
+      function fallbackCopy(text) {
+        try {
+          var ta = document.createElement('textarea');
+          ta.value = text;
+          ta.style.position = 'fixed';
+          ta.style.opacity = '0';
+          document.body.appendChild(ta);
+          ta.select();
+          document.execCommand('copy');
+          document.body.removeChild(ta);
+        } catch (e) { /* ignore */ }
+      }
+      // ---- API fetch ----
+      function loadTask(taskId) {
+        showLoading();
+        var url = '/api/tasks/' + encodeURIComponent(taskId);
+        fetch(url, {
+          method: 'GET',
+          headers: { 'Accept': 'application/json' },
+          cache: 'no-store'
+        })
+          .then(function (res) {
+            if (res.status === 404) {
+              // Task not found
+              return res.text().then(function () {
+                throw new Error('NOT_FOUND');
+              });
+            }
+            if (!res.ok) {
+              return res.text().then(function (body) {
+                throw new Error('HTTP ' + res.status + (body ? (': ' + body.slice(0, 200)) : ''));
+              });
+            }
+            return res.json();
+          })
+          .then(function (data) {
+            if (!data || data.error) {
+              throw new Error((data && data.error) ? data.error : '响应缺少任务数据');
+            }
+            renderDetail(data);
+          })
+          .catch(function (err) {
+            var msg = (err && err.message) ? err.message : '未知错误';
+            if (msg === 'NOT_FOUND') {
+              showError('任务不存在', '未找到任务 ID: ' + taskId);
+            } else if (err && err.name === 'TypeError' && /fetch/i.test(msg)) {
+              showError('无法连接服务', '请确认 PatchWarden Control Center 正在运行 (127.0.0.1:8090)');
+            } else {
+              showError('加载失败', msg);
+            }
+          });
+      }
+      // ---- Entry point ----
+      var params = new URLSearchParams(window.location.search);
+      var taskId = params.get('id');
+      if (!taskId) {
+        showError('缺少 task id', '请在 URL 中提供 ?id=<task_id>');
+      } else {
+        loadTask(taskId);
+      }
+      // ---- Action button wiring ----
+      var btnRefresh = $('btnRefresh');
+      if (btnRefresh) btnRefresh.addEventListener('click', function () {
+        if (taskId) loadTask(taskId);
+      });
+      var btnCopyId = $('btnCopyId');
+      if (btnCopyId) btnCopyId.addEventListener('click', function () {
+        if (taskId) copyTaskId(taskId);
+      });
+      var btnOpenFolder = $('btnOpenFolder');
+      if (btnOpenFolder) btnOpenFolder.addEventListener('click', function () {
+        if (taskId) openFolder(taskId);
+      });
+      var btnAudit = $('btnAudit');
+      if (btnAudit) btnAudit.addEventListener('click', function () {
+        if (!taskId) return;
+        if (!confirm('确认对该任务运行 audit_task？仅当任务处于终态时才会执行。')) return;
+        runAudit(taskId);
+      });
+      var btnReconcile = $('btnReconcile');
+      if (btnReconcile) btnReconcile.addEventListener('click', function () {
+        if (!taskId) return;
+        if (!confirm('确认 reconcile 该任务？将写入 reconcile 记录（不会删除任务）。')) return;
+        runReconcile(taskId);
+      });
+    })();
+  </script>
+  <script>lucide.createIcons();</script>
+</body>
+</html>