@elizaos/ui 2.0.0-beta.2 → 2.0.11-beta.7

package/cloud/connectors/index.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Cloud connectors domain — public surface.
+ *
+ * These are the CLOUD-hosted connectors (OAuth-redirect + token-credential)
+ * lifted from `@elizaos/cloud-frontend`. The domain:
+ *
+ * - registers a cloud route at `dashboard/settings/connections` via
+ *   {@link registerCloudRoute} (import side-effect below), so the shell renders
+ *   the connectors surface standalone;
+ * - exports {@link CloudConnectorsSection} (the canonical port of the
+ *   cloud-frontend `ConnectionsTab`) plus the individual connection components
+ *   so Wave-3 settings wiring can mount the surface however it chooses;
+ * - exports {@link registerCloudConnectorsSettingsSection} so the host can
+ *   register the surface as a Settings section under the "agent" group WITHOUT
+ *   this module deciding the settings IA at import time (that decision belongs
+ *   to Wave-3, and the pinned `settings-section-meta` is owned elsewhere).
+ *
+ * Backend endpoints consumed (all same-origin `/api/*`, auth via steward
+ * cookie on web + Bearer on native):
+ *   - OAuth-redirect: `GET/POST/DELETE /api/v1/oauth/{connections,<platform>/initiate}`
+ *   - Twilio:    `GET /api/v1/twilio/status`, `POST /api/v1/twilio/connect`, `DELETE /api/v1/twilio/disconnect`
+ *   - Blooio:    `GET /api/v1/blooio/status`, `POST /api/v1/blooio/{connect,webhook-secret}`, `DELETE /api/v1/blooio/disconnect`
+ *   - WhatsApp:  `GET /api/v1/whatsapp/status`, `POST /api/v1/whatsapp/connect`, `DELETE /api/v1/whatsapp/disconnect`
+ *   - Telegram:  `GET /api/v1/telegram/status`, `POST /api/v1/telegram/connect`, `DELETE /api/v1/telegram/disconnect`
+ *   - Discord:   `GET/POST /api/v1/discord/connections`, `PATCH/DELETE /api/v1/discord/connections/:id`, `GET /api/v1/dashboard` (character list)
+ */
+export { BlooioConnection } from "./blooio-connection";
+export { CloudConnectorsSection } from "./CloudConnectorsSection";
+export { DiscordGatewayConnection } from "./discord-gateway-connection";
+export { GoogleConnection } from "./google-connection";
+export { MicrosoftConnection } from "./microsoft-connection";
+export { type OAuthConnection, type OAuthProviderConfig, useOAuthConnections, } from "./oauth-connection";
+export { TelegramConnection } from "./telegram-connection";
+export { TwilioConnection } from "./twilio-connection";
+export { useConnectionStatus } from "./use-connection-status";
+export { WhatsAppConnection } from "./whatsapp-connection";
+/**
+ * Stable id for the cloud connectors Settings section. Distinct from the
+ * built-in local-process `connectors` section so the two coexist until the
+ * planned active-server-kind branch unifies them.
+ */
+export declare const CLOUD_CONNECTORS_SECTION_ID = "cloud-connectors";
+/**
+ * Register the cloud connectors surface as a Settings section under the "agent"
+ * group. Idempotent (the registry replaces by id). Call from the host's cloud
+ * boot path; not invoked at import time so the settings IA stays the host's
+ * decision.
+ */
+export declare function registerCloudConnectorsSettingsSection(): void;
+//# sourceMappingURL=index.d.ts.map

package/cloud/connectors/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/connectors/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAOH,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,wBAAwB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EACL,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,mBAAmB,GACpB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,qBAAqB,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAE3D;;;;GAIG;AACH,eAAO,MAAM,2BAA2B,qBAAqB,CAAC;AAE9D;;;;;GAKG;AACH,wBAAgB,sCAAsC,IAAI,IAAI,CAa7D"}

package/cloud/connectors/index.js

@@ -0,0 +1,74 @@
+/**
+ * Cloud connectors domain — public surface.
+ *
+ * These are the CLOUD-hosted connectors (OAuth-redirect + token-credential)
+ * lifted from `@elizaos/cloud-frontend`. The domain:
+ *
+ * - registers a cloud route at `dashboard/settings/connections` via
+ *   {@link registerCloudRoute} (import side-effect below), so the shell renders
+ *   the connectors surface standalone;
+ * - exports {@link CloudConnectorsSection} (the canonical port of the
+ *   cloud-frontend `ConnectionsTab`) plus the individual connection components
+ *   so Wave-3 settings wiring can mount the surface however it chooses;
+ * - exports {@link registerCloudConnectorsSettingsSection} so the host can
+ *   register the surface as a Settings section under the "agent" group WITHOUT
+ *   this module deciding the settings IA at import time (that decision belongs
+ *   to Wave-3, and the pinned `settings-section-meta` is owned elsewhere).
+ *
+ * Backend endpoints consumed (all same-origin `/api/*`, auth via steward
+ * cookie on web + Bearer on native):
+ *   - OAuth-redirect: `GET/POST/DELETE /api/v1/oauth/{connections,<platform>/initiate}`
+ *   - Twilio:    `GET /api/v1/twilio/status`, `POST /api/v1/twilio/connect`, `DELETE /api/v1/twilio/disconnect`
+ *   - Blooio:    `GET /api/v1/blooio/status`, `POST /api/v1/blooio/{connect,webhook-secret}`, `DELETE /api/v1/blooio/disconnect`
+ *   - WhatsApp:  `GET /api/v1/whatsapp/status`, `POST /api/v1/whatsapp/connect`, `DELETE /api/v1/whatsapp/disconnect`
+ *   - Telegram:  `GET /api/v1/telegram/status`, `POST /api/v1/telegram/connect`, `DELETE /api/v1/telegram/disconnect`
+ *   - Discord:   `GET/POST /api/v1/discord/connections`, `PATCH/DELETE /api/v1/discord/connections/:id`, `GET /api/v1/dashboard` (character list)
+ */
+import { Plug } from "lucide-react";
+import { registerSettingsSection } from "../../components/settings/settings-section-registry.js";
+import { registerCloudRoute } from "../shell/cloud-route-registry.js";
+import { CloudConnectorsSection } from "./CloudConnectorsSection.js";
+export { BlooioConnection } from "./blooio-connection.js";
+export { CloudConnectorsSection } from "./CloudConnectorsSection.js";
+export { DiscordGatewayConnection } from "./discord-gateway-connection.js";
+export { GoogleConnection } from "./google-connection.js";
+export { MicrosoftConnection } from "./microsoft-connection.js";
+export { useOAuthConnections, } from "./oauth-connection.js";
+export { TelegramConnection } from "./telegram-connection.js";
+export { TwilioConnection } from "./twilio-connection.js";
+export { useConnectionStatus } from "./use-connection-status.js";
+export { WhatsAppConnection } from "./whatsapp-connection.js";
+/**
+ * Stable id for the cloud connectors Settings section. Distinct from the
+ * built-in local-process `connectors` section so the two coexist until the
+ * planned active-server-kind branch unifies them.
+ */
+export const CLOUD_CONNECTORS_SECTION_ID = "cloud-connectors";
+/**
+ * Register the cloud connectors surface as a Settings section under the "agent"
+ * group. Idempotent (the registry replaces by id). Call from the host's cloud
+ * boot path; not invoked at import time so the settings IA stays the host's
+ * decision.
+ */
+export function registerCloudConnectorsSettingsSection() {
+    registerSettingsSection({
+        id: CLOUD_CONNECTORS_SECTION_ID,
+        label: "settings.sections.cloudConnectors.label",
+        defaultLabel: "Cloud Connectors",
+        icon: Plug,
+        tone: "accent",
+        hue: "accent",
+        group: "agent",
+        titleKey: "settings.sections.cloudConnectors.title",
+        defaultTitle: "Cloud Connectors",
+        Component: CloudConnectorsSection,
+    });
+}
+// Register the standalone cloud route at import time. The cloud-frontend OAuth
+// initiate flow redirects back to `/dashboard/settings?tab=connections`; this
+// path keeps that deep link resolvable inside the app shell.
+registerCloudRoute({
+    path: "dashboard/settings/connections",
+    element: CloudConnectorsSection,
+    group: "dashboard",
+});

package/cloud/connectors/microsoft-connection.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Microsoft Services cloud connector (OAuth-redirect).
+ *
+ * Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/settings/_components/microsoft-connection.tsx`.
+ * The `tone="blue"` palette violation on the "Available automations" callout is
+ * fixed to the neutral `tone="muted"` per the brand rules (no blue anywhere).
+ */
+export declare function MicrosoftConnection(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=microsoft-connection.d.ts.map

package/cloud/connectors/microsoft-connection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"microsoft-connection.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/connectors/microsoft-connection.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAkBH,wBAAgB,mBAAmB,4CAwOlC"}

package/cloud/connectors/microsoft-connection.js

@@ -0,0 +1,133 @@
+/**
+ * Microsoft Services cloud connector (OAuth-redirect).
+ *
+ * Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/settings/_components/microsoft-connection.tsx`.
+ * The `tone="blue"` palette violation on the "Available automations" callout is
+ * fixed to the neutral `tone="muted"` per the brand rules (no blue anywhere).
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Calendar, Loader2, Mail } from "lucide-react";
+import { ConnectionCallout, ConnectionCard, ConnectionConnectedBadge, ConnectionDisconnectAction, ConnectionFooterActions, ConnectionIdentityPanel, } from "../../cloud-ui/components/connection-card.js";
+import { Badge } from "../../components/ui/badge.js";
+import { Button } from "../../components/ui/button.js";
+import { useCloudT } from "../shell/CloudI18nProvider.js";
+import { useOAuthConnections } from "./oauth-connection.js";
+export function MicrosoftConnection() {
+    const t = useCloudT();
+    const { activeConnections, isLoading, isConnecting, disconnectingId, connect: handleConnect, disconnect, } = useOAuthConnections({ platform: "microsoft", label: "Microsoft" });
+    // Microsoft is a single-account integration: surface the first active link.
+    const activeConnection = activeConnections[0];
+    const isDisconnecting = disconnectingId !== null;
+    const handleDisconnect = () => {
+        if (!activeConnection)
+            return;
+        void disconnect(activeConnection.id);
+    };
+    const getScopeIcon = (scope) => {
+        if (scope.includes("Mail")) {
+            return _jsx(Mail, { className: "h-4 w-4" });
+        }
+        if (scope.includes("Calendar")) {
+            return _jsx(Calendar, { className: "h-4 w-4" });
+        }
+        return null;
+    };
+    const getScopeName = (scope) => {
+        if (scope === "Mail.Send")
+            return t("cloud.microsoft.scopeSendEmails", {
+                defaultValue: "Send emails",
+            });
+        if (scope === "Mail.Read")
+            return t("cloud.microsoft.scopeReadEmails", {
+                defaultValue: "Read emails",
+            });
+        if (scope === "Mail.ReadWrite")
+            return t("cloud.microsoft.scopeReadWriteEmails", {
+                defaultValue: "Read & write emails",
+            });
+        if (scope === "Calendars.Read")
+            return t("cloud.microsoft.scopeReadCalendar", {
+                defaultValue: "Read calendar",
+            });
+        if (scope === "Calendars.ReadWrite")
+            return t("cloud.microsoft.scopeReadWriteCalendar", {
+                defaultValue: "Read & write calendar",
+            });
+        if (scope === "User.Read")
+            return t("cloud.microsoft.scopeReadProfile", {
+                defaultValue: "Read profile",
+            });
+        if (scope === "offline_access")
+            return t("cloud.microsoft.scopeOfflineAccess", {
+                defaultValue: "Offline access",
+            });
+        return scope;
+    };
+    if (isLoading) {
+        return (_jsx(ConnectionCard, { name: t("cloud.microsoft.cardName", {
+                defaultValue: "Microsoft Services",
+            }), icon: _jsx(MicrosoftIcon, {}), description: t("cloud.microsoft.cardDescription", {
+                defaultValue: "Connect Outlook Mail, Calendar for AI-powered automation",
+            }), status: "loading" }));
+    }
+    return (_jsx(ConnectionCard, { name: t("cloud.microsoft.cardName", {
+            defaultValue: "Microsoft Services",
+        }), icon: _jsx(MicrosoftIcon, {}), description: t("cloud.microsoft.cardDescription", {
+            defaultValue: "Connect Outlook Mail, Calendar for AI-powered automation",
+        }), status: activeConnection ? "connected" : "disconnected", statusBadge: _jsx(ConnectionConnectedBadge, {}), connectedContent: _jsxs("div", { className: "space-y-4", children: [_jsx(ConnectionIdentityPanel, { icon: _jsx(Mail, { className: "h-6 w-6 text-[#FF5800]" }), iconClassName: "bg-[#FF5800]/10", title: activeConnection?.email, subtitle: t("cloud.microsoft.connectedSubtitle", {
+                        defaultValue: "Microsoft Account Connected",
+                    }) }), activeConnection?.scopes && activeConnection.scopes.length > 0 && (_jsxs("div", { className: "p-3 bg-muted rounded-sm", children: [_jsx("p", { className: "text-sm font-medium mb-2", children: t("cloud.microsoft.permissionsGranted", {
+                                defaultValue: "Permissions granted:",
+                            }) }), _jsx("div", { className: "flex flex-wrap gap-2", children: activeConnection.scopes
+                                .filter((s) => !["openid", "profile", "email"].includes(s))
+                                .map((scope) => (_jsxs(Badge, { variant: "outline", className: "text-xs", children: [getScopeIcon(scope), _jsx("span", { className: "ml-1", children: getScopeName(scope) })] }, scope))) })] })), _jsx(ConnectionCallout, { title: t("cloud.microsoft.availableAutomations", {
+                        defaultValue: "Available automations:",
+                    }), tone: "muted", items: [
+                        t("cloud.microsoft.automation1", {
+                            defaultValue: "Send emails via Outlook on your behalf",
+                        }),
+                        t("cloud.microsoft.automation2", {
+                            defaultValue: "Create and manage calendar events",
+                        }),
+                        t("cloud.microsoft.automation3", {
+                            defaultValue: "Read emails for AI-powered responses",
+                        }),
+                        t("cloud.microsoft.automation4", {
+                            defaultValue: "Build email workflows with AI",
+                        }),
+                    ] }), _jsx(ConnectionFooterActions, { note: t("cloud.microsoft.footerNote", {
+                        defaultValue: "Used for workflow automation",
+                    }), children: _jsx(ConnectionDisconnectAction, { title: t("cloud.microsoft.disconnectTitle", {
+                            defaultValue: "Disconnect Microsoft Account?",
+                        }), description: t("cloud.microsoft.disconnectDescription", {
+                            defaultValue: "This will revoke access to Outlook Mail and Calendar. Any active automations using Microsoft services will stop working until you reconnect.",
+                        }), onDisconnect: handleDisconnect, isDisconnecting: isDisconnecting }) })] }), setupContent: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsxs("div", { className: "p-3 bg-muted rounded-sm text-center", children: [_jsx(Mail, { className: "h-6 w-6 mx-auto mb-2 text-[#FF5800]" }), _jsx("p", { className: "text-sm font-medium", children: t("cloud.microsoft.outlook", { defaultValue: "Outlook" }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: t("cloud.microsoft.outlookDesc", {
+                                        defaultValue: "Send & read emails",
+                                    }) })] }), _jsxs("div", { className: "p-3 bg-muted rounded-sm text-center", children: [_jsx(Calendar, { className: "h-6 w-6 mx-auto mb-2 text-[#FF5800]" }), _jsx("p", { className: "text-sm font-medium", children: t("cloud.microsoft.calendar", { defaultValue: "Calendar" }) }), _jsx("p", { className: "text-xs text-muted-foreground", children: t("cloud.microsoft.calendarDesc", {
+                                        defaultValue: "Manage events",
+                                    }) })] })] }), _jsx(ConnectionCallout, { title: t("cloud.microsoft.calloutTitle", {
+                        defaultValue: "What you can do with Microsoft integration:",
+                    }), items: [
+                        t("cloud.microsoft.calloutItem1", {
+                            defaultValue: "Send AI-generated emails via Outlook",
+                        }),
+                        t("cloud.microsoft.calloutItem2", {
+                            defaultValue: "Schedule and manage calendar events",
+                        }),
+                        t("cloud.microsoft.calloutItem3", {
+                            defaultValue: "Create email workflows triggered by messages",
+                        }),
+                        t("cloud.microsoft.calloutItem4", {
+                            defaultValue: "Auto-respond based on calendar availability",
+                        }),
+                    ] }), _jsx(Button, { onClick: handleConnect, disabled: isConnecting, className: "w-full", children: isConnecting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin mr-2" }), t("cloud.microsoft.connecting", {
+                                defaultValue: "Connecting...",
+                            })] })) : (_jsxs(_Fragment, { children: [_jsx(MicrosoftIcon, { className: "h-4 w-4 mr-2 text-current" }), t("cloud.microsoft.connectButton", {
+                                defaultValue: "Connect with Microsoft",
+                            })] })) })] }) }));
+}
+function MicrosoftIcon({ className = "h-5 w-5" }) {
+    return (_jsxs("svg", { className: className, viewBox: "0 0 23 23", "aria-label": "Microsoft", children: [_jsx("path", { fill: "#f35325", d: "M1 1h10v10H1z" }), _jsx("path", { fill: "#81bc06", d: "M12 1h10v10H12z" }), _jsx("path", { fill: "#05a6f0", d: "M1 12h10v10H1z" }), _jsx("path", { fill: "#ffba08", d: "M12 12h10v10H12z" })] }));
+}

package/cloud/connectors/oauth-connection.d.ts

@@ -0,0 +1,52 @@
+/**
+ * Shared data layer for OAuth-redirect cloud connectors (Google, Microsoft).
+ *
+ * Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/settings/_components/oauth-connection.ts`,
+ * with the raw `fetch` calls swapped for the cloud {@link api} client so the
+ * steward Bearer token is injected on native targets (same-origin cookie auth
+ * keeps working on web).
+ *
+ * Handles listing connections (`GET /api/v1/oauth/connections?platform=`),
+ * initiating the OAuth redirect (`POST /api/v1/oauth/<platform>/initiate`), and
+ * revoking a connection (`DELETE /api/v1/oauth/connections/:id`).
+ * Token/credential connectors (Telegram, Twilio, WhatsApp, Blooio) use a
+ * different connect flow and are intentionally not covered here.
+ */
+/**
+ * A single OAuth connection row returned by
+ * `GET /api/v1/oauth/connections?platform=<platform>`.
+ */
+export interface OAuthConnection {
+    id: string;
+    platform: string;
+    email?: string;
+    displayName?: string;
+    scopes?: string[];
+    status: string;
+}
+/**
+ * Per-provider configuration for the shared OAuth connection logic. Only the
+ * pieces that genuinely vary between providers (platform key, initiate path,
+ * and user-facing labels) live here; the fetch / initiate / disconnect flow is
+ * identical and owned by {@link useOAuthConnections}.
+ */
+export interface OAuthProviderConfig {
+    /** Platform query value, e.g. "google" / "microsoft". */
+    platform: string;
+    /** Human label used in toast messages, e.g. "Google" / "Microsoft". */
+    label: string;
+}
+interface UseOAuthConnectionsResult {
+    connections: OAuthConnection[];
+    activeConnections: OAuthConnection[];
+    isLoading: boolean;
+    isConnecting: boolean;
+    disconnectingId: string | null;
+    connect: () => Promise<void>;
+    disconnect: (connectionId: string) => Promise<void>;
+    refetch: () => Promise<void>;
+}
+export declare function useOAuthConnections(config: OAuthProviderConfig): UseOAuthConnectionsResult;
+export {};
+//# sourceMappingURL=oauth-connection.d.ts.map

package/cloud/connectors/oauth-connection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"oauth-connection.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/connectors/oauth-connection.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAQH;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED;;;;;GAKG;AACH,MAAM,WAAW,mBAAmB;IAClC,yDAAyD;IACzD,QAAQ,EAAE,MAAM,CAAC;IACjB,uEAAuE;IACvE,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,yBAAyB;IACjC,WAAW,EAAE,eAAe,EAAE,CAAC;IAC/B,iBAAiB,EAAE,eAAe,EAAE,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,MAAM,GAAG,IAAI,CAAC;IAC/B,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IAC7B,UAAU,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAcD,wBAAgB,mBAAmB,CACjC,MAAM,EAAE,mBAAmB,GAC1B,yBAAyB,CA+F3B"}

package/cloud/connectors/oauth-connection.js

@@ -0,0 +1,114 @@
+/**
+ * Shared data layer for OAuth-redirect cloud connectors (Google, Microsoft).
+ *
+ * Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/settings/_components/oauth-connection.ts`,
+ * with the raw `fetch` calls swapped for the cloud {@link api} client so the
+ * steward Bearer token is injected on native targets (same-origin cookie auth
+ * keeps working on web).
+ *
+ * Handles listing connections (`GET /api/v1/oauth/connections?platform=`),
+ * initiating the OAuth redirect (`POST /api/v1/oauth/<platform>/initiate`), and
+ * revoking a connection (`DELETE /api/v1/oauth/connections/:id`).
+ * Token/credential connectors (Telegram, Twilio, WhatsApp, Blooio) use a
+ * different connect flow and are intentionally not covered here.
+ */
+"use client";
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { ApiError, api } from "../lib/api-client.js";
+function errorBodyMessage(error, fallback) {
+    if (error instanceof ApiError) {
+        const body = error.body;
+        if (body && typeof body === "object" && "error" in body) {
+            const apiError = body.error;
+            if (typeof apiError === "string" && apiError)
+                return apiError;
+        }
+        return error.message || fallback;
+    }
+    return fallback;
+}
+export function useOAuthConnections(config) {
+    const { platform, label } = config;
+    const [connections, setConnections] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [isConnecting, setIsConnecting] = useState(false);
+    const [disconnectingId, setDisconnectingId] = useState(null);
+    const fetchConnections = useCallback(async (signal) => {
+        setIsLoading(true);
+        try {
+            const data = await api(`/api/v1/oauth/connections?platform=${platform}`, { signal });
+            if (!signal?.aborted) {
+                setConnections(data.connections ?? []);
+            }
+        }
+        catch {
+            if (!signal?.aborted) {
+                toast.error(`Failed to fetch ${label} connections`);
+            }
+        }
+        finally {
+            if (!signal?.aborted) {
+                setIsLoading(false);
+            }
+        }
+    }, [platform, label]);
+    useEffect(() => {
+        const controller = new AbortController();
+        void fetchConnections(controller.signal);
+        return () => controller.abort();
+    }, [fetchConnections]);
+    const connect = useCallback(async () => {
+        if (isConnecting)
+            return;
+        setIsConnecting(true);
+        try {
+            const data = await api(`/api/v1/oauth/${platform}/initiate`, {
+                method: "POST",
+                json: { redirectUrl: "/dashboard/settings?tab=connections" },
+            });
+            if (data.authUrl) {
+                window.location.href = data.authUrl;
+                return;
+            }
+            toast.error(data.error || `Failed to initiate ${label} OAuth`);
+            setIsConnecting(false);
+        }
+        catch (error) {
+            toast.error(error instanceof ApiError
+                ? errorBodyMessage(error, `Failed to initiate ${label} OAuth`)
+                : "Network error. Please check your connection.");
+            setIsConnecting(false);
+        }
+    }, [isConnecting, platform, label]);
+    const disconnect = useCallback(async (connectionId) => {
+        if (disconnectingId)
+            return;
+        setDisconnectingId(connectionId);
+        try {
+            await api(`/api/v1/oauth/connections/${connectionId}`, {
+                method: "DELETE",
+            });
+            toast.success(`${label} account disconnected`);
+            await fetchConnections();
+        }
+        catch (error) {
+            toast.error(errorBodyMessage(error, "Failed to disconnect"));
+        }
+        finally {
+            setDisconnectingId(null);
+        }
+    }, [disconnectingId, label, fetchConnections]);
+    const activeConnections = connections.filter((c) => c.status === "active");
+    return {
+        connections,
+        activeConnections,
+        isLoading,
+        isConnecting,
+        disconnectingId,
+        connect,
+        disconnect,
+        refetch: fetchConnections,
+    };
+}

package/cloud/connectors/telegram-connection.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Telegram Bot cloud connector (token-credential).
+ *
+ * Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/settings/_components/telegram-connection.tsx`.
+ * Raw `fetch` connect/disconnect calls are swapped for the cloud {@link api}
+ * client so the steward Bearer token is injected on native targets. The
+ * "Next: Start chatting" callout `tone="blue"` is fixed to neutral `tone="muted"`.
+ */
+export declare function TelegramConnection(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=telegram-connection.d.ts.map

package/cloud/connectors/telegram-connection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"telegram-connection.d.ts","sourceRoot":"","sources":["../../../../../../src/cloud/connectors/telegram-connection.tsx"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAiDH,wBAAgB,kBAAkB,4CAyUjC"}

package/cloud/connectors/telegram-connection.js

@@ -0,0 +1,158 @@
+/**
+ * Telegram Bot cloud connector (token-credential).
+ *
+ * Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/settings/_components/telegram-connection.tsx`.
+ * Raw `fetch` connect/disconnect calls are swapped for the cloud {@link api}
+ * client so the steward Bearer token is injected on native targets. The
+ * "Next: Start chatting" callout `tone="blue"` is fixed to neutral `tone="muted"`.
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Bot, ExternalLink, Loader2, MessageSquare } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { ConnectionCallout, ConnectionCard, ConnectionConnectedBadge, ConnectionDisconnectAction, ConnectionFooterActions, ConnectionIdentityPanel, ConnectionInstructions, } from "../../cloud-ui/components/connection-card.js";
+import { Button } from "../../components/ui/button.js";
+import { Input } from "../../components/ui/input.js";
+import { Label } from "../../components/ui/label.js";
+import { ApiError, api } from "../lib/api-client.js";
+import { useCloudT } from "../shell/CloudI18nProvider.js";
+import { useConnectionStatus } from "./use-connection-status.js";
+function apiErrorMessage(error, fallback) {
+    if (error instanceof ApiError) {
+        const body = error.body;
+        if (body && typeof body === "object" && "error" in body) {
+            const apiError = body.error;
+            if (typeof apiError === "string" && apiError)
+                return apiError;
+        }
+        return error.message || fallback;
+    }
+    return fallback;
+}
+export function TelegramConnection() {
+    const t = useCloudT();
+    const { status, isLoading, refetch: fetchStatus, } = useConnectionStatus("/api/v1/telegram/status", t("cloud.telegram.statusFetchFailed", {
+        defaultValue: "Failed to fetch Telegram status",
+    }));
+    const [isConnecting, setIsConnecting] = useState(false);
+    const [isDisconnecting, setIsDisconnecting] = useState(false);
+    const [botToken, setBotToken] = useState("");
+    const [showInstructions, setShowInstructions] = useState(false);
+    const handleConnect = async () => {
+        if (isConnecting)
+            return;
+        if (!botToken.trim()) {
+            toast.error(t("cloud.telegram.enterBotToken", {
+                defaultValue: "Please enter a bot token",
+            }));
+            return;
+        }
+        setIsConnecting(true);
+        try {
+            const data = await api("/api/v1/telegram/connect", { method: "POST", json: { botToken } });
+            if (data.success) {
+                toast.success(t("cloud.telegram.connected", {
+                    username: data.botUsername,
+                    defaultValue: "Telegram bot @{{username}} connected!",
+                }));
+                setBotToken("");
+                void fetchStatus();
+            }
+            else {
+                toast.error(data.error ||
+                    t("cloud.telegram.connectFailed", {
+                        defaultValue: "Failed to connect bot",
+                    }));
+            }
+        }
+        catch (error) {
+            toast.error(error instanceof ApiError
+                ? apiErrorMessage(error, t("cloud.telegram.connectFailed", {
+                    defaultValue: "Failed to connect bot",
+                }))
+                : t("cloud.telegram.networkError", {
+                    defaultValue: "Network error. Please check your connection.",
+                }));
+        }
+        setIsConnecting(false);
+    };
+    const handleDisconnect = async () => {
+        if (isDisconnecting)
+            return;
+        setIsDisconnecting(true);
+        try {
+            await api("/api/v1/telegram/disconnect", { method: "DELETE" });
+            toast.success(t("cloud.telegram.disconnected", {
+                defaultValue: "Telegram bot disconnected",
+            }));
+            void fetchStatus();
+        }
+        catch (error) {
+            toast.error(apiErrorMessage(error, t("cloud.telegram.disconnectFailed", {
+                defaultValue: "Failed to disconnect",
+            })));
+        }
+        setIsDisconnecting(false);
+    };
+    if (isLoading) {
+        return (_jsx(ConnectionCard, { name: t("cloud.telegram.cardName", { defaultValue: "Telegram Bot" }), icon: _jsx(MessageSquare, { className: "text-[#0088cc]" }), description: t("cloud.telegram.cardDescription", {
+                defaultValue: "Connect your Telegram bot for AI-powered automation",
+            }), status: "loading" }));
+    }
+    return (_jsx(ConnectionCard, { name: t("cloud.telegram.cardName", { defaultValue: "Telegram Bot" }), icon: _jsx(MessageSquare, { className: "text-[#0088cc]" }), description: t("cloud.telegram.cardDescription", {
+            defaultValue: "Connect your Telegram bot for AI-powered automation",
+        }), status: status?.connected ? "connected" : "disconnected", statusBadge: _jsx(ConnectionConnectedBadge, {}), connectedContent: _jsxs("div", { className: "space-y-4", children: [_jsx(ConnectionIdentityPanel, { icon: _jsx(Bot, { className: "h-6 w-6 text-white" }), iconClassName: "bg-[#0088cc]", title: `@${status?.botUsername}`, subtitle: `Bot ID: ${status?.botId}`, actions: _jsxs(Button, { variant: "outline", size: "sm", onClick: () => window.open(`https://t.me/${status?.botUsername}`, "_blank"), children: [_jsx(ExternalLink, { className: "h-4 w-4 mr-1" }), t("cloud.telegram.openBot", { defaultValue: "Open Bot" })] }), children: status?.error && (_jsx("div", { className: "text-sm text-yellow-600 mt-1", children: status.error })) }), _jsx(ConnectionCallout, { title: t("cloud.telegram.nextTitle", {
+                        defaultValue: "Next: Start chatting with your bot",
+                    }), tone: "muted", children: _jsxs("ol", { className: "text-xs text-muted-foreground space-y-1 list-decimal list-inside", children: [_jsx("li", { children: t("cloud.telegram.nextStep1", {
+                                    username: status?.botUsername ?? "",
+                                    defaultValue: "Open Telegram and search for @{{username}}",
+                                }) }), _jsx("li", { children: t("cloud.telegram.nextStep2", {
+                                    defaultValue: 'Click "Start" to begin a conversation',
+                                }) }), _jsx("li", { children: t("cloud.telegram.nextStep3", {
+                                    defaultValue: "Send a message - your AI agent will respond",
+                                }) })] }) }), _jsx(ConnectionFooterActions, { note: t("cloud.telegram.footerNote", {
+                        defaultValue: "Chats are auto-detected when bot is added.",
+                    }), children: _jsx(ConnectionDisconnectAction, { title: t("cloud.telegram.disconnectTitle", {
+                            defaultValue: "Disconnect Telegram Bot?",
+                        }), description: t("cloud.telegram.disconnectDescription", {
+                            defaultValue: "This will remove your bot credentials. Any active Telegram automation will stop working until you reconnect.",
+                        }), onDisconnect: handleDisconnect, isDisconnecting: isDisconnecting }) })] }), setupContent: _jsxs("div", { className: "space-y-4", children: [_jsx(ConnectionInstructions, { title: t("cloud.telegram.instructionsTitle", {
+                        defaultValue: "How to create a Telegram bot",
+                    }), open: showInstructions, onOpenChange: setShowInstructions, children: _jsxs("ol", { className: "text-sm text-muted-foreground space-y-2 list-decimal list-inside", children: [_jsxs("li", { children: [t("cloud.telegram.instructSearch", {
+                                        defaultValue: "Open Telegram and search for",
+                                    }), " ", _jsx("a", { href: "https://t.me/BotFather", target: "_blank", rel: "noopener noreferrer", className: "text-[#0088cc] hover:underline", children: "@BotFather" })] }), _jsxs("li", { children: [t("cloud.telegram.instructSendBefore", {
+                                        defaultValue: "Send",
+                                    }), " ", _jsx("code", { className: "bg-background px-1 rounded-sm", children: "/newbot" }), " ", t("cloud.telegram.instructSendAfter", {
+                                        defaultValue: "command",
+                                    })] }), _jsx("li", { children: t("cloud.telegram.instructName", {
+                                    defaultValue: 'Choose a name for your bot (e.g., "My App Bot")',
+                                }) }), _jsx("li", { children: t("cloud.telegram.instructUsername", {
+                                    defaultValue: 'Choose a username ending in "bot" (e.g., "myapp_bot")',
+                                }) }), _jsxs("li", { children: [t("cloud.telegram.instructCopyBefore", {
+                                        defaultValue: "Copy the",
+                                    }), " ", _jsx("strong", { children: t("cloud.telegram.instructCopyToken", {
+                                            defaultValue: "API token",
+                                        }) }), " ", t("cloud.telegram.instructCopyAfter", {
+                                        defaultValue: "BotFather gives you",
+                                    })] }), _jsx("li", { children: t("cloud.telegram.instructPaste", {
+                                    defaultValue: "Paste the token below",
+                                }) })] }) }), _jsxs("div", { className: "space-y-2", children: [_jsx(Label, { htmlFor: "botToken", children: t("cloud.telegram.botTokenLabel", { defaultValue: "Bot Token" }) }), _jsx(Input, { id: "botToken", type: "password", placeholder: "123456789:ABCdefGHIjklMNOpqrsTUVwxyz", value: botToken, onChange: (e) => setBotToken(e.target.value), onKeyDown: (e) => e.key === "Enter" && handleConnect() }), _jsx("p", { className: "text-xs text-muted-foreground", children: t("cloud.telegram.botTokenHint", {
+                                defaultValue: "Get this from @BotFather after creating your bot",
+                            }) })] }), _jsxs("div", { className: "p-4 bg-muted rounded-sm", children: [_jsx("h4", { className: "font-medium mb-2", children: t("cloud.telegram.whatYouCanDo", {
+                                defaultValue: "What you can do with Telegram automation:",
+                            }) }), _jsxs("ul", { className: "text-sm text-muted-foreground space-y-1", children: [_jsx("li", { children: t("cloud.telegram.capability1", {
+                                        defaultValue: "• Post AI-generated announcements to channels",
+                                    }) }), _jsx("li", { children: t("cloud.telegram.capability2", {
+                                        defaultValue: "• Auto-reply to messages in groups",
+                                    }) }), _jsx("li", { children: t("cloud.telegram.capability3", {
+                                        defaultValue: "• Welcome new members with custom messages",
+                                    }) }), _jsx("li", { children: t("cloud.telegram.capability4", {
+                                        defaultValue: "• Handle commands like /help and /about",
+                                    }) })] })] }), _jsx(Button, { onClick: handleConnect, disabled: isConnecting || !botToken.trim(), className: "w-full bg-[#0088cc] hover:bg-[#0077b5]", children: isConnecting ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin mr-2" }), t("cloud.telegram.connecting", {
+                                defaultValue: "Connecting...",
+                            })] })) : (_jsxs(_Fragment, { children: [_jsx(MessageSquare, { className: "h-4 w-4 mr-2" }), t("cloud.telegram.connectButton", {
+                                defaultValue: "Connect Telegram Bot",
+                            })] })) })] }) }));
+}

package/cloud/connectors/twilio-connection.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Twilio SMS & Voice cloud connector (token-credential).
+ *
+ * Ported from
+ * `@elizaos/cloud-frontend/src/dashboard/settings/_components/twilio-connection.tsx`.
+ * Raw `fetch` connect/disconnect calls are swapped for the cloud {@link api}
+ * client so the steward Bearer token is injected on native targets.
+ */
+export declare function TwilioConnection(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=twilio-connection.d.ts.map