dsh-conversation-navigator 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 dsh-conversation-navigator contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,67 @@
+# DSH 会话导航插件(dsh-conversation-navigator)
+
+Codex 风格的 **DeepSeek Harness(DSH)Web 端会话导航面板**:在对话页左侧悬浮展示按轮折叠的对话大纲,点击任意节点平滑跳转,滚动对话时实时高亮当前阅读位置,步次徽标配色与内置"轨迹"视图统一。
+
+纯浏览器插件(无宿主行为)、纯 JavaScript、零构建、零运行时 npm 依赖。
+
+## 功能
+
+- **按轮折叠大纲**:默认只显示"第 N 轮 + 你的问题"列表,长对话一目了然
+- **展开/折叠步次**:点击轮次行右侧的 `▸ N` / `▾` 展开或折叠该轮的步次明细(助手回复、工具调用、命令、压缩点等)
+- **点击定位**:点击轮次主体或步次条目,平滑滚动跳转到对话中对应位置(不改变折叠状态)
+- **位置跟踪**:手动滚动对话时,面板自动高亮并跟随当前正在阅读的轮次
+- **回到最新 / 全部折叠**:面板底部两个快捷按钮
+- **轨迹配色**:用户/插话 = 业务蓝、上下文 = 成功绿、助手 = 紫罗兰、工具 = 琥珀、压缩 = 中性灰(全部取自 `dsh-client-ui-trajectory` 的 kindTag 主题 token,自动适配明暗主题)
+- 切换工作区/会话自动跟随并重建大纲
+
+## 安装
+
+本插件是官方规范的**组合包**(`dsh.bundle` manifest + `dsh.client` 声明),纯 JavaScript、无构建步骤,推荐用官方 CLI 安装:
+
+```sh
+# 方式一:npm(发布后,用户无需任何构建授权)
+dsh plugin --profile web add dsh-conversation-navigator
+
+# 方式二:GitHub(纯 JS 包无需 prepare/allowBuilds,直接可用)
+dsh plugin --profile web add github:you/dsh-conversation-navigator
+
+# 方式三:本地 tarball
+pnpm pack
+dsh plugin --profile web add ./dsh-conversation-navigator-0.1.0.tgz
+```
+
+`dsh plugin` 在 profile 目录内转发给 pnpm,因此需要 **pnpm 在 PATH 上**;安装会自动把本包追加进 profile 的 `dsh.profile.bundles`,其自带的 `cordis.patch.yml` 层负责插入插件行。重启 `dsh web` 后生效,面板默认展开。
+
+> 手动方式(不依赖 pnpm):把仓库放进 `<DSH_HOME>\profiles\<profile>\node_modules\dsh-conversation-navigator`,并在 profile 的 `cordis.patch.yml` 顶层数组追加 [`example.patch.yml`](./example.patch.yml) 的内容。
+
+## 更新
+
+修改 `lib/client.js` 后重启 `dsh web` 即可;插件没有持久状态,展开/折叠状态仅存于页面会话内。
+
+## 工作原理
+
+- 注册槽位:`conversation.session.header.utilities`(标题栏"☰ 导航"开关)+ `shell.overlay`(浮动面板)
+- 数据来源:会话级标准 props 的 `useSession`(选择 `ConversationSnapshot.chat` 的稳定渲染顺序 `order` + `ChatNodeStore`),按 `node.location` 的 turn 分组
+- 跳转定位:复用 DSH 聊天视图自身的稳定 DOM 锚点 `[data-chat-anchor-key]`(与产品内部 paging/scroll 定位同源),`scrollIntoView` 平滑滚动
+- 位置跟踪:捕获 `[data-conversation-scroll]` 滚动容器的 scroll 事件(节流 120ms),计算视口顶部首个可见节点
+- 样式:自建 `<style>` 注入,颜色全部使用 `--dsw-*` 主题 token;插件卸载时随 fiber 清理
+
+## 兼容性说明
+
+- 目标平台:DSH Web 端(`dsh.client.platform: web`),依赖内核 seed 的 `react` 与 `slots` 服务、`dsh-client-runtime` 与 `dsh-client-ui-conversation` 提供的标准能力(已声明在 `dsh.client.inject` 中)
+- **版本敏感点**:`[data-chat-anchor-key]` / `[data-conversation-scroll]` 是当前 DSH 聊天视图的 DOM 锚点约定,DSH 升级后若锚点变化,只需调整 `lib/client.js` 中 `findAnchor` / `computeActiveKey` 两个函数
+- 未声明 `timer` 硬依赖:客户端的 timer 服务存在则用于节流,不存在时自动退化为未节流模式
+
+## 目录结构
+
+```
+lib/
+  index.js   # 宿主侧空入口(纯浏览器插件)
+  client.js  # 浏览器端完整实现(window.__ModuleLoader__ 模块格式)
+cordis.patch.yml     # 组合包补丁层(插入插件行)
+example.patch.yml    # 手动安装时的补丁示例
+```
+
+## License
+
+MIT

package/cordis.patch.yml

@@ -0,0 +1,7 @@
+# dsh-conversation-navigator 组合包补丁层
+# 当 profile 的 dsh.profile.bundles 列出本包时,此层会被应用,
+# 向组合中插入一行浏览器插件(dsh.client row)。
+
+- insert:
+    - id: ui-conversation-navigator
+      name: 'dsh-conversation-navigator'

package/lib/client.js

@@ -0,0 +1,593 @@
+window.__ModuleLoader__.load({
+	id: "dsh-conversation-navigator",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		const React = require("react");
+
+		/* ---------- own stylesheet (static packages have no styles builtin) ---------- */
+		const CSS = `
+.cnvnav-toggle {
+  display: inline-flex; align-items: center; gap: 6px;
+  height: 28px; padding: 0 10px; border-radius: 8px;
+  border: 1px solid var(--dsw-alias-border-l1, rgba(128,128,128,.35));
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, #666);
+  font-size: 12px; line-height: 1; cursor: pointer;
+}
+.cnvnav-toggle:hover {
+  background: var(--dsw-alias-bg-layer-2, rgba(128,128,128,.12));
+  color: var(--dsw-alias-label-primary, #222);
+}
+.cnvnav-toggle-on {
+  color: var(--dsw-alias-brand-primary, #4f46e5);
+  border-color: var(--dsw-alias-brand-primary, #4f46e5);
+}
+.cnvnav-toggle svg { display: block; }
+.cnvnav-panel {
+  position: fixed; z-index: 9999; width: 288px;
+  display: flex; flex-direction: column;
+  pointer-events: auto;
+  background: var(--dsw-alias-bg-overlay, #fff);
+  border: 1px solid var(--dsw-alias-border-l1, rgba(128,128,128,.35));
+  border-radius: 12px;
+  box-shadow: 0 16px 48px rgba(0,0,0,.22);
+  font-family: system-ui, -apple-system, 'Segoe UI', 'Microsoft YaHei', sans-serif;
+  font-size: 12px;
+  color: var(--dsw-alias-label-primary, #222);
+  overflow: hidden;
+}
+.cnvnav-head {
+  display: flex; align-items: center; gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--dsw-alias-border-l1, rgba(128,128,128,.35));
+}
+.cnvnav-title { font-weight: 600; font-size: 13px; }
+.cnvnav-count { color: var(--dsw-alias-label-secondary, #888); font-size: 11px; }
+.cnvnav-close {
+  margin-left: auto; border: none; background: transparent;
+  color: var(--dsw-alias-label-secondary, #888); cursor: pointer;
+  font-size: 16px; line-height: 1; padding: 2px 7px; border-radius: 6px;
+}
+.cnvnav-close:hover {
+  background: var(--dsw-alias-bg-layer-2, rgba(128,128,128,.12));
+  color: var(--dsw-alias-label-primary, #222);
+}
+.cnvnav-list {
+  overflow-y: auto; padding: 6px; min-height: 0;
+  display: flex; flex-direction: column; gap: 2px;
+  scrollbar-width: thin;
+}
+.cnvnav-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 2px; }
+.cnvnav-group-row {
+  display: flex; align-items: stretch;
+  border-radius: 8px; overflow: hidden;
+}
+.cnvnav-group-row:hover { background: var(--dsw-alias-bg-layer-2, rgba(128,128,128,.12)); }
+.cnvnav-group-row-active { background: var(--dsw-alias-bg-layer-2, rgba(128,128,128,.12)); }
+.cnvnav-group-row-active .cnvnav-group-title { color: var(--dsw-alias-brand-primary, #4f46e5); }
+.cnvnav-group-head {
+  flex: 1; min-width: 0;
+  display: flex; align-items: baseline; gap: 6px; text-align: left;
+  border: none; background: transparent; cursor: pointer;
+  padding: 5px 0 5px 8px;
+  color: var(--dsw-alias-label-primary, #222);
+}
+.cnvnav-group-title { font-weight: 600; white-space: nowrap; }
+.cnvnav-group-sub {
+  color: var(--dsw-alias-label-secondary, #888);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  flex: 1; min-width: 0;
+}
+.cnvnav-chevron {
+  flex: none; min-width: 30px;
+  display: flex; align-items: center; justify-content: center;
+  border: none; background: transparent; cursor: pointer;
+  color: var(--dsw-alias-label-secondary, #888);
+  font-size: 11px; line-height: 1; padding: 0 8px;
+  white-space: nowrap;
+}
+.cnvnav-chevron:hover { color: var(--dsw-alias-brand-primary, #4f46e5); background: var(--dsw-alias-bg-layer-2, rgba(128,128,128,.12)); }
+.cnvnav-item {
+  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
+  border: none; background: transparent; cursor: pointer;
+  padding: 5px 8px 5px 22px; border-radius: 8px; position: relative;
+  color: var(--dsw-alias-label-primary, #222);
+}
+.cnvnav-item:hover { background: var(--dsw-alias-bg-layer-2, rgba(128,128,128,.12)); }
+.cnvnav-item-active { background: var(--dsw-alias-bg-layer-2, rgba(128,128,128,.12)); }
+.cnvnav-item-active::before {
+  content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px;
+  width: 3px; border-radius: 2px;
+  background: var(--dsw-alias-brand-primary, #4f46e5);
+}
+.cnvnav-badge {
+  flex: none; min-width: 36px; box-sizing: border-box;
+  display: inline-flex; align-items: center; justify-content: center;
+  height: 19px; padding: 0 5px; border-radius: 4px;
+  font-size: 10px; font-weight: 650; line-height: 1;
+  letter-spacing: .035em; white-space: nowrap;
+}
+.cnvnav-badge-traj-user { color: var(--dsw-alias-state-business-primary, #4f46e5); background: var(--dsw-alias-state-business-tertiary, rgba(79,70,229,.14)); }
+.cnvnav-badge-traj-context { color: color-mix(in srgb, var(--dsw-alias-state-success-primary, #0e9f6e) 68%, var(--dsw-alias-label-secondary, #888)); background: var(--dsw-alias-state-success-tertiary, rgba(14,159,110,.14)); }
+.cnvnav-badge-traj-assistant { color: color-mix(in srgb, var(--dsw-alias-brand-primary-new-colorprimary-new-color, #7c3aed) 60%, var(--dsw-alias-state-error-secondary, #b91c1c)); background: color-mix(in srgb, color-mix(in srgb, var(--dsw-alias-brand-primary-new-colorprimary-new-color, #7c3aed) 55%, var(--dsw-alias-state-error-secondary, #b91c1c)) 15%, var(--dsw-alias-bg-layer-1, transparent)); }
+.cnvnav-badge-traj-tool { color: var(--dsw-alias-state-warn-label, #b45309); background: var(--dsw-alias-state-warn-tertiary, rgba(180,83,9,.14)); }
+.cnvnav-badge-traj-compacted { color: var(--dsw-alias-label-secondary, #888); background: var(--dsw-alias-bg-module-platform, rgba(128,128,128,.12)); }
+.cnvnav-badge-other-command { color: #1d4ed8; background: rgba(29,78,216,.13); }
+.cnvnav-badge-other-error { color: var(--dsw-alias-state-error-primary, #dc2626); background: color-mix(in srgb, var(--dsw-alias-state-error-primary, #dc2626) 14%, transparent); }
+.cnvnav-badge-other-retry { color: #ea580c; background: rgba(234,88,12,.14); }
+.cnvnav-badge-other-neutral { color: var(--dsw-alias-label-secondary, #888); background: var(--dsw-alias-bg-module-platform, rgba(128,128,128,.12)); }
+.cnvnav-item-preview {
+  flex: 1; min-width: 0; display: block;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  color: var(--dsw-alias-label-secondary, #888);
+}
+.cnvnav-item-time {
+  flex: none; color: var(--dsw-alias-label-secondary, #888); font-size: 10px; opacity: .8;
+}
+.cnvnav-empty { padding: 18px 10px; text-align: center; color: var(--dsw-alias-label-secondary, #888); }
+.cnvnav-footer { display: flex; gap: 6px; margin: 0 6px 6px; }
+.cnvnav-bottom {
+  flex: 1; padding: 7px; border-radius: 8px;
+  border: 1px solid var(--dsw-alias-border-l1, rgba(128,128,128,.35));
+  background: var(--dsw-alias-bg-layer-1, rgba(128,128,128,.06));
+  color: var(--dsw-alias-label-primary, #222); cursor: pointer; font-size: 12px;
+}
+.cnvnav-bottom:hover { border-color: var(--dsw-alias-brand-primary, #4f46e5); color: var(--dsw-alias-brand-primary, #4f46e5); }
+`;
+
+		function apply(ctx) {
+			const slots = ctx.get("slots");
+			if (slots === undefined) return;
+			const timer = ctx.get("timer");
+
+			/* own stylesheet with fiber-scoped cleanup */
+			const styleEl = document.createElement("style");
+			styleEl.setAttribute("data-dsh-cnvnav", "");
+			styleEl.textContent = CSS;
+			document.head.appendChild(styleEl);
+			ctx.effect(() => () => styleEl.remove());
+
+			/* ---------- shared store (toggle button + overlay panel) ---------- */
+			let state = { open: true, sessionId: null, outline: null, activeKey: null, expanded: {} };
+			const listeners = new Set();
+			function setState(patch) {
+				state = Object.assign({}, state, patch);
+				listeners.forEach((fn) => { try { fn(); } catch (err) { console.error(err); } });
+			}
+			function subscribe(fn) { listeners.add(fn); return () => { listeners.delete(fn); }; }
+			function useStore() {
+				const [snap, setSnap] = React.useState(state);
+				React.useEffect(() => subscribe(() => setSnap(state)), []);
+				return snap;
+			}
+
+			/* ---------- outline derivation from ConversationSnapshot ---------- */
+			const KIND_META = {
+				"user": { label: "你", cls: "traj-user" },
+				"steering": { label: "插话", cls: "traj-user" },
+				"context": { label: "上下文", cls: "traj-context" },
+				"assistant-step": { label: "助手", cls: "traj-assistant" },
+				"tool-call": { label: "工具", cls: "traj-tool" },
+				"command": { label: "命令", cls: "other-command" },
+				"compaction": { label: "压缩", cls: "traj-compacted" },
+				"manual-compaction": { label: "压缩", cls: "traj-compacted" },
+				"turn-error": { label: "出错", cls: "other-error" },
+				"turn-max-tokens": { label: "截断", cls: "other-error" },
+				"model-retry": { label: "重试", cls: "other-retry" },
+				"workflow-run": { label: "流程", cls: "other-neutral" },
+				"unknown": { label: "其他", cls: "other-neutral" },
+			};
+			function firstText(blocks) {
+				if (!Array.isArray(blocks)) return null;
+				for (const b of blocks) {
+					if (!b || typeof b !== "object") continue;
+					if ((b.type === "text" || b.kind === "text") && typeof b.text === "string" && b.text.trim() !== "") return b.text;
+				}
+				return null;
+			}
+			function previewFor(node) {
+				const d = node && node.data;
+				if (!d || typeof d !== "object") return null;
+				switch (node.kind) {
+					case "user":
+					case "steering":
+					case "context":
+						return firstText(d.content);
+					case "assistant-step": {
+						const text = firstText(d.blocks);
+						if (text !== null) return text;
+						if (Array.isArray(d.blocks) && d.blocks.some((b) => b && b.kind === "tool-call")) return "调用工具";
+						return d.status === "running" ? "进行中…" : null;
+					}
+					case "tool-call": {
+						const root = d.root;
+						if (!root || typeof root !== "object") return null;
+						if (root.isError === true) return "执行失败";
+						const name = typeof root.name === "string" ? root.name
+							: (root.call && typeof root.call.name === "string" ? root.call.name : null);
+						return name;
+					}
+					case "command":
+						return typeof d.name === "string" ? d.name + (typeof d.args === "string" && d.args !== "" ? " " + d.args : "") : null;
+					case "compaction":
+						return typeof d.summary === "string" ? d.summary : "上下文已压缩";
+					case "manual-compaction": {
+						const c = d.compaction;
+						if (c && typeof c.summary === "string") return c.summary;
+						return "手动压缩";
+					}
+					case "turn-error":
+						return typeof d.message === "string" ? d.message : "本轮出错";
+					case "turn-max-tokens":
+						return "达到输出上限";
+					case "model-retry": {
+						const n = Array.isArray(d.attempts) ? d.attempts.length : 0;
+						return "自动重试" + (n > 0 ? " ×" + n : "…");
+					}
+					case "unknown":
+						return typeof d.type === "string" ? "未知事件 " + d.type : "未知事件";
+					default:
+						return null;
+				}
+			}
+			function timeOf(node) {
+				const d = node && node.data;
+				if (!d || typeof d !== "object") return null;
+				const t = typeof d.time === "number" ? d.time
+					: (d.root && typeof d.root.time === "number" ? d.root.time : null);
+				return t;
+			}
+			function fmtTime(ms) {
+				if (typeof ms !== "number" || !isFinite(ms)) return "";
+				const d = new Date(ms);
+				const h = d.getHours();
+				const m = d.getMinutes();
+				return (h < 10 ? "0" + h : h) + ":" + (m < 10 ? "0" + m : m);
+			}
+			function turnOf(node) {
+				const loc = node && node.location;
+				if (!loc) return null;
+				if (loc.kind === "step" || loc.kind === "turn") return loc.turn.turn;
+				return null;
+			}
+			function truncate(text, max) {
+				if (typeof text !== "string") return "";
+				if (text.length <= max) return text;
+				return text.slice(0, max) + "…";
+			}
+			function deriveOutline(snap) {
+				const empty = { groups: [], count: 0, byKey: {} };
+				if (snap === null || snap === undefined) return empty;
+				const order = snap.chat && snap.chat.order;
+				const nodes = snap.chat && snap.chat.nodes;
+				if (!Array.isArray(order) || nodes === undefined) return empty;
+				const groups = [];
+				const byKey = {};
+				let current = null;
+				let count = 0;
+				for (const key of order) {
+					const node = nodes.get(key);
+					if (node === undefined) continue;
+					const meta = KIND_META[node.kind] || KIND_META.unknown;
+					const item = {
+						key: node.key,
+						kind: node.kind,
+						label: meta.label,
+						cls: meta.cls,
+						preview: previewFor(node),
+						time: fmtTime(timeOf(node)),
+					};
+					const turn = turnOf(node);
+					if (turn === null) {
+						groups.push({ turn: null, items: [item], gid: "x" + groups.length });
+						count += 1;
+						current = null;
+						continue;
+					}
+					if (current === null || current.turn !== turn) {
+						current = { turn: turn, items: [], gid: "t" + turn };
+						groups.push(current);
+					}
+					current.items.push(item);
+					count += 1;
+				}
+				for (const g of groups) {
+					const first = g.items[0];
+					if (g.turn === null) {
+						g.title = first.label;
+						g.subtitle = truncate(first.preview || "", 60);
+						g.headKey = first.key;
+						g.headIsUser = false;
+					} else {
+						g.title = "第 " + g.turn + " 轮";
+						const head = first.kind === "user" ? first : null;
+						g.headKey = head ? head.key : first.key;
+						g.headIsUser = head !== null;
+						g.subtitle = truncate((head ? head.preview : first.preview) || "", 60);
+					}
+					for (const it of g.items) byKey[it.key] = g.gid;
+				}
+				return { groups: groups, count: count, byKey: byKey };
+			}
+			let cacheKey = null;
+			let cacheValue = null;
+			function selectOutline(snap) {
+				if (snap !== cacheKey) {
+					cacheKey = snap;
+					cacheValue = deriveOutline(snap);
+				}
+				return cacheValue;
+			}
+
+			/* ---------- DOM helpers: jump + position tracking ---------- */
+			function findAnchor(key) {
+				const rows = document.querySelectorAll("[data-chat-anchor-key]");
+				for (const row of rows) {
+					if (row.getAttribute("data-chat-anchor-key") === key) return row;
+				}
+				return null;
+			}
+			let lastActive = null;
+			function jumpTo(key) {
+				try {
+					const el = findAnchor(key);
+					if (el === null) return false;
+					el.scrollIntoView({ behavior: "smooth", block: "start" });
+					lastActive = key;
+					setState({ activeKey: key });
+					return true;
+				} catch (err) {
+					console.error(err);
+					return false;
+				}
+			}
+			function computeActiveKey() {
+				try {
+					const scrollport = document.querySelector("[data-conversation-scroll]");
+					if (scrollport === null) return null;
+					const vp = scrollport.getBoundingClientRect();
+					const rows = document.querySelectorAll("[data-chat-anchor-key]");
+					let found = null;
+					for (const row of rows) {
+						const rect = row.getBoundingClientRect();
+						if (rect.bottom > vp.top) { found = row; break; }
+					}
+					if (found === null && rows.length > 0) found = rows[rows.length - 1];
+					return found === null ? null : found.getAttribute("data-chat-anchor-key");
+				} catch (err) {
+					console.error(err);
+					return null;
+				}
+			}
+
+			let panelEl = null;
+			let listEl = null;
+			const itemEls = {};
+			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);
+				React.useEffect(() => {
+					setState({ sessionId: props.sessionId, outline: outline });
+				}, [outline, props.sessionId]);
+				React.useEffect(() => {
+					if (state.sessionId !== null && state.sessionId !== props.sessionId) {
+						lastActive = null;
+						setState({ activeKey: null, expanded: {} });
+					}
+				}, [props.sessionId]);
+				return React.createElement("button", {
+					type: "button",
+					className: "cnvnav-toggle" + (snap.open ? " cnvnav-toggle-on" : ""),
+					"aria-pressed": snap.open,
+					title: snap.open ? "收起会话导航" : "打开会话导航",
+					onClick: () => setState({ open: !snap.open }),
+				}, React.createElement(ToggleIcon), "导航");
+			}
+
+			/* ---------- floating navigator panel ---------- */
+			function Panel() {
+				const snap = useStore();
+
+				React.useEffect(() => {
+					if (!snap.open) return;
+					function place() {
+						const panel = panelEl;
+						if (panel === null) return;
+						const vw = document.documentElement.clientWidth || 1000;
+						const vh = document.documentElement.clientHeight || 800;
+						const sp = document.querySelector("[data-conversation-scroll]");
+						const rect = sp !== null ? sp.getBoundingClientRect() : { left: 300, top: 60, height: vh - 90 };
+						const width = 288;
+						let left = rect.left - width - 12;
+						if (left < 12) left = rect.left + 12;
+						if (left + width > vw - 8) left = Math.max(8, vw - width - 8);
+						panel.style.left = Math.round(left) + "px";
+						panel.style.top = Math.max(8, Math.round(rect.top + 8)) + "px";
+						panel.style.maxHeight = Math.round(Math.min(rect.height - 24, vh - 40)) + "px";
+					}
+					place();
+					window.addEventListener("resize", place);
+					return () => window.removeEventListener("resize", place);
+				}, [snap.open]);
+
+				React.useEffect(() => {
+					if (!snap.open) return;
+					const run = () => {
+						const key = computeActiveKey();
+						if (key !== lastActive) {
+							lastActive = key;
+							setState({ activeKey: key });
+						}
+					};
+					const update = timer !== undefined ? timer.throttle(run, 120) : run;
+					document.addEventListener("scroll", update, true);
+					window.addEventListener("resize", update);
+					run();
+					return () => {
+						document.removeEventListener("scroll", update, true);
+						window.removeEventListener("resize", update);
+						if (timer !== undefined && typeof update.dispose === "function") update.dispose();
+					};
+				}, [snap.open]);
+
+				React.useEffect(() => {
+					if (!snap.open || snap.activeKey === null) return;
+					let target = itemEls[snap.activeKey];
+					if (target === undefined || target === null) {
+						const gid = snap.outline !== null ? snap.outline.byKey[snap.activeKey] : undefined;
+						if (gid !== undefined) target = groupEls[gid];
+					}
+					const list = listEl;
+					if (target !== undefined && target !== null && list !== null) {
+						const lr = list.getBoundingClientRect();
+						const er = target.getBoundingClientRect();
+						const rel = er.top - lr.top + list.scrollTop;
+						if (rel < list.scrollTop || rel + er.height > list.scrollTop + list.clientHeight) {
+							list.scrollTop = Math.max(0, rel - list.clientHeight / 2);
+						}
+					}
+				}, [snap.open, snap.activeKey]);
+
+				if (!snap.open) return null;
+
+				const groups = snap.outline !== null ? snap.outline.groups : [];
+				const count = snap.outline !== null ? snap.outline.count : 0;
+
+				const groupNodes = groups.map((g) => {
+					const expanded = snap.expanded[g.gid] === true;
+					const isTurnGroup = g.turn !== null;
+					const stepItems = isTurnGroup ? (g.headIsUser ? g.items.slice(1) : g.items) : [];
+					const hasSteps = stepItems.length > 0;
+					const groupActive = g.items.some((it) => it.key === snap.activeKey);
+					return React.createElement("div", { key: g.gid, className: "cnvnav-group" },
+						React.createElement("div", {
+							ref: (el) => { groupEls[g.gid] = el; },
+							className: "cnvnav-group-row" + (groupActive ? " cnvnav-group-row-active" : ""),
+						},
+							React.createElement("button", {
+								type: "button",
+								className: "cnvnav-group-head",
+								title: "跳转到此位置",
+								onClick: () => jumpTo(g.headKey),
+							},
+								React.createElement("span", { className: "cnvnav-group-title" }, g.title),
+								g.subtitle !== ""
+									? React.createElement("span", { className: "cnvnav-group-sub" }, g.subtitle)
+									: null,
+							),
+							hasSteps
+								? React.createElement("button", {
+									type: "button",
+									className: "cnvnav-chevron",
+									title: expanded ? "折叠步次" : "展开步次",
+									"aria-expanded": expanded,
+									onClick: (e) => {
+										e.stopPropagation();
+										setState({ expanded: Object.assign({}, state.expanded, { [g.gid]: !expanded }) });
+									},
+								},
+									expanded ? "▾" : "▸ " + stepItems.length,
+								)
+								: null,
+						),
+						expanded && hasSteps
+							? stepItems.map((item) =>
+								React.createElement("button", {
+									key: item.key,
+									type: "button",
+									ref: (el) => { itemEls[item.key] = el; },
+									className: "cnvnav-item" + (item.key === snap.activeKey ? " cnvnav-item-active" : ""),
+									onClick: () => jumpTo(item.key),
+								},
+									React.createElement("span", { className: "cnvnav-badge cnvnav-badge-" + item.cls }, item.label),
+									item.preview !== null && item.preview !== ""
+										? React.createElement("span", { className: "cnvnav-item-preview" }, item.preview)
+										: null,
+									item.time !== ""
+										? React.createElement("span", { className: "cnvnav-item-time" }, item.time)
+										: null,
+								),
+							)
+							: null,
+					);
+				});
+
+				return React.createElement("div", {
+					ref: (el) => { panelEl = el; },
+					className: "cnvnav-panel",
+					role: "complementary",
+					"aria-label": "会话导航",
+				},
+					React.createElement("div", { className: "cnvnav-head" },
+						React.createElement("span", { className: "cnvnav-title" }, "会话导航"),
+						React.createElement("span", { className: "cnvnav-count" }, String(count) + " 条"),
+						React.createElement("button", {
+							type: "button",
+							className: "cnvnav-close",
+							title: "收起",
+							onClick: () => setState({ open: false }),
+						}, "×"),
+					),
+					React.createElement("div", {
+						ref: (el) => { listEl = el; },
+						className: "cnvnav-list",
+					},
+						groups.length === 0
+							? React.createElement("div", { className: "cnvnav-empty" }, "当前会话暂无对话节点")
+							: groupNodes,
+					),
+					React.createElement("div", { className: "cnvnav-footer" },
+						React.createElement("button", {
+							type: "button",
+							className: "cnvnav-bottom",
+							onClick: () => {
+								const gs = snap.outline !== null ? snap.outline.groups : [];
+								if (gs.length === 0) return;
+								const lastGroup = gs[gs.length - 1];
+								const lastItem = lastGroup.items[lastGroup.items.length - 1];
+								if (lastItem !== undefined) jumpTo(lastItem.key);
+							},
+						}, "↓ 回到最新"),
+						React.createElement("button", {
+							type: "button",
+							className: "cnvnav-bottom",
+							title: "折叠所有已展开的轮次",
+							onClick: () => setState({ expanded: {} }),
+						}, "▼ 全部折叠"),
+					),
+				);
+			}
+
+			/* ---------- register ---------- */
+			slots.inject("conversation.session.header.utilities", () => slots.register(
+				{ name: "conversation.session.header.utilities", id: "conversation-navigator-toggle", order: 20, label: () => "会话导航" },
+				(props) => React.createElement(ToggleButton, props),
+			));
+			slots.inject("shell.overlay", () => slots.register(
+				{ name: "shell.overlay", id: "conversation-navigator-panel", order: 10, label: () => "会话导航" },
+				() => React.createElement(Panel),
+			));
+		}
+
+		const inject = ["slots"];
+		exports.apply = apply;
+		exports.inject = inject;
+		return module.exports;
+	}
+});

package/lib/index.js

@@ -0,0 +1,4 @@
+/** Host loader entry for the browser-only conversation navigator plugin. */
+/** Provides no host-side behavior. */
+function apply() {}
+export { apply };

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "dsh-conversation-navigator",
+  "version": "0.1.0",
+  "description": "Codex 风格的 DSH(DeepSeek Harness)会话导航插件:按轮折叠的对话大纲面板,支持节点点击跳转、滚动位置高亮与轨迹视图同款配色。",
+  "keywords": [
+    "dsh",
+    "deepseek-harness",
+    "cordis",
+    "cordis-plugin",
+    "conversation",
+    "navigator",
+    "outline",
+    "session",
+    "会话导航"
+  ],
+  "license": "MIT",
+  "type": "module",
+  "main": "lib/index.js",
+  "exports": {
+    ".": "./lib/index.js",
+    "./client": "./lib/client.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "cordis.patch.yml"
+  ],
+  "engines": {
+    "node": ">=18"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-conversation"
+      ]
+    }
+  }
+}