dsh-focus-overlay 0.9.0 → 0.10.0

package/lib/client.js

@@ -314,6 +314,41 @@ window.__ModuleLoader__.load({
 			if (distance >= 160) return false;
 			return prev;
 		}
+		/**
+		* Index of the conversation-turn dot the nav rail should highlight, from live
+		* scroll geometry. The rail is a position indicator, so the decision is pure
+		* math over measured anchor tops (document order) plus the distance to the
+		* scroll end:
+		*
+		* 1. Bottom force: within {@link BOTTOM_ENTER_PX} of the scroll end the last
+		*    turn owns the highlight, whatever its height. Without this rule a short
+		*    final turn could never light its own dot — with less than a viewport of
+		*    content below its anchor, that anchor physically cannot reach the top
+		*    threshold even pinned at the very bottom, so the highlight would stick
+		*    to an earlier turn forever.
+		* 2. Geometric scan: the last anchor whose top sits at/above the
+		*    {@link NAV_TOP_PX} line — "which turn is at the top of the viewport".
+		*    Non-finite entries (a stale anchor slot after the item list shifted) are
+		*    skipped without stopping the scan, matching the old ref-null behavior.
+		* 3. Top clamp: every real anchor still below the line means the reader is
+		*    above the first message's threshold (scrollTop ≈ 0 with leading
+		*    padding), and the first turn owns the position.
+		*
+		* A bottom-forced index may land on a stale slot; the caller maps it back to
+		* the nearest existing anchor.
+		*/
+		function activeNavIndex(tops, bottomDistance, topPx = 96, bottomPx = 48) {
+			if (!tops.length) return -1;
+			if (bottomDistance <= bottomPx) return tops.length - 1;
+			let cur = -1;
+			for (let i = 0; i < tops.length; i++) {
+				const top = tops[i];
+				if (!Number.isFinite(top)) continue;
+				if (top <= topPx) cur = i;
+				else break;
+			}
+			return cur >= 0 ? cur : 0;
+		}
 		/** A question is answered when at least one option is selected or the custom
 		*  text is non-blank — the same completeness rule the official question
 		*  composer applies before enabling submit. */
@@ -1000,20 +1035,19 @@ window.__ModuleLoader__.load({
 			const focusBarOnce = (0, react.useRef)(false);
 			const computeActive = () => {
 				if (!bodyEl) return null;
-				let cur = null;
-				for (const k of navKeys) {
+				const bodyTop = bodyEl.getBoundingClientRect().top;
+				const i = activeNavIndex(navKeys.map((k) => {
 					const el = anchors[k];
-					if (!el) continue;
-					if (el.getBoundingClientRect().top - bodyEl.getBoundingClientRect().top <= 96) cur = k;
-					else break;
-				}
-				return cur;
+					return el ? el.getBoundingClientRect().top - bodyTop : Number.POSITIVE_INFINITY;
+				}), bottomDistance());
+				for (let j = i; j >= 0; j--) if (anchors[navKeys[j]]) return navKeys[j];
+				return null;
 			};
 			const bottomDistance = () => {
 				if (!bodyEl) return Number.POSITIVE_INFINITY;
 				return bodyEl.scrollHeight - bodyEl.scrollTop - bodyEl.clientHeight;
 			};
-			const handleScroll = () => {
+			const scheduleRecompute = () => {
 				if (rafId.current !== null) return;
 				rafId.current = requestAnimationFrame(() => {
 					rafId.current = null;
@@ -1021,6 +1055,10 @@ window.__ModuleLoader__.load({
 					setZone((prev) => bottomZoneAfter(prev, bottomDistance()));
 				});
 			};
+			const scheduleRef = (0, react.useRef)(scheduleRecompute);
+			(0, react.useEffect)(() => {
+				scheduleRef.current = scheduleRecompute;
+			});
 			const scrollToKey = (key, smooth) => {
 				const el = anchors[key];
 				if (!el || !bodyEl) return;
@@ -1081,6 +1119,22 @@ window.__ModuleLoader__.load({
 			(0, react.useEffect)(() => {
 				setZone(bodyEl ? bottomZoneAfter(false, bottomDistance()) : true);
 			}, []);
+			(0, react.useEffect)(() => {
+				const el = bodyEl;
+				if (!el || typeof ResizeObserver === "undefined") return;
+				const ro = new ResizeObserver(() => scheduleRef.current());
+				ro.observe(el);
+				return () => ro.disconnect();
+			}, []);
+			(0, react.useEffect)(() => {
+				scheduleRef.current();
+			}, [snap, prefs.width]);
+			(0, react.useEffect)(() => () => {
+				if (rafId.current !== null) {
+					cancelAnimationFrame(rafId.current);
+					rafId.current = null;
+				}
+			}, []);
 			(0, react.useEffect)(() => {
 				overlayRef.current?.focus();
 			}, []);
@@ -1272,7 +1326,23 @@ window.__ModuleLoader__.load({
 				}, "fm-partial"));
 				if (running) kids.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "fm-running",
-					children: t("running")
+					role: "status",
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "fm-running-text",
+						children: [
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "fm-running-dash",
+								"aria-hidden": "true",
+								children: "–"
+							}),
+							t("running"),
+							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+								className: "fm-running-dash",
+								"aria-hidden": "true",
+								children: "–"
+							})
+						]
+					})
 				}, "fm-running"));
 				body = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: "fm-inner",
@@ -1371,7 +1441,7 @@ window.__ModuleLoader__.load({
 						ref: (el) => {
 							bodyEl = el;
 						},
-						onScroll: handleScroll,
+						onScroll: scheduleRecompute,
 						children: body
 					}),
 					nav,
@@ -1651,7 +1721,32 @@ window.__ModuleLoader__.load({
 .fm-image{max-width:100%;border-radius:8px;margin:8px 0}
 .fm-hidden{text-align:center;color:var(--dsw-alias-label-secondary,#888);font-size:12px;line-height:1.6;margin:6px 0 18px;user-select:none}
 .fm-error{color:var(--dsw-alias-state-error-primary,#d23);font-size:13px;white-space:pre-wrap}
-.fm-running{color:var(--dsw-alias-label-secondary,#888);font-size:13px;margin:6px 0 16px}
+/* "正在工作" live line — the shimmer is a 1:1 replica of the official
+   generating indicator in dsh-client-ui-conversation (the "Deep Diving"
+   turn-status): brand-blue text (--dsw-static-deepseek-500) with a light
+   highlight (--dsw-static-deepseek-200) sweeping through — gradient stops
+   0/40/50/60/100 on a 250% tile, background-position 100%→0, 1.8s linear,
+   font --dsw-font-s-strong-14 (500 14px/22px). The official class name
+   (Md3f7G_turnStatus) is a per-build CSS-modules hash, so reusing it would
+   break silently on dsh updates — the declarations are copied verbatim onto
+   our own class using the same theme tokens instead. The flanking short
+   dashes are part of the same shimmer span, so the sweep covers dashes and
+   label as one unit. Fallbacks: no background-clip:text → secondary gray
+   label; prefers-reduced-motion → animation off, label stays solid
+   deepseek-500 (the official base color). */
+.fm-running{text-align:center;margin:10px 0 20px;user-select:none;animation:fm-up .18s ease}
+.fm-running-text{color:var(--dsw-alias-label-secondary,#888);font:var(--dsw-font-s-strong-14,500 14px/22px var(--dsw-font-family,sans-serif));white-space:nowrap}
+/* Dashes: separate spans with fixed margins instead of space characters — in
+   CJK/Latin mixed runs the browser itemizes the two U+0020 spaces into
+   different fonts (one Latin-narrow, one Han-wide), and the Han font's en
+   dash glyph is left-biased, which made the two gaps visually unequal. The
+   forced Latin-first stack renders a symmetric en dash; margins are exact. */
+.fm-running-dash{font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;margin:0 8px}
+@supports ((-webkit-background-clip:text) or (background-clip:text)){
+.fm-running-text{background:linear-gradient(90deg,var(--dsw-static-deepseek-500,#4176e6) 0%,var(--dsw-static-deepseek-500,#4176e6) 40%,var(--dsw-static-deepseek-200,#d3e2ff) 50%,var(--dsw-static-deepseek-500,#4176e6) 60%,var(--dsw-static-deepseek-500,#4176e6) 100%);color:#0000;-webkit-text-fill-color:transparent;background-position:100% 0;background-size:250% 100%;-webkit-background-clip:text;background-clip:text;animation:fm-sweep 1.8s linear infinite}
+}
+@keyframes fm-sweep{to{background-position:0 0}}
+@media (prefers-reduced-motion:reduce){.fm-running{animation:none}.fm-running-text{background:0 0;color:var(--dsw-static-deepseek-500,#4176e6);-webkit-text-fill-color:currentColor;animation:none}}
 .fm-empty{color:var(--dsw-alias-label-secondary,#888);padding:48px 16px;text-align:center}
 .fm-nav{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:block;width:16px;z-index:2;pointer-events:auto;transition:transform .18s ease}
 .fm-nav:hover{transform:translateY(-50%) translateX(-6px)}
@@ -1796,7 +1891,7 @@ body[data-fm-focus] #root :has(> [data-slot="conversation"]){margin-bottom:0!imp
 			"settings.width.hint": "专注模式正文的阅读列宽（480–1200px）",
 			"empty": "暂无打开的会话",
 			"loading": "正在读取会话…",
-			"running": "· 正在工作 …",
+			"running": "正在工作",
 			"reply.ready": "新回复已生成",
 			"reply.view": "查看",
 			"reply.waiting": "AI 正在等待你的回复",
@@ -1865,7 +1960,7 @@ body[data-fm-focus] #root :has(> [data-slot="conversation"]){margin-bottom:0!imp
 			"settings.width.hint": "Reading column width (480–1200px)",
 			"empty": "No open session",
 			"loading": "Reading session…",
-			"running": "· Working …",
+			"running": "Working",
 			"reply.ready": "New reply ready",
 			"reply.view": "View",
 			"reply.waiting": "AI is waiting for your reply",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-focus-overlay",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Focus Mode for the dsh web GUI: a full-screen reading overlay that hides chrome and folds the AI tool-call flow into summaries, reusing the official Markdown / image primitives.",
   "type": "module",
   "main": "lib/index.mjs",