Revert "fix(gitea-bot): add write:organization scope so bot can create repos"

This reverts commit 6f79a88abd.

Made-with: Cursor

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

@@ -3,15 +3,7 @@
 import { Suspense, useState, useEffect, useCallback, useRef } from "react";
 import { useParams, useSearchParams, useRouter } from "next/navigation";
 import { useSession } from "next-auth/react";
-import { isClientDevProjectBypass } from "@/lib/dev-bypass";
 import Link from "next/link";
-import { JM } from "@/components/project-creation/modal-theme";
-import { AtlasChat } from "@/components/AtlasChat";
-import { PRD_PLAN_SECTIONS } from "@/lib/prd-sections";
-import {
-  type ChatContextRef,
-  contextRefKey,
-} from "@/lib/chat-context-refs";
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -25,6 +17,15 @@ interface TreeNode {
 
 // ── 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",
 };
@@ -32,74 +33,6 @@ const SURFACE_ICONS: Record<string, string> = {
   webapp: "◈", marketing: "◌", admin: "◫",
 };
 
-/** Growth page–style left rail: cream panel, icon + label rows */
-const BUILD_LEFT_BG = "#faf8f5";
-const BUILD_LEFT_BORDER = "#e8e4dc";
-
-const BUILD_NAV_GROUP: React.CSSProperties = {
-  fontSize: "0.6rem",
-  fontWeight: 700,
-  color: "#b5b0a6",
-  letterSpacing: "0.09em",
-  textTransform: "uppercase",
-  padding: "14px 12px 6px",
-  fontFamily: JM.fontSans,
-};
-
-const BUILD_PRIMARY = [
-  { id: "chat", label: "Chat", icon: "◆" },
-  { id: "code", label: "Code", icon: "◇" },
-  { id: "layouts", label: "Layouts", icon: "◈" },
-  { id: "tasks", label: "Agent", icon: "◎" },
-  { id: "preview", label: "Preview", icon: "▢" },
-] as const;
-
-function BuildGrowthNavRow({
-  icon,
-  label,
-  active,
-  onClick,
-}: {
-  icon: string;
-  label: string;
-  active: boolean;
-  onClick: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      style={{
-        display: "flex",
-        alignItems: "center",
-        gap: 8,
-        width: "100%",
-        textAlign: "left",
-        background: active ? "#f0ece4" : "transparent",
-        border: "none",
-        cursor: "pointer",
-        padding: "6px 12px",
-        borderRadius: 5,
-        fontSize: "0.78rem",
-        fontWeight: active ? 600 : 440,
-        color: active ? "#1a1a1a" : "#5a5550",
-        fontFamily: JM.fontSans,
-      }}
-      onMouseEnter={e => {
-        if (!active) (e.currentTarget as HTMLElement).style.background = "#f6f4f0";
-      }}
-      onMouseLeave={e => {
-        if (!active) (e.currentTarget as HTMLElement).style.background = "transparent";
-      }}
-    >
-      <span style={{ fontSize: "0.65rem", opacity: 0.55, width: 14, textAlign: "center", flexShrink: 0 }}>
-        {icon}
-      </span>
-      {label}
-    </button>
-  );
-}
-
 // ── Language / syntax helpers ─────────────────────────────────────────────────
 
 function langFromName(name: string): string {
@@ -170,11 +103,28 @@ function TreeRow({ node, depth, selectedPath, onSelect, onToggle }: {
 // ── Left nav shared styles ────────────────────────────────────────────────────
 
 const NAV_GROUP_LABEL: React.CSSProperties = {
-  fontSize: "0.6rem", fontWeight: 700, color: JM.muted,
+  fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6",
   letterSpacing: "0.09em", textTransform: "uppercase",
-  padding: "12px 12px 5px", fontFamily: JM.fontSans,
+  padding: "12px 12px 5px", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
 };
 
+function NavItem({ label, active, onClick, indent = false }: { label: string; active: boolean; onClick: () => void; indent?: boolean }) {
+  return (
+    <button onClick={onClick} style={{
+      display: "flex", alignItems: "center", gap: 7, width: "100%", textAlign: "left",
+      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: "var(--font-inter), ui-sans-serif, 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 }) {
@@ -190,6 +140,30 @@ function Placeholder({ icon, title, desc }: { icon: string; title: string; desc:
   );
 }
 
+// ── 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: "var(--font-inter), ui-sans-serif, sans-serif" }}>{tab}</div>
+        <Link href={`${base}?tab=${tab}`} style={{ fontSize: "0.72rem", color: "#a09a90", textDecoration: "none", fontFamily: "var(--font-inter), ui-sans-serif, 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 }: {
@@ -982,8 +956,7 @@ function FileTree({ projectId, rootPath, selectedPath, onSelectFile }: {
   }, [projectId]);
 
   useEffect(() => {
-    if (!rootPath) return;
-    if (!isClientDevProjectBypass() && status !== "authenticated") return;
+    if (!rootPath || status !== "authenticated") return;
     setTree([]); setTreeLoading(true);
     fetchDir(rootPath).then(nodes => { setTree(nodes); setTreeLoading(false); }).catch(() => setTreeLoading(false));
   }, [rootPath, status, fetchDir]);
@@ -1073,6 +1046,21 @@ interface PreviewApp { name: string; url: string | null; status: string; }
 
 // ── PRD Content ───────────────────────────────────────────────────────────────
 
+const PRD_SECTIONS = [
+  { id: "executive_summary",    label: "Executive Summary",           phaseId: "big_picture" },
+  { id: "problem_statement",    label: "Problem Statement",           phaseId: "big_picture" },
+  { id: "vision_metrics",       label: "Vision & Success Metrics",    phaseId: "big_picture" },
+  { id: "users_personas",       label: "Users & Personas",            phaseId: "users_personas" },
+  { id: "user_flows",           label: "User Flows",                  phaseId: "users_personas" },
+  { id: "feature_requirements", label: "Feature Requirements",        phaseId: "features_scope" },
+  { id: "screen_specs",         label: "Screen Specs",                phaseId: "screens_data" },
+  { id: "business_model",       label: "Business Model",              phaseId: "business_model" },
+  { id: "integrations",         label: "Integrations & Dependencies", phaseId: "features_scope" },
+  { id: "non_functional",       label: "Non-Functional Reqs",         phaseId: null },
+  { id: "risks",                label: "Risks & Mitigations",         phaseId: "risks_questions" },
+  { id: "open_questions",       label: "Open Questions",              phaseId: "risks_questions" },
+];
+
 interface SavedPhase { phase: string; title: string; summary: string; data: Record<string, unknown>; saved_at: string; }
 
 function PrdContent({ projectId }: { projectId: string }) {
@@ -1098,7 +1086,7 @@ function PrdContent({ projectId }: { projectId: string }) {
 
   const phaseMap = new Map(savedPhases.map(p => [p.phase, p]));
   const savedPhaseIds = new Set(savedPhases.map(p => p.phase));
-  const sections = PRD_PLAN_SECTIONS.map(s => ({
+  const sections = PRD_SECTIONS.map(s => ({
     ...s,
     savedPhase: s.phaseId ? phaseMap.get(s.phaseId) ?? null : null,
     isDone: s.phaseId ? savedPhaseIds.has(s.phaseId) : false,
@@ -1284,11 +1272,10 @@ function BuildHubInner() {
   const projectId = params.projectId as string;
   const workspace = params.workspace as string;
 
-  const section = searchParams.get("section") ?? "chat";
-  const tasksSubTabRaw = searchParams.get("tab") ?? "tasks";
-  const tasksSubTab = tasksSubTabRaw === "prd" ? "requirements" : tasksSubTabRaw;
+  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[]>([]);
@@ -1305,32 +1292,6 @@ function BuildHubInner() {
   const [fileLoading, setFileLoading] = useState(false);
   const [fileName, setFileName] = useState<string | null>(null);
 
-  const [chatContextRefs, setChatContextRefs] = useState<ChatContextRef[]>([]);
-
-  const addAppToChat = useCallback((app: AppEntry) => {
-    setChatContextRefs(prev => {
-      const next: ChatContextRef = { kind: "app", label: app.name, path: app.path };
-      const k = contextRefKey(next);
-      if (prev.some(r => contextRefKey(r) === k)) return prev;
-      return [...prev, next];
-    });
-  }, []);
-
-  const removeChatContextRef = useCallback((key: string) => {
-    setChatContextRefs(prev => prev.filter(r => contextRefKey(r) !== key));
-  }, []);
-
-  useEffect(() => {
-    if (searchParams.get("section") !== "infrastructure") return;
-    const t = searchParams.get("tab") ?? "builds";
-    router.replace(`/${workspace}/project/${projectId}/run?tab=${encodeURIComponent(t)}`, { scroll: false });
-  }, [searchParams, workspace, projectId, router]);
-
-  useEffect(() => {
-    if (searchParams.get("section") !== "mvp") return;
-    router.replace(`/${workspace}/project/${projectId}/mvp-setup/launch`, { scroll: false });
-  }, [searchParams, workspace, projectId, router]);
-
   useEffect(() => {
     fetch(`/api/projects/${projectId}/preview-url`)
       .then(r => r.json())
@@ -1375,114 +1336,82 @@ function BuildHubInner() {
     router.push(`/${workspace}/project/${projectId}/build?${sp.toString()}`, { scroll: false });
   };
 
-  const workspaceAppActive = (app: AppEntry) => {
-    if (section === "chat") {
-      return chatContextRefs.some(r => r.kind === "app" && r.path === app.path);
-    }
-    if (section === "code" || (section === "tasks" && tasksSubTab !== "requirements")) {
-      return activeApp === app.name;
-    }
-    return false;
-  };
-
-  const onWorkspaceApp = (app: AppEntry) => {
-    if (section === "chat") addAppToChat(app);
-    else if (section === "code") navigate({ section: "code", app: app.name, root: app.path });
-    else if (section === "tasks" && tasksSubTab !== "requirements") {
-      navigate({ section: "tasks", tab: "tasks", app: app.name, root: app.path });
-    }
-    else navigate({ section: "code", app: app.name, root: app.path });
-  };
-
   return (
-    <div style={{ display: "flex", height: "100%", fontFamily: JM.fontSans, overflow: "hidden", background: JM.inputBg }}>
-      {/* Growth-style left rail */}
-      <div style={{
-        width: 200,
-        flexShrink: 0,
-        borderRight: `1px solid ${BUILD_LEFT_BORDER}`,
-        background: BUILD_LEFT_BG,
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden",
-      }}>
-        <div style={BUILD_NAV_GROUP}>Build</div>
-        {BUILD_PRIMARY.map(p => (
-          <BuildGrowthNavRow
-            key={p.id}
-            icon={p.icon}
-            label={p.label}
-            active={section === p.id}
-            onClick={() => {
-              if (p.id === "tasks") navigate({ section: "tasks", tab: "tasks" });
-              else navigate({ section: p.id });
-            }}
-          />
-        ))}
+    <div style={{ display: "flex", height: "100%", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", overflow: "hidden" }}>
 
-        <div style={{
-          flex: 1,
-          minHeight: 0,
-          overflowY: "auto",
-          borderTop: `1px solid ${BUILD_LEFT_BORDER}`,
-          marginTop: 6,
-          paddingTop: 4,
-        }}>
-          {section === "chat" && (
-            <div style={{ padding: "8px 12px 12px", fontSize: 11, color: JM.mid, lineHeight: 1.45, fontFamily: JM.fontSans }}>
-              Attach monorepo apps from <strong style={{ fontWeight: 600 }}>Workspace</strong> below. Live preview stays on the right when deployed.
-            </div>
-          )}
+      {/* ── Build content ── */}
+      <div style={{ flex: 1, display: "flex", overflow: "hidden", minWidth: 0 }}>
 
-          {section === "code" && activeApp && activeRoot && (
-            <div style={{ display: "flex", flexDirection: "column", paddingBottom: 10, borderBottom: `1px solid ${BUILD_LEFT_BORDER}`, marginBottom: 8 }}>
-              <div style={NAV_GROUP_LABEL}>Files</div>
-              <div style={{
-                padding: "2px 12px 6px",
-                fontSize: "0.62rem",
-                color: JM.mid,
-                fontFamily: "IBM Plex Mono, monospace",
-                overflow: "hidden",
-                textOverflow: "ellipsis",
-                whiteSpace: "nowrap",
-              }}>
-                {activeApp}
+        {/* Inner nav — contextual items driven by top-bar tool icon */}
+        <div style={{ width: 200, flexShrink: 0, borderRight: "1px solid #e8e4dc", background: "#faf8f5", display: "flex", flexDirection: "column", overflow: "hidden" }}>
+
+          {/* Code: app list + file tree */}
+          {section === "code" && (
+            <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
+              <div style={{ flexShrink: 0 }}>
+                <div style={NAV_GROUP_LABEL}>Apps</div>
+                {apps.length > 0 ? apps.map(app => (
+                  <NavItem key={app.name} label={app.name} indent
+                    active={activeApp === app.name}
+                    onClick={() => navigate({ section: "code", app: app.name, root: app.path })}
+                  />
+                )) : (
+                  <div style={{ padding: "8px 22px", fontSize: "0.74rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>No apps yet</div>
+                )}
               </div>
-              <div style={{ flex: 1, minHeight: 0, maxHeight: 280, overflow: "auto" }}>
-                <FileTree projectId={projectId} rootPath={activeRoot} selectedPath={selectedFilePath} onSelectFile={handleSelectFile} />
-              </div>
-            </div>
-          )}
-
-          {section === "layouts" && (
-            <div style={{ paddingBottom: 8 }}>
-              <div style={NAV_GROUP_LABEL}>Surfaces</div>
-              {surfaces.length > 0 ? surfaces.map(s => (
-                <BuildGrowthNavRow
-                  key={s.id}
-                  icon={SURFACE_ICONS[s.id] ?? "◈"}
-                  label={SURFACE_LABELS[s.id] ?? s.id}
-                  active={activeSurfaceId === s.id}
-                  onClick={() => { setActiveSurfaceId(s.id); navigate({ section: "layouts", surface: s.id }); }}
-                />
-              )) : (
-                <div style={{ padding: "8px 12px", fontSize: "0.74rem", color: JM.muted, fontFamily: JM.fontSans }}>Not configured</div>
+              {activeApp && activeRoot && (
+                <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", borderTop: "1px solid #e8e4dc", marginTop: 6 }}>
+                  <div style={{ padding: "7px 12px 4px", flexShrink: 0, display: "flex", alignItems: "center", gap: 6 }}>
+                    <span style={{ fontSize: "0.57rem", fontWeight: 700, color: "#b5b0a6", letterSpacing: "0.1em", textTransform: "uppercase", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Files</span>
+                    <span style={{ fontSize: "0.62rem", color: "#a09a90", fontFamily: "IBM Plex Mono, monospace", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{activeApp}</span>
+                  </div>
+                  <FileTree projectId={projectId} rootPath={activeRoot} selectedPath={selectedFilePath} onSelectFile={handleSelectFile} />
+                </div>
               )}
             </div>
           )}
 
+          {/* Layouts: surface list */}
+          {section === "layouts" && (
+            <div style={{ overflow: "auto", flex: 1 }}>
+              <div style={NAV_GROUP_LABEL}>Surfaces</div>
+              {surfaces.length > 0 ? surfaces.map(s => (
+                <NavItem key={s.id} label={SURFACE_LABELS[s.id] ?? s.id} indent
+                  active={activeSurfaceId === s.id}
+                  onClick={() => { setActiveSurfaceId(s.id); navigate({ section: "layouts", surface: s.id }); }}
+                />
+              )) : (
+                <div style={{ padding: "8px 22px", fontSize: "0.74rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>Not configured</div>
+              )}
+            </div>
+          )}
+
+          {/* Infrastructure: item list */}
+          {section === "infrastructure" && (
+            <div style={{ overflow: "auto", flex: 1 }}>
+              <div style={NAV_GROUP_LABEL}>Infrastructure</div>
+              {INFRA_ITEMS.map(item => (
+                <NavItem key={item.id} label={item.label} indent
+                  active={activeInfra === item.id}
+                  onClick={() => navigate({ section: "infrastructure", tab: item.id })}
+                />
+              ))}
+            </div>
+          )}
+
+          {/* Tasks: sub-nav + app list */}
           {section === "tasks" && (
-            <div style={{ paddingBottom: 8 }}>
-              <div style={{ padding: "8px 10px", borderBottom: `1px solid ${BUILD_LEFT_BORDER}`, display: "flex", gap: 4, marginBottom: 8 }}>
-                {[{ id: "tasks", label: "Runs" }, { id: "requirements", label: "Requirements" }].map(item => {
-                  const isActive = tasksSubTab === item.id;
+            <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
+              {/* Tasks | PRD sub-nav */}
+              <div style={{ flexShrink: 0, padding: "8px 10px", borderBottom: "1px solid #e8e4dc", display: "flex", gap: 4 }}>
+                {[{ id: "tasks", label: "Tasks" }, { id: "prd", label: "PRD" }].map(item => {
+                  const isActive = (searchParams.get("tab") ?? "tasks") === item.id;
                   return (
-                    <button key={item.id} type="button" onClick={() => navigate({ section: "tasks", tab: item.id })} style={{
+                    <button key={item.id} onClick={() => navigate({ section: "tasks", tab: item.id })} style={{
                       flex: 1, padding: "5px 0", border: "none", borderRadius: 6, cursor: "pointer",
-                      fontSize: "0.72rem", fontWeight: 600, fontFamily: JM.fontSans,
-                      background: isActive ? JM.primaryGradient : "transparent",
-                      color: isActive ? "#fff" : JM.mid,
-                      boxShadow: isActive ? JM.primaryShadow : "none",
+                      fontSize: "0.72rem", fontWeight: 600, fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
+                      background: isActive ? "#1a1a1a" : "transparent",
+                      color: isActive ? "#fff" : "#a09a90",
                       transition: "all 0.12s",
                     }}>
                       {item.label}
@@ -1490,106 +1419,40 @@ function BuildHubInner() {
                   );
                 })}
               </div>
+              {/* App list (only in tasks tab) */}
+              {(searchParams.get("tab") ?? "tasks") !== "prd" && (
+                <>
+                  <div style={NAV_GROUP_LABEL}>Apps</div>
+                  {apps.length > 0 ? apps.map(app => (
+                    <NavItem key={app.name} label={app.name} indent
+                      active={activeApp === app.name}
+                      onClick={() => navigate({ section: "tasks", tab: "tasks", app: app.name, root: app.path })}
+                    />
+                  )) : (
+                    <div style={{ padding: "8px 22px", fontSize: "0.74rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>No apps yet</div>
+                  )}
+                </>
+              )}
             </div>
           )}
 
+          {/* Preview: deployed apps list */}
           {section === "preview" && (
-            <div style={{ paddingBottom: 8 }}>
-              <div style={NAV_GROUP_LABEL}>Deployed</div>
+            <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
+              <div style={NAV_GROUP_LABEL}>Apps</div>
               {previewApps.length > 0 ? previewApps.map(app => (
-                <BuildGrowthNavRow
-                  key={app.name}
-                  icon="▢"
-                  label={app.name}
+                <NavItem key={app.name} label={app.name} indent
                   active={activePreviewApp?.name === app.name}
                   onClick={() => setActivePreviewApp(app)}
                 />
               )) : (
-                <div style={{ padding: "8px 12px", fontSize: "0.74rem", color: JM.muted, fontFamily: JM.fontSans }}>No deployments yet</div>
+                <div style={{ padding: "8px 22px", fontSize: "0.74rem", color: "#b5b0a6", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>No deployments yet</div>
               )}
             </div>
           )}
         </div>
 
-        <div style={{ flexShrink: 0, borderTop: `1px solid ${BUILD_LEFT_BORDER}`, paddingBottom: 10, background: BUILD_LEFT_BG }}>
-          {apps.length > 0 && (
-            <>
-              <div style={BUILD_NAV_GROUP}>Workspace</div>
-              {apps.map(app => (
-                <BuildGrowthNavRow
-                  key={app.name}
-                  icon="◈"
-                  label={app.name}
-                  active={workspaceAppActive(app)}
-                  onClick={() => onWorkspaceApp(app)}
-                />
-              ))}
-            </>
-          )}
-          {section === "chat" && previewApps.length > 0 && (
-            <>
-              <div style={BUILD_NAV_GROUP}>Live</div>
-              {previewApps.map(app => (
-                <BuildGrowthNavRow
-                  key={`live-${app.name}`}
-                  icon="▢"
-                  label={app.name}
-                  active={activePreviewApp?.name === app.name}
-                  onClick={() => setActivePreviewApp(app)}
-                />
-              ))}
-            </>
-          )}
-          <Link
-            href={`/${workspace}/project/${projectId}/tasks`}
-            style={{
-              display: "block",
-              margin: "10px 12px 0",
-              fontSize: 12,
-              fontWeight: 600,
-              color: JM.indigo,
-              textDecoration: "none",
-              fontFamily: JM.fontSans,
-            }}
-          >
-            Open Tasks →
-          </Link>
-        </div>
-      </div>
-
-      {/* Main content */}
-      <div style={{ flex: 1, display: "flex", overflow: "hidden", minWidth: 0 }}>
-        {section === "chat" && (
-          <div style={{ flex: 1, display: "flex", minWidth: 0, overflow: "hidden" }}>
-            <div style={{ flex: 1, minWidth: 0, minHeight: 0 }}>
-              <AtlasChat
-                projectId={projectId}
-                conversationScope="build"
-                contextEmptyLabel="Workspace"
-                emptyStateHint="Plan and implement in your monorepo. Attach apps from the left, preview on the right when deployed."
-                chatContextRefs={chatContextRefs}
-                onRemoveChatContextRef={removeChatContextRef}
-              />
-            </div>
-            <div style={{
-              width: 400,
-              flexShrink: 0,
-              minWidth: 280,
-              borderLeft: `1px solid ${JM.border}`,
-              display: "flex",
-              flexDirection: "column",
-              overflow: "hidden",
-              background: JM.inputBg,
-            }}>
-              <PreviewContent
-                projectId={projectId}
-                apps={previewApps}
-                activePreviewApp={activePreviewApp}
-                onSelectApp={setActivePreviewApp}
-              />
-            </div>
-          </div>
-        )}
+        {/* Main content panel */}
         {section === "code" && (
           <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>
             <FileViewer
@@ -1605,10 +1468,13 @@ function BuildHubInner() {
         {section === "layouts" && (
           <LayoutsContent surfaces={surfaces} projectId={projectId} workspace={workspace} activeSurfaceId={activeSurfaceId} onSelectSurface={id => { setActiveSurfaceId(id); navigate({ section: "layouts", surface: id }); }} />
         )}
-        {section === "tasks" && tasksSubTab !== "requirements" && (
+        {section === "infrastructure" && (
+          <InfraContent tab={activeInfra} projectId={projectId} workspace={workspace} />
+        )}
+        {section === "tasks" && (searchParams.get("tab") ?? "tasks") !== "prd" && (
           <AgentMode projectId={projectId} appName={activeApp} appPath={activeRoot} />
         )}
-        {section === "tasks" && tasksSubTab === "requirements" && (
+        {section === "tasks" && searchParams.get("tab") === "prd" && (
           <PrdContent projectId={projectId} />
         )}
         {section === "preview" && (
@@ -1626,7 +1492,7 @@ function BuildHubInner() {
 
 export default function BuildPage() {
   return (
-    <Suspense fallback={<div style={{ display: "flex", height: "100%", alignItems: "center", justifyContent: "center", color: JM.muted, fontFamily: JM.fontSans, fontSize: "0.85rem" }}>Loading…</div>}>
+    <Suspense fallback={<div style={{ display: "flex", height: "100%", alignItems: "center", justifyContent: "center", color: "#a09a90", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", fontSize: "0.85rem" }}>Loading…</div>}>
       <BuildHubInner />
     </Suspense>
   );