项目 05 前端设计稿：Agent 工作流编排台

1. 产品气质

这是一个高级 AI 工程控制台。设计重点是“过程透明”，让用户能理解 Agent 正在做什么、卡在哪里、为什么需要人工确认。

关键词：

• 工作流画布
• 实时事件
• 状态可解释
• 工具调用
• 人工介入

2. 页面结构

┌──────────────┬──────────────────────────────┬──────────────────┐
│ Workflow List│ Graph / Timeline             │ State Inspector  │
│ Templates    │ Current Run                  │ Tool Details     │
│ History      │ Events                       │ Approval Panel   │
└──────────────┴──────────────────────────────┴──────────────────┘

3. 工作流模板页

模板卡片字段：

• 名称。
• 适用场景。
• 节点数量。
• 工具数量。
• 是否需要人工审批。
• 预计耗时。

操作：

• 查看详情。
• 立即运行。
• 复制模板。

4. 运行页面

顶部运行条：

• 工作流名称。
• Run ID。
• 状态：Running / Waiting Approval / Failed / Completed。
• 已耗时。
• token 消耗。
• Cancel 按钮。

主区域提供两种视图：

• Graph View：节点和边。
• Timeline View：事件时间线。

5. 节点卡片设计

字段：

• 节点名称。
• 节点类型：LLM / Tool / Router / Approval / End。
• 状态。
• 耗时。
• 摘要。

状态颜色：

• pending：灰色。
• running：蓝色。
• success：绿色。
• failed：红色。
• waiting：黄色。

6. 工具调用卡片

展示：

• Tool name。
• Input preview。
• Output preview。
• Duration。
• Status。

交互：

• 点击展开 JSON。
• 复制输入。
• 复制输出。
• 失败时显示 retry 建议。

7. 人工审批弹窗

弹窗内容：

• Agent 请求说明。
• 风险提示。
• 原始建议。
• 可编辑文本框。
• 操作：拒绝、编辑后通过、直接通过。

设计原则：

• 不让 AI 自动执行高风险动作。
• 审批上下文必须完整。
• 用户操作要进入审计日志。

8. State Inspector

右侧状态检查器展示：

• 当前 state JSON。
• Messages。
• 已使用工具。
• 中间变量。
• Checkpoint 时间。

适合做成 Tab：

• State
• Messages
• Tools
• Logs

9. 响应式设计

• 桌面：三栏。
• 平板：模板列表收起，状态检查器抽屉。
• 移动：Timeline 优先，Graph View 可横向滚动。

10. 实现提示

• Agent 事件使用 discriminated union 建模。
• 时间线组件只消费标准事件数组。
• 工具调用详情独立组件，后续可复用。
• SSE 连接状态要展示：连接中、已连接、断开、重连中。