minimal-workflow 0.2.0

package/scripts/cli.ts

@@ -0,0 +1,318 @@
+#!/usr/bin/env bun
+/**
+ * workflow-ui CLI 入口
+ *
+ * 用法: workflow-ui [project-dir] [options]
+ *
+ * 负责：参数解析、manifest 新鲜度检查、spawn IO 服务 + Vite dev server。
+ */
+
+import { spawn, type ChildProcess } from 'node:child_process';
+import { existsSync, readFileSync, statSync, readdirSync } from 'node:fs';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// editorRoot：cli.ts 位于 editor/scripts/，所以上两级
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const editorRoot = path.resolve(__dirname, '..');
+
+interface CliOptions {
+  projectDir: string;
+  port: number;
+  serverPort: number;
+  refreshManifest: boolean;
+  noManifestRefresh: boolean;
+  noOpen: boolean;
+}
+
+function printHelp(): void {
+  console.log(`USAGE
+  workflow-ui [project-dir] [options]
+
+ARGUMENTS
+  project-dir              Path to a minimal-agent project (must contain workflows/).
+                           Defaults to current working directory.
+
+OPTIONS
+  --port <n>               Editor (Vite) port. Default: 5173
+  --server-port <n>        File IO server port. Default: 5174
+  --refresh-manifest       Force regenerate <project>/.editor-cache/manifest.json
+  --no-manifest-refresh    Skip manifest freshness check
+  --no-open                Do not auto-open browser
+  -h, --help               Show this help and exit
+  -v, --version            Print version and exit
+
+EXAMPLES
+  workflow-ui                              # use cwd as project
+  workflow-ui ./my-project                 # use ./my-project
+  workflow-ui . --port 5180                # custom editor port
+  workflow-ui . --refresh-manifest         # force manifest rebuild
+`);
+}
+
+function printVersion(): void {
+  try {
+    const pkgPath = path.join(editorRoot, 'package.json');
+    const pkg = JSON.parse(readFileSync(pkgPath, 'utf8')) as { version?: string };
+    console.log(pkg.version ?? '0.0.0');
+  } catch {
+    console.log('0.0.0');
+  }
+}
+
+function parseArgs(argv: string[]): CliOptions {
+  const opts: CliOptions = {
+    projectDir: process.cwd(),
+    port: 5173,
+    serverPort: 5174,
+    refreshManifest: false,
+    noManifestRefresh: false,
+    noOpen: false,
+  };
+  let projectSeen = false;
+
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    switch (a) {
+      case '-h':
+      case '--help':
+        printHelp();
+        process.exit(0);
+      // biome-ignore lint/correctness/noFallthroughSwitchClause: exit above
+      case '-v':
+      case '--version':
+        printVersion();
+        process.exit(0);
+      // biome-ignore lint/correctness/noFallthroughSwitchClause: exit above
+      case '--port': {
+        const next = argv[++i];
+        if (!next) {
+          console.error('✗ --port requires a value');
+          process.exit(1);
+        }
+        const n = Number(next);
+        if (!Number.isFinite(n) || n <= 0 || n > 65535) {
+          console.error(`✗ invalid --port: ${next}`);
+          process.exit(1);
+        }
+        opts.port = n;
+        break;
+      }
+      case '--server-port': {
+        const next = argv[++i];
+        if (!next) {
+          console.error('✗ --server-port requires a value');
+          process.exit(1);
+        }
+        const n = Number(next);
+        if (!Number.isFinite(n) || n <= 0 || n > 65535) {
+          console.error(`✗ invalid --server-port: ${next}`);
+          process.exit(1);
+        }
+        opts.serverPort = n;
+        break;
+      }
+      case '--refresh-manifest':
+        opts.refreshManifest = true;
+        break;
+      case '--no-manifest-refresh':
+        opts.noManifestRefresh = true;
+        break;
+      case '--no-open':
+        opts.noOpen = true;
+        break;
+      default:
+        if (a.startsWith('-')) {
+          console.error(`✗ unknown option: ${a}`);
+          printHelp();
+          process.exit(1);
+        }
+        if (!projectSeen) {
+          opts.projectDir = a;
+          projectSeen = true;
+        } else {
+          console.error(`✗ unexpected positional argument: ${a}`);
+          process.exit(1);
+        }
+    }
+  }
+  return opts;
+}
+
+/** 递归收集目录下所有文件的最新 mtime（毫秒）；目录不存在返回 0。 */
+function latestMtime(dir: string): number {
+  if (!existsSync(dir)) return 0;
+  let latest = 0;
+  const walk = (p: string): void => {
+    let entries: import('node:fs').Dirent[];
+    try {
+      entries = readdirSync(p, { withFileTypes: true });
+    } catch {
+      return;
+    }
+    for (const e of entries) {
+      const full = path.join(p, e.name);
+      if (e.isDirectory()) {
+        if (e.name === 'node_modules' || e.name.startsWith('.')) continue;
+        walk(full);
+      } else if (e.isFile()) {
+        try {
+          const m = statSync(full).mtimeMs;
+          if (m > latest) latest = m;
+        } catch {}
+      }
+    }
+  };
+  walk(dir);
+  return latest;
+}
+
+function isManifestStale(projectDirAbs: string, manifestPath: string): boolean {
+  if (!existsSync(manifestPath)) return true;
+  let manifestMtime: number;
+  try {
+    manifestMtime = statSync(manifestPath).mtimeMs;
+  } catch {
+    return true;
+  }
+  const toolsMtime = latestMtime(path.join(projectDirAbs, 'src', 'tools'));
+  const skillsMtime = latestMtime(path.join(projectDirAbs, 'skills'));
+  return toolsMtime > manifestMtime || skillsMtime > manifestMtime;
+}
+
+async function maybeRegenerateManifest(projectDirAbs: string, opts: CliOptions): Promise<void> {
+  if (opts.noManifestRefresh) return;
+
+  const manifestPath = path.join(projectDirAbs, '.editor-cache', 'manifest.json');
+  const exporterPath = path.join(projectDirAbs, 'scripts', 'export-manifest.ts');
+  const needRebuild =
+    opts.refreshManifest || isManifestStale(projectDirAbs, manifestPath);
+  if (!needRebuild) return;
+
+  if (!existsSync(exporterPath)) {
+    console.warn('⚠ Could not refresh manifest; editor will use fallback snapshot');
+    return;
+  }
+
+  await new Promise<void>((resolve) => {
+    const child = spawn('bun', [exporterPath], {
+      cwd: projectDirAbs,
+      stdio: 'inherit',
+      env: process.env,
+      shell: process.platform === 'win32',
+    });
+    child.on('exit', (code) => {
+      if (code === 0) {
+        console.log('✓ Regenerated manifest');
+      } else {
+        console.warn('⚠ Could not refresh manifest; editor will use fallback snapshot');
+      }
+      resolve();
+    });
+    child.on('error', () => {
+      console.warn('⚠ Could not refresh manifest; editor will use fallback snapshot');
+      resolve();
+    });
+  });
+}
+
+async function main(): Promise<void> {
+  const opts = parseArgs(process.argv.slice(2));
+  const projectDirAbs = path.resolve(opts.projectDir);
+
+  if (!existsSync(projectDirAbs)) {
+    console.error(`✗ project dir does not exist: ${projectDirAbs}`);
+    process.exit(1);
+  }
+  const workflowsDir = path.join(projectDirAbs, 'workflows');
+  if (!existsSync(workflowsDir)) {
+    console.error(`✗ workflows/ subdir not found in ${projectDirAbs}`);
+    console.error('  (workflow-ui needs a minimal-agent project with workflows/*.yaml)');
+    process.exit(1);
+  }
+
+  await maybeRegenerateManifest(projectDirAbs, opts);
+
+  // 注入环境变量，server.ts 启动时读取
+  const childEnv: NodeJS.ProcessEnv = {
+    ...process.env,
+    WORKFLOW_UI_PROJECT_DIR: projectDirAbs,
+    WORKFLOW_UI_SERVER_PORT: String(opts.serverPort),
+  };
+
+  const serverScript = path.join(editorRoot, 'scripts', 'server.ts');
+
+  // spawn IO 服务: bun <editorRoot>/scripts/server.ts
+  const server: ChildProcess = spawn('bun', [serverScript], {
+    cwd: editorRoot,
+    stdio: 'inherit',
+    env: childEnv,
+    shell: process.platform === 'win32',
+  });
+
+  // spawn Vite: bunx --bun vite --port <port>
+  const vite: ChildProcess = spawn('bunx', ['--bun', 'vite', '--port', String(opts.port)], {
+    cwd: editorRoot,
+    stdio: 'inherit',
+    env: childEnv,
+    shell: process.platform === 'win32',
+  });
+
+  const editorUrl = `http://127.0.0.1:${opts.port}`;
+  console.log(`> workflow-ui ready at ${editorUrl}`);
+
+  if (!opts.noOpen) {
+    setTimeout(() => openBrowser(editorUrl), 1500);
+  }
+
+  let shuttingDown = false;
+  const shutdown = (signal: NodeJS.Signals): void => {
+    if (shuttingDown) return;
+    shuttingDown = true;
+    console.log(`\n> received ${signal}, shutting down...`);
+    try {
+      server.kill(signal);
+    } catch {}
+    try {
+      vite.kill(signal);
+    } catch {}
+    setTimeout(() => process.exit(0), 500);
+  };
+  process.on('SIGINT', shutdown);
+  process.on('SIGTERM', shutdown);
+
+  const onChildExit = (name: string) => (code: number | null) => {
+    if (shuttingDown) return;
+    console.error(`✗ ${name} exited with code ${code}`);
+    shutdown('SIGTERM');
+  };
+  server.on('exit', onChildExit('server'));
+  vite.on('exit', onChildExit('vite'));
+}
+
+function openBrowser(url: string): void {
+  const platform = process.platform;
+  let cmd: string;
+  let args: string[];
+  if (platform === 'win32') {
+    cmd = 'cmd';
+    args = ['/c', 'start', '""', url];
+  } else if (platform === 'darwin') {
+    cmd = 'open';
+    args = [url];
+  } else {
+    cmd = 'xdg-open';
+    args = [url];
+  }
+  try {
+    spawn(cmd, args, { detached: true, stdio: 'ignore' }).unref();
+  } catch {
+    // 静默 —— 用户可以手动点 URL
+  }
+}
+
+main().catch((e) => {
+  console.error('✗ workflow-ui failed:', e);
+  process.exit(1);
+});

package/scripts/server.ts

@@ -0,0 +1,131 @@
+#!/usr/bin/env bun
+/**
+ * Workflow Editor IO Server
+ *
+ * 本地 HTTP 服务，监听 127.0.0.1:5174，为前端编辑器提供 4 个文件 IO 端点。
+ * 仅用于 workflow-ui 编辑器本地开发，绝不暴露外网。
+ *
+ * 项目目录通过环境变量 WORKFLOW_UI_PROJECT_DIR 注入（由 cli.ts 设置）。
+ */
+
+import { existsSync } from 'node:fs';
+import { mkdir, readFile, readdir, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+
+import { safeResolveWorkflowFile } from '../src/utils/safePath.ts';
+
+const CORS_HEADERS: Record<string, string> = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
+  'Access-Control-Allow-Headers': 'Content-Type',
+};
+
+const JSON_HEADERS: Record<string, string> = {
+  ...CORS_HEADERS,
+  'Content-Type': 'application/json; charset=utf-8',
+};
+
+function jsonResponse(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), { status, headers: JSON_HEADERS });
+}
+
+function errorResponse(message: string, status: number): Response {
+  return jsonResponse({ error: message }, status);
+}
+
+// ----- 启动校验 -----
+
+const projectDir = process.env.WORKFLOW_UI_PROJECT_DIR;
+if (!projectDir) {
+  console.error('✗ WORKFLOW_UI_PROJECT_DIR env var is required');
+  process.exit(1);
+}
+const projectDirAbs = path.resolve(projectDir);
+if (!existsSync(projectDirAbs)) {
+  console.error(`✗ project dir does not exist: ${projectDirAbs}`);
+  process.exit(1);
+}
+const workflowsDir = path.resolve(projectDirAbs, 'workflows');
+if (!existsSync(workflowsDir)) {
+  console.error(`✗ workflows/ subdir not found in ${projectDirAbs}`);
+  process.exit(1);
+}
+const manifestPath = path.resolve(projectDirAbs, '.editor-cache', 'manifest.json');
+
+const PORT = Number(process.env.WORKFLOW_UI_SERVER_PORT ?? 5174);
+
+// ----- 路由 -----
+
+async function handleList(): Promise<Response> {
+  try {
+    const entries = await readdir(workflowsDir, { withFileTypes: true });
+    const files = entries
+      .filter((e) => e.isFile() && e.name.toLowerCase().endsWith('.yaml'))
+      .map((e) => ({ name: e.name }));
+    return jsonResponse(files);
+  } catch (e) {
+    return errorResponse(`list failed: ${(e as Error).message}`, 500);
+  }
+}
+
+async function handleRead(url: URL): Promise<Response> {
+  const file = url.searchParams.get('file');
+  const check = safeResolveWorkflowFile(workflowsDir, file);
+  if (!check.ok) return errorResponse(check.reason, 400);
+  try {
+    if (!existsSync(check.abs)) return errorResponse('file not found', 404);
+    const content = await readFile(check.abs, 'utf8');
+    return jsonResponse({ content });
+  } catch (e) {
+    return errorResponse(`read failed: ${(e as Error).message}`, 500);
+  }
+}
+
+async function handleWrite(req: Request): Promise<Response> {
+  let body: unknown;
+  try {
+    body = await req.json();
+  } catch {
+    return errorResponse('invalid JSON body', 400);
+  }
+  if (!body || typeof body !== 'object') return errorResponse('body must be an object', 400);
+  const { file, content } = body as { file?: unknown; content?: unknown };
+  const check = safeResolveWorkflowFile(workflowsDir, file);
+  if (!check.ok) return errorResponse(check.reason, 400);
+  if (typeof content !== 'string') return errorResponse('content must be a string', 400);
+  try {
+    await mkdir(workflowsDir, { recursive: true });
+    await writeFile(check.abs, content, 'utf8');
+    return jsonResponse({ ok: true });
+  } catch (e) {
+    return errorResponse(`write failed: ${(e as Error).message}`, 500);
+  }
+}
+
+async function handleManifest(): Promise<Response> {
+  try {
+    if (!existsSync(manifestPath)) return errorResponse('manifest not found', 404);
+    const content = await readFile(manifestPath, 'utf8');
+    return new Response(content, { status: 200, headers: JSON_HEADERS });
+  } catch (e) {
+    return errorResponse(`manifest read failed: ${(e as Error).message}`, 500);
+  }
+}
+
+Bun.serve({
+  hostname: '127.0.0.1',
+  port: PORT,
+  async fetch(req: Request): Promise<Response> {
+    const url = new URL(req.url);
+    if (req.method === 'OPTIONS') {
+      return new Response(null, { status: 204, headers: CORS_HEADERS });
+    }
+    if (req.method === 'GET' && url.pathname === '/api/list') return handleList();
+    if (req.method === 'GET' && url.pathname === '/api/read') return handleRead(url);
+    if (req.method === 'POST' && url.pathname === '/api/write') return handleWrite(req);
+    if (req.method === 'GET' && url.pathname === '/api/manifest') return handleManifest();
+    return errorResponse('not found', 404);
+  },
+});
+
+console.log(`✓ File IO server listening on http://127.0.0.1:${PORT} (project: ${projectDirAbs})`);

package/src/App.tsx

@@ -0,0 +1,119 @@
+import { useEffect, useState } from 'react';
+import { Palette } from './palette/Palette.tsx';
+import { WorkflowCanvas } from './canvas/WorkflowCanvas.tsx';
+import { Inspector } from './inspector/Inspector.tsx';
+import { YamlEditor } from './yaml-view/YamlEditor.tsx';
+import { useManifestStore } from './store/manifestStore.ts';
+import { useWorkflowStore } from './store/workflowStore.ts';
+import { useFilesStore } from './store/filesStore.ts';
+import { stringifyWorkflowYaml, validateWorkflow } from './yaml-view/sync.ts';
+
+export default function App() {
+  const loadManifest = useManifestStore((s) => s.load);
+  const manifestError = useManifestStore((s) => s.error);
+  const manifestLoading = useManifestStore((s) => s.loading);
+
+  const currentFile = useWorkflowStore((s) => s.currentFile);
+  const dirty = useWorkflowStore((s) => s.dirty);
+  const meta = useWorkflowStore((s) => s.meta);
+  const loadWorkflow = useWorkflowStore((s) => s.loadWorkflow);
+  const setCurrentFile = useWorkflowStore((s) => s.setCurrentFile);
+  const toWorkflowDef = useWorkflowStore((s) => s.toWorkflowDef);
+  const markDirty = useWorkflowStore((s) => s.markDirty);
+
+  const saveFile = useFilesStore((s) => s.save);
+  const refreshFiles = useFilesStore((s) => s.refresh);
+
+  const [yamlOpen, setYamlOpen] = useState(false);
+  const [saveStatus, setSaveStatus] = useState<string | null>(null);
+
+  useEffect(() => {
+    loadManifest().catch(() => {});
+  }, [loadManifest]);
+
+  const onNewWorkflow = () => {
+    if (dirty && !confirm('当前修改未保存，确定要新建？')) return;
+    loadWorkflow({
+      name: 'untitled',
+      description: '',
+      version: '0.1',
+      inputs: [],
+      steps: [],
+    });
+    setCurrentFile(null);
+  };
+
+  const onSave = async () => {
+    let targetFile = currentFile;
+    if (!targetFile) {
+      const input = prompt(
+        '保存为（文件名，自动追加 .yaml）：',
+        meta.name || 'untitled',
+      );
+      if (!input) return;
+      targetFile = input.endsWith('.yaml') ? input : `${input}.yaml`;
+    }
+    const def = toWorkflowDef();
+    const errs = validateWorkflow(def);
+    if (errs.length > 0) {
+      if (
+        !confirm(
+          `检测到 ${errs.length} 个问题，仍要保存吗？\n\n${errs.join('\n')}`,
+        )
+      ) {
+        return;
+      }
+    }
+    try {
+      const text = stringifyWorkflowYaml(def);
+      await saveFile(targetFile, text);
+      setCurrentFile(targetFile);
+      markDirty(false);
+      setSaveStatus(`✓ 已保存 ${targetFile}`);
+      setTimeout(() => setSaveStatus(null), 2500);
+      refreshFiles().catch(() => {});
+    } catch (e) {
+      setSaveStatus(`✗ 保存失败: ${(e as Error).message}`);
+    }
+  };
+
+  return (
+    <div className="app-shell">
+      <div className="toolbar">
+        <strong>workflow-ui</strong>
+        <span style={{ opacity: 0.5 }}>·</span>
+        <span className="file-label">
+          {currentFile ?? '(未命名)'}
+          {dirty && <span style={{ color: '#dc2626' }}> *</span>}
+        </span>
+        <span style={{ flex: 1 }} />
+        {manifestLoading && (
+          <span style={{ color: '#6b7280', fontSize: 11 }}>
+            加载工具元数据…
+          </span>
+        )}
+        {manifestError && (
+          <span style={{ color: '#dc2626', fontSize: 11 }}>
+            manifest: {manifestError}
+          </span>
+        )}
+        {saveStatus && (
+          <span style={{ fontSize: 12, marginRight: 8 }}>{saveStatus}</span>
+        )}
+        <button onClick={onNewWorkflow}>新建</button>
+        <button onClick={() => setYamlOpen((v) => !v)}>
+          {yamlOpen ? '关闭 YAML 视图' : 'YAML 视图'}
+        </button>
+        <button onClick={onSave} className="primary">
+          保存
+        </button>
+      </div>
+
+      <Palette />
+      <WorkflowCanvas />
+      <Inspector />
+
+      {yamlOpen && <YamlEditor onClose={() => setYamlOpen(false)} />}
+    </div>
+  );
+}

package/src/api/files.ts

@@ -0,0 +1,32 @@
+/**
+ * 前端调用 server.ts 的薄包装。所有错误统一抛 Error，调用方决定如何展示。
+ */
+
+export interface WorkflowFileSummary {
+  name: string; // 文件名，如 'release.yaml'
+}
+
+export async function listWorkflows(): Promise<WorkflowFileSummary[]> {
+  const res = await fetch('/api/list');
+  if (!res.ok) throw new Error(`list failed: ${res.status}`);
+  return (await res.json()) as WorkflowFileSummary[];
+}
+
+export async function readWorkflow(file: string): Promise<string> {
+  const res = await fetch(`/api/read?file=${encodeURIComponent(file)}`);
+  if (!res.ok) throw new Error(`read failed: ${res.status}`);
+  const data = (await res.json()) as { content: string };
+  return data.content;
+}
+
+export async function writeWorkflow(file: string, content: string): Promise<void> {
+  const res = await fetch('/api/write', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ file, content }),
+  });
+  if (!res.ok) {
+    const data = (await res.json().catch(() => ({}))) as { error?: string };
+    throw new Error(data.error ?? `write failed: ${res.status}`);
+  }
+}

package/src/api/manifest.ts

@@ -0,0 +1,17 @@
+import type { Manifest } from '../types.ts';
+
+/**
+ * 加载 manifest：优先从开发服务器 /api/manifest 拿（运行时由 editor/scripts/server.ts 提供），
+ * 失败则从 /manifest.fallback.json（vite 静态资源，public/ 里的文件）兜底。
+ */
+export async function loadManifest(): Promise<Manifest> {
+  try {
+    const res = await fetch('/api/manifest');
+    if (res.ok) return await res.json();
+  } catch {
+    // 服务端未启动，走 fallback
+  }
+  const res = await fetch('/manifest.fallback.json');
+  if (!res.ok) throw new Error('manifest.fallback.json 加载失败');
+  return await res.json();
+}