Add MCP Stream Listeners

[avrabe]

Epic: MCP Integration

Priority: Critical
Story Points: 3
Phase: 1

Problem

The MCP streaming system is ready but needs specific stream listeners connected to diagram components for real-time updates.

Solution

Add stream listeners to components that need real-time synchronization with the server.

Implementation Details

Ready-to-use code in src/mcp/client.ts:

• addStreamListener(streamType, listener) - Register stream handlers (lines 505-516)
• removeStreamListener(streamType, listener) - Cleanup listeners (lines 518-535)
• handleStreamEvent(eventType, data) - Process stream events (lines 639-657)

Tasks

• Add 'diagram-update' stream listener for live diagram changes
• Add 'component-status' stream listener for WASM component state
• Add 'validation-result' stream listener for real-time validation
• Add 'tool-result' stream listener for MCP tool execution updates

Stream Types to Implement

mcpClient.addStreamListener('diagram-update', (data) => {
    // Update diagram model in real-time
});

mcpClient.addStreamListener('component-status', (data) => {
    // Update WASM component status indicators
});

mcpClient.addStreamListener('validation-result', (data) => {
    // Show validation results as they complete
});

mcpClient.addStreamListener('tool-result', (data) => {
    // Update UI with MCP tool execution results
});

Acceptance Criteria

• Diagram updates stream to UI in real-time
• Component status changes are reflected immediately
• Validation results appear without polling
• Tool execution results update progressively
• Stream listeners are properly cleaned up on component unmount

Technical Notes

• Stream listeners automatically trigger startStreaming() when first added
• Uses Server-Sent Events format with event types
• JSON data parsing with error handling
• Automatic cleanup prevents memory leaks

File: src/mcp/client.ts:505-657

[avrabe]

✅ MCP Stream Listeners Implementation Complete

All required stream listeners have been successfully implemented and enhanced with real-time UI integration.

Completed Stream Listeners

Core Stream Types (All Implemented)

• ✅ diagram-update: Live diagram synchronization (DiagramService)
• ✅ component-status: Real-time WASM component status updates (Enhanced)
• ✅ validation-result: Progressive validation feedback (Enhanced)
• ✅ tool-result: MCP tool execution progress (AppController)

Enhanced Handlers

Component Status Stream (Enhanced)

// Real-time WASM component status with UI events
handleComponentStatusUpdate(data) {
  - Status types: loading, ready, error, executing
  - Custom event dispatch: 'wasm-component-status-update'
  - StatusManager integration for error display
  - Scoped to current diagram for performance
}

Validation Result Stream (Enhanced)

// Progressive validation feedback with categorization
handleValidationResult(data) {
  - Issue severity: error, warning, info
  - Custom event dispatch: 'diagram-validation-result'
  - Real-time status updates without polling
  - StatusManager integration for UI feedback
}

Technical Implementation

Stream Listener Registration

All stream listeners are automatically registered during service initialization:

• DiagramService: diagram-update, component-status, validation-result
• AppController: tool-result, status-update, ai-response

UI Integration

• Custom Events: Components dispatch window events for UI consumption
• StatusManager: Real-time status updates through setComponentError() and setValidationStatus()
• Error Handling: Comprehensive logging and graceful error recovery
• Performance: Scoped updates to current diagram only

Acceptance Criteria Met

• ✅ Diagram updates stream to UI in real-time
• ✅ Component status changes are reflected immediately
• ✅ Validation results appear without polling
• ✅ Tool execution results update progressively
• ✅ Stream listeners are properly cleaned up on component unmount

Architecture

Complete integration across all layers:

McpClient.addStreamListener() → McpService → DiagramService → StatusManager → UI Events

Implementation completed in PR #41