RAMAI

As a frontend developer, implement the TheoryGeneratorHeader section for the TheoryGenerator page. This section renders a sticky navigation header with a fully interactive 3D graduation cap mesh built with @react-three/fiber. The GraduationCap component uses useRef/useMemo to compose a mortarboard (boxGeometry), cap base (cylinderGeometry), gold button (sphereGeometry with emissive #FFD700), tassel cord (cylinderGeometry with #FF6F61), tassel tip (sphereGeometry), and a glowing torus ring (emissive #00FFAB). The cap rotation responds to window scrollY via useEffect. The main TheoryGeneratorHeader component tracks scroll state (scrolled, scrollY), mobile menu open state (menuOpen), and a reveal animation flag (revealed). It uses refs (rootRef, titleRef, breadcrumbRef, descRef, iconRef) and drives entrance animations via GSAP on mount. The header shows a breadcrumb trail and a descriptive subtitle. The sticky shadow activates on scroll. Implement all CSS from TheoryGeneratorHeader.css including sticky positioning, reveal transitions, and Canvas sizing for the 3D element.

As an AI Engineer, set up LiteLLM for LLM routing between GPT-5.4 (user-friendly responses) and Claude 4.6 Opus (academic work) using Langchain as the orchestration layer. Create a unified AI service module with: route_ai_request(prompt, task_type) function that selects the appropriate model based on task type (coding/chat → GPT-5.4, theory/academic → Claude 4.6 Opus), streaming support, retry logic with exponential backoff, token usage tracking, and error handling. Expose internal async service used by all AI-powered API endpoints (theory generation, coding assistant, smart notes, resume builder).

As a Backend Developer, implement FastAPI authentication middleware: JWT token generation and validation (python-jose), OAuth2PasswordBearer dependency, get_current_user dependency injected into all protected routes, refresh token rotation logic, CORS configuration allowing frontend origin, and rate limiting middleware (slowapi). Create reusable FastAPI dependencies: require_auth, require_admin. This middleware underpins all backend API endpoints.

As a Tech Lead, verify the end-to-end integration between the Login page frontend implementation and the Auth backend API. Ensure the LoginForm (b836b736) correctly calls POST /api/auth/login and POST /api/auth/register, OAuth redirects to /api/auth/google and /api/auth/github work, JWT tokens are stored in the global AuthStore, protected routes redirect unauthenticated users, and error responses from the API (401, 422, 500) are displayed properly in the LoginForm UI. Validate the full login-to-dashboard redirect flow.

As a frontend developer, implement the TheoryGeneratorPromptInput section for the TheoryGenerator page. This section renders a large prompt textarea with MAX_CHARS=5000 and a WARN_THRESHOLD=4500. It manages state for value, isFocused, and glowPosition. A floating label (labelRef) animates via GSAP (y: -34, scale: 0.75, color: #00FFAB on focus/content; resets on blur/empty) with power2.out easing. A cursor-reactive glow tracks mouse position using handleMouseMove, computing x/y percentages relative to the wrapper bounding rect and passing them as CSS custom properties --glow-x/--glow-y. The clear button triggers a GSAP scale-bounce animation (scale 0.985, yoyo repeat) before resetting value and refocusing the textarea. The wrapper receives class tgpi-focused when active. The char count displays in tgpi-char-warn style when near limit. A decorative background blur orb (.tgpi-bg-blur) sits behind the container. Implement all CSS from TheoryGeneratorPromptInput.css including the radial glow effect driven by CSS variables.

As a frontend developer, implement the TheoryGeneratorPresets section for the TheoryGenerator page. This section renders a grid of preset prompt cards using a presets array of 8+ items (data-structures, algorithms, operating-systems, database-design, web-development, computer-networks, etc.), each with a Lucide icon (Binary, GitBranch, Cpu, Database, Globe, Network, Cog, BrainCircuit), title, description, prompt text, and category badge. It uses @react-three/fiber Canvas with @react-three/drei Float for a decorative 3D floating element. GSAP ScrollTrigger is registered and used to animate cards into view on scroll. Each card is clickable and includes a ChevronRight affordance. State tracks which preset is selected/hovered. Implement all CSS from TheoryGeneratorPresets.css including the card grid layout, category badges, hover glow effects, and ScrollTrigger entrance animations.

As a frontend developer, implement the TheoryGeneratorAdvancedOptions section for the TheoryGenerator page. This section is a collapsible accordion panel toggled by isOpen state. The header row shows a ChevronDown icon (rotates when open via th-ao-chevron--open class), a Settings icon, the title 'Advanced Options', and a badge toggling between 'Hide' and 'Configure'. The expandable body animates via inline style max-height (0px to contentHeight px, measured via bodyRef.current.scrollHeight in useEffect) and opacity, using cubic-bezier(0.4,0,0.2,1) transition. The inner grid contains: a Difficulty Level selector (Beginner/Intermediate/Advanced) with GraduationCap icon, a Response Length selector (Short/Medium/Detailed) with AlignLeft icon, Include Examples toggle (ListChecks icon), Include Diagrams toggle (GitBranch icon), and Output Format selector (Markdown/Plain Text/HTML) with FileCode icon. All five controls are tracked in state. Implement keyboard accessibility (Enter/Space toggles) and all CSS from TheoryGeneratorAdvancedOptions.css.

As a frontend developer, implement the TheoryGeneratorTipsSection section for the TheoryGenerator page. This section combines a @react-three/fiber Canvas with a TorusKnotScene (torusKnotGeometry args [1, 0.28, 100, 16], meshStandardMaterial color #00FFAB with emissive, opacity 0.85, transparent) and OrbitControls from @react-three/drei. GSAP animates the torus knot: emissiveIntensity pulses (0.6, yoyo, repeat -1, sine.inOut), groupRef.rotation.y spins 360° over 20s, and rotation.x oscillates (Math.PI*0.3, yoyo, sine.inOut). The UI renders a FAQ accordion with FAQ_ITEMS array (4 items: how answers are generated, editing, export formats, daily limits) — each item toggles open/closed via per-item state, with ChevronDown rotation animation. A PRO_TIPS list renders tip cards with Lightbulb/Sparkles/ArrowRight/MessageSquareHeart Lucide icons and highlighted keyword spans. useCallback optimizes toggle handlers. Implement all CSS from TheoryGeneratorTipsSection.css including accordion transitions, tip card styles, and Canvas positioning.

As a Backend Developer, implement FastAPI endpoints for the Theory Answer Generator: POST /api/theory/generate (accepts question, difficulty, length, include_examples, include_diagrams, output_format; routes to Claude 4.6 Opus via AI routing service; streams response), GET /api/theory/history (paginated list of user's generated answers), GET /api/theory/history/{id} (fetch single answer), DELETE /api/theory/history/{id}, POST /api/theory/export-pdf (generates and returns PDF using reportlab or weasyprint). All endpoints require JWT authentication. Note: Frontend TheoryGeneratorPreview (ea988ce0), TheoryGeneratorExportActions (6cba6718), and TheoryGeneratorAdvancedOptions (f564a0cb) depend on these endpoints.

As a Backend Developer, implement FastAPI endpoints for the AI Coding Assistant: POST /api/coding/analyze (accepts code, language; returns error detection, explanation, optimizations via GPT-5.4), POST /api/coding/chat (conversational coding assistant with session history), GET /api/coding/sessions (list user's coding sessions, paginated), GET /api/coding/sessions/{id}, DELETE /api/coding/sessions/{id}, POST /api/coding/sessions (create new session). Support streaming responses for chat. All endpoints require JWT auth. Note: Frontend CodingAssistantMain (b90acc14), CodingAssistantSidebar (081cd7d8) depend on these endpoints.

As a frontend developer, implement the TheoryGeneratorPreview section for the TheoryGenerator page. This is the most complex section, rendering a rich content preview panel. It uses DEMO_THEORY — an array of typed content blocks (h2, h3, p with inline HTML, code blocks with lang metadata, and list items) — to simulate generated output. A simple syntax highlighter tokenizes Python code using a PYTHON_KEYWORDS Set, coloring keywords, strings, and comments. State tracks activeTab (preview/raw), isGenerating (Loader2 spinner via GSAP pulse), and scroll position within the preview pane. Lucide icons used: Eye, FileText, Loader2, Zap, ArrowRight. GSAP animates the panel entrance and the generate button. The preview renders h2/h3 headings, paragraphs (dangerouslySetInnerHTML for bold tags), syntax-highlighted code blocks with language labels, and styled unordered lists. useMemo optimizes the rendered content tree. Implement all CSS from TheoryGeneratorPreview.css including tab bar, code block styling, and loading state.

As a Tech Lead, verify the end-to-end integration between the CodingAssistant frontend sections and the Coding Assistant backend API. Ensure CodingAssistantInput sends messages/code to POST /api/coding/chat with streaming, CodingAssistantMain renders streamed AI responses as chat bubbles with syntax highlighting, CodingAssistantSidebar loads conversation history from GET /api/coding/sessions and handles new session creation, and CodingAssistantTopBar reflects the active session's language/model. Validate that language and model selection from the sidebar are sent as parameters in API requests.

As a frontend developer, implement the TheoryGeneratorExportActions section for the TheoryGenerator page. This section features a @react-three/fiber Canvas background rendering a ParticlesField: an instancedMesh of PARTICLE_COUNT=80 circleGeometry particles with BufferAttribute positions and scales, animated each frame via requestAnimationFrame using THREE.Object3D/tempObject for matrix updates and THREE.Color lerpColors between #00FFAB and #1C2A48 for per-instance color. The main UI renders export action buttons (Copy, Download PDF, Share, etc.) with inline SVG icons including a custom IconSparkles component. GSAP animates button hover states and entrance. Each action button triggers a distinct callback with visual feedback. useCallback memoizes handlers. Implement all CSS from TheoryGeneratorExportActions.css including the Canvas overlay, button row layout, and hover glow effects.

As a Tech Lead, verify the end-to-end integration between the TheoryGenerator frontend sections and the Theory Generator backend API. Ensure TheoryGeneratorPromptInput submits questions to POST /api/theory/generate, streaming responses render correctly in TheoryGeneratorPreview, TheoryGeneratorAdvancedOptions parameters (difficulty, length, format) are passed in the API payload, TheoryGeneratorExportActions triggers POST /api/theory/export-pdf and downloads the file, and TheoryGeneratorPresets populate the prompt input correctly. Validate error states and loading indicators during generation.