GUI Architecture

GUI Architecture

React chat UI architecture for IDE and standalone consumption, centered on Redux state, RTK Query services, and event-driven chat streaming.

React 18.2 + TypeScript 5.8 (strict) + Vite 5.0 + Redux Toolkit 2.2 (RTK Query) + Radix UI/Themes + CSS Modules + Vitest 3.1 + MSW 2.3.

Build and packaging

• Builds to dist/chat/ as a browser UMD bundle.
• Builds to dist/events/ for event type exports.
• Consumed by IDE webviews and standalone web.

High-level flow

flowchart LR
  UI[React App] --> Redux[Redux store + RTK Query]
  Redux --> LSP[LSP Server :8001]
  Redux --> IDE[IDE via postMessage]
  LSP -->|chat, tools, caps, models| Redux
  IDE -->|file ops, theme, context| Redux
  Redux --> UI

Loading

Directory layout

From src/:

• app/ — store, middleware, storage
• features/ — Redux slices and feature UIs
  • Chat/Thread/ — multi-thread reducer, selectors, actions, types
  • Checkpoints/ — workspace rollback
  • Config/ — global settings and FeatureMenu
  • Connection/ — SSE connection status
  • Customization/ — agent modes, subagent forms, tool parameter editor
  • FIM/ — fill-in-middle debug
  • History/ — chat history
  • Integrations/ — integration config
  • Knowledge/ — memory system and knowledge graph view
  • Login/ — login page
  • Pages/ — navigation stack
  • PatchesAndDiffsTracker/
  • Providers/ — LLM provider config and OAuth
  • Tasks/ — task management
  • ThreadHistory/ — thread history view
• components/ — reusable UI
  • ChatContent/, ChatForm/, IntegrationsView/, Providers/, Sidebar/, Trajectory/, UsageCounter/, etc.
• hooks/ — custom hooks
• services/ — RTK Query APIs plus chat commands/subscription
• contexts/ — abort controllers, internal links
• events/ — IDE integration event types and setup
• lib/ — library entry
• utils/ — utilities, parsing, token math, test helpers

Core architecture

The app is organized around a Redux store created with combineSlices in src/app/store.ts. Feature state is split between:

• global slices like config, history, pages, sidebar, notifications
• chat runtime state in features/Chat/Thread/
• RTK Query APIs for server-backed resources

The chat layer does not use RTK Query for message streaming. Instead, it uses explicit commands plus an SSE subscription.

Related pages

• GUI State Management
• GUI Chat Flow