feat: restructure project nav to Atlas | PRD | Build | Growth | Assist | Analytics

Tab bar:
- Removed: Design, Launch, Grow, Insights, Settings tabs
- Added: Growth, Assist, Analytics as top-level tabs
- Build remains, now a full hub

Build hub (/build):
- Left sub-nav groups: Code (apps), Layouts (surfaces), Infrastructure (6 items)
- Code section: scoped file browser per selected app
- Layouts section: surface overview cards with Edit link to /design
- Infrastructure section: summary panel linking to /infrastructure?tab=

Growth (/growth):
- Left nav: Marketing Site, Communications, Channels, Pages
- Each section: description + feature item grid + feedback CTA

Assist (/assist):
- Left nav: Emails, Chat Support, Support Site, Communications
- Each section: description + feature item grid + feedback CTA

Analytics (/analytics):
- Left nav: Customers, Usage, Events, Reports
- Each section: description + feature item grid + feedback CTA

Made-with: Cursor

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

@@ -0,0 +1,133 @@
+"use client";
+
+import { Suspense } from "react";
+import { useParams, useSearchParams, useRouter } from "next/navigation";
+
+const SECTIONS = [
+  {
+    id: "customers",
+    label: "Customers",
+    icon: "◉",
+    title: "Customer List",
+    desc: "Every user who has signed up, their plan, usage, last seen, and lifecycle stage. Filter, search, and act on any segment.",
+    items: ["User Directory", "Lifecycle Stages", "Plan & Billing", "Activity Timeline", "Segment Builder"],
+  },
+  {
+    id: "usage",
+    label: "Usage",
+    icon: "∿",
+    title: "Usage & Activity",
+    desc: "How users interact with your product — feature adoption, session frequency, retention curves, and activation funnels.",
+    items: ["Feature Adoption", "Session Metrics", "Retention Curves", "Activation Funnel", "Power Users"],
+  },
+  {
+    id: "events",
+    label: "Events",
+    icon: "◬",
+    title: "Events & Tracking",
+    desc: "Every event your product fires — page views, clicks, conversions, and custom events — all tagged and queryable.",
+    items: ["Event Stream", "Custom Events", "Page Views", "Conversion Events", "Tag Manager"],
+  },
+  {
+    id: "reports",
+    label: "Reports",
+    icon: "▭",
+    title: "Reports",
+    desc: "MRR, churn, DAU/MAU, cohort analysis, and revenue reports. Export or share with your team on a schedule.",
+    items: ["Revenue (MRR/ARR)", "Churn Report", "DAU / MAU", "Cohort Analysis", "Custom Reports", "Scheduled Exports"],
+  },
+] as const;
+
+type SectionId = typeof SECTIONS[number]["id"];
+
+const NAV_GROUP: React.CSSProperties = {
+  fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6",
+  letterSpacing: "0.09em", textTransform: "uppercase",
+  padding: "14px 12px 6px", fontFamily: "Outfit, sans-serif",
+};
+
+function AnalyticsInner() {
+  const params = useParams();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const workspace = params.workspace as string;
+  const projectId = params.projectId as string;
+
+  const activeId = (searchParams.get("section") ?? "customers") as SectionId;
+  const active = SECTIONS.find(s => s.id === activeId) ?? SECTIONS[0];
+
+  const setSection = (id: string) =>
+    router.push(`/${workspace}/project/${projectId}/analytics?section=${id}`, { scroll: false });
+
+  return (
+    <div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif", overflow: "hidden" }}>
+
+      {/* Left nav */}
+      <div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "auto" }}>
+        <div style={NAV_GROUP}>Analytics</div>
+        {SECTIONS.map(s => {
+          const isActive = activeId === s.id;
+          return (
+            <button key={s.id} onClick={() => setSection(s.id)} style={{
+              display: "flex", alignItems: "center", gap: 8, width: "100%", textAlign: "left",
+              background: isActive ? "#f0ece4" : "transparent", border: "none", cursor: "pointer",
+              padding: "6px 12px", borderRadius: 5,
+              fontSize: "0.78rem", fontWeight: isActive ? 600 : 440,
+              color: isActive ? "#1a1a1a" : "#5a5550",
+            }}
+              onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
+              onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
+            >
+              <span style={{ fontSize: "0.65rem", opacity: 0.55, width: 14, textAlign: "center" }}>{s.icon}</span>
+              {s.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Content */}
+      <div style={{ flex: 1, overflow: "auto", display: "flex", flexDirection: "column" }}>
+        <div style={{ padding: "28px 32px", maxWidth: 800 }}>
+          <div style={{ marginBottom: 24 }}>
+            <div style={{ fontSize: "1.1rem", fontWeight: 700, color: "#1a1a1a", marginBottom: 6 }}>{active.title}</div>
+            <div style={{ fontSize: "0.82rem", color: "#6b6560", lineHeight: 1.65, maxWidth: 520 }}>{active.desc}</div>
+          </div>
+
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 12, marginBottom: 32 }}>
+            {active.items.map(item => (
+              <div key={item} style={{
+                background: "#fff", border: "1px solid #e8e4dc", borderRadius: 9,
+                padding: "14px 16px", display: "flex", alignItems: "center", justifyContent: "space-between",
+              }}>
+                <span style={{ fontSize: "0.8rem", fontWeight: 500, color: "#1a1a1a" }}>{item}</span>
+                <span style={{ fontSize: "0.65rem", color: "#c5c0b8", background: "#f6f4f0", padding: "2px 7px", borderRadius: 4 }}>Soon</span>
+              </div>
+            ))}
+          </div>
+
+          <div style={{
+            background: "linear-gradient(135deg, #1a1a1a 0%, #2d2820 100%)",
+            borderRadius: 12, padding: "24px 28px",
+            display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20,
+          }}>
+            <div>
+              <div style={{ fontSize: "0.85rem", fontWeight: 600, color: "#fff", marginBottom: 4 }}>{active.title} is coming to VIBN</div>
+              <div style={{ fontSize: "0.75rem", color: "#8a8478", lineHeight: 1.5 }}>We&apos;re building this section next. Shape it by telling us what you need.</div>
+            </div>
+            <button style={{ background: "#d4a04a", color: "#fff", border: "none", borderRadius: 8, padding: "9px 20px", fontSize: "0.78rem", fontWeight: 600, cursor: "pointer", whiteSpace: "nowrap", flexShrink: 0 }}>
+              Give feedback
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function AnalyticsPage() {
+  return (
+    <Suspense fallback={<div style={{ display: "flex", height: "100%", alignItems: "center", justifyContent: "center", color: "#a09a90", fontFamily: "Outfit, sans-serif", fontSize: "0.85rem" }}>Loading…</div>}>
+      <AnalyticsInner />
+    </Suspense>
+  );
+}

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

@@ -0,0 +1,133 @@
+"use client";
+
+import { Suspense } from "react";
+import { useParams, useSearchParams, useRouter } from "next/navigation";
+
+const SECTIONS = [
+  {
+    id: "emails",
+    label: "Emails",
+    icon: "◈",
+    title: "Email",
+    desc: "Transactional and support emails — onboarding sequences, password resets, billing receipts, and support replies — all in one place.",
+    items: ["Onboarding Sequence", "Transactional Emails", "Support Replies", "Billing Notices", "Digests & Summaries"],
+  },
+  {
+    id: "chat",
+    label: "Chat Support",
+    icon: "◎",
+    title: "Chat Support",
+    desc: "Live chat and AI-powered support widget embedded in your product. Routes to human agents when needed, logs every conversation.",
+    items: ["Live Chat Widget", "AI First Response", "Agent Handoff", "Conversation History", "Canned Responses"],
+  },
+  {
+    id: "support-site",
+    label: "Support Site",
+    icon: "▭",
+    title: "Support Site",
+    desc: "Your public help centre — searchable docs, FAQs, guides, and tutorials. Deflects support tickets before they're created.",
+    items: ["Help Articles", "FAQs", "Video Guides", "Release Notes", "Status Page"],
+  },
+  {
+    id: "communications",
+    label: "Communications",
+    icon: "↗",
+    title: "In-App Communications",
+    desc: "Announcements, tooltips, banners, and nudges shown directly inside your product to guide and inform users.",
+    items: ["In-App Banners", "Tooltips & Tours", "Feature Announcements", "NPS Surveys", "Feedback Prompts"],
+  },
+] as const;
+
+type SectionId = typeof SECTIONS[number]["id"];
+
+const NAV_GROUP: React.CSSProperties = {
+  fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6",
+  letterSpacing: "0.09em", textTransform: "uppercase",
+  padding: "14px 12px 6px", fontFamily: "Outfit, sans-serif",
+};
+
+function AssistInner() {
+  const params = useParams();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const workspace = params.workspace as string;
+  const projectId = params.projectId as string;
+
+  const activeId = (searchParams.get("section") ?? "emails") as SectionId;
+  const active = SECTIONS.find(s => s.id === activeId) ?? SECTIONS[0];
+
+  const setSection = (id: string) =>
+    router.push(`/${workspace}/project/${projectId}/assist?section=${id}`, { scroll: false });
+
+  return (
+    <div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif", overflow: "hidden" }}>
+
+      {/* Left nav */}
+      <div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "auto" }}>
+        <div style={NAV_GROUP}>Assist</div>
+        {SECTIONS.map(s => {
+          const isActive = activeId === s.id;
+          return (
+            <button key={s.id} onClick={() => setSection(s.id)} style={{
+              display: "flex", alignItems: "center", gap: 8, width: "100%", textAlign: "left",
+              background: isActive ? "#f0ece4" : "transparent", border: "none", cursor: "pointer",
+              padding: "6px 12px", borderRadius: 5,
+              fontSize: "0.78rem", fontWeight: isActive ? 600 : 440,
+              color: isActive ? "#1a1a1a" : "#5a5550",
+            }}
+              onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
+              onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
+            >
+              <span style={{ fontSize: "0.65rem", opacity: 0.55, width: 14, textAlign: "center" }}>{s.icon}</span>
+              {s.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Content */}
+      <div style={{ flex: 1, overflow: "auto", display: "flex", flexDirection: "column" }}>
+        <div style={{ padding: "28px 32px", maxWidth: 800 }}>
+          <div style={{ marginBottom: 24 }}>
+            <div style={{ fontSize: "1.1rem", fontWeight: 700, color: "#1a1a1a", marginBottom: 6 }}>{active.title}</div>
+            <div style={{ fontSize: "0.82rem", color: "#6b6560", lineHeight: 1.65, maxWidth: 520 }}>{active.desc}</div>
+          </div>
+
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 12, marginBottom: 32 }}>
+            {active.items.map(item => (
+              <div key={item} style={{
+                background: "#fff", border: "1px solid #e8e4dc", borderRadius: 9,
+                padding: "14px 16px", display: "flex", alignItems: "center", justifyContent: "space-between",
+              }}>
+                <span style={{ fontSize: "0.8rem", fontWeight: 500, color: "#1a1a1a" }}>{item}</span>
+                <span style={{ fontSize: "0.65rem", color: "#c5c0b8", background: "#f6f4f0", padding: "2px 7px", borderRadius: 4 }}>Soon</span>
+              </div>
+            ))}
+          </div>
+
+          <div style={{
+            background: "linear-gradient(135deg, #1a1a1a 0%, #2d2820 100%)",
+            borderRadius: 12, padding: "24px 28px",
+            display: "flex", alignItems: "center", justifyContent: "space-between", gap: 20,
+          }}>
+            <div>
+              <div style={{ fontSize: "0.85rem", fontWeight: 600, color: "#fff", marginBottom: 4 }}>{active.title} is coming to VIBN</div>
+              <div style={{ fontSize: "0.75rem", color: "#8a8478", lineHeight: 1.5 }}>We&apos;re building this section next. Shape it by telling us what you need.</div>
+            </div>
+            <button style={{ background: "#d4a04a", color: "#fff", border: "none", borderRadius: 8, padding: "9px 20px", fontSize: "0.78rem", fontWeight: 600, cursor: "pointer", whiteSpace: "nowrap", flexShrink: 0 }}>
+              Give feedback
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function AssistPage() {
+  return (
+    <Suspense fallback={<div style={{ display: "flex", height: "100%", alignItems: "center", justifyContent: "center", color: "#a09a90", fontFamily: "Outfit, sans-serif", fontSize: "0.85rem" }}>Loading…</div>}>
+      <AssistInner />
+    </Suspense>
+  );
+}

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

@@ -1,175 +1,220 @@
 "use client";
 
-import { useEffect, useState, useCallback, Suspense } from "react";
+import { Suspense, useState, useEffect, useCallback } from "react";
-import { useParams, useSearchParams } from "next/navigation";
+import { useParams, useSearchParams, useRouter } from "next/navigation";
 import { useSession } from "next-auth/react";
+import Link from "next/link";
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
-interface FileItem {
+interface AppEntry { name: string; path: string; }
-  name: string;
+interface SurfaceEntry { id: string; label: string; lockedTheme?: string; }
-  path: string;
+interface FileItem { name: string; path: string; type: "file" | "dir" | "symlink"; }
-  type: "file" | "dir" | "symlink";
-  size?: number;
-}
-
 interface TreeNode {
-  name: string;
+  name: string; path: string; type: "file" | "dir";
-  path: string;
+  children?: TreeNode[]; expanded?: boolean; loaded?: boolean;
-  type: "file" | "dir";
-  children?: TreeNode[];
-  expanded?: boolean;
-  loaded?: boolean;
 }
 
-// ── Language detection ────────────────────────────────────────────────────────
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const INFRA_ITEMS = [
+  { id: "builds",      label: "Builds",      icon: "⬡" },
+  { id: "databases",   label: "Databases",   icon: "◫" },
+  { id: "services",    label: "Services",    icon: "◎" },
+  { id: "environment", label: "Environment", icon: "≡" },
+  { id: "domains",     label: "Domains",     icon: "◬" },
+  { id: "logs",        label: "Logs",        icon: "≈" },
+];
+
+const SURFACE_LABELS: Record<string, string> = {
+  webapp: "Web App", marketing: "Marketing Site", admin: "Admin Panel",
+};
+const SURFACE_ICONS: Record<string, string> = {
+  webapp: "◈", marketing: "◌", admin: "◫",
+};
+
+// ── Language / syntax helpers ─────────────────────────────────────────────────
 
 function langFromName(name: string): string {
   const ext = name.split(".").pop()?.toLowerCase() ?? "";
   const map: Record<string, string> = {
     ts: "typescript", tsx: "typescript", js: "javascript", jsx: "javascript",
-    json: "json", md: "markdown", mdx: "markdown",
+    json: "json", md: "markdown", css: "css", scss: "css", html: "html",
-    css: "css", scss: "css", html: "html",
     py: "python", sh: "shell", yaml: "yaml", yml: "yaml",
     toml: "toml", prisma: "prisma", sql: "sql",
-    env: "dotenv", gitignore: "shell", dockerfile: "dockerfile",
   };
   return map[ext] ?? "text";
 }
 
-// ── Simple token highlighter ──────────────────────────────────────────────────
-
 function highlightCode(code: string, lang: string): React.ReactNode[] {
   return code.split("\n").map((line, i) => {
-    if (lang === "text" || lang === "dotenv" || lang === "dockerfile") {
-      return <div key={i}>{line || "\u00a0"}</div>;
-    }
     const commentPrefixes = ["//", "#", "--"];
     if (commentPrefixes.some(p => line.trimStart().startsWith(p))) {
       return <div key={i}><span style={{ color: "#6a9955" }}>{line}</span></div>;
     }
-    const kwRe = /\b(import|export|from|const|let|var|function|return|if|else|async|await|type|interface|class|extends|implements|new|default|null|undefined|true|false|void|string|number|boolean|object|Promise|React)\b/g;
+    const kwRe = /\b(import|export|from|const|let|var|function|return|if|else|async|await|type|interface|class|extends|new|default|null|undefined|true|false|void|string|number|boolean|React)\b/g;
     const parts = line.split(kwRe);
-    const tokens = parts.map((part, j) => {
+    const tokens = parts.map((p, j) => {
-      if (!part) return null;
+      if (!p) return null;
-      if (/^(import|export|from|const|let|var|function|return|if|else|async|await|type|interface|class|extends|implements|new|default|null|undefined|true|false|void|string|number|boolean|object|Promise|React)$/.test(part)) {
+      if (/^(import|export|from|const|let|var|function|return|if|else|async|await|type|interface|class|extends|new|default|null|undefined|true|false|void|string|number|boolean|React)$/.test(p))
-        return <span key={j} style={{ color: "#569cd6" }}>{part}</span>;
+        return <span key={j} style={{ color: "#569cd6" }}>{p}</span>;
-      }
+      return <span key={j}>{p}</span>;
-      if (/^(['"`]).*\1$/.test(part.trim())) {
-        return <span key={j} style={{ color: "#ce9178" }}>{part}</span>;
-      }
-      return <span key={j}>{part}</span>;
     });
     return <div key={i} style={{ minHeight: "1.4em" }}>{tokens.length ? tokens : "\u00a0"}</div>;
   });
 }
 
-// ── Tree row ──────────────────────────────────────────────────────────────────
+// ── File tree row ─────────────────────────────────────────────────────────────
 
-function TreeRow({
+function TreeRow({ node, depth, selectedPath, onSelect, onToggle }: {
-  node, depth, selectedPath, onSelect, onToggle,
+  node: TreeNode; depth: number; selectedPath: string | null;
-}: {
+  onSelect: (p: string) => void; onToggle: (p: string) => void;
-  node: TreeNode;
-  depth: number;
-  selectedPath: string | null;
-  onSelect: (path: string) => void;
-  onToggle: (path: string) => void;
 }) {
-  const isSelected = selectedPath === node.path;
+  const active = selectedPath === node.path;
   const isDir = node.type === "dir";
   const ext = node.name.split(".").pop()?.toLowerCase() ?? "";
-  const fileColor =
+  const fileColor = ext === "tsx" || ext === "ts" ? "#3178c6" : ext === "jsx" || ext === "js" ? "#f0db4f"
-    ext === "tsx" || ext === "ts" ? "#3178c6"
+    : ext === "css" || ext === "scss" ? "#e879f9" : "#b5b0a6";
-    : ext === "jsx" || ext === "js" ? "#f0db4f"
-    : ext === "css" || ext === "scss" ? "#e879f9"
-    : ext === "json" ? "#a09a90"
-    : ext === "md" || ext === "mdx" ? "#6b6560"
-    : "#b5b0a6";
 
   return (
     <>
-      <button
+      <button onClick={() => isDir ? onToggle(node.path) : onSelect(node.path)} style={{
-        onClick={() => isDir ? onToggle(node.path) : onSelect(node.path)}
+        display: "flex", alignItems: "center", gap: 5, width: "100%", textAlign: "left",
-        style={{
+        background: active ? "#eceae5" : "transparent", border: "none", cursor: "pointer",
-          display: "flex", alignItems: "center", gap: 6,
+        padding: `4px 8px 4px ${10 + depth * 12}px`, borderRadius: 4,
-          width: "100%", textAlign: "left",
+        fontFamily: "IBM Plex Mono, monospace", fontSize: "0.72rem",
-          background: isSelected ? "#f0ece4" : "transparent",
+        color: active ? "#1a1a1a" : "#4a4640",
-          border: "none", cursor: "pointer",
-          padding: `5px 10px 5px ${14 + depth * 14}px`,
-          borderRadius: 4, transition: "background 0.1s",
-          fontFamily: "IBM Plex Mono, monospace", fontSize: "0.75rem",
-          color: isSelected ? "#1a1a1a" : "#4a4640",
       }}
-        onMouseEnter={e => { if (!isSelected) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
+        onMouseEnter={e => { if (!active) (e.currentTarget as HTMLElement).style.background = "#f0ece4"; }}
-        onMouseLeave={e => { if (!isSelected) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
+        onMouseLeave={e => { if (!active) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
       >
-        {isDir ? (
+        {isDir
-          <span style={{
+          ? <span style={{ fontSize: "0.48rem", color: "#a09a90", display: "inline-block", transition: "transform 0.1s", transform: node.expanded ? "rotate(90deg)" : "none" }}>▶</span>
-            fontSize: "0.52rem", color: "#a09a90", flexShrink: 0,
+          : <span style={{ color: fileColor, fontSize: "0.65rem" }}>◌</span>}
-            display: "inline-block", transition: "transform 0.12s",
+        <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{node.name}</span>
-            transform: node.expanded ? "rotate(90deg)" : "none",
-          }}>▶</span>
-        ) : (
-          <span style={{ color: fileColor, fontSize: "0.7rem", flexShrink: 0 }}>◌</span>
-        )}
-        <span style={{ overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-          {node.name}
-        </span>
       </button>
-      {isDir && node.expanded && node.children?.map(child => (
+      {isDir && node.expanded && node.children?.map(c =>
-        <TreeRow
+        <TreeRow key={c.path} node={c} depth={depth + 1} selectedPath={selectedPath} onSelect={onSelect} onToggle={onToggle} />
-          key={child.path}
+      )}
-          node={child}
-          depth={depth + 1}
-          selectedPath={selectedPath}
-          onSelect={onSelect}
-          onToggle={onToggle}
-        />
-      ))}
     </>
   );
 }
 
-// ── Empty state ───────────────────────────────────────────────────────────────
+// ── Left nav shared styles ────────────────────────────────────────────────────
 
-function EmptyState() {
+const NAV_GROUP_LABEL: React.CSSProperties = {
+  fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6",
+  letterSpacing: "0.09em", textTransform: "uppercase",
+  padding: "12px 12px 5px", fontFamily: "Outfit, sans-serif",
+};
+
+function NavItem({ label, active, onClick, indent = false }: { label: string; active: boolean; onClick: () => void; indent?: boolean }) {
   return (
-    <div style={{
+    <button onClick={onClick} style={{
-      display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
+      display: "flex", alignItems: "center", gap: 7, width: "100%", textAlign: "left",
-      height: "100%", gap: 12, padding: 40,
+      background: active ? "#f0ece4" : "transparent", border: "none", cursor: "pointer",
+      padding: `5px 12px 5px ${indent ? 22 : 12}px`, borderRadius: 5,
+      fontSize: "0.78rem", fontWeight: active ? 600 : 440,
+      color: active ? "#1a1a1a" : "#5a5550", fontFamily: "Outfit, sans-serif",
+    }}
+      onMouseEnter={e => { if (!active) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
+      onMouseLeave={e => { if (!active) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
+    >
+      {label}
+    </button>
+  );
+}
+
+// ── Placeholder panel ─────────────────────────────────────────────────────────
+
+function Placeholder({ icon, title, desc }: { icon: string; title: string; desc: string }) {
+  return (
+    <div style={{ flex: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 14, padding: 60, textAlign: "center" }}>
+      <div style={{ width: 52, height: 52, borderRadius: 13, background: "#f0ece4", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "1.4rem", color: "#b5b0a6" }}>{icon}</div>
+      <div>
+        <div style={{ fontSize: "0.9rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 6 }}>{title}</div>
+        <div style={{ fontSize: "0.8rem", color: "#a09a90", maxWidth: 320, lineHeight: 1.6 }}>{desc}</div>
+      </div>
+      <div style={{ marginTop: 4, padding: "7px 18px", background: "#1a1a1a", color: "#fff", borderRadius: 7, fontSize: "0.77rem", fontWeight: 500, opacity: 0.35 }}>Coming soon</div>
+    </div>
+  );
+}
+
+// ── Infra content ─────────────────────────────────────────────────────────────
+
+function InfraContent({ tab, projectId, workspace }: { tab: string; projectId: string; workspace: string }) {
+  const base = `/${workspace}/project/${projectId}/infrastructure`;
+  const descriptions: Record<string, { icon: string; title: string; desc: string }> = {
+    databases:   { icon: "◫", title: "Databases",   desc: "PostgreSQL, Redis, and other databases — provisioned and managed with connection strings auto-injected." },
+    services:    { icon: "◎", title: "Services",    desc: "Background workers, queues, email delivery, file storage, and third-party integrations." },
+    environment: { icon: "≡", title: "Environment", desc: "Environment variables and secrets, encrypted at rest and auto-injected into your containers." },
+    domains:     { icon: "◬", title: "Domains",     desc: "Custom domains and SSL certificates for all your deployed services." },
+    logs:        { icon: "≈", title: "Logs",        desc: "Runtime logs, request traces, and error reports streaming from deployed services." },
+    builds:      { icon: "⬡", title: "Builds",      desc: "Deployment history, build logs, and rollback controls for all your apps." },
+  };
+  const d = descriptions[tab];
+  return (
+    <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
+      <div style={{ padding: "20px 28px 0", display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+        <div style={{ fontSize: "0.68rem", fontWeight: 700, color: "#a09a90", letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "Outfit, sans-serif" }}>{tab}</div>
+        <Link href={`${base}?tab=${tab}`} style={{ fontSize: "0.72rem", color: "#a09a90", textDecoration: "none", fontFamily: "Outfit, sans-serif" }}>Open full view →</Link>
+      </div>
+      {d && <Placeholder icon={d.icon} title={d.title} desc={d.desc} />}
+    </div>
+  );
+}
+
+// ── Layouts content ───────────────────────────────────────────────────────────
+
+function LayoutsContent({ surfaces, projectId, workspace, activeSurfaceId, onSelectSurface }: {
+  surfaces: SurfaceEntry[]; projectId: string; workspace: string;
+  activeSurfaceId: string | null; onSelectSurface: (id: string) => void;
+}) {
+  if (surfaces.length === 0) {
+    return (
+      <Placeholder icon="◌" title="No design surfaces yet" desc="Add design surfaces from the Design page to configure your web app, marketing site, or admin panel." />
+    );
+  }
+  const active = surfaces.find(s => s.id === activeSurfaceId) ?? surfaces[0];
+  return (
+    <div style={{ flex: 1, display: "flex", flexDirection: "column", padding: "24px 28px", gap: 20 }}>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+        <div style={{ fontSize: "0.68rem", fontWeight: 700, color: "#a09a90", letterSpacing: "0.08em", textTransform: "uppercase", fontFamily: "Outfit, sans-serif" }}>Layouts</div>
+        <Link href={`/${workspace}/project/${projectId}/design?surface=${active?.id ?? ""}`} style={{ fontSize: "0.72rem", color: "#a09a90", textDecoration: "none", fontFamily: "Outfit, sans-serif" }}>Edit in Design →</Link>
+      </div>
+      <div style={{ display: "flex", gap: 14, flexWrap: "wrap" }}>
+        {surfaces.map(s => (
+          <div key={s.id} onClick={() => onSelectSurface(s.id)} style={{
+            background: active?.id === s.id ? "#fff" : "#faf8f5",
+            border: `1px solid ${active?.id === s.id ? "#1a1a1a" : "#e8e4dc"}`,
+            borderRadius: 10, padding: "16px 20px", cursor: "pointer",
+            minWidth: 180, flex: "1 1 180px", maxWidth: 240,
+            transition: "border-color 0.1s",
           }}>
-      <div style={{
+            <div style={{ fontSize: "0.85rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "Outfit, sans-serif", marginBottom: 4 }}>
-        width: 48, height: 48, borderRadius: 12, background: "#f0ece4",
+              {SURFACE_LABELS[s.id] ?? s.id}
-        display: "flex", alignItems: "center", justifyContent: "center",
-        fontSize: "1.4rem", color: "#b5b0a6",
-      }}>▢</div>
-      <div style={{ textAlign: "center" }}>
-        <div style={{ fontSize: "0.88rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 6 }}>
-          Select an app to browse
             </div>
-        <div style={{ fontSize: "0.78rem", color: "#a09a90", maxWidth: 260, lineHeight: 1.5 }}>
+            {s.lockedTheme ? (
-          Choose one of your apps from the Build section in the left sidebar to explore its files.
+              <div style={{ fontSize: "0.72rem", color: "#6b6560", fontFamily: "Outfit, sans-serif" }}>Theme: {s.lockedTheme}</div>
+            ) : (
+              <div style={{ fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif", fontStyle: "italic" }}>Not configured</div>
+            )}
           </div>
+        ))}
+      </div>
+      <div style={{ fontSize: "0.75rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>
+        Click a surface to select it, then open the Design editor to configure themes, fonts, and components.
       </div>
     </div>
   );
 }
 
-// ── Inner page (needs useSearchParams) ───────────────────────────────────────
+// ── Code content (file browser) ───────────────────────────────────────────────
-
-function BuildPageInner() {
-  const params = useParams();
-  const searchParams = useSearchParams();
-  const projectId = params.projectId as string;
-  const { status: authStatus } = useSession();
-
-  // Which app the user clicked (from sidebar link)
-  const appName = searchParams.get("app") ?? "";
-  const rootPath = searchParams.get("root") ?? "";
 
+function CodeContent({ projectId, appName, rootPath }: { projectId: string; appName: string; rootPath: string }) {
+  const { status } = useSession();
   const [tree, setTree] = useState<TreeNode[]>([]);
   const [treeLoading, setTreeLoading] = useState(false);
-  const [treeError, setTreeError] = useState<string | null>(null);
   const [selectedPath, setSelectedPath] = useState<string | null>(null);
   const [fileContent, setFileContent] = useState<string | null>(null);
   const [fileLoading, setFileLoading] = useState(false);
@@ -178,219 +223,93 @@ function BuildPageInner() {
   const fetchDir = useCallback(async (path: string): Promise<TreeNode[]> => {
     const res = await fetch(`/api/projects/${projectId}/file?path=${encodeURIComponent(path)}`);
     const data = await res.json();
-    if (!res.ok) throw new Error(data.error ?? "Failed to load");
+    if (!res.ok) throw new Error(data.error);
     const items: FileItem[] = data.items ?? [];
-    return items
+    return items.filter(i => i.type !== "symlink")
-      .filter(item => item.type !== "symlink")
+      .sort((a, b) => a.type === "dir" && b.type !== "dir" ? -1 : a.type !== "dir" && b.type === "dir" ? 1 : a.name.localeCompare(b.name))
-      .sort((a, b) => {
+      .map(i => ({ name: i.name, path: i.path, type: i.type === "dir" ? "dir" : "file", expanded: false, loaded: i.type !== "dir", children: i.type === "dir" ? [] : undefined }));
-        if (a.type === "dir" && b.type !== "dir") return -1;
-        if (a.type !== "dir" && b.type === "dir") return 1;
-        return a.name.localeCompare(b.name);
-      })
-      .map(item => ({
-        name: item.name,
-        path: item.path,
-        type: item.type === "dir" ? "dir" : "file",
-        expanded: false,
-        loaded: item.type !== "dir",
-        children: item.type === "dir" ? [] : undefined,
-      }));
   }, [projectId]);
 
-  // Load the app's root dir whenever app changes
   useEffect(() => {
-    if (!rootPath || authStatus !== "authenticated") return;
+    if (!rootPath || status !== "authenticated") return;
-    setTree([]);
+    setTree([]); setSelectedPath(null); setFileContent(null); setTreeLoading(true);
-    setSelectedPath(null);
+    fetchDir(rootPath).then(nodes => { setTree(nodes); setTreeLoading(false); }).catch(() => setTreeLoading(false));
-    setFileContent(null);
+  }, [rootPath, status, fetchDir]);
-    setTreeError(null);
-    setTreeLoading(true);
-    fetchDir(rootPath)
-      .then(nodes => { setTree(nodes); setTreeLoading(false); })
-      .catch(e => { setTreeError(e.message); setTreeLoading(false); });
-  }, [rootPath, authStatus, fetchDir]);
 
-  // Toggle dir expand/collapse with lazy-load
   const handleToggle = useCallback(async (path: string) => {
     setTree(prev => {
-      const toggle = (nodes: TreeNode[]): TreeNode[] =>
+      const toggle = (nodes: TreeNode[]): TreeNode[] => nodes.map(n => n.path === path ? { ...n, expanded: !n.expanded } : n.children ? { ...n, children: toggle(n.children) } : n);
-        nodes.map(n => {
-          if (n.path === path) return { ...n, expanded: !n.expanded };
-          if (n.children) return { ...n, children: toggle(n.children) };
-          return n;
-        });
       return toggle(prev);
     });
-
+    const findNode = (nodes: TreeNode[], p: string): TreeNode | null => { for (const n of nodes) { if (n.path === p) return n; if (n.children) { const f = findNode(n.children, p); if (f) return f; } } return null; };
-    const findNode = (nodes: TreeNode[], p: string): TreeNode | null => {
-      for (const n of nodes) {
-        if (n.path === p) return n;
-        if (n.children) { const f = findNode(n.children, p); if (f) return f; }
-      }
-      return null;
-    };
-
     const node = findNode(tree, path);
     if (node && !node.loaded) {
-      try {
+      const children = await fetchDir(path).catch(() => []);
-        const children = await fetchDir(path);
       setTree(prev => {
-          const update = (nodes: TreeNode[]): TreeNode[] =>
+        const update = (nodes: TreeNode[]): TreeNode[] => nodes.map(n => n.path === path ? { ...n, children, loaded: true } : n.children ? { ...n, children: update(n.children) } : n);
-            nodes.map(n => {
-              if (n.path === path) return { ...n, children, loaded: true };
-              if (n.children) return { ...n, children: update(n.children) };
-              return n;
-            });
         return update(prev);
       });
-      } catch { /* silently fail */ }
     }
   }, [tree, fetchDir]);
 
-  // Select a file and load its content
   const handleSelectFile = useCallback(async (path: string) => {
-    setSelectedPath(path);
+    setSelectedPath(path); setFileContent(null); setFileName(path.split("/").pop() ?? null); setFileLoading(true);
-    setFileContent(null);
-    setFileName(path.split("/").pop() ?? null);
-    setFileLoading(true);
     try {
       const res = await fetch(`/api/projects/${projectId}/file?path=${encodeURIComponent(path)}`);
       const data = await res.json();
       setFileContent(data.content ?? "");
-    } catch {
+    } catch { setFileContent("// Failed to load"); }
-      setFileContent("// Failed to load file content");
+    finally { setFileLoading(false); }
-    } finally {
-      setFileLoading(false);
-    }
   }, [projectId]);
 
   const lang = fileName ? langFromName(fileName) : "text";
   const lines = (fileContent ?? "").split("\n");
 
-  if (!appName || !rootPath) {
+  if (!appName) {
-    return <EmptyState />;
+    return (
+      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center", flexDirection: "column", gap: 12, padding: 40, textAlign: "center" }}>
+        <div style={{ width: 48, height: 48, borderRadius: 12, background: "#f0ece4", display: "flex", alignItems: "center", justifyContent: "center", fontSize: "1.3rem", color: "#b5b0a6" }}>▢</div>
+        <div>
+          <div style={{ fontSize: "0.88rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 6, fontFamily: "Outfit, sans-serif" }}>Select an app</div>
+          <div style={{ fontSize: "0.78rem", color: "#a09a90", maxWidth: 240, lineHeight: 1.5, fontFamily: "Outfit, sans-serif" }}>Choose an app from the left to browse its source files.</div>
+        </div>
+      </div>
+    );
   }
 
   return (
-    <div style={{ display: "flex", height: "100%", overflow: "hidden" }}>
+    <div style={{ flex: 1, display: "flex", overflow: "hidden" }}>
-
+      {/* File tree */}
-      {/* ── File tree ── */}
+      <div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "hidden" }}>
-      <div style={{
+        <div style={{ padding: "10px 12px 8px", borderBottom: "1px solid #e8e4dc", display: "flex", alignItems: "center", gap: 6, flexShrink: 0 }}>
-        width: 230, flexShrink: 0,
+          <span style={{ fontSize: "0.7rem", color: "#a09a90" }}>▢</span>
-        borderRight: "1px solid #e8e4dc",
+          <span style={{ fontSize: "0.76rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "Outfit, sans-serif" }}>{appName}</span>
-        background: "#faf8f5",
-        display: "flex", flexDirection: "column",
-        overflow: "hidden",
-      }}>
-        {/* App name header */}
-        <div style={{
-          padding: "11px 14px 10px",
-          borderBottom: "1px solid #e8e4dc",
-          display: "flex", alignItems: "center", gap: 8, flexShrink: 0,
-        }}>
-          <span style={{ fontSize: "0.72rem", color: "#a09a90" }}>▢</span>
-          <span style={{ fontSize: "0.78rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "Outfit, sans-serif" }}>
-            {appName}
-          </span>
         </div>
-
+        <div style={{ flex: 1, overflow: "auto", padding: "4px" }}>
-        {/* Tree */}
+          {treeLoading && <div style={{ padding: "12px", fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>Loading…</div>}
-        <div style={{ flex: 1, overflow: "auto", padding: "6px 4px" }}>
+          {!treeLoading && tree.length === 0 && <div style={{ padding: "12px", fontSize: "0.72rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>Empty.</div>}
-          {treeLoading && (
+          {tree.map(n => <TreeRow key={n.path} node={n} depth={0} selectedPath={selectedPath} onSelect={handleSelectFile} onToggle={handleToggle} />)}
-            <div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>Loading…</div>
-          )}
-          {treeError && (
-            <div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#e53e3e", fontFamily: "Outfit, sans-serif" }}>{treeError}</div>
-          )}
-          {!treeLoading && !treeError && tree.length === 0 && (
-            <div style={{ padding: "16px 14px", fontSize: "0.75rem", color: "#b5b0a6", fontFamily: "Outfit, sans-serif" }}>Empty folder.</div>
-          )}
-          {tree.map(node => (
-            <TreeRow
-              key={node.path}
-              node={node}
-              depth={0}
-              selectedPath={selectedPath}
-              onSelect={handleSelectFile}
-              onToggle={handleToggle}
-            />
-          ))}
         </div>
       </div>
-
+      {/* Code viewer */}
-      {/* ── Code preview ── */}
+      <div style={{ flex: 1, display: "flex", flexDirection: "column", background: "#1e1e1e", overflow: "hidden" }}>
-      <div style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0, background: "#1e1e1e", overflow: "hidden" }}>
+        <div style={{ padding: "9px 18px", borderBottom: "1px solid #2d2d2d", background: "#252526", display: "flex", alignItems: "center", gap: 8, flexShrink: 0 }}>
-
-        {/* Breadcrumb bar */}
-        <div style={{
-          padding: "10px 20px",
-          borderBottom: "1px solid #2d2d2d",
-          background: "#252526",
-          display: "flex", alignItems: "center", gap: 8, flexShrink: 0,
-        }}>
           {selectedPath ? (
-            <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem", color: "#a09a90" }}>
+            <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.71rem", color: "#a09a90" }}>
-              {/* Show path relative to rootPath */}
+              {(() => { const rel = selectedPath.startsWith(rootPath + "/") ? selectedPath.slice(rootPath.length + 1) : selectedPath; return rel.split("/").map((s, i, a) => <span key={i}>{i > 0 && <span style={{ color: "#555", margin: "0 3px" }}>/</span>}<span style={{ color: i === a.length - 1 ? "#d4d4d4" : "#888" }}>{s}</span></span>); })()}
-              {(() => {
-                const rel = selectedPath.startsWith(rootPath + "/")
-                  ? selectedPath.slice(rootPath.length + 1)
-                  : selectedPath;
-                return rel.split("/").map((seg, i, arr) => (
-                  <span key={i}>
-                    {i > 0 && <span style={{ color: "#555", margin: "0 4px" }}>/</span>}
-                    <span style={{ color: i === arr.length - 1 ? "#d4d4d4" : "#888" }}>{seg}</span>
             </span>
-                ));
+          ) : <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.71rem", color: "#555" }}>Select a file</span>}
-              })()}
+          {fileName && <span style={{ marginLeft: "auto", fontFamily: "IBM Plex Mono, monospace", fontSize: "0.62rem", color: "#555", textTransform: "uppercase" }}>{lang}</span>}
-            </span>
-          ) : (
-            <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem", color: "#555" }}>
-              Select a file to view
-            </span>
-          )}
-          {fileName && (
-            <span style={{ marginLeft: "auto", fontFamily: "IBM Plex Mono, monospace", fontSize: "0.63rem", color: "#555", textTransform: "uppercase" }}>
-              {lang}
-            </span>
-          )}
         </div>
-
-        {/* Code area */}
         <div style={{ flex: 1, overflow: "auto", display: "flex" }}>
-          {!selectedPath && !fileLoading && (
+          {!selectedPath && !fileLoading && <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.78rem", fontFamily: "IBM Plex Mono, monospace" }}>Select a file to view</div>}
-            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.8rem", fontFamily: "IBM Plex Mono, monospace" }}>
+          {fileLoading && <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.78rem", fontFamily: "IBM Plex Mono, monospace" }}>Loading…</div>}
-              Select a file from the tree
-            </div>
-          )}
-          {fileLoading && (
-            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", width: "100%", color: "#555", fontSize: "0.8rem", fontFamily: "IBM Plex Mono, monospace" }}>
-              Loading…
-            </div>
-          )}
           {!fileLoading && fileContent !== null && (
-            <div style={{ display: "flex", width: "100%", overflow: "auto" }}>
+            <div style={{ display: "flex", width: "100%" }}>
-              {/* Line numbers */}
+              <div style={{ padding: "14px 0", background: "#1e1e1e", borderRight: "1px solid #2d2d2d", textAlign: "right", userSelect: "none", flexShrink: 0, minWidth: 40 }}>
-              <div style={{
+                {lines.map((_, i) => <div key={i} style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.71rem", lineHeight: "1.4em", color: "#555", padding: "0 10px 0 6px" }}>{i + 1}</div>)}
-                padding: "16px 0", background: "#1e1e1e",
-                borderRight: "1px solid #2d2d2d",
-                textAlign: "right", userSelect: "none", flexShrink: 0, minWidth: 44,
-              }}>
-                {lines.map((_, i) => (
-                  <div key={i} style={{
-                    fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem",
-                    lineHeight: "1.4em", color: "#555", padding: "0 12px 0 8px",
-                  }}>
-                    {i + 1}
               </div>
-                ))}
+              <div style={{ padding: "14px 22px", fontFamily: "IBM Plex Mono, monospace", fontSize: "0.71rem", lineHeight: "1.4em", color: "#d4d4d4", flex: 1, whiteSpace: "pre", overflow: "auto" }}>
-              </div>
-              {/* Code */}
-              <div style={{
-                padding: "16px 24px",
-                fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem",
-                lineHeight: "1.4em", color: "#d4d4d4",
-                flex: 1, whiteSpace: "pre", overflow: "auto",
-              }}>
                 {highlightCode(fileContent, lang)}
               </div>
             </div>
@@ -401,12 +320,100 @@ function BuildPageInner() {
   );
 }
 
-// ── Page export (Suspense wraps useSearchParams) ──────────────────────────────
+// ── Main Build hub ────────────────────────────────────────────────────────────
+
+function BuildHubInner() {
+  const params = useParams();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const projectId = params.projectId as string;
+  const workspace = params.workspace as string;
+
+  const section = searchParams.get("section") ?? "code";
+  const activeApp = searchParams.get("app") ?? "";
+  const activeRoot = searchParams.get("root") ?? "";
+  const activeInfra = searchParams.get("tab") ?? "builds";
+  const activeSurfaceParam = searchParams.get("surface") ?? "";
+
+  const [apps, setApps] = useState<AppEntry[]>([]);
+  const [surfaces, setSurfaces] = useState<SurfaceEntry[]>([]);
+  const [activeSurfaceId, setActiveSurfaceId] = useState<string>(activeSurfaceParam);
+
+  useEffect(() => {
+    fetch(`/api/projects/${projectId}/apps`).then(r => r.json()).then(d => setApps(d.apps ?? [])).catch(() => {});
+    fetch(`/api/projects/${projectId}/design-surfaces`).then(r => r.json()).then(d => {
+      const ids: string[] = d.surfaces ?? [];
+      const themes: Record<string, string> = d.surfaceThemes ?? {};
+      setSurfaces(ids.map(id => ({ id, label: SURFACE_LABELS[id] ?? id, lockedTheme: themes[id] })));
+      if (!activeSurfaceId && ids.length > 0) setActiveSurfaceId(ids[0]);
+    }).catch(() => {});
+  }, [projectId]);
+
+  const navigate = (params: Record<string, string>) => {
+    const sp = new URLSearchParams({ section, ...params });
+    router.push(`/${workspace}/project/${projectId}/build?${sp.toString()}`, { scroll: false });
+  };
+
+  const setSection = (s: string) => router.push(`/${workspace}/project/${projectId}/build?section=${s}`, { scroll: false });
+
+  return (
+    <div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif", overflow: "hidden" }}>
+
+      {/* ── Left nav ── */}
+      <div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "auto" }}>
+
+        {/* Code group */}
+        <div style={NAV_GROUP_LABEL}>Code</div>
+        {apps.length > 0 ? apps.map(app => (
+          <NavItem key={app.name} label={app.name} indent
+            active={section === "code" && activeApp === app.name}
+            onClick={() => navigate({ section: "code", app: app.name, root: app.path })}
+          />
+        )) : (
+          <NavItem label="No apps yet" indent active={section === "code" && !activeApp} onClick={() => setSection("code")} />
+        )}
+
+        {/* Layouts group */}
+        <div style={{ ...NAV_GROUP_LABEL, marginTop: 8 }}>Layouts</div>
+        {surfaces.length > 0 ? surfaces.map(s => (
+          <NavItem key={s.id} label={SURFACE_LABELS[s.id] ?? s.id} indent
+            active={section === "layouts" && activeSurfaceId === s.id}
+            onClick={() => { setActiveSurfaceId(s.id); navigate({ section: "layouts", surface: s.id }); }}
+          />
+        )) : (
+          <NavItem label="Not configured" indent active={section === "layouts"} onClick={() => setSection("layouts")} />
+        )}
+
+        {/* Infrastructure group */}
+        <div style={{ ...NAV_GROUP_LABEL, marginTop: 8 }}>Infrastructure</div>
+        {INFRA_ITEMS.map(item => (
+          <NavItem key={item.id} label={item.label} indent
+            active={section === "infrastructure" && activeInfra === item.id}
+            onClick={() => navigate({ section: "infrastructure", tab: item.id })}
+          />
+        ))}
+      </div>
+
+      {/* ── Content ── */}
+      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", minWidth: 0 }}>
+        {section === "code" && (
+          <CodeContent projectId={projectId} appName={activeApp} rootPath={activeRoot} />
+        )}
+        {section === "layouts" && (
+          <LayoutsContent surfaces={surfaces} projectId={projectId} workspace={workspace} activeSurfaceId={activeSurfaceId} onSelectSurface={id => { setActiveSurfaceId(id); navigate({ section: "layouts", surface: id }); }} />
+        )}
+        {section === "infrastructure" && (
+          <InfraContent tab={activeInfra} projectId={projectId} workspace={workspace} />
+        )}
+      </div>
+    </div>
+  );
+}
 
 export default function BuildPage() {
   return (
     <Suspense fallback={<div style={{ display: "flex", height: "100%", alignItems: "center", justifyContent: "center", color: "#a09a90", fontFamily: "Outfit, sans-serif", fontSize: "0.85rem" }}>Loading…</div>}>
-      <BuildPageInner />
+      <BuildHubInner />
     </Suspense>
   );
 }

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

@@ -0,0 +1,144 @@
+"use client";
+
+import { Suspense } from "react";
+import { useParams, useSearchParams, useRouter } from "next/navigation";
+
+const SECTIONS = [
+  {
+    id: "marketing-site",
+    label: "Marketing Site",
+    icon: "◌",
+    title: "Marketing Site",
+    desc: "Your public-facing website — hero, features, pricing, blog, and landing pages. Connected to your design surface and deployed via your infrastructure.",
+    items: ["Hero & Landing", "Features", "Pricing Page", "Blog", "Case Studies", "About"],
+  },
+  {
+    id: "communications",
+    label: "Communications",
+    icon: "◈",
+    title: "Communications",
+    desc: "Outbound messaging — product announcements, newsletters, launch emails, and drip campaigns sent to your audience.",
+    items: ["Announcements", "Newsletter", "Launch Sequence", "Drip Campaigns"],
+  },
+  {
+    id: "channels",
+    label: "Channels",
+    icon: "↗",
+    title: "Distribution Channels",
+    desc: "Where your product gets discovered — SEO, social, Product Hunt, app stores, partnerships, and paid acquisition.",
+    items: ["SEO & Search", "Social Media", "Product Hunt", "App Stores", "Partnerships", "Paid Ads"],
+  },
+  {
+    id: "pages",
+    label: "Pages",
+    icon: "▭",
+    title: "Pages",
+    desc: "Individual landing pages for campaigns, experiments, and specific audience segments. Build, publish, and A/B test.",
+    items: ["Campaign Pages", "A/B Tests", "Event Pages", "Partner Pages", "Waitlist"],
+  },
+] as const;
+
+type SectionId = typeof SECTIONS[number]["id"];
+
+const NAV_GROUP: React.CSSProperties = {
+  fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6",
+  letterSpacing: "0.09em", textTransform: "uppercase",
+  padding: "14px 12px 6px", fontFamily: "Outfit, sans-serif",
+};
+
+function GrowthInner() {
+  const params = useParams();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const workspace = params.workspace as string;
+  const projectId = params.projectId as string;
+
+  const activeId = (searchParams.get("section") ?? "marketing-site") as SectionId;
+  const active = SECTIONS.find(s => s.id === activeId) ?? SECTIONS[0];
+
+  const setSection = (id: string) =>
+    router.push(`/${workspace}/project/${projectId}/growth?section=${id}`, { scroll: false });
+
+  return (
+    <div style={{ display: "flex", height: "100%", fontFamily: "Outfit, sans-serif", overflow: "hidden" }}>
+
+      {/* Left nav */}
+      <div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "auto" }}>
+        <div style={NAV_GROUP}>Growth</div>
+        {SECTIONS.map(s => {
+          const isActive = activeId === s.id;
+          return (
+            <button key={s.id} onClick={() => setSection(s.id)} style={{
+              display: "flex", alignItems: "center", gap: 8, width: "100%", textAlign: "left",
+              background: isActive ? "#f0ece4" : "transparent", border: "none", cursor: "pointer",
+              padding: "6px 12px", borderRadius: 5,
+              fontSize: "0.78rem", fontWeight: isActive ? 600 : 440,
+              color: isActive ? "#1a1a1a" : "#5a5550",
+            }}
+              onMouseEnter={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "#f6f4f0"; }}
+              onMouseLeave={e => { if (!isActive) (e.currentTarget as HTMLElement).style.background = "transparent"; }}
+            >
+              <span style={{ fontSize: "0.65rem", opacity: 0.55, width: 14, textAlign: "center" }}>{s.icon}</span>
+              {s.label}
+            </button>
+          );
+        })}
+      </div>
+
+      {/* Content */}
+      <div style={{ flex: 1, overflow: "auto", display: "flex", flexDirection: "column" }}>
+        <div style={{ padding: "28px 32px", maxWidth: 800 }}>
+          <div style={{ marginBottom: 24 }}>
+            <div style={{ fontSize: "1.1rem", fontWeight: 700, color: "#1a1a1a", marginBottom: 6 }}>{active.title}</div>
+            <div style={{ fontSize: "0.82rem", color: "#6b6560", lineHeight: 1.65, maxWidth: 520 }}>{active.desc}</div>
+          </div>
+
+          {/* Feature items */}
+          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 12, marginBottom: 32 }}>
+            {active.items.map(item => (
+              <div key={item} style={{
+                background: "#fff", border: "1px solid #e8e4dc", borderRadius: 9,
+                padding: "14px 16px", display: "flex", alignItems: "center", justifyContent: "space-between",
+              }}>
+                <span style={{ fontSize: "0.8rem", fontWeight: 500, color: "#1a1a1a" }}>{item}</span>
+                <span style={{ fontSize: "0.65rem", color: "#c5c0b8", background: "#f6f4f0", padding: "2px 7px", borderRadius: 4 }}>Soon</span>
+              </div>
+            ))}
+          </div>
+
+          {/* CTA */}
+          <div style={{
+            background: "linear-gradient(135deg, #1a1a1a 0%, #2d2820 100%)",
+            borderRadius: 12, padding: "24px 28px",
+            display: "flex", alignItems: "center", justifyContent: "space-between",
+            gap: 20,
+          }}>
+            <div>
+              <div style={{ fontSize: "0.85rem", fontWeight: 600, color: "#fff", marginBottom: 4 }}>
+                {active.title} is coming to VIBN
+              </div>
+              <div style={{ fontSize: "0.75rem", color: "#8a8478", lineHeight: 1.5 }}>
+                We&apos;re building this section next. Shape it by telling us what you need.
+              </div>
+            </div>
+            <button style={{
+              background: "#d4a04a", color: "#fff", border: "none", borderRadius: 8,
+              padding: "9px 20px", fontSize: "0.78rem", fontWeight: 600,
+              cursor: "pointer", whiteSpace: "nowrap", flexShrink: 0,
+            }}>
+              Give feedback
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function GrowthPage() {
+  return (
+    <Suspense fallback={<div style={{ display: "flex", height: "100%", alignItems: "center", justifyContent: "center", color: "#a09a90", fontFamily: "Outfit, sans-serif", fontSize: "0.85rem" }}>Loading…</div>}>
+      <GrowthInner />
+    </Suspense>
+  );
+}

components/layout/project-shell.tsx

@@ -25,12 +25,10 @@ interface ProjectShellProps {
 const ALL_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: "Launch",   path: "deployment" },
+  { id: "growth",     label: "Growth",    path: "growth" },
-  { id: "grow",       label: "Grow",     path: "grow" },
+  { id: "assist",     label: "Assist",    path: "assist" },
-  { id: "insights",   label: "Insights", path: "insights" },
+  { id: "analytics",  label: "Analytics", path: "analytics" },
-  { id: "settings",   label: "Settings", path: "settings" },
 ];
 
 function getTabsForMode(
@@ -41,7 +39,7 @@ function getTabsForMode(
       return ALL_TABS.filter(t => t.id !== "prd");
     case "migration":
       return ALL_TABS
-        .filter(t => !["prd", "grow", "insights"].includes(t.id))
+        .filter(t => t.id !== "prd")
         .map(t => t.id === "overview" ? { ...t, label: "Migration Plan" } : t);
     default:
       return ALL_TABS;