Skip to main content

Frontend Architecture

The frontend is a React 18 + TypeScript + Vite app with Redux Toolkit and Socket.IO client support.

Primary Routes​

The current route set covers:

  • /chat for chat mode
  • /agent for agent workspaces
  • /dashboard and /settings
  • /presentations and /storybooks
  • auth and callback routes
  • billing result pages
  • public/legal pages

The app is broad enough that frontend docs need to describe flows, not just component structure.

Provider Tree​

The top-level provider path is:

AppEventsProvider → WebSocketProvider → ChatProvider → Router outlet

This is important because the realtime event system and session reconciliation depend on shared singleton-style coordination.

Important Hooks​

The codemap highlights a few especially important hooks:

  • useAppEvents for central event dispatch
  • useSessionManager for replay and reconciliation
  • useChatTransport and useChatQuery for transport and send flows
  • useUploadFiles for asset ingress
  • useWebsocketAuthSync for auth-token coordination

Redux State​

Major slices track:

  • messages and editing state
  • agent run status
  • sessions and session lifecycle
  • UI tabs and milestones
  • files and uploads
  • settings and tool preferences
  • user profile and auth state

Service Layer​

The frontend has domain-mapped API clients for auth, billing, chat, projects, slides, storybooks, connectors, prompts, uploads, and settings. That separation mirrors the backend domain layout and keeps transport code out of components.

Event Flow​

Socket events enter through the WebSocket context, then route through the shared app-event handler, which dispatches into Redux updates. Session replay uses the same event path, which helps keep live execution and persisted state aligned.

Practical Notes​

  • The Vite dev server runs on port 1420 in the current local flow.
  • frontend/.env is separate from the backend .env.
  • Some themes and UI flags are controlled through VITE_* variables, not backend settings.