示例 03 工作流状态机与任务面板

本示例对应主线第 6-9 章《工作流编排 / 多智能体协作 / 评测体系建设 / 工程化上线能力》。它的目标不是实现一个完整工作流框架，而是帮助你搭出最小状态机和任务面板骨架，让执行型 Agent 不再只是一个聊天框。

1. 场景目标

示例场景：会议纪要整理 -> 待办拆解 -> 人工确认 -> 导出任务。 系统需要：

• 把任务拆成节点。
• 对每个节点维护状态。
• 在高风险节点等待人工确认。
• 前端以任务面板形式展示执行过程。

2. TypeScript 节点状态定义

export type NodeStatus =
  | 'pending'
  | 'running'
  | 'succeeded'
  | 'failed'
  | 'waiting_human'
  | 'cancelled';

export interface WorkflowNode {
  id: string;
  name: string;
  status: NodeStatus;
  output?: Record<string, unknown>;
  errorMessage?: string;
}

3. Python 最小执行器示例

from dataclasses import dataclass


@dataclass
class WorkflowNode:
    id: str
    name: str
    status: str = "pending"


def run_workflow() -> list[WorkflowNode]:
    nodes = [
        WorkflowNode(id="read_notes", name="读取会议纪要"),
        WorkflowNode(id="extract_todos", name="拆解待办"),
        WorkflowNode(id="human_confirm", name="等待人工确认"),
        WorkflowNode(id="export_tasks", name="导出任务"),
    ]

    nodes[0].status = "succeeded"
    nodes[1].status = "succeeded"
    nodes[2].status = "waiting_human"
    return nodes

4. 前端任务面板映射建议

建议前端把每个节点映射为：

• 节点名称。
• 节点状态标签。
• 节点输出摘要。
• 是否可重试。
• 是否可确认。
• 失败原因。

4.1 React 列表渲染示例

function WorkflowPanel({ nodes }: { nodes: WorkflowNode[] }) {
  return (
    <ul>
      {nodes.map((node) => (
        <li key={node.id}>
          <strong>{node.name}</strong> - {node.status}
        </li>
      ))}
    </ul>
  );
}

5. 为什么这个骨架重要

很多执行型 Agent 做到后面会失控，根因不是模型不行，而是：

• 没有状态机。
• 节点边界不清楚。
• 前端无法准确展示当前流程。
• 等待人工确认时没有明确交互入口。

这个最小骨架能帮助你先把“执行流程”做实，再继续扩展多 Agent、补偿、回退和观测能力。

6. 截图建议

建议保留：

• 任务创建前的空态。
• 多节点执行中的过程态。
• waiting_human 等待确认态。
• 导出完成态。
• 节点失败态与重试入口。