dsh-obsidian-notes 0.5.1 → 0.6.0

package/src/client.js

@@ -112,6 +112,44 @@
     cancel: "取消",
     discard: "放弃未保存的修改？",
     cite: "引用到对话",
+    mindMap: "思维导图",
+    preview: "预览",
+    mapEmpty: "这篇笔记还没有标题或列表，画不出思维导图",
+    mapHint: "滚轮缩放 · 拖动平移 · 单击节点选中 · 双击跳到源码行",
+    mapJump: "跳到源码行",
+    mapAsk: "把分支插入对话",
+    branchCited: "已把分支插入对话（{n} 行）",
+    graph: "关系图谱",
+    graphHint: "滚轮缩放 · 拖动平移 · 点击笔记打开 · 悬停看邻居",
+    graphGlobal: "全库",
+    graphLocal: "局部",
+    graphLocalHint: "以当前打开的笔记为中心显示 2 跳邻居",
+    graphRefresh: "重新读取 vault",
+    graphRerun: "重新布局",
+    graphClose: "关闭图谱",
+    graphLoading: "正在构建关系图谱…",
+    graphEmpty: "vault 里还没有可显示的笔记或双链",
+    graphError: "关系图谱加载失败：{msg}",
+    graphStats: "{notes} 篇笔记 · {tags} 个标签 · {edges} 条连线",
+    graphTruncated: "笔记较多，图谱只画了最重要的 {n} 个节点",
+    graphNoNote: "先在侧边栏打开一篇笔记，才能看局部图谱",
+    graphOpen: "打开关系图谱",
+    graphMove: "拖动移动面板",
+    graphNeedsRestart: "关系图谱需要重启 DSH 后启用",
+    graphRestartHint: "当前 DSH 进程里还是旧版 host（缺少 /obsidian/graph 路由）。完全退出 DSH（Cmd+Q）再打开，然后点「重试」。",
+    graphErrorTitle: "关系图谱加载失败",
+    graphBuilding: "正在从笔记构建图谱（{done}/{total}）…",
+    graphFocus: "聚焦",
+    graphFocusHint: "一键切到以当前打开笔记为中心的局部图谱（局部模式下再点 = 重新居中）",
+    graphLegendNote: "笔记",
+    graphLegendTag: "标签",
+    graphLegendFocus: "当前笔记",
+    graphLegendLink: "链接",
+    graphDepth: "跳数",
+    graphDepthHint: "局部图谱跳数，1–5 跳（与 Obsidian 局部图谱的 depth 范围一致）",
+    graphRetry: "重试",
+    graphDetails: "详细信息",
+    graphDetailsHide: "收起详细信息",
     cited: "已引用到对话",
     copied: "已复制引用，可粘贴到输入框",
     noInput: "未找到对话输入框，引用已复制到剪贴板",
@@ -249,6 +287,44 @@
     cancel: "Cancel",
     discard: "Discard unsaved changes?",
     cite: "Cite to chat",
+    mindMap: "Mind map",
+    preview: "Preview",
+    mapEmpty: "No headings or list items yet — nothing to draw",
+    mapHint: "Scroll to zoom · drag to pan · click a node to select · double-click to jump to its line",
+    mapJump: "Jump to line",
+    mapAsk: "Insert branch into chat",
+    branchCited: "Branch inserted into the chat ({n} lines)",
+    graph: "Graph view",
+    graphHint: "Scroll to zoom · drag to pan · click a note to open it · hover to see neighbours",
+    graphGlobal: "Vault",
+    graphLocal: "Local",
+    graphLocalHint: "Show the 2-hop neighbourhood of the note that is open",
+    graphRefresh: "Re-read the vault",
+    graphRerun: "Re-run the layout",
+    graphClose: "Close the graph",
+    graphLoading: "Building the graph…",
+    graphEmpty: "No notes or links to draw yet",
+    graphError: "Graph view failed: {msg}",
+    graphStats: "{notes} notes · {tags} tags · {edges} links",
+    graphTruncated: "Large vault: only the {n} most connected nodes are drawn",
+    graphNoNote: "Open a note in the sidebar first to see the local graph",
+    graphOpen: "Open the graph view",
+    graphMove: "Drag to move the panel",
+    graphNeedsRestart: "The graph view needs a DSH restart",
+    graphRestartHint: "The running DSH host still predates the /obsidian/graph route. Quit DSH completely (Cmd+Q), reopen it, then press Retry.",
+    graphErrorTitle: "The graph view failed to load",
+    graphBuilding: "Building the graph from notes ({done}/{total})…",
+    graphFocus: "Focus",
+    graphFocusHint: "Jump to the local graph centred on the open note (click again to re-centre)",
+    graphLegendNote: "note",
+    graphLegendTag: "tag",
+    graphLegendFocus: "current note",
+    graphLegendLink: "link",
+    graphDepth: "Depth",
+    graphDepthHint: "Local graph depth, 1–5 hops (same range as Obsidian's local graph depth)",
+    graphRetry: "Retry",
+    graphDetails: "Details",
+    graphDetailsHide: "Hide details",
     cited: "Cited to chat",
     copied: "Reference copied — paste it into the input",
     noInput: "No chat input found — reference copied to clipboard",
@@ -299,6 +375,8 @@
   // ── 共享外部 store（跨槽位：侧边栏 / Dock / Toast）──────────────────────────
   const LS_NOTES_OPEN = "dsh-obsidian:notesOpen";
   const LS_DOCK_WIDTH = "dsh-obsidian:dockWidth";
+  const LS_GRAPH_GEOMETRY = "dsh-obsidian:graphGeometry";
+  const LS_LOCAL_DEPTH = "dsh-obsidian:localDepth";
 
   function readNotesOpen() {
     try {
@@ -308,7 +386,7 @@
     }
   }
 
-  let shared = { notesOpen: readNotesOpen(), openNote: null, vaultRev: 0, toast: null, noteCount: 0, prompt: null };
+  let shared = { notesOpen: readNotesOpen(), openNote: null, graphOpen: false, vaultRev: 0, toast: null, noteCount: 0, prompt: null };
   const sharedListeners = new Set();
 
   function patchShared(patch) {
@@ -750,7 +828,69 @@
     `.dsh-obs-md-lc{flex:1;min-width:0}`,
     `.dsh-obs-dock-body .dsh-obs-md-row .dsh-obs-md-lc p,.dsh-obs-dock-body .dsh-obs-md-row .dsh-obs-md-lc h1,.dsh-obs-dock-body .dsh-obs-md-row .dsh-obs-md-lc h2,.dsh-obs-dock-body .dsh-obs-md-row .dsh-obs-md-lc h3,.dsh-obs-dock-body .dsh-obs-md-row .dsh-obs-md-lc h4,.dsh-obs-dock-body .dsh-obs-md-row .dsh-obs-md-lc h5,.dsh-obs-dock-body .dsh-obs-md-row .dsh-obs-md-lc h6,.dsh-obs-dock-body .dsh-obs-md-row .dsh-obs-md-lc blockquote{margin:0;padding:0}`,
     `.dsh-obs-md-row.dsh-obs-md-heading .dsh-obs-md-lc{font-weight:600}`,
+    // 行内 Obsidian 语法：==高亮== / ~~删除线~~ / 裸链接与自动链接
+    `.dsh-obs-md mark,.dsh-obs-mark{background:rgba(255,208,0,.32);color:inherit;border-radius:2px;padding:0 1px}`,
+    `.dsh-obs-md del{opacity:.62;text-decoration:line-through}`,
+    `.dsh-obs-md .dsh-obs-autolink{color:var(--dsw-alias-brand-primary);text-decoration:underline;text-underline-offset:2px;word-break:break-all}`,
     `.dsh-obs-md-row.dsh-obs-md-quote .dsh-obs-md-lc{border-left:3px solid var(--dsw-alias-brand-primary);padding-left:10px;color:var(--dsw-alias-label-secondary)}`,
+    // ── 思维导图视图（B1）──
+    `.dsh-obs-dock-map{overflow:hidden;padding:0}`,
+    `.dsh-obs-map{position:relative;display:block;width:100%;height:100%;min-height:300px;cursor:grab;overflow:hidden;user-select:none;-webkit-user-select:none}`,
+    `.dsh-obs-map-svg{display:block;width:100%;height:100%}`,
+    `.dsh-obs-map-edge{fill:none;stroke:var(--dsw-alias-border-l2);stroke-width:1.5}`,
+    `.dsh-obs-map-node{cursor:pointer}`,
+    `.dsh-obs-map-node rect{fill:var(--dsw-alias-bg-overlay);stroke:var(--dsw-alias-border-l2);stroke-width:1}`,
+    `.dsh-obs-map-heading rect{stroke:var(--dsw-alias-brand-primary)}`,
+    `.dsh-obs-map-root rect{fill:var(--dsw-alias-brand-primary);stroke:var(--dsw-alias-brand-primary)}`,
+    `.dsh-obs-map-root text{fill:#fff;font-weight:600}`,
+    `.dsh-obs-map-node text{font-size:12.5px;fill:var(--dsw-alias-label-primary);pointer-events:none}`,
+    `.dsh-obs-map-sel rect{stroke:var(--dsw-alias-brand-primary);stroke-width:2}`,
+    `.dsh-obs-map-hint{position:absolute;left:10px;bottom:8px;font-size:11px;color:var(--dsw-alias-label-tertiary);pointer-events:none}`,
+    `.dsh-obs-map-actions{position:absolute;right:10px;top:8px;display:flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid var(--dsw-alias-border-l2);border-radius:8px;background:var(--dsw-alias-bg-overlay);font-size:12px}`,
+    `.dsh-obs-map-actions .dsh-obs-map-line{color:var(--dsw-alias-label-tertiary);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}`,
+    `.dsh-obs-map-actions button{padding:3px 8px;font-size:12px}`,
+    `.dsh-obs-map-empty{display:flex;align-items:center;justify-content:center;height:100%;min-height:220px;padding:24px;color:var(--dsw-alias-label-tertiary);text-align:center}`,
+    `.dsh-obs-md-row.dsh-obs-md-flash{background:color-mix(in srgb,var(--dsw-alias-brand-primary) 16%,transparent);border-radius:4px}`,
+    // ── 关系图谱（shell.overlay，vault 级独立视图）──
+    `.dsh-obs-graph{position:fixed;z-index:40;display:flex;flex-direction:column;box-sizing:border-box;min-width:560px;min-height:360px;border:1px solid var(--dsw-alias-border-l2);border-radius:14px;background:var(--dsw-alias-bg-overlay);box-shadow:0 24px 64px rgba(0,0,0,.45);overflow:hidden;color:var(--dsw-alias-label-primary)}`,
+    `.dsh-obs-graph-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--dsw-alias-border-l2);flex-wrap:wrap;cursor:move;user-select:none;-webkit-user-select:none}`,
+    `.dsh-obs-graph-resize{position:absolute;right:2px;bottom:2px;width:16px;height:16px;cursor:nwse-resize;border-right:2px solid var(--dsw-alias-border-l2);border-bottom:2px solid var(--dsw-alias-border-l2);opacity:.75}`,
+    `.dsh-obs-graph-error{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:8px;padding:32px;text-align:center}`,
+    `.dsh-obs-graph-error-icon{font-size:26px}`,
+    `.dsh-obs-graph-error-title{font-size:14px;font-weight:600;color:var(--dsw-alias-label-primary)}`,
+    `.dsh-obs-graph-error-text{font-size:12px;line-height:1.7;color:var(--dsw-alias-label-secondary);max-width:560px}`,
+    `.dsh-obs-graph-error-actions{display:flex;gap:8px;margin-top:8px}`,
+    `.dsh-obs-graph-error-actions button{padding:5px 12px;font-size:12px;border-radius:8px;border:1px solid var(--dsw-alias-border-l2);background:transparent;color:var(--dsw-alias-label-primary);cursor:pointer}`,
+    `.dsh-obs-graph-error-actions button:hover{background:var(--dsw-alias-interactive-bg-hover)}`,
+    `.dsh-obs-graph-error-actions button.dsh-obs-primary{background:var(--dsw-alias-button-primary-fill);border-color:var(--dsw-alias-button-primary-fill);color:var(--dsw-alias-label-primary-foreground)}`,
+    `.dsh-obs-graph-error-details{max-width:560px;max-height:120px;overflow:auto;margin-top:6px;padding:8px;border-radius:6px;background:var(--dsw-alias-interactive-bg-hover);font-size:11px;color:var(--dsw-alias-label-tertiary);white-space:pre-wrap;word-break:break-all;text-align:left}`,
+    `.dsh-obs-graph-title{font-weight:600;font-size:14px}`,
+    `.dsh-obs-graph-stats{font-size:11px;color:var(--dsw-alias-label-tertiary)}`,
+    `.dsh-obs-graph-modes{display:flex;gap:4px;margin-left:auto}`,
+    `.dsh-obs-graph-modes button[disabled]{opacity:.45;cursor:not-allowed}`,
+    `.dsh-obs-graph-depth{display:inline-flex;align-items:center;gap:2px;margin-left:6px;padding-left:8px;border-left:1px solid var(--dsw-alias-border-l2)}`,
+    `.dsh-obs-graph-depth-label{font-size:11px;color:var(--dsw-alias-label-tertiary);margin-right:2px}`,
+    `.dsh-obs-graph-depth button{min-width:20px;padding:0 4px}`,
+    `.dsh-obs-graph-head button{white-space:nowrap;flex:none}`,
+    `.dsh-obs-legend-dot{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--dsw-alias-label-secondary);display:inline-block;box-sizing:border-box}`,
+    `.dsh-obs-legend-tag{width:8px;height:8px;border-radius:2px;background:var(--dsw-alias-brand-primary);display:inline-block}`,
+    `.dsh-obs-legend-focus{width:9px;height:9px;border-radius:50%;border:2px solid var(--dsw-alias-state-error-primary);display:inline-block;box-sizing:border-box}`,
+    `.dsh-obs-legend-link{width:14px;height:1.5px;background:var(--dsw-alias-border-l2);display:inline-block}`,
+    `.dsh-obs-graph-canvas{position:relative;flex:1;min-height:0;overflow:hidden;cursor:grab;user-select:none;-webkit-user-select:none}`,
+    `.dsh-obs-graph-svg{display:block;width:100%;height:100%}`,
+    `.dsh-obs-graph-edge{stroke:var(--dsw-alias-border-l2);stroke-width:1;opacity:.55}`,
+    `.dsh-obs-graph-edge-on{stroke:var(--dsw-alias-brand-primary);opacity:.9;stroke-width:1.6}`,
+    `.dsh-obs-graph-node{cursor:pointer}`,
+    `.dsh-obs-graph-note circle{fill:var(--dsw-alias-bg-overlay);stroke:var(--dsw-alias-label-secondary);stroke-width:1.4}`,
+    `.dsh-obs-graph-tag rect{fill:var(--dsw-alias-brand-primary);opacity:.75}`,
+    `.dsh-obs-graph-sel circle,.dsh-obs-graph-sel rect{stroke:var(--dsw-alias-brand-primary);stroke-width:2.2}`,
+    `.dsh-obs-graph-focus circle{stroke:var(--dsw-alias-state-error-primary);stroke-width:2.4}`,
+    `.dsh-obs-graph-dim{opacity:.25}`,
+    `.dsh-obs-graph-node text{font-size:11px;fill:var(--dsw-alias-label-primary);pointer-events:none}`,
+    `.dsh-obs-graph-tag text{fill:var(--dsw-alias-label-secondary)}`,
+    `.dsh-obs-graph-hint{padding:6px 14px;border-top:1px solid var(--dsw-alias-border-l2);font-size:11px;color:var(--dsw-alias-label-tertiary)}`,
+    `.dsh-obs-graph-empty{display:flex;align-items:center;justify-content:center;flex:1;padding:32px;color:var(--dsw-alias-label-tertiary);text-align:center}`,
+    `.dsh-obs-graph-error, .dsh-obs-graph-empty{flex:1;min-height:0}`,
     // ── Obsidian callout（`> [!type] 标题`）配色：类型在根节点上带 data-callout ──
     `[data-callout="note"]{--dsh-obs-callout-color:#448aff}`,
     `[data-callout="abstract"]{--dsh-obs-callout-color:#00b8d4}`,
@@ -946,6 +1086,38 @@
     return `${d.getFullYear()}/${String(d.getMonth() + 1).padStart(2, "0")}/${String(d.getDate()).padStart(2, "0")}`;
   }
 
+  /**
+   * 会话行次序：与 DSH 内置侧边栏的**默认**排序（`orderBy: 'updated'`，
+   * 「最近更新」）一致。
+   *
+   * 不能直接用 Workspace 的 `sessionIds` 次序：那是**挂载次序**（host 侧
+   * `attachSession` 把新会话 prepend 到数组头），一个很久以前创建、现在仍在
+   * 用的会话会停在旧位置（表现为「当前会话排在倒数第二」）。DSH 默认视图
+   * 的做法是：按会话的 `updatedAt` 降序；时间相同时按 id 升序 —— 官方
+   * `compareSessionRecency` 就是这两个比较，id 作稳定 tie-break 是为了同一份
+   * 数据每次渲染次序稳定，不随 Map 迭代顺序抖动。
+   * @param a - 会话 id。
+   * @param b - 会话 id。
+   * @param byId - 会话 id → 会话摘要（`updatedAt` 为 epoch ms）。
+   * @returns 排序比较值（负 = a 更靠前）。
+   */
+  function compareSessionRecency(a, b, byId) {
+    const ta = byId[a]?.updatedAt ?? Number.NEGATIVE_INFINITY;
+    const tb = byId[b]?.updatedAt ?? Number.NEGATIVE_INFINITY;
+    if (ta !== tb) return tb - ta;
+    return a < b ? -1 : 1;
+  }
+
+  /**
+   * 按「最近更新」排会话 id 列表（不修改入参）。
+   * @param sessionIds - 待排的会话 id。
+   * @param byId - 会话 id → 会话摘要。
+   * @returns 新的已排序数组。
+   */
+  function sortedSessionIds(sessionIds, byId) {
+    return [...sessionIds].sort((a, b) => compareSessionRecency(a, b, byId));
+  }
+
   /**
    * 一个会话及其全部子代理后代（闭包，含自身）。
    * 删父会话必须连子代理日志一起删：父级日志消失后，子会话会变成无法归属的
@@ -1038,6 +1210,7 @@
     // `![[附件/a.png]]` 会被当成 Vault 根下的 `附件/a.png` → 403 → 只剩断图。
     assetUrl: (rel, from) => `/obsidian/file?path=${encodeURIComponent(rel)}`
       + (from ? `&from=${encodeURIComponent(from)}` : ""),
+    graph: () => api("/graph"),
     note: (rel) => api(`/note?path=${encodeURIComponent(rel)}`),
     save: (rel, content) => api("/note", {
       method: "POST",
@@ -1479,6 +1652,14 @@
           onClick: (e) => { e.stopPropagation(); void newNote(""); },
         }, "＋"),
       ),
+      rootInfo && rootInfo.exists && createElement("div", { className: "dsh-obs-root-row", title: t("graphOpen") },
+        createElement("span", { className: "dsh-obs-root-path" }, `🕸 ${t("graph")}`),
+        createElement("button", {
+          className: "dsh-obs-mini",
+          title: t("graphOpen"),
+          onClick: (e) => { e.stopPropagation(); patchShared({ graphOpen: true }); },
+        }, "↗"),
+      ),
       rootInfo && rootInfo.exists && attachDir !== null && createElement("div", { className: "dsh-obs-root-row", title: t("attachSettings") },
         createElement("span", { className: "dsh-obs-root-path" },
           `📎 ${t("attachLocation")}: ${attachLocationLabel(attachCfg, attachDir, t)}`),
@@ -1621,7 +1802,9 @@
       return true;
     };
 
-    // 分组：工作区 sessionIds 账户为主，cwd === path 兜底；其余入「未分组」
+    // 分组：工作区 sessionIds 账户为主，cwd === path 兜底；其余入「未分组」。
+    // 组内次序**不**沿用 Workspace 的 sessionIds：那是挂载次序（新会话 prepend），
+    // 会让人气正旺的旧会话沉底。统一按「最近更新」排，与 DSH 内置侧边栏默认一致。
     const groups = useMemo(() => {
       const accounted = new Set();
       const list = [];
@@ -1640,11 +1823,12 @@
             accounted.add(sid);
           }
         }
-        list.push({ key: w.workspaceId, workspace: w, sessionIds: wsIds });
+        list.push({ key: w.workspaceId, workspace: w, sessionIds: sortedSessionIds(wsIds, byId) });
       }
-      const ungrouped = ids
-        .filter((sid) => !accounted.has(sid) && visibleSession(sid))
-        .sort((a, b) => (byId[b].updatedAt ?? 0) - (byId[a].updatedAt ?? 0));
+      const ungrouped = sortedSessionIds(
+        ids.filter((sid) => !accounted.has(sid) && visibleSession(sid)),
+        byId,
+      );
       return { list, ungrouped };
     }, [items, ids, byId, archived, current, purged]); // eslint-disable-line react-hooks/exhaustive-deps
 
@@ -1699,15 +1883,13 @@
     const q = query.trim().toLowerCase();
     const matched = useMemo(() => {
       if (q === "") return [];
-      return ids
-        .filter((sid) => {
-          if (!visibleSession(sid)) return false;
-          const s = byId[sid];
-          const title = (s.title ?? "").toLowerCase();
-          const display = (s.displayTitle ?? "").toLowerCase();
-          return title.includes(q) || display.includes(q);
-        })
-        .sort((a, b) => (byId[b].updatedAt ?? 0) - (byId[a].updatedAt ?? 0));
+      return sortedSessionIds(ids.filter((sid) => {
+        if (!visibleSession(sid)) return false;
+        const s = byId[sid];
+        const title = (s.title ?? "").toLowerCase();
+        const display = (s.displayTitle ?? "").toLowerCase();
+        return title.includes(q) || display.includes(q);
+      }), byId);
     }, [ids, byId, archived, q, current, purged]);
 
     // ── 批量操作 ──────────────────────────────────────────────────────────────
@@ -2550,12 +2732,663 @@
     );
   }
 
+  /**
+   * 关系图谱视图：全库 .md + [[双链]] + 标签（host `/obsidian/graph` 计算，
+   * 力导向布局在 src/graph.js）。可切到「局部」= 当前打开笔记的 2 跳邻居。
+   */
+  function GraphView({ t, currentNote, onOpenNote, onClose }) {
+    const [data, setData] = useState(null);
+    const [error, setError] = useState("");
+    const [loading, setLoading] = useState(true);
+    const [mode, setMode] = useState("global");
+    // 局部图谱跳数：与 Obsidian 局部图谱的 depth 滑杆对齐（范围 1–5，默认 1）
+    const [fitKey, setFitKey] = useState(0);
+    const [localDepth, setLocalDepth] = useState(() => {
+      try {
+        const v = parseInt(localStorage.getItem(LS_LOCAL_DEPTH) ?? "", 10);
+        if (Number.isFinite(v) && v >= 1 && v <= 5) return v;
+      } catch { /* ignore */ }
+      return 1;
+    });
+    const [seed, setSeed] = useState(1);
+    const [hovered, setHovered] = useState(null);
+    const [reloadKey, setReloadKey] = useState(0);
+    const [transform, setTransform] = useState({ x: 0, y: 0, s: 1 });
+    const [detailsOpen, setDetailsOpen] = useState(false);
+    const [buildProgress, setBuildProgress] = useState(null);
+    const dragRef = useRef(null);
+    const wrapRef = useRef(null);
+    const panelDragRef = useRef(null);
+    const resizeRef = useRef(null);
+    // 面板几何：可拖动、可缩放、可关闭（和笔记 Dock 同一套交互），位置/尺寸持久化
+    const [geometry, setGeometry] = useState(() => {
+      const fallback = { x: null, y: 64, width: 860, height: 600 };
+      try {
+        const raw = localStorage.getItem(LS_GRAPH_GEOMETRY);
+        if (raw !== null) {
+          const parsed = JSON.parse(raw);
+          if (typeof parsed === "object" && parsed !== null) {
+            return {
+              x: typeof parsed.x === "number" ? parsed.x : null,
+              y: typeof parsed.y === "number" ? parsed.y : 64,
+              width: Number.isFinite(parsed.width) ? Math.min(Math.max(560, parsed.width), 1600) : 860,
+              height: Number.isFinite(parsed.height) ? Math.min(Math.max(360, parsed.height), 1200) : 600,
+            };
+          }
+        }
+      } catch { /* 忽略坏掉的本地存储 */ }
+      return fallback;
+    });
+
+    useEffect(() => {
+      let cancelled = false;
+      setLoading(true);
+      setError("");
+      setBuildProgress(null);
+      // 旧 host 没有 /obsidian/graph 路由时的兜底：用已有的 tree/note 接口在浏览器里
+      // 自建同一张图（插件升级后页面刷新即可用，不要求用户重启 DSH）。
+      const buildFromClient = async () => {
+        const dirs = [""];
+        const notes = [];
+        while (dirs.length > 0 && notes.length < 1200) {
+          const rel = dirs.shift();
+          let res;
+          try {
+            res = await treeApi.tree(rel);
+          } catch {
+            continue;
+          }
+          for (const entry of res.entries ?? []) {
+            const path = rel === "" ? entry.name : `${rel}/${entry.name}`;
+            if (entry.type === "dir") dirs.push(path);
+            else if (entry.type === "note") notes.push({ path });
+          }
+        }
+        const collected = new Array(notes.length).fill(null);
+        let done = 0;
+        let cursor = 0;
+        setBuildProgress({ done, total: notes.length });
+        const worker = async () => {
+          while (cursor < notes.length && !cancelled) {
+            const index = cursor;
+            cursor += 1;
+            try {
+              const note = await treeApi.note(notes[index].path);
+              collected[index] = {
+                path: notes[index].path,
+                links: Array.isArray(note.links) ? note.links : [],
+                tags: graphModule.extractTags(note.content ?? "", note.frontmatter),
+              };
+            } catch { /* 单篇读失败不影响整张图 */ }
+            done += 1;
+            if ((done % 8 === 0 || done === notes.length) && !cancelled) setBuildProgress({ done, total: notes.length });
+          }
+        };
+        await Promise.all(Array.from({ length: Math.min(6, Math.max(1, notes.length)) }, worker));
+        if (cancelled) return null;
+        return graphModule.buildGraphFromNotes(collected.filter(Boolean));
+      };
+      treeApi.root().then((root) => {
+        if (cancelled) return null;
+        const features = root && Array.isArray(root.features) ? root.features : [];
+        if (!features.includes("graph")) return buildFromClient();
+        return treeApi.graph();
+      }).then((res) => {
+        if (cancelled || res === null || res === undefined) return;
+        setData(res);
+        setLoading(false);
+        setBuildProgress(null);
+      }).catch((err) => {
+        if (cancelled) return;
+        setError(String(err && err.message ? err.message : err));
+        setLoading(false);
+      });
+      return () => { cancelled = true; };
+    }, [reloadKey]);
+
+    // 位置/尺寸持久化
+    useEffect(() => {
+      try { localStorage.setItem(LS_GRAPH_GEOMETRY, JSON.stringify(geometry)); } catch { /* ignore */ }
+    }, [geometry]);
+
+    useEffect(() => {
+      try { localStorage.setItem(LS_LOCAL_DEPTH, String(localDepth)); } catch { /* ignore */ }
+    }, [localDepth]);
+
+    // 拖动标题栏移动面板（按钮上不触发）
+    const beginPanelDrag = useCallback((e) => {
+      if (e.target && e.target.closest && e.target.closest("button")) return;
+      e.preventDefault();
+      const el = e.currentTarget && e.currentTarget.parentElement;
+      const base = { x: geometry.x !== null ? geometry.x : (el && typeof el.getBoundingClientRect === "function" ? el.getBoundingClientRect().left : 80), y: geometry.y };
+      panelDragRef.current = { startX: e.clientX, startY: e.clientY, base };
+      const onMove = (ev) => {
+        const st = panelDragRef.current;
+        if (!st) return;
+        setGeometry((prev) => ({
+          ...prev,
+          x: Math.min(Math.max(0, st.base.x + ev.clientX - st.startX), Math.max(0, window.innerWidth - 240)),
+          y: Math.min(Math.max(8, st.base.y + ev.clientY - st.startY), Math.max(8, window.innerHeight - 120)),
+        }));
+      };
+      const onUp = () => {
+        panelDragRef.current = null;
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      };
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    }, [geometry.x, geometry.y]);
+
+    // 右下角缩放面板
+    const beginPanelResize = useCallback((e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      resizeRef.current = { startX: e.clientX, startY: e.clientY, baseW: geometry.width, baseH: geometry.height };
+      const onMove = (ev) => {
+        const st = resizeRef.current;
+        if (!st) return;
+        setGeometry((prev) => ({
+          ...prev,
+          width: Math.min(Math.max(560, st.baseW + ev.clientX - st.startX), Math.round(window.innerWidth * 0.96)),
+          height: Math.min(Math.max(360, st.baseH + ev.clientY - st.startY), Math.round(window.innerHeight * 0.94)),
+        }));
+      };
+      const onUp = () => {
+        resizeRef.current = null;
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      };
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+    }, [geometry.width, geometry.height]);
+
+    const currentRel = currentNote && currentNote.rel ? currentNote.rel : null;
+    const focusId = currentRel !== null ? `note:${currentRel}` : null;
+    const localAvailable = data !== null && focusId !== null && data.nodes.some((node) => node.id === focusId);
+    const shown = useMemo(() => {
+      if (data === null) return { nodes: [], edges: [] };
+      if (mode === "local" && localAvailable) {
+        const sub = graphModule.localSubgraph(data, focusId, localDepth);
+        return { nodes: sub.nodes, edges: sub.edges };
+      }
+      return { nodes: data.nodes, edges: data.edges };
+    }, [data, mode, localAvailable, focusId, localDepth]);
+    const plan = useMemo(
+      () => graphModule.layoutGraph(shown.nodes, shown.edges, { seed, maxNodes: 420 }),
+      [shown, seed],
+    );
+
+    // 打开 / 切换范围 / 重新布局后把整张图适配进画布
+    useEffect(() => {
+      const el = wrapRef.current;
+      if (!el || plan.nodes.length === 0) return;
+      const w = el.clientWidth || 900;
+      const h = el.clientHeight || 560;
+      const fit = Math.min((w - 30) / plan.width, (h - 30) / plan.height, 1);
+      setTransform({ x: (w - plan.width * fit) / 2, y: (h - plan.height * fit) / 2, s: fit });
+    }, [plan, fitKey]);
+
+    const onWheel = useCallback((e) => {
+      if (plan.nodes.length === 0) return;
+      if (e.cancelable !== false && e.preventDefault) e.preventDefault();
+      const rect = e.currentTarget && e.currentTarget.getBoundingClientRect
+        ? e.currentTarget.getBoundingClientRect()
+        : { left: 0, top: 0 };
+      const px = (e.clientX || 0) - rect.left;
+      const py = (e.clientY || 0) - rect.top;
+      setTransform((prev) => {
+        const next = Math.min(4, Math.max(0.18, prev.s * (e.deltaY > 0 ? 0.9 : 1.11)));
+        const k = next / prev.s;
+        return { s: next, x: px - (px - prev.x) * k, y: py - (py - prev.y) * k };
+      });
+    }, [plan.nodes.length]);
+    const onMouseDown = useCallback((e) => {
+      if (e.button !== undefined && e.button !== 0) return;
+      dragRef.current = { x: e.clientX, y: e.clientY, ox: transform.x, oy: transform.y };
+    }, [transform.x, transform.y]);
+    const onMouseMove = useCallback((e) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      setTransform((prev) => ({ ...prev, x: drag.ox + (e.clientX - drag.x), y: drag.oy + (e.clientY - drag.y) }));
+    }, []);
+    const endDrag = useCallback(() => { dragRef.current = null; }, []);
+
+    const neighbourSet = useMemo(() => {
+      if (hovered === null) return null;
+      const set = new Set([hovered]);
+      for (const edge of shown.edges) {
+        if (edge.source === hovered) set.add(edge.target);
+        if (edge.target === hovered) set.add(edge.source);
+      }
+      return set;
+    }, [hovered, shown.edges]);
+
+    const fitLabel = (text, maxUnits) => {
+      let out = "";
+      let units = 0;
+      for (const ch of text) {
+        const w = /[\u2E80-\u9FFF\uF900-\uFAFF\u3000-\u303F\uFF00-\uFFEF]/.test(ch) ? 2 : 1;
+        if (units + w > maxUnits) return `${out}…`;
+        out += ch;
+        units += w;
+      }
+      return out;
+    };
+    const showAllLabels = plan.nodes.length <= 150;
+
+    // 小按钮工厂：分段控件（全库/局部/聚焦）+ 右侧图标按钮，统一尺寸，永不换行
+    const modeButton = (label, active, onClick, options = {}) => createElement("button", {
+      className: "dsh-obs-mini",
+      style: {
+        flex: "none",
+        width: "auto",
+        height: 24,
+        padding: "0 10px",
+        border: "none",
+        borderRight: "1px solid var(--dsw-alias-border-l2, rgba(255,255,255,.12))",
+        borderRadius: 0,
+        background: active ? "var(--dsw-alias-interactive-bg-hover-accent, rgba(99,102,241,.18))" : "transparent",
+        color: active ? "var(--dsw-alias-brand-primary, #8b7cf6)" : "var(--dsw-alias-label-secondary, #b3b8c2)",
+        whiteSpace: "nowrap",
+        cursor: options.disabled === true ? "not-allowed" : "pointer",
+        opacity: options.disabled === true ? 0.45 : 1,
+      },
+      disabled: options.disabled === true,
+      title: options.title,
+      onClick,
+    }, label);
+    const iconButton = (glyph, title, onClick) => createElement("button", {
+      className: "dsh-obs-mini",
+      style: { flex: "none", width: "auto", height: 24, minWidth: 24, padding: "0 4px" },
+      title,
+      onClick,
+    }, glyph);
+
+    const head = createElement("div", {
+      className: "dsh-obs-graph-head",
+      title: t("graphMove"),
+      onMouseDown: beginPanelDrag,
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        padding: "8px 12px",
+        borderBottom: "1px solid var(--dsw-alias-border-l2, rgba(255,255,255,.12))",
+        cursor: "move",
+        userSelect: "none",
+        flex: "none",
+      },
+    },
+      createElement("div", {
+        className: "dsh-obs-graph-title",
+        style: { whiteSpace: "nowrap", flex: "none" },
+      }, `🕸 ${t("graph")}`),
+      data !== null && createElement("div", {
+        className: "dsh-obs-graph-stats",
+        style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: "0 1 auto" },
+      }, t("graphStats", { notes: data.stats.notes, tags: data.stats.tags, edges: data.stats.edges })),
+      // 右侧控制区整体作为一块：分段按钮组（全库/局部/聚焦）+ 局部跳数 + 图标按钮
+      createElement("div", {
+        style: { display: "flex", alignItems: "center", gap: 10, marginLeft: "auto", flex: "none" },
+      },
+        createElement("div", {
+          className: "dsh-obs-graph-modes",
+          style: {
+            display: "flex",
+            alignItems: "center",
+            flex: "none",
+            border: "1px solid var(--dsw-alias-border-l2, rgba(255,255,255,.12))",
+            borderRadius: 8,
+            overflow: "hidden",
+            width: "auto",
+          },
+        },
+          modeButton(t("graphGlobal"), mode === "global", () => setMode("global")),
+          modeButton(t("graphLocal"), mode === "local", () => setMode("local"), {
+            disabled: !localAvailable,
+            title: localAvailable ? t("graphLocalHint") : t("graphNoNote"),
+          }),
+          modeButton(t("graphFocus"), false, () => {
+            if (!localAvailable) return;
+            setMode("local");
+            setFitKey((v) => v + 1);
+          }, {
+            disabled: !localAvailable,
+            title: localAvailable ? t("graphFocusHint") : t("graphNoNote"),
+          }),
+        ),
+        // 局部模式：跳数（与 Obsidian 局部图谱 depth 滑杆同范围 1–5）
+        mode === "local" && createElement("span", {
+          className: "dsh-obs-graph-depth",
+          style: { display: "flex", alignItems: "center", gap: 2, flex: "none" },
+          title: t("graphDepthHint"),
+        },
+          createElement("span", {
+            className: "dsh-obs-graph-depth-label",
+            style: { fontSize: 11, marginRight: 2, whiteSpace: "nowrap" },
+          }, t("graphDepth")),
+          [1, 2, 3, 4, 5].map((depth) => createElement("button", {
+            key: depth,
+            className: `dsh-obs-mini${localDepth === depth ? " dsh-obs-on" : ""}`,
+            style: { flex: "none", width: "auto", height: 24, minWidth: 22, padding: "0 5px", whiteSpace: "nowrap" },
+            onClick: () => setLocalDepth(depth),
+          }, String(depth))),
+        ),
+        createElement("div", { style: { display: "flex", alignItems: "center", gap: 2, flex: "none" } },
+          iconButton("↻", t("graphRerun"), () => setSeed((v) => v + 1)),
+          iconButton("⟳", t("graphRefresh"), () => setReloadKey((v) => v + 1)),
+          iconButton("✕", t("graphClose"), onClose),
+        ),
+      ),
+    );
+
+    let body;
+    if (loading) {
+      body = createElement("div", { className: "dsh-obs-graph-empty" },
+        buildProgress !== null
+          ? t("graphBuilding", { done: buildProgress.done, total: buildProgress.total })
+          : t("graphLoading"));
+    } else if (error !== "") {
+      body = createElement("div", { className: "dsh-obs-graph-error" },
+        createElement("div", { className: "dsh-obs-graph-error-icon" }, "⚠️"),
+        createElement("div", { className: "dsh-obs-graph-error-title" }, t("graphErrorTitle")),
+        createElement("div", { className: "dsh-obs-graph-error-text" }, t("graphError", { msg: error })),
+        createElement("div", { className: "dsh-obs-graph-error-actions" },
+          createElement("button", { className: "dsh-obs-primary", onClick: () => setReloadKey((v) => v + 1) }, `↻ ${t("graphRetry")}`),
+          createElement("button", {
+            onClick: () => setDetailsOpen((v) => !v),
+          }, detailsOpen ? t("graphDetailsHide") : t("graphDetails")),
+        ),
+        detailsOpen && createElement("pre", { className: "dsh-obs-graph-error-details" }, error),
+      );
+    } else if (plan.nodes.length === 0) {
+      body = createElement("div", { className: "dsh-obs-graph-empty" },
+        mode === "local" ? t("graphNoNote") : t("graphEmpty"));
+    } else {
+      const planById = new Map(plan.nodes.map((node) => [node.id, node]));
+      body = createElement("div", {
+        ref: wrapRef,
+        className: "dsh-obs-graph-canvas",
+        style: { position: "relative", flex: 1, minHeight: 0, overflow: "hidden", cursor: "grab" },
+        onWheel,
+        onMouseDown,
+        onMouseMove,
+        onMouseUp: endDrag,
+        onMouseLeave: endDrag,
+      },
+        createElement("svg", { className: "dsh-obs-graph-svg" },
+          createElement("g", { transform: `translate(${transform.x},${transform.y}) scale(${transform.s})` },
+            shown.edges.map((edge) => {
+              const a = planById.get(edge.source);
+              const b = planById.get(edge.target);
+              if (!a || !b) return null;
+              const active = neighbourSet !== null && (neighbourSet.has(edge.source) || neighbourSet.has(edge.target));
+              return createElement("line", {
+                key: `${edge.source}-${edge.target}`,
+                className: `dsh-obs-graph-edge${active ? " dsh-obs-graph-edge-on" : ""}`,
+                x1: a.x,
+                y1: a.y,
+                x2: b.x,
+                y2: b.y,
+              });
+            }),
+            plan.nodes.map((node) => {
+              const isTag = node.kind === "tag";
+              const radius = isTag ? 7 : 4 + Math.min(9, node.degree * 1.5);
+              const dim = neighbourSet !== null && !neighbourSet.has(node.id);
+              const cls = `dsh-obs-graph-node ${isTag ? "dsh-obs-graph-tag" : "dsh-obs-graph-note"}`
+                + `${node.id === hovered ? " dsh-obs-graph-sel" : ""}${dim ? " dsh-obs-graph-dim" : ""}`
+                + `${focusId !== null && node.id === focusId ? " dsh-obs-graph-focus" : ""}`;
+              const label = showAllLabels || node.degree >= 5 || node.id === hovered
+                ? fitLabel(node.label, 26)
+                : "";
+              return createElement("g", {
+                key: node.id,
+                className: cls,
+                transform: `translate(${node.x},${node.y})`,
+                onMouseEnter: () => setHovered(node.id),
+                onMouseLeave: () => setHovered(null),
+                onClick: (e) => {
+                  if (e && e.stopPropagation) e.stopPropagation();
+                  if (!isTag && onOpenNote) onOpenNote(node.path, node.label);
+                  else setHovered(node.id);
+                },
+              },
+                createElement(isTag ? "rect" : "circle", isTag
+                  ? { x: -radius, y: -radius, width: radius * 2, height: radius * 2, rx: 3 }
+                  : { r: radius }),
+                createElement("title", null, node.label),
+                label !== "" && createElement("text", { x: radius + 6, y: 4 }, label),
+              );
+            }),
+          ),
+        ),
+      );
+    }
+
+    const truncatedNote = plan.truncated ? t("graphTruncated", { n: plan.nodes.length }) : t("graphHint");
+    // 关键布局全部走内联样式：即使插件的 <style> 注入失败（旧 bundle / 特殊宿主），
+    // 面板也不会变成左上角裸文本；z-index 也内联，避免被宿主容器压住。
+    const defaultX = typeof window !== "undefined"
+      ? Math.max(16, Math.round((window.innerWidth - geometry.width) / 2))
+      : 80;
+    const style = {
+      position: "fixed",
+      left: geometry.x === null ? defaultX : geometry.x,
+      top: geometry.y,
+      width: geometry.width,
+      height: geometry.height,
+      zIndex: 2147483000,
+      display: "flex",
+      flexDirection: "column",
+      boxSizing: "border-box",
+      overflow: "hidden",
+      background: "var(--dsw-alias-bg-overlay, #1f2328)",
+      color: "var(--dsw-alias-label-primary, #e6e6e6)",
+      border: "1px solid var(--dsw-alias-border-l2, rgba(255,255,255,.15))",
+      borderRadius: 14,
+      boxShadow: "0 24px 64px rgba(0,0,0,.45)",
+    };
+    return createElement("div", {
+      className: "dsh-obs-graph",
+      role: "dialog",
+      "aria-label": t("graph"),
+      style,
+    },
+      head,
+      body,
+      createElement("div", {
+        className: "dsh-obs-graph-hint",
+        style: {
+          flex: "none",
+          display: "flex",
+          alignItems: "center",
+          gap: 12,
+          padding: "6px 14px",
+          borderTop: "1px solid var(--dsw-alias-border-l2, rgba(255,255,255,.12))",
+          fontSize: 11,
+          color: "var(--dsw-alias-label-tertiary, #9aa0aa)",
+        },
+      },
+        createElement("span", {
+          style: { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", flex: "0 1 auto" },
+        }, truncatedNote),
+        createElement("span", {
+          className: "dsh-obs-graph-legend",
+          style: { display: "flex", alignItems: "center", gap: 10, flex: "none", marginLeft: "auto", whiteSpace: "nowrap" },
+        },
+          createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: 4 } },
+            createElement("span", { className: "dsh-obs-legend-dot" }), t("graphLegendNote")),
+          createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: 4 } },
+            createElement("span", { className: "dsh-obs-legend-tag" }), t("graphLegendTag")),
+          createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: 4 } },
+            createElement("span", { className: "dsh-obs-legend-focus" }), t("graphLegendFocus")),
+          createElement("span", { style: { display: "inline-flex", alignItems: "center", gap: 4 } },
+            createElement("span", { className: "dsh-obs-legend-link" }), t("graphLegendLink")),
+        ),
+      ),
+      createElement("div", { className: "dsh-obs-graph-resize", title: t("resize"), onMouseDown: beginPanelResize }),
+    );
+  }
+
+  /** shell.overlay 包装：只有 shared.graphOpen 时才挂载 GraphView（关闭即卸载）。 */
+  function GraphOverlay({ t }) {
+    const { graphOpen, openNote } = useShared();
+    if (!graphOpen) return null;
+    return createElement(GraphView, {
+      t,
+      currentNote: openNote,
+      onOpenNote: (rel, name) => patchShared({ openNote: { rel, name } }),
+      onClose: () => patchShared({ graphOpen: false }),
+    });
+  }
+
   // ── 右侧笔记 Dock（shell.overlay）──────────────────────────────────────────
+
+  /**
+   * 思维导图视图（B1）：把 note.content 的标题/列表画成横向树。
+   * - 滚轮缩放（以指针为中心）/ 拖动平移；
+   * - 单击节点：选中并显示操作条（跳到源码行 / 把分支插入对话）；
+   * - 双击节点：直接跳到该节点的源码行。
+   */
+  function MindMapView({ note, t, onJumpLine, onAskBranch }) {
+    const tree = useMemo(
+      () => mindMapModule.buildTree(note.content, { title: note.name.replace(/\.md$/i, "") }),
+      [note.content, note.name],
+    );
+    const plan = useMemo(() => mindMapModule.layout(tree), [tree]);
+    const [viewState, setViewState] = useState({ x: 0, y: 14, s: 1 });
+    const [selected, setSelected] = useState(null);
+    const dragRef = useRef(null);
+    const wrapRef = useRef(null);
+    const hasNodes = plan.nodes.length > 1;
+
+    // 初始把整张导图缩放进 Dock 可视区（导图比面板宽，不 fit 只能看到最左一列）
+    useEffect(() => {
+      const el = wrapRef.current;
+      if (!el || !hasNodes) return;
+      const w = el.clientWidth || 480;
+      const h = el.clientHeight || 320;
+      // 横向导图比面板宽：只按高度适配（保持字号可读），横向靠拖动平移
+      const fit = Math.min(1, (h - 28) / plan.height);
+      setViewState({
+        x: 10,
+        y: Math.max(10, (h - plan.height * fit) / 2),
+        s: fit,
+      });
+    }, [plan, hasNodes]);
+
+    // SVG 无自动省略：按估算字宽截断，完整文本放 <title> 悬停显示
+    const fitText = (text, width) => {
+      const maxUnits = Math.max(6, Math.floor((width - 26) / 7.2));
+      let out = "";
+      let units = 0;
+      for (const ch of text) {
+        const u = /[\u2E80-\u9FFF\uF900-\uFAFF\u3000-\u303F\uFF00-\uFFEF]/.test(ch) ? 2 : 1;
+        if (units + u > maxUnits) return `${out}…`;
+        out += ch;
+        units += u;
+      }
+      return out;
+    };
+
+    const onWheel = useCallback((e) => {
+      if (!hasNodes) return;
+      if (e.cancelable !== false && e.preventDefault) e.preventDefault();
+      const rect = e.currentTarget && e.currentTarget.getBoundingClientRect
+        ? e.currentTarget.getBoundingClientRect()
+        : { left: 0, top: 0 };
+      const px = (e.clientX || 0) - rect.left;
+      const py = (e.clientY || 0) - rect.top;
+      setViewState((prev) => {
+        const next = Math.min(2.6, Math.max(0.35, prev.s * (e.deltaY > 0 ? 0.88 : 1.14)));
+        const k = next / prev.s;
+        return { s: next, x: px - (px - prev.x) * k, y: py - (py - prev.y) * k };
+      });
+    }, [hasNodes]);
+
+    const onMouseDown = useCallback((e) => {
+      if (e.button !== undefined && e.button !== 0) return;
+      dragRef.current = { x: e.clientX, y: e.clientY, ox: viewState.x, oy: viewState.y };
+    }, [viewState.x, viewState.y]);
+    const onMouseMove = useCallback((e) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      setViewState((prev) => ({ ...prev, x: drag.ox + (e.clientX - drag.x), y: drag.oy + (e.clientY - drag.y) }));
+    }, []);
+    const endDrag = useCallback(() => { dragRef.current = null; }, []);
+
+    if (!hasNodes) {
+      return createElement("div", { className: "dsh-obs-map-empty" }, t("mapEmpty"));
+    }
+
+    const selectedNode = selected !== null ? plan.byId[selected] : null;
+    return createElement("div", {
+      ref: wrapRef,
+      className: "dsh-obs-map",
+      onWheel,
+      onMouseDown,
+      onMouseMove,
+      onMouseUp: endDrag,
+      onMouseLeave: endDrag,
+    },
+      createElement("svg", { className: "dsh-obs-map-svg" },
+        createElement("g", { transform: `translate(${viewState.x},${viewState.y}) scale(${viewState.s})` },
+          plan.edges.map((edge) => {
+            const a = plan.byId[edge.from];
+            const b = plan.byId[edge.to];
+            if (!a || !b) return null;
+            const x1 = a.x + a.w;
+            const x2 = b.x;
+            const mx = (x1 + x2) / 2;
+            return createElement("path", {
+              key: `${edge.from}-${edge.to}`,
+              className: "dsh-obs-map-edge",
+              d: `M ${x1} ${a.y} C ${mx} ${a.y}, ${mx} ${b.y}, ${x2} ${b.y}`,
+            });
+          }),
+          plan.nodes.map((node) => createElement("g", {
+            key: node.id,
+            className: `dsh-obs-map-node dsh-obs-map-${node.kind}${selected === node.id ? " dsh-obs-map-sel" : ""}`,
+            transform: `translate(${node.x},${node.y - node.h / 2})`,
+            onClick: (e) => {
+              if (e && e.stopPropagation) e.stopPropagation();
+              setSelected(node.id);
+            },
+            onDoubleClick: (e) => {
+              if (e && e.stopPropagation) e.stopPropagation();
+              if (node.line > 0) onJumpLine(node.line);
+            },
+          },
+            createElement("rect", { width: node.w, height: node.h, rx: 9 }),
+            createElement("text", { x: 13, y: node.h / 2 + 5 }, fitText(node.text, node.w)),
+            createElement("title", null, node.text),
+          )),
+        ),
+      ),
+      selectedNode !== null && createElement("div", { className: "dsh-obs-map-actions" },
+        createElement("span", { className: "dsh-obs-map-line" }, `L${selectedNode.line}`),
+        createElement("button", {
+          onClick: () => onJumpLine(selectedNode.line),
+        }, `↩ ${t("mapJump")}`),
+        createElement("button", {
+          className: "dsh-obs-primary",
+          onClick: () => onAskBranch(selectedNode),
+        }, `⤴ ${t("mapAsk")}`),
+      ),
+      createElement("div", { className: "dsh-obs-map-hint" }, t("mapHint")),
+    );
+  }
+
   function Dock({ t, workspaces }) {
     const { openNote, vaultRev } = useShared();
     const [note, setNote] = useState(null);
     const [root, setRoot] = useState("");
     const [editing, setEditing] = useState(false);
+    // 视图：预览（行号）/ 思维导图；编辑态始终是编辑器
+    const [view, setView] = useState("preview");
+    const [jumpLine, setJumpLine] = useState(null);
     const [draft, setDraft] = useState("");
     const [saving, setSaving] = useState(false);
     const [error, setError] = useState("");
@@ -2852,6 +3685,60 @@
       patchShared({ openNote: { rel: found.path, name: found.name } });
     }, [editing, draft, note, t]);
 
+    /** 思维导图 → 预览：跳到源码行并短暂高亮（行元素带 data-line）。 */
+    const jumpToLine = useCallback((line) => {
+      if (!line || line < 1) return;
+      setView("preview");
+      setJumpLine(line);
+    }, []);
+
+    /** 思维导图 → 对话：把「该节点 + 全部后代」的源码区间按选区提问同款 prompt 插入输入框。 */
+    const askBranch = useCallback((node) => {
+      if (!note) return;
+      const span = mindMapModule.branchSpan(note.content, node);
+      const prompt = buildPrompt(
+        t,
+        treeApi.absPath(note.path, root),
+        note.content,
+        { text: span.text, start: span.start, end: span.end, mode: "preview" },
+        "",
+      );
+      if (injectPrompt(prompt)) {
+        showToast(t("branchCited", { n: span.endLine - span.startLine + 1 }));
+        return;
+      }
+      try {
+        if (typeof navigator !== "undefined" && navigator.clipboard && typeof navigator.clipboard.writeText === "function") {
+          navigator.clipboard.writeText(prompt).then(() => showToast(t("noInput"))).catch(() => showToast(t("citeFail")));
+        } else {
+          showToast(t("citeFail"));
+        }
+      } catch {
+        showToast(t("citeFail"));
+      }
+    }, [note, t, root]);
+
+    // 切笔记时回到预览态（避免上一份笔记的导图/跳转状态残留）
+    useEffect(() => {
+      setView("preview");
+      setJumpLine(null);
+    }, [openNote]);
+
+    // 预览行高亮：跳到行号后滚动到该行并闪一下（1.8s 后恢复）
+    useEffect(() => {
+      if (jumpLine === null || view !== "preview" || !previewRef.current) return undefined;
+      const el = previewRef.current.querySelector(`[data-line="${jumpLine}"]`);
+      if (el) {
+        if (typeof el.scrollIntoView === "function") el.scrollIntoView({ block: "center" });
+        el.classList.add("dsh-obs-md-flash");
+      }
+      const timer = window.setTimeout(() => {
+        if (el) el.classList.remove("dsh-obs-md-flash");
+        setJumpLine(null);
+      }, 1800);
+      return () => window.clearTimeout(timer);
+    }, [jumpLine, view, note, vaultRev]);
+
     const dirty = editing && note !== null && draft !== note.content;
 
     // 编辑态行号（每行一个，对应源码行数；textarea 为 white-space:pre 无折行，行号与文本行一一对齐）
@@ -2875,6 +3762,11 @@
           createElement("span", null, "📝"),
           createElement("span", null, note ? note.name : openNote.name),
         ),
+        !editing && note && createElement("button", {
+          className: view === "map" ? "dsh-obs-on" : undefined,
+          title: view === "map" ? t("preview") : t("mindMap"),
+          onClick: () => setView((prev) => (prev === "map" ? "preview" : "map")),
+        }, view === "map" ? `📄 ${t("preview")}` : `🧠 ${t("mindMap")}`),
         !editing && note && createElement("button", { onClick: () => void cite() }, `⤴ ${t("cite")}`),
         !editing && note && createElement("button", { onClick: () => { setDraft(note.content); setEditing(true); } }, t("edit")),
         editing && createElement("button", {
@@ -2926,8 +3818,17 @@
               },
             }),
           )
-          : createElement("div", { className: "dsh-obs-dock-body" },
-            createElement("div", { ref: previewRef, className: "dsh-obs-md" },
+          : view === "map"
+            ? createElement("div", { className: "dsh-obs-dock-body dsh-obs-dock-map" },
+              createElement(MindMapView, {
+                note,
+                t,
+                onJumpLine: jumpToLine,
+                onAskBranch: askBranch,
+              }),
+            )
+            : createElement("div", { className: "dsh-obs-dock-body" },
+              createElement("div", { ref: previewRef, className: "dsh-obs-md" },
               renderNumbered(note.content, {
                 onWikilink: (target) => void openWikilink(target),
                 onText: () => {},
@@ -3216,10 +4117,15 @@
         { name: "shell.overlay", id: "obsidian-prompt", order: 6, label: "Obsidian text prompt", locale: NS },
         Prompt,
       );
+      const d4 = ctx.slots.register(
+        { name: "shell.overlay", id: "obsidian-graph", order: 32, label: "Obsidian relation graph", locale: NS },
+        GraphOverlay,
+      );
       return () => {
         d1();
         d2();
         d3();
+        d4();
       };
     });
   }