llm-api-gateway-cli 1.0.0

package/public/app.js

@@ -0,0 +1,1055 @@
+'use strict';
+
+/* ---------- 常量与状态 ---------- */
+
+const STORE_SETTINGS = 'lgw.settings.v1';
+const STORE_INDEX = 'lgw.sessions.v2';      // 会话索引（轻量，只存元信息）
+const STORE_SESSION = 'lgw.session.';       // 每个会话的消息单独一个 key：lgw.session.<id>
+const LEGACY_MESSAGES = 'lgw.messages.v1';  // 旧版单会话数据，仅用于一次性迁移
+
+// 保留策略：按「最后一次活动」滑动保留 15 天，且最多留 20 个会话（超出删最旧）
+const TTL_DAYS = 15;
+const TTL_MS = TTL_DAYS * 24 * 60 * 60 * 1000;
+const MAX_SESSIONS = 20;
+
+const DEFAULTS = {
+  model: '',
+  system: '',
+  temperature: 0.7,
+  maxTokens: 0,
+  stream: true,
+  showReasoning: true,
+  historyChars: 32000, // 发送给上游的历史字符上限，0 = 不限制
+};
+
+const state = {
+  messages: [],          // 当前会话的消息 { role, content, reasoning, streaming?, error?, el? }
+  sessions: [],          // [{ id, title, createdAt, updatedAt, renamed? }]
+  activeId: null,        // null = 尚未落盘的草稿态（首条消息发出时才建会话）
+  draft: false,          // true = 用户主动点了「新对话」，刷新后仍保持空白态
+  settings: { ...DEFAULTS },
+  models: [],            // 最近一次从 /api/models 拉到的可选模型（设置里只让选这些）
+  streaming: false,
+  controller: null,
+  usageTotal: { prompt: 0, completion: 0 },
+  config: null,
+  storageOk: true,
+  prunedCount: 0,
+};
+
+const dom = {
+  messages: document.getElementById('messages'),
+  empty: document.getElementById('empty-hint'),
+  input: document.getElementById('input'),
+  send: document.getElementById('btn-send'),
+  stop: document.getElementById('btn-stop'),
+  clear: document.getElementById('btn-clear'),
+  btnOpenTask: document.getElementById('btn-open-task'),
+  status: document.getElementById('status'),
+  dot: document.getElementById('status-dot'),
+  meta: document.getElementById('gateway-meta'),
+  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'),
+  setStream: document.getElementById('set-stream'),
+  setShowReasoning: document.getElementById('set-show-reasoning'),
+  setHistoryChars: document.getElementById('set-history-chars'),
+  setKey: document.getElementById('set-key'),
+  keyHint: document.getElementById('key-hint'),
+  btnSaveKey: document.getElementById('btn-save-key'),
+  btnRefreshModels: document.getElementById('btn-refresh-models'),
+  btnReset: document.getElementById('btn-reset'),
+  infoBase: document.getElementById('info-base'),
+  infoKey: document.getElementById('info-key'),
+  infoUsage: document.getElementById('info-usage'),
+  infoSessions: document.getElementById('info-sessions'),
+  infoRetention: document.getElementById('info-retention'),
+  sidebar: document.getElementById('sidebar'),
+  sessionList: document.getElementById('session-list'),
+  sessionsCount: document.getElementById('sessions-count'),
+  sessionsRetention: document.getElementById('sessions-retention'),
+  btnNewSession: document.getElementById('btn-new-session'),
+  btnPrune: document.getElementById('btn-prune'),
+  btnToggleSidebar: document.getElementById('btn-toggle-sidebar'),
+};
+
+/* ---------- 工具函数 ----------
+ * escapeHtml / renderMarkdown / enhanceCodeBlocks 已抽到 public/render.js，
+ * 由页面在本脚本之前加载，聊天页与任务页共用同一份实现。
+ */
+
+function setStatus(text, kind = '') {
+  dom.status.textContent = text;
+  dom.status.className = `hint${kind ? ' ' + kind : ''}`;
+}
+
+function setDot(kind) {
+  dom.dot.className = `dot${kind ? ' ' + kind : ''}`;
+}
+
+/**
+ * 信息行的值：面板窄，长值（网关地址、模型名…）按 CSS 截成省略号，
+ * 所以顺手把完整值挂到 title 上 —— 悬停就能看全（与任务页同一套写法）。
+ */
+function setInfo(el, text) {
+  if (!el) return;
+  el.textContent = text;
+  el.title = text;
+}
+
+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 saveSettings() {
+  try {
+    localStorage.setItem(STORE_SETTINGS, JSON.stringify(state.settings));
+  } catch { /* 忽略隐私模式等写入失败 */ }
+}
+
+function loadSettings() {
+  try {
+    const raw = localStorage.getItem(STORE_SETTINGS);
+    if (raw) Object.assign(state.settings, JSON.parse(raw));
+  } catch { /* 忽略损坏的本地数据 */ }
+}
+
+/* ---------- 会话存储 ----------
+ * 存储布局（全部在 localStorage）：
+ *   lgw.sessions.v2 -> { version, activeId, sessions: [{ id, title, createdAt, updatedAt, renamed }] }
+ *   lgw.session.<id> -> [{ role, content, reasoning }]
+ * 索引与消息分开存：发消息只重写当前会话那一个 key，清理时按 id 精确删除。
+ * 自动管理：跨过 15 天没活动的会话在启动/保存时删除；总数超过 20 个删最旧的。
+ */
+
+function newId() {
+  try {
+    return crypto.randomUUID();
+  } catch {
+    return `s-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
+  }
+}
+
+function readJson(key, fallback) {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return fallback;
+    const value = JSON.parse(raw);
+    return value === null || value === undefined ? fallback : value;
+  } catch {
+    return fallback; // 数据损坏时按「不存在」处理，不能让整个页面打不开
+  }
+}
+
+function writeJson(key, value) {
+  try {
+    localStorage.setItem(key, JSON.stringify(value));
+    return true;
+  } catch (e) {
+    state.storageOk = false;
+    setStatus(`浏览器存储写入失败（可能已满）：${e?.name || e}`, 'err');
+    return false;
+  }
+}
+
+function removeKey(key) {
+  try {
+    localStorage.removeItem(key);
+  } catch { /* 忽略 */ }
+}
+
+function normalizeSession(s) {
+  if (!s || typeof s.id !== 'string' || !s.id) return null;
+  const created = Number(s.createdAt);
+  const updated = Number(s.updatedAt);
+  const base = Number.isFinite(created) ? created : Date.now();
+  return {
+    id: s.id,
+    title: typeof s.title === 'string' && s.title.trim() ? s.title.trim() : '未命名会话',
+    createdAt: base,
+    updatedAt: Number.isFinite(updated) ? updated : base,
+    renamed: Boolean(s.renamed),
+  };
+}
+
+function readSessionMessages(id) {
+  const arr = readJson(STORE_SESSION + id, []);
+  if (!Array.isArray(arr)) return [];
+  return arr
+    .filter((m) => m && (m.content || m.reasoning))
+    .map((m) => ({
+      role: m.role === 'assistant' ? 'assistant' : 'user',
+      content: String(m.content || ''),
+      reasoning: String(m.reasoning || ''),
+    }));
+}
+
+function writeSessionMessages(id, messages) {
+  return writeJson(
+    STORE_SESSION + id,
+    messages
+      .filter((m) => m.content || m.reasoning)
+      .map(({ role, content, reasoning }) => ({ role, content, reasoning })),
+  );
+}
+
+function writeIndex() {
+  return writeJson(STORE_INDEX, { version: 2, activeId: state.activeId, draft: state.draft, sessions: state.sessions });
+}
+
+/** 从首条用户消息生成标题（用户手动改过名的会话不覆盖） */
+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;
+}
+
+/** 过期清理：滑动 15 天 + 最多 20 个。返回被清掉的会话数组 */
+function pruneSessions() {
+  const now = Date.now();
+  const removed = [];
+  const kept = [];
+  for (const s of state.sessions) {
+    if (now - s.updatedAt > TTL_MS) removed.push(s);
+    else kept.push(s);
+  }
+  kept.sort((a, b) => b.updatedAt - a.updatedAt);
+  removed.push(...kept.splice(MAX_SESSIONS));
+  for (const s of removed) removeKey(STORE_SESSION + s.id);
+  state.sessions = kept;
+  if (state.activeId && !kept.some((s) => s.id === state.activeId)) state.activeId = null;
+  return removed;
+}
+
+/** 把当前会话写盘，并顺带自动命名 / 清理。返回本次清掉的会话 */
+function persistActive() {
+  if (state.activeId) {
+    const s = state.sessions.find((x) => x.id === state.activeId);
+    if (s) {
+      writeSessionMessages(s.id, state.messages);
+      if (!s.renamed && state.messages.length) s.title = titleFromMessages(state.messages);
+      s.updatedAt = Date.now();
+    }
+  }
+  const removed = pruneSessions();
+  state.prunedCount += removed.length;
+  writeIndex();
+  return removed;
+}
+
+/** 草稿态（activeId 为 null）在首条消息发出时落盘为一个新会话 */
+function ensureSession() {
+  if (state.activeId && state.sessions.some((s) => s.id === state.activeId)) {
+    state.draft = false;
+    return state.activeId;
+  }
+  const now = Date.now();
+  const s = { id: newId(), title: '新对话', createdAt: now, updatedAt: now, renamed: false };
+  state.sessions.unshift(s);
+  state.activeId = s.id;
+  state.messages = [];
+  state.draft = false;
+  return s.id;
+}
+
+function loadSessions() {
+  const raw = readJson(STORE_INDEX, null);
+  const sessions = Array.isArray(raw?.sessions) ? raw.sessions.map(normalizeSession).filter(Boolean) : [];
+  state.sessions = sessions;
+  state.activeId = typeof raw?.activeId === 'string' ? raw.activeId : null;
+  state.draft = Boolean(raw?.draft);
+
+  // 旧版单会话数据迁移：只在还没有任何会话时做一次，做完即删旧 key
+  if (!state.sessions.length) {
+    const legacy = readJson(LEGACY_MESSAGES, null);
+    if (Array.isArray(legacy) && legacy.some((m) => m && (m.content || m.reasoning))) {
+      const now = Date.now();
+      const id = newId();
+      const messages = legacy
+        .filter((m) => m && (m.content || m.reasoning))
+        .map((m) => ({
+          role: m.role === 'assistant' ? 'assistant' : 'user',
+          content: String(m.content || ''),
+          reasoning: String(m.reasoning || ''),
+        }));
+      state.sessions = [{ id, title: titleFromMessages(messages), createdAt: now, updatedAt: now, renamed: false }];
+      state.activeId = id;
+      writeSessionMessages(id, messages);
+      removeKey(LEGACY_MESSAGES);
+      state.migrated = true;
+    }
+  }
+
+  const removed = pruneSessions();
+  state.prunedCount += removed.length;
+
+  // 用户主动开了新对话（draft）就保持空白；否则恢复最近使用的会话
+  if (!state.draft && !state.activeId && state.sessions.length) state.activeId = state.sessions[0].id;
+  if (state.draft) state.activeId = null;
+  state.messages = state.activeId ? readSessionMessages(state.activeId) : [];
+  writeIndex();
+}
+
+/* ---------- 会话侧边栏 ---------- */
+
+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())}`;
+}
+
+function updateRetentionInfo() {
+  dom.sessionsCount.textContent = `会话 ${state.sessions.length} / ${MAX_SESSIONS}`;
+  setInfo(dom.infoSessions, `${state.sessions.length} / ${MAX_SESSIONS}（滑动 ${TTL_DAYS} 天）`);
+  if (!state.sessions.length) {
+    dom.sessionsRetention.textContent = `滑动保留 ${TTL_DAYS} 天`;
+    setInfo(dom.infoRetention, '暂无会话');
+    return;
+  }
+  const oldest = state.sessions.reduce((a, b) => (a.updatedAt < b.updatedAt ? a : b));
+  const text = `最早 ${fmtDateTime(oldest.updatedAt + TTL_MS)} 过期`;
+  dom.sessionsRetention.textContent = text;
+  setInfo(dom.infoRetention, text);
+}
+
+function renderSessions() {
+  dom.sessionList.innerHTML = '';
+  if (!state.sessions.length) {
+    const hint = document.createElement('div');
+    hint.className = 'sessions-empty';
+    hint.textContent = '还没有会话，发一条消息就会自动创建';
+    dom.sessionList.appendChild(hint);
+    updateRetentionInfo();
+    return;
+  }
+
+  const sorted = [...state.sessions].sort((a, b) => b.updatedAt - a.updatedAt);
+  for (const s of sorted) {
+    const item = document.createElement('div');
+    item.className = `session-item${s.id === state.activeId ? ' active' : ''}`;
+
+    const main = document.createElement('button');
+    main.className = 'session-main';
+    main.type = 'button';
+    const title = document.createElement('span');
+    title.className = 'session-title';
+    title.textContent = s.title;
+    title.title = s.title;
+    const time = document.createElement('span');
+    time.className = 'session-time';
+    time.textContent = fmtRelative(s.updatedAt);
+    main.append(title, time);
+    main.addEventListener('click', () => switchSession(s.id));
+
+    const acts = document.createElement('div');
+    acts.className = 'session-acts';
+    const rename = document.createElement('button');
+    rename.className = 'icon-btn';
+    rename.type = 'button';
+    rename.title = '重命名';
+    rename.textContent = '✎';
+    rename.addEventListener('click', (e) => {
+      e.stopPropagation();
+      beginRename(item, s);
+    });
+    const del = document.createElement('button');
+    del.className = 'icon-btn danger';
+    del.type = 'button';
+    del.title = '删除';
+    del.textContent = '✕';
+    del.addEventListener('click', (e) => {
+      e.stopPropagation();
+      confirmDelete(s);
+    });
+    acts.append(rename, del);
+
+    item.append(main, acts);
+    dom.sessionList.appendChild(item);
+  }
+  updateRetentionInfo();
+}
+
+function beginRename(item, s) {
+  item.innerHTML = '';
+  const input = document.createElement('input');
+  input.className = 'session-rename';
+  input.value = s.title;
+  item.appendChild(input);
+  input.focus();
+  input.select();
+
+  let done = false;
+  const commit = (save) => {
+    if (done) return; // Enter 之后还会触发一次 blur，这里去重
+    done = true;
+    if (save) {
+      const t = input.value.replace(/\s+/g, ' ').trim();
+      s.title = t ? t.slice(0, 40) : '未命名会话';
+      s.renamed = true; // 标记为用户命名，后续不再被首条消息自动覆盖
+      writeIndex();
+    }
+    renderSessions();
+  };
+
+  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());
+}
+
+function confirmDelete(s) {
+  const count = readSessionMessages(s.id).length;
+  if (!window.confirm(`删除会话「${s.title}」？\n该会话的 ${count} 条本地记录将立即清除，无法恢复。`)) return;
+  deleteSessionById(s.id);
+  setStatus('已删除会话', '');
+}
+
+function deleteSessionById(id) {
+  removeKey(STORE_SESSION + id);
+  state.sessions = state.sessions.filter((s) => s.id !== id);
+  if (state.activeId === id) {
+    state.activeId = state.sessions[0]?.id ?? null;
+    state.draft = state.activeId === null;
+    state.messages = state.activeId ? readSessionMessages(state.activeId) : [];
+    state.usageTotal = { prompt: 0, completion: 0 };
+    setInfo(dom.infoUsage, '—');
+  }
+  writeIndex();
+  renderSessions();
+  renderAll();
+}
+
+/** 切走当前会话前先落盘，保证正在编辑的上下文不丢 */
+function abortIfStreaming() {
+  if (state.streaming && state.controller) state.controller.abort();
+}
+
+function switchSession(id) {
+  if (id === state.activeId) return;
+  abortIfStreaming();
+  persistActive();
+  state.activeId = id;
+  state.draft = false;
+  state.messages = readSessionMessages(id);
+  state.usageTotal = { prompt: 0, completion: 0 };
+  setInfo(dom.infoUsage, '—');
+  renderSessions();
+  renderAll();
+  const s = state.sessions.find((x) => x.id === id);
+  setStatus(s ? `已切换到「${s.title}」` : '就绪', '');
+  dom.input.focus();
+}
+
+/** 「新对话」：不立刻建会话，先把 activeId 置空；首条消息发出时才落盘，避免留下一堆空会话 */
+function startDraft() {
+  abortIfStreaming();
+  persistActive();
+  state.activeId = null;
+  state.draft = true;
+  state.messages = [];
+  state.usageTotal = { prompt: 0, completion: 0 };
+  setInfo(dom.infoUsage, '—');
+  writeIndex();
+  renderSessions();
+  renderAll();
+  setStatus('已开始新对话', '');
+  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 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' : ''}`;
+
+  // 用户消息原样展示（不解析 Markdown，保留换行）
+  if (msg.role === 'user') {
+    msg.el.textContent = msg.content;
+    return;
+  }
+
+  // 思维链：单独放在可折叠块里。思考阶段自动展开，正文一开始就自动收起
+  // （用增量更新的方式而不是整块重绘，避免每帧重置用户的展开/收起操作）
+  const wantReasoning = msg.reasoning && state.settings.showReasoning;
+  let box = msg.el.querySelector(':scope > details.reasoning');
+  if (wantReasoning) {
+    if (!box) {
+      box = document.createElement('details');
+      box.className = 'reasoning';
+      box.open = true;
+      msg.reasoningOpen = true;
+      box.innerHTML = '<summary></summary><div class="reasoning-body"></div>';
+      msg.el.appendChild(box);
+    }
+    box.querySelector('summary').textContent = `思考过程 · ${msg.reasoning.length} 字`;
+    const body = box.querySelector('.reasoning-body');
+    body.textContent = msg.reasoning;
+    if (msg.reasoningOpen && msg.content) {
+      box.open = false;
+      msg.reasoningOpen = false;
+    }
+  } else if (box) {
+    box.remove();
+  }
+
+  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);
+}
+
+const paintQueue = new WeakSet();
+function schedulePaint(msg) {
+  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;
+  dom.empty.hidden = state.messages.length > 0;
+  for (const msg of state.messages) dom.messages.appendChild(buildMsgEl(msg));
+  if (state.messages.length) scrollToBottom(true);
+}
+
+function setBusy(busy) {
+  state.streaming = busy;
+  dom.send.disabled = busy;
+  dom.stop.hidden = !busy;
+}
+
+/* ---------- 发送消息 ---------- */
+
+/**
+ * 组装发给上游的历史：从最新往回取，直到超过 historyChars 字符预算为止。
+ * 0 表示不限制。这样长对话不会把请求体撑到上游拒绝，且始终保留最近上下文。
+ */
+function buildHistory() {
+  const all = state.messages
+    .filter((m) => m.content && m.content.trim()) // 纯空白不算有效上下文
+    .map(({ role, content }) => ({ role, content }));
+  const budget = Number(state.settings.historyChars);
+  if (!Number.isFinite(budget) || budget <= 0) return { messages: all, trimmed: 0 };
+
+  const kept = [];
+  let total = 0;
+  for (let i = all.length - 1; i >= 0; i--) {
+    const len = all[i].content.length;
+    if (kept.length && total + len > budget) break; // 至少保留最后一条，哪怕它自己就超预算
+    total += len;
+    kept.unshift(all[i]);
+  }
+  return { messages: kept, trimmed: all.length - kept.length };
+}
+
+async function send(text) {
+  const content = text.trim();
+  if (!content || state.streaming) return;
+
+  ensureSession(); // 草稿态在首条消息发出时落盘成会话
+
+  const userMsg = { role: 'user', content };
+  state.messages.push(userMsg);
+  appendMessage(userMsg);
+
+  const assistant = { role: 'assistant', content: '', reasoning: '', streaming: true };
+  state.messages.push(assistant);
+  appendMessage(assistant);
+
+  // 只把有内容的历史发给上游（空的 assistant 占位不算），并按字符预算裁剪
+  const history = buildHistory();
+  const payload = {
+    messages: history.messages,
+    model: state.settings.model || undefined,
+    system: state.settings.system || undefined,
+    stream: state.settings.stream,
+    // 这次对话的 id：服务端会以 W3C baggage 转发给网关，用于任务树归组。
+    // 上面 ensureSession() 刚把草稿态落盘，activeId 此时一定有了。
+    sessionId: state.activeId || undefined,
+  };
+  if (Number.isFinite(state.settings.temperature)) payload.temperature = state.settings.temperature;
+  if (state.settings.maxTokens > 0) payload.maxTokens = state.settings.maxTokens;
+
+  setBusy(true);
+  setStatus('生成中…');
+  state.controller = new AbortController();
+
+  try {
+    const resp = await fetch('/api/chat', {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload),
+      signal: state.controller.signal,
+    });
+
+    if (!resp.ok) {
+      const data = await resp.json().catch(() => ({}));
+      // 缺密钥是「还没配」，不是「配错了」：顺手把设置面板打开，用户不用自己找入口
+      if (data.needsKey) {
+        dom.settings.classList.add('open');
+        if (dom.setKey) dom.setKey.focus();
+      }
+      throw new Error(data.error || `HTTP ${resp.status}`);
+    }
+
+    if (!state.settings.stream) {
+      const data = await resp.json();
+      assistant.content = data.text || '';
+      assistant.reasoning = data.reasoning || '';
+      assistant.streaming = false;
+      paintBubble(assistant);
+      applyUsage(data.usage);
+    } else {
+      await consumeStream(resp, assistant);
+    }
+    setStatus(history.trimmed ? `就绪 · 上下文已裁剪 ${history.trimmed} 条较早消息` : '就绪', 'ok');
+    setDot('ok');
+  } catch (e) {
+    if (e?.name === 'AbortError') {
+      setStatus('已停止', '');
+      if (assistant.reasoning && !assistant.content) {
+        assistant.content = '_（已停止：思考阶段被中断，尚未产出正文）_';
+      } else if (!assistant.content) {
+        assistant.error = '（已停止，未收到内容）';
+      }
+    } else {
+      const message = e?.message || String(e);
+      if (assistant.content) {
+        assistant.content += `\n\n> ⚠️ 中断：${message}`;
+      } else {
+        assistant.error = `请求失败：${message}`;
+      }
+      setStatus(`失败：${message}`, 'err');
+      setDot('err');
+    }
+  } finally {
+    assistant.streaming = false;
+    paintBubble(assistant);
+    setBusy(false);
+    state.controller = null;
+    const removed = persistActive();
+    renderSessions();
+    if (removed.length) setStatus(`已自动清理 ${removed.length} 个过期会话`, '');
+    scrollToBottom();
+    dom.input.focus();
+  }
+}
+
+/** 消费服务端归一化的 SSE：{type:reasoning|delta|usage|notice|error|done} */
+async function consumeStream(resp, assistant) {
+  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;
+      }
+      if (evt.type === 'reasoning') {
+        assistant.reasoning += evt.text;
+        if (!assistant.content) setStatus(`思考中…（${assistant.reasoning.length} 字）`);
+        schedulePaint(assistant);
+      } else if (evt.type === 'delta') {
+        assistant.content += evt.text;
+        schedulePaint(assistant);
+      } else if (evt.type === 'usage') {
+        applyUsage(evt.usage);
+      } else if (evt.type === 'notice') {
+        if (!assistant.content) assistant.content = `_${evt.text}_`;
+      } else if (evt.type === 'error') {
+        throw new Error(evt.message);
+      }
+    }
+  }
+}
+
+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;
+  const last = [p, c].some(Number.isFinite) ? `本次 输入 ${p ?? '?'} / 输出 ${c ?? '?'}` : '';
+  const total = `累计 输入 ${state.usageTotal.prompt} / 输出 ${state.usageTotal.completion}`;
+  setInfo(dom.infoUsage, last ? `${last} · ${total}` : total);
+  if (last) setStatus(`${last} tokens`, 'ok');
+}
+
+/* ---------- 设置面板 ---------- */
+
+/**
+ * 设置面板宽度可拖：抓住左边框往左拉就变宽（与任务页同一套行为与同一个 key）。
+ * 面板里最长的内容（网关地址等几行信息）与其被省略号截断，不如让用户自己拉宽；
+ * 宽度存浏览器本地，不占 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.setStream.checked = Boolean(state.settings.stream);
+  dom.setShowReasoning.checked = state.settings.showReasoning !== false;
+  dom.setHistoryChars.value = state.settings.historyChars || '';
+}
+
+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;
+  const historyChars = Number(dom.setHistoryChars.value);
+  state.settings.historyChars = Number.isFinite(historyChars) && historyChars > 0 ? Math.floor(historyChars) : 0;
+  state.settings.stream = dom.setStream.checked;
+  state.settings.showReasoning = dom.setShowReasoning.checked;
+  saveSettings();
+  updateMeta();
+  // 该开关直接决定气泡里渲不渲染思维链块，切换后需要重绘已有消息
+  if (beforeReasoning !== state.settings.showReasoning) {
+    for (const msg of state.messages) paintBubble(msg);
+  }
+}
+
+function updateMeta() {
+  const model = state.settings.model || state.config?.model || '(未设置)';
+  const base = state.config?.baseUrl || '—';
+  dom.meta.textContent = `${model} · ${base}`;
+}
+
+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}${state.config.keySourceText ? ` · ${state.config.keySourceText}` : ''}`
+      : '未配置');
+    if (dom.keyHint) {
+      dom.keyHint.textContent = state.config.hasKey
+        ? `已设置 ${state.config.keyMask}（来自${state.config.keySourceText || '密钥文件'}）。密钥存在 credentials.json，不写进 config.json；留空 = 不改动。`
+        : '还没有密钥：粘贴 sk-xxx 点「保存密钥」即可（存 credentials.json，仅本用户可读）—— 不用手写 .env。';
+    }
+    if (!state.config.hasKey) setStatus('还没有配置密钥：在「设置」里填 sk-xxx（或 gateway-agent config set key sk-xxx）', 'err');
+    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));
+    }
+    updateMeta();
+    setDot('ok');
+    // 没密钥的提示要压过「就绪」：这一页现在能打开，但一发消息就会被服务端挡回来
+    setStatus(
+      state.config.hasKey ? '就绪' : '还没有配置密钥：在「设置」里填 sk-xxx（或 gateway-agent config set key sk-xxx）',
+      state.config.hasKey ? 'ok' : 'err',
+    );
+  } catch (e) {
+    setDot('err');
+    setStatus(`读取配置失败：${e.message}`, 'err');
+  }
+}
+
+/**
+ * 保存密钥。
+ *
+ * 与这一页其它设置不同：那些存在浏览器里，密钥必须交给服务端（写 credentials.json，不写 config.json）。
+ * 走的是同一个 `PUT /api/settings` —— 服务端把 `key` 单独分流，其余键照旧写 config.json。
+ */
+async function saveKey() {
+  const value = String(dom.setKey.value || '').trim();
+  if (!value) {
+    setStatus('密钥留空 = 不改动（想清掉已保存的密钥：gateway-agent config unset key）', '');
+    return;
+  }
+  dom.btnSaveKey.disabled = true;
+  try {
+    const resp = await fetch('/api/settings', {
+      method: 'PUT',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify({ values: { key: value } }),
+    });
+    const data = await resp.json().catch(() => ({}));
+    if (!resp.ok) throw new Error(data.error || `HTTP ${resp.status}`);
+    // 明文不留在输入框里，也不写进浏览器本地存储的任何一处
+    dom.setKey.value = '';
+    await loadConfig();
+    await loadModels();
+    setStatus(data.note || '密钥已保存，立即生效', 'ok');
+  } catch (e) {
+    setStatus(`保存密钥失败：${e.message}`, 'err');
+  } finally {
+    dom.btnSaveKey.disabled = false;
+  }
+}
+
+/**
+ * 模型下拉：从网关 `/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;
+  }
+}
+
+/* ---------- 事件绑定 ---------- */
+
+/** 任务页和聊天页现在是同一个服务，同源相对路径就能跳过去。
+ *  需要指向别处时用 ?task=http://host:port/task 覆盖。 */
+const TASK_PATH = '/task';
+
+function wireTaskEntry() {
+  if (!dom.btnOpenTask) return;
+  const override = new URLSearchParams(location.search).get('task');
+  dom.btnOpenTask.href = override || TASK_PATH;
+}
+
+function autoGrow() {
+  dom.input.style.height = 'auto';
+  dom.input.style.height = `${Math.min(dom.input.scrollHeight, 220)}px`;
+}
+
+function init() {
+  loadSettings();
+  loadSessions();
+  applySettingsToUI();
+  renderSessions();
+  renderAll();
+  wireTaskEntry();
+  loadConfig().then(loadModels);
+
+  if (state.prunedCount) setStatus(`已自动清理 ${state.prunedCount} 个过期会话（保留 ${TTL_DAYS} 天 / 最多 ${MAX_SESSIONS} 个）`, '');
+  else if (state.migrated) setStatus('已把旧的单会话记录迁移为新版会话', 'ok');
+
+  dom.input.addEventListener('input', autoGrow);
+  dom.input.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
+      e.preventDefault();
+      submit();
+    }
+  });
+
+  function submit() {
+    const text = dom.input.value;
+    if (!text.trim() || state.streaming) return;
+    dom.input.value = '';
+    autoGrow();
+    send(text);
+  }
+
+  dom.send.addEventListener('click', submit);
+
+  dom.stop.addEventListener('click', () => {
+    if (state.controller) state.controller.abort();
+  });
+
+  dom.clear.addEventListener('click', startDraft);           // 顶栏「新对话」
+  dom.btnNewSession.addEventListener('click', startDraft);  // 侧边栏「＋ 新对话」
+  dom.btnToggleSidebar.addEventListener('click', toggleSidebar);
+
+  dom.btnPrune.addEventListener('click', () => {
+    abortIfStreaming();
+    const removed = persistActive();
+    renderSessions();
+    setStatus(
+      removed.length ? `已清理 ${removed.length} 个会话` : `没有需要清理的会话（${TTL_DAYS} 天内、且未超过 ${MAX_SESSIONS} 个）`,
+      removed.length ? 'ok' : '',
+    );
+  });
+
+  dom.btnSettings.addEventListener('click', () => dom.settings.classList.toggle('open'));
+  wireSettingsResizer();
+  dom.btnSettingsClose.addEventListener('click', () => dom.settings.classList.remove('open'));
+
+  const settingNodes = [
+    dom.setModel,
+    dom.setSystem,
+    dom.setTemperature,
+    dom.setMaxTokens,
+    dom.setStream,
+    dom.setShowReasoning,
+    dom.setHistoryChars,
+  ];
+  for (const node of settingNodes) node.addEventListener('change', readSettingsFromUI);
+  dom.setSystem.addEventListener('blur', readSettingsFromUI);
+
+  dom.btnRefreshModels.addEventListener('click', loadModels);
+  // 密钥：唯一的写入路径是服务端的 PUT /api/settings（它写 credentials.json，不写 config.json）。
+  // 这页的设置项大多存在浏览器里，密钥是例外 —— 它是服务端的事，所以单独一个「保存密钥」按钮。
+  dom.btnSaveKey.addEventListener('click', saveKey);
+  dom.setKey.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      saveKey();
+    }
+  });
+  dom.btnReset.addEventListener('click', () => {
+    state.settings = { ...DEFAULTS, model: state.config?.model || '' };
+    saveSettings();
+    applySettingsToUI();
+    updateMeta();
+    setStatus('已恢复默认设置', '');
+  });
+
+  dom.messages.addEventListener('click', (e) => {
+    const chip = e.target.closest('.chip');
+    if (!chip) return;
+    const prompt = chip.dataset.prompt || chip.textContent;
+    dom.input.value = prompt;
+    autoGrow();
+    submit();
+  });
+
+  autoGrow();
+  dom.input.focus();
+}
+
+init();