dsh-mindmap 0.2.0 → 0.4.1

package/CHANGELOG.md

@@ -2,10 +2,17 @@
 
 All notable changes to this project are documented here. Release-specific notes are also published on GitHub Releases.
 
-## [Unreleased]
+## [0.4.0] - 2026-08-24
+
+### Changed
+
+- The browser client is now maintained as focused source fragments under `src/client/` and assembled into the single runtime `client.js` entry by `npm run build:client`.
+- AI create/open/view intent now restores and switches the target mindmap panel smoothly, including repeated opens and open-then-update tool sequences.
+- Added release metadata, a `prepack` verification hook, and an npm package dry-run check to the documented development flow.
 
 ### Added
 
+- Centered mindmap canvas with a floating zoom bar at the canvas top-right (zoom out / percent / zoom in / fit): the tree opens centered in the panel (scrollable, no edge clipping when larger), auto fit-to-view on open (no enlargement beyond 100%, 25% floor for giant trees), 25%–300% step zoom with a stable viewport-center anchor, and smart re-fit on AI edits or panel resize until the user zooms manually. Connector lines use `vector-effect: non-scaling-stroke` so they stay crisp at any zoom level, and natural-size debouncing keeps "fit" from oscillating with scrollbar appearance. Clicking any node focuses it: the node scrolls to the left-center of the canvas and the view zooms until the node and its whole subtree are visible (capped at 100%). Zoom math is exposed as pure functions (`clampZoom` / `stepZoom` / `fitZoom` / `focusZoom`) with unit tests.
 - Settings page section「思维脑图」in the left nav (`settings.section`), backed by a host settings namespace (`mindmap`): node theme (line style curve/elbow, card corners rounded/square, three color themes ocean/sunset/forest), default panel width (20-80%). The `requireApproval` switch stays functional (read at tool pre-execute time) but is hidden from the UI by design. Introduces a `@deepseek-ai/schemastery` dependency for the settings schema.
 
 ## [0.1.0] - 2026-08-23

package/README.md

@@ -4,7 +4,7 @@
 
 A DeepSeek Harness plugin that turns a plain Markdown file into a live mindmap. The working directory is the document: the chat is the editor, the AI edits the `.md` step by step, and the right-side floating panel re-renders the mindmap in real time.
 
-> Project status: pre-1.0. The 0.1.0 feature set (see [CHANGELOG](./CHANGELOG.md)) is implemented and covered by unit tests, but cross-version compatibility beyond the development environment is not yet certified.
+> Project status: pre-1.0. The current feature set (see [CHANGELOG](./CHANGELOG.md)) is implemented and covered by unit tests, but cross-version compatibility beyond the development environment is not yet certified.
 
 ## The core idea
 
@@ -17,11 +17,12 @@ A DeepSeek Harness plugin that turns a plain Markdown file into a live mindmap.
 
 - **Four tools** (`mindmap_create` / `mindmap_open` / `mindmap_get` / `mindmap_update`) — plain Markdown files in the session working directory; the root node title is the filename and stays in sync both ways (`renameRoot` renames the file, collisions are rejected).
 - **Live panel with zero extra channels** — the panel consumes the session snapshot (`mindmap_*` tool results), so every AI edit re-renders immediately.
-- **Floating right panel** — toggled by the 思维脑图 button in the session header; opens on AI `mindmap_open`/`create` too. Opening the panel pushes the chat to the left (layout-push, the chat is never covered); width is drag-resizable (280px ~ 80% viewport) and persisted.
+- **Floating right panel** — toggled by the 思维脑图 button in the session header; AI create/open/view intents also expand it and switch to the target document, including when the panel is currently closed or the same document is opened again. Opening the panel pushes the chat to the left (layout-push, the chat is never covered); width is drag-resizable (280px ~ 80% viewport) and persisted.
 - **Directory tree tab** — a persistent tree of the session working directory (served by a plugin-owned read-only route), lazy-loaded per directory; right-click to create a mindmap (at the root or inside a directory); left-click a `.md` to open it instantly and hand it to the AI for editing.
 - **Single-mindmap mode** — two tabs only: 目录 (tree) and 脑图 (the current mindmap); opening another `.md` replaces the previous one.
 - **"What you see is what the AI edits"** — when the visible mindmap differs from the AI's working document, the panel automatically asks the AI to open it, keeping the chat focus in sync.
 - **MarkGrove-style mapping** — heading hierarchy, nested lists (empty items become placeholder nodes), code blocks as leaf nodes, paragraphs as node notes, stable structural IDs, and orthogonal connector lines between nodes.
+- **Centered canvas with zoom** — the mindmap opens centered in the canvas (scrollable without edge clipping when larger); a floating zoom bar at the canvas top-right (zoom out / percent / zoom in / fit) applies auto fit-to-view on open (small maps stay at 100%), steps through 25%–300% with a stable view center, and keeps re-fitting as the AI edits — until you zoom manually. Click any node to zoom in on it and its whole subtree, with the node pinned at the left-center of the canvas.
 - **PNG export** — one click on 导出图片 exports the current mindmap.
 - **Safety** — `mindmap_update` is approval-free by default (files are git-managed) with a `requireApproval` switch as an escape hatch; the client has **no write path** to the filesystem — every edit goes through the AI tools.
 
@@ -58,9 +59,13 @@ dsh plugin --profile <profile> add <pkg>#v<version>
 ## Development
 
 ```bash
-npm run verify   # syntax check + node --test
+npm run build:client  # assemble the runtime client.js from src/client fragments
+npm run verify        # rebuild + syntax check + node --test
+npm pack --dry-run    # inspect the files that will enter the npm package
 ```
 
+The browser implementation is maintained under `src/client/` and assembled into the single `client.js` entry required by DeepSeek Harness. Edit the source fragments, then run `npm run build:client`; do not hand-edit the generated entry.
+
 ## License
 
 Not yet chosen — contact the author before redistributing.

package/README.zh-CN.md

@@ -4,7 +4,7 @@
 
 一个 DeepSeek Harness 插件：把工作目录里的普通 Markdown 文件变成一颗**实时脑图**。聊天框是编辑它的助手——你聊一句、AI 改一步 `.md`、右侧悬浮面板实时跟着变。
 
-> 项目状态：pre-1.0。0.1.0 功能集（见 [CHANGELOG](./CHANGELOG.md)）已实现并有单元测试覆盖，但开发环境之外的跨版本兼容性尚未认证。
+> 项目状态：pre-1.0。当前功能集（见 [CHANGELOG](./CHANGELOG.md)）已实现并有单元测试覆盖，但开发环境之外的跨版本兼容性尚未认证。
 
 ## 核心思想
 
@@ -17,11 +17,12 @@
 
 - **四个工具**（`mindmap_create` / `mindmap_open` / `mindmap_get` / `mindmap_update`）——会话工作目录里的普通 `.md` 文件；根节点标题 = 文件名，双向同步（`renameRoot` 触发文件重命名，撞名报错不覆盖）。
 - **零通道实时面板**——面板直接消费会话快照里的 `mindmap_*` 工具结果，AI 每改一步面板即渲染一次。
-- **右侧悬浮面板**——会话头部「思维脑图」按钮开合；AI 打开/创建脑图时也会自动展开。打开时**聊天区向左让位**（布局推挤，互不遮挡）；宽度可拖（280px ~ 80% 视口）并持久化。
+- **右侧悬浮面板**——会话头部「思维脑图」按钮开合；AI 创建、打开或查看脑图时会自动展开并切换到目标文档，即使面板当前收起或重复打开同一文档也能接续跟随。打开时**聊天区向左让位**（布局推挤，互不遮挡）；宽度可拖（280px ~ 80% 视口）并持久化。
 - **常驻目录树 tab**——工作目录结构懒加载树（插件自建只读路由）；空白处/目录右键新建脑图；左键点 `.md` 秒开 tab 并自动交给 AI 打开，随后直接对话继续编辑。
 - **单脑图模式**——面板只有「目录」和「脑图」两个 tab，打开新脑图替换旧的那颗。
 - **「所见即所编」焦点同步**——可见脑图与 AI 工作文档不一致时，面板自动让 AI 打开它，聊天焦点始终跟随你的眼睛。
 - **MarkGrove 同款映射与连线**——标题层级挂树、列表缩进（空项 = 占位节点）、代码块叶节点、段落挂节点说明、稳定结构 ID、节点间直角折线。
+- **画布居中与缩放**——脑图打开后居中呈现（超出画布时可滚动、无边缘裁剪）；画布右上角浮动缩放条（缩小 / 比例 / 放大 / 适配），打开时自动适配合适比例（小图保持 100%），25%–300% 逐级缩放且视图中心不跳变，AI 编辑后持续自动再适配，直到你手动缩放。点击任意节点即可聚焦：节点滚到画布左侧居中，视图放大到它和整棵子树完整可见（上限 100%）。
 - **PNG 导出**——面板右上角「导出图片」一键导出当前脑图。
 - **安全**——`mindmap_update` 默认免原生审批（文件受 git 管控），留 `requireApproval` 开关作后悔药；客户端**没有任何写文件通道**，一切编辑都经 AI 工具。
 
@@ -58,9 +59,13 @@ dsh plugin --profile <profile> add <pkg>#v<version>
 ## 开发
 
 ```bash
-npm run verify   # 语法检查 + node --test
+npm run build:client  # 从 src/client 片段组装运行时 client.js
+npm run verify        # 重建 + 语法检查 + node --test
+npm pack --dry-run    # 检查将进入 npm 包的文件
 ```
 
+浏览器端实现维护在 `src/client/` 下，构建后仍输出 DeepSeek Harness 要求的单一 `client.js` 入口。请修改源码片段后运行 `npm run build:client`，不要直接手改生成入口。
+
 ## License
 
 尚未确定——再分发前请先联系作者。

package/client.js

@@ -281,41 +281,97 @@ window.__ModuleLoader__.load({
 		/**
 		 * 重放会话快照里的 mindmap_* 工具结果，得到每个脑图文档的最新状态。
 		 * nodes: ConversationSnapshot.nodes（ToolResultNode 含 call.name 与渲染后的
-		 * content 文本块——host 的工具结果 JSON 就写在其中）。
-		 * 返回 { order: path[], byPath: { path → {path, rootTitle, content, op, callId} } }。
+		 * content 文本块——host 的工具结果 JSON 就写在其中）。Code 等工具的结果
+		 * 还可能把真实的 mindmap ToolResultNode 放在 subCalls 中，因此这里按事件
+		 * 顺序递归重放整棵调用树。
+		 * 返回文档集及最近一次 create/open 意图，用于驱动面板自动切换目标。
 		 */
 		function reduceDocuments(nodes) {
 			const byPath = Object.create(null);
 			let order = [];
-			for (const node of nodes ?? []) {
-				if (!node || node.kind !== "tool-result" || node.isError) continue;
-				const name = node.call?.name;
-				if (typeof name !== "string" || !TOOL_NAMES.has(name)) continue;
-				let parsed;
-				try {
-					parsed = JSON.parse(resultTextOfBlocks(node.content));
-				} catch {
-					continue;
+			let latestOpeningPath = null;
+			let latestOpeningEventKey = null;
+			const visited = new WeakSet();
+			const MAX_SUBCALL_DEPTH = 100;
+
+			function replayNode(node, eventPath, depth) {
+				if (!node || typeof node !== "object" || visited.has(node)) return;
+				visited.add(node);
+
+				if (node.kind === "tool-result" && !node.isError) {
+					const name = node.call?.name;
+					if (typeof name === "string" && TOOL_NAMES.has(name)) {
+						let parsed;
+						try {
+							parsed = JSON.parse(resultTextOfBlocks(node.content));
+						} catch {
+							parsed = null;
+						}
+						if (parsed && parsed.ok === true && typeof parsed.path === "string" && parsed.path) {
+							const op = typeof parsed.op === "string" ? parsed.op : name;
+							// callId 是实际调用的事件身份；eventPath 是无 callId 时按会话
+							// 遍历顺序生成的稳定兜底，避免重复 open 被合并成一个事件。
+							const callId = node.callId != null && String(node.callId)
+								? node.callId
+								: node.call?.callId;
+							const eventKey = callId != null && String(callId)
+								? `call:${String(callId)}`
+								: `node:${eventPath}`;
+							const renamedFrom = typeof parsed.renamedFrom === "string" ? parsed.renamedFrom : null;
+							const previous = byPath[parsed.path];
+							const renamedDocument = renamedFrom && renamedFrom !== parsed.path
+								? byPath[renamedFrom]
+								: null;
+							const inheritedOpeningEventKey = renamedDocument?.openingEventKey
+								?? previous?.openingEventKey
+								?? (renamedFrom && latestOpeningPath === renamedFrom ? latestOpeningEventKey : null);
+
+							// 根节点改名会删除旧路径键；若旧路径正是最近一次打开意图，
+							// 同时迁移路径并保留原 openingEventKey，确保自动切换仍生效。
+							if (renamedFrom && renamedFrom !== parsed.path && latestOpeningPath === renamedFrom) {
+								latestOpeningPath = parsed.path;
+								if (latestOpeningEventKey == null) latestOpeningEventKey = inheritedOpeningEventKey;
+							}
+
+							const openingEventKey = OPENING_OPS.has(op)
+								? eventKey
+								: inheritedOpeningEventKey;
+							if (OPENING_OPS.has(op)) {
+								latestOpeningPath = parsed.path;
+								latestOpeningEventKey = eventKey;
+							}
+							if (renamedFrom && renamedDocument && renamedFrom !== parsed.path) {
+								delete byPath[renamedFrom];
+								order = order.filter((p) => p !== renamedFrom);
+							}
+							if (!byPath[parsed.path]) order.push(parsed.path);
+							byPath[parsed.path] = {
+								path: parsed.path,
+								rootTitle: typeof parsed.rootTitle === "string" && parsed.rootTitle ? parsed.rootTitle : stemOf(parsed.path),
+								content: typeof parsed.content === "string" ? parsed.content : "",
+								op,
+								callId,
+								eventKey,
+								openingEventKey,
+								// 013：rename 迁移后保留旧路径，供本地直读 tab 清理（mergeDocuments）。
+								renamedFrom,
+							};
+						}
+					}
 				}
-				if (!parsed || parsed.ok !== true || typeof parsed.path !== "string" || !parsed.path) continue;
-				// 根标题改名 = 文件重命名：旧路径键迁移到新路径。
-				const renamedFrom = typeof parsed.renamedFrom === "string" ? parsed.renamedFrom : null;
-				if (renamedFrom && byPath[renamedFrom] && renamedFrom !== parsed.path) {
-					delete byPath[renamedFrom];
-					order = order.filter((p) => p !== renamedFrom);
+
+				// 父级非 mindmap 工具不参与文档解析，但其 subCalls 仍是会话事件，
+				// 必须继续深入；深度上限与 WeakSet 一起防止异常结构卡死。
+				if (depth >= MAX_SUBCALL_DEPTH || !Array.isArray(node.subCalls)) return;
+				for (const [subCallIndex, subCall] of node.subCalls.entries()) {
+					replayNode(subCall, `${eventPath}.${subCallIndex}`, depth + 1);
 				}
-				if (!byPath[parsed.path]) order.push(parsed.path);
-				byPath[parsed.path] = {
-					path: parsed.path,
-					rootTitle: typeof parsed.rootTitle === "string" && parsed.rootTitle ? parsed.rootTitle : stemOf(parsed.path),
-					content: typeof parsed.content === "string" ? parsed.content : "",
-					op: typeof parsed.op === "string" ? parsed.op : name,
-					callId: node.callId,
-					// 013：rename 迁移后保留旧路径，供本地直读 tab 清理（mergeDocuments）。
-					renamedFrom: typeof parsed.renamedFrom === "string" ? parsed.renamedFrom : null,
-				};
 			}
-			return { order, byPath };
+
+			for (const [nodeIndex, node] of (Array.isArray(nodes) ? nodes : []).entries()) {
+				replayNode(node, String(nodeIndex), 0);
+			}
+			return { order, byPath, latestOpeningPath, latestOpeningEventKey };
 		}
 
 		/**
@@ -337,7 +393,36 @@ window.__ModuleLoader__.load({
 			for (const p of Object.keys(localDocs)) {
 				if (!snapshot.byPath[p] && !dropped.has(p)) order.push(p);
 			}
-			return { order, byPath };
+			return {
+				order,
+				byPath,
+				latestOpeningPath: snapshot.latestOpeningPath ?? null,
+				latestOpeningEventKey: snapshot.latestOpeningEventKey ?? null,
+			};
+		}
+
+		/**
+		 * 找到本次快照需要自动展示的脑图路径。
+		 * seenKeys 为 null 表示首次挂载：恢复历史会话最近一次 create/open；
+		 * 否则只响应尚未消费的打开事件。
+		 */
+		function autoOpenTarget(snapshot, seenKeys) {
+			if (!snapshot || !snapshot.latestOpeningPath || !snapshot.byPath?.[snapshot.latestOpeningPath]) return null;
+			if (seenKeys === null) return snapshot.latestOpeningPath;
+			const latest = snapshot.byPath[snapshot.latestOpeningPath];
+			if (latest.openingEventKey && !seenKeys.has(latest.openingEventKey)) return snapshot.latestOpeningPath;
+			let target = null;
+			for (const p of snapshot.order ?? []) {
+				const doc = snapshot.byPath[p];
+				if (doc?.openingEventKey && !seenKeys.has(doc.openingEventKey)) target = p;
+			}
+			return target;
+		}
+
+		function openingEventKeys(snapshot) {
+			return new Set((snapshot?.order ?? [])
+				.map((p) => snapshot.byPath[p]?.openingEventKey)
+				.filter((key) => key != null));
 		}
 		//#endregion
 
@@ -552,12 +637,30 @@ window.__ModuleLoader__.load({
 			childrenColumn: { display: "flex", flexDirection: "column", gap: "8px", marginLeft: "40px", minWidth: 0 },
 			// 面板树连线层：正交折线（MarkGrove 的 orthogonalPath 风格），
 			// 覆盖整行、点击穿透、置于节点盒之下。
-			edgeLayer: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", pointerEvents: "none", overflow: "visible" },
+			// 016：去掉 CSS width/height 百分比——在 auto-height 的 flex 行内，
+			// 百分比高度解析为 auto 会让 SVG 坐标系塌缩，连线与节点像素错位。
+			// 改为由 TreeRow 在 measure 里同步记下实际像素，作 SVG 属性直传。
+			edgeLayer: { position: "absolute", top: 0, left: 0, display: "block", pointerEvents: "none", overflow: "visible" },
 			box: { padding: "6px 12px", borderRadius: "10px", border: "1px solid var(--dsw-alias-border-l2)", background: "var(--dsw-alias-bg-layer-3)", maxWidth: "240px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: "0 0 auto", boxShadow: "0 1px 2px rgba(16,24,40,0.04)" },
 			rootBox: { fontWeight: 700, fontSize: "14px", border: "1px solid var(--dsw-alias-border-l2-darkmode-thin, #b9c0cc)", background: "var(--dsw-alias-bg-module-platform, #eef2ff)" },
 			headingBox: { fontWeight: 600 },
 			placeholderBox: { padding: "6px 12px", borderRadius: "10px", border: "1px dashed var(--dsw-alias-border-l2)", color: "var(--dsw-alias-label-tertiary)", background: "none" },
 			codeBox: { fontFamily: "Menlo, monospace", fontSize: "12px" },
+			// 016 脑图画布：滚动区 + 居中层 + 右上角浮动缩放控制条。
+			canvasWrap: { flex: "1 1 auto", minHeight: 0, minWidth: 0, position: "relative", display: "flex", flexDirection: "column" },
+			canvasScroll: { flex: "1 1 auto", minHeight: 0, minWidth: 0, overflow: "auto" },
+			// 居中层：内容小则铺满视口（100%），大则撑到内容尺寸（max-content）；
+			// 子项用 margin:auto——空间充足双向居中，溢出时 margin 归零、从滚动
+			// 原点排布（flexbox 溢出居中裁剪的标准解法，无左/上侧裁剪）。
+			canvasCenter: { display: "flex", width: "100%", height: "100%", minWidth: "max-content", minHeight: "max-content", boxSizing: "border-box", padding: "16px" },
+			// 缩放控制条：绝对定位于 canvasWrap（滚动区外，不随内容滚动）。
+			zoomBar: { position: "absolute", top: "10px", right: "12px", zIndex: 5, display: "inline-flex", alignItems: "center", gap: "2px", padding: "3px", borderRadius: "8px", background: "var(--dsw-alias-bg-layer-3)", border: "1px solid var(--dsw-alias-border-l2)", boxShadow: "var(--dsw-shadow-lv2)" },
+			zoomBtn: { border: "none", background: "none", cursor: "pointer", font: "inherit", fontSize: "13px", lineHeight: "20px", height: "22px", minWidth: "22px", padding: "0 4px", borderRadius: "6px", color: "var(--dsw-alias-label-secondary)", display: "inline-flex", alignItems: "center", justifyContent: "center", flex: "none" },
+			zoomBtnHover: { background: "var(--dsw-alias-interactive-bg-hover)", color: "var(--dsw-alias-label-primary)" },
+			zoomBtnDisabled: { opacity: 0.4, cursor: "default" },
+			// 百分比标签：tabular-nums 防数字抖动。
+			zoomLabel: { flex: "none", minWidth: "38px", textAlign: "center", fontSize: "11px", lineHeight: "20px", color: "var(--dsw-alias-label-secondary)", fontVariantNumeric: "tabular-nums", userSelect: "none" },
+			zoomFitBtn: { border: "none", background: "none", cursor: "pointer", font: "inherit", fontSize: "12px", lineHeight: "20px", height: "22px", padding: "0 8px", borderRadius: "6px", color: "var(--dsw-alias-label-secondary)", flex: "none" },
 		};
 
 		/** 015 分段选择控件（线型/卡片风格）。 */
@@ -788,8 +891,15 @@ window.__ModuleLoader__.load({
 			const rowRef = react.useRef(null);
 			const boxWrapRef = react.useRef(null);
 			const childRefs = react.useRef([]);
-			const [edges, setEdges] = react.useState([]);
-			const prevEdgesRef = react.useRef("");
+			// 016：一次测量 = 连线 + 行本地尺寸，单键防抖。坐标全部换算到行
+			// 「本地空间」（视觉像素 ÷ 缩放因子，由隐形探针实测），SVG 用
+			// viewBox 把用户空间钉在本地空间——CSS zoom 新旧实现都精确对齐，
+			// 且 SVG 盒子恒等于行的视觉尺寸（绝不撑出滚动区）。
+			const [layout, setLayout] = react.useState({ edges: [], w: 0, h: 0 });
+			const prevKeyRef = react.useRef("");
+			// 缩放探针：本地 10×10（小于最小节点盒，永不溢出行），visibility
+			// 隐藏。getBoundingClientRect 返回 10×zoom → 实测缩放因子。
+			const probeRef = react.useRef(null);
 
 			// 测量父盒右缘与各子节点包裹块的几何位置，画连线
 			// （折线 = M x1 y1 H midX V y2 H x2；曲线 = 贝塞尔水平切出）；
@@ -797,28 +907,35 @@ window.__ModuleLoader__.load({
 			react.useLayoutEffect(() => {
 				const rowEl = rowRef.current;
 				const boxEl = boxWrapRef.current;
-				if (!rowEl || !boxEl) return;
+				const probeEl = probeRef.current;
+				if (!rowEl || !boxEl || !probeEl) return;
 				const curve = theme && theme.lineStyle === "curve";
 				const measure = () => {
+					// 探针实测缩放因子（视觉/本地）——与 DOM 当前状态同步，
+					// 对 CSS zoom 的新旧实现（渲染期缩放 / used 值缩放）都成立。
+					const scale = probeEl.getBoundingClientRect().width / 10 || 1;
 					const rowRect = rowEl.getBoundingClientRect();
 					const boxRect = boxEl.getBoundingClientRect();
 					const next = [];
 					for (const ref of childRefs.current) {
 						if (!ref) continue;
 						const c = ref.getBoundingClientRect();
-						const x1 = boxRect.right - rowRect.left;
-						const y1 = boxRect.top - rowRect.top + boxRect.height / 2;
-						const x2 = c.left - rowRect.left;
-						const y2 = c.top - rowRect.top + c.height / 2;
+						// 视觉像素 → 行本地坐标（SVG 用户空间 = 本地空间）。
+						const x1 = (boxRect.right - rowRect.left) / scale;
+						const y1 = (boxRect.top - rowRect.top + boxRect.height / 2) / scale;
+						const x2 = (c.left - rowRect.left) / scale;
+						const y2 = (c.top - rowRect.top + c.height / 2) / scale;
 						const midX = (x1 + x2) / 2;
 						next.push(curve
 							? `M ${x1} ${y1} C ${midX} ${y1}, ${midX} ${y2}, ${x2} ${y2}`
 							: `M ${x1} ${y1} H ${midX} V ${y2} H ${x2}`);
 					}
-					const key = next.join("|");
-					if (prevEdgesRef.current === key) return;
-					prevEdgesRef.current = key;
-					setEdges(next);
+					const w = rowRect.width / scale;
+					const h = rowRect.height / scale;
+					const key = `${w.toFixed(2)}x${h.toFixed(2)}|${next.join("|")}`;
+					if (prevKeyRef.current === key) return;
+					prevKeyRef.current = key;
+					setLayout({ edges: next, w, h });
 				};
 				measure();
 				let observer = null;
@@ -834,20 +951,34 @@ window.__ModuleLoader__.load({
 				};
 			});
 
-			return (0, react_jsx_runtime.jsxs)("div", { ref: rowRef, style: { ...S.row, position: "relative" }, children: [
-				edges.length > 0
+			// 016 点击聚焦标记：row = 该节点的整棵子树边界（盒+子列），node = 节点盒本身；
+				// 画布层用事件委托 closest 定位（递归树不逐层传回调）。
+				return (0, react_jsx_runtime.jsxs)("div", { ref: rowRef, "data-mindmap-row": "", style: { ...S.row, position: "relative" }, children: [
+				// 缩放探针（本地 10×10，隐形，点击穿透）。
+				(0, react_jsx_runtime.jsx)("div", { ref: probeRef, style: { position: "absolute", top: 0, left: 0, width: 10, height: 10, visibility: "hidden", pointerEvents: "none" } }),
+				layout.edges.length > 0 && layout.w > 0 && layout.h > 0
 					? (0, react_jsx_runtime.jsx)("svg", {
+						// width/height = 本地尺寸 → 视觉 = 本地×zoom，恒等于行尺寸；
+						// viewBox 把用户空间钉在本地空间，路径坐标（本地）精确落位。
+						width: layout.w,
+						height: layout.h,
+						viewBox: `0 0 ${layout.w} ${layout.h}`,
+						preserveAspectRatio: "none",
 						style: S.edgeLayer,
-						children: edges.map((d, i) => (0, react_jsx_runtime.jsx)("path", {
+						children: layout.edges.map((d, i) => (0, react_jsx_runtime.jsx)("path", {
 							key: i,
 							d,
 							stroke: "var(--dsw-alias-border-l2)",
 							strokeWidth: 1.5,
 							fill: "none",
+							// 016：CSS zoom 缩放下 strokeWidth 会被一并缩放，缩小后线变
+							// 亚像素、模糊看不清；vectorEffect=non-scaling-stroke 让线宽
+							// 保持不变（任何缩放下都是 1.5px 视觉宽度）。
+							vectorEffect: "non-scaling-stroke",
 						}, i)),
 					})
 					: null,
-				(0, react_jsx_runtime.jsx)("div", { ref: boxWrapRef, style: { flex: "0 0 auto" }, children: (0, react_jsx_runtime.jsx)(NodeBox, { node, theme }) }),
+				(0, react_jsx_runtime.jsx)("div", { ref: boxWrapRef, "data-mindmap-node": "", style: { flex: "0 0 auto", cursor: "pointer" }, children: (0, react_jsx_runtime.jsx)(NodeBox, { node, theme }) }),
 				node.children && node.children.length > 0
 					? (0, react_jsx_runtime.jsx)("div", { style: S.childrenColumn, children: node.children.map((child, idx) => (0, react_jsx_runtime.jsx)("div", {
 						key: child.id,
@@ -857,8 +988,281 @@ window.__ModuleLoader__.load({
 						children: (0, react_jsx_runtime.jsx)(TreeRow, { node: child, theme }),
 					}, child.id)) })
 					: null,
-			] });
-		}
+				] });
+				}
+
+				//#region 016 脑图画布：居中呈现 + 缩放控制（右上角）
+				// 缩放契约：范围 [0.25, 3]，每级 ×1.2；适配计算四周留 48px 余量
+				//（16px 视觉内距 + 经典滚动条占位，避免「适配→滚动条出现→视口变
+				// 窄→再适配」的抖动循环）。
+				const ZOOM = { min: 0.25, max: 3, step: 1.2, padding: 48, focusMax: 1 };
+
+				/** 缩放夹取：非有限值/≤0 回退 1，否则夹到 [min, max]。 */
+				function clampZoom(value) {
+				if (!Number.isFinite(value) || value <= 0) return 1;
+				return Math.min(ZOOM.max, Math.max(ZOOM.min, value));
+				}
+
+				/** 步进缩放：direction>0 放大（×step），否则缩小（÷step），结果夹取。 */
+				function stepZoom(value, direction) {
+				const base = clampZoom(value);
+				return clampZoom(direction > 0 ? base * ZOOM.step : base / ZOOM.step);
+				}
+
+				/** 适配比例：min((view-padding)/tree, 1) 再夹取——小图不放大、巨图夹下限；零/非法尺寸返回 1。 */
+				function fitZoom(treeW, treeH, viewW, viewH) {
+					if (!(treeW > 0) || !(treeH > 0) || !(viewW > 0) || !(viewH > 0)) return 1;
+					return clampZoom(Math.min((viewW - ZOOM.padding) / treeW, (viewH - ZOOM.padding) / treeH, 1));
+				}
+
+				/**
+				 * 子树聚焦比例：适配整棵子树（区别于全局适配，允许放大到 focusMax），
+				 * 叶子/小子树不会怼脸、巨子树夹下限；零/非法尺寸返回 1。
+				 */
+				function focusZoom(treeW, treeH, viewW, viewH) {
+					if (!(treeW > 0) || !(treeH > 0) || !(viewW > 0) || !(viewH > 0)) return 1;
+					return clampZoom(Math.min((viewW - ZOOM.padding) / treeW, (viewH - ZOOM.padding) / treeH, ZOOM.focusMax));
+				}
+
+				/**
+				* 脑图画布：滚动区（canvasScroll）+ 居中层（canvasCenter，100%/max-content
+				* 双下限）+ 缩放内容（margin:auto + CSS zoom）。zoom 用 CSS zoom 而非
+				* transform:scale——它影响布局，滚动范围随缩放自动正确；TreeRow 连线是
+				* getBoundingClientRect 相对测量，父子同因子缩放，几何保持一致。
+				* 打开（fitKey=文档路径）时自动测量并应用适配比例；用户未手动缩放前
+				* ResizeObserver 持续再适配（AI 编辑改树尺寸、面板拖宽）；手动缩放后以
+				* 用户为准，点「适配」或切换文档恢复自动。缩放时记录视口中心并按比例
+				* 修正 scroll，视图不跳变（内容回到视口内时浏览器会自动钳制回 0）。
+				*/
+				function MindmapCanvas(props) {
+							const { node, theme, fitKey } = props;
+							const scrollRef = react.useRef(null);
+							const contentRef = react.useRef(null);
+							const zoomRef = react.useRef(1);
+							const userZoomedRef = react.useRef(false);
+							const anchorRef = react.useRef(null);
+							// 016：上次适配时的脑图自然尺寸（getBoundingClientRect / 当前 zoom）。
+							// ResizeObserver 回调里对比当前自然尺寸，差异 ≤ 2px 视为「滚动条抖动」
+							// 引发的同树再测，跳过避免「适配→横向滚动条出现→视口变窄→再适配」
+							// 的 33%/34%/30% 不停跳变。
+							const lastNaturalRef = react.useRef(null);
+						// 016 点击聚焦：记录待定位的节点盒元素。zoom 生效后的 [zoom]
+						// layout effect 里量新布局，把节点滚到「水平 25% / 垂直居中」。
+						const focusRef = react.useRef(null);
+						// 016 已提交 zoom：DOM 真正渲染到的缩放值（[zoom] layout effect
+						// 里同步）。zoomRef 可能领先于渲染提交（setState 异步），测量
+						// 一律除以 committed——否则「新 zoom ÷ 旧尺寸」得到错误自然
+						// 尺寸，适配值来回跳、停不下来（跳闪根源）。
+						const committedZoomRef = react.useRef(1);
+						// 016 熔断器：观察器触发的适配时间戳。1.5s 内第 5 次 → 判定
+						// 反馈循环，自动停手（保险丝，任何未知循环都最多闪几下）。
+						const fitStampRef = react.useRef([]);
+							const [zoom, setZoomState] = react.useState(1);
+							const [hover, setHover] = react.useState(null);
+
+							// 测量并适配：自然尺寸 = getBoundingClientRect ÷ 已提交 zoom（与
+							// DOM 实际状态严格同步，无竞态）。值不变不动 state（bail-out），
+							// 值变化才重置滚动到原点让树回到居中；同步记录自然尺寸供防抖。
+							function applyFit() {
+								const scroller = scrollRef.current;
+								const content = contentRef.current;
+								if (!scroller || !content) return;
+								const rect = content.getBoundingClientRect();
+								if (!(rect.width > 0) || !(rect.height > 0)) return;
+								const committed = committedZoomRef.current;
+								const naturalW = rect.width / committed;
+								const naturalH = rect.height / committed;
+								lastNaturalRef.current = { w: naturalW, h: naturalH };
+								const fit = fitZoom(naturalW, naturalH, scroller.clientWidth, scroller.clientHeight);
+								zoomRef.current = fit;
+								if (fit !== committed) {
+									scroller.scrollLeft = 0;
+									scroller.scrollTop = 0;
+									setZoomState(fit);
+								}
+							}
+
+							// 挂载 / 文档切换：清除「用户已手动缩放」标记与熔断计数，
+							// 布局稳定后（rAF）适配一次。
+							react.useLayoutEffect(() => {
+								userZoomedRef.current = false;
+								lastNaturalRef.current = null;
+								fitStampRef.current = [];
+								const id = requestAnimationFrame(applyFit);
+								return () => cancelAnimationFrame(id);
+							}, [fitKey]);
+
+							// 内容 / 画布尺寸变化（AI 编辑、面板拖宽）→ 未手动缩放则再适配。
+							// 区分触发源：仅内容变化（多为 zoom 引发的重排）时对比自然尺寸
+							// （÷ 已提交 zoom），差异 ≤ 2px 视为「滚动条抖动/亚像素重测」跳过；
+							// 画布变化（拖宽、滚动条出现）正常再适配。熔断器兜底：1.5s 内
+							// 第 5 次观察器适配 → 判定循环，自动停手（点适配/切文档可恢复）。
+							react.useEffect(() => {
+								const scroller = scrollRef.current;
+								const content = contentRef.current;
+								if (!scroller || !content || typeof ResizeObserver === "undefined") return;
+								const observer = new ResizeObserver((entries) => {
+									if (userZoomedRef.current) return;
+									const scrollerChanged = entries.some((e) => e.target === scroller);
+									if (!scrollerChanged) {
+										const last = lastNaturalRef.current;
+										if (last) {
+											const rect = content.getBoundingClientRect();
+											const w = rect.width / committedZoomRef.current;
+											const h = rect.height / committedZoomRef.current;
+											if (Math.abs(w - last.w) <= 2 && Math.abs(h - last.h) <= 2) return;
+										}
+									}
+									const now = Date.now();
+									const stamps = fitStampRef.current = fitStampRef.current.filter((t) => now - t < 1500);
+									if (stamps.length >= 5) {
+										userZoomedRef.current = true;
+										return;
+									}
+									stamps.push(now);
+									applyFit();
+								});
+								observer.observe(content);
+								observer.observe(scroller);
+								return () => observer.disconnect();
+							}, []);
+
+				function setZoom(next, anchorViewport) {
+					const value = clampZoom(next);
+					anchorRef.current = anchorViewport && scrollRef.current
+						? { prevZoom: zoomRef.current, scrollLeft: scrollRef.current.scrollLeft, scrollTop: scrollRef.current.scrollTop }
+						: null;
+					zoomRef.current = value;
+					setZoomState(value);
+				}
+
+				// 用户缩放后保持视口中心稳定：内容坐标按 new/old 比例缩放，scroll 同步修正。
+				// fit 路径 anchorRef 为 null，不锚定。
+				react.useLayoutEffect(() => {
+					// DOM 已提交到该 zoom，测量换算基准同步（applyFit 依赖）。
+					committedZoomRef.current = zoom;
+					if (focusRef.current) {
+						positionFocus();
+						return;
+					}
+					const scroller = scrollRef.current;
+					const anchor = anchorRef.current;
+					if (!scroller || !anchor) return;
+					anchorRef.current = null;
+					const ratio = anchor.prevZoom > 0 ? zoom / anchor.prevZoom : 1;
+					if (!(ratio > 0) || ratio === 1) return;
+					scroller.scrollLeft = (anchor.scrollLeft + scroller.clientWidth / 2) * ratio - scroller.clientWidth / 2;
+					scroller.scrollTop = (anchor.scrollTop + scroller.clientHeight / 2) * ratio - scroller.clientHeight / 2;
+				}, [zoom]);
+
+				function zoomIn() {
+					userZoomedRef.current = true;
+					setZoom(stepZoom(zoomRef.current, 1), true);
+				}
+
+				function zoomOut() {
+					userZoomedRef.current = true;
+					setZoom(stepZoom(zoomRef.current, -1), true);
+				}
+
+				function refit() {
+					userZoomedRef.current = false;
+					fitStampRef.current = [];
+					applyFit();
+				}
+
+				// 016 点击节点聚焦：节点滚到「垂直居中、水平约 25%」（树向右生长，
+				// 左侧锚点让子级铺满右侧视野），缩放比例取 focusZoom（整棵子树适配、
+				// 上限 focusMax）。事件委托：closest 找节点盒与所在子树 row，无需给
+				// 递归 TreeRow 传回调。聚焦视为用户手动缩放（停自动再适配）。
+				function onCanvasClick(e) {
+					const target = e.target;
+					if (!target || typeof target.closest !== "function") return;
+					const boxEl = target.closest("[data-mindmap-node]");
+					if (!boxEl || !boxEl.isConnected) return;
+					const rowEl = boxEl.closest("[data-mindmap-row]");
+					if (!rowEl) return;
+					const scroller = scrollRef.current;
+					if (!scroller) return;
+					const current = zoomRef.current;
+					const rowRect = rowEl.getBoundingClientRect();
+					const focus = focusZoom(rowRect.width / current, rowRect.height / current, scroller.clientWidth, scroller.clientHeight);
+					userZoomedRef.current = true;
+					focusRef.current = { boxEl };
+					if (focus !== current) {
+						anchorRef.current = null;
+						zoomRef.current = focus;
+						setZoomState(focus);
+					} else {
+						positionFocus();
+					}
+				}
+
+				// 聚焦定位：DOM 更新后量节点盒当前位置，滚动增量 = 当前位置 − 期望位置
+				//（scroll 增量与视口位移 1:1，浏览器自动钳制滚动范围；比例不变时同步调用）。
+				function positionFocus() {
+					const focus = focusRef.current;
+					focusRef.current = null;
+					const scroller = scrollRef.current;
+					if (!scroller || !focus || !focus.boxEl || !focus.boxEl.isConnected) return;
+					const boxRect = focus.boxEl.getBoundingClientRect();
+					const scrollerRect = scroller.getBoundingClientRect();
+					const curX = boxRect.left + boxRect.width / 2 - scrollerRect.left;
+					const curY = boxRect.top + boxRect.height / 2 - scrollerRect.top;
+					scroller.scrollLeft += curX - scroller.clientWidth * 0.25;
+					scroller.scrollTop += curY - scroller.clientHeight / 2;
+				}
+
+				// 边界反馈：到达上下限时对应按钮置灰（fit 值与边界精确相等时也命中）。
+				const atMin = zoom <= ZOOM.min;
+				const atMax = zoom >= ZOOM.max;
+				const zoomBtnStyle = (key, disabled) => (disabled
+					? { ...S.zoomBtn, ...S.zoomBtnDisabled }
+					: (hover === key ? { ...S.zoomBtn, ...S.zoomBtnHover } : S.zoomBtn));
+
+				return (0, react_jsx_runtime.jsxs)("div", { style: S.canvasWrap, children: [
+					(0, react_jsx_runtime.jsx)("div", { ref: scrollRef, style: S.canvasScroll, onClick: onCanvasClick, children:
+						(0, react_jsx_runtime.jsx)("div", { style: S.canvasCenter, children:
+							(0, react_jsx_runtime.jsx)("div", { ref: contentRef, style: { margin: "auto", zoom }, children:
+								(0, react_jsx_runtime.jsx)(TreeRow, { node, theme })
+							})
+						})
+					}),
+					(0, react_jsx_runtime.jsxs)("div", { style: S.zoomBar, children: [
+						(0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							title: "缩小",
+							style: zoomBtnStyle("out", atMin),
+							disabled: atMin,
+							onClick: zoomOut,
+							onMouseEnter: () => setHover("out"),
+							onMouseLeave: () => setHover((h) => (h === "out" ? null : h)),
+							children: "−",
+						}),
+						(0, react_jsx_runtime.jsx)("span", { style: S.zoomLabel, children: `${Math.round(zoom * 100)}%` }),
+						(0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							title: "放大",
+							style: zoomBtnStyle("in", atMax),
+							disabled: atMax,
+							onClick: zoomIn,
+							onMouseEnter: () => setHover("in"),
+							onMouseLeave: () => setHover((h) => (h === "in" ? null : h)),
+							children: "+",
+						}),
+						(0, react_jsx_runtime.jsx)("button", {
+							type: "button",
+							title: "适配画布（重新计算合适比例）",
+							style: hover === "fit" ? { ...S.zoomFitBtn, ...S.zoomBtnHover } : S.zoomFitBtn,
+							onClick: refit,
+							onMouseEnter: () => setHover("fit"),
+							onMouseLeave: () => setHover((h) => (h === "fit" ? null : h)),
+							children: "适配",
+						}),
+					] }),
+				] });
+				}
+				//#endregion
 
 		function MindmapDetailsPanel(props) {
 			// 014：面板与 M 按钮同槽位（conversation.session.header.actions），
@@ -1028,26 +1432,17 @@ window.__ModuleLoader__.load({
 				[doc && doc.content, doc && doc.rootTitle],
 			);
 
-			// AI 自动打开（001 决策 5）：新到达的 create/open 结果自动展开悬浮面板；
-			// 首次挂载只登记不打开（刷新后面板保持收起，003 实测行为）。
+			// AI 自动打开：create/open 代表用户明确的「创建 / 打开 / 查看」意图。
+			// 无论面板当前是否收起，都展开并切到这次意图对应的文档；首次挂载的
+			// 历史快照也照常显示最近一次打开的脑图，避免出现「AI 说已打开但面板没了」。
 			const seen = react.useRef(null);
 			react.useEffect(() => {
-				const ids = new Set(merged.order.map((p) => merged.byPath[p].callId));
-				if (seen.current === null) {
-					seen.current = ids;
-					return;
-				}
-				let shouldOpen = false;
-				for (const p of merged.order) {
-					const d = merged.byPath[p];
-					if (OPENING_OPS.has(d.op) && !seen.current.has(d.callId)) shouldOpen = true;
-				}
-				seen.current = ids;
-				if (shouldOpen) {
+				const targetPath = autoOpenTarget(merged, seen.current);
+				seen.current = openingEventKeys(merged);
+				if (targetPath) {
 					onOpen();
-					// 单脑图模式：新打开的脑图顶替旧视图（001 场景 1「一句开脑图」）。
 					setHiddenPath(null);
-					setCurrentPath(null);
+					setCurrentPath(targetPath);
 					setView("mindmap");
 				}
 			}, [merged]);
@@ -1530,13 +1925,15 @@ window.__ModuleLoader__.load({
 						}, shown) : null,
 					] }),
 				] }),
-				(0, react_jsx_runtime.jsx)("div", { style: S.body, children: active === TREE_TAB
-					? renderTree()
-					: (doc && doc.op === "local")
-						? renderLoading()
-						: tree
-							? (0, react_jsx_runtime.jsx)(TreeRow, { node: tree, theme })
-							: renderTree() }),
+				// 016：脑图视图走 MindmapCanvas（自带滚动 + 居中 + 右上角缩放控制条），
+				// 不再套 S.body（避免嵌套滚动容器与双重 padding）；目录/加载/空态保持原样。
+				active === TREE_TAB || (doc && doc.op === "local") || !tree
+					? (0, react_jsx_runtime.jsx)("div", { style: S.body, children: active === TREE_TAB
+						? renderTree()
+						: (doc && doc.op === "local")
+							? renderLoading()
+							: renderTree() })
+					: (0, react_jsx_runtime.jsx)(MindmapCanvas, { node: tree, theme, fitKey: doc && doc.path }),
 				tabMenu ? (0, react_jsx_runtime.jsxs)("div", {
 					style: { ...S.treeMenu, left: tabMenu.x, top: tabMenu.y },
 					onContextMenu: (e) => e.preventDefault(),
@@ -1644,6 +2041,8 @@ window.__ModuleLoader__.load({
 			parseMarkdownToTree,
 			reduceDocuments,
 			mergeDocuments,
+			autoOpenTarget,
+			openingEventKeys,
 			resultTextOfBlocks,
 			stemOf,
 			buildExportSvg,
@@ -1651,6 +2050,10 @@ window.__ModuleLoader__.load({
 			relPathWithin,
 			visibleTreeRows,
 			colorThemeTokens,
+			clampZoom,
+			stepZoom,
+			fitZoom,
+			focusZoom,
 			TOOL_NAMES,
 			OPENING_OPS,
 		});

package/index.js

@@ -52,6 +52,7 @@ Tools:
 Markdown mapping (the panel's parser): headings nest by level (H1 are root children, H2 under the previous H1, ...); list items are child nodes nested by 2-space indentation; an EMPTY list item ("- " followed by nothing) renders as a placeholder node — use placeholders for planned-but-unwritten nodes; a fenced code block becomes a leaf node titled "[lang] first line"; plain paragraphs become the note text of the nearest heading.
 
 Behavior rules:
+- When the user asks to create a mindmap, call mindmap_create. When the user asks to open, view, show, or switch to an existing mindmap, call mindmap_open (do not use mindmap_get alone). Both operations bring that document to the visible mindmap panel automatically.
 - Always mindmap_get before editing, then send the complete updated document to mindmap_update. One tool call per step so the panel follows along live.
 - Never delete the whole document or restructure it without an explicit user request. Make the smallest change that answers the request.
 - When the user steps away or pauses (e.g. "我去买咖啡"), stop all mindmap edits immediately and wait — never continue autonomously.

package/package.json

@@ -1,13 +1,26 @@
 {
   "name": "dsh-mindmap",
-  "version": "0.2.0",
+  "version": "0.4.1",
   "description": "Mindmap plugin for DeepSeek Harness: a plain markdown file in the working directory IS the mindmap; the chat edits it step by step and the right-side panel follows live.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/guhanfei-ai/dsh-mindmap.git"
+  },
+  "homepage": "https://github.com/guhanfei-ai/dsh-mindmap#readme",
+  "bugs": {
+    "url": "https://github.com/guhanfei-ai/dsh-mindmap/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
   "type": "module",
   "main": "index.js",
   "scripts": {
-    "check": "node --check index.js && node --check client.js && node --check test/index.test.js && node --check test/client.test.js",
+    "build:client": "node scripts/build-client.mjs",
+    "check": "npm run build:client && node --check index.js && node --check client.js && node --check scripts/build-client.mjs && node --check test/index.test.js && node --check test/client.test.js",
     "test": "node --test",
-    "verify": "npm run check && npm test"
+    "verify": "npm run check && npm test",
+    "prepack": "npm run verify"
   },
   "files": [
     "index.js",