@invergent/agent-chat-react 2.5.5 → 2.5.7

package/dist/index.cjs

@@ -914,6 +914,64 @@ var ConversationScrollButton = ({
 
 // src/components/ai-elements/message.tsx
 init_utils();
+
+// src/lib/oauth-popup.ts
+function openOAuthPopup(url) {
+  const w = 600;
+  const h = 720;
+  const dualLeft = window.screenLeft ?? window.screenX ?? 0;
+  const dualTop = window.screenTop ?? window.screenY ?? 0;
+  const width = window.innerWidth || document.documentElement.clientWidth || w;
+  const height = window.innerHeight || document.documentElement.clientHeight || h;
+  const left = dualLeft + Math.max(0, (width - w) / 2);
+  const top = dualTop + Math.max(0, (height - h) / 2);
+  const features = `popup=yes,width=${w},height=${h},left=${left},top=${top}`;
+  const popup = window.open(url, "composio-oauth", features);
+  if (!popup) {
+    window.open(url, "_blank", "noopener,noreferrer");
+  }
+  return popup;
+}
+function isComposioConnectUrl(url) {
+  if (!url) return false;
+  try {
+    return new URL(url).hostname === "connect.composio.dev";
+  } catch {
+    return false;
+  }
+}
+function toolkitName(label) {
+  const text = (label ?? "").trim();
+  const stripped = text.replace(/^connect\s+/i, "").trim();
+  return stripped || "your account";
+}
+function ComposioConnectCard({ url, label }) {
+  const name = toolkitName(label);
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "my-1 inline-flex w-full max-w-sm items-center gap-3 rounded-lg border border-border bg-card p-3 align-middle no-underline", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.PlugZapIcon, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-sm font-medium text-foreground", children: [
+        "Connect ",
+        name
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+        "Authorize your ",
+        name,
+        " account to continue."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        type: "button",
+        size: "xs",
+        onClick: () => openOAuthPopup(url),
+        className: "ml-auto shrink-0",
+        children: "Connect"
+      }
+    )
+  ] });
+}
 var Message = ({ className, from, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
@@ -946,6 +1004,21 @@ react.createContext(
   null
 );
 var streamdownPlugins = { cjk: cjk.cjk, code: code.code, math: math.math, mermaid: mermaid.mermaid };
+function anchorText(children) {
+  if (typeof children === "string") return children;
+  if (Array.isArray(children)) {
+    return children.filter((c) => typeof c === "string").join("");
+  }
+  return "";
+}
+var streamdownComponents = {
+  a: ({ href, children, ...props }) => {
+    if (isComposioConnectUrl(href)) {
+      return /* @__PURE__ */ jsxRuntime.jsx(ComposioConnectCard, { url: href, label: anchorText(children) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href, target: "_blank", rel: "noreferrer", ...props, children });
+  }
+};
 var MessageResponse = react.memo(
   ({ className, ...props }) => /* @__PURE__ */ jsxRuntime.jsx(
     streamdown.Streamdown,
@@ -955,6 +1028,7 @@ var MessageResponse = react.memo(
         className
       ),
       plugins: streamdownPlugins,
+      components: streamdownComponents,
       ...props
     }
   ),
@@ -2368,6 +2442,51 @@ function ExecuteCodeToolBlock({ tc }) {
     ] }) })
   ] });
 }
+
+// src/lib/format.ts
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function formatMcpToolLabel(toolName) {
+  const segments = toolName.replace(/^mcp__/, "").split("__");
+  const tool = segments[segments.length - 1] ?? toolName;
+  const branded = tool.replace(/^composio_/i, "");
+  return (branded || tool).split("_").filter(Boolean).map((p) => p.charAt(0).toUpperCase() + p.slice(1).toLowerCase()).join(" ");
+}
+function getLanguageHint(path) {
+  const name = path.split("/").pop() ?? path;
+  const dot = name.lastIndexOf(".");
+  if (dot < 0) return "plaintext";
+  const ext = name.slice(dot).toLowerCase();
+  const map = {
+    ".py": "python",
+    ".js": "javascript",
+    ".ts": "typescript",
+    ".tsx": "tsx",
+    ".jsx": "jsx",
+    ".json": "json",
+    ".yaml": "yaml",
+    ".yml": "yaml",
+    ".toml": "toml",
+    ".sql": "sql",
+    ".sh": "bash",
+    ".css": "css",
+    ".html": "html",
+    ".md": "markdown",
+    ".rs": "rust",
+    ".go": "go",
+    ".java": "java",
+    ".rb": "ruby",
+    ".php": "php",
+    ".c": "c",
+    ".cpp": "cpp",
+    ".h": "c",
+    ".hpp": "cpp"
+  };
+  return map[ext] ?? "plaintext";
+}
 function SessionSearchBlock({ tc }) {
   let query = "";
   try {
@@ -2406,9 +2525,7 @@ function WebToolBlock({ tc }) {
   ] });
 }
 function MCPToolBlock({ tc }) {
-  const segments = tc.toolName.replace(/^mcp__/, "").split("__");
-  const toolName = segments[segments.length - 1] ?? tc.toolName;
-  const label = toolName.split("_").map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join(" ");
+  const label = formatMcpToolLabel(tc.toolName);
   let summary = "";
   try {
     const args = JSON.parse(tc.args);
@@ -6129,7 +6246,7 @@ function ChatComposerInner({
   }, [buttonMenuOpen, textInput.value]);
   react.useEffect(() => {
     if (showSlashMenu && (menuMode === "skills" || menuMode === "all")) {
-      adapter.listSlashCommands?.().then(setAdapterCommands).catch(() => {
+      adapter.listSlashCommands?.().then((commands) => setAdapterCommands(commands.filter((c) => !c.isBuiltin))).catch(() => {
       });
     }
   }, [adapter, showSlashMenu, menuMode]);
@@ -6305,7 +6422,7 @@ function ChatComposerInner({
               type: "button",
               variant: "secondary",
               size: "sm",
-              className: "rounded-sm -uppercase font-display bg-white dark:bg-accent border-2 border-accent",
+              className: "rounded-sm -uppercase font-display bg-white dark:bg-accent border-2 border-accent cursor-pointer",
               onClick: () => {
                 setMenuMode("commands");
                 setMenuDismissed(false);
@@ -6323,7 +6440,7 @@ function ChatComposerInner({
               type: "button",
               variant: "secondary",
               size: "sm",
-              className: "rounded-sm -uppercase font-display bg-white dark:bg-accent border-2 border-accent",
+              className: "rounded-sm -uppercase font-display bg-white dark:bg-accent border-2 border-accent cursor-pointer",
               onClick: () => {
                 setMenuMode("skills");
                 setMenuDismissed(false);
@@ -6341,7 +6458,7 @@ function ChatComposerInner({
               type: "button",
               variant: "secondary",
               size: "sm",
-              className: "rounded-sm -uppercase font-display bg-white dark:bg-accent border-2 border-accent",
+              className: "rounded-sm -uppercase font-display bg-white dark:bg-accent border-2 border-accent cursor-pointer",
               onClick: () => {
                 setMenuMode("scheduled");
                 setMenuDismissed(false);
@@ -6670,6 +6787,74 @@ function ChatComposerInner({
     }
   );
 }
+var MAX_LOGOS = 10;
+function IntegrationsBand({
+  agentId,
+  adapter,
+  onOpenIntegrations
+}) {
+  const supported = typeof adapter.listComposioConnections === "function" && typeof adapter.authorizeComposioToolkit === "function";
+  const [rows, setRows] = react.useState(null);
+  const refresh = react.useCallback(async () => {
+    if (!adapter.listComposioConnections) return;
+    const res = await adapter.listComposioConnections({ agentId });
+    setRows(res.toolkits);
+  }, [adapter, agentId]);
+  react.useEffect(() => {
+    if (!supported) return;
+    void refresh();
+    const onFocus = () => void refresh();
+    window.addEventListener("focus", onFocus);
+    return () => window.removeEventListener("focus", onFocus);
+  }, [supported, refresh]);
+  if (!supported || rows === null || rows.length === 0) return null;
+  const shown = rows.slice(0, MAX_LOGOS);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onOpenIntegrations,
+      className: "flex w-full items-center gap-2 border border-border border-t-0 rounded-b-lg px-4 py-2.5 text-xs text-muted-foreground transition-colors hover:bg-accent/40 cursor-pointer",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Connect your accounts" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "ml-auto flex items-center gap-1.5", children: [
+          shown.map((r) => /* @__PURE__ */ jsxRuntime.jsx(Logo, { row: r }, r.toolkit)),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lucideReact.ChevronRightIcon,
+            {
+              "aria-hidden": true,
+              className: "h-3.5 w-3.5 text-muted-foreground/60"
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+function Logo({ row }) {
+  const [broken, setBroken] = react.useState(false);
+  const label = row.name ?? row.toolkit;
+  if (broken || !row.logo) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        title: label,
+        className: "inline-flex h-4 w-4 items-center justify-center rounded-full bg-muted text-[8px] font-semibold uppercase",
+        children: label.charAt(0)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: row.logo,
+      alt: label,
+      title: label,
+      className: "h-4 w-4 rounded-sm object-contain",
+      onError: () => setBroken(true)
+    }
+  );
+}
 
 // src/components/research/research-sources-panel.tsx
 init_utils();
@@ -7614,45 +7799,6 @@ var ErrorMessage = react.memo(function ErrorMessage2({
 });
 init_utils();
 
-// src/lib/format.ts
-function formatFileSize(bytes) {
-  if (bytes < 1024) return `${bytes} B`;
-  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
-}
-function getLanguageHint(path) {
-  const name = path.split("/").pop() ?? path;
-  const dot = name.lastIndexOf(".");
-  if (dot < 0) return "plaintext";
-  const ext = name.slice(dot).toLowerCase();
-  const map = {
-    ".py": "python",
-    ".js": "javascript",
-    ".ts": "typescript",
-    ".tsx": "tsx",
-    ".jsx": "jsx",
-    ".json": "json",
-    ".yaml": "yaml",
-    ".yml": "yaml",
-    ".toml": "toml",
-    ".sql": "sql",
-    ".sh": "bash",
-    ".css": "css",
-    ".html": "html",
-    ".md": "markdown",
-    ".rs": "rust",
-    ".go": "go",
-    ".java": "java",
-    ".rb": "ruby",
-    ".php": "php",
-    ".c": "c",
-    ".cpp": "cpp",
-    ".h": "c",
-    ".hpp": "cpp"
-  };
-  return map[ext] ?? "plaintext";
-}
-
 // src/components/ui/skeleton.tsx
 init_utils();
 function Skeleton({ className, ...props }) {
@@ -8682,7 +8828,9 @@ function cancelledToolLabel(toolName) {
     research_memory: "Research",
     research_outline: "Research"
   };
-  return map[toolName] ?? toolName;
+  if (map[toolName]) return map[toolName];
+  if (toolName.startsWith("mcp__")) return formatMcpToolLabel(toolName);
+  return toolName;
 }
 function CancelledToolRow({ tc }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 text-sm", children: [
@@ -9545,7 +9693,9 @@ function ChatThread({
   onViewModeChange,
   deepResearchEnabled = false,
   researchSources = [],
-  hideTurnSummary = false
+  hideTurnSummary = false,
+  agentId,
+  onOpenIntegrations
 }) {
   const groups = react.useMemo(() => groupMessages(messages), [messages]);
   const awaitingInput = react.useMemo(() => isAwaitingUserInput(messages), [messages]);
@@ -9585,6 +9735,44 @@ function ChatThread({
     }
     return null;
   }, [messages]);
+  const composerArea = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto w-full max-w-4xl px-3 sm:px-6 pb-3 sm:pb-5 pt-3", children: [
+    retryIndicator && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(RetryBanner, { indicator: retryIndicator }) }),
+    researchSources.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ResearchSourcesPanel, { sources: researchSources }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ChatComposer,
+      {
+        onSend,
+        onStop,
+        isRunning,
+        disabled: composerDisabled,
+        disabledReason: composerDisabledReason,
+        tokenUsage,
+        onComposerError,
+        showBrowser,
+        onToggleBrowser,
+        showWorkspace,
+        onToggleWorkspace,
+        canShowBrowser,
+        canShowWorkspace,
+        viewMode,
+        onViewModeChange,
+        deepResearchEnabled
+      }
+    ),
+    onOpenIntegrations && /* @__PURE__ */ jsxRuntime.jsx(
+      IntegrationsBandSlot,
+      {
+        agentId,
+        onOpenIntegrations
+      }
+    )
+  ] });
+  if (messages.length === 0 && !isLoadingHistory && !disabled) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-1 flex-col items-center justify-center overflow-hidden bg-background px-3 text-base", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "mb-8 text-center text-2xl font-bold text-foreground", children: "What should we do ?" }),
+      composerArea
+    ] }) });
+  }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 flex-col overflow-hidden bg-background text-base", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Conversation, { className: "relative flex-1 min-h-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx(ConversationContent, { className: "mx-auto w-full max-w-4xl", children: messages.length === 0 && isLoadingHistory ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -9594,13 +9782,6 @@ function ChatThread({
           title: "Loading conversation",
           description: "Fetching the session history."
         }
-      ) : messages.length === 0 && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(
-        ConversationEmptyState,
-        {
-          icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.MessageSquareIcon, { className: "size-8 opacity-40" }),
-          title: "Start a conversation",
-          description: "Ask me anything \u2014 I can search, analyze, write code, and more."
-        }
       ) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         groups.map((group) => {
           if (group.role === "user") {
@@ -9653,33 +9834,23 @@ function ChatThread({
       ] }) }),
       /* @__PURE__ */ jsxRuntime.jsx(ConversationScrollButton, {})
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto w-full max-w-4xl px-3 sm:px-6 pb-3 sm:pb-5 pt-3", children: [
-      retryIndicator && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(RetryBanner, { indicator: retryIndicator }) }),
-      researchSources.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsxRuntime.jsx(ResearchSourcesPanel, { sources: researchSources }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ChatComposer,
-        {
-          onSend,
-          onStop,
-          isRunning,
-          disabled: composerDisabled,
-          disabledReason: composerDisabledReason,
-          tokenUsage,
-          onComposerError,
-          showBrowser,
-          onToggleBrowser,
-          showWorkspace,
-          onToggleWorkspace,
-          canShowBrowser,
-          canShowWorkspace,
-          viewMode,
-          onViewModeChange,
-          deepResearchEnabled
-        }
-      )
-    ] })
+    composerArea
   ] });
 }
+function IntegrationsBandSlot({
+  agentId,
+  onOpenIntegrations
+}) {
+  const { adapter } = useAgentChatAdapterContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    IntegrationsBand,
+    {
+      agentId,
+      adapter,
+      onOpenIntegrations
+    }
+  );
+}
 
 // src/components/ai-elements/file-tree.tsx
 init_utils();
@@ -11815,7 +11986,8 @@ function AgentChat({
   onMessagesChange,
   disabled,
   onComposerError,
-  deepResearchEnabled = false
+  deepResearchEnabled = false,
+  onOpenIntegrations
 }) {
   const [workspacePath, setWorkspacePath] = react.useState(null);
   const [mobileView, setMobileView] = react.useState("chat");
@@ -11965,7 +12137,9 @@ function AgentChat({
                     onViewModeChange: runtime.setViewMode,
                     deepResearchEnabled,
                     researchSources: runtime.researchSources,
-                    hideTurnSummary
+                    hideTurnSummary,
+                    agentId,
+                    onOpenIntegrations
                   }
                 )
               }
@@ -12056,6 +12230,198 @@ function delegateTaskTargets(rawArgs) {
   }
   return out;
 }
+var POLL_INTERVAL_MS = 2e3;
+var POLL_TIMEOUT_MS = 18e4;
+var sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+function titleCase(slug) {
+  return slug.split(/[_-]/).filter(Boolean).map((p) => p.charAt(0).toUpperCase() + p.slice(1)).join(" ");
+}
+function IntegrationsPage({ agentId, adapter, onBack }) {
+  const [rows, setRows] = react.useState([]);
+  const [query, setQuery] = react.useState("");
+  const [busy, setBusy] = react.useState(null);
+  const [error, setError] = react.useState(null);
+  const mountedRef = react.useRef(true);
+  react.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const refresh = react.useCallback(async () => {
+    if (!adapter.listComposioConnections) return;
+    const res = await adapter.listComposioConnections({ agentId });
+    setRows(res.toolkits);
+  }, [adapter, agentId]);
+  react.useEffect(() => {
+    void refresh();
+    const onFocus = () => void refresh();
+    window.addEventListener("focus", onFocus);
+    return () => window.removeEventListener("focus", onFocus);
+  }, [refresh]);
+  const grouped = react.useMemo(() => {
+    const q = query.trim().toLowerCase();
+    const filtered = rows.filter(
+      (r) => (r.name ?? titleCase(r.toolkit)).toLowerCase().includes(q)
+    );
+    const byCat = /* @__PURE__ */ new Map();
+    for (const r of filtered) {
+      const cat = r.category || "Other";
+      const list = byCat.get(cat) ?? [];
+      list.push(r);
+      byCat.set(cat, list);
+    }
+    return Array.from(byCat.entries());
+  }, [rows, query]);
+  const waitForConnection = async (toolkit, popup) => {
+    if (!adapter.listComposioConnections) return;
+    const deadline = Date.now() + POLL_TIMEOUT_MS;
+    while (Date.now() < deadline) {
+      await sleep(POLL_INTERVAL_MS);
+      if (!mountedRef.current) return;
+      let toolkits = null;
+      try {
+        const res = await adapter.listComposioConnections({ agentId });
+        toolkits = res.toolkits;
+        if (!mountedRef.current) return;
+        setRows(res.toolkits);
+      } catch {
+      }
+      const connected = toolkits?.find((t) => t.toolkit === toolkit)?.connected;
+      if (connected) {
+        popup?.close();
+        return;
+      }
+      if (popup?.closed) return;
+    }
+  };
+  const connect = async (toolkit) => {
+    if (!adapter.authorizeComposioToolkit) return;
+    setBusy(toolkit);
+    setError(null);
+    try {
+      const { redirectUrl } = await adapter.authorizeComposioToolkit({
+        agentId,
+        toolkit
+      });
+      const popup = redirectUrl ? openOAuthPopup(redirectUrl) : null;
+      await waitForConnection(toolkit, popup);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to start the connection");
+    } finally {
+      setBusy(null);
+    }
+  };
+  const disconnect = async (toolkit) => {
+    if (!adapter.disconnectComposioToolkit) return;
+    setBusy(toolkit);
+    setError(null);
+    try {
+      await adapter.disconnectComposioToolkit({ agentId, toolkit });
+      await refresh();
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to disconnect");
+    } finally {
+      setBusy(null);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-6 p-6", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onBack,
+        className: "flex w-fit items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowLeftIcon, { className: "h-4 w-4" }),
+          "Back"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-2xl font-bold text-foreground", children: "Integrations" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Connect third-party services to enhance your agent's capabilities" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "search",
+        value: query,
+        onChange: (e) => setQuery(e.target.value),
+        placeholder: "Search integrations...",
+        className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm"
+      }
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { role: "alert", className: "text-xs text-red-500", children: error }),
+    grouped.map(([category, items]) => /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-base font-semibold uppercase tracking-wide text-muted-foreground/70", children: category }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: items.map((r) => /* @__PURE__ */ jsxRuntime.jsx(
+        ToolkitRow,
+        {
+          row: r,
+          busy: busy === r.toolkit,
+          onConnect: () => connect(r.toolkit),
+          onDisconnect: () => disconnect(r.toolkit)
+        },
+        r.toolkit
+      )) })
+    ] }, category))
+  ] });
+}
+function ToolkitRow({
+  row,
+  busy,
+  onConnect,
+  onDisconnect
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [broken, setBroken] = react.useState(false);
+  const name = row.name ?? titleCase(row.toolkit);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border border-border p-3", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "button",
+        {
+          type: "button",
+          "aria-label": open ? "Collapse" : "Expand",
+          "aria-expanded": open,
+          onClick: () => setOpen((v) => !v),
+          className: "flex min-w-0 flex-1 items-center gap-2 text-left",
+          children: [
+            open ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground/60" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground/60" }),
+            broken || !row.logo ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex h-5 w-5 items-center justify-center rounded bg-muted text-sm font-semibold uppercase", children: name.charAt(0) }) : /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: row.logo,
+                alt: name,
+                className: "h-5 w-5 rounded object-contain",
+                onError: () => setBroken(true)
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate font-medium text-foreground", children: name })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          disabled: busy,
+          onClick: row.connected ? onDisconnect : onConnect,
+          className: `ml-auto inline-flex min-w-[6rem] items-center justify-center gap-1.5 rounded-md border border-border px-2 py-1 text-xs hover:bg-accent disabled:opacity-60 ${row.connected ? "text-muted-foreground" : "text-foreground"}`,
+          children: busy ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Loader2Icon, { className: "h-3.5 w-3.5 animate-spin" }),
+            row.connected ? "Disconnecting" : "Connecting"
+          ] }) : row.connected ? "Disconnect" : "Connect"
+        }
+      )
+    ] }),
+    open && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-2 pl-7 text-sm text-muted-foreground", children: [
+      row.description && /* @__PURE__ */ jsxRuntime.jsx("p", { children: row.description }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-1 inline-block rounded bg-primary/10 px-1.5 py-0.5 text-sm font-semibold text-primary", children: row.auth_mode === "api_key" ? "API Key" : "OAuth" })
+    ] })
+  ] });
+}
 init_utils();
 var DEFAULT_LIMIT = 50;
 function requireInboxAdapter(adapter) {
@@ -14531,7 +14897,10 @@ exports.ACTIVE_MISSION_STATUSES = ACTIVE_MISSION_STATUSES;
 exports.AgentChat = AgentChat;
 exports.AgentChatAdapterProvider = AgentChatAdapterProvider;
 exports.CitationText = CitationText;
+exports.ComposioConnectCard = ComposioConnectCard;
 exports.InboxPanel = InboxPanel;
+exports.IntegrationsBand = IntegrationsBand;
+exports.IntegrationsPage = IntegrationsPage;
 exports.MessageResponse = MessageResponse;
 exports.MissionDashboard = MissionDashboard;
 exports.MissionsPanel = MissionsPanel;