dsh-focus-overlay 0.12.0 → 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 /
@@ -757,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
 		/**
@@ -1198,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 = `
@@ -1357,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}
@@ -1748,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) => {
@@ -2875,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");
@@ -2896,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]
 			});
 		}
@@ -3018,6 +3316,10 @@ body[data-fm-focus] #root :has(> [data-slot="conversation"]){margin-bottom:0!imp
 			"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",
@@ -3099,6 +3401,10 @@ body[data-fm-focus] #root :has(> [data-slot="conversation"]){margin-bottom:0!imp
 			"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.12.0",
+  "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",