llm-api-gateway-cli 1.0.3 → 1.0.4

package/public/task.js

@@ -16,6 +16,18 @@ const MODE_NOTES = {
   plan: '只读调研，计划写入 docs/ 后再执行',
 };
 
+/**
+ * 懒加载的两个阈值（任务多了 / 单条任务历史长了之后，一次性全建出来会明显卡）。
+ *
+ *   LIST_PAGE 侧边栏一次渲染多少行：默认 30 行，滚到底自动续载，也可以点「加载更多」。
+ *   MSG_PAGE  一条任务一次渲染最近多少条消息：默认 30 条，往上翻时点「载入更早」前插。
+ *
+ * 两个数都只影响「已经存在的数据渲染多少」，不改变任何请求与落盘行为：
+ * 拿不到的那部分本来就只是 DOM，没有它照样能切任务、能跑、能保存。
+ */
+const LIST_PAGE = 30;
+const MSG_PAGE = 30;
+
 function normalizeMode(m) {
   return MODES.includes(m) ? m : 'manual';
 }
@@ -58,6 +70,9 @@ const state = {
   restoredPending: 0,   // 刷新后恢复出来的待批准数量
   collapsedDirs: [],    // 侧边栏里被折叠的工作目录分组（按目录记，存在浏览器里）
   collapsedTasks: [],   // 侧边栏里被折叠的父任务（子任务收起来，按任务 id 记）
+  listLimit: LIST_PAGE, // 侧边栏已经渲染多少行（懒加载：滚到底 / 点「加载更多」往上加）
+  query: '',            // 侧边栏过滤词（匹配任务标题与工作目录）
+  renderFrom: null,     // 消息区渲染起点（懒加载）；null = 下次渲染按 MSG_PAGE 从末尾算
   draftParentId: null,  // 草稿要挂在哪条任务下（侧边栏任务行上的「＋」派生出的子任务）
   configRows: [],       // 服务端白名单行（GET /api/settings 的 rows）——「其他配置」照它渲染，页面不抄第二份
   configControls: {},   // 配置键 → 渲染出来的控件（回填与测试都要按写这个映射）
@@ -66,6 +81,8 @@ const state = {
 const dom = {
   sidebar: document.getElementById('sidebar'),
   taskList: document.getElementById('task-list'),
+  taskSearch: document.getElementById('task-search'),
+  btnTaskSearchClear: document.getElementById('btn-task-search-clear'),
   tasksCount: document.getElementById('tasks-count'),
   tasksRetention: document.getElementById('tasks-retention'),
   btnPrune: document.getElementById('btn-prune'),
@@ -136,6 +153,8 @@ function statusHasContent() {
 
 function setDot(kind) {
   dom.dot.className = `dot${kind ? ' ' + kind : ''}`;
+  // 被 Tab 外壳嵌着时（/），本页顶栏是收起的：状态点也报一份给外壳顶栏
+  if (window.lgwBridge) window.lgwBridge.dot(kind || '');
 }
 
 /**
@@ -462,6 +481,9 @@ function titleFromMessages(messages) {
 
 /** 把服务端返回的消息换成界面用的形状 */
 function adoptMessages(list) {
+  // 换了任务/重读了历史：渲染窗口跟着重置，否则上一条任务点过「全部展开」之后，
+  // 切到一条几百条消息的任务会一次性全建出来 —— 懒加载就白做了
+  state.renderFrom = null;
   return (Array.isArray(list) ? list : [])
     .filter((m) => m && (m.content || m.reasoning || m.steps?.length || m.notices?.length))
     .map((m) => ({
@@ -1207,25 +1229,89 @@ function buildDraftRow(depth = 0) {
   return item;
 }
 
+/* ---------- 侧边栏：过滤 + 分批渲染（懒加载） ---------- */
+
+/** 过滤词是否命中一条任务（标题 / 工作目录，都不区分大小写） */
+function taskMatches(t, q) {
+  if (!q) return true;
+  const needle = q.toLowerCase();
+  return String(t.title || '').toLowerCase().includes(needle) || String(t.workDir || '').toLowerCase().includes(needle);
+}
+
+/** 过滤后的任务（过滤时不分目录树地全都参与，交给下面照旧分组） */
+function visibleTasks() {
+  const q = state.query.trim();
+  if (!q) return state.tasks;
+  return state.tasks.filter((t) => taskMatches(t, q));
+}
+
+/** 侧边栏底部的「加载更多」：只在还有没渲染完的行时出现 */
+function buildMoreRow(rest) {
+  const box = document.createElement('button');
+  box.type = 'button';
+  box.className = 'task-more';
+  box.textContent = `加载更多（还有 ${rest} 条）`;
+  box.addEventListener('click', (e) => {
+    e.stopPropagation();
+    state.listLimit += LIST_PAGE;
+    renderTasks();
+    // 续载后把新露出来的第一行滚进视野，不然点了像没反应
+    const next = dom.taskList.querySelectorAll('.session-item')[state.listLimit - LIST_PAGE - 1];
+    if (next && next.scrollIntoView) next.scrollIntoView({ block: 'nearest' });
+  });
+  return box;
+}
+
+/** 侧栏滚到接近底部时自动续载（任务多的时候不用一直点按钮） */
+function wireTaskListScroll() {
+  if (!dom.taskList || dom.taskList.dataset.scrollWired === '1') return;
+  dom.taskList.dataset.scrollWired = '1';
+  dom.taskList.addEventListener('scroll', () => {
+    if (!dom.taskList.querySelector('.task-more')) return;
+    const nearBottom = dom.taskList.scrollHeight - dom.taskList.scrollTop - dom.taskList.clientHeight < 80;
+    if (!nearBottom) return;
+    state.listLimit += LIST_PAGE;
+    renderTasks();
+  });
+}
+
+/** 侧边栏过滤词变了：重设分批窗口并重画（纯客户端过滤，任务列表本来就一次拿全） */
+function setTaskQuery(q) {
+  state.query = String(q || '');
+  state.listLimit = LIST_PAGE; // 换了条件就重新分批，别把上一次的「加载更多」带过来
+  if (dom.taskSearch && dom.taskSearch.value !== state.query) dom.taskSearch.value = state.query;
+  if (dom.btnTaskSearchClear) dom.btnTaskSearchClear.hidden = !state.query.trim();
+  renderTasks();
+}
+
 function renderTasks() {
   dom.taskList.innerHTML = '';
-  if (!state.tasks.length) {
+  wireTaskListScroll();
+  const list = visibleTasks();
+  const q = state.query.trim();
+
+  if (!list.length) {
     const hint = document.createElement('div');
     hint.className = 'sessions-empty';
-    hint.textContent = state.draft ? '新任务：选好目录、发出第一条指令就会保存' : '还没有任务，发出第一条指令就会自动创建';
+    hint.textContent = q
+      ? `没有匹配「${q}」的任务`
+      : state.draft
+        ? '新任务：选好目录、发出第一条指令就会保存'
+        : '还没有任务，发出第一条指令就会自动创建';
     dom.taskList.appendChild(hint);
     updateRetentionInfo();
     return;
   }
 
-  const groups = groupTasksByDir(state.tasks);
+  const groups = groupTasksByDir(list);
   const draftKey = state.draft ? dirKey(state.draftWorkDir) : null;
-  // 草稿所在的目录可能一条任务都还没有，补一个空组出来，不然「＋」点了看不见落点
-  if (state.draft && !groups.some((g) => g.key === draftKey)) {
+  // 草稿所在的目录可能一条任务都还没有，补一个空组出来，不然「＋」点了看不见落点。
+  // 搜索时不给草稿单独开组：过滤出来的结果里混一个空组会让人以为搜到了东西。
+  if (state.draft && !q && !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);
+  const rank = (g) => (state.draft && !q && g.key === draftKey ? Number.MAX_SAFE_INTEGER : g.tasks[0]?.updatedAt || 0);
   groups.sort((a, b) => rank(b) - rank(a));
 
   const sameName = new Map();
@@ -1234,32 +1320,50 @@ function renderTasks() {
     sameName.set(label, (sameName.get(label) || 0) + 1);
   }
 
+  // 懒加载：只建前 listLimit 行，剩下的用一个「加载更多」收口。
+  // 行数按**真正建出来的任务行**算（分组头不算），这样「还有 N 条」与用户数得出来的数字一致。
+  let built = 0;
+  const total = list.length;
   for (const g of groups) {
+    if (built >= state.listLimit) break;
     const box = document.createElement('div');
     box.className = 'task-group';
-    const isDraftHere = state.draft && g.key === draftKey;
+    const isDraftHere = state.draft && !q && 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 rows = flattenTree(g.tasks);
+    const budget = Math.max(0, state.listLimit - built);
+    const shown = rows.slice(0, budget);
+    const hidden = rows.length - shown.length;
+    // 分组头上的数字始终是「这个目录下真实有多少条」，不因为分批渲染而缩水
+    box.appendChild(buildGroupHead(g, label, rows.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);
+    const parentRendered = draftParent && shown.some((r) => r.task.id === draftParent);
     if (isDraftHere && !parentRendered) body.appendChild(buildDraftRow());
-    for (const r of rows) {
+    for (const r of shown) {
       body.appendChild(buildTaskRow(r.task, { depth: r.depth, childCount: r.childCount }));
       if (isDraftHere && draftParent === r.task.id) body.appendChild(buildDraftRow(r.depth + 1));
     }
+    if (hidden) {
+      // 这一组被截断了：给一行轻提示，避免用户以为这个目录下就只有这么多
+      const more = document.createElement('div');
+      more.className = 'task-group-more';
+      more.textContent = `本组还有 ${hidden} 条`;
+      body.appendChild(more);
+    }
 
     box.appendChild(body);
     dom.taskList.appendChild(box);
+    built += shown.length;
   }
+
+  if (built < total) dom.taskList.appendChild(buildMoreRow(total - built));
   updateRetentionInfo();
 }
 
@@ -1504,9 +1608,21 @@ async function startDraft(dir, parentId = null) {
   }
 }
 
+/** 侧边栏当前是不是开着：桌面看 .collapsed，窄屏看 .open（口径只写这一处） */
+function sidebarOpen() {
+  const mobile = window.matchMedia('(max-width: 820px)').matches;
+  return mobile ? dom.sidebar.classList.contains('open') : !dom.sidebar.classList.contains('collapsed');
+}
+
+/** 被 Tab 外壳嵌着（/）时，外壳顶栏上的 ☰ 要有按下态；单独打开本页时这行是空操作 */
+function notifySidebar() {
+  if (window.lgwBridge) window.lgwBridge.sidebar(sidebarOpen());
+}
+
 function toggleSidebar() {
   if (window.matchMedia('(max-width: 820px)').matches) dom.sidebar.classList.toggle('open');
   else dom.sidebar.classList.toggle('collapsed');
+  notifySidebar();
 }
 
 /* ---------- 渲染消息 ---------- */
@@ -1809,12 +1925,76 @@ function appendMessage(msg) {
   scrollToBottom(true);
 }
 
+/* ---------- 消息区：只渲染看得见的那一段（懒加载） ----------
+ * 工具调用的输出单条就能到两万字，一条跑久了的任务几百条消息是常事：一次性全建成 DOM
+ * 会明显卡（切任务、开面板都卡）。所以默认只渲染最近 MSG_PAGE 条，往上翻时点「载入更早」**前插** ——
+ * 前插而不是整表重画，是为了不丢掉斜杠指令的输出（那些只活在 DOM 里），也不会让视口跳走。
+ * 页面上的「任务对白」仍然全在 state.messages 里：落盘、发给模型、审批都不受渲染窗口影响。
+ */
+
+/** 渲染窗口的起点：null 按 MSG_PAGE 从末尾算；越界一律夹回合法区间 */
+function renderFromIndex() {
+  const total = state.messages.length;
+  const maxFrom = Math.max(0, total - MSG_PAGE);
+  if (state.renderFrom == null || !Number.isFinite(state.renderFrom)) state.renderFrom = maxFrom;
+  state.renderFrom = Math.max(0, Math.min(state.renderFrom, maxFrom));
+  return state.renderFrom;
+}
+
+function moreBar() {
+  return dom.messages.querySelector('.msg-more-bar');
+}
+
+/** 顶部那条「载入更早」：还有没渲染的消息时出现，全渲染完就撤掉 */
+function updateMoreBar() {
+  const from = renderFromIndex();
+  let bar = moreBar();
+  if (from <= 0) {
+    if (bar) bar.remove();
+    return;
+  }
+  if (!bar) {
+    bar = document.createElement('div');
+    bar.className = 'msg-more-bar';
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'btn ghost tiny msg-more-btn';
+    btn.textContent = '载入更早的消息';
+    btn.addEventListener('click', loadEarlier);
+    bar.appendChild(btn);
+    dom.messages.insertBefore(bar, dom.messages.firstChild);
+  }
+  const btn = bar.querySelector('.msg-more-btn');
+  if (btn) btn.textContent = `↑ 还有 ${from} 条更早的消息 · 载入 ${Math.min(MSG_PAGE, from)} 条`;
+}
+
+/** 往上补一屏：前插 + 把视口钉在原处（不然正在读的那一段会被顶下去） */
+function loadEarlier() {
+  const from = renderFromIndex();
+  if (from <= 0) return;
+  const next = Math.max(0, from - MSG_PAGE);
+  const before = dom.messages.scrollHeight;
+  const first = dom.messages.querySelector('.msg');
+  for (let i = next; i < from; i++) {
+    const el = buildMsgEl(state.messages[i]);
+    if (first) dom.messages.insertBefore(el, first);
+    else dom.messages.appendChild(el);
+  }
+  state.renderFrom = next;
+  updateMoreBar();
+  dom.messages.scrollTop += dom.messages.scrollHeight - before;
+}
+
 function renderAll() {
   for (const node of dom.messages.querySelectorAll('.msg')) node.remove();
+  const bar = moreBar();
+  if (bar) bar.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));
+  const from = renderFromIndex();
+  for (let i = from; i < state.messages.length; i++) dom.messages.appendChild(buildMsgEl(state.messages[i]));
+  updateMoreBar();
   if (hasMessages) scrollToBottom(true);
 }
 
@@ -1822,6 +2002,8 @@ function setBusy(busy) {
   state.streaming = busy;
   dom.send.disabled = busy || !state.workDir;
   dom.stop.hidden = !busy;
+  // 切到别的 Tab 也能看出这条任务还在跑（外壳 Tab 上的脉冲点）
+  if (window.lgwBridge) window.lgwBridge.busy(busy);
 }
 
 /* ---------- 斜杠指令（E 组：计划与审批 / 模型与请求参数 / 会话与用量 / 工作目录 / 手册） ----------
@@ -2055,6 +2237,10 @@ function setWorkDir(dir, persist = true) {
     renderTasks();
   }
   dom.workdirPath.textContent = dir || '未选择';
+  // 被 Tab 外壳嵌着时，工作目录那根路径条在外壳顶栏上（本页顶栏是收起的），同步文案过去
+  if (window.lgwBridge) {
+    window.lgwBridge.workdir(dir || '未选择', dir ? `点击更换工作目录：${dir}` : '点击选择工作目录');
+  }
   dom.workdirChip.title = dir ? `点击更换工作目录：${dir}` : '点击选择工作目录';
   const ready = Boolean(dir);
   dom.input.disabled = !ready;
@@ -3030,6 +3216,24 @@ async function init() {
   // 不传参数：沿用当前工作目录（别把 click 事件传进去）
   dom.newTask.addEventListener('click', () => startDraft());
   dom.btnToggleSidebar.addEventListener('click', toggleSidebar);
+
+  // 侧边栏搜索：任务多了按标题 / 目录找。Escape 清空（与输入框里的直觉一致）
+  if (dom.taskSearch) {
+    dom.taskSearch.addEventListener('input', () => setTaskQuery(dom.taskSearch.value));
+    dom.taskSearch.addEventListener('keydown', (e) => {
+      if (e.key !== 'Escape') return;
+      e.preventDefault();
+      setTaskQuery('');
+    });
+  }
+  if (dom.btnTaskSearchClear) dom.btnTaskSearchClear.addEventListener('click', () => setTaskQuery(''));
+
+  // 被 Tab 外壳嵌着时，把状态点 / 工作目录 / 侧栏开合的初值报上去，
+  // 外壳顶栏不必等到下一次变化才有内容（单独打开本页时 window.lgwBridge 不存在，整块跳过）
+  if (window.lgwBridge) {
+    window.lgwBridge.workdir(state.workDir || '未选择', state.workDir ? `点击更换工作目录：${state.workDir}` : '点击选择工作目录');
+    notifySidebar();
+  }
   dom.btnPrune.addEventListener('click', async () => {
     try {
       const data = await api('/api/tasks/prune', { method: 'POST' });

package/public/theme.js

@@ -82,10 +82,30 @@
     syncButtons();
   }
 
+  /**
+   * 别的文档改了主题就跟上。
+   *
+   * 场景：`/` 是 Tab 外壳，三个面板是它的 iframe（见 public/shell.html / shell.js）。
+   * 外壳上点「白天/黑夜」时，面板自己不会知道 —— localStorage 同源共享，而 `storage` 事件
+   * 恰好只在「其他文档」里触发（自己改自己不会绕回来），所以这里正好是缺的那一环：
+   * 面板、另一个标签页里的同一页面，都能立刻跟着变。
+   * 传了底色的页面（?bg=）配色由宿主决定，一律不跟。
+   */
+  function watchStorage() {
+    if (typeof window.addEventListener !== 'function') return; // node 垫片里没有这个方法
+    window.addEventListener('storage', (e) => {
+      if (e && e.key && e.key !== KEY) return; // null = 被 clear() 清空，也当主题变化处理
+      if (forced()) return;
+      apply(effective());
+      syncButtons();
+    });
+  }
+
   // 页面加载后立刻同步一次，避免内联脚本与这里不一致
   apply(effective());
   if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', wire);
   else wire();
+  watchStorage();
 
   window.lgwTheme = { get: effective, set: setTheme, stored };
 })();

package/public/tint.js

@@ -219,9 +219,10 @@
     root.style.colorScheme = tint.theme;
   }
 
-  /** 页内跳到聊天/任务页时把底色带上，否则新标签页里会退回默认配色 */
+  /** 页内跳到外壳/聊天/任务/手册时把底色带上，否则新标签页里会退回默认配色。
+   *  `/` 自 20260922 起是 Tab 外壳（shell.html），三个面板都有各自的路径，所以这里逐个列全 */
   function patchLinks(hex) {
-    const SELF = ['/', '/index.html', '/task', '/task.html'];
+    const SELF = ['/', '/index.html', '/shell', '/shell.html', '/chat', '/chat.html', '/task', '/task.html', '/manual', '/manual.html'];
     for (const a of document.querySelectorAll('a[href]')) {
       let url;
       try {
@@ -230,7 +231,8 @@
         continue;
       }
       const sameOrigin = url.origin === window.location.origin;
-      const isEntry = a.id === 'btn-open-task' || a.id === 'btn-open-chat';
+      // 任务页顶栏那个「聊天 ↗」是显式的跨页入口：即使被指到别的主机也要带上底色
+      const isEntry = a.id === 'btn-open-chat';
       if (!isEntry && !(sameOrigin && SELF.includes(url.pathname))) continue;
       url.searchParams.set('bg', hex);
       a.setAttribute('href', sameOrigin ? `${url.pathname}${url.search}${url.hash}` : url.toString());