dsh-mini-remote 0.1.5 → 0.1.6

package/lib/page.html

@@ -172,6 +172,12 @@
   .md { white-space: normal; }
   /* 回复里的图。地址有两种写法，见下面 mdInline() 里那段注释。
      宽度只封顶不写死：窄屏上占满可用宽度、按比例缩，圆角沿用全站那 2 像素。 */
+  /* 图片没加载出来时的那一圈虚线。用中性灰，不动暖金——那是唯一的强调色，一屏最多两次。 */
+  .md-img-bad {
+    outline: 1px dashed rgba(0, 0, 0, .35);
+    outline-offset: 2px;
+  }
+
   .md-img {
     display: block; max-width: 100%; height: auto; margin: 10px 0;
     border-radius: var(--r); border: 1px solid var(--line); background: var(--panel-2);
@@ -308,9 +314,10 @@
     margin: 0 auto;
   }
 
-  /* 立绘：每个姿势是一张「两帧并排」的雪碧图（760×330），靠 background-position
-     在左右两帧之间硬切，手脚就真的在动——不是把一张静图晃一晃。
-     七层叠在一起，换姿势时交叉淡入。 */
+  /* 立绘：每个姿势是一张「并排若干帧」的雪碧图（每帧 380×330），靠 background-position
+     在帧与帧之间硬切，手脚就真的在动——不是把一张静图晃一晃。
+     七层叠在一起，换姿势时交叉淡入。
+     帧数写在数据里（POSES[i].frames，缺省 2）；下面默认那套就是 2 帧的写法。 */
   .work-stage {
     position: relative; flex: 0 0 auto;
     width: 122px; height: 106px;
@@ -335,6 +342,23 @@
     0%, 49.9% { background-position: 0 0; }
     50%, 100% { background-position: -122px 0; }
   }
+  /* 6 帧的姿势（冲刺的头发是程序化生成的 6 帧，见 tools/whale-sway.py）：
+     显示宽度 122×6，关键帧每 1/6 走一格。
+     step-end 会把每一格的值保持到下一格，所以每格只写一个百分比就够。
+     **总时长不动**（还是 POSES[i].flip 秒）：这样腿脚换帧的快慢和 2 帧时一模一样，
+     多出来的帧只是把头发那一趟摆动切得更细。 */
+  .pose[data-frames="6"] {
+    background-size: 732px 106px;
+    animation-name: poseFlip6;
+  }
+  @keyframes poseFlip6 {
+    0%      { background-position: 0 0; }
+    16.667% { background-position: -122px 0; }
+    33.333% { background-position: -244px 0; }
+    50%     { background-position: -366px 0; }
+    66.667% { background-position: -488px 0; }
+    83.333% { background-position: -610px 0; }
+  }
 
   /* 气泡：左边一个小尖角指向立绘。
      宽度**贴着自己的词条**，多长就多宽，右边不留空。
@@ -710,6 +734,23 @@
     margin: 0 0 14px; padding: 8px 12px; border: 1px dashed var(--line);
     border-radius: var(--r); color: var(--muted); font-size: 12.5px; line-height: 1.6;
   }
+  /* 「上面还有更早的」：聊天记录是一屏一屏铺的（见 renderChat 里 CHAT_PAGE 那段）。
+     两处讲究：
+     · **贴在看得到的顶上**（sticky），不随内容走——随内容走就只在滑到顶那一瞬间可见，
+       而那一瞬间正好触发了自动再放一屏，那句话等于永远看不见。
+     · **离顶远了就收起来**（.hide）。用户 2026-09-30 真机提的：都滑到最下面了，
+       它还挂在顶上。那时候上面确实还有没放出来的记录，这句话没说错；但它是催人
+       往上滑的，人已经在底部读内容了，挂在顶上就只剩挡视线。
+     长相照抄底栏的 .chip，不为它新造一种元素。 */
+  .more-note {
+    position: sticky; top: 0; z-index: 1;
+    width: fit-content; margin: 0 auto 14px; padding: 4px 12px;
+    border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2);
+    color: var(--muted); font-size: 12px; line-height: 1.7;
+  }
+  /* 收起来用 visibility 而不是 display：这一条的高度始终留在内容里，
+     露和收之间就不会把下面的消息顶来顶去（那会是一次小跳）。 */
+  .more-note.hide { visibility: hidden; }
 
   /* ---------- 设置抽屉 ---------- */
   #settings {
@@ -781,6 +822,25 @@
      整屏遮住聊天区：手机上一次只专心答一题，答完自动消失。
      之所以遮全屏而不是弹个小条：非技术用户看到"电脑在等你回答"时，
      最怕的是不知道该点哪里；整屏只剩问题本身和按钮，没有第二个选择。 */
+  /* 命令确认（审批）卡。形状与理由都同上面那张答题卡：整屏遮住，只剩「同意 / 拒绝」
+     两个选择。**主题交给令牌决定**——主按钮那一处用的就是「当底的强调色」令牌，
+     面板、文字、描边全沿用现有那几档，所以深色浅色自动都对，不用为两套主题各写一份。
+     （注释里**不写令牌本身那串字**：下面的检查是按"哪一块里出现了它"取材的，
+     注释里写上，这一块就会被当成一条规则，取自一个不存在的选择器。） */
+  #approveCard { position: fixed; inset: 0; z-index: 310; background: var(--bg);
+    display: none; flex-direction: column; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; }
+  #approveCard.on { display: flex; }
+  #approveCard .ahead { font-size: 13px; color: var(--muted); margin-bottom: 12px; }
+  #approveCard .atool { font-size: 18px; line-height: 1.6; margin-bottom: 10px; }
+  #approveCard .areason { font-size: 14px; line-height: 1.65; color: var(--muted); margin-bottom: 16px; white-space: pre-wrap; }
+  /* 命令原文：等宽感靠 1px 细线左边界和缩进，不引新字体；长命令照原样折行。 */
+  #approveCard .acmd { font-size: 13px; line-height: 1.55; color: var(--muted); margin-bottom: 16px;
+    white-space: pre-wrap; word-break: break-all; border-left: 2px solid var(--line); padding-left: 10px; }
+  #approveCard .afoot { margin-top: auto; display: flex; gap: 10px; padding-top: 16px; }
+  #approveCard .afoot button { flex: 1; padding: 15px 8px; font-size: 16px; border-radius: var(--r);
+    border: 1px solid var(--line); background: var(--panel-2); color: inherit; font-family: inherit; }
+  /* 这一屏唯一的主按钮走 --act：深色下暖金，浅色下宝蓝配白字。 */
+  #approveCard .afoot button#approveAllow { background: var(--act); border-color: var(--act); color: var(--on-act); font-weight: 600; }
   #askCard { position: fixed; inset: 0; z-index: 300; background: var(--bg);
     display: none; flex-direction: column; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); overflow-y: auto; }
   #askCard.on { display: flex; }
@@ -841,6 +901,19 @@
     <button id="askNext" type="button">下一题</button>
   </div>
 </div>
+<!-- 电脑要做需要拍板的事时弹出来的审批卡。默认隐藏，收到 approval 事件才显示。
+     命令原文来自会话事件 tool/call 的 arguments（模型原样产出的 JSON），
+     插件按调用编号记着，审批来的时候一起推过来。 -->
+<div id="approveCard">
+  <div class="ahead">电脑被拦下来了，等你拍板</div>
+  <div class="atool" id="approveTool"></div>
+  <div class="areason" id="approveReason"></div>
+  <div class="acmd" id="approveCmd"></div>
+  <div class="afoot">
+    <button id="approveDeny" type="button">拒绝</button>
+    <button id="approveAllow" type="button">同意</button>
+  </div>
+</div>
 
 <header>
   <button class="icon-btn" id="btnNav" aria-label="工作区与会话"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M3 6h18M3 12h18M3 18h18"/></svg></button>
@@ -925,7 +998,7 @@
     <div class="row">
       <div>
         <div class="label">显示模式</div>
-        <div class="hint">单帧：只留最新一条回复</div>
+        <div class="hint" id="hintMode">单帧：只留最新一条回复</div>
       </div>
       <div class="seg" id="segMode">
         <button data-mode="minimal">单帧</button>
@@ -938,7 +1011,6 @@
     <div class="row">
       <div>
         <div class="label">外观</div>
-        <div class="hint">浅色的色调跟宣传图一致</div>
       </div>
       <div class="seg" id="segTheme">
         <button data-theme="dark">深色</button>
@@ -1138,6 +1210,24 @@
   // 认不出来的语法原样留着：宁可少渲染，不能吃掉内容。
   var CODE_SLOT = '\u0000';
 
+  /**
+   * 正文里的图片地址 → 真正去取的地址。三种写法见下面 mdInline 那段注释。
+   *
+   * 判据只有一条：**不是 http(s) 就走同源**。所以 `javascript:`、`data:` 这类
+   * 永远不会出现在 src 里；认不出的地址最多是取回来 404，不会变成别的东西。
+   *
+   * 放在这里而不是立绘那一段（artUrl 旁边）：页面测试是从 escapeHtml 抠到复制按钮
+   * 那一小段的，放外面就测不到真代码了。
+   */
+  function imageSrc(src) {
+    if (/^https?:\/\//i.test(src)) return src;
+    var name = src.replace(/\\/g, '/').replace(/^\.\//, '');
+    if (/^lib\/art\//i.test(name)) name = name.slice(8);
+    if (/^[a-z0-9-]+(\.webp)?$/i.test(name)) return artUrl(name.replace(/(\.webp)?$/i, ''));
+    return '/mini/art/?p=' + encodeURIComponent(src)
+      + '&token=' + encodeURIComponent(state.token);
+  }
+
   function mdInline(raw) {
     // 行内代码先挖出来换成占位符。不这么做的话，`**x**` 这种字面量
     // 会被后面的粗体规则吃掉，代码里写的东西就显示错了。
@@ -1147,16 +1237,18 @@
       return CODE_SLOT + (codes.length - 1) + CODE_SLOT;
     });
     out = out
-      // 图片：![说明](地址)。地址两种写法——
+      // 图片：![说明](地址)。地址三种写法，判断在 imageSrc 里——
       //   ① 完整 http(s) 链接：原样用，手机直接去那个网站取图；
-      //   ② 一个名字：走本机的图片通道 /mini/art/<名字>.webp，跟立绘同一条路、
-      //      同一样要密码，也只认 lib/art/ 下「小写字母数字连字符 + .webp」的文件名。
-      //      想让手机看到电脑上的图，把图放进 lib/art/、名字以 out- 开头即可。
+      //   ② 一个名字（如 out-demo，`.webp` 可带可不带）：走立绘通道 /mini/art/<名字>.webp，
+      //      只认 lib/art/ 下「小写字母数字连字符 + .webp」的文件名；写成
+      //      `lib/art/out-demo.webp` 这样带前缀的也认（2026-09-28 助手这么写过，手机上成了破图标）；
+      //   ③ 电脑上一张图的位置（绝对路径，或相对项目根）：走 /mini/art/?p=…，PNG/JPG/WEBP/GIF 都行，
+      //      不要求先拷进 lib/art。
+      // 三者之外的一律按 ③ 拼成同源路径，所以 `javascript:`、`data:` 这类进不了 src。
       // 必须排在下面那条链接规则前面：否则 `![x](y)` 里的 `[x](y)` 会先被链接规则
       // 吃掉，只剩下一个光秃秃的感叹号。
       .replace(/!\[([^\]]*)\]\(([^)\s]+)\)/g, function (_, alt, src) {
-        var url = /^https?:\/\//.test(src) ? src : artUrl(src.replace(/\.webp$/, ''));
-        return '<img class="md-img" src="' + url + '" alt="' + alt + '"'
+        return '<img class="md-img" src="' + imageSrc(src) + '" alt="' + alt + '"'
           + ' loading="lazy" referrerpolicy="no-referrer">';
       })
       .replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>')
@@ -1324,6 +1416,22 @@
     return p(d.getHours()) + ':' + p(d.getMinutes());
   }
   var toastTimer;
+  /**
+   * 图片没加载出来时要说一声。
+   *
+   * 手机页认三种图片地址：完整的 http(s) 网址、一个裸名字（页面拼成 /mini/art/<名字>.webp），
+   * 或者一张图在电脑上的路径（绝对路径或相对项目根）。三种都认不出来、或者那个文件根本不在，
+   * 浏览器只会画一个破图标——用户看到的是"图没了"，却不知道原因（2026-09-28 他为此来过三次）。
+   *
+   * 为什么挂**捕获**阶段：图片的 error 事件不冒泡，挂冒泡阶段一个也收不到。
+   */
+  document.addEventListener('error', function (e) {
+    var el = e.target
+    if (!el || el.tagName !== 'IMG' || !el.classList || !el.classList.contains('md-img')) return
+    el.classList.add('md-img-bad')
+    toast('这张图手机看不到：那个位置没有这张图，或者它不是 PNG/JPG/WEBP/GIF')
+  }, true)
+
   function toast(msg) {
     var el = $('toast');
     el.textContent = msg;
@@ -1404,7 +1512,8 @@
   // 被用户指着问「这一句有问题还是什么」，已改掉。测试钉着这条：见 page.test.mjs
   // 的「鲸鱼娘说的话里不许出现让人以为出事的字眼」。
   //
-  // 每个姿势是一张「两帧并排」的雪碧图，flip 是翻帧的间隔（秒）：
+  // 每个姿势是一张「并排若干帧」的雪碧图，flip 是**走完一整圈翻帧**的秒数
+  // （代码里它就是 animation-duration：两帧时每帧占 flip/2，六帧时每帧占 flip/6）：
   // 敲键盘和小跑要快，端着茶等和托腮想事情要慢。节奏跟着动作走，才不像机器在闪。
   var POSES = [
     { file: 'work-1-ready', line: '收到，这就去办', flip: 0.5 },
@@ -1417,7 +1526,10 @@
     // 只说自己在看，不下判断。
     { file: 'work-4-checking', line: '让我检查检查', flip: 1.2 },
     { file: 'work-5-thinking', line: '嗯…让我想想', flip: 1.7 },
-    { file: 'work-6-running', line: '跑一遍看看', flip: 0.4 },
+    // 跑从 2026-09-28 起是 6 帧：先把两帧画出来的头发摆动收小（甩幅 155.3 → 70.6），
+    // 再用 tools/whale-sway.py 把这一趟切成六帧（甩幅 74.9），身体逐像素不动。
+    // 时长仍是 flip 秒、不乘帧数，所以腿脚换帧的快慢和两帧时一模一样，六帧只是把头发那一趟切得更细。
+    { file: 'work-6-running', line: '跑一遍看看', flip: 0.4, frames: 6 },
     // 用户 2026-09-22 要的「跑步的动作」。它**不是第 8 个姿势，而是姿势之间的过渡**：
     // 序列是「姿势1 → 冲刺 → 姿势2 → 冲刺 → …」，表达「她干完一件、跑去干下一件」。
     // 所以它带 gap: true——不进轮播循环，只在每个姿势后面闪一下。
@@ -1425,8 +1537,14 @@
     // 但用户两次要求拉长，现在 GAP_MS 和 POSE_MS 一样是 3.6 秒。理由见 GAP_MS 的注释。
     // 它和上面那张小跑**刻意画得不一样**：侧面视角、身体前倾、步子拉得更开。
     // **不带词条**（line 是空串）——用户指定的，冲刺是纯动作，硬配一句话反而弱。
-    // 文件名里的 8 只是个名字，**顺序由数组决定**，别拿它当序号。
-    { file: 'work-8-sprinting', line: '', flip: 0.28, gap: true },
+    // 文件名里的 8 只是个名字，**顺序由数组决定**，别拿它当序号。 */
+    // **帧数 6（2026-09-29）**：原来只有 2 帧，头发只能整个姿势硬切过去。2 帧的摆动
+    // 没法"流畅"——两帧之间没有中间态。现在这 6 帧的头发是拿冻结基准帧当底、
+    // 用位移场程序化算出来的（tools/whale-sway.py），身体逐像素不动：
+    // 越靠发梢摆得越大、相位越滞后，采样一个周期得到 6 帧。摆幅默认 15 像素、
+    // 相位滞后 300°，量出来的甩幅 128.9（用户给的目标区间 110~140）。
+    // **它只解决头发**：身体和腿仍然是那两帧，跑起来腿脚还是瞬间换的。
+    { file: 'work-8-sprinting', line: '', flip: 0.28, gap: true, frames: 6 },
     // 最后一个只在任务真的跑够久了才进轮播——到那时候说这句话才是实话。
     // **它必须留在最后**：posePool 用的是 POSES.length - 1，靠位置认它。
     { file: 'work-7-waiting', line: '还在忙，再等我一会儿', flip: 2.0 }
@@ -1609,6 +1727,9 @@
     for (var i = 0; i < POSES.length; i += 1) {
       var layer = document.createElement('div');
       layer.className = 'pose';
+      // 帧数决定显示宽度和用哪套关键帧（CSS 里 2 帧是默认，6 帧挂在 [data-frames="6"]）。
+      // **时长不跟着帧数放大**：一圈还是 flip 秒，这样腿脚换帧的快慢跟以前一样。
+      layer.setAttribute('data-frames', POSES[i].frames || 2);
       layer.style.backgroundImage = 'url("' + artUrl(POSES[i].file) + '")';
       layer.style.animationDuration = POSES[i].flip + 's';
       stage.appendChild(layer);
@@ -1621,6 +1742,7 @@
     // 说话那张一起建好、一起预热：等台词来了再新建图层，会说第一个字之前先闪一下空白。
     var speak = document.createElement('div');
     speak.className = 'pose';
+    speak.setAttribute('data-frames', SPEAK_POSE.frames || 2);
     speak.style.backgroundImage = 'url("' + artUrl(SPEAK_POSE.file) + '")';
     speak.style.animationDuration = SPEAK_POSE.flip + 's';
     stage.appendChild(speak);
@@ -1754,6 +1876,18 @@
       });
   }
 
+
+  /** 手机把审批结论交回电脑。三种结果和上面那条一样：成了 / 晚了 / 没送出去。 */
+  function sendApproval(id, allow) {
+    return api('/mini/api/approval', {
+      method: 'POST',
+      body: JSON.stringify({ id: id, decision: allow ? 'allow' : 'deny' }),
+    })
+      .then(function () { return 'ok'; })
+      .catch(function (err) {
+        return err && err.status === 409 ? 'late' : 'failed';
+      });
+  }
   // ---------------- 排队中的指令 ----------------
   //
   // 跑着任务时接着发的那几条不会丢，而是排进 agent 的收件箱（`followup()` 的语义
@@ -1807,9 +1941,15 @@
   }
 
   $('queue').addEventListener('click', function (e) {
-    var t = e.target;
-    var id = t && t.getAttribute ? t.getAttribute('data-drop') : null;
-    if (id) requestUnqueue(id);
+    // **必须从被点的元素往上找到那个真按钮。** ✗ 是画在按钮里面的 SVG 图形，手指落上去
+    // 时 e.target 是图形本身，读不到按钮身上的编号。用户 2026-09-28 实机报「排队框的 ✗
+    // 点了没反应」就是这么来的：旧写法 `e.target.getAttribute('data-drop')` 拿到 null，
+    // 然后静默什么都不做。按钮只有 24×24、图形 12×12，所以旧写法几乎必然踩中。
+    var hit = e.target && e.target.closest ? e.target.closest('.q-drop') : null;
+    var id = hit ? hit.getAttribute('data-drop') : null;
+    if (id) { requestUnqueue(id); return; }
+    // 找到了按钮却没有编号：这是代码毛病。说一声，别静默——静默失败是最难查的那一类。
+    if (hit) toast('这条撤不了：没带上编号');
   });
 
   /** 让「正在执行」那块跟着 state.running 显隐。 */
@@ -2042,11 +2182,72 @@
     if (!el || typeof el.getBoundingClientRect !== 'function') return;
     if (typeof mainEl.getBoundingClientRect !== 'function') return;
     var gap = el.getBoundingClientRect().top - mainEl.getBoundingClientRect().top;
+    // 这里**不用**为顶上那颗「往上滑看更早的」让高度：对齐开头只在「他本来就在底部」
+    // 的时候做（见 scrollChat），而那时候那颗提示是收着的（见 chatNoteVisible）——
+    // 让高度反而会凭空多出一段空白。
     mainEl.scrollTop += gap - 12;
   }
 
+  /**
+   * 聊天记录**一次铺多少条**，以及这次已经铺到多少条。
+   *
+   * 用户 2026-09-30 报的：在导航栏点一个没选中的会话，切过去很慢。查下来不是网络、
+   * 也不是服务端取数（本机实测那三个接口 168 / 36 / 107 毫秒），而是这一页**一次把
+   * 推上来的 200 条记录全铺出来**。这 200 条本来就已经在页面手里了——所以「往上多放
+   * 一点」是个纯本地动作，不用再问服务端，也该是瞬时的。
+   *
+   * 40 这个数：一屏通常放得下三到五段长回答，40 条够铺六七屏；首屏只干五分之一的活，
+   * 而往上翻的人一次也就看一屏，翻不到边界。
+   */
+  var CHAT_PAGE = 40;
+  var chatWindow = CHAT_PAGE;   // 从最新那条往回数，这次铺了多少条
+  var chatWindowFor = null;     // 上面这个数是哪个会话的（换会话要收回首屏，见 renderChat）
+  var chatLoaded = 0;           // 本地一共有多少条可铺（滤掉排队那条之后），由 renderChat 记
+  var chatGrowArmed = true;     // 这一轮靠近顶部已经放过一屏没有（见 maybeGrowChat）
+
+  /** 触发线：离顶一屏的四分之一以内。放一屏和那颗提示共用这一条，别写成两个数。 */
+  function chatEdge() {
+    return Math.min(160, Math.max(60, (mainEl.clientHeight || 0) / 4));
+  }
+
+  /** 顶上那颗「往上滑看更早的」的元素（没铺出来就没有）。 */
+  function moreNoteEl() {
+    return replyEl.querySelector ? replyEl.querySelector('.more-note') : null;
+  }
+
+  /**
+   * 那句提示现在该不该露脸：**近了顶部、又不在底部**。
+   *
+   * 两个条件缺一不可——
+   *   · 离顶远了它就没用：再往上滑一下就自动放一屏，用不着它催；
+   *   · 在底部时它必须收起来（用户 2026-09-30 真机提的那条）：那句话是催人往上滑的，
+   *     人已经在最底下读内容了，它挂在那儿只剩挡视线。
+   */
+  function chatNoteVisible() {
+    if (atBottom()) return false;
+    return mainEl.scrollTop <= chatEdge();
+  }
+
+  /**
+   * 把提示的露 / 收跟当前位置对齐。
+   *
+   * 这是**滚动时**的那一半。重画只在快照来的时候发生，而用户从中间一路滑到底
+   * 是不会等快照的——不在滚动里收，那条提示就会一直挂在顶上（真机就是这么发现的）。
+   */
+  function paintChatNote() {
+    var el = moreNoteEl();
+    if (!el || !el.classList || typeof el.classList.toggle !== 'function') return;
+    el.classList.toggle('hide', !chatNoteVisible());
+  }
+
   function renderChat() {
     mainEl.classList.remove('center');
+    // 换了会话就把窗口收回首屏：上一个会话铺到多少条都不该跟过来——那正是这次要修的慢。
+    // 判据用会话 id 而不是 history 的引用：服务端每次推的都是整份新数组，比引用永远「变了」。
+    if (chatWindowFor !== state.boundSessionId) {
+      chatWindowFor = state.boundSessionId;
+      chatWindow = CHAT_PAGE;
+    }
     // **还在排队的那条不算「已发出」，这里要把它从聊天记录里滤掉。**
     //
     // 用户 2026-09-22 实机提的：「排队的指令在轮到之前不该出现在指令气泡里，
@@ -2064,6 +2265,9 @@
     var list = (state.history || []).filter(function (m) {
       return !(m.role === 'user' && m.id && queuedIds[m.id]);
     });
+    // 先记「本地一共有多少条」再分支：下面那条「还没有对话记录」的路也要把数记成 0，
+    // 不然中途清空一次（服务端正在重读）会留着一个旧的条数，让 maybeGrowChat 白忙一场。
+    chatLoaded = list.length;
     if (!list.length && !state.running && !state.live && !(state.queued || []).length) {
       // 「正在读」和「确实没有」是两件事，分开说。点开一个插件没看过的会话时，
       // 服务端要去 DSH 的会话记录里读它那一段（最大的那条 20 MB、约半秒），
@@ -2073,6 +2277,10 @@
         : '<div class="placeholder">还没有对话记录。</div>';
       return;
     }
+    // **只铺最近那几十条**，剩下的留在手里等用户往上滑（来由见 CHAT_PAGE 那段）。
+    // 切在**滤掉排队那条之后**：不然被滤掉的那条会白占一个名额。
+    var older = Math.max(0, chatLoaded - chatWindow);
+    if (older) list = list.slice(older);
     var html = list.map(function (m) {
       // 指令行：这是会话做的一个动作，不是谁说的话，单独一种长相——
       // 不套气泡、不给复制按钮（见 commandBlock 的说明）。
@@ -2097,6 +2305,12 @@
         + '<div class="reply-foot">' + copyBtn
         + '<span class="time">' + timeLabel(m.timestamp) + '</span></div></div>';
     }).join('');
+    // 「上面还有，往上滑」要贴在**看得到的顶上**，而且**离顶远了就收起来**——
+    // 两处讲究见 .more-note 的样式注释。露 / 收在这里先按当前位置定一次，
+    // 之后由滚动里的 paintChatNote 接着跟。
+    var moreNote = older
+      ? '<div class="more-note' + (chatNoteVisible() ? '' : ' hide') + '">往上滑看更早的</div>'
+      : '';
     // 「这不是全部」要说在**内容前面**：用户往上翻到顶时，第一眼看到的就是它，
     // 免得以为这个会话只有这么点内容。读历史有上限（见服务端 HISTORY_MAX_*）。
     if (state.historyTruncated) {
@@ -2109,10 +2323,57 @@
     if (state.live) html += liveBlock(state.live);
     // 先问「在不在底部」，再改内容——顺序反了永远是「在」（见 atBottom 的注释）。
     var stick = atBottom();
-    replyEl.innerHTML = html;
+    replyEl.innerHTML = moreNote + html;
     scrollChat(stick);
   }
 
+  /**
+   * 往上滑到接近顶部，就再放一屏出来。
+   *
+   * 判据是「离顶部一屏的四分之一以内」，不要求真滑到 0：手机上惯性滚动会滑过头，
+   * 卡在 0 反而要等一次回弹才触发。60 是下限（矮屏上四分之一太小，拇指一带就滑过），
+   * 160 是上限（高屏上别放得太早，太早等于提前干了下一屏的活）。
+   */
+  function maybeGrowChat() {
+    // 单帧模式那边也在往 main 上滚（回答落定要跳到页面顶端），别把那一下当成「他在往上翻」；
+    // 本地都放完了也没什么可放的。
+    if (state.mode !== 'chat' || chatLoaded <= 0) return;
+    if (chatWindow >= chatLoaded) return;
+    if (mainEl.scrollTop > chatEdge()) {
+      // 滑下来了，这一轮重新装填：**一次靠近只放一屏**。
+      // 不装填的话，万一位置校正没顶住（iOS 顶上那截橡皮筋会把人拽回 0），
+      // 一次手势就能把 200 条连着放完——那正好把这个改动白做了。
+      chatGrowArmed = true;
+      return;
+    }
+    if (!chatGrowArmed) return;
+    chatGrowArmed = false;
+    growChat();
+  }
+
+  /** main 每一次滚动：先对齐那句提示的露 / 收，再看要不要再放一屏。 */
+  function onMainScroll() {
+    paintChatNote();
+    maybeGrowChat();
+  }
+
+  /**
+   * 往前多放一屏。纯本地动作：那些记录本来就在页面手里，不再问服务端。
+   *
+   * **放完必须立刻把位置校回来**，这是整件事最容易做坏的一步：往前面插内容，
+   * 浏览器不会替你补偿，用户正看着的那一屏会被整个推下去一屏。
+   *
+   * 补偿用「离底部多远」：这次加的东西全在顶上，底部那一截一个字没动，
+   * 所以只要这个距离不变，他眼前那几行就一格都不会走。别去量「原来那条消息」的
+   * 矩形来对齐——重画是整块换 innerHTML，那条消息已经不在文档里了，量不着。
+   */
+  function growChat() {
+    var fromBottom = mainEl.scrollHeight - mainEl.scrollTop;
+    chatWindow += CHAT_PAGE;
+    renderChat();
+    mainEl.scrollTop = mainEl.scrollHeight - fromBottom;
+  }
+
   /**
    * 聊天模式里「已经为哪一次回答把开头对齐到顶部」。
    *
@@ -2180,7 +2441,8 @@
   }
 
   function render() {
-    if (state.mode === 'chat') renderChat(); else renderMinimal();
+    $('hintMode').textContent = state.mode === 'chat' ? '聊天：常规问答对话' : '单帧：只留最新一条回复';
+      if (state.mode === 'chat') renderChat(); else renderMinimal();
   }
 
   function applySnapshot(snap) {
@@ -2502,6 +2764,24 @@
       });
   }
 
+  // 标题补齐的节奏。服务端只等 250 毫秒就把列表先给出来（超时的标题留给后台），
+  // 所以这里要接着问。**问几次由服务端说了算**，见 toggleWorkspace 里的说明。
+  var TITLE_FOLLOW_MS = 2500;        // 每隔这么久问一次
+  var TITLE_FOLLOW_LIMIT_MS = 30000; // 从展开算起，最多追这么久
+
+  /**
+   * 这份列表「还剩几条标题没读出来」。
+   *
+   * 优先用服务端给的 pending：那是事实（它知道还有几条日志没读完）。
+   * **服务端没给这个字段时才退回数空标题**——那是「改了要重启」的半新状态下
+   * （新页面配旧进程）唯一能用的判据。旧页面就是靠它补拉三次的，
+   * 退回去至少有原来的效果，不会因为服务端换了版本就反而不追了。
+   */
+  function pendingCount(body) {
+    if (body && typeof body.pending === 'number') return body.pending;
+    return ((body && body.sessions) || []).filter(function (s) { return !s.title; }).length;
+  }
+
   function toggleWorkspace(wsId) {
     if (navExpanded[wsId]) {
       delete navExpanded[wsId];
@@ -2511,10 +2791,37 @@
     navExpanded[wsId] = true;
     renderNav();
     if (navSessions[wsId]) return;
+    /**
+     * 接着问，直到服务端说「一条都不剩」。
+     *
+     * 原来的写法是**固定补三次**（1.5 秒 / 3 秒 / 3 秒，共 7.5 秒），而一个工作区里
+     * 四五个冷会话实测要 19 秒才读完——三次补拉盖不住，标题就是长不出来，
+     * 用户只能退出去再进来。现在按服务端给的事实问：pending 归零就停。
+     *
+     * 30 秒是总时限：万一有一条日志坏了、永远读不出来，也不该没完没了地问下去。
+     */
+    function followTitles(cur, deadline) {
+      if (!(pendingCount(cur) > 0) || Date.now() >= deadline) return;
+      setTimeout(function () {
+        // 用户收起了、或者这份数据已经被刷新换掉，就放手：别跟人抢。
+        if (navSessions[wsId] !== cur || !navExpanded[wsId]) return;
+        api('/mini/api/workspaces/' + encodeURIComponent(wsId) + '/sessions')
+          .then(function (body) {
+            if (navSessions[wsId] !== cur || !navExpanded[wsId]) return;
+            navSessions[wsId] = body;
+            renderNav();
+            followTitles(body, deadline);
+          })
+          .catch(function () {
+            // 追不到就算了：列表本身还在，日期也够用。
+          });
+      }, TITLE_FOLLOW_MS);
+    }
     api('/mini/api/workspaces/' + encodeURIComponent(wsId) + '/sessions')
       .then(function (body) {
         navSessions[wsId] = body;
         renderNav();
+        followTitles(body, Date.now() + TITLE_FOLLOW_LIMIT_MS);
       })
       .catch(function (err) {
         navSessions[wsId] = { sessions: [], total: 0 };
@@ -2781,6 +3088,44 @@
         if (verdict === 'late') toast('这道题已经交回电脑了，去电脑上答')
       })
     })
+    // ——— 命令确认（审批）———
+    //
+    // 电脑要做需要拍板的事时，插件推一条 `approval` 过来，点了卡上的按钮再 POST 回
+    // /mini/api/approval。和答题卡同样的三条讲究：没送出去就不收卡片（收掉了就再也
+    // 没地方说这句话，用户看到的只会是"点了没反应"）；三种结果说三句不同的话；
+    // 只认有 id 的帧，别的形状一律不理。
+    let approve = null
+    function approveShow(payload) {
+      approve = { id: payload.id }
+      $('approveTool').textContent = '它要让「' + (payload.toolName || '某个工具') + '」动手'
+      $('approveReason').textContent = payload.reason || ''
+      $('approveReason').style.display = payload.reason ? '' : 'none'
+      // 命令原文：有就照原样显示。**没有就明说"没取到"，不静默藏起来**——
+      // 用户要的就是看见命令，藏起来等于骗他；真没取到时他也一眼看得出是这条链没走通。
+      $('approveCmd').textContent = payload.command || '（这条没取到命令原文）'
+      $('approveCard').classList.add('on')
+    }
+    function approveDecide(allow) {
+      if (!approve) return
+      const id = approve.id
+      sendApproval(id, allow).then(function (verdict) {
+        if (verdict === 'failed') {
+          toast('没送出去，看一眼和电脑的连接，再点一次')
+          return
+        }
+        approve = null
+        $('approveCard').classList.remove('on')
+        if (verdict === 'late') toast('这条已经交回电脑了，去电脑上处理')
+      })
+    }
+    $('approveAllow').addEventListener('click', function () { approveDecide(true) })
+    $('approveDeny').addEventListener('click', function () { approveDecide(false) })
+    es.addEventListener('approval', function (e) {
+      let payload = null
+      try { payload = JSON.parse(e.data) } catch (err) { return }
+      if (!payload || !payload.id) return
+      approveShow(payload)
+    });
     es.addEventListener('question', function (e) {
       let payload = null
       try { payload = JSON.parse(e.data) } catch (err) { return }
@@ -3306,6 +3651,7 @@
   Array.prototype.forEach.call($('segMode').children, function (btn) {
     btn.addEventListener('click', function () {
       state.mode = btn.dataset.mode;
+        $('hintMode').textContent = state.mode === 'chat' ? '聊天：常规问答对话' : '单帧：只留最新一条回复';
       localStorage.setItem('dshMiniMode', state.mode);
       syncSeg();
       render();
@@ -3569,6 +3915,28 @@
     connect();
   }
 
+  /**
+   * 服务器换过代码就自己刷新一次。
+   *
+   * 为什么非要有：这个页面是**启动时读进内存**才发出去的（改了要重启 DSH），而立绘是
+   * **每次请求现读盘**的（文件一改就生效）。于是"页面和图不是同一时刻换的"这件事真的
+   * 会发生——2026-09-29 用户在手机上看到「原来的两条腿变成 4 条腿了」：手里那份页面还是
+   * 旧的（写死按两格、244 像素宽去切），硬盘上的图已经是六格的了，122 像素的窗口里于是
+   * 挤进三个压扁的小人，看着就是一堆腿。
+   *
+   * `/mini/api/version` 报的是**服务器现在这份代码**的构建号：和手里这份一样就什么都不做，
+   * 不一样说明页面过期了，刷一次就好（刷新后拿到的新页面自带正确的切帧规则）。
+   * **正在打字就先不刷**——用户没发出去的话不能被吞掉，等下一轮再说。
+   */
+  function watchBuild() {
+    if (!state.token) return;
+    api('/mini/api/version').then(function (r) {
+      if (!r || !r.build || r.build === BUILD) return;
+      if (inputEl.value && inputEl.value.trim()) return;
+      location.reload();
+    }).catch(function () { /* 读不到就当没这回事，别把页面弄崩 */ });
+  }
+
   // 复制按钮：整篇、单条气泡、代码块共用一套。
   // 用事件委托——回复区每次都是整块重绘的，逐个绑会漏。
   // （原来这里是「点回复区任意位置复制全文」，它直接用了 navigator.clipboard，
@@ -3581,6 +3949,13 @@
     copyText(btn.getAttribute('data-copy') || '', btn);
   });
 
+  // main 的滚动：一句提示的露 / 收，和「再放一屏」，都挂在这一根线上（见 onMainScroll）。
+  // **这根线不能省**：逻辑写得再对，没挂上去就是「一点反应都没有」，
+  // 而这种坏光看代码是看不出来的。
+  // 位置也有讲究：绑在这里，不绑在 atBottom 那片函数旁边——页面测试会把那一段
+  // 整块抠出来求值，测试里的假 mainEl 没有 addEventListener，写在那边好几个测试当场报错。
+  mainEl.addEventListener('scroll', onMainScroll);
+
   // ---------------- 启动 ----------------
   syncSeg();
   autoGrow();
@@ -3614,6 +3989,8 @@
 
     var catalog = null  // 服务端给的模型目录
     var current = null  // 服务端记的当前选择 {provider, model, reasoningEffort}
+    // 上下文窗口用量 {used, window}，服务端给。取不到就是 null——那时整段不显示。
+    var contextUsage = null
     // 刚改完、服务端还没确认的那个值。为什么要多这一个：服务端记的「当前模型」是在
     // **下一次请求**时才更新的，所以改完立刻回头去读，读到的还是旧名字。先信
     // set-model 的返回值，等服务端追上了再让它接管。
@@ -3626,6 +4003,21 @@
       for (var i = 0; i < gs.length; i++) { if (gs[i].id === id) return gs[i].name }
       return id || ''
     }
+    /**
+     * 上下文用量那一句人话。**不编**：分子分母缺任一个就返回空串，界面据此整段不显示
+     * （和「模型：还没问到」同一条口径——不知道就说不知道，不拿别的数凑）。
+     *
+     * 超过 100% 时按 100% 显示：它是"下一次请求大概要花多少"，压不压缩由电脑决定；
+     * 把 105% 端给用户，只会让人以为哪里出错了。
+     */
+    function contextLabel(used, capacity) {
+      if (typeof used !== 'number' || typeof capacity !== 'number') return ''
+      if (!(used > 0) || !(capacity > 0)) return ''
+      var pct = Math.round(used / capacity * 100)
+      if (pct > 100) pct = 100
+      return pct + '%'
+    }
+
     function sel() { return pending || current || null }
 
     function renderBar() {
@@ -3640,6 +4032,9 @@
       // 来源名要用 DSH 给的那个（「DeepSeek」「opencode go」「mimo」），不是内部 id
       var parts = [groupName(s.provider), s.model]
       if (s.reasoningEffort) parts.push('思考 ' + s.reasoningEffort)
+      // 上下文用得怎么样。取不到就什么都不加——不显示 0%，也不写"未知"占位。
+      var ctxText = contextLabel(contextUsage && contextUsage.used, contextUsage && contextUsage.window)
+      if (ctxText) parts.push(ctxText)
       text.textContent = parts.join(' · ')
       bar.style.display = 'flex'
     }
@@ -3762,6 +4157,9 @@
           // 目录那个默认值等于「上一次选过的模型」，于是用户切到一个用别的模型的
           // 会话，顶栏显示的还是上一个模型——一个像模像样的错答案，比空着坏得多。
           current = (d.current && d.current.model) ? d.current : null
+          // 用量跟着模型一起回来（同一条接口）。**不校验内容**：给它什么显示什么，
+          // 拿不准的由下面那个纯函数挡掉。刷新频率就是这一条接口的频率（15 秒一次）。
+          contextUsage = d.context || null
           // 服务端追上了就撤掉本地那个临时值，之后一律以服务端的为准
           if (pending && current && current.provider === pending.provider
               && current.model === pending.model) pending = null
@@ -3792,6 +4190,12 @@
     // 显示一个过期的模型名比不显示更糟——用户会以为自己改的没生效。
     setInterval(function () { if (!document.hidden) load() }, 15000)
     document.addEventListener('visibilitychange', function () { if (!document.hidden) load() })
+    // 上面那个轮询管"显示的东西新不新"，这个管"**手里这份页面**是不是过期了"——
+    // 插件重启过就要刷一次，不然页面会拿着旧的切帧规则去切新的立绘（见 watchBuild 注释）。
+    // 30 秒的间隔够用：它防的是"重启之后一直拿着旧页面"，不是实时性。
+    setInterval(watchBuild, 30000)
+    // 手机把页面挂到后台时定时器会被压住，切回来那一刻补一次检查。
+    document.addEventListener('visibilitychange', function () { if (!document.hidden) watchBuild() })
   })();
 })();
 </script>