dsh-milestone 0.3.1 → 0.5.0

package/lib/client.js

@@ -6,6 +6,7 @@ window.__ModuleLoader__.load({
 		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 		let react_jsx_runtime = require("react/jsx-runtime");
 		let react = require("react");
+		let _deepseek_ai_dsh_client_runtime_client = require("@deepseek-ai/dsh-client-runtime/client");
 		//#region src/client/MilestoneOverlay.tsx
 		/**
 		* @param props - runtime share (root kit) + the narrowed renderSlot and the
@@ -18,6 +19,281 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/badge-logic.ts
+		/**
+		* Derive the badge for one mark.
+		*
+		* Precedence: error > max-tokens > retry > running > awaiting. Node-derived
+		* badges ('turn-error' -> error, 'turn-max-tokens' -> max-tokens,
+		* 'model-retry' -> retry) fire regardless of `lastMark`; the transient badges
+		* (running, awaiting) only apply to the newest mark. Callers must already
+		* exclude cancelled retries — a bare 'model-retry' kind is treated as retry.
+		*
+		* @param input - the mark's snapshot signals.
+		* @returns the winning badge kind, or null when no signal applies.
+		*/
+		function deriveBadge(input) {
+			if (input.nodeKinds.includes("turn-error")) return "error";
+			if (input.nodeKinds.includes("turn-max-tokens")) return "max-tokens";
+			if (input.nodeKinds.includes("model-retry")) return "retry";
+			if (input.lastMark) {
+				if (input.running) return "running";
+				if (input.awaitingInput) return "awaiting";
+			}
+			return null;
+		}
+		/** Ring colors and pulse flag per badge kind; running/awaiting pulse. */
+		const RING_STYLES = {
+			error: {
+				color: "#ef4444",
+				pulse: false
+			},
+			"max-tokens": {
+				color: "#f59e0b",
+				pulse: false
+			},
+			retry: {
+				color: "#f97316",
+				pulse: false
+			},
+			running: {
+				color: "#4d7cfe",
+				pulse: true
+			},
+			awaiting: {
+				color: "#f59e0b",
+				pulse: true
+			}
+		};
+		/**
+		* Style tokens for a badge kind.
+		* @param badge - the derived badge kind.
+		* @returns the ring color and whether the dot should pulse.
+		*/
+		function badgeRingStyle(badge) {
+			return RING_STYLES[badge];
+		}
+		//#endregion
+		//#region src/client/bookmark-logic.ts
+		/**
+		* Pure bookmark logic for the milestone rail: membership, immutable
+		* append/remove toggling, bookmark filtering of a mark list, and count.
+		*
+		* All functions are side-effect free (no React, no DOM) so the rail component
+		* can consume them directly and tests can exercise them in isolation. The
+		* persisted store engine lives in bookmarkStore.ts; this module only shapes
+		* values.
+		*/
+		/**
+		* Whether a key is currently bookmarked.
+		* @param keys - the bookmark key list (in toggle order).
+		* @param key - the key to look up.
+		* @returns true when the key is present.
+		*/
+		function isBookmarked(keys, key) {
+			return keys.includes(key);
+		}
+		/**
+		* Immutable toggle: append the key when it is not bookmarked, remove it when
+		* it is. Never mutates the input; returns a fresh list (order preserved).
+		* @param keys - the bookmark key list (in toggle order).
+		* @param key - the key to flip.
+		* @returns a new list with the key toggled.
+		*/
+		function toggleKey(keys, key) {
+			return isBookmarked(keys, key) ? keys.filter((k) => k !== key) : [...keys, key];
+		}
+		/**
+		* Filter a mark list down to the bookmarked marks.
+		* @param marks - marks in rail order (only `key` is consulted).
+		* @param bookmarked - the bookmark key list.
+		* @returns `visible` (ascending indices of marks whose key is bookmarked;
+		* empty whenever there are no bookmarks) and `isFiltered` (true exactly when
+		* any bookmark exists — callers treat it as "filter active").
+		*/
+		function filterByBookmarks(marks, bookmarked) {
+			if (bookmarked.length === 0) return {
+				visible: [],
+				isFiltered: false
+			};
+			const set = new Set(bookmarked);
+			return {
+				visible: marks.reduce((acc, mark, i) => {
+					if (set.has(mark.key)) acc.push(i);
+					return acc;
+				}, []),
+				isFiltered: true
+			};
+		}
+		//#endregion
+		//#region src/client/clipboard-logic.ts
+		/**
+		* Clipboard helper for the milestone rail: copies text to the system
+		* clipboard via the async Clipboard API. Resolves false (never throws) when
+		* the API is unavailable or the write is rejected, so callers can treat the
+		* result as a plain boolean.
+		*/
+		/**
+		* Copy text to the system clipboard.
+		* @param text - the text to copy.
+		* @returns a promise resolving to true when the clipboard write succeeded,
+		* false when the Clipboard API is unavailable or the write was rejected.
+		*/
+		async function copyText(text) {
+			if (typeof navigator === "undefined" || navigator.clipboard?.writeText === void 0) return false;
+			try {
+				await navigator.clipboard.writeText(text);
+				return true;
+			} catch {
+				return false;
+			}
+		}
+		//#endregion
+		//#region src/client/label-logic.ts
+		const MINUTE_MS = 6e4;
+		const HOUR_MS = 36e5;
+		const DAY_MS = 864e5;
+		/**
+		* Bucket an elapsed duration into a relative-time label.
+		*
+		* Buckets on `now - time` in milliseconds: below 60s -> justNow (n=0), below
+		* 3600s -> minutes, below 86400s -> hours, otherwise days. `n` is the whole
+		* count of the bucket unit (floor). Deterministic for a given `now`.
+		*
+		* @param time - the event timestamp in ms since epoch.
+		* @param now - the reference clock in ms since epoch.
+		* @returns the label key and bucket count.
+		*/
+		function relativeTimeParts(time, now) {
+			const diff = now - time;
+			if (diff < MINUTE_MS) return {
+				key: "time.justNow",
+				n: 0
+			};
+			if (diff < HOUR_MS) return {
+				key: "time.minutes",
+				n: Math.floor(diff / MINUTE_MS)
+			};
+			if (diff < DAY_MS) return {
+				key: "time.hours",
+				n: Math.floor(diff / HOUR_MS)
+			};
+			return {
+				key: "time.days",
+				n: Math.floor(diff / DAY_MS)
+			};
+		}
+		/**
+		* Map a harness end-reason string to a stable i18n key.
+		* @param kind - the raw end-reason string (e.g. 'max-tokens').
+		* @returns the i18n key, or the raw kind unchanged when unknown.
+		*/
+		function reasonKeyOf(kind) {
+			switch (kind) {
+				case "completed": return "reason.completed";
+				case "aborted": return "reason.aborted";
+				case "error": return "reason.error";
+				case "max-tokens": return "reason.maxTokens";
+				case "interrupted": return "reason.interrupted";
+				case "blocked": return "reason.blocked";
+				default: return kind;
+			}
+		}
+		//#endregion
+		//#region src/client/tooltip-logic.ts
+		const EMPTY_META = {
+			model: null,
+			purpose: null,
+			inputTokens: null,
+			outputTokens: null
+		};
+		/** True when the value is a plain (non-array, non-null) object. */
+		function isRecord(value) {
+			return value !== null && typeof value === "object" && !Array.isArray(value);
+		}
+		/**
+		* Decode a `usage` payload structurally: only numeric `inputTokens` /
+		* `outputTokens` survive; anything else (absent, malformed, wrong types)
+		* degrades to null — the boundary owns trust, the callers get plain numbers.
+		* @param usage - untrusted usage payload (typed `unknown` at runtime).
+		* @returns the token counts with null for every missing/malformed field.
+		*/
+		function decodeUsage(usage) {
+			if (!isRecord(usage)) return {
+				inputTokens: null,
+				outputTokens: null
+			};
+			return {
+				inputTokens: typeof usage.inputTokens === "number" ? usage.inputTokens : null,
+				outputTokens: typeof usage.outputTokens === "number" ? usage.outputTokens : null
+			};
+		}
+		/** Resolve model/purpose from a request config, falling back to provenance. */
+		function metaFromRecord(record) {
+			return {
+				model: record.requestConfig?.model ?? record.provenance?.model ?? null,
+				purpose: record.requestConfig?.purpose ?? null,
+				...decodeUsage(record.usage)
+			};
+		}
+		/**
+		* Derive the hover metadata for one turn. Sources, in priority order:
+		* 1. the `assistant-step` chat node(s) of the turn — their `data.finalNode`
+		*    carries the recorded `requestConfig` / `provenance` / `usage`;
+		* 2. `trajectoryRequests` — the latest entry whose `turn` matches (used when
+		*    no assistant-step node yields a model or purpose);
+		* 3. all-null when the turn is absent, no node matches, or everything is
+		*    malformed. Never throws.
+		* @param nodes - stable per-key chat node reader (as exposed by the snapshot).
+		* @param locations - turn -> ordered node keys index.
+		* @param turn - owning turn; undefined yields all-null.
+		* @param trajectoryRequests - optional fallback request log.
+		* @returns the turn's metadata, null where unknown.
+		*/
+		function deriveTurnMeta(nodes, locations, turn, trajectoryRequests) {
+			if (turn === void 0) return EMPTY_META;
+			for (const key of locations.getTurn(turn)) {
+				const node = nodes.get(key);
+				if (node === void 0 || node.kind !== "assistant-step") continue;
+				const finalNode = (isRecord(node.data) ? node.data : void 0)?.finalNode;
+				if (!isRecord(finalNode)) continue;
+				const meta = metaFromRecord(finalNode);
+				if (meta.model !== null || meta.purpose !== null) return meta;
+			}
+			if (trajectoryRequests !== void 0) {
+				let latest;
+				for (const request of trajectoryRequests) if (request.turn === turn) latest = request;
+				if (latest !== void 0) return metaFromRecord(latest);
+			}
+			return EMPTY_META;
+		}
+		//#endregion
+		//#region src/client/rail-keyboard.ts
+		/**
+		* Pure roving-tabindex index math for the milestone rail.
+		*
+		* The dots list becomes a single roving-tabindex widget (ArrowUp/Down moves
+		* focus, Home/End jumps to first/last). This module only owns the pure index
+		* arithmetic; the widget wiring lives in the component.
+		*/
+		/**
+		* Move `current` by `delta` (1 = forward, -1 = backward), wrapping around
+		* `[0, count - 1]`. Returns `-1` when there are no focusable dots.
+		*/
+		function nextFocusIndex(current, count, delta) {
+			if (count <= 0) return -1;
+			return (current + delta + count) % count;
+		}
+		/**
+		* Clamp `current` into `[0, count - 1]` — e.g. when the visible dot list
+		* shrinks and the focused index no longer exists. Returns `-1` when there
+		* are no focusable dots.
+		*/
+		function clampIndex(current, count) {
+			if (count <= 0) return -1;
+			return Math.min(Math.max(current, 0), count - 1);
+		}
+		//#endregion
 		//#region src/client/rail-logic.ts
 		/**
 		* Extract the FULL plain text of a ContentBlock[] payload: the `text` of every
@@ -108,17 +384,83 @@ window.__ModuleLoader__.load({
 			return `hsl(218, 88%, ${72 - (total <= 1 ? 0 : index / (total - 1)) * 27}%)`;
 		}
 		//#endregion
+		//#region src/client/turn-group-logic.ts
+		/**
+		* Partition consecutive marks by turn. Marks with the same numeric turn that
+		* appear one after another share a group; each mark with `turn === undefined`
+		* becomes its own singleton group with `turn: null`.
+		* @param marks - marks in rail order.
+		* @returns the groups, in original order, partitioning `marks` exactly.
+		*/
+		function buildTurnGroups(marks) {
+			const groups = [];
+			let current;
+			for (const mark of marks) {
+				if (mark.turn === void 0) {
+					current = void 0;
+					groups.push({
+						turn: null,
+						marks: [mark]
+					});
+					continue;
+				}
+				if (current !== void 0 && current.turn === mark.turn) current.marks.push(mark);
+				else {
+					current = {
+						turn: mark.turn,
+						marks: [mark]
+					};
+					groups.push(current);
+				}
+			}
+			return groups;
+		}
+		/**
+		* Flatten groups into render items, collapsing collapsed turns to their last
+		* mark and reporting where separators belong.
+		* @param groups - groups from {@link buildTurnGroups} (they partition the
+		* original marks array in order, so a running count yields original indices).
+		* @param collapsed - turns whose group should collapse to its LAST mark.
+		* @returns `items` (one RenderItem per visible dot, in group order) and
+		* `separatorsAt` (the index in `items` before which a separator should be
+		* inserted at each non-first group boundary; never includes 0).
+		*/
+		function buildRenderList(groups, collapsed) {
+			const items = [];
+			const separatorsAt = [];
+			let counter = 0;
+			for (const group of groups) {
+				const startIndex = items.length;
+				if (group.turn !== null && collapsed.has(group.turn) && group.marks.length > 1) {
+					const last = group.marks[group.marks.length - 1];
+					items.push({
+						mark: last,
+						displayIndex: counter + group.marks.length - 1
+					});
+				} else for (let i = 0; i < group.marks.length; i++) items.push({
+					mark: group.marks[i],
+					displayIndex: counter + i
+				});
+				counter += group.marks.length;
+				if (startIndex > 0) separatorsAt.push(startIndex);
+			}
+			return {
+				items,
+				separatorsAt
+			};
+		}
+		//#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 }) {
+		function RailSearchUi({ panelTop, panelRight, query, panelOpen, matches, total, onToggle, onQueryChange, onSearchKeyDown, onClear, t }) {
 			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-label": t("search.label"),
 				"aria-pressed": panelOpen,
 				onClick: onToggle,
 				style: {
@@ -170,8 +512,8 @@ window.__ModuleLoader__.load({
 					},
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 						"data-rail-search": true,
-						"aria-label": "搜索消息",
-						placeholder: "搜索消息内容",
+						"aria-label": t("search.label"),
+						placeholder: t("search.placeholder"),
 						value: query,
 						onChange: (e) => onQueryChange(e.target.value),
 						onKeyDown: onSearchKeyDown,
@@ -190,7 +532,7 @@ window.__ModuleLoader__.load({
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						"data-search-clear": true,
-						"aria-label": "清空搜索",
+						"aria-label": t("search.clear"),
 						onClick: onClear,
 						style: {
 							width: 22,
@@ -233,6 +575,207 @@ window.__ModuleLoader__.load({
 			})] });
 		}
 		//#endregion
+		//#region src/client/MilestoneRailTooltip.tsx
+		/**
+		* @param props - the hovered mark + bookmark wiring (see {@link MilestoneRailTooltipProps}).
+		*/
+		function MilestoneRailTooltip({ hover, bookmarked, onToggleBookmark, onCopy, onFork, copied, forked, turnCollapsed, onToggleCollapse, onMouseEnter, onMouseLeave, panelRight, t }) {
+			const relativeTime = relativeTimeParts(hover.mark.time, Date.now());
+			const turn = hover.mark.turn;
+			const showCollapse = turn !== void 0 && hover.turnMarkCount !== null && hover.turnMarkCount > 1;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				onMouseEnter,
+				onMouseLeave,
+				style: {
+					position: "fixed",
+					right: panelRight,
+					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: "auto"
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							flexWrap: "wrap",
+							gap: 8,
+							color: "#9aa4b8",
+							fontSize: 11,
+							marginBottom: 4
+						},
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("pos.of", {
+								n: hover.index + 1,
+								m: hover.total
+							}) }),
+							hover.turnLabel !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: hover.turnLabel }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"data-star": true,
+								"aria-label": t("bookmark.star"),
+								"aria-pressed": bookmarked,
+								"data-starred": bookmarked ? "true" : void 0,
+								onClick: (e) => {
+									e.stopPropagation();
+									onToggleBookmark();
+								},
+								style: {
+									marginLeft: "auto",
+									width: 22,
+									height: 22,
+									flexShrink: 0,
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									background: "transparent",
+									border: "none",
+									padding: 0,
+									cursor: "pointer",
+									color: bookmarked ? "#ffd166" : "#8b96ab"
+								},
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+									width: "13",
+									height: "13",
+									viewBox: "0 0 24 24",
+									fill: bookmarked ? "currentColor" : "none",
+									stroke: "currentColor",
+									strokeWidth: "2",
+									strokeLinejoin: "round",
+									"aria-hidden": "true",
+									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })
+								})
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"data-copy-message": true,
+								"data-copied": copied ? "true" : void 0,
+								onClick: (e) => {
+									e.stopPropagation();
+									onCopy(hover.mark);
+								},
+								style: {
+									flexShrink: 0,
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									background: "transparent",
+									border: "none",
+									padding: "2px 6px",
+									cursor: "pointer",
+									whiteSpace: "nowrap",
+									color: copied ? "#7ee2a8" : "#8b96ab"
+								},
+								children: t("copy.message")
+							}),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"data-fork-here": true,
+								"data-forked": forked ? "true" : void 0,
+								onClick: (e) => {
+									e.stopPropagation();
+									onFork(hover.mark);
+								},
+								style: {
+									flexShrink: 0,
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									background: "transparent",
+									border: "none",
+									padding: "2px 6px",
+									cursor: "pointer",
+									whiteSpace: "nowrap",
+									color: forked ? "#7ee2a8" : "#8b96ab"
+								},
+								children: t("fork.here")
+							}),
+							showCollapse && turn !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"data-toggle-collapse": true,
+								"aria-pressed": turnCollapsed,
+								"data-collapsed": turnCollapsed ? "true" : void 0,
+								onClick: (e) => {
+									e.stopPropagation();
+									onToggleCollapse(turn);
+								},
+								style: {
+									flexShrink: 0,
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									background: "transparent",
+									border: "none",
+									padding: "2px 6px",
+									cursor: "pointer",
+									whiteSpace: "nowrap",
+									color: turnCollapsed ? "#7ee2a8" : "#8b96ab"
+								},
+								children: turnCollapsed ? t("expand.turn") : t("collapse.turn")
+							})
+						]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: { color: "#c7cede" },
+						children: hover.mark.preview !== "" ? hover.mark.preview : t("no.text")
+					}),
+					/* @__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: t(relativeTime.key, { n: relativeTime.n }) }),
+							hover.durationLabel !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("duration.label", { name: hover.durationLabel }) }),
+							hover.reasonLabel !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: hover.reasonLabel }),
+							hover.ttftLabel !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("ttft.label", { name: hover.ttftLabel }) }),
+							hover.tpsLabel !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: hover.tpsLabel })
+						]
+					}),
+					(hover.modelLabel !== null || hover.purposeLabel !== null || hover.tokensLabel !== null) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							flexWrap: "wrap",
+							gap: 8,
+							color: "#8b96ab",
+							fontSize: 11,
+							marginTop: 4
+						},
+						children: [
+							hover.modelLabel !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								"data-model": hover.modelLabel,
+								children: hover.modelLabel
+							}),
+							hover.purposeLabel !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								"data-purpose": hover.purposeLabel,
+								children: hover.purposeLabel
+							}),
+							hover.tokensLabel !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								"data-tokens": hover.tokensLabel,
+								children: hover.tokensLabel
+							})
+						]
+					})
+				]
+			});
+		}
+		//#endregion
 		//#region src/client/useCurrentAnchor.ts
 		/**
 		* useCurrentAnchor: tracks which user-message row sits at/just above the
@@ -332,6 +875,21 @@ window.__ModuleLoader__.load({
 		/** Minimum user messages before the rail adds value. */
 		const MIN_MARKS = 2;
 		const PREVIEW_LENGTH = 80;
+		/** Stable no-bookmarks fallback for render paths without the store seat. */
+		const NO_BOOKMARKS = [];
+		/** Stable no-kinds fallback for marks whose turn carries no badge nodes. */
+		const NO_KINDS = [];
+		/**
+		* Self-contained pulse keyframes for the transient badges (running/awaiting):
+		* an expanding currentColor ring on box-shadow plus an opacity beat, driven by
+		* `animation` on the badge ring span (kept in an inline <style> so the plugin
+		* stays zero-asset).
+		*/
+		const BADGE_PULSE_CSS = `@keyframes milestone-badge-pulse {
+  0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.85 }
+  70% { box-shadow: 0 0 0 5px transparent; opacity: 0.35 }
+  100% { box-shadow: 0 0 0 0 transparent; opacity: 0.85 }
+}`;
 		/** Visual dot diameter (px). */
 		const DOT_SIZE = 12;
 		/** Hit area per dot (px) — larger than the dot for comfortable clicking. */
@@ -352,32 +910,12 @@ window.__ModuleLoader__.load({
 		function extractPreview(content) {
 			return extractText(content).slice(0, PREVIEW_LENGTH);
 		}
-		/** 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;
@@ -385,14 +923,22 @@ window.__ModuleLoader__.load({
 			return data.get("turn-tail");
 		}
 		/**
-		* @param props - session standard kit (useSession, sessionId, useProjection).
+		* @param props - session standard kit (useSession, sessionId, useProjection),
+		* the injected loadOlder/forkAt actions, the bookmarks store pair (useStore +
+		* actions, injected by the framework from the declared store seat), and the
+		* framework-synthesized `t` locale interpreter (registered via the entry's
+		* `locale: 'dsh-milestone'`; defaults to a key-pass fallback for renders
+		* outside the slot machinery).
 		*/
-		function MilestoneRail({ useSession, loadOlder }) {
+		function MilestoneRail({ useSession, loadOlder, forkAt, useStore, actions, t = (key) => key }) {
 			const order = useSession((s) => s.chat.order);
 			const nodes = useSession((s) => s.chat.nodes);
+			const locations = useSession((s) => s.chat.locations);
 			const timeline = useSession((s) => s.chat.timeline);
+			const trajectoryRequests = useSession((s) => s.views.get("trajectory")?.requests);
 			const hasMore = useSession((s) => s.hasMore);
 			const loadingOlder = useSession((s) => s.loadingOlder);
+			const bookmarkedKeys = useStore?.((s) => s.keys) ?? NO_BOOKMARKS;
 			const marks = (0, react.useMemo)(() => {
 				const result = [];
 				for (const key of order) {
@@ -411,6 +957,22 @@ window.__ModuleLoader__.load({
 				}
 				return result;
 			}, [order, nodes]);
+			const kindsByTurn = (0, react.useMemo)(() => {
+				const result = /* @__PURE__ */ new Map();
+				for (const node of nodes.values()) {
+					if (node.kind !== "turn-error" && node.kind !== "turn-max-tokens" && node.kind !== "model-retry") continue;
+					if (node.kind === "model-retry") {
+						if (node.data?.retryState === "cancelled") continue;
+					}
+					if (node.location.kind !== "turn" && node.location.kind !== "step") continue;
+					const kinds = result.get(node.location.turn.turn) ?? [];
+					kinds.push(node.kind);
+					result.set(node.location.turn.turn, kinds);
+				}
+				return result;
+			}, [order, nodes]);
+			const running = useSession((s) => s.running);
+			const awaitingInput = useSession((s) => s.pending).length > 0;
 			const [railBox, setRailBox] = (0, react.useState)(null);
 			const [hover, setHover] = (0, react.useState)(null);
 			const [search, setSearch] = (0, react.useState)({
@@ -418,10 +980,40 @@ window.__ModuleLoader__.load({
 				activePos: 0,
 				panelOpen: false
 			});
+			const [bookmarksOnly, setBookmarksOnly] = (0, react.useState)(false);
+			const [copiedKey, setCopiedKey] = (0, react.useState)(null);
+			const [forkedKey, setForkedKey] = (0, react.useState)(null);
+			const [collapsedTurns, setCollapsedTurns] = (0, react.useState)(/* @__PURE__ */ new Set());
+			const [focusIndex, setFocusIndex] = (0, react.useState)(0);
+			const listRef = (0, react.useRef)(null);
 			const currentKey = useCurrentAnchor(order);
-			const { matches } = (0, react.useMemo)(() => filterMarks(marks, search.query), [marks, search.query]);
+			const displayMarks = (0, react.useMemo)(() => {
+				if (!bookmarksOnly) return marks;
+				return filterByBookmarks(marks, bookmarkedKeys).visible.map((i) => marks[i]);
+			}, [
+				bookmarksOnly,
+				marks,
+				bookmarkedKeys
+			]);
+			const { matches } = (0, react.useMemo)(() => filterMarks(displayMarks, search.query), [displayMarks, search.query]);
 			const hasQuery = search.query.trim() !== "";
 			const activeMarkIndex = hasQuery && matches.length > 0 ? matches[Math.min(search.activePos, matches.length - 1)] : -1;
+			const groups = (0, react.useMemo)(() => buildTurnGroups(displayMarks), [displayMarks]);
+			const render = (0, react.useMemo)(() => buildRenderList(groups, collapsedTurns), [groups, collapsedTurns]);
+			const separatorIndices = (0, react.useMemo)(() => new Set(render.separatorsAt), [render]);
+			const collapsedSummaries = (0, react.useMemo)(() => {
+				const summaries = /* @__PURE__ */ new Map();
+				for (const group of groups) if (group.turn !== null && group.marks.length > 1 && collapsedTurns.has(group.turn)) summaries.set(group.marks[group.marks.length - 1].key, group.marks.length);
+				return summaries;
+			}, [groups, collapsedTurns]);
+			const turnMarkCounts = (0, react.useMemo)(() => {
+				const counts = /* @__PURE__ */ new Map();
+				for (const mark of displayMarks) {
+					if (mark.turn === void 0) continue;
+					counts.set(mark.turn, (counts.get(mark.turn) ?? 0) + 1);
+				}
+				return counts;
+			}, [displayMarks]);
 			(0, react.useLayoutEffect)(() => {
 				if (marks.length < MIN_MARKS) {
 					setRailBox(null);
@@ -446,6 +1038,9 @@ window.__ModuleLoader__.load({
 					window.removeEventListener("resize", compute);
 				};
 			}, [marks.length]);
+			(0, react.useLayoutEffect)(() => {
+				setFocusIndex((f) => clampIndex(f, render.items.length));
+			}, [render.items.length]);
 			if (railBox === null || marks.length < MIN_MARKS) return null;
 			const jump = (key) => {
 				findRow(key)?.scrollIntoView({
@@ -482,13 +1077,54 @@ window.__ModuleLoader__.load({
 					...s,
 					activePos: next
 				}));
-				jump(marks[matches[next]].key);
+				jump(displayMarks[matches[next]].key);
 			};
 			const onSearchKeyDown = (e) => {
 				if (e.key === "Enter") advanceMatch();
 				if (e.key === "Escape") closeSearch();
 			};
+			/** Focus the dot at `index` (no-op while the list is unmounted). */
+			const focusDotAt = (index) => {
+				listRef.current?.querySelectorAll("[data-rail-dot]")[index]?.focus();
+			};
+			/** Tab lands on the list itself: hand focus to the dot owning the tab stop. */
+			const onListFocus = (e) => {
+				if (e.target !== e.currentTarget) return;
+				focusDotAt(clampIndex(focusIndex, render.items.length));
+			};
+			/**
+			* Roving-tabindex keys: ArrowDown/ArrowUp move focus (wrapping), Home/End
+			* jump to first/last. Enter/Space are deliberately NOT handled — the dots
+			* are real buttons, so native activation fires the jump click untouched
+			* (preventDefault here would swallow it). The rover counts RENDERED dots
+			* (collapsed turns shrink the list).
+			*/
+			const onListKeyDown = (e) => {
+				const count = render.items.length;
+				let next = null;
+				switch (e.key) {
+					case "ArrowDown":
+						next = nextFocusIndex(focusIndex, count, 1);
+						break;
+					case "ArrowUp":
+						next = nextFocusIndex(focusIndex, count, -1);
+						break;
+					case "Home":
+						next = 0;
+						break;
+					case "End":
+						next = count - 1;
+						break;
+					default: return;
+				}
+				e.preventDefault();
+				const target = clampIndex(next, count);
+				setFocusIndex(target);
+				focusDotAt(target);
+			};
 			const buildHover = (mark, index) => {
+				if (copiedKey !== null && mark.key !== copiedKey) setCopiedKey(null);
+				if (forkedKey !== null && mark.key !== forkedKey) setForkedKey(null);
 				const turn = mark.turn !== void 0 ? timeline.turns.get(mark.turn) : void 0;
 				let durationLabel = null;
 				let reasonLabel = null;
@@ -498,7 +1134,7 @@ window.__ModuleLoader__.load({
 					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);
+						if (reason?.kind !== void 0) reasonLabel = t(reasonKeyOf(reason.kind));
 					}
 					const tail = turnTailOf(turn);
 					if (tail !== void 0) {
@@ -506,17 +1142,61 @@ window.__ModuleLoader__.load({
 						if (tail.tokensPerSecond !== void 0) tpsLabel = `${tail.tokensPerSecond.toFixed(1)} tok/s`;
 					}
 				}
+				const meta = deriveTurnMeta(nodes, locations, mark.turn, trajectoryRequests);
 				return {
 					mark,
 					index,
-					total: marks.length,
-					turnLabel: mark.turn !== void 0 ? `第 ${mark.turn} 轮` : null,
+					total: displayMarks.length,
+					turnLabel: mark.turn !== void 0 ? t("turn.label", { n: mark.turn }) : null,
 					durationLabel,
 					reasonLabel,
 					ttftLabel,
-					tpsLabel
+					tpsLabel,
+					modelLabel: meta.model,
+					purposeLabel: meta.purpose,
+					tokensLabel: meta.inputTokens !== null && meta.outputTokens !== null ? `${meta.inputTokens} / ${meta.outputTokens} tok` : null,
+					turnMarkCount: mark.turn !== void 0 ? turnMarkCounts.get(mark.turn) ?? 0 : null
 				};
 			};
+			/**
+			* C4: collapse/expand the hovered mark's turn in the rail. The set is
+			* replaced immutably (a turn toggles out when already present); collapsing
+			* keeps the turn's LAST mark visible via buildRenderList.
+			*/
+			const onToggleCollapse = (turn) => {
+				setCollapsedTurns((prev) => {
+					const next = new Set(prev);
+					if (next.has(turn)) next.delete(turn);
+					else next.add(turn);
+					return next;
+				});
+			};
+			/**
+			* T10: flip a mark's bookmark in the persisted store. The store action is
+			* the write path (the engine persists synchronously). The hover re-assert
+			* forces a re-render so the star reflects the toggled state — production
+			* re-renders through the framework's uSES-bound useStore; the component
+			* test harness injects an unsubscribed selector, so this local re-render is
+			* what syncs the DOM there. Both paths converge on the same fresh snapshot.
+			*/
+			const onToggleBookmark = (key) => {
+				actions?.toggle(key);
+				setHover((h) => h === null ? h : { ...h });
+			};
+			/**
+			* C3: copy the hovered mark's FULL message text to the system clipboard.
+			* The acknowledgement only shows when the write actually succeeded.
+			*/
+			const onCopy = async (mark) => {
+				if (await copyText(mark.text)) setCopiedKey(mark.key);
+			};
+			/**
+			* C3: fork the session at the hovered mark, anchoring the cut at its event
+			* seq. The acknowledgement only shows once the fork resolved.
+			*/
+			const onFork = (mark) => {
+				forkAt(mark.seq).then(() => setForkedKey(mark.key));
+			};
 			const showLoadOlder = hasMore && marks.length >= MIN_MARKS;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				style: {
@@ -530,14 +1210,15 @@ window.__ModuleLoader__.load({
 					display: "flex",
 					flexDirection: "column"
 				},
-				"aria-label": "会话里程碑",
+				"aria-label": t("rail.label"),
 				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: BADGE_PULSE_CSS }),
 					showLoadOlder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						"data-load-older": true,
 						"data-loading-older": loadingOlder ? "true" : void 0,
-						title: "加载更早消息",
-						"aria-label": "加载更早消息",
+						title: t("load.older"),
+						"aria-label": t("load.older"),
 						disabled: loadingOlder,
 						onClick: () => {
 							loadOlder();
@@ -560,22 +1241,61 @@ window.__ModuleLoader__.load({
 						},
 						children: "···"
 					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"data-bookmarks-toggle": true,
+						"aria-label": t("bookmark.filter"),
+						"aria-pressed": bookmarksOnly,
+						"data-active": bookmarksOnly ? "true" : void 0,
+						onClick: () => setBookmarksOnly((v) => !v),
+						style: {
+							width: DOT_HIT,
+							height: DOT_HIT,
+							flexShrink: 0,
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							background: bookmarksOnly ? "rgba(77, 124, 254, 0.18)" : "transparent",
+							border: "none",
+							padding: 0,
+							cursor: "pointer",
+							color: bookmarksOnly ? "#9db8ff" : "#8b96ab"
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+							width: "13",
+							height: "13",
+							viewBox: "0 0 24 24",
+							fill: bookmarksOnly ? "currentColor" : "none",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinejoin: "round",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })
+						})
+					}),
 					/* @__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,
+						total: displayMarks.length,
 						onToggle: () => setSearch((s) => ({
 							...s,
 							panelOpen: !s.panelOpen
 						})),
 						onQueryChange: updateQuery,
 						onSearchKeyDown,
-						onClear: clearSearch
+						onClear: clearSearch,
+						t
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						ref: listRef,
+						"data-rail-list": true,
+						tabIndex: 0,
+						"aria-label": t("rail.list"),
+						onFocus: onListFocus,
+						onKeyDown: onListKeyDown,
 						style: {
 							flex: 1,
 							minHeight: 0,
@@ -587,17 +1307,38 @@ window.__ModuleLoader__.load({
 							padding: "6px 0",
 							scrollbarWidth: "none"
 						},
-						children: marks.map((mark, i) => {
+						children: render.items.map((item, i) => {
+							const showSeparator = separatorIndices.has(i);
+							const mark = displayMarks[item.displayIndex];
+							const summaryCount = collapsedSummaries.get(mark.key);
+							const bookmarked = isBookmarked(bookmarkedKeys, mark.key);
 							const dotState = markState({
 								key: mark.key,
 								hasQuery,
-								isMatch: matches.includes(i),
-								isActive: i === activeMarkIndex,
+								isMatch: matches.includes(item.displayIndex),
+								isActive: item.displayIndex === 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", {
+							const badge = deriveBadge({
+								nodeKinds: mark.turn === void 0 ? NO_KINDS : kindsByTurn.get(mark.turn) ?? NO_KINDS,
+								lastMark: item.displayIndex === displayMarks.length - 1,
+								running,
+								awaitingInput
+							});
+							const ringStyle = badge === null ? null : badgeRingStyle(badge);
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [showSeparator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								"data-turn-separator": true,
+								"data-turn": mark.turn === void 0 ? void 0 : mark.turn,
+								style: {
+									width: DOT_HIT - 8,
+									height: 1,
+									flexShrink: 0,
+									background: "rgba(139, 150, 171, 0.35)",
+									borderRadius: 1
+								}
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
 								style: {
 									width: DOT_HIT,
@@ -614,90 +1355,65 @@ window.__ModuleLoader__.load({
 								onMouseEnter: (e) => {
 									const rect = e.currentTarget.getBoundingClientRect();
 									setHover({
-										...buildHover(mark, i),
+										...buildHover(mark, item.displayIndex),
 										top: rect.top + rect.height / 2
 									});
 								},
-								onMouseLeave: () => setHover(null),
 								onClick: () => jump(mark.key),
-								"aria-label": `跳转到第 ${i + 1} 条消息`,
+								"data-rail-dot": true,
+								"data-collapsed-summary": summaryCount !== void 0 ? "true" : void 0,
+								"data-collapsed-count": summaryCount,
+								tabIndex: focusIndex === i ? 0 : -1,
+								onFocus: () => setFocusIndex(i),
+								"aria-label": t("jump.to", { n: item.displayIndex + 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);
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									style: {
+										position: "relative",
+										width: DOT_SIZE,
+										height: DOT_SIZE,
+										borderRadius: "50%",
+										background: dotColor(item.displayIndex, 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
+									},
+									"data-bookmarked": bookmarked ? "true" : void 0,
+									children: ringStyle !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										"data-badge": badge,
+										style: {
+											position: "absolute",
+											inset: -3,
+											borderRadius: "50%",
+											border: `2px solid ${ringStyle.color}`,
+											color: ringStyle.color,
+											pointerEvents: "none",
+											animation: ringStyle.pulse ? "milestone-badge-pulse 1.4s ease-out infinite" : void 0
+										}
+									})
+								})
+							})] }, 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 })
-								]
-							})
-						]
+					hover !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MilestoneRailTooltip, {
+						panelRight: railBox.right + DOT_HIT + 8,
+						hover,
+						bookmarked: isBookmarked(bookmarkedKeys, hover.mark.key),
+						onToggleBookmark: () => onToggleBookmark(hover.mark.key),
+						onCopy,
+						onFork,
+						copied: copiedKey === hover.mark.key,
+						forked: forkedKey === hover.mark.key,
+						turnCollapsed: hover.mark.turn !== void 0 && collapsedTurns.has(hover.mark.turn),
+						onToggleCollapse,
+						onMouseEnter: () => setHover((h) => h),
+						onMouseLeave: () => setHover(null),
+						t
 					}),
-					showLoadOlder && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					showLoadOlder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 						"data-window-hint": true,
 						style: {
 							position: "absolute",
@@ -711,16 +1427,42 @@ window.__ModuleLoader__.load({
 							pointerEvents: "none",
 							userSelect: "none"
 						},
-						children: [
-							"已显示 ",
-							marks.length,
-							" 条 · 还有更早"
-						]
+						children: t("window.hint", { n: marks.length })
 					})
 				]
 			});
 		}
 		//#endregion
+		//#region src/client/bookmarkStore.ts
+		/**
+		* Persisted per-session bookmarks store for the milestone rail.
+		*
+		* A thin declarative shell over the harness snapshot-store engine: pure
+		* draft-mutator actions, persisted to localStorage under the key
+		* `dsh-milestone.bookmarks` (+ `.${scopeKey}` for session-scope instances,
+		* resolved by the engine's `create(scopeKey)`). Consumers must call the
+		* FACTORY (never a module-level handle — module-cache identity is a disguised
+		* singleton across plugin reloads).
+		*/
+		/**
+		* Declare the bookmarks store handle. Returns a fresh handle per call; the
+		* framework (or tests) create per-session instances via `create(scopeKey)`.
+		*/
+		function createBookmarksStore() {
+			return (0, _deepseek_ai_dsh_client_runtime_client.defineStore)({
+				init: () => ({ keys: [] }),
+				persist: "dsh-milestone.bookmarks",
+				actions: {
+					toggle: (draft, key) => {
+						draft.keys = toggleKey(draft.keys, key);
+					},
+					clear: (draft) => {
+						draft.keys = [];
+					}
+				}
+			});
+		}
+		//#endregion
 		//#region src/client/railInject.ts
 		/**
 		* Wrap a session-bound `loadOlder` call into a safe action closure.
@@ -740,10 +1482,138 @@ window.__ModuleLoader__.load({
 				await binding.session.loadOlder();
 			};
 		}
+		/**
+		* Wrap a session `fork` call into a safe action closure that anchors the cut
+		* at an event seq and always bumps the inherited title.
+		*
+		* - Delegates to `sessions.fork({ sessionId, atSeq, increaseTitle: true })`;
+		*   the resolved child id is passed through.
+		* - A rejection propagates unchanged so callers can surface the fork error.
+		*
+		* @param sessions - the injected sessions service (`ctx.sessions`).
+		* @param sessionId - the session the rail is scoped to.
+		* @returns an action that forks that session at a given event seq.
+		*/
+		function createForkAt(sessions, sessionId) {
+			return (atSeq) => sessions.fork({
+				sessionId,
+				atSeq,
+				increaseTitle: true
+			});
+		}
+		//#endregion
+		//#region src/client/locales.ts
+		/**
+		* UI strings for the milestone rail, keyed flat (single-language-per-key,
+		* no nesting) so the later i18n threading stays a mechanical
+		* `value.replace('{name}', n)` substitution.
+		*
+		* `zh` is the source of truth and the key registry: it byte-matches the
+		* current hardcoded output of MilestoneRail / MilestoneRailTooltip /
+		* MilestoneRailSearch exactly (each `{n}`/`{m}`/`{name}` slot stands in for
+		* the interpolated number or label), so swapping in these templates is
+		* behavior-preserving. `en` is typed `Record<MilestoneKey, string>` so a
+		* missing English translation is a compile error, not a runtime miss.
+		*/
+		const zh = {
+			/** aria-label on each dot: `跳转到第 ${i + 1} 条消息`. */
+			"jump.to": "跳转到第 {n} 条消息",
+			/** Load-older coverage hint: `已显示 {marks.length} 条 · 还有更早`. */
+			"window.hint": "已显示 {n} 条 · 还有更早",
+			/** Hover turn badge: `第 ${mark.turn} 轮`. */
+			"turn.label": "第 {n} 轮",
+			/** Hover position: `第 {hover.index + 1} / {hover.total} 条`. */
+			"pos.of": "第 {n} / {m} 条",
+			/** Search input placeholder. */
+			"search.placeholder": "搜索消息内容",
+			/** aria-label on the search toggle button and the search input. */
+			"search.label": "搜索消息",
+			/** aria-label on the bookmarks-only filter toggle. */
+			"bookmark.filter": "只看收藏",
+			/** aria-label on the hover tooltip star toggle. */
+			"bookmark.star": "收藏此消息",
+			/** aria-label on the search clear button. */
+			"search.clear": "清空搜索",
+			/** title + aria-label on the load-older `···` button. */
+			"load.older": "加载更早消息",
+			/** aria-label on the rail root. */
+			"rail.label": "会话里程碑",
+			/** aria-label on the dot list. */
+			"rail.list": "会话里程碑列表",
+			/** Hover preview fallback for empty message text. */
+			"no.text": "（无文本）",
+			/** Relative time: `< 60s`. */
+			"time.justNow": "刚刚",
+			/** Relative time: `< 1h`. */
+			"time.minutes": "{n} 分钟前",
+			/** Relative time: `< 1d`. */
+			"time.hours": "{n} 小时前",
+			/** Relative time: `>= 1d`. */
+			"time.days": "{n} 天前",
+			/** Hover duration: `用时 {durationLabel}`. */
+			"duration.label": "用时 {name}",
+			/** Hover TTFT: `首字 {ttftLabel}`. */
+			"ttft.label": "首字 {name}",
+			/** TurnEndReason `completed`. */
+			"reason.completed": "已完成",
+			/** TurnEndReason `aborted`. */
+			"reason.aborted": "已中止",
+			/** TurnEndReason `error`. */
+			"reason.error": "出错",
+			/** TurnEndReason `max-tokens`. */
+			"reason.maxTokens": "达到上限",
+			/** TurnEndReason `interrupted`. */
+			"reason.interrupted": "已中断",
+			/** TurnEndReason `blocked`. */
+			"reason.blocked": "已阻塞",
+			/** Copy-message tooltip action. */
+			"copy.message": "复制消息",
+			/** Fork-from-here tooltip action. */
+			"fork.here": "从此处 fork",
+			/** Collapse-turn tooltip action. */
+			"collapse.turn": "折叠此轮",
+			/** Expand-turn tooltip action. */
+			"expand.turn": "展开此轮"
+		};
+		const en = {
+			"jump.to": "Jump to message {n}",
+			"window.hint": "Showing {n} messages · more below",
+			"turn.label": "Turn {n}",
+			"pos.of": "Message {n} of {m}",
+			"search.placeholder": "Search message content",
+			"search.label": "Search messages",
+			"bookmark.filter": "Bookmarks only",
+			"bookmark.star": "Bookmark this message",
+			"search.clear": "Clear search",
+			"load.older": "Load older messages",
+			"rail.label": "Session milestones",
+			"rail.list": "Session milestone list",
+			"no.text": "(no text)",
+			"time.justNow": "Just now",
+			"time.minutes": "{n} minutes ago",
+			"time.hours": "{n} hours ago",
+			"time.days": "{n} days ago",
+			"duration.label": "Duration {name}",
+			"ttft.label": "First token {name}",
+			"reason.completed": "Completed",
+			"reason.aborted": "Aborted",
+			"reason.error": "Error",
+			"reason.maxTokens": "Max tokens reached",
+			"reason.interrupted": "Interrupted",
+			"reason.blocked": "Blocked",
+			"copy.message": "Copy message",
+			"fork.here": "Fork from here",
+			"collapse.turn": "Collapse turn",
+			"expand.turn": "Expand turn"
+		};
 		//#endregion
 		//#region src/client/index.ts
 		/** Required services (cordis fiber inject). */
-		const inject = ["slots", "sessions"];
+		const inject = [
+			"slots",
+			"sessions",
+			"locale"
+		];
 		/**
 		* Register the overlay and rail once their slot declarations are on the
 		* ledger. The overlay registers directly against the shipped shell.overlay
@@ -752,6 +1622,10 @@ window.__ModuleLoader__.load({
 		* @param ctx - client root context.
 		*/
 		function apply(ctx) {
+			ctx.effect(() => ctx.locale.register("dsh-milestone", {
+				zh,
+				en
+			}), "dsh-milestone: dictionaries");
 			ctx.slots.inject("shell.overlay", () => ctx.slots.register({
 				name: "shell.overlay",
 				id: "milestone",
@@ -763,7 +1637,12 @@ window.__ModuleLoader__.load({
 			}, MilestoneOverlay));
 			ctx.slots.inject("milestone.rail", () => ctx.slots.register({
 				name: "milestone.rail",
-				inject: (sessionId) => ({ loadOlder: createLoadOlder(ctx.sessions, sessionId) })
+				store: createBookmarksStore,
+				locale: "dsh-milestone",
+				inject: (sessionId) => ({
+					loadOlder: createLoadOlder(ctx.sessions, sessionId),
+					forkAt: createForkAt(ctx.sessions, sessionId)
+				})
 			}, MilestoneRail));
 		}
 		//#endregion