dsh-milestone 0.5.0 → 0.6.1

package/lib/client.js

@@ -149,6 +149,59 @@ window.__ModuleLoader__.load({
 			}
 		}
 		//#endregion
+		//#region src/client/deep-link-logic.ts
+		/**
+		* Pure deep-link helpers for the milestone rail: parse the `#msg=<key>` URL
+		* hash and rebuild it.
+		*
+		* The conversation anchor key is treated as an OPAQUE string — it is a
+		* length-prefixed node key like `13:input-message<messageId>` or
+		* `14:assistant-step3:2` (the length prefix makes naive splitting ambiguous),
+		* so the parser never inspects or splits the key itself. Callers match the
+		* returned key against the session's marks, which is the real validity check.
+		*
+		* Percent-encoding: the URL fragment parser percent-encodes `"` `<` `>` `` ` ``
+		* and lone `%`, so a hash built with a RAW `<`-containing key would read back
+		* from `location.hash` percent-encoded (`13:user%3Cdl-2%3E`) and never match
+		* a mark after a refresh. `buildMessageHash` therefore percent-encodes those
+		* characters itself (a byte-exact URL), and `parseDeepLinkHash` decodes them
+		* back — the key round-trips through the URL untouched.
+		*/
+		/** The URL hash fragment prefix that carries a message anchor key. */
+		const MSG_HASH_PREFIX = "msg=";
+		/**
+		* Characters the WHATWG URL fragment parser cannot round-trip raw (they are
+		* percent-encoded on parse): `"` (0x22), `<` (0x3C), `>` (0x3E), backtick
+		* (0x60), and `%` (0x25, so a literal `%` never reads as an escape start).
+		*/
+		const FRAGMENT_UNSAFE = /["<>\u0060%]/g;
+		/**
+		* Parse a `location.hash` fragment into the message anchor key it references.
+		* @param hash - the raw `location.hash` value: `''` or a fragment starting
+		*   with `#` (e.g. `#msg=13:input-messageabc`).
+		* @returns the anchor key (percent-escapes decoded), or null when the
+		*   fragment is not a message deep link: empty hash, `#msg=` with an empty
+		*   value, a `#msg` prefix without the `=`, any other hash shape, a hash
+		*   missing the leading `#`, or a malformed percent escape.
+		*/
+		function parseDeepLinkHash(hash) {
+			if (!hash.startsWith(`#${MSG_HASH_PREFIX}`)) return null;
+			const encoded = hash.slice(5);
+			if (encoded === "") return null;
+			try {
+				return decodeURIComponent(encoded);
+			} catch {
+				return null;
+			}
+		}
+		/**
+		* Build the URL hash fragment that deep-links to a message anchor key.
+		* @param key - the conversation node key (opaque, never parsed here).
+		*/
+		function buildMessageHash(key) {
+			return `#${MSG_HASH_PREFIX}${key.replace(FRAGMENT_UNSAFE, (c) => `%${c.charCodeAt(0).toString(16).toUpperCase()}`)}`;
+		}
+		//#endregion
 		//#region src/client/label-logic.ts
 		const MINUTE_MS = 6e4;
 		const HOUR_MS = 36e5;
@@ -450,13 +503,110 @@ window.__ModuleLoader__.load({
 			};
 		}
 		//#endregion
+		//#region src/client/useOutsideDismiss.ts
+		/**
+		* useOutsideDismiss: the shared "click outside to dismiss" contract behind the
+		* rail's floating panels (in-rail search / all-prompts list / cross-session
+		* search). While a panel is open, a pointerdown anywhere OUTSIDE it calls the
+		* caller's close handler; a pointerdown inside the panel (or on an excluded
+		* element) is left untouched.
+		*
+		* Event choice — window `pointerdown`:
+		*   - `pointerdown` unifies mouse / touch / pen, so dismissal works for every
+		*     input the harness surfaces; a `mousedown`-only listener would miss
+		*     touch taps entirely.
+		*   - Closing on the DOWN side of the gesture feels instant — the panel is
+		*     gone before the pointer is released, which is the expected behaviour
+		*     for fixed floating layers.
+		*
+		* Lifecycle: the listener is attached ONLY while `open` and removed on close
+		* / unmount, so a closed panel never intercepts events and no listener leaks.
+		*
+		* Opening-gesture guard: hooks arm their listener in an effect, which React
+		* runs AFTER the toggle's pointerdown/click that opened the panel — that
+		* gesture can therefore never reach the listener by construction. As
+		* defense-in-depth the hook also records its arming time and drops any
+		* pointerdown whose `timeStamp` STRICTLY predates it (an event still in
+		* flight from the opening gesture). Same-tick and later events pass through,
+		* and synthetic test events with `timeStamp === 0` (which carry no real
+		* timestamp) are kept — the guard never swallows a legitimate dispatch.
+		*
+		* `options.exclude` names targets the caller keeps for its own handler — the
+		* panel's own toggle button is the canonical case: its click owns the
+		* open/close flip, so a pointerdown on it must NOT also dismiss through the
+		* hook, or clicking an armed toggle would close on pointerdown and re-open on
+		* click.
+		*/
+		/**
+		* True when `target` is (or sits inside) an element matching `selector`.
+		* Panels use it to exclude their own rail-top toggle from dismissal (the
+		* toggle's data attribute is the established rail DOM contract, so the
+		* exclusion is just another access to it).
+		*/
+		function outsideDismissMatches(target, selector) {
+			return target instanceof Element && target.closest(selector) !== null;
+		}
+		/**
+		* @param panelRef - the floating panel's root element (only mounted while open).
+		* @param open - whether the panel is open; the window listener arms only when true.
+		* @param onClose - called once per outside pointerdown. `undefined` keeps the
+		*   hook inert — used while a call site still has no close path wired.
+		* @param options - optional exclusion predicate (see {@link OutsideDismissOptions}).
+		*/
+		function useOutsideDismiss(panelRef, open, onClose, options) {
+			const onCloseRef = (0, react.useRef)(onClose);
+			const excludeRef = (0, react.useRef)(options?.exclude);
+			(0, react.useEffect)(() => {
+				onCloseRef.current = onClose;
+				excludeRef.current = options?.exclude;
+			});
+			(0, react.useEffect)(() => {
+				if (!open) return;
+				const armedAt = performance.now();
+				const onPointerDown = (e) => {
+					const onClose = onCloseRef.current;
+					if (onClose === void 0) return;
+					if (e.timeStamp > 0 && e.timeStamp < armedAt) return;
+					if (excludeRef.current?.(e.target)) return;
+					const panel = panelRef.current;
+					if (panel !== null && e.target instanceof Node && panel.contains(e.target)) return;
+					onClose();
+				};
+				window.addEventListener("pointerdown", onPointerDown);
+				return () => window.removeEventListener("pointerdown", onPointerDown);
+			}, [open, panelRef]);
+		}
+		//#endregion
 		//#region src/client/MilestoneRailSearch.tsx
+		/**
+		* RailSearchUi: the in-rail search chrome (F1) — the magnifier toggle pinned
+		* to the rail's top and the compact search panel to its left (input, match
+		* counter, clear button).
+		*
+		* Pure presentation: it owns no state. MilestoneRail holds the search state
+		* and handlers and feeds them in as props, so the search lifecycle (query,
+		* match cycle, escape semantics) stays component-local in the rail. Splitting
+		* the chrome into its own file keeps the rail component under the size
+		* ceiling while the two still render one DOM contract
+		* (`data-search-toggle` / `data-rail-search` / `data-match-count` /
+		* `data-search-clear`).
+		*
+		* Outside dismissal: while the panel is open, a pointerdown anywhere outside
+		* it closes it (shared useOutsideDismiss hook). The toggle's own click keeps
+		* its flip semantics — a pointerdown on `[data-search-toggle]` is excluded
+		* from the hook and left to the rail's onToggle. Without a dedicated onClose
+		* prop the fallback is the toggle-off path (query retained, same as clicking
+		* the toggle), matching the rail's current call site; a dedicated onClose
+		* (clearSearch-equivalent) takes precedence once MilestoneRail feeds one.
+		*/
 		/** Dot diameter (px) — matches the rail's DOT_HIT so the toggle aligns. */
-		const DOT_HIT$1 = 22;
+		const DOT_HIT$1 = 28;
 		/**
 		* @param props - the search state slice plus the rail's event handlers.
 		*/
-		function RailSearchUi({ panelTop, panelRight, query, panelOpen, matches, total, onToggle, onQueryChange, onSearchKeyDown, onClear, t }) {
+		function RailSearchUi({ panelTop, panelRight, query, panelOpen, matches, total, onToggle, onQueryChange, onSearchKeyDown, onClear, onClose, t }) {
+			const panelRef = (0, react.useRef)(null);
+			useOutsideDismiss(panelRef, panelOpen, onClose ?? (() => onToggle()), { exclude: (target) => outsideDismissMatches(target, "[data-search-toggle]") });
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				"data-search-toggle": true,
@@ -477,8 +627,8 @@ window.__ModuleLoader__.load({
 					color: panelOpen ? "#9db8ff" : "#8b96ab"
 				},
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-					width: "13",
-					height: "13",
+					width: "16",
+					height: "16",
 					viewBox: "0 0 24 24",
 					fill: "none",
 					stroke: "currentColor",
@@ -492,11 +642,12 @@ window.__ModuleLoader__.load({
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m21 21-4.3-4.3" })]
 				})
 			}), panelOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: panelRef,
 				style: {
 					position: "fixed",
 					top: panelTop,
 					right: panelRight,
-					width: 220,
+					width: "min(220px, calc(100vw - 48px))",
 					padding: "10px 12px",
 					background: "rgba(20, 24, 32, 0.97)",
 					color: "#e6e8ee",
@@ -521,8 +672,9 @@ window.__ModuleLoader__.load({
 						style: {
 							flex: 1,
 							minWidth: 0,
-							padding: "5px 8px",
-							fontSize: 12,
+							padding: "6px 10px",
+							fontSize: 14,
+							lineHeight: 1.4,
 							color: "#e6e8ee",
 							background: "rgba(255, 255, 255, 0.08)",
 							border: "1px solid rgba(255, 255, 255, 0.16)",
@@ -548,8 +700,8 @@ window.__ModuleLoader__.load({
 							color: "#8b96ab"
 						},
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
-							width: "10",
-							height: "10",
+							width: "12",
+							height: "12",
 							viewBox: "0 0 24 24",
 							fill: "none",
 							stroke: "currentColor",
@@ -563,7 +715,7 @@ window.__ModuleLoader__.load({
 					"data-match-count": true,
 					style: {
 						marginTop: 6,
-						fontSize: 11,
+						fontSize: 13,
 						color: "#8b96ab"
 					},
 					children: [
@@ -575,6 +727,124 @@ window.__ModuleLoader__.load({
 			})] });
 		}
 		//#endregion
+		//#region src/client/MilestoneListPanel.tsx
+		/**
+		* MilestoneListPanel: the expandable all-prompts panel (P3) — the compact
+		* list chrome pinned to the rail's top that enumerates EVERY user-prompt
+		* milestone (序号 + turn + preview), independent of the search/bookmarks
+		* filters. Clicking an entry jumps to that message through the rail's own
+		* `jump` handler (the same path the dots use).
+		*
+		* Pure presentation: it owns no state. MilestoneRail holds the `listOpen`
+		* boolean (the toggle and the Escape/close semantics live there) and feeds
+		* the panel its anchor, the full marks array, and the jump handler as props
+		* — same split as RailSearchUi. Renders one DOM contract
+		* (`data-milestone-list` root / `data-list-item` rows with `data-jump-key`).
+		*
+		* Outside dismissal: while the panel is mounted (it only renders while open),
+		* a pointerdown anywhere outside it calls the rail-fed `onClose` (shared
+		* useOutsideDismiss hook; the toggle's own click keeps its flip semantics
+		* through a `[data-list-toggle]` exclusion). MilestoneRail.tsx does NOT pass
+		* onClose in the current tree (its owner is wiring it separately) — until
+		* then the hook is inert and the panel keeps its existing behaviour.
+		*/
+		/**
+		* @param props - the panel anchor, the full marks array, and the rail's jump handler.
+		*/
+		function MilestoneListPanel({ panelTop, panelRight, marks, onJump, onClose, t }) {
+			const panelRef = (0, react.useRef)(null);
+			useOutsideDismiss(panelRef, true, onClose, { exclude: (target) => outsideDismissMatches(target, "[data-list-toggle]") });
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: panelRef,
+				"data-milestone-list": true,
+				style: {
+					position: "fixed",
+					top: panelTop,
+					right: panelRight,
+					width: "min(280px, 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: 103
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: `[data-list-item]:hover { background: rgba(77, 124, 254, 0.18); }` }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 6,
+							marginBottom: 6
+						},
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								fontSize: 13,
+								fontWeight: 600,
+								color: "#e6e8ee"
+							},
+							children: t("list.label")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								fontSize: 12,
+								color: "#8b96ab"
+							},
+							children: marks.length
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: {
+							maxHeight: 300,
+							overflowY: "auto",
+							display: "flex",
+							flexDirection: "column",
+							gap: 2
+						},
+						children: marks.map((mark, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							"data-list-item": true,
+							"data-jump-key": mark.key,
+							onClick: () => onJump(mark.key),
+							title: mark.preview,
+							style: {
+								display: "block",
+								width: "100%",
+								minWidth: 0,
+								padding: "6px 8px",
+								background: "transparent",
+								border: "none",
+								borderRadius: 6,
+								cursor: "pointer",
+								color: "#e6e8ee",
+								textAlign: "left"
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+								style: {
+									fontSize: 12,
+									color: "#8b96ab",
+									whiteSpace: "nowrap"
+								},
+								children: [t("pos.of", {
+									n: i + 1,
+									m: marks.length
+								}), mark.turn !== void 0 ? ` · ${t("turn.label", { n: mark.turn })}` : null]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								style: {
+									fontSize: 13,
+									lineHeight: 1.4,
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+									whiteSpace: "nowrap"
+								},
+								children: mark.preview || t("no.text")
+							})]
+						}, mark.key))
+					})
+				]
+			});
+		}
+		//#endregion
 		//#region src/client/MilestoneRailTooltip.tsx
 		/**
 		* @param props - the hovered mark + bookmark wiring (see {@link MilestoneRailTooltipProps}).
@@ -591,14 +861,14 @@ window.__ModuleLoader__.load({
 					right: panelRight,
 					top: hover.top,
 					transform: "translateY(-50%)",
-					maxWidth: 300,
+					maxWidth: "min(300px, calc(100vw - 120px))",
 					minWidth: 180,
 					padding: "8px 12px",
 					background: "rgba(20, 24, 32, 0.96)",
 					color: "#e6e8ee",
 					borderRadius: 8,
-					fontSize: 12,
-					lineHeight: 1.6,
+					fontSize: "var(--dsw-font-s-14, 14px)",
+					lineHeight: 1.5,
 					whiteSpace: "pre-wrap",
 					wordBreak: "break-word",
 					boxShadow: "0 6px 20px rgba(0, 0, 0, 0.4)",
@@ -613,7 +883,8 @@ window.__ModuleLoader__.load({
 							flexWrap: "wrap",
 							gap: 8,
 							color: "#9aa4b8",
-							fontSize: 11,
+							fontSize: 13,
+							lineHeight: 1.4,
 							marginBottom: 4
 						},
 						children: [
@@ -647,8 +918,8 @@ window.__ModuleLoader__.load({
 									color: bookmarked ? "#ffd166" : "#8b96ab"
 								},
 								children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-									width: "13",
-									height: "13",
+									width: "14",
+									height: "14",
 									viewBox: "0 0 24 24",
 									fill: bookmarked ? "currentColor" : "none",
 									stroke: "currentColor",
@@ -673,7 +944,7 @@ window.__ModuleLoader__.load({
 									justifyContent: "center",
 									background: "transparent",
 									border: "none",
-									padding: "2px 6px",
+									padding: "3px 8px",
 									cursor: "pointer",
 									whiteSpace: "nowrap",
 									color: copied ? "#7ee2a8" : "#8b96ab"
@@ -695,7 +966,7 @@ window.__ModuleLoader__.load({
 									justifyContent: "center",
 									background: "transparent",
 									border: "none",
-									padding: "2px 6px",
+									padding: "3px 8px",
 									cursor: "pointer",
 									whiteSpace: "nowrap",
 									color: forked ? "#7ee2a8" : "#8b96ab"
@@ -718,7 +989,7 @@ window.__ModuleLoader__.load({
 									justifyContent: "center",
 									background: "transparent",
 									border: "none",
-									padding: "2px 6px",
+									padding: "3px 8px",
 									cursor: "pointer",
 									whiteSpace: "nowrap",
 									color: turnCollapsed ? "#7ee2a8" : "#8b96ab"
@@ -737,7 +1008,8 @@ window.__ModuleLoader__.load({
 							flexWrap: "wrap",
 							gap: 8,
 							color: "#8b96ab",
-							fontSize: 11,
+							fontSize: 13,
+							lineHeight: 1.4,
 							marginTop: 4
 						},
 						children: [
@@ -754,7 +1026,8 @@ window.__ModuleLoader__.load({
 							flexWrap: "wrap",
 							gap: 8,
 							color: "#8b96ab",
-							fontSize: 11,
+							fontSize: 13,
+							lineHeight: 1.4,
 							marginTop: 4
 						},
 						children: [
@@ -776,6 +1049,193 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/MilestoneSessionSearch.tsx
+		/**
+		* MilestoneSessionSearch: the cross-session search panel (P3) — the fixed
+		* chrome pinned to the rail's top that searches EVERY session's message
+		* content through the injected `searchSessions` action (the harness
+		* `session.search` RPC), lists ranked hits (display title + snippet), and
+		* opens the clicked session via `openSession` (the same selection path the
+		* sidebar uses).
+		*
+		* Owns its search lifecycle — debounce + AbortController + status — unlike
+		* the rail's in-session search (RailSearchUi), which is a pure presentation
+		* slice of MilestoneRail's own state. Mirrors MilestoneListPanel's
+		* fixed-panel styling. Renders one DOM contract
+		* (`data-session-search` root / `data-session-search-input` /
+		* `data-session-search-result` rows / `data-session-search-error` /
+		* `data-session-search-more`).
+		*
+		* Outside dismissal: while the panel is mounted (it only renders while open),
+		* a pointerdown anywhere outside it calls the rail-fed `onClose` (shared
+		* useOutsideDismiss hook; the toggle's own click keeps its flip semantics
+		* through a `[data-session-search-toggle]` exclusion).
+		*/
+		/** Debounce window for the cross-session query (ms). */
+		const SEARCH_DEBOUNCE_MS = 250;
+		/**
+		* @param props - the panel anchor, the close/open/search actions, and the locale interpreter.
+		*/
+		function MilestoneSessionSearch({ panelTop, panelRight, onClose, searchSessions, openSession, t }) {
+			const [query, setQuery] = (0, react.useState)("");
+			const [status, setStatus] = (0, react.useState)("idle");
+			const [hits, setHits] = (0, react.useState)([]);
+			const [hasMore, setHasMore] = (0, react.useState)(false);
+			const panelRef = (0, react.useRef)(null);
+			useOutsideDismiss(panelRef, true, onClose, { exclude: (target) => outsideDismissMatches(target, "[data-session-search-toggle]") });
+			(0, react.useEffect)(() => {
+				const trimmed = query.trim();
+				if (trimmed === "") {
+					setStatus("idle");
+					return;
+				}
+				const controller = new AbortController();
+				setStatus("loading");
+				const timer = window.setTimeout(() => {
+					searchSessions(trimmed, controller.signal).then((result) => {
+						if (controller.signal.aborted) return;
+						setHits(result.items);
+						setHasMore(result.hasMore);
+						setStatus(result.items.length > 0 ? "results" : "empty");
+					}, () => {
+						if (controller.signal.aborted) return;
+						setStatus("error");
+					});
+				}, SEARCH_DEBOUNCE_MS);
+				return () => {
+					window.clearTimeout(timer);
+					controller.abort();
+				};
+			}, [query, searchSessions]);
+			const onInputKeyDown = (e) => {
+				if (e.key === "Escape") onClose();
+			};
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				ref: panelRef,
+				"data-session-search": true,
+				style: {
+					position: "fixed",
+					top: panelTop,
+					right: panelRight,
+					width: "min(280px, 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: 103
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: `[data-session-search-result]:hover { background: rgba(77, 124, 254, 0.18); }` }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: {
+							display: "flex",
+							alignItems: "center",
+							gap: 6,
+							marginBottom: 6
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							style: {
+								fontSize: 13,
+								fontWeight: 600,
+								color: "#e6e8ee"
+							},
+							children: t("search.cross")
+						})
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+						"data-session-search-input": true,
+						"aria-label": t("search.cross"),
+						placeholder: t("search.cross"),
+						value: query,
+						onChange: (e) => setQuery(e.target.value),
+						onKeyDown: onInputKeyDown,
+						autoFocus: true,
+						style: {
+							boxSizing: "border-box",
+							width: "100%",
+							padding: "6px 10px",
+							fontSize: 14,
+							lineHeight: 1.4,
+							color: "#e6e8ee",
+							background: "rgba(255, 255, 255, 0.08)",
+							border: "1px solid rgba(255, 255, 255, 0.16)",
+							borderRadius: 6,
+							outline: "none"
+						}
+					}),
+					status === "error" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-session-search-error": true,
+						style: {
+							marginTop: 8,
+							fontSize: 13,
+							color: "#f07c7c"
+						},
+						children: t("search.error")
+					}),
+					status === "results" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						style: {
+							maxHeight: 300,
+							overflowY: "auto",
+							display: "flex",
+							flexDirection: "column",
+							gap: 2,
+							marginTop: 8
+						},
+						children: hits.map((hit) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+							type: "button",
+							"data-session-search-result": true,
+							onClick: () => {
+								openSession(hit.sessionId);
+								onClose();
+							},
+							title: hit.snippet,
+							style: {
+								display: "block",
+								width: "100%",
+								minWidth: 0,
+								padding: "6px 8px",
+								background: "transparent",
+								border: "none",
+								borderRadius: 6,
+								cursor: "pointer",
+								color: "#e6e8ee",
+								textAlign: "left"
+							},
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								style: {
+									fontSize: 12,
+									color: "#9db8ff",
+									whiteSpace: "nowrap",
+									overflow: "hidden",
+									textOverflow: "ellipsis"
+								},
+								children: hit.title ?? t("search.untitled")
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+								style: {
+									fontSize: 13,
+									lineHeight: 1.4,
+									color: "#c6ccd8",
+									overflow: "hidden",
+									textOverflow: "ellipsis",
+									whiteSpace: "nowrap"
+								},
+								children: hit.snippet
+							})]
+						}, hit.sessionId))
+					}), hasMore && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						"data-session-search-more": true,
+						style: {
+							marginTop: 6,
+							fontSize: 12,
+							color: "#8b96ab"
+						},
+						children: t("search.more")
+					})] })
+				]
+			});
+		}
+		//#endregion
 		//#region src/client/useCurrentAnchor.ts
 		/**
 		* useCurrentAnchor: tracks which user-message row sits at/just above the
@@ -838,6 +1298,416 @@ window.__ModuleLoader__.load({
 			return current;
 		}
 		//#endregion
+		//#region src/client/toolbar-prefs.ts
+		/**
+		* toolbar-prefs: the persistence layer for the milestone rail's collapsible
+		* toolbar "pinned outside the collapse" preferences.
+		*
+		* 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).
+		*
+		* 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.
+		*
+		* The whitelist lives HERE (not in MilestoneRail) so the pure functions stay
+		* dependency-free and unit-testable; MilestoneRail's feature registry keys
+		* itself against the same `ToolbarPinId` type, so id drift is a compile error.
+		*/
+		/** The single localStorage key holding the toolbar preference blob. */
+		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.
+		*/
+		const TOOLBAR_PIN_IDS = [
+			"search",
+			"list",
+			"sessionSearch",
+			"bookmarks",
+			"focus",
+			"updateCheck"
+		];
+		/** 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 [];
+			const seen = /* @__PURE__ */ new Set();
+			const result = [];
+			for (const id of pinned) {
+				if (typeof id !== "string" || !isToolbarPinId(id) || seen.has(id)) continue;
+				seen.add(id);
+				result.push(id);
+			}
+			return result;
+		}
+		/**
+		* 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.
+		*/
+		function loadPrefs() {
+			try {
+				return parsePrefs(localStorage.getItem(TOOLBAR_PREFS_KEY));
+			} catch {
+				return [];
+			}
+		}
+		/**
+		* 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}.
+		*/
+		function savePrefs(pinned) {
+			const cleaned = parsePrefs(JSON.stringify({ pinned: [...pinned] }));
+			try {
+				localStorage.setItem(TOOLBAR_PREFS_KEY, JSON.stringify({ pinned: 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
+		* straight back into {@link savePrefs}.
+		*/
+		function togglePin(pinned, id) {
+			if (!isToolbarPinId(id)) return [...pinned];
+			const next = new Set(pinned);
+			if (next.has(id)) next.delete(id);
+			else next.add(id);
+			return parsePrefs(JSON.stringify({ pinned: [...next] }));
+		}
+		//#endregion
+		//#region src/client/version-logic.ts
+		/**
+		* Pure update-check logic for dsh-milestone, deliberately free of React, the
+		* harness runtime, and any node-only API so it runs identically in the browser
+		* bundle, vitest (jsdom), and future shells.
+		*
+		* Design intent:
+		* - `compareVersions` / `needsUpdate` are pure, side-effect-free functions that
+		*   follow npm semver precedence for the shapes this plugin actually publishes
+		*   (`x.y.z` plus optional `-rc.N` / `-beta.N` prereleases). Anything else is
+		*   an explicit error rather than a silent mis-comparison.
+		* - `fetchLatestVersion` is the only I/O: it reads the `latest` dist-tag from
+		*   npmmirror's cheap dist-tags endpoint first (it CORS-echoes this page's
+		*   Origin), then falls back to the full npm packument (ACAO: *). Every
+		*   request carries an internal 8s timeout combined with the caller's signal —
+		*   whichever aborts first wins — and every failure degrades to a structured
+		*   `{ ok: false }` result, never a throw.
+		* - `SUPPORTED_HOST_LINES` is a SELF-DECLARED compatibility list, not a probe:
+		*   the harness reports no trustworthy host version in the browser
+		*   (`host.describe().version` is a stub), so the plugin declares which npm
+		*   `latest` host-version lines it supports and the UI renders that as-is.
+		*/
+		/** Host-version lines this plugin declares support for (npm official latest
+		* line; bump it as the peer/dependency ranges move). */
+		const SUPPORTED_HOST_LINES = ["0.1.1-rc.2"];
+		/** Internal per-request timeout for the network attempts. */
+		const REQUEST_TIMEOUT_MS = 8e3;
+		/** npmmirror dist-tags endpoint: lean JSON (`{"latest":"0.6.0", ...}`),
+		* echoes this page's Origin in `Access-Control-Allow-Origin`. */
+		const NPMIRROR_DIST_TAGS_URL = "https://registry.npmmirror.com/-/package/dsh-milestone/dist-tags";
+		/** npm full packument; `dist-tags.latest` sits at the JSON root, and the
+		* endpoint sends `Access-Control-Allow-Origin: *`. */
+		const NPM_PACKUMENT_URL = "https://registry.npmjs.org/dsh-milestone";
+		/** Numeric identifier test shared by core and prerelease segments. */
+		const NUMERIC_RE = /^\d+$/;
+		/**
+		* Parse a version string into comparable parts.
+		* Accepts `major[.minor[.patch]][-prerelease][+build]`; missing core segments
+		* pad with 0 and `+build` metadata is ignored (per semver precedence).
+		* @throws {Error} with the offending input when the shape is not parseable.
+		*/
+		function parseVersion(input) {
+			if (typeof input !== "string" || input.trim() === "") throw new Error(`Invalid semantic version: ${JSON.stringify(input)} (expected "x.y.z" with optional "-pre" suffix)`);
+			const s = input.trim();
+			const plus = s.indexOf("+");
+			const withoutBuild = plus === -1 ? s : s.slice(0, plus);
+			const dash = withoutBuild.indexOf("-");
+			const corePart = dash === -1 ? withoutBuild : withoutBuild.slice(0, dash);
+			const prePart = dash === -1 ? void 0 : withoutBuild.slice(dash + 1);
+			const segments = corePart.split(".");
+			if (segments.length < 1 || segments.length > 3 || !segments.every((seg) => NUMERIC_RE.test(seg))) throw new Error(`Invalid semantic version: ${JSON.stringify(input)} (expected "x.y.z" with optional "-pre" suffix)`);
+			const core = segments.map(Number);
+			let pre = [];
+			if (prePart !== void 0) {
+				if (prePart === "" || !prePart.split(".").every((id) => /^[0-9A-Za-z-]+$/.test(id))) throw new Error(`Invalid semantic version: ${JSON.stringify(input)} (bad prerelease suffix)`);
+				pre = prePart.split(".");
+			}
+			return {
+				core,
+				pre
+			};
+		}
+		/**
+		* Compare two version strings per npm semver precedence.
+		* @param a - first version (`x.y.z` with optional `-pre` suffix; build
+		* metadata ignored; missing core segments pad with 0).
+		* @param b - second version, same grammar.
+		* @returns -1 when `a < b`, 0 when equal, 1 when `a > b`. Prereleases sort
+		* below their same-number release; prerelease identifiers compare numerically
+		* when both are numeric, lexically when both are alphanumeric, and numeric
+		* identifiers always sort before alphanumeric ones.
+		* @throws {Error} for inputs that do not match the grammar.
+		*/
+		function compareVersions(a, b) {
+			const pa = parseVersion(a);
+			const pb = parseVersion(b);
+			for (let i = 0; i < 3; i++) {
+				const x = pa.core[i] ?? 0;
+				const y = pb.core[i] ?? 0;
+				if (x < y) return -1;
+				if (x > y) return 1;
+			}
+			if (pa.pre.length === 0 && pb.pre.length === 0) return 0;
+			if (pa.pre.length === 0) return 1;
+			if (pb.pre.length === 0) return -1;
+			const len = Math.max(pa.pre.length, pb.pre.length);
+			for (let i = 0; i < len; i++) {
+				const x = pa.pre[i];
+				const y = pb.pre[i];
+				if (x === void 0) return -1;
+				if (y === void 0) return 1;
+				const xNum = NUMERIC_RE.test(x);
+				const yNum = NUMERIC_RE.test(y);
+				if (xNum && yNum) {
+					if (x !== y) return Number(x) < Number(y) ? -1 : 1;
+				} else if (xNum) return -1;
+				else if (yNum) return 1;
+				else if (x !== y) return x < y ? -1 : 1;
+			}
+			return 0;
+		}
+		/**
+		* Whether the installed plugin should offer an update.
+		* @param current - installed version.
+		* @param latest - newest published version.
+		* @returns true only when `latest` is strictly greater than `current`
+		* (identical versions, or a newer installed version, return false).
+		* @throws {Error} when either input is not a parseable version.
+		*/
+		function needsUpdate(current, latest) {
+			return compareVersions(current, latest) < 0;
+		}
+		/**
+		* Build a request signal: a fresh AbortController aborted by EITHER the
+		* caller's external signal (which wins when it fires first) OR an internal
+		* timeout. Uses `AbortSignal.timeout` when the environment provides it and
+		* falls back to a manual `setTimeout` + abort otherwise (jsdom older
+		* versions expose no `AbortSignal.timeout`).
+		* @param external - caller signal; when already aborted the request fires
+		* immediately with an aborted signal.
+		* @param timeoutMs - internal timeout in ms.
+		* @returns the combined signal plus a cleanup that detaches all listeners
+		* (must be called so no listener outlives the request).
+		*/
+		function createRequestSignal(external, timeoutMs) {
+			const controller = new AbortController();
+			const abort = () => controller.abort();
+			const detach = [];
+			if (external) if (external.aborted) controller.abort();
+			else {
+				external.addEventListener("abort", abort, { once: true });
+				detach.push(() => external.removeEventListener("abort", abort));
+			}
+			if (typeof AbortSignal !== "undefined" && typeof AbortSignal.timeout === "function") {
+				const t = AbortSignal.timeout(timeoutMs);
+				t.addEventListener("abort", abort, { once: true });
+				detach.push(() => t.removeEventListener("abort", abort));
+			} else {
+				const timer = setTimeout(abort, timeoutMs);
+				detach.push(() => clearTimeout(timer));
+			}
+			return {
+				signal: controller.signal,
+				cleanup: () => {
+					for (const fn of detach) fn();
+					detach.length = 0;
+				}
+			};
+		}
+		/** Extract `latest` from the npmmirror dist-tags JSON root. */
+		function extractFromDistTags(data) {
+			if (data === null || typeof data !== "object") return null;
+			const latest = data.latest;
+			return typeof latest === "string" && latest.length > 0 ? latest : null;
+		}
+		/** Extract `latest` from the npm packument's root `dist-tags` object. */
+		function extractFromPackument(data) {
+			if (data === null || typeof data !== "object") return null;
+			const distTags = data["dist-tags"];
+			if (distTags === null || typeof distTags !== "object") return null;
+			const latest = distTags.latest;
+			return typeof latest === "string" && latest.length > 0 ? latest : null;
+		}
+		/** Human-readable failure detail for one endpoint attempt. */
+		function describeError(source, cause) {
+			const name = cause instanceof Error ? cause.name : "";
+			const message = cause instanceof Error ? cause.message : String(cause);
+			if (name === "AbortError") return `${source}: aborted (${message})`;
+			return `${source}: ${message}`;
+		}
+		/**
+		* One attempt at fetching the `latest` dist-tag from an endpoint.
+		* @returns ok with the tag, or ok:false with a per-source error description.
+		*/
+		async function tryFetchLatest(url, extract, source, external) {
+			try {
+				const { signal, cleanup } = createRequestSignal(external, REQUEST_TIMEOUT_MS);
+				try {
+					const res = await fetch(url, { signal });
+					if (!res.ok) throw new Error(`HTTP ${res.status}`);
+					const latest = extract(await res.json());
+					if (latest === null) throw new Error("unexpected response shape (no \"latest\" dist-tag)");
+					return {
+						ok: true,
+						latest,
+						source
+					};
+				} finally {
+					cleanup();
+				}
+			} catch (cause) {
+				return {
+					ok: false,
+					error: describeError(source, cause)
+				};
+			}
+		}
+		/**
+		* Query npm for the newest published version of `dsh-milestone`.
+		*
+		* Strategy: npmmirror's dist-tags endpoint first (lightweight and CORS-open
+		* to this Origin); if that fails or its shape is wrong, the full npm
+		* packument fallback (`dist-tags.latest` at the JSON root). Each request
+		* aborts after 8s via `AbortSignal.timeout` (manual timer fallback when the
+		* environment lacks it) OR immediately when the passed-in signal aborts.
+		* @param signal - optional caller abort signal; aborts the in-flight attempt
+		* with priority over the internal timeout.
+		* @returns the latest version and which registry answered, or a structured
+		* error when both endpoints fail. Never throws.
+		*/
+		async function fetchLatestVersion(signal) {
+			const viaMirror = await tryFetchLatest(NPMIRROR_DIST_TAGS_URL, extractFromDistTags, "npmmirror", signal);
+			if (viaMirror.ok) return viaMirror;
+			const viaNpm = await tryFetchLatest(NPM_PACKUMENT_URL, extractFromPackument, "npm", signal);
+			if (viaNpm.ok) return viaNpm;
+			return {
+				ok: false,
+				error: `${viaMirror.error}; ${viaNpm.error}`
+			};
+		}
+		/** localStorage key holding the last successful update check. */
+		const UPDATE_CACHE_KEY = "dsh-milestone.update-cache";
+		/**
+		* Pure parse + freshness check of a stored blob: `null` for `null`/invalid
+		* JSON, a wrong shape, or an entry older than {@link UPDATE_CACHE_TTL_MS}.
+		* A `checkedAt` in the future (clock skew) is treated as fresh — it decays
+		* naturally once wall time catches up. Never throws.
+		* @param raw - the raw `localStorage` value (or null when absent).
+		* @param now - wall-clock epoch ms to judge freshness against (injectable for
+		* tests; defaults to `Date.now()`).
+		*/
+		function parseUpdateCache(raw, now = Date.now()) {
+			if (raw === null) return null;
+			let parsed;
+			try {
+				parsed = JSON.parse(raw);
+			} catch {
+				return null;
+			}
+			if (typeof parsed !== "object" || parsed === null) return null;
+			const { latest, source, checkedAt } = parsed;
+			if (typeof latest !== "string" || latest === "") return null;
+			if (source !== "npmmirror" && source !== "npm") return null;
+			if (typeof checkedAt !== "number" || !Number.isFinite(checkedAt)) return null;
+			if (now - checkedAt >= 216e5) return null;
+			return {
+				latest,
+				source,
+				checkedAt
+			};
+		}
+		/**
+		* Read + parse the persisted cache entry from localStorage. Any storage
+		* failure degrades to `null` (cache miss) — the update check is best-effort.
+		* @param now - wall-clock epoch ms for freshness (see {@link parseUpdateCache}).
+		*/
+		function readUpdateCache(now = Date.now()) {
+			try {
+				return parseUpdateCache(localStorage.getItem(UPDATE_CACHE_KEY), now);
+			} catch {
+				return null;
+			}
+		}
+		/**
+		* Persist a successful check result (the caller supplies `checkedAt`, usually
+		* `Date.now()`). Silently ignores storage failures — the cache is an
+		* optimization, never a hard dependency.
+		*/
+		function writeUpdateCache(entry) {
+			try {
+				localStorage.setItem(UPDATE_CACHE_KEY, JSON.stringify(entry));
+			} catch {}
+		}
+		/**
+		* The cache-aware entry point for the UI: reuse an unexpired cached result
+		* when one exists, otherwise query npm (npmmirror → packument fallback) and
+		* persist a successful result for the next {@link UPDATE_CACHE_TTL_MS}.
+		* Never throws; failures return the same structured `{ ok: false }` result as
+		* {@link fetchLatestVersion}.
+		* @param signal - optional caller abort signal, forwarded to the network
+		* attempt only (a cache hit needs no signal).
+		*/
+		async function loadCachedLatest(signal) {
+			const cached = readUpdateCache();
+			if (cached !== null) return {
+				ok: true,
+				latest: cached.latest,
+				source: cached.source
+			};
+			const fresh = await fetchLatestVersion(signal);
+			if (fresh.ok) writeUpdateCache({
+				latest: fresh.latest,
+				source: fresh.source,
+				checkedAt: Date.now()
+			});
+			return fresh;
+		}
+		//#endregion
+		//#region src/client/version-meta.ts
+		/**
+		* Installed plugin version. Injected at build time as
+		* `__DSH_MILESTONE_VERSION__`; falls back to `0.0.0-dev` when unbuilt.
+		*/
+		const PLUGIN_VERSION = "0.6.1";
+		//#endregion
 		//#region src/client/MilestoneRail.tsx
 		/**
 		* MilestoneRail: the milestone.rail entry (session scope). Renders a fixed
@@ -890,15 +1760,58 @@ window.__ModuleLoader__.load({
   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). */
-		const DOT_SIZE = 12;
+		const DOT_SIZE = 14;
 		/** Hit area per dot (px) — larger than the dot for comfortable clicking. */
-		const DOT_HIT = 22;
+		const DOT_HIT = 28;
 		/** Vertical gap between dot hit areas (px) — fixed pitch, never scaled. */
-		const DOT_GAP = 12;
+		const DOT_GAP = 14;
 		/** Inward offset from the scrollport right edge so the rail clears the scrollbar. */
 		const RAIL_INSET = 14;
 		/**
+		* P3 deep links (`#msg=<anchor-key>`): initial delay before the first
+		* deep-link attempt — the harness scrolls the conversation to the bottom on
+		* load, so the deep link must land AFTER the view mounts.
+		*/
+		const DEEP_LINK_INITIAL_DELAY = 100;
+		/** P3: interval between DOM-row polls while waiting for the target to render. */
+		const DEEP_LINK_POLL_DELAY = 150;
+		/** P3: polls before falling back to a single `loadOlder` fetch. */
+		const DEEP_LINK_MAX_POLLS = 5;
+		/** P3: bounded polls after `loadOlder`, then the deep link gives up silently. */
+		const DEEP_LINK_MAX_RETRY_POLLS = 5;
+		/** B4 update-check: mount-time silent check delay (ms) — give the harness
+		* time to settle before hitting the registry. */
+		const UPDATE_CHECK_MOUNT_DELAY = 1500;
+		/** Initial state: no check has completed yet, nothing to show. */
+		const NO_UPDATE_CHECK = {
+			phase: "idle",
+			latest: null,
+			source: null,
+			error: null,
+			available: false
+		};
+		/**
+		* B4 display label for one supported host line: strips the fixed
+		* `x.y.z` prefix and appends "line" — `0.1.1-rc.2` → `rc.2 line`,
+		* `0.1.1` → `0.1.1 line`. Pure presentation metadata.
+		*/
+		function hostLineLabel(line) {
+			const suffix = line.replace(/^\d+\.\d+\.\d+-?/, "");
+			return suffix === "" ? `${line} line` : `${suffix} line`;
+		}
+		/**
 		* Find a chat row by its node key, avoiding CSS.escape pitfalls on keys that
 		* contain `<`/`>`/`:` (the node key is `13:input-message<messageId>`).
 		*/
@@ -930,7 +1843,10 @@ window.__ModuleLoader__.load({
 		* `locale: 'dsh-milestone'`; defaults to a key-pass fallback for renders
 		* outside the slot machinery).
 		*/
-		function MilestoneRail({ useSession, loadOlder, forkAt, useStore, actions, t = (key) => key }) {
+		function MilestoneRail({ useSession, loadOlder, forkAt, useStore, actions, searchSessions = async () => ({
+			items: [],
+			hasMore: false
+		}), openSession = () => {}, t = (key) => key }) {
 			const order = useSession((s) => s.chat.order);
 			const nodes = useSession((s) => s.chat.nodes);
 			const locations = useSession((s) => s.chat.locations);
@@ -981,12 +1897,33 @@ window.__ModuleLoader__.load({
 				panelOpen: false
 			});
 			const [bookmarksOnly, setBookmarksOnly] = (0, react.useState)(false);
+			const [focusActive, setFocusActive] = (0, react.useState)(false);
+			const [listOpen, setListOpen] = (0, react.useState)(false);
+			const [crossOpen, setCrossOpen] = (0, react.useState)(false);
 			const [copiedKey, setCopiedKey] = (0, react.useState)(null);
 			const [forkedKey, setForkedKey] = (0, react.useState)(null);
 			const [collapsedTurns, setCollapsedTurns] = (0, react.useState)(/* @__PURE__ */ new Set());
 			const [focusIndex, setFocusIndex] = (0, react.useState)(0);
 			const listRef = (0, react.useRef)(null);
 			const currentKey = useCurrentAnchor(order);
+			/**
+			* P3: jump to the chat row with the given node key — smooth-scroll it into
+			* view and write the position back into the URL hash (`#msg=<key>`) so
+			* refresh and share preserve it. `history.replaceState` (not a
+			* `location.hash` assignment) keeps the history stack clean, and it never
+			* fires `hashchange`, so the deep-link listeners below never echo the
+			* rail's own updates. No-op when the row is not (yet) rendered — the
+			* deep-link mount retry and the load-older flow cover that case.
+			*/
+			const jump = (key) => {
+				const row = findRow(key);
+				if (row === null) return;
+				row.scrollIntoView({
+					behavior: "smooth",
+					block: "start"
+				});
+				history.replaceState(null, "", buildMessageHash(key));
+			};
 			const displayMarks = (0, react.useMemo)(() => {
 				if (!bookmarksOnly) return marks;
 				return filterByBookmarks(marks, bookmarkedKeys).visible.map((i) => marks[i]);
@@ -1041,13 +1978,141 @@ window.__ModuleLoader__.load({
 			(0, react.useLayoutEffect)(() => {
 				setFocusIndex((f) => clampIndex(f, render.items.length));
 			}, [render.items.length]);
-			if (railBox === null || marks.length < MIN_MARKS) return null;
-			const jump = (key) => {
-				findRow(key)?.scrollIntoView({
-					behavior: "smooth",
-					block: "start"
+			(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 [toolbarExpanded, setToolbarExpanded] = (0, react.useState)(false);
+			const [settingsOpen, setSettingsOpen] = (0, react.useState)(false);
+			const [pinned, setPinned] = (0, react.useState)(() => loadPrefs());
+			const settingsRef = (0, react.useRef)(null);
+			const settingsBtnRef = (0, react.useRef)(null);
+			const [updateOpen, setUpdateOpen] = (0, react.useState)(false);
+			const [updateCheck, setUpdateCheck] = (0, react.useState)(NO_UPDATE_CHECK);
+			const updatePanelRef = (0, react.useRef)(null);
+			const updateBtnRef = (0, react.useRef)(null);
+			/**
+			* B1 settings menu: outside-pointerdown dismisses the menu (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.
+			*/
+			useOutsideDismiss(settingsRef, settingsOpen, () => {
+				setSettingsOpen(false);
+				settingsBtnRef.current?.focus();
+			}, { exclude: (target) => outsideDismissMatches(target, "[data-toolbar-settings]") });
+			(0, react.useEffect)(() => {
+				if (!settingsOpen) return;
+				const onKey = (e) => {
+					if (e.key !== "Escape") return;
+					setSettingsOpen(false);
+					settingsBtnRef.current?.focus();
+				};
+				window.addEventListener("keydown", onKey);
+				return () => window.removeEventListener("keydown", onKey);
+			}, [settingsOpen]);
+			/**
+			* B4: run one update check. Cache-aware (`loadCachedLatest` reuses an
+			* unexpired cached result without any network traffic) and never throws:
+			* a network failure lands in the `failed` phase with the structured error,
+			* and an unparseable `latest` (registry anomaly) is treated as "not
+			* available" rather than crashing the panel.
+			*/
+			const runUpdateCheck = () => {
+				setUpdateCheck((prev) => ({
+					...prev,
+					phase: "checking"
+				}));
+				loadCachedLatest().then((result) => {
+					if (result.ok) {
+						let available = false;
+						try {
+							available = needsUpdate(PLUGIN_VERSION, result.latest);
+						} catch {
+							available = false;
+						}
+						setUpdateCheck({
+							phase: "ok",
+							latest: result.latest,
+							source: result.source,
+							error: null,
+							available
+						});
+					} else setUpdateCheck((prev) => ({
+						...prev,
+						phase: "failed",
+						error: result.error
+					}));
 				});
 			};
+			(0, react.useEffect)(() => {
+				const timer = window.setTimeout(runUpdateCheck, UPDATE_CHECK_MOUNT_DELAY);
+				return () => window.clearTimeout(timer);
+			}, []);
+			useOutsideDismiss(updatePanelRef, updateOpen, () => {
+				setUpdateOpen(false);
+				updateBtnRef.current?.focus();
+			}, { exclude: (target) => outsideDismissMatches(target, "[data-update-check]") });
+			(0, react.useEffect)(() => {
+				if (!updateOpen) return;
+				const onKey = (e) => {
+					if (e.key !== "Escape") return;
+					setUpdateOpen(false);
+					updateBtnRef.current?.focus();
+				};
+				window.addEventListener("keydown", onKey);
+				return () => window.removeEventListener("keydown", onKey);
+			}, [updateOpen]);
+			const marksRef = (0, react.useRef)(marks);
+			(0, react.useEffect)(() => {
+				marksRef.current = marks;
+			});
+			(0, react.useEffect)(() => {
+				const key = parseDeepLinkHash(window.location.hash);
+				if (key === null) return;
+				let cancelled = false;
+				let timer;
+				const attempt = (pollsLeft, canLoadOlder) => {
+					if (cancelled) return;
+					if (findRow(key) !== null) {
+						jump(key);
+						return;
+					}
+					if (marksRef.current.length > 0 && !marksRef.current.some((m) => m.key === key)) return;
+					if (pollsLeft > 0) {
+						timer = window.setTimeout(() => attempt(pollsLeft - 1, canLoadOlder), DEEP_LINK_POLL_DELAY);
+						return;
+					}
+					if (canLoadOlder) {
+						loadOlder().then(() => {
+							timer = window.setTimeout(() => attempt(DEEP_LINK_MAX_RETRY_POLLS, false), DEEP_LINK_POLL_DELAY);
+						}, () => {});
+						return;
+					}
+				};
+				timer = window.setTimeout(() => attempt(DEEP_LINK_MAX_POLLS, true), DEEP_LINK_INITIAL_DELAY);
+				return () => {
+					cancelled = true;
+					if (timer !== void 0) window.clearTimeout(timer);
+				};
+			}, []);
+			(0, react.useEffect)(() => {
+				const onHashChange = () => {
+					const key = parseDeepLinkHash(window.location.hash);
+					if (key === null) return;
+					if (marksRef.current.some((m) => m.key === key)) jump(key);
+				};
+				window.addEventListener("hashchange", onHashChange);
+				return () => window.removeEventListener("hashchange", onHashChange);
+			}, []);
+			if (railBox === null || marks.length < MIN_MARKS) return null;
 			const updateQuery = (query) => {
 				setSearch({
 					query,
@@ -1083,6 +2148,276 @@ 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([]);
+			};
+			/** B1: a feature renders while the toolbar is EXPANDED or while it is pinned. */
+			const featureVisible = (id) => toolbarExpanded || pinned.includes(id);
+			/**
+			* 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 (站内搜索/全部提问/跨会话搜索/只看收藏/聚焦模式).
+			*
+			* 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
+			* follow automatically — see the ToolbarFeatureDef doc above.
+			*/
+			const toolbarFeatures = [
+				{
+					id: "search",
+					labelKey: "search.label",
+					render: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RailSearchUi, {
+						panelTop: railBox.top,
+						panelRight: railBox.right + DOT_HIT + 8,
+						query: search.query,
+						panelOpen: search.panelOpen,
+						matches: matches.length,
+						total: displayMarks.length,
+						onToggle: () => setSearch((s) => ({
+							...s,
+							panelOpen: !s.panelOpen
+						})),
+						onQueryChange: updateQuery,
+						onSearchKeyDown,
+						onClear: clearSearch,
+						t
+					})
+				},
+				{
+					id: "list",
+					labelKey: "list.label",
+					render: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"data-list-toggle": true,
+						"aria-label": listOpen ? t("list.close") : t("list.open"),
+						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"
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+							width: "16",
+							height: "16",
+							viewBox: "0 0 24 24",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "2.5",
+							strokeLinecap: "round",
+							"aria-hidden": "true",
+							children: [
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 6h18" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 12h18" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 18h18" })
+							]
+						})
+					})
+				},
+				{
+					id: "sessionSearch",
+					labelKey: "search.cross",
+					render: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"data-session-search-toggle": true,
+						"aria-label": crossOpen ? t("search.cross.close") : t("search.cross.open"),
+						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"
+						},
+						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)("path", { d: "M3 6h9" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 12h9" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M3 18h9" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+									cx: "17",
+									cy: "7",
+									r: "3.5"
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m19.5 9.5 2.5 2.5" })
+							]
+						})
+					})
+				},
+				{
+					id: "bookmarks",
+					labelKey: "bookmark.filter",
+					render: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"data-bookmarks-toggle": true,
+						"aria-label": t("bookmark.filter"),
+						"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"
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+							width: "16",
+							height: "16",
+							viewBox: "0 0 24 24",
+							fill: bookmarksOnly ? "currentColor" : "none",
+							stroke: "currentColor",
+							strokeWidth: "2",
+							strokeLinejoin: "round",
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m12 2 3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })
+						})
+					})
+				},
+				{
+					id: "focus",
+					labelKey: "focus.on",
+					render: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						"data-focus-toggle": true,
+						"aria-label": focusActive ? t("focus.off") : t("focus.on"),
+						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"
+						},
+						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)("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+								cx: "12",
+								cy: "12",
+								r: "3"
+							})]
+						})
+					})
+				},
+				{
+					id: "updateCheck",
+					labelKey: "update.check",
+					render: () => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+						type: "button",
+						ref: updateBtnRef,
+						"data-update-check": true,
+						"aria-expanded": updateOpen,
+						"aria-label": t("update.check"),
+						title: t("update.check"),
+						onClick: () => setUpdateOpen((v) => !v),
+						style: {
+							position: "relative",
+							width: DOT_HIT,
+							height: DOT_HIT,
+							flexShrink: 0,
+							display: "flex",
+							alignItems: "center",
+							justifyContent: "center",
+							background: updateOpen || updateCheck.available ? "rgba(245, 197, 66, 0.14)" : "transparent",
+							border: "none",
+							padding: 0,
+							cursor: "pointer",
+							color: updateCheck.available ? "#f5c542" : "#8b96ab"
+						},
+						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)("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M21 3v5h-5" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M8 16H3v5" })
+							]
+						}), updateCheck.available && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							"data-update-available": true,
+							style: {
+								position: "absolute",
+								top: -2,
+								right: -2,
+								width: 8,
+								height: 8,
+								borderRadius: "50%",
+								background: "#f5c542",
+								border: "2px solid rgba(20, 24, 32, 0.95)",
+								pointerEvents: "none"
+							}
+						})]
+					})
+				}
+			];
 			/** Focus the dot at `index` (no-op while the list is unmounted). */
 			const focusDotAt = (index) => {
 				listRef.current?.querySelectorAll("[data-rail-dot]")[index]?.focus();
@@ -1208,11 +2543,15 @@ window.__ModuleLoader__.load({
 					pointerEvents: "auto",
 					zIndex: 100,
 					display: "flex",
-					flexDirection: "column"
+					flexDirection: "column",
+					gap: 6,
+					paddingTop: 6
 				},
 				"aria-label": t("rail.label"),
+				"data-focus-active": focusActive ? "true" : void 0,
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: BADGE_PULSE_CSS }),
+					focusActive && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("style", { children: FOCUS_CSS }),
 					showLoadOlder && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
 						"data-load-older": true,
@@ -1235,7 +2574,7 @@ window.__ModuleLoader__.load({
 							padding: 0,
 							cursor: loadingOlder ? "default" : "pointer",
 							color: loadingOlder ? "#5a6375" : "#8b96ab",
-							fontSize: 11,
+							fontSize: 13,
 							lineHeight: 1,
 							letterSpacing: 1
 						},
@@ -1243,11 +2582,11 @@ window.__ModuleLoader__.load({
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 						type: "button",
-						"data-bookmarks-toggle": true,
-						"aria-label": t("bookmark.filter"),
-						"aria-pressed": bookmarksOnly,
-						"data-active": bookmarksOnly ? "true" : void 0,
-						onClick: () => setBookmarksOnly((v) => !v),
+						"data-toolbar-expand": true,
+						"aria-expanded": toolbarExpanded,
+						"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,
@@ -1255,38 +2594,390 @@ window.__ModuleLoader__.load({
 							display: "flex",
 							alignItems: "center",
 							justifyContent: "center",
-							background: bookmarksOnly ? "rgba(77, 124, 254, 0.18)" : "transparent",
+							background: "transparent",
 							border: "none",
 							padding: 0,
 							cursor: "pointer",
-							color: bookmarksOnly ? "#9db8ff" : "#8b96ab"
+							color: "#8b96ab"
 						},
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
-							width: "13",
-							height: "13",
+							width: "16",
+							height: "16",
 							viewBox: "0 0 24 24",
-							fill: bookmarksOnly ? "currentColor" : "none",
+							fill: "none",
+							stroke: "currentColor",
+							strokeWidth: "2.5",
+							strokeLinecap: "round",
+							strokeLinejoin: "round",
+							"aria-hidden": "true",
+							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),
+						style: {
+							width: DOT_HIT,
+							height: DOT_HIT,
+							flexShrink: 0,
+							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"
+						},
+						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)("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" })
+							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" })]
 						})
 					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(RailSearchUi, {
+					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", {
+										type: "button",
+										role: "menuitemcheckbox",
+										"data-toolbar-pin-toggle": true,
+										"data-pin-id": feature.id,
+										"aria-checked": checked,
+										onClick: () => onTogglePin(feature.id),
+										style: {
+											display: "flex",
+											alignItems: "center",
+											justifyContent: "space-between",
+											gap: 8,
+											width: "100%",
+											padding: "6px 8px",
+											background: "transparent",
+											border: "none",
+											borderRadius: 6,
+											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",
+											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)("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",
+											style: {
+												fontSize: 12,
+												color: "#9db8ff",
+												textDecoration: "none"
+											},
+											children: t("settings.star")
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+											href: `https://github.com/SnowCrescenter-tech/dsh-milestone/issues`,
+											target: "_blank",
+											rel: "noreferrer",
+											style: {
+												fontSize: 12,
+												color: "#9db8ff",
+												textDecoration: "none"
+											},
+											children: t("settings.issues")
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+											href: "https://www.npmjs.com/package/dsh-milestone",
+											target: "_blank",
+											rel: "noreferrer",
+											style: {
+												fontSize: 12,
+												color: "#9db8ff",
+												textDecoration: "none"
+											},
+											children: t("settings.npm")
+										})
+									]
+								})]
+							})
+						]
+					}),
+					updateOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						ref: updatePanelRef,
+						"data-update-panel": true,
+						style: {
+							position: "fixed",
+							top: railBox.top,
+							right: railBox.right + DOT_HIT + 8,
+							width: "min(280px, 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)("div", {
+							"data-update-title": true,
+							style: {
+								fontSize: 13,
+								fontWeight: 600,
+								color: "#e6e8ee",
+								marginBottom: 8
+							},
+							children: t("update.title")
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							style: {
+								display: "flex",
+								flexDirection: "column",
+								gap: 6,
+								fontSize: 12,
+								lineHeight: 1.5
+							},
+							children: [
+								/* @__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" })] }),
+								updateCheck.phase === "ok" && updateCheck.latest !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									"data-update-latest": true,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											style: { color: "#8b96ab" },
+											children: [t("update.latest"), ": "]
+										}),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: updateCheck.latest }),
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+											style: { color: "#8b96ab" },
+											children: [
+												" (",
+												updateCheck.source,
+												")"
+											]
+										})
+									]
+								}),
+								updateCheck.phase === "checking" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									"data-update-status": true,
+									style: { color: "#8b96ab" },
+									children: t("update.checking")
+								}),
+								updateCheck.phase === "failed" && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									"data-update-failed": true,
+									children: [
+										/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [t("update.failed"), ":"] }),
+										" ",
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+											style: { color: "#8b96ab" },
+											children: updateCheck.error
+										}),
+										" ",
+										/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+											type: "button",
+											"data-update-retry": true,
+											onClick: runUpdateCheck,
+											style: {
+												background: "transparent",
+												border: "none",
+												padding: 0,
+												cursor: "pointer",
+												color: "#9db8ff",
+												fontSize: 12,
+												textDecoration: "underline"
+											},
+											children: t("update.retry")
+										})
+									]
+								}),
+								updateCheck.phase === "ok" && updateCheck.latest !== null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+									"data-update-conclusion": true,
+									children: updateCheck.available ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [
+										t("update.available"),
+										" v",
+										updateCheck.latest,
+										" → "
+									] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+										href: "https://www.npmjs.com/package/dsh-milestone",
+										target: "_blank",
+										rel: "noreferrer",
+										style: {
+											color: "#9db8ff",
+											textDecoration: "none"
+										},
+										children: t("update.goNpm")
+									})] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+										style: { color: "#7ee2a8" },
+										children: t("update.upToDate")
+									})
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+									"data-update-host-lines": true,
+									children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										style: { color: "#8b96ab" },
+										children: [t("update.hostLines"), ": "]
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: SUPPORTED_HOST_LINES.map(hostLineLabel).join("、") })]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+									type: "button",
+									"data-update-manual": true,
+									disabled: updateCheck.phase === "checking",
+									onClick: runUpdateCheck,
+									style: {
+										marginTop: 4,
+										padding: "6px 10px",
+										background: updateCheck.phase === "checking" ? "transparent" : "rgba(77, 124, 254, 0.18)",
+										border: "none",
+										borderRadius: 6,
+										cursor: updateCheck.phase === "checking" ? "default" : "pointer",
+										color: updateCheck.phase === "checking" ? "#5a6375" : "#9db8ff",
+										fontSize: 12,
+										alignSelf: "flex-start"
+									},
+									children: updateCheck.phase === "checking" ? t("update.checking") : t("update.check")
+								})
+							]
+						})]
+					}),
+					listOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MilestoneListPanel, {
 						panelTop: railBox.top,
 						panelRight: railBox.right + DOT_HIT + 8,
-						query: search.query,
-						panelOpen: search.panelOpen,
-						matches: matches.length,
-						total: displayMarks.length,
-						onToggle: () => setSearch((s) => ({
-							...s,
-							panelOpen: !s.panelOpen
-						})),
-						onQueryChange: updateQuery,
-						onSearchKeyDown,
-						onClear: clearSearch,
+						marks,
+						onJump: jump,
+						t
+					}),
+					crossOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MilestoneSessionSearch, {
+						panelTop: railBox.top,
+						panelRight: railBox.right + DOT_HIT + 8,
+						onClose: () => setCrossOpen(false),
+						searchSessions,
+						openSession,
 						t
 					}),
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1421,7 +3112,7 @@ window.__ModuleLoader__.load({
 							right: "100%",
 							marginRight: 8,
 							whiteSpace: "nowrap",
-							fontSize: 10,
+							fontSize: 12,
 							lineHeight: 1,
 							color: "rgba(139, 150, 171, 0.9)",
 							pointerEvents: "none",
@@ -1465,6 +3156,46 @@ window.__ModuleLoader__.load({
 		//#endregion
 		//#region src/client/railInject.ts
 		/**
+		* Wrap the `session.search` RPC into a safe cross-session search action.
+		*
+		* - `ok: true` unwraps the value and joins each hit's human display title
+		*   from the session list snapshot (a session outside the list keeps no
+		*   title — the caller falls back to `search.untitled`).
+		* - `ok: false` throws `new Error(error.message)` so the caller can surface
+		*   the business/transport error as the `search.error` state.
+		* - A rejected RPC propagates unchanged.
+		*
+		* The list read happens inside the returned closure (never at factory time),
+		* so the title join always reflects the current list snapshot.
+		*
+		* @param sessions - the injected sessions service (`ctx.sessions`).
+		* @returns an action that searches all sessions' message content.
+		*/
+		function createSessionSearch(sessions) {
+			return async (query, signal) => {
+				const result = await sessions.search(query, signal);
+				if (!result.ok) throw new Error(result.error.message);
+				const byId = sessions.list.getSnapshot().byId;
+				return {
+					items: result.value.items.map((item) => ({
+						...item,
+						title: byId[item.sessionId]?.displayTitle
+					})),
+					hasMore: result.value.hasMore
+				};
+			};
+		}
+		/**
+		* Wrap a session `open` call into a safe action that selects a listed session
+		* as current — the exact selection path the sidebar uses on click.
+		*
+		* @param sessions - the injected sessions service (`ctx.sessions`).
+		* @returns an action that opens the given session.
+		*/
+		function createOpenSession(sessions) {
+			return (id) => sessions.open(id);
+		}
+		/**
 		* Wrap a session-bound `loadOlder` call into a safe action closure.
 		*
 		* - Missing binding: resolves (never throws on an unlisted/unscoped session).
@@ -1530,6 +3261,10 @@ window.__ModuleLoader__.load({
 			"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. */
@@ -1573,7 +3308,71 @@ window.__ModuleLoader__.load({
 			/** Collapse-turn tooltip action. */
 			"collapse.turn": "折叠此轮",
 			/** Expand-turn tooltip action. */
-			"expand.turn": "展开此轮"
+			"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}",
@@ -1583,6 +3382,8 @@ window.__ModuleLoader__.load({
 			"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",
@@ -1604,7 +3405,39 @@ window.__ModuleLoader__.load({
 			"copy.message": "Copy message",
 			"fork.here": "Fork from here",
 			"collapse.turn": "Collapse turn",
-			"expand.turn": "Expand 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
@@ -1641,7 +3474,9 @@ window.__ModuleLoader__.load({
 				locale: "dsh-milestone",
 				inject: (sessionId) => ({
 					loadOlder: createLoadOlder(ctx.sessions, sessionId),
-					forkAt: createForkAt(ctx.sessions, sessionId)
+					forkAt: createForkAt(ctx.sessions, sessionId),
+					searchSessions: createSessionSearch(ctx.sessions),
+					openSession: createOpenSession(ctx.sessions)
 				})
 			}, MilestoneRail));
 		}