@bolloon/bolloon-agent 0.1.35 → 0.1.36

package/src/web/ui/step-timeline.ts

@@ -0,0 +1,394 @@
+/**
+ * step-timeline.ts — 气泡内 4 状态步骤条 (2026-06-15)
+ *
+ * 职责 (单一):
+ *   - 给每条 AI 消息挂一个可折叠/展开的步骤条
+ *   - 状态机: idle ○ / active ● / done 🟢 / error 🔴
+ *   - 摘要条 + 详情区共用同一份 Step[] 数据
+ *   - 流式期间在 streaming 元素内, finalize 时搬到正式 message
+ *   - 折叠状态按 channel 持久化 (localStorage)
+ *
+ * 状态 (模块私有, 每个 message 一个实例):
+ *   - steps: Step[]
+ *   - currentIndex: number
+ *   - expanded: boolean  (受 localStorage 影响)
+ *
+ * 输入 (从 message-renderer 调用):
+ *   - createEmptyStepTimeline(channelId) -> HTMLElement
+ *   - mountStepTimeline(messageEl, channelId)  // 已有 message 上挂 timeline
+ *   - pushStepToTimeline(timelineEl, type, data)  // 订阅 step_start/done/error
+ *   - migrateStepTimeline(fromEl, toEl)  // finalize 时搬家
+ *
+ * 输出 (DOM):
+ *   - .step-timeline / .step-timeline-summary / .step-timeline-body
+ *   - .step-dot (摘要条圆点) / .step-timeline-node (详情区节点)
+ */
+
+// ---------------------------------------------------------------------------
+// 类型
+// ---------------------------------------------------------------------------
+export type StepStatus = 'idle' | 'active' | 'done' | 'error';
+export interface Step {
+  name: string;
+  status: StepStatus;
+  args?: Record<string, unknown>;
+  output?: string;
+  error?: string;
+  /** 该 step 对应的事件 type (供调试/扩展) */
+  eventType?: 'step_start' | 'step_done' | 'step_error';
+}
+
+const MAX_VISIBLE_NODES = 8;
+const STORAGE_PREFIX = 'bolloon.stepTimeline.expanded.';
+
+// ---------------------------------------------------------------------------
+// 模块私有状态 (按 timeline 元素实例化)
+// 用 WeakMap 避免循环引用泄漏
+// ---------------------------------------------------------------------------
+interface TimelineState {
+  steps: Step[];
+  currentIndex: number;
+  expanded: boolean;
+  channelId: string | null;
+  showAll: boolean;  // "+N 更多" 展开
+}
+const stateMap = new WeakMap<HTMLElement, TimelineState>();
+
+// ---------------------------------------------------------------------------
+// 工具: 持久化
+// ---------------------------------------------------------------------------
+function readExpanded(channelId: string | null): boolean {
+  if (!channelId) return false;
+  try {
+    return localStorage.getItem(STORAGE_PREFIX + channelId) === '1';
+  } catch { return false; }
+}
+function writeExpanded(channelId: string | null, expanded: boolean): void {
+  if (!channelId) return;
+  try {
+    localStorage.setItem(STORAGE_PREFIX + channelId, expanded ? '1' : '0');
+  } catch { /* localStorage 写失败 (隐私模式), 静默 */ }
+}
+
+// ---------------------------------------------------------------------------
+// 工具: 摘要条 title
+// ---------------------------------------------------------------------------
+function computeTitle(steps: Step[]): string {
+  if (steps.length === 0) return '执行步骤';
+  // 优先 active, 其次最后一个 error
+  const activeIdx = steps.findIndex(s => s.status === 'active');
+  if (activeIdx >= 0) return `● 执行中 · ${steps[activeIdx].name}`;
+  const lastErrorIdx = (() => {
+    for (let i = steps.length - 1; i >= 0; i--) {
+      if (steps[i].status === 'error') return i;
+    }
+    return -1;
+  })();
+  if (lastErrorIdx >= 0) return `✗ 失败 · ${steps[lastErrorIdx].name}`;
+  return `✓ 已完成 · ${steps.length} 步`;
+}
+
+// ---------------------------------------------------------------------------
+// 核心: 渲染 (摘要条 + 详情区, 共用 steps 状态)
+// ---------------------------------------------------------------------------
+function render(timelineEl: HTMLElement): void {
+  const state = stateMap.get(timelineEl);
+  if (!state) return;
+  const { steps, expanded, showAll } = state;
+
+  const titleEl = timelineEl.querySelector('[data-current-tool]') as HTMLElement | null;
+  if (titleEl) titleEl.textContent = computeTitle(steps);
+
+  // 摘要条 dots
+  const dotsEl = timelineEl.querySelector('[data-dots]') as HTMLElement | null;
+  if (dotsEl) {
+    // diff: 复用现有 dot, 多余 remove, 缺少 append
+    const existing = Array.from(dotsEl.children) as HTMLElement[];
+    for (let i = 0; i < steps.length; i++) {
+      const step = steps[i];
+      let dot = existing[i];
+      if (!dot) {
+        dot = document.createElement('span');
+        dot.className = 'step-dot';
+        dot.setAttribute('data-index', String(i));
+        dotsEl.appendChild(dot);
+      }
+      dot.setAttribute('data-status', step.status);
+      dot.setAttribute('title', `${step.name} · ${step.status}`);
+    }
+    while (dotsEl.children.length > steps.length) {
+      dotsEl.removeChild(dotsEl.lastChild!);
+    }
+  }
+
+  // 详情区 list
+  const listEl = timelineEl.querySelector('[data-list]') as HTMLElement | null;
+  if (listEl) {
+    const hiddenCount = Math.max(0, steps.length - MAX_VISIBLE_NODES);
+    const visibleSteps = showAll ? steps : steps.slice(-MAX_VISIBLE_NODES);
+    const existing = Array.from(listEl.children) as HTMLElement[];
+
+    let htmlIdx = 0;
+    // "+N 更多" 折叠行 (仅在 showAll=false 且有 hidden 时)
+    if (!showAll && hiddenCount > 0) {
+      let moreBtn = existing[htmlIdx] as HTMLElement | undefined;
+      if (!moreBtn || !moreBtn.classList.contains('step-timeline-more')) {
+        moreBtn = document.createElement('li');
+        moreBtn.className = 'step-timeline-more';
+        moreBtn.setAttribute('role', 'button');
+        moreBtn.textContent = `+ ${hiddenCount} 更多`;
+        moreBtn.onclick = () => {
+          state.showAll = true;
+          render(timelineEl);
+        };
+        if (existing[htmlIdx] && existing[htmlIdx] !== moreBtn) {
+          listEl.replaceChild(moreBtn, existing[htmlIdx]);
+        } else {
+          listEl.appendChild(moreBtn);
+        }
+      } else {
+        moreBtn.textContent = `+ ${hiddenCount} 更多`;
+      }
+      htmlIdx++;
+    }
+
+    for (let i = 0; i < visibleSteps.length; i++) {
+      const step = visibleSteps[i];
+      const realIndex = showAll ? i : (steps.length - visibleSteps.length + i);
+      let node = existing[htmlIdx];
+      if (!node || !node.classList.contains('step-timeline-node')) {
+        node = document.createElement('li');
+        node.className = 'step-timeline-node';
+        node.setAttribute('data-index', String(realIndex));
+        const marker = document.createElement('span');
+        marker.className = 'step-timeline-marker';
+        const label = document.createElement('span');
+        label.className = 'step-timeline-label';
+        const args = document.createElement('span');
+        args.className = 'step-timeline-args';
+        node.appendChild(marker);
+        node.appendChild(label);
+        node.appendChild(args);
+        if (existing[htmlIdx] && existing[htmlIdx] !== node) {
+          listEl.replaceChild(node, existing[htmlIdx]);
+        } else {
+          listEl.appendChild(node);
+        }
+      } else {
+        node.setAttribute('data-index', String(realIndex));
+      }
+      node.setAttribute('data-status', step.status);
+      const label = node.querySelector('.step-timeline-label') as HTMLElement;
+      if (label) label.textContent = step.name;
+      const argsEl = node.querySelector('.step-timeline-args') as HTMLElement;
+      if (argsEl) {
+        const argStr = step.args && Object.keys(step.args).length > 0
+          ? JSON.stringify(step.args).slice(0, 60)
+          : '';
+        argsEl.textContent = argStr;
+        argsEl.style.display = argStr ? '' : 'none';
+      }
+      htmlIdx++;
+    }
+
+    // 清理多余 li
+    while (listEl.children.length > htmlIdx) {
+      listEl.removeChild(listEl.lastChild!);
+    }
+  }
+
+  // 折叠态: 空状态显示占位, 有节点就保持
+  if (steps.length === 0) {
+    timelineEl.setAttribute('data-empty', 'true');
+  } else {
+    timelineEl.removeAttribute('data-empty');
+  }
+  // 折叠 class
+  const body = timelineEl.querySelector('[data-body]') as HTMLElement | null;
+  if (body) {
+    if (expanded) {
+      body.style.maxHeight = body.scrollHeight + 'px';
+      setTimeout(() => {
+        // 动画结束后清掉, 让内容自适应 (新 step 进来时能撑开)
+        if (state.expanded) body.style.maxHeight = '';
+      }, 300);
+    } else {
+      body.style.maxHeight = '0';
+    }
+  }
+  const arrow = timelineEl.querySelector('.step-timeline-arrow') as HTMLElement | null;
+  if (arrow) arrow.style.transform = expanded ? 'rotate(180deg)' : 'rotate(0deg)';
+
+  // 自动滚到底 (新节点进来时, 详情区跟到底)
+  if (expanded && listEl) {
+    listEl.scrollTop = listEl.scrollHeight;
+  }
+}
+
+// ---------------------------------------------------------------------------
+// 公共: 创建一个空 timeline (AI 消息创建时挂的占位)
+// ---------------------------------------------------------------------------
+export function createEmptyStepTimeline(channelId: string | null = null): HTMLElement {
+  const root = document.createElement('div');
+  root.className = 'step-timeline';
+  root.setAttribute('data-step-timeline', '');
+  root.setAttribute('data-empty', 'true');
+
+  // 摘要条
+  const summary = document.createElement('div');
+  summary.className = 'step-timeline-summary';
+  summary.setAttribute('data-summary', '');
+  const titleSpan = document.createElement('span');
+  titleSpan.className = 'step-timeline-title';
+  const titleContent = document.createElement('span');
+  titleContent.setAttribute('data-current-tool', '');
+  titleContent.textContent = '执行步骤';
+  titleSpan.appendChild(titleContent);
+  const dots = document.createElement('div');
+  dots.className = 'step-timeline-dots';
+  dots.setAttribute('data-dots', '');
+  const arrow = document.createElement('span');
+  arrow.className = 'step-timeline-arrow';
+  arrow.textContent = '▾';
+  summary.appendChild(titleSpan);
+  summary.appendChild(dots);
+  summary.appendChild(arrow);
+  summary.onclick = () => {
+    const state = stateMap.get(root);
+    if (!state) return;
+    state.expanded = !state.expanded;
+    writeExpanded(state.channelId, state.expanded);
+    render(root);
+  };
+
+  // 详情区
+  const body = document.createElement('div');
+  body.className = 'step-timeline-body';
+  body.setAttribute('data-body', '');
+  const list = document.createElement('ul');
+  list.className = 'step-timeline-list';
+  list.setAttribute('data-list', '');
+  body.appendChild(list);
+
+  root.appendChild(summary);
+  root.appendChild(body);
+
+  // 初始折叠态
+  const initialExpanded = readExpanded(channelId);
+  stateMap.set(root, {
+    steps: [],
+    currentIndex: -1,
+    expanded: initialExpanded,
+    channelId: channelId || null,
+    showAll: false,
+  });
+  render(root);
+  return root;
+}
+
+// ---------------------------------------------------------------------------
+// 公共: 把 timeline 挂到 message 上 (初始化或补挂)
+// ---------------------------------------------------------------------------
+export function mountStepTimeline(messageEl: HTMLElement, channelId: string | null): HTMLElement {
+  // 已经挂过 → 复用
+  const existing = messageEl.querySelector('[data-step-timeline]') as HTMLElement | null;
+  if (existing) {
+    const state = stateMap.get(existing);
+    if (state && channelId && !state.channelId) state.channelId = channelId;
+    return existing;
+  }
+  // 找插入点: 在 .bubble 之后, .message-actions 之前
+  const bubble = messageEl.querySelector('.bubble');
+  const actions = messageEl.querySelector('.message-actions');
+  const timeline = createEmptyStepTimeline(channelId);
+  if (actions && actions.parentNode === messageEl) {
+    messageEl.insertBefore(timeline, actions);
+  } else if (bubble && bubble.parentNode === messageEl) {
+    bubble.parentNode.insertBefore(timeline, bubble.nextSibling);
+  } else {
+    messageEl.appendChild(timeline);
+  }
+  return timeline;
+}
+
+// ---------------------------------------------------------------------------
+// 公共: 推一个 step 事件 (start/done/error)
+// ---------------------------------------------------------------------------
+export function pushStepToTimeline(
+  timelineEl: HTMLElement,
+  eventType: 'step_start' | 'step_done' | 'step_error',
+  data: { tool: string; args?: Record<string, unknown>; success?: boolean; output?: string; error?: string }
+): void {
+  const state = stateMap.get(timelineEl);
+  if (!state) return;
+  const { steps } = state;
+
+  if (eventType === 'step_start') {
+    state.currentIndex = steps.length;
+    steps.push({
+      name: data.tool,
+      status: 'active',
+      args: data.args,
+      eventType,
+    });
+  } else {
+    // step_done / step_error — 找当前 active 节点关闭
+    // 优先匹配 currentIndex, 其次回退到最后一个 active
+    let targetIdx = state.currentIndex;
+    if (targetIdx < 0 || !steps[targetIdx] || steps[targetIdx].name !== data.tool) {
+      // 兜底: 找最后一个同名 active
+      for (let i = steps.length - 1; i >= 0; i--) {
+        if (steps[i].name === data.tool && steps[i].status === 'active') {
+          targetIdx = i;
+          break;
+        }
+      }
+    }
+    if (targetIdx < 0) {
+      // 没有 active 节点匹配, 当作新 error 节点
+      targetIdx = steps.length;
+      steps.push({ name: data.tool, status: 'error', eventType });
+    }
+    if (eventType === 'step_done') {
+      steps[targetIdx].status = data.success === false ? 'error' : 'done';
+      if (data.output) steps[targetIdx].output = data.output;
+      if (data.error) steps[targetIdx].error = data.error;
+    } else {
+      steps[targetIdx].status = 'error';
+      if (data.error) steps[targetIdx].error = data.error;
+    }
+    steps[targetIdx].eventType = eventType;
+    state.currentIndex = -1;
+  }
+  render(timelineEl);
+}
+
+// ---------------------------------------------------------------------------
+// 公共: finalize 时把 timeline 元素从 from 搬到 to (避免重渲)
+// 接受 timelineEl 本身或 fromEl 内部的 timeline
+// ---------------------------------------------------------------------------
+export function migrateStepTimeline(fromEl: HTMLElement, toEl: HTMLElement): void {
+  const fromTimeline = fromEl.querySelector('[data-step-timeline]') as HTMLElement | null;
+  const toTimeline = toEl.querySelector('[data-step-timeline]') as HTMLElement | null;
+  if (!fromTimeline) return;
+  // 移除 toEl 的占位, 搬 fromEl 的过来
+  if (toTimeline && toTimeline !== fromTimeline) {
+    toTimeline.remove();
+  }
+  if (toTimeline !== fromTimeline) {
+    toEl.appendChild(fromTimeline);
+  }
+  // 重渲一次 (channelId 注入)
+  const state = stateMap.get(fromTimeline);
+  if (state) {
+    render(fromTimeline);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// 公共: 拿到一个 message 内的 timeline (无则返回 null)
+// ---------------------------------------------------------------------------
+export function getStepTimeline(messageEl: HTMLElement | null): HTMLElement | null {
+  if (!messageEl) return null;
+  return messageEl.querySelector('[data-step-timeline]') as HTMLElement | null;
+}

package/test-results/.last-run.json

@@ -0,0 +1,6 @@
+{
+  "status": "failed",
+  "failedTests": [
+    "5a05f24c2683c4708372-34e7e529a0f74bad57a0"
+  ]
+}

package/test-results/src-test-web-loop-status-b-5734c-atus-bar-/346/230/276/347/244/272-spinner-/344/270/215/346/230/276/347/244/272/345/276/252/347/216/257/350/256/241/346/225/260/error-context.md

@@ -0,0 +1,285 @@
+# Instructions
+
+- Following Playwright test failed.
+- Explain why, be concise, respect Playwright best practices.
+- Provide a snippet of code with the fix, if possible.
+
+# Test info
+
+- Name: src/test/web-loop-status-bar.spec.ts >> loop-status-bar 三态机 >> 1. loading 态: status bar 显示 spinner, 不显示循环计数
+- Location: src/test/web-loop-status-bar.spec.ts:149:3
+
+# Error details
+
+```
+Error: expect(locator).toBeVisible() failed
+
+Locator:  locator('#loop-status-bar')
+Expected: visible
+Received: hidden
+Timeout:  5000ms
+
+Call log:
+  - Expect "toBeVisible" with timeout 5000ms
+  - waiting for locator('#loop-status-bar')
+    14 × locator resolved to <div hidden="" id="loop-status-bar" data-state="loading" class="loop-status-bar">…</div>
+       - unexpected value "hidden"
+
+```
+
+```yaml
+- complementary:
+  - button "收起侧边栏":
+    - img
+  - text: ◈ Bolloon 智能体
+  - button "新建智能体":
+    - img
+    - text: 新建智能体
+  - list:
+    - listitem:
+      - img
+      - text: 💬 Loop Bar Channel
+      - button "配置智能体 (钱包 / 工具)":
+        - img
+      - button "×"
+      - list
+  - text: ▼ P2P 好友
+  - button "⊞ 展开"
+  - button "我的 ID"
+  - button "+ 好友"
+  - list:
+    - listitem: (暂无好友, 点 + 添加)
+  - text: 已连接
+- main:
+  - heading "Loop Bar Channel" [level=1]
+  - button "切换主题":
+    - img
+  - button "API 配置":
+    - img
+  - button "钱包管理":
+    - img
+  - button "我的判断":
+    - img
+  - text: 你好！我是 Bolloon Agent。有什么我可以帮你的吗？ 执行步骤 ▾
+  - list
+  - button "复制":
+    - img
+    - text: 复制
+  - button "蒸馏为判断":
+    - img
+    - text: 蒸馏为判断
+  - button "重新回答":
+    - img
+    - text: 重新回答
+  - text: 16:53
+  - textbox "输入消息..."
+  - button "发送 (Enter)":
+    - img
+```
+
+# Test source
+
+```ts
+  69  |   const safePath = pathname === '/' ? '/index.html' : pathname;
+  70  |   const filePath = path.join(WEB_ROOT, safePath);
+  71  |   if (!filePath.startsWith(WEB_ROOT)) {
+  72  |     res.writeHead(403);
+  73  |     res.end('Forbidden');
+  74  |     return;
+  75  |   }
+  76  |   try {
+  77  |     const body = await readFile(filePath);
+  78  |     const ext = path.extname(filePath);
+  79  |     res.writeHead(200, { 'Content-Type': contentTypes[ext] || 'application/octet-stream' });
+  80  |     res.end(body);
+  81  |   } catch {
+  82  |     res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' });
+  83  |     res.end('Not found');
+  84  |   }
+  85  | }
+  86  | 
+  87  | type MockServer = { server: ReturnType<typeof createServer>; clients: Set<SseClient>; port: number };
+  88  | 
+  89  | function startMockServer(extraSetup?: (clients: Set<SseClient>) => void): Promise<MockServer> {
+  90  |   const clients = new Set<SseClient>();
+  91  |   const server = createServer(async (req, res) => {
+  92  |     const url = new URL(req.url || '/', `http://localhost`);
+  93  |     const pathname = url.pathname;
+  94  | 
+  95  |     if (pathname === '/events' || pathname.startsWith('/events')) {
+  96  |       const channelId = url.searchParams.get('channelId') || CHANNEL_ID;
+  97  |       sse(res);
+  98  |       const client: SseClient = { channelId, res };
+  99  |       clients.add(client);
+  100 |       req.on('close', () => clients.delete(client));
+  101 |       setTimeout(() => writeEvent(client, { type: 'ping' }), 100);
+  102 |       return;
+  103 |     }
+  104 | 
+  105 |     if (pathname === '/channels') return json(res, [defaultChannel]);
+  106 |     if (pathname === `/channels/${CHANNEL_ID}/sessions`) {
+  107 |       return json(res, { session: { id: 'sess-1' }, currentSessionId: 'sess-1' });
+  108 |     }
+  109 |     if (pathname === '/theme') return json(res, { theme: 'dark', agentId: 'agent_loop' });
+  110 |     if (pathname === '/api/remote-channels') return json(res, { peers: [] });
+  111 |     if (pathname.startsWith('/sessions/')) {
+  112 |       res.writeHead(200, { 'Content-Type': 'application/json' });
+  113 |       return res.end(JSON.stringify({ ok: true }));
+  114 |     }
+  115 |     if (pathname === '/api/loop/inspect') {
+  116 |       return json(res, {
+  117 |         summary: 'loop 完成 (mock): 跑了 3 个步骤',
+  118 |         steps: [
+  119 |           { name: 'shell_exec: echo 1', status: 'ok', durationMs: 320, output: '1' },
+  120 |           { name: 'shell_exec: echo 2', status: 'ok', durationMs: 280, output: '2' },
+  121 |           { name: 'shell_exec: echo 3', status: 'ok', durationMs: 250, output: '3' },
+  122 |         ],
+  123 |         finalReply: '已完成 3 步',
+  124 |         tokens: { input: 1200, output: 80 },
+  125 |       });
+  126 |     }
+  127 |     if (pathname === '/message' && req.method === 'POST') {
+  128 |       let body = '';
+  129 |       req.on('data', (chunk) => { body += chunk; });
+  130 |       req.on('end', () => json(res, { ok: true, reply: 'mock' }));
+  131 |       return;
+  132 |     }
+  133 | 
+  134 |     return serveStatic(res, pathname);
+  135 |   });
+  136 | 
+  137 |   if (extraSetup) extraSetup(clients);
+  138 | 
+  139 |   return new Promise<MockServer>((resolve) => {
+  140 |     server.listen(0, '127.0.0.1', () => {
+  141 |       const addr = server.address();
+  142 |       const port = typeof addr === 'object' && addr ? addr.port : 0;
+  143 |       resolve({ server, clients, port });
+  144 |     });
+  145 |   });
+  146 | }
+  147 | 
+  148 | test.describe.serial('loop-status-bar 三态机', () => {
+  149 |   test('1. loading 态: status bar 显示 spinner, 不显示循环计数', async () => {
+  150 |     const { server, port } = await startMockServer((clients) => {
+  151 |       setTimeout(() => {
+  152 |         const ch = [...clients].find((c) => c.channelId === CHANNEL_ID);
+  153 |         if (!ch) return;
+  154 |         writeEvent(ch, { channelId: CHANNEL_ID, type: 'status', tool: 'system', content: '🔄 开始 ReAct 循环...' });
+  155 |       }, 500);
+  156 |     });
+  157 |     try {
+  158 |       const { chromium } = await import('@playwright/test');
+  159 |       const ctx = await chromium.launch();
+  160 |       const page = await ctx.newPage();
+  161 |       page.on('console', (msg) => {
+  162 |         if (msg.type() === 'error') console.log('[test1 console err]', msg.text());
+  163 |       });
+  164 |       await page.goto(`http://127.0.0.1:${port}/`);
+  165 |       await page.waitForSelector('#input', { timeout: 5000 }).catch(() => {});
+  166 |       await page.waitForTimeout(2500);
+  167 | 
+  168 |       const bar = page.locator('#loop-status-bar');
+> 169 |       await expect(bar).toBeVisible();
+      |                         ^ Error: expect(locator).toBeVisible() failed
+  170 |       await expect(bar).toHaveAttribute('data-state', 'loading');
+  171 |       const text = await bar.textContent();
+  172 |       expect(text).not.toMatch(/\d+\/\d+/);
+  173 |       await ctx.close();
+  174 |     } finally {
+  175 |       server.close();
+  176 |     }
+  177 |   });
+  178 | 
+  179 |   test('2. retrying 态: 自动重试徽章出现, 无重试按钮', async () => {
+  180 |     const { server, port } = await startMockServer((clients) => {
+  181 |       setTimeout(() => {
+  182 |         const ch = [...clients].find((c) => c.channelId === CHANNEL_ID);
+  183 |         if (!ch) return;
+  184 |         writeEvent(ch, { channelId: CHANNEL_ID, type: 'status', tool: 'system', content: '↻ 自动重试 loop 1/3 (1s 后)' });
+  185 |       }, 800);
+  186 |     });
+  187 |     try {
+  188 |       const { chromium } = await import('@playwright/test');
+  189 |       const ctx = await chromium.launch();
+  190 |       const page = await ctx.newPage();
+  191 |       page.on('console', (msg) => {
+  192 |         if (msg.type() === 'error') console.log('[test2 console err]', msg.text());
+  193 |       });
+  194 |       await page.goto(`http://127.0.0.1:${port}/`);
+  195 |       await page.waitForSelector('#input', { timeout: 5000 }).catch(() => {});
+  196 |       await page.waitForTimeout(2500);
+  197 | 
+  198 |       const bar = page.locator('#loop-status-bar');
+  199 |       await expect(bar).toHaveAttribute('data-state', 'retrying');
+  200 | 
+  201 |       const retry = page.locator('#loop-status-retry');
+  202 |       await expect(retry).toBeVisible();
+  203 |       const retryText = await retry.textContent();
+  204 |       expect(retryText).toMatch(/自动重试\s+1\/3/);
+  205 | 
+  206 |       const tagName = await retry.evaluate((el) => el.tagName.toLowerCase());
+  207 |       expect(tagName).toBe('span');
+  208 |       await ctx.close();
+  209 |     } finally {
+  210 |       server.close();
+  211 |     }
+  212 |   });
+  213 | 
+  214 |   test('3. done 态: 检查按钮出现, 重试徽章隐藏', async () => {
+  215 |     const { server, port } = await startMockServer((clients) => {
+  216 |       setTimeout(() => {
+  217 |         const ch = [...clients].find((c) => c.channelId === CHANNEL_ID);
+  218 |         if (!ch) return;
+  219 |         writeEvent(ch, { channelId: CHANNEL_ID, type: 'status', tool: 'system', content: '🔄 循环中' });
+  220 |         setTimeout(() => {
+  221 |           writeEvent(ch, { channelId: CHANNEL_ID, type: 'done', content: '' });
+  222 |         }, 600);
+  223 |       }, 800);
+  224 |     });
+  225 |     try {
+  226 |       const { chromium } = await import('@playwright/test');
+  227 |       const ctx = await chromium.launch();
+  228 |       const page = await ctx.newPage();
+  229 |       page.on('console', (msg) => {
+  230 |         if (msg.type() === 'error') console.log('[test3 console err]', msg.text());
+  231 |       });
+  232 |       await page.goto(`http://127.0.0.1:${port}/`);
+  233 |       await page.waitForSelector('#input', { timeout: 5000 }).catch(() => {});
+  234 |       await page.waitForTimeout(2500);
+  235 | 
+  236 |       const bar = page.locator('#loop-status-bar');
+  237 |       await expect(bar).toHaveAttribute('data-state', 'done');
+  238 | 
+  239 |       const checkBtn = page.locator('#loop-status-check');
+  240 |       await expect(checkBtn).toBeVisible();
+  241 |       await expect(checkBtn).toHaveText(/检查/);
+  242 | 
+  243 |       const retry = page.locator('#loop-status-retry');
+  244 |       await expect(retry).toBeHidden();
+  245 |       await ctx.close();
+  246 |     } finally {
+  247 |       server.close();
+  248 |     }
+  249 |   });
+  250 | 
+  251 |   test('4. 点检查按钮 → 弹 modal 列出 step 输出', async () => {
+  252 |     const { server, port } = await startMockServer((clients) => {
+  253 |       setTimeout(() => {
+  254 |         const ch = [...clients].find((c) => c.channelId === CHANNEL_ID);
+  255 |         if (!ch) return;
+  256 |         writeEvent(ch, { channelId: CHANNEL_ID, type: 'status', tool: 'system', content: '🔄 循环中' });
+  257 |         setTimeout(() => {
+  258 |           writeEvent(ch, { channelId: CHANNEL_ID, type: 'done', content: '' });
+  259 |         }, 600);
+  260 |       }, 800);
+  261 |     });
+  262 |     try {
+  263 |       const { chromium } = await import('@playwright/test');
+  264 |       const ctx = await chromium.launch();
+  265 |       const page = await ctx.newPage();
+  266 |       page.on('console', (msg) => {
+  267 |         if (msg.type() === 'error') console.log('[test4 console err]', msg.text());
+  268 |       });
+  269 |       await page.goto(`http://127.0.0.1:${port}/`);
+```