Adopt Stackless UI: warm palette, sidebar, project tab bar with Design tab

- Add Google Fonts (Newsreader/Outfit/IBM Plex Mono) + warm beige CSS palette
- New VIBNSidebar: Stackless-style 220px sidebar with project list + user footer
- New ProjectShell: project header with name/status/progress% + tab bar
- Tabs: Atlas → PRD → Design → Build → Deploy → Settings
- New /prd page: section-by-section progress view
- New /build page: locked until PRD complete
- Projects list page: Stackless-style row layout
- Simplify overview page to just render AtlasChat

Made-with: Cursor

app/[workspace]/project/[projectId]/build/page.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+import Link from "next/link";
+
+interface Project {
+  id: string;
+  status?: string;
+  prd?: string;
+  giteaRepoUrl?: string;
+}
+
+const BUILD_FEATURES = [
+  "Authentication system",
+  "Database schema",
+  "API endpoints",
+  "Core UI",
+  "Business logic",
+  "Tests",
+];
+
+export default function BuildPage() {
+  const params = useParams();
+  const projectId = params.projectId as string;
+  const workspace = params.workspace as string;
+  const [project, setProject] = useState<Project | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(`/api/projects/${projectId}`)
+      .then((r) => r.json())
+      .then((d) => {
+        setProject(d.project);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, [projectId]);
+
+  if (loading) {
+    return (
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit, sans-serif", color: "#a09a90" }}>
+        Loading…
+      </div>
+    );
+  }
+
+  const hasRepo = Boolean(project?.giteaRepoUrl);
+  const hasPRD = Boolean(project?.prd);
+
+  if (!hasPRD) {
+    return (
+      <div
+        className="vibn-enter"
+        style={{
+          flex: 1, display: "flex", alignItems: "center", justifyContent: "center",
+          padding: 40, fontFamily: "Outfit, sans-serif",
+        }}
+      >
+        <div style={{ textAlign: "center", maxWidth: 360 }}>
+          <div style={{
+            width: 56, height: 56, borderRadius: 14,
+            background: "#fff", border: "1px solid #e8e4dc",
+            display: "flex", alignItems: "center", justifyContent: "center",
+            fontSize: "1.4rem", margin: "0 auto 18px",
+            boxShadow: "0 2px 8px #1a1a1a08",
+          }}>
+            🔒
+          </div>
+          <h3 style={{
+            fontFamily: "Newsreader, serif", fontSize: "1.3rem",
+            fontWeight: 400, color: "#1a1a1a", marginBottom: 8,
+          }}>
+            Complete your PRD first
+          </h3>
+          <p style={{ fontSize: "0.82rem", color: "#a09a90", lineHeight: 1.6, marginBottom: 20 }}>
+            Finish your discovery with Atlas, then the builder unlocks automatically.
+          </p>
+          <Link
+            href={`/${workspace}/project/${projectId}/overview`}
+            style={{
+              display: "inline-block",
+              padding: "9px 20px", borderRadius: 7,
+              background: "#1a1a1a", color: "#fff",
+              fontSize: "0.78rem", fontWeight: 600,
+              fontFamily: "Outfit, sans-serif",
+              textDecoration: "none",
+            }}
+          >
+            Continue with Atlas →
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  if (!hasRepo) {
+    return (
+      <div
+        className="vibn-enter"
+        style={{
+          flex: 1, display: "flex", alignItems: "center", justifyContent: "center",
+          padding: 40, fontFamily: "Outfit, sans-serif",
+        }}
+      >
+        <div style={{ textAlign: "center", maxWidth: 360 }}>
+          <div style={{
+            width: 56, height: 56, borderRadius: 14,
+            background: "#fff", border: "1px solid #e8e4dc",
+            display: "flex", alignItems: "center", justifyContent: "center",
+            fontSize: "1.4rem", margin: "0 auto 18px",
+            boxShadow: "0 2px 8px #1a1a1a08",
+          }}>
+            ⚡
+          </div>
+          <h3 style={{
+            fontFamily: "Newsreader, serif", fontSize: "1.3rem",
+            fontWeight: 400, color: "#1a1a1a", marginBottom: 8,
+          }}>
+            PRD ready — build coming soon
+          </h3>
+          <p style={{ fontSize: "0.82rem", color: "#a09a90", lineHeight: 1.6 }}>
+            The Architect agent will generate your project structure and kick off the build pipeline.
+            This feature is in active development.
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="vibn-enter"
+      style={{
+        flex: 1, display: "flex", alignItems: "center", justifyContent: "center",
+        padding: 40, fontFamily: "Outfit, sans-serif",
+      }}
+    >
+      <div style={{ width: "100%", maxWidth: 500 }}>
+        <h3 style={{
+          fontFamily: "Newsreader, serif", fontSize: "1.2rem",
+          fontWeight: 400, color: "#1a1a1a", marginBottom: 18,
+        }}>
+          Build progress
+        </h3>
+        {BUILD_FEATURES.map((f, i) => (
+          <div
+            key={i}
+            className="vibn-enter"
+            style={{
+              display: "flex", alignItems: "center", gap: 12,
+              padding: "12px 16px", marginBottom: 4, borderRadius: 8,
+              background: "#fff", border: "1px solid #e8e4dc",
+              animationDelay: `${i * 0.05}s`,
+            }}
+          >
+            <span style={{
+              width: 7, height: 7, borderRadius: "50%",
+              background: "#d4a04a", display: "inline-block", flexShrink: 0,
+            }} />
+            <span style={{ flex: 1, fontSize: "0.84rem", color: "#1a1a1a" }}>{f}</span>
+            <div style={{ width: 80, height: 3, borderRadius: 2, background: "#eae6de" }}>
+              <div style={{ height: "100%", width: "0%", borderRadius: 2, background: "#3d5afe" }} />
+            </div>
+            <span style={{
+              fontFamily: "IBM Plex Mono, monospace",
+              fontSize: "0.7rem", color: "#a09a90", minWidth: 28, textAlign: "right",
+            }}>
+              0%
+            </span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

app/[workspace]/project/[projectId]/layout.tsx

@@ -1,7 +1,13 @@
-import { AppShell } from "@/components/layout/app-shell";
+import { ProjectShell } from "@/components/layout/project-shell";
 import { query } from "@/lib/db-postgres";
 
-async function getProjectName(projectId: string): Promise<string> {
+interface ProjectData {
+  name: string;
+  status?: string;
+  progress?: number;
+}
+
+async function getProjectData(projectId: string): Promise<ProjectData> {
   try {
     const rows = await query<{ data: any }>(
       `SELECT data FROM fs_projects WHERE id = $1 LIMIT 1`,
@@ -9,12 +15,16 @@ async function getProjectName(projectId: string): Promise<string> {
     );
     if (rows.length > 0) {
       const data = rows[0].data;
-      return data?.productName || data?.name || "Project";
+      return {
+        name: data?.productName || data?.name || "Project",
+        status: data?.status,
+        progress: data?.progress ?? 0,
+      };
     }
   } catch (error) {
-    console.error("Error fetching project name:", error);
+    console.error("Error fetching project:", error);
   }
-  return "Project";
+  return { name: "Project" };
 }
 
 export default async function ProjectLayout({
@@ -25,11 +35,17 @@ export default async function ProjectLayout({
   params: Promise<{ workspace: string; projectId: string }>;
 }) {
   const { workspace, projectId } = await params;
-  const projectName = await getProjectName(projectId);
+  const project = await getProjectData(projectId);
 
   return (
-    <AppShell workspace={workspace} projectId={projectId} projectName={projectName}>
+    <ProjectShell
+      workspace={workspace}
+      projectId={projectId}
+      projectName={project.name}
+      projectStatus={project.status}
+      projectProgress={project.progress}
+    >
       {children}
-    </AppShell>
+    </ProjectShell>
   );
 }

app/[workspace]/project/[projectId]/overview/page.tsx

@@ -3,149 +3,54 @@
 import { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
 import { useSession } from "next-auth/react";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import { OrchestratorChat } from "@/components/OrchestratorChat";
 import { AtlasChat } from "@/components/AtlasChat";
-import {
-  Terminal,
-  Loader2,
-  RefreshCw,
-} from "lucide-react";
-import { toast } from "sonner";
+import { OrchestratorChat } from "@/components/OrchestratorChat";
+import { Loader2 } from "lucide-react";
 
 interface Project {
   id: string;
-  name: string;
   productName: string;
-  productVision?: string;
-  status?: string;
-  currentPhase?: string;
-  theiaWorkspaceUrl?: string;
-  stage?: 'discovery' | 'architecture' | 'building' | 'active';
-  prd?: string;
+  stage?: "discovery" | "architecture" | "building" | "active";
 }
 
-
 export default function ProjectOverviewPage() {
   const params = useParams();
   const projectId = params.projectId as string;
   const { status: authStatus } = useSession();
-
   const [project, setProject] = useState<Project | null>(null);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [refreshing, setRefreshing] = useState(false);
-  const [provisioning, setProvisioning] = useState(false);
-
-  const fetchProject = async () => {
-    try {
-      const res = await fetch(`/api/projects/${projectId}`);
-      if (!res.ok) {
-        const err = await res.json();
-        throw new Error(err.error || "Failed to load project");
-      }
-      const data = await res.json();
-      setProject(data.project);
-      setError(null);
-    } catch (err) {
-      setError(err instanceof Error ? err.message : "Unknown error");
-    } finally {
-      setLoading(false);
-      setRefreshing(false);
-    }
-  };
 
   useEffect(() => {
-    if (authStatus === "authenticated") fetchProject();
-    else if (authStatus === "unauthenticated") setLoading(false);
-  }, [authStatus, projectId]);
-
-  const handleRefresh = () => {
-    setRefreshing(true);
-    fetchProject();
-  };
-
-  const handleProvisionWorkspace = async () => {
-    setProvisioning(true);
-    try {
-      const res = await fetch(`/api/projects/${projectId}/workspace`, { method: 'POST' });
-      const data = await res.json();
-      if (res.ok && data.workspaceUrl) {
-        toast.success('Workspace provisioned — starting up…');
-        await fetchProject();
-      } else {
-        toast.error(data.error || 'Failed to provision workspace');
-      }
-    } catch {
-      toast.error('An error occurred');
-    } finally {
-      setProvisioning(false);
+    if (authStatus !== "authenticated") {
+      if (authStatus === "unauthenticated") setLoading(false);
+      return;
     }
-  };
+    fetch(`/api/projects/${projectId}`)
+      .then((r) => r.json())
+      .then((d) => setProject(d.project))
+      .catch(() => {})
+      .finally(() => setLoading(false));
+  }, [authStatus, projectId]);
 
   if (loading) {
     return (
-      <div className="flex items-center justify-center py-32">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit, sans-serif" }}>
+        <Loader2 style={{ width: 24, height: 24, color: "#a09a90" }} className="animate-spin" />
       </div>
     );
   }
 
-  if (error || !project) {
+  if (!project) {
     return (
-      <div className="container mx-auto py-8 px-6 max-w-5xl">
-        <div className="rounded-xl border border-red-500/30 bg-red-500/5 py-8 text-center">
-          <p className="text-sm text-red-600">{error ?? "Project not found"}</p>
-        </div>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit, sans-serif", color: "#a09a90", fontSize: "0.88rem" }}>
+        Project not found.
       </div>
     );
   }
 
   return (
-    <div className="container mx-auto py-8 px-6 max-w-5xl space-y-6">
-
-      {/* ── Header ── */}
-      <div className="flex items-start justify-between">
-        <div>
-          <h1 className="text-2xl font-bold">{project.productName}</h1>
-          {project.productVision && (
-            <p className="text-muted-foreground text-sm mt-1 max-w-xl">{project.productVision}</p>
-          )}
-          <div className="flex items-center gap-2 mt-2">
-            <Badge variant={project.status === "active" ? "default" : "secondary"}>
-              {project.status ?? "active"}
-            </Badge>
-            {project.currentPhase && (
-              <Badge variant="outline">{project.currentPhase}</Badge>
-            )}
-          </div>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="sm" onClick={handleRefresh} disabled={refreshing}>
-            <RefreshCw className={`h-4 w-4 mr-1.5 ${refreshing ? "animate-spin" : ""}`} />
-            Refresh
-          </Button>
-          {project.theiaWorkspaceUrl ? (
-            <Button size="sm" asChild>
-              <a href={project.theiaWorkspaceUrl} target="_blank" rel="noopener noreferrer">
-                <Terminal className="h-4 w-4 mr-1.5" />
-                Open IDE
-              </a>
-            </Button>
-          ) : (
-            <Button size="sm" onClick={handleProvisionWorkspace} disabled={provisioning}>
-              {provisioning
-                ? <><Loader2 className="h-4 w-4 mr-1.5 animate-spin" />Provisioning…</>
-                : <><Terminal className="h-4 w-4 mr-1.5" />Provision IDE</>
-              }
-            </Button>
-          )}
-        </div>
-      </div>
-
-      {/* ── Agent Panel — Atlas for discovery, Orchestrator once PRD is done ── */}
-      {(!project.stage || project.stage === 'discovery') ? (
+    <div style={{ height: "100%", display: "flex", flexDirection: "column" }}>
+      {(!project.stage || project.stage === "discovery") ? (
         <AtlasChat
           projectId={projectId}
           projectName={project.productName}
@@ -156,7 +61,6 @@ export default function ProjectOverviewPage() {
           projectName={project.productName}
         />
       )}
-
     </div>
   );
 }

app/[workspace]/project/[projectId]/prd/page.tsx

@@ -0,0 +1,191 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useParams } from "next/navigation";
+
+const PRD_SECTIONS = [
+  { id: "executive_summary",    label: "Executive Summary" },
+  { id: "problem_statement",    label: "Problem Statement" },
+  { id: "users_personas",       label: "Users & Personas" },
+  { id: "user_flows",           label: "User Flows" },
+  { id: "feature_requirements", label: "Feature Requirements" },
+  { id: "screen_specs",         label: "Screen Specs" },
+  { id: "business_model",       label: "Business Model" },
+  { id: "non_functional",       label: "Non-Functional Reqs" },
+  { id: "risks",                label: "Risks" },
+];
+
+interface PRDSection {
+  id: string;
+  label: string;
+  status: "done" | "active" | "pending";
+  pct: number;
+  content?: string;
+}
+
+interface Project {
+  id: string;
+  prd?: string;
+  prdSections?: Record<string, { status: string; pct: number; content?: string }>;
+}
+
+export default function PRDPage() {
+  const params = useParams();
+  const projectId = params.projectId as string;
+  const [project, setProject] = useState<Project | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    fetch(`/api/projects/${projectId}`)
+      .then((r) => r.json())
+      .then((d) => {
+        setProject(d.project);
+        setLoading(false);
+      })
+      .catch(() => setLoading(false));
+  }, [projectId]);
+
+  // Build sections with real status if available
+  const sections: PRDSection[] = PRD_SECTIONS.map((s) => {
+    const saved = project?.prdSections?.[s.id];
+    return {
+      ...s,
+      status: (saved?.status as PRDSection["status"]) ?? "pending",
+      pct: saved?.pct ?? 0,
+      content: saved?.content,
+    };
+  });
+
+  // If we have a raw PRD markdown, show that instead of the section list
+  const hasPRD = Boolean(project?.prd);
+
+  const totalPct = Math.round(sections.reduce((a, s) => a + s.pct, 0) / sections.length);
+  const doneCount = sections.filter((s) => s.status === "done").length;
+
+  if (loading) {
+    return (
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "Outfit, sans-serif", color: "#a09a90" }}>
+        Loading…
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className="vibn-enter"
+      style={{ padding: "28px 32px", flex: 1, overflow: "auto", fontFamily: "Outfit, sans-serif" }}
+    >
+      {hasPRD ? (
+        /* ── Raw PRD view ── */
+        <div style={{ maxWidth: 760 }}>
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20 }}>
+            <h3 style={{ fontFamily: "Newsreader, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", margin: 0 }}>
+              Product Requirements
+            </h3>
+            <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.72rem", color: "#6b6560", background: "#f0ece4", padding: "4px 10px", borderRadius: 5 }}>
+              PRD approved
+            </span>
+          </div>
+          <div style={{
+            background: "#fff", borderRadius: 10, border: "1px solid #e8e4dc",
+            padding: "28px 32px", lineHeight: 1.8,
+            fontSize: "0.88rem", color: "#2a2824",
+            whiteSpace: "pre-wrap", fontFamily: "Outfit, sans-serif",
+          }}>
+            {project?.prd}
+          </div>
+        </div>
+      ) : (
+        /* ── Section progress view ── */
+        <div style={{ maxWidth: 640 }}>
+          {/* Progress bar */}
+          <div style={{
+            display: "flex", alignItems: "center", gap: 16,
+            padding: "16px 20px", background: "#fff",
+            border: "1px solid #e8e4dc", borderRadius: 10,
+            marginBottom: 20, boxShadow: "0 1px 2px #1a1a1a05",
+          }}>
+            <div style={{
+              fontFamily: "IBM Plex Mono, monospace",
+              fontSize: "1.4rem", fontWeight: 500, color: "#1a1a1a", minWidth: 48,
+            }}>
+              {totalPct}%
+            </div>
+            <div style={{ flex: 1 }}>
+              <div style={{ height: 4, borderRadius: 2, background: "#eae6de" }}>
+                <div style={{
+                  height: "100%", borderRadius: 2,
+                  width: `${totalPct}%`, background: "#1a1a1a",
+                  transition: "width 0.6s ease",
+                }} />
+              </div>
+            </div>
+            <span style={{ fontSize: "0.75rem", color: "#a09a90" }}>
+              {doneCount}/{sections.length} approved
+            </span>
+          </div>
+
+          {/* Sections */}
+          {sections.map((s, i) => (
+            <div
+              key={s.id}
+              style={{
+                display: "flex", alignItems: "center", gap: 12,
+                padding: "14px 18px", marginBottom: 4,
+                background: "#fff", borderRadius: 8,
+                border: "1px solid #e8e4dc",
+                cursor: "pointer", transition: "border-color 0.12s",
+                animationDelay: `${i * 0.04}s`,
+              }}
+              className="vibn-enter"
+              onMouseEnter={(e) => (e.currentTarget.style.borderColor = "#d0ccc4")}
+              onMouseLeave={(e) => (e.currentTarget.style.borderColor = "#e8e4dc")}
+            >
+              {/* Status icon */}
+              <div style={{
+                width: 24, height: 24, borderRadius: 6, flexShrink: 0,
+                background: s.status === "done" ? "#2e7d3210"
+                  : s.status === "active" ? "#d4a04a12"
+                  : "#f6f4f0",
+                display: "flex", alignItems: "center", justifyContent: "center",
+                fontSize: "0.65rem", fontWeight: 700,
+                color: s.status === "done" ? "#2e7d32"
+                  : s.status === "active" ? "#9a7b3a"
+                  : "#c5c0b8",
+              }}>
+                {s.status === "done" ? "✓" : s.status === "active" ? "◐" : "○"}
+              </div>
+
+              <span style={{ flex: 1, fontSize: "0.84rem", color: "#1a1a1a", fontWeight: 450 }}>
+                {s.label}
+              </span>
+
+              {/* Mini progress bar */}
+              <div style={{ width: 60, height: 3, borderRadius: 2, background: "#eae6de" }}>
+                <div style={{
+                  height: "100%", borderRadius: 2, width: `${s.pct}%`,
+                  background: s.status === "done" ? "#2e7d32"
+                    : s.status === "active" ? "#d4a04a"
+                    : "#d0ccc4",
+                }} />
+              </div>
+
+              <span style={{
+                fontSize: "0.68rem", fontFamily: "IBM Plex Mono, monospace",
+                color: s.status === "done" ? "#2e7d32" : "#a09a90",
+                fontWeight: 500, minWidth: 28, textAlign: "right",
+              }}>
+                {s.pct}%
+              </span>
+            </div>
+          ))}
+
+          {/* Hint */}
+          <p style={{ fontSize: "0.78rem", color: "#b5b0a6", marginTop: 20, textAlign: "center" }}>
+            Continue chatting with Atlas to complete your PRD
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}

app/[workspace]/projects/layout.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { WorkspaceLeftRail } from "@/components/layout/workspace-left-rail";
-import { RightPanel } from "@/components/layout/right-panel";
+import { VIBNSidebar } from "@/components/layout/vibn-sidebar";
 import { ProjectAssociationPrompt } from "@/components/project-association-prompt";
-import { ReactNode, useState } from "react";
+import { ReactNode } from "react";
 import { useParams } from "next/navigation";
 import { Toaster } from "sonner";
 
@@ -14,26 +13,16 @@ export default function ProjectsLayout({
 }) {
   const params = useParams();
   const workspace = params.workspace as string;
-  const [activeSection, setActiveSection] = useState<string>("projects");
 
   return (
     <>
-      <div className="flex h-screen w-full overflow-hidden bg-background">
-        {/* Left Rail - Workspace Navigation */}
-        <WorkspaceLeftRail activeSection={activeSection} onSectionChange={setActiveSection} />
-
-        {/* Main Content Area */}
-        <main className="flex-1 flex flex-col overflow-hidden">
+      <div style={{ display: "flex", height: "100vh", background: "#f6f4f0", overflow: "hidden" }}>
+        <VIBNSidebar workspace={workspace} />
+        <main style={{ flex: 1, overflow: "auto" }}>
           {children}
         </main>
-
-        {/* Right Panel - AI Chat */}
-        <RightPanel />
       </div>
-      
-      {/* Project Association Prompt - Detects new workspaces */}
       <ProjectAssociationPrompt workspace={workspace} />
-      
       <Toaster position="top-center" />
     </>
   );

app/[workspace]/projects/page.tsx

@@ -2,38 +2,9 @@
 
 import { useEffect, useState } from "react";
 import { useSession } from "next-auth/react";
-import {
-  Card,
-  CardContent,
-  CardHeader,
-  CardTitle,
-  CardDescription,
-} from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { Badge } from "@/components/ui/badge";
-import {
-  Plus,
-  Sparkles,
-  Loader2,
-  MoreVertical,
-  Trash2,
-  GitBranch,
-  GitCommit,
-  Rocket,
-  Terminal,
-  CheckCircle2,
-  XCircle,
-  Clock,
-} from "lucide-react";
-import Link from "next/link";
 import { useParams } from "next/navigation";
+import Link from "next/link";
 import { ProjectCreationModal } from "@/components/project-creation-modal";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -44,34 +15,16 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { Loader2, Trash2 } from "lucide-react";
 import { toast } from "sonner";
 
-interface ContextSnapshot {
-  lastCommit?: { sha: string; message: string; author?: string; timestamp?: string };
-  currentBranch?: string;
-  openPRs?: { number: number; title: string }[];
-  openIssues?: { number: number; title: string }[];
-  lastDeployment?: { status: string; url?: string };
-}
-
 interface ProjectWithStats {
   id: string;
-  name: string;
-  slug: string;
   productName: string;
   productVision?: string;
-  workspacePath?: string;
   status?: string;
-  createdAt: string | null;
   updatedAt: string | null;
-  giteaRepo?: string;
-  giteaRepoUrl?: string;
-  theiaWorkspaceUrl?: string;
-  contextSnapshot?: ContextSnapshot;
-  stats: {
-    sessions: number;
-    costs: number;
-  };
+  stats: { sessions: number; costs: number };
 }
 
 function timeAgo(dateStr?: string | null): string {
@@ -89,19 +42,27 @@ function timeAgo(dateStr?: string | null): string {
   return `${Math.floor(days / 30)}mo ago`;
 }
 
-function DeployDot({ status }: { status?: string }) {
-  if (!status) return null;
-  const map: Record<string, string> = {
-    finished: "bg-green-500",
-    in_progress: "bg-blue-500 animate-pulse",
-    queued: "bg-yellow-400",
-    failed: "bg-red-500",
-  };
+function StatusDot({ status }: { status?: string }) {
+  const color = status === "live" ? "#2e7d32" : status === "building" ? "#3d5afe" : "#d4a04a";
+  const anim = status === "building" ? "vibn-breathe 2.5s ease infinite" : "none";
   return (
-    <span
-      className={`inline-block h-2 w-2 rounded-full ${map[status] ?? "bg-gray-400"}`}
-      title={status}
-    />
+    <span style={{ width: 7, height: 7, borderRadius: "50%", background: color, display: "inline-block", flexShrink: 0, animation: anim }} />
+  );
+}
+
+function StatusTag({ status }: { status?: string }) {
+  const label = status === "live" ? "Live" : status === "building" ? "Building" : "Defining";
+  const color = status === "live" ? "#2e7d32" : status === "building" ? "#3d5afe" : "#9a7b3a";
+  const bg = status === "live" ? "#2e7d3210" : status === "building" ? "#3d5afe10" : "#d4a04a12";
+  return (
+    <span style={{
+      display: "inline-flex", alignItems: "center", gap: 5,
+      padding: "3px 9px", borderRadius: 4,
+      fontSize: "0.68rem", fontWeight: 600, letterSpacing: "0.02em",
+      color, background: bg, fontFamily: "Outfit, sans-serif",
+    }}>
+      <StatusDot status={status} /> {label}
+    </span>
   );
 }
 
@@ -112,8 +73,7 @@ export default function ProjectsPage() {
 
   const [projects, setProjects] = useState<ProjectWithStats[]>([]);
   const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-  const [showCreationModal, setShowCreationModal] = useState(false);
+  const [showNew, setShowNew] = useState(false);
   const [projectToDelete, setProjectToDelete] = useState<ProjectWithStats | null>(null);
   const [isDeleting, setIsDeleting] = useState(false);
 
@@ -121,29 +81,11 @@ export default function ProjectsPage() {
     try {
       setLoading(true);
       const res = await fetch("/api/projects");
-      if (!res.ok) {
-        const err = await res.json();
-        throw new Error(err.error || "Failed to fetch projects");
-      }
+      if (!res.ok) throw new Error("Failed to fetch projects");
       const data = await res.json();
-      const loaded: ProjectWithStats[] = data.projects || [];
-      setProjects(loaded);
-      setError(null);
-
-      // Fire-and-forget: prewarm all provisioned IDE workspaces so containers
-      // are already running by the time the user clicks "Open IDE"
-      const warmUrls = loaded
-        .map((p) => p.theiaWorkspaceUrl)
-        .filter((u): u is string => Boolean(u));
-      if (warmUrls.length > 0) {
-        fetch("/api/projects/prewarm", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ urls: warmUrls }),
-        }).catch(() => {}); // ignore errors — this is best-effort
-      }
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : "Unknown error");
+      setProjects(data.projects ?? []);
+    } catch {
+      /* silent */
     } finally {
       setLoading(false);
     }
@@ -154,7 +96,7 @@ export default function ProjectsPage() {
     else if (status === "unauthenticated") setLoading(false);
   }, [status]);
 
-  const handleDeleteProject = async () => {
+  const handleDelete = async () => {
     if (!projectToDelete) return;
     setIsDeleting(true);
     try {
@@ -178,204 +120,201 @@ export default function ProjectsPage() {
     }
   };
 
-  if (status === "loading") {
-    return (
-      <div className="flex items-center justify-center py-16">
-        <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-      </div>
-    );
-  }
+  const statusSummary = () => {
+    const live = projects.filter((p) => p.status === "live").length;
+    const building = projects.filter((p) => p.status === "building").length;
+    const defining = projects.filter((p) => !p.status || p.status === "defining").length;
+    const parts = [];
+    if (defining) parts.push(`${defining} defining`);
+    if (building) parts.push(`${building} building`);
+    if (live) parts.push(`${live} live`);
+    return `${projects.length} total · ${parts.join(" · ")}`;
+  };
 
   return (
-    <>
-      <div className="container mx-auto py-8 px-4 max-w-6xl">
-        {/* Header */}
-        <div className="flex items-center justify-between mb-8">
-          <div>
-            <h1 className="text-2xl font-bold">Projects</h1>
-            <p className="text-muted-foreground text-sm mt-1">{session?.user?.email}</p>
-          </div>
-          <Button onClick={() => setShowCreationModal(true)}>
-            <Plus className="mr-2 h-4 w-4" />
-            New Project
-          </Button>
+    <div
+      className="vibn-enter"
+      style={{ padding: "44px 52px", maxWidth: 900, fontFamily: "Outfit, sans-serif" }}
+    >
+      {/* Header */}
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 36 }}>
+        <div>
+          <h1 style={{
+            fontFamily: "Newsreader, serif", fontSize: "1.9rem",
+            fontWeight: 400, color: "#1a1a1a", letterSpacing: "-0.03em",
+            lineHeight: 1.15, marginBottom: 4,
+          }}>
+            Projects
+          </h1>
+          {!loading && (
+            <p style={{ fontSize: "0.82rem", color: "#a09a90" }}>{statusSummary()}</p>
+          )}
         </div>
-
-        {/* States */}
-        {loading && (
-          <div className="flex items-center justify-center py-16">
-            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-          </div>
-        )}
-
-        {error && (
-          <Card className="border-red-500/30 bg-red-500/5">
-            <CardContent className="py-6">
-              <p className="text-sm text-red-600">Error: {error}</p>
-            </CardContent>
-          </Card>
-        )}
-
-        {/* Projects Grid */}
-        {!loading && !error && projects.length > 0 && (
-          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-            {projects.map((project) => {
-              const href = `/${workspace}/project/${project.id}/overview`;
-              const snap = project.contextSnapshot;
-              const deployStatus = snap?.lastDeployment?.status;
-
-              return (
-                <div key={project.id} className="relative group">
-                  <Link href={href}>
-                    <Card className="hover:border-primary/50 hover:shadow-sm transition-all cursor-pointer h-full">
-                      <CardHeader className="pb-3">
-                        <div className="flex items-start justify-between gap-2">
-                          <div className="flex-1 min-w-0">
-                            <CardTitle className="text-base truncate">{project.productName}</CardTitle>
-                            <CardDescription className="text-xs mt-0.5">
-                              {timeAgo(project.updatedAt)}
-                            </CardDescription>
-                          </div>
-                          <div className="flex items-center gap-1.5 shrink-0">
-                            <Badge
-                              variant={project.status === "active" ? "default" : "secondary"}
-                              className="text-[10px] px-1.5 py-0"
-                            >
-                              {project.status ?? "active"}
-                            </Badge>
-                            <DropdownMenu>
-                              <DropdownMenuTrigger asChild onClick={(e: React.MouseEvent) => e.preventDefault()}>
-                                <Button variant="ghost" size="icon" className="h-7 w-7 opacity-0 group-hover:opacity-100 transition-opacity">
-                                  <MoreVertical className="h-3.5 w-3.5" />
-                                </Button>
-                              </DropdownMenuTrigger>
-                              <DropdownMenuContent align="end">
-                                <DropdownMenuItem
-                                  className="text-red-600 focus:text-red-600"
-                                  onClick={(e: React.MouseEvent) => {
-                                    e.preventDefault();
-                                    setProjectToDelete(project);
-                                  }}
-                                >
-                                  <Trash2 className="mr-2 h-4 w-4" />
-                                  Delete
-                                </DropdownMenuItem>
-                              </DropdownMenuContent>
-                            </DropdownMenu>
-                          </div>
-                        </div>
-                      </CardHeader>
-
-                      <CardContent className="space-y-3">
-                        {/* Vision */}
-                        {project.productVision && (
-                          <p className="text-xs text-muted-foreground line-clamp-2">
-                            {project.productVision}
-                          </p>
-                        )}
-
-                        {/* Gitea repo + last commit */}
-                        {project.giteaRepo && (
-                          <div className="rounded-md border bg-muted/20 p-2 space-y-1">
-                            <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                              <GitBranch className="h-3 w-3" />
-                              <span className="font-mono truncate">{project.giteaRepo}</span>
-                              {snap?.currentBranch && (
-                                <span className="text-[10px] px-1.5 py-0 bg-muted rounded-full shrink-0">
-                                  {snap.currentBranch}
-                                </span>
-                              )}
-                            </div>
-                            {snap?.lastCommit ? (
-                              <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
-                                <GitCommit className="h-3 w-3 shrink-0" />
-                                <span className="font-mono text-[10px]">{snap.lastCommit.sha.slice(0, 7)}</span>
-                                <span className="truncate flex-1">{snap.lastCommit.message}</span>
-                                <span className="shrink-0">{timeAgo(snap.lastCommit.timestamp)}</span>
-                              </div>
-                            ) : (
-                              <p className="text-[10px] text-muted-foreground">No commits yet</p>
-                            )}
-                          </div>
-                        )}
-
-                        {/* Footer row: deploy + stats + IDE */}
-                        <div className="flex items-center justify-between pt-1 border-t">
-                          <div className="flex items-center gap-3 text-xs text-muted-foreground">
-                            {deployStatus && (
-                              <span className="flex items-center gap-1">
-                                <DeployDot status={deployStatus} />
-                                {deployStatus === "finished" ? "Live" : deployStatus}
-                              </span>
-                            )}
-                            <span>{project.stats.sessions} sessions</span>
-                            <span>${project.stats.costs.toFixed(2)}</span>
-                          </div>
-                          {project.theiaWorkspaceUrl && (
-                            <a
-                              href={project.theiaWorkspaceUrl}
-                              target="_blank"
-                              rel="noopener noreferrer"
-                              onClick={(e) => e.stopPropagation()}
-                              className="flex items-center gap-1 text-[10px] text-primary hover:underline"
-                            >
-                              <Terminal className="h-3 w-3" />
-                              IDE
-                            </a>
-                          )}
-                        </div>
-                      </CardContent>
-                    </Card>
-                  </Link>
-                </div>
-              );
-            })}
-
-            {/* Create card */}
-            <Card
-              className="hover:border-primary/50 transition-all cursor-pointer border-dashed"
-              onClick={() => setShowCreationModal(true)}
-            >
-              <CardContent className="flex flex-col items-center justify-center h-full min-h-[220px] p-6">
-                <div className="rounded-full bg-muted p-4 mb-3">
-                  <Plus className="h-6 w-6 text-muted-foreground" />
-                </div>
-                <h3 className="font-semibold mb-1 text-sm">New Project</h3>
-                <p className="text-xs text-muted-foreground text-center">
-                  Auto-provisions a Gitea repo and workspace
-                </p>
-              </CardContent>
-            </Card>
-          </div>
-        )}
-
-        {/* Empty state */}
-        {!loading && !error && projects.length === 0 && (
-          <Card className="border-dashed">
-            <CardContent className="flex flex-col items-center justify-center py-16">
-              <div className="rounded-full bg-muted p-6 mb-4">
-                <Sparkles className="h-12 w-12 text-muted-foreground" />
-              </div>
-              <h3 className="text-lg font-semibold mb-2">No projects yet</h3>
-              <p className="text-sm text-muted-foreground text-center max-w-md mb-6">
-                Create your first project. Vibn will automatically provision a Gitea repo,
-                register webhooks, and prepare your IDE workspace.
-              </p>
-              <Button size="lg" onClick={() => setShowCreationModal(true)}>
-                <Plus className="mr-2 h-4 w-4" />
-                Create Your First Project
-              </Button>
-            </CardContent>
-          </Card>
-        )}
+        <button
+          onClick={() => setShowNew(true)}
+          style={{
+            display: "flex", alignItems: "center", gap: 6,
+            padding: "8px 16px", borderRadius: 7,
+            background: "#1a1a1a", color: "#fff",
+            border: "1px solid #1a1a1a",
+            fontSize: "0.78rem", fontWeight: 600,
+            fontFamily: "Outfit, sans-serif", cursor: "pointer",
+          }}
+        >
+          <span style={{ fontSize: "1rem", lineHeight: 1, fontWeight: 300 }}>+</span>
+          New project
+        </button>
       </div>
 
+      {/* Loading */}
+      {loading && (
+        <div style={{ display: "flex", justifyContent: "center", paddingTop: 64 }}>
+          <Loader2 style={{ width: 28, height: 28, color: "#b5b0a6" }} className="animate-spin" />
+        </div>
+      )}
+
+      {/* Project list */}
+      {!loading && (
+        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+          {projects.map((p, i) => (
+            <div
+              key={p.id}
+              className="vibn-enter"
+              style={{ position: "relative", animationDelay: `${i * 0.05}s` }}
+            >
+              <Link
+                href={`/${workspace}/project/${p.id}/overview`}
+                style={{
+                  width: "100%", display: "flex", alignItems: "center",
+                  padding: "18px 22px", borderRadius: 10,
+                  background: "#fff", border: "1px solid #e8e4dc",
+                  cursor: "pointer", fontFamily: "Outfit, sans-serif",
+                  textDecoration: "none", boxShadow: "0 1px 2px #1a1a1a05",
+                  transition: "all 0.15s",
+                }}
+                onMouseEnter={(e) => {
+                  e.currentTarget.style.borderColor = "#d0ccc4";
+                  e.currentTarget.style.boxShadow = "0 2px 8px #1a1a1a0a";
+                }}
+                onMouseLeave={(e) => {
+                  e.currentTarget.style.borderColor = "#e8e4dc";
+                  e.currentTarget.style.boxShadow = "0 1px 2px #1a1a1a05";
+                }}
+              >
+                {/* Project initial */}
+                <div style={{
+                  width: 36, height: 36, borderRadius: 9, marginRight: 16,
+                  background: "#1a1a1a12",
+                  display: "flex", alignItems: "center", justifyContent: "center",
+                  flexShrink: 0,
+                }}>
+                  <span style={{
+                    fontFamily: "Newsreader, serif",
+                    fontSize: "1.05rem", fontWeight: 500, color: "#1a1a1a",
+                  }}>
+                    {p.productName[0]?.toUpperCase() ?? "P"}
+                  </span>
+                </div>
+
+                {/* Name + vision */}
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 2 }}>
+                    <span style={{ fontSize: "0.9rem", fontWeight: 600, color: "#1a1a1a" }}>
+                      {p.productName}
+                    </span>
+                    <StatusTag status={p.status} />
+                  </div>
+                  {p.productVision && (
+                    <span style={{ fontSize: "0.78rem", color: "#a09a90", display: "block", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                      {p.productVision}
+                    </span>
+                  )}
+                </div>
+
+                {/* Meta */}
+                <div style={{ display: "flex", gap: 28, alignItems: "center", flexShrink: 0 }}>
+                  <div style={{ textAlign: "right" }}>
+                    <div style={{ fontSize: "0.62rem", color: "#b5b0a6", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 2 }}>
+                      Last active
+                    </div>
+                    <div style={{ fontSize: "0.78rem", color: "#6b6560" }}>{timeAgo(p.updatedAt)}</div>
+                  </div>
+                  <div style={{ textAlign: "right" }}>
+                    <div style={{ fontSize: "0.62rem", color: "#b5b0a6", textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 2 }}>
+                      Sessions
+                    </div>
+                    <div style={{ fontSize: "0.78rem", color: "#6b6560" }}>{p.stats.sessions}</div>
+                  </div>
+                </div>
+
+                {/* Delete (hover) */}
+                <button
+                  onClick={(e) => { e.preventDefault(); setProjectToDelete(p); }}
+                  style={{
+                    marginLeft: 16, padding: "5px 8px", borderRadius: 6,
+                    border: "none", background: "transparent",
+                    color: "#b5b0a6", cursor: "pointer",
+                    opacity: 0, transition: "opacity 0.15s",
+                    fontFamily: "Outfit, sans-serif",
+                  }}
+                  className="delete-btn"
+                  onMouseEnter={(e) => e.currentTarget.style.color = "#d32f2f"}
+                  onMouseLeave={(e) => e.currentTarget.style.color = "#b5b0a6"}
+                  title="Delete project"
+                >
+                  <Trash2 style={{ width: 14, height: 14 }} />
+                </button>
+              </Link>
+            </div>
+          ))}
+
+          {/* New project card */}
+          <button
+            onClick={() => setShowNew(true)}
+            style={{
+              width: "100%", display: "flex", alignItems: "center", justifyContent: "center",
+              padding: "22px", borderRadius: 10,
+              background: "transparent", border: "1px dashed #d0ccc4",
+              cursor: "pointer", fontFamily: "Outfit, sans-serif",
+              color: "#b5b0a6", fontSize: "0.84rem", fontWeight: 500,
+              transition: "all 0.15s",
+              animationDelay: `${projects.length * 0.05}s`,
+            }}
+            className="vibn-enter"
+            onMouseEnter={(e) => { e.currentTarget.style.borderColor = "#8a8478"; e.currentTarget.style.color = "#6b6560"; }}
+            onMouseLeave={(e) => { e.currentTarget.style.borderColor = "#d0ccc4"; e.currentTarget.style.color = "#b5b0a6"; }}
+          >
+            + New project
+          </button>
+        </div>
+      )}
+
+      {/* Empty state */}
+      {!loading && projects.length === 0 && (
+        <div style={{ textAlign: "center", paddingTop: 64 }}>
+          <h3 style={{ fontFamily: "Newsreader, serif", fontSize: "1.3rem", fontWeight: 400, color: "#1a1a1a", marginBottom: 8 }}>
+            No projects yet
+          </h3>
+          <p style={{ fontSize: "0.82rem", color: "#a09a90", lineHeight: 1.6, marginBottom: 24 }}>
+            Tell Atlas what you want to build and it will figure out the rest.
+          </p>
+          <button
+            onClick={() => setShowNew(true)}
+            style={{
+              padding: "10px 22px", borderRadius: 7,
+              background: "#1a1a1a", color: "#fff",
+              border: "none", fontSize: "0.84rem", fontWeight: 600,
+              fontFamily: "Outfit, sans-serif", cursor: "pointer",
+            }}
+          >
+            Create your first project
+          </button>
+        </div>
+      )}
+
       <ProjectCreationModal
-        open={showCreationModal}
-        onOpenChange={(open) => {
-          setShowCreationModal(open);
-          if (!open) fetchProjects();
-        }}
+        open={showNew}
+        onOpenChange={(open) => { setShowNew(open); if (!open) fetchProjects(); }}
         workspace={workspace}
       />
 
@@ -391,20 +330,16 @@ export default function ProjectsPage() {
           <AlertDialogFooter>
             <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
             <AlertDialogAction
-              onClick={handleDeleteProject}
+              onClick={handleDelete}
               disabled={isDeleting}
               className="bg-red-600 hover:bg-red-700"
             >
-              {isDeleting ? (
-                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
-              ) : (
-                <Trash2 className="mr-2 h-4 w-4" />
-              )}
+              {isDeleting ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : <Trash2 className="mr-2 h-4 w-4" />}
               Delete Project
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
       </AlertDialog>
-    </>
+    </div>
   );
 }

app/globals.css

@@ -1,8 +1,14 @@
 @import "tailwindcss";
 @import "tw-animate-css";
+@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&family=Outfit:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
 
 @custom-variant dark (&:is(.dark *));
 
+@keyframes vibn-enter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
+@keyframes vibn-blink { 0%,100%{opacity:.2} 50%{opacity:.8} }
+@keyframes vibn-breathe { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
+.vibn-enter { animation: vibn-enter 0.35s ease both; }
+
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
@@ -45,37 +51,38 @@
 
 :root {
   --radius: 0.5rem;
-  --background: oklch(0.985 0 0);
-  --foreground: oklch(0.09 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.09 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.09 0 0);
-  --primary: oklch(0.09 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.94 0 0);
-  --secondary-foreground: oklch(0.09 0 0);
-  --muted: oklch(0.94 0 0);
-  --muted-foreground: oklch(0.50 0 0);
-  --accent: oklch(0.94 0 0);
-  --accent-foreground: oklch(0.09 0 0);
-  --destructive: oklch(0.577 0.245 27.325);
-  --border: oklch(0.88 0 0);
-  --input: oklch(0.88 0 0);
-  --ring: oklch(0.70 0 0);
+  /* Stackless warm beige palette */
+  --background: #f6f4f0;
+  --foreground: #1a1a1a;
+  --card: #ffffff;
+  --card-foreground: #1a1a1a;
+  --popover: #ffffff;
+  --popover-foreground: #1a1a1a;
+  --primary: #1a1a1a;
+  --primary-foreground: #ffffff;
+  --secondary: #f0ece4;
+  --secondary-foreground: #1a1a1a;
+  --muted: #f0ece4;
+  --muted-foreground: #a09a90;
+  --accent: #eae6de;
+  --accent-foreground: #1a1a1a;
+  --destructive: #d32f2f;
+  --border: #e8e4dc;
+  --input: #e0dcd4;
+  --ring: #d0ccc4;
   --chart-1: oklch(0.70 0.15 60);
   --chart-2: oklch(0.70 0.12 210);
   --chart-3: oklch(0.55 0.10 220);
   --chart-4: oklch(0.40 0.08 230);
   --chart-5: oklch(0.75 0.15 70);
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.09 0 0);
-  --sidebar-primary: oklch(0.09 0 0);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.94 0 0);
-  --sidebar-accent-foreground: oklch(0.09 0 0);
-  --sidebar-border: oklch(0.88 0 0);
-  --sidebar-ring: oklch(0.70 0 0);
+  --sidebar: #ffffff;
+  --sidebar-foreground: #1a1a1a;
+  --sidebar-primary: #1a1a1a;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #f6f4f0;
+  --sidebar-accent-foreground: #1a1a1a;
+  --sidebar-border: #e8e4dc;
+  --sidebar-ring: #d0ccc4;
 }
 
 .dark {

components/layout/project-shell.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { ReactNode } from "react";
+import { VIBNSidebar } from "./vibn-sidebar";
+import { Toaster } from "sonner";
+
+interface ProjectShellProps {
+  children: ReactNode;
+  workspace: string;
+  projectId: string;
+  projectName: string;
+  projectStatus?: string;
+  projectProgress?: number;
+}
+
+const TABS = [
+  { id: "overview", label: "Atlas", path: "overview" },
+  { id: "prd",      label: "PRD",   path: "prd" },
+  { id: "design",   label: "Design", path: "design" },
+  { id: "build",    label: "Build",  path: "build" },
+  { id: "deployment", label: "Deploy", path: "deployment" },
+  { id: "settings", label: "Settings", path: "settings" },
+];
+
+function StatusTag({ status }: { status?: string }) {
+  const label = status === "live" ? "Live"
+    : status === "building" ? "Building"
+    : "Defining";
+  const color = status === "live" ? "#2e7d32"
+    : status === "building" ? "#3d5afe"
+    : "#9a7b3a";
+  const bg = status === "live" ? "#2e7d3210"
+    : status === "building" ? "#3d5afe10"
+    : "#d4a04a12";
+  return (
+    <span style={{
+      display: "inline-flex", alignItems: "center", gap: 5,
+      padding: "3px 9px", borderRadius: 4,
+      fontSize: "0.68rem", fontWeight: 600, letterSpacing: "0.02em",
+      color, background: bg, fontFamily: "Outfit, sans-serif",
+    }}>
+      {label}
+    </span>
+  );
+}
+
+export function ProjectShell({
+  children,
+  workspace,
+  projectId,
+  projectName,
+  projectStatus,
+  projectProgress,
+}: ProjectShellProps) {
+  const pathname = usePathname();
+
+  // Determine which tab is active
+  const activeTab = TABS.find((t) => pathname?.includes(`/${t.path}`))?.id ?? "overview";
+
+  const progress = projectProgress ?? 0;
+
+  return (
+    <>
+      <div style={{ display: "flex", height: "100vh", background: "#f6f4f0", overflow: "hidden" }}>
+        {/* Sidebar */}
+        <VIBNSidebar workspace={workspace} />
+
+        {/* Main content */}
+        <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0 }}>
+          {/* Project header */}
+          <div style={{
+            padding: "18px 32px",
+            borderBottom: "1px solid #e8e4dc",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            background: "#fff",
+            flexShrink: 0,
+          }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
+              <div style={{
+                width: 34, height: 34, borderRadius: 9,
+                background: "#1a1a1a12",
+                display: "flex", alignItems: "center", justifyContent: "center",
+              }}>
+                <span style={{
+                  fontFamily: "Newsreader, serif",
+                  fontSize: "1rem", fontWeight: 500, color: "#1a1a1a",
+                }}>
+                  {projectName[0]?.toUpperCase() ?? "P"}
+                </span>
+              </div>
+              <div>
+                <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                  <h2 style={{
+                    fontSize: "1.05rem", fontWeight: 600, color: "#1a1a1a",
+                    letterSpacing: "-0.02em", fontFamily: "Outfit, sans-serif",
+                    margin: 0,
+                  }}>
+                    {projectName}
+                  </h2>
+                  <StatusTag status={projectStatus} />
+                </div>
+              </div>
+            </div>
+            <div style={{
+              fontFamily: "IBM Plex Mono, monospace",
+              fontSize: "0.78rem", fontWeight: 500,
+              color: "#1a1a1a", background: "#f6f4f0",
+              padding: "6px 12px", borderRadius: 6,
+            }}>
+              {progress}%
+            </div>
+          </div>
+
+          {/* Tab bar */}
+          <div style={{
+            padding: "0 32px",
+            borderBottom: "1px solid #e8e4dc",
+            display: "flex",
+            gap: 0,
+            background: "#fff",
+            flexShrink: 0,
+          }}>
+            {TABS.map((t) => (
+              <Link
+                key={t.id}
+                href={`/${workspace}/project/${projectId}/${t.path}`}
+                style={{
+                  padding: "12px 18px",
+                  border: "none",
+                  background: "none",
+                  fontSize: "0.8rem",
+                  fontWeight: 500,
+                  color: activeTab === t.id ? "#1a1a1a" : "#a09a90",
+                  borderBottom: activeTab === t.id ? "2px solid #1a1a1a" : "2px solid transparent",
+                  transition: "all 0.12s",
+                  fontFamily: "Outfit, sans-serif",
+                  textDecoration: "none",
+                  display: "block",
+                  whiteSpace: "nowrap",
+                }}
+              >
+                {t.label}
+              </Link>
+            ))}
+          </div>
+
+          {/* Page content */}
+          <div style={{ flex: 1, overflow: "auto" }}>
+            {children}
+          </div>
+        </div>
+      </div>
+      <Toaster position="top-center" />
+    </>
+  );
+}

components/layout/vibn-sidebar.tsx

@@ -0,0 +1,222 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { signOut, useSession } from "next-auth/react";
+
+interface Project {
+  id: string;
+  productName: string;
+  status?: string;
+}
+
+interface VIBNSidebarProps {
+  workspace: string;
+}
+
+function StatusDot({ status }: { status?: string }) {
+  const color =
+    status === "live" ? "#2e7d32"
+    : status === "building" ? "#3d5afe"
+    : "#d4a04a";
+  const anim = status === "building" ? "vibn-breathe 2.5s ease infinite" : "none";
+  return (
+    <span
+      style={{
+        width: 7, height: 7, borderRadius: "50%",
+        background: color, display: "inline-block",
+        flexShrink: 0, animation: anim,
+      }}
+    />
+  );
+}
+
+export function VIBNSidebar({ workspace }: VIBNSidebarProps) {
+  const pathname = usePathname();
+  const { data: session } = useSession();
+  const [projects, setProjects] = useState<Project[]>([]);
+
+  useEffect(() => {
+    fetch("/api/projects")
+      .then((r) => r.json())
+      .then((d) => setProjects(d.projects ?? []))
+      .catch(() => {});
+  }, []);
+
+  // Derive active project from URL
+  const activeProjectId = pathname?.match(/\/project\/([^/]+)/)?.[1] ?? null;
+
+  // Derive active top-level section
+  const isProjects = !activeProjectId && (pathname?.includes("/projects") || pathname?.includes("/project"));
+  const isActivity = pathname?.includes("/activity");
+  const isSettings = pathname?.includes("/settings");
+
+  const topNavItems = [
+    { id: "projects", label: "Projects", icon: "⌗", href: `/${workspace}/projects` },
+    { id: "settings", label: "Settings", icon: "⚙", href: `/${workspace}/settings` },
+  ];
+
+  const userInitial = session?.user?.name?.[0]?.toUpperCase()
+    ?? session?.user?.email?.[0]?.toUpperCase()
+    ?? "?";
+
+  return (
+    <nav
+      style={{
+        width: 220,
+        height: "100vh",
+        background: "#fff",
+        borderRight: "1px solid #e8e4dc",
+        display: "flex",
+        flexDirection: "column",
+        fontFamily: "Outfit, sans-serif",
+        flexShrink: 0,
+      }}
+    >
+      {/* Logo */}
+      <Link
+        href={`/${workspace}/projects`}
+        style={{
+          padding: "22px 18px 18px",
+          display: "flex",
+          alignItems: "center",
+          gap: 9,
+          textDecoration: "none",
+        }}
+      >
+        <div
+          style={{
+            width: 28, height: 28, borderRadius: 7, overflow: "hidden",
+            flexShrink: 0,
+          }}
+        >
+          <img src="/vibn-black-circle-logo.png" alt="VIBN" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+        </div>
+        <span
+          style={{
+            fontSize: "0.95rem", fontWeight: 600, color: "#1a1a1a",
+            letterSpacing: "-0.03em", fontFamily: "Newsreader, serif",
+          }}
+        >
+          vibn
+        </span>
+      </Link>
+
+      {/* Top nav */}
+      <div style={{ padding: "4px 10px" }}>
+        {topNavItems.map((n) => {
+          const isActive = n.id === "projects" ? isProjects && !activeProjectId
+            : n.id === "settings" ? isSettings
+            : false;
+          return (
+            <Link
+              key={n.id}
+              href={n.href}
+              style={{
+                width: "100%",
+                display: "flex",
+                alignItems: "center",
+                gap: 9,
+                padding: "8px 10px",
+                borderRadius: 6,
+                background: isActive ? "#f6f4f0" : "transparent",
+                color: isActive ? "#1a1a1a" : "#6b6560",
+                fontSize: "0.82rem",
+                fontWeight: isActive ? 600 : 500,
+                transition: "all 0.12s",
+                textDecoration: "none",
+              }}
+            >
+              <span style={{ fontSize: "0.8rem", opacity: 0.45, width: 18, textAlign: "center" }}>
+                {n.icon}
+              </span>
+              {n.label}
+            </Link>
+          );
+        })}
+      </div>
+
+      <div style={{ height: 1, background: "#eae6de", margin: "10px 18px" }} />
+
+      {/* Projects list */}
+      <div style={{ padding: "2px 10px", flex: 1, overflow: "auto" }}>
+        <div
+          style={{
+            fontSize: "0.6rem", fontWeight: 600, color: "#a09a90",
+            letterSpacing: "0.1em", textTransform: "uppercase",
+            padding: "6px 10px 8px",
+          }}
+        >
+          Projects
+        </div>
+        {projects.map((p) => {
+          const isActive = activeProjectId === p.id;
+          return (
+            <Link
+              key={p.id}
+              href={`/${workspace}/project/${p.id}/overview`}
+              style={{
+                width: "100%",
+                display: "flex",
+                alignItems: "center",
+                gap: 9,
+                padding: "7px 10px",
+                borderRadius: 6,
+                background: isActive ? "#f6f4f0" : "transparent",
+                color: "#1a1a1a",
+                fontSize: "0.82rem",
+                fontWeight: isActive ? 600 : 450,
+                transition: "background 0.12s",
+                textDecoration: "none",
+                overflow: "hidden",
+              }}
+            >
+              <StatusDot status={p.status} />
+              <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                {p.productName}
+              </span>
+            </Link>
+          );
+        })}
+      </div>
+
+      {/* User footer */}
+      <div
+        style={{
+          padding: "14px 18px",
+          borderTop: "1px solid #eae6de",
+          display: "flex",
+          alignItems: "center",
+          gap: 9,
+        }}
+      >
+        <div
+          style={{
+            width: 28, height: 28, borderRadius: "50%",
+            background: "#f0ece4", display: "flex", alignItems: "center",
+            justifyContent: "center", fontSize: "0.72rem", fontWeight: 600,
+            color: "#8a8478", flexShrink: 0,
+          }}
+        >
+          {userInitial}
+        </div>
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ fontSize: "0.78rem", fontWeight: 500, color: "#1a1a1a", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+            {session?.user?.name ?? session?.user?.email?.split("@")[0] ?? "Account"}
+          </div>
+          <button
+            onClick={() => signOut({ callbackUrl: "/auth" })}
+            style={{
+              background: "none", border: "none", padding: 0,
+              fontSize: "0.62rem", color: "#a09a90", cursor: "pointer",
+              fontFamily: "Outfit, sans-serif",
+            }}
+          >
+            Sign out
+          </button>
+        </div>
+      </div>
+    </nav>
+  );
+}