# Pulse Haven A compassionate authenticated health companion for secure health records, gentle reminders, anomaly awareness, emergency contacts, accessibility, and nearby care discovery. ## Masterplan - Serve older adults, caregivers, people with disabilities, and multilingual households that need a calm, low-friction health dashboard. - Centralize personal health context: medical history, surgeries, allergies, medications, appointments, vitals, and trusted emergency contacts. - Provide “guardian mode” through deterministic anomaly checks and simulated emergency escalation without overstating real medical automation. - Make care actions feel human: supportive copy, large tap targets, voice prompts, dark comfort mode, and plain-language navigation. - Require authentication before showing health data through the injected GenMB Auth capability. ## Tech Stack & Architecture - **Runtime:** Static browser app loaded from `index.html`; no local build pipeline or package manager is present. - **React UI:** React `19.2.0` and ReactDOM are imported from `https://esm.sh`. Components are plain JS modules. - **JSX alternative:** JSX is not compiled. All UI uses `html` tagged templates from `src/jsx.js`, which binds `htm` to `React.createElement`. - **Routing:** `src/App.js` wraps authenticated routes in `HashRouter` from `react-router-dom@7.13.0`; hash URLs support static hosting refreshes. - **Styling:** Tailwind CDN from `index.html` plus app-specific CSS variables/utilities in `styles/main.css`. Components use Tailwind classes with CSS custom properties such as `hsl(var(--primary))`, `var(--radius-md)`, and `var(--shadow-md)`. - **Icons:** `lucide-react@0.468.0` is centralized through `src/components/Icons.js`. Import icons from this file only. - **Auth:** `index.html` injects `window.genmb.auth`. `src/components/AuthGate.js` blocks the entire app until `window.genmb.auth.ready()` resolves, supports Google sign-in, email magic links, session restore, auth state subscriptions, and sign-out. - **State:** `src/store/useHealthStore.js` is the health-data store used directly by pages via `useHealthStore((s) => ...)`. It holds demo/local app data such as `records`, `vitals`, `emergencyContacts`, and `language`, plus actions such as `addRecord`, `updateVitals`, and `setLanguage`. - **Providers:** `src/mainProviders.js` currently returns `React.Fragment`; place future app-wide providers there. - **Anomaly detection:** `src/utils/anomaly.js` is deterministic threshold logic, not ML. It returns `{ safe, alerts }`. - **Voice:** `src/utils/voice.js` provides `speak(messageKey, language)` for browser voice prompts. Dashboard, Emergency, and Accessibility call it; it must tolerate unsupported speech synthesis. Gotchas: - Use `className`, not `class`, inside `html` templates. - This app uses CDN ESM imports, not npm/bundled imports. - `window.genmb.auth` must exist before `src/main.js` runs. - “Encrypted vault”, “end-to-end privacy posture”, and “encrypted locally” are UI/demo copy unless real encryption is implemented in `src/store/useHealthStore.js` or a backend is added. - Emergency response is simulated. Current code does not send SMS, call contacts automatically, contact hospitals, or persist medical records server-side. ## File Structure ```text index.html App shell; Tailwind CDN, stylesheet, GenMB auth SDK injection, #root mount. styles/main.css Global theme tokens, care-card/focus styles, dark mode, background effects. src/main.js React root bootstrap; renders Providers > App. src/mainProviders.js Placeholder for global providers; currently React.Fragment only. src/jsx.js htm binding; all component markup uses `html` tagged templates. src/App.js AuthGate + HashRouter route table for all app pages. src/components/AuthGate.js Mandatory sign-in gate; Google auth, magic-link form, auth loading/errors. src/components/Layout.js Authenticated shell; desktop/sidebar nav, mobile drawer, header, sign-out. src/components/Icons.js Central lucide-react icon exports. src/components/MetricCard.js Reusable vitals card used on Dashboard. src/pages/Dashboard.js Guardian home; vitals cards, anomaly summary, next reminder/appointment, quick links. src/pages/Records.js Health record hub; category sections and add-record form. src/pages/Reminders.js Medication/appointment reminder experience using store records. src/pages/Emergency.js Anomaly simulation, vitals reset, trusted contacts with tel: links. src/pages/Care.js Static nearby provider list and appointment request UI. src/pages/Accessibility.js Voice language selection, voice test, dark-mode toggle. src/pages/NotFound.js Friendly fallback route with return-home link. src/store/useHealthStore.js App health state, demo records/vitals/contacts/language, mutation actions. src/utils/anomaly.js Threshold-based vitals analysis. src/utils/voice.js Browser speech synthesis helper for keyed multilingual prompts. CLAUDE.md Existing project instructions/documentation. ``` ## Key Features ### Authentication and protected app shell - `src/App.js` wraps every route with `AuthGate`, so health data UI is inaccessible without a GenMB session. - `src/components/AuthGate.js`: - waits for `window.genmb.auth.ready()`; - restores existing sessions; - supports Google sign-in via `window.genmb.auth.signIn()`; - sends magic links with `window.genmb.auth.sendMagicLink(email)`; - listens for auth changes with `onAuthStateChange`; - shows a warm sign-in screen and loading skeleton. - `src/components/Layout.js` reads `window.genmb.auth.getUser()` for display and calls `signOut()` from sidebar/header buttons. ### Dashboard / guardian mode - `src/pages/Dashboard.js` is the home route `/`. - Displays: - “Guardian mode active” hero; - voice greeting button using `speak('welcome', language)`; - vitals cards for heart rate, oxygen, blood pressure, and movement via `MetricCard`; - anomaly summary from `analyzeVitals(vitals)`; - next appointment from `records.appointments`; - next medication reminder from `records.medications[0]`; - quick links to records, reminders, and care. ### Health record hub - `src/pages/Records.js` supports five record categories: - `history` - `surgeries` - `allergies` - `medications` - `appointments` - The add-record form writes through `addRecord(section, record)`. - New record objects currently include broad compatibility fields: - `id` - `title` - `name` - `date` - `detail` - `dose` - `schedule` - `next` - Records render category-specific fallback fields: `title || name || doctor`, then date/schedule/time, then detail/dose/place. ### Reminders - `src/pages/Reminders.js` presents gentle care reminders for medication schedules and appointments from store data. - Reminder tone should stay supportive and non-punitive. - If adding actions, prefer local store mutations first unless persistence is explicitly added. ### Emergency and anomaly awareness - `src/utils/anomaly.js` thresholds: - heart rate > `120` or < `45` - oxygen < `92` - systolic > `180` or diastolic > `120` - inactivity / stillness > `240` minutes - `src/pages/Emergency.js`: - displays current analysis and monitored values; - `simulate()` sets demo unsafe vitals `{ heartRate: 132, oxygen: 89, lastMovementMinutes: 310 }`, calls `speak('emergency', language)`, and updates a local protocol log; - `reset()` restores safe demo vitals `{ heartRate: 78, oxygen: 97, systolic: 118, diastolic: 76, lastMovementMinutes: 12 }`; - lists `emergencyContacts` and exposes manual `tel:` call links. - Do not describe current behavior as automatic calling or real emergency dispatch. ### Nearby care discovery - `src/pages/Care.js` uses a static provider list: - Harborview Heart Clinic - Riverside Family Health - Northgate Urgent Care - Lotus Mobility Therapy - Shows distance, availability, service type, and a non-functional “Request appointment” button. - No map API, geolocation, provider backend, or booking integration currently exists. ### Accessibility and voice - `src/pages/Accessibility.js` manages language via `useHealthStore`. - Supported voice language choices: - `en-US` English - `es-ES` Español - `hi-IN` हिन्दी - `fr-FR` Français - “Test voice notification” calls `speak('welcome', language)`. - Dark comfort mode toggles `document.documentElement.classList.toggle('dark')`; it is not persisted unless added. ### Data model Current store shape should be treated as local/demo health state: ```js { language: 'en-US', vitals: { heartRate: number, oxygen: number, systolic: number, diastolic: number, lastMovementMinutes: number }, records: { history: Array, surgeries: Array, allergies: Array, medications: Array, appointments: Array }, emergencyContacts: Array<{ id: string, name: string, relation: string, phone: string }> } ``` ## Design Guidelines - Visual tone: calm medical warmth, not sterile enterprise healthcare. - Theme is token-driven in `styles/main.css`; use existing variables rather than hardcoded colors: - primary blue/teal health tone: `hsl(var(--primary))` - secondary supportive accent: `hsl(var(--secondary))` - urgent state: `hsl(var(--destructive))` - surfaces: `hsl(var(--card))`, `hsl(var(--background))`, `hsl(var(--muted))` - Use `care-card` for elevated panels and `focus-ring` for interactive elements. - Keep large tap targets: most buttons use `px-5 py-3`, rounded `var(--radius-md)`, and bold labels. - Use direct, reassuring language: “gentle reminder”, “check-in recommended”, “when you are ready”. - Responsive behavior: - desktop uses a persistent left sidebar in `Layout.js`; - mobile uses sticky header + slide-out drawer; - page grids collapse from `lg:`/`md:` layouts to single-column cards. ## App Flow 1. User opens `index.html`. 2. `src/main.js` mounts `Providers > App`. 3. `AuthGate` waits for GenMB auth readiness. 4. If unauthenticated: - show sign-in page; - user chooses Google or email magic link. 5. If authenticated: - render `HashRouter` inside `Layout`; - default route `/` shows `Dashboard`. 6. Primary navigation: - `/` Home - `/records` Records - `/reminders` Reminders - `/emergency` Emergency - `/care` Nearby care - `/accessibility` Accessibility 7. Edge cases: - unknown hash route renders `NotFound`; - auth check failure displays an auth message but keeps user outside protected UI; - popup closed during Google login shows a gentle retry message; - unsupported voice should fail gracefully in `speak`; - empty record sections show “No entries yet”. ## Conventions - Components are named exports from their file, e.g. `export function Dashboard()`. - Page components live in `src/pages/` and are registered in `src/App.js`. - Shared UI components live in `src/components/`. - Store access should use selectors: ```js const vitals = useHealthStore((s) => s.vitals); const updateVitals = useHealthStore((s) => s.updateVitals); ``` - Markup uses: ```js return html`

...

`; ``` - For lists, always provide stable `key` values in mapped templates. - For new icons: 1. add the lucide export in `src/components/Icons.js`; 2. import from `../components/Icons.js`, not directly from `lucide-react`. - To add a new page: 1. create `src/pages/NewPage.js`; 2. export `NewPage`; 3. import it in `src/App.js`; 4. add a ``; 5. add a nav item in `src/components/Layout.js` if it should be user-facing. - To add real persistence/encryption: - implement it in `src/store/useHealthStore.js` or a backend API; - update UI claims in `Records.js` to match actual guarantees; - ensure data remains scoped to `window.genmb.auth.getUser().id`. - To add real hospital/appointment integration: - replace the static `providers` array in `src/pages/Care.js`; - add loading/error/empty states; - do not reuse the current “Request appointment” button as if it books care until an API exists. ## Platform (GenMB) This app is built and hosted on GenMB. **Runtime:** Browser sandbox (iframe) or Cloud Run. No Node.js server — all code runs client-side unless `backend/` exists. **Dependencies:** CDN-only (esm.sh, cdn.tailwindcss.com, unpkg). Use ES module imports with full CDN URLs. No `npm install` at runtime. **Entry point:** `index.html` must include all CDN script tags. Tailwind via CDN with inline config. **Built-in services (relative API paths only, never hardcode domains):** - `/api/ai/completion` — AI proxy | `/api/data/{appId}/*` — PostgreSQL (DataConnect SDK) - `/api/storage/{appId}/*` — File uploads (GCS) | `/api/auth/google/*` — Google OAuth - `/api/contact/submit` — Contact form | SDKs: `window.genmb.db`, `.storage`, `.auth` **File structure:** `index.html` (entry), `src/` (source), `styles/` (CSS), `backend/` (optional FastAPI), `CLAUDE.md` (this file). **Cannot:** Install npm packages at runtime, access filesystem, make direct server-side calls from frontend, modify infra.