@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/tool-call-visualization/renderers/random-wheel/RandomWheelInline.js

@@ -1,5 +1,6 @@
 "use client";
-import React, {
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
   useCallback,
   useEffect,
   useMemo,
@@ -286,7 +287,7 @@ const Wheel = ({
   };
   const displayRotation = canInteract ? liveRotation : rotation;
   const useMotionTransition = animate || isSnapping || canInteract && !isDragging;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: wheelRef,
@@ -303,125 +304,133 @@ const Wheel = ({
       "aria-valuemin": canInteract ? 0 : void 0,
       "aria-valuemax": canInteract ? count - 1 : void 0,
       "aria-valuenow": canInteract ? activeIndex : void 0,
-      "aria-label": canInteract ? `Spin the wheel \u2014 currently on ${candidates[activeIndex]}` : void 0
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: "absolute left-1/2 -translate-x-1/2 z-10",
-        style: { top: -2 },
-        "aria-hidden": true
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: "w-0 h-0",
-          style: {
-            borderLeft: "9px solid transparent",
-            borderRight: "9px solid transparent",
-            borderTop: "16px solid var(--color-foreground, hsl(var(--foreground)))",
-            filter: "drop-shadow(0 1px 1px rgba(0,0,0,0.25))"
-          }
-        }
-      )
-    ),
-    /* @__PURE__ */ React.createElement(
-      motion.svg,
-      {
-        width: size,
-        height: size,
-        viewBox: `0 0 ${size} ${size}`,
-        role: "img",
-        "aria-hidden": canInteract,
-        "aria-label": canInteract ? void 0 : `Wheel of ${count} options${settled ? `, landed on ${candidates[winnerIndex]}` : ""}`,
-        initial: animate ? { rotate: 0 } : false,
-        animate: { rotate: displayRotation },
-        transition: useMotionTransition ? {
-          duration: animate ? durationMs / 1e3 : isSnapping ? 0.28 : 0,
-          ease: [0.16, 1, 0.3, 1]
-        } : { duration: 0 },
-        onAnimationComplete: animate ? onSettled : void 0,
-        style: { transformOrigin: "50% 50%", display: "block" }
-      },
-      /* @__PURE__ */ React.createElement(
-        "circle",
-        {
-          cx,
-          cy,
-          r,
-          fill: "none",
-          stroke: "var(--color-border, hsl(var(--border)))",
-          strokeWidth: 2
-        }
-      ),
-      candidates.map((label, i) => {
-        const single = count === 1;
-        const start = i * seg;
-        const end = (i + 1) * seg;
-        const mid = (start + end) / 2;
-        const isWinner = settled && i === activeIndex;
-        const fill = isWinner ? "var(--color-primary, hsl(var(--primary)))" : SEGMENT_FILLS[i % SEGMENT_FILLS.length];
-        const textFill = isWinner ? "var(--color-primary-foreground, hsl(var(--primary-foreground)))" : SEGMENT_TEXT_FILLS[i % SEGMENT_TEXT_FILLS.length];
-        const dimOpacity = settled && !isWinner ? 0.55 : 1;
-        let labelPos = { x: cx, y: cy - r * 0.4 };
-        let labelRot = 0;
-        let labelAnchor = "middle";
-        if (!single) {
-          const radial = radialLabelLayout(cx, cy, outerR, mid);
-          labelPos = { x: radial.x, y: radial.y };
-          labelRot = radial.rotation;
-          labelAnchor = radial.anchor;
-        }
-        return /* @__PURE__ */ React.createElement("g", { key: i }, /* @__PURE__ */ React.createElement("title", null, label), single ? /* @__PURE__ */ React.createElement(
-          "circle",
+      "aria-label": canInteract ? `Spin the wheel \u2014 currently on ${candidates[activeIndex]}` : void 0,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            cx,
-            cy,
-            r,
-            fill,
-            stroke: "var(--color-background, hsl(var(--background)))",
-            strokeWidth: 1,
-            opacity: dimOpacity,
-            style: { transition: "opacity 200ms ease" }
+            className: "absolute left-1/2 -translate-x-1/2 z-10",
+            style: { top: -2 },
+            "aria-hidden": true,
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "w-0 h-0",
+                style: {
+                  borderLeft: "9px solid transparent",
+                  borderRight: "9px solid transparent",
+                  borderTop: "16px solid var(--color-foreground, hsl(var(--foreground)))",
+                  filter: "drop-shadow(0 1px 1px rgba(0,0,0,0.25))"
+                }
+              }
+            )
           }
-        ) : /* @__PURE__ */ React.createElement(
-          "path",
+        ),
+        /* @__PURE__ */ jsxs(
+          motion.svg,
           {
-            d: segmentPath(cx, cy, r, start, end),
-            fill,
-            stroke: "var(--color-background, hsl(var(--background)))",
-            strokeWidth: 1,
-            opacity: dimOpacity,
-            style: { transition: "opacity 200ms ease" }
+            width: size,
+            height: size,
+            viewBox: `0 0 ${size} ${size}`,
+            role: "img",
+            "aria-hidden": canInteract,
+            "aria-label": canInteract ? void 0 : `Wheel of ${count} options${settled ? `, landed on ${candidates[winnerIndex]}` : ""}`,
+            initial: animate ? { rotate: 0 } : false,
+            animate: { rotate: displayRotation },
+            transition: useMotionTransition ? {
+              duration: animate ? durationMs / 1e3 : isSnapping ? 0.28 : 0,
+              ease: [0.16, 1, 0.3, 1]
+            } : { duration: 0 },
+            onAnimationComplete: animate ? onSettled : void 0,
+            style: { transformOrigin: "50% 50%", display: "block" },
+            children: [
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx,
+                  cy,
+                  r,
+                  fill: "none",
+                  stroke: "var(--color-border, hsl(var(--border)))",
+                  strokeWidth: 2
+                }
+              ),
+              candidates.map((label, i) => {
+                const single = count === 1;
+                const start = i * seg;
+                const end = (i + 1) * seg;
+                const mid = (start + end) / 2;
+                const isWinner = settled && i === activeIndex;
+                const fill = isWinner ? "var(--color-primary, hsl(var(--primary)))" : SEGMENT_FILLS[i % SEGMENT_FILLS.length];
+                const textFill = isWinner ? "var(--color-primary-foreground, hsl(var(--primary-foreground)))" : SEGMENT_TEXT_FILLS[i % SEGMENT_TEXT_FILLS.length];
+                const dimOpacity = settled && !isWinner ? 0.55 : 1;
+                let labelPos = { x: cx, y: cy - r * 0.4 };
+                let labelRot = 0;
+                let labelAnchor = "middle";
+                if (!single) {
+                  const radial = radialLabelLayout(cx, cy, outerR, mid);
+                  labelPos = { x: radial.x, y: radial.y };
+                  labelRot = radial.rotation;
+                  labelAnchor = radial.anchor;
+                }
+                return /* @__PURE__ */ jsxs("g", { children: [
+                  /* @__PURE__ */ jsx("title", { children: label }),
+                  single ? /* @__PURE__ */ jsx(
+                    "circle",
+                    {
+                      cx,
+                      cy,
+                      r,
+                      fill,
+                      stroke: "var(--color-background, hsl(var(--background)))",
+                      strokeWidth: 1,
+                      opacity: dimOpacity,
+                      style: { transition: "opacity 200ms ease" }
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "path",
+                    {
+                      d: segmentPath(cx, cy, r, start, end),
+                      fill,
+                      stroke: "var(--color-background, hsl(var(--background)))",
+                      strokeWidth: 1,
+                      opacity: dimOpacity,
+                      style: { transition: "opacity 200ms ease" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "text",
+                    {
+                      x: labelPos.x,
+                      y: labelPos.y,
+                      fill: textFill,
+                      fontSize,
+                      fontWeight: isWinner ? 700 : 500,
+                      textAnchor: labelAnchor,
+                      dominantBaseline: "middle",
+                      transform: single ? void 0 : `rotate(${labelRot} ${labelPos.x} ${labelPos.y})`,
+                      style: { pointerEvents: "none", userSelect: "none" },
+                      children: truncateLabel(label, charBudget)
+                    }
+                  )
+                ] }, i);
+              }),
+              /* @__PURE__ */ jsx(
+                "circle",
+                {
+                  cx,
+                  cy,
+                  r: hubR,
+                  fill: "var(--color-card, hsl(var(--card)))",
+                  stroke: "var(--color-border, hsl(var(--border)))",
+                  strokeWidth: 2
+                }
+              )
+            ]
           }
-        ), /* @__PURE__ */ React.createElement(
-          "text",
-          {
-            x: labelPos.x,
-            y: labelPos.y,
-            fill: textFill,
-            fontSize,
-            fontWeight: isWinner ? 700 : 500,
-            textAnchor: labelAnchor,
-            dominantBaseline: "middle",
-            transform: single ? void 0 : `rotate(${labelRot} ${labelPos.x} ${labelPos.y})`,
-            style: { pointerEvents: "none", userSelect: "none" }
-          },
-          truncateLabel(label, charBudget)
-        ));
-      }),
-      /* @__PURE__ */ React.createElement(
-        "circle",
-        {
-          cx,
-          cy,
-          r: hubR,
-          fill: "var(--color-card, hsl(var(--card)))",
-          stroke: "var(--color-border, hsl(var(--border)))",
-          strokeWidth: 2
-        }
-      )
-    )
+        )
+      ]
+    }
   );
 };
 function valueToText(value) {
@@ -436,64 +445,111 @@ function valueToText(value) {
 const ListResult = ({ result }) => {
   const { text, isJson } = valueToText(result.chosen.value);
   const hasValue = text.trim().length > 0;
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(Trophy, { className: "w-4 h-4 text-primary flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-base font-semibold text-foreground break-words" }, result.chosen.label || "(no label)")), hasValue && /* @__PURE__ */ React.createElement("div", { className: "rounded-lg border border-border bg-muted/30 p-3" }, isJson ? /* @__PURE__ */ React.createElement("pre", { className: "text-xs text-foreground/90 whitespace-pre-wrap break-words font-mono overflow-x-auto" }, text) : /* @__PURE__ */ React.createElement("div", { className: "text-sm text-foreground/90 break-words" }, /* @__PURE__ */ React.createElement(BasicMarkdownContent, { imagePolicy: "ai", content: text, showCopyButton: false }))));
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Trophy, { className: "w-4 h-4 text-primary flex-shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-foreground break-words", children: result.chosen.label || "(no label)" })
+    ] }),
+    hasValue && /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-border bg-muted/30 p-3", children: isJson ? /* @__PURE__ */ jsx("pre", { className: "text-xs text-foreground/90 whitespace-pre-wrap break-words font-mono overflow-x-auto", children: text }) : /* @__PURE__ */ jsx("div", { className: "text-sm text-foreground/90 break-words", children: /* @__PURE__ */ jsx(BasicMarkdownContent, { imagePolicy: "ai", content: text, showCopyButton: false }) }) })
+  ] });
 };
 const WebResult = ({ result }) => {
   const { text } = valueToText(result.chosen.value);
   const sources = result.sources ?? [];
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(Globe, { className: "w-4 h-4 text-primary flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-base font-semibold text-foreground break-words" }, result.chosen.label || result.seed || "(no seed)")), text.trim().length > 0 && /* @__PURE__ */ React.createElement("div", { className: "rounded-lg border border-border bg-card p-3 text-sm text-foreground/90 break-words max-h-72 overflow-y-auto" }, /* @__PURE__ */ React.createElement(BasicMarkdownContent, { imagePolicy: "other", content: text, showCopyButton: false })), sources.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "space-y-1.5" }, /* @__PURE__ */ React.createElement("div", { className: "text-xs font-medium text-muted-foreground" }, sources.length, " ", sources.length === 1 ? "source" : "sources"), sources.map((src, i) => /* @__PURE__ */ React.createElement(
-    "a",
-    {
-      key: `${src.url}-${i}`,
-      href: src.url,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      onClick: (e) => e.stopPropagation(),
-      className: "flex items-center gap-2 p-2 rounded-md border border-border bg-card hover:border-primary/30 transition-colors group"
-    },
-    /* @__PURE__ */ React.createElement(Globe, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }),
-    /* @__PURE__ */ React.createElement("span", { className: "flex-1 min-w-0 text-xs text-foreground truncate group-hover:text-primary" }, src.title || src.url),
-    /* @__PURE__ */ React.createElement(ExternalLink, { className: "w-3 h-3 text-muted-foreground flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" })
-  ))));
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(Globe, { className: "w-4 h-4 text-primary flex-shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-foreground break-words", children: result.chosen.label || result.seed || "(no seed)" })
+    ] }),
+    text.trim().length > 0 && /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-border bg-card p-3 text-sm text-foreground/90 break-words max-h-72 overflow-y-auto", children: /* @__PURE__ */ jsx(BasicMarkdownContent, { imagePolicy: "other", content: text, showCopyButton: false }) }),
+    sources.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-xs font-medium text-muted-foreground", children: [
+        sources.length,
+        " ",
+        sources.length === 1 ? "source" : "sources"
+      ] }),
+      sources.map((src, i) => /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: src.url,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          onClick: (e) => e.stopPropagation(),
+          className: "flex items-center gap-2 p-2 rounded-md border border-border bg-card hover:border-primary/30 transition-colors group",
+          children: [
+            /* @__PURE__ */ jsx(Globe, { className: "w-3.5 h-3.5 text-muted-foreground flex-shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0 text-xs text-foreground truncate group-hover:text-primary", children: src.title || src.url }),
+            /* @__PURE__ */ jsx(ExternalLink, { className: "w-3 h-3 text-muted-foreground flex-shrink-0 opacity-0 group-hover:opacity-100 transition-opacity" })
+          ]
+        },
+        `${src.url}-${i}`
+      ))
+    ] })
+  ] });
 };
 const ImageResult = ({ result }) => {
   const image = result.image;
   const caption = typeof result.chosen.value === "string" ? result.chosen.value : "";
   const [imgFailed, setImgFailed] = useState(false);
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(ImageIcon, { className: "w-4 h-4 text-primary flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-base font-semibold text-foreground break-words" }, result.chosen.label || result.seed || "(no keyword)")), image && !imgFailed ? /* @__PURE__ */ React.createElement("div", { className: "overflow-hidden rounded-lg border border-border bg-muted/30" }, /* @__PURE__ */ React.createElement(
-    "img",
-    {
-      src: image.url,
-      alt: image.description || result.chosen.label || "Stock image",
-      className: "w-full max-h-80 object-cover",
-      onError: () => setImgFailed(true)
-    }
-  )) : /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-muted/30 p-4 text-sm text-muted-foreground" }, /* @__PURE__ */ React.createElement(ImageIcon, { className: "w-4 h-4" }), /* @__PURE__ */ React.createElement("span", null, imgFailed ? "Image failed to load." : "No image returned.", /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, null))), caption && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-foreground/80 break-words" }, caption), image?.photographer_name && /* @__PURE__ */ React.createElement("p", { className: "flex items-center gap-1 text-xs text-muted-foreground" }, /* @__PURE__ */ React.createElement(Camera, { className: "w-3 h-3 flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", null, "Photo by", " ", image.photographer_url ? /* @__PURE__ */ React.createElement(
-    "a",
-    {
-      href: image.photographer_url,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      onClick: (e) => e.stopPropagation(),
-      className: "text-primary hover:underline"
-    },
-    image.photographer_name
-  ) : /* @__PURE__ */ React.createElement("span", { className: "text-foreground/80" }, image.photographer_name), " ", "on", " ", /* @__PURE__ */ React.createElement(
-    "a",
-    {
-      href: "https://unsplash.com",
-      target: "_blank",
-      rel: "noopener noreferrer",
-      onClick: (e) => e.stopPropagation(),
-      className: "text-primary hover:underline"
-    },
-    "Unsplash"
-  ))));
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(ImageIcon, { className: "w-4 h-4 text-primary flex-shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "text-base font-semibold text-foreground break-words", children: result.chosen.label || result.seed || "(no keyword)" })
+    ] }),
+    image && !imgFailed ? /* @__PURE__ */ jsx("div", { className: "overflow-hidden rounded-lg border border-border bg-muted/30", children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: image.url,
+        alt: image.description || result.chosen.label || "Stock image",
+        className: "w-full max-h-80 object-cover",
+        onError: () => setImgFailed(true)
+      }
+    ) }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-muted/30 p-4 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(ImageIcon, { className: "w-4 h-4" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        imgFailed ? "Image failed to load." : "No image returned.",
+        /* @__PURE__ */ jsx(ErrorAlchemyMenu, {})
+      ] })
+    ] }),
+    caption && /* @__PURE__ */ jsx("p", { className: "text-sm text-foreground/80 break-words", children: caption }),
+    image?.photographer_name && /* @__PURE__ */ jsxs("p", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Camera, { className: "w-3 h-3 flex-shrink-0" }),
+      /* @__PURE__ */ jsxs("span", { children: [
+        "Photo by",
+        " ",
+        image.photographer_url ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: image.photographer_url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            onClick: (e) => e.stopPropagation(),
+            className: "text-primary hover:underline",
+            children: image.photographer_name
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: "text-foreground/80", children: image.photographer_name }),
+        " ",
+        "on",
+        " ",
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: "https://unsplash.com",
+            target: "_blank",
+            rel: "noopener noreferrer",
+            onClick: (e) => e.stopPropagation(),
+            className: "text-primary hover:underline",
+            children: "Unsplash"
+          }
+        )
+      ] })
+    ] })
+  ] });
 };
 const ResultPanel = ({ result }) => {
-  if (result.mode === "web") return /* @__PURE__ */ React.createElement(WebResult, { result });
-  if (result.mode === "image") return /* @__PURE__ */ React.createElement(ImageResult, { result });
-  return /* @__PURE__ */ React.createElement(ListResult, { result });
+  if (result.mode === "web") return /* @__PURE__ */ jsx(WebResult, { result });
+  if (result.mode === "image") return /* @__PURE__ */ jsx(ImageResult, { result });
+  return /* @__PURE__ */ jsx(ListResult, { result });
 };
 const RandomWheelInline = ({
   entry,
@@ -550,29 +606,90 @@ const RandomWheelInline = ({
   const highlightIndex = userPickIndex ?? (settled ? wheel?.winnerIndex : void 0);
   const userPickLabel = userPickIndex != null && wheel ? wheel.candidates[userPickIndex] ?? "" : "";
   if (isError) {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/5 p-3" }, /* @__PURE__ */ React.createElement(AlertTriangle, { className: "w-4 h-4 text-destructive flex-shrink-0 mt-0.5" }), /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm font-medium text-destructive" }, "Wheel spin failed", /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, null)), entry.errorMessage && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground break-words mt-0.5" }, entry.errorMessage)));
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/5 p-3", children: [
+      /* @__PURE__ */ jsx(AlertTriangle, { className: "w-4 h-4 text-destructive flex-shrink-0 mt-0.5" }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium text-destructive", children: [
+          "Wheel spin failed",
+          /* @__PURE__ */ jsx(ErrorAlchemyMenu, {})
+        ] }),
+        entry.errorMessage && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground break-words mt-0.5", children: entry.errorMessage })
+      ] })
+    ] });
   }
   if (!wheel) {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-3 rounded-lg border border-border bg-card p-4" }, /* @__PURE__ */ React.createElement(Dices, { className: "w-5 h-5 text-primary animate-pulse flex-shrink-0" }), /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement("div", { className: "text-sm font-medium text-foreground" }, "Spinning up\u2026"), /* @__PURE__ */ React.createElement("div", { className: "mt-2 h-2 w-2/3 rounded-full bg-muted animate-pulse" })));
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 rounded-lg border border-border bg-card p-4", children: [
+      /* @__PURE__ */ jsx(Dices, { className: "w-5 h-5 text-primary animate-pulse flex-shrink-0" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: "Spinning up\u2026" }),
+        /* @__PURE__ */ jsx("div", { className: "mt-2 h-2 w-2/3 rounded-full bg-muted animate-pulse" })
+      ] })
+    ] });
   }
   const mode = wheel.mode;
   const { Icon: ModeIcon, label: modeLabel } = MODE_META[mode];
   const awaitingFetch = (mode === "web" || mode === "image") && settled && !terminal;
   const seedLabel = wheel.candidates[wheel.winnerIndex] ?? result?.seed ?? "";
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React.createElement(ModeIcon, { className: "w-4 h-4 text-primary flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-sm font-semibold text-foreground" }, title), /* @__PURE__ */ React.createElement("span", { className: "ml-auto inline-flex items-center gap-1 rounded-full bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground" }, modeLabel)), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center gap-3" }, /* @__PURE__ */ React.createElement(
-    Wheel,
-    {
-      wheel,
-      rotation,
-      animate: animateSpin,
-      durationMs: spinDurationMs,
-      settled,
-      onSettled: () => setAnimationDone(true),
-      interactive: !isPersisted,
-      highlightIndex,
-      onUserPick: handleUserPick
-    }
-  ), settled && wheel.candidates.length > 1 && !isPersisted && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground text-center" }, "Drag to explore options \u2014 your pick goes to the agent."), userPickLabel && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-muted/30 px-3 py-2 text-sm" }, /* @__PURE__ */ React.createElement(Trophy, { className: "w-4 h-4 text-primary flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "text-foreground break-words" }, "Your pick: ", /* @__PURE__ */ React.createElement("span", { className: "font-semibold" }, userPickLabel))), /* @__PURE__ */ React.createElement("div", { className: "text-xs text-muted-foreground" }, wheel.candidates.length, " ", wheel.candidates.length === 1 ? "option" : "options", wheel.poolSize > wheel.candidates.length && /* @__PURE__ */ React.createElement(React.Fragment, null, " \xB7 sampled from ", wheel.poolSize)), !settled && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 text-xs font-medium text-primary" }, /* @__PURE__ */ React.createElement(RefreshCw, { className: "w-3.5 h-3.5 animate-spin" }), /* @__PURE__ */ React.createElement("span", null, "Spinning\u2026"))), awaitingFetch && /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-muted/20 p-3 text-sm text-muted-foreground" }, /* @__PURE__ */ React.createElement(Loader2, { className: "w-4 h-4 animate-spin text-primary flex-shrink-0" }), /* @__PURE__ */ React.createElement("span", { className: "break-words" }, "Fetching fresh ", mode === "image" ? "image" : "content", " for", " ", /* @__PURE__ */ React.createElement("span", { className: "font-medium text-foreground" }, "\u201C", seedLabel, "\u201D"), "\u2026")), settled && completed && result && /* @__PURE__ */ React.createElement("div", { className: "rounded-lg border border-primary/20 bg-primary/5 p-3 animate-in fade-in slide-in-from-bottom" }, /* @__PURE__ */ React.createElement(ResultPanel, { result })));
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx(ModeIcon, { className: "w-4 h-4 text-primary flex-shrink-0" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-foreground", children: title }),
+      /* @__PURE__ */ jsx("span", { className: "ml-auto inline-flex items-center gap-1 rounded-full bg-secondary px-2 py-0.5 text-xs font-medium text-secondary-foreground", children: modeLabel })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-3", children: [
+      /* @__PURE__ */ jsx(
+        Wheel,
+        {
+          wheel,
+          rotation,
+          animate: animateSpin,
+          durationMs: spinDurationMs,
+          settled,
+          onSettled: () => setAnimationDone(true),
+          interactive: !isPersisted,
+          highlightIndex,
+          onUserPick: handleUserPick
+        }
+      ),
+      settled && wheel.candidates.length > 1 && !isPersisted && /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground text-center", children: "Drag to explore options \u2014 your pick goes to the agent." }),
+      userPickLabel && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-muted/30 px-3 py-2 text-sm", children: [
+        /* @__PURE__ */ jsx(Trophy, { className: "w-4 h-4 text-primary flex-shrink-0" }),
+        /* @__PURE__ */ jsxs("span", { className: "text-foreground break-words", children: [
+          "Your pick: ",
+          /* @__PURE__ */ jsx("span", { className: "font-semibold", children: userPickLabel })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "text-xs text-muted-foreground", children: [
+        wheel.candidates.length,
+        " ",
+        wheel.candidates.length === 1 ? "option" : "options",
+        wheel.poolSize > wheel.candidates.length && /* @__PURE__ */ jsxs(Fragment, { children: [
+          " \xB7 sampled from ",
+          wheel.poolSize
+        ] })
+      ] }),
+      !settled && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs font-medium text-primary", children: [
+        /* @__PURE__ */ jsx(RefreshCw, { className: "w-3.5 h-3.5 animate-spin" }),
+        /* @__PURE__ */ jsx("span", { children: "Spinning\u2026" })
+      ] })
+    ] }),
+    awaitingFetch && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 rounded-lg border border-border bg-muted/20 p-3 text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx(Loader2, { className: "w-4 h-4 animate-spin text-primary flex-shrink-0" }),
+      /* @__PURE__ */ jsxs("span", { className: "break-words", children: [
+        "Fetching fresh ",
+        mode === "image" ? "image" : "content",
+        " for",
+        " ",
+        /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground", children: [
+          "\u201C",
+          seedLabel,
+          "\u201D"
+        ] }),
+        "\u2026"
+      ] })
+    ] }),
+    settled && completed && result && /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-primary/20 bg-primary/5 p-3 animate-in fade-in slide-in-from-bottom", children: /* @__PURE__ */ jsx(ResultPanel, { result }) })
+  ] });
 };
 export {
   RandomWheelInline

package/dist/tool-call-visualization/renderers/records/RecordsInline.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { AlertTriangle } from "lucide-react";
 import { resultAsObject } from "../_shared.js";
 import { ErrorAlchemyMenu } from "../../../host/ui-slots.js";
@@ -23,13 +24,17 @@ function sentenceFor(result) {
 }
 function RecordsInline({ entry }) {
   if (entry.status === "error") {
-    return /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-1.5 text-xs text-destructive" }, /* @__PURE__ */ React.createElement(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0" }), /* @__PURE__ */ React.createElement("span", null, entry.errorMessage ?? "The record store refused the call."), /* @__PURE__ */ React.createElement(ErrorAlchemyMenu, { error: entry.errorMessage }));
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1.5 text-xs text-destructive", children: [
+      /* @__PURE__ */ jsx(AlertTriangle, { className: "mt-0.5 size-3.5 shrink-0" }),
+      /* @__PURE__ */ jsx("span", { children: entry.errorMessage ?? "The record store refused the call." }),
+      /* @__PURE__ */ jsx(ErrorAlchemyMenu, { error: entry.errorMessage })
+    ] });
   }
   const result = resultAsObject(entry);
   if (!result) return null;
   const sentence = sentenceFor(result);
   if (!sentence) return null;
-  return /* @__PURE__ */ React.createElement("p", { className: "text-xs leading-relaxed text-muted-foreground" }, sentence);
+  return /* @__PURE__ */ jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: sentence });
 }
 export {
   RecordsInline