zen-content

As a frontend developer, implement the LandingHero section for the Landing page. Build a full-viewport hero using @react-three/fiber Canvas with two 3D particle systems: StarField (800 points in spherical distribution with purple #b794f4 PointMaterial, additive blending, rotating via useFrame clock) and NebulaCluster (200 points with cyan #06b6d4, counter-rotating). Add CameraZoom component using useThree to interpolate camera.position.z from 14 to 3 based on a scrollProgress ref. Wrap the 3D canvas in framer-motion with useScroll/useTransform for parallax text offset. Include headline, subheadline, and CTA button with motion entrance animations. Uses THREE.AdditiveBlending and THREE.MathUtils from three.js.

As a frontend developer, implement the GalaxyGlimpse section for the Landing page. Build an interactive 3D feature constellation using @react-three/fiber Canvas with OrbitControls and Line from @react-three/drei. Render 8 FEATURES as StarNode mesh components at defined [x,y,z] positions — each node uses useRef for meshRef and glowRef, lerps scale (1.0→1.6) and emissiveIntensity (0.4→2.0) on hover via useFrame with delta, and bobs vertically via sin(elapsedTime). Draw 13 CONNECTIONS as Line primitives between node pairs. Manage hoveredIndex and selectedFeature state at parent level. Render an AnimatePresence overlay panel showing feature.desc, color-coded icon, and name when a node is selected/clicked. Uses THREE.Color and THREE.MathUtils.

As a frontend developer, implement the LandingFeatures section for the Landing page. Build a 4-card features grid using framer-motion useInView (sectionRef, once: true, margin: -80px) to trigger staggered entrance animations. Render FEATURES array with Brain, Zap, Target, Clock icons from lucide-react. Apply cardVariants with custom delay (i * 0.1) and cubic-bezier easing [0.25,0.46,0.45,0.94], and headerVariants for the section header. Include two parallax decorative layers: lf-decor-bg (translateY at 0.3x scroll speed) with 3 orb divs, and lf-decor-mid (0.5x speed) with 2 lines and 3 dot divs driven by CSS --scroll custom property.

As a frontend developer, implement the HowItWorks section for the Landing page. Build a 4-step process display using individual StepCard components, each with its own useRef and useInView (once: true, margin: -80px). Each StepCard renders: a step number badge with hiw-step-number-ring span, a spring-animated icon wrapper (rotate -90→0, stiffness 200, damping 14), and a ChevronRight arrow between steps (hidden on last). Icons are Upload, SlidersHorizontal, BrainCircuit, Rocket from lucide-react. All motion elements use staggered delays of index * 0.15 with additional sub-delays (+0.1, +0.2, +0.35) for choreographed entrance. Step descriptions reference GPT-4o Vision, virality prediction, audience psychology, and emotional trigger mapping.

As a frontend developer, implement the FeatureHighlights section for the Landing page. Build 3 alternating left/right highlight rows from the highlights array using framer-motion staggerContainer and slideInLeft variants with useInView. Each highlight includes: an animated SVG blob that morphs between two path keyframes (BLOB_PATHS_A/B/C), a badge pill, title, description paragraph, and a benefits list with Check icons from lucide-react. Rows alternate layout via reversed boolean using CSS flex-direction. Icons are Brain (#b794f4), Zap (#06b6d4), Layers (#f59e0b) with matching gradient pairs. ArrowRight icon appears in CTA links per highlight. Blob paths animate via framer-motion keyframes for organic shape-morphing effect.

As a frontend developer, implement the Testimonials section for the Landing page. Build a 3-card flip testimonial carousel using useState for activeIndex and flipped state, useInView for entrance animation. Each TestimonialCard has a CSS 3D flip mechanic — front face shows avatar (initials + avatarClass color), Star ratings, platform icon (PlatformIcon component rendering YouTube/TikTok/Instagram SVGs), and quote text; back face reveals backStat large number, backStatLabel, backQuote, and backBadge pill. AnimatePresence handles card transitions. RotateCw icon triggers flip reset, ArrowRight advances carousel. Star icons from lucide-react render rating array. Three testimonials: Priya Sharma (+40% CTR), Marcus Chen (4x followers), Aisha Williams (3.2x engagement).

As a frontend developer, implement the PricingPreview section for the Landing page. Build a 6-tier pricing grid with TIERS array using useInView (sectionRef) and AnimatePresence. Render tier cards for Free ($0/5 credits), Creator ($5/25), Pro ($15/60), Pro Popular ($29/150, popular:true with MOST POPULAR badge), Business ($50/500), Enterprise (Custom/Unlimited). Each card shows: tier icon (Zap/Palette/Star/Crown/Briefcase/Building2 from lucide-react), price, credits label, feature checklist with Check icons, and CTA button styled per ctaStyle ('default'|'accent'|'enterprise'). The popular tier gets elevated styling and Sparkles icon accent. Staggered card entrance via framer-motion with index-based delays. Section anchored at id='pricing' for Navbar hash link.

As a frontend developer, implement the TrustBadges section for the Landing page. Build a social proof section with three sub-components: (1) AnimatedStat — 4 stats (10K+ creators, 1M+ videos, 4.8/5 rating, +37% engagement) using framer-motion useMotionValue + animate() to count up from 0 to target value over 1.8s with easeOut, displayed via motionVal.on('change') listener and formatNumber helper (K/M formatting); (2) a logo marquee strip with 8 partner logos (LOGOS array using Sparkles/BarChart3/Zap/Layers/Heart/Eye/Globe/Target icons, each color-coded); (3) a BADGES row with 4 trust badges (SOC 2, E2E Encryption, Best AI Tool 2026, GDPR Ready) using Shield/Lock/Award/CheckCircle icons. All triggered by useInView on the section ref.

As a frontend developer, implement the FinalCTA section for the Landing page. Build the bottom conversion section with: (1) email input + submit form managing email, submitted, and bursts state via useState; (2) ParticleBurst component that spawns 16 radial particles on button click — each particle uses framer-motion motion.div animating from origin {x,y} outward with staggered delays (Math.random()*0.08), colors cycling through ['#7c3aed','#06b6d4','#f59e0b','#b794f4','#4ade80'], and calls onDone when p.id===0 completes; (3) shimmer text animation on subheadline using requestAnimationFrame loop (1200ms duration) updating shimmerPos state from 0 to 120; (4) handlePrimaryClick using useCallback to calculate burst origin from btnRef/sectionRef getBoundingClientRect. useInView triggers section entrance. Sparkles and Calendar icons from lucide-react.

As a frontend developer, implement the Footer section for the Landing page. Build the site-wide footer with: (1) 4-column link grid (Product, Company, Resources, Legal) rendered from columns array using containerVariants staggerChildren (0.12s) and columnVariants (opacity/y entrance) triggered by useInView (once: true, margin: -60px); (2) FooterLink component with hover underline using motion.span scaleX 0→1 transition (0.25s easeOut) and local hovered state; (3) newsletter form with email/submitted state, handleSubmit validation, and 3s auto-reset; (4) social icons row (Twitter, Instagram, Youtube, Linkedin from lucide-react); (5) Brain logo icon with brand name; (6) decorative parallax bg layer at 0.15x scroll speed. This component will likely be reused across pages — check if it already exists.

As a frontend developer, implement the LoginHero section for the Login page. This section renders a full Three.js particle field background using useRef and useEffect with a raw WebGLRenderer (not react-three-fiber). It creates 180 particles with BufferGeometry using position, color, and size BufferAttributes, randomized across colorOptions: ['#7c3aed', '#06b6d4', '#b794f4', '#ffffff']. PointsMaterial uses AdditiveBlending, opacity 0.55, and sizeAttenuation. Two decorative glow spheres (SphereGeometry) are placed off-center at positions (-3,1,-2) and (3,-1,-2) using MeshBasicMaterial with AdditiveBlending at very low opacity (0.06–0.07). The renderer is stored in rendererRef for cleanup, and frameRef tracks the animation loop. The canvas is sized to its parent container. Import LoginHero.css. Note: Navbar may already exist from the Landing page (task 06c69899-3acc-40c2-ad5c-d1e82a24268a).

As a frontend developer, implement the LoginForm section for the Login page. This section is the core authentication UI built with react-three-fiber Canvas and multiple sub-components. The 3D background layer renders a StarField (120 points, useFrame rotation on y and sinusoidal x), three FloatingRing components (torusGeometry with wireframe MeshBasicMaterial, sinusoidal y-position animation via useFrame) at positions [-3.5,1.5,-3], [3.2,-1.2,-2], [0,2.5,-5] in colors '#7c3aed', '#06b6d4', '#b794f4'. The Scene3D wraps these in a Canvas with Suspense. The form uses useState for email, password, showPassword toggle, error state, loading state, and success state. It includes lucide-react icons: Mail, Lock, Eye, EyeOff, AlertCircle, Check, LogIn. There is a GoogleIcon (inline SVG with Google brand colors) and a GithubIcon component for OAuth buttons. Import LoginForm.css.

As a frontend developer, implement the SignupPrompt section for the Login page. This is a simple static section with a root div (sp-root) containing an inner div (sp-inner) that renders a paragraph with className 'sp-text' reading 'Don't have an account?' and an anchor tag with className 'sp-link' pointing to '/Signup' with text 'Sign Up'. No state hooks or animations. Import SignupPrompt.css.

As a frontend developer, implement the SignupHero section for the Signup page. This section uses Three.js (imported via 'three') with a WebGLRenderer mounted on a canvas ref (canvasRef) and an animation frame ref (animFrameRef) for a particle/3D background effect. It includes a custom inline BrainPlayIcon SVG component featuring a brain-left-lobe path, corpus callosum dashed divider, a right-lobe circle with a play triangle (linearGradient 'sh-play-grad' from #b794f4 to #06b6d4), and connecting lines. The hero layout renders avatar initials from AVATAR_INITIALS array ['AK','MJ','SR','LP','TC']. useEffect sets up the Three.js renderer with alpha:true, antialias:true, pixelRatio capped at 2, transparent background, PerspectiveCamera at 60 FOV, and handles resize. Import SignupHero.css for styling. Note: Navbar component may already exist from Landing page.

Design and apply Supabase database migrations for all core tables: (1) profiles (id, user_id FK, display_name, bio, avatar_url, plan, created_at); (2) analyses (id, user_id FK, title, content_type, analysis_mode, score, status, file_url, report_json, created_at); (3) credits (id, user_id FK, total, used, reset_at, plan); (4) transactions (id, user_id FK, type, amount, description, status, payment_method, invoice_id, created_at); (5) chat_messages (id, user_id FK, session_id, role, content, created_at); (6) api_keys (id, user_id FK, key_hash, created_at, last_used_at); (7) webhooks (id, user_id FK, url, event, active). Apply RLS policies per table. Create seed data for demo/mock mode. Note: DashboardStats, HistoryListContainer, AnalysesGrid, ReportScoreCard, TransactionHistory, and SettingsCreditsSection all depend on this schema.

Implement global state management using React Context API (no external library needed per tech stack). Create the following contexts: (1) AuthContext — user session, profile, plan from Supabase auth (wraps entire app in main.jsx); (2) CreditsContext — current credits balance, used, total, reset_at, with refreshCredits() function; (3) AnalysisContext — currently selected analysis ID and report data for passing between Analyze → Report pages. Create custom hooks: useAuth(), useCredits(), useAnalysis() that throw if used outside their providers. Wire up DashboardSidebar, AnalyzeSidebar, SettingsHeader, CreditsHeader, DashboardWelcome, and DashboardCreditsPanel to read from CreditsContext instead of hardcoded constants. This is a prerequisite for all pages that display user-specific data.

As a Tech Lead, verify end-to-end integration between all Dashboard page frontend sections and their backend data sources. Confirm: (1) DashboardStats (008e9924) fetches real aggregated stats from GET /functions/dashboard/stats replacing STATS hardcoded array; (2) DashboardWelcome (4c7b9c15) reads authenticated user display_name and plan from AuthContext instead of hardcoded 'Arjun'/'Free Plan'; (3) DashboardRecentAnalyses (b8c2aecb) pulls real data from GET /functions/analyses (b443cd90) with limit=4; (4) DashboardCreditsPanel (8ae3e2fc) reads live credits from CreditsContext instead of hardcoded 10/10; (5) DashboardSidebar (7897df62) countdown timer syncs with credits reset_at from CreditsContext; (6) DashboardAICoach (486f308a) is wired to the AI Chat Coach API (b700f264). Ensure all dashboard sections reflect real-time user data.

As a Tech Lead, verify end-to-end integration between SettingsNotificationsSection (1ae21fa2) and the Notifications Preferences API (tmp_notifications_api). Confirm that on page load, notification toggles and frequencies are fetched from GET /functions/notifications and populate the initial state (replacing NOTIFICATION_ITEMS defaultOn/defaultFreq hardcoded values). Verify handleSave correctly calls PATCH /functions/notifications with the current toggles and frequencies maps, the save confirmation (Check icon, 2800ms timeout) reflects successful API response, and error states are handled gracefully if the API call fails.

As a frontend developer, implement the SignupForm section for the Signup page. This section contains multiple inline SVG icon components: IconUser, IconMail, IconLock, IconEye (with off prop toggling eye/eye-off paths), IconCheck, IconCheckCircle, IconAlert, IconArrow, and IconGoogle (Google logo SVG). Uses useState for form field values and validation state, useRef for DOM references, and useEffect for Three.js canvas background rendering (same pattern as SignupHero — WebGLRenderer with alpha:true). The form includes full name, email, and password fields with inline icon decorations, password visibility toggle via IconEye, real-time validation feedback using IconAlert and IconCheckCircle, a submit button with IconArrow, and a Google OAuth button with IconGoogle. Import SignupForm.css for field focus states, error/success styling, and glassmorphism card design.

As a frontend developer, implement the SignupFeatures section for the Signup page. This section renders a static FEATURES array of three feature cards: 'Deep AI Analysis' (key:'ai'), 'Instant Reports' (key:'reports'), and 'Actionable Insights' (key:'insights'). Each card object includes badge text, badgeClass, iconClass, svgClass, glowClass, dotClass, title, desc, bullets array (3 items each), and an inline SVG icon. The AI card icon is a brain/face SVG with circle eyes and smile path; the Reports card icon is a rectangle with a line-chart path; the Insights card icon uses a layered path design. Cards are styled with per-key CSS modifier classes (sf-card-badge--ai, sf-icon-wrap--ai, sf-card-glow--ai, sf-bullet-dot--ai, etc.). Import SignupFeatures.css for card layout, badge pills, glow effects, and bullet dot styling. This section is independent of SignupForm and can be built in parallel.

As a frontend developer, implement the SignupSocial section for the Signup page. This section uses useState(0) for activeIndex and useRef for carouselRef to manage a scrollable testimonial carousel. TESTIMONIALS array contains 4 entries (Arjun Mehta/YouTube, Sofia Reyes/TikTok, Marcus Webb/Instagram, Priya Sharma/YouTube Shorts) each with name, initials, platform, platformColor, quote, stat, statIcon, and stars fields. handleDotClick scrolls the carouselRef's .ss-card elements via scrollIntoView with behavior:'smooth' and inline:'start'. TRUST_INITIALS ['AK','SR','MW','PL','JR'] and TRUST_COLORS arrays render avatar stack with per-index background colors. The layout includes decorative orbs (ss-decor-orb--1/2), a header with eyebrow/dot, h2 with '12,000+ Creators' span, subtitle, the carousel of ss-card items, and dot navigation via handleDotClick. Import SignupSocial.css for carousel snap, card glassmorphism, avatar fallbacks, dot navigation, and orb blur effects. This section is independent of SignupForm and SignupFeatures.

As a frontend developer, implement the Navbar section for the Dashboard page. This component may already exist from the Landing page (task 06c69899-3acc-40c2-ad5c-d1e82a24268a). It uses useState for `scrolled`, `mobileOpen`, and `hoveredLink` states, useEffect for scroll listener (threshold: 60px) and body overflow locking when mobile menu is open. Features an animated SVG logo built from 6 LOGO_PATHS using Framer Motion `pathLength` staggered variants (delay: i*0.12, duration 0.6), an animated logo text with opacity/x entrance (delay 0.5s), NAV_LINKS array mapping to motion.a elements with spring hover scale (stiffness 400, damping 25), and a mobile drawer with AnimatePresence. Applies `nb-scrolled` class on scroll. Verify reuse from Landing Navbar before reimplementing.

Set up Cloudinary upload integration for video and image file uploads from the Analyze page. Configure VITE_CLOUDINARY_CLOUD_NAME and VITE_CLOUDINARY_UPLOAD_PRESET environment variables. Create a uploadToCloudinary(file) utility (src/lib/cloudinary.js) that POSTs to the Cloudinary unsigned upload endpoint and returns the secure_url and public_id. Integrate this into AnalyzeUploadZone (24d4027f) so that after file selection/drop, the file is uploaded and the URL is stored before analysis. Handle upload progress events for the AnalyzeSelectedFile (7f5abb78) progress display. Support video/mp4, video/quicktime, video/x-msvideo, image/png, image/jpeg, image/webp, image/gif MIME types with max 2GB file size limit.

Implement credit lifecycle management via Supabase Edge Functions: (1) GET /functions/credits — returns current user's credit balance, plan, reset_at countdown; (2) POST /functions/credits/deduct — atomically deducts N credits and writes a transaction record (used by analysis and chat functions); (3) POST /functions/credits/reset — cron-triggered daily reset for free plan users setting used=0 and reset_at=next midnight UTC; (4) GET /functions/transactions — paginated transaction history with filter by type (purchase/usage/refund/gift). Wire up CreditsHeader (6ab17a48), CreditBalance (8bf05763), UsageBreakdown (ecff5add), TransactionHistory (0872209d), DashboardCreditsPanel (8ae3e2fc), and SettingsCreditsSection (28aa0f0b) to these real endpoints replacing hardcoded constants.

Implement API key and webhook management endpoints via Supabase Edge Functions: (1) GET /functions/api-keys — returns masked key (first 8 + last 4 chars); (2) POST /functions/api-keys/regenerate — generates a new crypto.randomUUID()-based key, stores SHA-256 hash in api_keys table, returns plaintext key once; (3) GET /functions/webhooks — lists user's webhooks from webhooks table; (4) POST /functions/webhooks — creates new webhook entry; (5) DELETE /functions/webhooks/:id — removes webhook; (6) PATCH /functions/webhooks/:id — toggles active status. Wire up SettingsAPISection (ff12c82c) handleRegenerate, handleAddWebhook, handleDeleteWebhook, handleToggleWebhook, handleCopy to these real endpoints, replacing REAL_KEY and INITIAL_WEBHOOKS constants.

Set up React Router DOM v6 routing in App.jsx or main.jsx with all 11 pages: /, /Login, /Signup, /Dashboard, /Analyze, /Report/:analysisId, /Chat, /History, /Analyses, /Credits, /Settings. Implement a ProtectedRoute wrapper component that reads from AuthContext — if user is not authenticated, redirects to /Login with the intended path stored in location state. PublicRoute wrapper redirects authenticated users away from /Login and /Signup to /Dashboard. Add a NotFound (404) route. Lazy-load all page components with React.lazy + Suspense for performance. This is a cross-cutting concern that all page components depend on for navigation (existing NavLink hrefs like /Dashboard, /Analyze, /Chat, /Credits, /History, /Settings, /Report, /Signup).

Create a Supabase database function and trigger that automatically creates a profiles table record when a new user signs up via auth.users. The trigger function should: (1) fire on INSERT on auth.users table; (2) insert a new row into public.profiles with id=NEW.id, user_id=NEW.id, display_name=NEW.raw_user_meta_data->>'full_name' (fallback to email prefix), avatar_url=NEW.raw_user_meta_data->>'avatar_url' (for Google OAuth), plan='free', created_at=NOW(); (3) also create a credits row with user_id=NEW.id, total=10, used=0, reset_at=next midnight UTC, plan='free'. This ensures every new signup automatically has a profile and credits record, preventing null reference errors in SettingsProfileSection (48f961f3), DashboardWelcome (4c7b9c15), and CreditsContext (0a3998c8).

As a frontend developer, implement the DashboardSidebar section for the Dashboard page. Uses useState for `drawerOpen` and `countdown` (initialized to 14h 25m 36s = 51936 seconds), with a setInterval useEffect decrementing countdown every second (cleanup on unmount). Renders a mobile toggle button with ChevronDown icon that rotates via `ds-open` class. Maps NAV_ITEMS array (8 items: Dashboard, Upload & Analyze, AI Chat Coach, My Analyses, History, Credits & Plans, Settings, Help & Support) with lucide-react icons; active item gets `ds-active` class and aria-current='page'. Displays a credits progress bar computed from REMAINING_CREDITS/TOTAL_CREDITS (0/10 = 0%), a live countdown timer via formatTime() outputting hh:mm:ss format, and an upgrade CTA with ArrowRight icon. Inner scrollable area toggles `ds-drawer-open` class on mobile.

As a frontend developer, implement the DashboardHeader section for the Dashboard page. Uses useState for `searchValue`, `avatarOpen`, `refreshing`, and `showToast`; uses useRef for `avatarRef` for outside-click detection. Features a controlled search input with Search icon. Refresh button triggers a 700ms fake refresh via setTimeout, then shows a toast (CheckCircle icon) for 2500ms — applies `dh-refreshing` class during animation. Avatar button ('AK' initials) toggles a dropdown menu containing DROPDOWN_ITEMS (Profile, My Analyses, Settings) plus a LogOut option; dropdown closes on outside click via mousedown event listener. Notification bell has a `dh-notif-dot` badge. Upgrade Plan CTA links to /Credits with Zap icon.

As a frontend developer, implement the DashboardWelcome section for the Dashboard page. Simple static section with no state hooks. Computes today's date via `new Date()` formatted with toLocaleDateString using options `{ weekday: 'short', month: 'short', day: 'numeric' }`. Renders an h1 greeting 'Welcome back, Arjun' with a waving hand emoji span (role='img', aria-label='waving hand'). Displays a `dw-date-badge` with a `dw-date-dot` indicator and the formatted date string. Displays a `dw-plan-badge` with a Zap icon (lucide-react) and 'Free Plan' text. Layout uses `dw-inner` flexbox splitting `dw-text` and `dw-meta`.

As a frontend developer, implement the DashboardStats section for the Dashboard page. Renders 4 stat cards from the STATS array (Total Analyses, Avg. Video Score, Content Improved, Credits Used) each with a lucide-react icon (BarChart2, TrendingUp, Zap, CreditCard). Each card includes a `Sparkline` sub-component that uses an HTML5 Canvas element with useRef/useEffect for DPI-aware rendering (window.devicePixelRatio). The sparkline draws a bezier-curve line with gradient fill using ctx.createLinearGradient and ctx.bezierCurveTo, with color values per stat (purple #b794f4, cyan #06b6d4, green #4ade80, amber #f59e0b). Cards display value+suffix, sublabel, trend string with trendDir indicator. Canvas dimensions are set from wrapperRef.current.clientWidth/clientHeight for responsive sizing.

As a frontend developer, implement the DashboardQuickActions section for the Dashboard page. Stateless functional component that maps the ACTIONS array (4 items: Upload & Analyze Video linking to /Analyze, Upload Image linking to /Analyze, AI Chat Coach linking to /Chat, Paste Link linking to /Analyze) each rendered as an anchor tag with modifier class (dqa-btn--video, dqa-btn--image, dqa-btn--chat, dqa-btn--url). Each action contains a `dqa-icon-wrap` div with the lucide-react icon (Video, Image, MessageSquare, Link) and a `dqa-label` span. Grid layout via `dqa-grid` class. Section heading 'Quick Actions' in h2.

As a frontend developer, implement the DashboardRecentAnalyses section for the Dashboard page. Renders the ANALYSES array (4 items: YouTube, Instagram Reels, Thumbnail Design, TikTok) as AnalysisRow sub-components. Each AnalysisRow uses local useState for `imgError` to handle broken image fallback (shows typeEmoji '▶' or '🖼' in `dra-thumb-icon`). Score tier computed via getScoreTier() (>=80='high', >=60='medium', else='low') and getScoreLabel() used for badge label and bar class (`dra-bar-high/medium/low`). Each row is an anchor linking to /Report, with a `dra-thumb-img` from Unsplash URLs, `dra-type-badge` for contentType, `dra-analysis-subtype` for analysisMode, a CSS score bar fill with inline width style (`${item.score}%`), and a `dra-score-badge` with tier class and score label.

As a frontend developer, implement the DashboardCreditsPanel section for the Dashboard page. Uses useState for `secondsLeft` (initialized to 25, cycles back to 25 when it reaches 1) and `faqOpen` (boolean for FAQ accordion toggle). A setInterval useEffect decrements secondsLeft every 1000ms. Displays credits 10/10 used with a progress bar fill at 100% (`progressPercent = Math.round((10/10)*100)`). formatTimer() formats seconds to 'Xm Ys' or 'Xs'. Maps CREDIT_ITEMS array (4 items: Image Basic 3cr, Video Basic 5cr, AI Chat Basic 1cr, AI Chat Deep 3cr) each with a colored dot class. Maps FAQ_ITEMS (3 items) in a collapsible accordion toggled by `faqOpen` state with ChevronDown icon. Includes an upgrade CTA button with ArrowUp icon and HelpCircle info icon. Header shows Zap icon, title 'Credits & Plan', and 'Free Plan' badge.

As a frontend developer, implement the DashboardAICoach section for the Dashboard page. Uses useState for `messages` (initialized with INITIAL_MESSAGES array of 4 pre-seeded messages with role='ai'/'user'), `inputVal` (controlled textarea), and `isTyping` (boolean for typing indicator). useRef `threadRef` auto-scrolls to bottom via scrollTop = scrollHeight in a useEffect triggered on messages/isTyping changes. sendMessage() appends a user message, sets isTyping=true, then after a timeout appends an AI reply from AI_RESPONSES map (keyed by trimmed text) or a fallback string, then clears isTyping. QUICK_SUGGESTIONS array (Fix my hook, Improve retention, Make it viral) renders as clickable chips that call sendMessage(). SCORE_GUIDE array (4 ranges with hex colors) renders as a legend. Messages display Bot/User icons with time stamps. Plus button for new chat session. Send button triggers sendMessage on click or Enter key.

As a frontend developer, implement the Footer section for the Dashboard page. This component may already exist from the Landing page (task bdc0b604-b65e-4943-8301-9b8c657962ac). Uses useState for `email` and `submitted`; uses useRef + Framer Motion `useInView` (once: true, margin: '-60px') for scroll-triggered entrance animation. Renders 4 link columns (Product, Company, Resources, Legal) via the `columns` array using Framer Motion `containerVariants` (staggerChildren: 0.12) and `columnVariants` (opacity 0→1, y 24→0). Each link uses the `FooterLink` sub-component with local `hovered` state driving a motion.span underline that animates scaleX 0→1 (duration 0.25). Social icons (Twitter, Instagram, Youtube, Linkedin from lucide-react) render as buttons. Newsletter form with controlled email input calls handleSubmit which sets `submitted=true` for 3 seconds then resets. Decorative `ftr-decor-bg` div uses CSS custom property `--scroll` for parallax. Verify reuse from Landing Footer before reimplementing.

As a frontend developer, implement the Navbar section for the Analyze page. This component may already exist from the Dashboard page (task 9adbcbc7-de7e-4db8-ac7e-acb57a09a351) — verify reuse before rebuilding. The Navbar uses useState for `scrolled`, `mobileOpen`, and `hoveredLink`, plus useEffect for scroll listener (threshold: 60px) and body overflow lock when mobile menu is open. Features an animated SVG logo with 6 LOGO_PATHS using framer-motion `pathVariants` with staggered pathLength draw animations (delay: i*0.12, duration 0.6). Logo text animates in with opacity/x slide (delay 0.5s). Nav links use `whileHover={{ scale: 1.05 }}` spring animation and `hoveredLink` state for hover tracking. Includes a mobile menu with AnimatePresence. Applies `nb-scrolled` CSS class when scrollY > 60. NAV_LINKS includes Landing, Dashboard, Analyze (active), Chat, Credits.

As a frontend developer, implement the AnalysesHeader section for the Analyses page. This section renders a full-width header with a Three.js MiniOrbitCanvas background featuring a central glowing purple sphere (MeshStandardMaterial, emissive 0x7c3aed), a TorusGeometry orbit ring, ambient and point lights, and animated orbiting satellite meshes. Overlay three stat cards (STATS array) for Total Analyses (24), Avg. Viral Score (78/100), and Last Analysis (2 hrs ago), each with an SVG icon, value, sub-label, and optional badge pill. Uses useRef and useEffect for Three.js lifecycle management with frameRef for animation loop cleanup. Component may share Navbar from Dashboard page (task 9adbcbc7-de7e-4db8-ac7e-acb57a09a351).

As a frontend developer, implement the AnalysesFilters section for the Analyses page. This section renders a responsive filter bar with useState hooks managing: search string, contentType (all/video/image via CONTENT_TYPES), sortBy (newest/oldest/score_desc/score_asc via SORT_OPTIONS), status (all/completed/in_progress/failed via STATUS_OPTIONS), dateFrom, dateTo, and mobileOpen toggle. Uses a matchMedia listener (768px breakpoint) via useEffect to toggle isDesktop and show/hide controls. Renders a Search icon input, lucide-react icons (SlidersHorizontal, Video, Image, ArrowUpDown, Activity, Calendar, ChevronDown, ChevronUp, X), active filter pills with removePill and clearAll handlers, and a mobile accordion toggle. controlsVisible gates the filter panel display.

As a frontend developer, implement the AnalysesGrid section for the Analyses page. This section renders a responsive card grid from the ANALYSES array (6 items: YouTube, Instagram, Thumbnail, TikTok, Product Launch, Blog Post). Each AnalysisCard shows an Unsplash thumbnail image, title, type badge (video/image/thumbnail/link with getBadgeClass), mode label, date with lucide Calendar icon, ExternalLink icon button, and a ScoreCircle SVG component. ScoreCircle uses CIRCLE_R=21 and CIRCLE_C=2*PI*CIRCLE_R to render an SVG donut with strokeDashoffset-based score fill and getScoreClass (high/mid/low thresholds at 80 and 60). Uses useEffect and useRef for card entrance animations.

As a frontend developer, implement the AnalysesPagination section for the Analyses page. This section renders a pagination bar with useState hooks for currentPage (default 2) and pageSize (default 25). PAGE_SIZE_OPTIONS are [10, 25, 50] with TOTAL_ITEMS=87. Implements getPageNumbers() logic producing ellipsis-aware page arrays for totalPages > 7. Renders: a rows-per-page select dropdown with handlePageSize resetting to page 1, an item range info display (startItem–endItem of TOTAL_ITEMS), desktop page number buttons with apg-page-btn--active class, ellipsis spans, and ChevronLeft/ChevronRight prev/next nav buttons with disabled state when at bounds. Also renders a mobile simplified prev/next control variant.

As a frontend developer, implement the AnalysesEmptyState section for the Analyses page. This section renders an empty state view with a Three.js WebGLRenderer canvas (alpha: true, antialias: true) containing 80 floating particles using BufferGeometry with Float32Array positions, colors (from colorOptions: #7c3aed, #06b6d4, #f59e0b, #b794f4), and speeds arrays. Uses canvasRef, animRef, and sceneRef with a PerspectiveCamera at z=5 and a resize handler. Overlays a BrainIcon SVG component, an UploadIcon SVG component, heading/subtext, four HINT_CHIPS pills (Upload Video, Paste URL, Analyze Image, Deep Analysis with distinct colors), and a primary CTA button. Cleanup removes the animation frame on unmount.

As a frontend developer, implement the Navbar section for the Credits page. This reuses the shared Navbar component (may already exist from Dashboard/Analyze pages) with NAV_LINKS array including Landing, Dashboard, Analyze, Chat, Credits routes. Features: framer-motion SVG logo path draw animation across 6 LOGO_PATHS with staggered pathVariants (custom delay per path index), scroll-based nb-scrolled class toggled via useEffect/useState at 60px threshold, mobile drawer with body overflow lock via useEffect, hoveredLink state for nav item hover effects, framer-motion whileHover scale(1.05) on nav items with spring stiffness 400/damping 25, AnimatePresence for mobile drawer. Credits link should appear active/highlighted in nav.

As a frontend developer, implement the HistoryHeader section for the History page. This section renders a breadcrumb nav linking back to /Dashboard, an h1 title 'Analysis History', and a subtitle. It includes a controls row with a badge group showing a BarChart2 icon with hardcoded count '24' and a synced status dot badge. The actions area contains a custom sort dropdown (hh-sort-wrap) using SlidersHorizontal and ChevronDown icons with SORT_OPTIONS state managed via useState('newest'), an export button that triggers a simulated async export via setTimeout (setExporting state with 1800ms delay) showing 'Exporting...' text during export with Download icon, and a '+New Analysis' anchor linking to /Analyze with Plus icon. Uses lucide-react icons throughout.

As a frontend developer, implement the HistoryFiltersBar section for the History page. This section manages four pieces of state via useState: activeTab ('all'), activeDateRange ('all_time'), sortBy ('newest'), and searchQuery (''). It renders a tablist of FILTER_TABS (All/Video/Image/Thumbnail with lucide icons and count badges) with active tab highlighting via hfb-tab--active class. Includes a date range selector from DATE_RANGES array, a sort dropdown from SORT_OPTIONS, and a search input. Implements a getActiveChips() function that computes removable filter chips based on active state, a hasActiveFilters computed boolean, and a handleClearAll() that resets all four state values. Chips render with X icon via the lucide-react X component for individual removal. Uses Search, Video, Image, LayoutGrid, Layers, X, ChevronDown, SlidersHorizontal from lucide-react.

As a frontend developer, implement the HistoryListContainer section for the History page. This section renders a list of 8 hardcoded ANALYSES items each containing id, title, platform, platformColor, type, mode, score, date, status (complete/processing/failed), and Unsplash thumb URL. Implements a getScoreColor(score) helper that returns stroke color and textClass based on score thresholds (>=80 green #10b981, >=60 amber #f59e0b, else red #ef4444). Each analysis card displays a thumbnail image, platform badge with dynamic platformColor, type icon (Video/Image/LayoutTemplate from lucide-react), mode label, an SVG circular score gauge using stroke-dasharray/stroke-dashoffset, and a status badge. Each card has a MoreVertical icon triggering a dropdown menu with Eye (View), Play (Re-run), RefreshCw (Refresh), Download, FileText, and Trash2 actions. Uses useState for managing open dropdown per card. Imports Eye, MoreVertical, Play, Trash2, RefreshCw, Download, FileText, Video, Image, LayoutTemplate from lucide-react.

As a frontend developer, implement the HistoryPagination section for the History page. This section manages currentPage (useState(1)) and perPage (useState(10)) state. Implements a getPageNumbers(current, total) utility that returns a smart page number array with ellipsis ('...') entries for large page counts, handling edge cases for pages near start (<=4), near end (>=total-3), and middle positions. Renders a per-page dropdown select with options 10/25/50 that resets currentPage to 1 on change. Displays a page indicator showing startItem–endItem of TOTAL_ITEMS (47) with hp-indicator-highlight spans. Renders pagination controls with ChevronsLeft (first), ChevronLeft (prev), numbered page buttons with active styling, ChevronRight (next), ChevronsRight (last) — all from lucide-react — with disabled states when at boundaries. The hp-divider element renders above the controls row.

As a frontend developer, implement the Navbar section for the Settings page. This Navbar variant uses LOGO_PATHS array of 6 SVG path strings animated via framer-motion pathVariants with custom staggered pathLength draw animation (delay: i * 0.12, duration: 0.6). Manages scrolled state via useEffect scroll listener (threshold: 60px) applying nb-scrolled class, mobileOpen state with body overflow lock, and hoveredLink state for desktop hover indicators. Renders 5 NAV_LINKS (Landing, Dashboard, Analyze, Chat, Credits) with spring-based whileHover scale (stiffness 400, damping 25). Logo text animates in with opacity/x offset (delay 0.5s). Check if this Navbar component already exists from Landing or other pages before re-implementing — it may differ slightly in nav links.

Implement the AI analysis engine that powers the core platform feature. Create a Supabase Edge Function (or Node.js serverless function) at /functions/analyze that: (1) accepts { file_url, content_type, analysis_mode } payload; (2) calls OpenAI GPT-4o Vision API with the media URL and a structured psychology/virality analysis prompt; (3) parses the response into the report schema: { overall_score, hook_score, retention_score, content_value_score, engagement_score, trend_potential_score, retention_points[], working_items[], needs_items[], recommendations[], psychology_insights }; (4) stores the result in the analyses table via Supabase; (5) deducts credits from the credits table based on content_type and analysis_mode (Image Basic=2, Image Deep=8, Video Basic=5, Video Deep=15). Set OPENAI_API_KEY in Supabase secrets. Note: AnalyzeActionButton (1f1c90e9), ReportScoreCard (7725a45a), ReportOverview (bd04ecec), and ReportScoreBreakdown (acbc5650) all depend on this endpoint returning real data.

Implement Razorpay payment integration (UI-ready, as specified in SRD). Add VITE_RAZORPAY_KEY_ID environment variable. Create a razorpay.js utility that loads the Razorpay checkout script and opens the payment modal with plan amount, currency (INR), and user prefill data. On payment success callback, call a Supabase Edge Function POST /functions/payments/verify that validates the Razorpay signature (using razorpay_payment_id, razorpay_order_id, razorpay_signature) and upgrades the user's plan in the credits/profiles tables. Wire up CreditPlans (0ba9e574) CTA buttons and SettingsBillingSection (d35cf2fa) 'Upgrade' button to trigger the Razorpay modal. Mark as UI-ready/demo mode if VITE_RAZORPAY_KEY_ID is not set — show a toast 'Payments coming soon' instead of opening modal.

Implement profile CRUD via Supabase client calls: (1) GET profile — reads from profiles table joined with auth.users; (2) PATCH profile — updates display_name, bio, avatar_url; (3) PATCH email — calls supabase.auth.updateUser({ email }) triggering email change confirmation flow; (4) PATCH password — calls supabase.auth.updateUser({ password }) after validating current password; (5) GET sessions — reads active auth sessions; (6) POST logout-others — calls supabase.auth.signOut({ scope: 'others' }). Wire up SettingsProfileSection (48f961f3) and SettingsSecuritySection (c852406b) to these real Supabase calls, replacing mock saved/timeout state with actual API responses. Avatar upload should call the Cloudinary upload utility before saving the URL to profiles.

As a Tech Lead, verify end-to-end integration between LoginForm (460ec01d) / SignupForm (81a75ab0) frontend sections and the Supabase Auth backend (d0d824a3). Ensure supabase.auth.signInWithPassword, signUp, and signInWithOAuth calls work correctly from the UI, session state propagates via AuthContext, ProtectedRoute redirects unauthenticated users, and PublicRoute redirects authenticated users away from /Login and /Signup. Validate error states and success redirects to /Dashboard.

As a Tech Lead, verify end-to-end integration between the Global State Management setup (0a3998c8) and all consumer components. Confirm AuthContext session propagates to ProtectedRoute (e4ecfe23) and all sidebar/header components displaying user info. Confirm CreditsContext balance updates live after analysis runs (13d44b84) and credit deductions (1a120cb1), and that DashboardSidebar (7897df62), AnalyzeSidebar (aae7461c), SettingsHeader (a9119a89), CreditsHeader (6ab17a48), and DashboardCreditsPanel (8ae3e2fc) all reflect real-time values rather than hardcoded constants.

As a Tech Lead, verify end-to-end integration between React Router DOM configuration (e4ecfe23) and Supabase Auth (d0d824a3) via AuthContext (0a3998c8). Confirm that ProtectedRoute correctly reads session from AuthContext and redirects unauthenticated users to /Login with intended path in location state, PublicRoute redirects authenticated users away from /Login and /Signup to /Dashboard, lazy-loaded page components load without flashing on route transitions, and the NotFound 404 route renders correctly for unknown paths.

As a Tech Lead, verify end-to-end integration between the Signup page frontend sections (SignupHero f40be127, SignupForm 81a75ab0, SignupFeatures 5eadc1bd, SignupSocial beeb01ef) and Supabase Auth backend (d0d824a3). Confirm that SignupForm correctly calls supabase.auth.signUp and supabase.auth.signInWithOAuth (Google), session state propagates via AuthContext after successful signup, new users are redirected to /Dashboard, profile record is auto-created in the profiles table via Supabase trigger or Edge Function on_auth_user_created, and error states (email already exists, weak password) are displayed inline in the form.

Implement a global error handling and loading state infrastructure for the React app: (1) Create ErrorBoundary class component (src/components/ErrorBoundary.jsx) that catches render errors and shows a user-friendly error UI with retry button and report link; (2) Create PageLoader component (src/components/PageLoader.jsx) with a dark-themed skeleton/spinner for Suspense fallback during lazy-loaded page transitions; (3) Create ApiErrorHandler utility (src/lib/apiError.js) that standardizes error parsing from Supabase errors, OpenAI errors, and Cloudinary errors into { message, code, retryable } format; (4) Wrap all Suspense boundaries in ErrorBoundary; (5) Create useToast hook (src/hooks/useToast.js) for consistent error toast notifications across the app replacing per-component setTimeout toast patterns. This is a cross-cutting concern improving UX per SRD non-functional requirement 'perform optimally across various devices'.

As a frontend developer, implement the AnalyzeHeader section for the Analyze page. This section renders a full-bleed hero header with a Three.js canvas background (imported via `import * as THREE from 'three'`) managed via useRef/useEffect for renderer lifecycle. Displays FILE_TYPES array (MP4/MOV, PNG/JPG, WEBP/GIF, Thumbnail, Max 2GB) as pill badges each with inline SVG icons. Renders a TABS row (Upload, Paste Link, From Device, My Analyses) with SVG icons for each tab, used as navigation/filter tabs for the upload workflow. Uses useState, useEffect, and useRef for Three.js mount/unmount cleanup and tab active state management. The Three.js scene serves as an animated background visual.

As a frontend developer, implement the AnalyzeSidebar section for the Analyze page. Renders a collapsible aside with `asb-root` / `asb-expanded` CSS classes toggled by `mobileExpanded` useState. NAV_ITEMS (8 items: Dashboard, Upload & Analyze [active], AI Chat Coach with 'AI' badge, My Analyses, History, Credits & Plans, Settings, Help & Support) use lucide-react icons. Includes a `MiniStars` Three.js component rendered via `@react-three/fiber` Canvas — 18 sphere meshes arranged in a ring, rotating via useFrame (rotation.y at 0.12x elapsed time, rotation.x sinusoidal). Features a custom `useTimer` hook using setInterval (1s tick) counting down from 14h 25m 36s, displayed as a credits-reset countdown. Shows a credit usage progress bar (creditsUsed=10/creditsTotal=10, 100% used) with `creditsPct` calculation. Mobile toggle bar expands/collapses sidebar.

As a frontend developer, implement the AnalyzeUploadZone section for the Analyze page. Renders a tab switcher (TABS: Upload, Paste Link, From Device) with `activeTab` useState controlling visible panel. The Upload tab shows a drag-and-drop dropzone (`auz-dropzone`) with full drag event handling: `handleDragEnter`, `handleDragLeave`, `handleDragOver`, `handleDrop` using a `dragCounter` ref to track nested drag enter/leave events — applies `auz-dragging` class when files are being dragged, `auz-hover` when hovered without dragging. Hidden `<input type='file'>` ref triggered on zone click via `handleZoneClick`. Accepts video/mp4, video/quicktime, video/x-msvideo, image/png, image/jpeg, image/webp, image/gif. FORMATS array (MP4/MOV/AVI, PNG/JPG/RAW, Thumbnails) with lucide-react Film, Image, LayoutGrid icons shown as format badges. Paste Link tab renders a URL input with `urlValue` state and `handleUrlSubmit` form handler. All handlers use useCallback for memoization.

As a frontend developer, implement the AnalyzeOptions section for the Analyze page. Renders two interactive selection groups managed by `selectedType` and `selectedMode` useState hooks. Content Type group: two toggle buttons (Video with lucide Video icon, Image with lucide Image icon) styled with `ao-type-btn` / `ao-type-active` classes and an `ao-type-indicator` span. Analysis Mode group: two radio-style cards (Basic Analysis: 2 Credits badge `ao-mode-badge--basic`, Deep Analysis: 15 Credits badge `ao-mode-badge--deep`) with role='radio', aria-checked, tabIndex, and keyboard handling (Enter/Space key). Each mode card shows a description string, an `ao-radio` dot indicator, and tag pills (Basic: Hook Score, Viral Potential, Engagement Score; Deep: Hook Score, Retention Map, Psychology Score, Content Value, Audience Fit). Active card gets `ao-mode-active` class. Section is preceded by an `ao-divider`.

As a frontend developer, implement the Footer section for the Analyze page. This component may already exist from the Landing or Dashboard pages (tasks bdc0b604-b65e-4943-8301-9b8c657962ac, 32a1d1f9-b881-4a49-b2d2-514fe879db0c) — verify reuse before rebuilding. Uses framer-motion `useInView` (ref, once:true, margin:'-60px') to trigger stagger entrance animation. Four link columns (Product, Company, Resources, Legal) each rendered with `columnVariants` (opacity 0→1, y 24→0, duration 0.5) inside `containerVariants` with `staggerChildren: 0.12`. `FooterLink` sub-component uses useState `hovered` to animate an underline span via `motion.span` scaleX 0→1 (duration 0.25). Newsletter form: `email` useState, `submitted` useState toggled on valid submit with 3s auto-reset via setTimeout. Social icons row: Twitter, Instagram, Youtube, Linkedin from lucide-react. Decorative `ftr-decor-bg` with CSS variable `--scroll` parallax transform. Legal links row at bottom.

As a frontend developer, implement the CreditsHeader section for the Credits page. Renders a section with decorative background (ch-decor with two positioned orbs ch-decor-orb--1/2 and ch-decor-line), breadcrumb nav linking to /Dashboard with Home icon and ChevronRight separator from lucide-react, header row with Coins icon badge and title block showing 'Credits & Plans' with ch-title-accent span, subtitle text about managing credit balance. Quick stats strip (ch-stats-strip) with 4 stat items: Current Balance (10/10 with Zap icon Free Plan badge ch-stat-badge--purple), Resets In (14h 25m with cyan value and Daily Reset badge), Total Used This Month (350 with TrendingUp icon +12% vs last month badge), Analyses Completed (24 with accent value). Static display with no state — all values hardcoded. CTA area below stats.

As a frontend developer, implement the CreditBalance section for the Credits page. Features a live countdown timer via useCountdown hook using setInterval (1s tick) computing hours/minutes/seconds from RENEWAL_DATE (2026-06-01). ThreeOrbCanvas component using Three.js directly (not R3F): creates WebGLRenderer with alpha:true, three TorusGeometry rings (purple #7c3aed, cyan #06b6d4, lavender #b794f4) with MeshPhysicalMaterial (metalness 0.7, roughness 0.2), staggered y-positions (0, 0.35, -0.35) and x-rotations, 60 floating BufferGeometry particles, requestAnimationFrame loop with ring rotation and particle drift, cleanup on unmount. Constants CREDIT_USED=10, CREDIT_TOTAL=10. Displays credit balance with radial progress, countdown formatted with pad() helper (padStart 2), renewal date info, RefreshCw/Zap/Calendar/TrendingUp/Clock/Info/ArrowUpRight/History icons from lucide-react.

As a frontend developer, implement the CreditPlans section for the Credits page. Renders 5 pricing plan cards from PLANS array: Free (0/day, 10 credits/day), Creator ($5/mo, 100 credits/month), Pro ($15/mo, 350 credits/month), Pro Most Popular ($29/mo, 800 credits/month, popular:true), Business ($50/mo, 1500 credits/month). useState for billing toggle (monthly/yearly) — yearly prices are discounted (Creator $4, Pro $12, ProPopular $23, Business $40). Each card shows plan name, price, creditsHighlight badge, features list with Check/X icons from lucide-react, CTA button (ctaStyle: 'outline' or 'primary'). Popular card has elevated styling with highlight badge. Shield icon for trust indicator. Feature rows map included:true/false to green check or red X icons. useState manages selected plan highlighting.

As a frontend developer, implement the UsageBreakdown section for the Credits page. Uses IntersectionObserver (threshold 0.15) on rootRef to trigger animated state for bar animations. USAGE_TYPES array with 3 items: Video Analysis (5 credits, 14/20 used, Video icon, ub-icon-wrap--video), Image Analysis (3 credits, 22/40 used, Image icon, ub-icon-wrap--image), AI Chat (1 credit, 64/80 used, MessageSquare icon, ub-icon-wrap--chat). Each renders as ub-bar-card with icon, name, desc, and animated progress bar (CSS transition on width from 0 to pct% when animated=true). Constants: TOTAL_CREDITS=100, USED_CREDITS=68, REMAINING_CREDITS=32, USED_PCT=68. SVG donut ring using CIRCUMFERENCE=2*PI*42, strokeDashoffset animates from CIRCUMFERENCE to CIRCUMFERENCE-(USED_PCT/100)*CIRCUMFERENCE on intersection. RefreshCw/ArrowRight/Zap icons. ub-grid layout for the three bar cards.

As a frontend developer, implement the TransactionHistory section for the Credits page. ALL_TRANSACTIONS array with 8+ entries covering types: 'purchase' (ShoppingCart icon), 'usage' (Zap icon), 'refund' (RotateCcw icon), 'gift' (Gift icon) — each with id, date, time, type, description, detail, amount (string with +/-), amountRaw, status ('completed'/'refunded'/'failed'), plan, paymentMethod, invoiceId, note fields. useMemo for filtered/sorted transactions. useState for: activeFilter (all/purchase/usage/refund), currentPage, expandedRow (for accordion detail view), sortField/sortDir. Pagination with ChevronLeft/ChevronRight, page size control. Filter tabs (FileText/ShoppingCart/Zap/RotateCcw icons). Download button with Download icon. Expandable row shows paymentMethod, invoiceId, note detail. Receipt icon for invoice rows. Amount colored green for positive, red for negative. Status badges with color coding.

As a frontend developer, implement the CreditFAQ section for the Credits page. FAQ_ITEMS array with 4 accordion items: 'How do credits work' (HelpCircle icon — lists credit costs per analysis type with cfq-chip spans: Image Basic 2cr, Image Deep 8cr, Video Basic 5cr, Video Deep 15cr, Chat Basic 1cr, Chat Deep 3cr), 'When do credits reset' (Clock icon — explains Free Plan daily midnight UTC reset vs paid plan monthly billing anniversary, unused credits don't carry over), 'Can I share credits' (Users icon — per-account credits, Business/Enterprise team pool), fourth item with AlertTriangle icon. useState for openId tracking single expanded accordion. ChevronDown icon rotates 180deg on open. Answer JSX uses cfq-chip--purple/cyan/amber color variants inline. MessageCircle icon for contact support CTA at bottom.

As a frontend developer, implement the UpgradePrompt section for the Credits page. Uses IntersectionObserver (threshold 0.1) on sectionRef to set visible=true for entrance animation. useState for hovered (benefit card index). BENEFITS array with 5 items: 800 Credits/Month (Zap, up-benefit-icon--purple), Deep Analysis (TrendingUp, up-benefit-icon--cyan), AI Chat Unlimited (MessageSquare, up-benefit-icon--amber), Priority Support (BarChart2, up-benefit-icon--green), Export Reports (Star, up-benefit-icon--red). PRO_FEATURES array with 6 string items for checklist. STATS array: 12K+ Creators, 94% See Growth (up-stat-value-accent), 3.2x Avg. Viral Score. Decorative up-bg-layer with up-bg-gradient, 3 positioned orbs (up-bg-orb-1/2/3). up-label with animated dot, heading with up-heading-accent span, up-card container, benefit cards with hover state, PRO_FEATURES checklist with CheckCircle icons, Lock icon for locked features, ArrowRight CTA button. Shield icon for trust badge.

As a frontend developer, implement the Footer section for the Credits page. Reuses shared Footer component (may already exist from Dashboard/Analyze pages). Features: framer-motion containerVariants with staggerChildren 0.12 and columnVariants (opacity 0→1, y 24→0, duration 0.5) triggered by useInView (once:true, margin -60px) on footer ref. 4 link columns: Product (Analyze/Report/Chat/History/Credits), Company (Landing links), Resources (Landing links), Legal (Landing links) — each FooterLink has hover state with framer-motion scaleX underline animation. Social icons row: Twitter/Instagram/Youtube/Linkedin from lucide-react with hover scale. Email newsletter form with useState for email/submitted, handleSubmit sets submitted=true for 3s then resets, Send icon. Zap icon in brand mark. ftr-decor-bg parallax layer with CSS transform using --scroll variable.

As a frontend developer, implement the Navbar section for the Report page. This component (Navbar.jsx) may already exist from previous pages (Credits, Analyze, etc.). It uses useState for scrolled, mobileOpen, and hoveredLink states; useEffect for scroll listener and body overflow locking. Features animated SVG logo with framer-motion pathLength animations across 6 LOGO_PATHS with staggered custom delays, animated logo text with opacity/x entrance, NAV_LINKS mapped to motion.a elements with whileHover scale spring animations, and a mobile menu with AnimatePresence. Imports Navbar.css.

As a frontend developer, implement the SettingsHeader section for the Settings page. Build a static header bar with three sub-regions: (1) left breadcrumb nav (Dashboard › Settings links) and sh-title-row with Settings icon from lucide-react and h1; (2) right account status row with Zap-icon credits badge showing CREDITS_USED/CREDITS_TOTAL (10/10), sh-plan-badge--free pill with dot indicator, and an Upgrade CTA link to /Credits with ArrowRight icon; (3) conditional sh-banner info strip shown when PLAN === 'free' displaying AlertTriangle icon warning about daily credit reset and a 'View Plans →' link. All values (PLAN, CREDITS_USED, CREDITS_TOTAL) are currently hardcoded constants — wire to props or context in final implementation.

As a frontend developer, implement the SettingsNav section for the Settings page. Build a sidebar navigation component managing activeTab state (default 'profile') via useState. Render 6 NAV_ITEMS (profile, billing, credits, notifications with badge '3', security, api) using icons User/CreditCard/Coins/Bell/Shield/Key from lucide-react — active item gets snv-active class. handleTabClick uses e.preventDefault() + setActiveTab + document.getElementById(id).scrollIntoView({ behavior: 'smooth', block: 'start' }) for in-page anchor scrolling. Badge on notifications hides when that tab is active. Below a divider, render 6 QUICK_LINKS (Dashboard, Upload & Analyze, AI Chat, History, Credits & Plans, Settings) as plain href links. Brand section shows Zap icon + 'zen-content' styled text.

As a frontend developer, implement the SettingsProfileSection for the Settings page. Build a profile management panel with these state hooks: displayName, bio, email ('arjun@gmail.com'), newEmail, confirmEmail, profileSaved, emailSaved, avatarUrl (useState initialized to Unsplash URL). Avatar upload uses a hidden file input triggering FileReader.readAsDataURL() to update avatarUrl state on onload. handleSaveProfile sets profileSaved for 3s timeout, handleChangeEmail validates newEmail === confirmEmail before updating email state and setting emailSaved for 3s. Profile card displays avatar with CheckCircle badge overlay, name, email link, plan badge with Star icon, member-since date with Calendar icon. Action buttons use Shield (Verified) and Edit3 icons. Separate email change form with newEmail/confirmEmail fields below. Icons: User, Mail, Calendar, Star, Edit3, Upload, CheckCircle, LogOut, Camera, Shield from lucide-react.

As a frontend developer, implement the SettingsBillingSection for the Settings page. Build a billing management panel with hoveredRow state (useState null) for table row hover effects. Render a two-column top grid: (1) Current Plan card showing 'Pro' at $29/month with sbs-plan-badge--pro active indicator, 5 PLAN_FEATURES rendered with CheckCircle icons, Calendar icon for next billing date (May 15, 2026), and action buttons for Upgrade/Cancel using ArrowUpRight and RefreshCw icons; (2) Payment Method card showing masked card details with CreditCard icon and Update Payment button. Below, render PAYMENT_HISTORY table (5 rows) with columns: invoice ID, date, description, amount, StatusBadge component (renders sbs-badge--paid with dot), and Download icon button per row. hoveredRow tracks mouse enter/leave for row highlight. All icons from lucide-react.

As a frontend developer, implement the SettingsCreditsSection for the Settings page. Build a credit usage dashboard with: (1) CreditArc component using d3 — svgRef attached to SVG element, useEffect builds a D3 arc chart with track arc (background) and fill arc computed from used/total fraction; arc angles span -Math.PI*0.8 to Math.PI*0.8; uses d3.arc() with innerRadius (radius*0.68) and outerRadius (radius*0.88), svg.selectAll('*').remove() on re-render; (2) USAGE_BREAKDOWN bar list with 3 categories (basic/deep/advanced) each with scs-bar-fill--[type] color class and percentage widths; (3) PRICING_ROWS table (6 rows) showing Image/Video/AI Chat analysis credit costs with scs-type-dot color indicators; (4) UPGRADE_FEATURES list (4 items) with upgrade CTA. Custom SVG icon components: ClockIcon, CheckIcon, ArrowRightIcon. Constants CREDITS_USED=10, CREDITS_TOTAL=10 are hardcoded.

As a frontend developer, implement the SettingsNotificationsSection for the Settings page. Build a notification preferences panel managing two state maps initialized from NOTIFICATION_ITEMS: toggles (id → boolean from defaultOn) and frequencies (id → string from defaultFreq), plus saved boolean for 2.8s save confirmation. Render 4 NOTIFICATION_ITEMS (new_analysis, weekly_summary, plan_upgrade, product_updates) each as sn-item card showing: title, description, isRecent badge indicator, lastDate timestamp, a toggle button updating toggles[id] via handleToggle, and a frequency selector rendering FREQ_OPTIONS ['Instant','Daily','Weekly','Never'] as clickable pills updating frequencies[id] via handleFreq. handleSave sets saved=true then resets after 2800ms timeout. Save button shows Check icon from lucide-react when saved. Bell icon in section header from lucide-react.

As a frontend developer, implement the SettingsSecuritySection for the Settings page. Build a security management panel with these useState hooks: currentPw, newPw, confirmPw, showCurrent/showNew/showConfirm (password visibility toggles), saving (false), saved (false), loggedOut (false). getStrength(password) function scores password on 5 criteria (length≥8, length≥12, uppercase, digit, special char) returning level 1-3 with labels Weak/Fair/Strong. strengthBarClass(barIndex) colors strength meter bars. handleUpdatePassword (useCallback) validates all fields + passwordsMatch, simulates 1200ms async save then sets saved for 3s. handleLogoutOthers sets loggedOut for 3s. Password inputs toggle Eye/EyeOff icons. Render SESSIONS array (4 sessions) with Monitor/Smartphone icons, ip, location, lastActive, isCurrent badge, and individual logout buttons. Icons: Shield, Lock, Eye, EyeOff, Monitor, Smartphone, Globe, LogOut, CheckCircle, Save, Wifi from lucide-react.

As a frontend developer, implement the SettingsAPISection for the Settings page. Build an API key management panel with useState hooks (all useCallback-wrapped handlers): keyVisible (toggle between MASKED_KEY and REAL_KEY constants), copied (3s clipboard copy confirmation), regenerating (1.5s spinner state), webhooks (INITIAL_WEBHOOKS array with 2 entries), newWebhookUrl/newWebhookEvent (add webhook form), showAddForm. handleCopy uses navigator.clipboard.writeText(REAL_KEY) setting copied for 2s. handleRegenerate simulates 1.5s regeneration. handleAddWebhook appends new webhook object to webhooks array. handleDeleteWebhook filters by id. handleToggleWebhook maps to flip active boolean. Render a syntax-highlighted code block using renderCodeLine function that maps CODE_LINES array (19 lines) to styled spans with classes sas-code-comment/keyword/variable/string/method. Webhook list shows url, event type, active toggle, delete (Trash2) button. Icons: Key, Copy, RefreshCw, ExternalLink, Eye, EyeOff, Zap, AlertTriangle, Trash2, Plus, CheckCircle, Activity, Clock from lucide-react.

As a frontend developer, implement the Footer section for the Settings page. This is the same Footer component used across the app — check if it already exists from Landing, Credits, Report, Chat, or History pages before re-implementing. The component uses framer-motion useInView (ref, once: true, margin: -60px), containerVariants with staggerChildren 0.12s, and columnVariants (opacity/y entrance, 0.5s easeOut). Renders 4 link columns (Product, Company, Resources, Legal) via columns array using FooterLink child component with local hovered state driving motion.span scaleX underline (0→1, 0.25s easeOut). Newsletter form manages email/submitted state with handleSubmit validation and 3s auto-reset. Social icons row: Twitter, Instagram, Youtube, Linkedin from lucide-react. Brand uses Zap icon (note: this Footer variant uses Zap instead of Brain icon seen in Landing Footer). Parallax decorative bg layer at 0.15x scroll speed.

Implement the AI Chat Coach endpoint as a Supabase Edge Function at /functions/chat. Accepts { session_id, user_id, message, analysis_context? } and streams responses from OpenAI GPT-4o with a system prompt tuned for content psychology coaching. Maintains conversation history by reading/writing to chat_messages table. Deducts 1 credit (basic) or 3 credits (deep) per message from the credits table. Returns { reply, suggestions[] } where suggestions are 3 actionable fix recommendations (e.g. 'Fix my hook', 'Improve retention', 'Make it viral'). ChatContainer (0251c5ee) and DashboardAICoach (486f308a) should wire up to this endpoint replacing mock AI_RESPONSES. Rate-limit to prevent abuse on free plan.

Implement Supabase queries/Edge Functions for analyses data: (1) GET /functions/analyses — paginated list with filters (content_type, status, sort, date_from, date_to, search); returns id, title, platform, content_type, analysis_mode, score, status, thumb_url, created_at; (2) GET /functions/analyses/:id — full analysis report JSON; (3) DELETE /functions/analyses/:id — soft-delete; (4) POST /functions/analyses/:id/rerun — re-triggers analysis deducting credits. Wire up AnalysesGrid (238148b8), HistoryListContainer (5e143202), HistoryFiltersBar (07e0d3a1), HistoryPagination (2d760dde), AnalysesFilters (a62f68a1), AnalysesPagination (675fde4e), ReportHeader (4489602d), and DashboardRecentAnalyses (b8c2aecb) to these endpoints replacing ANALYSES mock arrays.

As a Tech Lead, verify end-to-end integration between DashboardStats (008e9924), DashboardWelcome (4c7b9c15), and the Dashboard Stats Aggregation API (201dee12). Confirm that the STATS hardcoded array is replaced with real data from GET /functions/dashboard/stats, stat cards render total_analyses, avg_score, content_improved_pct, and credits_used from live API responses, and DashboardWelcome reads authenticated user display_name and plan from AuthContext instead of hardcoded 'Arjun'/'Free Plan'.

As a Tech Lead, verify end-to-end integration between PricingPreview (1c3a5847) on the Landing page and the Razorpay payment flow (33d29a44). Confirm that CTA buttons on each pricing tier correctly trigger the Razorpay modal for authenticated users or redirect unauthenticated users to /Signup, demo toast ('Payments coming soon') fires when VITE_RAZORPAY_KEY_ID is not set, and the /Signup redirect carries the selected plan as state so the post-signup flow can resume the upgrade. Also verify anchor link id='pricing' from the Navbar works correctly.

As a Tech Lead, verify end-to-end integration between the deployed Supabase Edge Functions (61a2805d) and all frontend API consumer utilities. Confirm: (1) src/lib/supabase.js correctly calls supabase.functions.invoke() for each Edge Function endpoint; (2) CORS headers on all Edge Functions allow the production frontend domain; (3) Supabase project secrets (OPENAI_API_KEY, RAZORPAY_KEY_ID, RAZORPAY_KEY_SECRET) are set and accessible within Edge Functions; (4) The daily credits reset cron job fires correctly at midnight UTC; (5) All Edge Function cold-start times are under 2s; (6) Edge Function error responses are correctly parsed by the ApiErrorHandler utility and displayed in the UI.

As a frontend developer, implement the AnalyzeSelectedFile section for the Analyze page. Displays a file preview card for the selected file using FILE_DATA constants (name: 'My YouTube Video.mp4', size: 52.4 MB, type: MP4 Video, duration: 8:45, status: Selected, uploadProgress: 100). Includes a `ThreeThumbnail` component that mounts a Three.js WebGLRenderer (antialias, alpha) into a ref'd DOM element via useEffect — scene contains: a dark background PlaneGeometry (color 0x0d0d2b), 28 floating particle Points with BufferGeometry using vertexColors (palette: #7c3aed, #06b6d4, #b794f4, #f59e0b), a TorusGeometry ring (radius 0.38, tube 0.04, color #7c3aed), and a ConeGeometry play triangle (3 sides). Animation loop uses requestAnimationFrame. Renderer cleanup on unmount. Pixel ratio clamped to 2. Camera at PerspectiveCamera(60, w/h, 0.1, 100) positioned at z=2.2.

As a frontend developer, implement the AnalyzeCreditCost section for the Analyze page. Renders an `acc-card` showing estimated credit cost with an animated count-up on mount: useEffect drives a requestAnimationFrame loop over 600ms using ease-out cubic easing (`1 - Math.pow(1 - progress, 3)`) to increment `displayCost` from 0 to CREDIT_COST (15). Uses lucide-react Coins, Wallet, AlertTriangle, CheckCircle icons. Card structure: header row with 'Estimated Credits' label and an `acc-credit-badge` showing the animated count; breakdown rows for Content Type ('Video'), Analysis Mode ('Deep Analysis'), Credits Required (15); an available credits section with Wallet icon showing AVAILABLE_CREDITS (110) with conditional `acc-available-count--insufficient` / `acc-available-count--sufficient` class; a 'Buy Credits →' link to /Credits; and a conditional warning/success block toggled by `insufficient` boolean (AVAILABLE_CREDITS < CREDIT_COST).

As a frontend developer, implement the ReportHeader section for the Report page. This component renders a breadcrumb nav using lucide-react icons (BarChart2, ChevronRight) linking back to /Analyses, a page title 'My YouTube Video Strategy', meta badges for content type ('Video') and analysis mode ('Deep Analysis') each with colored dot indicators, a timestamp with Clock icon, and three action buttons (Re-analyze with credit hint showing 15 credits, Share, Download) using RefreshCw, Share2, and Download icons respectively. Imports ReportHeader.css.

As a frontend developer, implement the ReportScoreCard section for the Report page. This component renders an SVG circular score ring using constants SCORE=85, MAX=100, RADIUS=65, CIRCUMFERENCE=2πr, and FILL_OFFSET. The SVG includes a linearGradient (rsc-ring-gradient) from purple #7c3aed through light purple #b794f4 to amber #f59e0b, a track circle (rsc-track), and a fill circle (rsc-fill) using strokeDashoffset. A centered overlay displays the numeric score '85/100' with label 'Great Potential'. Supporting text includes a badge dot for 'Overall Score', content title, and deep analysis description. Features a decorative glow div (rsc-glow) behind the SVG. Imports ReportScoreCard.css.

As a frontend developer, implement the ReportTabs section for the Report page. This component uses useState for activeTab (default 'overview'). It maps over TABS array containing 7 items (overview, hook, retention, psychology, content, audience, recommendation) each with an id, label, and lucide-react icon (LayoutDashboard, Zap, TrendingDown, Brain, FileText, Users, Lightbulb). Renders a role='tablist' nav with aria-selected, aria-controls, and id attributes for accessibility. Active tab gets class rt-tab--active. Each button renders the icon with aria-hidden and a label span. Imports ReportTabs.css.

As a frontend developer, implement the ReportCTA section for the Report page. This component renders a call-to-action section with two decorative orb divs (rcta-orb--1, rcta-orb--2) for background ambiance. Content includes a support text paragraph with bold recommendation copy, a button row with two actions: a secondary anchor-button linking to /Analyze with RefreshCw icon and a Coins credit badge showing '15 Credits', and a primary anchor-button linking to /Chat with Sparkles icon labeled 'Ask AI Coach'. A credit info row below uses Brain icon (color #b794f4, 13x13), two informational spans separated by rcta-dot, explaining 1 credit per AI Coach session and 15 credits for re-analysis. Imports ReportCTA.css.

As a frontend developer, implement the Footer section for the Report page. This component may already exist from previous pages (Credits, Analyze). Uses useState for email and submitted state, useRef + framer-motion useInView (once: true, margin: '-60px') for scroll-triggered entrance. Renders 4 link columns (Product, Company, Resources, Legal) using containerVariants/columnVariants for staggered children animations (staggerChildren: 0.12, y: 24 entrance). Each FooterLink sub-component has hover state managing a framer-motion scaleX underline span (duration 0.25). Includes social icons row (Twitter, Instagram, Youtube, Linkedin), an email newsletter form with handleSubmit toggling submitted state for 3 seconds, a Send icon button, and a decorative parallax ftr-decor-bg layer. Imports Footer.css.

As a frontend developer, implement the ChatHeader section for the Chat page. This section renders a sticky `<header>` with class `chh-root` containing an `chh-inner` wrapper. The left side renders a breadcrumb nav (`chh-breadcrumb`) with an anchor link to `/Dashboard` and a current-page label 'AI Chat Coach', plus a title row (`chh-title-row`) with a `MessageSquare` lucide icon wrapped in `chh-icon-wrap` and an `<h1>` title. The right side (`chh-actions`) renders a context badge (`chh-context-badge`) with a `Zap` icon and animated dot (`chh-context-dot`), a History button linking to `/History` using the `History` lucide icon, and a New Chat button linking to `/Chat` using the `Plus` lucide icon. No state hooks required. Reuse any existing Navbar or header patterns from Report page if applicable. Import `ChatHeader.css` for styling.

As a Tech Lead, verify end-to-end integration between the Credits page frontend (CreditsHeader 6ab17a48, CreditBalance 8bf05763, CreditPlans 0ba9e574, UsageBreakdown ecff5add, TransactionHistory 0872209d) and the Credits & Subscription Management API (1a120cb1) and Razorpay payment flow (33d29a44). Confirm that live credit balance, countdown timer, and usage breakdown reflect real data from GET /functions/credits, plan upgrade CTA triggers the Razorpay modal or demo toast, and transaction history paginates correctly from GET /functions/transactions.

As a Tech Lead, verify end-to-end integration between the History page (HistoryListContainer 5e143202, HistoryFiltersBar 07e0d3a1, HistoryPagination 2d760dde) and Analyses page (AnalysesGrid 238148b8, AnalysesFilters a62f68a1, AnalysesPagination 675fde4e) with the Analyses & History CRUD API (b443cd90). Confirm that filters (content_type, date_range, sort, search) are correctly passed as query params, pagination updates results, delete/re-run card actions call the correct endpoints, and DashboardRecentAnalyses (b8c2aecb) shows real data from the same API.

As a Tech Lead, verify end-to-end integration between SettingsProfileSection (48f961f3) and SettingsSecuritySection (c852406b) with the User Profile Management API (5145931a). Confirm avatar upload flows through Cloudinary before saving URL to profiles table, display name and bio patches reach PATCH /profile, email change triggers Supabase confirmation flow, password update calls supabase.auth.updateUser, and active sessions list renders real data with per-session logout working.

As a Tech Lead, verify end-to-end integration between SettingsAPISection (ff12c82c) and SettingsBillingSection (d35cf2fa) with their respective backend APIs (15798ed4 and 33d29a44). Confirm API key regeneration stores SHA-256 hash and returns plaintext once, webhook CRUD operations persist correctly, billing section shows real plan data and payment history from GET /functions/transactions, and upgrade button correctly triggers Razorpay modal or demo toast.

As a Tech Lead, verify that all Supabase database migrations (82cca5a8) are correctly consumed by every backend API task. Confirm RLS policies on profiles, analyses, credits, transactions, chat_messages, api_keys, and webhooks tables block cross-user data access. Validate that mock/seed data (MOCK_PROJECTS, MOCK_PAYMENTS, MOCK_FEEDBACK constants) from lib/mockData matches the real table schemas so demo mode and live mode are interchangeable without frontend changes. Run a full schema validation pass against all Edge Function payloads.

As a Tech Lead, verify end-to-end integration between AnalyzeSidebar (aae7461c) and CreditsContext (0a3998c8). Confirm that the credits-reset countdown timer in AnalyzeSidebar syncs with credits reset_at from CreditsContext instead of the hardcoded useTimer hook counting from 14h 25m 36s, the credit usage progress bar reflects real creditsUsed/creditsTotal from CreditsContext, and the MiniStars Three.js R3F canvas renders correctly without conflicting with other Three.js instances on the Analyze page.

As a Tech Lead, verify end-to-end integration between SettingsCreditsSection (28aa0f0b) and the Credits & Subscription Management API (1a120cb1). Confirm that CREDITS_USED and CREDITS_TOTAL constants are replaced with live data from GET /functions/credits, the D3 arc chart re-renders when credits data updates, USAGE_BREAKDOWN bar percentages reflect real usage breakdown from the API, and the upgrade CTA links correctly to /Credits with the current plan context.

As a Tech Lead, verify end-to-end integration between HistoryHeader (8b8ae0bf) and the Analyses & History CRUD API (b443cd90). Confirm that the hardcoded count badge '24' in HistoryHeader is replaced with real total count from GET /functions/analyses, the export button triggers a real CSV/JSON download of the user's analysis history from the backend rather than a simulated setTimeout, and the sort dropdown state is synchronized with HistoryFiltersBar (07e0d3a1) sort state to avoid duplicate sort controls.

As a Tech Lead, verify end-to-end integration between AnalysesHeader (88cd3d8e) and the Analyses & History CRUD API (b443cd90) and Dashboard Stats Aggregation API (201dee12). Confirm that the STATS array hardcoded values (Total Analyses: 24, Avg. Viral Score: 78/100, Last Analysis: 2 hrs ago) are replaced with real data from API responses, and the Three.js MiniOrbitCanvas background renders correctly without performance degradation on the Analyses page.

As a Tech Lead, verify end-to-end integration between CreditsHeader (6ab17a48) and the Credits & Subscription Management API (1a120cb1). Confirm that the ch-stats-strip hardcoded values (Current Balance 10/10, Resets In 14h 25m, Total Used 350, Analyses Completed 24) are replaced with live data from GET /functions/credits and GET /functions/dashboard/stats. Verify the Free Plan badge reflects the authenticated user's actual plan from AuthContext, and the countdown timer in 'Resets In' syncs with reset_at from the credits API.

As a Tech Lead, verify end-to-end integration between CreditBalance (8bf05763) and the Credits & Subscription Management API (1a120cb1). Confirm that CREDIT_USED and CREDIT_TOTAL constants are replaced with live data from GET /functions/credits, the countdown timer uses the real reset_at timestamp from the API rather than the hardcoded RENEWAL_DATE (2026-06-01), and the ThreeOrbCanvas Three.js component initializes correctly without conflicting with other Three.js instances on the Credits page.

Implement rate limiting and retry logic for OpenAI API calls in both the /functions/analyze and /functions/chat Edge Functions: (1) Add exponential backoff retry (max 3 attempts, delays 1s/2s/4s) for OpenAI 429 (rate limit) and 503 (service unavailable) errors; (2) Implement per-user request queuing in the analyze function to prevent concurrent analysis requests from the same user; (3) Add token count estimation before API call to prevent context overflow errors; (4) Set request timeout of 30s for analyze and 15s per chat message; (5) On free plan, enforce max 3 concurrent chat sessions globally via Redis or Supabase pg_advisory_lock; (6) Return structured error responses { error: { code, message, retryAfter } } so frontend can display appropriate messaging. Per SRD Section 8 non-functional requirements for high availability.

As a frontend developer, implement the AnalyzeActionButton section for the Analyze page. Manages 5 demo states via `demoState` useState: 'ready', 'disabled_no_file', 'disabled_no_credits', 'loading', 'done'. State cycle triggered by `cycleDemo` (for demo/dev purposes). `handleClick` transitions 'ready' → 'loading'. Loading state triggers a requestAnimationFrame progress loop over 3000ms (`progress` useState from 0 to 1) then auto-transitions to 'done'. Button renders with `aab-btn--loading` class when loading, is `disabled` for all non-ready states, shows `aab-spinner` during loading and CheckCircle icon when done. Button label changes per state: 'Analyze Now', 'Upload a File First', 'Insufficient Credits', 'Analyzing...', 'Analysis Complete'. Hint text below button also changes per state with `aab-hint--error` (no file/no credits) or `aab-hint--success` (done) modifier classes. Uses lucide-react Zap, AlertCircle, CheckCircle icons.

As a frontend developer, implement the ReportOverview section for the Report page. This complex component includes: (1) a RetentionMiniChart SVG sub-component that manually scales RETENTION_POINTS data (12 points from t=0 to t=8.5) using xScale/yScale functions, renders a line path, area fill path with linearGradient (ro-area-grad) from purple #7c3aed to transparent, and a drop-point marker at t=4.5; (2) METRICS array of 3 cards (Avg. View Score, Content Improved +47%, Engagement Viral) with Star, TrendingUp, Zap icons and pill badges; (3) QUICK_STATS array of 4 stat items (Duration, Hook Rate, Drop Point, Trend Score) with up/down/neutral change indicators. Uses useRef, useEffect, useState. Imports ReportOverview.css.

As a frontend developer, implement the ReportScoreBreakdown section for the Report page. This component uses useRef, useEffect, and useState (animated flag) with an IntersectionObserver (threshold 0.2) to trigger scroll-based bar animations. Maps over SCORE_COMPONENTS array (5 items: Hook 90, Retention 83, Content Value 88, Engagement 84, Trend Potential 90) rendering progress bars with dynamic width set via inline style. Each bar row includes a label, track div, animated fill div (rsb-fill with optional rsb-fill--accent modifier and rsb-animated class on intersection), score text, and a typed badge (rsb-badge--viral or rsb-badge--good). Computes avgScore dynamically from array. Imports ReportScoreBreakdown.css.

As a frontend developer, implement the ReportWorkingNeeds section for the Report page. This component renders a two-column grid layout: left column 'What's Working' (rwn-col--working) with CheckCircle icons (color #27ae60, sizes 18 and 12) listing 3 WORKING_ITEMS ('Strong pattern setup at start', 'Fast pacing and cuts', 'High-engagement moments'); right column 'Needs Improvement' (rwn-col--needs) with AlertTriangle icons (color #ef4444, sizes 18 and 12) listing 3 NEEDS_ITEMS ('Weak hook that feels flat', 'Add more verbal or subtitle text', 'Stronger CTAs needed'). Each column has a header with icon container and title span using separate modifier classes. Imports ReportWorkingNeeds.css.

As a frontend developer, implement the ChatContainer section for the Chat page. This is the core interactive chat UI using `useState`, `useRef`, `useEffect`, and `useCallback`. It initializes with `INITIAL_MESSAGES` (7 seeded messages with roles `ai`/`user`, timestamps, optional `suggestions` arrays, and an optional `code` block). State includes the messages array and a typing/loading indicator. AI responses cycle through `AI_RESPONSES` array via `aiResponseIndex`. Each message renders differently based on `role`: AI messages show an avatar, text (with newline-to-paragraph parsing), optional `code` block rendered in a styled pre/code element, and optional `suggestions` chips that dispatch new user messages. User messages align right with a distinct bubble style. The container auto-scrolls to the latest message via a `messagesEndRef` and `useEffect` on messages change. A `useCallback`-wrapped `handleSend` function appends a user message and schedules a mock AI response with a typing delay. Import `ChatContainer.css`.

As a frontend developer, implement the ChatInputSection section for the Chat page. Uses `useState` for `message` (string) and `showEmoji` (boolean), plus `useRef` for `textareaRef` and `emojiPanelRef`, and `useCallback` for `handleSuggestion` and `insertEmoji`. Features: (1) `QUICK_SUGGESTIONS` row with 3 buttons (`Fix my hook` with `Zap`, `Improve retention` with `TrendingUp`, `Make it viral` with `Lightbulb`) that prepend/append to textarea value; (2) auto-resizing textarea via `useEffect` clamped to 160px max height; (3) character counter showing `charCount`/`MAX_CHARS` (1000), turning warning color when `isNearLimit` (>850 chars) and error when `isOverLimit`; (4) emoji picker panel (`EMOJI_LIST` of 18 emojis) toggled by a toolbar button, closed on outside click via `mousedown` document listener in `useEffect`; (5) `Paperclip` attachment icon button in left toolbar; (6) `Send` button disabled when `!hasContent || isOverLimit`; (7) `handleKeyDown` submits on Enter without Shift. Import `ChatInputSection.css` with icons from lucide-react.

As a frontend developer, implement the Footer section for the Chat page. This component may already exist from Landing, Report, or Credits pages — reuse if available. Uses `framer-motion` (`motion`, `useInView`) and `useState`. The footer root (`ftr-root`) has a decorative parallax background layer (`ftr-decor-bg`) with a CSS custom property `--scroll` for a translateY effect. Four link columns (Product, Company, Resources, Legal) are rendered via a `columns` array using `motion.div` with `columnVariants` (opacity 0→1, y 24→0, duration 0.5) staggered via `containerVariants` (staggerChildren: 0.12), triggered by `useInView` with `once: true, margin: '-60px'`. Each link uses a `FooterLink` sub-component with `useState` for hover, animating a `ftr-link-underline` span via `motion.span` scaleX 0→1. Social icons row renders `Twitter`, `Instagram`, `Youtube`, `Linkedin` from lucide-react. Newsletter form uses `useState` for `email` and `submitted`, with `handleSubmit` setting `submitted=true` for 3 seconds. A `Send` icon appears in the newsletter submit button. Import `Footer.css`.

As a Tech Lead, verify end-to-end integration between ReportTabs (6e3eba5d) and the Analyses & History CRUD API (b443cd90). Confirm that each tab (Overview, Hook, Retention, Psychology, Content, Audience, Recommendation) renders content from the full report JSON returned by GET /functions/analyses/:id, the activeTab state correctly shows/hides the corresponding report section components (ReportOverview bd04ecec, ReportScoreBreakdown acbc5650, ReportWorkingNeeds f72c6c81), and tab switching does not trigger additional API calls since data is already loaded.

As a Tech Lead, verify end-to-end integration between the Analyze page frontend (AnalyzeUploadZone 24d4027f, AnalyzeActionButton 1f1c90e9, AnalyzeOptions 76834c95, AnalyzeCreditCost 5cbeb25c) and the backend services: Cloudinary upload (a7043f79), OpenAI GPT-4o Vision analysis (13d44b84), and credits deduction (1a120cb1). Confirm file upload progress updates in AnalyzeSelectedFile (7f5abb78), credit cost display reflects real credit balance from CreditsContext, and successful analysis triggers navigation to /Report/:analysisId with report data loaded.

As a Tech Lead, verify end-to-end integration between the Report page frontend sections (ReportHeader 4489602d, ReportScoreCard 7725a45a, ReportOverview bd04ecec, ReportScoreBreakdown acbc5650, ReportWorkingNeeds f72c6c81) and the Analyses & History CRUD API (b443cd90). Confirm that /Report/:analysisId correctly fetches the full report JSON from GET /functions/analyses/:id, all score fields are displayed accurately, re-run button deducts credits and triggers a new analysis, and share/download actions work as expected.

As a Tech Lead, verify end-to-end integration between ChatContainer (0251c5ee), DashboardAICoach (486f308a), and the AI Chat Coach Backend API (b700f264). Confirm that messages are streamed from the /functions/chat Edge Function, conversation history persists across sessions via chat_messages table, quick suggestion chips (Fix my hook, Improve retention, Make it viral) correctly prepopulate and send messages, credit deduction per message is reflected in CreditsContext, and rate-limiting on free plan is handled gracefully in the UI.

As a Tech Lead, verify end-to-end integration between the Chat page frontend sections (ChatHeader 01cf783f, ChatContainer 0251c5ee, ChatInputSection 7297a8af) and the AI Chat Coach Backend API (b700f264). Confirm that messages sent via ChatInputSection are POSTed to /functions/chat with session_id, user_id, and message payload; streamed AI responses render correctly in ChatContainer; QUICK_SUGGESTIONS chips (Fix my hook, Improve retention, Make it viral) prepopulate and auto-send messages; code block responses render in styled pre/code elements; and credit deduction per message is reflected in CreditsContext after each AI reply.