名称: swimlane-visualization 描述: 设计泳道UI模式以可视化ADW执行。用于构建观测性仪表板、监控代理工作流或创建实时状态显示时使用。允许工具: 读取、搜索、全局匹配

泳道可视化

强制要求: 文档管理委托

文档验证: 此技能引用Claude Code内部类型（事件类型、钩子事件），这些类型可能在版本间变化。在依赖硬编码值之前，调用hook-management技能，该技能委托给docs-management以获取权威文档。

什么是静态的（设计决策）：

UI模式（泳道布局、卡片设计、状态指示器）
组件规范（Vue/React模板）
WebSocket集成模式

什么是动态的（通过docs-management验证）：

事件类型名称（PreToolUse、PostToolUse、TextBlock等）
钩子事件负载和结构
Claude Code内部API

设计泳道UI模式以实时可视化AI Developer Workflow执行。

何时使用

构建ADW观测性仪表板
监控代理工作流进度
创建实时状态显示
设计事件检查界面
实现工作流调试工具

先决条件

理解@websocket-architecture.md以获取实时更新
熟悉@hook-event-patterns.md以了解事件类型
前端开发能力（Vue、React等）

SDK要求

实现说明: 泳道可视化需要前端开发。此技能提供UI规范和组件模式。

泳道布局

基本结构

┌─────────────────────────────────────────────────────────────────┐
│ ADW: a1b2c3d4 - 功能: 添加速率限制                      │
├────────────┬────────────┬────────────┬────────────┬─────────────┤
│    计划    │   构建     │   审查     │    修复    │    状态     │
├────────────┼────────────┼────────────┼────────────┼─────────────┤
│ ✅ 完成 │ ⚡ 活跃  │ ○ 待定  │ ○ 待定  │ ● 运行中   │
│            │            │            │            │             │
│ 💬 创建 │ 🛠️ 编写   │            │            │ 成本: $0.42 │
│    规范    │   auth.py  │            │            │             │
│            │ 🛠️ 编写   │            │            │ 令牌: 12K │
│            │   tests.py │            │            │             │
│            │ 🧠 思考│            │            │ 持续时间:   │
│            │   ...      │            │            │   45秒       │
└────────────┴────────────┴────────────┴────────────┴─────────────┘

泳道状态

状态	图标	颜色	含义
待定	○	灰色	未开始
活跃	⚡	蓝色	当前正在执行
完成	✅	绿色	成功完成
失败	❌	红色	发生错误

事件卡片设计

事件卡片结构

┌─────────────────────────────────┐
│ 🛠️ ToolUseBlock                 │
├─────────────────────────────────┤
│ 编写: src/auth/middleware.py   │
│                                 │
│ "实现JWT验证中间件
│  用于API路由"     │
├─────────────────────────────────┤
│ 10:32:15 | 45毫秒                 │
└─────────────────────────────────┘

事件类型图标

文档验证: 事件类型（TextBlock、ToolUseBlock、PreToolUse、PostToolUse等）是Claude Code内部类型。为获取权威当前类型，通过hook-management技能 → docs-management验证。

事件类型	图标	卡片样式
TextBlock	💬	蓝色边框
ToolUseBlock	🛠️	橙色边框
ThinkingBlock	🧠	紫色边框
PreToolUse	🪝	浅灰色
PostToolUse	🪝	浅灰色
StepStart	⚙️	绿色强调
StepEnd	⚙️	绿色强调

组件规范

泳道组件

<template>
  <div class="lane" :class="{ active: isActive }">
    <div class="lane-header">
      <span class="lane-icon">{{ stateIcon }}</span>
      <span class="lane-name">{{ step.name }}</span>
    </div>
    <div class="lane-content">
      <EventCard
        v-for="event in events"
        :key="event.id"
        :event="event"
        @click="$emit('select', event)"
      />
    </div>
  </div>
</template>

事件卡片组件

<template>
  <div class="event-card" :class="eventTypeClass">
    <div class="event-header">
      <span class="event-icon">{{ typeIcon }}</span>
      <span class="event-type">{{ event.event_type }}</span>
    </div>
    <div class="event-body">
      <p class="event-summary">{{ event.summary }}</p>
    </div>
    <div class="event-footer">
      <span class="event-time">{{ formattedTime }}</span>
      <span class="event-duration" v-if="event.duration_ms">
        {{ event.duration_ms }}毫秒
      </span>
    </div>
  </div>
</template>

状态面板组件

<template>
  <div class="status-panel">
    <div class="status-indicator" :class="overallStatus">
      <span class="status-dot"></span>
      <span class="status-text">{{ statusText }}</span>
    </div>
    <div class="metrics">
      <div class="metric">
        <span class="metric-label">成本</span>
        <span class="metric-value">${{ totalCost.toFixed(2) }}</span>
      </div>
      <div class="metric">
        <span class="metric-label">令牌</span>
        <span class="metric-value">{{ formatTokens(totalTokens) }}</span>
      </div>
      <div class="metric">
        <span class="metric-label">持续时间</span>
        <span class="metric-value">{{ formatDuration(totalDuration) }}</span>
      </div>
    </div>
  </div>
</template>

实时更新模式

WebSocket集成

class SwimlaneLive {
  private ws: ADWWebSocket;
  private lanes: Map<string, Lane> = new Map();

  connect(adwId: string) {
    this.ws = new ADWWebSocket();
    this.ws.connect();
    this.ws.subscribe(adwId, this.handleEvent.bind(this));
  }

  handleEvent(event: ADWEvent) {
    const lane = this.lanes.get(event.step);
    if (lane) {
      lane.addEvent(event);
      this.updateLaneState(event.step);
    }
  }

  updateLaneState(step: string) {
    // 基于最新事件更新泳道视觉状态
  }
}

事件缓冲

class EventBuffer {
  private buffer: ADWEvent[] = [];
  private flushInterval = 100; // 毫秒

  add(event: ADWEvent) {
    this.buffer.push(event);
  }

  flush(): ADWEvent[] {
    const events = [...this.buffer];
    this.buffer = [];
    return events;
  }
}

过滤和导航

过滤控件

┌─────────────────────────────────────────────────────────────────┐
│ 过滤器:                                                         │
│ [步骤: 全部 ▼] [类型: 全部 ▼] [搜索: _____________] [🔄 实时]  │
└─────────────────────────────────────────────────────────────────┘

过滤实现

interface SwimlineFilters {
  step: string | null;
  eventTypes: string[];
  searchQuery: string;
  liveMode: boolean;
}

function filterEvents(events: ADWEvent[], filters: SwimlineFilters) {
  return events.filter(event => {
    if (filters.step && event.step !== filters.step) return false;
    if (filters.eventTypes.length && !filters.eventTypes.includes(event.event_type)) return false;
    if (filters.searchQuery && !event.summary.includes(filters.searchQuery)) return false;
    return true;
  });
}

事件详情面板

扩展事件视图

┌─────────────────────────────────────────────────────────────────┐
│ 事件详情                                              [X]  │
├─────────────────────────────────────────────────────────────────┤
│ 类型: ToolUseBlock                                              │
│ 步骤: 构建                                                     │
│ 时间: 2026-01-01 10:32:15 UTC                                  │
│ 持续时间: 45毫秒                                                  │
├─────────────────────────────────────────────────────────────────┤
│ 工具: 编写                                                     │
│ 路径: src/auth/middleware.py                                    │
├─────────────────────────────────────────────────────────────────┤
│ 摘要:                                                        │
│ "实现JWT验证中间件用于API路由"        │
├─────────────────────────────────────────────────────────────────┤
│ 原始负载:                                                    │
│ {                                                               │
│   "tool_name": "Write",                                        │
│   "file_path": "src/auth/middleware.py",                       │
│   "content": "..."                                             │
│ }                                                               │
└─────────────────────────────────────────────────────────────────┘

设计清单

[ ] 为所有步骤定义泳道布局
[ ] 设计事件卡片组件
[ ] 指定状态指示器
[ ] 实时WebSocket集成
[ ] 事件类型图标和颜色
[ ] 设计过滤控件
[ ] 指定事件详情面板
[ ] 考虑响应式布局
[ ] 加载和错误状态
[ ] 可访问性要求

输出格式

## 泳道可视化设计

### 布局规范

```text
[ASCII布局图]

泳道状态

状态	视觉	触发器
[状态]	[描述]	[何时应用]

事件卡片

[按事件类型的卡片规范]

组件

泳道组件: [属性、事件、插槽]

事件卡片组件: [属性、事件、样式]

状态面板: [显示的指标]

实时更新

[WebSocket集成模式]

过滤

[过滤控件和逻辑]


## 反模式

| 反模式 | 问题 | 解决方案 |
| --- | --- | --- |
| 无实时更新 | 显示陈旧 | WebSocket流式传输 |
| 事件过多 | UI不可用 | 过滤和分页 |
| 无事件详情 | 无法调试 | 点击详情面板 |
| 缺少状态 | 未知状态 | 状态指示器 |
| 同步渲染 | UI冻结 | 缓冲更新 |

## 交叉引用

- @websocket-architecture.md - 实时流式传输
- @hook-event-patterns.md - 事件类型
- @multi-agent-observability技能 - 指标模式
- @production-patterns.md - 后端集成

## 版本历史

- **v1.0.0** (2026-01-01): 初始发布（第14课）

---

## 最后更新

**日期:** 2026-01-01
**模型:** claude-opus-4-5-20251101

名称: swimlane-visualization 描述: 设计泳道UI模式以可视化ADW执行。用于构建观测性仪表板、监控代理工作流或创建实时状态显示时使用。 允许工具: 读取、搜索、全局匹配

泳道可视化

强制要求: 文档管理委托

何时使用

先决条件

SDK要求

泳道布局

基本结构

泳道状态

事件卡片设计

事件卡片结构

事件类型图标

组件规范

泳道组件

事件卡片组件

状态面板组件

实时更新模式

WebSocket集成

事件缓冲

过滤和导航

过滤控件

过滤实现

事件详情面板

扩展事件视图

设计清单

输出格式

泳道状态

事件卡片

组件

实时更新

过滤

名称: swimlane-visualization 描述: 设计泳道UI模式以可视化ADW执行。用于构建观测性仪表板、监控代理工作流或创建实时状态显示时使用。允许工具: 读取、搜索、全局匹配