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/components/staging-banner.tsx

@@ -0,0 +1,19 @@
+import { headers } from "next/headers";
+
+// A slim bar on staging, so testers don't mistake it for T5DE's hub: shown when HUB_ENVIRONMENT is "staging", or
+// (unset) when the site is served from a staging address, such as hub.staging.t5de.dev. Read per request, since
+// staging and production run the same image.
+export async function StagingBanner() {
+  const env = process.env.HUB_ENVIRONMENT;
+  const host = (await headers()).get("host") ?? "";
+  const staging = env ? env === "staging" : /(^|\.)staging\./.test(host);
+  if (!staging) return null;
+  return (
+    <div className="bg-amber-400 py-1 text-center text-xs font-medium text-amber-950">
+      Staging ·{" "}
+      <a href="https://hub.t5de.dev" className="underline underline-offset-2">
+        hub.t5de.dev
+      </a>
+    </div>
+  );
+}