@opengeni/react 5.0.5-canary.3 → 5.2.0-canary.0

package/src/components/artifacts/visualization-assets/helpers.html

@@ -0,0 +1,349 @@
+<!--__INLINE_VISUALIZATION_FRAGMENT__-->
+<script src="https://unpkg.com/@floating-ui/core@1.7.3/dist/floating-ui.core.umd.min.js"></script>
+<script src="https://unpkg.com/@floating-ui/dom@1.7.4/dist/floating-ui.dom.umd.min.js"></script>
+<script>
+  (() => {
+    if (window.FloatingUIDOM == null) {
+      return;
+    }
+    const { autoUpdate, computePosition, flip, offset, shift, size } = window.FloatingUIDOM;
+    const tooltipPlacements = new Set(["top", "right", "bottom", "left"]);
+    const tooltipId = `codex-visualization-tooltip-${
+      window.crypto?.randomUUID?.() ?? Date.now().toString(36)
+    }`;
+    const tooltipGap = 5;
+    const hoverDelay = 700;
+    const skipDelay = 300;
+    let activeTrigger = null;
+    let pendingTrigger = null;
+    let tooltip = null;
+    let openTimeout = null;
+    let autoUpdateCleanup = null;
+    let positionRequest = 0;
+    let skipDelayUntil = 0;
+    let lastPointerWasTouch = false;
+    let pinnedByTouch = false;
+
+    const getTrigger = (target) =>
+      target?.nodeType === Node.ELEMENT_NODE ? target.closest("[data-tooltip]") : null;
+    const containsTarget = (trigger, target) =>
+      target?.nodeType != null && trigger.contains(target);
+    const getContent = (trigger) => trigger.getAttribute("data-tooltip")?.trim() ?? "";
+    const getPlacement = (trigger) => {
+      const placement = trigger.getAttribute("data-tooltip-placement");
+      return tooltipPlacements.has(placement) ? placement : "top";
+    };
+    const getTooltip = () => {
+      if (tooltip == null) {
+        tooltip = document.createElement("div");
+        tooltip.id = tooltipId;
+        tooltip.className = "tooltip";
+        tooltip.setAttribute("role", "tooltip");
+      }
+      return tooltip;
+    };
+    const setDescribedBy = (trigger, described) => {
+      const ids = new Set(
+        (trigger.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean),
+      );
+      if (described) {
+        ids.add(tooltipId);
+      } else {
+        ids.delete(tooltipId);
+      }
+      if (ids.size === 0) {
+        trigger.removeAttribute("aria-describedby");
+      } else {
+        trigger.setAttribute("aria-describedby", [...ids].join(" "));
+      }
+    };
+    const clearOpenTimeout = () => {
+      if (openTimeout != null) {
+        window.clearTimeout(openTimeout);
+        openTimeout = null;
+      }
+      pendingTrigger = null;
+    };
+    const closeTooltip = (activateSkipDelay = true) => {
+      clearOpenTimeout();
+      pinnedByTouch = false;
+      positionRequest += 1;
+      autoUpdateCleanup?.();
+      autoUpdateCleanup = null;
+      if (activeTrigger == null) {
+        return;
+      }
+      setDescribedBy(activeTrigger, false);
+      activeTrigger = null;
+      tooltip?.remove();
+      if (activateSkipDelay) {
+        skipDelayUntil = Date.now() + skipDelay;
+      }
+    };
+    const updatePosition = (trigger, floating) => {
+      const request = ++positionRequest;
+      void computePosition(trigger, floating, {
+        middleware: [
+          offset(tooltipGap),
+          flip({ padding: tooltipGap }),
+          shift({ padding: tooltipGap }),
+          size({
+            padding: tooltipGap,
+            apply({ availableHeight, availableWidth, elements }) {
+              elements.floating.style.setProperty(
+                "--tooltip-available-width",
+                `${Math.max(0, availableWidth)}px`,
+              );
+              elements.floating.style.setProperty(
+                "--tooltip-available-height",
+                `${Math.max(0, availableHeight)}px`,
+              );
+            },
+          }),
+        ],
+        placement: getPlacement(trigger),
+        strategy: "fixed",
+      })
+        .then(({ x, y }) => {
+          if (activeTrigger !== trigger || request !== positionRequest) {
+            return;
+          }
+          const scale = window.devicePixelRatio || 1;
+          floating.style.transform = `translate(${Math.round(x * scale) / scale}px, ${Math.round(y * scale) / scale}px)`;
+          floating.style.visibility = "visible";
+        })
+        .catch(() => {
+          if (activeTrigger === trigger && request === positionRequest) {
+            closeTooltip(false);
+          }
+        });
+    };
+    const openTooltip = (trigger) => {
+      const content = getContent(trigger);
+      if (!trigger.isConnected || content.length === 0) {
+        return;
+      }
+      clearOpenTimeout();
+      if (activeTrigger === trigger) {
+        return;
+      }
+      closeTooltip();
+      const floating = getTooltip();
+      floating.textContent = content;
+      floating.style.visibility = "hidden";
+      floating.style.transform = "translate(0, 0)";
+      document.body.appendChild(floating);
+      activeTrigger = trigger;
+      setDescribedBy(trigger, true);
+      autoUpdateCleanup = autoUpdate(trigger, floating, () => {
+        updatePosition(trigger, floating);
+      });
+    };
+    const requestOpen = (trigger, immediate = false) => {
+      if (
+        getContent(trigger).length === 0 ||
+        activeTrigger === trigger ||
+        pendingTrigger === trigger
+      ) {
+        return;
+      }
+      clearOpenTimeout();
+      pendingTrigger = trigger;
+      const delay =
+        immediate || activeTrigger != null || Date.now() < skipDelayUntil ? 0 : hoverDelay;
+      if (delay === 0) {
+        openTooltip(trigger);
+        return;
+      }
+      openTimeout = window.setTimeout(() => {
+        openTimeout = null;
+        pendingTrigger = null;
+        openTooltip(trigger);
+      }, delay);
+    };
+    const handlePointerOpen = (event) => {
+      if (event.pointerType === "touch") {
+        return;
+      }
+      const trigger = getTrigger(event.target);
+      if (trigger == null || containsTarget(trigger, event.relatedTarget)) {
+        return;
+      }
+      requestOpen(trigger);
+    };
+    const handlePointer = (event) => {
+      lastPointerWasTouch = event.type === "pointerdown" && event.pointerType === "touch";
+    };
+    const handleTouchClick = (event) => {
+      const isTouch = event.pointerType === "touch" || lastPointerWasTouch;
+      lastPointerWasTouch = false;
+      if (!isTouch || event.detail === 0) {
+        return;
+      }
+      const trigger = getTrigger(event.target);
+      if (
+        trigger == null ||
+        !trigger.isConnected ||
+        getContent(trigger).length === 0 ||
+        (pinnedByTouch && activeTrigger === trigger)
+      ) {
+        if (pinnedByTouch) {
+          closeTooltip();
+        }
+        return;
+      }
+      openTooltip(trigger);
+      pinnedByTouch = activeTrigger === trigger;
+      window.setTimeout(() => {
+        if (activeTrigger === trigger && !trigger.isConnected) {
+          closeTooltip(false);
+        }
+      }, 0);
+    };
+    const handleLeave = (event) => {
+      if (pinnedByTouch) {
+        return;
+      }
+      const trigger = getTrigger(event.target);
+      if (trigger == null || containsTarget(trigger, event.relatedTarget)) {
+        return;
+      }
+      if (activeTrigger === trigger || pendingTrigger === trigger) {
+        closeTooltip();
+      }
+    };
+    const handleFocusIn = (event) => {
+      const trigger = getTrigger(event.target);
+      if (trigger?.matches(":focus-visible")) {
+        requestOpen(trigger, true);
+      }
+    };
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        closeTooltip();
+      }
+    };
+    const handleContextMenu = (event) => {
+      lastPointerWasTouch = false;
+      const trigger = getTrigger(event.target);
+      if (activeTrigger === trigger || pendingTrigger === trigger) {
+        closeTooltip();
+      }
+    };
+    const destroy = () => {
+      closeTooltip(false);
+      lastPointerWasTouch = false;
+      document.removeEventListener("pointerover", handlePointerOpen);
+      document.removeEventListener("pointerdown", handlePointer);
+      document.removeEventListener("pointercancel", handlePointer);
+      document.removeEventListener("click", handleTouchClick);
+      document.removeEventListener("pointerout", handleLeave);
+      document.removeEventListener("focusin", handleFocusIn);
+      document.removeEventListener("focusout", handleLeave);
+      document.removeEventListener("keydown", handleKeyDown);
+      document.removeEventListener("contextmenu", handleContextMenu);
+      tooltip = null;
+    };
+
+    document.addEventListener("pointerover", handlePointerOpen);
+    document.addEventListener("pointerdown", handlePointer);
+    document.addEventListener("pointercancel", handlePointer);
+    document.addEventListener("click", handleTouchClick);
+    document.addEventListener("pointerout", handleLeave);
+    document.addEventListener("focusin", handleFocusIn);
+    document.addEventListener("focusout", handleLeave);
+    document.addEventListener("keydown", handleKeyDown);
+    document.addEventListener("contextmenu", handleContextMenu);
+    window.addEventListener("pagehide", destroy, { once: true });
+  })();
+</script>
+<script id="codex-visualization-tabs">
+  (() => {
+    const selector = '.nav[role="tablist"] [role="tab"]';
+    const disabled = ':disabled,[aria-disabled="true"]';
+    const selectTab = (selected) => {
+      const panelId = selected.getAttribute("aria-controls");
+      for (const tab of selected.closest('[role="tablist"]').querySelectorAll('[role="tab"]')) {
+        const active = tab === selected;
+        tab.classList.toggle("active", active);
+        tab.setAttribute("aria-selected", String(active));
+        const id = tab.getAttribute("aria-controls");
+        const panel = id && document.getElementById(id);
+        if (panel != null) {
+          panel.hidden = id !== panelId;
+          if (!panel.hidden && selected.id) {
+            panel.setAttribute("aria-labelledby", selected.id);
+          }
+        }
+      }
+    };
+    const interact = (event) => {
+      const tab = event.target?.closest?.(selector);
+      if (event.defaultPrevented || tab == null || tab.matches(disabled)) {
+        return;
+      }
+      if (event.type === "click") {
+        selectTab(tab);
+        return;
+      }
+      const tabs = Array.from(
+        tab.closest('[role="tablist"]').querySelectorAll('[role="tab"]'),
+      ).filter((candidate) => !candidate.matches(disabled));
+      const current = tabs.indexOf(tab);
+      let next;
+      if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+        next = (current + 1) % tabs.length;
+      } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+        next = (current + tabs.length - 1) % tabs.length;
+      } else if (event.key === "Home") {
+        next = 0;
+      } else if (event.key === "End") {
+        next = tabs.length - 1;
+      } else {
+        return;
+      }
+      event.preventDefault();
+      tabs[next].focus();
+      selectTab(tabs[next]);
+    };
+
+    for (const list of document.querySelectorAll('.nav[role="tablist"]')) {
+      const selected =
+        list.querySelector('[role="tab"][aria-selected="true"]') ??
+        list.querySelector('[role="tab"].active') ??
+        list.querySelector('[role="tab"]');
+      if (selected != null) {
+        selectTab(selected);
+      }
+    }
+    document.addEventListener("click", interact);
+    document.addEventListener("keydown", interact);
+    window.addEventListener(
+      "pagehide",
+      () => {
+        document.removeEventListener("click", interact);
+        document.removeEventListener("keydown", interact);
+      },
+      { once: true },
+    );
+  })();
+</script>
+<script
+  id="codex-visualization-lucide"
+  async
+  src="https://unpkg.com/lucide@1.17.0/dist/umd/lucide.js"
+></script>
+<script>
+  (() => {
+    const initialize = () => {
+      globalThis.lucide?.createIcons({ attrs: { width: 16, height: 16 } });
+    };
+    if (globalThis.lucide != null) {
+      initialize();
+      return;
+    }
+    document
+      .getElementById("codex-visualization-lucide")
+      ?.addEventListener("load", initialize, { once: true });
+  })();
+</script>

package/src/components/artifacts/visualization-assets.gen.ts

@@ -0,0 +1,3 @@
+// Generated by scripts/generate-visualization-assets.ts.
+export 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 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/src/components/copy-button.tsx

@@ -142,11 +142,16 @@ export function CopyHoverFrame({
       <div
         data-og-annotation-chrome=""
         className={cn(
-          "mt-1 flex h-7 items-center gap-1.5",
+          "flex h-6 items-center gap-1.5 pointer-coarse:h-11",
           align === "end" ? "justify-end" : "justify-start",
         )}
       >
-        <CopyButton text={copyText} label={label} reveal="group-hover" />
+        <CopyButton
+          text={copyText}
+          label={label}
+          reveal="group-hover"
+          className="size-6 pointer-coarse:size-11"
+        />
         {trailing}
       </div>
     </div>

package/src/components/markdown.tsx

@@ -1,5 +1,7 @@
 import {
   Children,
+  createContext,
+  useContext,
   isValidElement,
   memo,
   useEffect,
@@ -13,6 +15,7 @@ import {
 import ReactMarkdown, {
   defaultUrlTransform,
   type Components,
+  type ExtraProps,
   type UrlTransform,
 } from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -40,7 +43,17 @@ import { TooltipProvider } from "./tooltip";
  * 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 };
+const InteractiveContext = createContext<{
+  source: string;
+  render?: (block: MarkdownInteractiveBlock) => ReactNode;
+  renderImage?: (image: { src: string; alt: string }) => ReactNode;
+}>({ source: "" });
+
 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;
   /**
@@ -171,7 +184,7 @@ const baseComponents: Components = {
     </code>
   ),
   // Fenced code — quiet mono block (no card / no nested vertical scroll).
-  pre: ({ children }) => <MarkdownCodeBlock>{children}</MarkdownCodeBlock>,
+  pre: InteractiveCodeBlock,
   // Tables stay unboxed (hairline rules); hover reveals a TSV copy control.
   table: ({ children, ...props }) => <MarkdownTable {...props}>{children}</MarkdownTable>,
   thead: ({ children, ...props }) => <thead {...props}>{children}</thead>,
@@ -191,19 +204,7 @@ const baseComponents: Components = {
       {children}
     </td>
   ),
-  img: ({ alt, src, ...props }) =>
-    src ? (
-      <img
-        alt={alt ?? ""}
-        src={src}
-        className="my-3 max-w-full rounded-og-md border border-og-border"
-        {...props}
-      />
-    ) : alt ? (
-      <span className="text-og-fg-subtle" aria-disabled="true">
-        {alt}
-      </span>
-    ) : null,
+  img: MarkdownImage,
 };
 
 const MARKDOWN_LINK_CLASS =
@@ -343,8 +344,30 @@ export function sandboxFilePathFromHref(href: string | undefined): string | null
   return sandboxFileLocationFromHref(href)?.path ?? null;
 }
 
+export function retainedImageId(src: string): string | null {
+  return (
+    /^artifact:([0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12})$/i
+      .exec(src)?.[1]
+      ?.toLowerCase() ?? null
+  );
+}
+function MarkdownImage({ src, alt }: ComponentPropsWithoutRef<"img">) {
+  const { renderImage } = useContext(InteractiveContext);
+  if (!src) return <span>{alt ?? "Image unavailable"}</span>;
+  if (retainedImageId(src))
+    return renderImage ? (
+      <>{renderImage({ src, alt: alt ?? "" })}</>
+    ) : (
+      <span>{alt || "Image"} (preview unavailable)</span>
+    );
+  return <img src={src} alt={alt ?? ""} loading="lazy" className="my-3 max-w-full rounded-og-md" />;
+}
+
 const markdownUrlTransform: UrlTransform = (url, key, node) =>
-  key === "href" && node.tagName === "a" && isSandboxHref(url) ? url : defaultUrlTransform(url);
+  (key === "href" && node.tagName === "a" && isSandboxHref(url)) ||
+  (key === "src" && node.tagName === "img" && retainedImageId(url))
+    ? url
+    : defaultUrlTransform(url);
 
 /** How long after the stream ends the reveal pipeline stays for trailing animations. */
 /** Trailing ink window after stream end — keep ≥ {@link INK_FADE_MS}. */
@@ -382,6 +405,42 @@ function fenceLanguage(children: ReactNode): string | null {
   return found;
 }
 
+function InteractiveCodeBlock({ children, node }: ComponentPropsWithoutRef<"pre"> & ExtraProps) {
+  const { source, render } = useContext(InteractiveContext);
+  const language = fenceLanguage(children);
+  if (render && (language === "opengeni-html" || language === "opengeni-site")) {
+    const start = node?.position?.start.offset;
+    const end = node?.position?.end.offset;
+    const original =
+      start !== undefined && end !== undefined && end <= source.length
+        ? source.slice(start, end)
+        : "";
+    const lines = original.trimEnd().split("\n");
+    const opening = lines[0]?.match(/^ {0,3}([\x60]{3,}|~{3,})/);
+
+    const closing = lines
+      .at(-1)
+      ?.replace(/^\s*(?:>\s*)+/, "")
+      .trim();
+    const complete =
+      opening &&
+      lines.length > 1 &&
+      closing &&
+      closing.length >= opening[1]!.length &&
+      [...closing].every((c) => c === opening[1]![0]);
+    if (!complete) return <p role="status">Preparing preview…</p>;
+    return (
+      <>
+        {render({
+          kind: language === "opengeni-html" ? "html" : "site",
+          content: nodeText(children).replace(/\n$/, ""),
+        })}
+      </>
+    );
+  }
+  return <MarkdownCodeBlock>{children}</MarkdownCodeBlock>;
+}
+
 function MarkdownCodeBlock({ children }: { children?: ReactNode }) {
   const code = nodeText(children).replace(/\n$/, "");
   const language = fenceLanguage(children);
@@ -462,7 +521,14 @@ function MarkdownTable({ children, className, ...props }: ComponentPropsWithoutR
   );
 }
 
-function MarkdownImpl({ children, className, streaming = false, onSandboxFile }: MarkdownProps) {
+function MarkdownImpl({
+  children,
+  className,
+  streaming = false,
+  onSandboxFile,
+  renderInteractiveBlock,
+  renderImage,
+}: MarkdownProps) {
   // Tip-ink engine for THIS body: created on the first streaming render, kept
   // through a short linger after the stream ends (so the last age window can
   // finish), then dropped so settled bodies pay zero cost. Observing during
@@ -553,28 +619,39 @@ function MarkdownImpl({ children, className, streaming = false, onSandboxFile }:
   const parseText = streaming || revealActive ? softenStreamingMarkdown(children) : children;
   const components = useMemo(() => markdownComponents(onSandboxFile), [onSandboxFile]);
 
+  const interactiveContext = useMemo(
+    () => ({
+      source: children,
+      ...(renderInteractiveBlock ? { render: renderInteractiveBlock } : {}),
+      ...(renderImage ? { renderImage } : {}),
+    }),
+    [children, renderInteractiveBlock, renderImage],
+  );
+
   // `min-w-0` lets the prose shrink inside flex parents (message bubbles) so
   // long links and code blocks wrap/scroll instead of forcing overflow.
   return (
-    <TooltipProvider delayDuration={400}>
-      <div
-        ref={bodyRef}
-        className={cn(
-          "og-markdown-body min-w-0 break-words",
-          settling && "og-markdown-settle",
-          className,
-        )}
-      >
-        <ReactMarkdown
-          remarkPlugins={[remarkGfm]}
-          rehypePlugins={rehypePlugins}
-          components={components}
-          urlTransform={markdownUrlTransform}
+    <InteractiveContext.Provider value={interactiveContext}>
+      <TooltipProvider delayDuration={400}>
+        <div
+          ref={bodyRef}
+          className={cn(
+            "og-markdown-body min-w-0 break-words",
+            settling && "og-markdown-settle",
+            className,
+          )}
         >
-          {parseText}
-        </ReactMarkdown>
-      </div>
-    </TooltipProvider>
+          <ReactMarkdown
+            remarkPlugins={[remarkGfm]}
+            rehypePlugins={rehypePlugins}
+            components={components}
+            urlTransform={markdownUrlTransform}
+          >
+            {parseText}
+          </ReactMarkdown>
+        </div>
+      </TooltipProvider>
+    </InteractiveContext.Provider>
   );
 }