diff --git a/canvas/src/app/layout.tsx b/canvas/src/app/layout.tsx index a2d192b4..60de6b74 100644 --- a/canvas/src/app/layout.tsx +++ b/canvas/src/app/layout.tsx @@ -1,4 +1,5 @@ import type { Metadata } from "next"; +import { headers } from "next/headers"; import "./globals.css"; import { AuthGate } from "@/components/AuthGate"; import { CookieConsent } from "@/components/CookieConsent"; @@ -8,11 +9,35 @@ export const metadata: Metadata = { description: "AI Org Chart Canvas", }; -export default function RootLayout({ +export default async function RootLayout({ children, }: { children: React.ReactNode; }) { + // Read the per-request CSP nonce that middleware.ts sets via the + // `x-nonce` request header. This call is load-bearing for TWO + // independent reasons: + // + // 1. It opts the root layout into dynamic rendering. Without a + // `headers()` / `cookies()` / `noStore()` call, Next.js treats + // the layout as statically pre-rendered and serves the SAME + // HTML for every request — which means the Next.js bootstrap + //