dsh-focus-overlay 0.3.0 → 0.4.0

package/README.en.md

@@ -57,7 +57,7 @@ Once in focus mode, an assistant turn no longer shows every step — it folds in
 | Back to latest | A centered "↓ back to latest" floating button appears when you scroll away from the bottom |
 | File mentions | Wires `chatFileMentions`, turning inline-code tokens that name real files into clickable links |
 | i18n | Chinese / English copy, follows the UI language |
-| Settings page | Navbar toggle, open-position strategy, text-area width — persisted to `localStorage` |
+| Plugin configuration card | A collapsible card under "Settings → Plugins → Plugin configuration": navbar toggle, open-position strategy, text-area width — persisted to `localStorage` |
 | Auto-enter focus | After a reply **completes normally**, auto-open focus at your question; abnormal endings (stop / error / max-tokens / interrupt) never fire |
 | Reply / waiting reminders | In focus, a "New reply ready + View" toast on completion; an "AI is waiting for your reply + Reply" toast on a question/approval, auto-cleared once answered |
 
@@ -72,6 +72,14 @@ dsh plugin --profile web add dsh-focus-overlay
 dsh web
 ```
 
+> If `add` doesn't install the latest version, pnpm's `minimumReleaseAge` (minimum release age) security policy is at work: by default it won't resolve a version as `latest` within **24 hours** of publication, falling back to the previous stable release. To install the latest immediately, pin the version explicitly:
+>
+> ```sh
+> dsh plugin --profile web add dsh-focus-overlay@<version>
+> ```
+>
+> Or wait 24 hours, then re-run the plain `add` command.
+
 **From GitHub**
 
 ```sh
@@ -88,13 +96,6 @@ dsh web
 >
 > Then re-run `add`. **This authorization lets the package's code run on your machine at install time** — only grant it to sources you trust, and pin the commit (`github:boogoo619/dsh-focus-overlay#<sha>`).
 
-**Local directory / tarball**
-
-```sh
-dsh plugin --profile web add ./dsh-focus-overlay                  # local directory
-dsh plugin --profile web add ./dsh-focus-overlay-0.1.0.tgz        # tarball
-```
-
 Restart `dsh web` after install.
 
 ## Usage
@@ -106,7 +107,7 @@ Restart `dsh web` after install.
 
 ## Settings
 
-Sidebar "Settings → Focus Mode":
+In the sidebar "Settings → Plugins → Plugin configuration", expand the "Focus Mode" card:
 
 | Option | Description |
 | --- | --- |

package/README.md

@@ -55,7 +55,7 @@
 | 回到最新 | 离开底部时显示居中的「↓ 回到最新」悬浮按钮 |
 | 文件提及 | 接 `chatFileMentions`，内联代码命中真实文件时变成可点链接 |
 | i18n | 中 / 英文案，跟随界面语言 |
-| 设置页 | 导航条开关、打开定位策略、文字区宽度，持久化到 `localStorage` |
+| 插件配置卡片 | 在「设置 → 插件 → 插件配置」中的可折叠卡片，含导航条开关、打开定位策略、文字区宽度，持久化到 `localStorage` |
 | 自动进入专注 | 回复**正常完成**后自动打开专注并定位到本轮你的提问；异常结束（停止 / 报错 / 超 token / 打断）不触发 |
 | 回复 / 等待提醒 | 专注中回复完成弹「新回复已生成 + 查看」；AI 提问 / 审批等待时弹「AI 正在等待你的回复 + 去回复」，回答完自动消失 |
 
@@ -70,6 +70,14 @@ dsh plugin --profile web add dsh-focus-overlay
 dsh web
 ```
 
+> 如果 `add` 装到的不是最新版本：这是 pnpm 的 `minimumReleaseAge`（最小发布年龄）安全机制在起作用——默认 **24 小时**内不会把刚发布的版本当作 `latest` 解析，而是回退到上一个稳定版。想立即装最新版，显式指定版本号即可：
+>
+> ```sh
+> dsh plugin --profile web add dsh-focus-overlay@<版本号>
+> ```
+>
+> 或者等满 24 小时，再执行不带版本号的 `add` 命令。
+
 **从 GitHub**
 
 ```sh
@@ -86,13 +94,6 @@ dsh web
 >
 > 然后重新执行 `add`。**该授权允许本包代码在安装时于你的机器上执行**——请只对可信来源授权，并锁定 commit（`github:boogoo619/dsh-focus-overlay#<sha>`）。
 
-**本地目录 / tarball**
-
-```sh
-dsh plugin --profile web add ./dsh-focus-overlay                  # 本地目录
-dsh plugin --profile web add ./dsh-focus-overlay-0.1.0.tgz        # tarball
-```
-
 安装后重启 `dsh web` 生效。
 
 ## 使用
@@ -104,7 +105,7 @@ dsh plugin --profile web add ./dsh-focus-overlay-0.1.0.tgz        # tarball
 
 ## 设置
 
-侧栏「设置 → 专注模式」：
+侧栏「设置 → 插件 → 插件配置」中，展开「专注模式」卡片：
 
 | 选项 | 说明 |
 | --- | --- |

package/lib/client.js

@@ -264,15 +264,26 @@ window.__ModuleLoader__.load({
 			return -1;
 		}
 		/**
-		* Decide whether an already-settled conversation snapshot (`running === false`)
-		* ends in a *normal* completed reply, and which user message started it.
+		* Decide whether a settled conversation snapshot (`running === false`) ends in
+		* a *normal* completed reply, and which user message started it.
 		*
-		* The caller owns the `running true → false` edge; this is the pure
-		* "is the tail a finished reply?" predicate: it walks backwards to the first
-		* turn-terminating node (`assistant` / `turn-error` / `turn-max-tokens`), then
-		* accepts only a finalized, non-interrupted assistant node.
+		* The caller owns the `running true → false` edge. `running` is relayed on a
+		* different stream than the conversation events, so the edge can fire before an
+		* aborted turn's `interrupted` node has landed — at that instant the tail is
+		* still held in `partial` and `nodes` is missing the final assistant (a
+		* finalized question message can then be mistaken for the tail). To close that
+		* race we require the snapshot to be *stable* first: while `partial` is non-null
+		* we return `settled: false` and the caller must re-evaluate on a later
+		* snapshot. Once stable, this walks backwards to the first turn-terminating node
+		* (`assistant` / `turn-error` / `turn-max-tokens`) and accepts only a finalized,
+		* non-interrupted assistant node.
 		*/
 		function detectSettledCompletion(snap) {
+			if (snap && snap.partial != null) return {
+				settled: false,
+				completed: false,
+				anchorSeq: null
+			};
 			const nodes = snap && snap.nodes ? snap.nodes : [];
 			let terminal = null;
 			for (let i = nodes.length - 1; i >= 0; i--) {
@@ -284,10 +295,12 @@ window.__ModuleLoader__.load({
 				}
 			}
 			if (!terminal || terminal.kind !== "assistant" || terminal.interrupted) return {
+				settled: true,
 				completed: false,
 				anchorSeq: null
 			};
 			return {
+				settled: true,
 				completed: true,
 				anchorSeq: lastUserSeq(nodes)
 			};
@@ -739,51 +752,112 @@ window.__ModuleLoader__.load({
 				children: t("toggle")
 			});
 		}
-		function FocusSettings({ t }) {
+		function FocusSettingsCard({ t }) {
 			const prefs = usePrefs();
-			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-				className: "fm-settings",
-				children: [
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-						className: "fm-setting-row",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-							type: "checkbox",
-							checked: prefs.navbar,
-							onChange: (e) => prefsStore.update({ navbar: e.target.checked })
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("settings.navbar") })]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-						className: "fm-setting-row",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-							type: "checkbox",
-							checked: prefs.scroll === "preserve",
-							onChange: (e) => prefsStore.update({ scroll: e.target.checked ? "preserve" : "bottom" })
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("settings.scrollPreserve") })]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
-						className: "fm-setting-row",
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-							type: "checkbox",
-							checked: prefs.autoFocus,
-							onChange: (e) => prefsStore.update({ autoFocus: e.target.checked })
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("settings.autoFocus") })]
-					}),
-					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: "fm-setting-row",
-						children: [
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: t("settings.width") }),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-								type: "range",
-								min: 480,
-								max: 1200,
-								step: 40,
-								value: prefs.width,
-								onChange: (e) => prefsStore.update({ width: Number(e.target.value) })
-							}),
-							/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", { children: [prefs.width, "px"] })
-						]
-					})
-				]
+			const [open, setOpen] = (0, react.useState)(false);
+			const title = t("settings.label");
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+				className: "fm-plugin-card" + (open ? " fm-plugin-card-open" : ""),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+					type: "button",
+					className: "fm-plugin-card-header",
+					"aria-expanded": open,
+					"aria-label": `${t(open ? "settings.collapse" : "settings.expand")}: ${title}`,
+					onClick: () => setOpen(!open),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+						className: "fm-plugin-card-headtext",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "fm-plugin-card-name",
+							children: title
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+							className: "fm-plugin-card-desc",
+							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.jsxs)("div", {
+					className: "fm-plugin-card-body",
+					children: [
+						/* @__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.navbar,
+									onChange: (e) => prefsStore.update({ navbar: e.target.checked })
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "fm-plugin-check-label",
+									children: t("settings.navbar")
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "fm-plugin-field-hint",
+								children: t("settings.navbar.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.scroll === "preserve",
+									onChange: (e) => prefsStore.update({ scroll: e.target.checked ? "preserve" : "bottom" })
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "fm-plugin-check-label",
+									children: t("settings.scrollPreserve")
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "fm-plugin-field-hint",
+								children: t("settings.scrollPreserve.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.autoFocus,
+									onChange: (e) => prefsStore.update({ autoFocus: e.target.checked })
+								}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+									className: "fm-plugin-check-label",
+									children: t("settings.autoFocus")
+								})]
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+								className: "fm-plugin-field-hint",
+								children: t("settings.autoFocus.hint")
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: "fm-plugin-field",
+							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("settings.width")
+									}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+										className: "fm-plugin-field-value",
+										children: [prefs.width, "px"]
+									})]
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+									type: "range",
+									className: "fm-plugin-range",
+									min: 480,
+									max: 1200,
+									step: 40,
+									value: prefs.width,
+									onChange: (e) => prefsStore.update({ width: Number(e.target.value) })
+								}),
+								/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+									className: "fm-plugin-field-hint",
+									children: t("settings.width.hint")
+								})
+							]
+						})
+					]
+				}) : null]
 			});
 		}
 		//#endregion
@@ -820,10 +894,27 @@ window.__ModuleLoader__.load({
 .fm-reply-toast{position:absolute;left:50%;transform:translateX(-50%);bottom:64px;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:0 4px 16px rgba(0,0,0,.12);font-size: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}
-.fm-settings{display:flex;flex-direction:column;gap:16px;max-width:560px;padding:8px 0}
-.fm-setting-row{display:flex;align-items:center;gap:10px;font-size:14px;cursor:pointer;user-select:none}
-.fm-setting-row input[type="checkbox"]{width:16px;height:16px;cursor:pointer}
-.fm-setting-row input[type="range"]{flex:1;max-width:240px;cursor:pointer}
+.fm-plugin-card{border:1px solid var(--dsw-alias-border-l2);background:var(--dsw-alias-bg-layer-3);border-radius:12px;list-style:none;transition:border-color .16s,background .16s}
+.fm-plugin-card:hover{border-color:var(--dsw-alias-label-dimmed)}
+.fm-plugin-card-open{background:var(--dsw-alias-bg-layer-2);border-color:var(--dsw-alias-label-dimmed)}
+.fm-plugin-card-header{appearance:none;width:100%;font:inherit;color:inherit;text-align:left;cursor:pointer;background:0 0;border:0;border-radius:12px;align-items:center;gap:12px;padding:14px 16px;display:flex}
+.fm-plugin-card-header:focus-visible{outline:2px solid var(--dsw-alias-brand-primary);outline-offset:-2px}
+.fm-plugin-card-headtext{flex-direction:column;flex:1;gap:4px;min-width:0;display:flex}
+.fm-plugin-card-name{color:var(--dsw-alias-label-primary);font-size:15px;font-weight:600;line-height:1.4}
+.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-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)}
+.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}
+.fm-plugin-field-hint{color:var(--dsw-alias-label-tertiary);margin:0;font-size:12px;line-height:1.5}
+.fm-plugin-check{align-items:center;gap:8px;display:flex;cursor:pointer;user-select:none}
+.fm-plugin-check input[type="checkbox"]{width:16px;height:16px;margin:0;cursor:pointer;accent-color:var(--dsw-alias-brand-primary,#4176e6)}
+.fm-plugin-check-label{color:var(--dsw-alias-label-primary);font-size:13px;line-height:1.5}
+.fm-plugin-range{width:100%;max-width:280px;cursor:pointer;accent-color:var(--dsw-alias-brand-primary,#4176e6)}
 `;
 		//#endregion
 		//#region src/client/locales.ts
@@ -834,10 +925,17 @@ window.__ModuleLoader__.load({
 			"exit": "退出专注 (Esc)",
 			"backToLatest": "回到最新",
 			"settings.label": "专注模式",
+			"settings.description": "全屏阅读遮罩的偏好设置",
+			"settings.expand": "展开",
+			"settings.collapse": "收起",
 			"settings.navbar": "显示右侧导航条",
+			"settings.navbar.hint": "在右侧显示用户消息导航圆点",
 			"settings.scrollPreserve": "打开时保留聊天位置",
+			"settings.scrollPreserve.hint": "打开时定位到当前阅读位置；关闭则定位到最新",
 			"settings.autoFocus": "回复结束后自动进入专注模式",
+			"settings.autoFocus.hint": "回复正常完成后自动打开；AI 提问 / 审批等待时弹出提醒",
 			"settings.width": "文字区宽度",
+			"settings.width.hint": "专注模式阅读列宽度（480–1200px）",
 			"empty": "暂无打开的会话",
 			"loading": "正在读取会话…",
 			"running": "· 正在工作 …",
@@ -867,10 +965,17 @@ window.__ModuleLoader__.load({
 			"exit": "Exit focus (Esc)",
 			"backToLatest": "Back to latest",
 			"settings.label": "Focus Mode",
+			"settings.description": "Preferences for the full-screen reading overlay",
+			"settings.expand": "Expand",
+			"settings.collapse": "Collapse",
 			"settings.navbar": "Show right-side navbar",
+			"settings.navbar.hint": "Show navigation dots for user messages on the right",
 			"settings.scrollPreserve": "Preserve chat position on open",
+			"settings.scrollPreserve.hint": "Open at your current reading position; off opens at the latest",
 			"settings.autoFocus": "Auto-enter focus mode when a reply completes",
+			"settings.autoFocus.hint": "Auto-open after a normal completion; toast while AI waits for you",
 			"settings.width": "Text width",
+			"settings.width.hint": "Reading column width (480–1200px)",
 			"empty": "No open session",
 			"loading": "Reading session…",
 			"running": "· Working …",
@@ -899,7 +1004,8 @@ window.__ModuleLoader__.load({
 		/**
 		* Focus Mode, browser half: a full-screen reading overlay in `shell.overlay`
 		* (additive, never replaces shipped UI), a "专注" button in the session header
-		* action row, and a settings section. Rendering reuses the official
+		* action row, and a collapsible plugin card in the Plugins settings tab
+		* (`settings.plugin.item`). Rendering reuses the official
 		* `@deepseek-ai/dsh-client-ui-primitives` Markdown/MessageText/Tooltip/Button
 		* components and the conversation service's image resolver.
 		*/
@@ -936,12 +1042,14 @@ window.__ModuleLoader__.load({
 					let currentId = void 0;
 					let unsubSession = null;
 					let prevRunning = false;
+					let pendingSettle = false;
 					const watch = (id) => {
 						if (unsubSession) {
 							unsubSession();
 							unsubSession = null;
 						}
 						prevRunning = false;
+						pendingSettle = false;
 						if (id == null) return;
 						const binding = sessions.binding(id);
 						if (!binding) return;
@@ -950,12 +1058,17 @@ window.__ModuleLoader__.load({
 							const snap = face.getSnapshot();
 							if (!snap) return;
 							const running = !!snap.running;
-							if (prevRunning && !running) {
+							if (prevRunning && !running) pendingSettle = true;
+							if (running) pendingSettle = false;
+							if (pendingSettle && !running) {
 								const outcome = detectSettledCompletion(snap);
-								if (outcome.completed && prefsStore.get().autoFocus) if (focusStore.get()) focusStore.notifyDone();
-								else {
-									focusStore.setAutoAnchor(outcome.anchorSeq);
-									focusStore.set(true);
+								if (outcome.settled) {
+									pendingSettle = false;
+									if (outcome.completed && prefsStore.get().autoFocus) if (focusStore.get()) focusStore.notifyDone();
+									else {
+										focusStore.setAutoAnchor(outcome.anchorSeq);
+										focusStore.set(true);
+									}
 								}
 							}
 							prevRunning = running;
@@ -996,12 +1109,12 @@ window.__ModuleLoader__.load({
 					order: 1e3,
 					label: () => t("toggle")
 				}, () => (0, react.createElement)(FocusToggle, { t })));
-				ctx.slots.inject("settings.section", () => ctx.slots.register({
-					name: "settings.section",
-					id: "focus-mode-settings",
-					order: 100,
+				ctx.slots.inject("settings.plugin.item", () => ctx.slots.register({
+					name: "settings.plugin.item",
+					id: "dsh-focus-overlay",
+					order: 1e3,
 					label: () => t("settings.label")
-				}, () => (0, react.createElement)(FocusSettings, { t })));
+				}, () => (0, react.createElement)(FocusSettingsCard, { t })));
 			}
 		};
 		return module.exports;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-focus-overlay",
-  "version": "0.3.0",
+  "version": "0.4.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",