dsh-mini-remote 0.1.0 → 0.1.4

package/lib/page.html

@@ -170,6 +170,28 @@
   /* 聊天模式下 AI 的回答**不套气泡**（用户要求「参考单帧模式那样」）。
      用户自己的指令仍然是气泡，一左一右、一个有框一个没框，正好分得清谁说的。 */
   .said { margin-bottom: 18px; }
+  /* ---------- 历史里的一条指令（会话做的一个动作，不是谁说的话） ----------
+     和上面两种气泡都刻意画得不同：不套框、不给复制按钮，只用左边一条细线起头。
+     它是**系统动作**——长得像一句话，就会被当成 AI 的回答去读，而它根本不是回答。 */
+  .cmd {
+    display: flex; align-items: baseline; gap: 8px;
+    width: fit-content; max-width: 100%;
+    margin: 0 0 14px; padding: 4px 10px 4px 9px;
+    border-left: 2px solid var(--line); border-radius: 0 8px 8px 0;
+    background: var(--panel-2); font-size: 13px; line-height: 1.5;
+  }
+  /* 名字加参数排一行，太长就省略——它是「做了哪件事」的标签，不是正文。 */
+  .cmd .cmd-line {
+    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+    color: var(--fg);
+  }
+  .cmd .cmd-res { flex: 0 0 auto; color: var(--muted); }
+  .cmd.success { border-left-color: var(--ok); }
+  .cmd.success .cmd-res { color: var(--ok); }
+  /* 出错的那一种必须是红的：整串历史里只有它需要用户抬眼看一下。 */
+  .cmd.error { border-left-color: var(--err); }
+  .cmd.error .cmd-res { color: var(--err); }
   /* ---------- 正在流出来的那一段 ---------- */
   /* 和最终答案**刻意画得不一样**：上面一条虚线、末尾一个闪动的竖条、没有复制按钮。
      三样都在说同一句话——「这不是最终答案，还会变」。等答案落定整块被换掉。 */
@@ -199,10 +221,15 @@
      那个 171 = 10 个全角字 × 14.5px，加左右内边距 24、边框 2。
      用 max-content 而不是写死 width：将来真加了更长的词条，这行会自己撑开——
      宁可立绘挪一点，也不能让字顶出屏幕。
-     min() 是窄屏退路：屏幕比 299 还窄时，这行跟着屏幕收，别溢出。 */
+     min() 是窄屏退路：屏幕比 299 还窄时，这行跟着屏幕收，别溢出。
+     **max-width 那一行是把上面那句话真正落实**（2026-09-27 补）：光有
+     `max-content` + `min-width` 只有下限没有上限，而气泡的 `max-width:
+     calc(100% - 128px)` 里的那个 100% 又是拿这一行自己算的——两头都靠对方，
+     谁也没被真正管住。结果是一句长话（尤其我那几句英文思考）把整行撑到屏幕外，
+     手机上得横着划才能看见（用户截图报的就是这个）。钉死在这一行的宽度上才算数。 */
   .work-top {
-    display: flex; align-items: center; gap: 6px;
-    width: max-content; min-width: min(299px, 100%);
+    display: flex; align-items: flex-start; gap: 6px;
+    width: max-content; min-width: min(299px, 100%); max-width: 100%;
     margin: 0 auto;
   }
 
@@ -240,7 +267,12 @@
      它推不动立绘——立绘的位置由上面 .work-top 的固定行宽管着，跟气泡宽窄无关。
      所以「词条每 3.6 秒换一次」这件事不会让立绘左右晃。
      max-width 是窄屏退路：立绘 122 + 间隙 6，剩下的都给气泡，宁可折行也别顶出屏幕。
-     抬到 flex-start 是让尖角对着她的头，而不是对着身子中间。 */
+
+     **竖着不限行数**（2026-09-27 用户报的：一句长话被切掉半行）。原来是
+     `-webkit-line-clamp: 3` + `overflow: hidden`——第四行连省略号都没有地截断，
+     看着像她话说了一半。现在让气泡自己长高，整页跟着让位（main 本来就能上下滚）。
+     留一道 `max-height` + 内部滚动只为兜病态长文（几屏）：正常一两句话够不到它。
+     `align-self: flex-start` 让气泡顶到行首、和她的头对齐。 */
   .work-bubble {
     position: relative; flex: 0 1 auto;
     max-width: calc(100% - 128px);
@@ -248,13 +280,31 @@
     background: var(--panel-2); border: 1px solid var(--line);
     border-radius: 12px; padding: 9px 12px;
     font-size: 14.5px; line-height: 1.5; color: var(--fg);
-  }
+    max-height: 50vh; overflow-y: auto;
+    /* 长英文串、URL 不认换行，会把气泡顶宽。中文本来就能任意断行，这条是给它们兜的。 */
+    overflow-wrap: anywhere;
+  }
+  /* hidden 只是 UA 样式表里的一条 display:none，元素自己没写 display 时它才管用——
+     原来这里有个 `display: -webkit-box` 把它盖掉了，于是「词条是空串就把气泡收起来」
+     根本没生效，跑动那张旁边一直挂着一个没字的空药丸（2026-09-27 用户截图报的）。 */
+  .work-bubble[hidden] { display: none; }
+  /* 尖角固定在气泡**上部**（对准她的头），不跟着气泡高度跑。原来钉在 50%，气泡一长高，
+     尖角就滑到她身子下边去了——长句和短句都得指着头，所以要一个绝对值。 */
   .work-bubble::before, .work-bubble::after {
-    content: ''; position: absolute; top: 50%; width: 0; height: 0;
+    content: ''; position: absolute; top: 24px; width: 0; height: 0;
     border: 6px solid transparent; margin-top: -6px;
   }
   .work-bubble::before { left: -12px; border-right-color: var(--line); }
   .work-bubble::after { left: -11px; border-right-color: var(--panel-2); }
+  /* 气泡里的话走和回答区同一套行内渲染（`mdInline`）：`**加粗**`、`` `代码` ``、链接会变成样式。
+     代码的底色特意不用 --panel-2——那是气泡自己的底色，套上去等于看不见。 */
+  .work-bubble strong { font-weight: 650; }
+  .work-bubble a { color: var(--accent); word-break: break-all; }
+  .work-bubble code {
+    background: rgba(127, 127, 127, .18); border: 1px solid var(--line); border-radius: 5px;
+    padding: .1em .35em; font-size: .88em;
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  }
 
   /* 进度条故意做成**不确定进度**的流动条，不是百分比。
      插件按设计只收「指令 + 最终回复」，拿不到 Agent 此刻跑到哪一步，
@@ -375,6 +425,34 @@
   }
   .chip.failed { border-color: var(--danger, #dc2626); }
 
+  /* ---------- 指令菜单（在输入框里打 / 时弹出来的那个列表） ----------
+     排在底栏**上面**，不挡住输入框：手机屏幕就那么大，把它盖住，用户就看不见自己
+     正在打的那一行字了——手机上没有悬停，也没有第二个地方能看。 */
+  .cmd-menu {
+    flex: 0 0 auto; max-height: 42vh; overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    padding: 6px 8px; background: var(--panel); border-top: 1px solid var(--line);
+  }
+  .cmd-menu[hidden] { display: none; }
+  .cmd-menu .cmd-row {
+    display: flex; align-items: baseline; gap: 10px; width: 100%;
+    padding: 9px 8px; border: none; border-radius: 8px; background: none;
+    color: var(--fg); font: inherit; font-size: 14.5px; text-align: left; cursor: pointer;
+  }
+  .cmd-menu .cmd-row:active { background: var(--panel-2); }
+  .cmd-menu .cmd-name {
+    flex: 0 0 auto; color: var(--accent);
+    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  }
+  /* 说明收成一行：这一屏是「扫一眼挑一个」，不是读文档的地方。 */
+  .cmd-menu .cmd-desc {
+    flex: 1 1 auto; min-width: 0; color: var(--muted); font-size: 12.5px;
+    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  }
+  /* 取不到指令时说清原因，**不显示空列表**：空列表看着就像「这个会话没有指令」，
+     而真实原因多半是「这个会话现在没在跑」——两件事，用户能做的事也不一样。 */
+  .cmd-menu .cmd-note { padding: 10px 8px; color: var(--muted); font-size: 13px; }
+
   /* ---------- 左侧导航栏 ---------- */
   #nav {
     position: fixed; inset: 0; z-index: 60; display: none;
@@ -428,7 +506,71 @@
     flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
     background: var(--warn); animation: pulse 1.2s ease-in-out infinite;
   }
+  /* 「新建会话」那一行。跟会话条目同宽、同缩进，但用强调色——
+     它不是一个会话，是一个动作。长得跟会话一样会让人以为点进去就是那条会话。 */
+  .ws-new {
+    display: flex; align-items: center; gap: 6px; width: 100%;
+    padding: 10px 14px 10px 30px; background: none; border: none;
+    color: var(--accent); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
+  }
+  .ws-new:active { background: var(--panel-2); }
+  .ws-new[disabled] { color: var(--muted); cursor: default; }
+
+  /* 导航栏最上面那条「新建工作区」。跟工作区条目之间用一条线隔开：
+     它是这一屏的入口，不是一个工作区。 */
+  .nav-cta {
+    display: flex; align-items: center; gap: 6px; width: 100%;
+    padding: 12px 14px; background: none; border: none; border-bottom: 1px solid var(--line);
+    color: var(--accent); font: inherit; font-size: 14px; text-align: left; cursor: pointer;
+  }
+  .nav-cta:active { background: var(--panel-2); }
+
+  /* 面包屑。横向能划，路径再深也不会把面板撑破。 */
+  .crumb {
+    display: flex; align-items: center; gap: 2px; padding: 8px 10px;
+    overflow-x: auto; white-space: nowrap; border-bottom: 1px solid var(--line);
+  }
+  .crumb button {
+    background: none; border: none; color: var(--accent); font: inherit;
+    font-size: 13px; padding: 4px 6px; cursor: pointer; border-radius: 6px;
+  }
+  .crumb button:active { background: var(--panel-2); }
+  .crumb .sep { color: var(--muted); font-size: 12px; }
+  .crumb .here { color: var(--fg); font-size: 13px; padding: 4px 6px; }
+
+  /* 「就选这个目录」——这一屏唯一的主按钮，所以给它实心底。 */
+  .pick-here {
+    display: block; width: calc(100% - 24px); margin: 10px 12px;
+    padding: 11px; border: none; border-radius: var(--radius);
+    background: var(--accent); color: #fff; font: inherit; font-size: 14px; cursor: pointer;
+  }
+  .pick-here:active { opacity: .85; }
+  .pick-here[disabled] { background: var(--line); color: var(--muted); cursor: default; }
+
+  /* 新建文件夹那一行输入。内联而不是 window.prompt：prompt 在微信这类内嵌
+     浏览器里会被直接屏蔽，那时候点「新建文件夹」什么都不发生、也没提示。 */
+  .mkdir-row { display: flex; gap: 6px; padding: 8px 12px; align-items: center; }
+  .mkdir-row input {
+    flex: 1 1 auto; min-width: 0; padding: 9px 10px; font: inherit; font-size: 14px;
+    background: var(--panel-2); border: 1px solid var(--line);
+    border-radius: 10px; color: var(--fg);
+  }
+  .mkdir-row button {
+    flex: 0 0 auto; padding: 9px 12px; font: inherit; font-size: 13px; cursor: pointer;
+    background: var(--panel-2); border: 1px solid var(--line);
+    border-radius: 10px; color: var(--fg);
+  }
+  .mkdir-row button:active { background: var(--line); }
+
+  /* 「完全权限」那一档的待确认状态：点一次先变成这样，再点一次才真切。
+     跟 .active（当前所在档位）用不同颜色区分——一个是「将要去」，一个是「已在」。 */
+  .seg button.armed { background: var(--danger, #c0392b); color: #fff; }
   .nav-note { padding: 10px 16px; color: var(--muted); font-size: 12px; line-height: 1.6; }
+  /* 「这不是全部」：垫在聊天内容最上面，往上翻到顶才看得见，不抢内容。 */
+  .history-note {
+    margin: 0 0 14px; padding: 8px 12px; border: 1px dashed var(--line);
+    border-radius: 10px; color: var(--muted); font-size: 12.5px; line-height: 1.6;
+  }
 
   /* ---------- 设置抽屉 ---------- */
   #settings {
@@ -450,7 +592,10 @@
   .row:last-of-type { border-bottom: none; }
   .row .label { font-size: 15px; }
   .row .hint { font-size: 12px; color: var(--muted); margin-top: 2px; }
-  .seg { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
+  /* flex-shrink: 0 不能省。它是弹性项，左边的说明文字一长就会被压缩；
+     而它自己带着 overflow: hidden，所以被压掉的那一段不是跑到屏幕外，是**被裁掉**——
+     2026-09-25 用户截图里那个「关」字就是这么没的。 */
+  .seg { display: flex; flex-shrink: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
   .seg button {
     padding: 7px 12px; border: none; background: var(--panel-2); color: var(--muted);
     font-size: 13px; cursor: pointer;
@@ -489,10 +634,49 @@
     transition: opacity .2s, transform .2s; z-index: 200; max-width: 86vw; text-align: center;
   }
   #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
+
+  /* ——— 回答电脑提问的卡片 ———
+     整屏遮住聊天区：手机上一次只专心答一题，答完自动消失。
+     之所以遮全屏而不是弹个小条：非技术用户看到"电脑在等你回答"时，
+     最怕的是不知道该点哪里；整屏只剩问题本身和按钮，没有第二个选择。 */
+  #askCard { position: fixed; inset: 0; z-index: 300; background: #0e1116;
+    display: none; flex-direction: column; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; }
+  #askCard.on { display: flex; }
+  #askCard .qhead { font-size: 13px; opacity: .6; margin-bottom: 12px; }
+  #askCard .qtext { font-size: 18px; line-height: 1.6; margin-bottom: 10px; }
+  #askCard .qdetail { font-size: 14px; line-height: 1.65; opacity: .75; margin-bottom: 16px; white-space: pre-wrap; }
+  #askCard .opt { display: block; width: 100%; text-align: left; margin: 0 0 10px; padding: 15px 16px;
+    font-size: 16px; line-height: 1.5; border-radius: 12px; border: 1px solid #2a3140;
+    background: #161b23; color: inherit; font-family: inherit; }
+  #askCard .opt.sel { border-color: #3b82f6; background: #17243a; }
+  #askCard .opt small { display: block; opacity: .7; font-size: 13px; margin-top: 5px; }
+  #askCard textarea { width: 100%; box-sizing: border-box; font-size: 16px; line-height: 1.6;
+    border-radius: 12px; border: 1px solid #2a3140; background: #161b23; color: inherit;
+    padding: 12px; font-family: inherit; resize: vertical; }
+  #askCard .qfoot { margin-top: auto; display: flex; gap: 10px; padding-top: 16px; }
+  #askCard .qfoot button { flex: 1; padding: 15px 8px; font-size: 16px; border-radius: 12px;
+    border: 1px solid #2a3140; background: #161b23; color: inherit; font-family: inherit; }
+  #askCard .qfoot button#askNext { background: #2563eb; border-color: #2563eb; color: #fff; }
 </style>
 </head>
 <body>
 
+<!-- 电脑提问时弹出来的答题卡片。默认隐藏，收到 question 事件才显示。 -->
+<div id="askCard">
+  <div class="qhead" id="askHead"></div>
+  <div class="qtext" id="askText"></div>
+  <div class="qdetail" id="askDetail"></div>
+  <div id="askOpts"></div>
+  <div id="askCustomWrap" style="display:none;margin-bottom:10px">
+    <textarea id="askCustom" rows="3" placeholder="用你自己的话回答……"></textarea>
+  </div>
+  <div class="qfoot">
+    <button id="askBack" type="button">上一题</button>
+    <button id="askOwn" type="button">我自己说</button>
+    <button id="askNext" type="button">下一题</button>
+  </div>
+</div>
+
 <header>
   <button class="icon-btn" id="btnNav" aria-label="工作区与会话">☰</button>
   <span class="dot" id="dot"></span>
@@ -501,6 +685,20 @@
   <button class="icon-btn" id="btnSettings" aria-label="设置">⚙</button>
 </header>
 
+<!-- 模型与思考强度（2026-09-25 用户要求：手机上要能改每个会话的模型和强度）。
+
+     现在两件事都在了：顶部那一行显示当前用的模型，**点它弹出面板可以改**。
+     面板里的强度只画当前模型自己声明的档位；模型不支持调强度时那一行不出现。
+
+     **整段是自包含的**：自己的 script 标签、自己的请求、自己的元素，不碰页面现有的
+     任何代码。唯一的对外依赖是 /mini/api/models 那条接口（已经验过真数据）。
+     这样即使这段整个坏掉，也不会影响已经能用的部分。
+
+     没拿到数据之前整条藏着——**宁可什么都不显示，也不显示一个占位的假值**。 -->
+<div id="modelBar" style="display:none;align-items:center;gap:8px;padding:6px 12px;font-size:12px;color:var(--dim,#888);border-bottom:1px solid var(--line,#e5e5e5)">
+  <span id="modelBarText"></span>
+</div>
+
 <main id="main">
   <div id="reply"></div>
   <!-- 「正在执行」是常驻元素，不参与 #reply 的整块重绘。
@@ -529,6 +727,11 @@
 </main>
 
 <div class="attach-bar" id="attachBar" hidden></div>
+
+<!-- 在输入框里打 / 时弹出来的指令列表。和附件小条一样排在底栏**上面**：
+     盖住输入框的话，用户就看不清自己正在打什么了。 -->
+<div class="cmd-menu" id="cmdMenu" hidden></div>
+
 <footer>
   <!-- 回形针。input 藏起来，按钮点它——iOS 上直接放一个 file input 样式很难统一。 -->
   <button class="attach" id="btnAttach" type="button" aria-label="上传文件" title="上传文件">
@@ -565,6 +768,18 @@
       </div>
     </div>
 
+    <!-- 权限档位。整块由脚本填：这台电脑有哪些档位是**运行时读**的，一个都不写死。
+         服务拿不到时整块不显示——它是附加能力，缺了遥控本身照常。 -->
+    <div id="permBlock" hidden>
+      <div class="row">
+        <div>
+          <div class="label">权限档位</div>
+          <div class="hint" id="permHint">作用在当前会话上</div>
+        </div>
+      </div>
+      <div class="seg" id="segPerm"></div>
+    </div>
+
     <!--
       这里原来有两行：「完成后提醒」和「语音输入」。
 
@@ -589,6 +804,38 @@
       </div>
     </div>
 
+    <!--
+      「页面在后台时提醒」。**现在不露出来了，藏到底。**
+
+      2026-09-21 它整行被撤掉过，理由是当时三条连接路径全是明文 http，浏览器不给发
+      系统通知，摆出来只是让用户点一下碰一鼻子灰。
+
+      2026-09-25 白天 Tailscale 那条路接通 HTTPS，它回来过一次；**当晚又撤了**。
+      第二次撤的理由和第一次不同，也更硬：**手机锁屏会冻结后台页面**，那条实时连接
+      跟着断掉，回复根本到不了页面，也就没人去发通知。这不是"前提没到"，是浏览器这条
+      路本来就有上限——service worker 也救不了，它是被事件唤醒的，没有事件它就不存在。
+
+      用户原话：「类似功能我们以后考虑做成 APP 时再加，浏览器里不放了。」
+
+      **代码全部留着，只是不露出来**（见下面 serviceWorker.register 那段的注释）。
+      将来做 App 里的锁屏提醒，这些知识直接能用。真正不怕锁屏的是电脑端那条外部推送
+      （Bark/ntfy/Telegram，lib/notify.js），从服务器直接发出去，不经过浏览器。
+
+      为什么非要有 service worker：手机浏览器上 new Notification() 会直接抛 TypeError，
+      唯一能发系统通知的入口是 ServiceWorkerRegistration.showNotification()。
+      详见 lib/sw.js。
+    -->
+    <div class="row" id="rowNotify" style="display:none">
+      <div>
+        <div class="label">页面在后台时提醒</div>
+        <div class="hint" id="notifyHint">回复到了发一条系统通知</div>
+      </div>
+      <div class="seg" id="segNotify">
+        <button data-notify="on">开</button>
+        <button data-notify="off">关</button>
+      </div>
+    </div>
+
     <div class="row">
       <div>
         <div class="label">连接</div>
@@ -634,6 +881,9 @@
     token: params.get('token') || localStorage.getItem('dshMiniToken') || '',
     mode: localStorage.getItem('dshMiniMode') || DEFAULT_MODE || 'minimal',
     sound: localStorage.getItem('dshMiniSound') !== 'off',
+    // 锁屏也能提醒（系统通知）。默认关着——它要用户主动点一下才会申请权限，
+    // 不能替他决定。明文连接下这一项永远是空转的，见下面「锁屏也能提醒」那一段。
+    notify: localStorage.getItem('dshMiniNotify') === 'on',
     running: false,
     sessions: [],
     // 排队中的指令（[{ id, text, placement }]）。跑着任务时接着发的那几条排在这儿，
@@ -646,7 +896,28 @@
     // 只存服务端发回来的那张小票，不存附件本身——真正的东西已经在电脑上了。
     uploads: [],
     // 正在流出来的那一段。空字符串 = 这会儿没有东西要显示。
-    live: ''
+    live: '',
+    /**
+     * 模型此刻的自言自语（鲸鱼娘的台词）：{ text, at } 或 null。
+     *
+     * **和 live 严格分开**：live 非空时整块 #work 会让位（那是「回答正在往外冒」的
+     * 规矩），台词要是塞进 live，会出现「该说话的时候鲸鱼娘不见了」。
+     * 它也不进 #reply——2026-09-22 用户否掉的就是「过程的文字跑进回答区」。
+     */
+    thought: null,
+    // 服务端正去读这个会话的完整记录（点开一个插件没看过的会话时会有这一下）。
+    historyLoading: false,
+    // 「这份历史只到最近一段」（服务端读历史有上限时会给这一句）。
+    historyTruncated: false,
+    historyNote: '',
+    // 斜杠指令的列表（在输入框里打 / 时弹出来的那个菜单）。
+    // **按绑定的会话缓存**：指令表是每个会话一份的，而这个会话没在跑时服务端一条都
+    // 读不到（回 ok:false + 一句话）。所以换了会话必须重取——否则用户点到的是上一个
+    // 会话的指令，点下去必然被拒，而他从屏幕上完全看不出为什么。
+    commands: null,        // null = 还没取到
+    commandsError: '',     // 取不到时服务端给的那句话，原样显示给用户
+    commandsFor: null,     // 上面这份数据是哪个会话的
+    commandsLoading: false // 正在取（挡住重复请求，见 loadCommands）
   };
   if (params.get('token')) {
     localStorage.setItem('dshMiniToken', params.get('token'));
@@ -880,7 +1151,13 @@
     opts.headers = Object.assign(authHeaders(!raw), opts.headers || {});
     return fetch(path, opts).then(function (r) {
       return r.json().catch(function () { return {}; }).then(function (body) {
-        if (!r.ok) throw new Error(body.error || ('HTTP ' + r.status));
+        if (!r.ok) {
+          var err = new Error(body.error || ('HTTP ' + r.status));
+          // 状态码挂在错上带出去：调用方要区分「服务端说这题已经结束了」（409）和
+          // 「压根没连上」（fetch 直接抛）——靠中文字面去猜太脆。
+          err.status = r.status;
+          throw err;
+        }
         return body;
       });
     });
@@ -977,10 +1254,50 @@
   var GAP_MS = 3600;
   var SLOW_MS = 60000;
 
+  /**
+   * 说话那张立绘。**它不进 POSES。**
+   *
+   * POSES 是轮播的节目单，进去就要占一格（还要连带改 posePool 那套按位置认「还在忙」
+   * 的写法）。这张是**按需插播**的：只在宿主侧推来台词时出现，说完就回原来的顺序。
+   * 文件名里的 9 同样只是个名字，跟顺序无关。
+   */
+  var SPEAK_POSE = { file: 'work-9-talking', flip: 1.1 };
+  /**
+   * 一句台词占多久：**按字数算**，短的有起步时长，长的封顶。
+   *
+   * 用户 2026-09-26 选的是「一直说到它结束（最多 10 秒）」；2026-09-27 他觉得太短，
+   * 问能不能再久一点。原来是一律 10 秒——短句够用，可长句在 2026-09-27 起会**完整显示**
+   * （不再截断），一句 200 字的话念 10 秒根本念不完，她就已经回去干别的了。
+   *
+   * 所以：起步 15 秒，每多一个字多留 0.15 秒（≈ 一分钟 400 字，手机上舒服的默读速度），
+   * 30 秒封顶——封顶是为了防「某一轮她再没说话、画面却一直卡在说话那张」。
+   * 宿主侧只拿得到**整段**（一步一步来的，不是逐字），所以「结束」得自己收尾：
+   * 下一句台词来了就把表往后推，一直没有新的或这一轮结束了，就到点放回轮播。
+   */
+  var SPEAK_MIN_MS = 15000;
+  var SPEAK_PER_CHAR_MS = 150;
+  var SPEAK_MAX_MS = 30000;
+
+  /** 这句话该占多久（见上面三条）。 */
+  function speakDuration(text) {
+    var n = String(text || '').length;
+    return Math.min(SPEAK_MAX_MS, Math.max(SPEAK_MIN_MS, n * SPEAK_PER_CHAR_MS));
+  }
+
   var reducedMotion = false;
   try { reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches; } catch (e) {}
 
-  var work = { startedAt: 0, pose: 0, poseTimer: null, tickTimer: null, layers: [] };
+  var work = {
+    startedAt: 0, pose: 0, poseTimer: null, tickTimer: null, layers: [],
+    // 说话那张立绘单独一层（不在 POSES 里，见 SPEAK_POSE）。
+    speakLayer: null,
+    // 正在说的那句台词，以及它最晚说到什么时候。
+    speakText: '',
+    speakUntil: 0,
+    // 已经念过的那句话的身份（宿主侧的 at）。快照来得很密，不认这个的话
+    // 同一句话会被反复「重新开始说」，动画一直从头播。
+    speakAt: null,
+  };
 
   /** 现在该用哪几条姿态：跑够一分钟才把「还在忙」放进来。 */
   function posePool() {
@@ -1019,16 +1336,65 @@
       + '&v=' + encodeURIComponent(BUILD);
   }
 
+  /**
+   * 把一句话写进气泡。
+   *
+   * 走的是和回答区同一个行内渲染（`mdInline`，见上面那段 Markdown 渲染）。它的顺序是
+   * **先转义、再上标签**：模型原话里的尖括号仍然只是字面上的尖括号，不会被当成标签；
+   * 只有它自己写的 `**粗体**`、`` `代码` ``、链接才会变成样式。留一个口子给"以后不加"。
+   *
+   * 之前这里是 `textContent`（一句纯文本），于是 `**重启把连接掐断**` 连星号一起端到了
+   * 用户面前（2026-09-27 用户报的）。词条那几种是我们自己写的、不含 markdown，也一起走
+   * 这个入口——两条路各写各的，早晚会分叉。
+   */
+  function paintBubble(line) {
+    var text = line || '';
+    $('workBubble').hidden = !text;
+    $('workBubble').innerHTML = mdInline(text);
+  }
+
   function paintPose(index) {
     for (var i = 0; i < work.layers.length; i += 1) {
       work.layers[i].classList.toggle('on', i === index);
     }
+    // 轮播回来时把说话那张收掉——它在 POSES 之外，不归上面那个循环管。
+    if (work.speakLayer) work.speakLayer.classList.toggle('on', false);
     // 有的姿势不带词条（比如那张冲刺）：词条是空串就把整个气泡收起来。
     // 留一个空泡泡在那儿比不放气泡更怪——那个尖角还指着她的头，像话没说出来。
     // 收起气泡不会让立绘挪位：.work-top 有 min-width 兜着，行宽不变。
-    var line = POSES[index].line || '';
-    $('workBubble').hidden = !line;
-    $('workBubble').textContent = line;
+    paintBubble(POSES[index].line);
+  }
+
+  /**
+   * 换成说话那张，把台词写进气泡。
+   *
+   * 台词是**模型的原话**（宿主机只从旁白里取，模型自己想的那些不上手机），
+   * 所以这里只做一件事：原样写出来，不加不减——渲染的那一步交给 `paintBubble`。
+   */
+  function paintSpeak(text) {
+    paintBubble(text);
+    // 说话那张没加载出来时（预热那次报错翻过这个开关）：台词照说，**但不动图层**——
+    // 把正常那几张全关掉、换上一张空的，她会当场从屏幕上消失（2026-09-27 立的闸）。
+    if (work.speakReady === false) return;
+    for (var i = 0; i < work.layers.length; i += 1) work.layers[i].classList.toggle('on', false);
+    if (work.speakLayer) work.speakLayer.classList.toggle('on', true);
+  }
+
+  /**
+   * 宿主侧送来的新台词要不要现在就说。
+   *
+   * 判据是 at（那句话的身份）：**同一句只说一次**。快照广播来得很密，每来一条就重说
+   * 一遍的话，说话这张立绘会一直从头播，看着像卡住不动。
+   */
+  function maybeSpeak() {
+    var t = state.thought;
+    if (!t || !t.text) return;
+    if (t.at === work.speakAt) return;
+    work.speakAt = t.at;
+    work.speakText = t.text;
+    // 每来一句新的就从这一刻重新算：时长按这句话有多长来（见 speakDuration）。
+    work.speakUntil = Date.now() + speakDuration(t.text);
+    paintSpeak(t.text);
   }
 
   function elapsedLabel(ms) {
@@ -1058,6 +1424,19 @@
       var warm = document.createElement('img');
       warm.src = artUrl(POSES[i].file);
     }
+    // 说话那张一起建好、一起预热：等台词来了再新建图层，会说第一个字之前先闪一下空白。
+    var speak = document.createElement('div');
+    speak.className = 'pose';
+    speak.style.backgroundImage = 'url("' + artUrl(SPEAK_POSE.file) + '")';
+    speak.style.animationDuration = SPEAK_POSE.flip + 's';
+    stage.appendChild(speak);
+    work.speakLayer = speak;
+    var warmSpeak = document.createElement('img');
+    // 说话那张要是加载不出来（图还没画好、或者网络半路断了）：**别把舞台清空**。
+    // 默认按「图在」处理，只有真报错才翻成 false——正常路径一个字都不变；
+    // 翻成 false 之后就退成「台词照说、人照轮播」，而不是她整个消失（见 paintSpeak）。
+    warmSpeak.onerror = function () { work.speakReady = false; };
+    warmSpeak.src = artUrl(SPEAK_POSE.file);
     paintPose(0);
   }
 
@@ -1069,6 +1448,20 @@
    * 停止时 stopWork 会把待排的那一次清掉，不会漏跑。
    */
   function nextPose() {
+    // 正在说话：这一格让给她，轮播停在这儿等（work.pose 不动，所以恢复时接着的那一格
+    // 就是被打断的那一格，而不是从头来）。到点或来了新台词都由 maybeSpeak 管。
+    if (work.speakUntil) {
+      var left = work.speakUntil - Date.now();
+      if (left > 0) {
+        paintSpeak(work.speakText);
+        // 睡到「该收尾的那一刻」为止，不多不少：按 3.6 秒一格睡的话，
+        // 这个上限会被拖到整格之后，最后那句台词要多挂将近一秒。
+        work.poseTimer = setTimeout(nextPose, Math.min(POSE_MS, left));
+        return;
+      }
+      work.speakUntil = 0;
+      work.speakText = '';
+    }
     var seq = poseSequence();
     work.pose = (work.pose + 1) % seq.length;
     var index = seq[work.pose];
@@ -1093,6 +1486,11 @@
 
   function stopWork() {
     work.startedAt = 0;
+    // 说话状态跟着收掉：这一轮的话已经说完了，下一轮不该接着上一句。
+    // **但 speakAt 留着**——那是对「哪句话已经念过」的记忆，清掉的话，万一宿主侧
+    // 还留着上一轮的台词（广播没到），新一轮一开场它就会被当成新话说一遍。
+    work.speakUntil = 0;
+    work.speakText = '';
     // 轮播现在是自己排下一次的 setTimeout（见 nextPose），用 clearInterval 清
     // setTimeout 在浏览器里也行，但写 clearTimeout 更不容易让人误会。
     if (work.poseTimer) { clearTimeout(work.poseTimer); work.poseTimer = null; }
@@ -1138,6 +1536,30 @@
 
   $('btnStop').addEventListener('click', requestStop);
 
+  /**
+   * 把手机上答的题交回电脑，回一句实话。
+   *
+   * 回的是三种结果，不是一个「成没成」——因为两种失败要说不同的话：
+   *   'ok'      电脑收下了；
+   *   'late'    这题已经交回电脑了（插件回 409），得让用户去电脑上答；
+   *   'failed'  压根没发出去（连不上），卡片留着，手一按还能再试。
+   *
+   * 原来那一段是按下就先把卡片收掉、发失败也咽着不说（当时的理由是「电脑那边等不到
+   * 会自己还给浏览器」）。可电脑那边还在等着，手机上却静悄悄——用户看到的只有
+   * 「我点了，没反应」（2026-09-27 用户报的正是这一幕）。所以这里只做一件事：
+   * 把实情如实报出来，怎么显示由上面那张卡片决定。
+   */
+  function sendAnswer(id, answers) {
+    return api('/mini/api/answer', {
+      method: 'POST',
+      body: JSON.stringify({ id: id, answers: answers }),
+    })
+      .then(function () { return 'ok'; })
+      .catch(function (err) {
+        return err && err.status === 409 ? 'late' : 'failed';
+      });
+  }
+
   // ---------------- 排队中的指令 ----------------
   //
   // 跑着任务时接着发的那几条不会丢，而是排进 agent 的收件箱（`followup()` 的语义
@@ -1196,7 +1618,12 @@
     // （比如正在调工具）时，鲸鱼娘还是要留着，那是它唯一该出现的时候。
     var busy = (state.running || queued > 0) && !state.live;
     el.hidden = !busy;
-    if (busy) startWork(); else stopWork();
+    if (busy) {
+      startWork();
+      // 台词每次随快照重算一遍。**必须放在 startWork 之后**：startWork 会先画第 0 张，
+      // 反过来的话它会把这句台词盖掉，用户看到的是「收到，这就去办」而不是她的自说自话。
+      maybeSpeak();
+    } else stopWork();
     paintQueue();
   }
 
@@ -1224,6 +1651,24 @@
     paintWork();
   }
 
+  /**
+   * 单帧模式：「这一条回答」有没有已经带用户滚过顶了。
+   *
+   * **用 timestamp 当身份**，因为它是这里唯一稳定、且只在真推了一条新回答时才变的字段
+   * （`pushReply` 每次都现取 `Date.now()`；重连、SSE 重推、切模式、从后台回来
+   * 都只是把同一条回答重新渲染一遍，timestamp 不变）。
+   *
+   * 用户 2026-09-23 提的：「手机端的单帧模式，回答出现的时候，页面应该跳到顶部，
+   * 方便用户阅读。」不记这个的话：一条长结论渲染出来，用户看到的是最后一行，
+   * 得自己往上翻才读得到开头。
+   *
+   * 记成「已经为哪一条滚过顶」而不是一个「刚跳过」的布尔量，是为了不误伤上面那几种
+   * 重新渲染——那些时候用户可能正读到一半，把他弹回顶部比不跳还烦人。
+   * 初始值 0：开机第一次渲染时任何一条回答的 timestamp 都比它大，于是会跳一次，
+   * 正好是「打开页面从最新那条的开头读起」。
+   */
+  var scrolledReplyAt = 0;
+
   function renderMinimal() {
     mainEl.classList.remove('center');
     var latest = state.latest;
@@ -1245,6 +1690,10 @@
         + ' data-copy="' + escapeHtml(latest.text) + '">' + ICON_COPY + '</button>'
         + '</div>');
     }
+    // 刚跑完的那条指令也要露出来（判据和为什么见 commandTail）。
+    // 「正在执行」那块照旧：它是常驻的 #work，跟这里没关系。
+    var tail = commandTail();
+    if (tail) parts.push(commandBlock(tail));
     if (live) parts.push(liveBlock(live));
     if (parts.length) {
       var stick = atBottom();
@@ -1252,12 +1701,33 @@
       // 流式的时候得跟着往下滚，不然新写出来的内容在屏幕外面，看起来像卡住了。
       // 但只在用户本来就在底部时才跟——他翻上去看历史的时候别拽他回来。
       if (live && stick) mainEl.scrollTop = mainEl.scrollHeight;
+      // 单帧模式专属：**答案落定的那一刻**跳到顶部，让人从第一行开始读。
+      //
+      // 判据是 timestamp 变了，不是「渲染了一次」——重连、SSE 重推、切模式、
+      // 从后台回来都会重新渲染同一条回答，那些时候用户可能正读到一半，
+      // 弹回顶部比不跳还烦人（见 scrolledReplyAt 的说明）。
+      //
+      // 和上面那条黏底不冲突，两者管的是不同时刻：流式那会儿（live 还在）
+      // 答案没落定，该跟着往下走；落定之后才轮到这一条把它拉回开头。
+      // 也别跟下面 send() 里那条「按了发送无条件回底部」搞混——那是用户自己的
+      // 主动动作，他想看自己刚发出去的那条；这条是回答到了，他要读回答。
+      if (latest && latest.timestamp && latest.timestamp !== scrolledReplyAt) {
+        scrolledReplyAt = latest.timestamp;
+        mainEl.scrollTop = 0;
+      }
       return;
     }
     if (state.running) {
       replyEl.innerHTML = '';
       return;
     }
+    // 正在去读这个会话的记录：这时候说「在下面输入一条指令」是不对的——
+    // 这个会话其实有历史，只是还没读完。单帧模式只显示最后一条回复，
+    // 那一条也在这份记录里。
+    if (state.historyLoading) {
+      replyEl.innerHTML = '<div class="placeholder">正在读取这个会话的记录…</div>';
+      return;
+    }
     replyEl.innerHTML = '<div class="placeholder">在下面输入一条指令，'
       + '这里只会显示 AI 的最终回复。<br>中间的工具调用和执行过程不会传过来。</div>';
   }
@@ -1279,6 +1749,58 @@
     return '<div class="live"><div class="md">' + mdToHtml(text) + '</div></div>';
   }
 
+  /**
+   * 历史里的一条指令（`role:'command'`）：这个会话执行了 /xxx，跑到哪一步了。
+   *
+   * 为什么单独一种长相：它既不是用户说的话，也不是 AI 说的话，而是**会话做的一个
+   * 动作**。套上气泡就成了一句人说的话，会被当成回答去读；给它复制按钮也没有意义
+   * （「/compact 执行中…」没有拿走的必要）。所以收成一行紧凑的条目：名字用等宽字体，
+   * 后面直接跟结果。
+   *
+   * 三种状态里只有 running 是「还不知道结果」：服务端在这一条上**不报进度**，
+   * 所以只能说「执行中…」——编一个百分比就是撒谎。
+   *
+   * 这两个函数夹在 liveBlock 和 renderChat 中间是有原因的，**别挪**：page.test.mjs
+   * 是按源码里的锚点串切片的——聊天模式那一套从 liveBlock 那一段切到 render 那一段，
+   * 单帧模式那一套从 scrolledReplyAt 那一段切到 renderChat 那一段，两把刀的交集就是
+   * 这里。放到交集外面，总有一套测试一跑就 ReferenceError。
+   * （顺带一句：这段注释里**不能**写出那几个锚点串的完整样子，否则 indexOf 会先命中
+   *   注释、把切片截断，报出来的是「SyntaxError」而不是人话。）
+   */
+  function commandBlock(m) {
+    // args 是名字后面**原样**的输入（含分隔空格），可能为空串——所以直接拼，
+    // 不自己补一个空格：补了就把「用户到底敲了什么」改样了。
+    var line = '/' + (m.name || '') + (m.args || '');
+    var kind = m.kind === 'error' ? 'error' : (m.kind === 'success' ? 'success' : 'running');
+    var res = kind === 'error' ? (m.text || '没跑起来')
+      : (kind === 'success' ? (m.text || '完成') : '执行中…');
+    return '<div class="cmd ' + kind + '">'
+      + '<span class="cmd-line">' + escapeHtml(line) + '</span>'
+      + '<span class="cmd-res">' + escapeHtml(res) + '</span></div>';
+  }
+
+  /**
+   * 单帧模式要跟着显示的那条指令：**历史里最后一条**，而且得真的是一条指令。
+   *
+   * 为什么要单独处理：单帧模式整屏只留最新一条回复，而指令**不产生回复**——用户点一下
+   * /compact，这里要是什么都不画，屏幕上就是一动不动，看着像点了个没反应的按钮。
+   *
+   * 用「最后一条」而不是「最近一条指令」：中间要是夹了别的消息（指令跑完模型又答了
+   * 一句），那条指令已经不是最新的事了，再把它贴在最下面就成了过期通知。
+   *
+   * 最后还有一道时间判断，别删。单帧模式的回答是走 SSE 的 reply 那条路来的，它
+   * **不往 history 里塞东西**（只有聊天模式才塞），所以 history 的尾巴会一直停在那条
+   * 指令上。不加这一道，新回答到了之后底下还挂着一条「执行中…」，看着像它卡住了。
+   */
+  function commandTail() {
+    var h = state.history || [];
+    var last = h.length ? h[h.length - 1] : null;
+    if (!last || last.role !== 'command') return null;
+    var lt = (state.latest && state.latest.timestamp) || 0;
+    if (lt && last.timestamp && last.timestamp < lt) return null;
+    return last;
+  }
+
   /**
    * 该不该自动滚到底。
    *
@@ -1298,6 +1820,22 @@
     return mainEl.scrollHeight - mainEl.scrollTop - (mainEl.clientHeight || 0) < 48;
   }
 
+  /**
+   * 把某一块的**开头**对齐到视野顶部（聊天模式用，见 renderChat）。
+   *
+   * 用两个矩形的差值算，不用 `offsetTop`：`main` 上没有 `position: relative`，
+   * `offsetTop` 会一路找到 body 去，算出来是错的。矩形差值不管定位上下文怎么变都对。
+   *
+   * 留 12px 空隙：`main` 自己带 16px 内边距，滚下去之后那段内边距就滚没了，
+   * 不留缝的话回答的第一行会顶在屏幕最上沿，看着像被切掉了。
+   */
+  function pinToTop(el) {
+    if (!el || typeof el.getBoundingClientRect !== 'function') return;
+    if (typeof mainEl.getBoundingClientRect !== 'function') return;
+    var gap = el.getBoundingClientRect().top - mainEl.getBoundingClientRect().top;
+    mainEl.scrollTop += gap - 12;
+  }
+
   function renderChat() {
     mainEl.classList.remove('center');
     // **还在排队的那条不算「已发出」，这里要把它从聊天记录里滤掉。**
@@ -1318,10 +1856,18 @@
       return !(m.role === 'user' && m.id && queuedIds[m.id]);
     });
     if (!list.length && !state.running && !state.live && !(state.queued || []).length) {
-      replyEl.innerHTML = '<div class="placeholder">还没有对话记录。</div>';
+      // 「正在读」和「确实没有」是两件事，分开说。点开一个插件没看过的会话时，
+      // 服务端要去 DSH 的会话记录里读它那一段（最大的那条 20 MB、约半秒），
+      // 这期间说「还没有对话记录」会让人以为这个会话本来就是空的。
+      replyEl.innerHTML = state.historyLoading
+        ? '<div class="placeholder">正在读取这个会话的记录…</div>'
+        : '<div class="placeholder">还没有对话记录。</div>';
       return;
     }
     var html = list.map(function (m) {
+      // 指令行：这是会话做的一个动作，不是谁说的话，单独一种长相——
+      // 不套气泡、不给复制按钮（见 commandBlock 的说明）。
+      if (m.role === 'command') return commandBlock(m);
       // 被按停的那一轮：标一句，别让人以为模型答到一半断了。
       var stopped = m.interrupted ? '<span class="stopped">已停止</span>' : '';
       // 两种消息都给复制按钮。自己敲的指令也常有「再发一遍」「拿去别处用」的时候，
@@ -1342,13 +1888,86 @@
         + '<div class="reply-foot">' + copyBtn
         + '<span class="time">' + timeLabel(m.timestamp) + '</span></div></div>';
     }).join('');
+    // 「这不是全部」要说在**内容前面**：用户往上翻到顶时，第一眼看到的就是它，
+    // 免得以为这个会话只有这么点内容。读历史有上限（见服务端 HISTORY_MAX_*）。
+    if (state.historyTruncated) {
+      html = '<div class="history-note">'
+        + escapeHtml(state.historyNote || '这个会话很大，只显示了最近一段。')
+        + '</div>' + html;
+    }
     // 「正在执行」不再追加一个气泡——它是常驻的 #work，排在整串消息下面。
     // 两种模式共用同一块，改的时候两边都走一遍。
     if (state.live) html += liveBlock(state.live);
     // 先问「在不在底部」，再改内容——顺序反了永远是「在」（见 atBottom 的注释）。
     var stick = atBottom();
     replyEl.innerHTML = html;
-    if (stick) mainEl.scrollTop = mainEl.scrollHeight;
+    scrollChat(stick);
+  }
+
+  /**
+   * 聊天模式里「已经为哪一次回答把开头对齐到顶部」。
+   *
+   * 取值是 `'live'`（正在流的那一段）或 `'done:<timestamp>'`（落定的那条）。
+   * 记这个是为了**每条回答只对齐一次**——不记的话，用户往下读的时候每次重画
+   * 都会把他拽回开头，比不对齐还烦人。
+   *
+   * 声明放在这里而不是跟 scrolledReplyAt 作伴：page.test.mjs 是从 `liveBlock`
+   * 切到 `render()` 来跑聊天模式的，放前面就切不进来，一跑就是 ReferenceError。
+   */
+  var pinnedAnswerKey = '';
+
+  /**
+   * 聊天模式的滚动：**回答的开头才是要读的地方，不是末尾。**
+   *
+   * 用户 2026-09-24 提的：「聊天模式下，回答出现时，页面也应该停留在回答的开头
+   * 而非末尾，这样用户不用往上滚到开头」。
+   *
+   * 和单帧模式那条的区别：单帧只有一条回答，所以它对齐的是 0（页面顶端）；
+   * 聊天模式有一串历史，要对齐的是**最新那条回答自己的开头**。
+   *
+   * 回答分两个阶段，各对齐一次（记号记在 pinnedAnswerKey 里）：
+   *
+   *   · **正在流**（live 非空）——对齐 `.live` 的开头，之后**不再跟底部**。
+   *     这是关键的一条：流式每秒重画好几次，要是继续黏底，用户刚滚到开头
+   *     就被拽回末尾，等于没改。
+   *
+   *   · **落定**（timestamp 变了）——对齐最后那条 `.said` 的开头，
+   *     让最终版从第一行开始读。
+   *
+   * 为什么要记 key、而不是「每次都对齐」：用户往下读的时候，每次重画都把他拽回
+   * 开头，比不对齐还烦人。这一点和单帧模式里 scrolledReplyAt 的道理是一样的。
+   */
+  function scrollChat(stick) {
+    var liveNow = state.live || '';
+    var newest = liveNow
+      ? 'live'
+      : (state.latest && state.latest.timestamp ? 'done:' + state.latest.timestamp : '');
+    if (newest && newest !== pinnedAnswerKey) {
+      // 先记账，再决定动不动他。记完就不再重复处理这条回答——
+      // 用户往下读的时候被反复拉回开头，比不对齐还烦人。
+      pinnedAnswerKey = newest;
+      // **只在「他本来就在底部跟着看」的时候才动他。**
+      //
+      // 这一条不能省：用户 2026-09-22 实机提过「有动画的时候手机端页面运动到上面
+      // 都会自动调回底部，这种机制没必要吧」。他要是自己翻上去看历史了，
+      // 我们把他拽到回答开头，和当初拽回底部是同一类冒犯。
+      //
+      // 注意 stick 是**改 innerHTML 之前**问的（见 atBottom 的注释），
+      // 所以它答的是「他刚才在不在底部」，正是这里要问的。
+      if (!stick) return;
+      var target = null;
+      if (liveNow) {
+        target = replyEl.querySelector ? replyEl.querySelector('.live') : null;
+      } else if (replyEl.querySelectorAll) {
+        var saids = replyEl.querySelectorAll('.said');
+        target = saids.length ? saids[saids.length - 1] : null;
+      }
+      pinToTop(target);
+      return;
+    }
+    // 没有新回答的时候照旧黏底（历史重排、切会话、用户自己发指令这些），
+    // 但**流式期间不跟**——那正是要停在开头的时候。
+    if (stick && !liveNow) mainEl.scrollTop = mainEl.scrollHeight;
   }
 
   function render() {
@@ -1361,10 +1980,26 @@
     // 正在流出来的那一段。服务端只在自己决定要显示之后才写它，所以这里是空字符串
     // 不代表模型没在写，只代表「还不到显示的时候」。
     if ('live' in snap) state.live = snap.live || '';
+    // 模型此刻的自言自语（鲸鱼娘的台词）。null = 这会儿没话说，气泡回到该姿势自己的词条。
+    if ('thought' in snap) state.thought = snap.thought || null;
     if (snap.history) state.history = snap.history;
+    // 「服务端正去读这个会话的完整记录」。点开一个没看过的会话时，那一串要读一会儿
+    // 才补上来（最大的那条日志 20 MB、约半秒），这期间不能装作「这个会话是空的」。
+    state.historyLoading = snap.historyLoading === true;
+    // 「这份历史只到最近一段」。服务端读历史有上限（会话太大只读日志尾部），
+    // 所以内容可能是截断的——**这件事必须跟着内容一起传上来**，不能只在服务端知道。
+    state.historyTruncated = snap.historyTruncated === true;
+    state.historyNote = snap.historyNote || '';
     if (snap.sessions) state.sessions = snap.sessions;
     if (Array.isArray(snap.queued)) state.queued = snap.queued;
-    if ('boundSessionId' in snap) state.boundSessionId = snap.boundSessionId;
+    if ('boundSessionId' in snap) {
+      var wasBound = state.boundSessionId;
+      state.boundSessionId = snap.boundSessionId;
+      // 换了会话，指令菜单那份缓存就作废了（指令表是每个会话一份的，这个会话没在跑
+      // 时一条都读不到，见「斜杠指令」那一段）。重画一次，它自己会发现数据不属于
+      // 这个会话、去重取——否则用户点到的是上一个会话的指令，点下去必然被拒。
+      if (state.boundSessionId !== wasBound) paintCmdMenu();
+    }
     // running 也在快照里，而且算的是**当前绑定的那个会话**。不接的话，
     // 在导航栏切到别的会话时，那个会话会继承上一个会话的「正在执行」。
     if ('running' in snap) setRunning(snap.running);
@@ -1411,20 +2046,27 @@
   }
 
   function renderNav() {
+    // 目录浏览那一屏接管整个面板。它自己画返回按钮，所以不走下面这套。
+    if (navView === 'browse') { renderBrowse(); return; }
     var list = navList || [];
+    // 「新建工作区」常驻在最上面：它是这一屏的入口，不该等有了会话才出现——
+    // 一个工作区都还没有的人，恰恰最需要它。
+    var cta = '<button class="nav-cta" type="button" data-new-ws="1">＋ 新建工作区</button>';
     if (!list.length) {
-      $('navBody').innerHTML = '<div class="placeholder">电脑上还没有可以切换的会话。<br>'
+      $('navBody').innerHTML = cta + '<div class="placeholder">电脑上还没有可以切换的会话。<br>'
         + '在电脑上开一个，这里就会出现了。</div>';
       return;
     }
-    $('navBody').innerHTML = list.map(function (ws) {
+    $('navBody').innerHTML = cta + list.map(function (ws) {
       var open = Boolean(navExpanded[ws.id]);
       return '<div class="ws' + (open ? ' open' : '') + '" data-ws="' + escapeHtml(ws.id) + '">'
         + '<button class="ws-head" type="button">'
         + '<span class="caret">▶</span>'
         + '<span class="ws-title">' + escapeHtml(ws.title) + '</span>'
         + (ws.running ? '<span class="s-dot"></span>' : '')
-        + '<span class="ws-count">' + ws.count + '</span>'
+        // 空工作区（通常是刚在手机上建的那个）不写「0」，写「还没有会话」：
+        // 一个孤零零的 0 看着像出了错，说清楚反而让人知道下一步该干什么。
+        + '<span class="ws-count">' + (ws.count || (ws.empty ? '新' : 0)) + '</span>'
         + '</button>'
         + '<div class="ws-body">' + (open ? sessionsHtml(ws.id) : '') + '</div>'
         + '</div>';
@@ -1432,11 +2074,15 @@
   }
 
   function sessionsHtml(wsId) {
+    // 「新建会话」永远排在最上面：不管这个工作区有几个会话、甚至一个都没有，
+    // 这一行都在。放在列表末尾的话，一个 452 条会话的工作区要划到底才看得到。
+    var html = '<button class="ws-new" type="button" data-newws="' + escapeHtml(wsId) + '">'
+      + '＋ 新建会话</button>';
     var got = navSessions[wsId];
-    if (!got) return '<div class="placeholder">正在读取…</div>';
-    if (!got.sessions.length) return '<div class="placeholder">这个工作区还没有会话。</div>';
+    if (!got) return html + '<div class="placeholder">正在读取…</div>';
+    if (!got.sessions.length) return html + '<div class="placeholder">这个工作区还没有会话。</div>';
     var cur = state.boundSessionId;
-    var html = got.sessions.map(function (s) {
+    html += got.sessions.map(function (s) {
       // 没有标题就用日期——原来退到取 id 的前 8 位当名字，而本机真有一个会话的 id
       // 以「session-」开头，于是整列都显示成一样的「session-」，等于没有名字。
       return '<button class="sess' + (s.id === cur ? ' cur' : '') + '" type="button"'
@@ -1453,6 +2099,200 @@
     return html;
   }
 
+  // ---------------- 新建工作区：浏览电脑目录 ----------------
+  //
+  // 面板里有两个「屏」：工作区树（默认）和目录浏览。用一个变量记当前在哪一屏，
+  // 而不是再开一层浮层——手机屏幕就这么大，多一层就多一次「怎么退回去」。
+  //
+  // 起点给「常用位置」（主目录 / 最近用过 / 磁盘），不是直接甩盘符：
+  // 从 C:\ 一层层点进去找一个项目文件夹，是要人自己知道路径长什么样。
+  var navView = 'tree';
+  var browseRoots = null;   // 常用位置，开一次取一次
+  var browseAt = null;      // 当前所在目录；null = 还在看常用位置
+  var browseData = null;    // 当前目录的列表
+  var browseMkdir = false;  // 是不是正在新建文件夹（那一行输入框露出来没有）
+  var browseBusy = false;   // 防连点
+
+  function dirName(p) {
+    var parts = String(p).split(/[\\/]/).filter(Boolean);
+    return parts.length ? parts[parts.length - 1] : String(p);
+  }
+
+  function openBrowse() {
+    navView = 'browse';
+    browseAt = null;
+    browseData = null;
+    browseMkdir = false;
+    renderNav();
+    if (browseRoots) return;
+    api('/mini/api/browse/roots').then(function (body) {
+      browseRoots = body;
+      renderNav();
+    }).catch(function (err) {
+      browseRoots = null;
+      $('navBody').innerHTML = '<button class="nav-cta" type="button" data-browse-back="1">← 返回</button>'
+        + '<div class="placeholder">读不到常用位置：' + escapeHtml(err.message) + '</div>';
+    });
+  }
+
+  function browseTo(p) {
+    navView = 'browse';
+    browseAt = p;
+    browseData = null;
+    browseMkdir = false;
+    renderNav();
+    api('/mini/api/browse?path=' + encodeURIComponent(p)).then(function (body) {
+      browseData = body;
+      renderNav();
+    }).catch(function (err) {
+      browseData = { ok: false, error: err.message };
+      renderNav();
+    });
+  }
+
+  /** 目录浏览那一屏。路径来自服务端，这里只负责画。 */
+  function renderBrowse() {
+    var html = '<button class="nav-cta" type="button" data-browse-back="1">← 返回</button>';
+
+    if (!browseAt) {
+      if (!browseRoots) {
+        $('navBody').innerHTML = html + '<div class="placeholder">正在读取…</div>';
+        return;
+      }
+      // 顺序有讲究：主目录（最常用）→ 最近用过（第二常用）→ 磁盘（兜底）。
+      // 磁盘排最后，因为「从盘符一层层点」正是我们要避免的那种走法。
+      var rows = [{ name: '主目录', path: browseRoots.home, tag: '常用' }];
+      (browseRoots.recent || []).forEach(function (p) {
+        rows.push({ name: dirName(p), path: p, tag: '最近' });
+      });
+      (browseRoots.drives || []).forEach(function (p) {
+        rows.push({ name: p, path: p, tag: '磁盘' });
+      });
+      html += '<div class="nav-note">挑一个文件夹，登记成工作区。</div>';
+      html += rows.map(function (r) {
+        return '<button class="sess" type="button" data-browse-to="' + escapeHtml(r.path) + '">'
+          + '<span class="s-title">' + escapeHtml(r.name) + '</span>'
+          + '<span class="s-meta">' + escapeHtml(r.tag) + '</span>'
+          + '</button>';
+      }).join('');
+      $('navBody').innerHTML = html;
+      return;
+    }
+
+    if (!browseData) {
+      $('navBody').innerHTML = html + '<div class="placeholder">正在读取…</div>';
+      return;
+    }
+    if (!browseData.ok) {
+      // 读不到时**如实说**，不装作空目录——两者在界面上长得一模一样，
+      // 而「没有权限」和「本来就是空的」对用户是两件事。
+      $('navBody').innerHTML = html + '<div class="crumb"><span class="here">'
+        + escapeHtml(dirName(browseAt)) + '</span></div>'
+        + '<div class="placeholder">' + escapeHtml(browseData.error || '读不到这个目录。') + '</div>';
+      return;
+    }
+
+    // 面包屑：能一路点回上去。最后一格是当前目录，不再可点。
+    var chain = browseData.ancestors || [];
+    html += '<div class="crumb">' + chain.map(function (a, i) {
+      var last = i === chain.length - 1;
+      var piece = last
+        ? '<span class="here">' + escapeHtml(a.name) + '</span>'
+        : '<button type="button" data-browse-to="' + escapeHtml(a.path) + '">'
+          + escapeHtml(a.name) + '</button><span class="sep">›</span>';
+      return piece;
+    }).join('') + '</div>';
+
+    html += '<button class="pick-here" type="button" data-pick="' + escapeHtml(browseData.path) + '">'
+      + '就选这个目录</button>';
+
+    if (browseMkdir) {
+      // 内联输入，不用 window.prompt：prompt 在微信这类内嵌浏览器里会被直接
+      // 屏蔽掉，那时候用户点「新建文件夹」什么都不发生，而且没有任何提示。
+      html += '<div class="mkdir-row">'
+        + '<input id="mkdirName" type="text" placeholder="新文件夹的名字" autocomplete="off">'
+        + '<button type="button" data-mkdir-ok="1">建</button>'
+        + '<button type="button" data-mkdir-cancel="1">取消</button>'
+        + '</div>';
+    } else {
+      html += '<button class="ws-new" type="button" data-mkdir="1">＋ 新建文件夹</button>';
+    }
+
+    if (!browseData.dirs.length) {
+      html += '<div class="placeholder">这个目录下面没有子目录。</div>';
+    } else {
+      html += browseData.dirs.map(function (d) {
+        return '<button class="sess" type="button" data-browse-to="' + escapeHtml(d.path) + '">'
+          + '<span class="s-title">' + escapeHtml(d.name) + '</span>'
+          + '</button>';
+      }).join('');
+    }
+    if (browseData.truncated) {
+      html += '<div class="nav-note">只列了前 ' + browseData.dirs.length + ' 个，共 '
+        + browseData.total + ' 个。</div>';
+    }
+    $('navBody').innerHTML = html;
+  }
+
+  /**
+   * 「← 返回」：一级一级往外退，退法要跟用户心里的层级对上。
+   *   在某个目录里 → 退回常用位置那一屏（往上几级有面包屑，不用返回键代劳）
+   *   已经在常用位置 → 退回工作区树
+   * 不这么做的话，从深层目录点返回会直接跳回工作区树，用户想换个盘得重新走一遍。
+   */
+  function closeBrowse() {
+    if (browseAt) {
+      browseAt = null;
+      browseData = null;
+      browseMkdir = false;
+      renderNav();
+      return;
+    }
+    navView = 'tree';
+    renderNav();
+  }
+
+  function registerWorkspace(p) {
+    if (browseBusy) return;
+    browseBusy = true;
+    api('/mini/api/workspaces', { method: 'POST', body: JSON.stringify({ path: p }) })
+      .then(function (res) {
+        browseBusy = false;
+        navView = 'tree';
+        browseAt = null;
+        browseData = null;
+        // 服务端把登记后的最新列表一起带回来了，直接用——不用再补一趟请求，
+        // 也就不会出现「建好了但列表里还没有」。
+        if (res && res.workspaces) navList = res.workspaces;
+        navSessions = {};
+        renderNav();
+        toast(res && res.created
+          ? '已登记《' + res.workspace.title + '》'
+          : '《' + res.workspace.title + '》本来就在列表里');
+      })
+      .catch(function (err) {
+        browseBusy = false;
+        toast(err.message);
+      });
+  }
+
+  function makeFolder() {
+    var input = $('mkdirName');
+    var name = input ? input.value : '';
+    if (browseBusy) return;
+    browseBusy = true;
+    api('/mini/api/browse/mkdir', { method: 'POST', body: JSON.stringify({ path: browseAt, name: name }) })
+      .then(function (res) {
+        browseBusy = false;
+        browseMkdir = false;
+        browseTo(res.path);
+      })
+      .catch(function (err) {
+        browseBusy = false;
+        toast(err.message);
+      });
+  }
+
   function toggleWorkspace(wsId) {
     if (navExpanded[wsId]) {
       delete navExpanded[wsId];
@@ -1474,6 +2314,49 @@
       });
   }
 
+  // 防连点。建会话**不是幂等的**——点两下就在电脑上真建出两个会话来，
+  // 而手机上什么都看不出来（第二个只是把列表撑长了一行）。所以这里必须自己拦。
+  // 服务端那道闸门拦不住这个：两个请求都是合法的。
+  var creatingSession = false;
+
+  function createSession(wsId) {
+    if (creatingSession) return;
+    creatingSession = true;
+    Array.prototype.forEach.call($('navBody').querySelectorAll('.ws-new'), function (el) {
+      el.disabled = true;
+    });
+    function done() {
+      creatingSession = false;
+      Array.prototype.forEach.call($('navBody').querySelectorAll('.ws-new'), function (el) {
+        el.disabled = false;
+      });
+    }
+    // POST 到工作区会话那条路径上：GET 是「列出来」，POST 是「建一个」。
+    // 服务端建完会顺手 bind 并把新快照一起返回，所以这里一次请求就完成了
+    // 「建 + 切过去」，不用再补一次 bind。
+    //
+    // **要把 promise 返回出去**：起了异步动作就该让调用方等得到它。
+    // 不返回的话外面拿到的是 undefined，接不上任何后续。
+    return api('/mini/api/workspaces/' + encodeURIComponent(wsId) + '/sessions', {
+      method: 'POST',
+      body: '{}',
+    }).then(function (res) {
+      done();
+      // 接口把绑定后的快照一起给了，直接渲染——不这样的话，切过去的一瞬间
+      // 屏幕上还留着上一个会话的正文。
+      if (res && res.state) applySnapshot(res.state);
+      else render();
+      closeNav();
+      toast('已在《' + ((res && res.workspaceTitle) || '工作区') + '》里建好新会话');
+      // 让列表里立刻出现这条新会话。force 是为了绕过服务端那份 30 秒的缓存——
+      // 刚建的会话它还不知道，不绕过的话切回来会「咦刚才那条呢」。
+      loadWorkspaces(true);
+    }).catch(function (err) {
+      done();
+      toast(err.message);
+    });
+  }
+
   function bindSession(id) {
     if (!id) return;
     api('/mini/api/bind', { method: 'POST', body: JSON.stringify({ sessionId: id }) })
@@ -1506,8 +2389,32 @@
   $('navBody').addEventListener('click', function (e) {
     var t = e.target;
     var sess = t && t.closest ? t.closest('.sess') : null;
-    if (sess) { bindSession(sess.getAttribute('data-sess')); return; }
-    var head = t && t.closest ? t.closest('.ws-head') : null;
+    if (sess) {
+      // 目录浏览那一屏里的 .sess 是「进这个目录」，不是「切到这个会话」。
+      // 两屏共用同一个条目样式，所以要先看当前在哪一屏。
+      if (navView === 'browse') { browseTo(sess.getAttribute('data-browse-to')); return; }
+      bindSession(sess.getAttribute('data-sess'));
+      return;
+    }
+    var at = function (sel) { return t && t.closest ? t.closest(sel) : null; };
+
+    var newWs = at('[data-new-ws]');
+    if (newWs) { openBrowse(); return; }
+    var back = at('[data-browse-back]');
+    if (back) { closeBrowse(); return; }
+    var to = at('[data-browse-to]');
+    if (to) { browseTo(to.getAttribute('data-browse-to')); return; }
+    var pick = at('[data-pick]');
+    if (pick) { registerWorkspace(pick.getAttribute('data-pick')); return; }
+    if (at('[data-mkdir]')) { browseMkdir = true; renderNav(); return; }
+    if (at('[data-mkdir-cancel]')) { browseMkdir = false; renderNav(); return; }
+    if (at('[data-mkdir-ok]')) { makeFolder(); return; }
+
+    // 「新建会话」要排在 ws-head 之前判：它在 ws-body 里面、不是 ws-head，
+    // 顺序上无所谓，但放在前面更清楚——这一支是动作，那一支是展开/收起。
+    var fresh = at('.ws-new');
+    if (fresh) { createSession(fresh.getAttribute('data-newws')); return; }
+    var head = at('.ws-head');
     if (!head) return;
     toggleWorkspace(head.parentNode.getAttribute('data-ws'));
   });
@@ -1550,9 +2457,127 @@
       }
       setRunning(false);
       render();
-      if (!document.hidden) { playDing(); buzz(); }
-      // 页面在后台时的系统通知已经去掉了，原因见下面「浏览器系统通知」那一段。
-      // 需要「人不在也能收到」的，走电脑端的外部推送（Bark / ntfy）。
+      if (!document.hidden) {
+        playDing(); buzz();
+      } else {
+        // 页面在后台时，响铃和震动都叫不醒人——那两样只在页面看得见的时候有用。
+        //
+        // 原来这里指望系统通知兜底。2026-09-25 试到底了：**锁屏时系统会冻结后台页面**，
+        // 实时连接断掉，这段代码根本轮不到执行。不锁屏的后台（切到别的应用）它倒是能用，
+        // 但用户试过之后决定浏览器里不做这个功能了，理由和处置见下面「页面在后台时提醒」。
+        //
+        // 调用留着：开关不露出来了，state.notify 就永远是 false，这个函数会立刻返回。
+        notifySystem(payload.text);
+      }
+    });
+    // ——— 回答电脑的提问 ———
+    //
+    // 电脑那边提问时，插件把题目推一条 `question` 过来，答完 POST 回 /mini/api/answer。
+    // 三条是用户定下的：一个一个答（答完这题才出下一题）、点错了能回头改、能自己打字。
+    let ask = null
+    function askRender() {
+      if (!ask) return
+      const q = ask.questions[ask.i]
+      $('askHead').textContent = ask.questions.length > 1
+        ? '电脑问你第 ' + (ask.i + 1) + ' 题，一共 ' + ask.questions.length + ' 题'
+        : '电脑在问你一件事'
+      $('askText').textContent = q.question || ''
+      $('askDetail').textContent = q.detail || ''
+      $('askDetail').style.display = q.detail ? '' : 'none'
+      const picked = ask.picked[ask.i] || { selected: [], custom: '' }
+      const box = $('askOpts')
+      box.innerHTML = ''
+      const options = Array.isArray(q.options) ? q.options : []
+      options.forEach(function (o) {
+        const btn = document.createElement('button')
+        btn.type = 'button'
+        btn.className = 'opt' + (picked.selected.indexOf(o.label) >= 0 ? ' sel' : '')
+        const name = document.createElement('span')
+        name.textContent = o.label
+        btn.appendChild(name)
+        if (o.description) {
+          const sub = document.createElement('small')
+          sub.textContent = o.description
+          btn.appendChild(sub)
+        }
+        btn.addEventListener('click', function () {
+          // 允许多选的题就点一下选中、再点一下取消；单选的点谁就是谁。
+          if (q.multiSelect) {
+            const at = picked.selected.indexOf(o.label)
+            if (at >= 0) picked.selected.splice(at, 1)
+            else picked.selected.push(o.label)
+          } else {
+            picked.selected = [o.label]
+          }
+          // 选了选项就清掉"我自己说"——两者只留一个，免得电脑收到含糊的答案。
+          picked.custom = ''
+          ask.picked[ask.i] = picked
+          askRender()
+        })
+        box.appendChild(btn)
+      })
+      $('askCustomWrap').style.display = ask.custom ? '' : 'none'
+      $('askCustom').value = picked.custom || ''
+      $('askBack').style.display = ask.i > 0 ? '' : 'none'
+      $('askNext').textContent = ask.i === ask.questions.length - 1 ? '答好了，发回电脑' : '下一题'
+      $('askCard').classList.add('on')
+    }
+    $('askOwn').addEventListener('click', function () {
+      if (!ask) return
+      ask.custom = !ask.custom
+      $('askCustomWrap').style.display = ask.custom ? '' : 'none'
+      if (ask.custom) $('askCustom').focus()
+    })
+    $('askCustom').addEventListener('input', function () {
+      if (!ask) return
+      const picked = ask.picked[ask.i] || { selected: [], custom: '' }
+      picked.custom = $('askCustom').value
+      picked.selected = []
+      ask.picked[ask.i] = picked
+      askRender()
+    })
+    $('askBack').addEventListener('click', function () {
+      if (!ask || ask.i === 0) return
+      ask.i -= 1
+      askRender()
+    })
+    $('askNext').addEventListener('click', function () {
+      if (!ask) return
+      const picked = ask.picked[ask.i] || { selected: [], custom: '' }
+      if (!picked.selected.length && !(picked.custom || '').trim()) {
+        toast('先选一个，或者点「我自己说」写一句')
+        return
+      }
+      if (ask.i < ask.questions.length - 1) {
+        ask.i += 1
+        askRender()
+        return
+      }
+      // 最后一题答完：把所有题的答案一起交回去。
+      const answers = ask.questions.map(function (q, k) {
+        const one = ask.picked[k] || { selected: [], custom: '' }
+        const answer = { id: q.id, selected: one.selected.slice() }
+        if ((one.custom || '').trim()) answer.custom = one.custom.trim()
+        return answer
+      })
+      // 三种结果说三句不同的话。**没成事就不收卡片**：收掉了就再也没地方说这句话，
+      // 用户看到的只会是「点了没反应」。
+      sendAnswer(ask.id, answers).then(function (verdict) {
+        if (verdict === 'failed') {
+          toast('没送出去，看一眼和电脑的连接，再点一次')
+          return
+        }
+        ask = null
+        $('askCard').classList.remove('on')
+        if (verdict === 'late') toast('这道题已经交回电脑了，去电脑上答')
+      })
+    })
+    es.addEventListener('question', function (e) {
+      let payload = null
+      try { payload = JSON.parse(e.data) } catch (err) { return }
+      if (!payload || !payload.id || !Array.isArray(payload.questions) || !payload.questions.length) return
+      ask = { id: payload.id, questions: payload.questions, i: 0, picked: {}, custom: false }
+      askRender()
     });
     es.addEventListener('status', function (e) {
       try { setRunning(JSON.parse(e.data).running); } catch (err) {}
@@ -1571,6 +2596,183 @@
     inputEl.style.height = Math.min(inputEl.scrollHeight, 140) + 'px';
   }
 
+  // ---------------- 斜杠指令（在输入框里打 / 时弹出来的菜单） ----------------
+  //
+  // 手机上敲 `/` 要能看见这个会话有哪些指令、点一下就执行。这一块管三件事：
+  // 菜单怎么出（paintCmdMenu）、点一条怎么处理（pickCommand）、执行本身
+  // （runCommand，下面 send 那条路也用它）。
+  //
+  // 数据**按会话缓存**，理由见 state 里 commands* 那几个字段。
+  //
+  // 输入框本来的提示语。选了一条「要参数」的指令时它会被换成那句 hint，发出去之后
+  // 要换回来——留着上一个指令的参数提示，下一个普通问题就顶着一句不相干的话。
+  var INPUT_HINT = inputEl.placeholder || '';
+
+  /**
+   * 输入框里那个「还没打完的指令」。
+   *
+   * 命中时返回 `/` 后面那一段（只打了一个 `/` 就是空串），没命中返回 null。
+   * 判据收得很紧：**整行**必须正好是「/ 加一串小写字母数字下划线横线」。出现空格、
+   * 前面多了别的字、用了大写，都算没命中——菜单收起来，交给 send 里那条分流规则。
+   *
+   * 只认小写是因为 DSH 的指令名就是小写：把大写也当命中，用户会看到「打了没反应」
+   * （过滤出零条 → 菜单收起），而真实原因只是他开着大写。
+   */
+  function slashQuery() {
+    var m = /^\/([a-z0-9_-]*)$/.exec(inputEl.value);
+    return m ? m[1] : null;
+  }
+
+  function hideCmdMenu() {
+    var el = $('cmdMenu');
+    if (!el) return;
+    el.hidden = true;
+    el.innerHTML = '';
+  }
+
+  /** 这个会话的指令表是不是还没有（或者需要重取）。 */
+  function needCommands() {
+    // 换了会话就得重取，见 state 里 commands* 的说明。
+    if (state.commandsFor !== state.boundSessionId) return true;
+    // 这个会话还什么都没拿到、也没失败过——第一次用到它的时候去取。
+    return !state.commands && !state.commandsError;
+  }
+
+  function loadCommands() {
+    // 正在取就别再发一次：菜单是跟着输入框每敲一个字重画的，不拦着的话
+    // 打「/compact」会连发八个请求。
+    if (state.commandsLoading) return;
+    state.commandsLoading = true;
+    // 记下这份数据是**给哪个会话**取的，而不是「请求是什么时候发的」——
+    // 请求飞在路上时用户完全可能已经切走了，回来那一份就不作数了。
+    var forSession = state.boundSessionId;
+    state.commands = null;
+    state.commandsError = '';
+    api('/mini/api/commands').then(function (res) {
+      state.commandsLoading = false;
+      if (forSession !== state.boundSessionId) return;   // 不是这个会话的，扔掉
+      state.commandsFor = forSession;
+      if (res && res.ok) {
+        state.commands = res.commands || [];
+        state.commandsError = '';
+      } else {
+        // 服务端给了原因（多半是「这个会话现在没在跑」）就原样留着显示。
+        // **不能显示成空列表**：那等于说「这个会话没有指令」，是另一回事。
+        state.commandsError = (res && res.error) || '读不到指令列表';
+      }
+      paintCmdMenu();
+    }).catch(function (err) {
+      state.commandsLoading = false;
+      if (forSession !== state.boundSessionId) return;
+      state.commandsFor = forSession;
+      state.commands = null;
+      state.commandsError = err.message || '读不到指令列表';
+      paintCmdMenu();
+    });
+  }
+
+  /**
+   * 画（或收起）那只菜单。
+   *
+   * 它**每回都按输入框重算**，自己不记「现在是开着还是关着」：这样就不会出现
+   * 「菜单和输入框对不上」的状态——比如程序清空输入框（点菜单、发完之后）不会触发
+   * input 事件，那种时候没人替我们收菜单，只能自己出面对齐。
+   */
+  function paintCmdMenu() {
+    var el = $('cmdMenu');
+    if (!el) return;
+    var prefix = slashQuery();
+    if (prefix === null) { hideCmdMenu(); return; }
+    var wasOpen = !el.hidden;
+    // 上次没取到时，**每次重新打开可以再试一次**（关着→打开这一下才重取，不是每敲一个
+    // 字都取）。这一条是必须的：失败的原因多半是「这个会话现在没在跑」，而用户完全可能
+    // 随后就发了条消息让它跑起来——那时再打 /，看到的却是上一句已经过时的话，
+    // 他会以为这个功能坏了。
+    if (needCommands() || (!wasOpen && state.commandsError)) loadCommands();
+    el.hidden = false;
+    if (state.commandsError) {
+      el.innerHTML = '<div class="cmd-note">' + escapeHtml(state.commandsError) + '</div>';
+      return;
+    }
+    if (!state.commands) {
+      // 取回来之前先占个位——不然敲了 / 什么都不发生，看着像坏了。
+      el.innerHTML = '<div class="cmd-note">正在读取可用的指令…</div>';
+      return;
+    }
+    var rows = state.commands.filter(function (c) {
+      return String(c.name || '').indexOf(prefix) === 0;
+    });
+    // 一条都对不上就收起来，**不写「没有匹配的指令」**：用户还在打字，打到一半没有
+    // 匹配是常事，插一句提示只是噪音。真打错了指令，按发送时会被明确拒绝并说明。
+    if (!rows.length) { hideCmdMenu(); return; }
+    el.innerHTML = rows.map(function (c) {
+      return '<button class="cmd-row" type="button" data-cmd="' + escapeHtml(c.name) + '">'
+        + '<span class="cmd-name">/' + escapeHtml(c.name) + '</span>'
+        + '<span class="cmd-desc">' + escapeHtml(c.description || '') + '</span></button>';
+    }).join('');
+  }
+
+  /**
+   * 菜单里点了一条。
+   *
+   * 分两路，判据是服务端给的 hint（这条指令要不要参数）：
+   *   · 不要参数 —— 直接执行。让用户再按一次发送是白白多一步。
+   *   · 要参数   —— 把 `/名字 ` 填进输入框，末尾留一个空格、光标停在后面，并把
+   *     hint 那句话挂到输入框的 placeholder 上。
+   *     **不自己编一句「请输入参数」**：只有服务端知道这条指令要什么，
+   *     编一句就等于让用户照着一个错的提示去填。
+   */
+  function pickCommand(name) {
+    var list = state.commands || [];
+    var cmd = null;
+    for (var i = 0; i < list.length; i++) { if (list[i].name === name) cmd = list[i]; }
+    if (!cmd) return;
+    hideCmdMenu();
+    // 先把提示语还原，再按这一条决定要不要挂 hint——不然上一次点的那条「要参数」的
+    // 指令留下的提示，会跟到这一条（不需要参数的）头上。
+    inputEl.placeholder = INPUT_HINT;
+    if (cmd.hint) {
+      inputEl.value = '/' + cmd.name + ' ';
+      inputEl.placeholder = cmd.hint;
+      inputEl.focus();
+      // 光标停在最后：停在名字中间的话，用户接着打的字会插进名字里去。
+      inputEl.setSelectionRange(inputEl.value.length, inputEl.value.length);
+      autoGrow();
+      return;
+    }
+    inputEl.value = '';
+    autoGrow();
+    runCommand('/' + cmd.name);
+  }
+
+  /**
+   * 执行一条斜杠指令。
+   *
+   * 和普通消息走的是**两条不同的接口**：/mini/api/command 收的是完整的一行（含 /
+   * 和参数），/mini/api/send 收的是「发给模型的一句话」。手机这边不替用户猜他打的是
+   * 哪一个——猜错的代价是一次真花掉额度的提问，而且电脑端对不存在的指令是明确拒绝的，
+   * 两边行为得一致。
+   *
+   * 接口只回一个 ok：这条指令**存不存在、跑得怎么样，都不在这里**。开始和结果由会话
+   * 事件推回来（历史里出现 role:'command' 的条目，kind 从 running 变 success/error）。
+   * 所以这里既不做乐观显示（会跟推来的那条重一份），也不报喜——只把「当场被拒」
+   * 这一种情况说出来。
+   */
+  function runCommand(line) {
+    api('/mini/api/command', { method: 'POST', body: JSON.stringify({ line: line }) })
+      .then(function (res) {
+        if (res && res.ok) return;
+        // 被拒（没有这条指令 / 语法不对）的原因必须让用户看见，不能悄悄咽掉。
+        toast((res && res.error) || '这条指令没跑起来');
+      })
+      .catch(function (err) { toast(err.message || '这条指令没跑起来'); });
+  }
+
+  $('cmdMenu').addEventListener('click', function (e) {
+    var btn = e.target && e.target.closest ? e.target.closest('[data-cmd]') : null;
+    if (btn) pickCommand(btn.getAttribute('data-cmd'));
+  });
+
   // ---------------- 上传附件 ----------------
   /** 把字节数说成人话。 */
   function humanSize(n) {
@@ -1654,6 +2856,27 @@
     mainEl.scrollTop = mainEl.scrollHeight;
     inputEl.value = '';
     autoGrow();
+    // 输入框空了，菜单得当场收起来：清空是程序改的 value，不会触发 input 事件，
+    // 没人替我们重算，菜单就会挂在那儿配着一个空输入框。
+    hideCmdMenu();
+    inputEl.placeholder = INPUT_HINT;
+
+    // **以 / 打头的走指令那条路，不再当普通消息发。**
+    //
+    // 这是用户拍板的：手机上打了一条不存在的指令，要跟电脑端一样被明确拒绝并说明原因，
+    // 不能悄悄当成一次提问发给模型——那既让两边行为不一致，又等于把一次敲错变成一次
+    // 真花掉额度的提问。
+    //
+    // 存不存在由服务端判（这边的指令表可能是缓存的旧值），所以这里不看列表，
+    // 只认「trim 之后第一个字符是不是 /」。
+    if (text.charAt(0) === '/') {
+      // 附件跟不过去：指令接口收的只有那一行（见 runCommand 的说明）。
+      // 这里**不动 state.uploads**——清掉就等于把用户刚传上来的文件悄悄扔了，
+      // 而他还以为跟着发出去了。留在小条上看得见，想发就配一句话再发一次。
+      if (files.length) toast('指令带不了附件，附件还留在下面');
+      runCommand(text);
+      return;
+    }
 
     var uploadIds = files.map(function (f) { return f.uploadId; });
     // 手机上先把附件收起来：小票已经交出去了，留着会让用户以为还能再发一次。
@@ -1726,6 +2949,9 @@
 
   $('btnSend').addEventListener('click', send);
   inputEl.addEventListener('input', autoGrow);
+  // 每敲一个字重算一次菜单。它自己会先看「是不是一个没打完的 / 名字」再决定动不动，
+  // 所以这里不用加判据。
+  inputEl.addEventListener('input', paintCmdMenu);
   inputEl.addEventListener('keydown', function (e) {
     if (e.key === 'Enter' && !e.shiftKey && !e.isComposing) {
       e.preventDefault();
@@ -1756,6 +2982,118 @@
   $('btnClose').addEventListener('click', function () { sheet.classList.remove('open'); });
   sheet.addEventListener('click', function (e) { if (e.target === sheet) sheet.classList.remove('open'); });
 
+  // ---------------- 权限档位 ----------------
+  //
+  // 这是把 PC 端那道授权闸门搬到了手机上：**手机从此能指挥 Agent 把电脑提到
+  // 完全权限**。闸门还在（要 token / 密码），但它守的那扇门换了一扇——
+  // 拿到手机的人等于拿到了这台电脑的写权限。这是功能本身的代价，不是瑕疵。
+  //
+  // 所以「完全权限」那一档要点两次。用页面内的两步确认、不用 window.confirm：
+  // 那种弹窗在微信这类内嵌浏览器里会被直接屏蔽，而在屏蔽的情况下万一返回
+  // 真值就等于确认被跳过了——不安全的方向上不能赌。
+  //
+  // 档位名和标签都是**服务端读出来再给过来的**：有哪些档位、什么顺序、哪个要
+  // 确认，这一侧一个都不写死。服务端那边负责把标识符（read-only 这类 DSH 自己的
+  // 键名）翻成中文——服务给的 optionOf() 只回键名，三个中文是 DSH 网页界面里的
+  // 客户端翻译，服务里没有，所以那张表放在 lib/permissions.js。
+  // 映射不到时会退回标识符本身，所以这里拿到的一定是个真名字，不会是空格。
+  // 页面只管显示拿到的东西。
+  var permOptions = null;   // null = 还没读到（或这台电脑没这个能力）
+  var permArmed = '';       // 哪一档正在等「再点一次」
+
+  function loadPermissions() {
+    api('/mini/api/permissions').then(function (body) {
+      if (!body || !body.ok) { $('permBlock').hidden = true; return; }
+      permOptions = body;
+      renderPerms();
+    }).catch(function () {
+      // 读不到就整块不显示。附加能力缺了，不该影响发指令。
+      permOptions = null;
+      $('permBlock').hidden = true;
+    });
+  }
+
+  function renderPerms() {
+    if (!permOptions) return;
+    $('permBlock').hidden = false;
+    var seg = $('segPerm');
+    seg.innerHTML = (permOptions.options || []).map(function (o) {
+      var cls = [];
+      if (o.value === permOptions.currentValue) cls.push('active');
+      if (o.value === permArmed) cls.push('armed');
+      return '<button type="button" data-perm="' + escapeHtml(o.value) + '"'
+        + (cls.length ? ' class="' + cls.join(' ') + '"' : '') + '>'
+        + escapeHtml(o.value === permArmed ? '再点一次：' + o.name : o.name)
+        + '</button>';
+    }).join('');
+    $('permHint').textContent = permHintText();
+  }
+
+  /**
+   * 提示语。
+   *
+   * 服务没给说明文字时**不硬编一句**——本机三个档位的 description 全是空的。
+   * 那就在这一行显示出当前档位的名字（这个名字是真的，来自服务端），
+   * 而不是编一段「Agent 只能读」这种我没法保证准确的话。
+   * 「现在在哪一档」主要由按钮的高亮表示，这一行只是补充。
+   */
+  function permHintText() {
+    if (!permOptions) return '';
+    var cur = (permOptions.options || []).filter(function (o) {
+      return o.value === permOptions.currentValue;
+    })[0];
+    if (!cur) return '作用在当前会话上';
+    return cur.description || ('当前：' + cur.name);
+  }
+
+  function tapPerm(name) {
+    if (!permOptions) return;
+    // 点的就是当前这一档：什么都不做。不这么做的话，一次误触会往会话日志里
+    // 记一条没有意义的切换。
+    if (name === permOptions.currentValue) return;
+    var opt = (permOptions.options || []).filter(function (o) { return o.value === name; })[0];
+    if (!opt) return;
+
+    if (opt.dangerous && permArmed !== name) {
+      permArmed = name;
+      renderPerms();
+      toast('再点一次「' + opt.name + '」就切过去');
+      return;
+    }
+    permArmed = '';
+    api('/mini/api/permissions', { method: 'POST', body: JSON.stringify({ name: name }) })
+      .then(function (body) {
+        if (!body || !body.ok) return;
+        // 服务端把切换后的最新状态一起回来了，直接重画，不用再补一趟。
+        permOptions = body;
+        renderPerms();
+        toast('已切到「' + opt.name + '」');
+      })
+      .catch(function (err) {
+        permArmed = '';
+        renderPerms();
+        toast(err.message);
+      });
+  }
+
+  loadPermissions();
+
+  // 档位按钮的点击。
+  //
+  // 监听挂在**容器**上，不挂在按钮上——`renderPerms()` 每次都整块换 innerHTML，
+  // 挂按钮上的监听会被下一次重画冲掉。挂在容器上就不受影响。
+  //
+  // 这个坑真机踩到过：三档看得见、点下去毫无反应，因为 `tapPerm` 一次都没被调用。
+  // 单元测试没抓住它，是因为测试直接调 `tapPerm` 验逻辑，而真机上缺的是**接线**——
+  // 逻辑对、没人喊它。
+  $('segPerm').addEventListener('click', function (e) {
+    var btn = e.target;
+    // 按钮里现在只有文字，点到的就是按钮本身；这个循环是防将来往里塞图标。
+    while (btn && btn !== this && !(btn.dataset && btn.dataset.perm)) btn = btn.parentNode;
+    if (!btn || btn === this) return;
+    tapPerm(btn.dataset.perm);
+  });
+
   Array.prototype.forEach.call($('segMode').children, function (btn) {
     btn.addEventListener('click', function () {
       state.mode = btn.dataset.mode;
@@ -1783,18 +3121,145 @@
 
   // 会话切换挪到左侧导航栏了（原来这里是设置里的下拉框）。
 
-  // 浏览器系统通知这条路，在手机上走不通，三层原因叠在一起：
-  //   1. 通知权限只能在「安全上下文」（HTTPS 或 localhost）里申请。手机连的是
-  //      明文 HTTP——局域网和 Tailscale 都是——浏览器连这个 API 都不给；
+  // ---------------- 锁屏也能提醒（系统通知） ----------------
+  //
+  // 页内的响铃和震动只在页面看得见的时候有用。人把手机放下、屏幕锁了，那两样都
+  // 叫不醒他——要叫醒他只能发系统通知。
+  //
+  // 这条路以前是关着的，三层原因叠在一起：
+  //   1. 通知权限只能在「安全上下文」（HTTPS 或 localhost）里申请。当时三条连接
+  //      路径全是明文 HTTP，浏览器连这个 API 都不给；
   //   2. 就算拿到权限，new Notification() 在大多数移动浏览器上会抛 TypeError，
-  //      移动端正确的做法是 service worker 的 showNotification；
+  //      移动端唯一正确的入口是 service worker 的 showNotification；
   //   3. service worker 同样要求 HTTPS。
+  // 2026-09-25 Tailscale 那条路接上 HTTPS，第 1、3 条同时成立，这条路才通。
   //
-  // 2026-09-21 用户裁决：**设置里那个「开启」按钮先隐藏掉**（和输入框旁边的 🎤 一样，
-  // 留着一个按了没用的按钮比没有更让人困惑）。设置里留一行说明，指向真正管用的那条路：
-  // 电脑端的外部推送（Bark / ntfy），它是从服务器发出去的，不受浏览器这条规矩限制。
+  // **所以这一行只在加密连接下露出来。** 明文下露出来，用户点一下只会碰一鼻子灰
+  // ——那正是 2026-09-21 把它整行撤掉的理由，那条理由现在仍然成立。
   //
-  // 别把这个按钮加回来，除非先有了一条受信任的 https 路径。
+  // 电脑端的外部推送（Bark / ntfy / Telegram）是另一条路：从服务器发出去，不经
+  // 浏览器，明文连接下也照常能用。两者不冲突，各管一段。
+  var NOTIFY_OK = window.isSecureContext
+    && 'serviceWorker' in navigator
+    && 'Notification' in window;
+
+  function notifySystem(text) {
+    if (!state.notify || !NOTIFY_OK) return;
+    if (Notification.permission !== 'granted') return;
+    navigator.serviceWorker.ready.then(function (reg) {
+      return reg.showNotification('回复到了', {
+        body: String(text || '').replace(/\s+/g, ' ').trim().slice(0, 120),
+        // 带上 tag：同一条回复重复到达时替换掉旧的，别堆一屏。
+        tag: 'dsh-reply',
+        renotify: true,
+        // 地址由页面给。不能拿 service worker 自己的 location 拼——那是那个 .js
+        // 文件的地址，用户点通知会打开一份源码。
+        data: { url: location.href },
+      });
+    }).catch(function () { /* 发不出去就算了，不该影响主流程 */ });
+  }
+
+  function syncNotify() {
+    Array.prototype.forEach.call($('segNotify').children, function (b) {
+      b.classList.toggle('active', (b.dataset.notify === 'on') === state.notify);
+    });
+  }
+
+  if (NOTIFY_OK) {
+    // 先注册 service worker。**这一步不申请权限**——权限要用户主动点一下才给，
+    // 页面一加载就弹窗会被浏览器直接拒掉，而且很讨厌。
+    //
+    // 注册成功才把那一行露出来。注册不上就继续藏着：露一个点了没用的开关，
+    // 比没有更让人困惑。
+    //
+    // **2026-09-25 用户裁决：这一行不露出来了。**
+    //
+    // 试到底了：手机锁屏后系统冻结后台页面，那条实时连接跟着断掉，回复根本到不了页面，
+    // 也就没人去发通知。这是手机系统的调度，插件绕不过去；service worker 也救不了——
+    // 它是被事件唤醒的，没有事件它就不存在。
+    //
+    // 用户原话：「类似功能我们以后考虑做成 APP 时再加，浏览器里不放了。」
+    //
+    // **代码全部留着，只是不露出来。** service worker 照常注册（已经验证过在加密连接下
+    // 能正常工作），通知那段逻辑照常挂在回复到达的分支里。将来做 App 里的锁屏提醒，
+    // 这里的知识直接能用。
+    //
+    // 要重新打开：把下面两行取消注释。**但先把名字想清楚**——别再用「锁屏也能提醒」
+    // 这种它做不到的说法，那是这一轮踩过的坑。
+    navigator.serviceWorker.register('/mini/sw.js?v=' + BUILD).catch(function () {});
+    // $('rowNotify').style.display = '';
+    // $('notifyHint').textContent = notifyHintText();
+    // syncNotify();
+
+    // 浏览器现在给的是什么状态，就说什么话。
+    //
+    // **不能只说「打开时会问一次」**——2026-09-25 用户点了「开」，浏览器什么都没问，
+    // 界面上也一点变化都没有，看上去就是「点了没用」。真实原因是这个网站的通知权限
+    // 早就被拒过，而 requestPermission() 在这种情况下**不会再弹**，直接回 denied。
+    // 所以每一种状态都得有对应的一句话，用户才能自己判断下一步该干什么。
+    function notifyHintText() {
+      var p = Notification.permission;
+      if (p === 'granted') return '回复到了发一条系统通知';
+      if (p === 'denied') return '权限被拒过，浏览器不会再问。去浏览器设置里允许，或清掉本站数据后重新扫码';
+      return '打开时浏览器会问一次要不要允许';
+    }
+
+    // 申请通知权限。**两种写法都要兼容**：新浏览器返回 Promise，老一点的和一些厂商
+    // 定制内核只认回调式——直接 .then() 会抛，表现同样是「点了没反应」。
+    // 回调式在所有支持这个 API 的浏览器上都会被调用（包括那些同时支持 Promise 的），
+    // 所以以它为主，Promise 只当兜底。
+    function askNotifyPermission() {
+      var settled = false;
+      function settle(perm) {
+        if (settled) return;
+        settled = true;
+        if (perm !== 'granted') {
+          $('notifyHint').textContent = '浏览器没给通知权限（现在是「' + (perm || '没反应')
+            + '」）。去浏览器设置里允许，或清掉本站数据后重新扫码。';
+          syncNotify();
+          return;
+        }
+        state.notify = true;
+        localStorage.setItem('dshMiniNotify', 'on');
+        $('notifyHint').textContent = notifyHintText();
+        syncNotify();
+      }
+      try {
+        var r = Notification.requestPermission(settle);
+        if (r && typeof r.then === 'function') r.then(settle).catch(function () {});
+      } catch (err) {
+        $('notifyHint').textContent = '这个浏览器问不出通知权限。要去浏览器的设置里手动开。';
+        return;
+      }
+      // 有些内核两条路都不回来。等三秒给个交代，别让用户对着一个没反应的开关发呆。
+      setTimeout(function () {
+        if (!settled) {
+          $('notifyHint').textContent = '浏览器没弹权限询问（现在是「' + Notification.permission
+            + '」）。去浏览器设置里允许，或清掉本站数据后重新扫码。';
+        }
+      }, 3000);
+    }
+
+    $('segNotify').addEventListener('click', function (e) {
+      var btn = e.target.closest('button');
+      if (!btn) return;
+      if (btn.dataset.notify !== 'on') {
+        state.notify = false;
+        localStorage.setItem('dshMiniNotify', 'off');
+        syncNotify();
+        return;
+      }
+      // 已经允许过了就别再问——问了也不会弹，只会让用户以为坏了。
+      if (Notification.permission === 'granted') {
+        state.notify = true;
+        localStorage.setItem('dshMiniNotify', 'on');
+        $('notifyHint').textContent = notifyHintText();
+        syncNotify();
+        return;
+      }
+      askNotifyPermission();
+    });
+  }
 
   $('btnReconnect').addEventListener('click', function () {
     connect();
@@ -1885,6 +3350,204 @@
   // 任何一次触摸都顺手解锁音频，避免用户第一次收到回复时没声音。
   document.addEventListener('touchstart', unlockAudio, { once: true });
   document.addEventListener('click', unlockAudio, { once: true });
+
+  // -------------------------------------------------------------------------
+  // 模型与思考强度（2026-09-25 用户要求：手机上要能改每个会话的模型和强度）
+  //
+  // 顶栏那一行显示当前用的模型，点它弹出面板可以改。强度按当前模型自己声明的
+  // 档位长；模型不支持调强度时那一行不出现。
+  //
+  // **位置很重要**：必须写在这个外层函数**里面**——`state` 是它内部的变量，
+  // 写到 `})();` 后面就看不见了，结果会是「永远不显示」而且一句错都不报。
+  // 另外**不能再开一个 script 块**：这个页面的测试用贪婪正则抽取脚本，
+  // 多一个块就会把中间的 HTML 整段当成 JS 解析。这个坑踩过一次，别再来一次。
+  // -------------------------------------------------------------------------
+  ;(function () {
+    var bar = document.getElementById('modelBar')
+    var text = document.getElementById('modelBarText')
+    if (!bar || !text) return
+
+    var catalog = null  // 服务端给的模型目录
+    var current = null  // 服务端记的当前选择 {provider, model, reasoningEffort}
+    // 刚改完、服务端还没确认的那个值。为什么要多这一个：服务端记的「当前模型」是在
+    // **下一次请求**时才更新的，所以改完立刻回头去读，读到的还是旧名字。先信
+    // set-model 的返回值，等服务端追上了再让它接管。
+    var pending = null
+    var busy = false   // 防止连点两下发出两个互相打架的请求
+
+    // ---- 顶栏 ------------------------------------------------------------
+    function groupName(id) {
+      var gs = (catalog && catalog.groups) || []
+      for (var i = 0; i < gs.length; i++) { if (gs[i].id === id) return gs[i].name }
+      return id || ''
+    }
+    function sel() { return pending || current || null }
+
+    function renderBar() {
+      var s = sel()
+      if (!s || !s.model) {
+        // 问不到这个会话用哪个模型时，如实说一句——既不装作没这个功能，也不编一个。
+        // 点它还照样能打开面板挑一个，挑完就写得进去。
+        text.textContent = '模型：还没问到'
+        bar.style.display = 'flex'
+        return
+      }
+      // 来源名要用 DSH 给的那个（「DeepSeek」「opencode go」「mimo」），不是内部 id
+      var parts = [groupName(s.provider), s.model]
+      if (s.reasoningEffort) parts.push('思考 ' + s.reasoningEffort)
+      text.textContent = parts.join(' · ')
+      bar.style.display = 'flex'
+    }
+
+    // ---- 选择面板 --------------------------------------------------------
+    function el(tag, css, txt) {
+      var e = document.createElement(tag)
+      if (css) e.style.cssText = css
+      if (txt != null) e.textContent = txt
+      return e
+    }
+    var ROW = 'display:block;width:100%;text-align:left;background:none;border:0;font:inherit;'
+      + 'color:inherit;padding:11px 2px;border-bottom:1px solid var(--line,#333)'
+    var HEAD = 'padding:14px 2px 4px;font-size:12px;color:var(--dim,#888)'
+    var CHIP = 'margin:0 6px 6px 0;padding:5px 13px;border:1px solid var(--line,#444);'
+      + 'border-radius:999px;background:none;font:inherit;color:inherit;font-size:13px'
+
+    // 面板用代码建出来、挂在 body 末尾，而不是写进页面结构里——这样这一整块的
+    // 改动全部落在脚本内部，不用动 HTML，也就不会碰到别的部分。
+    var mask = el('div', 'position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:69;display:none')
+    var sheet = el('div', 'position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;'
+      + 'max-height:72vh;overflow-y:auto;background:var(--bg,#1b1b1b);'
+      + 'border-top:1px solid var(--line,#444);border-radius:14px 14px 0 0;'
+      + 'padding:10px 14px calc(16px + env(safe-area-inset-bottom))')
+    document.body.appendChild(mask)
+    document.body.appendChild(sheet)
+
+    function renderSheet() {
+      sheet.textContent = ''
+      var s = sel() || {}
+      sheet.appendChild(el('div', 'font-size:13px;color:var(--dim,#888);padding:2px 2px 6px',
+        '这个会话用哪个模型'))
+      if (!catalog) { sheet.appendChild(el('div', 'padding:12px 2px', '还没读到模型列表。')); return }
+
+      var groups = catalog.groups || []
+      for (var gi = 0; gi < groups.length; gi++) {
+        var grp = groups[gi]
+        sheet.appendChild(el('div', HEAD, grp.name || grp.id))
+        var models = grp.models || []
+        for (var mi = 0; mi < models.length; mi++) {
+          var mod = models[mi]
+          var isCur = s.provider === grp.id && s.model === mod.id
+          var b = el('button', ROW, (isCur ? '✓ ' : '') + (mod.name || mod.id))
+          if (isCur) b.style.fontWeight = '600'
+          b.addEventListener('click', picker(grp.id, mod.id))
+          sheet.appendChild(b)
+
+          // 强度只在**当前这个模型**下面出现，而且只画它自己声明的档位——DeepSeek 是
+          // off/low/high/max，opencode 和 mimo 是 minimal…max，两套不一样，不能合并成
+          // 一个统一的说法。模型没声明强度时（五十个里有四十三个）这里什么都不画，
+          // 不给一个拖了没反应的控件。
+          var r = mod.reasoning
+          if (isCur && r && r.efforts && r.efforts.length) {
+            var box = el('div', 'padding:8px 2px 12px;border-bottom:1px solid var(--line,#333)')
+            for (var ei = 0; ei < r.efforts.length; ei++) {
+              var ef = r.efforts[ei]
+              var on = s.reasoningEffort === ef.id
+              var c = el('button', CHIP + (on ? ';border-color:currentColor;font-weight:600' : ''),
+                (on ? '✓ ' : '') + (ef.name || ef.id))
+              c.addEventListener('click', picker(grp.id, mod.id, ef.id))
+              box.appendChild(c)
+            }
+            sheet.appendChild(box)
+          }
+        }
+      }
+
+      // 某个来源读不到时如实说出来，不要假装整份目录都是全的
+      var fails = catalog.failures || []
+      for (var fi = 0; fi < fails.length; fi++) {
+        sheet.appendChild(el('div', 'padding:10px 2px;font-size:13px;color:var(--dim,#888)',
+          '⚠ ' + (fails[fi].name || fails[fi].id) + '：' + (fails[fi].message || '读不到')))
+      }
+
+      var close = el('button', ROW + ';border-bottom:0;text-align:center;color:var(--dim,#888)', '关闭')
+      close.addEventListener('click', closeSheet)
+      sheet.appendChild(close)
+    }
+
+    // 把参数用闭包封起来。循环里直接写回调会全都指向最后一项——这是老坑了。
+    function picker(provider, model, effort) {
+      return function () { if (!busy) pick(provider, model, effort) }
+    }
+
+    function pick(provider, model, effort) {
+      var body = { provider: provider, model: model }
+      if (effort) body.reasoningEffort = effort
+      busy = true
+      fetch('/mini/api/set-model?token=' + encodeURIComponent(state.token), {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body)
+      })
+        .then(function (r) { return r.json().catch(function () { return null }) })
+        .then(function (d) {
+          busy = false
+          if (!d || !d.ok) { alert('没改成：' + ((d && d.error) || '电脑那边没答应')); return }
+          var v = d.selected || body
+          pending = { provider: v.provider, model: v.model, reasoningEffort: v.reasoningEffort || null }
+          renderBar()
+          renderSheet()
+        })
+        .catch(function () { busy = false; alert('没改成：连不上电脑。') })
+    }
+
+    function openSheet() { renderSheet(); mask.style.display = 'block'; sheet.style.display = 'block' }
+    function closeSheet() { mask.style.display = 'none'; sheet.style.display = 'none' }
+
+    // ---- 读目录 ----------------------------------------------------------
+    function load() {
+      if (!state.token) return
+      fetch('/mini/api/models?token=' + encodeURIComponent(state.token), { cache: 'no-store' })
+        .then(function (r) { return r.ok ? r.json() : null })
+        .then(function (d) {
+          if (!d || !d.ok) return
+          catalog = d
+          // **问不到就说问不到，绝不用目录默认值兜底。**
+          //
+          // 上一版这里写的是「没记下就显示目录默认值」，看着体贴，实际是编的：
+          // 目录那个默认值等于「上一次选过的模型」，于是用户切到一个用别的模型的
+          // 会话，顶栏显示的还是上一个模型——一个像模像样的错答案，比空着坏得多。
+          current = (d.current && d.current.model) ? d.current : null
+          // 服务端追上了就撤掉本地那个临时值，之后一律以服务端的为准
+          if (pending && current && current.provider === pending.provider
+              && current.model === pending.model) pending = null
+          renderBar()
+          if (sheet.style.display !== 'none') renderSheet()
+        })
+        .catch(function () { /* 读不到就保持原样，不显示错的东西 */ })
+    }
+
+    bar.style.cursor = 'pointer'
+    bar.addEventListener('click', openSheet)
+    mask.addEventListener('click', closeSheet)
+
+    // 手机切了会话要**立刻**跟上，不能等下面那个 15 秒的轮询——那段时间里顶栏显示的
+    // 是上一个会话的模型，看上去就像新会话用错了模型。页面自己把「现在是哪个会话」
+    // 存在 state.boundSessionId 里（状态广播一到就更新），盯着它很便宜。
+    var lastSession = state.boundSessionId || null
+    setInterval(function () {
+      var id = state.boundSessionId || null
+      if (id === lastSession) return
+      lastSession = id
+      pending = null   // 上一个会话身上那个临时值，跟这个会话没关系，必须扔掉
+      load()
+    }, 1000)
+
+    load()
+    // 在电脑上改了模型，手机这边也要跟上。**轮询很土，但这里是诚实的做法**：
+    // 显示一个过期的模型名比不显示更糟——用户会以为自己改的没生效。
+    setInterval(function () { if (!document.hidden) load() }, 15000)
+    document.addEventListener('visibilitychange', function () { if (!document.hidden) load() })
+  })();
 })();
 </script>
 </body>