@opengeni/react 5.1.0-canary.0 → 5.2.0-canary.0

package/dist/{chunk-BRFMGY4L.js → chunk-UGMKPUEM.js}

@@ -11,7 +11,8 @@ import {
   isSiteHttpRequest,
   serveSiteHttp
 } from "@opengeni/sdk/site";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
+import { resolveSiteClientScript } from "@opengeni/sdk/site-document";
 import { jsx } from "react/jsx-runtime";
 var PUBLISHED_HTML_ARTIFACT_IFRAME_SANDBOX = [
   "allow-downloads",
@@ -31,6 +32,7 @@ var SITE_BRIDGE_BOOTSTRAP_SCRIPT = `<script>(()=>{const key=${JSON.stringify(
 )}||data.version!==${OPENGENI_SITE_BRIDGE_VERSION}||event.ports.length!==1)return;const port=event.ports[0];const previous=window[key]?.port;if(previous&&previous!==port)previous.close();Object.defineProperty(window,key,{configurable:true,value:{port}});port.start();});})();</script>`;
 function publishedHtmlArtifactDocument(html, toolBridgeEnabled) {
   if (!toolBridgeEnabled) return html;
+  html = resolveSiteClientScript(html);
   const doctypeEnd = leadingDoctypeEnd(html);
   if (doctypeEnd >= 0) {
     return `${html.slice(0, doctypeEnd + 1)}${SITE_BRIDGE_BOOTSTRAP_SCRIPT}${html.slice(doctypeEnd + 1)}`;
@@ -52,6 +54,25 @@ function leadingDoctypeEnd(html) {
 }
 function PublishedHtmlArtifactFrame(props) {
   const frameRef = useRef(null);
+  const [height, setHeight] = useState();
+  useEffect(() => {
+    if (!props.autoHeight) return;
+    const receive = (event) => {
+      if (event.source !== frameRef.current?.contentWindow || event.data?.type !== "opengeni.preview.height")
+        return;
+      const value = event.data.height;
+      if (typeof value === "number" && Number.isFinite(value))
+        setHeight(Math.min(1200, Math.max(80, value)));
+    };
+    window.addEventListener("message", receive);
+    return () => window.removeEventListener("message", receive);
+  }, [props.autoHeight]);
+  useEffect(() => {
+    frameRef.current?.contentWindow?.postMessage(
+      { type: "opengeni.preview.theme", theme: props.theme },
+      "*"
+    );
+  }, [props.theme]);
   const bridgeRef = useRef(props.toolBridge);
   const onFrameLoadRef = useRef(() => void 0);
   const frameLoadPendingRef = useRef(false);
@@ -161,11 +182,15 @@ function PublishedHtmlArtifactFrame(props) {
       referrerPolicy: "no-referrer",
       srcDoc: publishedHtmlArtifactDocument(props.html, toolBridgeEnabled),
       onLoad: () => {
+        frameRef.current?.contentWindow?.postMessage(
+          { type: "opengeni.preview.theme", theme: props.theme },
+          "*"
+        );
         frameLoadPendingRef.current = true;
         onFrameLoadRef.current();
       },
       className: props.className,
-      style: props.style
+      style: { ...props.style, ...props.autoHeight && height ? { height } : {} }
     }
   );
 }
@@ -271,4 +296,4 @@ export {
   PublishedHtmlArtifactFrame,
   openGeniSiteBridgePortFromBootstrap
 };
-//# sourceMappingURL=chunk-BRFMGY4L.js.map
+//# sourceMappingURL=chunk-UGMKPUEM.js.map

package/dist/chunk-UGMKPUEM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/artifacts/published-html-artifact-frame.tsx"],"sourcesContent":["import {\n  OPENGENI_SITE_BRIDGE_BOOTSTRAP_GLOBAL,\n  OPENGENI_SITE_BRIDGE_READY,\n  OPENGENI_SITE_BRIDGE_RESPONSE,\n  OPENGENI_SITE_BRIDGE_VERSION,\n  isOpenGeniSiteBridgeCancelMessage,\n  isOpenGeniSiteBridgeConnectMessage,\n  isOpenGeniSiteBridgeRequestMessage,\n  sanitizeOpenGeniSiteToolCallRequest,\n  isSiteHttpRequest,\n  serveSiteHttp,\n  type SiteHttpRequest,\n  type OpenGeniSiteBridgeResponseMessage,\n  type OpenGeniSiteToolCatalog,\n} from \"@opengeni/sdk/site\";\nimport type {\n  ToolGatewayCallRequest,\n  ToolGatewayCallResponse,\n  ToolGatewayDeclarationsResponse,\n} from \"@opengeni/sdk\";\nimport { useEffect, useRef, useState, type CSSProperties } from \"react\";\nimport { resolveSiteClientScript } from \"@opengeni/sdk/site-document\";\n\nexport const PUBLISHED_HTML_ARTIFACT_IFRAME_SANDBOX = [\n  \"allow-downloads\",\n  \"allow-forms\",\n  \"allow-modals\",\n  \"allow-orientation-lock\",\n  \"allow-pointer-lock\",\n  \"allow-popups\",\n  \"allow-popups-to-escape-sandbox\",\n  \"allow-presentation\",\n  \"allow-scripts\",\n].join(\" \");\n\nexport type PublishedHtmlArtifactFrameProps = {\n  html: string;\n  autoHeight?: boolean;\n  theme?: \"light\" | \"dark\";\n  title: string;\n  className?: string;\n  style?: CSSProperties;\n  toolBridge?: PublishedHtmlArtifactToolBridge;\n};\n\nexport type PublishedHtmlArtifactToolBridge = {\n  fetch?: (request: SiteHttpRequest, signal: AbortSignal) => Promise<Response>;\n  catalog: (options: { signal: AbortSignal }) => Promise<OpenGeniSiteToolCatalog>;\n  call: (\n    request: ToolGatewayCallRequest,\n    options: { signal: AbortSignal },\n  ) => Promise<ToolGatewayCallResponse>;\n  declarations?: (options: { signal: AbortSignal }) => Promise<ToolGatewayDeclarationsResponse>;\n};\n\nconst SITE_BRIDGE_BOOTSTRAP_SCRIPT = `<script>(()=>{const key=${JSON.stringify(\n  OPENGENI_SITE_BRIDGE_BOOTSTRAP_GLOBAL,\n)};const parentWindow=window.parent;if(parentWindow===window)return;window.addEventListener(\"message\",event=>{const data=event.data;if(event.source!==parentWindow||!data||data.type!==${JSON.stringify(\n  OPENGENI_SITE_BRIDGE_READY,\n)}||data.version!==${OPENGENI_SITE_BRIDGE_VERSION}||event.ports.length!==1)return;const port=event.ports[0];const previous=window[key]?.port;if(previous&&previous!==port)previous.close();Object.defineProperty(window,key,{configurable:true,value:{port}});port.start();});})();</script>`;\n\nexport function publishedHtmlArtifactDocument(html: string, toolBridgeEnabled: boolean): string {\n  if (!toolBridgeEnabled) return html;\n  html = resolveSiteClientScript(html);\n  const doctypeEnd = leadingDoctypeEnd(html);\n  if (doctypeEnd >= 0) {\n    return `${html.slice(0, doctypeEnd + 1)}${SITE_BRIDGE_BOOTSTRAP_SCRIPT}${html.slice(doctypeEnd + 1)}`;\n  }\n  return `${SITE_BRIDGE_BOOTSTRAP_SCRIPT}${html}`;\n}\n\nfunction leadingDoctypeEnd(html: string): number {\n  const lower = html.toLowerCase();\n  let cursor = html.charCodeAt(0) === 0xfeff ? 1 : 0;\n  while (cursor < html.length) {\n    while (/\\s/.test(html[cursor] ?? \"\")) cursor += 1;\n    if (!html.startsWith(\"<!--\", cursor)) break;\n    const commentEnd = html.indexOf(\"-->\", cursor + 4);\n    if (commentEnd < 0) return -1;\n    cursor = commentEnd + 3;\n  }\n  if (!lower.startsWith(\"<!doctype\", cursor)) return -1;\n  return html.indexOf(\">\", cursor + 9);\n}\n\n/**\n * Render exact published HTML in an opaque-origin iframe. Artifact scripts,\n * external resources, forms, popups, downloads, and the host-filtered tool\n * bridge work without granting parent-origin authority, shared cookies/storage,\n * or top-level navigation.\n */\nexport function PublishedHtmlArtifactFrame(props: PublishedHtmlArtifactFrameProps) {\n  const frameRef = useRef<HTMLIFrameElement | null>(null);\n  const [height, setHeight] = useState<number>();\n  useEffect(() => {\n    if (!props.autoHeight) return;\n    const receive = (event: MessageEvent) => {\n      if (\n        event.source !== frameRef.current?.contentWindow ||\n        event.data?.type !== \"opengeni.preview.height\"\n      )\n        return;\n      const value = event.data.height;\n      if (typeof value === \"number\" && Number.isFinite(value))\n        setHeight(Math.min(1200, Math.max(80, value)));\n    };\n    window.addEventListener(\"message\", receive);\n    return () => window.removeEventListener(\"message\", receive);\n  }, [props.autoHeight]);\n  useEffect(() => {\n    frameRef.current?.contentWindow?.postMessage(\n      { type: \"opengeni.preview.theme\", theme: props.theme },\n      \"*\",\n    );\n  }, [props.theme]);\n  const bridgeRef = useRef(props.toolBridge);\n  const onFrameLoadRef = useRef<() => void>(() => undefined);\n  const frameLoadPendingRef = useRef(false);\n  const toolBridgeEnabled = props.toolBridge !== undefined;\n  useEffect(() => {\n    bridgeRef.current = props.toolBridge;\n  }, [props.toolBridge]);\n  useEffect(() => {\n    if (!toolBridgeEnabled || typeof window === \"undefined\") return;\n    const requests = new SiteBridgeRequestRegistry();\n    const attachToolPort = (data: unknown, ports: readonly MessagePort[]) => {\n      const port = openGeniSiteBridgePortFromBootstrap(data, ports);\n      if (!port) return;\n      requests.addPort(port);\n      port.addEventListener(\"message\", (portEvent: MessageEvent<unknown>) => {\n        const message = portEvent.data;\n        if (isOpenGeniSiteBridgeCancelMessage(message)) {\n          requests.cancel(port, message.requestId);\n          return;\n        }\n        if (isSiteHttpRequest(message) && portEvent.ports.length === 1) {\n          const controller = requests.start(port, message.requestId);\n          if (!controller) {\n            portEvent.ports[0]!.close();\n            return;\n          }\n          void serveSiteHttp(\n            message,\n            portEvent.ports[0]!,\n            async (request, signal) => {\n              const fetch = bridgeRef.current?.fetch;\n              if (!fetch) throw new Error(\"This Site host does not support the session SDK\");\n              return fetch(request, signal);\n            },\n            controller.signal,\n          ).finally(() => requests.complete(port, message.requestId, controller));\n          return;\n        }\n        if (!isOpenGeniSiteBridgeRequestMessage(message)) return;\n        const controller = requests.start(port, message.requestId);\n        if (!controller) {\n          port.postMessage({\n            type: OPENGENI_SITE_BRIDGE_RESPONSE,\n            version: OPENGENI_SITE_BRIDGE_VERSION,\n            requestId: message.requestId,\n            ok: false,\n            error: {\n              code: \"duplicate_request_id\",\n              message: \"A Site tool request with this id is already running\",\n              retryable: false,\n            },\n          } satisfies OpenGeniSiteBridgeResponseMessage);\n          return;\n        }\n        void handleSiteBridgeRequest(bridgeRef.current, message, controller.signal)\n          .then((value) => {\n            if (!controller.signal.aborted) {\n              port.postMessage({\n                type: OPENGENI_SITE_BRIDGE_RESPONSE,\n                version: OPENGENI_SITE_BRIDGE_VERSION,\n                requestId: message.requestId,\n                ok: true,\n                value,\n              } satisfies OpenGeniSiteBridgeResponseMessage);\n            }\n          })\n          .catch((error) => {\n            if (!controller.signal.aborted) {\n              port.postMessage({\n                type: OPENGENI_SITE_BRIDGE_RESPONSE,\n                version: OPENGENI_SITE_BRIDGE_VERSION,\n                requestId: message.requestId,\n                ok: false,\n                error: siteBridgeError(error),\n              } satisfies OpenGeniSiteBridgeResponseMessage);\n            }\n          })\n          .finally(() => requests.complete(port, message.requestId, controller));\n      });\n      port.addEventListener(\"messageerror\", () => requests.closePort(port));\n      port.start();\n      port.postMessage({\n        type: OPENGENI_SITE_BRIDGE_READY,\n        version: OPENGENI_SITE_BRIDGE_VERSION,\n      });\n    };\n    const documentLease = new SiteBridgeDocumentLease(attachToolPort, () => requests.closeAll());\n    const onFrameLoad = () => {\n      frameLoadPendingRef.current = false;\n      const frameWindow = frameRef.current?.contentWindow ?? null;\n      if (!frameWindow) return;\n      documentLease.load(frameWindow);\n    };\n    onFrameLoadRef.current = onFrameLoad;\n    if (frameLoadPendingRef.current) {\n      frameLoadPendingRef.current = false;\n      onFrameLoad();\n    }\n    return () => {\n      onFrameLoadRef.current = () => undefined;\n      documentLease.close();\n    };\n  }, [props.html, toolBridgeEnabled]);\n  return (\n    <iframe\n      ref={frameRef}\n      title={props.title}\n      sandbox={PUBLISHED_HTML_ARTIFACT_IFRAME_SANDBOX}\n      referrerPolicy=\"no-referrer\"\n      srcDoc={publishedHtmlArtifactDocument(props.html, toolBridgeEnabled)}\n      onLoad={() => {\n        frameRef.current?.contentWindow?.postMessage(\n          { type: \"opengeni.preview.theme\", theme: props.theme },\n          \"*\",\n        );\n        frameLoadPendingRef.current = true;\n        onFrameLoadRef.current();\n      }}\n      className={props.className}\n      style={{ ...props.style, ...(props.autoHeight && height ? { height } : {}) }}\n    />\n  );\n}\n\nexport class SiteBridgeRequestRegistry {\n  private readonly controllersByPort = new Map<MessagePort, Map<string, AbortController>>();\n\n  addPort(port: MessagePort): void {\n    // Several SDK clients may share one document bootstrap. Document teardown,\n    // not another client connecting, revokes all of that document's ports.\n    if (!this.controllersByPort.has(port)) this.controllersByPort.set(port, new Map());\n  }\n\n  start(port: MessagePort, requestId: string): AbortController | null {\n    const controllers = this.controllersByPort.get(port);\n    if (!controllers || controllers.has(requestId)) return null;\n    const controller = new AbortController();\n    controllers.set(requestId, controller);\n    return controller;\n  }\n\n  cancel(port: MessagePort, requestId: string): void {\n    const controllers = this.controllersByPort.get(port);\n    const controller = controllers?.get(requestId);\n    if (!controller) return;\n    controller.abort(new Error(\"Site tool request cancelled\"));\n    controllers!.delete(requestId);\n  }\n\n  complete(port: MessagePort, requestId: string, controller: AbortController): void {\n    const controllers = this.controllersByPort.get(port);\n    if (controllers?.get(requestId) === controller) controllers.delete(requestId);\n  }\n\n  closePort(port: MessagePort): void {\n    const controllers = this.controllersByPort.get(port);\n    if (!controllers) return;\n    for (const controller of controllers.values()) {\n      controller.abort(new Error(\"Site tool bridge port closed\"));\n    }\n    controllers.clear();\n    this.controllersByPort.delete(port);\n    port.close();\n  }\n\n  closeAll(): void {\n    for (const port of [...this.controllersByPort.keys()]) this.closePort(port);\n  }\n}\n\nexport class SiteBridgeDocumentLease {\n  private loaded = false;\n  private bootstrapPort: MessagePort | null = null;\n\n  constructor(\n    private readonly attachToolPort: (data: unknown, ports: readonly MessagePort[]) => void,\n    private readonly closeActivePorts: () => void,\n    private readonly createMessageChannel: () => MessageChannel = () => new MessageChannel(),\n  ) {}\n\n  load(frameWindow: Pick<Window, \"postMessage\">): boolean {\n    if (this.loaded) {\n      this.close();\n      return false;\n    }\n    this.loaded = true;\n    const channel = this.createMessageChannel();\n    this.bootstrapPort = channel.port1;\n    channel.port1.addEventListener(\"message\", (event: MessageEvent<unknown>) => {\n      this.attachToolPort(event.data, event.ports);\n    });\n    channel.port1.start();\n    frameWindow.postMessage(\n      {\n        type: OPENGENI_SITE_BRIDGE_READY,\n        version: OPENGENI_SITE_BRIDGE_VERSION,\n      },\n      \"*\",\n      [channel.port2],\n    );\n    return true;\n  }\n\n  close(): void {\n    this.bootstrapPort?.close();\n    this.bootstrapPort = null;\n    this.closeActivePorts();\n  }\n}\n\nexport function openGeniSiteBridgePortFromBootstrap(\n  data: unknown,\n  ports: readonly MessagePort[],\n): MessagePort | null {\n  if (!isOpenGeniSiteBridgeConnectMessage(data)) return null;\n  return ports.length === 1 ? ports[0]! : null;\n}\n\nasync function handleSiteBridgeRequest(\n  bridge: PublishedHtmlArtifactToolBridge | undefined,\n  message: Parameters<typeof isOpenGeniSiteBridgeRequestMessage>[0] & {\n    method: \"catalog\" | \"call\" | \"declarations\";\n    requestId: string;\n    payload?: ToolGatewayCallRequest;\n  },\n  signal: AbortSignal,\n): Promise<OpenGeniSiteToolCatalog | ToolGatewayCallResponse | ToolGatewayDeclarationsResponse> {\n  if (!bridge) throw new Error(\"Site tool bridge is unavailable\");\n  if (message.method === \"catalog\") return await bridge.catalog({ signal });\n  if (message.method === \"declarations\") {\n    if (!bridge.declarations) throw new Error(\"Site tool declarations are unavailable\");\n    return await bridge.declarations({ signal });\n  }\n  return await bridge.call(sanitizeOpenGeniSiteToolCallRequest(message.payload!), { signal });\n}\n\nexport function siteBridgeError(error: unknown): {\n  code: string;\n  message: string;\n  retryable: boolean;\n  outcomeUnknown: boolean;\n} {\n  const candidate = error as {\n    code?: unknown;\n    message?: unknown;\n    retryable?: unknown;\n    outcomeUnknown?: unknown;\n  };\n  return {\n    code: typeof candidate?.code === \"string\" ? candidate.code : \"site_tool_call_failed\",\n    message:\n      typeof candidate?.message === \"string\" ? candidate.message : \"Site tool request failed\",\n    retryable: candidate?.retryable === true,\n    outcomeUnknown: candidate?.outcomeUnknown === true,\n  };\n}\n"],"mappings":"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","names":["controller"]}

package/dist/components/artifacts/inline-html-document.d.ts

@@ -0,0 +1,2 @@
+/** Conversation styling/helpers only. Rendering and tool transport remain in the Site frame. */
+export declare function inlineHtmlDocument(fragment: string): string;

package/dist/components/artifacts/published-html-artifact-frame.d.ts

@@ -4,6 +4,8 @@ import { type CSSProperties } from "react";
 export declare const PUBLISHED_HTML_ARTIFACT_IFRAME_SANDBOX: string;
 export type PublishedHtmlArtifactFrameProps = {
     html: string;
+    autoHeight?: boolean;
+    theme?: "light" | "dark";
     title: string;
     className?: string;
     style?: CSSProperties;

package/dist/components/artifacts/visualization-assets.gen.d.ts

@@ -0,0 +1,2 @@
+export declare const VISUALIZATION_CSS = "/* Adapted from Codex visualize 1.0.32; shared with the OpenGeni visualization skill. */\n:root {\n  color-scheme: light dark;\n  background-color: var(\n    --background,\n    var(--color-background-primary, light-dark(rgb(255 255 255), rgb(24 24 24)))\n  ) !important;\n\n  /* Agent-facing contract; keep in sync with SKILL.md. */\n  --background: var(\n    --color-background-primary,\n    light-dark(rgb(255 255 255), rgb(24 24 24))\n  );\n  --foreground: var(\n    --color-text-primary,\n    light-dark(rgb(26 28 31), rgb(255 255 255))\n  );\n  --card: color-mix(in oklab, var(--foreground) 5%, var(--background));\n  --card-foreground: var(\n    --color-text-primary,\n    light-dark(rgb(26 28 31), rgb(255 255 255))\n  );\n  --popover: var(\n    --color-background-secondary,\n    light-dark(rgb(255 255 255), rgb(45 45 45))\n  );\n  --popover-foreground: var(\n    --color-text-primary,\n    light-dark(rgb(26 28 31), rgb(255 255 255))\n  );\n  --primary: var(\n    --color-text-info,\n    light-dark(rgb(51 156 255), rgb(131 195 255))\n  );\n  --primary-foreground: var(\n    --color-text-inverse,\n    light-dark(rgb(255 255 255), rgb(13 13 13))\n  );\n  --secondary: var(\n    --color-background-secondary,\n    light-dark(rgb(255 255 255 / 96%), rgb(54 54 54 / 96%))\n  );\n  --secondary-foreground: var(\n    --color-text-primary,\n    light-dark(rgb(26 28 31), rgb(255 255 255))\n  );\n  --muted: color-mix(in srgb, var(--foreground) 10%, transparent);\n  --muted-foreground: var(\n    --color-text-secondary,\n    light-dark(rgb(26 28 31 / 49.4%), rgb(255 255 255 / 49.8%))\n  );\n  --accent: var(\n    --color-background-info,\n    light-dark(rgb(229 242 255), rgb(13 39 63))\n  );\n  --accent-foreground: var(\n    --color-text-info,\n    light-dark(rgb(51 156 255), rgb(131 195 255))\n  );\n  --destructive: var(\n    --color-text-warning,\n    light-dark(rgb(226 85 7), rgb(255 133 73))\n  );\n  --border: var(\n    --color-border-secondary,\n    light-dark(rgb(26 28 31 / 8%), rgb(255 255 255 / 8.2%))\n  );\n  --input: var(\n    --color-border-primary,\n    light-dark(\n      rgb(26 28 31 / 11.8%),\n      color-mix(in oklab, rgb(0 0 0) 10%, transparent)\n    )\n  );\n  --ring: var(\n    --color-ring-primary,\n    light-dark(rgb(51 156 255), rgb(131 195 255 / 76%))\n  );\n  --font-size-base: var(--font-text-md-size, 14px);\n  --blue: light-dark(rgb(51 156 255), rgb(51 156 255));\n  --orange: light-dark(rgb(226 85 7), rgb(251 106 34));\n  --green: light-dark(rgb(0 162 64), rgb(64 201 119));\n  --red: light-dark(rgb(224 46 42), rgb(255 103 100));\n  --purple: light-dark(rgb(146 79 247), rgb(173 123 249));\n  --yellow: light-dark(rgb(255 195 0), rgb(255 210 64));\n  --viz-series-1: var(--primary);\n  --viz-series-2: light-dark(rgb(243 136 59), rgb(245 154 86));\n  --viz-series-3: light-dark(rgb(93 201 119), rgb(116 213 139));\n  --viz-series-4: light-dark(rgb(235 119 177), rgb(240 143 192));\n  --viz-series-5: light-dark(rgb(155 121 236), rgb(170 145 239));\n  --viz-series-6: light-dark(rgb(58 185 177), rgb(90 203 194));\n\n  /* Internal implementation variables; not part of the agent contract. */\n  --font-sans: -apple-system, system-ui, \"Segoe UI\", sans-serif;\n  --font-mono:\n    ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\",\n    monospace;\n  --font-size-normal: max(11px, var(--font-size-base));\n  --font-size-tooltip: calc(var(--font-size-base) - 1px);\n  --font-size-small: max(11px, calc(var(--font-size-base) - 2px));\n  --font-size-h1: calc(var(--font-size-normal) * 1.7142857143);\n  --font-size-h2: calc(var(--font-size-normal) * 1.4285714286);\n  --font-size-h3: calc(var(--font-size-normal) * 1.2857142857);\n  --font-weight-normal: 430;\n  --font-weight-medium: 500;\n  --icon-size: 16px;\n  --line-height-normal: calc(var(--font-size-normal) * 1.5);\n  --line-height-tooltip: calc(var(--font-size-tooltip) * 1.4285714286);\n  --line-height-small: calc(var(--font-size-small) + 4px);\n  --corner-shape: round;\n  --radius: var(--border-radius-lg, 10px);\n  --radius-sm: calc(var(--radius) * 0.6);\n  --radius-md: calc(var(--radius) * 0.8);\n  --radius-lg: var(--radius);\n  --radius-2xl: calc(var(--radius) * 1.6);\n  --radius-full: 9999px;\n  --shadow-sm: 0 1px 2px -1px rgb(0 0 0 / 8%);\n  --checkmark-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M 12.8961 3.64101C13.1297 3.41418 13.4984 3.37523 13.7779 3.56581C14.0571 3.75635 14.1554 4.11331 14.0299 4.41347L13.9615 4.53847L7.71151 13.7045C7.59411 13.8767 7.4063 13.9877 7.19881 14.0072C6.99136 14.0267 6.78564 13.9533 6.63826 13.806L2.88826 10.056L2.79842 9.9457C2.6192 9.67407 2.64927 9.30496 2.88826 9.06581C3.12738 8.82669 3.49647 8.79676 3.76815 8.97597L3.8785 9.06581L7.03084 12.2182L12.8053 3.74941L12.8961 3.64101Z'/%3E%3C/svg%3E\");\n\n  /* Legacy aliases; not part of the current agent contract. */\n  --viz-bg: transparent;\n  --viz-panel: var(--card);\n  --viz-border: var(--border);\n  --viz-text: var(--foreground);\n  --viz-muted: var(--muted-foreground);\n  --viz-accent: var(--primary);\n  --viz-accent-text: var(--primary-foreground);\n  --viz-accent-bg: var(--accent);\n  --viz-font-size: var(--font-size-base);\n  --viz-warning: var(--destructive);\n}\n\n:root[data-theme=\"light\"] {\n  color-scheme: light;\n}\n\n:root[data-theme=\"dark\"] {\n  color-scheme: dark;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nhtml > body {\n  /* Preserve MCP aliases for older inline renderers without creating :root cycles. */\n  --color-background-primary: var(\n    --background,\n    light-dark(rgb(255 255 255), rgb(24 24 24))\n  );\n  --color-text-primary: var(\n    --foreground,\n    light-dark(rgb(26 28 31), rgb(255 255 255))\n  );\n  --color-border-secondary: var(\n    --border,\n    light-dark(rgb(26 28 31 / 8%), rgb(255 255 255 / 8.2%))\n  );\n\n  margin: 0;\n  padding: var(--visualize-paint-gutter, 16px);\n  color: var(--foreground);\n  background: transparent !important;\n  font-family: var(--font-sans) !important;\n  font-size: var(--font-size-normal);\n  font-weight: var(--font-weight-normal);\n  line-height: var(--line-height-normal);\n}\n\na {\n  color: color-mix(in srgb, var(--viz-accent) 80%, var(--viz-text) 20%);\n  cursor: pointer;\n  font-weight: var(--font-weight-medium, 500);\n  text-decoration: none;\n  text-underline-offset: 2px;\n}\n\na:is(:hover, :focus-visible) {\n  text-decoration-line: underline;\n  text-decoration-style: dashed;\n  text-decoration-thickness: 0.5px;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np {\n  margin-block: 0;\n}\n\nh1 {\n  font-size: var(--font-size-h1);\n  font-weight: var(--font-weight-medium);\n  line-height: 1.25;\n}\n\nh2 {\n  font-size: var(--font-size-h2);\n  font-weight: var(--font-weight-medium);\n  line-height: 1.25;\n}\n\nh3,\nh4,\nh5,\nh6 {\n  font-size: var(--font-size-h3);\n  font-weight: var(--font-weight-medium);\n  line-height: 1.3;\n}\n\nb,\nstrong,\nth {\n  font-weight: var(--font-weight-medium);\n}\n\ncode:not(pre code) {\n  display: inline;\n  padding: 1px 6px;\n  border-radius: var(--radius-sm);\n  corner-shape: var(--corner-shape);\n  background: var(--muted);\n  font-family: var(--font-mono);\n  font-size: 0.92em;\n  overflow-wrap: anywhere;\n  -webkit-box-decoration-break: clone;\n  box-decoration-break: clone;\n  word-break: break-word;\n}\n\n.table-responsive {\n  width: 100%;\n  overflow-x: auto;\n  scrollbar-width: thin;\n}\n\n.table {\n  width: 100%;\n  border-collapse: collapse;\n  color: var(--foreground);\n  font: inherit;\n  text-align: start;\n}\n\n.table :is(th, td) {\n  padding-block: 10px;\n  padding-inline: 0 24px;\n  overflow-wrap: anywhere;\n  border-bottom: 1px solid var(--border);\n  text-align: start;\n  vertical-align: top;\n}\n\n.table-responsive > .table :is(th, td) {\n  overflow-wrap: break-word;\n}\n\n.table :is(th, td):last-child {\n  padding-inline-end: 0;\n}\n\n.table :is(caption, thead th) {\n  font-weight: 600;\n}\n\n.table thead th {\n  padding-block: 8px;\n  border-bottom-color: color-mix(in srgb, var(--foreground) 16%, transparent);\n}\n\n.table tbody tr:last-child :is(th, td) {\n  border-bottom: 0;\n}\n\n.table.table-sm :is(th, td) {\n  padding-block: 6px;\n}\n\n.table.table-sm :is(th, td):not(:last-child) {\n  padding-inline-end: 16px;\n}\n\n.table :is(.text-end, [align=\"right\"]) {\n  text-align: end;\n  font-variant-numeric: tabular-nums;\n}\n\n.table :is(.text-center, [align=\"center\"]) {\n  text-align: center;\n}\n\n.table .text-nowrap {\n  white-space: nowrap;\n}\n\n#widget {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n  width: 100%;\n  padding: 0;\n  background: transparent !important;\n}\n\n.card {\n  min-width: 0;\n  padding: 12px;\n  overflow: hidden;\n  overflow-wrap: break-word;\n  border-radius: var(--radius-2xl);\n  corner-shape: var(--corner-shape);\n  color: var(--card-foreground);\n  background: var(--card);\n}\n\n#widget > :not(.card, .progress) {\n  width: 100% !important;\n  max-width: none !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  border: 0 !important;\n  border-radius: 0 !important;\n  background: transparent !important;\n  box-shadow: none !important;\n}\n\n.tooltip {\n  position: fixed;\n  z-index: 50;\n  top: 0;\n  left: 0;\n  width: max-content;\n  max-width: min(\n    20rem,\n    var(--tooltip-available-width, calc(100vw - 10px)),\n    calc(100vw - 10px)\n  );\n  max-height: min(\n    var(--tooltip-available-height, calc(100vh - 10px)),\n    calc(100vh - 10px)\n  );\n  padding: 4px 8px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius-lg);\n  corner-shape: var(--corner-shape);\n  color: var(--popover-foreground);\n  background: var(--popover);\n  box-shadow: none;\n  font-size: var(--font-size-tooltip);\n  line-height: var(--line-height-tooltip);\n  overflow-wrap: break-word;\n  white-space: normal;\n  pointer-events: none;\n  user-select: none;\n}\n\n.viz-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(max(180px, 24%), 1fr));\n  gap: 10px;\n}\n\n.viz-stat {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.viz-stat-value {\n  font-size: var(--font-size-h2);\n  font-weight: var(--font-weight-medium);\n  line-height: 1.25;\n}\n\n.viz-row {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 10px;\n}\n\nhr {\n  width: 100%;\n  height: 1px;\n  margin-block: 6px;\n  border: 0;\n  background: var(--border);\n}\n\n.nav {\n  display: flex;\n  min-width: 0;\n  align-items: center;\n  gap: 4px;\n}\n\n.progress {\n  display: flex;\n  height: 8px;\n  margin-block: calc((var(--line-height-normal, 1.5em) - 8px) / 2);\n  overflow: hidden;\n  border: 0;\n  border-radius: var(--radius-full);\n  background: var(--muted);\n}\n\n.progress-bar:only-child {\n  border-radius: var(--radius-full);\n}\n\n.progress-bar {\n  height: 100%;\n  flex-shrink: 0;\n  border: 0;\n  background: var(--viz-series-1);\n}\n\n.viz-badge {\n  padding: 3px 8px;\n  border-radius: var(--radius-full);\n  color: var(--accent-foreground);\n  background: var(--accent);\n  font-weight: var(--font-weight-medium);\n}\n\nsmall,\n.text-small,\n.viz-badge {\n  font-size: var(--font-size-small);\n  line-height: var(--line-height-small);\n}\n\n.text-muted {\n  color: var(--muted-foreground);\n}\n\n.tabular-nums {\n  font-variant-numeric: tabular-nums;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n.viz-controls {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 8px;\n}\n\n.viz-controls > .form-label {\n  display: grid;\n  min-width: min(100%, 260px);\n  flex: 1 1 280px;\n  grid-template-columns: minmax(0, 1fr) auto;\n  align-items: baseline;\n  gap: 2px 12px;\n  margin-bottom: 0;\n}\n\n.viz-controls > .form-label > :is(.form-control, .form-range, .form-select) {\n  grid-column: 1 / -1;\n}\n\n.btn,\n.nav-link,\n.form-check-input,\n.form-control,\n.form-range,\n.form-select {\n  font: inherit;\n}\n\n.btn,\n.nav-link {\n  appearance: button;\n  display: inline-flex;\n  inline-size: fit-content;\n  max-inline-size: 100%;\n  min-height: 28px;\n  align-items: center;\n  justify-content: center;\n  gap: 4px;\n  margin: 0;\n  padding: 0 8px;\n  -webkit-app-region: no-drag;\n  border: 1px solid var(--input);\n  border-radius: var(--radius-lg);\n  corner-shape: var(--corner-shape);\n  color: var(--secondary-foreground);\n  background: var(--secondary);\n  cursor: var(--cursor-interaction, pointer);\n  text-align: center;\n  text-decoration: none;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-font-smoothing: antialiased;\n}\n\n.btn:is(.btn-block, .viz-tile) {\n  inline-size: 100%;\n}\n\n.btn.viz-tile {\n  min-width: 0;\n  overflow-wrap: anywhere;\n  white-space: normal;\n}\n\na.btn {\n  cursor: pointer;\n  text-decoration: none;\n}\n\n.btn:not(:disabled):hover,\n.nav-link:not(:disabled):not([aria-disabled=\"true\"]):hover {\n  background: color-mix(in srgb, var(--foreground) 6%, var(--secondary));\n}\n\n.btn-primary {\n  border-color: transparent;\n  color: var(--primary-foreground);\n  background: var(--foreground);\n  background-clip: padding-box;\n}\n\n.btn-primary .text-muted {\n  color: color-mix(in srgb, var(--primary-foreground) 50%, transparent);\n}\n\n.btn-primary:not(:disabled):hover {\n  background: color-mix(in srgb, var(--foreground) 80%, transparent);\n  background-clip: padding-box;\n}\n\n.btn-ghost {\n  border-color: transparent;\n  color: var(--muted-foreground);\n  background: transparent;\n}\n\n.btn-ghost:not(:disabled):hover {\n  color: var(--foreground);\n  background: color-mix(in srgb, var(--foreground) 6%, var(--secondary));\n}\n\n.nav-pills .nav-link {\n  min-width: 0;\n  border-color: transparent;\n  color: var(--muted-foreground);\n  background: transparent;\n}\n\n.nav-justified .nav-link {\n  flex: 1 1 0;\n  overflow-wrap: anywhere;\n  white-space: normal;\n}\n\n.nav-pills .nav-link.active {\n  color: var(--foreground);\n  background: var(--muted);\n}\n\n.btn:disabled,\n.nav-link:disabled,\n.nav-link[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n[data-lucide] {\n  stroke-width: 1.6;\n}\n\n.form-label {\n  display: block;\n  margin-bottom: 6px;\n  color: var(--foreground);\n}\n\n.form-control {\n  display: block;\n  width: 100%;\n  min-height: 28px;\n  padding: 0 8px;\n  outline: none;\n  border: 1px solid var(--input);\n  border-radius: var(--radius-lg);\n  corner-shape: var(--corner-shape);\n  color: var(--foreground);\n  background: var(--secondary);\n}\n\n.form-control::placeholder {\n  color: var(--muted-foreground);\n}\n\n.form-control[type=\"file\"] {\n  padding: 0;\n  overflow: hidden;\n  cursor: var(--cursor-interaction, pointer);\n}\n\n.form-control[type=\"file\"]::file-selector-button {\n  min-height: 26px;\n  margin-right: 8px;\n  padding: 0 8px;\n  border: 0;\n  border-right: 1px solid var(--input);\n  color: var(--secondary-foreground);\n  background: var(--secondary);\n  cursor: inherit;\n  font: inherit;\n}\n\n.form-control[type=\"file\"]:not(:disabled):hover::file-selector-button {\n  background: color-mix(in srgb, var(--foreground) 6%, var(--secondary));\n}\n\n.form-control-color[type=\"color\"] {\n  width: 40px;\n  height: 28px;\n  padding: 3px;\n  cursor: var(--cursor-interaction, pointer);\n}\n\n.form-control-color[type=\"color\"]::-webkit-color-swatch-wrapper {\n  padding: 0;\n}\n\n.form-control-color[type=\"color\"]::-webkit-color-swatch {\n  border: 0;\n  border-radius: calc(var(--radius-lg) - 4px);\n  corner-shape: var(--corner-shape);\n}\n\ntextarea.form-control {\n  height: auto;\n  min-height: 72px;\n  padding: 8px 10px;\n  resize: vertical;\n}\n\n.form-control:focus-visible {\n  border-color: var(--ring);\n  box-shadow: inset 0 0 0 1px var(--ring);\n}\n\n.form-control:disabled,\n.form-select:disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.form-select {\n  appearance: none;\n  display: block;\n  width: 100%;\n  min-height: 28px;\n  margin: 0;\n  padding: 0 32px 0 8px;\n  outline: none;\n  border: 1px solid var(--input);\n  border-radius: var(--radius-lg);\n  corner-shape: var(--corner-shape);\n  color: var(--foreground);\n  background-color: var(--secondary);\n  background-image:\n    linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),\n    linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);\n  background-position:\n    calc(100% - 14px) 50%,\n    calc(100% - 10px) 50%;\n  background-repeat: no-repeat;\n  background-size: 4px 4px;\n  cursor: var(--cursor-interaction, default);\n}\n\n.form-select:not(:disabled):hover {\n  background-color: color-mix(in srgb, var(--foreground) 6%, var(--secondary));\n}\n\n.form-select:focus-visible {\n  border-color: var(--ring);\n  box-shadow: inset 0 0 0 1px var(--ring);\n}\n\n.form-check {\n  display: flex;\n  min-height: 20px;\n  align-items: center;\n  gap: 6px;\n}\n\n.form-check-input {\n  appearance: none;\n  width: 14px;\n  height: 14px;\n  flex: 0 0 auto;\n  margin: 0;\n  border: 1px solid var(--input);\n  color: var(--primary-foreground);\n  background-color: transparent;\n  cursor: var(--cursor-interaction, default);\n  transition:\n    background-color 150ms,\n    border-color 150ms,\n    box-shadow 150ms;\n}\n\n.form-check:not(.form-switch) .form-check-input[type=\"checkbox\"] {\n  border-color: var(--input);\n  border-radius: var(--radius-sm);\n  corner-shape: var(--corner-shape);\n  background-color: var(--secondary);\n  box-shadow: var(--shadow-sm);\n}\n\n.form-check:not(.form-switch)\n  .form-check-input:not(:disabled):not(:checked):hover {\n  background-color: var(--card);\n}\n\n.form-check:not(.form-switch) .form-check-input[type=\"checkbox\"]:checked {\n  border-color: var(--primary);\n  background-color: var(--primary);\n}\n\n.form-check:not(.form-switch)\n  .form-check-input[type=\"checkbox\"]:checked::before {\n  display: block;\n  width: 100%;\n  height: 100%;\n  background: var(--primary-foreground);\n  content: \"\";\n  mask: var(--checkmark-image) center / 12px 12px no-repeat;\n}\n\n.form-check-input[type=\"radio\"] {\n  width: 14px;\n  height: 14px;\n  border-radius: var(--radius-full);\n}\n\n.form-check-input[type=\"radio\"]:checked {\n  border: 2px solid var(--primary);\n  background:\n    radial-gradient(circle, var(--primary-foreground) 0 2.5px, transparent 3px),\n    var(--primary);\n}\n\n.form-check:not(.form-switch) .form-check-input:focus-visible {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n\n.form-check:not(.form-switch) .form-check-input:disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n.form-check:not(.form-switch) .form-check-input:disabled + .form-check-label {\n  cursor: not-allowed;\n}\n\n.form-switch .form-check-input:disabled,\n.form-switch .form-check-input:disabled + .form-check-label {\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n.form-check-label {\n  color: var(--foreground);\n  cursor: var(--cursor-interaction, default);\n}\n\n.form-switch .form-check-input {\n  position: relative;\n  width: 32px;\n  height: 20px;\n  border: 0;\n  border-radius: var(--radius-full);\n  background: var(--muted);\n  box-shadow: none;\n  transition: background-color 200ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.form-switch .form-check-input::before {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  width: 16px;\n  height: 16px;\n  box-sizing: border-box;\n  border: 1px solid light-dark(var(--primary-foreground), var(--foreground));\n  border-radius: var(--radius-full);\n  background: light-dark(var(--primary-foreground), var(--foreground));\n  box-shadow: var(--shadow-sm);\n  content: \"\";\n  transform: translate(2px, -50%);\n  transition: transform 200ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.form-switch .form-check-input:checked {\n  background: var(--primary);\n}\n\n.form-switch .form-check-input:checked::before {\n  transform: translate(14px, -50%);\n}\n\n.form-switch .form-check-input:focus-visible {\n  box-shadow: 0 0 0 2px var(--ring);\n}\n\n.form-range {\n  appearance: none;\n  display: block;\n  width: 100%;\n  height: 28px;\n  flex: 1;\n  margin: 0;\n  padding: 0;\n  outline: none;\n  border: 0;\n  accent-color: var(--primary);\n  background: linear-gradient(\n      color-mix(in srgb, var(--foreground) 7%, transparent),\n      color-mix(in srgb, var(--foreground) 7%, transparent)\n    )\n    center / 100% 2px no-repeat;\n}\n\n.form-range::-webkit-slider-runnable-track {\n  height: 28px;\n  background: transparent;\n}\n\n.form-range::-webkit-slider-thumb {\n  appearance: none;\n  width: 20px;\n  height: 20px;\n  margin-top: 4px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius-full);\n  background: light-dark(var(--primary-foreground), var(--foreground));\n}\n\n.form-range:focus-visible::-webkit-slider-thumb {\n  border-color: var(--ring);\n  box-shadow: inset 0 0 0 1px var(--ring);\n}\n\n.form-range::-moz-range-track {\n  height: 28px;\n  background: transparent;\n}\n\n.form-range::-moz-range-thumb {\n  width: 20px;\n  height: 20px;\n  border: 1px solid var(--border);\n  border-radius: var(--radius-full);\n  background: light-dark(var(--primary-foreground), var(--foreground));\n}\n\n.form-range:focus-visible::-moz-range-thumb {\n  border-color: var(--ring);\n  box-shadow: inset 0 0 0 1px var(--ring);\n}\n\n.form-range:disabled {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.btn:not(.btn-primary, .viz-tile):is(\n  [aria-pressed=\"true\"],\n  [aria-selected=\"true\"],\n  .is-selected\n) {\n  border-color: var(--primary);\n  color: var(--primary-foreground);\n  background: var(--primary);\n}\n\n.btn.viz-tile:is([aria-pressed=\"true\"], [aria-selected=\"true\"], .is-selected) {\n  border-color: var(--primary);\n  box-shadow: inset 0 0 0 1px var(--primary);\n}\n\n.btn:focus-visible,\n.nav-link:focus-visible {\n  outline: 2px solid var(--ring);\n  outline-offset: 2px;\n}\n\n@media (pointer: coarse) {\n  .btn,\n  .nav-link,\n  .form-control,\n  .form-select {\n    min-width: 44px;\n    min-height: 44px;\n  }\n\n  /* Keep small-screen WebKit from zooming when a text field receives focus. */\n  .form-control,\n  .form-select {\n    font-size: max(16px, var(--font-size-normal));\n  }\n\n  .form-control[type=\"file\"]::file-selector-button {\n    min-width: 44px;\n    min-height: 44px;\n  }\n\n  .form-control-color[type=\"color\"] {\n    width: 44px;\n    height: 44px;\n  }\n\n  .form-control:is(\n    [type=\"date\"],\n    [type=\"datetime-local\"],\n    [type=\"month\"],\n    [type=\"time\"],\n    [type=\"week\"]\n  ) {\n    min-width: 0;\n    max-width: 100%;\n    padding-block: 8px;\n  }\n\n  .form-check {\n    min-height: 44px;\n    padding-inline: 15px;\n  }\n\n  .form-check-input {\n    position: relative;\n  }\n\n  .form-check-input::after {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 44px;\n    height: 44px;\n    content: \"\";\n    transform: translate(-50%, -50%);\n  }\n\n  .form-check-label {\n    display: inline-flex;\n    min-width: 44px;\n    min-height: 44px;\n    align-items: center;\n  }\n\n  .form-range {\n    height: 44px;\n    touch-action: pan-y;\n  }\n\n  .form-range::-webkit-slider-runnable-track {\n    height: 44px;\n  }\n\n  .form-range::-moz-range-track {\n    height: 44px;\n  }\n\n  .form-range::-webkit-slider-thumb {\n    margin-top: 12px;\n  }\n}\n\nsvg {\n  display: block;\n  max-width: 100%;\n  height: auto;\n}\n\n#widget > svg {\n  width: 100%;\n}\n\n/* Model-authored chart rules can otherwise stretch icons after these styles load. */\nsvg.lucide {\n  display: block;\n  width: var(--icon-size) !important;\n  height: var(--icon-size) !important;\n  flex: none;\n  margin: 0 !important;\n  stroke-width: 1.6;\n}\n\n.text-warning,\n.text-destructive {\n  color: var(--destructive);\n}\n";
+export declare const VISUALIZATION_HELPERS = "\n<script src=\"https://unpkg.com/@floating-ui/core@1.7.3/dist/floating-ui.core.umd.min.js\"></script>\n<script src=\"https://unpkg.com/@floating-ui/dom@1.7.4/dist/floating-ui.dom.umd.min.js\"></script>\n<script>\n  (() => {\n    if (window.FloatingUIDOM == null) {\n      return;\n    }\n    const { autoUpdate, computePosition, flip, offset, shift, size } = window.FloatingUIDOM;\n    const tooltipPlacements = new Set([\"top\", \"right\", \"bottom\", \"left\"]);\n    const tooltipId = `codex-visualization-tooltip-${\n      window.crypto?.randomUUID?.() ?? Date.now().toString(36)\n    }`;\n    const tooltipGap = 5;\n    const hoverDelay = 700;\n    const skipDelay = 300;\n    let activeTrigger = null;\n    let pendingTrigger = null;\n    let tooltip = null;\n    let openTimeout = null;\n    let autoUpdateCleanup = null;\n    let positionRequest = 0;\n    let skipDelayUntil = 0;\n    let lastPointerWasTouch = false;\n    let pinnedByTouch = false;\n\n    const getTrigger = (target) =>\n      target?.nodeType === Node.ELEMENT_NODE ? target.closest(\"[data-tooltip]\") : null;\n    const containsTarget = (trigger, target) =>\n      target?.nodeType != null && trigger.contains(target);\n    const getContent = (trigger) => trigger.getAttribute(\"data-tooltip\")?.trim() ?? \"\";\n    const getPlacement = (trigger) => {\n      const placement = trigger.getAttribute(\"data-tooltip-placement\");\n      return tooltipPlacements.has(placement) ? placement : \"top\";\n    };\n    const getTooltip = () => {\n      if (tooltip == null) {\n        tooltip = document.createElement(\"div\");\n        tooltip.id = tooltipId;\n        tooltip.className = \"tooltip\";\n        tooltip.setAttribute(\"role\", \"tooltip\");\n      }\n      return tooltip;\n    };\n    const setDescribedBy = (trigger, described) => {\n      const ids = new Set(\n        (trigger.getAttribute(\"aria-describedby\") ?? \"\").split(/\\s+/).filter(Boolean),\n      );\n      if (described) {\n        ids.add(tooltipId);\n      } else {\n        ids.delete(tooltipId);\n      }\n      if (ids.size === 0) {\n        trigger.removeAttribute(\"aria-describedby\");\n      } else {\n        trigger.setAttribute(\"aria-describedby\", [...ids].join(\" \"));\n      }\n    };\n    const clearOpenTimeout = () => {\n      if (openTimeout != null) {\n        window.clearTimeout(openTimeout);\n        openTimeout = null;\n      }\n      pendingTrigger = null;\n    };\n    const closeTooltip = (activateSkipDelay = true) => {\n      clearOpenTimeout();\n      pinnedByTouch = false;\n      positionRequest += 1;\n      autoUpdateCleanup?.();\n      autoUpdateCleanup = null;\n      if (activeTrigger == null) {\n        return;\n      }\n      setDescribedBy(activeTrigger, false);\n      activeTrigger = null;\n      tooltip?.remove();\n      if (activateSkipDelay) {\n        skipDelayUntil = Date.now() + skipDelay;\n      }\n    };\n    const updatePosition = (trigger, floating) => {\n      const request = ++positionRequest;\n      void computePosition(trigger, floating, {\n        middleware: [\n          offset(tooltipGap),\n          flip({ padding: tooltipGap }),\n          shift({ padding: tooltipGap }),\n          size({\n            padding: tooltipGap,\n            apply({ availableHeight, availableWidth, elements }) {\n              elements.floating.style.setProperty(\n                \"--tooltip-available-width\",\n                `${Math.max(0, availableWidth)}px`,\n              );\n              elements.floating.style.setProperty(\n                \"--tooltip-available-height\",\n                `${Math.max(0, availableHeight)}px`,\n              );\n            },\n          }),\n        ],\n        placement: getPlacement(trigger),\n        strategy: \"fixed\",\n      })\n        .then(({ x, y }) => {\n          if (activeTrigger !== trigger || request !== positionRequest) {\n            return;\n          }\n          const scale = window.devicePixelRatio || 1;\n          floating.style.transform = `translate(${Math.round(x * scale) / scale}px, ${Math.round(y * scale) / scale}px)`;\n          floating.style.visibility = \"visible\";\n        })\n        .catch(() => {\n          if (activeTrigger === trigger && request === positionRequest) {\n            closeTooltip(false);\n          }\n        });\n    };\n    const openTooltip = (trigger) => {\n      const content = getContent(trigger);\n      if (!trigger.isConnected || content.length === 0) {\n        return;\n      }\n      clearOpenTimeout();\n      if (activeTrigger === trigger) {\n        return;\n      }\n      closeTooltip();\n      const floating = getTooltip();\n      floating.textContent = content;\n      floating.style.visibility = \"hidden\";\n      floating.style.transform = \"translate(0, 0)\";\n      document.body.appendChild(floating);\n      activeTrigger = trigger;\n      setDescribedBy(trigger, true);\n      autoUpdateCleanup = autoUpdate(trigger, floating, () => {\n        updatePosition(trigger, floating);\n      });\n    };\n    const requestOpen = (trigger, immediate = false) => {\n      if (\n        getContent(trigger).length === 0 ||\n        activeTrigger === trigger ||\n        pendingTrigger === trigger\n      ) {\n        return;\n      }\n      clearOpenTimeout();\n      pendingTrigger = trigger;\n      const delay =\n        immediate || activeTrigger != null || Date.now() < skipDelayUntil ? 0 : hoverDelay;\n      if (delay === 0) {\n        openTooltip(trigger);\n        return;\n      }\n      openTimeout = window.setTimeout(() => {\n        openTimeout = null;\n        pendingTrigger = null;\n        openTooltip(trigger);\n      }, delay);\n    };\n    const handlePointerOpen = (event) => {\n      if (event.pointerType === \"touch\") {\n        return;\n      }\n      const trigger = getTrigger(event.target);\n      if (trigger == null || containsTarget(trigger, event.relatedTarget)) {\n        return;\n      }\n      requestOpen(trigger);\n    };\n    const handlePointer = (event) => {\n      lastPointerWasTouch = event.type === \"pointerdown\" && event.pointerType === \"touch\";\n    };\n    const handleTouchClick = (event) => {\n      const isTouch = event.pointerType === \"touch\" || lastPointerWasTouch;\n      lastPointerWasTouch = false;\n      if (!isTouch || event.detail === 0) {\n        return;\n      }\n      const trigger = getTrigger(event.target);\n      if (\n        trigger == null ||\n        !trigger.isConnected ||\n        getContent(trigger).length === 0 ||\n        (pinnedByTouch && activeTrigger === trigger)\n      ) {\n        if (pinnedByTouch) {\n          closeTooltip();\n        }\n        return;\n      }\n      openTooltip(trigger);\n      pinnedByTouch = activeTrigger === trigger;\n      window.setTimeout(() => {\n        if (activeTrigger === trigger && !trigger.isConnected) {\n          closeTooltip(false);\n        }\n      }, 0);\n    };\n    const handleLeave = (event) => {\n      if (pinnedByTouch) {\n        return;\n      }\n      const trigger = getTrigger(event.target);\n      if (trigger == null || containsTarget(trigger, event.relatedTarget)) {\n        return;\n      }\n      if (activeTrigger === trigger || pendingTrigger === trigger) {\n        closeTooltip();\n      }\n    };\n    const handleFocusIn = (event) => {\n      const trigger = getTrigger(event.target);\n      if (trigger?.matches(\":focus-visible\")) {\n        requestOpen(trigger, true);\n      }\n    };\n    const handleKeyDown = (event) => {\n      if (event.key === \"Escape\") {\n        closeTooltip();\n      }\n    };\n    const handleContextMenu = (event) => {\n      lastPointerWasTouch = false;\n      const trigger = getTrigger(event.target);\n      if (activeTrigger === trigger || pendingTrigger === trigger) {\n        closeTooltip();\n      }\n    };\n    const destroy = () => {\n      closeTooltip(false);\n      lastPointerWasTouch = false;\n      document.removeEventListener(\"pointerover\", handlePointerOpen);\n      document.removeEventListener(\"pointerdown\", handlePointer);\n      document.removeEventListener(\"pointercancel\", handlePointer);\n      document.removeEventListener(\"click\", handleTouchClick);\n      document.removeEventListener(\"pointerout\", handleLeave);\n      document.removeEventListener(\"focusin\", handleFocusIn);\n      document.removeEventListener(\"focusout\", handleLeave);\n      document.removeEventListener(\"keydown\", handleKeyDown);\n      document.removeEventListener(\"contextmenu\", handleContextMenu);\n      tooltip = null;\n    };\n\n    document.addEventListener(\"pointerover\", handlePointerOpen);\n    document.addEventListener(\"pointerdown\", handlePointer);\n    document.addEventListener(\"pointercancel\", handlePointer);\n    document.addEventListener(\"click\", handleTouchClick);\n    document.addEventListener(\"pointerout\", handleLeave);\n    document.addEventListener(\"focusin\", handleFocusIn);\n    document.addEventListener(\"focusout\", handleLeave);\n    document.addEventListener(\"keydown\", handleKeyDown);\n    document.addEventListener(\"contextmenu\", handleContextMenu);\n    window.addEventListener(\"pagehide\", destroy, { once: true });\n  })();\n</script>\n<script id=\"codex-visualization-tabs\">\n  (() => {\n    const selector = '.nav[role=\"tablist\"] [role=\"tab\"]';\n    const disabled = ':disabled,[aria-disabled=\"true\"]';\n    const selectTab = (selected) => {\n      const panelId = selected.getAttribute(\"aria-controls\");\n      for (const tab of selected.closest('[role=\"tablist\"]').querySelectorAll('[role=\"tab\"]')) {\n        const active = tab === selected;\n        tab.classList.toggle(\"active\", active);\n        tab.setAttribute(\"aria-selected\", String(active));\n        const id = tab.getAttribute(\"aria-controls\");\n        const panel = id && document.getElementById(id);\n        if (panel != null) {\n          panel.hidden = id !== panelId;\n          if (!panel.hidden && selected.id) {\n            panel.setAttribute(\"aria-labelledby\", selected.id);\n          }\n        }\n      }\n    };\n    const interact = (event) => {\n      const tab = event.target?.closest?.(selector);\n      if (event.defaultPrevented || tab == null || tab.matches(disabled)) {\n        return;\n      }\n      if (event.type === \"click\") {\n        selectTab(tab);\n        return;\n      }\n      const tabs = Array.from(\n        tab.closest('[role=\"tablist\"]').querySelectorAll('[role=\"tab\"]'),\n      ).filter((candidate) => !candidate.matches(disabled));\n      const current = tabs.indexOf(tab);\n      let next;\n      if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n        next = (current + 1) % tabs.length;\n      } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n        next = (current + tabs.length - 1) % tabs.length;\n      } else if (event.key === \"Home\") {\n        next = 0;\n      } else if (event.key === \"End\") {\n        next = tabs.length - 1;\n      } else {\n        return;\n      }\n      event.preventDefault();\n      tabs[next].focus();\n      selectTab(tabs[next]);\n    };\n\n    for (const list of document.querySelectorAll('.nav[role=\"tablist\"]')) {\n      const selected =\n        list.querySelector('[role=\"tab\"][aria-selected=\"true\"]') ??\n        list.querySelector('[role=\"tab\"].active') ??\n        list.querySelector('[role=\"tab\"]');\n      if (selected != null) {\n        selectTab(selected);\n      }\n    }\n    document.addEventListener(\"click\", interact);\n    document.addEventListener(\"keydown\", interact);\n    window.addEventListener(\n      \"pagehide\",\n      () => {\n        document.removeEventListener(\"click\", interact);\n        document.removeEventListener(\"keydown\", interact);\n      },\n      { once: true },\n    );\n  })();\n</script>\n<script\n  id=\"codex-visualization-lucide\"\n  async\n  src=\"https://unpkg.com/lucide@1.17.0/dist/umd/lucide.js\"\n></script>\n<script>\n  (() => {\n    const initialize = () => {\n      globalThis.lucide?.createIcons({ attrs: { width: 16, height: 16 } });\n    };\n    if (globalThis.lucide != null) {\n      initialize();\n      return;\n    }\n    document\n      .getElementById(\"codex-visualization-lucide\")\n      ?.addEventListener(\"load\", initialize, { once: true });\n  })();\n</script>\n";

package/dist/components/markdown.d.ts

@@ -1,3 +1,4 @@
+import { type ReactNode } from "react";
 /**
  * The default renderer for chat message bodies in {@link MessageTimeline}.
  *
@@ -12,7 +13,17 @@
  * the tokens land. Consumers who want a different renderer can still pass
  * `renderMessageText` to `MessageTimeline` to override this entirely.
  */
+export type MarkdownInteractiveBlock = {
+    kind: "html" | "site";
+    content: string;
+};
 export type MarkdownProps = {
+    renderImage?: ((image: {
+        src: string;
+        alt: string;
+    }) => ReactNode) | undefined;
+    /** Host opt-in for assistant-authored interactive fences. */
+    renderInteractiveBlock?: ((block: MarkdownInteractiveBlock) => ReactNode) | undefined;
     children: string;
     className?: string | undefined;
     /**
@@ -44,7 +55,8 @@ export type SandboxFileLocation = {
 export declare function sandboxFileLocationFromHref(href: string | undefined): SandboxFileLocation | null;
 /** Return the exact decoded path for a supported sandbox-link href. */
 export declare function sandboxFilePathFromHref(href: string | undefined): string | null;
-declare function MarkdownImpl({ children, className, streaming, onSandboxFile }: MarkdownProps): import("react").JSX.Element;
+export declare function retainedImageId(src: string): string | null;
+declare function MarkdownImpl({ children, className, streaming, onSandboxFile, renderInteractiveBlock, renderImage, }: MarkdownProps): import("react").JSX.Element;
 /** Memoized so streaming re-renders of the parent don't re-parse settled bodies. */
 export declare const Markdown: import("react").MemoExoticComponent<typeof MarkdownImpl>;
 export {};

package/dist/{computer-viewer-7TEZC6Y2.js → computer-viewer-AA4JH2AP.js}

@@ -1,7 +1,7 @@
 import {
   ComputerViewer,
   computerKey
-} from "./chunk-BV5A4OTE.js";
+} from "./chunk-T5FRXMC3.js";
 import "./chunk-H5YGYNXS.js";
 import "./chunk-4MDLEHXL.js";
 import "./chunk-5YK2ZDIG.js";
@@ -13,4 +13,4 @@ export {
   ComputerViewer,
   computerKey
 };
-//# sourceMappingURL=computer-viewer-7TEZC6Y2.js.map
+//# sourceMappingURL=computer-viewer-AA4JH2AP.js.map

package/dist/connect.js

@@ -1,7 +1,7 @@
 import "./chunk-IWIDV7SB.js";
 import {
   Markdown
-} from "./chunk-M2HNWZYR.js";
+} from "./chunk-IHQII5WO.js";
 import {
   copyTextToClipboard
 } from "./chunk-JVYQRRC4.js";

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { retainedImageId } from "./components/markdown.js";
 export type { EmbeddedBrowserInteractionClientLike, EmbeddedComputerInteractionClientLike, EmbeddedFileAttachmentClientLike, EmbeddedGoalClientLike, EmbeddedHumanInputSessionClientLike, EmbeddedInteractionClientLike, EmbeddedSessionEventClientLike, EmbeddedSessionLineageClientLike, EmbeddedSessionMcpApprovalPolicyClientLike, EmbeddedSessionReadClientLike, EmbeddedSessionClientLike, SessionClientLike, } from "./client.js";
 export { OpenGeniProvider } from "./provider.js";
 export type { OpenGeniProviderProps } from "./provider.js";
@@ -133,7 +134,7 @@ export type { MessageTimelineProps } from "./components/message-timeline.js";
 export { UserMessageBody, userMessageLikelyNeedsDisclosure } from "./components/user-message-body.js";
 export type { UserMessageBodyProps, UserMessageDisclosureLabels, } from "./components/user-message-body.js";
 export { Markdown, sandboxFileLocationFromHref, sandboxFilePathFromHref, } from "./components/markdown.js";
-export type { MarkdownProps, SandboxFileLocation } from "./components/markdown.js";
+export type { MarkdownProps, MarkdownInteractiveBlock, SandboxFileLocation, } from "./components/markdown.js";
 export { CopyButton, CopyHoverFrame } from "./components/copy-button.js";
 export { copyTextToClipboard, tableElementToTsv } from "./lib/clipboard.js";
 export { SessionStatus, StatusDot, SESSION_STATUS_META } from "./components/session-status.js";

package/dist/index.js

@@ -104,7 +104,7 @@ import {
   useWorkspaceModelCatalog,
   userMessageLikelyNeedsDisclosure,
   v4aToGitFileDiff
-} from "./chunk-WS6D5BHH.js";
+} from "./chunk-QXJCNVSD.js";
 import "./chunk-YBM6CQRU.js";
 import "./chunk-5M6VTFJ5.js";
 import "./chunk-ZYRGEKWS.js";
@@ -117,9 +117,10 @@ import {
   CopyHoverFrame,
   Markdown,
   prefersReducedMotion,
+  retainedImageId,
   sandboxFileLocationFromHref,
   sandboxFilePathFromHref
-} from "./chunk-M2HNWZYR.js";
+} from "./chunk-IHQII5WO.js";
 import {
   copyTextToClipboard,
   tableElementToTsv
@@ -166,6 +167,7 @@ import {
   TooltipProvider,
   TooltipTrigger
 } from "./chunk-HQV2I5HV.js";
+import "./chunk-2TKI3WEG.js";
 import {
   BillingClassMark,
   ModelPolicyPicker,
@@ -213,7 +215,7 @@ import {
   useSession,
   useSessionEvents,
   useTurnQueue
-} from "./chunk-HUMIRRYI.js";
+} from "./chunk-IYCR4343.js";
 import {
   FILE_ONLY_MESSAGE_TEXT,
   composeSendInput,
@@ -8194,7 +8196,7 @@ var LazyBrowserViewer = lazy2(async () => {
   return { default: BrowserViewer };
 });
 var LazyComputerViewer = lazy2(async () => {
-  const { ComputerViewer } = await import("./computer-viewer-7TEZC6Y2.js");
+  const { ComputerViewer } = await import("./computer-viewer-AA4JH2AP.js");
   return { default: ComputerViewer };
 });
 var WORKBENCH_TAB_CHANGES = "changes";
@@ -9515,6 +9517,7 @@ export {
   projectPendingHumanInputRequests,
   projectPickerRows,
   rawTypeOf,
+  retainedImageId,
   runnableLatencyModesForModel,
   sandboxCommandExitCode,
   sandboxFileLocationFromHref,