@konnga/dsh-hud 0.7.1 → 0.9.0

package/lib/client.js

@@ -44,7 +44,16 @@ window.__ModuleLoader__.load({
      * 那些 chip 是"扫一眼"的信息（哪个会话脏了），不值得跟面板一样频繁；宿主侧还按目录
      * 缓存 + 去重，多会话共用一个目录只跑一次 git。
      */
-    var ROWS_POLL_MS = 12000;
+    // 侧栏标记删掉之后，这份数据只剩"悬停卡片 / ⋯ 菜单"两处**按需展示**在用 ——
+    // 所以从 12s 放宽到 30s：按下不表的东西没必要那么勤地去问 git。
+    var ROWS_POLL_MS = 30000;
+    /**
+     * 工具活动的节拍。比面板那 8s 密得多：宿主这一端是**内存读**（不碰 git、不跑子进程），
+     * 密一点才能让"正在跑什么"真的看到；代价用"内容没变就不 set"抵掉。
+     */
+    var TOOLS_POLL_MS = 3000;
+    /** 胶囊上最多铺几个技能名（其余收成 `+k`，完整清单在悬停里）。 */
+    var SKILLS_SHOWN = 2;
     /** 面板默认宽度与“停靠在输入框上方”的锚点高度。 */
     var PANEL_WIDTH = 380;
     var COMPOSER_OFFSET = 168;
@@ -58,6 +67,8 @@ window.__ModuleLoader__.load({
      * 它夹在左栏与差异栏之间，是固定的——右边缘那个抓握仍只调整差异栏。
      */
     var COMMIT_LIST_WIDTH = 240;
+    /** 提交明细栏的最小宽度（它装的是文件路径，不能太窄；默认 240 只是起点，可拖）。 */
+    var COMMIT_MIN_WIDTH = 180;
 
 
     /** diff 模式的面板：更宽，且用固定高度（避免 bottom 锚定下"内容变高就跳位"）。 */
@@ -93,12 +104,15 @@ window.__ModuleLoader__.load({
       "panel.clickForDiff": "点击一行查看该文件的差异",
       "panel.rowKeys": "在面板里按过之后再按 ↑/↓ 选行、Enter 打开",
       "panel.commits": "最近提交",
-      "time.now": "刚刚",
-      "time.minutes": " 分钟前",
-      "time.hours": " 小时前",
-      "time.days": " 天前",
+      "panel.tags": "标签",
+      "panel.tagsEmpty": "这个仓库还没有标签",
+      "panel.tagsCapped": "只显示最近 {n} 个",
+      "tag.click": "点一下看它指向的提交",
+      "tag.annotated": "附注标签",
+      "tag.lightweight": "轻量标签",
       "diff.close": "关闭差异",
       "diff.resize": "拖动右边缘调整差异宽度",
+      "diff.resizeCommit": "拖动调整提交明细栏宽度",
       "diff.worktree": "未暂存",
       "diff.index": "已暂存",
       "diff.wrap": "自动换行",
@@ -106,6 +120,31 @@ 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}%",
+      // ── 轮尾的「本轮图片改动」条 ──
+      "turnImages.title": "本轮图片改动",
+      "turnImages.titleSession": "本会话图片改动",
+      "turnImages.open": "在内置预览里打开",
+      "turnImages.compare": "在 dsh-hud 里前后对比",
+      "turnImages.more": "还有 {n} 个",
       "diff.truncated": "差异过大，仅显示前面部分",
       "diff.untrackedHint": "未跟踪文件，与空文件对比",
       "diff.commitHint": "这次提交相对其父提交的差异（只读）",
@@ -119,14 +158,15 @@ window.__ModuleLoader__.load({
       "commit.click": "点击查看这次提交改了什么",
       // ── 会话归因（本会话改过哪些文件） ──
       "session.line": "本会话改过 {n} 个文件",
-      "rows.mode.always": "侧栏 常亮",
-      "rows.mode.hover": "侧栏 悬停",
-      "rows.mode.off": "侧栏 关",
-      "rows.modeTitle": "点一下切换：常亮（行首小标记）→ 悬停（动条上完整那枚）→ 关。当前：{mode}",
+      "tools.now": "现在在跑：{name}",
+      "tools.total": "本会话共 {n} 次工具调用",
+      "tools.byTool": "各工具：",
+      "tools.skills": "skills:",
+      "tools.recent": "最近：",
       "rows.ownNone": "本会话没有改动记录",
       "rows.noRepo": "不在 git 仓库里",
       "rows.error": "读取失败（{code}）",
-      "rows.possible": "另有 {n} 个可能相关（命令旁听）",
+      "rows.possible": "命令旁听到 {n} 个可能改动的路径（{now} 个现在有差异）",
       "review.count": "已审 {n}/{total}",
       "review.staleCount": "{n} 个改动已变，需要重看",
       "review.mark": "标成「这一版我审过了」（键盘：v）",
@@ -200,12 +240,15 @@ window.__ModuleLoader__.load({
       "panel.clickForDiff": "Click a file to see its diff",
       "panel.rowKeys": "Once you have clicked in the panel: ↑/↓ to select a row, Enter to open it",
       "panel.commits": "Recent commits",
-      "time.now": "just now",
-      "time.minutes": "m ago",
-      "time.hours": "h ago",
-      "time.days": "d ago",
+      "panel.tags": "Tags",
+      "panel.tagsEmpty": "No tags in this repository yet",
+      "panel.tagsCapped": "Showing the newest {n}",
+      "tag.click": "Click to open the commit it points at",
+      "tag.annotated": "Annotated tag",
+      "tag.lightweight": "Lightweight tag",
       "diff.close": "Close diff",
       "diff.resize": "Drag the right edge to resize the diff",
+      "diff.resizeCommit": "Drag to resize the commit pane",
       "diff.worktree": "Unstaged",
       "diff.index": "Staged",
       "diff.wrap": "Wrap lines",
@@ -213,6 +256,31 @@ 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}%",
+      // ── 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)",
@@ -225,14 +293,15 @@ window.__ModuleLoader__.load({
       "commit.unknown": "Commit not found: it may have been rebased or amended away — refresh the panel",
       "commit.click": "Click to see what this commit changed",
       "session.line": "{n} file(s) changed by this session",
-      "rows.mode.always": "Sidebar on",
-      "rows.mode.hover": "Sidebar hover",
-      "rows.mode.off": "Sidebar off",
-      "rows.modeTitle": "Click to cycle: always (leading token) → hover (chip in the action strip) → off. Now: {mode}",
+      "tools.now": "Running now: {name}",
+      "tools.total": "{n} tool call(s) this session",
+      "tools.byTool": "By tool:",
+      "tools.skills": "skills:",
+      "tools.recent": "Recent:",
       "rows.ownNone": "this session has no recorded changes",
       "rows.noRepo": "not in a git repository",
       "rows.error": "read failed ({code})",
-      "rows.possible": "{n} more possibly related (from commands)",
+      "rows.possible": "{n} path(s) commands may have touched ({now} still differ)",
       "review.count": "{n}/{total} reviewed",
       "review.staleCount": "{n} changed since reviewed",
       "review.mark": "Mark this revision as reviewed (key: v)",
@@ -301,9 +370,14 @@ window.__ModuleLoader__.load({
       modified: "var(--dsw-alias-state-warn-primary, #d9a63c)",
       added: "var(--dsw-alias-state-success-primary, #3fb950)",
       deleted: "var(--dsw-alias-state-error-primary, #f06a6a)",
-      renamed: "var(--dsw-alias-brand-primary, #4b8bf5)",
+      // 与 codex-hud 的 `statEntries` 一一对应：R→cyan、C→brightBlue（我们的品牌蓝就是这个位）、
+      // 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(--dsw-alias-state-idle-primary, #8a8f98)",
+      typeChanged: "var(--dsh-hud-magenta, #d946ef)",
       untracked: "var(--dsw-alias-label-secondary, #8a8f98)",
       conflicted: "var(--dsw-alias-state-error-primary, #f06a6a)",
     };
@@ -325,6 +399,8 @@ window.__ModuleLoader__.load({
 
     /** 胶囊里分支名的显示上限；超出就中段省略，别把简写符挤出可见区。 */
     var PILL_BRANCH_MAX = 28;
+    /** 胶囊里工作区名最多几个字符（它在分支前面，不该抢分支的位置）。 */
+    var PILL_WORKSPACE_MAX = 20;
 
     /**
      * 差异行的底色：半透明，压在面板表面色之上，因此亮/暗主题都可读
@@ -336,6 +412,29 @@ window.__ModuleLoader__.load({
 
     /* --------------------------------------------------------- 本地 UI 状态 */
 
+    /** 固定缩放档位：与内置文档预览的菜单一致（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);
@@ -355,9 +454,6 @@ window.__ModuleLoader__.load({
       }
     }
 
-    /** 侧栏状态的三个档位（顺序就是点一下的循环顺序）。 */
-    var SIDEBAR_MODES = ["always", "hover", "off"];
-
     /** 「审阅进度」的存档键：按"工作区 + 文件"记下审过的那一版签名。 */
     var REVIEWED_KEY = "dsh-hud.reviewed.v1";
     /**
@@ -644,8 +740,17 @@ window.__ModuleLoader__.load({
         /** 最近提交；`commitsOid` 记住它是哪个 HEAD 取的，oid 变了才重取。 */
         commits: null,
         commitsOid: null,
+        /**
+         * 标签列表。与提交不同，**新 tag 可以打在老提交上**（HEAD 不动），所以不能只按 oid 判断；
+         * 改用"上次取的时刻"做新鲜度窗口：面板开着时每次刷新都看一眼，但 10s 内不重复问 git。
+         */
+        tags: null,
+        tagsAt: 0,
+        tagsTruncated: false,
         /** 差异栏宽度（面板右边缘可拖），持久化。 */
         diffWidth: typeof ui.diffWidth === "number" ? ui.diffWidth : DIFF_DEFAULT_WIDTH,
+        /** 提交明细栏宽度（它与差异栏之间那条抓握可拖），持久化。 */
+        commitWidth: typeof ui.commitWidth === "number" ? ui.commitWidth : COMMIT_LIST_WIDTH,
         /**
          * 会话归因：本会话改过哪些文件（宿主半按 fs 事件记的）。
          *
@@ -657,13 +762,14 @@ window.__ModuleLoader__.load({
         onlySession: ui.onlySession === true,
         /** 「只看最近一轮」开关：把清单收窄到最近这一轮动过的文件。 */
         onlyLatest: ui.onlyLatest === true,
-        /**
-         * 侧栏状态显示档位：`always` 常亮（行首 16px 格放紧凑标记）/ `hover` 悬停（动条上放完整那枚）/
-         * `off` 一处都不画。默认常亮 —— "哪个会话脏了"这件事本来就该扫一眼看到。
-         */
-        sidebarMode: SIDEBAR_MODES.indexOf(ui.sidebarMode) === -1 ? "always" : ui.sidebarMode,
         /** 这一版每个改动文件的签名（`file → signature`）；空表表示"这次没要"。 */
         review: {},
+        /**
+         * 本会话的工具活动：`active`（正在跑哪个）+ `recent` + 计数。
+         *
+         * 实时秒数由客户端本地算（`active.startedAt`），不靠把轮询压到亚秒级。
+         */
+        tools: { phase: "idle", active: null, recent: [], counts: [], skills: [], skillsDropped: 0, total: 0, updatedAt: null },
         /** 侧栏行内 chip 要的摘要：一次批量取回，按 sessionId 索引。 */
         rows: { phase: "idle", byId: {}, unavailable: false, truncated: false, updatedAt: null },
         /**
@@ -686,6 +792,8 @@ window.__ModuleLoader__.load({
       var commitInflight = null;
       /** 会话归因那次请求（在途合并）。 */
       var sessionInflight = null;
+      /** 工具活动那次请求（在途合并）。 */
+      var toolsInflight = null;
       /** 侧栏摘要那次请求（在途合并）。 */
       var rowsInflight = null;
       /** 回合投影的订阅：`{ sessionId, dispose }`；`null` 表示没接。 */
@@ -719,14 +827,23 @@ window.__ModuleLoader__.load({
         writeUi({
           onlySession: state.onlySession === true,
           onlyLatest: state.onlyLatest === true,
-          sidebarMode: state.sidebarMode,
           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,
         });
       }
 
+      /** 拖动提交栏右边那条抓握时只改内存；松手才落盘。 */
+      function setCommitWidth(width) {
+        if (typeof width !== "number" || !Number.isFinite(width)) return;
+        var next = Math.max(COMMIT_MIN_WIDTH, Math.round(width));
+        if (state.commitWidth === next) return;
+        set({ commitWidth: next });
+      }
+
       /** 拖动右边缘时只改内存；松手才落盘（persistLayout）。 */
       function setDiffWidth(width) {
         if (typeof width !== "number" || !Number.isFinite(width)) return;
@@ -743,11 +860,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()
@@ -775,6 +893,7 @@ window.__ModuleLoader__.load({
                   data: value,
                   side: worktreeRows > 0 || indexRows === 0 ? "worktree" : "index",
                   wrap: current.wrap,
+                  zoom: current.zoom,
                   hunk: 0,
                   collapsed: [],
                   errorCode: null,
@@ -916,6 +1035,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,
@@ -972,6 +1092,52 @@ window.__ModuleLoader__.load({
         set({ diff: null });
       }
 
+      /* --------------------------------------------------- 图片预览（二进制） */
+
+      /**
+       * 图片两侧的缓存：键与请求一一对应。
+       *
+       * 一张图的 base64 可能上兆，所以命中就不重取；条目数有上限（超了整表清空，
+       * 和宿主的 `CACHE_MAX_ENTRIES` 同一个思路：宁可少缓存，也不要无界增长）。
+       */
+      var imagePairs = new Map();
+      var IMAGE_CACHE_MAX = 8;
+
+      /**
+       * 同步看一眼缓存：命中就返回条目，否则 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" };
+          });
+      }
+
       /**
        * 收起右栏。提交明细把差异包在里面，所以它优先整体退掉；
        * 只有工作区差异时才只是关掉差异。
@@ -1094,6 +1260,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;
@@ -1122,9 +1301,34 @@ window.__ModuleLoader__.load({
           });
       }
 
+      /** 取标签列表（面板开着时才取）。失败只让这一段不显示。 */
+      function loadTags(cwd) {
+        // 10s 新鲜度窗口：面板每 8s 刷新一次，这里避免每次都对 git 跑一遍 for-each-ref；
+        // 又能让"刚打的新 tag"在十来秒内出现（HEAD 没动也得看到）。
+        if (state.tags !== null && Date.now() - state.tagsAt < 10000) return Promise.resolve();
+        return Promise.resolve()
+          .then(function () {
+            return ctx.connection.rpc.call(CHANNEL, "tags", { args: { cwd: cwd } });
+          })
+          .then(function (result) {
+            if (state.cwd !== cwd) return;
+            var value = result && result.ok === true ? result.value : null;
+            var tags = value && Array.isArray(value.tags) ? value.tags : [];
+            probe.log("tags", { count: tags.length, truncated: value ? value.truncated === true : false });
+            set({ tags: tags, tagsAt: Date.now(), tagsTruncated: value ? value.truncated === true : false });
+          })
+          .catch(function () {
+            if (state.cwd !== cwd) return;
+            probe.log("tags-failed", { code: "transport" });
+            set({ tags: [] , tagsAt: Date.now(), tagsTruncated: false });
+          });
+      }
+
       function refresh() {
         // 会话归因跟 status 同一条命（两个都是"当前会话 + 当前工作区"的只读事实）。
         loadSessionChanges();
+        // 工具活动只跟会话有关（没有工作区也该显示"正在跑什么"）。
+        loadTools();
         // 回合投影：会话还没物化时这里会安静地不接，下一次刷新再试。
         bindTurns(state.sessionId);
         if (!state.cwd) return Promise.resolve();
@@ -1158,6 +1362,8 @@ window.__ModuleLoader__.load({
                 && (state.commits === null || state.commitsOid !== statusValue.oid)) {
                 loadCommits(cwd, statusValue.oid);
               }
+              // 标签与 HEAD 无关（新 tag 可以打在老提交上），所以只要面板开着就问一次（10s 窗口）。
+              if (statusValue && state.panelOpen) loadTags(cwd);
               return;
             }
             var code = result && result.error && result.error.details ? result.error.details.code : null;
@@ -1182,6 +1388,9 @@ window.__ModuleLoader__.load({
           errorCode: null,
           commits: null,
           commitsOid: null,
+          tags: null,
+          tagsAt: 0,
+          tagsTruncated: false,
           // 差异与提交明细都绑定在某个工作区上：换了工作区就把它们收起，
           // 否则会显示另一个仓库的文件或提交。键盘光标同理，它指向的是清单里的行。
           diff: null,
@@ -1189,6 +1398,8 @@ window.__ModuleLoader__.load({
           cursor: null,
           phase: cwd ? "loading" : "idle",
         });
+        // 工具活动同理：换会话就清空，别显示上一个会话正在跑的工具。
+        set({ tools: { phase: "idle", active: null, recent: [], counts: [], skills: [], skillsDropped: 0, total: 0, updatedAt: null } });
         // 归因是"这个会话"的事实：换会话就先清空，别把上一个会话的标记留在新会话的清单上。
         set({ sessionChanges: { phase: "idle", files: null, possible: null, commands: [], since: null, dropped: 0, possibleDropped: 0, errorCode: null } });
         // 回合信息同理：换会话就按新会话重新接（旧的先解掉）。
@@ -1396,6 +1607,61 @@ window.__ModuleLoader__.load({
         return rowsInflight;
       }
 
+      /** 取本会话的工具活动（正在跑哪个 / 跑过哪些 / 各几次）。 */
+      function loadTools() {
+        var sessionId = state.sessionId;
+        if (!sessionId) return Promise.resolve();
+        if (toolsInflight) return toolsInflight;
+        toolsInflight = Promise.resolve()
+          .then(function () {
+            return ctx.connection.rpc.call(CHANNEL, "session-tools", { args: { sessionId: sessionId } });
+          })
+          .then(function (result) {
+            toolsInflight = null;
+            if (state.sessionId !== sessionId) return;
+            if (result && result.ok === true && result.value) {
+              var value = result.value;
+              var tools = {
+                phase: "ready",
+                active: value.active && typeof value.active === "object" ? value.active : null,
+                recent: Array.isArray(value.recent) ? value.recent : [],
+                counts: Array.isArray(value.counts) ? value.counts : [],
+                skills: Array.isArray(value.skills) ? value.skills : [],
+                skillsDropped: typeof value.skillsDropped === "number" ? value.skillsDropped : 0,
+                total: typeof value.total === "number" ? value.total : 0,
+                updatedAt: Date.now(),
+              };
+              // 内容没变就不要 set：这个节拍很密（见 TOOLS_POLL_MS），无谓的重渲染会到处都是。
+              var previous = state.tools;
+              var same = previous !== null && previous.active !== null && tools.active !== null
+                ? previous.active.callId === tools.active.callId && previous.total === tools.total
+                : previous !== null && previous.active === null && tools.active === null
+                  && previous.total === tools.total
+                  && previous.recent.length === tools.recent.length
+                  && (previous.recent.length === 0 || previous.recent[0].at === tools.recent[0].at);
+              if (same) return;
+              probe.log("session-tools", {
+                active: tools.active === null ? null : tools.active.name,
+                total: tools.total,
+                kinds: tools.counts.length,
+                // 技能单独露面：排查"技能名有没有记到"时不必再靠猜（这一版新增的字段）。
+                skills: tools.skills.length,
+              });
+              set({ tools: tools });
+              return;
+            }
+            var code = result && result.error && result.error.details ? result.error.details.code : null;
+            probe.log("session-tools-failed", { code: code || "transport" });
+            set({ tools: { phase: "error", active: null, recent: [], counts: [], skills: [], skillsDropped: 0, total: 0, updatedAt: Date.now() } });
+          })
+          .catch(function () {
+            toolsInflight = null;
+            probe.log("session-tools-failed", { code: "transport" });
+            set({ tools: { phase: "error", active: null, recent: [], counts: [], skills: [], skillsDropped: 0, total: 0, updatedAt: Date.now() } });
+          });
+        return toolsInflight;
+      }
+
       /** 审阅存档的键：**按工作区分开**，同一个文件名在别的仓库里是另一码事。 */
       function reviewedKeyOf(file) {
         return reviewKeyOf(state.cwd, file);
@@ -1443,14 +1709,6 @@ window.__ModuleLoader__.load({
         set({ reviewed: writeReviewed(next) });
       }
 
-      /** 侧栏状态档位：常亮 → 悬停 → 不显示，点一下走一档。 */
-      function cycleSidebarMode() {
-        var index = SIDEBAR_MODES.indexOf(state.sidebarMode);
-        var next = SIDEBAR_MODES[(index + 1) % SIDEBAR_MODES.length];
-        set({ sidebarMode: next });
-        persist();
-      }
-
       /** 「只看最近一轮」开关：过滤发生在 `visibleChangeRows`（渲染与键盘共用）。 */
       function toggleOnlyLatest() {
         set({ onlyLatest: state.onlyLatest !== true });
@@ -1502,12 +1760,17 @@ window.__ModuleLoader__.load({
         resetPanel: resetPanel,
         setAnchorTop: setAnchorTop,
         setDiffWidth: setDiffWidth,
+        setCommitWidth: setCommitWidth,
         persistLayout: persist,
         openDiff: openDiff,
+        loadImagePair: loadImagePair,
+        cachedImagePair: cachedImagePair,
+        loadSessionChanges: loadSessionChanges,
         closeDiff: closeDiff,
         closeDetail: closeDetail,
         setDiffSide: setDiffSide,
         toggleDiffWrap: toggleDiffWrap,
+        setZoom: setZoom,
         openCommit: openCommit,
         openCommitDiff: openCommitDiff,
         toggleCommit: toggleCommit,
@@ -1519,7 +1782,6 @@ window.__ModuleLoader__.load({
         toggleOnlySession: toggleOnlySession,
         toggleOnlyLatest: toggleOnlyLatest,
         refreshRows: refreshRows,
-        cycleSidebarMode: cycleSidebarMode,
         toggleReviewed: toggleReviewed,
         clearReviewed: clearReviewed,
       };
@@ -1781,15 +2043,6 @@ window.__ModuleLoader__.load({
             onClick: props.onClearReviewed,
           }, t("review.clearShort"))
           : null,
-        // 侧栏状态档位：常亮 → 悬停 → 关（默认常亮）。
-        h("button", {
-          type: "button",
-          className: "dshh-sessionToggle" + (props.sidebarMode === "always" ? " dshh-sessionToggleOn" : ""),
-          "data-session-filter": "sidebar",
-          "data-sidebar-mode": props.sidebarMode,
-          title: t("rows.modeTitle", { mode: t("rows.mode." + props.sidebarMode) }),
-          onClick: props.onCycleSidebarMode,
-        }, props.sidebarMode === "always" ? "◉ " : (props.sidebarMode === "hover" ? "◑ " : "○ "), t("rows.mode." + props.sidebarMode)),
         // 第二枚开关只在"这一轮的归属拿得到"时出现：拿不到就整枚不画，别给一个按不动的按钮。
         view === null || view.latestTurn === null
           ? null
@@ -1957,15 +2210,24 @@ window.__ModuleLoader__.load({
     /** 相对时间；超过 30 天直接给提交自己的日期。 */
     function commitWhen(commit, t) {
       if (typeof commit.committedAt !== "number") return commit.date || "";
-      var seconds = Math.max(0, Math.round((Date.now() - commit.committedAt) / 1000));
-      if (seconds < 60) return t("time.now");
-      var minutes = Math.round(seconds / 60);
-      if (minutes < 60) return String(minutes) + t("time.minutes");
-      var hours = Math.round(minutes / 60);
-      if (hours < 24) return String(hours) + t("time.hours");
-      var days = Math.round(hours / 24);
-      if (days < 30) return String(days) + t("time.days");
-      return commit.date || "";
+      return fullWhen(commit.committedAt);
+    }
+
+    /**
+     * 时刻一律给完整年月日 + 时分（本地时区）：`2026-10-16 14:18`。
+     *
+     * 两级简化都被否掉了：先是从"2 小时前"改成具体时间（相对时间在对账场景不够用），
+     * 再是"今天只给 `14:18`"也被否 —— 用户要**年月日都在**。所以不再分档，一视同仁。
+     * 只到分钟：提交/标签不需要秒，列一排在面板里也塞得下。
+     */
+    function fullWhen(at) {
+      var then = new Date(at);
+      return String(then.getFullYear()) + "-" + pad2(then.getMonth() + 1) + "-" + pad2(then.getDate())
+        + " " + pad2(then.getHours()) + ":" + pad2(then.getMinutes());
+    }
+
+    function pad2(value) {
+      return value < 10 ? "0" + String(value) : String(value);
     }
 
     /**
@@ -1982,7 +2244,8 @@ window.__ModuleLoader__.load({
         h("div", { className: "dshh-commits" }, commits.map(function (commit, index) {
           var refs = commit.refs || [];
           var isHead = refs.some(function (ref) { return ref.indexOf("HEAD") === 0; });
-          var tip = [t("commit.click"), "", commit.subject, commit.author + " · " + commit.date].concat(refs).join("\n");
+          var when = typeof commit.committedAt === "number" ? fullWhen(commit.committedAt) : (commit.date || "");
+          var tip = [t("commit.click"), "", commit.subject, commit.author + " · " + when].concat(refs).join("\n");
           // 整行是按钮：点了在左栏换成这次提交的改动清单（只读）。
           var open = sameCommit(commit.sha, props.activeSha);
           return h("button", {
@@ -2001,6 +2264,58 @@ window.__ModuleLoader__.load({
         })));
     }
 
+    /**
+     * 标签列表：一行一个，tag 名 + 它指向的提交 sha + 相对时间；指向当前 HEAD 的标 HEAD。
+     * 点一行 = 用右栏的提交明细看这个 tag 指向的那次提交（复用同一条管道，不新增界面）。
+     */
+    function TagList(props) {
+      // 原样保留 `null`（"还没取到"）—— 写成 `props.tags || []` 会把"没取到"和"确实没有"合并，
+      // 于是面板一打开就先闪一行"还没有标签"。
+      var tags = props.tags;
+      var t = props.t;
+      // `null` = 还没取到（先不画，避免闪一下"还没有标签"）；`[]` = 取回了、确实一个都没有 →
+      // 这时要**画一行写明**：整段不画的话，用户没法区分"这个仓库没有 tag"与"这个功能没做"（实测踩过）。
+      if (!Array.isArray(tags)) return null;
+      if (tags.length === 0) {
+        return h("div", { className: "dshh-section" },
+          h("div", { className: "dshh-sectionTitle" }, t("panel.tags")),
+          h("div", { className: "dshh-note", "data-tags-empty": "1" }, t("panel.tagsEmpty")));
+      }
+      var headSha = props.headSha;
+
+      return h("div", { className: "dshh-section" },
+        h("div", { className: "dshh-sectionTitle" }, t("panel.tags")),
+        h("div", { className: "dshh-commits" }, tags.map(function (tag, index) {
+          var isHead = typeof headSha === "string" && headSha.length > 0
+            && (tag.sha === headSha || headSha.indexOf(tag.sha) === 0);
+          var tip = [
+            t("tag.click"),
+            "",
+            tag.subject || "",
+            t(tag.annotated ? "tag.annotated" : "tag.lightweight") + " · " + tag.sha + " · "
+              + (typeof tag.committedAt === "number" ? fullWhen(tag.committedAt) : (tag.date || "")),
+          ].join("\n");
+          var open = sameCommit(tag.sha, props.activeSha);
+          return h("button", {
+            type: "button",
+            className: "dshh-commit" + (open ? " dshh-commitActive" : ""),
+            "data-tag-row": tag.name,
+            key: tag.name + ":" + String(index),
+            title: tip,
+            onClick: function () {
+              if (props.onOpen) props.onOpen(tag);
+            },
+          },
+          h("span", { className: "dshh-ctag" }, tag.name),
+          h("span", { className: "dshh-csha" }, tag.sha),
+          isHead ? h("span", { className: "dshh-chead" }, "HEAD") : null,
+          h("span", { className: "dshh-cwhen" }, commitWhen(tag, t)));
+        })),
+        props.truncated === true
+          ? h("div", { className: "dshh-note" }, t("panel.tagsCapped", { n: String(tags.length) }))
+          : null);
+    }
+
     /**
      * 一次提交的那一栏（**中间**栏，固定宽度）：元信息 + 这次提交的改动清单。
      *
@@ -2065,10 +2380,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];
@@ -2136,7 +2873,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 {
@@ -2224,12 +2962,33 @@ window.__ModuleLoader__.load({
 
     /** 分支名过长时中段省略，保留头尾信息量。 */
     function shortBranch(name) {
-      if (name.length <= PILL_BRANCH_MAX) return name;
-      var head = Math.ceil((PILL_BRANCH_MAX - 1) / 2);
-      var tail = PILL_BRANCH_MAX - 1 - head;
+      return middleEllipsis(name, PILL_BRANCH_MAX);
+    }
+
+    /** 从中间省略：保留头尾（路径/分支名两头的区分度都比中间高）。 */
+    function middleEllipsis(name, max) {
+      if (name.length <= max) return name;
+      var head = Math.ceil((max - 1) / 2);
+      var tail = max - 1 - head;
       return name.slice(0, head) + "…" + name.slice(name.length - tail);
     }
 
+    /**
+     * 工作区名 = 会话 cwd 的目录名（侧栏给工作区起的名字就是它）。
+     *
+     * 取的是 **cwd** 而不是仓库顶层：会话开在子目录时，用户认的是那个子目录；
+     * 完整路径在悬停与面板里，胶囊上只要一个能认出来的短名字。
+     */
+    function workspaceNameOf(cwd) {
+      if (typeof cwd !== 'string' || cwd.length === 0) return null;
+      var trimmed = cwd.replace(/[/\\]+$/, '');
+      if (trimmed.length === 0) return null;
+      var index = Math.max(trimmed.lastIndexOf('/'), trimmed.lastIndexOf('\\'));
+      var name = index === -1 ? trimmed : trimmed.slice(index + 1);
+      if (name.length === 0) return null;
+      return middleEllipsis(name, PILL_WORKSPACE_MAX);
+    }
+
     /**
      * 改动计数 → 简写符列表 `[{ key, mark, value }]`（只列非零项，顺序固定）。
      *
@@ -2290,7 +3049,8 @@ window.__ModuleLoader__.load({
       return {
         row: row,
         mine: mineCount,
-        possible: possibleCount,
+        possibleNow: typeof row.possibleNow === "number" ? row.possibleNow : 0,
+      possible: possibleCount,
         shorthands: shorthands,
         changed: changed,
         dirty: row.repo === true && row.dirty === true,
@@ -2298,11 +3058,6 @@ window.__ModuleLoader__.load({
       };
     }
 
-    /** 两位数以上收成 `+`（行首那格只容得下两个字符）。 */
-    function compactCount(value) {
-      return value >= 10 ? "+" : String(value);
-    }
-
     /**
      * `⋯` 菜单里的只读摘要（座位 `sidebar.workspaces.session.menu.item`）。
      *
@@ -2318,7 +3073,7 @@ window.__ModuleLoader__.load({
       var sessionId = props.sessionId;
       var store = props.store;
       var state = useStore(store);
-      if (!sessionId || state.sidebarMode === "off") return null;
+      if (!sessionId) return null;
       var row = state.rows && state.rows.byId ? state.rows.byId[sessionId] : undefined;
       var summary = rowSummaryOf(row);
       if (summary === null) return null;
@@ -2341,7 +3096,9 @@ window.__ModuleLoader__.load({
 
       var own = [];
       if (summary.mine > 0) own.push(t("session.pill", { n: String(summary.mine) }));
-      if (summary.possible > 0) own.push(t("rows.possible", { n: String(summary.possible) }));
+      if (summary.possible > 0) {
+        own.push(t("rows.possible", { n: String(summary.possible), now: String(summary.possibleNow) }));
+      }
       var ownLine = own.length === 0 ? t("rows.ownNone") : own.join(" · ");
 
       return h("div", {
@@ -2354,84 +3111,6 @@ window.__ModuleLoader__.load({
       ]);
     }
 
-    /**
-     * 常亮那一枚（座位 `sidebar.session.row.leading`）。
-     *
-     * 产品只给 16px 宽（`.slot{width:16px;flex:none}`），所以这里只放**一个双字符标记**；
-     * 优先级 = 价值顺序：先报"本会话改过几个"（只有我们有），没有就报"这个工作区脏不脏"。
-     * 产品自己在那一格显示"会话状态点"时这个座位不会被渲染 —— 那时退回悬停档。
-     */
-    function SessionLeadingToken(props) {
-      var t = props.t || function (key) { return key; };
-      var sessionId = props.sessionId;
-      var store = props.store;
-      var state = useStore(store);
-      if (!sessionId || state.sidebarMode !== "always") return null;
-      var row = state.rows && state.rows.byId ? state.rows.byId[sessionId] : undefined;
-      var summary = rowSummaryOf(row);
-      if (summary === null) return null;
-      /*
-       * 常亮档**永远有标记**：干净、非仓库、读取失败各有各的写法。
-       * 之前"干净就整枚不画"，结果是用户以为功能没生效 —— 常亮的意义就是"扫一眼总能看到"。
-       */
-      var token = null;
-      // 优先级 = 价值顺序：本会话确定改过 → 命令旁听的可能相关 → 工作区脏 → 读取失败 → 干净 → 非仓库。
-      if (summary.mine > 0) token = { text: "●" + compactCount(summary.mine), kind: "mine" };
-      else if (summary.possible > 0) token = { text: "◐" + compactCount(summary.possible), kind: "possible" };
-      else if (summary.dirty) token = { text: "!" + compactCount(summary.changed), kind: "dirty" };
-      else if (summary.row.error !== null) token = { text: "?", kind: "error" };
-      else if (summary.row.repo === true) token = { text: "✓", kind: "clean" };
-      else token = { text: "—", kind: "clean" };
-      probe.log("row-token", { sessionId: sessionId, text: token.text, kind: token.kind });
-      return h("span", {
-        className: "dshh-rowtoken dshh-rowtoken-" + token.kind,
-        "data-dsh-hud": "row-token",
-        title: rowChipTitle(summary.row, t),
-      }, token.text);
-    }
-
-    /**
-     * 悬停动条上那枚（座位 `sidebar.workspaces.session.row.action`）。
-     *
-     * 动作条只有 32px 高、平时就放一两个图标按钮，所以只放"图标级"宽度：
-     * `!` 脏 + 改动总数 + `●n`/`◐n` 本会话改动数；明细在悬停里。
-     */
-    function SessionRowChip(props) {
-      var t = props.t || function (key) { return key; };
-      var sessionId = props.sessionId;
-      var store = props.store;
-      var state = useStore(store);
-      if (!sessionId || state.sidebarMode !== "hover") return null;
-      var row = state.rows && state.rows.byId ? state.rows.byId[sessionId] : undefined;
-      var summary = rowSummaryOf(row);
-      if (summary === null) return null;
-
-      var children = [];
-      if (summary.row.repo === true) {
-        var head = summary.dirty ? "!" : "";
-        if (summary.changed > 0) head += String(summary.changed);
-        if (head !== "") children.push(h("span", { key: "git" }, head));
-      }
-      if (summary.mine > 0) children.push(h("span", { key: "mine", className: "dshh-rowchipMine" }, "●" + String(summary.mine)));
-      else if (summary.possible > 0) children.push(h("span", { key: "possible", className: "dshh-rowchipPossible" }, "◐" + String(summary.possible)));
-
-      // 干净：给一个 ✓，别让这一格空着（空着和"没做这个功能"长得一样）。
-      if (children.length === 0) children.push(h("span", { key: "clean", className: "dshh-rowchipClean" }, "✓"));
-      probe.log("row-chip", {
-        sessionId: sessionId,
-        repo: summary.row.repo === true,
-        dirty: summary.dirty,
-        changed: summary.changed,
-        mine: summary.mine,
-        possible: summary.possible,
-      });
-      return h("span", {
-        className: "dshh-rowchip",
-        "data-dsh-hud": "row-chip",
-        title: rowChipTitle(summary.row, t),
-      }, children);
-    }
-
     /**
      * 侧栏会话行**悬停卡片**里的那一块（座位 `sidebar.session.row.hover`）。
      *
@@ -2444,7 +3123,7 @@ window.__ModuleLoader__.load({
       var sessionId = props.sessionId;
       var store = props.store;
       var state = useStore(store);
-      if (!sessionId || state.sidebarMode === "off") return null;
+      if (!sessionId) return null;
       var row = state.rows && state.rows.byId ? state.rows.byId[sessionId] : undefined;
       var summary = rowSummaryOf(row);
       if (summary === null) return null;
@@ -2473,7 +3152,9 @@ window.__ModuleLoader__.load({
       if (row.error) lines.push(t("rows.error", { code: String(row.error) }));
       var own = [];
       if (mineCount > 0) own.push(t("session.pill", { n: String(mineCount) }));
-      if (possibleCount > 0) own.push(t("rows.possible", { n: String(possibleCount) }));
+      if (possibleCount > 0) {
+        own.push(t("rows.possible", { n: String(possibleCount), now: String(summary.possibleNow) }));
+      }
       // 和第二行对齐：没有改动记录时也明说一句 —— 否则卡片上会缺一行，看着像没加载出来。
       lines.push(own.length === 0 ? t("rows.ownNone") : own.join(" · "));
       if (lines.length === 0) return null;
@@ -2486,35 +3167,6 @@ window.__ModuleLoader__.load({
       }));
     }
 
-    /** 行内 chip 的悬停说明：分支、上游、各类计数、以及这个会话自己的改动。 */
-    function rowChipTitle(row, t) {
-      var lines = [];
-      if (row.repo === true) {
-        var head = branchLabel(row, t);
-        if (row.dirty === true) head += "*";
-        if (row.ahead > 0) head += " ↑" + String(row.ahead);
-        if (row.behind > 0) head += " ↓" + String(row.behind);
-        lines.push(head);
-        var shorthands = countShorthands(row.counts);
-        if (shorthands.length > 0) {
-          lines.push(shorthands.map(function (item) {
-            return t("count." + item.key) + " " + String(item.value);
-          }).join(" · "));
-        }
-        if (row.cwd) lines.push(row.cwd);
-      } else if (row.repo === false && row.error === null) {
-        // 不在仓库里也要说清（不能只丢一个路径 —— 用户看不出"为什么这一行没有分支"）。
-        lines.push(t("rows.noRepo"));
-        if (row.cwd) lines.push(row.cwd);
-      }
-      if (row.error) lines.push(t("rows.error", { code: String(row.error) }));
-      var mineCount = typeof row.mine === "number" ? row.mine : 0;
-      var possibleCount = typeof row.possible === "number" ? row.possible : 0;
-      if (mineCount > 0) lines.push(t("session.pill", { n: String(mineCount) }));
-      if (possibleCount > 0) lines.push(t("rows.possible", { n: String(possibleCount) }));
-      return lines.join("\n");
-    }
-
     function HudDockPill(props) {
       var t = props.t || function (key) { return key; };
       var sessionId = props.sessionId;
@@ -2536,6 +3188,24 @@ window.__ModuleLoader__.load({
 
       var state = useStore(store);
 
+      /**
+       * 工具胶囊的"实时秒数"滴答。
+       *
+       * **必须在组件体里、无条件、固定顺序地调用**：早先放在普通函数 `toolPillNode` 里、还带
+       * `if (now === undefined)` 的条件，就是条件钩子 —— React 会抛错，导致整行 dock 渲染失败，
+       * 两枚胶囊一起消失（用户实测"胶囊都不显示了"）。回调里再判断要不要开定时器就没这问题。
+       */
+      var tick = React.useState(Date.now());
+      var tickSet = tick[1];
+      var toolsTickKey = state.tools && state.tools.active !== null && state.tools.active !== undefined
+        ? String(state.tools.active.callId)
+        : null;
+      React.useEffect(function () {
+        if (toolsTickKey === null) return undefined;
+        var timer = window.setInterval(function () { tickSet(Date.now()); }, 500);
+        return function () { window.clearInterval(timer); };
+      }, [toolsTickKey]);
+
       React.useEffect(function () {
         if (!mainView) return;
         store.bindSession(sessionId, cwd);
@@ -2550,18 +3220,30 @@ window.__ModuleLoader__.load({
         : null;
 
       var children = [];
+      // 工作区名放在最前、且与分支用 `·` 隔开：写成 `git:(dsh-hud/main*)` 会被读成"分支叫 dsh-hud/main"。
+      // 三种"非仓库"状态也带上它 —— 工作区跟 git 没关系，没仓库时它反而更有用。
+      var workspace = workspaceNameOf(cwd);
+      if (workspace !== null) {
+        children.push(h("span", { key: "workspace", className: "dshh-workspace" }, workspace));
+        children.push(h("span", { key: "workspaceSep", className: "dshh-workspaceSep" }, " · "));
+      }
       if (state.phase === "error") {
-        children.push("⎇ " + t("pill.error"));
+        children.push(h("span", { key: "gitWraperr", className: "dshh-gitWrap" }, "git:(" + t("pill.error") + ")"));
       } else if (state.phase === "loading" || state.phase === "idle") {
-        children.push("⎇ " + t("pill.loading"));
+        children.push(h("span", { key: "gitWrapload", className: "dshh-gitWrap" }, "git:(" + t("pill.loading") + ")"));
       } else if (!state.status || !state.status.repo) {
-        children.push("⎇ " + t("pill.notRepo"));
+        children.push(h("span", { key: "gitWrapnorepo", className: "dshh-gitWrap" }, "git:(" + t("pill.notRepo") + ")"));
       } else {
         var status = state.status;
-        var head = "⎇ " + shortBranch(branchLabel(status, t)) + (status.dirty ? "*" : "");
-        if (status.ahead > 0) head += " ↑" + String(status.ahead);
-        if (status.behind > 0) head += " ↓" + String(status.behind);
-        children.push(head);
+        // `git:(branch*)` —— codex-hud 的 gitSegment 就是这么拼的，配色也照它：
+        // `git:(` 与 `)` 品红（colors.git）、分支名与 ↑↓ 青（colors.gitBranch），
+        // 而 `*` 在括号**里面**、与分支名同色。
+        children.push(h("span", { key: "gitOpen", className: "dshh-gitWrap" }, "git:("));
+        children.push(h("span", { key: "branch", className: "dshh-branch" },
+          shortBranch(branchLabel(status, t)) + (status.dirty ? "*" : "")));
+        children.push(h("span", { key: "gitClose", className: "dshh-gitWrap" }, ")"));
+        if (status.ahead > 0) children.push(h("span", { key: "ahead", className: "dshh-ahead" }, " ↑" + String(status.ahead)));
+        if (status.behind > 0) children.push(h("span", { key: "behind", className: "dshh-ahead" }, " ↓" + String(status.behind)));
 
         // 简写符：只列非零项，按固定顺序，各自上色（M 黄 / A 绿 / D 红 / ? 灰 …）。
         // 与侧栏行内 chip 共用 `countShorthands` —— 两处各写一套算法一定会漂。
@@ -2608,7 +3290,132 @@ window.__ModuleLoader__.load({
           onClick: function () {
             store.togglePanel();
           },
-        }, children));
+        }, children),
+        // 工具活动那一枚并排在后面 —— dock 是竖列，独立注册会另起一整行（用户实测"换行了"）。
+        toolPillNode(state, { t: t, now: props.now === undefined ? tick[0] : props.now }));
+    }
+
+    /**
+     * 本会话工具活动的胶囊（座位 `conversation.input.dock`，与 Git 胶囊各自一行）。
+     *
+     * 照 codex-hud 那条 `Tools:` 的口径：**正在跑**就报工具名与实时秒数（秒数本地算，不靠轮询）；
+     * 空闲就报最近一次是哪个工具、本会话一共几次（失败打叉）。完全没跑过工具时整枚不画 ——
+     * 空白注册会白占一行（dock 是竖列，一条注册就是一整行）。
+     */
+    /**
+     * 工具活动那一枚（**与 Git 胶囊同一行**，所以它只是那一行里的第二个节点，不是独立注册）。
+     *
+     * 照 codex-hud 那条 `Tools:` 的口径：**正在跑**就报工具名与实时秒数（秒数本地算，不靠轮询）；
+     * 空闲就报最近一次是哪个工具、本会话一共几次（失败打叉）。完全没跑过工具时返回 null ——
+     * 不画它，但那一行仍然在（Git 胶囊自己不消失，界面不会跳）。
+     */
+    function toolPillNode(state, options) {
+      var t = options.t;
+      var tools = state.tools;
+      if (!tools || (tools.active === null && tools.total === 0)) return null;
+      var now = options.now;
+
+      var children = [];
+      if (tools.active !== null) {
+        // 配色对齐 codex-hud 的 activity-lines：`◐` 黄 + 工具名青 + 目标/耗时用默认正文色。
+        var elapsed = toolElapsedLabel(tools.active, now);
+        children.push(h("span", { key: "glyph", className: "dshh-toolsGlyph dshh-toolsGlyphRun" }, "\u25d0"));
+        children.push(h("span", { key: "name", className: "dshh-toolsName" },
+          " " + String(tools.active.name === undefined ? "?" : tools.active.name)));
+        // 带上参数摘要（codex-hud 就是 `◐ exec_command: pnpm test`）—— 技能调用因此能看出是哪个技能。
+        if (typeof tools.active.summary === "string" && tools.active.summary.length > 0) {
+          children.push(": " + tools.active.summary);
+        }
+        if (elapsed !== null) children.push(" " + elapsed);
+      } else {
+        // 空闲时把**每个工具各自几次**铺出来（codex-hud 那条 `Tools:` 就是这么给的）：
+        // `✓ bash ×16 │ ✓ apply_patch ×6 │ ✗ write_stdin ×3`。名字与数字贴在一起，
+        // 就不会再有"×54 是总数还是这个工具的次数"那种误读。
+        //
+        // 最多铺 3 个（按次数排序，宿主已经排好），其余收成 `+k` —— 悬停里有完整清单与最近几条。
+        // `skill` 工具本身对用户没信息量（`skill ×2` 说明不了是哪个技能）—— codex-hud 也是直接列技能名。
+        // 所以把它从计数里剔掉，改由下面那段技能清单承担；总次数不受影响。
+        var toolCounts = tools.counts.filter(function (item) { return item.name !== "skill"; });
+        var shown = toolCounts.slice(0, 3);
+        for (var i = 0; i < shown.length; i += 1) {
+          var item = shown[i];
+          var bad = item.ok === false;
+          if (i > 0) children.push(" \u2502 ");
+          children.push(h("span", {
+            key: "glyph" + String(i),
+            className: "dshh-toolsGlyph" + (bad ? " dshh-toolsGlyphBad" : " dshh-toolsGlyphOk"),
+          }, bad ? "\u2717" : "\u2713"));
+          children.push(" " + String(item.name) + " \u00d7" + String(item.count));
+        }
+        // 技能清单：名字直接铺出来（"会话用了哪些 skill"要能一眼看到，不只是次数）。
+        // 标签用字面的 `skills:`（不翻译）—— 与 `git:(` 同一套：它是约定写法，不是描述。
+        var skills = tools.skills || [];
+        if (skills.length > 0) {
+          if (children.length > 0) children.push(" \u2502 ");
+          children.push(t("tools.skills") + " ");
+          for (var k = 0; k < skills.length && k < SKILLS_SHOWN; k += 1) {
+            if (k > 0) children.push(" \u00b7 ");
+            children.push(h("span", {
+              key: "skill" + String(k),
+              className: skills[k].ok === false ? "dshh-toolsGlyphBad" : "dshh-skillName",
+            }, String(skills[k].name) + " \u00d7" + String(skills[k].count)));
+          }
+          if (skills.length > SKILLS_SHOWN) children.push(" +" + String(skills.length - SKILLS_SHOWN));
+          if (tools.skillsDropped > 0) children.push(" +" + String(tools.skillsDropped));
+        }
+        if (toolCounts.length > shown.length) children.push(" +" + String(toolCounts.length - shown.length));
+      }
+
+      // 渲染现场：画没画、画的是哪一档（与 row-chip/row-token 同一套排查手段）。
+      probe.log("tools-pill", {
+        active: tools.active === null ? null : String(tools.active.name),
+        total: tools.total,
+      });
+      return h("span", {
+        className: "dshh-pill dshh-toolsPill",
+        "data-dsh-hud": "tools-pill",
+        key: "tools",
+        title: toolsTitle(tools, t),
+      }, children);
+    }
+
+    /** 已经跑了多久：`1.2s` / `12s`（拿不到开始时刻就返回 null，不编一个数）。 */
+    function toolElapsedLabel(active, now) {
+      if (active === null || typeof active !== "object") return null;
+      if (typeof active.startedAt !== "number") return null;
+      var seconds = Math.max(0, (now - active.startedAt) / 1000);
+      return seconds < 10 ? seconds.toFixed(1) + "s" : String(Math.round(seconds)) + "s";
+    }
+
+    /** 工具胶囊的悬停说明：在跑什么、一共几次、各工具几次、最近几条的结果与耗时。 */
+    function toolsTitle(tools, t) {
+      var lines = [];
+      if (tools.active !== null) {
+        lines.push(t("tools.now", { name: String(tools.active.name) }));
+        if (typeof tools.active.summary === "string" && tools.active.summary.length > 0) lines.push(tools.active.summary);
+      }
+      lines.push(t("tools.total", { n: String(tools.total) }));
+      if (tools.counts.length > 0) {
+        lines.push(t("tools.byTool") + " " + tools.counts.map(function (item) {
+          return String(item.name) + " \u00d7" + String(item.count);
+        }).join(" \u00b7 "));
+      }
+      if (tools.skills && tools.skills.length > 0) {
+        lines.push(t("tools.skills") + " " + tools.skills.map(function (item) {
+          return String(item.name) + " \u00d7" + String(item.count) + (item.ok === false ? " (\u2717)" : "");
+        }).join(" \u00b7 "));
+      }
+      var recent = tools.recent.slice(0, 3);
+      if (recent.length > 0) {
+        lines.push(t("tools.recent"));
+        lines.push(recent.map(function (item) {
+          var mark = item.ok === false ? "\u2717" : "\u2713";
+          var ms = typeof item.ms === "number" ? " " + (item.ms / 1000).toFixed(1) + "s" : "";
+          var summary = typeof item.summary === "string" && item.summary.length > 0 ? " \u00b7 " + item.summary : "";
+          return mark + " " + String(item.name) + ms + summary;
+        }).join("\n"));
+      }
+      return lines.join("\n");
     }
 
     /* ------------------------------------------------------- 悬浮面板 */
@@ -2634,13 +3441,24 @@ window.__ModuleLoader__.load({
      * @param layout - `panelLayout()` 的结果。
      * @param diffWidth - 差异栏的目标宽度。
      */
-    function panelWidthFor(layout, diffWidth) {
-      var middle = layout.commit === true ? COMMIT_LIST_WIDTH : 0;
-      if (layout.diff !== true && layout.commit !== true) return PANEL_WIDTH;
-      var right = layout.diff === true ? RESIZE_GRIP_WIDTH + (typeof diffWidth === "number" ? diffWidth : DIFF_DEFAULT_WIDTH) : 0;
+    function panelWidthFor(layout, diffWidth, commitWidth) {
+      var hasCommit = layout.commit === true;
+      var hasDiff = layout.diff === true;
+      if (!hasCommit && !hasDiff) return PANEL_WIDTH;
+      // **逐栏钳到自己的下限**：只对总宽加一个 floor 是不够的 —— 存档里写着 40px 时，
+      // 总宽仍然会按 40 算（floor 只保证"不小于最小总和"，但差额会被算到别的栏头上）。
+      var middle = hasCommit
+        ? Math.max(COMMIT_MIN_WIDTH, typeof commitWidth === "number" ? commitWidth : COMMIT_LIST_WIDTH)
+        : 0;
+      var right = hasDiff
+        ? Math.max(DIFF_MIN_WIDTH, typeof diffWidth === "number" ? diffWidth : DIFF_DEFAULT_WIDTH)
+        : 0;
+      // 两条抓握：面板右边缘那条（调差异栏；只有提交栏时调提交栏）—— 它是绝对定位、**不占宽**，
+      // 但宽度里要预留 6px 让位，否则它压在内容上；栏间那条是真实的一格，占宽。
+      var outerGrip = RESIZE_GRIP_WIDTH;
+      var innerGrip = hasCommit && hasDiff ? RESIZE_GRIP_WIDTH : 0;
       var available = window.innerWidth - 2 * VIEWPORT_MARGIN;
-      var min = PANEL_WIDTH + middle + (layout.diff === true ? RESIZE_GRIP_WIDTH + DIFF_MIN_WIDTH : 0);
-      return Math.max(Math.min(min, available), Math.min(PANEL_WIDTH + middle + right, available));
+      return Math.min(PANEL_WIDTH + middle + innerGrip + right + outerGrip, available);
     }
 
     /** 把位置夹回视口内，避免拖到屏幕外再也点不到。 */
@@ -2700,7 +3518,7 @@ window.__ModuleLoader__.load({
       // 从 store 现读，别用可能过期的渲染闭包（模式切换会改宽度）。
       function currentPanelWidth() {
         var snapshot = store.getSnapshot();
-        return panelWidthFor(panelLayout(snapshot), snapshot.diffWidth);
+        return panelWidthFor(panelLayout(snapshot), snapshot.diffWidth, snapshot.commitWidth);
       }
 
       // Esc 收起面板。用捕获阶段监听：焦点可能在任何输入框里，捕获阶段先拿到。
@@ -2833,7 +3651,8 @@ window.__ModuleLoader__.load({
         if (!grip) return undefined;
         var onMove = function (event) {
           if (event.pointerId !== grip.pointerId) return;
-          store.setDiffWidth(grip.startWidth - (event.clientX - grip.startX));
+          if (grip.kind === "commit") store.setCommitWidth(grip.startWidth - (event.clientX - grip.startX));
+          else store.setDiffWidth(grip.startWidth - (event.clientX - grip.startX));
         };
         var finish = function (event) {
           if (event.pointerId !== grip.pointerId) return;
@@ -2852,15 +3671,21 @@ window.__ModuleLoader__.load({
 
       if (!state.panelOpen) return null;
 
-      function onGripPointerDown(event) {
+      /**
+       * 抓握按下。
+       *
+       * `kind` 决定它调哪一栏：`diff` = 面板右边缘那条（调差异栏）；`commit` = 提交栏右边那条
+       * （调提交明细栏）。只有提交栏、没有差异栏时，右边缘那条也调提交栏 —— 它是右边界上唯一
+       * 还能变宽的东西，不该按下去没反应。
+       */
+      function onGripPointerDown(kind, event) {
         if (event.button !== 0) return;
         var snapshot = store.getSnapshot();
         event.preventDefault();
-        setGrip({
-          pointerId: event.pointerId,
-          startX: event.clientX,
-          startWidth: typeof snapshot.diffWidth === "number" ? snapshot.diffWidth : DIFF_DEFAULT_WIDTH,
-        });
+        var start = kind === "commit"
+          ? (typeof snapshot.commitWidth === "number" ? snapshot.commitWidth : COMMIT_LIST_WIDTH)
+          : (typeof snapshot.diffWidth === "number" ? snapshot.diffWidth : DIFF_DEFAULT_WIDTH);
+        setGrip({ kind: kind, pointerId: event.pointerId, startX: event.clientX, startWidth: start });
       }
 
       function onHeaderPointerDown(event) {
@@ -2897,7 +3722,7 @@ window.__ModuleLoader__.load({
         position: "fixed",
         zIndex: 30,
         boxSizing: "border-box",
-        width: panelWidthFor(layout, state.diffWidth),
+        width: panelWidthFor(layout, state.diffWidth, state.commitWidth),
         maxWidth: "calc(100vw - 16px)",
         display: "flex",
         flexDirection: "column",
@@ -2976,8 +3801,6 @@ window.__ModuleLoader__.load({
             onToggleLatest: function () { store.toggleOnlyLatest(); },
             review: reviewView(state),
             onClearReviewed: function () { store.clearReviewed(); },
-            sidebarMode: state.sidebarMode,
-            onCycleSidebarMode: function () { store.cycleSidebarMode(); },
           }),
           // 顺序：改动概览 → **改动清单** → 最近提交。清单是"现在要处理的"，
           // 提交是背景信息；清单放前面，一屏不够时先看到的是眼前的事。
@@ -3005,6 +3828,24 @@ window.__ModuleLoader__.load({
             // 再点一次打开着的那条 = 收起明细（打开提交不改左栏，只高亮它）。
             onOpen: function (commit) { store.toggleCommit(commit); },
           }),
+          h(TagList, {
+            tags: state.tags,
+            truncated: state.tagsTruncated,
+            t: t,
+            headSha: state.status && state.status.oid ? state.status.oid : null,
+            activeSha: commitMode ? state.commit.sha : null,
+            // 点一个 tag = 看它指向的那次提交（tag 自己不是提交，所以把提交信息填进去）。
+            onOpen: function (tag) {
+              store.toggleCommit({
+                sha: tag.sha,
+                subject: tag.subject || "",
+                author: "",
+                date: tag.date || "",
+                committedAt: typeof tag.committedAt === "number" ? tag.committedAt : null,
+                refs: [tag.name],
+              });
+            },
+          }),
         ];
         listBody = h.apply(null, ["div", { className: "dshh-body" }].concat(repoChildren));
       } else {
@@ -3024,10 +3865,18 @@ window.__ModuleLoader__.load({
               onOpenFile: function (file) { store.openCommitDiff(file); },
               activeFile: commitOpenFile,
               cursor: state.cursor,
-              width: COMMIT_LIST_WIDTH,
+              width: typeof state.commitWidth === "number" ? state.commitWidth : COMMIT_LIST_WIDTH,
+            })
+            : null,
+          commitMode && diffMode
+            ? h("div", {
+              className: "dshh-grip dshh-gripBetween",
+              "data-dsh-hud": "grip-commit",
+              title: t("diff.resizeCommit"),
+              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 },
@@ -3075,9 +3924,17 @@ window.__ModuleLoader__.load({
             className: "dshh-grip",
             "data-dsh-hud": "grip",
             title: t("diff.resize"),
-            onPointerDown: onGripPointerDown,
+            onPointerDown: function (event) { onGripPointerDown("diff", event); },
           })
-          : null,
+          : commitMode
+            // 只有提交栏：右边缘这条改成调它（否则按下去没反应）。
+            ? h("div", {
+              className: "dshh-grip",
+              "data-dsh-hud": "grip-commit",
+              title: t("diff.resizeCommit"),
+              onPointerDown: function (event) { onGripPointerDown("commit", event); },
+            })
+            : null,
         h("div", { className: "dshh-footer" },
           h("span", null, t("panel.readonly")),
           h("span", null, state.updatedAt ? t("panel.updated") + timeLabel(state.updatedAt) : "")));
@@ -3093,7 +3950,7 @@ window.__ModuleLoader__.load({
       // dock 座位给的是整栏宽的一行，而输入卡片有自己的最大宽度并居中
       // （--dsh-composer-card-max-width）。外层容器复刻框架自带 dock 占位元素
       // （队列公告）的几何，胶囊才会真正贴在输入卡片上方左端，而不是飘到栏的最左。
-      ".dshh-dock{box-sizing:border-box;display:flex;justify-content:flex-start;",
+      ".dshh-dock{box-sizing:border-box;display:flex;align-items:center;gap:6px;justify-content:flex-start;",
       "width:calc(100% - var(--dsh-composer-side-clearance,16px) - var(--dsh-composer-side-clearance,16px)",
       " - var(--dsh-composer-dock-inset,8px) - var(--dsh-composer-dock-inset,8px));",
       "max-width:calc(var(--dsh-composer-card-max-width,952px) - var(--dsh-composer-dock-inset,8px) - var(--dsh-composer-dock-inset,8px));",
@@ -3146,37 +4003,46 @@ window.__ModuleLoader__.load({
       "color:var(--dsw-alias-brand-primary,#4b8bf5);}",
       ".dshh-markerPossible{color:var(--dsw-alias-state-warn-primary,#d9a63c);opacity:.75;}",
       // 行尾的审阅标记：`○` 未审 / `✓` 这一版已审 / `✓`(黄) 改动已变。
-      // 侧栏会话行里那枚 chip：一行只有 32px 高、悬停才露出来，所以它必须很小。
-      // 侧栏会话行里那枚 chip：一行只有 32px 高、悬停动作条很窄，所以它必须小且不许撑宽。
-      ".dshh-rowchip{display:inline-flex;align-items:center;gap:2px;flex:none;max-width:72px;",
-      "font-family:ui-monospace,Consolas,monospace;font-size:10.5px;line-height:1;",
-      "white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--dsw-alias-label-secondary,#8a8f98);}",
-      ".dshh-rowchipMine{color:var(--dsw-alias-brand-primary,#4b8bf5);}",
-      // 行首常亮那枚：产品给的格子只有 16px，所以最多两个字符、不许换行。
-      ".dshh-rowtoken{font-family:ui-monospace,Consolas,monospace;font-size:10px;line-height:1;",
-      "white-space:nowrap;flex:none;letter-spacing:-0.02em;}",
       // `⋯` 菜单里那条只读摘要：像一条说明，不像一个可点的菜单项。
       ".dshh-menureadout{display:flex;flex-direction:column;gap:2px;padding:4px 10px 6px;",
       "font-size:11px;line-height:1.5;color:var(--dsw-alias-label-tertiary,var(--dsw-alias-label-secondary,#8a8f98));",
       "cursor:default;user-select:text;max-width:260px;}",
       ".dshh-menureadoutLine{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}",
-      ".dshh-rowtoken-mine{color:var(--dsw-alias-brand-primary,#4b8bf5);}",
-      ".dshh-rowtoken-possible{color:var(--dsw-alias-state-warn-primary,#d9a63c);}",
-      ".dshh-rowtoken-dirty{color:var(--dsw-alias-state-warn-primary,#d9a63c);opacity:.75;}",
-      ".dshh-rowtoken-clean{color:var(--dsw-alias-label-tertiary,rgba(138,143,152,0.6));}",
-      ".dshh-rowtoken-error{color:var(--dsw-alias-state-warn-primary,#d9a63c);}",
-      ".dshh-rowchipClean{color:var(--dsw-alias-state-success-primary,#3fb950);opacity:.8;}",
       // 悬停卡片里那块详情：跟着卡片自己的字号，只做行距与弱化。
       ".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;}",
-      ".dshh-rowchipPossible{color:var(--dsw-alias-state-warn-primary,#d9a63c);}",
+      // 「已审 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-markerOther{color:var(--dsw-alias-label-dimmed,rgba(138,143,152,0.6));}",
+      ".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-secondary,#8a8f98);}",
+      // 工具活动胶囊：与 Git 胶囊同形，但它是只读读数，指针不该是“可点”。
+      // 与 codex-hud 对齐的几支色（它的默认配色表：git=magenta、gitBranch=cyan、project=yellow）：
+      // 产品没有青/品红的语义变量（只有 button-info-*，那是按钮用的），所以这两支写死值，
+      // 但都走变量、可被覆盖。
+      ".dshh-workspace{color:var(--dsw-alias-state-warn-primary,#d9a63c);flex:none;}",
+      ".dshh-gitWrap{color:var(--dsh-hud-magenta,#d946ef);flex:none;}",
+      ".dshh-branch{color:var(--dsh-hud-cyan,#22d3ee);flex:none;}",
+      ".dshh-ahead{color:var(--dsh-hud-cyan,#22d3ee);flex:none;}",
+      ".dshh-workspaceSep{color:var(--dsw-alias-label-tertiary,rgba(138,143,152,0.6));flex:none;}",
+      ".dshh-toolsPill{cursor:default;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}",
+      // 配色对齐 codex-hud 的 activity-lines：只有状态符上色，名字/次数/分隔符都用正文色。
+      ".dshh-toolsGlyph{flex:none;}",
+      ".dshh-toolsGlyphOk{color:var(--dsw-alias-state-success-primary,#3fb950);}",
+      ".dshh-toolsGlyphRun{color:var(--dsw-alias-state-warn-primary,#d9a63c);}",
+      ".dshh-toolsGlyphBad{color:var(--dsw-alias-state-error-primary,#f06a6a);}",
+      // 唯一一处写死的颜色：codex-hud 把"正在跑的工具名"画成青色，产品没有对应的语义变量
+      // （只有 button-info-*，那是按钮用的）。留 `--dsh-hud-tool-name` 作为覆盖钩子。
+      ".dshh-toolsName{color:var(--dsh-hud-cyan,#22d3ee);}",
+      // 技能名与工具名同色系但不同支：工具那支是青，技能走品牌色（一眼能分开）。
+      ".dshh-skillName{color:var(--dsw-alias-brand-primary,#4b8bf5);}",
       ".dshh-section{display:flex;flex-direction:column;gap:4px;}",
       ".dshh-list{display:flex;flex-direction:column;gap:1px;max-height:30vh;overflow:auto;",
       "border-top:1px solid var(--dsw-alias-border-l1,rgba(127,127,127,0.16));padding-top:4px;}",
@@ -3223,6 +4089,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);}",
@@ -3242,6 +4159,9 @@ window.__ModuleLoader__.load({
       "box-shadow:inset 2px 0 0 var(--dsw-alias-brand-primary,#4b8bf5);}",
       ".dshh-hunkMark{text-align:right;}",
       ".dshh-grip{position:absolute;top:0;right:0;bottom:0;width:6px;cursor:col-resize;z-index:5;}",
+      // 栏间那条抓握**必须占宽**：它是提交栏与差异栏之间的真实一格。绝对定位会让它贴到面板右边缘，
+      // 与外面那条叠在一起（面板右边缘那条不占宽，靠宽度公式里预留的 6px 让位）。
+      ".dshh-gripBetween{position:static;flex:none;width:6px;}",
       ".dshh-grip:hover{background:var(--dsw-alias-border-l2,rgba(127,127,127,0.35));}",
       ".dshh-diffview{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;min-height:0;}",
       ".dshh-toolbar{display:flex;align-items:center;gap:4px;padding:5px 8px;flex:none;overflow:hidden;",
@@ -3380,6 +4300,17 @@ window.__ModuleLoader__.load({
         };
       }, "dsh-hud: session rows poll");
 
+      // 工具活动单独一条节拍（3s；宿主是内存读，密一点才看得到"正在跑"）。
+      ctx.effect(function () {
+        var id = window.setInterval(function () {
+          if (document.visibilityState === "hidden") return;
+          loadTools();
+        }, TOOLS_POLL_MS);
+        return function () {
+          window.clearInterval(id);
+        };
+      }, "dsh-hud: tool activity poll");
+
       // `⋯` 菜单里的一条只读摘要：行尾拿不到常亮座位，这里是最实在的"完整信息"落点。
       ctx.slots.inject("sidebar.workspaces.session.menu.item", function () {
         return ctx.slots.register({
@@ -3393,31 +4324,6 @@ window.__ModuleLoader__.load({
         }, SessionMenuSummary);
       });
 
-      // 行首那格（常亮档）：产品只给 16px，所以是一枚双字符标记。
-      ctx.slots.inject("sidebar.session.row.leading", function () {
-        return ctx.slots.register({
-          name: "sidebar.session.row.leading",
-          id: "dsh-hud-session-leading",
-          order: 30,
-          locale: NS,
-          inject: function () {
-            return { store: store };
-          },
-        }, SessionLeadingToken);
-      });
-
-      // 侧栏每条会话行悬停时的那组动作：产品自己的动作也只是普通条目，这里挂一枚只读状态。
-      ctx.slots.inject("sidebar.workspaces.session.row.action", function () {
-        return ctx.slots.register({
-          name: "sidebar.workspaces.session.row.action",
-          id: "dsh-hud-session-status",
-          order: 30,
-          locale: NS,
-          inject: function () {
-            return { store: store };
-          },
-        }, SessionRowChip);
-      });
 
       // 悬停卡片里那块详情（宽敞的地方；动作条那枚放不下的东西都在这儿）。
       ctx.slots.inject("sidebar.session.row.hover", function () {
@@ -3432,6 +4338,7 @@ window.__ModuleLoader__.load({
         }, SessionRowHoverChip);
       });
 
+
       ctx.slots.inject("conversation.input.dock", function () {
         return ctx.slots.register({
           name: "conversation.input.dock",
@@ -3443,6 +4350,20 @@ 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);
+      });
     }
 
     exports.apply = apply;