dsh-milestone 0.6.5 → 0.7.0

package/lib/client.js

@@ -6,7 +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");
+		let _deepseek_ai_dsh_client_store = require("@deepseek-ai/dsh-client-store");
 		//#region src/client/MilestoneOverlay.tsx
 		/**
 		* @param props - runtime share (root kit) + the narrowed renderSlot and the
@@ -15,7 +15,7 @@ window.__ModuleLoader__.load({
 		function MilestoneOverlay({ SessionProvider, renderSlot }) {
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SessionProvider, {
 				empty: () => null,
-				children: () => renderSlot("milestone.rail", {})
+				children: renderSlot("milestone.rail", {})
 			});
 		}
 		//#endregion
@@ -198,6 +198,82 @@ window.__ModuleLoader__.load({
   50% { opacity: 0.45; box-shadow: ${`0 0 0 2px ${layer(.35)}, 0 0 4px 1px ${layer(.25)}, 0 0 9px 3px ${layer(.12)}`}; }
 }`;
 		}
+		/**
+		* Clamp a ball's top-left so the WHOLE circle stays inside the viewport.
+		*
+		* Per axis: `max = Math.max(0, viewportSize - ballSize - margin)` and
+		* `min = Math.min(margin, max)`. When there IS room, `min` is the margin, so
+		* the ball keeps its preferred distance from the edge; when the viewport is
+		* smaller than ball + margins, `max` collapses to 0 (or below) and `min`
+		* follows it, pinning the ball to the top/left outer edge instead of letting
+		* it escape the viewport.
+		*
+		* Non-finite `pos` values degrade to `0` BEFORE clamping, so a corrupt call
+		* still lands on a finite, fully-visible position.
+		*/
+		function clampBallPosition(pos, viewport, ballSize = 40, margin = 8) {
+			const xRaw = Number.isFinite(pos.x) ? pos.x : 0;
+			const yRaw = Number.isFinite(pos.y) ? pos.y : 0;
+			const maxX = Math.max(0, viewport.width - ballSize - margin);
+			const minX = Math.min(margin, maxX);
+			const maxY = Math.max(0, viewport.height - ballSize - margin);
+			return {
+				x: Math.min(maxX, Math.max(minX, xRaw)),
+				y: Math.min(maxY, Math.max(Math.min(margin, maxY), yRaw))
+			};
+		}
+		/**
+		* True when pointer travel from `start` to `current` exceeds the drag
+		* threshold — the gesture vocabulary of the ball: a press that stays put (or
+		* wiggles less than the threshold) is a CLICK (toggle the rail), a press that
+		* travels farther is a DRAG (move the ball).
+		*
+		* Distance is Euclidean, so a diagonal move counts the same as a straight one.
+		* EXACTLY at the threshold is still a click (strictly greater than).
+		*/
+		function isDragGesture(start, current, threshold = 5) {
+			const dx = current.x - start.x;
+			const dy = current.y - start.y;
+			return Math.hypot(dx, dy) > threshold;
+		}
+		/**
+		* Sanitize a persisted ball position; return null when unusable.
+		*
+		* Accepts only a plain object carrying FINITE numeric `x` and `y` (extra keys
+		* are ignored, so a future blob extension stays readable). Everything else —
+		* `null`, arrays, strings, numbers, NaN/Infinity, missing keys — degrades to
+		* `null`, which callers read as "no stored position, use the computed default
+		* resting spot" (see {@link defaultBallPosition}).
+		*
+		* No clamping happens here: the stored value is resolution-agnostic and gets
+		* clamped against the live viewport by {@link clampBallPosition} at render
+		* time.
+		*/
+		function sanitizeBallPosition(raw) {
+			if (typeof raw !== "object" || raw === null || Array.isArray(raw)) return null;
+			const { x, y } = raw;
+			if (typeof x !== "number" || !Number.isFinite(x)) return null;
+			if (typeof y !== "number" || !Number.isFinite(y)) return null;
+			return {
+				x,
+				y
+			};
+		}
+		/**
+		* Default resting spot: hugging `side` at `inset` from the edge, vertically
+		* centered. `inset` is measured from the nearest screen edge; the vertical
+		* axis is simply centered on the viewport.
+		*
+		* The raw spot is always passed through {@link clampBallPosition} with the
+		* default margin, so the resting spot is fully visible even when `inset`
+		* overflows or the viewport is smaller than the ball.
+		*/
+		function defaultBallPosition(viewport, side, inset, ballSize = 40) {
+			return clampBallPosition({
+				x: side === "left" ? inset : viewport.width - ballSize - inset,
+				y: (viewport.height - ballSize) / 2
+			}, viewport, ballSize, 8);
+		}
 		//#endregion
 		//#region src/client/bookmark-logic.ts
 		/**
@@ -385,66 +461,22 @@ window.__ModuleLoader__.load({
 			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.
+		* 0.1.2: derive hover metadata from the `milestone.messages` projection's
+		* per-turn fold state. The fold carries token usage and timing; provider /
+		* model provenance is not folded yet, so those degrade to null.
+		* @param turn - the projection's turn meta, or undefined when absent.
+		* @returns the turn's metadata, null where unknown.
 		*/
-		function decodeUsage(usage) {
-			if (!isRecord(usage)) return {
-				inputTokens: null,
-				outputTokens: null
-			};
+		function deriveTurnMetaFromProjection(turn) {
+			if (turn?.usage === void 0) return EMPTY_META;
 			return {
-				inputTokens: typeof usage.inputTokens === "number" ? usage.inputTokens : null,
-				outputTokens: typeof usage.outputTokens === "number" ? usage.outputTokens : null
+				model: null,
+				purpose: null,
+				inputTokens: turn.usage.input,
+				outputTokens: turn.usage.output
 			};
 		}
-		/** 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
 		/**
@@ -481,22 +513,6 @@ window.__ModuleLoader__.load({
 		* can consume them directly and tests can exercise them in isolation.
 		*/
 		/**
-		* 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.
@@ -598,6 +614,9 @@ window.__ModuleLoader__.load({
 			"turn.label": "第 {n} 轮",
 			/** Hover position: `第 {hover.index + 1} / {hover.total} 条`. */
 			"pos.of": "第 {n} / {m} 条",
+			/** Hover position of a collapsed-turn summary dot: `第 {a}–{b} / {m} 条`
+			* (the range of messages the summary dot represents). */
+			"pos.range": "第 {a}–{b} / {m} 条",
 			/** Search input placeholder. */
 			"search.placeholder": "搜索消息内容",
 			/** aria-label on the search toggle button and the search input. */
@@ -618,6 +637,10 @@ window.__ModuleLoader__.load({
 			"rail.label": "会话里程碑",
 			/** aria-label on the dot list. */
 			"rail.list": "会话里程碑列表",
+			/** aria-label on the rail-collapse control (issue #4: fold the rail into the floating ball). */
+			"rail.collapse": "收起为悬浮球",
+			/** aria-label + title on the collapsed rail's floating ball (click = expand). */
+			"ball.expand": "展开里程碑条",
 			/** Hover preview fallback for empty message text. */
 			"no.text": "（无文本）",
 			/** Relative time: `< 60s`. */
@@ -658,6 +681,8 @@ window.__ModuleLoader__.load({
 			"list.close": "收起列表",
 			/** Header title of the all-prompts list panel. */
 			"list.label": "全部提问",
+			/** Bottom hint of the all-prompts list while it drains older pages. */
+			"list.loading": "正在加载更早消息…",
 			/** Header title + input placeholder of the cross-session search panel. */
 			"search.cross": "跨会话搜索",
 			/** aria-label + title on the cross-session search toggle when the panel is CLOSED. */
@@ -706,6 +731,8 @@ window.__ModuleLoader__.load({
 			"settings.section.personal": "个性化",
 			/** Settings modal: section heading for the focus-mode controls (0.6.3). */
 			"settings.section.focus": "聚焦",
+			/** Settings modal: section heading for the floating-ball controls (issue #4). */
+			"settings.section.ball": "悬浮球",
 			/** Settings: personalization-section hint shown inside the expanded block. */
 			"settings.personal.hint": "圆点、强调色与位置，即调即存",
 			/** Settings: aria-label on the personalization block toggle while COLLAPSED. */
@@ -742,6 +769,16 @@ window.__ModuleLoader__.load({
 			"settings.side.left": "左侧",
 			/** Settings personalization: side radio — hug the right edge. */
 			"settings.side.right": "右侧",
+			/** Settings: floating-ball block — hint shown inside the expanded block. */
+			"settings.ball.hint": "收起后变为悬浮球；可固定，也可自由拖动到任意位置",
+			/** Settings: floating-ball behavior row label + radiogroup aria-label. */
+			"settings.ball.mode": "行为",
+			/** Settings: floating-ball behavior radio — pinned to the resting spot. */
+			"settings.ball.mode.fixed": "固定",
+			/** Settings: floating-ball behavior radio — free drag anywhere. */
+			"settings.ball.mode.draggable": "可拖动",
+			/** Settings: floating-ball action — drop the persisted drag position. */
+			"settings.ball.reset": "重置位置",
 			/** Settings: focus block — hint shown inside the expanded block. */
 			"settings.focus.hint": "这些选项自由组合成你的「聚焦搭配」；总开关仍是工具栏的眼睛按钮",
 			/** Settings: aria-label on the focus block toggle while COLLAPSED. */
@@ -836,6 +873,8 @@ window.__ModuleLoader__.load({
 			"window.hint": "Showing {n} messages · more below",
 			"turn.label": "Turn {n}",
 			"pos.of": "Message {n} of {m}",
+			/** Collapsed-summary dot position: the message RANGE the dot represents. */
+			"pos.range": "Messages {a}–{b} of {m}",
 			"search.placeholder": "Search message content",
 			"search.label": "Search messages",
 			"bookmark.filter": "Bookmarks only",
@@ -846,6 +885,8 @@ window.__ModuleLoader__.load({
 			"load.older": "Load older messages",
 			"rail.label": "Session milestones",
 			"rail.list": "Session milestone list",
+			"rail.collapse": "Collapse to floating ball",
+			"ball.expand": "Expand milestone rail",
 			"no.text": "(no text)",
 			"time.justNow": "Just now",
 			"time.minutes": "{n} minutes ago",
@@ -866,6 +907,8 @@ window.__ModuleLoader__.load({
 			"list.open": "Open list",
 			"list.close": "Close list",
 			"list.label": "All prompts",
+			/** Bottom hint of the all-prompts list while it drains older pages. */
+			"list.loading": "Loading earlier messages…",
 			"search.cross": "Cross-session search",
 			"search.cross.open": "Open cross-session search",
 			"search.cross.close": "Close cross-session search",
@@ -890,6 +933,7 @@ window.__ModuleLoader__.load({
 			"settings.section.features": "Features & Shortcuts",
 			"settings.section.personal": "Personalization",
 			"settings.section.focus": "Focus",
+			"settings.section.ball": "Floating ball",
 			"settings.personal.hint": "Dot size, accent color, and position — saved as you adjust",
 			"settings.personal.expand": "Expand personalization",
 			"settings.personal.collapse": "Collapse personalization",
@@ -908,6 +952,11 @@ window.__ModuleLoader__.load({
 			"settings.side": "Position",
 			"settings.side.left": "Left",
 			"settings.side.right": "Right",
+			"settings.ball.hint": "Collapses into a floating ball — pin it, or drag it anywhere",
+			"settings.ball.mode": "Behavior",
+			"settings.ball.mode.fixed": "Fixed",
+			"settings.ball.mode.draggable": "Draggable",
+			"settings.ball.reset": "Reset position",
 			"settings.focus.hint": "Combine these options into your own focus recipe; the eye button on the toolbar stays the master switch",
 			"settings.focus.expand": "Expand focus settings",
 			"settings.focus.collapse": "Collapse focus settings",
@@ -974,6 +1023,31 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/turn-group-logic.ts
 		/**
+		* Renumber the raw harness turn numbers into a compact 1-based DISPLAY
+		* sequence over the marks that actually render. The harness numbers every
+		* engine turn (subagent/injected turns included), so the raw numbers show
+		* gaps (turns that produced no user mark) and repeats (several marks sharing
+		* one turn); labels fed through this map read as clean 1, 2, 3, … rounds.
+		*
+		* Grouping and collapse logic keep operating on the RAW turn (same-turn marks
+		* are contiguous in rail order, so first-appearance ranking preserves the
+		* partition) — only labels consume this map.
+		*
+		* @param marks - marks in rail order (only `turn` is consulted).
+		* @returns raw turn -> display round (1-based), in first-appearance order;
+		*   turns that never appear (or marks without turn info) get no entry.
+		*/
+		function buildDisplayTurns(marks) {
+			const display = /* @__PURE__ */ new Map();
+			let rank = 0;
+			for (const mark of marks) {
+				if (mark.turn === void 0) continue;
+				if (display.has(mark.turn)) continue;
+				display.set(mark.turn, ++rank);
+			}
+			return display;
+		}
+		/**
 		* 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`.
@@ -1286,9 +1360,10 @@ window.__ModuleLoader__.load({
 		/**
 		* @param props - the panel anchor, the full marks array, and the rail's jump handler.
 		*/
-		function MilestoneListPanel({ panelTop, panelRight, marks, onJump, onClose, t }) {
+		function MilestoneListPanel({ panelTop, panelRight, marks, onJump, onClose, loading = false, t }) {
 			const panelRef = (0, react.useRef)(null);
 			useOutsideDismiss(panelRef, true, onClose, { exclude: (target) => outsideDismissMatches(target, "[data-list-toggle]") });
+			const displayTurns = (0, react.useMemo)(() => buildDisplayTurns(marks), [marks]);
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				ref: panelRef,
 				"data-milestone-list": true,
@@ -1328,7 +1403,7 @@ window.__ModuleLoader__.load({
 							children: marks.length
 						})]
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						style: {
 							maxHeight: 300,
 							overflowY: "auto",
@@ -1336,7 +1411,7 @@ window.__ModuleLoader__.load({
 							flexDirection: "column",
 							gap: 2
 						},
-						children: marks.map((mark, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						children: [marks.map((mark, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
 							type: "button",
 							"data-list-item": true,
 							"data-jump-key": mark.key,
@@ -1363,7 +1438,7 @@ window.__ModuleLoader__.load({
 								children: [t("pos.of", {
 									n: i + 1,
 									m: marks.length
-								}), mark.turn !== void 0 ? ` · ${t("turn.label", { n: mark.turn })}` : null]
+								}), mark.turn !== void 0 ? ` · ${t("turn.label", { n: displayTurns.get(mark.turn) ?? mark.turn })}` : null]
 							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								style: {
 									fontSize: 13,
@@ -1374,7 +1449,16 @@ window.__ModuleLoader__.load({
 								},
 								children: mark.preview || t("no.text")
 							})]
-						}, mark.key))
+						}, mark.key)), loading && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"data-list-loading": true,
+							style: {
+								fontSize: 12,
+								color: "#8b96ab",
+								textAlign: "center",
+								padding: "6px 8px"
+							},
+							children: t("list.loading")
+						})]
 					})
 				]
 			});
@@ -1831,10 +1915,7 @@ window.__ModuleLoader__.load({
 							marginBottom: 4
 						},
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("pos.of", {
-								n: hover.index + 1,
-								m: hover.total
-							}) }),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: hover.posLabel }),
 							hover.turnLabel !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: hover.turnLabel }),
 							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
@@ -2246,7 +2327,8 @@ window.__ModuleLoader__.load({
 		* toolbar-prefs: the persistence layer for the milestone rail's toolbar
 		* personalization — WHICH function keys stay visible outside the collapse
 		* (pinned) plus the settings-module appearance prefs (accent color, icon/dot
-		* size, distance from the rail's screen edge, and rail side).
+		* size, distance from the rail's screen edge, rail side) and the collapsed
+		* rail's floating ball (mode + last position).
 		*
 		* Storage contract: one localStorage key (`dsh-milestone.toolbar`) holding a
 		* JSON object:
@@ -2254,13 +2336,17 @@ window.__ModuleLoader__.load({
 		*   { "pinned": string[], "accent": "#rrggbb", "iconSize": number,
 		*     "inset": number, "side": "left" | "right", "locale": "system"|"zh"|"en",
 		*     "focus": { "dimThink": boolean, "dimTools": boolean,
-		*                "collapseThink": boolean, "opacity": number } }
+		*                "collapseThink": boolean, "opacity": number },
+		*     "ballMode": "fixed" | "draggable",
+		*     "ball": { "x": number, "y": number } | null }
 		*
 		* Backward compatibility: the pre-personalization blob `{ "pinned": string[] }`
 		* (and an entirely absent value) parses to the DEFAULT prefs with the new
 		* fields at their defaults — old users keep their pins untouched. The same
 		* rule covers the `focus` object: a blob stored before 0.6.3 (no `focus`
-		* field) gains the default focus mix.
+		* field) gains the default focus mix, and a blob stored before the floating
+		* ball (no `ballMode` / `ball`) gains `ballMode: 'draggable'` + `ball: null`
+		* (the computed default resting spot).
 		*
 		* All reads are sanitized per field:
 		*   - `pinned`: whitelisted ids only (`TOOLBAR_PIN_IDS`), duplicates dropped,
@@ -2272,7 +2358,11 @@ window.__ModuleLoader__.load({
 		*   - `side`: exactly `'left'` or `'right'`;
 		*   - `focus`: three booleans (`dimThink` / `dimTools` / `collapseThink`)
 		*     defaulting to `true` / `false` / `false`, plus the dim `opacity`
-		*     snapped to the 0.1 step and clamped to [0.2, 0.8].
+		*     snapped to the 0.1 step and clamped to [0.2, 0.8];
+		*   - `ballMode`: exactly `'fixed'`, otherwise `'draggable'` (including a
+		*     legacy blob stored without the field);
+		*   - `ball`: a finite `{x, y}` pair, otherwise `null` — viewport clamping
+		*     happens at render time (`clampBallPosition`), never in storage.
 		*
 		* The whitelist lives HERE (not in MilestoneRail) so the pure functions stay
 		* dependency-free and unit-testable; MilestoneRail's feature registry keys
@@ -2316,7 +2406,9 @@ window.__ModuleLoader__.load({
 			inset: 14,
 			side: "right",
 			locale: "system",
-			focus: { ...DEFAULT_FOCUS_PREFS }
+			focus: { ...DEFAULT_FOCUS_PREFS },
+			ballMode: "draggable",
+			ball: null
 		};
 		/** Type guard for registry ids — unknown strings never survive a parse. */
 		function isToolbarPinId(id) {
@@ -2384,7 +2476,7 @@ window.__ModuleLoader__.load({
 				return { ...DEFAULT_PREFS };
 			}
 			if (typeof parsed !== "object" || parsed === null) return { ...DEFAULT_PREFS };
-			const { pinned, accent, iconSize, inset, side, locale, focus } = parsed;
+			const { pinned, accent, iconSize, inset, side, locale, focus, ballMode, ball } = parsed;
 			return {
 				pinned: sanitizePinned(pinned),
 				accent: typeof accent === "string" && isHexColor(accent) ? accent.toLowerCase() : DEFAULT_PREFS.accent,
@@ -2392,7 +2484,9 @@ window.__ModuleLoader__.load({
 				inset: clampStep(inset, 0, 40, 2, DEFAULT_PREFS.inset),
 				side: side === "left" || side === "right" ? side : DEFAULT_PREFS.side,
 				locale: locale === "zh" || locale === "en" || locale === "system" ? locale : DEFAULT_PREFS.locale,
-				focus: sanitizeFocus(focus)
+				focus: sanitizeFocus(focus),
+				ballMode: ballMode === "fixed" ? "fixed" : "draggable",
+				ball: sanitizeBallPosition(ball)
 			};
 		}
 		/**
@@ -2738,7 +2832,7 @@ window.__ModuleLoader__.load({
 		* Installed plugin version. Injected at build time as
 		* `__DSH_MILESTONE_VERSION__`; falls back to `0.0.0-dev` when unbuilt.
 		*/
-		const PLUGIN_VERSION = "0.6.5";
+		const PLUGIN_VERSION = "0.7.0";
 		//#endregion
 		//#region src/client/MilestoneRail.tsx
 		/**
@@ -2792,9 +2886,12 @@ 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 empty projection fallback before the host unit mounts. */
+		const EMPTY_PROJECTION_MESSAGES = Object.freeze([]);
+		/** 0.1.2: per-turn badge kinds are not projected yet; stays empty. */
+		const EMPTY_KINDS_BY_TURN = /* @__PURE__ */ new Map();
 		/** Stable no-kinds fallback for marks whose turn carries no badge nodes. */
 		const NO_KINDS = [];
 		/** Visual dot diameter at the default icon size (px). */
@@ -2917,24 +3014,24 @@ window.__ModuleLoader__.load({
 /* Row and header washes (the inline styles deliberately leave backgrounds
    unset so these rules win over the default padding-box background). */
 [data-toolbar-pin-toggle]:hover, [data-toolbar-pin-toggle]:focus-visible { background: rgba(255, 255, 255, 0.06); }
-[data-personal-toggle]:hover, [data-focus-toggle-settings]:hover { background: rgba(255, 255, 255, 0.05); }
+[data-personal-toggle]:hover, [data-focus-toggle-settings]:hover, [data-ball-toggle]:hover { background: rgba(255, 255, 255, 0.05); }
 [data-focus-option]:hover { background: rgba(255, 255, 255, 0.04); }
 [data-toolbar-settings-close]:hover { background: rgba(255, 255, 255, 0.08); }
-[data-toolbar-settings-reset], [data-onboarding-reopen] { background: rgba(255, 255, 255, 0.06); }
-[data-toolbar-settings-reset]:hover, [data-onboarding-reopen]:hover { background: rgba(255, 255, 255, 0.1); }
+[data-toolbar-settings-reset], [data-onboarding-reopen], [data-ball-reset] { background: rgba(255, 255, 255, 0.06); }
+[data-toolbar-settings-reset]:hover, [data-onboarding-reopen]:hover, [data-ball-reset]:hover { background: rgba(255, 255, 255, 0.1); }
 /* BASE state reset: every modal surface must sit transparent on the dark
    panel — without it the UA default button face (light gray) floods through
    and rows become unreadable light-on-light. Hover washes above take over
    on interaction. */
-[data-toolbar-pin-toggle], [data-personal-toggle], [data-focus-toggle-settings],
+[data-toolbar-pin-toggle], [data-personal-toggle], [data-focus-toggle-settings], [data-ball-toggle],
 [data-toolbar-settings-close], [data-focus-option] {
   background: transparent;
 }
 /* ONE accent ring for keyboard focus on every modal control. */
 [data-toolbar-pin-toggle]:focus-visible, [data-personal-toggle]:focus-visible,
-[data-focus-toggle-settings]:focus-visible,
+[data-focus-toggle-settings]:focus-visible, [data-ball-toggle]:focus-visible,
 [data-toolbar-settings-close]:focus-visible, [data-toolbar-settings-reset]:focus-visible,
-[data-onboarding-reopen]:focus-visible {
+[data-onboarding-reopen]:focus-visible, [data-ball-reset]:focus-visible {
   box-shadow: 0 0 0 2px var(--ms-accent-soft);
 }
 /* Near-row description tip: a rotated square peeks out of the LEFT edge so
@@ -2948,10 +3045,10 @@ window.__ModuleLoader__.load({
 }
 /* Tip + chevron motion lives here (not inline) so reduced-motion can kill it. */
 [data-settings-tip] { transition: opacity 140ms ease, transform 140ms ease, visibility 140ms; }
-[data-personal-toggle] svg, [data-focus-toggle-settings] svg { transition: transform 150ms ease; }
-/* One authored reveal: the personalization/focus bodies fade in on expand. */
+[data-personal-toggle] svg, [data-focus-toggle-settings] svg, [data-ball-toggle] svg { transition: transform 150ms ease; }
+/* One authored reveal: the personalization/focus/ball bodies fade in on expand. */
 @keyframes ms-settings-fade { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
-[data-settings-personal-body], [data-settings-focus-body] { animation: ms-settings-fade 140ms ease; }
+[data-settings-personal-body], [data-settings-focus-body], [data-settings-ball-body] { animation: ms-settings-fade 140ms ease; }
 /* Thin themed scrollbar for the scrollable modal panel. */
 [data-toolbar-settings-panel]::-webkit-scrollbar { width: 10px; }
 [data-toolbar-settings-panel]::-webkit-scrollbar-thumb {
@@ -2959,8 +3056,8 @@ window.__ModuleLoader__.load({
 }
 [data-toolbar-settings-panel]::-webkit-scrollbar-track { background: transparent; }
 @media (prefers-reduced-motion: reduce) {
-  [data-settings-tip], [data-personal-toggle] svg, [data-focus-toggle-settings] svg, [data-support-card] { transition: none; }
-  [data-settings-personal-body], [data-settings-focus-body] { animation: none; }
+  [data-settings-tip], [data-personal-toggle] svg, [data-focus-toggle-settings] svg, [data-ball-toggle] svg, [data-support-card] { transition: none; }
+  [data-settings-personal-body], [data-settings-focus-body], [data-settings-ball-body] { animation: none; }
 }
 [data-search-toggle] { color: #8b96ab !important; }
 [data-search-toggle][aria-pressed="true"] { background: var(--ms-accent-bg) !important; color: var(--ms-accent-soft) !important; }
@@ -3034,26 +3131,21 @@ window.__ModuleLoader__.load({
 		* Find a chat row by its node key, avoiding CSS.escape pitfalls on keys that
 		* 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;
+		function findRow(key, messageId) {
+			const rows = document.querySelectorAll("[data-chat-anchor-key]");
+			for (const row of rows) if (row.dataset.chatAnchorKey === key) return row;
+			if (messageId !== void 0 && messageId !== "") for (const row of rows) {
+				const anchor = row.dataset.chatAnchorKey;
+				if (anchor !== void 0 && anchor.endsWith(messageId)) return row;
+			}
 			return null;
 		}
-		/** Extract a plain-text hover preview (first 80 chars) from a ContentBlock[]. */
-		function extractPreview(content) {
-			return extractText(content).slice(0, PREVIEW_LENGTH);
-		}
 		/** 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`;
 		}
-		/** 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),
 		* the injected loadOlder/forkAt actions, the bookmarks store pair (useStore +
@@ -3062,52 +3154,28 @@ window.__ModuleLoader__.load({
 		* `locale: 'dsh-milestone'`; defaults to a key-pass fallback for renders
 		* outside the slot machinery).
 		*/
-		function MilestoneRail({ useSession, loadOlder, forkAt, useStore, actions, searchSessions = async () => ({
+		function MilestoneRail({ useSession, useProjection, loadOlder, forkAt, useStore, actions, searchSessions = async () => ({
 			items: [],
 			hasMore: false
 		}), openSession = () => {}, t: frameworkT = (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 projection = useProjection?.("milestone.messages");
 			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) {
-					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,
-						text: extractText(data.content),
-						preview: extractPreview(data.content)
-					});
-				}
-				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]);
+				return (projection?.messages ?? EMPTY_PROJECTION_MESSAGES).map((m) => ({
+					key: String(m.seq),
+					turn: m.turn,
+					seq: m.seq,
+					messageId: m.messageId,
+					time: m.time,
+					text: m.text,
+					preview: m.preview
+				}));
+			}, [projection]);
+			const kindsByTurn = EMPTY_KINDS_BY_TURN;
 			const running = useSession((s) => s.running);
-			const awaitingInput = useSession((s) => s.pending).length > 0;
+			const awaitingInput = useSession((s) => s.queue).length > 0;
 			const [railBox, setRailBox] = (0, react.useState)(null);
 			const [hover, setHover] = (0, react.useState)(null);
 			const [search, setSearch] = (0, react.useState)({
@@ -3118,13 +3186,15 @@ window.__ModuleLoader__.load({
 			const [bookmarksOnly, setBookmarksOnly] = (0, react.useState)(false);
 			const [focusActive, setFocusActive] = (0, react.useState)(false);
 			const [listOpen, setListOpen] = (0, react.useState)(false);
+			const [drainPage, setDrainPage] = (0, react.useState)(false);
+			const [drainFailed, setDrainFailed] = (0, react.useState)(false);
 			const [crossOpen, setCrossOpen] = (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 currentKey = useCurrentAnchor(marks.map((m) => m.key));
 			/**
 			* P3: jump to the chat row with the given node key — smooth-scroll it into
 			* view and write the position back into the URL hash (`#msg=<key>`) so
@@ -3134,8 +3204,8 @@ window.__ModuleLoader__.load({
 			* rail's own updates. No-op when the row is not (yet) rendered — the
 			* deep-link mount retry and the load-older flow cover that case.
 			*/
-			const jump = (key) => {
-				const row = findRow(key);
+			const jump = (key, messageId) => {
+				const row = findRow(key, messageId);
 				if (row === null) return;
 				row.scrollIntoView({
 					behavior: "smooth",
@@ -3170,8 +3240,9 @@ window.__ModuleLoader__.load({
 				}
 				return counts;
 			}, [displayMarks]);
+			const displayTurns = (0, react.useMemo)(() => buildDisplayTurns(marks), [marks]);
 			const [prefs, setPrefs] = (0, react.useState)(() => loadPrefs());
-			const { pinned, accent, iconSize, inset, side } = prefs;
+			const { pinned, accent, iconSize, inset, side, ballMode, ball } = prefs;
 			const scale = iconSize / DOT_HIT;
 			const hit = iconSize;
 			const size = DOT_SIZE * scale;
@@ -3251,6 +3322,27 @@ window.__ModuleLoader__.load({
 			/** B-design (0.6.3): the focus block mirrors the personalization block —
 			* collapsed by default, the header leads with a live option summary. */
 			const [focusOpen, setFocusOpen] = (0, react.useState)(false);
+			const [railCollapsed, setRailCollapsed] = (0, react.useState)(false);
+			const [railCollapseHovered, setRailCollapseHovered] = (0, react.useState)(false);
+			/** Issue #4 settings: the floating-ball block mirrors the personalization /
+			* focus collapsibles — collapsed by default, the header leads with the mode. */
+			const [ballOpen, setBallOpen] = (0, react.useState)(false);
+			/** The live ball position while a press is in flight (`null` = resting). */
+			const [dragPos, setDragPos] = (0, react.useState)(null);
+			const dragRef = (0, react.useRef)(null);
+			/** Detaches the in-flight press's window listeners (set on pointerdown). */
+			const dragListenersRef = (0, react.useRef)(null);
+			(0, react.useEffect)(() => () => {
+				dragListenersRef.current?.();
+				dragListenersRef.current = null;
+			}, []);
+			const [, setBallTick] = (0, react.useState)(0);
+			(0, react.useEffect)(() => {
+				if (!railCollapsed) return;
+				const onResize = () => setBallTick((n) => n + 1);
+				window.addEventListener("resize", onResize);
+				return () => window.removeEventListener("resize", onResize);
+			}, [railCollapsed]);
 			const settingsRef = (0, react.useRef)(null);
 			const settingsBtnRef = (0, react.useRef)(null);
 			const [updateOpen, setUpdateOpen] = (0, react.useState)(false);
@@ -3352,11 +3444,12 @@ window.__ModuleLoader__.load({
 				let timer;
 				const attempt = (pollsLeft, canLoadOlder) => {
 					if (cancelled) return;
-					if (findRow(key) !== null) {
-						jump(key);
+					const mark = marksRef.current.find((m) => m.key === key);
+					if (findRow(key, mark?.messageId) !== null) {
+						jump(key, mark?.messageId);
 						return;
 					}
-					if (marksRef.current.length > 0 && !marksRef.current.some((m) => m.key === key)) return;
+					if (marksRef.current.length > 0 && mark === void 0) return;
 					if (pollsLeft > 0) {
 						timer = window.setTimeout(() => attempt(pollsLeft - 1, canLoadOlder), DEEP_LINK_POLL_DELAY);
 						return;
@@ -3378,7 +3471,8 @@ window.__ModuleLoader__.load({
 				const onHashChange = () => {
 					const key = parseDeepLinkHash(window.location.hash);
 					if (key === null) return;
-					if (marksRef.current.some((m) => m.key === key)) jump(key);
+					const mark = marksRef.current.find((m) => m.key === key);
+					if (mark !== void 0) jump(key, mark.messageId);
 				};
 				window.addEventListener("hashchange", onHashChange);
 				return () => window.removeEventListener("hashchange", onHashChange);
@@ -3441,6 +3535,22 @@ window.__ModuleLoader__.load({
 				window.addEventListener("keydown", onKey);
 				return () => window.removeEventListener("keydown", onKey);
 			}, [listOpen, crossOpen]);
+			const listDraining = listOpen && (drainPage || hasMore && !drainFailed);
+			(0, react.useEffect)(() => {
+				if (!listOpen) return;
+				setDrainFailed(false);
+			}, [listOpen]);
+			(0, react.useEffect)(() => {
+				if (!listOpen || !hasMore || drainPage || drainFailed) return;
+				setDrainPage(true);
+				loadOlder().catch(() => setDrainFailed(true)).finally(() => setDrainPage(false));
+			}, [
+				listOpen,
+				hasMore,
+				drainPage,
+				drainFailed,
+				loadOlder
+			]);
 			if (railBox === null || marks.length < MIN_MARKS) return null;
 			const updateQuery = (query) => {
 				setSearch({
@@ -3471,7 +3581,8 @@ window.__ModuleLoader__.load({
 					...s,
 					activePos: next
 				}));
-				jump(displayMarks[matches[next]].key);
+				const mark = displayMarks[matches[next]];
+				jump(mark.key, mark.messageId);
 			};
 			const onSearchKeyDown = (e) => {
 				if (e.key === "Enter") advanceMatch();
@@ -3801,29 +3912,35 @@ window.__ModuleLoader__.load({
 			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;
+				const turnMeta = mark.turn !== void 0 ? projection?.turns.find((turn) => turn.turn === 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 = t(reasonKeyOf(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`;
+				if (turnMeta !== void 0) {
+					if (turnMeta.startTime !== void 0 && turnMeta.endTime !== void 0) durationLabel = formatDuration(turnMeta.endTime - turnMeta.startTime);
+					if (turnMeta.endReason !== void 0) reasonLabel = t(reasonKeyOf(turnMeta.endReason));
+					if (turnMeta.firstChunkTime !== void 0 && turnMeta.startTime !== void 0) ttftLabel = formatDuration(turnMeta.firstChunkTime - turnMeta.startTime);
+					if (turnMeta.usage !== void 0 && durationLabel !== null) {
+						const seconds = (turnMeta.endTime - turnMeta.startTime) / 1e3;
+						if (seconds > 0) tpsLabel = `${(turnMeta.usage.output / seconds).toFixed(1)} tok/s`;
 					}
 				}
-				const meta = deriveTurnMeta(nodes, locations, mark.turn, trajectoryRequests);
+				const meta = deriveTurnMetaFromProjection(turnMeta);
+				const summaryCount = collapsedSummaries.get(mark.key);
 				return {
 					mark,
 					index,
 					total: displayMarks.length,
-					turnLabel: mark.turn !== void 0 ? t("turn.label", { n: mark.turn }) : null,
+					posLabel: summaryCount !== void 0 ? t("pos.range", {
+						a: index - summaryCount + 2,
+						b: index + 1,
+						m: displayMarks.length
+					}) : t("pos.of", {
+						n: index + 1,
+						m: displayMarks.length
+					}),
+					turnLabel: mark.turn !== void 0 ? t("turn.label", { n: displayTurns.get(mark.turn) ?? mark.turn }) : null,
 					durationLabel,
 					reasonLabel,
 					ttftLabel,
@@ -3874,6 +3991,157 @@ window.__ModuleLoader__.load({
 				forkAt(mark.seq).then(() => setForkedKey(mark.key));
 			};
 			const showLoadOlder = hasMore && marks.length >= MIN_MARKS;
+			if (railCollapsed) {
+				const viewport = {
+					width: window.innerWidth,
+					height: window.innerHeight
+				};
+				const resting = clampBallPosition(ball ?? defaultBallPosition(viewport, side, inset), viewport);
+				const pos = dragPos ?? resting;
+				/** Detach the in-flight press's window listeners (idempotent). */
+				const removeDragListeners = () => {
+					const detach = dragListenersRef.current;
+					if (detach === null) return;
+					dragListenersRef.current = null;
+					detach();
+				};
+				/** Release the pointer capture when the DOM implementation supports it. */
+				const releaseBallCapture = (el, pointerId) => {
+					if (typeof el.releasePointerCapture !== "function") return;
+					try {
+						el.releasePointerCapture(pointerId);
+					} catch {}
+				};
+				/**
+				* Press start: in draggable mode record the gesture anchor and arm the
+				* window pointer listeners; in fixed mode do nothing drag-related — the
+				* plain onClick fallback below still expands the rail.
+				*/
+				const onBallPointerDown = (e) => {
+					if (ballMode !== "draggable") return;
+					const el = e.currentTarget;
+					if (typeof el.setPointerCapture === "function") try {
+						el.setPointerCapture(e.pointerId);
+					} catch {}
+					if (dragRef.current !== null) removeDragListeners();
+					dragRef.current = {
+						pointerId: e.pointerId,
+						startPointer: {
+							x: e.clientX,
+							y: e.clientY
+						},
+						startPos: pos,
+						moved: false
+					};
+					const onMove = (ev) => {
+						const drag = dragRef.current;
+						if (drag === null) return;
+						const live = {
+							width: window.innerWidth,
+							height: window.innerHeight
+						};
+						setDragPos(clampBallPosition({
+							x: drag.startPos.x + (ev.clientX - drag.startPointer.x),
+							y: drag.startPos.y + (ev.clientY - drag.startPointer.y)
+						}, live));
+						drag.moved = drag.moved || isDragGesture(drag.startPointer, {
+							x: ev.clientX,
+							y: ev.clientY
+						});
+					};
+					const onUp = (ev) => {
+						const drag = dragRef.current;
+						if (drag === null) return;
+						removeDragListeners();
+						releaseBallCapture(el, drag.pointerId);
+						if (drag.moved) {
+							const live = {
+								width: window.innerWidth,
+								height: window.innerHeight
+							};
+							updatePrefs({ ball: clampBallPosition({
+								x: drag.startPos.x + (ev.clientX - drag.startPointer.x),
+								y: drag.startPos.y + (ev.clientY - drag.startPointer.y)
+							}, live) });
+						} else setRailCollapsed(false);
+						setDragPos(null);
+						dragRef.current = null;
+					};
+					const onCancel = () => {
+						const drag = dragRef.current;
+						if (drag === null) return;
+						removeDragListeners();
+						releaseBallCapture(el, drag.pointerId);
+						setDragPos(null);
+						dragRef.current = null;
+					};
+					window.addEventListener("pointermove", onMove);
+					window.addEventListener("pointerup", onUp);
+					window.addEventListener("pointercancel", onCancel);
+					dragListenersRef.current = () => {
+						window.removeEventListener("pointermove", onMove);
+						window.removeEventListener("pointerup", onUp);
+						window.removeEventListener("pointercancel", onCancel);
+					};
+				};
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					"data-milestone-ball": true,
+					role: "button",
+					tabIndex: 0,
+					"aria-label": t("ball.expand"),
+					title: t("ball.expand"),
+					"data-ball-x": String(Math.round(pos.x)),
+					"data-ball-y": String(Math.round(pos.y)),
+					onPointerDown: onBallPointerDown,
+					onClick: ballMode === "fixed" ? () => setRailCollapsed(false) : void 0,
+					onKeyDown: (e) => {
+						if (e.key !== "Enter" && e.key !== " ") return;
+						e.preventDefault();
+						setRailCollapsed(false);
+					},
+					style: {
+						position: "fixed",
+						left: pos.x,
+						top: pos.y,
+						width: 40,
+						height: 40,
+						borderRadius: "50%",
+						background: accent,
+						color: "#ffffff",
+						opacity: .9,
+						zIndex: 100,
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						touchAction: "none",
+						userSelect: "none",
+						cursor: ballMode === "draggable" ? "grab" : "pointer",
+						boxShadow: "0 4px 14px rgba(0, 0, 0, 0.35)"
+					},
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+						width: "18",
+						height: "18",
+						viewBox: "0 0 24 24",
+						fill: "none",
+						stroke: "currentColor",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						strokeLinejoin: "round",
+						"aria-hidden": "true",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+							cx: "12",
+							cy: "12",
+							r: "8"
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+							cx: "12",
+							cy: "12",
+							r: "2.5",
+							fill: "currentColor",
+							stroke: "none"
+						})]
+					})
+				});
+			}
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				style: {
 					position: "fixed",
@@ -3931,6 +4199,40 @@ window.__ModuleLoader__.load({
 						},
 						children: "···"
 					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"data-rail-collapse": true,
+						"aria-label": t("rail.collapse"),
+						title: t("rail.collapse"),
+						onClick: () => setRailCollapsed(true),
+						onMouseEnter: () => setRailCollapseHovered(true),
+						onMouseLeave: () => setRailCollapseHovered(false),
+						onFocus: () => setRailCollapseHovered(true),
+						onBlur: () => setRailCollapseHovered(false),
+						style: chromeButtonStyle(railCollapseHovered),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+							width: "16",
+							height: "16",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							"aria-hidden": "true",
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+								cx: "12",
+								cy: "12",
+								r: "8"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+								cx: "12",
+								cy: "12",
+								r: "2.5",
+								fill: "currentColor",
+								stroke: "none"
+							})]
+						})
+					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						"data-toolbar-expand": true,
@@ -4440,6 +4742,139 @@ window.__ModuleLoader__.load({
 										]
 									})]
 								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									"data-settings-section": true,
+									"data-settings-ball": true,
+									style: { marginBottom: 20 },
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+										type: "button",
+										"data-ball-toggle": true,
+										"aria-expanded": ballOpen,
+										"aria-label": t("settings.section.ball"),
+										title: t("settings.section.ball"),
+										onClick: () => setBallOpen((v) => !v),
+										style: SECTION_TOGGLE_STYLE,
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+												width: "14",
+												height: "14",
+												viewBox: "0 0 24 24",
+												fill: "none",
+												stroke: "currentColor",
+												strokeWidth: "2.5",
+												strokeLinecap: "round",
+												strokeLinejoin: "round",
+												"aria-hidden": "true",
+												style: {
+													flexShrink: 0,
+													transform: ballOpen ? "rotate(90deg)" : "none"
+												},
+												children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m9 18 6-6-6-6" })
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												"data-settings-section-title": true,
+												style: { flexShrink: 0 },
+												children: t("settings.section.ball")
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												"data-ball-summary": true,
+												style: SECTION_SUMMARY_STYLE,
+												children: ballMode === "fixed" ? t("settings.ball.mode.fixed") : t("settings.ball.mode.draggable")
+											})
+										]
+									}), ballOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										"data-settings-ball-body": true,
+										style: {
+											padding: "10px 4px 8px",
+											display: "flex",
+											flexDirection: "column",
+											gap: 12
+										},
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												"data-settings-ball-hint": true,
+												style: {
+													fontSize: 12,
+													color: "#8b96ab",
+													lineHeight: 1.5,
+													padding: "0 6px"
+												},
+												children: t("settings.ball.hint")
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												role: "radiogroup",
+												"aria-label": t("settings.ball.mode"),
+												style: {
+													display: "flex",
+													alignItems: "center",
+													gap: 10,
+													flexWrap: "wrap"
+												},
+												children: [
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														style: {
+															fontSize: 12.5,
+															color: "#8b96ab",
+															width: 90,
+															flexShrink: 0
+														},
+														children: t("settings.ball.mode")
+													}),
+													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+														style: {
+															display: "inline-flex",
+															alignItems: "center",
+															gap: 5,
+															fontSize: 13,
+															color: "#e6e8ee",
+															cursor: "pointer"
+														},
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+															type: "radio",
+															name: "ms-ball-mode",
+															"data-ball-mode-radio": true,
+															value: "fixed",
+															checked: ballMode === "fixed",
+															onChange: () => updatePrefs({ ballMode: "fixed" })
+														}), t("settings.ball.mode.fixed")]
+													}),
+													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+														style: {
+															display: "inline-flex",
+															alignItems: "center",
+															gap: 5,
+															fontSize: 13,
+															color: "#e6e8ee",
+															cursor: "pointer"
+														},
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+															type: "radio",
+															name: "ms-ball-mode",
+															"data-ball-mode-radio": true,
+															value: "draggable",
+															checked: ballMode === "draggable",
+															onChange: () => updatePrefs({ ballMode: "draggable" })
+														}), t("settings.ball.mode.draggable")]
+													})
+												]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+												type: "button",
+												"data-ball-reset": true,
+												onClick: () => updatePrefs({ ball: null }),
+												style: {
+													padding: "7px 16px",
+													border: `1px solid rgba(255, 255, 255, 0.14)`,
+													borderRadius: 8,
+													cursor: "pointer",
+													color: "#b9c2d4",
+													fontSize: 12.5
+												},
+												children: t("settings.ball.reset")
+											}) })
+										]
+									})]
+								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									"data-settings-section": true,
 									"data-focus-settings": true,
@@ -4838,7 +5273,7 @@ window.__ModuleLoader__.load({
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 									style: { color: "#8b96ab" },
 									children: [t("update.current"), ": "]
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "0.6.5" })] }),
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "0.7.0" })] }),
 								updateCheck.phase === "ok" && updateCheck.latest !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									"data-update-latest": true,
 									children: [
@@ -4943,6 +5378,8 @@ window.__ModuleLoader__.load({
 						panelRight: panelRightFor(PANEL_WIDTH_STANDARD),
 						marks,
 						onJump: jump,
+						onClose: () => setListOpen(false),
+						loading: listDraining,
 						t
 					}),
 					crossOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MilestoneSessionSearch, {
@@ -5014,7 +5451,7 @@ window.__ModuleLoader__.load({
 										top: rect.top + rect.height / 2
 									});
 								},
-								onClick: () => jump(mark.key),
+								onClick: () => jump(mark.key, mark.messageId),
 								"data-rail-dot": true,
 								"data-turn-gap": showGroupGap ? "true" : void 0,
 								"data-turn": showGroupGap && mark.turn !== void 0 ? mark.turn : void 0,
@@ -5026,7 +5463,7 @@ window.__ModuleLoader__.load({
 								"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", {
+								children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 									style: {
 										position: "relative",
 										width: size,
@@ -5039,7 +5476,7 @@ window.__ModuleLoader__.load({
 										opacity: isHovered || dotState !== "dimmed" ? 1 : .22
 									},
 									"data-bookmarked": bookmarked ? "true" : void 0,
-									children: ringStyle !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									children: [ringStyle !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 										"data-badge": badge,
 										style: {
 											position: "absolute",
@@ -5050,7 +5487,31 @@ window.__ModuleLoader__.load({
 											pointerEvents: "none",
 											animation: ringStyle.pulse ? "milestone-badge-pulse 2s ease-in-out infinite" : void 0
 										}
-									})
+									}), summaryCount !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										"data-collapsed-badge": true,
+										style: {
+											position: "absolute",
+											top: -5,
+											right: -7,
+											minWidth: 15,
+											height: 15,
+											padding: "0 3px",
+											display: "flex",
+											alignItems: "center",
+											justifyContent: "center",
+											borderRadius: 8,
+											background: "rgba(20, 24, 32, 0.96)",
+											border: `1px solid ${accentSoft}`,
+											boxSizing: "border-box",
+											color: "#e6e8ee",
+											fontSize: 9,
+											lineHeight: 1,
+											fontWeight: 600,
+											whiteSpace: "nowrap",
+											pointerEvents: "none"
+										},
+										children: ["×", summaryCount]
+									})]
 								})
 							}) }, mark.key);
 						})
@@ -5105,13 +5566,18 @@ window.__ModuleLoader__.load({
 		* 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).
+		*
+		* 0.1.2 compat: the snapshot-store engine moved out of
+		* `@deepseek-ai/dsh-client-runtime/client` into the platform module
+		* `@deepseek-ai/dsh-client-store` (a web module-table seed); the old
+		* specifier is gone from the 0.1.2 module table.
 		*/
 		/**
 		* 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)({
+			return (0, _deepseek_ai_dsh_client_store.defineStore)({
 				init: () => ({ keys: [] }),
 				persist: "dsh-milestone.bookmarks",
 				actions: {
@@ -5150,7 +5616,7 @@ window.__ModuleLoader__.load({
 				return {
 					items: result.value.items.map((item) => ({
 						...item,
-						title: byId[item.sessionId]?.displayTitle
+						title: byId[item.sessionId]?.title
 					})),
 					hasMore: result.value.hasMore
 				};
@@ -5219,6 +5685,7 @@ window.__ModuleLoader__.load({
 		* @param ctx - client root context.
 		*/
 		function apply(ctx) {
+			const sessions = ctx.sessions;
 			ctx.effect(() => ctx.locale.register("dsh-milestone", {
 				zh,
 				en
@@ -5237,10 +5704,10 @@ window.__ModuleLoader__.load({
 				store: createBookmarksStore,
 				locale: "dsh-milestone",
 				inject: (sessionId) => ({
-					loadOlder: createLoadOlder(ctx.sessions, sessionId),
-					forkAt: createForkAt(ctx.sessions, sessionId),
-					searchSessions: createSessionSearch(ctx.sessions),
-					openSession: createOpenSession(ctx.sessions)
+					loadOlder: createLoadOlder(sessions, sessionId),
+					forkAt: createForkAt(sessions, sessionId),
+					searchSessions: createSessionSearch(sessions),
+					openSession: createOpenSession(sessions)
 				})
 			}, MilestoneRail));
 		}