dsh-focus-overlay 0.9.0 → 0.10.1

package/README.en.md

@@ -58,7 +58,7 @@ Once in focus mode, an assistant turn no longer shows every step — it folds in
 | Precise scroll preservation | Opens at the message you're reading in the chat (aligned by `seq`), not from the top |
 | Right-side node navbar | One dot per user message; active pill follows scroll, hover preview, click to jump, auto-hidden under 2 messages |
 | Back to latest | A centered "↓" floating button when you scroll away from the bottom with no draft |
-| In-focus composer | The compact input bar appears at the live edge and shares the main composer's draft — `Enter` sends (queued while the AI runs); with a draft, clicking the conversation folds it into a blue-dot pill, one click to expand |
+| In-focus composer | The compact input bar appears at the live edge and shares the main composer's draft — `Enter` sends (queued while the AI runs); with a draft, clicking the conversation folds it into a blue-dot pill, one click to expand; sending from the live edge auto-scrolls just enough to fully reveal the message you sent, never hidden behind the bar |
 | File mentions | Wires `chatFileMentions`, turning inline-code tokens that name real files into clickable links |
 | i18n | Chinese / English copy, follows the UI language |
 | Plugin configuration card | A collapsible card under "Settings → Plugins → Plugin configuration": navbar toggle, open-position strategy, text-area width — persisted to `localStorage` |

package/README.md

@@ -55,7 +55,7 @@
 | 精确保留位置 | 进入专注时定位到聊天视图中正在阅读的消息（按 `seq` 对齐），而非从头开始 |
 | 右侧节点导航条 | 每个 user 消息一个圆点，激活药丸跟随滚动、悬停预览、点击平滑跳转，少于 2 条自动隐藏 |
 | 回到最新 | 无草稿且离开底部时，底部居中显示「↓」悬浮按钮 |
-| 专注内输入条 | 滚到最底部自动展开精简输入框，与主输入框共享同一份草稿；`Enter` 发送（AI 忙时自动排队）；有草稿时点击对话区自动收起为带蓝点的圆钮，一键展开续写 |
+| 专注内输入条 | 滚到最底部自动展开精简输入框，与主输入框共享同一份草稿；`Enter` 发送（AI 忙时自动排队）；有草稿时点击对话区自动收起为带蓝点的圆钮，一键展开续写；在底部发送多行长消息后自动上滚刚好一段，让刚发出的消息完整露出、不被输入条遮挡 |
 | 文件提及 | 接 `chatFileMentions`，内联代码命中真实文件时变成可点链接 |
 | i18n | 中 / 英文案，跟随界面语言 |
 | 插件配置卡片 | 在「设置 → 插件 → 插件配置」中的可折叠卡片，含导航条开关、打开定位策略、文字区宽度，持久化到 `localStorage` |

package/lib/client.js

@@ -216,6 +216,18 @@ window.__ModuleLoader__.load({
 			for (let i = items.length - 1; i >= 0; i--) if (items[i].kind === "user") return i;
 			return -1;
 		}
+		/** Seq of the newest prompt row (user OR steering) in an already-built focus
+		*  list — the row a just-sent message occupies once it renders. Unlike
+		*  {@link lastUserSeq} (raw nodes), this reads the rendered list, so a blank
+		*  prompt or an unsent queue entry is already filtered out. Null when no
+		*  prompt row exists. */
+		function lastPromptSeq(items) {
+			for (let i = items.length - 1; i >= 0; i--) {
+				const it = items[i];
+				if (it.kind === "user" || it.kind === "steering") return it.seq;
+			}
+			return null;
+		}
 		/**
 		* Decide whether a settled conversation snapshot (`running === false`) ends in
 		* a *normal* completed reply, and which user message started it.
@@ -314,6 +326,53 @@ window.__ModuleLoader__.load({
 			if (distance >= 160) return false;
 			return prev;
 		}
+		/**
+		* Whether the overlay should scroll to uncover the just-sent prompt row. The
+		* send path arms the reveal only while the reader sits in the bottom zone
+		* (sending from up in history must never yank the view), and the reveal fires
+		* only once the newest prompt seq has advanced — the sent row has actually
+		* rendered; delivery can lag the click by a snapshot or two through queue
+		* adjudication. An unchanged seq (ordinary streaming snapshots, mount) or an
+		* unarmed state never scrolls.
+		*/
+		function shouldRevealSentPrompt(o) {
+			return o.armed && o.nextSeq != null && o.nextSeq !== o.prevSeq;
+		}
+		/**
+		* 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. */
@@ -998,22 +1057,23 @@ window.__ModuleLoader__.load({
 			const [localDraft, setLocalDraft] = (0, react.useState)("");
 			const taRef = (0, react.useRef)(null);
 			const focusBarOnce = (0, react.useRef)(false);
+			const revealArmed = (0, react.useRef)(false);
+			const seenPromptSeq = (0, react.useRef)(null);
 			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 +1081,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 +1145,43 @@ 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)(() => {
+				const seq = lastPromptSeq(items);
+				if (seq != null && shouldRevealSentPrompt({
+					armed: revealArmed.current,
+					prevSeq: seenPromptSeq.current,
+					nextSeq: seq
+				})) {
+					revealArmed.current = false;
+					const idx = findSeqIndex(items, seq);
+					const el = idx >= 0 ? anchors["fm-" + idx] : void 0;
+					if (el && bodyEl) {
+						const limit = bodyEl.getBoundingClientRect().bottom - 110;
+						const hidden = el.getBoundingClientRect().bottom - limit;
+						if (hidden > 0) bodyEl.scrollBy({
+							top: hidden,
+							behavior: "smooth"
+						});
+					}
+				}
+				seenPromptSeq.current = seq;
+			}, [items]);
+			(0, react.useEffect)(() => () => {
+				if (rafId.current !== null) {
+					cancelAnimationFrame(rafId.current);
+					rafId.current = null;
+				}
+			}, []);
 			(0, react.useEffect)(() => {
 				overlayRef.current?.focus();
 			}, []);
@@ -1146,6 +1247,7 @@ window.__ModuleLoader__.load({
 			const send = () => {
 				const text = draftValue;
 				if (text.trim() === "") return;
+				if (zone) revealArmed.current = true;
 				if (inputFace) try {
 					inputFace.submit("queue");
 					return;
@@ -1272,7 +1374,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 +1489,7 @@ window.__ModuleLoader__.load({
 						ref: (el) => {
 							bodyEl = el;
 						},
-						onScroll: handleScroll,
+						onScroll: scheduleRecompute,
 						children: body
 					}),
 					nav,
@@ -1651,7 +1769,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 +1939,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 +2008,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.1",
   "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",