@ai-matrx/chat 0.5.0 → 0.5.3

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

@@ -1,5 +1,6 @@
 "use client";
-import React, {
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
   useState,
   useRef,
   useEffect,
@@ -254,65 +255,76 @@ ${insert}${base.slice(at)}`
   };
   const placeholderText = placeholder ?? reduxPlaceholder ?? (isExpanded ? "Add a message..." : "Type your message...");
   if (singleRow) {
-    return /* @__PURE__ */ React.createElement("div", { className: "relative flex flex-col min-w-0" }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs("div", { className: "relative flex flex-col min-w-0", children: [
+      /* @__PURE__ */ jsx(
+        ComposerDraftNotice,
+        {
+          conversationId,
+          surfaceKey: draftAlias ?? surfaceKey,
+          currentChars: charCount
+        }
+      ),
+      /* @__PURE__ */ jsx(ComposerToolsNotice, { conversationId }),
+      /* @__PURE__ */ jsx("div", { className: "relative flex items-center min-w-0", children: /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: textareaRef,
+          value: visibleText,
+          onChange: (e) => handleTextChange(e.target.value),
+          onKeyDown: handleKeyDown,
+          placeholder: placeholderText,
+          className: "w-full bg-transparent border-none outline-none text-xs text-foreground placeholder:text-muted-foreground/60 resize-none overflow-hidden leading-5",
+          style: { minHeight: 20, maxHeight: 20 },
+          rows: 1,
+          "data-agent-main-input": true
+        }
+      ) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: flush ? "relative shrink-0" : "px-2 relative shrink-0", children: [
+    /* @__PURE__ */ jsx(
       ComposerDraftNotice,
       {
         conversationId,
         surfaceKey: draftAlias ?? surfaceKey,
         currentChars: charCount
       }
-    ), /* @__PURE__ */ React.createElement(ComposerToolsNotice, { conversationId }), /* @__PURE__ */ React.createElement("div", { className: "relative flex items-center min-w-0" }, /* @__PURE__ */ React.createElement(
-      "textarea",
-      {
-        ref: textareaRef,
-        value: visibleText,
-        onChange: (e) => handleTextChange(e.target.value),
-        onKeyDown: handleKeyDown,
-        placeholder: placeholderText,
-        className: "w-full bg-transparent border-none outline-none text-xs text-foreground placeholder:text-muted-foreground/60 resize-none overflow-hidden leading-5",
-        style: { minHeight: 20, maxHeight: 20 },
-        rows: 1,
-        "data-agent-main-input": true
-      }
-    )));
-  }
-  return /* @__PURE__ */ React.createElement("div", { className: flush ? "relative shrink-0" : "px-2 relative shrink-0" }, /* @__PURE__ */ React.createElement(
-    ComposerDraftNotice,
-    {
-      conversationId,
-      surfaceKey: draftAlias ?? surfaceKey,
-      currentChars: charCount
-    }
-  ), /* @__PURE__ */ React.createElement(ComposerToolsNotice, { conversationId }), /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
-    ComposerTextMenuFrame,
-    {
-      textMenu,
-      textareaRef,
-      onReplace: replaceDraft,
-      onInsert: insertAtCursor
-    },
-    /* @__PURE__ */ React.createElement(
-      "textarea",
-      {
-        ref: textareaRef,
-        value: visibleText,
-        onChange: (e) => handleTextChange(e.target.value),
-        onKeyDown: handleKeyDown,
-        placeholder: placeholderText,
-        className: `w-full bg-transparent border-none outline-none ${composerType ? composerRows ? "text-[15px] leading-6 px-1.5 py-1" : "text-[15px] leading-6 px-2 py-1" : "text-base leading-7"} text-foreground placeholder:text-muted-foreground/60 resize-none overflow-y-auto scrollbar-hide ${// The height transition belongs to the expand/collapse toggles
-        // ONLY. While typing there is no transition class at all: a
-        // line-count change snaps instantly, and an unchanged line count
-        // writes nothing (see the auto-resize effect).
-        isCollapsing ? "transition-[height] motion-reduce:transition-none duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]" : isExpanded ? "transition-[height] motion-reduce:transition-none duration-150 ease-out" : ""}`,
-        style: {
-          minHeight: minHeightPx ?? (compact ? 28 : 40),
-          maxHeight: isExpanded ? void 0 : unexpandedCapPx
-        },
-        rows: 1,
-        "data-agent-main-input": true
-      }
-    )
-  ), showExpand && /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: isExpanded ? /* @__PURE__ */ React.createElement(Minimize2, null) : /* @__PURE__ */ React.createElement(Maximize2, null), onClick: () => setIsExpanded((v) => !v), title: isExpanded ? "Collapse input" : "Expand input", "aria-label": isExpanded ? "Collapse input" : "Expand input", className: "absolute top-1 right-1 hover:opacity-100" })));
+    ),
+    /* @__PURE__ */ jsx(ComposerToolsNotice, { conversationId }),
+    /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx(
+        ComposerTextMenuFrame,
+        {
+          textMenu,
+          textareaRef,
+          onReplace: replaceDraft,
+          onInsert: insertAtCursor,
+          children: /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              ref: textareaRef,
+              value: visibleText,
+              onChange: (e) => handleTextChange(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder: placeholderText,
+              className: `w-full bg-transparent border-none outline-none ${composerType ? composerRows ? "text-[15px] leading-6 px-1.5 py-1" : "text-[15px] leading-6 px-2 py-1" : "text-base leading-7"} text-foreground placeholder:text-muted-foreground/60 resize-none overflow-y-auto scrollbar-hide ${// The height transition belongs to the expand/collapse toggles
+              // ONLY. While typing there is no transition class at all: a
+              // line-count change snaps instantly, and an unchanged line count
+              // writes nothing (see the auto-resize effect).
+              isCollapsing ? "transition-[height] motion-reduce:transition-none duration-300 ease-[cubic-bezier(0.22,1,0.36,1)]" : isExpanded ? "transition-[height] motion-reduce:transition-none duration-150 ease-out" : ""}`,
+              style: {
+                minHeight: minHeightPx ?? (compact ? 28 : 40),
+                maxHeight: isExpanded ? void 0 : unexpandedCapPx
+              },
+              rows: 1,
+              "data-agent-main-input": true
+            }
+          )
+        }
+      ),
+      showExpand && /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: isExpanded ? /* @__PURE__ */ jsx(Minimize2, {}) : /* @__PURE__ */ jsx(Maximize2, {}), onClick: () => setIsExpanded((v) => !v), title: isExpanded ? "Collapse input" : "Expand input", "aria-label": isExpanded ? "Collapse input" : "Expand input", className: "absolute top-1 right-1 hover:opacity-100" })
+    ] })
+  ] });
 }
 function ComposerTextMenuFrame({
   textMenu,
@@ -322,7 +334,7 @@ function ComposerTextMenuFrame({
   children
 }) {
   if (!textMenu) return children;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     EditableContextMenu,
     {
       ...textMenu,
@@ -330,9 +342,9 @@ function ComposerTextMenuFrame({
       getApplicationScope: () => textMenu.getApplicationScope(textareaRef.current),
       onTextReplace: onReplace,
       onTextInsertBefore: (text) => onInsert(text, "before"),
-      onTextInsertAfter: (text) => onInsert(text, "after")
-    },
-    children
+      onTextInsertAfter: (text) => onInsert(text, "after"),
+      children
+    }
   );
 }
 export {

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

@@ -1,5 +1,6 @@
 "use client";
-import { Fragment, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment2, useState } from "react";
 import { AlertTriangle, Check, Paperclip, Plus, Server } from "lucide-react";
 import { BottomSheet } from "@ai-matrx/design-system";
 import { useAppSelector } from "../../../../store/hooks.js";
@@ -80,168 +81,197 @@ function ChatConnectionsStrip({
     }
     openRunControlsWindow({ conversationId, initialTab: "connections" });
   };
-  const mobilePicker = isMobile && conversationId ? /* @__PURE__ */ React.createElement(
+  const mobilePicker = isMobile && conversationId ? /* @__PURE__ */ jsx(
     BottomSheet,
     {
       open: sheetOpen,
       onOpenChange: setSheetOpen,
       title: "Connections",
       size: "full",
-      surface: "solid"
-    },
-    /* @__PURE__ */ React.createElement(ComposerConnectorsPanel, { conversationId, onNavigate: () => setSheetOpen(false) })
+      surface: "solid",
+      children: /* @__PURE__ */ jsx(ComposerConnectorsPanel, { conversationId, onNavigate: () => setSheetOpen(false) })
+    }
   ) : null;
   if (variant === "chips") {
     if (!conversationId) return null;
-    if (connections.length === 0) return /* @__PURE__ */ React.createElement(React.Fragment, null, emptyChips);
+    if (connections.length === 0) return /* @__PURE__ */ jsx(Fragment, { children: emptyChips });
     const attachmentsRead = attachments.error ? "failed" : attachments.status;
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, connections.map((connection) => {
-      const presentation = mcpChipPresentation(
-        connection.state,
-        connection.reason,
-        true,
-        connection.runAttachment
-      );
-      const isBroken = presentation.kind === "broken";
-      const chooserLabel = connection.kind === "attachable" ? attachActionLabel(connection.attachable) : null;
-      const chosen = attachments.items.filter(
-        (item) => item.provider === connection.slug
-      );
-      const openChooser = () => openAttachPicker({
-        conversationId,
-        provider: connection.slug,
-        providerName: connection.name,
-        attachable: connection.attachable
-      });
-      return /* @__PURE__ */ React.createElement(Fragment, { key: connection.slug }, /* @__PURE__ */ React.createElement(
-        ComposerChip,
-        {
-          tone: isBroken ? "warning" : "neutral",
-          onClick: openPicker,
-          "aria-label": `${connection.name} \u2014 ${presentation.reason ?? (isBroken ? "needs attention" : "connected")}. Open Connections.`,
-          title: presentation.reason ?? (presentation.toolCount != null ? `${connection.name} \u2014 ${presentation.toolCount} tools reached this run` : `${connection.name} \u2014 connected`),
-          icon: isBroken ? /* @__PURE__ */ React.createElement(AlertTriangle, { "aria-hidden": true }) : /* @__PURE__ */ React.createElement(Check, { className: "text-success", "aria-hidden": true }),
-          label: connection.name,
-          trailing: isBroken && presentation.status ? /* @__PURE__ */ React.createElement("span", null, presentation.status) : !isBroken && presentation.toolCount != null ? /* @__PURE__ */ React.createElement("span", { className: "tabular-nums text-muted-foreground" }, presentation.toolCount, " tools") : void 0,
-          parts: (
-            /* Work: the chooser rides the connection chip as a count.
-               Advanced lists what was chosen as chips of their own. */
-            chooserLabel && attachmentsRead === "succeeded" && !showResources && chosen.length > 0 ? /* @__PURE__ */ React.createElement(
-              ComposerChipPart,
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      connections.map((connection) => {
+        const presentation = mcpChipPresentation(
+          connection.state,
+          connection.reason,
+          true,
+          connection.runAttachment
+        );
+        const isBroken = presentation.kind === "broken";
+        const chooserLabel = connection.kind === "attachable" ? attachActionLabel(connection.attachable) : null;
+        const chosen = attachments.items.filter(
+          (item) => item.provider === connection.slug
+        );
+        const openChooser = () => openAttachPicker({
+          conversationId,
+          provider: connection.slug,
+          providerName: connection.name,
+          attachable: connection.attachable
+        });
+        return /* @__PURE__ */ jsxs(Fragment2, { children: [
+          /* @__PURE__ */ jsx(
+            ComposerChip,
+            {
+              tone: isBroken ? "warning" : "neutral",
+              onClick: openPicker,
+              "aria-label": `${connection.name} \u2014 ${presentation.reason ?? (isBroken ? "needs attention" : "connected")}. Open Connections.`,
+              title: presentation.reason ?? (presentation.toolCount != null ? `${connection.name} \u2014 ${presentation.toolCount} tools reached this run` : `${connection.name} \u2014 connected`),
+              icon: isBroken ? /* @__PURE__ */ jsx(AlertTriangle, { "aria-hidden": true }) : /* @__PURE__ */ jsx(Check, { className: "text-success", "aria-hidden": true }),
+              label: connection.name,
+              trailing: isBroken && presentation.status ? /* @__PURE__ */ jsx("span", { children: presentation.status }) : !isBroken && presentation.toolCount != null ? /* @__PURE__ */ jsxs("span", { className: "tabular-nums text-muted-foreground", children: [
+                presentation.toolCount,
+                " tools"
+              ] }) : void 0,
+              parts: (
+                /* Work: the chooser rides the connection chip as a count.
+                   Advanced lists what was chosen as chips of their own. */
+                chooserLabel && attachmentsRead === "succeeded" && !showResources && chosen.length > 0 ? /* @__PURE__ */ jsxs(
+                  ComposerChipPart,
+                  {
+                    lit: true,
+                    onClick: openChooser,
+                    "aria-label": `${chosen.length} attached to this chat from ${connection.name} \u2014 ${chooserLabel}`,
+                    title: `${chosen.length} attached to this chat \u2014 ${chooserLabel}`,
+                    children: [
+                      /* @__PURE__ */ jsx(Paperclip, { "aria-hidden": true }),
+                      /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: chosen.length })
+                    ]
+                  }
+                ) : void 0
+              )
+            }
+          ),
+          chooserLabel && attachmentsRead === "failed" ? /* @__PURE__ */ jsx(
+            ComposerChip,
+            {
+              tone: "warning",
+              onClick: attachments.reload,
+              title: attachments.error ?? void 0,
+              icon: /* @__PURE__ */ jsx(AlertTriangle, { "aria-hidden": true }),
+              label: "What is attached did not load \xB7 Retry"
+            }
+          ) : null,
+          chooserLabel && attachmentsRead === "succeeded" && showResources ? chosen.map((item) => {
+            const declaredBranch = item.metadata?.default_branch;
+            const branch = typeof declaredBranch === "string" ? declaredBranch : null;
+            return /* @__PURE__ */ jsx(
+              ComposerChip,
               {
-                lit: true,
                 onClick: openChooser,
-                "aria-label": `${chosen.length} attached to this chat from ${connection.name} \u2014 ${chooserLabel}`,
-                title: `${chosen.length} attached to this chat \u2014 ${chooserLabel}`
+                busy: item.pending,
+                title: item.pending ? `${item.display_name} \u2014 saving to this chat` : `${item.display_name}${branch ? ` \xB7 ${branch}` : ""} \u2014 ${chooserLabel}`,
+                icon: /* @__PURE__ */ jsx(Paperclip, { className: "text-muted-foreground", "aria-hidden": true }),
+                label: item.display_name,
+                trailing: branch ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+                  "\xB7 ",
+                  branch
+                ] }) : void 0
               },
-              /* @__PURE__ */ React.createElement(Paperclip, { "aria-hidden": true }),
-              /* @__PURE__ */ React.createElement("span", { className: "tabular-nums" }, chosen.length)
-            ) : void 0
-          )
-        }
-      ), chooserLabel && attachmentsRead === "failed" ? /* @__PURE__ */ React.createElement(
-        ComposerChip,
-        {
-          tone: "warning",
-          onClick: attachments.reload,
-          title: attachments.error ?? void 0,
-          icon: /* @__PURE__ */ React.createElement(AlertTriangle, { "aria-hidden": true }),
-          label: "What is attached did not load \xB7 Retry"
-        }
-      ) : null, chooserLabel && attachmentsRead === "succeeded" && showResources ? chosen.map((item) => {
-        const declaredBranch = item.metadata?.default_branch;
-        const branch = typeof declaredBranch === "string" ? declaredBranch : null;
-        return /* @__PURE__ */ React.createElement(
-          ComposerChip,
-          {
-            key: `${item.provider}:${item.resource_ref}`,
-            onClick: openChooser,
-            busy: item.pending,
-            title: item.pending ? `${item.display_name} \u2014 saving to this chat` : `${item.display_name}${branch ? ` \xB7 ${branch}` : ""} \u2014 ${chooserLabel}`,
-            icon: /* @__PURE__ */ React.createElement(Paperclip, { className: "text-muted-foreground", "aria-hidden": true }),
-            label: item.display_name,
-            trailing: branch ? /* @__PURE__ */ React.createElement("span", { className: "text-muted-foreground" }, "\xB7 ", branch) : void 0
-          }
-        );
-      }) : null, chooserLabel && attachmentsRead === "succeeded" && showResources && chosen.length === 0 ? /* @__PURE__ */ React.createElement(
-        ComposerChip,
-        {
-          tone: "quiet",
-          onClick: openChooser,
-          icon: /* @__PURE__ */ React.createElement(Plus, { "aria-hidden": true }),
-          label: chooserLabel
-        }
-      ) : null);
-    }), mobilePicker);
+              `${item.provider}:${item.resource_ref}`
+            );
+          }) : null,
+          chooserLabel && attachmentsRead === "succeeded" && showResources && chosen.length === 0 ? /* @__PURE__ */ jsx(
+            ComposerChip,
+            {
+              tone: "quiet",
+              onClick: openChooser,
+              icon: /* @__PURE__ */ jsx(Plus, { "aria-hidden": true }),
+              label: chooserLabel
+            }
+          ) : null
+        ] }, connection.slug);
+      }),
+      mobilePicker
+    ] });
   }
   if (connections.length === 0) {
     if (!conversationId || hideWhenEmpty) return null;
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex h-6 w-full items-center gap-1.5 overflow-x-auto scrollbar-hide",
+            className
+          ),
+          children: /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Server, {}), onClick: openPicker, title: "Nothing is connected to this chat \u2014 open Connections to add a service", "aria-label": "Nothing is connected to this chat. Open Connections to add a service.", className: "shrink-0", children: "Connections: none" })
+        }
+      ),
+      mobilePicker
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
       "div",
       {
         className: cn(
           "flex h-6 w-full items-center gap-1.5 overflow-x-auto scrollbar-hide",
           className
-        )
-      },
-      /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(Server, null), onClick: openPicker, title: "Nothing is connected to this chat \u2014 open Connections to add a service", "aria-label": "Nothing is connected to this chat. Open Connections to add a service.", className: "shrink-0" }, "Connections: none")
-    ), mobilePicker);
-  }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-    "div",
-    {
-      className: cn(
-        "flex h-6 w-full items-center gap-1.5 overflow-x-auto scrollbar-hide",
-        className
-      )
-    },
-    /* @__PURE__ */ React.createElement(Button, { variant: "quiet", icon: /* @__PURE__ */ React.createElement(Server, null), glyphTone: "primary", onClick: openPicker, title: "Connections for this chat \u2014 open Connections", "aria-label": `Connections for this chat: ${connections.length} service${connections.length === 1 ? "" : "s"}${broken > 0 ? `, ${broken} need attention` : ""}. Open Connections.`, className: "shrink-0" }, "Connections"),
-    connections.map((connection) => {
-      const presentation = mcpChipPresentation(
-        connection.state,
-        connection.reason,
-        true,
-        connection.runAttachment
-      );
-      const isBroken = presentation.kind === "broken";
-      const chooserLabel = connection.kind === "attachable" ? attachActionLabel(connection.attachable) : null;
-      const attachedCount = attachments.items.filter(
-        (item) => item.provider === connection.slug
-      ).length;
-      return /* @__PURE__ */ React.createElement(
-        ComposerChip,
-        {
-          key: connection.slug,
-          tone: isBroken ? "warning" : "neutral",
-          onClick: openPicker,
-          "aria-label": `${connection.name} \u2014 ${presentation.reason ?? (isBroken ? "needs attention" : "connected")}. Open Connections.`,
-          title: presentation.reason ?? (presentation.toolCount != null ? `${connection.name} \u2014 ${presentation.toolCount} tools reached this run` : `${connection.name} \u2014 connected`),
-          icon: isBroken ? /* @__PURE__ */ React.createElement(AlertTriangle, { "aria-hidden": true }) : /* @__PURE__ */ React.createElement(Check, { className: "text-success/80", "aria-hidden": true }),
-          label: connection.name,
-          trailing: isBroken && presentation.status ? /* @__PURE__ */ React.createElement("span", { className: "font-normal" }, presentation.status) : !isBroken && presentation.toolCount != null ? (
-            /* A count only when the run actually reported one. */
-            /* @__PURE__ */ React.createElement("span", { className: "font-normal tabular-nums text-muted-foreground" }, presentation.toolCount, " tools")
-          ) : void 0,
-          parts: chooserLabel && conversationId ? /* @__PURE__ */ React.createElement(
-            ComposerChipPart,
-            {
-              lit: attachedCount > 0,
-              onClick: () => openAttachPicker({
-                conversationId,
-                provider: connection.slug,
-                providerName: connection.name,
-                attachable: connection.attachable
-              }),
-              "aria-label": `${chooserLabel} from ${connection.name}${attachedCount > 0 ? ` \u2014 ${attachedCount} attached to this chat` : ""}`,
-              title: attachments.error ? `What is attached did not load (${attachments.error}) \u2014 ${chooserLabel}` : attachedCount > 0 ? `${attachedCount} attached to this chat \u2014 ${chooserLabel}` : chooserLabel
-            },
-            /* @__PURE__ */ React.createElement(Paperclip, { "aria-hidden": true }),
-            attachments.status === "succeeded" && attachedCount > 0 ? /* @__PURE__ */ React.createElement("span", { className: "tabular-nums" }, attachedCount) : /* @__PURE__ */ React.createElement("span", { className: "font-normal" }, chooserLabel)
-          ) : void 0
-        }
-      );
-    })
-  ), mobilePicker);
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: /* @__PURE__ */ jsx(Server, {}), glyphTone: "primary", onClick: openPicker, title: "Connections for this chat \u2014 open Connections", "aria-label": `Connections for this chat: ${connections.length} service${connections.length === 1 ? "" : "s"}${broken > 0 ? `, ${broken} need attention` : ""}. Open Connections.`, className: "shrink-0", children: "Connections" }),
+          connections.map((connection) => {
+            const presentation = mcpChipPresentation(
+              connection.state,
+              connection.reason,
+              true,
+              connection.runAttachment
+            );
+            const isBroken = presentation.kind === "broken";
+            const chooserLabel = connection.kind === "attachable" ? attachActionLabel(connection.attachable) : null;
+            const attachedCount = attachments.items.filter(
+              (item) => item.provider === connection.slug
+            ).length;
+            return /* @__PURE__ */ jsx(
+              ComposerChip,
+              {
+                tone: isBroken ? "warning" : "neutral",
+                onClick: openPicker,
+                "aria-label": `${connection.name} \u2014 ${presentation.reason ?? (isBroken ? "needs attention" : "connected")}. Open Connections.`,
+                title: presentation.reason ?? (presentation.toolCount != null ? `${connection.name} \u2014 ${presentation.toolCount} tools reached this run` : `${connection.name} \u2014 connected`),
+                icon: isBroken ? /* @__PURE__ */ jsx(AlertTriangle, { "aria-hidden": true }) : /* @__PURE__ */ jsx(Check, { className: "text-success/80", "aria-hidden": true }),
+                label: connection.name,
+                trailing: isBroken && presentation.status ? /* @__PURE__ */ jsx("span", { className: "font-normal", children: presentation.status }) : !isBroken && presentation.toolCount != null ? (
+                  /* A count only when the run actually reported one. */
+                  /* @__PURE__ */ jsxs("span", { className: "font-normal tabular-nums text-muted-foreground", children: [
+                    presentation.toolCount,
+                    " tools"
+                  ] })
+                ) : void 0,
+                parts: chooserLabel && conversationId ? /* @__PURE__ */ jsxs(
+                  ComposerChipPart,
+                  {
+                    lit: attachedCount > 0,
+                    onClick: () => openAttachPicker({
+                      conversationId,
+                      provider: connection.slug,
+                      providerName: connection.name,
+                      attachable: connection.attachable
+                    }),
+                    "aria-label": `${chooserLabel} from ${connection.name}${attachedCount > 0 ? ` \u2014 ${attachedCount} attached to this chat` : ""}`,
+                    title: attachments.error ? `What is attached did not load (${attachments.error}) \u2014 ${chooserLabel}` : attachedCount > 0 ? `${attachedCount} attached to this chat \u2014 ${chooserLabel}` : chooserLabel,
+                    children: [
+                      /* @__PURE__ */ jsx(Paperclip, { "aria-hidden": true }),
+                      attachments.status === "succeeded" && attachedCount > 0 ? /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: attachedCount }) : /* @__PURE__ */ jsx("span", { className: "font-normal", children: chooserLabel })
+                    ]
+                  }
+                ) : void 0
+              },
+              connection.slug
+            );
+          })
+        ]
+      }
+    ),
+    mobilePicker
+  ] });
 }
 export {
   ChatConnectionsStrip

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

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { Loader2, X } from "lucide-react";
 import { cn } from "@ai-matrx/design-system";
 import { Button } from "@ai-matrx/design-system/controls";
@@ -53,7 +54,7 @@ function chipFace({
   );
 }
 function ChipLabel({ children }) {
-  return /* @__PURE__ */ React.createElement("span", { className: "max-w-[12rem] truncate" }, children);
+  return /* @__PURE__ */ jsx("span", { className: "max-w-[12rem] truncate", children });
 }
 function ComposerChip({
   ref,
@@ -79,7 +80,7 @@ function ComposerChip({
   const split = parts != null;
   const tone = toneProp ?? (onStage ? "quiet" : "neutral");
   const resolvedTitle = title ?? (onStage ? "Puts the request in the message box \u2014 you can edit it before sending." : void 0);
-  const glyph = busy ? /* @__PURE__ */ React.createElement(
+  const glyph = busy ? /* @__PURE__ */ jsx(
     Loader2,
     {
       className: "animate-spin",
@@ -98,7 +99,7 @@ function ComposerChip({
       focusAgentComposer();
     }
   };
-  const main = /* @__PURE__ */ React.createElement(
+  const main = /* @__PURE__ */ jsxs(
     "button",
     {
       ref,
@@ -116,13 +117,15 @@ function ComposerChip({
         !split && !remove && wrapperClassName,
         className
       ),
-      ...buttonProps
-    },
-    glyph,
-    /* @__PURE__ */ React.createElement(ChipLabel, null, label),
-    trailing != null ? /* @__PURE__ */ React.createElement("span", { className: "inline-flex shrink-0 items-center gap-1" }, trailing) : null
+      ...buttonProps,
+      children: [
+        glyph,
+        /* @__PURE__ */ jsx(ChipLabel, { children: label }),
+        trailing != null ? /* @__PURE__ */ jsx("span", { className: "inline-flex shrink-0 items-center gap-1", children: trailing }) : null
+      ]
+    }
   );
-  const body = split ? /* @__PURE__ */ React.createElement(
+  const body = split ? /* @__PURE__ */ jsxs(
     "span",
     {
       "data-composer-chip": "",
@@ -130,17 +133,22 @@ function ComposerChip({
         chipFace({ tone, pressed, open, error }),
         "items-stretch",
         !remove && wrapperClassName
-      )
-    },
-    main,
-    parts
+      ),
+      children: [
+        main,
+        parts
+      ]
+    }
   ) : main;
   if (!remove) return body;
-  return /* @__PURE__ */ React.createElement("span", { className: cn("group relative inline-flex shrink-0", wrapperClassName) }, body, /* @__PURE__ */ React.createElement(Button, { variant: "outline", icon: /* @__PURE__ */ React.createElement(X, null), onClick: (event) => {
-    event.preventDefault();
-    event.stopPropagation();
-    if (!remove.disabled) remove.onRemove();
-  }, disabled: remove.disabled, "aria-label": remove.label, className: "absolute z-10 opacity-0 focus-visible:opacity-100 group-hover:opacity-100" }));
+  return /* @__PURE__ */ jsxs("span", { className: cn("group relative inline-flex shrink-0", wrapperClassName), children: [
+    body,
+    /* @__PURE__ */ jsx(Button, { variant: "outline", icon: /* @__PURE__ */ jsx(X, {}), onClick: (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!remove.disabled) remove.onRemove();
+    }, disabled: remove.disabled, "aria-label": remove.label, className: "absolute z-10 opacity-0 focus-visible:opacity-100 group-hover:opacity-100" })
+  ] });
 }
 function ComposerChipPart({
   ref,
@@ -150,7 +158,7 @@ function ComposerChipPart({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     "button",
     {
       ref,
@@ -163,9 +171,9 @@ function ComposerChipPart({
         lit ? "bg-primary/10 text-primary-ink hover:bg-primary/20" : PART_HOVER[tone],
         className
       ),
-      ...props
-    },
-    children
+      ...props,
+      children
+    }
   );
 }
 export {