From 21e1bd87907f12598c5e43928a3b3a40d3ee2667 Mon Sep 17 00:00:00 2001
From: dhkatz <dev@t5de.dev>
Date: Mon, 2 Nov 2026 09:09:15 -0800
Subject: [PATCH] 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 <noreply@anthropic.com>
---
 README.md                              |  3 +++
 apps/web/app/layout.tsx                |  2 ++
 apps/web/components/staging-banner.tsx | 19 +++++++++++++++++++
 3 files changed, 24 insertions(+)
 create mode 100644 apps/web/components/staging-banner.tsx

diff --git a/README.md b/README.md
index 69aa247..8b12618 100644
--- a/README.md
+++ b/README.md
@@ -49,4 +49,7 @@ Needs Bun (1.4) and Node (for Next.js).
   that runs Bun or containers (Railway, Render, Fly.io, Heroku), with `DATABASE_URL`, `AUTH_SECRET`, `API_URL` (its
   public address) and `WEB_URL` (the website's).
 
+A staging site shows a slim "Staging" bar: when it's served from a `staging.` address (`hub.staging.t5de.dev`),
+or with the website's `HUB_ENVIRONMENT=staging` (`production` hides it).
+
 T5DE's proxies reach the API's address directly (sign-in and the WebSocket): `t5de-proxy signin -hub <API address>`.
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 7e7cd69..2ae3679 100644
--- a/apps/web/app/layout.tsx
+++ b/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">
diff --git a/apps/web/components/staging-banner.tsx b/apps/web/components/staging-banner.tsx
new file mode 100644
index 0000000..6d28bb4
--- /dev/null
+++ b/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>
+  );
+}