@civilization/dsh-drawio 0.1.0 → 0.2.0

package/README.md

@@ -5,7 +5,7 @@
 
 ## 边界
 
-- 不引入项目、目录或文件管理；继续使用 DSH 与 `dsh-better-sidebar`。
+- 不引入项目、目录或文件管理；直接使用 DSH 官方右侧栏与文件工作台。
 - 任意 `.drawio` 文件都由画板打开，可停靠、拆分或浮动。
 - 编辑器资源由 DSH Host 从本机提供，不连接 diagrams.net。
 - 用户保存和 Agent 工具修改的是同一份 XML 文件。
@@ -31,8 +31,11 @@ dsh plugin --profile web add D:\project\dsh-drawio --registry=https://registry.n
 dsh web --port 3082 --no-open
 ```
 
-已在 DSH 0.1.2-rc.1 与 dsh-better-sidebar 0.18.0 上验证构建、XML 操作、
-本地静态资源加载和 `.drawio` 画板打开；浏览器控制台无错误或警告。
+客户端只注入 DSH 官方的 `slots` 与 `sidebarRightTabs` 服务。文件工作台打开
+`.drawio` 文件时，由官方资源路由选择本插件的画板；读取和自动保存通过插件自有的
+`/dsh-drawio/api` 接口完成，并限制在当前会话工作区内。
 
-当前内置的精简 Draw.io runtime 固定为 31.4.5。基础图形、常用图形库和中文资源可用；
+已在 DSH 0.1.5-rc.2 上验证构建、XML 操作、本地静态资源加载和官方右侧栏注册。
+
+当前内置的精简 Draw.io runtime 固定为 31.4.5。包含完整满血版内置图库（通用、流程图、UML、ER、BPMN、网络、Kubernetes、AWS、GCP、Cisco、电子、平面图等全部分类均可自由开启）以及 PlantUML 离线渲染模块；
 云盘、在线图库、模板库、VSDX/Gliffy 导入和服务端导出未包含。

package/lib/client.js

@@ -28,20 +28,57 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var inject = ["betterSidebar"];
-var VIEWER_ID = "dsh-drawio:canvas";
+var inject = ["slots", "sidebarRightTabs"];
+var TAB_ID = "@civilization/dsh-drawio";
+var TAB_KIND = "drawio";
 function apply(ctx) {
-  const betterSidebar = ctx.betterSidebar;
-  if (!betterSidebar) return;
-  ctx.effect(() => betterSidebar.registerFileViewer({
-    id: VIEWER_ID,
-    title: () => "Draw.io \u753B\u677F",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CanvasIcon, {}),
-    exts: ["drawio"],
-    priority: 100,
-    fetchStrategy: "fsRead",
-    component: DrawioCanvas
-  }));
+  const official = ctx;
+  ctx.effect(() => official.sidebarRightTabs.register({
+    id: TAB_ID,
+    kind: TAB_KIND,
+    patterns: ["*.drawio"],
+    priority: "extension",
+    title: (address) => fileName(parseDrawioAddress(address)?.path ?? "Draw.io")
+  }), "dsh-drawio: official tab definition");
+  ctx.effect(() => official.slots.inject("sidebar.right.pane.tab", () => official.slots.register({
+    name: "sidebar.right.pane.tab",
+    key: TAB_ID
+  }, OfficialDrawioTabBody)), "dsh-drawio: official tab body");
+  ctx.effect(() => official.slots.inject("sidebar.right.pane.tab.title", () => official.slots.register({
+    name: "sidebar.right.pane.tab.title",
+    key: TAB_ID
+  }, OfficialDrawioTabTitle)), "dsh-drawio: official tab title");
+}
+function OfficialDrawioTabTitle({ useTabInfo }) {
+  const { tab } = useTabInfo();
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CanvasIcon, { size: 15 }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: tab.title })
+  ] });
+}
+function OfficialDrawioTabBody({ sessionId, useSessions, useTabInfo }) {
+  const { tab } = useTabInfo();
+  const cwd = useSessions((sessions) => sessions?.byId?.[sessionId]?.cwd);
+  const resource = (0, import_react.useMemo)(() => parseDrawioAddress(tab.navigation.address), [tab.navigation.address]);
+  const [file, setFile] = (0, import_react.useState)(null);
+  const [error, setError] = (0, import_react.useState)(null);
+  const key = `${sessionId}\0${cwd ?? ""}\0${resource?.path ?? ""}`;
+  (0, import_react.useEffect)(() => {
+    if (!resource || resource.sessionId !== sessionId || !cwd) return;
+    const controller = new AbortController();
+    setError(null);
+    void fsRead({ sessionId, cwd }, resource.path, controller.signal).then((content) => {
+      if (!controller.signal.aborted) setFile({ key, content });
+    }).catch((reason) => {
+      if (!controller.signal.aborted) setError(messageOf(reason));
+    });
+    return () => controller.abort();
+  }, [key, resource?.sessionId, resource?.path, sessionId, cwd]);
+  if (!resource || resource.sessionId !== sessionId) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CenteredMessage, { title: "\u65E0\u6CD5\u6253\u5F00\u753B\u677F", detail: "\u6587\u4EF6\u5730\u5740\u4E0D\u662F\u5F53\u524D\u4F1A\u8BDD\u4E2D\u7684 Draw.io \u6587\u4EF6\u3002" });
+  if (!cwd) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CenteredMessage, { title: "\u65E0\u6CD5\u6253\u5F00\u753B\u677F", detail: "\u5F53\u524D\u4F1A\u8BDD\u6CA1\u6709\u53EF\u7528\u7684\u5DE5\u4F5C\u533A\u3002" });
+  if (error) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CenteredMessage, { title: "\u753B\u677F\u8F7D\u5165\u5931\u8D25", detail: error });
+  if (file?.key !== key) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CenteredMessage, { title: "\u6B63\u5728\u8F7D\u5165\u753B\u677F", detail: fileName(resource.path) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DrawioCanvas, { content: file.content, path: resource.path, scope: { sessionId, cwd } });
 }
 function DrawioCanvas({ content, truncated, path, scope }) {
   const frame = (0, import_react.useRef)(null);
@@ -52,6 +89,8 @@ function DrawioCanvas({ content, truncated, path, scope }) {
   const [ready, setReady] = (0, import_react.useState)(false);
   const [saveState, setSaveState] = (0, import_react.useState)("loading");
   const [error, setError] = (0, import_react.useState)(truncated ? "\u6587\u4EF6\u8FC7\u5927\uFF0CDSH \u53EA\u8FD4\u56DE\u4E86\u622A\u65AD\u5185\u5BB9\uFF0C\u65E0\u6CD5\u5B89\u5168\u6253\u5F00\u3002" : null);
+  const lastUserActivity = (0, import_react.useRef)(0);
+  const isInteracting = (0, import_react.useRef)(false);
   const { dark, accent: accentColor } = useDshTheme();
   const src = (0, import_react.useMemo)(() => `/dsh-drawio/runtime/index.html?embed=1&proto=json&spin=1&offline=1&local=1&ui=min&libraries=1&configure=1&noExitBtn=1&saveAndExit=0&dark=${dark ? "1" : "0"}`, [dark]);
   const post = (0, import_react.useCallback)((message) => {
@@ -74,17 +113,55 @@ function DrawioCanvas({ content, truncated, path, scope }) {
     }
   }, [scope.sessionId, scope.cwd, path]);
   const scheduleSave = (0, import_react.useCallback)((xml, immediate = false) => {
+    lastUserActivity.current = Date.now();
     latestEditor.current = xml;
-    if (saveTimer.current !== void 0) window.clearTimeout(saveTimer.current);
-    if (immediate) void persist(xml);
-    else saveTimer.current = window.setTimeout(() => {
-      void persist(latestEditor.current);
-    }, 350);
+    if (saveTimer.current !== void 0) {
+      window.clearTimeout(saveTimer.current);
+      saveTimer.current = void 0;
+    }
+    if (immediate) {
+      void persist(xml);
+    } else {
+      saveTimer.current = window.setTimeout(() => {
+        saveTimer.current = void 0;
+        void persist(latestEditor.current);
+      }, 350);
+    }
   }, [persist]);
   (0, import_react.useEffect)(() => {
     latestFile.current = content ?? "";
     latestEditor.current = content ?? "";
   }, [content, path]);
+  const markActivity = (0, import_react.useCallback)(() => {
+    lastUserActivity.current = Date.now();
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const attached = /* @__PURE__ */ new WeakSet();
+    const handleFrameAttach = () => {
+      try {
+        const doc = frame.current?.contentDocument;
+        if (!doc || attached.has(doc)) return;
+        attached.add(doc);
+        const onDown = () => {
+          isInteracting.current = true;
+          lastUserActivity.current = Date.now();
+        };
+        const onUp = () => {
+          isInteracting.current = false;
+          lastUserActivity.current = Date.now();
+        };
+        const onKey = () => {
+          lastUserActivity.current = Date.now();
+        };
+        doc.addEventListener("pointerdown", onDown, true);
+        doc.addEventListener("pointerup", onUp, true);
+        doc.addEventListener("keydown", onKey, true);
+      } catch {
+      }
+    };
+    const timer = window.setInterval(handleFrameAttach, 800);
+    return () => window.clearInterval(timer);
+  }, []);
   (0, import_react.useEffect)(() => {
     setReady(false);
     setSaveState("loading");
@@ -97,7 +174,7 @@ function DrawioCanvas({ content, truncated, path, scope }) {
         return;
       }
       if (message.event === "configure") {
-        post({ action: "configure", config: { compressXml: false, enableCssDarkMode: true, defaultLibraries: "general;flowchart;basic;arrows2", enabledLibraries: ["general", "flowchart", "basic", "arrows2"] } });
+        post({ action: "configure", config: { compressXml: false, enableCssDarkMode: true, defaultLibraries: "general;uml;er;bpmn;flowchart;basic;arrows2", enabledLibraries: null } });
       } else if (message.event === "init") {
         post({ action: "load", xml: latestFile.current, autosave: 1, title: fileName(path), dark, noExitBtn: 1, saveAndExit: 0 });
         setReady(true);
@@ -113,9 +190,14 @@ function DrawioCanvas({ content, truncated, path, scope }) {
     if (!ready || truncated) return;
     let cancelled = false;
     const poll = async () => {
+      if (isInteracting.current) return;
+      if (Date.now() - lastUserActivity.current < 1500) return;
+      if (saveTimer.current !== void 0) return;
+      if (typeof document !== "undefined" && document.hidden) return;
       try {
         const xml = await fsRead(scope, path);
-        if (cancelled || xml === latestFile.current || xml === latestEditor.current) return;
+        if (cancelled || isInteracting.current || Date.now() - lastUserActivity.current < 1200) return;
+        if (xml === latestFile.current || xml === latestEditor.current) return;
         latestFile.current = xml;
         latestEditor.current = xml;
         post({ action: "load", xml, autosave: 1, title: fileName(path), dark, noExitBtn: 1, saveAndExit: 0 });
@@ -129,7 +211,7 @@ function DrawioCanvas({ content, truncated, path, scope }) {
     };
     const timer = window.setInterval(() => {
       void poll();
-    }, 1600);
+    }, 2500);
     return () => {
       cancelled = true;
       window.clearInterval(timer);
@@ -187,22 +269,21 @@ function detectDark() {
   if (numbers?.length === 3) return numbers[0] * 0.299 + numbers[1] * 0.587 + numbers[2] * 0.114 < 128;
   return document.documentElement.classList.contains("dark") || window.matchMedia("(prefers-color-scheme: dark)").matches;
 }
-async function fsRead(scope, path) {
-  const value = await call("fs.read", scope, { path });
-  if (value.kind !== "text" || value.truncated) throw new Error("Draw.io \u6587\u4EF6\u4E0D\u662F\u5B8C\u6574\u7684 UTF-8 \u6587\u672C\u3002");
-  return value.content ?? "";
+async function fsRead(scope, path, signal) {
+  const value = await call("read", scope, { path }, false, signal);
+  return value.content;
 }
 async function fsWrite(scope, path, content, keepalive = false) {
-  await call("fs.write", scope, { path, content }, keepalive);
+  await call("write", scope, { path, content }, keepalive);
 }
-async function call(method, scope, extra, keepalive = false) {
-  const response = await fetch(`/sidebar/api/${method}`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ sessionId: scope.sessionId, ...scope.cwd ? { cwd: scope.cwd } : {}, ...extra }), keepalive });
+async function call(method, scope, extra, keepalive = false, signal) {
+  const response = await fetch(`/dsh-drawio/api/${method}`, { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify({ sessionId: scope.sessionId, ...scope.cwd ? { cwd: scope.cwd } : {}, ...extra }), keepalive, signal });
   const envelope = await response.json().catch(() => null);
   if (!response.ok || envelope?.ok !== true || envelope.value === void 0) throw new Error(envelope?.error?.message ?? `HTTP ${response.status}`);
   return envelope.value;
 }
-function CanvasIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { "aria-hidden": true, viewBox: "0 0 20 20", width: "16", height: "16", fill: "none", children: [
+function CanvasIcon({ size = 16, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { className, "aria-hidden": true, viewBox: "0 0 20 20", width: size, height: size, fill: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "2.5", y: "2.5", width: "15", height: "15", rx: "2.5", stroke: "currentColor" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "7", cy: "7", r: "1.5", fill: "currentColor" }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "13", cy: "13", r: "1.5", fill: "currentColor" }),
@@ -216,6 +297,19 @@ function CenteredMessage({ title, detail }) {
   ] });
 }
 var fileName = (path) => path.replace(/\\/g, "/").split("/").pop() || path;
+function parseDrawioAddress(address) {
+  const prefix = "dsh-resource://file/session/";
+  if (!address.startsWith(prefix)) return null;
+  try {
+    const parts = address.slice(prefix.length).split("/").map(decodeURIComponent);
+    const sessionId = parts.shift() ?? "";
+    const path = parts.join("/");
+    if (!sessionId || !path || !/\.drawio$/i.test(path) || parts.some((part) => part.includes("/") || part.includes("\\") || part.includes("\0"))) return null;
+    return { sessionId, path };
+  } catch {
+    return null;
+  }
+}
 var messageOf = (reason) => reason instanceof Error ? reason.message : String(reason);
 var statusText = (state) => state === "loading" ? "\u6B63\u5728\u8F7D\u5165" : state === "saving" ? "\u6B63\u5728\u4FDD\u5B58" : state === "external" ? "\u5DF2\u540C\u6B65 AI \u4FEE\u6539" : state === "error" ? "\u4FDD\u5B58\u5931\u8D25" : "\u5DF2\u4FDD\u5B58";
 var fg = "var(--dsw-alias-label-primary, currentColor)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@civilization/dsh-drawio",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Local draw.io canvas and model tools for DeepSeek Harness",
   "license": "Apache-2.0",
   "type": "module",
@@ -59,8 +59,7 @@
     "@deepseek-ai/dsh-fs": "^0.1.2-rc.1",
     "@deepseek-ai/dsh-host-webserver": "^0.1.2-rc.1",
     "@deepseek-ai/dsh-sandbox": "^0.1.2-rc.1",
-    "@deepseek-ai/dsh-tools": "^0.1.2-rc.1",
-    "dsh-better-sidebar": ">=0.18.0"
+    "@deepseek-ai/dsh-tools": "^0.1.2-rc.1"
   },
   "devDependencies": {
     "@deepseek-ai/cordis": "4.0.2",
@@ -69,7 +68,6 @@
     "@deepseek-ai/dsh-sandbox": "0.1.2-rc.1",
     "@deepseek-ai/dsh-tools": "0.1.2-rc.1",
     "@types/react": "18.3.31",
-    "dsh-better-sidebar": "0.18.0",
     "esbuild": "0.28.2",
     "react": "18.3.1",
     "typescript": "5.9.3"

package/src/client/index.tsx

@@ -1,23 +1,61 @@
 import type { Context } from '@deepseek-ai/cordis'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import type {} from 'dsh-better-sidebar'
-import type { FileViewerProps, SessionScope } from 'dsh-better-sidebar/client/service'
 
-export const inject = ['betterSidebar']
-const VIEWER_ID = 'dsh-drawio:canvas'
+export const inject = ['slots', 'sidebarRightTabs']
+const TAB_ID = '@civilization/dsh-drawio'
+const TAB_KIND = 'drawio'
+
+interface SessionScope { sessionId: string; cwd?: string }
+interface FileViewerProps { content?: string; truncated?: boolean; path: string; scope: SessionScope }
+interface OfficialContext extends Context { slots: any; sidebarRightTabs: any }
 
 export function apply(ctx: Context): void {
-  const betterSidebar = ctx.betterSidebar
-  if (!betterSidebar) return
-  ctx.effect(() => betterSidebar.registerFileViewer({
-    id: VIEWER_ID,
-    title: () => 'Draw.io 画板',
-    icon: <CanvasIcon />,
-    exts: ['drawio'],
-    priority: 100,
-    fetchStrategy: 'fsRead',
-    component: DrawioCanvas,
-  }))
+  const official = ctx as OfficialContext
+  ctx.effect(() => official.sidebarRightTabs.register({
+    id: TAB_ID,
+    kind: TAB_KIND,
+    patterns: ['*.drawio'],
+    priority: 'extension',
+    title: (address: string) => fileName(parseDrawioAddress(address)?.path ?? 'Draw.io'),
+  }), 'dsh-drawio: official tab definition')
+  ctx.effect(() => official.slots.inject('sidebar.right.pane.tab', () => official.slots.register({
+    name: 'sidebar.right.pane.tab',
+    key: TAB_ID,
+  }, OfficialDrawioTabBody)), 'dsh-drawio: official tab body')
+  ctx.effect(() => official.slots.inject('sidebar.right.pane.tab.title', () => official.slots.register({
+    name: 'sidebar.right.pane.tab.title',
+    key: TAB_ID,
+  }, OfficialDrawioTabTitle)), 'dsh-drawio: official tab title')
+}
+
+function OfficialDrawioTabTitle({ useTabInfo }: any): JSX.Element {
+  const { tab } = useTabInfo()
+  return <><CanvasIcon size={15} /><span>{tab.title}</span></>
+}
+
+function OfficialDrawioTabBody({ sessionId, useSessions, useTabInfo }: any): JSX.Element {
+  const { tab } = useTabInfo()
+  const cwd = useSessions((sessions: any) => sessions?.byId?.[sessionId]?.cwd) as string | undefined
+  const resource = useMemo(() => parseDrawioAddress(tab.navigation.address), [tab.navigation.address])
+  const [file, setFile] = useState<{ key: string; content: string } | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const key = `${sessionId}\0${cwd ?? ''}\0${resource?.path ?? ''}`
+
+  useEffect(() => {
+    if (!resource || resource.sessionId !== sessionId || !cwd) return
+    const controller = new AbortController()
+    setError(null)
+    void fsRead({ sessionId, cwd }, resource.path, controller.signal)
+      .then(content => { if (!controller.signal.aborted) setFile({ key, content }) })
+      .catch(reason => { if (!controller.signal.aborted) setError(messageOf(reason)) })
+    return () => controller.abort()
+  }, [key, resource?.sessionId, resource?.path, sessionId, cwd])
+
+  if (!resource || resource.sessionId !== sessionId) return <CenteredMessage title="无法打开画板" detail="文件地址不是当前会话中的 Draw.io 文件。" />
+  if (!cwd) return <CenteredMessage title="无法打开画板" detail="当前会话没有可用的工作区。" />
+  if (error) return <CenteredMessage title="画板载入失败" detail={error} />
+  if (file?.key !== key) return <CenteredMessage title="正在载入画板" detail={fileName(resource.path)} />
+  return <DrawioCanvas content={file.content} path={resource.path} scope={{ sessionId, cwd }} />
 }
 
 function DrawioCanvas({ content, truncated, path, scope }: FileViewerProps): JSX.Element {
@@ -29,6 +67,8 @@ function DrawioCanvas({ content, truncated, path, scope }: FileViewerProps): JSX
   const [ready, setReady] = useState(false)
   const [saveState, setSaveState] = useState<'loading' | 'saved' | 'saving' | 'external' | 'error'>('loading')
   const [error, setError] = useState<string | null>(truncated ? '文件过大，DSH 只返回了截断内容，无法安全打开。' : null)
+  const lastUserActivity = useRef(0)
+  const isInteracting = useRef(false)
   const { dark, accent: accentColor } = useDshTheme()
   const src = useMemo(() => `/dsh-drawio/runtime/index.html?embed=1&proto=json&spin=1&offline=1&local=1&ui=min&libraries=1&configure=1&noExitBtn=1&saveAndExit=0&dark=${dark ? '1' : '0'}`, [dark])
 
@@ -54,10 +94,20 @@ function DrawioCanvas({ content, truncated, path, scope }: FileViewerProps): JSX
   }, [scope.sessionId, scope.cwd, path])
 
   const scheduleSave = useCallback((xml: string, immediate = false) => {
+    lastUserActivity.current = Date.now()
     latestEditor.current = xml
-    if (saveTimer.current !== undefined) window.clearTimeout(saveTimer.current)
-    if (immediate) void persist(xml)
-    else saveTimer.current = window.setTimeout(() => { void persist(latestEditor.current) }, 350)
+    if (saveTimer.current !== undefined) {
+      window.clearTimeout(saveTimer.current)
+      saveTimer.current = undefined
+    }
+    if (immediate) {
+      void persist(xml)
+    } else {
+      saveTimer.current = window.setTimeout(() => {
+        saveTimer.current = undefined
+        void persist(latestEditor.current)
+      }, 350)
+    }
   }, [persist])
 
   useEffect(() => {
@@ -65,6 +115,38 @@ function DrawioCanvas({ content, truncated, path, scope }: FileViewerProps): JSX
     latestEditor.current = content ?? ''
   }, [content, path])
 
+  const markActivity = useCallback(() => {
+    lastUserActivity.current = Date.now()
+  }, [])
+
+  useEffect(() => {
+    const attached = new WeakSet<Document>()
+    const handleFrameAttach = () => {
+      try {
+        const doc = frame.current?.contentDocument
+        if (!doc || attached.has(doc)) return
+        attached.add(doc)
+        const onDown = () => {
+          isInteracting.current = true
+          lastUserActivity.current = Date.now()
+        }
+        const onUp = () => {
+          isInteracting.current = false
+          lastUserActivity.current = Date.now()
+        }
+        const onKey = () => {
+          lastUserActivity.current = Date.now()
+        }
+        // 仅在用户按住拖拽、松手或输入时感知，单纯鼠标移动(hover)不打断
+        doc.addEventListener('pointerdown', onDown, true)
+        doc.addEventListener('pointerup', onUp, true)
+        doc.addEventListener('keydown', onKey, true)
+      } catch {}
+    }
+    const timer = window.setInterval(handleFrameAttach, 800)
+    return () => window.clearInterval(timer)
+  }, [])
+
   useEffect(() => {
     setReady(false)
     setSaveState('loading')
@@ -74,7 +156,7 @@ function DrawioCanvas({ content, truncated, path, scope }: FileViewerProps): JSX
       try { message = typeof event.data === 'string' ? JSON.parse(event.data) : event.data }
       catch { return }
       if (message.event === 'configure') {
-        post({ action: 'configure', config: { compressXml: false, enableCssDarkMode: true, defaultLibraries: 'general;flowchart;basic;arrows2', enabledLibraries: ['general', 'flowchart', 'basic', 'arrows2'] } })
+        post({ action: 'configure', config: { compressXml: false, enableCssDarkMode: true, defaultLibraries: 'general;uml;er;bpmn;flowchart;basic;arrows2', enabledLibraries: null } })
       } else if (message.event === 'init') {
         post({ action: 'load', xml: latestFile.current, autosave: 1, title: fileName(path), dark, noExitBtn: 1, saveAndExit: 0 })
         setReady(true)
@@ -91,9 +173,21 @@ function DrawioCanvas({ content, truncated, path, scope }: FileViewerProps): JSX
     if (!ready || truncated) return
     let cancelled = false
     const poll = async () => {
+      // 1. 用户按住鼠标拖拽中，绝不读取
+      if (isInteracting.current) return
+      // 2. 刚松手或打字后 1.5 秒内（操作缓冲），暂停轮询
+      if (Date.now() - lastUserActivity.current < 1500) return
+      // 3. 本地正在防抖保存中，不从磁盘读取
+      if (saveTimer.current !== undefined) return
+      // 4. 浏览器标签页切后台时静默
+      if (typeof document !== 'undefined' && document.hidden) return
+
       try {
         const xml = await fsRead(scope, path)
-        if (cancelled || xml === latestFile.current || xml === latestEditor.current) return
+        // 5. 响应返回后二次防护：若这期间用户按下了鼠标或开始拖动，果断丢弃本次结果
+        if (cancelled || isInteracting.current || Date.now() - lastUserActivity.current < 1200) return
+        if (xml === latestFile.current || xml === latestEditor.current) return
+
         latestFile.current = xml
         latestEditor.current = xml
         post({ action: 'load', xml, autosave: 1, title: fileName(path), dark, noExitBtn: 1, saveAndExit: 0 })
@@ -103,7 +197,8 @@ function DrawioCanvas({ content, truncated, path, scope }: FileViewerProps): JSX
         if (!cancelled) setError(messageOf(reason))
       }
     }
-    const timer = window.setInterval(() => { void poll() }, 1600)
+    // 空闲时每 2.5 秒正常读取一次
+    const timer = window.setInterval(() => { void poll() }, 2500)
     return () => { cancelled = true; window.clearInterval(timer) }
   }, [ready, truncated, scope.sessionId, scope.cwd, path, dark, post])
 
@@ -165,25 +260,24 @@ function detectDark(): boolean {
   return document.documentElement.classList.contains('dark') || window.matchMedia('(prefers-color-scheme: dark)').matches
 }
 
-async function fsRead(scope: SessionScope, path: string): Promise<string> {
-  const value = await call<{ kind: string; content?: string; truncated?: boolean }>('fs.read', scope, { path })
-  if (value.kind !== 'text' || value.truncated) throw new Error('Draw.io 文件不是完整的 UTF-8 文本。')
-  return value.content ?? ''
+async function fsRead(scope: SessionScope, path: string, signal?: AbortSignal): Promise<string> {
+  const value = await call<{ content: string }>('read', scope, { path }, false, signal)
+  return value.content
 }
 
 async function fsWrite(scope: SessionScope, path: string, content: string, keepalive = false): Promise<void> {
-  await call('fs.write', scope, { path, content }, keepalive)
+  await call('write', scope, { path, content }, keepalive)
 }
 
-async function call<T = { ok: true }>(method: string, scope: SessionScope, extra: Record<string, unknown>, keepalive = false): Promise<T> {
-  const response = await fetch(`/sidebar/api/${method}`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ sessionId: scope.sessionId, ...(scope.cwd ? { cwd: scope.cwd } : {}), ...extra }), keepalive })
+async function call<T = { ok: true }>(method: string, scope: SessionScope, extra: Record<string, unknown>, keepalive = false, signal?: AbortSignal): Promise<T> {
+  const response = await fetch(`/dsh-drawio/api/${method}`, { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ sessionId: scope.sessionId, ...(scope.cwd ? { cwd: scope.cwd } : {}), ...extra }), keepalive, signal })
   const envelope = await response.json().catch(() => null) as { ok?: boolean; value?: T; error?: { message?: string } } | null
   if (!response.ok || envelope?.ok !== true || envelope.value === undefined) throw new Error(envelope?.error?.message ?? `HTTP ${response.status}`)
   return envelope.value
 }
 
-function CanvasIcon(): JSX.Element {
-  return <svg aria-hidden viewBox="0 0 20 20" width="16" height="16" fill="none"><rect x="2.5" y="2.5" width="15" height="15" rx="2.5" stroke="currentColor"/><circle cx="7" cy="7" r="1.5" fill="currentColor"/><circle cx="13" cy="13" r="1.5" fill="currentColor"/><path d="M8.4 7.8l3.2 4.4M8.2 6.2h3.6M6.2 8.2v3.6" stroke="currentColor" strokeLinecap="round"/></svg>
+function CanvasIcon({ size = 16, className }: { size?: number; className?: string }): JSX.Element {
+  return <svg className={className} aria-hidden viewBox="0 0 20 20" width={size} height={size} fill="none"><rect x="2.5" y="2.5" width="15" height="15" rx="2.5" stroke="currentColor"/><circle cx="7" cy="7" r="1.5" fill="currentColor"/><circle cx="13" cy="13" r="1.5" fill="currentColor"/><path d="M8.4 7.8l3.2 4.4M8.2 6.2h3.6M6.2 8.2v3.6" stroke="currentColor" strokeLinecap="round"/></svg>
 }
 
 function CenteredMessage({ title, detail }: { title: string; detail: string }): JSX.Element {
@@ -191,6 +285,17 @@ function CenteredMessage({ title, detail }: { title: string; detail: string }):
 }
 
 const fileName = (path: string): string => path.replace(/\\/g, '/').split('/').pop() || path
+function parseDrawioAddress(address: string): { sessionId: string; path: string } | null {
+  const prefix = 'dsh-resource://file/session/'
+  if (!address.startsWith(prefix)) return null
+  try {
+    const parts = address.slice(prefix.length).split('/').map(decodeURIComponent)
+    const sessionId = parts.shift() ?? ''
+    const path = parts.join('/')
+    if (!sessionId || !path || !/\.drawio$/i.test(path) || parts.some(part => part.includes('/') || part.includes('\\') || part.includes('\0'))) return null
+    return { sessionId, path }
+  } catch { return null }
+}
 const messageOf = (reason: unknown): string => reason instanceof Error ? reason.message : String(reason)
 const statusText = (state: string): string => state === 'loading' ? '正在载入' : state === 'saving' ? '正在保存' : state === 'external' ? '已同步 AI 修改' : state === 'error' ? '保存失败' : '已保存'
 const fg = 'var(--dsw-alias-label-primary, currentColor)'

package/src/index.js

@@ -9,6 +9,8 @@ export const name = 'dsh-drawio'
 export const inject = ['tools', 'fs', 'sandbox', 'webServer']
 
 const runtimeRoot = fileURLToPath(new URL('../vendor/drawio/', import.meta.url))
+const MAX_DIAGRAM_BYTES = 10 * 1024 * 1024
+const MAX_REQUEST_BYTES = MAX_DIAGRAM_BYTES + 64 * 1024
 const output = {
   schema: { type: 'object', additionalProperties: true, properties: {} },
   render: (_args, value) => [{ type: 'text', text: JSON.stringify(value, null, 2) }],
@@ -17,6 +19,7 @@ const pathParameter = { type: 'string', required: true, description: 'Path to a
 
 export function apply(ctx) {
   ctx.effect(() => ctx.webServer.register({ kind: 'prefix', path: '/dsh-drawio/runtime', handler: serveRuntime }))
+  ctx.effect(() => ctx.webServer.register({ kind: 'prefix', path: '/dsh-drawio/api', handler: (req, res) => serveCanvasApi(ctx, req, res) }))
   register(ctx, defineTool({
     name: 'drawio_inspect',
     description: 'Read a Draw.io file as structured pages, nodes, edges and geometry. Use this before editing an existing diagram. Set include_xml only when raw XML details are required.',
@@ -71,6 +74,67 @@ export function apply(ctx) {
   }))
 }
 
+async function serveCanvasApi(ctx, req, res) {
+  if (req.method === 'OPTIONS') {
+    res.statusCode = 204
+    res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS')
+    res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
+    res.end()
+    return
+  }
+  if (req.method !== 'POST') return respondJson(res, 405, { ok: false, error: { message: 'Method Not Allowed' } })
+  try {
+    const pathname = new URL(req.url || '/', 'http://dsh.internal').pathname
+    const method = pathname.slice('/dsh-drawio/api/'.length)
+    if (!['read', 'write'].includes(method)) return respondJson(res, 404, { ok: false, error: { message: 'Unknown Draw.io operation.' } })
+    const payload = await readJsonBody(req)
+    const target = await resolveCanvasTarget(ctx, payload.cwd, payload.path)
+    const info = await ctx.fs.stat(target)
+    if (!info || info.type !== 'file') throw new Error('Draw.io file was not found.')
+    if (Number(info.size) > MAX_DIAGRAM_BYTES) throw new Error('Draw.io file is too large to open safely.')
+    if (method === 'read') return respondJson(res, 200, { ok: true, value: { content: await ctx.fs.readText(target) } })
+    if (typeof payload.content !== 'string' || Buffer.byteLength(payload.content) > MAX_DIAGRAM_BYTES) throw new Error('Draw.io content is too large to save safely.')
+    const xml = normalizeDrawio(payload.content)
+    const sandboxPolicy = { mode: 'workspace-write', workspaceRoot: payload.cwd }
+    await ctx.fs.writeText(target, xml, { kind: 'replaceIfVersion', version: info.version }, undefined, sandboxPolicy)
+    return respondJson(res, 200, { ok: true, value: { ok: true } })
+  } catch (error) {
+    return respondJson(res, 400, { ok: false, error: { message: String(error?.message || error).slice(0, 500) } })
+  }
+}
+
+async function resolveCanvasTarget(ctx, cwd, path) {
+  if (typeof cwd !== 'string' || !cwd.trim()) throw new Error('A workspace is required.')
+  assertDrawioPath(path)
+  const [root, target] = await Promise.all([ctx.fs.resolve(cwd), ctx.fs.resolve(path, { cwd })])
+  if (!ctx.fs.contains(root, target)) throw new Error('Draw.io file must stay inside the current workspace.')
+  return target
+}
+
+async function readJsonBody(req) {
+  const declared = Number(req.headers?.['content-length'])
+  if (Number.isFinite(declared) && declared > MAX_REQUEST_BYTES) throw new Error('Request body is too large.')
+  const chunks = []; let size = 0
+  for await (const chunk of req) {
+    const buffer = Buffer.isBuffer(chunk) ? chunk : Buffer.from(chunk)
+    size += buffer.length
+    if (size > MAX_REQUEST_BYTES) throw new Error('Request body is too large.')
+    chunks.push(buffer)
+  }
+  const text = Buffer.concat(chunks).toString('utf8')
+  const value = text ? JSON.parse(text) : {}
+  if (!value || typeof value !== 'object' || Array.isArray(value)) throw new Error('Request body must be a JSON object.')
+  return value
+}
+
+function respondJson(res, status, value) {
+  const body = JSON.stringify(value)
+  res.statusCode = status
+  res.setHeader('Content-Type', 'application/json; charset=utf-8')
+  res.setHeader('Content-Length', Buffer.byteLength(body))
+  res.end(body)
+}
+
 function register(ctx, tool) {
   ctx.effect(() => ctx.tools.register(tool))
 }

package/vendor/drawio/js/PreConfig.js

@@ -8,10 +8,16 @@ window.DRAW_MATH_URL = null;
 window.DRAWIO_CONFIG = {
   compressXml: false,
   enableCssDarkMode: true,
-  defaultLibraries: 'general;flowchart;basic;arrows2',
-  enabledLibraries: ['general', 'flowchart', 'basic', 'arrows2']
+  defaultLibraries: 'general;uml;er;bpmn;flowchart;basic;arrows2',
+  enabledLibraries: null
 };
 urlParams['sync'] = 'manual';
 urlParams['offline'] = '1';
 urlParams['local'] = '1';
 urlParams['plugins'] = '0';
+
+if (typeof navigator !== 'undefined' && 'serviceWorker' in navigator) {
+  navigator.serviceWorker.getRegistrations().then(function(regs) {
+    for (var i = 0; i < regs.length; i++) regs[i].unregister();
+  }).catch(function() {});
+}