dsh-focus-overlay 0.11.3 → 0.12.1

package/README.en.md

@@ -25,6 +25,7 @@
 - **Auto-focus & reminders** — after a reply completes normally, optionally auto-enter focus at your question; while in focus, get a toast for a new reply or when the AI is waiting on you
 - **Width handles** — draggable strips beside the content column (official WidthHandle replica) that resize the reading column live and persist
 - **Hotkey F** — press `F` anywhere to enter focus mode instantly (toggleable in settings); typing in an input never triggers it
+- **Focus counter** — the settings card keeps a running total of your focus-mode entries; past 100 entries a GitHub Star nudge appears, is remembered after the first use, and then becomes a direct "open the project page" button
 
 These features are designed to give **small screens** more content space: tucking away the persistent header/composer and tool steps lets the conversation use as much of the screen as possible.
 
@@ -71,6 +72,7 @@ Click the line to expand that turn's full work detail (per-category one-line sum
 | Auto-enter focus | After a reply **completes normally**, auto-open focus at your question; abnormal endings (stop / error / max-tokens / interrupt) never fire — the judgement waits for a stable snapshot (streaming tail drained) first |
 | Reply / waiting reminders | In focus, a one-shot "New reply ready + View" toast on completion (auto-dismissed after 6s); a question/approval raises "AI is waiting for your reply + Answer", whose button expands the in-place answer card — auto-cleared once answered, never leaving focus |
 | F hotkey | Press `F` anywhere to enter focus mode instantly (default on, toggleable in settings); never fires while typing in an input or editable element, modifiers and auto-repeat ignored |
+| Focus counter | A row at the bottom of the settings card totals your focus-mode entries (auto-entries included), persisted to `localStorage`; past 100 entries a Star nudge appears — after the first use it is remembered and replaced by a direct "open the project page" button |
 | Esc peels layer by layer | Answer card → input bar → focus mode, one layer per press; Esc mid-IME-composition cancels the composition first |
 | i18n | Chinese / English copy registered under the `focus` namespace, follows the UI language |
 | Plugin configuration card | A collapsible card under "Settings → Plugins → Plugin configuration", preferences persisted to `localStorage`; the Node half registers the same settings namespace (schemastery schema) so the tab dispatches it |

package/README.md

@@ -23,6 +23,7 @@
 - **自动专注与提醒** —— 回复正常完成后可自动进入专注并定位到你的提问；专注中收到新回复、或 AI 等待你回答时弹出提醒
 - **宽度调节** —— 正文两侧的拖拽把手（官方 WidthHandle 复刻），实时拖动阅读列宽并持久化
 - **快捷键 F** —— 任意界面按 `F` 一键进入专注模式，可在设置中关闭；输入框内打字不会误触发
+- **专注计数** —— 设置卡片最底部累计展示你进入专注模式的次数；超过 100 次后出现 GitHub Star 引导，点过一次即被记住，之后提供「前往 GitHub 项目页面」直达按钮
 
 这些功能专为**小屏幕**提供更多内容呈现空间：收起常驻的标题 / 输入区与工具步骤，让有限的屏幕尽可能多地展示对话。
 
@@ -69,6 +70,7 @@
 | 自动进入专注 | 回复**正常完成**后自动打开专注并定位到本轮你的提问；异常结束（停止 / 报错 / 超 token / 打断）不触发——判定要求快照稳定（流式尾部排空）后才下结论 |
 | 回复 / 等待提醒 | 专注中回复完成弹「新回复已生成 + 查看」（6 秒自动消失，一次性）；AI 提问 / 审批等待时弹「AI 正在等待你的回复 + 去回答」，按钮原地展开答题卡，作答后自动消失——全程无需退出专注 |
 | F 键快捷键 | 任意界面按 `F` 立即进入专注（默认开，可在设置中关闭）；输入框 / 可编辑元素内打字不触发，忽略修饰键与长按自动重复 |
+| 专注计数 | 设置卡片最底部一行累计进入专注模式的次数（含自动进入），持久化到 `localStorage`；超过 100 次出现 Star 引导按钮，点击前往仓库页面并记住状态，之后改为「前往 GitHub 项目页面」直达按钮 |
 | Esc 逐层退出 | 答题卡 → 输入条 → 专注模式，一层一层退；输入法组词中的 Esc 优先取消组词 |
 | i18n | 中 / 英文案，注册到 `focus` 命名空间，跟随界面语言 |
 | 插件配置卡片 | 「设置 → 插件 → 插件配置」中的可折叠卡片，偏好持久化到 `localStorage`；Node 半区以 schemastery schema 注册同名设置 namespace 供其分发 |

package/lib/client.js

@@ -519,6 +519,39 @@ window.__ModuleLoader__.load({
 		function onboardingSeen(stored, version) {
 			return stored === version;
 		}
+		/** Parse the persisted focus-entry counter (`{"entries":n}` JSON). Anything
+		*  unreadable — null, broken JSON, a non-number or a negative — reads as 0,
+		*  so one corrupted write can never make the settings page show a bogus
+		*  count; fractions floor (a counter is always whole). */
+		function readEntryCount(raw) {
+			try {
+				if (!raw) return 0;
+				const parsed = JSON.parse(raw);
+				if (!parsed || typeof parsed !== "object") return 0;
+				const n = parsed.entries;
+				if (typeof n !== "number" || !Number.isFinite(n)) return 0;
+				return Math.max(0, Math.floor(n));
+			} catch {
+				return 0;
+			}
+		}
+		/** Whether the settings card should show the Star nudge for this entry count. */
+		function shouldShowStar(entries) {
+			return entries > 100;
+		}
+		/** Whether the persisted stats mark the Star button as already used — the
+		*  card then offers a plain "open the project page" button instead of asking
+		*  for a star again. Anything unreadable reads as not-starred. */
+		function readStarred(raw) {
+			try {
+				if (!raw) return false;
+				const parsed = JSON.parse(raw);
+				if (!parsed || typeof parsed !== "object") return false;
+				return parsed.starred === true;
+			} catch {
+				return false;
+			}
+		}
 		/** Whether a keydown should enter focus mode via the F hotkey. Pure decision so
 		*  the guard rails are unit-testable: the pref must be enabled, focus must not
 		*  already be open, the press must not land in an editable element (composer /
@@ -557,6 +590,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 +734,8 @@ window.__ModuleLoader__.load({
 			scroll: "preserve",
 			width: 760,
 			autoFocus: false,
-			hotkey: true
+			hotkey: true,
+			borrow: true
 		};
 		function load() {
 			try {
@@ -748,6 +790,64 @@ window.__ModuleLoader__.load({
 				} catch {}
 			}
 		};
+		const STATS_KEY = "dsh-focus-overlay:stats";
+		function loadStats() {
+			try {
+				const raw = localStorage.getItem(STATS_KEY);
+				return {
+					entries: readEntryCount(raw),
+					starred: readStarred(raw)
+				};
+			} catch {
+				return {
+					entries: 0,
+					starred: false
+				};
+			}
+		}
+		let stats = loadStats();
+		const statsListeners = [];
+		function persistStats(next) {
+			stats = next;
+			try {
+				localStorage.setItem(STATS_KEY, JSON.stringify(next));
+			} catch {}
+			for (const l of statsListeners) l();
+		}
+		const statsStore = {
+			getEntries: () => stats.entries,
+			isStarred: () => stats.starred,
+			/** One focus-mode open. Writes through to localStorage (best effort); when
+			*  storage is unavailable the in-memory value still counts for the session. */
+			bumpEntries: () => persistStats({
+				...stats,
+				entries: stats.entries + 1
+			}),
+			/** Mark the Star button as used (idempotent). */
+			markStarred: () => {
+				if (!stats.starred) persistStats({
+					...stats,
+					starred: true
+				});
+			},
+			subscribe: (l) => {
+				statsListeners.push(l);
+				return () => {
+					const i = statsListeners.indexOf(l);
+					if (i >= 0) statsListeners.splice(i, 1);
+				};
+			}
+		};
+		function useEntryCount() {
+			const [n, setN] = (0, react.useState)(statsStore.getEntries);
+			(0, react.useEffect)(() => statsStore.subscribe(() => setN(statsStore.getEntries)), []);
+			return n;
+		}
+		function useStarred() {
+			const [s, setS] = (0, react.useState)(statsStore.isStarred);
+			(0, react.useEffect)(() => statsStore.subscribe(() => setS(statsStore.isStarred)), []);
+			return s;
+		}
 		//#endregion
 		//#region src/client/Composer.tsx
 		/**
@@ -1147,8 +1247,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,
@@ -1188,6 +1289,172 @@ window.__ModuleLoader__.load({
 			});
 		}
 		//#endregion
+		//#region src/client/celebrate.ts
+		/**
+		* Firework for the Star button: a short, self-contained canvas animation
+		* appended to document.body with pointer-events:none and removed when done,
+		* so it can never intercept clicks. No dependencies, no stylesheet injection:
+		* every style is inline, so cleanup is simply removing the element.
+		*
+		* Five staggered bursts of ~90 trailing particles each; the GitHub page opens
+		* only after the show ends (celebrateThenOpen).
+		*/
+		const BURSTS = 5;
+		const BURST_GAP_MS = 280;
+		const PARTICLES_PER_BURST = 90;
+		const GRAVITY = 300;
+		const MAX_LIFE_S = 2;
+		const COLORS = [
+			"#f43f5e",
+			"#fb923c",
+			"#facc15",
+			"#4ade80",
+			"#38bdf8",
+			"#a78bfa",
+			"#f472b6"
+		];
+		const FIREWORKS_TOTAL_MS = 4e3;
+		/** Play the fireworks, then open `url` in a new tab once the sky is clear.
+		*  Browsers honor the click's transient activation for a few seconds, so the
+		*  delayed open is not popup-blocked in Chrome; stricter browsers fall back
+		*  on the repo button beside the counter, which opens the page directly. */
+		function celebrateThenOpen(url) {
+			const launched = launchFireworks();
+			setTimeout(() => {
+				try {
+					window.open(url, "_blank", "noopener");
+				} catch {}
+			}, launched ? FIREWORKS_TOTAL_MS : 400);
+		}
+		/** Launch the bursts. Returns false when nothing was animated (reduced-motion
+		*  preference, an existing show, or an unavailable 2D context). */
+		function launchFireworks() {
+			try {
+				if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return false;
+				if (document.querySelector("[data-fm-fireworks]")) return false;
+				const canvas = document.createElement("canvas");
+				canvas.setAttribute("data-fm-fireworks", "");
+				const dpr = Math.min(window.devicePixelRatio || 1, 2);
+				const w = window.innerWidth;
+				const h = window.innerHeight;
+				canvas.width = Math.max(1, Math.floor(w * dpr));
+				canvas.height = Math.max(1, Math.floor(h * dpr));
+				canvas.style.cssText = "position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:2147483000";
+				document.body.appendChild(canvas);
+				const ctx = canvas.getContext("2d");
+				if (!ctx) {
+					canvas.remove();
+					return false;
+				}
+				ctx.scale(dpr, dpr);
+				const rand = (a, b) => a + Math.random() * (b - a);
+				const rockets = [];
+				const particles = [];
+				const spawnRocket = (i) => {
+					rockets.push({
+						x: w * (.22 + .14 * i) + rand(-30, 30),
+						y: h + 8,
+						vy: -h * rand(1.05, 1.25),
+						targetY: h * rand(.14, .36),
+						color: COLORS[i % COLORS.length]
+					});
+				};
+				const start = performance.now();
+				let spawned = 0;
+				const explode = (r) => {
+					for (let k = 0; k < PARTICLES_PER_BURST; k++) {
+						const angle = Math.PI * 2 * k / PARTICLES_PER_BURST + rand(-.07, .07);
+						const speed = rand(80, 430) * (k % 4 === 0 ? .55 : 1);
+						const maxLife = rand(1.2, MAX_LIFE_S);
+						particles.push({
+							x: r.x,
+							y: r.y,
+							px: r.x,
+							py: r.y,
+							vx: Math.cos(angle) * speed,
+							vy: Math.sin(angle) * speed,
+							life: maxLife,
+							maxLife,
+							color: Math.random() < .25 ? "#ffffff" : r.color
+						});
+					}
+				};
+				let prev = performance.now();
+				let raf = 0;
+				const step = (now) => {
+					const dt = Math.min((now - prev) / 1e3, .05);
+					prev = now;
+					ctx.clearRect(0, 0, w, h);
+					ctx.globalCompositeOperation = "lighter";
+					const elapsed = now - start;
+					while (spawned < BURSTS && elapsed >= spawned * BURST_GAP_MS) spawnRocket(spawned++);
+					for (let i = rockets.length - 1; i >= 0; i--) {
+						const r = rockets[i];
+						r.y += r.vy * dt;
+						ctx.globalAlpha = .9;
+						ctx.strokeStyle = r.color;
+						ctx.lineWidth = 2.4;
+						ctx.beginPath();
+						ctx.moveTo(r.x, r.y + 9);
+						ctx.lineTo(r.x, r.y);
+						ctx.stroke();
+						if (Math.random() < .6) particles.push({
+							x: r.x + rand(-2, 2),
+							y: r.y + rand(0, 6),
+							px: r.x,
+							py: r.y,
+							vx: rand(-30, 30),
+							vy: rand(10, 70),
+							life: rand(.25, .5),
+							maxLife: .5,
+							color: r.color
+						});
+						if (r.y <= r.targetY) {
+							explode(r);
+							rockets.splice(i, 1);
+						}
+					}
+					ctx.lineWidth = 1.8;
+					for (let i = particles.length - 1; i >= 0; i--) {
+						const p = particles[i];
+						p.life -= dt;
+						if (p.life <= 0) {
+							particles.splice(i, 1);
+							continue;
+						}
+						p.px = p.x;
+						p.py = p.y;
+						p.vy += GRAVITY * dt;
+						p.vx *= 1 - 1.1 * dt;
+						p.vy *= 1 - .4 * dt;
+						p.x += p.vx * dt;
+						p.y += p.vy * dt;
+						let a = p.life / p.maxLife;
+						if (p.life < p.maxLife * .4 && Math.random() < .35) a *= .3;
+						ctx.globalAlpha = Math.max(0, a);
+						ctx.strokeStyle = p.color;
+						ctx.beginPath();
+						ctx.moveTo(p.px, p.py);
+						ctx.lineTo(p.x, p.y);
+						ctx.stroke();
+					}
+					ctx.globalAlpha = 1;
+					if (elapsed < FIREWORKS_TOTAL_MS || rockets.length > 0 || particles.length > 0) {
+						raf = requestAnimationFrame(step);
+						return;
+					}
+					canvas.remove();
+				};
+				raf = requestAnimationFrame(step);
+				setTimeout(() => {
+					cancelAnimationFrame(raf);
+					canvas.remove();
+				}, 7e3);
+				return true;
+			} catch {}
+			return false;
+		}
+		//#endregion
 		//#region src/client/styles.ts
 		/** Package-owned stylesheet text (injected by the client apply, cleaned up on unload). */
 		const FOCUS_CSS = `
@@ -1195,7 +1462,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}
@@ -1248,6 +1515,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
@@ -1322,9 +1614,13 @@ window.__ModuleLoader__.load({
 .fm-plugin-card-desc{color:var(--dsw-alias-label-tertiary);font-size:13px;line-height:1.5}
 .fm-plugin-card-chevron{color:var(--dsw-alias-label-tertiary);flex:none;transition:transform .16s}
 .fm-plugin-card-chevron-open{transform:rotate(180deg)}
-.fm-plugin-card-body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:12px}
+.fm-plugin-card-body{border-top:1px solid var(--dsw-alias-border-l2);margin:0 16px;padding-bottom:16px}
 .fm-plugin-field{flex-direction:column;gap:6px;padding:12px 0;display:flex}
 .fm-plugin-field+.fm-plugin-field{border-top:1px solid var(--dsw-alias-border-l2)}
+/* The stats row ends the card body, so it carries NO bottom padding of its
+   own — the body's 16px padding-bottom is the entire below-gap, matching the
+   row's 16px above-gap after the divider (symmetric, one rhythm). */
+.fm-plugin-field-stat{padding:16px 0 0}
 .fm-plugin-field-head{align-items:center;gap:8px;display:flex}
 .fm-plugin-field-label{min-width:0;color:var(--dsw-alias-label-primary);flex:1;font-size:13px;font-weight:500;line-height:1.5}
 .fm-plugin-field-value{color:var(--dsw-alias-label-secondary);font-size:12px;line-height:1.5}
@@ -1713,7 +2009,9 @@ body[data-fm-focus] #root :has(> [data-slot="conversation"]){margin-bottom:0!imp
 		const focusStore = {
 			get: () => focusOn,
 			set: (v) => {
-				focusOn = !!v;
+				const next = !!v;
+				if (next && !focusOn) statsStore.bumpEntries();
+				focusOn = next;
 				notify();
 			},
 			subscribe: (l) => {
@@ -1922,6 +2220,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();
@@ -2195,7 +2507,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,
@@ -2218,6 +2530,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) {
@@ -2302,7 +2615,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);
@@ -2327,6 +2643,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);
@@ -2337,14 +2734,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];
@@ -2588,6 +2985,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,
@@ -2687,6 +3085,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", {
@@ -2723,6 +3138,41 @@ body[data-fm-focus] #root :has(> [data-slot="conversation"]){margin-bottom:0!imp
 				})
 			] });
 		}
+		/** The settings card's bottom row: the persisted focus-entry counter, and —
+		*  once the count passes the threshold — a nudge to star the repo. */
+		const REPO_URL = "https://github.com/boogoo619/dsh-focus-overlay";
+		function FocusEntryStat({ t }) {
+			const entries = useEntryCount();
+			const starred = useStarred();
+			const star = shouldShowStar(entries);
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "fm-plugin-field fm-plugin-field-stat",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: "fm-plugin-field-head",
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "fm-plugin-field-label",
+						children: t(star ? "settings.entries.cheer" : "settings.entries", { n: entries })
+					}), star ? starred ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => {
+							try {
+								window.open(REPO_URL, "_blank", "noopener");
+							} catch {}
+						},
+						children: t("settings.entries.repo")
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+						variant: "primary",
+						size: "sm",
+						onClick: () => {
+							statsStore.markStarred();
+							celebrateThenOpen(REPO_URL);
+						},
+						children: t("settings.entries.star")
+					}) : null]
+				})
+			});
+		}
 		function FocusSettingsCard({ t }) {
 			const [open, setOpen] = (0, react.useState)(false);
 			const title = t("settings.label");
@@ -2744,9 +3194,9 @@ body[data-fm-focus] #root :has(> [data-slot="conversation"]){margin-bottom:0!imp
 							children: t("settings.description")
 						})]
 					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.IconChevronDownOutline14, { className: "fm-plugin-card-chevron" + (open ? " fm-plugin-card-chevron-open" : "") })]
-				}), open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				}), open ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					className: "fm-plugin-card-body",
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FocusPrefsFields, { t })
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FocusPrefsFields, { t }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FocusEntryStat, { t })]
 				}) : null]
 			});
 		}
@@ -2864,6 +3314,12 @@ 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": "专注模式直接借用主界面的官方输入框（支持 / 指令、@ 引用文件与会话）；关闭时使用插件内置输入框。官方输入框不可用时自动回退。",
+			"settings.entries": "您已进入专注模式 {n} 次",
+			"settings.entries.cheer": "🎉 您已进入专注模式 {n} 次 ✨",
+			"settings.entries.star": "为这个项目点一个 GitHub Star ⭐",
+			"settings.entries.repo": "前往 GitHub 项目页面",
 			"process.toolCalls": "{n} 次工具调用",
 			"process.messages": "{n} 条消息",
 			"process.subagents": "{n} 个 subagent",
@@ -2943,6 +3399,12 @@ 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.",
+			"settings.entries": "You have entered focus mode {n} times",
+			"settings.entries.cheer": "🎉 You have entered focus mode {n} times ✨",
+			"settings.entries.star": "Give this project a GitHub Star ⭐",
+			"settings.entries.repo": "Open the GitHub project page",
 			"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.3",
+  "version": "0.12.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",