minimal-workflow 0.2.0

package/src/canvas/WorkflowCanvas.tsx

@@ -0,0 +1,161 @@
+import { useCallback, useMemo } from 'react';
+import {
+  ReactFlow,
+  Background,
+  Controls,
+  MiniMap,
+  applyNodeChanges,
+  applyEdgeChanges,
+  type NodeChange,
+  type EdgeChange,
+  type Connection,
+  addEdge,
+} from '@xyflow/react';
+import '@xyflow/react/dist/style.css';
+
+import { useWorkflowStore } from '../store/workflowStore.ts';
+import { ToolNode } from './nodes/ToolNode.tsx';
+import { LlmNode } from './nodes/LlmNode.tsx';
+import { SkillNode } from './nodes/SkillNode.tsx';
+import { AssertNode } from './nodes/AssertNode.tsx';
+import { PauseNode } from './nodes/PauseNode.tsx';
+import { BranchNode } from './nodes/BranchNode.tsx';
+import { LoopNode } from './nodes/LoopNode.tsx';
+import { SequentialEdge } from './edges/SequentialEdge.tsx';
+import type { StepDef, StepKind } from '../types.ts';
+
+const nodeTypes = {
+  tool: ToolNode,
+  llm: LlmNode,
+  skill: SkillNode,
+  assert: AssertNode,
+  pause: PauseNode,
+  branch: BranchNode,
+  loop: LoopNode,
+};
+
+const edgeTypes = {
+  sequential: SequentialEdge,
+};
+
+export function WorkflowCanvas() {
+  const nodes = useWorkflowStore((s) => s.nodes);
+  const edges = useWorkflowStore((s) => s.edges);
+  const setNodes = useWorkflowStore((s) => s.setNodes);
+  const setEdges = useWorkflowStore((s) => s.setEdges);
+  const selectNode = useWorkflowStore((s) => s.selectNode);
+  const addStep = useWorkflowStore((s) => s.addStep);
+
+  const onNodesChange = useCallback(
+    (changes: NodeChange[]) => {
+      setNodes(applyNodeChanges(changes, nodes) as typeof nodes);
+    },
+    [nodes, setNodes],
+  );
+
+  const onEdgesChange = useCallback(
+    (changes: EdgeChange[]) => {
+      setEdges(applyEdgeChanges(changes, edges));
+    },
+    [edges, setEdges],
+  );
+
+  const onConnect = useCallback(
+    (conn: Connection) => {
+      setEdges(addEdge({ ...conn, type: 'sequential' }, edges));
+    },
+    [edges, setEdges],
+  );
+
+  const onNodeClick = useCallback(
+    (_: React.MouseEvent, node: { id: string }) => {
+      selectNode(node.id);
+    },
+    [selectNode],
+  );
+
+  const onPaneClick = useCallback(() => selectNode(null), [selectNode]);
+
+  const onDragOver = useCallback((e: React.DragEvent) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = 'move';
+  }, []);
+
+  const onDrop = useCallback(
+    (e: React.DragEvent) => {
+      e.preventDefault();
+      const raw = e.dataTransfer.getData('application/workflow-ui-node');
+      if (!raw) return;
+      let payload: { kind: StepKind; name?: string };
+      try {
+        payload = JSON.parse(raw);
+      } catch {
+        return;
+      }
+      const bounds = (e.target as HTMLElement)
+        .closest('.canvas')!
+        .getBoundingClientRect();
+      const position = {
+        x: e.clientX - bounds.left - 90,
+        y: e.clientY - bounds.top - 30,
+      };
+      const id = nextId(payload.kind, nodes.map((n) => n.id));
+      const step = makeStepTemplate(payload.kind, id, payload.name);
+      addStep(step, position);
+    },
+    [nodes, addStep],
+  );
+
+  const defaultViewport = useMemo(() => ({ x: 0, y: 0, zoom: 1 }), []);
+
+  return (
+    <div className="canvas" onDragOver={onDragOver} onDrop={onDrop}>
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        onConnect={onConnect}
+        onNodeClick={onNodeClick}
+        onPaneClick={onPaneClick}
+        nodeTypes={nodeTypes}
+        edgeTypes={edgeTypes}
+        defaultViewport={defaultViewport}
+        fitView={nodes.length > 0}
+      >
+        <Background />
+        <Controls />
+        <MiniMap pannable zoomable />
+      </ReactFlow>
+    </div>
+  );
+}
+
+function nextId(kind: StepKind, existing: string[]): string {
+  let i = 1;
+  while (existing.includes(`${kind}_${i}`)) i++;
+  return `${kind}_${i}`;
+}
+
+function makeStepTemplate(
+  kind: StepKind,
+  id: string,
+  name?: string,
+): StepDef {
+  switch (kind) {
+    case 'tool':
+      return { id, tool: name ?? 'Read', args: {} };
+    case 'llm':
+      return { id, llm: 'TODO: 写 prompt' };
+    case 'skill':
+      return { id, skill: name ?? 'commit', input: '' };
+    case 'assert':
+      return { id, type: 'assert', condition: 'true', onFail: '' };
+    case 'pause':
+      return { id, type: 'pause', prompt: '' };
+    case 'branch':
+      return { id, type: 'branch', condition: 'false', then: [], else: [] };
+    case 'loop':
+      return { id, type: 'loop', over: '[]', as: 'item', do: [] };
+  }
+}

package/src/canvas/edges/SequentialEdge.tsx

@@ -0,0 +1,14 @@
+import { BaseEdge, getBezierPath } from '@xyflow/react';
+import type { EdgeProps } from '@xyflow/react';
+
+export function SequentialEdge(props: EdgeProps) {
+  const [edgePath] = getBezierPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    sourcePosition: props.sourcePosition,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    targetPosition: props.targetPosition,
+  });
+  return <BaseEdge id={props.id} path={edgePath} markerEnd={props.markerEnd} />;
+}

package/src/canvas/nodes/AssertNode.tsx

@@ -0,0 +1,17 @@
+import type { NodeProps } from '@xyflow/react';
+import { BaseNode } from './BaseNode.tsx';
+import type { CanvasNodeData } from '../../types.ts';
+
+export function AssertNode(props: NodeProps) {
+  const data = props.data as CanvasNodeData;
+  const step = data.step;
+  return (
+    <BaseNode
+      {...props}
+      data={data}
+      variant="assert"
+      title="⚠ assert"
+      body={step.condition ?? '(no condition)'}
+    />
+  );
+}

package/src/canvas/nodes/BaseNode.tsx

@@ -0,0 +1,55 @@
+import { Handle, Position } from '@xyflow/react';
+import type { NodeProps } from '@xyflow/react';
+import type { CanvasNodeData } from '../../types.ts';
+
+interface BaseNodeProps extends NodeProps {
+  data: CanvasNodeData;
+  selected?: boolean;
+  /** 节点种类 css class（决定边框色） */
+  variant: string;
+  /** 节点标题（如 "🔧 tool: bash"） */
+  title: string;
+  /** 节点正文（摘要） */
+  body?: string;
+  /** 多个出口端口（branch/loop 用）；省略则单 source */
+  outputs?: { id: string; label: string }[];
+}
+
+export function BaseNode({
+  data,
+  selected,
+  variant,
+  title,
+  body,
+  outputs,
+}: BaseNodeProps) {
+  const errors = data.errors;
+  return (
+    <div className={`canvas-node ${variant} ${selected ? 'selected' : ''}`}>
+      <Handle type="target" position={Position.Top} />
+      <div className="node-header">
+        <span>{title}</span>
+        <span className="node-id">{data.step.id}</span>
+      </div>
+      {body && <div className="node-body">{body}</div>}
+      {errors && errors.length > 0 && (
+        <div style={{ marginTop: 4 }}>
+          <span className="badge err">{errors.length} 错误</span>
+        </div>
+      )}
+      {!outputs || outputs.length === 0 ? (
+        <Handle type="source" position={Position.Bottom} />
+      ) : (
+        outputs.map((o, i) => (
+          <Handle
+            key={o.id}
+            type="source"
+            position={Position.Bottom}
+            id={o.id}
+            style={{ left: `${((i + 1) * 100) / (outputs.length + 1)}%` }}
+          />
+        ))
+      )}
+    </div>
+  );
+}

package/src/canvas/nodes/BranchNode.tsx

@@ -0,0 +1,21 @@
+import type { NodeProps } from '@xyflow/react';
+import { BaseNode } from './BaseNode.tsx';
+import type { CanvasNodeData } from '../../types.ts';
+
+export function BranchNode(props: NodeProps) {
+  const data = props.data as CanvasNodeData;
+  const step = data.step;
+  return (
+    <BaseNode
+      {...props}
+      data={data}
+      variant="branch"
+      title="🔀 branch"
+      body={step.condition ?? '(no condition)'}
+      outputs={[
+        { id: 'then', label: 'then' },
+        { id: 'else', label: 'else' },
+      ]}
+    />
+  );
+}

package/src/canvas/nodes/LlmNode.tsx

@@ -0,0 +1,29 @@
+import type { NodeProps } from '@xyflow/react';
+import { BaseNode } from './BaseNode.tsx';
+import type { CanvasNodeData } from '../../types.ts';
+
+export function LlmNode(props: NodeProps) {
+  const data = props.data as CanvasNodeData;
+  const step = data.step;
+  const prompt =
+    typeof step.llm === 'string'
+      ? step.llm
+      : typeof step.llm === 'object' && step.llm !== null
+        ? ((step.llm as Record<string, unknown>).prompt as string) ||
+          JSON.stringify(step.llm)
+        : '';
+  const preview = prompt
+    ? prompt.length > 80
+      ? `${prompt.slice(0, 80)}...`
+      : prompt
+    : '(no prompt)';
+  return (
+    <BaseNode
+      {...props}
+      data={data}
+      variant="llm"
+      title="🤖 llm"
+      body={preview}
+    />
+  );
+}

package/src/canvas/nodes/LoopNode.tsx

@@ -0,0 +1,22 @@
+import type { NodeProps } from '@xyflow/react';
+import { BaseNode } from './BaseNode.tsx';
+import type { CanvasNodeData } from '../../types.ts';
+
+export function LoopNode(props: NodeProps) {
+  const data = props.data as CanvasNodeData;
+  const step = data.step;
+  const summary = `over: ${step.over ?? '?'}\nas: ${step.as ?? 'item'}`;
+  return (
+    <BaseNode
+      {...props}
+      data={data}
+      variant="loop"
+      title="🔁 loop"
+      body={summary}
+      outputs={[
+        { id: 'iter', label: 'iter' },
+        { id: 'done', label: 'done' },
+      ]}
+    />
+  );
+}

package/src/canvas/nodes/PauseNode.tsx

@@ -0,0 +1,17 @@
+import type { NodeProps } from '@xyflow/react';
+import { BaseNode } from './BaseNode.tsx';
+import type { CanvasNodeData } from '../../types.ts';
+
+export function PauseNode(props: NodeProps) {
+  const data = props.data as CanvasNodeData;
+  const step = data.step;
+  return (
+    <BaseNode
+      {...props}
+      data={data}
+      variant="pause"
+      title="⏸ pause"
+      body={step.prompt ?? '(human-in-the-loop)'}
+    />
+  );
+}

package/src/canvas/nodes/SkillNode.tsx

@@ -0,0 +1,27 @@
+import type { NodeProps } from '@xyflow/react';
+import { BaseNode } from './BaseNode.tsx';
+import type { CanvasNodeData } from '../../types.ts';
+
+export function SkillNode(props: NodeProps) {
+  const data = props.data as CanvasNodeData;
+  const step = data.step;
+  const lines = [
+    step.input ? `input: ${truncate(step.input, 40)}` : null,
+    step.maxTurns ? `maxTurns: ${step.maxTurns}` : null,
+  ]
+    .filter(Boolean)
+    .join('\n');
+  return (
+    <BaseNode
+      {...props}
+      data={data}
+      variant="skill"
+      title={`📚 ${step.skill}`}
+      body={lines || '(no input)'}
+    />
+  );
+}
+
+function truncate(s: string, n: number): string {
+  return s.length > n ? `${s.slice(0, n)}...` : s;
+}

package/src/canvas/nodes/ToolNode.tsx

@@ -0,0 +1,27 @@
+import type { NodeProps } from '@xyflow/react';
+import { BaseNode } from './BaseNode.tsx';
+import type { CanvasNodeData } from '../../types.ts';
+
+export function ToolNode(props: NodeProps) {
+  const data = props.data as CanvasNodeData;
+  const step = data.step;
+  const argsPreview = step.args
+    ? Object.entries(step.args)
+        .slice(0, 2)
+        .map(([k, v]) => `${k}: ${truncate(JSON.stringify(v), 30)}`)
+        .join('\n')
+    : '(no args)';
+  return (
+    <BaseNode
+      {...props}
+      data={data}
+      variant="tool"
+      title={`🔧 ${step.tool}`}
+      body={argsPreview}
+    />
+  );
+}
+
+function truncate(s: string, n: number): string {
+  return s.length > n ? `${s.slice(0, n)}...` : s;
+}