@konnga/dsh-hud 0.9.0 → 0.9.1

package/lib/client.js

@@ -139,6 +139,12 @@ window.__ModuleLoader__.load({
       "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": "本会话图片改动",
@@ -275,6 +281,11 @@ window.__ModuleLoader__.load({
       "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",
@@ -412,6 +423,327 @@ 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];
 
@@ -770,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 },
         /**
@@ -1103,6 +1443,124 @@ window.__ModuleLoader__.load({
       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。
        *
@@ -1766,6 +2224,11 @@ window.__ModuleLoader__.load({
         loadImagePair: loadImagePair,
         cachedImagePair: cachedImagePair,
         loadSessionChanges: loadSessionChanges,
+        loadSessionTime: loadSessionTime,
+        loadPromptHistory: loadPromptHistory,
+        showTip: showTip,
+        hideTip: hideTip,
+        tipHandlers: tipHandlers,
         closeDiff: closeDiff,
         closeDetail: closeDetail,
         setDiffSide: setDiffSide,
@@ -3200,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);
@@ -3280,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 }));
+    }
+
+    /**
+     * 胶囊悬停提示的气泡。**自己画**，不用浏览器原生 `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);
     }
 
     /**
-     * 本会话工具活动的胶囊（座位 `conversation.input.dock`，与 Git 胶囊各自一行）。
+     * 本会话工具活动的胶囊（**与 Git 胶囊同一行**：dock 是竖列，独立注册会另起一行，
+     * 所以它只是那一条注册里的第二个节点）。
      *
      * 照 codex-hud 那条 `Tools:` 的口径：**正在跑**就报工具名与实时秒数（秒数本地算，不靠轮询）；
-     * 空闲就报最近一次是哪个工具、本会话一共几次（失败打叉）。完全没跑过工具时整枚不画 ——
-     * 空白注册会白占一行（dock 是竖列，一条注册就是一整行）。
+     * 空闲就报最近一次是哪个工具、本会话一共几次（失败打叉）。完全没跑过工具时整枚不画。
      */
     /**
      * 工具活动那一枚（**与 Git 胶囊同一行**，所以它只是那一行里的第二个节点，不是独立注册）。
@@ -3371,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，不编一个数）。 */
@@ -3962,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));}",
@@ -4276,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",
@@ -4364,6 +4932,13 @@ window.__ModuleLoader__.load({
           },
         }, TurnImages);
       });
+
+      // 输入框里的 ↑ 召回（纯文本）：**最后接线** —— 逻辑全在纯函数里，这一层只负责
+      // 读值 / 写值 / 摆光标，且**真接管了才拦默认行为**。刻意排在最后注册，好让
+      // "第一个 keydown 监听是面板那条"这个既有事实保持不变。
+      ctx.effect(function () {
+        return bindPromptHistory(store);
+      }, "dsh-hud: prompt history (↑ 召回)");
     }
 
     exports.apply = apply;