@vincentbanana/bananacli 0.3.0 → 0.4.0

package/dist/ui/app.js

@@ -0,0 +1,1253 @@
+// Banana GUI：零依赖前端。只用自绘 SVG 图标，无 emoji，无第三方 UI。
+// 注意结尾斜杠：API 是前缀，所有请求都直接拼名字（如 API + 'action'）
+const API = location.pathname.replace(/\/+$/, '') + '/api/';
+
+// ---------------- 自绘图标 ----------------
+const ICONS = {
+  plus: '<path d="M12 5v14M5 12h14"/>',
+  send: '<path d="M12 19V5M6 11l6-6 6 6"/>',
+  stop: '<rect x="7" y="7" width="10" height="10" rx="1.5"/>',
+  chip: '<rect x="7" y="7" width="10" height="10" rx="2"/><path d="M10 4v3M14 4v3M10 17v3M14 17v3M4 10h3M4 14h3M17 10h3M17 14h3"/>',
+  sliders: '<path d="M4 8h8M16 8h4M4 16h4M12 16h8"/><circle cx="14" cy="8" r="2"/><circle cx="10" cy="16" r="2"/>',
+  undo: '<path d="M9 8H4m0 0 3.5-3.5M4 8h9a6 6 0 0 1 0 12h-4"/>',
+  trash: '<path d="M5 7h14M10 7V5h4v2M7 7l1 13h8l1-13"/>',
+  x: '<path d="M6 6l12 12M18 6 6 18"/>',
+  shield: '<path d="M12 3.5l7 2.5V12c0 4.2-2.9 7.4-7 8.5-4.1-1.1-7-4.3-7-8.5V6z"/>',
+  file: '<path d="M9 3.5h5l4.5 4.5v12.5H9z"/><path d="M14 3.5V8h4.5"/>',
+  terminal: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M7 10l2.5 2L7 14M12.5 14.5H16"/>',
+  search: '<circle cx="11" cy="11" r="6"/><path d="M15.5 15.5 20 20"/>',
+  globe: '<circle cx="12" cy="12" r="8"/><path d="M4 12h16M12 4c2.4 2.4 2.4 13.6 0 16-2.4-2.4-2.4-13.6 0-16z"/>',
+  list: '<path d="M4 6h16M4 12h16M4 18h10"/>',
+  pencil: '<path d="M4 20l1-4.5L16.5 4l3.5 3.5L8.5 19z"/>',
+  image: '<rect x="4" y="5" width="16" height="14" rx="2"/><circle cx="9" cy="10" r="1.5"/><path d="M5 17l4.5-4.5L13 16l3-3 4 4"/>',
+  check: '<path d="M5 12.5l4.5 4.5L19 7"/>',
+  folder: '<path d="M4 6.5h5.5L12 9h8v10.5H4z"/>',
+  message: '<path d="M4 5.5h16v11H9.5L4 20z"/>',
+  listCheck: '<path d="M4 7h10M4 12h10M4 17h6M17 15.5l1.5 1.5L22 13"/>',
+  dots: '<circle cx="6" cy="12" r="1.4"/><circle cx="12" cy="12" r="1.4"/><circle cx="18" cy="12" r="1.4"/>',
+  panel: '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M14 5v14"/>',
+  chevron: '<path d="M9 6l6 6-6 6"/>',
+  download: '<path d="M12 4v10M8 11l4 4 4-4M5 19h14"/>',
+  sun: '<circle cx="12" cy="12" r="4"/><path d="M12 3v2M12 19v2M3 12h2M19 12h2M5.6 5.6l1.4 1.4M17 17l1.4 1.4M18.4 5.6L17 7M7 17l-1.4 1.4"/>',
+  moon: '<path d="M20 14.5A8 8 0 019.5 4a8 8 0 1010.5 10.5z"/>',
+  contrast: '<circle cx="12" cy="12" r="8"/><path d="M12 4v16"/><path d="M12 4a8 8 0 010 16" fill="currentColor" stroke="none"/>',
+};
+
+const TOOL_ICON = {
+  read_file: 'file', write_file: 'pencil', edit_file: 'pencil', list_dir: 'folder',
+  glob: 'search', grep: 'search', shell: 'terminal', web_search: 'globe',
+  web_fetch: 'globe', todo_write: 'listCheck', todo_read: 'listCheck',
+};
+
+function svg(name) {
+  return `<svg viewBox="0 0 24 24" aria-hidden="true">${ICONS[name] ?? ICONS.file}</svg>`;
+}
+
+const $ = (id) => document.getElementById(id);
+
+// ---------------- Markdown（够用即可） ----------------
+const escapeHtml = (text) =>
+  text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+function inline(text) {
+  return escapeHtml(text)
+    .replace(/`([^`\n]+)`/g, '<code>$1</code>')
+    .replace(/\*\*([^*\n]+)\*\*/g, '<strong>$1</strong>')
+    .replace(/(^|[\s(])\*([^*\n]+)\*/g, '$1<em>$2</em>')
+    .replace(/\[([^\]\n]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noreferrer">$1</a>');
+}
+
+function markdown(source) {
+  const lines = source.replace(/\r\n/g, '\n').split('\n');
+  const out = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    if (/^```/.test(line)) {
+      const lang = line.slice(3).trim();
+      const body = [];
+      i += 1;
+      while (i < lines.length && !/^```/.test(lines[i])) { body.push(lines[i]); i += 1; }
+      i += 1;
+      out.push(`<pre class="code"><code data-lang="${escapeHtml(lang)}">${escapeHtml(body.join('\n'))}</code></pre>`);
+      continue;
+    }
+    if (/^\s*$/.test(line)) { i += 1; continue; }
+    if (/^###\s/.test(line)) { out.push(`<h3>${inline(line.replace(/^###\s/, ''))}</h3>`); i += 1; continue; }
+    if (/^##\s/.test(line)) { out.push(`<h2>${inline(line.replace(/^##\s/, ''))}</h2>`); i += 1; continue; }
+    if (/^#\s/.test(line)) { out.push(`<h1>${inline(line.replace(/^#\s/, ''))}</h1>`); i += 1; continue; }
+    if (/^\s*[-*]\s/.test(line)) {
+      const items = [];
+      while (i < lines.length && /^\s*[-*]\s/.test(lines[i])) { items.push(lines[i].replace(/^\s*[-*]\s/, '')); i += 1; }
+      out.push(`<ul>${items.map((item) => `<li>${inline(item)}</li>`).join('')}</ul>`);
+      continue;
+    }
+    if (/^\s*\d+\.\s/.test(line)) {
+      const items = [];
+      while (i < lines.length && /^\s*\d+\.\s/.test(lines[i])) { items.push(lines[i].replace(/^\s*\d+\.\s/, '')); i += 1; }
+      out.push(`<ol>${items.map((item) => `<li>${inline(item)}</li>`).join('')}</ol>`);
+      continue;
+    }
+    if (/^>\s?/.test(line)) {
+      const items = [];
+      while (i < lines.length && /^>\s?/.test(lines[i])) { items.push(lines[i].replace(/^>\s?/, '')); i += 1; }
+      out.push(`<blockquote>${items.map((item) => inline(item)).join('<br/>')}</blockquote>`);
+      continue;
+    }
+    const para = [line];
+    i += 1;
+    while (i < lines.length && !/^(`|#{1,3}\s|>\s?|\s*[-*]\s|\s*\d+\.\s)/.test(lines[i]) && !/^\s*$/.test(lines[i])) {
+      para.push(lines[i]);
+      i += 1;
+    }
+    out.push(`<p>${inline(para.join(' '))}</p>`);
+  }
+  return out.join('');
+}
+
+// ---------------- 状态 ----------------
+const state = { info: null, sessions: [], attachments: [], busy: false, pendingApproval: null };
+
+const THREAD = $('thread');
+
+// ---------------- 渲染 ----------------
+function hydrate(root = document) {
+  root.querySelectorAll('[data-icon]').forEach((node) => {
+    if (node.dataset.iconDone) return;
+    node.innerHTML = svg(node.dataset.icon);
+    node.dataset.iconDone = '1';
+  });
+}
+
+function relativeTime(iso) {
+  if (!iso) return '';
+  const diff = Date.now() - new Date(iso).getTime();
+  const minutes = Math.round(diff / 60000);
+  if (minutes < 1) return '刚刚';
+  if (minutes < 60) return `${minutes} 分钟前`;
+  const hours = Math.round(minutes / 60);
+  if (hours < 24) return `${hours} 小时前`;
+  return `${Math.round(hours / 24)} 天前`;
+}
+
+/** 窄屏下侧边栏是覆盖层，选完会话必须收起来，否则挡住对话。 */
+function closeSidebarIfOverlay() {
+  if (window.matchMedia('(max-width: 900px)').matches) $('sidebar').classList.remove('open');
+}
+
+function renderSidebar() {
+  const list = $('sessionList');
+  list.innerHTML = '';
+  for (const item of state.sessions) {
+    const active = item.id === state.info?.session?.id ? ' is-active' : '';
+    const node = document.createElement('div');
+    node.className = `session-item${active}`;
+    node.innerHTML =
+      `<span class="s-actions">` +
+      `<span class="s-act" data-menu="${item.id}" title="更多">${svg('dots')}</span>` +
+      `<span class="s-act" data-del="${item.id}" title="删除">${svg('trash')}</span>` +
+      `</span>` +
+      `<span class="s-title">${escapeHtml(item.title || '新对话')}</span>` +
+      `<span class="s-meta">${item.turns} 轮 · ${relativeTime(item.updatedAt)}</span>`;
+
+    node.addEventListener('click', (event) => {
+      if (event.target.closest('[data-del], [data-menu]')) return;
+      post('session', { action: 'switch', ref: item.id }).then(() => {
+        refresh(true);
+        closeSidebarIfOverlay();
+      });
+    });
+
+    node.querySelector('[data-del]').addEventListener('click', (event) => {
+      event.stopPropagation();
+      post('session', { action: 'delete', ref: item.id }).then(() => refresh(true));
+    });
+
+    node.querySelector('[data-menu]').addEventListener('click', (event) => {
+      event.stopPropagation();
+      openSessionMenu(item, node);
+    });
+    list.appendChild(node);
+  }
+}
+
+/** 会话操作菜单：切换 / 重命名 / 导出 Markdown / 导出 JSON */
+function openSessionMenu(item, anchor) {
+  document.querySelector('.popover')?.remove();
+  const rect = anchor.getBoundingClientRect();
+  const pop = document.createElement('div');
+  pop.className = 'popover';
+  pop.innerHTML = `
+    <button data-act="switch">切换到这一轮</button>
+    <button data-act="rename">重命名</button>
+    <button data-act="md">导出 Markdown</button>
+    <button data-act="json">导出 JSON</button>`;
+  document.body.appendChild(pop);
+  // 先量再定位：贴着按钮右边缘，并且始终留在视口内
+  pop.style.visibility = 'hidden';
+  pop.style.left = '0px';
+  pop.style.top = '0px';
+  const width = pop.offsetWidth;
+  const height = pop.offsetHeight;
+  const left = Math.max(8, Math.min(rect.right - width, window.innerWidth - width - 8));
+  const top = rect.bottom + height > window.innerHeight - 8 ? Math.max(8, rect.top - height - 4) : rect.bottom + 4;
+  pop.style.left = `${left}px`;
+  pop.style.top = `${top}px`;
+  pop.style.visibility = '';
+
+  const close = () => {
+    pop.remove();
+    document.removeEventListener('click', close, true);
+  };
+  document.addEventListener('click', close, true);
+
+  pop.addEventListener('click', async (event) => {
+    const action = event.target.closest('[data-act]')?.dataset.act;
+    if (!action) return;
+    event.stopPropagation();
+    close();
+    if (action === 'switch') {
+      await post('session', { action: 'switch', ref: item.id });
+      await refresh(true);
+      closeSidebarIfOverlay();
+    } else if (action === 'rename') {
+      const title = prompt('新的标题', item.title || '');
+      if (title && title.trim()) {
+        await post('session', { action: 'switch', ref: item.id });
+        await post('session', { action: 'rename', title: title.trim() });
+        await refresh(false);
+        toast('已重命名');
+      }
+    } else {
+      await post('session', { action: 'switch', ref: item.id });
+      await refresh(true);
+      downloadSession(action === 'json' ? 'json' : 'md', item.id);
+    }
+  });
+}
+
+function sessionToMarkdown(messages, title) {
+  const lines = [`# ${title || '对话'}`, '', `导出时间：${new Date().toLocaleString()}`, ''];
+  for (const message of messages) {
+    if (message.role === 'tool') continue;
+    lines.push(message.role === 'user' ? '## 你' : '## Banana', '');
+    lines.push(message.content || '(空)');
+    if (message.toolCalls?.length) {
+      lines.push('', '工具调用：');
+      for (const call of message.toolCalls) {
+        lines.push(`- \`${call.name}\` ${JSON.stringify(call.input ?? {}).slice(0, 200)}`);
+      }
+    }
+    lines.push('');
+  }
+  return lines.join('\n');
+}
+
+function downloadSession(format, id) {
+  const session = state.info.session;
+  const blob =
+    format === 'json'
+      ? JSON.stringify(session, null, 2)
+      : sessionToMarkdown(session.messages, session.title);
+  const blobUrl = URL.createObjectURL(new Blob([blob], { type: format === 'json' ? 'application/json' : 'text/markdown' }));
+  const link = document.createElement('a');
+  link.href = blobUrl;
+  link.download = `${(session.title || id).replace(/[\\/:*?"<>|]/g, '_').slice(0, 40)}.${format}`;
+  link.click();
+  setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
+  toast(`已导出 ${format === 'json' ? 'JSON' : 'Markdown'}`);
+}
+
+function toolGroup(calls, results) {
+  const wrap = document.createElement('div');
+  wrap.className = 'tool-group';
+  for (const call of calls) {
+    const result = results.get(call.id);
+    const row = document.createElement('div');
+    row.className = `tool-row${result && result.isError ? ' is-error' : ''}`;
+    const detail = JSON.stringify(call.input ?? {}).slice(0, 90);
+    row.innerHTML =
+      `<span class="t-ico">${svg(TOOL_ICON[call.name] ?? 'file')}</span>` +
+      `<span class="t-name">${escapeHtml(call.name)}</span>` +
+      `<span class="t-detail">${escapeHtml(detail)}</span>` +
+      `<span class="t-state">${result ? (result.isError ? '失败' : escapeHtml(result.content?.slice(0, 40) ?? '完成')) : '已调用'}</span>`;
+    wrap.appendChild(row);
+  }
+  return wrap;
+}
+
+function renderMessage(message) {
+  if (message.role === 'tool') return null;
+  const node = document.createElement('article');
+  node.className = `msg ${message.role}`;
+  const role = document.createElement('div');
+  role.className = 'msg-role';
+  role.textContent = message.role === 'user' ? '你' : 'Banana';
+  const body = document.createElement('div');
+  body.className = 'msg-body';
+  if (message.role === 'user') {
+    body.textContent = message.content;
+  } else {
+    body.innerHTML = markdown(message.content || '');
+    if (message.toolCalls?.length) {
+      const results = new Map(
+        (state.info?.session?.messages ?? []).filter((m) => m.role === 'tool').map((m) => [m.toolCallId, m]),
+      );
+      body.insertBefore(toolGroup(message.toolCalls, results), body.firstChild);
+    }
+  }
+  node.append(role, body);
+  return node;
+}
+
+function renderEmpty() {
+  const wrap = document.createElement('div');
+  wrap.className = 'empty';
+  // 第一次用、或者还没配 key 时，给一条能照着做的引导
+  const provider = state.info?.provider;
+  const current = state.info?.providers?.find((item) => item.current);
+  const hasKey = Boolean(current?.keyReady);
+  const banner = hasKey
+    ? ''
+    : `<div class="empty-warn">
+         <strong>还差一步：填上 API Key</strong>
+         <span>没有 key 就没法对话。点下面的按钮，填进去立刻就能用（key 只存在你自己的电脑上）。</span>
+         <button class="btn primary" id="emptySetup">现在去填</button>
+       </div>`;
+  wrap.innerHTML =
+    '<h1>要做什么</h1>' +
+    '<p>读写文件、跑命令、查资料，都可以。默认每次都要你确认。</p>' +
+    banner +
+    '<div class="suggest">' +
+    ['这个仓库是做什么的', '跑一下测试并修复失败', '给我一个重构方案，先别改代码', '把 README 翻译成英文']
+      .map((text) => `<button>${escapeHtml(text)}</button>`)
+      .join('') +
+    '</div>' +
+    `<div class="empty-tips">
+       <span><b>/</b> 调命令（/help 看全部）</span>
+       <span><b>@</b> 引用项目里的文件</span>
+       <span><b>${escapeHtml(provider?.name ?? '')}</b> 当前模型</span>
+     </div>`;
+  wrap.querySelectorAll('.suggest button').forEach((btn) => {
+    btn.addEventListener('click', () => { $('input').value = btn.textContent; $('input').focus(); grow(); });
+  });
+  const setup = wrap.querySelector('#emptySetup');
+  if (setup) setup.addEventListener('click', openSettings);
+  return wrap;
+}
+
+function renderThread() {
+  THREAD.innerHTML = '';
+  const messages = state.info?.session?.messages ?? [];
+  if (messages.length === 0) THREAD.appendChild(renderEmpty());
+  else {
+    const divider = document.createElement('div');
+    divider.className = 'thread-divider';
+    THREAD.appendChild(divider);
+  }
+  for (const message of messages) {
+    const node = renderMessage(message);
+    if (node) THREAD.appendChild(node);
+  }
+  renderTurnMeta();
+  scrollToEnd();
+}
+
+function renderTurnMeta() {
+  const meta = $('threadMeta');
+  const usage = state.info?.session?.usage;
+  if (!usage || (!usage.inputTokens && !usage.outputTokens)) { meta.textContent = ''; return; }
+  const parts = [`↑${usage.inputTokens} ↓${usage.outputTokens}`];
+  if (usage.costUsd) parts.push(usage.costUsd.toFixed(4) + ' USD');
+  meta.textContent = parts.join(' · ');
+}
+
+function scrollToEnd(smooth = true) {
+  requestAnimationFrame(() => {
+    THREAD.scrollTo({ top: THREAD.scrollHeight, behavior: smooth ? 'smooth' : 'auto' });
+  });
+}
+
+function renderHeader() {
+  const info = state.info;
+  if (!info) return;
+  $('threadTitle').textContent = info.session.title || '新对话';
+  $('modelLabel').textContent = `${info.provider.name} / ${info.provider.model}`;
+  $('composerHint').textContent =
+    `工作区 ${info.workspace} · ${info.tools.length} 个工具 · shell=${info.permissions.shell} write=${info.permissions.write} network=${info.permissions.network}`;
+  renderTurnMeta();
+}
+
+let toastTimer = null;
+function toast(text) {
+  const node = $('toast');
+  node.textContent = text;
+  node.hidden = false;
+  requestAnimationFrame(() => node.classList.add('show'));
+  clearTimeout(toastTimer);
+  toastTimer = setTimeout(() => {
+    node.classList.remove('show');
+    setTimeout(() => { node.hidden = true; }, 200);
+  }, 2200);
+}
+
+// ---------------- 请求 ----------------
+async function get(path) {
+  const res = await fetch(API + path);
+  if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error ?? res.statusText);
+  return res.json();
+}
+
+async function post(path, body) {
+  const res = await fetch(API + path, {
+    method: 'POST',
+    headers: { 'content-type': 'application/json' },
+    body: JSON.stringify(body ?? {}),
+  });
+  if (!res.ok) {
+    let message = res.statusText;
+    try {
+      message = (await res.json()).error ?? message;
+    } catch {}
+    throw new Error(message);
+  }
+  return res.json();
+}
+
+async function refresh(path) {
+  const info = await get('info');
+  state.info = info;
+  const { sessions } = await get('sessions');
+  state.sessions = sessions;
+  renderHeader();
+  renderSidebar();
+  if (path) renderThread();
+}
+
+/** 设置面板里的改动要立刻反映在面板上，所以改完重画面板内容。 */
+async function refreshSettings() {
+  await refresh(false);
+  if (!$('settingsSheet').hidden) renderSettings();
+}
+
+// ---------------- 聊天流 ----------------
+let controller = null;
+
+function grow() {
+  const input = $('input');
+  input.style.height = 'auto';
+  input.style.height = Math.min(input.scrollHeight, 220) + 'px';
+  $('sendBtn').disabled = state.busy || input.value.trim() === '';
+}
+
+function setBusy(busy) {
+  state.busy = busy;
+  $('abortBtn').hidden = !busy;
+  $('sendBtn').disabled = busy;
+  document.body.style.cursor = busy ? 'progress' : '';
+}
+
+function askApproval(payload) {
+  return new Promise((resolve) => {
+    state.pendingApproval = resolve;
+    $('approvalKind').textContent = payload.kind === 'shell' ? '确认执行命令' : payload.kind === 'write' ? '确认写入文件' : '确认网络请求';
+    $('approvalSummary').textContent = payload.summary;
+    const preview = $('approvalPreview');
+    preview.textContent = payload.preview ?? '';
+    preview.hidden = !payload.preview;
+    $('approvalModal').hidden = false;
+    $('approvalYes').focus();
+  });
+}
+
+function closeApproval(allowed) {
+  $('approvalModal').hidden = true;
+  const resolve = state.pendingApproval;
+  state.pendingApproval = null;
+  if (resolve) resolve(allowed);
+}
+
+async function send() {
+  const input = $('input');
+  const text = input.value.trim();
+  if (!text || state.busy) return;
+  input.value = '';
+  grow();
+  closePalette();
+  // 斜杠开头的是命令，不走对话
+  if (text.startsWith('/')) {
+    await runCommand(text);
+    grow();
+    return;
+  }
+
+  if (state.info.session.messages.length === 0 && state.info.session.title === '新对话') {
+    state.info.session.title = text.slice(0, 40);
+    renderHeader();
+  }
+  renderEmpty();
+
+  const userMsg = document.createElement('article');
+  userMsg.className = 'msg user';
+  userMsg.innerHTML = '<div class="msg-role">你</div>';
+  const userBody = document.createElement('div');
+  userBody.className = 'msg-body';
+  userBody.textContent = text;
+  userMsg.appendChild(userBody);
+  THREAD.appendChild(userMsg);
+
+  const botMsg = document.createElement('article');
+  botMsg.className = 'msg assistant';
+  botMsg.innerHTML = '<div class="msg-role">Banana</div>';
+  const toolWrap = document.createElement('div');
+  toolWrap.className = 'tool-group';
+  const reasoning = document.createElement('div');
+  reasoning.className = 'reasoning';
+  reasoning.hidden = true;
+  const body = document.createElement('div');
+  body.className = 'msg-body caret';
+  const meta = document.createElement('div');
+  meta.className = 'turn-meta';
+  botMsg.append(toolWrap, reasoning, body, meta);
+  THREAD.appendChild(botMsg);
+
+  const images = state.attachments.map((item) => item.path);
+  state.attachments = [];
+  renderAttachments();
+
+  let buffer = '';
+  let pending = 0;
+  let streamEnded = false;
+  const paint = () => {
+    pending = 0;
+    body.textContent = buffer;
+    scrollToEnd(false);
+  };
+  const schedule = () => {
+    if (!pending) pending = requestAnimationFrame(paint);
+  };
+
+  setBusy(true);
+  controller = new AbortController();
+  const metaLine = (label, value) => {
+    const span = document.createElement('span');
+    span.textContent = `${label} ${value}`;
+    meta.appendChild(span);
+  };
+
+  try {
+    const res = await fetch(API + 'chat', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ message: text, images }),
+      signal: controller.signal,
+    });
+    if (!res.ok) throw new Error((await res.json().catch(() => ({}))).error ?? res.statusText);
+
+    const reader = res.body.getReader();
+    const decoder = new TextDecoder();
+    let bufferRaw = '';
+    while (true) {
+      const { done, value } = await reader.read();
+      if (done) break;
+      bufferRaw += decoder.decode(value, { stream: true });
+      let cut = bufferRaw.indexOf('\n\n');
+      while (cut !== -1) {
+        const chunk = bufferRaw.slice(0, cut);
+        bufferRaw = bufferRaw.slice(cut + 2);
+        cut = bufferRaw.indexOf('\n\n');
+        for (const line of chunk.split('\n')) {
+          if (!line.startsWith('data: ')) continue;
+          const event = JSON.parse(line.slice(6));
+          if (event.type === 'text') { buffer += event.chunk; schedule(); }
+          else if (event.type === 'reasoning') { reasoning.hidden = false; reasoning.textContent += event.chunk; }
+          else if (event.type === 'tool_start') {
+            const row = document.createElement('div');
+            row.className = 'tool-row';
+            row.innerHTML =
+              `<span class="t-ico">${svg(TOOL_ICON[event.name] ?? 'file')}</span>` +
+              `<span class="t-name">${escapeHtml(event.name)}</span>` +
+              `<span class="t-detail">${escapeHtml(event.detail)}</span>` +
+              '<span class="t-state"><span class="spin"></span></span>';
+            toolWrap.appendChild(row);
+            scrollToEnd(false);
+          } else if (event.type === 'tool_end') {
+            const rows = toolWrap.querySelectorAll('.tool-row');
+            const row = rows[rows.length - 1];
+            if (row) {
+              row.querySelector('.t-state').innerHTML = event.ok ? svg('check') : svg('x');
+              row.classList.toggle('is-error', !event.ok);
+              if (event.detail) {
+                row.classList.add('is-clickable');
+                row.title = '点击展开输出';
+                row.addEventListener('click', () => toggleToolOutput(row, event.detail, !event.ok));
+              }
+            }
+          } else if (event.type === 'approval') {
+            const allowed = await askApproval(event);
+            await post('approve', { id: event.id, allowed });
+          } else if (event.type === 'error') {
+            // 服务端提前收尾（没配 key、请求出错等）：给出能照做的下一步
+            body.classList.remove('caret');
+            body.innerHTML = markdown(`**${escapeHtml(event.message ?? '出错了')}**`);
+            if (event.hint) metaLine('提示', event.hint);
+            if (event.code === 'no_api_key') openSettings();
+            streamEnded = true;
+          } else if (event.type === 'done') {
+            body.classList.remove('caret');
+            streamEnded = true;
+            if (event.error) body.innerHTML = markdown(`**请求失败** ${escapeHtml(event.error)}`);
+            else if (!buffer.trim()) body.innerHTML = markdown('这一轮没有返回内容。');
+            else body.innerHTML = markdown(buffer);
+            metaLine('步数', event.steps);
+            metaLine('用时', (event.ms / 1000).toFixed(1) + 's');
+            if (event.cost && event.cost !== '≈$0') metaLine('花费', event.cost);
+            state.info = event.info;
+            state.info.session.messages = [...state.info.session.messages];
+            state.info.session.messages[state.info.session.messages.length - 1] = {
+              role: 'assistant',
+              content: buffer,
+            };
+            const { sessions } = await get('sessions');
+            state.sessions = sessions;
+            renderSidebar();
+            renderHeader();
+          }
+        }
+      }
+    }
+    // 流结束了却没收到 done/error：多半是被中断，别让界面一直转圈
+    if (!streamEnded) {
+      body.classList.remove('caret');
+      if (body.textContent === '' && toolWrap.childElementCount === 0) {
+        body.innerHTML = markdown('这一轮没有返回内容。可以重试，或点「停止」后换个说法。');
+      }
+      await refresh();
+    }
+  } catch (error) {
+    body.classList.remove('caret');
+    body.innerHTML = markdown(`**中断** ${escapeHtml(error.message)}`);
+    await refresh();
+  } finally {
+    setBusy(false);
+    scrollToEnd();
+  }
+}
+
+// ---------------- 主题 ----------------
+// 三态：跟随系统 / 浅色 / 深色，选择记在本地
+const THEMES = ['auto', 'light', 'dark'];
+const THEME_LABEL = { auto: '跟随系统', light: '浅色', dark: '深色' };
+const THEME_ICON = { auto: 'contrast', light: 'sun', dark: 'moon' };
+
+function applyTheme(theme) {
+  if (theme === 'auto') delete document.documentElement.dataset.theme;
+  else document.documentElement.dataset.theme = theme;
+  try {
+    localStorage.setItem('banana-theme', theme);
+  } catch {}
+  const button = $('themeBtn');
+  if (button) {
+    button.innerHTML = svg(THEME_ICON[theme]);
+    button.title = `主题：${THEME_LABEL[theme]}（点击切换）`;
+  }
+}
+
+function loadTheme() {
+  let saved = 'auto';
+  try {
+    saved = localStorage.getItem('banana-theme') ?? 'auto';
+  } catch {}
+  if (!THEMES.includes(saved)) saved = 'auto';
+  applyTheme(saved);
+}
+
+function cycleTheme() {
+  const current = (() => {
+    try {
+      return localStorage.getItem('banana-theme') ?? 'auto';
+    } catch {
+      return 'auto';
+    }
+  })();
+  const next = THEMES[(THEMES.indexOf(current) + 1) % THEMES.length];
+  applyTheme(next);
+  toast(`主题：${THEME_LABEL[next]}`);
+}
+
+// ---------------- 补全面板：/ 命令与 @ 文件共用一套 ----------------
+let commandList = [];
+
+function renderCommandPalette(query) {
+  const box = $('commandPalette');
+  const term = query.replace(/^\//, '').toLowerCase();
+  const matches = commandList
+    .filter((item) => !term || item.name.startsWith(term) || item.aliases.some((alias) => alias.startsWith(term)))
+    .slice(0, 8);
+  state.commandMatches = matches.map((item) => ({ kind: 'command', item, insert: item.usage.startsWith('/') ? item.usage + ' ' : '/' + item.name + ' ' }));
+  state.commandIndex = 0;
+  paintPalette();
+}
+
+function paintPalette() {
+  const box = $('commandPalette');
+  box.innerHTML = '';
+  const rows = state.commandMatches ?? [];
+  if (!rows.length) {
+    box.innerHTML = '<div class="cmd-empty">没有匹配项</div>';
+    return;
+  }
+  rows.forEach((entry, index) => {
+    const row = document.createElement('button');
+    row.className = `cmd-item${index === state.commandIndex ? ' is-on' : ''}`;
+    row.type = 'button';
+    if (entry.kind === 'command') {
+      row.innerHTML =
+        `<span class="cmd-name">/${escapeHtml(entry.item.name)}</span>` +
+        `<span class="cmd-summary">${escapeHtml(entry.item.summary)}</span>` +
+        `<span class="cmd-usage">${escapeHtml(entry.item.usage)}</span>`;
+    } else {
+      row.innerHTML =
+        `<span class="cmd-name">${escapeHtml(entry.item.split('/').pop())}</span>` +
+        `<span class="cmd-summary">${escapeHtml(entry.item)}</span>` +
+        '<span class="cmd-usage">文件</span>';
+    }
+    row.addEventListener('mousedown', (event) => {
+      event.preventDefault();
+      applyCompletion(entry);
+    });
+    box.appendChild(row);
+  });
+}
+
+/** 用候选替换输入框里对应的片段。 */
+function applyCompletion(entry) {
+  const input = $('input');
+  const value = input.value;
+  const replace = state.paletteReplace ?? '';
+  if (replace && value.endsWith(replace)) {
+    input.value = value.slice(0, value.length - replace.length) + entry.insert;
+  } else {
+    input.value = `${value.trimEnd()} ${entry.insert}`;
+  }
+  closePalette();
+  input.focus();
+  grow();
+}
+
+/** 命令面板：本地过滤，无需请求。 */
+function openPalette(query) {
+  const box = $('commandPalette');
+  box.hidden = false;
+  box.dataset.kind = 'command';
+  state.paletteReplace = '';
+  renderCommandPalette(query);
+}
+
+function closePalette() {
+  $('commandPalette').hidden = true;
+  state.commandMatches = [];
+  state.paletteReplace = '';
+  state.pendingFiles = [];
+}
+
+function movePalette(step) {
+  const box = $('commandPalette');
+  if (box.hidden) return;
+  const rows = [...box.querySelectorAll('.cmd-item')];
+  if (!rows.length) return;
+  state.commandIndex = (state.commandIndex + step + rows.length) % rows.length;
+  rows.forEach((row, index) => row.classList.toggle('is-on', index === state.commandIndex));
+  rows[state.commandIndex].scrollIntoView({ block: 'nearest' });
+}
+
+/** @ 补全：走服务端，和 CLI 用同一份 completeFileReference。 */
+let completeTimer = null;
+async function requestFileComplete(value) {
+  clearTimeout(completeTimer);
+  completeTimer = setTimeout(async () => {
+    try {
+      const data = await get(`complete?line=${encodeURIComponent(value)}`);
+      if (data.kind !== 'file' || !data.candidates.length) {
+        if (!$('commandPalette').hidden && $('commandPalette').dataset.kind === 'file') closePalette();
+        return;
+      }
+      // 补全请求返回时用户可能已经继续输入了，丢弃过期结果
+      if ($('input').value !== value) return;
+      state.pendingFiles = data.candidates.map((path) => ({ kind: 'file', item: path, insert: path + ' ' }));
+      $('commandPalette').hidden = false;
+      $('commandPalette').dataset.kind = 'file';
+      state.paletteReplace = data.replace;
+      state.commandMatches = state.pendingFiles;
+      state.commandIndex = 0;
+      paintPalette();
+    } catch {
+      /* 补全失败不影响输入 */
+    }
+  }, 90);
+}
+
+/** 执行命令：走服务端，和终端里同一份逻辑、同一份命令表。 */
+async function runCommand(text) {
+  closePalette();
+  const userMsg = document.createElement('article');
+  userMsg.className = 'msg user cmd';
+  userMsg.innerHTML = '<div class="msg-role">你</div>';
+  const userBody = document.createElement('div');
+  userBody.className = 'msg-body';
+  userBody.textContent = text;
+  userMsg.appendChild(userBody);
+  THREAD.appendChild(userMsg);
+
+  const botMsg = document.createElement('article');
+  botMsg.className = 'msg assistant';
+  const role = document.createElement('div');
+  role.className = 'msg-role';
+  role.textContent = '命令输出';
+  const out = document.createElement('div');
+  out.className = 'msg-body cmd-out';
+  botMsg.append(role, out);
+  THREAD.appendChild(botMsg);
+  out.textContent = '执行中…';
+  scrollToEnd();
+
+  try {
+    const result = await post('command', { input: text });
+    out.textContent = (result.output || '').replace(/\u001b\[\d+J/g, '') || (result.ok ? '（没有输出）' : '');
+    out.classList.toggle('is-error', !result.ok);
+    if (result.error) out.textContent += (out.textContent ? '\n' : '') + result.error;
+    if (result.info) state.info = result.info;
+    if (result.sessions) state.sessions = result.sessions;
+    // \u001b[clear 之类的终端指令：清空当前视图
+    if ((result.output || '').includes('\u001b[clear]')) renderThread();
+    renderHeader();
+    renderSidebar();
+  } catch (error) {
+    out.textContent = error.message;
+    out.classList.add('is-error');
+  }
+  scrollToEnd();
+}
+
+// ---------------- 附件 ----------------
+function renderAttachments() {
+  const box = $('attachments');
+  box.hidden = state.attachments.length === 0;
+  box.innerHTML = '';
+  state.attachments.forEach((item, index) => {
+    const chip = document.createElement('span');
+    chip.className = 'att';
+    chip.innerHTML = `${svg('image')}<span>${escapeHtml(item.name)}</span><button aria-label="移除">${svg('x')}</button>`;
+    chip.querySelector('button').addEventListener('click', () => {
+      state.attachments.splice(index, 1);
+      renderAttachments();
+    });
+    box.appendChild(chip);
+  });
+}
+
+async function attach(file) {
+  if (!/^image\//.test(file.type)) { toast('只支持图片'); return; }
+  if (file.size > 4 * 1024 * 1024) { toast('图片超过 4MB'); return; }
+  const base64 = await new Promise((resolve) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(String(reader.result).split(',')[1]);
+    reader.readAsDataURL(file);
+  });
+  const { path } = await post('attach?name=' + encodeURIComponent(file.name), { data: base64 });
+  state.attachments.push({ name: file.name, path });
+  renderAttachments();
+  toast('已附加 ' + file.name);
+}
+
+// ---------------- 设置面板 ----------------
+function renderSettings() {
+  const info = state.info;
+  const body = $('settingsBody');
+  body.innerHTML = '';
+
+  const providerField = document.createElement('div');
+  providerField.className = 'field';
+  providerField.innerHTML =
+    '<label>Provider</label><select>' +
+    info.providers.map((item) => `<option value="${item.name}" ${item.current ? 'selected' : ''}>${item.name} — ${item.model}</option>`).join('') +
+    '</select>';
+  providerField.querySelector('select').addEventListener('change', async (event) => {
+    await post('action', { action: 'provider', name: event.target.value });
+    await refreshSettings();
+  });
+  body.appendChild(providerField);
+
+  const modelField = document.createElement('div');
+  modelField.className = 'field';
+  modelField.innerHTML = `<label>模型</label><div class="row"><input value="${escapeHtml(info.provider.model)}" /><button class="btn">保存</button></div>`;
+  modelField.querySelector('button').addEventListener('click', async () => {
+    const value = modelField.querySelector('input').value.trim();
+    if (!value) return;
+    await post('action', { action: 'model', value });
+    await refreshSettings();
+    toast('模型已更新');
+  });
+  modelField.querySelector('input').addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') modelField.querySelector('button').click();
+  });
+  body.appendChild(modelField);
+
+  // API key：留空表示不修改；提示可以用环境变量代替
+  const active = info.providers.find((item) => item.current);
+  const keyField = document.createElement('div');
+  keyField.className = 'field';
+  const keyPlaceholder = active?.keySaved
+    ? '已保存（留空表示不修改）'
+    : active?.keyEnv
+      ? `默认读取环境变量 ${active.keyEnv}（当前${active.keyReady ? '已设置' : '未设置'}）`
+      : '粘贴 API key';
+  keyField.innerHTML =
+    '<label>API Key</label>' +
+    `<div class="row"><input type="password" placeholder="${keyPlaceholder}" /><button class="btn">保存</button></div>` +
+    `<div class="hint">${active?.keyEnv ? `默认读取环境变量 ${active.keyEnv}；` : ''}更安全的做法是只设环境变量，配置文件里只留变量名。</div>`;
+  keyField.querySelector('button').addEventListener('click', async () => {
+    const input = keyField.querySelector('input');
+    const value = input.value.trim();
+    if (!value) {
+      toast('留空表示不修改');
+      return;
+    }
+    await post('action', { action: 'apiKey', value });
+    input.value = '';
+    await refreshSettings();
+    toast('API Key 已保存');
+  });
+  keyField.querySelector('input').addEventListener('keydown', (event) => {
+    if (event.key === 'Enter') keyField.querySelector('button').click();
+  });
+  body.appendChild(keyField);
+
+  const permField = document.createElement('div');
+  permField.className = 'field';
+  permField.innerHTML = '<label>权限</label>';
+  // 权限是小白最容易懵的地方，所以每种模式都写清楚"改了会发生什么"
+  const PERM_INFO = {
+    shell: {
+      name: '执行命令',
+      hint: 'Banana 可以在你的电脑上运行命令（如 npm test、git status）。',
+      modes: {
+        ask: '每次执行前弹窗问你 —— 最安全，推荐新手用这个',
+        allow: '直接执行，不打扰你 —— 方便但风险自负',
+        deny: '完全禁止 —— Banana 只能读文件，不能动你的系统',
+      },
+    },
+    write: {
+      name: '写入文件',
+      hint: '修改或新建文件的能力。每次改动都可以用左下角「撤销」回滚。',
+      modes: {
+        ask: '每次改文件前给你看改动内容，你确认才写',
+        allow: '直接改，不再逐个确认',
+        deny: '禁止任何写入 —— 只读模式',
+      },
+    },
+    network: {
+      name: '联网',
+      hint: '允许 Banana 访问外部网络（搜索、抓网页）。',
+      modes: {
+        ask: '每次联网都问你',
+        allow: '允许联网（默认）',
+        deny: '完全断网，只能用本地信息',
+      },
+    },
+  };
+  for (const key of ['shell', 'write', 'network']) {
+    const spec = PERM_INFO[key];
+    const row = document.createElement('div');
+    row.className = 'perm-row';
+    row.dataset.key = key;
+    const seg = document.createElement('div');
+    seg.className = 'seg';
+    seg.innerHTML = ['ask', 'allow', 'deny']
+      .map((mode) => {
+        const label = mode === 'ask' ? '每次问' : mode === 'allow' ? '直接执行' : '禁止';
+        return `<button data-mode="${mode}" class="${info.permissions[key] === mode ? 'is-on' : ''}">${label}</button>`;
+      })
+      .join('');
+    seg.addEventListener('click', async (event) => {
+      const button = event.target.closest('[data-mode]');
+      if (!button) return;
+      const mode = button.dataset.mode;
+      // 立即反馈，失败再回滚并提示，避免看起来"点不动"
+      seg.querySelectorAll('[data-mode]').forEach((item) => item.classList.toggle('is-on', item === button));
+      const detail = row.querySelector('.perm-detail');
+      if (detail) detail.textContent = spec.modes[mode];
+      try {
+        await post('action', { action: 'permission', name: key, value: mode });
+        await refresh(false);
+        toast(`「${spec.name}」已设为：${mode === 'ask' ? '每次问' : mode === 'allow' ? '直接执行' : '禁止'}`);
+      } catch (error) {
+        seg.querySelectorAll('[data-mode]').forEach((item) => item.classList.toggle('is-on', item.dataset.mode !== mode));
+        if (detail) detail.textContent = spec.modes[info.permissions[key]];
+        toast('保存失败：' + error.message);
+      }
+    });
+
+    const block = document.createElement('div');
+    block.className = 'perm-block';
+    const head = document.createElement('div');
+    head.className = 'perm-head';
+    head.innerHTML = `<span class="perm-name">${escapeHtml(spec.name)}</span>`;
+    head.appendChild(seg);
+    const desc = document.createElement('div');
+    desc.className = 'hint';
+    desc.textContent = spec.hint;
+    const detail = document.createElement('div');
+    detail.className = 'perm-detail';
+    detail.textContent = spec.modes[info.permissions[key]];
+    block.append(head, desc, detail);
+    row.appendChild(block);
+    permField.appendChild(row);
+  }
+  const note = document.createElement('div');
+  note.className = 'hint perm-note';
+  note.textContent = '改动立刻生效，并保存在配置里（CLI 和 GUI 共用同一份设置）。不确定就保持「每次问」。';
+  permField.appendChild(note);
+  body.appendChild(permField);
+
+  const toolsField = document.createElement('div');
+  toolsField.className = 'field';
+  toolsField.innerHTML =
+    '<label>工具</label><div class="hint">' +
+    info.tools.map((tool) => `${escapeHtml(tool.name)} <span style="opacity:.6">${tool.permission}</span>`).join('、') +
+    '</div>';
+  body.appendChild(toolsField);
+
+  const sysField = document.createElement('div');
+  sysField.className = 'field';
+  sysField.innerHTML = '<label>系统提示词</label>';
+  const textarea = document.createElement('textarea');
+  textarea.rows = 6;
+  textarea.style.cssText = 'border:1px solid var(--line);border-radius:9px;padding:8px 10px;font-size:13px;resize:vertical';
+  textarea.value = state.systemPrompt ?? '';
+  sysField.append(textarea);
+  const saveRow = document.createElement('div');
+  saveRow.innerHTML = '<button class="btn">保存提示词</button>';
+  saveRow.querySelector('button').addEventListener('click', async () => {
+    await post('action', { action: 'system', value: textarea.value });
+    toast('已保存');
+  });
+  sysField.append(saveRow);
+  body.appendChild(sysField);
+}
+
+// ---------------- 文件面板 ----------------
+const FILE_ICON = { dir: 'folder', file: 'file' };
+
+async function loadTree(path = '.', container = $('filesTree')) {
+  container.innerHTML = '<div class="hint" style="padding:8px 10px">读取中…</div>';
+  try {
+    const { entries } = await get(`files?path=${encodeURIComponent(path)}`);
+    container.innerHTML = '';
+    if (!entries.length) {
+      container.innerHTML = '<div class="hint" style="padding:8px 10px">（空目录）</div>';
+      return;
+    }
+    for (const entry of entries) {
+      const row = document.createElement('button');
+      row.className = 'file-row';
+      row.innerHTML =
+        `<span class="tool-caret">${entry.type === 'dir' ? svg('chevron') : ''}</span>` +
+        `<span>${svg(FILE_ICON[entry.type])}</span>` +
+        `<span class="f-name">${escapeHtml(entry.name)}</span>`;
+      row.addEventListener('click', async () => {
+        if (entry.type === 'dir') {
+          const holder = row.nextElementSibling;
+          if (holder?.classList.contains('file-children')) {
+            holder.remove();
+            row.classList.remove('is-open');
+            return;
+          }
+          row.classList.add('is-open');
+          const box = document.createElement('div');
+          box.className = 'file-children';
+          row.after(box);
+          await loadTree(entry.path, box);
+        } else {
+          await openFile(entry.path);
+        }
+      });
+      container.appendChild(row);
+    }
+  } catch (error) {
+    container.innerHTML = `<div class="hint" style="padding:8px 10px">${escapeHtml(error.message)}</div>`;
+  }
+}
+
+async function openFile(path) {
+  const box = $('filesPreview');
+  const body = $('previewBody');
+  box.hidden = false;
+  $('previewName').textContent = path;
+  body.textContent = '读取中…';
+  try {
+    const data = await get(`file?path=${encodeURIComponent(path)}`);
+    $('insertPath').dataset.path = path;
+    if (data.binary) body.textContent = `二进制文件（${data.bytes} 字节），无法预览。`;
+    else if (data.tooLarge) body.textContent = `文件较大（${data.bytes} 字节），未加载。`;
+    else body.textContent = data.content ?? '';
+    document.querySelectorAll('.file-row.is-active').forEach((node) => node.classList.remove('is-active'));
+  } catch (error) {
+    body.textContent = error.message;
+  }
+}
+
+async function toggleFiles() {
+  const panel = $('filesPanel');
+  panel.hidden = !panel.hidden;
+  if (!panel.hidden && !$('filesTree').childElementCount) {
+    $('filesTitle').textContent = `项目文件 · ${state.info?.workspace ?? ''}`;
+    await loadTree('.');
+  }
+}
+
+// ---------------- 工具输出详情 ----------------
+function toggleToolOutput(row, detail, isError) {
+  const existing = row.nextElementSibling;
+  if (existing?.classList.contains('tool-output')) {
+    existing.remove();
+    row.classList.remove('is-open');
+    return;
+  }
+  const pre = document.createElement('div');
+  pre.className = `tool-output${isError ? ' is-error' : ''}`;
+  pre.textContent = detail || '(无输出)';
+  row.after(pre);
+  row.classList.add('is-open');
+}
+
+// ---------------- 启动 ----------------
+function openSettings() {
+  renderSettings();
+  $('settingsSheet').hidden = false;
+}
+
+function closeSettings() {
+  $('settingsSheet').hidden = true;
+  // 收掉动画后再清空内容，避免关闭瞬间出现内容跳动
+  setTimeout(() => { if ($('settingsSheet').hidden) $('settingsBody').innerHTML = ''; }, 240);
+}
+
+function bind() {
+  $('newChat').innerHTML = svg('plus');
+  $('sendBtn').innerHTML = svg('send');
+  $('abortBtn').innerHTML = svg('stop');
+  $('toggleSidebar').innerHTML = svg('list');
+  $('closeSettings').innerHTML = svg('x');
+  $('filesBtn').innerHTML = svg('panel');
+  $('closeFiles').innerHTML = svg('x');
+  hydrate();
+  loadTheme();
+
+  $('newChat').addEventListener('click', () => post('session', { action: 'new' }).then(() => refresh(true)));
+  $('abortBtn').addEventListener('click', async () => { controller?.abort(); await post('abort'); });
+  $('modelBtn').addEventListener('click', openSettings);
+  $('openSettings').addEventListener('click', openSettings);
+  $('closeSettings').addEventListener('click', closeSettings);
+  $('settingsSheet').addEventListener('click', (event) => {
+    if (event.target === $('settingsSheet')) closeSettings();
+  });
+  $('settingsSheet').addEventListener('mousedown', (event) => {
+    if (event.target === $('settingsSheet')) closeSettings();
+  });
+  $('toggleSidebar').addEventListener('click', () => $('sidebar').classList.toggle('open'));
+  $('filesBtn').addEventListener('click', toggleFiles);
+  $('themeBtn').addEventListener('click', cycleTheme);
+  $('closeFiles').addEventListener('click', () => { $('filesPanel').hidden = true; });
+  $('insertPath').addEventListener('click', () => {
+    const path = $('insertPath').dataset.path;
+    if (!path) return;
+    const box = $('input');
+    box.value = box.value.trim() ? `${box.value.trim()} @${path} ` : `@${path} `;
+    box.focus();
+    box.setSelectionRange(box.value.length, box.value.length);
+    toast('已插入文件引用');
+  });
+  $('approvalNo').addEventListener('click', () => closeApproval(false));
+  $('approvalYes').addEventListener('click', () => closeApproval(true));
+
+  $('undoBtn').addEventListener('click', async () => {
+    const result = await post('undo');
+    toast(result.had ? `已回滚：恢复 ${result.restored} 个文件` : '没有可回滚的改动');
+  });
+
+  $('composer').addEventListener('submit', (event) => { event.preventDefault(); send(); });
+  $('input').addEventListener('input', () => {
+    grow();
+    const value = $('input').value;
+    // / 开头 → 命令面板；结尾是 @路径 → 文件补全（服务端用 CLI 同一份逻辑）
+    if (/^\/[a-zA-Z?]*$/.test(value) && commandList.length) openPalette(value);
+    else if (/(^|\s)@[^\s]*$/.test(value)) requestFileComplete(value);
+    else closePalette();
+  });
+  $('input').addEventListener('keydown', (event) => {
+    if (!$('commandPalette').hidden) {
+      if (event.key === 'ArrowDown') { event.preventDefault(); movePalette(1); return; }
+      if (event.key === 'ArrowUp') { event.preventDefault(); movePalette(-1); return; }
+      if (event.key === 'Tab') {
+        event.preventDefault();
+        const picked = state.commandMatches?.[state.commandIndex ?? 0];
+        if (picked) applyCompletion(picked);
+        return;
+      }
+      // 文件补全面板里回车直接发送更顺手；命令面板里回车优先补全
+      if (event.key === 'Enter' && !event.shiftKey && $('commandPalette').dataset.kind === 'command' && state.commandMatches?.length) {
+        event.preventDefault();
+        const picked = state.commandMatches[state.commandIndex ?? 0];
+        if (picked) {
+          applyCompletion(picked);
+          renderCommandPalette(picked.item.name ?? '');
+          return;
+        }
+      }
+      if (event.key === 'Escape') { event.preventDefault(); closePalette(); return; }
+    }
+    if (event.key === 'Enter' && !event.shiftKey && !event.isComposing) { event.preventDefault(); send(); }
+  });
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape') {
+      if (!$('approvalModal').hidden) closeApproval(false);
+      else if (!$('settingsSheet').hidden) closeSettings();
+      else if (!$('filesPanel').hidden) $('filesPanel').hidden = true;
+      else if ($('sidebar').classList.contains('open')) $('sidebar').classList.remove('open');
+    }
+  });
+
+  // 窄屏下点空白处收起侧边栏（点侧边栏内部或开合按钮不算）
+  document.addEventListener('click', (event) => {
+    if (!window.matchMedia('(max-width: 900px)').matches) return;
+    if (!$('sidebar').classList.contains('open')) return;
+    if (event.target.closest('#sidebar, #toggleSidebar')) return;
+    $('sidebar').classList.remove('open');
+  });
+
+  $('input').addEventListener('paste', (event) => {
+    for (const item of event.clipboardData?.files ?? []) attach(item);
+  });
+  document.addEventListener('dragover', (event) => event.preventDefault());
+  document.addEventListener('drop', (event) => {
+    event.preventDefault();
+    for (const item of event.dataTransfer?.files ?? []) attach(item);
+  });
+}
+
+async function boot() {
+  bind();
+  // 命令表来自服务端（与 CLI 同一份），拉不到也不影响对话
+  try {
+    commandList = (await get('commands')).commands ?? [];
+  } catch {
+    commandList = [];
+  }
+  await refresh(true);
+  grow();
+  $('input').focus();
+}
+
+boot().catch((error) => toast('加载失败：' + error.message));