dsh-milestone 0.6.2 → 0.6.3

package/README.md

@@ -1,6 +1,6 @@
 <div align="center">
 
-<img src="./assets/logo.svg" alt="dsh-milestone" width="112">
+<img src="https://raw.githubusercontent.com/SnowCrescenter-tech/dsh-milestone/main/assets/logo.svg" alt="dsh-milestone" width="112">
 
 # dsh-milestone
 
@@ -25,7 +25,7 @@
 - 右侧挂一条**圆点时间线**：一个提问一个圆点，悬停看内容，点击瞬间跳转——长对话的「导航地图」。
 - 官方 slot 机制挂载，不修改 harness 源码，装完即用。
 
-<img src="./assets/demo.svg" alt="dsh-milestone 效果示意图" width="100%">
+<img src="https://raw.githubusercontent.com/SnowCrescenter-tech/dsh-milestone/main/assets/demo.svg" alt="dsh-milestone 效果示意图" width="100%">
 
 ## 快速开始
 
@@ -63,7 +63,7 @@ npx @deepseek-ai/dsh web    # → http://127.0.0.1:3080
 | 个性化与效率 | 键盘导航：全程不用鼠标 | ↑↓ 移动 · Enter 跳转 · Home/End 首尾 |
 | 个性化与效率 | turn 分组折叠：按轮次成组，长轮次折成一条 | |
 | 个性化与效率 | 复制与 fork：一键复制提问全文 / 从此处分支 | |
-| 个性化与效率 | 聚焦模式：淡化 thinking 区块，悬停或展开恢复 | |
+| 个性化与效率 | 聚焦模式：淡化 / 折叠思考与工具调用，强度可调、自由搭配 | |
 | 个性化与效率 | 折叠工具栏：功能键默认收起，箭头展开；设置菜单可把常用键钉到折叠外（持久化 + 恢复默认） | |
 | 个性化与效率 | 个性化外观：强调色 / 图标圆点大小 / 距侧边距离 / 位置左右（设置内即调即存） | |
 | 个性化与效率 | 语言切换：跟随系统 / 中文 / English，设置内一键切换 | |
@@ -164,7 +164,15 @@ shell.overlay (root scope)
 ## 更新日志
 
 <details>
-<summary>v0.6.2 / v0.6.1 / v0.6.0（点击展开）</summary>
+<summary>v0.6.3 / v0.6.2 / v0.6.1 / v0.6.0（点击展开）</summary>
+
+**v0.6.3** · 聚焦高级设置 + 设置模态重设计 · 363 项测试
+
+- **聚焦高级设置**：设置内「聚焦」可展开——自定义淡化/折叠 think 推理区与工具调用卡片，淡化强度 20%–80% 可调（稳定选择器 `[data-variant="think"]` / `[data-chat-call-id]`），搭配持久化。
+- **设置模态重设计**：功能悬停描述改为**就近 tip**（行旁悬浮，不再有大块常驻描述区）；恢复表头说明（「开启后，折叠时仍显示在箭头旁」）；个性化收进**可展开块**（默认折叠，头部实时摘要）；间距/圆角/强调色统一，修复行 hover 洗色失效。
+- README 图片改绝对 URL（npm 渲染器不重写相对路径），npm 页 logo/演示图恢复正常。
+
+> [GitHub Release v0.6.3](https://github.com/SnowCrescenter-tech/dsh-milestone/releases/tag/v0.6.3)
 
 **v0.6.2** · 设置模态化 + 个性化 + 语言切换 · 346 项测试
 

package/lib/client.js

@@ -682,6 +682,8 @@ window.__ModuleLoader__.load({
 			"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. */
@@ -702,6 +704,16 @@ window.__ModuleLoader__.load({
 			"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. */
@@ -730,6 +742,30 @@ window.__ModuleLoader__.load({
 			"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. */
@@ -808,6 +844,7 @@ window.__ModuleLoader__.load({
 			"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",
@@ -818,6 +855,11 @@ window.__ModuleLoader__.load({
 			"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",
@@ -832,6 +874,18 @@ window.__ModuleLoader__.load({
 			"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",
@@ -1739,11 +1793,15 @@ window.__ModuleLoader__.load({
 		* JSON object:
 		*
 		*   { "pinned": string[], "accent": "#rrggbb", "iconSize": number,
-		*     "inset": number, "side": "left" | "right", "locale": "system"|"zh"|"en" }
+		*     "inset": number, "side": "left" | "right", "locale": "system"|"zh"|"en",
+		*     "focus": { "dimThink": boolean, "dimTools": boolean,
+		*                "collapseThink": boolean, "opacity": number } }
 		*
 		* 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.
+		* 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,
@@ -1752,7 +1810,10 @@ window.__ModuleLoader__.load({
 		*     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'`.
+		*   - `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
@@ -1776,14 +1837,27 @@ window.__ModuleLoader__.load({
 			"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: "#4d7cfd",
+			accent: DEFAULT_ACCENT,
 			iconSize: 28,
 			inset: 14,
 			side: "right",
-			locale: "system"
+			locale: "system",
+			focus: { ...DEFAULT_FOCUS_PREFS }
 		};
 		/** Type guard for registry ids — unknown strings never survive a parse. */
 		function isToolbarPinId(id) {
@@ -1811,11 +1885,36 @@ window.__ModuleLoader__.load({
 			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).
+		* (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 };
@@ -1826,14 +1925,15 @@ window.__ModuleLoader__.load({
 				return { ...DEFAULT_PREFS };
 			}
 			if (typeof parsed !== "object" || parsed === null) return { ...DEFAULT_PREFS };
-			const { pinned, accent, iconSize, inset, side, locale } = parsed;
+			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
+				locale: locale === "zh" || locale === "en" || locale === "system" ? locale : DEFAULT_PREFS.locale,
+				focus: sanitizeFocus(focus)
 			};
 		}
 		/**
@@ -2179,7 +2279,7 @@ window.__ModuleLoader__.load({
 		* Installed plugin version. Injected at build time as
 		* `__DSH_MILESTONE_VERSION__`; falls back to `0.0.0-dev` when unbuilt.
 		*/
-		const PLUGIN_VERSION = "0.6.2";
+		const PLUGIN_VERSION = "0.6.3";
 		//#endregion
 		//#region src/client/MilestoneRail.tsx
 		/**
@@ -2266,39 +2366,176 @@ window.__ModuleLoader__.load({
 		/** Tooltip anchor width: its maxWidth cap, so a tooltip never overlaps the rail. */
 		const TOOLTIP_ANCHOR_WIDTH = 300;
 		/**
-		* 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.
+		* 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_CSS = `[data-variant="think"] { opacity: 0.4; transition: opacity 0.2s; }
-[data-variant="think"]:hover, [data-variant="think"] [data-open] { opacity: 1; }`;
+		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";
 		/**
-		* Static settings-modal styling that needs `:hover` (which inline styles
-		* cannot express): the support-us card grid (micro-lift + accent highlight)
-		* and the pin-row hover wash. Accent values come from the rail root's CSS
-		* variables (`--ms-accent`), so one block serves every accent. The
+		* 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 the toggle's own inline styles win
+		* `!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 rgba(255, 255, 255, 0.12);
+  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
@@ -2501,6 +2738,28 @@ window.__ModuleLoader__.load({
 					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) => {
@@ -2519,9 +2778,15 @@ window.__ModuleLoader__.load({
 			const [expandHovered, setExpandHovered] = (0, react.useState)(false);
 			const [settingsHovered, setSettingsHovered] = (0, react.useState)(false);
 			const [settingsOpen, setSettingsOpen] = (0, react.useState)(false);
-			/** The feature whose description the settings modal's right pane shows
-			* (defaults to the first registry feature — 'search'). */
-			const [descFeature, setDescFeature] = (0, react.useState)("search");
+			/** 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);
@@ -3130,27 +3395,25 @@ window.__ModuleLoader__.load({
 				forkAt(mark.seq).then(() => setForkedKey(mark.key));
 			};
 			const showLoadOlder = hasMore && marks.length >= MIN_MARKS;
-			const railStyle = {
-				position: "fixed",
-				top: railBox.top,
-				...side === "left" ? { left: railBox.left } : { right: railBox.right },
-				height: railBox.height,
-				width: hit,
-				pointerEvents: "auto",
-				zIndex: 100,
-				display: "flex",
-				flexDirection: "column",
-				gap: 6,
-				paddingTop: 6,
-				"--ms-accent": accent,
-				"--ms-accent-soft": accentSoft,
-				"--ms-accent-bg": accentBg,
-				"--ms-icon": `${iconSize}px`,
-				"--ms-inset": `${inset}px`
-			};
-			const descKey = `settings.desc.${descFeature}`;
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				style: railStyle,
+				style: {
+					position: "fixed",
+					top: railBox.top,
+					...side === "left" ? { left: railBox.left } : { right: railBox.right },
+					height: railBox.height,
+					width: hit,
+					pointerEvents: "auto",
+					zIndex: 100,
+					display: "flex",
+					flexDirection: "column",
+					gap: 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,
@@ -3159,7 +3422,7 @@ window.__ModuleLoader__.load({
 				"data-inset": String(inset),
 				children: [
 					pulseCss !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: pulseCss }),
-					focusActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: FOCUS_CSS }),
+					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",
@@ -3239,11 +3502,13 @@ window.__ModuleLoader__.load({
 								width: "min(600px, 92vw)",
 								maxHeight: "78vh",
 								overflowY: "auto",
-								padding: "16px 18px",
-								background: "rgba(20, 24, 32, 0.98)",
-								color: "#e6e8ee",
-								borderRadius: 12,
-								boxShadow: "0 20px 60px rgba(0, 0, 0, 0.5)"
+								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", {
@@ -3252,14 +3517,14 @@ window.__ModuleLoader__.load({
 										alignItems: "center",
 										justifyContent: "space-between",
 										gap: 8,
-										marginBottom: 12
+										marginBottom: 18
 									},
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 										"data-toolbar-settings-title": true,
 										style: {
 											fontSize: 15,
 											fontWeight: 600,
-											color: "#e6e8ee"
+											color: MODAL_FG
 										},
 										children: t("settings.title")
 									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
@@ -3269,44 +3534,57 @@ window.__ModuleLoader__.load({
 										title: t("settings.close"),
 										onClick: closeSettings,
 										style: {
-											width: 26,
-											height: 26,
+											width: 28,
+											height: 28,
 											flexShrink: 0,
 											display: "flex",
 											alignItems: "center",
 											justifyContent: "center",
-											background: "transparent",
 											border: "none",
 											padding: 0,
 											cursor: "pointer",
-											color: "#8b96ab",
-											borderRadius: 6,
-											fontSize: 14,
+											color: MODAL_HINT,
+											borderRadius: MODAL_RADIUS_CONTROL,
 											lineHeight: 1
 										},
-										children: "✕"
+										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",
+											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: 14 },
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										"data-settings-section-title": true,
-										style: {
-											fontSize: 13,
-											fontWeight: 600,
-											color: "#c7cede",
-											marginBottom: 8
-										},
-										children: t("settings.section.features")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-										style: {
-											display: "grid",
-											gridTemplateColumns: "minmax(0, 1fr) 190px",
-											gap: 12,
-											alignItems: "stretch"
-										},
-										children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									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: 4
+											},
+											children: t("settings.section.features")
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+											"data-settings-pin-hint": true,
+											style: {
+												fontSize: 12,
+												color: MODAL_HINT,
+												lineHeight: 1.5,
+												marginBottom: 10
+											},
+											children: t("settings.pin.hint")
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 											style: {
 												display: "flex",
 												flexDirection: "column",
@@ -3314,92 +3592,163 @@ window.__ModuleLoader__.load({
 											},
 											children: toolbarFeatures.map((feature) => {
 												const checked = pinned.includes(feature.id);
-												return /* @__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),
-													onMouseEnter: () => setDescFeature(feature.id),
-													onFocus: () => setDescFeature(feature.id),
-													onClick: () => onTogglePin(feature.id),
-													style: {
-														display: "flex",
-														alignItems: "center",
-														justifyContent: "space-between",
-														gap: 10,
-														width: "100%",
-														padding: "7px 10px",
-														background: "transparent",
-														border: "none",
-														borderRadius: 8,
-														cursor: "pointer",
-														color: "#e6e8ee",
-														fontSize: 13,
-														textAlign: "left"
-													},
-													children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t(feature.labelKey) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-														"aria-hidden": "true",
+												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: {
-															position: "relative",
-															width: 32,
-															height: 18,
-															flexShrink: 0,
-															borderRadius: 9,
-															background: checked ? accentStrong : "rgba(255, 255, 255, 0.16)",
-															transition: "background 120ms ease"
+															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: {
+														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",
-															top: 2,
-															left: checked ? 16 : 2,
-															width: 14,
-															height: 14,
-															borderRadius: "50%",
-															background: "#ffffff",
-															transition: "left 120ms ease"
-														} })
+															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.jsx)("div", {
-											"data-settings-desc": true,
-											"aria-live": "polite",
-											style: {
-												display: "flex",
-												alignItems: "center",
-												padding: "10px 12px",
-												borderRadius: 8,
-												background: "rgba(255, 255, 255, 0.05)",
-												color: "#b9c2d4",
-												fontSize: 12.5,
-												lineHeight: 1.5
-											},
-											children: t(descKey)
-										})]
-									})]
+										})
+									]
 								}),
 								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 									"data-settings-section": true,
 									"data-settings-personal": true,
-									style: { marginBottom: 14 },
-									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-										"data-settings-section-title": true,
-										style: {
-											fontSize: 13,
-											fontWeight: 600,
-											color: "#c7cede",
-											marginBottom: 8
-										},
-										children: t("settings.section.personal")
-									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									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: 10
+											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",
@@ -3410,7 +3759,7 @@ window.__ModuleLoader__.load({
 												children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 													style: {
 														fontSize: 12.5,
-														color: "#8b96ab",
+														color: MODAL_HINT,
 														width: 90,
 														flexShrink: 0
 													},
@@ -3448,7 +3797,7 @@ window.__ModuleLoader__.load({
 															alignItems: "center",
 															gap: 6,
 															fontSize: 12.5,
-															color: "#b9c2d4",
+															color: MODAL_TEXT,
 															cursor: "pointer"
 														},
 														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
@@ -3479,7 +3828,7 @@ window.__ModuleLoader__.load({
 													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 														style: {
 															fontSize: 12.5,
-															color: "#8b96ab",
+															color: MODAL_HINT,
 															width: 90,
 															flexShrink: 0
 														},
@@ -3503,7 +3852,7 @@ window.__ModuleLoader__.load({
 														"data-icon-size-value": true,
 														style: {
 															fontSize: 12.5,
-															color: "#b9c2d4",
+															color: MODAL_TEXT,
 															width: 40
 														},
 														children: [iconSize, "px"]
@@ -3521,7 +3870,7 @@ window.__ModuleLoader__.load({
 													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 														style: {
 															fontSize: 12.5,
-															color: "#8b96ab",
+															color: MODAL_HINT,
 															width: 90,
 															flexShrink: 0
 														},
@@ -3545,7 +3894,7 @@ window.__ModuleLoader__.load({
 														"data-inset-value": true,
 														style: {
 															fontSize: 12.5,
-															color: "#b9c2d4",
+															color: MODAL_TEXT,
 															width: 40
 														},
 														children: [inset, "px"]
@@ -3565,7 +3914,7 @@ window.__ModuleLoader__.load({
 													/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 														style: {
 															fontSize: 12.5,
-															color: "#8b96ab",
+															color: MODAL_HINT,
 															width: 90,
 															flexShrink: 0
 														},
@@ -3577,7 +3926,7 @@ window.__ModuleLoader__.load({
 															alignItems: "center",
 															gap: 5,
 															fontSize: 13,
-															color: "#e6e8ee",
+															color: MODAL_FG,
 															cursor: "pointer"
 														},
 														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
@@ -3595,7 +3944,7 @@ window.__ModuleLoader__.load({
 															alignItems: "center",
 															gap: 5,
 															fontSize: 13,
-															color: "#e6e8ee",
+															color: MODAL_FG,
 															cursor: "pointer"
 														},
 														children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
@@ -3612,16 +3961,177 @@ window.__ModuleLoader__.load({
 										]
 									})]
 								}),
+								/* @__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: 14 },
+									style: { marginBottom: 20 },
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 										"data-settings-section-title": true,
 										style: {
 											fontSize: 13,
 											fontWeight: 600,
-											color: "#c7cede",
+											color: MODAL_TITLE,
 											marginBottom: 8
 										},
 										children: t("settings.language")
@@ -3644,7 +4154,7 @@ window.__ModuleLoader__.load({
 												alignItems: "center",
 												gap: 5,
 												fontSize: 13,
-												color: "#e6e8ee",
+												color: MODAL_FG,
 												cursor: "pointer"
 											},
 											children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
@@ -3664,7 +4174,7 @@ window.__ModuleLoader__.load({
 									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 										style: {
 											fontSize: 12,
-											color: "#8b96ab",
+											color: MODAL_HINT,
 											marginBottom: 10
 										},
 										children: t("settings.support")
@@ -3771,13 +4281,12 @@ window.__ModuleLoader__.load({
 									onClick: onResetAll,
 									style: {
 										display: "block",
-										margin: "14px auto 0",
+										margin: "16px auto 2px",
 										padding: "7px 16px",
-										background: "rgba(255, 255, 255, 0.06)",
-										border: "1px solid rgba(255, 255, 255, 0.14)",
-										borderRadius: 8,
+										border: `1px solid ${MODAL_BORDER}`,
+										borderRadius: MODAL_RADIUS_CONTROL,
 										cursor: "pointer",
-										color: "#b9c2d4",
+										color: MODAL_TEXT,
 										fontSize: 12.5
 									},
 									children: t("settings.reset")
@@ -3821,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.2" })] }),
+								}), /* @__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: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-milestone",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "description": "Git-style milestone timeline for DeepSeek Harness: hover for metadata, click to jump to any message. 会话里程碑导航条：圆点时间线，定位并跳转到每条提问。",
   "type": "module",
   "main": "lib/index.js",