chore: drop orphan public/vendor/tiptap.bundle.js

90 KB pre-built Tiptap bundle from the old vanilla CMS. Not referenced anywhere — Tiptap now comes from npm through the Vite bundle (commit e323faa). Deleting the whole public/vendor/ directory since this was its only file. Confirmed no references via: grep -rn "vendor/tiptap\\|tiptap.bundle" . --include="*.ts" --include="*.tsx" --include="*.html" --include="*.js"
feat(notes): structured ROS + PE + ICD-10 diagnosis pickers (WellVisit, SickVisit)
2026-04-24 05:24:09 +02:00 · 2026-04-24 05:24:09 +02:00 · 2026-04-24 05:24:09 +02:00 · 2026-04-24 05:24:09 +02:00 · 2026-04-24 05:24:09 +02:00 · 2026-04-24 05:24:09 +02:00
282 changed files with 31648 additions and 26484 deletions
--- a/.gitignore
+++ b/.gitignore
@ -2,7 +2,7 @@ node_modules/
 .env
 .env.local
 .env.production
-data/
+/data/
 !public/data/
 *.db
 *.db-journal
@ -36,3 +36,6 @@ public/models/
 e2e/node_modules/
 e2e/test-results/
 e2e/playwright-report/
 # Codex CLI marker
 .codex
--- a/client/.gitignore
+++ b/client/.gitignore
@ -0,0 +1,24 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 dist
 dist-ssr
 *.local
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/client/README.md
+++ b/client/README.md
@ -0,0 +1,73 @@
 # React + TypeScript + Vite
 This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
 Currently, two official plugins are available:
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
 ## React Compiler
 The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
 ## Expanding the ESLint configuration
 If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
 ```js
 export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Remove tseslint.configs.recommended and replace with this
      tseslint.configs.recommendedTypeChecked,
      // Alternatively, use this for stricter rules
      tseslint.configs.strictTypeChecked,
      // Optionally, add this for stylistic rules
      tseslint.configs.stylisticTypeChecked,
      // Other configs...
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
 ])
 ```
 You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
 ```js
 // eslint.config.js
 import reactX from 'eslint-plugin-react-x'
 import reactDom from 'eslint-plugin-react-dom'
 export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      // Other configs...
      // Enable lint rules for React
      reactX.configs['recommended-typescript'],
      // Enable lint rules for React DOM
      reactDom.configs.recommended,
    ],
    languageOptions: {
      parserOptions: {
        project: ['./tsconfig.node.json', './tsconfig.app.json'],
        tsconfigRootDir: import.meta.dirname,
      },
      // other options...
    },
  },
 ])
 ```
--- a/client/components.json
+++ b/client/components.json
@ -0,0 +1,21 @@
 {
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "rsc": false,
  "tsx": true,
  "tailwind": {
    "config": "",
    "css": "src/index.css",
    "baseColor": "slate",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "iconLibrary": "lucide"
 }
--- a/client/eslint.config.js
+++ b/client/eslint.config.js
@ -0,0 +1,22 @@
 import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import tseslint from 'typescript-eslint'
 import { defineConfig, globalIgnores } from 'eslint/config'
 export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{ts,tsx}'],
    extends: [
      js.configs.recommended,
      tseslint.configs.recommended,
      reactHooks.configs.flat.recommended,
      reactRefresh.configs.vite,
    ],
    languageOptions: {
      globals: globals.browser,
    },
  },
 ])
--- a/client/index.html
+++ b/client/index.html
@ -0,0 +1,13 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>client</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/client/package-lock.json
+++ b/client/package-lock.json
--- a/client/package.json
+++ b/client/package.json
@ -0,0 +1,47 @@
 {
  "name": "client",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "engines": {
    "node": ">=20"
  },
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tailwindcss/vite": "^4.2.4",
    "@tanstack/react-query": "^5.100.1",
    "@tiptap/extension-link": "^3.22.4",
    "@tiptap/extension-underline": "^3.22.4",
    "@tiptap/pm": "^3.22.4",
    "@tiptap/react": "^3.22.4",
    "@tiptap/starter-kit": "^3.22.4",
    "class-variance-authority": "^0.7.1",
    "clsx": "^2.1.1",
    "lucide-react": "^1.9.0",
    "react": "^19.2.5",
    "react-dom": "^19.2.5",
    "react-router-dom": "^7.14.2",
    "tailwind-merge": "^3.5.0",
    "tailwindcss": "^4.2.4",
    "zod": "^4.3.6"
  },
  "devDependencies": {
    "@eslint/js": "^10.0.1",
    "@types/node": "^24.12.2",
    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^6.0.1",
    "eslint": "^10.2.1",
    "eslint-plugin-react-hooks": "^7.1.1",
    "eslint-plugin-react-refresh": "^0.5.2",
    "globals": "^17.5.0",
    "typescript": "~6.0.2",
    "typescript-eslint": "^8.58.2",
    "vite": "^8.0.10"
  }
 }
--- a/client/public/favicon.svg
+++ b/client/public/favicon.svg
--- a/client/public/icons.svg
+++ b/client/public/icons.svg
@ -0,0 +1,24 @@
 <svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="bluesky-icon" viewBox="0 0 16 17">
    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
  </symbol>
  <symbol id="discord-icon" viewBox="0 0 20 19">
    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
  </symbol>
  <symbol id="documentation-icon" viewBox="0 0 21 20">
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
  </symbol>
  <symbol id="github-icon" viewBox="0 0 19 19">
    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
  </symbol>
  <symbol id="social-icon" viewBox="0 0 20 20">
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
  </symbol>
  <symbol id="x-icon" viewBox="0 0 19 19">
    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
  </symbol>
 </svg>
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@ -0,0 +1,101 @@
 import { lazy, Suspense } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { BrowserRouter, Routes, Route, Navigate, Link } from 'react-router-dom';
 import Layout from '@/components/Layout';
 import AuthGuard from '@/components/AuthGuard';
 // Lightweight pages stay in the main chunk.
 import Extensions from '@/pages/Extensions';
 import Faq from '@/pages/Faq';
 // Heavy pages lazy-load — keeps the initial bundle small.
 const Auth            = lazy(() => import('@/pages/Auth'));
 const ResetPassword   = lazy(() => import('@/pages/ResetPassword'));
 const Dictation       = lazy(() => import('@/pages/Dictation'));
 const Encounter       = lazy(() => import('@/pages/Encounter'));
 const Soap            = lazy(() => import('@/pages/Soap'));
 const SickVisit       = lazy(() => import('@/pages/SickVisit'));
 const HospitalCourse  = lazy(() => import('@/pages/HospitalCourse'));
 const ChartReview     = lazy(() => import('@/pages/ChartReview'));
 const WellVisit       = lazy(() => import('@/pages/WellVisit'));
 const VaxSchedule     = lazy(() => import('@/pages/VaxSchedule'));
 const Catchup         = lazy(() => import('@/pages/Catchup'));
 const Settings        = lazy(() => import('@/pages/Settings'));
 const Learning        = lazy(() => import('@/pages/Learning'));
 const PeGuide         = lazy(() => import('@/pages/PeGuide'));
 const Bedside         = lazy(() => import('@/pages/Bedside'));
 const Calculators     = lazy(() => import('@/pages/Calculators'));
 const Admin           = lazy(() => import('@/pages/Admin'));
 const Cms             = lazy(() => import('@/pages/Cms'));
 const queryClient = new QueryClient({
  defaultOptions: { queries: { staleTime: 30_000, retry: 1 } },
 });
 function RouteFallback() {
  return (
    <div className="max-w-3xl mx-auto p-6 text-sm text-muted-foreground">Loading…</div>
  );
 }
 function Home() {
  return (
    <div className="max-w-3xl mx-auto p-6 space-y-4">
      <h1 className="text-2xl font-semibold">Pediatric AI Scribe</h1>
      <p className="text-sm text-muted-foreground">Pick a tool from the sidebar.</p>
      <ul className="list-disc pl-6 text-sm space-y-1">
        <li><Link to="/encounter" className="underline">Encounter HPI</Link></li>
        <li><Link to="/dictation" className="underline">Dictation HPI</Link></li>
        <li><Link to="/soap" className="underline">SOAP Note</Link></li>
        <li><Link to="/sickvisit" className="underline">Sick Visit</Link></li>
        <li><Link to="/wellvisit" className="underline">Well Visit</Link></li>
        <li><Link to="/peguide" className="underline">Physical Exam Guide</Link></li>
        <li><Link to="/bedside" className="underline">Bedside</Link></li>
        <li><Link to="/calculators" className="underline">Calculators</Link></li>
        <li><Link to="/learning" className="underline">Learning Hub</Link></li>
      </ul>
    </div>
  );
 }
 export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>
        <Suspense fallback={<RouteFallback />}>
          <Routes>
            {/* Public routes */}
            <Route path="/auth"           element={<Auth />} />
            <Route path="/reset-password" element={<ResetPassword />} />
            {/* Private routes — AuthGuard + Layout wrap everything */}
            <Route element={<AuthGuard />}>
              <Route element={<Layout />}>
                <Route path="/"             element={<Home />} />
                <Route path="/encounter"    element={<Encounter />} />
                <Route path="/dictation"    element={<Dictation />} />
                <Route path="/soap"         element={<Soap />} />
                <Route path="/sickvisit"    element={<SickVisit />} />
                <Route path="/hospital"     element={<HospitalCourse />} />
                <Route path="/chart"        element={<ChartReview />} />
                <Route path="/wellvisit"    element={<WellVisit />} />
                <Route path="/vaxschedule"  element={<VaxSchedule />} />
                <Route path="/catchup"      element={<Catchup />} />
                <Route path="/extensions"   element={<Extensions />} />
                <Route path="/settings"     element={<Settings />} />
                <Route path="/learning"     element={<Learning />} />
                <Route path="/peguide"      element={<PeGuide />} />
                <Route path="/bedside"      element={<Bedside />} />
                <Route path="/calculators"  element={<Calculators />} />
                <Route path="/admin"        element={<Admin />} />
                <Route path="/cms"          element={<Cms />} />
                <Route path="/faq"          element={<Faq />} />
                <Route path="*" element={<Navigate to="/" replace />} />
              </Route>
            </Route>
          </Routes>
        </Suspense>
      </BrowserRouter>
    </QueryClientProvider>
  );
 }
--- a/client/src/components/AuthGuard.tsx
+++ b/client/src/components/AuthGuard.tsx
@ -0,0 +1,30 @@
 // ============================================================
 // AUTH GUARD — redirects to /auth if /api/auth/me returns 401.
 // Wraps every private route so unauthenticated users land on
 // the login screen automatically.
 // ============================================================
 import { Navigate, useLocation, Outlet } from 'react-router-dom';
 import { useQuery } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 import type { MeOk } from '@/shared/types';
 export default function AuthGuard() {
  const loc = useLocation();
  const { data, isLoading, isError } = useQuery<MeOk>({
    queryKey: ['auth-me'],
    queryFn: () => api.get<MeOk>('/api/auth/me'),
    retry: false,
    staleTime: 5 * 60_000,
  });
  if (isLoading) {
    return <div className="min-h-screen flex items-center justify-center text-sm text-muted-foreground">Loading…</div>;
  }
  if (isError || !data?.user) {
    // Preserve deep link so we can bounce the user back after sign-in.
    const next = encodeURIComponent(loc.pathname + loc.search);
    return <Navigate to={`/auth?next=${next}`} replace />;
  }
  return <Outlet />;
 }
--- a/client/src/components/ConfirmModal.tsx
+++ b/client/src/components/ConfirmModal.tsx
@ -0,0 +1,111 @@
 // ============================================================
 // CONFIRM MODAL — React replacement for the vanilla showConfirm()
 // helper. Daniel's feedback is explicit: never call window.confirm()
 // in the frontend — use a styled modal that matches the app's design
 // language. Supports a danger variant (destructive actions like
 // revoke) and an optional password-input variant (e.g. "confirm by
 // entering your password" for 2FA backup-code regen).
 // ============================================================
 import { useEffect, useState } from 'react';
 interface ConfirmModalProps {
  open: boolean;
  title: string;
  body?: string;
  confirmText?: string;
  cancelText?: string;
  danger?: boolean;
  // When true, a password field is shown and the value is passed to onConfirm.
  requirePassword?: boolean;
  passwordPlaceholder?: string;
  onConfirm: (password?: string) => void;
  onCancel: () => void;
  busy?: boolean;
 }
 export default function ConfirmModal({
  open,
  title,
  body,
  confirmText = 'Confirm',
  cancelText = 'Cancel',
  danger = false,
  requirePassword = false,
  passwordPlaceholder = 'Password',
  onConfirm,
  onCancel,
  busy = false,
 }: ConfirmModalProps) {
  const [password, setPassword] = useState('');
  useEffect(() => {
    if (!open) setPassword('');
  }, [open]);
  useEffect(() => {
    function onKey(e: KeyboardEvent) {
      if (!open) return;
      if (e.key === 'Escape') onCancel();
    }
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onCancel]);
  if (!open) return null;
  const confirmDisabled = busy || (requirePassword && !password);
  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="confirm-modal-title"
      className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
      onClick={onCancel}
    >
      <div
        className="w-full max-w-sm rounded-lg border border-border bg-background p-5 shadow-lg space-y-3"
        onClick={(e) => e.stopPropagation()}
      >
        <h3 id="confirm-modal-title" className="text-base font-semibold">{title}</h3>
        {body && <p className="text-sm text-muted-foreground">{body}</p>}
        {requirePassword && (
          <input
            type="password"
            autoFocus
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder={passwordPlaceholder}
            className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
            onKeyDown={(e) => {
              if (e.key === 'Enter' && !confirmDisabled) onConfirm(password);
            }}
          />
        )}
        <div className="flex justify-end gap-2 pt-1">
          <button
            type="button"
            onClick={onCancel}
            className="rounded-md border border-border px-3 py-2 text-sm"
            data-testid="confirm-modal-cancel"
          >
            {cancelText}
          </button>
          <button
            type="button"
            disabled={confirmDisabled}
            onClick={() => onConfirm(requirePassword ? password : undefined)}
            className={
              'rounded-md px-3 py-2 text-sm font-medium text-white disabled:opacity-50 ' +
              (danger ? 'bg-destructive' : 'bg-primary')
            }
            data-testid="confirm-modal-ok"
          >
            {busy ? 'Working…' : confirmText}
          </button>
        </div>
      </div>
    </div>
  );
 }
--- a/client/src/components/DxPicker.tsx
+++ b/client/src/components/DxPicker.tsx
@ -0,0 +1,143 @@
 // ============================================================
 // DxPicker — ICD-10 diagnosis picker. Live search via NLM Clinical
 // Tables API (free, no auth, CORS-enabled) + a grid of common
 // pediatric diagnoses for one-click add. Mirrors the vanilla
 // renderDxComponent / searchIcd10 in public/js/shadess.js (@be14578).
 //
 // Selected diagnoses render as removable chips. Consumers pass the
 // current array + a setter; the component owns search state only.
 // ============================================================
 import { useEffect, useRef, useState } from 'react';
 import { COMMON_DX, type DxEntry } from '@shared/clinical/ros-pe-dx';
 interface Props {
  value: DxEntry[];
  onChange: (next: DxEntry[]) => void;
  testIdPrefix?: string;
 }
 const sm = 'rounded-md border border-input bg-background px-2 py-1 text-sm';
 async function searchIcd10(q: string, signal: AbortSignal): Promise<DxEntry[]> {
  const url = 'https://clinicaltables.nlm.nih.gov/api/icd10cm/v3/search?sf=code,name&terms='
    + encodeURIComponent(q) + '&maxList=12';
  const r = await fetch(url, { signal });
  const data = await r.json();
  // NLM returns [count, [codes], null, [[code, name], …]]
  const rows = (data[3] || []) as Array<[string, string]>;
  return rows.map(([code, name]) => ({ code, name }));
 }
 export default function DxPicker({ value, onChange, testIdPrefix = 'dx' }: Props) {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState<DxEntry[]>([]);
  const [open, setOpen] = useState(false);
  const abortRef = useRef<AbortController | null>(null);
  const timerRef = useRef<number | null>(null);
  useEffect(() => {
    if (!query.trim() || query.trim().length < 2) {
      setResults([]); setOpen(false);
      return;
    }
    if (timerRef.current) window.clearTimeout(timerRef.current);
    timerRef.current = window.setTimeout(() => {
      if (abortRef.current) abortRef.current.abort();
      const ctrl = new AbortController();
      abortRef.current = ctrl;
      searchIcd10(query.trim(), ctrl.signal)
        .then((rows) => { setResults(rows); setOpen(rows.length > 0); })
        .catch(() => { /* fetch aborted or failed — leave previous state */ });
    }, 280);
    return () => { if (timerRef.current) window.clearTimeout(timerRef.current); };
  }, [query]);
  function add(dx: DxEntry) {
    const already = value.some((d) => d.code === dx.code && d.name === dx.name);
    if (already) return;
    onChange([...value, dx]);
  }
  function remove(i: number) {
    onChange(value.filter((_, idx) => idx !== i));
  }
  return (
    <div className="space-y-2" data-testid={testIdPrefix + '-picker'}>
      <div className="relative">
        <input
          type="text"
          placeholder='Search ICD-10 (e.g. "otitis", "J06")…'
          autoComplete="off"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          onFocus={() => results.length && setOpen(true)}
          onBlur={() => setTimeout(() => setOpen(false), 150)}
          onKeyDown={(e) => {
            if (e.key === 'Escape') setOpen(false);
            if (e.key === 'Enter' && results[0]) {
              e.preventDefault();
              add(results[0]);
              setQuery('');
              setOpen(false);
            }
          }}
          className={sm + ' w-full'}
          data-testid={testIdPrefix + '-search'}
        />
        {open && results.length > 0 && (
          <div className="absolute z-30 left-0 right-0 mt-1 max-h-60 overflow-auto rounded-md border border-border bg-card shadow-lg">
            {results.map((r) => (
              <button
                key={r.code}
                type="button"
                onMouseDown={(e) => {
                  e.preventDefault();
                  add(r);
                  setQuery('');
                  setOpen(false);
                }}
                className="w-full text-left px-3 py-2 text-sm hover:bg-muted border-b border-border last:border-0"
                data-testid={testIdPrefix + '-result-' + r.code}
              >
                <span className="inline-block w-20 text-xs font-mono text-muted-foreground">{r.code}</span>
                <span>{r.name}</span>
              </button>
            ))}
          </div>
        )}
      </div>
      {value.length > 0 && (
        <div className="flex flex-wrap gap-1.5" data-testid={testIdPrefix + '-tags'}>
          {value.map((d, i) => (
            <span key={i} className="inline-flex items-center gap-1 rounded-full bg-primary/10 border border-primary/30 text-primary px-2 py-0.5 text-xs">
              {d.code && <strong className="font-semibold">{d.code}</strong>}
              <span>{d.name}</span>
              <button type="button" onClick={() => remove(i)} className="text-xs text-muted-foreground hover:text-destructive" title="Remove">×</button>
            </span>
          ))}
        </div>
      )}
      <div>
        <div className="text-[11px] text-muted-foreground mb-1">Common pediatric diagnoses:</div>
        <div className="flex flex-wrap gap-1">
          {COMMON_DX.map((dx) => (
            <button
              key={dx.code}
              type="button"
              onClick={() => add(dx)}
              className="text-[11px] rounded border border-border bg-background px-2 py-0.5 hover:bg-muted"
              title={dx.name}
              data-testid={testIdPrefix + '-chip-' + dx.code}
            >
              <span className="font-mono text-muted-foreground mr-1">{dx.code}</span>
              {dx.name}
            </button>
          ))}
        </div>
      </div>
    </div>
  );
 }
--- a/client/src/components/EditableResult.tsx
+++ b/client/src/components/EditableResult.tsx
@ -0,0 +1,117 @@
 // ============================================================
 // EditableResult — editable AI-output box + correction tracking +
 // OutputActions toolbar. Restores two pieces of vanilla behavior
 // the React migration silently dropped:
 //
 //   1. The output divs were `contenteditable="true"` in vanilla.
 //      Users routinely fix AI mistakes inline before saving the
 //      encounter or copying out. The early React port rendered the
 //      output as a read-only div — copy was the only path.
 //
 //   2. correctionTracker.js (public/js/correctionTracker.js) saved
 //      every meaningful inline edit to user_memories under category
 //      `correction_<section>` so the AI learns user preferences.
 //      Settings → Corrections still shows them, but nothing in React
 //      was *writing* them. This component restores that loop.
 //
 // On blur, if the text differs from the captured "original AI
 // output" by more than the noise threshold, POST /api/memories/
 // correction. Mirrors the vanilla heuristic exactly so we don't
 // flood memories with whitespace-only edits.
 // ============================================================
 import { useEffect, useRef } from 'react';
 import OutputActions from '@/components/OutputActions';
 import { api } from '@/lib/api';
 import { isMeaningfulChange } from '@shared/clinical/correction-tracker';
 // Server enum — must match VALID_CATEGORIES in src/routes/memories.ts.
 export type CorrectionSection =
  | 'encounter'
  | 'hpi'
  | 'soap'
  | 'wellvisit'
  | 'sickvisit';
 interface Props {
  text: string;
  onChange: (next: string) => void;
  /**
   * Which note type this is — selects the correction memory bucket.
   * Pass `null` to skip correction tracking (Hospital Course and Chart
   * Review aren't in the server's VALID_CATEGORIES enum).
   */
  section: CorrectionSection | null;
  /** Filename prefix for Nextcloud export (passed through to OutputActions). */
  exportLabel: string;
  /** docType field for Nextcloud export. */
  exportType: string;
  /** Optional source material — refine reads this for context. */
  sourceContext?: string;
  /** Title shown in the section header. */
  title: string;
 }
 export default function EditableResult({
  text, onChange, section, exportLabel, exportType, sourceContext, title,
 }: Props) {
  // The "AI baseline" — what the model produced last. Updated when refine
  // or shorten replaces the body (handled in onUpdate below) so the next
  // user edit is measured against the new baseline, not the original.
  const originalRef = useRef<string>(text);
  // Re-baseline whenever the text grows/changes from a non-edit source —
  // i.e. when generation produced new output (parent flipped from null→text).
  // We can't perfectly distinguish a parent-driven change from a user typing,
  // but the typical generation flow is null → full text, so a length jump
  // back to a different value is treated as a new baseline.
  useEffect(() => {
    if (!originalRef.current && text) originalRef.current = text;
  }, [text]);
  async function maybeSaveCorrection() {
    if (!section) return;
    if (!isMeaningfulChange(originalRef.current, text)) return;
    try {
      await api.post('/api/memories/correction', {
        section,
        original_snippet: originalRef.current,
        corrected_snippet: text,
      });
      // Successful save → make the new text the baseline so successive
      // edits get tracked against the most-recently-saved version.
      originalRef.current = text;
    } catch {
      // Fail silently — correction tracking is best-effort, never blocks
      // the user's primary copy/refine/save flow.
    }
  }
  return (
    <section className="rounded-lg border border-border bg-card" data-testid={'editable-result-' + exportType}>
      <header className="px-4 py-2 border-b border-border bg-muted/40">
        <h2 className="text-sm font-semibold">{title}</h2>
      </header>
      <textarea
        className="w-full p-4 text-sm bg-transparent resize-y min-h-[200px] focus:outline-none focus:ring-0 border-0 whitespace-pre-wrap"
        value={text}
        onChange={(e) => onChange(e.target.value)}
        onBlur={maybeSaveCorrection}
        data-testid={'editable-result-body-' + exportType}
        spellCheck
      />
      <div className="px-4 pb-4">
        <OutputActions
          text={text}
          onUpdate={(t) => {
            // Refine / shorten output replaces the body — re-baseline.
            originalRef.current = t;
            onChange(t);
          }}
          sourceContext={sourceContext}
          exportLabel={exportLabel}
          exportType={exportType}
        />
      </div>
    </section>
  );
 }
--- a/client/src/components/EncounterToolbar.tsx
+++ b/client/src/components/EncounterToolbar.tsx
@ -0,0 +1,159 @@
 // ============================================================
 // Encounter Toolbar — Save / New Patient / Load + label input.
 // Mirrors the vanilla saveFromTab / clearTab flow from
 // public/js/encounters.js. Each note page gets one of these so
 // transcripts + generated notes persist across sign-outs.
 // ============================================================
 import { useEffect, useState } from 'react';
 import {
  saveEncounter, loadEncounter, listSavedEncounters,
  getSavedEncId, clearTabState,
  type EncType, type SavedEncounterListEntry, type LoadedEncounter,
 } from '@/lib/encounter-persistence';
 const input = 'rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring';
 const btn = 'inline-flex items-center gap-1 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium hover:bg-muted disabled:opacity-50';
 const btnPrimary = 'inline-flex items-center gap-1 rounded-md bg-primary text-primary-foreground px-3 py-1.5 text-xs font-medium disabled:opacity-50';
 interface Props {
  type: EncType;
  label: string;
  setLabel: (s: string) => void;
  transcript: string;
  generatedNote: string;
  partialData?: unknown;
  onLoad: (enc: LoadedEncounter) => void;
  onClear: () => void;
 }
 export default function EncounterToolbar({
  type, label, setLabel, transcript, generatedNote, partialData, onLoad, onClear,
 }: Props) {
  const [msg, setMsg] = useState<{ kind: 'ok' | 'err' | 'info'; text: string } | null>(null);
  const [saving, setSaving] = useState(false);
  const [popoverOpen, setPopoverOpen] = useState(false);
  const [saved, setSaved] = useState<SavedEncounterListEntry[]>([]);
  const [loadingList, setLoadingList] = useState(false);
  const [search, setSearch] = useState('');
  const [savedId, setSavedId] = useState<number | null>(getSavedEncId(type));
  // Sync the savedId chip whenever sessionStorage changes (e.g. after Load).
  useEffect(() => {
    const v = getSavedEncId(type);
    setSavedId(v);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [transcript, generatedNote]);
  async function save() {
    if (!label.trim()) { setMsg({ kind: 'err', text: 'Enter a patient label first' }); return; }
    setMsg(null); setSaving(true);
    try {
      const r = await saveEncounter({ type, label, transcript, generatedNote, partialData });
      setSavedId(r.id);
      setMsg({ kind: 'ok', text: 'Saved (' + label + ')' });
    } catch (e) {
      setMsg({ kind: 'err', text: (e as Error).message });
    } finally { setSaving(false); }
  }
  function newPatient() {
    clearTabState(type);
    setSavedId(null);
    setLabel('');
    onClear();
    setMsg({ kind: 'info', text: 'New patient — fields cleared.' });
  }
  async function openLoad() {
    if (popoverOpen) { setPopoverOpen(false); return; }
    setPopoverOpen(true);
    setLoadingList(true);
    try {
      const list = await listSavedEncounters();
      setSaved(list.filter((e) => e.enc_type === type));
    } finally { setLoadingList(false); }
  }
  async function pick(id: number) {
    try {
      const enc = await loadEncounter(id);
      setSavedId(id);
      onLoad(enc);
      setPopoverOpen(false);
      setMsg({ kind: 'ok', text: 'Loaded ' + (enc.label || '') });
    } catch (e) {
      setMsg({ kind: 'err', text: (e as Error).message });
    }
  }
  const filtered = search
    ? saved.filter((e) => (e.label || '').toLowerCase().includes(search.toLowerCase()))
    : saved;
  return (
    <div className="space-y-2" data-testid={'enc-toolbar-' + type}>
      <div className="flex flex-wrap items-center gap-2">
        <input
          className={input + ' flex-1 min-w-[180px] max-w-md'}
          placeholder="Patient label (e.g. JD-2026-04-24)"
          value={label}
          onChange={(e) => setLabel(e.target.value)}
          data-testid="enc-label"
        />
        <button type="button" onClick={save} disabled={saving} className={btnPrimary} data-testid="enc-save">
          💾 {saving ? 'Saving…' : (savedId != null ? 'Save (update)' : 'Save')}
        </button>
        <div className="relative">
          <button type="button" onClick={openLoad} className={btn} data-testid="enc-load-toggle">
            📂 Load
          </button>
          {popoverOpen && (
            <div className="absolute z-30 mt-1 right-0 w-80 max-h-96 overflow-auto rounded-md border border-border bg-card shadow-lg">
              <div className="sticky top-0 bg-card p-2 border-b border-border">
                <input
                  type="search"
                  placeholder="Filter saved encounters…"
                  className={input + ' w-full text-xs'}
                  value={search}
                  onChange={(e) => setSearch(e.target.value)}
                  autoFocus
                  data-testid="enc-load-search"
                />
              </div>
              {loadingList && <div className="p-3 text-xs text-muted-foreground">Loading…</div>}
              {!loadingList && filtered.length === 0 && (
                <div className="p-3 text-xs text-muted-foreground italic">No saved {type} encounters.</div>
              )}
              {filtered.map((e) => (
                <button
                  key={e.id}
                  type="button"
                  onClick={() => pick(e.id)}
                  className="w-full text-left px-3 py-2 hover:bg-muted border-b border-border last:border-0"
                  data-testid={'enc-load-pick-' + e.id}
                >
                  <div className="text-sm font-medium truncate">{e.label}</div>
                  <div className="text-xs text-muted-foreground">
                    Updated {new Date(e.updated_at).toLocaleString()} · expires {new Date(e.expires_at).toLocaleDateString()}
                  </div>
                </button>
              ))}
            </div>
          )}
        </div>
        <button type="button" onClick={newPatient} className={btn} data-testid="enc-new">
          🆕 New patient
        </button>
        {savedId != null && (
          <span className="text-xs text-muted-foreground">Draft #{savedId}</span>
        )}
      </div>
      {msg && (
        <div className={
          'text-sm ' +
          (msg.kind === 'ok' ? 'text-green-600' : msg.kind === 'err' ? 'text-destructive' : 'text-muted-foreground')
        }>{msg.text}</div>
      )}
    </div>
  );
 }
--- a/client/src/components/Layout.tsx
+++ b/client/src/components/Layout.tsx
@ -0,0 +1,151 @@
 // ============================================================
 // LAYOUT — sidebar + main content shell shared across every page.
 // Structure mirrors the vanilla app so a user moving between the two
 // trees during migration sees consistent navigation.
 // ============================================================
 import { NavLink, Outlet } from 'react-router-dom';
 import type { ReactNode } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 import type { MeOk } from '@/shared/types';
 interface NavItem {
  to: string;
  label: string;
  available?: boolean; // false = rendered as "coming soon" stub
  adminOnly?: boolean; // renders only when me.user.role === 'admin'
 }
 interface NavGroup {
  label: string;
  items: NavItem[];
 }
 const NAV: NavGroup[] = [
  {
    label: 'Encounters',
    items: [
      { to: '/encounter', label: 'Encounter HPI', available: true },
      { to: '/dictation', label: 'Dictation HPI', available: true },
    ],
  },
  {
    label: 'Notes',
    items: [
      { to: '/hospital', label: 'Hospital Course', available: true },
      { to: '/chart', label: 'Chart Review', available: true },
      { to: '/soap', label: 'SOAP Note', available: true },
      { to: '/wellvisit', label: 'Well Visit', available: true },
      { to: '/sickvisit', label: 'Sick Visit', available: true },
    ],
  },
  {
    label: 'Clinical Tools',
    items: [
      { to: '/vaxschedule', label: 'Vaccine Schedule', available: true },
      { to: '/catchup', label: 'Catch-Up Schedule', available: true },
      { to: '/peguide', label: 'Physical Exam Guide', available: true },
      { to: '/bedside', label: 'Bedside', available: true },
      { to: '/calculators', label: 'Calculators', available: true },
      { to: '/extensions', label: 'Pagers & Extensions', available: true },
      { to: '/learning', label: 'Learning Hub', available: true },
    ],
  },
  {
    label: 'Account',
    items: [
      { to: '/settings', label: 'Settings', available: true },
      { to: '/faq', label: 'FAQ', available: true },
    ],
  },
  {
    label: 'Admin',
    items: [
      { to: '/admin', label: 'Admin Panel', available: true, adminOnly: true },
      { to: '/cms', label: 'Content Manager', available: true, adminOnly: true },
    ],
  },
 ];
 function SidebarLink({ item }: { item: NavItem }) {
  if (!item.available) {
    return (
      <div
        className="px-3 py-2 text-sm rounded-md text-muted-foreground italic cursor-not-allowed opacity-60"
        title="Not yet ported to React — still available in the vanilla app at /"
      >
        {item.label} <span className="text-[10px]">· pending</span>
      </div>
    );
  }
  return (
    <NavLink
      to={item.to}
      className={({ isActive }) =>
        'block px-3 py-2 text-sm rounded-md transition-colors ' +
        (isActive
          ? 'bg-primary text-primary-foreground'
          : 'hover:bg-muted text-foreground')
      }
    >
      {item.label}
    </NavLink>
  );
 }
 export default function Layout({ children }: { children?: ReactNode }) {
  // One-shot /me fetch shared across the app via React Query cache.
  // Settings already uses this queryKey, so the Layout gets it for free
  // after the first Settings visit — and vice versa.
  const { data: me } = useQuery<MeOk>({
    queryKey: ['auth-me'],
    queryFn: () => api.get<MeOk>('/api/auth/me'),
    staleTime: 5 * 60_000,
  });
  const isAdmin = me?.user.role === 'admin';
  return (
    <div className="min-h-screen bg-background text-foreground flex">
      {/* Sidebar */}
      <aside className="w-64 border-r border-border bg-muted/30 flex-shrink-0 p-3 space-y-4 sticky top-0 h-screen overflow-y-auto">
        <div className="px-2 py-1 border-b border-border pb-3 flex items-center justify-between gap-2">
          <div className="font-semibold">Pediatric AI Scribe</div>
          <a
            href="/api/auth/logout"
            onClick={async (e) => {
              e.preventDefault();
              try {
                await fetch('/api/auth/logout', { method: 'POST', credentials: 'include' });
              } catch { /* ignore */ }
              window.location.href = '/auth';
            }}
            className="text-[11px] text-muted-foreground hover:text-foreground"
            title="Sign out"
          >
            Sign out
          </a>
        </div>
        {NAV.map((group) => {
          const items = group.items.filter((i) => !i.adminOnly || isAdmin);
          if (items.length === 0) return null;
          return (
            <div key={group.label} className="space-y-1">
              <div className="px-3 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
                {group.label}
              </div>
              {items.map((item) => (
                <SidebarLink key={item.to} item={item} />
              ))}
            </div>
          );
        })}
      </aside>
      {/* Main */}
      <main className="flex-1 min-w-0">
        {children ?? <Outlet />}
      </main>
    </div>
  );
 }
--- a/client/src/components/OutputActions.tsx
+++ b/client/src/components/OutputActions.tsx
@ -0,0 +1,176 @@
 // ============================================================
 // OutputActions — Copy / Read / Export / Refine / Shorter bar
 // that sits under every generated note. Port of the vanilla
 // `output-actions` + `refine-bar` blocks (same buttons on every
 // note page component).
 //
 //   Copy   → navigator.clipboard
 //   Read   → POST /api/text-to-speech  (MPEG bytes → Audio)
 //   Export → POST /api/nextcloud/export
 //   Refine → POST /api/refine   (instructions + sourceContext)
 //   Shorter→ POST /api/shorten
 //
 // Each button is independent — if Nextcloud is unconfigured, only
 // that one errors; the rest keep working.
 // ============================================================
 import { useRef, useState } from 'react';
 import { api, ApiError } from '@/lib/api';
 import type { RefineOk, ShortenOk } from '@/shared/types';
 interface Props {
  text: string;
  // Applied after Refine / Shorter — parent updates its result state.
  onUpdate: (newText: string) => void;
  // Optional — passed to /api/refine as sourceContext so the model
  // can reference the original transcript when following instructions.
  sourceContext?: string;
  // Nextcloud filename prefix (e.g. 'hpi-encounter', 'soap-note').
  exportLabel: string;
  // Nextcloud docType (matches vanilla's data-label / type field).
  exportType: string;
 }
 export default function OutputActions({
  text, onUpdate, sourceContext, exportLabel, exportType,
 }: Props) {
  const [instructions, setInstructions] = useState('');
  const [busy, setBusy] = useState<null | 'refine' | 'shorten' | 'tts' | 'export'>(null);
  const [msg, setMsg] = useState<{ kind: 'ok' | 'err'; text: string } | null>(null);
  const audioRef = useRef<HTMLAudioElement | null>(null);
  const audioUrlRef = useRef<string | null>(null);
  async function copy() {
    try {
      await navigator.clipboard.writeText(text);
      setMsg({ kind: 'ok', text: 'Copied' });
    } catch {
      setMsg({ kind: 'err', text: 'Copy failed' });
    }
  }
  async function read() {
    if (!text.trim()) { setMsg({ kind: 'err', text: 'Nothing to read' }); return; }
    // If already playing, stop.
    if (audioRef.current && !audioRef.current.paused) {
      audioRef.current.pause();
      audioRef.current = null;
      if (audioUrlRef.current) { URL.revokeObjectURL(audioUrlRef.current); audioUrlRef.current = null; }
      return;
    }
    setBusy('tts'); setMsg(null);
    try {
      const resp = await fetch('/api/text-to-speech', {
        method: 'POST',
        credentials: 'include',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text }),
      });
      if (!resp.ok) {
        const ct = resp.headers.get('content-type') || '';
        const errMsg = ct.includes('json') ? ((await resp.json()).error || 'TTS failed') : 'TTS failed';
        throw new Error(errMsg);
      }
      const blob = await resp.blob();
      const url = URL.createObjectURL(blob);
      audioUrlRef.current = url;
      const audio = new Audio(url);
      audioRef.current = audio;
      audio.onended = () => {
        URL.revokeObjectURL(url);
        if (audioUrlRef.current === url) audioUrlRef.current = null;
        if (audioRef.current === audio) audioRef.current = null;
      };
      await audio.play();
    } catch (e) {
      setMsg({ kind: 'err', text: (e as Error).message });
    } finally { setBusy(null); }
  }
  async function exportToNextcloud() {
    if (!text.trim()) { setMsg({ kind: 'err', text: 'Nothing to export' }); return; }
    setBusy('export'); setMsg(null);
    try {
      const filename = exportLabel + '-' + Date.now();
      const data = await api.post<{ success: true; message: string }>('/api/nextcloud/export', {
        content: text, filename, type: exportType,
      });
      setMsg({ kind: 'ok', text: data.message || 'Exported' });
    } catch (e) {
      setMsg({ kind: 'err', text: (e as ApiError).message || 'Nextcloud not connected' });
    } finally { setBusy(null); }
  }
  async function refine() {
    if (!text.trim()) { setMsg({ kind: 'err', text: 'No document to refine' }); return; }
    if (!instructions.trim()) { setMsg({ kind: 'err', text: 'Enter instructions' }); return; }
    setBusy('refine'); setMsg(null);
    try {
      const data = await api.post<RefineOk>('/api/refine', {
        currentDocument: text,
        instructions: instructions.trim(),
        sourceContext: sourceContext || undefined,
      });
      onUpdate(data.refined);
      setInstructions('');
      setMsg({ kind: 'ok', text: 'Refined' });
    } catch (e) {
      setMsg({ kind: 'err', text: (e as ApiError).message || 'Refine failed' });
    } finally { setBusy(null); }
  }
  async function shorten() {
    if (!text.trim()) { setMsg({ kind: 'err', text: 'Nothing to shorten' }); return; }
    setBusy('shorten'); setMsg(null);
    try {
      const data = await api.post<ShortenOk>('/api/shorten', { document: text });
      onUpdate(data.shortened);
      setMsg({ kind: 'ok', text: 'Shortened' });
    } catch (e) {
      setMsg({ kind: 'err', text: (e as ApiError).message || 'Shorten failed' });
    } finally { setBusy(null); }
  }
  const btn = 'inline-flex items-center gap-1 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium hover:bg-muted disabled:opacity-50';
  const btnPrimary = 'inline-flex items-center gap-1 rounded-md bg-primary text-primary-foreground px-3 py-1.5 text-xs font-medium disabled:opacity-50';
  return (
    <div className="space-y-2" data-testid={'output-actions-' + exportType}>
      <div className="flex flex-wrap items-center gap-2">
        <button type="button" onClick={copy} className={btnPrimary} data-testid="out-copy">
          📋 Copy
        </button>
        <button type="button" onClick={read} disabled={busy === 'tts'} className={btn} data-testid="out-read">
          {busy === 'tts' ? '⌛ Loading…' : (audioRef.current && !audioRef.current.paused ? '⏹ Stop' : '🔊 Read')}
        </button>
        <button type="button" onClick={exportToNextcloud} disabled={busy === 'export'} className={btn} data-testid="out-export">
          {busy === 'export' ? '⌛ Exporting…' : '☁️ Export to Nextcloud'}
        </button>
      </div>
      <div className="flex flex-col sm:flex-row gap-2">
        <textarea
          className="flex-1 rounded-md border border-input bg-background px-3 py-2 text-sm min-h-[60px]"
          placeholder="Tell AI how to modify (e.g., 'make it shorter', 'add that patient has asthma history')"
          value={instructions}
          onChange={(e) => setInstructions(e.target.value)}
          data-testid="out-refine-input"
        />
        <div className="flex sm:flex-col gap-2">
          <button type="button" onClick={refine} disabled={busy === 'refine' || !instructions.trim()} className={btnPrimary} data-testid="out-refine">
            {busy === 'refine' ? '⌛ Refining…' : '✏️ Refine'}
          </button>
          <button type="button" onClick={shorten} disabled={busy === 'shorten'} className={btn} data-testid="out-shorten">
            {busy === 'shorten' ? '⌛ Shortening…' : '📏 Shorter'}
          </button>
        </div>
      </div>
      {msg && (
        <div className={'text-xs ' + (msg.kind === 'ok' ? 'text-green-600' : 'text-destructive')}>
          {msg.text}
        </div>
      )}
    </div>
  );
 }
--- a/client/src/components/Recorder.tsx
+++ b/client/src/components/Recorder.tsx
@ -0,0 +1,215 @@
 // ============================================================
 // Recorder — shared mic-capture component for every note page.
 // Faithful React port of public/js/liveEncounter.js (and the
 // equivalent dictation/SOAP recording wrappers). Mirror behavior:
 //   • Mic permission via getUserMedia (mono / 16 kHz / EC+NS)
 //   • Live preview via Web Speech API (when enabled by user)
 //   • Pause / Resume native MediaRecorder where supported
 //   • On Stop → upload blob to /api/transcribe
 //   • If transcription unavailable, fall back to the live preview text
 //   • Failed uploads → /api/audio-backups (or IndexedDB) for retry
 //
 // The recorder is dumb about persistence — the parent note page
 // owns the transcript text and uses encounter-persistence.ts to
 // save/resume across sign-outs.
 // ============================================================
 import { useEffect, useRef, useState } from 'react';
 import { AudioRecorder } from '@/lib/recorder';
 import { transcribeAudio, isTranscribeAvailable, checkTranscribeStatus } from '@/lib/transcribe';
 import { createSpeechSession, isSpeechRecognitionEnabled, deduplicateFinal, type SpeechHandle } from '@/lib/web-speech';
 interface Props {
  module: string;                 // 'encounter' | 'dictation' | 'soap' | …
  // Called when transcription completes. The text replaces (or merges with)
  // whatever the parent currently has in the transcript field.
  onTranscript: (text: string, meta: { provider?: string; durationSec: number; appended: boolean }) => void;
  // Called continuously with the live (interim) preview while recording.
  // Parents can show a faded "interim" string concatenated to the
  // confirmed transcript for instant visual feedback.
  onInterim?: (text: string) => void;
  // Called when transcription fails (so the parent can decide what to
  // do — typically appending the live preview text instead).
  onError?: (msg: string) => void;
  disabled?: boolean;
 }
 const btnRecord = 'inline-flex items-center gap-2 px-4 py-2 rounded-md text-sm font-semibold border transition-colors';
 export default function Recorder({ module, onTranscript, onInterim, onError, disabled }: Props) {
  const recorderRef = useRef<AudioRecorder | null>(null);
  const speechRef = useRef<SpeechHandle | null>(null);
  const finalTextRef = useRef('');
  const intervalRef = useRef<number | null>(null);
  const startTimeRef = useRef<number>(0);
  const pauseAccumRef = useRef<number>(0);
  const pauseStartRef = useRef<number>(0);
  const [state, setState] = useState<'idle' | 'recording' | 'paused' | 'transcribing'>('idle');
  const [seconds, setSeconds] = useState(0);
  useEffect(() => {
    if (isTranscribeAvailable() === null) checkTranscribeStatus();
  }, []);
  // Stop everything cleanly on unmount (page navigation while recording).
  useEffect(() => {
    return () => {
      if (intervalRef.current) window.clearInterval(intervalRef.current);
      if (speechRef.current) speechRef.current.stop();
      if (recorderRef.current) recorderRef.current.stop().catch(() => { /* ignore */ });
    };
  }, []);
  function tickStart() {
    if (intervalRef.current) window.clearInterval(intervalRef.current);
    intervalRef.current = window.setInterval(() => {
      const now = Date.now();
      const elapsed = Math.floor((now - startTimeRef.current - pauseAccumRef.current) / 1000);
      setSeconds(elapsed);
    }, 1000);
  }
  function tickStop() {
    if (intervalRef.current) { window.clearInterval(intervalRef.current); intervalRef.current = null; }
  }
  async function start() {
    if (state !== 'idle') return;
    finalTextRef.current = '';
    pauseAccumRef.current = 0;
    setSeconds(0);
    try {
      const rec = new AudioRecorder();
      await rec.start();
      recorderRef.current = rec;
      startTimeRef.current = Date.now();
      tickStart();
      setState('recording');
      // Live preview via Web Speech (only if user enabled it in Settings).
      if (isSpeechRecognitionEnabled()) {
        const handle = createSpeechSession({
          onFinal: (chunk) => {
            const deduped = deduplicateFinal(chunk, finalTextRef.current);
            finalTextRef.current += deduped;
            onInterim?.(finalTextRef.current);
          },
          onInterim: (interim) => onInterim?.(finalTextRef.current + interim),
          onError: () => { /* swallow */ },
        });
        speechRef.current = handle;
        handle?.start();
      }
    } catch {
      onError?.('Microphone permission denied');
      setState('idle');
    }
  }
  function pause() {
    if (state !== 'recording') return;
    recorderRef.current?.pause();
    speechRef.current?.stop();
    pauseStartRef.current = Date.now();
    tickStop();
    setState('paused');
  }
  function resume() {
    if (state !== 'paused') return;
    recorderRef.current?.resume();
    pauseAccumRef.current += Date.now() - pauseStartRef.current;
    tickStart();
    if (isSpeechRecognitionEnabled() && !speechRef.current) {
      const handle = createSpeechSession({
        onFinal: (chunk) => {
          const deduped = deduplicateFinal(chunk, finalTextRef.current);
          finalTextRef.current += deduped;
          onInterim?.(finalTextRef.current);
        },
        onInterim: (interim) => onInterim?.(finalTextRef.current + interim),
      });
      speechRef.current = handle;
    }
    speechRef.current?.start();
    setState('recording');
  }
  async function stop() {
    if (state !== 'recording' && state !== 'paused') return;
    const liveText = finalTextRef.current.trim();
    speechRef.current?.stop();
    speechRef.current = null;
    tickStop();
    const dur = seconds;
    setState('transcribing');
    try {
      const blob = await recorderRef.current!.stop();
      recorderRef.current = null;
      if (!blob || blob.size === 0) {
        // Recording produced nothing — fall back to live preview if any.
        if (liveText) onTranscript(liveText, { durationSec: dur, appended: true });
        setState('idle');
        return;
      }
      // Server-side too-large guard mirrors the vanilla 24 MB cap.
      if (blob.size > 24 * 1024 * 1024) {
        onError?.('Recording too large for AI transcription — using live transcript');
        if (liveText) onTranscript(liveText, { durationSec: dur, appended: true });
        setState('idle');
        return;
      }
      const result = await transcribeAudio(blob, module);
      if (result.success && result.text) {
        onTranscript(result.text, { provider: result.provider, durationSec: dur, appended: false });
      } else if (result.noProvider) {
        if (liveText) onTranscript(liveText, { durationSec: dur, appended: true });
        else onError?.('No transcription API configured');
      } else {
        if (liveText) onTranscript(liveText, { durationSec: dur, appended: true });
        else onError?.(result.error || 'Transcription failed');
      }
    } catch (e) {
      onError?.((e as Error).message);
    } finally {
      setState('idle');
    }
  }
  const mm = String(Math.floor(seconds / 60)).padStart(2, '0');
  const ss = String(seconds % 60).padStart(2, '0');
  return (
    <div className="flex flex-wrap items-center gap-2" data-testid={'recorder-' + module}>
      {state === 'idle' && (
        <button type="button" onClick={start} disabled={disabled}
          className={btnRecord + ' bg-destructive text-white border-destructive hover:bg-red-700'}
          data-testid="recorder-start">
          🎙 Start recording
        </button>
      )}
      {(state === 'recording' || state === 'paused') && (
        <>
          <button type="button" onClick={state === 'recording' ? pause : resume}
            className={btnRecord + ' bg-amber-500 text-white border-amber-500 hover:bg-amber-600'}
            data-testid="recorder-pause">
            {state === 'recording' ? '⏸ Pause' : '▶ Resume'}
          </button>
          <button type="button" onClick={stop}
            className={btnRecord + ' bg-slate-800 text-white border-slate-800 hover:bg-slate-900'}
            data-testid="recorder-stop">
            ⏹ Stop
          </button>
          <span className="inline-flex items-center gap-1.5 text-sm text-destructive font-mono"
            data-testid="recorder-timer">
            <span className={state === 'recording' ? 'animate-pulse' : 'opacity-50'}>●</span>
            {state === 'paused' ? 'paused ' : ''}{mm}:{ss}
          </span>
        </>
      )}
      {state === 'transcribing' && (
        <span className="text-sm text-muted-foreground" data-testid="recorder-transcribing">
          ⌛ Transcribing…
        </span>
      )}
    </div>
  );
 }
--- a/client/src/components/RichTextEditor.tsx
+++ b/client/src/components/RichTextEditor.tsx
@ -0,0 +1,212 @@
 // ============================================================
 // RichTextEditor — Tiptap/ProseMirror editor matching the vanilla
 // tp-toolbar feature set from public/js/learningHub.js (@be14578).
 //
 // Toolbar: bold / italic / underline / strike | H2 / H3 |
 //          bulletList / orderedList / blockquote / codeBlock |
 //          link (with URL bar) | clear formatting
 //
 // Emits HTML on change — the CMS server stores body as HTML, so
 // what you type here is what Learning Hub readers see.
 //
 // Variants:
 //   default  — full toolbar (content body)
 //   mini     — bold/italic/list/link only (short fields)
 //   option   — bold/italic/link only (quiz option text)
 // ============================================================
 import { useCallback, useEffect, useState } from 'react';
 import { useEditor, EditorContent, type Editor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import Link from '@tiptap/extension-link';
 import Underline from '@tiptap/extension-underline';
 type Variant = 'default' | 'mini' | 'option';
 interface Props {
  value: string;
  onChange: (html: string) => void;
  variant?: Variant;
  placeholder?: string;
  minHeight?: string; // tailwind arbitrary value, e.g. 'min-h-[280px]'
  testId?: string;
 }
 const btn = 'inline-flex items-center justify-center min-w-[28px] h-7 px-2 rounded text-xs border border-transparent hover:bg-muted';
 const btnActive = btn + ' bg-muted border-border';
 const sep = 'inline-block w-px h-5 bg-border mx-1 align-middle';
 function Tool({ on, active, title, children }: { on: () => void; active: boolean; title: string; children: React.ReactNode }) {
  return (
    <button
      type="button"
      onMouseDown={(e) => { e.preventDefault(); on(); }}
      className={active ? btnActive : btn}
      title={title}
    >
      {children}
    </button>
  );
 }
 function LinkBar({ editor, open, setOpen }: { editor: Editor; open: boolean; setOpen: (b: boolean) => void }) {
  const [url, setUrl] = useState('');
  useEffect(() => {
    if (open) setUrl(editor.getAttributes('link').href || '');
  }, [open, editor]);
  if (!open) return null;
  function apply() {
    const trimmed = url.trim();
    if (trimmed) editor.chain().focus().extendMarkRange('link').setLink({ href: trimmed }).run();
    setOpen(false);
  }
  function remove() {
    editor.chain().focus().unsetLink().run();
    setOpen(false);
  }
  return (
    <div className="flex items-center gap-1 px-2 py-1 border-t border-border bg-muted/30">
      <input
        type="url"
        autoFocus
        value={url}
        onChange={(e) => setUrl(e.target.value)}
        onKeyDown={(e) => {
          if (e.key === 'Enter') { e.preventDefault(); apply(); }
          if (e.key === 'Escape') { e.preventDefault(); setOpen(false); }
        }}
        placeholder="https://"
        className="flex-1 rounded border border-input bg-background px-2 py-1 text-xs"
      />
      <button type="button" onMouseDown={(e) => { e.preventDefault(); apply(); }}
        className="rounded bg-primary text-primary-foreground px-2 py-1 text-xs">
        Apply
      </button>
      <button type="button" onMouseDown={(e) => { e.preventDefault(); remove(); }}
        className="rounded border border-border px-2 py-1 text-xs">
        Remove
      </button>
      <button type="button" onMouseDown={(e) => { e.preventDefault(); setOpen(false); }}
        className="rounded border border-border px-2 py-1 text-xs">
        ✕
      </button>
    </div>
  );
 }
 function Toolbar({ editor, variant }: { editor: Editor; variant: Variant }) {
  const [linkOpen, setLinkOpen] = useState(false);
  const toggleLink = useCallback(() => setLinkOpen((v) => !v), []);
  const bold = (
    <Tool on={() => editor.chain().focus().toggleBold().run()} active={editor.isActive('bold')} title="Bold"><strong>B</strong></Tool>
  );
  const italic = (
    <Tool on={() => editor.chain().focus().toggleItalic().run()} active={editor.isActive('italic')} title="Italic"><em>I</em></Tool>
  );
  const underline = (
    <Tool on={() => editor.chain().focus().toggleUnderline().run()} active={editor.isActive('underline')} title="Underline"><span style={{ textDecoration: 'underline' }}>U</span></Tool>
  );
  const strike = (
    <Tool on={() => editor.chain().focus().toggleStrike().run()} active={editor.isActive('strike')} title="Strike"><span style={{ textDecoration: 'line-through' }}>S</span></Tool>
  );
  const h2 = (
    <Tool on={() => editor.chain().focus().toggleHeading({ level: 2 }).run()} active={editor.isActive('heading', { level: 2 })} title="Heading 2">H2</Tool>
  );
  const h3 = (
    <Tool on={() => editor.chain().focus().toggleHeading({ level: 3 }).run()} active={editor.isActive('heading', { level: 3 })} title="Heading 3">H3</Tool>
  );
  const bullet = (
    <Tool on={() => editor.chain().focus().toggleBulletList().run()} active={editor.isActive('bulletList')} title="Bullet list">•</Tool>
  );
  const ordered = (
    <Tool on={() => editor.chain().focus().toggleOrderedList().run()} active={editor.isActive('orderedList')} title="Numbered list">1.</Tool>
  );
  const quote = (
    <Tool on={() => editor.chain().focus().toggleBlockquote().run()} active={editor.isActive('blockquote')} title="Quote">❝</Tool>
  );
  const code = (
    <Tool on={() => editor.chain().focus().toggleCodeBlock().run()} active={editor.isActive('codeBlock')} title="Code">{'</>'}</Tool>
  );
  const link = (
    <Tool on={toggleLink} active={editor.isActive('link')} title="Link">🔗</Tool>
  );
  const clear = (
    <Tool on={() => editor.chain().focus().unsetAllMarks().clearNodes().run()} active={false} title="Clear formatting">⌫</Tool>
  );
  let buttons: React.ReactNode;
  if (variant === 'option') {
    buttons = <>{bold}{italic}{link}</>;
  } else if (variant === 'mini') {
    buttons = <>{bold}{italic}{bullet}{link}</>;
  } else {
    buttons = (
      <>
        {bold}{italic}{underline}{strike}
        <span className={sep} />
        {h2}{h3}
        <span className={sep} />
        {bullet}{ordered}{quote}{code}
        <span className={sep} />
        {link}
        <span className={sep} />
        {clear}
      </>
    );
  }
  return (
    <>
      <div className="flex flex-wrap items-center gap-0.5 px-2 py-1 bg-muted/40 border-b border-border">
        {buttons}
      </div>
      <LinkBar editor={editor} open={linkOpen} setOpen={setLinkOpen} />
    </>
  );
 }
 export default function RichTextEditor({
  value, onChange, variant = 'default', placeholder, minHeight = 'min-h-[240px]', testId,
 }: Props) {
  const editor = useEditor({
    extensions: [
      StarterKit.configure({ heading: { levels: [2, 3] } }),
      Underline,
      Link.configure({ openOnClick: false, HTMLAttributes: { rel: 'noopener noreferrer', target: '_blank' } }),
    ],
    content: value,
    onUpdate: ({ editor: ed }) => onChange(ed.getHTML()),
    editorProps: {
      attributes: {
        class: 'prose prose-sm max-w-none dark:prose-invert px-3 py-2 ' + minHeight + ' focus:outline-none',
        'data-placeholder': placeholder || '',
      },
    },
  });
  // Sync external value changes back into the editor (e.g. when the user
  // switches to a different CMS item — parent updates `value`).
  useEffect(() => {
    if (!editor) return;
    const current = editor.getHTML();
    if (value !== current) editor.commands.setContent(value || '', { emitUpdate: false });
  }, [value, editor]);
  if (!editor) return null;
  return (
    <div
      className="rounded-md border border-input bg-background overflow-hidden"
      data-testid={testId}
    >
      <Toolbar editor={editor} variant={variant} />
      <EditorContent editor={editor} />
    </div>
  );
 }
--- a/client/src/components/RosPeTable.tsx
+++ b/client/src/components/RosPeTable.tsx
@ -0,0 +1,97 @@
 // ============================================================
 // RosPeTable — structured ROS or PE input. Per-system row with
 // WNL / Abnormal / Not reviewed toggle + a note field that reveals
 // when "Abnormal" is selected. Mirrors window.renderRosRows /
 // wireRosContainer from public/js/shadess.js (@be14578).
 //
 // Consumers (WellVisit Note, Sick Visit Note) pass systems list +
 // data object + label set so the same component renders both
 // review-of-systems and physical-exam tables.
 // ============================================================
 import type { RosData, RosStatus, SystemEntry } from '@shared/clinical/ros-pe-dx';
 interface BtnLabels { wnl: string; abnormal: string; notrev: string }
 interface Props {
  systems: ReadonlyArray<SystemEntry>;
  data: RosData;
  onChange: (next: RosData) => void;
  btnLabels?: BtnLabels;
  testIdPrefix?: string;
 }
 export function rosAllWnl(systems: ReadonlyArray<SystemEntry>, data: RosData): RosData {
  const next: RosData = { ...data };
  for (const s of systems) next[s.key] = { status: 'wnl', note: next[s.key]?.note };
  return next;
 }
 export function rosClear(data: RosData, systems: ReadonlyArray<SystemEntry>): RosData {
  const next: RosData = { ...data };
  for (const s of systems) next[s.key] = {};
  return next;
 }
 const DEFAULT_LABELS: BtnLabels = { wnl: 'WNL', abnormal: 'Abnormal', notrev: 'Not reviewed' };
 function statusClass(active: boolean, kind: RosStatus) {
  if (!active) return 'bg-background border-border hover:bg-muted';
  if (kind === 'wnl')      return 'bg-green-100 text-green-800 border-green-300';
  if (kind === 'abnormal') return 'bg-red-100 text-red-800 border-red-300';
  return 'bg-muted text-muted-foreground border-border';
 }
 export default function RosPeTable({
  systems, data, onChange, btnLabels, testIdPrefix = 'ros',
 }: Props) {
  const labels = btnLabels || DEFAULT_LABELS;
  function setStatus(key: string, status: RosStatus) {
    const cur = data[key]?.status || '';
    const nextStatus: RosStatus = cur === status ? '' : status;
    onChange({ ...data, [key]: { status: nextStatus, note: data[key]?.note || '' } });
  }
  function setNote(key: string, note: string) {
    onChange({ ...data, [key]: { status: data[key]?.status || '', note } });
  }
  return (
    <div className="divide-y divide-border" data-testid={testIdPrefix + '-table'}>
      {systems.map((sys) => {
        const cell = data[sys.key] || {};
        const active = cell.status || '';
        return (
          <div key={sys.key} className="flex flex-wrap items-center gap-2 px-2 py-1.5" data-testid={testIdPrefix + '-row-' + sys.key}>
            <div className="flex-1 min-w-[180px]" title={sys.detail}>
              <span className="text-sm font-medium">{sys.label}</span>
              <span className="ml-1 text-[10px] text-muted-foreground">({sys.detail})</span>
            </div>
            <div className="flex gap-1 shrink-0">
              {(['wnl', 'abnormal', 'notrev'] as const).map((kind) => (
                <button
                  key={kind}
                  type="button"
                  onClick={() => setStatus(sys.key, kind)}
                  className={'text-[10px] uppercase tracking-wider px-2 py-1 rounded border ' + statusClass(active === kind, kind)}
                  data-testid={testIdPrefix + '-btn-' + sys.key + '-' + kind}
                >
                  {labels[kind]}
                </button>
              ))}
            </div>
            {active === 'abnormal' && (
              <input
                type="text"
                value={cell.note || ''}
                onChange={(e) => setNote(sys.key, e.target.value)}
                placeholder="Describe finding…"
                className="flex-1 min-w-[200px] rounded-md border border-input bg-background px-2 py-1 text-xs"
                data-testid={testIdPrefix + '-note-' + sys.key}
              />
            )}
          </div>
        );
      })}
    </div>
  );
 }
--- a/client/src/components/Turnstile.tsx
+++ b/client/src/components/Turnstile.tsx
@ -0,0 +1,83 @@
 // ============================================================
 // Turnstile widget wrapper. Loads the cloudflare challenges script
 // once, renders a widget when mounted, exposes the resolved token
 // via onToken. If `siteKey` is null/empty (e.g. e2e container with
 // TURNSTILE_SITE_KEY=""), renders nothing and auto-reports an empty
 // token so the surrounding form can submit unchanged — this mirrors
 // the vanilla behaviour where an unset site key is a no-op.
 // ============================================================
 import { useEffect, useRef } from 'react';
 declare global {
  interface Window {
    turnstile?: {
      render: (el: HTMLElement, opts: Record<string, unknown>) => string;
      reset: (widgetId: string) => void;
      remove: (widgetId: string) => void;
    };
    onTurnstileLoad?: () => void;
  }
 }
 const SCRIPT_SRC = 'https://challenges.cloudflare.com/turnstile/v0/api.js?onload=onTurnstileLoad';
 let loadedOrLoading = false;
 const readyCallbacks: Array<() => void> = [];
 function ensureScript(): Promise<void> {
  return new Promise((resolve) => {
    if (typeof window === 'undefined') { resolve(); return; }
    if (window.turnstile) { resolve(); return; }
    readyCallbacks.push(resolve);
    if (loadedOrLoading) return;
    loadedOrLoading = true;
    window.onTurnstileLoad = () => {
      for (const cb of readyCallbacks.splice(0)) cb();
    };
    const s = document.createElement('script');
    s.src = SCRIPT_SRC;
    s.async = true;
    s.defer = true;
    document.head.appendChild(s);
  });
 }
 interface Props {
  siteKey: string | null | undefined;
  onToken: (token: string) => void;
  action?: string;
  theme?: 'light' | 'dark' | 'auto';
 }
 export default function Turnstile({ siteKey, onToken, action, theme = 'light' }: Props) {
  const containerRef = useRef<HTMLDivElement>(null);
  const widgetIdRef = useRef<string | null>(null);
  useEffect(() => {
    if (!siteKey) { onToken(''); return; }
    let cancelled = false;
    ensureScript().then(() => {
      if (cancelled || !containerRef.current || !window.turnstile) return;
      try {
        widgetIdRef.current = window.turnstile.render(containerRef.current, {
          sitekey: siteKey,
          theme,
          action,
          callback: (token: string) => onToken(token),
          'error-callback': () => onToken(''),
          'expired-callback': () => onToken(''),
        });
      } catch { /* ignore render errors — e.g. repeated mount */ }
    });
    return () => {
      cancelled = true;
      if (widgetIdRef.current && window.turnstile) {
        try { window.turnstile.remove(widgetIdRef.current); } catch { /* ignore */ }
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [siteKey]);
  if (!siteKey) return null;
  return <div ref={containerRef} className="cf-turnstile my-2" />;
 }
--- a/client/src/data/faq.ts
+++ b/client/src/data/faq.ts
@ -0,0 +1,150 @@
 export const FAQ_DATA = [
  {
    "section": "Getting Started",
    "items": [
      {
        "q": "What is Pediatric AI Scribe?",
        "a": "Pediatric AI Scribe is an AI-powered clinical documentation tool designed specifically for pediatric medicine. It helps physicians generate structured clinical notes from voice recordings or typed text, saving time on documentation so you can focus on patient care. It supports HPIs, SOAP notes, hospital courses, chart reviews, well visits, sick visits, developmental milestone assessments, and more."
      },
      {
        "q": "How do I create my first note?",
        "a": "The easiest way to start is with Live Encounter: Go to the Encounter tab Enter the patient's age and gender Click Start Recording and speak naturally during your patient encounter Click Stop when done &mdash; the audio is transcribed automatically Click Generate HPI to create a structured note Edit the note as needed, then Copy to paste into your EHR"
      },
      {
        "q": "Can I type or paste notes instead of recording?",
        "a": "Yes. Every transcript box is editable. You can type directly, paste from another source, or combine typed text with a recording. The AI works with whatever text is in the transcript area when you click Generate."
      },
      {
        "q": "What types of notes can I generate?",
        "a": "HPI &mdash; from live encounters or dictation, with OLDCARTS structure SOAP Notes &mdash; full SOAP or subjective-only from dictation Hospital Course &mdash; from progress notes, in prose, day-by-day, or organ-system format Chart Review &mdash; summarize outpatient, subspecialty, or ED visits for precharting Well Visit &mdash; complete preventive care notes with SSHADESS, milestones, and vaccines Sick Visit &mdash; quick documentation with auto-suggested ROS and PE Milestone Assessment &mdash; developmental narrative from selected milestones"
      }
    ]
  },
  {
    "section": "AI & Models",
    "items": [
      {
        "q": "What AI model should I use?",
        "a": "Each tab has a model selector dropdown. All available models have been tested and configured by your administrator for clinical documentation quality. They are routed through HIPAA-compliant providers with signed Business Associate Agreements (BAAs). All models are capable of generating accurate clinical notes. If you are unsure which to pick, start with the default. You can experiment with different models and see which output style you prefer &mdash; some may be faster, some more detailed, some more concise. You can choose a different model per tab depending on the task."
      },
      {
        "q": "Does the AI learn from my edits?",
        "a": "Yes. The app uses a correction tracking system inspired by Dragon Medical's adaptive learning. Here is how it works: When the AI generates a note, the original output is stored in memory You edit the note to match your preferred style &mdash; fix phrasing, add details, restructure sections When you click Save, the app detects what you changed and stores the correction On future notes, your past corrections are included as style hints so the AI adapts to your documentation preferences The more you use the app and save your edits, the better the AI gets at matching your style. You can view and manage your stored corrections in Settings &gt; AI Corrections. Note: Corrections are applied as gentle suggestions, not strict rules. The AI prioritizes clinical accuracy over style matching."
      },
      {
        "q": "Can I customize the AI's prompts?",
        "a": "Administrators can edit all AI prompts from the Admin Panel &gt; Settings &gt; Prompts section. This lets you adjust the instructions the AI follows for each note type without changing any code. Changes take effect immediately."
      },
      {
        "q": "What does the \"Refine\" button do?",
        "a": "After generating a note, you can give the AI plain-language instructions to modify it. For example: \"Make it shorter\" \"Add that the patient has a history of asthma\" \"Summarize the labs\" \"Change the assessment to include bronchiolitis\" The AI references both its current output and your original source material (transcript, pasted notes, labs) when refining, so it can look up details from the original input."
      }
    ]
  },
  {
    "section": "Voice & Transcription",
    "items": [
      {
        "q": "How does voice transcription work?",
        "a": "When you stop recording, the audio is sent to a speech-to-text service that converts it to text. The app supports multiple transcription providers including Whisper, Deepgram, and Google Gemini. Your administrator configures which provider is used. You will see a blue status bar at the top while transcription is in progress. You can continue working on the page while it processes."
      },
      {
        "q": "What is Browser Whisper?",
        "a": "Browser Whisper runs the Whisper AI model entirely in your browser using WebAssembly. Your audio never leaves your device, making it the most private transcription option. You can enable it in Settings &gt; Browser Whisper. It works offline and is HIPAA-safe since no data is transmitted. The tradeoff is that it is slower than cloud-based transcription and requires downloading the model (~40&ndash;240 MB) on first use."
      },
      {
        "q": "Can I use the app on my phone?",
        "a": "Yes. The app is a Progressive Web App (PWA) that works in any modern browser. On mobile: Open the app in Chrome or Safari Tap \"Add to Home Screen\" to install it as a standalone app Recording works in the foreground, but audio stops if you lock the screen or switch apps on iOS and most Android devices &mdash; this is a browser limitation, not specific to this app On desktop, recording continues normally when the browser is minimized or in the background."
      },
      {
        "q": "What happens if transcription fails?",
        "a": "If transcription fails, your audio is automatically backed up to the server for 24 hours. You can retry transcription from Settings &gt; Audio Backups. If browser speech recognition was active during recording, the live transcript is preserved as a fallback."
      },
      {
        "q": "Can the AI read my notes aloud?",
        "a": "Yes. Click the Read button on any generated note to hear it spoken aloud. This uses text-to-speech (TTS) powered by Google, OpenAI, or ElevenLabs depending on your setup. You can choose your preferred voice in Settings &gt; Voice Preferences."
      }
    ]
  },
  {
    "section": "Saving & Export",
    "items": [
      {
        "q": "Are my encounters saved?",
        "a": "You can save encounters using the Save button at the top of each tab. Saved encounters include the transcript, generated note, and patient label. You can reload them later using the Load button. Saved encounters are automatically deleted after 7 days (configurable by your administrator). This is intentional &mdash; the app is a documentation tool, not a medical record system. Copy your final notes to your EHR for permanent storage."
      },
      {
        "q": "How do I export notes?",
        "a": "Copy &mdash; one-click copy to clipboard, ready to paste into any EHR Nextcloud &mdash; export directly to your Nextcloud instance (configure in Settings) Documents &mdash; upload files to S3-compatible storage from Settings All generated text is plain text with no markdown formatting, designed to paste cleanly into any EHR system."
      }
    ]
  },
  {
    "section": "Privacy & Security",
    "items": [
      {
        "q": "Is my patient data safe?",
        "a": "The app is designed with clinical privacy in mind: All connections use HTTPS/TLS encryption Audio and encounter data are temporary &mdash; auto-deleted within hours or days No patient data is stored long-term on the server Every action is audit-logged (who accessed what, when) Two-factor authentication (2FA) and session management are available Browser Whisper keeps audio entirely on your device For HIPAA compliance, ensure your administrator has configured a BAA-covered AI provider (such as AWS Bedrock, Google Vertex AI, or Azure OpenAI)."
      },
      {
        "q": "What is two-factor authentication (2FA)?",
        "a": "2FA adds an extra layer of security to your account. After entering your password, you also enter a 6-digit code from an authenticator app (like Google Authenticator or Authy). Enable it in Settings &gt; Two-Factor Authentication."
      },
      {
        "q": "How do I manage my active sessions?",
        "a": "Go to Settings &gt; Active Sessions to see all devices where you are logged in. You can revoke any session individually or click Revoke All Other Sessions to log out every other device. Your current session is highlighted and cannot be revoked from this screen &mdash; use the Logout button instead."
      },
      {
        "q": "What happens when I change my password?",
        "a": "When you change your password in Settings &gt; Change Password, all other active sessions are automatically logged out for security. Only your current session remains active. The app also checks if your new password has appeared in known data breaches and warns you (but does not prevent you from using it)."
      }
    ]
  },
  {
    "section": "Well Visit & Sick Visit",
    "items": [
      {
        "q": "How does the Well Visit tab work?",
        "a": "The Well Visit tab follows the AAP Bright Futures periodicity schedule. It includes: Visit by Age &mdash; recommended screenings, vaccines, and anticipatory guidance for each visit age Milestones &mdash; developmental milestone tracker from birth through 11 years across multiple domains SSHADESS &mdash; adolescent psychosocial assessment (Strengths, School, Home, Activities, Drugs, Emotions, Sexuality, Safety) for ages 12+ Visit Note &mdash; generates a complete well visit note combining ROS, PE, milestones, and SSHADESS data"
      },
      {
        "q": "What do the WNL / Abnormal / Not Reviewed buttons do?",
        "a": "In the ROS and Physical Exam sections, each system has three options: WNL / Normal &mdash; within normal limits, no concerns Abnormal &mdash; a text box appears so you can describe the finding Not Reviewed / Not Examined &mdash; explicitly not assessed Use All WNL to quickly mark everything normal, then click individual systems to change specific ones. Use Clear to reset all selections."
      }
    ]
  },
  {
    "section": "Learning Hub",
    "items": [
      {
        "q": "What is the Learning Hub?",
        "a": "The Learning Hub is an educational platform integrated into the app. It contains articles, clinical pearls, quizzes, and slide presentations created by moderators and administrators. You can browse by category, search content, and take quizzes to test your knowledge."
      },
      {
        "q": "How do quizzes work?",
        "a": "Quizzes include multiple-choice, multi-select, and true/false questions. After submitting your answers, you see your score along with explanations for each question. Your past attempts and scores are tracked so you can monitor your progress over time."
      },
      {
        "q": "Can I create Learning Hub content?",
        "a": "Moderators and administrators can create content using the CMS tab. You can write articles manually, or use AI to generate content from a topic description, uploaded PDFs, or files from Nextcloud. The CMS also supports Marp-based slide presentations with PPTX export."
      }
    ]
  },
  {
    "section": "Pediatric Calculators",
    "items": [
      {
        "q": "What calculators are available?",
        "a": "The Calculators tab includes clinical tools commonly used in pediatric practice: Blood Pressure Percentile &mdash; AAP 2017 guidelines using the Rosner quantile spline regression method. Requires age, sex, height, and BP. Provides exact systolic and diastolic percentiles adjusted for height, with AAP classification (Normal, Elevated, Stage 1, Stage 2). Includes definitions of hypertension and hypotension. BMI Percentile &mdash; CDC 2000 growth reference with extended obesity classification (Class 1, 2, 3 using % of 95th percentile). Shows BMI chart with percentile curves. Growth Charts &mdash; Visual percentile curves (3rd through 97th) with your patient plotted. Includes Weight-for-Age, Length/Height-for-Age (with mid-parental height), Head Circumference, Weight-for-Length, and Fenton preterm charts. Bilirubin &mdash; AAP 2022 phototherapy threshold calculator and Bhutani hour-specific nomogram with risk zone classification. Includes Nelson Table 137.1 risk factors. Vital Signs by Age &mdash; Harriet Lane reference table for HR, RR, BP, and weight by age from preterm through 18 years. Includes quick formulas for estimated weight, minimum SBP, ETT size, and maintenance fluids. Body Surface Area &mdash; Mosteller formula for BSA calculation. Weight-Based Dosing &mdash; Dose per kg with frequency, max dose cap, and volume calculation from concentration."
      },
      {
        "q": "How accurate is the BP calculator?",
        "a": "The BP calculator uses the same Rosner quantile spline regression method as the Baylor College of Medicine reference calculator. It computes exact percentiles (1st-99th) based on your patient's age, sex, and height using published regression coefficients. This is the same methodology underlying the AAP 2017 normative tables. Results are height-adjusted and clinically accurate."
      },
      {
        "q": "What are the growth chart curves?",
        "a": "The growth charts display WHO/CDC percentile curves (3rd, 5th, 10th, 25th, 50th, 75th, 90th, 95th, 97th percentiles) with your patient's measurement plotted as a blue dot. The 50th percentile is shown as a bold green line. Shaded bands show the normal range between symmetric percentiles. For Length/Height-for-Age, you can optionally enter both parents' heights to see the mid-parental target height range plotted on the chart."
      }
    ]
  }
 ];
--- a/client/src/data/pe-data.test.ts
+++ b/client/src/data/pe-data.test.ts
@ -0,0 +1,90 @@
 // ============================================================
 // PE_DATA parity counts — catches the class of bug where an LLM
 // silently drops entries from a long clinical array during a port.
 // Numbers captured 2026-04-24 against public/js/peGuide.js commit
 // 313ba7f. If the vanilla source changes, update both files in the
 // same commit.
 // ============================================================
 import { describe, expect, it } from 'vitest';
 import { PE_DATA, AGE_GROUP_ORDER, SYSTEM_ORDER } from './pe-data';
 describe('PE_DATA shape', () => {
  it('has the six expected age groups', () => {
    expect(Object.keys(PE_DATA).sort()).toEqual([...AGE_GROUP_ORDER].sort());
  });
  it.each([...AGE_GROUP_ORDER])('%s has all four systems', (age) => {
    const group = PE_DATA[age];
    for (const s of SYSTEM_ORDER) {
      expect(group[s]).toBeDefined();
      expect(group[s].overview.length).toBeGreaterThan(0);
      expect(Array.isArray(group[s].components)).toBe(true);
      expect(group[s].components.length).toBeGreaterThan(0);
    }
  });
  it('component + abnormalHints + pearl + significance counts match vanilla', () => {
    let componentCount = 0;
    let pearlCount = 0;
    let significanceCount = 0;
    for (const age of AGE_GROUP_ORDER) {
      for (const sys of SYSTEM_ORDER) {
        const comps = PE_DATA[age][sys].components;
        for (const c of comps) {
          componentCount++;
          if (c.pearl) pearlCount++;
          if (c.significance) significanceCount++;
          expect(Array.isArray(c.steps)).toBe(true);
          expect(c.steps.length).toBeGreaterThan(0);
          expect(Array.isArray(c.abnormalHints)).toBe(true);
        }
      }
    }
    // Locked against vanilla peGuide.js (2026-04-24):
    //   103 components, 27 pearl, 23 significance.
    expect(componentCount).toBe(103);
    expect(pearlCount).toBe(27);
    expect(significanceCount).toBe(23);
  });
 });
 // Per-age-group × per-system component counts — captured from the
 // legacy file with:
 //   awk 'NR>=316 && NR<=1334' public/js/peGuide.js |
 //   awk '/^    [a-z]+: \{$/{age=$1} /^      [a-z]+: \{$/{sys=$1}
 //        /^          { name:/{c[age" "sys]++} END{for(k in c) print k" "c[k]}' | sort
 // so any drift in the TS port surfaces as a failing test here.
 describe('PE_DATA per-cell component counts', () => {
  const EXPECTED: Record<string, number> = {
    'newborn msk':      6,
    'newborn neuro':    6,
    'newborn resp':     2,
    'newborn cv':       2,
    'infant msk':       4,
    'infant neuro':     5,
    'infant resp':      2,
    'infant cv':        2,
    'toddler msk':      5,
    'toddler neuro':    7,
    'toddler resp':     2,
    'toddler cv':       2,
    'preschool msk':    5,
    'preschool neuro':  7,
    'preschool resp':   2,
    'preschool cv':     2,
    'school msk':       5,
    'school neuro':     7,
    'school resp':      3,
    'school cv':        2,
    'adolescent msk':   6,
    'adolescent neuro': 8,
    'adolescent resp':  6,
    'adolescent cv':    5,
  };
  it.each(Object.entries(EXPECTED))('%s matches', (key, expected) => {
    const [age, sys] = key.split(' ') as ['newborn', 'msk'];
    expect(PE_DATA[age][sys].components.length).toBe(expected);
  });
 });
--- a/client/src/data/pe-data.ts
+++ b/client/src/data/pe-data.ts
--- a/client/src/data/pe-guide.ts
+++ b/client/src/data/pe-guide.ts
@ -0,0 +1,290 @@
 // ============================================================
 // PE-GUIDE DATA — ported verbatim from public/js/peGuide.js
 // (lines 23-311 of the vanilla file, as of commit before this one).
 //
 // This file ONLY contains the stable reference data:
 //   • SCALES         — grading scales (MRC, DTR, Levine, Beighton, …)
 //   • SYSTEM_SCALES  — which scales belong to which body system
 //   • APTM_LEGEND    — the 5 cardiac auscultation points
 //   • INNOCENT_MURMURS — benign childhood murmurs
 //   • RESP_SOUNDS    — respiratory sounds library (audio paths)
 //   • CARDIAC_SOUNDS — cardiac sounds library (audio paths)
 //
 // PE_DATA (the full age-group × system × component × step hierarchy,
 // ~1000 lines) is intentionally NOT ported here. It holds clinically
 // reviewed content and the migration checkpoint explicitly warns
 // "An LLM will sometimes 'simplify' a long array — don't let that
 // happen." PE_DATA port belongs in its own dedicated session with
 // per-entry counts + visual diff verification against the vanilla
 // source. Until that session, the React PE Guide surfaces the
 // reference libraries below and links to the legacy viewer for
 // exam-step checklists and narrative generation.
 //
 // Audio files stay in public/audio/respiratory/ and public/audio/cardiac/
 // and are served unchanged from Express.
 // ============================================================
 export interface ScaleDef {
  title: string;
  icon: string;
  rows: Array<[string, string]>;
 }
 export const SCALES: Record<string, ScaleDef> = {
  mrc: {
    title: 'MRC strength grade (0–5)',
    icon: 'fa-hand-fist',
    rows: [
      ['5', 'Normal power — holds against full resistance'],
      ['4', 'Reduced — moves against gravity + some resistance'],
      ['3', 'Moves against gravity only (no added resistance)'],
      ['2', 'Full range with gravity eliminated (horizontal plane)'],
      ['1', 'Flicker / trace contraction, no joint movement'],
      ['0', 'No contraction'],
    ],
  },
  dtr: {
    title: 'Deep-tendon reflex grade (0–4+)',
    icon: 'fa-circle-dot',
    rows: [
      ['0',  'Absent'],
      ['1+', 'Hypoactive — trace, only with reinforcement'],
      ['2+', 'Normal'],
      ['3+', 'Brisk — may still be normal in anxious patients'],
      ['4+', 'Hyperactive with sustained clonus — always abnormal'],
    ],
  },
  plantar: {
    title: 'Plantar response (Babinski)',
    icon: 'fa-shoe-prints',
    rows: [
      ['Down-going', 'Normal in anyone ≥ 2 years'],
      ['Up-going',   'Normal < 2 years; abnormal after — UMN lesion'],
      ['Asymmetric', 'Always abnormal at any age'],
    ],
  },
  beighton: {
    title: 'Beighton hypermobility score (0–9)',
    icon: 'fa-hands',
    rows: [
      ['≤ 3', 'Normal flexibility'],
      ['4',   'Borderline — consider in context'],
      ['≥ 5', 'Hypermobility spectrum; screen for hEDS if other features present'],
    ],
  },
  atr: {
    title: 'Scoliometer — angle of trunk rotation',
    icon: 'fa-ruler',
    rows: [
      ['< 5°',  'Normal, no follow-up'],
      ['5–6°',  'Borderline — re-check at each visit'],
      ['≥ 7°',  'Refer for PA/lateral spine x-ray + orthopedic evaluation'],
    ],
  },
  rr: {
    title: 'Respiratory rate — upper limit by age (awake)',
    icon: 'fa-lungs',
    rows: [
      ['Newborn',       '≤ 60 /min'],
      ['< 2 months',    '≤ 60 /min (WHO tachypnea cutoff)'],
      ['2–12 months',   '≤ 50 /min (WHO tachypnea cutoff)'],
      ['1–5 years',     '≤ 40 /min (WHO tachypnea cutoff)'],
      ['6–11 years',    '≤ 30 /min'],
      ['≥ 12 years',    '≤ 20 /min (adult pattern)'],
    ],
  },
  spo2: {
    title: 'Pulse oximetry (SpO₂) — at room air',
    icon: 'fa-heart-pulse',
    rows: [
      ['≥ 95%',   'Normal'],
      ['92–94%',  'Mild hypoxemia — investigate cause'],
      ['< 92%',   'Moderate hypoxemia — supplemental O₂'],
      ['< 88%',   'Severe — urgent intervention; target ≥ 90% acutely'],
    ],
  },
  silverman: {
    title: 'Silverman–Andersen retraction score (neonatal, 0–10)',
    icon: 'fa-baby',
    rows: [
      ['0',     'No respiratory distress'],
      ['1–3',   'Mild — close observation'],
      ['4–6',   'Moderate distress — consider CPAP / support'],
      ['7–10',  'Severe — imminent respiratory failure, intubate'],
    ],
  },
  westley: {
    title: 'Westley croup severity score',
    icon: 'fa-stethoscope',
    rows: [
      ['≤ 2',    'Mild — home management, cool mist, oral dexamethasone'],
      ['3–5',    'Moderate — nebulised epinephrine + dexamethasone'],
      ['6–11',   'Severe — admit, continuous monitoring'],
      ['≥ 12',   'Impending respiratory failure — ICU / airway management'],
    ],
  },
  murmurGrade: {
    title: 'Heart-murmur grading (Levine 1–6)',
    icon: 'fa-wave-square',
    rows: [
      ['1/6',   'Very faint — heard only with concentration'],
      ['2/6',   'Soft but readily heard'],
      ['3/6',   'Moderately loud, no thrill'],
      ['4/6',   'Loud WITH a palpable thrill'],
      ['5/6',   'Very loud; audible with stethoscope just off the chest'],
      ['6/6',   'Audible without the stethoscope touching the chest'],
    ],
  },
  pulseAmp: {
    title: 'Pulse amplitude grade (0–4)',
    icon: 'fa-heart-pulse',
    rows: [
      ['0',   'Absent'],
      ['1+',  'Diminished, thready'],
      ['2+',  'Normal'],
      ['3+',  'Bounding'],
      ['4+',  'Bounding with visible pulsation (e.g., aortic regurgitation)'],
    ],
  },
  capRefill: {
    title: 'Capillary refill time',
    icon: 'fa-hand',
    rows: [
      ['< 2 sec',  'Normal'],
      ['2–3 sec',  'Borderline — consider hydration / perfusion'],
      ['≥ 3 sec',  'Delayed — dehydration, shock, low cardiac output'],
    ],
  },
 };
 export const SYSTEM_SCALES: Record<string, string[]> = {
  msk:   ['atr', 'beighton'],
  neuro: ['mrc', 'dtr', 'plantar'],
  resp:  ['rr', 'spo2', 'silverman', 'westley'],
  cv:    ['murmurGrade', 'pulseAmp', 'capRefill'],
 };
 // APTM — the 5 classic cardiac auscultation points
 export interface AptmEntry {
  letter: string;
  color: string;
  title: string;
  location: string;
  listen: string;
  innocent?: string;
 }
 export const APTM_LEGEND: AptmEntry[] = [
  { letter: 'A', color: '#dc2626', title: 'Aortic area',      location: '2nd ICS, right sternal border',       listen: 'S2 (aortic component), aortic stenosis, aortic regurgitation' },
  { letter: 'P', color: '#2563eb', title: 'Pulmonic area',    location: '2nd ICS, left sternal border',        listen: 'S2 (pulmonic component), pulmonic stenosis, PDA, physiologic split of S2',
    innocent: 'Pulmonary flow murmur (children, adolescents) — upper left sternal border' },
  { letter: 'E', color: '#059669', title: 'Erb\'s point',     location: '3rd ICS, left sternal border',        listen: 'Aortic regurgitation (best here), transitional zone murmurs',
    innocent: 'Still\'s murmur classically radiates to Erb\'s / LLSB' },
  { letter: 'T', color: '#d97706', title: 'Tricuspid area',   location: '4th–5th ICS, lower left sternal border', listen: 'Tricuspid regurgitation, VSD, S3/S4, holosystolic murmurs',
    innocent: 'Still\'s murmur — vibratory, musical, age 3–7 y (loudest between LLSB and apex)' },
  { letter: 'M', color: '#7c3aed', title: 'Mitral area (apex)', location: '5th ICS, mid-clavicular line',      listen: 'S1, mitral regurgitation, mitral stenosis (with bell, left-lateral decubitus)' },
 ];
 // Innocent (benign) childhood murmurs
 export interface InnocentMurmur {
  name: string;
  age: string;
  location: string;
  character: string;
  confirm: string;
 }
 export const INNOCENT_MURMURS: InnocentMurmur[] = [
  { name: 'Still\'s (vibratory) murmur',
    age: '3–7 y (most common in children)',
    location: 'LLSB, radiating to apex',
    character: 'Low-frequency vibratory / musical systolic, grade 2–3/6, mid-systolic, "twanging-string" quality',
    confirm: 'Louder supine, softer or disappears on standing or Valsalva. No radiation to neck/back. Normal S2.' },
  { name: 'Pulmonary flow murmur',
    age: 'School-age and adolescents, thin chest',
    location: 'Upper left sternal border (2nd–3rd ICS)',
    character: 'Soft blowing early systolic ejection, grade 1–2/6, higher-pitched',
    confirm: 'No ejection click. Physiologic split of S2. Louder supine, softer on standing. No radiation.' },
  { name: 'Venous hum',
    age: 'Ages 3–8, disappears by adolescence',
    location: 'Supraclavicular or infraclavicular area, usually right',
    character: 'Soft continuous hum, louder in diastole. Only innocent continuous murmur.',
    confirm: 'Disappears when supine OR when jugular vein is gently compressed (key maneuver). Turning head to opposite side also alters it.' },
  { name: 'Carotid bruit / supraclavicular bruit',
    age: 'Children and adolescents',
    location: 'Supraclavicular fossa, right > left; may radiate to carotid',
    character: 'Brief early systolic, grade 2–3/6, higher-pitched than Still\'s',
    confirm: 'Softer or disappears with hyperextension of the shoulders. Normal cardiac exam otherwise. No radiation below the clavicles.' },
  { name: 'Peripheral pulmonary stenosis (PPS, neonatal)',
    age: 'Newborns and infants < 6–12 months',
    location: 'Upper LSB, radiates to BOTH axillae and the back',
    character: 'Soft systolic ejection murmur, grade 1–2/6',
    confirm: 'Typical age + radiation to back/axillae. Resolves by age 1 as branch pulmonary arteries grow. Persistence or louder grade warrants echo.' },
 ];
 // Respiratory sounds library — real recordings served from /public/audio/respiratory/
 export interface SoundEntry {
  key: string;
  src: string;
  title: string;
  where: string;
  rate?: string;
  features: string;
  clinical: string;
 }
 export const RESP_SOUNDS: SoundEntry[] = [
  { key: 'normal',         src: '/audio/respiratory/normal-vesicular.ogg', title: 'Normal vesicular breath sounds',
    where: 'Peripheral lung fields',
    features: 'Soft, rustling. Inspiration louder and longer than expiration.',
    clinical: 'Baseline — deviation elsewhere is what you listen for.' },
  { key: 'wheeze',         src: '/audio/respiratory/wheeze.ogg',      title: 'Wheeze',
    where: 'Diffuse in asthma; localised in foreign body',
    features: 'Continuous, high-pitched, musical. Usually expiratory; biphasic if severe.',
    clinical: 'Lower-airway narrowing — asthma, bronchiolitis, foreign body, bronchomalacia. Silent chest in severe asthma is an ominous sign.' },
  { key: 'stridor',        src: '/audio/respiratory/stridor.ogg',     title: 'Stridor',
    where: 'Louder over neck than chest — upper airway',
    features: 'Continuous, high-pitched, harsh. Classically inspiratory (extrathoracic obstruction); biphasic if fixed.',
    clinical: 'Croup, epiglottitis, foreign body, laryngomalacia (infant). Distinguish from wheeze by auscultating the neck — stridor is loudest there.' },
  { key: 'finecrackles',   src: '/audio/respiratory/crackles-fine.ogg',   title: 'Fine (end-inspiratory) crackles',
    where: 'Bibasilar in pulmonary edema/fibrosis; focal in pneumonia',
    features: 'Discontinuous, brief, high-pitched. "Velcro" quality. Late inspiratory, do NOT clear with cough.',
    clinical: 'Alveolar opening — pulmonary fibrosis, pulmonary edema, early pneumonia, atelectasis.' },
  { key: 'coarsecrackles', src: '/audio/respiratory/crackles-coarse.ogg', title: 'Coarse crackles',
    where: 'Lower lobes; either side',
    features: 'Discontinuous, longer and louder than fine crackles. Lower-pitched. Can be early or late inspiratory; often clear partly with cough.',
    clinical: 'Secretions in larger airways — bronchitis, later pneumonia, bronchiectasis, aspiration.' },
  { key: 'rhonchi',        src: '/audio/respiratory/rhonchi.ogg',    title: 'Rhonchi',
    where: 'Central or anywhere with airway secretions',
    features: 'Continuous, low-pitched, snore-like. Typically expiratory. Clear or change with cough.',
    clinical: 'Large-airway secretions — bronchitis, pneumonia with large-airway involvement, cystic fibrosis, bronchiectasis.' },
  { key: 'pleuralrub',     src: '/audio/respiratory/pleural-rub.ogg', title: 'Pleural friction rub',
    where: 'Focal, often lateral or posterior lower chest',
    features: 'Grating, creaky — "leather on leather". Biphasic (heard in inspiration and expiration). Does NOT clear with cough.',
    clinical: 'Pleural inflammation — pleuritis, pulmonary embolism, pneumonia with pleural involvement, viral pleurisy.' },
 ];
 // Cardiac sounds library — real recordings from Wikimedia Commons
 export const CARDIAC_SOUNDS: SoundEntry[] = [
  { key: 'normal', src: '/audio/cardiac/normal.ogg', title: 'Normal heart sounds (S1, S2)',
    where: 'All four classic auscultation points', rate: '~61 bpm reference',
    features: '"lub-dub": S1 (closure of mitral + tricuspid) louder at apex; S2 (closure of aortic + pulmonic) louder at base. Physiologic S2 split on inspiration.',
    clinical: 'Reference for rhythm, rate, and the normal S1–S2 interval. Listen for what\'s changed — not just what\'s added.' },
  { key: 'infant-normal', src: '/audio/cardiac/infant-normal.ogg', title: 'Infant normal heart sounds',
    where: 'Infant chest — rate will be higher than adult', rate: 'Pediatric reference (120–160 bpm range)',
    features: 'Same S1–S2 pattern, faster rate. Short diastole makes murmurs easier to miss — careful auscultation needed.',
    clinical: 'Reference for neonatal/infant rhythm. Any murmur in the first 72 h should prompt pre/postductal sat screening.' },
  { key: 'vsd', src: '/audio/cardiac/vsd.wav', title: 'Ventricular septal defect (VSD)',
    where: 'Lower left sternal border (4th ICS)',
    features: 'Harsh, blowing, holosystolic (pansystolic) murmur — plateau shape through all of systole. Often accompanied by a thrill if large.',
    clinical: 'Most common congenital heart defect. Small VSD: loud murmur, usually asymptomatic, may close spontaneously. Large VSD: softer murmur (less pressure gradient) but signs of heart failure, pulmonary hypertension.' },
  { key: 'mvp', src: '/audio/cardiac/mitral-prolapse.wav', title: 'Mitral valve prolapse (MVP) — click + late systolic murmur',
    where: 'Apex (5th ICS, mid-clavicular line)',
    features: 'Mid-systolic click followed by a late-systolic crescendo murmur. Timing of click changes with maneuvers: earlier with standing or Valsalva, later with squatting.',
    clinical: 'Often benign, especially in thin young women. Features suggesting need for echo: thickened/redundant leaflets, associated MR, symptoms (palpitations, chest pain), arrhythmias.' },
  { key: 'stills', src: '/audio/cardiac/stills-murmur.ogg', title: 'Still\'s murmur (innocent)',
    where: 'LLSB, radiating to apex', rate: 'Classic age 3–7 y (this recording is a toddler)',
    features: 'Low-frequency vibratory / musical systolic, grade 2–3/6, mid-systolic, "twanging-string" quality.',
    clinical: 'The most common innocent murmur of childhood. Louder supine, softer or disappears on standing or Valsalva. Normal S2. No radiation to neck or back. No workup needed when classic.' },
  { key: 'functional', src: '/audio/cardiac/functional-murmur.wav', title: 'Functional (innocent) murmur — adult female',
    where: 'Left sternal border, soft systolic',
    features: 'Soft systolic murmur in a structurally normal heart — often from increased cardiac output, thin chest wall, anemia, hyperthyroidism, or pregnancy.',
    clinical: 'Benign if it meets the 7 S criteria. Investigate if loud (≥3/6), holosystolic, diastolic, radiating, or with thrill / symptoms.' },
 ];
--- a/client/src/index.css
+++ b/client/src/index.css
@ -0,0 +1,44 @@
@import "tailwindcss";
 /* Tailwind v4 uses @theme to declare custom color tokens that then
   expose the matching utility classes (bg-background, text-foreground,
   border-border, etc.). Values tuned to the shadcn/ui 'new-york' palette;
   adjust later to match the existing vanilla app's blue / g100 colors. */
@theme {
  --color-background: hsl(0 0% 100%);
  --color-foreground: hsl(222.2 47.4% 11.2%);
  --color-muted: hsl(210 40% 96.1%);
  --color-muted-foreground: hsl(215.4 16.3% 46.9%);
  --color-card: hsl(0 0% 100%);
  --color-card-foreground: hsl(222.2 47.4% 11.2%);
  --color-popover: hsl(0 0% 100%);
  --color-popover-foreground: hsl(222.2 47.4% 11.2%);
  --color-primary: hsl(222.2 47.4% 11.2%);
  --color-primary-foreground: hsl(210 40% 98%);
  --color-secondary: hsl(210 40% 96.1%);
  --color-secondary-foreground: hsl(222.2 47.4% 11.2%);
  --color-accent: hsl(210 40% 96.1%);
  --color-accent-foreground: hsl(222.2 47.4% 11.2%);
  --color-destructive: hsl(0 84% 60%);
  --color-destructive-foreground: hsl(210 40% 98%);
  --color-border: hsl(214.3 31.8% 91.4%);
  --color-input: hsl(214.3 31.8% 91.4%);
  --color-ring: hsl(215 20.2% 65.1%);
  --radius: 0.5rem;
 }
 body {
  background: var(--color-background);
  color: var(--color-foreground);
  margin: 0;
 }
--- a/client/src/lib/api.ts
+++ b/client/src/lib/api.ts
@ -0,0 +1,45 @@
 // Thin fetch wrapper used by every React page. Centralises auth
 // header handling (cookie-based, credentials: 'include'), JSON
 // parsing, and typed success-vs-error narrowing via shared/types.
 import type { ApiResponse } from '@/shared/types';
 export class ApiError extends Error {
  constructor(public status: number, message: string) {
    super(message);
  }
 }
 export async function apiFetch<TOk>(
  path: string,
  init: RequestInit = {},
 ): Promise<TOk> {
  const resp = await fetch(path, {
    credentials: 'include',
    headers: {
      'Content-Type': 'application/json',
      ...(init.headers || {}),
    },
    ...init,
  });
  // Non-JSON responses (e.g. audio blobs) — caller must handle.
  const ct = resp.headers.get('content-type') || '';
  if (!ct.includes('application/json')) {
    if (!resp.ok) throw new ApiError(resp.status, resp.statusText);
    return (await resp.blob()) as unknown as TOk;
  }
  const body = (await resp.json()) as ApiResponse<TOk>;
  if (!resp.ok || body.success === false) {
    throw new ApiError(resp.status, (body as { error?: string }).error || resp.statusText);
  }
  return body as unknown as TOk;
 }
 // Shortcuts for common verbs
 export const api = {
  get:    <T>(path: string) => apiFetch<T>(path),
  post:   <T>(path: string, body: unknown) => apiFetch<T>(path, { method: 'POST', body: JSON.stringify(body) }),
  put:    <T>(path: string, body: unknown) => apiFetch<T>(path, { method: 'PUT', body: JSON.stringify(body) }),
  delete: <T>(path: string) => apiFetch<T>(path, { method: 'DELETE' }),
 };
--- a/client/src/lib/encounter-persistence.ts
+++ b/client/src/lib/encounter-persistence.ts
@ -0,0 +1,124 @@
 // ============================================================
 // Encounter persistence — port of public/js/encounters.js save/load
 // flow. sessionStorage keys survive page refresh + sign-out so a
 // resumed session lands on the same DB row instead of creating a
 // duplicate. Optimistic-locking via expected_version preserved.
 // ============================================================
 export type EncType = 'encounter' | 'dictation' | 'hospital' | 'chart' | 'wellvisit' | 'sickvisit' | 'soap';
 const SAVED_KEY = (t: EncType) => '_savedEncId_' + t;
 const IDEMP_KEY = (t: EncType) => '_idempKey_' + t;
 export function getSavedEncId(t: EncType): number | null {
  try {
    const v = sessionStorage.getItem(SAVED_KEY(t));
    return v ? Number(v) : null;
  } catch { return null; }
 }
 export function setSavedEncId(t: EncType, id: number | null) {
  try {
    if (id == null) sessionStorage.removeItem(SAVED_KEY(t));
    else sessionStorage.setItem(SAVED_KEY(t), String(id));
  } catch { /* ignore */ }
 }
 export function getIdempotencyKey(t: EncType): string {
  try {
    const existing = sessionStorage.getItem(IDEMP_KEY(t));
    if (existing) return existing;
  } catch { /* ignore */ }
  const fresh = (typeof crypto !== 'undefined' && crypto.randomUUID)
    ? crypto.randomUUID()
    : 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
        const r = Math.random() * 16 | 0;
        return (c === 'x' ? r : (r & 0x3 | 0x8)).toString(16);
      });
  try { sessionStorage.setItem(IDEMP_KEY(t), fresh); } catch { /* ignore */ }
  return fresh;
 }
 export function resetIdempotencyKey(t: EncType) {
  try { sessionStorage.removeItem(IDEMP_KEY(t)); } catch { /* ignore */ }
 }
 const _versions = new Map<number, number>();
 export interface SaveEncounterInput {
  type: EncType;
  label: string;
  transcript: string;
  generatedNote: string;
  partialData?: unknown; // serialized to JSON
 }
 export interface SaveEncounterResult {
  id: number;
  version: number;
 }
 export async function saveEncounter(input: SaveEncounterInput): Promise<SaveEncounterResult> {
  if (!input.label.trim()) throw new Error('Enter a patient label first');
  const id = getSavedEncId(input.type);
  const body: Record<string, unknown> = {
    label: input.label.trim(),
    enc_type: input.type,
    transcript: input.transcript,
    generated_note: input.generatedNote,
    partial_data: input.partialData != null ? JSON.stringify(input.partialData) : undefined,
    idempotency_key: getIdempotencyKey(input.type),
  };
  if (id != null) {
    body.id = id;
    const expected = _versions.get(id);
    if (expected != null) body.expected_version = expected;
  }
  const r = await fetch('/api/encounters/saved', {
    method: 'POST',
    credentials: 'include',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(body),
  });
  const data = await r.json();
  if (r.status === 409) throw new Error('Someone else edited this encounter. Reload to see the latest version.');
  if (!data.success) throw new Error(data.error || 'Save failed');
  if (data.id != null) {
    setSavedEncId(input.type, data.id);
    if (data.version != null) _versions.set(data.id, data.version);
  }
  return { id: data.id, version: data.version };
 }
 export interface LoadedEncounter {
  id: number;
  label: string;
  enc_type: string;
  transcript: string;
  generated_note: string;
  partial_data: string | null;
  version?: number;
 }
 export async function loadEncounter(id: number): Promise<LoadedEncounter> {
  const r = await fetch('/api/encounters/saved/' + id, { credentials: 'include' });
  const data = await r.json();
  if (!data.success) throw new Error(data.error || 'Load failed');
  if (data.encounter && data.encounter.version != null) _versions.set(id, data.encounter.version);
  return data.encounter as LoadedEncounter;
 }
 export interface SavedEncounterListEntry {
  id: number;
  label: string;
  enc_type: EncType;
  status?: string;
  updated_at: string;
  expires_at: string;
 }
 export async function listSavedEncounters(): Promise<SavedEncounterListEntry[]> {
  const r = await fetch('/api/encounters/saved', { credentials: 'include' });
  const data = await r.json();
  return (data.encounters || []) as SavedEncounterListEntry[];
 }
 export function clearTabState(t: EncType) {
  setSavedEncId(t, null);
  resetIdempotencyKey(t);
 }
--- a/client/src/lib/recorder.ts
+++ b/client/src/lib/recorder.ts
@ -0,0 +1,59 @@
 // ============================================================
 // AudioRecorder — verbatim port of public/js/app.js:660-687.
 // Same constraints (mono, 16kHz, EC+NS), same opus 32kbps target.
 // Exposes the underlying mediaRecorder + stream so the React
 // Recorder component can pause/resume + restart on the same stream
 // (matches vanilla liveEncounter.js fallback behavior).
 // ============================================================
 export class AudioRecorder {
  mediaRecorder: MediaRecorder | null = null;
  chunks: Blob[] = [];
  stream: MediaStream | null = null;
  start(): Promise<void> {
    this.chunks = [];
    return navigator.mediaDevices.getUserMedia({
      audio: { channelCount: 1, sampleRate: 16000, echoCancellation: true, noiseSuppression: true },
    }).then((stream) => {
      this.stream = stream;
      const mime = MediaRecorder.isTypeSupported('audio/webm;codecs=opus') ? 'audio/webm;codecs=opus' : 'audio/webm';
      this.mediaRecorder = new MediaRecorder(stream, { mimeType: mime, audioBitsPerSecond: 32000 });
      this.mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0) this.chunks.push(e.data); };
      this.mediaRecorder.start(1000);
    });
  }
  stop(): Promise<Blob | null> {
    return new Promise((resolve) => {
      if (!this.mediaRecorder || this.mediaRecorder.state === 'inactive') { resolve(null); return; }
      this.mediaRecorder.onstop = () => {
        const blob = new Blob(this.chunks, { type: this.mediaRecorder!.mimeType });
        if (this.stream) this.stream.getTracks().forEach((t) => t.stop());
        resolve(blob);
      };
      this.mediaRecorder.stop();
    });
  }
  pause() {
    if (this.mediaRecorder && typeof this.mediaRecorder.pause === 'function' && this.mediaRecorder.state === 'recording') {
      try { this.mediaRecorder.pause(); } catch { /* ignore */ }
    }
  }
  resume() {
    if (!this.mediaRecorder) return;
    try {
      if (typeof this.mediaRecorder.resume === 'function' && this.mediaRecorder.state === 'paused') {
        this.mediaRecorder.resume();
      } else if (this.mediaRecorder.state === 'inactive' && this.stream && this.stream.active) {
        // Browser killed it — restart on the same stream (matches vanilla fallback).
        const mime = MediaRecorder.isTypeSupported('audio/webm;codecs=opus') ? 'audio/webm;codecs=opus' : 'audio/webm';
        this.mediaRecorder = new MediaRecorder(this.stream, { mimeType: mime, audioBitsPerSecond: 32000 });
        this.mediaRecorder.ondataavailable = (e) => { if (e.data.size > 0) this.chunks.push(e.data); };
        this.mediaRecorder.start(1000);
      }
    } catch { /* ignore */ }
  }
 }
--- a/client/src/lib/sanitize.ts
+++ b/client/src/lib/sanitize.ts
@ -0,0 +1,57 @@
 // ============================================================
 // Minimal inline HTML sanitizer. Not as thorough as DOMPurify but
 // covers the main XSS vectors for CMS-authored Learning Hub
 // content (admin-authored, so the trust model is higher than
 // user-generated content anyway):
 //
 //   • Strips <script>, <style>, <iframe>, <object>, <embed>, <link>
 //   • Strips every on* event-handler attribute
 //   • Strips javascript:/data:(text/html) URL schemes on href/src
 //   • Strips any attribute whose value contains "javascript:"
 //   • Preserves standard formatting tags (p, h1-6, ul/ol/li, strong,
 //     em, code, pre, blockquote, table, a, img, br, hr, span, div…)
 //
 // Parses via DOMParser (sandboxed — no scripts run) so the output is
 // a DOM tree we can walk + clean safely before serializing back.
 // ============================================================
 const BLOCKED_TAGS = new Set([
  'script', 'style', 'iframe', 'object', 'embed', 'link',
  'meta', 'base', 'form', 'input', 'button', 'select', 'textarea',
 ]);
 function stripNode(node: Element) {
  // Blocked tags — remove entirely.
  if (BLOCKED_TAGS.has(node.tagName.toLowerCase())) {
    node.remove();
    return;
  }
  // Strip dangerous attributes.
  const toRemove: string[] = [];
  for (const attr of Array.from(node.attributes)) {
    const name = attr.name.toLowerCase();
    const val = (attr.value || '').trim().toLowerCase();
    if (name.startsWith('on')) toRemove.push(attr.name);
    else if ((name === 'href' || name === 'src' || name === 'xlink:href') &&
             (val.startsWith('javascript:') || val.startsWith('data:text/html'))) {
      toRemove.push(attr.name);
    }
    else if (val.includes('javascript:')) toRemove.push(attr.name);
  }
  toRemove.forEach((a) => node.removeAttribute(a));
  // Recurse into children.
  for (const child of Array.from(node.children)) stripNode(child);
 }
 export function sanitizeHtml(html: string): string {
  if (!html) return '';
  try {
    const parser = new DOMParser();
    const doc = parser.parseFromString('<!DOCTYPE html><html><body>' + html + '</body></html>', 'text/html');
    for (const child of Array.from(doc.body.children)) stripNode(child);
    return doc.body.innerHTML;
  } catch {
    // Fall back to plain text if parsing fails — safer than returning raw HTML.
    return html.replace(/[<>&"']/g, (c) => ({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;', "'": '&#39;' }[c] || c));
  }
 }
--- a/client/src/lib/transcribe.ts
+++ b/client/src/lib/transcribe.ts
@ -0,0 +1,99 @@
 // ============================================================
 // Transcribe + audio-backup helpers — port of public/js/app.js
 // transcribeAudio() / _serverTranscribe() / saveAudioBackup().
 //
 // Server-first via /api/transcribe (cookie auth — same-origin).
 // On failure, blob is saved to /api/audio-backups so the user can
 // retry from Settings → Audio Backups (or vanilla Audio Backups page).
 // IndexedDB fallback preserved from vanilla audioBackup.js.
 // ============================================================
 export interface TranscribeResult {
  success: boolean;
  text?: string;
  provider?: string;
  duration?: number;
  noProvider?: boolean;
  error?: string;
 }
 let transcribeAvailable: boolean | null = null;
 let transcribeProvider = 'none';
 export async function checkTranscribeStatus(): Promise<void> {
  try {
    const r = await fetch('/api/transcribe/status', { credentials: 'include' });
    const data = await r.json();
    transcribeAvailable = !!data.available;
    transcribeProvider = data.provider || 'none';
  } catch {
    transcribeAvailable = false;
  }
 }
 export function isTranscribeAvailable(): boolean | null { return transcribeAvailable; }
 export function getTranscribeProvider(): string { return transcribeProvider; }
 export async function transcribeAudio(blob: Blob, module = 'encounter'): Promise<TranscribeResult> {
  if (transcribeAvailable === null) await checkTranscribeStatus();
  if (transcribeAvailable === false) {
    return { success: false, noProvider: true, error: 'No transcription API configured — using live transcript' };
  }
  const form = new FormData();
  form.append('audio', blob, 'audio.webm');
  try {
    const r = await fetch('/api/transcribe', { method: 'POST', credentials: 'include', body: form });
    const data: TranscribeResult = await r.json();
    if (!data.success && blob.size > 0) {
      // Best-effort: save the blob so the user can retry later.
      saveAudioBackup(blob, module + '-failed-transcription').catch(() => { /* ignore */ });
    }
    return data;
  } catch (e) {
    saveAudioBackup(blob, module + '-failed-transcription').catch(() => { /* ignore */ });
    return { success: false, error: (e as Error).message };
  }
 }
 // ── Audio backup (server-first, IndexedDB fallback) ──
 export async function saveAudioBackup(blob: Blob, module: string): Promise<number | null> {
  // Server first.
  try {
    const form = new FormData();
    form.append('audio', blob, 'audio.webm');
    form.append('module', module);
    const r = await fetch('/api/audio-backups', { method: 'POST', credentials: 'include', body: form });
    const data = await r.json();
    if (data.success && data.id) return data.id;
  } catch { /* fall through */ }
  // IndexedDB fallback.
  return saveToIndexedDB(blob, module);
 }
 const DB_NAME = 'PedScribeAudioBackup';
 const STORE = 'recordings';
 let _db: IDBDatabase | null = null;
 function openDB(): Promise<IDBDatabase> {
  if (_db) return Promise.resolve(_db);
  return new Promise((resolve, reject) => {
    const req = indexedDB.open(DB_NAME, 1);
    req.onupgradeneeded = (e) => {
      const db = (e.target as IDBOpenDBRequest).result;
      if (!db.objectStoreNames.contains(STORE)) {
        const store = db.createObjectStore(STORE, { keyPath: 'id', autoIncrement: true });
        store.createIndex('timestamp', 'timestamp', { unique: false });
      }
    };
    req.onsuccess = () => { _db = req.result; resolve(_db); };
    req.onerror = () => reject(new Error('IndexedDB open failed'));
  });
 }
 function saveToIndexedDB(blob: Blob, module: string): Promise<number | null> {
  return openDB().then((db) => new Promise<number>((resolve, reject) => {
    const tx = db.transaction(STORE, 'readwrite');
    const store = tx.objectStore(STORE);
    const req = store.add({ blob, module, timestamp: Date.now(), size: blob.size, mimeType: blob.type });
    req.onsuccess = () => resolve(req.result as number);
    req.onerror = () => reject(new Error('Failed to save audio backup'));
  })).catch(() => null);
 }
--- a/client/src/lib/utils.ts
+++ b/client/src/lib/utils.ts
@ -0,0 +1,8 @@
 // shadcn/ui classname-merge helper — combines clsx + tailwind-merge so
 // conditional class merging doesn't clobber earlier class values.
 import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 export function cn(...inputs: ClassValue[]): string {
  return twMerge(clsx(inputs));
 }
--- a/client/src/lib/web-speech.ts
+++ b/client/src/lib/web-speech.ts
@ -0,0 +1,117 @@
 // ============================================================
 // Web Speech API wrapper — verbatim port of
 // public/js/speechRecognition.js. Browser-side live transcription
 // for showing words as the user speaks. Falls back to no-op when
 // the API is unsupported. Privacy warning preserved.
 // ============================================================
 const STORAGE_ENABLED = 'ped_web_speech_enabled';
 interface SpeechRecognitionResult {
  isFinal: boolean;
  [index: number]: { transcript: string };
 }
 interface SpeechRecognitionResults {
  length: number;
  [index: number]: SpeechRecognitionResult;
 }
 interface SpeechRecognitionEvent {
  resultIndex: number;
  results: SpeechRecognitionResults;
 }
 interface SpeechRecognitionErrorEvent { error: string }
 interface SpeechRecognitionLike {
  continuous: boolean;
  interimResults: boolean;
  lang: string;
  maxAlternatives: number;
  onresult: ((e: SpeechRecognitionEvent) => void) | null;
  onerror: ((e: SpeechRecognitionErrorEvent) => void) | null;
  onend: (() => void) | null;
  onstart: (() => void) | null;
  start(): void;
  stop(): void;
 }
 type SRCtor = new () => SpeechRecognitionLike;
 function getCtor(): SRCtor | null {
  if (typeof window === 'undefined') return null;
  const w = window as unknown as { SpeechRecognition?: SRCtor; webkitSpeechRecognition?: SRCtor };
  return (w.SpeechRecognition || w.webkitSpeechRecognition) || null;
 }
 export function isSpeechRecognitionSupported(): boolean {
  return !!getCtor();
 }
 export function isSpeechRecognitionEnabled(): boolean {
  try { return localStorage.getItem(STORAGE_ENABLED) === '1' || localStorage.getItem(STORAGE_ENABLED) === 'true'; }
  catch { return false; }
 }
 export function setSpeechRecognitionEnabled(v: boolean) {
  try { localStorage.setItem(STORAGE_ENABLED, v ? 'true' : 'false'); } catch { /* ignore */ }
 }
 export interface SpeechHandle {
  start: () => void;
  stop: () => void;
 }
 // Creates a continuous-listening session that calls handlers as words
 // come in. Mirrors the liveEncounter.js wiring (final + interim results).
 export function createSpeechSession(handlers: {
  onFinal: (text: string) => void;
  onInterim: (text: string) => void;
  onError?: (err: string) => void;
 }): SpeechHandle | null {
  const Ctor = getCtor();
  if (!Ctor) return null;
  let rec: SpeechRecognitionLike | null = null;
  let active = false;
  function build(): SpeechRecognitionLike {
    const r = new (Ctor as SRCtor)();
    r.continuous = true;
    r.interimResults = true;
    r.lang = 'en-US';
    r.maxAlternatives = 1;
    r.onresult = (e: SpeechRecognitionEvent) => {
      let interim = '';
      for (let i = e.resultIndex; i < e.results.length; i++) {
        const t = e.results[i][0].transcript;
        if (e.results[i].isFinal) handlers.onFinal(t + ' ');
        else interim = t;
      }
      handlers.onInterim(interim);
    };
    r.onerror = (e: SpeechRecognitionErrorEvent) => {
      if (e.error === 'no-speech' || e.error === 'aborted') return;
      handlers.onError?.(e.error);
    };
    r.onend = () => { if (active) try { r.start(); } catch { /* ignore */ } };
    return r;
  }
  return {
    start: () => { active = true; rec = build(); try { rec.start(); } catch { /* ignore */ } },
    stop:  () => { active = false; if (rec) try { rec.stop(); } catch { /* ignore */ } },
  };
 }
 // Verbatim port of deduplicateFinal from public/js/app.js:964-984.
 export function deduplicateFinal(newText: string, existingText: string): string {
  if (!newText || !existingText) return newText;
  const trimmed = newText.trim();
  if (!trimmed) return '';
  if (existingText.trimEnd().endsWith(trimmed)) return '';
  const words = trimmed.split(/\s+/);
  if (words.length >= 3) {
    const tail = existingText.trimEnd().split(/\s+/).slice(-words.length).join(' ');
    if (tail === trimmed) return '';
    const half = Math.ceil(words.length / 2);
    const firstHalf = words.slice(0, half).join(' ');
    if (existingText.trimEnd().endsWith(firstHalf)) {
      return words.slice(half).join(' ') + ' ';
    }
  }
  return newText;
 }
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@ -0,0 +1,10 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.tsx'
 createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
 )
--- a/client/src/pages/Admin.tsx
+++ b/client/src/pages/Admin.tsx
@ -0,0 +1,103 @@
 // ============================================================
 // ADMIN — sub-tab shell for the admin panel. Tabs live in
 // AdminPanels.tsx (batch 1: Users, Settings, Announcement) +
 // AdminPanels2.tsx (batch 2: SMTP, Email, Prompts, Models,
 // TTS, STT, Logs). Role check + query cache shared with Layout.
 // ============================================================
 import { useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 import type { MeOk } from '@/shared/types';
 import { AdminUsersTab, AdminSettingsTab, AdminAnnouncementTab } from './AdminPanels';
 import {
  AdminSmtpTab, AdminEmailTab, AdminPromptsTab,
  AdminModelsTab, AdminTtsTab, AdminSttTab, AdminLogsTab,
 } from './AdminPanels2';
 const card = 'rounded-lg border border-border bg-card p-5 space-y-3';
 type TabId =
  | 'users' | 'settings' | 'announcement'
  | 'models' | 'tts' | 'stt'
  | 'smtp' | 'email' | 'prompts'
  | 'logs';
 const TABS: Array<{ id: TabId; label: string }> = [
  { id: 'users',        label: 'Users' },
  { id: 'settings',     label: 'Site settings' },
  { id: 'announcement', label: 'Announcement' },
  { id: 'models',       label: 'AI models' },
  { id: 'tts',          label: 'TTS provider' },
  { id: 'stt',          label: 'STT provider' },
  { id: 'smtp',         label: 'SMTP' },
  { id: 'email',        label: 'Email templates' },
  { id: 'prompts',      label: 'AI prompts' },
  { id: 'logs',         label: 'Audit logs' },
 ];
 export default function Admin() {
  const { data: me, isLoading } = useQuery<MeOk>({
    queryKey: ['auth-me'],
    queryFn: () => api.get<MeOk>('/api/auth/me'),
    staleTime: 5 * 60_000,
  });
  const [active, setActive] = useState<TabId>('users');
  if (isLoading) {
    return <div className="max-w-3xl mx-auto p-6 text-sm text-muted-foreground">Checking permissions…</div>;
  }
  if (me?.user.role !== 'admin') {
    return (
      <div className="max-w-3xl mx-auto p-6">
        <section className={card} data-testid="admin-access-denied">
          <h1 className="text-xl font-semibold">Admin only</h1>
          <p className="text-sm text-muted-foreground">
            This page is restricted to users with the admin role. If you believe this is a mistake, contact your site administrator.
          </p>
        </section>
      </div>
    );
  }
  return (
    <div className="max-w-6xl mx-auto p-6 space-y-4" data-testid="admin-shell">
      <header>
        <h1 className="text-2xl font-semibold">Admin Panel</h1>
        <p className="text-sm text-muted-foreground">
          Users, site settings, announcement banner, AI model management, TTS/STT provider, SMTP, email templates, and audit logs.
        </p>
      </header>
      <div className="flex flex-wrap gap-2" data-testid="admin-subnav">
        {TABS.map((t) => (
          <button
            key={t.id}
            type="button"
            onClick={() => setActive(t.id)}
            className={
              'px-3 py-1.5 rounded-full text-xs font-medium border transition-colors ' +
              (active === t.id
                ? 'bg-primary text-primary-foreground border-primary'
                : 'bg-muted hover:bg-muted/80 border-border')
            }
            data-testid={'admin-tab-' + t.id}
          >
            {t.label}
          </button>
        ))}
      </div>
      {active === 'users' && <AdminUsersTab />}
      {active === 'settings' && <AdminSettingsTab />}
      {active === 'announcement' && <AdminAnnouncementTab />}
      {active === 'models' && <AdminModelsTab />}
      {active === 'tts' && <AdminTtsTab />}
      {active === 'stt' && <AdminSttTab />}
      {active === 'smtp' && <AdminSmtpTab />}
      {active === 'email' && <AdminEmailTab />}
      {active === 'prompts' && <AdminPromptsTab />}
      {active === 'logs' && <AdminLogsTab />}
    </div>
  );
 }
--- a/client/src/pages/AdminPanels.tsx
+++ b/client/src/pages/AdminPanels.tsx
@ -0,0 +1,337 @@
 // ============================================================
 // ADMIN PANELS — real React components for each admin sub-tab.
 // Batch 1: Users / Settings / Announcement. Remaining tabs
 // (SMTP, Email Templates, AI Prompts, AI Models, TTS/STT, Logs)
 // ship in follow-up commits.
 // ============================================================
 import { useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 import ConfirmModal from '@/components/ConfirmModal';
 import type {
  AdminUser,
  AdminUsersOk,
  AdminSettingsOk,
  AdminAnnouncementOk,
 } from '@/shared/types';
 const card = 'rounded-lg border border-border bg-card p-5 space-y-3';
 const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring';
 const label = 'block text-xs font-medium text-muted-foreground';
 const btnPrimary = 'rounded-md bg-primary text-primary-foreground px-3 py-2 text-sm font-medium disabled:opacity-50';
 const btnGhost = 'rounded-md border border-border bg-background px-3 py-2 text-xs font-medium hover:bg-muted disabled:opacity-50';
 const btnDanger = 'rounded-md bg-destructive text-white px-3 py-2 text-xs font-medium disabled:opacity-50';
 const th = 'text-left px-2 py-1.5 border-b border-border font-semibold uppercase tracking-wide text-[10px] text-muted-foreground';
 const td = 'px-2 py-1.5 border-b border-border align-top text-sm';
 type Msg = { text: string; kind: 'ok' | 'err' | 'info' } | null;
 function StatusLine({ msg }: { msg: Msg }) {
  if (!msg) return null;
  const c = msg.kind === 'ok' ? 'text-green-600' : msg.kind === 'err' ? 'text-destructive' : 'text-muted-foreground';
  return <div className={'text-sm ' + c}>{msg.text}</div>;
 }
 // ── Users ───────────────────────────────────────────────────
 export function AdminUsersTab() {
  const qc = useQueryClient();
  const [msg, setMsg] = useState<Msg>(null);
  const [query, setQuery] = useState('');
  const [deleteTarget, setDeleteTarget] = useState<AdminUser | null>(null);
  const [resetTarget, setResetTarget] = useState<AdminUser | null>(null);
  const [resetPw, setResetPw] = useState('');
  const { data, isLoading, error } = useQuery<AdminUsersOk>({
    queryKey: ['admin-users'],
    queryFn: () => api.get<AdminUsersOk>('/api/admin/users'),
  });
  const verify = useMutation({
    mutationFn: (id: number) => api.post<{ message: string }>(`/api/admin/users/${id}/verify`, {}),
    onSuccess: (d) => { setMsg({ text: d.message, kind: 'ok' }); qc.invalidateQueries({ queryKey: ['admin-users'] }); },
    onError: (e: Error) => setMsg({ text: e.message, kind: 'err' }),
  });
  const disable = useMutation({
    mutationFn: (id: number) => api.post<{ message: string }>(`/api/admin/users/${id}/disable`, {}),
    onSuccess: (d) => { setMsg({ text: d.message, kind: 'info' }); qc.invalidateQueries({ queryKey: ['admin-users'] }); },
    onError: (e: Error) => setMsg({ text: e.message, kind: 'err' }),
  });
  const enable = useMutation({
    mutationFn: (id: number) => api.post<{ message: string }>(`/api/admin/users/${id}/enable`, {}),
    onSuccess: (d) => { setMsg({ text: d.message, kind: 'ok' }); qc.invalidateQueries({ queryKey: ['admin-users'] }); },
    onError: (e: Error) => setMsg({ text: e.message, kind: 'err' }),
  });
  const setRole = useMutation({
    mutationFn: (body: { id: number; role: string }) =>
      api.post<{ message: string }>(`/api/admin/users/${body.id}/role`, { role: body.role }),
    onSuccess: (d) => { setMsg({ text: d.message, kind: 'ok' }); qc.invalidateQueries({ queryKey: ['admin-users'] }); },
    onError: (e: Error) => setMsg({ text: e.message, kind: 'err' }),
  });
  const del = useMutation({
    mutationFn: (id: number) => api.delete<{ message: string }>(`/api/admin/users/${id}`),
    onSuccess: (d) => { setMsg({ text: d.message, kind: 'info' }); qc.invalidateQueries({ queryKey: ['admin-users'] }); },
    onError: (e: Error) => setMsg({ text: e.message, kind: 'err' }),
  });
  const resetPwMutation = useMutation({
    mutationFn: (body: { id: number; newPassword: string }) =>
      api.post<{ message: string }>(`/api/admin/users/${body.id}/reset-password`, { newPassword: body.newPassword }),
    onSuccess: (d) => { setMsg({ text: d.message, kind: 'ok' }); setResetTarget(null); setResetPw(''); },
    onError: (e: Error) => setMsg({ text: e.message, kind: 'err' }),
  });
  const users = (data?.users || []).filter((u) =>
    !query || u.email.toLowerCase().includes(query.toLowerCase()) || u.name.toLowerCase().includes(query.toLowerCase()),
  );
  return (
    <section className={card} data-testid="admin-users-tab">
      <div className="flex items-center justify-between gap-2 flex-wrap">
        <h2 className="text-lg font-semibold">Users</h2>
        <input
          type="search"
          className={input + ' max-w-xs'}
          placeholder="Search by name or email…"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          data-testid="admin-users-search"
        />
      </div>
      {isLoading && <div className="text-sm text-muted-foreground">Loading…</div>}
      {error && <div className="text-sm text-destructive">{(error as Error).message}</div>}
      <div className="overflow-x-auto">
        <table className="w-full text-sm" data-testid="admin-users-table">
          <thead>
            <tr>
              <th className={th}>Email</th>
              <th className={th}>Name</th>
              <th className={th}>Role</th>
              <th className={th}>Verified</th>
              <th className={th}>2FA</th>
              <th className={th}>Status</th>
              <th className={th}>Actions</th>
            </tr>
          </thead>
          <tbody>
            {users.map((u) => (
              <tr key={u.id} data-testid={`admin-user-row-${u.id}`} className={u.disabled ? 'opacity-60' : ''}>
                <td className={td}>{u.email}</td>
                <td className={td}>{u.name}</td>
                <td className={td}>
                  <select
                    className={input + ' text-xs w-28'}
                    value={u.role || 'user'}
                    onChange={(e) => setRole.mutate({ id: u.id, role: e.target.value })}
                    data-testid={`admin-user-role-${u.id}`}
                  >
                    <option value="user">user</option>
                    <option value="moderator">moderator</option>
                    <option value="admin">admin</option>
                  </select>
                </td>
                <td className={td + ' text-xs'}>
                  {u.email_verified ? '✅' : (
                    <button type="button" className={btnGhost} onClick={() => verify.mutate(u.id)} data-testid={`admin-user-verify-${u.id}`}>Verify</button>
                  )}
                </td>
                <td className={td + ' text-xs'}>{u.totp_enabled ? '✅' : '—'}</td>
                <td className={td + ' text-xs'}>
                  {u.disabled ? (
                    <button type="button" className={btnGhost} onClick={() => enable.mutate(u.id)} data-testid={`admin-user-enable-${u.id}`}>Enable</button>
                  ) : (
                    <button type="button" className={btnGhost} onClick={() => disable.mutate(u.id)} data-testid={`admin-user-disable-${u.id}`}>Disable</button>
                  )}
                </td>
                <td className={td + ' text-xs'}>
                  <div className="flex gap-1">
                    <button type="button" className={btnGhost} onClick={() => setResetTarget(u)} data-testid={`admin-user-reset-${u.id}`}>Reset pw</button>
                    <button type="button" className={btnDanger} onClick={() => setDeleteTarget(u)} data-testid={`admin-user-delete-${u.id}`}>Delete</button>
                  </div>
                </td>
              </tr>
            ))}
            {users.length === 0 && data && (
              <tr><td className={td + ' text-muted-foreground italic'} colSpan={7}>No users match "{query}".</td></tr>
            )}
          </tbody>
        </table>
      </div>
      <StatusLine msg={msg} />
      <ConfirmModal
        open={!!deleteTarget}
        title={`Delete ${deleteTarget?.email}?`}
        body="This deletes the user account. Audit log entries are preserved (user_id set to NULL)."
        confirmText="Delete"
        danger
        busy={del.isPending}
        onConfirm={() => { if (deleteTarget) del.mutate(deleteTarget.id); setDeleteTarget(null); }}
        onCancel={() => setDeleteTarget(null)}
      />
      {resetTarget && (
        <div role="dialog" aria-modal="true" className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4" onClick={() => setResetTarget(null)}>
          <div className="w-full max-w-sm rounded-lg border border-border bg-background p-5 shadow-lg space-y-3" onClick={(e) => e.stopPropagation()}>
            <h3 className="text-base font-semibold">Reset password for {resetTarget.email}</h3>
            <input
              type="text"
              className={input}
              placeholder="New password (8+ chars)"
              value={resetPw}
              onChange={(e) => setResetPw(e.target.value)}
              autoFocus
              minLength={8}
              data-testid="admin-user-reset-input"
            />
            <div className="flex justify-end gap-2">
              <button type="button" className={btnGhost} onClick={() => { setResetTarget(null); setResetPw(''); }}>Cancel</button>
              <button
                type="button"
                className={btnPrimary}
                disabled={resetPw.length < 8 || resetPwMutation.isPending}
                onClick={() => resetPwMutation.mutate({ id: resetTarget.id, newPassword: resetPw })}
                data-testid="admin-user-reset-submit"
              >
                {resetPwMutation.isPending ? 'Saving…' : 'Reset'}
              </button>
            </div>
          </div>
        </div>
      )}
    </section>
  );
 }
 // ── Settings (registration + stats) ────────────────────────
 export function AdminSettingsTab() {
  const qc = useQueryClient();
  const [msg, setMsg] = useState<Msg>(null);
  const { data } = useQuery<AdminSettingsOk>({
    queryKey: ['admin-settings'],
    queryFn: () => api.get<AdminSettingsOk>('/api/admin/settings'),
  });
  const toggle = useMutation({
    mutationFn: (enabled: boolean) =>
      api.post<{ message: string; registrationEnabled: boolean }>('/api/admin/settings/registration', { enabled }),
    onSuccess: (d) => { setMsg({ text: d.message, kind: 'ok' }); qc.invalidateQueries({ queryKey: ['admin-settings'] }); },
    onError: (e: Error) => setMsg({ text: e.message, kind: 'err' }),
  });
  return (
    <section className={card} data-testid="admin-settings-tab">
      <h2 className="text-lg font-semibold">Site settings</h2>
      {data && (
        <>
          <div className="grid grid-cols-3 gap-3">
            <div className="rounded-md bg-muted/40 p-3"><div className="text-xs uppercase text-muted-foreground">Total users</div><div className="text-xl font-bold">{data.stats.totalUsers}</div></div>
            <div className="rounded-md bg-muted/40 p-3"><div className="text-xs uppercase text-muted-foreground">API calls (all time)</div><div className="text-xl font-bold">{data.stats.totalApiCalls}</div></div>
            <div className="rounded-md bg-muted/40 p-3"><div className="text-xs uppercase text-muted-foreground">API calls (today)</div><div className="text-xl font-bold">{data.stats.todayApiCalls}</div></div>
          </div>
          <div className="flex items-center gap-3">
            <label className="flex items-center gap-2 cursor-pointer">
              <input
                type="checkbox"
                className="accent-primary size-4"
                checked={data.settings.registrationEnabled}
                onChange={(e) => toggle.mutate(e.target.checked)}
                data-testid="admin-registration-toggle"
              />
              <span className="text-sm font-medium">Allow new user registration</span>
            </label>
          </div>
        </>
      )}
      <StatusLine msg={msg} />
    </section>
  );
 }
 // ── Announcement banner ────────────────────────────────────
 export function AdminAnnouncementTab() {
  const qc = useQueryClient();
  const [msg, setMsg] = useState<Msg>(null);
  const [enabled, setEnabled] = useState(false);
  const [type, setType] = useState<'info' | 'warning' | 'critical'>('info');
  const [text, setText] = useState('');
  const [hydrated, setHydrated] = useState(false);
  const { data } = useQuery<AdminAnnouncementOk>({
    queryKey: ['admin-announcement'],
    queryFn: () => api.get<AdminAnnouncementOk>('/api/admin/config/announcement'),
  });
  // one-time hydrate from server
  if (!hydrated && data) {
    setEnabled(data.enabled);
    setType(((data as unknown as { type?: string }).type as typeof type) || 'info');
    setText((data as unknown as { text?: string }).text || '');
    setHydrated(true);
  }
  const putConfig = useMutation({
    mutationFn: async (body: { key: string; value: string }) =>
      api.put<{ success: true }>(`/api/admin/config/${encodeURIComponent(body.key)}`, { value: body.value }),
  });
  async function save() {
    setMsg(null);
    try {
      await Promise.all([
        putConfig.mutateAsync({ key: 'announcement.enabled', value: enabled ? 'true' : 'false' }),
        putConfig.mutateAsync({ key: 'announcement.type',    value: type }),
        putConfig.mutateAsync({ key: 'announcement.text',    value: text }),
      ]);
      setMsg({ text: 'Announcement saved', kind: 'ok' });
      qc.invalidateQueries({ queryKey: ['admin-announcement'] });
    } catch (e) {
      setMsg({ text: (e as Error).message, kind: 'err' });
    }
  }
  return (
    <section className={card} data-testid="admin-announcement-tab">
      <h2 className="text-lg font-semibold">Announcement banner</h2>
      <p className="text-sm text-muted-foreground">
        Shown at the top of every page when enabled. Use for scheduled maintenance, outage notices, or release notes.
      </p>
      <div className="flex items-center gap-3">
        <label className="flex items-center gap-2 cursor-pointer">
          <input
            type="checkbox"
            className="accent-primary size-4"
            checked={enabled}
            onChange={(e) => setEnabled(e.target.checked)}
            data-testid="admin-announcement-enabled"
          />
          <span className="text-sm">Show banner</span>
        </label>
      </div>
      <div className="grid gap-3 sm:grid-cols-3">
        <div className="sm:col-span-1">
          <label className={label}>Severity</label>
          <select className={input} value={type} onChange={(e) => setType(e.target.value as typeof type)} data-testid="admin-announcement-type">
            <option value="info">Info (blue)</option>
            <option value="warning">Warning (amber)</option>
            <option value="critical">Critical (red)</option>
          </select>
        </div>
        <div className="sm:col-span-2">
          <label className={label}>Message</label>
          <textarea
            rows={3}
            className={input + ' resize-y'}
            value={text}
            onChange={(e) => setText(e.target.value)}
            placeholder="e.g. Scheduled maintenance Thursday 02:00 UTC — expect 10 minutes of downtime."
            data-testid="admin-announcement-text"
          />
        </div>
      </div>
      <button type="button" onClick={save} disabled={putConfig.isPending} className={btnPrimary} data-testid="admin-announcement-save">
        {putConfig.isPending ? 'Saving…' : 'Save announcement'}
      </button>
      <StatusLine msg={msg} />
    </section>
  );
 }
--- a/client/src/pages/AdminPanels2.tsx
+++ b/client/src/pages/AdminPanels2.tsx
@ -0,0 +1,499 @@
 // ============================================================
 // ADMIN PANELS (batch 2) — SMTP, Email Templates, AI Prompts,
 // AI Models, TTS provider, STT provider, Audit Logs.
 // All endpoints live at /api/admin/config/*.
 // ============================================================
 import { useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 import ConfirmModal from '@/components/ConfirmModal';
 import type {
  AdminConfigOk,
  AdminSmtpStatusOk,
  AdminPromptsOk,
  AdminModelsOk,
  AdminLogsOk,
 } from '@/shared/types';
 const card = 'rounded-lg border border-border bg-card p-5 space-y-3';
 const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring';
 const label = 'block text-xs font-medium text-muted-foreground';
 const btnPrimary = 'rounded-md bg-primary text-primary-foreground px-3 py-2 text-sm font-medium disabled:opacity-50';
 const btnGhost = 'rounded-md border border-border bg-background px-3 py-2 text-xs font-medium hover:bg-muted disabled:opacity-50';
 const btnDanger = 'rounded-md bg-destructive text-white px-3 py-2 text-xs font-medium disabled:opacity-50';
 const th = 'text-left px-2 py-1.5 border-b border-border font-semibold uppercase tracking-wide text-[10px] text-muted-foreground';
 const td = 'px-2 py-1.5 border-b border-border align-top text-sm';
 type Msg = { text: string; kind: 'ok' | 'err' | 'info' } | null;
 function StatusLine({ msg }: { msg: Msg }) {
  if (!msg) return null;
  const c = msg.kind === 'ok' ? 'text-green-600' : msg.kind === 'err' ? 'text-destructive' : 'text-muted-foreground';
  return <div className={'text-sm ' + c}>{msg.text}</div>;
 }
 // Shared putConfig — PUT /api/admin/config/:key with {value}.
 function useConfigPut() {
  return useMutation({
    mutationFn: (body: { key: string; value: string }) =>
      api.put<{ success: true }>(`/api/admin/config/${encodeURIComponent(body.key)}`, { value: body.value }),
  });
 }
 // ── SMTP ────────────────────────────────────────────────────
 interface SmtpStatusExt extends AdminSmtpStatusOk { source?: string }
 export function AdminSmtpTab() {
  const qc = useQueryClient();
  const [msg, setMsg] = useState<Msg>(null);
  const [clearConfirm, setClearConfirm] = useState(false);
  const [host, setHost] = useState('');
  const [port, setPort] = useState('587');
  const [user, setUser] = useState('');
  const [pass, setPass] = useState('');
  const [from, setFrom] = useState('');
  const [secure, setSecure] = useState('false');
  const [hydrated, setHydrated] = useState(false);
  const [testTo, setTestTo] = useState('');
  const [testTemplate, setTestTemplate] = useState('verify');
  const { data } = useQuery<SmtpStatusExt>({
    queryKey: ['admin-smtp-status'],
    queryFn: () => api.get<SmtpStatusExt>('/api/admin/config/smtp/status'),
  });
  if (!hydrated && data) {
    setHost(data.host || '');
    setPort(String(data.port ?? '587'));
    setUser(data.user || '');
    setFrom(data.from || '');
    setHydrated(true);
  }
  const save = useMutation({
    mutationFn: (body: { host: string; port: string; user: string; pass: string; from: string; secure: boolean }) =>
      api.put<{ success: true }>('/api/admin/config/smtp', body),
    onSuccess: () => { setMsg({ text: 'SMTP settings saved', kind: 'ok' }); setPass(''); qc.invalidateQueries({ queryKey: ['admin-smtp-status'] }); },
    onError: (e: Error) => setMsg({ text: e.message, kind: 'err' }),
  });
  const clear = useMutation({
    mutationFn: () => api.delete<{ message: string }>('/api/admin/config/smtp'),
    onSuccess: (d) => { setMsg({ text: d.message, kind: 'info' }); qc.invalidateQueries({ queryKey: ['admin-smtp-status'] }); },
    onError: (e: Error) => setMsg({ text: e.message, kind: 'err' }),
  });
  const testEmail = useMutation({
    mutationFn: (body: { to: string; template: string }) =>
      api.post<{ success: true }>('/api/admin/config/test-email', body),
    onSuccess: () => setMsg({ text: `Test email sent to ${testTo}`, kind: 'ok' }),
    onError: (e: Error) => setMsg({ text: e.message, kind: 'err' }),
  });
  return (
    <section className={card} data-testid="admin-smtp-tab">
      <h2 className="text-lg font-semibold">SMTP</h2>
      {data && (
        <div className="text-xs text-muted-foreground">
          Status: {data.configured ? '✅ Configured' : '❌ Not configured'}
          {data.source && <> · source: <strong>{data.source}</strong></>}
        </div>
      )}
      <div className="grid gap-3 sm:grid-cols-2">
        <div><label className={label}>Host</label><input className={input} value={host} onChange={(e) => setHost(e.target.value)} placeholder="smtp.example.com" data-testid="smtp-host" /></div>
        <div><label className={label}>Port</label><input className={input} value={port} onChange={(e) => setPort(e.target.value)} placeholder="587" data-testid="smtp-port" /></div>
        <div><label className={label}>Username</label><input className={input} value={user} onChange={(e) => setUser(e.target.value)} data-testid="smtp-user" /></div>
        <div><label className={label}>Password</label><input type="password" className={input} value={pass} onChange={(e) => setPass(e.target.value)} placeholder="Leave blank to keep existing" data-testid="smtp-pass" /></div>
        <div><label className={label}>From</label><input className={input} value={from} onChange={(e) => setFrom(e.target.value)} placeholder="noreply@example.com" data-testid="smtp-from" /></div>
        <div><label className={label}>Secure (TLS)</label><select className={input} value={secure} onChange={(e) => setSecure(e.target.value)} data-testid="smtp-secure"><option value="false">STARTTLS (587)</option><option value="true">SSL/TLS (465)</option></select></div>
      </div>
      <div className="flex gap-2 flex-wrap">
        <button type="button" className={btnPrimary} disabled={save.isPending || !host}
          onClick={() => save.mutate({ host, port, user, pass, from, secure: secure === 'true' })}
          data-testid="smtp-save">
          {save.isPending ? 'Saving…' : 'Save SMTP settings'}
        </button>
        <button type="button" className={btnDanger} onClick={() => setClearConfirm(true)} data-testid="smtp-clear">Clear DB override</button>
      </div>
      <div className="rounded-md bg-muted/40 p-3 space-y-2">
        <div className="text-sm font-semibold">Send test email</div>
        <div className="flex flex-wrap gap-2 items-end">
          <div className="flex-1 min-w-[200px]"><label className={label}>Recipient</label><input type="email" className={input} value={testTo} onChange={(e) => setTestTo(e.target.value)} placeholder="recipient@example.com" data-testid="smtp-test-to" /></div>
          <div><label className={label}>Template</label><select className={input} value={testTemplate} onChange={(e) => setTestTemplate(e.target.value)} data-testid="smtp-test-template"><option value="verify">verify</option><option value="reset">reset</option><option value="password-changed">password-changed</option></select></div>
          <button type="button" className={btnGhost} disabled={testEmail.isPending || !testTo} onClick={() => testEmail.mutate({ to: testTo, template: testTemplate })} data-testid="smtp-test-send">
            {testEmail.isPending ? 'Sending…' : 'Send test'}
          </button>
        </div>
      </div>
      <StatusLine msg={msg} />
      <ConfirmModal
        open={clearConfirm}
        title="Clear DB SMTP settings?"
        body="Removes smtp.* entries from the DB. Env vars will still apply if they're set (e.g. SMTP_HOST from OpenBao)."
        confirmText="Clear"
        danger
        busy={clear.isPending}
        onConfirm={() => { clear.mutate(); setClearConfirm(false); }}
        onCancel={() => setClearConfirm(false)}
      />
    </section>
  );
 }
 // ── Email templates ────────────────────────────────────────
 const EMAIL_TEMPLATES = ['verify', 'reset', 'password-changed'];
 export function AdminEmailTab() {
  const qc = useQueryClient();
  const [msg, setMsg] = useState<Msg>(null);
  const [template, setTemplate] = useState('verify');
  const [subject, setSubject] = useState('');
  const [body, setBody] = useState('');
  const { data } = useQuery<AdminConfigOk>({
    queryKey: ['admin-config'],
    queryFn: () => api.get<AdminConfigOk>('/api/admin/config'),
  });
  function pick(tpl: string) {
    setTemplate(tpl);
    const map = new Map((data?.config || []).map((c) => [c.key, c.value || '']));
    setSubject(map.get('email.' + tpl + '.subject') || '');
    setBody(map.get('email.' + tpl + '.body') || '');
  }
  // Hydrate when data first arrives.
  if (data && !subject && !body) {
    pick(template);
  }
  const putConfig = useConfigPut();
  async function save() {
    setMsg(null);
    try {
      await Promise.all([
        putConfig.mutateAsync({ key: 'email.' + template + '.subject', value: subject }),
        putConfig.mutateAsync({ key: 'email.' + template + '.body', value: body }),
      ]);
      setMsg({ text: 'Email template saved', kind: 'ok' });
      qc.invalidateQueries({ queryKey: ['admin-config'] });
    } catch (e) {
      setMsg({ text: (e as Error).message, kind: 'err' });
    }
  }
  return (
    <section className={card} data-testid="admin-email-tab">
      <h2 className="text-lg font-semibold">Email templates</h2>
      <div className="max-w-xs">
        <label className={label}>Template</label>
        <select className={input} value={template} onChange={(e) => pick(e.target.value)} data-testid="email-template">
          {EMAIL_TEMPLATES.map((t) => <option key={t} value={t}>{t}</option>)}
        </select>
      </div>
      <div><label className={label}>Subject</label><input className={input} value={subject} onChange={(e) => setSubject(e.target.value)} data-testid="email-subject" /></div>
      <div><label className={label}>Body (HTML)</label><textarea rows={10} className={input + ' resize-y font-mono text-xs'} value={body} onChange={(e) => setBody(e.target.value)} data-testid="email-body" /></div>
      <button type="button" className={btnPrimary} disabled={putConfig.isPending} onClick={save} data-testid="email-save">
        {putConfig.isPending ? 'Saving…' : 'Save template'}
      </button>
      <StatusLine msg={msg} />
    </section>
  );
 }
 // ── AI Prompts ─────────────────────────────────────────────
 export function AdminPromptsTab() {
  const qc = useQueryClient();
  const [msg, setMsg] = useState<Msg>(null);
  const [selected, setSelected] = useState('');
  const [value, setValue] = useState('');
  const [resetConfirm, setResetConfirm] = useState(false);
  const { data } = useQuery<AdminPromptsOk>({
    queryKey: ['admin-prompts'],
    queryFn: () => api.get<AdminPromptsOk>('/api/admin/config/prompts'),
  });
  if (data && !selected && data.prompts.length > 0) {
    setSelected(data.prompts[0].key);
    setValue(data.prompts[0].value);
  }
  function pick(key: string) {
    setSelected(key);
    const p = data?.prompts.find((x) => x.key === key);
    setValue(p?.value || '');
  }
  const putConfig = useConfigPut();
  const resetMutation = useMutation({
    mutationFn: (key: string) =>
      api.post<{ value: string }>(`/api/admin/config/prompts/${encodeURIComponent(key)}/reset`, {}),
    onSuccess: (d) => { setValue(d.value); setMsg({ text: 'Prompt reset to default', kind: 'ok' }); qc.invalidateQueries({ queryKey: ['admin-prompts'] }); },
    onError: (e: Error) => setMsg({ text: e.message, kind: 'err' }),
  });
  async function save() {
    setMsg(null);
    try {
      await putConfig.mutateAsync({ key: 'prompt.' + selected, value });
      setMsg({ text: 'Prompt saved', kind: 'ok' });
      qc.invalidateQueries({ queryKey: ['admin-prompts'] });
    } catch (e) {
      setMsg({ text: (e as Error).message, kind: 'err' });
    }
  }
  return (
    <section className={card} data-testid="admin-prompts-tab">
      <h2 className="text-lg font-semibold">AI Prompts</h2>
      <p className="text-sm text-muted-foreground">
        System prompts injected before each generation. Reset restores the hardcoded default from src/utils/prompts.ts.
      </p>
      <div className="max-w-md">
        <label className={label}>Prompt</label>
        <select className={input} value={selected} onChange={(e) => pick(e.target.value)} data-testid="prompts-select">
          {(data?.prompts || []).map((p) => <option key={p.key} value={p.key}>{p.key}</option>)}
        </select>
      </div>
      <textarea rows={14} className={input + ' resize-y font-mono text-xs'} value={value} onChange={(e) => setValue(e.target.value)} data-testid="prompts-text" />
      <div className="flex gap-2">
        <button type="button" className={btnPrimary} disabled={putConfig.isPending || !selected} onClick={save} data-testid="prompts-save">
          {putConfig.isPending ? 'Saving…' : 'Save prompt'}
        </button>
        <button type="button" className={btnGhost} disabled={!selected} onClick={() => setResetConfirm(true)} data-testid="prompts-reset">
          Reset to default
        </button>
      </div>
      <StatusLine msg={msg} />
      <ConfirmModal
        open={resetConfirm}
        title={`Reset "${selected}"?`}
        body="Restores the hardcoded default. Cannot be undone."
        confirmText="Reset"
        danger
        busy={resetMutation.isPending}
        onConfirm={() => { resetMutation.mutate(selected); setResetConfirm(false); }}
        onCancel={() => setResetConfirm(false)}
      />
    </section>
  );
 }
 // ── AI Models ──────────────────────────────────────────────
 interface AdminModelsExtra extends AdminModelsOk { litellmHint?: boolean; custom?: Array<{ id: string; label?: string }> }
 export function AdminModelsTab() {
  const qc = useQueryClient();
  const [msg, setMsg] = useState<Msg>(null);
  const { data } = useQuery<AdminModelsExtra>({
    queryKey: ['admin-models'],
    queryFn: () => api.get<AdminModelsExtra>('/api/admin/config/models'),
  });
  const toggle = useMutation({
    mutationFn: (body: { id: string; enabled: boolean }) =>
      api.put<{ success: true }>('/api/admin/config/models/toggle', body),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['admin-models'] }),
    onError: (e: Error) => setMsg({ text: e.message, kind: 'err' }),
  });
  const setDefault = useMutation({
    mutationFn: (modelId: string) =>
      api.put<{ success: true }>('/api/admin/config/models/default', { modelId }),
    onSuccess: (_, id) => { setMsg({ text: `Default model set to ${id}`, kind: 'ok' }); qc.invalidateQueries({ queryKey: ['admin-models'] }); },
    onError: (e: Error) => setMsg({ text: e.message, kind: 'err' }),
  });
  return (
    <section className={card} data-testid="admin-models-tab">
      <h2 className="text-lg font-semibold">AI Models</h2>
      <div className="text-xs text-muted-foreground">
        Active provider: <strong>{data?.provider || '—'}</strong>
        {data?.defaultModel && <> · Default: <strong>{data.defaultModel}</strong></>}
      </div>
      {data?.litellmHint && (
        <div className="rounded-md bg-amber-50 dark:bg-amber-950/30 p-3 text-xs text-amber-900 dark:text-amber-100">
          LiteLLM provider has no built-in model list — use the legacy "Discover" flow to populate.
        </div>
      )}
      <div className="overflow-x-auto">
        <table className="w-full text-sm" data-testid="admin-models-table">
          <thead>
            <tr>
              <th className={th}>Enabled</th>
              <th className={th}>Default</th>
              <th className={th}>Model ID</th>
              <th className={th}>Label</th>
            </tr>
          </thead>
          <tbody>
            {(data?.models || []).map((m) => (
              <tr key={m.id} data-testid={`admin-model-row-${m.id}`}>
                <td className={td}>
                  <input type="checkbox" className="accent-primary size-4" checked={m.enabled} onChange={(e) => toggle.mutate({ id: m.id, enabled: e.target.checked })} />
                </td>
                <td className={td}>
                  <input type="radio" name="default-model" checked={data?.defaultModel === m.id} onChange={() => setDefault.mutate(m.id)} disabled={!m.enabled} />
                </td>
                <td className={td + ' font-mono text-xs'}>{m.id}</td>
                <td className={td}>{m.label || '—'}</td>
              </tr>
            ))}
            {(data?.models || []).length === 0 && <tr><td className={td + ' italic text-muted-foreground'} colSpan={4}>No models available.</td></tr>}
          </tbody>
        </table>
      </div>
      <div className="text-xs text-muted-foreground italic">
        Model discovery (search + add-custom) still lives in the legacy viewer — ports when the provider integration is revamped.
      </div>
      <StatusLine msg={msg} />
    </section>
  );
 }
 // ── TTS / STT Provider ─────────────────────────────────────
 interface VoiceProviderResp {
  provider: string;
  defaultVoice?: string | null;
  defaultModel?: string | null;
  voices?: Array<{ value: string; label?: string }>;
  models?: Array<{ value: string; label?: string }>;
  configured?: boolean;
 }
 function useVoiceProvider(path: '/api/admin/config/tts' | '/api/admin/config/stt') {
  return useQuery<VoiceProviderResp>({
    queryKey: ['voice-provider', path],
    queryFn: () => api.get<VoiceProviderResp>(path),
  });
 }
 export function AdminTtsTab() {
  const qc = useQueryClient();
  const [msg, setMsg] = useState<Msg>(null);
  const { data } = useVoiceProvider('/api/admin/config/tts');
  const putConfig = useConfigPut();
  const [voice, setVoice] = useState('');
  if (data && voice === '' && data.defaultVoice) setVoice(data.defaultVoice);
  async function save() {
    setMsg(null);
    try {
      await putConfig.mutateAsync({ key: 'tts.default_voice', value: voice });
      setMsg({ text: 'Default TTS voice saved', kind: 'ok' });
      qc.invalidateQueries({ queryKey: ['voice-provider', '/api/admin/config/tts'] });
    } catch (e) {
      setMsg({ text: (e as Error).message, kind: 'err' });
    }
  }
  return (
    <section className={card} data-testid="admin-tts-tab">
      <h2 className="text-lg font-semibold">TTS Provider</h2>
      <div className="text-xs text-muted-foreground">
        Active provider: <strong>{data?.provider || '—'}</strong>
      </div>
      <div className="max-w-md">
        <label className={label}>Default voice</label>
        <select className={input} value={voice} onChange={(e) => setVoice(e.target.value)} data-testid="admin-tts-voice">
          <option value="">(none)</option>
          {(data?.voices || []).map((v) => <option key={v.value} value={v.value}>{v.label || v.value}</option>)}
        </select>
      </div>
      <button type="button" className={btnPrimary} disabled={putConfig.isPending} onClick={save} data-testid="admin-tts-save">
        {putConfig.isPending ? 'Saving…' : 'Save default voice'}
      </button>
      <StatusLine msg={msg} />
    </section>
  );
 }
 export function AdminSttTab() {
  const qc = useQueryClient();
  const [msg, setMsg] = useState<Msg>(null);
  const { data } = useVoiceProvider('/api/admin/config/stt');
  const putConfig = useConfigPut();
  const [model, setModel] = useState('');
  if (data && model === '' && data.defaultModel) setModel(data.defaultModel);
  async function save() {
    setMsg(null);
    try {
      await putConfig.mutateAsync({ key: 'stt.default_model', value: model });
      setMsg({ text: 'Default STT model saved', kind: 'ok' });
      qc.invalidateQueries({ queryKey: ['voice-provider', '/api/admin/config/stt'] });
    } catch (e) {
      setMsg({ text: (e as Error).message, kind: 'err' });
    }
  }
  return (
    <section className={card} data-testid="admin-stt-tab">
      <h2 className="text-lg font-semibold">STT Provider</h2>
      <div className="text-xs text-muted-foreground">
        Active provider: <strong>{data?.provider || '—'}</strong>
      </div>
      <div className="max-w-md">
        <label className={label}>Default STT model</label>
        <select className={input} value={model} onChange={(e) => setModel(e.target.value)} data-testid="admin-stt-model">
          <option value="">(none)</option>
          {(data?.models || []).map((m) => <option key={m.value} value={m.value}>{m.label || m.value}</option>)}
        </select>
      </div>
      <button type="button" className={btnPrimary} disabled={putConfig.isPending} onClick={save} data-testid="admin-stt-save">
        {putConfig.isPending ? 'Saving…' : 'Save default model'}
      </button>
      <StatusLine msg={msg} />
    </section>
  );
 }
 // ── Audit logs ─────────────────────────────────────────────
 const LOG_CATEGORIES = ['', 'auth', 'admin', 'clinical', 'export', 'integration', 'documents'];
 export function AdminLogsTab() {
  const [category, setCategory] = useState('');
  const [limit, setLimit] = useState(100);
  const { data, isLoading, error, refetch } = useQuery<AdminLogsOk>({
    queryKey: ['admin-logs', category, limit],
    queryFn: () => api.get<AdminLogsOk>(
      `/api/admin/logs/all?limit=${limit}${category ? '&category=' + encodeURIComponent(category) : ''}`,
    ),
  });
  return (
    <section className={card} data-testid="admin-logs-tab">
      <div className="flex items-center justify-between gap-2 flex-wrap">
        <h2 className="text-lg font-semibold">Audit Logs</h2>
        <div className="flex gap-2 items-center">
          <label className={label}>Category</label>
          <select className={input + ' w-36 text-xs'} value={category} onChange={(e) => setCategory(e.target.value)} data-testid="admin-logs-category">
            {LOG_CATEGORIES.map((c) => <option key={c} value={c}>{c || '(all)'}</option>)}
          </select>
          <label className={label}>Limit</label>
          <select className={input + ' w-24 text-xs'} value={limit} onChange={(e) => setLimit(Number(e.target.value))} data-testid="admin-logs-limit">
            {[50, 100, 200, 500].map((n) => <option key={n} value={n}>{n}</option>)}
          </select>
          <button type="button" className={btnGhost} onClick={() => refetch()}>Refresh</button>
        </div>
      </div>
      {isLoading && <div className="text-sm text-muted-foreground">Loading…</div>}
      {error && <div className="text-sm text-destructive">{(error as Error).message}</div>}
      <div className="overflow-x-auto max-h-[70vh] overflow-y-auto">
        <table className="w-full text-sm" data-testid="admin-logs-table">
          <thead className="sticky top-0 bg-card">
            <tr>
              <th className={th}>Time</th>
              <th className={th}>User</th>
              <th className={th}>Category</th>
              <th className={th}>Action</th>
              <th className={th}>Detail</th>
              <th className={th}>IP</th>
            </tr>
          </thead>
          <tbody>
            {(data?.logs || []).map((l) => (
              <tr key={l.id}>
                <td className={td + ' text-xs whitespace-nowrap'}>{new Date(l.timestamp).toLocaleString()}</td>
                <td className={td + ' text-xs'}>{l.user_email || '—'}{l.user_name ? ` (${l.user_name})` : ''}</td>
                <td className={td + ' text-xs'}>{l.category}</td>
                <td className={td + ' text-xs font-mono'}>{l.action}</td>
                <td className={td + ' text-xs'}>{l.detail}</td>
                <td className={td + ' text-xs text-muted-foreground'}>{l.ip_address || ''}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
 }
--- a/client/src/pages/Auth.tsx
+++ b/client/src/pages/Auth.tsx
@ -0,0 +1,310 @@
 // ============================================================
 // AUTH SCREEN — login / register / forgot-password. Mirrors the
 // vanilla auth screen feature-for-feature: Turnstile, optional
 // 2FA TOTP field (reveals on requires2FA response), SSO button
 // (when OIDC enabled), resend-verification link, HIPAA notice,
 // APK download link.
 // ============================================================
 import { useState } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { api, ApiError } from '@/lib/api';
 import Turnstile from '@/components/Turnstile';
 import type { PublicConfigOk } from '@/shared/types';
 type Mode = 'login' | 'register' | 'forgot';
 const card = 'rounded-2xl border border-border bg-card p-6 shadow-lg space-y-4 w-full max-w-md';
 const btnPrimary = 'w-full rounded-md bg-primary text-primary-foreground px-4 py-3 text-sm font-semibold disabled:opacity-60';
 const btnSso = 'w-full rounded-md bg-slate-900 text-white px-4 py-3 text-sm font-semibold disabled:opacity-60 hover:bg-slate-800';
 const input = 'w-full rounded-md border border-input bg-background px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-ring';
 const label = 'block text-xs font-semibold text-muted-foreground mb-1';
 const linkBtn = 'text-sm text-primary hover:underline';
 const msgOk = 'rounded-md bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-900 p-3 text-sm text-green-800 dark:text-green-100';
 const msgErr = 'rounded-md bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900 p-3 text-sm text-red-800 dark:text-red-100';
 const msgInfo = 'rounded-md bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-900 p-3 text-sm text-amber-900 dark:text-amber-100';
 function useRedirectAfterLogin() {
  const nav = useNavigate();
  const loc = useLocation();
  return () => {
    const next = new URLSearchParams(loc.search).get('next') || '/';
    nav(next, { replace: true });
  };
 }
 export default function Auth() {
  const [mode, setMode] = useState<Mode>('login');
  const [err, setErr] = useState('');
  const [ok, setOk] = useState('');
  const [info, setInfo] = useState('');
  const qc = useQueryClient();
  const redirect = useRedirectAfterLogin();
  const { data: cfg } = useQuery<PublicConfigOk>({
    queryKey: ['public-config'],
    queryFn: () => api.get<PublicConfigOk>('/api/auth/public-config'),
    staleTime: 60_000,
  });
  // If local auth is disabled (SSO-only), hide login/register and force SSO.
  const localDisabled = !!cfg?.disableLocalAuth;
  function switchMode(next: Mode) {
    setMode(next); setErr(''); setOk(''); setInfo('');
  }
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 dark:from-slate-900 dark:via-slate-950 dark:to-slate-900 flex items-center justify-center p-4">
      <div className={card}>
        <header className="text-center space-y-1">
          <div className="text-4xl">🩺</div>
          <h1 className="text-xl font-bold">Pediatric AI Scribe</h1>
          <p className="text-xs text-muted-foreground">AI-Powered Clinical Documentation</p>
        </header>
        {err && <div className={msgErr}>{err}</div>}
        {info && <div className={msgInfo}>{info}</div>}
        {ok && <div className={msgOk}>{ok}</div>}
        {mode === 'login' && !localDisabled && (
          <LoginForm
            cfg={cfg}
            onErr={setErr} onInfo={setInfo} onOk={setOk}
            onLogin={() => { qc.invalidateQueries({ queryKey: ['auth-me'] }); redirect(); }}
            switchMode={switchMode}
          />
        )}
        {mode === 'register' && !localDisabled && (cfg?.registrationEnabled ?? true) && (
          <RegisterForm cfg={cfg} onErr={setErr} onOk={setOk} switchMode={switchMode} />
        )}
        {mode === 'forgot' && !localDisabled && (
          <ForgotForm cfg={cfg} onErr={setErr} onOk={setOk} switchMode={switchMode} />
        )}
        {/* SSO — always visible when OIDC enabled, even in login-only mode. */}
        {cfg?.oidcEnabled && (
          <>
            {!localDisabled && <div className="relative my-4"><div className="absolute inset-0 flex items-center"><span className="w-full border-t border-border" /></div><div className="relative flex justify-center text-xs text-muted-foreground"><span className="bg-card px-3">or</span></div></div>}
            <a href="/api/auth/oidc" className={btnSso + ' text-center block no-underline'} data-testid="auth-oidc">
              🛡️ {cfg.ssoButtonLabel || 'Sign in with SSO'}
            </a>
          </>
        )}
        {localDisabled && !cfg?.oidcEnabled && (
          <div className={msgInfo}>Single sign-on not configured. Contact your administrator.</div>
        )}
        <div className="pt-4 border-t border-border text-xs text-muted-foreground space-y-2">
          <div className="flex gap-2 items-start">
            <span>⚠️</span>
            <p>HIPAA-compliant AI providers available with BAA. Check your institution's guidelines. Not intended for clinical use without proper authorization.</p>
          </div>
          <div className="text-center">
            <a href="https://github.com/ifedan-ed/pediatric-ai-scribe-v3/releases/latest"
               target="_blank" rel="noopener noreferrer" className="text-primary hover:underline">
              📱 Download Android app (APK)
            </a>
          </div>
        </div>
      </div>
    </div>
  );
 }
 // ── Login ──────────────────────────────────────────────────
 function LoginForm({
  cfg, onErr, onInfo, onOk, onLogin, switchMode,
 }: {
  cfg: PublicConfigOk | undefined;
  onErr: (s: string) => void;
  onInfo: (s: string) => void;
  onOk: (s: string) => void;
  onLogin: () => void;
  switchMode: (m: Mode) => void;
 }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [totp, setTotp] = useState('');
  const [needs2fa, setNeeds2fa] = useState(false);
  const [needsVerify, setNeedsVerify] = useState(false);
  const [turnstileToken, setTurnstileToken] = useState('');
  const [busy, setBusy] = useState(false);
  const [resending, setResending] = useState(false);
  async function submit(e: React.FormEvent) {
    e.preventDefault();
    onErr(''); onInfo(''); onOk('');
    if (!email || !password) { onErr('Enter email and password'); return; }
    if (cfg?.turnstileSiteKey && !turnstileToken) { onErr('Please complete the verification'); return; }
    setBusy(true);
    try {
      const body: Record<string, string> = { email, password };
      if (turnstileToken) body.turnstileToken = turnstileToken;
      if (totp) body.totpCode = totp;
      const resp = await api.post<{ token?: string; requires2FA?: boolean; needsVerification?: boolean; message?: string }>(
        '/api/auth/login', body,
      );
      if (resp.requires2FA) {
        setNeeds2fa(true);
        onInfo('Enter your 2FA code');
        setBusy(false);
        return;
      }
      if (resp.needsVerification) {
        setNeedsVerify(true);
        onErr('Verify your email first. Check your inbox.');
        setBusy(false);
        return;
      }
      if (resp.token) {
        onOk('Signed in');
        onLogin();
        return;
      }
      onErr('Login failed');
    } catch (e) {
      onErr((e as ApiError).message || 'Login failed');
    } finally {
      setBusy(false);
    }
  }
  async function resend() {
    if (!email) { onErr('Enter your email first'); return; }
    setResending(true);
    try {
      const r = await api.post<{ message?: string }>('/api/auth/resend-verification', { email });
      onOk(r.message || 'Verification email sent');
    } catch (e) {
      onErr((e as ApiError).message || 'Failed to resend');
    } finally { setResending(false); }
  }
  return (
    <form onSubmit={submit} className="space-y-3" data-testid="auth-login-form">
      <h2 className="text-lg font-semibold text-center">Sign in</h2>
      <div><label className={label}>Email</label><input type="email" autoFocus required className={input} value={email} onChange={(e) => setEmail(e.target.value)} data-testid="auth-email" /></div>
      <div><label className={label}>Password</label><input type="password" required className={input} value={password} onChange={(e) => setPassword(e.target.value)} data-testid="auth-password" /></div>
      {needs2fa && (
        <div><label className={label}>2FA code</label><input type="text" inputMode="numeric" pattern="[0-9]*" maxLength={6} className={input + ' font-mono tracking-widest'} value={totp} onChange={(e) => setTotp(e.target.value.replace(/\D/g, ''))} data-testid="auth-totp" autoFocus /></div>
      )}
      <Turnstile siteKey={cfg?.turnstileSiteKey} onToken={setTurnstileToken} />
      <button type="submit" className={btnPrimary} disabled={busy} data-testid="auth-submit">
        {busy ? 'Signing in…' : needs2fa ? 'Verify 2FA' : 'Sign in'}
      </button>
      {needsVerify && (
        <div className="text-center">
          <button type="button" onClick={resend} className={linkBtn} disabled={resending} data-testid="auth-resend-verify">
            {resending ? 'Sending…' : 'Resend verification link'}
          </button>
        </div>
      )}
      <div className="flex justify-between text-sm">
        {(cfg?.registrationEnabled ?? true) && (
          <button type="button" onClick={() => switchMode('register')} className={linkBtn} data-testid="auth-show-register">Create account</button>
        )}
        <button type="button" onClick={() => switchMode('forgot')} className={linkBtn + ' ml-auto'} data-testid="auth-show-forgot">Forgot password?</button>
      </div>
    </form>
  );
 }
 // ── Register ───────────────────────────────────────────────
 function RegisterForm({ cfg, onErr, onOk, switchMode }: {
  cfg: PublicConfigOk | undefined;
  onErr: (s: string) => void;
  onOk: (s: string) => void;
  switchMode: (m: Mode) => void;
 }) {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [turnstileToken, setTurnstileToken] = useState('');
  const [busy, setBusy] = useState(false);
  async function submit(e: React.FormEvent) {
    e.preventDefault();
    onErr(''); onOk('');
    if (!name || !email || password.length < 8) { onErr('Fill all fields (password 8+ chars)'); return; }
    if (cfg?.turnstileSiteKey && !turnstileToken) { onErr('Please complete the verification'); return; }
    setBusy(true);
    try {
      const body: Record<string, string> = { name, email, password };
      if (turnstileToken) body.turnstileToken = turnstileToken;
      const r = await api.post<{ message?: string; needsVerification?: boolean; token?: string }>('/api/auth/register', body);
      if (r.needsVerification) {
        onOk('Account created. Check your email to verify.');
      } else if (r.token) {
        onOk('Account created. Signing you in…');
        setTimeout(() => { window.location.href = '/'; }, 800);
      } else {
        onOk(r.message || 'Account created');
      }
      switchMode('login');
    } catch (e) {
      onErr((e as ApiError).message || 'Registration failed');
    } finally { setBusy(false); }
  }
  return (
    <form onSubmit={submit} className="space-y-3" data-testid="auth-register-form">
      <h2 className="text-lg font-semibold text-center">Create account</h2>
      <div><label className={label}>Full name</label><input type="text" required autoFocus className={input} value={name} onChange={(e) => setName(e.target.value)} data-testid="auth-reg-name" /></div>
      <div><label className={label}>Email</label><input type="email" required className={input} value={email} onChange={(e) => setEmail(e.target.value)} data-testid="auth-reg-email" /></div>
      <div><label className={label}>Password (8+ characters)</label><input type="password" required minLength={8} className={input} value={password} onChange={(e) => setPassword(e.target.value)} data-testid="auth-reg-password" /></div>
      <Turnstile siteKey={cfg?.turnstileSiteKey} onToken={setTurnstileToken} />
      <button type="submit" className={btnPrimary} disabled={busy} data-testid="auth-reg-submit">
        {busy ? 'Creating…' : 'Create account'}
      </button>
      <div className="text-center">
        <button type="button" onClick={() => switchMode('login')} className={linkBtn}>Back to sign in</button>
      </div>
    </form>
  );
 }
 // ── Forgot ─────────────────────────────────────────────────
 function ForgotForm({ cfg, onErr, onOk, switchMode }: {
  cfg: PublicConfigOk | undefined;
  onErr: (s: string) => void;
  onOk: (s: string) => void;
  switchMode: (m: Mode) => void;
 }) {
  const [email, setEmail] = useState('');
  const [turnstileToken, setTurnstileToken] = useState('');
  const [busy, setBusy] = useState(false);
  async function submit(e: React.FormEvent) {
    e.preventDefault();
    onErr(''); onOk('');
    if (!email) { onErr('Enter your email'); return; }
    if (cfg?.turnstileSiteKey && !turnstileToken) { onErr('Please complete the verification'); return; }
    setBusy(true);
    try {
      const body: Record<string, string> = { email };
      if (turnstileToken) body.turnstileToken = turnstileToken;
      const r = await api.post<{ message?: string }>('/api/auth/forgot-password', body);
      onOk(r.message || 'If an account exists, a reset link was sent.');
    } catch (e) {
      onErr((e as ApiError).message || 'Request failed');
    } finally { setBusy(false); }
  }
  return (
    <form onSubmit={submit} className="space-y-3" data-testid="auth-forgot-form">
      <h2 className="text-lg font-semibold text-center">Reset password</h2>
      <p className="text-xs text-muted-foreground text-center">Enter your email and we'll send a reset link.</p>
      <div><label className={label}>Email</label><input type="email" required autoFocus className={input} value={email} onChange={(e) => setEmail(e.target.value)} data-testid="auth-forgot-email" /></div>
      <Turnstile siteKey={cfg?.turnstileSiteKey} onToken={setTurnstileToken} />
      <button type="submit" className={btnPrimary} disabled={busy} data-testid="auth-forgot-submit">
        {busy ? 'Sending…' : 'Send reset link'}
      </button>
      <div className="text-center">
        <button type="button" onClick={() => switchMode('login')} className={linkBtn}>Back to sign in</button>
      </div>
    </form>
  );
 }
--- a/client/src/pages/Bedside.tsx
+++ b/client/src/pages/Bedside.tsx
@ -0,0 +1,204 @@
 // ============================================================
 // BEDSIDE — emergency + rapid-reference pediatric tools.
 // Top-level age-to-weight estimation is React + pure shared TS.
 // Individual dosing modules port one at a time after parity tests.
 //
 // The 15 clinical sub-modules (neonatal, airway, cardiac, respiratory,
 // ventilation, seizures, sepsis, anaphylaxis, sedation, agitation,
 // antiemetics, antimicrobials, burns, toxicology, trauma) stay in the
 // vanilla viewer for now. Each one carries weight-based dosing +
 // clinical decision content the migration checkpoint explicitly
 // flagged as must-not-be-"simplified" by an LLM — they belong in
 // dedicated per-module commits alongside the calculators port (Rosner
 // BP splines, Fenton LMS, AAP 2022 bilirubin, APLS weights) where
 // test vectors can verify byte-for-byte parity.
 //
 // ============================================================
 import { useState } from 'react';
 import {
  estimateWeightFromAgeMonths,
  formatAgeMonths,
  parseAgeMonths,
 } from '@shared/clinical/calculators';
 import { renderBedsideRealPanel, REAL_BEDSIDE_PANELS } from './BedsidePanels';
 const card = 'rounded-lg border border-border bg-card p-5 space-y-3';
 const btnPrimary = 'rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium';
 const btnGhost = 'rounded-md border border-border bg-background px-4 py-2 text-sm font-medium hover:bg-muted';
 const label = 'block text-xs font-medium text-muted-foreground';
 const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring';
 interface Pill {
  id: string;
  label: string;
  icon?: string; // emoji stand-in; font-awesome lives in the legacy shell
  summary: string;
 }
 // Order and labels match public/components/bedside.html exactly.
 const PILLS: Pill[] = [
  { id: 'neonatal',       label: 'Neonatal',        icon: '👶', summary: 'GA classification, AGA/SGA/LGA, prematurity category (Fenton 2013 / WHO).' },
  { id: 'airway',         label: 'Airway / RSI',    icon: '💨', summary: 'ETT size + depth, RSI induction + paralytic dosing by weight.' },
  { id: 'cardiac',        label: 'Cardiac Arrest',  icon: '❤️',  summary: 'PALS dosing (epinephrine, amiodarone, lidocaine), defibrillation J/kg.' },
  { id: 'respiratory',    label: 'Respiratory',     icon: '🫁', summary: 'Asthma, bronchiolitis, croup severity + dosing.' },
  { id: 'ventilation',    label: 'O₂ & Ventilation', icon: '🌀', summary: 'NC / HFNC / CPAP / BiPAP flow + FiO₂ targets by age.' },
  { id: 'seizure',        label: 'Seizures',        icon: '🧠', summary: 'Benzodiazepine + second/third-line weight-based dosing.' },
  { id: 'sepsis',         label: 'Sepsis & Fever',  icon: '🦠', summary: 'Empirical antibiotics + fluid bolus dosing by weight.' },
  { id: 'anaphylaxis',    label: 'Anaphylaxis',     icon: '💉', summary: 'Epinephrine IM, IV infusion, steroid + antihistamine dosing.' },
  { id: 'sedation',       label: 'Sedation',        icon: '🛌', summary: 'Procedural sedation regimens — ketamine, propofol, midazolam.' },
  { id: 'agitation',      label: 'Agitation',       icon: '😤', summary: 'Weight-based haloperidol, olanzapine, lorazepam.' },
  { id: 'antiemetics',    label: 'Antiemetics',     icon: '💊', summary: 'Ondansetron, metoclopramide, promethazine dosing.' },
  { id: 'antimicrobials', label: 'Antimicrobials',  icon: '🧫', summary: 'Common empirical regimens keyed to syndrome + weight.' },
  { id: 'burns',          label: 'Burns',           icon: '🔥', summary: 'TBSA % (Lund-Browder, Rule of Nines-children), Parkland fluids.' },
  { id: 'toxicology',     label: 'Toxicology',      icon: '☠️',  summary: 'Common toxidromes + antidotes + decontamination windows.' },
  { id: 'trauma',         label: 'Trauma',          icon: '🩹', summary: 'PECARN, c-spine, blood-product dosing, TXA.' },
 ];
 function BedsideWeightEstimator() {
  const [age, setAge] = useState('');
  const [formula, setFormula] = useState<'apls' | 'bestguess'>('apls');
  const [manualWeight, setManualWeight] = useState('');
  const months = parseAgeMonths(age);
  const estimate = months == null ? null : estimateWeightFromAgeMonths(months);
  const pickedWeight = estimate
    ? formula === 'bestguess'
      ? estimate.all.bestGuess
      : estimate.all.apls
    : null;
  const displayedWeight = manualWeight.trim() || (pickedWeight == null ? '' : String(pickedWeight));
  function clear() {
    setAge('');
    setFormula('apls');
    setManualWeight('');
  }
  return (
    <section className={card} data-testid="bedside-weight-estimator">
      <div>
        <h2 className="text-lg font-semibold">Age → Weight Estimator</h2>
        <p className="text-sm text-muted-foreground">
          Shared starting point for Bedside dosing. Uses the same APLS and Best Guess formulas as the legacy app.
        </p>
      </div>
      <div className="grid gap-3 md:grid-cols-[1.2fr_1fr_1fr_auto] md:items-end">
        <div className="space-y-1">
          <label htmlFor="bedside-react-age" className={label}>Age</label>
          <input
            id="bedside-react-age"
            value={age}
            onChange={(event) => setAge(event.target.value)}
            placeholder='e.g. "18m", "3y", "2y5m"'
            className={input}
            data-testid="bedside-age-input"
          />
        </div>
        <div className="space-y-1">
          <label htmlFor="bedside-react-formula" className={label}>Formula</label>
          <select
            id="bedside-react-formula"
            value={formula}
            onChange={(event) => {
              setFormula(event.target.value as 'apls' | 'bestguess');
              setManualWeight('');
            }}
            className={input}
            data-testid="bedside-formula-select"
          >
            <option value="apls">APLS</option>
            <option value="bestguess">Best Guess</option>
          </select>
        </div>
        <div className="space-y-1">
          <label htmlFor="bedside-react-weight" className={label}>Weight (kg)</label>
          <input
            id="bedside-react-weight"
            type="number"
            min="0.3"
            step="0.1"
            value={displayedWeight}
            onChange={(event) => setManualWeight(event.target.value)}
            className={input}
            data-testid="bedside-weight-input"
          />
        </div>
        <button type="button" onClick={clear} className={btnGhost}>Clear</button>
      </div>
      {age.trim() && months == null ? (
        <div className="rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:bg-red-950/30 dark:text-red-200">
          Could not parse age. Try "3y", "18 months", or "15 days".
        </div>
      ) : null}
      {estimate && pickedWeight != null ? (
        <div className="rounded-lg border border-border bg-muted/40 p-4 text-sm" data-testid="bedside-estimate-result">
          <div className="font-semibold">{pickedWeight} kg estimated from {formatAgeMonths(months ?? 0)}</div>
          <div className="text-muted-foreground">
            APLS: {estimate.all.apls} kg · Best Guess: {estimate.all.bestGuess} kg. You can override the weight field.
          </div>
        </div>
      ) : null}
    </section>
  );
 }
 function LegacyPanel({ pill }: { pill: Pill }) {
  return (
    <section className={card} data-testid={'bedside-panel-' + pill.id}>
      <div className="flex items-center gap-3">
        <span className="text-2xl" aria-hidden>{pill.icon}</span>
        <h2 className="text-lg font-semibold">{pill.label}</h2>
      </div>
      <p className="text-sm text-muted-foreground">{pill.summary}</p>
      <div className="rounded-md border border-amber-300 bg-amber-50 dark:bg-amber-950/30 p-3 text-sm space-y-2">
        <p className="text-amber-900 dark:text-amber-100">
          Weight-based calculators for this module run in the legacy viewer while the clinical data is
          verified for a direct React port. Open the legacy Bedside tab to use the full dosing flow.
        </p>
      </div>
      <a href="/#bedside" className={btnPrimary + ' inline-block'}>
        Open in legacy viewer
      </a>
    </section>
  );
 }
 export default function Bedside() {
  const [active, setActive] = useState<string>(PILLS[0].id);
  const pill = PILLS.find((p) => p.id === active) ?? PILLS[0];
  return (
    <div className="max-w-5xl mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">Bedside</h1>
        <p className="text-sm text-muted-foreground">
          Emergency and rapid-reference pediatric tools. Weight-based dosing throughout — always verify against institutional protocols.
        </p>
      </header>
      <div className="flex flex-wrap gap-2" data-testid="bedside-subnav">
        {PILLS.map((p) => (
          <button
            key={p.id}
            type="button"
            onClick={() => setActive(p.id)}
            className={
              'px-3 py-1.5 rounded-full text-xs font-medium border transition-colors ' +
              (active === p.id
                ? 'bg-primary text-primary-foreground border-primary'
                : 'bg-muted hover:bg-muted/80 border-border')
            }
            data-testid={'bedside-pill-' + p.id}
          >
            <span className="mr-1" aria-hidden>{p.icon}</span>
            {p.label}
          </button>
        ))}
      </div>
      <BedsideWeightEstimator />
      {REAL_BEDSIDE_PANELS.has(pill.id) ? renderBedsideRealPanel(pill.id) : <LegacyPanel pill={pill} />}
    </div>
  );
 }
--- a/client/src/pages/BedsidePanels.tsx
+++ b/client/src/pages/BedsidePanels.tsx
--- a/client/src/pages/BedsidePanels2.tsx
+++ b/client/src/pages/BedsidePanels2.tsx
@ -0,0 +1,641 @@
 // ============================================================
 // BEDSIDE PANELS (second batch) — neonatal, respiratory,
 // ventilation, sepsis, burns. Completes parity with the 15
 // vanilla Bedside sub-modules. Drug per-kg + max values ported
 // byte-for-byte from public/js/bedside/<module>.js.
 // ============================================================
 import { useState } from 'react';
 import { formatDose } from '@shared/clinical/calculators';
 import { neonatalAssess, type Sex } from '@shared/clinical/fenton';
 const card = 'rounded-lg border border-border bg-card p-5 space-y-3';
 const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring';
 const label = 'block text-xs font-medium text-muted-foreground';
 const th = 'text-left px-2 py-1.5 border-b border-border font-semibold uppercase tracking-wide text-[10px] text-muted-foreground';
 const td = 'px-2 py-1.5 border-b border-border align-top text-sm';
 function Dose({ label: l }: { label: string }) {
  const i = l.indexOf('(');
  if (i < 0) return <span className="font-semibold">{l}</span>;
  return <span><span className="font-semibold">{l.slice(0, i).trim()}</span>{' '}<span className="text-xs text-muted-foreground">{l.slice(i)}</span></span>;
 }
 function DrugTable({ children, notes = true }: { children: React.ReactNode; notes?: boolean }) {
  return (
    <div className="overflow-x-auto">
      <table className="w-full text-sm">
        <thead><tr><th className={th}>Drug</th><th className={th}>Dose</th><th className={th}>Route</th>{notes && <th className={th}>Notes</th>}</tr></thead>
        <tbody>{children}</tbody>
      </table>
    </div>
  );
 }
 function Row({ name, dose, route, notes }: { name: string; dose: React.ReactNode; route: string; notes?: string }) {
  return (
    <tr>
      <td className={td + ' font-semibold'} dangerouslySetInnerHTML={{ __html: name }} />
      <td className={td}>{dose}</td>
      <td className={td + ' text-xs'}>{route}</td>
      {notes !== undefined && <td className={td + ' text-xs text-muted-foreground'} dangerouslySetInnerHTML={{ __html: notes }} />}
    </tr>
  );
 }
 // ── Neonatal ────────────────────────────────────────────────
 export function NeonatalPanel() {
  const [weeks, setWeeks] = useState('');
  const [days, setDays] = useState('0');
  const [wtG, setWtG] = useState('');
  const [sex, setSex] = useState<Sex>('male');
  const [kgForNrp, setKgForNrp] = useState('');
  const [apgarScores, setApgarScores] = useState<Record<string, number>>({ appearance: 2, pulse: 2, grimace: 2, activity: 2, respiration: 2 });
  const weeksNum = Number.parseInt(weeks, 10);
  const daysNum = Number.parseInt(days, 10) || 0;
  const wtNum = Number.parseFloat(wtG);
  const validAssess = Number.isFinite(weeksNum) && weeksNum >= 22 && weeksNum <= 44 && Number.isFinite(wtNum) && wtNum > 0;
  const assess = validAssess ? neonatalAssess(weeksNum, daysNum, wtNum, sex) : null;
  const kg = Number.parseFloat(kgForNrp);
  const validKg = Number.isFinite(kg) && kg > 0;
  const epiIvLow  = validKg ? Math.round(kg * 0.01 * 100) / 100 : 0;
  const epiIvHigh = validKg ? Math.round(kg * 0.03 * 100) / 100 : 0;
  const epiEtLow  = validKg ? Math.round(kg * 0.05 * 100) / 100 : 0;
  const epiEtHigh = validKg ? Math.round(kg * 0.1 * 100) / 100 : 0;
  const ns = validKg ? Math.round(kg * 10) : 0;
  const d10 = validKg ? Math.round(kg * 2 * 10) / 10 : 0;
  const apgarTotal = Object.values(apgarScores).reduce((s, v) => s + v, 0);
  const apgarSeverity = apgarTotal >= 7 ? 'Reassuring' : apgarTotal >= 4 ? 'Moderately depressed' : 'Severely depressed';
  const apgarColor = apgarTotal >= 7 ? 'text-green-600 bg-green-50' : apgarTotal >= 4 ? 'text-amber-600 bg-amber-50' : 'text-destructive bg-red-50';
  const apgarGuidance = apgarTotal >= 7
    ? 'Routine newborn care. Continue reassessment. Repeat at 5 min.'
    : apgarTotal >= 4
    ? 'Stimulate, clear airway, warm. Give O₂ if cyanotic. Ventilate with PPV if HR <100 or apneic/gasping. Reassess q30 sec.'
    : 'Full NRP pathway — PPV immediately. Intubate if PPV ineffective. Chest compressions if HR <60. Epinephrine and volume per NRP.';
  return (
    <section className={card} data-testid="bedside-panel-neonatal">
      <h2 className="text-lg font-semibold">Neonatal Assessment + NRP + Apgar</h2>
      {/* Assessment */}
      <h3 className="text-sm font-semibold">Gestational age + size assessment (Fenton 2013)</h3>
      <div className="grid gap-2 grid-cols-2 sm:grid-cols-4 max-w-xl">
        <div><label className={label}>GA weeks</label><input type="number" min="22" max="44" className={input} value={weeks} onChange={(e) => setWeeks(e.target.value)} data-testid="neo-weeks" /></div>
        <div><label className={label}>GA days (0-6)</label><input type="number" min="0" max="6" className={input} value={days} onChange={(e) => setDays(e.target.value)} data-testid="neo-days" /></div>
        <div><label className={label}>Birth wt (g)</label><input type="number" min="200" max="7000" className={input} value={wtG} onChange={(e) => setWtG(e.target.value)} data-testid="neo-weight" /></div>
        <div><label className={label}>Sex</label><select className={input} value={sex} onChange={(e) => setSex(e.target.value as Sex)} data-testid="neo-sex"><option value="male">Male</option><option value="female">Female</option></select></div>
      </div>
      {assess && (
        <div className="grid gap-3 sm:grid-cols-2" data-testid="neo-result">
          <div className="rounded-md border p-3" style={{ borderColor: assess.gaClass.color + '55', background: assess.gaClass.color + '10' }}>
            <div className="text-xs text-muted-foreground">Gestational Age</div>
            <div className="text-base font-bold" style={{ color: assess.gaClass.color }}>{assess.gaClass.label}</div>
            <div className="text-xs text-muted-foreground">{weeksNum} wk {daysNum} d ({assess.gaDecimal.toFixed(1)} wk)</div>
          </div>
          <div className="rounded-md border p-3" style={{ borderColor: assess.weightClass.color + '55', background: assess.weightClass.color + '10' }}>
            <div className="text-xs text-muted-foreground">Weight for Gestational Age</div>
            <div className="text-base font-bold" style={{ color: assess.weightClass.color }}>{assess.weightClass.label}</div>
            <div className="text-xs text-muted-foreground">{assess.percentile.toFixed(1)}th percentile · {assess.weightClass.detail}</div>
          </div>
          <div className="rounded-md border p-3" style={{ borderColor: assess.bwClass.color + '55', background: assess.bwClass.color + '10' }}>
            <div className="text-xs text-muted-foreground">Birth Weight Category</div>
            <div className="text-base font-bold" style={{ color: assess.bwClass.color }}>{assess.bwClass.label}</div>
            <div className="text-xs text-muted-foreground">{wtNum} g ({(wtNum / 1000).toFixed(2)} kg)</div>
          </div>
          <div className="rounded-md border border-border bg-muted/40 p-3 text-xs">
            <div className="text-xs text-muted-foreground uppercase tracking-wide">Fenton ({sex})</div>
            <div className="space-y-0.5 mt-1">
              <div><strong>Expected weight (M):</strong> {assess.expectedWeight} g</div>
              <div><strong>Z-score:</strong> {assess.z.toFixed(2)}</div>
              <div><strong>Percentile:</strong> {assess.percentile.toFixed(1)}%</div>
            </div>
          </div>
        </div>
      )}
      {/* NRP pathway */}
      <h3 className="text-sm font-semibold mt-3">NRP pathway (AHA/AAP 8th ed 2020)</h3>
      <div className="space-y-2 text-sm">
        <div className="rounded-md border-l-4 border-blue-500 bg-blue-50 dark:bg-blue-950/30 p-3"><div className="font-semibold">BIRTH — ASSESS (first 30 sec)</div><div className="text-xs text-muted-foreground">Term? Tone? Breathing/crying? All yes → routine care. Any no → warm, dry, stimulate, clear airway PRN, evaluate HR + resp.</div></div>
        <div className="rounded-md border-l-4 border-purple-500 bg-purple-50 dark:bg-purple-950/30 p-3"><div className="font-semibold">HR &lt;100 OR apneic/gasping (60 s)</div><div className="text-xs text-muted-foreground"><strong>Start PPV</strong> 40-60 breaths/min, room air for term / 21-30% for preterm. Attach SpO₂ (right hand) ± ECG. MR SOPA if ineffective.</div></div>
        <div className="rounded-md border-l-4 border-amber-500 bg-amber-50 dark:bg-amber-950/30 p-3"><div className="font-semibold">HR &lt;100 after 30 s effective PPV</div><div className="text-xs text-muted-foreground">Reassess ventilation — ensure chest rise. Consider increasing FiO₂, intubation, or LMA. Continue PPV.</div></div>
        <div className="rounded-md border-l-4 border-red-500 bg-red-50 dark:bg-red-950/30 p-3"><div className="font-semibold">HR &lt;60 after 30 s effective PPV</div><div className="text-xs text-muted-foreground"><strong>Intubate + chest compressions</strong> — 3:1 ratio (90 compressions + 30 breaths/min), FiO₂ 100%, lower 1/3 sternum, depth 1/3 AP chest.</div></div>
        <div className="rounded-md border-l-4 border-destructive bg-red-100 dark:bg-red-950/40 p-3"><div className="font-semibold">HR &lt;60 despite compressions + PPV × 60 s</div><div className="text-xs text-muted-foreground"><strong>Epinephrine 1:10,000 (0.1 mg/mL):</strong> IV/IO 0.01-0.03 mg/kg (0.1-0.3 mL/kg) — preferred. ETT 0.05-0.1 mg/kg. Repeat q3-5 min. Hypovolemia: <strong>NS 10 mL/kg IV/IO over 5-10 min</strong>.</div></div>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-3 gap-2 text-xs">
        <div className="rounded-md bg-muted/40 p-2"><strong>Target SpO₂ (preductal):</strong><br />1 min 60-65% · 2 min 65-70% · 3 min 70-75% · 4 min 75-80% · 5 min 80-85% · 10 min 85-95%</div>
        <div className="rounded-md bg-muted/40 p-2"><strong>Initial ETT size:</strong><br />&lt;1 kg / &lt;28 wk: 2.5 · 1-2 kg / 28-34 wk: 3.0 · 2-3 kg / 34-38 wk: 3.5 · &gt;3 kg / &gt;38 wk: 3.5-4.0</div>
        <div className="rounded-md bg-muted/40 p-2"><strong>ETT depth (lip):</strong> ~6 + weight(kg) cm</div>
      </div>
      <h3 className="text-sm font-semibold mt-3">NRP drug doses</h3>
      <div className="max-w-xs"><label className={label}>Weight (kg)</label><input type="number" min="0.3" step="0.1" className={input} value={kgForNrp} onChange={(e) => setKgForNrp(e.target.value)} data-testid="nrp-weight" /></div>
      {validKg ? (
        <DrugTable>
          <Row name="Epinephrine 1:10,000" dose={<Dose label={`${epiIvLow}-${epiIvHigh} mg, ${Math.round(epiIvLow * 10) / 10}-${Math.round(epiIvHigh * 10) / 10} mL (0.01-0.03 mg/kg = 0.1-0.3 mL/kg)`} />} route="IV / IO" notes="Preferred route. Repeat q3-5 min." />
          <Row name="Epinephrine 1:10,000" dose={<Dose label={`${epiEtLow}-${epiEtHigh} mg, ${Math.round(epiEtLow * 10) / 10}-${Math.round(epiEtHigh * 10) / 10} mL (0.05-0.1 mg/kg = 0.5-1 mL/kg)`} />} route="ETT" notes="While IV being placed." />
          <Row name="Normal saline" dose={<Dose label={`${ns} mL (10 mL/kg)`} />} route="IV / IO" notes="Over 5-10 min for volume. Repeat PRN." />
          <Row name="Dextrose 10%" dose={<Dose label={`${d10} mL (2 mL/kg = 0.2 g/kg)`} />} route="IV slow push" notes="For documented hypoglycemia. Then D10 infusion 4-6 mg/kg/min." />
        </DrugTable>
      ) : <p className="text-xs text-destructive">Enter weight (kg) to see NRP doses.</p>}
      <div className="rounded-md bg-amber-50 dark:bg-amber-950/30 p-3 text-xs text-amber-900 dark:text-amber-100">
        <strong>Concentration note:</strong> NRP uses epinephrine <strong>1:10,000</strong> (0.1 mg/mL). NOT 1:1000 (1 mg/mL) — that is IM for anaphylaxis / older patients.
      </div>
      {/* Apgar */}
      <h3 className="text-sm font-semibold mt-3">Apgar score</h3>
      <div className="grid gap-2 grid-cols-1 sm:grid-cols-5 text-xs">
        {[
          ['appearance', 'Appearance', ['Blue/pale', 'Body pink, extremities blue', 'All pink']],
          ['pulse',       'Pulse',       ['Absent',     '<100 bpm',                '≥100 bpm']],
          ['grimace',     'Grimace',     ['No response', 'Grimace',                  'Cough/sneeze']],
          ['activity',    'Activity',    ['Limp',       'Some flexion',             'Active motion']],
          ['respiration', 'Respiration', ['Absent',     'Slow/irregular',           'Good/crying']],
        ].map(([key, lab, options]) => (
          <div key={key as string}>
            <label className={label}>{lab}</label>
            <select className={input} value={apgarScores[key as string]} onChange={(e) => setApgarScores({ ...apgarScores, [key as string]: Number(e.target.value) })} data-testid={'apgar-' + key}>
              {(options as string[]).map((o, i) => <option key={i} value={i}>{i} — {o}</option>)}
            </select>
          </div>
        ))}
      </div>
      <div className={'rounded-md p-3 ' + apgarColor} data-testid="apgar-result">
        <div className="text-base font-bold">Apgar: {apgarTotal}/10 — {apgarSeverity}</div>
        <div className="text-xs text-muted-foreground mt-1">{apgarGuidance}</div>
      </div>
      <div className="text-xs text-muted-foreground italic">
        Fenton TR, Kim JH. BMC Pediatr 2013;13:59 · NRP 8th ed (AHA/AAP 2020) · Apgar is a description of status — <strong>never</strong> delay resuscitation while scoring.
      </div>
    </section>
  );
 }
 // ── Respiratory ─────────────────────────────────────────────
 export function RespiratoryPanel() {
  const [mode, setMode] = useState<'asthma' | 'pram' | 'croup' | 'bronch'>('asthma');
  const [weight, setWeight] = useState('');
  const wt = Number.parseFloat(weight);
  const valid = Number.isFinite(wt) && wt > 0;
  const f = (perKg: number, max: number | null, unit = 'mg') => (valid ? formatDose(wt, perKg, max, unit) : null);
  const [asthmaSev, setAsthmaSev] = useState<'mild' | 'moderate' | 'severe' | null>(null);
  // PRAM inputs (0-12 total)
  const [pram, setPram] = useState({ spo2: 0, retractions: 0, scalene: 0, air: 0, wheeze: 0 });
  const pramTotal = Object.values(pram).reduce((s, v) => s + v, 0);
  const pramSev = pramTotal <= 3 ? 'Mild' : pramTotal <= 7 ? 'Moderate' : 'Severe';
  const pramColor = pramTotal <= 3 ? 'text-green-600 bg-green-50' : pramTotal <= 7 ? 'text-amber-600 bg-amber-50' : 'text-destructive bg-red-50';
  // Croup / Westley (0-17)
  const [croup, setCroup] = useState({ conscious: 0, cyanosis: 0, stridor: 0, air: 0, retractions: 0 });
  const croupTotal = Object.values(croup).reduce((s, v) => s + v, 0);
  const croupSev = croupTotal <= 2 ? 'Mild' : croupTotal <= 5 ? 'Moderate' : croupTotal <= 11 ? 'Severe' : 'Impending Respiratory Failure';
  const croupColor = croupTotal <= 2 ? 'text-green-600 bg-green-50' : croupTotal <= 5 ? 'text-amber-600 bg-amber-50' : croupTotal <= 11 ? 'text-destructive bg-red-50' : 'text-red-900 bg-red-100';
  // Bronchiolitis inputs
  const [bronch, setBronch] = useState({ age: 'gte12w', spo2: 'ok', hydration: 'ok', distress: 'mild' });
  const bronchAdmit = bronch.distress === 'severe' || bronch.spo2 === 'low' || bronch.hydration === 'poor' || bronch.age === 'lt12w';
  return (
    <section className={card} data-testid="bedside-panel-respiratory">
      <h2 className="text-lg font-semibold">Respiratory</h2>
      <div className="flex gap-2 flex-wrap">
        {(['asthma', 'pram', 'croup', 'bronch'] as const).map((m) => (
          <button key={m} type="button" onClick={() => setMode(m)} className={'px-3 py-1 rounded-full text-xs font-medium border ' + (mode === m ? 'bg-primary text-primary-foreground border-primary' : 'bg-muted border-border')} data-testid={'resp-mode-' + m}>
            {m === 'asthma' ? 'Asthma' : m === 'pram' ? 'PRAM' : m === 'croup' ? 'Croup (Westley)' : 'Bronchiolitis'}
          </button>
        ))}
      </div>
      {mode !== 'pram' && mode !== 'bronch' && (
        <div className="max-w-xs"><label className={label}>Weight (kg)</label><input type="number" min="0.3" step="0.1" className={input} value={weight} onChange={(e) => setWeight(e.target.value)} data-testid="resp-weight" /></div>
      )}
      {/* ASTHMA */}
      {mode === 'asthma' && (
        <>
          <div className="flex gap-2">
            {(['mild', 'moderate', 'severe'] as const).map((s) => (
              <button key={s} type="button" onClick={() => setAsthmaSev(s)} className={'px-3 py-1 rounded text-xs font-medium border ' + (asthmaSev === s ? (s === 'mild' ? 'bg-green-600 text-white' : s === 'moderate' ? 'bg-amber-500 text-white' : 'bg-destructive text-white') : 'bg-muted')}>
                {s.charAt(0).toUpperCase() + s.slice(1)}
              </button>
            ))}
          </div>
          {asthmaSev && !valid && <p className="text-xs text-destructive">Enter weight (kg) to see doses.</p>}
          {asthmaSev === 'mild' && valid && (
            <>
              <p className="text-xs text-muted-foreground">Speaks in sentences, no accessory muscle use, SpO₂ ≥94%</p>
              <DrugTable>
                <Row name="Albuterol (MDI)"     dose="4-8 puffs via spacer" route="Inhaled"    notes="q20min × 3 doses, then q1-4h" />
                <Row name="Albuterol (neb)"     dose={<Dose label={`${f(0.15, 5, 'mg')!.label} (min 2.5 mg)`} />} route="Nebulized" notes="q20min × 3 doses" />
                <Row name="Dexamethasone"       dose={<Dose label={f(0.6, 16)!.label} />}  route="PO/IV" notes="Single dose, or 2 days" />
                <Row name="Prednisolone"        dose={<Dose label={`${f(1, 60)!.label}/day`} />} route="PO"    notes="Alternative: 3-5 day course" />
              </DrugTable>
            </>
          )}
          {asthmaSev === 'moderate' && valid && (
            <>
              <p className="text-xs text-muted-foreground">Speaks in phrases, some accessory muscle use, SpO₂ 90-93%</p>
              <DrugTable>
                <Row name="Albuterol (neb)"     dose={<Dose label={`${f(0.15, 5, 'mg')!.label} (min 2.5 mg)`} />} route="Nebulized" notes="q20min × 3 doses, then continuous if needed" />
                <Row name="Ipratropium"         dose={wt < 20 ? '250 mcg' : '500 mcg'}     route="Nebulized" notes="q20min × 3 doses with albuterol" />
                <Row name="Dexamethasone"       dose={<Dose label={f(0.6, 16)!.label} />} route="PO/IV/IM"  notes="Single dose" />
                <Row name="O₂ supplemental"     dose="Target SpO₂ ≥94%"                    route="NC/mask"   notes="Titrate to effect" />
              </DrugTable>
            </>
          )}
          {asthmaSev === 'severe' && valid && (
            <>
              <p className="text-xs text-muted-foreground">Speaks in words only, significant accessory muscle use, SpO₂ &lt;90%. Consider ICU.</p>
              <DrugTable>
                <Row name="Albuterol continuous" dose={<Dose label={`${f(0.5, 20, 'mg')!.label}/hr`} />} route="Continuous neb" notes="Or 0.15-0.3 mg/kg q20min" />
                <Row name="Ipratropium"          dose={wt < 20 ? '250 mcg' : '500 mcg'}                 route="Nebulized"      notes="q20min × 3 doses with albuterol" />
                <Row name="Dexamethasone"        dose={<Dose label={f(0.6, 16)!.label} />}              route="IV"             notes="Or methylprednisolone 2 mg/kg IV (max 60 mg)" />
                <Row name="Magnesium sulfate"   dose={<Dose label={`${f(50, 2000)!.label} IV over 20 min`} />} route="IV" notes="Single dose, monitor BP" />
                <Row name="Epinephrine (IM)"     dose={<Dose label={`${f(0.01, 0.5)!.label} (1:1000)`} />}  route="IM"  notes="If impending arrest / no IV access" />
                <Row name="Terbutaline"         dose={<Dose label={`${f(0.01, 0.4)!.label} SC/IV`} />}  route="SC/IV"          notes="Then 0.1-10 mcg/kg/min infusion" />
                <Row name="O₂ supplemental"     dose="Target SpO₂ ≥94%"                                 route="High flow / NIPPV" notes="Consider BiPAP/CPAP" />
              </DrugTable>
              <div className="rounded-md bg-red-50 dark:bg-red-950/30 p-3 text-xs text-red-900 dark:text-red-100">
                <strong>Continuous monitoring.</strong> Consider ICU admission. If no response to magnesium → terbutaline infusion. If impending respiratory failure → intubation (ketamine preferred induction agent).
              </div>
            </>
          )}
          <div className="text-xs text-muted-foreground italic">NAEPP/GINA guidelines. Always use clinical judgment.</div>
        </>
      )}
      {/* PRAM */}
      {mode === 'pram' && (
        <>
          <p className="text-sm text-muted-foreground">Pediatric Respiratory Assessment Measure (PRAM) — for asthma exacerbation severity (0-12).</p>
          <div className="grid gap-2 grid-cols-1 sm:grid-cols-2">
            {[
              ['spo2',        'SpO₂',               ['≥95% (0)', '92-94% (1)', '<92% (2)']],
              ['retractions', 'Suprasternal retractions', ['Absent (0)', 'Present (2)']],
              ['scalene',     'Scalene muscle use', ['Absent (0)', 'Present (2)']],
              ['air',         'Air entry',          ['Normal (0)', 'Mild ↓ at bases (1)', 'Widespread ↓ (2)', 'Absent/minimal (3)']],
              ['wheeze',      'Wheezing',           ['Absent (0)', 'Expiratory only (1)', 'Ins+exp (2)', 'Audible without stethoscope/silent chest (3)']],
            ].map(([key, lab, options]) => (
              <div key={key as string}>
                <label className={label}>{lab}</label>
                <select className={input} value={pram[key as keyof typeof pram]} onChange={(e) => setPram({ ...pram, [key as string]: Number(e.target.value) })} data-testid={'pram-' + key}>
                  {(options as string[]).map((o, i) => <option key={i} value={i}>{o}</option>)}
                </select>
              </div>
            ))}
          </div>
          <div className={'rounded-md p-3 ' + pramColor} data-testid="pram-result">
            <div className="text-base font-bold">PRAM Score: {pramTotal}/12 — {pramSev}</div>
            <div className="text-xs text-muted-foreground mt-1">Mild (0-3): outpatient management. Moderate (4-7): consider oral steroids + frequent bronchodilators. Severe (8-12): aggressive treatment, consider ICU.</div>
          </div>
        </>
      )}
      {/* CROUP */}
      {mode === 'croup' && (
        <>
          <p className="text-sm text-muted-foreground">Westley croup score (0-17).</p>
          <div className="grid gap-2 grid-cols-1 sm:grid-cols-2">
            {[
              ['conscious',   'Level of consciousness', ['Normal (0)', 'Disoriented (5)']],
              ['cyanosis',    'Cyanosis',               ['None (0)', 'With agitation (4)', 'At rest (5)']],
              ['stridor',     'Stridor',                ['None (0)', 'With agitation (1)', 'At rest (2)']],
              ['air',         'Air entry',              ['Normal (0)', 'Decreased (1)', 'Severely decreased (2)']],
              ['retractions', 'Retractions',            ['None (0)', 'Mild (1)', 'Moderate (2)', 'Severe (3)']],
            ].map(([key, lab, options]) => (
              <div key={key as string}>
                <label className={label}>{lab}</label>
                <select className={input} value={croup[key as keyof typeof croup]} onChange={(e) => setCroup({ ...croup, [key as string]: Number(e.target.value) })} data-testid={'croup-' + key}>
                  {(options as string[]).map((o, i) => <option key={i} value={i}>{o}</option>)}
                </select>
              </div>
            ))}
          </div>
          <div className={'rounded-md p-3 ' + croupColor} data-testid="croup-result">
            <div className="text-base font-bold">Westley: {croupTotal}/17 — {croupSev}</div>
            <div className="text-xs text-muted-foreground mt-1">Mild ≤2 · Moderate 3-5 · Severe 6-11 · Impending failure ≥12.</div>
          </div>
          {valid && (
            <DrugTable>
              <Row name="Dexamethasone" dose={<Dose label={f(0.6, 16)!.label} />} route={croupTotal <= 2 ? 'PO' : croupTotal <= 5 ? 'PO/IM' : 'IV/IM'} notes="Preferred corticosteroid; single dose" />
              {croupTotal > 2 && <Row name="Racemic epinephrine" dose="0.5 mL of 2.25% solution" route="Nebulized" notes="May repeat q15-20min, observe 2-4 h" />}
              {croupTotal > 2 && <Row name="Nebulized epinephrine" dose="0.5 mL/kg of 1:1000 (max 5 mL)" route="Nebulized" notes="Alternative to racemic" />}
              {croupTotal > 5 && <Row name="Heliox" dose="70:30 or 80:20" route="Face mask" notes="Consider if not responding" />}
            </DrugTable>
          )}
        </>
      )}
      {/* BRONCHIOLITIS */}
      {mode === 'bronch' && (
        <>
          <div className="grid gap-2 grid-cols-1 sm:grid-cols-2 max-w-xl">
            <div><label className={label}>Age</label><select className={input} value={bronch.age} onChange={(e) => setBronch({ ...bronch, age: e.target.value })}><option value="lt12w">&lt;12 weeks (high risk)</option><option value="gte12w">≥12 weeks</option></select></div>
            <div><label className={label}>SpO₂</label><select className={input} value={bronch.spo2} onChange={(e) => setBronch({ ...bronch, spo2: e.target.value })}><option value="ok">≥90%</option><option value="low">&lt;90%</option></select></div>
            <div><label className={label}>Hydration</label><select className={input} value={bronch.hydration} onChange={(e) => setBronch({ ...bronch, hydration: e.target.value })}><option value="ok">Adequate</option><option value="poor">Poor oral intake</option></select></div>
            <div><label className={label}>Distress</label><select className={input} value={bronch.distress} onChange={(e) => setBronch({ ...bronch, distress: e.target.value })}><option value="mild">Mild</option><option value="moderate">Moderate</option><option value="severe">Severe</option></select></div>
          </div>
          <div className={'rounded-md p-3 ' + (bronchAdmit ? 'text-destructive bg-red-50' : 'text-green-600 bg-green-50')} data-testid="bronch-result">
            <div className="text-base font-bold">{bronchAdmit ? 'Admit / Observe' : 'Likely Safe for Discharge'}</div>
            {bronch.age === 'lt12w' && <div className="text-xs text-destructive mt-1">⚠ Age &lt;12 weeks — high risk for apnea. Monitor closely.</div>}
          </div>
          <div className="rounded-md bg-amber-50 dark:bg-amber-950/30 p-3 text-xs text-amber-900 dark:text-amber-100">
            <strong>NOT recommended (AAP 2014/2023):</strong> Albuterol/salbutamol (no benefit), epinephrine (no evidence), systemic corticosteroids (no benefit), antibiotics (unless bacterial co-infection), chest physiotherapy.
          </div>
          <div className="text-xs text-muted-foreground italic">AAP Clinical Practice Guideline: Management of Bronchiolitis in Infants and Children (2014, reaffirmed 2023). RSV most common (50-80%).</div>
        </>
      )}
    </section>
  );
 }
 // ── Ventilation (O₂ escalation + vent settings reference) ───
 export function VentilationPanel() {
  const [weight, setWeight] = useState('');
  const [age, setAge] = useState('');
  const wt = Number.parseFloat(weight);
  const ageY = Number.parseFloat(age);
  const validWt = Number.isFinite(wt) && wt > 0;
  const hfLow = validWt ? Math.round(wt * 1 * 10) / 10 : 0;
  const hfHigh = validWt ? Math.round(wt * 2 * 10) / 10 : 0;
  const tvLow = validWt ? Math.round(wt * 6 * 10) / 10 : 0;
  const tvHigh = validWt ? Math.round(wt * 8 * 10) / 10 : 0;
  const hasAge = Number.isFinite(ageY) && ageY >= 0;
  const rate = hasAge
    ? ageY < 0.1 ? '30-40'
    : ageY < 1 ? '25-35'
    : ageY < 5 ? '20-25'
    : ageY < 12 ? '16-20'
    : '12-16'
    : '';
  return (
    <section className={card} data-testid="bedside-panel-ventilation">
      <h2 className="text-lg font-semibold">O₂ &amp; Ventilation</h2>
      <div className="grid gap-2 grid-cols-2 max-w-md">
        <div><label className={label}>Weight (kg)</label><input type="number" min="0.3" step="0.1" className={input} value={weight} onChange={(e) => setWeight(e.target.value)} data-testid="vent-weight" /></div>
        <div><label className={label}>Age (years)</label><input type="number" min="0" step="0.5" className={input} value={age} onChange={(e) => setAge(e.target.value)} data-testid="vent-age" /></div>
      </div>
      <h3 className="text-sm font-semibold">Target SpO₂</h3>
      <DrugTable notes>
        <Row name="Most children"                 dose="94-98%" route="—" notes="Normal" />
        <Row name="Bronchiolitis (AAP 2014/2023)" dose="≥90%"   route="—" notes="Don't chase higher saturations" />
        <Row name="Chronic lung disease / CF"      dose="90-94%" route="—" notes="Avoid hyperoxia in CO₂ retainers" />
        <Row name="Preterm neonate"                dose="90-95%" route="—" notes="Minimize ROP risk" />
        <Row name="Term neonate (min of life)"    dose="Per NRP ladder" route="—" notes="1 min 60-65% · 10 min 85-95%" />
      </DrugTable>
      <h3 className="text-sm font-semibold mt-2">Escalation ladder</h3>
      <div className="space-y-2 text-sm">
        <div className="rounded-md border-l-4 border-green-500 bg-green-50 dark:bg-green-950/30 p-3"><div className="font-semibold">1. Nasal cannula (low-flow)</div><div className="text-xs text-muted-foreground"><strong>0.5-6 L/min</strong> · FiO₂ ~24-40% · comfortable, no humidification. Good for mild hypoxia.</div></div>
        <div className="rounded-md border-l-4 border-blue-500 bg-blue-50 dark:bg-blue-950/30 p-3"><div className="font-semibold">2. Simple face mask</div><div className="text-xs text-muted-foreground"><strong>6-10 L/min</strong> · FiO₂ 35-60%. Must keep flow &gt;6 L/min to flush CO₂.</div></div>
        <div className="rounded-md border-l-4 border-purple-500 bg-purple-50 dark:bg-purple-950/30 p-3"><div className="font-semibold">3. Non-rebreather mask</div><div className="text-xs text-muted-foreground"><strong>10-15 L/min</strong> · FiO₂ 60-90%. Reservoir bag must stay inflated.</div></div>
        <div className="rounded-md border-l-4 border-amber-500 bg-amber-50 dark:bg-amber-950/30 p-3"><div className="font-semibold">4. High-flow nasal cannula (HFNC)</div><div className="text-xs text-muted-foreground"><strong>{validWt ? `1-2 L/kg/min = ${hfLow}-${hfHigh} L/min` : '1-2 L/kg/min'}</strong> · heated + humidified · FiO₂ 30-100% titratable · generates ~2-5 cmH₂O PEEP. Reassess at 1-2 h.</div></div>
        <div className="rounded-md border-l-4 border-red-500 bg-red-50 dark:bg-red-950/30 p-3"><div className="font-semibold">5. Non-invasive (CPAP / BiPAP)</div><div className="text-xs text-muted-foreground">CPAP 5-10 cmH₂O · BiPAP IPAP 10-14 / EPAP 5. Needs cooperative patient, intact airway reflexes, no copious secretions.</div></div>
        <div className="rounded-md border-l-4 border-destructive bg-red-100 dark:bg-red-950/40 p-3"><div className="font-semibold">6. Intubate + mechanical ventilation</div><div className="text-xs text-muted-foreground">When NIV fails, airway compromised, apnea, or GCS ≤8. See Airway tab for RSI drugs.</div></div>
      </div>
      <h3 className="text-sm font-semibold mt-2">Bag-Valve-Mask (BVM)</h3>
      <div className="rounded-md bg-blue-50 dark:bg-blue-950/30 p-3 text-xs space-y-1">
        <div><strong>When:</strong> apnea, bradycardia (HR &lt;60 neonate; inadequate breathing at any age), during resuscitation.</div>
        <div><strong>Rate:</strong> Newborn 40-60/min · Infant-child 20-30/min · Adolescent 10-12/min (1 breath q5-6 sec).</div>
        <div><strong>Tidal volume:</strong> 6-8 mL/kg — gentle chest rise only. Avoid over-ventilation.</div>
        <div><strong>Technique:</strong> head tilt / jaw thrust, E-C or 2-thumb mask seal, squeeze 1 sec, release fully.</div>
        <div><strong>Not ventilating?</strong> MR SOPA — Mask reseal, Reposition airway, Suction, Open mouth, Pressure ↑, Alternative airway.</div>
      </div>
      <h3 className="text-sm font-semibold mt-2">Mechanical vent — starting settings</h3>
      <div className="rounded-md bg-muted/40 p-3 text-xs space-y-1">
        <div><strong>Mode:</strong> Volume-control OR Pressure-control. PRVC / SIMV-PS hybrids.</div>
        <div><strong>Tidal volume:</strong> <strong>{validWt ? `${tvLow}-${tvHigh} mL` : '6-8 mL/kg'}</strong> (6-8 mL/kg). Use 4-6 mL/kg for ARDS.</div>
        <div><strong>Rate:</strong> {rate ? `${rate}/min (age ${ageY} yr)` : 'Newborn 30-40 · Infant 25-35 · Child 16-20 · Adolescent 12-16'}.</div>
        <div><strong>PEEP:</strong> start 5 cmH₂O. Increase to 8-12+ for refractory hypoxia.</div>
        <div><strong>FiO₂:</strong> start 100%, wean rapidly to lowest that maintains target SpO₂.</div>
        <div><strong>I:E ratio:</strong> 1:2 normally; 1:3-4 for obstructive disease.</div>
        <div><strong>Plateau pressure:</strong> keep &lt;30 cmH₂O (ideally &lt;28).</div>
      </div>
      <h3 className="text-sm font-semibold mt-2">Adjusting for gas exchange</h3>
      <DrugTable notes>
        <Row name="Low SpO₂ (oxygenation)"         dose="↑ FiO₂"                  route="—" notes="Then ↑ PEEP (recruits collapsed alveoli)" />
        <Row name="↑ PCO₂ (ventilation)"            dose="↑ Rate"                  route="—" notes="Then ↑ Tidal volume" />
        <Row name="↓ PCO₂ (over-ventilating)"       dose="↓ Rate"                  route="—" notes="Then ↓ Tidal volume" />
        <Row name="High peak pressure"              dose="Check tube / compliance" route="—" notes="Suction, bronchodilator, lower TV" />
        <Row name="Auto-PEEP (asthma, bronch)"      dose="↓ Rate, ↑ Te"             route="—" notes="Disconnect + bag briefly if critical" />
      </DrugTable>
      <div className="rounded-md bg-green-50 dark:bg-green-950/30 p-3 text-xs text-green-900 dark:text-green-100">
        <strong>Mental model:</strong> Oxygenation is mostly <strong>FiO₂ + PEEP</strong>. Ventilation (CO₂) is mostly <strong>rate + tidal volume</strong>. Obstructive (asthma, bronchiolitis) → long expiratory time, permissive hypercapnia. Restrictive (ARDS) → low TV, high PEEP, permissive hypercapnia + hypoxia.
      </div>
      <div className="text-xs text-muted-foreground italic">AAP / PALS / AARC guidance.</div>
    </section>
  );
 }
 // ── Sepsis ──────────────────────────────────────────────────
 export function SepsisPanel() {
  const [weight, setWeight] = useState('');
  const [age, setAge] = useState<'neonate' | 'infant' | 'child'>('child');
  const wt = Number.parseFloat(weight);
  const valid = Number.isFinite(wt) && wt > 0;
  const f = (perKg: number, max: number | null, unit = 'mg') => (valid ? formatDose(wt, perKg, max, unit) : null);
  const ageLbl = age === 'neonate' ? 'Neonate (0-28 d)' : age === 'infant' ? 'Young infant (29 d - 3 mo)' : 'Older child / adolescent';
  const bolus = valid ? Math.round(wt * 20) : null;
  return (
    <section className={card} data-testid="bedside-panel-sepsis">
      <h2 className="text-lg font-semibold">Sepsis &amp; Fever</h2>
      <div className="grid gap-2 grid-cols-1 sm:grid-cols-2 max-w-md">
        <div><label className={label}>Weight (kg)</label><input type="number" min="0.3" step="0.1" className={input} value={weight} onChange={(e) => setWeight(e.target.value)} data-testid="sepsis-weight" /></div>
        <div><label className={label}>Age band</label><select className={input} value={age} onChange={(e) => setAge(e.target.value as typeof age)} data-testid="sepsis-age"><option value="neonate">Neonate (0-28 d)</option><option value="infant">Infant (29 d - 3 mo)</option><option value="child">Older child / adolescent</option></select></div>
      </div>
      <div className="rounded-md border-2 border-destructive bg-red-50 dark:bg-red-950/30 p-3 text-sm font-semibold text-destructive">
        Sepsis approach — {ageLbl}{valid ? `, ${wt} kg` : ''}
      </div>
      <h3 className="text-sm font-semibold mt-2">Definition — Phoenix Sepsis Criteria (JAMA 2024)</h3>
      <div className="rounded-md bg-muted/40 p-3 text-xs space-y-1">
        <div><strong>Sepsis</strong> = suspected or confirmed infection + Phoenix Score ≥2 (organ dysfunction across respiratory, cardiovascular, coagulation, neurological).</div>
        <div><strong>Septic shock</strong> = sepsis + cardiovascular dysfunction (vasoactive support, or ↑lactate ≥5, or ↓MAP for age).</div>
        <div className="text-muted-foreground italic">Previous SIRS-based criteria (Goldstein 2005) are now superseded.</div>
      </div>
      <h3 className="text-sm font-semibold mt-2">Red flags</h3>
      <div className="rounded-md bg-red-50 dark:bg-red-950/30 p-3 text-xs text-red-900 dark:text-red-100">
        Abnormal behavior / mentation · Fever + ill-appearance · Tachycardia out of proportion to fever · Prolonged cap refill (&gt;3 s) · Cold/mottled extremities · Weak pulses or wide pulse pressure ("warm shock") · Hypotension is a <strong>LATE</strong> sign · Any immune compromise / indwelling line.
      </div>
      <h3 className="text-sm font-semibold mt-2">Empirical therapy — {ageLbl}</h3>
      <div className="rounded-md bg-muted/40 p-3 text-xs">
        {age === 'neonate' && <><strong>Workup (full sepsis eval):</strong> CBC+diff, CRP, blood culture, UA+urine culture (cath), <strong>LP</strong> (CSF+HSV PCR), CXR if respiratory sx, procalcitonin. <strong>Early-onset</strong> (&lt;72 h): GBS, E. coli, Listeria. <strong>Late-onset</strong> (&gt;72 h): CoNS, S. aureus, gram-negs, Candida.</>}
        {age === 'infant' && <><strong>Workup:</strong> Use validated rules — PECARN, Aronson, Rochester, Step-by-Step. CBC+ANC, procalcitonin/CRP, blood culture, UA+urine culture. Many warrant LP + admission + empiric abx. <strong>Coverage:</strong> GBS, E. coli, Listeria (up to ~6 wk), S. pneumo, N. meningitidis, H. flu, Salmonella.</>}
        {age === 'child' && <><strong>Recognition:</strong> Phoenix score or clinical concern + suspected infection. <strong>Workup:</strong> CBC, CRP, procalcitonin, blood cx (+site-specific), lactate, blood gas, glucose, electrolytes, coags, LP if CNS concern. Source-directed imaging.</>}
      </div>
      {valid && (
        <DrugTable>
          {age === 'neonate' && <>
            <Row name="Ampicillin"      dose={<Dose label={f(100, 2000)!.label} />}  route="IV" notes="q8-12h. Covers GBS, Listeria, Enterococcus." />
            <Row name="Gentamicin"      dose={<Dose label={f(4, 120)!.label} />}     route="IV" notes="q24-48h. Monitor levels." />
            <Row name="Cefotaxime (add)" dose={<Dose label={f(50, 2000)!.label} />} route="IV" notes="If meningitis or gram-neg concern." />
            <Row name="Acyclovir"        dose={<Dose label={f(20, 1200)!.label} />} route="IV q8h" notes="HSV risk: maternal lesions, vesicles, seizures, CSF pleocytosis." />
          </>}
          {age === 'infant' && <>
            <Row name="Ceftriaxone" dose={<Dose label={f(75, 2000)!.label} />}  route="IV / IM" notes="q24h (100 mg/kg/day divided q12h for meningitis). <strong>Avoid &lt;28 d</strong> if hyperbilirubinemia." />
            <Row name="Ampicillin"  dose={<Dose label={f(100, 2000)!.label} />} route="IV"      notes="If &lt;6 wk: add for Listeria coverage." />
            <Row name="Vancomycin"  dose={<Dose label={f(15, 1000)!.label} />}  route="IV"      notes="If severe / MRSA risk / meningitis." />
            <Row name="Acyclovir"    dose={<Dose label={f(20, 1200)!.label} />} route="IV q8h"  notes="&lt;6 wk with suspicion of HSV." />
          </>}
          {age === 'child' && <>
            <Row name="Ceftriaxone"            dose={<Dose label={f(50, 2000)!.label} />}  route="IV" notes="q24h (100 mg/kg/day divided for meningitis)." />
            <Row name="Vancomycin"             dose={<Dose label={f(15, 1000)!.label} />}  route="IV" notes="q6h. If severe, indwelling line, or MRSA prevalence &gt;10%." />
            <Row name="Piperacillin-tazobactam" dose={<Dose label={f(100, 4500)!.label} />} route="IV" notes="If intra-abdominal / neutropenic." />
            <Row name="Clindamycin"            dose={<Dose label={f(10, 900)!.label} />}   route="IV" notes="Adjunct for toxic shock syndrome (toxin suppression)." />
            <Row name="Acyclovir"              dose={<Dose label={f(20, 1200)!.label} />}  route="IV q8h" notes="If HSV CNS concern." />
          </>}
        </DrugTable>
      )}
      <h3 className="text-sm font-semibold mt-2">First-hour bundle (SSC Peds 2020)</h3>
      <div className="space-y-2 text-sm">
        <div className="rounded-md border-l-4 border-blue-500 bg-blue-50 dark:bg-blue-950/30 p-3"><div className="font-semibold">0-5 min — Recognize</div><div className="text-xs text-muted-foreground">Screen, sepsis huddle/activation, ABCs, O₂ to SpO₂ &gt;94%, warm.</div></div>
        <div className="rounded-md border-l-4 border-purple-500 bg-purple-50 dark:bg-purple-950/30 p-3"><div className="font-semibold">5-15 min — Access &amp; labs</div><div className="text-xs text-muted-foreground">Two IVs or IO. Draw blood cx (ideally before abx), lactate, CBC, CMP, coags, blood gas, glucose. UA + culture. Source-specific cultures.</div></div>
        <div className="rounded-md border-l-4 border-amber-500 bg-amber-50 dark:bg-amber-950/30 p-3"><div className="font-semibold">15-30 min — Fluids</div><div className="text-xs text-muted-foreground">{valid ? <>NS or LR <strong>{bolus} mL</strong> bolus (20 mL/kg) over 5-10 min.</> : <>NS/LR 10-20 mL/kg bolus over 5-10 min.</>} Reassess HR, perfusion, lungs, liver. Repeat up to 40-60 mL/kg; stop if crackles/hepatomegaly.</div></div>
        <div className="rounded-md border-l-4 border-green-500 bg-green-50 dark:bg-green-950/30 p-3"><div className="font-semibold">30-60 min — Antibiotics + reassess</div><div className="text-xs text-muted-foreground">Broad-spectrum empiric abx within 1 hour (≤1 h in septic shock). Recheck lactate, perfusion.</div></div>
        <div className="rounded-md border-l-4 border-destructive bg-red-50 dark:bg-red-950/30 p-3"><div className="font-semibold">&gt;60 min — Fluid-refractory shock</div><div className="text-xs text-muted-foreground">Start vasoactive (<strong>epinephrine 0.05-0.3 mcg/kg/min</strong> cold / <strong>norepinephrine 0.05-0.3 mcg/kg/min</strong> warm). Central/IO access. Stress-dose hydrocortisone {valid ? <><strong>{f(2, 100)!.value} mg</strong> IV (2 mg/kg, max 100 mg)</> : '2 mg/kg IV (max 100 mg)'} if catecholamine-resistant. ICU.</div></div>
      </div>
      <h3 className="text-sm font-semibold mt-2">Resuscitation targets</h3>
      <div className="rounded-md bg-muted/40 p-3 text-xs">
        Normal mentation · Cap refill ≤2 s · Warm extremities · Strong peripheral pulses · UOP ≥1 mL/kg/hr · MAP ≥5th %ile for age (&gt;65 mmHg adolescent) · SpO₂ ≥94% · Lactate trending down.
      </div>
      <div className="text-xs text-muted-foreground italic">Phoenix Sepsis Criteria (Schlapbach et al., JAMA 2024) · Surviving Sepsis Campaign Pediatric 2020 · AAP pediatric sepsis guidance.</div>
    </section>
  );
 }
 // ── Burns ───────────────────────────────────────────────────
 // Lund-Browder age-adjusted region percentages ported VERBATIM from
 // public/js/bedside/burns.js:10-30.
 const LUND_BROWDER: Array<{ key: string; label: string; vals: [number, number, number, number, number]; ageSensitive?: boolean }> = [
  { key: 'head',       label: 'Head',             vals: [18, 13, 11, 9, 7],   ageSensitive: true },
  { key: 'neck',       label: 'Neck',             vals: [2, 2, 2, 2, 2] },
  { key: 'ant_trunk',  label: 'Anterior trunk',   vals: [13, 13, 13, 13, 13] },
  { key: 'post_trunk', label: 'Posterior trunk',  vals: [13, 13, 13, 13, 13] },
  { key: 'r_buttock',  label: 'Right buttock',    vals: [2.5, 2.5, 2.5, 2.5, 2.5] },
  { key: 'l_buttock',  label: 'Left buttock',     vals: [2.5, 2.5, 2.5, 2.5, 2.5] },
  { key: 'genital',    label: 'Genitalia',        vals: [1, 1, 1, 1, 1] },
  { key: 'r_uparm',    label: 'R upper arm',      vals: [4, 4, 4, 4, 4] },
  { key: 'l_uparm',    label: 'L upper arm',      vals: [4, 4, 4, 4, 4] },
  { key: 'r_forearm',  label: 'R forearm',        vals: [3, 3, 3, 3, 3] },
  { key: 'l_forearm',  label: 'L forearm',        vals: [3, 3, 3, 3, 3] },
  { key: 'r_hand',     label: 'R hand',           vals: [2.5, 2.5, 2.5, 2.5, 2.5] },
  { key: 'l_hand',     label: 'L hand',           vals: [2.5, 2.5, 2.5, 2.5, 2.5] },
  { key: 'r_thigh',    label: 'R thigh',          vals: [5.5, 8, 8.5, 9, 9.5], ageSensitive: true },
  { key: 'l_thigh',    label: 'L thigh',          vals: [5.5, 8, 8.5, 9, 9.5], ageSensitive: true },
  { key: 'r_leg',      label: 'R lower leg',      vals: [5, 5.5, 6, 6.5, 7],   ageSensitive: true },
  { key: 'l_leg',      label: 'L lower leg',      vals: [5, 5.5, 6, 6.5, 7],   ageSensitive: true },
  { key: 'r_foot',     label: 'R foot',           vals: [3.5, 3.5, 3.5, 3.5, 3.5] },
  { key: 'l_foot',     label: 'L foot',           vals: [3.5, 3.5, 3.5, 3.5, 3.5] },
 ];
 const AGE_BANDS: Array<{ id: 'infant' | 'young' | 'child' | 'adol' | 'adult'; label: string }> = [
  { id: 'infant', label: 'Infant (<1 y)' },
  { id: 'young',  label: 'Young child (1-5 y)' },
  { id: 'child',  label: 'Child (5-10 y)' },
  { id: 'adol',   label: 'Adolescent (10-15 y)' },
  { id: 'adult',  label: 'Adult (>15 y)' },
 ];
 export function BurnsPanel() {
  const [weight, setWeight] = useState('');
  const [ageBand, setAgeBand] = useState<'infant' | 'young' | 'child' | 'adol' | 'adult'>('young');
  const [override, setOverride] = useState('');
  const [pct, setPct] = useState<Record<string, number>>({});
  const ageIdx = AGE_BANDS.findIndex((a) => a.id === ageBand);
  const computedTbsa = LUND_BROWDER.reduce(
    (sum, r) => sum + r.vals[ageIdx] * Math.min(100, Math.max(0, pct[r.key] ?? 0)) / 100,
    0,
  );
  const tbsa = override.trim() ? Number(override) : Math.round(computedTbsa * 10) / 10;
  const wt = Number.parseFloat(weight);
  const validWt = Number.isFinite(wt) && wt > 0;
  const validTbsa = Number.isFinite(tbsa) && tbsa > 0;
  const total = validWt && validTbsa ? Math.round(4 * wt * tbsa) : 0;
  const first8 = Math.round(total / 2);
  const rateFirst = Math.round(first8 / 8);
  const next16 = total - first8;
  const rateNext = Math.round(next16 / 16);
  const maint = validWt
    ? Math.round(wt <= 10 ? wt * 4 : wt <= 20 ? 40 + (wt - 10) * 2 : 60 + (wt - 20))
    : 0;
  return (
    <section className={card} data-testid="bedside-panel-burns">
      <h2 className="text-lg font-semibold">Burns — Lund-Browder + Parkland</h2>
      <div className="grid gap-2 grid-cols-1 sm:grid-cols-3 max-w-xl">
        <div><label className={label}>Weight (kg)</label><input type="number" min="0.3" step="0.1" className={input} value={weight} onChange={(e) => setWeight(e.target.value)} data-testid="burn-weight" /></div>
        <div><label className={label}>Age band</label><select className={input} value={ageBand} onChange={(e) => setAgeBand(e.target.value as typeof ageBand)} data-testid="burn-age">{AGE_BANDS.map((a) => <option key={a.id} value={a.id}>{a.label}</option>)}</select></div>
        <div><label className={label}>TBSA override (%)</label><input type="number" min="0" max="100" step="1" className={input} value={override} onChange={(e) => setOverride(e.target.value)} placeholder={validTbsa ? String(tbsa) : 'auto'} data-testid="burn-tbsa" /></div>
      </div>
      <h3 className="text-sm font-semibold">Body parts — % of each region burned (2° or deeper)</h3>
      <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2">
        {LUND_BROWDER.map((r) => {
          const max = r.vals[ageIdx];
          return (
            <div key={r.key} className="flex items-center gap-2 bg-muted/30 rounded p-2">
              <label className="flex-1 text-xs">{r.label} <span className="text-muted-foreground">({max}%{r.ageSensitive ? '*' : ''})</span></label>
              <input type="number" min="0" max="100" step="5" className="w-16 rounded border border-input bg-background px-2 py-1 text-xs text-right" value={pct[r.key] ?? 0} onChange={(e) => setPct({ ...pct, [r.key]: Number(e.target.value) })} data-testid={'burn-region-' + r.key} />
              <span className="text-xs text-muted-foreground">%</span>
            </div>
          );
        })}
      </div>
      {validTbsa && <div className="text-sm text-muted-foreground">Computed TBSA: <strong>{tbsa}%</strong></div>}
      {!validWt && <p className="text-xs text-destructive">Enter weight (kg) to see Parkland + maintenance fluids.</p>}
      {!validTbsa && validWt && <p className="text-xs text-destructive">Enter % per region or override TBSA to compute fluids.</p>}
      {validWt && validTbsa && (
        <>
          <div className="rounded-md border-2 border-destructive bg-red-50 dark:bg-red-950/30 p-3 text-sm font-semibold text-destructive" data-testid="burn-result">
            Burn fluid resuscitation — {wt} kg, {tbsa}% TBSA (2° or deeper)
          </div>
          <div className="rounded-md bg-red-50 dark:bg-red-950/30 p-3 text-sm space-y-1">
            <div><strong>Parkland formula:</strong> 4 mL × kg × %TBSA = <strong>{total} mL LR over 24 hours</strong></div>
            <div><strong>First 8 h</strong> (from time of burn): {first8} mL (~<strong>{rateFirst} mL/hr</strong>)</div>
            <div><strong>Next 16 h:</strong> {next16} mL (~<strong>{rateNext} mL/hr</strong>)</div>
          </div>
          <div className="rounded-md bg-muted/40 p-3 text-sm">
            <strong>Plus maintenance (4-2-1):</strong> {maint} mL/hr (D5 ½NS ± 20 mEq KCl/L once UOP established). Consider dextrose in children &lt;30 kg.
          </div>
          <div className="rounded-md bg-muted/40 p-3 text-sm">
            <strong>Titrate to UOP:</strong> target 1-2 mL/kg/hr (infants / children), 0.5-1 mL/kg/hr (adolescents). <strong>Clinical response trumps formula.</strong>
          </div>
        </>
      )}
      <h3 className="text-sm font-semibold">Other pearls</h3>
      <div className="rounded-md bg-muted/40 p-3 text-xs space-y-1">
        <div><strong>Rule of palm:</strong> Patient's palm + fingers ≈ 1% TBSA — good for scattered burns.</div>
        <div><strong>First-degree burns DO NOT count</strong> toward TBSA or Parkland.</div>
        <div><strong>Analgesia:</strong> Morphine 0.05-0.1 mg/kg IV q2h, or fentanyl 1-2 mcg/kg IV q30-60 min.</div>
        <div><strong>Tetanus</strong> prophylaxis if indicated. Tdap/Td ± TIG.</div>
      </div>
      <h3 className="text-sm font-semibold">Burn center referral (ABA)</h3>
      <div className="rounded-md bg-amber-50 dark:bg-amber-950/30 p-3 text-xs text-amber-900 dark:text-amber-100">
        Partial-thickness &gt;10% TBSA · any full-thickness · face/hands/feet/genital/perineum/major joints · electrical/chemical/inhalation · associated trauma · significant comorbidities · pediatric burns in non-pediatric center.
      </div>
      <div className="text-xs text-muted-foreground italic">
        ABA Advanced Burn Life Support 2018 · Parkland formula: Baxter 1968 · Lund-Browder 1944.
      </div>
    </section>
  );
 }
--- a/client/src/pages/CalculatorPanels.tsx
+++ b/client/src/pages/CalculatorPanels.tsx
@ -0,0 +1,366 @@
 // ============================================================
 // CALCULATOR PANELS — BMI / Vitals / Resus / Equipment.
 // Data ported VERBATIM from public/js/calculators.js:
 //   • VITALS_DATA   lines 1703-1831
 //   • RESUS_MEDS     lines 1873-2050
 //   • EQUIP_DATA     lines 2173-2228
 // BMI math + LMS table live in shared/clinical/bmi.ts, verified
 // byte-for-byte by calc-vectors.json (12 BMI cases).
 // ============================================================
 import { useState } from 'react';
 import { computeBmi } from '@shared/clinical/bmi';
 import type { Sex } from '@shared/clinical/fenton';
 import { computeBp, type BpClassification } from '@shared/clinical/bp';
 const card = 'rounded-lg border border-border bg-card p-5 space-y-3';
 const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring';
 const label = 'block text-xs font-medium text-muted-foreground';
 const btnPrimary = 'rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium';
 const btnGhost = 'rounded-md border border-border bg-background px-4 py-2 text-sm font-medium hover:bg-muted';
 const errorBox = 'rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:bg-red-950/30 dark:text-red-200';
 // ── BP Percentile (AAP 2017 Rosner splines) ────────────────
 const BP_CLASS_STYLE: Record<BpClassification, { label: string; color: string; bg: string }> = {
  normal:   { label: 'Normal',              color: '#10b981', bg: '#d1fae5' },
  elevated: { label: 'Elevated',             color: '#f59e0b', bg: '#fef3c7' },
  stage1:   { label: 'Stage 1 Hypertension', color: '#f97316', bg: '#ffedd5' },
  stage2:   { label: 'Stage 2 Hypertension', color: '#ef4444', bg: '#fee2e2' },
 };
 export function BpPanel() {
  const [ageYears, setAgeYears] = useState('');
  const [sex, setSex] = useState<'female' | 'male'>('female');
  const [heightCm, setHeightCm] = useState('');
  const [sbp, setSbp] = useState('');
  const [dbp, setDbp] = useState('');
  const [error, setError] = useState('');
  const [result, setResult] = useState<ReturnType<typeof computeBp> | null>(null);
  function calc() {
    const a = Number.parseFloat(ageYears);
    const h = Number.parseFloat(heightCm);
    const s = Number.parseFloat(sbp);
    const d = Number.parseFloat(dbp);
    if (!Number.isFinite(a) || !Number.isFinite(h) || !Number.isFinite(s) || !Number.isFinite(d)) {
      setError('Fill in all fields.'); setResult(null); return;
    }
    if (a < 1 || a > 17) { setError('Age must be 1-17 years.'); setResult(null); return; }
    if (h < 50 || h > 200) { setError('Height must be 50-200 cm.'); setResult(null); return; }
    setError('');
    setResult(computeBp(a, sex, h, s, d));
  }
  const style = result ? BP_CLASS_STYLE[result.classification] : null;
  return (
    <section className={card} data-testid="calc-panel-bp">
      <h2 className="text-lg font-semibold">BP Percentile (AAP 2017)</h2>
      <div className="grid gap-3 sm:grid-cols-3">
        <div><label className={label}>Age (years)</label><input type="number" min="1" max="17" step="0.1" className={input} value={ageYears} onChange={(e) => setAgeYears(e.target.value)} data-testid="bp-age" /></div>
        <div><label className={label}>Sex</label><select className={input} value={sex} onChange={(e) => setSex(e.target.value as typeof sex)} data-testid="bp-sex"><option value="female">Female</option><option value="male">Male</option></select></div>
        <div><label className={label}>Height (cm)</label><input type="number" min="50" max="200" step="0.1" className={input} value={heightCm} onChange={(e) => setHeightCm(e.target.value)} data-testid="bp-height" /></div>
        <div><label className={label}>SBP (mmHg)</label><input type="number" min="50" max="220" step="1" className={input} value={sbp} onChange={(e) => setSbp(e.target.value)} data-testid="bp-sbp" /></div>
        <div><label className={label}>DBP (mmHg)</label><input type="number" min="30" max="150" step="1" className={input} value={dbp} onChange={(e) => setDbp(e.target.value)} data-testid="bp-dbp" /></div>
      </div>
      <div className="flex gap-2">
        <button type="button" onClick={calc} className={btnPrimary} data-testid="calc-bp-calculate">Calculate</button>
        <button type="button" onClick={() => { setAgeYears(''); setHeightCm(''); setSbp(''); setDbp(''); setResult(null); setError(''); }} className={btnGhost}>Clear</button>
      </div>
      {error && <div className={errorBox}>{error}</div>}
      {result && style && (
        <div
          className="rounded-lg p-4 space-y-2"
          style={{ background: style.bg, borderLeft: `4px solid ${style.color}` }}
          data-testid="calc-bp-result"
        >
          <div className="text-base font-bold" style={{ color: style.color }}>{style.label}</div>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 text-sm">
            <div><span className="text-xs uppercase text-muted-foreground">Systolic</span><div className="font-semibold">{result.sysPercentile}th %ile</div><div className="text-xs text-muted-foreground">{BP_CLASS_STYLE[result.sysClass].label}</div></div>
            <div><span className="text-xs uppercase text-muted-foreground">Diastolic</span><div className="font-semibold">{result.diaPercentile}th %ile</div><div className="text-xs text-muted-foreground">{BP_CLASS_STYLE[result.diaClass].label}</div></div>
            <div><span className="text-xs uppercase text-muted-foreground">Height</span><div className="font-semibold">{result.heightPercentile.toFixed(0)}th %ile</div></div>
            <div><span className="text-xs uppercase text-muted-foreground">Overall</span><div className="font-semibold">{style.label}</div></div>
          </div>
        </div>
      )}
      <div className="text-xs text-muted-foreground italic">
        Flynn JT et al. Clinical Practice Guideline for Screening and Management of High Blood Pressure in Children and Adolescents. Pediatrics 2017;140(3):e20171904.
      </div>
    </section>
  );
 }
 // ── BMI ─────────────────────────────────────────────────────
 export function BmiPanel() {
  const [ageYr, setAgeYr] = useState('');
  const [ageMo, setAgeMo] = useState('');
  const [sex, setSex] = useState<Sex>('male');
  const [weight, setWeight] = useState('');
  const [height, setHeight] = useState('');
  const [error, setError] = useState('');
  const [result, setResult] = useState<ReturnType<typeof computeBmi> | null>(null);
  function calc() {
    const yr = Number.parseFloat(ageYr) || 0;
    const mo = Number.parseInt(ageMo, 10) || 0;
    const age = yr + mo / 12;
    const w = Number.parseFloat(weight);
    const h = Number.parseFloat(height);
    if (!age || !Number.isFinite(w) || w <= 0 || !Number.isFinite(h) || h <= 0) {
      setError('Fill in all fields.'); setResult(null); return;
    }
    if (age < 2 || age > 20) { setError('Age must be 2-20 years.'); setResult(null); return; }
    setError('');
    setResult(computeBmi(w, h, Math.round(age * 12), sex));
  }
  return (
    <section className={card} data-testid="calc-panel-bmi">
      <h2 className="text-lg font-semibold">BMI Percentile (CDC 2000)</h2>
      <div className="grid gap-3 sm:grid-cols-3">
        <div className="grid grid-cols-2 gap-2 sm:col-span-1">
          <div><label className={label}>Age (yr)</label><input type="number" min="2" max="20" step="0.1" className={input} value={ageYr} onChange={(e) => setAgeYr(e.target.value)} data-testid="bmi-age-yr" /></div>
          <div><label className={label}>Months</label><input type="number" min="0" max="11" className={input} value={ageMo} onChange={(e) => setAgeMo(e.target.value)} data-testid="bmi-age-mo" /></div>
        </div>
        <div><label className={label}>Sex</label><select className={input} value={sex} onChange={(e) => setSex(e.target.value as Sex)} data-testid="bmi-sex"><option value="male">Male</option><option value="female">Female</option></select></div>
        <div><label className={label}>Weight (kg)</label><input type="number" min="1" max="200" step="0.1" className={input} value={weight} onChange={(e) => setWeight(e.target.value)} data-testid="bmi-weight" /></div>
        <div className="sm:col-span-1"><label className={label}>Height (cm)</label><input type="number" min="50" max="220" step="0.1" className={input} value={height} onChange={(e) => setHeight(e.target.value)} data-testid="bmi-height" /></div>
      </div>
      <div className="flex gap-2">
        <button type="button" onClick={calc} className={btnPrimary} data-testid="calc-bmi-calculate">Calculate</button>
        <button type="button" onClick={() => { setAgeYr(''); setAgeMo(''); setWeight(''); setHeight(''); setResult(null); setError(''); }} className={btnGhost}>Clear</button>
      </div>
      {error && <div className={errorBox}>{error}</div>}
      {result && (
        <div
          className="rounded-lg p-4 space-y-2"
          style={{ background: result.classification.bg, borderLeft: `4px solid ${result.classification.color}` }}
          data-testid="calc-bmi-result"
        >
          <div className="text-base font-bold" style={{ color: result.classification.color }}>{result.classification.label}</div>
          <div className="text-sm">BMI {result.bmi.toFixed(1)} kg/m² — {result.percentile}th percentile</div>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 text-sm">
            <div><span className="text-xs uppercase text-muted-foreground">BMI</span><div className="font-semibold">{result.bmi.toFixed(1)}</div></div>
            <div><span className="text-xs uppercase text-muted-foreground">Percentile</span><div className="font-semibold">{result.percentile}th</div></div>
            <div><span className="text-xs uppercase text-muted-foreground">Z-Score</span><div className="font-semibold">{result.z.toFixed(2)}</div></div>
            {result.percentile >= 85 && <div><span className="text-xs uppercase text-muted-foreground">% of 95th</span><div className="font-semibold">{result.classification.pctOf95.toFixed(0)}%</div></div>}
          </div>
        </div>
      )}
      <div className="text-xs text-muted-foreground italic">CDC 2000 LMS tables · Kuczmarski et al. Vital Health Stat 11. 2002;(246).</div>
    </section>
  );
 }
 // ── Vitals ──────────────────────────────────────────────────
 // Data ported verbatim from calculators.js:1703-1831.
 interface VitalsEntry {
  label: string;
  hr: { awake: string; sleeping: string };
  rr: string;
  sbp: string;
  dbp: string;
  temp: string;
  weight: string;
  spo2: string;
  notes: string[];
 }
 const VITALS_DATA: Record<string, VitalsEntry> = {
  premie: { label: 'Premie', hr: { awake: '120-170', sleeping: '100-150' }, rr: '40-70', sbp: '55-75', dbp: '35-45', temp: '36.5-37.5', weight: '0.5-2.5 kg', spo2: '88-95% (target)',
    notes: ['HR and RR are highly variable and depend on gestational age', 'BP increases with gestational age and postnatal age', 'Target SpO2 88-95% to reduce retinopathy of prematurity risk', 'Temperature instability is common — use servo-controlled warmers', 'Bradycardia (<100 bpm) and apnea are common in premature infants'] },
  '0-3mo': { label: '0-3 Months', hr: { awake: '100-150', sleeping: '85-135' }, rr: '35-55', sbp: '65-85', dbp: '45-55', temp: '36.5-37.5', weight: '2.5-6 kg', spo2: '>95%',
    notes: ['HR normally increases with crying (up to 180-190 bpm) — this is physiologic', 'Periodic breathing (pauses <10 sec) is normal in neonates', 'Acrocyanosis (blue hands/feet) is normal; central cyanosis is not', 'BP is best measured in the right arm (pre-ductal) in neonates', 'Normal weight loss of 5-7% in first 3-5 days; regain by 10-14 days'] },
  '3-6mo': { label: '3-6 Months', hr: { awake: '90-120', sleeping: '75-110' }, rr: '30-45', sbp: '70-90', dbp: '50-65', temp: '36.5-37.5', weight: '5-8 kg', spo2: '>95%',
    notes: ['Expected weight gain: 20-30 g/day (150-200 g/week)', 'HR gradually decreases as vagal tone matures', 'RR >60 at rest may indicate lower respiratory tract disease', 'BP should be measured with appropriate cuff size (width 40% of arm circumference)'] },
  '6-12mo': { label: '6-12 Months', hr: { awake: '80-120', sleeping: '70-110' }, rr: '25-40', sbp: '80-100', dbp: '55-65', temp: '36.0-37.5', weight: '8-10 kg', spo2: '>95%',
    notes: ['Expected weight: triple birth weight by 12 months (~10 kg average)', 'Weight gain slows to ~10-15 g/day', 'Sinus arrhythmia (HR varies with breathing) is normal', 'Febrile tachycardia: HR increases ~10 bpm per 1 degree C above 37'] },
  '1-3yr': { label: '1-3 Years', hr: { awake: '70-110', sleeping: '60-100' }, rr: '20-30', sbp: '90-105', dbp: '55-70', temp: '36.0-37.5', weight: '10-15 kg', spo2: '>95%',
    notes: ['Expected weight gain: ~200-250 g/month (2-2.5 kg/year)', 'Tachycardia: HR >110 at rest warrants evaluation', 'Tachypnea: RR >30 at rest may indicate respiratory distress', 'BP screening begins at age 3 per AAP 2017 guidelines', 'Estimated weight: 2 x (age in years) + 8'] },
  '3-6yr': { label: '3-6 Years', hr: { awake: '65-110', sleeping: '55-100' }, rr: '20-25', sbp: '95-110', dbp: '60-75', temp: '36.0-37.5', weight: '14-20 kg', spo2: '>95%',
    notes: ['Annual BP screening recommended from age 3', 'Normal BP <90th percentile for age, sex, and height', 'Elevated BP: 90th to <95th percentile (or 120/80 if lower)', 'Estimated weight: 2 x (age in years) + 8', 'ETT size (uncuffed): (age/4) + 4'] },
  '6-12yr': { label: '6-12 Years', hr: { awake: '60-95', sleeping: '50-85' }, rr: '14-22', sbp: '100-120', dbp: '60-75', temp: '36.0-37.5', weight: '20-40 kg', spo2: '>95%',
    notes: ['Resting HR >95 or <60 warrants evaluation', 'BP should be measured at every clinical encounter', 'Stage 1 HTN: >=95th percentile on 3 separate occasions', 'Estimated weight: 3 x (age in years) + 7', 'ETT size (cuffed): (age/4) + 3.5'] },
  '>12yr': { label: '>12 Years', hr: { awake: '55-85', sleeping: '45-75' }, rr: '12-18', sbp: '110-135', dbp: '65-85', temp: '36.0-37.5', weight: '40-80 kg', spo2: '>95%',
    notes: ['Vital signs approach adult values', 'From age 13: use adult BP thresholds (AAP 2017)', 'Normal: <120/<80 mmHg; Elevated: 120-129/<80 mmHg', 'Stage 1 HTN: 130-139/80-89 mmHg; Stage 2 HTN: >=140/>=90 mmHg', 'Orthostatic vitals: measure lying, sitting, standing if dizzy', 'Athletic bradycardia (HR 45-60) may be normal in trained adolescents'] },
 };
 const VITALS_ORDER = ['premie', '0-3mo', '3-6mo', '6-12mo', '1-3yr', '3-6yr', '6-12yr', '>12yr'];
 export function VitalsPanel() {
  const [key, setKey] = useState<string>('1-3yr');
  const v = VITALS_DATA[key];
  return (
    <section className={card} data-testid="calc-panel-vitals">
      <h2 className="text-lg font-semibold">Vital Signs by Age</h2>
      <div className="max-w-xs">
        <label className={label}>Age group</label>
        <select className={input} value={key} onChange={(e) => setKey(e.target.value)} data-testid="vitals-age-select">
          {VITALS_ORDER.map((k) => <option key={k} value={k}>{VITALS_DATA[k].label}</option>)}
        </select>
      </div>
      <div className="grid grid-cols-2 md:grid-cols-4 gap-3 text-sm" data-testid="vitals-result">
        <div className="rounded-md bg-muted/40 p-3"><div className="text-xs uppercase text-muted-foreground">Heart rate (awake)</div><div className="font-semibold">{v.hr.awake} bpm</div></div>
        <div className="rounded-md bg-muted/40 p-3"><div className="text-xs uppercase text-muted-foreground">Heart rate (sleep)</div><div className="font-semibold">{v.hr.sleeping} bpm</div></div>
        <div className="rounded-md bg-muted/40 p-3"><div className="text-xs uppercase text-muted-foreground">Respiratory rate</div><div className="font-semibold">{v.rr} /min</div></div>
        <div className="rounded-md bg-muted/40 p-3"><div className="text-xs uppercase text-muted-foreground">SpO₂</div><div className="font-semibold">{v.spo2}</div></div>
        <div className="rounded-md bg-muted/40 p-3"><div className="text-xs uppercase text-muted-foreground">SBP</div><div className="font-semibold">{v.sbp} mmHg</div></div>
        <div className="rounded-md bg-muted/40 p-3"><div className="text-xs uppercase text-muted-foreground">DBP</div><div className="font-semibold">{v.dbp} mmHg</div></div>
        <div className="rounded-md bg-muted/40 p-3"><div className="text-xs uppercase text-muted-foreground">Temperature</div><div className="font-semibold">{v.temp} °C</div></div>
        <div className="rounded-md bg-muted/40 p-3"><div className="text-xs uppercase text-muted-foreground">Weight</div><div className="font-semibold">{v.weight}</div></div>
      </div>
      <div className="rounded-md bg-blue-50 dark:bg-blue-950/30 p-3 text-xs">
        <div className="font-semibold mb-1">Clinical notes</div>
        <ul className="list-disc pl-5 space-y-0.5">{v.notes.map((n, i) => <li key={i}>{n}</li>)}</ul>
      </div>
      <div className="text-xs text-muted-foreground italic">Harriet Lane Handbook 23rd ed · PALS · AAP 2017 BP guidelines.</div>
    </section>
  );
 }
 // ── Resus Meds ──────────────────────────────────────────────
 // Data + math ported verbatim from calculators.js:1873-2050.
 interface ResusResult { dose: string; extra: string; max: string }
 interface ResusMed { name: string; indication: string; category: 'cardiac' | 'metabolic' | 'reversal'; route: string; calc: (w: number) => ResusResult }
 const RESUS_MEDS: ResusMed[] = [
  { name: 'Adenosine', indication: 'SVT', category: 'cardiac', route: 'IV/IO rapid bolus',
    calc: (w) => { const d1 = +(w * 0.1).toFixed(2); const d2 = +(w * 0.2).toFixed(2); const d3 = +(w * 0.3).toFixed(2); return { dose: `${d1} mg (0.1 mg/kg)`, extra: `May repeat: ${Math.min(d2, 12)} mg (0.2 mg/kg), then ${Math.min(d3, 12)} mg (0.3 mg/kg)`, max: 'Max first dose 6 mg, max subsequent 12 mg' }; } },
  { name: 'Amiodarone', indication: 'VT / VF', category: 'cardiac', route: 'IV/IO',
    calc: (w) => { const d = +(w * 5).toFixed(1); return { dose: `${Math.min(d, 300)} mg (5 mg/kg)`, extra: 'No pulse: push undiluted. Pulse: over 20-60 min. Subsequent max 150 mg.', max: 'Max first 300 mg, max total 15 mg/kg/24hr or 2200 mg' }; } },
  { name: 'Atropine', indication: 'Bradycardia', category: 'cardiac', route: 'IV/IO/IM',
    calc: (w) => { const d = +(w * 0.02).toFixed(3); const ett = `${(w * 0.04).toFixed(3)}-${(w * 0.06).toFixed(3)}`; return { dose: `${Math.min(d, 0.5)} mg (0.02 mg/kg)`, extra: `ETT dose: ${ett} mg (0.04-0.06 mg/kg)`, max: 'Max single 0.5 mg, max total 1 mg' }; } },
  { name: 'Calcium Chloride 10%', indication: 'Hypocalcemia / Hyperkalemia', category: 'metabolic', route: 'IV/IO',
    calc: (w) => { const d = +(w * 20).toFixed(0); return { dose: `${Math.min(d, 1000)} mg (20 mg/kg)`, extra: 'Give slowly. Central line preferred.', max: 'Max 1 g (1000 mg)' }; } },
  { name: 'Calcium Gluconate 10%', indication: 'Hypocalcemia / Hyperkalemia', category: 'metabolic', route: 'IV/IO',
    calc: (w) => { const d = +(w * 60).toFixed(0); return { dose: `${Math.min(d, 3000)} mg (60 mg/kg)`, extra: 'Give slowly over 10-20 min with cardiac monitoring.', max: 'Max 3 g (3000 mg)' }; } },
  { name: 'Dextrose', indication: 'Hypoglycemia', category: 'metabolic', route: 'IV',
    calc: (w) => {
      const grams = `${+(w * 0.5).toFixed(1)}-${+(w * 1).toFixed(1)}`;
      let detail = '';
      if (w < 5)       detail = `D10W: ${(w * 5).toFixed(1)}-${(w * 10).toFixed(1)} mL (5-10 mL/kg)`;
      else if (w < 45) detail = `D25W: ${(w * 2).toFixed(1)}-${(w * 4).toFixed(1)} mL (2-4 mL/kg)`;
      else             detail = `D50W: ${(w * 1).toFixed(1)}-${(w * 2).toFixed(1)} mL (1-2 mL/kg)`;
      return { dose: `${grams} g (0.5-1 g/kg)`, extra: detail, max: 'Max 25 g' };
    } },
  { name: 'Epinephrine', indication: 'Pulseless arrest / Anaphylaxis', category: 'cardiac', route: 'IV/IO/IM/ETT',
    calc: (w) => { const iv = +(w * 0.01).toFixed(3); const ivVol = +(w * 0.1).toFixed(2); const ett = +(w * 0.1).toFixed(2); const im = +(w * 0.01).toFixed(3);
      return { dose: `${Math.min(iv, 1)} mg IV/IO (0.01 mg/kg of 0.1 mg/mL = ${Math.min(ivVol, 10)} mL) q3-5 min`, extra: `ETT: ${Math.min(ett, 2.5)} mg (0.1 mg/kg of 1 mg/mL). Anaphylaxis IM: ${Math.min(im, 0.5)} mg (0.01 mg/kg)`, max: 'Max IV 1 mg, max ETT 2.5 mg, max IM 0.5 mg' }; } },
  { name: 'Hydrocortisone', indication: 'Adrenal crisis', category: 'metabolic', route: 'IV/IM/IO',
    calc: (w) => { const d = +(w * 2).toFixed(1); return { dose: `${Math.min(d, 100)} mg (2 mg/kg)`, extra: 'Stress dosing for adrenal insufficiency.', max: 'Max 100 mg' }; } },
  { name: 'Insulin (Regular)', indication: 'Hyperkalemia', category: 'metabolic', route: 'IV',
    calc: (w) => { const d = +(w * 0.1).toFixed(2); const dex = +(w * 0.5).toFixed(1); return { dose: `${Math.min(d, 5)} units (0.1 units/kg)`, extra: `Give with ${dex} g/kg dextrose (0.5 g/kg). Monitor glucose closely.`, max: 'Max 5 units' }; } },
  { name: 'Lidocaine', indication: 'Antiarrhythmic', category: 'cardiac', route: 'IV/IO',
    calc: (w) => { const d = +(w * 1).toFixed(1); const ett = `${(w * 2).toFixed(1)}-${(w * 3).toFixed(1)}`; return { dose: `${Math.min(d, 100)} mg (1 mg/kg)`, extra: `ETT: ${ett} mg (2-3 mg/kg). May repeat q5 min.`, max: 'Max 100 mg/dose, max total 3 mg/kg' }; } },
  { name: 'Magnesium Sulfate', indication: 'Torsades de Pointes', category: 'cardiac', route: 'IV/IO',
    calc: (w) => { const d = +(w * 50).toFixed(0); return { dose: `${Math.min(d, 2000)} mg (50 mg/kg)`, extra: 'Give over 10-20 min (faster if pulseless).', max: 'Max 2 g (2000 mg)' }; } },
  { name: 'Naloxone', indication: 'Opioid overdose', category: 'reversal', route: 'IV/IO/IM/IN/ETT',
    calc: (w) => { const partial = `${+(w * 0.001).toFixed(4)}-${+(w * 0.005).toFixed(4)}`; const full = +(w * 0.1).toFixed(3); return { dose: `Partial: ${partial} mg (0.001-0.005 mg/kg)`, extra: `Full reversal: ${Math.min(full, 2)} mg (0.1 mg/kg)`, max: 'Max partial first dose 0.1 mg, max full 2 mg' }; } },
  { name: 'Sodium Bicarbonate', indication: 'Metabolic acidosis', category: 'metabolic', route: 'IV/IO',
    calc: (w) => { const d = +(w * 1).toFixed(1); return { dose: `${Math.min(d, 50)} mEq (1 mEq/kg)`, extra: w < 10 ? 'Dilute to 0.5 mEq/mL (use 4.2% solution) for neonates/small infants.' : 'Use 8.4% solution (1 mEq/mL).', max: 'Max 50 mEq' }; } },
 ];
 const catColor: Record<ResusMed['category'], string> = { cardiac: '#ef4444', metabolic: '#3b82f6', reversal: '#10b981' };
 const catLabel: Record<ResusMed['category'], string> = { cardiac: 'Cardiac', metabolic: 'Metabolic', reversal: 'Reversal' };
 export function ResusPanel() {
  const [weight, setWeight] = useState('');
  const wt = Number.parseFloat(weight);
  const valid = Number.isFinite(wt) && wt > 0;
  return (
    <section className={card} data-testid="calc-panel-resus">
      <h2 className="text-lg font-semibold">Resus Medications</h2>
      <div className="max-w-xs">
        <label className={label}>Weight (kg)</label>
        <input type="number" min="0.5" max="100" step="0.1" className={input} value={weight} onChange={(e) => setWeight(e.target.value)} data-testid="resus-weight" />
      </div>
      {!valid ? <p className="text-xs text-destructive">Enter weight (kg) to see doses.</p> : (
        <>
          <div className="text-sm font-semibold">Doses for {wt} kg patient</div>
          <div className="flex gap-3 flex-wrap text-xs">
            {(['cardiac', 'metabolic', 'reversal'] as const).map((c) => (
              <span key={c} className="inline-flex items-center gap-1"><span className="w-2.5 h-2.5 rounded-full" style={{ background: catColor[c] }} />{catLabel[c]}</span>
            ))}
          </div>
          <div className="grid gap-3 grid-cols-1 md:grid-cols-2 lg:grid-cols-3" data-testid="resus-result">
            {RESUS_MEDS.map((med) => {
              const r = med.calc(wt);
              const color = catColor[med.category];
              return (
                <div key={med.name} className="rounded-lg border bg-card overflow-hidden" style={{ borderColor: color + '55' }}>
                  <div className="px-3 py-2 border-b" style={{ background: color + '10', borderColor: color + '22' }}>
                    <div className="text-sm font-bold" style={{ color }}>{med.name}</div>
                    <div className="text-xs text-muted-foreground">{med.indication}</div>
                  </div>
                  <div className="p-3 text-sm space-y-1">
                    <div><strong>Dose:</strong> {r.dose}</div>
                    <div className="text-xs text-muted-foreground">{r.extra}</div>
                    <div className="text-xs text-muted-foreground"><strong>Max:</strong> {r.max}</div>
                    <div className="text-xs text-muted-foreground"><strong>Route:</strong> {med.route}</div>
                  </div>
                </div>
              );
            })}
          </div>
          <div className="rounded-md bg-amber-50 dark:bg-amber-950/30 p-3 text-xs text-amber-900 dark:text-amber-100">
            <strong>Disclaimer:</strong> Always verify doses against institutional protocols and current guidelines.
          </div>
        </>
      )}
    </section>
  );
 }
 // ── Equipment ───────────────────────────────────────────────
 // Data ported verbatim from calculators.js:2173-2228.
 interface EquipEntry {
  label: string;
  bvm: string; nasal: string; oral: string; blade: string;
  ett: string; lma: string; glidescope: string;
  iv: string; cvl: string; ngt: string; chest: string; foley: string;
 }
 const EQUIP_DATA: Record<string, EquipEntry> = {
  premie:   { label: 'Premie (1-3 kg)',         bvm: 'Infant',                nasal: '12 Fr',      oral: 'Infant',       blade: 'Miller 0',                ett: '2.5-3.0', lma: '1',    glidescope: '1',       iv: '22-24 ga', cvl: '3 Fr',    ngt: '5 Fr',    chest: '10-12 Fr', foley: '6 Fr' },
  newborn:  { label: 'Newborn (2-4 kg)',        bvm: 'Infant',                nasal: '14-16 Fr',   oral: 'Small 50 mm',  blade: 'Miller 0',                ett: '3.0-3.5', lma: '1',    glidescope: '1',       iv: '22-24 ga', cvl: '3-4 Fr',  ngt: '5-8 Fr',  chest: '10-12 Fr', foley: '6 Fr' },
  '6mo':    { label: '6 months (6-8 kg)',       bvm: 'Infant',                nasal: '14-16 Fr',   oral: 'Small 60 mm',  blade: 'Miller 1',                ett: '3.5',     lma: '1.5',  glidescope: '2',       iv: '20-24 ga', cvl: '4 Fr',    ngt: '8 Fr',    chest: '12-18 Fr', foley: '8 Fr' },
  '1yr':    { label: '1 year (10 kg)',           bvm: 'Small child',           nasal: '14-18 Fr',   oral: 'Small 60 mm',  blade: 'Miller 1 / MAC 2',        ett: '4.0',     lma: '2',    glidescope: '2',       iv: '20-24 ga', cvl: '4-5 Fr',  ngt: '10 Fr',   chest: '16-20 Fr', foley: '8 Fr' },
  '2-3yr':  { label: '2-3 years (12-16 kg)',    bvm: 'Small child',           nasal: '14-18 Fr',   oral: 'Small 70 mm',  blade: 'Miller 1 / MAC 2',        ett: '4.0-4.5', lma: '2',    glidescope: '2',       iv: '18-22 ga', cvl: '4-5 Fr',  ngt: '10-12 Fr', chest: '16-24 Fr', foley: '8 Fr' },
  '4-6yr':  { label: '4-6 years (20-25 kg)',    bvm: 'Child',                  nasal: '16-20 Fr',   oral: 'Small 70-80 mm', blade: 'Miller 2 / MAC 2',      ett: '4.5-5.0', lma: '2.5',  glidescope: '3',       iv: '18-22 ga', cvl: '5 Fr',    ngt: '12-14 Fr', chest: '20-28 Fr', foley: '8 Fr' },
  '7-10yr': { label: '7-10 years (25-35 kg)',    bvm: 'Child / Small adult',   nasal: '18-22 Fr',   oral: 'Medium 80-90 mm', blade: 'Miller 2 / MAC 2',     ett: '5.5-6.0', lma: '2.5-3', glidescope: '3',      iv: '18-22 ga', cvl: '5 Fr',    ngt: '12-14 Fr', chest: '20-32 Fr', foley: '8 Fr' },
  '11-15yr': { label: '11-15 years (40-50 kg)',  bvm: 'Adult',                  nasal: '22-36 Fr',   oral: 'Medium 90 mm', blade: 'Miller 2 / MAC 3',       ett: '6.0-6.5', lma: '3',    glidescope: '3 or 4',  iv: '18-20 ga', cvl: '7 Fr',    ngt: '14-18 Fr', chest: '28-38 Fr', foley: '10 Fr' },
  '16yr':   { label: '16+ years (>50 kg)',      bvm: 'Adult',                  nasal: '22-36 Fr',   oral: 'Medium 90 mm', blade: 'Miller 2 / MAC 3',       ett: '7.0-8.0', lma: '4',    glidescope: '3 or 4',  iv: '18-20 ga', cvl: '7 Fr',    ngt: '14-18 Fr', chest: '28-42 Fr', foley: '12 Fr' },
 };
 const EQUIP_ORDER = ['premie', 'newborn', '6mo', '1yr', '2-3yr', '4-6yr', '7-10yr', '11-15yr', '16yr'];
 export function EquipmentPanel() {
  const [key, setKey] = useState('1yr');
  const e = EQUIP_DATA[key];
  const rows: Array<[string, string]> = [
    ['BVM',              e.bvm],
    ['Nasopharyngeal',   e.nasal],
    ['Oropharyngeal',    e.oral],
    ['Laryngoscope',     e.blade],
    ['ETT',              e.ett],
    ['LMA',              e.lma],
    ['Glidescope',       e.glidescope],
    ['IV',               e.iv],
    ['Central line',     e.cvl],
    ['NG tube',          e.ngt],
    ['Chest tube',       e.chest],
    ['Foley',            e.foley],
  ];
  return (
    <section className={card} data-testid="calc-panel-equipment">
      <h2 className="text-lg font-semibold">Equipment Sizing</h2>
      <div className="max-w-xs">
        <label className={label}>Age / weight band</label>
        <select className={input} value={key} onChange={(e2) => setKey(e2.target.value)} data-testid="equip-age-select">
          {EQUIP_ORDER.map((k) => <option key={k} value={k}>{EQUIP_DATA[k].label}</option>)}
        </select>
      </div>
      <div className="grid grid-cols-2 md:grid-cols-3 gap-3 text-sm" data-testid="equip-result">
        {rows.map(([lbl, val]) => (
          <div key={lbl} className="rounded-md bg-muted/40 p-3"><div className="text-xs uppercase text-muted-foreground">{lbl}</div><div className="font-semibold">{val}</div></div>
        ))}
      </div>
      <div className="text-xs text-muted-foreground italic">Harriet Lane Handbook · PALS · Broselow cross-reference.</div>
    </section>
  );
 }
--- a/client/src/pages/Calculators.tsx
+++ b/client/src/pages/Calculators.tsx
@ -0,0 +1,616 @@
 // ============================================================
 // CALCULATORS — incremental React port.
 // Low-risk pure formulas run here; high-risk table-driven calculators
 // stay in the vanilla viewer until legacy vectors land.
 //
 // WHY this is gated on test vectors (from the migration checkpoint):
 //   • AAP 2017 BP percentile uses Rosner quantile splines with long
 //     hard-coded coefficient arrays.
 //   • Fenton 2013 LMS preterm growth carries 210 validated cases.
 //   • AAP 2022 bilirubin phototherapy + exchange: per-week risk
 //     curves, 1190 validated cases.
 //   • Bhutani nomogram risk zones.
 //   • APLS + Best Guess weight-for-age.
 //
 // Per the checkpoint: "An LLM will sometimes 'simplify' a long array
 // of numbers and silently break it — don't let that happen." Every
 // calculator needs a JSON vector file (~20 known inputs + expected
 // outputs captured from public/js/calculators.js) before its React
 // port lands, and the port must match every vector byte-for-byte.
 //
 // Pill order + labels match public/components/calculators.html.
 // ============================================================
 import { useState } from 'react';
 import {
  calculateGcs,
  calculateMostellerBsa,
  calculateWeightBasedDose,
 } from '@shared/clinical/calculators';
 import { classifyBhutani, classifyAapBili, type BiliRisk } from '@shared/clinical/bilirubin';
 import { fentonWeightForAge, classifySizeForAge, type Sex } from '@shared/clinical/fenton';
 import { BmiPanel, VitalsPanel, ResusPanel, EquipmentPanel, BpPanel } from './CalculatorPanels';
 const card = 'rounded-lg border border-border bg-card p-5 space-y-3';
 const btnPrimary = 'rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium';
 const btnGhost = 'rounded-md border border-border bg-background px-4 py-2 text-sm font-medium hover:bg-muted';
 const field = 'space-y-1';
 const label = 'block text-xs font-medium text-muted-foreground';
 const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring';
 const resultBox = 'rounded-lg border border-border bg-muted/40 p-4';
 const errorBox = 'rounded-md border border-red-200 bg-red-50 p-3 text-sm text-red-700 dark:bg-red-950/30 dark:text-red-200';
 interface Pill {
  id: string;
  label: string;
  summary: string;
  source: string; // where the formulas live
  ported?: boolean;
 }
 const PILLS: Pill[] = [
  { id: 'bp',        label: 'BP Percentile',       summary: 'AAP 2017 age/height/sex-adjusted BP percentiles (Rosner quantile splines).', source: 'AAP 2017 (Flynn) — Rosner splines', ported: true },
  { id: 'bmi',       label: 'BMI Percentile',      summary: 'BMI-for-age (CDC 2000 z-score tables).', source: 'CDC 2000 LMS', ported: true },
  { id: 'growth',    label: 'Growth Charts',       summary: 'Fenton 2013 preterm weight-for-GA with Z-score + percentile + SGA/AGA/LGA classification.', source: 'Fenton 2013 LMS', ported: true },
  { id: 'bili',      label: 'Bilirubin',           summary: 'AAP 2022 phototherapy + exchange thresholds and Bhutani nomogram risk zones.', source: 'AAP 2022 (Kemper) + Bhutani 1999', ported: true },
  { id: 'vitals',    label: 'Vital Signs',         summary: 'Normal HR / RR / BP ranges by age.', source: 'Harriet Lane + PALS + AHA', ported: true },
  { id: 'bsa',       label: 'Body Surface Area',   summary: 'Mosteller body surface area formula.', source: 'Mosteller 1987', ported: true },
  { id: 'dose',      label: 'Weight-Based Dosing', summary: 'Generic mg/kg dosing with optional max-dose cap and concentration conversion.', source: 'Legacy calculator formula', ported: true },
  { id: 'resus',     label: 'Resus Meds',          summary: 'Code-cart dosing (epinephrine, amiodarone, atropine, etc.).', source: 'PALS', ported: true },
  { id: 'gcs',       label: 'GCS',                 summary: 'Child/adult and infant Glasgow Coma Scale variants.', source: 'Teasdale + pediatric modification', ported: true },
  { id: 'equipment', label: 'Equipment',           summary: 'ETT size, blade, NG, Foley, suction by age/weight.', source: 'PALS + Broselow cross-reference', ported: true },
 ];
 function parseOptionalNumber(value: string): number | null {
  if (!value.trim()) return null;
  const parsed = Number(value);
  return Number.isFinite(parsed) ? parsed : null;
 }
 function FormField({
  id,
  labelText,
  value,
  onChange,
  min,
  max,
  step = '0.1',
  placeholder,
 }: {
  id: string;
  labelText: string;
  value: string;
  onChange: (value: string) => void;
  min?: string;
  max?: string;
  step?: string;
  placeholder?: string;
 }) {
  return (
    <div className={field}>
      <label htmlFor={id} className={label}>{labelText}</label>
      <input
        id={id}
        type="number"
        min={min}
        max={max}
        step={step}
        value={value}
        onChange={(event) => onChange(event.target.value)}
        placeholder={placeholder}
        className={input}
      />
    </div>
  );
 }
 function BsaPanel() {
  const [weight, setWeight] = useState('');
  const [height, setHeight] = useState('');
  const [result, setResult] = useState<number | null>(null);
  const [error, setError] = useState('');
  function calculate() {
    const next = calculateMostellerBsa(Number(weight), Number(height));
    if (next == null) {
      setError('Enter a valid weight and height.');
      setResult(null);
      return;
    }
    setError('');
    setResult(next);
  }
  function clear() {
    setWeight('');
    setHeight('');
    setResult(null);
    setError('');
  }
  return (
    <section className={card} data-testid="calc-panel-bsa">
      <h2 className="text-lg font-semibold">Body Surface Area</h2>
      <p className="text-sm text-muted-foreground">
        Mosteller formula: BSA (m2) = sqrt(height(cm) x weight(kg) / 3600).
      </p>
      <div className="grid gap-3 sm:grid-cols-2">
        <FormField id="react-bsa-weight" labelText="Weight (kg)" value={weight} onChange={setWeight} min="1" max="200" placeholder="20" />
        <FormField id="react-bsa-height" labelText="Height (cm)" value={height} onChange={setHeight} min="30" max="220" placeholder="110" />
      </div>
      <div className="flex gap-2">
        <button type="button" onClick={calculate} className={btnPrimary} data-testid="calc-bsa-calculate">Calculate</button>
        <button type="button" onClick={clear} className={btnGhost}>Clear</button>
      </div>
      {error ? <div className={errorBox}>{error}</div> : null}
      {result == null ? null : (
        <div className={resultBox} data-testid="calc-bsa-result">
          <div className="text-xs uppercase tracking-wide text-muted-foreground">Mosteller BSA</div>
          <div className="text-2xl font-semibold">{result.toFixed(3)} m²</div>
          <div className="text-sm text-muted-foreground">{weight} kg, {height} cm</div>
        </div>
      )}
    </section>
  );
 }
 function DosePanel() {
  const [weight, setWeight] = useState('');
  const [dosePerKg, setDosePerKg] = useState('');
  const [frequency, setFrequency] = useState('1');
  const [maxDose, setMaxDose] = useState('');
  const [concentration, setConcentration] = useState('');
  const [result, setResult] = useState<ReturnType<typeof calculateWeightBasedDose>>(null);
  const [error, setError] = useState('');
  function calculate() {
    const next = calculateWeightBasedDose({
      weightKg: Number(weight),
      dosePerKg: Number(dosePerKg),
      frequencyPerDay: Number(frequency),
      maxSingleDoseMg: parseOptionalNumber(maxDose),
      concentrationMgPerMl: parseOptionalNumber(concentration),
    });
    if (next == null) {
      setError('Enter a valid weight, mg/kg dose, and frequency.');
      setResult(null);
      return;
    }
    setError('');
    setResult(next);
  }
  function clear() {
    setWeight('');
    setDosePerKg('');
    setFrequency('1');
    setMaxDose('');
    setConcentration('');
    setResult(null);
    setError('');
  }
  return (
    <section className={card} data-testid="calc-panel-dose">
      <h2 className="text-lg font-semibold">Weight-Based Dosing</h2>
      <p className="text-sm text-muted-foreground">
        Generic mg/kg calculator. Always verify medication-specific dosing against formulary and local policy.
      </p>
      <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
        <FormField id="react-dose-weight" labelText="Patient Weight (kg)" value={weight} onChange={setWeight} min="1" max="200" placeholder="15" />
        <FormField id="react-dose-per-kg" labelText="Dose (mg/kg)" value={dosePerKg} onChange={setDosePerKg} min="0.01" step="0.01" placeholder="10" />
        <div className={field}>
          <label htmlFor="react-dose-frequency" className={label}>Frequency</label>
          <select id="react-dose-frequency" value={frequency} onChange={(event) => setFrequency(event.target.value)} className={input}>
            <option value="1">Once daily</option>
            <option value="2">Twice daily (BID)</option>
            <option value="3">Three times daily (TID)</option>
            <option value="4">Four times daily (QID)</option>
            <option value="6">Every 4 hours (Q4H)</option>
          </select>
        </div>
        <FormField id="react-dose-max" labelText="Max single dose (mg, optional)" value={maxDose} onChange={setMaxDose} min="0" step="1" placeholder="500" />
        <FormField id="react-dose-concentration" labelText="Concentration (mg/mL, optional)" value={concentration} onChange={setConcentration} min="0" placeholder="40" />
      </div>
      <div className="flex gap-2">
        <button type="button" onClick={calculate} className={btnPrimary} data-testid="calc-dose-calculate">Calculate</button>
        <button type="button" onClick={clear} className={btnGhost}>Clear</button>
      </div>
      {error ? <div className={errorBox}>{error}</div> : null}
      {result == null ? null : (
        <div className={resultBox} data-testid="calc-dose-result">
          <div className="grid gap-3 sm:grid-cols-3">
            <div>
              <div className="text-xs uppercase tracking-wide text-muted-foreground">Single Dose</div>
              <div className="text-xl font-semibold">{result.singleDoseMg.toFixed(1)} mg</div>
              {result.capped ? <div className="text-xs text-red-600">Capped at max dose</div> : null}
            </div>
            <div>
              <div className="text-xs uppercase tracking-wide text-muted-foreground">Daily Total</div>
              <div className="text-xl font-semibold">{result.dailyDoseMg.toFixed(1)} mg/day</div>
              <div className="text-xs text-muted-foreground">x {result.frequencyPerDay}/day</div>
            </div>
            <div>
              <div className="text-xs uppercase tracking-wide text-muted-foreground">Volume</div>
              <div className="text-xl font-semibold">{result.volumeMl == null ? 'n/a' : `${result.volumeMl.toFixed(1)} mL`}</div>
              <div className="text-xs text-muted-foreground">per dose</div>
            </div>
          </div>
        </div>
      )}
    </section>
  );
 }
 const GCS_OPTIONS = {
  child: {
    eye: [
      ['4', '4 - Spontaneous'],
      ['3', '3 - To speech'],
      ['2', '2 - To pain'],
      ['1', '1 - None'],
    ],
    verbal: [
      ['5', '5 - Oriented'],
      ['4', '4 - Confused'],
      ['3', '3 - Inappropriate words'],
      ['2', '2 - Incomprehensible sounds'],
      ['1', '1 - None'],
    ],
    motor: [
      ['6', '6 - Obeys commands'],
      ['5', '5 - Localizes pain'],
      ['4', '4 - Withdraws to pain'],
      ['3', '3 - Abnormal flexion'],
      ['2', '2 - Abnormal extension'],
      ['1', '1 - None'],
    ],
  },
  infant: {
    eye: [
      ['4', '4 - Spontaneous'],
      ['3', '3 - To speech/sound'],
      ['2', '2 - To painful stimuli'],
      ['1', '1 - None'],
    ],
    verbal: [
      ['5', '5 - Coos/babbles'],
      ['4', '4 - Irritable cry'],
      ['3', '3 - Cries to pain'],
      ['2', '2 - Moans to pain'],
      ['1', '1 - None'],
    ],
    motor: [
      ['6', '6 - Normal spontaneous movement'],
      ['5', '5 - Withdraws to touch'],
      ['4', '4 - Withdraws to pain'],
      ['3', '3 - Abnormal flexion'],
      ['2', '2 - Abnormal extension'],
      ['1', '1 - None'],
    ],
  },
 } as const;
 function GcsSelect({
  id,
  labelText,
  value,
  options,
  onChange,
 }: {
  id: string;
  labelText: string;
  value: string;
  options: readonly (readonly [string, string])[];
  onChange: (value: string) => void;
 }) {
  return (
    <div className={field}>
      <label htmlFor={id} className={label}>{labelText}</label>
      <select id={id} value={value} onChange={(event) => onChange(event.target.value)} className={input}>
        {options.map(([optionValue, text]) => (
          <option key={optionValue} value={optionValue}>{text}</option>
        ))}
      </select>
    </div>
  );
 }
 function GcsPanel() {
  const [scale, setScale] = useState<'child' | 'infant'>('child');
  const [eye, setEye] = useState('4');
  const [verbal, setVerbal] = useState('5');
  const [motor, setMotor] = useState('6');
  const result = calculateGcs(Number(eye), Number(verbal), Number(motor));
  const options = GCS_OPTIONS[scale];
  function switchScale(next: 'child' | 'infant') {
    setScale(next);
    setEye('4');
    setVerbal('5');
    setMotor('6');
  }
  return (
    <section className={card} data-testid="calc-panel-gcs">
      <h2 className="text-lg font-semibold">Glasgow Coma Scale</h2>
      <p className="text-sm text-muted-foreground">
        Select responses to calculate child/adult or infant-modified GCS. Total score 3-15.
      </p>
      <div className="flex flex-wrap gap-2">
        <button
          type="button"
          onClick={() => switchScale('child')}
          className={'px-3 py-1.5 rounded-full text-xs font-medium border ' + (scale === 'child' ? 'bg-primary text-primary-foreground border-primary' : 'bg-muted border-border')}
        >
          Child / Adult
        </button>
        <button
          type="button"
          onClick={() => switchScale('infant')}
          className={'px-3 py-1.5 rounded-full text-xs font-medium border ' + (scale === 'infant' ? 'bg-primary text-primary-foreground border-primary' : 'bg-muted border-border')}
        >
          Infant
        </button>
      </div>
      <div className="grid gap-3 sm:grid-cols-3">
        <GcsSelect id="react-gcs-eye" labelText="Eye Opening" value={eye} options={options.eye} onChange={setEye} />
        <GcsSelect id="react-gcs-verbal" labelText="Verbal Response" value={verbal} options={options.verbal} onChange={setVerbal} />
        <GcsSelect id="react-gcs-motor" labelText="Motor Response" value={motor} options={options.motor} onChange={setMotor} />
      </div>
      {result == null ? null : (
        <div className={resultBox} data-testid="calc-gcs-result">
          <div className="text-xs uppercase tracking-wide text-muted-foreground">{scale === 'infant' ? 'Infant-modified GCS' : 'Child / adult GCS'}</div>
          <div className="text-3xl font-semibold">GCS: {result.total}/15</div>
          <div className="text-sm text-muted-foreground">{result.severity}</div>
          <div className="mt-2 text-xs text-muted-foreground">Interpretation: 13-15 Mild, 9-12 Moderate, 3-8 Severe/Coma.</div>
        </div>
      )}
    </section>
  );
 }
 function LegacyPanel({ pill }: { pill: Pill }) {
  return (
    <section className={card} data-testid={'calc-panel-' + pill.id}>
      <h2 className="text-lg font-semibold">{pill.label}</h2>
      <p className="text-sm text-muted-foreground">{pill.summary}</p>
      <div className="rounded-md border border-amber-300 bg-amber-50 dark:bg-amber-950/30 p-3 text-sm space-y-2">
        <p className="text-amber-900 dark:text-amber-100">
          <strong>Source of truth:</strong> {pill.source}.
        </p>
        <p className="text-amber-900 dark:text-amber-100">
          This calculator runs in the legacy viewer. A React port is gated on capturing test vectors
          from the vanilla implementation so the numerical output can be verified byte-for-byte —
          the migration checkpoint specifically flags this class of data as the one an LLM is most
          likely to silently simplify.
        </p>
      </div>
      <a href="/#calculators" className={btnPrimary + ' inline-block'}>
        Open in legacy viewer
      </a>
    </section>
  );
 }
 function BiliPanel() {
  const [mode, setMode] = useState<'aap' | 'bhutani'>('aap');
  const [ga, setGa] = useState('38');
  const [hours, setHours] = useState('');
  const [tsb, setTsb] = useState('');
  const [risk, setRisk] = useState<BiliRisk>('low');
  const [aapResult, setAapResult] = useState<ReturnType<typeof classifyAapBili> | null>(null);
  const [bhutResult, setBhutResult] = useState<ReturnType<typeof classifyBhutani> | null>(null);
  const [error, setError] = useState('');
  function calc() {
    const hoursNum = Number(hours);
    const tsbNum = Number(tsb);
    if (!Number.isFinite(hoursNum) || !Number.isFinite(tsbNum) || hoursNum <= 0 || tsbNum <= 0) {
      setError('Enter hours of life and TSB (mg/dL).');
      setAapResult(null);
      setBhutResult(null);
      return;
    }
    setError('');
    if (mode === 'aap') {
      const gaNum = Number(ga);
      if (!Number.isFinite(gaNum) || gaNum < 35) {
        setError('AAP 2022 thresholds apply to GA ≥35 weeks.');
        setAapResult(null);
        return;
      }
      setAapResult(classifyAapBili(gaNum, hoursNum, tsbNum, risk));
      setBhutResult(null);
    } else {
      setBhutResult(classifyBhutani(hoursNum, tsbNum));
      setAapResult(null);
    }
  }
  const statusColor = aapResult
    ? aapResult.status === 'Above Exchange'   ? 'text-red-800 bg-red-100'
    : aapResult.status === 'Above Phototherapy' ? 'text-red-700 bg-red-50'
    : 'text-green-700 bg-green-50'
    : '';
  const zoneColor = bhutResult
    ? bhutResult.zone === 'High-Risk'          ? 'text-red-800 bg-red-100'
    : bhutResult.zone === 'High-Intermediate' ? 'text-orange-700 bg-orange-50'
    : bhutResult.zone === 'Low-Intermediate'  ? 'text-amber-700 bg-amber-50'
    : 'text-green-700 bg-green-50'
    : '';
  return (
    <section className={card} data-testid="calc-panel-bili">
      <h2 className="text-lg font-semibold">Bilirubin</h2>
      <div className="flex gap-2">
        <button type="button" onClick={() => setMode('aap')}      className={'px-3 py-1 rounded text-xs font-medium ' + (mode === 'aap' ? 'bg-primary text-primary-foreground' : 'bg-muted')} data-testid="bili-mode-aap">AAP 2022 Phototherapy</button>
        <button type="button" onClick={() => setMode('bhutani')} className={'px-3 py-1 rounded text-xs font-medium ' + (mode === 'bhutani' ? 'bg-primary text-primary-foreground' : 'bg-muted')} data-testid="bili-mode-bhutani">Bhutani Nomogram</button>
      </div>
      <div className="grid gap-3 sm:grid-cols-2">
        {mode === 'aap' && (
          <>
            <div className={field}>
              <label htmlFor="bili-ga" className={label}>GA (weeks)</label>
              <select id="bili-ga" className={input} value={ga} onChange={(e) => setGa(e.target.value)}>
                {[35, 36, 37, 38, 39, 40].map((g) => <option key={g} value={g}>{g}{g === 40 ? '+' : ''}</option>)}
              </select>
            </div>
            <div className={field}>
              <label htmlFor="bili-risk" className={label}>Neurotoxicity risk</label>
              <select id="bili-risk" className={input} value={risk} onChange={(e) => setRisk(e.target.value as BiliRisk)}>
                <option value="low">No risk factors</option>
                <option value="medium">With risk factors</option>
              </select>
            </div>
          </>
        )}
        <FormField id="bili-hours" labelText="Age (hours)" value={hours} onChange={setHours} min="0" max="336" placeholder="48" />
        <FormField id="bili-tsb"   labelText="TSB (mg/dL)" value={tsb}   onChange={setTsb}   min="0" max="50" placeholder="15" />
      </div>
      <div className="flex gap-2">
        <button type="button" className={btnPrimary} onClick={calc} data-testid="calc-bili-calculate">Calculate</button>
        <button type="button" className={btnGhost} onClick={() => { setHours(''); setTsb(''); setAapResult(null); setBhutResult(null); setError(''); }}>Clear</button>
      </div>
      {error && <div className={errorBox}>{error}</div>}
      {aapResult && (
        <div className={resultBox + ' space-y-2'} data-testid="calc-bili-aap-result">
          <div className={'inline-block px-2 py-1 rounded text-sm font-bold ' + statusColor}>{aapResult.status}</div>
          <div className="text-sm">TSB {tsb} mg/dL at {hours} hours of life (GA {ga}w {risk === 'medium' ? 'with' : 'without'} risk factors)</div>
          <div className="grid grid-cols-2 gap-3 text-sm">
            <div><span className="text-xs uppercase text-muted-foreground">Phototherapy</span><div className="font-semibold">{aapResult.photoThreshold.toFixed(1)} mg/dL</div></div>
            <div><span className="text-xs uppercase text-muted-foreground">Exchange</span><div className="font-semibold text-red-800">{aapResult.exchangeThreshold.toFixed(1)} mg/dL</div></div>
          </div>
          <div className="text-xs text-muted-foreground italic">AAP 2022 CPG (Kemper et al.). Always use clinical judgment.</div>
        </div>
      )}
      {bhutResult && (
        <div className={resultBox + ' space-y-2'} data-testid="calc-bili-bhutani-result">
          <div className={'inline-block px-2 py-1 rounded text-sm font-bold ' + zoneColor}>{bhutResult.zone} Zone</div>
          <div className="text-sm">TSB {tsb} mg/dL at {hours} hours of life</div>
          <div className="grid grid-cols-3 gap-3 text-sm">
            <div><span className="text-xs uppercase text-muted-foreground">40th %ile</span><div className="font-semibold">{bhutResult.p40.toFixed(1)}</div></div>
            <div><span className="text-xs uppercase text-muted-foreground">75th %ile</span><div className="font-semibold">{bhutResult.p75.toFixed(1)}</div></div>
            <div><span className="text-xs uppercase text-muted-foreground">95th %ile</span><div className="font-semibold">{bhutResult.p95.toFixed(1)}</div></div>
          </div>
          <div className="text-xs text-muted-foreground italic">Bhutani 1999 hour-specific risk nomogram for infants ≥35 weeks GA.</div>
        </div>
      )}
    </section>
  );
 }
 function GrowthPanel() {
  const [sex, setSex] = useState<Sex>('male');
  const [ga, setGa] = useState('');
  const [weight, setWeight] = useState('');
  const [result, setResult] = useState<ReturnType<typeof fentonWeightForAge> | null>(null);
  const [error, setError] = useState('');
  function calc() {
    const gaNum = Number(ga);
    const wtNum = Number(weight);
    if (!Number.isFinite(gaNum) || !Number.isFinite(wtNum) || gaNum < 22 || gaNum > 50 || wtNum <= 0) {
      setError('Enter GA (22-50 weeks) and weight (grams).');
      setResult(null);
      return;
    }
    setError('');
    setResult(fentonWeightForAge(gaNum, wtNum, sex));
  }
  const classification = result ? classifySizeForAge(result.percentile) : null;
  const classColor = classification === 'SGA' ? 'text-orange-700 bg-orange-50'
    : classification === 'LGA' ? 'text-amber-700 bg-amber-50'
    : 'text-green-700 bg-green-50';
  return (
    <section className={card} data-testid="calc-panel-growth">
      <h2 className="text-lg font-semibold">Fenton 2013 Preterm Growth</h2>
      <p className="text-sm text-muted-foreground">Weight-for-gestational-age Z-score + percentile + SGA/AGA/LGA classification.</p>
      <div className="grid gap-3 sm:grid-cols-3">
        <div className={field}>
          <label htmlFor="fenton-sex" className={label}>Sex</label>
          <select id="fenton-sex" className={input} value={sex} onChange={(e) => setSex(e.target.value as Sex)}>
            <option value="male">Male</option>
            <option value="female">Female</option>
          </select>
        </div>
        <FormField id="fenton-ga"     labelText="GA (weeks)"   value={ga}     onChange={setGa}     min="22" max="50"   step="0.1" placeholder="32" />
        <FormField id="fenton-weight" labelText="Weight (g)"  value={weight} onChange={setWeight} min="200" max="7000" step="10"  placeholder="1500" />
      </div>
      <div className="flex gap-2">
        <button type="button" className={btnPrimary} onClick={calc} data-testid="calc-fenton-calculate">Calculate</button>
        <button type="button" className={btnGhost} onClick={() => { setGa(''); setWeight(''); setResult(null); setError(''); }}>Clear</button>
      </div>
      {error && <div className={errorBox}>{error}</div>}
      {result && classification && (
        <div className={resultBox + ' space-y-2'} data-testid="calc-fenton-result">
          <div className={'inline-block px-2 py-1 rounded text-sm font-bold ' + classColor}>{classification}</div>
          <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 text-sm">
            <div><span className="text-xs uppercase text-muted-foreground">Percentile</span><div className="font-semibold">{result.percentile.toFixed(1)}%</div></div>
            <div><span className="text-xs uppercase text-muted-foreground">Z-score</span><div className="font-semibold">{result.z.toFixed(2)}</div></div>
            <div><span className="text-xs uppercase text-muted-foreground">Median (M)</span><div className="font-semibold">{Math.round(result.M)} g</div></div>
            <div><span className="text-xs uppercase text-muted-foreground">L / S</span><div className="font-mono text-xs">{result.L.toFixed(3)} / {result.S.toFixed(3)}</div></div>
          </div>
          <div className="text-xs text-muted-foreground italic">Fenton TR, Kim JH. Systematic review — revised Fenton growth chart for preterm infants. BMC Pediatr 2013;13:59.</div>
        </div>
      )}
    </section>
  );
 }
 function ActivePanel({ pill }: { pill: Pill }) {
  if (pill.id === 'bsa') return <BsaPanel />;
  if (pill.id === 'dose') return <DosePanel />;
  if (pill.id === 'gcs') return <GcsPanel />;
  if (pill.id === 'bili') return <BiliPanel />;
  if (pill.id === 'growth') return <GrowthPanel />;
  if (pill.id === 'bmi') return <BmiPanel />;
  if (pill.id === 'vitals') return <VitalsPanel />;
  if (pill.id === 'resus') return <ResusPanel />;
  if (pill.id === 'equipment') return <EquipmentPanel />;
  if (pill.id === 'bp') return <BpPanel />;
  return <LegacyPanel pill={pill} />;
 }
 export default function Calculators() {
  const [active, setActive] = useState<string>(PILLS[0].id);
  const pill = PILLS.find((p) => p.id === active) ?? PILLS[0];
  return (
    <div className="max-w-5xl mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">Calculators</h1>
        <p className="text-sm text-muted-foreground">
          Pediatric calculators — BP percentiles, bilirubin thresholds, growth, dosing, equipment sizing.
          Simple pure-formula calculators run in React now; high-risk table-driven calculators remain
          legacy-gated until vectors are captured.
        </p>
      </header>
      <div className="flex flex-wrap gap-2" data-testid="calc-subnav">
        {PILLS.map((p) => (
          <button
            key={p.id}
            type="button"
            onClick={() => setActive(p.id)}
            className={
              'px-3 py-1.5 rounded-full text-xs font-medium border transition-colors ' +
              (active === p.id
                ? 'bg-primary text-primary-foreground border-primary'
                : 'bg-muted hover:bg-muted/80 border-border')
            }
            data-testid={'calc-pill-' + p.id}
          >
            {p.label}{p.ported ? <span className="ml-1 text-[10px] opacity-80">React</span> : null}
          </button>
        ))}
      </div>
      <ActivePanel pill={pill} />
    </div>
  );
 }
--- a/client/src/pages/Catchup.tsx
+++ b/client/src/pages/Catchup.tsx
@ -0,0 +1,88 @@
 // ============================================================
 // CATCH-UP SCHEDULE — CDC catch-up immunization tables from
 // GET /api/schedule-data.
 // ============================================================
 import { useQuery } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 interface CatchUpSeries { dose: number | string; minimumAge?: string; minimumIntervalToPrev?: string; notes?: string }
 interface CatchUpEntry {
  minimumAgeForDose1?: string;
  series?: CatchUpSeries[];
  catchUpNotes?: string | string[];
 }
 interface ScheduleData {
  catchUpSchedule: Record<string, CatchUpEntry>;
  vaccineFullNames: Record<string, string>;
 }
 export default function Catchup() {
  const { data, isLoading, error } = useQuery<ScheduleData>({
    queryKey: ['schedule-data'],
    queryFn: () => api.get<ScheduleData>('/api/schedule-data'),
  });
  if (isLoading) return <div className="p-6 text-sm text-muted-foreground">Loading…</div>;
  if (error) return <div className="p-6 text-sm text-destructive">{(error as Error).message}</div>;
  if (!data) return null;
  return (
    <div className="max-w-4xl mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">Catch-Up Schedule</h1>
        <p className="text-sm text-muted-foreground">
          CDC 2025 catch-up immunization schedule — minimum ages and intervals per vaccine.
        </p>
      </header>
      {Object.entries(data.catchUpSchedule).map(([key, v]) => {
        const fullName = data.vaccineFullNames[key] || key;
        const notes = v.catchUpNotes
          ? (Array.isArray(v.catchUpNotes) ? v.catchUpNotes : [v.catchUpNotes])
          : [];
        return (
          <section key={key} className="rounded-lg border border-border bg-card overflow-hidden">
            <header className="px-4 py-2 border-b border-border bg-muted/40 flex items-center justify-between">
              <h2 className="text-sm font-semibold">{fullName}</h2>
              {v.minimumAgeForDose1 && (
                <span className="text-xs text-muted-foreground">
                  Min age dose 1: <strong>{v.minimumAgeForDose1}</strong>
                </span>
              )}
            </header>
            {v.series && v.series.length > 0 && (
              <table className="w-full text-xs">
                <thead className="bg-muted/20">
                  <tr>
                    <th className="text-left px-3 py-2">Dose</th>
                    <th className="text-left px-3 py-2">Min age</th>
                    <th className="text-left px-3 py-2">Min interval from prev</th>
                    <th className="text-left px-3 py-2">Notes</th>
                  </tr>
                </thead>
                <tbody>
                  {v.series.map((s) => (
                    <tr key={String(s.dose)} className="border-t border-border">
                      <td className="px-3 py-2 font-semibold">Dose {s.dose}</td>
                      <td className="px-3 py-2">{s.minimumAge || '—'}</td>
                      <td className="px-3 py-2">{s.minimumIntervalToPrev || '—'}</td>
                      <td className="px-3 py-2 text-muted-foreground">{s.notes || ''}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
            {notes.length > 0 && (
              <ul className="list-disc pl-8 py-2 text-xs text-muted-foreground space-y-1">
                {notes.map((n, i) => <li key={i}>{n}</li>)}
              </ul>
            )}
          </section>
        );
      })}
    </div>
  );
 }
--- a/client/src/pages/ChartReview.tsx
+++ b/client/src/pages/ChartReview.tsx
@ -0,0 +1,197 @@
 // ============================================================
 // CHART REVIEW — /api/generate-chart-review
 // ============================================================
 import { useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { api, ApiError } from '@/lib/api';
 import type { ChartReviewOk } from '@/shared/types';
 import EncounterToolbar from '@/components/EncounterToolbar';
 import EditableResult from '@/components/EditableResult';
 type ReviewType = 'outpatient' | 'subspecialty' | 'ed';
 const TYPE = 'chart' as const;
 interface VisitInput { date: string; content: string; labs: string }
 function emptyVisit(): VisitInput { return { date: '', content: '', labs: '' }; }
 export default function ChartReview() {
  const [label, setLabel] = useState('');
  const [type, setType] = useState<ReviewType>('outpatient');
  const [patientAge, setPatientAge] = useState('');
  const [patientGender, setPatientGender] = useState('');
  const [pmh, setPmh] = useState('');
  const [visits, setVisits] = useState<VisitInput[]>([emptyVisit()]);
  const [additionalInstructions, setAdditionalInstructions] = useState('');
  const [result, setResult] = useState<string | null>(null);
  const generate = useMutation<ChartReviewOk, Error, any>({
    mutationFn: (body) => api.post<ChartReviewOk>('/api/generate-chart-review', body),
    onSuccess: (data) => setResult(data.review),
  });
  function updateVisit(i: number, patch: Partial<VisitInput>) {
    setVisits((vs) => vs.map((v, idx) => (idx === i ? { ...v, ...patch } : v)));
  }
  function submit(e: React.FormEvent) {
    e.preventDefault();
    setResult(null);
    const filled = visits.filter((v) => v.content.trim());
    generate.mutate({
      type,
      patientAge, patientGender, pmh,
      visits: type === 'outpatient' ? filled : undefined,
      subspecialty: type === 'subspecialty' ? filled : undefined,
      edVisits: type === 'ed' ? filled : undefined,
      additionalInstructions: additionalInstructions || undefined,
    });
  }
  const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm';
  return (
    <div className="max-w-4xl mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">Chart Review</h1>
        <p className="text-sm text-muted-foreground">
          Past visits → summary for pre-charting.
        </p>
      </header>
      <EncounterToolbar
        type={TYPE}
        label={label} setLabel={setLabel}
        transcript={JSON.stringify(visits)} generatedNote={result || ''}
        partialData={{ type, age: patientAge, gender: patientGender, pmh, additionalInstructions }}
        onLoad={(enc) => {
          try {
            const parsedVisits = enc.transcript ? JSON.parse(enc.transcript) as VisitInput[] : [emptyVisit()];
            setVisits(parsedVisits.length ? parsedVisits : [emptyVisit()]);
          } catch { setVisits([emptyVisit()]); }
          setResult(enc.generated_note || null);
          try {
            const pd = enc.partial_data ? JSON.parse(enc.partial_data) : null;
            if (pd?.type) setType(pd.type);
            if (pd?.age) setPatientAge(pd.age);
            if (pd?.gender) setPatientGender(pd.gender);
            if (pd?.pmh) setPmh(pd.pmh);
            if (pd?.additionalInstructions) setAdditionalInstructions(pd.additionalInstructions);
          } catch { /* ignore */ }
          setLabel(enc.label || '');
        }}
        onClear={() => {
          setVisits([emptyVisit()]); setResult(null);
          setType('outpatient'); setPatientAge(''); setPatientGender('');
          setPmh(''); setAdditionalInstructions('');
        }}
      />
      <form onSubmit={submit} className="space-y-4">
        <div className="grid grid-cols-4 gap-3">
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Review type</span>
            <select className={input} value={type} onChange={(e) => setType(e.target.value as ReviewType)}>
              <option value="outpatient">Outpatient</option>
              <option value="subspecialty">Subspecialty</option>
              <option value="ed">ED</option>
            </select>
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Age</span>
            <input className={input} value={patientAge} onChange={(e) => setPatientAge(e.target.value)} />
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Gender</span>
            <select className={input} value={patientGender} onChange={(e) => setPatientGender(e.target.value)}>
              <option value="">Select</option><option>Male</option><option>Female</option>
            </select>
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">PMH</span>
            <input className={input} value={pmh} onChange={(e) => setPmh(e.target.value)} />
          </label>
        </div>
        <div className="space-y-3">
          <div className="flex items-center justify-between">
            <span className="text-sm font-semibold">Visits</span>
            <button
              type="button"
              onClick={() => setVisits((v) => [...v, emptyVisit()])}
              className="text-xs rounded-md border border-border px-2 py-1"
            >
              + Add visit
            </button>
          </div>
          {visits.map((v, i) => (
            <div key={i} className="rounded-lg border border-border p-3 space-y-2 bg-card">
              <div className="flex items-center gap-2">
                <input
                  type="date"
                  className={input + ' max-w-xs'}
                  value={v.date}
                  onChange={(e) => updateVisit(i, { date: e.target.value })}
                />
                {visits.length > 1 && (
                  <button
                    type="button"
                    onClick={() => setVisits(vs => vs.filter((_, idx) => idx !== i))}
                    className="text-xs text-destructive"
                  >
                    Remove
                  </button>
                )}
              </div>
              <textarea
                className={input + ' min-h-[100px] font-mono text-sm'}
                placeholder="Visit note content — paste here."
                value={v.content}
                onChange={(e) => updateVisit(i, { content: e.target.value })}
              />
              <textarea
                className={input + ' min-h-[60px] font-mono text-xs'}
                placeholder="Labs from this visit (optional)"
                value={v.labs}
                onChange={(e) => updateVisit(i, { labs: e.target.value })}
              />
            </div>
          ))}
        </div>
        <label className="flex flex-col gap-1">
          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Additional instructions</span>
          <textarea
            className={input + ' min-h-[60px] text-sm'}
            placeholder="e.g. 'Focus on thyroid management', 'Highlight medication changes'"
            value={additionalInstructions}
            onChange={(e) => setAdditionalInstructions(e.target.value)}
          />
        </label>
        {generate.error && <div className="text-sm text-destructive">{(generate.error as ApiError).message}</div>}
        <button
          type="submit"
          disabled={generate.isPending || !visits.some((v) => v.content.trim())}
          className="rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium disabled:opacity-50"
        >
          {generate.isPending ? 'Generating…' : 'Generate Chart Review'}
        </button>
      </form>
      {result !== null && (
        <EditableResult
          text={result}
          onChange={setResult}
          section={null}
          title="Chart Review"
          exportLabel="chart-review"
          exportType="chart-review"
          sourceContext={visits.map((v) => v.content).filter(Boolean).join('\n\n')}
        />
      )}
    </div>
  );
 }
--- a/client/src/pages/Cms.tsx
+++ b/client/src/pages/Cms.tsx
@ -0,0 +1,76 @@
 // ============================================================
 // CMS — Learning Hub Content Manager. Faithful port of vanilla
 // public/components/cms.html + the loadCms / loadCmsContent / etc.
 // section of public/js/learningHub.js (@be14578).
 //
 // Server gates this with moderatorMiddleware (admin OR moderator),
 // so the route is mounted unconditionally and the server returns
 // 403 to non-moderators. The sidebar nav link is gated by
 // `me.user.role` to keep it hidden from clinicians.
 //
 // Sub-components live under src/pages/cms/:
 //   StatsBar — 6-cell metrics summary
 //   CategoriesPanel — category list + add/delete + filters
 //   ContentList — table + toolbar (new article/quiz/pearl/presentation)
 //   ContentEditor — title/category/type/body + per-quiz QuestionsEditor
 //
 // What's intentionally NOT in this first cut (each of these is a
 // follow-up commit if Daniel actually starts using them):
 //   • AI generation panel (vanilla `lh-ai-panel`)
 //   • WebDAV file picker for AI sources
 //   • Drag-and-drop file upload for AI ingest
 //   • Rich-text body editor (Quill toolbar) — body is a textarea
 //   • Slide editor for presentations — body holds JSON for now
 // ============================================================
 import { useState } from 'react';
 import StatsBar from './cms/StatsBar';
 import CategoriesPanel from './cms/CategoriesPanel';
 import ContentList from './cms/ContentList';
 import ContentEditor from './cms/ContentEditor';
 import type { ContentType } from './cms/cms-types';
 type View = { kind: 'list' } | { kind: 'edit'; id: number | null; type: ContentType };
 export default function Cms() {
  const [statusFilter, setStatusFilter] = useState<'all' | 'published' | 'draft'>('all');
  const [categoryFilter, setCategoryFilter] = useState<number | 'all'>('all');
  const [view, setView] = useState<View>({ kind: 'list' });
  return (
    <div className="max-w-6xl mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">Content Manager</h1>
        <p className="text-sm text-muted-foreground">
          Create and manage Learning Hub content, quizzes, and categories.
        </p>
      </header>
      <StatsBar />
      <div className="flex flex-col lg:flex-row gap-4">
        <CategoriesPanel
          statusFilter={statusFilter}
          onStatusFilter={setStatusFilter}
          categoryFilter={categoryFilter}
          onCategoryFilter={setCategoryFilter}
        />
        {view.kind === 'list' ? (
          <ContentList
            statusFilter={statusFilter}
            categoryFilter={categoryFilter}
            onEdit={(id) => setView({ kind: 'edit', id, type: 'article' })}
            onCreate={(type) => setView({ kind: 'edit', id: null, type })}
          />
        ) : (
          <ContentEditor
            id={view.id}
            initialType={view.type}
            onClose={() => setView({ kind: 'list' })}
          />
        )}
      </div>
    </div>
  );
 }
--- a/client/src/pages/Dictation.tsx
+++ b/client/src/pages/Dictation.tsx
@ -0,0 +1,171 @@
 // ============================================================
 // DICTATION — voice dictation → HPI via /api/generate-hpi-dictation
 //
 // Minimum-viable port: demographics + transcript textarea + generate.
 // The vanilla version also has MediaRecorder-based audio capture,
 // transcription upload, save/load popover, refine, shorten, and
 // Nextcloud export. Those each land in follow-up commits — this
 // first pass proves the generate-HPI wire protocol works from React.
 // ============================================================
 import { useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { api, ApiError } from '@/lib/api';
 import type { HpiOk } from '@/shared/types';
 import { HpiEncounterRequestSchema, type HpiEncounterRequest } from '@/shared/schemas';
 import Recorder from '@/components/Recorder';
 import EncounterToolbar from '@/components/EncounterToolbar';
 import EditableResult from '@/components/EditableResult';
 type Setting = 'outpatient' | 'inpatient';
 const TYPE = 'dictation' as const;
 export default function Dictation() {
  const [label, setLabel] = useState('');
  const [patientAge, setPatientAge] = useState('');
  const [patientGender, setPatientGender] = useState('');
  const [setting, setSetting] = useState<Setting>('outpatient');
  const [transcript, setTranscript] = useState('');
  const [interim, setInterim] = useState('');
  const [result, setResult] = useState<string | null>(null);
  const [validationError, setValidationError] = useState<string | null>(null);
  const [recError, setRecError] = useState<string | null>(null);
  const generate = useMutation<HpiOk, Error, HpiEncounterRequest>({
    mutationFn: (body) => api.post<HpiOk>('/api/generate-hpi-dictation', body),
    onSuccess: (data) => setResult(data.hpi),
    onError: () => setResult(null),
  });
  function submit(e: React.FormEvent) {
    e.preventDefault();
    setValidationError(null);
    const body: HpiEncounterRequest = { transcript: (interim || transcript).trim(), patientAge, patientGender, setting };
    const parsed = HpiEncounterRequestSchema.safeParse(body);
    if (!parsed.success) {
      setValidationError(parsed.error.issues.map((i: { message: string }) => i.message).join(', '));
      return;
    }
    setResult(null);
    generate.mutate(parsed.data);
  }
  function clear() {
    setTranscript('');
    setInterim('');
    setResult(null);
    setValidationError(null);
  }
  const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm';
  const displayedTranscript = interim || transcript;
  return (
    <div className="max-w-4xl mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">Voice Dictation → HPI</h1>
        <p className="text-sm text-muted-foreground">
          Dictate your narrative → AI restructures into polished HPI.
        </p>
      </header>
      <EncounterToolbar
        type={TYPE}
        label={label} setLabel={setLabel}
        transcript={transcript} generatedNote={result || ''}
        partialData={{ age: patientAge, gender: patientGender, setting }}
        onLoad={(enc) => {
          setTranscript(enc.transcript || '');
          setInterim('');
          setResult(enc.generated_note || null);
          try {
            const pd = enc.partial_data ? JSON.parse(enc.partial_data) : null;
            if (pd?.age) setPatientAge(pd.age);
            if (pd?.gender) setPatientGender(pd.gender);
            if (pd?.setting) setSetting(pd.setting);
          } catch { /* ignore */ }
          setLabel(enc.label || '');
        }}
        onClear={() => { clear(); setPatientAge(''); setPatientGender(''); setSetting('outpatient'); }}
      />
      <form onSubmit={submit} className="space-y-4">
        <div className="grid grid-cols-3 gap-3">
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Age</span>
            <input className={input} placeholder="e.g. 8 months" value={patientAge} onChange={(e) => setPatientAge(e.target.value)} />
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Gender</span>
            <select className={input} value={patientGender} onChange={(e) => setPatientGender(e.target.value)}>
              <option value="">Select</option>
              <option>Male</option>
              <option>Female</option>
            </select>
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Setting</span>
            <select className={input} value={setting} onChange={(e) => setSetting(e.target.value as Setting)}>
              <option value="outpatient">Outpatient</option>
              <option value="inpatient">Inpatient / Floors</option>
            </select>
          </label>
        </div>
        <Recorder
          module="dictation"
          onTranscript={(text, meta) => {
            setTranscript((prev) => (meta.appended ? (prev ? prev + ' ' + text : text) : text));
            setInterim('');
            setRecError(null);
          }}
          onInterim={(t) => setInterim(t ? (transcript ? transcript + ' ' + t : t) : '')}
          onError={(msg) => setRecError(msg)}
        />
        {recError && <div className="text-sm text-destructive">{recError}</div>}
        <label className="flex flex-col gap-1">
          <div className="flex items-center justify-between">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
              Transcript / dictation
            </span>
            <button type="button" onClick={clear} className="text-xs text-muted-foreground underline">
              Clear
            </button>
          </div>
          <textarea
            className={input + ' min-h-[200px] font-mono text-sm'}
            placeholder="Click Start recording, or type / paste your dictation here."
            value={displayedTranscript}
            onChange={(e) => { setTranscript(e.target.value); setInterim(''); }}
          />
        </label>
        {validationError && <div className="text-sm text-destructive">{validationError}</div>}
        {generate.error && <div className="text-sm text-destructive">{(generate.error as ApiError).message}</div>}
        <div className="flex gap-2">
          <button
            type="submit"
            disabled={generate.isPending || !displayedTranscript.trim()}
            className="rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium disabled:opacity-50"
          >
            {generate.isPending ? 'Generating…' : 'Generate HPI'}
          </button>
        </div>
      </form>
      {result !== null && (
        <EditableResult
          text={result}
          onChange={setResult}
          section="hpi"
          title="Generated HPI"
          exportLabel="hpi-dictation"
          exportType="hpi"
          sourceContext={displayedTranscript}
        />
      )}
    </div>
  );
 }
--- a/client/src/pages/Encounter.tsx
+++ b/client/src/pages/Encounter.tsx
@ -0,0 +1,156 @@
 // ============================================================
 // ENCOUNTER — live encounter → HPI via /api/generate-hpi-encounter.
 // Full port — mic recorder + Web Speech live preview + transcribe
 // + save/resume across sign-outs (mirrors public/js/liveEncounter.js
 // + encounters.js).
 // ============================================================
 import { useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { api, ApiError } from '@/lib/api';
 import type { HpiOk } from '@/shared/types';
 import { HpiEncounterRequestSchema, type HpiEncounterRequest } from '@/shared/schemas';
 import Recorder from '@/components/Recorder';
 import EncounterToolbar from '@/components/EncounterToolbar';
 import EditableResult from '@/components/EditableResult';
 type Setting = 'outpatient' | 'inpatient';
 const TYPE = 'encounter' as const;
 export default function Encounter() {
  const [label, setLabel] = useState('');
  const [patientAge, setPatientAge] = useState('');
  const [patientGender, setPatientGender] = useState('');
  const [setting, setSetting] = useState<Setting>('outpatient');
  const [transcript, setTranscript] = useState('');
  const [interim, setInterim] = useState('');
  const [result, setResult] = useState<string | null>(null);
  const [validationError, setValidationError] = useState<string | null>(null);
  const [recError, setRecError] = useState<string | null>(null);
  const generate = useMutation<HpiOk, Error, HpiEncounterRequest>({
    mutationFn: (body) => api.post<HpiOk>('/api/generate-hpi-encounter', body),
    onSuccess: (data) => setResult(data.hpi),
  });
  function submit(e: React.FormEvent) {
    e.preventDefault();
    setValidationError(null);
    const body: HpiEncounterRequest = { transcript: (interim || transcript).trim(), patientAge, patientGender, setting };
    const parsed = HpiEncounterRequestSchema.safeParse(body);
    if (!parsed.success) {
      setValidationError(parsed.error.issues.map((i: { message: string }) => i.message).join(', '));
      return;
    }
    setResult(null);
    generate.mutate(parsed.data);
  }
  const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm';
  const displayedTranscript = interim || transcript;
  return (
    <div className="max-w-4xl mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">Live Encounter → HPI</h1>
        <p className="text-sm text-muted-foreground">
          Record or paste an encounter transcript; generate a structured HPI.
        </p>
      </header>
      <EncounterToolbar
        type={TYPE}
        label={label} setLabel={setLabel}
        transcript={transcript} generatedNote={result || ''}
        partialData={{ age: patientAge, gender: patientGender, setting }}
        onLoad={(enc) => {
          setTranscript(enc.transcript || '');
          setInterim('');
          setResult(enc.generated_note || null);
          try {
            const pd = enc.partial_data ? JSON.parse(enc.partial_data) : null;
            if (pd?.age) setPatientAge(pd.age);
            if (pd?.gender) setPatientGender(pd.gender);
            if (pd?.setting) setSetting(pd.setting);
          } catch { /* ignore malformed partial */ }
          setLabel(enc.label || '');
        }}
        onClear={() => { setTranscript(''); setInterim(''); setResult(null); setPatientAge(''); setPatientGender(''); setSetting('outpatient'); }}
      />
      <form onSubmit={submit} className="space-y-4">
        <div className="grid grid-cols-3 gap-3">
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Age</span>
            <input className={input} placeholder="e.g. 5 years" value={patientAge} onChange={(e) => setPatientAge(e.target.value)} />
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Gender</span>
            <select className={input} value={patientGender} onChange={(e) => setPatientGender(e.target.value)}>
              <option value="">Select</option>
              <option>Male</option>
              <option>Female</option>
            </select>
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Setting</span>
            <select className={input} value={setting} onChange={(e) => setSetting(e.target.value as Setting)}>
              <option value="outpatient">Outpatient</option>
              <option value="inpatient">Inpatient / Floors</option>
            </select>
          </label>
        </div>
        <Recorder
          module="encounter"
          onTranscript={(text, meta) => {
            // appended=true means the live preview text is being kept;
            // appended=false means we got a fresh transcription that
            // should replace what's there.
            setTranscript((prev) => (meta.appended ? (prev ? prev + ' ' + text : text) : text));
            setInterim('');
            setRecError(null);
          }}
          onInterim={(t) => setInterim(t ? (transcript ? transcript + ' ' + t : t) : '')}
          onError={(msg) => setRecError(msg)}
        />
        {recError && <div className="text-sm text-destructive">{recError}</div>}
        <label className="flex flex-col gap-1">
          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
            Transcript
          </span>
          <textarea
            className={input + ' min-h-[220px] font-mono text-sm'}
            placeholder="Click Start recording, or type / paste an encounter transcript here."
            value={displayedTranscript}
            onChange={(e) => { setTranscript(e.target.value); setInterim(''); }}
          />
        </label>
        {validationError && <div className="text-sm text-destructive">{validationError}</div>}
        {generate.error && <div className="text-sm text-destructive">{(generate.error as ApiError).message}</div>}
        <button
          type="submit"
          disabled={generate.isPending || !displayedTranscript.trim()}
          className="rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium disabled:opacity-50"
        >
          {generate.isPending ? 'Generating…' : 'Generate HPI'}
        </button>
      </form>
      {result !== null && (
        <EditableResult
          text={result}
          onChange={setResult}
          section="encounter"
          title="Generated HPI"
          exportLabel="hpi-encounter"
          exportType="hpi"
          sourceContext={displayedTranscript}
        />
      )}
    </div>
  );
 }
--- a/client/src/pages/Extensions.tsx
+++ b/client/src/pages/Extensions.tsx
@ -0,0 +1,153 @@
 // ============================================================
 // EXTENSIONS — first tab ported from vanilla JS to React.
 // Read-only list view with a simple add form. The old vanilla
 // version has richer UI (trash, restore, purge, search) — this
 // minimum-viable port proves the migration pipeline works:
 // shared types + api wrapper + React Query + Tailwind shadcn.
 // The full CRUD UI lands in a follow-up when polish time arrives.
 // ============================================================
 import { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 import type { ExtensionsListOk, Extension } from '@/shared/types';
 import { ExtensionCreateSchema, type ExtensionCreate } from '@/shared/schemas';
 function ExtensionRow({ ext }: { ext: Extension }) {
  return (
    <div className="flex items-center gap-3 px-4 py-2 border-b border-border">
      <div className="flex-1">
        <div className="font-medium">{ext.name}</div>
        <div className="text-xs text-muted-foreground">{ext.location}</div>
      </div>
      <div className="font-mono text-sm">{ext.number}</div>
      <div className="text-xs uppercase text-muted-foreground w-20 text-right">
        {ext.type}
      </div>
    </div>
  );
 }
 function AddForm({ onDone }: { onDone: () => void }) {
  const qc = useQueryClient();
  const [form, setForm] = useState<ExtensionCreate>({
    location: '',
    name: '',
    number: '',
    type: 'extension',
    notes: '',
  });
  const [error, setError] = useState<string | null>(null);
  const createMutation = useMutation({
    mutationFn: (body: ExtensionCreate) => api.post<{ id: number }>('/api/extensions', body),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['extensions'] });
      onDone();
    },
    onError: (e: Error) => setError(e.message),
  });
  function submit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    const parsed = ExtensionCreateSchema.safeParse(form);
    if (!parsed.success) {
      setError(parsed.error.issues.map((i: { message: string }) => i.message).join(', '));
      return;
    }
    createMutation.mutate(parsed.data);
  }
  const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm';
  return (
    <form onSubmit={submit} className="space-y-3 p-4 bg-muted/40 rounded-lg border border-border">
      <div className="grid grid-cols-2 gap-3">
        <input
          className={input}
          placeholder="Location (e.g. Main Hospital)"
          value={form.location}
          onChange={e => setForm({ ...form, location: e.target.value })}
        />
        <input
          className={input}
          placeholder="Name / department"
          value={form.name}
          onChange={e => setForm({ ...form, name: e.target.value })}
        />
        <input
          className={input}
          placeholder="Number"
          value={form.number}
          onChange={e => setForm({ ...form, number: e.target.value })}
        />
        <select
          className={input}
          value={form.type}
          onChange={e => setForm({ ...form, type: e.target.value as 'extension' | 'pager' })}
        >
          <option value="extension">Extension</option>
          <option value="pager">Pager</option>
        </select>
      </div>
      {error && <div className="text-sm text-destructive">{error}</div>}
      <div className="flex gap-2">
        <button
          type="submit"
          disabled={createMutation.isPending}
          className="rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium disabled:opacity-50"
        >
          {createMutation.isPending ? 'Saving…' : 'Save'}
        </button>
        <button type="button" onClick={onDone} className="rounded-md border border-border px-4 py-2 text-sm">
          Cancel
        </button>
      </div>
    </form>
  );
 }
 export default function Extensions() {
  const [adding, setAdding] = useState(false);
  const { data, isLoading, error } = useQuery<ExtensionsListOk>({
    queryKey: ['extensions'],
    queryFn: () => api.get<ExtensionsListOk>('/api/extensions'),
  });
  return (
    <div className="max-w-3xl mx-auto p-6 space-y-4">
      <header className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold">Pagers & Extensions</h1>
          <p className="text-sm text-muted-foreground">
            Per-user directory. This React port is the migration proof-of-life.
          </p>
        </div>
        {!adding && (
          <button
            onClick={() => setAdding(true)}
            className="rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium"
          >
            + Add
          </button>
        )}
      </header>
      {adding && <AddForm onDone={() => setAdding(false)} />}
      {isLoading && <div className="text-sm text-muted-foreground">Loading…</div>}
      {error && <div className="text-sm text-destructive">{(error as Error).message}</div>}
      {data && data.items.length === 0 && (
        <div className="text-sm text-muted-foreground italic py-8 text-center">
          No extensions yet. Click Add to create the first one.
        </div>
      )}
      {data && data.items.length > 0 && (
        <div className="rounded-lg border border-border overflow-hidden">
          {data.items.map((ext: Extension) => <ExtensionRow key={ext.id} ext={ext} />)}
        </div>
      )}
    </div>
  );
 }
--- a/client/src/pages/Faq.tsx
+++ b/client/src/pages/Faq.tsx
@ -0,0 +1,57 @@
 // ============================================================
 // FAQ — ported from public/components/faq.html. Same content,
 // same sectioned layout, collapsible questions. Content lives in
 // data/faq.ts so adding an entry is a one-line data change.
 // ============================================================
 import { useState } from 'react';
 import { FAQ_DATA } from '@/data/faq';
 function FaqItem({ q, a }: { q: string; a: string }) {
  const [open, setOpen] = useState(false);
  return (
    <div className="border-b border-border last:border-0">
      <button
        onClick={() => setOpen(!open)}
        className="w-full text-left py-3 px-4 flex items-center justify-between hover:bg-muted/40 transition-colors"
        aria-expanded={open}
      >
        <span className="font-medium text-sm">{q}</span>
        <span className="text-muted-foreground text-sm">{open ? '−' : '+'}</span>
      </button>
      {open && (
        <div className="px-4 pb-4 text-sm text-muted-foreground leading-relaxed whitespace-pre-line">
          {a}
        </div>
      )}
    </div>
  );
 }
 export default function Faq() {
  return (
    <div className="max-w-4xl mx-auto p-6 space-y-6">
      <header>
        <h1 className="text-2xl font-semibold">Frequently Asked Questions</h1>
        <p className="text-sm text-muted-foreground">
          Learn how Pediatric AI Scribe works and get the most out of it.
        </p>
      </header>
      {FAQ_DATA.map((section) => (
        <section
          key={section.section}
          className="rounded-lg border border-border overflow-hidden"
        >
          <h2 className="bg-muted/40 px-4 py-2 text-sm font-semibold">
            {section.section}
          </h2>
          <div className="bg-card">
            {section.items.map((item) => (
              <FaqItem key={item.q} q={item.q} a={item.a} />
            ))}
          </div>
        </section>
      ))}
    </div>
  );
 }
--- a/client/src/pages/HospitalCourse.tsx
+++ b/client/src/pages/HospitalCourse.tsx
@ -0,0 +1,198 @@
 // ============================================================
 // HOSPITAL COURSE — /api/generate-hospital-course
 // ============================================================
 import { useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { api, ApiError } from '@/lib/api';
 import type { HospitalCourseOk } from '@/shared/types';
 import Recorder from '@/components/Recorder';
 import EncounterToolbar from '@/components/EncounterToolbar';
 import EditableResult from '@/components/EditableResult';
 type SettingKind = 'floor' | 'picu' | 'nicu' | 'psych';
 type FormatKind = 'auto' | 'prose' | 'dayByDay' | 'organSystem';
 const TYPE = 'hospital' as const;
 interface NoteEntry { date: string; type: string; content: string }
 export default function HospitalCourse() {
  const [label, setLabel] = useState('');
  const [recError, setRecError] = useState<string | null>(null);
  const [patientAge, setPatientAge] = useState('');
  const [patientGender, setPatientGender] = useState('');
  const [pmh, setPmh] = useState('');
  const [setting, setSetting] = useState<SettingKind>('floor');
  const [los, setLos] = useState('');
  const [format, setFormat] = useState<FormatKind>('auto');
  const [hAndPContent, setHAndPContent] = useState('');
  const [notesText, setNotesText] = useState('');
  const [additionalInstructions, setAdditionalInstructions] = useState('');
  const [result, setResult] = useState<{ hospitalCourse: string; format: string } | null>(null);
  const generate = useMutation<HospitalCourseOk, Error, any>({
    mutationFn: (body) => api.post<HospitalCourseOk>('/api/generate-hospital-course', body),
    onSuccess: (data) => setResult({ hospitalCourse: data.hospitalCourse, format: data.format || 'auto' }),
  });
  function submit(e: React.FormEvent) {
    e.preventDefault();
    setResult(null);
    // Notes textarea: one blank-line-separated note per block. First
    // line of each block is used as the date if it looks like one,
    // rest becomes content.
    const notes: NoteEntry[] = notesText
      .split(/\n\s*\n/)
      .map((block) => block.trim())
      .filter(Boolean)
      .map((block, i) => ({ date: `Day ${i + 1}`, type: 'Progress Note', content: block }));
    generate.mutate({
      notes,
      hAndP: hAndPContent ? { date: 'Admission', content: hAndPContent } : undefined,
      patientAge, patientGender, pmh, setting,
      los: los ? parseInt(los) : undefined,
      formatPreference: format,
      additionalInstructions: additionalInstructions || undefined,
    });
  }
  const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm';
  return (
    <div className="max-w-4xl mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">Hospital Course</h1>
        <p className="text-sm text-muted-foreground">
          Progress notes + H&amp;P → hospital course summary (prose, day-by-day, or organ-system format).
        </p>
      </header>
      <EncounterToolbar
        type={TYPE}
        label={label} setLabel={setLabel}
        transcript={notesText} generatedNote={result?.hospitalCourse || ''}
        partialData={{ age: patientAge, gender: patientGender, pmh, setting, los, format, hAndPContent, additionalInstructions }}
        onLoad={(enc) => {
          setNotesText(enc.transcript || '');
          setResult(enc.generated_note ? { hospitalCourse: enc.generated_note, format: 'auto' } : null);
          try {
            const pd = enc.partial_data ? JSON.parse(enc.partial_data) : null;
            if (pd?.age) setPatientAge(pd.age);
            if (pd?.gender) setPatientGender(pd.gender);
            if (pd?.pmh) setPmh(pd.pmh);
            if (pd?.setting) setSetting(pd.setting);
            if (pd?.los) setLos(pd.los);
            if (pd?.format) setFormat(pd.format);
            if (pd?.hAndPContent) setHAndPContent(pd.hAndPContent);
            if (pd?.additionalInstructions) setAdditionalInstructions(pd.additionalInstructions);
          } catch { /* ignore */ }
          setLabel(enc.label || '');
        }}
        onClear={() => {
          setNotesText(''); setResult(null);
          setPatientAge(''); setPatientGender(''); setPmh('');
          setSetting('floor'); setLos(''); setFormat('auto');
          setHAndPContent(''); setAdditionalInstructions('');
        }}
      />
      <form onSubmit={submit} className="space-y-4">
        <div className="grid grid-cols-3 gap-3">
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Age</span>
            <input className={input} value={patientAge} onChange={(e) => setPatientAge(e.target.value)} />
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Gender</span>
            <select className={input} value={patientGender} onChange={(e) => setPatientGender(e.target.value)}>
              <option value="">Select</option><option>Male</option><option>Female</option>
            </select>
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Setting</span>
            <select className={input} value={setting} onChange={(e) => setSetting(e.target.value as SettingKind)}>
              <option value="floor">Floor</option>
              <option value="picu">PICU</option>
              <option value="nicu">NICU</option>
              <option value="psych">Psych</option>
            </select>
          </label>
        </div>
        <div className="grid grid-cols-3 gap-3">
          <label className="flex flex-col gap-1 col-span-2">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">PMH</span>
            <input className={input} placeholder="e.g. Asthma, hypothyroidism" value={pmh} onChange={(e) => setPmh(e.target.value)} />
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">LOS (days)</span>
            <input className={input} type="number" value={los} onChange={(e) => setLos(e.target.value)} />
          </label>
        </div>
        <label className="flex flex-col gap-1">
          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Format</span>
          <select className={input} value={format} onChange={(e) => setFormat(e.target.value as FormatKind)}>
            <option value="auto">Auto (infer from setting + LOS)</option>
            <option value="prose">Prose summary</option>
            <option value="dayByDay">Day-by-day</option>
            <option value="organSystem">Organ-system (ICU)</option>
          </select>
        </label>
        <label className="flex flex-col gap-1">
          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">H&amp;P</span>
          <textarea className={input + ' min-h-[120px] font-mono text-sm'} value={hAndPContent} onChange={(e) => setHAndPContent(e.target.value)} />
        </label>
        <Recorder
          module="hospital"
          onTranscript={(text, meta) => {
            if (meta.appended) {
              setNotesText((prev) => prev ? prev + '\n\n' + text : text);
            } else {
              setNotesText((prev) => prev ? prev + '\n\n' + text : text);
            }
            setRecError(null);
          }}
          onError={(msg) => setRecError(msg)}
        />
        {recError && <div className="text-sm text-destructive">{recError}</div>}
        <label className="flex flex-col gap-1">
          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
            Progress notes <span className="normal-case font-normal text-muted-foreground">(separate each note with a blank line)</span>
          </span>
          <textarea className={input + ' min-h-[200px] font-mono text-sm'} value={notesText} onChange={(e) => setNotesText(e.target.value)} />
        </label>
        <label className="flex flex-col gap-1">
          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Additional instructions</span>
          <textarea className={input + ' min-h-[60px] text-sm'} value={additionalInstructions} onChange={(e) => setAdditionalInstructions(e.target.value)} />
        </label>
        {generate.error && <div className="text-sm text-destructive">{(generate.error as ApiError).message}</div>}
        <button
          type="submit"
          disabled={generate.isPending || !notesText.trim()}
          className="rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium disabled:opacity-50"
        >
          {generate.isPending ? 'Generating…' : 'Generate Hospital Course'}
        </button>
      </form>
      {result && (
        <EditableResult
          text={result.hospitalCourse}
          onChange={(t) => setResult({ hospitalCourse: t, format: result.format })}
          section={null}
          title={'Hospital Course (' + result.format + ')'}
          exportLabel="hospital-course"
          exportType="hospital-course"
          sourceContext={notesText}
        />
      )}
    </div>
  );
 }
--- a/client/src/pages/Learning.tsx
+++ b/client/src/pages/Learning.tsx
@ -0,0 +1,482 @@
 // ============================================================
 // LEARNING HUB — pediatric education, pearls, and self-assessment
 // quizzes.
 //
 //   • Search box (keyword, posts to /api/learning/search)
 //   • Category pills (/api/learning/categories) filter the feed
 //   • Feed list (/api/learning/feed or /category/:slug depending on filter)
 //   • Viewer — rich HTML body rendered with sanitizeHtml() wrapper
 //     so admin-authored content displays formatting safely.
 //   • Slide viewer for content_type === 'presentation' — fetches
 //     pre-rendered HTML from /api/learning/content/:slug/slides.
 //   • Quiz (single / multi / true_false) + results with explanations
 //   • Per-user progress list (last 5 attempts)
 //
 // Endpoints all live in src/routes/learningHub.ts at /api/learning/*.
 // ============================================================
 import { useEffect, useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 import { sanitizeHtml } from '@/lib/sanitize';
 import type {
  LearningCategoriesOk,
  LearningCategory,
  LearningFeedListOk,
  LearningFeedRow,
  LearningContentOk,
  LearningContentFull,
  LearningQuestion,
  QuizAnswer,
  QuizSubmitOk,
  LearningSlidesOk,
 } from '@/shared/types';
 const card = 'rounded-lg border border-border bg-card p-5 space-y-3';
 const pill = 'px-3 py-1 rounded-full text-xs font-medium border transition-colors cursor-pointer';
 const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm';
 const btnPrimary = 'rounded-md bg-primary text-primary-foreground px-3 py-2 text-sm font-medium disabled:opacity-50';
 const btnGhost = 'rounded-md border border-border px-3 py-2 text-sm disabled:opacity-50';
 function typeBadge(t: string) {
  switch (t) {
    case 'quiz':         return 'Quiz';
    case 'pearl':        return 'Pearl';
    case 'presentation': return 'Slides';
    default:             return 'Article';
  }
 }
 // ── Feed ────────────────────────────────────────────────────
 function FeedCard({ row, onOpen }: { row: LearningFeedRow; onOpen: () => void }) {
  return (
    <button
      type="button"
      onClick={onOpen}
      className="w-full text-left rounded-lg border border-border bg-card hover:bg-muted/60 p-4 transition-colors"
      data-testid={'lh-feed-item-' + row.slug}
    >
      <div className="flex items-center gap-2 text-xs text-muted-foreground uppercase tracking-wide mb-1">
        <span className="font-semibold">{typeBadge(row.content_type)}</span>
        {row.category_name && <span>· {row.category_name}</span>}
        {row.question_count ? <span>· {row.question_count} Q</span> : null}
      </div>
      <div className="text-sm font-semibold">{row.title}</div>
      {row.subject && <div className="text-xs text-muted-foreground mt-0.5 truncate">{row.subject}</div>}
    </button>
  );
 }
 function Feed({
  filter,
  query,
  onOpen,
 }: {
  filter: string; // category slug or '' for all
  query: string;
  onOpen: (slug: string) => void;
 }) {
  const key: unknown[] =
    query
      ? ['learning-search', query]
      : filter
      ? ['learning-category', filter]
      : ['learning-feed'];
  const { data, isLoading, error } = useQuery<LearningFeedListOk>({
    queryKey: key,
    queryFn: () => {
      if (query) return api.get<LearningFeedListOk>('/api/learning/search?q=' + encodeURIComponent(query));
      if (filter)
        return api.get<LearningFeedListOk & { category?: LearningCategory }>(
          '/api/learning/category/' + encodeURIComponent(filter),
        );
      return api.get<LearningFeedListOk>('/api/learning/feed?limit=30');
    },
  });
  if (isLoading) return <div className="text-sm text-muted-foreground">Loading…</div>;
  if (error) return <div className="text-sm text-destructive">{(error as Error).message}</div>;
  const rows = data?.content || [];
  if (rows.length === 0)
    return <div className="text-sm text-muted-foreground italic py-4">No content found.</div>;
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3" data-testid="lh-feed">
      {rows.map((r) => <FeedCard key={r.id} row={r} onOpen={() => onOpen(r.slug)} />)}
    </div>
  );
 }
 // ── Viewer + Quiz ───────────────────────────────────────────
 type AnswerMap = Record<number, { optionId?: number; optionIds: Set<number> }>;
 function emptyAnswers(questions: LearningQuestion[]): AnswerMap {
  const m: AnswerMap = {};
  for (const q of questions) m[q.id] = { optionIds: new Set() };
  return m;
 }
 function Quiz({
  content,
  onReset,
 }: {
  content: LearningContentFull;
  onReset: () => void;
 }) {
  const qc = useQueryClient();
  const [answers, setAnswers] = useState<AnswerMap>(() => emptyAnswers(content.questions));
  const [result, setResult] = useState<QuizSubmitOk | null>(null);
  const [error, setError] = useState<string | null>(null);
  const submit = useMutation({
    mutationFn: (body: { contentId: number; answers: QuizAnswer[] }) =>
      api.post<QuizSubmitOk>('/api/learning/submit-quiz', body),
    onSuccess: (data) => {
      setResult(data);
      // Refresh progress list the next time the viewer opens.
      qc.invalidateQueries({ queryKey: ['learning-content', content.slug] });
    },
    onError: (e: Error) => setError(e.message || 'Submit failed'),
  });
  function onSubmit(e: React.FormEvent) {
    e.preventDefault();
    setError(null);
    const payload: QuizAnswer[] = content.questions.map((q) => {
      const a = answers[q.id];
      if (q.question_type === 'multi') {
        return { questionId: q.id, optionIds: Array.from(a?.optionIds || []) };
      }
      return { questionId: q.id, optionId: a?.optionId ?? null };
    });
    submit.mutate({ contentId: content.id, answers: payload });
  }
  function selectSingle(q: LearningQuestion, optionId: number) {
    setAnswers((prev) => ({ ...prev, [q.id]: { optionId, optionIds: new Set() } }));
  }
  function toggleMulti(q: LearningQuestion, optionId: number) {
    setAnswers((prev) => {
      const s = new Set(prev[q.id]?.optionIds || []);
      if (s.has(optionId)) s.delete(optionId);
      else s.add(optionId);
      return { ...prev, [q.id]: { optionIds: s } };
    });
  }
  if (result) {
    const color =
      result.percentage >= 80 ? 'bg-green-600'
      : result.percentage >= 50 ? 'bg-amber-500'
      : 'bg-destructive';
    return (
      <section className={card} data-testid="lh-quiz-results">
        <div className="flex items-center gap-3">
          <h3 className="text-base font-semibold">Results</h3>
          <span
            className={'px-2 py-0.5 rounded text-xs font-semibold text-white ' + color}
            data-testid="lh-quiz-score"
          >
            {result.score}/{result.total} ({result.percentage}%)
          </span>
        </div>
        <div className="space-y-3">
          {result.results.map((r, idx) => (
            <div key={r.questionId} className="rounded-md border border-border p-3 bg-muted/30">
              <div className="text-sm font-medium">
                <span className={r.isCorrect ? 'text-green-600' : 'text-destructive'}>
                  {r.isCorrect ? '✓' : '✗'}
                </span>{' '}
                Q{idx + 1}: {r.questionText}
              </div>
              {!r.isCorrect && r.correctOptionText && (
                <div className="text-xs text-green-700 mt-1">
                  <strong>Correct:</strong> {r.correctOptionText}
                </div>
              )}
              {!r.isCorrect && r.selectedExplanation && (
                <div className="text-xs text-destructive mt-1">
                  <strong>Why incorrect:</strong> {r.selectedExplanation}
                </div>
              )}
              {r.generalExplanation && (
                <div className="text-xs text-muted-foreground mt-1">{r.generalExplanation}</div>
              )}
            </div>
          ))}
        </div>
        <div className="flex gap-2">
          <button
            type="button"
            className={btnGhost}
            onClick={() => {
              setResult(null);
              setAnswers(emptyAnswers(content.questions));
            }}
          >
            Retake
          </button>
          <button type="button" className={btnPrimary} onClick={onReset}>Back to Feed</button>
        </div>
      </section>
    );
  }
  return (
    <section className={card} data-testid="lh-quiz">
      <div className="flex items-center justify-between">
        <h3 className="text-base font-semibold">Quiz</h3>
        <span className="text-xs text-muted-foreground">
          {content.questions.length} question{content.questions.length === 1 ? '' : 's'}
        </span>
      </div>
      <form onSubmit={onSubmit} className="space-y-4">
        {content.questions.map((q, idx) => {
          const isMulti = q.question_type === 'multi';
          const typeLabel =
            q.question_type === 'true_false' ? 'True / False'
            : isMulti ? 'Multiple Select'
            : 'Single Choice';
          return (
            <div key={q.id} className="rounded-md border border-border p-3 space-y-2 bg-muted/30">
              <div className="flex items-center justify-between text-xs text-muted-foreground">
                <span className="font-semibold">Q{idx + 1}</span>
                <span>{typeLabel}</span>
              </div>
              <div className="text-sm font-medium">{q.question_text}</div>
              {isMulti && (
                <div className="text-xs text-muted-foreground italic">Select all that apply</div>
              )}
              <div className="space-y-1">
                {q.options.map((opt) => {
                  const a = answers[q.id];
                  const checked = isMulti
                    ? a?.optionIds.has(opt.id) === true
                    : a?.optionId === opt.id;
                  return (
                    <label
                      key={opt.id}
                      className="flex items-start gap-2 text-sm cursor-pointer hover:bg-muted/50 rounded px-2 py-1"
                    >
                      <input
                        type={isMulti ? 'checkbox' : 'radio'}
                        name={'q-' + q.id}
                        checked={checked}
                        onChange={() =>
                          isMulti ? toggleMulti(q, opt.id) : selectSingle(q, opt.id)
                        }
                        className="mt-0.5"
                      />
                      <span>{opt.option_text}</span>
                    </label>
                  );
                })}
              </div>
            </div>
          );
        })}
        {error && <div className="text-sm text-destructive">{error}</div>}
        <button
          type="submit"
          className={btnPrimary}
          disabled={submit.isPending}
          data-testid="btn-lh-submit-quiz"
        >
          {submit.isPending ? 'Submitting…' : 'Submit Answers'}
        </button>
      </form>
    </section>
  );
 }
 // Fetches pre-rendered Marp slides from the server and renders them
 // one at a time with keyboard navigation. Slides arrive as <section>…
 // elements already processed by the server-side Marp instance, so we
 // run them through sanitizeHtml before injecting.
 function SlideViewer({ slug, title }: { slug: string; title: string }) {
  const [idx, setIdx] = useState(0);
  const [fullscreen, setFullscreen] = useState(false);
  const { data, isLoading, error } = useQuery<LearningSlidesOk>({
    queryKey: ['learning-slides', slug],
    queryFn: () => api.get<LearningSlidesOk>('/api/learning/content/' + encodeURIComponent(slug) + '/slides'),
  });
  useEffect(() => {
    function onKey(e: KeyboardEvent) {
      if (!data) return;
      if (e.key === 'ArrowRight' || e.key === 'PageDown') setIdx((i) => Math.min(i + 1, data.slides.length - 1));
      if (e.key === 'ArrowLeft' || e.key === 'PageUp') setIdx((i) => Math.max(0, i - 1));
      if (e.key === 'Escape' && fullscreen) setFullscreen(false);
    }
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [data, fullscreen]);
  if (isLoading) return <div className="text-sm text-muted-foreground">Loading slides…</div>;
  if (error) return <div className="text-sm text-destructive">Failed to load slides: {(error as Error).message}</div>;
  if (!data || data.slides.length === 0) return <div className="text-sm text-muted-foreground">No slides in this presentation.</div>;
  const sanitizedCss = data.css ? sanitizeHtml('<style>' + data.css + '</style>') : '';
  const slide = sanitizeHtml(data.slides[idx] || '');
  const containerClass = fullscreen
    ? 'fixed inset-0 z-50 bg-background flex flex-col'
    : 'rounded-lg border border-border bg-white dark:bg-black flex flex-col';
  return (
    <div className={containerClass} data-testid="lh-slides">
      {sanitizedCss && <div dangerouslySetInnerHTML={{ __html: sanitizedCss }} />}
      <div className="flex items-center justify-between border-b border-border px-3 py-2 text-xs">
        <span className="text-muted-foreground truncate">📊 {title}</span>
        <div className="flex items-center gap-2">
          <span>{idx + 1} / {data.slides.length}</span>
          <button type="button" onClick={() => setFullscreen(!fullscreen)} className="px-2 py-1 rounded bg-muted text-xs" data-testid="lh-slides-fullscreen">
            {fullscreen ? 'Exit fullscreen' : 'Fullscreen'}
          </button>
        </div>
      </div>
      <div className="flex-1 overflow-auto p-4 flex items-center justify-center" style={{ minHeight: fullscreen ? undefined : '480px' }}>
        <div dangerouslySetInnerHTML={{ __html: slide }} data-testid="lh-slide-current" />
      </div>
      <div className="flex items-center justify-between border-t border-border px-3 py-2">
        <button type="button" onClick={() => setIdx((i) => Math.max(0, i - 1))} disabled={idx === 0} className={btnGhost} data-testid="lh-slides-prev">← Previous</button>
        <span className="text-xs text-muted-foreground">← → to navigate</span>
        <button type="button" onClick={() => setIdx((i) => Math.min(i + 1, data.slides.length - 1))} disabled={idx >= data.slides.length - 1} className={btnGhost} data-testid="lh-slides-next">Next →</button>
      </div>
    </div>
  );
 }
 function ContentViewer({ slug, onBack }: { slug: string; onBack: () => void }) {
  const { data, isLoading, error } = useQuery<LearningContentOk>({
    queryKey: ['learning-content', slug],
    queryFn: () => api.get<LearningContentOk>('/api/learning/content/' + encodeURIComponent(slug)),
  });
  if (isLoading) return <div className="text-sm text-muted-foreground">Loading…</div>;
  if (error) return <div className="text-sm text-destructive">{(error as Error).message}</div>;
  if (!data) return null;
  const c = data.content;
  return (
    <div className="space-y-4">
      <button type="button" className={btnGhost} onClick={onBack} data-testid="btn-lh-back">
        ← Back to Feed
      </button>
      <section className={card} data-testid="lh-viewer">
        <div className="flex items-center justify-between gap-4">
          <h2 className="text-xl font-semibold" data-testid="lh-viewer-title">{c.title}</h2>
          <span className="text-xs text-muted-foreground">
            {typeBadge(c.content_type)}
            {c.category_name ? ' · ' + c.category_name : ''}
            {c.author_name ? ' · ' + c.author_name : ''}
          </span>
        </div>
        {c.content_type === 'presentation' ? (
          <SlideViewer slug={c.slug} title={c.title} />
        ) : (
          <div
            className="text-sm leading-relaxed prose prose-sm dark:prose-invert max-w-none"
            data-testid="lh-viewer-body"
            dangerouslySetInnerHTML={{ __html: sanitizeHtml(c.body || '') }}
          />
        )}
      </section>
      {c.progress && c.progress.length > 0 && (
        <section className={card}>
          <h3 className="text-base font-semibold">Your past attempts</h3>
          <div className="space-y-1 text-sm">
            {c.progress.map((p, i) => {
              const pct = p.total > 0 ? Math.round((p.score / p.total) * 100) : 0;
              const color = pct >= 70 ? 'text-green-600' : 'text-amber-600';
              return (
                <div key={i} className="flex justify-between border-b border-border py-1">
                  <span>{new Date(p.completed_at).toLocaleDateString()}</span>
                  <span className={'font-semibold ' + color}>
                    {p.score}/{p.total} ({pct}%)
                  </span>
                </div>
              );
            })}
          </div>
        </section>
      )}
      {c.questions && c.questions.length > 0 && <Quiz content={c} onReset={onBack} />}
    </div>
  );
 }
 // ── Page shell ───────────────────────────────────────────────
 export default function Learning() {
  const [query, setQuery] = useState('');
  const [filter, setFilter] = useState<string>('');
  const [activeSlug, setActiveSlug] = useState<string | null>(null);
  const { data: cats } = useQuery<LearningCategoriesOk>({
    queryKey: ['learning-categories'],
    queryFn: () => api.get<LearningCategoriesOk>('/api/learning/categories'),
  });
  if (activeSlug) {
    return (
      <div className="max-w-4xl mx-auto p-6">
        <ContentViewer slug={activeSlug} onBack={() => setActiveSlug(null)} />
      </div>
    );
  }
  return (
    <div className="max-w-4xl mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">Learning Hub</h1>
        <p className="text-sm text-muted-foreground">
          Pediatric education, clinical pearls, and self-assessment quizzes.
        </p>
      </header>
      <div className={card}>
        <input
          type="search"
          className={input}
          placeholder="Search topics, subjects…"
          value={query}
          onChange={(e) => setQuery(e.target.value)}
          data-testid="lh-search"
        />
      </div>
      <div className="flex flex-wrap gap-2" data-testid="lh-categories">
        <button
          type="button"
          onClick={() => setFilter('')}
          className={
            pill +
            (filter === '' ? ' bg-primary text-primary-foreground border-primary' : ' bg-muted hover:bg-muted/80')
          }
        >
          All
        </button>
        {cats?.categories.map((cat) => (
          <button
            key={cat.id}
            type="button"
            onClick={() => setFilter(cat.slug)}
            className={
              pill +
              (filter === cat.slug
                ? ' bg-primary text-primary-foreground border-primary'
                : ' bg-muted hover:bg-muted/80')
            }
            data-testid={'lh-cat-' + cat.slug}
          >
            {cat.name}
          </button>
        ))}
      </div>
      <Feed filter={filter} query={query.trim()} onOpen={(slug) => setActiveSlug(slug)} />
    </div>
  );
 }
--- a/client/src/pages/PeGuide.tsx
+++ b/client/src/pages/PeGuide.tsx
@ -0,0 +1,471 @@
 // ============================================================
 // PHYSICAL EXAM GUIDE — full React port.
 //
 // Renders:
 //   • Age-group + system pills (6 × 4 = 24 combinations)
 //   • System overview banner
 //   • CV system extras: APTM legend, cardiac sounds, innocent murmurs
 //   • Resp system extras: respiratory sounds library
 //   • Collapsible grading-scales reference (system-scoped)
 //   • Component checklist with per-step normal / abnormal / (unset)
 //     toggle, abnormal-hints hint list, pearl + significance callouts
 //   • Patient age / gender + model inputs
 //   • Generate Exam Report → POST /api/generate-pe-narrative
 //
 // PE_DATA is the full hierarchy ported verbatim from vanilla
 // peGuide.js (see client/src/data/pe-data.ts). Clinical reference
 // libraries (scales, APTM, sound files) live in pe-guide.ts.
 // ============================================================
 import { useMemo, useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 import type { PeNarrativeOk } from '@/shared/types';
 import {
  PE_DATA,
  AGE_GROUP_ORDER,
  SYSTEM_ORDER,
  SYSTEM_LABELS,
  type PeComponent,
  type PeStep,
 } from '@/data/pe-data';
 import {
  SCALES,
  SYSTEM_SCALES,
  APTM_LEGEND,
  INNOCENT_MURMURS,
  RESP_SOUNDS,
  CARDIAC_SOUNDS,
  type ScaleDef,
  type SoundEntry,
 } from '@/data/pe-guide';
 const card = 'rounded-lg border border-border bg-card p-5 space-y-3';
 const pill = 'px-3 py-1.5 rounded-full text-xs font-medium border transition-colors cursor-pointer';
 const btnPrimary = 'rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium disabled:opacity-50';
 const btnGhost = 'rounded-md border border-border bg-background px-3 py-2 text-sm font-medium hover:bg-muted disabled:opacity-50';
 const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-ring';
 type StepStatus = 'normal' | 'abnormal' | null;
 // Key used to identify a step in the status map across age-group / system.
 function stepKey(age: string, sys: string, componentIdx: number, stepIdx: number) {
  return `${age}/${sys}/${componentIdx}/${stepIdx}`;
 }
 function ScaleCard({ id, scale }: { id: string; scale: ScaleDef }) {
  return (
    <section className="rounded-md border border-border bg-background p-3" data-testid={'scale-' + id}>
      <h4 className="text-sm font-semibold mb-2">{scale.title}</h4>
      <table className="w-full text-xs">
        <tbody>
          {scale.rows.map(([labelText, desc], i) => (
            <tr key={i} className="border-b border-border last:border-0">
              <td className="py-1 pr-3 font-mono font-semibold whitespace-nowrap">{labelText}</td>
              <td className="py-1 text-muted-foreground">{desc}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </section>
  );
 }
 function SoundCard({ entry }: { entry: SoundEntry }) {
  return (
    <div className="rounded-md border border-border bg-background p-3 space-y-2" data-testid={'sound-' + entry.key}>
      <div className="text-sm font-semibold">{entry.title}</div>
      <audio controls preload="none" className="w-full">
        <source src={entry.src} />
      </audio>
      <div className="text-xs space-y-0.5 text-muted-foreground">
        <div><span className="font-semibold">Where:</span> {entry.where}</div>
        {entry.rate && <div><span className="font-semibold">Rate:</span> {entry.rate}</div>}
        <div><span className="font-semibold">Features:</span> {entry.features}</div>
        <div><span className="font-semibold">Clinical:</span> {entry.clinical}</div>
      </div>
    </div>
  );
 }
 function StepRow({
  step,
  status,
  onStatus,
 }: {
  step: PeStep;
  status: StepStatus;
  onStatus: (next: StepStatus) => void;
 }) {
  const base = 'text-xs font-medium px-2 py-1 rounded border';
  return (
    <div className="flex items-start gap-2 py-2 border-b border-border last:border-0">
      <div className="flex-1 min-w-0">
        <div className="text-sm font-medium">{step.label}</div>
        <div className="text-xs text-muted-foreground mt-0.5">
          <span className="font-semibold uppercase tracking-wide">Method:</span> {step.method}
        </div>
        <div className="text-xs text-muted-foreground">
          <span className="font-semibold uppercase tracking-wide">Normal:</span> {step.normal}
        </div>
      </div>
      <div className="flex flex-col sm:flex-row gap-1 flex-shrink-0">
        <button
          type="button"
          onClick={() => onStatus(status === 'normal' ? null : 'normal')}
          className={
            base + ' ' +
            (status === 'normal'
              ? 'bg-green-600 text-white border-green-600'
              : 'border-green-600 text-green-700 hover:bg-green-50 dark:hover:bg-green-950/30')
          }
        >
          Normal
        </button>
        <button
          type="button"
          onClick={() => onStatus(status === 'abnormal' ? null : 'abnormal')}
          className={
            base + ' ' +
            (status === 'abnormal'
              ? 'bg-destructive text-white border-destructive'
              : 'border-destructive text-destructive hover:bg-red-50 dark:hover:bg-red-950/30')
          }
        >
          Abnormal
        </button>
      </div>
    </div>
  );
 }
 function ComponentCard({
  age,
  sys,
  idx,
  comp,
  getStatus,
  setStatus,
 }: {
  age: string;
  sys: string;
  idx: number;
  comp: PeComponent;
  getStatus: (k: string) => StepStatus;
  setStatus: (k: string, next: StepStatus) => void;
 }) {
  return (
    <div className={card} data-testid={`pe-component-${age}-${sys}-${idx}`}>
      <h3 className="text-base font-semibold">{comp.name}</h3>
      <div>
        {comp.steps.map((step, si) => {
          const k = stepKey(age, sys, idx, si);
          return (
            <StepRow
              key={si}
              step={step}
              status={getStatus(k)}
              onStatus={(next) => setStatus(k, next)}
            />
          );
        })}
      </div>
      {comp.abnormalHints.length > 0 && (
        <div className="rounded-md bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900 p-3">
          <div className="text-xs font-semibold uppercase tracking-wide text-destructive mb-1">Watch for</div>
          <ul className="list-disc pl-5 text-xs text-red-900 dark:text-red-200 space-y-0.5">
            {comp.abnormalHints.map((h, hi) => <li key={hi}>{h}</li>)}
          </ul>
        </div>
      )}
      {comp.pearl && (
        <div className="rounded-md bg-amber-50 dark:bg-amber-950/30 border border-amber-300 dark:border-amber-800 p-3 text-xs text-amber-900 dark:text-amber-100">
          <span className="font-semibold uppercase tracking-wide">Pearl:</span> {comp.pearl}
        </div>
      )}
      {comp.significance && (
        <div className="rounded-md bg-sky-50 dark:bg-sky-950/30 border border-sky-200 dark:border-sky-900 p-3 text-xs text-sky-900 dark:text-sky-100">
          <span className="font-semibold uppercase tracking-wide">Significance:</span> {comp.significance}
        </div>
      )}
    </div>
  );
 }
 export default function PeGuide() {
  const [age, setAge] = useState<(typeof AGE_GROUP_ORDER)[number]>('toddler');
  const [sys, setSys] = useState<(typeof SYSTEM_ORDER)[number]>('msk');
  const [patientAge, setPatientAge] = useState('');
  const [patientGender, setPatientGender] = useState('');
  const [format, setFormat] = useState<'narrative' | 'list'>('narrative');
  const [statusMap, setStatusMap] = useState<Record<string, StepStatus>>({});
  const [narrative, setNarrative] = useState<string | null>(null);
  const group = PE_DATA[age];
  const section = group[sys];
  const generate = useMutation({
    mutationFn: (body: unknown) => api.post<PeNarrativeOk>('/api/generate-pe-narrative', body),
    onSuccess: (data) => setNarrative(data.narrative),
    onError: (e: Error) => setNarrative('Generation failed: ' + e.message),
  });
  const summary = useMemo(() => {
    let normal = 0, abnormal = 0, notAssessed = 0;
    section.components.forEach((c, ci) =>
      c.steps.forEach((_, si) => {
        const k = stepKey(age, sys, ci, si);
        const v = statusMap[k] ?? null;
        if (v === 'normal') normal++;
        else if (v === 'abnormal') abnormal++;
        else notAssessed++;
      }),
    );
    return { normal, abnormal, notAssessed };
  }, [age, sys, section, statusMap]);
  function reset() {
    // Only clear the current system's entries, not all state.
    setStatusMap((prev) => {
      const next = { ...prev };
      section.components.forEach((c, ci) =>
        c.steps.forEach((_, si) => { delete next[stepKey(age, sys, ci, si)]; }),
      );
      return next;
    });
    setNarrative(null);
  }
  function setAllNormal() {
    setStatusMap((prev) => {
      const next = { ...prev };
      section.components.forEach((c, ci) =>
        c.steps.forEach((_, si) => { next[stepKey(age, sys, ci, si)] = 'normal'; }),
      );
      return next;
    });
  }
  function onGenerate() {
    setNarrative(null);
    const steps: Array<{ component: string; label: string; method: string; normal: string; status: StepStatus; note?: string }> = [];
    section.components.forEach((c, ci) =>
      c.steps.forEach((st, si) => {
        steps.push({
          component: c.name,
          label: st.label,
          method: st.method,
          normal: st.normal,
          status: statusMap[stepKey(age, sys, ci, si)] ?? null,
        });
      }),
    );
    generate.mutate({
      steps,
      ageGroup: age,
      system: sys,
      patientAge: patientAge || undefined,
      patientGender: patientGender || undefined,
      format,
    });
  }
  const totalAssessed = summary.normal + summary.abnormal;
  return (
    <div className="max-w-5xl mx-auto p-6 space-y-5">
      <header>
        <h1 className="text-2xl font-semibold">Physical Exam Guide</h1>
        <p className="text-sm text-muted-foreground">
          Age-group and system-specific exam checklist with abnormal-finding hints. Toggle normal / abnormal
          on each step, then generate a narrative for your note.
        </p>
      </header>
      {/* Age-group pills */}
      <div className="space-y-2">
        <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">Age group</div>
        <div className="flex flex-wrap gap-2" data-testid="pe-age-group-pills">
          {AGE_GROUP_ORDER.map((g) => (
            <button
              key={g}
              type="button"
              onClick={() => setAge(g)}
              className={pill + (age === g ? ' bg-primary text-primary-foreground border-primary' : ' bg-muted hover:bg-muted/80 border-border')}
              data-testid={'pe-age-' + g}
            >
              {PE_DATA[g].label}
            </button>
          ))}
        </div>
      </div>
      {/* System pills */}
      <div className="space-y-2">
        <div className="text-xs font-semibold text-muted-foreground uppercase tracking-wide">System</div>
        <div className="flex flex-wrap gap-2" data-testid="pe-system-pills">
          {SYSTEM_ORDER.map((s) => (
            <button
              key={s}
              type="button"
              onClick={() => setSys(s)}
              className={pill + (sys === s ? ' bg-primary text-primary-foreground border-primary' : ' bg-muted hover:bg-muted/80 border-border')}
              data-testid={'pe-system-' + s}
            >
              {SYSTEM_LABELS[s]}
            </button>
          ))}
        </div>
      </div>
      {/* Overview */}
      <section className={card + ' border-l-4 border-l-primary'} data-testid="pe-overview">
        <h2 className="text-lg font-semibold">{group.label} — {SYSTEM_LABELS[sys]}</h2>
        <p className="text-sm text-muted-foreground">{section.overview}</p>
      </section>
      {/* System-specific references */}
      {sys === 'cv' && (
        <section className={card} data-testid="pe-cv-aptm">
          <h3 className="text-base font-semibold">Auscultation landmarks (APTM + Erb's)</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {APTM_LEGEND.map((p) => (
              <div key={p.letter} className="flex gap-3 items-start rounded-md border border-border p-3">
                <div
                  className="w-8 h-8 rounded-full flex items-center justify-center font-bold text-white flex-shrink-0"
                  style={{ background: p.color }}
                >
                  {p.letter}
                </div>
                <div className="min-w-0 text-sm">
                  <div className="font-semibold">{p.title}</div>
                  <div className="text-xs text-muted-foreground">{p.location}</div>
                  <div className="text-xs mt-1"><strong>Listen for:</strong> {p.listen}</div>
                  {p.innocent && <div className="text-xs text-green-700 dark:text-green-300 mt-1"><em>Innocent:</em> {p.innocent}</div>}
                </div>
              </div>
            ))}
          </div>
          <h3 className="text-base font-semibold mt-3">Cardiac sounds library</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {CARDIAC_SOUNDS.map((s) => <SoundCard key={s.key} entry={s} />)}
          </div>
          <h3 className="text-base font-semibold mt-3">Classic innocent murmurs</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {INNOCENT_MURMURS.map((m) => (
              <div key={m.name} className="rounded-md border border-green-200 dark:border-green-900 bg-green-50 dark:bg-green-950/30 p-3 text-sm space-y-1">
                <div className="font-semibold">{m.name}</div>
                <div className="text-xs text-muted-foreground">Age: {m.age} · Location: {m.location}</div>
                <div className="text-xs"><strong>Sound:</strong> {m.character}</div>
                <div className="text-xs"><strong>Confirm innocent:</strong> {m.confirm}</div>
              </div>
            ))}
          </div>
        </section>
      )}
      {sys === 'resp' && (
        <section className={card} data-testid="pe-resp-sounds">
          <h3 className="text-base font-semibold">Respiratory sounds library</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
            {RESP_SOUNDS.map((s) => <SoundCard key={s.key} entry={s} />)}
          </div>
        </section>
      )}
      {/* Grading scales (system-scoped, collapsible) */}
      {SYSTEM_SCALES[sys] && SYSTEM_SCALES[sys].length > 0 && (
        <details className={card} data-testid="pe-scales">
          <summary className="cursor-pointer font-semibold text-sm">Grading scales &amp; reference</summary>
          <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mt-3">
            {SYSTEM_SCALES[sys].map((sk: string) => {
              const scale = SCALES[sk];
              if (!scale) return null;
              return <ScaleCard key={sk} id={sk} scale={scale} />;
            })}
          </div>
        </details>
      )}
      {/* Checklist */}
      <section className="space-y-3" data-testid="pe-checklist">
        <div className="flex flex-wrap items-center justify-between gap-2">
          <h2 className="text-lg font-semibold">Exam checklist</h2>
          <div className="text-xs text-muted-foreground flex items-center gap-3">
            <span className="text-green-600">{summary.normal} normal</span>
            <span className="text-destructive">{summary.abnormal} abnormal</span>
            <span>{summary.notAssessed} not assessed</span>
          </div>
        </div>
        <div className="flex flex-wrap gap-2">
          <button type="button" onClick={setAllNormal} className={btnGhost} data-testid="btn-pe-all-normal">
            Mark all normal
          </button>
          <button type="button" onClick={reset} className={btnGhost} data-testid="btn-pe-reset">
            Reset
          </button>
        </div>
        <div className="grid grid-cols-1 gap-3">
          {section.components.map((c, ci) => (
            <ComponentCard
              key={ci}
              age={age}
              sys={sys}
              idx={ci}
              comp={c}
              getStatus={(k) => statusMap[k] ?? null}
              setStatus={(k, next) => setStatusMap((prev) => ({ ...prev, [k]: next }))}
            />
          ))}
        </div>
      </section>
      {/* Generate narrative */}
      <section className={card} data-testid="pe-generate">
        <h2 className="text-lg font-semibold">Generate Exam Report</h2>
        <p className="text-sm text-muted-foreground">Uses the statuses above + optional patient context.</p>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
          <input
            className={input}
            placeholder="Patient age (e.g. 3y)"
            value={patientAge}
            onChange={(e) => setPatientAge(e.target.value)}
          />
          <input
            className={input}
            placeholder="Patient gender (optional)"
            value={patientGender}
            onChange={(e) => setPatientGender(e.target.value)}
          />
          <select
            className={input}
            value={format}
            onChange={(e) => setFormat(e.target.value as 'narrative' | 'list')}
          >
            <option value="narrative">Narrative</option>
            <option value="list">List</option>
          </select>
        </div>
        <div className="flex items-center gap-3">
          <button
            type="button"
            className={btnPrimary}
            onClick={onGenerate}
            disabled={generate.isPending || totalAssessed === 0}
            data-testid="btn-pe-generate"
          >
            {generate.isPending ? 'Generating…' : 'Generate Exam Report'}
          </button>
          {totalAssessed === 0 && (
            <span className="text-xs text-muted-foreground">Mark at least one step before generating.</span>
          )}
        </div>
        {narrative && (
          <div className="rounded-md border border-border bg-muted/40 p-3 whitespace-pre-wrap text-sm" data-testid="pe-narrative">
            {narrative}
          </div>
        )}
      </section>
    </div>
  );
 }
--- a/client/src/pages/ResetPassword.tsx
+++ b/client/src/pages/ResetPassword.tsx
@ -0,0 +1,67 @@
 // ============================================================
 // RESET PASSWORD — landing for the email link (?token=xxx).
 // POSTs /api/auth/reset-password with {token, newPassword}.
 // ============================================================
 import { useState } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { api, ApiError } from '@/lib/api';
 const card = 'rounded-2xl border border-border bg-card p-6 shadow-lg space-y-4 w-full max-w-md';
 const btnPrimary = 'w-full rounded-md bg-primary text-primary-foreground px-4 py-3 text-sm font-semibold disabled:opacity-60';
 const input = 'w-full rounded-md border border-input bg-background px-3 py-2.5 text-sm outline-none focus:ring-2 focus:ring-ring';
 const label = 'block text-xs font-semibold text-muted-foreground mb-1';
 const msgOk = 'rounded-md bg-green-50 dark:bg-green-950/30 border border-green-200 dark:border-green-900 p-3 text-sm text-green-800 dark:text-green-100';
 const msgErr = 'rounded-md bg-red-50 dark:bg-red-950/30 border border-red-200 dark:border-red-900 p-3 text-sm text-red-800 dark:text-red-100';
 const msgInfo = 'rounded-md bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-900 p-3 text-sm text-amber-900 dark:text-amber-100';
 export default function ResetPassword() {
  const [params] = useSearchParams();
  const nav = useNavigate();
  const token = params.get('token') || '';
  const [newPassword, setNewPassword] = useState('');
  const [confirm, setConfirm] = useState('');
  const [err, setErr] = useState('');
  const [ok, setOk] = useState('');
  const [warn, setWarn] = useState('');
  const [busy, setBusy] = useState(false);
  async function submit(e: React.FormEvent) {
    e.preventDefault();
    setErr(''); setOk(''); setWarn('');
    if (!token) { setErr('Missing reset token. Open the reset link from your email.'); return; }
    if (newPassword.length < 8) { setErr('Password must be 8+ characters'); return; }
    if (newPassword !== confirm) { setErr('Passwords do not match'); return; }
    setBusy(true);
    try {
      const r = await api.post<{ passwordWarning?: string }>('/api/auth/reset-password', { token, newPassword });
      setOk('Password reset. You can now sign in.');
      if (r.passwordWarning) setWarn(r.passwordWarning);
      setTimeout(() => nav('/auth', { replace: true }), 2500);
    } catch (e) {
      setErr((e as ApiError).message || 'Reset failed. The link may have expired.');
    } finally { setBusy(false); }
  }
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 dark:from-slate-900 dark:via-slate-950 dark:to-slate-900 flex items-center justify-center p-4">
      <div className={card}>
        <header className="text-center space-y-1">
          <div className="text-4xl">🔑</div>
          <h1 className="text-xl font-bold">Set a new password</h1>
          <p className="text-xs text-muted-foreground">Choose a password at least 8 characters long.</p>
        </header>
        {err && <div className={msgErr}>{err}</div>}
        {ok && <div className={msgOk}>{ok}</div>}
        {warn && <div className={msgInfo}>{warn}</div>}
        <form onSubmit={submit} className="space-y-3" data-testid="reset-password-form">
          <div><label className={label}>New password</label><input type="password" required minLength={8} className={input} value={newPassword} onChange={(e) => setNewPassword(e.target.value)} autoFocus data-testid="reset-new" /></div>
          <div><label className={label}>Confirm new password</label><input type="password" required minLength={8} className={input} value={confirm} onChange={(e) => setConfirm(e.target.value)} data-testid="reset-confirm" /></div>
          <button type="submit" className={btnPrimary} disabled={busy || !token} data-testid="reset-submit">
            {busy ? 'Resetting…' : 'Reset password'}
          </button>
        </form>
      </div>
    </div>
  );
 }
--- a/client/src/pages/Settings.tsx
+++ b/client/src/pages/Settings.tsx
--- a/client/src/pages/SickVisit.tsx
+++ b/client/src/pages/SickVisit.tsx
@ -0,0 +1,224 @@
 // ============================================================
 // SICK VISIT — /api/sick-visit/note
 // ============================================================
 import { useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { api, ApiError } from '@/lib/api';
 import type { VisitNoteOk } from '@/shared/types';
 import { SickVisitRequestSchema, type SickVisitRequest } from '@/shared/schemas';
 import Recorder from '@/components/Recorder';
 import EncounterToolbar from '@/components/EncounterToolbar';
 import EditableResult from '@/components/EditableResult';
 import RosPeTable, { rosAllWnl, rosClear } from '@/components/RosPeTable';
 import DxPicker from '@/components/DxPicker';
 import {
  ROS_SYSTEMS,
  PE_SYSTEMS,
  formatRosForAI,
  formatDxForAI,
  type RosData,
  type DxEntry,
 } from '@shared/clinical/ros-pe-dx';
 const TYPE = 'sickvisit' as const;
 export default function SickVisit() {
  const [label, setLabel] = useState('');
  const [patientAge, setPatientAge] = useState('');
  const [patientGender, setPatientGender] = useState('');
  const [chiefComplaint, setChiefComplaint] = useState('');
  const [transcript, setTranscript] = useState('');
  const [interim, setInterim] = useState('');
  const [rosData, setRosData] = useState<RosData>({});
  const [peData, setPeData] = useState<RosData>({});
  const [diagnoses, setDiagnoses] = useState<DxEntry[]>([]);
  const [dxFreetext, setDxFreetext] = useState('');
  const [result, setResult] = useState<string | null>(null);
  const [validationError, setValidationError] = useState<string | null>(null);
  const [recError, setRecError] = useState<string | null>(null);
  const generate = useMutation<VisitNoteOk, Error, SickVisitRequest>({
    mutationFn: (body) => api.post<VisitNoteOk>('/api/sick-visit/note', body),
    onSuccess: (data) => setResult(data.note),
  });
  function submit(e: React.FormEvent) {
    e.preventDefault();
    setValidationError(null);
    const rosText = formatRosForAI(ROS_SYSTEMS, rosData, 'Review of Systems');
    const peText = formatRosForAI(PE_SYSTEMS, peData, 'Physical Examination');
    const dxText = formatDxForAI(diagnoses, dxFreetext);
    const body: SickVisitRequest = {
      patientAge, patientGender, chiefComplaint,
      transcript: (interim || transcript).trim(),
      ros: rosText || undefined,
      physicalExam: peText || undefined,
      diagnoses: dxText || undefined,
    };
    const parsed = SickVisitRequestSchema.safeParse(body);
    if (!parsed.success) {
      setValidationError(parsed.error.issues.map((i: { message: string }) => i.message).join(', '));
      return;
    }
    setResult(null);
    generate.mutate(parsed.data);
  }
  const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm';
  const displayedTranscript = interim || transcript;
  return (
    <div className="max-w-4xl mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">Sick Visit</h1>
        <p className="text-sm text-muted-foreground">
          Chief complaint + transcript → structured sick-visit note.
        </p>
      </header>
      <EncounterToolbar
        type={TYPE}
        label={label} setLabel={setLabel}
        transcript={transcript} generatedNote={result || ''}
        partialData={{ age: patientAge, gender: patientGender, chiefComplaint, rosData, peData, diagnoses, dxFreetext }}
        onLoad={(enc) => {
          setTranscript(enc.transcript || '');
          setInterim('');
          setResult(enc.generated_note || null);
          try {
            const pd = enc.partial_data ? JSON.parse(enc.partial_data) : null;
            if (pd?.age) setPatientAge(pd.age);
            if (pd?.gender) setPatientGender(pd.gender);
            if (pd?.chiefComplaint) setChiefComplaint(pd.chiefComplaint);
            if (pd?.rosData) setRosData(pd.rosData);
            if (pd?.peData) setPeData(pd.peData);
            if (pd?.diagnoses) setDiagnoses(pd.diagnoses);
            if (pd?.dxFreetext) setDxFreetext(pd.dxFreetext);
          } catch { /* ignore */ }
          setLabel(enc.label || '');
        }}
        onClear={() => {
          setTranscript(''); setInterim(''); setResult(null); setValidationError(null);
          setPatientAge(''); setPatientGender(''); setChiefComplaint('');
          setRosData({}); setPeData({}); setDiagnoses([]); setDxFreetext('');
        }}
      />
      <form onSubmit={submit} className="space-y-4">
        <div className="grid grid-cols-3 gap-3">
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Age</span>
            <input className={input} placeholder="e.g. 4 years" value={patientAge} onChange={(e) => setPatientAge(e.target.value)} />
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Gender</span>
            <select className={input} value={patientGender} onChange={(e) => setPatientGender(e.target.value)}>
              <option value="">Select</option>
              <option>Male</option>
              <option>Female</option>
            </select>
          </label>
          <label className="flex flex-col gap-1 col-span-3 md:col-span-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Chief complaint</span>
            <input className={input} placeholder="e.g. Fever x 2 days" value={chiefComplaint} onChange={(e) => setChiefComplaint(e.target.value)} />
          </label>
        </div>
        <Recorder
          module="sickvisit"
          onTranscript={(text, meta) => {
            setTranscript((prev) => (meta.appended ? (prev ? prev + ' ' + text : text) : text));
            setInterim('');
            setRecError(null);
          }}
          onInterim={(t) => setInterim(t ? (transcript ? transcript + ' ' + t : t) : '')}
          onError={(msg) => setRecError(msg)}
        />
        {recError && <div className="text-sm text-destructive">{recError}</div>}
        <label className="flex flex-col gap-1">
          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Transcript / dictation</span>
          <textarea
            className={input + ' min-h-[200px] font-mono text-sm'}
            placeholder="Click Start recording, or type / paste encounter narrative."
            value={displayedTranscript}
            onChange={(e) => { setTranscript(e.target.value); setInterim(''); }}
          />
        </label>
        <div className="rounded-lg border border-border bg-card">
          <div className="px-3 py-2 flex items-center justify-between bg-muted/40 border-b border-border">
            <span className="text-xs font-semibold uppercase tracking-wider">Review of Systems</span>
            <div className="flex gap-1">
              <button type="button" onClick={() => setRosData(rosAllWnl(ROS_SYSTEMS, rosData))} className="text-xs rounded border border-border px-2 py-1 hover:bg-muted">✓ All WNL</button>
              <button type="button" onClick={() => setRosData(rosClear(rosData, ROS_SYSTEMS))} className="text-xs rounded border border-border px-2 py-1 hover:bg-muted">Clear</button>
            </div>
          </div>
          <RosPeTable
            systems={ROS_SYSTEMS}
            data={rosData}
            onChange={setRosData}
            btnLabels={{ wnl: 'WNL', abnormal: 'Abnormal', notrev: 'Not reviewed' }}
            testIdPrefix="sv-ros"
          />
        </div>
        <div className="rounded-lg border border-border bg-card">
          <div className="px-3 py-2 flex items-center justify-between bg-muted/40 border-b border-border">
            <span className="text-xs font-semibold uppercase tracking-wider">Physical Examination</span>
            <div className="flex gap-1">
              <button type="button" onClick={() => setPeData(rosAllWnl(PE_SYSTEMS, peData))} className="text-xs rounded border border-border px-2 py-1 hover:bg-muted">✓ All Normal</button>
              <button type="button" onClick={() => setPeData(rosClear(peData, PE_SYSTEMS))} className="text-xs rounded border border-border px-2 py-1 hover:bg-muted">Clear</button>
            </div>
          </div>
          <RosPeTable
            systems={PE_SYSTEMS}
            data={peData}
            onChange={setPeData}
            btnLabels={{ wnl: 'Normal', abnormal: 'Abnormal', notrev: 'Not examined' }}
            testIdPrefix="sv-pe"
          />
        </div>
        <div className="rounded-lg border border-border bg-card p-3 space-y-2">
          <span className="text-xs font-semibold uppercase tracking-wider">Diagnoses (ICD-10)</span>
          <DxPicker value={diagnoses} onChange={setDiagnoses} testIdPrefix="sv-dx" />
          <label className="block">
            <span className="text-[11px] text-muted-foreground">Additional free-text diagnosis / note (optional)</span>
            <input
              type="text"
              value={dxFreetext}
              onChange={(e) => setDxFreetext(e.target.value)}
              className={input + ' text-sm'}
              placeholder="e.g. Follow up in 48 hours if not improving"
            />
          </label>
        </div>
        {validationError && <div className="text-sm text-destructive">{validationError}</div>}
        {generate.error && <div className="text-sm text-destructive">{(generate.error as ApiError).message}</div>}
        <button
          type="submit"
          disabled={generate.isPending || !chiefComplaint.trim()}
          className="rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium disabled:opacity-50"
        >
          {generate.isPending ? 'Generating…' : 'Generate Note'}
        </button>
      </form>
      {result !== null && (
        <EditableResult
          text={result}
          onChange={setResult}
          section="sickvisit"
          title="Sick Visit Note"
          exportLabel="sick-visit-note"
          exportType="sick-visit"
          sourceContext={displayedTranscript}
        />
      )}
    </div>
  );
 }
--- a/client/src/pages/Soap.tsx
+++ b/client/src/pages/Soap.tsx
@ -0,0 +1,165 @@
 // ============================================================
 // SOAP — transcript → SOAP note via /api/generate-soap
 // ============================================================
 import { useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { api, ApiError } from '@/lib/api';
 import type { SoapOk } from '@/shared/types';
 import { SoapRequestSchema, type SoapRequest } from '@/shared/schemas';
 import Recorder from '@/components/Recorder';
 import EncounterToolbar from '@/components/EncounterToolbar';
 import EditableResult from '@/components/EditableResult';
 type SoapType = 'full' | 'subjective';
 const TYPE = 'soap' as const;
 export default function Soap() {
  const [label, setLabel] = useState('');
  const [patientAge, setPatientAge] = useState('');
  const [patientGender, setPatientGender] = useState('');
  const [type, setType] = useState<SoapType>('full');
  const [transcript, setTranscript] = useState('');
  const [interim, setInterim] = useState('');
  const [additionalInstructions, setAdditionalInstructions] = useState('');
  const [result, setResult] = useState<string | null>(null);
  const [validationError, setValidationError] = useState<string | null>(null);
  const [recError, setRecError] = useState<string | null>(null);
  const generate = useMutation<SoapOk, Error, SoapRequest>({
    mutationFn: (body) => api.post<SoapOk>('/api/generate-soap', body),
    onSuccess: (data) => setResult(data.soap),
  });
  function submit(e: React.FormEvent) {
    e.preventDefault();
    setValidationError(null);
    const body: SoapRequest = { transcript: (interim || transcript).trim(), patientAge, patientGender, type, additionalInstructions };
    const parsed = SoapRequestSchema.safeParse(body);
    if (!parsed.success) {
      setValidationError(parsed.error.issues.map((i: { message: string }) => i.message).join(', '));
      return;
    }
    setResult(null);
    generate.mutate(parsed.data);
  }
  const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm';
  const displayedTranscript = interim || transcript;
  return (
    <div className="max-w-4xl mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">SOAP Note</h1>
        <p className="text-sm text-muted-foreground">
          Encounter transcript → full SOAP or subjective-only narrative.
        </p>
      </header>
      <EncounterToolbar
        type={TYPE}
        label={label} setLabel={setLabel}
        transcript={transcript} generatedNote={result || ''}
        partialData={{ age: patientAge, gender: patientGender, type, additionalInstructions }}
        onLoad={(enc) => {
          setTranscript(enc.transcript || '');
          setInterim('');
          setResult(enc.generated_note || null);
          try {
            const pd = enc.partial_data ? JSON.parse(enc.partial_data) : null;
            if (pd?.age) setPatientAge(pd.age);
            if (pd?.gender) setPatientGender(pd.gender);
            if (pd?.type) setType(pd.type);
            if (pd?.additionalInstructions) setAdditionalInstructions(pd.additionalInstructions);
          } catch { /* ignore */ }
          setLabel(enc.label || '');
        }}
        onClear={() => {
          setTranscript(''); setInterim(''); setResult(null); setValidationError(null);
          setPatientAge(''); setPatientGender(''); setType('full'); setAdditionalInstructions('');
        }}
      />
      <form onSubmit={submit} className="space-y-4">
        <div className="grid grid-cols-3 gap-3">
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Age</span>
            <input className={input} placeholder="e.g. 3 years" value={patientAge} onChange={(e) => setPatientAge(e.target.value)} />
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Gender</span>
            <select className={input} value={patientGender} onChange={(e) => setPatientGender(e.target.value)}>
              <option value="">Select</option>
              <option>Male</option>
              <option>Female</option>
            </select>
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Output type</span>
            <select className={input} value={type} onChange={(e) => setType(e.target.value as SoapType)}>
              <option value="full">Full SOAP</option>
              <option value="subjective">Subjective only</option>
            </select>
          </label>
        </div>
        <Recorder
          module="soap"
          onTranscript={(text, meta) => {
            setTranscript((prev) => (meta.appended ? (prev ? prev + ' ' + text : text) : text));
            setInterim('');
            setRecError(null);
          }}
          onInterim={(t) => setInterim(t ? (transcript ? transcript + ' ' + t : t) : '')}
          onError={(msg) => setRecError(msg)}
        />
        {recError && <div className="text-sm text-destructive">{recError}</div>}
        <label className="flex flex-col gap-1">
          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Transcript</span>
          <textarea
            className={input + ' min-h-[200px] font-mono text-sm'}
            placeholder="Click Start recording, or type / paste the encounter transcript."
            value={displayedTranscript}
            onChange={(e) => { setTranscript(e.target.value); setInterim(''); }}
          />
        </label>
        <label className="flex flex-col gap-1">
          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">
            Additional instructions <span className="text-muted-foreground normal-case font-normal">(optional)</span>
          </span>
          <textarea
            className={input + ' min-h-[60px] text-sm'}
            placeholder="e.g., 'Include return precautions', 'Add differential for otitis media'"
            value={additionalInstructions}
            onChange={(e) => setAdditionalInstructions(e.target.value)}
          />
        </label>
        {validationError && <div className="text-sm text-destructive">{validationError}</div>}
        {generate.error && <div className="text-sm text-destructive">{(generate.error as ApiError).message}</div>}
        <button
          type="submit"
          disabled={generate.isPending || !displayedTranscript.trim()}
          className="rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium disabled:opacity-50"
        >
          {generate.isPending ? 'Generating…' : 'Generate SOAP'}
        </button>
      </form>
      {result !== null && (
        <EditableResult
          text={result}
          onChange={setResult}
          section="soap"
          title="Generated SOAP"
          exportLabel="soap-note"
          exportType="soap"
          sourceContext={displayedTranscript}
        />
      )}
    </div>
  );
 }
--- a/client/src/pages/VaxSchedule.tsx
+++ b/client/src/pages/VaxSchedule.tsx
@ -0,0 +1,91 @@
 // ============================================================
 // VACCINE SCHEDULE — full AAP/ACIP table, sourced live from
 // GET /api/schedule-data.
 // ============================================================
 import { useQuery } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 interface VisitAge { id: string; label: string; era: string }
 interface VaccineDose { vaccine: string; dose?: number | string; notes?: string }
 interface ScheduleData {
  visitAges: VisitAge[];
  periodicity: Record<string, { vaccines?: VaccineDose[] }>;
  vaccineFullNames: Record<string, string>;
 }
 export default function VaxSchedule() {
  const { data, isLoading, error } = useQuery<ScheduleData>({
    queryKey: ['schedule-data'],
    queryFn: () => api.get<ScheduleData>('/api/schedule-data'),
  });
  if (isLoading) return <div className="p-6 text-sm text-muted-foreground">Loading schedule…</div>;
  if (error) return <div className="p-6 text-sm text-destructive">{(error as Error).message}</div>;
  if (!data) return null;
  const visitsWithVax = data.visitAges.filter((v) => data.periodicity[v.id]?.vaccines?.length);
  const vaxKeys: string[] = [];
  const seen = new Set<string>();
  visitsWithVax.forEach((v) => {
    data.periodicity[v.id].vaccines!.forEach((dose) => {
      if (!seen.has(dose.vaccine)) { seen.add(dose.vaccine); vaxKeys.push(dose.vaccine); }
    });
  });
  return (
    <div className="max-w-full mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">Vaccine Schedule</h1>
        <p className="text-sm text-muted-foreground">
          AAP/ACIP 2025 complete immunization schedule (0–18 years).
        </p>
      </header>
      <div className="rounded-lg border border-border overflow-auto bg-card">
        <table className="text-xs">
          <thead className="sticky top-0 bg-muted">
            <tr>
              <th className="text-left font-semibold px-3 py-2 border-b border-border min-w-[180px] sticky left-0 bg-muted">
                Vaccine
              </th>
              {visitsWithVax.map((v) => (
                <th key={v.id} className="px-2 py-2 border-b border-border text-center whitespace-nowrap">
                  {v.label}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {vaxKeys.map((key) => (
              <tr key={key} className="even:bg-muted/20">
                <td className="px-3 py-2 border-b border-border font-medium sticky left-0 bg-card">
                  {data.vaccineFullNames[key] || key}
                </td>
                {visitsWithVax.map((v) => {
                  const vaxList = data.periodicity[v.id].vaccines || [];
                  const match = vaxList.find((d) => d.vaccine === key);
                  if (!match) return <td key={v.id} className="border-b border-border" />;
                  const label = typeof match.dose === 'number' ? '#' + match.dose : (match.dose || '•');
                  return (
                    <td
                      key={v.id}
                      className="border-b border-border text-center bg-primary/10 font-mono text-[11px]"
                      title={match.notes || `${key} dose ${match.dose}`}
                    >
                      {label}
                    </td>
                  );
                })}
              </tr>
            ))}
          </tbody>
        </table>
      </div>
      <p className="text-xs text-muted-foreground">
        Hover any filled cell for notes. Sources: AAP/Bright Futures (Feb 2025), CDC Child &amp; Adolescent Immunization Schedule (2025).
      </p>
    </div>
  );
 }
--- a/client/src/pages/WellVisit.tsx
+++ b/client/src/pages/WellVisit.tsx
@ -0,0 +1,83 @@
 // ============================================================
 // WELL VISIT — sub-tab shell. Mirrors public/components/wellvisit.html:
 //   • By Visit Age   — AAP Bright Futures recs per visit
 //   • Milestones     — developmental checklist → AI narrative
 //   • SSHADESS       — psychosocial screening (12+ only)
 //   • Visit Note     — final preventive-care note generator
 //
 // SSHADESS pill is hidden for under-12 visits to match vanilla.
 // Each panel lazy-loads so the initial WellVisit bundle stays small.
 // ============================================================
 import { Suspense, lazy, useState } from 'react';
 const ByVisitAge = lazy(() => import('./wellvisit/ByVisitAge'));
 const Milestones = lazy(() => import('./wellvisit/Milestones'));
 const Shadess    = lazy(() => import('./wellvisit/Shadess'));
 const VisitNote  = lazy(() => import('./wellvisit/VisitNote'));
 type SubTab = 'byvisit' | 'milestones' | 'shadess' | 'note';
 const TABS: { id: SubTab; icon: string; label: string }[] = [
  { id: 'byvisit',    icon: '👶', label: 'By Visit Age' },
  { id: 'milestones', icon: '🍼', label: 'Milestones' },
  { id: 'shadess',    icon: '🧠', label: 'SSHADESS (12+)' },
  { id: 'note',       icon: '📄', label: 'Visit Note' },
 ];
 const STORAGE_KEY = 'ped_wellvisit_subtab';
 function loadSubTab(): SubTab {
  try {
    const v = localStorage.getItem(STORAGE_KEY);
    if (v === 'byvisit' || v === 'milestones' || v === 'shadess' || v === 'note') return v;
  } catch { /* ignore */ }
  return 'byvisit';
 }
 export default function WellVisit() {
  const [active, setActive] = useState<SubTab>(loadSubTab);
  function pick(tab: SubTab) {
    setActive(tab);
    try { localStorage.setItem(STORAGE_KEY, tab); } catch { /* ignore */ }
  }
  return (
    <div className="max-w-5xl mx-auto p-6 space-y-4">
      <header>
        <h1 className="text-2xl font-semibold">Well Visit / Preventive Care</h1>
        <p className="text-sm text-muted-foreground">
          AAP 2025 Bright Futures periodicity — vaccines, screenings, billing codes, milestones, SSHADESS, and the encounter note.
        </p>
      </header>
      <div className="flex flex-wrap gap-2" data-testid="wellvisit-subnav">
        {TABS.map((t) => (
          <button
            key={t.id}
            type="button"
            onClick={() => pick(t.id)}
            className={
              'px-3 py-1.5 rounded-full text-xs font-medium border transition-colors ' +
              (active === t.id
                ? 'bg-primary text-primary-foreground border-primary'
                : 'bg-muted hover:bg-muted/80 border-border')
            }
            data-testid={'wellvisit-pill-' + t.id}
          >
            <span className="mr-1" aria-hidden>{t.icon}</span>
            {t.label}
          </button>
        ))}
      </div>
      <Suspense fallback={<div className="text-sm text-muted-foreground">Loading…</div>}>
        {active === 'byvisit'    && <ByVisitAge />}
        {active === 'milestones' && <Milestones />}
        {active === 'shadess'    && <Shadess />}
        {active === 'note'       && <VisitNote />}
      </Suspense>
    </div>
  );
 }
--- a/client/src/pages/cms/AiGenerator.tsx
+++ b/client/src/pages/cms/AiGenerator.tsx
@ -0,0 +1,332 @@
 // ============================================================
 // AiGenerator — generate Learning Hub content via AI from
 //   1. a topic description
 //   2. one or more uploaded files (PDF, DOCX, TXT, …)
 //   3. a Nextcloud/WebDAV file the user picks from a browser
 //
 // Faithful port of public/js/learningHub.js (@be14578) functions
 // openAiPanel / updateAiOptions / runAiGenerate / applyAiContent /
 // browseWebdav. Posts to the existing /api/admin/learning/
 // ai-generate endpoint as multipart/form-data; the response payload
 // (title, subject, body, questions) is handed back to the parent
 // via `onGenerated` so the Content Editor can apply it.
 // ============================================================
 import { useEffect, useRef, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { api, ApiError } from '@/lib/api';
 import type { CmsQuestion, ContentType } from './cms-types';
 interface Props {
  contentType: ContentType;
  onChangeType: (t: ContentType) => void;
  onGenerated: (payload: GeneratedPayload, contentType: ContentType) => void;
  onCancel: () => void;
 }
 export interface GeneratedPayload {
  title?: string;
  subject?: string;
  body?: string;
  marpMarkdown?: string;
  questions?: CmsQuestion[];
 }
 interface MeOk { success: true; user: { nextcloud_url?: string | null } }
 interface WebdavItem { path: string; name: string; isDir: boolean; contentType?: string; size?: number }
 interface WebdavOk { success: true; path: string; parentPath: string; items: WebdavItem[] }
 const input = 'rounded-md border border-input bg-background px-2 py-1 text-sm';
 const btn = 'inline-flex items-center gap-1 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium hover:bg-muted disabled:opacity-50';
 const btnPrimary = 'inline-flex items-center gap-1 rounded-md bg-primary text-primary-foreground px-3 py-1.5 text-xs font-medium disabled:opacity-50';
 type Tab = 'topic' | 'upload' | 'webdav';
 export default function AiGenerator(props: Props) {
  const [tab, setTab] = useState<Tab>('topic');
  const [topic, setTopic] = useState('');
  const [uploadCtx, setUploadCtx] = useState('');
  const [webdavCtx, setWebdavCtx] = useState('');
  const [files, setFiles] = useState<File[]>([]);
  const [refinement, setRefinement] = useState('');
  const [wordCount, setWordCount] = useState('');
  const [slideCount, setSlideCount] = useState('');
  const [genQuestions, setGenQuestions] = useState(false);
  const [qCount, setQCount] = useState(5);
  const [busy, setBusy] = useState(false);
  const [err, setErr] = useState<string | null>(null);
  const fileInputRef = useRef<HTMLInputElement>(null);
  const me = useQuery<MeOk>({
    queryKey: ['auth-me'],
    queryFn: () => api.get<MeOk>('/api/auth/me'),
  });
  const webdavConnected = !!me.data?.user?.nextcloud_url;
  const showWords = props.contentType !== 'quiz' && props.contentType !== 'presentation';
  const showSlides = props.contentType === 'presentation';
  const quizAlwaysOn = props.contentType === 'quiz';
  const showQCount = quizAlwaysOn || genQuestions;
  useEffect(() => {
    if (quizAlwaysOn) setGenQuestions(true);
  }, [quizAlwaysOn]);
  async function run() {
    setErr(null);
    const fd = new FormData();
    fd.append('contentType', props.contentType);
    fd.append('questionCount', String(showQCount ? qCount : 0));
    if (refinement.trim()) fd.append('refinement', refinement.trim());
    if (showWords && wordCount) fd.append('wordCount', wordCount);
    if (showSlides && slideCount) fd.append('slideCount', slideCount);
    if (tab === 'topic') {
      if (!topic.trim()) { setErr('Describe what you want AI to create'); return; }
      fd.append('topic', topic.trim());
    } else if (tab === 'upload') {
      if (files.length === 0) { setErr('Select at least one file'); return; }
      for (const f of files) fd.append('files', f);
      if (uploadCtx.trim()) fd.append('topic', uploadCtx.trim());
    } else {
      // webdav
      if (!selectedPath) { setErr('Select a file from Nextcloud'); return; }
      fd.append('webdavPath', selectedPath);
      if (webdavCtx.trim()) fd.append('topic', webdavCtx.trim());
    }
    setBusy(true);
    try {
      const r = await fetch('/api/admin/learning/ai-generate', {
        method: 'POST',
        credentials: 'include',
        body: fd,
      });
      const data = await r.json();
      if (!data.success) throw new Error(data.error || 'Generation failed');
      // Presentation returns marpMarkdown + optional questions directly;
      // articles/pearls/quizzes return everything nested under `content`.
      const payload: GeneratedPayload = data.contentType === 'presentation'
        ? { marpMarkdown: data.marpMarkdown, questions: data.questions }
        : (data.content || {});
      props.onGenerated(payload, props.contentType);
    } catch (e) {
      setErr((e as ApiError).message || 'Generation failed');
    } finally {
      setBusy(false);
    }
  }
  // WebDAV browser state (only used in the webdav tab)
  const [currentPath, setCurrentPath] = useState('/');
  const [webdavData, setWebdavData] = useState<WebdavOk | null>(null);
  const [webdavErr, setWebdavErr] = useState<string | null>(null);
  const [selectedPath, setSelectedPath] = useState('');
  const [selectedName, setSelectedName] = useState('');
  useEffect(() => {
    if (tab !== 'webdav' || !webdavConnected) return;
    setWebdavErr(null);
    api.get<WebdavOk>('/api/admin/learning/webdav-browse?path=' + encodeURIComponent(currentPath))
      .then(setWebdavData)
      .catch((e) => setWebdavErr((e as ApiError).message || 'WebDAV browse failed'));
  }, [tab, currentPath, webdavConnected]);
  return (
    <div className="rounded-lg border border-primary/30 bg-primary/5 p-4 space-y-3" data-testid="cms-ai-panel">
      <div className="flex items-center gap-2">
        <strong className="text-sm">✨ Generate with AI</strong>
        <button type="button" onClick={props.onCancel} className={btn + ' ml-auto'}>✕ Close</button>
      </div>
      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <label className="block">
          <span className="text-[11px] uppercase font-semibold text-muted-foreground">Type</span>
          <select
            className={input + ' w-full'}
            value={props.contentType}
            onChange={(e) => props.onChangeType(e.target.value as ContentType)}
            data-testid="cms-ai-ctype"
          >
            <option value="article">Article</option>
            <option value="pearl">Pearl</option>
            <option value="quiz">Quiz</option>
            <option value="presentation">Presentation</option>
          </select>
        </label>
        {showWords && (
          <label className="block">
            <span className="text-[11px] uppercase font-semibold text-muted-foreground">Target word count (optional)</span>
            <input
              type="number"
              min={100}
              value={wordCount}
              onChange={(e) => setWordCount(e.target.value)}
              className={input + ' w-full'}
              placeholder="e.g. 800"
            />
          </label>
        )}
        {showSlides && (
          <label className="block">
            <span className="text-[11px] uppercase font-semibold text-muted-foreground">Slide count</span>
            <input
              type="number"
              min={3}
              max={40}
              value={slideCount}
              onChange={(e) => setSlideCount(e.target.value)}
              className={input + ' w-full'}
              placeholder="e.g. 10"
            />
          </label>
        )}
      </div>
      {!quizAlwaysOn && (
        <label className="flex items-center gap-2 text-sm">
          <input
            type="checkbox"
            checked={genQuestions}
            onChange={(e) => setGenQuestions(e.target.checked)}
          />
          Also generate quiz questions
        </label>
      )}
      {showQCount && (
        <label className="flex items-center gap-2 text-sm">
          <span>Question count:</span>
          <input
            type="number"
            min={1}
            max={20}
            value={qCount}
            onChange={(e) => setQCount(Math.max(1, Math.min(20, Number(e.target.value) || 1)))}
            className={input + ' w-20'}
          />
        </label>
      )}
      <div className="flex gap-1 border-b border-border">
        <button type="button" onClick={() => setTab('topic')}
          className={'px-3 py-1.5 text-xs border-b-2 -mb-px ' + (tab === 'topic' ? 'border-primary text-primary font-semibold' : 'border-transparent hover:bg-muted')}>
          Topic
        </button>
        <button type="button" onClick={() => setTab('upload')}
          className={'px-3 py-1.5 text-xs border-b-2 -mb-px ' + (tab === 'upload' ? 'border-primary text-primary font-semibold' : 'border-transparent hover:bg-muted')}>
          Upload files
        </button>
        {webdavConnected && (
          <button type="button" onClick={() => setTab('webdav')}
            className={'px-3 py-1.5 text-xs border-b-2 -mb-px ' + (tab === 'webdav' ? 'border-primary text-primary font-semibold' : 'border-transparent hover:bg-muted')}>
            Nextcloud
          </button>
        )}
      </div>
      {tab === 'topic' && (
        <textarea
          className={input + ' w-full min-h-[100px] font-mono text-sm'}
          placeholder="Describe what you want AI to create (e.g. 'Bronchiolitis management for attending teaching rounds, high school education level')"
          value={topic}
          onChange={(e) => setTopic(e.target.value)}
          data-testid="cms-ai-topic"
        />
      )}
      {tab === 'upload' && (
        <div className="space-y-2">
          <input
            ref={fileInputRef}
            type="file"
            multiple
            accept=".pdf,.docx,.odt,.rtf,.txt,.md,.html,.htm,.pptx,.epub,image/*"
            onChange={(e) => setFiles(Array.from(e.target.files || []))}
            className="text-xs"
            data-testid="cms-ai-files"
          />
          {files.length > 0 && (
            <ul className="text-xs text-muted-foreground">
              {files.map((f, i) => <li key={i}>📄 {f.name} <span className="opacity-60">({Math.round(f.size / 1024)} KB)</span></li>)}
            </ul>
          )}
          <textarea
            className={input + ' w-full min-h-[60px] text-sm'}
            placeholder="Optional: extra context / framing for the AI"
            value={uploadCtx}
            onChange={(e) => setUploadCtx(e.target.value)}
          />
        </div>
      )}
      {tab === 'webdav' && (
        <div className="space-y-2">
          {webdavErr && <div className="text-sm text-destructive">{webdavErr}</div>}
          {webdavData && (
            <div className="rounded-md border border-border bg-background">
              <div className="px-2 py-1 flex items-center gap-2 text-xs border-b border-border bg-muted/40">
                <span className="font-mono text-muted-foreground">{webdavData.path}</span>
                {currentPath !== '/' && (
                  <button type="button" onClick={() => setCurrentPath(webdavData.parentPath)} className={btn + ' ml-auto'}>⬆ Up</button>
                )}
              </div>
              <div className="max-h-60 overflow-auto">
                {webdavData.items.length === 0 && <div className="px-2 py-3 text-xs text-muted-foreground italic">Empty folder.</div>}
                {webdavData.items.map((it) => (
                  <button
                    key={it.path}
                    type="button"
                    onClick={() => {
                      if (it.isDir) { setCurrentPath(it.path); setSelectedPath(''); setSelectedName(''); }
                      else { setSelectedPath(it.path); setSelectedName(it.name); }
                    }}
                    className={
                      'w-full text-left px-2 py-1.5 text-sm flex items-center gap-2 border-b border-border last:border-0 hover:bg-muted ' +
                      (selectedPath === it.path ? 'bg-primary/10' : '')
                    }
                  >
                    <span>{it.isDir ? '📁' : '📄'}</span>
                    <span className="truncate">{it.name}</span>
                    {!it.isDir && typeof it.size === 'number' && (
                      <span className="ml-auto text-[10px] text-muted-foreground">{Math.round((it.size || 0) / 1024)} KB</span>
                    )}
                  </button>
                ))}
              </div>
            </div>
          )}
          {selectedPath && (
            <div className="text-xs text-muted-foreground">
              Selected: <span className="font-semibold">{selectedName}</span>
            </div>
          )}
          <textarea
            className={input + ' w-full min-h-[60px] text-sm'}
            placeholder="Optional: extra context / framing for the AI"
            value={webdavCtx}
            onChange={(e) => setWebdavCtx(e.target.value)}
          />
        </div>
      )}
      <label className="block">
        <span className="text-[11px] uppercase font-semibold text-muted-foreground">Refinement (optional)</span>
        <input
          type="text"
          value={refinement}
          onChange={(e) => setRefinement(e.target.value)}
          className={input + ' w-full'}
          placeholder="e.g. 'Keep it under 500 words', 'Focus on outpatient management'"
        />
      </label>
      {err && <div className="text-sm text-destructive">{err}</div>}
      <div className="flex gap-2">
        <button type="button" onClick={run} disabled={busy} className={btnPrimary} data-testid="cms-ai-run">
          {busy ? '⌛ Generating…' : '✨ Generate content'}
        </button>
      </div>
    </div>
  );
 }
--- a/client/src/pages/cms/CategoriesPanel.tsx
+++ b/client/src/pages/cms/CategoriesPanel.tsx
@ -0,0 +1,146 @@
 // CMS categories sidebar — list, add, delete, plus the status +
 // category filters that drive the content list. Mirrors the vanilla
 // cms-sidebar / cms-add-cat / cms-filter-status / cms-filter-category
 // from public/components/cms.html.
 import { useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { api, ApiError } from '@/lib/api';
 import ConfirmModal from '@/components/ConfirmModal';
 import type { CmsCategory } from './cms-types';
 interface CategoriesOk { success: true; categories: CmsCategory[] }
 interface Props {
  statusFilter: 'all' | 'published' | 'draft';
  onStatusFilter: (s: 'all' | 'published' | 'draft') => void;
  categoryFilter: number | 'all';
  onCategoryFilter: (id: number | 'all') => void;
 }
 const sm = 'rounded-md border border-input bg-background px-2 py-1 text-xs';
 export default function CategoriesPanel(props: Props) {
  const qc = useQueryClient();
  const [name, setName] = useState('');
  const [err, setErr] = useState<string | null>(null);
  const [pendingDelete, setPendingDelete] = useState<CmsCategory | null>(null);
  const { data } = useQuery<CategoriesOk>({
    queryKey: ['cms-categories'],
    queryFn: () => api.get<CategoriesOk>('/api/learning-admin/categories'),
  });
  const addCat = useMutation<{ success: true; id: number }, Error, string>({
    mutationFn: (n) => api.post('/api/learning-admin/categories', { name: n }),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['cms-categories'] });
      qc.invalidateQueries({ queryKey: ['cms-stats'] });
      setName('');
    },
    onError: (e) => setErr((e as ApiError).message || 'Failed'),
  });
  const delCat = useMutation<{ success: true }, Error, number>({
    mutationFn: (id) => api.delete('/api/learning-admin/categories/' + id),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['cms-categories'] });
      qc.invalidateQueries({ queryKey: ['cms-content'] });
      qc.invalidateQueries({ queryKey: ['cms-stats'] });
    },
  });
  function submit(e: React.FormEvent) {
    e.preventDefault();
    setErr(null);
    if (!name.trim()) return;
    addCat.mutate(name.trim());
  }
  const cats = data?.categories || [];
  return (
    <aside className="w-64 shrink-0 space-y-3" data-testid="cms-sidebar">
      <div className="rounded-lg border border-border bg-card p-3 space-y-2">
        <div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Categories</div>
        <ul className="space-y-1 max-h-64 overflow-auto">
          <li>
            <button
              type="button"
              onClick={() => props.onCategoryFilter('all')}
              className={'w-full text-left text-sm px-2 py-1 rounded ' +
                (props.categoryFilter === 'all' ? 'bg-primary text-primary-foreground' : 'hover:bg-muted')
              }
            >All categories</button>
          </li>
          {cats.map((c) => (
            <li key={c.id} className="flex items-center gap-1">
              <button
                type="button"
                onClick={() => props.onCategoryFilter(c.id)}
                className={'flex-1 text-left text-sm px-2 py-1 rounded ' +
                  (props.categoryFilter === c.id ? 'bg-primary text-primary-foreground' : 'hover:bg-muted')
                }
                data-testid={'cms-cat-' + c.id}
              >
                {c.name}
                {typeof c.content_count === 'number' && (
                  <span className="ml-1 text-[10px] text-muted-foreground">({c.content_count})</span>
                )}
              </button>
              <button
                type="button"
                onClick={() => setPendingDelete(c)}
                className="text-xs text-destructive hover:text-red-700 px-1"
                title="Delete category"
              >×</button>
            </li>
          ))}
        </ul>
        <form onSubmit={submit} className="flex gap-1">
          <input
            type="text"
            placeholder="New category…"
            value={name}
            onChange={(e) => setName(e.target.value)}
            className={sm + ' flex-1'}
            data-testid="cms-new-cat-name"
          />
          <button type="submit" disabled={addCat.isPending} className="rounded-md bg-primary text-primary-foreground px-2 py-1 text-xs">
            +
          </button>
        </form>
        {err && <div className="text-xs text-destructive">{err}</div>}
      </div>
      <div className="rounded-lg border border-border bg-card p-3 space-y-2">
        <div className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Filter</div>
        <select
          className={sm + ' w-full'}
          value={props.statusFilter}
          onChange={(e) => props.onStatusFilter(e.target.value as 'all' | 'published' | 'draft')}
          data-testid="cms-filter-status"
        >
          <option value="all">All status</option>
          <option value="published">Published</option>
          <option value="draft">Drafts</option>
        </select>
      </div>
      <ConfirmModal
        open={!!pendingDelete}
        title="Delete category?"
        body={pendingDelete ? 'Delete "' + pendingDelete.name + '"? Its content moves to uncategorized.' : ''}
        confirmText="Delete"
        danger
        busy={delCat.isPending}
        onCancel={() => setPendingDelete(null)}
        onConfirm={() => {
          if (pendingDelete) {
            delCat.mutate(pendingDelete.id, { onSettled: () => setPendingDelete(null) });
          }
        }}
      />
    </aside>
  );
 }
--- a/client/src/pages/cms/ContentEditor.tsx
+++ b/client/src/pages/cms/ContentEditor.tsx
@ -0,0 +1,248 @@
 // CMS content editor — title / category / type / subject / body /
 // published toggle. For quizzes, also embeds QuestionsEditor.
 //
 // New content: passes `null` id and POSTs on save. Existing content:
 // passes id and PUTs. Both refresh the content list query.
 //
 // Body is a plain textarea — no rich editor in this first React port.
 // (Vanilla used a Quill-ish toolbar; that lands as a follow-up if
 // users actually start using it.)
 import { useEffect, useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { api, ApiError } from '@/lib/api';
 import RichTextEditor from '@/components/RichTextEditor';
 import type { CmsCategory, CmsContentDetail, CmsQuestion, ContentType } from './cms-types';
 import QuestionsEditor from './QuestionsEditor';
 import SlideEditor from './SlideEditor';
 import AiGenerator, { type GeneratedPayload } from './AiGenerator';
 interface CategoriesOk { success: true; categories: CmsCategory[] }
 interface ContentDetailOk { success: true; content: CmsContentDetail }
 interface Props {
  id: number | null;        // null = creating new
  initialType: ContentType; // for creates — pre-selects the type
  onClose: () => void;
 }
 const input = 'rounded-md border border-input bg-background px-3 py-2 text-sm';
 const btn = 'inline-flex items-center gap-1 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium hover:bg-muted disabled:opacity-50';
 const btnPrimary = 'inline-flex items-center gap-1 rounded-md bg-primary text-primary-foreground px-3 py-1.5 text-xs font-medium disabled:opacity-50';
 export default function ContentEditor({ id, initialType, onClose }: Props) {
  const qc = useQueryClient();
  const isNew = id == null;
  const [title, setTitle] = useState('');
  const [subject, setSubject] = useState('');
  const [body, setBody] = useState('');
  const [categoryId, setCategoryId] = useState<number | ''>('');
  const [contentType, setContentType] = useState<ContentType>(initialType);
  const [published, setPublished] = useState(false);
  const [questions, setQuestions] = useState<CmsQuestion[]>([]);
  const [msg, setMsg] = useState<{ kind: 'ok' | 'err'; text: string } | null>(null);
  const [aiOpen, setAiOpen] = useState(false);
  function applyAi(payload: GeneratedPayload, ctype: ContentType) {
    setContentType(ctype);
    // Presentation → body is the Marp markdown (becomes the slide-editor
    // source after split by \n---\n).
    if (ctype === 'presentation' && payload.marpMarkdown) {
      setBody(payload.marpMarkdown);
      // Extract title from first # heading so the editor can save immediately.
      const titleMatch = payload.marpMarkdown.match(/^#\s+(.+)$/m);
      if (titleMatch) setTitle(titleMatch[1]);
    } else {
      if (payload.title) setTitle(payload.title);
      if (payload.subject !== undefined) setSubject(payload.subject);
      if (payload.body !== undefined) setBody(payload.body);
    }
    if (payload.questions && payload.questions.length) {
      setQuestions(payload.questions);
    }
    setAiOpen(false);
    setMsg({ kind: 'ok', text: 'Content generated — review, then save.' });
  }
  const cats = useQuery<CategoriesOk>({
    queryKey: ['cms-categories'],
    queryFn: () => api.get<CategoriesOk>('/api/learning-admin/categories'),
  });
  const detail = useQuery<ContentDetailOk>({
    queryKey: ['cms-content-detail', id],
    queryFn: () => api.get<ContentDetailOk>('/api/learning-admin/content/' + id),
    enabled: !isNew,
  });
  // Hydrate state from server when editing an existing item.
  useEffect(() => {
    if (!detail.data?.content) return;
    const c = detail.data.content;
    setTitle(c.title);
    setSubject(c.subject || '');
    setBody(c.body || '');
    setCategoryId(c.category_id ?? '');
    setContentType(c.content_type);
    setPublished(!!c.published);
    setQuestions(c.questions || []);
  }, [detail.data]);
  const save = useMutation<{ success: true; id: number }, Error, void>({
    mutationFn: async () => {
      const body_ = {
        title, subject, body,
        category_id: categoryId === '' ? null : categoryId,
        content_type: contentType,
        published,
      };
      if (isNew) {
        return api.post<{ success: true; id: number }>('/api/learning-admin/content', body_);
      }
      await api.put<{ success: true }>('/api/learning-admin/content/' + id, body_);
      return { success: true as const, id: id! };
    },
    onSuccess: (d) => {
      qc.invalidateQueries({ queryKey: ['cms-content'] });
      qc.invalidateQueries({ queryKey: ['cms-stats'] });
      qc.invalidateQueries({ queryKey: ['cms-content-detail', d.id] });
      setMsg({ kind: 'ok', text: isNew ? 'Created — switch to the list to add questions' : 'Saved' });
    },
    onError: (e) => setMsg({ kind: 'err', text: (e as ApiError).message || 'Save failed' }),
  });
  return (
    <div className="flex-1 space-y-3 min-w-0" data-testid="cms-editor">
      <div className="flex items-center justify-between">
        <h3 className="text-base font-semibold">
          {isNew ? 'New ' + contentType : 'Edit ' + contentType}
        </h3>
        <div className="flex gap-2">
          <button type="button" onClick={() => setAiOpen((v) => !v)} className={btnPrimary} data-testid="cms-open-ai">
            ✨ {aiOpen ? 'Hide AI' : 'Generate with AI'}
          </button>
          <button type="button" onClick={onClose} className={btn}>← Back to list</button>
        </div>
      </div>
      {aiOpen && (
        <AiGenerator
          contentType={contentType}
          onChangeType={setContentType}
          onGenerated={applyAi}
          onCancel={() => setAiOpen(false)}
        />
      )}
      <div className="rounded-lg border border-border bg-card p-4 space-y-3">
        <label className="block">
          <span className="block text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-1">Title</span>
          <input
            type="text"
            className={input + ' w-full'}
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            data-testid="cms-edit-title"
          />
        </label>
        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
          <label className="block">
            <span className="block text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-1">Type</span>
            <select
              className={input + ' w-full'}
              value={contentType}
              onChange={(e) => setContentType(e.target.value as ContentType)}
              data-testid="cms-edit-type"
            >
              <option value="article">Article</option>
              <option value="pearl">Pearl</option>
              <option value="quiz">Quiz</option>
              <option value="presentation">Presentation</option>
            </select>
          </label>
          <label className="block">
            <span className="block text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-1">Category</span>
            <select
              className={input + ' w-full'}
              value={categoryId}
              onChange={(e) => setCategoryId(e.target.value === '' ? '' : Number(e.target.value))}
              data-testid="cms-edit-category"
            >
              <option value="">Uncategorized</option>
              {(cats.data?.categories || []).map((c) => (
                <option key={c.id} value={c.id}>{c.name}</option>
              ))}
            </select>
          </label>
          <label className="flex items-end gap-2">
            <input
              type="checkbox"
              checked={published}
              onChange={(e) => setPublished(e.target.checked)}
              className="h-4 w-4"
              data-testid="cms-edit-published"
            />
            <span className="text-sm">Published</span>
          </label>
        </div>
        <label className="block">
          <span className="block text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-1">Subject (optional)</span>
          <input
            type="text"
            className={input + ' w-full'}
            value={subject}
            onChange={(e) => setSubject(e.target.value)}
            placeholder="e.g. Asthma, Bronchiolitis"
          />
        </label>
        <div>
          <span className="block text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-1">
            Body
          </span>
          {contentType === 'presentation' ? (
            <SlideEditor value={body} onChange={setBody} />
          ) : (
            <RichTextEditor
              value={body}
              onChange={setBody}
              variant="default"
              minHeight="min-h-[320px]"
              placeholder="Write the content body…"
              testId="cms-edit-body"
            />
          )}
        </div>
        <div className="flex items-center gap-2">
          <button
            type="button"
            onClick={() => save.mutate()}
            disabled={save.isPending || !title.trim()}
            className={btnPrimary}
            data-testid="cms-save"
          >
            {save.isPending ? 'Saving…' : (isNew ? 'Create' : 'Save changes')}
          </button>
          {msg && (
            <span className={'text-xs ' + (msg.kind === 'ok' ? 'text-green-600' : 'text-destructive')}>
              {msg.text}
            </span>
          )}
        </div>
      </div>
      {!isNew && contentType === 'quiz' && (
        <div className="rounded-lg border border-border bg-card p-4">
          <QuestionsEditor
            contentId={id!}
            questions={questions}
            onChange={setQuestions}
          />
        </div>
      )}
    </div>
  );
 }
--- a/client/src/pages/cms/ContentList.tsx
+++ b/client/src/pages/cms/ContentList.tsx
@ -0,0 +1,165 @@
 // CMS content list — table of articles/pearls/quizzes/presentations
 // with toolbar (new article / new quiz / new pearl / new presentation
 // + search), per-row publish-toggle / edit / delete. Mirrors the
 // vanilla #lh-cms-content-list table.
 import { useMemo, useState } from 'react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 import ConfirmModal from '@/components/ConfirmModal';
 import type { CmsContentRow, ContentType } from './cms-types';
 interface ContentListOk { success: true; content: CmsContentRow[] }
 interface Props {
  statusFilter: 'all' | 'published' | 'draft';
  categoryFilter: number | 'all';
  onEdit: (id: number) => void;
  onCreate: (type: ContentType) => void;
 }
 const btn = 'inline-flex items-center gap-1 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium hover:bg-muted disabled:opacity-50';
 const btnPrimary = 'inline-flex items-center gap-1 rounded-md bg-primary text-primary-foreground px-3 py-1.5 text-xs font-medium disabled:opacity-50';
 const tag = 'text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded border';
 const TYPE_TAG: Record<ContentType, string> = {
  article: 'bg-blue-100 text-blue-700 border-blue-300',
  quiz: 'bg-amber-100 text-amber-800 border-amber-300',
  pearl: 'bg-purple-100 text-purple-700 border-purple-300',
  presentation: 'bg-emerald-100 text-emerald-800 border-emerald-300',
 };
 export default function ContentList(props: Props) {
  const qc = useQueryClient();
  const [search, setSearch] = useState('');
  const [pendingDelete, setPendingDelete] = useState<CmsContentRow | null>(null);
  const { data, isLoading } = useQuery<ContentListOk>({
    queryKey: ['cms-content'],
    queryFn: () => api.get<ContentListOk>('/api/learning-admin/content'),
  });
  const togglePublish = useMutation<{ success: true }, Error, { id: number; published: boolean }>({
    mutationFn: ({ id, published }) => api.put('/api/learning-admin/content/' + id, { published }),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['cms-content'] });
      qc.invalidateQueries({ queryKey: ['cms-stats'] });
    },
  });
  const del = useMutation<{ success: true }, Error, number>({
    mutationFn: (id) => api.delete('/api/learning-admin/content/' + id),
    onSuccess: () => {
      qc.invalidateQueries({ queryKey: ['cms-content'] });
      qc.invalidateQueries({ queryKey: ['cms-stats'] });
    },
  });
  const filtered = useMemo(() => {
    const rows = data?.content || [];
    return rows.filter((r) => {
      if (props.statusFilter === 'published' && !r.published) return false;
      if (props.statusFilter === 'draft' && r.published) return false;
      if (props.categoryFilter !== 'all' && r.category_id !== props.categoryFilter) return false;
      if (search.trim()) {
        const q = search.trim().toLowerCase();
        const hay = (r.title + ' ' + (r.subject || '') + ' ' + (r.category_name || '')).toLowerCase();
        if (!hay.includes(q)) return false;
      }
      return true;
    });
  }, [data, props.statusFilter, props.categoryFilter, search]);
  return (
    <div className="flex-1 space-y-3 min-w-0">
      <div className="flex flex-wrap items-center gap-2">
        <button type="button" onClick={() => props.onCreate('article')} className={btnPrimary} data-testid="cms-new-article">
          + Article
        </button>
        <button type="button" onClick={() => props.onCreate('quiz')} className={btn} data-testid="cms-new-quiz">
          + Quiz
        </button>
        <button type="button" onClick={() => props.onCreate('pearl')} className={btn} data-testid="cms-new-pearl">
          + Pearl
        </button>
        <button type="button" onClick={() => props.onCreate('presentation')} className={btn} data-testid="cms-new-presentation">
          + Presentation
        </button>
        <div className="ml-auto">
          <input
            type="search"
            placeholder="Search content…"
            className="rounded-md border border-input bg-background px-3 py-1.5 text-xs min-w-[220px]"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            data-testid="cms-search"
          />
        </div>
      </div>
      <div className="rounded-lg border border-border bg-card overflow-hidden">
        <div className="grid grid-cols-[1fr_120px_90px_90px_120px_120px] gap-2 px-3 py-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground bg-muted/40 border-b border-border">
          <span>Title</span>
          <span>Category</span>
          <span>Type</span>
          <span>Status</span>
          <span>Updated</span>
          <span className="text-right">Actions</span>
        </div>
        {isLoading && <div className="p-6 text-sm text-muted-foreground text-center">Loading…</div>}
        {!isLoading && filtered.length === 0 && (
          <div className="p-6 text-sm text-muted-foreground italic text-center">No content matches.</div>
        )}
        {filtered.map((r) => (
          <div
            key={r.id}
            className="grid grid-cols-[1fr_120px_90px_90px_120px_120px] gap-2 px-3 py-2 text-sm items-center border-b border-border last:border-0 hover:bg-muted/30"
            data-testid={'cms-row-' + r.id}
          >
            <button type="button" onClick={() => props.onEdit(r.id)} className="text-left truncate hover:underline">
              <strong>{r.title}</strong>
              {r.subject && <span className="ml-2 text-xs text-muted-foreground truncate">· {r.subject}</span>}
              {r.content_type === 'quiz' && typeof r.question_count === 'number' && (
                <span className="ml-2 text-[10px] text-muted-foreground">{r.question_count} Q</span>
              )}
            </button>
            <span className="text-xs text-muted-foreground truncate">{r.category_name || '—'}</span>
            <span className={tag + ' ' + TYPE_TAG[r.content_type]}>{r.content_type}</span>
            <button
              type="button"
              onClick={() => togglePublish.mutate({ id: r.id, published: !r.published })}
              className={tag + ' ' + (r.published ? 'bg-green-100 text-green-700 border-green-300' : 'bg-muted text-muted-foreground border-border')}
              title="Toggle published"
            >
              {r.published ? 'Published' : 'Draft'}
            </button>
            <span className="text-xs text-muted-foreground">{new Date(r.updated_at).toLocaleDateString()}</span>
            <div className="flex justify-end gap-1">
              <button type="button" onClick={() => props.onEdit(r.id)} className={btn}>Edit</button>
              <button
                type="button"
                onClick={() => setPendingDelete(r)}
                className={btn + ' text-destructive'}
              >Del</button>
            </div>
          </div>
        ))}
      </div>
      <ConfirmModal
        open={!!pendingDelete}
        title="Delete content?"
        body={pendingDelete ? 'Delete "' + pendingDelete.title + '"? This cannot be undone.' : ''}
        confirmText="Delete"
        danger
        busy={del.isPending}
        onCancel={() => setPendingDelete(null)}
        onConfirm={() => {
          if (pendingDelete) {
            del.mutate(pendingDelete.id, { onSettled: () => setPendingDelete(null) });
          }
        }}
      />
    </div>
  );
 }
--- a/client/src/pages/cms/QuestionsEditor.tsx
+++ b/client/src/pages/cms/QuestionsEditor.tsx
@ -0,0 +1,185 @@
 // Questions editor — used inside ContentEditor when content_type === 'quiz'.
 // Manages the local list of questions + options for a content item; on save
 // the parent diffs against server state via add/update/delete endpoints.
 import { useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 import ConfirmModal from '@/components/ConfirmModal';
 import RichTextEditor from '@/components/RichTextEditor';
 import type { CmsQuestion } from './cms-types';
 interface Props {
  contentId: number;
  questions: CmsQuestion[];
  onChange: (next: CmsQuestion[]) => void;
 }
 const input = 'rounded-md border border-input bg-background px-2 py-1 text-sm';
 const btn = 'inline-flex items-center gap-1 rounded-md border border-border bg-background px-2 py-1 text-xs font-medium hover:bg-muted disabled:opacity-50';
 const btnPrimary = 'inline-flex items-center gap-1 rounded-md bg-primary text-primary-foreground px-2 py-1 text-xs font-medium disabled:opacity-50';
 function emptyQ(): CmsQuestion {
  return { question_text: '', question_type: 'mcq', explanation: '', options: [
    { option_text: '', is_correct: true },
    { option_text: '', is_correct: false },
  ] };
 }
 export default function QuestionsEditor(props: Props) {
  const qc = useQueryClient();
  const [pendingDeleteIdx, setPendingDeleteIdx] = useState<number | null>(null);
  const createQ = useMutation<{ success: true; id: number }, Error, CmsQuestion>({
    mutationFn: (q) => api.post('/api/learning-admin/content/' + props.contentId + '/questions', q),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['cms-content-detail', props.contentId] }),
  });
  const updateQ = useMutation<{ success: true }, Error, CmsQuestion>({
    mutationFn: (q) => api.put('/api/learning-admin/questions/' + q.id, q),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['cms-content-detail', props.contentId] }),
  });
  const deleteQ = useMutation<{ success: true }, Error, number>({
    mutationFn: (id) => api.delete('/api/learning-admin/questions/' + id),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['cms-content-detail', props.contentId] }),
  });
  function patchQ(idx: number, patch: Partial<CmsQuestion>) {
    props.onChange(props.questions.map((q, i) => (i === idx ? { ...q, ...patch } : q)));
  }
  function patchOpt(qIdx: number, optIdx: number, patch: Partial<CmsQuestion['options'] extends (infer T)[] | undefined ? T : never>) {
    props.onChange(props.questions.map((q, i) => {
      if (i !== qIdx) return q;
      const opts = (q.options || []).map((o, j) => (j === optIdx ? { ...o, ...patch } : o));
      return { ...q, options: opts };
    }));
  }
  function addQ() { props.onChange([...props.questions, emptyQ()]); }
  function addOpt(qIdx: number) {
    props.onChange(props.questions.map((q, i) => {
      if (i !== qIdx) return q;
      return { ...q, options: [...(q.options || []), { option_text: '', is_correct: false }] };
    }));
  }
  function removeOpt(qIdx: number, optIdx: number) {
    props.onChange(props.questions.map((q, i) => {
      if (i !== qIdx) return q;
      return { ...q, options: (q.options || []).filter((_, j) => j !== optIdx) };
    }));
  }
  function saveQ(idx: number) {
    const q = props.questions[idx];
    if (q.id) updateQ.mutate(q);
    else createQ.mutate(q);
  }
  function handleDelete(idx: number) {
    const q = props.questions[idx];
    if (q.id) deleteQ.mutate(q.id);
    props.onChange(props.questions.filter((_, i) => i !== idx));
    setPendingDeleteIdx(null);
  }
  return (
    <div className="space-y-3" data-testid="cms-questions-editor">
      <div className="flex items-center justify-between">
        <h4 className="text-sm font-semibold">Questions ({props.questions.length})</h4>
        <button type="button" onClick={addQ} className={btnPrimary}>+ Add question</button>
      </div>
      {props.questions.length === 0 && (
        <div className="text-sm text-muted-foreground italic">No questions yet.</div>
      )}
      {props.questions.map((q, qIdx) => (
        <div key={qIdx} className="rounded-lg border border-border bg-muted/20 p-3 space-y-2">
          <div className="flex items-center gap-2">
            <span className="text-xs font-semibold text-muted-foreground">Q{qIdx + 1}</span>
            <select
              className={input + ' text-xs'}
              value={q.question_type}
              onChange={(e) => patchQ(qIdx, { question_type: e.target.value as CmsQuestion['question_type'] })}
            >
              <option value="mcq">MCQ (single answer)</option>
              <option value="multi">Multi-select</option>
              <option value="true_false">True/False</option>
            </select>
            <div className="ml-auto flex gap-1">
              <button type="button" onClick={() => saveQ(qIdx)} className={btnPrimary} disabled={createQ.isPending || updateQ.isPending}>
                Save Q
              </button>
              <button type="button" onClick={() => setPendingDeleteIdx(qIdx)} className={btn + ' text-destructive'}>
                Del
              </button>
            </div>
          </div>
          <RichTextEditor
            value={q.question_text}
            onChange={(html) => patchQ(qIdx, { question_text: html })}
            variant="mini"
            minHeight="min-h-[60px]"
            placeholder="Question text"
          />
          <div className="space-y-1">
            {(q.options || []).map((o, optIdx) => (
              <div key={optIdx} className="flex items-start gap-2">
                <input
                  type={q.question_type === 'multi' ? 'checkbox' : 'radio'}
                  name={'q-' + qIdx + '-correct'}
                  checked={o.is_correct}
                  onChange={(e) => {
                    if (q.question_type === 'multi') {
                      patchOpt(qIdx, optIdx, { is_correct: e.target.checked });
                    } else {
                      props.onChange(props.questions.map((qq, i) => {
                        if (i !== qIdx) return qq;
                        const opts = (qq.options || []).map((oo, j) => ({ ...oo, is_correct: j === optIdx }));
                        return { ...qq, options: opts };
                      }));
                    }
                  }}
                  className="mt-2"
                />
                <div className="flex-1 space-y-1">
                  <RichTextEditor
                    value={o.option_text}
                    onChange={(html) => patchOpt(qIdx, optIdx, { option_text: html })}
                    variant="option"
                    minHeight="min-h-[40px]"
                    placeholder={'Option ' + (optIdx + 1)}
                  />
                  <RichTextEditor
                    value={o.explanation || ''}
                    onChange={(html) => patchOpt(qIdx, optIdx, { explanation: html })}
                    variant="option"
                    minHeight="min-h-[32px]"
                    placeholder="Per-option explanation (optional)"
                  />
                </div>
                <button type="button" onClick={() => removeOpt(qIdx, optIdx)} className="text-xs text-destructive mt-2">×</button>
              </div>
            ))}
            <button type="button" onClick={() => addOpt(qIdx)} className={btn}>+ Option</button>
          </div>
          <RichTextEditor
            value={q.explanation || ''}
            onChange={(html) => patchQ(qIdx, { explanation: html })}
            variant="mini"
            minHeight="min-h-[40px]"
            placeholder="Question explanation (shown after answering)"
          />
        </div>
      ))}
      <ConfirmModal
        open={pendingDeleteIdx !== null}
        title="Delete question?"
        body="The question and its options will be removed."
        confirmText="Delete"
        danger
        busy={deleteQ.isPending}
        onCancel={() => setPendingDeleteIdx(null)}
        onConfirm={() => { if (pendingDeleteIdx !== null) handleDelete(pendingDeleteIdx); }}
      />
    </div>
  );
 }
--- a/client/src/pages/cms/SlideEditor.tsx
+++ b/client/src/pages/cms/SlideEditor.tsx
@ -0,0 +1,107 @@
 // ============================================================
 // SlideEditor — presentation body editor. Vanilla stores slide
 // decks in the `body` column as a single string with slides
 // separated by `\n---\n` (see public/js/learningHub.js around
 // line 338 where it does body.split(/\n---\n/).length).
 //
 // Each slide is a rich-text block, and the editor joins them
 // back together with the `---` separator before handing the
 // string up to ContentEditor.
 // ============================================================
 import { useMemo, useState } from 'react';
 import RichTextEditor from '@/components/RichTextEditor';
 interface Props {
  value: string;
  onChange: (next: string) => void;
 }
 const SEP = '\n---\n';
 const btn = 'inline-flex items-center gap-1 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium hover:bg-muted disabled:opacity-50';
 const btnPrimary = 'inline-flex items-center gap-1 rounded-md bg-primary text-primary-foreground px-3 py-1.5 text-xs font-medium disabled:opacity-50';
 function splitSlides(s: string): string[] {
  if (!s) return [''];
  return s.split(/\n-{3,}\n/);
 }
 export default function SlideEditor({ value, onChange }: Props) {
  const slides = useMemo(() => splitSlides(value), [value]);
  const [active, setActive] = useState(0);
  const safeActive = Math.min(active, slides.length - 1);
  function updateSlides(next: string[]) {
    onChange(next.join(SEP));
  }
  function updateSlide(i: number, next: string) {
    const copy = slides.slice();
    copy[i] = next;
    updateSlides(copy);
  }
  function addSlide(after: number) {
    const copy = slides.slice();
    copy.splice(after + 1, 0, '');
    updateSlides(copy);
    setActive(after + 1);
  }
  function removeSlide(i: number) {
    if (slides.length <= 1) { updateSlides(['']); setActive(0); return; }
    const copy = slides.slice();
    copy.splice(i, 1);
    updateSlides(copy);
    setActive(Math.max(0, Math.min(active, copy.length - 1)));
  }
  function move(i: number, dir: -1 | 1) {
    const j = i + dir;
    if (j < 0 || j >= slides.length) return;
    const copy = slides.slice();
    [copy[i], copy[j]] = [copy[j], copy[i]];
    updateSlides(copy);
    setActive(j);
  }
  return (
    <div className="rounded-md border border-input bg-background" data-testid="cms-slide-editor">
      <div className="flex flex-wrap items-center gap-2 px-3 py-2 border-b border-border bg-muted/40">
        <span className="text-xs font-semibold text-muted-foreground">
          Slide {safeActive + 1} of {slides.length}
        </span>
        <div className="flex flex-wrap items-center gap-1 ml-2">
          {slides.map((_, i) => (
            <button
              key={i}
              type="button"
              onClick={() => setActive(i)}
              className={
                'w-7 h-7 rounded text-xs border ' +
                (i === safeActive
                  ? 'bg-primary text-primary-foreground border-primary'
                  : 'bg-background border-border hover:bg-muted')
              }
              aria-label={'Slide ' + (i + 1)}
            >{i + 1}</button>
          ))}
        </div>
        <div className="ml-auto flex gap-1">
          <button type="button" onClick={() => move(safeActive, -1)} disabled={safeActive === 0} className={btn}>← Move</button>
          <button type="button" onClick={() => move(safeActive, 1)} disabled={safeActive === slides.length - 1} className={btn}>Move →</button>
          <button type="button" onClick={() => addSlide(safeActive)} className={btnPrimary}>+ Slide</button>
          <button type="button" onClick={() => removeSlide(safeActive)} className={btn + ' text-destructive'}>Remove</button>
        </div>
      </div>
      <RichTextEditor
        key={safeActive}
        value={slides[safeActive] || ''}
        onChange={(html) => updateSlide(safeActive, html)}
        variant="default"
        minHeight="min-h-[260px]"
        placeholder="Slide content…"
      />
    </div>
  );
 }
--- a/client/src/pages/cms/StatsBar.tsx
+++ b/client/src/pages/cms/StatsBar.tsx
@ -0,0 +1,34 @@
 // CMS stats bar — read-only summary across the top of the Cms page.
 import { useQuery } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 import type { CmsStats } from './cms-types';
 interface StatsOk { success: true; stats: CmsStats }
 export default function StatsBar() {
  const { data } = useQuery<StatsOk>({
    queryKey: ['cms-stats'],
    queryFn: () => api.get<StatsOk>('/api/learning-admin/stats'),
    refetchInterval: 30_000,
  });
  const s = data?.stats;
  const cells = [
    { k: 'Published',    v: s?.publishedContent ?? '–' },
    { k: 'All content',  v: s?.totalContent ?? '–' },
    { k: 'Categories',   v: s?.totalCategories ?? '–' },
    { k: 'Quizzes',      v: s?.totalQuizzes ?? '–' },
    { k: 'Attempts',     v: s?.totalAttempts ?? '–' },
    { k: 'Embeddings',   v: s?.embeddingsEnabled ? (s?.withEmbeddings ?? '–') : 'off' },
  ];
  return (
    <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-2" data-testid="cms-stats-bar">
      {cells.map((c) => (
        <div key={c.k} className="rounded-md border border-border bg-card px-3 py-2">
          <div className="text-lg font-semibold">{c.v}</div>
          <div className="text-[11px] uppercase tracking-wider text-muted-foreground">{c.k}</div>
        </div>
      ))}
    </div>
  );
 }
--- a/client/src/pages/cms/cms-types.ts
+++ b/client/src/pages/cms/cms-types.ts
@ -0,0 +1,61 @@
 // Shared types for the Learning Hub CMS — match the server response
 // shapes from src/routes/learningAdmin.ts. Kept narrow (only the fields
 // the CMS reads/writes) so a column rename on the server breaks the
 // client at compile time.
 export interface CmsCategory {
  id: number;
  name: string;
  slug: string;
  description?: string | null;
  sort_order?: number;
  content_count?: number;
 }
 export type ContentType = 'article' | 'quiz' | 'pearl' | 'presentation';
 export interface CmsContentRow {
  id: number;
  title: string;
  slug?: string;
  subject?: string | null;
  content_type: ContentType;
  published: boolean;
  category_id?: number | null;
  category_name?: string | null;
  author_name?: string | null;
  question_count?: number;
  created_at: string;
  updated_at: string;
 }
 export interface CmsOption {
  id?: number;
  option_text: string;
  is_correct: boolean;
  explanation?: string;
 }
 export interface CmsQuestion {
  id?: number;
  question_text: string;
  question_type: 'mcq' | 'true_false' | 'multi';
  explanation?: string;
  sort_order?: number;
  options?: CmsOption[];
 }
 export interface CmsContentDetail extends CmsContentRow {
  body?: string;
  questions?: CmsQuestion[];
 }
 export interface CmsStats {
  totalContent: number;
  publishedContent: number;
  totalCategories: number;
  totalQuizzes: number;
  totalAttempts: number;
  withEmbeddings: number;
  embeddingsEnabled: boolean;
 }
--- a/client/src/pages/wellvisit/ByVisitAge.tsx
+++ b/client/src/pages/wellvisit/ByVisitAge.tsx
@ -0,0 +1,462 @@
 // ============================================================
 // BY VISIT AGE — AAP Bright Futures recommendations per visit.
 // Faithful port of public/js/wellVisit.js (@be14578) renderVisitPanel.
 //
 // Reads /api/schedule-data and renders, per visit:
 //   • Billing codes (ICD-10 + CPT)
 //   • Measurements (height/weight/HC/BMI/BP)
 //   • Vaccines due (with Given/Refused/Deferred/Already Done buttons)
 //   • Screenings (sensory, developmental, procedures, oral)
 //   • Expected growth + feeding guidance
 //   • Expected reflexes
 //   • BMI classification table (AAP 2023, ages 2+)
 //   • Notes
 //
 // Visit statuses persist to localStorage under ped_visit_statuses
 // (same key as vanilla so cross-app continuity is preserved).
 // "Copy to Visit Note" writes a summary to sessionStorage so the
 // Visit Note tab can carry it into the encounter note.
 // ============================================================
 import { useEffect, useMemo, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { api } from '@/lib/api';
 import {
  mapToGrowthKey,
  mapToReflexKey,
  reflexStatusColor,
  getStatusValue,
  type VisitStatusVal,
 } from '@shared/clinical/visit-status';
 interface VisitAge { id: string; label: string; era: string }
 interface VaccineDose { vaccine: string; dose?: number | string; notes?: string }
 type ItemStatus = 'dot' | 'range' | 'arrow' | string;
 interface VisitData {
  measurements?: Record<string, ItemStatus>;
  vaccines?: VaccineDose[];
  sensory?: Record<string, ItemStatus>;
  developmental?: Record<string, ItemStatus>;
  procedures?: Record<string, ItemStatus>;
  oralHealth?: Record<string, ItemStatus>;
  notes?: string;
 }
 interface BillingCodes { icd10: string; cpt: string; description: string }
 interface GrowthRef {
  weight?: string; length?: string; headCirc?: string;
  feeding?: string[]; bmiClassification?: boolean;
 }
 interface ReflexEntry { name: string; status: string; note: string }
 interface ReflexRef { intro?: string; reflexes: ReflexEntry[] }
 interface BmiCategory { label: string; range: string; action: string; color: string }
 interface BmiClassification { categories: BmiCategory[]; notes?: string }
 interface ScheduleDataOk {
  visitAges: VisitAge[];
  periodicity: Record<string, VisitData>;
  wellVisitCodes: Record<string, BillingCodes>;
  growthReference: Record<string, GrowthRef>;
  reflexesReference: Record<string, ReflexRef>;
  bmiClassification: BmiClassification;
  vaccineFullNames: Record<string, string>;
 }
 // Status persistence shape — keyed `<visitId>.<itemKey>`. Mirrors the
 // vanilla _visitStatuses state stored under localStorage["ped_visit_statuses"].
 type VisitStatuses = Record<string, VisitStatusVal>;
 const SCREEN_LABELS: Record<string, string> = {
  maternalDepression: 'Maternal/Caregiver Depression Screen (Edinburgh/PHQ)',
  developmentalScreening: 'Developmental Screening (ASQ / PEDS)',
  autismScreening: 'Autism Screening (M-CHAT-R)',
  developmentalSurveillance: 'Developmental Surveillance',
  behavioralScreening: 'Social-Emotional/Behavioral Screening (ASQ:SE)',
  tobaccoAlcoholDrugs: 'Tobacco / Alcohol / Drug Use Screening (CRAFFT/AUDIT)',
  depressionSuicideRisk: 'Depression & Suicide Risk Screening (PHQ-A)',
 };
 const PROC_LABELS: Record<string, string> = {
  newbornBlood: 'Newborn Blood Spot Screening (NBS)',
  newbornBilirubin: 'Newborn Bilirubin (TcB or TSB)',
  criticalCHD: 'Critical CHD Screening (Pulse Ox)',
  immunization: 'Immunizations Review & Update',
  anemia: 'Anemia Screening (Hgb/Hct)',
  lead: 'Lead Exposure Risk / Blood Lead Level',
  tuberculosis: 'Tuberculosis / Latent TB Risk Assessment',
  dyslipidemia: 'Dyslipidemia Screening (lipid panel)',
  sti: 'STI Screening (gonorrhea / chlamydia / syphilis)',
  hiv: 'HIV Screening',
  hepB: 'Hepatitis B Screening (HBsAg)',
  hepC: 'Hepatitis C Screening (anti-HCV)',
  suddenCardiacArrest: 'Sudden Cardiac Arrest Risk Assessment',
  cervicalDysplasia: 'Cervical Dysplasia Screening (Pap smear)',
 };
 const MEASURE_LABELS: Record<string, string> = {
  lengthHeight: 'Length / Height', weight: 'Weight',
  headCircumference: 'Head Circumference', weightForLength: 'Weight-for-Length',
  bmi: 'BMI', bloodPressure: 'Blood Pressure',
 };
 const ORAL_LABELS: Record<string, string> = {
  assessment: 'Oral Health Risk Assessment',
  fluorideVarnish: 'Fluoride Varnish Application',
  fluorideSupplementation: 'Fluoride Supplementation (if water <0.6 ppm)',
 };
 const SENSORY_LABELS: Record<string, string> = {
  vision: 'Vision Screening', hearing: 'Hearing Screening',
 };
 const ERA_NAMES: Record<string, string> = {
  prenatal: 'Prenatal',
  infancy: 'Infancy (0–12 mo)',
  earlyChildhood: 'Early Childhood (1–5 y)',
  middleChildhood: 'Middle Childhood (6–11 y)',
  adolescence: 'Adolescence (11–21 y)',
 };
 const STORAGE_KEY = 'ped_visit_statuses';
 const VAX_STATUSES = ['Given', 'Refused', 'Deferred', 'Already Done'] as const;
 const SCREEN_STATUSES = ['Done', 'Refused', 'Not Due / N/A'] as const;
 // localStorage helpers — defensive against quota / blocked storage.
 function loadStatuses(): VisitStatuses {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    return raw ? (JSON.parse(raw) as VisitStatuses) : {};
  } catch { return {}; }
 }
 function saveStatuses(s: VisitStatuses) {
  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(s)); } catch { /* ignore */ }
 }
 // ── Sub-components ─────────────────────────────────────────────────
 function StatusBar(props: {
  statuses: readonly string[];
  current: string;
  onPick: (next: string) => void;
 }) {
  return (
    <div className="flex flex-wrap gap-1">
      {props.statuses.map((s) => (
        <button
          key={s}
          type="button"
          onClick={() => props.onPick(props.current === s ? '' : s)}
          className={
            'text-[10px] uppercase tracking-wider px-2 py-0.5 rounded border ' +
            (props.current === s
              ? 'bg-primary text-primary-foreground border-primary'
              : 'bg-background border-border hover:bg-muted')
          }
        >
          {s}
        </button>
      ))}
    </div>
  );
 }
 function Section(props: { icon: string; title: string; children: React.ReactNode }) {
  return (
    <div className="rounded-lg border border-border bg-card overflow-hidden">
      <div className="px-4 py-2 bg-muted/40 flex items-center gap-2 text-sm font-semibold">
        <span>{props.icon}</span><span>{props.title}</span>
      </div>
      <div className="p-3 space-y-2">{props.children}</div>
    </div>
  );
 }
 // ── Main component ─────────────────────────────────────────────────
 export default function ByVisitAge() {
  const { data, isLoading, error } = useQuery<ScheduleDataOk>({
    queryKey: ['schedule-data'],
    queryFn: () => api.get<ScheduleDataOk>('/api/schedule-data'),
  });
  const [visitId, setVisitId] = useState<string>('newborn');
  const [statuses, setStatuses] = useState<VisitStatuses>(() => loadStatuses());
  const [msg, setMsg] = useState<string | null>(null);
  // Persist on every change.
  useEffect(() => { saveStatuses(statuses); }, [statuses]);
  // Persist selected visit age to sessionStorage so the Visit Note tab can
  // pick it up (matches vanilla `ped_visit_age` key).
  useEffect(() => {
    if (!data || !visitId) return;
    const label = data.visitAges.find((v) => v.id === visitId)?.label || visitId;
    try { sessionStorage.setItem('ped_visit_age', label); } catch { /* ignore */ }
  }, [data, visitId]);
  const groupedAges = useMemo(() => {
    if (!data) return {} as Record<string, VisitAge[]>;
    const out: Record<string, VisitAge[]> = {};
    data.visitAges.forEach((v) => {
      if (!out[v.era]) out[v.era] = [];
      out[v.era].push(v);
    });
    return out;
  }, [data]);
  if (isLoading) return <div className="text-sm text-muted-foreground">Loading schedule…</div>;
  if (error) return <div className="text-sm text-destructive">{(error as Error).message}</div>;
  if (!data) return null;
  const periodicity = data.periodicity[visitId];
  const codes = data.wellVisitCodes[visitId];
  const growthKey = mapToGrowthKey(visitId, data.growthReference);
  const growth = growthKey ? data.growthReference[growthKey] : null;
  const reflexKey = mapToReflexKey(visitId, data.reflexesReference);
  const reflex = reflexKey ? data.reflexesReference[reflexKey] : null;
  function setStatus(key: string, status: string) {
    setStatuses((s) => {
      const cur = s[key];
      const note = typeof cur === 'object' && cur ? cur.note : '';
      return { ...s, [key]: { status, note } };
    });
  }
  function setNote(key: string, note: string) {
    setStatuses((s) => {
      const cur = s[key];
      const status = typeof cur === 'object' && cur ? cur.status : (cur || '');
      return { ...s, [key]: { status, note } };
    });
  }
  function clearVisit() {
    setStatuses((s) => {
      const out = { ...s };
      Object.keys(out).forEach((k) => { if (k.indexOf(visitId + '.') === 0) delete out[k]; });
      return out;
    });
    setMsg('Visit statuses cleared');
  }
  function copyToNote() {
    if (!data) return;
    const lines: string[] = [];
    const visitLabel = data.visitAges.find((v) => v.id === visitId)?.label || visitId;
    lines.push('Visit: ' + visitLabel);
    Object.keys(statuses).forEach((k) => {
      if (k.indexOf(visitId + '.') !== 0) return;
      const v = statuses[k];
      const status = typeof v === 'object' ? v.status : v;
      const note = typeof v === 'object' ? v.note : '';
      if (!status) return;
      const itemKey = k.substring(visitId.length + 1);
      lines.push('  - ' + itemKey + ': ' + status + (note ? ' (' + note + ')' : ''));
    });
    try {
      sessionStorage.setItem('wv-byvisit-statuses', lines.join('\n'));
      setMsg('Copied to Visit Note — switch tabs to use it');
    } catch { setMsg('Session storage unavailable'); }
  }
  // Filter helpers for the screening sections.
  function buildItems(map: Record<string, ItemStatus> | undefined, labels: Record<string, string>, exclude: string[] = []) {
    if (!map) return [] as { key: string; label: string; status: ItemStatus }[];
    return Object.keys(map)
      .filter((k) => !exclude.includes(k))
      .filter((k) => map[k] === 'dot' || map[k] === 'range' || map[k] === 'arrow')
      .map((k) => ({ key: k, label: labels[k] || k, status: map[k] }));
  }
  const measDue = periodicity?.measurements
    ? Object.keys(periodicity.measurements).filter((k) => periodicity.measurements![k] === 'dot' || periodicity.measurements![k] === 'range')
    : [];
  const sensoryItems = buildItems(periodicity?.sensory, SENSORY_LABELS);
  const devItems = buildItems(periodicity?.developmental, SCREEN_LABELS);
  const procItems = buildItems(periodicity?.procedures, PROC_LABELS, ['immunization']);
  const oralItems = buildItems(periodicity?.oralHealth, ORAL_LABELS);
  return (
    <div className="space-y-4">
      <div className="flex items-end gap-3 flex-wrap">
        <label className="flex flex-col gap-1">
          <span className="text-xs font-semibold uppercase text-muted-foreground">Select visit age</span>
          <select
            className="rounded-md border border-input bg-background px-3 py-2 text-sm min-w-[260px]"
            value={visitId}
            onChange={(e) => setVisitId(e.target.value)}
            data-testid="byvisit-select"
          >
            {Object.keys(groupedAges).map((era) => (
              <optgroup key={era} label={ERA_NAMES[era] || era}>
                {groupedAges[era].map((v) => (
                  <option key={v.id} value={v.id}>{v.label}</option>
                ))}
              </optgroup>
            ))}
          </select>
        </label>
        <button type="button" onClick={copyToNote} className="rounded-md bg-primary text-primary-foreground px-3 py-2 text-xs font-semibold">
          📋 Copy to Visit Note
        </button>
        <button type="button" onClick={clearVisit} className="rounded-md border border-border bg-background px-3 py-2 text-xs text-destructive">
          ↻ Clear this visit
        </button>
        {msg && <span className="text-xs text-muted-foreground">{msg}</span>}
      </div>
      {!periodicity && <p className="text-sm text-muted-foreground">No data for this visit.</p>}
      {periodicity && codes && (
        <Section icon="🧾" title="Billing codes">
          <div className="flex flex-wrap gap-3 text-sm">
            <span><span className="text-xs text-muted-foreground mr-1">ICD-10:</span><code className="bg-muted px-1.5 py-0.5 rounded">{codes.icd10}</code></span>
            <span><span className="text-xs text-muted-foreground mr-1">CPT:</span><code className="bg-muted px-1.5 py-0.5 rounded">{codes.cpt}</code></span>
          </div>
          <div className="text-xs text-muted-foreground">{codes.description}</div>
        </Section>
      )}
      {measDue.length > 0 && (
        <Section icon="📏" title="Measurements">
          <div className="flex flex-wrap gap-2">
            {measDue.map((k) => (
              <span key={k} className="text-xs px-2 py-1 rounded bg-muted">
                {MEASURE_LABELS[k] || k}{periodicity!.measurements![k] === 'range' ? ' (range)' : ''}
              </span>
            ))}
          </div>
        </Section>
      )}
      {periodicity?.vaccines && periodicity.vaccines.length > 0 && (
        <Section icon="💉" title="Vaccines due">
          <div className="space-y-2">
            {periodicity.vaccines.map((v) => {
              const itemKey = 'vax_' + v.vaccine + '_d' + (v.dose || '');
              const k = visitId + '.' + itemKey;
              const cur = getStatusValue(statuses[k]);
              const fullName = data.vaccineFullNames[v.vaccine] || v.vaccine;
              return (
                <div key={itemKey} className="flex flex-wrap items-center gap-2 text-sm">
                  <span className="flex-1 min-w-[200px]">
                    <strong>{fullName}</strong>
                    {v.dose && <span className="ml-2 text-xs text-muted-foreground">Dose {v.dose}</span>}
                    {v.notes && <div className="text-xs text-muted-foreground">{v.notes}</div>}
                  </span>
                  <StatusBar statuses={VAX_STATUSES} current={cur} onPick={(s) => setStatus(k, s)} />
                </div>
              );
            })}
          </div>
        </Section>
      )}
      {sensoryItems.length > 0 && (
        <ScreenList title="Sensory screens" icon="👁" items={sensoryItems} visitId={visitId} statuses={statuses} setStatus={setStatus} setNote={setNote} />
      )}
      {devItems.length > 0 && (
        <ScreenList title="Developmental / behavioral screens" icon="🧠" items={devItems} visitId={visitId} statuses={statuses} setStatus={setStatus} setNote={setNote} />
      )}
      {procItems.length > 0 && (
        <ScreenList title="Labs & procedures" icon="🧪" items={procItems} visitId={visitId} statuses={statuses} setStatus={setStatus} setNote={setNote} />
      )}
      {oralItems.length > 0 && (
        <ScreenList title="Oral health" icon="🦷" items={oralItems} visitId={visitId} statuses={statuses} setStatus={setStatus} setNote={setNote} />
      )}
      {growth && (
        <Section icon="📈" title="Expected growth">
          <div className="space-y-1 text-sm">
            {growth.weight && <div><span className="text-muted-foreground">⚖️ Weight: </span>{growth.weight}</div>}
            {growth.length && <div><span className="text-muted-foreground">📏 Length/Height: </span>{growth.length}</div>}
            {growth.headCirc && <div><span className="text-muted-foreground">🧠 Head circumference: </span>{growth.headCirc}</div>}
          </div>
          {growth.feeding && growth.feeding.length > 0 && (
            <div className="pt-2 border-t border-border mt-2">
              <div className="text-xs font-semibold text-muted-foreground mb-1">🍽 Feeding & nutrition</div>
              <ul className="list-disc pl-5 text-sm space-y-0.5">
                {growth.feeding.map((f, i) => <li key={i}>{f}</li>)}
              </ul>
            </div>
          )}
        </Section>
      )}
      {reflex && reflex.reflexes.length > 0 && (
        <Section icon="✋" title="Expected reflexes">
          {reflex.intro && <div className="text-xs text-muted-foreground mb-2">{reflex.intro}</div>}
          <div className="space-y-2">
            {reflex.reflexes.map((r, i) => {
              const c = reflexStatusColor(r.status);
              return (
                <div key={i} className="text-sm">
                  <div className="flex flex-wrap items-center gap-2">
                    <span className="font-semibold">{r.name}</span>
                    <span
                      className="text-[11px] font-semibold px-2 py-0.5 rounded-full border"
                      style={{ backgroundColor: c + '1a', color: c, borderColor: c + '66' }}
                    >{r.status}</span>
                  </div>
                  <div className="text-xs text-muted-foreground">{r.note}</div>
                </div>
              );
            })}
          </div>
        </Section>
      )}
      {growth?.bmiClassification && data.bmiClassification?.categories && (
        <Section icon="⚖" title="BMI / weight classification (AAP 2023)">
          <div className="space-y-1">
            {data.bmiClassification.categories.map((c, i) => (
              <div key={i} className="grid grid-cols-[1fr_auto_2fr] gap-2 text-sm border-l-4 pl-2 py-1" style={{ borderLeftColor: c.color }}>
                <strong>{c.label}</strong>
                <span className="text-muted-foreground">{c.range}</span>
                <span>{c.action}</span>
              </div>
            ))}
          </div>
          {data.bmiClassification.notes && <div className="text-xs text-muted-foreground pt-1">ℹ︎ {data.bmiClassification.notes}</div>}
        </Section>
      )}
      {periodicity?.notes && (
        <div className="rounded-md bg-amber-50 dark:bg-amber-950/30 border border-amber-200 p-3 text-sm">
          ℹ︎ {periodicity.notes}
        </div>
      )}
    </div>
  );
 }
 function ScreenList(props: {
  icon: string;
  title: string;
  items: { key: string; label: string; status: string }[];
  visitId: string;
  statuses: VisitStatuses;
  setStatus: (k: string, s: string) => void;
  setNote: (k: string, n: string) => void;
 }) {
  return (
    <Section icon={props.icon} title={props.title}>
      <div className="space-y-2">
        {props.items.map((it) => {
          const k = props.visitId + '.' + it.key;
          const v = props.statuses[k];
          const cur = getStatusValue(v);
          const note = typeof v === 'object' && v ? v.note : '';
          return (
            <div key={it.key} className="flex flex-wrap items-center gap-2 text-sm">
              <span className="flex-1 min-w-[200px]">{it.label}</span>
              <StatusBar statuses={SCREEN_STATUSES} current={cur} onPick={(s) => props.setStatus(k, s)} />
              {cur === 'Refused' || cur === 'Done' ? (
                <input
                  type="text"
                  value={note}
                  onChange={(e) => props.setNote(k, e.target.value)}
                  placeholder="note (optional)"
                  className="rounded-md border border-input bg-background px-2 py-1 text-xs flex-1 min-w-[160px]"
                />
              ) : null}
            </div>
          );
        })}
      </div>
    </Section>
  );
 }
--- a/client/src/pages/wellvisit/Milestones.tsx
+++ b/client/src/pages/wellvisit/Milestones.tsx
@ -0,0 +1,328 @@
 // ============================================================
 // MILESTONES — developmental checklist per age group → AI narrative.
 // Faithful port of public/js/milestones.js (@be14578).
 //
 // Flow:
 //   1. GET /api/milestones-data → { [ageGroup]: { [domain]: string[] } }
 //   2. User picks age group → renders checklist with ✓ / ✗ toggles
 //      (third state = null = "not assessed, omit from narrative")
 //   3. Generate → POST /api/generate-milestone-narrative
 //   4. Optional 3-sentence summary → /api/generate-milestone-summary
 //   5. "Copy to Note" carries the narrative to the Visit Note tab
 //      (sessionStorage bridge: wv-milestones-narrative)
 // ============================================================
 import { useEffect, useMemo, useState } from 'react';
 import { useQuery, useMutation } from '@tanstack/react-query';
 import { api, ApiError } from '@/lib/api';
 import OutputActions from '@/components/OutputActions';
 type Status = 'yes' | 'no' | null;
 type MilestonesData = Record<string, Record<string, string[]>>;
 interface MilestonesDataOk { success: true; milestones: MilestonesData }
 interface NarrativeOk {
  success: true;
  narrative: string;
  model: string;
  summary?: { achieved: number; notAchieved: number; notAssessed: number };
 }
 interface SummaryOk { success: true; summary: string; model: string }
 interface ItemState {
  domain: string;
  milestone: string;
  status: Status;
 }
 // Icon + tint per developmental domain (from the vanilla DOMAIN_CONFIG).
 const DOMAIN_CONFIG: Record<string, { icon: string; className: string }> = {
  'Gross Motor':     { icon: '🏃', className: 'border-l-4 border-l-blue-500' },
  'Fine Motor':      { icon: '✋', className: 'border-l-4 border-l-purple-500' },
  'Language':        { icon: '💬', className: 'border-l-4 border-l-emerald-500' },
  'Social/Emotional':{ icon: '😊', className: 'border-l-4 border-l-amber-500' },
  'Cognitive':       { icon: '🧠', className: 'border-l-4 border-l-pink-500' },
  'Self-Help':       { icon: '🧒', className: 'border-l-4 border-l-indigo-500' },
  'Feeding':         { icon: '🍼', className: 'border-l-4 border-l-cyan-500' },
  'Sleep':           { icon: '💤', className: 'border-l-4 border-l-slate-500' },
 };
 const DEFAULT_DOMAIN = { icon: '📋', className: 'border-l-4 border-l-border' };
 const AGE_GROUP_ORDER = [
  'Newborn / 1 month', '2 months', '4 months', '6 months', '9 months',
  '12 months', '15 months', '18 months', '24 months', '30 months',
  '36 months', '48 months', '60 months',
  '6 years', '7 years', '8 years', '9 years', '10 years', '11 years',
 ];
 const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm';
 const btn = 'inline-flex items-center gap-1 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium hover:bg-muted disabled:opacity-50';
 const btnPrimary = 'inline-flex items-center gap-1 rounded-md bg-primary text-primary-foreground px-3 py-1.5 text-sm font-semibold disabled:opacity-50';
 export default function Milestones() {
  const [patientAge, setPatientAge] = useState('');
  const [patientGender, setPatientGender] = useState('');
  const [ageGroup, setAgeGroup] = useState('');
  const [format, setFormat] = useState<'narrative' | 'list'>('narrative');
  const [state, setState] = useState<Record<string, ItemState>>({});
  const [narrative, setNarrative] = useState<string | null>(null);
  const [summaryStats, setSummaryStats] = useState<NarrativeOk['summary']>(undefined);
  const [quickSummary, setQuickSummary] = useState<string | null>(null);
  const [msg, setMsg] = useState<{ kind: 'ok' | 'err'; text: string } | null>(null);
  const { data, isLoading } = useQuery<MilestonesDataOk>({
    queryKey: ['milestones-data'],
    queryFn: () => api.get<MilestonesDataOk>('/api/milestones-data'),
  });
  // Keep the age-group dropdown in the canonical order even if server returns
  // them alphabetically. Anything not in AGE_GROUP_ORDER appears at the bottom.
  const ageGroupKeys = useMemo(() => {
    const available = data?.milestones ? Object.keys(data.milestones) : [];
    const ordered = AGE_GROUP_ORDER.filter((a) => available.includes(a));
    const extras = available.filter((a) => !AGE_GROUP_ORDER.includes(a));
    return [...ordered, ...extras];
  }, [data]);
  // When ageGroup changes, (re)build the checklist state.
  useEffect(() => {
    if (!ageGroup || !data?.milestones?.[ageGroup]) { setState({}); return; }
    const newState: Record<string, ItemState> = {};
    const domains = data.milestones[ageGroup];
    Object.keys(domains).forEach((domain) => {
      domains[domain].forEach((m, idx) => {
        newState[domain + '-' + idx] = { domain, milestone: m, status: null };
      });
    });
    setState(newState);
    setNarrative(null); setSummaryStats(undefined); setQuickSummary(null);
  }, [ageGroup, data]);
  const narrativeMut = useMutation<NarrativeOk, Error, void>({
    mutationFn: async () => {
      const body = {
        milestones: Object.values(state),
        ageGroup,
        patientAge,
        patientGender,
        format,
      };
      return api.post<NarrativeOk>('/api/generate-milestone-narrative', body);
    },
    onSuccess: (d) => {
      setNarrative(d.narrative);
      setSummaryStats(d.summary);
      setQuickSummary(null);
      setMsg({ kind: 'ok', text: 'Generated' });
    },
    onError: (e) => setMsg({ kind: 'err', text: (e as ApiError).message || 'Failed' }),
  });
  const summaryMut = useMutation<SummaryOk, Error, void>({
    mutationFn: async () => api.post<SummaryOk>('/api/generate-milestone-summary', {
      narrative, ageGroup, patientAge, patientGender,
    }),
    onSuccess: (d) => { setQuickSummary(d.summary); setMsg({ kind: 'ok', text: 'Summary generated' }); },
    onError: (e) => setMsg({ kind: 'err', text: (e as ApiError).message || 'Failed' }),
  });
  function toggle(id: string, action: 'yes' | 'no') {
    setState((s) => {
      const cur = s[id];
      if (!cur) return s;
      const next: Status = cur.status === action ? null : action;
      return { ...s, [id]: { ...cur, status: next } };
    });
  }
  function allYes() { setState((s) => Object.fromEntries(Object.entries(s).map(([k, v]) => [k, { ...v, status: 'yes' as Status }]))); }
  function allClear() {
    setState((s) => Object.fromEntries(Object.entries(s).map(([k, v]) => [k, { ...v, status: null as Status }])));
    setNarrative(null); setSummaryStats(undefined); setQuickSummary(null);
  }
  function generate() {
    if (!ageGroup) { setMsg({ kind: 'err', text: 'Select age group' }); return; }
    const assessed = Object.values(state).filter((m) => m.status !== null);
    if (!assessed.length) { setMsg({ kind: 'err', text: 'Assess at least one milestone' }); return; }
    setMsg(null);
    narrativeMut.mutate();
  }
  function copyToNote() {
    if (!narrative) return;
    try {
      sessionStorage.setItem('wv-milestones-narrative', narrative);
      setMsg({ kind: 'ok', text: 'Copied to Visit Note — switch to that tab' });
    } catch {
      setMsg({ kind: 'err', text: 'Session storage unavailable' });
    }
  }
  // Group checklist items by domain for rendering.
  const grouped = useMemo(() => {
    const out: Record<string, { id: string; text: string; status: Status }[]> = {};
    Object.entries(state).forEach(([id, v]) => {
      if (!out[v.domain]) out[v.domain] = [];
      out[v.domain].push({ id, text: v.milestone, status: v.status });
    });
    return out;
  }, [state]);
  const domainCounts = useMemo(() => {
    const out: Record<string, { total: number; yes: number; no: number }> = {};
    Object.values(state).forEach((v) => {
      const c = out[v.domain] || (out[v.domain] = { total: 0, yes: 0, no: 0 });
      c.total++;
      if (v.status === 'yes') c.yes++;
      if (v.status === 'no') c.no++;
    });
    return out;
  }, [state]);
  return (
    <div className="space-y-4">
      <div className="rounded-lg border border-border bg-card p-4 space-y-3">
        <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase text-muted-foreground">Patient age</span>
            <input className={input} value={patientAge} onChange={(e) => setPatientAge(e.target.value)} placeholder="e.g. 9 months" />
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase text-muted-foreground">Gender</span>
            <select className={input} value={patientGender} onChange={(e) => setPatientGender(e.target.value)}>
              <option value="">Select</option>
              <option>Male</option><option>Female</option>
            </select>
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase text-muted-foreground">Age group</span>
            <select className={input} value={ageGroup} onChange={(e) => setAgeGroup(e.target.value)} data-testid="ms-age-group">
              <option value="">-- Select --</option>
              {ageGroupKeys.map((k) => (<option key={k} value={k}>{k}</option>))}
            </select>
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase text-muted-foreground">Output format</span>
            <select className={input} value={format} onChange={(e) => setFormat(e.target.value as 'narrative' | 'list')}>
              <option value="narrative">Narrative</option>
              <option value="list">Structured list</option>
            </select>
          </label>
        </div>
        <div className="flex flex-wrap gap-3 text-xs text-muted-foreground">
          <span><span className="inline-block w-4 h-4 align-middle bg-green-100 text-green-700 text-center rounded mr-1">✓</span> Achieved</span>
          <span><span className="inline-block w-4 h-4 align-middle bg-red-100 text-red-700 text-center rounded mr-1">✗</span> Not achieved</span>
          <span><span className="inline-block w-4 h-4 align-middle bg-muted text-center rounded mr-1">—</span> Not assessed (omitted)</span>
        </div>
      </div>
      {isLoading && <div className="text-sm text-muted-foreground">Loading milestones…</div>}
      {ageGroup && Object.keys(grouped).length === 0 && !isLoading && (
        <div className="text-sm text-muted-foreground italic">No data for this age group.</div>
      )}
      {Object.entries(grouped).map(([domain, items]) => {
        const cfg = DOMAIN_CONFIG[domain] || DEFAULT_DOMAIN;
        const c = domainCounts[domain];
        return (
          <div key={domain} className={'rounded-lg bg-card p-0 overflow-hidden ' + cfg.className}>
            <div className="px-4 py-2 flex items-center gap-2 bg-muted/40">
              <span>{cfg.icon}</span>
              <span className="font-semibold">{domain}</span>
              <span className="ml-auto text-xs text-muted-foreground" data-testid={'ms-badge-' + domain.replace(/\W/g, '_')}>
                {c && c.yes + c.no > 0 ? c.yes + '✓ ' + c.no + '✗ / ' + c.total : c.total + ' items'}
              </span>
            </div>
            <div className="divide-y divide-border">
              {items.map((it) => (
                <div key={it.id} className="flex items-center gap-3 px-4 py-2 text-sm">
                  <div className="flex gap-1 shrink-0">
                    <button
                      type="button"
                      onClick={() => toggle(it.id, 'yes')}
                      className={'w-8 h-8 rounded border text-xs font-bold ' +
                        (it.status === 'yes' ? 'bg-green-100 text-green-700 border-green-400' : 'bg-background border-border hover:bg-muted')
                      }
                      aria-label={'Achieved: ' + it.text}
                    >✓</button>
                    <button
                      type="button"
                      onClick={() => toggle(it.id, 'no')}
                      className={'w-8 h-8 rounded border text-xs font-bold ' +
                        (it.status === 'no' ? 'bg-red-100 text-red-700 border-red-400' : 'bg-background border-border hover:bg-muted')
                      }
                      aria-label={'Not achieved: ' + it.text}
                    >✗</button>
                  </div>
                  <span className={
                    it.status === 'yes' ? 'text-green-700' :
                    it.status === 'no' ? 'text-red-700 line-through decoration-red-400' : ''
                  }>{it.text}</span>
                </div>
              ))}
            </div>
          </div>
        );
      })}
      {Object.keys(grouped).length > 0 && (
        <div className="flex flex-wrap gap-2">
          <button type="button" onClick={allYes} className={btn}>✓ All yes</button>
          <button type="button" onClick={allClear} className={btn}>🧹 Clear all</button>
          <button type="button" onClick={generate} disabled={narrativeMut.isPending} className={btnPrimary}>
            {narrativeMut.isPending ? 'Generating…' : '✨ Generate narrative'}
          </button>
        </div>
      )}
      {msg && (
        <div className={'text-sm ' + (msg.kind === 'ok' ? 'text-green-600' : 'text-destructive')}>
          {msg.text}
        </div>
      )}
      {narrative && (
        <section className="rounded-lg border border-border bg-card">
          <header className="px-4 py-2 border-b border-border bg-muted/40 flex items-center justify-between">
            <h3 className="text-sm font-semibold">Developmental assessment</h3>
            <button type="button" onClick={copyToNote} className={btn}>📋 Copy to Note</button>
          </header>
          {summaryStats && (
            <div className="flex gap-4 text-xs px-4 py-2 border-b border-border bg-background text-muted-foreground">
              <span>✓ Achieved: {summaryStats.achieved}</span>
              <span>✗ Not yet: {summaryStats.notAchieved}</span>
              <span>— Not assessed: {summaryStats.notAssessed} (omitted)</span>
            </div>
          )}
          <div className="p-4 whitespace-pre-wrap text-sm">{narrative}</div>
          <div className="px-4 pb-3">
            <OutputActions
              text={narrative}
              onUpdate={setNarrative}
              exportLabel="milestones"
              exportType="milestones"
            />
          </div>
          <div className="px-4 pb-4 pt-2 border-t border-border space-y-2">
            <button
              type="button"
              onClick={() => summaryMut.mutate()}
              disabled={summaryMut.isPending}
              className={btn}
              data-testid="ms-summary-btn"
            >
              {summaryMut.isPending ? 'Summarizing…' : (quickSummary ? '↻ Regenerate summary' : '📏 3-sentence summary')}
            </button>
            {quickSummary && (
              <div className="rounded-md bg-muted/40 p-3 whitespace-pre-wrap text-sm">
                {quickSummary}
              </div>
            )}
          </div>
        </section>
      )}
    </div>
  );
 }
--- a/client/src/pages/wellvisit/Shadess.tsx
+++ b/client/src/pages/wellvisit/Shadess.tsx
@ -0,0 +1,363 @@
 // ============================================================
 // SSHADESS — psychosocial screening (age 12+).
 // Faithful port of public/js/shadess.js (@be14578) — same 8 domains,
 // same questions, same concern_if flags, same skip toggle.
 //
 // Flow:
 //   1. Clinician fills Yes/No + free-text + comments per domain
 //      (or hits "Listen in" and dictates the whole thing)
 //   2. Generate → POST /api/well-visit/shadess  with {patientAge,
 //      patientGender, domains, dictationText}
 //   3. Result auto-fills sessionStorage so the Visit Note tab can
 //      carry it into the well-visit note (matches the vanilla
 //      wv-shadess-text auto-fill behaviour).
 // ============================================================
 import { useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { api, ApiError } from '@/lib/api';
 import Recorder from '@/components/Recorder';
 import OutputActions from '@/components/OutputActions';
 interface YnQ { id: string; text: string; type: 'yn'; concern_if?: boolean }
 interface TxtQ { id: string; text: string; type: 'text'; placeholder?: string }
 type Q = YnQ | TxtQ;
 interface Domain {
  key: string;
  label: string;
  icon: string;            // emoji stand-in
  color: string;           // border tint
  intro: string;
  questions: Q[];
 }
 // Verbatim from public/js/shadess.js — 8 domains, exact question wording.
 const SHADESS_DOMAINS: Domain[] = [
  { key: 'strengths', label: 'Strengths', icon: '⭐', color: '#f59e0b',
    intro: 'Starting with what you do well helps us get to know you better.',
    questions: [
      { id: 'str1', text: 'Has something they are proud of or enjoy', type: 'yn' },
      { id: 'str2', text: 'Describes self positively when asked', type: 'yn' },
      { id: 'str3', text: 'Has at least one trusted adult they can talk to', type: 'yn' },
    ]
  },
  { key: 'school', label: 'School', icon: '🎓', color: '#3b82f6',
    intro: 'Ask about school performance, attendance, and future plans.',
    questions: [
      { id: 'sch1', text: 'Grades are satisfactory / doing their best', type: 'yn' },
      { id: 'sch2', text: 'Likes school or finds something enjoyable about it', type: 'yn' },
      { id: 'sch3', text: 'Regular attendance (no truancy concerns)', type: 'yn' },
      { id: 'sch4', text: 'Has plans or goals for the future', type: 'yn' },
    ]
  },
  { key: 'home', label: 'Home', icon: '🏠', color: '#10b981',
    intro: 'Ask about living situation and family relationships.',
    questions: [
      { id: 'hom1', text: 'Stable living situation', type: 'yn' },
      { id: 'hom2', text: 'Gets along with people at home', type: 'yn' },
      { id: 'hom3', text: 'Would talk to family member if stressed', type: 'yn' },
      { id: 'hom4', text: 'Has experienced household violence or instability (concern if YES)', type: 'yn', concern_if: true },
    ]
  },
  { key: 'activities', label: 'Activities', icon: '👥', color: '#8b5cf6',
    intro: 'Ask about friends, hobbies, and peer relationships.',
    questions: [
      { id: 'act1', text: 'Has friends and spends time with them', type: 'yn' },
      { id: 'act2', text: 'Involved in sports, clubs, or hobbies', type: 'yn' },
      { id: 'act3', text: 'Social media/screen use within healthy limits', type: 'yn' },
      { id: 'act4', text: 'Has experienced bullying (concern if YES)', type: 'yn', concern_if: true },
    ]
  },
  { key: 'drugs', label: 'Drugs / Substances', icon: '💊', color: '#ef4444',
    intro: 'This is confidential. Ask in private.',
    questions: [
      { id: 'drg1', text: 'Has tried cigarettes / vaping / tobacco', type: 'yn', concern_if: true },
      { id: 'drg2', text: 'Has tried alcohol', type: 'yn', concern_if: true },
      { id: 'drg3', text: 'Has tried marijuana or other drugs', type: 'yn', concern_if: true },
      { id: 'drg4', text: 'Friends use substances', type: 'yn' },
      { id: 'drg5', text: 'CRAFFT screen result (if done)', type: 'text', placeholder: 'e.g., Score 0 — low risk' },
    ]
  },
  { key: 'emotions', label: 'Emotions / Eating', icon: '❤️', color: '#ec4899',
    intro: 'Screen for depression, anxiety, and disordered eating.',
    questions: [
      { id: 'emo1', text: 'Feeling down, sad, or hopeless recently', type: 'yn', concern_if: true },
      { id: 'emo2', text: 'Feeling unusually stressed or anxious', type: 'yn', concern_if: true },
      { id: 'emo3', text: 'Trouble sleeping', type: 'yn' },
      { id: 'emo4', text: 'PHQ-A / depression screen result (if done)', type: 'text', placeholder: 'e.g., PHQ-A score 3 — minimal' },
      { id: 'emo5', text: 'Happy with eating habits and body image', type: 'yn' },
      { id: 'emo6', text: 'Restricting food / purging / using diet pills (concern if YES)', type: 'yn', concern_if: true },
    ]
  },
  { key: 'sexuality', label: 'Sexuality', icon: '🛡️', color: '#f97316',
    intro: 'Ask in private. Normalize the questions.',
    questions: [
      { id: 'sex1', text: 'Comfortable discussing attraction/identity', type: 'yn' },
      { id: 'sex2', text: 'Sexually active', type: 'yn' },
      { id: 'sex3', text: 'Uses protection consistently if sexually active', type: 'yn' },
      { id: 'sex4', text: 'History of unwanted sexual contact (concern if YES)', type: 'yn', concern_if: true },
      { id: 'sex5', text: 'STI screening indicated/done', type: 'yn' },
    ]
  },
  { key: 'safety', label: 'Safety', icon: '🛡', color: '#6366f1',
    intro: 'Ask about violence, weapons, and suicidal ideation.',
    questions: [
      { id: 'saf1', text: 'Feels safe at school and home', type: 'yn' },
      { id: 'saf2', text: 'Carries a weapon (concern if YES)', type: 'yn', concern_if: true },
      { id: 'saf3', text: 'Has been in physical fights recently', type: 'yn', concern_if: true },
      { id: 'saf4', text: 'Wears seatbelt; safe driving practices', type: 'yn' },
      { id: 'saf5', text: 'Thoughts of hurting self or suicide (concern if YES — STAT eval)', type: 'yn', concern_if: true },
      { id: 'saf6', text: 'Columbia/ASQ suicide screen result (if done)', type: 'text', placeholder: 'e.g., ASQ: negative' },
    ]
  }
 ];
 interface DomainAnswers {
  questions: Record<string, string>;     // qid -> 'yes'|'no'|free text
  comment: string;
  concern: boolean;
  skipped: boolean;
 }
 type AnswersMap = Record<string, DomainAnswers>;
 interface ShadessOk { success: true; assessment: string; model: string }
 const input = 'rounded-md border border-input bg-background px-3 py-2 text-sm';
 const btn = 'inline-flex items-center gap-1 rounded-md border border-border bg-background px-3 py-1.5 text-xs font-medium hover:bg-muted disabled:opacity-50';
 const btnPrimary = 'inline-flex items-center gap-1 rounded-md bg-primary text-primary-foreground px-3 py-2 text-sm font-semibold disabled:opacity-50';
 function emptyAnswers(): AnswersMap {
  const out: AnswersMap = {};
  SHADESS_DOMAINS.forEach((d) => {
    out[d.key] = { questions: {}, comment: '', concern: false, skipped: false };
  });
  return out;
 }
 export default function Shadess() {
  const [patientAge, setPatientAge] = useState('');
  const [patientGender, setPatientGender] = useState('');
  const [answers, setAnswers] = useState<AnswersMap>(emptyAnswers);
  const [dictationText, setDictationText] = useState('');
  const [recError, setRecError] = useState<string | null>(null);
  const [result, setResult] = useState<string | null>(null);
  const [msg, setMsg] = useState<{ kind: 'ok' | 'err'; text: string } | null>(null);
  const generate = useMutation<ShadessOk, Error, void>({
    mutationFn: async () => {
      const domains: Record<string, { skipped: boolean; comment: string; concern: boolean; questions: { id: string; text: string; answer: string }[] }> = {};
      SHADESS_DOMAINS.forEach((d) => {
        const a = answers[d.key];
        const qs = d.questions
          .map((q) => ({ id: q.id, text: q.text, answer: a.questions[q.id] || '' }))
          .filter((q) => q.answer !== '');
        domains[d.key] = { skipped: a.skipped, comment: a.comment, concern: a.concern, questions: qs };
      });
      const hasData = Object.values(domains).some((d) => !d.skipped && (d.questions.length > 0 || d.comment));
      if (!hasData && !dictationText.trim()) {
        throw new Error('Fill in at least one domain or dictate something');
      }
      return api.post<ShadessOk>('/api/well-visit/shadess', {
        patientAge, patientGender, domains, dictationText: dictationText.trim() || null,
      });
    },
    onSuccess: (d) => {
      setResult(d.assessment);
      setMsg({ kind: 'ok', text: 'Generated' });
      try { sessionStorage.setItem('wv-shadess-assessment', d.assessment); } catch { /* ignore */ }
    },
    onError: (e) => setMsg({ kind: 'err', text: (e as ApiError).message || 'Generation failed' }),
  });
  function setQ(domainKey: string, qid: string, value: string, concernIf?: boolean) {
    setAnswers((m) => {
      const cur = m[domainKey];
      const newQuestions = { ...cur.questions, [qid]: value };
      // Auto-flag concern when the answer matches the concern_if rule.
      let concern = cur.concern;
      if (concernIf !== undefined && (value === 'yes') === concernIf) {
        concern = true;
      }
      return { ...m, [domainKey]: { ...cur, questions: newQuestions, concern } };
    });
  }
  function setComment(domainKey: string, value: string) {
    setAnswers((m) => ({ ...m, [domainKey]: { ...m[domainKey], comment: value } }));
  }
  function toggleSkip(domainKey: string) {
    setAnswers((m) => ({ ...m, [domainKey]: { ...m[domainKey], skipped: !m[domainKey].skipped } }));
  }
  function toggleConcern(domainKey: string) {
    setAnswers((m) => ({ ...m, [domainKey]: { ...m[domainKey], concern: !m[domainKey].concern } }));
  }
  function clearAll() {
    setAnswers(emptyAnswers());
    setDictationText('');
    setResult(null);
    setMsg(null);
  }
  return (
    <div className="space-y-4">
      <div className="rounded-lg border border-border bg-card p-4 space-y-3">
        <div className="flex flex-wrap items-end gap-3">
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase text-muted-foreground">Patient age</span>
            <input className={input + ' w-32'} value={patientAge} onChange={(e) => setPatientAge(e.target.value)} placeholder="e.g. 14 years" />
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase text-muted-foreground">Gender</span>
            <select className={input + ' w-40'} value={patientGender} onChange={(e) => setPatientGender(e.target.value)}>
              <option value="">Select</option>
              <option>Male</option>
              <option>Female</option>
              <option>Non-binary/Other</option>
            </select>
          </label>
          <div className="ml-auto text-xs text-muted-foreground">
            Recommended age 12 and older. Ask in private.
          </div>
        </div>
        <div>
          <span className="text-xs font-semibold uppercase text-muted-foreground">Listen in (optional dictation)</span>
          <Recorder
            module="shadess"
            onTranscript={(text, meta) => {
              setDictationText((prev) => meta.appended ? (prev ? prev + ' ' + text : text) : text);
              setRecError(null);
            }}
            onError={(m) => setRecError(m)}
          />
          {recError && <div className="text-sm text-destructive">{recError}</div>}
          <textarea
            className={input + ' w-full mt-1 min-h-[60px] font-mono text-xs'}
            placeholder="Or type the dictation directly. Used as supplementary input alongside the structured answers below."
            value={dictationText}
            onChange={(e) => setDictationText(e.target.value)}
          />
        </div>
      </div>
      {SHADESS_DOMAINS.map((d) => {
        const a = answers[d.key];
        return (
          <div
            key={d.key}
            className="rounded-lg border border-border bg-card overflow-hidden"
            style={{ borderLeftWidth: 3, borderLeftColor: d.color }}
            data-testid={'shadess-domain-' + d.key}
          >
            <div className="px-4 py-2 flex items-center gap-2 bg-muted/30">
              <span style={{ color: d.color }}>{d.icon}</span>
              <strong className="text-sm">{d.label}</strong>
              <span className="text-xs text-muted-foreground flex-1 ml-2">{d.intro}</span>
              {a.concern && (
                <span className="text-xs text-amber-700 bg-amber-100 px-2 py-0.5 rounded">⚠ Concern</span>
              )}
              <button
                type="button"
                onClick={() => toggleConcern(d.key)}
                className="text-xs text-muted-foreground hover:text-foreground"
                title="Toggle concern flag"
              >🚩</button>
              <label className="text-xs text-muted-foreground flex items-center gap-1">
                <input type="checkbox" checked={a.skipped} onChange={() => toggleSkip(d.key)} /> Skip
              </label>
            </div>
            <div className={'px-4 py-2 space-y-2 ' + (a.skipped ? 'opacity-30' : '')}>
              {d.questions.map((q) => {
                if (q.type === 'yn') {
                  return (
                    <div key={q.id} className="flex items-center gap-2 text-sm">
                      <span className="flex-1">
                        {q.text}
                        {q.concern_if !== undefined && (
                          <span className="text-[10px] text-muted-foreground ml-1">
                            (flag if {q.concern_if ? 'Yes' : 'No'})
                          </span>
                        )}
                      </span>
                      <select
                        className={input + ' text-xs py-1 w-24'}
                        value={a.questions[q.id] || ''}
                        onChange={(e) => setQ(d.key, q.id, e.target.value, q.concern_if)}
                        disabled={a.skipped}
                        data-testid={'shadess-q-' + q.id}
                      >
                        <option value="">—</option>
                        <option value="yes">Yes</option>
                        <option value="no">No</option>
                      </select>
                    </div>
                  );
                }
                return (
                  <div key={q.id} className="flex items-center gap-2 text-sm">
                    <span className="flex-1">{q.text}</span>
                    <input
                      type="text"
                      className={input + ' text-xs py-1 flex-1 max-w-[260px]'}
                      placeholder={q.placeholder}
                      value={a.questions[q.id] || ''}
                      onChange={(e) => setQ(d.key, q.id, e.target.value)}
                      disabled={a.skipped}
                      data-testid={'shadess-q-' + q.id}
                    />
                  </div>
                );
              })}
              <div className="flex items-start gap-2 text-sm">
                <span className="flex-1 pt-1">Additional notes:</span>
                <textarea
                  rows={2}
                  className={input + ' text-xs flex-1 min-w-[200px] resize-y'}
                  placeholder="Free text comments for this domain…"
                  value={a.comment}
                  onChange={(e) => setComment(d.key, e.target.value)}
                  disabled={a.skipped}
                />
              </div>
            </div>
          </div>
        );
      })}
      <div className="flex flex-wrap gap-2">
        <button type="button" onClick={() => generate.mutate()} disabled={generate.isPending} className={btnPrimary} data-testid="shadess-generate">
          {generate.isPending ? 'Generating…' : '✨ Generate SSHADESS Assessment'}
        </button>
        <button type="button" onClick={clearAll} className={btn}>↺ New patient</button>
      </div>
      {msg && (
        <div className={'text-sm ' + (msg.kind === 'ok' ? 'text-green-600' : 'text-destructive')}>
          {msg.text}
        </div>
      )}
      {result && (
        <section className="rounded-lg border border-border bg-card">
          <header className="px-4 py-2 border-b border-border bg-muted/40">
            <h3 className="text-sm font-semibold">SSHADESS Assessment</h3>
          </header>
          <div className="p-4 whitespace-pre-wrap text-sm">{result}</div>
          <div className="px-4 pb-4">
            <OutputActions
              text={result}
              onUpdate={setResult}
              sourceContext={dictationText}
              exportLabel="sshadess"
              exportType="sshadess"
            />
          </div>
          <div className="px-4 pb-3 text-xs text-muted-foreground">
            ℹ︎ Auto-saved to session for the Visit Note tab — switch tabs to incorporate.
          </div>
        </section>
      )}
    </div>
  );
 }
--- a/client/src/pages/wellvisit/VisitNote.tsx
+++ b/client/src/pages/wellvisit/VisitNote.tsx
@ -0,0 +1,311 @@
 // ============================================================
 // WELL VISIT — note generator (one of four sub-tabs).
 // Picks up SSHADESS + Milestones carry-overs from sessionStorage
 // (auto-set by Shadess.tsx and Milestones.tsx) so the user can
 // flow byvisit → milestones → shadess → note without retyping.
 // ============================================================
 import { useEffect, useState } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { api, ApiError } from '@/lib/api';
 import type { VisitNoteOk } from '@/shared/types';
 import EncounterToolbar from '@/components/EncounterToolbar';
 import EditableResult from '@/components/EditableResult';
 import Recorder from '@/components/Recorder';
 import RosPeTable, { rosAllWnl, rosClear } from '@/components/RosPeTable';
 import DxPicker from '@/components/DxPicker';
 import {
  ROS_SYSTEMS,
  PE_SYSTEMS,
  formatRosForAI,
  formatDxForAI,
  type RosData,
  type DxEntry,
 } from '@shared/clinical/ros-pe-dx';
 const TYPE = 'wellvisit' as const;
 const input = 'w-full rounded-md border border-input bg-background px-3 py-2 text-sm';
 export default function VisitNote() {
  const [label, setLabel] = useState('');
  const [patientAge, setPatientAge] = useState('');
  const [patientGender, setPatientGender] = useState('');
  const [visitAge, setVisitAge] = useState('');
  const [vitals, setVitals] = useState('');
  const [measurements, setMeasurements] = useState('');
  const [parentConcerns, setParentConcerns] = useState('');
  const [transcript, setTranscript] = useState('');
  const [interim, setInterim] = useState('');
  const [recError, setRecError] = useState<string | null>(null);
  const [shadess, setShadess] = useState('');
  const [milestones, setMilestones] = useState('');
  const [screenings, setScreenings] = useState('');
  const [vaccines, setVaccines] = useState('');
  const [byvisit, setByvisit] = useState('');
  const [rosData, setRosData] = useState<RosData>({});
  const [peData, setPeData] = useState<RosData>({});
  const [diagnoses, setDiagnoses] = useState<DxEntry[]>([]);
  const [dxFreetext, setDxFreetext] = useState('');
  const [noteStyle, setNoteStyle] = useState<'full' | 'short'>('full');
  const [result, setResult] = useState<string | null>(null);
  // On mount: pick up SSHADESS / Milestones / By-Visit carry-overs.
  useEffect(() => {
    try {
      const s = sessionStorage.getItem('wv-shadess-assessment');
      if (s) setShadess(s);
      const m = sessionStorage.getItem('wv-milestones-narrative');
      if (m) setMilestones(m);
      const b = sessionStorage.getItem('wv-byvisit-statuses');
      if (b) setByvisit(b);
      const va = sessionStorage.getItem('ped_visit_age');
      if (va) setVisitAge((cur) => cur || va);
    } catch { /* ignore */ }
  }, []);
  const generate = useMutation<VisitNoteOk, Error, Record<string, unknown>>({
    mutationFn: (body) => api.post<VisitNoteOk>('/api/well-visit/note', body),
    onSuccess: (data) => setResult(data.note),
  });
  function submit(e: React.FormEvent) {
    e.preventDefault();
    setResult(null);
    const rosText = formatRosForAI(ROS_SYSTEMS, rosData, 'ROS');
    const peText = formatRosForAI(PE_SYSTEMS, peData, 'PHYSICAL EXAM');
    const dxText = formatDxForAI(diagnoses, dxFreetext);
    generate.mutate({
      patientAge, patientGender, visitAge,
      vitals, measurements, parentConcerns,
      transcript: (interim || transcript).trim(),
      shadessAssessment: shadess || undefined,
      // The byvisit summary is appended to screenings so the AI sees it.
      screenings: [screenings, byvisit].filter(Boolean).join('\n\n'),
      vaccines,
      ros: rosText || undefined,
      physicalExam: peText || undefined,
      diagnoses: dxText || undefined,
      // Milestones get folded into transcript context as a developmental block.
      physicianMemories: milestones ? '[DEVELOPMENTAL ASSESSMENT]\n' + milestones : undefined,
      noteStyle,
    });
  }
  const displayedTranscript = interim || transcript;
  return (
    <div className="space-y-4">
      <EncounterToolbar
        type={TYPE}
        label={label} setLabel={setLabel}
        transcript={transcript} generatedNote={result || ''}
        partialData={{ age: patientAge, gender: patientGender, visitAge, vitals, measurements, parentConcerns, shadess, milestones, byvisit, screenings, vaccines, rosData, peData, diagnoses, dxFreetext, noteStyle }}
        onLoad={(enc) => {
          setTranscript(enc.transcript || '');
          setInterim('');
          setResult(enc.generated_note || null);
          try {
            const pd = enc.partial_data ? JSON.parse(enc.partial_data) : null;
            if (pd?.age) setPatientAge(pd.age);
            if (pd?.gender) setPatientGender(pd.gender);
            if (pd?.visitAge) setVisitAge(pd.visitAge);
            if (pd?.vitals) setVitals(pd.vitals);
            if (pd?.measurements) setMeasurements(pd.measurements);
            if (pd?.parentConcerns) setParentConcerns(pd.parentConcerns);
            if (pd?.shadess) setShadess(pd.shadess);
            if (pd?.milestones) setMilestones(pd.milestones);
            if (pd?.byvisit) setByvisit(pd.byvisit);
            if (pd?.screenings) setScreenings(pd.screenings);
            if (pd?.vaccines) setVaccines(pd.vaccines);
            if (pd?.rosData) setRosData(pd.rosData);
            if (pd?.peData) setPeData(pd.peData);
            if (pd?.diagnoses) setDiagnoses(pd.diagnoses);
            if (pd?.dxFreetext) setDxFreetext(pd.dxFreetext);
            if (pd?.noteStyle) setNoteStyle(pd.noteStyle);
          } catch { /* ignore */ }
          setLabel(enc.label || '');
        }}
        onClear={() => {
          setTranscript(''); setInterim(''); setResult(null);
          setPatientAge(''); setPatientGender(''); setVisitAge('');
          setVitals(''); setMeasurements(''); setParentConcerns('');
          setShadess(''); setMilestones(''); setByvisit('');
          setScreenings(''); setVaccines('');
          setRosData({}); setPeData({}); setDiagnoses([]); setDxFreetext('');
          setNoteStyle('full');
        }}
      />
      <form onSubmit={submit} className="space-y-4">
        <div className="grid grid-cols-3 gap-3">
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Age</span>
            <input className={input} value={patientAge} onChange={(e) => setPatientAge(e.target.value)} />
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Gender</span>
            <select className={input} value={patientGender} onChange={(e) => setPatientGender(e.target.value)}>
              <option value="">Select</option><option>Male</option><option>Female</option>
            </select>
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Visit age</span>
            <input className={input} placeholder="e.g. 6 months" value={visitAge} onChange={(e) => setVisitAge(e.target.value)} />
          </label>
        </div>
        <div className="grid grid-cols-2 gap-3">
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Vital signs</span>
            <textarea className={input + ' min-h-[60px] font-mono text-xs'} value={vitals} onChange={(e) => setVitals(e.target.value)} />
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Measurements / growth</span>
            <textarea className={input + ' min-h-[60px] font-mono text-xs'} value={measurements} onChange={(e) => setMeasurements(e.target.value)} />
          </label>
        </div>
        <label className="flex flex-col gap-1">
          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Parent / patient concerns</span>
          <textarea className={input + ' min-h-[60px] text-sm'} value={parentConcerns} onChange={(e) => setParentConcerns(e.target.value)} />
        </label>
        <Recorder
          module="wellvisit"
          onTranscript={(text, meta) => {
            setTranscript((prev) => meta.appended ? (prev ? prev + ' ' + text : text) : text);
            setInterim('');
            setRecError(null);
          }}
          onInterim={(t) => setInterim(t ? (transcript ? transcript + ' ' + t : t) : '')}
          onError={(m) => setRecError(m)}
        />
        {recError && <div className="text-sm text-destructive">{recError}</div>}
        <label className="flex flex-col gap-1">
          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Transcript / dictation</span>
          <textarea
            className={input + ' min-h-[160px] font-mono text-sm'}
            value={displayedTranscript}
            onChange={(e) => { setTranscript(e.target.value); setInterim(''); }}
            placeholder="Click Start recording, or type / paste."
          />
        </label>
        {(shadess || milestones || byvisit) && (
          <div className="rounded-lg border border-amber-200 bg-amber-50 dark:bg-amber-950/30 p-3 space-y-2">
            <div className="text-xs font-semibold text-amber-800 dark:text-amber-200">Carry-overs from other tabs (used in note generation)</div>
            {milestones && (
              <details className="text-xs">
                <summary className="cursor-pointer text-muted-foreground">Developmental assessment ({milestones.length} chars)</summary>
                <textarea className={input + ' mt-1 min-h-[80px] font-mono text-xs'} value={milestones} onChange={(e) => setMilestones(e.target.value)} />
              </details>
            )}
            {shadess && (
              <details className="text-xs">
                <summary className="cursor-pointer text-muted-foreground">SSHADESS assessment ({shadess.length} chars)</summary>
                <textarea className={input + ' mt-1 min-h-[80px] font-mono text-xs'} value={shadess} onChange={(e) => setShadess(e.target.value)} />
              </details>
            )}
            {byvisit && (
              <details className="text-xs">
                <summary className="cursor-pointer text-muted-foreground">By-visit-age statuses ({byvisit.split('\n').length} lines)</summary>
                <textarea className={input + ' mt-1 min-h-[80px] font-mono text-xs'} value={byvisit} onChange={(e) => setByvisit(e.target.value)} />
              </details>
            )}
          </div>
        )}
        <div className="grid grid-cols-2 gap-3">
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Screenings completed</span>
            <textarea className={input + ' min-h-[60px] text-xs'} value={screenings} onChange={(e) => setScreenings(e.target.value)} />
          </label>
          <label className="flex flex-col gap-1">
            <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Immunizations today</span>
            <textarea className={input + ' min-h-[60px] text-xs'} value={vaccines} onChange={(e) => setVaccines(e.target.value)} />
          </label>
        </div>
        <div className="rounded-lg border border-border bg-card">
          <div className="px-3 py-2 flex items-center justify-between bg-muted/40 border-b border-border">
            <span className="text-xs font-semibold uppercase tracking-wider">Review of Systems</span>
            <div className="flex gap-1">
              <button type="button" onClick={() => setRosData(rosAllWnl(ROS_SYSTEMS, rosData))} className="text-xs rounded border border-border px-2 py-1 hover:bg-muted">✓ All WNL</button>
              <button type="button" onClick={() => setRosData(rosClear(rosData, ROS_SYSTEMS))} className="text-xs rounded border border-border px-2 py-1 hover:bg-muted">Clear</button>
            </div>
          </div>
          <RosPeTable
            systems={ROS_SYSTEMS}
            data={rosData}
            onChange={setRosData}
            btnLabels={{ wnl: 'WNL', abnormal: 'Abnormal', notrev: 'Not reviewed' }}
            testIdPrefix="wv-ros"
          />
        </div>
        <div className="rounded-lg border border-border bg-card">
          <div className="px-3 py-2 flex items-center justify-between bg-muted/40 border-b border-border">
            <span className="text-xs font-semibold uppercase tracking-wider">Physical Examination</span>
            <div className="flex gap-1">
              <button type="button" onClick={() => setPeData(rosAllWnl(PE_SYSTEMS, peData))} className="text-xs rounded border border-border px-2 py-1 hover:bg-muted">✓ All Normal</button>
              <button type="button" onClick={() => setPeData(rosClear(peData, PE_SYSTEMS))} className="text-xs rounded border border-border px-2 py-1 hover:bg-muted">Clear</button>
            </div>
          </div>
          <RosPeTable
            systems={PE_SYSTEMS}
            data={peData}
            onChange={setPeData}
            btnLabels={{ wnl: 'Normal', abnormal: 'Abnormal', notrev: 'Not examined' }}
            testIdPrefix="wv-pe"
          />
        </div>
        <div className="rounded-lg border border-border bg-card p-3 space-y-2">
          <span className="text-xs font-semibold uppercase tracking-wider">Diagnoses (ICD-10)</span>
          <DxPicker value={diagnoses} onChange={setDiagnoses} testIdPrefix="wv-dx" />
          <label className="block">
            <span className="text-[11px] text-muted-foreground">Additional free-text diagnosis / note (optional)</span>
            <input
              type="text"
              value={dxFreetext}
              onChange={(e) => setDxFreetext(e.target.value)}
              className={input + ' text-sm'}
              placeholder="e.g. Rule out iron-deficiency anaemia pending labs"
            />
          </label>
        </div>
        <label className="flex flex-col gap-1">
          <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Note style</span>
          <select className={input} value={noteStyle} onChange={(e) => setNoteStyle(e.target.value as 'full' | 'short')}>
            <option value="full">Full encounter note</option>
            <option value="short">Brief SOAP</option>
          </select>
        </label>
        {generate.error && <div className="text-sm text-destructive">{(generate.error as ApiError).message}</div>}
        <button
          type="submit"
          disabled={generate.isPending || (!patientAge.trim() && !visitAge.trim())}
          className="rounded-md bg-primary text-primary-foreground px-4 py-2 text-sm font-medium disabled:opacity-50"
        >
          {generate.isPending ? 'Generating…' : 'Generate Well Visit Note'}
        </button>
      </form>
      {result !== null && (
        <EditableResult
          text={result}
          onChange={setResult}
          section="wellvisit"
          title="Well Visit Note"
          exportLabel="well-visit-note"
          exportType="well-visit"
          sourceContext={displayedTranscript}
        />
      )}
    </div>
  );
 }
--- a/client/src/shared/schemas.ts
+++ b/client/src/shared/schemas.ts
@ -0,0 +1,118 @@
 // ============================================================
 // ZOD SCHEMAS — runtime validation at API boundaries
 // ============================================================
 // Each incoming request body gets parsed through one of these schemas
 // BEFORE the handler sees it. If parse fails, a 400 is returned with
 // the detailed validation error — no more silent "undefined reading
 // X" crashes on malformed input. TypeScript types for req.body can
 // be inferred from the schema with `z.infer<typeof XxxSchema>`.
 //
 // Keep wire-shape aligned with shared/types.ts. The types file is
 // for RESPONSES (what the server returns); this file is for REQUESTS
 // (what the client sends).
 // ============================================================
 import { z } from 'zod';
 // ── Common fragments ─────────────────────────────────────────
 const NonEmptyString = z.string().min(1);
 const OptionalTrimmed = z.string().optional();
 const OptionalModel = z.string().optional();
 // ── Auth ─────────────────────────────────────────────────────
 export const LoginRequestSchema = z.object({
  email: z.string().email(),
  password: NonEmptyString,
  turnstileToken: OptionalTrimmed,
  totpCode: OptionalTrimmed,
 });
 export const RegisterRequestSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8, 'Password must be at least 8 characters'),
  name: NonEmptyString,
  turnstileToken: OptionalTrimmed,
 });
 export const ForgotPasswordRequestSchema = z.object({
  email: z.string().email(),
  turnstileToken: OptionalTrimmed,
 });
 // ── AI generation requests ───────────────────────────────────
 export const HpiEncounterRequestSchema = z.object({
  transcript: NonEmptyString,
  patientAge: OptionalTrimmed,
  patientGender: OptionalTrimmed,
  model: OptionalModel,
  setting: z.enum(['outpatient', 'inpatient']).optional(),
  physicianMemories: OptionalTrimmed,
 });
 export const SoapRequestSchema = z.object({
  transcript: NonEmptyString,
  patientAge: OptionalTrimmed,
  patientGender: OptionalTrimmed,
  model: OptionalModel,
  type: z.enum(['full', 'subjective']).optional(),
  additionalInstructions: OptionalTrimmed,
  physicianMemories: OptionalTrimmed,
 });
 export const SickVisitRequestSchema = z.object({
  patientAge: OptionalTrimmed,
  patientGender: OptionalTrimmed,
  chiefComplaint: NonEmptyString,
  transcript: OptionalTrimmed,
  dictation: OptionalTrimmed,
  ros: OptionalTrimmed,
  physicalExam: OptionalTrimmed,
  diagnoses: OptionalTrimmed,
  physicianMemories: OptionalTrimmed,
  model: OptionalModel,
 });
 export const RefineRequestSchema = z.object({
  currentDocument: NonEmptyString,
  instructions: NonEmptyString,
  sourceContext: OptionalTrimmed,
  model: OptionalModel,
 });
 export const PeNarrativeRequestSchema = z.object({
  steps: z.array(z.object({
    component: OptionalTrimmed,
    label: NonEmptyString,
    method: OptionalTrimmed,
    normal: OptionalTrimmed,
    status: z.enum(['normal', 'abnormal']).nullable().optional(),
    note: OptionalTrimmed,
  })).min(1),
  ageGroup: OptionalTrimmed,
  system: OptionalTrimmed,
  patientAge: OptionalTrimmed,
  patientGender: OptionalTrimmed,
  model: OptionalModel,
  format: z.enum(['narrative', 'list']).optional(),
 });
 // ── Extensions CRUD ──────────────────────────────────────────
 export const ExtensionCreateSchema = z.object({
  location: z.string().min(1).max(120),
  name: z.string().min(1).max(120),
  number: z.string().min(1).max(40),
  type: z.enum(['extension', 'pager']).optional(),
  notes: z.string().max(500).optional(),
 });
 export const ExtensionUpdateSchema = ExtensionCreateSchema;
 // ── Inferred types (use instead of hand-written interfaces) ─
 export type LoginRequest = z.infer<typeof LoginRequestSchema>;
 export type RegisterRequest = z.infer<typeof RegisterRequestSchema>;
 export type ForgotPasswordRequest = z.infer<typeof ForgotPasswordRequestSchema>;
 export type HpiEncounterRequest = z.infer<typeof HpiEncounterRequestSchema>;
 export type SoapRequest = z.infer<typeof SoapRequestSchema>;
 export type SickVisitRequest = z.infer<typeof SickVisitRequestSchema>;
 export type RefineRequest = z.infer<typeof RefineRequestSchema>;
 export type PeNarrativeRequest = z.infer<typeof PeNarrativeRequestSchema>;
 export type ExtensionCreate = z.infer<typeof ExtensionCreateSchema>;
--- a/client/src/shared/types.ts
+++ b/client/src/shared/types.ts
@ -0,0 +1,572 @@
 // ============================================================
 // SHARED TYPES — consumed by both server (src/routes/*.ts) and
 // client (client/src/*). A response-shape change here breaks the
 // build on both sides until they agree.
 //
 // This is the single most important file in the TypeScript
 // migration. Three of the bugs we hit before this point were
 // response-shape mismatches (refine returned `content` vs
 // `refined`, sick-visit endpoint path mismatch, hospital-course
 // key mismatch). Typing the wire protocol makes them compile-time
 // errors.
 //
 // Keep this file strictly about wire protocol — no DB row shapes,
 // no server-internal helpers. Anything that crosses the network.
 // ============================================================
 // ── Envelope ─────────────────────────────────────────────────
 // Every route returns either `{success: true, ...extraFields}` or
 // `{success: false, error: string}`. The generic `T` is the shape
 // of the extra fields on success. Client code does:
 //   const r: ApiResponse<HpiOk> = await fetch(...).then(r => r.json());
 //   if (r.success) console.log(r.hpi);
 //   else           showToast(r.error);
 export interface ApiErr {
  success: false;
  error: string;
 }
 export type ApiResponse<T> = ({ success: true } & T) | ApiErr;
 // Model tag accompanies every AI response — LiteLLM pass-through.
 export interface WithModel {
  model: string;
 }
 // ── AI generation responses ──────────────────────────────────
 // Keys match exactly what each route returns today. Do not rename
 // without updating the server-side res.json() call in the same commit.
 // /api/generate-hpi-encounter
 // /api/generate-hpi-dictation
 export interface HpiOk extends WithModel {
  hpi: string;
 }
 // /api/generate-soap
 export interface SoapOk extends WithModel {
  soap: string;
 }
 // /api/sick-visit/note   (NOT /api/generate-sick-visit — that path does not exist)
 // /api/well-visit/note
 export interface VisitNoteOk extends WithModel {
  note: string;
 }
 // /api/generate-hospital-course
 export interface HospitalCourseOk extends WithModel {
  hospitalCourse: string;
  format?: string;
 }
 // /api/generate-chart-review
 export interface ChartReviewOk extends WithModel {
  review: string;
 }
 // /api/generate-pe-narrative
 export interface PeNarrativeOk extends WithModel {
  narrative: string;
  summary: {
    normal: number;
    abnormal: number;
    notAssessed: number;
  };
 }
 // /api/generate-milestone-narrative
 export interface MilestoneNarrativeOk extends WithModel {
  narrative: string;
  summary: {
    achieved: number;
    notAchieved: number;
    notAssessed: number;
  };
 }
 // /api/generate-milestone-summary
 export interface MilestoneSummaryOk extends WithModel {
  summary: string;
 }
 // /api/well-visit/shadess
 export interface ShadessOk extends WithModel {
  assessment: string;
 }
 // /api/refine
 export interface RefineOk extends WithModel {
  refined: string;
 }
 // /api/shorten  (via refine.js router)
 export interface ShortenOk extends WithModel {
  shortened: string;
 }
 // /api/clarify and /hospital-course/clarify
 export interface ClarifyOk extends WithModel {
  questions: string;
 }
 // /api/suggest-billing-codes
 export interface BillingCodesOk extends WithModel {
  icd10: Array<{ code: string; description: string; reason?: string }>;
  cpt: Array<{ code: string; description: string; reason?: string }>;
 }
 // /api/transcribe
 export interface TranscribeOk {
  text: string;
  provider: string;
  duration: number;
 }
 // /api/tts
 export interface TtsOk {
  audioBase64: string;
 }
 // /api/models
 export interface ModelsOk {
  models: Array<{ id: string; label?: string }>;
 }
 // ── Auth ─────────────────────────────────────────────────────
 export interface AuthUser {
  id: number;
  email: string;
  name: string;
  role?: string;
  isVerified?: boolean;
  has2FA?: boolean;
  // canLocalAuth: false for SSO-auto-created accounts whose password is a
  // random hex blob that can never verify. Settings hides password/2FA UI
  // for those users. totp_enabled / email_verified / nextcloud_* mirror
  // DB columns returned by /api/auth/me.
  canLocalAuth?: boolean;
  totp_enabled?: boolean;
  email_verified?: boolean;
  nextcloud_url?: string | null;
  nextcloud_user?: string | null;
  nextcloud_folder?: string | null;
  webdav_learning_path?: string | null;
  created_at?: string;
 }
 // /api/auth/login (two-phase: may also return requires2FA / needsVerification)
 export interface LoginOk {
  token: string;
  user: AuthUser;
  sessionId?: string;
 }
 export interface LoginRequires2FA {
  success: true;
  requires2FA: true;
 }
 export interface LoginNeedsVerification {
  success: true;
  needsVerification: true;
 }
 // /api/auth/me
 export interface MeOk {
  user: AuthUser;
 }
 // ── Sessions ─────────────────────────────────────────────────
 // Keys match the wire shape returned by /api/sessions (snake_case from
 // the DB columns, deliberately unchanged to keep the existing vanilla
 // client working during migration).
 export interface SessionRow {
  id: string;
  ip_address?: string | null;
  device_label?: string | null;
  created_at: string;
  last_activity: string;
 }
 export interface SessionsOk {
  sessions: SessionRow[];
  currentSessionId: string | null;
 }
 export interface RevokeAllSessionsOk {
  revoked?: number;
 }
 // ── 2FA + password change ────────────────────────────────────
 // /api/auth/setup-2fa
 export interface Setup2faOk {
  secret: string;
  qrCode: string;
 }
 // /api/auth/verify-2fa — backupCodes populated only on first enable
 export interface Verify2faOk {
  backupCodes: string[] | null;
 }
 // /api/auth/2fa/backup-codes/count
 export interface BackupCodesCountOk {
  remaining: number;
 }
 // /api/auth/2fa/backup-codes (regenerate)
 export interface RegenBackupCodesOk {
  codes: string[];
  message?: string;
 }
 // /api/auth/change-password
 export interface ChangePasswordOk {
  message: string;
  passwordWarning?: string;
 }
 // ── Integrations ─────────────────────────────────────────────
 // /api/nextcloud/connect
 export interface NextcloudConnectOk {
  message: string;
 }
 // /api/nextcloud/disconnect — {success: true}
 // /api/documents — shape returned to the client
 export interface UserDocument {
  id: number;
  filename: string;
  mime_type: string;
  size_bytes: number;
  description?: string | null;
  created_at: string;
 }
 export interface DocumentsListOk {
  documents: UserDocument[];
  s3_configured: boolean;
 }
 // /api/documents/upload — multipart; response below
 export interface DocumentUploadOk {
  id: number;
  filename: string;
 }
 // /api/documents/:id/download — returns a short-lived presigned URL
 export interface DocumentDownloadOk {
  url: string;
 }
 // ── Voice prefs + transcription settings ─────────────────────
 // /api/user/preferences
 export interface UserPreferencesOk {
  stt_model: string | null;
  tts_voice: string | null;
 }
 // /api/user/preferences/options — the provider-scoped lists of models/voices
 export interface VoiceOption {
  value: string;
  label: string;
 }
 export interface PreferencesOptionsOk {
  sttProvider: string;
  sttModels: VoiceOption[];
  ttsProvider: string;
  ttsVoices: VoiceOption[];
 }
 // ── Saved encounters list (Settings view) ────────────────────
 // Note: /api/encounters/saved returns a richer row than the sidebar
 // EncounterSummary. The Settings list only needs these fields.
 export interface SavedEncounterRow {
  id: number;
  label: string;
  enc_type: string;
  status?: string | null;
  created_at: string;
  updated_at: string;
  expires_at: string;
  transcript_preview?: string;
  note_preview?: string;
 }
 export interface SavedEncountersListOk {
  encounters: SavedEncounterRow[];
 }
 // ── Audio backups (server-stored recordings, 24h TTL) ────────
 export interface AudioBackupRow {
  id: number;
  module: string;
  mime_type: string;
  size_bytes: number;
  compressed_bytes?: number;
  created_at: string;
  expires_at: string;
 }
 export interface AudioBackupsListOk {
  backups: AudioBackupRow[];
 }
 // ── Memories (templates + corrections share this shape) ──────
 // Extends the minimal Memory type with fields needed by the Settings
 // list view (corrections need created_at to show dates).
 export interface MemoryRow {
  id: number;
  category: string;
  name: string;
  content: string;
  created_at?: string;
 }
 export interface MemoriesOk {
  memories: MemoryRow[];
 }
 // ── Admin ───────────────────────────────────────────────────
 // /api/admin/users (admin-gated)
 export interface AdminUser {
  id: number;
  email: string;
  name: string;
  role: string | null;
  email_verified: boolean;
  totp_enabled: boolean;
  disabled: boolean;
  created_at: string;
  updated_at?: string;
  nextcloud_url?: string | null;
  api_calls?: number;
  last_login?: string | null;
 }
 export interface AdminUsersOk { users: AdminUser[] }
 export interface AdminUserOk { user: AdminUser }
 export interface AdminSettingsOk {
  settings: { registrationEnabled: boolean };
  stats: { totalUsers: number; totalApiCalls: number; todayApiCalls: number };
 }
 export interface AdminLogEntry {
  id: number;
  user_id: number | null;
  action: string;
  detail: string;
  category: string;
  ip_address?: string | null;
  timestamp: string;
  user_email?: string | null;
  user_name?: string | null;
 }
 export interface AdminLogsOk { logs: AdminLogEntry[] }
 // /api/admin/config  /  /api/admin/config/:key
 export interface AdminConfigRow {
  key: string;
  value: string | null;
  description?: string | null;
  source?: 'env' | 'db' | 'openbao' | string;
 }
 export interface AdminConfigOk { config: AdminConfigRow[] }
 export interface AdminAnnouncementOk {
  enabled: boolean;
  message: string;
  kind?: string;
 }
 // /api/admin/config/prompts
 export interface AdminPromptRow {
  key: string;
  value: string;
  description?: string;
  default?: string;
  isDefault?: boolean;
 }
 export interface AdminPromptsOk { prompts: AdminPromptRow[] }
 // /api/admin/config/smtp/status
 export interface AdminSmtpStatusOk {
  configured: boolean;
  host?: string;
  port?: number;
  user?: string;
  from?: string;
 }
 // /api/admin/config/models
 export interface AdminModelRow {
  id: string;
  label?: string;
  provider?: string;
  enabled: boolean;
  isDefault?: boolean;
  isCustom?: boolean;
  tags?: string[];
 }
 export interface AdminModelsOk {
  models: AdminModelRow[];
  provider?: string;
  defaultModel?: string | null;
 }
 // /api/admin/config/tts and /stt
 export interface AdminVoiceProviderOk {
  provider: string;
  enabled: boolean;
  voice?: string | null;
  model?: string | null;
  endpoint?: string | null;
  extra?: Record<string, unknown>;
 }
 // ── Learning Hub (user-facing) ──────────────────────────────
 // Categories
 export interface LearningCategory {
  id: number;
  name: string;
  slug: string;
  description?: string | null;
 }
 export interface LearningCategoriesOk {
  categories: LearningCategory[];
 }
 // Feed / category / search list rows — same shape across all list endpoints
 export interface LearningFeedRow {
  id: number;
  title: string;
  slug: string;
  subject?: string | null;
  content_type: 'article' | 'pearl' | 'presentation' | 'quiz' | string;
  created_at: string;
  updated_at?: string;
  category_name?: string | null;
  category_slug?: string | null;
  author_name?: string | null;
  question_count?: number;
  score?: number;
  match_type?: 'keyword' | 'semantic';
 }
 export interface LearningFeedListOk {
  content: LearningFeedRow[];
  total?: number;
  method?: 'keyword' | 'semantic' | 'hybrid';
 }
 // Single content with questions + progress
 export interface LearningOption {
  id: number;
  option_text: string;
  sort_order: number;
 }
 export interface LearningQuestion {
  id: number;
  question_text: string;
  question_type: 'single' | 'multi' | 'true_false' | string;
  explanation?: string | null;
  options: LearningOption[];
 }
 export interface LearningProgressEntry {
  score: number;
  total: number;
  completed_at: string;
 }
 export interface LearningContentFull {
  id: number;
  title: string;
  slug: string;
  subject?: string | null;
  body?: string;
  content_type: string;
  category_name?: string | null;
  category_slug?: string | null;
  author_name?: string | null;
  questions: LearningQuestion[];
  progress: LearningProgressEntry[];
 }
 export interface LearningContentOk {
  content: LearningContentFull;
 }
 // Quiz submit
 export interface QuizAnswer {
  questionId: number;
  optionId?: number | null;
  optionIds?: number[];
 }
 export interface QuizResultEntry {
  questionId: number;
  questionType: string;
  questionText: string;
  isCorrect: boolean;
  selectedOptionId?: number | null;
  selectedOptionIds?: number[];
  correctOptionId?: number | null;
  correctOptionIds?: number[];
  correctOptionText?: string;
  selectedExplanation?: string;
  generalExplanation?: string;
 }
 export interface QuizSubmitOk {
  score: number;
  total: number;
  percentage: number;
  results: QuizResultEntry[];
 }
 // /api/learning/content/:slug/slides (Marp rendering)
 export interface LearningSlidesOk {
  css: string;
  slides: string[]; // pre-rendered HTML per slide from the server
 }
 // Public config for the auth screen (anonymous users allowed).
 // /api/auth/public-config
 export interface PublicConfigOk {
  registrationEnabled: boolean;
  turnstileSiteKey: string | null;
  oidcEnabled: boolean;
  disableLocalAuth: boolean;
  ssoButtonLabel: string;
 }
 // ── Extensions (pagers/directory) ────────────────────────────
 export interface Extension {
  id: number;
  location: string;
  name: string;
  number: string;
  type: 'extension' | 'pager';
  notes?: string;
  deletedAt?: string | null;
 }
 export interface ExtensionsListOk {
  items: Extension[];
 }
 // ── Memories (saved templates / style hints) ─────────────────
 export interface Memory {
  id: number;
  category: string;
  name: string;
  content: string;
 }
 export interface MemoriesListOk {
  items: Memory[];
 }
 // ── Learning hub ─────────────────────────────────────────────
 export interface LearningContentItem {
  id: number | string;
  slug?: string;
  title: string;
  category?: string;
  excerpt?: string;
  body?: string;
 }
 export interface LearningFeedOk {
  content: LearningContentItem[];
  total?: number;
 }
 // ── Encounters (saved drafts) ────────────────────────────────
 export interface EncounterSummary {
  id: number;
  label: string;
  type: 'encounter' | 'dictation' | 'hospital' | 'chart' | 'wellvisit' | 'sickvisit' | 'soap';
  createdAt: string;
  updatedAt: string;
 }
 export interface EncountersListOk {
  items: EncounterSummary[];
 }
 // ── Health ───────────────────────────────────────────────────
 export interface HealthOk {
  ok: boolean;
 }
--- a/client/tsconfig.app.json
+++ b/client/tsconfig.app.json
@ -0,0 +1,37 @@
 {
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
    "target": "es2023",
    "lib": ["ES2023", "DOM"],
    "module": "esnext",
    "types": ["vite/client"],
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    "jsx": "react-jsx",
    /* Linting */
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": false,
    "noFallthroughCasesInSwitch": true,
    "paths": {
      "@/*": ["./src/*"],
      "@shared/*": ["../shared/*"]
    }
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "../shared/**/*.ts"
  ],
  "exclude": [
    "../shared/**/*.test.ts"
  ]
 }
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@ -0,0 +1,7 @@
 {
  "files": [],
  "references": [
    { "path": "./tsconfig.app.json" },
    { "path": "./tsconfig.node.json" }
  ]
 }
--- a/client/tsconfig.node.json
+++ b/client/tsconfig.node.json
@ -0,0 +1,24 @@
 {
  "compilerOptions": {
    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
    "target": "es2023",
    "lib": ["ES2023"],
    "module": "esnext",
    "types": ["node"],
    "skipLibCheck": true,
    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "verbatimModuleSyntax": true,
    "moduleDetection": "force",
    "noEmit": true,
    /* Linting */
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "erasableSyntaxOnly": true,
    "noFallthroughCasesInSwitch": true
  },
  "include": ["vite.config.ts"]
 }
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@ -0,0 +1,36 @@
 import path from 'node:path';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import tailwindcss from '@tailwindcss/vite';
 // Vite config for the React client.
 //
 // Build output → ../public/app/   so Express can serve it as a static
 // bundle. While migration is in-flight, the old vanilla JS still lives
 // at /, and the React tree answers /app/*.
 //
 // Dev server proxies /api to the backend running on localhost:3000
 // (or wherever the backend is) so React dev works against real data.
 //
 // @shared alias resolves to the repo-root shared/ directory — the
 // typed wire-protocol + Zod schemas imported by server and client alike.
 export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@shared': path.resolve(__dirname, '../shared'),
    },
  },
  server: {
    proxy: {
      '/api': { target: 'http://localhost:3000', changeOrigin: true },
    },
  },
  build: {
    outDir: path.resolve(__dirname, '../public/app'),
    emptyOutDir: true,
    assetsDir: 'assets',
  },
  base: '/app/',
 });
--- a/e2e/fixtures/calc-vectors.json
+++ b/e2e/fixtures/calc-vectors.json
--- a/e2e/tests/admin-react.spec.js
+++ b/e2e/tests/admin-react.spec.js
@ -0,0 +1,27 @@
 // ============================================================
 // ADMIN (React port) — access-gate smoke test.
 //
 // The e2e test user is a non-admin by default, so the expected
 // outcome here is the access-denied panel. A separate admin-enabled
 // fixture can exercise the elevated view when the per-section ports
 // land.
 // ============================================================
 const { test, expect, E2E_BASE } = require('../fixtures');
 test.describe('React Admin — access gate', () => {
  test('non-admin users see the access-denied card', async ({ authedPage: _, page }) => {
    await page.goto(E2E_BASE + '/app/admin');
    // Either the admin shell (role=admin) OR the access-denied card
    // (everyone else). The seeded e2e user is non-admin, so we expect
    // the denial — but if the seed ever flips, the test still passes.
    await page.waitForSelector(
      '[data-testid="admin-access-denied"], [data-testid="admin-shell"]',
      { timeout: 15000 },
    );
    const denied = await page.locator('[data-testid="admin-access-denied"]').count();
    const shell = await page.locator('[data-testid="admin-shell"]').count();
    expect(denied + shell).toBe(1);
  });
 });
--- a/e2e/tests/bedside-react.spec.js
+++ b/e2e/tests/bedside-react.spec.js
@ -0,0 +1,85 @@
 // ============================================================
 // BEDSIDE (React port) — sub-nav shell smoke test.
 //
 // First-commit scope: the 15 sub-pills render in the expected order
 // and selecting a pill reveals a panel with a legacy-viewer link.
 // Actual clinical dosing panels (neonatal through trauma) port in
 // dedicated follow-up commits alongside the calculators.
 // ============================================================
 const { test, expect, E2E_BASE } = require('../fixtures');
 const EXPECTED_PILLS = [
  'neonatal', 'airway', 'cardiac', 'respiratory', 'ventilation',
  'seizure', 'sepsis', 'anaphylaxis', 'sedation', 'agitation',
  'antiemetics', 'antimicrobials', 'burns', 'toxicology', 'trauma',
 ];
 async function openReactBedside(page) {
  await page.goto(E2E_BASE + '/app/bedside');
  await page.waitForSelector('[data-testid="bedside-subnav"]', { timeout: 15000 });
 }
 test.describe('React Bedside — sub-nav shell', () => {
  test('all 15 sub-pills render in the expected order', async ({ authedPage: _, page }) => {
    await openReactBedside(page);
    for (const id of EXPECTED_PILLS) {
      await expect(page.locator('[data-testid="bedside-pill-' + id + '"]')).toBeVisible();
    }
  });
  test('clicking a pill switches the active panel', async ({ authedPage: _, page }) => {
    await openReactBedside(page);
    await expect(page.locator('[data-testid="bedside-panel-neonatal"]')).toBeVisible();
    await page.click('[data-testid="bedside-pill-airway"]');
    await expect(page.locator('[data-testid="bedside-panel-airway"]')).toBeVisible();
  });
  test('panel carries a legacy-viewer link', async ({ authedPage: _, page }) => {
    await openReactBedside(page);
    await expect(page.getByText('Open in legacy viewer').first()).toBeVisible();
  });
  test('age-to-weight estimator runs in React', async ({ authedPage: _, page }) => {
    await openReactBedside(page);
    await page.fill('[data-testid="bedside-age-input"]', '3y');
    await expect(page.locator('[data-testid="bedside-estimate-result"]')).toContainText('14 kg');
    await expect(page.locator('[data-testid="bedside-weight-input"]')).toHaveValue('14');
    await page.selectOption('[data-testid="bedside-formula-select"]', 'bestguess');
    await expect(page.locator('[data-testid="bedside-estimate-result"]')).toContainText('16 kg');
    await expect(page.locator('[data-testid="bedside-weight-input"]')).toHaveValue('16');
  });
  test('anaphylaxis panel computes IM epinephrine dose by weight', async ({ authedPage: _, page }) => {
    await openReactBedside(page);
    await page.click('[data-testid="bedside-pill-anaphylaxis"]');
    await page.fill('[data-testid="anaph-weight"]', '20');
    // 20 kg × 0.01 mg/kg = 0.2 mg epi IM (below the 0.5 mg cap).
    await expect(page.locator('[data-testid="bedside-panel-anaphylaxis"]')).toContainText('0.2 mg');
    // Uncapped — ensure 0.5 kicks in past the cap threshold (wt ≥ 50 kg).
    await page.fill('[data-testid="anaph-weight"]', '70');
    await expect(page.locator('[data-testid="bedside-panel-anaphylaxis"]')).toContainText('0.5 mg');
  });
  test('cardiac arrest PALS general table renders weight-scaled epinephrine', async ({ authedPage: _, page }) => {
    await openReactBedside(page);
    await page.click('[data-testid="bedside-pill-cardiac"]');
    await page.fill('[data-testid="cardiac-weight"]', '25');
    // Default view is general. Epi IV = 0.01 mg/kg × 25 = 0.25 mg.
    await expect(page.locator('[data-testid="bedside-panel-cardiac"]')).toContainText('0.25 mg');
    // Switching to Asystole keeps the same dose logic.
    await page.click('[data-testid="cardiac-view-asystole"]');
    await expect(page.locator('[data-testid="bedside-panel-cardiac"]')).toContainText('0.25 mg');
  });
  test('seizure pathway computes D10W bolus range by weight', async ({ authedPage: _, page }) => {
    await openReactBedside(page);
    await page.click('[data-testid="bedside-pill-seizure"]');
    await page.fill('[data-testid="seizure-weight"]', '10');
    // 10 kg × 2-5 mL/kg = 20-50 mL D10W
    await expect(page.locator('[data-testid="bedside-panel-seizure"]')).toContainText('20-50 mL');
    // Lorazepam 0.1 mg/kg × 10 = 1 mg
    await expect(page.locator('[data-testid="bedside-panel-seizure"]')).toContainText('1 mg');
  });
 });
--- a/e2e/tests/bedside-smoke.spec.js
+++ b/e2e/tests/bedside-smoke.spec.js
@ -1,161 +0,0 @@
 // Bedside module smoke tests.
 // The harness renders the Calculators + Bedside components side-by-side, so
 // each test selects the target sub-pill (if any) and asserts a known string
 // is rendered. Bedside was promoted to a top-level tab, so there is no longer
 // a calc-nav-pill[data-calc="bedside"] — the panel is always visible in the
 // harness and always the full tab in the live app.
 const { test, expect } = require('@playwright/test');
 async function openCalculators(page) {
  await page.goto('/e2e-harness.html');
  await page.waitForFunction(() => window.__harnessReady === true);
  // Wait for the bedside component to finish injecting — #bedside-age is the
  // first input in the shared age→weight estimator at the top of the tab.
  await page.waitForSelector('#bedside-age');
 }
 async function openBedside(page, subPill) {
  await openCalculators(page);
  if (subPill) {
    await page.click(`button.calc-pill[data-em="${subPill}"]`);
  }
 }
 test.describe('Bedside — top-level', () => {
  test('Calculators tab shows age-weight estimator', async ({ page }) => {
    await openCalculators(page);
    await expect(page.locator('#bedside-age')).toBeVisible();
    await expect(page.locator('#bedside-formula')).toBeVisible();
    await expect(page.locator('#bedside-weight')).toBeVisible();
  });
  test('Age → Weight: typing 3y auto-fills weight (APLS)', async ({ page }) => {
    await openCalculators(page);
    await page.fill('#bedside-age', '3y');
    await expect(page.locator('#bedside-weight')).toHaveValue('14');
    await expect(page.locator('#bedside-estimate-note')).toContainText('APLS');
  });
  test('Formula switch to Best Guess updates weight', async ({ page }) => {
    await openCalculators(page);
    await page.fill('#bedside-age', '3y');
    await page.selectOption('#bedside-formula', 'bestguess');
    await expect(page.locator('#bedside-weight')).toHaveValue('16');  // 2 * (3+5) = 16
    await expect(page.locator('#bedside-estimate-note')).toContainText('Best Guess');
  });
  test('Clear button resets the estimator', async ({ page }) => {
    await openCalculators(page);
    await page.fill('#bedside-age', '5y');
    await page.click('#btn-bedside-clear');
    await expect(page.locator('#bedside-age')).toHaveValue('');
    await expect(page.locator('#bedside-weight')).toHaveValue('');
  });
 });
 test.describe('Bedside — every sub-pill renders', () => {
  const subPills = [
    { key: 'neonatal',     expected: /Neonatal Assessment/i },
    { key: 'airway',       expected: /Airway Management/i },
    { key: 'cardiac',      expected: /Cardiac Arrest/i },
    { key: 'respiratory',  expected: /Respiratory Management/i },
    { key: 'ventilation',  expected: /Oxygen & Ventilation/i },
    { key: 'seizure',      expected: /Status Epilepticus/i },
    { key: 'sepsis',       expected: /Sepsis & Fever/i },
    { key: 'anaphylaxis',  expected: /Anaphylaxis/i },
    { key: 'sedation',     expected: /Procedural Sedation/i },
    { key: 'agitation',    expected: /Acute Agitation/i },
    { key: 'antiemetics',  expected: /Antiemetics/i },
    { key: 'antimicrobials', expected: /Empiric Antimicrobials/i },
    { key: 'burns',        expected: /Burn Management/i },
    { key: 'toxicology',   expected: /Toxicology/i },
    { key: 'trauma',       expected: /Trauma/i },
  ];
  for (const { key, expected } of subPills) {
    test(`${key} sub-pill shows header`, async ({ page }) => {
      await openBedside(page, key);
      await expect(page.locator(`#em-${key}`)).toContainText(expected);
    });
  }
 });
 test.describe('Bedside — dose calculators fire', () => {
  test('Status Epilepticus: Show Pathway renders timeline with weight', async ({ page }) => {
    await openBedside(page, 'seizure');
    await page.fill('#seizure-weight', '20');
    await page.click('#btn-seizure-calc');
    await expect(page.locator('#seizure-result')).toContainText(/20 kg/);
    await expect(page.locator('#seizure-result')).toContainText(/Lorazepam/);
    await expect(page.locator('#seizure-result')).toContainText(/0\.1 mg\/kg/);  // per-kg visible
  });
  test('Sepsis: Show Approach renders Phoenix criteria + first-hour bundle', async ({ page }) => {
    await openBedside(page, 'sepsis');
    await page.fill('#sepsis-weight', '25');
    await page.click('#btn-sepsis-show');
    await expect(page.locator('#sepsis-result')).toContainText(/Phoenix/);
    await expect(page.locator('#sepsis-result')).toContainText(/first-hour/i);
  });
  test('Anaphylaxis: Calculate Doses shows weight-based epinephrine', async ({ page }) => {
    await openBedside(page, 'anaphylaxis');
    await page.fill('#anaph-weight', '25');
    await page.click('#btn-anaph-calc');
    await expect(page.locator('#anaph-result')).toContainText(/Epinephrine/);
    await expect(page.locator('#anaph-result')).toContainText(/0\.25 mg/);  // 25*0.01
  });
  test('Burns: body-parts calculator + Parkland', async ({ page }) => {
    await openBedside(page, 'burns');
    await page.fill('#burn-weight', '20');
    await page.fill('input[data-burn-region="head"]', '50');      // 50% of 13 (young) = 6.5
    await page.fill('input[data-burn-region="ant_trunk"]', '100'); // 100% of 13 = 13
    await page.click('#btn-burn-calc');
    await expect(page.locator('#burn-result')).toContainText(/Parkland/);
    await expect(page.locator('#burn-result')).toContainText(/20 kg/);
  });
  test('Airway: Calculate renders RSI drugs with per-kg', async ({ page }) => {
    await openBedside(page, 'airway');
    await page.fill('#airway-weight', '20');
    await page.fill('#airway-age', '5');
    await page.click('#btn-airway-calc');
    await expect(page.locator('#airway-result')).toContainText(/Ketamine/);
    await expect(page.locator('#airway-result')).toContainText(/mg\/kg/);  // per-kg visible
    await expect(page.locator('#airway-result')).toContainText(/ETT/);
  });
 });
 test.describe('Bedside — interactive widgets', () => {
  test('Lightbox: seizure pathway image opens and closes', async ({ page }) => {
    await openBedside(page, 'seizure');
    await page.click('button[data-img-src="/img/epilepsy_eiic_pathway.png"]');
    await expect(page.locator('#img-lightbox')).toBeVisible();
    await expect(page.locator('#img-lightbox-img')).toHaveAttribute('src', /epilepsy_eiic_pathway/);
    await page.click('#img-lightbox-close');
    await expect(page.locator('#img-lightbox')).toBeHidden();
  });
  test('Lightbox: NRP pathway image opens on neonatal sub-pill', async ({ page }) => {
    await openBedside(page, 'neonatal');
    // The "View pathway image" button sits inside a collapsed <details>
    // titled "NRP Resuscitation Pathway" — expand it first.
    await page.getByText('NRP Resuscitation Pathway').click();
    await page.click('button[data-img-src="/img/nrp_pathway.png"]');
    await expect(page.locator('#img-lightbox')).toBeVisible();
    await expect(page.locator('#img-lightbox-img')).toHaveAttribute('src', /nrp_pathway/);
    await page.click('#img-lightbox-close');
    await expect(page.locator('#img-lightbox')).toBeHidden();
  });
  test('Ventilation: Show Reference renders pressure-time SVG', async ({ page }) => {
    await openBedside(page, 'ventilation');
    await page.fill('#vent-weight', '20');
    await page.click('#btn-vent-show');
    await expect(page.locator('#vent-result svg')).toBeVisible();
    await expect(page.locator('#vent-result')).toContainText(/Target SpO2/);
    await expect(page.locator('#vent-result')).toContainText(/PEEP/);
  });
 });
--- a/e2e/tests/calculators-react.spec.js
+++ b/e2e/tests/calculators-react.spec.js
@ -0,0 +1,109 @@
 // ============================================================
 // CALCULATORS (React port) — sub-nav shell smoke test.
 //
 // Pure shell test until test vectors + formula ports land in
 // dedicated follow-up commits.
 // ============================================================
 const { test, expect, E2E_BASE } = require('../fixtures');
 const EXPECTED_PILLS = [
  'bp', 'bmi', 'growth', 'bili', 'vitals',
  'bsa', 'dose', 'resus', 'gcs', 'equipment',
 ];
 async function openReactCalc(page) {
  await page.goto(E2E_BASE + '/app/calculators');
  await page.waitForSelector('[data-testid="calc-subnav"]', { timeout: 15000 });
 }
 test.describe('React Calculators — sub-nav shell', () => {
  test('all 10 pills render in expected order', async ({ authedPage: _, page }) => {
    await openReactCalc(page);
    for (const id of EXPECTED_PILLS) {
      await expect(page.locator('[data-testid="calc-pill-' + id + '"]')).toBeVisible();
    }
  });
  test('clicking a pill switches the active panel', async ({ authedPage: _, page }) => {
    await openReactCalc(page);
    await expect(page.locator('[data-testid="calc-panel-bp"]')).toBeVisible();
    await page.click('[data-testid="calc-pill-bili"]');
    await expect(page.locator('[data-testid="calc-panel-bili"]')).toBeVisible();
  });
  test('each panel carries a legacy-viewer link', async ({ authedPage: _, page }) => {
    await openReactCalc(page);
    await expect(page.getByText('Open in legacy viewer').first()).toBeVisible();
  });
  test('BSA calculator runs in React', async ({ authedPage: _, page }) => {
    await openReactCalc(page);
    await page.click('[data-testid="calc-pill-bsa"]');
    await page.fill('#react-bsa-weight', '20');
    await page.fill('#react-bsa-height', '110');
    await page.click('[data-testid="calc-bsa-calculate"]');
    await expect(page.locator('[data-testid="calc-bsa-result"]')).toContainText('0.782');
  });
  test('weight-based dose calculator caps max dose', async ({ authedPage: _, page }) => {
    await openReactCalc(page);
    await page.click('[data-testid="calc-pill-dose"]');
    await page.fill('#react-dose-weight', '15');
    await page.fill('#react-dose-per-kg', '100');
    await page.fill('#react-dose-max', '500');
    await page.click('[data-testid="calc-dose-calculate"]');
    await expect(page.locator('[data-testid="calc-dose-result"]')).toContainText('500.0 mg');
    await expect(page.locator('[data-testid="calc-dose-result"]')).toContainText('Capped');
  });
  test('GCS calculator updates score from selected components', async ({ authedPage: _, page }) => {
    await openReactCalc(page);
    await page.click('[data-testid="calc-pill-gcs"]');
    await expect(page.locator('[data-testid="calc-gcs-result"]')).toContainText('GCS: 15/15');
    await page.selectOption('#react-gcs-motor', '1');
    await expect(page.locator('[data-testid="calc-gcs-result"]')).toContainText('GCS: 10/15');
  });
  test('AAP 2022 bilirubin classifies above exchange correctly', async ({ authedPage: _, page }) => {
    await openReactCalc(page);
    await page.click('[data-testid="calc-pill-bili"]');
    // 38w low-risk at 72h: phototherapy threshold = 18.8, exchange = 25.9.
    // TSB 20 should be "Above Phototherapy"; 26 should be "Above Exchange".
    await page.selectOption('#bili-ga', '38');
    await page.selectOption('#bili-risk', 'low');
    await page.fill('#bili-hours', '72');
    await page.fill('#bili-tsb', '20');
    await page.click('[data-testid="calc-bili-calculate"]');
    await expect(page.locator('[data-testid="calc-bili-aap-result"]')).toContainText('Above Phototherapy');
    await expect(page.locator('[data-testid="calc-bili-aap-result"]')).toContainText('18.8');
    await page.fill('#bili-tsb', '26');
    await page.click('[data-testid="calc-bili-calculate"]');
    await expect(page.locator('[data-testid="calc-bili-aap-result"]')).toContainText('Above Exchange');
  });
  test('Bhutani nomogram classifies high-risk zone', async ({ authedPage: _, page }) => {
    await openReactCalc(page);
    await page.click('[data-testid="calc-pill-bili"]');
    await page.click('[data-testid="bili-mode-bhutani"]');
    // At 36h, p95 = 12.8 — TSB 13 should land in High-Risk.
    await page.fill('#bili-hours', '36');
    await page.fill('#bili-tsb', '13');
    await page.click('[data-testid="calc-bili-calculate"]');
    await expect(page.locator('[data-testid="calc-bili-bhutani-result"]')).toContainText('High-Risk Zone');
  });
  test('Fenton growth classifies 32w male 1795g as AGA (50th percentile)', async ({ authedPage: _, page }) => {
    await openReactCalc(page);
    await page.click('[data-testid="calc-pill-growth"]');
    // 32w male median is 1795g — should land right at 50th percentile.
    await page.selectOption('#fenton-sex', 'male');
    await page.fill('#fenton-ga', '32');
    await page.fill('#fenton-weight', '1795');
    await page.click('[data-testid="calc-fenton-calculate"]');
    await expect(page.locator('[data-testid="calc-fenton-result"]')).toContainText('AGA');
    await expect(page.locator('[data-testid="calc-fenton-result"]')).toContainText('50.0%');
  });
 });
--- a/e2e/tests/learning-react.spec.js
+++ b/e2e/tests/learning-react.spec.js
@ -0,0 +1,40 @@
 // ============================================================
 // LEARNING HUB (React port) — smoke tests for /app/learning.
 //
 // Covers minimum-viable port: search input + category pills +
 // feed list render; clicking an item opens the viewer (if any
 // content is seeded) and renders the Back button.
 // ============================================================
 const { test, expect, E2E_BASE } = require('../fixtures');
 async function openReactLearning(page) {
  await page.goto(E2E_BASE + '/app/learning');
  await page.waitForSelector('[data-testid="lh-search"]', { timeout: 15000 });
 }
 test.describe('React Learning Hub — shell + feed', () => {
  test('search + categories render', async ({ authedPage: _, page }) => {
    await openReactLearning(page);
    await expect(page.locator('[data-testid="lh-search"]')).toBeVisible();
    await expect(page.locator('[data-testid="lh-categories"]')).toBeVisible();
  });
  test('feed either lists items or shows an empty-state (no crash)', async ({ authedPage: _, page }) => {
    await openReactLearning(page);
    // Either the feed grid exists with items, or the empty-state label shows.
    const feedItems = await page.locator('[data-testid^="lh-feed-item-"]').count();
    const empty = await page.getByText('No content found.').count();
    expect(feedItems + empty).toBeGreaterThan(0);
  });
  test('typing in search triggers a new request', async ({ authedPage: _, page }) => {
    await openReactLearning(page);
    const [resp] = await Promise.all([
      page.waitForResponse('**/api/learning/search**', { timeout: 10000 }),
      page.fill('[data-testid="lh-search"]', 'fever'),
    ]);
    expect(resp.status()).toBe(200);
  });
 });
--- a/e2e/tests/peguide-react.spec.js
+++ b/e2e/tests/peguide-react.spec.js
@ -0,0 +1,84 @@
 // ============================================================
 // PE GUIDE (React port) — smoke tests for the full checklist.
 // Covers age-group + system pills, overview, scales, sound
 // libraries, component checklist with status toggles, and the
 // Generate Exam Report path (mocked via page.route).
 // ============================================================
 const { test, expect, E2E_BASE } = require('../fixtures');
 async function openPeGuide(page) {
  await page.goto(E2E_BASE + '/app/peguide');
  await page.waitForSelector('[data-testid="pe-age-group-pills"]', { timeout: 15000 });
 }
 test.describe('React PE Guide — age-group × system navigation', () => {
  test('all 6 age-group pills render', async ({ authedPage: _, page }) => {
    await openPeGuide(page);
    for (const age of ['newborn', 'infant', 'toddler', 'preschool', 'school', 'adolescent']) {
      await expect(page.locator('[data-testid="pe-age-' + age + '"]')).toBeVisible();
    }
  });
  test('all 4 system pills render', async ({ authedPage: _, page }) => {
    await openPeGuide(page);
    for (const sys of ['msk', 'neuro', 'resp', 'cv']) {
      await expect(page.locator('[data-testid="pe-system-' + sys + '"]')).toBeVisible();
    }
  });
  test('switching age group rewrites the overview banner', async ({ authedPage: _, page }) => {
    await openPeGuide(page);
    await page.click('[data-testid="pe-age-newborn"]');
    await expect(page.locator('[data-testid="pe-overview"]')).toContainText('Newborn');
    await page.click('[data-testid="pe-age-adolescent"]');
    await expect(page.locator('[data-testid="pe-overview"]')).toContainText('Adolescent');
  });
  test('CV system shows APTM + cardiac sounds + innocent murmurs', async ({ authedPage: _, page }) => {
    await openPeGuide(page);
    await page.click('[data-testid="pe-system-cv"]');
    await expect(page.locator('[data-testid="pe-cv-aptm"]')).toBeVisible();
    await expect(page.locator('[data-testid="sound-normal"]').first()).toBeVisible();
  });
  test('Resp system shows respiratory sound library', async ({ authedPage: _, page }) => {
    await openPeGuide(page);
    await page.click('[data-testid="pe-system-resp"]');
    await expect(page.locator('[data-testid="pe-resp-sounds"]')).toBeVisible();
  });
 });
 test.describe('React PE Guide — checklist + generation', () => {
  test('mark-all-normal sets summary counts and enables Generate', async ({ authedPage: _, page }) => {
    await openPeGuide(page);
    await page.click('[data-testid="pe-age-toddler"]');
    await page.click('[data-testid="pe-system-msk"]');
    await page.click('[data-testid="btn-pe-all-normal"]');
    await expect(page.locator('[data-testid="pe-checklist"]')).toContainText('0 not assessed');
    await expect(page.locator('[data-testid="btn-pe-generate"]')).toBeEnabled();
  });
  test('Generate Exam Report calls /api/generate-pe-narrative', async ({ authedPage: _, page }) => {
    await page.route('**/api/generate-pe-narrative', (route) =>
      route.fulfill({
        status: 200,
        contentType: 'application/json',
        body: JSON.stringify({
          success: true,
          model: 'mock-model',
          narrative: 'MOCK PE narrative from the React port.',
          summary: { normal: 5, abnormal: 0, notAssessed: 0 },
        }),
      }),
    );
    await openPeGuide(page);
    await page.click('[data-testid="pe-age-toddler"]');
    await page.click('[data-testid="pe-system-msk"]');
    await page.click('[data-testid="btn-pe-all-normal"]');
    await page.click('[data-testid="btn-pe-generate"]');
    await expect(page.locator('[data-testid="pe-narrative"]')).toContainText('MOCK PE narrative');
  });
 });
--- a/e2e/tests/settings-react-integrations.spec.js
+++ b/e2e/tests/settings-react-integrations.spec.js
@ -0,0 +1,58 @@
 // ============================================================
 // SETTINGS (React port) — Integrations sub-section smoke tests.
 //
 // Commit 2 of the Settings port. Covers:
 //   • Nextcloud connect form (URL / user / app-password / Connect btn)
 //   • Documents upload area (file input / description / Upload btn)
 //   • Disconnect and Delete flows use the styled ConfirmModal, not
 //     window.confirm() — the no-native-dialog guard is repeated here
 //     so any future regression is caught in this file too.
 // ============================================================
 const { test, expect, E2E_BASE } = require('../fixtures');
 async function openReactSettings(page) {
  await page.goto(E2E_BASE + '/app/settings');
  await page.waitForSelector('[data-testid="nextcloud-section"], [data-testid="documents-section"]', {
    timeout: 15000,
  });
 }
 test.describe('React Settings — Integrations render', () => {
  test('Nextcloud section: URL / user / app-password fields + Connect button', async ({ authedPage: _, page }) => {
    await openReactSettings(page);
    await expect(page.locator('[data-testid="nc-url"]')).toBeVisible();
    await expect(page.locator('[data-testid="nc-user"]')).toBeVisible();
    await expect(page.locator('[data-testid="nc-pass"]')).toBeVisible();
    await expect(page.locator('[data-testid="btn-nc-connect"]')).toBeVisible();
    await expect(page.locator('[data-testid="nc-status"]')).toBeVisible();
  });
  test('Nextcloud connect validation — missing fields shows inline error', async ({ authedPage: _, page }) => {
    await openReactSettings(page);
    // Don't fill any fields — just submit.
    await page.click('[data-testid="btn-nc-connect"]');
    await expect(page.getByText('Fill all Nextcloud fields')).toBeVisible();
  });
  test('Documents section: either upload area or S3-not-configured notice renders', async ({ authedPage: _, page }) => {
    await openReactSettings(page);
    await expect(page.locator('[data-testid="documents-section"]')).toBeVisible();
    // Depending on whether S3 is configured, we see either the upload area or the not-configured message.
    const uploadArea = await page.locator('[data-testid="doc-upload-area"]').count();
    const notice = await page.getByText('S3 storage not configured').count();
    expect(uploadArea + notice).toBeGreaterThan(0);
  });
  test('no native dialog fires on Nextcloud / Documents interactions', async ({ authedPage: _, page }) => {
    let nativeDialogFired = false;
    page.on('dialog', async (d) => { nativeDialogFired = true; await d.dismiss(); });
    await openReactSettings(page);
    // Exercise the inline validation path; this path never calls alert().
    await page.click('[data-testid="btn-nc-connect"]');
    await expect(page.getByText('Fill all Nextcloud fields')).toBeVisible();
    expect(nativeDialogFired).toBe(false);
  });
 });
--- a/e2e/tests/settings-react-security.spec.js
+++ b/e2e/tests/settings-react-security.spec.js
@ -0,0 +1,70 @@
 // ============================================================
 // SETTINGS (React port) — Security sub-sections smoke tests.
 //
 // Mirrors the coverage of settings-faq-dictation.spec.js for the
 // Change Password / 2FA / Active Sessions sections, but against the
 // React tree at /app/settings (ported in commit 1 of the Settings
 // migration). The vanilla tree at / continues to be covered by
 // settings-faq-dictation.spec.js.
 // ============================================================
 const { test, expect, E2E_BASE } = require('../fixtures');
 async function openReactSettings(page) {
  await page.goto(E2E_BASE + '/app/settings');
  // Page loads /api/auth/me first — wait for the form to hydrate.
  await page.waitForSelector('[data-testid="change-password-section"], [data-testid="2fa-section"], [data-testid="sessions-section"]', {
    timeout: 15000,
  });
 }
 test.describe('React Settings — Security sections render for local-auth user', () => {
  test('change-password form has all three fields + submit button', async ({ authedPage: _, page }) => {
    await openReactSettings(page);
    await expect(page.locator('[data-testid="pw-current"]')).toBeVisible();
    await expect(page.locator('[data-testid="pw-new"]')).toBeVisible();
    await expect(page.locator('[data-testid="pw-confirm"]')).toBeVisible();
    await expect(page.locator('[data-testid="btn-change-password"]')).toBeVisible();
  });
  test('2FA section shows status + at least one setup/disable button', async ({ authedPage: _, page }) => {
    await openReactSettings(page);
    await expect(page.locator('[data-testid="2fa-status"]')).toBeVisible();
    const setupCount = await page.locator('[data-testid="btn-setup-2fa"]').count();
    const disableCount = await page.locator('[data-testid="btn-disable-2fa"]').count();
    expect(setupCount + disableCount).toBeGreaterThan(0);
  });
  test('active sessions section lists the current session + revoke-all button', async ({ authedPage: _, page }) => {
    await openReactSettings(page);
    await expect(page.locator('[data-testid="sessions-section"]')).toBeVisible();
    await expect(page.locator('[data-testid="btn-revoke-all-sessions"]')).toBeVisible();
    // At least one session row should render (the current one).
    const rowCount = await page.locator('[data-testid^="session-row-"]').count();
    expect(rowCount).toBeGreaterThan(0);
  });
  test('change-password validation — mismatched confirm shows inline error', async ({ authedPage: _, page }) => {
    await openReactSettings(page);
    await page.fill('[data-testid="pw-current"]', 'whatever');
    await page.fill('[data-testid="pw-new"]', 'newpassword123');
    await page.fill('[data-testid="pw-confirm"]', 'different456');
    await page.click('[data-testid="btn-change-password"]');
    await expect(page.getByText('Passwords do not match')).toBeVisible();
  });
  test('revoke-all sessions triggers a styled confirm modal (not a native dialog)', async ({ authedPage: _, page }) => {
    // If the code ever regresses to window.confirm(), Playwright's dialog event
    // would fire and this test would hang / fail with a dialog warning.
    let nativeDialogFired = false;
    page.on('dialog', async (d) => { nativeDialogFired = true; await d.dismiss(); });
    await openReactSettings(page);
    await page.click('[data-testid="btn-revoke-all-sessions"]');
    // Styled modal must be visible with the cancel button from ConfirmModal.
    await expect(page.locator('[data-testid="confirm-modal-cancel"]')).toBeVisible();
    await page.click('[data-testid="confirm-modal-cancel"]');
    expect(nativeDialogFired).toBe(false);
  });
 });
--- a/e2e/tests/settings-react-voice-content.spec.js
+++ b/e2e/tests/settings-react-voice-content.spec.js
@ -0,0 +1,85 @@
 // ============================================================
 // SETTINGS (React port) — Voice + Content sub-sections.
 //
 // Commit 3 of the Settings port. Covers the eight remaining
 // sub-sections so the React Settings page matches settings.html
 // feature-for-feature:
 //   • Voice Preferences (STT / TTS selectors + Save + Preview)
 //   • Browser Whisper (WASM stub — localStorage-only)
 //   • Web Speech Recognition (localStorage-only + privacy modal)
 //   • My Templates (Memories CRUD)
 //   • AI Corrections (read-only list)
 //   • Audio Backups (list + delete)
 //   • Saved Encounters (list + delete)
 //   • Compliance (static info card)
 // ============================================================
 const { test, expect, E2E_BASE } = require('../fixtures');
 async function openReactSettings(page) {
  await page.goto(E2E_BASE + '/app/settings');
  await page.waitForSelector(
    '[data-testid="voice-preferences-section"], [data-testid="templates-section"], [data-testid="compliance-section"]',
    { timeout: 15000 }
  );
 }
 test.describe('React Settings — Voice + Content sections render', () => {
  test('Voice Preferences: STT / TTS selectors + Save + Preview', async ({ authedPage: _, page }) => {
    await openReactSettings(page);
    await expect(page.locator('[data-testid="stt-model-select"]')).toBeVisible();
    await expect(page.locator('[data-testid="tts-voice-select"]')).toBeVisible();
    await expect(page.locator('[data-testid="btn-save-voice-prefs"]')).toBeVisible();
    await expect(page.locator('[data-testid="btn-preview-voice"]')).toBeVisible();
  });
  test('Browser Whisper card: enable toggle + model select', async ({ authedPage: _, page }) => {
    await openReactSettings(page);
    await expect(page.locator('[data-testid="browser-whisper-enabled"]')).toBeVisible();
    await expect(page.locator('[data-testid="browser-whisper-model"]')).toBeVisible();
    await expect(page.locator('[data-testid="browser-whisper-status"]')).toBeVisible();
  });
  test('Web Speech: checkbox shows privacy confirm modal before enabling', async ({ authedPage: _, page }) => {
    let nativeDialogFired = false;
    page.on('dialog', async (d) => { nativeDialogFired = true; await d.dismiss(); });
    await openReactSettings(page);
    const checkbox = page.locator('[data-testid="web-speech-enabled"]');
    await expect(checkbox).toBeVisible();
    const isDisabled = await checkbox.isDisabled();
    if (!isDisabled) {
      await checkbox.check();
      await expect(page.locator('[data-testid="confirm-modal-cancel"]')).toBeVisible();
      await page.click('[data-testid="confirm-modal-cancel"]');
    }
    expect(nativeDialogFired).toBe(false);
  });
  test('Templates: inputs + save button present', async ({ authedPage: _, page }) => {
    await openReactSettings(page);
    await expect(page.locator('[data-testid="mem-category"]')).toBeVisible();
    await expect(page.locator('[data-testid="mem-name"]')).toBeVisible();
    await expect(page.locator('[data-testid="mem-content"]')).toBeVisible();
    await expect(page.locator('[data-testid="btn-mem-save"]')).toBeVisible();
  });
  test('Templates: saving without name shows inline error', async ({ authedPage: _, page }) => {
    await openReactSettings(page);
    await page.click('[data-testid="btn-mem-save"]');
    await expect(page.getByText('Enter a template name')).toBeVisible();
  });
  test('Corrections card renders (list may be empty)', async ({ authedPage: _, page }) => {
    await openReactSettings(page);
    await expect(page.locator('[data-testid="corrections-section"]')).toBeVisible();
  });
  test('Audio Backups + Saved Encounters + Compliance render', async ({ authedPage: _, page }) => {
    await openReactSettings(page);
    await expect(page.locator('[data-testid="audio-backups-section"]')).toBeVisible();
    await expect(page.locator('[data-testid="saved-encounters-section"]')).toBeVisible();
    await expect(page.locator('[data-testid="compliance-section"]')).toBeVisible();
  });
 });
--- a/e2e/tests/top-calculators.spec.js
+++ b/e2e/tests/top-calculators.spec.js
@ -1,220 +0,0 @@
 // Smoke tests for the 10 top-row calculator tabs (everything except Bedside).
 // Each test navigates to its tab, fills inputs, clicks Calculate/Assess,
 // and asserts a known string appears in the result. Catches the "tab loads
 // but button does nothing" class of regression.
 const { test, expect } = require('@playwright/test');
 async function openCalculators(page) {
  await page.goto('/e2e-harness.html');
  await page.waitForFunction(() => window.__harnessReady === true);
  await page.waitForSelector('button.calc-nav-pill[data-calc="bp"]');
 }
 async function selectTab(page, tabName) {
  await page.click(`button.calc-nav-pill[data-calc="${tabName}"]`);
  await expect(page.locator(`#calc-${tabName}`)).toBeVisible();
 }
 test.describe('Top-level calculators — panel loads', () => {
  const tabs = ['bp', 'bmi', 'growth', 'bili', 'vitals', 'bsa', 'dose', 'resus', 'gcs', 'equipment'];
  for (const tab of tabs) {
    test(`${tab} panel becomes visible when pill clicked`, async ({ page }) => {
      await openCalculators(page);
      await selectTab(page, tab);
    });
  }
 });
 test.describe('Blood Pressure percentile', () => {
  test('5 yr, male, height 110, BP 105/65 → produces a result', async ({ page }) => {
    await openCalculators(page);
    await selectTab(page, 'bp');
    await page.fill('#bp-age', '5');
    await page.selectOption('#bp-sex', 'male');
    await page.fill('#bp-height', '110');
    await page.fill('#bp-systolic', '105');
    await page.fill('#bp-diastolic', '65');
    await page.click('#btn-calc-bp');
    await expect(page.locator('#bp-result')).not.toHaveClass(/hidden/);
    // Result should mention a percentile or classification
    await expect(page.locator('#bp-result')).toContainText(/percentile|Normal|Elevated|HTN|Stage/i);
  });
  test('Clear button hides result', async ({ page }) => {
    await openCalculators(page);
    await selectTab(page, 'bp');
    await page.fill('#bp-age', '5');
    await page.selectOption('#bp-sex', 'male');
    await page.fill('#bp-height', '110');
    await page.fill('#bp-systolic', '105');
    await page.fill('#bp-diastolic', '65');
    await page.click('#btn-calc-bp');
    await page.click('#btn-clear-bp');
    await expect(page.locator('#bp-result')).toHaveClass(/hidden/);
    await expect(page.locator('#bp-age')).toHaveValue('');
  });
 });
 test.describe('BMI percentile', () => {
  test('7 yr, male, 25 kg, 120 cm → BMI computed', async ({ page }) => {
    await openCalculators(page);
    await selectTab(page, 'bmi');
    await page.fill('#bmi-age-yr', '7');
    await page.selectOption('#bmi-age-mo', '0');
    await page.selectOption('#bmi-sex', 'male');
    await page.fill('#bmi-weight', '25');
    await page.fill('#bmi-height', '120');
    await page.click('#btn-calc-bmi');
    await expect(page.locator('#bmi-result')).not.toHaveClass(/hidden/);
    // BMI = 25 / 1.20² = 17.36 — expect something recognizable
    await expect(page.locator('#bmi-result')).toContainText(/17\.|BMI|percentile/i);
  });
 });
 test.describe('Body Surface Area (Mosteller)', () => {
  test('20 kg, 110 cm → BSA shown', async ({ page }) => {
    await openCalculators(page);
    await selectTab(page, 'bsa');
    await page.fill('#bsa-weight', '20');
    await page.fill('#bsa-height', '110');
    await page.click('#btn-calc-bsa');
    await expect(page.locator('#bsa-result')).not.toHaveClass(/hidden/);
    // sqrt(110*20/3600) = 0.782
    await expect(page.locator('#bsa-result')).toContainText(/0\.78|BSA|m²|m2/i);
  });
 });
 test.describe('Weight-based dosing', () => {
  test('15 kg × 10 mg/kg → 150 mg shown', async ({ page }) => {
    await openCalculators(page);
    await selectTab(page, 'dose');
    await page.fill('#dose-weight', '15');
    await page.fill('#dose-per-kg', '10');
    await page.click('#btn-calc-dose');
    await expect(page.locator('#dose-result')).not.toHaveClass(/hidden/);
    await expect(page.locator('#dose-result')).toContainText(/150/);
  });
  test('Max cap respected: 15 kg × 100 mg/kg capped at 500 mg', async ({ page }) => {
    await openCalculators(page);
    await selectTab(page, 'dose');
    await page.fill('#dose-weight', '15');
    await page.fill('#dose-per-kg', '100');
    await page.fill('#dose-max', '500');
    await page.click('#btn-calc-dose');
    await expect(page.locator('#dose-result')).toContainText(/500/);
  });
 });
 test.describe('Growth charts', () => {
  test('3 yr male, 14 kg → Weight-for-Age result', async ({ page }) => {
    await openCalculators(page);
    await selectTab(page, 'growth');
    await page.selectOption('#growth-sex', 'male');
    await page.fill('#growth-age-yr', '3');
    await page.fill('#growth-weight', '14');
    await page.click('#btn-calc-growth');
    await expect(page.locator('#growth-result')).not.toHaveClass(/hidden/);
    await expect(page.locator('#growth-result')).toContainText(/percentile|z-score|%ile|z=/i);
  });
  test('Sub-pill switches to Length-for-Age', async ({ page }) => {
    await openCalculators(page);
    await selectTab(page, 'growth');
    await page.click('button.calc-pill[data-growth="lfa"]');
    await expect(page.locator('button.calc-pill[data-growth="lfa"]')).toHaveClass(/active/);
  });
 });
 test.describe('Bilirubin (AAP 2022)', () => {
  test('GA 38, age 48h, TSB 12.5, no risk factors → AAP assessment', async ({ page }) => {
    await openCalculators(page);
    await selectTab(page, 'bili');
    await page.selectOption('#bili-ga', '38');
    await page.fill('#bili-age-hours', '48');
    await page.fill('#bili-tsb', '12.5');
    await page.selectOption('#bili-risk', 'none');
    await page.click('#btn-calc-bili-aap');
    await expect(page.locator('#bili-result')).not.toHaveClass(/hidden/);
    await expect(page.locator('#bili-result')).toContainText(/phototherapy|threshold|AAP|bilirubin/i);
  });
  test('Bhutani sub-pill: age 48h, TSB 8.5 → risk zone', async ({ page }) => {
    await openCalculators(page);
    await selectTab(page, 'bili');
    await page.click('button.calc-pill[data-bili="bhutani"]');
    await page.fill('#bhutani-age', '48');
    await page.fill('#bhutani-tsb', '8.5');
    await page.click('#btn-calc-bhutani');
    await expect(page.locator('#bili-result')).not.toHaveClass(/hidden/);
    await expect(page.locator('#bili-result')).toContainText(/risk|zone|low|high|intermediate/i);
  });
 });
 test.describe('Vital signs reference', () => {
  test('Selecting 1-3 yr shows HR range', async ({ page }) => {
    await openCalculators(page);
    await selectTab(page, 'vitals');
    await page.selectOption('#vitals-age-select', '1-3yr');
    await expect(page.locator('#vitals-result')).not.toHaveClass(/hidden/);
    // Expected: HR 70-110
    await expect(page.locator('#vitals-result')).toContainText(/70|HR/i);
  });
 });
 test.describe('Resus meds', () => {
  test('15 kg → multiple weight-based drug doses rendered', async ({ page }) => {
    await openCalculators(page);
    await selectTab(page, 'resus');
    await page.fill('#resus-weight', '15');
    await page.click('#btn-calc-resus');
    await expect(page.locator('#resus-result')).not.toHaveClass(/hidden/);
    // At least epinephrine + atropine should appear for any resus dose table
    await expect(page.locator('#resus-result')).toContainText(/epinephrine|epi/i);
    await expect(page.locator('#resus-result')).toContainText(/atropine/i);
  });
 });
 test.describe('Glasgow Coma Scale', () => {
  test('Child defaults (4/5/6) → GCS 15 shown', async ({ page }) => {
    await openCalculators(page);
    await selectTab(page, 'gcs');
    // selects default to max scores → 4+5+6 = 15
    await expect(page.locator('#gcs-result')).toContainText(/15/);
  });
  test('Changing motor to "None" (1) → GCS drops', async ({ page }) => {
    await openCalculators(page);
    await selectTab(page, 'gcs');
    await page.selectOption('#gcs-child-motor', '1');
    await expect(page.locator('#gcs-result')).toContainText(/10/); // 4+5+1
  });
  test('Switch to infant panel', async ({ page }) => {
    await openCalculators(page);
    await selectTab(page, 'gcs');
    await page.click('button.calc-pill[data-gcs="infant"]');
    await expect(page.locator('#gcs-infant-panel')).toBeVisible();
    await expect(page.locator('#gcs-child-panel')).toBeHidden();
  });
 });
 test.describe('Equipment sizing', () => {
  test('Selecting "1 year" renders sizes', async ({ page }) => {
    await openCalculators(page);
    await selectTab(page, 'equipment');
    await page.selectOption('#equip-age-select', '1yr');
    await expect(page.locator('#equip-result')).not.toHaveClass(/hidden/);
    // Should mention ETT and at least one other item
    await expect(page.locator('#equip-result')).toContainText(/ETT|Endotracheal/i);
  });
  test('Selecting empty option hides result', async ({ page }) => {
    await openCalculators(page);
    await selectTab(page, 'equipment');
    await page.selectOption('#equip-age-select', '1yr');
    await page.selectOption('#equip-age-select', '');
    await expect(page.locator('#equip-result')).toHaveClass(/hidden/);
  });
 });
--- a/knip.json
+++ b/knip.json
@ -0,0 +1,40 @@
 {
  "$schema": "https://unpkg.com/knip@6/schema.json",
  "entry": [
    "server.ts",
    "scripts/*.js",
    "src/db/migrate.ts"
  ],
  "project": [
    "server.ts",
    "src/**/*.ts",
    "shared/**/*.ts"
  ],
  "ignore": [
    "dist/**",
    "node_modules/**",
    "public/**",
    "client/**",
    "e2e/**"
  ],
  "exclude": [
    "exports",
    "types",
    "duplicates"
  ],
  "ignoreFiles": [
    "src/utils/config.ts"
  ],
  "ignoreBinaries": [
    "cap"
  ],
  "ignoreDependencies": [
    "@marp-team/marp-cli",
    "@tiptap/.*",
    "@tsconfig/node20",
    "@types/.*",
    "ts-node-dev",
    "@aws-sdk/.*",
    "@google-cloud/.*"
  ]
 }
--- a/mobile/android/app/build.gradle
+++ b/mobile/android/app/build.gradle
@ -9,8 +9,8 @@ android {
        targetSdkVersion rootProject.ext.targetSdkVersion
        // Version values below are overwritten by scripts/release.sh from
        // the root package.json. versionCode auto-increments per release.
-        versionCode 620000
+        versionCode 647001
-        versionName "6.20.0"
+        versionName "6.47.1"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        aaptOptions {
             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
--- a/mobile/package.json
+++ b/mobile/package.json
@ -1,6 +1,6 @@
 {
  "name": "pedscribe-mobile",
-  "version": "6.20.0",
+  "version": "6.47.1",
  "description": "PedScribe native mobile app — Capacitor wrapper for Pediatric AI Scribe",
  "private": true,
  "scripts": {
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,12 +1,25 @@
 {
  "name": "pediatric-ai-scribe",
-  "version": "6.20.0",
+  "version": "6.47.1",
  "description": "AI-powered pediatric clinical documentation platform",
-  "main": "server.js",
+  "main": "dist/server.js",
  "engines": {
    "node": ">=20"
  },
  "scripts": {
-    "start": "node server.js",
+    "start": "node dist/server.js",
-    "test": "node --test test/",
+    "prebuild": "rm -rf dist",
    "build": "tsc",
    "typecheck": "tsc --noEmit",
    "verify": "npm run typecheck && npm test && npm run test:node && npm run lint:refs && npm run lint:dead && npm --prefix client run build",
    "verify:full": "npm run verify && npm run e2e",
    "dev": "ts-node-dev --respawn --transpile-only server.ts",
    "test": "vitest run",
    "test:node": "node --test test/",
    "test:coverage": "vitest run --coverage",
    "e2e": "./scripts/e2e.sh",
    "lint:refs": "node scripts/lint-references.js",
    "lint:dead": "knip --no-config-hints",
    "maint:check": "node scripts/maintenance.js check",
    "maint:reindex": "node scripts/maintenance.js reindex",
    "migrate": "node-pg-migrate",
@ -25,15 +38,17 @@
    "@tiptap/extension-text-style": "^3.20.4",
    "@tiptap/extension-underline": "^3.20.4",
    "@tiptap/starter-kit": "^3.20.4",
    "axios": "^1.7.7",
    "argon2": "^0.41.1",
    "axios": "^1.7.7",
    "bcryptjs": "^2.4.3",
    "cookie-parser": "^1.4.7",
    "cors": "^2.8.5",
    "dotenv": "^16.4.5",
    "express": "^4.21.0",
    "express-rate-limit": "^7.4.0",
    "google-auth-library": "^9.15.1",
    "helmet": "^8.0.0",
    "jszip": "^3.10.1",
    "jsonwebtoken": "^9.0.2",
    "mammoth": "^1.8.0",
    "multer": "^1.4.5-lts.1",
@ -54,5 +69,22 @@
    "@aws-sdk/client-transcribe-streaming": "^3.1017.0",
    "@aws-sdk/s3-request-presigner": "^3.700.0",
    "@google-cloud/vertexai": "^1.9.0"
  },
  "devDependencies": {
    "@tsconfig/node20": "^20.1.9",
    "@types/bcrypt": "^6.0.0",
    "@types/cookie-parser": "^1.4.10",
    "@types/cors": "^2.8.19",
    "@types/express": "^4.17.25",
    "@types/jsonwebtoken": "^9.0.10",
    "@types/ms": "^2.1.0",
    "@types/multer": "^2.1.0",
    "@types/node": "^25.6.0",
    "@vitest/coverage-v8": "^4.1.5",
    "knip": "^6.6.2",
    "ts-node-dev": "^2.0.0",
    "typescript": "^6.0.3",
    "vitest": "^4.1.5",
    "zod": "^4.3.6"
  }
 }
--- a/public/app/assets/Admin-C0fswhTW.js
+++ b/public/app/assets/Admin-C0fswhTW.js
--- a/public/app/assets/Auth-BtfAUU3w.js
+++ b/public/app/assets/Auth-BtfAUU3w.js
--- a/public/app/assets/Bedside-BsBuEI_m.js
+++ b/public/app/assets/Bedside-BsBuEI_m.js
--- a/public/app/assets/Calculators-hFcuewWL.js
+++ b/public/app/assets/Calculators-hFcuewWL.js
--- a/public/app/assets/Catchup--869idMv.js
+++ b/public/app/assets/Catchup--869idMv.js
@ -0,0 +1 @@
 import{t as e}from"./jsx-runtime-ByY1xr43.js";import{i as t,l as n}from"./index-BuU36CvS.js";var r=e();function i(){let{data:e,isLoading:i,error:a}=n({queryKey:[`schedule-data`],queryFn:()=>t.get(`/api/schedule-data`)});return i?(0,r.jsx)(`div`,{className:`p-6 text-sm text-muted-foreground`,children:`Loading…`}):a?(0,r.jsx)(`div`,{className:`p-6 text-sm text-destructive`,children:a.message}):e?(0,r.jsxs)(`div`,{className:`max-w-4xl mx-auto p-6 space-y-4`,children:[(0,r.jsxs)(`header`,{children:[(0,r.jsx)(`h1`,{className:`text-2xl font-semibold`,children:`Catch-Up Schedule`}),(0,r.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`CDC 2025 catch-up immunization schedule — minimum ages and intervals per vaccine.`})]}),Object.entries(e.catchUpSchedule).map(([t,n])=>{let i=e.vaccineFullNames[t]||t,a=n.catchUpNotes?Array.isArray(n.catchUpNotes)?n.catchUpNotes:[n.catchUpNotes]:[];return(0,r.jsxs)(`section`,{className:`rounded-lg border border-border bg-card overflow-hidden`,children:[(0,r.jsxs)(`header`,{className:`px-4 py-2 border-b border-border bg-muted/40 flex items-center justify-between`,children:[(0,r.jsx)(`h2`,{className:`text-sm font-semibold`,children:i}),n.minimumAgeForDose1&&(0,r.jsxs)(`span`,{className:`text-xs text-muted-foreground`,children:[`Min age dose 1: `,(0,r.jsx)(`strong`,{children:n.minimumAgeForDose1})]})]}),n.series&&n.series.length>0&&(0,r.jsxs)(`table`,{className:`w-full text-xs`,children:[(0,r.jsx)(`thead`,{className:`bg-muted/20`,children:(0,r.jsxs)(`tr`,{children:[(0,r.jsx)(`th`,{className:`text-left px-3 py-2`,children:`Dose`}),(0,r.jsx)(`th`,{className:`text-left px-3 py-2`,children:`Min age`}),(0,r.jsx)(`th`,{className:`text-left px-3 py-2`,children:`Min interval from prev`}),(0,r.jsx)(`th`,{className:`text-left px-3 py-2`,children:`Notes`})]})}),(0,r.jsx)(`tbody`,{children:n.series.map(e=>(0,r.jsxs)(`tr`,{className:`border-t border-border`,children:[(0,r.jsxs)(`td`,{className:`px-3 py-2 font-semibold`,children:[`Dose `,e.dose]}),(0,r.jsx)(`td`,{className:`px-3 py-2`,children:e.minimumAge||`—`}),(0,r.jsx)(`td`,{className:`px-3 py-2`,children:e.minimumIntervalToPrev||`—`}),(0,r.jsx)(`td`,{className:`px-3 py-2 text-muted-foreground`,children:e.notes||``})]},String(e.dose)))})]}),a.length>0&&(0,r.jsx)(`ul`,{className:`list-disc pl-8 py-2 text-xs text-muted-foreground space-y-1`,children:a.map((e,t)=>(0,r.jsx)(`li`,{children:e},t))})]},t)})]}):null}export{i as default};
--- a/public/app/assets/ChartReview-95oCueTc.js
+++ b/public/app/assets/ChartReview-95oCueTc.js
--- a/Show more
+++ b/Show more
		`@ -0,0 +1 @@`
							import{t as e}from"./jsx-runtime-ByY1xr43.js";import{i as t,l as n}from"./index-BuU36CvS.js";var r=e();function i(){let{data:e,isLoading:i,error:a}=n({queryKey:[`schedule-data`],queryFn:()=>t.get(`/api/schedule-data`)});return i?(0,r.jsx)(`div`,{className:`p-6 text-sm text-muted-foreground`,children:`Loading…`}):a?(0,r.jsx)(`div`,{className:`p-6 text-sm text-destructive`,children:a.message}):e?(0,r.jsxs)(`div`,{className:`max-w-4xl mx-auto p-6 space-y-4`,children:[(0,r.jsxs)(`header`,{children:[(0,r.jsx)(`h1`,{className:`text-2xl font-semibold`,children:`Catch-Up Schedule`}),(0,r.jsx)(`p`,{className:`text-sm text-muted-foreground`,children:`CDC 2025 catch-up immunization schedule — minimum ages and intervals per vaccine.`})]}),Object.entries(e.catchUpSchedule).map(([t,n])=>{let i=e.vaccineFullNames[t]\|\|t,a=n.catchUpNotes?Array.isArray(n.catchUpNotes)?n.catchUpNotes:[n.catchUpNotes]:[];return(0,r.jsxs)(`section`,{className:`rounded-lg border border-border bg-card overflow-hidden`,children:[(0,r.jsxs)(`header`,{className:`px-4 py-2 border-b border-border bg-muted/40 flex items-center justify-between`,children:[(0,r.jsx)(`h2`,{className:`text-sm font-semibold`,children:i}),n.minimumAgeForDose1&&(0,r.jsxs)(`span`,{className:`text-xs text-muted-foreground`,children:[`Min age dose 1: `,(0,r.jsx)(`strong`,{children:n.minimumAgeForDose1})]})]}),n.series&&n.series.length>0&&(0,r.jsxs)(`table`,{className:`w-full text-xs`,children:[(0,r.jsx)(`thead`,{className:`bg-muted/20`,children:(0,r.jsxs)(`tr`,{children:[(0,r.jsx)(`th`,{className:`text-left px-3 py-2`,children:`Dose`}),(0,r.jsx)(`th`,{className:`text-left px-3 py-2`,children:`Min age`}),(0,r.jsx)(`th`,{className:`text-left px-3 py-2`,children:`Min interval from prev`}),(0,r.jsx)(`th`,{className:`text-left px-3 py-2`,children:`Notes`})]})}),(0,r.jsx)(`tbody`,{children:n.series.map(e=>(0,r.jsxs)(`tr`,{className:`border-t border-border`,children:[(0,r.jsxs)(`td`,{className:`px-3 py-2 font-semibold`,children:[`Dose `,e.dose]}),(0,r.jsx)(`td`,{className:`px-3 py-2`,children:e.minimumAge\|\|`—`}),(0,r.jsx)(`td`,{className:`px-3 py-2`,children:e.minimumIntervalToPrev\|\|`—`}),(0,r.jsx)(`td`,{className:`px-3 py-2 text-muted-foreground`,children:e.notes\|\|``})]},String(e.dose)))})]}),a.length>0&&(0,r.jsx)(`ul`,{className:`list-disc pl-8 py-2 text-xs text-muted-foreground space-y-1`,children:a.map((e,t)=>(0,r.jsx)(`li`,{children:e},t))})]},t)})]}):null}export{i as default};