Aura 3D Companion Hub

'Aura 3D Companion Hub' from scratch with ZERO placeholder code, ZERO 2D emojis, and NO default light-mode buttons. 1. STRICT GLASSMORPHIC UI & NAVIGATION HEADER - Dark Aesthetic: Dark slate/violet background (`bg-slate-950 text-slate-100 min-h-screen`). - Header Bar Styling: Wrap navigation elements inside a sleek glass card (`bg-slate-900/80 backdrop-blur-md border border-white/10 rounded-2xl p-3 shadow-2xl`). - Navigation Tabs (Dashboard | Pomodoro Studio | Settings): * Inactive Tabs: Dark translucent styling (`bg-slate-800/60 text-slate-300 border border-white/10 hover:bg-slate-700/60 transition-all rounded-xl px-4 py-2`). * Active Tab: High-visibility glowing highlight (`bg-indigo-600 text-white shadow-lg shadow-indigo-500/40 border border-indigo-400 font-semibold scale-105 transition-all`). - Mode Indicator Pills (Normal | Hectic | Party): Render on the right side as glowing interactive pills: * Normal Active: `bg-emerald-500/20 text-emerald-300 border border-emerald-500/50 shadow-emerald-500/20` * Hectic Active: `bg-amber-500/20 text-amber-300 border border-amber-500/50 shadow-amber-500/20` * Party Active: `bg-fuchsia-500/20 text-fuchsia-300 border border-fuchsia-500/50 shadow-fuchsia-500/20` 2. REAL THREE.JS CHIBI 3D AVATAR (NO EMOJIS / NO HTML CIRCLES) Replace the current placeholder canvas with a true WebGL procedural 3D model using `@react-three/fiber` and `@react-three/drei`: - Canvas Setup: Explicit height (`h-[400px] w-full rounded-2xl overflow-hidden bg-slate-900/50 border border-white/10`). Include `<ambientLight intensity={0.8} />`, `<directionalLight position={[5, 8, 5]} intensity={1.2} />`, and `<OrbitControls enableZoom={false} />`. - Procedural 3D Chibi Model Component (`<ChibiAvatar gender={companionGender} pose={companionPose} />`): * Head: Large anime-style head (`<sphereGeometry args={[0.9, 32, 32]} />`) with smooth skin material. * Layered Hair Mesh: Multi-part 3D hair group (grey/slate colored) using overlapping sphere/cone primitives to match a cute Chibi style. * Expressive Eyes: Dual 3D eye spheres with dark irises placed on the face mesh. * Torso & Outfit: Sailor/Techwear school outfit with collar details and skirt/pants geometry. * Arm Animation Loop: Use `useFrame` from `@react-three/fiber` to animate the right arm mesh in a smooth waving arc during 'Welcoming/Wave' mode. * Working Pose: Place a 3D block mini-laptop in front of the character and attach glowing 3D headphone meshes to the head when the Pomodoro timer is running. 3. ACTIONABLE AI "DAY OUTLOOK" & GITHUB PR TRACKER - Pre-populated PR Data: Always populate 3 realistic mock PRs so the card is never empty: 1. `#104 - Fix Authentication Token Expiration` (Status: Review Requested | Priority: High | Repo: `core-api`) 2. `#108 - Upgrade Three.js Canvas Engine` (Status: Approved | Priority: Medium | Repo: `aura-ui`) 3. `#112 - Glassmorphic Theme Adjustments` (Status: Merged | Priority: Low | Repo: `aura-ui`) - AI Outlook Summary Card: * Analyzes PR status and displays a human-like briefing: "Heavy review workload today! 1 high-priority PR requires immediate review, but 2 are already greenlit." * Automatically switches UI to 'Hectic Mode' if high-priority PRs are open, or 'Party Mode' if all are cleared. 4. DEDICATED POMODORO FOCUS STUDIO & PRIORITY TO-DO LIST - Clicking 'Pomodoro Studio' tab opens a dedicated focus page: * Aesthetic Focus Timer: Glassmorphic ring timer (25-min focus / 5-min break controls, start/pause/reset buttons with smooth glows). * Companion Sync: Starting the focus timer immediately triggers the 3D Avatar's 'Working Mode' animation. * Priority To-Do List: Task manager panel with priority tags (High: Red Glow, Medium: Amber Glow, Low: Cyan Glow), complete/delete buttons, and progress counters. Completing all tasks triggers confetti celebration and 'Party Mode'. 5. GITHUB CONTRIBUTION HEATMAP - Display an aesthetic dark-mode contribution grid below the AI Day Outlook on the Dashboard. - Style tiles with a Cyber Neon Cyan to Deep Violet glowing color gradient (`bg-cyan-500`, `bg-indigo-600`, `bg-purple-800`). - Add hover tooltips showing commit and PR counts per day. Provide the complete, compilable React application code now.