dsh-milestone 0.6.1 → 0.6.3

package/lib/client.js

@@ -19,8 +19,105 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/accent-utils.ts
+		/** True for a canonical 6-digit hex color (`#4d7cfd`, `#4D7CFD`). */
+		function isHexColor(value) {
+			return /^#[0-9a-fA-F]{6}$/.test(value);
+		}
+		/**
+		* Parse a hex color into channels.
+		* @param hex - `#rrggbb` (case-insensitive).
+		* @returns the RGB channels, or null when `hex` is not a canonical hex color.
+		*/
+		function hexToRgb(hex) {
+			if (!isHexColor(hex)) return null;
+			const n = parseInt(hex.slice(1), 16);
+			return {
+				r: n >> 16 & 255,
+				g: n >> 8 & 255,
+				b: n & 255
+			};
+		}
+		/** Format an alpha to the short decimal form the rail's inline styles use (0.55, 0.2). */
+		function formatAlpha(alpha) {
+			return Math.round(Math.max(0, Math.min(1, alpha)) * 100) / 100;
+		}
+		/**
+		* Color with alpha as a CSS `rgba(r, g, b, a)` string; alpha clamps to [0, 1].
+		* @returns the rgba() string, or null when `hex` is invalid.
+		*/
+		function rgbaString(hex, alpha) {
+			const rgb = hexToRgb(hex);
+			if (rgb === null) return null;
+			return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${formatAlpha(alpha)})`;
+		}
+		/**
+		* Linear mix of two hex colors in RGB space.
+		* @param a - start color (t = 0).
+		* @param b - end color (t = 1).
+		* @param t - mix factor, clamped to [0, 1].
+		* @returns the mixed `#rrggbb`, or null when either input is invalid.
+		*/
+		function mixHex(a, b, t) {
+			const ca = hexToRgb(a);
+			const cb = hexToRgb(b);
+			if (ca === null || cb === null) return null;
+			const k = Math.max(0, Math.min(1, t));
+			const channel = (from, to) => Math.round(from + (to - from) * k).toString(16).padStart(2, "0");
+			return `#${channel(ca.r, cb.r)}${channel(ca.g, cb.g)}${channel(ca.b, cb.b)}`;
+		}
+		/**
+		* Lighten a hex color toward white — the rail's "accent soft" text shade
+		* (t = 0 keeps the color, t = 1 is white).
+		*/
+		function lighten(hex, t) {
+			return mixHex(hex, "#ffffff", t);
+		}
+		/**
+		* Convert a hex color to HSL. Double-checked against the standard RGB→HSL
+		* formulas; saturation/lightness are percentages, hue is degrees.
+		* @returns the HSL channels, or null when `hex` is invalid.
+		*/
+		function hexToHsl(hex) {
+			const rgb = hexToRgb(hex);
+			if (rgb === null) return null;
+			const r = rgb.r / 255;
+			const g = rgb.g / 255;
+			const b = rgb.b / 255;
+			const max = Math.max(r, g, b);
+			const min = Math.min(r, g, b);
+			const delta = max - min;
+			let h = 0;
+			if (delta !== 0) if (max === r) h = 60 * ((g - b) / delta % 6);
+			else if (max === g) h = 60 * ((b - r) / delta + 2);
+			else h = 60 * ((r - g) / delta + 4);
+			if (h < 0) h += 360;
+			const l = (max + min) / 2;
+			const s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+			return {
+				h,
+				s: s * 100,
+				l: l * 100
+			};
+		}
+		//#endregion
 		//#region src/client/badge-logic.ts
 		/**
+		* Pure turn-health badge derivation + styling for the milestone rail: given
+		* the harness snapshot signals, decide which (if any) colored glow a mark's
+		* dot should wear, plus the style tokens for that badge.
+		*
+		* Rendering contract (M-design change): a badge is NO LONGER a hard 2px ring
+		* (border) — it is a concentric "soft glow" made of three layered box-shadows
+		* (a crisp inner ring at 55% alpha, then two blurred blooms), and the
+		* running/awaiting pulse breathes opacity + shadow intensity instead of
+		* expanding a ring. The `data-badge` value and the semantic color of every
+		* kind are unchanged.
+		*
+		* All functions are side-effect free (no React, no DOM) so the rail component
+		* can consume them directly and tests can exercise them in isolation.
+		*/
+		/**
 		* Derive the badge for one mark.
 		*
 		* Precedence: error > max-tokens > retry > running > awaiting. Node-derived
@@ -65,13 +162,41 @@ window.__ModuleLoader__.load({
 				pulse: true
 			}
 		};
+		/** Build the layered soft-glow shadow for a badge color. */
+		function glowShadow(color) {
+			const layer = (alpha) => rgbaString(color, alpha) ?? "currentColor";
+			return [
+				`0 0 0 2px ${layer(.55)}`,
+				`0 0 8px 2px ${layer(.45)}`,
+				`0 0 16px 5px ${layer(.2)}`
+			].join(", ");
+		}
 		/**
 		* Style tokens for a badge kind.
 		* @param badge - the derived badge kind.
-		* @returns the ring color and whether the dot should pulse.
+		* @returns the glow color, whether the dot should pulse (breathing glow), and
+		*   the static multi-layer box-shadow string for the badge span.
 		*/
 		function badgeRingStyle(badge) {
-			return RING_STYLES[badge];
+			const base = RING_STYLES[badge];
+			return {
+				...base,
+				shadow: glowShadow(base.color)
+			};
+		}
+		/**
+		* Breathing-glow keyframes for one badge color. The rail injects this (via an
+		* inline <style>) only while a pulsing badge is on screen — the color is baked
+		* into the alphas, so the animation needs no runtime var lookups. Both stops
+		* keep the SAME three-layer shape (only alpha/blur breathe), so the glow never
+		* looks like the old expanding ring.
+		*/
+		function badgePulseCss(color) {
+			const layer = (alpha) => rgbaString(color, alpha) ?? "currentColor";
+			return `@keyframes milestone-badge-pulse {
+  0%, 100% { opacity: 0.95; box-shadow: ${`0 0 0 2px ${layer(.55)}, 0 0 8px 2px ${layer(.45)}, 0 0 16px 5px ${layer(.2)}`}; }
+  50% { opacity: 0.45; box-shadow: ${`0 0 0 2px ${layer(.35)}, 0 0 4px 1px ${layer(.25)}, 0 0 9px 3px ${layer(.12)}`}; }
+}`;
 		}
 		//#endregion
 		//#region src/client/bookmark-logic.ts
@@ -349,6 +474,13 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/rail-logic.ts
 		/**
+		* Pure rail logic for the milestone rail: full-text search matching, current-
+		* position highlight, match-cycle navigation, mark visual state, and dot color.
+		*
+		* All functions are side-effect free (no React, no DOM) so the rail component
+		* can consume them directly and tests can exercise them in isolation.
+		*/
+		/**
 		* 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
@@ -427,14 +559,366 @@ window.__ModuleLoader__.load({
 			if (opts.hasQuery) return "dimmed";
 			return "normal";
 		}
+		/** The default accent (the classic milestone blue) — dotColor's fallback. */
+		const DEFAULT_DOT_ACCENT = "#4d7cfd";
 		/**
-		* Blue gradient dot color, reproduced exactly from MilestoneRail: newest
-		* (highest index) is deepest, oldest is lightest. 72% lightness fading to 45%.
+		* Accent-driven gradient dot color: hue/saturation come from the user's
+		* accent (settings 强调色), lightness walks 72% → 45% (newest/highest index
+		* deepest, oldest lightest — the original gradient shape). Invalid accents
+		* degrade to the default blue.
 		* @param index - dot position in the rail (0 = oldest).
 		* @param total - number of dots.
+		* @param accent - the accent hex (`#rrggbb`); defaults to the classic blue.
+		*/
+		function dotColor(index, total, accent = DEFAULT_DOT_ACCENT) {
+			const hsl = hexToHsl(accent) ?? hexToHsl("#4d7cfd");
+			const lightness = 72 - (total <= 1 ? 0 : index / (total - 1)) * 27;
+			return `hsl(${Math.round(hsl.h)}, ${Math.round(hsl.s)}%, ${lightness}%)`;
+		}
+		//#endregion
+		//#region src/client/locales.ts
+		/**
+		* UI strings for the milestone rail, keyed flat (single-language-per-key,
+		* no nesting) so the later i18n threading stays a mechanical
+		* `value.replace('{name}', n)` substitution.
+		*
+		* `zh` is the source of truth and the key registry: it byte-matches the
+		* current hardcoded output of MilestoneRail / MilestoneRailTooltip /
+		* MilestoneRailSearch exactly (each `{n}`/`{m}`/`{name}` slot stands in for
+		* the interpolated number or label), so swapping in these templates is
+		* behavior-preserving. `en` is typed `Record<MilestoneKey, string>` so a
+		* missing English translation is a compile error, not a runtime miss.
+		*/
+		const zh = {
+			/** aria-label on each dot: `跳转到第 ${i + 1} 条消息`. */
+			"jump.to": "跳转到第 {n} 条消息",
+			/** Load-older coverage hint: `已显示 {marks.length} 条 · 还有更早`. */
+			"window.hint": "已显示 {n} 条 · 还有更早",
+			/** Hover turn badge: `第 ${mark.turn} 轮`. */
+			"turn.label": "第 {n} 轮",
+			/** Hover position: `第 {hover.index + 1} / {hover.total} 条`. */
+			"pos.of": "第 {n} / {m} 条",
+			/** Search input placeholder. */
+			"search.placeholder": "搜索消息内容",
+			/** aria-label on the search toggle button and the search input. */
+			"search.label": "搜索消息",
+			/** aria-label on the bookmarks-only filter toggle. */
+			"bookmark.filter": "只看收藏",
+			/** aria-label + title on the focus-mode toggle when focus is OFF (arm it). */
+			"focus.on": "聚焦模式",
+			/** aria-label + title on the focus-mode toggle when focus is ON (disarm it). */
+			"focus.off": "退出聚焦",
+			/** aria-label on the hover tooltip star toggle. */
+			"bookmark.star": "收藏此消息",
+			/** aria-label on the search clear button. */
+			"search.clear": "清空搜索",
+			/** title + aria-label on the load-older `···` button. */
+			"load.older": "加载更早消息",
+			/** aria-label on the rail root. */
+			"rail.label": "会话里程碑",
+			/** aria-label on the dot list. */
+			"rail.list": "会话里程碑列表",
+			/** Hover preview fallback for empty message text. */
+			"no.text": "（无文本）",
+			/** Relative time: `< 60s`. */
+			"time.justNow": "刚刚",
+			/** Relative time: `< 1h`. */
+			"time.minutes": "{n} 分钟前",
+			/** Relative time: `< 1d`. */
+			"time.hours": "{n} 小时前",
+			/** Relative time: `>= 1d`. */
+			"time.days": "{n} 天前",
+			/** Hover duration: `用时 {durationLabel}`. */
+			"duration.label": "用时 {name}",
+			/** Hover TTFT: `首字 {ttftLabel}`. */
+			"ttft.label": "首字 {name}",
+			/** TurnEndReason `completed`. */
+			"reason.completed": "已完成",
+			/** TurnEndReason `aborted`. */
+			"reason.aborted": "已中止",
+			/** TurnEndReason `error`. */
+			"reason.error": "出错",
+			/** TurnEndReason `max-tokens`. */
+			"reason.maxTokens": "达到上限",
+			/** TurnEndReason `interrupted`. */
+			"reason.interrupted": "已中断",
+			/** TurnEndReason `blocked`. */
+			"reason.blocked": "已阻塞",
+			/** Copy-message tooltip action. */
+			"copy.message": "复制消息",
+			/** Fork-from-here tooltip action. */
+			"fork.here": "从此处 fork",
+			/** Collapse-turn tooltip action. */
+			"collapse.turn": "折叠此轮",
+			/** Expand-turn tooltip action. */
+			"expand.turn": "展开此轮",
+			/** aria-label + title on the milestone-list toggle when the panel is CLOSED. */
+			"list.open": "打开列表",
+			/** aria-label + title on the milestone-list toggle when the panel is OPEN. */
+			"list.close": "收起列表",
+			/** Header title of the all-prompts list panel. */
+			"list.label": "全部提问",
+			/** 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. */
+			"search.cross.open": "打开跨会话搜索",
+			/** aria-label + title on the cross-session search toggle when the panel is OPEN. */
+			"search.cross.close": "收起跨会话搜索",
+			/** Cross-session result row title fallback for sessions with no display title. */
+			"search.untitled": "（无标题）",
+			/** Cross-session search failure notice. */
+			"search.error": "搜索失败，请重试",
+			/** Cross-session search footer hint when the harness capped the result list. */
+			"search.more": "结果已截断，请细化关键词",
+			/** aria-label on the toolbar expand arrow while the toolbar is COLLAPSED (expand it). */
+			"toolbar.expand": "展开工具栏",
+			/** aria-label on the toolbar expand arrow while the toolbar is EXPANDED (collapse it). */
+			"toolbar.collapse": "收起工具栏",
+			/** aria-label on the toolbar settings gear while the settings menu is CLOSED. */
+			"toolbar.settings.open": "打开设置",
+			/** aria-label on the toolbar settings gear while the settings menu is OPEN. */
+			"toolbar.settings.close": "关闭设置",
+			/** Header title of the toolbar settings menu. */
+			"settings.title": "设置",
+			/** Per-feature toggle label inside the settings menu: keep visible while collapsed. */
+			"settings.pin": "在折叠外显示",
+			/** Settings: feature-section hint explaining what the pin switch does. */
+			"settings.pin.hint": "开启后，工具栏折叠时该功能仍显示在箭头旁",
+			/** Settings action that clears every pinned feature. */
+			"settings.reset": "恢复默认",
+			/** Settings footer heading above the project links. */
+			"settings.support": "支持我们",
+			/** Settings footer link: the GitHub repository. */
+			"settings.repo": "GitHub 仓库",
+			/** Settings footer link: star the repository. */
+			"settings.star": "欢迎 Star ★",
+			/** Settings footer link: file an issue. */
+			"settings.issues": "提交 Issue",
+			/** Settings footer link: the npm install channel. */
+			"settings.npm": "npm 安装渠道",
+			/** Settings: feature-row name of the settings key itself (registry row). */
+			"settings.label": "设置",
+			/** aria-label on the settings modal close button. */
+			"settings.close": "关闭",
+			/** Settings modal: section heading for the feature pin rows. */
+			"settings.section.features": "功能与快捷区",
+			/** Settings modal: section heading for the personalization controls. */
+			"settings.section.personal": "个性化",
+			/** Settings modal: section heading for the focus-mode controls (0.6.3). */
+			"settings.section.focus": "聚焦",
+			/** Settings: personalization-section hint shown inside the expanded block. */
+			"settings.personal.hint": "圆点、强调色与位置，即调即存",
+			/** Settings: aria-label on the personalization block toggle while COLLAPSED. */
+			"settings.personal.expand": "展开个性化设置",
+			/** Settings: aria-label on the personalization block toggle while EXPANDED. */
+			"settings.personal.collapse": "收起个性化设置",
+			/** Settings: live value summary on the collapsed personalization header. */
+			"settings.personal.summary": "{accent} · 图标 {icon}px · {side}",
+			/** Settings: hover description — in-rail search. */
+			"settings.desc.search": "按完整消息内容过滤并跳转到对应消息",
+			/** Settings: hover description — all-prompts list. */
+			"settings.desc.list": "本会话全部提问一览",
+			/** Settings: hover description — cross-session search. */
+			"settings.desc.sessionSearch": "跨会话搜索所有会话",
+			/** Settings: hover description — bookmarks filter. */
+			"settings.desc.bookmarks": "只显示已收藏的消息",
+			/** Settings: hover description — focus mode. */
+			"settings.desc.focus": "淡化 AI 思考块，阅读更清爽",
+			/** Settings: hover description — update check. */
+			"settings.desc.updateCheck": "检查 npm 是否有新版本",
+			/** Settings: hover description — the settings key itself. */
+			"settings.desc.settings": "自定义工具栏与外观",
+			/** Settings personalization: accent color row label. */
+			"settings.accent": "强调色",
+			/** Settings personalization: custom color swatch label. */
+			"settings.custom": "自定义",
+			/** Settings personalization: icon/dot size slider label. */
+			"settings.iconSize": "图标 / 圆点大小",
+			/** Settings personalization: edge-distance slider label. */
+			"settings.inset": "距侧边距离",
+			/** Settings personalization: rail side row label. */
+			"settings.side": "位置",
+			/** Settings personalization: side radio — hug the left edge. */
+			"settings.side.left": "左侧",
+			/** Settings personalization: side radio — hug the right edge. */
+			"settings.side.right": "右侧",
+			/** Settings: focus block — hint shown inside the expanded block. */
+			"settings.focus.hint": "这些选项自由组合成你的「聚焦搭配」；总开关仍是工具栏的眼睛按钮",
+			/** Settings: aria-label on the focus block toggle while COLLAPSED. */
+			"settings.focus.expand": "展开聚焦设置",
+			/** Settings: aria-label on the focus block toggle while EXPANDED. */
+			"settings.focus.collapse": "收起聚焦设置",
+			/** Settings: focus option — dim the think reasoning disclosures. */
+			"settings.focus.dimThink": "淡化 think 推理区",
+			/** Settings: focus option — dim the tool-call cards. */
+			"settings.focus.dimTools": "淡化工具调用卡片",
+			/** Settings: focus option — compress think disclosures to a hover strip. */
+			"settings.focus.collapseThink": "折叠 think",
+			/** Settings: focus option — dim strength slider label. */
+			"settings.focus.opacity": "淡化强度",
+			/** Settings: live value summary on the collapsed focus header. */
+			"settings.focus.summary": "{opts} · 强度 {opacity}%",
+			/** Settings: focus summary — short label for the think-dim option. */
+			"settings.focus.summary.think": "think 淡化",
+			/** Settings: focus summary — short label for the tool-dim option. */
+			"settings.focus.summary.tools": "工具淡化",
+			/** Settings: focus summary — short label for the think-collapse option. */
+			"settings.focus.summary.collapse": "折叠 think",
+			/** Settings: focus summary — placeholder when every option is off. */
+			"settings.focus.summary.none": "未启用",
+			/** B4 update-check: toolbar button label + title/aria-label. */
+			"update.check": "检查更新",
+			/** B4 update-check: popover title. */
+			"update.title": "更新检测",
+			/** B4 update-check: installed-version row label. */
+			"update.current": "当前版本",
+			/** B4 update-check: newest-published-version row label. */
+			"update.latest": "最新版本",
+			/** B4 update-check: conclusion when the installed version is current. */
+			"update.upToDate": "已是最新版本",
+			/** B4 update-check: conclusion when a newer version exists. */
+			"update.available": "发现新版本",
+			/** B4 update-check: link text for the npm upgrade channel. */
+			"update.goNpm": "去 npm 升级",
+			/** B4 update-check: supported-host-lines metadata row label. */
+			"update.hostLines": "已适配官方版本线",
+			/** B4 update-check: in-flight state of the manual check button. */
+			"update.checking": "检查中…",
+			/** B4 update-check: failed state heading. */
+			"update.failed": "检查失败",
+			/** B4 update-check: retry action inside the failed state. */
+			"update.retry": "重试",
+			/** Settings modal section title: language. */
+			"settings.language": "语言",
+			/** Language option: follow the harness UI language. */
+			"settings.lang.system": "跟随系统",
+			/** Language option: force Chinese copy. */
+			"settings.lang.zh": "中文",
+			/** Language option: force English copy. */
+			"settings.lang.en": "English"
+		};
+		const en = {
+			"jump.to": "Jump to message {n}",
+			"window.hint": "Showing {n} messages · more below",
+			"turn.label": "Turn {n}",
+			"pos.of": "Message {n} of {m}",
+			"search.placeholder": "Search message content",
+			"search.label": "Search messages",
+			"bookmark.filter": "Bookmarks only",
+			"focus.on": "Focus mode",
+			"focus.off": "Exit focus",
+			"bookmark.star": "Bookmark this message",
+			"search.clear": "Clear search",
+			"load.older": "Load older messages",
+			"rail.label": "Session milestones",
+			"rail.list": "Session milestone list",
+			"no.text": "(no text)",
+			"time.justNow": "Just now",
+			"time.minutes": "{n} minutes ago",
+			"time.hours": "{n} hours ago",
+			"time.days": "{n} days ago",
+			"duration.label": "Duration {name}",
+			"ttft.label": "First token {name}",
+			"reason.completed": "Completed",
+			"reason.aborted": "Aborted",
+			"reason.error": "Error",
+			"reason.maxTokens": "Max tokens reached",
+			"reason.interrupted": "Interrupted",
+			"reason.blocked": "Blocked",
+			"copy.message": "Copy message",
+			"fork.here": "Fork from here",
+			"collapse.turn": "Collapse turn",
+			"expand.turn": "Expand turn",
+			"list.open": "Open list",
+			"list.close": "Close list",
+			"list.label": "All prompts",
+			"search.cross": "Cross-session search",
+			"search.cross.open": "Open cross-session search",
+			"search.cross.close": "Close cross-session search",
+			"search.untitled": "(untitled)",
+			"search.error": "Search failed, retry",
+			"search.more": "Results truncated — refine your query",
+			"toolbar.expand": "Expand toolbar",
+			"toolbar.collapse": "Collapse toolbar",
+			"toolbar.settings.open": "Open settings",
+			"toolbar.settings.close": "Close settings",
+			"settings.title": "Settings",
+			"settings.pin": "Show outside collapse",
+			"settings.pin.hint": "When on, the feature stays beside the arrow while the toolbar is folded",
+			"settings.reset": "Restore defaults",
+			"settings.support": "Support us",
+			"settings.repo": "GitHub repo",
+			"settings.star": "Give us a Star ★",
+			"settings.issues": "Report an Issue",
+			"settings.npm": "Install via npm",
+			"settings.label": "Settings",
+			"settings.close": "Close",
+			"settings.section.features": "Features & Shortcuts",
+			"settings.section.personal": "Personalization",
+			"settings.section.focus": "Focus",
+			"settings.personal.hint": "Dot size, accent color, and position — saved as you adjust",
+			"settings.personal.expand": "Expand personalization",
+			"settings.personal.collapse": "Collapse personalization",
+			"settings.personal.summary": "{accent} · Icon {icon}px · {side}",
+			"settings.desc.search": "Filter by full message text and jump to the match",
+			"settings.desc.list": "Overview of every prompt in this session",
+			"settings.desc.sessionSearch": "Search across all sessions",
+			"settings.desc.bookmarks": "Show bookmarked messages only",
+			"settings.desc.focus": "Dim AI thinking blocks for a cleaner read",
+			"settings.desc.updateCheck": "Check npm for a newer release",
+			"settings.desc.settings": "Customize the toolbar and appearance",
+			"settings.accent": "Accent color",
+			"settings.custom": "Custom",
+			"settings.iconSize": "Icon / dot size",
+			"settings.inset": "Distance from the edge",
+			"settings.side": "Position",
+			"settings.side.left": "Left",
+			"settings.side.right": "Right",
+			"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",
+			"settings.focus.dimThink": "Dim think reasoning",
+			"settings.focus.dimTools": "Dim tool call cards",
+			"settings.focus.collapseThink": "Collapse think",
+			"settings.focus.opacity": "Dim strength",
+			"settings.focus.summary": "{opts} · Strength {opacity}%",
+			"settings.focus.summary.think": "Think dim",
+			"settings.focus.summary.tools": "Tools dim",
+			"settings.focus.summary.collapse": "Think collapse",
+			"settings.focus.summary.none": "Off",
+			"update.check": "Check updates",
+			"update.title": "Update check",
+			"update.current": "Current version",
+			"update.latest": "Latest version",
+			"update.upToDate": "You are up to date",
+			"update.available": "Update available",
+			"update.goNpm": "Upgrade on npm",
+			"update.hostLines": "Supported official version lines",
+			"update.checking": "Checking…",
+			"update.failed": "Check failed",
+			"update.retry": "Retry",
+			"settings.language": "Language",
+			"settings.lang.system": "Follow system",
+			"settings.lang.zh": "Chinese",
+			"settings.lang.en": "English"
+		};
+		/**
+		* Interpolate `{name}` placeholders with params, matching the harness t seat's
+		* substitution shape; an unknown parameter leaves the placeholder verbatim.
+		*/
+		function interpolate(template, params) {
+			if (params === void 0) return template;
+			return template.replace(/\{([A-Za-z][A-Za-z0-9]*)\}/g, (slot, name) => name in params ? String(params[name]) : slot);
+		}
+		/**
+		* Dictionary-backed translate for the forced-language override (locale prefs
+		* 'zh' / 'en'): resolves a key against the plugin's own dictionaries with
+		* placeholder interpolation; unknown keys pass through unchanged (same
+		* degradation as the harness seat).
 		*/
-		function dotColor(index, total) {
-			return `hsl(218, 88%, ${72 - (total <= 1 ? 0 : index / (total - 1)) * 27}%)`;
+		function translateDict(dict, key, params) {
+			const template = dict[key];
+			return template === void 0 ? key : interpolate(template, params);
 		}
 		//#endregion
 		//#region src/client/turn-group-logic.ts
@@ -1300,20 +1784,36 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/toolbar-prefs.ts
 		/**
-		* toolbar-prefs: the persistence layer for the milestone rail's collapsible
-		* toolbar "pinned outside the collapse" preferences.
+		* 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).
+		*
+		* Storage contract: one localStorage key (`dsh-milestone.toolbar`) holding a
+		* JSON object:
 		*
-		* Storage contract: one localStorage key (`dsh-milestone.toolbar`) holding
-		* `{ "pinned": string[] }` — the ids of the function-key features the user
-		* wants to keep visible while the toolbar is COLLAPSED. An absent or corrupt
-		* value degrades to `[]` (everything folded away).
+		*   { "pinned": string[], "accent": "#rrggbb", "iconSize": number,
+		*     "inset": number, "side": "left" | "right", "locale": "system"|"zh"|"en",
+		*     "focus": { "dimThink": boolean, "dimTools": boolean,
+		*                "collapseThink": boolean, "opacity": number } }
 		*
-		* All reads are sanitized: ids are checked against the canonical whitelist
-		* (`TOOLBAR_PIN_IDS`), duplicates are dropped, unknown ids are discarded, and
-		* the pinned order is the caller's first-seen order (the order ids were
-		* pinned) — a future feature removal therefore never leaves a stale id
-		* behind, and a hand-edited value can never smuggle an out-of-registry id
-		* into render state.
+		* 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.
+		*
+		* All reads are sanitized per field:
+		*   - `pinned`: whitelisted ids only (`TOOLBAR_PIN_IDS`), duplicates dropped,
+		*     first-seen (pin) order preserved;
+		*   - `accent`: a canonical `#rrggbb` hex, lowercased; anything else falls
+		*     back to the default blue;
+		*   - `iconSize` / `inset`: finite numbers snapped to the slider step
+		*     (even values) and clamped to the slider range;
+		*   - `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].
 		*
 		* The whitelist lives HERE (not in MilestoneRail) so the pure functions stay
 		* dependency-free and unit-testable; MilestoneRail's feature registry keys
@@ -1323,8 +1823,10 @@ window.__ModuleLoader__.load({
 		const TOOLBAR_PREFS_KEY = "dsh-milestone.toolbar";
 		/**
 		* Canonical function-key ids that may be pinned outside the collapse, in
-		* toolbar render order. Adding a feature here (plus its registry entry in
-		* MilestoneRail) is the whole "pin it" extension point.
+		* render order. `settings` is a REGULAR feature since the B-design move: the
+		* gear left the always-visible chrome and now sits at the end of the expanded
+		* feature queue (default unpinned). Adding a feature here (plus its registry
+		* entry in MilestoneRail) is the whole "pin it" extension point.
 		*/
 		const TOOLBAR_PIN_IDS = [
 			"search",
@@ -1332,32 +1834,41 @@ window.__ModuleLoader__.load({
 			"sessionSearch",
 			"bookmarks",
 			"focus",
-			"updateCheck"
+			"updateCheck",
+			"settings"
 		];
+		/** The default accent (the classic milestone blue). */
+		const DEFAULT_ACCENT = "#4d7cfd";
+		/** Slider domain for the focus dim strength (0.2 = 20% .. 0.8 = 80%). */
+		const FOCUS_OPACITY_MIN = .2;
+		const FOCUS_OPACITY_MAX = .8;
+		/** The canonical default focus mix (dim think at 40%; tools/collapse off). */
+		const DEFAULT_FOCUS_PREFS = {
+			dimThink: true,
+			dimTools: false,
+			collapseThink: false,
+			opacity: .4
+		};
+		/** The canonical default prefs ("恢复默认" target; also the read fallback). */
+		const DEFAULT_PREFS = {
+			pinned: [],
+			accent: DEFAULT_ACCENT,
+			iconSize: 28,
+			inset: 14,
+			side: "right",
+			locale: "system",
+			focus: { ...DEFAULT_FOCUS_PREFS }
+		};
 		/** Type guard for registry ids — unknown strings never survive a parse. */
 		function isToolbarPinId(id) {
 			return TOOLBAR_PIN_IDS.includes(id);
 		}
-		/**
-		* Parse + sanitize the raw persisted blob: `null` (nothing stored), invalid
-		* JSON, or a non-`{pinned: string[]}` shape all degrade to `[]`; unknown ids
-		* and duplicates are dropped; the result keeps the caller's first-seen
-		* (pin) order.
-		*/
-		function parsePrefs(raw) {
-			if (raw === null) return [];
-			let parsed;
-			try {
-				parsed = JSON.parse(raw);
-			} catch {
-				return [];
-			}
-			if (typeof parsed !== "object" || parsed === null) return [];
-			const { pinned } = parsed;
-			if (!Array.isArray(pinned)) return [];
+		/** Whitelist + dedupe + first-seen-order sanitizer for the pinned list. */
+		function sanitizePinned(raw) {
+			if (!Array.isArray(raw)) return [];
 			const seen = /* @__PURE__ */ new Set();
 			const result = [];
-			for (const id of pinned) {
+			for (const id of raw) {
 				if (typeof id !== "string" || !isToolbarPinId(id) || seen.has(id)) continue;
 				seen.add(id);
 				result.push(id);
@@ -1365,42 +1876,104 @@ window.__ModuleLoader__.load({
 			return result;
 		}
 		/**
+		* Snap a finite number to the nearest `step` inside [min, max]; any non-finite
+		* or non-number input falls back to `fallback`. Used for both sliders so a
+		* hand-edited blob (e.g. `iconSize: 21`) converges on a legal slider value.
+		*/
+		function clampStep(value, min, max, step, fallback) {
+			if (typeof value !== "number" || !Number.isFinite(value)) return fallback;
+			const snapped = Math.round(Math.min(max, Math.max(min, value)) / step) * step;
+			return Math.min(max, Math.max(min, snapped));
+		}
+		/** Boolean sanitizer for the focus mix flags: only `true`/`false` survive. */
+		function sanitizeBoolean(value, fallback) {
+			return typeof value === "boolean" ? value : fallback;
+		}
+		/**
+		* Focus-mix sanitizer: `dimTools`/`collapseThink` default off, `dimThink`
+		* defaults ON (the classic pre-0.6.3 behavior), and `opacity` snaps to the
+		* 0.1 step inside [0.2, 0.8]. Snapping works in tenths (step × 10 = integer)
+		* instead of a raw division so hand-edited floats like `0.30000000000000004`
+		* always converge on exactly `0.3`.
+		*/
+		function sanitizeFocus(raw) {
+			if (typeof raw !== "object" || raw === null) return { ...DEFAULT_FOCUS_PREFS };
+			const { dimThink, dimTools, collapseThink, opacity } = raw;
+			const clamped = typeof opacity === "number" && Number.isFinite(opacity) ? Math.min(FOCUS_OPACITY_MAX, Math.max(FOCUS_OPACITY_MIN, opacity)) : DEFAULT_FOCUS_PREFS.opacity;
+			const tenths = Math.round(clamped * 10);
+			const snapped = Math.min(FOCUS_OPACITY_MAX, Math.max(FOCUS_OPACITY_MIN, tenths / 10));
+			return {
+				dimThink: sanitizeBoolean(dimThink, DEFAULT_FOCUS_PREFS.dimThink),
+				dimTools: sanitizeBoolean(dimTools, DEFAULT_FOCUS_PREFS.dimTools),
+				collapseThink: sanitizeBoolean(collapseThink, DEFAULT_FOCUS_PREFS.collapseThink),
+				opacity: snapped
+			};
+		}
+		/**
+		* Parse + sanitize the raw persisted blob: `null` (nothing stored), invalid
+		* JSON, or a non-object shape all degrade to the DEFAULT prefs. Each field is
+		* sanitized independently, so a half-corrupt blob keeps its valid parts
+		* (e.g. an old `{pinned}`-only blob gains the default accent/size/inset/side
+		* AND the default focus mix).
+		*/
+		function parsePrefs(raw) {
+			if (raw === null) return { ...DEFAULT_PREFS };
+			let parsed;
+			try {
+				parsed = JSON.parse(raw);
+			} catch {
+				return { ...DEFAULT_PREFS };
+			}
+			if (typeof parsed !== "object" || parsed === null) return { ...DEFAULT_PREFS };
+			const { pinned, accent, iconSize, inset, side, locale, focus } = parsed;
+			return {
+				pinned: sanitizePinned(pinned),
+				accent: typeof accent === "string" && isHexColor(accent) ? accent.toLowerCase() : DEFAULT_PREFS.accent,
+				iconSize: clampStep(iconSize, 20, 36, 2, DEFAULT_PREFS.iconSize),
+				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)
+			};
+		}
+		/**
 		* Read + sanitize the persisted toolbar prefs from localStorage. Degrades to
-		* `[]` when storage is unavailable (SSR, sandboxed iframe) — pinning is a
-		* best-effort enhancement, never a render blocker.
+		* the DEFAULT prefs when storage is unavailable (SSR, sandboxed iframe) —
+		* personalization is a best-effort enhancement, never a render blocker.
 		*/
 		function loadPrefs() {
 			try {
 				return parsePrefs(localStorage.getItem(TOOLBAR_PREFS_KEY));
 			} catch {
-				return [];
+				return { ...DEFAULT_PREFS };
 			}
 		}
 		/**
-		* Persist the pinned ids (sanitized on the way out so a corrupt in-memory
-		* value is never written). Takes plain strings — it cannot trust its input
-		* any more than it trusts localStorage, so unknown ids are dropped, not
-		* rejected. Swallows storage failures for the same best-effort reason as
-		* {@link loadPrefs}.
+		* Persist the full prefs (sanitized on the way out so a corrupt in-memory
+		* value is never written). Swallows storage failures for the same best-effort
+		* reason as {@link loadPrefs}.
 		*/
-		function savePrefs(pinned) {
-			const cleaned = parsePrefs(JSON.stringify({ pinned: [...pinned] }));
+		function savePrefs(prefs) {
+			const cleaned = parsePrefs(JSON.stringify(prefs));
 			try {
-				localStorage.setItem(TOOLBAR_PREFS_KEY, JSON.stringify({ pinned: cleaned }));
+				localStorage.setItem(TOOLBAR_PREFS_KEY, JSON.stringify(cleaned));
 			} catch {}
 		}
 		/**
 		* Pure toggle: adds `id` to the pinned set when absent, removes it when
-		* present. Unknown ids are ignored (the set is returned unchanged) and the
-		* result is always deduped via the parse path, so callers can feed state
+		* present. Unknown ids are ignored (prefs returned unchanged) and the pinned
+		* set is always deduped via the sanitizer, so callers can feed the result
 		* straight back into {@link savePrefs}.
 		*/
-		function togglePin(pinned, id) {
-			if (!isToolbarPinId(id)) return [...pinned];
-			const next = new Set(pinned);
+		function togglePin(prefs, id) {
+			if (!isToolbarPinId(id)) return { ...prefs };
+			const next = new Set(prefs.pinned);
 			if (next.has(id)) next.delete(id);
 			else next.add(id);
-			return parsePrefs(JSON.stringify({ pinned: [...next] }));
+			return {
+				...prefs,
+				pinned: sanitizePinned([...next])
+			};
 		}
 		//#endregion
 		//#region src/client/version-logic.ts
@@ -1706,12 +2279,12 @@ 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.1";
+		const PLUGIN_VERSION = "0.6.3";
 		//#endregion
 		//#region src/client/MilestoneRail.tsx
 		/**
 		* MilestoneRail: the milestone.rail entry (session scope). Renders a fixed
-		* right-side vertical scrubber as a **fixed-pitch dot list** (like a git commit
+		* side vertical scrubber as a **fixed-pitch dot list** (like a git commit
 		* graph), NOT a minimap: one dot per user message, equal spacing regardless of
 		* conversation length. The list itself scrolls with the wheel when it outgrows
 		* the viewport; hovering a dot shows rich metadata (time, turn, duration, end
@@ -1723,14 +2296,16 @@ window.__ModuleLoader__.load({
 		*                                          and the ui-conversation 'turn-tail'
 		*                                          location data (ttftMs/tokensPerSecond)
 		*
-		* Positioning: the rail hugs the conversation scrollport's right edge (offset a
-		* little inward so it clears the native scrollbar and sits near the prose).
+		* Positioning: the rail hugs the conversation scrollport's chosen screen edge
+		* (settings 位置: left or right), offset a little inward so it clears the
+		* native scrollbar and sits near the prose.
 		*
 		* In-rail search (F1): a magnifier toggle at the rail top opens a compact
-		* panel to the rail's left with a message-text search input; matches light up
-		* the dots (non-matches dim), Enter cycles the active match (wrapping) and
-		* jumps to it, Escape clears and closes. Matching runs over the FULL message
-		* text (`text` from rail-logic.extractText), not the truncated hover preview.
+		* panel on the rail's free side with a message-text search input; matches
+		* light up the dots (non-matches dim), Enter cycles the active match
+		* (wrapping) and jumps to it, Escape clears and closes. Matching runs over the
+		* FULL message text (`text` from rail-logic.extractText), not the truncated
+		* hover preview.
 		*
 		* Current-position highlight (F2): the dot for the user message at/just above
 		* the conversation viewport top carries a white ring (`useCurrentAnchor`
@@ -1739,8 +2314,15 @@ window.__ModuleLoader__.load({
 		* Load-older + window coverage (F3): when the session still has earlier pages
 		* (`hasMore`) a slim `···` button sits at the rail top and triggers the
 		* injected `loadOlder` action (disabled + `data-loading-older` while
-		* `loadingOlder`), and a compact hint to the rail's left states how many
+		* `loadingOlder`), and a compact hint on the rail's free side states how many
 		* messages the current window covers.
+		*
+		* Settings (B-design): the gear is a REGULAR toolbar feature ("settings",
+		* registry last, default unpinned) — the collapsed rail shows only the expand
+		* arrow plus the user's pinned keys, and expanding reveals the gear at the end
+		* of the queue. The gear opens a CENTERED modal dialog (function-key pins /
+		* hover descriptions, the personalization controls, and the support-us card
+		* grid); everything the modal changes persists under `dsh-milestone.toolbar`.
 		*/
 		/** Minimum user messages before the rail adds value. */
 		const MIN_MARKS = 2;
@@ -1749,36 +2331,211 @@ window.__ModuleLoader__.load({
 		const NO_BOOKMARKS = [];
 		/** Stable no-kinds fallback for marks whose turn carries no badge nodes. */
 		const NO_KINDS = [];
-		/**
-		* Self-contained pulse keyframes for the transient badges (running/awaiting):
-		* an expanding currentColor ring on box-shadow plus an opacity beat, driven by
-		* `animation` on the badge ring span (kept in an inline <style> so the plugin
-		* stays zero-asset).
-		*/
-		const BADGE_PULSE_CSS = `@keyframes milestone-badge-pulse {
-  0% { box-shadow: 0 0 0 0 currentColor; opacity: 0.85 }
-  70% { box-shadow: 0 0 0 5px transparent; opacity: 0.35 }
-  100% { box-shadow: 0 0 0 0 transparent; opacity: 0.85 }
-}`;
-		/**
-		* P3 focus mode: dims the harness's AI thinking/scratchpad blocks so the
-		* conversation reads cleaner. The rule targets the stable, un-hashed
-		* `data-variant="think"` attribute on the thinking-block ROOT (the harness
-		* renders it as `data-variant="think"` with `data-state="running|ok"`), so an
-		* overlay plugin can dim it with plain CSS. Hovering a dimmed block (or
-		* opening it, `[data-open]`) restores full opacity. Kept in an inline
-		* <style> so the plugin stays zero-asset — same pattern as BADGE_PULSE_CSS.
-		*/
-		const FOCUS_CSS = `[data-variant="think"] { opacity: 0.4; transition: opacity 0.2s; }
-[data-variant="think"]:hover, [data-variant="think"] [data-open] { opacity: 1; }`;
-		/** Visual dot diameter (px). */
+		/** Visual dot diameter at the default icon size (px). */
 		const DOT_SIZE = 14;
-		/** Hit area per dot (px) — larger than the dot for comfortable clicking. */
+		/** Hit area per dot at the default icon size (px) — larger than the dot. */
 		const DOT_HIT = 28;
-		/** Vertical gap between dot hit areas (px) — fixed pitch, never scaled. */
+		/** Vertical gap between dot hit areas at the default icon size (px). */
 		const DOT_GAP = 14;
-		/** Inward offset from the scrollport right edge so the rail clears the scrollbar. */
-		const RAIL_INSET = 14;
+		/**
+		* Extra top margin a new turn group's FIRST dot gets (replaces the old
+		* `data-turn-separator` line): same-group pitch stays DOT_GAP, a group
+		* boundary opens another GROUP_GAP_EXTRA px (14 → 18 at default size),
+		* expressed purely as spacing — no line element.
+		*/
+		const GROUP_GAP_EXTRA = 4;
+		/**
+		* Preset accent swatches for the settings 强调色 row (default blue first).
+		* The custom color input accepts any #rrggbb.
+		*/
+		const ACCENT_PRESETS = [
+			"#4d7cfd",
+			"#22c55e",
+			"#f59e0b",
+			"#ef4444",
+			"#a855f7",
+			"#06b6d4",
+			"#ec4899",
+			"#f97316"
+		];
+		/** Known floating-panel widths (px) used to anchor side=left panels to the
+		* rail's free (right) side — the panel components take a viewport `right`
+		* offset, so a left rail must back-calculate it from the panel width. */
+		const PANEL_WIDTH_SEARCH = 220;
+		const PANEL_WIDTH_STANDARD = 280;
+		/** Tooltip anchor width: its maxWidth cap, so a tooltip never overlaps the rail. */
+		const TOOLTIP_ANCHOR_WIDTH = 300;
+		/**
+		* P3 focus mode (0.6.3: user-tuned "聚焦搭配"): when the eye toggle is armed,
+		* an inline <style> (zero-asset, same pattern as the original FOCUS_CSS)
+		* dims/collapses the harness content classes the USER opted into, at the
+		* strength the user picked. Which content to dim and whether to additionally
+		* collapse think is a persisted `prefs.focus` mix; the master on/off switch
+		* stays the toolbar eye button.
+		*
+		* STABLE SELECTORS — researched against the rc.2 official build products:
+		*
+		*  - think: `dsh-client-ui-conversation` renders every assistant reasoning
+		*    disclosure as a root `div[data-variant="think"][data-state="running|ok"]`
+		*    (ReasoningRow). The reasoning body lives INSIDE that root — the
+		*    DisclosureRow's children — so the root is a single clampable container:
+		*    CSS `max-height` + `overflow: hidden` collapses exactly the body while
+		*    the header row ("Think · summary") stays visible. → collapseThink is
+		*    feasible with pure CSS (no JS, no harness-internal interaction).
+		*
+		*  - tool calls: `dsh-client-ui-tool` wraps EVERY atomic call (all ToolRow
+		*    presentation variants AND the bash-sample row) in
+		*    `div[data-chat-call-id]` (with `data-chat-anchor-key="call:<callId>"`);
+		*    no other card type in the harness uses that attribute (verified across
+		*    the whole @deepseek-ai install). → `[data-chat-call-id]` is the stable,
+		*    variant-independent tool-call-card selector.
+		*
+		* Hover/open restore mirrors the classic rule: `:hover` restores, and the
+		* DisclosureRow inside the collapsed target sets `[data-open]` when the user
+		* opens it (the DESCENDANT form `target [data-open]` is required — same as
+		* pre-0.6.3). The collapse strip releases on hover AND on `[data-open]` so
+		* an opened think disclosure never stays crushed.
+		*/
+		const FOCUS_SELECTOR_THINK = "[data-variant=\"think\"]";
+		const FOCUS_SELECTOR_TOOL = "[data-chat-call-id]";
+		/** Restored height when hovering/opening a collapsed think disclosure. */
+		const FOCUS_THINK_MAX_HEIGHT = "78vh";
+		/**
+		* Compose the focus-mode stylesheet from the persisted focus mix. Pure —
+		* exported so unit tests can pin the exact rule text. `''` when no option is
+		* armed (the master switch simply injects nothing).
+		*/
+		function buildFocusCss(focus) {
+			const { dimThink, dimTools, collapseThink } = focus;
+			const strength = focus.opacity.toFixed(1);
+			const rules = [];
+			if (dimThink || collapseThink) {
+				const decls = [];
+				if (dimThink) decls.push(`opacity: ${strength}`);
+				if (collapseThink) decls.push(`max-height: 36px`, "overflow: hidden");
+				rules.push(`${FOCUS_SELECTOR_THINK} { ${decls.join("; ")}; transition: opacity 0.2s${collapseThink ? ", max-height 0.2s" : ""}; }`);
+				rules.push(`${FOCUS_SELECTOR_THINK}:hover, ${FOCUS_SELECTOR_THINK} [data-open] { opacity: 1;${collapseThink ? ` max-height: ${FOCUS_THINK_MAX_HEIGHT};` : ""} }`);
+			}
+			if (dimTools) {
+				rules.push(`${FOCUS_SELECTOR_TOOL} { opacity: ${strength}; transition: opacity 0.2s; }`);
+				rules.push(`${FOCUS_SELECTOR_TOOL}:hover, ${FOCUS_SELECTOR_TOOL} [data-open] { opacity: 1; }`);
+			}
+			return rules.join("\n");
+		}
+		/**
+		* Settings modal shared palette + geometry — one source for the inline
+		* styles AND the static MODAL_CSS block below so they cannot drift. Dark
+		* panel on a dark host, three text tiers (primary / section title / hint +
+		* muted), one border tone, a 12px panel / 8px control radius scale and a
+		* 4-unit spacing scale (4 / 8 / 12 / 16 / 20).
+		*/
+		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";
+		const MODAL_RADIUS_PANEL = 12;
+		const MODAL_RADIUS_CONTROL = 8;
+		/** Near-row description tip: how far its right edge sits from the row's right
+		* edge — clears the 32px switch + its 10px padding. */
+		const MODAL_TIP_RIGHT = 54;
+		/**
+		* Static settings-modal styling that needs `:hover`/`:focus-visible` (which
+		* inline styles cannot express): the support-us card grid (micro-lift +
+		* accent highlight), the pin-row / personal-header hover washes, one accent
+		* focus ring for every modal control, the near-row tip's little arrow, the
+		* personalization body's reveal, and a themed thin scrollbar. Accent values
+		* come from the rail root's CSS variables (`--ms-accent*`), so one block
+		* serves every accent. Inline styles keep these elements background-free
+		* (except where noted) so the `:hover` washes below actually win. The
+		* search-toggle recolor rule makes the EXTERNAL RailSearchUi chrome follow
+		* the accent too (that file is owned by an earlier phase and cannot change);
+		* `!important` is required because that toggle's own inline styles win
+		* otherwise.
+		*/
+		const MODAL_CSS = `
+[data-support-card] {
+  display: flex; align-items: center; justify-content: center; gap: 8px;
+  padding: 10px 12px; border-radius: 8px;
+  background: rgba(255, 255, 255, 0.05); border: 1px solid ${MODAL_BORDER};
+  color: #c7cede; text-decoration: none; font-size: 12.5px; line-height: 1.4;
+  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
+}
+[data-support-card]:hover { transform: translateY(-2px); border-color: var(--ms-accent); background: rgba(255, 255, 255, 0.09); }
+/* 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-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] { background: rgba(255, 255, 255, 0.06); }
+[data-toolbar-settings-reset]:hover { background: rgba(255, 255, 255, 0.1); }
+/* 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-toolbar-settings-close]:focus-visible, [data-toolbar-settings-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
+   the apex points back at the row's label. */
+[data-settings-tip]::before {
+  content: ''; position: absolute; left: -3px; top: 50%;
+  width: 7px; height: 7px; transform: translateY(-50%) rotate(45deg);
+  background: ${MODAL_TIP_BG};
+  border-left: 1px solid ${MODAL_BORDER};
+  border-bottom: 1px solid ${MODAL_BORDER};
+}
+/* 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. */
+@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; }
+/* Thin themed scrollbar for the scrollable modal panel. */
+[data-toolbar-settings-panel]::-webkit-scrollbar { width: 10px; }
+[data-toolbar-settings-panel]::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.16); border-radius: 6px; border: 3px solid transparent; background-clip: padding-box;
+}
+[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-search-toggle] { color: #8b96ab !important; }
+[data-search-toggle][aria-pressed="true"] { background: var(--ms-accent-bg) !important; color: var(--ms-accent-soft) !important; }
+`;
+		/**
+		* Shared collapsible-section chrome (personalization + focus blocks): the
+		* header button (chevron + title + live summary) and the summary text span.
+		* One source so the two settings blocks cannot drift.
+		*/
+		const SECTION_TOGGLE_STYLE = {
+			display: "flex",
+			alignItems: "center",
+			gap: 8,
+			width: "100%",
+			padding: "8px 10px",
+			border: "none",
+			borderRadius: MODAL_RADIUS_CONTROL,
+			cursor: "pointer",
+			color: MODAL_TITLE,
+			fontSize: 13,
+			fontWeight: 600,
+			textAlign: "left"
+		};
+		const SECTION_SUMMARY_STYLE = {
+			flex: 1,
+			minWidth: 0,
+			textAlign: "right",
+			fontWeight: 400,
+			fontSize: 12,
+			color: MODAL_HINT,
+			overflow: "hidden",
+			textOverflow: "ellipsis",
+			whiteSpace: "nowrap"
+		};
 		/**
 		* P3 deep links (`#msg=<anchor-key>`): initial delay before the first
 		* deep-link attempt — the harness scrolls the conversation to the bottom on
@@ -1846,7 +2603,7 @@ window.__ModuleLoader__.load({
 		function MilestoneRail({ useSession, loadOlder, forkAt, useStore, actions, searchSessions = async () => ({
 			items: [],
 			hasMore: false
-		}), openSession = () => {}, t = (key) => key }) {
+		}), 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);
@@ -1951,46 +2708,85 @@ window.__ModuleLoader__.load({
 				}
 				return counts;
 			}, [displayMarks]);
-			(0, react.useLayoutEffect)(() => {
-				if (marks.length < MIN_MARKS) {
-					setRailBox(null);
-					return;
-				}
-				const scrollport = document.querySelector("[data-conversation-scroll]");
-				if (scrollport === null) return;
-				const compute = () => {
-					const sp = scrollport.getBoundingClientRect();
-					setRailBox({
-						top: sp.top,
-						height: sp.height,
-						right: Math.max(8, window.innerWidth - sp.right + RAIL_INSET)
-					});
-				};
-				compute();
-				const observer = new ResizeObserver(compute);
-				observer.observe(scrollport);
-				window.addEventListener("resize", compute);
-				return () => {
-					observer.disconnect();
-					window.removeEventListener("resize", compute);
-				};
-			}, [marks.length]);
-			(0, react.useLayoutEffect)(() => {
-				setFocusIndex((f) => clampIndex(f, render.items.length));
-			}, [render.items.length]);
-			(0, react.useEffect)(() => {
-				if (!listOpen && !crossOpen) return;
-				const onKey = (e) => {
-					if (e.key !== "Escape") return;
-					setListOpen(false);
-					setCrossOpen(false);
-				};
-				window.addEventListener("keydown", onKey);
-				return () => window.removeEventListener("keydown", onKey);
-			}, [listOpen, crossOpen]);
+			const [prefs, setPrefs] = (0, react.useState)(() => loadPrefs());
+			const { pinned, accent, iconSize, inset, side } = prefs;
+			const scale = iconSize / DOT_HIT;
+			const hit = iconSize;
+			const size = DOT_SIZE * scale;
+			const gap = DOT_GAP * scale;
+			const accentSoft = lighten(accent, .42) ?? "#9db8ff";
+			const accentBg = rgbaString(accent, .18) ?? "rgba(77, 124, 254, 0.18)";
+			const accentStrong = rgbaString(accent, .55) ?? "rgba(77, 124, 254, 0.55)";
+			/**
+			* Language override (settings → 语言): `system` delegates to the harness
+			* `t` seat (the framework-synthesized interpreter for the registered
+			* `dsh-milestone` namespace); `zh`/`en` force the plugin's own dictionaries
+			* so the rail copy switches independently of the host UI language. Every
+			* call site below — rail chrome, panels, tooltip and the settings modal —
+			* already resolves through this binding, so the override is global to the
+			* rail without threading a second translate prop anywhere.
+			*/
+			const t = prefs.locale === "system" ? frameworkT : prefs.locale === "en" ? (key, params) => translateDict(en, key, params) : (key, params) => translateDict(zh, key, params);
+			/** Write a patch of prefs through to state + localStorage. */
+			const updatePrefs = (patch) => {
+				setPrefs((prev) => {
+					const next = {
+						...prev,
+						...patch
+					};
+					savePrefs(next);
+					return next;
+				});
+			};
+			/** 0.6.3: patch ONE focus-mix flag/strength (nested field, same write-through). */
+			const updateFocus = (patch) => {
+				updatePrefs({ focus: {
+					...prefs.focus,
+					...patch
+				} });
+			};
+			/**
+			* 0.6.3: the focus block's live summary — the armed options joined into a
+			* "聚焦搭配" line, plus the strength percentage. e.g. `think 淡化 · 强度 40%`.
+			*/
+			const focusSummary = (() => {
+				const parts = [
+					prefs.focus.dimThink ? t("settings.focus.summary.think") : null,
+					prefs.focus.dimTools ? t("settings.focus.summary.tools") : null,
+					prefs.focus.collapseThink ? t("settings.focus.summary.collapse") : null
+				].filter((part) => part !== null);
+				return t("settings.focus.summary", {
+					opts: parts.length > 0 ? parts.join(" · ") : t("settings.focus.summary.none"),
+					opacity: Math.round(prefs.focus.opacity * 100)
+				});
+			})();
+			/** B1: flip one feature's pin — state and the persisted blob update together. */
+			const onTogglePin = (id) => {
+				setPrefs((prev) => {
+					const next = togglePin(prev, id);
+					savePrefs(next);
+					return next;
+				});
+			};
+			/** B-design: 恢复默认 resets EVERYTHING — pins AND personalization. */
+			const onResetAll = () => {
+				const next = { ...DEFAULT_PREFS };
+				setPrefs(next);
+				savePrefs(next);
+			};
 			const [toolbarExpanded, setToolbarExpanded] = (0, react.useState)(false);
+			const [expandHovered, setExpandHovered] = (0, react.useState)(false);
+			const [settingsHovered, setSettingsHovered] = (0, react.useState)(false);
 			const [settingsOpen, setSettingsOpen] = (0, react.useState)(false);
-			const [pinned, setPinned] = (0, react.useState)(() => loadPrefs());
+			/** 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);
+			/** B-design: the personalization block collapsess by default so only a
+			* value summary leads the section; expanding reveals the controls. */
+			const [personalOpen, setPersonalOpen] = (0, react.useState)(false);
+			/** 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 settingsRef = (0, react.useRef)(null);
 			const settingsBtnRef = (0, react.useRef)(null);
 			const [updateOpen, setUpdateOpen] = (0, react.useState)(false);
@@ -1998,11 +2794,12 @@ window.__ModuleLoader__.load({
 			const updatePanelRef = (0, react.useRef)(null);
 			const updateBtnRef = (0, react.useRef)(null);
 			/**
-			* B1 settings menu: outside-pointerdown dismisses the menu (shared
+			* B1 settings modal: outside-pointerdown dismisses it (shared
 			* useOutsideDismiss contract) with focus returning to the gear afterwards.
-			* The gear's own click keeps its flip semantics through a
-			* `[data-toolbar-settings]` exclusion — pointerdown on an armed gear must
-			* not double-close.
+			* The modal's full-screen overlay wraps the dialog, so a pointerdown on the
+			* backdrop (or anywhere outside the dialog) closes it; the gear's own click
+			* keeps its flip semantics through a `[data-toolbar-settings]` exclusion —
+			* pointerdown on an armed gear must not double-close.
 			*/
 			useOutsideDismiss(settingsRef, settingsOpen, () => {
 				setSettingsOpen(false);
@@ -2018,6 +2815,10 @@ window.__ModuleLoader__.load({
 				window.addEventListener("keydown", onKey);
 				return () => window.removeEventListener("keydown", onKey);
 			}, [settingsOpen]);
+			(0, react.useEffect)(() => {
+				if (!settingsOpen) return;
+				(settingsRef.current?.querySelector("[data-toolbar-settings-close]"))?.focus();
+			}, [settingsOpen]);
 			/**
 			* B4: run one update check. Cache-aware (`loadCachedLatest` reuses an
 			* unexpired cached result without any network traffic) and never throws:
@@ -2112,6 +2913,64 @@ window.__ModuleLoader__.load({
 				window.addEventListener("hashchange", onHashChange);
 				return () => window.removeEventListener("hashchange", onHashChange);
 			}, []);
+			(0, react.useLayoutEffect)(() => {
+				if (marks.length < MIN_MARKS) {
+					setRailBox(null);
+					return;
+				}
+				const scrollport = document.querySelector("[data-conversation-scroll]");
+				if (scrollport === null) return;
+				const compute = () => {
+					const sp = scrollport.getBoundingClientRect();
+					setRailBox({
+						top: sp.top,
+						height: sp.height,
+						right: Math.max(0, window.innerWidth - sp.right + inset),
+						left: Math.max(0, sp.left + inset)
+					});
+				};
+				compute();
+				const observer = new ResizeObserver(compute);
+				observer.observe(scrollport);
+				window.addEventListener("resize", compute);
+				return () => {
+					observer.disconnect();
+					window.removeEventListener("resize", compute);
+				};
+			}, [marks.length, inset]);
+			(0, react.useLayoutEffect)(() => {
+				setFocusIndex((f) => clampIndex(f, render.items.length));
+			}, [render.items.length]);
+			const lastBadge = (0, react.useMemo)(() => {
+				if (displayMarks.length === 0) return null;
+				const last = displayMarks[displayMarks.length - 1];
+				return deriveBadge({
+					nodeKinds: last.turn === void 0 ? NO_KINDS : kindsByTurn.get(last.turn) ?? NO_KINDS,
+					lastMark: true,
+					running,
+					awaitingInput
+				});
+			}, [
+				displayMarks,
+				kindsByTurn,
+				running,
+				awaitingInput
+			]);
+			const pulseCss = (0, react.useMemo)(() => {
+				if (lastBadge === null) return null;
+				const style = badgeRingStyle(lastBadge);
+				return style.pulse ? badgePulseCss(style.color) : null;
+			}, [lastBadge]);
+			(0, react.useEffect)(() => {
+				if (!listOpen && !crossOpen) return;
+				const onKey = (e) => {
+					if (e.key !== "Escape") return;
+					setListOpen(false);
+					setCrossOpen(false);
+				};
+				window.addEventListener("keydown", onKey);
+				return () => window.removeEventListener("keydown", onKey);
+			}, [listOpen, crossOpen]);
 			if (railBox === null || marks.length < MIN_MARKS) return null;
 			const updateQuery = (query) => {
 				setSearch({
@@ -2148,28 +3007,45 @@ window.__ModuleLoader__.load({
 				if (e.key === "Enter") advanceMatch();
 				if (e.key === "Escape") closeSearch();
 			};
-			/** B1: flip one feature's pin — state and the persisted blob update together. */
-			const onTogglePin = (id) => {
-				setPinned((prev) => {
-					const next = togglePin(prev, id);
-					savePrefs(next);
-					return next;
-				});
-			};
-			/** B1: reset every pin (everything folds away) and persist the empty set. */
-			const onResetPins = () => {
-				setPinned([]);
-				savePrefs([]);
+			/**
+			* B-design: viewport `right` offset for the floating layers. On the classic
+			* right-side rail the panels sit left of the rail (their right edge at
+			* railBox.right + hit + 8); on a LEFT rail every layer flips to the rail's
+			* OTHER side — its left edge at railBox.left + hit + 8, which means its
+			* viewport `right` must be backed out from the (known) panel width.
+			*/
+			const panelRightFor = (panelWidth) => side === "left" ? window.innerWidth - (railBox.left + hit + 8 + panelWidth) : railBox.right + hit + 8;
+			/** Close the settings modal via its backdrop/close button paths. */
+			const closeSettings = () => {
+				setSettingsOpen(false);
+				settingsBtnRef.current?.focus();
 			};
 			/** B1: a feature renders while the toolbar is EXPANDED or while it is pinned. */
 			const featureVisible = (id) => toolbarExpanded || pinned.includes(id);
+			/** Base chrome-button style: accent-defined active tint, scaled hit area. */
+			const chromeButtonStyle = (active) => ({
+				width: hit,
+				height: hit,
+				flexShrink: 0,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				background: active ? accentBg : "transparent",
+				border: "none",
+				padding: 0,
+				cursor: "pointer",
+				color: active ? accentSoft : "#8b96ab",
+				transition: "background 120ms ease, color 120ms ease"
+			});
 			/**
 			* B1: the data-driven feature registry. Each entry's render is the feature's
-			* UNCHANGED rail-top chrome (data attributes / aria semantics preserved),
-			* moved verbatim from the previous static button block; `search` is the
-			* whole RailSearchUi (toggle + panel) so its lifecycle stays component-local
-			* in the rail (search state lives in the rail and survives unmount).
-			* Registry order = settings-menu order (站内搜索/全部提问/跨会话搜索/只看收藏/聚焦模式).
+			* rail-top chrome (data attributes / aria semantics preserved), moved
+			* verbatim from the previous static button block; `search` is the whole
+			* RailSearchUi (toggle + panel) so its lifecycle stays component-local in
+			* the rail (search state lives in the rail and survives unmount). `settings`
+			* lives LAST in the queue — the gear is a regular, default-unpinned feature;
+			* the modal must stay reachable via 展开→齿轮.
+			* Registry order = settings-menu order (站内搜索/全部提问/跨会话搜索/只看收藏/聚焦模式/检查更新/设置).
 			*
 			* EXTENSION POINT: push a new feature here (+ its id in toolbar-prefs.ts's
 			* TOOLBAR_PIN_IDS and its locale keys) and pinning/settings/expand all
@@ -2181,7 +3057,7 @@ window.__ModuleLoader__.load({
 					labelKey: "search.label",
 					render: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RailSearchUi, {
 						panelTop: railBox.top,
-						panelRight: railBox.right + DOT_HIT + 8,
+						panelRight: panelRightFor(PANEL_WIDTH_SEARCH),
 						query: search.query,
 						panelOpen: search.panelOpen,
 						matches: matches.length,
@@ -2206,19 +3082,7 @@ window.__ModuleLoader__.load({
 						title: listOpen ? t("list.close") : t("list.open"),
 						"aria-pressed": listOpen,
 						onClick: () => setListOpen((v) => !v),
-						style: {
-							width: DOT_HIT,
-							height: DOT_HIT,
-							flexShrink: 0,
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-							background: listOpen ? "rgba(77, 124, 254, 0.18)" : "transparent",
-							border: "none",
-							padding: 0,
-							cursor: "pointer",
-							color: listOpen ? "#9db8ff" : "#8b96ab"
-						},
+						style: chromeButtonStyle(listOpen),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 							width: "16",
 							height: "16",
@@ -2246,19 +3110,7 @@ window.__ModuleLoader__.load({
 						title: crossOpen ? t("search.cross.close") : t("search.cross.open"),
 						"aria-pressed": crossOpen,
 						onClick: () => setCrossOpen((v) => !v),
-						style: {
-							width: DOT_HIT,
-							height: DOT_HIT,
-							flexShrink: 0,
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-							background: crossOpen ? "rgba(77, 124, 254, 0.18)" : "transparent",
-							border: "none",
-							padding: 0,
-							cursor: "pointer",
-							color: crossOpen ? "#9db8ff" : "#8b96ab"
-						},
+						style: chromeButtonStyle(crossOpen),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 							width: "16",
 							height: "16",
@@ -2293,19 +3145,7 @@ window.__ModuleLoader__.load({
 						"aria-pressed": bookmarksOnly,
 						"data-active": bookmarksOnly ? "true" : void 0,
 						onClick: () => setBookmarksOnly((v) => !v),
-						style: {
-							width: DOT_HIT,
-							height: DOT_HIT,
-							flexShrink: 0,
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-							background: bookmarksOnly ? "rgba(77, 124, 254, 0.18)" : "transparent",
-							border: "none",
-							padding: 0,
-							cursor: "pointer",
-							color: bookmarksOnly ? "#9db8ff" : "#8b96ab"
-						},
+						style: chromeButtonStyle(bookmarksOnly),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 							width: "16",
 							height: "16",
@@ -2329,19 +3169,7 @@ window.__ModuleLoader__.load({
 						title: focusActive ? t("focus.off") : t("focus.on"),
 						"aria-pressed": focusActive,
 						onClick: () => setFocusActive((v) => !v),
-						style: {
-							width: DOT_HIT,
-							height: DOT_HIT,
-							flexShrink: 0,
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-							background: focusActive ? "rgba(126, 226, 168, 0.14)" : "transparent",
-							border: "none",
-							padding: 0,
-							cursor: "pointer",
-							color: focusActive ? "#7ee2a8" : "#8b96ab"
-						},
+						style: chromeButtonStyle(focusActive),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 							width: "16",
 							height: "16",
@@ -2373,17 +3201,17 @@ window.__ModuleLoader__.load({
 						onClick: () => setUpdateOpen((v) => !v),
 						style: {
 							position: "relative",
-							width: DOT_HIT,
-							height: DOT_HIT,
+							width: hit,
+							height: hit,
 							flexShrink: 0,
 							display: "flex",
 							alignItems: "center",
 							justifyContent: "center",
-							background: updateOpen || updateCheck.available ? "rgba(245, 197, 66, 0.14)" : "transparent",
+							background: updateCheck.available ? "rgba(245, 197, 66, 0.14)" : updateOpen ? accentBg : "transparent",
 							border: "none",
 							padding: 0,
 							cursor: "pointer",
-							color: updateCheck.available ? "#f5c542" : "#8b96ab"
+							color: updateCheck.available ? "#f5c542" : updateOpen ? accentSoft : "#8b96ab"
 						},
 						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
 							width: "16",
@@ -2416,6 +3244,40 @@ window.__ModuleLoader__.load({
 							}
 						})]
 					})
+				},
+				{
+					id: "settings",
+					labelKey: "settings.label",
+					render: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						ref: settingsBtnRef,
+						"data-toolbar-settings": true,
+						"aria-pressed": settingsOpen,
+						"aria-label": settingsOpen ? t("toolbar.settings.close") : t("toolbar.settings.open"),
+						title: settingsOpen ? t("toolbar.settings.close") : t("toolbar.settings.open"),
+						onClick: () => setSettingsOpen((v) => !v),
+						onMouseEnter: () => setSettingsHovered(true),
+						onMouseLeave: () => setSettingsHovered(false),
+						onFocus: () => setSettingsHovered(true),
+						onBlur: () => setSettingsHovered(false),
+						style: chromeButtonStyle(settingsOpen || settingsHovered),
+						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: "3"
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })]
+						})
+					})
 				}
 			];
 			/** Focus the dot at `index` (no-op while the list is unmounted). */
@@ -2537,21 +3399,31 @@ window.__ModuleLoader__.load({
 				style: {
 					position: "fixed",
 					top: railBox.top,
-					right: railBox.right,
+					...side === "left" ? { left: railBox.left } : { right: railBox.right },
 					height: railBox.height,
-					width: DOT_HIT,
+					width: hit,
 					pointerEvents: "auto",
 					zIndex: 100,
 					display: "flex",
 					flexDirection: "column",
 					gap: 6,
-					paddingTop: 6
+					paddingTop: 6,
+					"--ms-accent": accent,
+					"--ms-accent-soft": accentSoft,
+					"--ms-accent-bg": accentBg,
+					"--ms-icon": `${iconSize}px`,
+					"--ms-inset": `${inset}px`
 				},
 				"aria-label": t("rail.label"),
 				"data-focus-active": focusActive ? "true" : void 0,
+				"data-accent": accent,
+				"data-side": side,
+				"data-icon-size": String(iconSize),
+				"data-inset": String(inset),
 				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: BADGE_PULSE_CSS }),
-					focusActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: FOCUS_CSS }),
+					pulseCss !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: pulseCss }),
+					focusActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: buildFocusCss(prefs.focus) }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: MODAL_CSS }),
 					showLoadOlder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						"data-load-older": true,
@@ -2563,8 +3435,8 @@ window.__ModuleLoader__.load({
 							loadOlder();
 						},
 						style: {
-							width: DOT_HIT,
-							height: DOT_HIT,
+							width: hit,
+							height: hit,
 							flexShrink: 0,
 							display: "flex",
 							alignItems: "center",
@@ -2587,19 +3459,11 @@ window.__ModuleLoader__.load({
 						"aria-label": toolbarExpanded ? t("toolbar.collapse") : t("toolbar.expand"),
 						title: toolbarExpanded ? t("toolbar.collapse") : t("toolbar.expand"),
 						onClick: () => setToolbarExpanded((v) => !v),
-						style: {
-							width: DOT_HIT,
-							height: DOT_HIT,
-							flexShrink: 0,
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "center",
-							background: "transparent",
-							border: "none",
-							padding: 0,
-							cursor: "pointer",
-							color: "#8b96ab"
-						},
+						onMouseEnter: () => setExpandHovered(true),
+						onMouseLeave: () => setExpandHovered(false),
+						onFocus: () => setExpandHovered(true),
+						onBlur: () => setExpandHovered(false),
+						style: chromeButtonStyle(expandHovered),
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 							width: "16",
 							height: "16",
@@ -2613,221 +3477,822 @@ window.__ModuleLoader__.load({
 							children: toolbarExpanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m18 15-6-6-6 6" }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 9 6 6 6-6" })
 						})
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-						type: "button",
-						ref: settingsBtnRef,
-						"data-toolbar-settings": true,
-						"aria-expanded": settingsOpen,
-						"aria-label": settingsOpen ? t("toolbar.settings.close") : t("toolbar.settings.open"),
-						title: settingsOpen ? t("toolbar.settings.close") : t("toolbar.settings.open"),
-						onClick: () => setSettingsOpen((v) => !v),
+					toolbarFeatures.map((feature) => featureVisible(feature.id) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: feature.render() }, feature.id) : null),
+					settingsOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-toolbar-settings-overlay": true,
+						onClick: closeSettings,
 						style: {
-							width: DOT_HIT,
-							height: DOT_HIT,
-							flexShrink: 0,
+							position: "fixed",
+							inset: 0,
+							background: "rgba(8, 10, 15, 0.55)",
+							zIndex: 105,
 							display: "flex",
 							alignItems: "center",
 							justifyContent: "center",
-							background: settingsOpen ? "rgba(77, 124, 254, 0.18)" : "transparent",
-							border: "none",
-							padding: 0,
-							cursor: "pointer",
-							color: settingsOpen ? "#9db8ff" : "#8b96ab"
+							padding: 16
 						},
-						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: "3"
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })]
-						})
-					}),
-					toolbarFeatures.map((feature) => featureVisible(feature.id) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: feature.render() }, feature.id) : null),
-					settingsOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						ref: settingsRef,
-						"data-toolbar-settings-panel": true,
-						style: {
-							position: "fixed",
-							top: railBox.top,
-							right: railBox.right + DOT_HIT + 8,
-							width: "min(240px, calc(100vw - 48px))",
-							padding: "10px 12px",
-							background: "rgba(20, 24, 32, 0.97)",
-							color: "#e6e8ee",
-							borderRadius: 8,
-							boxShadow: "0 6px 20px rgba(0, 0, 0, 0.4)",
-							zIndex: 104
-						},
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: `[data-toolbar-pin-toggle]:hover { background: rgba(77, 124, 254, 0.18); }` }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								"data-toolbar-settings-title": true,
-								style: {
-									fontSize: 13,
-									fontWeight: 600,
-									color: "#e6e8ee",
-									marginBottom: 2
-								},
-								children: t("settings.title")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								style: {
-									fontSize: 12,
-									color: "#8b96ab",
-									marginBottom: 4,
-									textAlign: "right"
-								},
-								children: t("settings.pin")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								role: "menu",
-								"aria-label": t("settings.title"),
-								style: {
-									display: "flex",
-									flexDirection: "column",
-									gap: 2
-								},
-								children: toolbarFeatures.map((feature) => {
-									const checked = pinned.includes(feature.id);
-									return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							ref: settingsRef,
+							"data-toolbar-settings-panel": true,
+							role: "dialog",
+							"aria-modal": "true",
+							"aria-label": t("settings.title"),
+							onClick: (e) => e.stopPropagation(),
+							style: {
+								width: "min(600px, 92vw)",
+								maxHeight: "78vh",
+								overflowY: "auto",
+								padding: 20,
+								background: MODAL_BG,
+								color: MODAL_FG,
+								borderRadius: MODAL_RADIUS_PANEL,
+								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.jsxs)("div", {
+									style: {
+										display: "flex",
+										alignItems: "center",
+										justifyContent: "space-between",
+										gap: 8,
+										marginBottom: 18
+									},
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										"data-toolbar-settings-title": true,
+										style: {
+											fontSize: 15,
+											fontWeight: 600,
+											color: MODAL_FG
+										},
+										children: t("settings.title")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 										type: "button",
-										role: "menuitemcheckbox",
-										"data-toolbar-pin-toggle": true,
-										"data-pin-id": feature.id,
-										"aria-checked": checked,
-										onClick: () => onTogglePin(feature.id),
+										"data-toolbar-settings-close": true,
+										"aria-label": t("settings.close"),
+										title: t("settings.close"),
+										onClick: closeSettings,
 										style: {
+											width: 28,
+											height: 28,
+											flexShrink: 0,
 											display: "flex",
 											alignItems: "center",
-											justifyContent: "space-between",
-											gap: 8,
-											width: "100%",
-											padding: "6px 8px",
-											background: "transparent",
+											justifyContent: "center",
 											border: "none",
-											borderRadius: 6,
+											padding: 0,
 											cursor: "pointer",
-											color: "#e6e8ee",
-											fontSize: 13,
-											textAlign: "left"
+											color: MODAL_HINT,
+											borderRadius: MODAL_RADIUS_CONTROL,
+											lineHeight: 1
 										},
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t(feature.labelKey) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+											width: "14",
+											height: "14",
+											viewBox: "0 0 24 24",
+											fill: "none",
+											stroke: "currentColor",
+											strokeWidth: "2",
+											strokeLinecap: "round",
 											"aria-hidden": "true",
-											style: {
-												width: 14,
-												height: 14,
-												flexShrink: 0,
-												borderRadius: 3,
-												border: "1px solid rgba(255, 255, 255, 0.35)",
-												background: checked ? "rgba(77, 124, 254, 0.9)" : "transparent",
-												display: "flex",
-												alignItems: "center",
-												justifyContent: "center",
-												color: "#ffffff",
-												fontSize: 10,
-												lineHeight: 1
-											},
-											children: checked ? "✓" : ""
-										})]
-									}, feature.id);
-								})
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-								type: "button",
-								"data-toolbar-settings-reset": true,
-								onClick: onResetPins,
-								style: {
-									width: "100%",
-									marginTop: 6,
-									padding: "6px 8px",
-									background: "transparent",
-									border: "none",
-									borderRadius: 6,
-									cursor: "pointer",
-									color: "#8b96ab",
-									fontSize: 13,
-									textAlign: "left"
-								},
-								children: t("settings.reset")
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-								"data-toolbar-settings-footer": true,
-								style: {
-									marginTop: 8,
-									paddingTop: 8,
-									borderTop: "1px solid rgba(255, 255, 255, 0.12)"
-								},
-								children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-									style: {
-										fontSize: 12,
-										color: "#8b96ab",
-										marginBottom: 6
-									},
-									children: t("settings.support")
-								}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-									style: {
-										display: "flex",
-										flexDirection: "column",
-										gap: 4
-									},
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })]
+										})
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									"data-settings-section": true,
+									style: { marginBottom: 20 },
 									children: [
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-											href: "https://github.com/SnowCrescenter-tech/dsh-milestone",
-											target: "_blank",
-											rel: "noreferrer",
-											style: {
-												fontSize: 12,
-												color: "#9db8ff",
-												textDecoration: "none"
-											},
-											children: t("settings.repo")
-										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-											href: "https://github.com/SnowCrescenter-tech/dsh-milestone",
-											target: "_blank",
-											rel: "noreferrer",
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											"data-settings-section-title": true,
 											style: {
-												fontSize: 12,
-												color: "#9db8ff",
-												textDecoration: "none"
+												fontSize: 13,
+												fontWeight: 600,
+												color: MODAL_TITLE,
+												marginBottom: 4
 											},
-											children: t("settings.star")
+											children: t("settings.section.features")
 										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-											href: `https://github.com/SnowCrescenter-tech/dsh-milestone/issues`,
-											target: "_blank",
-											rel: "noreferrer",
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											"data-settings-pin-hint": true,
 											style: {
 												fontSize: 12,
-												color: "#9db8ff",
-												textDecoration: "none"
+												color: MODAL_HINT,
+												lineHeight: 1.5,
+												marginBottom: 10
 											},
-											children: t("settings.issues")
+											children: t("settings.pin.hint")
 										}),
-										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
-											href: "https://www.npmjs.com/package/dsh-milestone",
-											target: "_blank",
-											rel: "noreferrer",
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 											style: {
-												fontSize: 12,
-												color: "#9db8ff",
-												textDecoration: "none"
+												display: "flex",
+												flexDirection: "column",
+												gap: 2
 											},
-											children: t("settings.npm")
+											children: toolbarFeatures.map((feature) => {
+												const checked = pinned.includes(feature.id);
+												const active = descFeature === feature.id;
+												const tipId = `ms-settings-tip-${feature.id}`;
+												return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													"data-toolbar-pin-row": true,
+													"data-row-id": feature.id,
+													style: { position: "relative" },
+													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+														type: "button",
+														role: "switch",
+														"data-toolbar-pin-toggle": true,
+														"data-pin-id": feature.id,
+														"aria-checked": checked,
+														"aria-label": t(feature.labelKey),
+														"aria-describedby": tipId,
+														onMouseEnter: () => setDescFeature(feature.id),
+														onMouseLeave: () => setDescFeature((prev) => prev === feature.id ? null : prev),
+														onFocus: () => setDescFeature(feature.id),
+														onBlur: () => setDescFeature((prev) => prev === feature.id ? null : prev),
+														onClick: () => onTogglePin(feature.id),
+														style: {
+															display: "flex",
+															alignItems: "center",
+															justifyContent: "space-between",
+															gap: 10,
+															width: "100%",
+															padding: "8px 10px",
+															border: "none",
+															borderRadius: MODAL_RADIUS_CONTROL,
+															cursor: "pointer",
+															color: MODAL_FG,
+															fontSize: 13,
+															textAlign: "left"
+														},
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															style: {
+																overflow: "hidden",
+																textOverflow: "ellipsis",
+																whiteSpace: "nowrap"
+															},
+															children: t(feature.labelKey)
+														}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+															"aria-hidden": "true",
+															style: {
+																position: "relative",
+																width: 32,
+																height: 18,
+																flexShrink: 0,
+																borderRadius: 9,
+																background: checked ? accentStrong : "rgba(255, 255, 255, 0.16)",
+																transition: "background 120ms ease"
+															},
+															children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { style: {
+																position: "absolute",
+																top: 2,
+																left: checked ? 16 : 2,
+																width: 14,
+																height: 14,
+																borderRadius: "50%",
+																background: "#ffffff",
+																transition: "left 120ms ease"
+															} })
+														})]
+													}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+														id: tipId,
+														role: "tooltip",
+														"data-settings-tip": true,
+														"data-tip-for": feature.id,
+														"data-tip-visible": active ? "true" : void 0,
+														style: {
+															position: "absolute",
+															right: MODAL_TIP_RIGHT,
+															top: "50%",
+															maxWidth: "55%",
+															transform: `translateY(-50%) translateX(${active ? 0 : 4}px)`,
+															padding: "5px 10px",
+															borderRadius: MODAL_RADIUS_CONTROL,
+															background: MODAL_TIP_BG,
+															border: `1px solid ${MODAL_BORDER}`,
+															boxShadow: "0 8px 24px rgba(0, 0, 0, 0.35)",
+															color: MODAL_TEXT,
+															fontSize: 12,
+															lineHeight: 1.45,
+															opacity: active ? 1 : 0,
+															visibility: active ? "visible" : "hidden",
+															pointerEvents: "none",
+															zIndex: 4
+														},
+														children: t(`settings.desc.${feature.id}`)
+													})]
+												}, feature.id);
+											})
 										})
 									]
-								})]
-							})
-						]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									"data-settings-section": true,
+									"data-settings-personal": true,
+									style: { marginBottom: 20 },
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+										type: "button",
+										"data-personal-toggle": true,
+										"aria-expanded": personalOpen,
+										"aria-label": personalOpen ? t("settings.personal.collapse") : t("settings.personal.expand"),
+										title: personalOpen ? t("settings.personal.collapse") : t("settings.personal.expand"),
+										onClick: () => setPersonalOpen((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: personalOpen ? "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.personal")
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												"data-settings-personal-summary": true,
+												style: SECTION_SUMMARY_STYLE,
+												children: t("settings.personal.summary", {
+													accent,
+													icon: iconSize,
+													side: side === "left" ? t("settings.side.left") : t("settings.side.right")
+												})
+											})
+										]
+									}), personalOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										"data-settings-personal-body": true,
+										style: {
+											padding: "10px 4px 8px",
+											display: "flex",
+											flexDirection: "column",
+											gap: 12
+										},
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												"data-settings-personal-hint": true,
+												style: {
+													fontSize: 12,
+													color: MODAL_HINT,
+													lineHeight: 1.5,
+													padding: "0 6px"
+												},
+												children: t("settings.personal.hint")
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												style: {
+													display: "flex",
+													alignItems: "center",
+													gap: 10,
+													flexWrap: "wrap"
+												},
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+													style: {
+														fontSize: 12.5,
+														color: MODAL_HINT,
+														width: 90,
+														flexShrink: 0
+													},
+													children: t("settings.accent")
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+													"data-accent-swatches": true,
+													style: {
+														display: "flex",
+														alignItems: "center",
+														gap: 6,
+														flexWrap: "wrap"
+													},
+													children: [ACCENT_PRESETS.map((preset) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+														type: "button",
+														"data-accent-swatch": true,
+														"data-accent": preset,
+														"aria-label": preset,
+														"aria-pressed": accent === preset,
+														onClick: () => updatePrefs({ accent: preset }),
+														style: {
+															width: 22,
+															height: 22,
+															borderRadius: "50%",
+															background: preset,
+															border: accent === preset ? "2px solid #ffffff" : "2px solid rgba(255, 255, 255, 0.25)",
+															boxShadow: accent === preset ? `0 0 0 2px ${preset}` : "none",
+															padding: 0,
+															cursor: "pointer",
+															transition: "border-color 120ms ease, box-shadow 120ms ease"
+														}
+													}, preset)), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+														"data-accent-custom": true,
+														style: {
+															display: "inline-flex",
+															alignItems: "center",
+															gap: 6,
+															fontSize: 12.5,
+															color: MODAL_TEXT,
+															cursor: "pointer"
+														},
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+															type: "color",
+															value: accent,
+															onChange: (e) => updatePrefs({ accent: e.target.value }),
+															"aria-label": `${t("settings.custom")} ${t("settings.accent")}`,
+															style: {
+																width: 26,
+																height: 26,
+																padding: 0,
+																border: "none",
+																background: "transparent",
+																cursor: "pointer"
+															}
+														}), t("settings.custom")]
+													})]
+												})]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												style: {
+													display: "flex",
+													alignItems: "center",
+													gap: 10,
+													flexWrap: "wrap"
+												},
+												children: [
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														style: {
+															fontSize: 12.5,
+															color: MODAL_HINT,
+															width: 90,
+															flexShrink: 0
+														},
+														children: t("settings.iconSize")
+													}),
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+														type: "range",
+														"data-icon-size": true,
+														min: 20,
+														max: 36,
+														step: 2,
+														value: iconSize,
+														onChange: (e) => updatePrefs({ iconSize: Number(e.target.value) }),
+														style: {
+															flex: 1,
+															minWidth: 140,
+															maxWidth: 260
+														}
+													}),
+													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+														"data-icon-size-value": true,
+														style: {
+															fontSize: 12.5,
+															color: MODAL_TEXT,
+															width: 40
+														},
+														children: [iconSize, "px"]
+													})
+												]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												style: {
+													display: "flex",
+													alignItems: "center",
+													gap: 10,
+													flexWrap: "wrap"
+												},
+												children: [
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														style: {
+															fontSize: 12.5,
+															color: MODAL_HINT,
+															width: 90,
+															flexShrink: 0
+														},
+														children: t("settings.inset")
+													}),
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+														type: "range",
+														"data-inset": true,
+														min: 0,
+														max: 40,
+														step: 2,
+														value: inset,
+														onChange: (e) => updatePrefs({ inset: Number(e.target.value) }),
+														style: {
+															flex: 1,
+															minWidth: 140,
+															maxWidth: 260
+														}
+													}),
+													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+														"data-inset-value": true,
+														style: {
+															fontSize: 12.5,
+															color: MODAL_TEXT,
+															width: 40
+														},
+														children: [inset, "px"]
+													})
+												]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												role: "radiogroup",
+												"aria-label": t("settings.side"),
+												style: {
+													display: "flex",
+													alignItems: "center",
+													gap: 10,
+													flexWrap: "wrap"
+												},
+												children: [
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														style: {
+															fontSize: 12.5,
+															color: MODAL_HINT,
+															width: 90,
+															flexShrink: 0
+														},
+														children: t("settings.side")
+													}),
+													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+														style: {
+															display: "inline-flex",
+															alignItems: "center",
+															gap: 5,
+															fontSize: 13,
+															color: MODAL_FG,
+															cursor: "pointer"
+														},
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+															type: "radio",
+															name: "ms-rail-side",
+															"data-side-radio": true,
+															value: "left",
+															checked: side === "left",
+															onChange: () => updatePrefs({ side: "left" })
+														}), t("settings.side.left")]
+													}),
+													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+														style: {
+															display: "inline-flex",
+															alignItems: "center",
+															gap: 5,
+															fontSize: 13,
+															color: MODAL_FG,
+															cursor: "pointer"
+														},
+														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+															type: "radio",
+															name: "ms-rail-side",
+															"data-side-radio": true,
+															value: "right",
+															checked: side === "right",
+															onChange: () => updatePrefs({ side: "right" })
+														}), t("settings.side.right")]
+													})
+												]
+											})
+										]
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									"data-settings-section": true,
+									"data-focus-settings": true,
+									style: { marginBottom: 20 },
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+										type: "button",
+										"data-focus-toggle-settings": true,
+										"aria-expanded": focusOpen,
+										"aria-label": focusOpen ? t("settings.focus.collapse") : t("settings.focus.expand"),
+										title: focusOpen ? t("settings.focus.collapse") : t("settings.focus.expand"),
+										onClick: () => setFocusOpen((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: focusOpen ? "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.focus")
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+												"data-focus-summary": true,
+												style: SECTION_SUMMARY_STYLE,
+												children: focusSummary
+											})
+										]
+									}), focusOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										"data-settings-focus-body": true,
+										style: {
+											padding: "10px 4px 8px",
+											display: "flex",
+											flexDirection: "column",
+											gap: 12
+										},
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+												"data-settings-focus-hint": true,
+												style: {
+													fontSize: 12,
+													color: MODAL_HINT,
+													lineHeight: 1.5,
+													padding: "0 6px"
+												},
+												children: t("settings.focus.hint")
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+												"data-focus-option": true,
+												style: {
+													display: "flex",
+													alignItems: "center",
+													gap: 8,
+													padding: "6px 8px",
+													borderRadius: MODAL_RADIUS_CONTROL,
+													fontSize: 13,
+													color: MODAL_FG,
+													cursor: "pointer"
+												},
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+													type: "checkbox",
+													"data-focus-dim-think": true,
+													checked: prefs.focus.dimThink,
+													onChange: (e) => updateFocus({ dimThink: e.target.checked })
+												}), t("settings.focus.dimThink")]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+												"data-focus-option": true,
+												style: {
+													display: "flex",
+													alignItems: "center",
+													gap: 8,
+													padding: "6px 8px",
+													borderRadius: MODAL_RADIUS_CONTROL,
+													fontSize: 13,
+													color: MODAL_FG,
+													cursor: "pointer"
+												},
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+													type: "checkbox",
+													"data-focus-dim-tools": true,
+													checked: prefs.focus.dimTools,
+													onChange: (e) => updateFocus({ dimTools: e.target.checked })
+												}), t("settings.focus.dimTools")]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+												"data-focus-option": true,
+												style: {
+													display: "flex",
+													alignItems: "center",
+													gap: 8,
+													padding: "6px 8px",
+													borderRadius: MODAL_RADIUS_CONTROL,
+													fontSize: 13,
+													color: MODAL_FG,
+													cursor: "pointer"
+												},
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+													type: "checkbox",
+													"data-focus-collapse-think": true,
+													checked: prefs.focus.collapseThink,
+													onChange: (e) => updateFocus({ collapseThink: e.target.checked })
+												}), t("settings.focus.collapseThink")]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+												style: {
+													display: "flex",
+													alignItems: "center",
+													gap: 10,
+													flexWrap: "wrap"
+												},
+												children: [
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+														style: {
+															fontSize: 12.5,
+															color: MODAL_HINT,
+															width: 90,
+															flexShrink: 0
+														},
+														children: t("settings.focus.opacity")
+													}),
+													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+														type: "range",
+														"data-focus-opacity": true,
+														min: .2,
+														max: .8,
+														step: .1,
+														value: prefs.focus.opacity,
+														onChange: (e) => updateFocus({ opacity: Number(e.target.value) }),
+														style: {
+															flex: 1,
+															minWidth: 140,
+															maxWidth: 260
+														}
+													}),
+													/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+														"data-focus-opacity-value": true,
+														style: {
+															fontSize: 12.5,
+															color: MODAL_TEXT,
+															width: 44
+														},
+														children: [Math.round(prefs.focus.opacity * 100), "%"]
+													})
+												]
+											})
+										]
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									"data-settings-section": true,
+									"data-settings-lang": true,
+									style: { marginBottom: 20 },
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										"data-settings-section-title": true,
+										style: {
+											fontSize: 13,
+											fontWeight: 600,
+											color: MODAL_TITLE,
+											marginBottom: 8
+										},
+										children: t("settings.language")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										role: "radiogroup",
+										"aria-label": t("settings.language"),
+										style: {
+											display: "flex",
+											alignItems: "center",
+											gap: 18,
+											flexWrap: "wrap"
+										},
+										children: [
+											"system",
+											"zh",
+											"en"
+										].map((value) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+											style: {
+												display: "inline-flex",
+												alignItems: "center",
+												gap: 5,
+												fontSize: 13,
+												color: MODAL_FG,
+												cursor: "pointer"
+											},
+											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+												type: "radio",
+												name: "ms-rail-locale",
+												"data-locale-pref": true,
+												value,
+												checked: prefs.locale === value,
+												onChange: () => updatePrefs({ locale: value })
+											}), t(`settings.lang.${value}`)]
+										}, value))
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									"data-toolbar-settings-footer": true,
+									style: { textAlign: "center" },
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+										style: {
+											fontSize: 12,
+											color: MODAL_HINT,
+											marginBottom: 10
+										},
+										children: t("settings.support")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+										"data-support-grid": true,
+										style: {
+											display: "grid",
+											gridTemplateColumns: "repeat(2, minmax(0, 1fr))",
+											gap: 10,
+											maxWidth: 460,
+											margin: "0 auto"
+										},
+										children: [
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+												href: "https://github.com/SnowCrescenter-tech/dsh-milestone",
+												target: "_blank",
+												rel: "noreferrer",
+												"data-support-card": true,
+												"data-card": "repo",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+													width: "14",
+													height: "14",
+													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)("path", { d: "M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22" })
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("settings.repo") })]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+												href: "https://github.com/SnowCrescenter-tech/dsh-milestone",
+												target: "_blank",
+												rel: "noreferrer",
+												"data-support-card": true,
+												"data-card": "star",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+													width: "14",
+													height: "14",
+													viewBox: "0 0 24 24",
+													fill: "currentColor",
+													stroke: "none",
+													"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)("span", { children: t("settings.star") })]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+												href: `https://github.com/SnowCrescenter-tech/dsh-milestone/issues`,
+												target: "_blank",
+												rel: "noreferrer",
+												"data-support-card": true,
+												"data-card": "issues",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+													width: "14",
+													height: "14",
+													viewBox: "0 0 24 24",
+													fill: "none",
+													stroke: "currentColor",
+													strokeWidth: "2",
+													"aria-hidden": "true",
+													children: [
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+															cx: "12",
+															cy: "12",
+															r: "9"
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+															d: "M12 8v4",
+															strokeLinecap: "round"
+														}),
+														/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+															cx: "12",
+															cy: "16",
+															r: "0.5",
+															fill: "currentColor"
+														})
+													]
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("settings.issues") })]
+											}),
+											/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+												href: "https://www.npmjs.com/package/dsh-milestone",
+												target: "_blank",
+												rel: "noreferrer",
+												"data-support-card": true,
+												"data-card": "npm",
+												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+													width: "14",
+													height: "14",
+													viewBox: "0 0 24 24",
+													fill: "currentColor",
+													stroke: "none",
+													"aria-hidden": "true",
+													children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M2 8.5h20V15h-6v2.5h-3V15H2V8.5zm1.5 1.5v3.5H6V11.5h1.5v3.5h1.5V10h-4.5zm6 0v5h3V13h2v2h1.5v-5h-6.5z" })
+												}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("settings.npm") })]
+											})
+										]
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									"data-toolbar-settings-reset": true,
+									onClick: onResetAll,
+									style: {
+										display: "block",
+										margin: "16px auto 2px",
+										padding: "7px 16px",
+										border: `1px solid ${MODAL_BORDER}`,
+										borderRadius: MODAL_RADIUS_CONTROL,
+										cursor: "pointer",
+										color: MODAL_TEXT,
+										fontSize: 12.5
+									},
+									children: t("settings.reset")
+								})
+							]
+						})
 					}),
 					updateOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 						ref: updatePanelRef,
@@ -2835,7 +4300,7 @@ window.__ModuleLoader__.load({
 						style: {
 							position: "fixed",
 							top: railBox.top,
-							right: railBox.right + DOT_HIT + 8,
+							right: panelRightFor(PANEL_WIDTH_STANDARD),
 							width: "min(280px, calc(100vw - 48px))",
 							padding: "10px 12px",
 							background: "rgba(20, 24, 32, 0.97)",
@@ -2865,7 +4330,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.1" })] }),
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "0.6.3" })] }),
 								updateCheck.phase === "ok" && updateCheck.latest !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									"data-update-latest": true,
 									children: [
@@ -2908,7 +4373,7 @@ window.__ModuleLoader__.load({
 												border: "none",
 												padding: 0,
 												cursor: "pointer",
-												color: "#9db8ff",
+												color: accentSoft,
 												fontSize: 12,
 												textDecoration: "underline"
 											},
@@ -2928,7 +4393,7 @@ window.__ModuleLoader__.load({
 										target: "_blank",
 										rel: "noreferrer",
 										style: {
-											color: "#9db8ff",
+											color: accentSoft,
 											textDecoration: "none"
 										},
 										children: t("update.goNpm")
@@ -2952,11 +4417,11 @@ window.__ModuleLoader__.load({
 									style: {
 										marginTop: 4,
 										padding: "6px 10px",
-										background: updateCheck.phase === "checking" ? "transparent" : "rgba(77, 124, 254, 0.18)",
+										background: updateCheck.phase === "checking" ? "transparent" : accentBg,
 										border: "none",
 										borderRadius: 6,
 										cursor: updateCheck.phase === "checking" ? "default" : "pointer",
-										color: updateCheck.phase === "checking" ? "#5a6375" : "#9db8ff",
+										color: updateCheck.phase === "checking" ? "#5a6375" : accentSoft,
 										fontSize: 12,
 										alignSelf: "flex-start"
 									},
@@ -2967,14 +4432,14 @@ window.__ModuleLoader__.load({
 					}),
 					listOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MilestoneListPanel, {
 						panelTop: railBox.top,
-						panelRight: railBox.right + DOT_HIT + 8,
+						panelRight: panelRightFor(PANEL_WIDTH_STANDARD),
 						marks,
 						onJump: jump,
 						t
 					}),
 					crossOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MilestoneSessionSearch, {
 						panelTop: railBox.top,
-						panelRight: railBox.right + DOT_HIT + 8,
+						panelRight: panelRightFor(PANEL_WIDTH_STANDARD),
 						onClose: () => setCrossOpen(false),
 						searchSessions,
 						openSession,
@@ -2994,12 +4459,12 @@ window.__ModuleLoader__.load({
 							display: "flex",
 							flexDirection: "column",
 							alignItems: "center",
-							gap: DOT_GAP,
+							gap,
 							padding: "6px 0",
 							scrollbarWidth: "none"
 						},
 						children: render.items.map((item, i) => {
-							const showSeparator = separatorIndices.has(i);
+							const showGroupGap = separatorIndices.has(i) && i > 0;
 							const mark = displayMarks[item.displayIndex];
 							const summaryCount = collapsedSummaries.get(mark.key);
 							const bookmarked = isBookmarked(bookmarkedKeys, mark.key);
@@ -3011,7 +4476,7 @@ window.__ModuleLoader__.load({
 								isCurrent: !hasQuery && mark.key === currentKey
 							});
 							const isHovered = hover?.mark.key === mark.key;
-							const boxShadow = isHovered ? "0 0 0 3px rgba(77, 124, 254, 0.35)" : dotState === "active" ? "0 0 0 3px rgba(255, 255, 255, 0.9)" : dotState === "current" ? "0 0 0 3px rgba(255, 255, 255, 0.75)" : "none";
+							const boxShadow = isHovered ? `0 0 0 3px ${rgbaString(accent, .35) ?? "rgba(77, 124, 254, 0.35)"}` : dotState === "active" ? `0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 10px 2px ${rgbaString(accent, .55) ?? "rgba(77, 124, 254, 0.55)"}` : dotState === "current" ? "0 0 0 3px rgba(255, 255, 255, 0.75)" : dotState === "match" ? `0 0 0 2px ${rgbaString(accent, .45) ?? "rgba(77, 124, 254, 0.45)"}` : "none";
 							const badge = deriveBadge({
 								nodeKinds: mark.turn === void 0 ? NO_KINDS : kindsByTurn.get(mark.turn) ?? NO_KINDS,
 								lastMark: item.displayIndex === displayMarks.length - 1,
@@ -3019,21 +4484,11 @@ window.__ModuleLoader__.load({
 								awaitingInput
 							});
 							const ringStyle = badge === null ? null : badgeRingStyle(badge);
-							return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [showSeparator && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-								"data-turn-separator": true,
-								"data-turn": mark.turn === void 0 ? void 0 : mark.turn,
-								style: {
-									width: DOT_HIT - 8,
-									height: 1,
-									flexShrink: 0,
-									background: "rgba(139, 150, 171, 0.35)",
-									borderRadius: 1
-								}
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 								type: "button",
 								style: {
-									width: DOT_HIT,
-									height: DOT_HIT,
+									width: hit,
+									height: hit,
 									flexShrink: 0,
 									display: "flex",
 									alignItems: "center",
@@ -3041,7 +4496,8 @@ window.__ModuleLoader__.load({
 									background: "transparent",
 									border: "none",
 									padding: 0,
-									cursor: "pointer"
+									cursor: "pointer",
+									marginTop: showGroupGap ? GROUP_GAP_EXTRA : 0
 								},
 								onMouseEnter: (e) => {
 									const rect = e.currentTarget.getBoundingClientRect();
@@ -3052,6 +4508,8 @@ window.__ModuleLoader__.load({
 								},
 								onClick: () => jump(mark.key),
 								"data-rail-dot": true,
+								"data-turn-gap": showGroupGap ? "true" : void 0,
+								"data-turn": showGroupGap && mark.turn !== void 0 ? mark.turn : void 0,
 								"data-collapsed-summary": summaryCount !== void 0 ? "true" : void 0,
 								"data-collapsed-count": summaryCount,
 								tabIndex: focusIndex === i ? 0 : -1,
@@ -3063,10 +4521,10 @@ window.__ModuleLoader__.load({
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 									style: {
 										position: "relative",
-										width: DOT_SIZE,
-										height: DOT_SIZE,
+										width: size,
+										height: size,
 										borderRadius: "50%",
-										background: dotColor(item.displayIndex, marks.length),
+										background: dotColor(item.displayIndex, marks.length, accent),
 										boxShadow,
 										transition: "transform 120ms ease, opacity 120ms ease",
 										transform: `scale(${isHovered ? 1.35 : dotState === "active" || dotState === "current" ? 1.25 : 1})`,
@@ -3079,18 +4537,18 @@ window.__ModuleLoader__.load({
 											position: "absolute",
 											inset: -3,
 											borderRadius: "50%",
-											border: `2px solid ${ringStyle.color}`,
+											boxShadow: ringStyle.shadow,
 											color: ringStyle.color,
 											pointerEvents: "none",
-											animation: ringStyle.pulse ? "milestone-badge-pulse 1.4s ease-out infinite" : void 0
+											animation: ringStyle.pulse ? "milestone-badge-pulse 2s ease-in-out infinite" : void 0
 										}
 									})
 								})
-							})] }, mark.key);
+							}) }, mark.key);
 						})
 					}),
 					hover !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MilestoneRailTooltip, {
-						panelRight: railBox.right + DOT_HIT + 8,
+						panelRight: panelRightFor(TOOLTIP_ANCHOR_WIDTH),
 						hover,
 						bookmarked: isBookmarked(bookmarkedKeys, hover.mark.key),
 						onToggleBookmark: () => onToggleBookmark(hover.mark.key),
@@ -3109,8 +4567,13 @@ window.__ModuleLoader__.load({
 						style: {
 							position: "absolute",
 							bottom: 6,
-							right: "100%",
-							marginRight: 8,
+							...side === "left" ? {
+								left: "100%",
+								marginLeft: 8
+							} : {
+								right: "100%",
+								marginRight: 8
+							},
 							whiteSpace: "nowrap",
 							fontSize: 12,
 							lineHeight: 1,
@@ -3233,213 +4696,6 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
-		//#region src/client/locales.ts
-		/**
-		* UI strings for the milestone rail, keyed flat (single-language-per-key,
-		* no nesting) so the later i18n threading stays a mechanical
-		* `value.replace('{name}', n)` substitution.
-		*
-		* `zh` is the source of truth and the key registry: it byte-matches the
-		* current hardcoded output of MilestoneRail / MilestoneRailTooltip /
-		* MilestoneRailSearch exactly (each `{n}`/`{m}`/`{name}` slot stands in for
-		* the interpolated number or label), so swapping in these templates is
-		* behavior-preserving. `en` is typed `Record<MilestoneKey, string>` so a
-		* missing English translation is a compile error, not a runtime miss.
-		*/
-		const zh = {
-			/** aria-label on each dot: `跳转到第 ${i + 1} 条消息`. */
-			"jump.to": "跳转到第 {n} 条消息",
-			/** Load-older coverage hint: `已显示 {marks.length} 条 · 还有更早`. */
-			"window.hint": "已显示 {n} 条 · 还有更早",
-			/** Hover turn badge: `第 ${mark.turn} 轮`. */
-			"turn.label": "第 {n} 轮",
-			/** Hover position: `第 {hover.index + 1} / {hover.total} 条`. */
-			"pos.of": "第 {n} / {m} 条",
-			/** Search input placeholder. */
-			"search.placeholder": "搜索消息内容",
-			/** aria-label on the search toggle button and the search input. */
-			"search.label": "搜索消息",
-			/** aria-label on the bookmarks-only filter toggle. */
-			"bookmark.filter": "只看收藏",
-			/** aria-label + title on the focus-mode toggle when focus is OFF (arm it). */
-			"focus.on": "聚焦模式",
-			/** aria-label + title on the focus-mode toggle when focus is ON (disarm it). */
-			"focus.off": "退出聚焦",
-			/** aria-label on the hover tooltip star toggle. */
-			"bookmark.star": "收藏此消息",
-			/** aria-label on the search clear button. */
-			"search.clear": "清空搜索",
-			/** title + aria-label on the load-older `···` button. */
-			"load.older": "加载更早消息",
-			/** aria-label on the rail root. */
-			"rail.label": "会话里程碑",
-			/** aria-label on the dot list. */
-			"rail.list": "会话里程碑列表",
-			/** Hover preview fallback for empty message text. */
-			"no.text": "（无文本）",
-			/** Relative time: `< 60s`. */
-			"time.justNow": "刚刚",
-			/** Relative time: `< 1h`. */
-			"time.minutes": "{n} 分钟前",
-			/** Relative time: `< 1d`. */
-			"time.hours": "{n} 小时前",
-			/** Relative time: `>= 1d`. */
-			"time.days": "{n} 天前",
-			/** Hover duration: `用时 {durationLabel}`. */
-			"duration.label": "用时 {name}",
-			/** Hover TTFT: `首字 {ttftLabel}`. */
-			"ttft.label": "首字 {name}",
-			/** TurnEndReason `completed`. */
-			"reason.completed": "已完成",
-			/** TurnEndReason `aborted`. */
-			"reason.aborted": "已中止",
-			/** TurnEndReason `error`. */
-			"reason.error": "出错",
-			/** TurnEndReason `max-tokens`. */
-			"reason.maxTokens": "达到上限",
-			/** TurnEndReason `interrupted`. */
-			"reason.interrupted": "已中断",
-			/** TurnEndReason `blocked`. */
-			"reason.blocked": "已阻塞",
-			/** Copy-message tooltip action. */
-			"copy.message": "复制消息",
-			/** Fork-from-here tooltip action. */
-			"fork.here": "从此处 fork",
-			/** Collapse-turn tooltip action. */
-			"collapse.turn": "折叠此轮",
-			/** Expand-turn tooltip action. */
-			"expand.turn": "展开此轮",
-			/** aria-label + title on the milestone-list toggle when the panel is CLOSED. */
-			"list.open": "打开列表",
-			/** aria-label + title on the milestone-list toggle when the panel is OPEN. */
-			"list.close": "收起列表",
-			/** Header title of the all-prompts list panel. */
-			"list.label": "全部提问",
-			/** 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. */
-			"search.cross.open": "打开跨会话搜索",
-			/** aria-label + title on the cross-session search toggle when the panel is OPEN. */
-			"search.cross.close": "收起跨会话搜索",
-			/** Cross-session result row title fallback for sessions with no display title. */
-			"search.untitled": "（无标题）",
-			/** Cross-session search failure notice. */
-			"search.error": "搜索失败，请重试",
-			/** Cross-session search footer hint when the harness capped the result list. */
-			"search.more": "结果已截断，请细化关键词",
-			/** aria-label on the toolbar expand arrow while the toolbar is COLLAPSED (expand it). */
-			"toolbar.expand": "展开工具栏",
-			/** aria-label on the toolbar expand arrow while the toolbar is EXPANDED (collapse it). */
-			"toolbar.collapse": "收起工具栏",
-			/** aria-label on the toolbar settings gear while the settings menu is CLOSED. */
-			"toolbar.settings.open": "打开设置",
-			/** aria-label on the toolbar settings gear while the settings menu is OPEN. */
-			"toolbar.settings.close": "关闭设置",
-			/** Header title of the toolbar settings menu. */
-			"settings.title": "设置",
-			/** Per-feature toggle label inside the settings menu: keep visible while collapsed. */
-			"settings.pin": "在折叠外显示",
-			/** Settings action that clears every pinned feature. */
-			"settings.reset": "恢复默认",
-			/** Settings footer heading above the project links. */
-			"settings.support": "支持我们",
-			/** Settings footer link: the GitHub repository. */
-			"settings.repo": "GitHub 仓库",
-			/** Settings footer link: star the repository. */
-			"settings.star": "欢迎 Star ★",
-			/** Settings footer link: file an issue. */
-			"settings.issues": "提交 Issue",
-			/** Settings footer link: the npm install channel. */
-			"settings.npm": "npm 安装渠道",
-			/** B4 update-check: toolbar button label + title/aria-label. */
-			"update.check": "检查更新",
-			/** B4 update-check: popover title. */
-			"update.title": "更新检测",
-			/** B4 update-check: installed-version row label. */
-			"update.current": "当前版本",
-			/** B4 update-check: newest-published-version row label. */
-			"update.latest": "最新版本",
-			/** B4 update-check: conclusion when the installed version is current. */
-			"update.upToDate": "已是最新版本",
-			/** B4 update-check: conclusion when a newer version exists. */
-			"update.available": "发现新版本",
-			/** B4 update-check: link text for the npm upgrade channel. */
-			"update.goNpm": "去 npm 升级",
-			/** B4 update-check: supported-host-lines metadata row label. */
-			"update.hostLines": "已适配官方版本线",
-			/** B4 update-check: in-flight state of the manual check button. */
-			"update.checking": "检查中…",
-			/** B4 update-check: failed state heading. */
-			"update.failed": "检查失败",
-			/** B4 update-check: retry action inside the failed state. */
-			"update.retry": "重试"
-		};
-		const en = {
-			"jump.to": "Jump to message {n}",
-			"window.hint": "Showing {n} messages · more below",
-			"turn.label": "Turn {n}",
-			"pos.of": "Message {n} of {m}",
-			"search.placeholder": "Search message content",
-			"search.label": "Search messages",
-			"bookmark.filter": "Bookmarks only",
-			"focus.on": "Focus mode",
-			"focus.off": "Exit focus",
-			"bookmark.star": "Bookmark this message",
-			"search.clear": "Clear search",
-			"load.older": "Load older messages",
-			"rail.label": "Session milestones",
-			"rail.list": "Session milestone list",
-			"no.text": "(no text)",
-			"time.justNow": "Just now",
-			"time.minutes": "{n} minutes ago",
-			"time.hours": "{n} hours ago",
-			"time.days": "{n} days ago",
-			"duration.label": "Duration {name}",
-			"ttft.label": "First token {name}",
-			"reason.completed": "Completed",
-			"reason.aborted": "Aborted",
-			"reason.error": "Error",
-			"reason.maxTokens": "Max tokens reached",
-			"reason.interrupted": "Interrupted",
-			"reason.blocked": "Blocked",
-			"copy.message": "Copy message",
-			"fork.here": "Fork from here",
-			"collapse.turn": "Collapse turn",
-			"expand.turn": "Expand turn",
-			"list.open": "Open list",
-			"list.close": "Close list",
-			"list.label": "All prompts",
-			"search.cross": "Cross-session search",
-			"search.cross.open": "Open cross-session search",
-			"search.cross.close": "Close cross-session search",
-			"search.untitled": "(untitled)",
-			"search.error": "Search failed, retry",
-			"search.more": "Results truncated — refine your query",
-			"toolbar.expand": "Expand toolbar",
-			"toolbar.collapse": "Collapse toolbar",
-			"toolbar.settings.open": "Open settings",
-			"toolbar.settings.close": "Close settings",
-			"settings.title": "Settings",
-			"settings.pin": "Show outside collapse",
-			"settings.reset": "Restore defaults",
-			"settings.support": "Support us",
-			"settings.repo": "GitHub repo",
-			"settings.star": "Give us a Star ★",
-			"settings.issues": "Report an Issue",
-			"settings.npm": "Install via npm",
-			"update.check": "Check updates",
-			"update.title": "Update check",
-			"update.current": "Current version",
-			"update.latest": "Latest version",
-			"update.upToDate": "You are up to date",
-			"update.available": "Update available",
-			"update.goNpm": "Upgrade on npm",
-			"update.hostLines": "Supported official version lines",
-			"update.checking": "Checking…",
-			"update.failed": "Check failed",
-			"update.retry": "Retry"
-		};
-		//#endregion
 		//#region src/client/index.ts
 		/** Required services (cordis fiber inject). */
 		const inject = [