@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/messages-display/user/PendingSendMessage.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { AlertCircle, Loader2, RotateCcw, X } from "lucide-react";
 import { useAppDispatch, useAppSelector } from "../../../../store/hooks.js";
@@ -33,49 +34,71 @@ function PendingSendMessage({
   if (!preSend) return null;
   if (preparing && revealedFor !== preSend.startedAt) return null;
   const failed = preSend.status === "failed";
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn("my-3 flex flex-col items-end gap-1.5", compact ? "" : "ml-12"),
       "data-testid": "pending-send-message",
       "data-status": preSend.status,
       role: failed ? "alert" : "status",
-      "aria-live": "polite"
-    },
-    /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: cn(
-          "w-full rounded-lg border px-3 py-2 text-sm whitespace-pre-wrap break-words",
-          failed ? "border-destructive/40 bg-destructive/5 text-foreground" : "border-border bg-muted text-foreground/80"
-        )
-      },
-      preSend.text || "(no text)"
-    ),
-    failed ? /* @__PURE__ */ React.createElement("div", { className: "flex w-full flex-wrap items-start justify-end gap-2 text-xs" }, /* @__PURE__ */ React.createElement("span", { className: "flex min-w-0 flex-1 items-start gap-1.5 text-destructive" }, /* @__PURE__ */ React.createElement(AlertCircle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }), /* @__PURE__ */ React.createElement("span", null, preSend.error ?? "This message could not be prepared. Nothing was sent.", " ", /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "Your text is still in the box below."))), /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        size: "sm",
-        variant: "outline",
-        className: "h-7 gap-1 px-2 text-xs",
-        onClick: () => {
-          dispatch(setPreSend({ conversationId, preSend: null }));
-          void dispatch(smartExecute({ conversationId, surfaceKey }));
-        }
-      },
-      /* @__PURE__ */ React.createElement(RotateCcw, { className: "h-3 w-3" }),
-      " Retry"
-    ), /* @__PURE__ */ React.createElement(
-      Button,
-      {
-        size: "sm",
-        variant: "ghost",
-        className: "h-7 gap-1 px-2 text-xs text-muted-foreground",
-        "aria-label": "Dismiss",
-        onClick: () => dispatch(setPreSend({ conversationId, preSend: null }))
-      },
-      /* @__PURE__ */ React.createElement(X, { className: "h-3 w-3" })
-    )) : /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground" }, /* @__PURE__ */ React.createElement(Loader2, { className: "h-3 w-3 animate-spin" }), /* @__PURE__ */ React.createElement("span", null, preSend.label, " before sending", elapsed >= 2 ? ` \xB7 ${elapsed}s` : ""))
+      "aria-live": "polite",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "w-full rounded-lg border px-3 py-2 text-sm whitespace-pre-wrap break-words",
+              failed ? "border-destructive/40 bg-destructive/5 text-foreground" : "border-border bg-muted text-foreground/80"
+            ),
+            children: preSend.text || "(no text)"
+          }
+        ),
+        failed ? /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-wrap items-start justify-end gap-2 text-xs", children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-start gap-1.5 text-destructive", children: [
+            /* @__PURE__ */ jsx(AlertCircle, { className: "mt-0.5 h-3.5 w-3.5 shrink-0" }),
+            /* @__PURE__ */ jsxs("span", { children: [
+              preSend.error ?? "This message could not be prepared. Nothing was sent.",
+              " ",
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Your text is still in the box below." })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(
+            Button,
+            {
+              size: "sm",
+              variant: "outline",
+              className: "h-7 gap-1 px-2 text-xs",
+              onClick: () => {
+                dispatch(setPreSend({ conversationId, preSend: null }));
+                void dispatch(smartExecute({ conversationId, surfaceKey }));
+              },
+              children: [
+                /* @__PURE__ */ jsx(RotateCcw, { className: "h-3 w-3" }),
+                " Retry"
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              size: "sm",
+              variant: "ghost",
+              className: "h-7 gap-1 px-2 text-xs text-muted-foreground",
+              "aria-label": "Dismiss",
+              onClick: () => dispatch(setPreSend({ conversationId, preSend: null })),
+              children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" })
+            }
+          )
+        ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsx(Loader2, { className: "h-3 w-3 animate-spin" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            preSend.label,
+            " before sending",
+            elapsed >= 2 ? ` \xB7 ${elapsed}s` : ""
+          ] })
+        ] })
+      ]
+    }
   );
 }
 export {

package/dist/agents/components/messages-display/user/RemarksTranscriptView.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { InlineTextDiff } from "@ai-matrx/diff/react";
 import { remarkKindDisplay } from "../../context-items/remark-display.js";
 const KINDS = /* @__PURE__ */ new Set(["comment", "choice", "edit", "answers", "interaction"]);
@@ -50,17 +51,33 @@ function readRows(payload) {
 function RemarkDiff({ diff }) {
   const parts = splitRemarkDiff(diff);
   if (!parts) {
-    return /* @__PURE__ */ React.createElement("pre", { className: "overflow-x-auto whitespace-pre-wrap font-mono text-[11px] text-foreground" }, diff);
+    return /* @__PURE__ */ jsx("pre", { className: "overflow-x-auto whitespace-pre-wrap font-mono text-[11px] text-foreground", children: diff });
   }
-  return /* @__PURE__ */ React.createElement("div", { className: "text-[11px] leading-snug", "data-remark-diff": true }, /* @__PURE__ */ React.createElement(InlineTextDiff, { view: "inline", original: parts.before, modified: parts.after }));
+  return /* @__PURE__ */ jsx("div", { className: "text-[11px] leading-snug", "data-remark-diff": true, children: /* @__PURE__ */ jsx(InlineTextDiff, { view: "inline", original: parts.before, modified: parts.after }) });
 }
 function RemarksTranscriptView({ payload }) {
   const rows = readRows(payload);
   if (rows.length === 0) return null;
-  return /* @__PURE__ */ React.createElement("div", { className: "my-1 grid gap-1" }, rows.map((row, i) => {
+  return /* @__PURE__ */ jsx("div", { className: "my-1 grid gap-1", children: rows.map((row, i) => {
     const { icon: Icon, label } = remarkKindDisplay(row.kind);
-    return /* @__PURE__ */ React.createElement("div", { key: i, className: "flex min-w-0 items-start gap-1.5 rounded-md border border-border bg-card px-2 py-1 text-xs", "data-remark-handle": row.handle ?? void 0 }, /* @__PURE__ */ React.createElement(Icon, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-600 dark:text-amber-400", "aria-label": label }), /* @__PURE__ */ React.createElement("div", { className: "grid min-w-0 gap-0.5" }, row.quote || row.title ? /* @__PURE__ */ React.createElement("div", { className: "truncate border-l-2 border-primary/40 pl-1.5 text-muted-foreground" }, row.quote ?? row.title) : null, row.body ? /* @__PURE__ */ React.createElement("div", { className: "whitespace-pre-wrap text-foreground" }, row.body) : null, row.diff ? /* @__PURE__ */ React.createElement(RemarkDiff, { diff: row.diff }) : null, row.answers.length ? /* @__PURE__ */ React.createElement("ul", { className: "grid gap-0.5 text-foreground" }, row.answers.map((a, j) => /* @__PURE__ */ React.createElement("li", { key: j, className: "truncate" }, /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, a.question, ":"), " ", a.answer))) : null), row.handle ? /* @__PURE__ */ React.createElement("span", { className: "ml-auto shrink-0 font-mono text-[10px] text-muted-foreground", title: `Remark ${row.handle}` }, row.handle) : null);
-  }));
+    return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-start gap-1.5 rounded-md border border-border bg-card px-2 py-1 text-xs", "data-remark-handle": row.handle ?? void 0, children: [
+      /* @__PURE__ */ jsx(Icon, { className: "mt-0.5 h-3.5 w-3.5 shrink-0 text-amber-600 dark:text-amber-400", "aria-label": label }),
+      /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 gap-0.5", children: [
+        row.quote || row.title ? /* @__PURE__ */ jsx("div", { className: "truncate border-l-2 border-primary/40 pl-1.5 text-muted-foreground", children: row.quote ?? row.title }) : null,
+        row.body ? /* @__PURE__ */ jsx("div", { className: "whitespace-pre-wrap text-foreground", children: row.body }) : null,
+        row.diff ? /* @__PURE__ */ jsx(RemarkDiff, { diff: row.diff }) : null,
+        row.answers.length ? /* @__PURE__ */ jsx("ul", { className: "grid gap-0.5 text-foreground", children: row.answers.map((a, j) => /* @__PURE__ */ jsxs("li", { className: "truncate", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+            a.question,
+            ":"
+          ] }),
+          " ",
+          a.answer
+        ] }, j)) }) : null
+      ] }),
+      row.handle ? /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 font-mono text-[10px] text-muted-foreground", title: `Remark ${row.handle}`, children: row.handle }) : null
+    ] }, i);
+  }) });
 }
 export {
   RemarksTranscriptView,

package/dist/agents/components/messages-display/user/ResourceAttachmentTile.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { compactChipLabel } from "./compact-chip-label.js";
 import {
   createElement,
@@ -91,163 +92,202 @@ function ResourceAttachmentTile({
   const HIDE_ON_TOUCH = "max-lg:hidden pointer-coarse:hidden";
   if (variant === "compact") {
     const word = compactChipLabel(title) || typeLabel;
-    return /* @__PURE__ */ React.createElement(Popover, { open: menuOpen, onOpenChange: setMenuOpen }, /* @__PURE__ */ React.createElement(PopoverAnchor, { asChild: true }, /* @__PURE__ */ React.createElement(
-      "span",
+    return /* @__PURE__ */ jsxs(Popover, { open: menuOpen, onOpenChange: setMenuOpen, children: [
+      /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cn("inline-flex shrink-0", className),
+          onPointerDown: handlePointerDown,
+          onPointerUp: clearLongPress,
+          onPointerMove: clearLongPress,
+          onPointerLeave: clearLongPress,
+          onPointerCancel: clearLongPress,
+          onClickCapture: handleClickCapture,
+          children: /* @__PURE__ */ jsxs(Tooltip, { children: [
+            /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              ComposerChip,
+              {
+                tone: "quiet",
+                onClick: handleChipClick,
+                "aria-label": `${typeLabel}: ${title}`,
+                "aria-haspopup": hasControls ? "menu" : void 0,
+                pressed,
+                busy: pending,
+                error,
+                icon: error ? /* @__PURE__ */ jsx(AlertCircle, { className: "text-destructive" }) : createElement(Icon, { className: theme.icon }),
+                label: word,
+                remove: onRemove ? { label: `Remove ${title}`, onRemove, touch: "hide" } : void 0,
+                parts: showToggle ? /* @__PURE__ */ jsx(
+                  ComposerChipPart,
+                  {
+                    tone: "quiet",
+                    "aria-pressed": editable,
+                    "aria-label": editableTooltip,
+                    onClick: (e) => {
+                      stop(e);
+                      toggleEditable();
+                    },
+                    className: HIDE_ON_TOUCH,
+                    children: editable ? /* @__PURE__ */ jsx(Pencil, {}) : /* @__PURE__ */ jsx(Lock, {})
+                  }
+                ) : void 0
+              }
+            ) }),
+            /* @__PURE__ */ jsxs(TooltipContent, { side: "top", className: "max-w-[16rem]", children: [
+              /* @__PURE__ */ jsx("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: typeLabel }),
+              /* @__PURE__ */ jsx("div", { className: "font-medium text-popover-foreground", children: title }),
+              showToggle && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-[10px] text-muted-foreground/80", children: editable ? "Agent can edit" : "Read-only to agent" })
+            ] })
+          ] })
+        }
+      ) }),
+      hasControls ? /* @__PURE__ */ jsxs(PopoverContent, { sizing: "content", side: "top", align: "end", sideOffset: 6, className: "p-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "px-2 py-1.5", children: [
+          /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-foreground", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: typeLabel })
+        ] }),
+        onClick ? /* @__PURE__ */ jsx(Tile, { variant: "quiet", icon: /* @__PURE__ */ jsx(ExternalLink, {}), title: "Open", onClick: (e) => {
+          stop(e);
+          setMenuOpen(false);
+          onClick();
+        } }) : null,
+        showToggle ? /* @__PURE__ */ jsx(Tile, { variant: "quiet", icon: editable ? /* @__PURE__ */ jsx(Lock, {}) : /* @__PURE__ */ jsx(Pencil, {}), title: editable ? "Make read-only" : "Allow agent editing", onClick: (e) => {
+          stop(e);
+          toggleEditable();
+        } }) : null,
+        onRemove ? /* @__PURE__ */ jsx(Tile, { variant: "quiet", danger: true, icon: /* @__PURE__ */ jsx(X, {}), title: "Remove", onClick: (e) => {
+          stop(e);
+          setMenuOpen(false);
+          onRemove();
+        } }) : null
+      ] }) : null
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Popover, { open: menuOpen, onOpenChange: setMenuOpen, children: [
+    /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsxs(
+      "div",
       {
-        className: cn("inline-flex shrink-0", className),
+        className: cn(
+          RESOURCE_ATTACHMENT_TILE_SHELL_ADAPTIVE,
+          "w-[7.5rem] inline-flex items-stretch text-left min-w-0",
+          resourceAttachmentTileAdaptiveSurface(theme),
+          error && "ring-1 ring-destructive/50",
+          pressed && "ring-1 ring-primary/60",
+          className
+        ),
         onPointerDown: handlePointerDown,
         onPointerUp: clearLongPress,
         onPointerMove: clearLongPress,
         onPointerLeave: clearLongPress,
         onPointerCancel: clearLongPress,
-        onClickCapture: handleClickCapture
-      },
-      /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-        ComposerChip,
-        {
-          tone: "quiet",
-          onClick: handleChipClick,
-          "aria-label": `${typeLabel}: ${title}`,
-          "aria-haspopup": hasControls ? "menu" : void 0,
-          pressed,
-          busy: pending,
-          error,
-          icon: error ? /* @__PURE__ */ React.createElement(AlertCircle, { className: "text-destructive" }) : createElement(Icon, { className: theme.icon }),
-          label: word,
-          remove: onRemove ? { label: `Remove ${title}`, onRemove, touch: "hide" } : void 0,
-          parts: showToggle ? /* @__PURE__ */ React.createElement(
-            ComposerChipPart,
+        onClickCapture: handleClickCapture,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
             {
-              tone: "quiet",
-              "aria-pressed": editable,
-              "aria-label": editableTooltip,
-              onClick: (e) => {
-                stop(e);
-                toggleEditable();
-              },
-              className: HIDE_ON_TOUCH
-            },
-            editable ? /* @__PURE__ */ React.createElement(Pencil, null) : /* @__PURE__ */ React.createElement(Lock, null)
-          ) : void 0
-        }
-      )), /* @__PURE__ */ React.createElement(TooltipContent, { side: "top", className: "max-w-[16rem]" }, /* @__PURE__ */ React.createElement("div", { className: "text-[10px] uppercase tracking-wide text-muted-foreground" }, typeLabel), /* @__PURE__ */ React.createElement("div", { className: "font-medium text-popover-foreground" }, title), showToggle && /* @__PURE__ */ React.createElement("div", { className: "mt-0.5 text-[10px] text-muted-foreground/80" }, editable ? "Agent can edit" : "Read-only to agent")))
-    )), hasControls ? /* @__PURE__ */ React.createElement(PopoverContent, { sizing: "content", side: "top", align: "end", sideOffset: 6, className: "p-1" }, /* @__PURE__ */ React.createElement("div", { className: "px-2 py-1.5" }, /* @__PURE__ */ React.createElement("p", { className: "truncate text-xs font-semibold text-foreground" }, title), /* @__PURE__ */ React.createElement("p", { className: "text-[10px] uppercase tracking-wide text-muted-foreground" }, typeLabel)), onClick ? /* @__PURE__ */ React.createElement(Tile, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(ExternalLink, null), title: "Open", onClick: (e) => {
-      stop(e);
-      setMenuOpen(false);
-      onClick();
-    } }) : null, showToggle ? /* @__PURE__ */ React.createElement(Tile, { variant: "quiet", icon: editable ? /* @__PURE__ */ React.createElement(Lock, null) : /* @__PURE__ */ React.createElement(Pencil, null), title: editable ? "Make read-only" : "Allow agent editing", onClick: (e) => {
-      stop(e);
-      toggleEditable();
-    } }) : null, onRemove ? /* @__PURE__ */ React.createElement(Tile, { variant: "quiet", danger: true, icon: /* @__PURE__ */ React.createElement(X, null), title: "Remove", onClick: (e) => {
-      stop(e);
-      setMenuOpen(false);
-      onRemove();
-    } }) : null) : null);
-  }
-  return /* @__PURE__ */ React.createElement(Popover, { open: menuOpen, onOpenChange: setMenuOpen }, /* @__PURE__ */ React.createElement(PopoverAnchor, { asChild: true }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cn(
-        RESOURCE_ATTACHMENT_TILE_SHELL_ADAPTIVE,
-        "w-[7.5rem] inline-flex items-stretch text-left min-w-0",
-        resourceAttachmentTileAdaptiveSurface(theme),
-        error && "ring-1 ring-destructive/50",
-        pressed && "ring-1 ring-primary/60",
-        className
-      ),
-      onPointerDown: handlePointerDown,
-      onPointerUp: clearLongPress,
-      onPointerMove: clearLongPress,
-      onPointerLeave: clearLongPress,
-      onPointerCancel: clearLongPress,
-      onClickCapture: handleClickCapture
-    },
-    /* @__PURE__ */ React.createElement(
-      "button",
+              type: "button",
+              title,
+              onClick,
+              "aria-pressed": pressed,
+              className: "flex min-w-0 flex-1 flex-col gap-0.5 px-1.5 py-1 text-left",
+              children: [
+                /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 min-w-0 w-full", children: [
+                  /* @__PURE__ */ jsx("span", { className: "h-[1.125rem] w-[1.125rem] shrink-0 flex items-center justify-center", children: pending ? /* @__PURE__ */ jsx(
+                    Loader2,
+                    {
+                      className: cn(
+                        "h-3.5 w-3.5 shrink-0 animate-spin",
+                        theme.icon
+                      )
+                    }
+                  ) : error ? /* @__PURE__ */ jsx(AlertCircle, { className: "h-3.5 w-3.5 shrink-0 text-destructive" }) : createElement(Icon, {
+                    className: cn("h-3.5 w-3.5 shrink-0", theme.icon)
+                  }) }),
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate whitespace-nowrap text-[9px] font-semibold leading-none text-muted-foreground uppercase tracking-wide", children: typeLabel })
+                ] }),
+                /* @__PURE__ */ jsx("span", { className: "block w-full min-w-0 truncate whitespace-nowrap text-[10px] leading-none text-foreground font-medium", children: title })
+              ]
+            }
+          ),
+          hasControls ? /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-between py-0.5 pl-0.5 pr-[3px]", children: [
+            onRemove ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                role: "button",
+                tabIndex: 0,
+                "aria-label": `Remove ${title}`,
+                onClick: (e) => {
+                  stop(e);
+                  onRemove();
+                },
+                onKeyDown: (e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    stop(e);
+                    onRemove();
+                  }
+                },
+                className: cn(
+                  "inline-flex items-center justify-center rounded-full p-0.5",
+                  "text-muted-foreground/80 hover:bg-black/10 hover:text-foreground",
+                  "dark:hover:bg-white/10 transition-colors"
+                ),
+                children: /* @__PURE__ */ jsx(X, { className: "h-2.5 w-2.5" })
+              }
+            ) : /* @__PURE__ */ jsx("span", {}),
+            showToggle ? /* @__PURE__ */ jsxs(Tooltip, { children: [
+              /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                "span",
+                {
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-pressed": editable,
+                  "aria-label": editableTooltip,
+                  onClick: (e) => {
+                    stop(e);
+                    toggleEditable();
+                  },
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      stop(e);
+                      toggleEditable();
+                    }
+                  },
+                  className: "inline-flex items-center justify-center rounded-full p-0.5 text-foreground",
+                  children: editable ? /* @__PURE__ */ jsx(Pencil, { className: "h-2.5 w-2.5" }) : /* @__PURE__ */ jsx(Lock, { className: "h-2.5 w-2.5" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(TooltipContent, { side: "top", className: "text-xs", children: editableTooltip })
+            ] }) : null
+          ] }) : null
+        ]
+      }
+    ) }),
+    hasControls ? /* @__PURE__ */ jsxs(
+      PopoverContent,
       {
-        type: "button",
-        title,
-        onClick,
-        "aria-pressed": pressed,
-        className: "flex min-w-0 flex-1 flex-col gap-0.5 px-1.5 py-1 text-left"
-      },
-      /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-1 min-w-0 w-full" }, /* @__PURE__ */ React.createElement("span", { className: "h-[1.125rem] w-[1.125rem] shrink-0 flex items-center justify-center" }, pending ? /* @__PURE__ */ React.createElement(
-        Loader2,
-        {
-          className: cn(
-            "h-3.5 w-3.5 shrink-0 animate-spin",
-            theme.icon
-          )
-        }
-      ) : error ? /* @__PURE__ */ React.createElement(AlertCircle, { className: "h-3.5 w-3.5 shrink-0 text-destructive" }) : createElement(Icon, {
-        className: cn("h-3.5 w-3.5 shrink-0", theme.icon)
-      })), /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate whitespace-nowrap text-[9px] font-semibold leading-none text-muted-foreground uppercase tracking-wide" }, typeLabel)),
-      /* @__PURE__ */ React.createElement("span", { className: "block w-full min-w-0 truncate whitespace-nowrap text-[10px] leading-none text-foreground font-medium" }, title)
-    ),
-    hasControls ? /* @__PURE__ */ React.createElement("div", { className: "flex flex-col items-center justify-between py-0.5 pl-0.5 pr-[3px]" }, onRemove ? /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        role: "button",
-        tabIndex: 0,
-        "aria-label": `Remove ${title}`,
-        onClick: (e) => {
-          stop(e);
-          onRemove();
-        },
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            stop(e);
-            onRemove();
-          }
-        },
-        className: cn(
-          "inline-flex items-center justify-center rounded-full p-0.5",
-          "text-muted-foreground/80 hover:bg-black/10 hover:text-foreground",
-          "dark:hover:bg-white/10 transition-colors"
-        )
-      },
-      /* @__PURE__ */ React.createElement(X, { className: "h-2.5 w-2.5" })
-    ) : /* @__PURE__ */ React.createElement("span", null), showToggle ? /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
-      "span",
-      {
-        role: "button",
-        tabIndex: 0,
-        "aria-pressed": editable,
-        "aria-label": editableTooltip,
-        onClick: (e) => {
-          stop(e);
-          toggleEditable();
-        },
-        onKeyDown: (e) => {
-          if (e.key === "Enter" || e.key === " ") {
+        sizing: "content",
+        side: "top",
+        align: "end",
+        sideOffset: 6,
+        className: "p-1",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "px-2 py-1.5", children: [
+            /* @__PURE__ */ jsx("p", { className: "truncate text-xs font-semibold text-foreground", children: title }),
+            /* @__PURE__ */ jsx("p", { className: "text-[10px] uppercase tracking-wide text-muted-foreground", children: typeLabel })
+          ] }),
+          showToggle ? /* @__PURE__ */ jsx(Tile, { variant: "quiet", icon: editable ? /* @__PURE__ */ jsx(Lock, {}) : /* @__PURE__ */ jsx(Pencil, {}), title: editable ? "Make read-only" : "Allow agent editing", onClick: (e) => {
             stop(e);
             toggleEditable();
-          }
-        },
-        className: "inline-flex items-center justify-center rounded-full p-0.5 text-foreground"
-      },
-      editable ? /* @__PURE__ */ React.createElement(Pencil, { className: "h-2.5 w-2.5" }) : /* @__PURE__ */ React.createElement(Lock, { className: "h-2.5 w-2.5" })
-    )), /* @__PURE__ */ React.createElement(TooltipContent, { side: "top", className: "text-xs" }, editableTooltip)) : null) : null
-  )), hasControls ? /* @__PURE__ */ React.createElement(
-    PopoverContent,
-    {
-      sizing: "content",
-      side: "top",
-      align: "end",
-      sideOffset: 6,
-      className: "p-1"
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "px-2 py-1.5" }, /* @__PURE__ */ React.createElement("p", { className: "truncate text-xs font-semibold text-foreground" }, title), /* @__PURE__ */ React.createElement("p", { className: "text-[10px] uppercase tracking-wide text-muted-foreground" }, typeLabel)),
-    showToggle ? /* @__PURE__ */ React.createElement(Tile, { variant: "quiet", icon: editable ? /* @__PURE__ */ React.createElement(Lock, null) : /* @__PURE__ */ React.createElement(Pencil, null), title: editable ? "Make read-only" : "Allow agent editing", onClick: (e) => {
-      stop(e);
-      toggleEditable();
-    } }) : null,
-    onRemove ? /* @__PURE__ */ React.createElement(Tile, { variant: "quiet", danger: true, icon: /* @__PURE__ */ React.createElement(X, null), title: "Remove", onClick: (e) => {
-      stop(e);
-      setMenuOpen(false);
-      onRemove();
-    } }) : null
-  ) : null);
+          } }) : null,
+          onRemove ? /* @__PURE__ */ jsx(Tile, { variant: "quiet", danger: true, icon: /* @__PURE__ */ jsx(X, {}), title: "Remove", onClick: (e) => {
+            stop(e);
+            setMenuOpen(false);
+            onRemove();
+          } }) : null
+        ]
+      }
+    ) : null
+  ] });
 }
 export {
   ResourceAttachmentTile

package/dist/agents/components/messages-display/user/ResourceEditableToggleSamples.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { useAppDispatch } from "../../../../store/hooks.js";
 import { SmartAgentResourceChips } from "../../inputs/resources/SmartAgentResourceChips.js";
@@ -44,7 +45,22 @@ function ResourceEditableToggleSamples() {
       );
     }
   }, [dispatch]);
-  return /* @__PURE__ */ React.createElement("div", { className: "space-y-3" }, /* @__PURE__ */ React.createElement("div", { className: "space-y-1 border-b border-border pb-2" }, /* @__PURE__ */ React.createElement("h2", { className: "text-base font-semibold text-foreground" }, "All attachment chips together"), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-muted-foreground max-w-3xl" }, "The real ", /* @__PURE__ */ React.createElement("code", { className: "text-[10px]" }, "SmartAgentResourceChips"), " ", "with one of every resource type. Editable-capable types (Note, Task, Table, List, Data, Webpage) show the Lock/Pencil toggle in the right control column; files, media, YouTube, and text show the remove control only. Click a lock/pencil to toggle, use Remove to delete a chip, and hover a chip for its preview. On a touch device, long-press any chip for a full-size menu. Writable references send the visible decision exactly:", /* @__PURE__ */ React.createElement("code", { className: "text-[10px]" }, " editable: false"), " when locked and", /* @__PURE__ */ React.createElement("code", { className: "text-[10px]" }, " editable: true"), " when unlocked.")), /* @__PURE__ */ React.createElement("div", { className: "bg-muted border border-border rounded-lg py-2 max-w-3xl" }, /* @__PURE__ */ React.createElement(SmartAgentResourceChips, { conversationId: DEMO_CONV_ALL_RESOURCES })));
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1 border-b border-border pb-2", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold text-foreground", children: "All attachment chips together" }),
+      /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground max-w-3xl", children: [
+        "The real ",
+        /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: "SmartAgentResourceChips" }),
+        " ",
+        "with one of every resource type. Editable-capable types (Note, Task, Table, List, Data, Webpage) show the Lock/Pencil toggle in the right control column; files, media, YouTube, and text show the remove control only. Click a lock/pencil to toggle, use Remove to delete a chip, and hover a chip for its preview. On a touch device, long-press any chip for a full-size menu. Writable references send the visible decision exactly:",
+        /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: " editable: false" }),
+        " when locked and",
+        /* @__PURE__ */ jsx("code", { className: "text-[10px]", children: " editable: true" }),
+        " when unlocked."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "bg-muted border border-border rounded-lg py-2 max-w-3xl", children: /* @__PURE__ */ jsx(SmartAgentResourceChips, { conversationId: DEMO_CONV_ALL_RESOURCES }) })
+  ] });
 }
 export {
   ResourceEditableToggleSamples