minimal-workflow 0.2.0

package/src/yaml-view/YamlEditor.tsx

@@ -0,0 +1,71 @@
+/**
+ * YAML 视图（MVP）：纯 textarea + 工具栏。
+ *
+ * 设计要点：
+ *   - 打开时从 store.toWorkflowDef() 拉一次快照，序列化成 yaml 文本
+ *   - 用户编辑只改本地 state；点"应用到图"才回写 store
+ *   - 应用前先 parse + validate，任一报错 → 红条提示，不污染图
+ *   - 不引 Monaco，等 P6 升级
+ */
+
+import { useState } from 'react';
+import { useWorkflowStore } from '../store/workflowStore.ts';
+import {
+  parseWorkflowYaml,
+  stringifyWorkflowYaml,
+  validateWorkflow,
+} from './sync.ts';
+
+interface YamlEditorProps {
+  onClose: () => void;
+}
+
+export function YamlEditor({ onClose }: YamlEditorProps) {
+  const def = useWorkflowStore((s) => s.toWorkflowDef());
+  const loadWorkflow = useWorkflowStore((s) => s.loadWorkflow);
+
+  // 初始化一次快照；之后由 textarea 自己持有
+  const [text, setText] = useState<string>(() => {
+    try {
+      return stringifyWorkflowYaml(def);
+    } catch (e) {
+      return `# 序列化失败: ${(e as Error).message}\n`;
+    }
+  });
+  const [error, setError] = useState<string | null>(null);
+
+  const applyToGraph = () => {
+    try {
+      const parsed = parseWorkflowYaml(text);
+      const errs = validateWorkflow(parsed);
+      if (errs.length > 0) {
+        setError(errs.join('\n'));
+        return;
+      }
+      loadWorkflow(parsed);
+      setError(null);
+      onClose();
+    } catch (e) {
+      setError((e as Error).message);
+    }
+  };
+
+  return (
+    <div className="yaml-view">
+      <div className="yaml-toolbar">
+        <span>YAML 视图</span>
+        <span style={{ flex: 1 }} />
+        <button onClick={applyToGraph} className="primary">
+          应用到图
+        </button>
+        <button onClick={onClose}>取消</button>
+      </div>
+      {error && <div className="yaml-error">{error}</div>}
+      <textarea
+        value={text}
+        onChange={(e) => setText(e.target.value)}
+        spellCheck={false}
+      />
+    </div>
+  );
+}

package/src/yaml-view/sync.ts

@@ -0,0 +1,246 @@
+/**
+ * 图模型 ↔ YAML 文本的纯函数式互转。
+ *
+ * 设计要点（参见 docs/workflow-editor-design.md §7）：
+ *   - 纯函数，无副作用，可在浏览器 / Bun / Node 任意环境跑（不 import path/fs）
+ *   - 不 import minimal-agent/src/* 任何代码（D2 解耦红线）
+ *   - 用 `yaml` 包做 AST 级别的 parse / stringify，给将来 CST 模式留余地
+ *   - 与 plugins/workflow-runner/src/runner.ts::stepKind() 保持同义
+ */
+
+import YAML from 'yaml';
+import type { StepDef, StepKind, WorkflowDef } from '../types.ts';
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * parseWorkflowYaml
+ * ──────────────────────────────────────────────────────────────────────── */
+
+/** 把 yaml 字符串解析为 WorkflowDef；失败抛 Error（含人类可读 message）。 */
+export function parseWorkflowYaml(text: string): WorkflowDef {
+  let raw: unknown;
+  try {
+    raw = YAML.parse(text);
+  } catch (e) {
+    throw new Error(`YAML 解析失败: ${(e as Error).message}`);
+  }
+
+  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
+    throw new Error('Invalid workflow: 顶层必须是对象');
+  }
+
+  const obj = raw as Record<string, unknown>;
+  if (typeof obj.name !== 'string' || !obj.name.trim()) {
+    throw new Error('Invalid workflow: missing "name" or "steps"');
+  }
+  if (!Array.isArray(obj.steps)) {
+    throw new Error('Invalid workflow: missing "name" or "steps"');
+  }
+
+  // 每个 step 至少要有 id（其余字段交给 validateWorkflow 做深检）
+  for (let i = 0; i < obj.steps.length; i++) {
+    const s = obj.steps[i] as unknown;
+    if (!s || typeof s !== 'object' || Array.isArray(s)) {
+      throw new Error(`Invalid workflow: steps[${i}] 不是对象`);
+    }
+    const sid = (s as Record<string, unknown>).id;
+    if (typeof sid !== 'string' || !sid.trim()) {
+      throw new Error(`Invalid workflow: steps[${i}] 缺少 id`);
+    }
+  }
+
+  return obj as unknown as WorkflowDef;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * stringifyWorkflowYaml
+ * ──────────────────────────────────────────────────────────────────────── */
+
+/** 字段顺序：name → description → version → inputs → steps → __meta */
+const TOP_LEVEL_ORDER = [
+  'name',
+  'description',
+  'version',
+  'inputs',
+  'steps',
+  '__meta',
+] as const;
+
+/** 把 WorkflowDef 序列化为 yaml 字符串；保证可被 minimal-agent runtime 解析。 */
+export function stringifyWorkflowYaml(def: WorkflowDef): string {
+  // 1) 把 def 拷成一个字段顺序受控的 plain object
+  const ordered: Record<string, unknown> = {};
+  for (const key of TOP_LEVEL_ORDER) {
+    const v = (def as unknown as Record<string, unknown>)[key];
+    if (v === undefined || v === null) continue;
+    // 空的 inputs 数组省略，避免 yaml 多一行 `inputs: []`
+    if (key === 'inputs' && Array.isArray(v) && v.length === 0) continue;
+    ordered[key] = v;
+  }
+  // 透传其它非标准字段（防止丢字段）
+  for (const k of Object.keys(def)) {
+    if (!(k in ordered) && !TOP_LEVEL_ORDER.includes(k as never)) {
+      ordered[k] = (def as unknown as Record<string, unknown>)[k];
+    }
+  }
+
+  // 2) __meta.layout 的 x/y 保证整数
+  const meta = ordered.__meta as
+    | { layout?: { id: string; x: number; y: number }[] }
+    | undefined;
+  if (meta?.layout && Array.isArray(meta.layout)) {
+    meta.layout = meta.layout.map((l) => ({
+      id: l.id,
+      x: Math.round(l.x),
+      y: Math.round(l.y),
+    }));
+  }
+
+  // 3) 用 Document 构造，给将来 CST 模式留余地
+  const doc = new YAML.Document();
+  doc.contents = doc.createNode(ordered);
+
+  const out = doc.toString({
+    indent: 2,
+    lineWidth: 0, // 不强制换行，保留长 prompt 字符串
+    defaultStringType: 'PLAIN', // 默认 plain，含特殊字符自动升 quoted
+    defaultKeyType: 'PLAIN',
+    minContentWidth: 0,
+  });
+
+  return out.endsWith('\n') ? out : out + '\n';
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * validateWorkflow
+ * ──────────────────────────────────────────────────────────────────────── */
+
+/**
+ * 校验 WorkflowDef 结构；返回 errors 数组（空 = OK）。
+ *
+ * MVP 阶段检查：
+ *   - step 缺 id
+ *   - step 没有可执行字段（tool / llm / skill / type）
+ *   - step id 重复
+ *   - `${var}` 引用未在前序 step 的 capture values / inputs 里出现
+ */
+export function validateWorkflow(def: WorkflowDef): string[] {
+  const errors: string[] = [];
+
+  if (!def || typeof def !== 'object') {
+    return ['Workflow 不是对象'];
+  }
+  if (typeof def.name !== 'string' || !def.name.trim()) {
+    errors.push('Workflow 缺少 name');
+  }
+  if (!Array.isArray(def.steps)) {
+    errors.push('Workflow 缺少 steps 数组');
+    return errors;
+  }
+
+  // 已知变量集合：先放 inputs.*
+  const knownVars = new Set<string>();
+  for (const inp of def.inputs ?? []) {
+    if (inp?.name) {
+      knownVars.add(`inputs.${inp.name}`);
+    }
+  }
+
+  const seenIds = new Set<string>();
+
+  for (const step of def.steps) {
+    const sid = step?.id ?? '<no-id>';
+
+    if (!step?.id || typeof step.id !== 'string') {
+      errors.push(`Step "${sid}" 缺少 id`);
+      continue;
+    }
+    if (seenIds.has(step.id)) {
+      errors.push(`Step id 重复: "${step.id}"`);
+    } else {
+      seenIds.add(step.id);
+    }
+
+    // 执行字段检测：tool / llm / skill / type 至少有一个
+    const hasExec =
+      !!step.tool ||
+      !!step.llm ||
+      !!step.skill ||
+      !!step.type;
+    if (!hasExec) {
+      errors.push(
+        `Step "${step.id}" 没有可执行字段（tool / llm / skill / 或 type）`,
+      );
+    }
+
+    // 变量引用检查（只查 ${xxx}，inputs.* 和已知 capture）
+    const refs = collectVarRefs(step);
+    for (const ref of refs) {
+      // 把 inputs.book 这种 dotted 也接受为已知；变量名首段或全名匹配都行
+      if (knownVars.has(ref)) continue;
+      const head = ref.split('.')[0];
+      if (knownVars.has(head)) continue;
+      errors.push(
+        `Step "${step.id}" 引用了未在 capture 里出现的变量: \${${ref}}`,
+      );
+    }
+
+    // 把本 step 的 capture values 注入已知集合，供后续 step 引用
+    if (step.capture && typeof step.capture === 'object') {
+      for (const v of Object.values(step.capture)) {
+        if (typeof v === 'string' && v.trim()) {
+          knownVars.add(v);
+        }
+      }
+    }
+  }
+
+  return errors;
+}
+
+/** 递归遍历 step 所有字符串字段，收集 `${...}` 内的变量名。 */
+function collectVarRefs(step: StepDef): string[] {
+  const refs: string[] = [];
+  const re = /\$\{([^}]+)\}/g;
+
+  const visit = (v: unknown): void => {
+    if (typeof v === 'string') {
+      let m: RegExpExecArray | null;
+      re.lastIndex = 0;
+      while ((m = re.exec(v)) !== null) {
+        refs.push(m[1].trim());
+      }
+    } else if (Array.isArray(v)) {
+      for (const x of v) visit(x);
+    } else if (v && typeof v === 'object') {
+      for (const x of Object.values(v as Record<string, unknown>)) visit(x);
+    }
+  };
+
+  // 不扫 id 自己 / capture 的 values（capture value 是变量定义而非引用）
+  for (const [k, v] of Object.entries(step)) {
+    if (k === 'id' || k === 'capture') continue;
+    visit(v);
+  }
+  return refs;
+}
+
+/* ─────────────────────────────────────────────────────────────────────────
+ * detectStepKind
+ * ──────────────────────────────────────────────────────────────────────── */
+
+/**
+ * 探测每个 step 的 kind。语义与 plugins/workflow-runner/src/runner.ts::stepKind()
+ * 完全一致：
+ *   if (step.type) return step.type;
+ *   if (step.tool) return 'tool';
+ *   if (step.skill) return 'skill';
+ *   if (step.llm) return 'llm';
+ *   return 'assert';
+ */
+export function detectStepKind(step: StepDef): StepKind {
+  if (step.type) return step.type;
+  if (step.tool) return 'tool';
+  if (step.skill) return 'skill';
+  if (step.llm) return 'llm';
+  return 'assert';
+}

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": false,
+    "noUnusedParameters": false,
+    "noFallthroughCasesInSwitch": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "types": ["bun-types", "vite/client"]
+  },
+  "include": ["src", "scripts", "test", "vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,21 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    host: '127.0.0.1',
+    port: 5173,
+    strictPort: true,
+    proxy: {
+      '/api': {
+        target: 'http://127.0.0.1:5174',
+        changeOrigin: false,
+      },
+    },
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+  },
+});