Dashboard: Add SSE auto-sync for real-time updates #178

New issue

Closed

opened 2026-01-24 10:29:41 +00:00 by jack · 0 comments

jack commented

2026-01-24 10:29:41 +00:00

Owner

Beschreibung

Das Dashboard hat aktuell kein Auto-Sync via Server-Sent Events. Statistiken und Status-Informationen werden nicht automatisch aktualisiert.

Relevante SSE Events

Das Backend sendet bereits alle nötigen Events:

Event	Beschreibung
`session:started`	Neue Session gestartet
`session:ended`	Session beendet
`observation:created`	Neue Observation erstellt
`worker:connected`	Worker verbunden
`worker:disconnected`	Worker getrennt
`worker:spawned`	Worker-Prozess gestartet
`worker:exited`	Worker-Prozess beendet
`task:queued`	Task in Queue
`task:assigned`	Task an Worker zugewiesen
`task:completed`	Task abgeschlossen
`task:failed`	Task fehlgeschlagen

Zu implementieren

1. Dashboard-Statistiken live aktualisieren

// Zähler inkrementell updaten statt Polling
eventSource.onmessage = (event) => {
  const { type, data } = JSON.parse(event.data);
  
  switch (type) {
    case 'observation:created':
      setStats(prev => ({ ...prev, totalObservations: prev.totalObservations + 1 }));
      break;
    case 'session:started':
      setStats(prev => ({ ...prev, activeSessions: prev.activeSessions + 1 }));
      break;
    case 'session:ended':
      setStats(prev => ({ ...prev, activeSessions: prev.activeSessions - 1 }));
      break;
    case 'worker:connected':
      setStats(prev => ({ ...prev, connectedWorkers: prev.connectedWorkers + 1 }));
      break;
    // ...
  }
};

2. Task-Queue Status

case 'task:queued':
  setQueueStats(prev => ({ ...prev, pending: prev.pending + 1 }));
  break;
case 'task:assigned':
  setQueueStats(prev => ({ 
    ...prev, 
    pending: prev.pending - 1,
    processing: prev.processing + 1 
  }));
  break;
case 'task:completed':
  setQueueStats(prev => ({ ...prev, processing: prev.processing - 1 }));
  break;

3. Gemeinsamer SSE-Hook

Kann mit #177 (Memories SSE) kombiniert werden:

// packages/ui/src/hooks/useSSE.ts
export function useSSE(handlers: Record<string, (data: any) => void>) {
  useEffect(() => {
    const eventSource = new EventSource('/api/stream/events');
    
    eventSource.onmessage = (event) => {
      const { type, data } = JSON.parse(event.data);
      handlers[type]?.(data);
    };
    
    return () => eventSource.close();
  }, [handlers]);
}

Betroffene Dateien

packages/ui/src/views/DashboardView.tsx (oder ähnlich)
packages/ui/src/hooks/useSSE.ts (neu, gemeinsam mit #177)

Priorität

Mittel - Dashboard sollte Live-Status zeigen, besonders Worker- und Task-Queue-Status

## Beschreibung Das Dashboard hat aktuell kein Auto-Sync via Server-Sent Events. Statistiken und Status-Informationen werden nicht automatisch aktualisiert. ## Relevante SSE Events Das Backend sendet bereits alle nötigen Events: | Event | Beschreibung | |-------|--------------| | `session:started` | Neue Session gestartet | | `session:ended` | Session beendet | | `observation:created` | Neue Observation erstellt | | `worker:connected` | Worker verbunden | | `worker:disconnected` | Worker getrennt | | `worker:spawned` | Worker-Prozess gestartet | | `worker:exited` | Worker-Prozess beendet | | `task:queued` | Task in Queue | | `task:assigned` | Task an Worker zugewiesen | | `task:completed` | Task abgeschlossen | | `task:failed` | Task fehlgeschlagen | ## Zu implementieren ### 1. Dashboard-Statistiken live aktualisieren ```typescript // Zähler inkrementell updaten statt Polling eventSource.onmessage = (event) => { const { type, data } = JSON.parse(event.data); switch (type) { case 'observation:created': setStats(prev => ({ ...prev, totalObservations: prev.totalObservations + 1 })); break; case 'session:started': setStats(prev => ({ ...prev, activeSessions: prev.activeSessions + 1 })); break; case 'session:ended': setStats(prev => ({ ...prev, activeSessions: prev.activeSessions - 1 })); break; case 'worker:connected': setStats(prev => ({ ...prev, connectedWorkers: prev.connectedWorkers + 1 })); break; // ... } }; ``` ### 2. Task-Queue Status ```typescript case 'task:queued': setQueueStats(prev => ({ ...prev, pending: prev.pending + 1 })); break; case 'task:assigned': setQueueStats(prev => ({ ...prev, pending: prev.pending - 1, processing: prev.processing + 1 })); break; case 'task:completed': setQueueStats(prev => ({ ...prev, processing: prev.processing - 1 })); break; ``` ### 3. Gemeinsamer SSE-Hook Kann mit #177 (Memories SSE) kombiniert werden: ```typescript // packages/ui/src/hooks/useSSE.ts export function useSSE(handlers: Record<string, (data: any) => void>) { useEffect(() => { const eventSource = new EventSource('/api/stream/events'); eventSource.onmessage = (event) => { const { type, data } = JSON.parse(event.data); handlers[type]?.(data); }; return () => eventSource.close(); }, [handlers]); } ``` ## Betroffene Dateien - `packages/ui/src/views/DashboardView.tsx` (oder ähnlich) - `packages/ui/src/hooks/useSSE.ts` (neu, gemeinsam mit #177) ## Verwandte Issues - #177 (Memories SSE Auto-Sync) - #161 (SSE Broadcaster ungenutzte Methoden) ## Priorität Mittel - Dashboard sollte Live-Status zeigen, besonders Worker- und Task-Queue-Status