Phase 1.2 -- Infrastructure Layer

Parent: #762

Context

Port the non-UI infrastructure from the Vue dashboard to React equivalents. The current Vue app has well-tested patterns for API communication, auth, and WebSocket -- the logic carries over, the implementation changes.

Scope

API Client

• Axios instance with base URL configuration
• Request/response interceptors (auth token injection, error normalization)
• TypeScript types for all API responses (port from current web/src/api/types.ts)
• Endpoint modules by domain (agents, tasks, budget, approvals, etc.)
• Error handling (network errors, 401 -> redirect to login, structured error responses)

Auth Module

• Login flow (POST /auth/login, token storage)
• Token refresh / session management
• Route guards (redirect unauthenticated users to /login)
• useAuth hook (current user, canRead/canWrite permissions)

WebSocket Client

• Ticket-based auth (GET ticket, connect with query param)
• Exponential backoff reconnection (1s -> 30s, max 20 attempts)
• Channel-based subscription model
• Handler deduplication
• Auto re-subscribe on reconnect
• Message size gating (131KB max)
• useWebSocket hook for component-level subscriptions
• Connection status tracking

State Management

• Zustand store conventions (one store per domain, matching current Pinia pattern)
• WebSocket event dispatch to stores
• Optimistic update pattern with rollback

Deliverables

• API client with all endpoint modules typed
• Auth module with login/logout/guard flow
• WebSocket client with subscription management
• Zustand store boilerplate (empty stores, conventions established)
• Unit tests for auth flow, WebSocket reconnection logic, API error handling

Blocked by

• Phase 1.1 (project scaffold)

Port from (reference)

• web/src/api/ (endpoint modules, types)
• web/src/composables/useAuth.ts
• web/src/composables/useWebSocketSubscription.ts
• web/src/stores/websocket.ts
• web/src/stores/auth.ts