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

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/computer-viewer.tsx

@@ -567,7 +567,12 @@ export function ComputerViewer({
           if (relevant[0]) selectComputerSession({ sessionId: relevant[0].id, pinned: false });
         }}
         onCreate={hideGenericCreate ? undefined : createComputer}
-        onRefresh={() => void Promise.all([refreshRegistry(), refreshComputer()])}
+        onRefresh={() => {
+          if (frames.state === "error" && !generationLossSelected && !generationLossFrames) {
+            frames.reconnect();
+          }
+          void Promise.all([refreshRegistry(), refreshComputer()]);
+        }}
       />
       <InteractionInterventionBanner
         interventions={selectedInterventions}
@@ -1031,8 +1036,11 @@ function ComputerViewport(props: {
   actionRef.current = props.onAction;
   readClipboardRef.current = props.onReadClipboard;
   errorRef.current = props.onError;
+  const streamFailed = props.connectionState === "error";
   const rawInputEnabled =
-    !props.backgroundActions || props.target?.kind === "screen" || props.target?.focused === true;
+    !streamFailed &&
+    !props.machineLocked &&
+    (!props.backgroundActions || props.target?.kind === "screen" || props.target?.focused === true);
 
   const paintQueuedFrames = useCallback(() => {
     if (decodingFrameRef.current) return;
@@ -1346,7 +1354,7 @@ function ComputerViewport(props: {
     if (inputRef.current) inputRef.current.value = "";
   };
 
-  const showCanvas = props.frame !== null && !props.machineLocked;
+  const showCanvas = props.frame !== null && !props.machineLocked && !streamFailed;
   return (
     <div className="relative min-h-0 flex-1 overflow-hidden bg-black">
       <canvas

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>