frontend/src/components/AGENT.md

Agent Guide for components/

Context

Page-level UI panels rendered by ChatInterface. Each component manages a major area of the interface (conversation, dashboard, settings, reports, observability, camera).

Structure & Navigation

Component	Purpose	Data Source (Hook)	Backend Dependencies
ChatInterface.tsx	Main layout + conversation panel	useConversation, useSession, useListening	WebSocket (/api/stream/ws), /api/session/inject-text
DashboardGrid.tsx	Health dashboard cards	useDashboardData	/api/stream/dashboard-stats
SettingsPanel.tsx	Profile, medical, meds, dev settings	useSettings, useConsent	/api/profile, /api/medications, /api/wakeword, /api/consent, /api/stream/reset-db, /api/conversation-log
ReportsPanel.tsx	View/export health reports	(inline fetch)	/api/appointment-export
ObservabilityPanel.tsx	Real-time monitoring metrics	useObservability	/api/stream/observability, /api/stream/cost-summary, cost.update WS events
CameraView.tsx	Robot camera feed + head control	(via useConversation)	camera.frame WS events, /api/move-head
ComponentOverlay.tsx	Floating GenUI component display	useConversation	ui.component / ui.dismiss WS events
ConsentModal.tsx	GDPR-style consent dialog	useConsent	/api/consent

Dependencies & Connections

• Hooks: Every component gets its data from hooks in ../hooks/. See hooks/AGENT.md.
• Registry: ComponentOverlay renders GenUI components from ../registry/. See registry/AGENT.md.
• WebSocket events that trigger component state changes:
  • ui.navigate → ChatInterface opens/closes panels
  • ui.settings_updated → SettingsPanel re-fetches profile/meds
  • session.* → ChatInterface updates session indicator

When Adding a New Panel

1. Create NewPanel.tsx in this directory
2. Create or extend a hook in ../hooks/ for data fetching
3. Add navigation entry in ChatInterface.tsx bottom bar
4. If voice-navigable: add target to ui_control.py backend tool + emit_ui_navigate()
5. Update this AGENT.md