@konnga/dsh-hud 0.8.0 → 0.9.1

package/lib/client.js

@@ -120,6 +120,37 @@ window.__ModuleLoader__.load({
       "diff.copied": "已复制",
       "diff.empty": "这一侧没有差异",
       "diff.binary": "二进制文件，没有可显示的文本差异",
+      // ── 图片预览（二进制改动里认得出的那几种） ──
+      "image.loading": "读取图片…",
+      "image.pair": "并排",
+      "image.flip": "切换",
+      "image.beforeWorktree": "索引",
+      "image.afterWorktree": "工作区",
+      "image.beforeIndex": "HEAD",
+      "image.afterIndex": "索引",
+      "image.beforeCommit": "父提交",
+      "image.afterCommit": "这次提交",
+      "image.dims": "{w}×{h}",
+      "image.dimsChanged": "尺寸 {from} → {to}",
+      "image.tooLarge": "超过 {limit} MB 预览上限（{size}）",
+      "image.notImage": "不是可预览的图片（{size}）",
+      "image.missing": "这一侧没有这个文件",
+      "image.zoomOut": "缩小",
+      "image.zoomIn": "放大",
+      "image.fitWidth": "适应宽度",
+      "image.zoomValue": "{percent}%",
+      // ── 会话计时胶囊 ──
+      "timer.title": "本次会话运行时长",
+      "timer.created": "创建于 {time}",
+      "timer.work": "其中模型 {llm}、工具 {tool}",
+      "timer.turns": "{turns} 轮 / {steps} 步",
+      // ── Session timer capsule ──
+      // ── 轮尾的「本轮图片改动」条 ──
+      "turnImages.title": "本轮图片改动",
+      "turnImages.titleSession": "本会话图片改动",
+      "turnImages.open": "在内置预览里打开",
+      "turnImages.compare": "在 dsh-hud 里前后对比",
+      "turnImages.more": "还有 {n} 个",
       "diff.truncated": "差异过大，仅显示前面部分",
       "diff.untrackedHint": "未跟踪文件，与空文件对比",
       "diff.commitHint": "这次提交相对其父提交的差异（只读）",
@@ -231,6 +262,36 @@ window.__ModuleLoader__.load({
       "diff.copied": "Copied",
       "diff.empty": "No changes on this side",
       "diff.binary": "Binary file — no text diff to show",
+      // ── Image preview (binary changes we can recognise) ──
+      "image.loading": "Reading image…",
+      "image.pair": "Side by side",
+      "image.flip": "Flip",
+      "image.beforeWorktree": "index",
+      "image.afterWorktree": "worktree",
+      "image.beforeIndex": "HEAD",
+      "image.afterIndex": "index",
+      "image.beforeCommit": "parent",
+      "image.afterCommit": "this commit",
+      "image.dims": "{w}×{h}",
+      "image.dimsChanged": "size {from} → {to}",
+      "image.tooLarge": "over the {limit} MB preview limit ({size})",
+      "image.notImage": "not a previewable image ({size})",
+      "image.missing": "not present on this side",
+      "image.zoomOut": "Zoom out",
+      "image.zoomIn": "Zoom in",
+      "image.fitWidth": "Fit width",
+      "image.zoomValue": "{percent}%",
+      // ── Session timer capsule ──
+      "timer.title": "This session's running time",
+      "timer.created": "started {time}",
+      "timer.work": "model {llm}, tools {tool}",
+      "timer.turns": "{turns} turns / {steps} steps",
+      // ── Turn-tail "images this turn" strip ──
+      "turnImages.title": "Images this turn",
+      "turnImages.titleSession": "Images this session",
+      "turnImages.open": "Open in the built-in preview",
+      "turnImages.compare": "Compare before/after in dsh-hud",
+      "turnImages.more": "{n} more",
       "diff.truncated": "Diff is large; showing the beginning only",
       "diff.untrackedHint": "Untracked file, diffed against an empty file",
       "diff.commitHint": "What this commit changed against its parent (read-only)",
@@ -321,11 +382,14 @@ window.__ModuleLoader__.load({
       added: "var(--dsw-alias-state-success-primary, #3fb950)",
       deleted: "var(--dsw-alias-state-error-primary, #f06a6a)",
       // 与 codex-hud 的 `statEntries` 一一对应：R→cyan、C→brightBlue（我们的品牌蓝就是这个位）、
-      // T→magenta、?→dim。M/A/D/! 本来就一致（yellow/green/red/critical）。
+      // T→magenta、?→灰。M/A/D/! 本来就一致（yellow/green/red/critical）。
+      // `?` 用 `label-secondary` 而不是 `label-dimmed`：后者是**反相的表面色**（浅 #e1e5ee、深 #43454a），
+      // 当文字压在面板底色上只有 1.26:1 / 1.64:1 —— 看不见（issue：未跟踪计数读不出来）。
+      // secondary 仍是中性灰、比彩色状态弱一档，但浅 5.8:1 / 深 10.4:1 都读得清。
       renamed: "var(--dsh-hud-cyan, #22d3ee)",
       copied: "var(--dsw-alias-brand-primary, #4b8bf5)",
       typeChanged: "var(--dsh-hud-magenta, #d946ef)",
-      untracked: "var(--dsw-alias-label-dimmed, #8a8f98)",
+      untracked: "var(--dsw-alias-label-secondary, #8a8f98)",
       conflicted: "var(--dsw-alias-state-error-primary, #f06a6a)",
     };
 
@@ -359,6 +423,350 @@ window.__ModuleLoader__.load({
 
     /* --------------------------------------------------------- 本地 UI 状态 */
 
+    /** prompt 历史的条数上限（与宿主半的 `PROMPT_HISTORY_MAX` 同一个数）。 */
+    var PROMPT_HISTORY_MAX = 100;
+
+    /**
+     * 光标此刻允许上下翻历史吗？—— 照抄 OpenCode Desktop 的 `canNavigateHistoryAtCursor`。
+     *
+     * 它的规矩比 Codex 保守得多：**不在历史里时，`↑` 只在输入框完全为空时才接管**。
+     * 于是多行草稿里 `↑` 永远是光标移动，跟内置的 `/` 命令、`@` 提及弹窗也天然不冲突
+     * （弹窗必然带着文字）。进了历史之后，只要光标在两端就能继续翻。
+     */
+    function canNavigatePromptHistory(direction, text, caret, inHistory) {
+      var length = typeof text === "string" ? text.length : 0;
+      var position = Math.max(0, Math.min(typeof caret === "number" ? caret : 0, length));
+      if (inHistory) return position === 0 || position === length;
+      if (direction === "up") return position === 0 && length === 0;
+      return position === length;
+    }
+
+    /**
+     * `↑` / `↓` 翻 prompt 历史的**纯状态机**（语义照抄 OpenCode Desktop 的 `navigatePromptHistory`）。
+     *
+     * `index === -1` 表示"不在历史里"；`entries[0]` 是最新一条。往旧翻时先把当前草稿存进
+     * `draft`，一直翻到最新再往下就把草稿**原样放回**（连光标位置都按方向摆好：往旧放开头、
+     * 往新放末尾）。没接管的情况一律回 `handled: false`，调用方据此**不**调用 preventDefault。
+     */
+    function promptHistoryStep(state, direction, input) {
+      var entries = (input && input.entries) || [];
+      var text = input && typeof input.text === "string" ? input.text : "";
+      var caret = input && typeof input.caret === "number" ? input.caret : 0;
+      var index = state.index;
+      var draft = state.draft;
+
+      if (!canNavigatePromptHistory(direction, text, caret, index >= 0)) return { handled: false, state: state };
+
+      if (direction === "up") {
+        if (entries.length === 0) return { handled: false, state: state };
+        if (index === -1) return { handled: true, state: { index: 0, draft: text }, text: entries[0], caret: "start" };
+        if (index < entries.length - 1) {
+          return { handled: true, state: { index: index + 1, draft: draft }, text: entries[index + 1], caret: "start" };
+        }
+        return { handled: false, state: state };            // 已经到最旧一条：把 ↑ 还给编辑器
+      }
+
+      if (index > 0) return { handled: true, state: { index: index - 1, draft: draft }, text: entries[index - 1], caret: "end" };
+      if (index === 0) {
+        return { handled: true, state: { index: -1, draft: null }, text: draft === null || draft === undefined ? "" : draft, caret: "end" };
+      }
+      return { handled: false, state: state };
+    }
+
+    /* -------------------------------------------- 输入框的 ↑ 召回（纯文本） */
+
+    /**
+     * 从一个事件目标往上找"输入框根节点"。
+     *
+     * DSH 的输入框是 **Lexical** 的 contenteditable（根节点带 `data-lexical-editor="true"`），
+     * 不是 textarea —— 所以不能读 `value`。手写 parentElement 上溯（不用 `closest`）：
+     * 一来少依赖一个 API，二来深度有上限，绝不会误判到页面别处。
+     */
+    function composerRootOf(target) {
+      var node = target;
+      for (var depth = 0; depth < 6 && node !== null && node !== undefined; depth += 1) {
+        if (typeof node.getAttribute === "function") {
+          var marker = node.getAttribute("data-lexical-editor");
+          var editable = typeof node.isContentEditable === "boolean" ? node.isContentEditable : node.getAttribute("contenteditable") === "true";
+          if (marker === "true" || editable) return node;
+        }
+        node = node.parentElement;
+      }
+      return null;
+    }
+
+    /** 输入框里的纯文本（Lexical 会把内容画在 DOM 里，`innerText` 最贴近用户看到的）。 */
+    function composerText(root) {
+      if (root === null || root === undefined) return "";
+      var text = typeof root.innerText === "string" ? root.innerText : (typeof root.textContent === "string" ? root.textContent : "");
+      return text.replace(/\u200b/g, "");
+    }
+
+    /**
+     * "输入框实际上是空的吗"用的归一化文本。
+     *
+     * Lexical 的空根节点在 DOM 里通常是 `<p><br></p>`，`innerText` 会给出一个换行符 ——
+     * 拿它当"有内容"就会让 `↑` 永远排不上队（整个功能静默失效）。所以去掉零宽字符与
+     * **只在末尾的空白**：开头的空格是用户真的敲进去的，不能吞。
+     */
+    function composerTextKey(root) {
+      return composerText(root).replace(/\s+$/, "");
+    }
+
+    /** 写入是否成功：两边都归一化再比 —— Lexical 可能补一个尾换行，那不是"没写进去"。 */
+    function composerTextMatches(text, expected) {
+      return text.replace(/\s+$/, "") === expected.replace(/\s+$/, "");
+    }
+
+    /** 光标在输入框里的字符偏移；没有选区、有选中内容、或拿不到选区时回 null（一律不接管）。 */
+    function composerCaretOffset(root) {
+      var selection = typeof window.getSelection === "function" ? window.getSelection() : null;
+      if (!selection || selection.rangeCount === 0 || selection.isCollapsed !== true) return null;
+      var node = selection.focusNode;
+      if (!node) return null;
+      var range = document.createRange();
+      range.selectNodeContents(root);
+      var before = range.cloneRange();
+      try {
+        before.setEnd(node, selection.focusOffset);
+      } catch (error) {
+        return null;
+      }
+      return before.toString().length;
+    }
+
+    /** 把光标放到开头或末尾（`↑` 往旧翻放开头，`↓` 往回翻放末尾 —— 与 OpenCode 一致）。 */
+    function placeCaretInComposer(root, position) {
+      var selection = typeof window.getSelection === "function" ? window.getSelection() : null;
+      if (!selection) return;
+      try {
+        var range = document.createRange();
+        range.selectNodeContents(root);
+        range.collapse(position !== "end");
+        selection.removeAllRanges();
+        selection.addRange(range);
+      } catch (error) {
+        // 光标没摆好不影响内容已经写进去了
+      }
+    }
+
+    /** 全选输入框内容（模拟粘贴前先选中，粘贴才能"替换"而不是"追加"）。 */
+    function selectComposerContents(root) {
+      var selection = typeof window.getSelection === "function" ? window.getSelection() : null;
+      if (!selection) return;
+      try {
+        var range = document.createRange();
+        range.selectNodeContents(root);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      } catch (error) {
+        // 选不中也还能走 execCommand 那条退路
+      }
+    }
+
+    /** 等"写入落地"：微任务总有，有 rAF 的浏览器里再多等一帧（Lexical 的粘贴是帧后落 DOM）。 */
+    function settleComposer() {
+      var chain = Promise.resolve();
+      if (typeof window.requestAnimationFrame === "function") {
+        chain = chain.then(function () {
+          return new Promise(function (resolve) {
+            window.requestAnimationFrame(function () { resolve(); });
+          });
+        });
+      }
+      return chain;
+    }
+
+    /**
+     * 把一段纯文本写进 Lexical 输入框 —— **三层依次降级，每层都等落地了再回读**。
+     *
+     * 为什么要等：Lexical 的粘贴处理是**异步**的（它得先把剪贴板读出来）。写完立刻回读会读到
+     * 旧内容、误判成失败，于是下一层再插一次 —— 实测表现就是**文字出现两遍**（第一次真机上
+     * 就是这样：粘贴插了一遍，`insertText` 又追加了一遍）。
+     *
+     * 三层次序：① 模拟粘贴（Lexical 的正规插入通道）② `execCommand("insertText")`
+     * ③ 直接改文本 + 派发 `input`。**每次降级前都重新全选**，让重试是"替换"而不是"追加"。
+     */
+    function writeComposerText(root, value, caret) {
+      function satisfied() {
+        return composerTextMatches(composerText(root), value);
+      }
+
+      return settleComposer()
+        .then(function () {
+          if (typeof window.ClipboardEvent !== "function" || typeof window.DataTransfer !== "function") return false;
+          if (typeof root.dispatchEvent !== "function") return false;
+          try {
+            selectComposerContents(root);
+            var data = new window.DataTransfer();
+            data.setData("text/plain", value);
+            root.dispatchEvent(new window.ClipboardEvent("paste", { clipboardData: data, bubbles: true, cancelable: true }));
+          } catch (error) {
+            return false;
+          }
+          return settleComposer().then(satisfied);
+        })
+        .then(function (wrote) {
+          if (wrote) return true;
+          try {
+            if (typeof document.execCommand === "function") {
+              selectComposerContents(root);
+              if (document.execCommand("insertText", false, value) === true) {
+                return settleComposer().then(satisfied);
+              }
+            }
+          } catch (error) {
+            // 落到最后一层
+          }
+          return settleComposer().then(function () {
+            if (satisfied()) return true;
+            try {
+              selectComposerContents(root);
+              root.textContent = value;
+              if (typeof window.Event === "function") root.dispatchEvent(new window.Event("input", { bubbles: true }));
+              return true;
+            } catch (error) {
+              return false;
+            }
+          });
+        })
+        .then(function (wrote) {
+          if (!wrote) return false;
+          placeCaretInComposer(root, caret);
+          // 重写内容会让编辑器失焦/滚动跳，下一帧再摆一次光标（OpenCode 也是这么做的）。
+          if (typeof window.requestAnimationFrame === "function") {
+            window.requestAnimationFrame(function () { placeCaretInComposer(root, caret); });
+          }
+          return true;
+        });
+    }
+
+    /**
+     * 把"输入框里按 ↑/↓ 召回上一条 prompt"接到窗口上 —— 只接线，判断与翻页逻辑都在纯函数里。
+     *
+     * 门禁（任一不满足就**完全不介入**，`↑`/`↓` 行为与不装插件时一模一样）：
+     * 默认行为没被别处吃掉、不是输入法组合中、无修饰键、目标是输入框、历史非空、
+     * 选区收起、光标位置通过 `canNavigatePromptHistory`。**接管了才 preventDefault**。
+     */
+    function bindPromptHistory(store) {
+      var nav = { sessionId: null, index: -1, draft: null, writing: false };
+
+      function onKeyDown(event) {
+        if (event === null || event === undefined) return;
+        if (event.defaultPrevented === true || event.isComposing === true) return;
+        if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+        if (event.altKey === true || event.ctrlKey === true || event.metaKey === true) return;
+        if (typeof event.preventDefault !== "function") return;
+
+        var root = composerRootOf(event.target);
+        if (root === null) return;
+
+        var snapshot = store.getSnapshot().promptHistory;
+        var value = snapshot !== null && snapshot !== undefined && snapshot.sessionId !== null ? snapshot.value : null;
+        var entries = value !== null && value !== undefined && value.available === true && Array.isArray(value.prompts) ? value.prompts : [];
+        if (entries.length === 0) return;
+
+        if (nav.sessionId !== snapshot.sessionId) {
+          nav.sessionId = snapshot.sessionId;
+          nav.index = -1;
+          nav.draft = null;
+        }
+
+        var caret = composerCaretOffset(root);
+        if (caret === null) return;
+        var direction = event.key === "ArrowUp" ? "up" : "down";
+        // 归一化后再判"空不空"与"光标在哪端"：Lexical 空输入框里的那个换行不算内容。
+        var text = composerTextKey(root);
+        var step = promptHistoryStep({ index: nav.index, draft: nav.draft }, direction, {
+          entries: entries,
+          text: text,
+          caret: Math.max(0, Math.min(caret, text.length)),
+        });
+        if (!step.handled) return;
+
+        // 到这里才确定要接管：先挡住默认行为（别让 ↑ 先把光标移走），再写内容。
+        event.preventDefault();
+        if (typeof event.stopPropagation === "function") event.stopPropagation();
+
+        // 写入是异步的（粘贴要等落地），但翻页状态先记下：连按 ↑ 时不会两次都从同一条开始。
+        // 真写不进去再回滚 —— 宁可状态与画面都对不上时退回一步，也不要悄悄漂移。
+        var previous = { index: nav.index, draft: nav.draft };
+        nav.index = step.state.index;
+        nav.draft = step.state.draft;
+        nav.writing = true;
+
+        writeComposerText(root, step.text, step.caret).then(function (wrote) {
+          nav.writing = false;
+          if (wrote === true) {
+            probe.log("prompt-history", { index: nav.index, entries: entries.length, direction: direction });
+            return;
+          }
+          nav.index = previous.index;
+          nav.draft = previous.draft;
+          probe.log("prompt-history: 写不进输入框（三层都失败），已回滚并放弃接管", { entries: entries.length });
+        });
+      }
+
+      /** 用户自己动了内容（不是我们写进去的）→ 退出历史、草稿作废，免得把草稿还原到新内容上。 */
+      function onInput(event) {
+        if (nav.writing) return;
+        if (composerRootOf(event && event.target) === null) return;
+        nav.index = -1;
+        nav.draft = null;
+      }
+
+      if (typeof window.addEventListener !== "function") return function () {};
+      window.addEventListener("keydown", onKeyDown, true);
+      window.addEventListener("input", onInput, true);
+      return function () {
+        window.removeEventListener("keydown", onKeyDown, true);
+        window.removeEventListener("input", onInput, true);
+      };
+    }
+
+    /**
+     * 时长格式化：**与 codex-hud 同一套口径**。
+     *
+     * 不足一分钟给 `<1m`；然后按 `Xd Yh Zm` 只列非零项（`45m` / `2h 14m` / `3d 2h`）。
+     * 取的是 floor —— 计时器宁可比真实少一点，也不要"明明刚过 1 分钟就写 2m"。
+     */
+    function formatDuration(ms) {
+      var safe = typeof ms === "number" && isFinite(ms) ? Math.max(0, ms) : 0;
+      if (safe < 60000) return "<1m";
+      var minutes = Math.floor(safe / 60000);
+      var days = Math.floor(minutes / 1440);
+      var hours = Math.floor((minutes % 1440) / 60);
+      var rest = minutes % 60;
+      var parts = [];
+      if (days > 0) parts.push(String(days) + "d");
+      if (hours > 0) parts.push(String(hours) + "h");
+      if (rest > 0) parts.push(String(rest) + "m");
+      return parts.join(" ");
+    }
+
+    /** 固定缩放档位：与内置文档预览的菜单一致（25% / 50% / 100% / 150% / 200%）。 */
+    var ZOOM_STEPS = [0.25, 0.5, 1, 1.5, 2];
+
+    /** 落盘/读回的缩放值：只认档位里的数，其他一律当"适应宽度"。 */
+    function readZoom(ui) {
+      return ui && ZOOM_STEPS.indexOf(ui.zoom) >= 0 ? ui.zoom : null;
+    }
+
+    /**
+     * 走一档缩放。
+     *
+     * `null`（适应宽度）出发：`＋` 从 100% 开始、`−` 从 50% 开始 —— 和"适应宽度"的直觉一致，
+     * 不用先经过 25% 才知道按了有反应。
+     */
+    function stepZoom(current, direction) {
+      if (current === null || current === undefined) return direction > 0 ? 1 : 0.5;
+      var index = ZOOM_STEPS.indexOf(current);
+      if (index < 0) return direction > 0 ? 1 : 0.5;
+      var next = index + (direction > 0 ? 1 : -1);
+      if (next < 0 || next >= ZOOM_STEPS.length) return current;
+      return ZOOM_STEPS[next];
+    }
+
     function readUi() {
       try {
         var raw = window.localStorage.getItem(UI_KEY);
@@ -694,6 +1102,14 @@ window.__ModuleLoader__.load({
          * 实时秒数由客户端本地算（`active.startedAt`），不靠把轮询压到亚秒级。
          */
         tools: { phase: "idle", active: null, recent: [], counts: [], skills: [], skillsDropped: 0, total: 0, updatedAt: null },
+        // 会话时长（计时胶囊用）：`{ sessionId, value }`；取数写进快照，渲染那边就是纯函数。
+        sessionTime: { sessionId: null, value: null },
+        // prompt 历史（输入框 `↑` 召回用）：`{ sessionId, value }`，value 里 prompts 是**新的在前**。
+        promptHistory: { sessionId: null, value: null },
+        // 胶囊悬停提示：`{ key, text, rect }` 或 null。**自己画**，不用浏览器原生 tooltip ——
+        // 原生那个在真机上按了没反应（试过三种节点/容器查证，都不是被谁挡住），
+        // 而它延迟、样式、能否出现我们都控制不了；自己画则位置、换行、颜色全说了算。
+        tip: null,
         /** 侧栏行内 chip 要的摘要：一次批量取回，按 sessionId 索引。 */
         rows: { phase: "idle", byId: {}, unavailable: false, truncated: false, updatedAt: null },
         /**
@@ -754,6 +1170,7 @@ window.__ModuleLoader__.load({
           open: state.panelOpen,
           pos: state.pos,
           wrap: state.diff ? state.diff.wrap === true : false,
+          zoom: state.diff && ZOOM_STEPS.indexOf(state.diff.zoom) >= 0 ? state.diff.zoom : null,
           diffWidth: state.diffWidth,
           commitWidth: state.commitWidth,
         });
@@ -783,11 +1200,12 @@ window.__ModuleLoader__.load({
         if (!state.cwd || !change || !change.file) return Promise.resolve();
         var cwd = state.cwd;
         var wrap = state.diff ? state.diff.wrap === true : readUi().wrap === true;
+        var zoom = state.diff && ZOOM_STEPS.indexOf(state.diff.zoom) >= 0 ? state.diff.zoom : readZoom(readUi());
         set({
           // 工作区差异与「某次提交的明细」是互斥的两种右栏内容，换过去就收起明细。
           commit: null,
           cursor: change.file,
-          diff: { source: "worktree", phase: "loading", path: change.path, file: change.file, origPath: change.origFile || null, data: null, side: "worktree", wrap: wrap, hunk: 0, collapsed: [], errorCode: null },
+          diff: { source: "worktree", phase: "loading", path: change.path, file: change.file, origPath: change.origFile || null, data: null, side: "worktree", wrap: wrap, zoom: zoom, hunk: 0, collapsed: [], errorCode: null },
         });
 
         diffInflight = Promise.resolve()
@@ -815,6 +1233,7 @@ window.__ModuleLoader__.load({
                   data: value,
                   side: worktreeRows > 0 || indexRows === 0 ? "worktree" : "index",
                   wrap: current.wrap,
+                  zoom: current.zoom,
                   hunk: 0,
                   collapsed: [],
                   errorCode: null,
@@ -956,6 +1375,7 @@ window.__ModuleLoader__.load({
             data: null,
             side: "commit",
             wrap: wrap,
+            zoom: state.diff && ZOOM_STEPS.indexOf(state.diff.zoom) >= 0 ? state.diff.zoom : readZoom(readUi()),
             hunk: 0,
             collapsed: [],
             errorCode: null,
@@ -1012,6 +1432,170 @@ window.__ModuleLoader__.load({
         set({ diff: null });
       }
 
+      /* --------------------------------------------------- 图片预览（二进制） */
+
+      /**
+       * 图片两侧的缓存：键与请求一一对应。
+       *
+       * 一张图的 base64 可能上兆，所以命中就不重取；条目数有上限（超了整表清空，
+       * 和宿主的 `CACHE_MAX_ENTRIES` 同一个思路：宁可少缓存，也不要无界增长）。
+       */
+      var imagePairs = new Map();
+      var IMAGE_CACHE_MAX = 8;
+
+      /**
+       * 会话运行时长的缓存：每分钟最多问一次（统计数字不需要更密），同会话复用。
+       *
+       * 与图片那种"重"缓存分开存：这个条目只有几十字节，TTL 到期直接覆盖。
+       */
+      var sessionTimes = new Map();
+      /** 拿到数的缓存时长。 */
+      var SESSION_TIME_TTL_MS = 60000;
+      /**
+       * **没拿到**时的重问间隔。
+       *
+       * 会话是异步恢复到宿主 `sessions` 存储里的：重启后头几百毫秒问 `session-time` 得到的是
+       * "这个会话还不存在"（实测启动 0.6 秒时 live=0，30 秒后才 live=1）。
+       * 把这种答案按 60 秒缓存，就会让计时胶囊在你重启后一两分钟才出现 —— 所以负面结果只记 3 秒。
+       */
+      var SESSION_TIME_RETRY_MS = 3000;
+
+      /** 显示某枚胶囊的悬停提示（`rect` 由调用方从 `getBoundingClientRect()` 给）。 */
+      function showTip(key, text, rect) {
+        if (typeof text !== "string" || text.length === 0) return;
+        var at = rect && typeof rect === "object"
+          ? { left: rect.left, top: rect.top, right: rect.right }
+          : { left: 0, top: 0, right: 0 };
+        set({ tip: { key: key, text: text, rect: at } });
+      }
+
+      /** 收起悬停提示。带 `key` 时只在"还是这一枚"的情况下收 —— 免得旧的 leave 把新的提示关掉。 */
+      function hideTip(key) {
+        var current = state.tip;
+        if (current === null || current === undefined) return;
+        if (typeof key === "string" && current.key !== key) return;
+        set({ tip: null });
+      }
+
+      /**
+       * 一枚胶囊的悬停接线：算出锚点矩形，把文案交给 store。
+       *
+       * 为什么走 store 而不是就地渲染气泡：气泡必须**逃出行内盒**（不被 dock 那行的裁切与
+       * 堆叠上下文限制），所以它由 `shell.overlay` 里一枚单独的座位画，位置用 `position:fixed`。
+       */
+      function tipHandlers(key, textOf) {
+        return {
+          onPointerEnter: function (event) {
+            var target = event && event.currentTarget ? event.currentTarget : null;
+            var rect = target && typeof target.getBoundingClientRect === "function" ? target.getBoundingClientRect() : null;
+            showTip(key, textOf(), rect);
+          },
+          onPointerLeave: function () { hideTip(key); },
+          onPointerDown: function () { hideTip(key); },
+        };
+      }
+
+      /** 取一个会话的运行时长（含内置 `sessionStats` 的累计数字）；拿不到回 `available: false`。 */
+      function loadSessionTime(sessionId) {
+        if (typeof sessionId !== "string" || sessionId === "") return Promise.resolve({ available: false });
+        var cached = sessionTimes.get(sessionId);
+        if (cached !== undefined) {
+          var ttl = cached.value && cached.value.available === true ? SESSION_TIME_TTL_MS : SESSION_TIME_RETRY_MS;
+          if (Date.now() - cached.at < ttl) return Promise.resolve(cached.value);
+        }
+        return Promise.resolve()
+          .then(function () {
+            return ctx.connection.rpc.call(CHANNEL, "session-time", { args: { sessionId: sessionId } });
+          })
+          .then(function (result) {
+            var value = result && result.ok === true && result.value ? result.value : { available: false, sessionId: sessionId };
+            if (sessionTimes.size >= 16) sessionTimes.clear();
+            sessionTimes.set(sessionId, { at: Date.now(), value: value });
+            var previous = state.sessionTime && state.sessionTime.sessionId === sessionId ? state.sessionTime.value : null;
+            // 深度比较没必要：这两个字段（会话创建时刻 + 累计墙钟）就是整份值里会变的部分。
+            var same = previous !== null
+              && previous.available === value.available
+              && previous.createdAt === value.createdAt
+              && previous.llmMs === value.llmMs
+              && previous.toolMs === value.toolMs
+              && previous.turns === value.turns
+              && previous.steps === value.steps;
+            if (!same) set({ sessionTime: { sessionId: sessionId, value: value } });
+            return value;
+          })
+          .catch(function () {
+            return { available: false, sessionId: sessionId };
+          });
+      }
+
+      /**
+       * prompt 历史：宿主从内置 `turnOutline` 投影里取，比客户端自己记一份可靠得多
+       * （分页、压实、重启、换设备都不影响）。prompt 只在"一整轮发出去"之后才会变，
+       * 所以 5 秒 TTL 足够，而且顺手把值写进快照 —— 按键那侧只读快照，不必再 await。
+       */
+      var promptHistories = new Map();
+      var PROMPT_HISTORY_TTL_MS = 5000;
+
+      function loadPromptHistory(sessionId) {
+        if (typeof sessionId !== "string" || sessionId === "") return Promise.resolve({ available: false, prompts: [] });
+        var cached = promptHistories.get(sessionId);
+        if (cached !== undefined && Date.now() - cached.at < PROMPT_HISTORY_TTL_MS) return Promise.resolve(cached.value);
+        return Promise.resolve()
+          .then(function () {
+            return ctx.connection.rpc.call(CHANNEL, "prompt-history", { args: { sessionId: sessionId, limit: PROMPT_HISTORY_MAX } });
+          })
+          .then(function (result) {
+            var value = result && result.ok === true && result.value ? result.value : { available: false, sessionId: sessionId, prompts: [] };
+            if (promptHistories.size >= 16) promptHistories.clear();
+            promptHistories.set(sessionId, { at: Date.now(), value: value });
+            var previous = state.promptHistory && state.promptHistory.sessionId === sessionId ? state.promptHistory.value : null;
+            var same = previous !== null
+              && previous.available === value.available
+              && (previous.prompts || []).length === (value.prompts || []).length
+              && (previous.prompts || []).every(function (item, index) { return item === value.prompts[index]; });
+            if (!same) set({ promptHistory: { sessionId: sessionId, value: value } });
+            return value;
+          })
+          .catch(function () {
+            return { available: false, sessionId: sessionId, prompts: [] };
+          });
+      }
+
+      /**
+       * 同步看一眼缓存：命中就返回条目，否则 null。
+       *
+       * 有了它，`ImageDiff` 的**第一次渲染**就能把已经取过的图画出来 ——
+       * 关掉再打开同一张图不该先闪一下"读取图片…"，也不该再发一次请求。
+       */
+      function cachedImagePair(request) {
+        if (request === null || request === undefined) return null;
+        var entry = imagePairs.get(imagePairKey(request));
+        return entry === undefined ? null : entry;
+      }
+
+      /** 供 `ImageDiff` 用：取一个二进制改动两侧的字节与尺寸（同一个请求只发一次）。 */
+      function loadImagePair(request) {
+        var key = imagePairKey(request);
+        var cached = imagePairs.get(key);
+        if (cached !== undefined) return Promise.resolve(cached);
+
+        return Promise.resolve()
+          .then(function () {
+            return ctx.connection.rpc.call(CHANNEL, "image", { args: request });
+          })
+          .then(function (result) {
+            var entry = result && result.ok === true && result.value
+              ? { phase: "ready", value: result.value }
+              : { phase: "error", code: result && result.error && result.error.details ? result.error.details.code : null };
+            if (imagePairs.size >= IMAGE_CACHE_MAX) imagePairs.clear();
+            imagePairs.set(key, entry);
+            return entry;
+          })
+          .catch(function () {
+            return { phase: "error", code: "transport" };
+          });
+      }
+
       /**
        * 收起右栏。提交明细把差异包在里面，所以它优先整体退掉；
        * 只有工作区差异时才只是关掉差异。
@@ -1134,6 +1718,19 @@ window.__ModuleLoader__.load({
         persist();
       }
 
+      /**
+       * 图片缩放的档位（`null` = 适应宽度）。
+       *
+       * 放在 store 而不是组件里：一来记住（和"自动换行"一样落盘），二来组件的 hooks
+       * 在这个假 React 里驱动不了嵌套状态 —— store 的状态任何位置都读得到。
+       */
+      function setZoom(value) {
+        if (!state.diff) return;
+        var next = value === null || ZOOM_STEPS.indexOf(value) >= 0 ? value : null;
+        set({ diff: Object.assign({}, state.diff, { zoom: next }) });
+        persist();
+      }
+
       /** dock 行的位置变了才写，避免每次测量都触发重渲染。 */
       function setAnchorTop(top) {
         if (state.anchorTop === top) return;
@@ -1624,10 +2221,19 @@ window.__ModuleLoader__.load({
         setCommitWidth: setCommitWidth,
         persistLayout: persist,
         openDiff: openDiff,
+        loadImagePair: loadImagePair,
+        cachedImagePair: cachedImagePair,
+        loadSessionChanges: loadSessionChanges,
+        loadSessionTime: loadSessionTime,
+        loadPromptHistory: loadPromptHistory,
+        showTip: showTip,
+        hideTip: hideTip,
+        tipHandlers: tipHandlers,
         closeDiff: closeDiff,
         closeDetail: closeDetail,
         setDiffSide: setDiffSide,
         toggleDiffWrap: toggleDiffWrap,
+        setZoom: setZoom,
         openCommit: openCommit,
         openCommitDiff: openCommitDiff,
         toggleCommit: toggleCommit,
@@ -2237,10 +2843,432 @@ window.__ModuleLoader__.load({
      * 差异视图：两侧页签（宿主半一次把两侧都取回来了，切页签不再发请求）、
      * 自动换行、复制差异。全部只读——它只是把 git 的输出画出来。
      */
+    /* ------------------------------------------------ 图片预览（二进制改动） */
+
+    /** 图片请求的缓存键：把请求的每个字段都带上，免得两侧共用一个键。 */
+    function imagePairKey(request) {
+      return [request.cwd || "", request.path || "", request.origPath || "", request.side || "", request.sha || ""].join("\u0000");
+    }
+
+    /**
+     * 由 diff 状态推出 `image` 请求；推不出（没有 cwd / 文件）返回 null。
+     *
+     * 页签语义与文本 diff 完全一致：未暂存看「索引 → 工作区」，已暂存看「HEAD → 索引」，
+     * 提交明细按 sha 取，所以两个视图里"未暂存 / 已暂存"指的是同一件事。
+     */
+    function imageRequest(diff, cwd) {
+      if (!diff || !diff.file || !cwd) return null;
+      var request = { cwd: cwd, path: diff.file };
+      if (diff.origPath) request.origPath = diff.origPath;
+      if (diff.source === "commit" && diff.sha) request.sha = diff.sha;
+      else request.side = diff.side === "index" ? "index" : "worktree";
+      return request;
+    }
+
+    /** 两侧的标签跟着"看的到底是哪两条记录"走。 */
+    function imageLabels(diff, t) {
+      if (diff.source === "commit") return { before: t("image.beforeCommit"), after: t("image.afterCommit") };
+      if (diff.side === "index") return { before: t("image.beforeIndex"), after: t("image.afterIndex") };
+      return { before: t("image.beforeWorktree"), after: t("image.afterWorktree") };
+    }
+
+    /** 字节数：十进制 KB/MB，和文件管理器里看到的一致。 */
+    function formatBytes(bytes) {
+      if (typeof bytes !== "number" || !isFinite(bytes) || bytes < 0) return "?";
+      if (bytes < 1000) return String(bytes) + " B";
+      if (bytes < 1000 * 1000) return (bytes / 1000).toFixed(1) + " KB";
+      return (bytes / 1000 / 1000).toFixed(2) + " MB";
+    }
+
+    /** 一侧画不出来时的原因文案（每一侧各有各的原因）。 */
+    function sideReasonText(side, t) {
+      if (side.kind === "too-large") {
+        return t("image.tooLarge", {
+          limit: String(Math.round((typeof side.limit === "number" ? side.limit : 0) / 1024 / 1024)),
+          size: formatBytes(side.bytes),
+        });
+      }
+      if (side.kind === "not-image") return t("image.notImage", { size: formatBytes(side.bytes) });
+      return t("image.missing");
+    }
+
+    /**
+     * 两张都画不出来时说什么：能说清原因就说原因，否则退回原来那句话。
+     * "太大"优先于"不是图" —— 前者才是用户会想处理的那件事。
+     */
+    function imageFallbackText(t, before, after) {
+      var sides = [before, after];
+      var tooLarge = sides.filter(function (side) { return side.kind === "too-large"; })[0];
+      if (tooLarge !== undefined) return sideReasonText(tooLarge, t);
+      var notImage = sides.filter(function (side) { return side.kind === "not-image"; })[0];
+      if (notImage !== undefined) return sideReasonText(notImage, t);
+      return t("diff.binary");
+    }
+
+    /**
+     * 二进制（图片）改动的预览：并排两张图，或按需在两张之间切换。
+     *
+     * 只在文本 diff 报 `binary` 时挂上来。字节来自宿主的 `image` 端点（只读），
+     * 这里只负责画：单侧画不出来就画那一侧的原因，两侧都不行才退回原来那句话。
+     */
+    function ImageDiff(props) {
+      var t = props.t;
+      var store = props.store;
+      var diff = props.diff;
+      var request = imageRequest(diff, props.cwd);
+      var key = request === null ? null : imagePairKey(request);
+      // 先同步看缓存：已经取过的图第一帧就画出来，不闪"读取图片…"。
+      var viewRef = React.useState(function () {
+        return store.cachedImagePair ? store.cachedImagePair(request) : null;
+      });
+      var modeRef = React.useState("pair");
+      var flipRef = React.useState("after");
+
+      React.useEffect(function () {
+        if (key === null) return undefined;
+        var cancelled = false;
+        var cached = store.cachedImagePair ? store.cachedImagePair(request) : null;
+        if (cached !== null) {
+          viewRef[1](cached);
+          return undefined;
+        }
+        viewRef[1](null);
+        store.loadImagePair(request).then(function (entry) {
+          if (!cancelled) viewRef[1](entry);
+        });
+        return function () { cancelled = true; };
+      }, [key]);
+
+      if (key === null) return h("div", { className: "dshh-empty", "data-dsh-hud": "image" }, t("diff.binary"));
+
+      var view = viewRef[0];
+      if (view === null) return h("div", { className: "dshh-empty", "data-dsh-hud": "image" }, t("image.loading"));
+      if (view.phase === "error") return h("div", { className: "dshh-empty", "data-dsh-hud": "image" }, errorText(view.code, t));
+
+      var value = view.value || {};
+      var before = value.before || { kind: "missing" };
+      var after = value.after || { kind: "missing" };
+      if (before.kind !== "image" && after.kind !== "image") {
+        return h("div", { className: "dshh-empty", "data-dsh-hud": "image" }, imageFallbackText(t, before, after));
+      }
+
+      var labels = imageLabels(diff, t);
+      var mode = modeRef[0];
+      var flip = flipRef[0];
+      // 缩放住在 store 里（和"自动换行"一样记住）：`null` = 适应宽度，数字 = 固定档位。
+      var zoom = diff.zoom === undefined ? null : diff.zoom;
+      var cells = mode === "pair"
+        ? [{ key: "before", label: labels.before, side: before }, { key: "after", label: labels.after, side: after }]
+        : [{ key: flip, label: flip === "after" ? labels.after : labels.before, side: flip === "after" ? after : before }];
+
+      function cell(entry) {
+        var side = entry.side;
+        var body = side.kind === "image"
+          ? h("img", {
+              className: "dshh-img",
+              alt: entry.label,
+              // 缩放：适应宽度交给 CSS（`max-width:100%`）；固定档位按**固有像素**算宽度，
+              // 因为宿主已经把宽高一起给我们了 —— 不用等图片加载就能算对。
+              style: zoom === null || typeof side.width !== "number"
+                ? undefined
+                : { width: Math.round(side.width * zoom) + "px", maxWidth: "none" },
+              src: "data:" + side.mime + ";base64," + String(side.base64 || ""),
+            })
+          : h("div", { className: "dshh-imgNote" }, sideReasonText(side, t));
+        return h("div", { className: "dshh-imgCell", key: entry.key },
+          h("div", { className: "dshh-imgLabel" }, entry.label),
+          body);
+      }
+
+      function tab(id, label) {
+        var active = mode === id;
+        return h("button", {
+          type: "button",
+          className: "dshh-tab" + (active ? " dshh-tabActive" : ""),
+          "aria-pressed": active ? "true" : "false",
+          onClick: function () { modeRef[1](id); },
+        }, label);
+      }
+
+      // 尺寸变了才是这张图最值得一眼看到的信息（改图最常见的就是换尺寸）。
+      var dimsChanged = before.kind === "image" && after.kind === "image"
+        && typeof before.width === "number" && typeof after.width === "number"
+        && (before.width !== after.width || before.height !== after.height)
+        ? h("span", { className: "dshh-imgDims" }, t("image.dimsChanged", {
+            from: t("image.dims", { w: String(before.width), h: String(before.height) }),
+            to: t("image.dims", { w: String(after.width), h: String(after.height) }),
+          }))
+        : null;
+      var bytes = before.kind === "image" && after.kind === "image"
+        ? h("span", { className: "dshh-imgBytes" }, formatBytes(before.bytes) + " → " + formatBytes(after.bytes))
+        : null;
+
+      // 缩放按钮：内置那个文档预览把缩放藏在"预览区底部 72px 的悬停感应带"里
+      // （CSS 默认 opacity:0，还得 Ctrl+滚轮），这里给一排看得见、点的着的。
+      var zoomControls = h("span", { className: "dshh-imgZoom", "data-dsh-hud": "image-zoom" }, [
+        h("button", {
+          key: "out",
+          type: "button",
+          className: "dshh-imgZoomBtn",
+          title: t("image.zoomOut"),
+          "data-dsh-hud": "image-zoom-out",
+          onClick: function () { store.setZoom(stepZoom(zoom, -1)); },
+        }, "−"),
+        h("button", {
+          key: "value",
+          type: "button",
+          className: "dshh-imgZoomBtn dshh-imgZoomValue",
+          title: t("image.fitWidth"),
+          "data-dsh-hud": "image-zoom-value",
+          onClick: function () { store.setZoom(null); },
+        }, zoom === null ? t("image.fitWidth") : t("image.zoomValue", { percent: String(Math.round(zoom * 100)) })),
+        h("button", {
+          key: "in",
+          type: "button",
+          className: "dshh-imgZoomBtn",
+          title: t("image.zoomIn"),
+          "data-dsh-hud": "image-zoom-in",
+          onClick: function () { store.setZoom(stepZoom(zoom, 1)); },
+        }, "＋"),
+      ]);
+
+      return h("div", { className: "dshh-imgWrap", "data-dsh-hud": "image" },
+        h("div", { className: "dshh-imgMeta" },
+          tab("pair", t("image.pair")),
+          mode === "flip"
+            ? h("button", {
+                type: "button",
+                className: "dshh-tab",
+                title: t("image.flip"),
+                "data-dsh-hud": "image-flip",
+                onClick: function () { flipRef[1](flip === "after" ? "before" : "after"); },
+              }, t("image.flip"))
+            : null,
+          zoomControls,
+          dimsChanged,
+          bytes),
+        h("div", {
+          className: "dshh-imgPair" + (mode === "flip" ? " dshh-imgPairSingle" : "") + (zoom === null ? "" : " dshh-imgPairZoomed"),
+        }, cells.map(cell)));
+    }
+
+    /* ----------------------------------------- 轮尾：本轮改过的图片（一条门） */
+
+    /** 图片类文件的扩展名。这里只做粗筛 —— 真正"是不是图"由宿主按文件头判断。 */
+    var IMAGE_FILE_EXTENSIONS = ["png", "jpg", "jpeg", "gif", "webp", "bmp", "ico", "avif"];
+
+    /** 按扩展名粗筛"这看起来是张图"。 */
+    function looksLikeImage(file) {
+      if (typeof file !== "string") return false;
+      var dot = file.lastIndexOf(".");
+      if (dot < 0 || dot === file.length - 1) return false;
+      return IMAGE_FILE_EXTENSIONS.indexOf(file.slice(dot + 1).toLowerCase()) >= 0;
+    }
+
+    /** 只取文件名（chip 上放不下整条路径）。 */
+    function baseNameOf(file) {
+      var parts = String(file).split("/");
+      return parts[parts.length - 1] || String(file);
+    }
+
+    /**
+     * 槽位给的是宿主的 `TurnLocation`。
+     *
+     * 形状属于宿主内部约定（槽位文档只说"receives the Turn"），所以这里宽松取值：
+     * 取不到就回 null，由调用方退到"本会话"的说法，而不是整条不显示。
+     */
+    function turnNumberOf(turn) {
+      if (typeof turn === "number" && isFinite(turn)) return turn;
+      if (turn && typeof turn === "object" && typeof turn.turn === "number") return turn.turn;
+      return null;
+    }
+
+    /**
+     * 从会话改动里挑出"这一轮改过的图片"，最近的在前。
+     *
+     * **两档都收**：`●` 确定改过（写文件 / 编辑工具）与 `◐` 命令旁听（`>`、`tee`、`cp`、`rm`…）。
+     * 只收确定档不够用 —— 图几乎都是脚本/命令产出的（`python gen.py`、`cp`、`curl -o`），
+     * 那些永远进不了确定档，而"点一下看图"对它们一样有用。`◐` 是猜的，所以 chip 上带 `◐`、
+     * 悬停给出那条命令（措辞与面板里改动清单一致）。
+     *
+     * 回合号拿不到（`turnNumberOf` 回 null）就不按回合收窄，退回"本会话最近的图片改动"。
+     *
+     * @returns `{ files, exact }`；`exact` 为 false 表示标题该说"本会话"而不是"本轮"。
+     */
+    function imageChangesOf(changes, turnNumber) {
+      if (changes === null || changes === undefined) return { files: [], exact: turnNumber !== null };
+      var confirmed = changes.files ? changes.files : {};
+      var guessed = changes.possible ? changes.possible : {};
+      var picked = [];
+      var seen = {};
+
+      for (var file in confirmed) {
+        if (!Object.prototype.hasOwnProperty.call(confirmed, file)) continue;
+        if (!looksLikeImage(file)) continue;
+        var record = confirmed[file] || {};
+        if (turnNumber !== null) {
+          var turns = Array.isArray(record.turns) ? record.turns : [];
+          if (turns.indexOf(turnNumber) < 0 && record.lastTurn !== turnNumber) continue;
+        }
+        seen[file] = true;
+        picked.push({
+          file: file,
+          name: baseNameOf(file),
+          tier: "confirmed",
+          reason: "",
+          at: typeof record.lastAt === "number" ? record.lastAt : 0,
+        });
+      }
+
+      for (var guess in guessed) {
+        if (!Object.prototype.hasOwnProperty.call(guessed, guess)) continue;
+        if (seen[guess] === true) continue;
+        if (!looksLikeImage(guess)) continue;
+        var item = guessed[guess] || {};
+        // 命令旁听只记"最近一次"的回合号（没有 turns 列表），所以只能按 lastTurn 收窄。
+        if (turnNumber !== null && item.lastTurn !== turnNumber) continue;
+        seen[guess] = true;
+        picked.push({
+          file: guess,
+          name: baseNameOf(guess),
+          tier: "possible",
+          reason: typeof item.reason === "string" ? item.reason : "",
+          at: typeof item.lastAt === "number" ? item.lastAt : 0,
+        });
+      }
+
+      picked.sort(function (left, right) { return right.at - left.at; });
+      return { files: picked, exact: turnNumber !== null };
+    }
+
+    /** 缩略图用哪一侧的字节：优先工作区，其次基线（新增/删除时只有一侧有）。 */
+    function thumbSideOf(entry) {
+      if (entry === null || entry.phase !== "ready" || !entry.value) return null;
+      var pair = entry.value;
+      if (pair.after && pair.after.kind === "image") return pair.after;
+      if (pair.before && pair.before.kind === "image") return pair.before;
+      return null;
+    }
+
+    /**
+     * 轮尾那条「本轮图片改动」：每项一张缩略图 + 文件名。
+     *
+     * 内置的改动卡片点一行是打开 review tab（图片在那儿看不见），这条是补上的门：
+     * **点缩略图 → 槽位给的 `openFile(path)`**，即内置的右侧文档预览（图片原生渲染、可缩放）；
+     * 旁边那个 `⇄` 才打开 dsh-hud 面板看前后两张 —— 前后对比只有我们有。
+     */
+    function TurnImages(props) {
+      var t = props.t;
+      var store = props.store;
+      var sessionId = props.sessionId;
+      var useSessions = props.useSessions;
+      var openFile = props.openFile;
+      var turnNumber = turnNumberOf(props.turn);
+
+      // useSessions 是选择器 hook：选择器参数是必需的。
+      var sessions = typeof useSessions === "function" ? useSessions(function (snapshot) { return snapshot; }) : null;
+      var summary = sessionId !== undefined && sessions && sessions.byId ? sessions.byId[sessionId] : undefined;
+      var cwd = summary ? summary.cwd : undefined;
+
+      var state = useStore(store);
+      // 缩略图要等字节；缓存本身不在快照里，所以取完自增一下触发重画。
+      var tick = React.useState(0);
+      var bump = tick[1];
+
+      // 轮尾每个已完成的回合都会挂一次：绑定会话 + 没取过会话改动就取一次（宿主侧是内存读，很便宜）。
+      React.useEffect(function () {
+        if (sessionId === undefined || cwd === undefined) return undefined;
+        store.bindSession(sessionId, cwd);
+        if (state.sessionChanges === undefined || state.sessionChanges.phase === "idle") store.loadSessionChanges();
+        return undefined;
+      }, [sessionId, cwd]);
+
+      var picked = imageChangesOf(state.sessionChanges, turnNumber);
+      var shown = picked.files.slice(0, 4);
+      var keys = shown.map(function (entry) { return entry.file; }).join("\u0000");
+
+      React.useEffect(function () {
+        if (keys === "" || cwd === undefined) return undefined;
+        var cancelled = false;
+        var wanted = shown.map(function (entry) {
+          return { cwd: cwd, path: entry.file, side: "worktree" };
+        }).filter(function (request) {
+          return store.cachedImagePair(request) === null;
+        });
+        if (wanted.length === 0) return undefined;
+        Promise.all(wanted.map(function (request) { return store.loadImagePair(request); })).then(function () {
+          if (!cancelled) bump(function (count) { return count + 1; });
+        });
+        return function () { cancelled = true; };
+      }, [keys, cwd]);
+
+      // 会话改动还没到、或这一轮没动过图：整条不渲染（不在每条轮尾留个空壳）。
+      if (state.sessionChanges === undefined || state.sessionChanges.phase !== "ready") return null;
+      if (shown.length === 0) return null;
+
+      var rest = picked.files.length - shown.length;
+
+      function chip(entry) {
+        var thumb = thumbSideOf(cwd === undefined ? null : store.cachedImagePair({ cwd: cwd, path: entry.file, side: "worktree" }));
+        var dot = entry.name.lastIndexOf(".");
+        var extension = dot > 0 ? entry.name.slice(dot + 1).toUpperCase() : "?";
+        // `◐` 是命令旁听来的（猜的）：说清这一点，并把那条命令放进悬停里。
+        var hint = entry.file + " · " + t("turnImages.open");
+        if (entry.tier === "possible" && entry.reason !== "") hint += " · " + t("session.possibleTitle", { reason: entry.reason });
+        return h("span", {
+          key: entry.file,
+          className: "dshh-imgstripItem",
+          "data-dsh-hud": "turn-image",
+          "data-file": entry.file,
+          "data-tier": entry.tier,
+        }, [
+          h("button", {
+            key: "open",
+            type: "button",
+            className: "dshh-imgstripOpen",
+            title: hint,
+            onClick: function () { if (typeof openFile === "function") openFile(entry.file); },
+          }, [
+            thumb === null
+              ? h("span", { key: "ph", className: "dshh-imgstripThumb dshh-imgstripThumbEmpty" }, extension)
+              : h("img", {
+                  key: "img",
+                  className: "dshh-imgstripThumb",
+                  alt: entry.name,
+                  src: "data:" + thumb.mime + ";base64," + String(thumb.base64 || ""),
+                }),
+            entry.tier === "possible"
+              ? h("span", { key: "tier", className: "dshh-imgstripTier", title: hint }, "◐")
+              : null,
+            h("span", { key: "name", className: "dshh-imgstripName" }, entry.name),
+          ]),
+          h("button", {
+            key: "compare",
+            type: "button",
+            className: "dshh-imgstripCompare",
+            title: t("turnImages.compare"),
+            "data-dsh-hud": "turn-image-compare",
+            onClick: function () {
+              store.openPanel(true);
+              store.openDiff({ file: entry.file, path: entry.file, origFile: null });
+            },
+          }, "⇄"),
+        ]);
+      }
+
+      return h("div", { className: "dshh-imgstrip", "data-dsh-hud": "turn-images" }, [
+        h("span", { key: "title", className: "dshh-imgstripTitle" }, picked.exact ? t("turnImages.title") : t("turnImages.titleSession")),
+        h("span", { key: "items", className: "dshh-imgstripItems" }, shown.map(chip)),
+        rest > 0 ? h("span", { key: "more", className: "dshh-imgstripMore" }, t("turnImages.more", { n: String(rest) })) : null,
+      ]);
+    }
+
     function DiffView(props) {
       var t = props.t;
       var diff = props.diff;
       var store = props.store;
+      // 图片预览要按工作区发请求；文本 diff 用不到它。
+      var cwd = props.cwd;
 
       var copiedRef = React.useState(false);
       var copied = copiedRef[0];
@@ -2308,7 +3336,8 @@ window.__ModuleLoader__.load({
       } else if (!data) {
         body = h("div", { className: "dshh-empty" }, t("diff.empty"));
       } else if (data.binary === true) {
-        body = h("div", { className: "dshh-empty" }, t("diff.binary"));
+        // 二进制里最常被改的就是图：能认出来就画出来，认不出才退回那句话。
+        body = h(ImageDiff, { t: t, store: store, diff: diff, cwd: cwd });
       } else if (rows.length === 0) {
         body = h("div", { className: "dshh-empty" }, t("diff.empty"));
       } else {
@@ -2634,6 +3663,24 @@ window.__ModuleLoader__.load({
       var toolsTickKey = state.tools && state.tools.active !== null && state.tools.active !== undefined
         ? String(state.tools.active.callId)
         : null;
+      // 会话计时 + 输入框 ↑ 召回的数据（两个 loader 各自带 TTL，这里按最密的节奏问就行）。
+      React.useEffect(function () {
+        if (sessionId === undefined) return undefined;
+        var load = function () {
+          if (store.loadSessionTime !== undefined) store.loadSessionTime(sessionId);
+          if (store.loadPromptHistory !== undefined) store.loadPromptHistory(sessionId);
+        };
+        load();
+        var poll = window.setInterval(load, 3000);
+        return function () { window.clearInterval(poll); };
+      }, [sessionId]);
+
+      // 挂钟每 4 秒跳一次：计时胶囊的显示粒度是分钟，但跨分钟不用等下一次取数。
+      React.useEffect(function () {
+        var clock = window.setInterval(function () { tickSet(Date.now()); }, 4000);
+        return function () { window.clearInterval(clock); };
+      }, []);
+
       React.useEffect(function () {
         if (toolsTickKey === null) return undefined;
         var timer = window.setInterval(function () { tickSet(Date.now()); }, 500);
@@ -2714,27 +3761,55 @@ window.__ModuleLoader__.load({
       // 外层容器复刻框架自己的 dock 行几何（见 queue 公告）：仅靠胶囊自身对齐，
       // 胶囊会飘到整栏的最左边，而输入卡片是居中的。
       return h("div", { className: "dshh-dock", "data-dsh-hud": "dock" },
-        h("button", {
+        h("button", Object.assign({
           type: "button",
           className: "dshh-pill",
           "data-dsh-hud": "pill",
-          title: titleLines.join("\n"),
           "aria-expanded": state.panelOpen ? "true" : "false",
           style: { color: state.panelOpen ? "var(--dsw-alias-brand-primary, #4b8bf5)" : undefined },
           onClick: function () {
             store.togglePanel();
           },
-        }, children),
+        }, store.tipHandlers("pill", function () { return titleLines.join("\n"); })), children),
         // 工具活动那一枚并排在后面 —— dock 是竖列，独立注册会另起一整行（用户实测"换行了"）。
-        toolPillNode(state, { t: t, now: props.now === undefined ? tick[0] : props.now }));
+        toolPillNode(state, { t: t, store: store, now: props.now === undefined ? tick[0] : props.now }),
+        // 计时胶囊放在**最后**（三枚同在一条注册里 → 同一行；独立注册会另起一整行）。
+        timerPillNode(state, { t: t, store: store, sessionId: sessionId, now: props.now === undefined ? tick[0] : props.now }));
     }
 
     /**
-     * 本会话工具活动的胶囊（座位 `conversation.input.dock`，与 Git 胶囊各自一行）。
+     * 胶囊悬停提示的气泡。**自己画**，不用浏览器原生 `title`。
+     *
+     * 由一个独立的 `shell.overlay` 座位渲染、`position:fixed` 定位 —— 这样它不受 dock 那行的
+     * 裁切与堆叠上下文限制。位置只用锚点矩形的 `top` 与 `right`：
+     * 贴在那枚胶囊**上方**，横向按视口夹住（不量自己的宽度，避免"先渲染再回填"的抖动）。
+     */
+    function PillTip(props) {
+      var store = props.store;
+      var state = useStore(store);
+      var tip = state.tip;
+
+      if (tip === null || tip === undefined) return null;
+      var innerWidth = typeof window.innerWidth === "number" ? window.innerWidth : 1200;
+      var innerHeight = typeof window.innerHeight === "number" ? window.innerHeight : 800;
+      var margin = 8;
+      var left = Math.max(margin, Math.min(typeof tip.rect.left === "number" ? tip.rect.left : margin, innerWidth - 428));
+      var bottom = Math.max(margin, innerHeight - (typeof tip.rect.top === "number" ? tip.rect.top : 0) + 6);
+
+      return h("div", {
+        className: "dshh-tip",
+        "data-dsh-hud": "pill-tip",
+        role: "tooltip",
+        style: { left: String(left) + "px", bottom: String(bottom) + "px" },
+      }, tip.text);
+    }
+
+    /**
+     * 本会话工具活动的胶囊（**与 Git 胶囊同一行**：dock 是竖列，独立注册会另起一行，
+     * 所以它只是那一条注册里的第二个节点）。
      *
      * 照 codex-hud 那条 `Tools:` 的口径：**正在跑**就报工具名与实时秒数（秒数本地算，不靠轮询）；
-     * 空闲就报最近一次是哪个工具、本会话一共几次（失败打叉）。完全没跑过工具时整枚不画 ——
-     * 空白注册会白占一行（dock 是竖列，一条注册就是一整行）。
+     * 空闲就报最近一次是哪个工具、本会话一共几次（失败打叉）。完全没跑过工具时整枚不画。
      */
     /**
      * 工具活动那一枚（**与 Git 胶囊同一行**，所以它只是那一行里的第二个节点，不是独立注册）。
@@ -2805,12 +3880,47 @@ window.__ModuleLoader__.load({
         active: tools.active === null ? null : String(tools.active.name),
         total: tools.total,
       });
-      return h("span", {
+      return h("span", Object.assign({
         className: "dshh-pill dshh-toolsPill",
         "data-dsh-hud": "tools-pill",
         key: "tools",
-        title: toolsTitle(tools, t),
-      }, children);
+      }, options.store.tipHandlers("tools-pill", function () { return toolsTitle(tools, t); })), children);
+    }
+
+    /**
+     * 会话计时胶囊（**与 Git / 工具两枚同一行、排在最后**，所以它只是那一条注册里的第三个节点 ——
+     * dock 是竖列，独立注册会另起一整行，工具胶囊与计时胶囊都踩过这个坑）。
+     *
+     * 口径与 codex-hud 的会话时长一致：挂钟 = 现在 − 会话创建时刻；悬停补上模型/工具墙钟与轮次。
+     * 数据来自 store 快照（`sessionTime`），所以这里是纯函数，没有 hooks。
+     */
+    function timerPillNode(state, options) {
+      var t = options.t;
+      var sessionId = options.sessionId;
+      var now = options.now;
+      var snapshot = state.sessionTime;
+      var value = snapshot !== null && snapshot !== undefined && snapshot.sessionId === sessionId ? snapshot.value : null;
+      // 会话不在（还没恢复进存储、已归档、子会话已回收）、宿主服务缺失：不画这枚胶囊，也不占位。
+      if (value === null || value.available !== true || typeof value.createdAt !== "number") return null;
+
+      var age = Math.max(0, now - value.createdAt);
+      var hints = [t("timer.title"), t("timer.created", { time: fullWhen(value.createdAt) })];
+      if (typeof value.llmMs === "number" && typeof value.toolMs === "number") {
+        hints.push(t("timer.work", { llm: formatDuration(value.llmMs), tool: formatDuration(value.toolMs) }));
+      }
+      if (typeof value.turns === "number" && typeof value.steps === "number") {
+        hints.push(t("timer.turns", { turns: String(value.turns), steps: String(value.steps) }));
+      }
+      probe.log("timer-pill", { age: Math.round(age / 60000) });
+      var tipKey = "session-timer";
+      return h("span", Object.assign({
+        className: "dshh-pill dshh-timer",
+        "data-dsh-hud": "session-timer",
+        key: "timer",
+      }, options.store.tipHandlers(tipKey, function () { return hints.join(" · "); })), [
+        h("span", { key: "glyph", className: "dshh-timerGlyph" }, "⏱"),
+        h("span", { key: "value", className: "dshh-timerValue" }, formatDuration(age)),
+      ]);
     }
 
     /** 已经跑了多久：`1.2s` / `12s`（拿不到开始时刻就返回 null，不编一个数）。 */
@@ -3310,7 +4420,7 @@ window.__ModuleLoader__.load({
               onPointerDown: function (event) { onGripPointerDown("commit", event); },
             })
             : null,
-          diffMode ? h(DiffView, { t: t, diff: state.diff, store: store }) : null)
+          diffMode ? h(DiffView, { t: t, diff: state.diff, store: store, cwd: state.cwd }) : null)
         : listBody;
 
       return h("div", { className: "dshh-panel", "data-dsh-hud": "panel", style: panelStyle },
@@ -3396,6 +4506,16 @@ window.__ModuleLoader__.load({
       "background:var(--dsw-alias-bg-layer-1,transparent);color:var(--dsw-alias-label-secondary,#8a8f98);",
       "cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}",
       ".dshh-pill:hover{color:var(--dsw-alias-label-primary,#e5e7eb);border-color:var(--dsw-alias-border-l2,rgba(127,127,127,0.45));}",
+      // 会话计时胶囊：只读读数，所以指针不该是"可点"；数字用等宽数字，跳动时宽度不抖。
+      ".dshh-timer{cursor:default;gap:5px;}",
+      // 悬停气泡：`pointer-events:none` 保证它永远不挡指针；`pre-wrap` 保留调用方给的多行结构。
+      ".dshh-tip{position:fixed;z-index:60;box-sizing:border-box;max-width:420px;padding:6px 10px;border-radius:8px;"
+      + "background:var(--dsw-specific-menu,var(--dsw-alias-bg-layer-2,#2c2c2e));"
+      + "border:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,0.25));"
+      + "box-shadow:0 6px 20px rgba(0,0,0,0.28);color:var(--dsw-alias-label-primary,#f9fafb);"
+      + "font-size:11.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;pointer-events:none;}", 
+      ".dshh-timerGlyph{flex:none;opacity:.85;}",
+      ".dshh-timerValue{font-variant-numeric:tabular-nums;}",
       ".dshh-panel{color:var(--dsw-alias-label-primary,#e5e7eb);font-size:12.5px;line-height:1.6;}",
       ".dshh-header{display:flex;align-items:center;gap:8px;padding:6px 8px;flex:none;cursor:move;line-height:1.4;",
       "user-select:none;touch-action:none;border-bottom:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,0.22));}",
@@ -3446,14 +4566,17 @@ window.__ModuleLoader__.load({
       ".dshh-rowhover{display:flex;flex-direction:column;gap:2px;font-size:11px;",
       "color:var(--dsw-alias-label-secondary,#8a8f98);min-width:0;}",
       ".dshh-rowhoverLine{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}",
+      // 「已审 x/y」是个可点控件：同样不能用 label-dimmed（反相表面色，1.26:1 / 1.64:1），
+      // 平时用次级文字色，悬停才升到正文色。
       ".dshh-review{flex:none;margin-left:auto;padding:0 2px;font-size:10.5px;cursor:pointer;",
-      "color:var(--dsw-alias-label-dimmed,rgba(138,143,152,0.65));}",
+      "color:var(--dsw-alias-label-secondary,#8a8f98);}",
       ".dshh-review:hover{color:var(--dsw-alias-label-primary,#e5e7eb);}",
       ".dshh-reviewOn{color:var(--dsw-alias-state-success-primary,#3fb950);}",
       ".dshh-reviewStale{color:var(--dsw-alias-state-warn-primary,#d9a63c);}",
       ".dshh-ctag{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;",
       "font-family:ui-monospace,Consolas,monospace;font-size:11px;color:var(--dsw-alias-state-warn-primary,#d9a63c);}",
-      ".dshh-markerOther{color:var(--dsw-alias-label-dimmed,rgba(138,143,152,0.6));}",
+      // 行首的 `○`（与本会话无关）：要"最不显眼"，但同样得看得见 —— 与上面同一个理由。
+      ".dshh-markerOther{color:var(--dsw-alias-label-secondary,#8a8f98);}",
       // 工具活动胶囊：与 Git 胶囊同形，但它是只读读数，指针不该是“可点”。
       // 与 codex-hud 对齐的几支色（它的默认配色表：git=magenta、gitBranch=cyan、project=yellow）：
       // 产品没有青/品红的语义变量（只有 button-info-*，那是按钮用的），所以这两支写死值，
@@ -3520,6 +4643,57 @@ window.__ModuleLoader__.load({
       ".dshh-cwhen{flex:none;font-size:10.5px;color:var(--dsw-alias-label-secondary,#8a8f98);}",
       ".dshh-note{font-size:11px;color:var(--dsw-alias-label-secondary,#8a8f98);}",
       ".dshh-empty{padding:14px 12px;font-size:12px;color:var(--dsw-alias-label-secondary,#8a8f98);}",
+      // ---- 图片预览（二进制改动） ----
+      ".dshh-imgWrap{flex:1 1 auto;min-height:0;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:8px;}",
+      ".dshh-imgMeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;",
+      "color:var(--dsw-alias-label-secondary,#8a8f98);}",
+      ".dshh-imgDims{color:var(--dsw-alias-state-warn-primary,#d9a63c);}",
+      ".dshh-imgBytes{font-family:ui-monospace,Consolas,monospace;}",
+      ".dshh-imgPair{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;}",
+      ".dshh-imgPairSingle{flex-wrap:nowrap;}",
+      // 固定档位（非"适应宽度"）时：图片按固有像素算宽度，容器随内容撑开，外层横向滚动。
+      ".dshh-imgPairZoomed{flex-wrap:nowrap;width:max-content;align-items:flex-start;}",
+      ".dshh-imgPairZoomed .dshh-imgCell{flex:0 0 auto;}",
+      ".dshh-imgPairZoomed .dshh-img{max-height:none;}",
+      ".dshh-imgZoom{display:inline-flex;align-items:center;gap:2px;margin-left:auto;}",
+      ".dshh-imgZoomBtn{border:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,0.25));",
+      "background:var(--dsw-alias-bg-layer-1,transparent);color:inherit;cursor:pointer;font:inherit;",
+      "min-width:22px;height:20px;padding:0 6px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;}",
+      ".dshh-imgZoomBtn:hover{color:var(--dsw-alias-label-primary,#e5e7eb);",
+      "border-color:var(--dsw-alias-border-l2,rgba(127,127,127,0.45));}",
+      ".dshh-imgZoomValue{min-width:74px;font-variant-numeric:tabular-nums;}",
+      ".dshh-imgCell{flex:1 1 150px;min-width:0;display:flex;flex-direction:column;gap:4px;}",
+      ".dshh-imgLabel{font-size:11px;color:var(--dsw-alias-label-secondary,#8a8f98);}",
+      ".dshh-imgNote{font-size:11px;color:var(--dsw-alias-label-secondary,#8a8f98);padding:6px 0;}",
+      // 透明像素要有底色才看得出边界：棋盘格由四段半透明渐变拼出来，两种主题都不用另配颜色。
+      ".dshh-img{max-width:100%;max-height:420px;object-fit:contain;border-radius:6px;",
+      "border:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,0.28));",
+      "background-image:linear-gradient(45deg,rgba(127,127,127,0.12) 25%,transparent 25%),",
+      "linear-gradient(-45deg,rgba(127,127,127,0.12) 25%,transparent 25%),",
+      "linear-gradient(45deg,transparent 75%,rgba(127,127,127,0.12) 75%),",
+      "linear-gradient(-45deg,transparent 75%,rgba(127,127,127,0.12) 75%);",
+      "background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;}",
+      // ---- 轮尾「本轮图片改动」条 ----
+      ".dshh-imgstrip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px;",
+      "color:var(--dsw-alias-label-secondary,#8a8f98);}",
+      ".dshh-imgstripTitle{flex:none;}",
+      ".dshh-imgstripItems{display:flex;gap:6px;flex-wrap:wrap;}",
+      ".dshh-imgstripItem{display:inline-flex;align-items:center;gap:2px;padding:2px 4px 2px 2px;",
+      "border:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,0.25));border-radius:8px;",
+      "background:var(--dsw-alias-bg-layer-1,transparent);}",
+      ".dshh-imgstripOpen{display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;",
+      "color:inherit;cursor:pointer;padding:0;font:inherit;}",
+      ".dshh-imgstripOpen:hover{color:var(--dsw-alias-label-primary,#e5e7eb);}",
+      ".dshh-imgstripThumb{width:28px;height:28px;object-fit:cover;border-radius:5px;display:block;",
+      "background:var(--dsw-alias-bg-layer-2,rgba(127,127,127,0.14));}",
+      ".dshh-imgstripThumbEmpty{align-items:center;justify-content:center;font-size:8px;letter-spacing:0.02em;",
+      "display:flex;color:var(--dsw-alias-label-secondary,#8a8f98);}",
+      ".dshh-imgstripName{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}",
+      ".dshh-imgstripTier{flex:none;opacity:.7;}",
+      ".dshh-imgstripCompare{border:0;background:transparent;color:inherit;cursor:pointer;padding:0 2px;",
+      "font:inherit;opacity:.7;}",
+      ".dshh-imgstripCompare:hover{opacity:1;color:var(--dsw-alias-brand-primary,#4b8bf5);}",
+      ".dshh-imgstripMore{flex:none;}",
       ".dshh-footer{display:flex;justify-content:space-between;gap:8px;padding:6px 10px;flex:none;",
       "border-top:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,0.22));",
       "font-size:10.5px;color:var(--dsw-alias-label-secondary,#8a8f98);}",
@@ -3656,6 +4830,20 @@ window.__ModuleLoader__.load({
         };
       }, "dsh-hud: focus refresh");
 
+      // 悬停气泡单独一枚 overlay 座位：它要浮在 dock 行之外（行内会被裁切/堆叠上下文限制）。
+      // order 比面板小 —— 面板开着时仍然压在最上层。
+      ctx.slots.inject("shell.overlay", function () {
+        return ctx.slots.register({
+          name: "shell.overlay",
+          id: "dsh-hud-pill-tip",
+          order: 10,
+          locale: NS,
+          inject: function () {
+            return { store: store };
+          },
+        }, PillTip);
+      });
+
       ctx.slots.inject("shell.overlay", function () {
         return ctx.slots.register({
           name: "shell.overlay",
@@ -3730,6 +4918,27 @@ window.__ModuleLoader__.load({
           },
         }, HudDockPill);
       });
+
+      // 轮尾（内置「已编辑 N 个文件」卡片所在的那条尾巴）的一扇门：本轮动过图，
+      // 点缩略图就在内置文档预览里打开；`⇄` 才进本面板看前后对比。
+      ctx.slots.inject("conversation.chat.turnTail", function () {
+        return ctx.slots.register({
+          name: "conversation.chat.turnTail",
+          id: "dsh-hud-turn-images",
+          order: 30,
+          locale: NS,
+          inject: function (sessionId) {
+            return { store: store, sessionId: sessionId };
+          },
+        }, TurnImages);
+      });
+
+      // 输入框里的 ↑ 召回（纯文本）：**最后接线** —— 逻辑全在纯函数里，这一层只负责
+      // 读值 / 写值 / 摆光标，且**真接管了才拦默认行为**。刻意排在最后注册，好让
+      // "第一个 keydown 监听是面板那条"这个既有事实保持不变。
+      ctx.effect(function () {
+        return bindPromptHistory(store);
+      }, "dsh-hud: prompt history (↑ 召回)");
     }
 
     exports.apply = apply;