dsh-focus-overlay 0.11.2 → 0.12.0

package/lib/client.js

@@ -557,6 +557,14 @@ window.__ModuleLoader__.load({
 			if (o.engaged || o.focused || o.draftEmpty && o.inZone) return "bar";
 			return o.draftEmpty ? "tobottom" : "pill";
 		}
+		/** Whether the bottom dock should render the OFFICIAL composer (CSS-lifted
+		*  above the overlay) as its bar form: the user wants the borrow, the
+		*  composer DOM probed available, and the dock currently wants the bar.
+		*  Pure so the decision is unit-testable at the seam the lift effect
+		*  drives — the e2e loop exercises the DOM consequences. */
+		function shouldLiftOfficialComposer(o) {
+			return o.wanted && o.available && o.form === "bar";
+		}
 		/**
 		* Bottom-zone membership with hysteresis: entering requires the viewport edge
 		* within {@link BOTTOM_ENTER_PX} of the scroll end, leaving requires drifting
@@ -693,7 +701,8 @@ window.__ModuleLoader__.load({
 			scroll: "preserve",
 			width: 760,
 			autoFocus: false,
-			hotkey: true
+			hotkey: true,
+			borrow: true
 		};
 		function load() {
 			try {
@@ -1036,13 +1045,27 @@ window.__ModuleLoader__.load({
 		function InputBar(props) {
 			const { t, width, value, queueCount, occCount, errorLine, textareaRef, onFocusChange, onChange, onSend } = props;
 			const composingRef = (0, react.useRef)(false);
+			const echoingRef = (0, react.useRef)(false);
 			const [pending, setPending] = (0, react.useState)(null);
 			const shown = pending ?? value;
 			const empty = shown.trim() === "";
-			const flush = (v) => {
-				if (v === null) return;
+			const echo = (el, next) => {
+				const start = el.selectionStart;
+				const end = el.selectionEnd;
+				echoingRef.current = true;
+				try {
+					onChange(next);
+				} finally {
+					echoingRef.current = false;
+				}
+				if (document.activeElement !== el) {
+					el.focus();
+					el.setSelectionRange(start, end);
+				}
+			};
+			const flush = (el) => {
 				setPending(null);
-				onChange(v);
+				echo(el, el.value);
 			};
 			const onCompositionStart = () => {
 				composingRef.current = true;
@@ -1050,8 +1073,7 @@ window.__ModuleLoader__.load({
 			};
 			const onCompositionEnd = (e) => {
 				composingRef.current = false;
-				flush(e.currentTarget.value);
-				refocusAfterEcho(e.currentTarget);
+				flush(e.currentTarget);
 			};
 			const onKeyDown = (e) => {
 				if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing && e.nativeEvent.keyCode !== 229) {
@@ -1063,12 +1085,6 @@ window.__ModuleLoader__.load({
 				el.style.height = "auto";
 				el.style.height = `${Math.min(el.scrollHeight, 120)}px`;
 			};
-			const refocusAfterEcho = (el) => {
-				if (document.activeElement === el) return;
-				el.focus();
-				const end = el.value.length;
-				el.setSelectionRange(end, end);
-			};
 			(0, react.useEffect)(() => {
 				if (textareaRef.current) autoGrow(textareaRef.current);
 			}, [shown, textareaRef]);
@@ -1077,10 +1093,9 @@ window.__ModuleLoader__.load({
 				if (composingRef.current) setPending(el.value);
 				else {
 					setPending(null);
-					onChange(el.value);
+					echo(el, el.value);
 				}
 				autoGrow(el);
-				refocusAfterEcho(el);
 			};
 			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				className: "fm-bar",
@@ -1109,10 +1124,14 @@ window.__ModuleLoader__.load({
 								onKeyDown,
 								onFocus: () => onFocusChange(true),
 								onBlur: () => {
+									if (echoingRef.current) return;
 									if (composingRef.current) {
 										composingRef.current = false;
-										flush(shown);
-										if (textareaRef.current) refocusAfterEcho(textareaRef.current);
+										const el = textareaRef.current;
+										if (el) {
+											flush(el);
+											if (document.activeElement === el) return;
+										}
 									}
 									onFocusChange(false);
 								}
@@ -1137,8 +1156,9 @@ window.__ModuleLoader__.load({
 			});
 		}
 		function FocusBottomDock(props) {
-			const { t, width, form, wait, onCardClose, draft, queueCount, occCount, errorLine, textareaRef, onFocusChange, onDraftChange, onSend, onExpand, onJumpBottom } = props;
+			const { t, width, form, borrowed, wait, onCardClose, draft, queueCount, occCount, errorLine, textareaRef, onFocusChange, onDraftChange, onSend, onExpand, onJumpBottom } = props;
 			if (form === "toast") return null;
+			if (form === "bar" && borrowed) return null;
 			if (form === "card") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AnswerCard, {
 				t,
 				width,
@@ -1185,7 +1205,7 @@ window.__ModuleLoader__.load({
 .fm-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;border-bottom:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.12));flex:0 0 auto}
 .fm-title{font-size:calc(14px + var(--dsh-content-font-delta,0px));font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .fm-body-wrap{position:relative;flex:1 1 auto;display:flex;min-height:0}
-.fm-body{flex:1 1 auto;min-width:0;overflow-y:auto;padding:28px 28px 110px}
+.fm-body{flex:1 1 auto;min-width:0;overflow-y:auto;padding:28px 28px 160px}
 .fm-inner{max-width:760px;margin:0 auto}
 .fm-msg{margin:0}
 .fm-user-msg{margin:0}
@@ -1238,6 +1258,31 @@ window.__ModuleLoader__.load({
 .fm-reply-toast{position:absolute;left:50%;transform:translateX(-50%);bottom:84px;z-index:2;display:flex;align-items:center;gap:10px;background:var(--dsw-alias-bg-overlay,#fff);color:var(--dsw-alias-label-primary,#1a1a1a);border:1px solid var(--dsw-alias-border-l1,rgba(0,0,0,.12));border-radius:100px;padding:8px 8px 8px 16px;box-shadow:var(--dsw-shadow-lv2,0 4px 16px rgba(0,0,0,.12));font-size:var(--dsh-content-font-size-secondary,13px)}
 .fm-reply-toast-dot{width:8px;height:8px;border-radius:999px;background:var(--dsw-static-deepseek-500,#4176e6);flex:0 0 auto}
 .fm-reply-toast-text{white-space:nowrap}
+/* ---- official-composer borrow: the lifted input bar ----
+   The main view's composer seat ([data-composer-seat], normally in the
+   conversation scroll flow UNDER this overlay) is re-anchored above the
+   overlay while the dock wants the bar form. Its ancestor chain has no
+   transform/filter/positioned-z traps (verified against the 0.1.2 build),
+   so position:fixed escapes to the viewport; the z-index sits just above
+   .fm-overlay's 2147483000 and below the int32 ceiling. The slash/@ menus
+   are descendants of the composer card, so they lift with it.
+   The seat itself must paint NOTHING: it is a layout box larger than the
+   composer card (hero variant stacks brand/workspace rows above it), so a
+   seat-level background or shadow would draw a translucent SQUARE behind
+   the rounded card. Only the card's own skin shows; the seat's empty area
+   is click-transparent so the reading surface beneath stays interactive. */
+.fm-lift{position:fixed!important;left:50%!important;right:auto!important;top:auto!important;bottom:20px!important;transform:translateX(-50%)!important;width:min(var(--fm-lift-width,680px),calc(100vw - 48px))!important;max-width:calc(100vw - 48px)!important;z-index:2147483200!important;margin:0!important;box-shadow:none!important;background:0 0!important;pointer-events:none}
+/* The composer's dock row (queue/references rail) is hidden while lifted on
+   purpose: focus mode's dock is the plugin's own bottom-center region, and a
+   second rail inside the floating bar would duplicate it. Noteboard's canvas
+   borrow does the same. This drops that row's affordances IN FOCUS MODE only
+   (the main view keeps them); revisit if a focus-mode user needs them. */
+.fm-lift [data-slot="conversation.composer.dock"]{display:none!important}
+.fm-lift [data-composer-card]{pointer-events:auto}
+/* Cap the lifted editor's scroll area: a long multi-line draft must not grow
+   the floating card over half the reading surface (the main view allows the
+   full composer column height, which focus mode cannot afford). */
+.fm-lift [data-input-scroll]{max-height:180px!important;overscroll-behavior:contain}
 /* ---- bottom dock: bar / pill / jump-to-bottom / answer card ----
    Visual language mirrors the official composer cards token-for-token
    (ui-conversation InputBar/QuestionComposer, ui-user-questions
@@ -1912,6 +1957,20 @@ body[data-fm-focus] #root :has(> [data-slot="conversation"]){margin-bottom:0!imp
 				}, i))]
 			});
 		}
+		/** The main view's composer seat — the DOM node the borrow path CSS-lifts
+		*  above the overlay. ONE selector shared by the probe, the lift, the focus
+		*  bridge, and the Esc peel, so they can never disagree on WHAT they lift. */
+		function composerSeat() {
+			return document.querySelector("[data-composer-seat]");
+		}
+		/** The official editor's editable surface inside the seat. The SAME node the
+		*  availability probe verifies and the pill→bar handoff focuses: probe
+		*  success therefore implies a focusable editor. If a dsh update moves either
+		*  surface, the probe fails → the dock degrades to the built-in textarea bar
+		*  — never to a silently un-focusable lifted composer. */
+		function composerEditable(seat) {
+			return seat ? seat.querySelector("[contenteditable=\"true\"]") : null;
+		}
 		function FocusContent(props) {
 			const { useSessions, sessions, workspaces, conversation, chatFileMentions, uiSession, uiConversation, settingsScope, t } = props;
 			const prefs = usePrefs();
@@ -2185,7 +2244,7 @@ body[data-fm-focus] #root :has(> [data-slot="conversation"]){margin-bottom:0!imp
 					const idx = findSeqIndex(items, seq);
 					const el = idx >= 0 ? anchors["fm-" + idx] : void 0;
 					if (el && bodyEl) {
-						const limit = bodyEl.getBoundingClientRect().bottom - 110;
+						const limit = bodyEl.getBoundingClientRect().bottom - 160;
 						const hidden = el.getBoundingClientRect().bottom - limit;
 						if (hidden > 0) bodyEl.scrollBy({
 							top: hidden,
@@ -2208,6 +2267,7 @@ body[data-fm-focus] #root :has(> [data-slot="conversation"]){margin-bottom:0!imp
 				const onKey = (e) => {
 					if (e.key !== "Escape") return;
 					if (e.isComposing || e.keyCode === 229) return;
+					if (composerSeat()?.querySelector("[role=\"listbox\"]")) return;
 					e.preventDefault();
 					e.stopPropagation();
 					if (cardOpen) {
@@ -2292,7 +2352,10 @@ body[data-fm-focus] #root :has(> [data-slot="conversation"]){margin-bottom:0!imp
 			};
 			const hideBar = () => {
 				try {
-					taRef.current && taRef.current.blur();
+					if (taRef.current) taRef.current.blur();
+					const seat = composerSeat();
+					const active = document.activeElement;
+					if (seat && active && seat.contains(active)) active.blur();
 				} catch {}
 				setEngaged(false);
 				setDockFocused(false);
@@ -2317,6 +2380,87 @@ body[data-fm-focus] #root :has(> [data-slot="conversation"]){margin-bottom:0!imp
 				focused: dockFocused,
 				engaged
 			});
+			const [borrowAvailable, setBorrowAvailable] = (0, react.useState)(false);
+			const borrowWanted = prefs.borrow && !!currentId && snap !== null;
+			const borrowedBar = shouldLiftOfficialComposer({
+				wanted: borrowWanted,
+				available: borrowAvailable,
+				form
+			});
+			(0, react.useEffect)(() => {
+				if (!borrowWanted) {
+					setBorrowAvailable(false);
+					return;
+				}
+				let tries = 0;
+				let timer = null;
+				const probe = () => {
+					if (composerEditable(composerSeat())) {
+						setBorrowAvailable(true);
+						return;
+					}
+					if (++tries > 30) return;
+					timer = setTimeout(probe, 100);
+				};
+				probe();
+				return () => {
+					if (timer) clearTimeout(timer);
+				};
+			}, [borrowWanted]);
+			(0, react.useEffect)(() => {
+				if (!borrowedBar) return;
+				const seat = composerSeat();
+				if (!seat) return;
+				const inSeat = (t) => t instanceof Node && seat.contains(t);
+				const onFocusIn = (e) => {
+					if (inSeat(e.target)) onDockFocusChange(true);
+				};
+				const onFocusOut = (e) => {
+					if (inSeat(e.relatedTarget)) return;
+					setTimeout(() => {
+						if (!inSeat(document.activeElement)) onDockFocusChange(false);
+					}, 0);
+				};
+				seat.addEventListener("focusin", onFocusIn);
+				seat.addEventListener("focusout", onFocusOut);
+				return () => {
+					seat.removeEventListener("focusin", onFocusIn);
+					seat.removeEventListener("focusout", onFocusOut);
+					onDockFocusChange(false);
+				};
+			}, [borrowedBar]);
+			(0, react.useEffect)(() => {
+				const seat = composerSeat();
+				if (!seat) return;
+				if (!borrowedBar) return;
+				seat.style.setProperty("--fm-lift-width", `${Math.min(prefs.width, 680)}px`);
+				seat.classList.add("fm-lift");
+				if (focusBarOnce.current) {
+					const editable = composerEditable(seat);
+					if (!editable) {
+						setBorrowAvailable(false);
+						setDockFocused(false);
+					} else {
+						focusBarOnce.current = false;
+						let landed = false;
+						try {
+							editable.focus();
+							landed = seat.contains(document.activeElement);
+						} catch {}
+						onDockFocusChange(landed);
+						setEngaged(false);
+					}
+				}
+				return () => {
+					seat.classList.remove("fm-lift");
+					seat.style.removeProperty("--fm-lift-width");
+				};
+			}, [borrowedBar, prefs.width]);
+			const prevDraftRef = (0, react.useRef)(draftValue);
+			(0, react.useEffect)(() => {
+				if (prevDraftRef.current !== "" && draftValue === "" && zone) revealArmed.current = true;
+				prevDraftRef.current = draftValue;
+			}, [draftValue, zone]);
 			(0, react.useEffect)(() => {
 				if (!pending) {
 					if (cardOpen) setCardOpen(false);
@@ -2327,14 +2471,14 @@ body[data-fm-focus] #root :has(> [data-slot="conversation"]){margin-bottom:0!imp
 				setEngaged(false);
 			}, [pending, cardOpen]);
 			(0, react.useEffect)(() => {
-				if (form === "bar" && focusBarOnce.current) {
+				if (form === "bar" && !borrowedBar && focusBarOnce.current) {
 					focusBarOnce.current = false;
 					try {
 						taRef.current && taRef.current.focus();
 					} catch {}
 					setEngaged(false);
 				}
-			}, [form]);
+			}, [form, borrowedBar]);
 			let title = "Focus Mode";
 			if (currentId && listState && listState.byId && listState.byId[currentId]) {
 				const row = listState.byId[currentId];
@@ -2578,6 +2722,7 @@ body[data-fm-focus] #root :has(> [data-slot="conversation"]){margin-bottom:0!imp
 							t,
 							width: prefs.width,
 							form,
+							borrowed: borrowedBar,
 							wait,
 							onCardClose: () => setCardOpen(false),
 							draft: draftValue,
@@ -2677,6 +2822,23 @@ body[data-fm-focus] #root :has(> [data-slot="conversation"]){margin-bottom:0!imp
 						children: t("settings.hotkey.hint")
 					})]
 				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "fm-plugin-field",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+						className: "fm-plugin-check",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "checkbox",
+							checked: prefs.borrow,
+							onChange: (e) => prefsStore.update({ borrow: e.target.checked })
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "fm-plugin-check-label",
+							children: t("settings.borrow")
+						})]
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: "fm-plugin-field-hint",
+						children: t("settings.borrow.hint")
+					})]
+				}),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "fm-plugin-field",
 					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
@@ -2854,6 +3016,8 @@ body[data-fm-focus] #root :has(> [data-slot="conversation"]){margin-bottom:0!imp
 			"settings.autoFocus.hint": "AI 正常完成回复后自动进入并定位到你的提问",
 			"settings.hotkey": "按 F 键进入专注模式",
 			"settings.hotkey.hint": "在任意界面按下 F 立即进入专注模式；在输入框内打字不会触发",
+			"settings.borrow": "使用官方输入框",
+			"settings.borrow.hint": "专注模式直接借用主界面的官方输入框（支持 / 指令、@ 引用文件与会话）；关闭时使用插件内置输入框。官方输入框不可用时自动回退。",
 			"process.toolCalls": "{n} 次工具调用",
 			"process.messages": "{n} 条消息",
 			"process.subagents": "{n} 个 subagent",
@@ -2933,6 +3097,8 @@ body[data-fm-focus] #root :has(> [data-slot="conversation"]){margin-bottom:0!imp
 			"settings.autoFocus.hint": "Auto-open at your question after a normal reply",
 			"settings.hotkey": "Press F to enter focus mode",
 			"settings.hotkey.hint": "Press F anywhere to enter focus mode instantly; typing in an input never triggers it",
+			"settings.borrow": "Use the official composer",
+			"settings.borrow.hint": "Focus mode borrows the main view's official composer (slash commands, @ file/session references included); turn off to use the built-in input bar. Falls back automatically when the official composer is unavailable.",
 			"process.toolCalls": "{n} tool calls",
 			"process.messages": "{n} messages",
 			"process.subagents": "{n} subagents",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-focus-overlay",
-  "version": "0.11.2",
+  "version": "0.12.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",
@@ -54,6 +54,7 @@
     "bundle"
   ],
   "devDependencies": {
+    "playwright-core": "^1.63.0",
     "tsdown": "0.22.2",
     "vitest": "^4.1.10"
   },