From 168c2933548200355869fa8f1666df69b1a0dee1 Mon Sep 17 00:00:00 2001
From: SourabhX16 <146323884+SourabhX16@users.noreply.github.com>
Date: Sun, 28 Jun 2026 12:41:06 +0530
Subject: [PATCH 1/5] feat(web): add command center UI foundation

---
 apps/web/src/app/globals.css                  | 81 +++++++++++--------
 apps/web/src/app/layout.tsx                   |  2 +-
 apps/web/src/components/app/loading-panel.tsx | 12 +++
 apps/web/src/components/app/page-header.tsx   | 14 ++++
 .../src/components/app/theme-controller.tsx   | 20 +++++
 apps/web/src/components/ui/badge.tsx          | 25 ++++++
 apps/web/src/components/ui/button.tsx         | 46 +++++++++++
 apps/web/src/components/ui/card.tsx           | 22 +++++
 apps/web/src/components/ui/input.tsx          | 14 ++++
 apps/web/src/components/ui/progress.tsx       | 10 +++
 apps/web/src/components/ui/textarea.tsx       | 14 ++++
 11 files changed, 227 insertions(+), 33 deletions(-)
 create mode 100644 apps/web/src/components/app/loading-panel.tsx
 create mode 100644 apps/web/src/components/app/page-header.tsx
 create mode 100644 apps/web/src/components/app/theme-controller.tsx
 create mode 100644 apps/web/src/components/ui/badge.tsx
 create mode 100644 apps/web/src/components/ui/button.tsx
 create mode 100644 apps/web/src/components/ui/card.tsx
 create mode 100644 apps/web/src/components/ui/input.tsx
 create mode 100644 apps/web/src/components/ui/progress.tsx
 create mode 100644 apps/web/src/components/ui/textarea.tsx

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 8abdb15..46aad00 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -4,65 +4,65 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
-    --foreground: 222.2 84% 4.9%;
+    --background: 210 25% 98%;
+    --foreground: 218 33% 10%;
 
     --card: 0 0% 100%;
-    --card-foreground: 222.2 84% 4.9%;
+    --card-foreground: 218 33% 10%;
 
     --popover: 0 0% 100%;
-    --popover-foreground: 222.2 84% 4.9%;
+    --popover-foreground: 218 33% 10%;
 
-    --primary: 222.2 47.4% 11.2%;
-    --primary-foreground: 210 40% 98%;
+    --primary: 188 91% 35%;
+    --primary-foreground: 190 90% 98%;
 
-    --secondary: 210 40% 96.1%;
-    --secondary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 214 32% 91%;
+    --secondary-foreground: 218 33% 12%;
 
-    --muted: 210 40% 96.1%;
-    --muted-foreground: 215.4 16.3% 46.9%;
+    --muted: 215 28% 92%;
+    --muted-foreground: 216 14% 38%;
 
-    --accent: 210 40% 96.1%;
-    --accent-foreground: 222.2 47.4% 11.2%;
+    --accent: 41 96% 56%;
+    --accent-foreground: 32 95% 12%;
 
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
 
-    --border: 214.3 31.8% 91.4%;
-    --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
+    --border: 214 20% 84%;
+    --input: 214 20% 84%;
+    --ring: 188 91% 35%;
 
     --radius: 0.5rem;
   }
 
   .dark {
-    --background: 222.2 84% 4.9%;
-    --foreground: 210 40% 98%;
+    --background: 220 24% 6%;
+    --foreground: 213 31% 91%;
 
-    --card: 222.2 84% 4.9%;
-    --card-foreground: 210 40% 98%;
+    --card: 220 20% 10%;
+    --card-foreground: 213 31% 91%;
 
-    --popover: 222.2 84% 4.9%;
-    --popover-foreground: 210 40% 98%;
+    --popover: 220 20% 10%;
+    --popover-foreground: 213 31% 91%;
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 11.2%;
+    --primary: 187 85% 52%;
+    --primary-foreground: 220 24% 6%;
 
-    --secondary: 217.2 32.6% 17.5%;
-    --secondary-foreground: 210 40% 98%;
+    --secondary: 218 18% 16%;
+    --secondary-foreground: 213 31% 91%;
 
-    --muted: 217.2 32.6% 17.5%;
-    --muted-foreground: 215 20.2% 65.1%;
+    --muted: 218 18% 14%;
+    --muted-foreground: 215 18% 63%;
 
-    --accent: 217.2 32.6% 17.5%;
-    --accent-foreground: 210 40% 98%;
+    --accent: 42 94% 58%;
+    --accent-foreground: 220 24% 6%;
 
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 210 40% 98%;
 
-    --border: 217.2 32.6% 17.5%;
-    --input: 217.2 32.6% 17.5%;
-    --ring: 212.7 26.8% 83.9%;
+    --border: 218 16% 21%;
+    --input: 218 16% 21%;
+    --ring: 187 85% 52%;
   }
 }
 
@@ -73,4 +73,21 @@
   body {
     @apply bg-background text-foreground;
   }
+
+  ::selection {
+    @apply bg-primary/30 text-foreground;
+  }
+}
+
+@layer utilities {
+  .surface-grid {
+    background-image:
+      linear-gradient(hsl(var(--border) / 0.3) 1px, transparent 1px),
+      linear-gradient(90deg, hsl(var(--border) / 0.3) 1px, transparent 1px);
+    background-size: 28px 28px;
+  }
+
+  .text-balance {
+    text-wrap: balance;
+  }
 }
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index d75a899..35a82c3 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -25,7 +25,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" className="dark">
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
diff --git a/apps/web/src/components/app/loading-panel.tsx b/apps/web/src/components/app/loading-panel.tsx
new file mode 100644
index 0000000..be2187a
--- /dev/null
+++ b/apps/web/src/components/app/loading-panel.tsx
@@ -0,0 +1,12 @@
+import { Card, CardContent } from "@/components/ui/card";
+
+export function LoadingPanel({ label = "Loading mock data" }: { label?: string }) {
+  return (
+    <Card>
+      <CardContent className="p-6">
+        <div className="h-2 w-40 animate-pulse rounded-full bg-primary/30" />
+        <p className="mt-4 text-sm text-muted-foreground">{label}</p>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/web/src/components/app/page-header.tsx b/apps/web/src/components/app/page-header.tsx
new file mode 100644
index 0000000..86bb1be
--- /dev/null
+++ b/apps/web/src/components/app/page-header.tsx
@@ -0,0 +1,14 @@
+import { Badge } from "@/components/ui/badge";
+
+export function PageHeader({ eyebrow, title, description, action }: { eyebrow?: string; title: string; description?: string; action?: React.ReactNode }) {
+  return (
+    <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+      <div>
+        {eyebrow ? <Badge variant="outline" className="mb-3 font-mono uppercase tracking-[0.18em]">{eyebrow}</Badge> : null}
+        <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">{title}</h1>
+        {description ? <p className="mt-2 max-w-2xl text-sm leading-6 text-muted-foreground">{description}</p> : null}
+      </div>
+      {action}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/app/theme-controller.tsx b/apps/web/src/components/app/theme-controller.tsx
new file mode 100644
index 0000000..edc6b65
--- /dev/null
+++ b/apps/web/src/components/app/theme-controller.tsx
@@ -0,0 +1,20 @@
+"use client";
+
+import { useEffect } from "react";
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useUIStore } from "@/stores/ui-store";
+
+export function ThemeController() {
+  const { darkMode, toggleDarkMode } = useUIStore();
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", darkMode);
+  }, [darkMode]);
+
+  return (
+    <Button variant="ghost" size="icon" onClick={toggleDarkMode} aria-label="Toggle dark mode">
+      {darkMode ? <Moon className="h-4 w-4" /> : <Sun className="h-4 w-4" />}
+    </Button>
+  );
+}
diff --git a/apps/web/src/components/ui/badge.tsx b/apps/web/src/components/ui/badge.tsx
new file mode 100644
index 0000000..e6f39a5
--- /dev/null
+++ b/apps/web/src/components/ui/badge.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+type BadgeVariant = "default" | "secondary" | "outline" | "success" | "warning";
+
+const variants: Record<BadgeVariant, string> = {
+  default: "border-transparent bg-primary text-primary-foreground",
+  secondary: "border-transparent bg-secondary text-secondary-foreground",
+  outline: "border-border text-foreground",
+  success: "border-emerald-500/30 bg-emerald-500/10 text-emerald-400",
+  warning: "border-amber-500/30 bg-amber-500/10 text-amber-300",
+};
+
+export function Badge({ className, variant = "default", ...props }: React.HTMLAttributes<HTMLDivElement> & { variant?: BadgeVariant }) {
+  return (
+    <div
+      className={cn(
+        "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-medium",
+        variants[variant],
+        className
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx
new file mode 100644
index 0000000..e8edad6
--- /dev/null
+++ b/apps/web/src/components/ui/button.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cn } from "@/lib/utils";
+
+type ButtonVariant = "default" | "secondary" | "ghost" | "outline" | "destructive";
+type ButtonSize = "default" | "sm" | "lg" | "icon";
+
+const variants: Record<ButtonVariant, string> = {
+  default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  ghost: "hover:bg-muted hover:text-foreground",
+  outline: "border border-border bg-background hover:bg-muted",
+  destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+};
+
+const sizes: Record<ButtonSize, string> = {
+  default: "h-10 px-4 py-2",
+  sm: "h-8 px-3 text-xs",
+  lg: "h-11 px-5",
+  icon: "h-10 w-10",
+};
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  asChild?: boolean;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant = "default", size = "default", asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    return (
+      <Comp
+        className={cn(
+          "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+          variants[variant],
+          sizes[size],
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
diff --git a/apps/web/src/components/ui/card.tsx b/apps/web/src/components/ui/card.tsx
new file mode 100644
index 0000000..d785a3c
--- /dev/null
+++ b/apps/web/src/components/ui/card.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("rounded-lg border border-border bg-card text-card-foreground shadow-sm", className)} {...props} />;
+}
+
+export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col gap-1.5 p-5", className)} {...props} />;
+}
+
+export function CardTitle({ className, ...props }: React.HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn("text-base font-semibold leading-none tracking-tight", className)} {...props} />;
+}
+
+export function CardDescription({ className, ...props }: React.HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("text-sm text-muted-foreground", className)} {...props} />;
+}
+
+export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("p-5 pt-0", className)} {...props} />;
+}
diff --git a/apps/web/src/components/ui/input.tsx b/apps/web/src/components/ui/input.tsx
new file mode 100644
index 0000000..7a492f4
--- /dev/null
+++ b/apps/web/src/components/ui/input.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(({ className, ...props }, ref) => (
+  <input
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+));
+Input.displayName = "Input";
diff --git a/apps/web/src/components/ui/progress.tsx b/apps/web/src/components/ui/progress.tsx
new file mode 100644
index 0000000..2ea6d9f
--- /dev/null
+++ b/apps/web/src/components/ui/progress.tsx
@@ -0,0 +1,10 @@
+import { cn } from "@/lib/utils";
+
+export function Progress({ value, className }: { value: number; className?: string }) {
+  const width = Math.max(0, Math.min(100, value));
+  return (
+    <div className={cn("h-2 overflow-hidden rounded-full bg-muted", className)}>
+      <div className="h-full rounded-full bg-primary transition-all" style={{ width: `${width}%` }} />
+    </div>
+  );
+}
diff --git a/apps/web/src/components/ui/textarea.tsx b/apps/web/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..ac13df7
--- /dev/null
+++ b/apps/web/src/components/ui/textarea.tsx
@@ -0,0 +1,14 @@
+import * as React from "react";
+import { cn } from "@/lib/utils";
+
+export const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(({ className, ...props }, ref) => (
+  <textarea
+    ref={ref}
+    className={cn(
+      "flex min-h-24 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      className
+    )}
+    {...props}
+  />
+));
+Textarea.displayName = "Textarea";

From 99c6ae1caf99447c8cd6261aa0e38082b9bdc387 Mon Sep 17 00:00:00 2001
From: SourabhX16 <146323884+SourabhX16@users.noreply.github.com>
Date: Sun, 28 Jun 2026 12:41:22 +0530
Subject: [PATCH 2/5] feat(web): add mock data and client state

---
 apps/web/src/lib/mock-data/api.ts   |  58 +++++++++++
 apps/web/src/lib/mock-data/data.ts  | 150 ++++++++++++++++++++++++++++
 apps/web/src/lib/mock-data/hooks.ts |  28 ++++++
 apps/web/src/lib/mock-data/types.ts |  69 +++++++++++++
 apps/web/src/lib/socket/client.ts   |  16 +++
 apps/web/src/lib/trpc/client.ts     |  13 +++
 apps/web/src/stores/auth-store.ts   |  26 +++++
 apps/web/src/stores/editor-store.ts |  26 +++++
 apps/web/src/stores/ui-store.ts     |  17 ++++
 9 files changed, 403 insertions(+)
 create mode 100644 apps/web/src/lib/mock-data/api.ts
 create mode 100644 apps/web/src/lib/mock-data/data.ts
 create mode 100644 apps/web/src/lib/mock-data/hooks.ts
 create mode 100644 apps/web/src/lib/mock-data/types.ts
 create mode 100644 apps/web/src/lib/socket/client.ts
 create mode 100644 apps/web/src/lib/trpc/client.ts
 create mode 100644 apps/web/src/stores/auth-store.ts
 create mode 100644 apps/web/src/stores/editor-store.ts
 create mode 100644 apps/web/src/stores/ui-store.ts

diff --git a/apps/web/src/lib/mock-data/api.ts b/apps/web/src/lib/mock-data/api.ts
new file mode 100644
index 0000000..9d41964
--- /dev/null
+++ b/apps/web/src/lib/mock-data/api.ts
@@ -0,0 +1,58 @@
+import { annotations, blindspots, diffLines, leaderboard, quiz, radarData, tracks, warRoomMessages } from "./data";
+
+const wait = (ms = 240) => new Promise((resolve) => setTimeout(resolve, ms));
+
+export async function getDashboard() {
+  await wait();
+  return {
+    user: { name: "Sourabh", irs: 82, streak: 7, rank: 3 },
+    activeTrack: tracks[0],
+    radarData,
+    leaderboard,
+    blindspots,
+  };
+}
+
+export async function getTracks() {
+  await wait();
+  return tracks;
+}
+
+export async function getModule(trackId: string, moduleId: string) {
+  await wait();
+  const track = tracks.find((item) => item.id === trackId) ?? tracks[0];
+  return {
+    track,
+    module: track.modules.find((item) => item.id === moduleId) ?? track.modules[0],
+    annotations,
+    quiz,
+    diffLines,
+  };
+}
+
+export async function getWarRoom() {
+  await wait();
+  return {
+    room: { id: "room-1", name: "Frontend Systems live defend", members: 18, status: "live" },
+    messages: warRoomMessages,
+    leaderboard,
+  };
+}
+
+export async function getProfile() {
+  await wait();
+  return {
+    name: "Sourabh Patne",
+    role: "Frontend builder",
+    irs: 82,
+    streak: 7,
+    completedModules: 14,
+    radarData,
+    recent: ["Auth guard rebuild", "Query cache policy", "Diff score contract"],
+  };
+}
+
+export async function getBlindspots() {
+  await wait();
+  return blindspots;
+}
diff --git a/apps/web/src/lib/mock-data/data.ts b/apps/web/src/lib/mock-data/data.ts
new file mode 100644
index 0000000..5249b0f
--- /dev/null
+++ b/apps/web/src/lib/mock-data/data.ts
@@ -0,0 +1,150 @@
+import type { Annotation, Blindspot, DiffLine, LeaderboardEntry, MockTrack, QuizQuestion, WarRoomMessage } from "./types";
+
+const sourceCode = `export function createGuard(session) {
+  if (!session?.user) {
+    return { allowed: false, reason: "Missing user" };
+  }
+
+  const roles = session.user.roles ?? [];
+  return {
+    allowed: roles.includes("builder"),
+    reason: roles.includes("builder") ? "Ready" : "Builder role required",
+  };
+}`;
+
+export const tracks: MockTrack[] = [
+  {
+    id: "frontend-systems",
+    title: "Frontend Systems",
+    description: "State, data fetching, auth surfaces, and editor-heavy product screens.",
+    difficulty: "Intermediate",
+    progress: 68,
+    modules: [
+      {
+        id: "auth-guard-rebuild",
+        trackId: "frontend-systems",
+        title: "Auth guard rebuild",
+        summary: "Decode a session guard and rebuild its branching logic from memory.",
+        order: 1,
+        estimatedMinutes: 34,
+        sourceCode,
+        starterCode: `export function createGuard(session) {\n  // Rebuild the guard from memory.\n}`,
+        language: "typescript",
+        concepts: ["auth", "branching", "defensive checks"],
+      },
+      {
+        id: "query-cache",
+        trackId: "frontend-systems",
+        title: "Query cache policy",
+        summary: "Reason about stale time, optimistic data, and recovery states.",
+        order: 2,
+        estimatedMinutes: 28,
+        sourceCode,
+        starterCode: sourceCode,
+        language: "typescript",
+        concepts: ["react-query", "cache", "latency"],
+      },
+    ],
+  },
+  {
+    id: "ai-workflows",
+    title: "AI Workflows",
+    description: "Prompt contracts, diff scoring, quiz generation, and defend sessions.",
+    difficulty: "Advanced",
+    progress: 42,
+    modules: [
+      {
+        id: "diff-score-contract",
+        trackId: "ai-workflows",
+        title: "Diff score contract",
+        summary: "Compare code intent instead of matching text line by line.",
+        order: 1,
+        estimatedMinutes: 41,
+        sourceCode,
+        starterCode: sourceCode,
+        language: "typescript",
+        concepts: ["diff", "scoring", "contracts"],
+      },
+    ],
+  },
+  {
+    id: "backend-foundations",
+    title: "Backend Foundations",
+    description: "tRPC procedures, Prisma access patterns, queue jobs, and socket events.",
+    difficulty: "Foundation",
+    progress: 24,
+    modules: [
+      {
+        id: "trpc-health",
+        trackId: "backend-foundations",
+        title: "tRPC health procedure",
+        summary: "Trace a thin procedure from client call to Express middleware.",
+        order: 1,
+        estimatedMinutes: 22,
+        sourceCode,
+        starterCode: sourceCode,
+        language: "typescript",
+        concepts: ["trpc", "express", "routing"],
+      },
+    ],
+  },
+];
+
+export const annotations: Annotation[] = [
+  { id: "a1", line: 2, tag: "guard", note: "Reject missing sessions before reading nested fields." },
+  { id: "a2", line: 6, tag: "roles", note: "Default roles to an empty array so includes is safe." },
+];
+
+export const quiz: QuizQuestion[] = [
+  {
+    id: "q1",
+    prompt: "Why does the guard use optional chaining on session?",
+    options: ["To make the code shorter", "To avoid reading user from null or undefined", "To memoize the session", "To force OAuth refresh"],
+    answerIndex: 1,
+    explanation: "The first branch must be safe even when there is no session object.",
+  },
+  {
+    id: "q2",
+    prompt: "What behavior should remain stable in the rebuild?",
+    options: ["Only exact whitespace", "The builder role check and failure reason", "The import order", "The variable names only"],
+    answerIndex: 1,
+    explanation: "The important behavior is access control and clear feedback, not identical formatting.",
+  },
+];
+
+export const diffLines: DiffLine[] = [
+  { id: "d1", type: "same", left: "export function createGuard(session) {", right: "export function createGuard(session) {" },
+  { id: "d2", type: "same", left: "  if (!session?.user) {", right: "  if (!session?.user) {" },
+  { id: "d3", type: "remove", left: "    return { allowed: false, reason: \"Missing user\" };" },
+  { id: "d4", type: "add", right: "    return { allowed: false, reason: \"No user\" };" },
+  { id: "d5", type: "same", left: "  const roles = session.user.roles ?? [];", right: "  const roles = session.user.roles ?? [];" },
+  { id: "d6", type: "same", left: "}", right: "}" },
+];
+
+export const leaderboard: LeaderboardEntry[] = [
+  { id: "u1", name: "Aarav", score: 91, streak: 14, track: "Frontend Systems" },
+  { id: "u2", name: "Mira", score: 87, streak: 11, track: "AI Workflows" },
+  { id: "u3", name: "You", score: 82, streak: 7, track: "Frontend Systems" },
+  { id: "u4", name: "Dev", score: 78, streak: 5, track: "Backend Foundations" },
+];
+
+export const warRoomMessages: WarRoomMessage[] = [
+  { id: "m1", author: "System", body: "Room opened for Auth guard rebuild.", timestamp: "11:42", kind: "system" },
+  { id: "m2", author: "Mira", body: "Watch the default roles branch. It is easy to miss.", timestamp: "11:44", kind: "chat" },
+  { id: "m3", author: "Defend Bot", body: "Explain why a missing role should return a reason string.", timestamp: "11:45", kind: "defend" },
+];
+
+export const blindspots: Blindspot[] = [
+  { id: "b1", concept: "Null-safe access", severity: 78, evidence: "Missed 2 optional chaining branches", nextAction: "Replay auth guard decode" },
+  { id: "b2", concept: "Cache invalidation", severity: 62, evidence: "Submitted stale query policy twice", nextAction: "Rebuild query cache module" },
+  { id: "b3", concept: "Role semantics", severity: 44, evidence: "Weak defend answer on authorization reasons", nextAction: "Answer 3 defend prompts" },
+];
+
+export const radarData = [
+  { subject: "Read", score: 86 },
+  { subject: "Rebuild", score: 74 },
+  { subject: "Defend", score: 68 },
+  { subject: "Speed", score: 71 },
+  { subject: "Recall", score: 82 },
+  { subject: "Review", score: 64 },
+];
diff --git a/apps/web/src/lib/mock-data/hooks.ts b/apps/web/src/lib/mock-data/hooks.ts
new file mode 100644
index 0000000..1bd9547
--- /dev/null
+++ b/apps/web/src/lib/mock-data/hooks.ts
@@ -0,0 +1,28 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { getBlindspots, getDashboard, getModule, getProfile, getTracks, getWarRoom } from "./api";
+
+export function useDashboardQuery() {
+  return useQuery({ queryKey: ["dashboard"], queryFn: getDashboard });
+}
+
+export function useTracksQuery() {
+  return useQuery({ queryKey: ["tracks"], queryFn: getTracks });
+}
+
+export function useModuleQuery(trackId: string, moduleId: string) {
+  return useQuery({ queryKey: ["module", trackId, moduleId], queryFn: () => getModule(trackId, moduleId) });
+}
+
+export function useWarRoomQuery() {
+  return useQuery({ queryKey: ["war-room"], queryFn: getWarRoom });
+}
+
+export function useProfileQuery() {
+  return useQuery({ queryKey: ["profile"], queryFn: getProfile });
+}
+
+export function useBlindspotsQuery() {
+  return useQuery({ queryKey: ["blindspots"], queryFn: getBlindspots });
+}
diff --git a/apps/web/src/lib/mock-data/types.ts b/apps/web/src/lib/mock-data/types.ts
new file mode 100644
index 0000000..513bfe2
--- /dev/null
+++ b/apps/web/src/lib/mock-data/types.ts
@@ -0,0 +1,69 @@
+export type ModulePhase = "decode" | "rebuild" | "defend";
+
+export interface MockTrack {
+  id: string;
+  title: string;
+  description: string;
+  difficulty: "Foundation" | "Intermediate" | "Advanced";
+  progress: number;
+  modules: MockModule[];
+}
+
+export interface MockModule {
+  id: string;
+  trackId: string;
+  title: string;
+  summary: string;
+  order: number;
+  estimatedMinutes: number;
+  sourceCode: string;
+  starterCode: string;
+  language: string;
+  concepts: string[];
+}
+
+export interface Annotation {
+  id: string;
+  line: number;
+  note: string;
+  tag: string;
+}
+
+export interface QuizQuestion {
+  id: string;
+  prompt: string;
+  options: string[];
+  answerIndex: number;
+  explanation: string;
+}
+
+export interface DiffLine {
+  id: string;
+  type: "same" | "add" | "remove";
+  left?: string;
+  right?: string;
+}
+
+export interface LeaderboardEntry {
+  id: string;
+  name: string;
+  score: number;
+  streak: number;
+  track: string;
+}
+
+export interface WarRoomMessage {
+  id: string;
+  author: string;
+  body: string;
+  timestamp: string;
+  kind: "chat" | "system" | "defend";
+}
+
+export interface Blindspot {
+  id: string;
+  concept: string;
+  severity: number;
+  evidence: string;
+  nextAction: string;
+}
diff --git a/apps/web/src/lib/socket/client.ts b/apps/web/src/lib/socket/client.ts
new file mode 100644
index 0000000..5e89f60
--- /dev/null
+++ b/apps/web/src/lib/socket/client.ts
@@ -0,0 +1,16 @@
+"use client";
+
+import { io, type Socket } from "socket.io-client";
+
+let socket: Socket | null = null;
+
+export function getSocket() {
+  if (!socket) {
+    socket = io(process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000", {
+      autoConnect: false,
+      transports: ["websocket"],
+    });
+  }
+
+  return socket;
+}
diff --git a/apps/web/src/lib/trpc/client.ts b/apps/web/src/lib/trpc/client.ts
new file mode 100644
index 0000000..e50447a
--- /dev/null
+++ b/apps/web/src/lib/trpc/client.ts
@@ -0,0 +1,13 @@
+export const trpcEndpoint = `${process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:4000"}/trpc`;
+
+export async function callTrpcHealth() {
+  const response = await fetch(`${trpcEndpoint}/health`, {
+    method: "GET",
+  });
+
+  if (!response.ok) {
+    throw new Error("tRPC health check failed");
+  }
+
+  return response.json();
+}
diff --git a/apps/web/src/stores/auth-store.ts b/apps/web/src/stores/auth-store.ts
new file mode 100644
index 0000000..acfc349
--- /dev/null
+++ b/apps/web/src/stores/auth-store.ts
@@ -0,0 +1,26 @@
+"use client";
+
+import { create } from "zustand";
+
+interface MockUser {
+  name: string;
+  email: string;
+  image?: string;
+}
+
+interface AuthStore {
+  user: MockUser | null;
+  signIn: () => void;
+  signOut: () => void;
+}
+
+const defaultUser: MockUser = {
+  name: "Sourabh Patne",
+  email: "sourabh@unvibe.dev",
+};
+
+export const useAuthStore = create<AuthStore>((set) => ({
+  user: defaultUser,
+  signIn: () => set({ user: defaultUser }),
+  signOut: () => set({ user: null }),
+}));
diff --git a/apps/web/src/stores/editor-store.ts b/apps/web/src/stores/editor-store.ts
new file mode 100644
index 0000000..3fec86c
--- /dev/null
+++ b/apps/web/src/stores/editor-store.ts
@@ -0,0 +1,26 @@
+"use client";
+
+import { create } from "zustand";
+import type { ModulePhase } from "@/lib/mock-data/types";
+
+interface EditorStore {
+  phase: ModulePhase;
+  code: string;
+  language: string;
+  isDirty: boolean;
+  setPhase: (phase: ModulePhase) => void;
+  setCode: (code: string) => void;
+  resetCode: (code: string) => void;
+  setLanguage: (language: string) => void;
+}
+
+export const useEditorStore = create<EditorStore>((set) => ({
+  phase: "decode",
+  code: "",
+  language: "typescript",
+  isDirty: false,
+  setPhase: (phase) => set({ phase }),
+  setCode: (code) => set({ code, isDirty: true }),
+  resetCode: (code) => set({ code, isDirty: false }),
+  setLanguage: (language) => set({ language }),
+}));
diff --git a/apps/web/src/stores/ui-store.ts b/apps/web/src/stores/ui-store.ts
new file mode 100644
index 0000000..fa7833d
--- /dev/null
+++ b/apps/web/src/stores/ui-store.ts
@@ -0,0 +1,17 @@
+"use client";
+
+import { create } from "zustand";
+
+interface UIStore {
+  darkMode: boolean;
+  sidebarOpen: boolean;
+  toggleDarkMode: () => void;
+  toggleSidebar: () => void;
+}
+
+export const useUIStore = create<UIStore>((set) => ({
+  darkMode: true,
+  sidebarOpen: false,
+  toggleDarkMode: () => set((state) => ({ darkMode: !state.darkMode })),
+  toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
+}));

From 87baf3e32ac13eae496fd7a57c032441fb3c3a29 Mon Sep 17 00:00:00 2001
From: SourabhX16 <146323884+SourabhX16@users.noreply.github.com>
Date: Sun, 28 Jun 2026 12:41:56 +0530
Subject: [PATCH 3/5] feat(web): build interactive learning components

---
 apps/web/src/components/app/app-shell.tsx     |  96 +++++++++++++
 .../components/features/annotation-editor.tsx |  39 ++++++
 .../src/components/features/code-editor.tsx   |  36 +++++
 .../components/features/code-submission.tsx   |  33 +++++
 .../src/components/features/diff-viewer.tsx   |  21 +++
 .../components/features/irs-radar-chart.tsx   |  23 ++++
 .../src/components/features/leaderboard.tsx   |  30 +++++
 .../src/components/features/module-player.tsx | 126 ++++++++++++++++++
 apps/web/src/components/features/quiz-ui.tsx  |  46 +++++++
 .../components/features/streak-tracker.tsx    |  21 +++
 .../src/components/features/war-room-live.tsx |  72 ++++++++++
 11 files changed, 543 insertions(+)
 create mode 100644 apps/web/src/components/app/app-shell.tsx
 create mode 100644 apps/web/src/components/features/annotation-editor.tsx
 create mode 100644 apps/web/src/components/features/code-editor.tsx
 create mode 100644 apps/web/src/components/features/code-submission.tsx
 create mode 100644 apps/web/src/components/features/diff-viewer.tsx
 create mode 100644 apps/web/src/components/features/irs-radar-chart.tsx
 create mode 100644 apps/web/src/components/features/leaderboard.tsx
 create mode 100644 apps/web/src/components/features/module-player.tsx
 create mode 100644 apps/web/src/components/features/quiz-ui.tsx
 create mode 100644 apps/web/src/components/features/streak-tracker.tsx
 create mode 100644 apps/web/src/components/features/war-room-live.tsx

diff --git a/apps/web/src/components/app/app-shell.tsx b/apps/web/src/components/app/app-shell.tsx
new file mode 100644
index 0000000..0019165
--- /dev/null
+++ b/apps/web/src/components/app/app-shell.tsx
@@ -0,0 +1,96 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { BarChart3, LayoutDashboard, Map, RadioTower, Route, UserRound } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { ThemeController } from "./theme-controller";
+import { useAuthStore } from "@/stores/auth-store";
+import { Button } from "@/components/ui/button";
+
+const nav = [
+  { href: "/app/dashboard", label: "Dashboard", icon: LayoutDashboard },
+  { href: "/app/tracks", label: "Tracks", icon: Route },
+  { href: "/app/war-room", label: "War Room", icon: RadioTower },
+  { href: "/app/blindspot-map", label: "Blindspots", icon: Map },
+  { href: "/app/profile", label: "Profile", icon: UserRound },
+];
+
+export function AppShell({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  const { user, signOut } = useAuthStore();
+
+  return (
+    <div className="min-h-screen bg-background text-foreground">
+      <aside className="fixed inset-y-0 left-0 z-20 hidden w-64 border-r border-border bg-card/80 backdrop-blur lg:block">
+        <div className="flex h-16 items-center gap-3 border-b border-border px-5">
+          <span className="flex h-9 w-9 items-center justify-center rounded-md bg-primary/15 font-mono text-sm font-semibold text-primary">
+            UV
+          </span>
+          <div>
+            <p className="font-semibold">UnVibe</p>
+            <p className="font-mono text-xs text-muted-foreground">training console</p>
+          </div>
+        </div>
+        <nav className="space-y-1 p-3">
+          {nav.map((item) => {
+            const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
+            const Icon = item.icon;
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "flex items-center gap-3 rounded-md px-3 py-2 text-sm text-muted-foreground transition hover:bg-muted hover:text-foreground",
+                  active && "bg-primary/10 text-primary"
+                )}
+              >
+                <Icon className="h-4 w-4" />
+                {item.label}
+              </Link>
+            );
+          })}
+        </nav>
+      </aside>
+      <div className="lg:pl-64">
+        <header className="sticky top-0 z-10 flex h-16 items-center justify-between border-b border-border bg-background/85 px-4 backdrop-blur sm:px-6">
+          <div className="flex items-center gap-3 lg:hidden">
+            <BarChart3 className="h-5 w-5 text-primary" />
+            <span className="font-semibold">UnVibe</span>
+          </div>
+          <div className="hidden lg:block">
+            <p className="font-mono text-xs uppercase tracking-[0.22em] text-muted-foreground">mock workspace</p>
+          </div>
+          <div className="flex items-center gap-2">
+            <ThemeController />
+            <div className="hidden text-right sm:block">
+              <p className="text-sm font-medium">{user?.name ?? "Guest"}</p>
+              <p className="text-xs text-muted-foreground">{user?.email ?? "mock session"}</p>
+            </div>
+            <Button variant="outline" size="sm" onClick={signOut}>Sign out</Button>
+          </div>
+        </header>
+        <main className="mx-auto w-full max-w-7xl px-4 py-6 pb-24 sm:px-6 lg:py-8">{children}</main>
+        <nav className="fixed inset-x-0 bottom-0 z-20 grid grid-cols-5 border-t border-border bg-card/95 px-2 py-2 backdrop-blur lg:hidden">
+          {nav.map((item) => {
+            const active = pathname === item.href || pathname.startsWith(`${item.href}/`);
+            const Icon = item.icon;
+            return (
+              <Link
+                key={item.href}
+                href={item.href}
+                className={cn(
+                  "flex flex-col items-center gap-1 rounded-md px-2 py-2 text-[11px] text-muted-foreground",
+                  active && "bg-primary/10 text-primary"
+                )}
+              >
+                <Icon className="h-4 w-4" />
+                <span className="max-w-full truncate">{item.label}</span>
+              </Link>
+            );
+          })}
+        </nav>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/features/annotation-editor.tsx b/apps/web/src/components/features/annotation-editor.tsx
new file mode 100644
index 0000000..a91f9d2
--- /dev/null
+++ b/apps/web/src/components/features/annotation-editor.tsx
@@ -0,0 +1,39 @@
+"use client";
+
+import { useState } from "react";
+import type { Annotation } from "@/lib/mock-data/types";
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+
+export function AnnotationEditor({ annotations: initial }: { annotations: Annotation[] }) {
+  const [annotations, setAnnotations] = useState(initial);
+  const [note, setNote] = useState("");
+
+  return (
+    <div className="space-y-3">
+      <div className="flex gap-2">
+        <Textarea value={note} onChange={(event) => setNote(event.target.value)} placeholder="Add what this block is responsible for." />
+        <Button
+          className="self-start"
+          onClick={() => {
+            if (!note.trim()) return;
+            setAnnotations((items) => [...items, { id: crypto.randomUUID(), line: 1 + items.length * 2, tag: "note", note }]);
+            setNote("");
+          }}
+        >
+          Add
+        </Button>
+      </div>
+      {annotations.map((annotation) => (
+        <div key={annotation.id} className="rounded-md border border-border bg-background/60 p-3">
+          <div className="mb-2 flex items-center gap-2">
+            <Badge variant="outline">line {annotation.line}</Badge>
+            <Badge variant="secondary">{annotation.tag}</Badge>
+          </div>
+          <p className="text-sm text-muted-foreground">{annotation.note}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/features/code-editor.tsx b/apps/web/src/components/features/code-editor.tsx
new file mode 100644
index 0000000..a332721
--- /dev/null
+++ b/apps/web/src/components/features/code-editor.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import Editor from "@monaco-editor/react";
+import { RotateCcw } from "lucide-react";
+import { Button } from "@/components/ui/button";
+
+export function CodeEditor({ code, language, onChange, onReset, readOnly = false }: { code: string; language: string; onChange: (value: string) => void; onReset?: () => void; readOnly?: boolean }) {
+  return (
+    <div className="overflow-hidden rounded-lg border border-border bg-card">
+      <div className="flex items-center justify-between border-b border-border px-3 py-2">
+        <span className="font-mono text-xs uppercase tracking-[0.18em] text-muted-foreground">{language}</span>
+        {onReset ? (
+          <Button variant="ghost" size="sm" onClick={onReset}>
+            <RotateCcw className="h-4 w-4" />
+            Reset
+          </Button>
+        ) : null}
+      </div>
+      <Editor
+        height="420px"
+        language={language}
+        value={code}
+        theme="vs-dark"
+        onChange={(value) => onChange(value ?? "")}
+        options={{
+          readOnly,
+          minimap: { enabled: false },
+          fontSize: 13,
+          lineNumbersMinChars: 3,
+          scrollBeyondLastLine: false,
+          wordWrap: "on",
+        }}
+      />
+    </div>
+  );
+}
diff --git a/apps/web/src/components/features/code-submission.tsx b/apps/web/src/components/features/code-submission.tsx
new file mode 100644
index 0000000..674be56
--- /dev/null
+++ b/apps/web/src/components/features/code-submission.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { useState } from "react";
+import { Send } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+
+export function CodeSubmission({ disabled }: { disabled?: boolean }) {
+  const [status, setStatus] = useState<"idle" | "running" | "passed">("idle");
+
+  return (
+    <div className="rounded-lg border border-border bg-card p-4">
+      <div className="flex items-center justify-between gap-3">
+        <div>
+          <p className="font-semibold">Submission</p>
+          <p className="text-sm text-muted-foreground">Mock diff scoring keeps the flow local.</p>
+        </div>
+        <Badge variant={status === "passed" ? "success" : "secondary"}>{status}</Badge>
+      </div>
+      <Button
+        className="mt-4 w-full"
+        disabled={disabled || status === "running"}
+        onClick={() => {
+          setStatus("running");
+          window.setTimeout(() => setStatus("passed"), 900);
+        }}
+      >
+        <Send className="h-4 w-4" />
+        Submit rebuild
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/features/diff-viewer.tsx b/apps/web/src/components/features/diff-viewer.tsx
new file mode 100644
index 0000000..6897230
--- /dev/null
+++ b/apps/web/src/components/features/diff-viewer.tsx
@@ -0,0 +1,21 @@
+import type { DiffLine } from "@/lib/mock-data/types";
+import { cn } from "@/lib/utils";
+
+export function DiffViewer({ lines }: { lines: DiffLine[] }) {
+  return (
+    <div className="overflow-hidden rounded-lg border border-border bg-card">
+      <div className="grid grid-cols-2 border-b border-border px-3 py-2 font-mono text-xs uppercase tracking-[0.18em] text-muted-foreground">
+        <span>source</span>
+        <span>rebuild</span>
+      </div>
+      <div className="font-mono text-xs">
+        {lines.map((line) => (
+          <div key={line.id} className={cn("grid grid-cols-2 border-b border-border/60 last:border-0", line.type === "add" && "bg-emerald-500/10", line.type === "remove" && "bg-red-500/10")}>
+            <pre className="overflow-x-auto p-2 text-muted-foreground">{line.left ?? ""}</pre>
+            <pre className="overflow-x-auto p-2">{line.right ?? ""}</pre>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/features/irs-radar-chart.tsx b/apps/web/src/components/features/irs-radar-chart.tsx
new file mode 100644
index 0000000..f812314
--- /dev/null
+++ b/apps/web/src/components/features/irs-radar-chart.tsx
@@ -0,0 +1,23 @@
+"use client";
+
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart, ResponsiveContainer } from "recharts";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function IRSRadarChart({ data }: { data: Array<{ subject: string; score: number }> }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>IRS radar</CardTitle>
+      </CardHeader>
+      <CardContent className="h-72">
+        <ResponsiveContainer width="100%" height="100%">
+          <RadarChart data={data}>
+            <PolarGrid stroke="hsl(var(--border))" />
+            <PolarAngleAxis dataKey="subject" tick={{ fill: "hsl(var(--muted-foreground))", fontSize: 12 }} />
+            <Radar dataKey="score" stroke="hsl(var(--primary))" fill="hsl(var(--primary))" fillOpacity={0.28} />
+          </RadarChart>
+        </ResponsiveContainer>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/web/src/components/features/leaderboard.tsx b/apps/web/src/components/features/leaderboard.tsx
new file mode 100644
index 0000000..11ce94d
--- /dev/null
+++ b/apps/web/src/components/features/leaderboard.tsx
@@ -0,0 +1,30 @@
+import type { LeaderboardEntry } from "@/lib/mock-data/types";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+
+export function Leaderboard({ entries }: { entries: LeaderboardEntry[] }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Leaderboard</CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {entries.map((entry, index) => (
+          <div key={entry.id} className="flex items-center justify-between rounded-md border border-border bg-background/60 p-3">
+            <div className="flex items-center gap-3">
+              <span className="font-mono text-sm text-muted-foreground">#{index + 1}</span>
+              <div>
+                <p className="font-medium">{entry.name}</p>
+                <p className="text-xs text-muted-foreground">{entry.track}</p>
+              </div>
+            </div>
+            <div className="flex items-center gap-2">
+              <Badge variant={entry.name === "You" ? "success" : "secondary"}>{entry.score}</Badge>
+              <span className="hidden text-xs text-muted-foreground sm:inline">{entry.streak}d</span>
+            </div>
+          </div>
+        ))}
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/web/src/components/features/module-player.tsx b/apps/web/src/components/features/module-player.tsx
new file mode 100644
index 0000000..4df69f9
--- /dev/null
+++ b/apps/web/src/components/features/module-player.tsx
@@ -0,0 +1,126 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { BookOpenCheck, Brain, MessageSquareQuote } from "lucide-react";
+import type { Annotation, DiffLine, MockModule, QuizQuestion } from "@/lib/mock-data/types";
+import { useEditorStore } from "@/stores/editor-store";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { AnnotationEditor } from "./annotation-editor";
+import { CodeEditor } from "./code-editor";
+import { CodeSubmission } from "./code-submission";
+import { DiffViewer } from "./diff-viewer";
+import { QuizUI } from "./quiz-ui";
+
+const phases = [
+  { id: "decode", label: "Decode", icon: BookOpenCheck },
+  { id: "rebuild", label: "Rebuild", icon: Brain },
+  { id: "defend", label: "Defend", icon: MessageSquareQuote },
+] as const;
+
+export function ModulePlayer({ module, annotations, quiz, diffLines }: { module: MockModule; annotations: Annotation[]; quiz: QuizQuestion[]; diffLines: DiffLine[] }) {
+  const { phase, setPhase, code, setCode, resetCode, language } = useEditorStore();
+  const [defendAnswers, setDefendAnswers] = useState<string[]>(["I would preserve the early return so later branches can assume a user exists."]);
+
+  useEffect(() => {
+    resetCode(module.starterCode);
+  }, [module.id, module.starterCode, resetCode]);
+
+  const progress = useMemo(() => (phase === "decode" ? 33 : phase === "rebuild" ? 66 : 100), [phase]);
+
+  return (
+    <div className="grid gap-6 xl:grid-cols-[1fr_360px]">
+      <section className="space-y-4">
+        <Card>
+          <CardHeader>
+            <div className="flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <CardTitle>{module.title}</CardTitle>
+                <p className="mt-2 text-sm text-muted-foreground">{module.summary}</p>
+              </div>
+              <Badge variant="outline">{module.estimatedMinutes} min</Badge>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="mb-4 grid gap-2 sm:grid-cols-3">
+              {phases.map((item) => {
+                const Icon = item.icon;
+                const active = item.id === phase;
+                return (
+                  <button
+                    key={item.id}
+                    onClick={() => setPhase(item.id)}
+                    className={`rounded-md border p-3 text-left transition ${active ? "border-primary bg-primary/10 text-primary" : "border-border bg-background/50 text-muted-foreground hover:text-foreground"}`}
+                  >
+                    <Icon className="mb-2 h-4 w-4" />
+                    <span className="text-sm font-medium">{item.label}</span>
+                  </button>
+                );
+              })}
+            </div>
+            <Progress value={progress} />
+          </CardContent>
+        </Card>
+
+        {phase === "decode" ? (
+          <CodeEditor code={module.sourceCode} language={language} onChange={() => undefined} readOnly />
+        ) : (
+          <CodeEditor code={code || module.starterCode} language={language} onChange={setCode} onReset={() => resetCode(module.starterCode)} />
+        )}
+      </section>
+
+      <aside className="space-y-4">
+        {phase === "decode" ? (
+          <Card>
+            <CardHeader>
+              <CardTitle>Annotations</CardTitle>
+            </CardHeader>
+            <CardContent>
+              <AnnotationEditor annotations={annotations} />
+              <Button className="mt-4 w-full" onClick={() => setPhase("rebuild")}>Unlock rebuild</Button>
+            </CardContent>
+          </Card>
+        ) : null}
+
+        {phase === "rebuild" ? (
+          <>
+            <Card>
+              <CardHeader>
+                <CardTitle>Decode quiz</CardTitle>
+              </CardHeader>
+              <CardContent>
+                <QuizUI questions={quiz} />
+              </CardContent>
+            </Card>
+            <CodeSubmission />
+            <Button className="w-full" variant="secondary" onClick={() => setPhase("defend")}>Start defend</Button>
+          </>
+        ) : null}
+
+        {phase === "defend" ? (
+          <>
+            <Card>
+              <CardHeader>
+                <CardTitle>Live defend</CardTitle>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <div className="rounded-md border border-border bg-background/60 p-3 text-sm">
+                  Why should the missing user branch return before reading roles?
+                </div>
+                {defendAnswers.map((answer, index) => (
+                  <div key={index} className="rounded-md bg-primary/10 p-3 text-sm text-primary">{answer}</div>
+                ))}
+                <Button variant="outline" className="w-full" onClick={() => setDefendAnswers((items) => [...items, "Because it narrows the state and keeps role checks deterministic."])}>
+                  Add mock answer
+                </Button>
+              </CardContent>
+            </Card>
+            <DiffViewer lines={diffLines} />
+          </>
+        ) : null}
+      </aside>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/features/quiz-ui.tsx b/apps/web/src/components/features/quiz-ui.tsx
new file mode 100644
index 0000000..3d5cd71
--- /dev/null
+++ b/apps/web/src/components/features/quiz-ui.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { useState } from "react";
+import type { QuizQuestion } from "@/lib/mock-data/types";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export function QuizUI({ questions }: { questions: QuizQuestion[] }) {
+  const [index, setIndex] = useState(0);
+  const [selected, setSelected] = useState<number | null>(null);
+  const question = questions[index];
+  const complete = index >= questions.length;
+
+  if (complete) {
+    return <div className="rounded-lg border border-emerald-500/30 bg-emerald-500/10 p-4 text-sm text-emerald-300">Quiz complete. Rebuild is unlocked.</div>;
+  }
+
+  return (
+    <div className="space-y-4">
+      <p className="font-medium">{question.prompt}</p>
+      <div className="grid gap-2">
+        {question.options.map((option, optionIndex) => {
+          const picked = selected === optionIndex;
+          const correct = selected !== null && optionIndex === question.answerIndex;
+          return (
+            <button
+              key={option}
+              onClick={() => setSelected(optionIndex)}
+              className={cn(
+                "rounded-md border border-border bg-background/60 p-3 text-left text-sm transition hover:bg-muted",
+                picked && "border-primary text-primary",
+                correct && "border-emerald-500/40 bg-emerald-500/10 text-emerald-300"
+              )}
+            >
+              {option}
+            </button>
+          );
+        })}
+      </div>
+      {selected !== null ? <p className="text-sm text-muted-foreground">{question.explanation}</p> : null}
+      <Button disabled={selected === null} onClick={() => { setIndex((value) => value + 1); setSelected(null); }}>
+        {index === questions.length - 1 ? "Finish quiz" : "Next question"}
+      </Button>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/features/streak-tracker.tsx b/apps/web/src/components/features/streak-tracker.tsx
new file mode 100644
index 0000000..64c086d
--- /dev/null
+++ b/apps/web/src/components/features/streak-tracker.tsx
@@ -0,0 +1,21 @@
+import { Flame } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+export function StreakTracker({ streak }: { streak: number }) {
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Streak</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="flex items-end gap-3">
+          <Flame className="h-8 w-8 text-amber-400" />
+          <div>
+            <p className="text-4xl font-semibold">{streak}</p>
+            <p className="text-sm text-muted-foreground">days in training</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
diff --git a/apps/web/src/components/features/war-room-live.tsx b/apps/web/src/components/features/war-room-live.tsx
new file mode 100644
index 0000000..ceeb770
--- /dev/null
+++ b/apps/web/src/components/features/war-room-live.tsx
@@ -0,0 +1,72 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { LeaderboardEntry, WarRoomMessage } from "@/lib/mock-data/types";
+import { getSocket } from "@/lib/socket/client";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Leaderboard } from "./leaderboard";
+
+export function WarRoomLive({ messages: initialMessages, leaderboard }: { messages: WarRoomMessage[]; leaderboard: LeaderboardEntry[] }) {
+  const [messages, setMessages] = useState(initialMessages);
+  const [draft, setDraft] = useState("");
+
+  useEffect(() => {
+    const socket = getSocket();
+    const timer = window.setInterval(() => {
+      setMessages((items) => [
+        ...items.slice(-5),
+        {
+          id: crypto.randomUUID(),
+          author: "Defend Bot",
+          body: "Mock live prompt: compare behavior, not formatting.",
+          timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
+          kind: "defend",
+        },
+      ]);
+    }, 6000);
+
+    socket.connect();
+    return () => {
+      window.clearInterval(timer);
+      socket.disconnect();
+    };
+  }, []);
+
+  return (
+    <div className="grid gap-4 lg:grid-cols-[1fr_360px]">
+      <Card>
+        <CardHeader>
+          <CardTitle>Room feed</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="h-[520px] space-y-3 overflow-y-auto rounded-md border border-border bg-background/60 p-3">
+            {messages.map((message) => (
+              <div key={message.id} className="rounded-md border border-border bg-card p-3">
+                <div className="mb-1 flex items-center justify-between gap-3 text-xs text-muted-foreground">
+                  <span>{message.author}</span>
+                  <span>{message.timestamp}</span>
+                </div>
+                <p className="text-sm">{message.body}</p>
+              </div>
+            ))}
+          </div>
+          <div className="mt-3 flex gap-2">
+            <Input value={draft} onChange={(event) => setDraft(event.target.value)} placeholder="Send a room note" />
+            <Button
+              onClick={() => {
+                if (!draft.trim()) return;
+                setMessages((items) => [...items, { id: crypto.randomUUID(), author: "You", body: draft, timestamp: "now", kind: "chat" }]);
+                setDraft("");
+              }}
+            >
+              Send
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+      <Leaderboard entries={leaderboard} />
+    </div>
+  );
+}

From d508103123f497d001ba85f72339b5c7974bef6d Mon Sep 17 00:00:00 2001
From: SourabhX16 <146323884+SourabhX16@users.noreply.github.com>
Date: Sun, 28 Jun 2026 12:42:16 +0530
Subject: [PATCH 4/5] feat(web): add mock product pages

---
 apps/web/src/app/app/blindspot-map/page.tsx   |  45 ++++
 apps/web/src/app/app/dashboard/page.tsx       |  79 +++++++
 apps/web/src/app/app/layout.tsx               |   5 +
 apps/web/src/app/app/page.tsx                 |   5 +
 apps/web/src/app/app/profile/page.tsx         |  47 ++++
 .../[trackId]/modules/[moduleId]/page.tsx     |  25 +++
 apps/web/src/app/app/tracks/page.tsx          |  52 +++++
 apps/web/src/app/app/war-room/page.tsx        |  25 +++
 apps/web/src/app/auth/signin/page.tsx         |  46 ++++
 apps/web/src/app/auth/signup/page.tsx         |  47 ++++
 apps/web/src/app/page.tsx                     | 206 ++++++++++--------
 11 files changed, 487 insertions(+), 95 deletions(-)
 create mode 100644 apps/web/src/app/app/blindspot-map/page.tsx
 create mode 100644 apps/web/src/app/app/dashboard/page.tsx
 create mode 100644 apps/web/src/app/app/layout.tsx
 create mode 100644 apps/web/src/app/app/page.tsx
 create mode 100644 apps/web/src/app/app/profile/page.tsx
 create mode 100644 apps/web/src/app/app/tracks/[trackId]/modules/[moduleId]/page.tsx
 create mode 100644 apps/web/src/app/app/tracks/page.tsx
 create mode 100644 apps/web/src/app/app/war-room/page.tsx
 create mode 100644 apps/web/src/app/auth/signin/page.tsx
 create mode 100644 apps/web/src/app/auth/signup/page.tsx

diff --git a/apps/web/src/app/app/blindspot-map/page.tsx b/apps/web/src/app/app/blindspot-map/page.tsx
new file mode 100644
index 0000000..bd5b9c4
--- /dev/null
+++ b/apps/web/src/app/app/blindspot-map/page.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { PageHeader } from "@/components/app/page-header";
+import { LoadingPanel } from "@/components/app/loading-panel";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { useBlindspotsQuery } from "@/lib/mock-data/hooks";
+
+export default function BlindspotMapPage() {
+  const { data: blindspots, isLoading } = useBlindspotsQuery();
+
+  if (isLoading || !blindspots) return <LoadingPanel label="Mapping blindspots" />;
+
+  return (
+    <>
+      <PageHeader eyebrow="blindspot map" title="Weak concepts by evidence" description="A compact view of concepts that need another decode, rebuild, or defend pass." />
+      <div className="grid gap-4">
+        {blindspots.map((blindspot) => (
+          <Card key={blindspot.id}>
+            <CardHeader>
+              <div className="flex flex-wrap items-center justify-between gap-3">
+                <CardTitle>{blindspot.concept}</CardTitle>
+                <Badge variant={blindspot.severity > 70 ? "warning" : "secondary"}>{blindspot.severity}% risk</Badge>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <Progress value={blindspot.severity} />
+              <div className="mt-4 grid gap-3 md:grid-cols-2">
+                <div className="rounded-md border border-border bg-background/60 p-3">
+                  <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Evidence</p>
+                  <p className="mt-2 text-sm">{blindspot.evidence}</p>
+                </div>
+                <div className="rounded-md border border-border bg-background/60 p-3">
+                  <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">Next action</p>
+                  <p className="mt-2 text-sm">{blindspot.nextAction}</p>
+                </div>
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/src/app/app/dashboard/page.tsx b/apps/web/src/app/app/dashboard/page.tsx
new file mode 100644
index 0000000..4f9f725
--- /dev/null
+++ b/apps/web/src/app/app/dashboard/page.tsx
@@ -0,0 +1,79 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowRight, Clock, Target, Trophy } from "lucide-react";
+import { PageHeader } from "@/components/app/page-header";
+import { LoadingPanel } from "@/components/app/loading-panel";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { useDashboardQuery } from "@/lib/mock-data/hooks";
+import { IRSRadarChart } from "@/components/features/irs-radar-chart";
+import { Leaderboard } from "@/components/features/leaderboard";
+import { StreakTracker } from "@/components/features/streak-tracker";
+
+export default function DashboardPage() {
+  const { data: dashboard, isLoading } = useDashboardQuery();
+
+  if (isLoading || !dashboard) return <LoadingPanel />;
+
+  const stats = [
+    { label: "IRS", value: dashboard.user.irs, copy: "Irreplaceability score", icon: Trophy },
+    { label: "Rank", value: `#${dashboard.user.rank}`, copy: "War Room placement", icon: Target },
+    { label: "Focus", value: "34m", copy: "Next module estimate", icon: Clock },
+  ];
+
+  return (
+    <>
+      <PageHeader
+        eyebrow="dashboard"
+        title="Training status"
+        description="Mock data mirrors the future API shape while the backend catches up."
+        action={<Button asChild><Link href="/app/tracks/frontend-systems/modules/auth-guard-rebuild">Resume module<ArrowRight className="h-4 w-4" /></Link></Button>}
+      />
+      <div className="grid gap-4 md:grid-cols-3">
+        {stats.map((stat) => {
+          const Icon = stat.icon;
+          return (
+          <Card key={stat.label}>
+            <CardHeader>
+              <CardTitle className="flex items-center justify-between">
+                {stat.label}
+                <Icon className="h-4 w-4 text-primary" />
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-3xl font-semibold">{stat.value}</p>
+              <p className="mt-1 text-sm text-muted-foreground">{stat.copy}</p>
+            </CardContent>
+          </Card>
+          );
+        })}
+      </div>
+      <div className="mt-4 grid gap-4 lg:grid-cols-[1fr_360px]">
+        <Card>
+          <CardHeader>
+            <CardTitle>{dashboard.activeTrack.title}</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="mb-4 text-sm text-muted-foreground">{dashboard.activeTrack.description}</p>
+            <Progress value={dashboard.activeTrack.progress} />
+            <div className="mt-4 grid gap-3 md:grid-cols-2">
+              {dashboard.activeTrack.modules.map((module) => (
+                <Link key={module.id} href={`/app/tracks/${dashboard.activeTrack.id}/modules/${module.id}`} className="rounded-md border border-border bg-background/60 p-4 transition hover:border-primary/60">
+                  <p className="font-medium">{module.title}</p>
+                  <p className="mt-2 text-sm text-muted-foreground">{module.summary}</p>
+                </Link>
+              ))}
+            </div>
+          </CardContent>
+        </Card>
+        <StreakTracker streak={dashboard.user.streak} />
+      </div>
+      <div className="mt-4 grid gap-4 lg:grid-cols-2">
+        <IRSRadarChart data={dashboard.radarData} />
+        <Leaderboard entries={dashboard.leaderboard} />
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/src/app/app/layout.tsx b/apps/web/src/app/app/layout.tsx
new file mode 100644
index 0000000..3ba80ba
--- /dev/null
+++ b/apps/web/src/app/app/layout.tsx
@@ -0,0 +1,5 @@
+import { AppShell } from "@/components/app/app-shell";
+
+export default function ProductLayout({ children }: { children: React.ReactNode }) {
+  return <AppShell>{children}</AppShell>;
+}
diff --git a/apps/web/src/app/app/page.tsx b/apps/web/src/app/app/page.tsx
new file mode 100644
index 0000000..2a301be
--- /dev/null
+++ b/apps/web/src/app/app/page.tsx
@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function AppIndexPage() {
+  redirect("/app/dashboard");
+}
diff --git a/apps/web/src/app/app/profile/page.tsx b/apps/web/src/app/app/profile/page.tsx
new file mode 100644
index 0000000..e64d44a
--- /dev/null
+++ b/apps/web/src/app/app/profile/page.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { PageHeader } from "@/components/app/page-header";
+import { LoadingPanel } from "@/components/app/loading-panel";
+import { IRSRadarChart } from "@/components/features/irs-radar-chart";
+import { StreakTracker } from "@/components/features/streak-tracker";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useProfileQuery } from "@/lib/mock-data/hooks";
+
+export default function ProfilePage() {
+  const { data: profile, isLoading } = useProfileQuery();
+
+  if (isLoading || !profile) return <LoadingPanel label="Loading profile" />;
+
+  return (
+    <>
+      <PageHeader eyebrow="profile" title={profile.name} description={profile.role} action={<Badge>IRS {profile.irs}</Badge>} />
+      <div className="grid gap-4 lg:grid-cols-[1fr_320px]">
+        <IRSRadarChart data={profile.radarData} />
+        <StreakTracker streak={profile.streak} />
+      </div>
+      <div className="mt-4 grid gap-4 md:grid-cols-2">
+        <Card>
+          <CardHeader>
+            <CardTitle>Session display</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2 text-sm text-muted-foreground">
+            <p>Name: {profile.name}</p>
+            <p>Role: {profile.role}</p>
+            <p>Completed modules: {profile.completedModules}</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Recent modules</CardTitle>
+          </CardHeader>
+          <CardContent className="space-y-2">
+            {profile.recent.map((item) => (
+              <div key={item} className="rounded-md border border-border bg-background/60 p-3 text-sm">{item}</div>
+            ))}
+          </CardContent>
+        </Card>
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/src/app/app/tracks/[trackId]/modules/[moduleId]/page.tsx b/apps/web/src/app/app/tracks/[trackId]/modules/[moduleId]/page.tsx
new file mode 100644
index 0000000..2e7d080
--- /dev/null
+++ b/apps/web/src/app/app/tracks/[trackId]/modules/[moduleId]/page.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { PageHeader } from "@/components/app/page-header";
+import { LoadingPanel } from "@/components/app/loading-panel";
+import { Badge } from "@/components/ui/badge";
+import { ModulePlayer } from "@/components/features/module-player";
+import { useModuleQuery } from "@/lib/mock-data/hooks";
+
+export default function ModulePage({ params }: { params: { trackId: string; moduleId: string } }) {
+  const { data, isLoading } = useModuleQuery(params.trackId, params.moduleId);
+
+  if (isLoading || !data) return <LoadingPanel label="Loading module player" />;
+
+  return (
+    <>
+      <PageHeader
+        eyebrow={data.track.title}
+        title={data.module.title}
+        description={data.module.summary}
+        action={<div className="flex flex-wrap gap-2">{data.module.concepts.map((item) => <Badge key={item} variant="secondary">{item}</Badge>)}</div>}
+      />
+      <ModulePlayer module={data.module} annotations={data.annotations} quiz={data.quiz} diffLines={data.diffLines} />
+    </>
+  );
+}
diff --git a/apps/web/src/app/app/tracks/page.tsx b/apps/web/src/app/app/tracks/page.tsx
new file mode 100644
index 0000000..bf879f3
--- /dev/null
+++ b/apps/web/src/app/app/tracks/page.tsx
@@ -0,0 +1,52 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowRight } from "lucide-react";
+import { PageHeader } from "@/components/app/page-header";
+import { LoadingPanel } from "@/components/app/loading-panel";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { useTracksQuery } from "@/lib/mock-data/hooks";
+
+export default function TracksPage() {
+  const { data: tracks, isLoading } = useTracksQuery();
+
+  if (isLoading || !tracks) return <LoadingPanel />;
+
+  return (
+    <>
+      <PageHeader eyebrow="tracks" title="Choose a training path" description="Every track is mocked now, but the structures match the planned module flow." />
+      <div className="grid gap-4 lg:grid-cols-3">
+        {tracks.map((track) => (
+          <Card key={track.id}>
+            <CardHeader>
+              <div className="flex items-start justify-between gap-3">
+                <CardTitle>{track.title}</CardTitle>
+                <Badge variant="outline">{track.difficulty}</Badge>
+              </div>
+            </CardHeader>
+            <CardContent>
+              <p className="min-h-16 text-sm leading-6 text-muted-foreground">{track.description}</p>
+              <div className="my-4">
+                <div className="mb-2 flex justify-between text-xs text-muted-foreground">
+                  <span>Progress</span>
+                  <span>{track.progress}%</span>
+                </div>
+                <Progress value={track.progress} />
+              </div>
+              <div className="space-y-2">
+                {track.modules.map((module) => (
+                  <Link key={module.id} href={`/app/tracks/${track.id}/modules/${module.id}`} className="flex items-center justify-between rounded-md border border-border bg-background/60 p-3 text-sm transition hover:border-primary/60">
+                    <span>{module.title}</span>
+                    <ArrowRight className="h-4 w-4 text-muted-foreground" />
+                  </Link>
+                ))}
+              </div>
+            </CardContent>
+          </Card>
+        ))}
+      </div>
+    </>
+  );
+}
diff --git a/apps/web/src/app/app/war-room/page.tsx b/apps/web/src/app/app/war-room/page.tsx
new file mode 100644
index 0000000..c0922a4
--- /dev/null
+++ b/apps/web/src/app/app/war-room/page.tsx
@@ -0,0 +1,25 @@
+"use client";
+
+import { PageHeader } from "@/components/app/page-header";
+import { LoadingPanel } from "@/components/app/loading-panel";
+import { Badge } from "@/components/ui/badge";
+import { WarRoomLive } from "@/components/features/war-room-live";
+import { useWarRoomQuery } from "@/lib/mock-data/hooks";
+
+export default function WarRoomPage() {
+  const { data, isLoading } = useWarRoomQuery();
+
+  if (isLoading || !data) return <LoadingPanel label="Joining War Room" />;
+
+  return (
+    <>
+      <PageHeader
+        eyebrow="war room"
+        title={data.room.name}
+        description="Socket.io client wiring is present with a mock live feed so the room works without backend events."
+        action={<Badge variant="success">{data.room.members} members live</Badge>}
+      />
+      <WarRoomLive messages={data.messages} leaderboard={data.leaderboard} />
+    </>
+  );
+}
diff --git a/apps/web/src/app/auth/signin/page.tsx b/apps/web/src/app/auth/signin/page.tsx
new file mode 100644
index 0000000..b0cbf63
--- /dev/null
+++ b/apps/web/src/app/auth/signin/page.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import Link from "next/link";
+import { Github, Mail } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { useAuthStore } from "@/stores/auth-store";
+
+export default function SignInPage() {
+  const { signIn } = useAuthStore();
+
+  return (
+    <main className="surface-grid flex min-h-screen items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-md bg-card/95 backdrop-blur">
+        <CardHeader>
+          <Link href="/" className="mb-6 flex items-center gap-3">
+            <span className="flex h-9 w-9 items-center justify-center rounded-md bg-primary/15 font-mono text-sm font-semibold text-primary">UV</span>
+            <span className="font-semibold">UnVibe</span>
+          </Link>
+          <CardTitle className="text-2xl">Sign in</CardTitle>
+          <p className="text-sm text-muted-foreground">Use OAuth later, or enter the mock workspace now.</p>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <Button className="w-full" variant="outline" onClick={signIn}>
+            <Github className="h-4 w-4" />
+            Continue with GitHub
+          </Button>
+          <Button className="w-full" variant="outline" onClick={signIn}>
+            <Mail className="h-4 w-4" />
+            Continue with Google
+          </Button>
+          <div className="grid gap-2 pt-3">
+            <Input placeholder="email@company.com" type="email" />
+            <Button asChild onClick={signIn}>
+              <Link href="/app/dashboard">Enter mock workspace</Link>
+            </Button>
+          </div>
+          <p className="pt-2 text-center text-sm text-muted-foreground">
+            New here? <Link className="text-primary" href="/auth/signup">Create an account</Link>
+          </p>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}
diff --git a/apps/web/src/app/auth/signup/page.tsx b/apps/web/src/app/auth/signup/page.tsx
new file mode 100644
index 0000000..eff1347
--- /dev/null
+++ b/apps/web/src/app/auth/signup/page.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import Link from "next/link";
+import { Github, Mail } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { useAuthStore } from "@/stores/auth-store";
+
+export default function SignUpPage() {
+  const { signIn } = useAuthStore();
+
+  return (
+    <main className="surface-grid flex min-h-screen items-center justify-center bg-background p-4">
+      <Card className="w-full max-w-md bg-card/95 backdrop-blur">
+        <CardHeader>
+          <Link href="/" className="mb-6 flex items-center gap-3">
+            <span className="flex h-9 w-9 items-center justify-center rounded-md bg-primary/15 font-mono text-sm font-semibold text-primary">UV</span>
+            <span className="font-semibold">UnVibe</span>
+          </Link>
+          <CardTitle className="text-2xl">Create account</CardTitle>
+          <p className="text-sm text-muted-foreground">Mock onboarding keeps frontend work unblocked.</p>
+        </CardHeader>
+        <CardContent className="space-y-3">
+          <Button className="w-full" variant="outline" onClick={signIn}>
+            <Github className="h-4 w-4" />
+            Sign up with GitHub
+          </Button>
+          <Button className="w-full" variant="outline" onClick={signIn}>
+            <Mail className="h-4 w-4" />
+            Sign up with Google
+          </Button>
+          <div className="grid gap-2 pt-3">
+            <Input placeholder="Your name" />
+            <Input placeholder="email@company.com" type="email" />
+            <Button asChild onClick={signIn}>
+              <Link href="/app/dashboard">Create mock account</Link>
+            </Button>
+          </div>
+          <p className="pt-2 text-center text-sm text-muted-foreground">
+            Already training? <Link className="text-primary" href="/auth/signin">Sign in</Link>
+          </p>
+        </CardContent>
+      </Card>
+    </main>
+  );
+}
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 6fe62d1..18fb61d 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,101 +1,117 @@
-import Image from "next/image";
+import Link from "next/link";
+import { ArrowRight, Code2, GitBranch, Radar, ShieldQuestion, Swords } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 
-export default function Home() {
+const signals = [
+  { label: "Decode", value: "annotate code intent", icon: Code2 },
+  { label: "Rebuild", value: "write from memory", icon: GitBranch },
+  { label: "Defend", value: "answer under pressure", icon: ShieldQuestion },
+];
+
+const featureCards = [
+  { title: "Blindspots", copy: "See weak concepts before they become habits.", icon: Radar },
+  { title: "War Rooms", copy: "Practice with peers in live competitive rooms.", icon: Swords },
+  { title: "Code memory", copy: "Submit rebuilds and compare against source.", icon: Code2 },
+];
+
+export default function LandingPage() {
   return (
-    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
-      <main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="https://nextjs.org/icons/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
-          <li className="mb-2">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
-              src/app/page.tsx
-            </code>
-            .
-          </li>
-          <li>Save and see your changes instantly.</li>
-        </ol>
+    <main className="min-h-screen overflow-hidden bg-background text-foreground">
+      <section className="surface-grid relative min-h-screen border-b border-border">
+        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,hsl(var(--primary)/0.20),transparent_32%),linear-gradient(180deg,hsl(var(--background)/0.15),hsl(var(--background))_72%)]" />
+        <nav className="relative mx-auto flex max-w-7xl items-center justify-between px-6 py-5">
+          <Link href="/" className="flex items-center gap-3">
+            <span className="flex h-9 w-9 items-center justify-center rounded-md border border-primary/40 bg-primary/15 font-mono text-sm font-semibold text-primary">
+              UV
+            </span>
+            <span className="font-semibold tracking-tight">UnVibe</span>
+          </Link>
+          <div className="flex items-center gap-3">
+            <Link href="/auth/signin" className="hidden text-sm text-muted-foreground transition hover:text-foreground sm:inline">
+              Sign in
+            </Link>
+            <Button asChild>
+              <Link href="/auth/signup">
+                Start training
+                <ArrowRight className="h-4 w-4" />
+              </Link>
+            </Button>
+          </div>
+        </nav>
 
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="https://nextjs.org/icons/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
+        <div className="relative mx-auto grid max-w-7xl gap-10 px-6 pb-14 pt-12 lg:grid-cols-[1fr_520px] lg:items-center lg:pt-20">
+          <div>
+            <Badge variant="outline" className="mb-6 border-primary/40 bg-primary/10 text-primary">
+              AI learning loop for builders
+            </Badge>
+            <h1 className="max-w-4xl text-balance text-5xl font-semibold tracking-tight sm:text-6xl lg:text-7xl">
+              Learn code until you can explain every decision.
+            </h1>
+            <p className="mt-6 max-w-2xl text-lg leading-8 text-muted-foreground">
+              UnVibe turns passive tutorials into an active sequence: read production code, rebuild it, then defend your reasoning in live sessions.
+            </p>
+            <div className="mt-8 flex flex-col gap-3 sm:flex-row">
+              <Button asChild size="lg">
+                <Link href="/app/dashboard">
+                  Open mock dashboard
+                  <ArrowRight className="h-4 w-4" />
+                </Link>
+              </Button>
+              <Button asChild size="lg" variant="secondary">
+                <Link href="/app/tracks">Browse tracks</Link>
+              </Button>
+            </div>
+          </div>
+
+          <div className="rounded-lg border border-border bg-card/90 p-4 shadow-2xl shadow-black/20 backdrop-blur">
+            <div className="mb-4 flex items-center justify-between border-b border-border pb-3">
+              <div>
+                <p className="font-mono text-xs uppercase tracking-[0.22em] text-muted-foreground">live module</p>
+                <h2 className="font-semibold">Auth guard rebuild</h2>
+              </div>
+              <Badge className="bg-accent text-accent-foreground">IRS 82</Badge>
+            </div>
+            <div className="grid gap-3">
+              {signals.map((signal, index) => {
+                const Icon = signal.icon;
+                return (
+                  <div key={signal.label} className="grid grid-cols-[42px_1fr] gap-3 rounded-md border border-border bg-background/70 p-3">
+                    <div className="flex h-10 w-10 items-center justify-center rounded-md bg-primary/10 text-primary">
+                      <Icon className="h-5 w-5" />
+                    </div>
+                    <div>
+                      <div className="flex items-center justify-between gap-3">
+                        <p className="font-medium">{signal.label}</p>
+                        <span className="font-mono text-xs text-muted-foreground">0{index + 1}</span>
+                      </div>
+                      <p className="text-sm text-muted-foreground">{signal.value}</p>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+            <div className="mt-4 rounded-md border border-border bg-black p-4 font-mono text-xs leading-6 text-cyan-100">
+              <p><span className="text-amber-300">const</span> session = defend(rebuild);</p>
+              <p><span className="text-emerald-300">score</span>.update(session.reasoning);</p>
+              <p className="text-muted-foreground">{"// next question streams into War Room"}</p>
+            </div>
+          </div>
         </div>
-      </main>
-      <footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="https://nextjs.org/icons/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
+      </section>
+
+      <section className="mx-auto grid max-w-7xl gap-4 px-6 py-12 md:grid-cols-3">
+        {featureCards.map((feature) => {
+          const Icon = feature.icon;
+          return (
+          <div key={feature.title} className="rounded-lg border border-border bg-card p-5">
+            <Icon className="mb-5 h-5 w-5 text-primary" />
+            <h3 className="font-semibold">{feature.title}</h3>
+            <p className="mt-2 text-sm leading-6 text-muted-foreground">{feature.copy}</p>
+          </div>
+          );
+        })}
+      </section>
+    </main>
   );
 }

From 0241a23de36dc020bfce36649bbc6259e8b9525d Mon Sep 17 00:00:00 2001
From: SourabhX16 <146323884+SourabhX16@users.noreply.github.com>
Date: Mon, 29 Jun 2026 13:09:00 +0530
Subject: [PATCH 5/5] feat: implement global dark/light mode system with
 gradient backgrounds

- Add ThemeProvider wrapping root layout with dark/light radial gradients
- Add localStorage persistence for theme preference via Zustand store
- Add ThemeController toggle to landing page header
- Consolidate dark class toggling into ThemeProvider
- Remove opaque bg-background from body and page wrappers to reveal gradient
- Improve landing page spacing and move feature cards above the fold
- Ensure all pages (landing, dashboard, auth) respect global theme
---
 apps/web/src/app/auth/signin/page.tsx         |  2 +-
 apps/web/src/app/auth/signup/page.tsx         |  2 +-
 apps/web/src/app/globals.css                  |  2 +-
 apps/web/src/app/layout.tsx                   |  5 ++-
 apps/web/src/app/page.tsx                     | 33 ++++++++++---------
 apps/web/src/components/app/app-shell.tsx     |  2 +-
 .../src/components/app/theme-controller.tsx   |  5 ---
 .../web/src/components/app/theme-provider.tsx | 33 +++++++++++++++++++
 apps/web/src/stores/ui-store.ts               | 19 +++++++++--
 9 files changed, 76 insertions(+), 27 deletions(-)
 create mode 100644 apps/web/src/components/app/theme-provider.tsx

diff --git a/apps/web/src/app/auth/signin/page.tsx b/apps/web/src/app/auth/signin/page.tsx
index b0cbf63..7004db3 100644
--- a/apps/web/src/app/auth/signin/page.tsx
+++ b/apps/web/src/app/auth/signin/page.tsx
@@ -11,7 +11,7 @@ export default function SignInPage() {
   const { signIn } = useAuthStore();
 
   return (
-    <main className="surface-grid flex min-h-screen items-center justify-center bg-background p-4">
+    <main className="surface-grid flex min-h-screen items-center justify-center p-4">
       <Card className="w-full max-w-md bg-card/95 backdrop-blur">
         <CardHeader>
           <Link href="/" className="mb-6 flex items-center gap-3">
diff --git a/apps/web/src/app/auth/signup/page.tsx b/apps/web/src/app/auth/signup/page.tsx
index eff1347..7235c17 100644
--- a/apps/web/src/app/auth/signup/page.tsx
+++ b/apps/web/src/app/auth/signup/page.tsx
@@ -11,7 +11,7 @@ export default function SignUpPage() {
   const { signIn } = useAuthStore();
 
   return (
-    <main className="surface-grid flex min-h-screen items-center justify-center bg-background p-4">
+    <main className="surface-grid flex min-h-screen items-center justify-center p-4">
       <Card className="w-full max-w-md bg-card/95 backdrop-blur">
         <CardHeader>
           <Link href="/" className="mb-6 flex items-center gap-3">
diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
index 46aad00..d1209a4 100644
--- a/apps/web/src/app/globals.css
+++ b/apps/web/src/app/globals.css
@@ -71,7 +71,7 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply text-foreground;
   }
 
   ::selection {
diff --git a/apps/web/src/app/layout.tsx b/apps/web/src/app/layout.tsx
index 35a82c3..eb595a6 100644
--- a/apps/web/src/app/layout.tsx
+++ b/apps/web/src/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
 import Providers from "./providers";
+import { ThemeProvider } from "@/components/app/theme-provider";
 
 const geistSans = localFont({
   src: "./fonts/GeistVF.woff",
@@ -30,7 +31,9 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <Providers>
-          {children}
+          <ThemeProvider>
+            {children}
+          </ThemeProvider>
         </Providers>
       </body>
     </html>
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 18fb61d..ad0991d 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,7 +1,10 @@
+"use client";
+
 import Link from "next/link";
 import { ArrowRight, Code2, GitBranch, Radar, ShieldQuestion, Swords } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
+import { ThemeController } from "@/components/app/theme-controller";
 
 const signals = [
   { label: "Decode", value: "annotate code intent", icon: Code2 },
@@ -17,9 +20,8 @@ const featureCards = [
 
 export default function LandingPage() {
   return (
-    <main className="min-h-screen overflow-hidden bg-background text-foreground">
+    <main className="min-h-screen overflow-hidden text-foreground">
       <section className="surface-grid relative min-h-screen border-b border-border">
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_70%_20%,hsl(var(--primary)/0.20),transparent_32%),linear-gradient(180deg,hsl(var(--background)/0.15),hsl(var(--background))_72%)]" />
         <nav className="relative mx-auto flex max-w-7xl items-center justify-between px-6 py-5">
           <Link href="/" className="flex items-center gap-3">
             <span className="flex h-9 w-9 items-center justify-center rounded-md border border-primary/40 bg-primary/15 font-mono text-sm font-semibold text-primary">
@@ -28,6 +30,7 @@ export default function LandingPage() {
             <span className="font-semibold tracking-tight">UnVibe</span>
           </Link>
           <div className="flex items-center gap-3">
+            <ThemeController />
             <Link href="/auth/signin" className="hidden text-sm text-muted-foreground transition hover:text-foreground sm:inline">
               Sign in
             </Link>
@@ -40,7 +43,7 @@ export default function LandingPage() {
           </div>
         </nav>
 
-        <div className="relative mx-auto grid max-w-7xl gap-10 px-6 pb-14 pt-12 lg:grid-cols-[1fr_520px] lg:items-center lg:pt-20">
+        <div className="relative mx-auto grid max-w-7xl gap-10 px-6 pb-4 pt-8 lg:grid-cols-[1fr_520px] lg:items-center lg:pt-14">
           <div>
             <Badge variant="outline" className="mb-6 border-primary/40 bg-primary/10 text-primary">
               AI learning loop for builders
@@ -98,19 +101,19 @@ export default function LandingPage() {
             </div>
           </div>
         </div>
-      </section>
 
-      <section className="mx-auto grid max-w-7xl gap-4 px-6 py-12 md:grid-cols-3">
-        {featureCards.map((feature) => {
-          const Icon = feature.icon;
-          return (
-          <div key={feature.title} className="rounded-lg border border-border bg-card p-5">
-            <Icon className="mb-5 h-5 w-5 text-primary" />
-            <h3 className="font-semibold">{feature.title}</h3>
-            <p className="mt-2 text-sm leading-6 text-muted-foreground">{feature.copy}</p>
-          </div>
-          );
-        })}
+        <div className="mx-auto mt-6 grid w-full max-w-7xl gap-4 px-6 pb-6 md:grid-cols-3">
+          {featureCards.map((feature) => {
+            const Icon = feature.icon;
+            return (
+            <div key={feature.title} className="rounded-lg border border-border bg-card p-5">
+              <Icon className="mb-5 h-5 w-5 text-primary" />
+              <h3 className="font-semibold">{feature.title}</h3>
+              <p className="mt-2 text-sm leading-6 text-muted-foreground">{feature.copy}</p>
+            </div>
+            );
+          })}
+        </div>
       </section>
     </main>
   );
diff --git a/apps/web/src/components/app/app-shell.tsx b/apps/web/src/components/app/app-shell.tsx
index 0019165..5bdd5d0 100644
--- a/apps/web/src/components/app/app-shell.tsx
+++ b/apps/web/src/components/app/app-shell.tsx
@@ -21,7 +21,7 @@ export function AppShell({ children }: { children: React.ReactNode }) {
   const { user, signOut } = useAuthStore();
 
   return (
-    <div className="min-h-screen bg-background text-foreground">
+    <div className="min-h-screen text-foreground">
       <aside className="fixed inset-y-0 left-0 z-20 hidden w-64 border-r border-border bg-card/80 backdrop-blur lg:block">
         <div className="flex h-16 items-center gap-3 border-b border-border px-5">
           <span className="flex h-9 w-9 items-center justify-center rounded-md bg-primary/15 font-mono text-sm font-semibold text-primary">
diff --git a/apps/web/src/components/app/theme-controller.tsx b/apps/web/src/components/app/theme-controller.tsx
index edc6b65..f03ea16 100644
--- a/apps/web/src/components/app/theme-controller.tsx
+++ b/apps/web/src/components/app/theme-controller.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import { useEffect } from "react";
 import { Moon, Sun } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useUIStore } from "@/stores/ui-store";
@@ -8,10 +7,6 @@ import { useUIStore } from "@/stores/ui-store";
 export function ThemeController() {
   const { darkMode, toggleDarkMode } = useUIStore();
 
-  useEffect(() => {
-    document.documentElement.classList.toggle("dark", darkMode);
-  }, [darkMode]);
-
   return (
     <Button variant="ghost" size="icon" onClick={toggleDarkMode} aria-label="Toggle dark mode">
       {darkMode ? <Moon className="h-4 w-4" /> : <Sun className="h-4 w-4" />}
diff --git a/apps/web/src/components/app/theme-provider.tsx b/apps/web/src/components/app/theme-provider.tsx
new file mode 100644
index 0000000..5c622c4
--- /dev/null
+++ b/apps/web/src/components/app/theme-provider.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { useEffect } from "react";
+import { useUIStore } from "@/stores/ui-store";
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const darkMode = useUIStore((state) => state.darkMode);
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", darkMode);
+  }, [darkMode]);
+
+  return (
+    <div className="min-h-screen w-full relative">
+      <div
+        className="absolute inset-0 z-0"
+        style={
+          darkMode
+            ? {
+                background:
+                  "radial-gradient(125% 125% at 50% 100%, #000000 40%, #010133 100%)",
+              }
+            : {
+                backgroundImage:
+                  "radial-gradient(125% 125% at 50% 90%, #ffffff 40%, #ec4899 100%)",
+                backgroundSize: "100% 100%",
+              }
+        }
+      />
+      <div className="relative z-10">{children}</div>
+    </div>
+  );
+}
diff --git a/apps/web/src/stores/ui-store.ts b/apps/web/src/stores/ui-store.ts
index fa7833d..e5592bb 100644
--- a/apps/web/src/stores/ui-store.ts
+++ b/apps/web/src/stores/ui-store.ts
@@ -9,9 +9,24 @@ interface UIStore {
   toggleSidebar: () => void;
 }
 
+function getInitialDarkMode(): boolean {
+  if (typeof window !== "undefined") {
+    const stored = localStorage.getItem("unvibe-theme");
+    if (stored !== null) return stored === "dark";
+  }
+  return true;
+}
+
 export const useUIStore = create<UIStore>((set) => ({
-  darkMode: true,
+  darkMode: getInitialDarkMode(),
   sidebarOpen: false,
-  toggleDarkMode: () => set((state) => ({ darkMode: !state.darkMode })),
+  toggleDarkMode: () =>
+    set((state) => {
+      const next = !state.darkMode;
+      if (typeof window !== "undefined") {
+        localStorage.setItem("unvibe-theme", next ? "dark" : "light");
+      }
+      return { darkMode: next };
+    }),
   toggleSidebar: () => set((state) => ({ sidebarOpen: !state.sidebarOpen })),
 }));