@devicai/ui 0.52.0 → 0.54.0

package/dist/esm/components/IntegrationsModal/IntegrationsPanel.d.ts

@@ -0,0 +1,109 @@
+import { type JSX } from "react";
+import type { Integration } from "../../api/types";
+import { type DevicTheme } from "../theme";
+import { type IntegrationsState } from "./useIntegrations";
+import { type TenantMcpState } from "./useTenantMcp";
+import "./IntegrationsModal.css";
+export interface IntegrationsPanelProps {
+    /** Assistant whose offered apps are shown. */
+    assistantId: string;
+    /** Tenant of the end user (falls back to the provider's tenantId). */
+    tenantId?: string;
+    /** Subtenant of the end user (falls back to the provider's subtenantId). */
+    subtenantId?: string;
+    /** API key override (falls back to the provider's). */
+    apiKey?: string;
+    /** Base URL override (falls back to the provider's). */
+    baseUrl?: string;
+    /** Heading text, and the accessible name of the region. @default "Connected apps" */
+    title?: string;
+    /** Search field placeholder. @default "Search connected apps" */
+    searchPlaceholder?: string;
+    /** Called after an account is connected or disconnected. */
+    onChange?: (integrations: Integration[]) => void;
+    /**
+     * Colours and font. Same names as the drawer's style options, and the drawer
+     * passes its own down — a dialog opening in the default light palette over a
+     * themed application is the one thing this must not do.
+     *
+     * Embedded in a page the same applies for a different reason: the panel
+     * renders in its own variables and inherits nothing from the surface around
+     * it, so a host with its own palette has to say so here.
+     */
+    theme?: DevicTheme;
+    /**
+     * Listing loaded elsewhere (see `useIntegrations`). The drawer already has to
+     * load it to decide whether its button exists, and passing it down is what
+     * keeps opening the modal from asking for the very same thing again.
+     */
+    state?: IntegrationsState;
+    /**
+     * MCP listing loaded elsewhere, same reasoning as `state`. When absent this
+     * loads its own — and only while on screen, so an assistant that offers no
+     * MCP servers costs one refusal and nothing more.
+     */
+    mcpState?: TenantMcpState;
+    /**
+     * Whether the panel is on screen. Renders nothing and asks for nothing while
+     * false, without dropping what it already knows — which is how the modal
+     * closes without paying for the whole listing again on the next open.
+     *
+     * @default true
+     */
+    active?: boolean;
+    /**
+     * The heading, with the plug icon and the title. Turn it off to put the
+     * panel under a heading of your own.
+     *
+     * @default true
+     */
+    showHeader?: boolean;
+    /** The search field. @default true */
+    showSearch?: boolean;
+    /**
+     * The footer, with the privacy note and the Refresh button. Off, nothing else
+     * re-reads the listing on demand — keep `state` yourself and call its
+     * `refresh` if you drive it from your own control.
+     *
+     * @default true
+     */
+    showFooter?: boolean;
+    /**
+     * Shown as a close button in the header, and called when Escape is pressed.
+     * The modal is what usually passes it; embedded, only pass it if the panel
+     * is dismissible.
+     */
+    onClose?: () => void;
+    className?: string;
+    /**
+     * Render inside the modal's backdrop, in a portal on `document.body`.
+     *
+     * This is what `IntegrationsModal` is, and that component is the one to use
+     * — it exists here because both forms share every line of what follows.
+     */
+    dialog?: boolean;
+}
+/**
+ * Where the END USER of an application manages their *own* third-party
+ * accounts: the apps the developer offered to tenants of this assistant, each
+ * with the accounts this tenant has connected, and the buttons to add or
+ * remove one.
+ *
+ * The same panel serves both shapes it is asked for. `IntegrationsModal` is
+ * this with `dialog`, opened from the drawer's header; on its own it drops into
+ * a settings page as an ordinary block, which is the form a host wants when
+ * connecting apps is a section of their product rather than an interruption of
+ * a chat.
+ *
+ * Backed by `/api/v1/tenant-integrations`, which resolves the tenant
+ * server-side, so what is listed here is only ever this tenant's — never the
+ * workspace-wide accounts an admin connected, and never another tenant's.
+ *
+ * Connecting opens the provider's consent screen in a popup. The popup is
+ * opened empty *before* the request that produces its URL, because browsers
+ * only honour `window.open` inside the gesture that triggered it: opening it
+ * after the round trip is what gets it blocked. When it is blocked anyway, the
+ * URL is offered as a link instead.
+ */
+export declare function IntegrationsPanel({ assistantId, tenantId, subtenantId, apiKey, baseUrl, title, searchPlaceholder, onChange, theme, state, mcpState, active, showHeader, showSearch, showFooter, onClose, className, dialog, }: IntegrationsPanelProps): JSX.Element | null;
+export default IntegrationsPanel;

package/dist/esm/components/IntegrationsModal/IntegrationsPanel.js

@@ -0,0 +1,436 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useMemo, useEffect, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { isDarkTheme, themeVars } from '../theme.js';
+import { ConnectFieldsForm } from './ConnectFieldsForm.js';
+import { IntegrationLogo } from './IntegrationLogo.js';
+import { useIntegrations } from './useIntegrations.js';
+import { McpServersSection } from './McpServersSection.js';
+import { useTenantMcp } from './useTenantMcp.js';
+
+function PlugIcon() {
+    return (jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [jsx("path", { d: "M12 22v-5" }), jsx("path", { d: "M9 8V2" }), jsx("path", { d: "M15 8V2" }), jsx("path", { d: "M18 8v5a4 4 0 0 1-4 4h-4a4 4 0 0 1-4-4V8Z" })] }));
+}
+function SearchIcon() {
+    return (jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [jsx("circle", { cx: "11", cy: "11", r: "7" }), jsx("path", { d: "m20 20-3.5-3.5" })] }));
+}
+/** A random value tying an OAuth round trip to the window that started it. */
+function newNonce() {
+    const c = typeof crypto !== "undefined" ? crypto : undefined;
+    if (c?.randomUUID)
+        return c.randomUUID();
+    return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
+}
+/** How the card describes an app at a glance. */
+function stateOf(integration) {
+    if (integration.connected)
+        return { key: "connected", label: "Connected" };
+    if (integration.accounts.some((a) => a.needsReconnect)) {
+        return { key: "reconnect", label: "Needs reconnection" };
+    }
+    return { key: "disconnected", label: "Not connected" };
+}
+function accountLabel(account) {
+    if (!account.connectedAt)
+        return account.status.toLowerCase();
+    const when = new Date(account.connectedAt);
+    if (Number.isNaN(when.getTime()))
+        return account.status.toLowerCase();
+    return `connected ${when.toLocaleDateString()}`;
+}
+/**
+ * The scheme the server would pick, given no explicit choice: the one asking
+ * for least setup.
+ *
+ * Mirrors the engine's own preference deliberately. It is only used to decide
+ * whether to open a popup or a form before asking, and being wrong is
+ * recoverable — the form sends its scheme explicitly, and a redirect that
+ * arrives anyway is still honoured.
+ */
+function preferredScheme(schemes) {
+    if (!schemes?.length)
+        return undefined;
+    const friction = (s) => (s.composioManaged ? 0 : 1);
+    return [...schemes].sort((a, b) => friction(a) - friction(b))[0];
+}
+function matches(integration, query) {
+    const q = query.trim().toLowerCase();
+    if (!q)
+        return true;
+    return (integration.name.toLowerCase().includes(q) ||
+        integration.app.toLowerCase().includes(q) ||
+        (integration.description ?? "").toLowerCase().includes(q));
+}
+/**
+ * Where the END USER of an application manages their *own* third-party
+ * accounts: the apps the developer offered to tenants of this assistant, each
+ * with the accounts this tenant has connected, and the buttons to add or
+ * remove one.
+ *
+ * The same panel serves both shapes it is asked for. `IntegrationsModal` is
+ * this with `dialog`, opened from the drawer's header; on its own it drops into
+ * a settings page as an ordinary block, which is the form a host wants when
+ * connecting apps is a section of their product rather than an interruption of
+ * a chat.
+ *
+ * Backed by `/api/v1/tenant-integrations`, which resolves the tenant
+ * server-side, so what is listed here is only ever this tenant's — never the
+ * workspace-wide accounts an admin connected, and never another tenant's.
+ *
+ * Connecting opens the provider's consent screen in a popup. The popup is
+ * opened empty *before* the request that produces its URL, because browsers
+ * only honour `window.open` inside the gesture that triggered it: opening it
+ * after the round trip is what gets it blocked. When it is blocked anyway, the
+ * URL is offered as a link instead.
+ */
+function IntegrationsPanel({ assistantId, tenantId, subtenantId, apiKey, baseUrl, title = "Connected apps", searchPlaceholder = "Search connected apps", onChange, theme, state, mcpState, active = true, showHeader = true, showSearch = true, showFooter = true, onClose, className, dialog = false, }) {
+    // Hooks cannot be skipped, so the fallback is always built and only fetches
+    // when nobody handed a listing down.
+    const own = useIntegrations({
+        assistantId,
+        tenantId,
+        subtenantId,
+        apiKey,
+        baseUrl,
+        enabled: active && !state,
+    });
+    const { integrations, loading, error: loadError, offered: appsOffered, refresh, client, scope, } = state ?? own;
+    // Same shape as above: always built (hooks cannot be skipped), fetching only
+    // when nobody handed a listing down.
+    const ownMcp = useTenantMcp({
+        assistantId,
+        tenantId,
+        subtenantId,
+        apiKey,
+        baseUrl,
+        enabled: active && !mcpState,
+    });
+    const mcp = mcpState ?? ownMcp;
+    /** Errors from connecting or disconnecting, kept apart from load failures. */
+    const [actionError, setActionError] = useState(null);
+    // An assistant may offer MCP servers and no apps at all, and then the apps
+    // endpoint answers "not for you" — an ordinary answer, not a failure. Showing
+    // it would put a red panel above a section that is working perfectly. The
+    // refusal is still surfaced when there is nothing else on offer, because then
+    // an empty dialog with no explanation is worse.
+    const appsRefusalIsNoise = !appsOffered && mcp.offered;
+    const error = actionError ?? (appsRefusalIsNoise ? null : loadError);
+    /** App slug with a connect/disconnect in flight, so only its card is busy. */
+    const [busyApp, setBusyApp] = useState(null);
+    /** Authorization URL surfaced as a link when the popup was blocked. */
+    const [blockedUrl, setBlockedUrl] = useState(null);
+    /** The app whose credentials are being asked for, and every way it can be
+     *  connected. `setup` is present when the server named what was missing. */
+    const [setupPrompt, setSetupPrompt] = useState(null);
+    /**
+     * How each offered app can be connected, read once the listing arrives.
+     *
+     * Loaded ahead of the click rather than on it: knowing whether an app needs
+     * a browser is what decides between opening a popup and opening a form, and
+     * that decision has to be made *inside* the user's gesture — a popup opened
+     * after an await is blocked.
+     */
+    const [authByApp, setAuthByApp] = useState({});
+    /** Failure from the last submit, shown inside the credentials dialog. */
+    const [formError, setFormError] = useState(null);
+    const [query, setQuery] = useState("");
+    const visible = useMemo(() => integrations.filter((i) => matches(i, query)), [integrations, query]);
+    // Resolved from the listing rather than stored in the prompt: the dialog
+    // stays open across a refresh, and a copy taken when it opened would go
+    // stale — showing "Not connected" on an app that just connected.
+    const promptIntegration = useMemo(() => integrations.find((i) => i.app === setupPrompt?.app), [integrations, setupPrompt?.app]);
+    // One request per offered app, once the listing is in. They are small,
+    // cached server-side, and nothing waits on them: a click that lands before
+    // its answer simply falls back to asking the server, as it did before.
+    useEffect(() => {
+        if (!active || !client || !integrations.length)
+            return;
+        let cancelled = false;
+        void Promise.all(integrations.map(async (integration) => {
+            try {
+                const { schemes } = await client.getIntegrationAuth(integration.app, scope);
+                if (!cancelled && schemes?.length) {
+                    setAuthByApp((prev) => ({ ...prev, [integration.app]: schemes }));
+                }
+            }
+            catch {
+                // Not knowing is survivable — the click path handles it.
+            }
+        }));
+        return () => {
+            cancelled = true;
+        };
+    }, [active, client, integrations, scope]);
+    // Report the listing without making the caller's identity part of the
+    // dependency: an inline arrow would fire this on every render.
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    useEffect(() => {
+        if (integrations.length)
+            onChangeRef.current?.(integrations);
+    }, [integrations]);
+    // Reopening starts clean, and re-reads: accounts may have been connected or
+    // revoked elsewhere since the last look.
+    const wasOpenRef = useRef(false);
+    const openedBeforeRef = useRef(false);
+    useEffect(() => {
+        if (active && !wasOpenRef.current) {
+            setBlockedUrl(null);
+            setActionError(null);
+            setSetupPrompt(null);
+            setQuery("");
+            // The very first open of an uncontrolled modal is already covered by the
+            // hook switching on; asking again here would double every first open.
+            if (state || openedBeforeRef.current)
+                void refresh();
+            if (mcpState || openedBeforeRef.current)
+                void mcp.refresh();
+            openedBeforeRef.current = true;
+        }
+        wasOpenRef.current = active;
+        // `state.refresh` is stable per scope; re-running on every render of the
+        // owner is exactly what this must not do.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [active]);
+    // Escape closes — the credentials dialog first, when one is open. Closing
+    // everything from under a half-typed key would be its own small disaster.
+    //
+    // Embedded in a page there is usually nothing to close after that, and the
+    // key is left alone rather than swallowed: a panel that is part of the page
+    // has no business answering for the whole document.
+    useEffect(() => {
+        if (!active)
+            return;
+        const onKey = (e) => {
+            if (e.key !== "Escape")
+                return;
+            if (setupPrompt) {
+                setSetupPrompt(null);
+                setFormError(null);
+                return;
+            }
+            onClose?.();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [active, onClose, setupPrompt]);
+    /** The round trip currently in flight, if any. */
+    const pendingRef = useRef(null);
+    const popupRef = useRef(null);
+    const pollRef = useRef(null);
+    const finishConnect = useCallback(() => {
+        if (pollRef.current !== null) {
+            window.clearInterval(pollRef.current);
+            pollRef.current = null;
+        }
+        pendingRef.current = null;
+        popupRef.current = null;
+        setBusyApp(null);
+        void refresh(true);
+    }, [refresh]);
+    // The callback page tells us it is done. Treat the message as a nudge, never
+    // as the result: what is displayed comes from re-reading the server, so a
+    // forged message can at worst cause one redundant fetch.
+    useEffect(() => {
+        if (!active)
+            return;
+        const onMessage = (event) => {
+            const data = event.data;
+            if (!data || data.source !== "devic")
+                return;
+            if (data.type !== "integration-connected")
+                return;
+            const pending = pendingRef.current;
+            if (!pending || data.returnTo !== pending.returnTo)
+                return;
+            popupRef.current?.close();
+            finishConnect();
+        };
+        window.addEventListener("message", onMessage);
+        return () => window.removeEventListener("message", onMessage);
+    }, [active, finishConnect]);
+    // Stop polling if the modal goes away mid-flow.
+    useEffect(() => () => {
+        if (pollRef.current !== null)
+            window.clearInterval(pollRef.current);
+    }, []);
+    /**
+     * Connects an app, asking for credentials only if it needs them.
+     *
+     * Optimistic: the request goes out first, and the form appears only when the
+     * server answers that something is missing. Most apps take an API key rather
+     * than an OAuth round trip, so this is the path that used to fail outright.
+     */
+    const handleConnect = async (integration, values) => {
+        if (!client || (busyApp && busyApp !== integration.app))
+            return;
+        setActionError(null);
+        setBlockedUrl(null);
+        // Ask before doing anything when the app is known to take credentials and
+        // no browser is involved. Connecting first would flash an empty popup and
+        // spend a request that can only fail — the user has not been asked yet.
+        const known = authByApp[integration.app];
+        const scheme = values
+            ? known?.find((s) => s.mode === values.authScheme)
+            : preferredScheme(known);
+        if (!values && scheme && !scheme.redirect && scheme.accountFields.length) {
+            setSetupPrompt({ app: integration.app, schemes: known });
+            return;
+        }
+        setBusyApp(integration.app);
+        const nonce = newNonce();
+        const returnTo = `${window.location.origin}/?devic_oauth=${nonce}`;
+        // Opened empty inside the click, navigated once the URL is known — browsers
+        // only honour `window.open` inside the gesture that triggered it. Skipped
+        // when the scheme in hand needs no browser at all.
+        const popup = scheme && !scheme.redirect
+            ? null
+            : window.open("", "devic-oauth", "width=520,height=680,menubar=no,toolbar=no");
+        try {
+            const { connected, authorizationUrl } = await client.connectIntegration(integration.app, { ...scope, returnTo, ...values });
+            // Nothing to authorise: the key the user typed is the account. Close the
+            // window that was opened in case it was needed and re-read the listing.
+            if (connected || !authorizationUrl) {
+                popup?.close();
+                setSetupPrompt(null);
+                finishConnect();
+                return;
+            }
+            pendingRef.current = { app: integration.app, returnTo };
+            setSetupPrompt(null);
+            if (popup && !popup.closed) {
+                popupRef.current = popup;
+                popup.location.href = authorizationUrl;
+                // The user may close the popup without the callback ever posting back
+                // — a cancelled consent screen, or a provider that lands somewhere
+                // else. Watching for the close is what keeps the card from staying
+                // busy forever.
+                pollRef.current = window.setInterval(() => {
+                    if (popup.closed)
+                        finishConnect();
+                }, 700);
+            }
+            else {
+                // Blocked (Safari, in-app browsers, extensions): hand over the URL.
+                setBlockedUrl({ app: integration.app, url: authorizationUrl });
+                setBusyApp(null);
+            }
+        }
+        catch (err) {
+            popup?.close();
+            pendingRef.current = null;
+            setBusyApp(null);
+            const message = err instanceof Error ? err.message : String(err);
+            const setup = err?.setupRequired;
+            if (setup) {
+                await openSetupForm(integration, setup);
+                return;
+            }
+            // While the form is up its own failures belong in it, next to the fields
+            // that caused them — a message behind a dialog is a message nobody reads.
+            if (setupPrompt?.app === integration.app)
+                setFormError(message);
+            else
+                setActionError(message);
+        }
+    };
+    /**
+     * Opens the credentials form for an app that needs one.
+     *
+     * `stage: "app"` is not the end user's to fix — it means the developer who
+     * embedded this widget has not registered an application with the provider
+     * yet. Asking a stranger for someone else's client secret would be both
+     * useless and a good way to teach them to hand credentials to a form, so it
+     * is reported as unavailable instead.
+     */
+    const openSetupForm = async (integration, setup) => {
+        if (setup.stage === "app") {
+            setActionError(`${integration.name} is not available yet — it still needs to be set up ` +
+                `by the app's provider.`);
+            return;
+        }
+        try {
+            const schemes = authByApp[integration.app] ??
+                (await client.getIntegrationAuth(integration.app, scope)).schemes;
+            if (!schemes.length)
+                throw new Error(setup.message);
+            setAuthByApp((prev) => ({ ...prev, [integration.app]: schemes }));
+            setFormError(null);
+            setSetupPrompt({ app: integration.app, setup, schemes });
+        }
+        catch (err) {
+            setActionError(err instanceof Error ? err.message : String(err));
+        }
+    };
+    const handleDisconnect = async (app, account) => {
+        if (!client || busyApp)
+            return;
+        setBusyApp(app);
+        setActionError(null);
+        try {
+            await client.disconnectIntegration(account.id, scope);
+            await refresh(true);
+        }
+        catch (err) {
+            setActionError(err instanceof Error ? err.message : String(err));
+        }
+        finally {
+            setBusyApp(null);
+        }
+    };
+    if (!active)
+        return null;
+    const dark = isDarkTheme(theme);
+    const panel = (
+    // The variables go here rather than on the backdrop, because this is the
+    // one element both shapes have: as a dialog it renders in a portal that
+    // inherits nothing from the drawer that opened it, and embedded it must
+    // not inherit the host's either — the colours it draws in are the ones
+    // `theme` names, and nothing else.
+    jsxs("div", { className: [
+            "devic-int-panel",
+            dialog ? "devic-int-modal" : "",
+            className ?? "",
+        ]
+            .filter(Boolean)
+            .join(" "), style: themeVars(theme), "data-dark": dark, role: dialog ? "dialog" : "region", "aria-modal": dialog || undefined, "aria-label": title, onClick: dialog ? (e) => e.stopPropagation() : undefined, children: [showHeader && (jsxs("div", { className: "devic-int-header", children: [jsxs("h3", { className: "devic-int-title", children: [jsx(PlugIcon, {}), title] }), onClose && (jsx("button", { className: "devic-int-close", onClick: onClose, type: "button", "aria-label": "Close", children: "\u00D7" }))] })), showSearch && (jsxs("div", { className: "devic-int-search", children: [jsx(SearchIcon, {}), jsx("input", { type: "search", value: query, onChange: (e) => setQuery(e.target.value), placeholder: searchPlaceholder, "aria-label": searchPlaceholder, autoComplete: "off" })] })), jsxs("div", { className: "devic-int-body", children: [error && jsx("div", { className: "devic-int-error", children: error }), blockedUrl && (jsxs("div", { className: "devic-int-notice", children: ["Your browser blocked the pop-up.", " ", jsx("a", { href: blockedUrl.url, target: "_blank", rel: "noopener noreferrer", onClick: () => {
+                                    pendingRef.current = null;
+                                    setBlockedUrl(null);
+                                }, children: "Open the authorisation page" }), " ", "and come back \u2014 then use Refresh."] })), loading && integrations.length === 0 ? (
+                    // Silent while the MCP section is what this assistant offers: a
+                    // spinner labelled "Loading apps" over a list of servers describes
+                    // something that is not happening.
+                    appsRefusalIsNoise ? null : (jsx("div", { className: "devic-int-loading", children: "Loading apps\u2026" }))) : integrations.length === 0 ? (
+                    // Silent when MCP servers are the whole offer: "no apps available"
+                    // over a list of servers reads as a broken panel.
+                    mcp.offered ? null : (jsx("div", { className: "devic-int-empty", children: "No apps available here yet." }))) : visible.length === 0 ? (jsxs("div", { className: "devic-int-empty", children: ["No apps match \u201C", query.trim(), "\u201D."] })) : (jsx("div", { className: "devic-int-grid", children: visible.map((integration) => {
+                            const cardState = stateOf(integration);
+                            const busy = busyApp === integration.app;
+                            return (jsxs("div", { className: "devic-int-card", "data-state": cardState.key, children: [jsxs("div", { className: "devic-int-card-head", children: [jsx(IntegrationLogo, { integration: integration }), jsxs("span", { className: "devic-int-state", children: [jsx("span", { className: "devic-int-dot", "data-ok": cardState.key === "connected", "data-off": cardState.key === "disconnected", "aria-hidden": "true" }), cardState.label] })] }), jsx("div", { className: "devic-int-name", title: integration.name, children: integration.name }), integration.description && (jsx("div", { className: "devic-int-description", title: integration.description, children: integration.description })), jsx("button", { type: "button", className: `devic-int-btn devic-int-btn-block${cardState.key === "connected"
+                                            ? ""
+                                            : " devic-int-btn-primary"}`, onClick: () => handleConnect(integration), disabled: busy || !!busyApp, title: cardState.key === "connected"
+                                            ? "Sign in with a different account. The one connected now is replaced."
+                                            : undefined, children: busy
+                                            ? "Waiting…"
+                                            : cardState.key === "disconnected"
+                                                ? "Connect"
+                                                : cardState.key === "reconnect"
+                                                    ? "Reconnect"
+                                                    : // Not "Add account": one account per app is all
+                                                        // the assistant can use, and connecting again
+                                                        // retires the previous one.
+                                                        "Switch account" }), integration.accounts.length > 0 && (jsx("ul", { className: "devic-int-accounts", children: integration.accounts.map((account) => (jsxs("li", { className: "devic-int-account", children: [jsx("span", { className: "devic-int-dot", "data-ok": !account.needsReconnect, "aria-hidden": "true" }), jsxs("span", { className: "devic-int-account-label", children: [accountLabel(account), account.needsReconnect && (jsxs("span", { className: "devic-int-account-warn", children: [" ", "\u00B7 reconnect required"] }))] }), jsx("button", { type: "button", className: "devic-int-unlink", onClick: () => handleDisconnect(integration.app, account), disabled: !!busyApp, title: "Disconnect this account", "aria-label": `Disconnect ${integration.name}`, children: "\u00D7" })] }, account.id))) }))] }, integration.app));
+                        }) }))] }), mcp.offered && (jsx("div", { className: "devic-int-body devic-int-body-secondary", children: jsx(McpServersSection, { state: mcp, theme: theme, query: query }) })), showFooter && (jsxs("div", { className: "devic-int-footer", children: [jsx("span", { children: "Only you can see and use the accounts you connect here." }), jsx("button", { type: "button", className: "devic-int-btn devic-int-btn-small", onClick: () => {
+                            void refresh(true);
+                            void mcp.refresh();
+                        }, disabled: loading || mcp.loading || !!busyApp, children: "Refresh" })] })), setupPrompt && promptIntegration && (jsx(ConnectFieldsForm, { integration: promptIntegration, schemes: setupPrompt.schemes, initialScheme: setupPrompt.setup?.authScheme, onlyFields: setupPrompt.setup?.fields, submitting: busyApp === setupPrompt.app, error: formError, theme: theme, onCancel: () => {
+                    setSetupPrompt(null);
+                    setFormError(null);
+                }, onSubmit: (values) => handleConnect(promptIntegration, values) }))] }));
+    if (!dialog)
+        return panel;
+    return createPortal(jsx("div", { className: "devic-int-overlay", onClick: onClose, children: panel }), document.body);
+}
+
+export { IntegrationsPanel };
+//# sourceMappingURL=IntegrationsPanel.js.map