llm-api-gateway-cli 1.0.3 → 1.0.4

package/public/shell.js

@@ -0,0 +1,412 @@
+'use strict';
+
+/**
+ * Tab 外壳（/）：聊天 / 任务 / 手册 在同一个页面里切换，不再新开标签页
+ *
+ * 三条设计决定：
+ *  1. **面板 = 同源 iframe，首次激活才创建**（懒加载）：三个页面各自的 dom 映射、全局键盘事件、
+ *     SSE 与轮询一行都不用改 —— 合并进同一个 DOM 就得给上百处重名 id 改名，还得让两套
+ *     `Enter 发送` 互相避让，风险远大于收益。切走的面板留在 DOM 里（只 hidden），状态不丢。
+ *  2. **顶栏只有一条**：外壳持有品牌 / Tab / 当前面板操作 / 主题；面板带 `?embed=1` 打开时
+ *     用 CSS 收起自己的顶栏（`html[data-embed] .topbar`）。面板里那些按钮（设置、侧栏开关、
+ *     工作目录）仍留在原页面 DOM 里，外壳只负责「代点」—— 面板单独打开时行为与本轮之前完全一致。
+ *  3. **面板之间没有直接耦合**：全部走 postMessage（只认同源 + 已登记的 iframe 窗口）。
+ *     面板里 `window.lgwBridge` 不存在时（单独打开、被别的系统 iframe 嵌入）一切照旧。
+ *
+ * 消息协议（两侧都写在这两个文件头上，改一处必须改另一处）：
+ *
+ *   面板 → 外壳   { source:'lgw-pane',  tab, type:'ready' }                     面板脚本就绪
+ *                { source:'lgw-pane',  tab, type:'dot',     kind }              状态点（'' / ok / warn / err）
+ *                { source:'lgw-pane',  tab, type:'workdir', text, title }       工作目录文案（任务面板）
+ *                { source:'lgw-pane',  tab, type:'sidebar', open }              侧边栏开合（驱动 ☰ 的按下态）
+ *                { source:'lgw-pane',  tab, type:'busy',    busy }              面板正在跑（Tab 上的脉冲点）
+ *                { source:'lgw-pane',  tab, type:'goto',    tab }               请求切到另一个 Tab（Alt+1/2/3）
+ *
+ *   外壳 → 面板   { source:'lgw-shell', tab, type:'click', id }                代点面板里的 #id
+ *
+ * 主题不走消息：外壳与面板同源共享 localStorage，theme.js 用 storage 事件自己跟。
+ * 底色（?bg=）由 paneSrc 透传给面板地址，外部集成嵌进来的颜色不会掉在 iframe 里。
+ */
+(function (root, factory) {
+  root.Shell = factory();
+})(typeof globalThis !== 'undefined' ? globalThis : this, function () {
+  'use strict';
+
+  /**
+   * 面板清单。actions 是「外壳代点」的按钮：id 必须是对应面板里真实存在的元素 id，
+   * 点击时外壳只发一条 click 消息，真正的 handler 还在面板里。
+   */
+  const TABS = [
+    {
+      id: 'chat',
+      label: '聊天',
+      src: '/chat',
+      hint: '纯对话：不碰文件系统',
+      actions: [
+        { id: 'btn-toggle-sidebar', label: '☰', title: '会话列表', icon: true },
+        { id: 'btn-settings', label: '设置' },
+        // 「新对话」：聊天面板侧边栏里已经有一个「＋ 新对话」，侧边栏开着时这里不再重复占位；
+        // 只在侧边栏收起（点 ☰ 收起，或窄屏下侧栏是抽屉）时补一个 —— 否则那会儿就没有新建入口了。
+        { id: 'btn-clear', label: '新对话', primary: true, whenSidebarHidden: true },
+      ],
+    },
+    {
+      id: 'task',
+      label: '任务',
+      src: '/task',
+      hint: '选一个目录，模型真读写',
+      actions: [
+        { id: 'btn-toggle-sidebar', label: '☰', title: '任务列表', icon: true },
+        // 内容由任务面板通过 workdir 消息填，点击转发给面板里的 #workdir-chip（目录选择器）
+        { id: 'workdir-chip', chip: true, label: '工作目录', value: '未选择' },
+        { id: 'btn-settings', label: '设置' },
+      ],
+    },
+    {
+      id: 'manual',
+      label: '手册',
+      src: '/manual',
+      hint: '操作手册与三端指令对照',
+      actions: [],
+    },
+  ];
+
+  /** 面板地址上带的嵌入标记：面板据此收起自己的顶栏 */
+  const EMBED_PARAM = 'embed';
+  /** 地址里认这三个底色参数（与 tint.js 的 PARAMS 一致），要透传给面板 */
+  const TINT_PARAMS = ['bg', 'bgcolor', 'bg-color'];
+
+  function tabById(id) {
+    return TABS.find((t) => t.id === id) || null;
+  }
+
+  /** `#task` / `#manual` / 空串 → 合法 Tab id（认不出就回第一个） */
+  function tabFromHash(hash) {
+    const id = String(hash || '').replace(/^#/, '').trim().toLowerCase();
+    return tabById(id) ? id : TABS[0].id;
+  }
+
+  /** 面板地址：带 embed=1，并把外壳地址上的底色参数原样带上 */
+  function paneSrc(tab, search) {
+    const sp = new URLSearchParams(String(search || '').replace(/^\?/, ''));
+    const out = new URLSearchParams();
+    out.set(EMBED_PARAM, '1');
+    for (const name of TINT_PARAMS) {
+      const v = sp.get(name);
+      if (v) out.set(name, v);
+    }
+    return `${tab.src}?${out.toString()}`;
+  }
+
+  return { TABS, EMBED_PARAM, TINT_PARAMS, tabById, tabFromHash, paneSrc };
+});
+
+/* ---------- 浏览器里的接线（node 里 import 它只为拿上面的纯函数） ---------- */
+
+if (typeof document !== 'undefined') {
+  (function () {
+    'use strict';
+
+    const S = globalThis.Shell;
+
+    const dom = {
+      tabs: document.getElementById('shell-tabs'),
+      tabInk: document.getElementById('tab-ink'),
+      actions: document.getElementById('shell-actions'),
+      panes: document.getElementById('panes'),
+      dot: document.getElementById('shell-dot'),
+      tag: document.getElementById('shell-tag'),
+      reload: document.getElementById('btn-reload-pane'),
+    };
+
+    const state = {
+      active: null,
+      /** tabId → { wrap, frame, skeleton, loaded } */
+      panes: new Map(),
+      /** 面板还没就绪时先排队的下行消息：[tabId, payload] */
+      pending: [],
+      /** 任务面板最近一次报上来的工作目录文案（重画操作区时保留） */
+      workdir: '',
+      workdirTitle: '',
+      /** 各面板侧边栏开合（重画操作区时保留） */
+      sidebar: {},
+      /** 各面板是否在跑（Tab 脉冲点） */
+      busy: {},
+    };
+
+    /* ---------- 面板的创建与懒加载 ---------- */
+
+    /**
+     * 骨架（「正在加载…」那层）的显隐。
+     *
+     * 两处一起改，是因为**只写 hidden 不够**：`[hidden]` 的 UA 规则是 `display:none`，
+     * 会被 `.pane-skeleton { display: flex }` 这条作者样式压掉 —— 骨架是绝对定位且 z-index 高于 iframe，
+     * 压不掉就会永远盖在面板上（症状：外壳正常、Tab 能切，但面板区一直空着）。
+     * 这是本项目里真出过一次的 bug，两条路都留着：CSS 里有 `.pane-skeleton[hidden]`，这里再显式关一次。
+     */
+    function showSkeleton(pane, on) {
+      pane.skeleton.hidden = !on;
+      pane.skeleton.style.display = on ? '' : 'none';
+    }
+
+    function ensurePane(tab) {
+      const existed = state.panes.get(tab.id);
+      if (existed) return existed;
+
+      const wrap = document.createElement('div');
+      wrap.className = 'pane';
+      wrap.dataset.tab = tab.id;
+      wrap.hidden = true;
+
+      const skeleton = document.createElement('div');
+      skeleton.className = 'pane-skeleton';
+      const spinner = document.createElement('div');
+      spinner.className = 'spinner';
+      const text = document.createElement('div');
+      text.textContent = `正在加载${tab.label}…`;
+      skeleton.append(spinner, text);
+
+      const frame = document.createElement('iframe');
+      frame.className = 'pane-frame';
+      frame.title = tab.label;
+      frame.setAttribute('loading', 'eager');
+
+      const pane = { wrap, frame, skeleton, loaded: false };
+      // 懒加载就发生在这里：只有第一次激活某个 Tab 时才会给面板发请求
+      frame.src = S.paneSrc(tab, window.location.search);
+      // 兜底：面板迟迟没到（服务挂了、面板脚本报错、请求被拦）时，把骨架文案换成能自救的提示。
+      // 没有这一条，用户对着一个永远转圈的「正在加载」没有任何线索 —— 这正是本项目踩过的坑。
+      const slowTimer = setTimeout(() => {
+        if (pane.loaded) return;
+        text.textContent = `${tab.label}面板没加载出来：点顶栏 ⟳ 重试，或直接打开 ${tab.src}`;
+      }, 8000);
+      frame.addEventListener('load', () => {
+        clearTimeout(slowTimer);
+        pane.loaded = true;
+        showSkeleton(pane, false);
+        flush(tab.id);
+        moveInk();
+      });
+
+      wrap.append(skeleton, frame);
+      dom.panes.appendChild(wrap);
+      state.panes.set(tab.id, pane);
+      return pane;
+    }
+
+    function paneOfSource(source) {
+      // source 为空也必须挡住：postMessage 的 source 可能来自 Service Worker / MessagePort（那是 null），
+      // 且面板窗口被销毁后也不再是「已登记的面板」
+      if (!source) return null;
+      for (const [id, p] of state.panes) {
+        if (p.frame.contentWindow === source) return id;
+      }
+      return null;
+    }
+
+    /* ---------- 外壳 → 面板 ---------- */
+
+    function send(tabId, msg) {
+      const payload = { source: 'lgw-shell', tab: tabId, ...msg };
+      const pane = state.panes.get(tabId);
+      if (!pane || !pane.loaded) {
+        // 面板还没建/还没加载完：先排队，load 之后统一补发（例如刚切过去就点了「设置」）
+        state.pending.push([tabId, payload]);
+        return false;
+      }
+      try {
+        pane.frame.contentWindow.postMessage(payload, window.location.origin);
+        return true;
+      } catch {
+        return false;
+      }
+    }
+
+    function flush(tabId) {
+      const rest = [];
+      for (const [tid, payload] of state.pending) {
+        const pane = state.panes.get(tid);
+        if (tid === tabId && pane && pane.loaded) {
+          try {
+            pane.frame.contentWindow.postMessage(payload, window.location.origin);
+          } catch {
+            /* 面板正好被重建了，丢这一条不影响使用 */
+          }
+        } else {
+          rest.push([tid, payload]);
+        }
+      }
+      state.pending = rest;
+    }
+
+    /* ---------- 顶栏渲染 ---------- */
+
+    function moveInk() {
+      const btn = dom.tabs && dom.tabs.querySelector('.tab[aria-selected="true"]');
+      if (!btn || !dom.tabInk || typeof btn.offsetWidth !== 'number') return;
+      dom.tabInk.style.width = `${btn.offsetWidth}px`;
+      dom.tabInk.style.transform = `translateX(${btn.offsetLeft}px)`;
+    }
+
+    function renderActions(tab) {
+      dom.actions.textContent = '';
+      for (const a of tab.actions) {
+        // 「只在侧栏收起时才出现」的按钮：面板还没报过侧栏状态（undefined）时也不显示 ——
+        // 默认（桌面端侧栏是开着的）就不该出现，免得开局闪一下又消失。
+        if (a.whenSidebarHidden && state.sidebar[tab.id] !== false) continue;
+        let el;
+        if (a.chip) {
+          el = document.createElement('button');
+          el.type = 'button';
+          el.className = 'shell-chip';
+          el.dataset.action = a.id;
+          const label = document.createElement('span');
+          label.className = 'wd-label';
+          label.textContent = a.label;
+          const code = document.createElement('code');
+          code.textContent = state.workdir || a.value || '未选择';
+          el.title = state.workdirTitle || '点击选择工作目录';
+          el.append(label, code);
+        } else if (a.icon) {
+          el = document.createElement('button');
+          el.type = 'button';
+          el.className = 'btn ghost icon-only';
+          el.dataset.action = a.id;
+          el.textContent = a.label;
+          el.title = a.title || a.label;
+        } else {
+          el = document.createElement('button');
+          el.type = 'button';
+          el.className = a.primary ? 'btn primary' : 'btn ghost';
+          el.dataset.action = a.id;
+          el.title = a.title || a.label;
+          const text = document.createElement('span');
+          text.className = 'btn-text';
+          text.textContent = a.label;
+          el.appendChild(text);
+        }
+        if (a.id === 'btn-toggle-sidebar' && state.sidebar[tab.id]) el.classList.add('active');
+        el.addEventListener('click', () => send(tab.id, { type: 'click', id: a.id }));
+        dom.actions.appendChild(el);
+      }
+    }
+
+    /** 工作目录文案变了：只改那一个节点，不重画整个操作区（免得按钮闪） */
+    function renderWorkdir() {
+      const code = dom.actions && dom.actions.querySelector('.shell-chip code');
+      if (code) code.textContent = state.workdir || '未选择';
+      const chip = dom.actions && dom.actions.querySelector('.shell-chip');
+      if (chip) chip.title = state.workdirTitle || '点击选择工作目录';
+    }
+
+    /* ---------- 切 Tab ---------- */
+
+    function openTab(id) {
+      const tab = S.tabById(id) || S.TABS[0];
+      state.active = tab.id;
+
+      // 懒加载：第一次激活这个 Tab 时才建 iframe（也只有这时才发请求）
+      const pane = ensurePane(tab);
+      pane.wrap.hidden = false;
+      for (const [tid, p] of state.panes) if (tid !== tab.id) p.wrap.hidden = true;
+
+      for (const btn of dom.tabs.querySelectorAll('.tab')) {
+        btn.setAttribute('aria-selected', String(btn.dataset.tab === tab.id));
+      }
+      moveInk();
+      renderActions(tab);
+      if (dom.tag) dom.tag.textContent = tab.label;
+      document.title = `${tab.label} · LLM API Gateway`;
+
+      if (window.location.hash !== `#${tab.id}`) window.location.hash = tab.id;
+      return tab.id;
+    }
+
+    /* ---------- 面板 → 外壳 ---------- */
+
+    function onPaneMessage(tabId, msg) {
+      switch (msg.type) {
+        case 'ready':
+          flush(tabId);
+          break;
+        case 'dot':
+          dom.dot.className = `dot${msg.kind ? ' ' + msg.kind : ''}`;
+          break;
+        case 'workdir':
+          state.workdir = String(msg.text || '');
+          state.workdirTitle = String(msg.title || '');
+          renderWorkdir();
+          break;
+        case 'sidebar':
+          state.sidebar[tabId] = Boolean(msg.open);
+          if (state.active === tabId) renderActions(S.tabById(tabId));
+          break;
+        case 'busy': {
+          state.busy[tabId] = Boolean(msg.busy);
+          const btn = dom.tabs.querySelector(`.tab[data-tab="${tabId}"]`);
+          if (btn) btn.classList.toggle('busy', state.busy[tabId]);
+          break;
+        }
+        case 'goto':
+          openTab(msg.tab);
+          break;
+        default:
+          break;
+      }
+    }
+
+    window.addEventListener('message', (e) => {
+      // 只认同源，且必须是本页登记的某个面板窗口 —— 别的页面往这里发消息一律不理
+      if (e.origin !== window.location.origin) return;
+      const msg = e.data;
+      if (!msg || msg.source !== 'lgw-pane') return;
+      const tabId = paneOfSource(e.source);
+      if (!tabId) return;
+      onPaneMessage(tabId, msg);
+    });
+
+    /* ---------- 交互接线 ---------- */
+
+    for (const btn of dom.tabs.querySelectorAll('.tab')) {
+      btn.addEventListener('click', () => openTab(btn.dataset.tab));
+    }
+
+    window.addEventListener('hashchange', () => openTab(S.tabFromHash(window.location.hash)));
+    window.addEventListener('resize', moveInk);
+
+    // Alt+1 / Alt+2 / Alt+3 直接切面板（与浏览器自身的快捷键不冲突）
+    document.addEventListener('keydown', (e) => {
+      if (!e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+      const idx = ['1', '2', '3'].indexOf(e.key);
+      if (idx < 0 || !S.TABS[idx]) return;
+      e.preventDefault();
+      openTab(S.TABS[idx].id);
+    });
+
+    dom.reload.addEventListener('click', () => {
+      const tab = S.tabById(state.active) || S.TABS[0];
+      const pane = ensurePane(tab);
+      showSkeleton(pane, true);
+      pane.loaded = false;
+      try {
+        pane.frame.contentWindow.location.reload();
+      } catch {
+        pane.frame.src = S.paneSrc(tab, window.location.search);
+      }
+    });
+
+    openTab(S.tabFromHash(window.location.hash));
+    moveInk();
+
+    // 供调试与测试用：外壳自己的最小 API
+    globalThis.lgwShell = {
+      TABS: S.TABS,
+      openTab,
+      send,
+      tabFromHash: S.tabFromHash,
+      paneSrc: S.paneSrc,
+      panes: () => [...state.panes.keys()],
+      active: () => state.active,
+    };
+  })();
+}

package/public/styles.css

@@ -24,6 +24,9 @@
   --accent-hover: #3f7cf0;
   --accent-soft: #1d2c44;
   --on-accent: #fff;
+  /* 第二个强调色：Tab 外壳的滑动高亮、顶栏细线、渐变主按钮用（20260922 起） */
+  --accent-2: #8b5cf6;
+  --accent-2-soft: rgba(139, 92, 246, .16);
 
   --danger: #ff6b6b;
   --danger-soft: rgba(255, 107, 107, .07);
@@ -79,6 +82,8 @@ html[data-theme="light"] {
   --accent-hover: #1d4ed8;
   --accent-soft: #e8f0ff;
   --on-accent: #fff;
+  --accent-2: #7c3aed;
+  --accent-2-soft: rgba(124, 58, 237, .12);
 
   --danger: #d92d20;
   --danger-soft: rgba(217, 45, 32, .06);
@@ -149,21 +154,7 @@ body {
 
 .btn.block { width: 100%; }
 
-/* 「新任务」跳到任务模式（另一个端口），用 ↗ 明示会开新页面 */
-.task-entry {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 6px;
-  text-decoration: none;
-  box-sizing: border-box;
-}
-
-.task-entry .ext-mark { font-size: 11px; opacity: .55; }
-
-.task-entry:hover .ext-mark { opacity: 1; }
-
-/* 任务页顶栏里回聊天页的反向入口 */
+/* 任务页顶栏里回聊天页的反向入口（/task 单开时用；Tab 外壳里顶栏是收起的） */
 .chat-entry { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; box-sizing: border-box; }
 .chat-entry .ext-mark { font-size: 11px; opacity: .55; }
 .chat-entry:hover .ext-mark { opacity: 1; }
@@ -321,6 +312,19 @@ body {
 
 .topbar-actions { display: flex; gap: 8px; }
 
+/* ---------- 被 Tab 外壳嵌进来时（?embed=1） ----------
+ * 顶栏只有一条，而且是外壳的（public/shell.html 的 .shell-bar）：面板自己这条收起来，
+ * 免得上下两条横栏。元素仍留在 DOM 里 —— 外壳「代点」设置 / 侧栏开关 / 工作目录，
+ * 靠的就是对隐藏元素调 .click()（隐藏不影响事件派发）。
+ * 标记由各页面 head 里的内联脚本在首帧前挂上（见 index.html / task.html / manual.html）。 */
+html[data-embed] .topbar { display: none; }
+
+/* 面板自带的跨页入口在外壳里是多余的（Tab 栏就能切），↗ 这个「会开新标签页」的提示更没意义。
+   导航一律归外壳：面板里不再有跨面板入口（聊天页那个「＋ 新任务」已在 20260922 删掉），
+   所以这里不需要再针对某个入口做隐藏，只剩下面这条给消息区留的呼吸位。 */
+html[data-embed] .messages { padding-top: 14px; }
+html[data-embed] .settings { border-left-color: var(--border); }
+
 /* ---------- 消息区 ---------- */
 
 .messages {
@@ -953,3 +957,65 @@ html[data-tint] .theme-switch { display: none; }
   .theme-btn { width: 24px; }
 }
 
+/* ---------- 观感提升（20260922） ----------
+ * 全部只改「观感」，不动任何类名与结构：三个面板 + Tab 外壳共用这一份。
+ * 颜色一律走变量（theme 测试盯着裸色值），深浅两套与外部底色（?bg=）下都得成立。 */
+
+/* 顶栏：比面板底色亮一档 + 极轻的渐变，让「工具条」与「内容区」分层 */
+.topbar {
+  background: linear-gradient(180deg, var(--bg-soft), var(--bg-soft));
+  box-shadow: var(--shadow-xs);
+  padding: 10px 18px;
+}
+
+.brand h1 { letter-spacing: .3px; }
+
+/* 主按钮：双色渐变 + 抬升阴影，比单色块更像「可点的东西」 */
+.btn.primary {
+  background: linear-gradient(135deg, var(--accent), var(--accent-2));
+  border-color: transparent;
+  box-shadow: 0 2px 10px var(--accent-soft);
+}
+
+.btn.primary:hover:not(:disabled) {
+  background: linear-gradient(135deg, var(--accent-hover), var(--accent-2));
+  border-color: transparent;
+}
+
+/* 侧边栏：条目再加一点呼吸感，选中项左侧强调条更清楚 */
+.sidebar-head { padding: 12px; }
+.session-item { border-radius: 10px; padding: 2px 4px 2px 9px; }
+.session-item:hover { background: var(--bg-soft); box-shadow: var(--shadow-xs); }
+.session-item.active { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
+.session-list { padding: 10px 8px; }
+.sidebar-foot { padding: 9px 12px; }
+
+/* 消息区：气泡圆角与间距放宽一档，长回答更好读 */
+.messages { padding: 24px 0 10px; }
+.msg { margin-bottom: 20px; gap: 13px; }
+.msg.user .bubble { border-radius: 14px; padding: 11px 15px; box-shadow: var(--shadow-xs); }
+.bubble code { border-radius: 6px; }
+
+/* 输入区：聚焦时给一圈柔和外环（比只换描边颜色更明确） */
+.composer-box { border-radius: 16px; box-shadow: var(--shadow-xs); }
+.composer-box:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 4px var(--accent-soft); }
+
+/* 快捷提示与空态 */
+.empty h2 { font-size: 21px; letter-spacing: .2px; }
+.empty p { line-height: 1.8; }
+.chip { box-shadow: var(--shadow-xs); }
+
+/* 滚动条更细一点，深色下不再抢视线 */
+::-webkit-scrollbar { width: 10px; height: 10px; }
+::-webkit-scrollbar-thumb { border: 2px solid transparent; background-clip: padding-box; }
+
+/* 系统开了「减少动态效果」时把过渡与动画关掉（含 Tab 外壳的滑动高亮） */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: .001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: .001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+

package/public/task.css

@@ -737,3 +737,73 @@
 .slash-msg.error .slash-out { border-color: var(--danger); color: var(--danger); }
 .slash-msg.warn .slash-out { border-color: var(--warn, var(--danger)); }
 
+/* ---------- 任务多了 / 历史长了：懒加载的两条入口（20260922） ----------
+ * 侧边栏分批渲染与消息区「载入更早」都要有个明确的落点，
+ * 否则用户看到的就是「我的任务不见了」——这比多一个按钮难解释得多。
+ */
+
+/* 侧边栏搜索：常驻在「＋ 新任务」下面，输入即过滤（纯客户端） */
+.task-filter {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+#task-search {
+  flex: 1;
+  min-width: 0;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  color: var(--text);
+  font: inherit;
+  font-size: 12.5px;
+  padding: 5px 10px;
+  outline: none;
+  transition: border-color var(--t), box-shadow var(--t);
+}
+
+#task-search::placeholder { color: var(--text-faint); }
+#task-search:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-soft); }
+#task-search::-webkit-search-cancel-button { display: none; } /* 用自己的「✕」清空按钮 */
+
+/* 「加载更多」：贴在列表末尾，不抢任务行的视觉重量 */
+.task-more {
+  display: block;
+  width: 100%;
+  margin: 4px 0 2px;
+  padding: 7px 10px;
+  background: var(--bg-soft);
+  border: 1px dashed var(--border);
+  border-radius: 8px;
+  color: var(--text-dim);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color var(--t), color var(--t), background-color var(--t);
+}
+
+.task-more:hover { color: var(--text); border-color: var(--border-strong); background: var(--bg-raised); }
+
+/* 某个目录下的任务被截断时的一行提示 */
+.task-group-more {
+  padding: 2px 8px 4px;
+  font-size: 11px;
+  color: var(--text-faint);
+}
+
+/* 消息区顶部「载入更早」：居中的细条，不占气泡的视觉层级 */
+.msg-more-bar {
+  display: flex;
+  justify-content: center;
+  margin: 0 auto 14px;
+  padding: 0 20px;
+}
+
+.msg-more-btn {
+  border-style: dashed;
+  color: var(--text-dim);
+}
+
+.msg-more-btn:hover { color: var(--text); }
+

package/public/task.html

@@ -7,7 +7,10 @@
   <link rel="stylesheet" href="/styles.css" />
   <link rel="stylesheet" href="/task.css" />
   <script>
-    // 防闪白：必须在首次绘制前把主题定下来，所以内联在这里（逻辑与 /theme.js 一致）
+    // 防闪白：必须在首次绘制前把主题定下来，所以内联在这里（逻辑与 /theme.js 一致，四个页面都一样）。
+    // 顺手把「是不是被 Tab 外壳嵌着」也定下来：带 ?embed=1 时 <html> 上挂 data-embed，
+    // styles.css 据此收起本页自己的顶栏（顶栏归外壳，免得出现两条横栏）。
+    // 放在首帧之前是为了不闪一下再收起来。
     (() => {
       try {
         let t = localStorage.getItem('lgw.theme');
@@ -19,6 +22,13 @@
       } catch (e) {
         document.documentElement.setAttribute('data-theme', 'dark');
       }
+      try {
+        if (new URLSearchParams(location.search).get('embed') === '1') {
+          document.documentElement.setAttribute('data-embed', '1');
+        }
+      } catch (e) {
+        /* 地址解析不了就当作没嵌入，页面照常独立使用 */
+      }
     })();
   </script>
   <!-- 外部集成：地址上带 ?bg=<底色> 时按底色推导整套配色。必须是阻塞脚本（排在 theme.js 之前），
@@ -31,6 +41,12 @@
     <aside class="sidebar" id="sidebar">
       <div class="sidebar-head">
         <button class="btn primary block" id="btn-new-task" type="button">＋ 新任务</button>
+        <!-- 任务多了要能找：按标题 / 工作目录过滤（列表本身也是分批渲染的，见 task.js 的 LIST_PAGE） -->
+        <div class="task-filter">
+          <input id="task-search" type="search" spellcheck="false" autocomplete="off"
+                 placeholder="搜索任务标题 / 目录" aria-label="搜索任务" />
+          <button class="btn ghost tiny" id="btn-task-search-clear" type="button" hidden title="清空搜索">✕</button>
+        </div>
       </div>
       <div class="session-list" id="task-list"></div>
       <div class="sidebar-foot">
@@ -215,6 +231,8 @@
   <script src="/render.js"></script>
   <script src="/models.js"></script>
   <script src="/task-slash.js"></script>
+  <!-- 面板 ↔ Tab 外壳（/）的桥：单独打开本页时它什么都不做，见 public/shell-bridge.js 的说明 -->
+  <script src="/shell-bridge.js"></script>
   <script src="/task.js"></script>
 </body>
 </html>