A slim Staging bar on staging

Shown above the header when the site is served from a staging. address, or with HUB_ENVIRONMENT=staging
(production hides it), read per request since staging and production run the same image.

Co-Authored-By: Claude Opus 5.5 <[email protected]>

apps/web/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import { Header } from "@/components/header";
+import { StagingBanner } from "@/components/staging-banner";
 import { cn } from "@/lib/utils";
 import "./globals.css";
 
@@ -16,6 +17,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
   return (
     <html lang="en" className={cn("font-sans antialiased", sans.variable, mono.variable)}>
       <body className="flex min-h-dvh flex-col">
+        <StagingBanner />
         <Header />
         <main className="mx-auto w-full max-w-5xl flex-1 px-4 py-10 sm:px-6 sm:py-14">{children}</main>
         <footer className="border-t">