dsh-milestone 0.6.6 → 0.7.1

package/lib/client.js

@@ -4,9 +4,31 @@ window.__ModuleLoader__.load({
 		var module = { exports: {} };
 		var exports = module.exports;
 		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 react_jsx_runtime = require("react/jsx-runtime");
+		let _deepseek_ai_dsh_client_store = require("@deepseek-ai/dsh-client-store");
+		//#region src/client/modal-tokens.ts
+		/**
+		* modal-tokens: the ONE source for the settings modal's dark-panel palette and
+		* radius scale, shared with the 0.6.5 coach-tour bubble so the two surfaces
+		* cannot drift (same dark panel on a dark host, same three text tiers, same
+		* 12px panel / 8px control radius, same border tone).
+		*
+		* The static MODAL_CSS block (hover/focus-visible/reduced-motion rules) stays
+		* in MilestoneRail.tsx because it also styles the settings modal's own chrome
+		* (`[data-support-card]`, `[data-toolbar-*]`, ...); the tour bubble carries
+		* its own small TOUR_CSS block for its controls, built from these same tokens.
+		* MilestoneRail.tsx imports these constants verbatim so a future palette
+		* change edits exactly one file.
+		*/
+		const MODAL_BG = "rgba(20, 24, 32, 0.98)";
+		const MODAL_FG = "#e6e8ee";
+		const MODAL_TITLE = "#c7cede";
+		const MODAL_TEXT = "#b9c2d4";
+		const MODAL_HINT = "#8b96ab";
+		const MODAL_BORDER = "rgba(255, 255, 255, 0.14)";
+		const MODAL_TIP_BG = "#222834";
+		//#endregion
 		//#region src/client/MilestoneOverlay.tsx
 		/**
 		* @param props - runtime share (root kit) + the narrowed renderSlot and the
@@ -15,7 +37,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
@@ -129,6 +151,23 @@ window.__ModuleLoader__.load({
 		* @param input - the mark's snapshot signals.
 		* @returns the winning badge kind, or null when no signal applies.
 		*/
+		/**
+		* 0.1.5: durable badge kinds for one projected turn. The fold no longer sees
+		* the chat-layer `turn-error` / `turn-max-tokens` node kinds, but `turn/end`'s
+		* reason carries the same signal, and every `assistant/attempt` settlement
+		* (failed / retried / cancelled / stream error) is a retry.
+		* @param turn - the projection's turn meta (only the two fields are read).
+		* @returns the node-kind vocabulary {@link deriveBadge} consumes; empty when normal.
+		*/
+		function kindsForTurn(turn) {
+			const kinds = [];
+			if (turn.endReason === "error" || turn.endReason === "interrupted") kinds.push("turn-error");
+			if (turn.endReason === "max-tokens") kinds.push("turn-max-tokens");
+			if ((turn.attempts ?? 0) > 0) kinds.push("model-retry");
+			return kinds.length === 0 ? EMPTY_KINDS : kinds;
+		}
+		/** Stable empty result so normal turns never allocate a fresh array. */
+		const EMPTY_KINDS = Object.freeze([]);
 		function deriveBadge(input) {
 			if (input.nodeKinds.includes("turn-error")) return "error";
 			if (input.nodeKinds.includes("turn-max-tokens")) return "max-tokens";
@@ -198,6 +237,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,65 +500,21 @@ 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.
-		*/
-		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.
+		* 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 deriveTurnMeta(nodes, locations, turn, trajectoryRequests) {
+		function deriveTurnMetaFromProjection(turn) {
 			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;
+			return {
+				model: turn.model ?? null,
+				purpose: null,
+				inputTokens: turn.usage?.input ?? null,
+				outputTokens: turn.usage?.output ?? null
+			};
 		}
 		//#endregion
 		//#region src/client/rail-keyboard.ts
@@ -481,22 +552,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.
@@ -621,6 +676,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`. */
@@ -711,6 +770,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. */
@@ -747,6 +808,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. */
@@ -853,6 +924,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",
@@ -899,6 +972,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",
@@ -917,6 +991,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",
@@ -1423,12 +1502,6 @@ window.__ModuleLoader__.load({
 				]
 			});
 		}
-		const MODAL_FG = "#e6e8ee";
-		const MODAL_TITLE = "#c7cede";
-		const MODAL_TEXT = "#b9c2d4";
-		const MODAL_HINT = "#8b96ab";
-		const MODAL_BORDER = "rgba(255, 255, 255, 0.14)";
-		const MODAL_TIP_BG = "#222834";
 		//#endregion
 		//#region src/client/onboarding-store.ts
 		/**
@@ -2287,7 +2360,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:
@@ -2295,13 +2369,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,
@@ -2313,7 +2391,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
@@ -2357,7 +2439,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) {
@@ -2425,7 +2509,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,
@@ -2433,7 +2517,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)
 			};
 		}
 		/**
@@ -2779,7 +2865,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.6";
+		const PLUGIN_VERSION = "0.7.1";
 		//#endregion
 		//#region src/client/MilestoneRail.tsx
 		/**
@@ -2833,9 +2919,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). */
@@ -2958,24 +3047,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
@@ -2989,10 +3078,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 {
@@ -3000,8 +3089,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; }
@@ -3075,26 +3164,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 +
@@ -3103,52 +3187,37 @@ 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]);
+				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 = (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);
+				const turns = projection?.turns;
+				if (turns === void 0 || turns.length === 0) return EMPTY_KINDS_BY_TURN;
+				const map = /* @__PURE__ */ new Map();
+				for (const t of turns) {
+					const kinds = kindsForTurn(t);
+					if (kinds.length > 0) map.set(t.turn, kinds);
 				}
-				return result;
-			}, [order, nodes]);
+				return map;
+			}, [projection]);
 			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)({
@@ -3167,7 +3236,7 @@ window.__ModuleLoader__.load({
 			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
@@ -3177,8 +3246,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",
@@ -3215,7 +3284,7 @@ window.__ModuleLoader__.load({
 			}, [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;
@@ -3295,6 +3364,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);
@@ -3396,11 +3486,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;
@@ -3422,7 +3513,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);
@@ -3531,7 +3623,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();
@@ -3861,24 +3954,21 @@ 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,
@@ -3943,6 +4033,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",
@@ -4000,6 +4241,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,
@@ -4509,6 +4784,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,
@@ -4907,7 +5315,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.6" })] }),
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "0.7.1" })] }),
 								updateCheck.phase === "ok" && updateCheck.latest !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									"data-update-latest": true,
 									children: [
@@ -5085,7 +5493,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,
@@ -5190,6 +5598,70 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/CompatBoundary.tsx
+		/**
+		* Compatibility boundary for both plugin surfaces.
+		*
+		* The plugin consumes the framework's session standard kit (`useSession`,
+		* `useProjection`, the store seat) and the slot registry, all of which a DSH
+		* upgrade may rename or reshape. Without a boundary such a failure throws out
+		* of the plugin's render — and when the registry silently ignores a stale
+		* entry the rail simply vanishes with no explanation.
+		*
+		* The boundary converts any throw into ONE compact, honest notice instead: the
+		* surrounding harness keeps working, and the user is told what to do (0.1.2→
+		* 0.1.5 has already shown that these upgrades do break third-party plugins).
+		*
+		* A class boundary rather than a per-render capability probe is deliberate:
+		* React exposes error boundaries only through class components, and swapping
+		* hook implementations based on a runtime probe would break hook order.
+		*/
+		/** Catches a render failure anywhere below and shows the incompatibility notice. */
+		var CompatBoundary = class extends react.Component {
+			state = { failed: false };
+			static getDerivedStateFromError() {
+				return { failed: true };
+			}
+			componentDidCatch(error, info) {
+				console.error("[dsh-milestone] incompatible with this DSH version — the rail is disabled. Please update dsh-milestone (or pin an older DSH).", error, info.componentStack);
+			}
+			render() {
+				if (!this.state.failed) return this.props.children;
+				return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					"data-milestone-incompatible": true,
+					role: "status",
+					style: {
+						position: "fixed",
+						right: 14,
+						bottom: 14,
+						zIndex: 100,
+						maxWidth: 300,
+						padding: "10px 12px",
+						background: MODAL_BG,
+						color: MODAL_HINT,
+						border: `1px solid ${MODAL_BORDER}`,
+						borderRadius: 12,
+						fontSize: 12,
+						lineHeight: 1.5,
+						fontFamily: "inherit"
+					},
+					children: [
+						"dsh-milestone 与当前 DSH 版本不兼容，已停用。请升级插件。",
+						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("br", {}),
+						"Incompatible with this DSH version — please update dsh-milestone."
+					]
+				});
+			}
+		};
+		/** The `shell.overlay` seat wrapped in the compatibility boundary. */
+		function GuardedMilestoneOverlay(props) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CompatBoundary, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MilestoneOverlay, { ...props }) });
+		}
+		/** The `milestone.rail` seat wrapped in the compatibility boundary. */
+		function GuardedMilestoneRail(props) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CompatBoundary, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MilestoneRail, { ...props }) });
+		}
+		//#endregion
 		//#region src/client/bookmarkStore.ts
 		/**
 		* Persisted per-session bookmarks store for the milestone rail.
@@ -5200,13 +5672,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: {
@@ -5245,7 +5722,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
 				};
@@ -5314,6 +5791,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
@@ -5326,18 +5804,18 @@ window.__ModuleLoader__.load({
 					kind: "single",
 					scope: "session"
 				} }
-			}, MilestoneOverlay));
+			}, GuardedMilestoneOverlay));
 			ctx.slots.inject("milestone.rail", () => ctx.slots.register({
 				name: "milestone.rail",
 				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));
+			}, GuardedMilestoneRail));
 		}
 		//#endregion
 		exports.apply = apply;