11 — Frontend Architecture¶

Four-Zone Layout¶

┌──────┬────────────────┬──────────────────────────────┬──────────┐
│ ICON │  LEFT PANEL    │    CONVERSATION COLUMN       │ PROGRESS │
│ RAIL │  (300px,       │    (max-w 720px, centered)   │ STRIP    │
│(56px)│   sliding)     │                              │(collapse)│
│      │                │                              │          │
│ 📋   │ Cases list     │  Agent message (plain text)  │ Phase 3  │
│ 📄   │ EHR summary    │                              │ ████░░   │
│ ⚙️   │ Documents      │  Patient message (teal pill) │          │
│      │ Patient summary│                              │ Docs 3/5 │
│      │                │  [Document card w/ progress] │          │
│      │                │                              │ Matching │
│      │                │  [Match result cards]        │ pending  │
│      │                │                              │          │
│      │                │  [Suggested action chips]    │          │
│      │                │                              │          │
│      │                │  ┌────────────────────┐      │          │
│      │                │  │ Type a message...  │      │          │
│      │                │  │              📎 ➤  │      │          │
│      │                │  └────────────────────┘      │          │
└──────┴────────────────┴──────────────────────────────┴──────────┘

Technology¶

Framework: Vite + React + TypeScript
Hosting: Vercel at app.curaway.ai
UI Components: Lovable-generated, customized with shadcn/ui + Tailwind
Auth: @clerk/clerk-react
Data fetching: @tanstack/react-query
Routing: react-router-dom v6
Analytics: PostHog SDK
Real-time: SSE client (custom useEventStream hook)

Brand System¶

Token	Value
Teal	#008B8B
Coral	#FF7F50
Deep Ocean	#004D4D
Font	Montserrat
Patient messages	Teal pill background
Agent messages	Plain text on page background
Accessibility	WCAG 2.1 AA

Key Components¶

Component	Location	Purpose
`ChatInput`	Conversation column	Text input + file attachment + send
`MessageThread`	Conversation column	Renders message list by content_type
`DocumentCard`	Inline in thread	Upload progress, analysis results
`ProviderMatchCard`	Inline in thread	Score, cost, differentiators, reasoning
`ActionChips`	Below agent messages	Suggested next actions (tappable)
`EHRSummary`	Left panel	Real-time patient record summary
`DocumentChecklist`	Left panel	Required/uploaded docs with status
`ProgressStrip`	Right panel	Workflow phase + completion %
`ProviderDetail`	Full page (route)	Provider profile + doctor roster

SSE Integration Points¶

SSE Event	Frontend Reaction
`document_update`	Update DocumentCard in thread + DocumentChecklist in left panel
`ehr_update`	Refresh EHRSummary in left panel
`intake_progress`	Update ProgressStrip percentage
`match_progress`	Show stage transitions in ProgressStrip
`agent_response`	Append to MessageThread (may stream token-by-token)