minimal-workflow 0.2.0

package/src/inspector/ToolNodeForm.tsx

@@ -0,0 +1,120 @@
+import { useMemo } from 'react';
+import { useManifestStore } from '../store/manifestStore.ts';
+import type { StepDef, ToolMeta } from '../types.ts';
+
+interface Props {
+  step: StepDef;
+  onPatch: (patch: Partial<StepDef>) => void;
+}
+
+export function ToolNodeForm({ step, onPatch }: Props) {
+  const manifest = useManifestStore((s) => s.manifest);
+  const tools = manifest?.tools ?? [];
+  const currentTool = useMemo(
+    () => tools.find((t) => t.name === step.tool),
+    [tools, step.tool],
+  );
+
+  const argsText = useMemo(() => {
+    try {
+      return JSON.stringify(step.args ?? {}, null, 2);
+    } catch {
+      return '{}';
+    }
+  }, [step.args]);
+
+  const onArgsChange = (text: string) => {
+    try {
+      const parsed = JSON.parse(text);
+      if (parsed && typeof parsed === 'object' && !Array.isArray(parsed)) {
+        onPatch({ args: parsed as Record<string, unknown> });
+      }
+    } catch {
+      /* 静默忽略中间态 */
+    }
+  };
+
+  return (
+    <>
+      <div className="field">
+        <label>tool（工具名）</label>
+        <select
+          value={step.tool ?? ''}
+          onChange={(e) => onPatch({ tool: e.target.value })}
+        >
+          <option value="">— 选择工具 —</option>
+          {tools.map((t) => (
+            <option key={t.name} value={t.name}>
+              {t.name}
+            </option>
+          ))}
+        </select>
+        {currentTool && (
+          <small style={{ color: '#6b7280', fontSize: 11 }}>
+            {currentTool.description}
+          </small>
+        )}
+      </div>
+
+      {currentTool && <ParamHints tool={currentTool} />}
+
+      <div className="field">
+        <label>args（JSON）</label>
+        <textarea
+          value={argsText}
+          rows={6}
+          spellCheck={false}
+          onChange={(e) => onArgsChange(e.target.value)}
+          style={{ fontFamily: 'ui-monospace, monospace', fontSize: 12 }}
+        />
+        <small style={{ color: '#6b7280', fontSize: 11 }}>
+          支持 ${'{var}'} 模板引用前序 capture 变量
+        </small>
+      </div>
+    </>
+  );
+}
+
+function ParamHints({ tool }: { tool: ToolMeta }) {
+  const params = tool.parameters;
+  const props =
+    params && typeof params === 'object'
+      ? ((params as Record<string, unknown>).properties as
+          | Record<string, unknown>
+          | undefined)
+      : undefined;
+  if (!props || typeof props !== 'object') return null;
+  const required =
+    (params as { required?: string[] }).required ?? [];
+  const entries = Object.entries(props);
+  if (entries.length === 0) return null;
+  return (
+    <div
+      style={{
+        background: '#f9fafb',
+        border: '1px solid #e5e7eb',
+        borderRadius: 3,
+        padding: 6,
+        fontSize: 11,
+        marginBottom: 8,
+      }}
+    >
+      <div style={{ fontWeight: 600, marginBottom: 4 }}>参数提示</div>
+      {entries.map(([k, v]) => {
+        const desc = (v as { description?: string }).description ?? '';
+        const type = (v as { type?: string }).type ?? 'any';
+        const isReq = required.includes(k);
+        return (
+          <div key={k} style={{ marginBottom: 2 }}>
+            <code>{k}</code>
+            <span style={{ color: '#6b7280' }}>
+              {' '}
+              ({type}){isReq ? ' *' : ''}
+            </span>
+            {desc && <span style={{ color: '#6b7280' }}> — {desc}</span>}
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/main.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);

package/src/palette/ControlFlowSection.tsx

@@ -0,0 +1,45 @@
+import type { StepKind } from '../types.ts';
+
+interface FlowItem {
+  kind: StepKind;
+  icon: string;
+  label: string;
+  desc: string;
+}
+
+const ITEMS: FlowItem[] = [
+  { kind: 'llm', icon: '🤖', label: 'LLM 调用', desc: '单轮 LLM 推理，不进主历史' },
+  { kind: 'assert', icon: '⚠', label: 'assert', desc: '条件不成立则终止整个 workflow' },
+  { kind: 'pause', icon: '⏸', label: 'pause', desc: 'HITL 暂停点（非交互模式跳过）' },
+  { kind: 'branch', icon: '🔀', label: 'branch', desc: '二选一分支（then / else）' },
+  { kind: 'loop', icon: '🔁', label: 'loop', desc: '遍历数组，对每项执行子步' },
+];
+
+export function ControlFlowSection() {
+  return (
+    <div className="palette-section">
+      <h2>控制流</h2>
+      {ITEMS.map((it) => (
+        <FlowItemView key={it.kind} item={it} />
+      ))}
+    </div>
+  );
+}
+
+function FlowItemView({ item }: { item: FlowItem }) {
+  const onDragStart = (e: React.DragEvent) => {
+    e.dataTransfer.setData(
+      'application/workflow-ui-node',
+      JSON.stringify({ kind: item.kind }),
+    );
+    e.dataTransfer.effectAllowed = 'move';
+  };
+  return (
+    <div className="palette-item" draggable onDragStart={onDragStart}>
+      <div className="name">
+        {item.icon} {item.label}
+      </div>
+      <div className="desc">{item.desc}</div>
+    </div>
+  );
+}

package/src/palette/Palette.tsx

@@ -0,0 +1,65 @@
+import { ToolPaletteSection } from './ToolPaletteSection.tsx';
+import { SkillPaletteSection } from './SkillPaletteSection.tsx';
+import { ControlFlowSection } from './ControlFlowSection.tsx';
+import { useFilesStore } from '../store/filesStore.ts';
+import { useWorkflowStore } from '../store/workflowStore.ts';
+import { useEffect } from 'react';
+import { parseWorkflowYaml } from '../yaml-view/sync.ts';
+
+export function Palette() {
+  const files = useFilesStore((s) => s.files);
+  const refresh = useFilesStore((s) => s.refresh);
+  const open = useFilesStore((s) => s.open);
+  const error = useFilesStore((s) => s.error);
+  const currentFile = useWorkflowStore((s) => s.currentFile);
+  const loadWorkflow = useWorkflowStore((s) => s.loadWorkflow);
+  const setCurrentFile = useWorkflowStore((s) => s.setCurrentFile);
+
+  useEffect(() => {
+    refresh().catch(() => {});
+  }, [refresh]);
+
+  const handleOpen = async (file: string) => {
+    try {
+      const text = await open(file);
+      const def = parseWorkflowYaml(text);
+      loadWorkflow(def);
+      setCurrentFile(file);
+    } catch (e) {
+      alert(`打开 ${file} 失败：${(e as Error).message}`);
+    }
+  };
+
+  return (
+    <aside className="palette">
+      <div className="file-list">
+        <div className="palette-section">
+          <h2>工作流文件</h2>
+        </div>
+        {error && (
+          <div style={{ padding: '6px 12px', color: '#dc2626', fontSize: 11 }}>
+            服务未启动？{error}
+          </div>
+        )}
+        {files.length === 0 && !error && (
+          <div style={{ padding: '6px 12px', color: '#9ca3af', fontSize: 11 }}>
+            workflows/ 为空
+          </div>
+        )}
+        {files.map((f) => (
+          <div
+            key={f.name}
+            className={`file-item ${currentFile === f.name ? 'active' : ''}`}
+            onClick={() => handleOpen(f.name)}
+          >
+            <span>{f.name}</span>
+          </div>
+        ))}
+      </div>
+
+      <ToolPaletteSection />
+      <SkillPaletteSection />
+      <ControlFlowSection />
+    </aside>
+  );
+}

package/src/palette/SkillPaletteSection.tsx

@@ -0,0 +1,31 @@
+import { useManifestStore } from '../store/manifestStore.ts';
+import type { SkillMeta } from '../types.ts';
+
+export function SkillPaletteSection() {
+  const manifest = useManifestStore((s) => s.manifest);
+  if (!manifest) return null;
+  return (
+    <div className="palette-section">
+      <h2>技能（{manifest.skills.length}）</h2>
+      {manifest.skills.map((skill) => (
+        <SkillItem key={skill.name} skill={skill} />
+      ))}
+    </div>
+  );
+}
+
+function SkillItem({ skill }: { skill: SkillMeta }) {
+  const onDragStart = (e: React.DragEvent) => {
+    e.dataTransfer.setData(
+      'application/workflow-ui-node',
+      JSON.stringify({ kind: 'skill', name: skill.name }),
+    );
+    e.dataTransfer.effectAllowed = 'move';
+  };
+  return (
+    <div className="palette-item" draggable onDragStart={onDragStart}>
+      <div className="name">📚 {skill.name}</div>
+      <div className="desc">{skill.description}</div>
+    </div>
+  );
+}

package/src/palette/ToolPaletteSection.tsx

@@ -0,0 +1,31 @@
+import { useManifestStore } from '../store/manifestStore.ts';
+import type { ToolMeta } from '../types.ts';
+
+export function ToolPaletteSection() {
+  const manifest = useManifestStore((s) => s.manifest);
+  if (!manifest) return null;
+  return (
+    <div className="palette-section">
+      <h2>工具（{manifest.tools.length}）</h2>
+      {manifest.tools.map((tool) => (
+        <ToolItem key={tool.name} tool={tool} />
+      ))}
+    </div>
+  );
+}
+
+function ToolItem({ tool }: { tool: ToolMeta }) {
+  const onDragStart = (e: React.DragEvent) => {
+    e.dataTransfer.setData(
+      'application/workflow-ui-node',
+      JSON.stringify({ kind: 'tool', name: tool.name }),
+    );
+    e.dataTransfer.effectAllowed = 'move';
+  };
+  return (
+    <div className="palette-item" draggable onDragStart={onDragStart}>
+      <div className="name">🔧 {tool.name}</div>
+      <div className="desc">{tool.description}</div>
+    </div>
+  );
+}

package/src/store/filesStore.ts

@@ -0,0 +1,29 @@
+import { create } from 'zustand';
+import { listWorkflows, readWorkflow, writeWorkflow } from '../api/files.ts';
+import type { WorkflowFileSummary } from '../api/files.ts';
+
+interface FilesState {
+  files: WorkflowFileSummary[];
+  loading: boolean;
+  error: string | null;
+  refresh: () => Promise<void>;
+  open: (file: string) => Promise<string>;
+  save: (file: string, content: string) => Promise<void>;
+}
+
+export const useFilesStore = create<FilesState>((set) => ({
+  files: [],
+  loading: false,
+  error: null,
+  refresh: async () => {
+    set({ loading: true, error: null });
+    try {
+      const files = await listWorkflows();
+      set({ files, loading: false });
+    } catch (e) {
+      set({ error: (e as Error).message, loading: false });
+    }
+  },
+  open: async (file) => readWorkflow(file),
+  save: async (file, content) => writeWorkflow(file, content),
+}));

package/src/store/manifestStore.ts

@@ -0,0 +1,25 @@
+import { create } from 'zustand';
+import type { Manifest } from '../types.ts';
+import { loadManifest } from '../api/manifest.ts';
+
+interface ManifestState {
+  manifest: Manifest | null;
+  loading: boolean;
+  error: string | null;
+  load: () => Promise<void>;
+}
+
+export const useManifestStore = create<ManifestState>((set) => ({
+  manifest: null,
+  loading: false,
+  error: null,
+  load: async () => {
+    set({ loading: true, error: null });
+    try {
+      const m = await loadManifest();
+      set({ manifest: m, loading: false });
+    } catch (e) {
+      set({ error: (e as Error).message, loading: false });
+    }
+  },
+}));

package/src/store/workflowStore.ts

@@ -0,0 +1,140 @@
+import { create } from 'zustand';
+import type { Edge, Node } from '@xyflow/react';
+import type { CanvasNodeData, StepDef, WorkflowDef } from '../types.ts';
+
+interface WorkflowState {
+  /** 当前打开的 workflow 文件名 */
+  currentFile: string | null;
+  /** 当前 workflow 元信息（除 steps 之外的字段） */
+  meta: Pick<WorkflowDef, 'name' | 'description' | 'version' | 'inputs'>;
+  /** React Flow 节点 */
+  nodes: Node<CanvasNodeData>[];
+  /** React Flow 边 */
+  edges: Edge[];
+  /** 当前选中节点 id */
+  selectedNodeId: string | null;
+  /** YAML 是否未保存 */
+  dirty: boolean;
+
+  setCurrentFile: (file: string | null) => void;
+  loadWorkflow: (def: WorkflowDef) => void;
+  setNodes: (nodes: Node<CanvasNodeData>[]) => void;
+  setEdges: (edges: Edge[]) => void;
+  selectNode: (id: string | null) => void;
+  updateStep: (id: string, patch: Partial<StepDef>) => void;
+  addStep: (step: StepDef, position: { x: number; y: number }) => void;
+  removeStep: (id: string) => void;
+  markDirty: (dirty: boolean) => void;
+  /** 生成当前 workflow 完整 def（含 __meta.layout） */
+  toWorkflowDef: () => WorkflowDef;
+}
+
+const initialMeta = {
+  name: 'untitled',
+  description: '',
+  version: '0.1',
+  inputs: [],
+};
+
+export const useWorkflowStore = create<WorkflowState>((set, get) => ({
+  currentFile: null,
+  meta: initialMeta,
+  nodes: [],
+  edges: [],
+  selectedNodeId: null,
+  dirty: false,
+
+  setCurrentFile: (file) => set({ currentFile: file }),
+
+  loadWorkflow: (def) => {
+    const steps = def.steps ?? [];
+    const layout = def.__meta?.layout ?? [];
+    const nodes: Node<CanvasNodeData>[] = steps.map((step, i) => {
+      const pos = layout.find((l) => l.id === step.id);
+      return {
+        id: step.id,
+        type: detectKind(step),
+        position: pos ? { x: pos.x, y: pos.y } : { x: 100, y: 80 + i * 120 },
+        data: { step, kind: detectKind(step) },
+      };
+    });
+    const edges: Edge[] = nodes.slice(0, -1).map((n, i) => ({
+      id: `seq-${n.id}-${nodes[i + 1].id}`,
+      source: n.id,
+      target: nodes[i + 1].id,
+      type: 'sequential',
+    }));
+    set({
+      meta: {
+        name: def.name,
+        description: def.description ?? '',
+        version: def.version ?? '0.1',
+        inputs: def.inputs ?? [],
+      },
+      nodes,
+      edges,
+      selectedNodeId: null,
+      dirty: false,
+    });
+  },
+
+  setNodes: (nodes) => set({ nodes, dirty: true }),
+  setEdges: (edges) => set({ edges, dirty: true }),
+  selectNode: (id) => set({ selectedNodeId: id }),
+
+  updateStep: (id, patch) => {
+    const nodes = get().nodes.map((n) =>
+      n.id === id
+        ? { ...n, data: { ...n.data, step: { ...n.data.step, ...patch } } }
+        : n,
+    );
+    set({ nodes, dirty: true });
+  },
+
+  addStep: (step, position) => {
+    const node: Node<CanvasNodeData> = {
+      id: step.id,
+      type: detectKind(step),
+      position,
+      data: { step, kind: detectKind(step) },
+    };
+    const nodes = [...get().nodes, node];
+    set({ nodes, dirty: true });
+  },
+
+  removeStep: (id) => {
+    const nodes = get().nodes.filter((n) => n.id !== id);
+    const edges = get()
+      .edges.filter((e) => e.source !== id && e.target !== id);
+    set({ nodes, edges, dirty: true, selectedNodeId: null });
+  },
+
+  markDirty: (dirty) => set({ dirty }),
+
+  toWorkflowDef: () => {
+    const { meta, nodes } = get();
+    const ordered = [...nodes].sort(
+      (a, b) => a.position.y - b.position.y || a.position.x - b.position.x,
+    );
+    return {
+      ...meta,
+      name: meta.name || 'untitled',
+      steps: ordered.map((n) => n.data.step),
+      __meta: {
+        layout: ordered.map((n) => ({
+          id: n.id,
+          x: Math.round(n.position.x),
+          y: Math.round(n.position.y),
+        })),
+      },
+    };
+  },
+}));
+
+function detectKind(step: StepDef): string {
+  if (step.type) return step.type;
+  if (step.tool) return 'tool';
+  if (step.skill) return 'skill';
+  if (step.llm) return 'llm';
+  return 'assert';
+}

package/src/types.ts

@@ -0,0 +1,83 @@
+/**
+ * 编辑器内部共享类型。与 plugins/workflow-runner/src/types.ts 同形但**禁止 import**
+ * 主项目代码（D2 解耦红线）。schema 漂移时手动同步。
+ */
+
+export type StepKind =
+  | 'tool'
+  | 'llm'
+  | 'skill'
+  | 'assert'
+  | 'branch'
+  | 'loop'
+  | 'pause';
+
+export interface WorkflowInput {
+  name: string;
+  type?: 'string' | 'number' | 'boolean';
+  required?: boolean;
+  default?: unknown;
+}
+
+export interface StepDef {
+  id: string;
+  type?: StepKind;
+  tool?: string;
+  llm?: string | Record<string, unknown>;
+  skill?: string;
+  args?: Record<string, unknown>;
+  input?: string;
+  prompt?: string;
+  condition?: string;
+  over?: string;
+  as?: string;
+  do?: StepDef[];
+  then?: StepDef[];
+  else?: StepDef[];
+  when?: string;
+  capture?: Record<string, string>;
+  onError?: 'halt' | 'continue';
+  onFail?: string;
+  maxTurns?: number;
+}
+
+export interface WorkflowDef {
+  name: string;
+  description?: string;
+  version?: string;
+  inputs?: WorkflowInput[];
+  steps: StepDef[];
+  __meta?: {
+    layout?: { id: string; x: number; y: number }[];
+  };
+}
+
+/** manifest.json 形状 —— 参见 docs/workflow-editor-design.md §2.2 */
+export interface ToolMeta {
+  name: string;
+  description: string;
+  parameters: Record<string, unknown>;
+  isReadOnly?: boolean;
+  isConcurrencySafe?: boolean;
+}
+
+export interface SkillMeta {
+  name: string;
+  description: string;
+  triggers?: string;
+  skillMdPreview?: string;
+}
+
+export interface Manifest {
+  version: string;
+  generatedAt: string;
+  tools: ToolMeta[];
+  skills: SkillMeta[];
+}
+
+/** 图模型节点 data 字段 */
+export interface CanvasNodeData {
+  step: StepDef;
+  kind: StepKind;
+  errors?: string[];
+}

package/src/utils/safePath.ts

@@ -0,0 +1,49 @@
+/**
+ * 工作流文件名安全校验。被 scripts/server.ts 和单元测试共用。
+ *
+ * 5 道防线：
+ *   1) 类型 / 空串
+ *   2) 路径分隔符（覆盖 / 和 \ 两平台）
+ *   3) `.` / `..` / 内含 `..`
+ *   4) 绝对路径（POSIX 起始 / 或 Windows 盘符）
+ *   5) 扩展名必须是 .yaml（大小写宽容）
+ *   6) resolve 后必须仍在 workflowsDir 下（防 symlink / 编码 trick）
+ */
+
+import path from 'node:path';
+
+export type SafePathResult =
+  | { ok: true; abs: string }
+  | { ok: false; reason: string };
+
+export function safeResolveWorkflowFile(
+  workflowsDir: string,
+  rawName: unknown,
+): SafePathResult {
+  if (typeof rawName !== 'string' || rawName.length === 0) {
+    return { ok: false, reason: 'file name is required' };
+  }
+  if (rawName.includes('/') || rawName.includes('\\')) {
+    return { ok: false, reason: 'file name must not contain path separators' };
+  }
+  if (rawName === '..' || rawName === '.' || rawName.includes('..')) {
+    return { ok: false, reason: 'file name must not contain ".."' };
+  }
+  if (path.isAbsolute(rawName)) {
+    return { ok: false, reason: 'absolute paths are not allowed' };
+  }
+  if (!rawName.toLowerCase().endsWith('.yaml')) {
+    return { ok: false, reason: 'only .yaml files are allowed' };
+  }
+
+  const abs = path.resolve(workflowsDir, rawName);
+  const normalizedAbs = path.normalize(abs);
+  const normalizedRoot = path.normalize(workflowsDir + path.sep);
+  if (
+    !(normalizedAbs + path.sep).startsWith(normalizedRoot) &&
+    normalizedAbs !== path.normalize(workflowsDir)
+  ) {
+    return { ok: false, reason: 'resolved path escapes workflows directory' };
+  }
+  return { ok: true, abs };
+}