dsh-milestone 0.1.0 → 0.2.0

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 dsh-milestone 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.
+MIT License
+
+Copyright (c) 2026 dsh-milestone 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

@@ -1,72 +1,90 @@
-# dsh-milestone
-
-会话里程碑导航条（DeepSeek Harness 插件）。在会话视图右侧渲染一条垂直 scrubber，每个 **user 发言** 对应一个进度点：鼠标悬停预览该条消息的前 80 字，点击平滑跳转到对应位置。
-
-> **dsh-plugin** · 适配 DeepSeek Harness (`deepseek-ai/deepseek-harness`) Web UI。
-
-## 功能
-
-- **进度点（tick）**：每条真实 user 消息 = 一个 tick，按**真实渲染偏移**定位（非等距），跟随滚动与内容变化实时更新。
-- **悬停预览**：hover 显示该条 user 消息的前 80 字。
-- **点击跳转**：点击 tick 平滑滚动到对应消息（`scrollIntoView`）。
-- 少于 2 条 user 消息时不渲染（无导航价值）。
-
-## 安装
-
-```sh
-# 本地目录（开发）
-dsh plugin --profile demo add ./dsh-milestone
-
-# npm 包（发布后）
-dsh plugin --profile demo add dsh-milestone
-
-# GitHub 仓库（需 prepare 脚本 + allowBuilds 许可）
-dsh plugin --profile demo add github:you/dsh-milestone
-```
-
-然后 `npx @deepseek-ai/dsh web` 启动 Web UI 即可看到右侧里程碑条。
-
-## 开发
-
-要求 **Node.js `>= 24`**（官方 harness 要求 `^22.19 || >=24`，本仓库已验证 `24.19.0`）。依赖从 npm 安装（`0.1.0-rc.6` 系列，完整可用）。
-
-```sh
-pnpm install
-pnpm run build       # 产出 lib/index.js (node half) + lib/client.js (browser half)
-pnpm exec tsc --noEmit   # 类型检查
-pnpm run watch       # 监听构建
-```
-
-构建产物：`lib/index.js`（node half，空 apply）+ `lib/client.js`（browser half，CJS closure，`window.__ModuleLoader__.load` banner）。
-
-### 架构
-
-双半边插件（Host = Node 进程，Client = 浏览器）：
-
-```
-src/index.ts            node half —— 空 apply，让插件进入 host cordis 配置树
-src/client/index.ts     browser half —— 两个 slot 注册
-src/client/MilestoneOverlay.tsx  shell.overlay entry（root scope）
-                                   └─ 声明 session 子槽 milestone.rail
-                                   └─ 通过 SessionProvider 桥接到会话区
-src/client/MilestoneRail.tsx      milestone.rail entry（session scope）
-                                   └─ useSession 读取会话快照
-                                   └─ DOM 锚点定位 + tick 渲染 + 跳转
-```
-
-关键机制：
-
-- **注入点**：`shell.overlay`（`kind: 'list'`，`scope: 'root'`）——全框架浮动层，附加式、点击穿透，是"悬浮 rail"的唯一正确位置。
-- **会话数据**：通过声明 session-scope 子槽 `milestone.rail`，框架自动注入 `SessionProvider`（`PropsRenderSlots` 从子槽 scope 推导），rail 组件因此拿到 `useSession` / `sessionId`。
-- **消息定位**：`useSession(s => s.chat.order)` + `s.chat.nodes.get(key)` 过滤 `kind === 'user'`；DOM 锚点 `data-chat-anchor-key`（节点 key = `13:input-message<messageId>`），scrollport 为 `[data-conversation-scroll]`。
-- **性能**：行元素按消息列表版本缓存（O(n) 重算）；scroll/resize 通过 `requestAnimationFrame` 节流。
-
-## 已知限制
-
-- 仅覆盖当前已加载的消息窗口（harness 初始加载最近 50 条事件，向上滚动触发 `loadOlder` 分页）；rail 会随分页自动更新，但更早的消息需要先滚动加载。
-- preview 从 DOM `textContent` 提取，长消息截断为 80 字。
-- 尚未实现"当前定位"高亮（P1）。
-
-## License
-
-MIT
+<div align="center">
+
+# 🧭 dsh-milestone
+
+**DeepSeek Harness 的会话里程碑导航条**
+
+像 Git 提交图一样，一眼定位每一次提问，一键跳转到任何位置。
+
+<p>
+  <a href="https://www.npmjs.com/package/dsh-milestone"><img src="https://img.shields.io/npm/v/dsh-milestone?color=2563eb" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/dsh-milestone"><img src="https://img.shields.io/npm/dm/dsh-milestone" alt="npm downloads"></a>
+  <a href="./LICENSE"><img src="https://img.shields.io/npm/l/dsh-milestone" alt="license"></a>
+  <a href="https://github.com/topics/dsh-plugin"><img src="https://img.shields.io/badge/topic-dsh--plugin-2563eb" alt="dsh-plugin"></a>
+</p>
+
+</div>
+
+---
+
+## 为什么需要它？
+
+和 AI 聊了上百轮之后，想找回**第 17 轮那个提问**？你只能不停滚轮往上翻，眼睛在一堆代码块、工具调用和思考过程里大海捞针。
+
+**dsh-milestone** 在会话右侧挂一条**圆点时间线**——每一条提问对应一个圆点，鼠标悬停看内容，点击瞬间跳转。长对话的"导航地图"。
+
+<img src="./assets/demo.svg" alt="dsh-milestone 效果示意图" width="100%">
+
+## 好用在哪？
+
+- ⚡ **一键定位** —— 点击任意圆点，平滑滚动到那条消息，不用再手动翻几百行。
+- 📏 **固定间距** —— 圆点**等距排列**，不随对话长度挤压变形，永远点得准。
+- 🎨 **蓝色渐变** —— 最新最深、最早最浅，一眼看清提问的先后顺序，像 Git 提交图。
+- 🖱️ **滚轮滑动** —— 长会话圆点超出可视区时，鼠标在里程碑条上滚轮即可滑动选点。
+- 💬 **丰富悬停** —— 悬停展示消息预览、相对时间、第 N 轮、用时、结束原因、首字延迟(TTFT)、tokens/秒。
+- 🪶 **零侵入** —— 官方 slot 机制挂载，不修改 harness 源码，装完即用。
+
+## 悬停能看到什么
+
+```
+┌─────────────────────────────────────────┐
+│ 第 3 / 5 条 · 第 2 轮                     │  ← 序号 + 轮次
+│ 帮我优化这段代码的性能                    │  ← 消息预览（前 80 字）
+│ 5 分钟前 · 用时 1m30s · 首字 1.2s · 12.4 tok/s │  ← 时间 · 耗时 · TTFT · 吞吐
+└─────────────────────────────────────────┘
+```
+
+元信息全部来自 harness 原生的 session 快照（`turnTimings` / `timeline.turns` / `turn-tail`），无额外依赖。
+
+## 快速开始
+
+```sh
+# 安装插件到某个 profile
+dsh plugin --profile demo add dsh-milestone
+
+# 启动 Web UI
+npx @deepseek-ai/dsh web    # → http://127.0.0.1:3080
+```
+
+打开一个**多轮对话**（至少 2 条提问），会话视图右侧就会出现里程碑条。
+
+> 要求 Node.js `>= 24`（harness 官方要求）。
+
+## 它是什么做的？
+
+双半边浏览器插件（空 node half + `shell.overlay` slot 挂载的 client half）：
+
+```
+shell.overlay (root scope)
+  └─ milestone.rail (session scope, 自声明子槽)
+       └─ useSession 读取会话快照 → 圆点列表 + 悬停 + 跳转
+```
+
+- **注入点**：`shell.overlay` —— 全框架浮动层，附加式、点击穿透，不影响任何现有 UI。
+- **数据源**：`chat.order` + `chat.nodes`（user 消息）+ `chat.timeline`（turn 元数据）。
+- **跳转**：DOM 锚点 `data-chat-anchor-key`，`scrollIntoView` 平滑定位。
+
+## 已知限制
+
+- 仅覆盖当前已加载的消息窗口（初始 50 条，向上滚动分页会自动补圆点）。
+- TTFT / tokens/秒 依赖 turn 位置数据，窗口外或未完成的 turn 不显示（自动隐藏）。
+
+## License
+
+[MIT](./LICENSE)
+
+---
+
+<p align="center">
+  觉得好用？给个 ⭐ 支持一下，或把它推荐给正在 DeepSeek Harness 里挣扎的开发者吧。
+</p>

package/lib/client.js

@@ -20,110 +20,172 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/MilestoneRail.tsx
 		/**
-		* MilestoneRail: the milestone.rail entry (session scope). It reads the
-		* conversation snapshot through `useSession`, finds every user-message row in
-		* the chat flow, and renders a fixed right-side vertical scrubber: one tick
-		* per user message positioned by real rendered offset, a hover preview of the
-		* message text, and click-to-jump via the row's `data-chat-anchor-key` DOM
-		* anchor.
+		* MilestoneRail: the milestone.rail entry (session scope). Renders a fixed
+		* right-side vertical scrubber as a **fixed-pitch dot list** (like a git commit
+		* graph), NOT a minimap: one dot per user message, equal spacing regardless of
+		* conversation length. The list itself scrolls with the wheel when it outgrows
+		* the viewport; hovering a dot shows rich metadata (time, turn, duration, end
+		* reason, TTFT, tokens/sec) and clicking jumps the chat to that message.
 		*
-		* Scroll positioning mirrors the harness chat view's own flowTop math: a row's
-		* content position is its scrollport-relative top plus the current scrollTop,
-		* normalized against scrollHeight. Ticks recompute on scroll and on any
-		* scrollport/row resize, throttled through requestAnimationFrame. Row elements
-		* are cached once per message-list revision (O(n) per recompute, not O(n^2)).
+		* Data sources (all from the session-scoped `useSession` snapshot):
+		*   - chat.order + chat.nodes.get(key)  -> user-message nodes (key/id/location)
+		*   - chat.timeline.turns.get(turn)     -> turn start/end time, status, reason,
+		*                                          and the ui-conversation 'turn-tail'
+		*                                          location data (ttftMs/tokensPerSecond)
+		*
+		* Positioning: the rail hugs the conversation scrollport's right edge (offset a
+		* little inward so it clears the native scrollbar and sits near the prose).
 		*/
+		/** Minimum user messages before the rail adds value. */
+		const MIN_MARKS = 2;
 		const PREVIEW_LENGTH = 80;
-		/** Minimum ticks before the rail adds value. */
-		const MIN_TICKS = 2;
+		/** Visual dot diameter (px). */
+		const DOT_SIZE = 12;
+		/** Hit area per dot (px) — larger than the dot for comfortable clicking. */
+		const DOT_HIT = 22;
+		/** Vertical gap between dot hit areas (px) — fixed pitch, never scaled. */
+		const DOT_GAP = 12;
+		/** Inward offset from the scrollport right edge so the rail clears the scrollbar. */
+		const RAIL_INSET = 14;
 		/**
 		* Find a chat row by its node key, avoiding CSS.escape pitfalls on keys that
-		* contain `<`/`>`/`:` (the node key is `12:input-message<messageId>`).
-		* Mirrors the harness ChatView's `anchorElement` scan.
+		* contain `<`/`>`/`:` (the node key is `13:input-message<messageId>`).
 		*/
 		function findRow(key) {
 			for (const row of document.querySelectorAll("[data-chat-anchor-key]")) if (row.dataset.chatAnchorKey === key) return row;
 			return null;
 		}
+		/** Extract a plain-text preview from a user message's ContentBlock[] payload. */
+		function extractPreview(content) {
+			if (!Array.isArray(content)) return "";
+			let text = "";
+			for (const block of content) if (block !== null && typeof block === "object" && block.type === "text") {
+				const t = block.text;
+				if (typeof t === "string") text += (text === "" ? "" : " ") + t;
+			}
+			return text.trim().slice(0, PREVIEW_LENGTH);
+		}
+		/** Blue gradient: newest (last) dots are deepest, oldest are lightest. */
+		function dotColor(index, total) {
+			return `hsl(218, 88%, ${72 - (total <= 1 ? 0 : index / (total - 1)) * 27}%)`;
+		}
+		/** Relative wall-clock label for a Unix-epoch-ms timestamp. */
+		function formatRelativeTime(time) {
+			const diff = Date.now() - time;
+			if (diff < 6e4) return "刚刚";
+			if (diff < 36e5) return `${Math.floor(diff / 6e4)} 分钟前`;
+			if (diff < 864e5) return `${Math.floor(diff / 36e5)} 小时前`;
+			return `${Math.floor(diff / 864e5)} 天前`;
+		}
+		/** Compact duration label (ms). */
+		function formatDuration(ms) {
+			if (ms < 1e3) return `${ms}ms`;
+			if (ms < 6e4) return `${(ms / 1e3).toFixed(1)}s`;
+			return `${Math.floor(ms / 6e4)}m${Math.floor(ms % 6e4 / 1e3)}s`;
+		}
+		/** Human label for a TurnEndReason kind. */
+		function reasonLabelOf(kind) {
+			switch (kind) {
+				case "completed": return "已完成";
+				case "aborted": return "已中止";
+				case "error": return "出错";
+				case "max-tokens": return "达到上限";
+				case "interrupted": return "已中断";
+				case "blocked": return "已阻塞";
+				default: return kind;
+			}
+		}
+		/** Read the ui-conversation 'turn-tail' location data (ttftMs/tokensPerSecond). */
+		function turnTailOf(turn) {
+			const data = turn.data;
+			if (data?.get === void 0) return void 0;
+			return data.get("turn-tail");
+		}
 		/**
 		* @param props - session standard kit (useSession, sessionId, useProjection).
 		*/
 		function MilestoneRail({ useSession }) {
 			const order = useSession((s) => s.chat.order);
 			const nodes = useSession((s) => s.chat.nodes);
-			const userKeys = (0, react.useMemo)(() => order.filter((key) => nodes.get(key)?.kind === "user"), [order, nodes]);
-			const [ticks, setTicks] = (0, react.useState)([]);
+			const timeline = useSession((s) => s.chat.timeline);
+			const marks = (0, react.useMemo)(() => {
+				const result = [];
+				for (const key of order) {
+					const node = nodes.get(key);
+					if (node === void 0 || node.kind !== "user") continue;
+					const data = node.data;
+					const turn = node.location.kind === "turn" || node.location.kind === "step" ? node.location.turn.turn : void 0;
+					result.push({
+						key,
+						turn,
+						seq: data.seq ?? 0,
+						time: data.time ?? 0,
+						preview: extractPreview(data.content)
+					});
+				}
+				return result;
+			}, [order, nodes]);
 			const [railBox, setRailBox] = (0, react.useState)(null);
 			const [hover, setHover] = (0, react.useState)(null);
 			(0, react.useLayoutEffect)(() => {
-				if (userKeys.length < MIN_TICKS) {
-					setTicks([]);
+				if (marks.length < MIN_MARKS) {
 					setRailBox(null);
 					return;
 				}
 				const scrollport = document.querySelector("[data-conversation-scroll]");
 				if (scrollport === null) return;
-				const rowCache = /* @__PURE__ */ new Map();
-				for (const key of userKeys) {
-					const row = findRow(key);
-					if (row !== null) rowCache.set(key, row);
-				}
 				const compute = () => {
 					const sp = scrollport.getBoundingClientRect();
-					const total = scrollport.scrollHeight;
-					const next = [];
-					for (const key of userKeys) {
-						let row = rowCache.get(key);
-						if (row === void 0 || !row.isConnected) {
-							const fresh = findRow(key);
-							if (fresh === null) continue;
-							row = fresh;
-							rowCache.set(key, fresh);
-						}
-						const contentTop = row.getBoundingClientRect().top - sp.top + scrollport.scrollTop;
-						const top = total > 0 ? contentTop / total * 100 : 0;
-						next.push({
-							key,
-							top: Math.min(99, Math.max(0, top))
-						});
-					}
-					setTicks(next);
 					setRailBox({
 						top: sp.top,
 						height: sp.height,
-						right: Math.max(4, window.innerWidth - sp.right)
+						right: Math.max(8, window.innerWidth - sp.right + RAIL_INSET)
 					});
 				};
 				compute();
-				let raf = 0;
-				const schedule = () => {
-					cancelAnimationFrame(raf);
-					raf = requestAnimationFrame(compute);
-				};
-				scrollport.addEventListener("scroll", schedule, { passive: true });
-				const observer = new ResizeObserver(schedule);
+				const observer = new ResizeObserver(compute);
 				observer.observe(scrollport);
-				for (const row of rowCache.values()) observer.observe(row);
+				window.addEventListener("resize", compute);
 				return () => {
-					cancelAnimationFrame(raf);
-					scrollport.removeEventListener("scroll", schedule);
 					observer.disconnect();
+					window.removeEventListener("resize", compute);
 				};
-			}, [userKeys]);
-			if (railBox === null || ticks.length < MIN_TICKS) return null;
+			}, [marks.length]);
+			if (railBox === null || marks.length < MIN_MARKS) return null;
 			const jump = (key) => {
 				findRow(key)?.scrollIntoView({
 					behavior: "smooth",
 					block: "start"
 				});
 			};
-			const onEnter = (tick) => {
-				const preview = findRow(tick.key)?.textContent?.trim().slice(0, PREVIEW_LENGTH) ?? "";
-				setHover({
-					key: tick.key,
-					preview,
-					top: tick.top
-				});
+			const buildHover = (mark, index) => {
+				const turn = mark.turn !== void 0 ? timeline.turns.get(mark.turn) : void 0;
+				let durationLabel = null;
+				let reasonLabel = null;
+				let ttftLabel = null;
+				let tpsLabel = null;
+				if (turn !== void 0) {
+					if (turn.start !== void 0 && turn.end !== void 0) durationLabel = formatDuration(turn.end.time - turn.start.time);
+					if (turn.end !== void 0) {
+						const reason = turn.end.data.reason;
+						if (reason?.kind !== void 0) reasonLabel = reasonLabelOf(reason.kind);
+					}
+					const tail = turnTailOf(turn);
+					if (tail !== void 0) {
+						if (tail.ttftMs !== void 0) ttftLabel = formatDuration(tail.ttftMs);
+						if (tail.tokensPerSecond !== void 0) tpsLabel = `${tail.tokensPerSecond.toFixed(1)} tok/s`;
+					}
+				}
+				return {
+					mark,
+					index,
+					total: marks.length,
+					turnLabel: mark.turn !== void 0 ? `第 ${mark.turn} 轮` : null,
+					durationLabel,
+					reasonLabel,
+					ttftLabel,
+					tpsLabel
+				};
 			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				style: {
@@ -131,48 +193,115 @@ window.__ModuleLoader__.load({
 					top: railBox.top,
 					right: railBox.right,
 					height: railBox.height,
-					width: 20,
+					width: DOT_HIT,
 					pointerEvents: "auto",
 					zIndex: 100
 				},
-				"aria-label": "Conversation milestones",
-				children: [ticks.map((tick) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-					type: "button",
+				"aria-label": "会话里程碑",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					style: {
-						position: "absolute",
-						top: `${tick.top}%`,
-						right: 6,
-						width: 8,
-						height: 3,
-						borderRadius: 2,
-						border: "none",
-						padding: 0,
-						background: hover?.key === tick.key ? "#4d7cfe" : "rgba(120, 130, 150, 0.5)",
-						cursor: "pointer"
+						height: "100%",
+						overflowY: "auto",
+						display: "flex",
+						flexDirection: "column",
+						alignItems: "center",
+						gap: DOT_GAP,
+						padding: "6px 0",
+						scrollbarWidth: "none"
 					},
-					onMouseEnter: () => onEnter(tick),
-					onMouseLeave: () => setHover(null),
-					onClick: () => jump(tick.key),
-					"aria-label": "Jump to user message"
-				}, tick.key)), hover !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					children: marks.map((mark, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						style: {
+							width: DOT_HIT,
+							height: DOT_HIT,
+							flexShrink: 0,
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							background: "transparent",
+							border: "none",
+							padding: 0,
+							cursor: "pointer"
+						},
+						onMouseEnter: (e) => {
+							const rect = e.currentTarget.getBoundingClientRect();
+							setHover({
+								...buildHover(mark, i),
+								top: rect.top + rect.height / 2
+							});
+						},
+						onMouseLeave: () => setHover(null),
+						onClick: () => jump(mark.key),
+						"aria-label": `跳转到第 ${i + 1} 条消息`,
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
+							width: DOT_SIZE,
+							height: DOT_SIZE,
+							borderRadius: "50%",
+							background: dotColor(i, marks.length),
+							boxShadow: hover?.mark.key === mark.key ? "0 0 0 3px rgba(77, 124, 254, 0.35)" : "none",
+							transition: "transform 120ms ease",
+							transform: hover?.mark.key === mark.key ? "scale(1.35)" : "none"
+						} })
+					}, mark.key))
+				}), hover !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					style: {
 						position: "fixed",
-						right: railBox.right + 22,
-						top: railBox.top + railBox.height * hover.top / 100,
+						right: railBox.right + DOT_HIT + 8,
+						top: hover.top,
 						transform: "translateY(-50%)",
-						maxWidth: 280,
-						padding: "8px 10px",
-						background: "rgba(20, 24, 32, 0.95)",
+						maxWidth: 300,
+						minWidth: 180,
+						padding: "8px 12px",
+						background: "rgba(20, 24, 32, 0.96)",
 						color: "#e6e8ee",
-						borderRadius: 6,
+						borderRadius: 8,
 						fontSize: 12,
-						lineHeight: 1.5,
+						lineHeight: 1.6,
 						whiteSpace: "pre-wrap",
 						wordBreak: "break-word",
-						boxShadow: "0 4px 16px rgba(0, 0, 0, 0.3)",
-						zIndex: 101
+						boxShadow: "0 6px 20px rgba(0, 0, 0, 0.4)",
+						zIndex: 101,
+						pointerEvents: "none"
 					},
-					children: hover.preview
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								gap: 8,
+								color: "#9aa4b8",
+								fontSize: 11,
+								marginBottom: 4
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+								"第 ",
+								hover.index + 1,
+								" / ",
+								hover.total,
+								" 条"
+							] }), hover.turnLabel !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: hover.turnLabel })]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							style: { color: "#c7cede" },
+							children: hover.mark.preview !== "" ? hover.mark.preview : "（无文本）"
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								flexWrap: "wrap",
+								gap: 8,
+								color: "#8b96ab",
+								fontSize: 11,
+								marginTop: 4
+							},
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: formatRelativeTime(hover.mark.time) }),
+								hover.durationLabel !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["用时 ", hover.durationLabel] }),
+								hover.reasonLabel !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: hover.reasonLabel }),
+								hover.ttftLabel !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: ["首字 ", hover.ttftLabel] }),
+								hover.tpsLabel !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: hover.tpsLabel })
+							]
+						})
+					]
 				})]
 			});
 		}

package/package.json

@@ -1,61 +1,61 @@
-{
-  "name": "dsh-milestone",
-  "version": "0.1.0",
-  "description": "Conversation milestone rail for DeepSeek Harness: a right-side vertical scrubber showing one tick per user message — hover to preview, click to jump.",
-  "type": "module",
-  "main": "lib/index.js",
-  "exports": {
-    ".": "./lib/index.js",
-    "./client": "./lib/client.js",
-    "./package.json": "./package.json"
-  },
-  "dsh": {
-    "bundle": {
-      "patch": "./cordis.patch.yml"
-    },
-    "client": {
-      "inject": [
-        "@deepseek-ai/dsh-client-runtime",
-        "@deepseek-ai/dsh-client-ui-conversation",
-        "@deepseek-ai/dsh-client-ui-layout"
-      ],
-      "platform": "web"
-    }
-  },
-  "scripts": {
-    "build": "tsdown",
-    "watch": "tsdown --watch",
-    "typecheck": "tsc --noEmit",
-    "prepublishOnly": "pnpm run build"
-  },
-  "license": "MIT",
-  "keywords": [
-    "deepseek",
-    "harness",
-    "dsh",
-    "dsh-plugin",
-    "conversation",
-    "navigation"
-  ],
-  "files": [
-    "lib/index.js",
-    "lib/client.js",
-    "cordis.patch.yml"
-  ],
-  "peerDependencies": {
-    "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
-    "react": "^18.2.0"
-  },
-  "devDependencies": {
-    "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-ui-layout": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
-    "@types/react": "~18.3.1",
-    "react": "^18.2.0",
-    "tsdown": "0.22.2",
-    "typescript": "^6.0.3"
-  }
-}
+{
+  "name": "dsh-milestone",
+  "version": "0.2.0",
+  "description": "Git-style milestone timeline for DeepSeek Harness: a fixed-pitch dot rail beside the conversation — hover for rich metadata, click to jump to any message.",
+  "type": "module",
+  "main": "lib/index.js",
+  "exports": {
+    ".": "./lib/index.js",
+    "./client": "./lib/client.js",
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-conversation",
+        "@deepseek-ai/dsh-client-ui-layout"
+      ],
+      "platform": "web"
+    }
+  },
+  "scripts": {
+    "build": "tsdown",
+    "watch": "tsdown --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "pnpm run build"
+  },
+  "license": "MIT",
+  "keywords": [
+    "deepseek",
+    "harness",
+    "dsh",
+    "dsh-plugin",
+    "conversation",
+    "navigation"
+  ],
+  "files": [
+    "lib/index.js",
+    "lib/client.js",
+    "cordis.patch.yml"
+  ],
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-layout": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
+    "@types/react": "~18.3.1",
+    "react": "^18.2.0",
+    "tsdown": "0.22.2",
+    "typescript": "^6.0.3"
+  }
+}