Design swimlane UI patterns for visualizing ADW execution. Use when building observability dashboards, monitoring agent workflows, or creating real-time status displays.
Provides UI patterns for visualizing AI workflow execution in real-time swimlanes. Use when building observability dashboards or monitoring agent workflows to display step-by-step progress, event streams, and metrics with live WebSocket updates.
/plugin marketplace add melodic-software/claude-code-plugins/plugin install google-ecosystem@melodic-softwareThis skill is limited to using the following tools:
Design swimlane UI patterns for visualizing AI Developer Workflow execution in real-time.
Implementation Note: Swimlane visualization requires frontend development. This skill provides UI specifications and component patterns.
┌─────────────────────────────────────────────────────────────────┐
│ ADW: a1b2c3d4 - Feature: Add rate limiting │
├────────────┬────────────┬────────────┬────────────┬─────────────┤
│ Plan │ Build │ Review │ Fix │ Status │
├────────────┼────────────┼────────────┼────────────┼─────────────┤
│ ✅ Complete │ ⚡ Active │ ○ Pending │ ○ Pending │ ● Running │
│ │ │ │ │ │
│ 💬 Created │ 🛠️ Write │ │ │ Cost: $0.42 │
│ spec │ auth.py │ │ │ │
│ │ 🛠️ Write │ │ │ Tokens: 12K │
│ │ tests.py │ │ │ │
│ │ 🧠 Thinking│ │ │ Duration: │
│ │ ... │ │ │ 45s │
└────────────┴────────────┴────────────┴────────────┴─────────────┘
```text
### Lane States
| State | Icon | Color | Meaning |
| --- | --- | --- | --- |
| Pending | ○ | Gray | Not started |
| Active | ⚡ | Blue | Currently executing |
| Complete | ✅ | Green | Successfully finished |
| Failed | ❌ | Red | Error occurred |
## Event Card Design
### Event Card Structure
```text
┌─────────────────────────────────┐
│ 🛠️ ToolUseBlock │
├─────────────────────────────────┤
│ Write: src/auth/middleware.py │
│ │
│ "Implementing JWT validation │
│ middleware for API routes" │
├─────────────────────────────────┤
│ 10:32:15 | 45ms │
└─────────────────────────────────┘
```text
### Event Type Icons
| Event Type | Icon | Card Style |
| --- | --- | --- |
| TextBlock | 💬 | Blue border |
| ToolUseBlock | 🛠️ | Orange border |
| ThinkingBlock | 🧠 | Purple border |
| PreToolUse | 🪝 | Light gray |
| PostToolUse | 🪝 | Light gray |
| StepStart | ⚙️ | Green accent |
| StepEnd | ⚙️ | Green accent |
## Component Specifications
### Lane Component
```vue
<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>
```text
### Event Card Component
```vue
<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 }}ms
</span>
</div>
</div>
</template>
```text
### Status Panel Component
```vue
<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">Cost</span>
<span class="metric-value">${{ totalCost.toFixed(2) }}</span>
</div>
<div class="metric">
<span class="metric-label">Tokens</span>
<span class="metric-value">{{ formatTokens(totalTokens) }}</span>
</div>
<div class="metric">
<span class="metric-label">Duration</span>
<span class="metric-value">{{ formatDuration(totalDuration) }}</span>
</div>
</div>
</div>
</template>
```text
## Real-Time Update Pattern
### WebSocket Integration
```typescript
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) {
// Update lane visual state based on latest event
}
}
```text
### Event Buffering
```typescript
class EventBuffer {
private buffer: ADWEvent[] = [];
private flushInterval = 100; // ms
add(event: ADWEvent) {
this.buffer.push(event);
}
flush(): ADWEvent[] {
const events = [...this.buffer];
this.buffer = [];
return events;
}
}
```text
## Filtering and Navigation
### Filter Controls
```text
┌─────────────────────────────────────────────────────────────────┐
│ Filters: │
│ [Step: All ▼] [Type: All ▼] [Search: _____________] [🔄 Live] │
└─────────────────────────────────────────────────────────────────┘
```text
### Filter Implementation
```typescript
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;
});
}
```text
## Event Detail Panel
### Expanded Event View
```text
┌─────────────────────────────────────────────────────────────────┐
│ Event Details [X] │
├─────────────────────────────────────────────────────────────────┤
│ Type: ToolUseBlock │
│ Step: build │
│ Time: 2026-01-01 10:32:15 UTC │
│ Duration: 45ms │
├─────────────────────────────────────────────────────────────────┤
│ Tool: Write │
│ Path: src/auth/middleware.py │
├─────────────────────────────────────────────────────────────────┤
│ Summary: │
│ "Implementing JWT validation middleware for API routes" │
├─────────────────────────────────────────────────────────────────┤
│ Raw Payload: │
│ { │
│ "tool_name": "Write", │
│ "file_path": "src/auth/middleware.py", │
│ "content": "..." │
│ } │
└─────────────────────────────────────────────────────────────────┘
```text
## Design Checklist
- [ ] Lane layout defined for all steps
- [ ] Event card components designed
- [ ] Status indicators specified
- [ ] Real-time WebSocket integration
- [ ] Event type icons and colors
- [ ] Filter controls designed
- [ ] Event detail panel specified
- [ ] Responsive layout considered
- [ ] Loading and error states
- [ ] Accessibility requirements
## Output Format
```markdown
## Swimlane Visualization Design
### Layout Specification
```text
[ASCII layout diagram]
```text
### Lane States
| State | Visual | Trigger |
| --- | --- | --- |
| [state] | [description] | [when applied] |
### Event Cards
[Card specifications per event type]
### Components
**Lane Component:**
[Props, events, slots]
**Event Card Component:**
[Props, events, styling]
**Status Panel:**
[Metrics displayed]
### Real-Time Updates
[WebSocket integration pattern]
### Filtering
[Filter controls and logic]
```text
## Anti-Patterns
| Anti-Pattern | Problem | Solution |
| --- | --- | --- |
| No live updates | Stale display | WebSocket streaming |
| Overwhelming events | UI unusable | Filtering and pagination |
| No event details | Can't debug | Detail panel on click |
| Missing status | Unknown state | Status indicators |
| Sync rendering | UI freezes | Buffered updates |
## Cross-References
- @websocket-architecture.md - Real-time streaming
- @hook-event-patterns.md - Event types
- @multi-agent-observability skill - Metrics patterns
- @production-patterns.md - Backend integration
## Version History
- **v1.0.0** (2026-01-01): Initial release (Lesson 14)
---
## Last Updated
**Date:** 2026-01-01
**Model:** claude-opus-4-5-20251101
This skill should be used when the user asks to "create an agent", "add an agent", "write a subagent", "agent frontmatter", "when to use description", "agent examples", "agent tools", "agent colors", "autonomous agent", or needs guidance on agent structure, system prompts, triggering conditions, or agent development best practices for Claude Code plugins.
This skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
This skill should be used when the user asks to "create a hook", "add a PreToolUse/PostToolUse/Stop hook", "validate tool use", "implement prompt-based hooks", "use ${CLAUDE_PLUGIN_ROOT}", "set up event-driven automation", "block dangerous commands", or mentions hook events (PreToolUse, PostToolUse, Stop, SubagentStop, SessionStart, SessionEnd, UserPromptSubmit, PreCompact, Notification). Provides comprehensive guidance for creating and implementing Claude Code plugin hooks with focus on advanced prompt-based hooks API.