@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/runtime-reconnect/ServerOperationBanner.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Button } from "@ai-matrx/design-system/controls";
 import {
   CircleDashed,
@@ -15,7 +16,7 @@ import { reconnectServerOperation } from "./reconnect-server-operation.thunk.js"
 import { useConversationAbilities } from "../redux/execution-system/host-conversations/conversation-abilities.js";
 function ServerOperationBanner({ conversationId }) {
   const { hosted } = useConversationAbilities();
-  return hosted ? null : /* @__PURE__ */ React.createElement(ServerOperationBannerBody, { conversationId });
+  return hosted ? null : /* @__PURE__ */ jsx(ServerOperationBannerBody, { conversationId });
 }
 function ServerOperationBannerBody({
   conversationId
@@ -71,36 +72,40 @@ function ServerOperationBannerBody({
   } else if (operation.recoveryState === "live_replay_unavailable") {
     message = "The agent is still working. Live text could not be restored; its saved response will appear when it finishes.";
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-assist-dock-avoid": "",
-      className: "mb-1.5 flex items-center gap-2 rounded-lg border border-border bg-muted/60 px-3 py-2 text-sm text-muted-foreground"
-    },
-    waiting && (hasQuestion || waitingOnPerson) ? /* @__PURE__ */ React.createElement(MessageCircleQuestion, { className: "h-4 w-4 shrink-0 text-primary" }) : waiting ? /* @__PURE__ */ React.createElement(CircleDashed, { className: "h-4 w-4 shrink-0 text-primary" }) : /* @__PURE__ */ React.createElement(Loader2, { className: "h-4 w-4 shrink-0 animate-spin text-primary" }),
-    /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1" }, message),
-    waiting && hasQuestion && /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        type: "button",
-        onClick: showQuestion,
-        variant: "quiet",
-        className: "shrink-0"
-      },
-      "Show ",
-      pendingAsks.length === 1 ? "question" : "questions"
-    ),
-    waitingOnPerson && !hasQuestion && /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        type: "button",
-        onClick: showParkedAsk,
-        variant: "quiet",
-        className: "shrink-0"
-      },
-      "Show"
-    ),
-    waiting && !hasQuestion && !continuing && !waitingOnPerson && /* @__PURE__ */ React.createElement(Button, { variant: "primary", icon: actionBusy ? /* @__PURE__ */ React.createElement(Loader2, { className: "animate-spin" }) : /* @__PURE__ */ React.createElement(Play, null), onClick: continueAgent, disabled: actionBusy, className: "shrink-0" }, shouldRecheck ? "Check again" : "Continue agent")
+      className: "mb-1.5 flex items-center gap-2 rounded-lg border border-border bg-muted/60 px-3 py-2 text-sm text-muted-foreground",
+      children: [
+        waiting && (hasQuestion || waitingOnPerson) ? /* @__PURE__ */ jsx(MessageCircleQuestion, { className: "h-4 w-4 shrink-0 text-primary" }) : waiting ? /* @__PURE__ */ jsx(CircleDashed, { className: "h-4 w-4 shrink-0 text-primary" }) : /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 shrink-0 animate-spin text-primary" }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1", children: message }),
+        waiting && hasQuestion && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            onClick: showQuestion,
+            variant: "quiet",
+            className: "shrink-0",
+            children: [
+              "Show ",
+              pendingAsks.length === 1 ? "question" : "questions"
+            ]
+          }
+        ),
+        waitingOnPerson && !hasQuestion && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            onClick: showParkedAsk,
+            variant: "quiet",
+            className: "shrink-0",
+            children: "Show"
+          }
+        ),
+        waiting && !hasQuestion && !continuing && !waitingOnPerson && /* @__PURE__ */ jsx(Button, { variant: "primary", icon: actionBusy ? /* @__PURE__ */ jsx(Loader2, { className: "animate-spin" }) : /* @__PURE__ */ jsx(Play, {}), onClick: continueAgent, disabled: actionBusy, className: "shrink-0", children: shouldRecheck ? "Check again" : "Continue agent" })
+      ]
+    }
   );
 }
 export {

package/dist/agents/speech-script/SpeechScriptTranscriptView.js

@@ -1,10 +1,29 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { readTurns } from "./types.js";
 function SpeechScriptTranscriptView({
   payload
 }) {
   const turns = readTurns(payload).filter((t) => t.text.trim());
-  return /* @__PURE__ */ React.createElement("div", { className: "my-2 rounded-lg border border-border bg-card/60 px-3 py-2 text-xs" }, /* @__PURE__ */ React.createElement("div", { className: "mb-1.5 font-medium text-foreground" }, "Speech script ", turns.length > 0 ? `(${turns.length} lines)` : ""), turns.length === 0 ? /* @__PURE__ */ React.createElement("div", { className: "text-muted-foreground" }, "This speech script has no lines.") : /* @__PURE__ */ React.createElement("ol", { className: "space-y-1.5" }, turns.map((turn, i) => /* @__PURE__ */ React.createElement("li", { key: i, className: "min-w-0" }, /* @__PURE__ */ React.createElement("span", { className: "font-medium text-foreground" }, turn.speaker.trim() || "Speaker", ":"), " ", /* @__PURE__ */ React.createElement("span", { className: "text-foreground/90" }, turn.text), turn.direction ? /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, " (", turn.direction, ")") : null))));
+  return /* @__PURE__ */ jsxs("div", { className: "my-2 rounded-lg border border-border bg-card/60 px-3 py-2 text-xs", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-1.5 font-medium text-foreground", children: [
+      "Speech script ",
+      turns.length > 0 ? `(${turns.length} lines)` : ""
+    ] }),
+    turns.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-muted-foreground", children: "This speech script has no lines." }) : /* @__PURE__ */ jsx("ol", { className: "space-y-1.5", children: turns.map((turn, i) => /* @__PURE__ */ jsxs("li", { className: "min-w-0", children: [
+      /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground", children: [
+        turn.speaker.trim() || "Speaker",
+        ":"
+      ] }),
+      " ",
+      /* @__PURE__ */ jsx("span", { className: "text-foreground/90", children: turn.text }),
+      turn.direction ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+        " (",
+        turn.direction,
+        ")"
+      ] }) : null
+    ] }, i)) })
+  ] });
 }
 export {
   SpeechScriptTranscriptView

package/dist/agents/ui-first-tools/ui/AgentCardShell.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { X } from "lucide-react";
 import { cn } from "@ai-matrx/design-system";
 import { useIsMobile } from "@ai-matrx/kit/media-query";
@@ -45,7 +46,7 @@ function AgentCardShell({
   const isMobile = useIsMobile();
   const cardScrolls = !isMobile;
   const fade = useScrollFade();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
@@ -60,72 +61,82 @@ function AgentCardShell({
         className
       ),
       role: "region",
-      "aria-label": ariaLabel
-    },
-    tone !== "neutral" && /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cn(
-          "h-0.5 w-full shrink-0 bg-gradient-to-r to-transparent",
-          STRIP[tone]
-        )
-      }
-    ),
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cn(
-          "flex shrink-0 items-center gap-2",
-          titleInline ? "px-3 py-2" : "px-4 pt-3"
-        )
-      },
-      Icon && /* @__PURE__ */ React.createElement(
-        Icon,
-        {
-          className: cn("size-[18px] shrink-0", ICON_TONE[tone]),
-          strokeWidth: 2.25
-        }
-      ),
-      titleInline ? /* @__PURE__ */ React.createElement("div", { className: "flex min-w-0 flex-1 flex-wrap items-baseline gap-x-1.5 gap-y-0.5" }, eyebrow && /* @__PURE__ */ React.createElement("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground" }, eyebrow), eyebrow && title && /* @__PURE__ */ React.createElement("span", { "aria-hidden": "true", className: "text-muted-foreground/50" }, "\xB7"), title && /* @__PURE__ */ React.createElement("span", { className: "min-w-0 text-sm font-semibold leading-snug text-foreground" }, title)) : eyebrow ? /* @__PURE__ */ React.createElement("div", { className: "min-w-0 flex-1 truncate text-[11px] font-medium uppercase tracking-wide text-muted-foreground" }, eyebrow) : null,
-      badge && /* @__PURE__ */ React.createElement(
-        "span",
-        {
-          className: cn(
-            "shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium tabular-nums text-muted-foreground",
-            !eyebrow && "ml-auto"
-          )
-        },
-        badge
-      ),
-      headerAction,
-      onDismiss && /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(X, null), onClick: onDismiss, title: dismissLabel, "aria-label": dismissLabel, className: "-mr-1 shrink-0" })
-    ),
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        ref: cardScrolls ? fade.ref : void 0,
-        style: cardScrolls ? fade.style : void 0,
-        className: cn(
-          "flex flex-col",
-          cardScrolls ? "min-h-0 flex-1 overflow-y-auto overscroll-contain" : "",
-          !footer && "pb-3.5"
-        )
-      },
-      !titleInline && title && /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 whitespace-pre-wrap px-4 text-[15px] font-semibold leading-snug text-foreground" }, title),
-      subtitle && /* @__PURE__ */ React.createElement("div", { className: "mt-1 px-4 text-xs text-muted-foreground" }, subtitle),
-      children ? /* @__PURE__ */ React.createElement("div", { className: contentClassName ?? "px-4 pt-3" }, children) : null
-    ),
-    footer && /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cn(
-          "shrink-0 border-t border-border/60 bg-muted/30",
-          footerClassName ?? "px-4 py-3"
-        )
-      },
-      footer
-    ),
-    bottomSlot
+      "aria-label": ariaLabel,
+      children: [
+        tone !== "neutral" && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "h-0.5 w-full shrink-0 bg-gradient-to-r to-transparent",
+              STRIP[tone]
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex shrink-0 items-center gap-2",
+              titleInline ? "px-3 py-2" : "px-4 pt-3"
+            ),
+            children: [
+              Icon && /* @__PURE__ */ jsx(
+                Icon,
+                {
+                  className: cn("size-[18px] shrink-0", ICON_TONE[tone]),
+                  strokeWidth: 2.25
+                }
+              ),
+              titleInline ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-wrap items-baseline gap-x-1.5 gap-y-0.5", children: [
+                eyebrow && /* @__PURE__ */ jsx("span", { className: "text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: eyebrow }),
+                eyebrow && title && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground/50", children: "\xB7" }),
+                title && /* @__PURE__ */ jsx("span", { className: "min-w-0 text-sm font-semibold leading-snug text-foreground", children: title })
+              ] }) : eyebrow ? /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 truncate text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: eyebrow }) : null,
+              badge && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    "shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium tabular-nums text-muted-foreground",
+                    !eyebrow && "ml-auto"
+                  ),
+                  children: badge
+                }
+              ),
+              headerAction,
+              onDismiss && /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(X, {}), onClick: onDismiss, title: dismissLabel, "aria-label": dismissLabel, className: "-mr-1 shrink-0" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: cardScrolls ? fade.ref : void 0,
+            style: cardScrolls ? fade.style : void 0,
+            className: cn(
+              "flex flex-col",
+              cardScrolls ? "min-h-0 flex-1 overflow-y-auto overscroll-contain" : "",
+              !footer && "pb-3.5"
+            ),
+            children: [
+              !titleInline && title && /* @__PURE__ */ jsx("div", { className: "mt-1.5 whitespace-pre-wrap px-4 text-[15px] font-semibold leading-snug text-foreground", children: title }),
+              subtitle && /* @__PURE__ */ jsx("div", { className: "mt-1 px-4 text-xs text-muted-foreground", children: subtitle }),
+              children ? /* @__PURE__ */ jsx("div", { className: contentClassName ?? "px-4 pt-3", children }) : null
+            ]
+          }
+        ),
+        footer && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "shrink-0 border-t border-border/60 bg-muted/30",
+              footerClassName ?? "px-4 py-3"
+            ),
+            children: footer
+          }
+        ),
+        bottomSlot
+      ]
+    }
   );
 }
 export {

package/dist/agents/ui-first-tools/ui/ApprovalCard.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import {
   Check,
@@ -37,7 +38,10 @@ function capitalize(s) {
   return s.length ? s[0].toUpperCase() + s.slice(1) : s;
 }
 function ProposedValueBody({ value, kind }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "mt-1.5 rounded-lg border border-border/60 bg-background/60 p-2.5" }, /* @__PURE__ */ React.createElement("div", { className: "mb-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground" }, "Proposed value"), kind ? /* @__PURE__ */ React.createElement(KindInstanceRender, { kind, value, variant: "bare" }) : /* @__PURE__ */ React.createElement(StructuredValueView, { value }));
+  return /* @__PURE__ */ jsxs("div", { className: "mt-1.5 rounded-lg border border-border/60 bg-background/60 p-2.5", children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-1.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground", children: "Proposed value" }),
+    kind ? /* @__PURE__ */ jsx(KindInstanceRender, { kind, value, variant: "bare" }) : /* @__PURE__ */ jsx(StructuredValueView, { value })
+  ] });
 }
 function ApprovalCard({
   ask,
@@ -96,91 +100,117 @@ function ApprovalCard({
     if (!text) return;
     resolve({ ...EMPTY_ASK_RESPONSE, freeform: text });
   }
-  const footer = outcome ? /* @__PURE__ */ React.createElement("div", { className: "text-xs leading-relaxed text-muted-foreground" }, outcome) : respondMode ? /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
-    Textarea,
-    {
-      value: respondText,
-      onChange: (e) => setRespondText(e.target.value),
-      placeholder: "Tell the agent what to do instead\u2026",
-      rows: 2,
-      autoFocus: true,
-      className: "text-base",
-      onKeyDown: (e) => {
-        if ((e.metaKey || e.ctrlKey) && e.key === "Enter") sendRespond();
-      }
-    }
-  ), /* @__PURE__ */ React.createElement("div", { className: "mt-2 flex items-center justify-end gap-1.5" }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      size: "sm",
-      onClick: sendRespond,
-      disabled: !respondText.trim(),
-      className: "min-h-11 gap-1.5 sm:min-h-8"
-    },
-    /* @__PURE__ */ React.createElement(CornerDownLeft, { className: "size-3.5" }),
-    "Send"
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      size: "sm",
-      variant: "ghost",
-      className: "min-h-11 sm:min-h-8",
-      onClick: () => {
-        setRespondMode(false);
-        setRespondText("");
+  const footer = outcome ? /* @__PURE__ */ jsx("div", { className: "text-xs leading-relaxed text-muted-foreground", children: outcome }) : respondMode ? /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(
+      Textarea,
+      {
+        value: respondText,
+        onChange: (e) => setRespondText(e.target.value),
+        placeholder: "Tell the agent what to do instead\u2026",
+        rows: 2,
+        autoFocus: true,
+        className: "text-base",
+        onKeyDown: (e) => {
+          if ((e.metaKey || e.ctrlKey) && e.key === "Enter") sendRespond();
+        }
       }
-    },
-    "Back"
-  ))) : /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center justify-end gap-1.5" }, /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      size: "sm",
-      onClick: approve,
-      className: "min-h-11 flex-1 gap-1.5 px-2.5 sm:min-h-8 sm:flex-none"
-    },
-    /* @__PURE__ */ React.createElement(Check, { className: "size-4" }),
-    labels?.approve ?? "Apply"
-  ), /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      size: "sm",
-      variant: "outline",
-      onClick: decline,
-      className: "min-h-11 flex-1 px-2.5 sm:min-h-8 sm:flex-none"
-    },
-    labels?.decline ?? "Keep as is"
-  ), secondaryAction, allowRespond && /* @__PURE__ */ React.createElement(
-    Button,
-    {
-      size: "sm",
-      variant: "ghost",
-      onClick: () => setRespondMode(true),
-      className: "min-h-11 flex-1 px-2.5 text-muted-foreground hover:text-foreground sm:min-h-8 sm:flex-none"
-    },
-    "Respond"
-  )), autoNoun && /* @__PURE__ */ React.createElement("label", { className: "flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-md text-[12px] text-muted-foreground transition-colors hover:text-foreground sm:min-h-6" }, /* @__PURE__ */ React.createElement(
-    Checkbox,
-    {
-      checked: remember,
-      onCheckedChange: (checked) => setRemember(checked === true)
-    }
-  ), change.autoApprove?.label ?? `Always approve ${autoNoun} on this tile`));
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "mt-2 flex items-center justify-end gap-1.5", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "sm",
+          onClick: sendRespond,
+          disabled: !respondText.trim(),
+          className: "min-h-11 gap-1.5 sm:min-h-8",
+          children: [
+            /* @__PURE__ */ jsx(CornerDownLeft, { className: "size-3.5" }),
+            "Send"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "ghost",
+          className: "min-h-11 sm:min-h-8",
+          onClick: () => {
+            setRespondMode(false);
+            setRespondText("");
+          },
+          children: "Back"
+        }
+      )
+    ] })
+  ] }) : /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-end gap-1.5", children: [
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          size: "sm",
+          onClick: approve,
+          className: "min-h-11 flex-1 gap-1.5 px-2.5 sm:min-h-8 sm:flex-none",
+          children: [
+            /* @__PURE__ */ jsx(Check, { className: "size-4" }),
+            labels?.approve ?? "Apply"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "outline",
+          onClick: decline,
+          className: "min-h-11 flex-1 px-2.5 sm:min-h-8 sm:flex-none",
+          children: labels?.decline ?? "Keep as is"
+        }
+      ),
+      secondaryAction,
+      allowRespond && /* @__PURE__ */ jsx(
+        Button,
+        {
+          size: "sm",
+          variant: "ghost",
+          onClick: () => setRespondMode(true),
+          className: "min-h-11 flex-1 px-2.5 text-muted-foreground hover:text-foreground sm:min-h-8 sm:flex-none",
+          children: "Respond"
+        }
+      )
+    ] }),
+    autoNoun && /* @__PURE__ */ jsxs("label", { className: "flex min-h-11 w-fit cursor-pointer items-center gap-2 rounded-md text-[12px] text-muted-foreground transition-colors hover:text-foreground sm:min-h-6", children: [
+      /* @__PURE__ */ jsx(
+        Checkbox,
+        {
+          checked: remember,
+          onCheckedChange: (checked) => setRemember(checked === true)
+        }
+      ),
+      change.autoApprove?.label ?? `Always approve ${autoNoun} on this tile`
+    ] })
+  ] });
   if (minimized) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       "button",
       {
         type: "button",
         onClick: () => setMinimized(false),
         className: "flex w-full items-center gap-2 rounded-lg border border-primary/30 bg-primary/5 px-3 py-2 text-left transition-colors hover:bg-primary/10",
-        "aria-label": `Review pending agent change: ${headline}`
-      },
-      /* @__PURE__ */ React.createElement(MetaIcon, { className: "size-4 shrink-0 text-primary" }),
-      /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate text-sm font-medium" }, "Decision waiting: ", headline),
-      /* @__PURE__ */ React.createElement("span", { className: "text-xs text-muted-foreground" }, "Review"),
-      /* @__PURE__ */ React.createElement(ChevronUp, { className: "size-4 shrink-0 text-muted-foreground" })
+        "aria-label": `Review pending agent change: ${headline}`,
+        children: [
+          /* @__PURE__ */ jsx(MetaIcon, { className: "size-4 shrink-0 text-primary" }),
+          /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1 truncate text-sm font-medium", children: [
+            "Decision waiting: ",
+            headline
+          ] }),
+          /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Review" }),
+          /* @__PURE__ */ jsx(ChevronUp, { className: "size-4 shrink-0 text-muted-foreground" })
+        ]
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     AgentCardShell,
     {
       tone: meta.tone,
@@ -188,7 +218,7 @@ function ApprovalCard({
       eyebrow: headerEyebrow,
       title: headline,
       titleInline: true,
-      headerAction: change.description ? /* @__PURE__ */ React.createElement(
+      headerAction: change.description ? /* @__PURE__ */ jsxs(
         Button,
         {
           type: "button",
@@ -196,19 +226,21 @@ function ApprovalCard({
           variant: "ghost",
           onClick: () => setDetailsOpen((open) => !open),
           className: "min-h-11 shrink-0 gap-1 px-2 text-[11px] text-muted-foreground hover:text-foreground sm:min-h-8",
-          "aria-expanded": detailsOpen
-        },
-        /* @__PURE__ */ React.createElement(Info, { className: "size-3.5" }),
-        "Details",
-        /* @__PURE__ */ React.createElement(
-          ChevronDown,
-          {
-            className: cn(
-              "size-3 transition-transform",
-              detailsOpen && "rotate-180"
+          "aria-expanded": detailsOpen,
+          children: [
+            /* @__PURE__ */ jsx(Info, { className: "size-3.5" }),
+            "Details",
+            /* @__PURE__ */ jsx(
+              ChevronDown,
+              {
+                className: cn(
+                  "size-3 transition-transform",
+                  detailsOpen && "rotate-180"
+                )
+              }
             )
-          }
-        )
+          ]
+        }
       ) : null,
       onDismiss: () => setMinimized(true),
       dismissLabel: "Minimize \u2014 keep decision pending",
@@ -216,18 +248,20 @@ function ApprovalCard({
       footer,
       footerClassName: "px-3 py-2",
       contentClassName: "px-3 pb-2 pt-1",
-      "aria-label": `${eyebrow}: ${headline}`
-    },
-    note ? /* @__PURE__ */ React.createElement("p", { className: "mb-2 text-xs leading-relaxed text-muted-foreground" }, note) : null,
-    change.description && detailsOpen ? /* @__PURE__ */ React.createElement("p", { className: "mb-2 rounded-md bg-muted/40 px-2.5 py-2 text-xs leading-relaxed text-muted-foreground" }, change.description) : null,
-    change.fields.length > 0 ? /* @__PURE__ */ React.createElement(ChangeDiff, { fields: change.fields }) : null,
-    change.proposedValue ? /* @__PURE__ */ React.createElement(
-      ProposedValueBody,
-      {
-        value: change.proposedValue.value,
-        ...change.proposedValue.kind === void 0 ? {} : { kind: change.proposedValue.kind }
-      }
-    ) : null
+      "aria-label": `${eyebrow}: ${headline}`,
+      children: [
+        note ? /* @__PURE__ */ jsx("p", { className: "mb-2 text-xs leading-relaxed text-muted-foreground", children: note }) : null,
+        change.description && detailsOpen ? /* @__PURE__ */ jsx("p", { className: "mb-2 rounded-md bg-muted/40 px-2.5 py-2 text-xs leading-relaxed text-muted-foreground", children: change.description }) : null,
+        change.fields.length > 0 ? /* @__PURE__ */ jsx(ChangeDiff, { fields: change.fields }) : null,
+        change.proposedValue ? /* @__PURE__ */ jsx(
+          ProposedValueBody,
+          {
+            value: change.proposedValue.value,
+            ...change.proposedValue.kind === void 0 ? {} : { kind: change.proposedValue.kind }
+          }
+        ) : null
+      ]
+    }
   );
 }
 export {