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

This reverts commit 6f79a88abd. Made-with: Cursor
2026-04-21 11:12:20 -07:00
parent 6f79a88abd
commit 14835e2e0a
64 changed files with 1708 additions and 2068 deletions
--- a/app/(justine)/pricing/page.tsx
+++ b/app/(justine)/pricing/page.tsx
@@ -58,7 +58,7 @@ export default function PricingPage() {
        </Card>

        {/* Pro Tier */}
-        <Card className="relative border-primary shadow-lg">
+        <Card className="border-primary shadow-lg">
          <div className="absolute right-4 top-4 rounded-full bg-primary px-3 py-1 text-xs text-primary-foreground">
            Popular
          </div>
--- a/app/[workspace]/project/[projectId]/(workspace)/build/page.tsx
+++ b/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>
  );
--- a/app/[workspace]/project/[projectId]/(workspace)/infrastructure/page.tsx
+++ b/app/[workspace]/project/[projectId]/(workspace)/infrastructure/page.tsx
@@ -1,7 +1,353 @@
-import { ProjectInfraPanel } from "@/components/project-main/ProjectInfraPanel";
+"use client";
+
+import { Suspense, useState, useEffect } from "react";
+import { useParams, useSearchParams, useRouter } from "next/navigation";
+
+// ── 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({ project }: { project: ProjectData | null }) {
+  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,
+      }}>
+        {/* Header row */}
+        <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>
+        {/* Placeholder rows */}
+        {["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 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 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 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 page ────────────────────────────────────────────────────────────────
+
+function InfrastructurePageInner() {
+  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}/infrastructure?tab=${id}`, { scroll: false });
+  };
+
+  return (
+    <div style={{ display: "flex", height: "100%", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", overflow: "hidden" }}>
+
+      {/* ── Left sub-nav ── */}
+      <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",
+        }}>
+          Infrastructure
+        </div>
+        {TABS.map(tab => {
+          const active = activeTab === tab.id;
+          return (
+            <button
+              key={tab.id}
+              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",
+              }}
+              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>
+
+      {/* ── Content ── */}
+      <div style={{ flex: 1, overflow: "auto", display: "flex", flexDirection: "column" }}>
+        {activeTab === "builds"      && <BuildsTab project={project} />}
+        {activeTab === "databases"   && <DatabasesTab />}
+        {activeTab === "services"    && <ServicesTab />}
+        {activeTab === "environment" && <EnvironmentTab project={project} />}
+        {activeTab === "domains"     && <DomainsTab project={project} />}
+        {activeTab === "logs"        && <LogsTab project={project} />}
+      </div>
+    </div>
+  );
+}
+
+// ── Export ────────────────────────────────────────────────────────────────────

 export default function InfrastructurePage() {
  return (
-    <ProjectInfraPanel routeBase="infrastructure" navGroupLabel="Infrastructure" />
+    <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>}>
+      <InfrastructurePageInner />
+    </Suspense>
  );
 }
--- a/app/[workspace]/project/[projectId]/(workspace)/overview/page.tsx
+++ b/app/[workspace]/project/[projectId]/(workspace)/overview/page.tsx
@@ -3,9 +3,7 @@
 import { useEffect, useState } from "react";
 import { useParams } from "next/navigation";
 import { useSession } from "next-auth/react";
-import { isClientDevProjectBypass } from "@/lib/dev-bypass";
 import { Loader2 } from "lucide-react";
-import { JM } from "@/components/project-creation/modal-theme";
 import { FreshIdeaMain } from "@/components/project-main/FreshIdeaMain";
 import { ChatImportMain } from "@/components/project-main/ChatImportMain";
 import { CodeImportMain } from "@/components/project-main/CodeImportMain";
@@ -37,12 +35,10 @@ export default function ProjectOverviewPage() {
  const [loading, setLoading] = useState(true);

  useEffect(() => {
-    const bypass = isClientDevProjectBypass();
-    if (!bypass && authStatus !== "authenticated") {
+    if (authStatus !== "authenticated") {
      if (authStatus === "unauthenticated") setLoading(false);
      return;
    }
-    if (!bypass && authStatus === "loading") return;
    fetch(`/api/projects/${projectId}`)
      .then(r => r.json())
      .then(d => setProject(d.project))
@@ -52,23 +48,15 @@ export default function ProjectOverviewPage() {

  if (loading) {
    return (
-      <div style={{
-        display: "flex", alignItems: "center", justifyContent: "center",
-        height: "100%", fontFamily: JM.fontSans,
-        background: "linear-gradient(180deg, #FAFAFA 0%, #F5F3FF 100%)",
-      }}>
-        <Loader2 style={{ width: 24, height: 24, color: JM.indigo }} className="animate-spin" />
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
+        <Loader2 style={{ width: 24, height: 24, color: "#a09a90" }} className="animate-spin" />
      </div>
    );
  }

  if (!project) {
    return (
-      <div style={{
-        display: "flex", alignItems: "center", justifyContent: "center",
-        height: "100%", fontFamily: JM.fontSans, color: JM.muted, fontSize: 14,
-        background: "linear-gradient(180deg, #FAFAFA 0%, #F5F3FF 100%)",
-      }}>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", color: "#a09a90", fontSize: "0.88rem" }}>
        Project not found.
      </div>
    );
--- a/app/[workspace]/project/[projectId]/(workspace)/prd/page.tsx
+++ b/app/[workspace]/project/[projectId]/(workspace)/prd/page.tsx
@@ -1,11 +1,459 @@
-import { redirect } from "next/navigation";
+"use client";

-/** Legacy URL — project work now lives under Tasks (PRD is the first task). */
-export default async function PrdRedirectPage({
-  params,
-}: {
-  params: Promise<{ workspace: string; projectId: string }>;
-}) {
-  const { workspace, projectId } = await params;
-  redirect(`/${workspace}/project/${projectId}/tasks`);
+import { useEffect, useState } from "react";
+import { useParams, useRouter } from "next/navigation";
+
+// Maps each PRD section to the discovery phase that populates it
+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: "features_scope" },
+  { 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 formatValue(v: unknown): string {
+  if (v === null || v === undefined) return "—";
+  if (Array.isArray(v)) return v.map(item => typeof item === "object" ? JSON.stringify(item) : String(item)).join(", ");
+  return String(v);
+}
+
+function PhaseDataCard({ phase }: { phase: SavedPhase }) {
+  const [expanded, setExpanded] = useState(false);
+  const entries = Object.entries(phase.data).filter(([, v]) => v !== null && v !== undefined && v !== "");
+  return (
+    <div style={{
+      marginTop: 10, background: "#f6f4f0", borderRadius: 8,
+      border: "1px solid #e8e4dc", overflow: "hidden",
+    }}>
+      <button
+        onClick={() => setExpanded(e => !e)}
+        style={{
+          width: "100%", textAlign: "left", padding: "10px 14px",
+          background: "none", border: "none", cursor: "pointer",
+          display: "flex", alignItems: "center", justifyContent: "space-between",
+          fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
+        }}
+      >
+        <span style={{ fontSize: "0.78rem", color: "#4a4640", lineHeight: 1.45 }}>
+          {phase.summary}
+        </span>
+        <span style={{ fontSize: "0.7rem", color: "#a09a90", marginLeft: 8, flexShrink: 0 }}>
+          {expanded ? "▲" : "▼"}
+        </span>
+      </button>
+      {expanded && entries.length > 0 && (
+        <div style={{ padding: "4px 14px 14px", borderTop: "1px solid #e8e4dc" }}>
+          {entries.map(([k, v]) => (
+            <div key={k} style={{ marginTop: 10 }}>
+              <div style={{
+                fontSize: "0.6rem", color: "#b5b0a6", textTransform: "uppercase",
+                letterSpacing: "0.06em", fontWeight: 600, marginBottom: 2,
+              }}>
+                {k.replace(/_/g, " ")}
+              </div>
+              <div style={{ fontSize: "0.78rem", color: "#2a2824", lineHeight: 1.5 }}>
+                {formatValue(v)}
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+interface ArchApp { name: string; type: string; description: string; tech?: string[]; screens?: string[] }
+interface ArchInfra { name: string; reason: string }
+interface ArchPackage { name: string; description: string }
+interface ArchIntegration { name: string; required?: boolean; notes?: string }
+interface Architecture {
+  productName?: string;
+  productType?: string;
+  summary?: string;
+  apps?: ArchApp[];
+  packages?: ArchPackage[];
+  infrastructure?: ArchInfra[];
+  integrations?: ArchIntegration[];
+  designSurfaces?: string[];
+  riskNotes?: string[];
+}
+
+function ArchitectureView({ arch }: { arch: Architecture }) {
+  const Section = ({ title, children }: { title: string; children: React.ReactNode }) => (
+    <div style={{ marginBottom: 24 }}>
+      <div style={{ fontSize: "0.6rem", fontWeight: 700, color: "#b5b0a6", letterSpacing: "0.08em", textTransform: "uppercase", marginBottom: 10 }}>{title}</div>
+      {children}
+    </div>
+  );
+  const Card = ({ children }: { children: React.ReactNode }) => (
+    <div style={{ background: "#fff", border: "1px solid #e8e4dc", borderRadius: 9, padding: "14px 16px", marginBottom: 8 }}>{children}</div>
+  );
+  const Tag = ({ label }: { label: string }) => (
+    <span style={{ background: "#f0ece4", borderRadius: 4, padding: "2px 7px", fontSize: "0.68rem", color: "#6b6560", fontFamily: "IBM Plex Mono, monospace", marginRight: 4, display: "inline-block", marginBottom: 3 }}>{label}</span>
+  );
+
+  return (
+    <div style={{ maxWidth: 760 }}>
+      {arch.summary && (
+        <div style={{ background: "#1a1a1a", borderRadius: 10, padding: "18px 22px", marginBottom: 24, color: "#e8e4dc", fontSize: "0.88rem", lineHeight: 1.7 }}>
+          {arch.summary}
+        </div>
+      )}
+      {(arch.apps ?? []).length > 0 && (
+        <Section title="Applications">
+          {arch.apps!.map(a => (
+            <Card key={a.name}>
+              <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginBottom: 4 }}>
+                <span style={{ fontSize: "0.88rem", fontWeight: 600, color: "#1a1a1a" }}>{a.name}</span>
+                <span style={{ fontSize: "0.72rem", color: "#9a9490" }}>{a.type}</span>
+              </div>
+              <div style={{ fontSize: "0.78rem", color: "#4a4640", lineHeight: 1.55, marginBottom: a.tech?.length ? 8 : 0 }}>{a.description}</div>
+              {a.tech?.map(t => <Tag key={t} label={t} />)}
+              {a.screens && a.screens.length > 0 && (
+                <div style={{ marginTop: 6, fontSize: "0.72rem", color: "#a09a90" }}>Screens: {a.screens.join(", ")}</div>
+              )}
+            </Card>
+          ))}
+        </Section>
+      )}
+      {(arch.packages ?? []).length > 0 && (
+        <Section title="Shared Packages">
+          {arch.packages!.map(p => (
+            <Card key={p.name}>
+              <div style={{ display: "flex", gap: 8, alignItems: "baseline" }}>
+                <span style={{ fontSize: "0.84rem", fontWeight: 600, color: "#1a1a1a", fontFamily: "IBM Plex Mono, monospace" }}>{p.name}</span>
+                <span style={{ fontSize: "0.78rem", color: "#4a4640" }}>{p.description}</span>
+              </div>
+            </Card>
+          ))}
+        </Section>
+      )}
+      {(arch.infrastructure ?? []).length > 0 && (
+        <Section title="Infrastructure">
+          {arch.infrastructure!.map(i => (
+            <Card key={i.name}>
+              <div style={{ fontSize: "0.84rem", fontWeight: 600, color: "#1a1a1a", marginBottom: 3 }}>{i.name}</div>
+              <div style={{ fontSize: "0.78rem", color: "#4a4640", lineHeight: 1.5 }}>{i.reason}</div>
+            </Card>
+          ))}
+        </Section>
+      )}
+      {(arch.integrations ?? []).length > 0 && (
+        <Section title="Integrations">
+          {arch.integrations!.map(i => (
+            <Card key={i.name}>
+              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: i.notes ? 4 : 0 }}>
+                <span style={{ fontSize: "0.84rem", fontWeight: 600, color: "#1a1a1a" }}>{i.name}</span>
+                {i.required && <span style={{ fontSize: "0.62rem", background: "#fef3c7", color: "#92400e", padding: "1px 6px", borderRadius: 4 }}>required</span>}
+              </div>
+              {i.notes && <div style={{ fontSize: "0.78rem", color: "#4a4640" }}>{i.notes}</div>}
+            </Card>
+          ))}
+        </Section>
+      )}
+      {(arch.riskNotes ?? []).length > 0 && (
+        <Section title="Architectural Risks">
+          {arch.riskNotes!.map((r, i) => (
+            <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", marginBottom: 8 }}>
+              <span style={{ fontSize: "0.72rem", color: "#d97706", marginTop: 2, flexShrink: 0 }}>⚠</span>
+              <span style={{ fontSize: "0.82rem", color: "#4a4640", lineHeight: 1.5 }}>{r}</span>
+            </div>
+          ))}
+        </Section>
+      )}
+    </div>
+  );
+}
+
+export default function PRDPage() {
+  const params = useParams();
+  const projectId = params.projectId as string;
+  const workspace = params.workspace as string;
+  const [prd, setPrd] = useState<string | null>(null);
+  const [architecture, setArchitecture] = useState<Architecture | null>(null);
+  const [savedPhases, setSavedPhases] = useState<SavedPhase[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [activeTab, setActiveTab] = useState<"prd" | "architecture">("prd");
+  const [archGenerating, setArchGenerating] = useState(false);
+  const [archError, setArchError] = useState<string | null>(null);
+
+  useEffect(() => {
+    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]) => {
+      setPrd(projectData?.project?.prd ?? null);
+      setArchitecture(projectData?.project?.architecture ?? null);
+      setSavedPhases(phaseData?.phases ?? []);
+      setLoading(false);
+    });
+  }, [projectId]);
+
+  const router = useRouter();
+
+  const handleGenerateArchitecture = async () => {
+    setArchGenerating(true);
+    setArchError(null);
+    try {
+      const res = await fetch(`/api/projects/${projectId}/architecture`, { method: "POST" });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error ?? "Generation failed");
+      setArchitecture(data.architecture);
+      setActiveTab("architecture");
+    } catch (e) {
+      setArchError(e instanceof Error ? e.message : "Something went wrong");
+    } finally {
+      setArchGenerating(false);
+    }
+  };
+
+  const phaseMap = new Map(savedPhases.map(p => [p.phase, p]));
+  const savedPhaseIds = new Set(savedPhases.map(p => p.phase));
+
+  const sections = PRD_SECTIONS.map(s => ({
+    ...s,
+    savedPhase: s.phaseId ? phaseMap.get(s.phaseId) ?? null : null,
+    isDone: s.phaseId ? savedPhaseIds.has(s.phaseId) : false,
+  }));
+
+  const doneCount = sections.filter(s => s.isDone).length;
+  const totalPct = Math.round((doneCount / sections.length) * 100);
+
+  if (loading) {
+    return (
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "center", height: "100%", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif", color: "#a09a90" }}>
+        Loading…
+      </div>
+    );
+  }
+
+  const tabs = [
+    { id: "prd" as const,          label: "PRD",          available: true },
+    { id: "architecture" as const, label: "Architecture", available: !!architecture },
+  ];
+
+  return (
+    <div style={{ padding: "28px 32px", flex: 1, overflow: "auto", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif" }}>
+
+      {/* Tab bar — only when at least one doc exists */}
+      {(prd || architecture) && (
+        <div style={{ display: "flex", gap: 4, marginBottom: 24 }}>
+          {tabs.map(t => {
+            const isActive = activeTab === t.id;
+            return (
+              <button
+                key={t.id}
+                onClick={() => t.available && setActiveTab(t.id)}
+                disabled={!t.available}
+                style={{
+                  padding: "6px 14px", borderRadius: 8, border: "none", cursor: t.available ? "pointer" : "default",
+                  background: isActive ? "#1a1a1a" : "transparent",
+                  color: isActive ? "#fff" : t.available ? "#6b6560" : "#c5c0b8",
+                  fontSize: "0.8rem", fontWeight: isActive ? 600 : 400,
+                  fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
+                  transition: "all 0.1s",
+                }}
+              >
+                {t.label}
+                {!t.available && <span style={{ marginLeft: 5, fontSize: "0.65rem", opacity: 0.6 }}>—</span>}
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Next step banner — PRD done but no architecture yet */}
+      {prd && !architecture && activeTab === "prd" && (
+        <div style={{
+          marginBottom: 24, padding: "18px 22px",
+          background: "#1a1a1a", borderRadius: 10,
+          display: "flex", alignItems: "center", justifyContent: "space-between",
+          gap: 16, flexWrap: "wrap",
+        }}>
+          <div>
+            <div style={{ fontSize: "0.88rem", fontWeight: 700, color: "#fff", marginBottom: 4 }}>
+              Next: Generate technical architecture
+            </div>
+            <div style={{ fontSize: "0.76rem", color: "#a09a90", lineHeight: 1.5 }}>
+              The AI will read your PRD and recommend the apps, services, and infrastructure your product needs. Takes ~30 seconds.
+            </div>
+            {archError && (
+              <div style={{ fontSize: "0.74rem", color: "#f87171", marginTop: 6 }}>⚠ {archError}</div>
+            )}
+          </div>
+          <button
+            onClick={handleGenerateArchitecture}
+            disabled={archGenerating}
+            style={{
+              padding: "10px 20px", borderRadius: 8, border: "none",
+              background: archGenerating ? "#4a4640" : "#fff",
+              color: archGenerating ? "#a09a90" : "#1a1a1a",
+              fontSize: "0.82rem", fontWeight: 700,
+              fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
+              cursor: archGenerating ? "default" : "pointer",
+              flexShrink: 0, display: "flex", alignItems: "center", gap: 8,
+              transition: "opacity 0.15s",
+            }}
+          >
+            {archGenerating && (
+              <span style={{
+                width: 12, height: 12, borderRadius: "50%",
+                border: "2px solid #60606040", borderTopColor: "#a09a90",
+                animation: "spin 0.7s linear infinite", display: "inline-block",
+              }} />
+            )}
+            {archGenerating ? "Analysing PRD…" : "Generate architecture →"}
+          </button>
+        </div>
+      )}
+
+      {/* Architecture tab */}
+      {activeTab === "architecture" && architecture && (
+        <ArchitectureView arch={architecture} />
+      )}
+
+      {/* PRD tab — finalized */}
+      {activeTab === "prd" && prd && (
+        <div style={{ maxWidth: 760 }}>
+          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 20 }}>
+            <h3 style={{ fontFamily: "var(--font-lora), ui-serif, serif", fontSize: "1.2rem", fontWeight: 400, color: "#1a1a1a", margin: 0 }}>
+              Product Requirements
+            </h3>
+            <span style={{ fontFamily: "IBM Plex Mono, monospace", fontSize: "0.72rem", color: "#6b6560", background: "#f0ece4", padding: "4px 10px", borderRadius: 5 }}>
+              PRD complete
+            </span>
+          </div>
+          <div style={{
+            background: "#fff", borderRadius: 10, border: "1px solid #e8e4dc",
+            padding: "28px 32px", lineHeight: 1.8,
+            fontSize: "0.88rem", color: "#2a2824",
+            whiteSpace: "pre-wrap", fontFamily: "var(--font-inter), ui-sans-serif, sans-serif",
+          }}>
+            {prd}
+          </div>
+        </div>
+      )}
+
+      {/* PRD tab — section progress (no finalized PRD yet) */}
+      {activeTab === "prd" && !prd && (
+        /* ── Section progress view ── */
+        <div style={{ maxWidth: 680 }}>
+          {/* Progress bar */}
+          <div style={{
+            display: "flex", alignItems: "center", gap: 16,
+            padding: "16px 20px", background: "#fff",
+            border: "1px solid #e8e4dc", borderRadius: 10,
+            marginBottom: 24, boxShadow: "0 1px 2px #1a1a1a05",
+          }}>
+            <div style={{
+              fontFamily: "IBM Plex Mono, monospace",
+              fontSize: "1.4rem", fontWeight: 500, color: "#1a1a1a", minWidth: 52,
+            }}>
+              {totalPct}%
+            </div>
+            <div style={{ flex: 1 }}>
+              <div style={{ height: 4, borderRadius: 2, background: "#eae6de" }}>
+                <div style={{
+                  height: "100%", borderRadius: 2,
+                  width: `${totalPct}%`, background: "#1a1a1a",
+                  transition: "width 0.6s ease",
+                }} />
+              </div>
+            </div>
+            <span style={{ fontSize: "0.75rem", color: "#a09a90" }}>
+              {doneCount}/{sections.length} sections
+            </span>
+          </div>
+
+          {/* Sections */}
+          {sections.map((s, i) => (
+            <div
+              key={s.id}
+              style={{
+                padding: "14px 18px", marginBottom: 6,
+                background: "#fff", borderRadius: 10,
+                border: `1px solid ${s.isDone ? "#a5d6a740" : "#e8e4dc"}`,
+                animationDelay: `${i * 0.04}s`,
+              }}
+            >
+              <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+                {/* Status icon */}
+                <div style={{
+                  width: 24, height: 24, borderRadius: 6, flexShrink: 0,
+                  background: s.isDone ? "#2e7d3210" : "#f6f4f0",
+                  display: "flex", alignItems: "center", justifyContent: "center",
+                  fontSize: "0.65rem", fontWeight: 700,
+                  color: s.isDone ? "#2e7d32" : "#c5c0b8",
+                }}>
+                  {s.isDone ? "✓" : "○"}
+                </div>
+
+                <span style={{
+                  flex: 1, fontSize: "0.84rem",
+                  color: s.isDone ? "#1a1a1a" : "#a09a90",
+                  fontWeight: s.isDone ? 500 : 400,
+                }}>
+                  {s.label}
+                </span>
+
+                {s.isDone && s.savedPhase && (
+                  <span style={{
+                    fontSize: "0.65rem", fontFamily: "IBM Plex Mono, monospace",
+                    color: "#2e7d32", background: "#2e7d3210",
+                    padding: "2px 7px", borderRadius: 4, fontWeight: 500,
+                  }}>
+                    saved
+                  </span>
+                )}
+                {!s.isDone && !s.phaseId && (
+                  <span style={{
+                    fontSize: "0.65rem", fontFamily: "IBM Plex Mono, monospace",
+                    color: "#b5b0a6", padding: "2px 7px",
+                  }}>
+                    generated
+                  </span>
+                )}
+              </div>
+
+              {/* Expandable phase data */}
+              {s.isDone && s.savedPhase && (
+                <PhaseDataCard phase={s.savedPhase} />
+              )}
+
+              {/* Pending hint */}
+              {!s.isDone && (
+                <div style={{ marginTop: 6, marginLeft: 36, fontSize: "0.72rem", color: "#c5c0b8" }}>
+                  {s.phaseId
+                    ? `Complete the ${s.savedPhase ? s.savedPhase.title : "discovery"} phase in Vibn`
+                    : "Will be generated when PRD is finalized"}
+                </div>
+              )}
+            </div>
+          ))}
+
+          {doneCount === 0 && (
+            <p style={{ fontSize: "0.78rem", color: "#b5b0a6", marginTop: 20, textAlign: "center" }}>
+              Continue chatting with Vibn — saved phases will appear here automatically.
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  );
 }
--- a/app/[workspace]/project/[projectId]/layout.tsx
+++ b/app/[workspace]/project/[projectId]/layout.tsx
@@ -1,12 +1,72 @@
-/**
- * Passthrough layout for the project route.
- *
- * Two sibling route groups provide their own scaffolds:
- *   - (home)/      — VIBNSidebar scaffold for the project home page.
- *   - (workspace)/ — ProjectShell (top tab nav) for overview/build/run/etc.
- */
-import { ReactNode } from "react";
+import { ProjectShell } from "@/components/layout/project-shell";
+import { query } from "@/lib/db-postgres";

-export default function ProjectRootLayout({ children }: { children: ReactNode }) {
-  return <>{children}</>;
+interface ProjectData {
+  name: string;
+  description?: string;
+  status?: string;
+  progress?: number;
+  discoveryPhase?: number;
+  capturedData?: Record<string, string>;
+  createdAt?: string;
+  updatedAt?: string;
+  featureCount?: number;
+  creationMode?: "fresh" | "chat-import" | "code-import" | "migration";
+}
+
+async function getProjectData(projectId: string): Promise<ProjectData> {
+  try {
+    const rows = await query<{ data: any; created_at?: string; updated_at?: string }>(
+      `SELECT data, created_at, updated_at FROM fs_projects WHERE id = $1 LIMIT 1`,
+      [projectId]
+    );
+    if (rows.length > 0) {
+      const { data, created_at, updated_at } = rows[0];
+      return {
+        name: data?.productName || data?.name || "Project",
+        description: data?.productVision || data?.description,
+        status: data?.status,
+        progress: data?.progress ?? 0,
+        discoveryPhase: data?.discoveryPhase ?? 0,
+        capturedData: data?.capturedData ?? {},
+        createdAt: created_at,
+        updatedAt: updated_at,
+        featureCount: Array.isArray(data?.features) ? data.features.length : (data?.featureCount ?? 0),
+        creationMode: data?.creationMode ?? "fresh",
+      };
+    }
+  } catch (error) {
+    console.error("Error fetching project:", error);
+  }
+  return { name: "Project" };
+}
+
+export default async function ProjectLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ workspace: string; projectId: string }>;
+}) {
+  const { workspace, projectId } = await params;
+  const project = await getProjectData(projectId);
+
+  return (
+    <ProjectShell
+      workspace={workspace}
+      projectId={projectId}
+      projectName={project.name}
+      projectDescription={project.description}
+      projectStatus={project.status}
+      projectProgress={project.progress}
+      discoveryPhase={project.discoveryPhase}
+      capturedData={project.capturedData}
+      createdAt={project.createdAt}
+      updatedAt={project.updatedAt}
+      featureCount={project.featureCount}
+      creationMode={project.creationMode}
+    >
+      {children}
+    </ProjectShell>
+  );
 }
--- a/app/[workspace]/projects/page.tsx
+++ b/app/[workspace]/projects/page.tsx
@@ -184,7 +184,7 @@ export default function ProjectsPage() {
              style={{ position: "relative", animationDelay: `${i * 0.05}s` }}
            >
              <Link
-                href={`/${workspace}/project/${p.id}`}
+                href={`/${workspace}/project/${p.id}/overview`}
                style={{
                  width: "100%", display: "flex", alignItems: "center",
                  padding: "18px 22px", borderRadius: 10,
--- a/app/api/github/connect/route.ts
+++ b/app/api/github/connect/route.ts
@@ -1,10 +1,11 @@
 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';

 export async function POST(request: Request) {
  try {
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }
@@ -42,7 +43,7 @@ export async function POST(request: Request) {

 export async function GET(request: Request) {
  try {
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }
@@ -72,7 +73,7 @@ export async function GET(request: Request) {

 export async function DELETE(request: Request) {
  try {
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }
--- a/app/api/projects/[projectId]/advisor/route.ts
+++ b/app/api/projects/[projectId]/advisor/route.ts
@@ -10,7 +10,8 @@
 * and injects it as knowledge_context into the orchestrator's system prompt.
 */
 import { NextRequest } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';

 const AGENT_RUNNER_URL = process.env.AGENT_RUNNER_URL ?? 'https://agents.vibnai.com';
@@ -128,7 +129,7 @@ export async function POST(
 ) {
  const { projectId } = await params;

-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) {
    return new Response('Unauthorized', { status: 401 });
  }
--- a/app/api/projects/[projectId]/agent-chat/route.ts
+++ b/app/api/projects/[projectId]/agent-chat/route.ts
@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "@/lib/auth/authOptions";
 import { query } from "@/lib/db-postgres";

 const AGENT_RUNNER_URL = process.env.AGENT_RUNNER_URL ?? "http://localhost:3333";
@@ -86,7 +87,7 @@ export async function POST(
  req: NextRequest,
  { params }: { params: Promise<{ projectId: string }> }
 ) {
-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }
@@ -189,7 +190,7 @@ export async function DELETE(
  _req: NextRequest,
  { params }: { params: Promise<{ projectId: string }> }
 ) {
-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }
--- a/app/api/projects/[projectId]/agent/sessions/[sessionId]/approve/route.ts
+++ b/app/api/projects/[projectId]/agent/sessions/[sessionId]/approve/route.ts
@@ -8,7 +8,8 @@
 * Body: { commitMessage: string }
 */
 import { NextResponse } from "next/server";
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth/authOptions";
 import { query } from "@/lib/db-postgres";

 const AGENT_RUNNER_URL = process.env.AGENT_RUNNER_URL ?? "http://localhost:3333";
@@ -28,7 +29,7 @@ export async function POST(
 ) {
  try {
    const { projectId, sessionId } = await params;
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
    }
--- a/app/api/projects/[projectId]/agent/sessions/[sessionId]/events/route.ts
+++ b/app/api/projects/[projectId]/agent/sessions/[sessionId]/events/route.ts
@@ -6,7 +6,8 @@
 *   Batch append from vibn-agent-runner (x-agent-runner-secret).
 */
 import { NextResponse } from "next/server";
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth/authOptions";
 import { query, getPool } from "@/lib/db-postgres";

 export interface AgentSessionEventRow {
@@ -22,7 +23,7 @@ export async function GET(
 ) {
  try {
    const { projectId, sessionId } = await params;
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
    }
--- a/app/api/projects/[projectId]/agent/sessions/[sessionId]/events/stream/route.ts
+++ b/app/api/projects/[projectId]/agent/sessions/[sessionId]/events/stream/route.ts
@@ -2,7 +2,8 @@
 * GET /api/projects/.../agent/sessions/.../events/stream?afterSeq=0
 * Server-Sent Events: tail agent_session_events while the session is active.
 */
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth/authOptions";
 import { query, queryOne } from "@/lib/db-postgres";

 export const dynamic = "force-dynamic";
@@ -16,7 +17,7 @@ export async function GET(
  req: Request,
  { params }: { params: Promise<{ projectId: string; sessionId: string }> }
 ) {
-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) {
    return new Response("Unauthorized", { status: 401 });
  }
--- a/app/api/projects/[projectId]/agent/sessions/[sessionId]/retry/route.ts
+++ b/app/api/projects/[projectId]/agent/sessions/[sessionId]/retry/route.ts
@@ -9,7 +9,8 @@
 *                  understands what was already tried
 */
 import { NextResponse } from "next/server";
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth/authOptions";
 import { query } from "@/lib/db-postgres";

 const AGENT_RUNNER_URL = process.env.AGENT_RUNNER_URL ?? "http://localhost:3333";
@@ -20,7 +21,7 @@ export async function POST(
 ) {
  try {
    const { projectId, sessionId } = await params;
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
    }
--- a/app/api/projects/[projectId]/agent/sessions/[sessionId]/route.ts
+++ b/app/api/projects/[projectId]/agent/sessions/[sessionId]/route.ts
@@ -7,7 +7,8 @@
 *   (handled in /stop/route.ts)
 */
 import { NextResponse } from "next/server";
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth/authOptions";
 import { query } from "@/lib/db-postgres";

 export async function GET(
@@ -16,7 +17,7 @@ export async function GET(
 ) {
  try {
    const { projectId, sessionId } = await params;
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
    }
--- a/app/api/projects/[projectId]/agent/sessions/[sessionId]/stop/route.ts
+++ b/app/api/projects/[projectId]/agent/sessions/[sessionId]/stop/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from "next/server";
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth/authOptions";
 import { query } from "@/lib/db-postgres";

 const AGENT_RUNNER_URL = process.env.AGENT_RUNNER_URL ?? "http://localhost:3333";
@@ -10,7 +11,7 @@ export async function POST(
 ) {
  try {
    const { projectId, sessionId } = await params;
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
    }
--- a/app/api/projects/[projectId]/agent/sessions/route.ts
+++ b/app/api/projects/[projectId]/agent/sessions/route.ts
@@ -9,7 +9,8 @@
 *   List all sessions for a project, newest first.
 */
 import { NextResponse } from "next/server";
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from "next-auth";
+import { authOptions } from "@/lib/auth/authOptions";
 import { query } from "@/lib/db-postgres";

 const AGENT_RUNNER_URL = process.env.AGENT_RUNNER_URL ?? "http://localhost:3333";
@@ -32,7 +33,7 @@ export async function POST(
 ) {
  try {
    const { projectId } = await params;
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
    }
@@ -130,7 +131,7 @@ export async function GET(
 ) {
  try {
    const { projectId } = await params;
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
    }
--- a/app/api/projects/[projectId]/analysis-status/route.ts
+++ b/app/api/projects/[projectId]/analysis-status/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';

 export async function GET(
@@ -8,7 +9,7 @@ export async function GET(
 ) {
  try {
    const { projectId } = await params;
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }
--- a/app/api/projects/[projectId]/analyze-chats/route.ts
+++ b/app/api/projects/[projectId]/analyze-chats/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';

 export const maxDuration = 60;
@@ -36,7 +37,7 @@ export async function POST(
 ) {
  try {
    const { projectId } = await params;
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }
--- a/app/api/projects/[projectId]/analyze-repo/route.ts
+++ b/app/api/projects/[projectId]/analyze-repo/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';
 import { execSync } from 'child_process';
 import { existsSync, readdirSync, readFileSync, statSync, rmSync } from 'fs';
@@ -78,7 +79,7 @@ export async function POST(
 ) {
  try {
    const { projectId } = await params;
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }
--- a/app/api/projects/[projectId]/analyze/route.ts
+++ b/app/api/projects/[projectId]/analyze/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';

 const AGENT_RUNNER_URL = process.env.AGENT_RUNNER_URL ?? 'http://localhost:3333';
@@ -9,7 +10,7 @@ export async function GET(
  _req: Request,
  { params }: { params: Promise<{ projectId: string }> }
 ) {
-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }
@@ -67,7 +68,7 @@ export async function POST(
  _req: Request,
  { params }: { params: Promise<{ projectId: string }> }
 ) {
-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }
--- a/app/api/projects/[projectId]/apps/route.ts
+++ b/app/api/projects/[projectId]/apps/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';

 const GITEA_API_URL = process.env.GITEA_API_URL ?? 'https://git.vibnai.com';
@@ -24,7 +25,7 @@ export async function GET(
 ) {
  const { projectId } = await params;

-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }
@@ -124,7 +125,7 @@ export async function PATCH(
 ) {
  const { projectId } = await params;

-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }
--- a/app/api/projects/[projectId]/architecture/route.ts
+++ b/app/api/projects/[projectId]/architecture/route.ts
@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "@/lib/auth/authOptions";
 import { query } from "@/lib/db-postgres";

 const AGENT_RUNNER_URL = process.env.AGENT_RUNNER_URL ?? "http://localhost:3333";
@@ -12,7 +13,7 @@ export async function GET(
  _req: NextRequest,
  { params }: { params: Promise<{ projectId: string }> }
 ) {
-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }
@@ -42,7 +43,7 @@ export async function POST(
  req: NextRequest,
  { params }: { params: Promise<{ projectId: string }> }
 ) {
-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }
@@ -183,7 +184,7 @@ export async function PATCH(
  _req: NextRequest,
  { params }: { params: Promise<{ projectId: string }> }
 ) {
-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }
--- a/app/api/projects/[projectId]/atlas-chat/route.ts
+++ b/app/api/projects/[projectId]/atlas-chat/route.ts
@@ -1,47 +1,18 @@
 import { NextRequest, NextResponse } from "next/server";
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "@/lib/auth/authOptions";
 import { query } from "@/lib/db-postgres";
-import {
-  augmentAtlasMessage,
-  parseContextRefs,
-} from "@/lib/chat-context-refs";

 const AGENT_RUNNER_URL = process.env.AGENT_RUNNER_URL ?? "http://localhost:3333";

-const ALLOWED_SCOPES = new Set(["overview", "build"]);
-
-function normalizeScope(raw: string | null | undefined): "overview" | "build" {
-  const s = (raw ?? "overview").trim();
-  return ALLOWED_SCOPES.has(s) ? (s as "overview" | "build") : "overview";
-}
-
-function runnerSessionId(projectId: string, scope: "overview" | "build"): string {
-  return scope === "overview" ? `atlas_${projectId}` : `atlas_${projectId}__build`;
-}
-
 // ---------------------------------------------------------------------------
-// DB — atlas_chat_threads (project_id + scope); legacy atlas_conversations → overview
+// DB helpers — atlas_conversations table
 // ---------------------------------------------------------------------------

-let threadsTableReady = false;
-let legacyTableChecked = false;
+let tableReady = false;

-async function ensureThreadsTable() {
-  if (threadsTableReady) return;
-  await query(`
-    CREATE TABLE IF NOT EXISTS atlas_chat_threads (
-      project_id TEXT NOT NULL,
-      scope      TEXT NOT NULL,
-      messages   JSONB NOT NULL DEFAULT '[]'::jsonb,
-      updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
-      PRIMARY KEY (project_id, scope)
-    )
-  `);
-  threadsTableReady = true;
-}
-
-async function ensureLegacyConversationsTable() {
-  if (legacyTableChecked) return;
+async function ensureTable() {
+  if (tableReady) return;
  await query(`
    CREATE TABLE IF NOT EXISTS atlas_conversations (
      project_id TEXT PRIMARY KEY,
@@ -49,47 +20,31 @@ async function ensureLegacyConversationsTable() {
      updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
    )
  `);
-  legacyTableChecked = true;
+  tableReady = true;
 }

-async function loadAtlasHistory(projectId: string, scope: "overview" | "build"): Promise<any[]> {
+async function loadAtlasHistory(projectId: string): Promise<any[]> {
  try {
-    await ensureThreadsTable();
+    await ensureTable();
    const rows = await query<{ messages: any[] }>(
-      `SELECT messages FROM atlas_chat_threads WHERE project_id = $1 AND scope = $2`,
-      [projectId, scope]
+      `SELECT messages FROM atlas_conversations WHERE project_id = $1`,
+      [projectId]
    );
-    if (rows.length > 0) {
-      const fromThreads = rows[0]?.messages;
-      return Array.isArray(fromThreads) ? fromThreads : [];
-    }
-    if (scope === "overview") {
-      await ensureLegacyConversationsTable();
-      const leg = await query<{ messages: any[] }>(
-        `SELECT messages FROM atlas_conversations WHERE project_id = $1`,
-        [projectId]
-      );
-      const legacyMsgs = leg[0]?.messages ?? [];
-      if (Array.isArray(legacyMsgs) && legacyMsgs.length > 0) {
-        await saveAtlasHistory(projectId, scope, legacyMsgs);
-        return legacyMsgs;
-      }
-    }
-    return [];
+    return rows[0]?.messages ?? [];
  } catch {
    return [];
  }
 }

-async function saveAtlasHistory(projectId: string, scope: "overview" | "build", messages: any[]): Promise<void> {
+async function saveAtlasHistory(projectId: string, messages: any[]): Promise<void> {
  try {
-    await ensureThreadsTable();
+    await ensureTable();
    await query(
-      `INSERT INTO atlas_chat_threads (project_id, scope, messages, updated_at)
-       VALUES ($1, $2, $3::jsonb, NOW())
-       ON CONFLICT (project_id, scope) DO UPDATE
-         SET messages = $3::jsonb, updated_at = NOW()`,
-      [projectId, scope, JSON.stringify(messages)]
+      `INSERT INTO atlas_conversations (project_id, messages, updated_at)
+       VALUES ($1, $2::jsonb, NOW())
+       ON CONFLICT (project_id) DO UPDATE
+         SET messages = $2::jsonb, updated_at = NOW()`,
+      [projectId, JSON.stringify(messages)]
    );
  } catch (e) {
    console.error("[atlas-chat] Failed to save history:", e);
@@ -111,36 +66,21 @@ async function savePrd(projectId: string, prdContent: string): Promise<void> {
  }
 }

-/** Replace the latest user message content so DB/UI never show the internal ref prefix. */
-function scrubLastUserMessageContent(history: unknown[], cleanText: string): unknown[] {
-  if (!Array.isArray(history) || history.length === 0) return history;
-  const h = history.map(m => (m && typeof m === "object" ? { ...(m as object) } : m));
-  for (let i = h.length - 1; i >= 0; i--) {
-    const m = h[i] as { role?: string; content?: string };
-    if (m?.role === "user" && typeof m.content === "string") {
-      h[i] = { ...m, content: cleanText };
-      break;
-    }
-  }
-  return h;
-}
-
 // ---------------------------------------------------------------------------
 // GET — load stored conversation messages for display
 // ---------------------------------------------------------------------------

 export async function GET(
-  req: NextRequest,
+  _req: NextRequest,
  { params }: { params: Promise<{ projectId: string }> }
 ) {
-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const { projectId } = await params;
-  const scope = normalizeScope(req.nextUrl.searchParams.get("scope"));
-  const history = await loadAtlasHistory(projectId, scope);
+  const history = await loadAtlasHistory(projectId);

  // Filter to only user/assistant messages (no system prompts) for display
  const messages = history
@@ -158,50 +98,43 @@ export async function POST(
  req: NextRequest,
  { params }: { params: Promise<{ projectId: string }> }
 ) {
-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const { projectId } = await params;
-  const body = await req.json();
-  const message = body?.message as string | undefined;
-  const contextRefs = parseContextRefs(body?.contextRefs);
+  const { message } = await req.json();
  if (!message?.trim()) {
    return NextResponse.json({ error: "message is required" }, { status: 400 });
  }

-  const scope = normalizeScope(body?.scope as string | undefined);
-  const sessionId = runnerSessionId(projectId, scope);
-  const cleanUserText = message.trim();
+  const sessionId = `atlas_${projectId}`;

  // Load conversation history from DB to persist across agent runner restarts.
  // Strip tool_call / tool_response messages — replaying them across sessions
  // causes Gemini to reject the request with a turn-ordering error.
-  const rawHistory = await loadAtlasHistory(projectId, scope);
+  const rawHistory = await loadAtlasHistory(projectId);
  const history = rawHistory.filter((m: any) =>
    (m.role === "user" || m.role === "assistant") && m.content
  );

  // __init__ is a special internal trigger used only when there is no existing history.
  // If history already exists, ignore the init request (conversation already started).
-  const isInit = cleanUserText === "__atlas_init__";
+  const isInit = message.trim() === "__atlas_init__";
  if (isInit && history.length > 0) {
    return NextResponse.json({ reply: null, alreadyStarted: true });
  }

-  const runnerMessage = isInit
-    ? scope === "build"
-      ? "Begin as Vibn in build mode. The user is working in their monorepo. Ask what they want to ship or fix next, and offer concrete implementation guidance. Do not acknowledge this as an internal trigger."
-      : "Begin the conversation. Introduce yourself as Vibn and ask what the user is building. Do not acknowledge this as an internal trigger."
-    : augmentAtlasMessage(cleanUserText, contextRefs);
-
  try {
    const res = await fetch(`${AGENT_RUNNER_URL}/atlas/chat`, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
-        message: runnerMessage,
+        // For init, send the greeting prompt but don't store it as a user message
+        message: isInit
+          ? "Begin the conversation. Introduce yourself as Vibn and ask what the user is building. Do not acknowledge this as an internal trigger."
+          : message,
        session_id: sessionId,
        history,
        is_init: isInit,
@@ -220,16 +153,11 @@ export async function POST(

    const data = await res.json();

-    let historyOut = data.history ?? [];
-    // Store the user's line without the internal reference block (UI shows clean text).
-    if (!isInit && cleanUserText !== "__atlas_init__") {
-      historyOut = scrubLastUserMessageContent(historyOut, cleanUserText);
-    }
+    // Persist updated history
+    await saveAtlasHistory(projectId, data.history ?? []);

-    await saveAtlasHistory(projectId, scope, historyOut);
-
-    // If Atlas finalized the PRD, save it to the project (discovery / overview)
-    if (data.prdContent && scope === "overview") {
+    // If Atlas finalized the PRD, save it to the project
+    if (data.prdContent) {
      await savePrd(projectId, data.prdContent);
    }

@@ -253,35 +181,24 @@ export async function POST(
 // ---------------------------------------------------------------------------

 export async function DELETE(
-  req: NextRequest,
+  _req: NextRequest,
  { params }: { params: Promise<{ projectId: string }> }
 ) {
-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }

  const { projectId } = await params;
-  const scope = normalizeScope(req.nextUrl.searchParams.get("scope"));
-  const sessionId = runnerSessionId(projectId, scope);
+  const sessionId = `atlas_${projectId}`;

  try {
-    await fetch(`${AGENT_RUNNER_URL}/atlas/sessions/${encodeURIComponent(sessionId)}`, { method: "DELETE" });
+    await fetch(`${AGENT_RUNNER_URL}/atlas/sessions/${sessionId}`, { method: "DELETE" });
  } catch { /* runner may be down */ }

  try {
-    await ensureThreadsTable();
-    await query(
-      `DELETE FROM atlas_chat_threads WHERE project_id = $1 AND scope = $2`,
-      [projectId, scope]
-    );
+    await query(`DELETE FROM atlas_conversations WHERE project_id = $1`, [projectId]);
  } catch { /* table may not exist yet */ }

-  if (scope === "overview") {
-    try {
-      await query(`DELETE FROM atlas_conversations WHERE project_id = $1`, [projectId]);
-    } catch { /* legacy */ }
-  }
-
  return NextResponse.json({ cleared: true });
 }
--- a/app/api/projects/[projectId]/design-surfaces/route.ts
+++ b/app/api/projects/[projectId]/design-surfaces/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';

 /**
@@ -11,7 +12,7 @@ export async function GET(
 ) {
  try {
    const { projectId } = await params;
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });

    const rows = await query<{ data: Record<string, unknown> }>(
@@ -48,7 +49,7 @@ export async function PATCH(
 ) {
  try {
    const { projectId } = await params;
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });

    // Step 1: read current data — explicit ::text casts on every param
--- a/app/api/projects/[projectId]/file/route.ts
+++ b/app/api/projects/[projectId]/file/route.ts
@@ -6,7 +6,8 @@
 * Response for file:      { type: "file", content: string, encoding: "utf8" | "base64" }
 */
 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';

 const GITEA_API_URL = process.env.GITEA_API_URL ?? 'https://git.vibnai.com';
@@ -38,7 +39,7 @@ export async function GET(
 ) {
  try {
    const { projectId } = await params;
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }
--- a/app/api/projects/[projectId]/generate-migration-plan/route.ts
+++ b/app/api/projects/[projectId]/generate-migration-plan/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';

 export const maxDuration = 120;
@@ -27,7 +28,7 @@ export async function POST(
 ) {
  try {
    const { projectId } = await params;
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }
--- a/app/api/projects/[projectId]/knowledge/import-ai-chat/route.ts
+++ b/app/api/projects/[projectId]/knowledge/import-ai-chat/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';
 import { createKnowledgeItem } from '@/lib/server/knowledge';
 import type { KnowledgeSourceMeta } from '@/lib/types/knowledge';
@@ -33,7 +34,7 @@ export async function POST(
      return NextResponse.json({ error: 'transcript is required' }, { status: 400 });
    }

-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }
--- a/app/api/projects/[projectId]/knowledge/items/route.ts
+++ b/app/api/projects/[projectId]/knowledge/items/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';

 export async function GET(
@@ -9,7 +10,7 @@ export async function GET(
  try {
    const { projectId } = await params;

-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }
--- a/app/api/projects/[projectId]/knowledge/route.ts
+++ b/app/api/projects/[projectId]/knowledge/route.ts
@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "@/lib/auth/authOptions";
 import { query } from "@/lib/db-postgres";

 async function assertOwnership(projectId: string, email: string): Promise<boolean> {
@@ -17,7 +18,7 @@ export async function GET(
  _req: NextRequest,
  { params }: { params: Promise<{ projectId: string }> }
 ) {
-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });

  const { projectId } = await params;
@@ -40,7 +41,7 @@ export async function POST(
  req: NextRequest,
  { params }: { params: Promise<{ projectId: string }> }
 ) {
-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });

  const { projectId } = await params;
@@ -82,7 +83,7 @@ export async function DELETE(
  req: NextRequest,
  { params }: { params: Promise<{ projectId: string }> }
 ) {
-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) return NextResponse.json({ error: "Unauthorized" }, { status: 401 });

  const { projectId } = await params;
--- a/app/api/projects/[projectId]/preview-url/route.ts
+++ b/app/api/projects/[projectId]/preview-url/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';
 import { listApplications, CoolifyApplication } from '@/lib/coolify';

@@ -19,7 +20,7 @@ export async function GET(
 ) {
  const { projectId } = await params;

-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }
--- a/app/api/projects/[projectId]/route.ts
+++ b/app/api/projects/[projectId]/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';

 export async function GET(
@@ -9,7 +10,7 @@ export async function GET(
  try {
    const { projectId } = await params;

-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }
@@ -44,7 +45,7 @@ export async function PATCH(
    const { projectId } = await params;
    const body = await request.json();

-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }
--- a/app/api/projects/[projectId]/save-phase/route.ts
+++ b/app/api/projects/[projectId]/save-phase/route.ts
@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from "next/server";
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from "next-auth/next";
+import { authOptions } from "@/lib/auth/authOptions";
 import { query } from "@/lib/db-postgres";

 // ---------------------------------------------------------------------------
@@ -10,7 +11,7 @@ export async function POST(
  req: NextRequest,
  { params }: { params: Promise<{ projectId: string }> }
 ) {
-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }
@@ -84,7 +85,7 @@ export async function GET(
  _req: NextRequest,
  { params }: { params: Promise<{ projectId: string }> }
 ) {
-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user?.email) {
    return NextResponse.json({ error: "Unauthorized" }, { status: 401 });
  }
--- a/app/api/projects/[projectId]/vision/route.ts
+++ b/app/api/projects/[projectId]/vision/route.ts
@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';

 export async function POST(
@@ -8,7 +9,7 @@ export async function POST(
 ) {
  try {
    const { projectId } = await params;
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }
--- a/app/api/projects/[projectId]/workspace/route.ts
+++ b/app/api/projects/[projectId]/workspace/route.ts
@@ -1,5 +1,6 @@
 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';
 import { provisionTheiaWorkspace } from '@/lib/cloud-run-workspace';

@@ -10,7 +11,7 @@ export async function POST(
  try {
    const { projectId } = await params;

-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }
--- a/app/api/projects/delete/route.ts
+++ b/app/api/projects/delete/route.ts
@@ -1,10 +1,11 @@
 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';

 export async function POST(request: Request) {
  try {
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }
--- a/app/api/projects/deploy/route.ts
+++ b/app/api/projects/deploy/route.ts
@@ -8,13 +8,14 @@
 */

 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';
 import { deployApplication } from '@/lib/coolify';

 export async function POST(request: Request) {
  try {
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }
--- a/app/api/projects/prewarm/route.ts
+++ b/app/api/projects/prewarm/route.ts
@@ -1,5 +1,6 @@
 import { NextRequest, NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { prewarmWorkspace } from '@/lib/cloud-run-workspace';

 /**
@@ -11,7 +12,7 @@ import { prewarmWorkspace } from '@/lib/cloud-run-workspace';
 * to avoid CORS issues with run.app domains.
 */
 export async function POST(req: NextRequest) {
-  const session = await authSession();
+  const session = await getServerSession(authOptions);
  if (!session?.user) {
    return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
  }
--- a/app/api/projects/route.ts
+++ b/app/api/projects/route.ts
@@ -1,10 +1,11 @@
 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';

 export async function GET() {
  try {
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
    }
--- a/app/api/sessions/route.ts
+++ b/app/api/sessions/route.ts
@@ -1,10 +1,11 @@
 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';

 export async function GET(request: Request) {
  try {
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json([], { status: 200 });
    }
--- a/app/api/user/api-key/route.ts
+++ b/app/api/user/api-key/route.ts
@@ -1,11 +1,12 @@
 import { NextResponse } from 'next/server';
-import { authSession } from "@/lib/auth/session-server";
+import { getServerSession } from 'next-auth';
+import { authOptions } from '@/lib/auth/authOptions';
 import { query } from '@/lib/db-postgres';
 import { v4 as uuidv4 } from 'uuid';

 export async function GET(request: Request) {
  try {
-    const session = await authSession();
+    const session = await getServerSession(authOptions);
    if (!session?.user?.email) {
      return NextResponse.json({ error: 'No authorization token provided' }, { status: 401 });
    }
--- a/app/auth/layout.tsx
+++ b/app/auth/layout.tsx
@@ -1,20 +1,4 @@
-import type { Metadata } from "next";
-import { Plus_Jakarta_Sans } from "next/font/google";
 import { Toaster } from "sonner";
-import { JustineAuthShell } from "@/marketing/components/justine/JustineAuthShell";
-import "../styles/justine/02-signup.css";
-
-const justineJakarta = Plus_Jakarta_Sans({
-  subsets: ["latin"],
-  weight: ["400", "500", "600", "700", "800"],
-  variable: "--font-justine-jakarta",
-  display: "swap",
-});
-
-export const metadata: Metadata = {
-  title: "Sign in · vibn",
-  description: "Sign in to your vibn workspace with Google.",
-};

 export default function AuthLayout({
  children,
@@ -22,12 +6,10 @@ export default function AuthLayout({
  children: React.ReactNode;
 }) {
  return (
-    <div
-      data-justine-auth
-      className={`${justineJakarta.variable} justine-auth-root flex min-h-screen flex-col`}
-    >
-      <JustineAuthShell>{children}</JustineAuthShell>
+    <>
+      {children}
      <Toaster position="top-center" />
-    </div>
+    </>
  );
 }
+
--- a/app/auth/page.tsx
+++ b/app/auth/page.tsx
@@ -29,10 +29,10 @@ function AuthPageInner() {

  if (status === "loading") {
    return (
-      <div className="justine-auth-inner">
-        <div className="justine-auth-loading-wrap">
-          <div className="justine-auth-spinner" aria-hidden />
-          <p className="justine-auth-loading-text">Loading authentication…</p>
+      <div className="flex min-h-screen items-center justify-center bg-background">
+        <div className="text-center">
+          <div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent mx-auto mb-4" />
+          <p className="text-muted-foreground">Loading authentication...</p>
        </div>
      </div>
    );
--- a/app/components/NextAuthComponent.tsx
+++ b/app/components/NextAuthComponent.tsx
@@ -1,190 +1,84 @@
 "use client";

 import { signIn } from "next-auth/react";
-import Link from "next/link";
-import { useSearchParams } from "next/navigation";
-import { Suspense, useState } from "react";
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";

-function authErrorMessage(code: string | null): string | null {
-  if (!code) return null;
-  if (code === "Callback") {
-    return (
-      "Google could not complete sign-in. Most often: DATABASE_URL in vibn-frontend/.env.local must reach Postgres from " +
-      "this machine (Coolify internal hostnames only work inside Docker). Use a public host/port, tunnel, or proxy; " +
-      "then run npx prisma db push. Also confirm NEXTAUTH_URL matches the browser (http://localhost:3000) and " +
-      "Google redirect URI http://localhost:3000/api/auth/callback/google. Dev check: GET /api/debug/prisma — see terminal for [next-auth] logs."
-    );
-  }
-  if (code === "Configuration") {
-    return "Auth is misconfigured (check GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, NEXTAUTH_SECRET).";
-  }
-  if (code === "AccessDenied") {
-    return "Access was denied. You may need to be added as a test user if the OAuth app is in testing mode.";
-  }
-  return `Sign-in error: ${code}`;
-}
-
-const showDevLocalSignIn =
-  process.env.NODE_ENV === "development" &&
-  Boolean(process.env.NEXT_PUBLIC_DEV_LOCAL_AUTH_EMAIL?.trim());
-
-function NextAuthForm() {
+export default function NextAuthComponent() {
  const [isLoading, setIsLoading] = useState(false);
-  const [devSecret, setDevSecret] = useState("");
-  const searchParams = useSearchParams();
-  const callbackUrl = searchParams.get("callbackUrl") ?? "/auth";
-  const errorCode = searchParams.get("error");
-  const errorHint = authErrorMessage(errorCode);

  const handleGoogleSignIn = async () => {
    setIsLoading(true);
    try {
-      await signIn("google", { callbackUrl });
+      // Sign in with Google using NextAuth
+      await signIn("google", {
+        callbackUrl: "/auth",
+      });
    } catch (error) {
      console.error("Google sign-in error:", error);
      setIsLoading(false);
    }
  };

-  const handleDevLocalSignIn = async () => {
-    setIsLoading(true);
-    try {
-      await signIn("dev-local", {
-        callbackUrl,
-        password: devSecret,
-        redirect: true,
-      });
-    } catch (error) {
-      console.error("Dev local sign-in error:", error);
-      setIsLoading(false);
-    }
-  };
-
  return (
-    <div className="justine-auth-inner">
-      <div className="justine-auth-card">
-        <h1 className="justine-auth-title f">Welcome back</h1>
-        <p className="justine-auth-sub">Sign in with Google to open your workspace.</p>
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <div className="w-full max-w-md space-y-6">
+        {/* Logo */}
+        <div className="flex justify-center">
+          <img 
+            src="/vibn-black-circle-logo.png" 
+            alt="Vib'n" 
+            className="h-16 w-16"
+          />
+        </div>

-        {errorHint && (
-          <div
-            role="alert"
-            style={{
-              marginBottom: 18,
-              padding: "12px 14px",
-              borderRadius: 10,
-              fontSize: 12.5,
-              lineHeight: 1.55,
-              color: "#991B1B",
-              background: "#FEF2F2",
-              border: "1px solid #FECACA",
-            }}
-          >
-            {errorHint}
-          </div>
-        )}
-
-        <button
-          type="button"
-          className="justine-auth-btn-google"
-          onClick={handleGoogleSignIn}
-          disabled={isLoading}
-        >
-          <svg width={16} height={16} viewBox="0 0 24 24" fill="none" aria-hidden>
-            <path
-              d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
-              fill="#4285F4"
-            />
-            <path
-              d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
-              fill="#34A853"
-            />
-            <path
-              d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z"
-              fill="#FBBC05"
-            />
-            <path
-              d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
-              fill="#EA4335"
-            />
-          </svg>
-          {isLoading ? "Signing in…" : "Continue with Google"}
-        </button>
-
-        {showDevLocalSignIn && (
-          <div
-            style={{
-              marginTop: 22,
-              paddingTop: 22,
-              borderTop: "1px solid rgba(0,0,0,0.08)",
-            }}
-          >
-            <p className="justine-auth-sub" style={{ marginBottom: 12 }}>
-              Local only: sign in without Google as{" "}
-              <strong>{process.env.NEXT_PUBLIC_DEV_LOCAL_AUTH_EMAIL}</strong>
-            </p>
-            <form
-              onSubmit={(e) => {
-                e.preventDefault();
-                void handleDevLocalSignIn();
-              }}
+        {/* Auth Card */}
+        <Card>
+          <CardHeader className="space-y-1">
+            <CardTitle className="text-2xl font-bold text-center">
+              Welcome to Vib'n
+            </CardTitle>
+            <CardDescription className="text-center">
+              Sign in to continue
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <Button
+              type="button"
+              variant="outline"
+              className="w-full"
+              onClick={handleGoogleSignIn}
+              disabled={isLoading}
            >
-              <input
-                type="password"
-                name="dev-local-secret"
-                autoComplete="current-password"
-                placeholder="Dev secret (only if DEV_LOCAL_AUTH_SECRET is set)"
-                value={devSecret}
-                onChange={(e) => setDevSecret(e.target.value)}
-                className="justine-auth-dev-input"
-                style={{
-                  width: "100%",
-                  marginBottom: 10,
-                  padding: "10px 12px",
-                  borderRadius: 8,
-                  border: "1px solid rgba(0,0,0,0.12)",
-                  fontSize: 14,
-                }}
-              />
-              <button
-                type="submit"
-                className="justine-auth-btn-google"
-                disabled={isLoading}
-                style={{
-                  background: "#111827",
-                  color: "#fff",
-                }}
-              >
-                {isLoading ? "Signing in…" : "Continue (local dev account)"}
-              </button>
-            </form>
-          </div>
-        )}
+              <svg className="mr-2 h-4 w-4" viewBox="0 0 24 24">
+                <path
+                  d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
+                  fill="#4285F4"
+                />
+                <path
+                  d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
+                  fill="#34A853"
+                />
+                <path
+                  d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
+                  fill="#FBBC05"
+                />
+                <path
+                  d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
+                  fill="#EA4335"
+                />
+              </svg>
+              {isLoading ? "Signing in..." : "Continue with Google"}
+            </Button>
+          </CardContent>
+        </Card>

-        <p className="justine-auth-legal">
-          By continuing, you agree to our{" "}
-          <Link href="/terms">Terms</Link> and <Link href="/privacy">Privacy Policy</Link>.
+        {/* Footer */}
+        <p className="text-center text-xs text-muted-foreground">
+          By continuing, you agree to our Terms of Service and Privacy Policy.
        </p>
      </div>
    </div>
  );
 }
-
-function NextAuthFallback() {
-  return (
-    <div className="justine-auth-inner">
-      <div className="justine-auth-loading-wrap">
-        <div className="justine-auth-spinner" aria-hidden />
-        <p className="justine-auth-loading-text">Loading…</p>
-      </div>
-    </div>
-  );
-}
-
-export default function NextAuthComponent() {
-  return (
-    <Suspense fallback={<NextAuthFallback />}>
-      <NextAuthForm />
-    </Suspense>
-  );
-}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -58,20 +58,13 @@ export default function RootLayout({
          {children}
          <Toaster />
        </Providers>
-        {/* Service worker breaks Next dev (RSC / __nextjs_* fetches need a real Response). Prod only. */}
-        {process.env.NODE_ENV === "production" ? (
-          <script
-            dangerouslySetInnerHTML={{
-              __html: `
+        <script dangerouslySetInnerHTML={{ __html: `
          if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
              navigator.serviceWorker.register('/sw.js').catch(() => {});
            });
          }
-        `,
-            }}
-          />
-        ) : null}
+        `}} />
      </body>
    </html>
  );
--- a/app/styles/justine/01-homepage.css
+++ b/app/styles/justine/01-homepage.css
@@ -29,8 +29,7 @@
  width: 100%;
 }

-/* Only Justine’s static homepage needs the full * reset; it beats Tailwind utilities if applied to main. */
-[data-justine] .justine-home-page * {
+[data-justine] * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;