Render the PolicyEngine site shell around the dashboard

dashboard/app/layout.jsx

@@ -1,3 +1,6 @@
+import PolicyEngineFooter from "../src/components/PolicyEngineFooter";
+import PolicyEngineHeader from "../src/components/PolicyEngineHeader";
+
 import "./globals.css";
 
 export const metadata = {
@@ -9,7 +12,11 @@ export const metadata = {
 export default function RootLayout({ children }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body>
+        <PolicyEngineHeader />
+        {children}
+        <PolicyEngineFooter />
+      </body>
     </html>
   );
 }

dashboard/src/components/PolicyEngineFooter.jsx

@@ -0,0 +1,60 @@
+const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH ?? "";
+
+// PolicyEngine site footer, rendered by the dashboard itself. Multizone
+// rewrites proxy this app under policyengine.org/uk/bus-fare-cap but do
+// not inject the parent site shell, so the footer links mirror the
+// policyengine.org site footer.
+const FOOTER_LINKS = [
+  { label: "About us", href: "https://policyengine.org/uk/team" },
+  { label: "Donate", href: "https://policyengine.org/uk/donate" },
+  { label: "Developer tools", href: "https://policyengine.org/uk/dev-tools" },
+  { label: "Privacy policy", href: "https://policyengine.org/uk/privacy" },
+  {
+    label: "Terms and conditions",
+    href: "https://policyengine.org/uk/terms",
+  },
+];
+
+export default function PolicyEngineFooter() {
+  return (
+    <footer
+      className="relative z-[1] w-full"
+      style={{
+        background:
+          "linear-gradient(to right, var(--pe-color-primary-800, #234E52), var(--pe-color-primary-600, #2C7A7B))",
+      }}
+    >
+      <div className="mx-auto flex max-w-[1400px] flex-col gap-4 px-6 py-8 md:px-8">
+        <a
+          href="https://policyengine.org/uk"
+          aria-label="PolicyEngine UK home"
+          className="w-fit"
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={`${BASE_PATH}/assets/logos/policyengine-white.svg`}
+            alt="PolicyEngine"
+            className="h-6 w-auto"
+          />
+        </a>
+        <nav
+          aria-label="PolicyEngine site footer"
+          className="flex flex-wrap gap-x-6 gap-y-2"
+        >
+          {FOOTER_LINKS.map((link) => (
+            <a
+              key={link.label}
+              href={link.href}
+              className="text-[14px] font-medium text-white no-underline transition-opacity hover:opacity-80"
+            >
+              {link.label}
+            </a>
+          ))}
+        </nav>
+        <p className="m-0 text-[13px] text-white/70">
+          &copy; {new Date().getFullYear()} PolicyEngine
+        </p>
+      </div>
+    </footer>
+  );
+}

dashboard/src/components/PolicyEngineHeader.jsx

@@ -0,0 +1,54 @@
+const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH ?? "";
+
+// PolicyEngine site header, rendered by the dashboard itself. Multizone
+// rewrites proxy this app under policyengine.org/uk/bus-fare-cap but do not
+// inject the parent site shell, so — like the other published dashboards —
+// we render the header/nav here. Links point at the UK site so the tool sits
+// inside the PolicyEngine UK experience. Static (not sticky) so the tool's
+// own sticky title row keeps the top of the viewport while scrolling.
+const NAV_LINKS = [
+  { label: "Research", href: "https://policyengine.org/uk/research" },
+  { label: "Model", href: "https://policyengine.org/uk/model" },
+  { label: "API", href: "https://policyengine.org/uk/api" },
+  { label: "About", href: "https://policyengine.org/uk/about" },
+  { label: "Donate", href: "https://policyengine.org/uk/donate" },
+];
+
+export default function PolicyEngineHeader() {
+  return (
+    <nav
+      className="relative z-[1] w-full"
+      style={{
+        background:
+          "linear-gradient(to right, var(--pe-color-primary-800, #234E52), var(--pe-color-primary-600, #2C7A7B))",
+      }}
+    >
+      <div className="mx-auto flex h-[58px] max-w-[1400px] items-center gap-8 px-6 md:px-8">
+        <a
+          href="https://policyengine.org/uk"
+          aria-label="PolicyEngine UK home"
+          className="flex flex-shrink-0 items-center"
+        >
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={`${BASE_PATH}/assets/logos/policyengine-white.svg`}
+            alt="PolicyEngine"
+            className="h-6 w-auto"
+          />
+        </a>
+
+        <div className="flex items-center gap-6 md:gap-8">
+          {NAV_LINKS.map((link) => (
+            <a
+              key={link.label}
+              href={link.href}
+              className="text-[15px] font-medium text-white no-underline transition-opacity hover:opacity-80"
+            >
+              {link.label}
+            </a>
+          ))}
+        </div>
+      </div>
+    </nav>
+  );
+}

pyproject.toml

@@ -22,10 +22,10 @@ dependencies = [
   "pandas>=2.0",
   "tables>=3.9",
   "huggingface_hub>=0.20",
-  # The policyengine.py wrapper; the [uk] extra exact-pins policyengine-uk, so
-  # the bundle version alone identifies the whole simulation stack. The Populace
-  # UK dataset is loaded via policyengine.tax_benefit_models.uk.
-  "policyengine[uk]>=4.17.10",
+  # The policyengine.py wrapper. Its [uk] extra exact-pins policyengine-uk
+  # (==2.89.2 as of bundle 5.0.1), which conflicts with the >=2.89.3 floor
+  # below, so policyengine-uk is installed directly instead of via the extra.
+  "policyengine>=4.17.10",
   # person_bus_fare_spending and gov.dft.bus.fare_allocation_weight_by_age,
   # which this analysis reads instead of allocating fares itself.
   "policyengine-uk>=2.89.3",