dsh-milestone 0.6.4 → 0.6.6

package/lib/client.js

@@ -598,6 +598,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. */
@@ -658,6 +661,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. */
@@ -796,78 +801,48 @@ window.__ModuleLoader__.load({
 			"settings.lang.zh": "中文",
 			/** Language option: force English copy. */
 			"settings.lang.en": "English",
-			/** 0.6.4 onboarding: welcome title (also the tutorial dialog's aria-label). */
-			"onboarding.welcome.title": "欢迎使用 dsh-milestone",
-			/** 0.6.4 onboarding: one-line positioning statement on the welcome page. */
-			"onboarding.welcome.subtitle": "一条附着在会话侧边的里程碑导航：悬停圆点看元信息，点击跳到任意提问。",
-			/** 0.6.4 onboarding: primary action on the welcome page → step 1. */
-			"onboarding.start": "开始引导",
-			/** 0.6.4 onboarding: skip action — persists the flag and closes, on EVERY page. */
-			"onboarding.skip": "跳过",
-			/** 0.6.4 onboarding: step-page progress text `第 n / 4 步`. */
-			"onboarding.step.label": "第 {n} / 4 步",
-			/** 0.6.4 onboarding: aria-label on one progress dot. */
-			"onboarding.step.short": "第 {n} 步",
-			/** 0.6.4 onboarding: step-page back navigation. */
-			"onboarding.prev": "上一步",
-			/** 0.6.4 onboarding: step-page forward navigation (steps 1–3). */
-			"onboarding.next": "下一步",
-			/** 0.6.4 onboarding: step-4 primary action — persists the flag and closes. */
-			"onboarding.finish": "开始使用",
-			/** 0.6.4 onboarding: step 1 title — the dot timeline. */
-			"onboarding.step1.title": "圆点时间线",
-			/** 0.6.4 onboarding: step 1 line 1. */
-			"onboarding.step1.desc1": "每条提问在侧边对应一个圆点，自上而下按时间排列。",
-			/** 0.6.4 onboarding: step 1 line 2. */
-			"onboarding.step1.desc2": "悬停圆点，查看该轮元信息（用时、首字、模型与 Token）。",
-			/** 0.6.4 onboarding: step 1 line 3. */
-			"onboarding.step1.desc3": "点击任意圆点，会话立即跳到那条提问。",
-			/** 0.6.4 onboarding: step 2 title — in-rail search & bookmarks. */
-			"onboarding.step2.title": "搜索与收藏",
-			/** 0.6.4 onboarding: step 2 line 1. */
-			"onboarding.step2.desc1": "输入关键词过滤圆点，只点亮匹配项并显示 N / M 计数；Enter 逐个跳转，Esc 关闭。",
-			/** 0.6.4 onboarding: step 2 line 2. */
-			"onboarding.step2.desc2": "星标收藏重要消息，再用「只看收藏」一键过滤。",
-			/** 0.6.4 onboarding: step 3 title — personalization & settings. */
-			"onboarding.step3.title": "个性化与设置",
-			/** 0.6.4 onboarding: step 3 line 1. */
-			"onboarding.step3.desc1": "调整强调色、圆点大小、距边距离与左右位置，即调即存。",
-			/** 0.6.4 onboarding: step 3 line 2. */
-			"onboarding.step3.desc2": "切换界面语言、搭配「聚焦」效果，或把常用功能 pin 在折叠外。",
-			/** 0.6.4 onboarding: step 4 title — update detection & support. */
-			"onboarding.step4.title": "更新检测与支持",
-			/** 0.6.4 onboarding: step 4 line 1. */
-			"onboarding.step4.desc1": "挂载后自动检查 npm 新版本；有新版本时工具栏会亮起提示。",
-			/** 0.6.4 onboarding: step 4 line 2. */
-			"onboarding.step4.desc2": "喜欢这个插件？欢迎 Star、提交 Issue，或通过 npm 安装升级。",
-			/** 0.6.4 onboarding demo: fake message 1 (step 1 dots / step 2 corpus). */
-			"onboarding.demo.m1": "帮我优化这段代码",
-			/** 0.6.4 onboarding demo: fake message 2. */
-			"onboarding.demo.m2": "解释这个报错",
-			/** 0.6.4 onboarding demo: fake message 3. */
-			"onboarding.demo.m3": "再检查边界条件",
-			/** 0.6.4 onboarding demo: fake message 4. */
-			"onboarding.demo.m4": "写个单元测试",
-			/** 0.6.4 onboarding demo: fake message 5. */
-			"onboarding.demo.m5": "总结一下方案",
-			/** 0.6.4 onboarding demo (step 1): hint under the toy dot rail. */
-			"onboarding.demo.hoverHint": "试试悬停与点击圆点",
-			/** 0.6.4 onboarding demo (step 2): hint under the toy search/favorite. */
-			"onboarding.demo.searchHint": "试试输入「报错」，或点星标切换只看收藏",
-			/** 0.6.4 onboarding demo (step 3): the 展开箭头 → 齿轮 → 设置 path hint. */
-			"onboarding.demo.settingsPath": "展开箭头 → 齿轮 → 设置",
-			/** 0.6.4 onboarding demo (step 3): legend label for the focus mix. */
-			"onboarding.demo.focusMix": "聚焦搭配",
-			/** 0.6.4 onboarding demo (step 3): legend label for pinning features. */
-			"onboarding.demo.pin": "pin 固定",
-			/** 0.6.4 settings footer action: replay the tutorial. */
-			"onboarding.reopen": "重新查看教程"
+			/** 0.6.5 tour: bubble 0 title (also the bubble's aria-label). */
+			"tour.welcome.title": "欢迎使用 dsh-milestone",
+			/** 0.6.5 tour: bubble 0 description — the REAL rail list anchor. */
+			"tour.welcome.desc": "这是你的会话导航条：每条提问一个圆点，点击跳转，悬停查看元信息。",
+			/** 0.6.5 tour: bubble 1 title — the expand arrow. */
+			"tour.step1.title": "展开工具栏",
+			/** 0.6.5 tour: bubble 1 description — what clicking REALLY does (auto-advance on the real click). */
+			"tour.step1.desc": "点这里展开全部功能键：搜索、列表、收藏、聚焦、更新检测与设置都在里面。",
+			/** 0.6.5 tour: bubble 2 title — the settings gear. */
+			"tour.step2.title": "打开设置",
+			/** 0.6.5 tour: bubble 2 description — what opening settings contains (auto-advance on the real open). */
+			"tour.step2.desc": "打开设置：钉住常用键、个性化外观、切换语言、搭配「聚焦」。",
+			/** 0.6.5 tour: bubble 3 title — the dots (real hover/click behavior). */
+			"tour.step3.title": "圆点导航",
+			/** 0.6.5 tour: bubble 3 description. */
+			"tour.step3.desc": "每个圆点 = 一条提问——点击跳转，悬停查看时间、模型与用量。",
+			/** 0.6.5 tour: bubble 4 title — done. */
+			"tour.step4.title": "开始使用",
+			/** 0.6.5 tour: bubble 4 description — finish line. */
+			"tour.step4.desc": "去试试吧；有问题欢迎到 GitHub 提 Issue。",
+			/** 0.6.5 tour: primary action on bubble 0 (begin) and bubble 4 (finish). */
+			"tour.start": "开始使用",
+			/** 0.6.5 tour: forward navigation (bubbles 1–3; the real-click auto-advance comes first). */
+			"tour.next": "下一步",
+			/** 0.6.5 tour: back navigation (bubbles 1–4). */
+			"tour.prev": "上一步",
+			/** 0.6.5 tour: corner skip — every bubble, persists the flag. */
+			"tour.skip": "跳过",
+			/** 0.6.5 tour: progress text `第 n / 5 步`. */
+			"tour.step.label": "第 {n} / 5 步",
+			/** 0.6.5 tour: aria-label on one progress dot. */
+			"tour.step.short": "第 {n} 步",
+			/** 0.6.5 settings footer action: replay the tour (data-onboarding-reopen kept). */
+			"tour.reopen": "重新查看教程"
 		};
 		const en = {
 			"jump.to": "Jump to message {n}",
 			"window.hint": "Showing {n} messages · more below",
 			"turn.label": "Turn {n}",
 			"pos.of": "Message {n} of {m}",
+			/** 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",
@@ -898,6 +873,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",
@@ -967,39 +944,23 @@ window.__ModuleLoader__.load({
 			"settings.lang.system": "Follow system",
 			"settings.lang.zh": "Chinese",
 			"settings.lang.en": "English",
-			"onboarding.welcome.title": "Welcome to dsh-milestone",
-			"onboarding.welcome.subtitle": "A milestone rail beside your conversation: hover a dot for metadata, click any dot to jump.",
-			"onboarding.start": "Start the tour",
-			"onboarding.skip": "Skip",
-			"onboarding.step.label": "Step {n} of 4",
-			"onboarding.step.short": "Step {n}",
-			"onboarding.prev": "Back",
-			"onboarding.next": "Next",
-			"onboarding.finish": "Get started",
-			"onboarding.step1.title": "The dot timeline",
-			"onboarding.step1.desc1": "Every prompt is a dot on the side rail, listed top to bottom in time order.",
-			"onboarding.step1.desc2": "Hover a dot to see that turn’s metadata (duration, first token, model, tokens).",
-			"onboarding.step1.desc3": "Click any dot to jump the conversation straight to that prompt.",
-			"onboarding.step2.title": "Search & bookmarks",
-			"onboarding.step2.desc1": "Type to filter the dots — matches light up with an N / M counter; Enter jumps, Esc closes.",
-			"onboarding.step2.desc2": "Star a message to bookmark it, then use “Bookmarks only” to filter.",
-			"onboarding.step3.title": "Personalize & settings",
-			"onboarding.step3.desc1": "Tune the accent color, dot size, edge distance, and left/right side — saved as you adjust.",
-			"onboarding.step3.desc2": "Switch the UI language, compose your focus effect, or pin features outside the collapse.",
-			"onboarding.step4.title": "Updates & support",
-			"onboarding.step4.desc1": "A silent check runs after mount; when a new version exists, the toolbar shows a hint.",
-			"onboarding.step4.desc2": "Enjoying the plugin? Star us, file an issue, or upgrade via npm.",
-			"onboarding.demo.m1": "Help me optimize this code",
-			"onboarding.demo.m2": "Explain this error",
-			"onboarding.demo.m3": "Check the edge cases again",
-			"onboarding.demo.m4": "Write a unit test",
-			"onboarding.demo.m5": "Summarize the plan",
-			"onboarding.demo.hoverHint": "Try hovering and clicking the dots",
-			"onboarding.demo.searchHint": "Try typing “error”, or tap the star for bookmarks-only",
-			"onboarding.demo.settingsPath": "Expand arrow → gear → Settings",
-			"onboarding.demo.focusMix": "Focus mix",
-			"onboarding.demo.pin": "Pin keys",
-			"onboarding.reopen": "Replay the tour"
+			"tour.welcome.title": "Welcome to dsh-milestone",
+			"tour.welcome.desc": "This is your session milestone rail: every prompt is a dot — click to jump, hover for metadata.",
+			"tour.step1.title": "Expand the toolbar",
+			"tour.step1.desc": "Click to reveal every function key: search, list, bookmarks, focus, update check, and settings.",
+			"tour.step2.title": "Open settings",
+			"tour.step2.desc": "Open settings: pin your favorite keys, personalize the look, switch language, and tune focus.",
+			"tour.step3.title": "Dot navigation",
+			"tour.step3.desc": "Each dot is one prompt — click to jump, hover for time, model, and usage.",
+			"tour.step4.title": "Get started",
+			"tour.step4.desc": "Go try it — questions and issues are welcome on GitHub.",
+			"tour.start": "Get started",
+			"tour.next": "Next",
+			"tour.prev": "Back",
+			"tour.skip": "Skip",
+			"tour.step.label": "Step {n} of 5",
+			"tour.step.short": "Step {n}",
+			"tour.reopen": "Replay the tour"
 		};
 		/**
 		* Interpolate `{name}` placeholders with params, matching the harness t seat's
@@ -1022,6 +983,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`.
@@ -1334,9 +1320,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,
@@ -1376,7 +1363,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",
@@ -1384,7 +1371,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,
@@ -1411,7 +1398,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,
@@ -1422,27 +1409,20 @@ 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")
+						})]
 					})
 				]
 			});
 		}
-		//#endregion
-		//#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.4 onboarding tutorial modal so the two
-		* dialogs 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 onboarding modal
-		* carries its own small ONBOARDING_CSS block for its own 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";
@@ -1488,610 +1468,137 @@ window.__ModuleLoader__.load({
 			} catch {}
 		}
 		//#endregion
-		//#region src/client/version-meta.ts
-		/**
-		* 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.4";
-		/** Main repository of dsh-milestone (as referenced by README.md). */
-		const PLUGIN_REPO_URL = "https://github.com/SnowCrescenter-tech/dsh-milestone";
-		/** npm package page (install channel promoted in the settings menu). */
-		const PLUGIN_NPM_URL = "https://www.npmjs.com/package/dsh-milestone";
-		//#endregion
-		//#region src/client/MilestoneOnboarding.tsx
+		//#region src/client/MilestoneTour.tsx
 		/**
-		* MilestoneOnboarding: the 0.6.4 first-run tutorial modal.
+		* MilestoneTour: the 0.6.5 first-run coach-bubble tutorial.
+		*
+		* Unlike the deleted 0.6.4 MilestoneOnboarding modal (built-in toy demos on a
+		* fake overlay), this tour never fakes anything. Each of the 5 bubbles anchors
+		* a REAL rail element (`data-rail-list`, `data-toolbar-expand`,
+		* `data-toolbar-settings`, the first `data-rail-dot`, the rail root), explains
+		* what clicking that control ACTUALLY does, and auto-advances by OBSERVING the
+		* live state the rail already owns:
+		*   - bubble 1 (expand arrow) waits for `toolbarExpanded` → true — the user
+		*     really clicked the arrow (「下一步」 remains a fallback);
+		*   - bubble 2 (settings gear) waits for `settingsOpen` → true — the settings
+		*     panel appearing IS the proof — and SUSPENDS while the modal is open
+		*     (state is kept; closing settings resumes the bubble at the current step);
+		*   - bubble 3 (dots) needs no interaction — hover/click are explained.
 		*
 		* Trigger/ownership lives in MilestoneRail (mount timer + settings reopen);
-		* this component is a fully SELF-CONTAINED dialog: it carries the welcome
-		* page, the 4 step pages with built-in toy demos, step progress, and the
-		* close paths (skip / finish / Escape), and it persists the
-		* `dsh-milestone.onboarded` flag itself via onboarding-store.
+		* this component is presentation + state machine only. It persists the
+		* `dsh-milestone.onboarded` flag itself via onboarding-store on IMPRESSION
+		* (showing bubble 0 is enough) and on every close path (skip / Esc / finish).
 		*
-		* Visual language is copied from the settings modal (MilestoneRail's
-		* MODAL_CSS): dark `rgba(20, 24, 32, 0.98)` panel, three text tiers, 12px
-		* panel / 8px control radii, one accent (inherited through the rail root's
-		* `--ms-accent*` CSS variables), and a small ONBOARDING_CSS block for the
-		* hover / :focus-visible / reduced-motion rules inline styles cannot express.
+		* Positioning: `position: fixed`, opened on the target's FREE side (rail on
+		* the right → bubble left of the target; rail on the left → bubble right of
+		* it), measured with getBoundingClientRect and clamped to the viewport.
+		* Re-measured on step changes, whenever the anchor may have (un)mounted (the
+		* forced toolbar expansion), and on window resize. There is NO overlay and the
+		* bubble never covers its own target — the user is supposed to CLICK the real
+		* controls, so pointer-events live only on the bubble box itself.
 		*
-		* Deliberate non-features:
-		*   - NO outside-pointerdown dismissal (a misclick must never swallow the
-		*     tutorial — the requirement explicitly keeps it off).
-		*   - Escape ALWAYS means "skip": it persists the flag and closes.
-		*   - The flag is written on IMPRESSION (the welcome page showing is enough);
-		*     skip / finish / Escape re-assert it. A mid-tour refresh/crash never
-		*     re-pops — replay lives in settings 重新查看教程.
+		* Anchor guarantee: entering any step ≥ 2 calls `onSetToolbarExpanded(true)`
+		* because `data-toolbar-settings` renders only while the toolbar is expanded
+		* (or the gear pinned) — the 「下一步」 fallback path lands there un-expanded.
+		*
+		* Visual language reuses modal-tokens (MODAL_TIP_BG panel, one border tone,
+		* the 12/8px radius scale, three text tiers) and the rail root's inherited
+		* `--ms-accent*` CSS variables. The highlight ring is zero-asset: a
+		* `data-tour-highlight` attribute + one injected CSS rule.
 		*/
-		/** Step-page count — the progress indicator shape. */
+		/** The tour bubble floats above every other rail layer (settings overlay 105). */
+		const TOUR_Z = 106;
+		/** Gap between the target element and the bubble (px). */
+		const TOUR_GAP = 12;
+		/** Bubble width (px) — the left-edge positioning math clamps against it. */
+		const TOUR_WIDTH = 280;
+		/** Minimum padding between the bubble and the viewport edges (px). */
+		const VIEWPORT_PAD = 8;
+		/** Fallback bubble height used when the layout has not settled (px). */
+		const TOUR_HEIGHT_FALLBACK = 120;
+		/** Progress-dot count — the 5 bubble steps (0 = welcome … 4 = done). */
 		const STEP_COUNT = [
+			0,
 			1,
 			2,
 			3,
 			4
 		];
-		/** The onboarding modal floats above every other rail layer (settings 105). */
-		const ONBOARDING_Z = 110;
-		/** Fake messages the step-1/step-2 demos run on (zh AND en keys exist). */
-		const DEMO_MESSAGE_KEYS = [
-			"onboarding.demo.m1",
-			"onboarding.demo.m2",
-			"onboarding.demo.m3",
-			"onboarding.demo.m4",
-			"onboarding.demo.m5"
-		];
-		/** Fake per-turn durations for the step-1 hover tooltip (unit text is locale-neutral). */
-		const DEMO_DURATIONS = [
-			"6.2s",
-			"13.4s",
-			"5.1s",
-			"22.0s",
-			"9.8s"
-		];
 		/**
-		* Static onboarding-modal styling that needs `:hover`/`:focus-visible`
-		* (inline styles cannot express them): one accent focus ring for every
-		* control, hover washes, the demo-link micro-lift, the panel fade-in, and the
-		* reduced-motion kill — mirrors the settings MODAL_CSS pattern. Accent values
-		* come from the rail root's CSS variables (`--ms-accent*`), inherited into
-		* this fixed layer because the overlay renders inside the rail root.
+		* Static tour styling that `:hover`/`:focus-visible`/reduced-motion need (the
+		* `:focus-visible` ring and the base-state backgrounds inline styles cannot
+		* duplicate). BASE-states first — the UA default button face must never flood
+		* through on the dark bubble (that exact bug already shipped once).
 		*/
-		const ONBOARDING_CSS = `
-@keyframes ms-onboarding-fade { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }
-[data-onboarding-panel] { animation: ms-onboarding-fade 160ms ease; }
-[data-onboarding-skip]:hover { background: rgba(255, 255, 255, 0.08); }
-[data-onboarding-prev]:hover, [data-onboarding-next]:hover, [data-onboarding-start]:hover, [data-onboarding-finish]:hover { background: rgba(255, 255, 255, 0.1); }
-[data-onboarding-skip]:focus-visible, [data-onboarding-prev]:focus-visible,
-[data-onboarding-next]:focus-visible, [data-onboarding-start]:focus-visible,
-[data-onboarding-finish]:focus-visible, [data-demo-star]:focus-visible,
-[data-demo-dot]:focus-visible, [data-demo-search-input]:focus-visible {
+		const TOUR_CSS = `
+@keyframes ms-tour-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
+[data-tour-bubble] { animation: ms-tour-fade 160ms ease; }
+/* BASE-state backgrounds for every bubble control (transparent or themed). */
+[data-tour-skip] { background: transparent; }
+[data-tour-prev] { background: rgba(255, 255, 255, 0.06); }
+[data-tour-primary] { background: var(--ms-accent-bg); color: var(--ms-accent-soft); }
+/* Hover washes on top of the explicit base states. */
+[data-tour-skip]:hover { background: rgba(255, 255, 255, 0.08); }
+[data-tour-prev]:hover:not(:disabled) { background: rgba(255, 255, 255, 0.12); }
+[data-tour-primary]:hover { background: rgba(255, 255, 255, 0.14); }
+/* ONE accent focus ring for keyboard use. */
+[data-tour-skip]:focus-visible, [data-tour-prev]:focus-visible, [data-tour-primary]:focus-visible {
   box-shadow: 0 0 0 2px var(--ms-accent-soft);
 }
-[data-demo-link] { transition: transform 120ms ease, border-color 120ms ease, background 120ms ease; }
-[data-demo-link]:hover { transform: translateY(-2px); border-color: var(--ms-accent); background: rgba(255, 255, 255, 0.09); }
+/* The real-target highlight ring: accent halo + a subtle scale hint. */
+[data-tour-highlight] {
+  box-shadow: 0 0 0 2px var(--ms-accent-soft), 0 0 0 4px var(--ms-accent);
+  transform: scale(1.04);
+  transition: box-shadow 140ms ease, transform 140ms ease;
+}
 @media (prefers-reduced-motion: reduce) {
-  [data-onboarding-panel] { animation: none; }
-  [data-onboarding-skip], [data-onboarding-prev], [data-onboarding-next],
-  [data-onboarding-start], [data-onboarding-finish], [data-demo-link] { transition: none; }
+  [data-tour-bubble] { animation: none; }
+  [data-tour-highlight] { transform: none; transition: none; }
+  [data-tour-skip], [data-tour-prev], [data-tour-primary] { transition: none; }
 }
 `;
-		/** Primary (accent) dialog action — start / next / finish. */
-		const PRIMARY_BUTTON = {
-			background: "var(--ms-accent-bg)",
-			color: "var(--ms-accent-soft)",
-			border: "1px solid var(--ms-accent)",
-			borderRadius: 8,
-			padding: "7px 18px",
-			fontSize: 13,
-			fontWeight: 600,
-			cursor: "pointer"
-		};
-		/** Secondary dialog action — back / welcome skip. */
-		const GHOST_BUTTON = {
-			background: "rgba(255, 255, 255, 0.06)",
-			color: MODAL_TEXT,
-			border: `1px solid ${MODAL_BORDER}`,
-			borderRadius: 8,
-			padding: "7px 16px",
-			fontSize: 12.5,
-			cursor: "pointer"
-		};
-		/** Corner skip (step pages) — the quietest of the three button tiers. */
-		const SKIP_BUTTON = {
-			background: "transparent",
-			color: MODAL_HINT,
-			border: "none",
-			padding: "4px 8px",
-			borderRadius: 8,
-			fontSize: 12,
-			cursor: "pointer"
-		};
-		/** Resolve the five fake demo messages through the active locale. */
-		function demoMessages(t) {
-			return DEMO_MESSAGE_KEYS.map((key) => t(key));
-		}
-		/**
-		* Step-1 demo: a toy dot rail with the REAL dot visual — accent gradient dots,
-		* hover enlarges + shows a fake metadata tooltip (position + duration), click
-		* marks the dot with the white ring. All local state; nothing touches real
-		* session data.
-		*/
-		function DemoDotRail({ t, accent }) {
-			const messages = demoMessages(t);
-			const [hoverIndex, setHoverIndex] = (0, react.useState)(null);
-			const [activeIndex, setActiveIndex] = (0, react.useState)(null);
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				"data-demo-dots": true,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						"data-demo-dot-row": true,
-						style: {
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-							gap: 22
-						},
-						children: messages.map((msg, i) => {
-							const hovered = hoverIndex === i;
-							const active = activeIndex === i;
-							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								"data-demo-dot": i,
-								"data-active": active ? "true" : void 0,
-								"aria-label": msg,
-								"aria-pressed": active,
-								onMouseEnter: () => setHoverIndex(i),
-								onMouseLeave: () => setHoverIndex(null),
-								onFocus: () => setHoverIndex(i),
-								onBlur: () => setHoverIndex(null),
-								onClick: () => setActiveIndex(i),
-								style: {
-									width: 36,
-									height: 36,
-									display: "flex",
-									alignItems: "center",
-									justifyContent: "center",
-									background: "transparent",
-									border: "none",
-									padding: 0,
-									cursor: "pointer",
-									borderRadius: "50%"
-								},
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
-									width: 13,
-									height: 13,
-									borderRadius: "50%",
-									background: dotColor(i, messages.length, accent),
-									boxShadow: active ? "0 0 0 3px rgba(255, 255, 255, 0.9)" : hovered ? "0 0 0 3px rgba(255, 255, 255, 0.35)" : "none",
-									transform: hovered || active ? "scale(1.35)" : "scale(1)",
-									transition: "transform 120ms ease, box-shadow 120ms ease"
-								} })
-							}, msg);
-						})
-					}),
-					hoverIndex !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						"data-demo-tooltip": true,
-						style: {
-							marginTop: 8,
-							textAlign: "center",
-							fontSize: 12,
-							color: "#b9c2d4",
-							lineHeight: 1.5
-						},
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("pos.of", {
-								n: hoverIndex + 1,
-								m: messages.length
-							}) }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: " · " }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("duration.label", { name: DEMO_DURATIONS[hoverIndex] }) })
-						]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						"data-demo-hint": true,
-						style: {
-							marginTop: 8,
-							textAlign: "center",
-							fontSize: 12,
-							color: MODAL_HINT
-						},
-						children: t("onboarding.demo.hoverHint")
-					})
-				]
-			});
-		}
-		/**
-		* Step-2 demo: a toy search box that filters the demo messages (N / M count)
-		* plus one bookmark star — active = solid star + "bookmarks only" row list.
-		* Local state only; the real rail/search/bookmarks are untouched.
-		*/
-		function DemoSearch({ t, accent }) {
-			const messages = demoMessages(t);
-			const starIndex = 1;
-			const [query, setQuery] = (0, react.useState)("");
-			const [favOnly, setFavOnly] = (0, react.useState)(false);
-			const lower = query.trim().toLowerCase();
-			const visible = favOnly ? messages.filter((_, i) => i === starIndex) : messages;
-			const matches = lower === "" ? visible.length : visible.filter((m) => m.toLowerCase().includes(lower)).length;
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				"data-demo-search": true,
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						style: {
-							display: "flex",
-							alignItems: "center",
-							gap: 8
-						},
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								"data-demo-search-input": true,
-								type: "text",
-								value: query,
-								onChange: (e) => setQuery(e.target.value),
-								placeholder: t("search.placeholder"),
-								"aria-label": t("search.label"),
-								style: {
-									flex: 1,
-									minWidth: 0,
-									padding: "6px 10px",
-									borderRadius: 8,
-									border: `1px solid ${MODAL_BORDER}`,
-									background: "rgba(255, 255, 255, 0.05)",
-									color: MODAL_FG,
-									fontSize: 12.5,
-									outline: "none"
-								}
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								"data-demo-search-count": true,
-								style: {
-									fontSize: 12,
-									color: MODAL_TEXT,
-									whiteSpace: "nowrap"
-								},
-								children: [
-									matches,
-									" / ",
-									visible.length
-								]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								"data-demo-star": true,
-								"aria-pressed": favOnly,
-								"aria-label": t("bookmark.filter"),
-								title: t("bookmark.filter"),
-								onClick: () => setFavOnly((v) => !v),
-								style: {
-									width: 30,
-									height: 30,
-									flexShrink: 0,
-									display: "flex",
-									alignItems: "center",
-									justifyContent: "center",
-									background: favOnly ? "var(--ms-accent-bg)" : "transparent",
-									border: `1px solid ${MODAL_BORDER}`,
-									borderRadius: 8,
-									padding: 0,
-									cursor: "pointer",
-									color: favOnly ? "var(--ms-accent-soft)" : MODAL_HINT
-								},
-								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-									width: "14",
-									height: "14",
-									viewBox: "0 0 24 24",
-									fill: favOnly ? "currentColor" : "none",
-									stroke: "currentColor",
-									strokeWidth: "2",
-									strokeLinejoin: "round",
-									"aria-hidden": "true",
-									children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })
-								})
-							})
-						]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						"data-demo-search-rows": true,
-						style: {
-							display: "flex",
-							flexDirection: "column",
-							gap: 6,
-							marginTop: 10
-						},
-						children: visible.map((msg, i) => {
-							const realIndex = favOnly ? starIndex : i;
-							const lit = lower === "" || msg.toLowerCase().includes(lower);
-							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								"data-demo-search-row": true,
-								"data-index": realIndex,
-								"data-lit": lit ? "true" : "false",
-								style: {
-									display: "flex",
-									alignItems: "center",
-									gap: 8,
-									fontSize: 12,
-									color: lit ? MODAL_FG : MODAL_HINT,
-									opacity: lit ? 1 : .45,
-									transition: "opacity 120ms ease"
-								},
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-									"aria-hidden": "true",
-									style: {
-										width: 8,
-										height: 8,
-										flexShrink: 0,
-										borderRadius: "50%",
-										background: dotColor(realIndex, messages.length, accent)
-									}
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: msg })]
-							}, msg);
-						})
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						"data-demo-search-hint": true,
-						style: {
-							marginTop: 8,
-							textAlign: "center",
-							fontSize: 12,
-							color: MODAL_HINT
-						},
-						children: t("onboarding.demo.searchHint")
-					})
-				]
-			});
-		}
-		/**
-		* Step-3 demo: a static legend of the personalization controls (accent / size /
-		* distance / side / language / focus mix / pin), each with a tiny aria-hidden
-		* visual, plus the 展开箭头 → 齿轮 → 设置 path hint.
-		*/
-		function DemoSettings({ t, accent }) {
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				"data-demo-settings": true,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					style: {
-						display: "flex",
-						flexDirection: "column",
-						gap: 6
-					},
-					children: [
-						{
-							label: t("settings.accent"),
-							visual: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								"aria-hidden": "true",
-								style: {
-									width: 10,
-									height: 10,
-									borderRadius: "50%",
-									background: accent
-								}
-							})
-						},
-						{
-							label: t("settings.iconSize"),
-							visual: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
-								"aria-hidden": "true",
-								style: {
-									display: "flex",
-									alignItems: "flex-end",
-									gap: 2
-								},
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
-									width: 7,
-									height: 7,
-									borderRadius: "50%",
-									background: MODAL_HINT
-								} }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
-									width: 12,
-									height: 12,
-									borderRadius: "50%",
-									background: MODAL_TEXT
-								} })]
-							})
-						},
-						{
-							label: t("settings.inset"),
-							visual: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								"aria-hidden": "true",
-								style: {
-									width: 12,
-									height: 12,
-									border: `1px solid ${MODAL_BORDER}`,
-									borderRadius: 2
-								}
-							})
-						},
-						{
-							label: t("settings.side"),
-							visual: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								"aria-hidden": "true",
-								style: {
-									fontSize: 14,
-									color: MODAL_TEXT
-								},
-								children: "⇄"
-							})
-						},
-						{
-							label: t("settings.language"),
-							visual: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-								"aria-hidden": "true",
-								style: {
-									fontSize: 11,
-									color: MODAL_TEXT
-								},
-								children: "中 / EN"
-							})
-						},
-						{
-							label: t("onboarding.demo.focusMix"),
-							visual: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-								"aria-hidden": "true",
-								width: "14",
-								height: "10",
-								viewBox: "0 0 24 24",
-								fill: "none",
-								stroke: "currentColor",
-								strokeWidth: "2.5",
-								strokeLinecap: "round",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
-									cx: "12",
-									cy: "12",
-									r: "3"
-								})]
-							})
-						},
-						{
-							label: t("onboarding.demo.pin"),
-							visual: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-								"aria-hidden": "true",
-								width: "12",
-								height: "14",
-								viewBox: "0 0 24 24",
-								fill: "none",
-								stroke: "currentColor",
-								strokeWidth: "2",
-								strokeLinecap: "round",
-								strokeLinejoin: "round",
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 21v-4" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M7 4h10l-1.2 6.5a4.6 4.6 0 0 1-7.6 0z" })]
-							})
-						}
-					].map((row) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						"data-demo-legend-row": true,
-						style: {
-							display: "flex",
-							alignItems: "center",
-							gap: 10,
-							fontSize: 12.5,
-							color: MODAL_TEXT
-						},
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							style: {
-								width: 56,
-								flexShrink: 0,
-								display: "flex",
-								justifyContent: "center"
-							},
-							children: row.visual
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: row.label })]
-					}, row.label))
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					"data-demo-settings-path": true,
-					style: {
-						marginTop: 10,
-						textAlign: "center",
-						fontSize: 12,
-						color: MODAL_HINT
-					},
-					children: t("onboarding.demo.settingsPath")
-				})]
-			});
+		/** Rail root — every step's fallback anchor and bubble 4's target. */
+		function railRoot() {
+			return document.querySelector("[data-side]");
 		}
-		/** Step-4 demo: update-check pill + the four support links (repo/star/issues/npm). */
-		function DemoSupport({ t }) {
-			const linkStyle = {
-				display: "flex",
-				alignItems: "center",
-				justifyContent: "center",
-				padding: "7px 6px",
-				borderRadius: 8,
-				background: "rgba(255, 255, 255, 0.05)",
-				border: `1px solid ${MODAL_BORDER}`,
-				color: MODAL_TITLE,
-				fontSize: 11.5,
-				textDecoration: "none",
-				textAlign: "center",
-				lineHeight: 1.35
-			};
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				"data-demo-support": true,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					"data-demo-update-pill": true,
-					style: {
-						display: "inline-flex",
-						alignItems: "center",
-						gap: 6,
-						padding: "4px 10px",
-						borderRadius: 999,
-						background: "rgba(255, 255, 255, 0.06)",
-						border: `1px solid ${MODAL_BORDER}`,
-						color: MODAL_TEXT,
-						fontSize: 12
-					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-						"aria-hidden": "true",
-						style: {
-							width: 6,
-							height: 6,
-							borderRadius: "50%",
-							background: "var(--ms-accent)"
-						}
-					}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
-						t("update.title"),
-						" · v",
-						PLUGIN_VERSION
-					] })]
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					"data-demo-links": true,
-					style: {
-						display: "grid",
-						gridTemplateColumns: "repeat(4, minmax(0, 1fr))",
-						gap: 8,
-						marginTop: 12
-					},
-					children: [
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-							href: PLUGIN_REPO_URL,
-							target: "_blank",
-							rel: "noreferrer",
-							"data-demo-link": true,
-							"data-link": "repo",
-							style: linkStyle,
-							children: t("settings.repo")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-							href: PLUGIN_REPO_URL,
-							target: "_blank",
-							rel: "noreferrer",
-							"data-demo-link": true,
-							"data-link": "star",
-							style: linkStyle,
-							children: t("settings.star")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-							href: `${PLUGIN_REPO_URL}/issues`,
-							target: "_blank",
-							rel: "noreferrer",
-							"data-demo-link": true,
-							"data-link": "issues",
-							style: linkStyle,
-							children: t("settings.issues")
-						}),
-						/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-							href: PLUGIN_NPM_URL,
-							target: "_blank",
-							rel: "noreferrer",
-							"data-demo-link": true,
-							"data-link": "npm",
-							style: linkStyle,
-							children: t("settings.npm")
-						})
-					]
-				})]
-			});
+		const STEP_DEFS = [
+			{
+				titleKey: "tour.welcome.title",
+				descKey: "tour.welcome.desc",
+				anchor: () => document.querySelector("[data-rail-list]")
+			},
+			{
+				titleKey: "tour.step1.title",
+				descKey: "tour.step1.desc",
+				anchor: () => document.querySelector("[data-toolbar-expand]")
+			},
+			{
+				titleKey: "tour.step2.title",
+				descKey: "tour.step2.desc",
+				anchor: () => document.querySelector("[data-toolbar-settings]")
+			},
+			{
+				titleKey: "tour.step3.title",
+				descKey: "tour.step3.desc",
+				anchor: () => document.querySelector("[data-rail-dot]") ?? railRoot()
+			},
+			{
+				titleKey: "tour.step4.title",
+				descKey: "tour.step4.desc",
+				anchor: () => railRoot()
+			}
+		];
+		/** Clamp `value` into [min, max], never letting min exceed max. */
+		function clamp(value, min, max) {
+			return Math.min(Math.max(value, min), Math.max(min, max));
 		}
-		/**
-		* The tutorial dialog. `step` 0 = welcome; 1–4 = the step pages.
-		*
-		* Impressions persist: the moment the dialog mounts (welcome shown), the
-		* onboarded flag is written — closing mid-tour via refresh/crash/navigation
-		* never re-pops (ROADMAP 0.6.4: 印象即持久化). Every explicit close path
-		* (skip anywhere, finish, Escape) re-asserts the same `'1'` and then lets the
-		* parent unmount the modal.
-		*/
-		function MilestoneOnboarding({ t, accent, onClose }) {
+		function MilestoneTour({ t, side, toolbarExpanded, settingsOpen, onSetToolbarExpanded, onClose }) {
 			const [step, setStep] = (0, react.useState)(0);
-			const panelRef = (0, react.useRef)(null);
+			const [pos, setPos] = (0, react.useState)(null);
+			const bubbleRef = (0, react.useRef)(null);
+			const primaryRef = (0, react.useRef)(null);
+			const stepDef = STEP_DEFS[step];
 			(0, react.useEffect)(() => {
 				writeOnboardedFlag();
 			}, []);
@@ -2101,274 +1608,227 @@ window.__ModuleLoader__.load({
 				onClose();
 			}, [onClose]);
 			(0, react.useEffect)(() => {
+				if (settingsOpen) return;
 				const onKey = (e) => {
 					if (e.key !== "Escape") return;
 					finish();
 				};
 				window.addEventListener("keydown", onKey);
 				return () => window.removeEventListener("keydown", onKey);
-			}, [finish]);
+			}, [finish, settingsOpen]);
+			(0, react.useEffect)(() => {
+				if (step === 1 && toolbarExpanded) setStep(2);
+			}, [step, toolbarExpanded]);
+			(0, react.useEffect)(() => {
+				if (step === 2 && settingsOpen) setStep(3);
+			}, [step, settingsOpen]);
+			(0, react.useEffect)(() => {
+				if (step >= 2 && !toolbarExpanded) onSetToolbarExpanded(true);
+			}, [
+				step,
+				toolbarExpanded,
+				onSetToolbarExpanded
+			]);
+			/** Measure the current anchor and place the bubble on its free side. */
+			const measure = (0, react.useCallback)(() => {
+				const anchor = STEP_DEFS[step].anchor();
+				const bubble = bubbleRef.current;
+				if (anchor === null || bubble === null) {
+					setPos(null);
+					return;
+				}
+				const rect = anchor.getBoundingClientRect();
+				const bw = bubble.offsetWidth || TOUR_WIDTH;
+				const bh = bubble.offsetHeight || TOUR_HEIGHT_FALLBACK;
+				const left = clamp(side === "left" ? rect.right + TOUR_GAP : rect.left - TOUR_GAP - bw, VIEWPORT_PAD, window.innerWidth - bw - VIEWPORT_PAD);
+				const top = clamp(rect.top + rect.height / 2 - bh / 2, VIEWPORT_PAD, window.innerHeight - bh - VIEWPORT_PAD);
+				setPos({
+					left,
+					top
+				});
+			}, [step, side]);
+			(0, react.useLayoutEffect)(() => {
+				measure();
+				window.addEventListener("resize", measure);
+				return () => window.removeEventListener("resize", measure);
+			}, [
+				measure,
+				toolbarExpanded,
+				settingsOpen
+			]);
 			(0, react.useEffect)(() => {
-				panelRef.current?.querySelector("[data-onboarding-start], [data-onboarding-next], [data-onboarding-finish]")?.focus();
-			}, [step]);
-			const goNext = () => setStep((s) => Math.min(4, s + 1));
-			const goPrev = () => setStep((s) => Math.max(1, s - 1));
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-				"data-onboarding-overlay": true,
+				document.querySelectorAll("[data-tour-highlight]").forEach((el) => el.removeAttribute("data-tour-highlight"));
+				const anchor = STEP_DEFS[step].anchor();
+				if (anchor !== null) anchor.setAttribute("data-tour-highlight", "");
+				return () => {
+					document.querySelectorAll("[data-tour-highlight]").forEach((el) => el.removeAttribute("data-tour-highlight"));
+				};
+			}, [
+				step,
+				toolbarExpanded,
+				settingsOpen
+			]);
+			(0, react.useEffect)(() => {
+				if (settingsOpen) return;
+				primaryRef.current?.focus();
+			}, [step, settingsOpen]);
+			const goNext = () => setStep((s) => Math.min(STEP_COUNT.length - 1, s + 1));
+			const goPrev = () => setStep((s) => Math.max(0, s - 1));
+			if (settingsOpen) return null;
+			const isLast = step === STEP_COUNT.length - 1;
+			const primaryLabel = step === 0 || isLast ? t("tour.start") : t("tour.next");
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: bubbleRef,
+				"data-tour-bubble": true,
+				"data-tour-step": step,
+				role: "dialog",
+				"aria-label": t(stepDef.titleKey),
 				style: {
 					position: "fixed",
-					inset: 0,
-					background: "rgba(8, 10, 15, 0.55)",
-					zIndex: ONBOARDING_Z,
-					display: "flex",
-					alignItems: "center",
-					justifyContent: "center",
-					padding: 16
+					left: pos?.left,
+					top: pos?.top,
+					width: TOUR_WIDTH,
+					maxWidth: "calc(100vw - 24px)",
+					boxSizing: "border-box",
+					zIndex: TOUR_Z,
+					padding: 14,
+					background: MODAL_TIP_BG,
+					color: MODAL_FG,
+					borderRadius: 12,
+					border: `1px solid ${MODAL_BORDER}`,
+					boxShadow: "0 12px 36px rgba(0, 0, 0, 0.45)"
 				},
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-					ref: panelRef,
-					"data-onboarding-panel": true,
-					role: "dialog",
-					"aria-modal": "true",
-					"aria-label": t("onboarding.welcome.title"),
-					onClick: (e) => e.stopPropagation(),
-					style: {
-						width: "min(560px, 92vw)",
-						maxHeight: "80vh",
-						overflowY: "auto",
-						padding: 20,
-						background: MODAL_BG,
-						color: MODAL_FG,
-						borderRadius: 12,
-						boxShadow: "0 24px 64px rgba(0, 0, 0, 0.55)",
-						scrollbarWidth: "thin",
-						scrollbarColor: "rgba(255, 255, 255, 0.2) transparent"
-					},
-					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: ONBOARDING_CSS }), step === 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						"data-onboarding-welcome": true,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: TOUR_CSS }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							alignItems: "flex-start",
+							justifyContent: "space-between",
+							gap: 8
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							"data-tour-title": true,
+							style: {
+								fontSize: 14,
+								fontWeight: 700,
+								color: MODAL_FG,
+								lineHeight: 1.35
+							},
+							children: t(stepDef.titleKey)
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							"data-tour-skip": true,
+							onClick: finish,
+							style: {
+								flexShrink: 0,
+								background: "transparent",
+								border: "none",
+								padding: "2px 6px",
+								borderRadius: 8,
+								cursor: "pointer",
+								color: MODAL_HINT,
+								fontSize: 12,
+								lineHeight: 1.4
+							},
+							children: t("tour.skip")
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-tour-desc": true,
+						style: {
+							marginTop: 6,
+							fontSize: 12.5,
+							lineHeight: 1.5,
+							color: MODAL_TEXT
+						},
+						children: t(stepDef.descKey)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "space-between",
+							gap: 10,
+							marginTop: 12
+						},
 						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								"data-onboarding-welcome-title": true,
-								style: {
-									fontSize: 17,
-									fontWeight: 700,
-									color: MODAL_FG
-								},
-								children: t("onboarding.welcome.title")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								"data-onboarding-welcome-subtitle": true,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								"data-tour-prev": true,
+								disabled: step === 0,
+								onClick: goPrev,
 								style: {
-									marginTop: 8,
-									fontSize: 13,
-									lineHeight: 1.65,
-									color: MODAL_TEXT
+									flexShrink: 0,
+									background: "rgba(255, 255, 255, 0.06)",
+									border: `1px solid ${MODAL_BORDER}`,
+									borderRadius: 8,
+									padding: "5px 12px",
+									cursor: step === 0 ? "default" : "pointer",
+									color: step === 0 ? MODAL_HINT : MODAL_TEXT,
+									fontSize: 12,
+									lineHeight: 1.4,
+									opacity: step === 0 ? .55 : 1
 								},
-								children: t("onboarding.welcome.subtitle")
+								children: t("tour.prev")
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								"data-onboarding-welcome-actions": true,
-								style: {
-									display: "flex",
-									justifyContent: "center",
-									gap: 10,
-									marginTop: 18
-								},
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									"data-onboarding-start": true,
-									onClick: () => setStep(1),
-									style: PRIMARY_BUTTON,
-									children: t("onboarding.start")
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									"data-onboarding-skip": true,
-									onClick: finish,
-									style: GHOST_BUTTON,
-									children: t("onboarding.skip")
-								})]
-							})
-						]
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						"data-onboarding-step": true,
-						"data-step": step,
-						children: [
 							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 								style: {
 									display: "flex",
-									alignItems: "flex-start",
-									justifyContent: "space-between",
-									gap: 10
+									flexDirection: "column",
+									alignItems: "center",
+									gap: 5,
+									minWidth: 74
 								},
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									"data-onboarding-step-title": true,
+								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									"data-tour-progress": true,
 									style: {
-										fontSize: 15,
-										fontWeight: 600,
-										color: MODAL_FG
+										fontSize: 11.5,
+										color: MODAL_HINT,
+										lineHeight: 1.2
 									},
-									children: [
-										step === 1 && t("onboarding.step1.title"),
-										step === 2 && t("onboarding.step2.title"),
-										step === 3 && t("onboarding.step3.title"),
-										step === 4 && t("onboarding.step4.title")
-									]
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-									type: "button",
-									"data-onboarding-skip": true,
-									onClick: finish,
-									style: SKIP_BUTTON,
-									children: t("onboarding.skip")
+									children: t("tour.step.label", { n: step + 1 })
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									style: {
+										display: "flex",
+										gap: 4
+									},
+									children: STEP_COUNT.map((n) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										"data-tour-progress-dot": true,
+										"data-active": step === n ? "true" : void 0,
+										"aria-label": t("tour.step.short", { n: n + 1 }),
+										"aria-current": step === n ? "step" : void 0,
+										style: {
+											width: 14,
+											height: 4,
+											borderRadius: 2,
+											background: step === n ? "var(--ms-accent)" : "rgba(255, 255, 255, 0.18)"
+										}
+									}, n))
 								})]
 							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								style: {
-									display: "flex",
-									flexDirection: "column",
-									gap: 6,
-									marginTop: 10
-								},
-								children: [
-									step === 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											"data-onboarding-step-desc": true,
-											"data-desc": "1",
-											children: t("onboarding.step1.desc1")
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											"data-onboarding-step-desc": true,
-											"data-desc": "2",
-											children: t("onboarding.step1.desc2")
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											"data-onboarding-step-desc": true,
-											"data-desc": "3",
-											children: t("onboarding.step1.desc3")
-										})
-									] }),
-									step === 2 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										"data-onboarding-step-desc": true,
-										"data-desc": "1",
-										children: t("onboarding.step2.desc1")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										"data-onboarding-step-desc": true,
-										"data-desc": "2",
-										children: t("onboarding.step2.desc2")
-									})] }),
-									step === 3 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										"data-onboarding-step-desc": true,
-										"data-desc": "1",
-										children: t("onboarding.step3.desc1")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										"data-onboarding-step-desc": true,
-										"data-desc": "2",
-										children: t("onboarding.step3.desc2")
-									})] }),
-									step === 4 && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										"data-onboarding-step-desc": true,
-										"data-desc": "1",
-										children: t("onboarding.step4.desc1")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										"data-onboarding-step-desc": true,
-										"data-desc": "2",
-										children: t("onboarding.step4.desc2")
-									})] })
-								]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								"data-onboarding-demo": true,
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+								type: "button",
+								ref: primaryRef,
+								"data-tour-primary": true,
+								onClick: isLast ? finish : goNext,
 								style: {
-									marginTop: 14,
-									padding: 12,
+									flexShrink: 0,
+									background: "var(--ms-accent-bg)",
+									color: "var(--ms-accent-soft)",
+									border: "1px solid var(--ms-accent)",
 									borderRadius: 8,
-									background: MODAL_TIP_BG,
-									border: `1px solid ${MODAL_BORDER}`
-								},
-								children: [
-									step === 1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DemoDotRail, {
-										t,
-										accent
-									}),
-									step === 2 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DemoSearch, {
-										t,
-										accent
-									}),
-									step === 3 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DemoSettings, {
-										t,
-										accent
-									}),
-									step === 4 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DemoSupport, { t })
-								]
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
-								style: {
-									display: "flex",
-									alignItems: "center",
-									justifyContent: "space-between",
-									gap: 12,
-									marginTop: 16
+									padding: "5px 14px",
+									cursor: "pointer",
+									fontSize: 12.5,
+									fontWeight: 600,
+									lineHeight: 1.4
 								},
-								children: [
-									/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										"data-onboarding-prev": true,
-										onClick: goPrev,
-										disabled: step === 1,
-										style: GHOST_BUTTON,
-										children: t("onboarding.prev")
-									}),
-									/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										style: {
-											display: "flex",
-											flexDirection: "column",
-											alignItems: "center",
-											gap: 6
-										},
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											"data-onboarding-progress": true,
-											style: {
-												fontSize: 12,
-												color: MODAL_HINT
-											},
-											children: t("onboarding.step.label", { n: step })
-										}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-											style: {
-												display: "flex",
-												gap: 5
-											},
-											children: STEP_COUNT.map((n) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-												"data-onboarding-progress-dot": true,
-												"data-active": step === n ? "true" : void 0,
-												"aria-label": t("onboarding.step.short", { n }),
-												"aria-current": step === n ? "step" : void 0,
-												style: {
-													width: 16,
-													height: 4,
-													borderRadius: 2,
-													background: step === n ? "var(--ms-accent)" : "rgba(255, 255, 255, 0.18)",
-													transition: "background 120ms ease, width 120ms ease"
-												}
-											}, n))
-										})]
-									}),
-									step < 4 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										"data-onboarding-next": true,
-										onClick: goNext,
-										style: PRIMARY_BUTTON,
-										children: t("onboarding.next")
-									}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-										type: "button",
-										"data-onboarding-finish": true,
-										onClick: finish,
-										style: PRIMARY_BUTTON,
-										children: t("onboarding.finish")
-									})
-								]
+								children: primaryLabel
 							})
 						]
-					})]
-				})
+					})
+				]
 			});
 		}
 		//#endregion
@@ -2415,10 +1875,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",
@@ -3317,6 +2774,13 @@ window.__ModuleLoader__.load({
 			return fresh;
 		}
 		//#endregion
+		//#region src/client/version-meta.ts
+		/**
+		* 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";
+		//#endregion
 		//#region src/client/MilestoneRail.tsx
 		/**
 		* MilestoneRail: the milestone.rail entry (session scope). Renders a fixed
@@ -3499,6 +2963,14 @@ window.__ModuleLoader__.load({
 [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); }
+/* 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-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,
@@ -3579,8 +3051,8 @@ window.__ModuleLoader__.load({
 		/** B4 update-check: mount-time silent check delay (ms) — give the harness
 		* time to settle before hitting the registry. */
 		const UPDATE_CHECK_MOUNT_DELAY = 1500;
-		/** 0.6.4 first-run tutorial: mount-time show delay (ms) — let the rail settle
-		* before the onboarding modal pops. */
+		/** 0.6.5 first-run coach tour: mount-time show delay (ms) — let the rail settle
+		* before the first bubble pops. */
 		const ONBOARDING_MOUNT_DELAY = 800;
 		/** Initial state: no check has completed yet, nothing to show. */
 		const NO_UPDATE_CHECK = {
@@ -3687,6 +3159,8 @@ 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);
@@ -3739,6 +3213,7 @@ 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 scale = iconSize / DOT_HIT;
@@ -3809,7 +3284,8 @@ window.__ModuleLoader__.load({
 			const [expandHovered, setExpandHovered] = (0, react.useState)(false);
 			const [settingsHovered, setSettingsHovered] = (0, react.useState)(false);
 			const [settingsOpen, setSettingsOpen] = (0, react.useState)(false);
-			const [onboardingOpen, setOnboardingOpen] = (0, react.useState)(false);
+			const [tourOpen, setTourOpen] = (0, react.useState)(false);
+			const [tourRun, setTourRun] = (0, react.useState)(0);
 			/** The feature whose near-row description tip is currently visible
 			* (`null` = none — tips only appear on hover/focus of their own row). */
 			const [descFeature, setDescFeature] = (0, react.useState)(null);
@@ -3891,7 +3367,7 @@ window.__ModuleLoader__.load({
 			}, []);
 			(0, react.useEffect)(() => {
 				const timer = window.setTimeout(() => {
-					if (!readOnboardedFlag()) setOnboardingOpen(true);
+					if (!readOnboardedFlag()) setTourOpen(true);
 				}, ONBOARDING_MOUNT_DELAY);
 				return () => window.clearTimeout(timer);
 			}, []);
@@ -4009,6 +3485,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({
@@ -4058,12 +3550,14 @@ window.__ModuleLoader__.load({
 				setSettingsOpen(false);
 				settingsBtnRef.current?.focus();
 			};
-			/** 0.6.4: settings → 重新查看教程 — close settings and replay the tutorial
-			* immediately (the flag may or may not be set; skipping/completing it
-			* re-persists the flag anyway). */
-			const reopenOnboarding = () => {
+			/** 0.6.5: settings → 重新查看教程 — close settings and replay the coach
+			* tour immediately (the flag may or may not be set; skipping/completing it
+			* re-persists the flag anyway). The `tourRun` bump remounts the tour so the
+			* replay always restarts from bubble 0. */
+			const reopenTour = () => {
 				setSettingsOpen(false);
-				setOnboardingOpen(true);
+				setTourRun((n) => n + 1);
+				setTourOpen(true);
 			};
 			/** B1: a feature renders while the toolbar is EXPANDED or while it is pinned. */
 			const featureVisible = (id) => toolbarExpanded || pinned.includes(id);
@@ -4385,11 +3879,20 @@ window.__ModuleLoader__.load({
 					}
 				}
 				const meta = deriveTurnMeta(nodes, locations, mark.turn, trajectoryRequests);
+				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,
@@ -5345,7 +4848,7 @@ window.__ModuleLoader__.load({
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
 										"data-onboarding-reopen": true,
-										onClick: reopenOnboarding,
+										onClick: reopenTour,
 										style: {
 											padding: "7px 16px",
 											border: `1px solid rgba(255, 255, 255, 0.14)`,
@@ -5354,17 +4857,20 @@ window.__ModuleLoader__.load({
 											color: "#b9c2d4",
 											fontSize: 12.5
 										},
-										children: t("onboarding.reopen")
+										children: t("tour.reopen")
 									})]
 								})
 							]
 						})
 					}),
-					onboardingOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MilestoneOnboarding, {
+					tourOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MilestoneTour, {
 						t,
-						accent,
-						onClose: () => setOnboardingOpen(false)
-					}),
+						side,
+						toolbarExpanded,
+						settingsOpen,
+						onSetToolbarExpanded: setToolbarExpanded,
+						onClose: () => setTourOpen(false)
+					}, tourRun),
 					updateOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						ref: updatePanelRef,
 						"data-update-panel": true,
@@ -5401,7 +4907,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.4" })] }),
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "0.6.6" })] }),
 								updateCheck.phase === "ok" && updateCheck.latest !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									"data-update-latest": true,
 									children: [
@@ -5506,6 +5012,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, {
@@ -5589,7 +5097,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,
@@ -5602,7 +5110,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",
@@ -5613,7 +5121,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);
 						})