dsh-milestone 0.2.1 → 0.3.0

package/README.md

@@ -30,6 +30,9 @@
 ## 好用在哪？
 
 - **一键定位** —— 点击任意圆点，平滑滚动到那条消息，不用再手动翻几百行。
+- **站内搜索** —— 搜索框过滤圆点，匹配的是**完整消息内容**（不是 80 字摘要），实时显示命中数 N/M，回车跳到下一个匹配，Esc 一键清空。
+- **当前位置高亮** —— 滚动会话时，离你视口最近的那条提问会亮起白环，永远知道「读到哪了」。
+- **加载更早** —— 历史没加载完时，顶部出现「···」按钮，点一下继续加载，并提示当前已显示多少条。
 - **固定间距** —— 圆点**等距排列**，不随对话长度挤压变形，永远点得准。
 - **蓝色渐变** —— 最新最深、最早最浅，一眼看清提问的先后顺序，像 Git 提交图。
 - **滚轮滑动** —— 长会话圆点超出可视区时，鼠标在里程碑条上滚轮即可滑动选点。
@@ -51,9 +54,12 @@
 ## 快速开始
 
 ```sh
-# 安装插件到某个 profile
+# 从 npm 安装（推荐）
 dsh plugin --profile demo add dsh-milestone
 
+# 或从 GitHub 源码安装
+dsh plugin --profile demo add "github:SnowCrescenter-tech/dsh-milestone#main"
+
 # 启动 Web UI
 npx @deepseek-ai/dsh web    # → http://127.0.0.1:3080
 ```
@@ -73,12 +79,13 @@ shell.overlay (root scope)
 ```
 
 - **注入点**：`shell.overlay` —— 全框架浮动层，附加式、点击穿透，不影响任何现有 UI。
-- **数据源**：`chat.order` + `chat.nodes`（user 消息）+ `chat.timeline`（turn 元数据）。
+- **数据源**：`chat.order` + `chat.nodes`（user 消息）+ `chat.timeline`（turn 元数据）+ `hasMore`/`loadingOlder`（分页状态）+ `loadOlder`（经 inject face 注入）。
 - **跳转**：DOM 锚点 `data-chat-anchor-key`，`scrollIntoView` 平滑定位。
+- **纯函数**：搜索过滤 / 位置计算 / 圆点状态都在 `rail-logic.ts` 纯函数里，单测覆盖。
 
 ## 已知限制
 
-- 仅覆盖当前已加载的消息窗口（初始 50 条，向上滚动分页会自动补圆点）。
+- 搜索范围 = 当前已加载的消息窗口（初始 50 条；点顶部「···」加载更早，更早的历史需先加载进来才能被搜到）。
 - TTFT / tokens/秒 依赖 turn 位置数据，窗口外或未完成的 turn 不显示（自动隐藏）。
 
 ## License

package/lib/client.js

@@ -18,6 +18,283 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/rail-logic.ts
+		/**
+		* Extract the FULL plain text of a ContentBlock[] payload: the `text` of every
+		* `{ type: 'text', text: string }` block, joined with a single space and
+		* trimmed. Unlike the rail's hover preview this is NOT truncated — callers use
+		* it for search matching, so the entire message must be searchable.
+		* @param content - untrusted payload; anything that is not an array yields ''.
+		*/
+		function extractText(content) {
+			if (!Array.isArray(content)) return "";
+			const parts = [];
+			for (const block of content) if (block !== null && typeof block === "object" && block.type === "text") {
+				const text = block.text;
+				if (typeof text === "string") parts.push(text);
+			}
+			return parts.join(" ").trim();
+		}
+		/**
+		* Case-insensitive substring filter over mark texts.
+		* @param marks - marks in rail order.
+		* @param query - the search query; empty/whitespace matches everything.
+		* @returns `matches` (ascending indices whose text includes the lowercased
+		* query; all indices when the query is blank) and `active` (the first match
+		* index, or -1 when the query is blank or nothing matches).
+		*/
+		function filterMarks(marks, query) {
+			const q = query.trim();
+			if (q === "") return {
+				matches: marks.map((_, i) => i),
+				active: -1
+			};
+			const lower = q.toLowerCase();
+			const matches = marks.reduce((acc, mark, i) => {
+				if (mark.text.toLowerCase().includes(lower)) acc.push(i);
+				return acc;
+			}, []);
+			return {
+				matches,
+				active: matches.length > 0 ? matches[0] : -1
+			};
+		}
+		/**
+		* Wrap-around match navigation.
+		* @param current - the currently active match index (any number; used raw).
+		* @param count - number of matches; `<= 0` yields -1.
+		* @param delta - +1 to advance, -1 to go back.
+		* @returns `(current + delta + count) % count`, or -1 when count <= 0.
+		*/
+		function nextMatchIndex(current, count, delta) {
+			if (count <= 0) return -1;
+			return (current + delta + count) % count;
+		}
+		/**
+		* Key of the row the viewport top currently sits in: the last row whose top is
+		* at or just above the viewport top (within a 0.5px epsilon).
+		* @param rows - rows in document order (ascending top).
+		* @param viewportTop - scrollport's current scroll offset.
+		* @returns that row's key; the first row's key when every row is below the
+		* viewport; undefined when there are no rows.
+		*/
+		function currentIndexOf(rows, viewportTop) {
+			if (rows.length === 0) return void 0;
+			let current = rows[0];
+			for (const row of rows) if (row.top <= viewportTop + .5) current = row;
+			else break;
+			return current.key;
+		}
+		/**
+		* Compute a mark's visual state from search + position signals.
+		* Precedence: `current` (row at viewport top) > `active` (first query match) >
+		* `match` (any query match) > `dimmed` (query active, not a match) > `normal`.
+		* @param opts - the mark's signals (key is kept for caller symmetry).
+		*/
+		function markState(opts) {
+			if (opts.isCurrent) return "current";
+			if (opts.isActive) return "active";
+			if (opts.isMatch) return "match";
+			if (opts.hasQuery) return "dimmed";
+			return "normal";
+		}
+		/**
+		* Blue gradient dot color, reproduced exactly from MilestoneRail: newest
+		* (highest index) is deepest, oldest is lightest. 72% lightness fading to 45%.
+		* @param index - dot position in the rail (0 = oldest).
+		* @param total - number of dots.
+		*/
+		function dotColor(index, total) {
+			return `hsl(218, 88%, ${72 - (total <= 1 ? 0 : index / (total - 1)) * 27}%)`;
+		}
+		//#endregion
+		//#region src/client/MilestoneRailSearch.tsx
+		/** Dot diameter (px) — matches the rail's DOT_HIT so the toggle aligns. */
+		const DOT_HIT$1 = 22;
+		/**
+		* @param props - the search state slice plus the rail's event handlers.
+		*/
+		function RailSearchUi({ panelTop, panelRight, query, panelOpen, matches, total, onToggle, onQueryChange, onSearchKeyDown, onClear }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"data-search-toggle": true,
+				"aria-label": "搜索消息",
+				"aria-pressed": panelOpen,
+				onClick: onToggle,
+				style: {
+					width: DOT_HIT$1,
+					height: DOT_HIT$1,
+					flexShrink: 0,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					background: panelOpen ? "rgba(77, 124, 254, 0.18)" : "transparent",
+					border: "none",
+					padding: 0,
+					cursor: "pointer",
+					color: panelOpen ? "#9db8ff" : "#8b96ab"
+				},
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+					width: "13",
+					height: "13",
+					viewBox: "0 0 24 24",
+					fill: "none",
+					stroke: "currentColor",
+					strokeWidth: "2.5",
+					strokeLinecap: "round",
+					"aria-hidden": "true",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+						cx: "11",
+						cy: "11",
+						r: "7"
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m21 21-4.3-4.3" })]
+				})
+			}), panelOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				style: {
+					position: "fixed",
+					top: panelTop,
+					right: panelRight,
+					width: 220,
+					padding: "10px 12px",
+					background: "rgba(20, 24, 32, 0.97)",
+					color: "#e6e8ee",
+					borderRadius: 8,
+					boxShadow: "0 6px 20px rgba(0, 0, 0, 0.4)",
+					zIndex: 102
+				},
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					style: {
+						display: "flex",
+						alignItems: "center",
+						gap: 6
+					},
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						"data-rail-search": true,
+						"aria-label": "搜索消息",
+						placeholder: "搜索消息内容",
+						value: query,
+						onChange: (e) => onQueryChange(e.target.value),
+						onKeyDown: onSearchKeyDown,
+						autoFocus: true,
+						style: {
+							flex: 1,
+							minWidth: 0,
+							padding: "5px 8px",
+							fontSize: 12,
+							color: "#e6e8ee",
+							background: "rgba(255, 255, 255, 0.08)",
+							border: "1px solid rgba(255, 255, 255, 0.16)",
+							borderRadius: 6,
+							outline: "none"
+						}
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"data-search-clear": true,
+						"aria-label": "清空搜索",
+						onClick: onClear,
+						style: {
+							width: 22,
+							height: 22,
+							flexShrink: 0,
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							background: "transparent",
+							border: "none",
+							padding: 0,
+							cursor: "pointer",
+							color: "#8b96ab"
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+							width: "10",
+							height: "10",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "3",
+							strokeLinecap: "round",
+							"aria-hidden": "true",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })]
+						})
+					})]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					"data-match-count": true,
+					style: {
+						marginTop: 6,
+						fontSize: 11,
+						color: "#8b96ab"
+					},
+					children: [
+						matches,
+						"/",
+						total
+					]
+				})]
+			})] });
+		}
+		//#endregion
+		//#region src/client/useCurrentAnchor.ts
+		/**
+		* useCurrentAnchor: tracks which user-message row sits at/just above the
+		* conversation scrollport's top, so the rail can light the corresponding dot
+		* (F2 current-position highlight).
+		*
+		* Resolves the harness DOM shape (`[data-conversation-scroll]` containing
+		* `[data-chat-anchor-key]` rows), computes each row's offset top within the
+		* scrollport, and feeds them to `rail-logic.currentIndexOf(rows, 0)` — the
+		* viewport top is 0 in scrollport-relative coordinates.
+		*
+		* Recomputes on scrollport `scroll` events; when `IntersectionObserver` exists
+		* (real browsers) rows are also observed (root = scrollport, threshold 0) so
+		* layout changes that move a row across the top without a scroll event still
+		* refresh. In jsdom tests the observer stub is a no-op, so the scroll listener
+		* is the path component tests drive.
+		*
+		* Pure observation: no timers, no polling; geometry is read only on events.
+		*/
+		/**
+		* @param order - the ordered chat node keys; a change re-resolves the DOM
+		*   rows (new messages appended, load-older prepends, ...).
+		* @returns the anchor key of the row at/just above the scrollport top, or
+		*   undefined when the scrollport is missing or has no rows.
+		*/
+		function useCurrentAnchor(order) {
+			const [current, setCurrent] = (0, react.useState)(void 0);
+			(0, react.useEffect)(() => {
+				const scrollport = document.querySelector("[data-conversation-scroll]");
+				if (scrollport === null) {
+					setCurrent(void 0);
+					return;
+				}
+				const rows = [...scrollport.querySelectorAll("[data-chat-anchor-key]")];
+				const compute = () => {
+					const viewportTop = scrollport.getBoundingClientRect().top;
+					const positioned = rows.map((row) => ({
+						key: row.dataset.chatAnchorKey ?? "",
+						top: row.getBoundingClientRect().top - viewportTop
+					}));
+					setCurrent(currentIndexOf(positioned, 0));
+				};
+				compute();
+				scrollport.addEventListener("scroll", compute, { passive: true });
+				if (typeof IntersectionObserver !== "undefined") {
+					const observer = new IntersectionObserver(compute, {
+						root: scrollport,
+						threshold: [0]
+					});
+					for (const row of rows) observer.observe(row);
+					return () => {
+						observer.disconnect();
+						scrollport.removeEventListener("scroll", compute);
+					};
+				}
+				return () => {
+					scrollport.removeEventListener("scroll", compute);
+				};
+			}, [order]);
+			return current;
+		}
+		//#endregion
 		//#region src/client/MilestoneRail.tsx
 		/**
 		* MilestoneRail: the milestone.rail entry (session scope). Renders a fixed
@@ -35,6 +312,22 @@ window.__ModuleLoader__.load({
 		*
 		* 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).
+		*
+		* In-rail search (F1): a magnifier toggle at the rail top opens a compact
+		* panel to the rail's left with a message-text search input; matches light up
+		* the dots (non-matches dim), Enter cycles the active match (wrapping) and
+		* jumps to it, Escape clears and closes. Matching runs over the FULL message
+		* text (`text` from rail-logic.extractText), not the truncated hover preview.
+		*
+		* Current-position highlight (F2): the dot for the user message at/just above
+		* the conversation viewport top carries a white ring (`useCurrentAnchor`
+		* observes the scrollport, no polling).
+		*
+		* Load-older + window coverage (F3): when the session still has earlier pages
+		* (`hasMore`) a slim `···` button sits at the rail top and triggers the
+		* injected `loadOlder` action (disabled + `data-loading-older` while
+		* `loadingOlder`), and a compact hint to the rail's left states how many
+		* messages the current window covers.
 		*/
 		/** Minimum user messages before the rail adds value. */
 		const MIN_MARKS = 2;
@@ -55,19 +348,9 @@ window.__ModuleLoader__.load({
 			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. */
+		/** Extract a plain-text hover preview (first 80 chars) from a ContentBlock[]. */
 		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}%)`;
+			return extractText(content).slice(0, PREVIEW_LENGTH);
 		}
 		/** Relative wall-clock label for a Unix-epoch-ms timestamp. */
 		function formatRelativeTime(time) {
@@ -104,10 +387,12 @@ window.__ModuleLoader__.load({
 		/**
 		* @param props - session standard kit (useSession, sessionId, useProjection).
 		*/
-		function MilestoneRail({ useSession }) {
+		function MilestoneRail({ useSession, loadOlder }) {
 			const order = useSession((s) => s.chat.order);
 			const nodes = useSession((s) => s.chat.nodes);
 			const timeline = useSession((s) => s.chat.timeline);
+			const hasMore = useSession((s) => s.hasMore);
+			const loadingOlder = useSession((s) => s.loadingOlder);
 			const marks = (0, react.useMemo)(() => {
 				const result = [];
 				for (const key of order) {
@@ -120,6 +405,7 @@ window.__ModuleLoader__.load({
 						turn,
 						seq: data.seq ?? 0,
 						time: data.time ?? 0,
+						text: extractText(data.content),
 						preview: extractPreview(data.content)
 					});
 				}
@@ -127,6 +413,15 @@ window.__ModuleLoader__.load({
 			}, [order, nodes]);
 			const [railBox, setRailBox] = (0, react.useState)(null);
 			const [hover, setHover] = (0, react.useState)(null);
+			const [search, setSearch] = (0, react.useState)({
+				query: "",
+				activePos: 0,
+				panelOpen: false
+			});
+			const currentKey = useCurrentAnchor(order);
+			const { matches } = (0, react.useMemo)(() => filterMarks(marks, search.query), [marks, search.query]);
+			const hasQuery = search.query.trim() !== "";
+			const activeMarkIndex = hasQuery && matches.length > 0 ? matches[Math.min(search.activePos, matches.length - 1)] : -1;
 			(0, react.useLayoutEffect)(() => {
 				if (marks.length < MIN_MARKS) {
 					setRailBox(null);
@@ -158,6 +453,41 @@ window.__ModuleLoader__.load({
 					block: "start"
 				});
 			};
+			const updateQuery = (query) => {
+				setSearch({
+					query,
+					activePos: 0,
+					panelOpen: true
+				});
+			};
+			const clearSearch = () => {
+				setSearch((s) => ({
+					...s,
+					query: "",
+					activePos: 0
+				}));
+			};
+			const closeSearch = () => {
+				setSearch({
+					query: "",
+					activePos: 0,
+					panelOpen: false
+				});
+			};
+			/** Enter: cycle to the next match (wrapping) and jump to that dot's row. */
+			const advanceMatch = () => {
+				if (matches.length === 0) return;
+				const next = nextMatchIndex(search.activePos, matches.length, 1);
+				setSearch((s) => ({
+					...s,
+					activePos: next
+				}));
+				jump(marks[matches[next]].key);
+			};
+			const onSearchKeyDown = (e) => {
+				if (e.key === "Enter") advanceMatch();
+				if (e.key === "Escape") closeSearch();
+			};
 			const buildHover = (mark, index) => {
 				const turn = mark.turn !== void 0 ? timeline.turns.get(mark.turn) : void 0;
 				let durationLabel = null;
@@ -187,6 +517,7 @@ window.__ModuleLoader__.load({
 					tpsLabel
 				};
 			};
+			const showLoadOlder = hasMore && marks.length >= MIN_MARKS;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				style: {
 					position: "fixed",
@@ -195,22 +526,22 @@ window.__ModuleLoader__.load({
 					height: railBox.height,
 					width: DOT_HIT,
 					pointerEvents: "auto",
-					zIndex: 100
+					zIndex: 100,
+					display: "flex",
+					flexDirection: "column"
 				},
 				"aria-label": "会话里程碑",
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					style: {
-						height: "100%",
-						overflowY: "auto",
-						display: "flex",
-						flexDirection: "column",
-						alignItems: "center",
-						gap: DOT_GAP,
-						padding: "6px 0",
-						scrollbarWidth: "none"
-					},
-					children: marks.map((mark, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				children: [
+					showLoadOlder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
+						"data-load-older": true,
+						"data-loading-older": loadingOlder ? "true" : void 0,
+						title: "加载更早消息",
+						"aria-label": "加载更早消息",
+						disabled: loadingOlder,
+						onClick: () => {
+							loadOlder();
+						},
 						style: {
 							width: DOT_HIT,
 							height: DOT_HIT,
@@ -221,91 +552,195 @@ window.__ModuleLoader__.load({
 							background: "transparent",
 							border: "none",
 							padding: 0,
-							cursor: "pointer"
+							cursor: loadingOlder ? "default" : "pointer",
+							color: loadingOlder ? "#5a6375" : "#8b96ab",
+							fontSize: 11,
+							lineHeight: 1,
+							letterSpacing: 1
 						},
-						onMouseEnter: (e) => {
-							const rect = e.currentTarget.getBoundingClientRect();
-							setHover({
-								...buildHover(mark, i),
-								top: rect.top + rect.height / 2
-							});
+						children: "···"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RailSearchUi, {
+						panelTop: railBox.top,
+						panelRight: railBox.right + DOT_HIT + 8,
+						query: search.query,
+						panelOpen: search.panelOpen,
+						matches: matches.length,
+						total: marks.length,
+						onToggle: () => setSearch((s) => ({
+							...s,
+							panelOpen: !s.panelOpen
+						})),
+						onQueryChange: updateQuery,
+						onSearchKeyDown,
+						onClear: clearSearch
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: {
+							flex: 1,
+							minHeight: 0,
+							overflowY: "auto",
+							display: "flex",
+							flexDirection: "column",
+							alignItems: "center",
+							gap: DOT_GAP,
+							padding: "6px 0",
+							scrollbarWidth: "none"
 						},
-						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 + DOT_HIT + 8,
-						top: hover.top,
-						transform: "translateY(-50%)",
-						maxWidth: 300,
-						minWidth: 180,
-						padding: "8px 12px",
-						background: "rgba(20, 24, 32, 0.96)",
-						color: "#e6e8ee",
-						borderRadius: 8,
-						fontSize: 12,
-						lineHeight: 1.6,
-						whiteSpace: "pre-wrap",
-						wordBreak: "break-word",
-						boxShadow: "0 6px 20px rgba(0, 0, 0, 0.4)",
-						zIndex: 101,
-						pointerEvents: "none"
-					},
-					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 })
-							]
+						children: marks.map((mark, i) => {
+							const dotState = markState({
+								key: mark.key,
+								hasQuery,
+								isMatch: matches.includes(i),
+								isActive: i === activeMarkIndex,
+								isCurrent: !hasQuery && mark.key === currentKey
+							});
+							const isHovered = hover?.mark.key === mark.key;
+							const boxShadow = isHovered ? "0 0 0 3px rgba(77, 124, 254, 0.35)" : dotState === "active" ? "0 0 0 3px rgba(255, 255, 255, 0.9)" : dotState === "current" ? "0 0 0 3px rgba(255, 255, 255, 0.75)" : "none";
+							return /* @__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} 条消息`,
+								"aria-current": dotState === "active" ? "true" : void 0,
+								"data-current": dotState === "current" ? "true" : void 0,
+								"data-dimmed": dotState === "dimmed" ? "true" : void 0,
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
+									width: DOT_SIZE,
+									height: DOT_SIZE,
+									borderRadius: "50%",
+									background: dotColor(i, marks.length),
+									boxShadow,
+									transition: "transform 120ms ease, opacity 120ms ease",
+									transform: `scale(${isHovered ? 1.35 : dotState === "active" || dotState === "current" ? 1.25 : 1})`,
+									opacity: isHovered || dotState !== "dimmed" ? 1 : .22
+								} })
+							}, mark.key);
 						})
-					]
-				})]
+					}),
+					hover !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							position: "fixed",
+							right: railBox.right + DOT_HIT + 8,
+							top: hover.top,
+							transform: "translateY(-50%)",
+							maxWidth: 300,
+							minWidth: 180,
+							padding: "8px 12px",
+							background: "rgba(20, 24, 32, 0.96)",
+							color: "#e6e8ee",
+							borderRadius: 8,
+							fontSize: 12,
+							lineHeight: 1.6,
+							whiteSpace: "pre-wrap",
+							wordBreak: "break-word",
+							boxShadow: "0 6px 20px rgba(0, 0, 0, 0.4)",
+							zIndex: 101,
+							pointerEvents: "none"
+						},
+						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 })
+								]
+							})
+						]
+					}),
+					showLoadOlder && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						"data-window-hint": true,
+						style: {
+							position: "absolute",
+							bottom: 6,
+							right: "100%",
+							marginRight: 8,
+							whiteSpace: "nowrap",
+							fontSize: 10,
+							lineHeight: 1,
+							color: "rgba(139, 150, 171, 0.9)",
+							pointerEvents: "none",
+							userSelect: "none"
+						},
+						children: [
+							"已显示 ",
+							marks.length,
+							" 条 · 还有更早"
+						]
+					})
+				]
 			});
 		}
 		//#endregion
+		//#region src/client/railInject.ts
+		/**
+		* Wrap a session-bound `loadOlder` call into a safe action closure.
+		*
+		* - Missing binding: resolves (never throws on an unlisted/unscoped session).
+		* - Bound session: delegates to `session.loadOlder()`; a rejection propagates
+		*   unchanged so callers can surface the transport error.
+		*
+		* @param sessions - the injected sessions service (`ctx.sessions`).
+		* @param sessionId - the session the rail is scoped to.
+		* @returns an action that loads the previous message page for that session.
+		*/
+		function createLoadOlder(sessions, sessionId) {
+			return async () => {
+				const binding = sessions.binding(sessionId);
+				if (binding === void 0) return;
+				await binding.session.loadOlder();
+			};
+		}
+		//#endregion
 		//#region src/client/index.ts
 		/** Required services (cordis fiber inject). */
 		const inject = ["slots"];
@@ -326,7 +761,10 @@ window.__ModuleLoader__.load({
 					scope: "session"
 				} }
 			}, MilestoneOverlay));
-			ctx.slots.inject("milestone.rail", () => ctx.slots.register({ name: "milestone.rail" }, MilestoneRail));
+			ctx.slots.inject("milestone.rail", () => ctx.slots.register({
+				name: "milestone.rail",
+				inject: (sessionId) => ({ loadOlder: createLoadOlder(ctx.sessions, sessionId) })
+			}, MilestoneRail));
 		}
 		//#endregion
 		exports.apply = apply;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "dsh-milestone",
-  "version": "0.2.1",
-  "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.",
+  "version": "0.3.0",
+  "description": "Git-style milestone timeline for DeepSeek Harness: hover for metadata, click to jump to any message. 会话里程碑导航条：圆点时间线，定位并跳转到每条提问。",
   "type": "module",
   "main": "lib/index.js",
   "exports": {
@@ -26,6 +26,9 @@
     "build": "tsdown",
     "watch": "tsdown --watch",
     "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:surface": "playwright test",
     "prepublishOnly": "pnpm run build"
   },
   "license": "MIT",
@@ -53,9 +56,16 @@
     "@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",
+    "@playwright/test": "^1.62.1",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.4",
+    "@types/node": "^26.2.0",
     "@types/react": "~18.3.1",
+    "jsdom": "^30.0.1",
     "react": "^18.2.0",
     "tsdown": "0.22.2",
-    "typescript": "^6.0.3"
+    "typescript": "^6.0.3",
+    "vitest": "^4.1.10"
   }
 }