npm - @aion0/forge - Versions diffs - 0.10.78 → 0.10.80 - Mend

@aion0/forge 0.10.78 → 0.10.80

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 (38) hide show

package/RELEASE_NOTES.md +9 -8
package/app/api/code/route.ts +171 -54
package/app/api/onboarding/route.ts +32 -0
package/app/api/skills/local/route.ts +5 -4
package/app/api/tasks/[id]/hook/stop/route.ts +15 -0
package/app/api/tasks/route.ts +2 -1
package/cli/mw.mjs +7 -5
package/cli/mw.ts +8 -6
package/components/CodeViewer.tsx +127 -41
package/components/Dashboard.tsx +6 -2
package/components/DocsViewer.tsx +34 -22
package/components/HelpTerminal.tsx +9 -5
package/components/OnboardingWizard.tsx +65 -1
package/components/ProjectDetail.tsx +33 -7
package/components/TaskDetail.tsx +28 -1
package/components/TmuxTaskTerminal.tsx +105 -0
package/components/WebTerminal.tsx +26 -8
package/components/WorkspaceView.tsx +68 -47
package/docs/design_automation_records/Automation Redesign.dc.html +2019 -0
package/docs/design_automation_records/README.md +232 -0
package/lib/agents/index.ts +9 -0
package/lib/chat/agent-loop.ts +6 -0
package/lib/chat/tool-dispatcher.ts +110 -9
package/lib/fileTree.ts +28 -0
package/lib/help-docs/01-settings.md +11 -0
package/lib/help-docs/05-pipelines.md +31 -0
package/lib/help-docs/07-projects.md +3 -1
package/lib/help-docs/25-chat-tools.md +23 -0
package/lib/pipeline.ts +27 -3
package/lib/session-utils.ts +19 -0
package/lib/task-manager.ts +73 -3
package/lib/task-tmux-backend.ts +625 -0
package/lib/terminal-standalone.ts +17 -0
package/lib/workspace/skill-installer.ts +18 -8
package/package.json +1 -1
package/proxy.ts +5 -4
package/src/core/db/database.ts +1 -0
package/src/types/index.ts +3 -0

package/docs/design_automation_records/Automation Redesign.dc.html ADDED Viewed

@@ -0,0 +1,2019 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<script src="./support.js"></script>
+</head>
+<body>
+<x-dc>
+<helmet>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+<style>
+  * { box-sizing: border-box; }
+  html, body { margin: 0; padding: 0; background: #08090b; }
+  ::-webkit-scrollbar { width: 9px; height: 9px; }
+  ::-webkit-scrollbar-thumb { background: #2b2e34; border-radius: 6px; }
+  ::-webkit-scrollbar-track { background: transparent; }
+  @keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }
+  @keyframes pulseRed { 0%,100%{box-shadow:0 0 0 0 rgba(241,91,74,.0)} 50%{box-shadow:0 0 0 4px rgba(241,91,74,.18)} }
+  @keyframes slideIn { from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none} }
+</style>
+</helmet>
+<div style="font-family:'JetBrains Mono',ui-monospace,monospace; background:#08090b; color:#cdd0d6; min-height:100vh; display:flex; flex-direction:column;">
+  <div style="display:flex; align-items:center; gap:14px; padding:11px 20px; background:#0d0e11; border-bottom:1px solid #1d1f24;">
+    <div style="display:flex; align-items:center; gap:9px;">
+      <div style="width:22px; height:22px; border-radius:6px; background:linear-gradient(135deg,#ff7d2e,#ff5c4d); display:flex; align-items:center; justify-content:center; font-size:13px;">▰</div>
+      <span style="font-weight:700; color:#f3f4f6; letter-spacing:.2px;">Forge</span>
+      <span style="color:#3f434b;">/</span>
+      <span style="color:#9aa0a8;">Automation Redesign</span>
+    </div>
+    <div style="flex:1;"></div>
+    <div style="display:flex; align-items:center; gap:16px; font-size:11.5px; color:#6b7079;">
+      <span style="display:flex; align-items:center; gap:6px;"><span style="width:9px; height:9px; border-radius:2px; background:#46c25a; display:inline-block;"></span>passed</span>
+      <span style="display:flex; align-items:center; gap:6px;"><span style="width:9px; height:9px; border-radius:2px; background:#f15b4a; display:inline-block;"></span>failed</span>
+      <span style="display:flex; align-items:center; gap:6px;"><span style="width:9px; height:9px; border-radius:2px; background:#4f9dff; display:inline-block;"></span>running</span>
+      <span style="display:flex; align-items:center; gap:6px;"><span style="width:9px; height:9px; border-radius:2px; background:#33363d; display:inline-block;"></span>skipped</span>
+    </div>
+  </div>
+  <div style="display:flex; flex:1; min-height:0;">
+    <aside style="width:268px; flex-shrink:0; background:#0b0c0e; border-right:1px solid #1d1f24; padding:18px 14px; overflow-y:auto;">
+      <sc-for list="{{ navTop }}" as="item" hint-placeholder-count="1">
+        <div onClick="{{ item.onSelect }}" style="{{ item.style }}">
+          <div style="display:flex; align-items:center; gap:8px;">
+            <span style="font-size:13px;">{{ item.icon }}</span>
+            <span style="font-weight:600; font-size:12.5px;">{{ item.label }}</span>
+          </div>
+        </div>
+      </sc-for>
+      <div style="font-size:10.5px; letter-spacing:1.2px; color:#52565e; text-transform:uppercase; margin:20px 6px 9px;">Pipeline</div>
+      <sc-for list="{{ navPipe }}" as="item" hint-placeholder-count="3">
+        <div onClick="{{ item.onSelect }}" style="{{ item.style }}">
+          <div style="display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:3px;">
+            <span style="font-weight:600; font-size:12.5px; color:{{ item.titleColor }};">{{ item.label }}</span>
+            <span style="{{ item.tagStyle }}">{{ item.tag }}</span>
+          </div>
+          <div style="font-size:11px; color:#6b7079; line-height:1.4;">{{ item.desc }}</div>
+        </div>
+      </sc-for>
+      <div style="font-size:10.5px; letter-spacing:1.2px; color:#52565e; text-transform:uppercase; margin:20px 6px 9px;">Task</div>
+      <sc-for list="{{ navTask }}" as="item" hint-placeholder-count="3">
+        <div onClick="{{ item.onSelect }}" style="{{ item.style }}">
+          <div style="display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:3px;">
+            <span style="font-weight:600; font-size:12.5px; color:{{ item.titleColor }};">{{ item.label }}</span>
+            <span style="{{ item.tagStyle }}">{{ item.tag }}</span>
+          </div>
+          <div style="font-size:11px; color:#6b7079; line-height:1.4;">{{ item.desc }}</div>
+        </div>
+      </sc-for>
+    </aside>
+    <main style="flex:1; min-width:0; overflow:auto; background:#08090b; padding:24px 28px 60px;">
+      <sc-if value="{{ showIntro }}" hint-placeholder-val="{{ true }}">
+        <div style="max-width:860px;">
+          <div style="font-family:'Inter',sans-serif; font-size:26px; font-weight:700; color:#f3f4f6; margin-bottom:6px;">Automation · 页面结构</div>
+          <div style="font-family:'Inter',sans-serif; color:#8b9098; font-size:14px; line-height:1.6; margin-bottom:26px;">按你的信息架构拆页：<b style="color:#cdd0d6;">Pipeline</b>（只管查看/编辑定义）与 <b style="color:#cdd0d6;">Pipeline Record</b>（运行记录）分开；Task 是<b style="color:#cdd0d6;">一次性</b>的，创建即运行、跑完即止，所以只有<b style="color:#cdd0d6;">单一 Task 页</b>（新建 + 列表 + 详情）。顶部导航可直接切换。</div>
+          <div style="display:grid; grid-template-columns:1fr 1fr; gap:14px;">
+            <div style="background:#0f1013; border:1px solid #22252b; border-radius:10px; padding:18px;">
+              <div style="font-size:11px; letter-spacing:1px; color:#ff7d2e; text-transform:uppercase; margin-bottom:8px;">Pipeline / Pipeline Record</div>
+              <div style="font-family:'Inter',sans-serif; font-size:13px; color:#aeb3bb; line-height:1.7;"><b style="color:#cdd0d6;">Pipeline</b>：管理定义与步骤（查看 / 编辑），不混入运行数据。<b style="color:#cdd0d6;">Pipeline Record</b>：所有运行平铺成表，列出 pipeline id / 名 / run / 步骤 / 结果，按需展开每条自己的步骤。</div>
+            </div>
+            <div style="background:#0f1013; border:1px solid #22252b; border-radius:10px; padding:18px;">
+              <div style="font-size:11px; letter-spacing:1px; color:#4f9dff; text-transform:uppercase; margin-bottom:8px;">Task（合并为一页）</div>
+              <div style="font-family:'Inter',sans-serif; font-size:13px; color:#aeb3bb; line-height:1.7;">Task 一次性，无独立定义，不需要 Pipeline 那样的双页。一页搞定：<b style="color:#cdd0d6;">新建任务</b> + 平铺列表（搜索 / 快速过滤）+ 点行看详情（T3 终端驾驶舱）。</div>
+            </div>
+          </div>
+          <div style="font-family:'Inter',sans-serif; font-size:13px; color:#6b7079; margin-top:24px;">← 左侧或顶部导航在各页面间切换。Pipeline Record 里失败的 run 可 <b style="color:#ff7d2e;">Retry</b>、运行中的可 <b style="color:#f15b4a;">Cancel</b>；Task 行点开即在当页查看完整详情（日志/Result/Diff），失败可重试、运行中可取消。</div>
+        </div>
+      </sc-if>
+      <sc-if value="{{ showMgmt }}" hint-placeholder-val="{{ false }}">
+        <div style="font-family:'Inter',sans-serif; margin-bottom:16px;">
+          <div style="display:flex; align-items:center; gap:9px; margin-bottom:4px;"><span style="font-size:18px; font-weight:700; color:#f3f4f6;">Pipeline · 管理</span><span style="font-size:10px; font-weight:700; letter-spacing:.5px; padding:2px 7px; border-radius:5px; color:#ff7d2e; background:#ff7d2e22;">页面</span></div>
+          <div style="font-size:13px; color:#8b9098; line-height:1.6;">这里只做 pipeline 的<b style="color:#cdd0d6;">查看与编辑</b>——定义、步骤、触发方式。运行产生的记录在 <b style="color:#cdd0d6;">Pipeline Record</b> 页查看，两者分开。</div>
+        </div>
+        <div style="background:#0b0c0e; border:1px solid #20232a; border-radius:12px; overflow:hidden;">          <div style="display:flex; gap:22px; align-items:center; padding:0 18px; background:#0d0e11; border-bottom:1px solid #1d1f24;">
+            <sc-for list="{{ topNav }}" as="tb" hint-placeholder-count="4">
+              <div onClick="{{ tb.onClick }}" style="{{ tb.style }}">{{ tb.label }}</div>
+            </sc-for>
+          </div>
+          <div style="display:flex; min-height:560px; min-width:900px;">
+            <div style="width:248px; flex-shrink:0; border-right:1px solid #1d1f24; display:flex; flex-direction:column;">
+              <div style="padding:11px 14px; display:flex; align-items:center; gap:8px; border-bottom:1px solid #1d1f24;">
+                <span style="font-size:10.5px; letter-spacing:1px; color:#565b63; text-transform:uppercase;">Pipelines · 6</span>
+                <span style="flex:1;"></span>
+                <span style="font-size:11px; color:#0b0c0e; background:#ff7d2e; padding:3px 9px; border-radius:6px; cursor:pointer; font-weight:600;">+ New</span>
+              </div>
+              <div style="overflow-y:auto; flex:1;">
+                <sc-for list="{{ mgmt.list }}" as="p" hint-placeholder-count="6">
+                  <button onClick="{{ p.onSelect }}" style="{{ p.rowStyle }}">
+                    <div style="display:flex; align-items:center; gap:8px; margin-bottom:3px;">
+                      <span style="width:6px; height:6px; border-radius:50%; flex-shrink:0; background:{{ p.lastDot }};"></span>
+                      <span style="font-size:12.5px; font-weight:600; color:{{ p.nameColor }};">{{ p.name }}</span>
+                    </div>
+                    <div style="display:flex; align-items:center; gap:10px; padding-left:14px;">
+                      <span style="font-size:10.5px; color:#6b7079; font-family:'JetBrains Mono',monospace;">{{ p.pid }}</span>
+                      <span style="font-size:10.5px; color:#565b63;">{{ p.stepCount }} steps</span>
+                      <span style="font-size:10.5px; color:#565b63;">{{ p.runs }} runs</span>
+                    </div>
+                  </button>
+                </sc-for>
+              </div>
+            </div>
+            <div style="flex:1; min-width:0; display:flex; flex-direction:column;">
+              <div style="padding:18px 22px; border-bottom:1px solid #1d1f24;">
+                <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
+                  <span style="font-size:19px; font-weight:700; color:#f3f4f6;">{{ mgmt.sel.name }}</span>
+                  <span style="font-size:11px; color:#6b7079; font-family:'JetBrains Mono',monospace;">{{ mgmt.sel.pid }}</span>
+                  <span style="flex:1;"></span>
+                  <span onClick="{{ mgmt.viewRecords }}" style="font-size:11.5px; color:#4f9dff; cursor:pointer; font-weight:600;">查看运行记录 →</span>
+                  <span onClick="{{ mgmt.toggleEdit }}" style="{{ mgmt.editStyle }}">{{ mgmt.editLabel }}</span>
+                </div>
+                <div style="margin-top:10px; display:flex; align-items:center; gap:18px; font-size:12px; color:#8b9098;">
+                  <span>trigger · <b style="color:#cdd0d6;">{{ mgmt.sel.trigger }}</b></span>
+                  <span>steps · <b style="color:#cdd0d6;">{{ mgmt.sel.stepCount }}</b></span>
+                  <span>runs · <b style="color:#cdd0d6;">{{ mgmt.sel.runs }}</b></span>
+                  <span style="display:flex; align-items:center; gap:6px;">last · <span style="width:7px; height:7px; border-radius:50%; background:{{ mgmt.sel.lastDot }};"></span><b style="color:#cdd0d6;">{{ mgmt.sel.lastStatus }}</b></span>
+                </div>
+              </div>
+              <div style="flex:1; overflow-y:auto; padding:18px 22px;">
+                <div style="display:flex; align-items:center; gap:10px; margin-bottom:12px;">
+                  <span style="font-size:11px; letter-spacing:1px; color:#565b63; text-transform:uppercase;">Steps · 定义</span>
+                  <span style="font-size:11px; color:#6b7079;">{{ mgmt.sel.stepCount }}</span>
+                  <span style="flex:1;"></span>
+                  <sc-if value="{{ mgmt.edit }}" hint-placeholder-val="{{ false }}">
+                    <span style="font-size:11px; color:#46c25a; cursor:pointer; font-weight:600;">+ Add step</span>
+                  </sc-if>
+                </div>
+                <div style="border:1px solid #1d1f24; border-radius:10px; overflow:hidden;">
+                  <sc-for list="{{ mgmt.steps }}" as="s" hint-placeholder-count="6">
+                    <div style="display:flex; align-items:flex-start; gap:12px; padding:12px 15px; border-bottom:1px solid #16181c;">
+                      <sc-if value="{{ s.edit }}" hint-placeholder-val="{{ false }}">
+                        <span style="color:#3f434b; font-size:13px; cursor:grab; padding-top:1px;">⠿</span>
+                      </sc-if>
+                      <span style="font-size:11px; color:#565b63; font-family:'JetBrains Mono',monospace; width:18px; flex-shrink:0; text-align:right; padding-top:1px;">{{ s.idx }}</span>
+                      <div style="flex:1; min-width:0;">
+                        <div style="display:flex; align-items:center; gap:9px; margin-bottom:5px;">
+                          <span style="font-size:13px; font-weight:600; color:#e6e8eb;">{{ s.name }}</span>
+                          <span style="font-size:9.5px; font-weight:600; padding:1px 7px; border-radius:5px; color:{{ s.kindColor }}; background:{{ s.kindColor }}1c;">{{ s.kindLabel }}</span>
+                        </div>
+                        <div style="font-size:11.5px; color:#7d828b; font-family:'JetBrains Mono',monospace; line-height:1.5; word-break:break-all;">{{ s.cmd }}</div>
+                      </div>
+                      <sc-if value="{{ s.edit }}" hint-placeholder-val="{{ false }}">
+                        <span style="color:#5e636b; font-size:13px; cursor:pointer; padding-top:1px;">✕</span>
+                      </sc-if>
+                    </div>
+                  </sc-for>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </sc-if>
+      <sc-if value="{{ showTRecord }}" hint-placeholder-val="{{ false }}">
+        <div style="font-family:'Inter',sans-serif; margin-bottom:16px;">
+          <div style="display:flex; align-items:center; gap:9px; margin-bottom:4px;"><span style="font-size:18px; font-weight:700; color:#f3f4f6;">Task · 任务</span><span style="font-size:10px; font-weight:700; letter-spacing:.5px; padding:2px 7px; border-radius:5px; color:#ff7d2e; background:#ff7d2e22;">页面</span></div>
+          <div style="font-size:13px; color:#8b9098; line-height:1.6;">任务是<b style="color:#cdd0d6;">一次性</b>的——<b style="color:#cdd0d6;">创建即运行，跑完即止</b>，没有需要单独管理的「定义」，所以不像 Pipeline 拆成两页。这一页就是<b style="color:#cdd0d6;">新建任务 + 最近/运行中任务列表</b>（平铺、可搜索、快速过滤）。点任意一行看它的详情（T3 终端驾驶舱）。</div>
+        </div>
+        <div style="background:#0b0c0e; border:1px solid #20232a; border-radius:12px; overflow:hidden;">          <div style="display:flex; gap:22px; align-items:center; padding:0 18px; background:#0d0e11; border-bottom:1px solid #1d1f24;">
+            <sc-for list="{{ topNav }}" as="tb" hint-placeholder-count="4">
+              <div onClick="{{ tb.onClick }}" style="{{ tb.style }}">{{ tb.label }}</div>
+            </sc-for>
+          </div>
+          <div style="padding:13px 18px; border-bottom:1px solid #1d1f24; display:flex; flex-direction:column; gap:11px; min-width:980px;">
+            <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
+              <div style="flex:1; min-width:220px; display:flex; align-items:center; gap:8px; background:#08090b; border:1px solid #24262b; border-radius:8px; padding:7px 12px;">
+                <span style="color:#565b63; font-size:13px;">⌕</span>
+                <input value="{{ taskRec.search }}" onChange="{{ taskRec.onSearch }}" placeholder="按 task id / 命令 / 步骤 / pipeline 搜索…" style="flex:1; background:transparent; border:none; outline:none; color:#cdd0d6; font-family:'JetBrains Mono',monospace; font-size:12px;" />
+                <sc-if value="{{ taskRec.search }}" hint-placeholder-val="{{ false }}">
+                  <span onClick="{{ taskRec.clearSearch }}" style="color:#6b7079; cursor:pointer; font-size:14px;">×</span>
+                </sc-if>
+              </div>
+              <div style="font-size:11.5px; color:#7d828b; white-space:nowrap;"><b style="color:#e6e8eb;">{{ taskRec.total }}</b> tasks · <b style="color:#f15b4a;">{{ taskRec.failN }}</b> failed</div>
+              <span onClick="{{ taskRec.openCreate }}" style="font-size:12px; font-weight:600; color:#0b0c0e; background:#ff7d2e; padding:8px 15px; border-radius:8px; cursor:pointer; white-space:nowrap;">+ 新建任务</span>
+            </div>
+            <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
+              <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; margin-right:2px;">快速</span>
+              <sc-for list="{{ taskRec.quick }}" as="q" hint-placeholder-count="6">
+                <div onClick="{{ q.onSelect }}" style="{{ q.style }}">{{ q.label }}</div>
+              </sc-for>
+            </div>
+            <div style="display:flex; align-items:center; gap:16px; flex-wrap:wrap;">
+              <div style="display:flex; align-items:center; gap:8px;"><span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase;">Status</span><div style="display:flex; gap:3px; background:#0c0d10; border:1px solid #1a1d22; border-radius:8px; padding:3px;"><sc-for list="{{ taskRec.statusOpts }}" as="o" hint-placeholder-count="4"><div onClick="{{ o.onSelect }}" style="{{ o.style }}">{{ o.label }}</div></sc-for></div></div>
+              <div style="display:flex; align-items:center; gap:8px;"><span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase;">Provider</span><div style="display:flex; gap:3px; background:#0c0d10; border:1px solid #1a1d22; border-radius:8px; padding:3px;"><sc-for list="{{ taskRec.providerOpts }}" as="o" hint-placeholder-count="4"><div onClick="{{ o.onSelect }}" style="{{ o.style }}">{{ o.label }}</div></sc-for></div></div>
+              <div style="display:flex; align-items:center; gap:8px;"><span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase;">Time</span><div style="display:flex; gap:3px; background:#0c0d10; border:1px solid #1a1d22; border-radius:8px; padding:3px;"><sc-for list="{{ taskRec.timeOpts }}" as="o" hint-placeholder-count="4"><div onClick="{{ o.onSelect }}" style="{{ o.style }}">{{ o.label }}</div></sc-for></div></div>
+            </div>
+            <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;"><span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase;">Pipeline</span><div style="display:flex; gap:3px; flex-wrap:wrap; background:#0c0d10; border:1px solid #1a1d22; border-radius:8px; padding:3px;"><sc-for list="{{ taskRec.pipeOpts }}" as="o" hint-placeholder-count="7"><div onClick="{{ o.onSelect }}" style="{{ o.style }}">{{ o.label }}</div></sc-for></div></div>
+          </div>
+          <div style="min-width:980px; max-height:540px; overflow-y:auto;">
+            <div style="display:flex; align-items:center; gap:12px; padding:9px 16px; background:#0a0b0d; border-bottom:1px solid #1d1f24; position:sticky; top:0; z-index:2;">
+              <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; width:76px; flex-shrink:0;">Status</span>
+              <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; width:86px; flex-shrink:0;">Task ID</span>
+              <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; width:200px; flex-shrink:0;">Pipeline · Step</span>
+              <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; width:80px; flex-shrink:0;">Provider</span>
+              <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; flex:1; min-width:80px;">Command</span>
+              <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; width:58px; flex-shrink:0; text-align:right;">Cost</span>
+              <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; width:58px; flex-shrink:0; text-align:right;">Dur</span>
+              <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; width:62px; flex-shrink:0; text-align:right;">Started</span>
+              <span style="width:16px; flex-shrink:0;"></span>
+            </div>
+            <sc-for list="{{ taskRec.rows }}" as="r" hint-placeholder-count="12">
+                  <div><div onClick="{{ r.onToggle }}" style="{{ r.rowStyle }}">
+                    <span style="display:flex; align-items:center; gap:7px; width:76px; flex-shrink:0;">
+                      <span style="width:8px; height:8px; border-radius:50%; flex-shrink:0; background:{{ r.statusColor }};"></span>
+                      <span style="font-size:11px; color:{{ r.statusColor }}; font-weight:600;">{{ r.status }}</span>
+                    </span>
+                    <span style="font-size:12px; color:#c9cdd3; width:86px; flex-shrink:0; font-family:'JetBrains Mono',monospace;">{{ r.id }}</span>
+                    <span style="width:200px; flex-shrink:0; overflow:hidden;">
+                      <span style="display:block; font-size:12px; color:#c2c6cd; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ r.pipeName }}</span>
+                      <span style="display:block; font-size:10.5px; color:#6b7079;">{{ r.step }}</span>
+                    </span>
+                    <span style="font-size:11.5px; color:{{ r.providerColor }}; width:80px; flex-shrink:0; font-weight:600;">{{ r.provider }}</span>
+                    <span style="flex:1; min-width:80px; font-size:11px; color:#8b9098; font-family:'JetBrains Mono',monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ r.summary }}</span>
+                    <span style="font-size:11px; color:#a978f0; width:58px; flex-shrink:0; text-align:right;">{{ r.cost }}</span>
+                    <span style="font-size:11px; color:#6b7079; width:58px; flex-shrink:0; text-align:right;">{{ r.dur }}</span>
+                    <span style="font-size:11px; color:#565b63; width:62px; flex-shrink:0; text-align:right;">{{ r.ago }}</span>
+                    <span style="font-size:11px; color:#6b7079; width:16px; flex-shrink:0; text-align:right;">{{ r.openGlyph }}</span>
+                  </div>
+                  <sc-if value="{{ r.expanded }}" hint-placeholder-val="{{ false }}">
+                    <div style="background:#070809; border-bottom:1px solid #1d1f24; border-left:2px solid {{ r.statusColor }}; animation:slideIn .15s ease;">
+                      <div style="display:flex; align-items:center; gap:10px; padding:10px 18px; background:#0d0e11; border-bottom:1px solid #16181c;">
+                        <span style="width:9px; height:9px; border-radius:50%; background:{{ r.detail.statusColor }};"></span>
+                        <span style="font-size:12px; color:#9aa0a8; font-family:'JetBrains Mono',monospace;">task://{{ r.detail.id }}</span>
+                        <span style="color:#3f434b;">·</span>
+                        <span style="font-size:12px; font-weight:700; color:#f3f4f6;">{{ r.detail.step }}</span>
+                        <span style="font-size:10.5px; font-weight:700; letter-spacing:.5px; padding:2px 8px; border-radius:5px; text-transform:uppercase; color:{{ r.detail.statusColor }}; background:{{ r.detail.statusColor }}1f;">{{ r.detail.status }}</span>
+                        <span style="flex:1;"></span>
+                        <span onClick="{{ r.onOpenFull }}" style="font-size:11px; color:#4f9dff; cursor:pointer; font-weight:600;">打开完整详情 ↗</span>
+                        <sc-if value="{{ r.detail.retryable }}" hint-placeholder-val="{{ false }}">
+                          <span onClick="{{ r.detail.onRetry }}" style="font-size:11px; font-weight:700; padding:6px 13px; border-radius:7px; cursor:pointer; color:#0b0c0e; background:#ff7d2e;">↻ Retry</span>
+                        </sc-if>
+                        <sc-if value="{{ r.detail.running }}" hint-placeholder-val="{{ false }}">
+                          <span onClick="{{ r.detail.onCancel }}" style="font-size:11px; font-weight:700; padding:6px 13px; border-radius:7px; cursor:pointer; color:#f15b4a; background:#f15b4a18; border:1px solid #f15b4a55;">■ Cancel</span>
+                        </sc-if>
+                        <span style="font-size:11px; color:#0b0c0e; background:#1a1d22; color:#cdd0d6; padding:6px 12px; border-radius:7px; cursor:pointer; border:1px solid #2a2e35;">Re-run</span>
+                      </div>
+                      <div style="display:flex; align-items:center; gap:10px; padding:9px 18px; background:#0a0b0d; border-bottom:1px solid #16181c;">
+                        <div style="flex:1; display:flex; align-items:center; gap:8px; background:#070809; border:1px solid #20232a; border-radius:7px; padding:6px 11px;">
+                          <span style="color:#565b63; font-size:12px;">⌕</span>
+                          <input value="{{ taskSearch }}" onChange="{{ onSearch }}" placeholder="grep log…" style="flex:1; background:transparent; border:none; outline:none; color:#cdd0d6; font-family:'JetBrains Mono',monospace; font-size:12px;" />
+                          <sc-if value="{{ taskSearch }}" hint-placeholder-val="{{ false }}">
+                            <span onClick="{{ clearSearch }}" style="color:#6b7079; cursor:pointer; font-size:13px;">×</span>
+                          </sc-if>
+                        </div>
+                        <div onClick="{{ toggleErrors }}" style="{{ errToggleStyle }}">
+                          <span style="width:8px; height:8px; border-radius:2px; background:#f15b4a; display:inline-block;"></span>
+                          <span style="font-size:11px;">errors {{ r.detail.errCount }}</span>
+                        </div>
+                      </div>
+                      <div style="display:flex; min-height:200px;">
+                        <div style="flex:1; min-width:0; overflow-y:auto; max-height:280px; padding:13px 0; font-size:12.5px; line-height:1.9; background:#070809;">
+                          <sc-for list="{{ r.detail.logLines }}" as="ln" hint-placeholder-count="6">
+                            <div style="display:flex; gap:0; padding:0 18px; background:{{ ln.rowBg }};">
+                              <span style="color:#34373d; user-select:none; width:24px; text-align:right; flex-shrink:0; margin-right:14px;">{{ ln.n }}</span>
+                              <span style="color:{{ ln.color }}; white-space:pre-wrap;">{{ ln.text }}</span>
+                            </div>
+                          </sc-for>
+                        </div>
+                        <div style="width:13px; flex-shrink:0; background:#0a0b0d; border-left:1px solid #16181c; display:flex; flex-direction:column; gap:2px; padding:8px 3px;">
+                          <sc-for list="{{ r.detail.mini }}" as="mm" hint-placeholder-count="8">
+                            <span style="width:100%; height:5px; border-radius:1px; background:{{ mm.color }};"></span>
+                          </sc-for>
+                        </div>
+                      </div>
+                      <div style="display:flex; border-top:1px solid #16181c; min-height:150px;">
+                        <div style="flex:1; min-width:0; display:flex; flex-direction:column; border-right:1px solid #16181c;">
+                          <div style="padding:8px 18px; background:#0d0e11; border-bottom:1px solid #16181c; font-size:11px; letter-spacing:1px; color:#9aa0a8; text-transform:uppercase; font-weight:600;">Result</div>
+                          <div style="flex:1; overflow:auto; max-height:170px; padding:11px 18px; font-size:11px; line-height:1.7; color:#a6abb3; white-space:pre; background:#08090b;">{{ r.detail.result }}</div>
+                        </div>
+                        <div style="flex:1.2; min-width:0; display:flex; flex-direction:column;">
+                          <div style="padding:8px 18px; background:#0d0e11; border-bottom:1px solid #16181c; font-size:11px; letter-spacing:1px; color:#9aa0a8; text-transform:uppercase; font-weight:600;">Git Diff</div>
+                          <div style="flex:1; overflow:auto; max-height:170px; padding:7px 0; font-size:10.5px; line-height:1.7; background:#08090b;">
+                            <sc-for list="{{ r.detail.diff }}" as="d" hint-placeholder-count="6">
+                              <div style="padding:0 18px; background:{{ d.bg }}; color:{{ d.color }}; white-space:pre;">{{ d.text }}</div>
+                            </sc-for>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </sc-if>
+                  </div>
+            </sc-for>
+          </div>
+        </div>
+        <sc-if value="{{ taskRec.createOpen }}" hint-placeholder-val="{{ false }}">
+          <div onClick="{{ taskRec.closeCreate }}" style="position:fixed; inset:0; background:rgba(4,5,7,.72); z-index:50; display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace;">
+            <div onClick="{{ taskRec.stop }}" style="width:560px; max-width:92vw; background:#0e1013; border:1px solid #2a2e35; border-radius:14px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.5);">
+              <div style="display:flex; align-items:center; gap:10px; padding:16px 20px; border-bottom:1px solid #1d1f24;">
+                <span style="font-size:15px; font-weight:700; color:#f3f4f6; font-family:'Inter',sans-serif;">新建任务</span>
+                <span style="font-size:11px; color:#6b7079;">创建即运行 · 一次性</span>
+                <span style="flex:1;"></span>
+                <span onClick="{{ taskRec.closeCreate }}" style="font-size:18px; color:#6b7079; cursor:pointer; line-height:1;">×</span>
+              </div>
+              <div style="padding:20px;">
+                <div style="font-size:11px; letter-spacing:1px; color:#565b63; text-transform:uppercase; margin-bottom:7px;">Provider / Repo</div>
+                <select value="{{ taskRec.providerVal }}" onChange="{{ taskRec.setProvider }}" style="width:100%; background:#08090b; border:1px solid #24262b; border-radius:8px; padding:10px 12px; color:#cdd0d6; font-family:'JetBrains Mono',monospace; font-size:12.5px; outline:none; margin-bottom:18px;">
+                  <option>FortiNAC</option>
+                  <option>scratch</option>
+                  <option>canary</option>
+                  <option>regress</option>
+                  <option>depbump</option>
+                  <option>docs</option>
+                </select>
+                <div style="font-size:11px; letter-spacing:1px; color:#565b63; text-transform:uppercase; margin-bottom:7px;">Type</div>
+                <div style="display:flex; gap:4px; background:#08090b; border:1px solid #24262b; border-radius:8px; padding:4px; margin-bottom:18px;">
+                  <div onClick="{{ taskRec.modeShell }}" style="{{ taskRec.modeShellStyle }}">⌘ Shell</div>
+                  <div onClick="{{ taskRec.modeLlm }}" style="{{ taskRec.modeLlmStyle }}">✦ LLM Prompt</div>
+                </div>
+                <div style="font-size:11px; letter-spacing:1px; color:#565b63; text-transform:uppercase; margin-bottom:7px;">Command / Prompt</div>
+                <textarea value="{{ taskRec.form.cmd }}" onChange="{{ taskRec.onCmd }}" placeholder="{{ taskRec.cmdPlaceholder }}" style="width:100%; min-height:96px; resize:vertical; background:#08090b; border:1px solid #24262b; border-radius:8px; padding:11px 13px; color:#cdd0d6; font-family:'JetBrains Mono',monospace; font-size:12.5px; line-height:1.6; outline:none; box-sizing:border-box;"></textarea>
+              </div>
+              <div style="display:flex; align-items:center; gap:12px; padding:14px 20px; border-top:1px solid #1d1f24; background:#0b0c0e;">
+                <span style="font-size:11px; color:#6b7079;">运行后会出现在下方列表，状态 running。</span>
+                <span style="flex:1;"></span>
+                <span onClick="{{ taskRec.closeCreate }}" style="font-size:12px; color:#9aa0a8; cursor:pointer; padding:9px 14px;">取消</span>
+                <span onClick="{{ taskRec.runCreate }}" style="{{ taskRec.runStyle }}">▶ 创建并运行</span>
+              </div>
+            </div>
+          </div>
+        </sc-if>
+      </sc-if>
+      <sc-if value="{{ showP1 }}" hint-placeholder-val="{{ true }}">
+        <div style="font-family:'Inter',sans-serif; margin-bottom:16px;">
+          <div style="display:flex; align-items:center; gap:9px; margin-bottom:4px;"><span style="font-size:18px; font-weight:700; color:#f3f4f6;">Pipeline Record · 执行记录</span><span style="font-size:10px; font-weight:700; letter-spacing:.5px; padding:2px 7px; border-radius:5px; color:#ff7d2e; background:#ff7d2e22;">新方向</span></div>
+          <div style="font-size:13px; color:#8b9098; line-height:1.6;">所有 pipeline 的执行记录<b style="color:#cdd0d6;">平铺成一个表</b>，每行直接列出 pipeline id、pipeline 名、run id、步骤、结果、触发方式、耗时、时间。按条件筛选（状态 / pipeline / 时间 / 触发）。每条记录展开时渲染<b style="color:#cdd0d6;">它自己的步骤</b>——步骤拆细、每次不一样都没问题，并自动定位到失败步的日志。<span style="color:#6b7079;">（如需仍可切「按 pipeline 分组」。）</span></div>
+        </div>
+        <div style="background:#0b0c0e; border:1px solid #20232a; border-radius:12px; overflow:hidden;">
+          <div style="display:flex; gap:22px; align-items:center; padding:0 18px; background:#0d0e11; border-bottom:1px solid #1d1f24;">
+            <sc-for list="{{ topNav }}" as="tb" hint-placeholder-count="4">
+              <div onClick="{{ tb.onClick }}" style="{{ tb.style }}">{{ tb.label }}</div>
+            </sc-for>
+          </div>
+          <div style="padding:13px 18px; border-bottom:1px solid #1d1f24; display:flex; flex-direction:column; gap:11px; min-width:880px;">
+            <div style="display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
+              <div style="flex:1; min-width:220px; display:flex; align-items:center; gap:8px; background:#08090b; border:1px solid #24262b; border-radius:8px; padding:7px 12px;">
+                <span style="color:#565b63; font-size:13px;">⌕</span>
+                <input value="{{ records.search }}" onChange="{{ records.onSearch }}" placeholder="按 run id / pipeline / 步骤名 筛选…" style="flex:1; background:transparent; border:none; outline:none; color:#cdd0d6; font-family:'JetBrains Mono',monospace; font-size:12px;" />
+                <sc-if value="{{ records.search }}" hint-placeholder-val="{{ false }}">
+                  <span onClick="{{ records.clearRecSearch }}" style="color:#6b7079; cursor:pointer; font-size:14px;">×</span>
+                </sc-if>
+              </div>
+              <div style="display:flex; gap:3px; background:#0c0d10; border:1px solid #1a1d22; border-radius:8px; padding:3px;">
+                  <sc-for list="{{ records.groupOpts }}" as="o" hint-placeholder-count="3">
+                    <div onClick="{{ o.onSelect }}" style="{{ o.style }}">{{ o.label }}</div>
+                  </sc-for>
+                </div>
+              <div style="font-size:11.5px; color:#7d828b; white-space:nowrap;"><b style="color:#e6e8eb;">{{ records.total }}</b> runs · <b style="color:#f15b4a;">{{ records.failN }}</b> failed</div>
+            </div>
+            <div style="display:flex; align-items:center; gap:16px; flex-wrap:wrap;">
+              <div style="display:flex; align-items:center; gap:8px;"><span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase;">Status</span><div style="display:flex; gap:3px; background:#0c0d10; border:1px solid #1a1d22; border-radius:8px; padding:3px;">
+                  <sc-for list="{{ records.statusOpts }}" as="o" hint-placeholder-count="3">
+                    <div onClick="{{ o.onSelect }}" style="{{ o.style }}">{{ o.label }}</div>
+                  </sc-for>
+                </div></div>
+              <div style="display:flex; align-items:center; gap:8px;"><span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase;">Time</span><div style="display:flex; gap:3px; background:#0c0d10; border:1px solid #1a1d22; border-radius:8px; padding:3px;">
+                  <sc-for list="{{ records.timeOpts }}" as="o" hint-placeholder-count="3">
+                    <div onClick="{{ o.onSelect }}" style="{{ o.style }}">{{ o.label }}</div>
+                  </sc-for>
+                </div></div>
+              <div style="display:flex; align-items:center; gap:8px;"><span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase;">Trigger</span><div style="display:flex; gap:3px; background:#0c0d10; border:1px solid #1a1d22; border-radius:8px; padding:3px;">
+                  <sc-for list="{{ records.trigOpts }}" as="o" hint-placeholder-count="3">
+                    <div onClick="{{ o.onSelect }}" style="{{ o.style }}">{{ o.label }}</div>
+                  </sc-for>
+                </div></div>
+            </div>
+            <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;"><span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase;">Pipeline</span><div style="display:flex; gap:3px; background:#0c0d10; border:1px solid #1a1d22; border-radius:8px; padding:3px;">
+                  <sc-for list="{{ records.pipeOpts }}" as="o" hint-placeholder-count="3">
+                    <div onClick="{{ o.onSelect }}" style="{{ o.style }}">{{ o.label }}</div>
+                  </sc-for>
+                </div></div>
+          </div>
+          <div style="max-height:560px; overflow:auto;">
+           <div style="min-width:1040px;">
+            <sc-if value="{{ records.isGroup }}" hint-placeholder-val="{{ true }}">
+              <sc-for list="{{ records.groups }}" as="g" hint-placeholder-count="4">
+                <div>
+                  <div onClick="{{ g.onToggle }}" style="{{ g.headerStyle }}">
+                    <span style="font-size:11px; color:#6b7079; width:10px; flex-shrink:0;">{{ g.chev }}</span>
+                    <span style="width:8px; height:8px; border-radius:50%; flex-shrink:0; background:{{ g.lastDot }};"></span>
+                    <span style="font-size:13px; font-weight:700; color:#e6e8eb;">{{ g.name }}</span>
+                    <span style="font-size:11px; color:#6b7079;">{{ g.count }} runs</span>
+                    <sc-if value="{{ g.hasFail }}" hint-placeholder-val="{{ true }}">
+                      <span style="font-size:10px; font-weight:700; color:#f15b4a; background:#f15b4a1c; padding:2px 7px; border-radius:5px;">{{ g.fails }} failed</span>
+                    </sc-if>
+                    <span style="flex:1;"></span>
+                    <span style="font-size:9.5px; color:#565b63; letter-spacing:.5px;">recent</span>
+                    <div style="display:flex; gap:2px;">
+                      <sc-for list="{{ g.spark }}" as="s" hint-placeholder-count="12">
+                        <span style="width:7px; height:14px; border-radius:2px; background:{{ s.bg }};"></span>
+                      </sc-for>
+                    </div>
+                  </div>
+                  <sc-for list="{{ g.runs }}" as="r" hint-placeholder-count="0">
+                    <div>
+                  <div onClick="{{ r.onToggle }}" style="{{ r.rowStyle }}">
+                    <span style="font-size:10px; color:#565b63; width:12px; flex-shrink:0;">{{ r.chev }}</span>
+                    <span style="display:flex; align-items:center; gap:7px; width:74px; flex-shrink:0;">
+                      <span style="width:8px; height:8px; border-radius:50%; flex-shrink:0; background:{{ r.dotColor }};"></span>
+                      <span style="font-size:11px; color:{{ r.summaryColor }}; font-weight:600;">{{ r.statusLabel }}</span>
+                    </span>
+                    <sc-if value="{{ r.showPipe }}" hint-placeholder-val="{{ true }}">
+                      <span style="font-size:11.5px; color:#6b7079; width:90px; flex-shrink:0; font-family:'JetBrains Mono',monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ r.pid }}</span>
+                    </sc-if>
+                    <sc-if value="{{ r.showPipe }}" hint-placeholder-val="{{ true }}">
+                      <span style="font-size:12px; font-weight:600; color:#c2c6cd; width:196px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ r.pipeName }}</span>
+                    </sc-if>
+                    <span style="font-size:12px; color:#c9cdd3; width:80px; flex-shrink:0;">{{ r.id }}</span>
+                    <div style="flex:1; min-width:64px; display:flex; gap:1.5px;">
+                      <sc-for list="{{ r.segments }}" as="seg" hint-placeholder-count="8">
+                        <span style="flex:1; height:6px; border-radius:1px; background:{{ seg.bg }};"></span>
+                      </sc-for>
+                    </div>
+                    <span style="font-size:11px; color:{{ r.summaryColor }}; width:150px; flex-shrink:0; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ r.summary }}</span>
+                    <span style="font-size:10.5px; color:#7d828b; width:92px; flex-shrink:0;">{{ r.trigGlyph }} {{ r.trigger }}</span>
+                    <span style="font-size:11px; color:#6b7079; width:64px; flex-shrink:0; text-align:right;">{{ r.dur }}</span>
+                    <span style="font-size:11px; color:#565b63; width:62px; flex-shrink:0; text-align:right;">{{ r.ago }}</span>
+                    <span style="position:sticky; right:0; width:104px; flex-shrink:0; display:flex; justify-content:flex-end; align-items:center; padding:11px 16px 11px 18px; margin:-11px -16px -11px 0; background:linear-gradient(90deg, transparent, #0c0d10 26%); pointer-events:none;">
+                      <sc-if value="{{ r.quick.show }}" hint-placeholder-val="{{ false }}">
+                        <span onClick="{{ r.quick.run }}" style="{{ r.quickStyle }} pointer-events:auto;">{{ r.quick.label }}</span>
+                      </sc-if>
+                    </span>
+                  </div>
+                  <sc-if value="{{ r.expanded }}" hint-placeholder-val="{{ false }}">
+                    <div style="background:#08090b; border-bottom:1px solid #1d1f24; border-left:2px solid {{ r.dotColor }}; animation:slideIn .15s ease;">
+                      <div style="display:flex; align-items:center; gap:8px; padding:11px 18px; border-bottom:1px solid #15171a; background:#0d0e11;">
+                        <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; margin-right:2px;">Actions</span>
+                        <sc-for list="{{ r.actions }}" as="ac" hint-placeholder-count="2">
+                          <span onClick="{{ ac.run }}" style="font-size:11px; font-weight:600; padding:6px 12px; border-radius:7px; cursor:pointer; color:#cdd0d6; background:#1a1d22; border:1px solid #2a2e35;">{{ ac.label }}</span>
+                        </sc-for>
+                      </div>
+                      <div style="padding:13px 18px 11px; overflow-x:auto;">
+                        <div style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; margin-bottom:9px;">{{ r.detail.count }} steps · 此 run 自己的步骤 · 点步骤切日志</div>
+                        <div style="display:flex; align-items:center; gap:5px;">
+                          <sc-for list="{{ r.detail.steps }}" as="st" hint-placeholder-count="6">
+                            <div onClick="{{ st.onPick }}" style="{{ st.pillStyle }}">
+                              <span style="color:{{ st.color }}; font-size:11px;">{{ st.glyph }}</span>
+                              <span style="font-size:11px; color:#d4d7dc;">{{ st.name }}</span>
+                            </div>
+                          </sc-for>
+                        </div>
+                      </div>
+                      <div style="display:flex; min-height:172px; border-top:1px solid #15171a;">
+                        <div style="flex:1.7; min-width:0; display:flex; flex-direction:column; border-right:1px solid #15171a;">
+                          <div style="display:flex; align-items:center; gap:9px; padding:8px 18px; background:#0d0e11; border-bottom:1px solid #15171a;">
+                            <span style="color:{{ r.detail.focus.color }}; font-size:12px;">{{ r.detail.focus.glyph }}</span>
+                            <span style="font-weight:700; color:#f3f4f6; font-size:12.5px;">{{ r.detail.focus.name }}</span>
+                            <span style="font-size:9px; font-weight:600; padding:1px 6px; border-radius:4px; color:{{ r.detail.focus.kindColor }}; background:{{ r.detail.focus.kindColor }}1c;">{{ r.detail.focus.kind }}</span>
+                            <span style="flex:1;"></span>
+                            <span onClick="{{ r.detail.onOpenTaskLog }}" style="font-size:10.5px; color:#4f9dff; cursor:pointer; font-weight:600;">Open task detail →</span>
+                          </div>
+                          <div style="flex:1; overflow-y:auto; padding:11px 18px; font-size:11.5px; line-height:1.75; background:#08090b;">
+                            <sc-for list="{{ r.detail.focusLog }}" as="ln" hint-placeholder-count="5">
+                              <div style="color:{{ ln.color }}; white-space:pre-wrap;">{{ ln.text }}</div>
+                            </sc-for>
+                          </div>
+                        </div>
+                        <div style="width:268px; flex-shrink:0; padding:10px 16px; background:#0a0b0d;">
+                          <div style="font-size:10px; letter-spacing:1px; color:#9aa0a8; text-transform:uppercase; font-weight:600; margin-bottom:7px;">Step output</div>
+                          <sc-for list="{{ r.detail.focusOut }}" as="o" hint-placeholder-count="3">
+                            <div style="display:flex; align-items:baseline; gap:9px; padding:4px 0; border-bottom:1px solid #141619;">
+                              <span style="font-size:10.5px; color:#6b7079; width:84px; flex-shrink:0;">{{ o.k }}</span>
+                              <span style="font-size:11.5px; color:{{ o.color }}; font-family:'JetBrains Mono',monospace; word-break:break-all;">{{ o.v }}</span>
+                            </div>
+                          </sc-for>
+                        </div>
+                      </div>
+                    </div>
+                  </sc-if>
+                </div>
+                  </sc-for>
+                </div>
+              </sc-for>
+            </sc-if>
+            <sc-if value="{{ records.flat }}" hint-placeholder-val="{{ false }}">
+              <div style="display:flex; align-items:center; gap:12px; padding:9px 16px; background:#0a0b0d; border-bottom:1px solid #1d1f24; position:sticky; top:0; z-index:2;">
+                <span style="width:12px; flex-shrink:0;"></span>
+                <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; width:74px; flex-shrink:0;">Status</span>
+                <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; width:90px; flex-shrink:0;">Pipeline ID</span>
+                <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; width:196px; flex-shrink:0;">Pipeline</span>
+                <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; width:80px; flex-shrink:0;">Run ID</span>
+                <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; flex:1; min-width:64px;">Steps</span>
+                <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; width:150px; flex-shrink:0;">Result</span>
+                <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; width:92px; flex-shrink:0;">Trigger</span>
+                <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; width:64px; flex-shrink:0; text-align:right;">Duration</span>
+                <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; width:62px; flex-shrink:0; text-align:right;">Started</span>
+                <span style="position:sticky; right:0; font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; width:104px; flex-shrink:0; text-align:right; padding:9px 16px 9px 18px; margin:-9px -16px -9px 0; background:linear-gradient(90deg, transparent, #0a0b0d 26%);">Actions</span>
+              </div>
+              <sc-for list="{{ records.flat }}" as="r" hint-placeholder-count="10">
+                <div>
+                  <div onClick="{{ r.onToggle }}" style="{{ r.rowStyle }}">
+                    <span style="font-size:10px; color:#565b63; width:12px; flex-shrink:0;">{{ r.chev }}</span>
+                    <span style="display:flex; align-items:center; gap:7px; width:74px; flex-shrink:0;">
+                      <span style="width:8px; height:8px; border-radius:50%; flex-shrink:0; background:{{ r.dotColor }};"></span>
+                      <span style="font-size:11px; color:{{ r.summaryColor }}; font-weight:600;">{{ r.statusLabel }}</span>
+                    </span>
+                    <sc-if value="{{ r.showPipe }}" hint-placeholder-val="{{ true }}">
+                      <span style="font-size:11.5px; color:#6b7079; width:90px; flex-shrink:0; font-family:'JetBrains Mono',monospace; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ r.pid }}</span>
+                    </sc-if>
+                    <sc-if value="{{ r.showPipe }}" hint-placeholder-val="{{ true }}">
+                      <span style="font-size:12px; font-weight:600; color:#c2c6cd; width:196px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ r.pipeName }}</span>
+                    </sc-if>
+                    <span style="font-size:12px; color:#c9cdd3; width:80px; flex-shrink:0;">{{ r.id }}</span>
+                    <div style="flex:1; min-width:64px; display:flex; gap:1.5px;">
+                      <sc-for list="{{ r.segments }}" as="seg" hint-placeholder-count="8">
+                        <span style="flex:1; height:6px; border-radius:1px; background:{{ seg.bg }};"></span>
+                      </sc-for>
+                    </div>
+                    <span style="font-size:11px; color:{{ r.summaryColor }}; width:150px; flex-shrink:0; text-align:left; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">{{ r.summary }}</span>
+                    <span style="font-size:10.5px; color:#7d828b; width:92px; flex-shrink:0;">{{ r.trigGlyph }} {{ r.trigger }}</span>
+                    <span style="font-size:11px; color:#6b7079; width:64px; flex-shrink:0; text-align:right;">{{ r.dur }}</span>
+                    <span style="font-size:11px; color:#565b63; width:62px; flex-shrink:0; text-align:right;">{{ r.ago }}</span>
+                    <span style="position:sticky; right:0; width:104px; flex-shrink:0; display:flex; justify-content:flex-end; align-items:center; padding:11px 16px 11px 18px; margin:-11px -16px -11px 0; background:linear-gradient(90deg, transparent, #0c0d10 26%); pointer-events:none;">
+                      <sc-if value="{{ r.quick.show }}" hint-placeholder-val="{{ false }}">
+                        <span onClick="{{ r.quick.run }}" style="{{ r.quickStyle }} pointer-events:auto;">{{ r.quick.label }}</span>
+                      </sc-if>
+                    </span>
+                  </div>
+                  <sc-if value="{{ r.expanded }}" hint-placeholder-val="{{ false }}">
+                    <div style="background:#08090b; border-bottom:1px solid #1d1f24; border-left:2px solid {{ r.dotColor }}; animation:slideIn .15s ease;">
+                      <div style="display:flex; align-items:center; gap:8px; padding:11px 18px; border-bottom:1px solid #15171a; background:#0d0e11;">
+                        <span style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; margin-right:2px;">Actions</span>
+                        <sc-for list="{{ r.actions }}" as="ac" hint-placeholder-count="2">
+                          <span onClick="{{ ac.run }}" style="font-size:11px; font-weight:600; padding:6px 12px; border-radius:7px; cursor:pointer; color:#cdd0d6; background:#1a1d22; border:1px solid #2a2e35;">{{ ac.label }}</span>
+                        </sc-for>
+                      </div>
+                      <div style="padding:13px 18px 11px; overflow-x:auto;">
+                        <div style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; margin-bottom:9px;">{{ r.detail.count }} steps · 此 run 自己的步骤 · 点步骤切日志</div>
+                        <div style="display:flex; align-items:center; gap:5px;">
+                          <sc-for list="{{ r.detail.steps }}" as="st" hint-placeholder-count="6">
+                            <div onClick="{{ st.onPick }}" style="{{ st.pillStyle }}">
+                              <span style="color:{{ st.color }}; font-size:11px;">{{ st.glyph }}</span>
+                              <span style="font-size:11px; color:#d4d7dc;">{{ st.name }}</span>
+                            </div>
+                          </sc-for>
+                        </div>
+                      </div>
+                      <div style="display:flex; min-height:172px; border-top:1px solid #15171a;">
+                        <div style="flex:1.7; min-width:0; display:flex; flex-direction:column; border-right:1px solid #15171a;">
+                          <div style="display:flex; align-items:center; gap:9px; padding:8px 18px; background:#0d0e11; border-bottom:1px solid #15171a;">
+                            <span style="color:{{ r.detail.focus.color }}; font-size:12px;">{{ r.detail.focus.glyph }}</span>
+                            <span style="font-weight:700; color:#f3f4f6; font-size:12.5px;">{{ r.detail.focus.name }}</span>
+                            <span style="font-size:9px; font-weight:600; padding:1px 6px; border-radius:4px; color:{{ r.detail.focus.kindColor }}; background:{{ r.detail.focus.kindColor }}1c;">{{ r.detail.focus.kind }}</span>
+                            <span style="flex:1;"></span>
+                            <span onClick="{{ r.detail.onOpenTaskLog }}" style="font-size:10.5px; color:#4f9dff; cursor:pointer; font-weight:600;">Open task detail →</span>
+                          </div>
+                          <div style="flex:1; overflow-y:auto; padding:11px 18px; font-size:11.5px; line-height:1.75; background:#08090b;">
+                            <sc-for list="{{ r.detail.focusLog }}" as="ln" hint-placeholder-count="5">
+                              <div style="color:{{ ln.color }}; white-space:pre-wrap;">{{ ln.text }}</div>
+                            </sc-for>
+                          </div>
+                        </div>
+                        <div style="width:268px; flex-shrink:0; padding:10px 16px; background:#0a0b0d;">
+                          <div style="font-size:10px; letter-spacing:1px; color:#9aa0a8; text-transform:uppercase; font-weight:600; margin-bottom:7px;">Step output</div>
+                          <sc-for list="{{ r.detail.focusOut }}" as="o" hint-placeholder-count="3">
+                            <div style="display:flex; align-items:baseline; gap:9px; padding:4px 0; border-bottom:1px solid #141619;">
+                              <span style="font-size:10.5px; color:#6b7079; width:84px; flex-shrink:0;">{{ o.k }}</span>
+                              <span style="font-size:11.5px; color:{{ o.color }}; font-family:'JetBrains Mono',monospace; word-break:break-all;">{{ o.v }}</span>
+                            </div>
+                          </sc-for>
+                        </div>
+                      </div>
+                    </div>
+                  </sc-if>
+                </div>
+              </sc-for>
+            </sc-if>
+           </div>
+          </div>
+        </div>
+      </sc-if>
+      </sc-if>
+      <sc-if value="{{ showTDetail }}" hint-placeholder-val="{{ false }}">
+        <div style="font-family:'Inter',sans-serif; margin-bottom:14px; display:flex; align-items:center; gap:10px;">
+          <span onClick="{{ fullTask.backToList }}" style="font-size:12px; color:#7d828b; cursor:pointer;">← Task</span>
+          <span style="color:#3f434b;">/</span>
+          <span style="font-size:12px; color:#9aa0a8;">Task Detail</span>
+        </div>
+        <div style="background:#0b0c0e; border:1px solid #20232a; border-radius:12px; overflow:hidden;">
+          <div style="display:flex; gap:22px; align-items:center; padding:0 18px; background:#0d0e11; border-bottom:1px solid #1d1f24;">
+            <sc-for list="{{ topNav }}" as="tb" hint-placeholder-count="4">
+              <div onClick="{{ tb.onClick }}" style="{{ tb.style }}">{{ tb.label }}</div>
+            </sc-for>
+          </div>
+          <div style="padding:18px 22px; border-bottom:1px solid #1d1f24; display:flex; align-items:center; gap:13px; flex-wrap:wrap;">
+            <span style="width:11px; height:11px; border-radius:50%; background:{{ fullTask.statusColor }}; box-shadow:0 0 8px {{ fullTask.statusColor }}77;"></span>
+            <span style="font-size:19px; font-weight:700; color:#f3f4f6; font-family:'JetBrains Mono',monospace;">{{ fullTask.meta.step }}</span>
+            <span style="font-size:11px; font-weight:700; letter-spacing:.5px; padding:3px 10px; border-radius:6px; text-transform:uppercase; color:{{ fullTask.statusColor }}; background:{{ fullTask.statusColor }}1f;">{{ fullTask.meta.status }}</span>
+            <span style="font-size:12px; color:#6b7079; font-family:'JetBrains Mono',monospace;">{{ fullTask.meta.id }}</span>
+            <span style="flex:1;"></span>
+            <sc-if value="{{ fullTask.retryable }}" hint-placeholder-val="{{ false }}">
+              <span onClick="{{ fullTask.onRetry }}" style="font-size:12px; font-weight:700; padding:8px 16px; border-radius:8px; cursor:pointer; color:#0b0c0e; background:#ff7d2e;">↻ Retry</span>
+            </sc-if>
+            <sc-if value="{{ fullTask.running }}" hint-placeholder-val="{{ false }}">
+              <span onClick="{{ fullTask.onCancel }}" style="font-size:12px; font-weight:700; padding:8px 16px; border-radius:8px; cursor:pointer; color:#f15b4a; background:#f15b4a18; border:1px solid #f15b4a55;">■ Cancel</span>
+            </sc-if>
+            <span style="font-size:12px; font-weight:600; padding:8px 16px; border-radius:8px; cursor:pointer; color:#cdd0d6; background:#1a1d22; border:1px solid #2a2e35;">Re-run</span>
+          </div>
+          <sc-if value="{{ fullTask.lineage.hasPipeline }}" hint-placeholder-val="{{ true }}">
+            <div onClick="{{ fullTask.lineage.onRun }}" style="display:flex; align-items:center; gap:8px; padding:11px 22px; background:#0e1622; border-bottom:1px solid #1d2b3d; cursor:pointer;">
+              <span style="font-size:11px; color:#6b7079;">来自</span>
+              <span style="font-size:12px; color:#c2c6cd; font-weight:600;">{{ fullTask.lineage.pipeName }}</span>
+              <span style="color:#3f434b;">›</span>
+              <span style="font-size:12px; color:#4f9dff; font-family:'JetBrains Mono',monospace;">run {{ fullTask.lineage.runId }}</span>
+              <span style="color:#3f434b;">›</span>
+              <span style="font-size:12px; color:#c2c6cd;">{{ fullTask.lineage.step }}</span>
+              <span style="flex:1;"></span>
+              <span style="font-size:11px; color:#4f9dff;">在 Pipeline Record 中查看 ↗</span>
+            </div>
+          </sc-if>
+          <div style="display:flex; min-width:900px;">
+            <div style="flex:1; min-width:0; display:flex; flex-direction:column; border-right:1px solid #1d1f24;">
+              <div style="padding:15px 20px; border-bottom:1px solid #16181c;">
+                <div style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; margin-bottom:8px;">{{ fullTask.cmdLabel }}</div>
+                <div style="background:#070809; border:1px solid #20232a; border-radius:8px; padding:12px 14px; font-size:12px; color:#cdd0d6; font-family:'JetBrains Mono',monospace; line-height:1.6; white-space:pre-wrap; word-break:break-all;">{{ fullTask.cmd }}</div>
+              </div>
+              <div style="display:flex; align-items:center; gap:10px; padding:11px 20px; background:#0d0e11; border-bottom:1px solid #16181c;">
+                <span style="font-size:11px; letter-spacing:1px; color:#9aa0a8; text-transform:uppercase; font-weight:600;">Log</span>
+                <span style="font-size:10px; color:#565b63;">{{ fullTask.allLines }} lines</span>
+                <div style="flex:1; display:flex; align-items:center; gap:8px; background:#070809; border:1px solid #20232a; border-radius:7px; padding:5px 11px; margin-left:8px;">
+                  <span style="color:#565b63; font-size:12px;">⌕</span>
+                  <input value="{{ taskSearch }}" onChange="{{ onSearch }}" placeholder="grep log…" style="flex:1; background:transparent; border:none; outline:none; color:#cdd0d6; font-family:'JetBrains Mono',monospace; font-size:12px;" />
+                  <sc-if value="{{ taskSearch }}" hint-placeholder-val="{{ false }}">
+                    <span onClick="{{ clearSearch }}" style="color:#6b7079; cursor:pointer; font-size:13px;">×</span>
+                  </sc-if>
+                </div>
+                <div onClick="{{ toggleErrors }}" style="{{ errToggleStyle }}">
+                  <span style="width:8px; height:8px; border-radius:2px; background:#f15b4a; display:inline-block;"></span>
+                  <span style="font-size:11px;">errors {{ fullTask.errCount }}</span>
+                </div>
+              </div>
+              <div style="display:flex;">
+                <div style="flex:1; min-width:0; overflow-y:auto; max-height:300px; padding:13px 0; font-size:12.5px; line-height:1.95; background:#070809;">
+                  <sc-for list="{{ fullTask.logLines }}" as="ln" hint-placeholder-count="8">
+                    <div style="display:flex; gap:0; padding:0 20px; background:{{ ln.rowBg }};">
+                      <span style="color:#34373d; user-select:none; width:26px; text-align:right; flex-shrink:0; margin-right:14px;">{{ ln.n }}</span>
+                      <span style="color:{{ ln.color }}; white-space:pre-wrap;">{{ ln.text }}</span>
+                    </div>
+                  </sc-for>
+                </div>
+                <div style="width:13px; flex-shrink:0; background:#0a0b0d; border-left:1px solid #16181c; display:flex; flex-direction:column; gap:2px; padding:8px 3px;">
+                  <sc-for list="{{ fullTask.mini }}" as="mm" hint-placeholder-count="8">
+                    <span style="width:100%; height:5px; border-radius:1px; background:{{ mm.color }};"></span>
+                  </sc-for>
+                </div>
+              </div>
+            </div>
+            <div style="width:280px; flex-shrink:0; background:#0a0b0d; display:flex; flex-direction:column;">
+              <div style="padding:14px 18px; border-bottom:1px solid #16181c;">
+                <div style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; margin-bottom:11px;">Details</div>
+                <sc-for list="{{ fullTask.facts }}" as="f" hint-placeholder-count="8">
+                  <div style="display:flex; align-items:baseline; gap:10px; padding:6px 0; border-bottom:1px solid #131519;">
+                    <span style="font-size:11px; color:#6b7079; width:108px; flex-shrink:0;">{{ f.k }}</span>
+                    <span style="font-size:12px; color:{{ f.color }}; font-family:'JetBrains Mono',monospace; word-break:break-all;">{{ f.v }}</span>
+                  </div>
+                </sc-for>
+              </div>
+              <div style="padding:14px 18px;">
+                <div style="font-size:10px; letter-spacing:1px; color:#565b63; text-transform:uppercase; margin-bottom:11px;">Phases</div>
+                <sc-for list="{{ fullTask.phases }}" as="ph" hint-placeholder-count="4">
+                  <div style="display:flex; align-items:center; gap:10px; padding:5px 0;">
+                    <span style="color:{{ ph.color }}; font-size:12px; width:14px; text-align:center;">{{ ph.glyph }}</span>
+                    <span style="font-size:12px; color:#c2c6cd;">{{ ph.label }}</span>
+                  </div>
+                </sc-for>
+              </div>
+            </div>
+          </div>
+          <div style="display:flex; border-top:1px solid #1d1f24; min-width:900px;">
+            <div style="flex:1; min-width:0; display:flex; flex-direction:column; border-right:1px solid #1d1f24;">
+              <div style="padding:10px 20px; background:#0d0e11; border-bottom:1px solid #16181c; font-size:11px; letter-spacing:1px; color:#9aa0a8; text-transform:uppercase; font-weight:600;">Result</div>
+              <div style="flex:1; overflow:auto; max-height:200px; padding:13px 20px; font-size:11.5px; line-height:1.7; color:#a6abb3; white-space:pre; background:#08090b;">{{ fullTask.result }}</div>
+            </div>
+            <div style="flex:1.2; min-width:0; display:flex; flex-direction:column;">
+              <div style="padding:10px 20px; background:#0d0e11; border-bottom:1px solid #16181c; display:flex; align-items:center; gap:8px;">
+                <span style="font-size:11px; letter-spacing:1px; color:#9aa0a8; text-transform:uppercase; font-weight:600;">Git Diff</span>
+              </div>
+              <div style="flex:1; overflow:auto; max-height:200px; padding:8px 0; font-size:11px; line-height:1.7; background:#08090b;">
+                <sc-for list="{{ fullTask.diff }}" as="d" hint-placeholder-count="6">
+                  <div style="padding:0 20px; background:{{ d.bg }}; color:{{ d.color }}; white-space:pre;">{{ d.text }}</div>
+                </sc-for>
+              </div>
+            </div>
+          </div>
+        </div>
+      </sc-if>
+            <sc-if value="{{ showT1 }}" hint-placeholder-val="{{ false }}">
+        <div style="font-family:'Inter',sans-serif; margin-bottom:16px;">
+          <div style="display:flex; align-items:center; gap:9px; margin-bottom:4px;"><span style="font-size:18px; font-weight:700; color:#f3f4f6;">T1 · 三栏同屏</span><span style="font-size:10px; font-weight:700; letter-spacing:.5px; padding:2px 7px; border-radius:5px; color:#4f9dff; background:#4f9dff22;">保守</span></div>
+          <div style="font-size:13px; color:#8b9098; line-height:1.6;">把 Log / Result / Git&nbsp;Diff 三个 tab 拆成<b style="color:#cdd0d6;">同屏并列的三块</b> —— 不用再来回点。顶部加一条面包屑，<b style="color:#cdd0d6;">一键跳回它所属的 pipeline 步骤</b>。</div>
+        </div>
+        <div style="background:#0b0c0e; border:1px solid #20232a; border-radius:12px; overflow:hidden;">
+          <div style="display:flex; gap:24px; align-items:center; padding:0 18px; background:#0d0e11; border-bottom:1px solid #1d1f24; font-size:13px;">
+            <span style="padding:13px 2px; color:#6b7079;">Schedules</span>
+            <span style="padding:13px 2px; color:#6b7079;">Pipelines</span>
+            <span style="padding:13px 2px; color:#f3f4f6; border-bottom:2px solid #4f9dff; font-weight:600;">Tasks</span>
+            <span style="flex:1;"></span>
+            <span style="font-size:11px; color:#6b7079;">0 running · 0 queued · 1118 done</span>
+          </div>
+          <div style="display:flex; min-height:560px; min-width:900px;">
+            <div style="width:300px; flex-shrink:0; border-right:1px solid #1d1f24; display:flex; flex-direction:column;">
+              <div style="padding:11px 14px; border-bottom:1px solid #1d1f24; display:flex; gap:7px;">
+                <span style="font-size:11px; padding:4px 9px; border-radius:6px; background:#4f9dff1f; color:#4f9dff; font-weight:600;">all 1227</span>
+                <span style="font-size:11px; padding:4px 9px; color:#6b7079;">failed 97</span>
+              </div>
+              <div style="overflow-y:auto; flex:1;">
+                <sc-for list="{{ tasks }}" as="t" hint-placeholder-count="8">
+                  <button onClick="{{ t.onSelect }}" style="{{ t.rowStyle }}">
+                    <div style="display:flex; align-items:center; gap:8px; margin-bottom:5px;">
+                      <span style="font-size:12px; font-weight:700; color:{{ t.provColor }};">{{ t.prov }}</span>
+                      <span style="flex:1;"></span>
+                      <span style="font-size:11px; font-weight:600; color:{{ t.statusColor }};">{{ t.status }}</span>
+                    </div>
+                    <div style="font-size:11px; color:#8b9098; line-height:1.45; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;">{{ t.snip }}</div>
+                    <div style="font-size:10px; color:#565b63; margin-top:5px;">{{ t.ago }} {{ t.cost }}</div>
+                  </button>
+                </sc-for>
+              </div>
+            </div>
+            <div style="flex:1; min-width:0; display:flex; flex-direction:column;">
+              <div style="padding:14px 20px; border-bottom:1px solid #1d1f24;">
+                <div style="display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap;">
+                  <span style="font-size:10.5px; font-weight:700; letter-spacing:.5px; padding:3px 9px; border-radius:6px; text-transform:uppercase; color:{{ selTask.statusColor }}; background:{{ selTask.statusColor }}1f;">{{ selTask.status }}</span>
+                  <span style="font-size:14px; font-weight:700; color:#f3f4f6;">{{ selTask.prov }}</span>
+                  <span style="font-size:12px; color:#6b7079;">{{ selTask.id }}</span>
+                  <span style="flex:1;"></span>
+                  <span style="font-size:11.5px; color:#0b0c0e; background:#ff7d2e; padding:5px 13px; border-radius:7px; cursor:pointer; font-weight:600;">Re-run</span>
+                </div>
+                <div onClick="{{ gotoPipeline }}" style="display:inline-flex; align-items:center; gap:7px; font-size:11.5px; color:#4f9dff; cursor:pointer; padding:5px 10px; border:1px solid #1f3550; background:#0e1622; border-radius:7px;">
+                  <span style="color:#6b7079;">from</span> pipeline 25b1fc48 <span style="color:#3f434b;">›</span> apply-fix <span>↗</span>
+                </div>
+              </div>
+              <div style="flex:1; display:flex; min-height:0;">
+                <div style="flex:1.5; min-width:0; display:flex; flex-direction:column; border-right:1px solid #1d1f24;">
+                  <div style="padding:9px 16px; background:#0d0e11; border-bottom:1px solid #1d1f24; display:flex; align-items:center; gap:8px;">
+                    <span style="font-size:11px; letter-spacing:1px; color:#9aa0a8; text-transform:uppercase; font-weight:600;">Log</span>
+                    <span style="font-size:10px; color:#565b63;">{{ selTask.allLines }} lines</span>
+                  </div>
+                  <div style="flex:1; overflow-y:auto; padding:12px 16px; font-size:12px; line-height:1.85; background:#08090b;">
+                    <sc-for list="{{ selTask.logLines }}" as="ln" hint-placeholder-count="8">
+                      <div style="display:flex; gap:12px;">
+                        <span style="color:#3f434b; user-select:none; width:18px; text-align:right; flex-shrink:0;">{{ ln.n }}</span>
+                        <span style="color:{{ ln.color }}; white-space:pre-wrap;">{{ ln.text }}</span>
+                      </div>
+                    </sc-for>
+                  </div>
+                </div>
+                <div style="width:380px; flex-shrink:0; display:flex; flex-direction:column;">
+                  <div style="flex:1; display:flex; flex-direction:column; border-bottom:1px solid #1d1f24; min-height:0;">
+                    <div style="padding:9px 16px; background:#0d0e11; border-bottom:1px solid #1d1f24; font-size:11px; letter-spacing:1px; color:#9aa0a8; text-transform:uppercase; font-weight:600;">Result</div>
+                    <div style="flex:1; overflow-y:auto; padding:12px 16px; font-size:11.5px; line-height:1.7; color:#a6abb3; white-space:pre; background:#0a0b0d;">{{ selTask.result }}</div>
+                  </div>
+                  <div style="flex:1.3; display:flex; flex-direction:column; min-height:0;">
+                    <div style="padding:9px 16px; background:#0d0e11; border-bottom:1px solid #1d1f24; font-size:11px; letter-spacing:1px; color:#9aa0a8; text-transform:uppercase; font-weight:600;">Git Diff</div>
+                    <div style="flex:1; overflow:auto; padding:8px 0; font-size:11px; line-height:1.7; background:#0a0b0d;">
+                      <sc-for list="{{ selTask.diff }}" as="d" hint-placeholder-count="10">
+                        <div style="padding:0 16px; background:{{ d.bg }}; color:{{ d.color }}; white-space:pre;">{{ d.text }}</div>
+                      </sc-for>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </sc-if>
+      <sc-if value="{{ showT2 }}" hint-placeholder-val="{{ false }}">
+        <div style="font-family:'Inter',sans-serif; margin-bottom:16px;">
+          <div style="display:flex; align-items:center; gap:9px; margin-bottom:4px;"><span style="font-size:18px; font-weight:700; color:#f3f4f6;">T2 · 日志为主 + 搜索</span><span style="font-size:10px; font-weight:700; letter-spacing:.5px; padding:2px 7px; border-radius:5px; color:#46c25a; background:#46c25a22;">平衡</span></div>
+          <div style="font-size:13px; color:#8b9098; line-height:1.6;">日志是主角：占满主区，带<b style="color:#cdd0d6;">搜索框、只看错误、错误高亮</b>。Result 与 Git&nbsp;Diff 收进右侧<b style="color:#cdd0d6;">可折叠的停靠面板</b>，需要时点开，不打断读日志。</div>
+        </div>
+        <div style="background:#0b0c0e; border:1px solid #20232a; border-radius:12px; overflow:hidden;">
+          <div style="display:flex; gap:22px; align-items:center; padding:0 18px; background:#0d0e11; border-bottom:1px solid #1d1f24;">
+            <sc-for list="{{ topNav }}" as="tb" hint-placeholder-count="4">
+              <div onClick="{{ tb.onClick }}" style="{{ tb.style }}">{{ tb.label }}</div>
+            </sc-for>
+          </div>
+          <div style="display:flex; min-height:560px; min-width:900px;">
+            <div style="width:250px; flex-shrink:0; border-right:1px solid #1d1f24; overflow-y:auto;">
+              <sc-for list="{{ tasks }}" as="t" hint-placeholder-count="8">
+                <button onClick="{{ t.onSelect }}" style="{{ t.rowStyle }}">
+                  <div style="display:flex; align-items:center; gap:8px; margin-bottom:4px;">
+                    <span style="font-size:11.5px; font-weight:700; color:{{ t.provColor }};">{{ t.prov }}</span>
+                    <span style="flex:1;"></span>
+                    <span style="font-size:10.5px; font-weight:600; color:{{ t.statusColor }};">{{ t.status }}</span>
+                  </div>
+                  <div style="font-size:10.5px; color:#7d828b; line-height:1.4; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;">{{ t.snip }}</div>
+                </button>
+              </sc-for>
+            </div>
+            <div style="flex:1; min-width:0; display:flex; flex-direction:column;">
+              <div style="padding:13px 18px; border-bottom:1px solid #1d1f24; display:flex; align-items:center; gap:12px; flex-wrap:wrap;">
+                <span style="font-size:10.5px; font-weight:700; letter-spacing:.5px; padding:3px 9px; border-radius:6px; text-transform:uppercase; color:{{ selTask.statusColor }}; background:{{ selTask.statusColor }}1f;">{{ selTask.status }}</span>
+                <span style="font-size:14px; font-weight:700; color:#f3f4f6;">{{ selTask.prov }} · apply-fix</span>
+                <span onClick="{{ gotoPipeline }}" style="font-size:11px; color:#4f9dff; cursor:pointer;">↗ pipeline 25b1fc48</span>
+              </div>
+              <div style="flex:1; display:flex; min-height:0;">
+                <div style="flex:1; min-width:0; display:flex; flex-direction:column; border-right:1px solid #1d1f24;">
+                  <div style="padding:10px 16px; background:#0d0e11; border-bottom:1px solid #1d1f24; display:flex; align-items:center; gap:10px;">
+                    <div style="flex:1; display:flex; align-items:center; gap:8px; background:#08090b; border:1px solid #24262b; border-radius:7px; padding:6px 11px;">
+                      <span style="color:#565b63; font-size:12px;">⌕</span>
+                      <input value="{{ taskSearch }}" onChange="{{ onSearch }}" placeholder="搜索日志…" style="flex:1; background:transparent; border:none; outline:none; color:#cdd0d6; font-family:'JetBrains Mono',monospace; font-size:12px;" />
+                      <sc-if value="{{ taskSearch }}" hint-placeholder-val="{{ false }}">
+                        <span onClick="{{ clearSearch }}" style="color:#6b7079; cursor:pointer; font-size:13px;">×</span>
+                      </sc-if>
+                    </div>
+                    <div onClick="{{ toggleErrors }}" style="{{ errToggleStyle }}">
+                      <span style="width:8px; height:8px; border-radius:2px; background:#f15b4a; display:inline-block;"></span>
+                      <span style="font-size:11px;">errors {{ selTask.errCount }}</span>
+                    </div>
+                  </div>
+                  <div style="flex:1; overflow-y:auto; padding:12px 0; font-size:12.5px; line-height:1.9; background:#08090b;">
+                    <sc-for list="{{ selTask.logLines }}" as="ln" hint-placeholder-count="8">
+                      <div style="display:flex; gap:0; padding:0 16px; background:{{ ln.rowBg }};">
+                        <span style="width:3px; flex-shrink:0; margin-right:11px; border-radius:2px; background:{{ ln.gutter }};"></span>
+                        <span style="color:#3f434b; user-select:none; width:20px; text-align:right; flex-shrink:0; margin-right:12px;">{{ ln.n }}</span>
+                        <span style="color:{{ ln.color }}; white-space:pre-wrap;">{{ ln.text }}</span>
+                      </div>
+                    </sc-for>
+                  </div>
+                </div>
+                <div style="width:300px; flex-shrink:0; display:flex; flex-direction:column; background:#0a0b0d;">
+                  <div style="border-bottom:1px solid #1d1f24;">
+                    <div onClick="{{ toggleResult }}" style="padding:11px 16px; display:flex; align-items:center; gap:9px; cursor:pointer;">
+                      <span style="font-size:11px; color:#565b63; width:10px;">{{ resultChev }}</span>
+                      <span style="font-size:11px; letter-spacing:1px; color:#9aa0a8; text-transform:uppercase; font-weight:600;">Result</span>
+                    </div>
+                    <sc-if value="{{ showResult }}" hint-placeholder-val="{{ true }}">
+                      <div style="padding:0 16px 14px 35px; font-size:11px; line-height:1.7; color:#a6abb3; white-space:pre;">{{ selTask.result }}</div>
+                    </sc-if>
+                  </div>
+                  <div>
+                    <div onClick="{{ toggleDiff }}" style="padding:11px 16px; display:flex; align-items:center; gap:9px; cursor:pointer;">
+                      <span style="font-size:11px; color:#565b63; width:10px;">{{ diffChev }}</span>
+                      <span style="font-size:11px; letter-spacing:1px; color:#9aa0a8; text-transform:uppercase; font-weight:600;">Git Diff</span>
+                      <span style="flex:1;"></span>
+                      <span style="font-size:10px; color:#46c25a;">+6</span>
+                      <span style="font-size:10px; color:#f15b4a;">-1</span>
+                    </div>
+                    <sc-if value="{{ showDiff }}" hint-placeholder-val="{{ true }}">
+                      <div style="padding:4px 0 12px; font-size:10.5px; line-height:1.65; overflow-x:auto;">
+                        <sc-for list="{{ selTask.diff }}" as="d" hint-placeholder-count="10">
+                          <div style="padding:0 16px; background:{{ d.bg }}; color:{{ d.color }}; white-space:pre;">{{ d.text }}</div>
+                        </sc-for>
+                      </div>
+                    </sc-if>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </sc-if>
+      <sc-if value="{{ showT3 }}" hint-placeholder-val="{{ false }}">
+        <div style="font-family:'Inter',sans-serif; margin-bottom:16px;">
+          <div style="display:flex; align-items:center; gap:9px; margin-bottom:4px;"><span style="font-size:18px; font-weight:700; color:#f3f4f6;">T3 · 终端驾驶舱</span><span style="font-size:10px; font-weight:700; letter-spacing:.5px; padding:2px 7px; border-radius:5px; color:#ff7d2e; background:#ff7d2e22;">大胆</span></div>
+          <div style="font-size:13px; color:#8b9098; line-height:1.6;">把单个 task 变成一个<b style="color:#cdd0d6;">工作台</b>：中间是带搜索、严重度过滤、实时跟随的终端，右缘有<b style="color:#cdd0d6;">错误小地图</b>快速定位；下方 Result 与 Diff 永远并排可见。一屏掌控全部。</div>
+        </div>
+        <div style="background:#070809; border:1px solid #20232a; border-radius:12px; overflow:hidden;">
+          <div style="display:flex; gap:22px; align-items:center; padding:0 18px; background:#0d0e11; border-bottom:1px solid #1d1f24;">
+            <sc-for list="{{ topNav }}" as="tb" hint-placeholder-count="4">
+              <div onClick="{{ tb.onClick }}" style="{{ tb.style }}">{{ tb.label }}</div>
+            </sc-for>
+          </div>
+          <div style="display:flex; min-height:580px; min-width:920px;">
+            <div style="width:220px; flex-shrink:0; border-right:1px solid #16181c; overflow-y:auto; background:#0a0b0d;">
+              <sc-for list="{{ tasks }}" as="t" hint-placeholder-count="8">
+                <button onClick="{{ t.onSelect }}" style="{{ t.rowStyle }}">
+                  <div style="display:flex; align-items:center; gap:7px;">
+                    <span style="width:6px; height:6px; border-radius:50%; flex-shrink:0; background:{{ t.statusColor }};"></span>
+                    <span style="font-size:11px; font-weight:600; color:{{ t.provColor }};">{{ t.prov }}</span>
+                    <span style="flex:1;"></span>
+                    <span style="font-size:9.5px; color:{{ t.statusColor }};">{{ t.status }}</span>
+                  </div>
+                  <div style="font-size:10px; color:#6b7079; line-height:1.4; margin-top:4px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;">{{ t.snip }}</div>
+                </button>
+              </sc-for>
+            </div>
+            <div style="flex:1; min-width:0; display:flex; flex-direction:column;">
+              <div style="display:flex; align-items:center; gap:10px; padding:10px 16px; background:#0d0e11; border-bottom:1px solid #16181c;">
+                <span style="width:9px; height:9px; border-radius:50%; background:#46c25a; animation:blink 1.6s infinite;"></span>
+                <span style="font-size:12px; color:#9aa0a8;">task://{{ selTask.id }}</span>
+                <span style="color:#3f434b;">·</span>
+                <span style="font-size:12px; font-weight:700; color:#f3f4f6;">apply-fix</span>
+                <span style="font-size:10.5px; font-weight:700; letter-spacing:.5px; padding:2px 8px; border-radius:5px; text-transform:uppercase; color:{{ selTask.statusColor }}; background:{{ selTask.statusColor }}1f;">{{ selTask.status }}</span>
+                <span style="flex:1;"></span>
+                <span onClick="{{ gotoPipeline }}" style="font-size:11px; color:#4f9dff; cursor:pointer;">↗ 25b1fc48 › apply-fix</span>
+              </div>
+              <div style="display:flex; align-items:center; gap:10px; padding:9px 16px; background:#0a0b0d; border-bottom:1px solid #16181c;">
+                <div style="flex:1; display:flex; align-items:center; gap:8px; background:#070809; border:1px solid #20232a; border-radius:7px; padding:6px 11px;">
+                  <span style="color:#565b63; font-size:12px;">⌕</span>
+                  <input value="{{ taskSearch }}" onChange="{{ onSearch }}" placeholder="grep log…" style="flex:1; background:transparent; border:none; outline:none; color:#cdd0d6; font-family:'JetBrains Mono',monospace; font-size:12px;" />
+                  <sc-if value="{{ taskSearch }}" hint-placeholder-val="{{ false }}">
+                    <span onClick="{{ clearSearch }}" style="color:#6b7079; cursor:pointer; font-size:13px;">×</span>
+                  </sc-if>
+                </div>
+                <div onClick="{{ toggleErrors }}" style="{{ errToggleStyle }}">
+                  <span style="width:8px; height:8px; border-radius:2px; background:#f15b4a; display:inline-block;"></span>
+                  <span style="font-size:11px;">errors {{ selTask.errCount }}</span>
+                </div>
+                <div style="display:flex; align-items:center; gap:6px; padding:6px 11px; border-radius:7px; border:1px solid #1f4030; background:#0e1a12; color:#46c25a;">
+                  <span style="font-size:11px;">⟳ tail</span>
+                </div>
+              </div>
+              <div style="flex:1; display:flex; min-height:0;">
+                <div style="flex:1; overflow-y:auto; padding:14px 0; font-size:12.5px; line-height:1.95; background:#070809;">
+                  <sc-for list="{{ selTask.logLines }}" as="ln" hint-placeholder-count="10">
+                    <div style="display:flex; gap:0; padding:0 16px; background:{{ ln.rowBg }};">
+                      <span style="color:#34373d; user-select:none; width:24px; text-align:right; flex-shrink:0; margin-right:14px;">{{ ln.n }}</span>
+                      <span style="color:{{ ln.color }}; white-space:pre-wrap;">{{ ln.text }}</span>
+                    </div>
+                  </sc-for>
+                </div>
+                <div style="width:14px; flex-shrink:0; background:#0a0b0d; border-left:1px solid #16181c; display:flex; flex-direction:column; gap:2px; padding:8px 3px;">
+                  <sc-for list="{{ selTask.mini }}" as="mm" hint-placeholder-count="10">
+                    <span style="width:100%; height:5px; border-radius:1px; background:{{ mm.color }};"></span>
+                  </sc-for>
+                </div>
+              </div>
+              <div style="display:flex; border-top:1px solid #16181c; height:190px; flex-shrink:0;">
+                <div style="flex:1; min-width:0; display:flex; flex-direction:column; border-right:1px solid #16181c;">
+                  <div style="padding:8px 16px; background:#0d0e11; border-bottom:1px solid #16181c; font-size:11px; letter-spacing:1px; color:#9aa0a8; text-transform:uppercase; font-weight:600;">Result</div>
+                  <div style="flex:1; overflow:auto; padding:11px 16px; font-size:11px; line-height:1.7; color:#a6abb3; white-space:pre; background:#08090b;">{{ selTask.result }}</div>
+                </div>
+                <div style="flex:1.2; min-width:0; display:flex; flex-direction:column;">
+                  <div style="padding:8px 16px; background:#0d0e11; border-bottom:1px solid #16181c; display:flex; align-items:center; gap:8px;">
+                    <span style="font-size:11px; letter-spacing:1px; color:#9aa0a8; text-transform:uppercase; font-weight:600;">Git Diff</span>
+                    <span style="flex:1;"></span>
+                    <span style="font-size:10px; color:#46c25a;">+6</span>
+                    <span style="font-size:10px; color:#f15b4a;">-1</span>
+                  </div>
+                  <div style="flex:1; overflow:auto; padding:7px 0; font-size:10.5px; line-height:1.7; background:#08090b;">
+                    <sc-for list="{{ selTask.diff }}" as="d" hint-placeholder-count="10">
+                      <div style="padding:0 16px; background:{{ d.bg }}; color:{{ d.color }}; white-space:pre;">{{ d.text }}</div>
+                    </sc-for>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </sc-if>
+    </main>
+  </div>
+</div>
+</x-dc>
+<script type="text/x-dc" data-dc-script>
+class Component extends DCLogic {
+  state = {
+    active: 'intro',
+    selRunId: '25b1fc48',
+    openSteps: { 'apply-fix': true },
+    p2Open: 'apply-fix',
+    selTaskId: 't_applyfix',
+    taskSearch: '',
+    errorsOnly: false,
+    p3Filter: 'fail',
+    p3Open: '25b1fc48',
+    selType: 'bugfix',
+    pFocus: null,
+    failedRunsOnly: false,
+    v2Run: '25b1fc48',
+    v2Step: 'apply-fix',
+    recStatus: 'all',
+    recPipe: 'all',
+    recTime: '7d',
+    recTrigger: 'all',
+    recSearch: '',
+    recGroup: 'timeline',
+    expandedRun: '25b1fc48',
+    runFocus: {},
+    expandedGroups: { bugfix: true },
+    mgmtEdit: false,
+    extraRuns: [], cancelledRuns: {}, retrySeq: 0,
+    cancelledTasks: {},
+    expandedTask: 't_applyfix',
+    trStatus: 'all', trProvider: 'all', trPipe: 'all', trTime: '7d', trSearch: '', trCost: false,
+    taskCreateOpen: false,
+    createForm: { provider: 'FortiNAC', mode: 'shell', cmd: '' },
+    createdTasks: [],
+    createSeq: 0,
+    t1Run: true, t1Result: true, t1Diff: true,
+  };
+  K = {
+    ok: '#46c25a', fail: '#f15b4a', run: '#4f9dff', skip: '#33363d', pend: '#26282e',
+    orange: '#ff7d2e', blue: '#4f9dff', green: '#46c25a', red: '#f15b4a', purple: '#a978f0', yellow: '#d8a23f',
+    bg: '#08090b', panel: '#0f1013', card: '#15171b', border: '#22252b', line: '#1d1f24',
+    text: '#cdd0d6', dim: '#7d828b', faint: '#565b63',
+  };
+  STEPS = [
+    ['discover-ids', 'shell'], ['resolve', 'shell'], ['worktree-setup', 'shell'],
+    ['fetch-bug-details', 'shell'], ['triage', 'default'], ['attach-files', 'shell'],
+    ['plan-fix', 'default'], ['apply-fix', 'shell'], ['run-tests', 'shell'],
+    ['open-mr', 'shell'], ['notify-teams', 'shell'],
+  ];
+  DUR = ['2.1s','1.3s','3.4s','5.2s','18.7s','4.0s','22.1s','6.8s','7.5s','2.2s','1.1s'];
+  STAGES = [[0],[1],[2,3],[4],[5],[6],[7],[8],[9],[10]];
+  PIPE_TYPES = [
+    ['bugfix','mantis-bug-fix-batch',142,23,'fail'],
+    ['triage','inbound-issue-triage',310,18,'fail'],
+    ['canary','release-canary-deploy',61,9,'run'],
+    ['regress','nightly-regression-suite',88,4,'ok'],
+    ['depbump','dependency-bump-automation',209,12,'ok'],
+    ['docs','docs-site-sync',47,1,'ok'],
+  ];
+  // status patterns (length 11)
+  P_OK    = Array(11).fill('ok');
+  P_APPLY = ['ok','ok','ok','ok','ok','ok','ok','fail','skip','skip','skip'];
+  P_EARLY = ['fail','skip','skip','skip','skip','skip','skip','skip','skip','skip','skip'];
+  P_MID   = ['ok','ok','ok','ok','ok','fail','skip','skip','skip','skip','skip'];
+  P_RUN   = ['ok','ok','ok','ok','run','pend','pend','pend','pend','pend','pend'];
+  RUNS = [
+    ['a4f9c2e1','run','now','—','P_RUN'],
+    ['99634dc5','ok','Jun 11, 11:20 PM','1m 48s','P_OK'],
+    ['cdedb454','ok','Jun 11, 11:13 PM','1m 52s','P_OK'],
+    ['25b1fc48','fail','Jun 11, 07:50 PM','58s','P_APPLY'],
+    ['7026c661','fail','Jun 11, 06:45 PM','12s','P_EARLY'],
+    ['850747c9','ok','Jun 11, 05:46 PM','1m 40s','P_OK'],
+    ['f6c9ff4a','fail','Jun 11, 05:45 PM','9s','P_EARLY'],
+    ['e962b5b5','fail','Jun 10, 11:41 PM','1m 12s','P_MID'],
+    ['41ea10b7','fail','Jun 10, 11:36 PM','11s','P_EARLY'],
+    ['05a738af','fail','Jun 10, 11:33 PM','10s','P_EARLY'],
+    ['69ac564c','ok','Jun 10, 10:33 PM','1m 39s','P_OK'],
+    ['8bf7b81b','ok','Jun 10, 09:43 PM','1m 45s','P_OK'],
+    ['0399a270','ok','Jun 10, 09:32 PM','1m 50s','P_OK'],
+    ['5c805acf','fail','Jun 10, 08:32 PM','13s','P_EARLY'],
+    ['c37431ae','ok','Jun 10, 02:17 PM','1m 41s','P_OK'],
+  ];
+  LOGS = {
+    'discover-ids': ['+ for_each.source consumes outputs.bug_ids as CSV','→ discovered 1 bug: 1296959','✓ wrote outputs.bug_ids'],
+    'resolve': ['+ cd "$(git rev-parse --show-toplevel)"','+ command -v glab','glab 1.42.0 ok','✓ resolved repo: fortinet/fortinac'],
+    'worktree-setup': ['+ git worktree add .wt/1296959','Preparing worktree (new branch fix/1296959)','✓ worktree ready'],
+    'fetch-bug-details': ['→ GET mantis/1296959','Pulled summary, description, 4 notes, 1 attachment','✓ context cached (8.2 KB)'],
+    'triage': ['You are triaging a Mantis bug to decide if Forge should attempt an auto-fix.','→ decision: ATTEMPT_FIX (confidence 0.81)','✓ triage report written  ·  $0.203'],
+    'attach-files': ['Found 1 attachment(s) on bug 1296959','→ MD5_detail.png (122093 bytes)','✓ ATTACH_COUNT=1 ATTACH_DIR=.wt/.attachments'],
+    'plan-fix': ['Analyzing 3 candidate files…','→ plan: patch networkConfig.js loadConfig() empty-guard','✓ plan written  ·  $0.340'],
+    'apply-fix': ['+ git apply --check /tmp/fix-1296959.patch','error: patch failed: src/campusMgr/bin/networkConfig.js:142','error: src/campusMgr/bin/networkConfig.js: patch does not apply','hint: 3 hunks FAILED to apply cleanly','Retrying with 3-way merge…','error: applying 3-way merge failed: conflicting changes','✖ apply-fix exited with code 1'],
+    'run-tests': ['— skipped: upstream step apply-fix failed'],
+    'open-mr': ['— skipped: upstream step apply-fix failed'],
+    'notify-teams': ['— skipped: upstream step apply-fix failed'],
+  };
+  TASKS = [
+    ['t_applyfix','FortiNAC','failed','apply-fix · git apply /tmp/fix-1296959.patch','7m ago','','25b1fc48'],
+    ['c2179ec2','FortiNAC','done','# Download all Attached Files from the Mantis bug into the worktree','5m ago','','25b1fc48'],
+    ['t_triage','FortiNAC','done','You are triaging a Mantis bug to decide if Forge should auto-fix','5m ago','$0.203','25b1fc48'],
+    ['t_plan','FortiNAC','done','# Plan the fix — patch networkConfig.js loadConfig empty-guard','6m ago','$0.340','25b1fc48'],
+    ['t_resolve','FortiNAC','done','set -e cd "$(git rev-parse --show-toplevel)" && command -v glab','7m ago','','25b1fc48'],
+    ['t_scratch1','scratch','failed','set -e cd "$(git rev-parse --show-toplevel)" && ./run.sh','7m ago','',''],
+    ['t_fetch','FortiNAC','done','# Pull the FULL mantis bug — summary, description, notes','15m ago','','25b1fc48'],
+    ['t_scratch2','scratch','failed','set -e cd "$(git rev-parse --show-toplevel)" && pytest -q','17m ago','',''],
+  ];
+  TASK_LOG = {
+    't_applyfix': [
+      '$ cd "$(git rev-parse --show-toplevel)"',
+      '$ git fetch origin && git checkout -b fix/mantis-1296959',
+      "Switched to a new branch 'fix/mantis-1296959'",
+      '$ git apply --check /tmp/fix-1296959.patch',
+      'error: patch failed: src/campusMgr/bin/networkConfig.js:142',
+      'error: src/campusMgr/bin/networkConfig.js: patch does not apply',
+      'hint: 3 hunks FAILED to apply cleanly',
+      'Retrying with 3-way merge…',
+      'error: applying 3-way merge failed: conflicting changes',
+      '✖ apply-fix exited with code 1',
+    ],
+    'c2179ec2': [
+      '$ download_attachments --bug 1296959',
+      'Found 1 attachment(s) on bug 1296959',
+      '→ MD5_detail.png (122093 bytes)',
+      'ATTACH_COUNT=0 ATTACH_SKIPPED=0 ATTACH_DIR=SKIP/.attachments',
+      '✓ done in 3.1s',
+    ],
+  };
+  TASK_RESULT = {
+    't_applyfix': '{\n  "status": "failed",\n  "bug_id": "1296959",\n  "branch": "fix/mantis-1296959",\n  "patch": "/tmp/fix-1296959.patch",\n  "hunks_failed": 3,\n  "exit_code": 1\n}',
+    'c2179ec2': '{\n  "status": "done",\n  "bug_id": "1296959",\n  "attach_count": 1,\n  "attach_dir": ".wt/.attachments",\n  "bytes": 122093\n}',
+  };
+  TASK_DIFF = {
+    't_applyfix': [
+      ['diff --git a/src/campusMgr/bin/networkConfig.js b/src/campusMgr/bin/networkConfig.js','meta'],
+      ['@@ -139,7 +139,11 @@ function loadConfig(path) {','hunk'],
+      ['   function loadConfig(path) {','ctx'],
+      ['-    const cfg = readFileSync(path, "utf8");','del'],
+      ['+    const raw = readFileSync(path, "utf8");','add'],
+      ['+    if (!raw.trim()) {','add'],
+      ['+      throw new ConfigError("empty networkConfig at " + path);','add'],
+      ['+    }','add'],
+      ['+    const cfg = raw;','add'],
+      ['     return JSON.parse(cfg);','ctx'],
+      ['   }','ctx'],
+    ],
+    'c2179ec2': [['— no changes (read-only step)','ctx']],
+  };
+  // ---------- helpers ----------
+  statusMeta(s) {
+    const K = this.K;
+    if (s === 'ok')   return { color: K.ok,   glyph: '✓', bar: K.ok,   label: 'passed' };
+    if (s === 'fail') return { color: K.fail, glyph: '✕', bar: K.fail, label: 'failed' };
+    if (s === 'run')  return { color: K.run,  glyph: '◐', bar: K.run,  label: 'running' };
+    if (s === 'skip') return { color: '#5a5f67', glyph: '–', bar: K.skip, label: 'skipped' };
+    return { color: '#4a4e56', glyph: '·', bar: K.pend, label: 'pending' };
+  }
+  pat(name) { return this[name] || this.P_OK; }
+  taskStatusColor(s) { return s === 'done' ? this.K.blue : s === 'failed' ? this.K.red : s === 'running' ? this.K.run : this.K.dim; }
+  set(patch) { this.setState(patch); }
+  // ---------- nav ----------
+  navItem(id, label, icon, tag, desc) {
+    const K = this.K, active = this.state.active === id;
+    const tagColor = tag === '保守' ? K.blue : tag === '平衡' ? K.green : K.orange;
+    const base = 'padding:11px 12px; border-radius:9px; cursor:pointer; margin-bottom:6px; transition:background .12s; border:1px solid ' + (active ? '#2f333b' : 'transparent') + '; background:' + (active ? '#16181c' : 'transparent') + ';';
+    return {
+      onSelect: () => this.set({ active: id }),
+      style: base,
+      icon, label, tag, desc,
+      titleColor: active ? '#f3f4f6' : '#c2c6cd',
+      tagStyle: tag ? ('font-size:9.5px; font-weight:700; letter-spacing:.5px; padding:2px 6px; border-radius:5px; color:' + tagColor + '; background:' + tagColor + '22;') : 'display:none;',
+    };
+  }
+  // ---------- pipeline view models ----------
+  runsVM() {
+    const K = this.K, sel = this.state.selRunId;
+    return this.RUNS.map(([id, status, ago, dur, patName]) => {
+      const pat = this.pat(patName);
+      const m = this.statusMeta(status);
+      const segments = pat.map(s => ({ bg: this.statusMeta(s).bar }));
+      const ok = pat.filter(s => s === 'ok').length;
+      const att = pat.filter(s => s === 'ok' || s === 'fail').length;
+      const isSel = id === sel;
+      return {
+        id, ago, dur, status,
+        dotColor: m.color,
+        running: status === 'run',
+        pass: status === 'run' ? (ok + '/…') : (ok + '/' + att),
+        passColor: status === 'fail' ? K.red : status === 'run' ? K.run : K.dim,
+        segments,
+        onSelect: () => this.set({ selRunId: id, pFocus: null }),
+        rowStyle: 'display:block; width:100%; text-align:left; padding:9px 11px; border:none; border-left:2px solid ' + (isSel ? m.color : 'transparent') + '; background:' + (isSel ? '#15171b' : 'transparent') + '; cursor:pointer; border-bottom:1px solid #15171a;',
+        chipStyle: 'display:flex; align-items:center; gap:7px; padding:6px 11px; border-radius:7px; cursor:pointer; white-space:nowrap; flex-shrink:0; border:1px solid ' + (isSel ? m.color + '88' : '#22252b') + '; background:' + (isSel ? m.color + '16' : 'transparent') + ';',
+      };
+    });
+  }
+  detailVM() {
+    const K = this.K;
+    const row = this.RUNS.find(r => r[0] === this.state.selRunId) || this.RUNS[3];
+    const [id, status, ago, dur] = row;
+    const pat = this.pat(row[4]);
+    const m = this.statusMeta(status);
+    const steps = this.STEPS.map(([name, kind], i) => {
+      const s = pat[i], sm = this.statusMeta(s);
+      const open = !!this.state.openSteps[name];
+      const kindColor = kind === 'default' ? K.purple : K.yellow;
+      return {
+        name, kind, kindColor, dur: (s === 'skip' || s === 'pend') ? '—' : this.DUR[i],
+        glyph: sm.glyph, color: sm.color, isFailed: s === 'fail', isRunning: s === 'run',
+        open, chev: open ? '▾' : '▸',
+        rowStyle: 'display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:10px 13px; border:none; background:' + (s === 'fail' ? '#1a1315' : 'transparent') + '; border-bottom:1px solid #16181c; cursor:pointer;',
+        log: (this.LOGS[name] || ['(no output)']).map(t => ({ text: t, color: /error|✖|FAILED/.test(t) ? K.red : t.startsWith('✓') ? K.green : t.startsWith('→') ? K.blue : '#9aa0a8' })),
+        onToggle: () => this.set({ openSteps: { ...this.state.openSteps, [name]: !open } }),
+      };
+    });
+    const okN = pat.filter(s => s === 'ok').length;
+    const failN = pat.filter(s => s === 'fail').length;
+    const skipN = pat.filter(s => s === 'skip').length;
+    const fs = steps.find(s => s.isFailed) || null;
+    return {
+      id, status, ago, dur, statusColor: m.color, statusLabel: m.label,
+      summary: okN + ' passed · ' + failN + ' failed · ' + skipN + ' skipped',
+      segments: pat.map(s => ({ bg: this.statusMeta(s).bar })),
+      steps, failedStep: fs,
+      taskId: row[4] === 'P_APPLY' ? 't_applyfix' : null,
+    };
+  }
+  // ---------- task view models ----------
+  tasksVM() {
+    const K = this.K, sel = this.state.selTaskId;
+    return this.TASKS.map(([id, prov, status, snip, ago, cost, runId]) => {
+      const c = this.taskStatusColor(status);
+      const isSel = id === sel;
+      return {
+        id, prov, status, snip, ago, cost,
+        statusColor: c, provColor: prov === 'scratch' ? K.dim : '#c2c6cd',
+        onSelect: () => this.set({ selTaskId: id }),
+        rowStyle: 'display:block; width:100%; text-align:left; padding:11px 13px; border:none; border-left:2px solid ' + (isSel ? c : 'transparent') + '; background:' + (isSel ? '#15171b' : 'transparent') + '; cursor:pointer; border-bottom:1px solid #15171a;',
+      };
+    });
+  }
+  taskMeta(id) {
+    const nameById = {}; this.PIPE_DEFS.forEach(p => nameById[p.id] = p.name);
+    const c = this.state.createdTasks.find(t => t.id === id);
+    if (c) return { id, status: c.status, provider: c.provider, summary: c.summary, step: c.step, pipe: c.pipe || '', pipeName: c.pipe ? nameById[c.pipe] : 'ad-hoc task', runId: c.runId || '', cost: c.cost || '', ago: c.ago || 'just now', dur: c.dur || '—' };
+    const t = this.TASKREC.find(x => x[0] === id);
+    if (t) return { id, status: t[1], provider: t[2], summary: t[5], step: t[4] || '—', pipe: t[3] || '', pipeName: t[3] ? nameById[t[3]] : 'scratch (ad-hoc)', runId: t[10] || '', cost: t[6] || '', ago: t[7] || '', dur: t[8] || '—' };
+    const l = this.TASKS.find(x => x[0] === id);
+    if (l) return { id, status: l[2], provider: l[1], summary: l[3], step: '—', pipe: '', pipeName: '—', runId: l[6] || '', cost: l[5] || '', ago: l[4] || '', dur: '—' };
+    return { id, status: 'done', provider: '—', summary: id, step: '—', pipe: '', pipeName: '—', runId: '', cost: '', ago: '', dur: '—' };
+  }
+  taskIdForRunStep(runId, stepName) {
+    let t = this.TASKREC.find(x => x[10] === runId && x[4] === stepName);
+    if (!t) t = this.TASKREC.find(x => x[4] === stepName);
+    return t ? t[0] : 't_applyfix';
+  }
+  openTaskDetail(id) { this.set({ active: 'tdetail', selTaskId: id, taskSearch: '', errorsOnly: false }); }
+  synthLog(meta) {
+    const s = meta.status;
+    if (s === 'running') return ['$ ' + meta.summary, '… task running — streaming output', '◐ in progress'];
+    if (s === 'failed') return ['$ ' + meta.summary, 'error: command exited non-zero', '✖ task failed (exit 1)'];
+    return ['$ ' + meta.summary, '✓ task completed'];
+  }
+  taskDetailVM(id) {
+    const K = this.K;
+    const meta = this.taskMeta(id);
+    if (this.state.cancelledTasks[id] && meta.status === 'running') meta.status = 'failed';
+    const lines = this.TASK_LOG[id] || this.synthLog(meta);
+    const q = this.state.taskSearch.trim().toLowerCase();
+    const errRe = /error|✖|fail|conflict/i;
+    let filtered = lines.map((t, i) => {
+      const isErr = errRe.test(t);
+      return {
+        n: i + 1, text: t, isErr,
+        color: isErr ? K.red : t.startsWith('✓') ? K.green : t.startsWith('$') ? K.blue : t.startsWith('→') ? K.blue : '#a6abb3',
+        gutter: isErr ? K.red : 'transparent',
+        rowBg: isErr ? '#f15b4a10' : 'transparent',
+      };
+    });
+    if (this.state.errorsOnly) filtered = filtered.filter(l => l.isErr);
+    if (q) filtered = filtered.filter(l => l.text.toLowerCase().includes(q));
+    const errCount = lines.filter(t => errRe.test(t)).length;
+    const diff = (this.TASK_DIFF[id] || [['— no changes for this task', 'ctx']]).map(([text, type]) => ({
+      text, color: type === 'add' ? K.green : type === 'del' ? K.red : type === 'hunk' ? K.purple : type === 'meta' ? K.dim : '#9aa0a8',
+      bg: type === 'add' ? '#46c25a14' : type === 'del' ? '#f15b4a14' : 'transparent',
+    }));
+    const mini = lines.map(t => ({ color: errRe.test(t) ? K.red : '#2f3239', tall: errRe.test(t) }));
+    return {
+      id, prov: meta.provider, status: meta.status, snip: meta.summary, ago: meta.ago, cost: meta.cost, runId: meta.runId,
+      provider: meta.provider, pipeName: meta.pipeName, step: meta.step,
+      statusColor: this.taskStatusColor(meta.status),
+      logLines: filtered, allLines: lines.length, errCount, mini,
+      result: this.TASK_RESULT[id] || ('{\n  "status": "' + meta.status + '",\n  "task": "' + id + '"\n}'),
+      diff,
+      retryable: meta.status === 'failed', running: meta.status === 'running',
+      onRetry: (e) => { if (e) e.stopPropagation(); const n = this.state.createSeq + 1; const t = { id: 't_re' + n, status: 'running', provider: meta.provider, pipe: '', step: meta.step, summary: meta.summary, cost: '', ago: 'just now', dur: '—', hrs: 0, runId: '' }; this.set({ createdTasks: [t, ...this.state.createdTasks], createSeq: n, expandedTask: t.id, selTaskId: t.id, trStatus: 'all', trProvider: 'all', trSearch: '' }); },
+      onCancel: (e) => { if (e) e.stopPropagation(); this.set({ cancelledTasks: { ...this.state.cancelledTasks, [id]: true } }); },
+    };
+  }
+  selTaskVM() { return this.taskDetailVM(this.state.selTaskId); }
+  fullTaskVM() {
+    const K = this.K, id = this.state.selTaskId;
+    const meta = this.taskMeta(id);
+    if (this.state.cancelledTasks[id] && meta.status === 'running') meta.status = 'failed';
+    const base = this.taskDetailVM(id);
+    const isLlm = !!this.LLM_STEPS[meta.step];
+    const cmd = (this.STEP_CMD[meta.step] || ['shell', meta.summary])[1];
+    const sc = this.taskStatusColor(meta.status);
+    const exit = meta.status === 'failed' ? '1' : meta.status === 'running' ? '—' : '0';
+    const startClock = '11:' + (10 + (id.length * 7) % 49) + ' PM';
+    // identity / facts
+    const facts = [
+      ['Task ID', id, '#c9cdd3'],
+      ['Status', meta.status, sc],
+      ['Type', isLlm ? 'LLM prompt' : 'Shell command', isLlm ? K.purple : K.yellow],
+      ['Provider / Repo', meta.provider, '#c9cdd3'],
+      ['Exit code', exit, exit === '0' ? K.green : exit === '1' ? K.red : '#8b9098'],
+      ['Started', meta.ago + ' · ' + startClock, '#8b9098'],
+      ['Duration', meta.dur, '#8b9098'],
+      ['Cost', meta.cost || (isLlm ? '$0.000' : '—'), meta.cost ? K.purple : '#8b9098'],
+    ];
+    if (isLlm) { facts.push(['Model', 'claude-sonnet-4.6', '#8b9098']); facts.push(['Tokens', '4.2k in · 1.1k out', '#8b9098']); }
+    if (meta.pipe === 'bugfix') facts.push(['Branch', 'fix/mantis-1296959', K.blue]);
+    // lineage
+    const lineage = {
+      hasPipeline: meta.pipe && meta.runId,
+      pipeName: meta.pipeName, runId: meta.runId, step: meta.step,
+      onRun: () => this.set({ active: 'p1', expandedRun: meta.runId, recStatus: 'all', recPipe: 'all', recTime: 'all', recGroup: 'timeline' }),
+    };
+    const phases = (meta.status === 'failed'
+      ? [['queued', 'ok'], ['provision env', 'ok'], ['execute', 'fail'], ['collect output', 'skip']]
+      : meta.status === 'running'
+      ? [['queued', 'ok'], ['provision env', 'ok'], ['execute', 'run'], ['collect output', 'pend']]
+      : [['queued', 'ok'], ['provision env', 'ok'], ['execute', 'ok'], ['collect output', 'ok']]
+    ).map(([label, s]) => ({ label, color: this.statusMeta(s).color, glyph: this.statusMeta(s).glyph }));
+    return {
+      ...base, meta, cmd, isLlm, cmdLabel: isLlm ? 'Prompt' : 'Command',
+      statusColor: sc, exit, facts: facts.map(f => ({ k: f[0], v: f[1], color: f[2] })), lineage, phases,
+      retryable: meta.status === 'failed', running: meta.status === 'running',
+      onRetry: base.onRetry, onCancel: base.onCancel,
+      backToList: () => this.set({ active: 'trecord' }),
+    };
+  }
+  // DAG columns (dependency stages) for P2
+  p2Cols(detail) {
+    const K = this.K;
+    const stages = [[0],[1],[2,3],[4],[5],[6],[7],[8],[9],[10]];
+    return stages.map((idxs, ci) => ({
+      showArrow: ci > 0,
+      steps: idxs.map(i => {
+        const s = detail.steps[i];
+        const picked = s.name === this.state.p2Open;
+        const c = s.color;
+        return {
+          name: s.name, glyph: s.glyph, color: c, dur: s.dur, isFailed: s.isFailed,
+          onPick: () => this.set({ p2Open: s.name }),
+          chipStyle: 'display:flex; align-items:center; gap:7px; padding:8px 11px; border-radius:8px; cursor:pointer; white-space:nowrap; border:1px solid ' + (picked ? c : '#2a2d34') + '; background:' + (picked ? c + '1c' : '#101216') + ';' + (s.isFailed ? ' animation:pulseRed 2s infinite;' : ''),
+        };
+      }),
+    }));
+  }
+  // P3 failure-first command center
+  p3() {
+    const K = this.K;
+    const filt = this.state.p3Filter;
+    const all = this.RUNS.map(([id, status, ago, dur, pat]) => ({ id, status, ago, dur, pat: this.pat(pat) }));
+    const counts = {
+      all: all.length,
+      fail: all.filter(r => r.status === 'fail').length,
+      run: all.filter(r => r.status === 'run').length,
+      ok: all.filter(r => r.status === 'ok').length,
+    };
+    const match = r => filt === 'all' ? true : filt === 'fail' ? r.status === 'fail' : filt === 'run' ? r.status === 'run' : r.status === 'ok';
+    const feed = all.filter(match).map(r => {
+      const fi = r.pat.findIndex(s => s === 'fail');
+      const ri = r.pat.findIndex(s => s === 'run');
+      const stepName = fi >= 0 ? this.STEPS[fi][0] : ri >= 0 ? this.STEPS[ri][0] : '—';
+      const okN = r.pat.filter(s => s === 'ok').length;
+      const log = (fi >= 0 || ri >= 0) ? (this.LOGS[stepName] || []) : [];
+      const errLine = log.filter(t => /error|✖|FAILED/i.test(t)).slice(-1)[0] || (log.length ? log[log.length - 1] : '—');
+      const open = this.state.p3Open === r.id;
+      const sc = this.statusMeta(r.status).color;
+      return {
+        id: r.id, ago: r.ago, dur: r.dur, status: r.status, statusColor: sc,
+        stepName, stepIndex: 'step ' + (Math.max(fi, ri) + 1) + '/11', okBadge: okN + ' passed',
+        errLine, isFail: r.status === 'fail', isRun: r.status === 'run', open,
+        chev: open ? '收起 ▾' : '展开日志 ▸',
+        cardStyle: 'border:1px solid ' + (open ? sc + '66' : '#22252b') + '; border-left:3px solid ' + sc + '; background:' + (open ? '#121317' : '#0f1013') + '; border-radius:10px; margin-bottom:11px; overflow:hidden;',
+        onToggle: () => this.set({ p3Open: open ? '' : r.id }),
+        onOpenTask: () => this.set({ active: 't1', selTaskId: 't_applyfix' }),
+        log: log.map(t => ({ text: t, color: /error|✖|FAILED/.test(t) ? K.red : t.startsWith('✓') ? K.green : t.startsWith('→') ? K.blue : '#9aa0a8' })),
+      };
+    });
+    const heat = all.map(r => ({ color: this.statusMeta(r.status).color, title: r.id + ' · ' + r.status }));
+    const filters = [
+      ['all', 'All', counts.all], ['fail', 'Failed', counts.fail], ['run', 'Running', counts.run], ['ok', 'Passed', counts.ok],
+    ].map(([id, label, n]) => {
+      const active = filt === id;
+      const c = id === 'fail' ? K.red : id === 'run' ? K.run : id === 'ok' ? K.green : '#c2c6cd';
+      return {
+        label, n, onSelect: () => this.set({ p3Filter: id }),
+        style: 'display:flex; align-items:center; gap:8px; padding:9px 13px; border-radius:8px; cursor:pointer; border:1px solid ' + (active ? c + '55' : '#22252b') + '; background:' + (active ? c + '18' : 'transparent') + ';',
+        labelColor: active ? c : '#9aa0a8', countColor: active ? c : '#6b7079',
+      };
+    });
+    return { feed, heat, filters, failRate: Math.round(counts.fail / counts.all * 100) + '%', topFail: 'apply-fix', topFailN: counts.fail, total: counts.all };
+  }
+  // ----- pipeline TYPES nav (solves: many types × many records) -----
+  typesVM() {
+    const K = this.K;
+    return this.PIPE_TYPES.map(([id, name, runs, fails, last]) => {
+      const sel = id === this.state.selType;
+      const lc = this.statusMeta(last).color;
+      return {
+        id, name, runs, fails, sel, dot: lc, failBadge: fails > 0,
+        onSelect: () => this.set({ selType: id }),
+        nameColor: sel ? '#f3f4f6' : '#c2c6cd',
+        rowStyle: 'display:block; width:100%; text-align:left; padding:10px 12px; border:none; border-left:2px solid ' + (sel ? K.orange : 'transparent') + '; background:' + (sel ? '#15171b' : 'transparent') + '; cursor:pointer; border-bottom:1px solid #131519;',
+        chipStyle: 'display:flex; align-items:center; gap:8px; padding:8px 12px; border-radius:8px; cursor:pointer; white-space:nowrap; border:1px solid ' + (sel ? K.orange + '66' : '#22252b') + '; background:' + (sel ? K.orange + '14' : 'transparent') + ';',
+        chipNameColor: sel ? '#f3f4f6' : '#9aa0a8',
+      };
+    });
+  }
+  runsForTypeVM() {
+    let list = this.runsVM();
+    if (this.state.failedRunsOnly) list = list.filter(r => r.status === 'fail');
+    return list;
+  }
+  outputFor(name, status, dur) {
+    const K = this.K;
+    const map = {
+      'apply-fix': [['exit code','1','red'],['branch','fix/1296959',''],['patch','/tmp/fix-1296959.patch',''],['hunks failed','3','red'],['conflict','networkConfig.js','red']],
+      'triage': [['decision','ATTEMPT_FIX','green'],['confidence','0.81',''],['cost','$0.203','']],
+      'plan-fix': [['files touched','1',''],['cost','$0.340','']],
+      'attach-files': [['attachments','1',''],['bytes','122093','']],
+      'discover-ids': [['bugs found','1',''],['bug_ids','1296959','']],
+      'fetch-bug-details': [['notes','4',''],['cached','8.2 KB','']],
+    };
+    let rows = map[name];
+    if (!rows) rows = status === 'skip' ? [['—','skipped','']] : status === 'run' ? [['status','running','run'],['elapsed',dur,'']] : [['exit code','0','green'],['duration',dur,'']];
+    else if (status === 'ok' && name !== 'apply-fix') rows = [['exit code','0','green'], ...rows];
+    return rows.map(([k, v, c]) => ({ k, v, color: c === 'red' ? K.red : c === 'green' ? K.green : c === 'run' ? K.run : '#c8ccd2' }));
+  }
+  // ----- shared horizontal track builder (V1 + V3) -----
+  buildTrack(runId, focusName) {
+    const K = this.K;
+    const row = this.RUNS.find(r => r[0] === runId) || this.RUNS[3];
+    const [id, status, ago, dur] = row;
+    const pat = this.pat(row[4]);
+    const m = this.statusMeta(status);
+    let focusIdx = pat.findIndex(s => s === 'fail');
+    if (focusName) { const fi = this.STEPS.findIndex(s => s[0] === focusName); if (fi >= 0) focusIdx = fi; }
+    if (focusIdx < 0) focusIdx = pat.findIndex(s => s === 'run');
+    if (focusIdx < 0) { for (let i = pat.length - 1; i >= 0; i--) { if (pat[i] === 'ok') { focusIdx = i; break; } } }
+    if (focusIdx < 0) focusIdx = 0;
+    const stages = this.STAGES.map((idxs, ci) => ({
+      showArrow: ci > 0,
+      parallel: idxs.length > 1,
+      isFork: idxs.length > 1,
+      isMerge: idxs.length === 1 && ci > 0 && this.STAGES[ci - 1].length > 1,
+      isLine: ci > 0 && idxs.length === 1 && this.STAGES[ci - 1].length === 1,
+      steps: idxs.map(i => {
+        const s = pat[i], sm = this.statusMeta(s);
+        const [name, kind] = this.STEPS[i];
+        const kindColor = kind === 'default' ? K.purple : K.yellow;
+        const isFocus = i === focusIdx;
+        return {
+          idx: i, name, kind, kindColor, status: s, glyph: sm.glyph, color: sm.color,
+          dur: (s === 'skip' || s === 'pend') ? '—' : this.DUR[i],
+          isFocus, isFailed: s === 'fail', isRunning: s === 'run',
+          onPick: () => this.set({ pFocus: name, v2Step: name }),
+          pillStyle: 'display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:9px; cursor:pointer; white-space:nowrap; border:1px solid ' + (isFocus ? sm.color : '#262a31') + '; background:' + (isFocus ? sm.color + '1e' : '#101216') + ';' + (s === 'run' ? ' animation:pulseRed 2s infinite;' : ''),
+          nodeStyle: 'width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; cursor:pointer; color:' + sm.color + '; background:' + (isFocus ? sm.color + '22' : '#0d0f12') + '; border:2px solid ' + (isFocus ? sm.color : '#2a2e35') + ';' + (isFocus ? ' box-shadow:0 0 0 4px ' + sm.color + '22;' : '') + (s === 'run' ? ' animation:pulseRed 2s infinite;' : ''),
+          labelColor: isFocus ? '#e6e8eb' : '#8b9098',
+        };
+      }),
+    }));
+    const fstep = this.STEPS[focusIdx];
+    const fs = pat[focusIdx];
+    const fm = this.statusMeta(fs);
+    return {
+      id, status, ago, dur, statusColor: m.color, statusLabel: m.label,
+      summary: pat.filter(s => s === 'ok').length + ' passed · ' + pat.filter(s => s === 'fail').length + ' failed · ' + pat.filter(s => s === 'skip').length + ' skipped',
+      segments: pat.map(s => ({ bg: this.statusMeta(s).bar })),
+      stages,
+      focus: { name: fstep[0], kind: fstep[1], kindColor: fstep[1] === 'default' ? K.purple : K.yellow, glyph: fm.glyph, color: fm.color, dur: (fs === 'skip' || fs === 'pend') ? '—' : this.DUR[focusIdx], status: fs, label: fm.label, isFailed: fs === 'fail', isRunning: fs === 'run', stepIndex: 'step ' + (focusIdx + 1) + '/11', autoNote: fs === 'fail' ? '自动定位到失败步骤' : fs === 'run' ? '自动定位到运行中步骤' : '自动定位到最后步骤' },
+      focusLog: (this.LOGS[fstep[0]] || ['(no output)']).map(t => ({ text: t, color: /error|✖|FAILED/.test(t) ? K.red : t.startsWith('✓') ? K.green : t.startsWith('→') ? K.blue : '#9aa0a8' })),
+      focusOut: this.outputFor(fstep[0], fs, this.DUR[focusIdx]),
+      taskLinkable: row[4] === 'P_APPLY',
+    };
+  }
+  // ----- failure radar matrix (V2) -----
+  matrixVM() {
+    const K = this.K;
+    const rows = this.RUNS.map(([id, status, ago, dur, patName]) => {
+      const pat = this.pat(patName);
+      const cells = pat.map((s, i) => {
+        const sm = this.statusMeta(s);
+        const sel = id === this.state.v2Run && this.STEPS[i][0] === this.state.v2Step;
+        const filled = s === 'ok' || s === 'fail' || s === 'run';
+        return {
+          status: s, isFail: s === 'fail', isRun: s === 'run',
+          onClick: () => this.set({ v2Run: id, v2Step: this.STEPS[i][0] }),
+          cellStyle: 'width:21px; height:21px; border-radius:5px; cursor:pointer; background:' + (filled ? sm.bar + (s === 'ok' ? '' : '') : '#16181c') + '; opacity:' + (s === 'skip' || s === 'pend' ? '.5' : '1') + '; border:1.5px solid ' + (sel ? '#ffffff' : (s === 'fail' ? sm.bar : 'transparent')) + ';' + (s === 'fail' ? ' box-shadow:0 0 7px ' + sm.bar + '88;' : '') + (s === 'run' ? ' animation:pulseRed 2s infinite;' : ''),
+        };
+      });
+      const selRow = id === this.state.v2Run;
+      return {
+        id, ago, dur, status, statusColor: this.statusMeta(status).color, isFail: status === 'fail', cells, selRow,
+        rowStyle: 'display:flex; align-items:center; gap:10px; padding:5px 12px; cursor:pointer; border-radius:7px; background:' + (selRow ? '#15171b' : 'transparent') + ';',
+        onSelectRow: () => { const fi = pat.findIndex(s => s === 'fail'); const idx = fi >= 0 ? fi : Math.max(pat.findIndex(s => s === 'run'), 0); this.set({ v2Run: id, v2Step: this.STEPS[idx][0] }); },
+      };
+    });
+    const cols = this.STEPS.map(([name], i) => {
+      const fails = this.RUNS.filter(r => this.pat(r[4])[i] === 'fail').length;
+      return { name, fails, hot: fails >= 4, labelColor: fails >= 4 ? K.red : '#8b9098' };
+    });
+    const worst = cols.reduce((a, b) => b.fails > a.fails ? b : a, cols[0]);
+    return { rows, cols, drawer: this.buildTrack(this.state.v2Run, this.state.v2Step), worst };
+  }
+  // ===== Unified execution records (heterogeneous steps per run) =====
+  PIPE_DEFS = [
+    { id:'bugfix',  name:'mantis-bug-fix-batch',        trigger:'webhook',  steps:['discover-ids','resolve','worktree-setup','fetch-bug-details','triage','attach-files','plan-fix','apply-fix','run-tests','open-mr','notify-teams'] },
+    { id:'triage',  name:'inbound-issue-triage',        trigger:'webhook',  steps:['fetch-issue','classify','dedup-check','assign-owner','post-comment'] },
+    { id:'canary',  name:'release-canary-deploy',       trigger:'manual',   steps:['build','push-image','deploy-canary','smoke-test','watch-metrics','promote'] },
+    { id:'regress', name:'nightly-regression-suite',    trigger:'schedule', steps:['checkout','install','unit','integration','e2e','report'] },
+    { id:'depbump', name:'dependency-bump-automation',  trigger:'schedule', steps:['scan-deps','pick-bump','patch','build','test','open-mr'] },
+    { id:'docs',    name:'docs-site-sync',              trigger:'schedule', steps:['pull-content','render','link-check','publish'] },
+  ];
+  LLM_STEPS = { triage:1, 'plan-fix':1, classify:1, 'assign-owner':1, 'dedup-check':1 };
+  PIDS = { bugfix:'pl_8a3f12', triage:'pl_2c91a0', canary:'pl_5f7e3b', regress:'pl_d40c88', depbump:'pl_19be57', docs:'pl_a7f001' };
+  STEP_CMD = {
+    'discover-ids':['shell','for id in $(echo "$BUG_IDS" | tr "," "\\n"); do emit "$id"; done'],
+    'resolve':['shell','cd "$(git rev-parse --show-toplevel)" && command -v glab'],
+    'worktree-setup':['shell','git worktree add .wt/$BUG -b fix/$BUG'],
+    'fetch-bug-details':['shell','glab api mantis/$BUG > .ctx/bug.json'],
+    'triage':['llm','You are triaging a Mantis bug to decide if Forge should attempt an auto-fix…'],
+    'attach-files':['shell','download_attachments --bug $BUG --dir .wt/.attachments'],
+    'plan-fix':['llm','Given the bug context, produce a minimal patch plan for networkConfig.js…'],
+    'apply-fix':['shell','git apply --check /tmp/fix-$BUG.patch && git apply /tmp/fix-$BUG.patch'],
+    'run-tests':['shell','mvn -q test -Dtest=NetworkConfigTest'],
+    'open-mr':['shell','glab mr create --fill --source fix/$BUG --target main'],
+    'notify-teams':['shell','curl -X POST "$TEAMS_WEBHOOK" -d @.ctx/summary.json'],
+    'security-scan':['shell','trivy fs --severity HIGH,CRITICAL .'],
+    'fetch-issue':['shell','gh issue view $ISSUE --json title,body,labels'],
+    'classify':['llm','Classify this inbound issue into: bug · feature · question · spam…'],
+    'dedup-check':['llm','Search existing issues for duplicates of this report…'],
+    'assign-owner':['llm','Pick the most likely owner from CODEOWNERS for the affected paths…'],
+    'post-comment':['shell','gh issue comment $ISSUE --body-file .ctx/triage.md'],
+    'build':['shell','docker build -t svc:$SHA .'],
+    'push-image':['shell','docker push registry/svc:$SHA'],
+    'deploy-canary':['shell','kubectl set image deploy/svc svc=registry/svc:$SHA -n canary'],
+    'smoke-test':['shell','curl -sf https://canary.svc/healthz'],
+    'watch-metrics':['shell','promtool query "error_rate < 0.01" --for 5m'],
+    'promote':['shell','kubectl rollout restart deploy/svc -n prod'],
+    'checkout':['shell','git checkout $REF'],
+    'install':['shell','npm ci'],
+    'unit':['shell','npm run test:unit'],
+    'integration':['shell','npm run test:int'],
+    'e2e':['shell','npx playwright test'],
+    'report':['shell','node scripts/report.js > report.html'],
+    'scan-deps':['shell','npm outdated --json'],
+    'pick-bump':['llm','Choose safe dependency bumps given changelogs and semver…'],
+    'patch':['shell','npm install $DEP@$VER'],
+    'test':['shell','npm test'],
+    'pull-content':['shell','git pull && sync_content.sh'],
+    'render':['shell','hugo --minify'],
+    'link-check':['shell','lychee ./public'],
+    'publish':['shell','rsync -a public/ "$CDN"'],
+  };
+  TASKREC = [
+    ['t_applyfix','failed','FortiNAC','bugfix','apply-fix','git apply --check /tmp/fix-1296959.patch','',          '7m ago','6.8s',0.6,'25b1fc48'],
+    ['c2179ec2','done','FortiNAC','bugfix','attach-files','download_attachments --bug 1296959 --dir .wt/.attach','','7m ago','3.1s',0.6,'25b1fc48'],
+    ['t_triage','done','FortiNAC','bugfix','triage','You are triaging a Mantis bug to decide if Forge…','$0.203',  '8m ago','22.1s',0.7,'25b1fc48'],
+    ['t_plan','done','FortiNAC','bugfix','plan-fix','Plan the fix — patch networkConfig.js loadConfig…','$0.340','8m ago','18.4s',0.7,'25b1fc48'],
+    ['t_smoke','failed','canary','canary','smoke-test','curl -sf https://canary-7d2a.svc.local/healthz','',         '2m ago','41s',0.1,'7d2a01bc'],
+    ['t_e2e','failed','regress','regress','e2e','npx playwright test --shard 3/4','',                              '1h ago','4m 02s',1,'f0a3d9e7'],
+    ['t_scratch1','failed','scratch','','','set -e && cd "$(git rev-parse --show-toplevel)" && ./run.sh','',       '7m ago','2.0s',0.6,''],
+    ['t_classify','done','triage','triage','classify','Classify this inbound issue into bug/feature/question…','$0.041','18m ago','3.2s',0.3,'11c4e0a2'],
+    ['t_depscan','done','depbump','depbump','scan-deps','npm outdated --json','',                                  '2h ago','9.0s',2,'6b9920f1'],
+    ['t_pickbump','done','depbump','depbump','pick-bump','Choose safe dependency bumps given changelogs…','$0.118','2h ago','6.7s',2,'6b9920f1'],
+    ['t_test','failed','depbump','depbump','test','npm test','',                                                   '1d ago','58s',26,'9c0b4e88'],
+    ['t_resolve','failed','FortiNAC','bugfix','resolve','command -v glab','',                                       '3h ago','0.4s',3,'7026c661'],
+    ['t_linkcheck','done','docs','docs','link-check','lychee ./public','',                                          '6h ago','12s',6,'c5d22a90'],
+    ['t_promote','done','canary','canary','promote','kubectl rollout restart deploy/svc -n prod','',               '4h ago','21s',4,'3f8e1d40'],
+    ['t_scratch2','failed','scratch','','','pytest -q','',                                                          '17m ago','5.0s',0.3,''],
+    ['t_runtests','failed','FortiNAC','bugfix','run-tests','mvn -q test -Dtest=NetworkConfigTest','',               '8h ago','7.5s',8,'e962b5b5'],
+    ['t_watch','running','canary','canary','watch-metrics','promtool query "error_rate < 0.01"','',                'now','—',0,'a4f9c2e1'],
+  ];
+  RECS_RAW = [
+    { id:'a4f9c2e1', pipe:'bugfix',  ago:'now',     dur:'—',      status:'run',  focus:'run-tests',     hrs:0 },
+    { id:'7d2a01bc', pipe:'canary',  ago:'2m ago',  dur:'41s',    status:'fail', focus:'smoke-test',    hrs:0.1 },
+    { id:'99634dc5', pipe:'bugfix',  ago:'12m ago', dur:'1m 48s', status:'ok',   hrs:0.2, steps:['discover-ids','resolve','worktree-setup','fetch-bug-details','triage','attach-files','plan-fix','apply-fix','security-scan','run-tests','open-mr','notify-teams'] },
+    { id:'11c4e0a2', pipe:'triage',  ago:'18m ago', dur:'12s',    status:'ok',   hrs:0.3 },
+    { id:'25b1fc48', pipe:'bugfix',  ago:'40m ago', dur:'58s',    status:'fail', focus:'apply-fix',     hrs:0.7 },
+    { id:'f0a3d9e7', pipe:'regress', ago:'1h ago',  dur:'8m 12s', status:'fail', focus:'e2e',           hrs:1 },
+    { id:'cdedb454', pipe:'bugfix',  ago:'1h ago',  dur:'1m 52s', status:'ok',   hrs:1.4 },
+    { id:'6b9920f1', pipe:'depbump', ago:'2h ago',  dur:'2m 05s', status:'ok',   hrs:2 },
+    { id:'7026c661', pipe:'bugfix',  ago:'3h ago',  dur:'12s',    status:'fail', focus:'resolve',       hrs:3 },
+    { id:'aa17b3c2', pipe:'triage',  ago:'3h ago',  dur:'9s',     status:'ok',   hrs:3.3 },
+    { id:'3f8e1d40', pipe:'canary',  ago:'4h ago',  dur:'3m 30s', status:'ok',   hrs:4 },
+    { id:'850747c9', pipe:'bugfix',  ago:'5h ago',  dur:'1m 40s', status:'ok',   hrs:5, steps:['discover-ids','resolve','worktree-setup','fetch-bug-details','triage','attach-files','plan-fix','apply-fix','run-tests','open-mr'] },
+    { id:'c5d22a90', pipe:'docs',    ago:'6h ago',  dur:'38s',    status:'ok',   hrs:6 },
+    { id:'e962b5b5', pipe:'bugfix',  ago:'8h ago',  dur:'1m 12s', status:'fail', focus:'run-tests',     hrs:8 },
+    { id:'2a7f0cc1', pipe:'regress', ago:'12h ago', dur:'7m 50s', status:'ok',   hrs:12 },
+    { id:'41ea10b7', pipe:'bugfix',  ago:'1d ago',  dur:'11s',    status:'fail', focus:'worktree-setup',hrs:24 },
+    { id:'9c0b4e88', pipe:'depbump', ago:'1d ago',  dur:'1m 58s', status:'fail', focus:'test',          hrs:26 },
+    { id:'69ac564c', pipe:'bugfix',  ago:'1d ago',  dur:'1m 39s', status:'ok',   hrs:28 },
+    { id:'0399a270', pipe:'triage',  ago:'2d ago',  dur:'10s',    status:'ok',   hrs:48 },
+    { id:'5c805acf', pipe:'bugfix',  ago:'2d ago',  dur:'13s',    status:'fail', focus:'apply-fix',     hrs:50 },
+    { id:'c37431ae', pipe:'canary',  ago:'2d ago',  dur:'3m 10s', status:'ok',   hrs:52 },
+    { id:'d1f6a022', pipe:'docs',    ago:'3d ago',  dur:'35s',    status:'ok',   hrs:72 },
+  ];
+  EXTRA_LOGS = {
+    'smoke-test': ['+ curl -sf https://canary-7d2a.svc.local/healthz','→ HTTP 502 Bad Gateway','retry 1/6 … 502','retry 6/6 … 502','health gate not satisfied after 6 retries','✖ smoke-test exited with code 1'],
+    'e2e': ['Running 142 e2e specs across 4 shards…','✓ 138 passed','✖ checkout.spec.ts:88 — timeout 30000ms exceeded','✖ cart.spec.ts:41 — expected 200, got 503','4 failing','✖ e2e exited with code 1'],
+    'test': ['+ pytest -q','............F......','FAILED tests/test_config.py::test_load_empty_guard','AssertionError: ConfigError not raised','✖ 1 failed, 46 passed in 18.3s'],
+    'resolve': ['+ cd "$(git rev-parse --show-toplevel)"','+ command -v glab','glab: command not found','✖ resolve exited with code 127'],
+    'worktree-setup': ['+ git worktree add .wt/1296959 -b fix/1296959','fatal: .wt/1296959 already exists and is not empty','✖ worktree-setup exited with code 128'],
+    'run-tests': ['+ mvn -q test -Dtest=NetworkConfigTest','[ERROR] NetworkConfigTest.loadConfig:142 expected ConfigError','[ERROR] Tests run: 18, Failures: 1','✖ run-tests exited with code 1'],
+  };
+  recColor(s) { return this.statusMeta(s).bar; }
+  deriveStates(stepNames, status, focusName) {
+    const fi = focusName ? stepNames.indexOf(focusName) : -1;
+    return stepNames.map((n, i) => {
+      if (status === 'ok' || fi < 0) return 'ok';
+      if (i < fi) return 'ok';
+      if (i === fi) return status === 'fail' ? 'fail' : 'run';
+      return status === 'fail' ? 'skip' : 'pend';
+    });
+  }
+  enrichRun(r) {
+    const byId = {}; this.PIPE_DEFS.forEach(p => byId[p.id] = p);
+    const def = byId[r.pipe];
+    const stepNames = r.steps || def.steps;
+    const states = this.deriveStates(stepNames, r.status, r.focus);
+    return { ...r, pid: this.PIDS[r.pipe], pipeName: def.name, trigger: r.trigger || def.trigger, stepNames, states };
+  }
+  buildRecords() {
+    const base = this.RECS_RAW.map(r => this.enrichRun(r));
+    const extra = this.state.extraRuns.map(r => this.enrichRun(r));
+    const all = [...extra, ...base];
+    return all.map(r => {
+      if (this.state.cancelledRuns[r.id]) {
+        return { ...r, status: 'fail', cancelled: true, states: this.deriveStates(r.stepNames, 'fail', r.focus) };
+      }
+      return r;
+    });
+  }
+  retryRun(rec) {
+    const n = this.state.retrySeq + 1;
+    const nr = { id: 're' + n + '_' + rec.id.slice(0, 4), pipe: rec.pipe, ago: 'just now', dur: '—', status: 'run', focus: rec.stepNames[0], hrs: 0, steps: rec.steps };
+    this.set({ extraRuns: [nr, ...this.state.extraRuns], retrySeq: n, expandedRun: nr.id, recStatus: 'all', recPipe: 'all', recTime: 'all', recGroup: 'timeline' });
+  }
+  cancelRun(id) { this.set({ cancelledRuns: { ...this.state.cancelledRuns, [id]: true } }); }
+  stepLogFor(name, status) {
+    const K = this.K;
+    let lines = this.EXTRA_LOGS[name] || this.LOGS[name];
+    if (!lines) {
+      lines = status === 'fail' ? ['✖ ' + name + ' exited with code 1']
+        : status === 'run' ? ['◐ ' + name + ' running…', '… streaming output']
+        : status === 'skip' ? ['— skipped (upstream failed)']
+        : status === 'pend' ? ['· queued'] : ['+ ' + name, '✓ ' + name + ' completed'];
+    }
+    return lines.map(t => ({ text: t, color: /error|✖|FAILED|fatal|not found/i.test(t) ? K.red : t.startsWith('✓') ? K.green : t.startsWith('→') ? K.blue : '#9aa0a8' }));
+  }
+  buildRunDetail(rec) {
+    const K = this.K;
+    const names = rec.stepNames, states = rec.states;
+    let fi = names.indexOf(this.state.runFocus[rec.id]);
+    if (fi < 0) fi = states.indexOf('fail');
+    if (fi < 0) fi = states.indexOf('run');
+    if (fi < 0) { for (let i = states.length - 1; i >= 0; i--) if (states[i] === 'ok') { fi = i; break; } }
+    if (fi < 0) fi = 0;
+    const steps = names.map((name, i) => {
+      const s = states[i], sm = this.statusMeta(s);
+      const kind = this.LLM_STEPS[name] ? 'default' : 'shell';
+      const isFocus = i === fi;
+      return {
+        name, status: s, glyph: sm.glyph, color: sm.color, isFocus,
+        kindColor: kind === 'default' ? K.purple : K.yellow,
+        onPick: () => this.set({ runFocus: { ...this.state.runFocus, [rec.id]: name } }),
+        pillStyle: 'display:flex; align-items:center; gap:7px; padding:7px 10px; border-radius:8px; cursor:pointer; white-space:nowrap; flex-shrink:0; border:1px solid ' + (isFocus ? sm.color : '#262a31') + '; background:' + (isFocus ? sm.color + '1e' : '#101216') + ';' + (s === 'run' ? ' animation:pulseRed 2s infinite;' : ''),
+      };
+    });
+    const fName = names[fi], fState = states[fi], fm = this.statusMeta(fState);
+    const fTaskId = this.taskIdForRunStep(rec.id, fName);
+    return {
+      steps, count: names.length,
+      onOpenTaskLog: () => this.openTaskDetail(fTaskId),
+      focus: { name: fName, glyph: fm.glyph, color: fm.color, kind: this.LLM_STEPS[fName] ? 'llm' : 'shell', kindColor: this.LLM_STEPS[fName] ? K.purple : K.yellow },
+      focusLog: this.stepLogFor(fName, fState),
+      focusOut: this.outputFor(fName, fState, '—'),
+      taskLinkable: rec.id === '25b1fc48',
+    };
+  }
+  recRowVM(r, showPipe) {
+    const K = this.K;
+    const m = this.statusMeta(r.status);
+    const okN = r.states.filter(s => s === 'ok').length;
+    const summary = r.status === 'fail' ? ((r.cancelled ? 'cancelled · ' : 'failed · ') + r.focus) : r.status === 'run' ? ('running · ' + r.focus) : (r.stepNames.length + ' steps passed');
+    const expanded = this.state.expandedRun === r.id;
+    const trigGlyph = r.trigger === 'schedule' ? '◷' : r.trigger === 'manual' ? '☞' : '⚡';
+    const isFail = r.status === 'fail', isRun = r.status === 'run';
+    const actions = isRun
+      ? [ { label: '■ Cancel', danger: true, run: (e) => { e && e.stopPropagation(); this.cancelRun(r.id); } },
+          { label: '⊙ Follow live', danger: false, run: (e) => { e && e.stopPropagation(); this.set({ expandedRun: r.id }); } } ]
+      : isFail
+      ? [ { label: '↻ Retry from ' + r.focus, danger: false, run: (e) => { e && e.stopPropagation(); this.retryRun(r); } },
+          { label: '↻ Re-run all', danger: false, run: (e) => { e && e.stopPropagation(); this.retryRun(r); } } ]
+      : [ { label: '↻ Re-run', danger: false, run: (e) => { e && e.stopPropagation(); this.retryRun(r); } } ];
+    const quick = isRun ? { show: true, label: '■ Cancel', color: K.red, run: (e) => { e && e.stopPropagation(); this.cancelRun(r.id); } }
+      : isFail ? { show: true, label: '↻ Retry', color: K.orange, run: (e) => { e && e.stopPropagation(); this.retryRun(r); } }
+      : { show: false, label: '', color: '', run: () => {} };
+    return {
+      id: r.id, pid: r.pid, pipeName: r.pipeName, showPipe, ago: r.ago, dur: r.dur, status: r.status,
+      statusLabel: r.cancelled ? 'cancelled' : m.label,
+      dotColor: m.color, summary, summaryColor: r.status === 'fail' ? K.red : r.status === 'run' ? K.run : '#7d828b',
+      trigger: r.trigger, trigGlyph, stepCount: r.stepNames.length + ' steps',
+      segments: r.states.map(s => ({ bg: this.statusMeta(s).bar })),
+      expanded, chev: expanded ? '▾' : '▸',
+      actions, quick,
+      quickStyle: 'font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:6px; cursor:pointer; white-space:nowrap; border:1px solid ' + quick.color + '55; background:' + quick.color + '18; color:' + quick.color + ';',
+      rowStyle: 'display:flex; align-items:center; gap:12px; padding:11px 16px; cursor:pointer; border-bottom:1px solid #15171a; background:' + (expanded ? '#121317' : 'transparent') + '; border-left:2px solid ' + (expanded ? m.color : 'transparent') + ';',
+      onToggle: () => this.set({ expandedRun: expanded ? '' : r.id }),
+      detail: expanded ? this.buildRunDetail(r) : null,
+    };
+  }
+  recordsVM() {
+    const K = this.K, st = this.state;
+    const all = this.buildRecords();
+    const statusMap = { failed: 'fail', running: 'run', passed: 'ok' };
+    const lim = st.recTime === '24h' ? 24 : st.recTime === '7d' ? 168 : st.recTime === '30d' ? 720 : 1e9;
+    const q = st.recSearch.trim().toLowerCase();
+    const list = all.filter(r => {
+      if (st.recStatus !== 'all' && r.status !== statusMap[st.recStatus]) return false;
+      if (st.recPipe !== 'all' && r.pipe !== st.recPipe) return false;
+      if (st.recTrigger !== 'all' && r.trigger !== st.recTrigger) return false;
+      if (r.hrs > lim) return false;
+      if (q && !(r.id.includes(q) || r.pipeName.toLowerCase().includes(q) || (r.focus || '').toLowerCase().includes(q))) return false;
+      return true;
+    });
+    const total = list.length, failN = list.filter(r => r.status === 'fail').length, runN = list.filter(r => r.status === 'run').length;
+    let groups = null, flat = null;
+    if (st.recGroup === 'pipeline') {
+      groups = this.PIPE_DEFS.map(p => {
+        const rs = list.filter(r => r.pipe === p.id);
+        if (!rs.length) return null;
+        const gf = rs.filter(r => r.status === 'fail').length;
+        const lastM = this.statusMeta(rs[0].status);
+        const open = !!st.expandedGroups[p.id];
+        const spark = all.filter(r => r.pipe === p.id).slice(0, 12).reverse().map(r => ({ bg: this.statusMeta(r.status).bar }));
+        return {
+          id: p.id, name: p.name, count: rs.length, fails: gf, hasFail: gf > 0,
+          lastDot: lastM.color, spark, open, chev: open ? '▾' : '▸',
+          headerStyle: 'display:flex; align-items:center; gap:12px; padding:12px 16px; cursor:pointer; background:#0d0e11; border-bottom:1px solid #1d1f24;' + (open ? '' : ''),
+          onToggle: () => this.set({ expandedGroups: { ...st.expandedGroups, [p.id]: !open } }),
+          runs: open ? rs.map(r => this.recRowVM(r, false)) : [],
+        };
+      }).filter(Boolean);
+    } else {
+      flat = list.map(r => this.recRowVM(r, true));
+    }
+    const seg = (opts, cur, key, cmap) => opts.map(([val, label]) => {
+      const active = val === cur, c = cmap && cmap[val];
+      return { label, active, onSelect: () => this.set({ [key]: val }),
+        style: 'padding:6px 12px; border-radius:7px; cursor:pointer; font-size:11px; font-weight:500; white-space:nowrap; border:1px solid ' + (active ? (c || '#3a3f48') : 'transparent') + '; background:' + (active ? (c ? c + '1c' : '#1a1d22') : 'transparent') + '; color:' + (active ? (c || '#e6e8eb') : '#8b9098') + ';' };
+    });
+    return {
+      groups, flat, total, failN, runN,
+      isGroup: st.recGroup === 'pipeline',
+      statusOpts: seg([['all','All'],['failed','Failed'],['running','Running'],['passed','Passed']], st.recStatus, 'recStatus', { failed:K.red, running:K.run, passed:K.green }),
+      timeOpts: seg([['24h','24h'],['7d','7d'],['30d','30d'],['all','All time']], st.recTime, 'recTime'),
+      trigOpts: seg([['all','All'],['schedule','◷ Scheduled'],['manual','☞ Manual'],['webhook','⚡ Webhook']], st.recTrigger, 'recTrigger'),
+      pipeOpts: seg([['all','All pipelines'], ...this.PIPE_DEFS.map(p => [p.id, p.name])], st.recPipe, 'recPipe', { [st.recPipe]: K.orange }),
+      groupOpts: seg([['timeline','平铺 Flat'],['pipeline','按 pipeline 分组']], st.recGroup, 'recGroup'),
+      search: st.recSearch,
+      onSearch: (e) => this.set({ recSearch: e.target.value }),
+      clearRecSearch: () => this.set({ recSearch: '' }),
+    };
+  }
+  // ===== Pipeline management (view + edit definitions) =====
+  stepDef(name) {
+    const K = this.K;
+    const d = this.STEP_CMD[name] || ['shell', '$ run ' + name];
+    return { type: d[0], cmd: d[1], kindColor: d[0] === 'llm' ? K.purple : K.yellow, kindLabel: d[0] === 'llm' ? 'llm' : 'shell' };
+  }
+  pipeMgmtVM() {
+    const K = this.K, recs = this.buildRecords();
+    const list = this.PIPE_DEFS.map(p => {
+      const rs = recs.filter(r => r.pipe === p.id);
+      const sel = p.id === this.state.selType;
+      const last = rs[0] ? this.statusMeta(rs[0].status).color : '#4a4e56';
+      return {
+        id: p.id, name: p.name, pid: this.PIDS[p.id], stepCount: p.steps.length, runs: rs.length, lastDot: last, sel,
+        onSelect: () => this.set({ selType: p.id, mgmtEdit: false }),
+        rowStyle: 'display:block; width:100%; text-align:left; padding:11px 13px; border:none; border-left:2px solid ' + (sel ? K.orange : 'transparent') + '; background:' + (sel ? '#15171b' : 'transparent') + '; cursor:pointer; border-bottom:1px solid #131519;',
+        nameColor: sel ? '#f3f4f6' : '#c2c6cd',
+      };
+    });
+    const p = this.PIPE_DEFS.find(x => x.id === this.state.selType) || this.PIPE_DEFS[0];
+    const recsP = recs.filter(r => r.pipe === p.id);
+    const edit = this.state.mgmtEdit;
+    const steps = p.steps.map((name, i) => {
+      const d = this.stepDef(name);
+      return { idx: i + 1, name, type: d.type, cmd: d.cmd, kindColor: d.kindColor, kindLabel: d.kindLabel, edit };
+    });
+    return {
+      list, edit,
+      sel: { id: p.id, name: p.name, pid: this.PIDS[p.id], trigger: p.trigger, stepCount: p.steps.length, runs: recsP.length, lastDot: recsP[0] ? this.statusMeta(recsP[0].status).color : '#4a4e56', lastStatus: recsP[0] ? this.statusMeta(recsP[0].status).label : '—' },
+      steps,
+      toggleEdit: () => this.set({ mgmtEdit: !edit }),
+      editLabel: edit ? 'Done' : 'Edit',
+      editStyle: 'font-size:11.5px; padding:6px 14px; border-radius:7px; cursor:pointer; font-weight:600; ' + (edit ? 'color:#0b0c0e; background:#46c25a;' : 'color:#cdd0d6; background:#1a1d22; border:1px solid #2a2e35;'),
+      viewRecords: () => this.set({ active: 'p1', recPipe: p.id, recGroup: 'timeline' }),
+    };
+  }
+  // ===== Task records (flat, search, quick filters) =====
+  taskRecVM() {
+    const K = this.K, st = this.state;
+    const nameById = {}; this.PIPE_DEFS.forEach(p => nameById[p.id] = p.name);
+    const created = this.state.createdTasks.map(c => ({ ...c, pipeName: c.pipe ? nameById[c.pipe] : 'ad-hoc task' }));
+    const baseRecs = this.TASKREC.map(t => {
+      const [id, status, provider, pipe, step, summary, cost, ago, dur, hrs, runId] = t;
+      return { id, status, provider, pipe, step, summary, cost, ago, dur, hrs, runId, pipeName: pipe ? nameById[pipe] : 'scratch (ad-hoc)' };
+    });
+    const recs = [...created, ...baseRecs].map(r => this.state.cancelledTasks[r.id] && r.status === 'running' ? { ...r, status: 'failed', cancelled: true } : r);
+    const statusMap = { done: 'done', failed: 'failed', running: 'running' };
+    const lim = st.trTime === '24h' ? 24 : st.trTime === '7d' ? 168 : st.trTime === '30d' ? 720 : 1e9;
+    const q = st.trSearch.trim().toLowerCase();
+    const list = recs.filter(r => {
+      if (st.trStatus !== 'all' && r.status !== statusMap[st.trStatus]) return false;
+      if (st.trProvider !== 'all' && r.provider !== st.trProvider) return false;
+      if (st.trPipe !== 'all' && r.pipe !== st.trPipe) return false;
+      if (st.trCost && !r.cost) return false;
+      if (r.hrs > lim) return false;
+      if (q && !(r.id.toLowerCase().includes(q) || r.summary.toLowerCase().includes(q) || (r.step || '').toLowerCase().includes(q) || r.pipeName.toLowerCase().includes(q) || r.provider.toLowerCase().includes(q))) return false;
+      return true;
+    });
+    const rowVM = (r) => {
+      const c = this.taskStatusColor(r.status);
+      const expanded = this.state.expandedTask === r.id;
+      return {
+        id: r.id, status: r.status, statusColor: c, provider: r.provider, providerColor: r.provider === 'scratch' ? K.dim : '#c2c6cd',
+        pipeName: r.pipeName, step: r.step || '—', summary: r.summary, cost: r.cost || '—', dur: r.dur, ago: r.ago,
+        expanded, openGlyph: expanded ? '▾' : '▸',
+        onOpenFull: (e) => { if (e) e.stopPropagation(); this.openTaskDetail(r.id); },
+        onToggle: () => this.set({ expandedTask: expanded ? '' : r.id, taskSearch: '', errorsOnly: false, selTaskId: r.id }),
+        rowStyle: 'display:flex; align-items:center; gap:12px; padding:10px 16px; cursor:pointer; border-bottom:1px solid #15171a; background:' + (expanded ? '#121317' : 'transparent') + '; border-left:2px solid ' + (expanded ? c : 'transparent') + ';',
+        detail: expanded ? this.taskDetailVM(r.id) : null,
+      };
+    };
+    const providers = ['all', ...Array.from(new Set(recs.map(r => r.provider)))];
+    const seg = (opts, cur, key, cmap) => opts.map(([val, label]) => {
+      const active = val === cur, cc = cmap && cmap[val];
+      return { label, active, onSelect: () => this.set({ [key]: val }),
+        style: 'padding:6px 12px; border-radius:7px; cursor:pointer; font-size:11px; font-weight:500; white-space:nowrap; border:1px solid ' + (active ? (cc || '#3a3f48') : 'transparent') + '; background:' + (active ? (cc ? cc + '1c' : '#1a1d22') : 'transparent') + '; color:' + (active ? (cc || '#e6e8eb') : '#8b9098') + ';' };
+    });
+    const qchips = [
+      ['全部', st.trStatus === 'all' && st.trProvider === 'all' && !st.trCost && st.trTime === '7d' && st.trPipe === 'all', () => this.set({ trStatus:'all', trProvider:'all', trPipe:'all', trTime:'7d', trCost:false, trSearch:'' }), '#c2c6cd'],
+      ['失败', st.trStatus === 'failed', () => this.set({ trStatus:'failed' }), K.red],
+      ['运行中', st.trStatus === 'running', () => this.set({ trStatus:'running' }), K.run],
+      ['scratch', st.trProvider === 'scratch', () => this.set({ trProvider: st.trProvider === 'scratch' ? 'all' : 'scratch' }), K.yellow],
+      ['有费用', st.trCost, () => this.set({ trCost: !st.trCost }), K.purple],
+      ['今天', st.trTime === '24h', () => this.set({ trTime: st.trTime === '24h' ? '7d' : '24h' }), K.blue],
+    ].map(([label, active, onSelect, c]) => ({ label, active, onSelect,
+      style: 'padding:6px 13px; border-radius:16px; cursor:pointer; font-size:11.5px; font-weight:600; white-space:nowrap; border:1px solid ' + (active ? c : '#2a2e35') + '; background:' + (active ? c + '1e' : 'transparent') + '; color:' + (active ? c : '#9aa0a8') + ';' }));
+    return {
+      rows: list.map(rowVM), total: list.length, failN: list.filter(r => r.status === 'failed').length,
+      statusOpts: seg([['all','All'],['done','Done'],['failed','Failed'],['running','Running']], st.trStatus, 'trStatus', { failed:K.red, running:K.run, done:K.blue }),
+      providerOpts: seg(providers.map(p => [p, p === 'all' ? 'All' : p]), st.trProvider, 'trProvider'),
+      pipeOpts: seg([['all','All'], ...this.PIPE_DEFS.map(p => [p.id, p.name])], st.trPipe, 'trPipe', { [st.trPipe]: K.orange }),
+      timeOpts: seg([['24h','24h'],['7d','7d'],['30d','30d'],['all','All']], st.trTime, 'trTime'),
+      quick: qchips,
+      search: st.trSearch, onSearch: (e) => this.set({ trSearch: e.target.value }), clearSearch: () => this.set({ trSearch: '' }),
+      createOpen: st.taskCreateOpen,
+      openCreate: () => this.set({ taskCreateOpen: true }),
+      closeCreate: () => this.set({ taskCreateOpen: false }),
+      stop: (e) => { e.stopPropagation(); },
+      form: st.createForm,
+      canRun: !!st.createForm.cmd.trim(),
+      runStyle: 'font-size:12px; font-weight:600; padding:9px 18px; border-radius:8px; cursor:' + (st.createForm.cmd.trim() ? 'pointer' : 'not-allowed') + '; color:' + (st.createForm.cmd.trim() ? '#0b0c0e' : '#6b7079') + '; background:' + (st.createForm.cmd.trim() ? '#ff7d2e' : '#1a1d22') + ';',
+      setProvider: (e) => this.set({ createForm: { ...st.createForm, provider: e.target.value } }),
+      onCmd: (e) => this.set({ createForm: { ...st.createForm, cmd: e.target.value } }),
+      modeShell: () => this.set({ createForm: { ...st.createForm, mode: 'shell' } }),
+      modeLlm: () => this.set({ createForm: { ...st.createForm, mode: 'llm' } }),
+      isShell: st.createForm.mode === 'shell', isLlm: st.createForm.mode === 'llm',
+      modeShellStyle: 'flex:1; text-align:center; padding:8px; border-radius:7px; cursor:pointer; font-size:12px; font-weight:600; color:' + (st.createForm.mode === 'shell' ? '#0b0c0e' : '#9aa0a8') + '; background:' + (st.createForm.mode === 'shell' ? '#d8a23f' : 'transparent') + ';',
+      modeLlmStyle: 'flex:1; text-align:center; padding:8px; border-radius:7px; cursor:pointer; font-size:12px; font-weight:600; color:' + (st.createForm.mode === 'llm' ? '#0b0c0e' : '#9aa0a8') + '; background:' + (st.createForm.mode === 'llm' ? '#a978f0' : 'transparent') + ';',
+      providerVal: st.createForm.provider,
+      cmdPlaceholder: st.createForm.mode === 'shell' ? '$ 输入要执行的命令，如  pytest -q' : '输入给模型的提示，如  Summarize the failing test and propose a fix…',
+      runCreate: () => {
+        const cf = st.createForm; if (!cf.cmd.trim()) return;
+        const n = st.createSeq + 1;
+        const t = { id: 't_new' + n, status: 'running', provider: cf.provider, pipe: '', step: cf.mode === 'llm' ? 'prompt' : 'command', summary: cf.cmd.trim(), cost: '', ago: 'just now', dur: '—', hrs: 0, runId: '' };
+        this.set({ createdTasks: [t, ...st.createdTasks], createSeq: n, taskCreateOpen: false, createForm: { provider: cf.provider, mode: cf.mode, cmd: '' }, trStatus: 'all', trProvider: 'all', trSearch: '' });
+      },
+    };
+  }
+  topNavVM() {
+    const a = this.state.active;
+    const tab = (label, on, active, inert) => ({ label, onClick: inert ? (() => {}) : on, active,
+      style: 'padding:13px 4px; font-size:13px; cursor:' + (inert ? 'default' : 'pointer') + '; color:' + (active ? '#f3f4f6' : '#6b7079') + ';' + (active ? ' border-bottom:2px solid #4f9dff; font-weight:600;' : ' border-bottom:2px solid transparent;') });
+    return [
+      tab('Schedules', () => {}, false, true),
+      tab('Pipeline', () => this.set({ active: 'pipe' }), a === 'pipe'),
+      tab('Pipeline Record', () => this.set({ active: 'p1' }), a === 'p1'),
+      tab('Task', () => this.set({ active: 'trecord' }), a === 'trecord' || a === 't3' || a === 'tdetail'),
+    ];
+  }
+  renderVals() {
+    const a = this.state.active;
+    const detail = this.detailVM();
+    const p2sel = detail.steps.find(s => s.name === this.state.p2Open) || detail.failedStep || detail.steps[0];
+    return {
+      p2cols: this.p2Cols(detail),
+      p2sel,
+      p3: this.p3(),
+      detail0: detail,
+      navTop: [this.navItem('intro', '总览 Overview', '◫', '', '')],
+      navPipe: [
+        this.navItem('pipe', 'Pipeline · 管理', '▤', '', '查看 / 编辑 pipeline 定义与步骤'),
+        this.navItem('p1', 'Pipeline Record · 执行记录', '▦', '', '所有运行记录平铺 · 搜索筛选 · 展开看步骤'),
+      ],
+      navTask: [
+        this.navItem('trecord', 'Task · 任务', '▤', '', '创建任务 + 查看最近/运行中（任务一次性，跑完即止）'),
+      ],
+      showIntro: a === 'intro',
+      showP1: a === 'p1', showP2: a === 'p2', showP3: a === 'p3',
+      showT1: a === 't1', showT2: a === 't2', showT3: a === 't3',
+      showTDetail: a === 'tdetail',
+      fullTask: this.fullTaskVM(),
+      workflow: 'fortinet-mantis-bug-fix-batch',
+      runs: this.runsVM(),
+      records: this.recordsVM(),
+      topNav: this.topNavVM(),
+      mgmt: this.pipeMgmtVM(),
+      taskRec: this.taskRecVM(),
+      showMgmt: a === 'pipe',
+      showTRecord: a === 'trecord',
+      pipeTypes: this.typesVM(),
+      runsForType: this.runsForTypeVM(),
+      track: this.buildTrack(this.state.selRunId, this.state.pFocus),
+      matrix: this.matrixVM(),
+      failedRunsOnly: this.state.failedRunsOnly,
+      toggleFailedRuns: () => this.set({ failedRunsOnly: !this.state.failedRunsOnly }),
+      failToggleStyle: 'display:flex; align-items:center; gap:6px; padding:4px 9px; border-radius:6px; cursor:pointer; font-size:10.5px; border:1px solid ' + (this.state.failedRunsOnly ? '#f15b4a55' : '#22252b') + '; background:' + (this.state.failedRunsOnly ? '#f15b4a18' : 'transparent') + '; color:' + (this.state.failedRunsOnly ? '#f15b4a' : '#8b9098') + ';',
+      detail,
+      tasks: this.tasksVM(),
+      selTask: this.selTaskVM(),
+      taskSearch: this.state.taskSearch,
+      errorsOnly: this.state.errorsOnly,
+      onSearch: (e) => this.set({ taskSearch: e.target.value }),
+      clearSearch: () => this.set({ taskSearch: '' }),
+      toggleErrors: () => this.set({ errorsOnly: !this.state.errorsOnly }),
+      gotoTaskFromStep: () => this.openTaskDetail('t_applyfix'),
+      gotoPipeline: () => this.set({ active: 'p1', expandedRun: '25b1fc48', recStatus: 'all', recPipe: 'all', expandedGroups: { ...this.state.expandedGroups, bugfix: true } }),
+      showResult: this.state.t1Result, showDiff: this.state.t1Diff,
+      toggleResult: () => this.set({ t1Result: !this.state.t1Result }),
+      toggleDiff: () => this.set({ t1Diff: !this.state.t1Diff }),
+      resultChev: this.state.t1Result ? '▾' : '▸', diffChev: this.state.t1Diff ? '▾' : '▸',
+      errToggleStyle: 'display:flex; align-items:center; gap:7px; padding:6px 11px; border-radius:7px; cursor:pointer; white-space:nowrap; border:1px solid ' + (this.state.errorsOnly ? '#f15b4a55' : '#24262b') + '; background:' + (this.state.errorsOnly ? '#f15b4a18' : 'transparent') + '; color:' + (this.state.errorsOnly ? '#f15b4a' : '#9aa0a8') + ';',
+      p2Open: this.state.p2Open,
+    };
+  }
+}
+</script>
+</body>
+</html>