@invergent/agent-chat-react 2.5.4 → 2.5.6

package/dist/index.js

@@ -1,6 +1,6 @@
 import { cn } from './chunk-QSC4UIVT.js';
-import { createContext, memo, useRef, useEffect, useCallback, useMemo, useState, useLayoutEffect, lazy, useContext, Fragment as Fragment$1, Suspense, Children } from 'react';
-import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, File as File$1, FileImage, FileAudio, FileVideo, FileText, FileCode, FileArchive, FileSpreadsheet, ChevronRightIcon, InboxIcon, Loader2, AlertCircle, Pause, Play, Ban, TargetIcon, CalendarClockIcon, UsersIcon, MessageSquareIcon, ZapIcon, Maximize2Icon, FolderOpenIcon, Loader2Icon, UploadIcon, RefreshCwIcon, AlertCircleIcon, ExternalLinkIcon, ClipboardCheckIcon, ShieldAlertIcon, TimerIcon, CircleDotIcon, XIcon, Trash2Icon, SquareIcon, ArrowDownIcon, RotateCcwIcon, MousePointer2Icon, DownloadIcon, TrashIcon, ImageIcon, FileTextIcon, CheckIcon, CopyIcon, TerminalIcon, SparklesIcon, ClockIcon, PlusIcon, CloudIcon, HardDriveIcon, PaperclipIcon, GlobeIcon, FolderIcon, FileIcon, ChevronLeftIcon, MinusIcon, SearchIcon, CircleCheckIcon, ThumbsUpIcon, ThumbsDownIcon, BookOpenIcon, GitBranchIcon, ActivityIcon, EyeIcon, ListTodoIcon, ArrowUpIcon, ListIcon, PenLineIcon, ArrowRight, FileEditIcon, WrenchIcon, FileCodeIcon, CodeIcon, FileArchiveIcon, FileVideoIcon, FileAudioIcon, FileImageIcon, FileChartLineIcon, FileSpreadsheetIcon, XCircleIcon, CheckCircle2Icon, Code, CircleXIcon, SkullIcon, CheckCircleIcon, CircleIcon } from 'lucide-react';
+import { createContext, memo, useRef, useEffect, useCallback, useMemo, useState, useLayoutEffect, lazy, useContext, Fragment as Fragment$1, Children, Suspense } from 'react';
+import { ChevronDownIcon, AlertTriangle, ChevronDown, ChevronRight, RefreshCw, File as File$1, FileImage, FileAudio, FileVideo, FileText, FileCode, FileArchive, FileSpreadsheet, PlugZapIcon, ChevronRightIcon, ArrowLeftIcon, Loader2Icon, InboxIcon, Loader2, AlertCircle, Pause, Play, Ban, TargetIcon, CalendarClockIcon, UsersIcon, MessageSquareIcon, ZapIcon, Maximize2Icon, FolderOpenIcon, UploadIcon, RefreshCwIcon, AlertCircleIcon, ExternalLinkIcon, ClipboardCheckIcon, ShieldAlertIcon, TimerIcon, CircleDotIcon, XIcon, Trash2Icon, SquareIcon, ArrowDownIcon, RotateCcwIcon, MousePointer2Icon, DownloadIcon, TrashIcon, ImageIcon, FileTextIcon, CheckIcon, TerminalIcon, SparklesIcon, ClockIcon, PlusIcon, CloudIcon, HardDriveIcon, PaperclipIcon, GlobeIcon, FolderIcon, CopyIcon, FileIcon, ChevronLeftIcon, MinusIcon, SearchIcon, ArrowUpIcon, CircleCheckIcon, ThumbsUpIcon, ThumbsDownIcon, BookOpenIcon, GitBranchIcon, ActivityIcon, EyeIcon, ListTodoIcon, ListIcon, PenLineIcon, ArrowRight, FileEditIcon, WrenchIcon, FileCodeIcon, CodeIcon, FileArchiveIcon, FileVideoIcon, FileAudioIcon, FileImageIcon, FileChartLineIcon, FileSpreadsheetIcon, XCircleIcon, CheckCircle2Icon, Code, CircleXIcon, SkullIcon, CheckCircleIcon, CircleIcon } from 'lucide-react';
 import { cva } from 'class-variance-authority';
 import { Collapsible as Collapsible$1, Slot, Tooltip as Tooltip$1, Progress as Progress$1, Tabs as Tabs$1, Dialog as Dialog$1, ScrollArea as ScrollArea$1, Popover as Popover$1 } from 'radix-ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -715,6 +715,64 @@ var ConversationScrollButton = ({
     }
   );
 };
+
+// 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__ */ 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__ */ jsx("span", { className: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(PlugZapIcon, { className: "h-4 w-4" }) }),
+    /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col", children: [
+      /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-foreground", children: [
+        "Connect ",
+        name
+      ] }),
+      /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+        "Authorize your ",
+        name,
+        " account to continue."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        size: "xs",
+        onClick: () => openOAuthPopup(url),
+        className: "ml-auto shrink-0",
+        children: "Connect"
+      }
+    )
+  ] });
+}
 var Message = ({ className, from, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
@@ -747,6 +805,21 @@ createContext(
   null
 );
 var streamdownPlugins = { cjk, code, math, 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__ */ jsx(ComposioConnectCard, { url: href, label: anchorText(children) });
+    }
+    return /* @__PURE__ */ jsx("a", { href, target: "_blank", rel: "noreferrer", ...props, children });
+  }
+};
 var MessageResponse = memo(
   ({ className, ...props }) => /* @__PURE__ */ jsx(
     Streamdown,
@@ -756,6 +829,7 @@ var MessageResponse = memo(
         className
       ),
       plugins: streamdownPlugins,
+      components: streamdownComponents,
       ...props
     }
   ),
@@ -2141,6 +2215,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 {
@@ -2179,9 +2298,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);
@@ -6025,7 +6142,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);
@@ -6043,7 +6160,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);
@@ -6061,7 +6178,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);
@@ -6390,6 +6507,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] = useState(null);
+  const refresh = useCallback(async () => {
+    if (!adapter.listComposioConnections) return;
+    const res = await adapter.listComposioConnections({ agentId });
+    setRows(res.toolkits);
+  }, [adapter, agentId]);
+  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__ */ jsx("div", { className: "px-5", children: /* @__PURE__ */ 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__ */ jsx("span", { className: "font-medium", children: "Connect your accounts" }),
+        /* @__PURE__ */ jsxs("span", { className: "ml-auto flex items-center gap-1.5", children: [
+          shown.map((r) => /* @__PURE__ */ jsx(Logo, { row: r }, r.toolkit)),
+          /* @__PURE__ */ jsx(
+            ChevronRightIcon,
+            {
+              "aria-hidden": true,
+              className: "h-3.5 w-3.5 text-muted-foreground/60"
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+function Logo({ row }) {
+  const [broken, setBroken] = useState(false);
+  const label = row.name ?? row.toolkit;
+  if (broken || !row.logo) {
+    return /* @__PURE__ */ 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__ */ jsx(
+    "img",
+    {
+      src: row.logo,
+      alt: label,
+      title: label,
+      className: "h-4 w-4 rounded-sm object-contain",
+      onError: () => setBroken(true)
+    }
+  );
+}
 function ResearchSourcesPanel({
   sources
 }) {
@@ -7316,45 +7501,6 @@ var ErrorMessage = memo(function ErrorMessage2({
     }
   );
 });
-
-// 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";
-}
 function Skeleton({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
@@ -8379,7 +8525,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__ */ jsxs("div", { className: "flex items-center gap-1.5 text-sm", children: [
@@ -9242,7 +9390,9 @@ function ChatThread({
   onViewModeChange,
   deepResearchEnabled = false,
   researchSources = [],
-  hideTurnSummary = false
+  hideTurnSummary = false,
+  agentId,
+  onOpenIntegrations
 }) {
   const groups = useMemo(() => groupMessages(messages), [messages]);
   const awaitingInput = useMemo(() => isAwaitingUserInput(messages), [messages]);
@@ -9282,6 +9432,44 @@ function ChatThread({
     }
     return null;
   }, [messages]);
+  const composerArea = /* @__PURE__ */ 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__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(RetryBanner, { indicator: retryIndicator }) }),
+    researchSources.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(ResearchSourcesPanel, { sources: researchSources }) }),
+    /* @__PURE__ */ jsx(
+      ChatComposer,
+      {
+        onSend,
+        onStop,
+        isRunning,
+        disabled: composerDisabled,
+        disabledReason: composerDisabledReason,
+        tokenUsage,
+        onComposerError,
+        showBrowser,
+        onToggleBrowser,
+        showWorkspace,
+        onToggleWorkspace,
+        canShowBrowser,
+        canShowWorkspace,
+        viewMode,
+        onViewModeChange,
+        deepResearchEnabled
+      }
+    ),
+    onOpenIntegrations && /* @__PURE__ */ jsx(
+      IntegrationsBandSlot,
+      {
+        agentId,
+        onOpenIntegrations
+      }
+    )
+  ] });
+  if (messages.length === 0 && !isLoadingHistory && !disabled) {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-1 flex-col items-center justify-center overflow-hidden bg-background px-3 text-base", children: /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+      /* @__PURE__ */ jsx("h2", { className: "mb-8 text-center text-2xl font-bold text-foreground", children: "What should we do ?" }),
+      composerArea
+    ] }) });
+  }
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col overflow-hidden bg-background text-base", children: [
     /* @__PURE__ */ jsxs(Conversation, { className: "relative flex-1 min-h-0", children: [
       /* @__PURE__ */ jsx(ConversationContent, { className: "mx-auto w-full max-w-4xl", children: messages.length === 0 && isLoadingHistory ? /* @__PURE__ */ jsx(
@@ -9291,13 +9479,6 @@ function ChatThread({
           title: "Loading conversation",
           description: "Fetching the session history."
         }
-      ) : messages.length === 0 && !disabled ? /* @__PURE__ */ jsx(
-        ConversationEmptyState,
-        {
-          icon: /* @__PURE__ */ jsx(MessageSquareIcon, { className: "size-8 opacity-40" }),
-          title: "Start a conversation",
-          description: "Ask me anything \u2014 I can search, analyze, write code, and more."
-        }
       ) : /* @__PURE__ */ jsxs(Fragment, { children: [
         groups.map((group) => {
           if (group.role === "user") {
@@ -9350,33 +9531,23 @@ function ChatThread({
       ] }) }),
       /* @__PURE__ */ jsx(ConversationScrollButton, {})
     ] }),
-    /* @__PURE__ */ 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__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(RetryBanner, { indicator: retryIndicator }) }),
-      researchSources.length > 0 && /* @__PURE__ */ jsx("div", { className: "mb-2", children: /* @__PURE__ */ jsx(ResearchSourcesPanel, { sources: researchSources }) }),
-      /* @__PURE__ */ 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__ */ jsx(
+    IntegrationsBand,
+    {
+      agentId,
+      adapter,
+      onOpenIntegrations
+    }
+  );
+}
 var noop = () => {
 };
 var FileTreeContext = createContext({
@@ -11503,7 +11674,8 @@ function AgentChat({
   onMessagesChange,
   disabled,
   onComposerError,
-  deepResearchEnabled = false
+  deepResearchEnabled = false,
+  onOpenIntegrations
 }) {
   const [workspacePath, setWorkspacePath] = useState(null);
   const [mobileView, setMobileView] = useState("chat");
@@ -11653,7 +11825,9 @@ function AgentChat({
                     onViewModeChange: runtime.setViewMode,
                     deepResearchEnabled,
                     researchSources: runtime.researchSources,
-                    hideTurnSummary
+                    hideTurnSummary,
+                    agentId,
+                    onOpenIntegrations
                   }
                 )
               }
@@ -11744,6 +11918,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] = useState([]);
+  const [query, setQuery] = useState("");
+  const [busy, setBusy] = useState(null);
+  const [error, setError] = useState(null);
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const refresh = useCallback(async () => {
+    if (!adapter.listComposioConnections) return;
+    const res = await adapter.listComposioConnections({ agentId });
+    setRows(res.toolkits);
+  }, [adapter, agentId]);
+  useEffect(() => {
+    void refresh();
+    const onFocus = () => void refresh();
+    window.addEventListener("focus", onFocus);
+    return () => window.removeEventListener("focus", onFocus);
+  }, [refresh]);
+  const grouped = 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__ */ jsxs("div", { className: "mx-auto flex w-full max-w-3xl flex-col gap-6 p-6", children: [
+    /* @__PURE__ */ 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__ */ jsx(ArrowLeftIcon, { className: "h-4 w-4" }),
+          "Back"
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold text-foreground", children: "Integrations" }),
+      /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: "Connect third-party services to enhance your agent's capabilities" })
+    ] }),
+    /* @__PURE__ */ 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__ */ jsx("div", { role: "alert", className: "text-xs text-red-500", children: error }),
+    grouped.map(([category, items]) => /* @__PURE__ */ jsxs("section", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-base font-semibold uppercase tracking-wide text-muted-foreground/70", children: category }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-2 sm:grid-cols-2", children: items.map((r) => /* @__PURE__ */ 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] = useState(false);
+  const [broken, setBroken] = useState(false);
+  const name = row.name ?? titleCase(row.toolkit);
+  return /* @__PURE__ */ jsxs("div", { className: "rounded-lg border border-border p-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ 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__ */ jsx(ChevronDownIcon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground/60" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground/60" }),
+            broken || !row.logo ? /* @__PURE__ */ 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__ */ jsx(
+              "img",
+              {
+                src: row.logo,
+                alt: name,
+                className: "h-5 w-5 rounded object-contain",
+                onError: () => setBroken(true)
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-foreground", children: name })
+          ]
+        }
+      ),
+      /* @__PURE__ */ 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__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(Loader2Icon, { className: "h-3.5 w-3.5 animate-spin" }),
+            row.connected ? "Disconnecting" : "Connecting"
+          ] }) : row.connected ? "Disconnect" : "Connect"
+        }
+      )
+    ] }),
+    open && /* @__PURE__ */ jsxs("div", { className: "mt-2 pl-7 text-sm text-muted-foreground", children: [
+      row.description && /* @__PURE__ */ jsx("p", { children: row.description }),
+      /* @__PURE__ */ 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" })
+    ] })
+  ] });
+}
 var DEFAULT_LIMIT = 50;
 function requireInboxAdapter(adapter) {
   if (!adapter.listInbox || !adapter.getInboxItem || !adapter.markInboxItemRead || !adapter.acknowledgeInboxItem || !adapter.respondGovernanceInboxItem || !adapter.openInboxStream) {
@@ -14208,6 +14574,6 @@ function SessionTreePanel({
   ] });
 }
 
-export { ACTIVE_MISSION_STATUSES, AgentChat, AgentChatAdapterProvider, CitationText, InboxPanel, MessageResponse, MissionDashboard, MissionsPanel, ResearchSourcesPanel, ScheduledWorkPanel, SessionTreePanel, deriveMissionWorkerActivityLabel, groupMissionTasksByBucket, isTerminalMissionStatus, missionTaskBucket, splitCitations, useAgentChatAdapterContext, useAgentChatRuntime, useChatViewMode, useInboxUnreadCount };
+export { ACTIVE_MISSION_STATUSES, AgentChat, AgentChatAdapterProvider, CitationText, ComposioConnectCard, InboxPanel, IntegrationsBand, IntegrationsPage, MessageResponse, MissionDashboard, MissionsPanel, ResearchSourcesPanel, ScheduledWorkPanel, SessionTreePanel, deriveMissionWorkerActivityLabel, groupMissionTasksByBucket, isTerminalMissionStatus, missionTaskBucket, splitCitations, useAgentChatAdapterContext, useAgentChatRuntime, useChatViewMode, useInboxUnreadCount };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map