UI Architecture

The Advisor Console follows a page-based architecture with a collapsible sidebar navigation and shared layout components.

Application Layout

appLayout.tsx
├── Sidebar (collapsible, dark #111C33)
│   ├── Logo
│   ├── Navigation items
│   └── AI Button (animated lava blob)
├── Main Content Area
│   ├── Header
│   └── Page Content (router outlet)
└── Footer

Pages

Page	Route	Description
Home	/	Dashboard with quick actions
AI	/ai	AI landing page with animated lava lamp icon and 6 preset routines
AI Chat	/ai/chat	AI chat interface with session history
Destinations	/destinations	Destination list (Destination__c)
Destination Detail	/destinations/:id	Destination detail page
Members	/members	Member list with 4-axis filtering
Member Detail	/members/:id	Member detail page
Trips	/trips	Trip list with stage/date filters
Trip Detail	/trips/:id	Editable trip detail page
Tasks	/tasks	Task list with status/priority filters
Inbox	/inbox	Unified omnichannel inbox

Key Components

Component	Purpose
AIChat.tsx	Main AI assistant component (~1300 lines)
AIButton.tsx	Animated AI button with lava blob CSS and sparkle effects
ChatHistorySidebar.tsx	Chat history with RECENT/EARLIER grouping
ChatMessage.tsx	Chat message renderer
ContextSearchPopover.tsx	Real-time Salesforce record search for context attachment
Dialer.tsx	Phone dialer with call simulation
appLayout.tsx	Main layout with collapsible dark sidebar
graphqlClient.ts	GraphQL wrapper around Salesforce UIAPI
chatHistory.ts	IndexedDB CRUD operations for chat persistence

Component Co-location

src/
├── pages/          # Page components (one per route)
├── components/     # Shared UI components
├── hooks/          # Custom React hooks
├── libs/           # Utilities, GraphQL client, chat history
└── styles/         # Global styles and Tailwind config

Navigation

The sidebar provides access to all major sections. It collapses to icons on smaller screens. The AI button is prominently placed with an animated lava blob effect to draw attention to the AI capabilities.

Routing

React Router handles client-side routing. All routes are statically defined in the application entry point. Dynamic routes use URL parameters for detail pages (e.g., /members/:id).