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>
+  );
+}