@@ -271,6 +271,14 @@ jobs:
         if: matrix.node-version == '22.x'
         run: pnpm --dir showcase/scripts exec playwright install chromium
 
+      - name: Install Chromium for Open Generative UI regression
+        if: ${{ matrix.node-version == '22.x' && matrix.react-version == '19' && contains(steps.select.outputs.projects, '@copilotkit/react-core') }}
+        run: pnpm --dir packages/react-core exec playwright install chromium
+
+      - name: Run Open Generative UI browser tests
+        if: ${{ matrix.node-version == '22.x' && matrix.react-version == '19' && contains(steps.select.outputs.projects, '@copilotkit/react-core') }}
+        run: pnpm nx run @copilotkit/react-core:test:browser
+
       - name: Run Web Inspector browser tests
         if: ${{ matrix.node-version == '22.x' && matrix.react-version == '19' && contains(steps.select.outputs.projects, '@copilotkit/web-inspector') }}
         run: pnpm nx run @copilotkit/web-inspector:test:browser
 
@@ -16,19 +16,7 @@ export const DEFAULT_OPEN_GENERATIVE_UI_DESIGN_SKILL = `When generating UI with
 - Minimal transitions (150ms) for hover/focus states only. No decorative animations.
 - Keep the UI focused and dense — avoid excessive padding. Use compact spacing (8–12px gaps, 10–14px padding in controls).`;
 
-export const GENERATE_SANDBOXED_UI_DESCRIPTION =
-  "Generate sandboxed UI. " +
-  "IMPORTANT: The generated code runs in a sandboxed iframe WITHOUT same-origin access. " +
-  "Do NOT use localStorage, sessionStorage, document.cookie, IndexedDB, or fetch/XMLHttpRequest to same-origin URLs. " +
-  "To communicate with the host application, use Websandbox.connection.remote.<functionName>(args) which returns a Promise.\n\n" +
-  "You CAN use external libraries from CDNs by including <script> or <link> tags in the HTML <head> (e.g., Chart.js, D3, Three.js, x-data-spreadsheet, etc.). " +
-  "CDN resources load normally inside the sandbox.\n\n" +
-  "PARAMETER ORDER IS CRITICAL — generate parameters in exactly this order:\n" +
-  "1. initialHeight + placeholderMessages (shown to user while generating)\n" +
-  "2. css (all styles FIRST — the user sees a placeholder until CSS is complete)\n" +
-  "3. html (streams in live — the user watches the UI build as HTML is generated)\n" +
-  "4. jsFunctions (reusable helper functions)\n" +
-  "5. jsExpressions (applied one-by-one — the user sees each expression take effect)";
+export { GENERATE_SANDBOXED_UI_DESCRIPTION } from "@copilotkit/shared";
 
 export const OpenGenerativeUIContentSchema = z.object({
   initialHeight: z.number().optional(),
 
@@ -0,0 +1,27 @@
+# Open Generative UI browser regressions
+
+Run `pnpm nx run @copilotkit/react-core:test:browser` from the workspace root.
+Install the matching Chromium first with
+`pnpm --dir packages/react-core exec playwright install chromium`.
+
+The harness bundles the real React renderer and Websandbox. No iframe, script
+execution, or browser readiness event is mocked. It listens on localhost only.
+
+- `fixtures/calculator.json` preserves the HTML and JavaScript from PNI-585.
+  Registering `DOMContentLoaded` after sandbox readiness leaves it inert.
+  The supported variant changes only that readiness wrapper into a directly
+  invoked initializer; its counter detects duplicate execution.
+- `fixtures/normal-suggestion.json` is an unmodified gpt-5-mini-2025-08-07 tool
+  response generated with the shared tool description on 2026-10-06. The user
+  message was the normal Calculator App suggestion:
+
+  > Using the generateSandboxedUi tool, build a modern calculator with standard buttons plus labeled metric shortcut buttons that insert their values into the display when clicked. Use sample company data.
+
+Both supported fixtures exercise live expression delivery and saved-content
+replay. Assertions cover arithmetic and metric buttons; the instrumented fixture
+also checks initialization counts, reopening, and denied host/storage access.
+The captured real-model response keeps CI deterministic and credential-free.
+
+This contract change guides newly generated code. It does not rewrite historical
+JavaScript or redispatch document readiness events; existing inert payloads must
+be regenerated.
@@ -0,0 +1,19 @@
+import type { OpenGenerativeUIContent } from "../src/v2/components/OpenGenerativeUIRenderer";
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { OpenGenerativeUIActivityRenderer } from "../src/v2/components/OpenGenerativeUIRenderer";
+
+const root = createRoot(document.getElementById("root")!);
+Object.assign(window, {
+  renderContent(content: OpenGenerativeUIContent, key = "fixture") {
+    root.render(
+      <OpenGenerativeUIActivityRenderer
+        key={key}
+        activityType="open-generative-ui"
+        content={content}
+        message={{}}
+        agent={{}}
+      />,
+    );
+  },
+});
@@ -0,0 +1,13 @@
+{
+  "html": [
+    "<body><div class=\"calculator\" role=\"application\" aria-label=\"Metric calculator\">\n  <div class=\"display\" aria-live=\"polite\">\n    <div class=\"expr\" id=\"expr\">&nbsp;</div>\n    <div class=\"value\" id=\"display\">0</div>\n  </div>\n\n  <div class=\"metrics\" id=\"metrics\">\n    <button class=\"metric-btn\" data-value=\"327700\" aria-label=\"Total Revenue 327,700\">\n      <div class=\"metric-label\">Total Revenue</div>\n      <div class=\"metric-value\">$327,700</div>\n    </button>\n    <button class=\"metric-btn\" data-value=\"6\" aria-label=\"New Customers 6\">\n      <div class=\"metric-label\">New Customers</div>\n      <div class=\"metric-value\">6</div>\n    </button>\n    <button class=\"metric-btn\" data-value=\"94.2\" aria-label=\"Conversion Rate 94.2 percent\">\n      <div class=\"metric-label\">Conversion Rate</div>\n      <div class=\"metric-value\">94.2%</div>\n    </button>\n    <button class=\"metric-btn\" data-value=\"54.23\" aria-label=\"Average Order Value 54.23 dollars\">\n      <div class=\"metric-label\">Avg Order Value</div>\n      <div class=\"metric-value\">$54.23</div>\n    </button>\n  </div>\n\n  <div class=\"keys\" role=\"grid\">\n    <button class=\"btn secondary\" data-action=\"clear\">C</button>\n    <button class=\"btn secondary\" data-action=\"back\">⌫</button>\n    <button class=\"btn secondary\" data-value=\"%\">%</button>\n    <button class=\"btn operator\" data-value=\"/\">÷</button>\n\n    <button class=\"btn\" data-value=\"7\">7</button>\n    <button class=\"btn\" data-value=\"8\">8</button>\n    <button class=\"btn\" data-value=\"9\">9</button>\n    <button class=\"btn operator\" data-value=\"*\">×</button>\n\n    <button class=\"btn\" data-value=\"4\">4</button>\n    <button class=\"btn\" data-value=\"5\">5</button>\n    <button class=\"btn\" data-value=\"6\">6</button>\n    <button class=\"btn operator\" data-value=\"-\">−</button>\n\n    <button class=\"btn\" data-value=\"1\">1</button>\n    <button class=\"btn\" data-value=\"2\">2</button>\n    <button class=\"btn\" data-value=\"3\">3</button>\n    <button class=\"btn operator\" data-value=\"+\">+</button>\n\n    <button class=\"btn\" data-value=\"0\" style=\"grid-column: span 2\">0</button>\n    <button class=\"btn\" data-value=\".\">.</button>\n    <button class=\"btn equal\" data-action=\"equals\">=</button>\n  </div>\n\n  <div class=\"footer\">Metric shortcuts insert sample company values into the display.</div>\n</div></body>"
+  ],
+  "htmlComplete": true,
+  "cssComplete": true,
+  "initialHeight": 700,
+  "jsFunctions": "function sanitizeExpression(expr){ // remove any characters except digits, operators, parentheses, decimal and percent\n  return expr.replace(/[^0-9+\\-*/().% ]/g,'');}\n\nfunction evaluateExpression(expr){ try{\n    // handle percentage: replace 'number%' with '(number/100)'\n    expr = expr.replace(/(\\d+(?:\\.\\d+)?)%/g, '($1/100)');\n    expr = sanitizeExpression(expr);\n    // avoid accidental leading operators\n    if(!expr.trim()) return '0';\n    // Use Function to evaluate simple arithmetic\n    var result = Function('return ' + expr)();\n    if(typeof result === 'number' && !isFinite(result)) return 'Error';\n    if(typeof result === 'number'){\n      // format with up to 6 decimals, trim trailing zeros\n      return Number.isInteger(result)? result.toString() : parseFloat(result.toFixed(6)).toString();\n    }\n    return result.toString();\n  }catch(e){return 'Error';}}\n\nfunction updateDisplay(text, exprText){\n  var display = document.getElementById('display');\n  var expr = document.getElementById('expr');\n  display.textContent = text;\n  expr.textContent = exprText || '\\u00A0';\n}\n\nfunction insertValue(val){\n  var display = document.getElementById('display');\n  var current = display.textContent || '0';\n  // if current is '0' or Error, replace\n  if(current === '0' || current === 'Error'){\n    updateDisplay(val.toString());\n  } else {\n    updateDisplay(current + val.toString());\n  }\n}\n\nfunction handleButtonClick(btn){\n  var action = btn.getAttribute('data-action');\n  var value = btn.getAttribute('data-value');\n  var displayEl = document.getElementById('display');\n  var exprEl = document.getElementById('expr');\n  var cur = displayEl.textContent || '';\n\n  if(action === 'clear'){\n    updateDisplay('0','');\n    return;\n  }\n  if(action === 'back'){\n    if(cur.length <= 1){ updateDisplay('0',''); }\n    else updateDisplay(cur.slice(0,-1));\n    return;\n  }\n  if(action === 'equals'){\n    var result = evaluateExpression(cur);\n    updateDisplay(result, cur + ' =');\n    return;\n  }\n  if(value){\n    // numeric or operator\n    // If current is result from last evaluation (contains '=' in expr), reset\n    if(exprEl.textContent && exprEl.textContent.indexOf('=')!==-1){ updateDisplay('0',''); }\n    // Insert value\n    insertValue(value);\n  }\n}\n",
+  "jsExpressions": [
+    "document.addEventListener('DOMContentLoaded', function(){\n  // wire metric buttons\n  document.querySelectorAll('.metric-btn').forEach(function(btn){\n    btn.addEventListener('click', function(){\n      var v = btn.getAttribute('data-value');\n      // Insert with parentheses if it's a large number to allow arithmetic\n      insertValue('('+v+')');\n    });\n  });\n\n  // wire calculator buttons\n  document.querySelectorAll('.btn').forEach(function(btn){\n    btn.addEventListener('click', function(){ handleButtonClick(btn); });\n  });\n\n  // keyboard support\n  document.addEventListener('keydown', function(e){\n    var allowed = '0123456789+-*/().%';\n    if(allowed.indexOf(e.key) !== -1){ insertValue(e.key); e.preventDefault(); }\n    else if(e.key === 'Enter'){ handleButtonClick(document.querySelector('[data-action=\"equals\"]')); e.preventDefault(); }\n    else if(e.key === 'Backspace'){ handleButtonClick(document.querySelector('[data-action=\"back\"]')); e.preventDefault(); }\n    else if(e.key === 'Escape'){ handleButtonClick(document.querySelector('[data-action=\"clear\"]')); e.preventDefault(); }\n  });\n\n  // initialize\n  updateDisplay('0','');\n});"
+  ],
+  "generating": false
+}