From c02c4a242b7e28e9d69f98a5e1c47d45548ce2fb Mon Sep 17 00:00:00 2001
From: vahid-ahmadi <va.vahidahmadi@gmail.com>
Date: Tue, 11 Aug 2026 11:54:05 +0100
Subject: [PATCH] Render the PolicyEngine site shell on /uk/chat
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

/uk/chat is served on policyengine.org through a multizone rewrite, which
does not inject the parent app's header into this response. Since
PolicyEngine/policyengine-app-v2#1148 every zone child renders the shell
itself, and the app-zone-shell-audit failed here with "PolicyEngine brand
missing from top shell", blocking the beta launch PR.

Adds a SiteHeader with the wordmark and the Research, Model, API and
Donate links the audit asserts are present in the top 140px. It lives in
the root layout rather than ChatPage so it is in the server-rendered HTML
— ChatPage is loaded with ssr: false.

The chat is a full-height layout, so the header would otherwise push the
composer below the fold. Its height is published as --pe-shell-h; the
full-height panes are now calc(100dvh - var(--pe-shell-h)) and the sticky
sidebars anchor at that offset instead of 0. Embedded copies (?embed)
already sit inside another page's chrome, so the header is skipped there
and --pe-shell-h drops to 0px.

Fixes #239

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 frontend/src/app/ChatPage.tsx          |  10 +--
 frontend/src/app/layout.tsx            |   6 ++
 frontend/src/components/SiteHeader.tsx | 110 +++++++++++++++++++++++++
 3 files changed, 121 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/SiteHeader.tsx

diff --git a/frontend/src/app/ChatPage.tsx b/frontend/src/app/ChatPage.tsx
index 13651f78..dcce1987 100644
--- a/frontend/src/app/ChatPage.tsx
+++ b/frontend/src/app/ChatPage.tsx
@@ -1544,7 +1544,7 @@ export default function ChatPage() {
   };
 
   return (
-    <div style={{ minHeight: "100dvh", background: "var(--bg)", color: "var(--text)", fontFamily: "system-ui, -apple-system, sans-serif" }}>
+    <div style={{ minHeight: "calc(100dvh - var(--pe-shell-h))", background: "var(--bg)", color: "var(--text)", fontFamily: "system-ui, -apple-system, sans-serif" }}>
       <style>{`
         [data-tip],[data-tip-left],[data-tip-right]{position:relative}
         [data-tip]::after,[data-tip-left]::after,[data-tip-right]::after{
@@ -1580,10 +1580,10 @@ export default function ChatPage() {
         }
       `}</style>
       {/* Body */}
-      <div style={{ display: "flex", margin: "0 auto", padding: "0", gap: "0", width: "100%", minHeight: "100dvh" }}>
+      <div style={{ display: "flex", margin: "0 auto", padding: "0", gap: "0", width: "100%", minHeight: "calc(100dvh - var(--pe-shell-h))" }}>
         {!isEmbed && !sidebarOpen && (
           /* Rail */
-          <div data-pe-sidebar style={{ width: "60px", flexShrink: 0, background: "var(--sidebar-bg)", borderRight: "1px solid var(--border)", display: "flex", flexDirection: "column", alignItems: "center", padding: "10px 0", position: "sticky", top: 0, height: "100dvh", boxSizing: "border-box" }}>
+          <div data-pe-sidebar style={{ width: "60px", flexShrink: 0, background: "var(--sidebar-bg)", borderRight: "1px solid var(--border)", display: "flex", flexDirection: "column", alignItems: "center", padding: "10px 0", position: "sticky", top: "var(--pe-shell-h)", height: "calc(100dvh - var(--pe-shell-h))", boxSizing: "border-box" }}>
             <button onClick={() => setSidebarOpen(true)} data-tip-right="Open sidebar" aria-label="Open sidebar" style={{ background: "transparent", border: "none", cursor: "pointer", padding: "8px", borderRadius: "10px", display: "flex", color: "var(--text)", marginBottom: "4px" }}
               onMouseEnter={(e) => (e.currentTarget as HTMLElement).style.background = "var(--surface-hover)"}
               onMouseLeave={(e) => (e.currentTarget as HTMLElement).style.background = "transparent"}
@@ -1628,7 +1628,7 @@ export default function ChatPage() {
         )}
         {/* Sidebar */}
         {!isEmbed && sidebarOpen && (
-          <div data-pe-sidebar style={{ width: "260px", flexShrink: 0, background: "var(--sidebar-bg)", borderRight: "1px solid var(--border)", padding: "12px 8px", position: "sticky", top: 0, height: "100dvh", alignSelf: "flex-start", display: "flex", flexDirection: "column", boxSizing: "border-box" }}>
+          <div data-pe-sidebar style={{ width: "260px", flexShrink: 0, background: "var(--sidebar-bg)", borderRight: "1px solid var(--border)", padding: "12px 8px", position: "sticky", top: "var(--pe-shell-h)", height: "calc(100dvh - var(--pe-shell-h))", alignSelf: "flex-start", display: "flex", flexDirection: "column", boxSizing: "border-box" }}>
             <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "4px", padding: "4px 4px 4px 10px", gap: "8px" }}>
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img src={`${APP_BASE_PATH}/policyengine-logo.svg`} alt="PolicyEngine" style={{ display: "block", width: "128px", height: "auto" }} />
@@ -1798,7 +1798,7 @@ export default function ChatPage() {
         )}
 
         {/* Chat area */}
-        <div data-pe-chat style={{ flex: 1, padding: "16px 24px max(24px, env(safe-area-inset-bottom))", minWidth: 0, minHeight: "100dvh", boxSizing: "border-box", display: "flex", flexDirection: "column", justifyContent: hasMessages ? "flex-start" : "center", alignItems: "stretch" }}>
+        <div data-pe-chat style={{ flex: 1, padding: "16px 24px max(24px, env(safe-area-inset-bottom))", minWidth: 0, minHeight: "calc(100dvh - var(--pe-shell-h))", boxSizing: "border-box", display: "flex", flexDirection: "column", justifyContent: hasMessages ? "flex-start" : "center", alignItems: "stretch" }}>
           {!hasMessages && (
             <div style={{ width: "100%", maxWidth: "760px", margin: "0 auto", textAlign: "center", marginBottom: "20px" }}>
               <h1 style={{ fontSize: "30px", fontWeight: 500, color: "var(--text)", margin: 0, letterSpacing: "-0.01em" }}>What&apos;s on your mind today?</h1>
diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index 239d0a8a..32f42941 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata, Viewport } from "next";
 import "@mantine/core/styles.css";
 import { APP_BASE_PATH } from "@/utils/backend";
+import SiteHeader from "@/components/SiteHeader";
 import Providers from "./Providers";
 
 export const metadata: Metadata = {
@@ -22,6 +23,10 @@ export const viewport: Viewport = {
 
 const themeVars = `
   :root {
+    /* Height of the PolicyEngine site shell. The chat's full-height panes
+       subtract this so the header does not push them below the fold.
+       SiteHeader sets it to 0px for embedded (?embed) copies. */
+    --pe-shell-h: 56px;
     --bg: #ffffff;
     --surface: #ffffff;
     --surface-2: #f4f4f4;
@@ -88,6 +93,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         />
       </head>
       <body style={{ margin: 0, fontFamily: "system-ui, -apple-system, sans-serif", background: "var(--bg)", color: "var(--text)" }}>
+        <SiteHeader />
         <Providers>{children}</Providers>
       </body>
     </html>
diff --git a/frontend/src/components/SiteHeader.tsx b/frontend/src/components/SiteHeader.tsx
new file mode 100644
index 00000000..eb930111
--- /dev/null
+++ b/frontend/src/components/SiteHeader.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+/**
+ * The PolicyEngine site shell.
+ *
+ * /uk/chat is served on policyengine.org through a multizone rewrite, and the
+ * rewrite does not inject the parent app's header into this response — every
+ * zone child renders the shell itself. The app-zone-shell-audit in
+ * policyengine-app-v2 asserts that the top 140px of the page carries the
+ * PolicyEngine brand plus the Research, Model, API and Donate nav labels.
+ *
+ * Links are absolute so they resolve both here and on the standalone
+ * deployment, where /uk/* belongs to the chat rather than the website.
+ */
+const SITE = "https://policyengine.org";
+
+const NAV_LINKS = [
+  { label: "Research", href: `${SITE}/uk/research` },
+  { label: "Model", href: `${SITE}/uk/model` },
+  { label: "API", href: `${SITE}/uk/api` },
+  { label: "About", href: `${SITE}/uk/team` },
+];
+
+export default function SiteHeader() {
+  // Embedded copies (?embed) are framed inside another page that already has
+  // its own chrome, so the shell would be a duplicate header.
+  const [isEmbed, setIsEmbed] = useState(false);
+
+  useEffect(() => {
+    const embedded = new URLSearchParams(window.location.search).has("embed");
+    setIsEmbed(embedded);
+    document.documentElement.style.setProperty(
+      "--pe-shell-h",
+      embedded ? "0px" : "",
+    );
+  }, []);
+
+  if (isEmbed) return null;
+
+  return (
+    <header
+      style={{
+        height: "var(--pe-shell-h)",
+        boxSizing: "border-box",
+        position: "sticky",
+        top: 0,
+        zIndex: 100,
+        background: "var(--bg)",
+        borderBottom: "1px solid var(--border)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: "16px",
+        padding: "0 24px",
+      }}
+    >
+      <a
+        href={`${SITE}/uk`}
+        aria-label="PolicyEngine"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "8px",
+          textDecoration: "none",
+          color: "var(--text)",
+          fontWeight: 700,
+          letterSpacing: "0.02em",
+          whiteSpace: "nowrap",
+        }}
+      >
+        PolicyEngine
+      </a>
+
+      <nav
+        aria-label="PolicyEngine navigation"
+        style={{
+          display: "flex",
+          alignItems: "center",
+          gap: "20px",
+          fontSize: "14px",
+          whiteSpace: "nowrap",
+        }}
+      >
+        {NAV_LINKS.map((link) => (
+          <a
+            key={link.label}
+            href={link.href}
+            style={{ color: "var(--text-2)", textDecoration: "none" }}
+          >
+            {link.label}
+          </a>
+        ))}
+        <a
+          href={`${SITE}/uk/donate`}
+          style={{
+            color: "var(--text)",
+            textDecoration: "none",
+            border: "1px solid var(--border)",
+            borderRadius: "6px",
+            padding: "6px 14px",
+          }}
+        >
+          Donate
+        </a>
+      </nav>
+    </header>
+  );
+}