From fdfad82753aa29e6aaebf05de8a125929a7c38a9 Mon Sep 17 00:00:00 2001
From: SakshiKekre <sakshi.kekre@gmail.com>
Date: Wed, 13 May 2026 02:01:17 -0700
Subject: [PATCH 1/6] Add "Ask a follow-up" chat drawer on report pages

Renders an icon button in ReportActionButtons that opens a Sheet
containing an iframe to policyengine-uk-chat. The chat receives the
report's scenario as a scenario_context URL param so the assistant
knows what report the user is looking at.

Opt-in: pass chatScenarioContext to ReportOutputLayout. Without it, no
button renders. Defaults to prod chat URL; override with
VITE_UK_CHAT_ORIGIN to point at a preview.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/src/components/report/ChatDrawer.tsx      | 56 +++++++++++++++++++
 .../components/report/ReportActionButtons.tsx | 24 +++++++-
 .../report-output/ReportOutputLayout.tsx      | 16 ++++++
 3 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 app/src/components/report/ChatDrawer.tsx

diff --git a/app/src/components/report/ChatDrawer.tsx b/app/src/components/report/ChatDrawer.tsx
new file mode 100644
index 000000000..3fdb07b69
--- /dev/null
+++ b/app/src/components/report/ChatDrawer.tsx
@@ -0,0 +1,56 @@
+/**
+ * ChatDrawer — slide-out panel that embeds policyengine-uk-chat as an iframe,
+ * seeded with the report scenario the user is currently viewing.
+ *
+ * The chat reads `?scenario_context=` from its URL and forwards it to its
+ * /chat/message backend, so the assistant knows what the user just saw
+ * without us having to copy/parse report data into a structured payload.
+ */
+import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+
+interface ChatDrawerProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Plain-English summary of the scenario + headline figures. Forwarded
+   *  to the chat as system-prompt context. */
+  scenarioContext: string;
+}
+
+const CHAT_ORIGIN =
+  import.meta.env.VITE_UK_CHAT_ORIGIN || 'https://policyengine-uk-chat.vercel.app';
+
+function buildChatUrl(scenarioContext: string): string {
+  const params = new URLSearchParams({ scenario_context: scenarioContext });
+  // model_backend=uk_python so the chat runs against the same Python engine
+  // app-v2's reports use — needed for chat numbers to be comparable to the
+  // report numbers the user is looking at.
+  params.set('model_backend', 'uk_python');
+  return `${CHAT_ORIGIN}/?${params.toString()}`;
+}
+
+export function ChatDrawer({ open, onOpenChange, scenarioContext }: ChatDrawerProps) {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side="right"
+        className="tw:!max-w-none tw:w-full tw:sm:w-[480px] tw:md:w-[560px] tw:lg:w-[640px] tw:p-0"
+      >
+        <SheetHeader className="tw:px-4 tw:py-3 tw:border-b">
+          <SheetTitle>Ask a follow-up</SheetTitle>
+        </SheetHeader>
+        {open && (
+          <iframe
+            src={buildChatUrl(scenarioContext)}
+            title="PolicyEngine chat"
+            className="tw:flex-1 tw:w-full tw:border-0"
+            // The chat needs the same permissions it has standalone:
+            // forms (for sign-in if the user wants to), scripts (everything
+            // is JS), same-origin (so SSE/streaming works), clipboard for
+            // copy buttons. No top-navigation — keep navigation here.
+            sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-read allow-clipboard-write"
+          />
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/app/src/components/report/ReportActionButtons.tsx b/app/src/components/report/ReportActionButtons.tsx
index b9cbe57c8..0ff47be04 100644
--- a/app/src/components/report/ReportActionButtons.tsx
+++ b/app/src/components/report/ReportActionButtons.tsx
@@ -1,4 +1,9 @@
-import { IconBookmark, IconCode, IconSettings } from '@tabler/icons-react';
+import {
+  IconBookmark,
+  IconCode,
+  IconMessageCircle,
+  IconSettings,
+} from '@tabler/icons-react';
 import { Group } from '@/components/ui';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
@@ -10,6 +15,7 @@ interface ReportActionButtonsProps {
   onSave?: () => void;
   onView?: () => void;
   onReproduce?: () => void;
+  onAskFollowUp?: () => void;
 }
 
 /**
@@ -25,6 +31,7 @@ export function ReportActionButtons({
   onSave,
   onView,
   onReproduce,
+  onAskFollowUp,
 }: ReportActionButtonsProps) {
   return (
     <Group gap="xs" className="tw:ml-1.5">
@@ -68,6 +75,21 @@ export function ReportActionButtons({
           <TooltipContent side="bottom">Reproduce in Python</TooltipContent>
         </Tooltip>
       )}
+      {onAskFollowUp && (
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              variant="ghost"
+              size="icon"
+              aria-label="Ask a follow-up about this report"
+              onClick={onAskFollowUp}
+            >
+              <IconMessageCircle size={18} />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent side="bottom">Ask a follow-up</TooltipContent>
+        </Tooltip>
+      )}
       <ReportShareButton shareUrl={shareUrl} />
     </Group>
   );
diff --git a/app/src/pages/report-output/ReportOutputLayout.tsx b/app/src/pages/report-output/ReportOutputLayout.tsx
index 780b2ea4a..b5d2b893f 100644
--- a/app/src/pages/report-output/ReportOutputLayout.tsx
+++ b/app/src/pages/report-output/ReportOutputLayout.tsx
@@ -1,5 +1,7 @@
+import { useState } from 'react';
 import { IconCalendar, IconClock } from '@tabler/icons-react';
 import { BackBreadcrumb } from '@/components/common/BackBreadcrumb';
+import { ChatDrawer } from '@/components/report/ChatDrawer';
 import { ReportActionButtons } from '@/components/report/ReportActionButtons';
 import { SharedReportTag } from '@/components/report/SharedReportTag';
 import { Container, Group, Stack, Text, Title } from '@/components/ui';
@@ -19,6 +21,10 @@ interface ReportOutputLayoutProps {
   onSave?: () => void;
   onView?: () => void;
   onReproduce?: () => void;
+  /** Plain-English summary of the scenario and headline figures shown in
+   *  this report. When provided, an "Ask a follow-up" button opens a chat
+   *  drawer seeded with this context. Omit to hide the button entirely. */
+  chatScenarioContext?: string;
   children: React.ReactNode;
 }
 
@@ -46,8 +52,10 @@ export default function ReportOutputLayout({
   onSave,
   onView,
   onReproduce,
+  chatScenarioContext,
   children,
 }: ReportOutputLayoutProps) {
+  const [chatOpen, setChatOpen] = useState(false);
   return (
     <Container size="xl" className="tw:px-xl">
       <Stack className="tw:gap-xl">
@@ -85,6 +93,7 @@ export default function ReportOutputLayout({
               onSave={onSave}
               onView={onView}
               onReproduce={onReproduce}
+              onAskFollowUp={chatScenarioContext ? () => setChatOpen(true) : undefined}
             />
           </Group>
 
@@ -116,6 +125,13 @@ export default function ReportOutputLayout({
         {/* Content */}
         {children}
       </Stack>
+      {chatScenarioContext && (
+        <ChatDrawer
+          open={chatOpen}
+          onOpenChange={setChatOpen}
+          scenarioContext={chatScenarioContext}
+        />
+      )}
     </Container>
   );
 }

From 77bafc871f925cb081a3768b0a8b84001a03c74a Mon Sep 17 00:00:00 2001
From: SakshiKekre <sakshi.kekre@gmail.com>
Date: Wed, 13 May 2026 02:08:15 -0700
Subject: [PATCH 2/6] Use process.env not import.meta.env; fix prettier import
 format
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

CI failures were from leaning on import.meta.env (Vite-only) in code
that's also built by Next.js for calculator-app. Switch to
NEXT_PUBLIC_UK_CHAT_ORIGIN — works in Next.js natively, no shim. Also
collapse the icon import to one line to satisfy prettier.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/src/components/report/ChatDrawer.tsx          | 2 +-
 app/src/components/report/ReportActionButtons.tsx | 7 +------
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/app/src/components/report/ChatDrawer.tsx b/app/src/components/report/ChatDrawer.tsx
index 3fdb07b69..f7fb3a5a1 100644
--- a/app/src/components/report/ChatDrawer.tsx
+++ b/app/src/components/report/ChatDrawer.tsx
@@ -17,7 +17,7 @@ interface ChatDrawerProps {
 }
 
 const CHAT_ORIGIN =
-  import.meta.env.VITE_UK_CHAT_ORIGIN || 'https://policyengine-uk-chat.vercel.app';
+  process.env.NEXT_PUBLIC_UK_CHAT_ORIGIN || 'https://policyengine-uk-chat.vercel.app';
 
 function buildChatUrl(scenarioContext: string): string {
   const params = new URLSearchParams({ scenario_context: scenarioContext });
diff --git a/app/src/components/report/ReportActionButtons.tsx b/app/src/components/report/ReportActionButtons.tsx
index 0ff47be04..53ca585dc 100644
--- a/app/src/components/report/ReportActionButtons.tsx
+++ b/app/src/components/report/ReportActionButtons.tsx
@@ -1,9 +1,4 @@
-import {
-  IconBookmark,
-  IconCode,
-  IconMessageCircle,
-  IconSettings,
-} from '@tabler/icons-react';
+import { IconBookmark, IconCode, IconMessageCircle, IconSettings } from '@tabler/icons-react';
 import { Group } from '@/components/ui';
 import { Button } from '@/components/ui/button';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';

From 8c4445fd4bcd25d483ddfbdc024b2ac1306788a1 Mon Sep 17 00:00:00 2001
From: SakshiKekre <sakshi.kekre@gmail.com>
Date: Wed, 13 May 2026 02:14:04 -0700
Subject: [PATCH 3/6] Wire chat drawer on UK report output page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Composes a minimal scenario context (country, year, label, model/data
version) and passes it to ReportOutputLayout. Restricts to UK reports —
the chat backend doesn't model US policy. With this, the "Ask a
follow-up" button now actually renders on UK report pages.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/src/pages/ReportOutput.page.tsx | 21 +++++++++++++++++++++
 1 file changed, 21 insertions(+)

diff --git a/app/src/pages/ReportOutput.page.tsx b/app/src/pages/ReportOutput.page.tsx
index 9e76ae829..4d7575645 100644
--- a/app/src/pages/ReportOutput.page.tsx
+++ b/app/src/pages/ReportOutput.page.tsx
@@ -301,6 +301,26 @@ export default function ReportOutputPage({
     (window as any).__journeyProfiler?.markEvent('report-output-ready', 'render');
   }
 
+  // Compose the scenario context the chat drawer will pass to uk-chat. Only
+  // built for UK reports since the chat backend doesn't model US policy.
+  // Kept lean for v1 — just the identifying facts. Headline numbers are not
+  // included yet; the chat re-computes on demand.
+  const chatScenarioContext =
+    countryId === 'uk' && report
+      ? [
+          'The user is viewing a PolicyEngine report.',
+          `Country: UK`,
+          report.year ? `Year: ${report.year}` : null,
+          displayLabel ? `Report label: ${displayLabel}` : null,
+          versionMetadata?.modelVersion ? `Model version: ${versionMetadata.modelVersion}` : null,
+          versionMetadata?.dataVersion ? `Data version: ${versionMetadata.dataVersion}` : null,
+          '',
+          "Use this as background for the user's follow-up question. If they ask about figures already shown in the report, quote them; otherwise run a fresh simulation against the same year and country.",
+        ]
+          .filter(Boolean)
+          .join('\n')
+      : undefined;
+
   return (
     <ReportYearProvider year={report?.year ?? null}>
       {saveResult && (
@@ -330,6 +350,7 @@ export default function ReportOutputPage({
         onSave={handleSave}
         onView={handleView}
         onReproduce={handleReproduce}
+        chatScenarioContext={chatScenarioContext}
       >
         <ErrorBoundary
           fallback={(error, errorInfo) => (

From 37ad7dffabd9f21efcef096760968a14d704e994 Mon Sep 17 00:00:00 2001
From: SakshiKekre <sakshi.kekre@gmail.com>
Date: Fri, 15 May 2026 09:52:09 -0700
Subject: [PATCH 4/6] Append Vercel protection-bypass token to chat iframe URL

When NEXT_PUBLIC_UK_CHAT_BYPASS_TOKEN is set, the iframe URL carries
the Vercel "Protection Bypass for Automation" secret so the embedded
chat preview deploy serves through deployment protection. samesitenone
on set-bypass-cookie is required for the cookie to flow on cross-origin
iframe requests. Empty / unset in production where the chat is public.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 app/src/components/report/ChatDrawer.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/app/src/components/report/ChatDrawer.tsx b/app/src/components/report/ChatDrawer.tsx
index f7fb3a5a1..bfd07cb83 100644
--- a/app/src/components/report/ChatDrawer.tsx
+++ b/app/src/components/report/ChatDrawer.tsx
@@ -19,12 +19,23 @@ interface ChatDrawerProps {
 const CHAT_ORIGIN =
   process.env.NEXT_PUBLIC_UK_CHAT_ORIGIN || 'https://policyengine-uk-chat.vercel.app';
 
+// Vercel "Protection Bypass for Automation" secret — only needed when the
+// iframe targets a protected preview deployment. Production chat is public,
+// so this is empty there and the param is omitted.
+const CHAT_BYPASS_TOKEN = process.env.NEXT_PUBLIC_UK_CHAT_BYPASS_TOKEN || '';
+
 function buildChatUrl(scenarioContext: string): string {
   const params = new URLSearchParams({ scenario_context: scenarioContext });
   // model_backend=uk_python so the chat runs against the same Python engine
   // app-v2's reports use — needed for chat numbers to be comparable to the
   // report numbers the user is looking at.
   params.set('model_backend', 'uk_python');
+  if (CHAT_BYPASS_TOKEN) {
+    params.set('x-vercel-protection-bypass', CHAT_BYPASS_TOKEN);
+    // samesitenone is required so the cookie Vercel sets is sent on
+    // cross-origin iframe requests in modern browsers (Lax/Strict won't be).
+    params.set('x-vercel-set-bypass-cookie', 'samesitenone');
+  }
   return `${CHAT_ORIGIN}/?${params.toString()}`;
 }
 

From e81fc2f24c92ad23cafd0ead08912cf03c7a3b65 Mon Sep 17 00:00:00 2001
From: SakshiKekre <sakshi.kekre@gmail.com>
Date: Wed, 27 May 2026 09:52:28 -0700
Subject: [PATCH 5/6] Add standalone /chat page and Reports-page CTA
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Complements the existing report-page drawer with the alternative positioning:
a full-page chat surface for users who want to ask without building a report.

- New shared util chatUrl.ts — buildChatUrl + iframe sandbox constant.
  Both ChatDrawer (supplement) and the new Chat.page (alternative) consume
  it so any URL/bypass-token tweak lives in one place.
- ChatDrawer refactored to use the shared util.
- New Chat.page renders the chat iframe full-height with a brief intro.
  Reachable at /:countryId/chat via both the Vite-era CalculatorRouter and
  the Next.js route wrapper in calculator-app.
- New AskChatCta — tinted banner with sparkle icon + "New" badge on
  Reports.page (UK-only). Sits above the table, doesn't compete with the
  primary "Create report" action.
---
 app/src/CalculatorRouter.tsx                  |  6 ++
 app/src/components/chat/AskChatCta.tsx        | 96 +++++++++++++++++++
 app/src/components/report/ChatDrawer.tsx      | 32 +------
 app/src/pages/Chat.page.tsx                   | 57 +++++++++++
 app/src/pages/Reports.page.tsx                |  6 ++
 app/src/utils/chatUrl.ts                      | 42 ++++++++
 .../[countryId]/(calculator)/chat/page.tsx    |  7 ++
 7 files changed, 217 insertions(+), 29 deletions(-)
 create mode 100644 app/src/components/chat/AskChatCta.tsx
 create mode 100644 app/src/pages/Chat.page.tsx
 create mode 100644 app/src/utils/chatUrl.ts
 create mode 100644 calculator-app/src/app/[countryId]/(calculator)/chat/page.tsx

diff --git a/app/src/CalculatorRouter.tsx b/app/src/CalculatorRouter.tsx
index 4d9895004..ec1325ed4 100644
--- a/app/src/CalculatorRouter.tsx
+++ b/app/src/CalculatorRouter.tsx
@@ -5,6 +5,7 @@
 import { createBrowserRouter, Navigate, Outlet, RouterProvider, useParams } from 'react-router-dom';
 import PathwayLayout from './components/PathwayLayout';
 import StandardLayout from './components/StandardLayout';
+import ChatPage from './pages/Chat.page';
 import NotFoundPage from './pages/NotFound.page';
 import PoliciesPage from './pages/Policies.page';
 import PopulationsPage from './pages/Populations.page';
@@ -119,6 +120,11 @@ const router = createBrowserRouter(
                   path: 'reports',
                   element: <ReportsPage />,
                 },
+                {
+                  // UK-only chat surface; the CTA that points here is UK-gated.
+                  path: 'chat',
+                  element: <ChatPage />,
+                },
                 {
                   path: 'simulations',
                   element: <SimulationsPage />,
diff --git a/app/src/components/chat/AskChatCta.tsx b/app/src/components/chat/AskChatCta.tsx
new file mode 100644
index 000000000..4c6c00fbc
--- /dev/null
+++ b/app/src/components/chat/AskChatCta.tsx
@@ -0,0 +1,96 @@
+/**
+ * AskChatCta — attention-grabbing banner that routes users to the standalone
+ * chat surface (alternative positioning of policyengine-uk-chat).
+ *
+ * Designed to sit above the IngredientReadView on the Reports page. The visual
+ * treatment (tinted background, sparkle icon, "New" badge) is meant to draw
+ * attention without competing with the primary "Create report" button — they
+ * occupy different rows and tell different stories.
+ */
+import { IconArrowRight, IconSparkles } from '@tabler/icons-react';
+import { Text } from '@/components/ui';
+import { colors, spacing, typography } from '@/designTokens';
+
+interface AskChatCtaProps {
+  onClick: () => void;
+}
+
+export function AskChatCta({ onClick }: AskChatCtaProps) {
+  return (
+    <button
+      onClick={onClick}
+      type="button"
+      className="tw:group tw:w-full tw:text-left tw:cursor-pointer tw:transition-all tw:hover:shadow-md"
+      style={{
+        backgroundColor: colors.primary[50],
+        border: `1px solid ${colors.primary[200]}`,
+        borderRadius: spacing.radius.container,
+        padding: `${spacing.lg} ${spacing.xl}`,
+        marginBottom: spacing.lg,
+        display: 'flex',
+        alignItems: 'center',
+        gap: spacing.lg,
+      }}
+    >
+      <div
+        style={{
+          flexShrink: 0,
+          width: '40px',
+          height: '40px',
+          borderRadius: '50%',
+          backgroundColor: colors.primary[500],
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <IconSparkles size={20} color={colors.white} />
+      </div>
+
+      <div className="tw:flex-1 tw:min-w-0">
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: spacing.sm,
+            marginBottom: '2px',
+          }}
+        >
+          <Text
+            style={{
+              fontSize: typography.fontSize.base,
+              fontWeight: typography.fontWeight.semibold,
+              color: colors.text.title,
+            }}
+          >
+            Or just ask
+          </Text>
+          <span
+            style={{
+              fontSize: typography.fontSize.xs,
+              fontWeight: typography.fontWeight.medium,
+              color: colors.primary[700],
+              backgroundColor: colors.primary[100],
+              padding: '2px 8px',
+              borderRadius: '999px',
+              textTransform: 'uppercase',
+              letterSpacing: '0.05em',
+            }}
+          >
+            New
+          </span>
+        </div>
+        <Text size="sm" style={{ color: colors.text.secondary }}>
+          Skip the builder and ask a policy question in plain English. The assistant runs the
+          simulation for you.
+        </Text>
+      </div>
+
+      <IconArrowRight
+        size={20}
+        color={colors.primary[600]}
+        className="tw:transition-transform tw:group-hover:translate-x-1"
+      />
+    </button>
+  );
+}
diff --git a/app/src/components/report/ChatDrawer.tsx b/app/src/components/report/ChatDrawer.tsx
index bfd07cb83..3ef07f875 100644
--- a/app/src/components/report/ChatDrawer.tsx
+++ b/app/src/components/report/ChatDrawer.tsx
@@ -7,6 +7,7 @@
  * without us having to copy/parse report data into a structured payload.
  */
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+import { buildChatUrl, CHAT_IFRAME_SANDBOX } from '@/utils/chatUrl';
 
 interface ChatDrawerProps {
   open: boolean;
@@ -16,29 +17,6 @@ interface ChatDrawerProps {
   scenarioContext: string;
 }
 
-const CHAT_ORIGIN =
-  process.env.NEXT_PUBLIC_UK_CHAT_ORIGIN || 'https://policyengine-uk-chat.vercel.app';
-
-// Vercel "Protection Bypass for Automation" secret — only needed when the
-// iframe targets a protected preview deployment. Production chat is public,
-// so this is empty there and the param is omitted.
-const CHAT_BYPASS_TOKEN = process.env.NEXT_PUBLIC_UK_CHAT_BYPASS_TOKEN || '';
-
-function buildChatUrl(scenarioContext: string): string {
-  const params = new URLSearchParams({ scenario_context: scenarioContext });
-  // model_backend=uk_python so the chat runs against the same Python engine
-  // app-v2's reports use — needed for chat numbers to be comparable to the
-  // report numbers the user is looking at.
-  params.set('model_backend', 'uk_python');
-  if (CHAT_BYPASS_TOKEN) {
-    params.set('x-vercel-protection-bypass', CHAT_BYPASS_TOKEN);
-    // samesitenone is required so the cookie Vercel sets is sent on
-    // cross-origin iframe requests in modern browsers (Lax/Strict won't be).
-    params.set('x-vercel-set-bypass-cookie', 'samesitenone');
-  }
-  return `${CHAT_ORIGIN}/?${params.toString()}`;
-}
-
 export function ChatDrawer({ open, onOpenChange, scenarioContext }: ChatDrawerProps) {
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
@@ -51,14 +29,10 @@ export function ChatDrawer({ open, onOpenChange, scenarioContext }: ChatDrawerPr
         </SheetHeader>
         {open && (
           <iframe
-            src={buildChatUrl(scenarioContext)}
+            src={buildChatUrl({ scenarioContext })}
             title="PolicyEngine chat"
             className="tw:flex-1 tw:w-full tw:border-0"
-            // The chat needs the same permissions it has standalone:
-            // forms (for sign-in if the user wants to), scripts (everything
-            // is JS), same-origin (so SSE/streaming works), clipboard for
-            // copy buttons. No top-navigation — keep navigation here.
-            sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-read allow-clipboard-write"
+            sandbox={CHAT_IFRAME_SANDBOX}
           />
         )}
       </SheetContent>
diff --git a/app/src/pages/Chat.page.tsx b/app/src/pages/Chat.page.tsx
new file mode 100644
index 000000000..4bbe83989
--- /dev/null
+++ b/app/src/pages/Chat.page.tsx
@@ -0,0 +1,57 @@
+/**
+ * Chat.page — full-page chat surface.
+ *
+ * Alternative positioning of policyengine-uk-chat: the user comes here
+ * directly (no report) and asks a question. Complements ChatDrawer, which
+ * is the supplement positioning (drawer attached to a report). Both surfaces
+ * share buildChatUrl() so the bypass-token / model_backend plumbing stays
+ * in one place.
+ *
+ * Reachable at /:countryId/chat — registered in both CalculatorRouter (Vite
+ * legacy build) and calculator-app/src/app/[countryId]/(calculator)/chat/
+ * (Next.js production build). The CTA that points here is UK-gated; the
+ * chat backend doesn't model US policy yet.
+ */
+import { Text, Title } from '@/components/ui';
+import { colors, spacing, typography } from '@/designTokens';
+import { buildChatUrl, CHAT_IFRAME_SANDBOX } from '@/utils/chatUrl';
+
+export default function ChatPage() {
+  return (
+    <div className="tw:flex tw:flex-col tw:h-full tw:min-h-0">
+      <div style={{ marginBottom: spacing.lg }}>
+        <Title
+          order={1}
+          style={{
+            fontSize: typography.fontSize.base,
+            fontWeight: typography.fontWeight.semibold,
+            color: colors.text.title,
+            marginBottom: spacing.sm,
+          }}
+        >
+          Ask PolicyEngine
+        </Title>
+        <Text size="md" style={{ color: colors.text.secondary, maxWidth: '600px' }}>
+          Ask a policy question in plain English. The assistant runs a UK microsimulation behind the
+          scenes and shows its working.
+        </Text>
+      </div>
+
+      <div
+        className="tw:flex-1 tw:min-h-0"
+        style={{
+          borderRadius: spacing.radius.container,
+          border: `1px solid ${colors.border.light}`,
+          overflow: 'hidden',
+        }}
+      >
+        <iframe
+          src={buildChatUrl()}
+          title="PolicyEngine chat"
+          className="tw:w-full tw:h-full tw:border-0 tw:block"
+          sandbox={CHAT_IFRAME_SANDBOX}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/app/src/pages/Reports.page.tsx b/app/src/pages/Reports.page.tsx
index 9b130993c..b8b515657 100644
--- a/app/src/pages/Reports.page.tsx
+++ b/app/src/pages/Reports.page.tsx
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 import { IconSettings } from '@tabler/icons-react';
 import { useSelector } from 'react-redux';
+import { AskChatCta } from '@/components/chat/AskChatCta';
 import {
   BulletsValue,
   ColumnConfig,
@@ -52,6 +53,10 @@ export default function ReportsPage() {
     nav.push(targetPath);
   };
 
+  const handleOpenChat = () => {
+    nav.push(`/${countryId}/chat`);
+  };
+
   const handleCloseRename = () => {
     closeRename();
     setRenamingReportId(null);
@@ -209,6 +214,7 @@ export default function ReportsPage() {
   return (
     <>
       <Stack gap="md">
+        {countryId === 'uk' && <AskChatCta onClick={handleOpenChat} />}
         <IngredientReadView
           ingredient="report"
           title="Your saved reports"
diff --git a/app/src/utils/chatUrl.ts b/app/src/utils/chatUrl.ts
new file mode 100644
index 000000000..df25aa1ac
--- /dev/null
+++ b/app/src/utils/chatUrl.ts
@@ -0,0 +1,42 @@
+/**
+ * Shared URL builder for embedding policyengine-uk-chat.
+ *
+ * Used by both the supplement surface (ChatDrawer on a report page) and the
+ * alternative surface (the standalone /chat page). Centralising it here means
+ * one place to swap the preview URL, add params, or change the bypass flow.
+ */
+
+const CHAT_ORIGIN =
+  process.env.NEXT_PUBLIC_UK_CHAT_ORIGIN || 'https://policyengine-uk-chat.vercel.app';
+
+// Vercel "Protection Bypass for Automation" secret — only needed when the
+// iframe targets a protected preview deployment. Production chat is public,
+// so this is empty there and the param is omitted.
+const CHAT_BYPASS_TOKEN = process.env.NEXT_PUBLIC_UK_CHAT_BYPASS_TOKEN || '';
+
+interface BuildChatUrlOptions {
+  /** Optional report-derived context. Forwarded as a system-prompt seed. */
+  scenarioContext?: string;
+}
+
+export function buildChatUrl({ scenarioContext }: BuildChatUrlOptions = {}): string {
+  const params = new URLSearchParams();
+  if (scenarioContext) {
+    params.set('scenario_context', scenarioContext);
+  }
+  // model_backend=uk_python so the chat runs against the same Python engine
+  // app-v2's reports use — needed for chat numbers to be comparable to the
+  // report numbers the user is looking at.
+  params.set('model_backend', 'uk_python');
+  if (CHAT_BYPASS_TOKEN) {
+    params.set('x-vercel-protection-bypass', CHAT_BYPASS_TOKEN);
+    // samesitenone is required so the cookie Vercel sets is sent on
+    // cross-origin iframe requests in modern browsers (Lax/Strict won't be).
+    params.set('x-vercel-set-bypass-cookie', 'samesitenone');
+  }
+  return `${CHAT_ORIGIN}/?${params.toString()}`;
+}
+
+/** Permissions the iframe needs to match the chat's standalone behaviour. */
+export const CHAT_IFRAME_SANDBOX =
+  'allow-scripts allow-same-origin allow-forms allow-popups allow-clipboard-read allow-clipboard-write';
diff --git a/calculator-app/src/app/[countryId]/(calculator)/chat/page.tsx b/calculator-app/src/app/[countryId]/(calculator)/chat/page.tsx
new file mode 100644
index 000000000..1d704e635
--- /dev/null
+++ b/calculator-app/src/app/[countryId]/(calculator)/chat/page.tsx
@@ -0,0 +1,7 @@
+"use client";
+
+import ChatPage from "@/pages/Chat.page";
+
+export default function ChatRoute() {
+  return <ChatPage />;
+}

From 05270df798184444a093dcdb73ff61217ee0cf96 Mon Sep 17 00:00:00 2001
From: SakshiKekre <sakshi.kekre@gmail.com>
Date: Tue, 2 Jun 2026 09:55:27 -0700
Subject: [PATCH 6/6] Serve standalone chat as multizone child instead of
 iframe page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The previous commit added /uk/chat as a Next.js page in the calculator app
embedding the chat via iframe. Per CLAUDE.md, cross-origin iframes are
broken-by-design for Next.js apps (BAILOUT_TO_CLIENT_SIDE_RENDERING
renders blank). Switching to a Vercel rewrite is the convention this
codebase already uses for every other zone app — see appZoneRoutes.ts.

What changes:
- Add /uk/chat → policyengine-uk-chat.vercel.app entry in appZoneRoutes.
- Delete the standalone iframe page (Chat.page.tsx, the Next.js wrapper,
  the Vite-router entry). Reports-page banner now navigates to the
  website host (policyengine.org/uk/chat) via window.location.href,
  which the rewrite serves directly.
- Skip the chat destination in the shell audit until the chat repo
  ships its own PolicyEngine-shell-compliant header. Tracked separately.

ChatDrawer (supplement) keeps using the chatUrl helper since it still
needs an iframe.
---
 .github/scripts/audit-app-zone-shell.mjs      | 120 ++++++++++++------
 app/src/CalculatorRouter.tsx                  |   6 -
 app/src/pages/Chat.page.tsx                   |  57 ---------
 app/src/pages/Reports.page.tsx                |   9 +-
 .../[countryId]/(calculator)/chat/page.tsx    |   7 -
 website/src/data/appZoneRoutes.ts             |  24 +++-
 6 files changed, 104 insertions(+), 119 deletions(-)
 delete mode 100644 app/src/pages/Chat.page.tsx
 delete mode 100644 calculator-app/src/app/[countryId]/(calculator)/chat/page.tsx

diff --git a/.github/scripts/audit-app-zone-shell.mjs b/.github/scripts/audit-app-zone-shell.mjs
index 1964e806a..b57bed2ef 100644
--- a/.github/scripts/audit-app-zone-shell.mjs
+++ b/.github/scripts/audit-app-zone-shell.mjs
@@ -22,6 +22,9 @@ const SKIP_IF_DESTINATION_CONTAINS = [
   "/api/",
   "/robots.txt",
   "/sitemap.xml",
+  // UK chat assistant — the chat app does not yet render the PolicyEngine
+  // site shell. Skip until the chat repo ships its own shell-compliant header.
+  "policyengine-uk-chat.vercel.app",
 ];
 
 const ERROR_PATTERNS = [
@@ -97,7 +100,9 @@ export function extractRoutes(source) {
       /deepDestination:\s*"([^"]+)"/,
     )?.[1];
     if (!sourcePath) continue;
-    if (SKIP_IF_DESTINATION_CONTAINS.some((part) => destination.includes(part))) {
+    if (
+      SKIP_IF_DESTINATION_CONTAINS.some((part) => destination.includes(part))
+    ) {
       continue;
     }
 
@@ -284,9 +289,13 @@ async function discoverSitemapRoutes(
   allowDestinationFallback,
   maxSitemapRoutes,
 ) {
-  const sitemapUrls = [appendPath(resolveUrl(baseUrl, route.source), "/sitemap.xml")];
+  const sitemapUrls = [
+    appendPath(resolveUrl(baseUrl, route.source), "/sitemap.xml"),
+  ];
   if (allowDestinationFallback) {
-    sitemapUrls.push(appendPath(resolveUrl(baseUrl, route.destination), "/sitemap.xml"));
+    sitemapUrls.push(
+      appendPath(resolveUrl(baseUrl, route.destination), "/sitemap.xml"),
+    );
   }
 
   const discovered = new Map();
@@ -297,7 +306,8 @@ async function discoverSitemapRoutes(
 
     for (const loc of extractSitemapLocs(xml)) {
       const source = sourcePathFromSitemapLoc(loc, route, baseUrl);
-      if (!source || source === route.source || discovered.has(source)) continue;
+      if (!source || source === route.source || discovered.has(source))
+        continue;
 
       discovered.set(source, {
         source,
@@ -371,7 +381,11 @@ export function inspectTopShellData(
       continue;
     }
 
-    parts.push(element.textContent ?? "", element.ariaLabel ?? "", element.alt ?? "");
+    parts.push(
+      element.textContent ?? "",
+      element.ariaLabel ?? "",
+      element.alt ?? "",
+    );
   }
 
   const text = parts.join("\n").replace(/\s+/g, " ").trim();
@@ -419,10 +433,16 @@ async function inspectShell(page, url, timeout) {
       waitUntil: "domcontentloaded",
       timeout,
     });
-    await page.waitForLoadState("networkidle", { timeout: 10000 }).catch(() => {});
+    await page
+      .waitForLoadState("networkidle", { timeout: 10000 })
+      .catch(() => {});
     await page.waitForTimeout(500);
   } catch (error) {
-    return { ok: false, status: null, reason: `navigation failed: ${error.message}` };
+    return {
+      ok: false,
+      status: null,
+      reason: `navigation failed: ${error.message}`,
+    };
   }
 
   const status = response?.status() ?? null;
@@ -430,9 +450,10 @@ async function inspectShell(page, url, timeout) {
     return { ok: false, status, reason: `HTTP ${status}` };
   }
 
-  const bodyText = await page.locator("body").innerText({ timeout: 5000 }).catch(
-    () => "",
-  );
+  const bodyText = await page
+    .locator("body")
+    .innerText({ timeout: 5000 })
+    .catch(() => "");
   if (bodyText.trim().length < 50) {
     return { ok: false, status, reason: "empty or nearly empty page" };
   }
@@ -469,7 +490,13 @@ async function inspectShell(page, url, timeout) {
   return { ok: true, status, reason: "PolicyEngine shell present" };
 }
 
-async function auditRoute(browser, route, baseUrl, timeout, allowDestinationFallback) {
+async function auditRoute(
+  browser,
+  route,
+  baseUrl,
+  timeout,
+  allowDestinationFallback,
+) {
   const page = await browser.newPage({
     viewport: { width: 1440, height: 1000 },
     userAgent: "policyengine-app-zone-shell-audit/1.0",
@@ -506,9 +533,8 @@ async function runWithConcurrency(items, concurrency, worker) {
   }
 
   await Promise.all(
-    Array.from(
-      { length: Math.min(concurrency, items.length) },
-      () => runWorker(),
+    Array.from({ length: Math.min(concurrency, items.length) }, () =>
+      runWorker(),
     ),
   );
   return results;
@@ -551,7 +577,9 @@ export async function main(argv = process.argv.slice(2), env = process.env) {
     maxSitemapRoutes,
   );
 
-  console.log(`Auditing ${routes.length} app-zone route(s) for PolicyEngine shell.`);
+  console.log(
+    `Auditing ${routes.length} app-zone route(s) for PolicyEngine shell.`,
+  );
   console.log(`Base URL: ${baseUrl}\n`);
   if (routes.length > baseRoutes.length) {
     console.log(
@@ -561,32 +589,40 @@ export async function main(argv = process.argv.slice(2), env = process.env) {
 
   const { chromium } = await import("playwright");
   const browser = await chromium.launch();
-  const results = await runWithConcurrency(routes, concurrency, async (route) => {
-    const result = await auditRoute(
-      browser,
-      route,
-      baseUrl,
-      timeout,
-      allowDestinationFallback,
-    );
-    const mark = result.ok ? "OK" : "FAIL";
-    console.log(`${mark} ${result.source}`);
-    console.log(`    ${result.reason}`);
-    if (result.usedFallback) {
-      console.log("    tested destination directly because source returned 404");
-    }
-    if (result.discoveredFromSitemap) {
-      console.log(`    discovered from ${result.discoveredFromSitemap}`);
-    }
-    if (result.testedUrl !== result.sourceUrl) {
-      console.log(`    tested ${result.testedUrl}`);
-    }
-    return result;
-  });
+  const results = await runWithConcurrency(
+    routes,
+    concurrency,
+    async (route) => {
+      const result = await auditRoute(
+        browser,
+        route,
+        baseUrl,
+        timeout,
+        allowDestinationFallback,
+      );
+      const mark = result.ok ? "OK" : "FAIL";
+      console.log(`${mark} ${result.source}`);
+      console.log(`    ${result.reason}`);
+      if (result.usedFallback) {
+        console.log(
+          "    tested destination directly because source returned 404",
+        );
+      }
+      if (result.discoveredFromSitemap) {
+        console.log(`    discovered from ${result.discoveredFromSitemap}`);
+      }
+      if (result.testedUrl !== result.sourceUrl) {
+        console.log(`    tested ${result.testedUrl}`);
+      }
+      return result;
+    },
+  );
   await browser.close();
 
   const failures = results.filter((result) => !result.ok);
-  console.log(`\n${results.length - failures.length}/${results.length} app-zone routes have the PolicyEngine shell.`);
+  console.log(
+    `\n${results.length - failures.length}/${results.length} app-zone routes have the PolicyEngine shell.`,
+  );
 
   if (failures.length > 0) {
     console.error("\nRoutes missing the PolicyEngine shell:");
@@ -595,8 +631,12 @@ export async function main(argv = process.argv.slice(2), env = process.env) {
       console.error(`    source: ${failure.sourceUrl}`);
       console.error(`    destination: ${failure.destination}`);
     }
-    console.error("\nChild apps served through policyengine.org should render the");
-    console.error("PolicyEngine header/nav themselves. Multizone rewrites do not");
+    console.error(
+      "\nChild apps served through policyengine.org should render the",
+    );
+    console.error(
+      "PolicyEngine header/nav themselves. Multizone rewrites do not",
+    );
     console.error("inject the parent app shell into the child response.");
     return 1;
   }
diff --git a/app/src/CalculatorRouter.tsx b/app/src/CalculatorRouter.tsx
index ec1325ed4..4d9895004 100644
--- a/app/src/CalculatorRouter.tsx
+++ b/app/src/CalculatorRouter.tsx
@@ -5,7 +5,6 @@
 import { createBrowserRouter, Navigate, Outlet, RouterProvider, useParams } from 'react-router-dom';
 import PathwayLayout from './components/PathwayLayout';
 import StandardLayout from './components/StandardLayout';
-import ChatPage from './pages/Chat.page';
 import NotFoundPage from './pages/NotFound.page';
 import PoliciesPage from './pages/Policies.page';
 import PopulationsPage from './pages/Populations.page';
@@ -120,11 +119,6 @@ const router = createBrowserRouter(
                   path: 'reports',
                   element: <ReportsPage />,
                 },
-                {
-                  // UK-only chat surface; the CTA that points here is UK-gated.
-                  path: 'chat',
-                  element: <ChatPage />,
-                },
                 {
                   path: 'simulations',
                   element: <SimulationsPage />,
diff --git a/app/src/pages/Chat.page.tsx b/app/src/pages/Chat.page.tsx
deleted file mode 100644
index 4bbe83989..000000000
--- a/app/src/pages/Chat.page.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Chat.page — full-page chat surface.
- *
- * Alternative positioning of policyengine-uk-chat: the user comes here
- * directly (no report) and asks a question. Complements ChatDrawer, which
- * is the supplement positioning (drawer attached to a report). Both surfaces
- * share buildChatUrl() so the bypass-token / model_backend plumbing stays
- * in one place.
- *
- * Reachable at /:countryId/chat — registered in both CalculatorRouter (Vite
- * legacy build) and calculator-app/src/app/[countryId]/(calculator)/chat/
- * (Next.js production build). The CTA that points here is UK-gated; the
- * chat backend doesn't model US policy yet.
- */
-import { Text, Title } from '@/components/ui';
-import { colors, spacing, typography } from '@/designTokens';
-import { buildChatUrl, CHAT_IFRAME_SANDBOX } from '@/utils/chatUrl';
-
-export default function ChatPage() {
-  return (
-    <div className="tw:flex tw:flex-col tw:h-full tw:min-h-0">
-      <div style={{ marginBottom: spacing.lg }}>
-        <Title
-          order={1}
-          style={{
-            fontSize: typography.fontSize.base,
-            fontWeight: typography.fontWeight.semibold,
-            color: colors.text.title,
-            marginBottom: spacing.sm,
-          }}
-        >
-          Ask PolicyEngine
-        </Title>
-        <Text size="md" style={{ color: colors.text.secondary, maxWidth: '600px' }}>
-          Ask a policy question in plain English. The assistant runs a UK microsimulation behind the
-          scenes and shows its working.
-        </Text>
-      </div>
-
-      <div
-        className="tw:flex-1 tw:min-h-0"
-        style={{
-          borderRadius: spacing.radius.container,
-          border: `1px solid ${colors.border.light}`,
-          overflow: 'hidden',
-        }}
-      >
-        <iframe
-          src={buildChatUrl()}
-          title="PolicyEngine chat"
-          className="tw:w-full tw:h-full tw:border-0 tw:block"
-          sandbox={CHAT_IFRAME_SANDBOX}
-        />
-      </div>
-    </div>
-  );
-}
diff --git a/app/src/pages/Reports.page.tsx b/app/src/pages/Reports.page.tsx
index b8b515657..c37fb7cf5 100644
--- a/app/src/pages/Reports.page.tsx
+++ b/app/src/pages/Reports.page.tsx
@@ -14,7 +14,7 @@ import IngredientReadView from '@/components/IngredientReadView';
 import { MultiSimOutputTypeCell } from '@/components/report/MultiSimReportOutputTypeCell';
 import { ReportOutputTypeCell } from '@/components/report/ReportOutputTypeCell';
 import { Stack } from '@/components/ui';
-import { MOCK_USER_ID } from '@/constants';
+import { MOCK_USER_ID, WEBSITE_URL } from '@/constants';
 import { useAppNavigate } from '@/contexts/NavigationContext';
 import { useCurrentCountry } from '@/hooks/useCurrentCountry';
 import { useDisclosure } from '@/hooks/useDisclosure';
@@ -54,7 +54,12 @@ export default function ReportsPage() {
   };
 
   const handleOpenChat = () => {
-    nav.push(`/${countryId}/chat`);
+    // Chat is served as a multizone child on the website host (policyengine.org/uk/chat)
+    // via a Vercel rewrite, not within the calculator app. Use a real cross-origin
+    // navigation rather than the calculator app's router.
+    if (typeof window !== 'undefined') {
+      window.location.href = `${WEBSITE_URL}/${countryId}/chat`;
+    }
   };
 
   const handleCloseRename = () => {
diff --git a/calculator-app/src/app/[countryId]/(calculator)/chat/page.tsx b/calculator-app/src/app/[countryId]/(calculator)/chat/page.tsx
deleted file mode 100644
index 1d704e635..000000000
--- a/calculator-app/src/app/[countryId]/(calculator)/chat/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-"use client";
-
-import ChatPage from "@/pages/Chat.page";
-
-export default function ChatRoute() {
-  return <ChatPage />;
-}
diff --git a/website/src/data/appZoneRoutes.ts b/website/src/data/appZoneRoutes.ts
index 1cb480b80..e830d29f5 100644
--- a/website/src/data/appZoneRoutes.ts
+++ b/website/src/data/appZoneRoutes.ts
@@ -60,8 +60,7 @@ export const appZoneRoutes: AppZoneRoute[] = [
   },
   {
     source: "/us/working-parents-tax-relief-act",
-    destination:
-      "https://wptra.vercel.app/us/working-parents-tax-relief-act",
+    destination: "https://wptra.vercel.app/us/working-parents-tax-relief-act",
   },
   {
     source: "/us/utah-2026-tax-changes",
@@ -74,7 +73,8 @@ export const appZoneRoutes: AppZoneRoute[] = [
   },
   {
     source: "/us/watca",
-    destination: "https://working-americans-tax-cut-act-one.vercel.app/us/watca",
+    destination:
+      "https://working-americans-tax-cut-act-one.vercel.app/us/watca",
   },
   {
     source: "/us/california-wealth-tax",
@@ -110,7 +110,8 @@ export const appZoneRoutes: AppZoneRoute[] = [
   },
   {
     source: "/uk/marriage",
-    destination: "https://marriage-zeta-beryl.vercel.app/us/marriage?country=uk",
+    destination:
+      "https://marriage-zeta-beryl.vercel.app/us/marriage?country=uk",
     deepDestination:
       "https://marriage-zeta-beryl.vercel.app/us/marriage/:path*?country=uk",
   },
@@ -180,8 +181,7 @@ export const appZoneRoutes: AppZoneRoute[] = [
   },
   {
     source: "/us/state-eitcs-ctcs",
-    destination:
-      "https://us-state-eitcs-ctcs.vercel.app/us/state-eitcs-ctcs",
+    destination: "https://us-state-eitcs-ctcs.vercel.app/us/state-eitcs-ctcs",
   },
   {
     source: "/us/2024-election-calculator",
@@ -213,7 +213,8 @@ export const appZoneRoutes: AppZoneRoute[] = [
   },
   {
     source: "/us/ads-dashboard",
-    destination: "https://policyengine-ads-dashboard.vercel.app/us/ads-dashboard",
+    destination:
+      "https://policyengine-ads-dashboard.vercel.app/us/ads-dashboard",
   },
   {
     source: "/us/ai-inequality",
@@ -226,6 +227,15 @@ export const appZoneRoutes: AppZoneRoute[] = [
     deepDestination:
       "https://ai-inequality-theta.vercel.app/us/ai-inequality/:path*?country=uk",
   },
+  {
+    // UK chat assistant — served as a multizone child so the chat lives at
+    // policyengine.org/uk/chat without an iframe. The chat app itself does
+    // not yet render the PolicyEngine site shell, so the shell audit skips
+    // this destination until the chat repo ships its own shell.
+    source: "/uk/chat",
+    destination: "https://policyengine-uk-chat.vercel.app/",
+    deepDestination: "https://policyengine-uk-chat.vercel.app/:path*",
+  },
 ];
 
 export const appZoneAssetRoutes: AppZoneRoute[] = [