Rip out Theia, ship P5.1 attach E2E + Justine UI work-in-progress

Theia rip-out: - Delete app/api/theia-auth/route.ts (Traefik ForwardAuth shim) - Delete app/api/projects/[projectId]/workspace/route.ts and app/api/projects/prewarm/route.ts (Cloud Run Theia provisioning) - Delete lib/cloud-run-workspace.ts and lib/coolify-workspace.ts - Strip provisionTheiaWorkspace + theiaWorkspaceUrl/theiaAppUuid/ theiaError from app/api/projects/create/route.ts response - Remove Theia callbackUrl branch in app/auth/page.tsx - Drop "Open in Theia" button + xterm/Theia PTY copy in build/page.tsx - Drop theiaWorkspaceUrl from deployment/page.tsx Project type - Strip Theia IDE line + theia-code-os from advisor + agent-chat context strings - Scrub Theia mention from lib/auth/workspace-auth.ts comment P5.1 (custom apex domains + DNS): - lib/coolify.ts + lib/opensrs.ts: nameserver normalization, OpenSRS XML auth, Cloud DNS plumbing - scripts/smoke-attach-e2e.ts: full prod GCP + sandbox OpenSRS + prod Coolify smoke covering register/zone/A/NS/PATCH/cleanup In-progress (Justine onboarding/build, MVP setup, agent telemetry): - New (justine)/stories, project (home) layouts, mvp-setup, run, tasks routes + supporting components - Project shell + sidebar + nav refactor for the Stackless palette - Agent session API hardening (sessions, events, stream, approve, retry, stop) + atlas-chat, advisor, design-surfaces refresh - New scripts/sync-db-url-from-coolify.mjs + scripts/prisma-db-push.mjs + docker-compose.local-db.yml for local Prisma workflows - lib/dev-bypass.ts, lib/chat-context-refs.ts, lib/prd-sections.ts - Misc: stories CSS, debug/prisma route, modal-theme, BuildLivePlanPanel Made-with: Cursor
2026-04-22 18:05:01 -07:00
parent d6c87a052e
commit 651ddf1e11
105 changed files with 7509 additions and 2319 deletions
--- a/components/project-main/BuildLivePlanPanel.tsx
+++ b/components/project-main/BuildLivePlanPanel.tsx
@@ -0,0 +1,286 @@
+"use client";
+
+import Link from "next/link";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { JM, JV } from "@/components/project-creation/modal-theme";
+import { PRD_PLAN_SECTIONS, isSectionFilled } from "@/lib/prd-sections";
+import {
+  type ChatContextRef,
+  contextRefKey,
+} from "@/lib/chat-context-refs";
+
+interface SavedPhase {
+  phase: string;
+  title: string;
+  summary: string;
+  data: Record<string, unknown>;
+  saved_at: string;
+}
+
+export function BuildLivePlanPanel({
+  projectId,
+  workspace,
+  chatContextRefs,
+  onAddSectionRef,
+  compactHeader,
+}: {
+  projectId: string;
+  workspace: string;
+  chatContextRefs: ChatContextRef[];
+  onAddSectionRef: (label: string, phaseId: string | null) => void;
+  /** When true, hide subtitle to save space in narrow tabs */
+  compactHeader?: boolean;
+}) {
+  const [prdText, setPrdText] = useState<string | null>(null);
+  const [savedPhases, setSavedPhases] = useState<SavedPhase[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  const refresh = useCallback(() => {
+    Promise.all([
+      fetch(`/api/projects/${projectId}`).then(r => r.json()).catch(() => ({})),
+      fetch(`/api/projects/${projectId}/save-phase`).then(r => r.json()).catch(() => ({ phases: [] })),
+    ]).then(([projectData, phaseData]) => {
+      setPrdText(projectData?.project?.prd ?? null);
+      setSavedPhases(phaseData?.phases ?? []);
+      setLoading(false);
+    });
+  }, [projectId]);
+
+  useEffect(() => {
+    refresh();
+    const t = setInterval(refresh, 8000);
+    return () => clearInterval(t);
+  }, [refresh]);
+
+  const savedPhaseIds = useMemo(() => new Set(savedPhases.map(p => p.phase)), [savedPhases]);
+  const phaseMap = useMemo(() => new Map(savedPhases.map(p => [p.phase, p])), [savedPhases]);
+
+  const rows = useMemo(() => {
+    let firstOpenIndex = -1;
+    const list = PRD_PLAN_SECTIONS.map((s, index) => {
+      const done = isSectionFilled(s.phaseId, savedPhaseIds);
+      if (!done && firstOpenIndex < 0) firstOpenIndex = index;
+      return {
+        ...s,
+        done,
+        active: !done && index === firstOpenIndex,
+        pending: !done && index > firstOpenIndex,
+        savedPhase: s.phaseId ? phaseMap.get(s.phaseId) ?? null : null,
+      };
+    });
+    return list;
+  }, [savedPhaseIds, phaseMap]);
+
+  const doneCount = rows.filter(r => r.done).length;
+  const tasksHref = `/${workspace}/project/${projectId}/tasks`;
+
+  const attached = useCallback(
+    (label: string) => chatContextRefs.some(r => r.kind === "section" && r.label === label),
+    [chatContextRefs]
+  );
+
+  if (loading) {
+    return (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: JV.prdPanelBg,
+          color: JM.muted,
+          fontSize: 13,
+          fontFamily: JM.fontSans,
+        }}
+      >
+        Loading plan…
+      </div>
+    );
+  }
+
+  if (prdText) {
+    return (
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          background: JV.prdPanelBg,
+          borderLeft: `1px solid ${JM.border}`,
+          fontFamily: JM.fontSans,
+        }}
+      >
+        <div style={{ padding: "16px 16px 12px", borderBottom: `1px solid ${JM.border}`, flexShrink: 0 }}>
+          <div style={{ fontSize: 10.5, fontWeight: 700, color: JM.muted, textTransform: "uppercase", letterSpacing: "0.06em" }}>
+            Your plan
+          </div>
+          <div style={{ fontSize: 15, fontWeight: 700, color: JM.ink, marginTop: 4 }}>PRD ready</div>
+          {!compactHeader && (
+            <div style={{ fontSize: 12, color: JM.muted, marginTop: 4, lineHeight: 1.45 }}>
+              Full document saved — open Task to edit or keep refining in chat.
+            </div>
+          )}
+        </div>
+        <div style={{ flex: 1, padding: 16, overflow: "auto" }}>
+          <Link
+            href={tasksHref}
+            style={{
+              display: "block",
+              textAlign: "center",
+              padding: "11px 14px",
+              borderRadius: 10,
+              background: JM.primaryGradient,
+              color: "#fff",
+              fontSize: 13,
+              fontWeight: 600,
+              textDecoration: "none",
+              boxShadow: JM.primaryShadow,
+            }}
+          >
+            View full PRD →
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        height: "100%",
+        background: JV.prdPanelBg,
+        borderLeft: `1px solid ${JM.border}`,
+        fontFamily: JM.fontSans,
+        minWidth: 0,
+      }}
+    >
+      <style>{`
+        @keyframes buildPlanFadeUp {
+          from { opacity: 0; transform: translateY(6px); }
+          to { opacity: 1; transform: translateY(0); }
+        }
+      `}</style>
+      <div style={{ padding: "16px 16px 10px", borderBottom: `1px solid ${JM.border}`, flexShrink: 0 }}>
+        <div style={{ fontSize: 10.5, fontWeight: 700, color: JM.muted, textTransform: "uppercase", letterSpacing: "0.06em" }}>
+          Your plan
+        </div>
+        <div style={{ fontSize: 15, fontWeight: 700, color: JM.ink, marginTop: 4 }}>Fills as you chat</div>
+        {!compactHeader && (
+          <div style={{ fontSize: 12, color: JM.muted, marginTop: 4, lineHeight: 1.45 }}>
+            Tap a section to attach it — your next message prioritizes it.
+          </div>
+        )}
+        <div style={{ display: "flex", alignItems: "center", gap: 10, marginTop: 12 }}>
+          <div style={{ fontSize: 22, fontWeight: 700, color: JM.indigo, minWidth: 40 }}>{Math.round((doneCount / rows.length) * 100)}%</div>
+          <div style={{ flex: 1 }}>
+            <div style={{ height: 4, borderRadius: 2, background: "#e0e7ff" }}>
+              <div
+                style={{
+                  height: "100%",
+                  borderRadius: 2,
+                  width: `${(doneCount / rows.length) * 100}%`,
+                  background: JM.primaryGradient,
+                  transition: "width 0.5s ease",
+                }}
+              />
+            </div>
+          </div>
+          <span style={{ fontSize: 11, color: JM.muted, whiteSpace: "nowrap" }}>
+            {doneCount}/{rows.length}
+          </span>
+        </div>
+      </div>
+
+      <div style={{ flex: 1, overflowY: "auto", padding: "12px 14px 8px" }}>
+        {rows.map((r, i) => {
+          const isAttached = attached(r.label);
+          const hint = r.done && r.savedPhase?.summary
+            ? r.savedPhase.summary.slice(0, 120) + (r.savedPhase.summary.length > 120 ? "…" : "")
+            : r.active
+              ? "Answer in chat — this block updates when the phase saves."
+              : "Tap to attach — chat uses this section as context.";
+
+          return (
+            <button
+              key={r.id}
+              type="button"
+              onClick={() => onAddSectionRef(r.label, r.phaseId)}
+              style={{
+                display: "block",
+                width: "100%",
+                textAlign: "left",
+                padding: "11px 12px",
+                marginBottom: 8,
+                borderRadius: 9,
+                border: r.active ? `1px solid ${JV.bubbleAiBorder}` : `1px solid ${JM.border}`,
+                borderLeftWidth: r.active ? 3 : 1,
+                borderLeftColor: r.active ? JM.indigo : JM.border,
+                background: r.active ? "#fafaff" : r.done ? "#fff" : "#fff",
+                opacity: r.pending && !r.done ? 0.55 : 1,
+                borderStyle: r.pending && !r.done ? "dashed" : "solid",
+                cursor: "pointer",
+                boxShadow: r.active ? "0 0 0 3px rgba(99,102,241,0.08), 0 2px 12px rgba(99,102,241,0.07)" : "0 1px 8px rgba(99,102,241,0.05)",
+                animation: `buildPlanFadeUp 0.35s ease ${i * 0.02}s both`,
+                fontFamily: JM.fontSans,
+              }}
+            >
+              <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 8 }}>
+                <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: "0.06em", textTransform: "uppercase", color: r.done ? JM.mid : JM.muted }}>
+                  {r.label}
+                </div>
+                <div style={{ display: "flex", alignItems: "center", gap: 4, flexShrink: 0 }}>
+                  {r.done && <span style={{ fontSize: 10, color: JM.indigo, fontWeight: 700 }}>✓</span>}
+                  {isAttached && <span style={{ fontSize: 9, fontWeight: 600, color: JM.indigo, background: JV.violetTint, padding: "2px 6px", borderRadius: 4 }}>Attached</span>}
+                </div>
+              </div>
+              <div style={{ fontSize: 12, lineHeight: 1.5, color: r.done ? JM.ink : JM.muted, marginTop: 4 }}>{hint}</div>
+            </button>
+          );
+        })}
+      </div>
+
+      <div
+        style={{
+          flexShrink: 0,
+          padding: "10px 14px 14px",
+          borderTop: `1px solid ${JM.border}`,
+          display: "flex",
+          flexDirection: "column",
+          gap: 8,
+          alignItems: "stretch",
+        }}
+      >
+        <Link
+          href={tasksHref}
+          style={{
+            textAlign: "center",
+            padding: "10px 14px",
+            borderRadius: 9,
+            fontSize: 13,
+            fontWeight: 600,
+            color: JM.indigo,
+            background: "#eef2ff",
+            border: `1px solid ${JV.bubbleAiBorder}`,
+            textDecoration: "none",
+          }}
+        >
+          Open requirements view
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+export function addSectionContextRef(
+  prev: ChatContextRef[],
+  label: string,
+  phaseId: string | null
+): ChatContextRef[] {
+  const next: ChatContextRef = { kind: "section", label, phaseId };
+  const k = contextRefKey(next);
+  if (prev.some(r => contextRefKey(r) === k)) return prev;
+  return [...prev, next];
+}
--- a/components/project-main/BuildMvpJustineV2.tsx
+++ b/components/project-main/BuildMvpJustineV2.tsx
--- a/components/project-main/ChatImportMain.tsx
+++ b/components/project-main/ChatImportMain.tsx
@@ -140,8 +140,8 @@ export function ChatImportMain({
    }
  };

-  const handlePRD = () => router.push(`/${workspace}/project/${projectId}/prd`);
-  const handleMVP = () => router.push(`/${workspace}/project/${projectId}/build`);
+  const handlePRD = () => router.push(`/${workspace}/project/${projectId}/tasks`);
+  const handleMVP = () => router.push(`/${workspace}/project/${projectId}/mvp-setup/launch`);

  // ── Stage: intake ─────────────────────────────────────────────────────────
  if (stage === "intake") {
@@ -320,7 +320,7 @@ export function ChatImportMain({
              onMouseEnter={e => (e.currentTarget.style.background = "rgba(255,255,255,0.08)")}
              onMouseLeave={e => (e.currentTarget.style.background = "transparent")}
            >
-              Plan MVP Test →
+              Plan MVP →
            </button>
          </div>
        </div>
--- a/components/project-main/FreshIdeaMain.tsx
+++ b/components/project-main/FreshIdeaMain.tsx
@@ -1,9 +1,15 @@
 "use client";

-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
 import { AtlasChat } from "@/components/AtlasChat";
 import { useRouter, useParams } from "next/navigation";
 import Link from "next/link";
+import { ArrowUpDown, Filter, LayoutPanelLeft, Search } from "lucide-react";
+import { JM, JV } from "@/components/project-creation/modal-theme";
+import {
+  type ChatContextRef,
+  contextRefKey,
+} from "@/lib/chat-context-refs";

 const DISCOVERY_PHASES = [
  "big_picture",
@@ -12,7 +18,16 @@ const DISCOVERY_PHASES = [
  "business_model",
  "screens_data",
  "risks_questions",
-];
+] as const;
+
+const PHASE_DISPLAY: Record<string, string> = {
+  big_picture: "Big picture",
+  users_personas: "Users & personas",
+  features_scope: "Features & scope",
+  business_model: "Business model",
+  screens_data: "Screens & data",
+  risks_questions: "Risks & questions",
+};

 // Maps discovery phases → the PRD sections they populate
 const PRD_SECTIONS: { label: string; phase: string | null }[] = [
@@ -30,6 +45,17 @@ const PRD_SECTIONS: { label: string; phase: string | null }[] = [
  { label: "Open Questions",            phase: "risks_questions" },
 ];

+type SidebarTab = "tasks" | "phases";
+type GroupBy = "none" | "phase" | "status";
+
+function sectionDone(
+  phase: string | null,
+  savedPhaseIds: Set<string>,
+  allDone: boolean
+): boolean {
+  return phase === null ? allDone : savedPhaseIds.has(phase);
+}
+
 interface FreshIdeaMainProps {
  projectId: string;
  projectName: string;
@@ -45,6 +71,35 @@ export function FreshIdeaMain({ projectId, projectName }: FreshIdeaMainProps) {
  const [prdLoading, setPrdLoading] = useState(false);
  const [dismissed, setDismissed] = useState(false);
  const [hasPrd, setHasPrd] = useState(false);
+  const [sidebarTab, setSidebarTab] = useState<SidebarTab>("tasks");
+  const [sectionSearch, setSectionSearch] = useState("");
+  const [phaseScope, setPhaseScope] = useState<string>("all");
+  const [groupBy, setGroupBy] = useState<GroupBy>("none");
+  const [pendingOnly, setPendingOnly] = useState(false);
+  const [sortAlpha, setSortAlpha] = useState(false);
+  const [chatContextRefs, setChatContextRefs] = useState<ChatContextRef[]>([]);
+
+  const addSectionToChat = useCallback((label: string, phase: string | null) => {
+    setChatContextRefs(prev => {
+      const next: ChatContextRef = { kind: "section", label, phaseId: phase };
+      const k = contextRefKey(next);
+      if (prev.some(r => contextRefKey(r) === k)) return prev;
+      return [...prev, next];
+    });
+  }, []);
+
+  const addPhaseToChat = useCallback((phaseId: string, label: string) => {
+    setChatContextRefs(prev => {
+      const next: ChatContextRef = { kind: "phase", phaseId, label };
+      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(() => {
    // Check if PRD already exists on the project
@@ -73,14 +128,14 @@ export function FreshIdeaMain({ projectId, projectName }: FreshIdeaMainProps) {
    if (prdLoading) return;
    setPrdLoading(true);
    try {
-      router.push(`/${workspace}/project/${projectId}/prd`);
+      router.push(`/${workspace}/project/${projectId}/tasks`);
    } finally {
      setPrdLoading(false);
    }
  };

  const handleMVP = () => {
-    router.push(`/${workspace}/project/${projectId}/build`);
+    router.push(`/${workspace}/project/${projectId}/mvp-setup/launch`);
  };

  // PRD exists — show a thin notice bar at the top, then keep the chat fully accessible
@@ -90,29 +145,57 @@ export function FreshIdeaMain({ projectId, projectName }: FreshIdeaMainProps) {
  ).length;
  const totalSections = PRD_SECTIONS.length;

-  return (
-    <div style={{ height: "100%", display: "flex", flexDirection: "row", overflow: "hidden" }}>
+  const filteredSections = useMemo(() => {
+    const q = sectionSearch.trim().toLowerCase();
+    let rows = PRD_SECTIONS.map((s, index) => ({ ...s, index }));
+    if (q) {
+      rows = rows.filter(r => r.label.toLowerCase().includes(q));
+    }
+    if (phaseScope !== "all") {
+      rows = rows.filter(r => r.phase === phaseScope);
+    }
+    if (pendingOnly) {
+      rows = rows.filter(r => !sectionDone(r.phase, savedPhaseIds, allDone));
+    }
+    if (sortAlpha) {
+      rows = [...rows].sort((a, b) => a.label.localeCompare(b.label));
+    } else {
+      rows = [...rows].sort((a, b) => a.index - b.index);
+    }
+    return rows;
+  }, [sectionSearch, phaseScope, pendingOnly, sortAlpha, savedPhaseIds, allDone]);

-      {/* ── Left: Atlas chat ── */}
+  const effectiveGroupBy: GroupBy = sidebarTab === "phases" ? "phase" : groupBy;
+
+  return (
+    <div style={{
+      height: "100%", display: "flex", flexDirection: "row", overflow: "hidden",
+      fontFamily: JM.fontSans,
+    }}>
+
+      {/* ── Left: Atlas chat (Justine describe column) ── */}
      <div style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden", minWidth: 0 }}>

-        {/* PRD ready notice — replaces the decision banner once PRD is saved */}
        {hasPrd && (
          <div style={{
-            background: "#1a1a1a", padding: "10px 20px",
+            background: JM.primaryGradient,
+            boxShadow: JM.primaryShadow,
+            padding: "10px 20px",
            display: "flex", alignItems: "center", justifyContent: "space-between",
-            gap: 16, flexShrink: 0, borderBottom: "1px solid #333",
+            gap: 16, flexShrink: 0,
+            borderBottom: `1px solid rgba(255,255,255,0.12)`,
          }}>
-            <div style={{ fontSize: "0.8rem", color: "#e8e4dc", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
-              ✦ PRD saved — you can keep refining here or view the full document.
+            <div style={{ fontSize: 13, color: "rgba(255,255,255,0.92)", fontFamily: JM.fontSans }}>
+              ✦ PRD saved — keep refining here or open the full document.
            </div>
            <Link
-              href={`/${workspace}/project/${projectId}/prd`}
+              href={`/${workspace}/project/${projectId}/tasks`}
              style={{
-                padding: "6px 14px", borderRadius: 7,
-                background: "#fff", color: "#1a1a1a",
-                fontSize: "0.76rem", fontWeight: 600,
+                padding: "6px 14px", borderRadius: 8,
+                background: "#fff", color: JM.ink,
+                fontSize: 12, fontWeight: 600,
                textDecoration: "none", flexShrink: 0,
+                fontFamily: JM.fontSans,
              }}
            >
              View PRD →
@@ -120,151 +203,499 @@ export function FreshIdeaMain({ projectId, projectName }: FreshIdeaMainProps) {
          </div>
        )}

-        {/* Decision banner — shown when all 6 phases are saved but PRD not yet generated */}
        {allDone && !dismissed && !hasPrd && (
          <div style={{
-            background: "linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%)",
+            background: JM.primaryGradient,
+            boxShadow: JM.primaryShadow,
            padding: "14px 20px",
            display: "flex", alignItems: "center", justifyContent: "space-between",
            gap: 16, flexShrink: 0, flexWrap: "wrap",
-            borderBottom: "1px solid #333",
+            borderBottom: `1px solid rgba(255,255,255,0.12)`,
          }}>
            <div>
-              <div style={{ fontSize: "0.84rem", fontWeight: 700, color: "#fff", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", marginBottom: 2 }}>
+              <div style={{ fontSize: 14, fontWeight: 700, color: "#fff", fontFamily: JM.fontDisplay, marginBottom: 2 }}>
                ✦ Discovery complete — what&apos;s next?
              </div>
-              <div style={{ fontSize: "0.72rem", color: "#a09a90", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
-                All 6 phases captured. Generate your PRD or jump into Build.
+              <div style={{ fontSize: 12, color: "rgba(255,255,255,0.75)", fontFamily: JM.fontSans }}>
+                All 6 phases captured. Generate your PRD or open the MVP plan flow.
              </div>
            </div>
-            <div style={{ display: "flex", gap: 8, flexShrink: 0 }}>
+            <div style={{ display: "flex", gap: 8, flexShrink: 0, alignItems: "center" }}>
              <button
+                type="button"
                onClick={handleGeneratePRD}
                disabled={prdLoading}
                style={{
-                  padding: "8px 16px", borderRadius: 7, border: "none",
-                  background: "#fff", color: "#1a1a1a",
-                  fontSize: "0.8rem", fontWeight: 700,
-                  fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer",
-                  transition: "opacity 0.12s",
+                  padding: "8px 16px", borderRadius: 8, border: "none",
+                  background: "#fff", color: JM.ink,
+                  fontSize: 13, fontWeight: 700,
+                  fontFamily: JM.fontSans, cursor: "pointer",
                }}
-                onMouseEnter={e => (e.currentTarget.style.opacity = "0.88")}
-                onMouseLeave={e => (e.currentTarget.style.opacity = "1")}
              >
                {prdLoading ? "Navigating…" : "Generate PRD →"}
              </button>
              <button
+                type="button"
                onClick={handleMVP}
                style={{
-                  padding: "8px 16px", borderRadius: 7,
-                  border: "1px solid rgba(255,255,255,0.2)",
+                  padding: "8px 16px", borderRadius: 8,
+                  border: "1px solid rgba(255,255,255,0.35)",
                  background: "transparent", color: "#fff",
-                  fontSize: "0.8rem", fontWeight: 600,
-                  fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", cursor: "pointer",
+                  fontSize: 13, fontWeight: 600,
+                  fontFamily: JM.fontSans, cursor: "pointer",
                }}
              >
                Plan MVP →
              </button>
              <button
+                type="button"
                onClick={() => setDismissed(true)}
                style={{
                  background: "none", border: "none", cursor: "pointer",
-                  color: "#888", fontSize: "1rem", padding: "4px 6px",
+                  color: "rgba(255,255,255,0.55)", fontSize: 18, padding: "4px 6px",
                }}
                title="Dismiss"
-              >×</button>
+              >
+                ×
+              </button>
            </div>
          </div>
        )}

-        <AtlasChat projectId={projectId} projectName={projectName} />
+        <AtlasChat
+          projectId={projectId}
+          projectName={projectName}
+          chatContextRefs={chatContextRefs}
+          onRemoveChatContextRef={removeChatContextRef}
+        />
      </div>

-      {/* ── Right: PRD section tracker ── */}
+      {/* ── Right: Teams-style task rail (requirements = PRD sections as tasks) ── */}
      <div style={{
-        width: 240, flexShrink: 0,
-        background: "#faf8f5",
-        borderLeft: "1px solid #e8e4dc",
+        width: 348, flexShrink: 0,
+        background: "#F4F2FA",
+        borderLeft: `1px solid ${JM.border}`,
        display: "flex", flexDirection: "column",
        overflow: "hidden",
      }}>
-        {/* Header */}
+        {/* Tab bar */}
        <div style={{
-          padding: "14px 16px 10px",
-          borderBottom: "1px solid #e8e4dc",
+          display: "flex", alignItems: "center",
+          borderBottom: `1px solid ${JM.border}`,
          flexShrink: 0,
+          padding: "0 8px",
+          gap: 2,
+          background: "#FAF8FF",
        }}>
-          <div style={{ fontSize: "0.72rem", fontWeight: 700, color: "#1a1a1a", letterSpacing: "0.06em", textTransform: "uppercase", marginBottom: 6 }}>
-            PRD Sections
-          </div>
-          {/* Progress bar */}
-          <div style={{ height: 3, background: "#e8e4dc", borderRadius: 99, overflow: "hidden" }}>
-            <div style={{
-              height: "100%", borderRadius: 99,
-              background: "#1a1a1a",
-              width: `${Math.round((completedSections / totalSections) * 100)}%`,
-              transition: "width 0.4s ease",
-            }} />
-          </div>
-          <div style={{ fontSize: "0.68rem", color: "#a09a90", marginTop: 5 }}>
-            {completedSections} of {totalSections} sections complete
-          </div>
-        </div>
-
-        {/* Section list */}
-        <div style={{ flex: 1, overflowY: "auto", padding: "8px 0" }}>
-          {PRD_SECTIONS.map(({ label, phase }) => {
-            const isDone = phase === null
-              ? allDone  // non-functional reqs generated when all done
-              : savedPhaseIds.has(phase);
+          <span style={{ display: "flex", padding: "10px 6px", color: JM.muted }} title="Panel">
+            <LayoutPanelLeft size={16} strokeWidth={1.75} />
+          </span>
+          {([
+            { id: "tasks" as const, label: "Tasks" },
+            { id: "phases" as const, label: "Phases" },
+          ]).map(t => {
+            const active = sidebarTab === t.id;
            return (
-              <div
-                key={label}
+              <button
+                key={t.id}
+                type="button"
+                onClick={() => setSidebarTab(t.id)}
                style={{
-                  padding: "8px 16px",
-                  display: "flex", alignItems: "flex-start", gap: 10,
+                  padding: "10px 12px 8px",
+                  border: "none",
+                  background: "none",
+                  cursor: "pointer",
+                  fontSize: 13,
+                  fontWeight: active ? 600 : 500,
+                  color: active ? JM.ink : JM.muted,
+                  fontFamily: JM.fontSans,
+                  borderBottom: active ? `2px solid ${JM.indigo}` : "2px solid transparent",
+                  marginBottom: -1,
                }}
              >
-                {/* Status dot */}
-                <div style={{
-                  width: 8, height: 8, borderRadius: "50%", flexShrink: 0, marginTop: 4,
-                  background: isDone ? "#1a1a1a" : "transparent",
-                  border: isDone ? "none" : "1.5px solid #c8c4bc",
-                  transition: "all 0.3s",
-                }} />
-                <div style={{ minWidth: 0 }}>
-                  <div style={{
-                    fontSize: "0.78rem", fontWeight: isDone ? 600 : 400,
-                    color: isDone ? "#1a1a1a" : "#6b6560",
-                    lineHeight: 1.3,
-                  }}>
-                    {label}
-                  </div>
-                  {!isDone && (
-                    <div style={{ fontSize: "0.65rem", color: "#a09a90", marginTop: 2, lineHeight: 1.3 }}>
-                      Complete this phase in Vibn
-                    </div>
-                  )}
-                </div>
-              </div>
+                {t.label}
+              </button>
            );
          })}
        </div>

-        {/* Footer CTA */}
+        {/* Search + tools */}
+        <div style={{
+          display: "flex", alignItems: "center", gap: 8,
+          padding: "8px 10px",
+          borderBottom: `1px solid ${JM.border}`,
+          background: "#FAF8FF",
+        }}>
+          <Search size={15} strokeWidth={1.75} color={JM.muted} style={{ flexShrink: 0 }} />
+          <input
+            type="search"
+            value={sectionSearch}
+            onChange={e => setSectionSearch(e.target.value)}
+            placeholder="Search sections…"
+            aria-label="Search sections"
+            style={{
+              flex: 1, minWidth: 0,
+              border: "none", background: "transparent",
+              fontSize: 12, fontFamily: JM.fontSans,
+              color: JM.ink, outline: "none",
+            }}
+          />
+          <button
+            type="button"
+            title={sortAlpha ? "Sort: document order" : "Sort: A–Z"}
+            onClick={() => setSortAlpha(s => !s)}
+            style={{
+              border: "none", background: sortAlpha ? JV.violetTint : "transparent",
+              borderRadius: 6, padding: 6, cursor: "pointer", color: JM.mid,
+            }}
+          >
+            <ArrowUpDown size={15} strokeWidth={1.75} />
+          </button>
+          <button
+            type="button"
+            title={pendingOnly ? "Show all sections" : "Pending only"}
+            onClick={() => setPendingOnly(p => !p)}
+            style={{
+              border: "none", background: pendingOnly ? JV.violetTint : "transparent",
+              borderRadius: 6, padding: 6, cursor: "pointer", color: JM.mid,
+            }}
+          >
+            <Filter size={15} strokeWidth={1.75} />
+          </button>
+        </div>
+
+        {/* Scope + group (Tasks tab only shows group pills; Phases tab locks grouping) */}
+        <div style={{
+          padding: "8px 10px 10px",
+          borderBottom: `1px solid ${JM.border}`,
+          background: "#F7F5FC",
+        }}>
+          <select
+            value={phaseScope}
+            onChange={e => setPhaseScope(e.target.value)}
+            aria-label="Filter by discovery phase"
+            style={{
+              width: "100%",
+              padding: "8px 10px",
+              borderRadius: 8,
+              border: `1px solid ${JM.border}`,
+              background: "#fff",
+              fontSize: 12,
+              fontFamily: JM.fontSans,
+              color: JM.ink,
+              marginBottom: 8,
+              cursor: "pointer",
+            }}
+          >
+            <option value="all">All sections</option>
+            {DISCOVERY_PHASES.map(p => (
+              <option key={p} value={p}>{PHASE_DISPLAY[p]}</option>
+            ))}
+          </select>
+          {sidebarTab === "tasks" && (
+            <div style={{ display: "flex", alignItems: "center", gap: 6, flexWrap: "wrap" }}>
+              <span style={{ fontSize: 10, fontWeight: 600, color: JM.muted, fontFamily: JM.fontSans }}>
+                Group by
+              </span>
+              {([
+                { id: "none" as const, label: "None" },
+                { id: "phase" as const, label: "Phase" },
+                { id: "status" as const, label: "Status" },
+              ]).map(opt => {
+                const on = groupBy === opt.id;
+                return (
+                  <button
+                    key={opt.id}
+                    type="button"
+                    onClick={() => setGroupBy(opt.id)}
+                    style={{
+                      padding: "4px 10px",
+                      borderRadius: 999,
+                      border: `1px solid ${on ? JM.indigo : JM.border}`,
+                      background: on ? JV.violetTint : "#fff",
+                      fontSize: 11,
+                      fontWeight: on ? 600 : 500,
+                      color: on ? JM.indigo : JM.mid,
+                      fontFamily: JM.fontSans,
+                      cursor: "pointer",
+                    }}
+                  >
+                    {opt.label}
+                  </button>
+                );
+              })}
+            </div>
+          )}
+          {sidebarTab === "phases" && (
+            <div style={{ fontSize: 11, color: JM.muted, fontFamily: JM.fontSans }}>
+              Grouped by discovery phase
+            </div>
+          )}
+        </div>
+
+        {/* Progress summary */}
+        <div style={{
+          padding: "10px 12px",
+          borderBottom: `1px solid ${JM.border}`,
+          background: "#F4F2FA",
+          flexShrink: 0,
+        }}>
+          <div style={{ height: 3, background: "#E0E7FF", borderRadius: 99, overflow: "hidden" }}>
+            <div style={{
+              height: "100%", borderRadius: 99,
+              background: JM.primaryGradient,
+              width: `${Math.round((completedSections / totalSections) * 100)}%`,
+              transition: "width 0.4s ease",
+            }} />
+          </div>
+          <div style={{ fontSize: 10, color: JM.muted, marginTop: 6, fontFamily: JM.fontSans }}>
+            {completedSections} of {totalSections} sections · Requirements task
+          </div>
+          <div style={{ fontSize: 10, color: JM.indigo, marginTop: 5, fontFamily: JM.fontSans, opacity: 0.9 }}>
+            Click a section row or phase header to attach it to your next message.
+          </div>
+        </div>
+
+        {/* Task list */}
+        <div style={{ flex: 1, overflowY: "auto", background: "#F4F2FA" }}>
+          {(() => {
+            const rows = filteredSections;
+            if (rows.length === 0) {
+              return (
+                <div style={{
+                  padding: "28px 16px",
+                  textAlign: "center",
+                  fontSize: 12,
+                  color: JM.muted,
+                  fontFamily: JM.fontSans,
+                  lineHeight: 1.5,
+                }}>
+                  No sections match your search or filters.
+                </div>
+              );
+            }
+
+            const renderRow = (label: string, phase: string | null, key: string) => {
+              const isDone = sectionDone(phase, savedPhaseIds, allDone);
+              const phaseSlug = phase ? phase.replace(/_/g, "-") : "prd";
+              const phaseLine = phase ? PHASE_DISPLAY[phase] ?? phase : "PRD";
+              return (
+                <button
+                  key={key}
+                  type="button"
+                  title="Add this section to chat context for Vibn"
+                  onClick={() => addSectionToChat(label, phase)}
+                  style={{
+                    padding: "10px 12px",
+                    borderBottom: `1px solid rgba(229,231,235,0.85)`,
+                    borderTop: "none",
+                    borderLeft: "none",
+                    borderRight: "none",
+                    display: "flex", gap: 10, alignItems: "flex-start",
+                    background: isDone ? "rgba(237,233,254,0.55)" : "transparent",
+                    width: "100%",
+                    textAlign: "left",
+                    cursor: "pointer",
+                    font: "inherit",
+                  }}
+                >
+                  <div style={{
+                    width: 22, height: 22, borderRadius: "50%", flexShrink: 0, marginTop: 1,
+                    display: "flex", alignItems: "center", justifyContent: "center",
+                    fontSize: 11, fontWeight: 700,
+                    background: isDone ? JM.indigo : "#fff",
+                    border: isDone ? "none" : `1.5px solid ${JM.border}`,
+                    color: isDone ? "#fff" : "transparent",
+                    fontFamily: JM.fontSans,
+                  }}>
+                    {isDone ? "✓" : ""}
+                  </div>
+                  <div style={{ minWidth: 0, flex: 1 }}>
+                    <div style={{
+                      fontSize: 13,
+                      fontWeight: 600,
+                      color: JM.ink,
+                      lineHeight: 1.3,
+                      fontFamily: JM.fontSans,
+                    }}>
+                      {label}
+                    </div>
+                    <div style={{
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                      gap: 8,
+                      marginTop: 4,
+                    }}>
+                      <span style={{
+                        fontSize: 11,
+                        fontWeight: 500,
+                        color: JM.indigo,
+                        fontFamily: JM.fontSans,
+                      }}>
+                        {phaseSlug}
+                      </span>
+                      <span style={{
+                        fontSize: 10,
+                        fontWeight: 600,
+                        color: isDone ? "#059669" : JM.muted,
+                        fontFamily: JM.fontSans,
+                        textTransform: "uppercase",
+                        letterSpacing: "0.04em",
+                      }}>
+                        {isDone ? "Done" : "Pending"}
+                      </span>
+                    </div>
+                    <div style={{
+                      fontSize: 10,
+                      color: JM.muted,
+                      marginTop: 3,
+                      fontFamily: JM.fontSans,
+                      lineHeight: 1.35,
+                    }}>
+                      Discovery · {phaseLine}
+                      {!isDone ? " · complete in chat" : ""}
+                    </div>
+                  </div>
+                </button>
+              );
+            };
+
+            if (effectiveGroupBy === "none") {
+              return rows.map(r => renderRow(r.label, r.phase, `${r.label}-${r.index}`));
+            }
+
+            if (effectiveGroupBy === "phase") {
+              const byPhase = new Map<string, typeof rows>();
+              for (const r of rows) {
+                const pk = r.phase ?? "null";
+                if (!byPhase.has(pk)) byPhase.set(pk, []);
+                byPhase.get(pk)!.push(r);
+              }
+              const order = [...DISCOVERY_PHASES, "null"];
+              return order.flatMap(pk => {
+                const list = byPhase.get(pk);
+                if (!list?.length) return [];
+                const header = pk === "null" ? "Final" : PHASE_DISPLAY[pk] ?? pk;
+                const phaseClickable = pk !== "null";
+                return [
+                  phaseClickable ? (
+                    <button
+                      key={`h-${pk}`}
+                      type="button"
+                      title={`Add discovery phase "${header}" to chat context`}
+                      onClick={() => addPhaseToChat(pk, header)}
+                      style={{
+                        display: "block",
+                        width: "100%",
+                        padding: "8px 12px 6px",
+                        fontSize: 10,
+                        fontWeight: 700,
+                        letterSpacing: "0.06em",
+                        textTransform: "uppercase",
+                        color: JM.muted,
+                        fontFamily: JM.fontSans,
+                        background: "#EDE9FE",
+                        border: "none",
+                        borderBottom: `1px solid ${JM.border}`,
+                        cursor: "pointer",
+                        textAlign: "left",
+                      }}
+                    >
+                      {header}
+                    </button>
+                  ) : (
+                    <div
+                      key={`h-${pk}`}
+                      style={{
+                        padding: "8px 12px 4px",
+                        fontSize: 10,
+                        fontWeight: 700,
+                        letterSpacing: "0.06em",
+                        textTransform: "uppercase",
+                        color: JM.muted,
+                        fontFamily: JM.fontSans,
+                        background: "#EDE9FE",
+                        borderBottom: `1px solid ${JM.border}`,
+                      }}
+                    >
+                      {header}
+                    </div>
+                  ),
+                  ...list.map(r => renderRow(r.label, r.phase, `${r.label}-${r.index}`)),
+                ];
+              });
+            }
+
+            const doneRows = rows.filter(r => sectionDone(r.phase, savedPhaseIds, allDone));
+            const todoRows = rows.filter(r => !sectionDone(r.phase, savedPhaseIds, allDone));
+            const statusBlocks: ReactNode[] = [];
+            if (todoRows.length > 0) {
+              statusBlocks.push(
+                <div
+                  key="h-todo"
+                  style={{
+                    padding: "8px 12px 4px",
+                    fontSize: 10,
+                    fontWeight: 700,
+                    letterSpacing: "0.06em",
+                    textTransform: "uppercase",
+                    color: JM.muted,
+                    fontFamily: JM.fontSans,
+                    background: "#EDE9FE",
+                    borderBottom: `1px solid ${JM.border}`,
+                  }}
+                >
+                  To do
+                </div>
+              );
+              todoRows.forEach(r => {
+                statusBlocks.push(renderRow(r.label, r.phase, `todo-${r.label}-${r.index}`));
+              });
+            }
+            if (doneRows.length > 0) {
+              statusBlocks.push(
+                <div
+                  key="h-done"
+                  style={{
+                    padding: "8px 12px 4px",
+                    fontSize: 10,
+                    fontWeight: 700,
+                    letterSpacing: "0.06em",
+                    textTransform: "uppercase",
+                    color: JM.muted,
+                    fontFamily: JM.fontSans,
+                    background: "#EDE9FE",
+                    borderBottom: `1px solid ${JM.border}`,
+                  }}
+                >
+                  Done
+                </div>
+              );
+              doneRows.forEach(r => {
+                statusBlocks.push(renderRow(r.label, r.phase, `done-${r.label}-${r.index}`));
+              });
+            }
+            return statusBlocks;
+          })()}
+        </div>
+
        {allDone && (
-          <div style={{ padding: "12px 16px", borderTop: "1px solid #e8e4dc", flexShrink: 0 }}>
+          <div style={{ padding: "10px 12px", borderTop: `1px solid ${JM.border}`, flexShrink: 0, background: "#FAF8FF" }}>
            <Link
-              href={`/${workspace}/project/${projectId}/prd`}
+              href={`/${workspace}/project/${projectId}/tasks`}
              style={{
                display: "block", textAlign: "center",
-                padding: "9px 0", borderRadius: 7,
-                background: "#1a1a1a", color: "#fff",
-                fontSize: "0.78rem", fontWeight: 600,
+                padding: "10px 0", borderRadius: 8,
+                background: JM.primaryGradient,
+                color: "#fff",
+                fontSize: 12, fontWeight: 600,
                textDecoration: "none",
+                fontFamily: JM.fontSans,
+                boxShadow: JM.primaryShadow,
              }}
            >
-              Generate PRD →
+              Open Tasks →
            </Link>
          </div>
        )}
--- a/components/project-main/MvpSetupDescribeView.tsx
+++ b/components/project-main/MvpSetupDescribeView.tsx
@@ -0,0 +1,129 @@
+"use client";
+
+import { Suspense, useCallback, useEffect, useState } from "react";
+import { JM, JV } from "@/components/project-creation/modal-theme";
+import { AtlasChat } from "@/components/AtlasChat";
+import {
+  BuildLivePlanPanel,
+  addSectionContextRef,
+} from "@/components/project-main/BuildLivePlanPanel";
+import {
+  type ChatContextRef,
+  contextRefKey,
+} from "@/lib/chat-context-refs";
+
+export function MvpSetupDescribeView({ projectId, workspace }: { projectId: string; workspace: string }) {
+  const [chatContextRefs, setChatContextRefs] = useState<ChatContextRef[]>([]);
+  const [tab, setTab] = useState<"chat" | "plan">("chat");
+  const [narrow, setNarrow] = useState(false);
+
+  useEffect(() => {
+    const mq = window.matchMedia("(max-width: 900px)");
+    const apply = () => setNarrow(mq.matches);
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, []);
+
+  const removeChatContextRef = useCallback((key: string) => {
+    setChatContextRefs(prev => prev.filter(r => contextRefKey(r) !== key));
+  }, []);
+
+  const addPlanSectionToChat = useCallback((label: string, phaseId: string | null) => {
+    setChatContextRefs(prev => addSectionContextRef(prev, label, phaseId));
+  }, []);
+
+  return (
+    <div style={{ flex: 1, display: "flex", flexDirection: "column", minHeight: 0, background: JV.chatColumnBg }}>
+      <div
+        style={{
+          padding: "18px 28px 14px",
+          background: "#fff",
+          borderBottom: `1px solid ${JM.border}`,
+          flexShrink: 0,
+        }}
+      >
+        <div style={{ fontSize: 17, fontWeight: 700, color: JM.ink, marginBottom: 3, fontFamily: JM.fontDisplay }}>
+          Describe
+        </div>
+        <div style={{ fontSize: 12.5, color: JM.muted }}>
+          Tell Vibn about your idea — your plan fills in on the right as you go.
+        </div>
+      </div>
+
+      {narrow && (
+        <div
+          style={{
+            display: "flex",
+            borderBottom: `1px solid ${JM.border}`,
+            background: "#EEF0FF",
+            flexShrink: 0,
+          }}
+        >
+          {(["chat", "plan"] as const).map(id => (
+            <button
+              key={id}
+              type="button"
+              onClick={() => setTab(id)}
+              style={{
+                flex: 1,
+                padding: "11px 8px",
+                border: "none",
+                background: "transparent",
+                fontSize: 13,
+                fontWeight: tab === id ? 600 : 500,
+                color: tab === id ? JM.indigo : JM.muted,
+                borderBottom: tab === id ? `2px solid ${JM.indigo}` : "2px solid transparent",
+                cursor: "pointer",
+                fontFamily: JM.fontSans,
+              }}
+            >
+              {id === "chat" ? "Chat" : "Your plan"}
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div style={{ flex: 1, display: "flex", minHeight: 0, overflow: "hidden" }}>
+        <div
+          style={{
+            flex: 1,
+            minWidth: 0,
+            display: narrow && tab !== "chat" ? "none" : "flex",
+            flexDirection: "column",
+          }}
+        >
+          <AtlasChat
+            projectId={projectId}
+            conversationScope="overview"
+            contextEmptyLabel="Plan"
+            emptyStateHint="Answer Vibn’s questions — each phase you complete updates your plan."
+            chatContextRefs={chatContextRefs}
+            onRemoveChatContextRef={removeChatContextRef}
+          />
+        </div>
+        <div
+          style={{
+            width: narrow ? undefined : 308,
+            flex: narrow && tab === "plan" ? 1 : undefined,
+            flexShrink: 0,
+            minWidth: 0,
+            display: narrow && tab !== "plan" ? "none" : "flex",
+            flexDirection: "column",
+            overflow: "hidden",
+          }}
+        >
+          <Suspense fallback={<div style={{ flex: 1, background: JV.prdPanelBg }} />}>
+            <BuildLivePlanPanel
+              projectId={projectId}
+              workspace={workspace}
+              chatContextRefs={chatContextRefs}
+              onAddSectionRef={addPlanSectionToChat}
+              compactHeader={narrow}
+            />
+          </Suspense>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/components/project-main/MvpSetupLayoutClient.tsx
+++ b/components/project-main/MvpSetupLayoutClient.tsx
@@ -0,0 +1,174 @@
+"use client";
+
+import type { ReactNode } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { JM } from "@/components/project-creation/modal-theme";
+
+const BUILD_LEFT_BG = "#faf8f5";
+const BUILD_LEFT_BORDER = "#e8e4dc";
+
+export function MvpSetupLayoutClient({
+  workspace,
+  projectId,
+  children,
+}: {
+  workspace: string;
+  projectId: string;
+  children: ReactNode;
+}) {
+  const pathname = usePathname() ?? "";
+  const base = `/${workspace}/project/${projectId}/mvp-setup`;
+
+  const steps = [
+    { href: `${base}/describe`, label: "Describe", sub: "Your idea", suffix: "/describe" },
+    { href: `${base}/architect`, label: "Architect", sub: "Discovery", suffix: "/architect" },
+    { href: `${base}/design`, label: "Design", sub: "Look & feel", suffix: "/design" },
+    { href: `${base}/website`, label: "Website", sub: "Grow", suffix: "/website" },
+    { href: `${base}/launch`, label: "Build MVP", sub: "Review & launch", suffix: "/launch" },
+  ] as const;
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        height: "100%",
+        overflow: "hidden",
+        fontFamily: JM.fontSans,
+        background: "linear-gradient(180deg, #FAFAFA 0%, #F5F3FF 100%)",
+      }}
+    >
+      <div
+        style={{
+          width: 200,
+          flexShrink: 0,
+          borderRight: `1px solid ${BUILD_LEFT_BORDER}`,
+          background: "#fff",
+          display: "flex",
+          flexDirection: "column",
+          padding: "18px 12px",
+          overflow: "hidden",
+        }}
+      >
+        <div style={{ padding: "0 6px", marginBottom: 20 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
+            <div
+              style={{
+                width: 26,
+                height: 26,
+                background: JM.primaryGradient,
+                borderRadius: 6,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <span style={{ fontSize: 13, fontWeight: 700, color: "#fff" }}>V</span>
+            </div>
+            <span style={{ fontSize: 16, fontWeight: 700, color: JM.ink, letterSpacing: "-0.02em" }}>MVP setup</span>
+          </div>
+          <div style={{ fontSize: 11, color: JM.muted, paddingLeft: 34 }}>New product flow</div>
+        </div>
+
+        <div
+          style={{
+            fontSize: 9.5,
+            fontWeight: 700,
+            letterSpacing: "0.08em",
+            textTransform: "uppercase",
+            color: JM.muted,
+            padding: "0 6px",
+            marginBottom: 8,
+          }}
+        >
+          Steps
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: 2, flex: 1, minHeight: 0, overflowY: "auto" }}>
+          {steps.map(step => {
+            const active = pathname.includes(`${base}${step.suffix}`);
+            return (
+              <Link
+                key={step.suffix}
+                href={step.href}
+                scroll={false}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 9,
+                  padding: "9px 10px",
+                  borderRadius: 8,
+                  textDecoration: "none",
+                  background: active ? "#fafaff" : "transparent",
+                  border: active ? `1px solid rgba(99,102,241,0.2)` : "1px solid transparent",
+                  transition: "background 0.15s",
+                }}
+              >
+                <div
+                  style={{
+                    width: 20,
+                    height: 20,
+                    borderRadius: "50%",
+                    background: active ? JM.primaryGradient : "#e5e7eb",
+                    color: active ? "#fff" : JM.muted,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    flexShrink: 0,
+                    fontSize: 9,
+                    fontWeight: 700,
+                  }}
+                >
+                  {active ? "▲" : "○"}
+                </div>
+                <div>
+                  <div style={{ fontSize: 12.5, fontWeight: active ? 600 : 500, color: JM.ink }}>{step.label}</div>
+                  <div style={{ fontSize: 10, color: JM.muted }}>{step.sub}</div>
+                </div>
+              </Link>
+            );
+          })}
+        </div>
+
+        <div style={{ borderTop: `1px solid ${BUILD_LEFT_BORDER}`, marginTop: 14, paddingTop: 12, flexShrink: 0 }}>
+          <Link
+            href={`/${workspace}/projects`}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "100%",
+              background: "#eef2ff",
+              border: "1px solid #e0e7ff",
+              borderRadius: 8,
+              padding: "9px 10px",
+              fontSize: 12,
+              fontWeight: 600,
+              color: JM.indigo,
+              textDecoration: "none",
+            }}
+          >
+            Save & go to dashboard
+          </Link>
+          <Link
+            href={`/${workspace}/project/${projectId}/build`}
+            style={{
+              display: "block",
+              marginTop: 10,
+              textAlign: "center",
+              fontSize: 11,
+              fontWeight: 600,
+              color: JM.muted,
+              textDecoration: "none",
+            }}
+          >
+            Open Build workspace →
+          </Link>
+        </div>
+      </div>
+
+      <div style={{ flex: 1, minWidth: 0, minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column" }}>
+        {children}
+      </div>
+    </div>
+  );
+}
--- a/components/project-main/MvpSetupStepPlaceholder.tsx
+++ b/components/project-main/MvpSetupStepPlaceholder.tsx
@@ -0,0 +1,76 @@
+"use client";
+
+import Link from "next/link";
+import { JM } from "@/components/project-creation/modal-theme";
+
+export function MvpSetupStepPlaceholder({
+  title,
+  subtitle,
+  body,
+  primaryHref,
+  primaryLabel,
+  nextHref,
+  nextLabel,
+}: {
+  title: string;
+  subtitle: string;
+  body: string;
+  primaryHref: string;
+  primaryLabel: string;
+  nextHref: string;
+  nextLabel: string;
+}) {
+  return (
+    <div
+      style={{
+        flex: 1,
+        overflow: "auto",
+        padding: "28px 32px",
+        fontFamily: JM.fontSans,
+        background: "linear-gradient(180deg, #FAFAFA 0%, #F5F3FF 100%)",
+      }}
+    >
+      <div style={{ maxWidth: 520 }}>
+        <h1 style={{ fontSize: 22, fontWeight: 700, color: JM.ink, margin: "0 0 8px", fontFamily: JM.fontDisplay }}>
+          {title}
+        </h1>
+        <p style={{ fontSize: 13.5, color: JM.muted, margin: "0 0 24px", lineHeight: 1.55 }}>{subtitle}</p>
+        <p style={{ fontSize: 14, color: JM.ink, lineHeight: 1.65, margin: "0 0 28px" }}>{body}</p>
+        <Link
+          href={primaryHref}
+          style={{
+            display: "inline-block",
+            padding: "12px 22px",
+            borderRadius: 10,
+            background: JM.primaryGradient,
+            color: "#fff",
+            fontSize: 14,
+            fontWeight: 600,
+            textDecoration: "none",
+            boxShadow: JM.primaryShadow,
+            marginRight: 12,
+            marginBottom: 12,
+          }}
+        >
+          {primaryLabel}
+        </Link>
+        <Link
+          href={nextHref}
+          style={{
+            display: "inline-block",
+            padding: "12px 18px",
+            borderRadius: 10,
+            border: `1px solid ${JM.border}`,
+            color: JM.indigo,
+            fontSize: 14,
+            fontWeight: 600,
+            textDecoration: "none",
+            background: "#fff",
+          }}
+        >
+          {nextLabel} →
+        </Link>
+      </div>
+    </div>
+  );
+}
--- a/components/project-main/ProjectInfraPanel.tsx
+++ b/components/project-main/ProjectInfraPanel.tsx
@@ -0,0 +1,358 @@
+"use client";
+
+import { Suspense, useState, useEffect } from "react";
+import { useParams, useSearchParams, useRouter } from "next/navigation";
+import { JM } from "@/components/project-creation/modal-theme";
+
+export type ProjectInfraRouteBase = "run" | "infrastructure";
+
+export interface ProjectInfraPanelProps {
+  routeBase: ProjectInfraRouteBase;
+  /** Uppercase rail heading (e.g. Run vs Infrastructure) */
+  navGroupLabel: string;
+}
+
+// ── Types ─────────────────────────────────────────────────────────────────────
+
+interface InfraApp {
+  name: string;
+  domain?: string | null;
+  coolifyServiceUuid?: string | null;
+}
+
+interface ProjectData {
+  giteaRepo?: string;
+  giteaRepoUrl?: string;
+  apps?: InfraApp[];
+}
+
+// ── Tab definitions ───────────────────────────────────────────────────────────
+
+const TABS = [
+  { 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: "≈" },
+] as const;
+
+type TabId = typeof TABS[number]["id"];
+
+// ── Shared empty state ────────────────────────────────────────────────────────
+
+function ComingSoonPanel({ icon, title, description }: { icon: string; title: string; description: string }) {
+  return (
+    <div style={{
+      flex: 1, display: "flex", flexDirection: "column",
+      alignItems: "center", justifyContent: "center",
+      padding: 60, textAlign: "center", gap: 16,
+    }}>
+      <div style={{
+        width: 56, height: 56, borderRadius: 14, background: "#f0ece4",
+        display: "flex", alignItems: "center", justifyContent: "center",
+        fontSize: "1.5rem", color: "#b5b0a6",
+      }}>
+        {icon}
+      </div>
+      <div>
+        <div style={{ fontSize: "1rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 6 }}>{title}</div>
+        <div style={{ fontSize: "0.82rem", color: "#a09a90", maxWidth: 340, lineHeight: 1.6 }}>{description}</div>
+      </div>
+      <div style={{
+        marginTop: 8, padding: "8px 18px",
+        background: "#1a1a1a", color: "#fff",
+        borderRadius: 7, fontSize: "0.78rem", fontWeight: 500,
+        opacity: 0.4, cursor: "default",
+      }}>
+        Coming soon
+      </div>
+    </div>
+  );
+}
+
+// ── Builds tab ────────────────────────────────────────────────────────────────
+
+function BuildsTab({ project }: { project: ProjectData | null }) {
+  const apps = project?.apps ?? [];
+  if (apps.length === 0) {
+    return (
+      <ComingSoonPanel
+        icon="⬡"
+        title="No deployments yet"
+        description="Once your apps are deployed via Coolify, build history and deployment logs will appear here."
+      />
+    );
+  }
+  return (
+    <div style={{ padding: 32, maxWidth: 720 }}>
+      <div style={{ fontSize: "0.72rem", fontWeight: 700, color: "#a09a90", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 16 }}>
+        Deployed Apps
+      </div>
+      <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+        {apps.map(app => (
+          <div key={app.name} style={{
+            background: "#fff", border: "1px solid #e8e4dc", borderRadius: 10,
+            padding: "14px 18px", display: "flex", alignItems: "center", justifyContent: "space-between",
+          }}>
+            <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+              <span style={{ fontSize: "0.85rem", color: "#a09a90" }}>⬡</span>
+              <div>
+                <div style={{ fontSize: "0.82rem", fontWeight: 600, color: "#1a1a1a" }}>{app.name}</div>
+                {app.domain && (
+                  <div style={{ fontSize: "0.72rem", color: "#a09a90", marginTop: 2 }}>{app.domain}</div>
+                )}
+              </div>
+            </div>
+            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+              <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#2e7d32", display: "inline-block" }} />
+              <span style={{ fontSize: "0.73rem", color: "#6b6560" }}>Running</span>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ── Databases tab ─────────────────────────────────────────────────────────────
+
+function DatabasesTab() {
+  return (
+    <ComingSoonPanel
+      icon="◫"
+      title="Databases"
+      description="Provision and manage PostgreSQL, Redis, and other databases for your project. Connection strings and credentials will be auto-injected into your environment."
+    />
+  );
+}
+
+// ── Services tab ──────────────────────────────────────────────────────────────
+
+function ServicesTab() {
+  return (
+    <ComingSoonPanel
+      icon="◎"
+      title="Services"
+      description="Background workers, email delivery, queues, file storage, and third-party integrations will be configured and monitored here."
+    />
+  );
+}
+
+// ── Environment tab ───────────────────────────────────────────────────────────
+
+function EnvironmentTab() {
+  return (
+    <div style={{ padding: 32, maxWidth: 720 }}>
+      <div style={{ fontSize: "0.72rem", fontWeight: 700, color: "#a09a90", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 16 }}>
+        Environment Variables & Secrets
+      </div>
+      <div style={{
+        background: "#fff", border: "1px solid #e8e4dc", borderRadius: 10,
+        overflow: "hidden", marginBottom: 20,
+      }}>
+        <div style={{
+          display: "grid", gridTemplateColumns: "1fr 1fr auto",
+          padding: "10px 18px", background: "#faf8f5",
+          borderBottom: "1px solid #e8e4dc",
+          fontSize: "0.68rem", fontWeight: 700, color: "#a09a90",
+          letterSpacing: "0.06em", textTransform: "uppercase",
+        }}>
+          <span>Key</span><span>Value</span><span />
+        </div>
+        {["DATABASE_URL", "NEXTAUTH_SECRET", "GITEA_API_TOKEN"].map(k => (
+          <div key={k} style={{
+            display: "grid", gridTemplateColumns: "1fr 1fr auto",
+            padding: "11px 18px", borderBottom: "1px solid #f0ece4",
+            alignItems: "center",
+          }}>
+            <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem", color: "#1a1a1a" }}>{k}</span>
+            <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem", color: "#b5b0a6", letterSpacing: 2 }}>••••••••</span>
+            <button type="button" style={{ background: "none", border: "none", cursor: "pointer", color: "#a09a90", fontSize: "0.72rem", padding: "2px 6px" }}>Edit</button>
+          </div>
+        ))}
+        <div style={{ padding: "11px 18px", borderTop: "1px solid #f0ece4" }}>
+          <button type="button" style={{
+            background: "none", border: "1px dashed #d4cfc8", borderRadius: 6,
+            padding: "6px 14px", fontSize: "0.75rem", color: "#a09a90",
+            cursor: "pointer", width: "100%",
+          }}>
+            + Add variable
+          </button>
+        </div>
+      </div>
+      <div style={{ fontSize: "0.75rem", color: "#b5b0a6", lineHeight: 1.6 }}>
+        Variables are encrypted at rest and auto-injected into deployed containers. Secrets are never exposed in logs.
+      </div>
+    </div>
+  );
+}
+
+// ── Domains tab ───────────────────────────────────────────────────────────────
+
+function DomainsTab({ project }: { project: ProjectData | null }) {
+  const apps = (project?.apps ?? []).filter(a => a.domain);
+  return (
+    <div style={{ padding: 32, maxWidth: 720 }}>
+      <div style={{ fontSize: "0.72rem", fontWeight: 700, color: "#a09a90", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 16 }}>
+        Domains & SSL
+      </div>
+      {apps.length > 0 ? (
+        <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 20 }}>
+          {apps.map(app => (
+            <div key={app.name} style={{
+              background: "#fff", border: "1px solid #e8e4dc", borderRadius: 10,
+              padding: "14px 18px", display: "flex", alignItems: "center", justifyContent: "space-between",
+            }}>
+              <div>
+                <div style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.8rem", color: "#1a1a1a", fontWeight: 500 }}>
+                  {app.domain}
+                </div>
+                <div style={{ fontSize: "0.7rem", color: "#a09a90", marginTop: 3 }}>{app.name}</div>
+              </div>
+              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                <span style={{ width: 7, height: 7, borderRadius: "50%", background: "#2e7d32", display: "inline-block" }} />
+                <span style={{ fontSize: "0.73rem", color: "#6b6560" }}>SSL active</span>
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div style={{
+          background: "#fff", border: "1px dashed #d4cfc8", borderRadius: 10,
+          padding: "32px 24px", textAlign: "center", marginBottom: 20,
+        }}>
+          <div style={{ fontSize: "0.82rem", color: "#a09a90" }}>No custom domains configured</div>
+          <div style={{ fontSize: "0.73rem", color: "#b5b0a6", marginTop: 6 }}>Deploy an app first, then point a domain here.</div>
+        </div>
+      )}
+      <button type="button" style={{
+        background: "#1a1a1a", color: "#fff", border: "none",
+        borderRadius: 8, padding: "9px 20px",
+        fontSize: "0.78rem", fontWeight: 500, cursor: "pointer",
+        opacity: 0.5,
+      }}>
+        + Add domain
+      </button>
+    </div>
+  );
+}
+
+// ── Logs tab ──────────────────────────────────────────────────────────────────
+
+function LogsTab({ project }: { project: ProjectData | null }) {
+  const apps = project?.apps ?? [];
+  if (apps.length === 0) {
+    return (
+      <ComingSoonPanel
+        icon="≈"
+        title="No logs yet"
+        description="Runtime logs, request traces, and error reports from your deployed services will stream here."
+      />
+    );
+  }
+  return (
+    <div style={{ padding: 32, maxWidth: 900 }}>
+      <div style={{ fontSize: "0.72rem", fontWeight: 700, color: "#a09a90", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 16 }}>
+        Runtime Logs
+      </div>
+      <div style={{
+        background: "#1e1e1e", borderRadius: 10, padding: "20px 24px",
+        fontFamily: "IBM Plex Mono, monospace", fontSize: "0.73rem", color: "#d4d4d4",
+        lineHeight: 1.6, minHeight: 200,
+      }}>
+        <div style={{ color: "#6a9955" }}>{"# Logs will stream here once connected to Coolify"}</div>
+        <div style={{ color: "#569cd6", marginTop: 8 }}>{"→ Select a service to tail its log output"}</div>
+      </div>
+    </div>
+  );
+}
+
+// ── Inner ───────────────────────────────────────────────────────────────────
+
+function ProjectInfraPanelInner({ routeBase, navGroupLabel }: ProjectInfraPanelProps) {
+  const params = useParams();
+  const searchParams = useSearchParams();
+  const router = useRouter();
+  const projectId = params.projectId as string;
+  const workspace = params.workspace as string;
+
+  const activeTab = (searchParams.get("tab") ?? "builds") as TabId;
+  const [project, setProject] = useState<ProjectData | null>(null);
+
+  useEffect(() => {
+    fetch(`/api/projects/${projectId}/apps`)
+      .then(r => r.json())
+      .then(d => setProject({ apps: d.apps ?? [], giteaRepo: d.giteaRepo, giteaRepoUrl: d.giteaRepoUrl }))
+      .catch(() => {});
+  }, [projectId]);
+
+  const setTab = (id: TabId) => {
+    router.push(`/${workspace}/project/${projectId}/${routeBase}?tab=${id}`, { scroll: false });
+  };
+
+  return (
+    <div style={{ display: "flex", height: "100%", fontFamily: JM.fontSans, overflow: "hidden" }}>
+
+      <div style={{
+        width: 190, flexShrink: 0,
+        borderRight: "1px solid #e8e4dc",
+        background: "#faf8f5",
+        display: "flex", flexDirection: "column",
+        padding: "16px 8px",
+        gap: 2,
+        overflow: "auto",
+      }}>
+        <div style={{
+          fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6",
+          letterSpacing: "0.1em", textTransform: "uppercase",
+          padding: "0 8px 10px",
+        }}>
+          {navGroupLabel}
+        </div>
+        {TABS.map(tab => {
+          const active = activeTab === tab.id;
+          return (
+            <button
+              key={tab.id}
+              type="button"
+              onClick={() => setTab(tab.id)}
+              style={{
+                display: "flex", alignItems: "center", gap: 9,
+                padding: "7px 10px", borderRadius: 6,
+                background: active ? "#f0ece4" : "transparent",
+                border: "none", cursor: "pointer", width: "100%", textAlign: "left",
+                color: active ? "#1a1a1a" : "#6b6560",
+                fontSize: "0.8rem", fontWeight: active ? 600 : 450,
+                transition: "background 0.1s",
+                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.75rem", opacity: 0.65, width: 16, textAlign: "center" }}>{tab.icon}</span>
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+
+      <div style={{ flex: 1, overflow: "auto", display: "flex", flexDirection: "column" }}>
+        {activeTab === "builds"      && <BuildsTab project={project} />}
+        {activeTab === "databases"   && <DatabasesTab />}
+        {activeTab === "services"    && <ServicesTab />}
+        {activeTab === "environment" && <EnvironmentTab />}
+        {activeTab === "domains"     && <DomainsTab project={project} />}
+        {activeTab === "logs"        && <LogsTab project={project} />}
+      </div>
+    </div>
+  );
+}
+
+export function ProjectInfraPanel(props: ProjectInfraPanelProps) {
+  return (
+    <Suspense fallback={<div style={{ display: "flex", height: "100%", alignItems: "center", justifyContent: "center", color: JM.muted, fontFamily: JM.fontSans, fontSize: "0.85rem" }}>Loading…</div>}>
+      <ProjectInfraPanelInner {...props} />
+    </Suspense>
+  );
+}