# 泳道可视化 ## 强制：文档管理委托 > **文档验证：** 该技能引用了 Claude Code 内部类型（事件类型、挂钩事件），这些类型可能在版本之间发生变化。在依赖硬编码值之前，请调用“hook-management”技能，该技能委托给“docs-management”以获得权威文档。 **什么是静态（设计决策）：** * UI模式（车道布局、卡片设计、状态指示器） * 组件规范（Vue/React 模板） * WebSocket集成模式 **什么是动态的（通过文档管理验证）：** * 事件类型名称（PreToolUse、PostToolUse、TextBlock 等） * 钩子事件负载和结构 * Claude Code 内部 API ** ** 设计泳道 UI 模式，以实时可视化 AI 开发人员工作流程执行情况。 ## 何时使用 * 构建 ADW 可观测性仪表板 * 监控代理工作流程进度 * 创建实时状态显示 * 设计事件检查接口 * 实现工作流调试工具 ## 先决条件 * 了解@websocket-architecture.md以进行实时更新 * 熟悉 @hook-event-patterns.md 的事件类型 * 前端开发能力（Vue、React等） ## SDK 要求 > **实现说明**：泳道可视化需要前端开发。此技能提供 UI 规范和组件模式。 ## 泳道布局 ### 基本结构 ┌────────────────────────────────────────────────────────────────┐ │ ADW: a1b2c3d4 - 功能：添加速率限制 │ ├────────────┬────────────┬────────────┬────────────┬────────────┤ │ 计划 │ 构建 │ 审查 │ 修复 │ 状态 │ ├────────────┼────────────┼────────────┼────────────┼────────────┤ │ ✅ 已完成 │ ⚡ 活动 │ ○ 待处理 │ ○ 待处理 │ ● 正在运行 │ │ │ │ │ │ │ │ 💬 创建 │ 🛠️ 撰写 │ │ │ 成本：0.42 美元 │ │ 规格 │ auth.py │ │ │ │ │ │ 🛠️ 写入 │ │ │ 代币：12K │ │ │ 测试.py │ │ │ │ │ │ 🧠 思考 │ │ │ 时长： │ │ │ ... │ │ │ 45 秒 │ └────────────┴────────────┴────────────┴────────────┴────────────┘ ### 巷州状态|图标|颜色 |含义 ---|---|---|--- 待定 | ○ |灰色|未开始活跃| ⚡ |蓝色|目前正在执行完成 | ✅ |绿色|顺利完成失败 | ❌ |红色|发生错误 ## 活动卡设计 ### 事件卡结构 ┌──────────────────────────────────┐ │ 🛠️ 工具使用块 │ ├──────────────────────────────────┤ │ 写入：src/auth/middleware.py │ │ │ │ “实施 JWT 验证 │ │ API 路由中间件” │ ├──────────────────────────────────┤ │ 10:32:15 | 45毫秒 │ └──────────────────────────────────┘ ### 事件类型图标 > **文档验证：** 事件类型（TextBlock、ToolUseBlock、PreToolUse、PostToolUse 等）是 Claude Code 内部类型。对于权威的当前类型，请通过`hook-management`技能→`docs-management`进行验证。事件类型 |图标|卡片样式 ---|---|--- 文本块 | 💬 |蓝色边框工具使用块 | 🛠️ |橙色边框思维块| 🧠 |紫色边框预工具使用 | 🪝 |浅灰色发布工具使用 | 🪝 |浅灰色开始 | ⚙️ |绿色口音步骤结束| ⚙️ |绿色口音 ## 组件规格 ### 车道组件 <模板>

<活动卡 v-for="事件中的事件" :key="事件.id" :事件=“事件” @click="$emit('选择', 事件)" />

### 事件卡组件 <模板>

{{ formattedTime }} {{ event.duration_ms }}毫秒

### 状态面板组件 <模板>

成本 ${{totalCost.toFixed(2)}}

令牌 {{ formatTokens(totalTokens) }}

持续时间 {{ formatDuration(totalDuration) }} ## 实时更新模式 ### WebSocket 集成类 SwimlaneLive { 私有ws：ADWWebSocket；私人车道：Map = new Map(); 连接（adwId：字符串）{ this.ws = new ADWWebSocket(); this.ws.connect(); this.ws.subscribe(adwId, this.handleEvent.bind(this)); } 处理事件（事件：ADWEvent）{ const Lane = this.lanes.get(event.step); 如果（车道）{ Lane.addEvent(事件); this.updateLaneState(event.step); } } updateLaneState（步骤：字符串）{ // 根据最新事件更新车道视觉状态 } } ### 事件缓冲类事件缓冲区{ 私有缓冲区：ADWEvent[] = []；私人冲洗间隔= 100； // 毫秒添加（事件：ADWEvent）{ this.buffer.push(事件); } 刷新（）：ADWEvent [] { const events = [...this.buffer]; this.buffer = []; 返回事件； } } ## 过滤和导航 ### 过滤器控件 ┌────────────────────────────────────────────────────────────────┐ │ 过滤器： │ │ [步骤：全部▼] [类型：全部▼] [搜索：_____________] [🔄 直播] │ └────────────────────────────────────────────────────────────────┘ ### 过滤器实现接口 SwimlineFilters { 步骤：字符串|无效的; 事件类型：字符串[]；搜索查询：字符串；实时模式：布尔值； } 函数filterEvents（事件：ADWEvent []，过滤器：SwimlineFilters）{ 返回 events.filter(事件 => { if (filters.step && event.step !==filters.step) 返回 false; if (filters.eventTypes.length && !filters.eventTypes.includes(event.event_type)) 返回 false; if (filters.searchQuery && !event.summary.includes(filters.searchQuery)) 返回 false; 返回真； }); } ## 事件详细信息面板 ### 扩展事件视图 ┌────────────────────────────────────────────────────────────────┐ │ 活动详情 [X] │ ├────────────────────────────────────────────────────────────────┤ │ 类型：ToolUseBlock │ │ 步骤：构建 │ │ 时间：2026-01-01 10:32:15 UTC │ │ 持续时间：45ms │ ├────────────────────────────────────────────────────────────────┤ │ 工具：写入 │ │ 路径：src/auth/middleware.py │ ├────────────────────────────────────────────────────────────────┤ │ 摘要： │ │ “为 API 路由实现 JWT 验证中间件” │ ├────────────────────────────────────────────────────────────────┤ │ 原始有效负载： │ │ { │ │ "tool_name": "写入", │ │ "file_path": "src/auth/middleware.py", │ │ “内容”：“...” │ │ } │ └────────────────────────────────────────────────────────────────┘ ## 设计清单 * 为所有步骤定义车道布局 * 事件卡组件设计 * 指定状态指示器 * 实时WebSocket集成 * 事件类型图标和颜色 * 过滤控制设计 * 指定事件详细信息面板 * 考虑响应式布局 * 加载和错误状态 * 无障碍要求 ## 输出格式 ## 泳道可视化设计 ### 布局规范 ````文本 [ASCII布局图] ### 巷州状态|视觉|触发 ---|---|--- [状态] | [说明] | [适用时] ### 活动卡 [每种事件类型的卡规格] ### 组件 **车道组件：** [道具、事件、槽位] **事件卡组件：** [道具、事件、样式] **状态面板：** [显示的指标] ### 实时更新 [WebSocket集成模式] ### 过滤 [过滤控件和逻辑] ## 反模式 |反模式|问题 |解决方案 | | --- | --- | --- | |没有实时更新 |陈旧的显示 | WebSocket 流 | |压倒性事件|用户界面无法使用 |过滤和分页| |暂无活动详情 |无法调试 |单击详细信息面板 | |失踪状态 |未知状态 |状态指示灯| |同步渲染 |用户界面冻结 |缓冲更新 | ## 交叉引用 - @websocket-architecture.md - 实时流媒体 - @hook-event-patterns.md - 事件类型 - @multi-agent-observability 技能 - 指标模式 - @生产模式.md - 后端集成 ## 版本历史 - **v1.0.0** (2026-01-01)：初始版本（第 14 课） --- ## 最后更新 **日期：** 2026-01-01 **型号：** claude-opus-4-5-20251101

泳道可视化

包含技能