dsh-focus-overlay 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 boogoo619
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,98 @@
+# dsh-focus-overlay
+
+为 DeepSeek Harness（DSH）Web GUI 提供的**专注模式**插件：一键进入全屏阅读视图，隐藏标题区与输入区，把 AI 的工具调用流程折叠成一句话摘要，只保留"你与 AI 的对话"本身。文本与图片渲染直接复用官方的 `@deepseek-ai/dsh-client-ui-primitives` 原语，与聊天视图 1:1 一致。
+
+这是一个 **bundle 插件**（区别于会话内临时动态插件），能 `import` 官方 Markdown 渲染器、解析会话授权图片，并持久化设置。
+
+## 特性
+
+- **全屏专注遮罩**：通过 `shell.overlay` 注册（纯增量，绝不替换/遮挡自带 UI 的数据），覆盖整个界面，纵向空间全留给对话。
+- **官方渲染**：AI 文本走官方 `MarkdownText`（GFM + 代码高亮 + TeX），用户消息走 `MessageText`，图片走 `conversation.resolveImage`。
+- **工具调用折叠**：工具调用 / 命令 / 上下文注入折叠成分类摘要行（"运行了 2 个命令，编辑了 3 个文件，读取了 5 个文件…"）。
+- **精确保留滚动位置**：进入专注时定位到聊天视图中当前正在阅读的消息，而非从头开始。
+- **右侧节点导航条**：每个 user 消息一个圆点，激活药丸跟随滚动、悬停预览、点击跳转。
+- **回到最新**：离开底部时显示居中的"↓ 回到最新"悬浮按钮。
+- **i18n**：中 / 英文案，跟随界面语言。
+- **设置页**：显示导航条、打开时保留位置、文字区宽度（可拖滑块），持久化到 `localStorage`。
+
+## 安装
+
+需要 `dsh` CLI（`>= 0.1.0-rc.5`）。
+
+### 从 npm
+
+```sh
+dsh plugin --profile web add dsh-focus-overlay
+dsh web
+```
+
+### 从 GitHub
+
+```sh
+dsh plugin --profile web add github:boogoo619/dsh-focus-overlay
+dsh web
+```
+
+> 从 git 安装会拉取**源码**并由 `prepare` 脚本现场构建。pnpm ≥10 会先拒绝运行 `prepare`，首次 `add` 失败后，按 `dsh` 提示把包键复制进该 profile 的 `pnpm-workspace.yaml` 授权：
+>
+> ```yaml
+> allowBuilds:
+>   dsh-focus-overlay: true
+> ```
+>
+> 然后重新执行 `add`。**这项授权意味着允许本包代码在你的机器上于安装时执行**——请只对可信来源授权，并用 commit 锁定（`github:boogoo619/dsh-focus-overlay#<sha>`）。
+
+### 从本地目录 / tarball
+
+```sh
+# 本地目录（开发）
+dsh plugin --profile web add ./dsh-focus-overlay
+
+# tarball（npm pack 产物）
+dsh plugin --profile web add ./dsh-focus-overlay-0.1.0.tgz
+```
+
+安装后重启 `dsh web` 生效。
+
+## 使用
+
+1. 打开任意会话，点击标题栏操作区的 **「专注」** 按钮。
+2. 进入全屏专注视图：顶部只有一条极窄栏（会话标题 + 退出），正文只显示你与 AI 的对话，工具步骤折叠为摘要行。
+3. 右侧的导航圆点可悬停预览、点击跳转；离开底部时右下出现居中的"↓ 回到最新"。
+4. 按 `Esc` 或点「退出专注」返回原界面，原位置/状态保持不变。
+
+## 设置
+
+侧栏「设置 → 专注模式」：
+
+| 选项 | 说明 |
+|---|---|
+| 显示右侧导航条 | 开关导航圆点（默认开） |
+| 打开时保留聊天位置 | 进入专注时定位到当前阅读位置，关闭则定位到最新（默认开） |
+| 文字区宽度 | 480–1200px 滑块，调整阅读列宽（默认 760px） |
+
+## 构建与开发
+
+```sh
+npm install
+npm run build   # 产出 lib/index.mjs（Node half）+ lib/client.js（浏览器 bundle）
+```
+
+构建产物 `lib/` 不入库；npm 发布与 git 安装时由 `prepare` 脚本现场构建。
+
+## 目录结构
+
+```
+src/index.mjs            Node half（空 apply）
+src/client/index.ts      client apply：注入样式、注册 overlay / 按钮 / 设置页
+src/client/FocusView.tsx 核心组件（MarkdownText/MessageText、图片、摘要、导航条）
+src/client/styles.ts     包内样式（仅 --dsw-* token）
+src/client/settings.ts   偏好（localStorage）
+src/client/locales.ts    中/英词典
+cordis.patch.yml         组合层补丁
+tsdown.config.ts         双 half 构建（Node ESM + 浏览器 __ModuleLoader__ CJS）
+```
+
+## License
+
+[MIT](./LICENSE)

package/cordis.patch.yml

@@ -0,0 +1,4 @@
+# dsh-focus-overlay bundle: mount the Node half (empty apply — behaviour is all in the client bundle).
+- insert:
+    - id: dsh-focus-overlay
+      name: 'dsh-focus-overlay'

package/lib/client.js

@@ -0,0 +1,781 @@
+window.__ModuleLoader__.load({
+	id: "dsh-focus-overlay",
+	factory: (require) => {
+		var module = { exports: {} };
+		module.exports;
+		let react = require("react");
+		let _deepseek_ai_dsh_client_ui_primitives = require("@deepseek-ai/dsh-client-ui-primitives");
+		let react_jsx_runtime = require("react/jsx-runtime");
+		//#region src/client/settings.ts
+		const KEY = "dsh-focus-overlay:prefs";
+		const DEFAULTS = {
+			navbar: true,
+			scroll: "preserve",
+			width: 760
+		};
+		function load() {
+			try {
+				const raw = localStorage.getItem(KEY);
+				if (raw) return {
+					...DEFAULTS,
+					...JSON.parse(raw)
+				};
+			} catch {}
+			return { ...DEFAULTS };
+		}
+		let prefs = load();
+		const listeners = [];
+		const prefsStore = {
+			get: () => prefs,
+			set: (next) => {
+				prefs = next;
+				try {
+					localStorage.setItem(KEY, JSON.stringify(next));
+				} catch {}
+				for (const l of listeners) l();
+			},
+			update: (patch) => prefsStore.set({
+				...prefs,
+				...patch
+			}),
+			subscribe: (l) => {
+				listeners.push(l);
+				return () => {
+					const i = listeners.indexOf(l);
+					if (i >= 0) listeners.splice(i, 1);
+				};
+			}
+		};
+		function usePrefs() {
+			const [p, setP] = (0, react.useState)(prefsStore.get);
+			(0, react.useEffect)(() => prefsStore.subscribe(() => setP(prefsStore.get)), []);
+			return p;
+		}
+		//#endregion
+		//#region src/client/FocusView.tsx
+		let focusOn = false;
+		let pendingAnchorKey = null;
+		const focusListeners = [];
+		const focusStore = {
+			get: () => focusOn,
+			set: (v) => {
+				focusOn = !!v;
+				for (const l of focusListeners) l();
+			},
+			subscribe: (l) => {
+				focusListeners.push(l);
+				return () => {
+					const i = focusListeners.indexOf(l);
+					if (i >= 0) focusListeners.splice(i, 1);
+				};
+			},
+			captureChatAnchor: () => {
+				pendingAnchorKey = null;
+				try {
+					const scrollport = document.querySelector("[data-conversation-scroll]");
+					if (!scrollport) return;
+					const vp = scrollport.getBoundingClientRect();
+					const rows = scrollport.querySelectorAll("[data-chat-flow-kind=\"user\"], [data-chat-flow-kind=\"steering\"]");
+					for (const row of rows) if (row.getBoundingClientRect().bottom > vp.top + 8) {
+						pendingAnchorKey = row.dataset.chatAnchorKey || null;
+						return;
+					}
+				} catch {}
+			},
+			consumeAnchorKey: () => {
+				const k = pendingAnchorKey;
+				pendingAnchorKey = null;
+				return k;
+			}
+		};
+		function useFocus() {
+			const [v, setV] = (0, react.useState)(focusStore.get);
+			(0, react.useEffect)(() => focusStore.subscribe(() => setV(focusStore.get)), []);
+			return v;
+		}
+		let bodyEl = null;
+		const anchors = {};
+		function flattenText(content) {
+			if (!content || !content.length) return "";
+			let out = "";
+			for (const b of content) if (b && b.type === "text" && typeof b.text === "string") out += b.text;
+			return out;
+		}
+		const METRIC = {
+			bash: "commands",
+			pwsh: "commands",
+			sh: "commands",
+			cmd: "commands",
+			terminal: "commands",
+			shell: "commands",
+			write: "edits",
+			save: "edits",
+			edit: "edits",
+			replace: "edits",
+			patch: "edits",
+			apply_patch: "edits",
+			str_replace_editor: "edits",
+			web_search: "searches",
+			grep: "searches",
+			search: "searches",
+			read: "files",
+			read_image: "files",
+			glob: "dirs",
+			subagent: "subagents",
+			subagent_fork: "subagents",
+			todo_write: "todos",
+			create_goal: "goals",
+			update_goal: "goals",
+			get_goal: "goals",
+			workflow: "workflows",
+			ralph: "workflows",
+			skill: "skills",
+			ask_user_question: "questions",
+			plan: "plans",
+			job_output: "jobs",
+			job_kill: "jobs",
+			job_list: "jobs"
+		};
+		const METRIC_ORDER = [
+			"context",
+			"commands",
+			"edits",
+			"searches",
+			"files",
+			"dirs",
+			"subagents",
+			"todos",
+			"goals",
+			"workflows",
+			"skills",
+			"questions",
+			"plans",
+			"jobs",
+			"others"
+		];
+		const METRIC_KEY = {
+			context: "sum.context",
+			commands: "sum.commands",
+			edits: "sum.edits",
+			searches: "sum.searches",
+			files: "sum.files",
+			dirs: "sum.dirs",
+			subagents: "sum.subagents",
+			todos: "sum.todos",
+			goals: "sum.goals",
+			workflows: "sum.workflows",
+			skills: "sum.skills",
+			questions: "sum.questions",
+			plans: "sum.plans",
+			jobs: "sum.jobs",
+			others: "sum.others"
+		};
+		function addMetric(metrics, name) {
+			const fam = METRIC[name] || "others";
+			metrics[fam] = (metrics[fam] || 0) + 1;
+		}
+		function summarySegments(t, metrics) {
+			const segs = [];
+			for (const fam of METRIC_ORDER) {
+				const n = metrics[fam];
+				if (!n) continue;
+				const key = METRIC_KEY[fam];
+				segs.push(key === "sum.todos" || key === "sum.goals" ? t(key) : t(key, { n }));
+			}
+			return segs;
+		}
+		function hasAssistantContent(blocks) {
+			for (const b of blocks || []) if (b && (b.kind === "text" || b.kind === "image")) return true;
+			return false;
+		}
+		function buildItems(nodes, runningCalls, t) {
+			const items = [];
+			let metrics = {};
+			const flush = () => {
+				const segs = summarySegments(t, metrics);
+				if (segs.length) items.push({
+					kind: "hidden",
+					text: segs.join("，")
+				});
+				metrics = {};
+			};
+			const accountNode = (n) => {
+				if (n.kind === "tool-result") addMetric(metrics, n.call && n.call.name ? n.call.name : "");
+				else if (n.kind === "context" || n.kind === "compaction") metrics.context = (metrics.context || 0) + 1;
+				else if (n.kind === "command") metrics.commands = (metrics.commands || 0) + 1;
+				else metrics.others = (metrics.others || 0) + 1;
+			};
+			for (const n of nodes) {
+				if (!n) continue;
+				switch (n.kind) {
+					case "user": {
+						const text = flattenText(n.content);
+						if (text.trim() !== "") {
+							flush();
+							items.push({
+								kind: "user",
+								text,
+								seq: n.seq
+							});
+						}
+						break;
+					}
+					case "steering": {
+						const text = flattenText(n.content);
+						if (text.trim() !== "") {
+							flush();
+							items.push({
+								kind: "steering",
+								text,
+								seq: n.seq
+							});
+						}
+						break;
+					}
+					case "assistant":
+						if (hasAssistantContent(n.blocks)) {
+							flush();
+							items.push({
+								kind: "assistant",
+								blocks: n.blocks,
+								seq: n.seq,
+								turn: n.turn,
+								step: n.step
+							});
+						}
+						break;
+					case "turn-error":
+						flush();
+						items.push({
+							kind: "error",
+							text: n.message || "turn-error"
+						});
+						break;
+					case "turn-max-tokens":
+						flush();
+						items.push({
+							kind: "error",
+							text: "turn-max-tokens"
+						});
+						break;
+					default:
+						accountNode(n);
+						break;
+				}
+			}
+			if (runningCalls && runningCalls.length) for (const rc of runningCalls) addMetric(metrics, rc && rc.name ? rc.name : "");
+			flush();
+			return items;
+		}
+		function resolveAnchorSeq(chat, key) {
+			if (!key || !chat || !chat.nodes) return null;
+			try {
+				const node = chat.nodes.get(key);
+				if (!node) return null;
+				const d = node.data || node.node || node;
+				return d && typeof d.seq === "number" ? d.seq : null;
+			} catch {
+				return null;
+			}
+		}
+		function findSeqIndex(items, seq) {
+			for (let i = 0; i < items.length; i++) {
+				const it = items[i];
+				if ((it.kind === "user" || it.kind === "steering") && it.seq === seq) return i;
+			}
+			return -1;
+		}
+		function useSessionSnapshot(sessions, sessionId) {
+			const [snap, setSnap] = (0, react.useState)(() => {
+				if (!sessionId || !sessions) return null;
+				const b = sessions.binding(sessionId);
+				return b ? b.session.getSnapshot() : null;
+			});
+			(0, react.useEffect)(() => {
+				if (!sessionId || !sessions) {
+					setSnap(null);
+					return;
+				}
+				const b = sessions.binding(sessionId);
+				if (!b) {
+					setSnap(null);
+					return;
+				}
+				setSnap(b.session.getSnapshot());
+				return b.session.subscribe(() => setSnap(b.session.getSnapshot()));
+			}, [sessions, sessionId]);
+			return snap;
+		}
+		function SessionImage({ attachment, loadImage }) {
+			const [src, setSrc] = (0, react.useState)(null);
+			(0, react.useEffect)(() => {
+				let alive = true;
+				loadImage(attachment).then((u) => {
+					if (alive) setSrc(u);
+				}).catch(() => {});
+				return () => {
+					alive = false;
+				};
+			}, [attachment, loadImage]);
+			if (!src) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("img", {
+				className: "fm-image",
+				src,
+				alt: ""
+			});
+		}
+		function AssistantItem({ blocks, loadImage, fileMentions }) {
+			const text = (blocks || []).filter((b) => b && b.kind === "text").map((b) => b.text).join("");
+			const images = (blocks || []).filter((b) => b && b.kind === "image");
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "fm-msg fm-assistant",
+				children: [text ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.MarkdownText, {
+					text,
+					fileMentions
+				}) : null, images.map((b, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SessionImage, {
+					attachment: b.attachment,
+					loadImage
+				}, i))]
+			});
+		}
+		function FocusContent(props) {
+			const { useSessions, sessions, workspaces, conversation, chatFileMentions, t } = props;
+			const prefs = usePrefs();
+			const listState = useSessions((s) => s);
+			const currentId = listState ? listState.current : void 0;
+			const snap = useSessionSnapshot(sessions, currentId);
+			const items = (0, react.useMemo)(() => snap ? buildItems(snap.nodes || [], snap.runningCalls, t) : [], [snap, t]);
+			const navKeys = [];
+			const navPreviews = {};
+			for (let i = 0; i < items.length; i++) {
+				const it = items[i];
+				if (it.kind === "user" || it.kind === "steering") {
+					const k = "fm-" + i;
+					navKeys.push(k);
+					navPreviews[k] = it.text.replace(/\s+/g, " ").trim().slice(0, 80);
+				}
+			}
+			const [activeKey, setActiveKey] = (0, react.useState)(navKeys.length ? navKeys[navKeys.length - 1] : null);
+			const [atBottom, setAtBottom] = (0, react.useState)(true);
+			const rafId = (0, react.useRef)(null);
+			const computeActive = () => {
+				if (!bodyEl) return null;
+				let cur = null;
+				for (const k of navKeys) {
+					const el = anchors[k];
+					if (!el) continue;
+					if (el.getBoundingClientRect().top - bodyEl.getBoundingClientRect().top <= 96) cur = k;
+					else break;
+				}
+				return cur;
+			};
+			const isNearBottom = () => {
+				if (!bodyEl) return true;
+				return bodyEl.scrollHeight - bodyEl.scrollTop - bodyEl.clientHeight < 48;
+			};
+			const handleScroll = () => {
+				if (rafId.current !== null) return;
+				rafId.current = requestAnimationFrame(() => {
+					rafId.current = null;
+					setActiveKey(computeActive());
+					setAtBottom(isNearBottom());
+				});
+			};
+			const scrollToKey = (key, smooth) => {
+				const el = anchors[key];
+				if (!el || !bodyEl) return;
+				const top = el.getBoundingClientRect().top - bodyEl.getBoundingClientRect().top + bodyEl.scrollTop;
+				bodyEl.scrollTo({
+					top: top - 16,
+					behavior: smooth ? "smooth" : "auto"
+				});
+			};
+			const scrollToBottom = () => {
+				if (bodyEl) bodyEl.scrollTo({
+					top: bodyEl.scrollHeight,
+					behavior: "smooth"
+				});
+			};
+			(0, react.useEffect)(() => {
+				const anchorKey = focusStore.consumeAnchorKey();
+				const seq = resolveAnchorSeq(snap && snap.chat, anchorKey);
+				const idx = seq != null ? findSeqIndex(items, seq) : -1;
+				if (prefs.scroll === "preserve" && idx >= 0) {
+					scrollToKey("fm-" + idx, false);
+					setActiveKey("fm-" + idx);
+				} else if (bodyEl) {
+					bodyEl.scrollTo({
+						top: bodyEl.scrollHeight,
+						behavior: "auto"
+					});
+					setActiveKey(navKeys.length ? navKeys[navKeys.length - 1] : null);
+				}
+			}, []);
+			const loadImage = (0, react.useCallback)((attachment) => {
+				if (!conversation || !currentId) return Promise.reject(/* @__PURE__ */ new Error("dsh-focus-overlay: conversation service unavailable"));
+				return conversation.resolveImage(currentId, attachment);
+			}, [conversation, currentId]);
+			const fileMentionsFor = (0, react.useCallback)((node) => {
+				if (!chatFileMentions) return void 0;
+				try {
+					return chatFileMentions.forClosing({
+						turn: {
+							turn: node.turn,
+							step: node.step
+						},
+						seq: node.seq,
+						openFile: (path) => {
+							if (workspaces) workspaces.openPath(path).catch(() => {});
+						}
+					});
+				} catch {
+					return;
+				}
+			}, [chatFileMentions, workspaces]);
+			let title = "Focus Mode";
+			if (currentId && listState && listState.byId && listState.byId[currentId]) {
+				const row = listState.byId[currentId];
+				if (row && row.displayTitle) title = row.displayTitle;
+			}
+			let body;
+			if (!currentId) body = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "fm-empty",
+				children: t("empty")
+			});
+			else if (snap === null) body = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "fm-empty",
+				children: t("loading")
+			});
+			else {
+				const partial = snap.partial;
+				const partialBlocks = partial ? partial.blocks : [];
+				const running = !!snap.running;
+				const kids = [];
+				for (let i = 0; i < items.length; i++) {
+					const it = items[i];
+					const key = "fm-" + i;
+					if (it.kind === "user") kids.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "fm-msg fm-user-msg",
+						ref: (el) => {
+							if (el) anchors[key] = el;
+							else delete anchors[key];
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "fm-user",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.MessageText, { text: it.text })
+						})
+					}, key));
+					else if (it.kind === "steering") kids.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "fm-msg fm-user-msg",
+						ref: (el) => {
+							if (el) anchors[key] = el;
+							else delete anchors[key];
+						},
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "fm-user fm-steering",
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.MessageText, { text: it.text })
+						})
+					}, key));
+					else if (it.kind === "assistant") kids.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AssistantItem, {
+						blocks: it.blocks,
+						loadImage,
+						fileMentions: fileMentionsFor(it)
+					}, key));
+					else if (it.kind === "hidden") kids.push(/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "fm-hidden",
+						children: [
+							"· ",
+							it.text,
+							" ·"
+						]
+					}, key));
+					else if (it.kind === "error") kids.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "fm-msg fm-error",
+						children: it.text
+					}, key));
+				}
+				if (partialBlocks.length) kids.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(AssistantItem, {
+					blocks: partialBlocks,
+					loadImage,
+					fileMentions: void 0
+				}, "fm-partial"));
+				if (running) kids.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "fm-running",
+					children: t("running")
+				}, "fm-running"));
+				body = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "fm-inner",
+					style: { maxWidth: prefs.width },
+					children: kids
+				});
+			}
+			const nav = prefs.navbar && navKeys.length >= 2 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "fm-nav",
+				children: navKeys.map((k) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					"aria-label": navPreviews[k],
+					className: "fm-nav-dot" + (activeKey === k ? " fm-nav-dot-active" : ""),
+					onClick: () => scrollToKey(k, true),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "fm-nav-tip",
+						children: navPreviews[k]
+					})
+				}, k))
+			}) : null;
+			const toBottom = !atBottom ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "fm-tobottom-wrap",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+					variant: "outline",
+					size: "sm",
+					className: "fm-tobottom",
+					title: t("backToLatest"),
+					onClick: scrollToBottom,
+					children: "↓"
+				})
+			}) : null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "fm-overlay",
+				tabIndex: -1,
+				autoFocus: true,
+				onKeyDown: (e) => {
+					if (e && e.key === "Escape") focusStore.set(false);
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: "fm-topbar",
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+							className: "fm-title",
+							children: title
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+							variant: "outline",
+							size: "sm",
+							onClick: () => focusStore.set(false),
+							children: t("exit")
+						})]
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: "fm-body",
+						ref: (el) => {
+							bodyEl = el;
+						},
+						onScroll: handleScroll,
+						children: body
+					}),
+					nav,
+					toBottom
+				]
+			});
+		}
+		function FocusOverlay(props) {
+			if (!useFocus()) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FocusContent, { ...props });
+		}
+		function FocusToggle({ t }) {
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_deepseek_ai_dsh_client_ui_primitives.Button, {
+				variant: "ghost",
+				size: "sm",
+				title: t("toggle.title"),
+				onClick: () => {
+					focusStore.captureChatAnchor();
+					focusStore.set(true);
+				},
+				children: t("toggle")
+			});
+		}
+		function FocusSettings({ 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)("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"] })
+						]
+					})
+				]
+			});
+		}
+		//#endregion
+		//#region src/client/styles.ts
+		/** Package-owned stylesheet text (injected by the client apply, cleaned up on unload). */
+		const FOCUS_CSS = `
+.fm-overlay{position:fixed;inset:0;z-index:2147483000;background:var(--dsw-alias-bg-base,#fff);color:var(--dsw-alias-label-primary,#1a1a1a);display:flex;flex-direction:column;pointer-events:auto;font-family:var(--dsw-font-family,sans-serif);outline:none}
+.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:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.fm-body{flex:1 1 auto;overflow-y:auto;padding:28px 28px 64px}
+.fm-inner{max-width:760px;margin:0 auto}
+.fm-msg{margin:0 0 24px}
+.fm-user-msg{margin-bottom:44px}
+.fm-user{background:var(--dsw-specific-bubble,#eaf2ff);color:var(--dsw-alias-label-primary,#1a1a1a);border-radius:14px;padding:10px 14px;word-break:break-word;max-width:85%;margin-left:auto}
+.fm-steering{opacity:.85}
+.fm-assistant{word-break:break-word}
+.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}
+.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:flex;flex-direction:column;align-items:center;gap:5px;z-index:2;pointer-events:auto}
+.fm-nav-dot{position:relative;cursor:pointer;background:var(--dsw-alias-label-secondary,#999);border:0;border-radius:999px;width:8px;height:8px;padding:0;transition:background .15s,height .15s}
+.fm-nav-dot:hover{background:var(--dsw-alias-brand-primary,#4c6ef5)}
+.fm-nav-dot-active{background:var(--dsw-alias-brand-primary,#4c6ef5);height:22px;width:8px}
+.fm-nav-tip{position:absolute;right:18px;top:50%;transform:translateY(-50%);display:none;width:260px;box-sizing:border-box;white-space:normal;overflow-wrap:break-word;word-break:break-word;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:8px;padding:8px 10px;font-size:12px;line-height:1.5;box-shadow:0 4px 16px rgba(0,0,0,.12);pointer-events:none;text-align:left}
+.fm-nav-dot:hover .fm-nav-tip{display:block}
+.fm-tobottom-wrap{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;z-index:2;pointer-events:none}
+.fm-tobottom{pointer-events:auto;border-radius:100px;min-width:34px;height:34px;padding:0 10px}
+.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}
+`;
+		//#endregion
+		//#region src/client/locales.ts
+		/** i18n dictionaries for the `focus` namespace. */
+		const zh = {
+			"toggle": "专注",
+			"toggle.title": "进入专注模式",
+			"exit": "退出专注 (Esc)",
+			"backToLatest": "回到最新",
+			"settings.label": "专注模式",
+			"settings.navbar": "显示右侧导航条",
+			"settings.scrollPreserve": "打开时保留聊天位置",
+			"settings.width": "文字区宽度",
+			"empty": "暂无打开的会话",
+			"loading": "正在读取会话…",
+			"running": "· 正在工作 …",
+			"sum.context": "载入了 {n} 项上下文",
+			"sum.commands": "运行了 {n} 个命令",
+			"sum.edits": "编辑了 {n} 个文件",
+			"sum.searches": "搜索了 {n} 个正则",
+			"sum.files": "读取了 {n} 个文件",
+			"sum.dirs": "列出了 {n} 个目录",
+			"sum.subagents": "fork 了 {n} 个子代理",
+			"sum.todos": "更新了待办",
+			"sum.goals": "更新了目标",
+			"sum.workflows": "运行了 {n} 个工作流",
+			"sum.skills": "载入了 {n} 个技能",
+			"sum.questions": "问了 {n} 个问题",
+			"sum.plans": "计划了 {n} 次",
+			"sum.jobs": "后台任务 {n} 个",
+			"sum.others": "调用了 {n} 个工具"
+		};
+		const en = {
+			"toggle": "Focus",
+			"toggle.title": "Enter focus mode",
+			"exit": "Exit focus (Esc)",
+			"backToLatest": "Back to latest",
+			"settings.label": "Focus Mode",
+			"settings.navbar": "Show right-side navbar",
+			"settings.scrollPreserve": "Preserve chat position on open",
+			"settings.width": "Text width",
+			"empty": "No open session",
+			"loading": "Reading session…",
+			"running": "· Working …",
+			"sum.context": "loaded {n} context items",
+			"sum.commands": "ran {n} commands",
+			"sum.edits": "edited {n} files",
+			"sum.searches": "ran {n} searches",
+			"sum.files": "read {n} files",
+			"sum.dirs": "listed {n} directories",
+			"sum.subagents": "forked {n} subagents",
+			"sum.todos": "updated todos",
+			"sum.goals": "updated goals",
+			"sum.workflows": "ran {n} workflows",
+			"sum.skills": "loaded {n} skills",
+			"sum.questions": "asked {n} questions",
+			"sum.plans": "planned {n} times",
+			"sum.jobs": "{n} background jobs",
+			"sum.others": "called {n} tools"
+		};
+		//#endregion
+		//#region src/client/index.ts
+		/**
+		* 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
+		* `@deepseek-ai/dsh-client-ui-primitives` Markdown/MessageText/Tooltip/Button
+		* components and the conversation service's image resolver.
+		*/
+		const NS = "focus";
+		//#endregion
+		module.exports = {
+			name: "dsh-focus-overlay-client",
+			inject: [
+				"slots",
+				"sessions",
+				"locale",
+				"workspaces"
+			],
+			apply(ctx) {
+				const style = document.createElement("style");
+				style.setAttribute("data-plugin", "dsh-focus-overlay");
+				style.textContent = FOCUS_CSS;
+				ctx.effect(() => {
+					document.head.appendChild(style);
+					return () => {
+						style.remove();
+					};
+				});
+				ctx.effect(() => ctx.locale.register(NS, {
+					zh,
+					en
+				}));
+				const t = ctx.locale.bind(NS);
+				const sessions = ctx.sessions;
+				const workspaces = ctx.workspaces;
+				const conversation = ctx.get("conversation");
+				const chatFileMentions = ctx.get("chatFileMentions");
+				ctx.slots.inject("shell.overlay", () => ctx.slots.register({
+					name: "shell.overlay",
+					id: "focus-mode-overlay",
+					order: 1e3
+				}, (props) => (0, react.createElement)(FocusOverlay, {
+					...props,
+					sessions,
+					workspaces,
+					conversation,
+					chatFileMentions,
+					t
+				})));
+				ctx.slots.inject("conversation.session.header.actions", () => ctx.slots.register({
+					name: "conversation.session.header.actions",
+					id: "focus-mode-toggle",
+					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,
+					label: () => t("settings.label")
+				}, () => (0, react.createElement)(FocusSettings, { t })));
+			}
+		};
+		return module.exports;
+	}
+});

package/lib/index.mjs

@@ -0,0 +1,4 @@
+//#region src/index.mjs
+function apply() {}
+//#endregion
+export { apply as default };

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "dsh-focus-overlay",
+  "version": "0.1.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",
+  "files": [
+    "lib",
+    "cordis.patch.yml"
+  ],
+  "exports": {
+    ".": {
+      "default": "./lib/index.mjs"
+    },
+    "./client": "./lib/client.js",
+    "./cordis.patch.yml": "./cordis.patch.yml",
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-primitives"
+      ],
+      "platform": "web"
+    }
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1"
+  },
+  "engines": {
+    "node": ">=22.19.0",
+    "dsh": ">=0.1.0-rc.5"
+  },
+  "scripts": {
+    "build": "tsdown --config ./tsdown.config.ts",
+    "prepare": "npm run build"
+  },
+  "keywords": [
+    "dsh",
+    "deepseek-harness",
+    "plugin",
+    "focus-mode",
+    "bundle"
+  ],
+  "devDependencies": {
+    "tsdown": "0.22.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/boogoo619/dsh-focus-overlay.git"
+  },
+  "license": "MIT"
+}