并行多智能体面板（parallel-agents）
一个自包含的 Vue 3 可嵌入组件：输入任务名 + 简介，并行调用多个智能体，深色消息列表 + 步骤条 + 协作卡片 + 保存回显 + 重新分析。
怎么用（复制即用）
把整个 parallel-agents/ 文件夹拷到你项目的 src/ 下，然后：
import { ParallelAgentsPanel } from "@/parallel-agents";
// 或： import { ParallelAgentsPanel } from "./parallel-agents";
<ParallelAgentsPanel
ref="panel"
:base-url="'http://localhost:8001'"
:username="'demo'"
:task-id="taskId || undefined"
v-model:task-name="taskName"
v-model:brief="brief"
:model="model"
:agents="agents"
@agent-completed="onAgentCompleted"
@completed="onCompleted"
/>
样式由入口 index.ts 自动 import "./parallel-agents.css"，无需 Tailwind / 任何 CSS 框架。
若你不走 index.ts 而是直接 import 组件，请自行引一次该 CSS。
依赖
vue^3.4markdown-it^14（正文 Markdown 渲染）——pnpm add markdown-it
不再依赖 Tailwind：布局类已内置为
parallel-agents.css末尾的「最小工具类子集」，全部作用域 在根类.parallel-agents下，绝不外泄污染宿主页面。
文件结构（都在本文件夹内，可随意改源码）
| 文件 | 作用 |
|---|---|
ParallelAgentsPanel.vue |
主组件（席位条 + 并行会话，暴露 start/save/cancel 等方法） |
ParallelSeatStrip.vue |
席位状态条（running / done / clarify 待协助 / error） |
MessageBubble.vue |
单条消息气泡（头像 / 步骤条 / 正文 / 协作卡片） |
MessageStepsCard.vue · StepIcon.vue |
执行步骤条 / 思维链卡 + 图标 |
ClarificationCard.vue |
协作 / 澄清卡片（用户协助） |
MarkdownContent.vue |
Markdown 正文渲染（markdown-it） |
Avatar.vue |
头像（机器人 / 真人 SVG） |
useParallelRun.ts |
并行运行编排（消费合并 SSE、按席位路由、待协助/并发协助） |
api.ts |
后端访问层（鉴权 + 扇出 SSE + 任务 CRUD） |
types.ts · config.ts · avatar-constants.ts · step-display.ts |
类型 / 配置 / 头像配色 / 步骤文案 |
parallel-agents.css |
作用域样式（深蓝深色 token + 语义类 + 工具类子集） |
关键状态
席位/结果状态 SeatStatus：pending | running | done | clarify | error。其中 clarify 表示
该智能体在等用户协助（待确认），不是已完成——宿主据此判断「未完成」，多个智能体同时待协助
时可分别协助、互不阻塞。