urban-way

As a frontend developer, implement the LandingHero section for the Landing page. Uses useRef for rootRef, bgLayerRef, midLayerRef, glowRef, geoRefs array, and tlRef (GSAP timeline). State includes burst (boolean for ParticleBurst activation). Renders 14 geometric floating shapes (lh-geo--ring, lh-geo--square, lh-geo--diamond, lh-geo--hex, lh-geo--circle-sm, lh-geo--dot, lh-geo--triangle) across bg and mid parallax layers. ParticleBurst sub-component renders 16 radial particles using AnimatePresence with colors #BB86FC, #03DAC6, #CF6679, each with randomized angle, distance (50-110px), and size (4-9px), using onExitComplete callback. GSAP drives the parallax and entrance timeline on rootRef. Framer-motion handles particle animations with cubic-bezier easing.

As a frontend developer, implement the LandingValueProp section for the Landing page. Uses useRef and framer-motion useInView (once:true, margin:'-80px') to trigger staggered animations. Renders 4 BenefitCard components (email, calendar, reminder, security) using Mail, CalendarDays, BellRing, ShieldCheck from lucide-react. cardVariants animate from opacity:0/x:-40 with per-card delay (i*0.15). Each card has a vp-card-border that transitions background from var(--primary) to var(--accent) on hover, and whileHover lift (-6px) with boxShadow. Background layer includes vp-orb--blue-lg and vp-orb--gold-sm decorative elements with CSS custom property scroll parallax (--scroll * -0.2px).

As a frontend developer, implement the LandingFeatures section for the Landing page. Uses useRef and framer-motion useInView. Renders 4 feature cards (voice, calendar, email, insights) each with inline SVG icons: voice mic (stroke #BB86FC) with signal arcs, calendar grid (stroke #03DAC6) with checkmark, email envelope (stroke #CF6679) with diagonal lines, and insights icon (stroke #BB86FC). Each card uses wrapperClass (lf-icon-wrapper--voice/calendar/email/insights) and illustClass (lf-illust-*) for per-feature illustration styling. Framer-motion drives staggered entrance animations triggered by scroll viewport. Features alternate layout (image left/right) for desktop view.

As a frontend developer, implement the LandingHolographicDemo section for the Landing page. Uses @react-three/fiber Canvas with Suspense, and drei components Text, RoundedBox, MeshTransmissionMaterial, Float. Three HoloPanel components (email #BB86FC, calendar #03DAC6, tasks #CF6679) arranged in a circular arc (radius=3.2) using trigonometry. useFrame drives per-panel floating (sin wave, time*0.8+index*2.1, amplitude 0.15) and tilt animations. Click interaction collapses panel via THREE.MathUtils.lerp on position.z (+6) and scale (→0.01) with opacity fade. hoveredPanel and clickedPanel state managed via useState. useMemo memoizes THREE.Color instances. Mobile fallback renders hd-mobile-card components instead of Canvas. GSAP and framer-motion AnimatePresence handle panel transition overlays.

As a frontend developer, implement the LandingIntegration section for the Landing page. Renders an interactive network graph with 4 NODE_DATA nodes (user #BB86FC, input #CF6679, ai #03DAC6, outlook #BB86FC) each with tooltipIcon, tooltipTitle, tooltipSubtitle, tooltipBody. NODE_ICONS renders inline SVG g-elements for user, voice, ai, outlook node types. TOOLTIP_ICONS provides separate SVG icons for tooltip UI. useState tracks hovered node for tooltip display; AnimatePresence manages tooltip enter/exit. useInView triggers GSAP-animated connection lines between nodes. useCallback wraps mouse event handlers. gsap from 'gsap' drives animated data-flow particles along SVG paths between nodes on enter viewport.

As a frontend developer, implement the LandingCapabilities section for the Landing page. Renders 6 CapabilityCard components (Intelligent Email Filtering, Smart Scheduling, Meeting Reminders, Natural Language Processing, Real-Time Responses, Privacy & Security) using Mail, Calendar, Bell, MessageSquare, Zap, Shield from lucide-react. cardVariants animate with rotateY from -90→0 (flip-in) per card (delay: 0.15*i, duration:0.6). Each card uses whileInView (once:true, margin:'-40px') and whileHover scale:1.05 spring. lc-card-border-top transitions from var(--primary) to linear-gradient on hover. lc-icon-svg has whileHover rotate:360 spin (0.6s). lc-orbital-ring SVG circle provides a rotating orbital ring behind the icon.

As a frontend developer, implement the LandingUseCases section for the Landing page. Uses useState for hoveredIdx and activeMobileIdx, useRef for sectionRef, timelineRef, dotRefs array, svgLineRef, and itemRefs array. GSAP with ScrollTrigger (registered via gsap.registerPlugin) animates each timeline dot (dotRefs) from scale:0→1 using back.out(1.7) easing, triggered per itemRef scroll entry. SVG connecting line (svgLineRef) has its strokeDashoffset animated via getTotalLength(). Renders 3 use-case cards (morning briefing ☀️, midday scheduling 🌤, end-of-day wrap-up 🌇) with uc-card-icon--morning/midday/closing color classes. AnimatePresence handles mobile accordion (activeMobileIdx) expand/collapse. Desktop shows horizontal timeline layout; mobile shows vertical accordion.

As a frontend developer, implement the LandingTestimonials section for the Landing page. Implements custom useMousePosition hook storing ref {x,y} via mousemove listener. MagneticCard sub-component uses useRef cardRef, rAF loop (rafId) to compute proximity offset (threshold:150, maxShift:12) and setState offset {x,y}. Renders 5 testimonials (Sarah Chen, Marcus Williams, Elena Rodriguez, James Adler, Priya Kapoor) with initials-based avatars (avatarIdx 0-4). useInView triggers staggered card entrance. AnimatePresence manages active testimonial carousel state. framer-motion whileHover on cards applies the magnetic transform. Desktop shows multi-column grid; mobile shows swipeable carousel with AnimatePresence slide transitions.

As a frontend developer, implement the LandingPricing section for the Landing page. Uses useRef and framer-motion useInView to trigger card animations. Renders 3 PricingCard components (Starter $19/mo, Professional $49/mo highlighted, Enterprise $129/mo). cardVariants animate y:40→0/opacity:0→1 with per-card delay (i*0.15). featureVariants stagger feature list items (delay: 0.4+i*0.08, x:-20→0). Professional card has lp-card--highlight class with distinct visual treatment. Custom CheckIcon SVG (polyline 2,6 5,9 10,3) renders per feature. Features with highlight:true get accented styling. Two button styles: 'outline' and 'filled' control CTA button appearance.

As a frontend developer, implement the LandingCTA section for the Landing page. TypewriterHeadline sub-component uses useState visibleCount and setInterval (38ms per char) to reveal 'Ready to Transform Your Workflow?' char-by-char on inView, each char wrapped in motion.span (opacity:0/y:12→1/0). useIsMobile hook uses useState+resize listener (breakpoint 768px). ParticleBurst sub-component generates 10 radial particles (angle-spaced with ±0.3 random spread, dist 40-90px, size 4-10px) on hover; mobile fallback renders lc-glow-pulse motion.div with animated boxShadow pulse instead. counterRef tracks particle IDs. GSAP (gsap import) drives background gradient animation on the section container. Two CTAs: primary (color='gold', #03DAC6) and secondary (color='purple', #BB86FC) with distinct ParticleBurst colors.

As a frontend developer, implement the Footer section for the Landing page. Uses useRef and framer-motion useInView. Renders 3 link columns (Product, Company, Legal) via columnData array using columnVariants (y:30→0/opacity:0→1, delay i*0.12). FooterLink sub-component wraps each anchor with ftr-link-underline (scaleX:0→1 on whileHover, duration:0.3) and ftr-link-glow (scaleX:0→1, delay:0.05, duration:0.4) decorative underline layers. FooterLinkHover variant uses motion.li with whileHover='hover' variant propagation. Social icons: LinkedIn, Twitter (X), GitHub rendered as inline SVG with stroke styling. Animated logo SVG (same as Navbar — check for reuse) with pathLength draw animation. Note: Footer component may already exist from another page.

As a frontend developer, implement the Navbar section for the Login page. Note: this component likely already exists from the Landing page (task 967f7926-6a70-44e0-861e-f290a943c9ac) and may only require import/reuse. The Navbar uses useState for mobileOpen and scrolled states, a useEffect scroll listener (passive) that adds nb-scrolled class beyond 12px scroll, a NAV_PAGES array mapping to nb-link anchors, an SVG logo with hexagon stroke (#03DAC6) and circle fill (#BB86FC), a desktop Login CTA button with arrow-right SVG, and a mobile toggle button that swaps between hamburger and X SVG icons. The nb-mobile div conditionally applies nb-mobile-open class.

As a Backend Developer, implement authentication API endpoints in FastAPI. Endpoints: POST /api/auth/login (email+password, returns JWT access+refresh tokens), POST /api/auth/logout (invalidates session), POST /api/auth/refresh (refresh token rotation), GET /api/auth/me (returns current user profile), POST /api/auth/change-password (validates old password, updates hash). Implement JWT middleware using python-jose, password hashing with bcrypt, session tracking in DB (device info, IP, location), rate limiting on login attempts, and CORS configuration. Comply with Omani data protection laws. Note: Frontend tasks ff6adfd1 (LoginForm) and e8c49d82 (SettingsSecurity) depend on these endpoints.

As a frontend developer, implement the LandingValueProp section for the Landing page. Uses useRef and useInView (framer-motion, once:true, margin:'-80px') for scroll-triggered animations. Renders 4 BenefitCard components from a benefits array (email, calendar, reminder, security) each using Mail, CalendarDays, BellRing, ShieldCheck icons from lucide-react. Each BenefitCard uses cardVariants (hidden: opacity:0 x:-40, visible: opacity:1 x:0 with i*0.15 stagger delay) and whileHover (y:-6, boxShadow). Cards have a vp-card-border element that transitions background from var(--secondary) to var(--accent) on hover. Section includes a vp-deco-bg layer with two parallax orbs (vp-orb--blue-lg, vp-orb--gold-sm) using CSS custom property --scroll for translateY(-0.2px) parallax. headerVariants animate y:24→0 with 0.6s ease. Color classes per card: vp-card-icon-wrap--email/calendar/reminder/security.

As a frontend developer, implement the LandingFeatures section for the Landing page. Uses useRef and useInView (framer-motion, once:true) for scroll-triggered reveals. Renders 4 feature cards from a features array: voice (iconColor:#BB86FC, wrapperClass:lf-icon-wrapper--voice, illustClass:lf-illust-voice), calendar (iconColor:#03DAC6, lf-icon-wrapper--calendar, lf-illust-calendar), email (iconColor:#CF6679, lf-icon-wrapper--email, lf-illust-email), and insights (iconColor:#BB86FC, lf-icon-wrapper--insights, lf-illust-insights). Each feature includes a custom inline SVG icon (microphone with radiating arcs, calendar with checkmark circle, envelope with polyline, insights chart). Each card has illustClass-based decorative illustration backgrounds and staggered entrance animations. Section is 12568 chars of JSX indicating complex layout with alternating feature rows or grid with illustration panels.

As a frontend developer, implement the LandingHolographicDemo section for the Landing page. This is the most complex section — a 3D interactive demo using @react-three/fiber Canvas with Suspense wrapper, @react-three/drei (Text, RoundedBox, MeshTransmissionMaterial, Float), gsap, and THREE.js. Renders 3 HoloPanel components (email/#BB86FC, calendar/#03DAC6, tasks/#CF6679) arranged in a circle at radius 3.2 via angle=(index/total)*Math.PI*2. Each HoloPanel uses useFrame for per-frame animation: floatY via Math.sin(time*0.8+index*2.1)*0.15, floatTilt, isClicked state animates panel z-position forward +6 and scales to 0.01 with opacity→0. Uses useState for hoveredPanel and clickedPanel, useRef for meshRef/glowRef/textGroupRef, useMemo for THREE.Color instances (panelColor, glowColor, accentGold, white) and THREE.Vector3 basePos. Mobile fallback renders hd-mobile-card--email/calendar/tasks cards using AnimatePresence. gsap is imported for additional animation. MeshTransmissionMaterial used for glass-like panel material.

As a frontend developer, implement the LandingCapabilities section for the Landing page. Renders 6 CapabilityCard components from a capabilities array using lucide-react icons: Mail (Intelligent Email Filtering), Calendar (Smart Scheduling), Bell (Meeting Reminders), MessageSquare (Natural Language Processing), Zap (Real-Time Responses), Shield (Privacy & Security). Each CapabilityCard uses cardVariants with rotateY:-90→0 flip entrance animation (delay: 0.15*i, duration:0.6), whileInView with viewport once:true margin:'-40px', and whileHover scale:1.05 with boxShadow. Icons have a lc-icon-wrapper with lc-icon-bg background, lc-icon-svg wrapper that rotates 360deg on hover (0.6s), and an lc-orbital-ring SVG with animated circle stroke (lc-orbital-circle class). Cards have lc-card-border-top that transitions from var(--secondary) to gradient on hover (0.4s).

As a frontend developer, implement the Footer section for the Landing page. Uses useRef and useInView (framer-motion) for scroll-triggered column reveals. Renders 3 link column groups from columnData array: Product (Features, Pricing, Security, Integrations), Company (About, Blog, Careers, Contact), Legal (Privacy Policy, Terms of Service, Cookie Policy). Each column uses columnVariants (y:30→0, opacity:0→1) with staggered i*0.12 delay. Individual FooterLink components render with ftr-link-underline (scaleX:0→1 on hover, 0.3s) and ftr-link-glow (scaleX:0→1 on hover, 0.4s with 0.05s delay) motion.div elements. FooterLinkHover variant uses whileHover='hover' parent. Social icons section renders 3 SVG icons: LinkedIn (path+rect+circle), Twitter (two paths X-style), GitHub (complex path). Note: this Footer may be shared across pages — verify if already implemented elsewhere. SVG logo animation reused from Navbar.

As a DevOps Engineer, configure a CI/CD pipeline for the urban-way project. Create GitHub Actions (or equivalent) workflow files for: 1) PR checks — lint, type-check, and unit tests for both frontend and backend; 2) Build stage — Docker image build for frontend (React) and backend (FastAPI) with layer caching; 3) Deploy to staging — triggered on merge to develop, pushes images to container registry and applies Kubernetes manifests to the staging cluster; 4) Deploy to production — triggered on release tag, applies to production cluster with rollback capability. Configure secrets management for MS_CLIENT_ID, MS_CLIENT_SECRET, OPENAI_API_KEY, DATABASE_URL, and SECRET_KEY. Add status badges to README. Note: docker-compose and Kubernetes chart already exist — wire them into the pipeline.

As an AI Engineer, configure LiteLLM as the LLM routing layer for the urban-way backend. Install and configure litellm in the FastAPI service. Set up the litellm router with GPT-5.4 as the primary model and a fallback chain. Configure request/response logging for token usage and latency. Implement a litellm proxy config (litellm_config.yaml) with model aliases, rate limiting per user, and timeout settings aligned with the <5s SLA. Set LITELLM_MODEL env var (already defined in b8e2c1d4). Expose a health-check endpoint GET /api/ai/health that validates LiteLLM connectivity. Add retry logic with exponential backoff. This is a prerequisite for the AI Voice/Text Command API (c7bf8a79).

As a Backend Developer, configure the Alembic database migration pipeline for the urban-way FastAPI backend. Run `alembic init alembic` and configure alembic.ini with the DATABASE_URL from env. Create the initial migration script from the models defined in task 5bfbf827 (users, sessions, outlook_integrations, emails, calendar_events, reminders, user_settings, activity_log). Add a Makefile or shell script for common migration commands: `make db-upgrade`, `make db-downgrade`, `make db-seed`. Configure Alembic to run `alembic upgrade head` on container startup in docker-compose (via entrypoint or depends_on healthcheck). Add seed data script (scripts/seed.py) that inserts a sample executive user, 5 sample emails, 3 calendar events, and 4 reminders for development. Note: depends on database models task 5bfbf827.

As a Backend Developer, configure FastAPI application-level middleware and core infrastructure. Implement: CORS middleware with allowed origins from CORS_ORIGINS env var; JWT authentication dependency (get_current_user) using python-jose for all protected routes; rate limiting middleware (slowapi) on /api/auth/login (max 10 req/min per IP); request logging middleware (structured JSON logs with request_id, method, path, status, duration); global exception handlers for HTTPException, ValidationError, and unhandled exceptions returning consistent error envelope {error, message, request_id}; health-check endpoint GET /api/health returning DB connectivity status; lifespan event handlers for DB connection pool init/teardown. Set up FastAPI router registration grouping auth, dashboard, email, calendar, reminders, settings, outlook, and AI routers. This is a prerequisite for all backend API tasks.

As a Frontend Developer, configure React Router v6 for the urban-way SPA with routes matching all 7 design pages. Define routes: / (Landing), /Login, /Dashboard (protected), /Email (protected), /Calendar (protected), /Reminders (protected), /Settings (protected). Implement a PrivateRoute wrapper component that checks isAuthenticated from the global auth state (a9280094) and redirects to /Login if unauthenticated. Implement a PublicRoute wrapper that redirects authenticated users away from /Login to /Dashboard. Set up lazy loading (React.lazy + Suspense) for all page components to reduce initial bundle size. Create a NotFound (404) page. Configure scroll restoration on route change. Ensure the Navbar active link detection (window.location.pathname) works correctly with React Router's navigation. Prerequisite for all page-level frontend tasks.

As a frontend developer, implement the LoginHero section for the Login page. This section renders a full-section 3D ambient wireframe background via @react-three/fiber Canvas with camera at position [0,0,5] fov 50. The AmbientWireframe component uses a groupRef and two concurrent GSAP animations: a continuous y-axis rotation (40s, repeat -1) and a yoyo x-axis tilt (18s, sine.inOut). It renders three meshBasicMaterial wireframe meshes: an icosahedronGeometry (args [2.2,1], color #03DAC6, opacity 0.06), an octahedronGeometry (args [1.4,0], color #BB86FC, opacity 0.08), and a torusGeometry (args [1.0,0.02,16,80], color #03DAC6, opacity 0.1). The lh-content div uses a contentRef with a GSAP fromTo stagger animation (y:32 opacity:0 → y:0 opacity:1, duration 0.8, stagger 0.12, delay 0.2, power3.out) on its children, which include lh-divider, lh-headline with lh-accent span, lh-subheadline with lh-brand span, and lh-description paragraph.

As a frontend developer, implement the LoginForm section for the Login page. This section features a raw Three.js particle field (no fiber) mounted imperatively via useRef/useEffect: a THREE.Scene with PerspectiveCamera (fov 50, z=8), WebGLRenderer (alpha, antialias, pixelRatio capped at 2), 180 teal particles (color 0x03dac6, AdditiveBlending, opacity 0.6, sizeAttenuation) stored in a BufferGeometry with position and size attributes, plus 40 purple accent particles (color 0xbb86fc, opacity 0.45). The animate loop rotates both point clouds on y/x axes and pulses material opacity via Math.sin(Date.now()). A resize handler updates camera aspect and renderer size. The form itself manages state for email, password, showPassword, loading, error, and success. It renders an lf-card with glass-morphism styling containing email input, password input with toggle-visibility button, a submit button with loading spinner state, error message display, and a forgot-password link. CSS is 9953 chars indicating rich interactive styling.

As a frontend developer, implement the LoginSecurityNote section for the Login page. This section uses useState(false) for visible and a rootRef. A useEffect sets up an IntersectionObserver with threshold 0.4 that sets visible=true and disconnects once the element intersects the viewport. The lsn-inner div conditionally applies lsn-visible class to trigger a CSS entrance animation. It renders an lsn-lock-wrap containing an SVG lock icon (rect 3,11 w18 h11 rx2, path for shackle, circle cx12 cy16 r1 filled) and an lsn-text paragraph citing SOC 2 and GDPR compliance with lsn-accent spans, stating credentials are encrypted end-to-end and data is never shared with third parties.

As a frontend developer, implement the Footer section for the Login page. Note: this component likely already exists from the Landing page (task e73fa68f-23b1-4a68-b1f9-b45cc593a853) and may only require import/reuse. The Footer renders an ft-root with ft-inner containing an ft-grid. It includes a brand column with ft-logo (ft-logo-icon 'UW' monogram and ft-logo-text), three link columns (Product: Dashboard/Email/Calendar/Reminders, Account: Login/Settings/Landing, Company: Privacy/Terms) each with ft-col-title and ft-link anchors, and a social links row with four SVG icon links (GitHub, Twitter, LinkedIn, YouTube). A currentYear is derived from new Date().getFullYear() for the copyright line. CSS is 4922 chars.

As a frontend developer, implement the Navbar section for the Dashboard page. This component may already exist from the Landing and Login pages (task IDs 967f7926 and 74012b2a). It uses useState for menuOpen and scrolled states, useEffect for a passive scroll listener that toggles the nb-scrolled class when window.scrollY > 20, and another useEffect-free approach using window.location.pathname for active link detection. Renders a NAV_PAGES array of 5 routes (Dashboard, Email, Calendar, Reminders, Settings) plus a Login link. Includes a hamburger button with aria-expanded for mobile with nb-hamburger/nb-open classes and a nb-mobile-menu/nb-visible toggling mobile drawer. Import from ../styles/Navbar.css with nb- prefixed class names throughout.

As a Backend Developer, implement Microsoft Outlook OAuth2 integration via FastAPI. Endpoints: GET /api/outlook/auth (redirect to Microsoft OAuth consent), GET /api/outlook/callback (handle OAuth callback, store access+refresh tokens), POST /api/outlook/disconnect (revoke and delete tokens), GET /api/outlook/status (returns connection status and token validity). Use MSAL (Microsoft Authentication Library for Python) for token management. Implement token refresh logic before expiry. Scopes: Mail.Read, Mail.Send, Calendars.ReadWrite, offline_access. Store tokens encrypted in outlook_integrations table. Note: required by Calendar (cf2b1284, d952a752), Email (8cc8adb1), and Settings (e8c49d82) frontend sections.

As a Backend Developer, implement reminders management endpoints in FastAPI. Endpoints: GET /api/reminders (list with filter: all/urgent/upcoming/completed, sort: date/priority/alpha, search query), GET /api/reminders/{id}, POST /api/reminders (create reminder), PATCH /api/reminders/{id} (update, mark complete, snooze, dismiss), DELETE /api/reminders/{id}, GET /api/reminders/upcoming (next N reminders for dashboard widget), GET /api/reminders/count (counts per filter for badge display). Implement overdue detection (isOverdue flag), priority ranking, and category classification (meeting/email/task/calendar). Background scheduler (APScheduler) triggers reminder notifications. Note: Frontend tasks 210e2b59 (RemindersUrgent), e4916c66 (RemindersUpcoming), 24514c2c (RemindersCompleted) depend on this API.

As a Backend Developer, implement user settings and security endpoints in FastAPI. Endpoints: GET /api/settings (user preferences), PATCH /api/settings (update preferences: theme, notification_prefs, outlook_sync_enabled), GET /api/settings/sessions (list active sessions with device/ip/location/current flag — for SettingsSecurity activeSessions), DELETE /api/settings/sessions/{id} (revoke session), GET /api/settings/login-history (last 10 login attempts with device/ip/time/location/status — for SettingsSecurity loginHistory), POST /api/settings/2fa/enable (initiate TOTP setup), POST /api/settings/2fa/verify (verify TOTP and activate), DELETE /api/settings/2fa (disable 2FA). All require auth JWT. Note: Frontend task e8c49d82 (SettingsSecurity) depends on sessions and login history data.

As a Tech Lead, verify the end-to-end integration between the Login page frontend (LoginForm: ff6adfd1, LoginHero: a9c39ab6) and the Auth API backend (temp_auth_api). Ensure: POST /api/auth/login is called on form submit with email+password, JWT tokens are stored securely (httpOnly cookie or localStorage with XSS mitigations), successful login redirects to /Dashboard, error responses (401, 422) are displayed in the form error state, loading spinner activates during request, and the LoginSecurityNote (1e38346c) reflects actual SOC2/GDPR compliance posture. Verify the full login flow end-to-end in the browser.

As a Backend Developer, integrate the Auth API (79009ae0) with the FastAPI middleware setup (temp_fastapi_middleware_setup). Ensure the get_current_user JWT dependency is applied to all protected routes (dashboard, email, calendar, reminders, settings, ai endpoints). Implement session creation on login (insert into sessions table with device_info extracted from User-Agent, IP from request, geolocation from IP lookup). Implement session invalidation on logout (delete from sessions table). Ensure POST /api/auth/refresh rotates refresh token and updates sessions table. Apply rate limiter (slowapi, 10 req/min) to /api/auth/login. Verify CORS headers are correct for frontend origin. This wiring task ensures auth is enforced across all APIs before integration testing.

As a Tech Lead, verify the end-to-end integration and composition of all Landing page sections into a cohesive page. Ensure: LandingHero, LandingValueProp (05e4c888 / 9cfa4282), LandingFeatures (0922cdb1 / b5e03a1d), LandingCapabilities (3cb960df / ca03afb5), LandingHolographicDemo (72fc14cf / a8aecda2), LandingUseCases (331264e7), LandingIntegration (85074643), LandingTestimonials (a25fe855), LandingPricing (9b604e96), LandingCTA (09d4d57f) are composed in correct order with shared Navbar (967f7926) and Footer (e73fa68f). Verify: parallax scroll interactions work across sections without conflicts, GSAP ScrollTrigger contexts do not leak between sections, Three.js WebGL contexts are cleaned up on unmount, the page is responsive across mobile/tablet/desktop breakpoints, all CTA links navigate correctly to /Login and /Dashboard.

As a frontend developer, implement the DashboardHeader section for the Dashboard page. Uses useState for a live-updating `now` Date object ticked every 1000ms via setInterval in useEffect. Uses useRef for weatherRef (initialized once via getWeather() returning a random condition from 5 weather objects with icon, label, temp), and four DOM refs: titleRef, greetingRef, datetimeRef, weatherElRef for GSAP entrance animations. GSAP fromTo stagger animates elements from {y:16, opacity:0} to {y:0, opacity:1} with 0.55s duration and 0.1s stagger. Includes a Three.js AccentRing component using useFrame to rotate a torusKnotGeometry (args [0.8, 0.18, 80, 16, 2, 3]) with meshBasicMaterial color #03DAC6 wireframe at opacity 0.45, rendered inside a @react-three/fiber Canvas at camera position [0,0,2.2] fov 45. Helper functions formatTime, formatDate, getGreeting(hour) display contextual greeting. Import from ../styles/DashboardHeader.css.

As a frontend developer, implement the DashboardQuickStats section for the Dashboard page. Renders a STATS array of 4 stat cards (Unread Emails count:12 accent:#03DAC6 href:/Email, Upcoming Meetings count:3 accent:#BB86FC href:/Calendar, Pending Tasks count:8 accent:#CF6679 href:/Dashboard, Active Reminders count:5 accent:#D4A84B href:/Reminders) each with an inline SVG icon. Includes a Three.js ParticleField component using useMemo to generate 120 particles with Float32Array positions and colors interpolated between #BB86FC and #03DAC6 via THREE.Color lerp; particle mesh rotates via requestAnimationFrame on meshRef.current.rotation.y and .x. Uses gsap for card entrance animations. Imports gsap, Canvas from @react-three/fiber, THREE from three. Import from ../styles/DashboardQuickStats.css.

As a frontend developer, implement the DashboardHolographicPanel section for the Dashboard page. Defines a PANELS array of 4 items (email #BB86FC at [-2.6,0.8,0], calendar #03DAC6 at [2.6,0.8,0], tasks #CF6679 at [-2.6,-1.5,0], reminders #FFB74D at [2.6,-1.5,0]) each with id, label, sublabel, count, color, position, href, and a lucide-react icon (Mail, CalendarDays, CheckSquare, Bell). Features a CentralCore Three.js component with three useFrame-animated meshes: an icosahedronGeometry sphere (args [0.5,1]) with meshStandardMaterial emissive #03DAC6 at intensity 0.7, a wireframe icosahedronGeometry overlay (args [0.62,1]) with #BB86FC at opacity 0.35, a torusGeometry ring (args [0.82,0.03,16,64]) with emissive #BB86FC, and a horizontal torus (args [0.9,0.02,16,64]) with emissive #03DAC6. Uses @react-three/drei Float, Html, RoundedBox, Line components. Imports gsap for panel entrance animations. Import from ../styles/DashboardHolographicPanel.css.

As a frontend developer, implement the DashboardRecentActivity section for the Dashboard page. Renders an ACTIVITIES array of 7 items with id, category (email/calendar/task), title, desc, time, and href fields. Categories map to colored icon components: EmailIcon (rect+path envelope SVG), CalendarIcon (rect+lines SVG), CheckIcon (path+polyline SVG). Also includes ClockIcon, ActivityIcon, and ArrowRight inline SVG components. Uses useState for any interactive state, useRef for section container, and gsap for entrance animation of activity list items with stagger. Activity items link to /Email, /Calendar, /Reminders as appropriate. Import from ../styles/DashboardRecentActivity.css with a 9732-char stylesheet indicating rich hover states and category-colored accent borders.

As a frontend developer, implement the DashboardUpcomingEvents section for the Dashboard page. Renders an EVENTS array of 5 items (3 for Today 2026-05-21, 2 for Tomorrow 2026-05-22) each with id, title, time, location, dateLabel, date. Uses useState for rescheduling (nullable event id) and visible (boolean) states. Uses useRef for sectionRef, canvasRef (Three.js), animFrame, eventRefs array, and rootRef. Implements a raw Three.js WebGLRenderer (not react-three-fiber) directly on canvasRef with PARTICLE_COUNT=80 InstancedMesh using SphereGeometry(0.06,6,6) and MeshBasicMaterial color 0xBB86FC at opacity 0.7, camera at z=30 with PerspectiveCamera fov 60. PARTICLE_COLORS array ['#BB86FC','#03DAC6','#4D90FE']. Uses gsap for event card entrance stagger animations triggered on IntersectionObserver or visibility state. Import from ../styles/DashboardUpcomingEvents.css.

As a frontend developer, implement the Footer section for the Dashboard page. This component may already exist from the Landing and Login pages (task IDs e73fa68f and d5389ccb). Renders a linkColumns array of 3 column objects (Product with Dashboard/Email/Calendar/Reminders links, Account with Login/Settings/Landing links, Company with Privacy/Terms links). Renders a socialLinks array of 4 items (GitHub, Twitter, LinkedIn, YouTube) each with inline SVG icons using stroke='currentColor'. Includes a ftr-brand column with ftr-logo-mark 'UW' and ftr-logo-text 'urban-way'. Displays currentYear via new Date().getFullYear(). Uses ftr-root/ftr-content/ftr-brand/ftr-logo class naming throughout. Import from ../styles/Footer.css.

As a frontend developer, implement the Navbar section for the Email page. This component (Navbar.jsx) uses useState for mobileOpen and scrolled states, with a useEffect scroll listener that adds the nb-scrolled class after 12px scroll. Renders the urban-way logo with an SVG hexagon/circle icon and pulse span, a desktop ul.nb-links mapping over NAV_PAGES (Dashboard, Email, Calendar, Reminders, Settings), a Login CTA anchor with arrow SVG, and a mobile toggle button that swaps between hamburger and X SVGs. Includes a nb-mobile drawer for mobile breakpoints. Note: a Navbar component may already exist from Dashboard page (task 3a8baae7-7fbd-41ae-bd34-44d388b3a146) — reuse or adapt if structure matches.

As a frontend developer, implement the Navbar section for the Calendar page. This component reuses the shared Navbar already created for Dashboard, Login, and Email pages. It uses useState for menuOpen and scrolled states, useEffect for scroll event listener (scrolled threshold at 20px), and derives currentPath from window.location.pathname to highlight the active nav link. NAV_PAGES includes Dashboard, Email, Calendar, Reminders, Settings, and Login. Desktop nav renders nb-nav-links list; mobile renders nb-hamburger toggle with animated nb-hamburger-line spans and a conditionally visible nb-mobile-menu. The nb-scrolled class is applied on scroll for glassmorphism effect.

As a frontend developer, implement the Navbar section for the Reminders page. This shared component (may already exist from Dashboard/Email/Calendar pages) includes: `mobileOpen` and `scrolled` useState hooks, a scroll event listener via useEffect that adds `.nb-scrolled` class after 12px scroll, NAV_PAGES array with links to Dashboard, Email, Calendar, Reminders, Settings, an SVG hexagon logo with `#03DAC6` stroke and `#BB86FC` circle, animated `.nb-pulse` element, desktop nav links, Login CTA with arrow SVG, and a mobile hamburger/X toggle button rendering `nb-mobile` dropdown. Import from `../styles/Navbar.css`.

As a Backend Developer, implement email management endpoints in FastAPI. Endpoints: GET /api/emails (list emails with folder/search/pagination params), GET /api/emails/{id} (get full email with body), POST /api/emails/{id}/reply (send reply via Outlook), POST /api/emails/{id}/forward, PATCH /api/emails/{id} (mark read/unread, move folder, add label), DELETE /api/emails/{id} (move to trash), GET /api/emails/folders (list folders with unread counts), POST /api/emails/compose (send new email). Sync emails from Outlook via Microsoft Graph API. Cache results in MySQL emails table and refresh on demand. Return unread count for Dashboard stats. Note: Frontend tasks 8cc8adb1 (Email Sidebar) and dc80dbd9 (Email Navbar) depend on real folder/unread data.

As a Backend Developer, implement calendar management endpoints in FastAPI. Endpoints: GET /api/calendar/events (list events with date range, view mode params), GET /api/calendar/events/{id} (event detail), POST /api/calendar/events (create event, syncs to Outlook), PATCH /api/calendar/events/{id} (update event), DELETE /api/calendar/events/{id} (cancel event), GET /api/calendar/events/upcoming (next N events for sidebar widget), POST /api/calendar/meetings/quick (quick-schedule via natural language). Sync with Outlook Calendar via Microsoft Graph API. Return structured data for Day/Week/Month/Agenda views. Note: Frontend tasks 79f08070 (CalendarHeader), cf2b1284 (CalendarSidebar), d952a752 (CalendarQuickActions) depend on this API.

As a Tech Lead, verify the end-to-end integration between the Reminders page frontend sections (RemindersUrgent: 210e2b59, RemindersUpcoming: e4916c66, RemindersCompleted: 24514c2c, RemindersQuickAdd: a206c467, RemindersFilter: bd2266d2) and the Reminders API (temp_reminders_api). Ensure: filter buttons fetch GET /api/reminders with correct filter params and update badge counts, RemindersQuickAdd form POSTs to /api/reminders and new item appears in the list, complete/dismiss/snooze actions PATCH the correct reminder ID, undo action calls PATCH to restore completed reminder, overdue items are flagged via isOverdue from API response. Verify real-time count updates across filter tabs.

As a Tech Lead, verify the end-to-end integration between the Settings page frontend sections (SettingsSecurity: e8c49d82, SettingsHeader: 1361a967, SettingsSidebar: e55b49a0) and the Settings API (temp_settings_api) plus Outlook OAuth (temp_outlook_integration). Ensure: active sessions list loads from GET /api/settings/sessions, login history table loads from GET /api/settings/login-history, session revoke button calls DELETE /api/settings/sessions/{id} and removes the row, 2FA toggle calls POST /api/settings/2fa/enable and displays TOTP QR code, Outlook connect button initiates GET /api/outlook/auth OAuth redirect, disconnect button calls POST /api/outlook/disconnect and updates status. Verify security panel reflects real data.

As a Backend Developer, implement the background reminder notification scheduler using APScheduler within the FastAPI application. Configure AsyncIOScheduler with a MySQL JobStore (using the same DATABASE_URL). Implement a check_overdue_reminders job running every 60 seconds that queries reminders where datetime <= now AND is_completed=false AND is_dismissed=false and flags them as overdue (isOverdue=true) in the DB. Implement a send_upcoming_reminders job running every 5 minutes that queries reminders due within the next 15 minutes and logs a notification entry in activity_log. Implement a snooze_expiry job running every minute that re-activates snoozed reminders past their snoozed_until timestamp. Start scheduler in FastAPI lifespan event. Shut down gracefully on app stop. Note: depends on Reminders API (3196a9bb) and middleware setup (temp_fastapi_middleware_setup).

As a Backend Developer, implement a shared Microsoft Graph API client module (services/microsoft_graph.py) used by both the Email and Calendar backends. Implement: MicrosoftGraphClient class initialized with user_id (loads tokens from outlook_integrations table), get_token() method that checks expiry and calls MSAL refresh if needed, list_messages(folder, top, skip, search) for mail sync, get_message(message_id) for full body fetch, send_message(payload) for compose/reply/forward, list_events(start_datetime, end_datetime) for calendar sync, create_event(payload), update_event(event_id, payload), delete_event(event_id). Implement a sync_emails_for_user(user_id) background task that calls list_messages and upserts into the emails table. Implement a sync_events_for_user(user_id) background task for calendar_events table. Raise OutlookNotConnectedError if no valid token found. This is a prerequisite for Email API (84b6f953) and Calendar API (bbc20d3e).

As a Tech Lead, verify the end-to-end composition and integration of all Login page sections. Ensure: LoginHero (a9c39ab6), LoginForm (ff6adfd1), LoginSecurityNote (1e38346c) are composed correctly with shared Navbar (74012b2a) and Footer (d5389ccb). Verify: Three.js particle field in LoginForm and LoginHero WebGL contexts do not conflict, GSAP animations trigger in correct sequence, form validation shows inline error messages, login success redirects to /Dashboard via React Router, 401 error from POST /api/auth/login surfaces in form error state, loading spinner activates during API call, page is fully responsive on mobile. Note: also depends on Auth API integration task (4f60252a).

As a frontend developer, implement the Sidebar section for the Email page. This component (Sidebar.jsx) uses useState for isOpen (drawer toggle) and activeFolder (currently 'Inbox'). Imports lucide-react icons: Mail, LayoutDashboard, Calendar, Bell, Settings, PenSquare, Inbox, Send, Star, FileText, Trash2, AlertCircle, Menu, X, Zap. Renders: a mobile hamburger button (sb-mobile-toggle) toggling isOpen; a sb-overlay div for mobile drawer backdrop; and the main nav panel (sb-sidebar, sb-sidebar--open when open) containing: brand block with Zap icon and 'urban-way / AI Assistant' text; a Compose button; a scrollable sb-nav-scroll area with a 'Navigation' section label mapping navPages (Dashboard/Email/Calendar/Reminders with badge counts 12 and 3), and an email folders section mapping emailFolders (Inbox:24, Sent, Starred:5, Drafts:2, Spam:8, Trash) with setActiveFolder on click and sb-nav-item--active on the active folder; and a labels section rendering color-dot labels for Work (#03DAC6), Personal (#BB86FC), Finance (#CF6679), Travel (#FFD700). Active page detection via window.location.pathname.

As a frontend developer, implement the Footer section for the Email page. This component (Footer.jsx) uses useState and renders a ft-root footer with an ft-inner/ft-grid layout containing: a brand column with ft-logo (UW initials icon + logo text), and three link columns mapped from linkColumns array — Product (Dashboard, Email, Calendar, Reminders), Account (Login, Settings, Landing), Company (Privacy, Terms). Also renders socialLinks array with GitHub, Twitter, LinkedIn, YouTube SVG icons as anchor tags. Displays dynamic currentYear via new Date().getFullYear(). Note: a Footer component may already exist from Dashboard page (task 3815bdcb-c63f-496d-8e25-ba7552cff1a1) — reuse or adapt if the ft- CSS class structure matches.

As a frontend developer, implement the CalendarSidebar section for the Calendar page. This complex section uses Three.js for a ParticleCanvas component (50 floating particles with BufferGeometry, PerspectiveCamera at z=30, WebGLRenderer with alpha), GSAP for animation, and React hooks: useState, useEffect, useRef, useMemo, useCallback. It includes a fully functional mini-calendar with buildCalendarGrid() utility that computes prev/current/next month days, DAY_HEADERS, MONTHS arrays, and month navigation with getDaysInMonth/getFirstDayOfMonth helpers. UPCOMING_EVENTS array contains 4 hardcoded events (Quarterly Strategy Review, Design Sprint Kickoff, Client Call: Meridian Corp, 1:1 with Sarah Chen) with accent variants primary/secondary/warning. The sidebar renders the Three.js ParticleCanvas as background decoration, a navigable mini-calendar grid, and a list of upcoming event cards styled per accent variant.

As a frontend developer, implement the CalendarHeader section for the Calendar page. Uses Three.js for an animated energy line rendered on a bottom canvas via OrthographicCamera (-1 to 1), and GSAP for animating a sliding indicator pill between view toggle buttons. State hooks: viewMode (default 'Month'), searchQuery, filterActive, currentDate. Refs: indicatorRef, viewBtnRefs (keyed object), toggleWrapRef, canvasRef, threeCleanupRef, indicatorTweenRef. VIEWS array defines Day/Week/Month/Agenda options each with a unique SVG icon path. animateIndicator() uses gsap.to() with back.out(1.5) easing to slide the indicator pill by computing getBoundingClientRect() offsets between the toggle wrapper and target button. handleViewChange() sets viewMode and triggers animateIndicator(). prevMonth/nextMonth update currentDate via setMonth. The header displays currentMonth and currentYear, a search input bound to searchQuery, a filter toggle button with filterActive state, and the four VIEWS toggle buttons with the animated indicator.

As a frontend developer, implement the CalendarQuickActions section for the Calendar page. Uses GSAP for staggered entrance animation (fromTo with opacity 0→1, y 16→0, scale 0.96→1, stagger 0.08, power3.out ease, delay 0.1) targeting .cqa-btn elements inside gridRef. Ripple effect state is managed via useState ripples (keyed by btnKey). Mouse-follow glow handled by handleMouseMove callback that computes x/y percentages from getBoundingClientRect and applies CSS custom properties. ACTION_BUTTONS array contains four entries: Schedule Meeting (⌘N, variant 'schedule'), Join Meeting (⌘J, variant 'join'), Send Update (⌘U, variant 'send'), Quick Reminder (⌘R, variant 'reminder') — each with an inline SVG icon, label, sub-label, and keyboard shortcut badge. Each button renders with variant-specific CSS class for color theming, a shortcut pill, and the mouse-glow and ripple interaction layers.

As a frontend developer, implement the Footer section for the Calendar page. This component reuses the shared Footer already created for Landing, Login, Dashboard, and Email pages. It renders a ftr-root footer with ftr-content wrapper containing: a ftr-brand column with 'UW' logo mark and 'urban-way' text plus a tagline paragraph, three linkColumns (Product: Dashboard/Email/Calendar/Reminders; Account: Login/Settings/Landing; Company: Privacy/Terms), and socialLinks row with GitHub/Twitter/LinkedIn/YouTube SVG icon links. currentYear is derived via new Date().getFullYear(). The bottom bar shows copyright text. All links use href routing matching the app's page structure.

As a frontend developer, implement the RemindersFilter section for the Reminders page. Includes: `activeFilter`, `searchQuery`, `sortBy`, `sortOpen` useState hooks; a Three.js ambient particle field rendered on a canvas via `canvasRef` using OrthographicCamera, BufferGeometry with 60 particles, custom ShaderMaterial with `uTime`/`uColor`/`uColor2` uniforms, and a GSAP-driven animation loop (animRef); FILTERS array with keys All/Urgent/Upcoming/Completed and badge counts; SORT_OPTIONS array (Date, Priority, Alphabetical) with a click-outside handler via `sortRef`; GSAP entrance animations on `sectionRef` and `createBtnRef`; a search input bound to `searchQuery`; and a sort dropdown toggled by `sortOpen`. Import Three.js, gsap, and `../styles/RemindersFilter.css`.

As a frontend developer, implement the RemindersUrgent section for the Reminders page. Includes: a `UrgencyRing` React Three Fiber component with `ringRef` (torusGeometry, `#CF6679` emissive) and `innerRef` (circleGeometry) driven by two repeating GSAP timelines — one scaling the ring 1→1.12→1 and one fading innerRef opacity 0.55→0.25; a center sphere with emissiveIntensity 1.0; a `formatRelativeTime` helper converting ms diffs to 'Xm ago'/'Xh ago'/'Xd ago'; `URGENT_REMINDERS` data array with 3 overdue items including `isOverdue` flag; per-card state for dismissal/completion via useState; GSAP card entrance animations using `useCallback`; and a `<Canvas>` from @react-three/fiber hosting the UrgencyRing. Import gsap, @react-three/fiber, and `../styles/RemindersUrgent.css`.

As a frontend developer, implement the RemindersUpcoming section for the Reminders page. Includes: `DATE_GROUPS` array with four groups (Today, Tomorrow, This Week, Later), each containing reminder objects with id, title, datetime, category (meeting/email/task/calendar), categoryLabel, priority (high/medium/low), and optional location; per-group collapse/expand state managed via useState; GSAP-animated height transitions on group content panels using `useRef` and `useCallback`; per-reminder snooze/complete action handlers; category badge color-coding and priority dot indicators; and a timeline-style vertical layout with group dot classes (`ru-group-dot--today`, `ru-group-dot--tomorrow`, etc.). Import gsap and `../styles/RemindersUpcoming.css`.

As a frontend developer, implement the RemindersCompleted section for the Reminders page. Includes: `COMPLETED_REMINDERS` array with 5 items (id, title, category, completedAt, undone flag); `expanded` and `reminders` useState hooks; a `ParticleField` component using `<Canvas>` from @react-three/fiber rendering 38 sphere meshes arranged in an arc with alternating `#03DAC6`/`#BB86FC` colors and random opacity; `animateOpen` and `animateClose` useCallback functions using GSAP `fromTo` on `contentRef` to animate height 0→auto and opacity 0→1 (open) or reverse (close); an undo action that sets `r.undone = true` and filters `activeReminders`; and a count badge derived from `activeReminders.length`. Import gsap, @react-three/fiber, and `../styles/RemindersCompleted.css`.

As a frontend developer, implement the RemindersEmpty section for the Reminders page. Includes: a `BellModel` React Three Fiber component using `useFrame` for continuous Y-axis rotation (delta * 0.25) and sine-wave glow opacity on `glowRef`; a lathe geometry bell body with 8 Vector2 control points and `meshPhysicalMaterial` (clearcoat 0.3, emissive `#03DAC6`); a torus rim ring with `#03DAC6` emissive; a `#BB86FC` clapper sphere; a cylinder connector rod; a top knob; all wrapped in `<Float speed={2.5} rotationIntensity={0.3} floatIntensity={0.6}>`; GSAP entrance animation on mount via `gsap` and `useRef`; a `<Suspense>` fallback; and conditional render toggled by a `useState` visibility flag. Import @react-three/fiber, @react-three/drei Float, THREE, gsap, and `../styles/RemindersEmpty.css`.

As a frontend developer, implement the RemindersQuickAdd section for the Reminders page. Includes: `text`, `time`, `date`, `expanded`, `recording`, `feedback`, `submitted` useState hooks; a `VoiceRing` React Three Fiber component using `useFrame` for continuous Z-axis (delta*1.2) and X-axis (delta*0.4) rotation on a torusGeometry (args [1.05, 0.09, 16, 48]), with sine-wave scale pulse when `recording` is true and color switching between `#CF6679` (recording) and `#03DAC6` (idle); GSAP expand/collapse animation on `expandedRef` (height 0→auto, opacity 0→1) triggered by `expanded` useEffect; GSAP feedback message fade-in/out on `feedbackRef` with 2400ms auto-dismiss timer; a simulated `toggleRecording` function that auto-stops after 2800ms and populates `text` with 'Schedule team standup for tomorrow'; text, date, and time inputs; and a submit handler setting `submitted` state. Import gsap, @react-three/fiber, and `../styles/RemindersQuickAdd.css`.

As a frontend developer, implement the Footer section for the Reminders page. This shared component (may already exist from Login/Dashboard/Email/Calendar pages) includes: a `linkColumns` array with three columns — Product (Dashboard, Email, Calendar, Reminders), Account (Login, Settings, Landing), Company (Privacy, Terms); a `socialLinks` array with SVG icons for GitHub, Twitter, LinkedIn, and YouTube; a `currentYear` derived from `new Date().getFullYear()`; a brand column with `ft-logo-icon` showing 'UW' and `ft-logo-tex` text; and a responsive `ft-grid` layout. Import from `../styles/Footer.css`.

As a frontend developer, implement the Navbar section for the Settings page. This component (Navbar.css) uses useState for menuOpen and scrolled states, with a useEffect scroll listener that adds the 'nb-scrolled' class when window.scrollY > 20. Renders NAV_PAGES array (['Dashboard','Email','Calendar','Reminders','Settings']) as desktop nav links with active state detection via window.location.pathname comparison. Includes a hamburger button with three nb-hamburger-line spans that toggles nb-open class, and a mobile menu (nb-mobile-menu/nb-visible) that closes on link click. Note: this component likely already exists from Dashboard, Email, Calendar, and Reminders pages — reuse or verify it matches.

As a Backend Developer, implement dashboard aggregation endpoints in FastAPI. Endpoints: GET /api/dashboard/stats (returns unread_emails count, upcoming_meetings count, pending_tasks count, active_reminders count — matching the 4 stat cards in DashboardQuickStats), GET /api/dashboard/upcoming-events (next 5 events for DashboardUpcomingEvents, grouped by Today/Tomorrow), GET /api/dashboard/recent-activity (last 7 activity log entries with category/title/desc/time/href for DashboardRecentActivity). All endpoints require auth JWT. Data is aggregated from emails, calendar_events, reminders, and activity_log tables. Note: Frontend tasks 792691ff (DashboardQuickStats), abc1021a (DashboardUpcomingEvents), f747de15 (DashboardRecentActivity) depend on this API.

As an AI Engineer, implement the AI command processing API in FastAPI using LiteLLM for routing to GPT-5.4. Endpoints: POST /api/ai/command/text (accepts text command string, returns structured action + natural language response), POST /api/ai/command/voice (accepts base64 audio blob, transcribes via Whisper/speech-to-text, then routes to text command handler), GET /api/ai/suggestions (returns AI-driven suggestions based on user's recent email/calendar/reminder activity). Implement intent classification (email_action, calendar_action, reminder_action, general_query). Map intents to internal API calls (e.g. 'schedule meeting tomorrow at 3pm' → POST /api/calendar/events). Use LiteLLM with GPT-5.4 model. Enforce <5s processing SLA. Note: Frontend tasks 93f1782b (DashboardHeader) and 792691ff (DashboardQuickStats) surface AI-driven data.

As a Tech Lead, verify the end-to-end integration between the Email page frontend sections (Sidebar: 8cc8adb1, Navbar: dc80dbd9) and the Email Management API (temp_email_api). Ensure: GET /api/emails/folders populates the sidebar folder list with live unread counts, GET /api/emails fetches email list for the active folder, folder switching triggers re-fetch with correct folder param, compose/reply actions call POST /api/emails/compose and POST /api/emails/{id}/reply, mark-read PATCH call fires on email open, Outlook connection status banner displays if outlook integration is missing (check GET /api/outlook/status). Verify full email management flow end-to-end.

As a Tech Lead, verify the end-to-end integration between the Calendar page frontend sections (CalendarHeader: 79f08070, CalendarSidebar: cf2b1284, CalendarQuickActions: d952a752) and the Calendar Events API (temp_calendar_api). Ensure: GET /api/calendar/events is called with correct date range params for each view mode (Day/Week/Month/Agenda), CalendarSidebar upcoming events widget loads from GET /api/calendar/events/upcoming, CalendarQuickActions Schedule Meeting button triggers POST /api/calendar/events, event creation reflects in calendar grid without full page reload, Outlook sync status is surfaced if disconnected. Verify month navigation and view switching with live API data.

As a Backend Developer, update the Email Management API (84b6f953) to depend on the Microsoft Graph client (temp_microsoft_graph_client). Ensure all email list/fetch/send endpoints delegate to MicrosoftGraphClient. Add a GET /api/emails/sync endpoint that triggers an on-demand sync from Outlook for the authenticated user, storing results in the emails MySQL table. Implement incremental sync using deltaToken from Microsoft Graph. Add GET /api/outlook/status check in email folder listing — if no valid Outlook token exists, return a connection_required flag in the API response so the frontend (8cc8adb1 Sidebar) can display the connection banner. Note: this is a dependency linkage task — primary implementation is in 84b6f953 and temp_microsoft_graph_client.

As a frontend developer, implement the SettingsSidebar section for the Settings page. This Sidebar component (Sidebar.css) uses useState for isOpen and activeFolder ('Inbox' default). Imports lucide-react icons: Mail, LayoutDashboard, Calendar, Bell, Settings, PenSquare, Inbox, Send, Star, FileText, Trash2, AlertCircle, Menu, X, Zap. Renders navPages array with badge counts (Email:12, Reminders:3), emailFolders list with counts (Inbox:24, Starred:5, Drafts:2, Spam:8), and color-coded labels array (Work:#03DAC6, Personal:#BB86FC, Finance:#CF6679, Travel:#FFD700). Includes mobile hamburger toggle, sb-overlay backdrop for drawer close, sb-compose button, and sb-nav-scroll scrollable area with sb-section-label groupings. Active folder state drives sb-nav-item--active class. Note: this component likely already exists from the Email page — reuse or verify it matches the Settings context.

As a frontend developer, implement the SettingsHeader section for the Settings page. This component (SettingsHeader.css) uses useRef for titleRef, subtitleRef, and breadcrumbRef, and gsap for entrance animations via a gsap.context timeline with power3.out easing (duration 0.55s). Breadcrumb nav animates from opacity:0 x:-8 at t=0, h1.sh-title with sh-title-accent span animates from opacity:0 y:10 at t=0.08, and p.sh-subtitle animates from opacity:0 y:6 at t=0.18. Renders breadcrumbs array [Dashboard href=/Dashboard, Settings (current)] with SVG chevron separator. Cleanup via ctx.revert() on unmount. Displays 'Manage your urban-way preferences, integrations, and account security.' subtitle text.

As a frontend developer, implement the SettingsSecurity section for the Settings page. This is the most complex section (SettingsSecurity.css), using useState, useEffect, useRef, useCallback plus THREE.js for a 3D canvas background and gsap for animations. Features three major data sets: loginHistory array (5 entries with device, icon, ip, time, location, status fields including a 'warning' status entry for Berlin/unknown device), activeSessions array (3 entries with MacBook as current:true active session, iPhone active, Windows PC inactive), and securityTips array (4 tips with inline SVG icons covering password strength, 2FA, session review, and recovery info). Renders interactive UI panels for password change, two-factor authentication toggle, login history table with status indicators, active sessions list with revoke controls, and security tips cards. THREE.js canvas likely renders a security-themed particle or shield animation in the background. GSAP drives section entrance animations. Requires careful integration of WebGL context cleanup on unmount.

As a frontend developer, implement the Footer section for the Settings page. This Footer component (Footer.css) uses useState and renders three linkColumns: Product (Dashboard, Email, Calendar, Reminders), Account (Login, Settings, Landing), and Company (Privacy, Terms). Renders four socialLinks with inline SVG icons for GitHub, Twitter, LinkedIn, and YouTube. Includes ft-brand column with ft-logo-icon 'UW' mark and ft-logo-text, ft-grid layout, and dynamic currentYear via new Date().getFullYear(). Note: this component likely already exists from Dashboard, Email, Calendar, and Reminders pages — reuse or verify it matches.

As a Tech Lead, verify the end-to-end integration between the Dashboard page frontend sections (DashboardQuickStats: 792691ff, DashboardUpcomingEvents: abc1021a, DashboardRecentActivity: f747de15, DashboardHeader: 93f1782b) and the Dashboard Stats API (temp_dashboard_api). Ensure: GET /api/dashboard/stats populates the 4 stat cards with live counts, GET /api/dashboard/upcoming-events populates today/tomorrow event groups, GET /api/dashboard/recent-activity populates the activity feed, auth guard redirects unauthenticated users to /Login, loading skeleton states display during fetch, and error states handle API failures gracefully.

As a Tech Lead, verify the end-to-end integration between the Dashboard voice/text command UI (DashboardHeader: 93f1782b, DashboardHolographicPanel: 9730f415) and the AI Command API (temp_ai_voice_api). Ensure: text command input calls POST /api/ai/command/text, voice recording captures audio and calls POST /api/ai/command/voice, AI response is displayed as natural language feedback in the UI, intent-mapped actions (e.g. 'send email to John', 'schedule meeting') trigger downstream API calls and reflect updates in dashboard stats, loading indicator displays during AI processing, error handling shows user-friendly messages on timeout or API failure. Verify <5s end-to-end response time.

As a Backend Developer, update the Calendar Events API (bbc20d3e) to delegate to MicrosoftGraphClient (temp_microsoft_graph_client) for all CRUD operations. Implement bidirectional sync: on POST /api/calendar/events, create event both in MySQL calendar_events table and in Outlook via Graph API, storing the returned outlook_event_id. On PATCH/DELETE, propagate changes to Outlook. Implement GET /api/calendar/events/sync for on-demand Outlook calendar sync. For POST /api/calendar/meetings/quick, extract datetime and title from natural language using LiteLLM intent parsing (reuse AI command pipeline from c7bf8a79) before creating the event. Return an outlook_sync_status field in all event responses. Note: this is a dependency linkage and integration task on top of bbc20d3e and temp_microsoft_graph_client.

As a Tech Lead, verify the end-to-end composition of all Reminders page sections. Ensure: RemindersFilter (bd2266d2), RemindersUrgent (210e2b59), RemindersUpcoming (e4916c66), RemindersCompleted (24514c2c), RemindersQuickAdd (a206c467), RemindersEmpty (f1e55a03), Navbar (996ff886), and Footer (10649707) are assembled into a complete Reminders page. Verify: multiple Three.js/R3F Canvas contexts (UrgencyRing, ParticleField, VoiceRing) coexist without WebGL context exhaustion, filter tabs update badge counts from GET /api/reminders/count, RemindersEmpty renders only when all filtered lists are empty, APScheduler overdue flag (isOverdue) is reflected in urgent section styling, voice quick-add simulated recording integrates with POST /api/reminders on submit. Note: depends on Reminders backend integration task (17beef5b) and reminder scheduler (temp_reminder_scheduler_service).

As a Tech Lead, verify the end-to-end integration of the Outlook OAuth2 flow between the Settings frontend (SettingsSecurity: e8c49d82, SettingsSidebar: e55b49a0) and the Outlook OAuth backend (d9c89848). Ensure: clicking 'Connect Outlook' in Settings initiates GET /api/outlook/auth and redirects to Microsoft consent screen, OAuth callback GET /api/outlook/callback stores tokens in outlook_integrations table and redirects back to /Settings with success state, Outlook connection status badge updates to 'Connected' via GET /api/outlook/status, 'Disconnect' button calls POST /api/outlook/disconnect and clears the badge. Verify token refresh occurs transparently before expiry. Confirm Email and Calendar pages show correct sync status post-connection.

As a Tech Lead, verify the end-to-end composition of all Dashboard page sections into a cohesive, data-driven page. Ensure: DashboardHeader (93f1782b), DashboardQuickStats (792691ff), DashboardHolographicPanel (9730f415), DashboardUpcomingEvents (abc1021a), DashboardRecentActivity (f747de15) are assembled with shared Navbar (3a8baae7) and Footer (3815bdcb). Verify: multiple Three.js WebGL canvases (AccentRing, ParticleField, raw WebGLRenderer) coexist without context exhaustion, GSAP timelines do not conflict across sections, stat counts from GET /api/dashboard/stats are reflected in both DashboardQuickStats cards and DashboardHolographicPanel counts, upcoming events and recent activity load from their respective endpoints, PrivateRoute guard redirects unauthenticated users to /Login. Note: also depends on Dashboard integration task (1c2bc707) and AI Voice integration (0c8b7f08).

As a Tech Lead, verify the end-to-end composition of all Email page sections. Ensure: Sidebar (8cc8adb1), Navbar (dc80dbd9), and Footer (daa3acc1) are assembled into a complete Email page. Verify: folder switching in Sidebar triggers re-fetch with correct folder param, Outlook connection status banner displays when GET /api/outlook/status returns disconnected, email list renders with correct unread count badges per folder, compose/reply modal or route triggers POST /api/emails/compose and POST /api/emails/{id}/reply, mark-read fires PATCH on email open, mobile sidebar drawer overlay works correctly. Note: also depends on Email page backend integration task (d1990320) and Outlook OAuth integration (temp_outlook_integration_integration).

As a Tech Lead, verify the end-to-end composition of all Calendar page sections. Ensure: CalendarHeader (79f08070), CalendarSidebar (cf2b1284), CalendarQuickActions (d952a752), Navbar (9c360c68), and Footer (f07d2492) are assembled into a complete Calendar page. Verify: view mode switching (Day/Week/Month/Agenda) in CalendarHeader triggers GET /api/calendar/events with correct date range params, mini-calendar navigation in CalendarSidebar updates the date context, upcoming events widget loads from GET /api/calendar/events/upcoming, Schedule Meeting quick action triggers POST /api/calendar/events and reflects in the calendar grid without full page reload, Outlook sync status banner appears if disconnected. Note: depends on Calendar integration task (fd7d729b) and Outlook integration (temp_outlook_integration_integration).

As a Tech Lead, verify the end-to-end composition of all Settings page sections. Ensure: SettingsHeader (1361a967), SettingsSidebar (e55b49a0), SettingsSecurity (e8c49d82), Navbar (a15bfaa3), and Footer (b1a1e3f1) are assembled into a complete Settings page. Verify: THREE.js canvas in SettingsSecurity initializes without conflicting with other canvases, GSAP entrance animations sequence correctly across SettingsHeader and SettingsSecurity, active sessions list loads from GET /api/settings/sessions with real device/IP/location data, login history table reflects last 10 entries from GET /api/settings/login-history, 2FA toggle calls POST /api/settings/2fa/enable and displays QR code modal, session revoke fires DELETE /api/settings/sessions/{id} and removes the row in real-time, Outlook connect/disconnect buttons reflect live status. Note: depends on Settings integration task (403b53fe) and Outlook OAuth integration (temp_outlook_integration_integration).