@ai-matrx/chat 0.5.0 → 0.5.3

package/dist/agents/components/inputs/smart-input/RunControlsTabPanel.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Badge, Tile } from "@ai-matrx/design-system/controls";
 import {
   Paperclip,
@@ -94,7 +95,7 @@ const baseTabs = () => [
   { id: "settings", label: "Advanced Settings", icon: AppWindow }
 ];
 function TabStatusDot({ label }) {
-  return /* @__PURE__ */ React.createElement("span", { className: "h-1.5 w-1.5 rounded-full bg-primary", "aria-label": label });
+  return /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 rounded-full bg-primary", "aria-label": label });
 }
 function useRunControlsState(conversationId, includeAttach) {
   const dispatch = useAppDispatch();
@@ -149,16 +150,16 @@ function useRunControlsState(conversationId, includeAttach) {
   const isCustomized = addedCount > 0 || addedSkillsCount > 0 || hasSandbox || hasModelOverride || anyDocActive || hasActiveContext || (settings?.autoTools ?? null) !== null || (settings?.removedTools?.length ?? 0) > 0 || !!settings?.surfaceOverride;
   const tabTrailing = (tabId) => {
     if (tabId === "tools" && addedCount > 0) {
-      return /* @__PURE__ */ React.createElement(Badge, { tone: "primary" }, addedCount);
+      return /* @__PURE__ */ jsx(Badge, { tone: "primary", children: addedCount });
     }
     if (tabId === "model" && hasModelOverride) {
-      return /* @__PURE__ */ React.createElement(TabStatusDot, { label: "overridden" });
+      return /* @__PURE__ */ jsx(TabStatusDot, { label: "overridden" });
     }
     if (tabId === "context" && hasActiveContext) {
-      return /* @__PURE__ */ React.createElement(TabStatusDot, { label: "scopes set" });
+      return /* @__PURE__ */ jsx(TabStatusDot, { label: "scopes set" });
     }
     if (tabId === "document" && anyDocActive) {
-      return /* @__PURE__ */ React.createElement(TabStatusDot, { label: "document active" });
+      return /* @__PURE__ */ jsx(TabStatusDot, { label: "document active" });
     }
     return null;
   };
@@ -208,72 +209,95 @@ function RunControlsTabPanel({
   const openPromptPreview = useOpenPromptPreviewWindow();
   const store = useAppStore();
   const getApplicationScope = () => buildRunControlsApplicationScope(store.getState(), conversationId);
-  const menuWrap = (child) => /* @__PURE__ */ React.createElement(
+  const menuWrap = (child) => /* @__PURE__ */ jsx(
     NonEditableContextMenu,
     {
       sourceFeature: CHAT_CONTEXT_MENU_PROPS.sourceFeature,
       surfaceName: CHAT_CONTEXT_MENU_PROPS.surfaceName,
-      getApplicationScope
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "h-full min-h-0" }, child)
-  );
-  return /* @__PURE__ */ React.createElement("div", { className: panelClass }, activeTab === "attach" && /* @__PURE__ */ React.createElement("div", { className: "h-full min-h-0 overflow-hidden" }, /* @__PURE__ */ React.createElement(
-    ResourcePickerMenu,
-    {
-      conversationId,
-      fillHost: true,
-      onResourceSelected,
-      onResourceDeselected,
-      onClose,
-      onPicked,
-      attachmentCapabilities
+      getApplicationScope,
+      children: /* @__PURE__ */ jsx("div", { className: "h-full min-h-0", children: child })
     }
-  )), activeTab === "quickset" && menuWrap(
-    /* @__PURE__ */ React.createElement(
-      QuicksetPanel,
+  );
+  return /* @__PURE__ */ jsxs("div", { className: panelClass, children: [
+    activeTab === "attach" && /* @__PURE__ */ jsx("div", { className: "h-full min-h-0 overflow-hidden", children: /* @__PURE__ */ jsx(
+      ResourcePickerMenu,
       {
         conversationId,
-        isCreator,
-        showCreatorPanel,
-        onToggleCreatorPanel
+        fillHost: true,
+        onResourceSelected,
+        onResourceDeselected,
+        onClose,
+        onPicked,
+        attachmentCapabilities
       }
-    )
-  ), activeTab === "context" && /* @__PURE__ */ React.createElement("div", { className: cn(scrollClass, "p-2") }, /* @__PURE__ */ React.createElement(ActiveContextTree, { conversationId, maxHeight: 420 })), activeTab === "document" && /* @__PURE__ */ React.createElement("div", { className: "h-full overflow-hidden" }, /* @__PURE__ */ React.createElement(
-    DocumentsWorkspace,
-    {
-      conversationId,
-      defaultRailOpen: false,
-      className: "h-full"
-    }
-  )), activeTab === "model" && menuWrap(
-    /* @__PURE__ */ React.createElement("div", { className: scrollClass }, /* @__PURE__ */ React.createElement(RunModelPicker, { conversationId }), /* @__PURE__ */ React.createElement(RunConfigOverrides, { conversationId }), /* @__PURE__ */ React.createElement(RunInputCapabilities, { conversationId }))
-  ), activeTab === "connections" && /* @__PURE__ */ React.createElement("div", { className: "flex h-full min-h-0 flex-col overflow-hidden" }, /* @__PURE__ */ React.createElement(ComposerConnectorsPanel, { conversationId, onNavigate: onClose })), activeTab === "tools" && menuWrap(
-    /* @__PURE__ */ React.createElement("div", { className: "h-full overflow-hidden" }, /* @__PURE__ */ React.createElement(RunToolPicker, { conversationId }))
-  ), activeTab === "skills" && menuWrap(
-    /* @__PURE__ */ React.createElement("div", { className: "h-full overflow-hidden" }, /* @__PURE__ */ React.createElement(RunSkillPicker, { conversationId }))
-  ), activeTab === "sandbox" && menuWrap(
-    /* @__PURE__ */ React.createElement("div", { className: scrollClass }, /* @__PURE__ */ React.createElement(SandboxPanel, { conversationId }))
-  ), activeTab === "memory" && /* @__PURE__ */ React.createElement("div", { className: "h-full overflow-hidden" }, /* @__PURE__ */ React.createElement(AgentMemoryInlinePanel, null)), activeTab === "settings" && menuWrap(
-    /* @__PURE__ */ React.createElement("div", { className: cn(scrollClass, "px-3 py-2") }, /* @__PURE__ */ React.createElement(RunSettingsEditor, { conversationId }))
-  ), activeTab === "creator" && menuWrap(
-    /* @__PURE__ */ React.createElement("div", { className: cn(scrollClass, "px-3 py-2") }, /* @__PURE__ */ React.createElement("div", { className: "space-y-0.5" }, isCreator && /* @__PURE__ */ React.createElement(
-      "button",
+    ) }),
+    activeTab === "quickset" && menuWrap(
+      /* @__PURE__ */ jsx(
+        QuicksetPanel,
+        {
+          conversationId,
+          isCreator,
+          showCreatorPanel,
+          onToggleCreatorPanel
+        }
+      )
+    ),
+    activeTab === "context" && /* @__PURE__ */ jsx("div", { className: cn(scrollClass, "p-2"), children: /* @__PURE__ */ jsx(ActiveContextTree, { conversationId, maxHeight: 420 }) }),
+    activeTab === "document" && /* @__PURE__ */ jsx("div", { className: "h-full overflow-hidden", children: /* @__PURE__ */ jsx(
+      DocumentsWorkspace,
       {
-        type: "button",
-        onClick: onToggleCreatorPanel,
-        "aria-pressed": showCreatorPanel,
-        className: cn(
-          "flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-xs transition-colors",
-          showCreatorPanel ? "bg-amber-500/10 text-foreground" : "text-foreground hover:bg-muted/60"
-        )
-      },
-      /* @__PURE__ */ React.createElement(Crown, { className: "h-3.5 w-3.5 shrink-0 text-amber-500" }),
-      /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate" }, "Creator panel"),
-      showCreatorPanel && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-[9px] font-semibold uppercase tracking-wide text-amber-600 dark:text-amber-400" }, "on")
-    ), showDebugAction && /* @__PURE__ */ React.createElement(Tile, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(Bug, null), glyphTone: "warning", title: "Debug instance state", onClick: onOpenDebug }), /* @__PURE__ */ React.createElement(Tile, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(ScrollText, null), glyphTone: "info", title: "Preview full prompt", onClick: () => {
-      openPromptPreview({ conversationId });
-    } })))
-  ));
+        conversationId,
+        defaultRailOpen: false,
+        className: "h-full"
+      }
+    ) }),
+    activeTab === "model" && menuWrap(
+      /* @__PURE__ */ jsxs("div", { className: scrollClass, children: [
+        /* @__PURE__ */ jsx(RunModelPicker, { conversationId }),
+        /* @__PURE__ */ jsx(RunConfigOverrides, { conversationId }),
+        /* @__PURE__ */ jsx(RunInputCapabilities, { conversationId })
+      ] })
+    ),
+    activeTab === "connections" && /* @__PURE__ */ jsx("div", { className: "flex h-full min-h-0 flex-col overflow-hidden", children: /* @__PURE__ */ jsx(ComposerConnectorsPanel, { conversationId, onNavigate: onClose }) }),
+    activeTab === "tools" && menuWrap(
+      /* @__PURE__ */ jsx("div", { className: "h-full overflow-hidden", children: /* @__PURE__ */ jsx(RunToolPicker, { conversationId }) })
+    ),
+    activeTab === "skills" && menuWrap(
+      /* @__PURE__ */ jsx("div", { className: "h-full overflow-hidden", children: /* @__PURE__ */ jsx(RunSkillPicker, { conversationId }) })
+    ),
+    activeTab === "sandbox" && menuWrap(
+      /* @__PURE__ */ jsx("div", { className: scrollClass, children: /* @__PURE__ */ jsx(SandboxPanel, { conversationId }) })
+    ),
+    activeTab === "memory" && /* @__PURE__ */ jsx("div", { className: "h-full overflow-hidden", children: /* @__PURE__ */ jsx(AgentMemoryInlinePanel, {}) }),
+    activeTab === "settings" && menuWrap(
+      /* @__PURE__ */ jsx("div", { className: cn(scrollClass, "px-3 py-2"), children: /* @__PURE__ */ jsx(RunSettingsEditor, { conversationId }) })
+    ),
+    activeTab === "creator" && menuWrap(
+      /* @__PURE__ */ jsx("div", { className: cn(scrollClass, "px-3 py-2"), children: /* @__PURE__ */ jsxs("div", { className: "space-y-0.5", children: [
+        isCreator && /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: onToggleCreatorPanel,
+            "aria-pressed": showCreatorPanel,
+            className: cn(
+              "flex h-8 w-full items-center gap-2 rounded-md px-2 text-left text-xs transition-colors",
+              showCreatorPanel ? "bg-amber-500/10 text-foreground" : "text-foreground hover:bg-muted/60"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Crown, { className: "h-3.5 w-3.5 shrink-0 text-amber-500" }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: "Creator panel" }),
+              showCreatorPanel && /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[9px] font-semibold uppercase tracking-wide text-amber-600 dark:text-amber-400", children: "on" })
+            ]
+          }
+        ),
+        showDebugAction && /* @__PURE__ */ jsx(Tile, { variant: "quiet", icon: /* @__PURE__ */ jsx(Bug, {}), glyphTone: "warning", title: "Debug instance state", onClick: onOpenDebug }),
+        /* @__PURE__ */ jsx(Tile, { variant: "quiet", icon: /* @__PURE__ */ jsx(ScrollText, {}), glyphTone: "info", title: "Preview full prompt", onClick: () => {
+          openPromptPreview({ conversationId });
+        } })
+      ] }) })
+    )
+  ] });
 }
 export {
   RunControlsTabPanel,

package/dist/agents/components/inputs/smart-input/RunPicksSurface.js

@@ -1,4 +1,5 @@
 "use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { Check, X } from "lucide-react";
 import { cn, Skeleton } from "@ai-matrx/design-system";
@@ -33,116 +34,155 @@ function RunPicksSurface({
   const matches = query ? searchCatalog(query) : [];
   const catalogRow = (item) => {
     const selected = addedIds.has(item.id);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       PickerRow,
       {
-        key: item.id,
-        leading: /* @__PURE__ */ React.createElement(CheckBox, { on: item.locked || selected, muted: item.locked }),
+        leading: /* @__PURE__ */ jsx(CheckBox, { on: item.locked || selected, muted: item.locked }),
         label: item.label,
         secondary: item.secondary || void 0,
         title: item.title || void 0,
         selected,
         pressed: item.locked || selected,
         disabled: item.locked,
-        trailing: selected ? /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-xs text-primary" }, "Added") : item.note ? /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-xs text-muted-foreground" }, item.note) : null,
+        trailing: selected ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-primary", children: "Added" }) : item.note ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: item.note }) : null,
         onClick: () => onToggle(item.id)
-      }
+      },
+      item.id
     );
   };
-  const agentPane = /* @__PURE__ */ React.createElement(
+  const agentPane = /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain p-1.5",
         pane === "agent" ? "flex" : "hidden",
         "@2xl:flex @2xl:border-r @2xl:border-border"
-      )
-    },
-    added.length > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-      PickerSectionLabel,
-      {
-        action: /* @__PURE__ */ React.createElement(Button, { variant: "quiet", onClick: onClear }, "Clear")
-      },
-      "Added for this run \xB7 ",
-      added.length
-    ), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, added.map((item) => /* @__PURE__ */ React.createElement(
-      PickerRow,
-      {
-        key: item.id,
-        icon,
-        iconClassName: "text-primary",
-        label: item.label,
-        secondary: item.secondary,
-        title: "Remove from this run",
-        trailing: /* @__PURE__ */ React.createElement(X, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
-        onClick: () => onToggle(item.id)
-      }
-    )))) : null,
-    /* @__PURE__ */ React.createElement(
-      PickerSectionLabel,
-      {
-        action: /* @__PURE__ */ React.createElement("span", { className: "text-xs tabular-nums text-muted-foreground" }, agentCount)
-      },
-      "This agent's ",
-      noun
-    ),
-    agentSection
+      ),
+      children: [
+        added.length > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            PickerSectionLabel,
+            {
+              action: /* @__PURE__ */ jsx(Button, { variant: "quiet", onClick: onClear, children: "Clear" }),
+              children: [
+                "Added for this run \xB7 ",
+                added.length
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: added.map((item) => /* @__PURE__ */ jsx(
+            PickerRow,
+            {
+              icon,
+              iconClassName: "text-primary",
+              label: item.label,
+              secondary: item.secondary,
+              title: "Remove from this run",
+              trailing: /* @__PURE__ */ jsx(X, { className: "h-4 w-4 shrink-0 text-muted-foreground" }),
+              onClick: () => onToggle(item.id)
+            },
+            item.id
+          )) })
+        ] }) : null,
+        /* @__PURE__ */ jsxs(
+          PickerSectionLabel,
+          {
+            action: /* @__PURE__ */ jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: agentCount }),
+            children: [
+              "This agent's ",
+              noun
+            ]
+          }
+        ),
+        agentSection
+      ]
+    }
   );
-  const addPane = /* @__PURE__ */ React.createElement(
+  const addPane = /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "min-h-0 flex-1 flex-col",
         pane === "add" ? "flex" : "hidden",
         "@2xl:flex"
-      )
-    },
-    /* @__PURE__ */ React.createElement("div", { className: "shrink-0 p-1.5 pb-0" }, /* @__PURE__ */ React.createElement(
-      PickerSearchField,
-      {
-        value: search,
-        onChange: setSearch,
-        placeholder: catalogSize > 0 ? `Search ${catalogSize} ${noun}` : `Search ${noun}`,
-        disabled: !!addDisabledReason
-      }
-    )),
-    /* @__PURE__ */ React.createElement("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-1.5" }, addDisabledReason ? /* @__PURE__ */ React.createElement(PickerEmpty, null, addDisabledReason) : catalogState ? catalogState : query ? matches.length === 0 ? /* @__PURE__ */ React.createElement(PickerEmpty, null, "No ", noun, " match \u201C", query, "\u201D") : matches.map(catalogRow) : groups.length === 0 ? /* @__PURE__ */ React.createElement(PickerEmpty, null, "No ", noun, " available") : groups.map((group) => /* @__PURE__ */ React.createElement("section", { key: group.label }, /* @__PURE__ */ React.createElement(
-      PickerSectionLabel,
-      {
-        action: /* @__PURE__ */ React.createElement("span", { className: "text-xs tabular-nums text-muted-foreground" }, group.items.length)
-      },
-      group.label
-    ), group.items.map(catalogRow))))
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "shrink-0 p-1.5 pb-0", children: /* @__PURE__ */ jsx(
+          PickerSearchField,
+          {
+            value: search,
+            onChange: setSearch,
+            placeholder: catalogSize > 0 ? `Search ${catalogSize} ${noun}` : `Search ${noun}`,
+            disabled: !!addDisabledReason
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-y-auto overscroll-contain p-1.5", children: addDisabledReason ? /* @__PURE__ */ jsx(PickerEmpty, { children: addDisabledReason }) : catalogState ? catalogState : query ? matches.length === 0 ? /* @__PURE__ */ jsxs(PickerEmpty, { children: [
+          "No ",
+          noun,
+          " match \u201C",
+          query,
+          "\u201D"
+        ] }) : matches.map(catalogRow) : groups.length === 0 ? /* @__PURE__ */ jsxs(PickerEmpty, { children: [
+          "No ",
+          noun,
+          " available"
+        ] }) : groups.map((group) => /* @__PURE__ */ jsxs("section", { children: [
+          /* @__PURE__ */ jsx(
+            PickerSectionLabel,
+            {
+              action: /* @__PURE__ */ jsx("span", { className: "text-xs tabular-nums text-muted-foreground", children: group.items.length }),
+              children: group.label
+            }
+          ),
+          group.items.map(catalogRow)
+        ] }, group.label)) })
+      ]
+    }
   );
-  return /* @__PURE__ */ React.createElement("div", { className: "@container flex h-full min-h-0 flex-1 flex-col overflow-hidden" }, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cn(
-        "flex shrink-0 flex-col gap-1.5 border-b border-border p-1.5",
-        !topSlot && !notice && "@2xl:hidden"
-      )
-    },
-    topSlot,
-    notice,
-    /* @__PURE__ */ React.createElement(
-      SegmentedControl,
+  return /* @__PURE__ */ jsxs("div", { className: "@container flex h-full min-h-0 flex-1 flex-col overflow-hidden", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
       {
-        "aria-label": "Pane",
-        className: "@2xl:hidden",
-        fill: true,
-        value: pane,
-        onValueChange: (next) => setPane(next === "add" ? "add" : "agent"),
-        data: [
-          {
-            value: "agent",
-            ariaLabel: `Agent's ${noun}`,
-            label: /* @__PURE__ */ React.createElement("span", { className: "flex items-center gap-1.5" }, "Agent's ", noun, /* @__PURE__ */ React.createElement("span", { className: "tabular-nums text-muted-foreground" }, agentCount, added.length > 0 ? ` +${added.length}` : ""))
-          },
-          { value: "add", label: `Add ${noun}` }
+        className: cn(
+          "flex shrink-0 flex-col gap-1.5 border-b border-border p-1.5",
+          !topSlot && !notice && "@2xl:hidden"
+        ),
+        children: [
+          topSlot,
+          notice,
+          /* @__PURE__ */ jsx(
+            SegmentedControl,
+            {
+              "aria-label": "Pane",
+              className: "@2xl:hidden",
+              fill: true,
+              value: pane,
+              onValueChange: (next) => setPane(next === "add" ? "add" : "agent"),
+              data: [
+                {
+                  value: "agent",
+                  ariaLabel: `Agent's ${noun}`,
+                  label: /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+                    "Agent's ",
+                    noun,
+                    /* @__PURE__ */ jsxs("span", { className: "tabular-nums text-muted-foreground", children: [
+                      agentCount,
+                      added.length > 0 ? ` +${added.length}` : ""
+                    ] })
+                  ] })
+                },
+                { value: "add", label: `Add ${noun}` }
+              ]
+            }
+          )
         ]
       }
-    )
-  ), /* @__PURE__ */ React.createElement("div", { className: "flex min-h-0 flex-1 @2xl:grid @2xl:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] @2xl:grid-rows-[minmax(0,1fr)]" }, agentPane, addPane));
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-1 @2xl:grid @2xl:grid-cols-[minmax(0,2fr)_minmax(0,3fr)] @2xl:grid-rows-[minmax(0,1fr)]", children: [
+      agentPane,
+      addPane
+    ] })
+  ] });
 }
 function PicksSwitchRow({
   label,
@@ -153,34 +193,39 @@ function PicksSwitchRow({
   disabledTitle,
   onCheckedChange
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "label",
     {
       className: cn(
         "flex h-9 cursor-pointer items-center gap-2.5 rounded-lg px-2 text-sm text-foreground hover:bg-accent pointer-coarse:h-11",
         disabled && "cursor-not-allowed opacity-60 hover:bg-transparent"
       ),
-      title: disabled ? disabledTitle : title
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate" }, label),
-    detail ? /* @__PURE__ */ React.createElement("span", { className: "shrink-0 text-xs text-muted-foreground" }, detail) : null,
-    /* @__PURE__ */ React.createElement(
-      Switch,
-      {
-        checked,
-        disabled,
-        onCheckedChange,
-        "aria-label": label,
-        className: "shrink-0"
-      }
-    )
+      title: disabled ? disabledTitle : title,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: label }),
+        detail ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: detail }) : null,
+        /* @__PURE__ */ jsx(
+          Switch,
+          {
+            checked,
+            disabled,
+            onCheckedChange,
+            "aria-label": label,
+            className: "shrink-0"
+          }
+        )
+      ]
+    }
   );
 }
 function PicksNotice({
   icon: Icon,
   children
 }) {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-1.5 px-2 text-xs text-amber-700 dark:text-amber-300" }, /* @__PURE__ */ React.createElement(Icon, { className: "h-3.5 w-3.5 shrink-0 text-amber-500" }), /* @__PURE__ */ React.createElement("span", { className: "truncate" }, children));
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 px-2 text-xs text-amber-700 dark:text-amber-300", children: [
+    /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 text-amber-500" }),
+    /* @__PURE__ */ jsx("span", { className: "truncate", children })
+  ] });
 }
 function PicksLine({
   icon: Icon,
@@ -188,33 +233,35 @@ function PicksLine({
   detail,
   title
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     "div",
     {
       title,
-      className: "flex h-9 min-w-0 items-center gap-2.5 rounded-lg px-1.5 pointer-coarse:h-11"
-    },
-    /* @__PURE__ */ React.createElement("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted" }, /* @__PURE__ */ React.createElement(Icon, { className: "h-4 w-4 text-muted-foreground" })),
-    /* @__PURE__ */ React.createElement("span", { className: "min-w-0 flex-1 truncate text-sm text-foreground" }, label),
-    detail ? /* @__PURE__ */ React.createElement("span", { className: "max-w-[40%] shrink-0 truncate text-xs text-muted-foreground" }, detail) : null
+      className: "flex h-9 min-w-0 items-center gap-2.5 rounded-lg px-1.5 pointer-coarse:h-11",
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-md bg-muted", children: /* @__PURE__ */ jsx(Icon, { className: "h-4 w-4 text-muted-foreground" }) }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-foreground", children: label }),
+        detail ? /* @__PURE__ */ jsx("span", { className: "max-w-[40%] shrink-0 truncate text-xs text-muted-foreground", children: detail }) : null
+      ]
+    }
   );
 }
 function PicksNote({ children }) {
-  return /* @__PURE__ */ React.createElement("p", { className: "px-2 py-2 text-xs text-muted-foreground" }, children);
+  return /* @__PURE__ */ jsx("p", { className: "px-2 py-2 text-xs text-muted-foreground", children });
 }
 function PicksSkeletons() {
-  return /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-1.5 p-1.5" }, [0, 1, 2, 3].map((i) => /* @__PURE__ */ React.createElement(Skeleton, { key: i, className: "h-7 w-full rounded-md" })));
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1.5 p-1.5", children: [0, 1, 2, 3].map((i) => /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-full rounded-md" }, i)) });
 }
 function CheckBox({ on, muted }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "span",
     {
       className: cn(
         "flex h-4 w-4 shrink-0 items-center justify-center rounded border",
         on ? muted ? "border-muted-foreground/40 bg-muted text-muted-foreground" : "border-primary bg-primary text-primary-foreground" : "border-muted-foreground/40"
-      )
-    },
-    on ? /* @__PURE__ */ React.createElement(Check, { className: "h-3 w-3" }) : null
+      ),
+      children: on ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3" }) : null
+    }
   );
 }
 export {

package/dist/agents/components/inputs/smart-input/RunSkillPicker.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from "react/jsx-runtime";
 import { UntrustedCount } from "../../../../host/ui-slots.js";
 import { readOf } from "../../../../host/ui-slots.js";
 import { useEffect } from "react";
@@ -111,7 +112,7 @@ function RunSkillPicker({ conversationId }) {
     { get: (s) => s.skillType, weight: "tag" },
     { get: (s) => s.skillId, weight: "tag" }
   ]).map(toItem);
-  const agentSection = !agentId ? /* @__PURE__ */ React.createElement(PickerEmpty, null, "No agent on this chat") : agentReadError ? /* @__PURE__ */ React.createElement(
+  const agentSection = !agentId ? /* @__PURE__ */ jsx(PickerEmpty, { children: "No agent on this chat" }) : agentReadError ? /* @__PURE__ */ jsx(
     ReadFailure,
     {
       error: agentReadError,
@@ -120,16 +121,15 @@ function RunSkillPicker({ conversationId }) {
       className: "m-1.5",
       onRetry: () => void dispatch(fetchAgentRunControls(agentId))
     }
-  ) : agentLoading ? /* @__PURE__ */ React.createElement(PicksSkeletons, null) : agentSkillCount === 0 ? /* @__PURE__ */ React.createElement(PicksNote, null, "No preset skills") : /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, configuredIds.map((id) => {
+  ) : agentLoading ? /* @__PURE__ */ jsx(PicksSkeletons, {}) : agentSkillCount === 0 ? /* @__PURE__ */ jsx(PicksNote, { children: "No preset skills" }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: configuredIds.map((id) => {
     const skill = skillMap.get(id);
     const tier = tierForSkill(id, config);
     const meta = tier ? TIER_META[tier] : null;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       PicksLine,
       {
-        key: id,
         icon: meta?.icon ?? Lightbulb,
-        label: /* @__PURE__ */ React.createElement(
+        label: /* @__PURE__ */ jsx(
           EntityRef,
           {
             token: "skill",
@@ -142,16 +142,17 @@ function RunSkillPicker({ conversationId }) {
         ),
         detail: meta?.label,
         title: catalogProseText(skill?.description) || void 0
-      }
+      },
+      id
     );
-  }));
-  return /* @__PURE__ */ React.createElement(
+  }) });
+  return /* @__PURE__ */ jsx(
     RunPicksSurface,
     {
       noun: "skills",
       icon: Lightbulb,
-      notice: skillsDisabled ? /* @__PURE__ */ React.createElement(PicksNotice, { icon: EyeOff }, "Skills are off for this agent") : null,
-      agentCount: /* @__PURE__ */ React.createElement(
+      notice: skillsDisabled ? /* @__PURE__ */ jsx(PicksNotice, { icon: EyeOff, children: "Skills are off for this agent" }) : null,
+      agentCount: /* @__PURE__ */ jsx(
         UntrustedCount,
         {
           read: readOf({ isLoading: agentLoading, error: agentReadError }),
@@ -173,7 +174,7 @@ function RunSkillPicker({ conversationId }) {
       catalogSize: list.length,
       groups,
       searchCatalog,
-      catalogState: loading && list.length === 0 ? /* @__PURE__ */ React.createElement(PicksSkeletons, null) : skillsError && list.length === 0 ? /* @__PURE__ */ React.createElement(
+      catalogState: loading && list.length === 0 ? /* @__PURE__ */ jsx(PicksSkeletons, {}) : skillsError && list.length === 0 ? /* @__PURE__ */ jsx(
         ReadFailure,
         {
           error: skillsError,