Frontend Architecture

Tech Stack

• React 19 (app/src/)
• Redux Toolkit + Redux-Persist (session state)
• Vite (build tool)
• TypeScript / TSX (~285 files)

Directory Structure

app/src/
├── App.tsx                 # Provider chain + HashRouter
├── AppRoutes.tsx           # Route table + guards
├── main.tsx                # Entry point (Sentry, store, styles)
├── store/                  # Redux slices and selectors
├── providers/              # UserProvider, SocketProvider, AIProvider, SkillProvider
├── services/               # apiClient, socketService, coreRpcClient
├── lib/                    # AI loaders, MCP helpers
├── pages/                  # Route-level screens
├── components/             # Shared UI components
├── hooks/                  # App hooks
└── utils/                  # Config, Tauri helpers

Provider Chain

Redux Provider
  └─ PersistGate
      └─ UserProvider
          └─ SocketProvider
              └─ AIProvider
                  └─ SkillProvider
                      └─ HashRouter

Why this order:

1. Redux outermost provides useAppSelector/dispatch
2. PersistGate rehydrates before children depend on auth
3. SocketProvider uses JWT
4. AIProvider/SkillProvider depend on socket and store

Service Layer

Service	Purpose
apiClient	REST to backend
socketService	Socket.io real-time communication
coreRpcClient	HTTP to local openhuman core (JSON-RPC)

State Management

Redux state structure:

RootState = {
  auth: { token, isOnboardedByUser },
  socket: { byUser: { status, socketId } },
  user: { profile, loading, error },
  telegram: { byUser: { ... } },
};

Persistence

Persisted: auth.token, auth.isOnboardedByUser, telegram.byUser Not persisted: socket connection status, user.loading

Routing

Using HashRouter:

Route	Description
/	Welcome (public)
/onboarding/*	Onboarding flow
/home	Main dashboard (requires auth)
/settings/*	Settings modals

Components

Connection Status Components

• ConnectionIndicator - Generic connection status
• TelegramConnectionIndicator - Telegram status
• TelegramConnectionModal - Connection settings modal

Settings Modal System

/settings → SettingsHome
/settings/connections → ConnectionsPanel
/settings/privacy → PrivacyPanel

Next Steps

• Tauri Shell - Desktop host
• Architecture Overview - Complete system architecture