@preprocess-cn/nano-code-web 0.1.2

package/README.md

@@ -0,0 +1,199 @@
+# nano-code-web
+
+nano-code 的 Web 显示插件（v0.1.2）。通过 SSE（Server-Sent Events）将 nano-code 的 DisplayPlugin 事件推送到浏览器前端，提供图形化交互界面。
+
+## Architecture
+
+```
+nano-code 核心 → DisplayPlugin 事件 → display.ts → SSE → public/index.html
+```
+
+三层结构：
+
+1. **`src/server.ts`** — `NanoCodeWebServer`: HTTP + SSE 服务器
+   - `GET /events` — SSE 端点，推送实时事件
+   - `POST /input` — 接收用户输入
+   - `POST /cancel` — 取消当前请求
+   - `POST /confirm` — 处理前端授权确认（Allow/Deny）
+   - `POST /question-answer` — 处理前端问询对话框答案提交
+   - `POST /mode-toggle` — 切换 plan/normal 模式（Shift+Tab）
+   - `GET /` — 前端页面（先查找 `public/` 或 `dist/` 下同路径文件，存在即返回，否则返回 `index.html`）
+   - `GET /vendor/*` — 第三方 JS/CSS 库
+   - `GET /health` — 健康检查
+   - `GET /web-files/*` — 临时文件服务
+
+2. **`src/display.ts`** — DisplayPlugin 实现
+   - 将 nano-code 的 `onStart/onStreamChunk/onToolCall/onStatus` 等事件广播为 SSE
+   - 通过 NanoPlugin `onBeforeToolCall/onAfterToolCall` 追踪工具调用 ID
+
+3. **`public/index.html`** + **`public/app.js`** + **`public/dialog.js`** + **`public/style.css`** — 单页前端（v0.1.2 将 CSS/JS 从内联提取为独立文件）
+   - Markdown 渲染（`markdown-it` + `highlight.js` 语法高亮 + `DOMPurify` 安全消毒）
+   - 流式输出优化：debounce（150ms）+ 代码块闭合检测（``` 成对时立即渲染）
+   - 工具卡片点击展开/收拢（参数 + 返回结果）
+   - 问询对话框（`dialog.js` 模块，三屏：选择 → 自定义输入 → 确认，Esc 取消）
+   - 后台任务状态条（`background:task` 事件驱动，自动消隐）
+   - Plan mode 指示器（`● PLAN`/`○ normal`，Shift+Tab 切换）
+   - 状态栏（`status:bar` 事件驱动，显示 mode/tasks 等段落）
+   - 纯 vanilla JS，无框架依赖；第三方库（markdown-it、DOMPurify、highlight.js）通过构建脚本复制到 `dist/vendor/` 本地加载，无需 CDN
+
+## Quick Start
+
+### 构建
+
+```bash
+npm install
+npm run build
+```
+
+构建输出 `dist/display.js` + `dist/index.html` + `dist/app.js` + `dist/dialog.js` + `dist/style.css` + `dist/vendor/`（markdown-it、DOMPurify、highlight.js 运行时库）。
+
+### 配置 nano-code
+
+在 `.nano-code.yaml` 中配置：
+
+```yaml
+display:
+  plugin: ./dist/display.js
+```
+
+### 启动
+
+```bash
+nano-code
+```
+
+终端会显示 Web UI 地址（默认 `http://localhost:3030`）。启动时可配合以下参数：
+
+```bash
+nano-code --think    # 显示思考过程
+nano-code --debug    # 显示调试信息
+```
+
+## 配置选项
+
+nano-code 通过 `session:start` 事件的 `config` 对象传递配置：
+
+| 字段 | 类型 | 说明 |
+|------|------|------|
+| `showThink` | `boolean` | 是否显示 `<think>...</think>` 内容 |
+| `debug` | `boolean` | 是否显示调试事件 |
+| `greeting` | `string` | 会话欢迎语 |
+| `hasTools` | `boolean` | 是否有可用工具 |
+
+## 多标签页同步
+
+多个浏览器标签页连接同一后端时，所有页面的消息和状态保持同步：
+
+- **消息同步**：`user:input`、`stream:chunk` 等事件通过 `broadcast()` 发送给所有连接的 SSE 客户端
+- **Plan mode 同步**：切换 mode 时广播 `status:bar` 事件给所有在线客户端；新客户端连入时查询后端当前 mode 并直接推送
+- **广播健壮性**：`broadcast()` 使用倒序遍历 + try-catch 保护，单个客户端写失败不影响其他客户端，失效客户端自动移除
+
+## 事件流
+
+| SSE 事件 | 方向 | 说明 |
+|----------|------|------|
+| `session:start` | 后端 → 前端 | 新会话开始，包含配置 |
+| `session:ready` | 后端 → 前端 | 等待用户输入 |
+| `session:stop` | 后端 → 前端 | 会话结束 |
+| `stream:chunk` | 后端 → 前端 | LLM 文本输出流 |
+| `tool:call` | 后端 → 前端 | 工具调用（显示工具卡片） |
+| `tool:result` | 后端 → 前端 | 工具调用结果（更新卡片状态） |
+| `status` | 后端 → 前端 | 状态更新（thinking/end/信息） |
+| `error` | 后端 → 前端 | 错误信息 |
+| `debug` | 后端 → 前端 | 调试信息 |
+| `agent:turn_start` | 后端 → 前端 | Agent 轮次开始 |
+| `agent:turn_end` | 后端 → 前端 | Agent 轮次结束 |
+| `confirmation:request` | 后端 → 前端 | 授权确认请求（Allow/Deny） |
+| `question:dialog` | 后端 → 前端 | 问询对话框（LLM 向用户提问） |
+| `background:task` | 后端 → 前端 | 后台任务状态（started/completed/error） |
+| `status:bar` | 后端 → 前端 | 状态栏段落（mode/tasks 等） |
+| `user:input` | 后端 → 前端 | 用户输入（全局广播，用于历史重放） |
+| `cancel` | 前端 → 后端 | 取消请求（HTTP POST） |
+| `confirm` | 前端 → 后端 | 授权确认结果（HTTP POST） |
+| `question-answer` | 前端 → 后端 | 问询对话框答案提交（HTTP POST） |
+| `mode-toggle` | 前端 → 后端 | Plan mode 切换（HTTP POST） |
+
+## 关键实现细节
+
+### 前端重连与历史消息
+
+前端断开后重新打开时，后端会将已广播的历史事件（`stream:chunk`、`user:input`、`tool:call/result`、`status`、`agent:turn_start/end`、`error`）通过 `onConnect` 回调重新发送给新客户端。缓冲区上限 500 条，`/clear` 或新 session 时自动清空。
+
+配合 nano-code 的 `--continue` / `-c` 标志使用时，`restoreSession()` 会通过 DisplayPlugin 回放已保存的对话消息，nano-code-web 将其广播为 SSE 事件并同时写入历史缓冲区，前端刷新后仍可看到历史。
+
+### 广播容错
+
+`broadcast()` 使用倒序遍历 + try-catch：
+- 单个客户端写失败（连接已关闭但尚未清理）不会阻塞其他客户端
+- 失效客户端自动从广播列表移除
+
+### 工具调用双向广播
+
+工具调用事件有两条路径到达 SSE：
+
+- **NanoPlugin 路径**（`onBeforeToolCall`/`onAfterToolCall`）：使用 OpenAI 格式（`toolCall.function.name`、`toolCall.id`），是工具卡片的主要来源
+- **DisplayPlugin 路径**（`onToolCall`/`onToolResult`）：DisplayPlugin 标准事件路径，作为 NanoPlugin 的补充
+
+`ToolCallBroadcaster` 通过 ID 去重，确保同一工具调用只广播一次。
+
+### 前端渲染
+
+- 消息气泡使用 `white-space: pre-wrap` 保留换行和空白
+- 工具卡片使用 `flex-shrink: 0` 避免在长对话滚动后被 flex 布局压缩
+- `stream:chunk` 遇到纯空白块时不创建新气泡（避免工具卡片旁的空白气泡）
+
+## 开发
+
+```bash
+npm run dev    # tsc --watch 增量编译
+npm test       # 运行所有测试（70 用例）
+```
+
+### 测试
+
+```bash
+# 全部测试（单元测试 + 前端集成测试）
+npm test
+
+# Playwright 前端集成测试
+npx tsx --test tests/frontend.test.ts
+
+# 工具卡片滚动高度测试
+npx tsx --test tests/tool-card-scroll.test.ts
+```
+
+测试覆盖：
+- `tests/display.test.ts` — ThinkFilter（12 用例）+ ToolCallBroadcaster（12 用例，含历史回调）+ 环形缓冲区（9 用例）+ SSE 重放（4 用例）+ background:task（2 用例）+ question:dialog（1 用例）
+- `tests/server.test.ts` — NanoCodeWebServer（20 用例，含 question-answer / mode-toggle）
+- `tests/frontend.test.ts` — Playwright 前端渲染（9 用例）
+- `tests/tool-card-scroll.test.ts` — Playwright 滚动高度（1 用例）
+
+## 项目文件结构
+
+```
+├── src/
+│   ├── display.ts       # DisplayPlugin 实现（ThinkFilter、ToolCallBroadcaster、ask_user_question handler）
+│   ├── server.ts        # HTTP/SSE 服务器
+│   └── tool-display.ts  # 工具名/参数格式化
+├── public/
+│   ├── index.html       # 前端页面骨架
+│   ├── app.js           # 前端主逻辑（消息渲染、事件处理）
+│   ├── dialog.js        # 问询对话框模块（三屏：选择→输入→确认）
+│   └── style.css        # 前端样式表
+├── scripts/
+│   └── copy-vendor.mjs  # 构建时将 markdown-it/DOMPurify/highlight.js 复制到 dist/vendor/
+├── tests/
+│   ├── display.test.ts
+│   ├── server.test.ts
+│   ├── frontend.test.ts
+│   └── tool-card-scroll.test.ts
+├── dist/             # 构建输出（含 vendor/ 第三方库）
+├── vendor/           # highlight.js CDN 缓存（可选，构建时自动下载）
+├── .nano-code.yaml   # nano-code 插件配置
+├── README.md
+└── ROADMAP.md
+```
+
+## License
+
+MIT

package/dist/app.js

@@ -0,0 +1,432 @@
+// ── State ──
+const state = { currentMsg: null, currentRawText: '', renderTimer: null, toolCards: new Map(), connected: false, es: null, showThink: false, debug: false, toolDefinitions: [] };
+
+const $ = id => document.getElementById(id);
+const msgArea = $('messages');
+const welcomeEl = $('welcome');
+const inputEl = $('input');
+const sendBtn = $('send-btn');
+const cancelBtn = $('cancel-btn');
+const statusDot = $('status-dot');
+const statusText = $('status-text');
+const thinkingEl = $('thinking');
+
+function escapeHtml(s) {
+  const d = document.createElement('div');
+  d.textContent = s;
+  return d.innerHTML;
+}
+
+function scrollBottom() { msgArea.scrollTop = msgArea.scrollHeight; }
+
+// ── Markdown 渲染（惰性初始化，CDN defer 加载完成后可用） ──
+let _md = null;
+function getMd() {
+  if (!_md && window.markdownit) {
+    _md = window.markdownit({
+      html: false, breaks: true, linkify: false,
+      highlight(str, lang) {
+        if (lang && hljs.getLanguage(lang)) {
+          try {
+            return '<pre><code class="hljs">' + hljs.highlight(str, { language: lang, ignoreIllegals: true }).value + '</code></pre>';
+          } catch {}
+        }
+        return '<pre><code class="hljs">' + _md.utils.escapeHtml(str) + '</code></pre>';
+      },
+    });
+  }
+  return _md;
+}
+
+function renderMarkdown(text) {
+  if (!text) return '';
+  const m = getMd();
+  if (!m || !window.DOMPurify) return escapeHtml(text.replace(/\n+$/, ''));
+  return DOMPurify.sanitize(m.render(text)).replace(/\n+$/, '');
+}
+
+function scheduleRender() {
+  if (state.renderTimer) clearTimeout(state.renderTimer);
+  state.renderTimer = setTimeout(doRender, 150);
+}
+
+function doRender() {
+  state.renderTimer = null;
+  if (!state.currentMsg || !state.currentRawText) return;
+  state.currentMsg.innerHTML = renderStreaming(state.currentRawText);
+  scrollBottom();
+}
+
+function renderImmediate() {
+  if (state.renderTimer) { clearTimeout(state.renderTimer); state.renderTimer = null; }
+  doRender();
+}
+
+function renderStreaming(text) {
+  if (!text) return '';
+  const info = findIncompleteTable(text);
+  if (info) {
+    const m = getMd();
+    const beforeHtml = m && window.DOMPurify
+      ? DOMPurify.sanitize(m.render(info.before))
+      : escapeHtml(info.before);
+    return beforeHtml + '<div class="table-pending">' + escapeHtml(info.tablePart) + '</div>';
+  }
+  return renderMarkdown(text);
+}
+
+function findIncompleteTable(text) {
+  if (!/^\|[-:| ]+\|$/m.test(text)) return null;
+  const lines = text.split('\n');
+  let i = lines.length;
+  while (i--) { if (lines[i].trim()) break; }
+  if (i < 0) return null;
+  const trimmed = lines[i].trim();
+  if (!trimmed.startsWith('|') || trimmed.endsWith('|')) return null;
+  while (i >= 0 && lines[i].trim().startsWith('|')) i--;
+  const before = lines.slice(0, i + 1).join('\n');
+  const tablePart = lines.slice(i + 1).join('\n');
+  if (!/^\|[-:| ]+\|$/m.test(tablePart)) return null;
+  return { before, tablePart };
+}
+
+function toggleToolDetail(card) {
+  const detail = card.querySelector('.tool-detail');
+  const arrow = card.querySelector('.tool-arrow');
+  if (!detail) return;
+  const open = detail.classList.toggle('open');
+  arrow.textContent = open ? '▾' : '▸';
+}
+
+function addMsg(className, html) {
+  welcomeEl.classList.add('hidden');
+  msgArea.classList.add('show');
+  const el = document.createElement('div');
+  el.className = 'msg ' + className;
+  el.innerHTML = html;
+  msgArea.appendChild(el);
+  scrollBottom();
+  return el;
+}
+
+function setStatus(stateClass, text) {
+  statusDot.className = 'dot ' + stateClass;
+  statusText.textContent = text;
+}
+
+// ── Mode indicator ──
+const modeEl = $('mode-indicator');
+function updateMode(segments) {
+  const modeText = (segments?.mode || '').toLowerCase();
+  const isPlan = modeText.includes('plan');
+  if (isPlan) {
+    modeEl.className = 'show plan';
+    modeEl.textContent = '● PLAN (shift+tab)';
+    modeEl.title = 'Click or Shift+Tab to switch to normal mode';
+  } else {
+    modeEl.className = '';
+  }
+}
+async function toggleMode() {
+  try { await fetch('/mode-toggle', { method: 'POST', body: '{}' }); } catch {}
+}
+
+// ── 跨标签页输入状态同步 ──
+const syncChannel = new BroadcastChannel('nano-code-sync');
+syncChannel.onmessage = (e) => {
+  if (e.data.type === 'inputEnabled') {
+    inputEl.disabled = !e.data.enabled;
+    sendBtn.disabled = !e.data.enabled;
+  }
+};
+
+function setInputEnabled(en, broadcast = true) {
+  inputEl.disabled = !en;
+  sendBtn.disabled = !en;
+  if (en && broadcast) setTimeout(() => inputEl.focus(), 100);
+  if (broadcast) syncChannel.postMessage({ type: 'inputEnabled', enabled: en });
+}
+
+function showThinking(show) { thinkingEl.classList.toggle('show', show); }
+
+let isProcessing = false;
+function setProcessing(p) {
+  isProcessing = p;
+  cancelBtn.style.display = p ? 'block' : 'none';
+}
+
+// ── SSE connection ──
+function connect() {
+  if (state.es) state.es.close();
+  const es = new EventSource('/events');
+  state.es = es;
+
+  es.addEventListener('session:start', (e) => {
+    const d = JSON.parse(e.data);
+    msgArea.innerHTML = '';
+    msgArea.classList.remove('show');
+    welcomeEl.classList.remove('hidden');
+    state.currentMsg = null;
+    state.currentRawText = '';
+    if (state.renderTimer) { clearTimeout(state.renderTimer); state.renderTimer = null; }
+    state.toolCards.clear();
+    state.showThink = d.showThink === true;
+    state.debug = d.debug === true;
+    setStatus('connected', 'Ready');
+    setInputEnabled(true);
+    modeEl.className = '';
+    $('bg-tasks').innerHTML = '';
+    $('bg-tasks').classList.remove('show');
+    $('status-bar').innerHTML = '';
+    $('status-bar').classList.remove('show');
+  });
+
+  es.addEventListener('session:ready', () => {
+    renderImmediate();
+    setInputEnabled(true);
+    setProcessing(false);
+    showThinking(false);
+    state.currentMsg = null;
+  });
+
+  es.addEventListener('session:stop', (e) => {
+    const d = JSON.parse(e.data);
+    addMsg('system', d.message || 'Session ended');
+    setInputEnabled(false);
+    setProcessing(false);
+    showThinking(false);
+    setStatus('disconnected', 'Ended');
+    es.close();
+  });
+
+  es.addEventListener('stream:chunk', (e) => {
+    const d = JSON.parse(e.data);
+    if (!state.currentMsg) {
+      if (!d.text.trim()) return;
+      state.currentMsg = addMsg('assistant', '');
+      state.currentRawText = '';
+    }
+    state.currentRawText += d.text;
+    state.currentMsg.innerHTML = escapeHtml(state.currentRawText.replace(/\n+$/, ''));
+    scrollBottom();
+    const markers = state.currentRawText.match(/```/g);
+    if (markers && markers.length % 2 === 0 && markers.length > 0) {
+      renderImmediate();
+    } else {
+      scheduleRender();
+    }
+  });
+
+  es.addEventListener('tool:call', (e) => {
+    const d = JSON.parse(e.data);
+    renderImmediate();
+    state.currentMsg = null;
+    welcomeEl.classList.add('hidden');
+    msgArea.classList.add('show');
+    const card = document.createElement('div');
+    card.className = 'tool-card running';
+    card.dataset.toolId = d.id;
+    const toolName = d.displayName || d.toolName;
+    const argsStr = d.args && Object.keys(d.args).length > 0 ? JSON.stringify(d.args, null, 2) : '';
+    const argsPreview = d.argsPreview || '';
+    card.innerHTML = `
+      <div class="tool-card-header" onclick="toggleToolDetail(this.parentElement)">
+        <div class="tool-spinner"></div>
+        <span class="tool-name">${escapeHtml(toolName)}<span class="tool-args-preview">${escapeHtml(argsPreview)}</span></span>
+        <span class="tool-status">running</span>
+        <span class="tool-arrow">▸</span>
+      </div>
+      <div class="tool-detail">
+        ${argsStr ? `<div class="tool-section"><div class="tool-section-label">Arguments</div><pre class="tool-section-content">${escapeHtml(argsStr)}</pre></div>` : ''}
+        <div class="tool-section tool-result-section" style="display:none"><div class="tool-section-label">Result</div><pre class="tool-section-content tool-result-content"></pre></div>
+      </div>`;
+    msgArea.appendChild(card);
+    state.toolCards.set(d.id, card);
+    scrollBottom();
+  });
+
+  es.addEventListener('tool:result', (e) => {
+    const d = JSON.parse(e.data);
+    const card = state.toolCards.get(d.id);
+    if (!card) return;
+    card.classList.remove('running');
+    card.classList.add(d.status === 'success' ? 'success' : d.status === 'error' ? 'error' : 'rejected');
+    card.querySelector('.tool-status').textContent = d.status === 'success' ? 'ok' : d.status === 'error' ? (d.message || 'failed') : 'rejected';
+    const sec = card.querySelector('.tool-result-section');
+    const content = card.querySelector('.tool-result-content');
+    if (sec && content) { sec.style.display = ''; content.textContent = d.message || d.status || ''; }
+  });
+
+  es.addEventListener('tool:definitions', (e) => {
+    const d = JSON.parse(e.data);
+    state.toolDefinitions = d.definitions || [];
+  });
+
+  es.addEventListener('status', (e) => {
+    const d = JSON.parse(e.data);
+    if (d.level === 'status' && d.message === 'thinking') { if (state.showThink) showThinking(true); setProcessing(true); }
+    else if (d.level === 'status' && d.message === 'end') { renderImmediate(); showThinking(false); setProcessing(false); state.currentMsg = null; }
+    else if (d.level === 'info' || d.level === 'warn') addMsg('system', d.message);
+  });
+
+  es.addEventListener('error', (e) => {
+    const d = JSON.parse(e.data);
+    addMsg('error', 'Error: ' + escapeHtml(d.message));
+  });
+
+  es.addEventListener('debug', (e) => {
+    if (!state.debug) return;
+    const d = JSON.parse(e.data);
+    const data = typeof d.data === 'string' ? d.data : JSON.stringify(d.data, null, 2);
+    const tag = d.agentName && d.agentName !== 'main' ? `[${escapeHtml(d.agentName)}] ` : '';
+    addMsg('system', '[debug] ' + tag + escapeHtml(data));
+  });
+
+  es.addEventListener('agent:turn_start', (e) => {
+    const d = JSON.parse(e.data);
+    if (d.agentName !== 'main') addMsg('agent-badge', '&#9881; Agent: ' + escapeHtml(d.agentName));
+  });
+
+  es.addEventListener('agent:turn_end', () => { renderImmediate(); state.currentMsg = null; });
+
+  es.addEventListener('confirmation:request', (e) => {
+    const d = JSON.parse(e.data);
+    setInputEnabled(false, false);
+    msgArea.querySelectorAll('.confirm-card').forEach(el => el.remove());
+    const card = document.createElement('div');
+    card.className = 'confirm-card';
+    card.dataset.confirmId = d.id;
+    const toolLabel = escapeHtml(d.displayName || d.toolName);
+    let diffHtml = '';
+    if (d.diff && d.diff.length > 0) {
+      diffHtml = '<div class="tool-section"><div class="tool-section-label">Diff</div><div class="tool-section-content">';
+      for (const h of d.diff) {
+        for (const l of h.lines || []) {
+          const cl = l.type === 'add' ? 'color:#51cf66' : l.type === 'remove' ? 'color:#ff6b6b' : 'color:var(--text-muted)';
+          const prefix = l.type === 'add' ? '+' : l.type === 'remove' ? '-' : ' ';
+          diffHtml += `<span style="${cl}">${escapeHtml(prefix + l.content)}</span>\n`;
+        }
+      }
+      diffHtml += '</div></div>';
+    }
+    const fileHtml = d.filePath ? `<div class="confirm-details">File: ${escapeHtml(d.filePath)}</div>` : '';
+    card.innerHTML = `
+      <div class="confirm-header"><span class="confirm-icon">⚠</span><span class="confirm-title">Authorization Required</span></div>
+      <div class="confirm-tool">${toolLabel}</div>
+      <div class="confirm-message">${escapeHtml(d.message)}</div>
+      ${fileHtml}
+      ${d.details ? `<div class="confirm-details">${escapeHtml(d.details)}</div>` : ''}
+      ${diffHtml}
+      <div class="confirm-buttons">
+        <button class="confirm-btn deny">Deny</button>
+        <button class="confirm-btn allow">Allow</button>
+      </div>`;
+    const allowBtn = card.querySelector('.allow');
+    const denyBtn = card.querySelector('.deny');
+    if (allowBtn) allowBtn.addEventListener('click', () => sendConfirm(d.id, true));
+    if (denyBtn) denyBtn.addEventListener('click', () => sendConfirm(d.id, false));
+    msgArea.appendChild(card);
+    scrollBottom();
+  });
+
+  es.addEventListener('confirmation:resolved', (e) => {
+    const d = JSON.parse(e.data);
+    const card = document.querySelector(`.confirm-card[data-confirm-id="${d.id}"]`);
+    if (card) card.remove();
+  });
+
+  es.addEventListener('question:dialog', (e) => {
+    const d = JSON.parse(e.data);
+    qdOpen(d);
+  });
+
+  es.addEventListener('question:resolved', () => {
+    qdClose();
+  });
+
+  es.addEventListener('background:task', (e) => {
+    const d = JSON.parse(e.data);
+    const bar = $('bg-tasks');
+    const existing = bar.querySelector(`[data-task-id="${d.taskId}"]`);
+    if (existing) existing.remove();
+    if (d.taskStatus === 'started') {
+      const el = document.createElement('span');
+      el.className = 'bg-task';
+      el.dataset.taskId = d.taskId;
+      el.innerHTML = `<span class="dot running"></span> ${escapeHtml(d.message || d.taskId)}`;
+      bar.appendChild(el);
+    } else if (d.taskStatus === 'completed' || d.taskStatus === 'error') {
+      const el = document.createElement('span');
+      el.className = 'bg-task';
+      el.dataset.taskId = d.taskId;
+      el.innerHTML = `<span class="dot ${d.taskStatus}"></span> ${escapeHtml(d.message || d.taskId)}`;
+      bar.appendChild(el);
+      setTimeout(() => { const e2 = bar.querySelector(`[data-task-id="${d.taskId}"]`); if (e2) e2.remove(); bar.classList.toggle('show', bar.children.length > 0); }, 5000);
+    }
+    bar.classList.toggle('show', bar.children.length > 0);
+  });
+
+  es.addEventListener('status:bar', (e) => {
+    const d = JSON.parse(e.data);
+    const bar = $('status-bar');
+    bar.innerHTML = '';
+    if (d.segments && typeof d.segments === 'object') {
+      let count = 0;
+      for (const [key, value] of Object.entries(d.segments)) {
+        if (key === 'mode') continue;
+        if (value) { bar.innerHTML += `<span class="status-seg">${escapeHtml(value)}</span>`; count++; }
+      }
+      bar.classList.toggle('show', count > 0);
+    }
+    updateMode(d.segments);
+  });
+
+  es.addEventListener('user:input', (e) => {
+    const d = JSON.parse(e.data);
+    renderImmediate();
+    state.currentMsg = null;
+    addMsg('user', escapeHtml(d.text));
+  });
+
+  es.onerror = () => { setStatus('disconnected', 'Reconnecting...'); state.connected = false; setInputEnabled(false, false); };
+  es.onopen = () => { setStatus('connected', 'Connected'); state.connected = true; };
+}
+
+async function sendInput() {
+  const text = inputEl.value;
+  if (!text.trim()) return;
+  inputEl.value = '';
+  setInputEnabled(false);
+  state.currentMsg = null;
+  try {
+    const r = await fetch('/input', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ text: text.trim() }) });
+    if (!r.ok) throw new Error('HTTP ' + r.status);
+  } catch (err) {
+    addMsg('user', escapeHtml(text.trim()));
+    addMsg('error', 'Failed to send: ' + err.message);
+    setInputEnabled(true);
+  }
+}
+
+async function sendCancel() { try { await fetch('/cancel', { method: 'POST', body: '{}' }); } catch {} }
+
+async function sendConfirm(id, approved) {
+  try { await fetch('/confirm', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id, approved }) }); } catch {}
+  const card = document.querySelector(`.confirm-card[data-confirm-id="${id}"]`);
+  if (card) card.remove();
+}
+
+inputEl.addEventListener('keydown', (e) => {
+  if (e.key === 'Tab' && e.shiftKey) { e.preventDefault(); toggleMode(); return; }
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); sendInput(); }
+});
+connect();
+
+(function pollMdLibs() {
+  if (window.markdownit && window.DOMPurify) {
+    if (state.currentMsg && state.currentRawText) doRender();
+    if (window.hljs && state.currentMsg && state.currentRawText) doRender();
+    return;
+  }
+  setTimeout(pollMdLibs, 300);
+})();