npm - llm-api-gateway-cli - Versions diffs - 1.0.3 → 1.0.5 - Mend

llm-api-gateway-cli 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (18) hide show

package/public/manual.html CHANGED Viewed

@@ -7,7 +7,9 @@
   <link rel="stylesheet" href="/styles.css" />
   <link rel="stylesheet" href="/manual.css" />
   <script>
-    // 防闪白：必须在首次绘制前把主题定下来（逻辑与 /theme.js 一致，三个页面都一样）
+    // 防闪白：必须在首次绘制前把主题定下来（逻辑与 /theme.js 一致，四个页面都一样）。
+    // 同时定下「是不是被 Tab 外壳嵌着」：带 ?embed=1 时 <html> 挂 data-embed，
+    // styles.css 据此收起本页自己的顶栏（顶栏归外壳）。
     (() => {
       try {
         let t = localStorage.getItem('lgw.theme');
@@ -19,6 +21,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>
   <script src="/tint.js"></script>
@@ -57,6 +66,7 @@
     <nav class="manual-toc" aria-label="目录">
       <a href="#s-install">安装与启动</a>
       <a href="#s-quick">三分钟上手</a>
+      <a href="#s-shell">同一页的三个 Tab</a>
       <a href="#s-modes">三种模式</a>
       <a href="#s-workdir">工作目录与边界</a>
       <a href="#s-howto">指令怎么用</a>
@@ -83,7 +93,8 @@
         ② <b>选做什么、在哪跑</b>：<b>裸敲</b> <code>llm-api-gateway-cli</code>（或 <code>gateway-agent</code>）会先问
         「① 对话 / ② 任务」，再问「① 命令行窗口 / ② 网页 UI」，选完直接进入对应形态 —— 不替你默认。
         ③ 只有选了「网页 UI」才会起服务；<b>起服务后要自己用浏览器</b>打开
-        <code>http://127.0.0.1:3100/</code>（聊天）或 <code>/task</code>（任务），
+        <code>http://127.0.0.1:3100/</code> —— 聊天 / 任务 / 手册在<b>同一个页面</b>里用顶部 Tab 切换
+        （也能单独打开 <code>/chat</code> 与 <code>/task</code>），
         而<b>这一页手册本身就是 3100 上的 <code>/manual</code></b>，也要服务起着才看得到。
         网关地址与密钥在任务页「设置 → 其他配置」里也能改；命令行是 <code>gateway-agent config set baseUrl|key …</code>。
         想跳过启动器：<code>-p "问题"</code>（单轮）· <code>-i</code>（直接进对话）· <code>gateway-task</code>（直接起网页）。
@@ -287,8 +298,32 @@ gateway-agent config set mode auto          # 新任务的默认审批模式</co
       </ol>
     </section>
+    <section id="s-shell">
+      <h2>三、同一页的三个 Tab（聊天 / 任务 / 手册）</h2>
+      <p>
+        起服务后打开 <code>http://127.0.0.1:3100/</code>，<b>只有一个浏览器标签页</b>：顶部一排 Tab 在
+        <b>聊天</b> / <b>任务</b> / <b>手册</b> 之间切换，不再靠新开页面互跳。
+        当前 Tab 会写进地址栏（<code>/#task</code>、<code>/#manual</code>），所以刷新、收藏、分享链接都能回到同一个面板。
+      </p>
+      <ul>
+        <li><b>状态不丢</b>：切走的面板只是藏起来，正在跑的任务、输入框里的草稿、会话列表都还在原处。</li>
+        <li><b>导航只归外壳</b>：面板里不再自带跨面板入口（聊天面板原先那个「＋ 新任务 ↗」已删除），切面板一律点顶部的 Tab 或按 <code>Alt+1/2/3</code>。只有任务面板在单独打开时保留了「聊天 ↗」反向入口。</li>
+        <li><b>操作按钮跟着当前面板走</b>：外壳顶栏那排按钮（☰ 侧栏开关 / 工作目录 / 设置 / 侧栏收起时的「新对话」）是「代点」面板里的真按钮，所以在哪个 Tab 上就是哪个面板的。<b>不重复占位</b>：面板里已经有的入口（如聊天面板侧边栏的「＋ 新对话」）不会在外壳上再放一个。</li>
+        <li><b>快捷键</b>：<code>Alt+1</code> 聊天、<code>Alt+2</code> 任务、<code>Alt+3</code> 手册；点 ⟳ 重新加载当前面板。</li>
+        <li><b>懒加载</b>：面板是<b>第一次切过去时</b>才加载的；后台在跑的任务会在「任务」Tab 上显示一个脉冲点，切到别的 Tab 也看得见。</li>
+        <li><b>三个面板仍能单独打开</b>：<code>/chat</code>、<code>/task</code>、<code>/manual</code> 各自都是完整页面（外部系统 iframe 嵌入、<code>?bg=</code> 底色照旧可用）。</li>
+      </ul>
+      <h3>任务多了 / 历史长了：懒加载</h3>
+      <ul>
+        <li><b>任务侧边栏</b>：默认只渲染前 30 条，滚到底自动续载，也可以点「加载更多（还有 N 条）」；每个目录分组被截断时会标注「本组还有 N 条」。</li>
+        <li><b>搜索</b>：侧边栏「＋ 新任务」下面的搜索框按<b>任务标题与工作目录</b>过滤，任务多的时候比翻列表快；<code>Esc</code> 清空。</li>
+        <li><b>消息历史</b>：一条任务默认只渲染最近 30 条消息，往上翻时点顶部「载入更早的消息」前插（视口不跳，也不会把斜杠指令的输出清掉）。</li>
+        <li>这两处的懒加载<b>只影响画面</b>：任务与消息始终完整地在磁盘上，落盘、发给模型、批准流程都不受渲染窗口影响。</li>
+      </ul>
+    </section>
     <section id="s-modes">
-      <h2>三、三种模式（跟任务走，随时可切）</h2>
+      <h2>四、三种模式（跟任务走，随时可切）</h2>
       <div class="manual-table-wrap">
         <table class="manual-table">
           <thead>
@@ -320,7 +355,7 @@ gateway-agent config set mode auto          # 新任务的默认审批模式</co
     </section>
     <section id="s-workdir">
-      <h2>四、工作目录、任务记录与边界</h2>
+      <h2>五、工作目录、任务记录与边界</h2>
       <ul>
         <li>模型的一切文件操作都被限制在你选定<b>工作目录</b>之内；换目录用顶栏的目录芯片，或敲 <code>/cwd &lt;路径&gt;</code>。</li>
         <li><code>/files [子路径]</code> 列目录、<code>/init</code> 在工作目录里生成 <code>AGENTS.md</code> 项目约定骨架、<code>/instructions</code> 看当前注入给模型的项目记忆（<code>AGENTS.md</code> / <code>CLAUDE.md</code>，超上限截断）。</li>
@@ -332,7 +367,7 @@ gateway-agent config set mode auto          # 新任务的默认审批模式</co
     </section>
     <section id="s-howto">
-      <h2>五、斜杠指令怎么用</h2>
+      <h2>六、斜杠指令怎么用</h2>
       <ul>
         <li>在任务页输入框敲一个 <code>/</code>，就会弹出<b>全部</b>候选：<code>↑↓</code> 选择 · <code>Tab</code> 补全 · <code>Enter</code> 执行 · <code>Esc</code> 关闭。接着打字母会按前缀收窄（<code>/pl</code> → <code>/plan</code>）。</li>
         <li>指令<b>只在页面本地执行</b>，不发给模型、也不进任务对白（所以它不会污染模型的上下文）。</li>
@@ -345,7 +380,7 @@ gateway-agent config set mode auto          # 新任务的默认审批模式</co
     </section>
     <section id="s-commands">
-      <h2>六、指令一览（自动生成）</h2>
+      <h2>七、指令一览（自动生成）</h2>
       <p class="manual-note">
         三端对照在前，各端清单在后。<code>命令行 REPL</code> 是终端里的 <code>gateway-agent</code>；
         <code>任务页</code> 是本服务的 <code>/task</code>；<code>本机聊天页</code> 是本服务的 <code>/</code>。
@@ -354,7 +389,7 @@ gateway-agent config set mode auto          # 新任务的默认审批模式</co
     </section>
     <section id="s-faq">
-      <h2>七、常见问题</h2>
+      <h2>八、常见问题</h2>
       <dl class="manual-faq">
         <dt><code>/files</code> 说"未放行"？</dt>
         <dd>目录浏览、项目记忆、任务记录这类接口会回传本机路径与文件正文，服务只在本机监听（或显式加了 <code>--allow-remote-fs</code>）时才放行。用 <code>--host 0.0.0.0</code> 从别的机器访问时，它们是关着的 —— 这是有意的安全边界。</dd>

package/public/shell-bridge.js ADDED Viewed

@@ -0,0 +1,100 @@
+'use strict';
+/**
+ * 面板 ↔ 外壳 的桥（聊天面板与任务面板引入；手册面板只需要主题同步，不引）
+ *
+ * 背景：`/` 是 Tab 外壳（public/shell.html），三个面板是它懒加载的同源 iframe。
+ * 面板单独打开（`/chat`、`/task?bg=…`、被别的系统 iframe 嵌入）时本文件**什么都不做** ——
+ * 所有上行消息都要求 `?embed=1` 且真的在某个父窗口里，单独打开时 `lgwBridge.active === false`。
+ *
+ * 上行（面板 → 外壳）：ready / dot / workdir / sidebar / busy / goto（协议全文见 shell.js 头注释）
+ * 下行（外壳 → 面板）：
+ *   · `{type:'click', id}` —— 外壳代点面板里的 `#id`（设置、侧栏开关、工作目录…）。
+ *     面板顶栏在嵌入时被 CSS 收起，但元素还在 DOM 里，`.click()` 照样触发原 handler。
+ *
+ * 用它的三条纪律：
+ *  1. 一律通过 `window.lgwBridge` 特性检测调用（`window.lgwBridge && window.lgwBridge.dot('ok')`），
+ *     不在页面里写 iframe/embed 判断 —— 单独打开的那条路径必须一行都不受影响。
+ *  2. 上行消息只发同源 origin，且外壳只认自己登记的 iframe 窗口（两侧都校验）。
+ *  3. **导航只归外壳**：面板自己不提供跨面板入口（聊天页原先那个「＋ 新任务 ↗」入口在 20260922 已删掉，
+ *     切面板一律走外壳顶部的 Tab），所以这里没有「把链接改成切 Tab」那套拦截逻辑。
+ */
+(function () {
+  'use strict';
+  const params = new URLSearchParams(window.location.search || '');
+  const hasEmbed = params.get('embed') === '1';
+  const inFrame = Boolean(window.parent) && window.parent !== window;
+  const active = hasEmbed && inFrame;
+  const ORIGIN = window.location.origin;
+  /** 当前面板的 Tab id：外壳据此把消息对上号（认不出来就什么都不发） */
+  function tabId() {
+    const p = (window.location.pathname || '/').replace(/\/+$/, '') || '/';
+    if (p === '/task' || p === '/task.html') return 'task';
+    if (p === '/' || p === '/chat' || p === '/chat.html' || p === '/index.html') return 'chat';
+    return '';
+  }
+  const tab = tabId();
+  const canPost = active && Boolean(tab);
+  function post(msg) {
+    if (!canPost) return false;
+    try {
+      window.parent.postMessage({ source: 'lgw-pane', tab, ...msg }, ORIGIN);
+      return true;
+    } catch {
+      return false; // 父窗口正好没了：不影响面板自身的功能
+    }
+  }
+  /**
+   * 面板 → 外壳的五个通知。都不返回值、也不算「业务成功与否」——
+   * 外壳不在（单独打开）时它们是空操作，页面照常。
+   */
+  const api = {
+    active: canPost,
+    tab,
+    post,
+    ready: () => post({ type: 'ready' }),
+    dot: (kind) => post({ type: 'dot', kind: kind || '' }),
+    workdir: (text, title) => post({ type: 'workdir', text: text || '', title: title || '' }),
+    sidebar: (open) => post({ type: 'sidebar', open: Boolean(open) }),
+    busy: (busy) => post({ type: 'busy', busy: Boolean(busy) }),
+    /** 请求外壳切到另一个面板（`Alt+1/2/3` 用） */
+    goto: (target) => post({ type: 'goto', tab: target }),
+  };
+  window.lgwBridge = api;
+  if (!canPost) return; // 单独打开：到此为止
+  window.addEventListener('message', (e) => {
+    // 只收同源的、发给本面板的外壳消息
+    if (e.origin !== ORIGIN) return;
+    const msg = e.data;
+    if (!msg || msg.source !== 'lgw-shell' || msg.tab !== tab) return;
+    if (msg.type === 'click') {
+      const el = document.getElementById(msg.id);
+      if (el) el.click();
+    }
+  });
+  /**
+   * Alt+1/2/3 切面板的快捷键在面板里也要生效：焦点在输入框里时 keydown 只发给面板自己的文档，
+   * 外壳那个监听根本收不到 —— 这里补一条，转成 goto 消息（面板单独打开时上面已经 return 了）。
+   */
+  const TAB_KEYS = { 1: 'chat', 2: 'task', 3: 'manual' };
+  document.addEventListener('keydown', (e) => {
+    if (!e.altKey || e.ctrlKey || e.metaKey || e.shiftKey) return;
+    const target = TAB_KEYS[e.key];
+    if (!target) return;
+    e.preventDefault();
+    api.goto(target);
+  });
+  // 所有面板脚本（含 init）都跑完才算就绪：外壳收到 ready 后会补发排队中的代点指令
+  if (document.readyState === 'complete') api.ready();
+  else window.addEventListener('load', () => api.ready());
+})();

package/public/shell.css ADDED Viewed

@@ -0,0 +1,242 @@
+/* Tab 外壳（/）：聊天 / 任务 / 手册 在同一个页面里切换
+ *
+ * 只做「外壳」这一层的排版：配色、按钮、主题全部复用 styles.css 的变量与类
+ * （--bg / --border / --text / .btn / .dot / .theme-switch …），
+ * 所以白天 / 黑夜 / 外部底色（?bg=）三种情况下都与三个面板协调。
+ * 新加的变量（--accent-2 / --accent-2-soft）同时写在 styles.css 的深浅两套里，tests/theme.test.mjs 盯着。
+ */
+.shell-body {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden; /* 滚动条交给面板内部，外壳自己不滚 */
+}
+/* ---------- 顶栏（唯一一条） ---------- */
+.shell-bar {
+  flex: none;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 14px;
+  background: var(--bg-soft);
+  border-bottom: 1px solid var(--border);
+  box-shadow: var(--shadow-xs);
+  position: relative;
+  z-index: 3;
+}
+/* 顶栏底部一条极细的强调线：让「这一条是外壳、下面是面板」一眼可分 */
+.shell-bar::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -1px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--accent-2), transparent);
+  opacity: .45;
+  pointer-events: none;
+}
+.shell-brand { flex: none; }
+.shell-brand h1 { font-size: 14.5px; }
+/* ---------- Tab 组：药丸 + 滑动高亮块 ---------- */
+.tabs {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--bg-code);
+  flex: none;
+}
+.tab-ink {
+  position: absolute;
+  top: 3px;
+  bottom: 3px;
+  left: 0;
+  width: 0;
+  border-radius: 999px;
+  background: var(--bg-raised);
+  border: 1px solid var(--border-strong);
+  box-shadow: var(--shadow-xs);
+  transition: transform var(--t), width var(--t);
+  pointer-events: none;
+}
+.tab {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid transparent;
+  background: none;
+  color: var(--text-dim);
+  font: inherit;
+  font-size: 13px;
+  padding: 5px 14px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition: color var(--t), background-color var(--t);
+  white-space: nowrap;
+}
+.tab:hover { color: var(--text); background: var(--accent-2-soft); }
+.tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
+.tab[aria-selected="true"] { color: var(--text); font-weight: 600; }
+.tab-icon { font-size: 12.5px; line-height: 1; }
+/* 后台有任务在跑时的脉冲点：切到别的 Tab 也知道任务没停 */
+.tab-dot {
+  display: none;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: var(--warn);
+  box-shadow: 0 0 0 3px var(--warn-ring);
+}
+.tab.busy .tab-dot {
+  display: block;
+  animation: tab-pulse 1.4s ease-in-out infinite;
+}
+@keyframes tab-pulse {
+  0%, 100% { opacity: .35; transform: scale(.85); }
+  50% { opacity: 1; transform: scale(1); }
+}
+/* ---------- 当前面板的操作按钮（外壳代点面板里的按钮） ---------- */
+.shell-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-left: auto;
+  min-width: 0;
+  overflow: hidden; /* 顶栏不允许被长内容顶出屏幕；工作目录那一条自己会省略号截断 */
+}
+.shell-actions:empty { display: none; }
+.shell-actions .btn.active {
+  color: var(--accent);
+  border-color: var(--border-strong);
+  background: var(--accent-soft);
+}
+/* 工作目录：内容来自任务面板（桥消息 workdir），点击转发给面板里的 #workdir-chip */
+.shell-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  max-width: 320px;
+  border: 1px solid var(--border);
+  background: var(--bg-code);
+  color: var(--text-dim);
+  border-radius: 999px;
+  padding: 4px 12px;
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color var(--t), color var(--t);
+}
+.shell-chip:hover { border-color: var(--border-strong); color: var(--text); }
+.shell-chip .wd-label { color: var(--text-faint); font-size: 11px; flex: none; }
+.shell-chip code {
+  font-family: var(--mono);
+  font-size: 11.5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  /* flex 项的 min-width 默认是 auto：不写这行，长路径会把顶栏顶出屏幕（省略号也不生效） */
+  min-width: 0;
+}
+/* ---------- 面板区 ---------- */
+.panes {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  background: var(--bg);
+}
+.pane {
+  position: absolute;
+  inset: 0;
+  /* 切回来时淡入一下（display:none → 显示会让动画重新开始，正是想要的效果） */
+  animation: pane-in 180ms cubic-bezier(.4, 0, .2, 1);
+}
+.pane[hidden] { display: none; }
+.pane-frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+  display: block;
+  background: var(--bg);
+}
+@keyframes pane-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: none; }
+}
+/* 首次激活前的骨架：懒加载时给一句「正在加载」而不是白屏。
+   z-index 是必须的 —— iframe 在后面创建，不抬起来会被它盖住（等于没骨架）。
+   [hidden] 这条也是必须的：UA 的 `[hidden]{display:none}` 会被上面那条 `display:flex` 压掉，
+   不加这一条骨架在 iframe 加载完之后仍然盖在上面（表现就是「外壳出来了、面板一直空着」）。 */
+.pane-skeleton {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  color: var(--text-faint);
+  font-size: 13px;
+  background: var(--bg);
+}
+.pane-skeleton[hidden] { display: none; }
+.pane-skeleton .spinner {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  border: 2px solid var(--border);
+  border-top-color: var(--accent);
+  animation: spin .8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+/* ---------- 窄屏 ---------- */
+@media (max-width: 860px) {
+  .shell-bar { gap: 8px; padding: 8px 10px; }
+  .shell-chip { max-width: 180px; }
+}
+@media (max-width: 700px) {
+  .tab-text { display: none; }
+  .tab { padding: 5px 12px; }
+  .shell-brand h1, .shell-brand .tag { display: none; }
+  .shell-chip { max-width: 120px; }
+  .shell-actions .btn .btn-text { display: none; }
+}

package/public/shell.html ADDED Viewed

@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>LLM API Gateway</title>
+  <link rel="stylesheet" href="/styles.css" />
+  <link rel="stylesheet" href="/shell.css" />
+  <script>
+    // 防闪白：必须在首次绘制前把主题定下来，所以内联在这里（逻辑与 /theme.js 一致，四个页面都一样）
+    (() => {
+      try {
+        let t = localStorage.getItem('lgw.theme');
+        if (t !== 'dark' && t !== 'light') {
+          t = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark';
+        }
+        document.documentElement.setAttribute('data-theme', t);
+        document.documentElement.style.colorScheme = t;
+      } catch (e) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+      }
+    })();
+  </script>
+  <!-- 外部集成：地址上带 ?bg=<底色> 时按底色推导整套配色，并透传给三个面板（见 shell.js 的 paneSrc）。
+       必须是阻塞脚本（排在 theme.js 之前），否则会先按默认配色画一帧再变色 -->
+  <script src="/tint.js"></script>
+  <script src="/theme.js" defer></script>
+</head>
+<body class="shell-body">
+  <!-- 唯一顶栏：品牌 + Tab + 当前面板操作 + 主题。
+       三个面板自己的顶栏在嵌入时收起（html[data-embed] .topbar），避免两条横栏 -->
+  <header class="shell-bar" id="shell-bar">
+    <div class="brand shell-brand">
+      <span class="dot" id="shell-dot"></span>
+      <h1>LLM API Gateway</h1>
+      <span class="tag" id="shell-tag">Web UI</span>
+    </div>
+    <nav class="tabs" id="shell-tabs" role="tablist" aria-label="页面">
+      <button class="tab" type="button" role="tab" data-tab="chat" id="tab-chat"
+              aria-selected="true" title="纯对话：不碰文件系统（Alt+1）">
+        <span class="tab-icon" aria-hidden="true">💬</span><span class="tab-text">聊天</span>
+      </button>
+      <button class="tab" type="button" role="tab" data-tab="task" id="tab-task"
+              aria-selected="false" title="任务模式：选一个目录，模型真读写（Alt+2）">
+        <span class="tab-icon" aria-hidden="true">🗂</span><span class="tab-text">任务</span>
+        <span class="tab-dot" aria-hidden="true"></span>
+      </button>
+      <button class="tab" type="button" role="tab" data-tab="manual" id="tab-manual"
+              aria-selected="false" title="操作手册：流程 + 三端指令对照（Alt+3）">
+        <span class="tab-icon" aria-hidden="true">📖</span><span class="tab-text">手册</span>
+      </button>
+      <span class="tab-ink" id="tab-ink" aria-hidden="true"></span>
+    </nav>
+    <div class="shell-actions" id="shell-actions"></div>
+    <div class="theme-switch" role="group" aria-label="主题">
+      <button class="theme-btn" type="button" data-theme-option="system" title="跟随系统" aria-label="跟随系统">◐</button>
+      <button class="theme-btn" type="button" data-theme-option="light" title="白天" aria-label="白天">☀</button>
+      <button class="theme-btn" type="button" data-theme-option="dark" title="黑夜" aria-label="黑夜">☾</button>
+    </div>
+    <button class="btn ghost icon-only" id="btn-reload-pane" type="button"
+            title="重新加载当前面板（面板里的状态会重置）">⟳</button>
+  </header>
+  <!-- 面板区：iframe 首次激活时才创建（懒加载），切走的保留在 DOM 里 —— 状态不丢 -->
+  <main class="panes" id="panes"></main>
+  <script src="/shell.js"></script>
+</body>
+</html>