Implement client-side SSE handling #35

New Issue

cardosofelipe · 2025-12-29T23:48:24Z

cardosofelipe commented

2025-12-29 23:48:24 +00:00

Description

Create React hooks and utilities for consuming SSE events.

Requirements

Hook: useProjectEvents

function useProjectEvents(projectId: string): {
  events: ProjectEvent[];
  isConnected: boolean;
  error: Error | null;
  reconnect: () => void;
}

Features

Automatic reconnection with exponential backoff
Event parsing and type safety
Connection state management
Event buffer (last 100 events)

Event Store

interface EventStore {
  events: ProjectEvent[];
  addEvent: (event: ProjectEvent) => void;
  clearEvents: () => void;
}

Components

ConnectionStatus indicator
EventList component (for activity feed)

Tests

Hook behavior
Reconnection logic
Event parsing
Store management

Acceptance Criteria

useProjectEvents hook implemented
Auto-reconnection working
Type-safe event handling
Connection status UI
Unit tests

Dependencies

Depends on: #34 (SSE endpoint)

Assignable To

frontend-engineer agent

## Description Create React hooks and utilities for consuming SSE events. ## Requirements ### Hook: useProjectEvents ```typescript function useProjectEvents(projectId: string): { events: ProjectEvent[]; isConnected: boolean; error: Error | null; reconnect: () => void; } ``` ### Features - Automatic reconnection with exponential backoff - Event parsing and type safety - Connection state management - Event buffer (last 100 events) ### Event Store ```typescript interface EventStore { events: ProjectEvent[]; addEvent: (event: ProjectEvent) => void; clearEvents: () => void; } ``` ### Components - ConnectionStatus indicator - EventList component (for activity feed) ### Tests - Hook behavior - Reconnection logic - Event parsing - Store management ## Acceptance Criteria - [ ] useProjectEvents hook implemented - [ ] Auto-reconnection working - [ ] Type-safe event handling - [ ] Connection status UI - [ ] Unit tests ## Dependencies - Depends on: #34 (SSE endpoint) ## Assignable To frontend-engineer agent

cardosofelipe referenced this issue

2025-12-29 23:49:19 +00:00

Implement project dashboard page #40

cardosofelipe referenced this issue

2025-12-29 23:49:20 +00:00

Implement activity feed component #43

cardosofelipe added the frontend phase-1 labels 2025-12-29 23:50:16 +00:00

cardosofelipe referenced this issue from a commit

2025-12-30 00:34:52 +00:00

feat(frontend): Implement client-side SSE handling (#35)

cardosofelipe referenced a pull request that will close this issue

2025-12-30 00:35:02 +00:00