@vertesia/ui 1.4.0-dev.20260615.051508Z → 1.4.0-dev.20260629.130134Z

package/src/features/oauth/McpConnectionsDialog.tsx

@@ -0,0 +1,142 @@
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { Link2, Link2Off } from 'lucide-react';
+import { Button, Modal, ModalBody, ModalTitle, Spinner, Switch, VTooltip } from '../../core/index.js';
+import { RemoteMcpConnectionButton } from './RemoteMcpConnectionButton.js';
+import { isGroupDisabled, type McpConnectionGroup, toggleGroupDisabled } from './useMcpConnections.js';
+
+export interface McpConnectionsDialogProps {
+    isOpen: boolean;
+    onClose: () => void;
+    groups: McpConnectionGroup[];
+    loading: boolean;
+    /** True while group-level OAuth status is being fetched after the MCP rows are known. */
+    statusLoading?: boolean;
+    /** Refresh connection status after connect/disconnect. */
+    reload: () => void;
+    /** Collection ids deactivated for this conversation. `undefined`/empty ⇒ all active. */
+    disabledCollections?: string[];
+    /** Emits the next disabled-collection list when a server is toggled. Omit for read-only. */
+    onChange?: (disabled: string[]) => void;
+    /** Called after a successful connect/disconnect (e.g. to trigger tool re-discovery). */
+    onConnectionChange?: () => void;
+    /** Read-only: show status only, no toggles or connect/disconnect controls. */
+    readOnly?: boolean;
+}
+
+/**
+ * Dialog to manage the MCP servers available to an agent conversation.
+ * Each server can be connected/disconnected (OAuth) and activated/deactivated for this run.
+ */
+export function McpConnectionsDialog({
+    isOpen,
+    onClose,
+    groups,
+    loading,
+    statusLoading = false,
+    reload,
+    disabledCollections,
+    onChange,
+    onConnectionChange,
+    readOnly = false,
+}: McpConnectionsDialogProps) {
+    const { t } = useUITranslation();
+
+    const handleAuthChange = () => {
+        reload();
+        onConnectionChange?.();
+    };
+
+    return (
+        <Modal isOpen={isOpen} onClose={onClose} size="md" className="max-w-[92vw] sm:max-w-[620px] lg:max-w-[620px]">
+            <ModalTitle>{t('mcpConnections.title')}</ModalTitle>
+            <ModalBody>
+                <p className="mb-4 text-sm text-muted">{t('mcpConnections.subtitle')}</p>
+                {loading ? (
+                    <div className="flex items-center justify-center py-8">
+                        <Spinner className="size-5" />
+                    </div>
+                ) : groups.length === 0 ? (
+                    <div className="py-8 text-center text-sm text-muted">{t('mcpConnections.empty')}</div>
+                ) : (
+                    <div className="space-y-1">
+                        {groups.map((group) => {
+                            const active = !isGroupDisabled(group, disabledCollections);
+                            const connected = group.authStatus?.authenticated === true;
+                            const StatusIcon = connected ? Link2 : Link2Off;
+                            return (
+                                <div key={group.key} className="flex items-center justify-between gap-3 py-3">
+                                    <div className="flex min-w-0 items-center gap-2">
+                                        <StatusIcon
+                                            className={`size-4 shrink-0 ${connected ? 'text-success' : 'text-muted'}`}
+                                            aria-hidden="true"
+                                        />
+                                        <VTooltip
+                                            description={
+                                                <div className="space-y-0.5">
+                                                    <div className="font-medium">{group.appName}</div>
+                                                    {group.memberNames.length > 1 && (
+                                                        <div className="text-xs text-muted">
+                                                            {group.memberNames.join(' · ')}
+                                                        </div>
+                                                    )}
+                                                </div>
+                                            }
+                                            placement="top"
+                                            asChild
+                                        >
+                                            <span
+                                                className={`truncate ${active ? 'text-foreground' : 'text-muted line-through'}`}
+                                            >
+                                                {group.label}
+                                            </span>
+                                        </VTooltip>
+                                    </div>
+                                    <div className="flex shrink-0 items-center gap-3">
+                                        {statusLoading && !group.authStatus ? (
+                                            <Button
+                                                variant="outline"
+                                                size="sm"
+                                                disabled
+                                                className="h-6 w-32 justify-center px-2 text-xs"
+                                                aria-label={t('mcpConnections.checkingStatus')}
+                                                title={t('mcpConnections.checkingStatus')}
+                                            >
+                                                <Spinner className="size-3" />
+                                            </Button>
+                                        ) : (
+                                            <RemoteMcpConnectionButton
+                                                appId={group.appId}
+                                                collectionId={group.representativeId}
+                                                collectionName={group.label}
+                                                authenticated={group.authStatus?.authenticated}
+                                                onAuthChange={handleAuthChange}
+                                                variant="compact"
+                                                showDisconnect
+                                                readOnly={readOnly}
+                                            />
+                                        )}
+                                        {onChange && (
+                                            <Switch
+                                                size="sm"
+                                                value={active}
+                                                onChange={(checked) =>
+                                                    onChange(toggleGroupDisabled(group, disabledCollections, checked))
+                                                }
+                                                disabled={readOnly}
+                                                aria-label={
+                                                    active
+                                                        ? t('mcpConnections.deactivateAria', { name: group.label })
+                                                        : t('mcpConnections.activateAria', { name: group.label })
+                                                }
+                                            />
+                                        )}
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+                )}
+            </ModalBody>
+        </Modal>
+    );
+}

package/src/features/oauth/RemoteMcpConnectionButton.tsx

@@ -1,6 +1,6 @@
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
-import { CheckCircle2, ExternalLink, ShieldAlertIcon } from 'lucide-react';
+import { CheckCircle2, Link2, ShieldAlertIcon, Unlink2 } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { Button, Spinner } from '../../core/index.js';
 import { useOAuthPopup } from './useOAuthPopup.js';
@@ -51,18 +51,23 @@ export function RemoteMcpConnectionButton({
     const { client } = useUserSession();
     const { t } = useUITranslation();
     const [status, setStatus] = useState<OAuthStatus | null>(null);
-    const [loading, setLoading] = useState(providedAuthenticated === undefined);
+    const [loading, setLoading] = useState(providedAuthenticated === undefined && !readOnly);
     const [authenticating, setAuthenticating] = useState(false);
     const [disconnecting, setDisconnecting] = useState(false);
 
     const authenticated = providedAuthenticated ?? status?.authenticated ?? false;
     const displayName = collectionName ?? collectionId;
+    const compactActionClassName = 'h-6 w-32 justify-center px-2 text-xs';
 
     const loadStatus = useCallback(async () => {
         if (providedAuthenticated !== undefined) {
             setLoading(false);
             return;
         }
+        if (readOnly) {
+            setLoading(false);
+            return;
+        }
 
         try {
             setLoading(true);
@@ -73,7 +78,7 @@ export function RemoteMcpConnectionButton({
         } finally {
             setLoading(false);
         }
-    }, [client, appId, collectionId, providedAuthenticated]);
+    }, [client, appId, collectionId, providedAuthenticated, readOnly]);
 
     useEffect(() => {
         void loadStatus();
@@ -132,6 +137,21 @@ export function RemoteMcpConnectionButton({
     };
 
     if (loading) {
+        if (variant === 'compact') {
+            return (
+                <Button
+                    variant="outline"
+                    size="sm"
+                    disabled
+                    className={compactActionClassName}
+                    aria-label={t('mcpConnections.checkingStatus')}
+                    title={t('mcpConnections.checkingStatus')}
+                >
+                    <Spinner className="size-3" />
+                </Button>
+            );
+        }
+
         return (
             <div className="flex items-center gap-2 text-sm">
                 <Spinner className="size-4" />
@@ -182,19 +202,22 @@ export function RemoteMcpConnectionButton({
             return (
                 <div className="flex items-center gap-2">
                     {showLabel && <span className="font-medium text-xs text-foreground">{displayName}:</span>}
-                    <div className="flex items-center gap-1 text-success">
-                        <CheckCircle2 className="size-3" />
-                        <span className="text-xs">{t('mcpOAuth.connected')}</span>
-                    </div>
                     {!readOnly && showDisconnect && (
                         <Button
-                            variant="ghost"
+                            variant="outline"
                             size="sm"
                             onClick={handleDisconnect}
                             disabled={disconnecting}
-                            className="h-6 px-2 text-xs"
+                            className={compactActionClassName}
                         >
-                            {disconnecting ? <Spinner className="size-3" /> : t('mcpOAuth.disconnect')}
+                            {disconnecting ? (
+                                <Spinner className="size-3" />
+                            ) : (
+                                <>
+                                    <Unlink2 className="size-3" />
+                                    <span>{t('mcpOAuth.disconnect')}</span>
+                                </>
+                            )}
                         </Button>
                     )}
                 </div>
@@ -229,7 +252,7 @@ export function RemoteMcpConnectionButton({
                     size="sm"
                     onClick={handleConnect}
                     disabled={authenticating}
-                    className="h-6 px-2 text-xs"
+                    className={compactActionClassName}
                 >
                     {authenticating ? (
                         <>
@@ -238,7 +261,7 @@ export function RemoteMcpConnectionButton({
                         </>
                     ) : (
                         <>
-                            <ExternalLink className="size-3 me-1" />
+                            <Link2 className="size-3" />
                             <span>{t('mcpOAuth.connect')}</span>
                         </>
                     )}
@@ -248,7 +271,7 @@ export function RemoteMcpConnectionButton({
     }
 
     return (
-        <Button variant="outline" size="sm" onClick={handleConnect} disabled={authenticating}>
+        <Button variant="outline" size="sm" onClick={handleConnect} disabled={readOnly || authenticating}>
             {authenticating ? (
                 <>
                     <Spinner className="size-4" />
@@ -256,7 +279,7 @@ export function RemoteMcpConnectionButton({
                 </>
             ) : (
                 <>
-                    <ExternalLink className="size-4 me-1" />
+                    <Link2 className="size-4 me-1" />
                     <span>{t('mcpOAuth.connect')}</span>
                 </>
             )}

package/src/features/oauth/index.ts

@@ -1,3 +1,6 @@
+export * from './McpConnectionsButton.js';
+export * from './McpConnectionsDialog.js';
 export * from './OAuthProviderConnectButton.js';
 export * from './RemoteMcpConnectionButton.js';
+export * from './useMcpConnections.js';
 export * from './useOAuthPopup.js';

package/src/features/oauth/useMcpConnections.test.ts

@@ -0,0 +1,94 @@
+import { describe, expect, it } from 'vitest';
+import {
+    countConnectedActiveGroups,
+    getConnectedActiveGroupLabels,
+    isGroupDisabled,
+    type McpConnectionGroup,
+    toggleGroupDisabled,
+} from './useMcpConnections.js';
+
+function group(memberIds: string[], authenticated?: boolean, label = 'Server'): McpConnectionGroup {
+    return {
+        key: `k:${memberIds.join(',')}`,
+        appId: 'app1',
+        appName: 'App',
+        label,
+        representativeId: memberIds[0],
+        memberIds,
+        memberNames: memberIds,
+        authStatus:
+            authenticated === undefined
+                ? undefined
+                : {
+                      authenticated,
+                      collection_id: memberIds[0],
+                      collection_name: memberIds[0],
+                      mcp_server_url: 'https://mcp.example.com',
+                  },
+    };
+}
+
+describe('isGroupDisabled', () => {
+    it('is active (not disabled) when the disabled set is empty or undefined', () => {
+        const g = group(['a']);
+        expect(isGroupDisabled(g, undefined)).toBe(false);
+        expect(isGroupDisabled(g, [])).toBe(false);
+    });
+
+    it('is disabled only when every member id is in the disabled set', () => {
+        const g = group(['a', 'b']);
+        expect(isGroupDisabled(g, ['a'])).toBe(false);
+        expect(isGroupDisabled(g, ['a', 'b'])).toBe(true);
+    });
+});
+
+describe('countConnectedActiveGroups', () => {
+    it('counts only connected groups that are not disabled', () => {
+        expect(
+            countConnectedActiveGroups(
+                [
+                    group(['connected'], true),
+                    group(['not-connected'], false),
+                    group(['unknown-status']),
+                    group(['connected-disabled'], true),
+                ],
+                ['connected-disabled'],
+            ),
+        ).toBe(1);
+    });
+});
+
+describe('getConnectedActiveGroupLabels', () => {
+    it('returns only connected groups that are not disabled', () => {
+        expect(
+            getConnectedActiveGroupLabels(
+                [
+                    group(['jira'], true, 'Jira'),
+                    group(['github'], false, 'GitHub'),
+                    group(['miro'], true, 'Miro'),
+                    group(['linear'], true, 'Linear'),
+                ],
+                ['linear'],
+            ),
+        ).toEqual(['Jira', 'Miro']);
+    });
+});
+
+describe('toggleGroupDisabled', () => {
+    it('disabling adds all member ids', () => {
+        const g = group(['a', 'b']);
+        expect(toggleGroupDisabled(g, undefined, /* active */ false).sort()).toEqual(['a', 'b']);
+    });
+
+    it('enabling removes all member ids and keeps others', () => {
+        const g = group(['a', 'b']);
+        expect(toggleGroupDisabled(g, ['a', 'b', 'c'], /* active */ true)).toEqual(['c']);
+    });
+
+    it('round-trips back to the original set', () => {
+        const g = group(['a']);
+        const disabled = toggleGroupDisabled(g, [], false);
+        expect(disabled).toEqual(['a']);
+        expect(toggleGroupDisabled(g, disabled, true)).toEqual([]);
+    });
+});

package/src/features/oauth/useMcpConnections.ts

@@ -0,0 +1,210 @@
+import {
+    type AppInstallationWithManifest,
+    type MCPToolCollectionObject,
+    normalizeToolCollection,
+    type OAuthAuthStatus,
+} from '@vertesia/common';
+import { useUserSession } from '@vertesia/ui/session';
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+/**
+ * A group of MCP tool collections that share a single OAuth connection.
+ * Connection/activation operations act on the whole group.
+ */
+export interface McpConnectionGroup {
+    key: string;
+    appId: string;
+    appName: string;
+    /** Display label: provider display_name, oauth_app name, or individual collection name */
+    label: string;
+    /** Representative collection ID used for OAuth operations (all in group share the same OAuth provider) */
+    representativeId: string;
+    /** All collection IDs in this group (used for per-conversation activation toggles) */
+    memberIds: string[];
+    /** Names of all collections in this group (for tooltip when > 1) */
+    memberNames: string[];
+    authStatus?: OAuthAuthStatus;
+}
+
+/**
+ * Loads the project's installed MCP tool collections that require OAuth, grouped by their
+ * shared OAuth provider/app, and resolves each group's current connection status.
+ *
+ * Shared by the MCP connections button (badge count) and dialog (list) so the data is
+ * fetched once and refreshed together after connect/disconnect.
+ */
+export function useMcpConnections() {
+    const { client } = useUserSession();
+    const [groups, setGroups] = useState<McpConnectionGroup[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [statusLoading, setStatusLoading] = useState(false);
+    const reloadIdRef = useRef(0);
+
+    const reload = useCallback(async () => {
+        const reloadId = reloadIdRef.current + 1;
+        reloadIdRef.current = reloadId;
+        setLoading(true);
+        setStatusLoading(false);
+        try {
+            const apps = await client.apps.getInstalledApps('tools');
+            const allGroups: McpConnectionGroup[] = [];
+
+            for (const app of apps) {
+                const inst = app as AppInstallationWithManifest;
+                const oauthIds = inst.oauth_collection_ids ?? [];
+                const manifestProviders = inst.manifest.oauth_providers ?? {};
+
+                if (!inst.manifest.tool_collections) continue;
+
+                const oauthCollections = inst.manifest.tool_collections
+                    .map((c) => normalizeToolCollection(c))
+                    .filter((c): c is MCPToolCollectionObject => c.type === 'mcp' && oauthIds.includes(c.id));
+
+                const providerMap = new Map<string, MCPToolCollectionObject[]>();
+                const oauthAppMap = new Map<string, MCPToolCollectionObject[]>();
+                const individualCols: MCPToolCollectionObject[] = [];
+
+                for (const col of oauthCollections) {
+                    if (col.oauth_provider) {
+                        const g = providerMap.get(col.oauth_provider) ?? [];
+                        g.push(col);
+                        providerMap.set(col.oauth_provider, g);
+                    } else if (col.oauth_app) {
+                        const g = oauthAppMap.get(col.oauth_app) ?? [];
+                        g.push(col);
+                        oauthAppMap.set(col.oauth_app, g);
+                    } else {
+                        individualCols.push(col);
+                    }
+                }
+
+                for (const [providerKey, cols] of providerMap) {
+                    allGroups.push({
+                        key: `${inst.id}:provider:${providerKey}`,
+                        appId: inst.id,
+                        appName: inst.manifest.title || inst.manifest.name,
+                        label: manifestProviders[providerKey]?.display_name || providerKey,
+                        representativeId: cols[0].id,
+                        memberIds: cols.map((c) => c.id),
+                        memberNames: cols.map((c) => c.name),
+                    });
+                }
+
+                for (const [oauthApp, cols] of oauthAppMap) {
+                    allGroups.push({
+                        key: `${inst.id}:oauthapp:${oauthApp}`,
+                        appId: inst.id,
+                        appName: inst.manifest.title || inst.manifest.name,
+                        label: oauthApp,
+                        representativeId: cols[0].id,
+                        memberIds: cols.map((c) => c.id),
+                        memberNames: cols.map((c) => c.name),
+                    });
+                }
+
+                for (const col of individualCols) {
+                    allGroups.push({
+                        key: `${inst.id}:individual:${col.id}`,
+                        appId: inst.id,
+                        appName: inst.manifest.title || inst.manifest.name,
+                        label: col.name,
+                        representativeId: col.id,
+                        memberIds: [col.id],
+                        memberNames: [col.name],
+                    });
+                }
+            }
+
+            if (reloadIdRef.current !== reloadId) {
+                return;
+            }
+
+            setGroups(allGroups);
+            setLoading(false);
+
+            if (allGroups.length === 0) {
+                return;
+            }
+
+            setStatusLoading(true);
+
+            // Fetch OAuth status once per app installation; getStatus(appId) returns all collection statuses.
+            const statusRequestsByApp = new Map<string, Promise<OAuthAuthStatus[]>>();
+            const groupsWithStatus = await Promise.all(
+                allGroups.map(async (group) => {
+                    try {
+                        let statusRequest = statusRequestsByApp.get(group.appId);
+                        if (!statusRequest) {
+                            statusRequest = client.remoteMcpConnections.getStatus(group.appId);
+                            statusRequestsByApp.set(group.appId, statusRequest);
+                        }
+                        const statuses = await statusRequest;
+                        const status = statuses.find((s) => s.collection_id === group.representativeId);
+                        return { ...group, authStatus: status };
+                    } catch {
+                        return group;
+                    }
+                }),
+            );
+
+            if (reloadIdRef.current !== reloadId) {
+                return;
+            }
+
+            setGroups(groupsWithStatus);
+        } catch (error) {
+            if (reloadIdRef.current === reloadId) {
+                console.error('Failed to load MCP tool collections:', error);
+                setGroups([]);
+            }
+        } finally {
+            if (reloadIdRef.current === reloadId) {
+                setLoading(false);
+                setStatusLoading(false);
+            }
+        }
+    }, [client]);
+
+    useEffect(() => {
+        void reload();
+    }, [reload]);
+
+    return { groups, loading, statusLoading, reload };
+}
+
+/** True when every collection in the group is present in the disabled set. */
+export function isGroupDisabled(group: McpConnectionGroup, disabled?: string[]): boolean {
+    if (!disabled?.length) return false;
+    return group.memberIds.every((id) => disabled.includes(id));
+}
+
+/**
+ * Toggle a group's activation, returning the next disabled-collection list.
+ * Disabling adds all member ids; enabling removes them.
+ */
+export function toggleGroupDisabled(
+    group: McpConnectionGroup,
+    disabled: string[] | undefined,
+    active: boolean,
+): string[] {
+    const current = new Set(disabled ?? []);
+    if (active) {
+        for (const id of group.memberIds) current.delete(id);
+    } else {
+        for (const id of group.memberIds) current.add(id);
+    }
+    return Array.from(current);
+}
+
+/** Count connected MCP groups that are enabled for the current conversation. */
+export function countConnectedActiveGroups(groups: McpConnectionGroup[], disabled?: string[]): number {
+    return groups.filter((group) => group.authStatus?.authenticated === true && !isGroupDisabled(group, disabled))
+        .length;
+}
+
+/** Names of connected MCP groups that are enabled for the current conversation. */
+export function getConnectedActiveGroupLabels(groups: McpConnectionGroup[], disabled?: string[]): string[] {
+    return groups
+        .filter((group) => group.authStatus?.authenticated === true && !isGroupDisabled(group, disabled))
+        .map((group) => group.label);
+}