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]/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>
   );
 }