Files
proffesor-for-testing__agen…/docs/websocket-server-quick-start.md
Profa 744ea46425 feat: Phase 3 complete - Dashboards & Visualization (v1.9.0)
🎉 Major Release: Phase 3 Dashboards & Visualization

This release completes Phase 3 from the Unified GOAP Implementation Plan,
delivering a production-ready real-time visualization system for agent
observability and decision-making transparency.

## Key Achievements (10/12 actions complete - 83%)

### Grafana Dashboards (2,280 LOC)
- Executive dashboard with quality trends and costs
- Developer dashboard with trace explorer and logs
- QA dashboard with test metrics and coverage

### Backend Visualization API (2,004 LOC)
- REST API with 6 endpoints for historical data
- WebSocket server for real-time streaming (587 LOC)
- Data transformer for graph visualization (556 LOC)

### Interactive React Frontend (12,969 LOC)
- MindMap Component (Cytoscape.js): 6 layout algorithms, 1000+ nodes
- QualityMetrics Panel (Recharts): 7-dimension radar chart, trends
- Timeline View (react-window): Virtual scrolling for 1000+ events
- Detail Panel: Drill-down functionality

### Infrastructure
- React 18.3.1 + TypeScript 5.8.3 + Vite 6.4.1
- React Query 5.90.10 for data fetching
- WebSocket client with reconnection logic
- Complete type definitions (306 lines)

### Comprehensive Tests (3,681 LOC)
- Integration tests (14/14 passing)
- Component unit tests (22 files)
- Performance tests for MindMap
- Test-to-code ratio: 17%

## Performance Results (9/9 criteria PASSED)

Backend:
- ✅ 185.84 events/sec write (186% of target)
- ✅ <1ms query latency (99% better than target)
- ✅ 10-50ms WebSocket lag (95% better than target)

Frontend:
- ✅ <100ms render (100 nodes)
- ✅ <500ms render (1000 nodes)
- ✅ 0 TypeScript errors
- ✅ 6.38s build time

## Documentation (8,161 LOC)
- PHASE3-COMPLETE.md - Quick start guide
- Phase 3 completion reports and reviews
- Frontend architecture and testing guides
- Component implementation documentation

## Services Running
- Backend WebSocket: ws://localhost:8080
- Backend REST API: http://localhost:3001
- Frontend: http://localhost:3000
- Database: ./data/agentic-qe.db (1040+ events)

## Grade: B (83/100) - Production Ready

## Deferred to Phase 4 or v1.9.1
- OTEL Collector integration (#71)
- Prometheus/Jaeger deployment (#71)
- Test coverage metrics (#71)
- Bundle code-splitting (#71)

## References
- Issue #63 - Phase 3: Dashboards & Visualization (CLOSED)
- Issue #69 - Phase 4: Integration & Orchestration
- Issue #70 - Phase 5: Production Readiness
- Issue #71 - Phase 3 Remaining Work

Total Phase 3 Code: 21,434 LOC
Total Documentation: 8,161 LOC
Files Changed: 137

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-22 10:09:28 +00:00

4.8 KiB

WebSocket Server Quick Start Guide

Quick Test

Run the standalone test to verify the WebSocket server works:

cd /workspaces/agentic-qe-cf
node scripts/test-websocket-standalone.js

Expected output:

🧪 Testing WebSocket Server Implementation
✅ HTTP/WebSocket server started on port 8080
✅ Port 8080 is bound and listening
✅ Client connected successfully
✅ All tests passed!

Verify Port Binding

netstat -an | grep 8080

Should show:

tcp6       0      0 :::8080                 :::*                    LISTEN

Connect with a Client

Using wscat (install with: npm install -g wscat)

wscat -c ws://localhost:8080

Using Node.js

const { WebSocket } = require('ws');
const client = new WebSocket('ws://localhost:8080');

client.on('open', () => {
  console.log('Connected');
  client.send(JSON.stringify({ type: 'ping' }));
});

client.on('message', (data) => {
  console.log('Received:', data.toString());
});

Integration Example

import { WebSocketServer } from './src/visualization/api/WebSocketServer';
import { EventStore } from './src/persistence/event-store';
import { ReasoningStore } from './src/persistence/reasoning-store';

async function startWebSocketServer() {
  // Create stores
  const eventStore = new EventStore();
  const reasoningStore = new ReasoningStore();

  // Create server
  const wsServer = new WebSocketServer(eventStore, reasoningStore, {
    port: 8080,
    heartbeatInterval: 30000,
    clientTimeout: 60000,
    maxBacklogSize: 1000,
    compression: true
  });

  // Setup event listeners
  wsServer.on('started', ({ port }) => {
    console.log(`WebSocket server listening on port ${port}`);
  });

  wsServer.on('client_connected', ({ clientId, subscriptions }) => {
    console.log(`Client ${clientId} connected with subscriptions:`, subscriptions);
  });

  wsServer.on('client_disconnected', ({ clientId, reason }) => {
    console.log(`Client ${clientId} disconnected: ${reason}`);
  });

  wsServer.on('error', ({ error, source }) => {
    console.error(`Error from ${source}:`, error);
  });

  // Start the server
  await wsServer.start();

  // Broadcast events to all connected clients
  wsServer.broadcastEvent({
    type: 'event',
    timestamp: new Date().toISOString(),
    data: {
      agent_id: 'test-generator',
      event_type: 'test_generated',
      test_count: 42
    }
  });

  // Get server statistics
  const stats = wsServer.getStatistics();
  console.log('Server stats:', stats);

  // Graceful shutdown
  process.on('SIGINT', async () => {
    console.log('Shutting down...');
    await wsServer.stop();
    process.exit(0);
  });
}

startWebSocketServer().catch(console.error);

Client Subscription Example

Connect with query parameters to filter events:

wscat -c "ws://localhost:8080?session_id=session-123&agent_id=test-gen&event_types=test_generated,test_passed"

Available subscription options:

  • session_id - Filter by session ID
  • agent_id - Filter by agent ID
  • event_types - Comma-separated list of event types
  • since - ISO timestamp to get events after

Message Types

Heartbeat

{
  "type": "heartbeat",
  "timestamp": "2025-11-21T13:00:00.000Z",
  "data": {
    "connected_clients": 5,
    "uptime_ms": 120000
  }
}

Event

{
  "type": "event",
  "timestamp": "2025-11-21T13:00:00.000Z",
  "data": {
    "agent_id": "test-gen",
    "event_type": "test_generated",
    "payload": { "test_count": 42 }
  }
}

Reasoning

{
  "type": "reasoning",
  "timestamp": "2025-11-21T13:00:00.000Z",
  "data": {
    "chain_id": "chain-123",
    "steps": [...],
    "verdict": "approved"
  }
}

Troubleshooting

Port already in use

# Find process using port 8080
lsof -i :8080

# Kill the process
kill -9 <PID>

Connection refused

  • Check if server is running
  • Verify port number matches
  • Check firewall settings

No messages received

  • Verify subscription filters
  • Check client connection status
  • Review server logs for errors

Performance Tuning

High throughput scenarios

const wsServer = new WebSocketServer(eventStore, reasoningStore, {
  port: 8080,
  maxBacklogSize: 5000,        // Increase queue size
  compression: true,            // Enable compression
  heartbeatInterval: 60000,     // Reduce heartbeat frequency
});

Low latency scenarios

const wsServer = new WebSocketServer(eventStore, reasoningStore, {
  port: 8080,
  maxBacklogSize: 100,          // Smaller queue
  compression: false,           // Disable compression
  heartbeatInterval: 10000,     // More frequent heartbeats
});

Further Reading

  • Full implementation details: docs/websocket-server-implementation.md
  • WebSocket API docs: src/visualization/api/WebSocketServer.ts
  • Test examples: scripts/test-websocket-standalone.js