dsh-conversation-navigator 0.1.22 → 0.1.24

package/README.md

@@ -1,6 +1,14 @@
 # DSH 会话导航插件(dsh-conversation-navigator)
 
-Codex 风格的 **DeepSeek Harness(DSH)Web 端会话导航面板**:在对话页**右侧**悬浮展示按轮折叠的对话大纲,点击任意节点平滑跳转,滚动对话时实时高亮当前阅读位置,步次徽标配色与内置"轨迹"视图统一。
+[![npm](https://img.shields.io/npm/v/dsh-conversation-navigator?style=flat-square&color=blue)](https://www.npmjs.com/package/dsh-conversation-navigator)
+[![downloads](https://img.shields.io/npm/dm/dsh-conversation-navigator?style=flat-square&color=blue)](https://www.npmjs.com/package/dsh-conversation-navigator)
+[![stars](https://img.shields.io/github/stars/gjj-star/dsh-conversation-navigator?style=flat-square&color=green)](https://github.com/gjj-star/dsh-conversation-navigator)
+[![license](https://img.shields.io/github/license/gjj-star/dsh-conversation-navigator?style=flat-square&color=teal)](https://github.com/gjj-star/dsh-conversation-navigator)
+[![dependencies](https://img.shields.io/badge/dependencies-0-brightgreen?style=flat-square)](https://www.npmjs.com/package/dsh-conversation-navigator)
+[![awesome · DSH plugin](https://awesome-dsh-plugin.com/badge.svg)](https://github.com/awesome-dsh-plugin/awesome-dsh-plugin)
+[![DeepSeek Harness](https://img.shields.io/badge/DeepSeek_Harness-Plugin-blue?style=flat-square)](https://github.com/deepseek-ai/deepseek-harness)
+
+**DeepSeek Harness(DSH)Web 端会话导航面板**:在对话页**右侧**悬浮展示按轮折叠的对话大纲,点击任意节点平滑跳转,滚动对话时实时高亮当前阅读位置,步次徽标配色与内置"轨迹"视图统一。
 
 纯浏览器插件(无宿主行为)、纯 JavaScript、零构建、零 npm 依赖(按钮/Tooltip 复用 DSH 内核 seed 的官方 primitives)。
 
@@ -14,14 +22,14 @@ Codex 风格的 **DeepSeek Harness(DSH)Web 端会话导航面板**:在对话页*
 - **关键词过滤**:点击左上角搜索图标呼出输入框,只按「你的提问 + 助手实际回复文本」过滤(上下文、工具、命令、压缩、推理等不参与匹配),命中词高亮,列表文本自动定位到关键词处
 - **展开/折叠步次**:点击轮次行右侧的箭头按钮(`▸ N`,展开时旋转为 `▾`)平滑展开/折叠该轮的步次明细(助手回复、工具调用、命令、压缩点等)
 - **悬停查看全文**:鼠标在轮次行停留片刻,气泡显示该轮用户提问的完整原文,不再被单行截断
-- **显示 / 隐藏轮次**:头部切换按钮一键切换两种风格——「显示轮次」为经典分组视图(压缩等系统事件与轮次同级加粗展示);「隐藏轮次」为极简视图,每一行统一为轨迹徽标 + 文本(用户 = 业务蓝、助手 = 紫罗兰、压缩 = 中性灰),搜索框展开时按钮自动让位
+- **显示 / 隐藏 / 极简三种模式**:头部切换按钮三态循环——「显示轮次」为经典分组视图(压缩等系统事件与轮次同级加粗展示);「隐藏轮次」每行统一为轨迹徽标 + 文本(用户 = 业务蓝、助手 = 紫罗兰、压缩 = 中性灰);「极简模式」收起时只露行内指示条(当前 = 品牌色实色、非当前 = 主题前景色掺 40%),悬停从右向左展开 7 行画幅的定位面板(点击跳转、悬停全文气泡、超 7 条仅滑块滚动),外置悬浮按钮返回「显示轮次」,搜索框展开时按钮自动让位
 - **丝滑动效**:面板开合淡入淡出、步次展开/折叠高度过渡、过滤结果逐条级联淡入、折叠箭头旋转——全部纯 CSS 实现,零依赖
 - **点击定位**:点击轮次主体或步次条目,平滑滚动跳转到对话中对应位置(不改变折叠状态)
 - **加载更早 / 加载全部**:面板顶部两个按钮——「加载更早」向后翻一页、「加载全部」一键把所有历史轮次载入导航,之后可任意跳转(页面默认仍懒加载,只有点按钮才补载)
 - **位置跟踪**:手动滚动对话时,面板自动高亮并跟随当前正在阅读的轮次
 - **右侧定位**:面板锚定视口右侧,收起/展开左侧边栏时纹丝不动
 - **回到最新 / 全部折叠**:面板底部两个快捷按钮
-- **轨迹配色**:用户/插话 = 业务蓝、上下文 = 成功绿、助手 = 紫罗兰、工具 = 琥珀、压缩 = 中性灰(取自 `dsh-client-ui-trajectory` 的 kindTag 主题 token,自动适配明暗主题)
+- **轨迹配色**:用户/插话 = 业务蓝、上下文 = 成功绿、助手 = 紫罗兰、工具 = 琥珀、压缩 = 中性灰(与内置轨迹视图一致的 `--dsw` 主题 token,自动适配明暗主题)
 - **DSH 原生风格**:操作按钮复用官方 `Button`/`Tooltip` 组件与官方图标(搜索、关闭);其余操作图标(导航、加载更早、加载全部、回到最新、全部折叠、切换轮次等)为按 DSH 描边风格手绘的内联 SVG,`currentColor` 自动适配明暗主题
 - 切换工作区/会话自动跟随并重建大纲
 
@@ -47,7 +55,7 @@ dsh plugin --profile web add ./dsh-conversation-navigator-<version>.tgz
 
 ## 更新
 
-修改 `lib/client.js` 后重启 `dsh web` 即可;插件没有持久状态,展开/折叠、显示/隐藏轮次、搜索关键词等界面状态仅存于页面会话内。
+修改 `lib/client.js` 后重启 `dsh web` 即可;插件没有持久状态,展开/折叠、显示/隐藏/极简模式、搜索关键词等界面状态仅存于页面会话内。
 
 ## 工作原理
 
@@ -58,7 +66,7 @@ dsh plugin --profile web add ./dsh-conversation-navigator-<version>.tgz
 - 位置跟踪:捕获 `[data-conversation-scroll]` 滚动容器的 scroll 事件(节流 120ms),计算视口顶部首个可见节点
 - 关键词过滤:仅为 `user` 与 `assistant-step` 节点提取检索文本(`dialogueText`),大小写不敏感匹配,命中片段以 `<mark>` 高亮并按首个命中位置截取显示窗口
 - 悬停全文:轮次头气泡读取 `fullDialogueText`(用户节点全部文本块拼接),用 `Tooltip` 展示并限宽 340px
-- 显示/隐藏轮次:头部按钮切换 `turnsHidden`,隐藏时仅把轮次头标题替换为轨迹徽标(`titleNode` 策略),分组结构不变;搜索框展开时按钮让位
+- 显示/隐藏/极简模式:头部按钮循环切换 `viewMode`(full/hidden/minimal),隐藏时仅把轮次头标题替换为轨迹徽标(`titleNode` 策略);极简时渲染独立的定位面板(收起仅露行内指示条,悬停展开),搜索框展开时按钮让位
 - 样式:`Button`/`Tooltip`/搜索与关闭图标复用 `@deepseek-ai/dsh-client-ui-primitives`,其余图标为内联 SVG;面板容器自建 `<style>` 注入,颜色使用 `--dsw-*` 主题 token;插件卸载时随 fiber 清理
 
 ## 兼容性说明
@@ -73,6 +81,8 @@ dsh plugin --profile web add ./dsh-conversation-navigator-<version>.tgz
 lib/
   index.js   # 宿主侧空入口(纯浏览器插件)
   client.js  # 浏览器端完整实现(window.__ModuleLoader__ 模块格式)
+assets/
+  screenshots/   # 截图(README 主图 + 市场截图墙)
 cordis.patch.yml     # 组合包补丁层(插入插件行)
 example.patch.yml    # 手动安装时的补丁示例
 ```

package/lib/client.js

@@ -205,6 +205,76 @@ window.__ModuleLoader__.load({
   color: inherit; border-radius: 2px; padding: 0 1px; font-weight: 600;
 }
 .cnvnav-empty { padding: 18px 10px; text-align: center; color: var(--dsw-alias-label-secondary, #888); }
+/* ---------- 极简模式 ---------- */
+.cnvnav-mini-wrap {
+  position: fixed; z-index: 9999; right: 12px;
+  pointer-events: auto;
+  transition: opacity .18s ease, transform .18s ease;
+}
+.cnvnav-mini-panel {
+  width: 18px; height: 220px; overflow: hidden;
+  position: relative;
+  display: flex; flex-direction: column;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 12px;
+  box-shadow: none;
+  transition: width .18s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
+}
+.cnvnav-mini-wrap:hover .cnvnav-mini-panel {
+  width: 288px;
+  background: var(--dsw-alias-bg-overlay, #fff);
+  border-color: var(--dsw-alias-border-l1, rgba(128,128,128,.35));
+  box-shadow: 0 16px 48px rgba(0,0,0,.22);
+}
+.cnvnav-mini-fab {
+  position: absolute; bottom: 100%; right: -12.5px;
+  margin-bottom: 6px;
+  display: flex;
+}
+.cnvnav-mini-list {
+  flex: 1; min-height: 0; width: 288px; box-sizing: border-box;
+  overflow-y: auto; padding: 4px;
+  display: flex; flex-direction: column; gap: 2px;
+}
+/* dsweb 式滚动条: 只显示滑块, 无滑轨无上下按钮.
+   Chromium 用 webkit 伪元素(标准属性会令其失效), Firefox 用 @supports 标准属性 */
+.cnvnav-mini-list::-webkit-scrollbar { width: 4px; }
+.cnvnav-mini-list::-webkit-scrollbar-track { background: transparent; }
+.cnvnav-mini-list::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, var(--dsw-alias-label-secondary, #888) 40%, transparent);
+  border-radius: 2px;
+}
+.cnvnav-mini-list::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
+.cnvnav-mini-list::-webkit-scrollbar-corner { background: transparent; }
+@supports (-moz-appearance: none) {
+  .cnvnav-mini-list {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--dsw-alias-label-secondary, #888) 40%, transparent) transparent;
+  }
+}
+.cnvnav-mini-item {
+  flex: none; height: 28px; box-sizing: border-box; width: 100%;
+  display: flex; align-items: center; text-align: left;
+  border: none; background: transparent; cursor: pointer;
+  padding: 5px 8px 5px 17px; border-radius: 8px; position: relative;
+  color: var(--dsw-alias-label-secondary, #888);
+  font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  transition: background .16s ease;
+}
+.cnvnav-mini-item:hover { background: var(--dsw-alias-bg-layer-2, rgba(128,128,128,.12)); }
+/* 每行都有指示竖条: 非当前=掺前景色(浅色主题掺黑/深色主题掺白, 40%), 当前=品牌色实色 */
+.cnvnav-mini-item::before {
+  content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px;
+  width: 3px; border-radius: 2px;
+  background: color-mix(in srgb, var(--dsw-alias-label-primary, #222) 40%, transparent);
+  transition: background .16s ease;
+}
+.cnvnav-mini-item-active {
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary, #4f46e5) 13%, transparent);
+  color: color-mix(in srgb, var(--dsw-alias-brand-primary, #4f46e5) 60%, var(--dsw-alias-label-primary, #222));
+}
+.cnvnav-mini-item-active::before { background: var(--dsw-alias-brand-primary, #4f46e5); }
 .cnvnav-filter {
   flex: 1; min-width: 0; box-sizing: border-box;
   height: 28px; padding: 0 8px;
@@ -564,7 +634,14 @@ window.__ModuleLoader__.load({
 				const snap = useStore();
 				const [filter, setFilter] = React.useState("");
 				const [searchOpen, setSearchOpen] = React.useState(false);
-				const [turnsHidden, setTurnsHidden] = React.useState(false);
+				const [viewMode, setViewMode] = React.useState("full"); /* full | hidden | minimal */
+				const turnsHidden = viewMode !== "full";
+				function nextModeLabel() {
+					return viewMode === "full" ? "隐藏轮次" : viewMode === "hidden" ? "极简模式" : "显示轮次";
+				}
+				function cycleMode() {
+					setViewMode(viewMode === "full" ? "hidden" : viewMode === "hidden" ? "minimal" : "full");
+				}
 				function toggleSearch() {
 					if (searchOpen) setFilter("");
 					setSearchOpen(!searchOpen);
@@ -582,27 +659,45 @@ window.__ModuleLoader__.load({
 						const vh = document.documentElement.clientHeight || 800;
 						const sp = document.querySelector("[data-conversation-scroll]");
 						const width = 288;
+						const mini = viewMode === "minimal";
+						const MINI_H = 220;
 						if (sp === null) {
 							/* 会话视图可能尚未挂载(刷新/重启/切会话时面板先就位);
 							   非会话页(设置页等)则永远没有该容器。
 							   连续 15 次(约 6s)仍未出现才回退到视口定位, 否则保持隐藏等待校准。 */
 							misses += 1;
 							if (misses >= 15) {
-								panel.style.left = Math.max(8, vw - width - 12) + "px";
-								panel.style.top = Math.max(8, 60) + "px";
-								panel.style.maxHeight = Math.round(vh - 90) + "px";
+								if (mini) {
+									/* 极简: 水平由 CSS right 锚定, 清掉普通面板残留的 left */
+									panel.style.left = "";
+									panel.style.top = Math.max(8, Math.round((vh - MINI_H) / 2)) + "px";
+									panel.style.maxHeight = MINI_H + "px";
+								} else {
+									panel.style.left = Math.max(8, vw - width - 12) + "px";
+									panel.style.top = Math.max(8, 60) + "px";
+									panel.style.maxHeight = Math.round(vh - 90) + "px";
+								}
 								panel.classList.remove("cnvnav-panel-unplaced");
 								return true;
 							}
 							return false;
 						}
 						const r = sp.getBoundingClientRect();
-						const key = [Math.round(r.top), Math.round(r.height), Math.round(vw), Math.round(vh)].join("|");
+						const key = mini
+							? [Math.round(r.top), Math.round(r.height), Math.round(vh)].join("|")
+							: [Math.round(r.top), Math.round(r.height), Math.round(vw), Math.round(vh)].join("|");
 						if (key !== lastKey) {
 							lastKey = key;
-							panel.style.left = Math.max(8, vw - width - 12) + "px";
-							panel.style.top = Math.max(8, Math.round(r.top + 8)) + "px";
-							panel.style.maxHeight = Math.round(Math.min(r.height - 24, vh - 40)) + "px";
+							if (mini) {
+								/* 极简: 右侧锚定由 CSS(right)负责, 这里只定垂直中点 */
+								panel.style.left = "";
+								panel.style.top = Math.max(8, Math.round(r.top + (r.height - MINI_H) / 2)) + "px";
+								panel.style.maxHeight = MINI_H + "px";
+							} else {
+								panel.style.left = Math.max(8, vw - width - 12) + "px";
+								panel.style.top = Math.max(8, Math.round(r.top + 8)) + "px";
+								panel.style.maxHeight = Math.round(Math.min(r.height - 24, vh - 40)) + "px";
+							}
 						}
 						panel.classList.remove("cnvnav-panel-unplaced");
 						return true;
@@ -624,7 +719,7 @@ window.__ModuleLoader__.load({
 						clearInterval(id);
 						window.removeEventListener("resize", place);
 					};
-				}, [snap.open, snap.sessionId]);
+				}, [snap.open, snap.sessionId, viewMode]);
 
 				React.useEffect(() => {
 					if (!snap.open) return;
@@ -667,6 +762,66 @@ window.__ModuleLoader__.load({
 				const groups = snap.outline !== null ? snap.outline.groups : [];
 				const count = snap.outline !== null ? snap.outline.count : 0;
 
+				/* ---------- 极简模式: 只保留定位 ---------- */
+				if (viewMode === "minimal") {
+					const miniRows = [];
+					for (const g of groups) {
+						if (g.turn === null) continue;
+						miniRows.push({
+							key: g.headKey,
+							text: g.subtitle,
+							full: g.headIsUser && g.items.length > 0 ? g.items[0].full : null,
+							active: g.items.some((it) => it.key === snap.activeKey),
+						});
+					}
+					return React.createElement("div", {
+						ref: (el) => { panelEl = el; },
+						className: "cnvnav-mini-wrap cnvnav-panel-unplaced" + (snap.open ? "" : " cnvnav-panel-hidden"),
+						role: "complementary",
+						"aria-label": "会话导航",
+						"aria-hidden": !snap.open,
+					},
+						React.createElement(Tooltip, {
+							label: "显示轮次",
+							side: "top",
+							delayMs: 500,
+						},
+							React.createElement("span", { className: "cnvnav-mini-fab" },
+								React.createElement(Button, {
+									variant: "ghost",
+									size: "sm",
+									icon: React.createElement(SwitchTurnsIcon),
+									"aria-pressed": true,
+									onClick: () => cycleMode(),
+								}),
+							),
+						),
+						React.createElement("div", { className: "cnvnav-mini-panel" },
+							React.createElement("div", {
+								ref: (el) => { listEl = el; },
+								className: "cnvnav-mini-list",
+							},
+								groups.length === 0
+									? React.createElement("div", { className: "cnvnav-empty" }, "当前会话暂无对话节点")
+									: miniRows.map((r) => React.createElement(Tooltip, {
+										key: r.key,
+										label: r.full !== null ? r.full : "跳转到此位置",
+										side: "top",
+										delayMs: 500,
+										maxWidth: 340,
+									},
+										React.createElement("button", {
+											type: "button",
+											ref: (el) => { itemEls[r.key] = el; },
+											className: "cnvnav-mini-item" + (r.active ? " cnvnav-mini-item-active" : ""),
+											onClick: () => jumpTo(r.key),
+										}, r.text),
+									)),
+							),
+						),
+					);
+				}
+
 				const kw = filter.trim().toLowerCase();
 				const filtering = kw !== "";
 				function hit(text) {
@@ -881,17 +1036,17 @@ window.__ModuleLoader__.load({
 						searchOpen
 							? null
 							: React.createElement(Tooltip, {
-								label: turnsHidden ? "显示轮次" : "隐藏轮次",
+								label: nextModeLabel(),
 								side: "bottom",
 								delayMs: 500,
 							},
 								React.createElement("span", { className: "cnvnav-turns-toggle" },
 									React.createElement(Button, {
-										variant: turnsHidden ? "primary" : "ghost",
+										variant: viewMode !== "full" ? "primary" : "ghost",
 										size: "sm",
 										icon: React.createElement(SwitchTurnsIcon),
-										"aria-pressed": turnsHidden,
-										onClick: () => setTurnsHidden(!turnsHidden),
+										"aria-pressed": viewMode !== "full",
+										onClick: () => cycleMode(),
 									}),
 								),
 							),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-conversation-navigator",
-  "version": "0.1.22",
-  "description": "Codex 风格的 DSH(DeepSeek Harness)会话导航插件:按轮折叠的对话大纲面板,支持节点点击跳转、滚动位置高亮与轨迹视图同款配色。",
+  "version": "0.1.24",
+  "description": "DSH(DeepSeek Harness)会话导航插件:按轮折叠的对话大纲面板,支持节点点击跳转、滚动位置高亮与轨迹视图同款配色。",
   "keywords": [
     "dsh",
     "deepseek-harness",
@@ -14,6 +14,10 @@
     "会话导航"
   ],
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gjj-star/dsh-conversation-navigator.git"
+  },
   "type": "module",
   "main": "lib/index.js",
   "exports": {