BODH-I

As a frontend developer, implement the `LandingHero` section using `@react-three/fiber` (`Canvas`, `useFrame`) and `THREE.js`. Build the `NeuralField` component that initialises 70 particles (`PARTICLE_COUNT`) with `Float32Array` positions, velocities, and basePositions via `useMemo`. In the `useFrame` loop, animate particles with sinusoidal drift and draw synaptic connection lines between nearby particles using `THREE.BufferGeometry` line positions updated each frame. Apply a four-color palette (`#67E8F9`, `#06B6D4`, `#8B5CF6`, `#10B981`) to particle vertex colors. Layer the `Canvas` as a decorative midground behind the hero headline and CTAs which use `framer-motion` entrance animations. Import lucide icons `ArrowRight`, `Sparkles`, `BrainCircuit`. Import `LandingHero.css`.

As a frontend developer, implement the `LandingBrainVisualization` section using `@react-three/fiber` (`Canvas`, `useFrame`, `useThree`) and `@react-three/drei` (`OrbitControls`, `Html`). Define the `REGIONS` array with four brain regions — Stress (`#06B6D4`), Sleep (`#8B5CF6`), Cognition (`#10B981`), Mood (`#F59E0B`) — each with a 3D `position`, `metric`, `metricLabel`, `subtitle`, `Icon`, `desc`, `stats` array, and `href`. Render interactive 3D region markers on the brain; on click/hover open an `AnimatePresence`-controlled detail panel showing the region's four stat entries. Implement `hexToRgba` utility. Use lucide icons `Brain`, `Moon`, `Activity`, `Sparkles`, `ArrowRight`, `X`. Import `LandingBrainVisualization.css`.

As a frontend developer, implement the `LandingFeatures` section as a static animated grid. Map over the `FEATURES` array (6 items: Psychological Assessments, Cognitive Assessments, AI Stress Prediction, Guided Interventions, Progress Monitoring, AI Companion Support) each with a lucide `Icon`, `title`, `desc`, and `tags` array. Apply `cardVariants` framer-motion animation (`hidden` → `visible`) with staggered delay of `i * 0.08` and custom easing `[0.22, 1, 0.36, 1]` using `whileInView`. Render two parallax decorative glow layers (`lf-glow-cyan`, `lf-glow-purple`, `lf-glow-green`) driven by a `--scroll` CSS custom property. Import `LandingFeatures.css`.

As a frontend developer, implement the `LandingAssessments` section with two assessment columns. Define `psychologicalAssessments` (PSS/Activity, STAI/HeartPulse, PSQI/Moon) and `cognitiveAssessments` (Trail Making/Route, N-Back/Layers3, Reaction Time/Timer) arrays. Render each via the `AssessmentCard` component which uses directional slide-in animation (`x: direction * 44 → 0`) with `whileInView` and staggered delay `index * 0.12`. Apply `whileHover={{ scale: 1.04, borderLeftWidth: 6 }}` to each card. Render parallax `lasm-glow-cyan`, `lasm-glow-purple`, and `lasm-grid-overlay` decorative layers. Include an `ArrowRight` CTA linking to `/Assessments`. Import `LandingAssessments.css`.

As a frontend developer, implement the `LandingInsights` section with intersection-observer-driven visibility (`useEffect` + `IntersectionObserver` at 0.25 threshold) toggling `li-visible` class on `rootRef`. Render four `CountUp`-animated metric cards (95% accuracy, 12K+ insights, 7wk window, 8 assessment types) with `hovered` tooltip state. Build the SHAP bar chart from `shapBars` array (Sleep Quality 92%, Academic Load 78%, Reaction Time 64%, PSS Score 57%, N-Back Accuracy 41%) with CSS class-based accent colors. Render an SVG gauge arc using `gaugeRadius=32`, `gaugeCirc = 2π×32`, `gaugePct=0.68`. Display four feature cards (Real-Time Predictions, Explainable AI SHAP, Personalized Recommendations, Longitudinal Monitoring) with lucide icons. Import `LandingInsights.css`.

As a frontend developer, implement the `LandingInterventions` section as a responsive carousel. Define `INTERVENTIONS` array (Box Breathing/cyan, Chatbot Support/purple, Wellness Calendar/green, Reminders/amber) each with `id`, `tag`, `title`, `accent`, `Icon`, `desc`, and `preview` type. Implement `useVisibleCount` hook that sets visible card count to 3 on ≥768px and 1 on mobile via `window.matchMedia` resize listener. Build `ChevronLeft`/`ChevronRight` navigation with `AnimatePresence` slide transitions. Render preview sub-components: `BreathPreview` (animated expanding circle with `li-breath-ring`/`li-breath-core` CSS keyframes), `ChatPreview` (user/bot bubbles + animated typing indicator with three `span` dots), `CalendarPreview` (14-cell grid with `active` and `soft` day states). Import `LandingInterventions.css`.

As a frontend developer, implement the `LandingTargetAudience` section rendering three `PersonaCard` components from the `personas` array (Young Adults & Students/GraduationCap/Sparkles, Healthcare Professionals/Stethoscope/FlaskConical, Administrators/ShieldCheck/Building2). Each persona has `pains` and `values` string arrays. Apply `cardVariants` framer-motion variants (`rest`, `reveal`, `hover`) with spring animation (`stiffness: 260, damping: 22`) that lifts the card `y: -8` on hover and intensifies `borderColor` to `rgba(139, 92, 246, 0.85)`. Use `listVariants` and `itemVariants` for staggered child list items that slide `x: 4` and reach full opacity on hover. Render `AlertTriangle` icons for pain points and `Check` icons for value propositions. Import `LandingTargetAudience.css`.

As a frontend developer, implement the `LandingCTA` section featuring the `MagneticButton` component. `MagneticButton` uses `useRef` + `useState` for `offset` (x/y) and `bursts` (particle explosion) state. On `onMouseMove` compute relative cursor position and apply `animate={{ x: offset.x, y: offset.y }}` spring (`stiffness: 220, damping: 14, mass: 0.4`). On click, generate 11 burst particles distributed at evenly-spaced angles with random distance (46–84px) and colors from `PARTICLE_COLORS` (`#10B981`, `#06B6D4`, `#67E8F9`, `#8B5CF6`, `#F59E0B`), animating them outward then fading via `AnimatePresence`. Render three `TRUST_BADGES` (Award, ShieldCheck, Sparkles). Use `useInView` for entrance animations. Render primary (`ArrowRight`) and secondary (`Play`) button variants. Import `LandingCTA.css`.

As a frontend developer, implement the `Footer` component with responsive accordion behaviour. Use `useState` for `openCol` and `isDesktop`, and `useEffect` with `window.matchMedia('(min-width: 768px)')` change listener to toggle desktop mode. On mobile, `toggleCol` opens/closes individual link columns (Product, Assessments, About) using `AnimatePresence`; on desktop all columns are always expanded. Render three `linkColumns` arrays covering Dashboard, AI Insights, Cognitive Lab, AI Companion, Assessments, Progress, Interventions, Reports, Calendar, HighRiskSupport, Profile, Signup. Render social icons (Linkedin, Twitter, Github) from the `socials` array. Animate the `ftr-topborder` gradient border with `backgroundPosition` looping from `0% 0%` to `100% 0%` over 6s. Include `Brain` brand icon and parallax glow layers. Component may already exist from a previous page — reuse if available. Import `Footer.css`.

As a frontend developer, implement the Navbar section for the Login page. This component reuses the shared Navbar from the Landing page (task 3522c574-9d56-4f01-985a-b2eb78b99efa). It uses useState for menuOpen and scrolled states, useEffect with a passive scroll listener to toggle the nv-scrolled class, and renders NAV_LINKS array mapping to nv-link anchors pointing to /Dashboard, /Assessments, and /AIInsights. Includes a hamburger button (nv-burger) with aria-expanded toggling nv-mobile-open drawer for mobile, and nv-actions with Sign In (/Login) and Sign Up (/Onboarding) ghost/primary buttons. The component may already exist from Landing — confirm reuse before re-implementing.

As a frontend developer, implement the Navbar section for the Signup page. This component may already exist from the Landing and Login pages (task IDs: 3522c574, 0bba9483). Reuse or verify the shared Navbar component which uses framer-motion useScroll/useMotionValueEvent to track scroll state (setScrolled at >40px), AnimatePresence for mobile menu with body overflow lock via useEffect, NAV_LINKS array pointing to /Landing and /Assessments, animated SVG logo-mark with two motion.path elements (cyan circle + purple BODH-I symbol) using pathLength variants, hover-tracked nv-link underline via motion.line, and a hamburger/close toggle for mobile. Depends on Landing page Navbar task to establish page-level chain.

As a Backend Developer, implement user profile CRUD endpoints: GET /users/{user_id}/profile, PUT /users/{user_id}/profile (update personal info, preferences, notifications, language, timezone, theme), GET /users/{user_id}/security (sessions, login history), DELETE /users/{user_id} (account deletion), GET /users/{user_id}/activity (metrics: assessments count, streak, interventions, stress trend). Store user documents in MongoDB with fields: name, email, phone, dateOfBirth, institution, preferences, privacySettings, createdAt, streakDays. Note: Profile page frontend tasks depend on this API.

As a Backend Developer, implement psychological assessment endpoints: POST /assessments/pss (submit PSS responses, compute score 0-40), POST /assessments/stai (submit STAI responses, compute state and trait scores), POST /assessments/psqi (submit PSQI responses, compute global score 0-21), POST /assessments/vas (submit VAS slider value), GET /assessments/history (paginated list with type, date, score, status), GET /assessments/{assessment_id} (single result), GET /assessments/status (completion status for all 8 assessments). Validate response ranges, compute scores per standard psychometric algorithms, and persist to MongoDB. Note: AssessmentsPsychological, DashboardAssessmentStatus, and Reports frontend tasks depend on this API.

As a Backend Developer, implement cognitive assessment endpoints: POST /assessments/tmt-a (submit trail-making A completion time and errors), POST /assessments/tmt-b (submit trail-making B completion time and errors), POST /assessments/n-back (submit N-Back accuracy and reaction times array), POST /assessments/reaction-time (submit reaction time measurements array, compute mean/std), GET /assessments/cognitive/results (latest results with percentile/baseline comparisons), GET /assessments/cognitive/history. Compute composite cognition index from sub-scores. Persist all results in MongoDB with timestamp. Note: AssessmentsCognitive, CognitiveLab, and ReportsCognitiveLab frontend tasks depend on this API.

As a Backend Developer, implement intervention tracking endpoints: POST /interventions/breathing-session (record box breathing session: duration, phase, moodBefore, moodAfter, completedCycles), GET /interventions/history (list sessions with type, date, duration, moodDelta, notes), PUT /interventions/{session_id} (update session notes or rating), POST /interventions/rating (submit post-session emotion rating 1-5). Store sessions in MongoDB with userId, type, timestamp, durationSeconds, moodBefore, moodAfter, completedCycles. Note: BreathingSession, SessionTracking, and ReportsInterventionHistory frontend tasks depend on this API.

As a Backend Developer, implement scheduling endpoints: GET /calendar/{user_id}/events (return events for month/week view with type: assessment/intervention/checkin, date, time, status: upcoming/pending/completed), POST /calendar/events (create new scheduled event with title, type, date, time, duration), PUT /calendar/events/{event_id} (update event status or reschedule), DELETE /calendar/events/{event_id}, GET /calendar/{user_id}/upcoming (next 6 upcoming sessions), GET /calendar/{user_id}/reminder-settings (toggle states for assessment/intervention/checkin reminders, notification method, timing), PUT /calendar/{user_id}/reminder-settings (save reminder preferences). Note: CalendarGrid, UpcomingSessions, and ReminderSettings frontend tasks depend on this API.

As a Data Engineer, create a seed data script (scripts/seed_db.py) to populate MongoDB Atlas with realistic sample data for development and demo purposes. Seed: 3 user accounts (student persona, healthcare professional, admin) with complete profiles, 7 weeks of assessment history per user (PSS/STAI/PSQI/VAS/cognitive scores), intervention sessions with mood deltas, stress prediction records with SHAP values, calendar events, and AI companion session history. Seed data should reflect realistic BODH-I use patterns (stress declining from week 1 to 7, improving sleep scores). Include a cleanup script to reset to pristine seed state.

As a Backend Developer, configure the FastAPI application foundation: set up app/main.py with CORS middleware (allow Next.js frontend origin), Firebase Admin SDK initialization, MongoDB motor async client connection with connection pooling, environment variable loading via pydantic-settings (.env with MONGODB_URI, FIREBASE_CREDENTIALS, JWT_SECRET, OPENAI_API_KEY, CORS_ORIGINS), global exception handlers (404, 422, 500), health check endpoint GET /health, and API versioning prefix /api/v1. Configure uvicorn with reload for dev and gunicorn workers for prod. Include requirements.txt with fastapi, motor, firebase-admin, pydantic, scikit-learn, shap, joblib, python-jose, python-multipart, weasyprint.

As a Frontend Developer, implement global state management using Zustand or React Context. Create stores: authStore (user, token, isAuthenticated, login, logout, refreshToken actions), userProfileStore (profile data, preferences, loading state), assessmentStore (current session state, completed assessments, scores), wellnessStore (dashboard metrics cache, lastFetched timestamp). Implement a custom useAuth hook wrapping Firebase onAuthStateChanged that syncs to authStore and calls /auth/verify-token on each Firebase token refresh. Create an apiClient wrapper in lib/api.ts that attaches the Firebase ID token to every request header automatically. Note: all authenticated pages depend on this setup.

As a DevOps Engineer, configure Vercel deployment for the Next.js frontend. Set up vercel.json with build commands, output directory, and environment variable references. Configure production and preview environment variables (NEXT_PUBLIC_API_BASE_URL pointing to Render backend, NEXT_PUBLIC_FIREBASE_CONFIG). Set up Vercel project via CLI, link GitHub repository for automatic deployments on push to main branch. Configure custom domain if applicable. Add CORS origin for Vercel domain to backend allowed origins. Document deployment process in README.md.

As a frontend developer, implement the LandingHero section for the Landing page. This is a 3D/Canvas-heavy hero using `@react-three/fiber` (`Canvas`, `useFrame`) and Three.js. The `NeuralField` component renders 70 animated particles (`PARTICLE_COUNT = 70`) via `useRef` for `pointsRef` and `linesRef`, with `useMemo`-computed `positions`, `velocities`, `basePositions`, and a colour palette (`#67E8F9`, `#06B6D4`, `#8B5CF6`, `#10B981`). Each frame (`useFrame`), particles oscillate using sine/cosine on elapsed time, and synaptic line connections are drawn between nearby particles using a `THREE.BufferGeometry` `linePositions` buffer. The hero overlays Framer Motion entrance animations and Lucide icons (`ArrowRight`, `Sparkles`, `BrainCircuit`). Depends on Navbar being in place for layout context.

As a frontend developer, implement the LandingBrainVisualization section for the Landing page. Renders an interactive 3D brain using `@react-three/fiber` (`Canvas`, `useFrame`, `useThree`) and `@react-three/drei` (`OrbitControls`, `Html`). The `REGIONS` array defines four brain regions (Stress, Sleep, Cognition, Mood) each with a `position` vector, `color`, `metric`, `metricLabel`, `subtitle`, Lucide icon, description, `stats` array (4 key-value pairs), and `href`. A `hexToRgba` utility converts hex colours. Region nodes are clickable, triggering Framer Motion `AnimatePresence` detail panel overlays. Icons used: `Brain`, `Moon`, `Activity`, `Sparkles`, `ArrowRight`, `X`. Depends on Navbar for layout.

As a frontend developer, implement the LandingFeatures section for the Landing page. Renders a 6-card grid from the `FEATURES` array, each card containing a Lucide icon (`ClipboardList`, `Brain`, `Activity`, `Wind`, `LineChart`, `MessageCircleHeart`), title, description, and tag chips. Cards use Framer Motion `motion.div` with `cardVariants` (hidden: `opacity: 0, y: 28`; visible: staggered with `delay: i * 0.08`, custom easing `[0.22, 1, 0.36, 1]`) triggered by `whileInView`. Background uses parallax-shifted `lf-glow` spans (cyan, purple, green) driven by a CSS `--scroll` custom property. Section heading animates in with `whileInView`. Depends on Navbar for layout.

As a frontend developer, implement the LandingAssessments section for the Landing page. Renders two side-by-side columns: `psychologicalAssessments` (PSS, STAI, PSQI with icons `Activity`, `HeartPulse`, `Moon`) and `cognitiveAssessments` (Trail Making, N-Back, Reaction Time with icons `Route`, `Layers3`, `Timer`). The `AssessmentCard` component animates in with `motion.div` using directional slide (`x: direction * 44`) and staggered delay (`index * 0.12`), plus `whileHover` scale (1.04) and left-border expansion. Background has parallax `lasm-glow-cyan`, `lasm-glow-purple`, and `lasm-grid-overlay` divs with CSS `--scroll` transforms. Section heading uses `whileInView` `y: 30 → 0`. `ArrowRight` CTA links to `/Assessments`. Depends on Navbar for layout.

As a frontend developer, implement the LandingInsights section for the Landing page. Uses `useRef` + `IntersectionObserver` (threshold 0.25) to set `visible` state, triggering `CountUp` animations on four metrics (95%, 12K+, 7wk, 8 assessment types). An SVG gauge renders at `gaugeRadius: 32` with `gaugePct: 0.68` and `gaugeCirc = 2πr`. A `shapBars` array (5 entries: Sleep Quality 92%, Academic Load 78%, Reaction Time 64%, PSS Score 57%, N-Back Accuracy 41%) renders SHAP importance bars with colour classes `li-bar-accent`, `li-bar-amber`, `li-bar-cyan`. Four `features` cards (Activity, Brain, Sparkles, TrendingUp icons) animate in. `useState(hovered)` tracks metric tooltip hover state via `AnimatePresence`. Depends on Navbar for layout.

As a frontend developer, implement the LandingInterventions section for the Landing page. A carousel of 4 intervention cards (`INTERVENTIONS` array: Box Breathing/cyan, Chatbot Support/purple, Wellness Calendar/green, Reminders/amber) with a custom `useVisibleCount` hook (returns 3 for ≥768px, 1 otherwise) and `ChevronLeft`/`ChevronRight` navigation. Each card has an `accent` colour and a `preview` type rendering one of four sub-components: `BreathPreview` (animated `li-breath-circle` + `li-breath-ring` + `li-breath-core` + label), `ChatPreview` (user/bot bubble + `li-typing` dots), `CalendarPreview` (14-cell grid with `active`/`soft` day states), and a Reminders preview. Framer Motion `AnimatePresence` handles card transitions. Icons: `Wind`, `MessageCircleHeart`, `CalendarDays`, `BellRing`. Depends on Navbar for layout.

As a frontend developer, implement the LandingTargetAudience section for the Landing page. Renders three `PersonaCard` components from the `personas` array (Young Adults & Students, Healthcare Professionals, Administrators). Each card is a Framer Motion `motion.div` using `cardVariants` (rest/reveal/hover states) with spring animation (`stiffness: 260, damping: 22`). On hover, the card lifts `y: -8`, border colour shifts to `rgba(139, 92, 246, 0.85)`, and list items translate `x: 4` via `itemVariants` with staggered children. Each persona has `FrontIcon`/`BackIcon` (e.g. `GraduationCap`/`Sparkles`, `Stethoscope`/`FlaskConical`, `ShieldCheck`/`Building2`), a `pains` list with `AlertTriangle` icons, and a `values` list with `Check` icons. `listVariants` controls stagger. Depends on Navbar for layout.

As a frontend developer, implement the LandingCTA section for the Landing page. Features a custom `MagneticButton` component using `useRef`, `useState({ x, y })` offset, and `useCallback` handlers (`handleMove`, `handleLeave`, `handleClick`). On `mousemove`, calculates relative cursor offset and animates the button via Framer Motion spring (`stiffness: 220, damping: 14, mass: 0.4`). On click, spawns a particle burst: 11 particles fanned at evenly spaced angles with random distance (46–84px), colours from `PARTICLE_COLORS` (`#10B981`, `#06B6D4`, `#67E8F9`, `#8B5CF6`, `#F59E0B`), rendered with `AnimatePresence` and cleaned up after 900ms. Three `TRUST_BADGES` (Award, ShieldCheck, Sparkles icons) render below. Section visibility tracked with Framer Motion `useInView`. Primary button links to `/Onboarding`, secondary to demo. `ChevronDown` scroll indicator included. Depends on Navbar for layout.

As a frontend developer, implement the Footer section for the Landing page. Renders a `ftr-root` footer with decorative `ftr-aurora` and `ftr-glow` aria-hidden spans. The brand column includes a `Brain` (size 22) logo mark, the BODH-I wordmark, a tagline paragraph, and four social icon links (`Twitter`, `Linkedin`, `Github`, `Instagram` from Lucide). A `linkColumns` array defines three nav columns (Product: Dashboard/AIInsights/AICompanion/Interventions; Assessments: Assessments/Progress/Reports/HighRiskSupport; About: Onboarding/Profile/Login) rendered as `ftr-col` nav groups. A `legalLinks` row (Privacy Policy, Terms of Service, Accessibility) and a dynamic copyright year (`new Date().getFullYear()`) appear in the bottom bar. Note: this Footer component may already exist from other pages — reuse if available. Depends on Navbar for shared layout context.

As a Frontend Developer, configure the global BODH-I design system. Set up Tailwind CSS design tokens (primary #06B6D4, secondary #8B5CF6, accent #10B981, highlight #F59E0B, bg #020617, surface rgba(2,6,23,0.8)), install and configure Shadcn UI with dark theme preset, define global CSS custom properties for all brand colors and spacing, configure Inter/Geist or equivalent premium font families via next/font for stylish professional typography, and create shared CSS utility classes (aurora gradients, glow effects, glassmorphism surface styles) used across all pages. Ensure all shared component styles (Navbar.css, Footer.css) are centralized in a styles/ directory. Note: all frontend section tasks depend on this setup being in place.

As a Data Engineer, configure MongoDB Atlas indexes and database setup beyond schema definitions. Create compound indexes on: assessments(userId + completedAt), stress_predictions(userId + createdAt), intervention_sessions(userId + completedAt), ai_companion_sessions(userId + createdAt), calendar_events(userId + scheduledAt), risk_alerts(userId + triggeredAt + acknowledged). Create single-field indexes on: users(email unique), users(firebaseUid unique). Configure MongoDB Atlas connection string with appropriate read/write concern settings. Set up database-level validation rules for required fields. Document index strategy and estimated query performance. Depends on MongoDB Data Models task.

As a frontend developer, implement the LoginHero section for the Login page. This is a static presentational section rendering a lhr-root section with an aria-labelledby lhr-headline. Includes a decorative lhr-glow orb, an lhr-eyebrow badge with a pulse dot and 'Welcome back' label, an h1 with lhr-headline-accent span for 'BODH-I', a subheadline paragraph, and a VALUE_PROPS array (3 items: 'AI-powered stress insights', 'Guided wellness interventions', 'Secure, encrypted data') mapped to lhr-value list items each with a checkmark span. Ends with a decorative lhr-divider. No state or interactivity required.

As a frontend developer, implement the LoginForm section for the Login page. Uses useState hooks for email, password, remember, showPass, loading, and error states. Features a framer-motion animated lf-card (initial opacity:0/y:24, animate opacity:1/y:0, 0.5s easeOut). Form includes: email field with lucide Mail icon and autoComplete='email', password field with lucide Lock icon and Eye/EyeOff toggle button (showPass state) with aria-label switching, a remember-me checkbox, and a submit handler that validates non-empty fields setting error state or triggering a 1600ms loading simulation via setTimeout. Error state renders with lucide AlertCircle icon. Submit button uses lucide LogIn icon and disables during loading. Ambient background has three decorative glow orbs (lf-glow-cyan, lf-glow-purple, lf-glow-green).

As a frontend developer, implement the Footer section for the Login page. This component reuses the shared Footer from the Landing page (task 3c6d299c-ce7c-4f07-8b6a-64da28c1bc8c). Renders a ftr-root footer with decorative ftr-aurora and ftr-glow divs, a ftr-brand block containing the Brain lucide icon (size 22) logo, tagline paragraph, and ftr-socials row mapping Twitter/Linkedin/Github/Instagram lucide icons to anchor links. Renders 3 linkColumns (Product, Assessments, About) as ftr-col nav blocks. Bottom bar shows dynamic year via new Date().getFullYear() and legalLinks array (Privacy Policy, Terms of Service, Accessibility). Component may already exist from Landing — confirm reuse before re-implementing.

As a frontend developer, implement the SignupHero section for the Signup page. The component renders a full-width hero section (sh-root) with three decorative aurora glow divs (sh-glow-accent, sh-glow-secondary, sh-glow-accent-right). Inside sh-content, it renders: (1) an animated eyebrow badge with sh-eyebrow-dot using motion.div (opacity/y, 0.5s easeOut), (2) a motion.h1 headline with gradient span sh-headline-gradient reading 'Your mental wellness journey starts with one signup' (delay 0.1s), (3) a motion.p subheadline highlighting AI-powered stress insights (delay 0.25s), (4) a motion.div trust indicators row mapping trustItems array with sh-trust-icon checkmarks for 'Secure & encrypted', 'Free to start', 'HIPAA-aligned' separated by sh-trust-divider spans (delay 0.4s), and (5) a decorative sh-separator line.

As a frontend developer, implement the SignupForm section for the Signup page. The component uses useState for email, password, confirmPassword, goal, submitting, and touched fields, plus useMemo for emailError (regex validation), passwordStrength (getPasswordStrength helper scoring length/uppercase/lowercase/digit/special char into Weak/Medium/Strong labels), passwordError, confirmError, and isFormValid. Renders a sif-root card with two sif-glow decorative elements, a form containing: email input with blur-triggered touched state, password input with a 6-segment password strength indicator bar (Array.from({ length: 6 }) mapped to colored segments), confirm password input with match validation, a GOAL_OPTIONS select dropdown (7 options including reduce_stress, improve_sleep, manage_anxiety, boost_focus, track_mood, build_resilience), a terms checkbox, and a submit button that sets submitting=true and simulates async with setTimeout(1500ms). All field errors display inline. Uses framer-motion for entrance animations on the card.

As a frontend developer, implement the SignupBenefits section for the Signup page. The component renders a sb-root section with two decorative background glows (sb-bg-glow-cyan, sb-bg-glow-purple). Inside sb-inner: (1) a whileInView motion.div heading block with sb-heading-label 'Why BODH-I', h2 'Everything you need to thrive', subtext about thousands of students, and an sb-divider line; (2) a motion.div sb-grid using containerVariants (staggerChildren: 0.14, delayChildren: 0.1) with whileInView/viewport once. Maps the benefits array (Brain/Lightbulb/TrendingUp lucide icons) to motion.div sb-card elements using cardVariants (opacity/y:24 hidden→visible, 0.5s cubic-bezier ease) with whileHover y:-4 lift. Each card renders the lucide icon in a colored sb-icon-wrap (cyan/purple/green variants), a label, and a desc paragraph.

As a frontend developer, implement the Footer section for the Signup page. This component may already exist from Landing (3c6d299c) and Login (dcac37ea) pages — reuse or verify. The Footer uses useState for openCol (mobile accordion) and isDesktop (via window.matchMedia min-width:768px with addEventListener), animated ftr-topborder using motion.div backgroundPosition keyframe cycling (0%→100%→0% over 6s linear infinite), two parallax glow divs (ftr-glow-cyan, ftr-glow-purple) with CSS var(--scroll) transform, ftr-grid with brand block (Brain lucide icon, BODH-I name, description text), three linkColumns (Product/Assessments/About) rendered as accordion on mobile via toggleCol/isColOpen with AnimatePresence, ChevronDown rotation indicator, social icons row (Linkedin/Twitter/Github lucide icons), and a bottom bar with copyright and legal links.

As a frontend developer, implement the Navbar section for the Onboarding page. This component reuses the shared Navbar from previous pages (Login, Signup). It uses `useState` for `menuOpen` and `scrolled` states, and a `useEffect` scroll listener that adds the `nv-scrolled` class when `window.scrollY > 8`. The NAV_LINKS array routes to `/Dashboard`, `/Assessments`, and `/AIInsights`. The desktop nav renders `.nv-links` and `.nv-actions` with Sign In (`/Login`) and Sign Up (`/Onboarding`) CTAs. A hamburger button toggles `.nv-burger`/`.nv-open` and reveals the `.nv-mobile`/`.nv-mobile-open` drawer. Component may already exist from Signup page — verify before re-implementing.

As a Backend Developer, implement onboarding endpoints: POST /onboarding/goals (save selected goals array, max 3, values: reduce_stress, improve_sleep, build_focus, manage_anxiety, boost_energy, enhance_mood), POST /onboarding/mood (save initial mood level 1-5 and stressors array), GET /onboarding/status (return whether user has completed onboarding). Store onboarding data on the user document in MongoDB. Note: OnboardingGoals and OnboardingMood frontend tasks depend on this API.

As a Backend Developer, implement AI/ML stress prediction endpoints: POST /ai/predict-stress (accept PSS, STAI, PSQI, VAS, and cognitive scores; run Gradient Boosting Regressor to return predicted stress score 0-100 with confidence interval), GET /ai/insights/{user_id} (return latest stress prediction, trend vs previous week, risk band classification: low/moderate/high), GET /ai/shap/{user_id} (return SHAP feature importances array: sleep_quality, academic_workload, social_engagement, cognitive_load, physical_activity, screen_time, mindfulness_minutes, caffeine_intake with float values). Load pre-trained GBR model from disk (pickle or joblib). Note: StressPredictionGauge, SHAPExplainability, and WellnessMetrics frontend tasks depend on this API.

As a Backend Developer, implement longitudinal monitoring endpoints: GET /progress/{user_id}/wellness-index (return composite wellness score 0-100, trend, mood distribution, category label), GET /progress/{user_id}/metrics (stress/sleep/cognition/anxiety metrics with sparkline data for current week), GET /progress/{user_id}/trend-charts (weekly PSS and PSQI arrays for 7 weeks), GET /progress/{user_id}/intervention-timeline (7-week timeline with week label, icon, description), GET /progress/{user_id}/assessment-history (paginated assessment history with status, score, date). Compute aggregations from raw assessment and intervention collections. Note: ProgressWellnessIndex, ProgressMetricsGrid, ProgressTrendCharts, and ProgressInterventionTimeline frontend tasks depend on this API.

As a DevOps Engineer, configure Render deployment for the FastAPI backend. Create render.yaml with service definition (type: web, runtime: python, buildCommand: pip install -r requirements.txt, startCommand: uvicorn app.main:app --host 0.0.0.0 --port $PORT). Configure environment variables on Render dashboard: MONGODB_URI (MongoDB Atlas connection string), FIREBASE_CREDENTIALS (base64-encoded service account JSON), JWT_SECRET, OPENAI_API_KEY, CORS_ORIGINS (Vercel frontend URL). Set up health check path /health. Configure auto-deploy from GitHub main branch. Include model artifact deployment strategy (bundle model files in repo or download from storage on startup). Document setup in README.md.

As a DevOps Engineer, configure GitHub Actions CI/CD pipelines. Create .github/workflows/backend.yml: on push/PR to main, run Python linting (flake8), type checking (mypy), and pytest test suite against a test MongoDB Atlas cluster. Create .github/workflows/frontend.yml: on push/PR to main, run ESLint, TypeScript type checking (tsc --noEmit), and Next.js build check. Add status badges to README.md. Configure secrets in GitHub repository settings for MONGODB_URI_TEST, FIREBASE_CREDENTIALS, and NEXT_PUBLIC_API_BASE_URL for CI environment.

As a Backend Developer, set up Firebase Admin SDK for server-side token verification and user management. Initialize Firebase Admin in app/core/firebase.py using service account credentials loaded from environment variable FIREBASE_CREDENTIALS (base64-encoded JSON). Create a reusable verify_firebase_token dependency that decodes and validates Firebase ID tokens, extracts uid and email, and raises HTTPException 401 on invalid/expired tokens. Create a get_current_user FastAPI dependency that calls verify_firebase_token and fetches/creates the corresponding MongoDB user document. Apply this dependency to all protected route groups. Depends on FastAPI Application Core task.

As a Frontend Developer, integrate the Sketchfab human brain model (ID: 7a27c17fd6c0488bb31ab093236a47fb) into the LandingBrainVisualization section using @react-three/fiber and three.js. Load the GLTF/GLB model via @react-three/drei useGLTF or fetch from Sketchfab API. Map the four REGIONS (Stress, Sleep, Cognition, Mood) to specific brain mesh nodes/positions using raycasting. Implement OrbitControls for rotate/zoom interaction. Add hover highlighting (emissive color shift) and click-triggered AnimatePresence detail panel overlays per region. Ensure responsive canvas sizing and fallback to procedural geometry if model fails to load. Note: this task covers the SRD Signature Design Concept requirement.

As an AI Engineer, configure the ML model serving infrastructure for stress prediction. Create app/ml/model_loader.py that loads gbr_stress.joblib and shap_explainer.joblib on FastAPI startup using lifespan context manager (not per-request). Implement a ModelRegistry singleton that caches the loaded model and explainer in memory. Create app/ml/predictor.py with a StressPredictor class exposing predict(features: dict) -> PredictionResult and explain(features: dict) -> SHAPResult methods. Handle model-not-found gracefully with a fallback mock prediction for development. Add a /health/ml endpoint returning model load status and version. Depends on Train Stress Prediction Model task and FastAPI Application Core.

As a frontend developer, implement the LoginDivider section for the Login page. This is a minimal, fully static presentational component rendering a ld-root div with role='separator' and aria-label='or'. Contains two ld-line spans (aria-hidden) flanking a ld-text span with 'or'. No state, no interactivity. Serves as the visual divider between the LoginForm and LoginSocial sections.

As a frontend developer, implement the OnboardingHero section for the Onboarding page. This section features a React Three Fiber `Canvas`-based 3D brain motif via the `WelcomeBrainCore` component. The 3D scene includes: an outer wireframe `icosahedronGeometry` (args `[1.5, 2]`) rotating via `outerRef` at `t * 0.15` on Y-axis; an inner glowing `sphereGeometry` (args `[48, 48]`) with pulsing `emissiveIntensity` on `innerRef`; a `ringRef` mesh rotating on Z at `t * 0.22`. A `useMemo`-generated particle system of 38 points with `Float32Array` positions and a cyan/purple color palette is rendered as `<points>`. Node satellites (6 total) use randomised spherical coordinates with a 5-color palette (`#06B6D4`, `#8B5CF6`, `#67E8F9`, `#10B981`, `#F59E0B`). The `useFrame` hook drives all animations. The `Sparkles` icon from `lucide-react` is used in the UI. Imports `@react-three/fiber` and uses `useRef`, `useMemo`, `useState`, `useEffect`.

As a frontend developer, implement the OnboardingGoals section for the Onboarding page. This section renders a goal-selection UI allowing users to pick up to `MAX_SELECTION = 3` goals from the `GOALS` array (6 options: Reduce Stress, Improve Sleep, Build Focus, Manage Anxiety, Boost Energy, Enhance Mood) each with a `lucide-react` icon (Heart, Moon, Brain, Shield, Zap, Smile). Uses `useState` for selection tracking and `useCallback` for toggle logic. Goal cards animate using `framer-motion` `motion` and `AnimatePresence`. An ambient 3D background is provided by `AmbientParticles` — a React Three Fiber `<points>` mesh of 40 particles with `Float32Array` positions rendered in a `Canvas` with `alpha: true` and `position: absolute, inset: 0`. The `useFrame` hook gently rotates the particle cloud. `AmbientScene` wraps the canvas with cyan and green point lights.

As a frontend developer, implement the OnboardingMood section for the Onboarding page. This section renders Step 2 of 3 of the onboarding flow with a progress bar whose fill width is dynamically calculated as `Math.round((currentStep / totalSteps) * 100)%`. The mood grid (`om-mood-grid`) renders 5 `moodOptions` (Very Low to Great, values 1–5 with emoji) as `role='radio'` buttons with `aria-checked` and a `Check` icon overlay for selected state, managed by `useState` (`selectedMood`). A stressor multi-select section renders 6 `stressorOptions` (Academic Pressure, Career Uncertainty, Sleep Issues, Anxiety, Social Stress, Financial Worries) toggled via `setStressors` with array filter logic. Navigation uses `ArrowLeft` and `ChevronRight` from `lucide-react`. Ambient cyan and purple glow `div`s are rendered as decorative `aria-hidden` elements. Also imports `Info` and `Check` from `lucide-react`.

As a frontend developer, implement the OnboardingAssessmentPrep section for the Onboarding page. This section uses an `IntersectionObserver` (threshold `0.15`) attached to `sectionRef` to trigger `setInView(true)` once, disconnecting afterward. Four assessment cards from the `ASSESSMENTS` array (PSS, STAI, PSQI, Cognitive Baseline) are animated using `framer-motion` `motion` with `cardVariants` — staggered `delay: i * 0.1` and a custom cubic bezier `[0.22, 1, 0.36, 1]`. Each card has an icon (Activity, Zap, Moon, Brain from `lucide-react`) with colour classes (`oap-card-icon--cyan`, `oap-card-icon--purple`, `oap-card-icon--amber`), a category badge (`oap-card-badge--psych`, `oap-card-badge--sleep`, `oap-card-badge--cog`), time estimate, and description. A header step indicator and `fadeUp` framer-motion variant animate the `oap-step` element. Total time constant `TOTAL_MINUTES = 35` is displayed. `AlertCircle`, `ChevronRight`, `ArrowRight`, `Clock`, `Eye` from `lucide-react` are also used.

As a frontend developer, implement the OnboardingCTA section for the Onboarding page. This section uses `framer-motion` `motion` with `whileInView` animations (viewport `once: true, margin: '-60px'`) on the heading, subtitle, and action buttons. The heading includes an `.octa-heading-accent` span for 'wellness blueprint'. A `useState` hook (`ctaHovered`) controls an animated `ArrowRight` icon that shifts `x: 4` on hover via `animate` prop with `whileTap={{ scale: 0.97 }}` on the primary CTA anchor linking to `/Assessments`. A secondary ghost button links to `/Dashboard`. Three `reassuranceItems` (ShieldCheck, PauseCircle, Lock from `lucide-react`) are rendered below the CTAs with privacy/security copy. Background consists of three layered glow `div`s (`.octa-glow-primary`, `.octa-glow-accent`, `.octa-glow-purple`) and a decorative `.octa-accent-line`. `Sparkles` icon is used in the primary button.

As a frontend developer, implement the Footer section for the Onboarding page. This component reuses the shared Footer from previous pages (Landing, Login, Signup). It renders a `Brain` icon logo (22px, `lucide-react`) alongside the 'BODH-I' brand text and a tagline. Three `linkColumns` (Product, Assessments, About) each render an `ftr-col` with `h3` title and `ul` of anchor links. Four social icons (Twitter, LinkedIn, Github, Instagram from `lucide-react`) render as `.ftr-social` anchors. Three `legalLinks` (Privacy Policy, Terms of Service, Accessibility) and a dynamic `year` from `new Date().getFullYear()` appear in the footer bottom bar. Decorative `.ftr-aurora` and `.ftr-glow` divs provide ambient background. Component may already exist from Landing/Login/Signup pages — verify before re-implementing.

As a frontend developer, implement the Navbar section for the Dashboard page. This component reuses the Navbar already built for Login/Signup/Onboarding pages. It uses useState for menuOpen and scrolled states, useEffect to attach a passive scroll listener that sets scrolled when window.scrollY > 8, and renders a responsive header with nv-root/nv-scrolled classes. Includes NAV_LINKS array linking to /Dashboard, /Assessments, /AIInsights, a brand mark with nv-brand-pulse animation, desktop nv-links ul, nv-actions with Sign In (/Login) and Sign Up (/Onboarding) buttons, a hamburger nv-burger button with aria-expanded, and a mobile nv-mobile drawer with nv-mobile-open toggle. Verify the component is shared/reused from prior pages rather than duplicated.

As a Backend Developer, implement AI-assisted recommendations endpoints: GET /ai/recommendations/{user_id} (return list of personalized recommendations based on latest stress prediction and assessment scores; each item has title, description, href, icon, urgency: critical/high/medium/low), POST /ai/chat (accept user message and conversation history; proxy to Claude/OpenAI or rule-based NLP; return AI companion response with wellness context), GET /ai/wellness-metrics/{user_id} (return aggregated stress%, sleep%, anxiety%, mood% with weekly sparkline data and trend direction). Note: RecommendationsPanel (AIInsights and AICompanion), ChatInterface, and WellnessInsights frontend tasks depend on this API.

As a Backend Developer, implement reporting endpoints: GET /reports/{user_id}/summary (return stress timeline heatmap 7x7, assessment trends for PSS/STAI/PSQI/VAS, cognitive lab results, intervention adherence stats), GET /reports/{user_id}/metrics-summary (4 metric cards: stress, sleep, cognition, mood with sparklines and trend), POST /reports/{user_id}/export (generate PDF report using WeasyPrint or reportlab containing assessment trends, stress timeline, cognitive results, intervention history; return as file download or signed URL), GET /reports/{user_id}/stress-timeline (49-point stress heatmap with predicted flag and factor breakdown). Note: ReportsMetricsSummary, ReportsAssessmentTrends, ReportsStressTimeline, ReportsCognitiveLab, ReportsInterventionHistory, and ReportsExportActions frontend tasks depend on this API.

As a Backend Developer, implement high-risk alert endpoints: GET /risk/{user_id}/assessment (return current risk level: high/moderate/low based on latest stress prediction and PSS/STAI scores, with explanation text and trigger chips), POST /risk/{user_id}/alert (trigger high-risk alert, log alert event, optionally send notification), GET /risk/{user_id}/referrals (return professional referral categories: counselor, campus, emergency resources with contact details and action URLs), POST /risk/{user_id}/coping-session (log coping strategy usage with technique id and timestamp). Risk thresholds: PSS>28 OR predicted_stress>75 => high risk. Note: RiskAssessmentBanner, ProfessionalReferrals, and SupportPathways frontend tasks depend on this API.

As a Backend Developer, implement dashboard aggregation endpoints: GET /dashboard/{user_id}/overview (return wellness index score 0-100 with trend, greeting context, notification count, assessment completion summary), GET /dashboard/{user_id}/metrics (5 metric cards: stress/sleep/anxiety/cognition/mood with sparkline arrays, change indicators, last updated), GET /dashboard/{user_id}/progress-chart (weekly datasets for stress/anxiety/sleep/mood over 7 weeks for Chart.js line chart), GET /dashboard/{user_id}/upcoming-events (next 7 events: assessment/breathing with urgent flag, tags, hasReminder). Aggregate data from assessments, interventions, and progress collections. Note: DashboardWellnessIndex, DashboardMetricsGrid, DashboardProgressChart, DashboardUpcomingEvents, and DashboardAssessmentStatus frontend tasks depend on this API.

As a Tech Lead, verify the end-to-end integration between the Login/Signup frontend implementation and the Authentication backend API. Ensure Firebase ID tokens are correctly obtained client-side and sent to /auth/verify-token, user documents are created in MongoDB on signup, Google OAuth flow completes correctly, protected routes redirect unauthenticated users to /Login, and auth state persists across page refreshes via authStore. Test all three auth flows: email/password login, Google login, and new user signup with onboarding redirect.

As a Backend Developer, implement authentication and authorization middleware for FastAPI. Create app/middleware/auth.py with: a JWTBearer class (HTTPBearer subclass) that extracts and validates Firebase ID tokens on every protected request, a RoleChecker dependency for future role-based access (user/admin), and a rate-limiting middleware using slowapi or a custom Redis-based counter to prevent abuse of sensitive endpoints (POST /auth/*, POST /ai/predict-stress). Add request logging middleware that records endpoint, user_id, latency, and status code to enable audit trails for mental health data compliance. Inject user_id into request.state for use in all route handlers. Depends on Firebase Admin SDK setup.

As a DevOps Engineer, configure environment variable management across all deployment environments. Create .env.example with all required variables documented (MONGODB_URI, FIREBASE_CREDENTIALS, JWT_SECRET, OPENAI_API_KEY, CORS_ORIGINS, NEXT_PUBLIC_API_BASE_URL, NEXT_PUBLIC_FIREBASE_CONFIG). Set up GitHub repository secrets for CI/CD workflows. Configure Vercel environment variable groups for preview and production. Configure Render environment variables for backend service. Create a secrets rotation runbook. Ensure .env files are gitignored and document the secrets bootstrapping process for new developers in README.md. Depends on CI/CD and both deployment tasks.

As a frontend developer, implement the LoginSocial section for the Login page. Renders a lso-root div with lso-inner containing a framer-motion animated lso-buttons container using containerVariants (staggerChildren:0.1, delayChildren:0.15) and itemVariants (opacity:0/y:12 → opacity:1/y:0, 0.4s easeOut) for staggered entrance animation. Maps over socialProviders array of 3 entries — Google (inline SVG with 4 branded path fills: #4285F4, #34A853, #FBBC05, #EA4335), Apple (filled currentColor SVG), and GitHub (filled currentColor SVG path) — each wrapped in a motion.div with itemVariants. Each provider renders as a button with its SVG icon and label text (e.g., 'Continue with Google').

As a frontend developer, implement the DashboardHeader section for the Dashboard page. Uses useState for notificationCount (default 3), greeting (computed via getGreeting() based on hour), dateStr (formatted via formatDate() updated every 60s via setInterval), avatarError, and hoveredAction. Uses useMemo for avatarLetters ('AM'). Imports Bell, Settings, Calendar from lucide-react. Renders a framer-motion animated dh-root/dh-inner with entry animation (opacity 0→1, y 16→0, duration 0.5). Left panel shows staggered animated dh-greeting with user name 'Amit' and dh-datetime with Calendar icon. Right panel (dh-right, x 12→0) contains notification bell button with badge count, Settings icon button, and avatar with fallback to initials on avatarError. Hover states tracked via hoveredAction.

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. Uses useState for activeLink (default 'Dashboard'), collapsed (default false), and mobileOpen (default false). Uses useCallback for handleNavClick (sets activeLink, closes mobile), toggleCollapse, and toggleMobile. Renders three NAV_SECTIONS — Main (Dashboard, Assessments, Cognitive Lab, AI Insights), Wellness (Interventions, Progress, Calendar), and Support (AI Companion, High-Risk Support, Profile) — each with lucide-react icons. Includes a mobile overlay div with ds-overlay-visible class, a fixed mobile hamburger trigger (bottom-left, gradient background), and an aside.ds-root with ds-collapsed and ds-mobile-open modifier classes. Desktop collapse button toggles sidebar width via ds-collapsed. Active link highlighted via activeLink state comparison.

As a frontend developer, implement the DashboardWellnessIndex section for the Dashboard page. Uses useState for score (animated from 0 to targetScore=78), trend ('up'), lastUpdated timestamp, and animatedOffset (SVG strokeDashoffset, starts at full RING_CIRCUMFERENCE=2πr where r=85). useEffect triggers a 400ms delayed setTimeout to set score and animatedOffset to the target values, producing an animated ring fill. Renders an SVG progress ring with dwi-ring-bg and dwi-ring-fg circles, dynamic color classes (green/amber/red) based on getStatus(score) thresholds (70=Excellent, 50=Moderate). Center displays score value with matching color class. Shows status badge, trend icon (TrendingUp/TrendingDown/Minus from lucide-react), trend label ('+4 pts this week'), and last updated timestamp via formatDate(). Wrapped in framer-motion card with cubic-bezier easing.

As a frontend developer, implement the DashboardMetricsGrid section for the Dashboard page. Renders 5 metric cards from the METRICS array: Stress Level (amber), Sleep Quality (purple), Anxiety (rose), Cognitive Perf. (cyan), Mood (green) — each with icon, value, unit, change indicator, changeLabel, and lastUpdated. Each card includes a SparklineCanvas component that uses useRef for canvasRef and containerRef, reading container dimensions via getBoundingClientRect(), accounting for devicePixelRatio, drawing a smooth sparkline with gradient fill using Canvas 2D API (createLinearGradient, bezierCurveTo). Cards use accentClass CSS modifiers and accentGradient inline styles. framer-motion used for staggered card entrance animations. Cards are anchor-linked (href to /Assessments or /CognitiveLab or /Progress).

As a frontend developer, implement the DashboardAssessmentStatus section for the Dashboard page. Renders 8 assessments from the ASSESSMENTS array split into Psychological (PSS, STAI, PSQI, VAS) and Cognitive (TMT-A, TMT-B, N-Back, Reaction Time) categories, each with id, name, abbr, category, lucide-react icon (Brain, Heart, Moon, Gauge, ArrowLeftRight, MousePointerClick, Grid3X3, Zap), status ('completed'/'pending'/'not_started'), completionDate, score, scoreLabel, percentComplete, and description. Uses useState for selected assessment, active category filter tab, and expanded accordion states. Uses useMemo for filtered/grouped assessment lists. Imports AnimatePresence and motion from framer-motion for card transitions. Status icons: CheckCircle2 (completed), AlertCircle (pending), HelpCircle (not_started). Includes Play/RotateCcw/ArrowRight action buttons, ClipboardList/Inbox empty states, and a progress bar per assessment.

As a frontend developer, implement the DashboardProgressChart section for the Dashboard page. Registers Chart.js modules (CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler). Uses useState for visibleSets (stress: true, anxiety: true, sleep: false, mood: false) and tooltipData, useRef for chartRef, useState for chartKey (remounts chart on dataset toggle). toggleSet prevents all datasets from being hidden. Uses useMemo to build datasets array conditionally — Stress Score (#06B6D4, fill gradient), Anxiety Score (#8B5CF6, dashed border), Sleep Quality, Mood — each with gradient backgroundColor factory, tension 0.4, custom pointRadius/pointHoverRadius. Renders react-chartjs-2 Line chart with weekLabels (Week 1–7), stressData/anxietyData/sleepData/moodData arrays, and milestones overlay. AnimatePresence used for tooltip panel. Dataset toggle buttons with active state. framer-motion section entrance animation.

As a frontend developer, implement the DashboardUpcomingEvents section for the Dashboard page. Uses useState for activeFilter (default 'All'), dismissedIds (Set), and showAll (default false). UPCOMING_EVENTS array has 7 events of type 'assessment' or 'breathing' with id, title, desc, date (Today/Tomorrow/Jun 10/Jun 11), time, urgent boolean, hasReminder boolean, and tags array. FILTERS = ['All', 'Today', 'Assessments', 'Interventions']. getEventIcon() returns ClipboardCheck for assessment, Wind for breathing, Brain as default. AnimatePresence wraps filtered event list with cardVariants (hidden: y:16, visible with staggered delay i*0.06, exit: x:-20). Dismiss button (X icon) adds event id to dismissedIds Set. Bell icon toggles reminder state. ChevronDown 'Show More' expands beyond initial 4 events via showAll. Urgent events styled with AlertCircle badge. Filter tabs update activeFilter.

As a frontend developer, implement the Footer section for the Dashboard page. This component reuses the Footer already built for Landing/Login/Signup/Onboarding pages. Renders ftr-root with ftr-aurora and ftr-glow decorative divs (aria-hidden). ftr-inner contains ftr-top with ftr-brand block (Brain icon from lucide-react at size 22, 'BODH-I' text, tagline paragraph, ftr-socials row with Twitter/Linkedin/Github/Instagram icon links). ftr-links nav renders 3 columns from linkColumns array: Product (Dashboard, AI Insights, AI Companion, Interventions), Assessments (Assessments, Progress, Reports, High-Risk Support), About (Onboarding, Profile, Login). Bottom bar shows dynamic year via new Date().getFullYear() and legalLinks (Privacy Policy, Terms of Service, Accessibility). Confirm shared component reuse from prior pages.

As a frontend developer, implement the Navbar section for the Assessments page. This component may already exist from the Dashboard page (task 5d250b82). It uses useState for menuOpen and scrolled states, with a useEffect scroll listener (passive, threshold 8px) that toggles the 'nv-scrolled' class on the header. Renders a brand mark with animated pulse span, NAV_LINKS array (Features→/Dashboard, Assessments→/Assessments, About→/AIInsights), desktop action buttons (Sign In→/Login, Sign Up→/Onboarding), and a hamburger button with aria-expanded toggling a mobile drawer (.nv-mobile / .nv-mobile-open). Import Navbar.css.

As a frontend developer, implement the Navbar section for the Profile page. This component (likely already exists from previous pages) uses useState for menuOpen and scrolled states, useEffect with a passive scroll listener to toggle the nv-scrolled class on the nv-root header, and renders NAV_LINKS (Features→/Dashboard, Assessments→/Assessments, About→/AIInsights) as desktop nv-links and a mobile nv-mobile drawer. Includes a nv-burger button with aria-expanded toggle, Sign In (nv-btn-ghost→/Login) and Sign Up (nv-btn-primary→/Onboarding) CTAs, and a BODH-I brand mark with nv-brand-pulse animation. Reuse existing Navbar component if available from Dashboard or prior pages.

As a Backend Developer, implement AI companion session endpoints: GET /companion/{user_id}/sessions (list past sessions with id, date, time, duration, topic, topicIcon, summary, status, messageCount), POST /companion/sessions (create new session), POST /companion/sessions/{session_id}/messages (append message to session), GET /companion/sessions/{session_id}/messages (retrieve conversation history), DELETE /companion/sessions/{session_id}. Store sessions and messages in MongoDB. Note: ChatInterface and SessionHistory frontend tasks depend on this API.

As a Tech Lead, verify the end-to-end integration between the Onboarding frontend (OnboardingGoals, OnboardingMood) and the Onboarding backend API. Ensure selected goals and mood are persisted via POST /onboarding/goals and POST /onboarding/mood, onboarding completion status is checked on dashboard load (GET /onboarding/status) to prevent re-onboarding, and the user is correctly redirected to /Dashboard after completing all onboarding steps.

As a Backend Developer, implement a lightweight notification/reminder system to support the Calendar & Reminders feature. Create POST /notifications/schedule (schedule a reminder for a calendar event with timing offset: 1 day before, 1 hour before, at time), GET /notifications/{user_id}/pending (return pending/unread notifications with type, message, relatedEventId, createdAt), PUT /notifications/{notification_id}/read (mark notification as read), DELETE /notifications/{notification_id} (dismiss notification). Implement a background task using FastAPI BackgroundTasks or APScheduler that evaluates upcoming events and creates notification records in MongoDB when reminder thresholds are crossed. Note: DashboardHeader notification badge count and ReminderSettings frontend tasks depend on this API.

As a Backend Developer, implement post-assessment experience rating endpoints to support the SRD requirement for users to rate their experience after assessments. Create POST /ratings/assessment (submit experience rating 1-5 stars with optional feedback text for a completed assessment session, keyed by assessmentId and userId), GET /ratings/{user_id}/history (list past ratings with assessment type, score, rating, feedback, date). Store ratings in MongoDB ratings collection. Expose aggregate GET /ratings/{user_id}/average (return average rating per assessment type). These ratings feed into the intervention adherence stats shown in Reports. Note: SessionTracking (Interventions) and ReportsInterventionHistory frontend tasks depend on this API.

As a Tech Lead, verify the end-to-end integration between the Onboarding frontend (OnboardingGoals, OnboardingMood, OnboardingHero, OnboardingCTA) and the Onboarding backend API. Ensure selected goals and mood are persisted via POST /onboarding/goals and POST /onboarding/mood, onboarding completion status is checked on dashboard load (GET /onboarding/status) to prevent re-onboarding, and the user is correctly redirected to /Dashboard after completing all onboarding steps. Verify the onboarding flow is only shown to newly registered users and skipped for returning users.

As a frontend developer, implement the AssessmentsHero section for the Assessments page. Features a NeuralParticles sub-component that renders 48 animated particles on a 2D canvas using requestAnimationFrame — each particle has fractional x/y positions, velocity, radius, alpha, and pulse offset. Particles wrap around edges, render with radial gradient cyan glow (rgba 103,232,249), and draw connection lines between particles within a 0.13*width threshold at 0.12 alpha. Canvas resizes responsively via ResizeObserver with devicePixelRatio scaling. Hero text content uses framer-motion for fade/slide animations, includes ArrowRight and ChevronDown icons from lucide-react, and imports AssessmentsHero.css.

As a frontend developer, implement the AssessmentsCategoriesNav section for the Assessments page. Uses useState for activeCat ('all'), searchVal, filterOpen, scrolled, and activeFilters array. Three category tabs defined in CATEGORIES array (all/psychological/cognitive) with BarChart3, Heart, Brain icons and counts. FILTER_OPTIONS array with three filters (completed, incomplete, AI recommended). Features: sticky shadow via scroll detection (threshold 80px), outside-click and Escape-key handlers for filter dropdown using refs (dropdownRef, filterBtnRef, dropdownRef), useCallback for handleCategoryChange/handleSearchChange/toggleFilter/resetFilters, animated underline indicator tracking active tab position via setUnderlineStyle, AnimatePresence for filter dropdown, Search and SlidersHorizontal icons. Imports AssessmentsCategoriesNav.css.

As a frontend developer, implement the AssessmentsPsychological section for the Assessments page. Renders four AssessmentCard components from ASSESSMENTS array: PSS (10 min, smiley SVG), STAI (12 min, clipboard SVG), PSQI (8 min, moon/clock SVG), VAS (5 min, slider rect SVG). Each AssessmentCard uses useRef(cardRef), useState for tilt ({x,y}), glow ({x:50,y:50}), and hovered. handleMouseMove calculates 3D tilt angles from mouse position relative to card bounds and updates glow position; mouse leave resets tilt and glow. Cards animate with framer-motion using staggered entry (index-based delay). Inline SVG icons use as-psy-icon-svg class. Imports AssessmentsPsychological.css.

As a frontend developer, implement the AssessmentsCognitive section for the Assessments page. Renders four cognitive test cards from cognitiveTests array: TMT-A (Timer icon, ~5 min), TMT-B (Zap icon, ~7 min), N-Back (Brain icon, ~10 min), Reaction Time (Zap icon, ~4 min), all with color '#8B5CF6'. Uses useState(inView) triggered by IntersectionObserver (threshold 0.1) on sectionRef for scroll-triggered animations. cardVariants defines hidden/visible states with staggered delays (i*0.12) and cubic-bezier easing. handleMouseMove uses useCallback to read cardRefs.current[idx] bounding rect and set --mouse-x/--mouse-y CSS custom properties for spotlight effect; handleMouseLeave resets to 50%/50%. ArrowRight icon on each card. Imports AssessmentsCognitive.css.

As a frontend developer, implement the AssessmentsProgress section for the Assessments page. Features a ProgressRing sub-component (SVG with r=38, animated strokeDashoffset via setTimeout 200ms, CSS transition). TIMELINE_WEEKS array has 7 entries with status 'completed'/'upcoming'/'pending', scores, date labels, and assessment arrays. FREQUENCY_DATA bar chart (7 weeks, values 4/3/3/3/3/3/4). Stats: TOTAL_ASSESSMENTS=28, COMPLETED=12, PROGRESS_PCT=43%. Uses useState for selectedWeek and inView, IntersectionObserver for scroll trigger. Timeline renders with CheckCircle2, Clock, TrendingUp, BarChart3, CalendarDays icons from lucide-react. framer-motion animates week cards with staggered reveal. Imports AssessmentsProgress.css.

As a frontend developer, implement the AssessmentsRecommendations section for the Assessments page. Contains two Three.js sub-components via @react-three/fiber Canvas: NeuralLines (18 lineSegments with Float32Array positions/colors, 6-color palette of green/cyan/purple, useFrame animates rotation.y=sin(t*0.08)*0.15 and opacity 0.25±sin) and NeuralNodes (24 points with Float32Array positions/colors, 4-color palette, useFrame animates position offsets). Both use useMemo for geometry buffers. Outer component uses useRef+useInView (framer-motion, margin '-80px', once:true). Recommendation cards import Brain, Zap, TrendingUp, ArrowRight, Info, Sparkles, Activity, Target, Lightbulb from lucide-react. Imports AssessmentsRecommendations.css.

As a frontend developer, implement the AssessmentsCTA section for the Assessments page. Features a Three.js Canvas with NeuralParticles sub-component: 80 points distributed spherically (radius 2.2–4.6) using spherical coordinates (theta, phi), 5-color palette (cyan/light-cyan/purple/green/orange), useFrame rotates y=t*0.04 and x=sin(t*0.03)*0.08. Uses useInView (framer-motion, once:true, margin '-80px') on sectionRef. Animation variants: fadeUp (y:32→0, 0.7s), scaleIn (scale:0.88→1, delay 0.15s), staggerChildren (staggerChildren:0.14, delayChildren:0.3). TrustBadge sub-component renders icon+label pairs. Icons: ArrowRight, FileText, Shield, Award, Brain, Activity from lucide-react. Imports AssessmentsCTA.css.

As a frontend developer, implement the Footer section for the Assessments page. This component may already exist from Dashboard (task e1c30c24) or Onboarding (task 6dbe4a52). Renders ftr-aurora and ftr-glow decorative divs, a brand block with Brain icon (size 22, strokeWidth 2.2) and BODH-I logo text, tagline paragraph, and social links (Twitter, Linkedin, Github, Instagram from lucide-react). Three linkColumns: Product (Dashboard, AIInsights, AICompanion, Interventions), Assessments (Assessments, Progress, Reports, HighRiskSupport), About (Onboarding, Profile, Login). Legal links row (Privacy Policy, Terms of Service, Accessibility). Dynamic year via new Date().getFullYear(). Imports Footer.css.

As a frontend developer, implement the CognitiveLab_Hero section for the CognitiveLab page. This section features a Three.js 3D neural particle field rendered on a canvas (canvasRef) with PARTICLE_COUNT=60 spherical particles using MeshBasicMaterial in cyan/purple/amber HSL colors, dynamic connection lines (LineBasicMaterial, CONNECTION_DIST=0.45), mouse-tracking parallax via mouseRef, and a resize observer for responsive camera aspect ratio updates. The animation loop runs via animRef using requestAnimationFrame, with sceneDataRef holding scene state. Framer Motion is used for entrance animations. Three ASSESSMENT_CHIPS (Trail Making A & B, N-Back Test, Reaction Time) are rendered as colored dot badges. A progressPercent state drives a progress indicator. An ArrowRight (lucide-react) CTA button is included. Note: the Navbar component may already exist from the Assessments page (task f484e960-be8b-4709-a3fe-21282b75a0e0).

As a frontend developer, implement the CognitiveLab_TestGrid section for the CognitiveLab page. This section renders a grid of four TEST_CARDS (Trail Making A, Trail Making B, N-Back, Reaction Time) each with an accentColor, iconClass, iconPath SVG, difficulty badge (dotClass: tg-badge-dot-cyan/purple/green/amber), duration label, and description text. Framer Motion cardVariants animate cards in with staggered delay (i * 0.12s), opacity/y/scale transitions using cubic-bezier ease. hoverMotion variants provide hover lift effects. AnimatePresence and useInView (from framer-motion) control scroll-triggered reveal. Each card links to '/CognitiveLab' via href. State includes useState for hover/active tracking and useRef for inView detection.

As a frontend developer, implement the CognitiveLab_Results section for the CognitiveLab page. This section includes: (1) a React Three Fiber Canvas backdrop with a NeuralScene component rendering NeuralNodes (80-point BufferGeometry, pointsMaterial cyan, AdditiveBlending, useFrame rotation animation); (2) an animated GaugeRing SVG component (radius=50, circumference-based strokeDashoffset animation via Framer Motion, 1.4s spring ease, color classes cr-gauge-fill--good/average/attention based on score category); (3) result metric cards using lucide-react icons (Trophy, Clock, Target, Zap, Download, BarChart3, Activity, Brain, Gauge, TrendingUp, AlertCircle); (4) AnimatePresence for tab/panel transitions; (5) useMemo for position array generation; (6) imports GaugeRing.css and CognitiveLab_Results.css. Requires @react-three/fiber dependency.

As a frontend developer, implement the CognitiveLab_Recommendations section for the CognitiveLab page. This section renders six recommendation cards from the recommendations array, each with: a lucide-react icon (Brain, Activity, Lightbulb, Sparkles, ArrowRight, BookOpen, AlertTriangle, Target, Zap), a color variant (purple/cyan/green), urgency level (critical/high/medium/low) mapped to urgencyLabel badges (Priority/Recommended/Suggested/Insight), heading, description text, and an actionLabel CTA linking to internal hrefs (/Interventions, /Progress, /HighRiskSupport, /Calendar). Framer Motion useInView triggers staggered card entrance animations via useRef. useState manages expanded/active card state. RecommendationCard.css and CognitiveLab_Recommendations.css are imported for shared card and page-level styles respectively.

As a frontend developer, implement the ProfileHero section for the Profile page. Uses useState, useRef, and useMemo from React plus framer-motion's useMotionValue and useSpring for cursor-reactive 3D avatar tilt (springX/springY with stiffness:120, damping:18). Includes a Three.js @react-three/fiber Canvas with a NeuralParticles component rendering 40 floating cyan (#67E8F9) point particles using bufferGeometry, rotating via useFrame at 0.04 rad/s on Y-axis and sinusoidal X wobble. CursorAvatar component tracks mouse position relative to avatar bounds and applies rotateX/rotateY spring transforms to ph-avatar-ring. Renders breadcrumb (Home→/Dashboard, Profile→/Profile using lucide Home/User icons), userProfile data (name: Priya Sharma, email, initials PS, status: premium, streak: 12, joinedDate: March 2025), Crown/Flame/Zap badges, and a Pencil edit button.

As a frontend developer, implement the ProfilePersonal section for the Profile page. Renders a form with 6 FIELDS config entries (firstName, lastName, email, dateOfBirth, phone, institution) each with inline validation functions (regex email check, min-length name check, phone pattern check). Each field is wrapped in a FieldCard component using useRef and useState(mx/my) to track mouse position for CSS custom properties --mx/--my spotlight effect. FieldCard uses framer-motion with whileInView animation (opacity 0→1, y 16→0, duration 0.45s easeOut, once:true). Renders lucide icons (User, Mail, Phone, Calendar, Building2), inline error (AlertCircle) and success (CheckCircle2) states, and form-level Save/X action buttons with Sparkles accent. Manages INITIAL_VALUES state object and useCallback-based blur/change handlers.

As a frontend developer, implement the ProfileSecurity section for the Profile page. Uses useState, useCallback, useRef, useEffect from React with framer-motion AnimatePresence. Renders a TiltCard wrapper component applying perspective(800px) rotateX/rotateY tilt (±4deg) via mouse tracking with --mx/--my CSS vars. Displays SESSIONS_DATA (4 sessions: MacBook/Chrome as current, iPhone App, Windows/Firefox, iPad/Safari with Laptop/Smartphone/Monitor/Tablet lucide icons, location, lastActive). Renders LOGIN_HISTORY table (8 entries with date, IP, location, status success/failed using CheckCircle/XCircle icons). Includes a password change form with Lock/Shield/Key lucide icons, and a 2FA toggle section. AnimatePresence handles session revoke confirmation dialogs and expandable login history panel.

As a frontend developer, implement the ProfilePreferences section for the Profile page. Uses useState, useRef, useCallback with framer-motion AnimatePresence. Contains 5 NOTIFICATION_TOGGLES (email_reminders, assessment_alerts, intervention_notifications, insights_delivery, risk_alerts) each rendered via a MagneticToggle component. MagneticToggle uses trackRef and knobRef with onMouseMove setting --mouse-x/--mouse-y CSS custom properties for magnetic glow effect and framer-motion motion.button for the toggle track. Includes a language selector (6 LANGUAGES options), timezone dropdown (10 TIMEZONES options including auto-detect), and a theme toggle (Moon/Sun lucide icons) with ChevronDown custom dropdowns. AnimatePresence handles dropdown open/close animations. Renders a Save button with Check confirmation state.

As a frontend developer, implement the ProfileDataManagement section for the Profile page. Uses useState for filter (default 'all'), showDeleteModal, exportStatus (null/loading/success), showPrivacy, and privacyToggles ({shareAnalytics:true, shareResearch:false, publicProfile:false}). Renders ASSESSMENT_TYPES filter tabs (all/pss/stai/psqi/vas/cognitive) and filters ASSESSMENT_HISTORY (9 entries with PSS, STAI, PSQI, VAS, Trail Making, N-Back, Reaction Time records) accordingly. handleExport simulates async export with 1200ms timeout, sets exportStatus loading→success→null. showDeleteModal triggers a confirmation modal with framer-motion AnimatePresence. showPrivacy toggles to a full privacy controls view with ArrowLeft back button and 3 privacy toggle switches. Uses lucide icons: Download, Clock, AlertTriangle, Shield, ArrowLeft, CheckCircle, XCircle.

As a frontend developer, implement the ProfileActivity section for the Profile page. Renders 4 ACTIVITY_METRICS cards (47 assessments, 23 streak days, 19 interventions, -18% stress trend) using MetricCard components with useRef for --mx/--my mouse tracking CSS custom properties. Each MetricCard wraps an AnimatedValue component that uses IntersectionObserver (threshold: 0.4) to trigger a count-up animation over 1200ms in 30 steps via setInterval. TrendIcon renders ChevronUp/ChevronDown/Minus based on trend value with pa-trend-up/down/stable classes. framer-motion motion.div wraps each card with staggered entry animations. Uses lucide icons: ClipboardCheck, Flame, HeartPulse, TrendingUp, Calendar, Clock, Sparkles.

As a frontend developer, implement the Footer section for the Profile page. This component (likely already exists from previous pages) renders ftr-root with decorative ftr-aurora and ftr-glow pseudo-elements. Displays the BODH-I brand with Brain lucide icon (size:22, strokeWidth:2.2) and tagline text. Renders 4 social links (Twitter, Linkedin, Github, Instagram lucide icons) as ftr-social anchors. Maps 3 linkColumns (Product: Dashboard/AIInsights/AICompanion/Interventions; Assessments: Assessments/Progress/Reports/HighRiskSupport; About: Onboarding/Profile/Login) into ftr-col nav blocks. Renders legalLinks (Privacy Policy, Terms of Service, Accessibility) and dynamic copyright year via new Date().getFullYear(). Reuse existing Footer component if available from prior pages.

As a Tech Lead, verify end-to-end integration between the Dashboard frontend (DashboardWellnessIndex, DashboardMetricsGrid, DashboardProgressChart, DashboardAssessmentStatus, DashboardUpcomingEvents) and the Dashboard Summary backend API. Ensure the wellness index ring, metric sparklines, Chart.js progress chart, assessment status cards, and upcoming events all load from real API endpoints. Validate that data updates after a new assessment submission are reflected on dashboard refresh. Confirm the greeting and notification badge count are accurate.

As a Tech Lead, verify end-to-end integration between the Login/Signup frontend implementation (LoginForm, LoginSocial, SignupForm) and the Authentication backend API. Ensure Firebase ID tokens are correctly obtained client-side and sent to /auth/verify-token, user documents are created in MongoDB on signup, Google OAuth flow completes correctly, protected routes redirect unauthenticated users to /Login, and auth state persists across page refreshes via authStore. Test all three auth flows: email/password login, Google login, and new user signup with onboarding redirect.

As a frontend developer, implement the Navbar section for the AIInsights page. This component may already exist from the Assessments page (task f484e960). It uses useState for menuOpen and scrolled states, useEffect with a passive scroll listener to toggle the nv-scrolled class when window.scrollY > 8, and a burger button with aria-expanded for mobile menu toggling. NAV_LINKS array maps Features→/Dashboard, Assessments→/Assessments, About→/AIInsights. Renders nv-brand with animated nv-brand-pulse mark, desktop nv-links list, nv-actions with ghost Sign In and primary Sign Up CTAs, and a nv-mobile drawer with nv-mobile-open toggle. All mobile links call closeMenu on click. Reuse or adapt the existing Navbar.css (5555 chars) with nv-root, nv-inner, nv-scrolled, nv-burger, nv-open, nv-mobile, nv-mobile-open classes.

As a Tech Lead, verify end-to-end integration between Assessments frontend (AssessmentsPsychological, AssessmentsCognitive, DashboardAssessmentStatus) and the Assessments + Cognitive backend APIs. Ensure assessment responses are submitted correctly to /assessments/pss, /assessments/stai, /assessments/psqi, /assessments/vas, and cognitive endpoints, scores are computed and returned, the dashboard assessment status panel reflects real completion states, and the history list in the profile data management section is populated from the API.

As a Tech Lead, verify end-to-end integration between the Profile frontend (ProfileHero, ProfilePersonal, ProfilePreferences, ProfileSecurity, ProfileActivity, ProfileDataManagement) and the User Profile backend API. Ensure personal info form saves to /users/profile, notification toggles and preferences persist, activity metrics (assessments count, streak, interventions, stress trend) load from /users/activity, assessment history table in data management loads from /assessments/history, and account deletion flow calls the DELETE endpoint and redirects to /Login.

As a Tech Lead, verify end-to-end integration between the CognitiveLab frontend (CognitiveLab_Hero, CognitiveLab_TestGrid, CognitiveLab_Results, CognitiveLab_Recommendations) and the Cognitive Assessments backend API. Ensure TMT-A, TMT-B, N-Back, and Reaction Time test submissions are POSTed to their respective endpoints, computed scores and percentile comparisons are returned and rendered in CognitiveLab_Results, the gauge ring reflects real composite cognition scores, and recommendation cards are populated based on actual cognitive performance. Validate that completed cognitive assessments update the DashboardAssessmentStatus panel.

As a frontend developer, implement the AIInsightsHero section for the AIInsights page. This is a 3D-enhanced hero using @react-three/fiber Canvas with two custom Three.js components: GlowField (40 animated points using useRef meshRef, Float32Array positions/sizes/speeds/opacities computed via useMemo, useFrame animating sinusoidal drift per particle, pointsMaterial with color #67E8F9, blending=2, sizeAttenuation) and PulseRings (3 ring meshes in a group, each with ringGeometry at radii 1.2/2.8/4.4, useFrame pulsing scale via Math.sin and animating material opacity). The 2D overlay uses framer-motion motion components with useInView and useAnimation hooks for entrance animations, lucide-react ArrowRight and Sparkles icons for CTA and decorative elements. Implement AIInsightsHero.css (4049 chars) for layout, gradient text, and Canvas positioning.

As a frontend developer, implement the StressPredictionGauge section for the AIInsights page. Uses a rich GAUGE_DATA object (currentStress: 67, trend: 'up', trendLabel, contextLabel, previousWeek: 59, forecast: 64, highRiskThreshold: 75, riskBands array with Low/Moderate/High color thresholds). Renders a @react-three/fiber Canvas with GaugeRing component: 120-particle ring (Float32Array positions/colors mapped via useMemo to stressColor derived from getStressLevel), ringRef/glowRef/particlesRef animated via useFrame with mouse-tracking rotation (mousePos.x * 0.3, mousePos.y * 0.15), custom shader uniforms uArc and uTime. Uses framer-motion AnimatePresence for animated value transitions, lucide-react icons Gauge, AlertTriangle, TrendingUp, TrendingDown, Minus, Shield for trend and risk indicators. useState manages progress animation and mouse position; useCallback and useMemo optimize derived stress color and particle geometry. Implement StressPredictionGauge.css (7466 chars).

As a frontend developer, implement the SHAPExplainability section for the AIInsights page. Renders SHAP_DATA array of 8 features (Sleep Quality PSQI +0.38, Academic Workload +0.29, Social Engagement -0.22, Cognitive Load N-Back +0.19, Physical Activity -0.17, Screen Time +0.14, Mindfulness Minutes -0.13, Caffeine Intake +0.09) as animated horizontal bar charts. Uses framer-motion barVariants with custom delay (i * 0.1) and cubic-bezier ease [0.22, 0.61, 0.36, 1] for width animation, plus a @react-three/fiber Canvas using THREE from 'three' for a decorative 3D background element. useState manages selected feature for detail panel expansion; useRef for intersection-triggered entrance; useMemo for sorted/processed SHAP data. lucide-react Sparkles and TrendingUp icons used in header. Positive impact bars render in warm color, negative in cool/green. Implement SHAPExplainability.css (7318 chars).

As a frontend developer, implement the WellnessMetrics section for the AIInsights page. Renders METRICS array of 4 cards: Sleep Score (82/100, wm-val-positive, sparkline [72,70,74,76,78,80,82]), Cognition Index (68/100, wm-val-neutral, sparkline [64,63,66,65,67,68,68]), Anxiety Level (47/80, wm-val-caution, STAI-Y, sparkline [55,53,52,50,49,48,47]), Engagement Rate (91%, wm-val-positive, sparkline [80,82,85,84,87,89,91]). Implements TrendArrow helper component rendering ↑/↓/→ with wm-trend-up/down/stable classes. Implements Sparkline SVG component using useMemo to compute SVG path data: maps point values to x/y coordinates with padX=0 padY=6 within 100×48 viewBox, generates lineD (M/L commands) and areaD (closed fill path) strings, plus a dot at the last data point. Uses framer-motion motion for card entrance animations. Implement WellnessMetrics.css (7609 chars).

As a frontend developer, implement the RecommendationsPanel section for the AIInsights page. Renders 4 recommendation cards from the recommendations array: Guided Interventions (Brain icon, href /Interventions), Adjust Sleep Window (Moon icon, href /Progress), Social Connection (Users icon, href /Calendar), Mindfulness Practice (Wind icon, href /Assessments). Uses useRef sectionRef with IntersectionObserver (threshold: 0.12) to trigger framer-motion useAnimation controls.start('visible'). Implements containerVariants with staggerChildren: 0.14 and delayChildren: 0.1, and cardVariants with hidden {opacity:0, y:42, scale:0.97} → visible {opacity:1, y:0, scale:1} at duration 0.55 cubic-bezier [0.25, 0.46, 0.45, 0.94]. Decorative rp-bg-glow div, rp-eyebrow with dot indicator, rp-title with rp-title-accent span, rp-subtitle, and rp-grid motion.div. Implement RecommendationsPanel.css (6445 chars).

As a frontend developer, implement the Footer section for the AIInsights page. This component may already exist from Dashboard (e1c30c24) or Assessments (b149b85b) pages. Renders ftr-root with ftr-aurora and ftr-glow decorative divs, ftr-brand block containing Brain icon (lucide-react, size 22), BODH-I logo text, tagline paragraph, and ftr-socials row with Twitter/Linkedin/Github/Instagram icons (lucide-react, size 20). Three linkColumns: Product (Dashboard, AI Insights, AI Companion, Interventions), Assessments (Assessments, Progress, Reports, High-Risk Support), About (Onboarding, Profile, Login). legalLinks array (Privacy Policy, Terms of Service, Accessibility) all linking to /Profile. Year computed via new Date().getFullYear(). Implement Footer.css (4912 chars) with ftr-root, ftr-inner, ftr-top, ftr-col, ftr-link, ftr-social classes.

As a frontend developer, implement the InterventionsHero section for the Interventions page. This section features a full-screen hero with a canvas-based NeuralParticles background rendered via requestAnimationFrame. The particle system initializes 80 particles with a 4-color palette (cyan, light cyan, purple, green), draws connection lines between nearby particles (maxDist=130) with alpha falloff, and applies sinusoidal pulsing to each particle's radius to simulate breathing. The canvas handles DPR scaling and ResizeObserver. The foreground uses framer-motion for entrance animations. Note: Navbar component likely already exists from AIInsights page.

As a frontend developer, implement the InterventionsModes section for the Interventions page. This section renders three selectable session mode cards (4min Quick Reset, 6min Balanced Session, 8min Deep Immersion) sourced from a MODES config array with Lucide icons (Zap, Brain, Heart). State hooks manage selectedMode and confirmedMode. Card click sets selectedMode; a Confirm button triggers handleConfirm which updates confirmedMode and smooth-scrolls to the .in-slot-breathingsession element. A handleDismiss clears selection. Framer-motion cardVariants animate each card in with staggered delay (0.12s per card, y:40→0). AnimatePresence handles confirmation panel transitions. Header uses headerVariants (y:20→0).

As a frontend developer, implement the SessionTracking section for the Interventions page. This section includes a @react-three/fiber Canvas rendering a SessionGlowRing (torusGeometry + sphereGeometry with purple/cyan emissive materials, animated rotation and opacity in useFrame). A custom useAnimatedCounter hook drives eased counting animations (cubic ease-out) triggered by IntersectionObserver on sectionRef. State tracks emotionRating (1-5 stars) and hoveredStar for the star rating UI using a custom StarIcon SVG component. An animated boolean state triggers counter animations on viewport entry. framer-motion AnimatePresence handles card reveal transitions. Stat cards display session metrics with animated counter values.

As a frontend developer, implement the InterventionGuides section for the Interventions page. This section renders an accordion UI driven by a GUIDES config array with three entries: 'how' (Brain icon), 'when' (Clock icon), and 'benefits' (TrendingUp icon). State hook openId (default 'how') controls which accordion panel is expanded. toggleGuide sets openId to the clicked id or null if already open. Each accordion item uses framer-motion AnimatePresence with accordionVariants (collapsed: height 0 / opacity 0, expanded: height auto / opacity 1) and accordionTransition (0.4s cubic ease). Each expanded panel shows description text, a numbered steps list, and benefit badge chips. A ChevronDown icon rotates on open state.

As a frontend developer, implement the InterventionCTA section for the Interventions page. This section uses a custom useScrollReveal hook backed by IntersectionObserver (threshold 0.15, rootMargin '-40px') that tracks visibleElements state for staggered reveal classes (icta-reveal, icta-reveal--visible, icta-reveal--delay-1). State hooks calendarHovered and reminderHovered drive hover effects on two CTA buttons. handleAddToCalendar navigates to '/Calendar' via window.open and handleSetReminders navigates to '/Onboarding'. The layout features an animated gradient background div, three floating orb divs (cyan, purple, green), a BENEFITS array rendered as a checklist, and Calendar/Bell Lucide icons on the respective CTA buttons. A decorative icta-card-bottom-line gradient line sits at the card bottom.

As a frontend developer, implement the Navbar section for the Progress page. This component may already exist from previous pages (AIInsights, Assessments, Interventions). It uses useState for menuOpen and scrolled states, useEffect to attach a passive scroll listener that sets scrolled when window.scrollY > 8, and renders a header with class nv-root/nv-scrolled. Includes nv-brand with animated pulse mark, nv-links mapping NAV_LINKS (Features→/Dashboard, Assessments→/Assessments, About→/AIInsights), nv-actions with Sign In (ghost) and Sign Up (primary) buttons, a burger button with aria-expanded toggling nv-open, and a mobile drawer (nv-mobile/nv-mobile-open) with closeMenu handler. Reuse existing Navbar.css.

As a Tech Lead, verify end-to-end integration between the AIInsights frontend (StressPredictionGauge, SHAPExplainability, WellnessMetrics, RecommendationsPanel) and the ML Stress Prediction + Wellness Recommendations backend APIs. Ensure the stress gauge renders the real predicted score from /ai/insights, SHAP bars reflect actual feature importances from /ai/shap, wellness metrics pull from /ai/wellness-metrics, and recommendation cards link to correct internal routes. Validate that post-assessment triggering of predictions works end-to-end.

As a Tech Lead, verify end-to-end integration between assessment submission flows and the ML Stress Prediction pipeline. Ensure that after a user completes all required assessments (PSS, STAI, PSQI, VAS, and cognitive scores), the frontend triggers POST /ai/predict-stress with the combined feature vector, the Gradient Boosting Regressor model returns a predicted stress score and confidence interval, SHAP values are computed and stored, and the AIInsights page displays updated predictions. Validate that the risk classification logic correctly flags users as high-risk when PSS > 28 or predicted_stress > 75, and that the HighRiskSupport page banner reflects the updated risk level.

As a frontend developer, implement the BreathingSession section for the Interventions page. This is the most complex section, featuring a @react-three/fiber Canvas rendering a BreathingSphere component with outerRef, innerRef, ringRef, particlesRef, and glowRef meshes animated in useFrame. The sphere scales between 1.25 (Inhale), 0.75 (Exhale), and 1.0 (Hold) phases using lerp interpolation. Four box breathing PHASES (Inhale/Hold/Exhale/Hold2, each 4s) cycle via setInterval logic with phaseIdx and phaseProgress state. SOUND_OPTIONS (ocean, rain, forest) use Lucide icons (Waves, CloudRain, Trees). Play/Pause/Square/CheckCircle controls from Lucide manage isActive and isPaused state. TOTAL_CYCLE_MS is computed from PHASES array. AnimatePresence handles completion overlay transitions.

As a frontend developer, implement the ProgressHeader section for the Progress page. Uses useState for activeWeek (default 1), startDate ('2026-01-05'), and endDate ('2026-02-23'). Renders accent glow divs (prh-glow, prh-glow-secondary), a breadcrumb nav mapping BREADCRUMB array with ChevronRight separators from lucide-react, and a prh-content row. Title (motion.h1) and subtitle (motion.p) use framer-motion entry animations (opacity 0→1, y 16→0 and y 12→0) with staggered delays (0s and 0.12s). A prh-filters motion.div (delay 0.2s) contains a WEEKS array week-range selector (7 items, activeWeek state toggling active class) and date inputs pre-filled with startDate/endDate using the Calendar icon from lucide-react. Imports ProgressHeader.css.

As a frontend developer, implement the ProgressWellnessIndex section for the Progress page. Implements two custom hooks: useAnimatedValue (uses framer-motion animate to count from 0 to target with cubic-bezier ease, controlled duration/delay) and useMoodBarWidths (setTimeout to set CSS width strings after a delay). WELLNESS_DATA contains score 78, trend +5, category 'Moderate-High', 12 assessments, 4 moodDistribution entries (Stressed 18%, Anxious 30%, Calm 35%, Energized 17%). Renders an SVG circular progress ring using CIRCUMFERENCE = 2π×100 and strokeDashoffset calculated from score ratio. Heart icon (lucide-react, fill='currentColor') in header, TrendingUp/TrendingDown badge toggled by trendUp boolean. Mood distribution renders horizontal bars with animated widths transitioning from 0% via CSS. Uses motion.div with whileInView (once: true, margin -40px) entry animation. Imports ProgressWellnessIndex.css.

As a frontend developer, implement the ProgressTrendCharts section for the Progress page. Contains two datasets: STRESS_DATA (7 weeks PSS scores 26→14) and SLEEP_DATA (7 weeks PSQI scores 9→4). Implements a StressLineChart sub-component with MARGIN={top:20,right:24,bottom:32,left:36}, xScale/yScale via useCallback, useMemo-built SVG line path (M…L commands) and area fill path, PSS_MAX=40. Implements a SleepLineChart with PSQI_MAX=21 and PSQI_THRESHOLD=5 threshold line. Both charts use shared tooltip state (INITIAL_TOOLTIP with visible/x/y/data/type), mouse event handlers on SVG for hover detection, and AnimatePresence tooltip overlays. Tab switcher toggles between Stress (Activity icon) and Sleep (Moon icon) charts. stressLabel() and sleepLabel() helpers format interpretations. Chart width/height driven by containerRef resize. Uses framer-motion for chart entrance and AnimatePresence for tooltip fade. Imports ProgressTrendCharts.css.

As a frontend developer, implement the ProgressMetricsGrid section for the Progress page. Renders 4 metric cards from METRICS array: stress (Brain icon, cyan #06B6D4, PSS 18.4/40), sleep (Moon icon, purple #8B5CF6, PSQI 6.2/21), cognition (Zap icon, green #10B981, composite 82.5%), anxiety (AlertTriangle icon, amber #F59E0B, STAI 36.0/80). Each card includes a MiniSparkline SVG sub-component: pathRef with stroke-dasharray animation using useMemo to compute total path length from point segments, drawn state toggled via useEffect IntersectionObserver, stepX/pts computed from data array, area fill path below line. Cards also show trend badge (TrendingUp/TrendingDown/Activity icon based on trend field), trendLabel, interpretation text revealed on expand via AnimatePresence. Card hover uses whileHover scale. Uses framer-motion staggered whileInView entry for grid. Imports ProgressMetricsGrid.css.

As a frontend developer, implement the ProgressAssessmentHistory section for the Progress page. ASSESSMENTS array has 20 entries (18 completed, 2 pending) spanning PSS, STAI, PSQI, N-Back, Trail Making, Reaction Time, VAS. Uses useState showAll (default false) to toggle between INITIAL_SHOW=8 rows and full list. Computes completedCount, pendingCount, and remaining count. Rows use motion.custom with rowVariants (hidden: opacity 0, x -12; visible: opacity 1, x 0 with i*0.04 stagger delay). Each row shows date, assessment name, score, and a status badge (CheckCircle2 for completed, Clock for pending from lucide-react). AnimatePresence wraps the expand/collapse transition. A 'Show X more' / 'Show less' toggle button uses ChevronDown/ChevronRight icons. Header includes ClipboardCheck icon and BarChart3 summary stats. Imports ProgressAssessmentHistory.css.

As a frontend developer, implement the ProgressInterventionTimeline section for the Progress page. Renders 7 TIMELINE entries (Week 1–7) as an alternating left/right timeline. Each TimelineNode sub-component uses useRef + useInView (framer-motion) with once:true to trigger entrance. Even-indexed nodes animate with slideLeft variant (x: -40→0), odd-indexed with slideRight (x: 40→0), and a central connector uses slideUp (y: 30→0). Each node shows: week label, date, icon component (Brain/Wind/MessageCircle/Bell/CalendarCheck/Heart/Sparkles from lucide-react) with iconClass color modifier (purple/cyan/green/amber), label, desc, and meta string. The vertical timeline spine connects nodes with CSS pseudo-elements. transition uses cubic-bezier [0.22, 1, 0.36, 1] with 0.65s duration. Imports ProgressInterventionTimeline.css.

As a frontend developer, implement the ProgressActionCTA section for the Progress page. Contains a Three.js/React Three Fiber NeuralParticles sub-component: 40 particles with Float32Array positions and vertexColors, pointsMaterial (size 0.08, sizeAttenuation, transparent opacity 0.55, AdditiveBlending=2), useFrame animates groupRef rotation (y: t*0.04, x: sin(t*0.03)*0.08). Canvas wrapper renders the 3D particle field as background. NotificationBadge sub-component uses useRef and useEffect to add mousemove listener computing dx/dy from getBoundingClientRect center, applying translate(tx,ty) with maxMove=6 and dynamic boxShadow glow based on cursor distance. CTA buttons include 'Schedule Next Session' (Calendar icon), 'Download Report' (FileDown icon), and 'Get AI Recommendations' (Sparkles icon) with ArrowRight. framer-motion entry animations on heading and button group. Imports ProgressActionCTA.css.

As a frontend developer, implement the Footer section for the Progress page. This component may already exist from previous pages (Assessments, AIInsights). Renders ftr-root with ftr-aurora and ftr-glow decorative divs. Brand column includes Brain icon (lucide-react, size 22, strokeWidth 2.2) with ftr-logo-mark, 'BODH-I' text, tagline paragraph, and social links row mapping socials array (Twitter, Linkedin, Github, Instagram icons). Three linkColumns (Product, Assessments, About) rendered as ftr-col with h3 titles and anchor lists. Legal links row (Privacy Policy, Terms of Service, Accessibility) and copyright with dynamic year via new Date().getFullYear(). Reuse existing Footer.css.

As a frontend developer, implement the CalendarHeader section for the Calendar page. This section renders a two-row header: a top row with an 'h1' title ('Schedule & Reminders'), ChevronLeft/ChevronRight navigation buttons wired to `goPrev`/`goNext` handlers that handle month/year rollover, a `motion.span` with `key={month}-${year}` that animates `opacity` and `y` on month change (duration 0.2s, easeOut), and a 'Today' button calling `goToday`. The bottom row contains a week/month view toggle using `view` state and a filter pill row with FILTERS array (all, assessments, interventions, reminders, sessions) tracked by `activeFilter` state. All state is managed via `useState` hooks: `month`, `year`, `view`, `activeFilter`. Uses `useMemo` for the initial `now` date. Imports from `framer-motion` (motion) and `lucide-react` (ChevronLeft, ChevronRight). Note: Navbar component may already exist from the Progress page (task 7cf38fdc-c410-41d2-9882-b21f1535b14d).

As a frontend developer, implement the CalendarGrid section for the Calendar page. This is a complex interactive calendar grid component using `useState` (month, year, selectedDay, hoveredDay), `useMemo` (buildCalendarGrid), and `useCallback`. It includes `buildCalendarGrid` helper that computes a full 6-row grid including leading/trailing outside-month days using `getDaysInMonth` and `getFirstDayOfMonth`. Events are seeded from EVENT_TEMPLATES (12 entries: PSS, STAI, PSQI, VAS, N-Back assessments; Box Breathing, Guided Meditation, Cognitive Reframe, Body Scan interventions; Morning/Evening/Weekly check-ins) and distributed across calendar days. Each day cell shows colored event chips by type (assessment, intervention, checkin). `AnimatePresence` and `motion` are used for day cell hover/selection animations. Navigation via ChevronLeft/ChevronRight updates month/year with rollover. DAYS_OF_WEEK header row rendered. Selected day highlights and shows an expanded event detail panel. Event status badges (upcoming, pending, completed) are rendered per event chip.

As a frontend developer, implement the UpcomingSessions section for the Calendar page. This section renders a staggered animated list of 6 upcoming session cards from SESSIONS_DATA (PSS, Guided Box Breathing, Weekly Mood Check-in, STAI, Progressive Muscle Relaxation, PSQI) using `motion` with `containerVariants` (staggerChildren: 0.08, delayChildren: 0.1) and `cardVariants` (opacity 0→1, y 28→0, cubic-bezier easing). Each card shows type icon (ClipboardList for assessment, HeartPulse for intervention, MessageCircle for checkin from lucide-react), title, description, date (Calendar icon), time (Clock icon), duration (Hourglass icon), and status badge. Cards have inline action buttons: CheckCircle2 (complete — filters card out of `sessions` state), Pencil (edit — toggles `editingId` state), Trash2 (delete — filters card out), and ArrowRight (start session). `AnimatePresence` wraps the list to animate card removal. `editingId` state tracks which card is in edit mode. CalendarX2 icon used for empty state.

As a frontend developer, implement the ReminderSettings section for the Calendar page. This section renders a `motion.div` card with `whileInView` entrance animation (opacity 0→1, y 24→0, viewport once with -80px margin). It contains: a Bell icon header with title and subtitle; REMINDER_TYPES toggle rows (assessments, interventions, checkins) using animated toggle switches driven by `toggles` state object — each row shows label, desc, and an on/off pill toggle calling `handleToggle`; a notification method selector with NOTIFICATION_METHODS pills (In-App, Email, SMS) tracked by `notificationMethod` state; a timing selector with TIMING_OPTIONS (1 Day Before, 1 Hour Before, At Scheduled Time) tracked by `timing` state; a custom reminder input field with `customInput` state, `handleAddCustom` and `handleKeyDown` (Enter key) handlers, and a `customReminders` array rendered as dismissible chips with X (lucide-react) buttons calling `handleRemoveCustom`; an `activeReminders` derived array showing currently enabled reminder types. Uses `AnimatePresence` for custom reminder chip enter/exit animations.

As a frontend developer, implement the Navbar section for the AICompanion page. This component uses useState for menuOpen and scrolled states, and useEffect to attach a passive scroll listener that toggles the nv-scrolled class when window.scrollY > 8. Renders a header with nv-root/nv-scrolled classes, a brand mark with nv-brand-pulse animation, NAV_LINKS array mapping to Features(/Dashboard), Assessments(/Assessments), About(/AIInsights), desktop nv-actions with Sign In(/Login) and Sign Up(/Onboarding) CTAs, and a three-span hamburger button toggling nv-burger/nv-open. Mobile drawer uses nv-mobile/nv-mobile-open classes with closeMenu callback. Note: this Navbar component likely already exists from previous pages (AIInsights, Interventions, Progress, Calendar) — reuse if available. Depends on Calendar page tasks to establish page chain.

As a Tech Lead, verify end-to-end integration between the Interventions frontend (BreathingSession, SessionTracking) and the Interventions backend API. Ensure completed box breathing sessions are POSTed to /interventions/breathing-session with correct phase data and mood ratings, session tracking stats display real aggregated data from /interventions/history, and post-session emotion ratings are persisted. Confirm mood delta calculations match between frontend display and backend computation.

As a Tech Lead, verify end-to-end integration between the Progress frontend (ProgressWellnessIndex, ProgressMetricsGrid, ProgressTrendCharts, ProgressInterventionTimeline, ProgressAssessmentHistory) and the Progress & Longitudinal backend API. Ensure the wellness index ring reflects the real composite score, sparklines and trend charts render 7-week historical data, the intervention timeline aligns with actual session records, and the assessment history table is paginated correctly from the API.

As a frontend developer, implement the AICompanionHero section for the AICompanion page. This section renders a full 3D neural brain visualization using @react-three/fiber Canvas with a NeuralBrain component containing: an outerRef icosahedron wireframe mesh (args=[1.8,2]) with cyan emissive, an innerRef sphere core (args=[1.35,48,48]) with purple emissive and oscillating emissiveIntensity, ringARef and ringBRef animated torus rings, and a nodesRef group of 18 randomly positioned sphere nodes across 5 colors (#06B6D4, #8B5CF6, #10B981, #F59E0B, #67E8F9). useFrame drives continuous rotation and breathing animations. nodePositions and connections are computed with useMemo. Hero overlay uses framer-motion with stat badges for Brain, ShieldCheck, TrendingUp icons from lucide-react, headline text, Sparkles/MessageCircle/Zap/ArrowRight icons, and hover state managed via useState hovered. Depends on Navbar.

As a frontend developer, implement the ChatInterface section for the AICompanion page. This section features a fully interactive chat UI with: INITIAL_MESSAGES array of 5 realistic SRD-contextual exchanges (PSQI scores, Box Breathing, Trail Making Test B references), MessageBubble component using framer-motion spring animation (stiffness:380, damping:28) with layout prop and AnimatePresence, a TypingIndicator with kinetic framer-motion dots, MOOD_OPTIONS array of 5 emoji moods (Stressed/Neutral/Okay/Good/Great), QUICK_PROMPTS array of 5 suggestion chips, useState for messages, inputValue, isTyping, and selected mood, useEffect for auto-scroll via scrollRef, Send/Smile/MoreVertical/Info lucide icons in the input toolbar, and formatTime() helper generating locale time strings. Depends on Navbar.

As a frontend developer, implement the RecommendationsPanel section for the AICompanion page. This section combines a Three.js NeuralParticles background (60 particles, Float32Array positions/velocities/colors, palette of 4 RGBA sets, useFrame boundary-bouncing animation with sine/cosine drift) rendered via @react-three/fiber Canvas, with a MagneticCard wrapper component using useMotionValue, useSpring (stiffness:180, damping:18) for cursor-reactive magnetic tilt via handleMouseMove. Recommendation cards use Brain, Moon, Users, Wind lucide icons. useAnimation, useCallback, useRef, and useMemo are all imported for card interactivity and particle system. Depends on Navbar.

As a frontend developer, implement the SessionHistory section for the AICompanion page. This section renders a filterable list of 6 past AI companion sessions from SESSION_DATA array, each with id, date, time, duration, topic, topicIcon (Zap/Moon/Heart/Brain/Activity from lucide-react), summary text referencing PSQI/Box Breathing/TMT-B/Pomodoro content, status, and messageCount. TOPIC_ICONS map and FILTER_OPTIONS array drive the filter bar. useState manages selected filter and expanded session cards. useCallback wraps filter handler. useRef and useEffect manage scroll behavior. framer-motion animates card expansion with layout animations. Calendar, Clock, Tag, ArrowRight, MessageCircle, Filter icons used throughout. Depends on Navbar.

As a frontend developer, implement the WellnessInsights section for the AICompanion page. This section imports both AnimatedNumber.css and WellnessInsights.css and uses a custom useAnimatedCounter hook (requestAnimationFrame with cubic ease-out over 1800ms via startRef/frameRef). Chart.js is registered with CategoryScale, LinearScale, PointElement, LineElement, Filler, Tooltip and Line charts from react-chartjs-2 render sparklines. The metrics array defines 4 cards: Stress(62%, amber, down -8%), Sleep(74%, cyan, up +5%), Anxiety(48%, purple, down -12%), Mood(81%, green, up +9%) — each with barHeights[7], sparkData[7], sparkColor, cardClass, and progressColor. TrendingUp/TrendingDown/Minus/Brain/Moon/Activity/Smile/Sparkles/Download/ArrowRight lucide icons used. AnimatePresence and motion drive card entrance. useState/useEffect/useRef manage animation lifecycle. Depends on Navbar.

As a frontend developer, implement the CTASection for the AICompanion page. This section features a Three.js NeuralParticles background (80 particles, spherically distributed Float32Array positions/colors using palette of 4 RGB triplets, useFrame rotating ref.current.rotation.y at t*0.04 with sine x-tilt). FEATURE_CARDS array of 4 cards links to /Assessments, /Interventions, /Progress, /Reports with ClipboardCheck, HeartPulse, TrendingUp, FileText lucide icons. FeatureCard component uses cardRef and handleMouseMove for cursor-reactive glow effect. framer-motion motion.div wraps cards with index-based stagger. useState/useEffect/useRef/useMemo manage particle geometry and cursor tracking. Canvas renders the 3D background layer. Depends on Navbar.

As a frontend developer, implement the Footer section for the AICompanion page. This static Footer renders ftr-root with ftr-aurora and ftr-glow decorative divs, a Brain lucide icon (size=22, strokeWidth=2.2) brand logo with BODH-I text and tagline about AI-powered mental wellness, social links for Twitter/Linkedin/Github/Instagram (all href='/Dashboard') using lucide-react icons, and three linkColumns: Product (Dashboard, AIInsights, AICompanion, Interventions), Assessments (Assessments, Progress, Reports, HighRiskSupport), About (Onboarding, Profile, Login). legalLinks array renders Privacy Policy, Terms of Service, Accessibility. Dynamic year via new Date().getFullYear(). Note: this Footer component likely already exists from previous pages — reuse if available. Depends on Navbar.

As a frontend developer, implement the Navbar section for the Reports page. This component (likely already exists from AICompanion and other pages) uses useState for menuOpen and scrolled states, useEffect with a passive scroll listener to toggle the nv-scrolled class when scrollY > 8, and renders a responsive header with nv-brand (BODH-I logo with nv-brand-pulse animation), NAV_LINKS mapped to nv-link anchors (Features→/Dashboard, Assessments→/Assessments, About→/AIInsights), nv-actions with Sign In and Sign Up buttons, a hamburger nv-burger button with aria-expanded, and a nv-mobile drawer with nv-mobile-open toggling. Import from '../styles/Navbar.css'. Reuse existing Navbar component if already implemented from prior pages.

As a Tech Lead, verify end-to-end integration between the Calendar frontend (CalendarGrid, UpcomingSessions, ReminderSettings) and the Calendar & Reminders backend API. Ensure calendar events load from /calendar/events for the selected month/week, event creation and status updates persist correctly, the upcoming sessions panel reflects real scheduled data, and reminder preferences are saved and retrieved from /calendar/reminder-settings.

As a Tech Lead, verify end-to-end integration between the DashboardHeader notification badge and Calendar ReminderSettings frontend components and the Notifications & Reminders backend API. Ensure the notification count in DashboardHeader reflects real unread notifications from /notifications/pending, reminder preferences saved in ReminderSettings are persisted via /calendar/reminder-settings and drive notification scheduling, and notification records are created correctly when reminder thresholds are crossed for scheduled calendar events.

As a frontend developer, implement the ReportsHeader section for the Reports page. Uses useState for activeRange ('month' default) toggled by DATE_RANGES buttons (week/month/all) with aria-pressed and rh-range-active class. Renders a decorative rh-aurora accent bar, an rh-eyebrow with animated dot, an h1 with rh-title-accent span for 'Reports', and an rh-subtitle paragraph. Maps REPORT_TYPES (Assessment Trends with TrendingUp icon, Cognitive Lab with Brain icon in purple variant, Stress & Mood with Activity icon in green variant, Intervention History with HeartPulse icon in amber variant) into rh-type-card components with conditional rh-type-{variant} icon classes. Import lucide-react icons (Calendar, TrendingUp, Activity, ShieldAlert, Brain, HeartPulse) and '../styles/ReportsHeader.css'.

As a frontend developer, implement the ReportsMetricsSummary section for the Reports page. Renders 4 METRICS cards (stress, sleep, cognition, mood) each with a custom SVG SparkLine component that computes polyline points from sparkline arrays using min/max normalization in a 90x36 viewBox with rms-spark-line--{colorKey} class. Cards use useRef array (cardsRef) and useCallback handlers (handleCardMove, handleCardLeave) to set CSS custom properties --mouse-x and --mouse-y for interactive spotlight hover effects. Each card displays a lucide icon (Brain, Moon, Zap, Smile), value with unit, trend badge with TrendIcon map (TrendingUp/TrendingDown/Minus for up/down/neutral), change percentage, and trendLabel. Wrapped in framer-motion for entrance animations. Import '../styles/ReportsMetricsSummary.css'.

As a frontend developer, implement the ReportsAssessmentTrends section for the Reports page. Registers Chart.js modules (CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, Filler) via ChartJS.register. Renders 4 ASSESSMENTS (PSS, STAI, PSQI, VAS) each with a react-chartjs-2 Line chart displaying dual datasets (primary + secondary lines) over WEEK_LABELS (Week 1–7) with gradient fills and custom primaryColor/secondaryColor per assessment. Uses useState for selected assessment tab, useRef for chart instances, useEffect for chart animations, and AnimatePresence from framer-motion for card transitions. Each assessment card shows rat-card-icon--{id} icon class, score range, threshold-based trendLabel (e.g. 'Low stress'/'Elevated'/'Moderate'), and getTrend direction computed from first vs last data point. Import '../styles/ReportsAssessmentTrends.css'.

As a frontend developer, implement the ReportsCognitiveLab section for the Reports page. Renders 4 COGNITIVE_TESTS (Trail Making A, Trail Making B, N-Back 2-Back, Reaction Time) each with inline bar charts built from chartBars arrays (You/Avg/Best bars with #10B981/#9CA3AF/#67E8F9 colors and rcl-chart-bar--{performance} class). Each card uses PERF_LABELS map (above/average) to apply badge classes (rcl-badge--above, rcl-badge--average), card color classes (rcl-card--above, rcl-card--average), and progress fill classes. Displays completionTime with timeUnit, accuracy percentage with animated progress bar (rcl-progress-fill--{performance}), baseline comparison text (rcl-baseline-text--above/average), and lucide icons (Brain, Zap, Timer, Activity, TrendingUp, TrendingDown). Uses useState for active test selection, useRef and useEffect for bar chart entrance animations, and framer-motion for card transitions. Import '../styles/ReportsCognitiveLab.css'.

As a frontend developer, implement the ReportsStressTimeline section for the Reports page. Renders a 7-week interactive stress heatmap using STRESS_DATA (49 data points with stress 0–100, predicted flag, and factors object with sleep/academic/personal sub-scores). Uses useState for selectedWeek, hoveredCell, and viewMode; useMemo to compute filtered/aggregated week data; useRef and useEffect for canvas or DOM-based heatmap rendering; useCallback for cell hover/click handlers. DAY_LABELS (Mon–Sun) form columns, WEEKS (Week 1–7) form rows. Predicted data points render with dashed/distinct styling. Clicking a cell shows a tooltip/popover with factor breakdown (sleep, academic, personal stress contributors). Uses framer-motion for tooltip animations and week transition effects. Import '../styles/ReportsStressTimeline.css'.

As a frontend developer, implement the ReportsInterventionHistory section for the Reports page. Renders 12 INTERVENTIONS with useState for activeFilter ('all' default) and expandedId for accordion expansion. TYPE_FILTERS (all/breathing/chatbot/exercise) filter the list via useMemo. Each intervention card shows date, type icon (Wind for breathing, MessageCircle for chatbot, Dumbbell for exercise), duration, moodBefore→moodAfter delta with TrendingUp/TrendingDown/Minus icons, and an expandable notes section using AnimatePresence and ChevronDown rotation. Adherence stats computed from filtered data (total sessions, avg mood delta, most used type). Displays Archive icon when no interventions match filter. Import lucide-react (ChevronDown, Wind, Dumbbell, MessageCircle, TrendingUp, TrendingDown, Minus, Archive) and '../styles/ReportsInterventionHistory.css'.

As a frontend developer, implement the ReportsExportActions section for the Reports page. Features a Three.js/React Three Fiber decorative ParticleField with 60 particles using useMemo for Float32Array positions/colors/sizes, useFrame rotation animation (rotation.y at 0.04 speed, rotation.x sinusoidal at 0.03), pointsMaterial with vertexColors, opacity 0.5, and additive blending (blending=2), rendered inside a Canvas component. FORMATS array (full/summary/charts) drives format selection with useState. MagneticButton wrapper component uses useRef, useState for mousePos, and useCallback for onMouseMove/onMouseLeave to compute normalized cursor position within button bounds for magnetic hover translation effect, wrapped in framer-motion motion.button. Download and Share2 action buttons with Download, Share2, FileText, Check lucide icons and loading/success state management via useState. AnimatePresence handles success confirmation transitions. Import '../styles/ReportsExportActions.css'.

As a frontend developer, implement the Footer section for the Reports page. This component (likely already exists from Progress, AICompanion, and other pages) renders a ftr-root footer with decorative ftr-aurora and ftr-glow elements. Displays ftr-brand with Brain lucide icon (size=22, strokeWidth=2.2), 'BODH-I' logo text, tagline paragraph, and ftr-socials row mapping socials array (Twitter, Linkedin, Github, Instagram from lucide-react with href='/Dashboard'). Renders ftr-links nav with 3 linkColumns (Product, Assessments, About) each mapping links to ftr-link anchors. Bottom bar shows dynamic year via new Date().getFullYear() and legalLinks (Privacy Policy, Terms of Service, Accessibility). Import '../styles/Footer.css'. Reuse existing Footer component if already implemented from prior pages.

As a frontend developer, implement the HighRiskHero section for the HighRiskSupport page. Build the 3D SafeHandsCore component using @react-three/fiber with useFrame animation loop: an outer torusGeometry ring rotating on Y-axis with sinusoidal X tilt and scale pulse (outerRing.current), a mid amber torus ring at Math.PI/2 rotation, and an inner sphereGeometry core (innerCore.current) with emissive #10B981 and pulsing emissiveIntensity (0.35 ± 0.12 at 1.6Hz). A points geometry uses useMemo to generate 60 particles in a spherical shell (r=1.4–2.6) with 5-color palette (cyan, green, purple, teal, amber) stored in Float32Array positions and colors bufferAttributes. The particles ref rotates slowly on Y and X axes. Wrap in a Canvas component with framer-motion hero layout. Import HighRiskHero.css for styling. This is the first section of the page and depends on the Reports Navbar task to establish page-level dependency chain.

As a Tech Lead, verify end-to-end integration between the AICompanion frontend (ChatInterface, SessionHistory, WellnessInsights, RecommendationsPanel) and the AI Companion Sessions + Wellness Recommendations backend APIs. Ensure chat messages are sent to /ai/chat and responses rendered in the ChatInterface with correct typing indicator timing, session history loads from /companion/sessions, wellness metric cards display real data from /ai/wellness-metrics, and recommendation cards are populated from /ai/recommendations.

As a frontend developer, implement the RiskAssessmentBanner section for the HighRiskSupport page. Build the rb-root section with useState managing riskLevel ('high' | 'moderate' | 'low') and a visible boolean toggled via IntersectionObserver (threshold 0.15) on containerRef. The RISK_LEVELS config object maps each level to label, classSuffix, icon (AlertTriangle/Activity/ShieldCheck from lucide-react), title, explanation text, and triggers array with dotClass indicators. Use AnimatePresence with framer-motion for animated transitions between risk level states. Render background glow divs (rb-glow rb-glow--amber) and the dynamic icon, title, explanation, and trigger chips based on the active risk level. Includes a tab/toggle UI to switch between high/moderate/low states. Import RiskAssessmentBanner.css. This section is independent and can be built in parallel with other content sections.

As a frontend developer, implement the EmergencyResources section for the HighRiskSupport page. Build the EmergencyParticles Three.js component using @react-three/fiber: 40 particles in a 14×10×6 bounding box with 3-color palette (green, teal, cyan) in Float32Array buffers, rendered as points with additive blending (blending=2), sizeAttenuation, and vertexColors. The particle group slowly rotates on Y and oscillates on Y position via useFrame. Implement the useTilt custom hook using useRef and useState({x,y}) to calculate cursor-relative tilt angles (maxTilt=6, perspective=800) via mousemove/mouseleave event listeners, returning a CSS transform style string. Wrap emergency resource cards in a Canvas for the particle background and apply tilt transforms to cards. Import EmergencyResources.css. Runs in parallel with RiskAssessmentBanner and SupportPathways.

As a frontend developer, implement the SupportPathways section for the HighRiskSupport page. Build the pathway cards from the PATHWAYS array (5 items: ai-companion, counselor-call, coping-strategy, resources, peer-support), each with step label, title, desc, time badge, lucide-react icon (Brain/Heart/BookOpen/Users), colorClass, actionLabel, and href. Implement useState for active pathway expansion. Use framer-motion containerVariants with staggerChildren (0.1s) and delayChildren (0.15s), cardVariants with opacity/y animation (duration 0.5, cubic bezier), and detailVariants with height:'auto' AnimatePresence expand/collapse (duration 0.4 / 0.25). Icons include ChevronRight and ArrowRight for navigation affordance. Cards link to /AICompanion, /Interventions, /CognitiveLab, /Assessments, /Dashboard routes. Import SupportPathways.css. Runs in parallel with EmergencyResources.

As a frontend developer, implement the CopingStrategies section for the HighRiskSupport page. Build interactive technique cards from the TECHNIQUES array (box-breathing/Wind, 54321-grounding/Eye, progressive-muscle/Hand, safe-place/Anchor, and more), each with id, icon, name, duration, desc, colorClass, and steps array containing JSX rich text (strong tags for emphasis). Implement useState for active technique modal/panel and useEffect/useRef for timing logic. Use framer-motion AnimatePresence for technique detail expansion with X and Play (lucide-react) controls. Each technique step renders inline JSX with embedded strong elements. Clock/ArrowRight icons provide UI affordance. Implement a guided timer or step-through UI within the active technique view. Import CopingStrategies.css. Runs in parallel with EmergencyResources and SupportPathways.

As a frontend developer, implement the ProfessionalReferrals section for the HighRiskSupport page. Build the ParticleNode Three.js component using @react-three/fiber: an octahedronGeometry (args=[0.7,0]) in wireframe meshStandardMaterial with emissive color, metalness 0.5, and a glow sphere (scale=1.8) using meshBasicMaterial with pulsing opacity (0.12 ± 0.06 at 1.5Hz) via glowRef in useFrame. Group rotates on Y (speed prop) with sinusoidal X tilt. Build REFERRAL_CATEGORIES cards (counselor, campus, and more) with inline SVG icons, iconClass, summary, details array, highlight text, and isHighlight flag. Use useState for expanded card state and AnimatePresence for detail panel transitions. Import ProfessionalReferrals.css. Runs in parallel with CopingStrategies.

As a frontend developer, implement the NextStepsCTA section for the HighRiskSupport page. Build the SunburstCore Three.js component: a sphereGeometry core (args=[0.65,48,48]) with F59E0B amber emissive material and pulsing emissiveIntensity (0.65 ± 0.28 at 1.6Hz) via coreRef in useFrame. Three torus rings (ringA: r=0.82 cyan, ringB: r=0.92 purple, ringC: r=1.02 light-cyan) each with independent rotation axes and speeds. Build SunburstParticles with useMemo generating 40 particles in spherical shell (r=1.1–2.5) using 4-color palette (amber, teal, purple, green) in Float32Array buffers, slowly rotating on Y/X axes. Use framer-motion useInView hook on a ref to trigger entrance animations for the CTA text and action buttons. Import NextStepsCTA.css. Depends on HighRiskHero to ensure page structure is established.

As a Tech Lead, verify end-to-end integration between the Reports frontend (ReportsMetricsSummary, ReportsAssessmentTrends, ReportsStressTimeline, ReportsCognitiveLab, ReportsInterventionHistory, ReportsExportActions) and the Reports & PDF Export backend API. Ensure all chart data loads from real API responses, the stress heatmap renders correct 7x7 data with predicted flags, PDF export triggers /reports/export and downloads the generated file correctly, and the export loading/success state transitions work as expected.

As a Tech Lead, verify end-to-end integration between the ReportsExportActions frontend and the Reports & PDF Export backend API. Ensure clicking the export button triggers POST /reports/{user_id}/export, the backend generates a PDF using WeasyPrint or reportlab containing assessment trends charts, stress heatmap, cognitive lab results, and intervention history, and the file is returned as a download response or signed URL. Validate that the frontend handles loading/success/error states correctly, the format selection (full/summary/charts) is passed to the API, and the downloaded PDF contains accurate data matching the on-screen report.

As a Tech Lead, verify end-to-end integration between the SessionTracking post-session emotion rating UI and the Experience Rating backend API. Ensure star ratings submitted after box breathing sessions and assessments are POSTed to /ratings/assessment with the correct assessmentId and userId, average ratings are reflected in the ReportsInterventionHistory adherence stats, and the rating confirmation state in the UI (CheckCircle success state) is correctly triggered on API success response.

As a Tech Lead, verify end-to-end integration between the HighRiskSupport frontend (RiskAssessmentBanner, SupportPathways, ProfessionalReferrals) and the High-Risk Detection backend API. Ensure the risk assessment banner displays the real risk level from /risk/assessment, professional referral categories load from /risk/referrals, high-risk alerts are triggered and logged when PSS > 28 or predicted stress > 75, and coping strategy sessions are recorded via /risk/coping-session.