dsh-conversation-navigator 0.1.4 → 0.1.6

package/README.md

@@ -1,17 +1,20 @@
 # DSH 会话导航插件(dsh-conversation-navigator)
 
-Codex 风格的 **DeepSeek Harness(DSH)Web 端会话导航面板**:在对话页左侧悬浮展示按轮折叠的对话大纲,点击任意节点平滑跳转,滚动对话时实时高亮当前阅读位置,步次徽标配色与内置"轨迹"视图统一。
+Codex 风格的 **DeepSeek Harness(DSH)Web 端会话导航面板**:在对话页**右侧**悬浮展示按轮折叠的对话大纲,点击任意节点平滑跳转,滚动对话时实时高亮当前阅读位置,步次徽标配色与内置"轨迹"视图统一。
 
-纯浏览器插件(无宿主行为)、纯 JavaScript、零构建、零运行时 npm 依赖。
+纯浏览器插件(无宿主行为)、纯 JavaScript、零构建、零 npm 依赖(按钮/图标复用 DSH 内核 seed 的官方 primitives)。
 
 ## 功能
 
 - **按轮折叠大纲**:默认只显示"第 N 轮 + 你的问题"列表,长对话一目了然
 - **展开/折叠步次**:点击轮次行右侧的 `▸ N` / `▾` 展开或折叠该轮的步次明细(助手回复、工具调用、命令、压缩点等)
 - **点击定位**:点击轮次主体或步次条目,平滑滚动跳转到对话中对应位置(不改变折叠状态)
+- **加载更早 / 加载全部**:面板顶部两个按钮——「加载更早」向后翻一页、「加载全部」一键把所有历史轮次载入导航,之后可任意跳转(页面默认仍懒加载,只有点按钮才补载)
 - **位置跟踪**:手动滚动对话时,面板自动高亮并跟随当前正在阅读的轮次
+- **右侧定位**:面板锚定视口右侧,收起/展开左侧边栏时纹丝不动
 - **回到最新 / 全部折叠**:面板底部两个快捷按钮
-- **轨迹配色**:用户/插话 = 业务蓝、上下文 = 成功绿、助手 = 紫罗兰、工具 = 琥珀、压缩 = 中性灰(全部取自 `dsh-client-ui-trajectory` 的 kindTag 主题 token,自动适配明暗主题)
+- **轨迹配色**:用户/插话 = 业务蓝、上下文 = 成功绿、助手 = 紫罗兰、工具 = 琥珀、压缩 = 中性灰(取自 `dsh-client-ui-trajectory` 的 kindTag 主题 token,自动适配明暗主题)
+- **DSH 原生按钮与图标**:所有操作按钮复用官方 `Button` 组件与 `ic_ds_*` 图标集,与 DSH 界面完全同款
 - 切换工作区/会话自动跟随并重建大纲
 
 ## 安装
@@ -27,7 +30,7 @@ dsh plugin --profile web add github:gjj-star/dsh-conversation-navigato
 
 # 方式三:本地 tarball
 pnpm pack
-dsh plugin --profile web add ./dsh-conversation-navigator-0.1.0.tgz
+dsh plugin --profile web add ./dsh-conversation-navigator-<version>.tgz
 ```
 
 `dsh plugin` 在 profile 目录内转发给 pnpm,因此需要 **pnpm 在 PATH 上**;安装会自动把本包追加进 profile 的 `dsh.profile.bundles`,其自带的 `cordis.patch.yml` 层负责插入插件行。重启 `dsh web` 后生效,面板默认展开。
@@ -40,15 +43,16 @@ dsh plugin --profile web add ./dsh-conversation-navigator-0.1.0.tgz
 
 ## 工作原理
 
-- 注册槽位:`conversation.session.header.utilities`(标题栏"☰ 导航"开关)+ `shell.overlay`(浮动面板)
+- 注册槽位:`conversation.session.header.utilities`(标题栏「导航」开关)+ `shell.overlay`(浮动面板)
 - 数据来源:会话级标准 props 的 `useSession`(选择 `ConversationSnapshot.chat` 的稳定渲染顺序 `order` + `ChatNodeStore`),按 `node.location` 的 turn 分组
+- 历史补载:通过 `sessions` 服务的 `binding(sessionId).session.loadOlder()` 分页向后加载,「加载全部」循环至 `hasMore=false`
 - 跳转定位:复用 DSH 聊天视图自身的稳定 DOM 锚点 `[data-chat-anchor-key]`(与产品内部 paging/scroll 定位同源),`scrollIntoView` 平滑滚动
 - 位置跟踪:捕获 `[data-conversation-scroll]` 滚动容器的 scroll 事件(节流 120ms),计算视口顶部首个可见节点
-- 样式:自建 `<style>` 注入,颜色全部使用 `--dsw-*` 主题 token;插件卸载时随 fiber 清理
+- 样式:按钮/图标复用 `@deepseek-ai/dsh-client-ui-primitives`;面板容器自建 `<style>` 注入,颜色使用 `--dsw-*` 主题 token;插件卸载时随 fiber 清理
 
 ## 兼容性说明
 
-- 目标平台:DSH Web 端(`dsh.client.platform: web`),依赖内核 seed 的 `react` 与 `slots` 服务、`dsh-client-runtime` 与 `dsh-client-ui-conversation` 提供的标准能力(已声明在 `dsh.client.inject` 中)
+- 目标平台:DSH Web 端(`dsh.client.platform: web`),依赖内核 seed 的 `react`、`slots`、`sessions` 服务与 `@deepseek-ai/dsh-client-ui-primitives`,以及 `dsh-client-runtime`、`dsh-client-ui-conversation` 提供的标准能力(`dsh.client.inject` 已声明 runtime 与 conversation)
 - **版本敏感点**:`[data-chat-anchor-key]` / `[data-conversation-scroll]` 是当前 DSH 聊天视图的 DOM 锚点约定,DSH 升级后若锚点变化,只需调整 `lib/client.js` 中 `findAnchor` / `computeActiveKey` 两个函数
 - 未声明 `timer` 硬依赖:客户端的 timer 服务存在则用于节流,不存在时自动退化为未节流模式
 

package/lib/client.js

@@ -5,7 +5,7 @@ window.__ModuleLoader__.load({
 		var exports = module.exports;
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		const React = require("react");
-		const { Button } = require("@deepseek-ai/dsh-client-ui-primitives");
+		const { Button, IconPanelLeftOutline16, IconChevronUpOutline14, IconRefreshOutline14, IconChevronDownOutline14, IconTriangleRightFill14, IconCloseOutline16 } = require("@deepseek-ai/dsh-client-ui-primitives");
 
 		/* ---------- own stylesheet (static packages have no styles builtin) ---------- */
 		const CSS = `
@@ -372,17 +372,6 @@ window.__ModuleLoader__.load({
 			const groupEls = {};
 
 			/* ---------- header toggle button ---------- */
-			function ToggleIcon() {
-				return React.createElement("svg", {
-					viewBox: "0 0 16 16", width: 14, height: 14, fill: "none",
-					stroke: "currentColor", strokeWidth: 1.4, "aria-hidden": true,
-				},
-					React.createElement("circle", { cx: 3, cy: 3.5, r: 1.1, fill: "currentColor", stroke: "none" }),
-					React.createElement("path", { d: "M6.2 3.5h7.8M6.2 8h7.8M6.2 12.5h7.8", strokeLinecap: "round" }),
-					React.createElement("circle", { cx: 3, cy: 8, r: 1.1, fill: "currentColor", stroke: "none" }),
-					React.createElement("circle", { cx: 3, cy: 12.5, r: 1.1, fill: "currentColor", stroke: "none" }),
-				);
-			}
 			function ToggleButton(props) {
 				const snap = useStore();
 				const outline = props.useSession(selectOutline);
@@ -400,7 +389,7 @@ window.__ModuleLoader__.load({
 				return React.createElement(Button, {
 					variant: snap.open ? "primary" : "ghost",
 					size: "sm",
-					icon: React.createElement(ToggleIcon),
+					icon: React.createElement(IconPanelLeftOutline16),
 					"aria-pressed": snap.open,
 					title: snap.open ? "收起会话导航" : "打开会话导航",
 					onClick: () => setState({ open: !snap.open }),
@@ -546,27 +535,30 @@ window.__ModuleLoader__.load({
 							variant: "ghost",
 							size: "sm",
 							className: "cnvnav-close",
+							icon: React.createElement(IconCloseOutline16, { size: 14 }),
 							title: "收起",
 							onClick: () => setState({ open: false }),
-						}, "×"),
+						}),
 					),
 					React.createElement("div", { className: "cnvnav-topbar" },
 						React.createElement(Button, {
 							variant: "ghost",
 							size: "sm",
 							className: "cnvnav-bar-btn",
+							icon: React.createElement(IconChevronUpOutline14),
 							disabled: !snap.hasMore || snap.loadingOlder,
 							title: "加载更早的一批轮次",
 							onClick: () => loadOlderPage(),
-						}, "△ 加载更早"),
+						}, "加载更早"),
 						React.createElement(Button, {
 							variant: "ghost",
 							size: "sm",
 							className: "cnvnav-bar-btn",
+							icon: React.createElement(IconRefreshOutline14),
 							disabled: !snap.hasMore || snap.loadingOlder || snap.loadingAll,
 							title: "加载全部历史轮次",
 							onClick: () => loadAllPages(),
-						}, "▴ 加载全部"),
+						}, "加载全部"),
 					),
 					React.createElement("div", {
 						ref: (el) => { listEl = el; },
@@ -581,6 +573,7 @@ window.__ModuleLoader__.load({
 							variant: "ghost",
 							size: "sm",
 							className: "cnvnav-bar-btn",
+							icon: React.createElement(IconChevronDownOutline14),
 							onClick: () => {
 								const gs = snap.outline !== null ? snap.outline.groups : [];
 								if (gs.length === 0) return;
@@ -588,14 +581,15 @@ window.__ModuleLoader__.load({
 								const lastItem = lastGroup.items[lastGroup.items.length - 1];
 								if (lastItem !== undefined) jumpTo(lastItem.key);
 							},
-						}, "↓ 回到最新"),
+						}, "回到最新"),
 						React.createElement(Button, {
 							variant: "ghost",
 							size: "sm",
 							className: "cnvnav-bar-btn",
+							icon: React.createElement(IconTriangleRightFill14),
 							title: "折叠所有已展开的轮次",
 							onClick: () => setState({ expanded: {} }),
-						}, "▼ 全部折叠"),
+						}, "全部折叠"),
 					),
 				);
 			}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-conversation-navigator",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "Codex 风格的 DSH(DeepSeek Harness)会话导航插件:按轮折叠的对话大纲面板,支持节点点击跳转、滚动位置高亮与轨迹视图同款配色。",
   "keywords": [
     "dsh",