--- name: swimlane-visualization description: Design swimlane UI patterns for visualizing ADW execution. Use when building observability dashboards, monitoring agent workflows, or creating real-time status displays. allowed-tools: Read, Grep, Glob --- # Swimlane Visualization ## MANDATORY: docs-management Delegation > **Documentation Verification:** This skill references Claude Code internal types (event types, hook events) that may change between releases. Before relying on hardcoded values, invoke the `hook-management` skill which delegates to `docs-management` for authoritative documentation. **What's Static (design decisions):** - UI patterns (lane layout, card design, status indicators) - Component specifications (Vue/React templates) - WebSocket integration patterns **What's Dynamic (verify via docs-management):** - Event type names (PreToolUse, PostToolUse, TextBlock, etc.) - Hook event payloads and structure - Claude Code internal APIs --- Design swimlane UI patterns for visualizing AI Developer Workflow execution in real-time. ## When to Use - Building ADW observability dashboards - Monitoring agent workflow progress - Creating real-time status displays - Designing event inspection interfaces - Implementing workflow debugging tools ## Prerequisites - Understanding of @websocket-architecture.md for real-time updates - Familiarity with @hook-event-patterns.md for event types - Frontend development capabilities (Vue, React, etc.) ## SDK Requirement > **Implementation Note**: Swimlane visualization requires frontend development. This skill provides UI specifications and component patterns. ## Swimlane Layout ### Basic Structure ```text ┌─────────────────────────────────────────────────────────────────┐ │ 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 │ └────────────┴────────────┴────────────┴────────────┴─────────────┘ ``` ### 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 │ └─────────────────────────────────┘ ``` ### Event Type Icons > **Documentation Verification:** Event types (TextBlock, ToolUseBlock, PreToolUse, PostToolUse, etc.) are Claude Code internal types. For authoritative current types, verify via `hook-management` skill → `docs-management`. | 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 ``` ### Event Card Component ```vue ``` ### Status Panel Component ```vue ``` ## Real-Time Update Pattern ### WebSocket Integration ```typescript class SwimlaneLive { private ws: ADWWebSocket; private lanes: Map = 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 } } ``` ### 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; } } ``` ## Filtering and Navigation ### Filter Controls ```text ┌─────────────────────────────────────────────────────────────────┐ │ Filters: │ │ [Step: All ▼] [Type: All ▼] [Search: _____________] [🔄 Live] │ └─────────────────────────────────────────────────────────────────┘ ``` ### 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; }); } ``` ## 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": "..." │ │ } │ └─────────────────────────────────────────────────────────────────┘ ``` ## 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] ``` ### 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] ``` ## 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