dsh-plugin-agentflow 0.2.3 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-plugin-agentflow",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "DeepSeek Harness tool plugin: run AgentFlow (material-canvas agent orchestrator) boards from the model",
   "keywords": [
     "dsh",
@@ -28,8 +28,8 @@
   "bugs": "https://github.com/CC19990113/dsh-plugin-agentflow/issues",
   "main": "index.js",
   "scripts": {
-    "check": "node --check index.js && node --check lib/bridge.js && node --check scripts/sync-runtime.mjs",
-    "test": "node test/bridge.selftest.mjs",
+    "check": "node --check index.js && node --check lib/bridge.js && node --check scripts/sync-runtime.mjs && tsc --noEmit",
+    "test": "node test/bridge.selftest.mjs && node test/client.selftest.mjs",
     "build": "node scripts/build-client.mjs",
     "sync": "node scripts/sync-runtime.mjs"
   },
@@ -61,7 +61,16 @@
     }
   },
   "devDependencies": {
-    "esbuild": "^0.28.2"
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/react": "^18.3",
+    "@types/react-dom": "^18.3",
+    "@vitejs/plugin-react": "^6.1.2",
+    "@xyflow/react": "^12.12.0",
+    "antd": "^6.6.6",
+    "lucide-react": "^1.60.0",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.4"
   },
   "exports": {
     ".": "./index.js",

package/scripts/build-client.mjs

@@ -3,27 +3,36 @@
 // DSH 的 web 加载器用 window.__ModuleLoader__.load({ id, factory }) 登记 client bundle，
 // 求值时调用 factory(require)：模块解析函数由加载器注入（没有全局 require），返回值
 // 就是插件模块的导出。官方 dsh-context 由 tsdown 的 banner/intro/footer 生成同一形态，
-// 所以这里打 CJS（require 留外部），外面再套这层 factory。
-import { build } from 'esbuild';
+// 所以这里让 Vite 打 CJS（react 等留 external），外面再套这层 factory。
+//
+// 构建细节在 vite.config.ts：单入口 src/index.tsx、lib cjs、产物 .client.build.cjs。
+// 本脚本只负责调用 Vite API、套 wrapper、写 lib/client.js。
+import { gzipSync } from 'node:zlib';
 import { readFile, writeFile, mkdir } from 'node:fs/promises';
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { build, createLogger } from 'vite';
 
-const root = path.dirname(new URL(import.meta.url).pathname);
+const root = path.dirname(fileURLToPath(import.meta.url));
 const dir = path.resolve(root, '..');
+const bundlePath = path.join(dir, '.client.build.cjs');
+
+// 产物直接落在仓库根（与旧 esbuild 一致）；Vite 对 outDir === root 总会提示一句，
+// 而 emptyOutDir 已关、不会覆盖源码 —— 过滤这一条，别让有用告警被它淹没。
+const logger = createLogger('warn');
+const warn = logger.warn.bind(logger);
+logger.warn = (msg, options) => {
+  if (typeof msg === 'string' && msg.includes('build.outDir must not be the same directory of root')) return;
+  warn(msg, options);
+};
 
 await build({
-  entryPoints: [path.join(dir, 'src/client.tsx')],
-  bundle: true,
-  format: 'cjs',
-  platform: 'browser',
-  jsx: 'automatic',
-  minify: true,
-  external: ['react', 'react-dom', 'react/jsx-runtime', '@deepseek-ai/*'],
-  outfile: path.join(dir, '.client.build.cjs'),
-  logLevel: 'warning',
+  configFile: path.join(dir, 'vite.config.ts'),
+  logLevel: 'warn',
+  customLogger: logger,
 });
 
-const body = await readFile(path.join(dir, '.client.build.cjs'), 'utf8');
+const body = await readFile(bundlePath, 'utf8');
 
 // 与官方 tsdown 的 banner / intro / footer 逐字一致
 const wrapped = `window.__ModuleLoader__.load({ id: "dsh-plugin-agentflow", factory: (require) => {
@@ -33,4 +42,7 @@ ${body}return module.exports; } });
 
 await mkdir(path.join(dir, 'lib'), { recursive: true });
 await writeFile(path.join(dir, 'lib/client.js'), wrapped);
-console.log(`lib/client.js  ${(wrapped.length / 1024).toFixed(1)} KB`);
+
+const bytes = Buffer.byteLength(wrapped);
+const gzipped = gzipSync(wrapped).length;
+console.log(`lib/client.js  ${(bytes / 1024).toFixed(1)} KB（gzip ${(gzipped / 1024).toFixed(1)} KB）`);

package/scripts/sync-runtime.mjs

@@ -1,16 +1,19 @@
 #!/usr/bin/env node
-// sync-runtime.mjs —— 把本机 AgentFlow 引擎快照进插件的 runtime/。
+// sync-runtime.mjs —— 把本机 AgentFlow 引擎快照进插件的 runtime/ 与 src/canvas/。
 //
 //   npm run sync
 //   AGENTFLOW_SRC=~/src/agent-flow npm run sync
 //
-// 只收运行时真正需要的文件：
+// runtime/ 只收运行时真正需要的文件：
 //   - 顶层 *.mjs（server / engine / llm / boards / preset-gen …）
 //   - index.html（单文件旧版前端兜底）
 //   - web/dist/**（React 版前端构建产物）
-// 不收 data/（运行时数据）、node_modules/、test/、web/src/。
+// 不收 data/（运行时数据）、node_modules/、test/。
 //
-// 每次清空重建，保证 runtime/ 与引擎来源一一对应，不残留旧文件。
+// src/canvas/ 收 React 版前端的源码（web/src/**）：画布不再走 iframe，而是编进
+// 客户端 bundle、由 src/host/CanvasHost 直接渲染，所以源码要随插件一起走。
+//
+// 两处都是清空重建，保证与引擎来源一一对应，不残留旧文件。
 
 import fs from 'node:fs/promises';
 import os from 'node:os';
@@ -19,11 +22,15 @@ import { fileURLToPath } from 'node:url';
 
 const ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
 const DEST = path.join(ROOT, 'runtime');
+const CANVAS_DEST = path.join(ROOT, 'src', 'canvas');
 const SRC = path.resolve(process.env.AGENTFLOW_SRC || path.join(os.homedir(), '.dsh', 'agent-flow'));
 
 /** 少了一个就跑不起来，宁可同步失败也别生成半残的 runtime */
 const REQUIRED = ['server.mjs', 'engine.mjs', 'boards.mjs', 'llm.mjs', 'index.html', 'web/dist/index.html'];
 
+/** 画布源码：内联渲染后同样缺一不可 */
+const REQUIRED_CANVAS = ['web/src/App.tsx', 'web/src/main.tsx', 'web/src/index.css'];
+
 function exists(file) {
   return fs.access(file).then(() => true, () => false);
 }
@@ -56,6 +63,11 @@ async function main() {
       throw new Error(`引擎缺少必需文件：${path.join(SRC, name)}（用 AGENTFLOW_SRC 指定引擎目录）`);
     }
   }
+  for (const name of REQUIRED_CANVAS) {
+    if (!(await exists(path.join(SRC, name)))) {
+      throw new Error(`引擎缺少画布源码：${path.join(SRC, name)}（用 AGENTFLOW_SRC 指定引擎目录）`);
+    }
+  }
 
   // 清空重建：runtime/ 是生成物，不手改
   await fs.rm(DEST, { recursive: true, force: true });
@@ -76,6 +88,16 @@ async function main() {
   console.log(`  引擎：${mjs.length} 个 .mjs`);
   console.log('  前端：index.html + web/dist/**');
   console.log(`  合计：${stats.files} 个文件，${mb(stats.bytes)}`);
+
+  // 清空重建：src/canvas/ 是 web/src 的镜像，宿主桥接改动请在引擎源码里改
+  await fs.rm(CANVAS_DEST, { recursive: true, force: true });
+  await fs.mkdir(CANVAS_DEST, { recursive: true });
+  await fs.cp(path.join(SRC, 'web', 'src'), CANVAS_DEST, { recursive: true });
+
+  const canvasStats = await measure(CANVAS_DEST);
+  console.log(`画布源码已生成：${CANVAS_DEST}`);
+  console.log(`  来源：${path.join(SRC, 'web', 'src')}`);
+  console.log(`  合计：${canvasStats.files} 个文件，${mb(canvasStats.bytes)}`);
 }
 
 main().catch((err) => {