llm-api-gateway-cli 1.0.0

package/public/task.js

@@ -0,0 +1,3127 @@
+'use strict';
+
+/* ---------- 常量与状态 ---------- */
+
+// 任务数据存在磁盘上（服务端），浏览器里只留设置与「当前打开哪条」
+const STORE_TASK_SETTINGS = 'lgw.task.settings.v1';
+
+const DEFAULTS = { model: '', system: '', temperature: 0.3, maxTokens: 0, showReasoning: true };
+
+// 三种审批模式：手动每次问、自动直接写、计划只读先出方案
+const MODES = ['manual', 'auto', 'plan'];
+const MODE_LABELS = { manual: '手动', auto: '自动', plan: '计划' };
+const MODE_NOTES = {
+  manual: '每次写入都要你确认',
+  auto: '写入直接执行，界面仍逐条显示',
+  plan: '只读调研，计划写入 docs/ 后再执行',
+};
+
+function normalizeMode(m) {
+  return MODES.includes(m) ? m : 'manual';
+}
+
+const state = {
+  tasks: [],            // 索引项 { id, title, workDir, mode, createdAt, updatedAt, renamed }
+  activeId: null,       // 当前任务 id；null 表示草稿态（还没落盘）
+  draft: true,
+  draftWorkDir: null,   // 草稿态下已选的工作目录（刷新后不丢）
+  draftMode: 'manual',
+  mode: 'manual',       // 当前审批模式
+  defaultMode: 'manual',// 服务端默认模式（新任务用）
+  workDir: null,        // 当前任务的工作目录（绝对路径），任务模式下必需
+  messages: [],         // { role, content, reasoning, steps[], pending, streaming?, error?, el? }
+  settings: { ...DEFAULTS },
+  models: [],              // 最近一次从 /api/models 拉到的可选模型（设置面板与 /model 指令都只认它）
+  settingsOnServer: false, // 设置是否已经住在磁盘上（连不上服务端时为 false，退回本地兜底）
+  settingsPersist: 'server', // ui.persist 的当前值：server / browser
+  settingsFile: null, // 服务端告诉我们配置文件在哪（设置面板里显示给用户看）
+  settingsMigrated: false, // 本次启动是否刚把浏览器里的配置搬到了磁盘
+  uiFromServer: null, // ui.persist=server 时服务端下发的界面状态，稍后覆盖本地那份
+  streaming: false,
+  runningId: null,      // 正在跑的任务 id（侧边栏显示「进行中」）
+  controller: null,
+  streamError: null,
+  // 每个任务各自留一份，切走再切回来直接恢复，不用重新拉服务端（更不会打断正在跑的）
+  cache: new Map(),     // taskId -> { messages, workDir, mode, usageTotal }
+  // taskId -> 上次成功保存时发出去的那份请求体。内容和它一模一样时就不必再存一次：
+  // 切任务/点标题只是换了个视图，不该被当成一次修改（否则时间戳会被刷新成「刚刚」）
+  savedBodies: new Map(),
+  runs: new Map(),      // taskId -> AbortController（正在跑的任务；可以有多个）
+  usageTotal: { prompt: 0, completion: 0 },
+  config: null,
+  storeInfo: null,      // 服务端返回的存储信息 { dir, taskCount, maxTasks, ttlDays, bytes, ... }
+  storeExposed: false,  // 存储目录是否落在工作目录内（模型能看到任务历史）
+  prunedCount: 0,       // 本次打开自动清理掉的任务数
+  migrated: 0,          // 从浏览器存储搬到磁盘的任务数
+  loadError: null,      // 任务列表都读不到（存储整个不可用）
+  taskLoadError: null,  // 列表能读，但某条任务的正文读不出来
+  restoredPending: 0,   // 刷新后恢复出来的待批准数量
+  collapsedDirs: [],    // 侧边栏里被折叠的工作目录分组（按目录记，存在浏览器里）
+  collapsedTasks: [],   // 侧边栏里被折叠的父任务（子任务收起来，按任务 id 记）
+  draftParentId: null,  // 草稿要挂在哪条任务下（侧边栏任务行上的「＋」派生出的子任务）
+  configRows: [],       // 服务端白名单行（GET /api/settings 的 rows）——「其他配置」照它渲染，页面不抄第二份
+  configControls: {},   // 配置键 → 渲染出来的控件（回填与测试都要按写这个映射）
+};
+
+const dom = {
+  sidebar: document.getElementById('sidebar'),
+  taskList: document.getElementById('task-list'),
+  tasksCount: document.getElementById('tasks-count'),
+  tasksRetention: document.getElementById('tasks-retention'),
+  btnPrune: document.getElementById('btn-prune'),
+  btnToggleSidebar: document.getElementById('btn-toggle-sidebar'),
+  messages: document.getElementById('messages'),
+  empty: document.getElementById('empty-hint'),
+  emptyTitle: document.getElementById('empty-title'),
+  emptyDesc: document.getElementById('empty-desc'),
+  chipPick: document.getElementById('chip-pick'),
+  slashMenu: document.getElementById('slash-menu'),
+  input: document.getElementById('input'),
+  send: document.getElementById('btn-send'),
+  stop: document.getElementById('btn-stop'),
+  status: document.getElementById('status'),
+  modeSwitch: document.getElementById('mode-switch'),
+  modeNote: document.getElementById('mode-note'),
+  dot: document.getElementById('status-dot'),
+  workdirChip: document.getElementById('workdir-chip'),
+  workdirPath: document.getElementById('workdir-path'),
+  newTask: document.getElementById('btn-new-task'),
+  btnOpenChat: document.getElementById('btn-open-chat'),
+  settings: document.getElementById('settings'),
+  btnSettings: document.getElementById('btn-settings'),
+  btnSettingsClose: document.getElementById('btn-settings-close'),
+  setModel: document.getElementById('set-model'),
+  modelsHint: document.getElementById('models-hint'),
+  setSystem: document.getElementById('set-system'),
+  setTemperature: document.getElementById('set-temperature'),
+  setMaxTokens: document.getElementById('set-max-tokens'),
+  setShowReasoning: document.getElementById('set-show-reasoning'),
+  configExtraGroup: document.getElementById('config-extra-group'),
+  configExtra: document.getElementById('config-extra'),
+  btnRefreshModels: document.getElementById('btn-refresh-models'),
+  btnReset: document.getElementById('btn-reset'),
+  infoBase: document.getElementById('info-base'),
+  infoKey: document.getElementById('info-key'),
+  infoTools: document.getElementById('info-tools'),
+  infoUsage: document.getElementById('info-usage'),
+  infoLimit: document.getElementById('info-limit'),
+  infoTasks: document.getElementById('info-tasks'),
+  infoRetention: document.getElementById('info-retention'),
+  infoStore: document.getElementById('info-store'),
+  infoStoreSize: document.getElementById('info-store-size'),
+  storePath: document.getElementById('store-path'),
+  dirModal: document.getElementById('dir-modal'),
+  dirRoots: document.getElementById('dir-roots'),
+  dirList: document.getElementById('dir-list'),
+  dirUp: document.getElementById('dir-up'),
+  dirGo: document.getElementById('dir-go'),
+  dirPathInput: document.getElementById('dir-path-input'),
+  dirNote: document.getElementById('dir-note'),
+  dirCancel: document.getElementById('dir-cancel'),
+  dirConfirm: document.getElementById('dir-confirm'),
+};
+
+/* ---------- 通用小工具 ---------- */
+
+function setStatus(text, kind = '') {
+  dom.status.textContent = text;
+  dom.status.className = `hint${kind ? ' ' + kind : ''}`;
+}
+
+/** 状态栏是否已经有「比泛泛提示更有价值」的内容（空着或只是「就绪」都算没有） */
+function statusHasContent() {
+  const text = String(dom.status?.textContent || '').trim();
+  return Boolean(text) && text !== '就绪';
+}
+
+function setDot(kind) {
+  dom.dot.className = `dot${kind ? ' ' + kind : ''}`;
+}
+
+/**
+ * 信息行的值：面板窄，长值（网关地址、可用工具清单…）按 CSS 截成省略号，
+ * 所以顺手把完整值挂到 title 上 —— 悬停就能看全，不用去翻 config list。
+ */
+function setInfo(el, text) {
+  if (!el) return;
+  el.textContent = text;
+  el.title = text;
+}
+
+function fmtBytes(n) {
+  if (!n) return '0 B';
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${(n / 1024).toFixed(1)} KB`;
+  return `${(n / 1024 / 1024).toFixed(1)} MB`;
+}
+
+function scrollToBottom(force = false) {
+  const nearBottom = dom.messages.scrollHeight - dom.messages.scrollTop - dom.messages.clientHeight < 120;
+  if (force || nearBottom) dom.messages.scrollTop = dom.messages.scrollHeight;
+}
+
+function readJson(key, fallback) {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return fallback;
+    const v = JSON.parse(raw);
+    return v === null || v === undefined ? fallback : v;
+  } catch {
+    return fallback;
+  }
+}
+
+function writeJson(key, value) {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+    return true;
+  } catch (e) {
+    setStatus(`浏览器存储写入失败（可能已满）：${e?.name || e}`, 'err');
+    return false;
+  }
+}
+
+function removeKey(key) {
+  try {
+    localStorage.removeItem(key);
+  } catch {
+    /* 忽略 */
+  }
+}
+
+/* ---------- 持久化：任务在磁盘，由服务端管 ---------- */
+
+/**
+ * 任务数据现在存在磁盘上（服务端 <store>/tasks/<id>.json），不再塞 localStorage ——
+ * 一次任务可能带十几条工具输出，浏览器那 ~5MB 装不下，之前只能一路截断降级。
+ * 页面这边只留「哪个任务是当前打开的」这类 UI 状态，它本来就该是每个浏览器各自的。
+ */
+
+const UI_STATE_KEY = 'lgw.task.ui.v1';
+const LEGACY_INDEX = 'lgw.tasks.v2'; // 上一版存在浏览器的任务索引，仅用于一次性迁移
+const LEGACY_TASK_ITEM = 'lgw.task.';
+const LEGACY_SINGLE = 'lgw.task.v1';
+
+function newId() {
+  if (globalThis.crypto?.randomUUID) return globalThis.crypto.randomUUID();
+  // 兜底也要凑成 UUID 形状：服务端按这个格式校验 id（防目录穿越）
+  const h = () => Math.floor(Math.random() * 65536).toString(16).padStart(4, '0');
+  return `${h()}${h()}-${h()}-4${h().slice(1)}-a${h().slice(1)}-${h()}${h()}${h()}`;
+}
+
+/** 统一的接口调用：非 2xx 时把服务端的错误文案抛出来，界面才能说清原因 */
+async function api(path, options = {}) {
+  const resp = await fetch(path, {
+    headers: options.body ? { 'content-type': 'application/json' } : undefined,
+    ...options,
+  });
+  let data = null;
+  try {
+    data = await resp.json();
+  } catch {
+    /* 空响应或无 JSON */
+  }
+  if (!resp.ok) {
+    const err = new Error(data?.error || `HTTP ${resp.status}`);
+    err.status = resp.status;
+    throw err;
+  }
+  return data;
+}
+
+/**
+ * 设置面板的值 ↔ 服务端配置键。
+ * 注意 maxTokens：页面上 0 表示「不设」，磁盘上用 null 表示同一件事。
+ */
+function settingsToPatch(s) {
+  const patch = {
+    system: s.system || '',
+    temperature: Number.isFinite(s.temperature) ? s.temperature : null,
+    maxTokens: Number.isFinite(s.maxTokens) && s.maxTokens > 0 ? Math.floor(s.maxTokens) : null,
+    'ui.showReasoning': s.showReasoning !== false,
+  };
+  // 模型留空表示「用服务端默认」：这时不要写空串上去（服务端会拒，空模型没有意义）
+  if (s.model && String(s.model).trim()) patch.model = String(s.model).trim();
+  return patch;
+}
+
+/** 服务端的值 → 设置面板。缺的项保留页面默认，行为与搬到磁盘之前一致 */
+function applyServerValues(values) {
+  if (!values || typeof values !== 'object') return;
+  if (values.model) state.settings.model = values.model;
+  if (typeof values.system === 'string' && values.system) state.settings.system = values.system;
+  if (Number.isFinite(values.temperature)) state.settings.temperature = values.temperature;
+  if (Number.isFinite(values.maxTokens) && values.maxTokens > 0) state.settings.maxTokens = values.maxTokens;
+  if (values.ui && typeof values.ui.showReasoning === 'boolean') state.settings.showReasoning = values.ui.showReasoning;
+}
+
+/** 服务端 ui 段 → 页面状态（只认页面自己会写的那几项） */
+function uiStateToPatch(ui) {
+  return {
+    'ui.activeId': typeof ui.activeId === 'string' && ui.activeId ? ui.activeId : null,
+    'ui.collapsedDirs': Array.isArray(ui.collapsedDirs) ? ui.collapsedDirs.slice(0, 200) : [],
+    'ui.collapsedTasks': Array.isArray(ui.collapsedTasks) ? ui.collapsedTasks.slice(0, 200) : [],
+  };
+}
+
+function uiStateFromServer(values) {
+  const ui = values?.ui || {};
+  return {
+    activeId: typeof ui.activeId === 'string' ? ui.activeId : null,
+    collapsedDirs: Array.isArray(ui.collapsedDirs) ? ui.collapsedDirs : null,
+    collapsedTasks: Array.isArray(ui.collapsedTasks) ? ui.collapsedTasks : null,
+  };
+}
+
+/** 搬家成功后，本地只保留「草稿态」这类临时信息（服务端已经拿走的部分就别留双份了） */
+function stripUiStateLocal() {
+  const ui = readJson(UI_STATE_KEY, null);
+  const keep = {};
+  for (const k of ['draft', 'draftWorkDir', 'draftMode', 'draftParentId']) {
+    if (ui && ui[k] !== undefined) keep[k] = ui[k];
+  }
+  // 什么都没留下就整个删掉：留一个 {draft: undefined} 会被当成「不是草稿态」，
+  // 于是空态文案和新建流程都会走错分支
+  if (Object.keys(keep).length) writeJson(UI_STATE_KEY, keep);
+  else removeKey(UI_STATE_KEY);
+}
+
+/**
+ * 保存设置。
+ *
+ * 配置现在住在磁盘上（服务端 config.json）：能连上服务端就不再往 localStorage 写，
+ * 否则会出现两个真相（清了缓存又发现设置「变回去了」）。连不上时留一份本地兜底，
+ * 不能因为服务没起就让用户白改一通。
+ */
+/**
+ * 读本地那份设置镜像。
+ *
+ * 它现在是**迁移源**：服务端第一次见到这个页面时，把这份搬到磁盘上；
+ * 同时它也是服务端连不上时的兜底。真相在磁盘上（见 syncSettings）。
+ */
+function loadSettings() {
+  const raw = readJson(STORE_TASK_SETTINGS, null);
+  if (raw && typeof raw === 'object') Object.assign(state.settings, raw);
+}
+
+function saveSettings() {
+  if (!state.settingsOnServer) writeJson(STORE_TASK_SETTINGS, state.settings);
+  pushSettings();
+}
+
+async function pushSettings() {
+  try {
+    await api('/api/settings', { method: 'PUT', body: JSON.stringify({ values: settingsToPatch(state.settings) }) });
+    state.settingsOnServer = true;
+  } catch (e) {
+    state.settingsOnServer = false;
+    writeJson(STORE_TASK_SETTINGS, state.settings);
+    setStatus(`设置没写进磁盘（先存在浏览器里）：${e.message}`, 'err');
+  }
+}
+
+/**
+ * 启动时与服务端对齐配置。
+ *
+ * 服务端还空着（响应里 fresh）→ 把浏览器里这份「有数据就直接搬过去」，搬完就清本地 key；
+ * 服务端已经有一份 → 以服务端为准，**不覆盖**（多个浏览器共用一个磁盘配置，谁也别盖谁）。
+ */
+async function syncSettings() {
+  let data;
+  try {
+    data = await api('/api/settings');
+  } catch {
+    // 服务端没起 / 这个地址被 403：沿用本地那份，不阻断整个页面
+    state.settingsOnServer = false;
+    return;
+  }
+  // 「其他配置」的服务端快照（渲染用；下面的搬家会把更新的一份盖上来）
+  let extraRows = data.rows;
+  let extraValues = data.values;
+  state.settingsOnServer = true;
+  state.settingsFile = data.file || null;
+  const persist = data.values?.ui?.persist === 'browser' ? 'browser' : 'server';
+  state.settingsPersist = persist;
+
+  if (data.fresh) {
+    const localUi = readJson(UI_STATE_KEY, null) || {};
+    const patch = { ...settingsToPatch(state.settings), ...uiStateToPatch(localUi) };
+    try {
+      const r = await api('/api/settings', { method: 'PUT', body: JSON.stringify({ values: patch }) });
+      removeKey(STORE_TASK_SETTINGS);
+      if (r?.values?.ui?.persist !== 'browser') {
+        // 服务端现在拿着「刚才那一份界面状态」，接下来 loadTasks 要以它为准 ——
+        // 否则本地刚被清掉，页面就忘了自己刚才打开的是哪条任务
+        state.uiFromServer = uiStateFromServer(r?.values);
+        stripUiStateLocal();
+      }
+      // 搬家这次响应里就带着白名单行与全套值，直接用它，省一次 GET
+      extraRows = r?.rows || extraRows;
+      extraValues = r?.values || extraValues;
+      state.settingsMigrated = true;
+    } catch {
+      /* 搬不动就继续用本地的，下次进页面再试 */
+    }
+  } else {
+    applyServerValues(data.values);
+    if (persist === 'server') state.uiFromServer = uiStateFromServer(data.values);
+  }
+
+  // 白名单里的「其他配置」：服务端给什么就渲染什么。连不上时 rows 为空 → 整组隐藏
+  renderExtraConfig(extraRows, extraValues);
+}
+
+/**
+ * 界面状态回写（只在不含草稿态的那部分）。
+ *
+ * 用微任务合并同一轮里的多次调用，而不是 setTimeout：界面状态的写入点很多
+ * （切任务、折叠、开草稿都会调），但每次写都很小；同一轮里合并成一次 PUT 就够，
+ * 也省得测试里还要假装推进时钟。
+ */
+let uiPushQueued = false;
+function queueUiPush() {
+  if (uiPushQueued || !state.settingsOnServer) return;
+  uiPushQueued = true;
+  Promise.resolve().then(async () => {
+    uiPushQueued = false;
+    try {
+      await api('/api/settings', {
+        method: 'PUT',
+        body: JSON.stringify({
+          values: uiStateToPatch({
+            activeId: state.activeId,
+            collapsedDirs: state.collapsedDirs,
+            collapsedTasks: state.collapsedTasks,
+          }),
+        }),
+      });
+    } catch {
+      /* 界面偏好丢一次无所谓，不值得为此打扰用户 */
+    }
+  });
+}
+
+/**
+ * 只存「当前打开哪条」这类界面状态，任务内容一律在服务端。
+ *
+ * `ui.persist` = `server`（默认）时写磁盘，清缓存/换浏览器都还在；
+ * 切成 `browser` 就退回「每个浏览器各自一份」的老语义。
+ * 草稿态（还没落盘的任务）无论如何都留在浏览器 —— 它是临时的，不该跨浏览器同步。
+ */
+function saveUiState() {
+  const ui = {
+    activeId: state.activeId,
+    draft: state.draft,
+    draftWorkDir: state.draftWorkDir,
+    draftMode: state.draftMode,
+    draftParentId: state.draftParentId,
+    collapsedDirs: state.collapsedDirs,
+    collapsedTasks: state.collapsedTasks,
+  };
+  if (state.settingsPersist === 'browser' || !state.settingsOnServer) {
+    writeJson(UI_STATE_KEY, ui);
+    return;
+  }
+  writeJson(UI_STATE_KEY, {
+    draft: ui.draft,
+    draftWorkDir: ui.draftWorkDir,
+    draftMode: ui.draftMode,
+    draftParentId: ui.draftParentId,
+  });
+  queueUiPush();
+}
+
+function normalizeTask(t) {
+  if (!t || typeof t.id !== 'string' || !t.id) return null;
+  const created = Number(t.createdAt);
+  const updated = Number(t.updatedAt);
+  const base = Number.isFinite(created) ? created : Date.now();
+  return {
+    id: t.id,
+    title: typeof t.title === 'string' && t.title.trim() ? t.title.trim() : '未命名任务',
+    workDir: typeof t.workDir === 'string' && t.workDir ? t.workDir : null,
+    mode: normalizeMode(t.mode),
+    createdAt: base,
+    updatedAt: Number.isFinite(updated) ? updated : base,
+    renamed: Boolean(t.renamed),
+    // 服务端在保存时算好的回答轮数，侧边栏据此显示「已完成 / 未开始」
+    replies: Number.isFinite(Number(t.replies)) && Number(t.replies) > 0 ? Number(t.replies) : 0,
+    // 任务树：指向父任务（同一工作目录下的另一条），没有就是顶层
+    parentId: typeof t.parentId === 'string' && t.parentId && t.parentId !== t.id ? t.parentId : null,
+  };
+}
+
+/** 从首条用户消息生成标题（本地先算一次，省得等往返；服务端会算同样的结果） */
+function titleFromMessages(messages) {
+  const first = messages.find((m) => m.role === 'user' && m.content);
+  if (!first) return '新任务';
+  const t = first.content.replace(/\s+/g, ' ').trim();
+  if (!t) return '新任务';
+  return t.length > 24 ? `${t.slice(0, 24)}…` : t;
+}
+
+/** 把服务端返回的消息换成界面用的形状 */
+function adoptMessages(list) {
+  return (Array.isArray(list) ? list : [])
+    .filter((m) => m && (m.content || m.reasoning || m.steps?.length || m.notices?.length))
+    .map((m) => ({
+      role: m.role === 'assistant' ? 'assistant' : 'user',
+      content: String(m.content || ''),
+      reasoning: String(m.reasoning || ''),
+      steps: Array.isArray(m.steps) ? m.steps : [],
+      stepOpen: new Set(),
+      pending: m.pending && m.pending.runId ? m.pending : null,
+      // 撞上限的提示和「继续执行」按钮跟着一起恢复
+      notices: Array.isArray(m.notices) ? m.notices : [],
+      canResume: m.canResume === true,
+    }));
+}
+
+/** 落盘当前任务。草稿态（还没发第一条指令）不创建任务，只记下选好的目录 */
+async function persistActive() {
+  if (!state.activeId) {
+    state.draftWorkDir = state.workDir;
+    saveUiState();
+    return null;
+  }
+  return persistTask(state.activeId, state.messages);
+}
+
+/**
+ * 组一次保存（PUT）的请求体，字符串形式。
+ * 同一个字符串还兼作「这次保存和上次是不是同一份」的指纹 —— 页面在切任务、切模式、
+ * 点目录时都会顺手保存一次，内容没变就完全没必要发这个请求（大任务的历史可能几十 MB）。
+ */
+function taskPutBody(id, messages) {
+  const t = state.tasks.find((x) => x.id === id);
+  const active = id === state.activeId;
+  const cached = state.cache?.get(id);
+  return JSON.stringify({
+    workDir: active ? state.workDir : cached?.workDir,
+    mode: active ? state.mode : cached?.mode,
+    title: t?.title,
+    renamed: t?.renamed,
+    messages: (Array.isArray(messages) ? messages : []).map((m) => ({
+      role: m.role,
+      content: m.content || '',
+      reasoning: m.reasoning || '',
+      steps: m.steps || [],
+      pending: m.pending || null,
+      notices: m.notices || [],
+      canResume: m.canResume === true,
+    })),
+  });
+}
+
+/** 指纹表（测试里的 state 可能是手写的，缺了就现补一个） */
+function savedBodies() {
+  if (!(state.savedBodies instanceof Map)) state.savedBodies = new Map();
+  return state.savedBodies;
+}
+
+/** 记下「服务端现在就是这份内容」：刚读回来的任务可以直接记，省掉切走时那一次原样重存 */
+function markSaved(id, messages) {
+  if (id) savedBodies().set(id, taskPutBody(id, messages));
+}
+
+/** 把某一条任务的历史落盘。后台跑完的任务也用它，存的必须是它自己的历史 */
+async function persistTask(id, messages) {
+  if (!id || !Array.isArray(messages)) return null;
+  const body = taskPutBody(id, messages);
+  // 和上次存过的一模一样：这不是一次修改（多半只是点了下别的任务），请求都不发
+  if (savedBodies().get(id) === body) return state.tasks.find((x) => x.id === id) || null;
+  const t = state.tasks.find((x) => x.id === id);
+  const active = id === state.activeId;
+  try {
+    const data = await api(`/api/tasks/${id}`, { method: 'PUT', body });
+    // 采用服务端算出来的标题/时间（自动命名规则只在服务端实现一份）
+    if (t && data?.task) {
+      t.title = data.task.title;
+      t.workDir = data.task.workDir;
+      t.mode = data.task.mode;
+      t.updatedAt = data.task.updatedAt;
+      // 回答轮数由服务端算，拿到后侧边栏就能从「未开始」翻成「已完成」
+      t.replies = Number(data.task.replies) || 0;
+    }
+    // 以服务端真正存下来的那份为准记指纹（标题可能被服务端自动改了名）
+    markSaved(id, Array.isArray(data?.task?.messages) ? data.task.messages : messages);
+    return data?.task || null;
+  } catch (e) {
+    setStatus(`保存任务失败：${e.message}`, 'err');
+    setDot('err');
+    return null;
+  }
+}
+
+/** 草稿态在首条指令发出时落成一条真实任务（避免留下一堆空任务） */
+async function ensureTask() {
+  if (state.activeId && state.tasks.some((t) => t.id === state.activeId)) {
+    state.draft = false;
+    return state.activeId;
+  }
+  const id = newId();
+  const title = titleFromMessages(state.messages);
+  try {
+    const data = await api('/api/tasks', {
+      method: 'POST',
+      body: JSON.stringify({
+        id,
+        title,
+        workDir: state.workDir,
+        mode: state.mode,
+        messages: [],
+        // 派生出的子任务：服务端会校验父任务同目录且存在，不合法就落成顶层
+        parentId: state.draftParentId,
+      }),
+    });
+    const meta = normalizeTask(data.task);
+    state.tasks = [meta, ...state.tasks.filter((t) => t.id !== meta.id)];
+    state.activeId = meta.id;
+    state.draft = false;
+    state.draftWorkDir = null;
+    state.draftParentId = null;
+    saveUiState();
+    return meta.id;
+  } catch (e) {
+    setStatus(`新建任务失败：${e.message}`, 'err');
+    setDot('err');
+    return null;
+  }
+}
+
+/** 拉一条任务的完整内容 */
+async function fetchTask(id) {
+  const data = await api(`/api/tasks/${id}`);
+  return data?.task || null;
+}
+
+/* ---------- 从浏览器存储迁移到磁盘 ---------- */
+
+function readLegacyTasks() {
+  const out = [];
+  // 上一版：索引 + 每条任务一个 key
+  const idx = readJson(LEGACY_INDEX, null);
+  if (idx && Array.isArray(idx.tasks) && idx.tasks.length) {
+    for (const t of idx.tasks) {
+      if (!t?.id) continue;
+      const rec = readJson(LEGACY_TASK_ITEM + t.id, null);
+      out.push({
+        title: t.title,
+        workDir: t.workDir,
+        renamed: Boolean(t.renamed),
+        createdAt: Number(t.createdAt) || Date.now(),
+        updatedAt: Number(t.updatedAt) || Date.now(),
+        messages: Array.isArray(rec?.messages) ? rec.messages : [],
+      });
+    }
+  } else {
+    // 更早的一版：只有一条任务
+    const single = readJson(LEGACY_SINGLE, null);
+    if (single && Array.isArray(single.messages) && single.messages.length) {
+      out.push({
+        title: null,
+        workDir: single.workDir,
+        renamed: false,
+        createdAt: Date.now(),
+        updatedAt: Date.now(),
+        messages: single.messages,
+      });
+    }
+  }
+  return out;
+}
+
+function clearLegacyTasks() {
+  const idx = readJson(LEGACY_INDEX, null);
+  if (idx && Array.isArray(idx.tasks)) {
+    for (const t of idx.tasks) if (t?.id) removeKey(LEGACY_TASK_ITEM + t.id);
+  }
+  removeKey(LEGACY_INDEX);
+  removeKey(LEGACY_SINGLE);
+}
+
+/** 服务端一条任务都没有时，把浏览器里的旧数据搬上去（只做一次） */
+async function migrateLegacyTasks() {
+  const legacy = readLegacyTasks();
+  if (!legacy.length) return 0;
+  let moved = 0;
+  for (const t of legacy) {
+    const id = newId();
+    try {
+      await api('/api/tasks', {
+        method: 'POST',
+        body: JSON.stringify({ id, title: t.title, workDir: t.workDir, messages: t.messages }),
+      });
+      moved++;
+    } catch {
+      /* 单条失败不阻断其余 */
+    }
+  }
+  if (moved) clearLegacyTasks();
+  return moved;
+}
+
+/* ---------- 载入 ---------- */
+
+async function loadTasks() {
+  const ui = readJson(UI_STATE_KEY, null);
+  state.draft = ui ? Boolean(ui.draft) : true;
+  state.draftWorkDir = typeof ui?.draftWorkDir === 'string' ? ui.draftWorkDir : null;
+  state.draftMode = normalizeMode(ui?.draftMode);
+  state.draftParentId = typeof ui?.draftParentId === 'string' && ui.draftParentId ? ui.draftParentId : null;
+  // 折叠状态是纯界面偏好，存浏览器里；数量封顶，避免这份 JSON 无限长
+  state.collapsedDirs = Array.isArray(ui?.collapsedDirs)
+    ? ui.collapsedDirs.filter((d) => typeof d === 'string').slice(0, 200)
+    : [];
+  state.collapsedTasks = Array.isArray(ui?.collapsedTasks)
+    ? ui.collapsedTasks.filter((d) => typeof d === 'string').slice(0, 200)
+    : [];
+  state.activeId = typeof ui?.activeId === 'string' ? ui.activeId : null;
+
+  // 服务端也存了一份界面状态（ui.persist=server）时以它为准：换个浏览器也能接着上次看。
+  // 草稿态不在此列 —— 它属于「这个浏览器还没落盘的东西」。
+  if (state.uiFromServer) {
+    state.activeId = state.uiFromServer.activeId;
+    if (state.uiFromServer.collapsedDirs) {
+      state.collapsedDirs = state.uiFromServer.collapsedDirs.filter((d) => typeof d === 'string').slice(0, 200);
+    }
+    if (state.uiFromServer.collapsedTasks) {
+      state.collapsedTasks = state.uiFromServer.collapsedTasks.filter((d) => typeof d === 'string').slice(0, 200);
+    }
+  }
+
+  let list;
+  let info;
+  try {
+    const data = await api('/api/tasks');
+    list = Array.isArray(data?.tasks) ? data.tasks : [];
+    state.prunedCount = Array.isArray(data?.removed) ? data.removed.length : 0;
+    info = data;
+  } catch (e) {
+    state.tasks = [];
+    state.loadError = e.message;
+    setStatus(`无法读取任务记录：${e.message}`, 'err');
+    setDot('err');
+    return;
+  }
+  state.storeInfo = info || null;
+
+  // 服务端还空着，而浏览器里有旧数据 → 搬过去
+  if (!list.length && readLegacyTasks().length) {
+    const moved = await migrateLegacyTasks();
+    if (moved) {
+      state.migrated = moved;
+      try {
+        const again = await api('/api/tasks');
+        list = Array.isArray(again?.tasks) ? again.tasks : [];
+        state.storeInfo = again;
+      } catch {
+        /* 迁移后重读失败就先空着 */
+      }
+    }
+  }
+
+  state.tasks = list.map(normalizeTask).filter(Boolean);
+  // 折叠状态是纯界面偏好，但删掉的任务 id 会一直留在这份 JSON 里，越积越长。
+  // 列表已经拿全，顺手把指向不存在任务的 id 剔掉（顶层任务被删时子任务会升层，也一并处理）。
+  const liveIds = new Set(state.tasks.map((t) => t.id));
+  state.collapsedTasks = state.collapsedTasks.filter((id) => liveIds.has(id));
+
+  // 用户主动开了新任务（draft）就保持空白；否则恢复上次打开的那条
+  if (state.draft && !state.tasks.length) {
+    state.activeId = null;
+    state.workDir = state.draftWorkDir;
+    state.mode = state.draftMode;
+    state.messages = [];
+    return;
+  }
+  state.draft = false;
+  if (!state.activeId || !state.tasks.some((t) => t.id === state.activeId)) {
+    state.activeId = state.tasks[0]?.id ?? null;
+  }
+  if (!state.activeId) {
+    state.workDir = state.draftWorkDir;
+    state.mode = state.draftMode;
+    state.messages = [];
+    return;
+  }
+  // 先用列表里的元信息把界面撑起来 —— 列表只有元数据，读不到正文也能有目录和模式可用。
+  // （之前这两行放在 await 之后，正文一旦读失败，用户就会莫名其妙被要求重选工作目录。）
+  const meta = state.tasks.find((t) => t.id === state.activeId);
+  state.workDir = meta?.workDir || null;
+  state.mode = normalizeMode(meta?.mode || state.defaultMode);
+  state.messages = [];
+  try {
+    const task = await fetchTask(state.activeId);
+    if (task) {
+      state.workDir = task.workDir || state.workDir;
+      // 模式跟着任务走：切回某个任务时还是当初用的那个模式
+      state.mode = normalizeMode(task.mode || state.mode);
+      state.messages = adoptMessages(task.messages);
+      // 刚读回来的就是盘上那一份：记下指纹，切走时不必再原样存一遍
+      markSaved(state.activeId, state.messages);
+    }
+  } catch (e) {
+    if (e.status === 404) {
+      // 任务在别处被删了（或过期清理），退回收起草态而不是卡住
+      state.tasks = state.tasks.filter((t) => t.id !== state.activeId);
+      state.activeId = null;
+      state.messages = [];
+    } else {
+      // 记下来交给 init 的状态栏统一呈现：loadTasks 里设的状态会被后面覆盖掉
+      state.taskLoadError = e.message;
+      setStatus(`读取任务内容失败：${e.message}`, 'err');
+      setDot('err');
+    }
+  }
+  saveUiState();
+}
+
+/* ---------- 审批模式 ---------- */
+
+/**
+ * 输入框提示由「有没有选工作目录」和「当前模式」共同决定。
+ * 这两件事分别由 setWorkDir 和 renderMode 改，所以收在一个函数里 ——
+ * 否则后调用的那个会把前一个的提示覆盖掉。
+ */
+function renderInputHint() {
+  if (!state.workDir) {
+    dom.input.placeholder = '先选择工作目录后再输入任务';
+    return;
+  }
+  dom.input.placeholder =
+    state.mode === 'plan'
+      ? '描述你想调研的目标：模型只读调研，计划会写入工作目录的 docs/，Enter 执行'
+      : state.mode === 'auto'
+        ? '描述要做的任务（自动模式：写入不再逐个确认），Enter 执行，Shift+Enter 换行'
+        : '描述要做的任务，Enter 执行，Shift+Enter 换行';
+}
+
+function renderMode() {
+  for (const btn of dom.modeSwitch.querySelectorAll('.mode-btn')) {
+    const on = btn.dataset.mode === state.mode;
+    btn.classList.toggle('active', on);
+    btn.setAttribute('aria-pressed', on ? 'true' : 'false');
+  }
+  dom.modeSwitch.dataset.mode = state.mode;
+  dom.modeNote.textContent = MODE_NOTES[state.mode];
+  // 自动模式直接写盘，必须在界面上一直看得见，免得用户忘了自己开过
+  dom.modeNote.className = `mode-note${state.mode === 'auto' ? ' warn' : ''}`;
+  renderInputHint();
+}
+
+/** 切模式：顺手把当前任务记住，下次打开还是这个模式 */
+function setMode(mode, persist = true) {
+  const next = normalizeMode(mode);
+  if (next === state.mode) return;
+  state.mode = next;
+  if (state.activeId) {
+    const t = state.tasks.find((x) => x.id === state.activeId);
+    if (t) t.mode = next;
+    if (persist) persistActive();
+  } else {
+    state.draftMode = next;
+    if (persist) saveUiState();
+  }
+  renderMode();
+  setStatus(`已切到${MODE_LABELS[next]}模式：${MODE_NOTES[next]}`, next === 'auto' ? 'err' : '');
+  if (next === 'auto') {
+    setDot('warn');
+  }
+}
+
+function wireModeSwitch() {
+  dom.modeSwitch.addEventListener('click', (e) => {
+    const btn = e.target.closest('.mode-btn');
+    if (btn) setMode(btn.dataset.mode);
+  });
+}
+
+/* ---------- 刷新后恢复待批准 ---------- */
+
+/**
+ * 挂起态已经落盘了，所以刷新页面甚至重启服务之后，待批准的写入还在。
+ * 打开任务时把它捞回来，重建批准卡片，用户不用重跑整个任务。
+ */
+async function restorePending() {
+  if (!state.activeId) return 0;
+  // 已经有待批准的卡片就不用再来一次（同一次会话内的切换）
+  if (findPendingMessage()) return 0;
+  let data;
+  try {
+    data = await api(`/api/task/pending?taskId=${encodeURIComponent(state.activeId)}`);
+  } catch {
+    return 0; // 查不到就当没有，不影响正常使用
+  }
+  const runs = Array.isArray(data?.runs) ? data.runs : [];
+  if (!runs.length) return 0;
+
+  const minutes = data.ttlMinutes ?? 60;
+  const revived = runs.filter((r) => r.pending);
+  for (const r of revived) {
+    const msg = {
+      role: 'assistant',
+      content: '',
+      reasoning: '',
+      steps: [],
+      stepOpen: new Set(),
+      pending: {
+        runId: r.runId,
+        callId: r.pending.id,
+        name: r.pending.name,
+        label: r.pending.label,
+        preview: r.preview,
+      },
+    };
+    state.messages.push(msg);
+    appendMessage(msg);
+  }
+  if (revived.length) {
+    state.restoredPending = revived.length;
+    setStatus(`恢复了 ${revived.length} 个待批准的写入（挂起态可保留 ${minutes} 分钟）`, '');
+    setDot('warn');
+  }
+  return revived.length;
+}
+
+/* ---------- 任务侧边栏 ---------- */
+
+function fmtRelative(ts) {
+  const min = Math.floor((Date.now() - ts) / 60000);
+  if (min < 1) return '刚刚';
+  if (min < 60) return `${min} 分钟前`;
+  const h = Math.floor(min / 60);
+  if (h < 24) return `${h} 小时前`;
+  return `${Math.floor(h / 24)} 天前`;
+}
+
+function fmtDateTime(ts) {
+  const d = new Date(ts);
+  const p = (n) => String(n).padStart(2, '0');
+  return `${p(d.getMonth() + 1)}-${p(d.getDate())} ${p(d.getHours())}:${p(d.getMinutes())}`;
+}
+
+/** 侧边栏里显示目录名就够了，完整路径放 title 里 */
+function baseName(p) {
+  if (!p) return '未选目录';
+  const parts = p.replace(/[\\/]+$/, '').split(/[\\/]/);
+  return parts[parts.length - 1] || p;
+}
+
+function updateRetentionInfo() {
+  const info = state.storeInfo || {};
+  const max = info.maxTasks ?? 20;
+  const days = info.ttlDays ?? 15;   // 服务端会报真实天数，这里只是拿不到时的兜底
+  dom.tasksCount.textContent = `任务 ${state.tasks.length} / ${max}`;
+  setInfo(dom.infoTasks, `${state.tasks.length} / ${max}（滑动 ${days} 天）`);
+
+  // 存储位置放在设置面板里给用户看；侧边栏底部空间小，只显示目录名
+  setInfo(dom.infoStore, info.dir || '（未连接）');
+  if (dom.storePath) {
+    dom.storePath.textContent = info.dir ? `存储 ${baseName(info.dir)}` : '存储未连接';
+    dom.storePath.title = info.dir ? `任务数据存放于：${info.dir}` : '';
+  }
+  setInfo(dom.infoStoreSize, info.bytes ? fmtBytes(info.bytes) : '—');
+
+  if (!state.tasks.length) {
+    dom.tasksRetention.textContent = `滑动保留 ${days} 天`;
+    setInfo(dom.infoRetention, '暂无任务');
+    return;
+  }
+  const oldest = state.tasks.reduce((a, b) => (a.updatedAt < b.updatedAt ? a : b));
+  const text = `最早 ${fmtDateTime(oldest.updatedAt + days * 86400000)} 过期`;
+  dom.tasksRetention.textContent = text;
+  setInfo(dom.infoRetention, text);
+}
+
+/* ---------- 侧边栏：按工作目录分组 ---------- */
+
+/** 分组键：没有工作目录的任务归到一组（空串） */
+const dirKey = (d) => (typeof d === 'string' && d ? d : '');
+
+function dirLabel(dir) {
+  return dir ? baseName(dir) : '未指定目录';
+}
+
+/** 不同目录可能同名（a\src 与 b\src），重名时用最后两段区分 */
+function shortTail(p) {
+  const sep = String(p).includes('\\') ? '\\' : '/';
+  const parts = String(p).split(/[\\/]+/).filter(Boolean);
+  return parts.length >= 2 ? parts.slice(-2).join(sep) : baseName(p);
+}
+
+function isDirCollapsed(dir) {
+  return state.collapsedDirs.includes(dirKey(dir));
+}
+
+/** 折叠/展开一组；纯界面偏好，存浏览器里，不进服务端 */
+function toggleDirCollapsed(dir) {
+  const key = dirKey(dir);
+  state.collapsedDirs = state.collapsedDirs.includes(key)
+    ? state.collapsedDirs.filter((d) => d !== key)
+    : [...state.collapsedDirs, key];
+  saveUiState();
+  renderTasks();
+}
+
+/** 展开某组：切到该组的任务、或在该组下开新任务时调一下，免得「点了没反应」 */
+function expandDir(dir) {
+  const key = dirKey(dir);
+  if (!state.collapsedDirs.includes(key)) return;
+  state.collapsedDirs = state.collapsedDirs.filter((d) => d !== key);
+  saveUiState();
+}
+
+/**
+ * 按工作目录把任务归堆。
+ * 一个目录下本来就可以有多条任务（磁盘上是按任务 id 存的，目录只是分组维度），
+ * 这里只是把这条关系在界面上显式地「映射」出来。
+ */
+function groupTasksByDir(tasks) {
+  const groups = new Map();
+  for (const t of tasks) {
+    const key = dirKey(t.workDir);
+    if (!groups.has(key)) groups.set(key, { key, dir: t.workDir || null, tasks: [] });
+    groups.get(key).tasks.push(t);
+  }
+  for (const g of groups.values()) g.tasks.sort((a, b) => b.updatedAt - a.updatedAt);
+  return [...groups.values()];
+}
+
+/* ---------- 侧边栏：组内再按「派生关系」成树 ---------- */
+
+/**
+ * 把一个目录组里的任务按 parentId 排成树，返回扁平的渲染序列。
+ * 层级只由 parentId 表达，且父任务必须在同一组、不能自指/成环；
+ * 指向不存在或跨目录的父任务一律当顶层 —— 父任务被删掉时，子任务只是升一层，不会消失。
+ * 每层内部仍按最近更新排序，与之前「组内按时间平铺」的观感一致（没有父子关系时就是平铺）。
+ */
+function flattenTree(tasks) {
+  const ids = new Set(tasks.map((t) => t.id));
+  const childrenOf = new Map();
+  const roots = [];
+  for (const t of tasks) {
+    const pid = t.parentId && ids.has(t.parentId) && t.parentId !== t.id ? t.parentId : null;
+    if (pid) {
+      if (!childrenOf.has(pid)) childrenOf.set(pid, []);
+      childrenOf.get(pid).push(t);
+    } else {
+      roots.push(t);
+    }
+  }
+  const byRecent = (a, b) => b.updatedAt - a.updatedAt;
+  roots.sort(byRecent);
+  for (const list of childrenOf.values()) list.sort(byRecent);
+
+  const out = [];
+  const seen = new Set();
+  const walk = (t, depth) => {
+    if (seen.has(t.id)) return; // 防御：数据里万一成了环，也不会无限递归
+    seen.add(t.id);
+    const kids = childrenOf.get(t.id) || [];
+    out.push({ task: t, depth, childCount: kids.length });
+    if (isTaskCollapsed(t.id)) return; // 折叠的父任务：整棵子树藏起来
+    for (const kid of kids) walk(kid, depth + 1);
+  };
+  for (const r of roots) walk(r, 0);
+  return out;
+}
+
+function isTaskCollapsed(id) {
+  return state.collapsedTasks.includes(id);
+}
+
+/** 折叠/展开一条父任务（纯界面偏好，存浏览器里） */
+function toggleTaskCollapsed(id) {
+  state.collapsedTasks = state.collapsedTasks.includes(id)
+    ? state.collapsedTasks.filter((x) => x !== id)
+    : [...state.collapsedTasks, id].slice(-200);
+  saveUiState();
+  renderTasks();
+}
+
+/** 某条任务的祖先链若折叠着就展开 —— 切过去 / 在它下面派生时调，免得「点了没反应」 */
+function expandTaskAncestors(id) {
+  if (!id) return;
+  let changed = false;
+  const guard = new Set();
+  let cur = state.tasks.find((t) => t.id === id);
+  while (cur?.parentId && !guard.has(cur.id)) {
+    guard.add(cur.id);
+    if (state.collapsedTasks.includes(cur.parentId)) {
+      state.collapsedTasks = state.collapsedTasks.filter((x) => x !== cur.parentId);
+      changed = true;
+    }
+    cur = state.tasks.find((t) => t.id === cur.parentId);
+  }
+  if (changed) saveUiState();
+}
+
+function buildGroupHead(group, label, count) {
+  const head = document.createElement('div');
+  head.className = 'task-group-head';
+  const collapsed = isDirCollapsed(group.dir);
+
+  const toggle = document.createElement('button');
+  toggle.className = 'task-group-toggle';
+  toggle.type = 'button';
+  toggle.title = group.dir
+    ? `${group.dir}\n点击${collapsed ? '展开' : '折叠'}`
+    : '这些任务还没指定工作目录';
+  const caret = document.createElement('span');
+  caret.className = 'task-group-caret';
+  caret.textContent = collapsed ? '▸' : '▾';
+  const icon = document.createElement('span');
+  icon.className = 'task-group-icon';
+  icon.textContent = group.dir ? '📁' : '📂';
+  const name = document.createElement('span');
+  name.className = 'task-group-name';
+  name.textContent = label;
+  const badge = document.createElement('span');
+  badge.className = 'task-group-count';
+  badge.textContent = String(count);
+  badge.title = `${count} 个任务`;
+  toggle.append(caret, icon, name, badge);
+  toggle.addEventListener('click', () => toggleDirCollapsed(group.dir));
+
+  // 分组行上的「＋」：直接在这个目录下再加一条任务
+  const add = document.createElement('button');
+  add.className = 'icon-btn task-group-add';
+  add.type = 'button';
+  add.title = group.dir ? `在 ${group.dir} 下再加一条任务` : '再加一条任务';
+  add.textContent = '＋';
+  add.addEventListener('click', (e) => {
+    e.stopPropagation();
+    startDraft(group.dir);
+  });
+
+  head.append(toggle, add);
+  return head;
+}
+
+/**
+ * 一条任务行。depth 是它在任务树里的层级（0 = 顶层），childCount 是直接子任务数。
+ * 有子任务的行首多一个展开/折叠箭头，于是「一个任务是另一个任务的延续」在列表里看得见。
+ */
+function buildTaskRow(t, { depth = 0, childCount = 0 } = {}) {
+  const item = document.createElement('div');
+  // 用 runs 而不是 runningId：后台跑着的任务（当前没在看）也要显示成进行中
+  const running = state.runs.has(t.id) || t.id === state.runningId;
+  const classes = ['session-item'];
+  if (t.id === state.activeId) classes.push('active');
+  if (running) classes.push('running');
+  // 派生出来的子任务缩进一级，并画一条竖线表明从属关系
+  if (depth > 0) classes.push('child', `depth-${Math.min(depth, 3)}`);
+  if (childCount) classes.push('has-children');
+  item.className = classes.join(' ');
+
+  // 有子任务的父任务：可以整棵收起（列表太长时很有用）。放在 main 之外，避免按钮嵌套按钮
+  if (childCount) {
+    const collapsed = isTaskCollapsed(t.id);
+    const caret = document.createElement('button');
+    caret.className = 'task-caret';
+    caret.type = 'button';
+    caret.textContent = collapsed ? '▸' : '▾';
+    caret.title = collapsed ? `展开 ${childCount} 个子任务` : `收起 ${childCount} 个子任务`;
+    caret.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+    caret.addEventListener('click', (e) => {
+      e.stopPropagation();
+      toggleTaskCollapsed(t.id);
+    });
+    item.appendChild(caret);
+  }
+
+  const main = document.createElement('button');
+  main.className = 'session-main';
+  main.type = 'button';
+  const title = document.createElement('span');
+  title.className = 'session-title';
+  title.textContent = t.title;
+  title.title = t.title;
+  const sub = document.createElement('span');
+  sub.className = 'session-wd';
+  // 目录已经提成分组标题了，任务行只留时间；子任务多一个「↳」表明它是派生出来的
+  sub.textContent = `${depth > 0 ? '↳ ' : ''}${fmtRelative(t.updatedAt)}`;
+  sub.title = t.workDir || '';
+
+  // 列表只要一个效果：进行中的在呼吸，已完成的常亮。文字放 tooltip 就够了
+  const dot = document.createElement('span');
+  dot.className = running ? 'task-dot running' : t.replies > 0 ? 'task-dot done' : 'task-dot';
+  dot.title = running ? '进行中' : t.replies > 0 ? '已完成' : '未开始';
+
+  main.append(title, sub);
+  main.addEventListener('click', () => switchTask(t.id));
+
+  const acts = document.createElement('div');
+  acts.className = 'session-acts';
+  // 在这条任务下派生一个子任务：工作目录跟它一致，于是在树上长出一支
+  const add = document.createElement('button');
+  add.className = 'icon-btn task-row-add';
+  add.type = 'button';
+  add.title = '在这条任务下新建子任务（同一个工作目录）';
+  add.textContent = '＋';
+  add.addEventListener('click', (e) => {
+    e.stopPropagation();
+    startDraft(t.workDir, t.id);
+  });
+  const rename = document.createElement('button');
+  rename.className = 'icon-btn';
+  rename.type = 'button';
+  rename.title = '重命名';
+  rename.textContent = '✎';
+  rename.addEventListener('click', (e) => {
+    e.stopPropagation();
+    beginRename(item, t);
+  });
+  const del = document.createElement('button');
+  del.className = 'icon-btn danger';
+  del.type = 'button';
+  del.title = '删除';
+  del.textContent = '✕';
+  del.addEventListener('click', (e) => {
+    e.stopPropagation();
+    confirmDelete(t);
+  });
+  acts.append(add, rename, del);
+
+  item.append(main, dot, acts);
+  return item;
+}
+
+/** 草稿（点了「＋」但还没发出第一条指令）也占一行，让用户看见它将落在哪个目录 */
+function buildDraftRow(depth = 0) {
+  const item = document.createElement('div');
+  item.className = `session-item draft${depth > 0 ? ` child depth-${Math.min(depth, 3)}` : ''}`;
+  const main = document.createElement('div');
+  main.className = 'session-main';
+  const title = document.createElement('span');
+  title.className = 'session-title';
+  title.textContent = '新任务';
+  const sub = document.createElement('span');
+  sub.className = 'session-wd';
+  sub.textContent = '发出第一条指令后保存';
+  main.append(title, sub);
+  const dot = document.createElement('span');
+  dot.className = 'task-dot';
+  item.append(main, dot);
+  return item;
+}
+
+function renderTasks() {
+  dom.taskList.innerHTML = '';
+  if (!state.tasks.length) {
+    const hint = document.createElement('div');
+    hint.className = 'sessions-empty';
+    hint.textContent = state.draft ? '新任务：选好目录、发出第一条指令就会保存' : '还没有任务，发出第一条指令就会自动创建';
+    dom.taskList.appendChild(hint);
+    updateRetentionInfo();
+    return;
+  }
+
+  const groups = groupTasksByDir(state.tasks);
+  const draftKey = state.draft ? dirKey(state.draftWorkDir) : null;
+  // 草稿所在的目录可能一条任务都还没有，补一个空组出来，不然「＋」点了看不见落点
+  if (state.draft && !groups.some((g) => g.key === draftKey)) {
+    groups.push({ key: draftKey, dir: state.draftWorkDir || null, tasks: [] });
+  }
+  // 组间按「组里最新的一条」排序；草稿所在的组顶到最前面
+  const rank = (g) => (state.draft && g.key === draftKey ? Number.MAX_SAFE_INTEGER : g.tasks[0]?.updatedAt || 0);
+  groups.sort((a, b) => rank(b) - rank(a));
+
+  const sameName = new Map();
+  for (const g of groups) {
+    const label = dirLabel(g.dir);
+    sameName.set(label, (sameName.get(label) || 0) + 1);
+  }
+
+  for (const g of groups) {
+    const box = document.createElement('div');
+    box.className = 'task-group';
+    const isDraftHere = state.draft && g.key === draftKey;
+    const label = g.dir && sameName.get(dirLabel(g.dir)) > 1 ? shortTail(g.dir) : dirLabel(g.dir);
+
+    box.appendChild(buildGroupHead(g, label, g.tasks.length + (isDraftHere ? 1 : 0)));
+
+    const body = document.createElement('div');
+    body.className = 'task-group-body';
+    body.hidden = isDirCollapsed(g.dir);
+
+    // 组内再按派生关系排成树（没有父子关系时就是原来的平铺）
+    const rows = flattenTree(g.tasks);
+    // 草稿行：派生出来的草稿挂在它的父任务下面，顶层草稿仍放在组内最前面
+    const draftParent = isDraftHere && state.draftParentId ? state.draftParentId : null;
+    const parentRendered = draftParent && rows.some((r) => r.task.id === draftParent);
+    if (isDraftHere && !parentRendered) body.appendChild(buildDraftRow());
+    for (const r of rows) {
+      body.appendChild(buildTaskRow(r.task, { depth: r.depth, childCount: r.childCount }));
+      if (isDraftHere && draftParent === r.task.id) body.appendChild(buildDraftRow(r.depth + 1));
+    }
+
+    box.appendChild(body);
+    dom.taskList.appendChild(box);
+  }
+  updateRetentionInfo();
+}
+
+function beginRename(item, t) {
+  item.innerHTML = '';
+  const input = document.createElement('input');
+  input.className = 'session-rename';
+  input.value = t.title;
+  item.appendChild(input);
+  input.focus();
+  input.select();
+
+  let done = false;
+  const commit = async (save) => {
+    if (done) return; // Enter 之后还会触发一次 blur，这里去重
+    done = true;
+    if (save) {
+      const v = input.value.replace(/\s+/g, ' ').trim();
+      t.title = v ? v.slice(0, 40) : '未命名任务';
+      t.renamed = true; // 标记为用户命名，后续不再被首条消息自动覆盖
+      // 改名要落到磁盘，否则刷新就丢了
+      try {
+        await api(`/api/tasks/${t.id}`, {
+          method: 'PUT',
+          body: JSON.stringify({ title: t.title, renamed: true, workDir: t.workDir, messages: state.messages }),
+        });
+      } catch (e) {
+        setStatus(`重命名失败：${e.message}`, 'err');
+      }
+    }
+    renderTasks();
+  };
+
+  input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      commit(true);
+    } else if (e.key === 'Escape') {
+      e.preventDefault();
+      commit(false);
+    }
+  });
+  input.addEventListener('blur', () => commit(true));
+  input.addEventListener('click', (e) => e.stopPropagation());
+}
+
+async function confirmDelete(t) {
+  // 子任务不会被连带删掉（那是别人的工作），只是升到上一层，这里先说清楚
+  const kids = state.tasks.filter((x) => x.parentId === t.id).length;
+  const extra = kids ? `\n它下面的 ${kids} 个子任务不会一起删，会升到上一层。` : '';
+  if (!window.confirm(`删除任务「${t.title}」？\n该任务的记录（含工具调用输出）会从磁盘上立即删除，无法恢复。${extra}`)) return;
+  await deleteTaskById(t.id);
+}
+
+async function deleteTaskById(id) {
+  try {
+    await api(`/api/tasks/${id}`, { method: 'DELETE' });
+  } catch (e) {
+    setStatus(`删除失败：${e.message}`, 'err');
+    setDot('err');
+    return;
+  }
+  state.tasks = state.tasks.filter((t) => t.id !== id);
+  // 删掉的任务不该再留在缓存里，正在跑的也一并停掉（任务是它自己删的）
+  state.cache.delete(id);
+  savedBodies().delete(id);
+  const run = state.runs.get(id);
+  if (run) {
+    state.runs.delete(id);
+    try {
+      run.abort();
+    } catch {
+      /* 已经结束了 */
+    }
+  }
+  if (state.activeId === id) {
+    state.activeId = state.tasks[0]?.id ?? null;
+    state.draft = state.activeId === null;
+    state.messages = [];
+    state.workDir = null;
+    if (state.activeId) {
+      try {
+        const task = await fetchTask(state.activeId);
+        state.workDir = task?.workDir || null;
+        state.messages = adoptMessages(task?.messages);
+      } catch {
+        /* 读不到就先空着 */
+      }
+    }
+    state.usageTotal = { prompt: 0, completion: 0 };
+    setInfo(dom.infoUsage, '—');
+    setWorkDir(state.workDir);
+  }
+  saveUiState();
+  syncRunState();
+  renderTasks();
+  renderAll();
+  setStatus('已删除任务', '');
+}
+
+/** 停止：只停当前正在看的这条任务，后台别的不受影响 */
+function abortIfStreaming() {
+  const c = state.runs.get(state.activeId);
+  if (c) c.abort();
+}
+
+/**
+ * 切走当前任务：只落盘 + 存进缓存，**绝不中断正在跑的**。
+ * 任务在后台继续跑，切回来时接着看就行。
+ */
+async function switchTask(id) {
+  if (id === state.activeId) return;
+  await persistActive(); // 先把当前任务存好再切走
+  rememberActive();      // 顺带把内存态存进缓存，切回来直接恢复
+  state.activeId = id;
+  state.draft = false;
+  const meta = state.tasks.find((x) => x.id === id);
+
+  const cached = state.cache.get(id);
+  if (cached) {
+    // 已经在本页加载过：直接用缓存，不重新拉服务端（那正是「切回来像刷新了一样」的原因）
+    state.messages = cached.messages;
+    state.workDir = cached.workDir ?? meta?.workDir ?? null;
+    state.mode = normalizeMode(cached.mode || meta?.mode);
+    state.usageTotal = cached.usageTotal || { prompt: 0, completion: 0 };
+  } else {
+    state.messages = [];
+    state.workDir = meta?.workDir || null;
+    state.mode = normalizeMode(meta?.mode);
+    setWorkDir(state.workDir, false);
+    renderTasks();
+    renderAll();
+    renderMode();
+    try {
+      const task = await fetchTask(id);
+      state.workDir = task?.workDir || state.workDir;
+      state.mode = normalizeMode(task?.mode || state.mode);
+      state.messages = adoptMessages(task?.messages);
+    } catch (e) {
+      setStatus(`读取任务失败：${e.message}`, 'err');
+      setDot('err');
+      return;
+    }
+    state.usageTotal = { prompt: 0, completion: 0 };
+    state.cache.set(id, {
+      messages: state.messages,
+      workDir: state.workDir,
+      mode: state.mode,
+      usageTotal: state.usageTotal,
+    });
+    // 刚从服务端读回来的内容：记下指纹，免得切走时又把它原样 PUT 回去
+    markSaved(id, state.messages);
+  }
+
+  setWorkDir(state.workDir, false);
+  syncRunState();
+  setInfo(
+    dom.infoUsage,
+    state.usageTotal.prompt || state.usageTotal.completion
+      ? `输入 ${state.usageTotal.prompt} / 输出 ${state.usageTotal.completion}`
+      : '—',
+  );
+  expandDir(state.workDir); // 目标那条所在的目录若折叠着，先展开
+  expandTaskAncestors(id);  // 它的祖先任务若折叠着，也一并展开，否则切过去看不到它
+  renderTasks();
+  renderAll();
+  renderMode();
+  saveUiState();
+  const t = state.tasks.find((x) => x.id === id);
+  if (state.streaming) setStatus('进行中', '');
+  else setStatus(t ? `已切换到「${t.title}」（${MODE_LABELS[state.mode]}模式）` : '就绪', '');
+  await restorePending();
+  if (!state.workDir) openDirModal();
+  else if (!state.streaming) dom.input.focus();
+}
+
+/** 把当前任务的内存态存进缓存（切走、开新任务时用） */
+function rememberActive() {
+  if (!state.activeId) return;
+  state.cache.set(state.activeId, {
+    messages: state.messages,
+    workDir: state.workDir,
+    mode: state.mode,
+    usageTotal: state.usageTotal,
+  });
+}
+
+/**
+ * 把全局的 streaming / runningId 对齐到「当前任务」。
+ * 别的任务在后台跑时，当前任务不该被显示成进行中，也不该被禁用输入。
+ */
+function syncRunState() {
+  state.streaming = state.runs.has(state.activeId);
+  state.runningId = state.streaming ? state.activeId : null;
+  state.controller = state.runs.get(state.activeId) || null;
+  dom.send.disabled = state.streaming || !state.workDir;
+  dom.stop.hidden = !state.streaming;
+}
+
+
+/**
+ * 「新任务」：先置为草稿态，首条消息发出时才落盘，避免留下一堆空任务。
+ *
+ * dir 不传   = 沿用当前工作目录（顶部「＋ 新任务」按钮，多数情况是在同一个项目里连着做几件事）
+ * dir 传路径 = 就在这个目录下新建（侧边栏分组行上的「＋」，于是同一目录可以有多条任务）
+ * dir 传 null = 明确不要目录（顶部可再选）
+ *
+ * parentId   = 派生到某条已有任务之下（侧边栏任务行上的「＋」），形成任务树；
+ *              非空时它必须是列表里真实存在的任务，否则就当顶层新建。
+ */
+async function startDraft(dir, parentId = null) {
+  const target = dir === undefined ? state.workDir : typeof dir === 'string' && dir ? dir : null;
+  const parent = typeof parentId === 'string' && parentId ? state.tasks.find((t) => t.id === parentId) : null;
+  await persistActive(); // 先把当前任务存好
+  rememberActive();      // 后台还在跑的话，它的历史留在缓存里，跑完自己会落盘
+  state.activeId = null;
+  state.draft = true;
+  state.draftWorkDir = target;
+  state.draftParentId = parent ? parent.id : null;
+  state.workDir = target;
+  state.draftMode = state.mode; // 新任务沿用当前模式
+  state.messages = [];
+  state.usageTotal = { prompt: 0, completion: 0 };
+  setInfo(dom.infoUsage, '—');
+  expandDir(target); // 这一组要是折叠着，先展开
+  expandTaskAncestors(state.draftParentId); // 派生到折叠着的父任务下时，先把它展开
+  saveUiState();
+  syncRunState(); // 草稿态不属于任何任务，输入不该被别的任务的运行禁用
+  renderTasks();
+  renderAll();
+  renderMode();
+  setWorkDir(target, false);
+  if (!target) {
+    setStatus('已开始新任务，请选择工作目录');
+    openDirModal();
+  } else if (state.draftParentId) {
+    setStatus(`已在「${parent.title}」下新建子任务（工作目录 ${target}）`, '');
+    dom.input.focus();
+  } else {
+    setStatus(`已开始新任务（工作目录 ${target}，点顶部可改）`, '');
+    dom.input.focus();
+  }
+}
+
+function toggleSidebar() {
+  if (window.matchMedia('(max-width: 820px)').matches) dom.sidebar.classList.toggle('open');
+  else dom.sidebar.classList.toggle('collapsed');
+}
+
+/* ---------- 渲染消息 ---------- */
+
+function buildMsgEl(msg) {
+  const wrap = document.createElement('div');
+  wrap.className = `msg ${msg.role}`;
+  const avatar = document.createElement('div');
+  avatar.className = 'avatar';
+  avatar.textContent = msg.role === 'user' ? '你' : 'AI';
+  const bubble = document.createElement('div');
+  bubble.className = 'bubble';
+  wrap.append(avatar, bubble);
+  msg.el = bubble;
+  paintBubble(msg);
+  return wrap;
+}
+
+function renderSteps(container, msg) {
+  container.innerHTML = '';
+  for (const s of msg.steps) {
+    const det = document.createElement('details');
+    det.className = `step ${s.status || 'running'}`;
+
+    const sum = document.createElement('summary');
+    const icon = document.createElement('span');
+    icon.className = 'step-icon';
+    icon.textContent = s.status === 'ok' ? '✓' : s.status === 'fail' ? '✗' : '⋯';
+    const label = document.createElement('span');
+    label.className = 'step-label';
+    label.textContent = s.label || s.name || '工具调用';
+    const brief = document.createElement('span');
+    brief.className = 'step-brief';
+    brief.textContent = s.summary || (s.status === 'running' ? '执行中…' : '');
+    sum.append(icon, label, brief);
+
+    // 写入是被自动放行、还是被计划模式挡下，必须一眼看出来
+    if (s.note) {
+      const note = document.createElement('span');
+      note.className = `step-note${s.status === 'fail' ? ' bad' : ''}`;
+      note.textContent = s.note;
+      sum.appendChild(note);
+    }
+    det.appendChild(sum);
+
+    if (s.content) {
+      const pre = document.createElement('pre');
+      pre.className = 'step-body';
+      pre.textContent = s.content.length > 20000 ? `${s.content.slice(0, 20000)}\n…（已截断显示）` : s.content;
+      det.appendChild(pre);
+    }
+
+    det.open = Boolean(msg.stepOpen?.has(s.id));
+    det.addEventListener('toggle', () => {
+      if (!msg.stepOpen) msg.stepOpen = new Set();
+      if (det.open) msg.stepOpen.add(s.id);
+      else msg.stepOpen.delete(s.id);
+    });
+    container.appendChild(det);
+  }
+
+  if (msg.pending) container.appendChild(buildApprovalCard(msg.pending));
+}
+
+function buildApprovalCard(p) {
+  const pv = p.preview || {};
+  const card = document.createElement('div');
+  card.className = 'approval';
+
+  const head = document.createElement('div');
+  head.className = 'approval-head';
+  head.textContent = '需要你批准这次写入';
+
+  const meta = document.createElement('div');
+  meta.className = 'approval-meta';
+  const code = document.createElement('code');
+  code.textContent = pv.path || p.label || '?';
+  const tail = document.createElement('span');
+  tail.textContent = `${pv.exists ? '覆盖已有文件' : '新建文件'} · ${pv.lines || 0} 行 / ${fmtBytes(pv.bytes || 0)}`;
+  meta.append(code, tail);
+
+  const det = document.createElement('details');
+  det.className = 'approval-preview';
+  const dsum = document.createElement('summary');
+  dsum.textContent = '查看将要写入的内容';
+  const pre = document.createElement('pre');
+  pre.textContent = pv.content || '（内容为空）';
+  det.append(dsum, pre);
+
+  const acts = document.createElement('div');
+  acts.className = 'approval-actions';
+  const deny = document.createElement('button');
+  deny.className = 'btn';
+  deny.type = 'button';
+  deny.dataset.act = 'deny';
+  deny.textContent = '拒绝';
+  const ok = document.createElement('button');
+  ok.className = 'btn primary';
+  ok.type = 'button';
+  ok.dataset.act = 'approve';
+  ok.textContent = '批准写入';
+  acts.append(deny, ok);
+
+  card.append(head, meta, det, acts);
+  return card;
+}
+
+/**
+ * 气泡重绘。思维链块与工具步骤块各自增量更新：
+ *  - 思维链只改文本，保住用户的展开状态；
+ *  - 步骤块用签名比对，只在结构变化时重建，正文流式输出时不白重建。
+ */
+function paintBubble(msg) {
+  if (!msg.el) return;
+  if (msg.error) {
+    msg.el.className = 'bubble error';
+    msg.el.textContent = msg.error;
+    return;
+  }
+  msg.el.className = `bubble${msg.streaming ? ' streaming' : ''}${msg.working ? ' working' : ''}`;
+
+  if (msg.role === 'user') {
+    msg.el.textContent = msg.content;
+    return;
+  }
+
+  const steps = msg.steps || [];
+
+  // 1. 思维链
+  const wantReasoning = msg.reasoning && state.settings.showReasoning !== false;
+  let rbox = msg.el.querySelector(':scope > details.reasoning');
+  if (wantReasoning) {
+    if (!rbox) {
+      rbox = document.createElement('details');
+      rbox.className = 'reasoning';
+      rbox.open = true;
+      msg.reasoningOpen = true;
+      rbox.innerHTML = '<summary></summary><div class="reasoning-body"></div>';
+      msg.el.insertBefore(rbox, msg.el.firstChild);
+    }
+    rbox.querySelector('summary').textContent = `思考过程 · ${msg.reasoning.length} 字`;
+    rbox.querySelector('.reasoning-body').textContent = msg.reasoning;
+    if (msg.reasoningOpen && (msg.content || steps.length)) {
+      rbox.open = false;
+      msg.reasoningOpen = false;
+    }
+  } else if (rbox) {
+    rbox.remove();
+  }
+
+  // 2. 工具步骤 + 待批准卡片
+  let stepBox = msg.el.querySelector(':scope > .steps');
+  if (steps.length || msg.pending) {
+    if (!stepBox) {
+      stepBox = document.createElement('div');
+      stepBox.className = 'steps';
+      const contentEl = msg.el.querySelector(':scope > .content');
+      msg.el.insertBefore(stepBox, contentEl || null);
+      msg.stepsSig = null;
+    }
+    const sig = JSON.stringify([steps.map((s) => [s.id, s.status, s.summary || '']), msg.pending ? msg.pending.callId : null]);
+    if (msg.stepsSig !== sig) {
+      renderSteps(stepBox, msg);
+      msg.stepsSig = sig;
+    }
+  } else if (stepBox) {
+    stepBox.remove();
+    msg.stepsSig = null;
+  }
+
+  // 3. 正文
+  let content = msg.el.querySelector(':scope > .content');
+  if (!content) {
+    content = document.createElement('div');
+    content.className = 'content';
+    msg.el.appendChild(content);
+  }
+  content.innerHTML = renderMarkdown(msg.content || '');
+  enhanceCodeBlocks(content);
+  enhanceTables(content);
+
+  // 4. 提示横幅（上限、空回复、思维链没出正文等）—— 一定要单独显示，
+  //    不能像以前那样「已经有正文就丢掉」，否则关键信息就没了
+  let noticeBox = msg.el.querySelector(':scope > .msg-notices');
+  const notices = msg.notices || [];
+  if (notices.length) {
+    if (!noticeBox) {
+      noticeBox = document.createElement('div');
+      noticeBox.className = 'msg-notices';
+      // 放在正文之前：先解释发生了什么，再给正文
+      const contentEl = msg.el.querySelector(':scope > .content');
+      msg.el.insertBefore(noticeBox, contentEl || null);
+    }
+    noticeBox.textContent = '';
+    for (const text of notices) {
+      const line = document.createElement('div');
+      line.className = 'msg-notice';
+      line.textContent = text;
+      noticeBox.appendChild(line);
+    }
+  } else if (noticeBox) {
+    noticeBox.remove();
+  }
+
+  // 5. 计划模式的「按计划执行」入口
+  let planBar = msg.el.querySelector(':scope > .plan-bar');
+  if (msg.planReady) {
+    if (!planBar) {
+      planBar = document.createElement('div');
+      planBar.className = 'plan-bar';
+      const btnGo = document.createElement('button');
+      btnGo.className = 'btn primary';
+      btnGo.type = 'button';
+      btnGo.textContent = '按计划执行';
+      btnGo.title = '切到自动模式并让模型开始动手；仍限制在当前工作目录内';
+      btnGo.addEventListener('click', () => executePlan(msg));
+      const btnManual = document.createElement('button');
+      btnManual.className = 'btn';
+      btnManual.type = 'button';
+      btnManual.textContent = '手动执行';
+      btnManual.title = '切到手动模式，每次写入仍由你确认';
+      btnManual.addEventListener('click', () => executePlan(msg, 'manual'));
+      const hint = document.createElement('span');
+      hint.className = 'plan-hint';
+      planBar.append(btnGo, btnManual, hint);
+      msg.el.appendChild(planBar);
+    }
+    // 计划已经落盘时，把路径直接写在按钮旁边 —— 用户要能自己打开那份文档看
+    const hint = planBar.querySelector('.plan-hint');
+    if (hint) {
+      hint.textContent = msg.planFile
+        ? `已保存到 ${msg.planFile}；模型将按它执行并把结果回填进该文档`
+        : '确认计划无误后再开始，模型将直接改动文件';
+    }
+  } else if (planBar) {
+    planBar.remove();
+  }
+
+  // 6. 撞到轮次上限时的「继续执行」：活干一半不该让用户重新描述一遍
+  let resumeBar = msg.el.querySelector(':scope > .resume-bar');
+  if (msg.canResume) {
+    if (!resumeBar) {
+      resumeBar = document.createElement('div');
+      resumeBar.className = 'resume-bar';
+      const btn = document.createElement('button');
+      btn.className = 'btn primary';
+      btn.type = 'button';
+      btn.textContent = '继续执行';
+      btn.title = '再给一轮额度，接着把没做完的做完';
+      btn.addEventListener('click', () => resumeRun(msg));
+      const hint = document.createElement('span');
+      hint.className = 'plan-hint';
+      hint.textContent = '已经读到的内容都还在，接着往下做';
+      resumeBar.append(btn, hint);
+      msg.el.appendChild(resumeBar);
+    }
+  } else if (resumeBar) {
+    resumeBar.remove();
+  }
+}
+
+/** 撞到上限后一键接着干：历史都在，直接再要一轮 */
+async function resumeRun(msg) {
+  if (state.streaming) return;
+  msg.canResume = false;
+  schedulePaint(msg, true);
+  await send('继续，把没做完的做完。');
+}
+
+/** 计划确认后：切模式 → 让模型接着按计划动手 */
+async function executePlan(msg, mode = 'auto') {
+  if (state.streaming) return;
+  msg.planReady = false;
+  setMode(mode);
+  // 计划已落盘时把它写进这句话里：模型和服务端都知道要按哪一份文档执行
+  const at = msg.planFile ? `（计划已保存到 ${msg.planFile}）` : '';
+  setStatus(`已按计划开始执行（${MODE_LABELS[mode]}模式）${at}`, '');
+  await send(msg.planFile ? `上面的计划我已确认，请按 ${msg.planFile} 里的步骤开始执行。` : '上面的计划我已确认，请开始执行。');
+}
+
+const paintQueue = new WeakSet();
+function schedulePaint(msg, immediate = false) {
+  if (immediate) {
+    paintBubble(msg);
+    scrollToBottom();
+    return;
+  }
+  if (paintQueue.has(msg)) return;
+  paintQueue.add(msg);
+  requestAnimationFrame(() => {
+    paintQueue.delete(msg);
+    paintBubble(msg);
+    scrollToBottom();
+  });
+}
+
+function appendMessage(msg) {
+  dom.messages.appendChild(buildMsgEl(msg));
+  dom.empty.hidden = true;
+  scrollToBottom(true);
+}
+
+function renderAll() {
+  for (const node of dom.messages.querySelectorAll('.msg')) node.remove();
+  for (const msg of state.messages) msg.el = null;
+  const hasMessages = state.messages.length > 0;
+  dom.empty.hidden = hasMessages;
+  for (const msg of state.messages) dom.messages.appendChild(buildMsgEl(msg));
+  if (hasMessages) scrollToBottom(true);
+}
+
+function setBusy(busy) {
+  state.streaming = busy;
+  dom.send.disabled = busy || !state.workDir;
+  dom.stop.hidden = !busy;
+}
+
+/* ---------- 斜杠指令（E 组：计划与审批 / 模型与请求参数 / 会话与用量 / 工作目录 / 手册） ----------
+ * 指令表与解析在 public/task-slash.js（纯逻辑，可在 node 里测）；这里只做 DOM 与状态桥接。
+ * 三条设计决定：
+ *  1. 指令的输出**只进 DOM，不进 state.messages** —— 那是"任务对白"，会被落盘、
+ *     也会被下一次推理带上，把页面操作混进去等于伪造对话历史。
+ *  2. 输出用 textContent（不是 innerHTML）：/files 的文件名来自文件系统，不该有机会变成标签。
+ *  3. 用 .msg 类，好让 renderAll()/切任务时把它一起清掉，不留残影。
+ */
+
+const slash = { open: false, hl: 0, items: [] };
+
+function slashPrint(kind, text) {
+  const el = document.createElement('div');
+  el.className = 'msg slash-msg ' + kind;
+  const box = document.createElement('div');
+  box.className = 'slash-out';
+  box.textContent = String(text);
+  el.appendChild(box);
+  dom.messages.appendChild(el);
+  dom.empty.hidden = true;
+  scrollToBottom(true);
+}
+
+const slashOpts = () => ({ surface: 'hub', hasFileSystem: Boolean(state.config && state.config.fsEnabled) });
+
+/**
+ * 输入框里是否是一个"正在打指令"的前缀（`/pla`）—— 注意 `/plan 描述` 不再算前缀。
+ * 裸 `/`（还没打名字）返回空串：面板据此列出**全部**指令 —— 这就是"指令看起来不全"的那个毛病，
+ * 以前这里要求 `/` 后至少一个字母，于是敲 `/` 什么都不弹（见 docs/20260918-迭代计划-任务页斜杠指令与操作手册页.md）。
+ */
+function slashPrefix() {
+  const m = String(dom.input.value || '').match(/^\s*\/([A-Za-z][A-Za-z0-9_-]*)?$/);
+  return m ? (m[1] || '') : null;
+}
+
+function slashMenuClose() {
+  slash.open = false;
+  slash.items = [];
+  slash.hl = 0;
+  dom.slashMenu.hidden = true;
+  dom.slashMenu.innerHTML = '';
+}
+
+function slashMenuRender() {
+  dom.slashMenu.innerHTML = '';
+  let group = null;
+  slash.items.forEach((c, i) => {
+    if (c.group !== group) {
+      group = c.group;
+      const g = document.createElement('div');
+      g.className = 'slash-menu-group';
+      g.textContent = c.group;
+      dom.slashMenu.appendChild(g);
+    }
+    const row = document.createElement('div');
+    row.className = 'slash-menu-item' + (i === slash.hl ? ' hl' : '');
+    row.dataset.idx = String(i);
+    const name = document.createElement('span');
+    name.className = 'slash-name';
+    name.textContent = TaskSlash.usageLine(c);
+    const desc = document.createElement('span');
+    desc.className = 'slash-desc';
+    desc.textContent = c.help;
+    row.append(name, desc);
+    dom.slashMenu.appendChild(row);
+  });
+  const foot = document.createElement('div');
+  foot.className = 'slash-menu-foot';
+  foot.textContent = '↑↓ 选择 · Tab 补全 · Enter 执行 · Esc 关闭';
+  dom.slashMenu.appendChild(foot);
+  dom.slashMenu.hidden = false;
+}
+
+function slashMenuSync() {
+  const prefix = slashPrefix();
+  if (prefix == null) return slashMenuClose();
+  const items = TaskSlash.suggest(prefix, slashOpts());
+  if (!items.length) return slashMenuClose();
+  slash.items = items;
+  if (slash.hl >= items.length) slash.hl = 0;
+  slash.open = true;
+  slashMenuRender();
+}
+
+function slashMenuMove(delta) {
+  if (!slash.open) return;
+  slash.hl = (slash.hl + delta + slash.items.length) % slash.items.length;
+  slashMenuRender();
+}
+
+/** Tab：把高亮项补全到输入框（**只补全不执行** —— 与网关对话页、CLI 的前缀口径一致） */
+function slashMenuPick() {
+  const c = slash.items[slash.hl];
+  if (!c) return;
+  dom.input.value = '/' + c.name + (c.args && c.args !== '—' ? ' ' : '');
+  autoGrow();
+  slashMenuClose();
+  dom.input.focus();
+}
+
+const joinPath = (base, sub) => String(base).replace(/[\\/]+$/, '') + '/' + String(sub).replace(/^[\\/]+/, '');
+
+function slashCtx() {
+  return {
+    // 页面上的 setMode() 自己会兜非法值；指令层要的是"能不能告诉我切没切成"，所以这里显式校验并回话
+    setMode: (m) => {
+      const key = String(m || '').toLowerCase();
+      if (!MODES.includes(key)) throw new Error('模式只能是 manual / auto / plan（收到 ' + m + '）');
+      setMode(key);
+      return MODE_LABELS[key];
+    },
+    mode: () => state.mode,
+    send: (text) => send(text),
+    busy: () => state.streaming,
+    pending: () => (findPendingMessage() || {}).pending || null,
+    decide: (approved) => decideApproval(approved),
+    workDir: () => state.workDir,
+    hasFileSystem: () => Boolean(state.config && state.config.fsEnabled),
+    print: slashPrint,
+    stop: () => abortIfStreaming(),
+
+    model: () => state.settings.model || (state.config && state.config.model) || '',
+    models: () => state.models.slice(),
+    setModel: async (name) => {
+      const next = String(name).trim();
+      state.settings.model = next;
+      // 指令改的也是同一个下拉：选项不在就补一项再选，别让 select 变空
+      ModelSelect.ensure(dom.setModel, next);
+      await pushSettings();   // 设置住在磁盘上：与设置面板里改模型是同一条路
+    },
+
+    // 单价口径只有一份（lib/pricing.js），所以让服务端算；拿不到就只报 token，绝不编数字
+    cost: async () => {
+      const u = state.usageTotal || { prompt: 0, completion: 0 };
+      const model = state.settings.model || (state.config && state.config.model) || '';
+      const local = `本任务累计：输入 ${u.prompt} / 输出 ${u.completion} / 合计 ${u.prompt + u.completion} tokens`;
+      try {
+        const q = `prompt=${u.prompt}&completion=${u.completion}&model=${encodeURIComponent(model)}`;
+        const r = await api('/api/cost?' + q);
+        return local + '\n' + r.text;
+      } catch (e) {
+        return local + '\n（费用粗估取不到：' + e.message + '；token 数是本地累计的，仍然准。）';
+      }
+    },
+
+    tasks: () => state.tasks.map((t) => ({ id: t.id, title: t.title, workDir: t.workDir, updatedAt: t.updatedAt })),
+    switchTask: (id) => switchTask(id),
+
+    manualUrl: () => location.origin + '/manual',
+    // 假 DOM（测试里）没有 window.open：这时候只回 URL，不抛
+    openManual: (url) => {
+      if (typeof window !== 'undefined' && typeof window.open === 'function') {
+        window.open(url, '_blank', 'noopener');
+      }
+    },
+
+    listFiles: async (sub) => {
+      if (!state.workDir) throw new Error('还没有选择工作目录');
+      const target = sub ? joinPath(state.workDir, sub) : state.workDir;
+      const data = await api('/api/fs/list?path=' + encodeURIComponent(target));
+      const dirs = data.entries.filter((e) => e.type === 'dir');
+      const files = data.entries.filter((e) => e.type !== 'dir');
+      const rows = dirs.map((e) => e.name + '/').concat(files.map((e) => e.name + '  ' + fmtBytes(e.size)));
+      const head = data.path + (data.truncated ? '（条目过多，只列前 2000 项）' : '');
+      if (!rows.length) return head + '\n（空目录）';
+      return head + '\n' + rows.join('\n');
+    },
+
+    switchDir: async (p) => {
+      // 先让服务端确认这是个能读的目录（顺带拿到绝对路径），再切 —— 切完发现不存在就尴尬了
+      const data = await api('/api/fs/list?path=' + encodeURIComponent(p));
+      setWorkDir(data.path);
+      return data.path;
+    },
+
+    init: async (force) => {
+      if (!state.workDir) throw new Error('还没有选择工作目录');
+      return api('/api/init', { method: 'POST', body: JSON.stringify({ workDir: state.workDir, force: Boolean(force) }) });
+    },
+
+    instructions: async () => {
+      if (!state.workDir) throw new Error('还没有选择工作目录');
+      const m = await api('/api/memory?path=' + encodeURIComponent(state.workDir));
+      const head = '工作目录：' + m.workDir + '\n注入上限：' + m.limit + ' 字符（超出截断）';
+      if (!m.hasAny) return head + '\n这里还没有 AGENTS.md / CLAUDE.md。用 /init 生成一份骨架。';
+      const parts = [head];
+      for (const f of m.files) {
+        if (!f.exists) {
+          parts.push(f.name + '：不存在');
+          continue;
+        }
+        parts.push(f.name + '：' + f.bytes + ' 字节' + (f.truncated ? '（超上限，注入时截断）' : '') + '\n' + f.content);
+      }
+      if (m.files.filter((f) => f.exists).length > 1) parts.push('（两份都存在时都会注入，AGENTS.md 在前）');
+      return parts.join('\n\n');
+    },
+  };
+}
+
+/* ---------- 工作目录 ---------- */
+
+let rootsCache = [];
+let currentDir = null;
+let selectedDir = null;
+
+/**
+ * 设置当前工作目录。工作目录是任务的元信息，服务端存在索引里，所以切换任务时
+ * 靠列表接口就能立刻显示，不必等整条任务内容读出来。
+ */
+function setWorkDir(dir, persist = true) {
+  // 选了一模一样的目录不算一次修改：时间戳别动，也别白写一次盘
+  const changed = dir !== state.workDir;
+  state.workDir = dir;
+  if (persist) {
+    if (state.activeId) {
+      if (changed) {
+        const t = state.tasks.find((x) => x.id === state.activeId);
+        if (t) {
+          t.workDir = dir;
+          t.updatedAt = Date.now();
+        }
+        // 落到磁盘（异步，失败会在状态栏报出来）
+        persistActive();
+      }
+    } else {
+      state.draftWorkDir = dir;
+      saveUiState();
+    }
+    renderTasks();
+  }
+  dom.workdirPath.textContent = dir || '未选择';
+  dom.workdirChip.title = dir ? `点击更换工作目录：${dir}` : '点击选择工作目录';
+  const ready = Boolean(dir);
+  dom.input.disabled = !ready;
+  renderInputHint();
+  dom.send.disabled = !ready;
+  dom.emptyTitle.textContent = ready ? '描述你的任务' : '先选择一个工作目录';
+  dom.emptyDesc.innerHTML = ready
+    ? '模型会先看目录结构再动手，写入文件前会先征求你的批准。'
+    : '任务模式下模型会通过工具<b>真正读写</b>你选定的目录：可列目录、读文件、搜索内容；写入文件前会先征求你的批准。所有操作都被限制在该目录之内。';
+  dom.chipPick.hidden = ready; // 已选目录后这个按钮就没意义了（换目录点顶部那根路径条）
+  if (!ready) setStatus('等待选择工作目录');
+}
+
+async function loadRoots() {
+  try {
+    const resp = await fetch('/api/fs/roots');
+    const data = await resp.json();
+    if (!resp.ok) throw new Error(data.error || `HTTP ${resp.status}`);
+    rootsCache = data.roots || [];
+    dom.dirNote.textContent = '双击目录进入，选中后点「选为工作目录」';
+  } catch (e) {
+    rootsCache = [];
+    dom.dirNote.textContent = `无法读取根目录：${e.message}`;
+  }
+  dom.dirRoots.innerHTML = '';
+  for (const root of rootsCache) {
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'dir-root';
+    btn.textContent = root.label;
+    btn.title = root.path;
+    btn.addEventListener('click', () => loadDir(root.path));
+    dom.dirRoots.appendChild(btn);
+  }
+  return rootsCache;
+}
+
+async function loadDir(p) {
+  dom.dirList.innerHTML = '<div class="dir-empty">读取中…</div>';
+  try {
+    const resp = await fetch(`/api/fs/list?path=${encodeURIComponent(p)}`);
+    const data = await resp.json();
+    if (!resp.ok) {
+      dom.dirList.innerHTML = '';
+      dom.dirNote.textContent = data.error || `读取失败（HTTP ${resp.status}）`;
+      return;
+    }
+    currentDir = data.path;
+    selectedDir = null;
+    dom.dirPathInput.value = data.path;
+    dom.dirUp.disabled = !data.parent;
+    dom.dirNote.textContent = data.truncated ? '该目录条目过多，只显示前 2000 项' : '双击目录进入，选中后点「选为工作目录」';
+    renderDirList(data);
+  } catch (e) {
+    dom.dirList.innerHTML = '';
+    dom.dirNote.textContent = `读取失败：${e.message}`;
+  }
+}
+
+function renderDirList(data) {
+  dom.dirList.innerHTML = '';
+  const dirs = data.entries.filter((e) => e.type === 'dir');
+  const files = data.entries.filter((e) => e.type !== 'dir');
+
+  if (!dirs.length && !files.length) {
+    dom.dirList.innerHTML = '<div class="dir-empty">（空目录）</div>';
+    return;
+  }
+
+  for (const entry of dirs) {
+    const row = document.createElement('div');
+    row.className = 'dir-row dir';
+    row.tabIndex = 0;
+    const icon = document.createElement('span');
+    icon.className = 'dir-icon';
+    icon.textContent = '📁';
+    const name = document.createElement('span');
+    name.className = 'dir-name';
+    name.textContent = entry.name;
+    row.append(icon, name);
+
+    row.addEventListener('click', () => {
+      for (const el of dom.dirList.querySelectorAll('.dir-row.selected')) el.classList.remove('selected');
+      row.classList.add('selected');
+      selectedDir = `${data.path.replace(/[\\/]+$/, '')}${data.path.includes('\\') ? '\\' : '/'}${entry.name}`;
+    });
+    row.addEventListener('dblclick', () => loadDir(`${data.path.replace(/[\\/]+$/, '')}${data.path.includes('\\') ? '\\' : '/'}${entry.name}`));
+    row.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter') loadDir(`${data.path.replace(/[\\/]+$/, '')}${data.path.includes('\\') ? '\\' : '/'}${entry.name}`);
+    });
+    dom.dirList.appendChild(row);
+  }
+
+  // 文件只作参考展示，不能选为工作目录
+  const shown = files.slice(0, 200);
+  for (const entry of shown) {
+    const row = document.createElement('div');
+    row.className = 'dir-row file';
+    const icon = document.createElement('span');
+    icon.className = 'dir-icon';
+    icon.textContent = '📄';
+    const name = document.createElement('span');
+    name.className = 'dir-name';
+    name.textContent = entry.name;
+    const size = document.createElement('span');
+    size.className = 'dir-size';
+    size.textContent = fmtBytes(entry.size || 0);
+    row.append(icon, name, size);
+    dom.dirList.appendChild(row);
+  }
+  if (files.length > shown.length) {
+    const more = document.createElement('div');
+    more.className = 'dir-empty';
+    more.textContent = `…另有 ${files.length - shown.length} 个文件未显示`;
+    dom.dirList.appendChild(more);
+  }
+}
+
+async function openDirModal() {
+  dom.dirModal.hidden = false;
+  const roots = await loadRoots();
+  const initial = state.workDir || roots[0]?.path;
+  if (initial) await loadDir(initial);
+  else dom.dirList.innerHTML = '<div class="dir-empty">没有可用的根目录</div>';
+}
+
+function closeDirModal() {
+  dom.dirModal.hidden = true;
+}
+
+/* ---------- 任务执行 ---------- */
+
+function applyUsage(usage) {
+  if (!usage) return;
+  const p = usage.prompt_tokens ?? usage.prompt;
+  const c = usage.completion_tokens ?? usage.completion;
+  if (Number.isFinite(p)) state.usageTotal.prompt += p;
+  if (Number.isFinite(c)) state.usageTotal.completion += c;
+  setInfo(dom.infoUsage, `输入 ${state.usageTotal.prompt} / 输出 ${state.usageTotal.completion}`);
+}
+
+function handleEvent(evt, msg) {
+  switch (evt.type) {
+    case 'started': {
+      setStatus(`任务已开始 · ${MODE_LABELS[normalizeMode(evt.mode)]}模式 · 工作目录 ${evt.workDir}`);
+      // 存储目录若在工作目录之内，模型的文件工具就能读到任务历史，必须提醒
+      const sess = evt.session || {};
+      if (evt.storeExposed && !state.storeExposed) {
+        state.storeExposed = true;
+        setStatus('注意：任务存储目录在工作目录之内，模型可以读到任务历史记录', 'err');
+        setDot('warn');
+      } else if (sess.compacted > 0) {
+        // 上下文记忆的状态：更早的工具结果被折叠成一行了。用户该知道「它现在还记得什么」，
+        // 否则会以为模型忘了、白问一遍
+        setStatus(`上下文已压缩：${sess.compacted} 条较早的工具结果只保留摘要（最近几轮仍是全文）`);
+      }
+      // 这条任务已有落盘的计划：明说本次是「按计划执行」，别让用户以为模型在自由发挥
+      if (evt.planFile) {
+        msg.planFile = evt.planFile;
+        msg.notices = msg.notices || [];
+        msg.notices.push(`本次依据已落盘的计划执行：${evt.planFile}`);
+      }
+      break;
+    }
+    case 'reasoning':
+      msg.reasoning += evt.text;
+      if (!msg.content) setStatus(`思考中…（${msg.reasoning.length} 字）`);
+      schedulePaint(msg);
+      break;
+    case 'delta':
+      msg.content += evt.text;
+      schedulePaint(msg);
+      break;
+    case 'assistant_text_end':
+      break;
+    case 'tool_call':
+      // 这一轮生成结束、开始执行工具 —— 交给步骤自己的转圈来表示「在工作」
+      msg.working = false;
+      msg.steps.push({ id: evt.id, name: evt.name, label: evt.label, args: evt.args, status: 'running' });
+      setStatus(`调用工具：${evt.label}`);
+      setDot('warn');
+      schedulePaint(msg, true);
+      break;
+    case 'tool_result': {
+      let step = msg.steps.find((s) => s.id === evt.id);
+      if (!step) {
+        step = { id: evt.id, name: evt.name, label: evt.name, status: 'running' };
+        msg.steps.push(step);
+      }      step.status = evt.ok ? 'ok' : 'fail';
+      step.summary = evt.summary;
+      step.content = evt.content;
+      if (evt.blocked === 'plan') step.note = '计划模式：只读，未执行写入';
+      else if (evt.auto) step.note = '自动模式：已直接写入';
+      else if (evt.approved === false) step.summary = '你拒绝了这次写入';
+      setStatus(evt.summary || '');
+      schedulePaint(msg, true);
+      break;
+    }
+    case 'approval_required':
+      msg.pending = {
+        runId: evt.runId,
+        callId: evt.callId,
+        name: evt.name,
+        label: evt.label,
+        preview: evt.preview,
+        note: evt.note,
+      };
+      setStatus('等待你批准写入（挂起态会落盘，刷新页面也不会丢）');
+      schedulePaint(msg, true);
+      break;
+    case 'usage':
+      applyUsage(evt.usage);
+      break;
+    case 'usage_total':
+      if (evt.usage) {
+        state.usageTotal.prompt = evt.usage.prompt ?? state.usageTotal.prompt;
+        state.usageTotal.completion = evt.usage.completion ?? state.usageTotal.completion;
+        setInfo(dom.infoUsage, `输入 ${state.usageTotal.prompt} / 输出 ${state.usageTotal.completion}`);
+      }
+      break;
+    case 'turn_start':
+      // 用户只需要知道「进行中 / 已完成」，不啰嗦第几轮
+      msg.working = true;
+      setStatus(evt.wrapUp ? '正在整理结论…' : '进行中');
+      setDot('warn');
+      schedulePaint(msg, true);
+      break;
+    case 'plan_saved':
+      // 计划模式的产物已经写进工作目录的 docs/ 了：路径是这次运行的硬事实，
+      // 直接显示出来，用户要能自己去打开那份文档
+      msg.planFile = evt.path || msg.planFile;
+      msg.notices = msg.notices || [];
+      msg.notices.push(
+        `${evt.action === 'updated' ? '计划已更新' : '计划已保存'}：${evt.path}${evt.action === 'updated' ? '（同名文件追加为本日更新）' : ''}`,
+      );
+      schedulePaint(msg, true);
+      break;
+    case 'notice':
+      // 以前是「已经有正文就丢掉」，结果「已达上限而停止」这类关键提示在最需要的时候被吞掉，
+      // 页面就真的没有任何下文了。现在一律记下来单独渲染成横幅。
+      msg.notices = msg.notices || [];
+      msg.notices.push(evt.text);
+      if (!msg.content) setStatus(evt.text, 'err');
+      schedulePaint(msg, true);
+      break;
+    case 'error':
+      msg.working = false;
+      // 存在消息上而不是全局：多个任务可能同时在跑，全局的会串台
+      msg.streamError = evt.message || '未知错误';
+      break;
+    case 'done':
+      msg.sawDone = true;
+      msg.working = false;
+      // 计划模式跑完 = 计划已给出来，给一个「按计划执行」的一次性入口
+      if (evt.planReady && msg.content) {
+        msg.planReady = true;
+        if (evt.planFile) msg.planFile = evt.planFile;
+        setStatus(
+          msg.planFile
+            ? `计划已就绪并保存到 ${msg.planFile}：确认后点「按计划执行」开始动手`
+            : '计划已就绪：确认后点「按计划执行」开始动手',
+          '',
+        );
+        schedulePaint(msg, true);
+      }
+      // 到上限而停止必须说出来，否则就是「读了一堆然后没了」
+      if (evt.hitLimit) {
+        const cap = state.config?.limits?.maxSteps ?? '?';
+        msg.notices = msg.notices || [];
+        if (!msg.notices.some((t) => t.includes('上限'))) {
+          msg.notices.push(`已达上限（${cap} 轮），可继续执行。`);
+        }
+        // 记下来，别让 send() 收尾时的「就绪」把它盖掉（同 init() 里踩过的那个坑）
+        msg.endStatus = { text: `已达上限（${cap} 轮），可继续执行`, kind: 'err' };
+        // 活干了一半就该能接着干，不该让用户自己再描述一遍
+        msg.canResume = true;
+        setStatus(msg.endStatus.text, 'err');
+        setDot('warn');
+        schedulePaint(msg, true);
+      } else if (!msg.content && !msg.pending && !(msg.notices || []).length && !msg.streamError) {
+        // 兜底：既没正文、没待批准、也没任何提示 —— 不能让用户面对一个静默的空回复
+        msg.notices = [`模型没有返回内容，可重试或调大 max tokens。`];
+        msg.endStatus = { text: '模型没有返回内容', kind: 'err' };
+        setStatus('模型没有返回内容', 'err');
+        schedulePaint(msg, true);
+      }
+      break;
+    default:
+      break;
+  }
+}
+
+async function consume(resp, msg) {
+  const reader = resp.body.getReader();
+  const decoder = new TextDecoder();
+  let buf = '';
+  for (;;) {
+    const { done, value } = await reader.read();
+    if (done) break;
+    buf += decoder.decode(value, { stream: true });
+    const parts = buf.split('\n\n');
+    buf = parts.pop() ?? '';
+    for (const part of parts) {
+      const line = part.split('\n').find((l) => l.startsWith('data:'));
+      if (!line) continue;
+      let evt;
+      try {
+        evt = JSON.parse(line.slice(5).trim());
+      } catch {
+        continue;
+      }
+      handleEvent(evt, msg);
+    }
+  }
+}
+
+/**
+ * 跑一次任务流。taskId 在开始时锁定 —— 跑的过程中用户可以切走，
+ * 那时这一轮要继续在后台跑完并写回该任务自己的缓存，而不是跟着 state.activeId 跑偏。
+ */
+async function runStream(url, payload, msg, taskId = state.activeId) {
+  const controller = new AbortController();
+  if (taskId) state.runs.set(taskId, controller);
+  msg.canResume = false;
+  msg.streamError = null;
+  const isActive = () => taskId === state.activeId;
+  // 先把「谁在跑」同步出去，再重绘：否则侧边栏不会显示进行中
+  syncRunState();
+  if (isActive()) setStatus('进行中');
+  renderTasks();
+  try {
+    const resp = await fetch(url, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload),
+      signal: controller.signal,
+    });
+    if (!resp.ok) {
+      const data = await resp.json().catch(() => ({}));
+      // 缺密钥是「还没配」而不是「配错了」：直接把设置面板打开并聚焦到密钥框，
+      // 用户不用自己找入口，也不会以为服务坏了
+      if (data.needsKey) {
+        dom.settings.classList.add('open');
+        const keyInput = state.configControls?.key;
+        if (keyInput) {
+          keyInput.focus();
+          if (typeof keyInput.scrollIntoView === 'function') keyInput.scrollIntoView({ block: 'center' });
+        }
+      }
+      throw new Error(data.error || `HTTP ${resp.status}`);
+    }
+    await consume(resp, msg);
+    // 流在 done 之前就断了（服务重启 / 网络中断）：不能既留着一个永远转的「工作中」，
+    // 又显示「就绪」—— 那等于骗用户说一切正常。
+    if (!msg.sawDone && !msg.pending) {
+      msg.working = false;
+      msg.notices = msg.notices || [];
+      msg.notices.push('连接中断，结果可能不完整，建议重试。');
+      msg.endStatus = { text: '连接中断', kind: 'err' };
+      paintIfActive(msg, isActive);
+    }
+    if (msg.streamError) {
+      const m = msg.streamError;
+      msg.streamError = null;
+      throw new Error(m);
+    }
+    if (isActive()) {
+      if (msg.pending) {
+        setStatus('等待你批准写入', '');
+        setDot('warn');
+      } else if (msg.endStatus) {
+        // 这一轮有需要用户知道的结果（触顶 / 空回复），不要用「就绪」盖掉
+        setStatus(msg.endStatus.text, msg.endStatus.kind);
+        setDot(msg.endStatus.kind === 'err' ? 'warn' : 'ok');
+      } else {
+        setStatus('就绪', 'ok');
+        setDot('ok');
+      }
+    }
+  } catch (e) {
+    const stoppedByUser = e?.name === 'AbortError';
+    if (stoppedByUser) {
+      if (!msg.content && !msg.steps.length) msg.error = '（已停止）';
+      else if (!msg.content) msg.content = '_（已停止）_';
+      if (isActive()) setStatus('已停止', '');
+    } else {
+      const message = e?.message || String(e);
+      if (msg.content || msg.steps.length) msg.content += `\n\n> ⚠️ 中断：${message}`;
+      else msg.error = `任务失败：${message}`;
+      if (isActive()) {
+        setStatus(`失败：${message}`, 'err');
+        setDot('err');
+      }
+    }
+  } finally {
+    msg.streaming = false;
+    if (taskId) state.runs.delete(taskId);
+    syncRunState();
+    if (isActive()) {
+      paintBubble(msg);
+      scrollToBottom();
+    }
+    // 跑完把这一条任务存好 —— 存的是它自己的历史，不是「当前任务」的
+    persistTask(taskId, taskId === state.activeId ? state.messages : state.cache.get(taskId)?.messages);
+    renderTasks();
+    if (isActive()) dom.input.focus();
+  }
+}
+
+/** 只在该任务正被显示时才重绘（后台任务的 el 是 null，重绘无意义） */
+function paintIfActive(msg, isActive) {
+  if (isActive()) paintBubble(msg);
+}
+
+function findPendingMessage() {
+  for (let i = state.messages.length - 1; i >= 0; i--) if (state.messages[i].pending) return state.messages[i];
+  return null;
+}
+
+async function send(text) {
+  const content = text.trim();
+  if (!content || state.streaming) return;
+  if (!state.workDir) {
+    setStatus('请先选择工作目录', 'err');
+    openDirModal();
+    return;
+  }
+  if (findPendingMessage()) {
+    setStatus('请先处理上面待批准的写入', 'err');
+    return;
+  }
+
+  // 草稿态在首条指令时落成一条真实任务（避免留下一堆空任务）
+  const wasDraft = !state.activeId;
+  const created = await ensureTask();
+  if (created === null) return; // 服务端建不出来（存储不可写等），状态栏已经报过原因了
+  if (wasDraft) renderTasks();
+
+  const userMsg = { role: 'user', content };
+  state.messages.push(userMsg);
+  appendMessage(userMsg);
+
+  const assistant = { role: 'assistant', content: '', reasoning: '', steps: [], stepOpen: new Set(), pending: null, notices: [], canResume: false, streaming: true };
+  state.messages.push(assistant);
+  appendMessage(assistant);
+
+  const payload = {
+    workDir: state.workDir,
+    taskId: state.activeId,
+    mode: state.mode,
+    // 只发这一轮的指令 —— 对话历史（含工具调用与工具结果）由服务端持有。
+    // 之前这里回传的是全量「对白」，而工具结果在下面的 map 里就被剥掉了，
+    // 于是模型每轮都得重新 list_dir / grep 才知道文件里写了什么。
+    prompt: content,
+    model: state.settings.model || undefined,
+    system: state.settings.system || undefined,
+  };
+  if (Number.isFinite(state.settings.temperature)) payload.temperature = state.settings.temperature;
+  if (state.settings.maxTokens > 0) payload.maxTokens = state.settings.maxTokens;
+
+  // 锁住这条任务：跑的过程中用户可能切走，那一轮要继续写回这条任务自己的缓存
+  await runStream('/api/task', payload, assistant, state.activeId);
+}
+
+async function decideApproval(approved) {
+  const msg = findPendingMessage();
+  if (!msg || state.streaming) return;
+  const pending = msg.pending;
+  msg.pending = null;
+  msg.stepsSig = null;
+  paintBubble(msg);
+  await runStream('/api/task/approve', { runId: pending.runId, callId: pending.callId, approved }, msg, state.activeId);
+}
+
+/* ---------- 其他配置：按服务端白名单渲染 ---------- */
+
+/**
+ * 面板里这四项是手写的，不放进「其他配置」：
+ * 模型要 datalist 联想、附加要求要 textarea、温度/最大 tokens 是每次请求的参数（0 = 不限制）。
+ * 白名单里**其余全部键**都由 `/api/settings` 的 `rows` 驱动渲染 —— 服务端加键，页面自动就有，
+ * 不会再出现「配置里有、设置页面没地方改」这种缺口（lib/settings.js 是唯一白名单）。
+ */
+const HANDLED_SETTING_KEYS = new Set(['model', 'system', 'temperature', 'maxTokens']);
+
+const SOURCE_LABELS = { default: '默认', file: '配置文件', env: '环境变量', flag: '启动参数' };
+
+/** 点号路径取值：'history.maxChars' → values.history.maxChars */
+function pathGet(obj, key) {
+  return String(key)
+    .split('.')
+    .reduce((cur, part) => (cur === null || typeof cur !== 'object' ? undefined : cur[part]), obj);
+}
+
+function cfgValueText(v) {
+  if (v === null || v === undefined) return '';
+  if (typeof v === 'boolean') return v ? 'true' : 'false';
+  return String(v);
+}
+
+/** 控件里的值 → 落盘值；返回 undefined 表示「这个键不该发」（空值 + 不可空） */
+function readExtraValue(row, control) {
+  const type = String(row.type || 'string');
+  const nullable = type.endsWith('?');
+  if (type === 'bool') return Boolean(control.checked);
+  if (type === 'enum') return String(control.value);
+  // 密钥：留空 = 不改动（**不是**清空）。清空是破坏性动作，只在命令行 unset key 里做，
+  // 免得用户点一下别的控件顺手把密钥抹了。
+  if (type === 'secret') {
+    const raw = String(control.value ?? '').trim();
+    return raw ? raw : undefined;
+  }
+  if (type === 'int' || type === 'int?' || type === 'num?') {
+    const raw = String(control.value ?? '').trim();
+    if (!raw) return nullable ? null : undefined; // 非空数字留空 = 不动它（服务端也会拒空）
+    const n = Number(raw);
+    if (!Number.isFinite(n)) return undefined;
+    return type === 'num?' ? n : Math.floor(n);
+  }
+  const raw = String(control.value ?? '').trim();
+  if (!raw) return nullable ? null : undefined; // 可空字符串留空 = 显式清掉（null）
+  return raw;
+}
+
+/** 服务端的值 → 控件（改完 / 渲染时回填） */
+function fillExtraControl(row, value) {
+  const control = state.configControls[row.key];
+  if (!control) return;
+  const type = String(row.type || '');
+  if (type === 'bool') control.checked = value === true;
+  // 密钥：清空输入框，绝不回填明文（服务端也不下发明文）
+  else if (type === 'secret') control.value = '';
+  else control.value = cfgValueText(value);
+}
+
+/** 徽标：值从哪来（default 不用标）、要不要重启才生效 */
+function cfgBadges(row) {
+  const wrap = document.createElement('span');
+  wrap.className = 'cfg-badges';
+  // 密钥的来源与配置文件无关（它住在 credentials.json），所以文案单独一套：
+  // 否则会显示成「配置文件」，用户会去 config.json 里找一个根本不存在的字段
+  if (row.secret) {
+    const b = document.createElement('span');
+    b.className = `cfg-badge source-${row.source || 'default'}`;
+    b.textContent = row.hasKey ? `已设置 · ${row.sourceText || '密钥文件'}` : '未配置';
+    b.title = row.hasKey
+      ? `密钥来自${row.sourceText || '密钥文件'}${row.file ? `：${row.file}` : ''}（密钥不写进 config.json）`
+      : '还没有可用的密钥：填一次就能用，不用手写 .env';
+    wrap.appendChild(b);
+    if (row.file) {
+      const f = document.createElement('span');
+      f.className = 'cfg-badge';
+      f.textContent = 'credentials.json';
+      f.title = row.file;
+      wrap.appendChild(f);
+    }
+    return wrap;
+  }
+  const src = SOURCE_LABELS[row.source];
+  if (src && row.source !== 'default') {
+    const b = document.createElement('span');
+    b.className = `cfg-badge source-${row.source}`;
+    b.textContent = src;
+    b.title = row.source === 'file' ? '值来自 config.json' : `值来自${src}，改配置文件不会立刻生效`;
+    wrap.appendChild(b);
+  }
+  if (row.restart) {
+    const b = document.createElement('span');
+    b.className = 'cfg-badge restart';
+    b.textContent = '重启生效';
+    b.title = '这项在服务启动时就被读走了：写进 config.json 了，但要重启服务才生效';
+    wrap.appendChild(b);
+  }
+  return wrap;
+}
+
+/**
+ * 渲染「其他配置」。`rows` 为空（服务端连不上、或响应里没有白名单）时整组隐藏 ——
+ * 这些键住在磁盘上，浏览器里没有可兜底的副本，给了输入框也是假的。
+ */
+function renderExtraConfig(rows, values) {
+  if (Array.isArray(rows)) state.configRows = rows;
+  state.configControls = {};
+  const host = dom.configExtra;
+  if (!host) return;
+  // 只认带 type 的行：类型是服务端契约的一部分（lib/settings.js 的 listSettings）。
+  // 老服务端（进程还没重启、下发的是没有 type 的 rows）宁可不渲染，也不要拿自由文本框去猜枚举和数字
+  const list = (state.configRows || []).filter(
+    (r) => r && r.key && typeof r.type === 'string' && !HANDLED_SETTING_KEYS.has(r.key),
+  );
+  if (dom.configExtraGroup) dom.configExtraGroup.hidden = list.length === 0;
+  host.replaceChildren();
+  if (!list.length) return;
+
+  for (const row of list) {
+    const value = values && typeof values === 'object' ? pathGet(values, row.key) : row.value;
+    const type = String(row.type || 'string');
+    const nullable = type.endsWith('?');
+    let field;
+    let control;
+
+    if (type === 'bool') {
+      field = document.createElement('label');
+      field.className = 'check';
+      control = document.createElement('input');
+      control.type = 'checkbox';
+      const text = document.createElement('span');
+      text.textContent = `${row.desc || row.key}（${row.key}）`;
+      field.appendChild(control);
+      field.appendChild(text);
+    } else {
+      field = document.createElement('label');
+      field.className = 'field';
+      const label = document.createElement('span');
+      // 说明在前、键名在后：用户在 README / config.json 里看到的是键名，得对得上
+      label.textContent = row.desc || row.key;
+      const code = document.createElement('code');
+      code.className = 'cfg-key';
+      code.textContent = row.key;
+      label.appendChild(code);
+      label.appendChild(cfgBadges(row));
+      field.appendChild(label);
+
+      if (type === 'enum') {
+        control = document.createElement('select');
+        for (const opt of row.values || []) {
+          const o = document.createElement('option');
+          o.value = String(opt);
+          // mode 用界面上的中文说法，其余枚举（ui.persist）直接用原值
+          o.textContent = row.key === 'mode' ? MODE_LABELS[opt] || String(opt) : String(opt);
+          control.appendChild(o);
+        }
+      } else if (type === 'secret') {
+        // 密钥：password 输入框，**永远不回填明文**（服务端也不会下发）。
+        // 已配置时用 placeholder 说明现状 + 从哪来，留空 = 不改动。
+        control = document.createElement('input');
+        control.type = 'password';
+        control.autocomplete = 'off';
+        control.spellcheck = false;
+        control.placeholder = row.hasKey
+          ? `已设置 ${row.mask || ''}（${row.sourceText || '密钥文件'}）· 留空 = 不改动`
+          : '还没设置：粘贴 sk-xxx 后回车（存 credentials.json，仅本用户可读）';
+      } else if (type === 'int' || type === 'int?' || type === 'num?') {
+        control = document.createElement('input');
+        control.type = 'number';
+        if (row.min !== null && row.min !== undefined) control.setAttribute('min', String(row.min));
+        if (row.max !== null && row.max !== undefined) control.setAttribute('max', String(row.max));
+        control.step = type === 'num?' ? 'any' : '1';
+      } else {
+        control = document.createElement('input');
+        control.type = 'text';
+      }
+      if (nullable) control.placeholder = '留空 = 不设（用默认）';
+      field.appendChild(control);
+    }
+
+    control.title = row.desc || row.key;
+    // 密钥控件**不回填值**：服务端下发的 value 本来就是空串，这里也不做任何"回显"
+    if (type === 'bool') control.checked = value === true;
+    else if (type !== 'secret') control.value = cfgValueText(value);
+    control.addEventListener('change', () => saveExtraSetting(row));
+    state.configControls[row.key] = control;
+    host.appendChild(field);
+  }
+}
+
+/**
+ * 改一项就 PUT 一项。
+ *
+ * 不攒成「保存」按钮：设置面板其余几项也是改完即存（`readSettingsFromUI` 挂在 change 上），
+ * 两种交互混在一起最容易出现「改了没生效」。失败就把控件退回服务端的值，别让它显示一个假状态。
+ */
+async function saveExtraSetting(row) {
+  const control = state.configControls[row.key];
+  if (!control) return;
+  const value = readExtraValue(row, control);
+  if (value === undefined) {
+    // 密钥留空是「不改动」（不是清空）——说清楚，别让用户以为自己保存失败了
+    setStatus(row.type === 'secret'
+      ? '密钥留空 = 不改动；想清掉已保存的密钥：gateway-agent config unset key'
+      : `${row.key} 不能为空（留空会退回原值）`, row.type === 'secret' ? '' : 'err');
+    fillExtraControl(row, row.value);
+    return;
+  }
+  control.disabled = true;
+  try {
+    const r = await api('/api/settings', { method: 'PUT', body: JSON.stringify({ values: { [row.key]: value } }) });
+    renderExtraConfig(r?.rows || state.configRows, r?.values);
+    if (r?.values?.ui) state.settingsPersist = r.values.ui.persist === 'browser' ? 'browser' : 'server';
+    // 这里的键会影响运行态（轮次上限 / 历史预算 / 保留策略），信息行跟着刷新
+    await loadConfig();
+    const restart = Array.isArray(r?.restart) ? r.restart : [];
+    setStatus(r?.note || (restart.length ? `已保存 ${row.key}：重启服务后生效` : `已保存 ${row.key}`), restart.length ? '' : 'ok');
+  } catch (e) {
+    fillExtraControl(row, row.value);
+    setStatus(`保存 ${row.key} 失败：${e.message}`, 'err');
+  } finally {
+    // renderExtraConfig 会整块重建控件，所以这里按「现在的那个」恢复可用态
+    const cur = state.configControls[row.key];
+    if (cur) cur.disabled = false;
+  }
+}
+
+/* ---------- 设置面板 ---------- */
+
+/**
+ * 设置面板宽度可拖：抓住左边框往左拉就变宽。
+ *
+ * 面板里最长的是那几行信息（可用工具清单、网关地址）和「其他配置」的说明 ——
+ * 与其让用户盯着省略号，不如让他自己拉宽。宽度存在浏览器本地
+ * （`lgw.settings.width`）：它是这台设备上的显示偏好，跟配置本身无关，不占 config.json 的键。
+ */
+const SETTINGS_WIDTH_KEY = 'lgw.settings.width';
+
+function wireSettingsResizer() {
+  const panel = dom.settings;
+  if (!panel || panel.dataset.resizerWired) return; // init 可能被重复调用，只接一次
+  panel.dataset.resizerWired = '1';
+  const MIN = 280;
+  const viewport = () => (Number.isFinite(window.innerWidth) && window.innerWidth > 0 ? window.innerWidth : 1280);
+  const clamp = (w) => Math.min(Math.max(Math.round(Number(w) || 0), MIN), Math.round(viewport() * 0.92));
+
+  const saved = Number(readJson(SETTINGS_WIDTH_KEY, 0));
+  if (Number.isFinite(saved) && saved >= MIN) panel.style.width = `${clamp(saved)}px`;
+
+  // 内容整体套一层滚动容器：把手留在外层，滚到「网关地址」那几行时它还在
+  const body = document.createElement('div');
+  body.className = 'settings-body';
+  while (panel.firstChild) body.appendChild(panel.firstChild);
+  panel.appendChild(body);
+
+  const handle = document.createElement('div');
+  handle.className = 'settings-resizer';
+  handle.title = '拖动调整设置面板宽度';
+  panel.appendChild(handle);
+
+  let dragging = false;
+  handle.addEventListener('pointerdown', (e) => {
+    dragging = true;
+    handle.classList.add('dragging');
+    e.preventDefault?.();
+  });
+  window.addEventListener('pointermove', (e) => {
+    if (!dragging) return;
+    panel.style.width = `${clamp(viewport() - e.clientX)}px`;
+  });
+  const stop = () => {
+    if (!dragging) return;
+    dragging = false;
+    handle.classList.remove('dragging');
+    const w = parseInt(panel.style.width, 10);
+    if (Number.isFinite(w)) writeJson(SETTINGS_WIDTH_KEY, clamp(w));
+  };
+  window.addEventListener('pointerup', stop);
+  // 拖到窗口外松手 / 指针被系统取消：也要收尾，否则下次移动会继续改宽度
+  window.addEventListener('pointercancel', stop);
+}
+
+function applySettingsToUI() {
+  // 下拉是"只可选"的：值不在选项里时要先补一项再选，否则 select.value 会变成空串
+  ModelSelect.ensure(dom.setModel, state.settings.model || '');
+  dom.setSystem.value = state.settings.system || '';
+  dom.setTemperature.value = state.settings.temperature;
+  dom.setMaxTokens.value = state.settings.maxTokens || '';
+  dom.setShowReasoning.checked = state.settings.showReasoning !== false;
+}
+
+function readSettingsFromUI() {
+  const beforeReasoning = state.settings.showReasoning !== false;
+  state.settings.model = dom.setModel.value.trim();
+  state.settings.system = dom.setSystem.value;
+  const temp = Number(dom.setTemperature.value);
+  state.settings.temperature = Number.isFinite(temp) ? temp : DEFAULTS.temperature;
+  const maxTokens = Number(dom.setMaxTokens.value);
+  state.settings.maxTokens = Number.isFinite(maxTokens) && maxTokens > 0 ? Math.floor(maxTokens) : 0;
+  state.settings.showReasoning = dom.setShowReasoning.checked;
+  saveSettings();
+  if (beforeReasoning !== state.settings.showReasoning) {
+    for (const msg of state.messages) paintBubble(msg);
+  }
+}
+
+async function loadConfig() {
+  try {
+    const resp = await fetch('/api/config');
+    state.config = await resp.json();
+    setInfo(dom.infoBase, state.config.baseUrl);
+    setInfo(dom.infoKey, state.config.hasKey ? state.config.keyMask : '未配置');
+    const lim = state.config.limits || {};
+    setInfo(dom.infoLimit, `${lim.maxSteps ?? '?'} 轮工具调用 · 挂起保留 ${lim.runs?.ttlMinutes ?? '?'} 分钟`);
+    // 计划模式的工具集是只读的，在设置里点出来，免得用户以为工具坏了
+    const names = (state.config.tools || []).map((t) => t.name);
+    const toolNames = names.join(' / ');
+    const hasBash = names.includes('bash');
+    setInfo(dom.infoTools, toolNames || '—');
+    // 「没有 bash」是任务模式最容易卡死的地方：模型改完代码却没法跑测试，于是只能说
+    // 「已静态复核通过」——用户从现象上看不出是权限没开还是模型偷懒。所以这里直说怎么开。
+    dom.infoTools.title = `${toolNames}｜计划模式只提供只读工具`
+      + (hasBash
+        ? '｜bash 已开启：自动模式下命令不再逐个确认'
+        : '｜没有 bash：模型无法执行命令（跑测试/验收会卡住）。要开启请重启服务时加 --allow-bash');
+    state.defaultMode = normalizeMode(state.config.defaultMode);
+    if (!state.settings.model && state.config.model) {
+      state.settings.model = state.config.model;
+      // 用户可能已在设置面板选过（那时选项已存在），只在还没选过时回填这一项
+      ModelSelect.ensure(dom.setModel, state.config.model, ModelSelect.defaultLabel(state.config.model));
+    }
+    if (state.config.fsEnabled === false) {
+      setStatus('目录浏览接口已禁用（服务未绑定本机）', 'err');
+      setDot('err');
+    } else if (!state.config.hasKey && !statusHasContent()) {
+      // 没有密钥时**服务是能起来的**（不然用户连这一页都打不开），所以这里要把「去哪儿填」说清楚。
+      // 不再要求用户去手写 .env：设置面板里的输入框写的就是 credentials.json。
+      // 只在状态栏还空着（或只是「就绪」）时说这句：重启后恢复任务、裁剪上下文这些更具体的结果
+      // 都比它重要，不能被一句泛泛的提示盖掉。
+      setStatus('还没有配置密钥：打开「设置」填 sk-xxx（存 credentials.json，仅本用户可读），或命令行 gateway-agent config set key sk-xxx', 'err');
+    }
+  } catch (e) {
+    setDot('err');
+    setStatus(`读取配置失败：${e.message}`, 'err');
+  }
+}
+
+/**
+ * 模型下拉：从网关 `/v1/models` 拉候选，**只让选、不让填**（与聊天页共用 public/models.js）。
+ */
+async function loadModels() {
+  dom.btnRefreshModels.disabled = true;
+  dom.modelsHint.textContent = '正在拉取模型列表…';
+  try {
+    const resp = await fetch('/api/models');
+    const data = await resp.json();
+    state.models = data.models || [];
+    const r = ModelSelect.fill(dom.setModel, {
+      models: state.models,
+      current: state.settings.model,
+      defaultModel: data.default || state.config?.model || '',
+    });
+    dom.modelsHint.textContent = data.error ? `拉取失败：${data.error}` : ModelSelect.hintText(r);
+  } catch (e) {
+    // 拉不到就只留「服务端默认 + 当前值」并说清原因：别让用户以为自己没得选
+    const r = ModelSelect.fill(dom.setModel, {
+      models: [],
+      current: state.settings.model,
+      defaultModel: state.config?.model || '',
+    });
+    state.models = [];
+    dom.modelsHint.textContent = `拉取失败：${e.message}（${ModelSelect.hintText(r)}）`;
+  } finally {
+    dom.btnRefreshModels.disabled = false;
+  }
+}
+
+/* ---------- 事件绑定 ---------- */
+
+function autoGrow() {
+  dom.input.style.height = 'auto';
+  dom.input.style.height = `${Math.min(dom.input.scrollHeight, 220)}px`;
+}
+
+/**
+ * 聊天页和任务页现在是同一个服务，同源相对路径就能跳回去。
+ * 需要指向别处时用 ?chat=http://host:port/ 覆盖。
+ */
+const CHAT_PATH = '/';
+
+function wireChatEntry() {
+  if (!dom.btnOpenChat) return;
+  const override = new URLSearchParams(location.search).get('chat');
+  dom.btnOpenChat.href = override || CHAT_PATH;
+}
+
+async function init() {
+  loadSettings();
+  applySettingsToUI();
+  // 配置以磁盘为准（服务端 config.json）；服务端还空着就把浏览器里这份搬上去。
+  // 放在 loadTasks 之前：界面状态（打开哪条、折叠了哪些）也一并从这里对齐。
+  await syncSettings();
+  applySettingsToUI();
+  renderAll();
+  wireChatEntry();
+  wireModeSwitch();
+  renderMode();
+  setWorkDir(null, false);
+
+  // 任务在服务端，先把列表和当前任务取回来，再决定空态/弹选择器
+  await loadTasks();
+  renderTasks();
+  renderAll();
+  renderMode();
+  setWorkDir(state.workDir, false);
+  loadConfig().then(loadModels);
+
+  if (state.loadError) {
+    setStatus(`任务记录不可用：${state.loadError}`, 'err');
+    setDot('err');
+    return;
+  }
+
+  // 待批准的挂起态已经落盘，刷新过也能捞回来，不用重跑整个任务
+  const restored = await restorePending();
+
+  // 状态栏只有一行，按「越需要用户动手越优先」排：先要目录、再待批准，
+  // 然后才是迁移/清理这类已自动完成的通知 —— 否则通知会被后面的「就绪」吃掉
+  if (!state.workDir) {
+    setStatus('请先选择工作目录');
+    openDirModal();
+  } else if (state.taskLoadError) {
+    setStatus(`读取任务内容失败：${state.taskLoadError}（工作目录和模式已从列表恢复）`, 'err');
+    setDot('err');
+  } else if (restored) {
+    // restorePending 已经写了更具体的文案，这里不覆盖
+  } else if (findPendingMessage()) {
+    setStatus('有一个待批准的写入', '');
+    setDot('warn');
+  } else if (state.migrated) {
+    setStatus(`已把浏览器里保存的 ${state.migrated} 个任务迁移到磁盘`, 'ok');
+  } else if (state.prunedCount) {
+    const rDays = state.storeInfo?.ttlDays ?? 15;
+    const rMax = state.storeInfo?.maxTasks ?? 20;
+    setStatus(`已自动清理 ${state.prunedCount} 个过期任务（保留 ${rDays} 天 / 最多 ${rMax} 个）`, '');
+  } else if (state.settingsMigrated) {
+    setStatus('已把浏览器里的配置迁移到磁盘（清缓存不会再丢）', 'ok');
+  } else {
+    setStatus('就绪', 'ok');
+  }
+
+  dom.input.addEventListener('input', () => {
+    autoGrow();
+    slashMenuSync();   // 输入以 / 开头的片段时弹候选，其它情况关闭
+  });
+  dom.input.addEventListener('keydown', (e) => {
+    if (slash.open) {
+      if (e.key === 'ArrowDown') { e.preventDefault(); return slashMenuMove(1); }
+      if (e.key === 'ArrowUp') { e.preventDefault(); return slashMenuMove(-1); }
+      if (e.key === 'Tab') { e.preventDefault(); return slashMenuPick(); }
+      if (e.key === 'Escape') { e.preventDefault(); return slashMenuClose(); }
+    }
+    if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
+      e.preventDefault();
+      submit();
+    }
+  });
+
+  function submit() {
+    const text = dom.input.value;
+    if (!text.trim() || state.streaming) return;
+    const parsed = TaskSlash.parseSlash(text, slashOpts());
+    dom.input.value = '';
+    autoGrow();
+    if (parsed.isCommand || parsed.unknownSlash) {
+      // 指令在本地执行（不发 /api/task）；未知的 /xxx 也在这里被拦下、提示改用 //
+      slashMenuClose();
+      TaskSlash.runSlash(parsed, slashCtx()).catch((e) => slashPrint('error', (e && e.message) || String(e)));
+      return;
+    }
+    send(parsed.escaped ? parsed.text : text);
+  }
+
+  // 面板上用鼠标点选（用 mousedown 而不是 click：click 会先让输入框失焦）
+  dom.slashMenu.addEventListener('mousedown', (e) => {
+    const item = e.target.closest && e.target.closest('.slash-menu-item');
+    if (!item) return;
+    e.preventDefault();
+    slash.hl = Number(item.dataset.idx) || 0;
+    slashMenuPick();
+  });
+
+  dom.send.addEventListener('click', submit);
+  dom.stop.addEventListener('click', abortIfStreaming);
+
+  dom.workdirChip.addEventListener('click', openDirModal);
+  dom.chipPick.addEventListener('click', openDirModal);
+  // 不传参数：沿用当前工作目录（别把 click 事件传进去）
+  dom.newTask.addEventListener('click', () => startDraft());
+  dom.btnToggleSidebar.addEventListener('click', toggleSidebar);
+  dom.btnPrune.addEventListener('click', async () => {
+    try {
+      const data = await api('/api/tasks/prune', { method: 'POST' });
+      state.storeInfo = data;
+      // 清理可能把当前任务也带走了
+      const stillThere = state.tasks.filter((t) => !data.removed?.includes(t.id));
+      state.tasks = stillThere;
+      if (state.activeId && !stillThere.some((t) => t.id === state.activeId)) {
+        state.activeId = null;
+        state.draft = true;
+        state.messages = [];
+        saveUiState();
+        renderAll();
+      }
+      renderTasks();
+      setStatus(data.removed?.length ? `已清理 ${data.removed.length} 个过期任务` : '没有需要清理的任务', '');
+    } catch (e) {
+      setStatus(`清理失败：${e.message}`, 'err');
+    }
+  });
+
+  dom.messages.addEventListener('click', (e) => {
+    const btn = e.target.closest('[data-act]');
+    if (btn) {
+      decideApproval(btn.dataset.act === 'approve');
+      return;
+    }
+    const chip = e.target.closest('.chip');
+    if (chip && chip.id !== 'chip-pick') {
+      dom.input.value = chip.dataset.prompt || chip.textContent;
+      autoGrow();
+      submit();
+    }
+  });
+
+  // 目录选择器
+  dom.dirCancel.addEventListener('click', closeDirModal);
+  dom.dirModal.addEventListener('click', (e) => {
+    if (e.target === dom.dirModal) closeDirModal();
+  });
+  dom.dirUp.addEventListener('click', () => {
+    if (!currentDir) return;
+    const sep = currentDir.includes('\\') ? '\\' : '/';
+    const parent = currentDir.replace(/[\\/]+$/, '').split(sep).slice(0, -1).join(sep) || sep;
+    loadDir(parent);
+  });
+  dom.dirGo.addEventListener('click', () => {
+    const v = dom.dirPathInput.value.trim();
+    if (v) loadDir(v);
+  });
+  dom.dirPathInput.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const v = dom.dirPathInput.value.trim();
+      if (v) loadDir(v);
+    }
+  });
+  dom.dirConfirm.addEventListener('click', () => {
+    const target = selectedDir || currentDir;
+    if (!target) return;
+    setWorkDir(target);
+    closeDirModal();
+    setStatus(`工作目录：${target}`, 'ok');
+    setDot('ok');
+    dom.input.focus();
+  });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape' && !dom.dirModal.hidden) closeDirModal();
+  });
+
+  dom.btnSettings.addEventListener('click', () => {
+    const open = dom.settings.classList.toggle('open');
+    // 每次打开都重读一次：手改 config.json / 换了环境变量后，刷新面板就能看到；
+    // 顺带把「其他配置」整块按最新白名单重渲染（服务端连不上时 syncSettings 自己会退回来）
+    if (open && state.settingsOnServer) syncSettings().then(applySettingsToUI);
+  });
+  wireSettingsResizer();
+  dom.btnSettingsClose.addEventListener('click', () => dom.settings.classList.remove('open'));
+  for (const node of [dom.setModel, dom.setSystem, dom.setTemperature, dom.setMaxTokens, dom.setShowReasoning]) {
+    node.addEventListener('change', readSettingsFromUI);
+  }
+  dom.setSystem.addEventListener('blur', readSettingsFromUI);
+  dom.btnRefreshModels.addEventListener('click', loadModels);
+  dom.btnReset.addEventListener('click', () => {
+    state.settings = { ...DEFAULTS, model: state.config?.model || '' };
+    saveSettings();
+    applySettingsToUI();
+    setStatus('已恢复默认设置', '');
+  });
+
+  autoGrow();
+  if (state.workDir) dom.input.focus();
+}
+
+init();