@vertesia/ui 1.5.0-dev.20260901.045442Z → 1.5.0-dev.20260905.011013Z

package/src/features/agent/chat/DocumentsTab.tsx

@@ -0,0 +1,124 @@
+import { Button, Input, VTooltip } from '@vertesia/ui/core';
+import { useUITranslation } from '@vertesia/ui/i18n';
+import { NavLink } from '@vertesia/ui/router';
+import { ExternalLinkIcon, FileTextIcon } from 'lucide-react';
+import React, { useCallback, useId, useMemo, useState } from 'react';
+import { DocumentPanel } from './DocumentPanel.js';
+import type { OpenDocument } from './types/document.js';
+
+/** Below this many documents the list is short enough that a filter box is just noise. */
+const FILTER_VISIBILITY_THRESHOLD = 5;
+
+interface DocumentsTabProps {
+    documents: OpenDocument[];
+    /** Document shown in the detail view; `null` shows the list. */
+    activeDocumentId: string | null;
+    onSelectDocument: (id: string | null) => void;
+    onUpdateDocumentTitle?: (id: string, title: string) => void;
+    refreshKey: number;
+    runId?: string;
+}
+
+function DocumentsTabComponent({
+    documents,
+    activeDocumentId,
+    onSelectDocument,
+    onUpdateDocumentTitle,
+    refreshKey,
+    runId,
+}: DocumentsTabProps) {
+    const { t } = useUITranslation();
+    const [filterValue, setFilterValue] = useState('');
+    const filterInputId = useId();
+
+    const normalizedFilterValue = filterValue.trim().toLocaleLowerCase();
+    const filteredDocuments = useMemo(() => {
+        if (!normalizedFilterValue) return documents;
+        return documents.filter((doc) => doc.title.toLocaleLowerCase().includes(normalizedFilterValue));
+    }, [documents, normalizedFilterValue]);
+
+    const handleBack = useCallback(() => onSelectDocument(null), [onSelectDocument]);
+
+    const activeDocument = activeDocumentId ? documents.find((doc) => doc.id === activeDocumentId) : undefined;
+
+    if (activeDocumentId) {
+        return (
+            <DocumentPanel
+                documentId={activeDocumentId}
+                title={activeDocument?.title}
+                onBack={handleBack}
+                onUpdateDocumentTitle={onUpdateDocumentTitle}
+                refreshKey={refreshKey}
+                runId={runId}
+            />
+        );
+    }
+
+    return (
+        <div className="flex flex-col h-full">
+            {/* Top bar */}
+            <div className="flex shrink-0 flex-col gap-2 border-b px-3 py-2">
+                <span className="text-xs text-muted">
+                    {normalizedFilterValue
+                        ? t('agent.documentsFiltered', {
+                              visible: filteredDocuments.length,
+                              total: documents.length,
+                          })
+                        : t('agent.documentCount', { count: documents.length })}
+                </span>
+                {documents.length > FILTER_VISIBILITY_THRESHOLD && (
+                    <>
+                        <label htmlFor={filterInputId} className="sr-only">
+                            {t('form.filter')}
+                        </label>
+                        <Input
+                            id={filterInputId}
+                            type="text"
+                            role="searchbox"
+                            autoComplete="off"
+                            placeholder={t('store.searchPlaceholder')}
+                            value={filterValue}
+                            onChange={setFilterValue}
+                            clearable={true}
+                        />
+                    </>
+                )}
+            </div>
+
+            {/* List */}
+            <div className="flex-1 overflow-y-auto px-3 py-2">
+                {filteredDocuments.length > 0 ? (
+                    <div className="min-w-0">
+                        {filteredDocuments.map((doc) => (
+                            <div key={doc.id} className="flex min-w-0 items-center gap-1">
+                                <Button
+                                    variant="unstyled"
+                                    className="flex min-w-0 flex-1 items-center justify-start gap-1.5 rounded px-1 py-1 text-start text-sm hover:bg-muted/30"
+                                    onClick={() => onSelectDocument(doc.id)}
+                                    title={doc.title}
+                                >
+                                    <FileTextIcon className="size-4 shrink-0 text-muted" />
+                                    <span className="min-w-0 truncate">{doc.title}</span>
+                                </Button>
+                                <NavLink
+                                    href={`/store/objects/${doc.id}#overview`}
+                                    topLevelNav
+                                    className="inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md text-muted hover:bg-muted/20 hover:text-foreground"
+                                >
+                                    <VTooltip description={t('agent.openDocument')} placement="top" size="xs" asChild>
+                                        <ExternalLinkIcon className="size-3.5" aria-hidden="true" />
+                                    </VTooltip>
+                                    <span className="sr-only">{t('agent.openDocument')}</span>
+                                </NavLink>
+                            </div>
+                        ))}
+                    </div>
+                ) : (
+                    <div className="px-1 py-6 text-sm text-muted">{t('agent.noMatchingDocuments')}</div>
+                )}
+            </div>
+        </div>
+    );
+}
+
+export const DocumentsTab = React.memo(DocumentsTabComponent);

package/src/features/agent/chat/ModernAgentConversation.test.tsx

@@ -282,7 +282,6 @@ describe('ModernAgentConversation send handling', () => {
             isDocPanelOpen: false,
             docRefreshKey: 0,
             closeDocPanel: vi.fn(),
-            closeDocument: vi.fn(),
             selectDocument: vi.fn(),
             openDocInPanel: vi.fn(),
             updateDocumentTitle: vi.fn(),

package/src/features/agent/chat/ModernAgentConversation.tsx

@@ -1561,7 +1561,6 @@ function ModernAgentConversationInner({
         isDocPanelOpen,
         docRefreshKey,
         closeDocPanel: handleCloseDocPanel,
-        closeDocument: handleCloseDocument,
         selectDocument,
         openDocInPanel,
         updateDocumentTitle,
@@ -3062,7 +3061,6 @@ function ModernAgentConversationInner({
                                     openDocuments={openDocuments}
                                     activeDocumentId={activeDocumentId}
                                     onSelectDocument={selectDocument}
-                                    onCloseDocument={handleCloseDocument}
                                     onUpdateDocumentTitle={updateDocumentTitle}
                                     docRefreshKey={docRefreshKey}
                                     runId={agentRunId}

package/src/features/agent/chat/ModernAgentOutput/Header.tsx

@@ -65,6 +65,19 @@ export interface HeaderProps {
     className?: string;
 }
 
+/**
+ * Opens an internal route in a new browser tab, carrying the active tenant sticky params (a/p) so
+ * the new tab keeps the current account/project; absolute/external URLs are left untouched.
+ */
+function useOpenInNewTab() {
+    const { router } = useRouterContext();
+    return (url: string) => {
+        const href = url.startsWith('/') ? router.getTopRouter().navigator.addStickyParams(url) : url;
+        window.open(href, '_blank', 'noopener,noreferrer');
+        return href;
+    };
+}
+
 export default function Header({
     title,
     variant = 'full',
@@ -93,6 +106,7 @@ export default function Header({
     className,
 }: HeaderProps) {
     const { t } = useUITranslation();
+    const openInNewTab = useOpenInNewTab();
     const isCompact = variant === 'compact';
     const nextViewMode: AgentConversationViewMode = viewMode === 'sliding' ? 'stacked' : 'sliding';
     const verboseLabel = t('agent.verbose');
@@ -195,6 +209,19 @@ export default function Header({
                 </Button>
             )}
 
+            {agentRunId && (
+                <Button
+                    type="button"
+                    size={isCompact ? 'icon' : 'xs'}
+                    variant="ghost"
+                    onClick={() => openInNewTab(`/store/agent-runner/${agentRunId}`)}
+                    title={t('agent.openInNewTab')}
+                    className={cn('transition-all duration-200 rounded-md', isCompact && 'size-8 rounded-lg')}
+                >
+                    <ExternalLink className="size-4" />
+                </Button>
+            )}
+
             {resetWorkflow && (
                 <Button
                     type="button"
@@ -316,7 +343,6 @@ function MoreDropdown({
     const toast = useToast();
     const { client } = useUserSession();
     const builder = usePayloadBuilder();
-    const { router } = useRouterContext();
 
     const cancelWorkflow = async () => {
         try {
@@ -360,14 +386,6 @@ function MoreDropdown({
         }
     };
 
-    const openUrl = (url: string) => {
-        // Carry the active tenant sticky params (a/p) on internal routes so the new tab keeps the
-        // current account/project; leave absolute/external URLs untouched.
-        const href = url.startsWith('/') ? router.getTopRouter().navigator.addStickyParams(url) : url;
-        window.open(href, '_blank');
-        return href;
-    };
-
     const copyAgentRunId = () => {
         navigator.clipboard.writeText(agentRunId);
         toast({
@@ -401,11 +419,6 @@ function MoreDropdown({
             }
         >
             <MenuGroup label="Actions">
-                {isModal && (
-                    <MenuItem onClick={() => openUrl(`/store/agent-runner/${agentRunId}`)}>
-                        <ExternalLink className="size-3.5 text-muted" /> {t('agent.openInNewTab')}
-                    </MenuItem>
-                )}
                 <MenuItem onClick={copyAgentRunId}>
                     <CopyIcon className="size-3.5 text-muted" /> {t('agent.copyAgentRunId')}
                 </MenuItem>

package/src/features/agent/chat/hooks/useDocumentPanel.test.tsx

@@ -0,0 +1,33 @@
+import { act, renderHook } from '@testing-library/react';
+import { type AgentMessage, AgentMessageType } from '@vertesia/common';
+import { describe, expect, it } from 'vitest';
+import { useDocumentPanel } from './useDocumentPanel';
+
+function documentCreated(documentId: string, title: string): AgentMessage {
+    return {
+        type: AgentMessageType.UPDATE,
+        message: '',
+        timestamp: Date.now(),
+        details: { event_class: 'document_created', document_id: documentId, title },
+    } as unknown as AgentMessage;
+}
+
+describe('useDocumentPanel', () => {
+    it('opens the newest document reported by the agent', () => {
+        const messages = [documentCreated('doc-1', 'Brief'), documentCreated('doc-2', 'Summary')];
+        const { result } = renderHook(() => useDocumentPanel(messages));
+
+        expect(result.current.openDocuments.map((doc) => doc.id)).toEqual(['doc-1', 'doc-2']);
+        expect(result.current.activeDocumentId).toBe('doc-2');
+        expect(result.current.isDocPanelOpen).toBe(true);
+    });
+
+    it('selects null to go back to the list while keeping the documents open', () => {
+        const { result } = renderHook(() => useDocumentPanel([documentCreated('doc-1', 'Brief')]));
+
+        act(() => result.current.selectDocument(null));
+
+        expect(result.current.activeDocumentId).toBeNull();
+        expect(result.current.openDocuments).toHaveLength(1);
+    });
+});

package/src/features/agent/chat/hooks/useDocumentPanel.ts

@@ -8,8 +8,8 @@ export interface UseDocumentPanelResult {
     isDocPanelOpen: boolean;
     docRefreshKey: number;
     closeDocPanel: () => void;
-    closeDocument: (docId: string) => void;
-    selectDocument: (docId: string) => void;
+    /** Select a document to display, or `null` to go back to the document list. */
+    selectDocument: (docId: string | null) => void;
     openDocInPanel: (docId: string) => void;
     updateDocumentTitle: (docId: string, title: string) => void;
 }
@@ -137,23 +137,7 @@ export function useDocumentPanel(messages: AgentMessage[]): UseDocumentPanelResu
         setIsDocPanelOpen(false);
     }, []);
 
-    const closeDocument = useCallback((docId: string) => {
-        setOpenDocuments((prev) => {
-            const next = prev.filter((d) => d.id !== docId);
-            if (next.length === 0) {
-                setIsDocPanelOpen(false);
-                setActiveDocumentId(null);
-            } else {
-                setActiveDocumentId((current) => {
-                    if (current === docId) return next[0].id;
-                    return current;
-                });
-            }
-            return next;
-        });
-    }, []);
-
-    const selectDocument = useCallback((docId: string) => {
+    const selectDocument = useCallback((docId: string | null) => {
         setActiveDocumentId(docId);
     }, []);
 
@@ -176,7 +160,6 @@ export function useDocumentPanel(messages: AgentMessage[]): UseDocumentPanelResu
         isDocPanelOpen,
         docRefreshKey,
         closeDocPanel,
-        closeDocument,
         selectDocument,
         openDocInPanel,
         updateDocumentTitle,

package/src/features/oauth/McpConnectionsButton.test.tsx

@@ -47,8 +47,23 @@ describe('MCP connection controls', () => {
                 manifest: {
                     name: 'mcp-app',
                     title: 'MCP App',
-                    oauth_providers: {},
                     tool_collections: [
+                        {
+                            type: 'mcp',
+                            id: 'service-account',
+                            name: 'Service Account',
+                            namespace: 'service_account',
+                            url: 'https://service-account-mcp.example.com',
+                            oauth_provider: 'service-account',
+                        },
+                        {
+                            type: 'mcp',
+                            id: 'service-calendar',
+                            name: 'Service Calendar',
+                            namespace: 'service_calendar',
+                            url: 'https://service-calendar-mcp.example.com',
+                            oauth_provider: 'service-account',
+                        },
                         {
                             type: 'mcp',
                             id: 'jira',
@@ -86,11 +101,23 @@ describe('MCP connection controls', () => {
                             auth: 'api_key',
                         },
                     ],
+                    oauth_providers: {
+                        'service-account': {
+                            display_name: 'Service Account OAuth',
+                            grant_type: 'client_credentials',
+                        },
+                    },
                 },
-                oauth_collection_ids: ['jira', 'miro', 'linear', 'github'],
+                oauth_collection_ids: ['jira', 'miro', 'linear', 'github', 'service-account', 'service-calendar'],
             },
         ]);
         mocks.getStatus.mockResolvedValue([
+            {
+                authenticated: true,
+                collection_id: 'service-account',
+                collection_name: 'Service Account',
+                mcp_server_url: 'https://service-account-mcp.example.com',
+            },
             {
                 authenticated: true,
                 collection_id: 'jira',
@@ -124,7 +151,9 @@ describe('MCP connection controls', () => {
         ]);
         const onChange = vi.fn();
 
-        renderWithProviders(<McpConnectionsInlineList disabledCollections={['linear']} onChange={onChange} />);
+        renderWithProviders(
+            <McpConnectionsInlineList disabledCollections={['linear', 'service-calendar']} onChange={onChange} />,
+        );
 
         await screen.findByText('Jira');
         await waitFor(() => expect(mocks.getStatus).toHaveBeenCalledTimes(1));
@@ -133,16 +162,25 @@ describe('MCP connection controls', () => {
         expect(screen.getByText('Linear')).not.toBeNull();
         expect(screen.getByText('GitHub')).not.toBeNull();
         expect(screen.getByText('API Key Tools')).not.toBeNull();
+        expect(screen.getByText('Service Account')).not.toBeNull();
+        expect(screen.getByText('Service Calendar')).not.toBeNull();
+        expect(screen.queryByText('Service Account OAuth')).toBeNull();
         const apiKeyBadge = screen.getByText('API key');
         expect(apiKeyBadge.className).toContain('w-32');
+        const managedByAppBadges = screen.getAllByText('Managed by app');
+        expect(managedByAppBadges).toHaveLength(2);
+        expect(managedByAppBadges[0].className).toContain('w-32');
         expect(screen.queryByText('Connected')).toBeNull();
         expect(screen.getAllByRole('button', { name: 'Disconnect' })).toHaveLength(3);
         const connectButton = screen.getByRole('button', { name: 'Connect' });
         const disconnectButton = screen.getAllByRole('button', { name: 'Disconnect' })[0];
         expect(connectButton.className).toContain('w-32');
         expect(disconnectButton.className).toContain('w-32');
-        expect(screen.getAllByText('Enabled')).toHaveLength(4);
-        expect(screen.getByText('Disabled')).not.toBeNull();
+        expect(screen.getAllByText('Enabled')).toHaveLength(5);
+        expect(screen.getAllByText('Disabled')).toHaveLength(2);
+
+        fireEvent.click(screen.getByRole('switch', { name: 'Activate Service Calendar for this conversation' }));
+        expect(onChange).toHaveBeenCalledWith(['linear']);
     });
 
     it('renders MCP rows before connection statuses finish loading', async () => {
@@ -207,8 +245,29 @@ describe('MCP connection controls', () => {
                 manifest: {
                     name: 'jira-app',
                     title: 'Jira',
-                    oauth_providers: {},
+                    oauth_providers: {
+                        'service-account': {
+                            display_name: 'Service Account OAuth',
+                            grant_type: 'client_credentials',
+                        },
+                    },
                     tool_collections: [
+                        {
+                            type: 'mcp',
+                            id: 'service-account',
+                            name: 'Service Account',
+                            namespace: 'service_account',
+                            url: 'https://service-account-mcp.example.com',
+                            oauth_provider: 'service-account',
+                        },
+                        {
+                            type: 'mcp',
+                            id: 'service-calendar',
+                            name: 'Service Calendar',
+                            namespace: 'service_calendar',
+                            url: 'https://service-calendar-mcp.example.com',
+                            oauth_provider: 'service-account',
+                        },
                         {
                             type: 'mcp',
                             id: 'jira',
@@ -225,10 +284,16 @@ describe('MCP connection controls', () => {
                         },
                     ],
                 },
-                oauth_collection_ids: ['jira', 'github'],
+                oauth_collection_ids: ['jira', 'github', 'service-account', 'service-calendar'],
             },
         ]);
         mocks.getStatus.mockResolvedValue([
+            {
+                authenticated: true,
+                collection_id: 'service-account',
+                collection_name: 'Service Account',
+                mcp_server_url: 'https://service-account-mcp.example.com',
+            },
             {
                 authenticated: true,
                 collection_id: 'jira',
@@ -254,12 +319,18 @@ describe('MCP connection controls', () => {
 
         const menuItem = await screen.findByText('MCP');
         expect(menuItem).not.toBeNull();
-        expect(screen.getByText('1')).not.toBeNull();
+        expect(screen.getByText('3')).not.toBeNull();
 
         fireEvent.click(menuItem);
 
         await waitFor(() => {
             expect(screen.getByText('Manage the MCP servers available to this conversation.')).not.toBeNull();
         });
+        expect(screen.getByText('Service Account')).not.toBeNull();
+        expect(screen.getByText('Service Calendar')).not.toBeNull();
+        expect(screen.queryByText('Service Account OAuth')).toBeNull();
+        expect(screen.getAllByText('Managed by app')).toHaveLength(2);
+        expect(screen.getAllByRole('button', { name: 'Disconnect' })).toHaveLength(1);
+        expect(screen.getAllByRole('button', { name: 'Connect' })).toHaveLength(1);
     });
 });

package/src/features/oauth/McpConnectionsButton.tsx

@@ -128,6 +128,7 @@ export function McpConnectionsInlineList({
             {groups.map((group) => {
                 const active = !isGroupDisabled(group, disabledCollections);
                 const connected = group.authStatus?.authenticated === true;
+                const interactiveOAuth = group.authType === 'oauth' && group.oauthGrantType !== 'client_credentials';
                 const StatusIcon = connected ? Link2 : Link2Off;
                 return (
                     <div key={group.key} className="flex flex-wrap items-center gap-x-3 gap-y-2 py-2 text-sm">
@@ -155,7 +156,7 @@ export function McpConnectionsInlineList({
                                 </span>
                             </VTooltip>
                         </div>
-                        {statusLoading && !group.authStatus ? (
+                        {interactiveOAuth && statusLoading && !group.authStatus ? (
                             <Button
                                 variant="outline"
                                 size="sm"
@@ -165,7 +166,7 @@ export function McpConnectionsInlineList({
                             >
                                 <Spinner className="size-3" />
                             </Button>
-                        ) : group.authType === 'oauth' ? (
+                        ) : interactiveOAuth ? (
                             <RemoteMcpConnectionButton
                                 appId={group.appId}
                                 collectionId={group.representativeId}
@@ -178,7 +179,9 @@ export function McpConnectionsInlineList({
                             />
                         ) : (
                             <Badge variant="outline" className="h-6 w-32 justify-center px-2 text-xs">
-                                {t('mcpConnections.apiKey')}
+                                {group.authType === 'api_key'
+                                    ? t('mcpConnections.apiKey')
+                                    : t('mcpConnections.managedByApp')}
                             </Badge>
                         )}
                         {onChange && (

package/src/features/oauth/McpConnectionsDialog.tsx

@@ -1,6 +1,6 @@
 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 { Badge, Button, Modal, ModalBody, ModalTitle, Spinner, Switch, VTooltip } from '../../core/index.js';
 import { RemoteMcpConnectionButton } from './RemoteMcpConnectionButton.js';
 import { isGroupDisabled, type McpConnectionGroup, toggleGroupDisabled } from './useMcpConnections.js';
 
@@ -62,6 +62,8 @@ export function McpConnectionsDialog({
                         {groups.map((group) => {
                             const active = !isGroupDisabled(group, disabledCollections);
                             const connected = group.authStatus?.authenticated === true;
+                            const interactiveOAuth =
+                                group.authType === 'oauth' && group.oauthGrantType !== 'client_credentials';
                             const StatusIcon = connected ? Link2 : Link2Off;
                             return (
                                 <div key={group.key} className="flex items-center justify-between gap-3 py-3">
@@ -92,7 +94,7 @@ export function McpConnectionsDialog({
                                         </VTooltip>
                                     </div>
                                     <div className="flex shrink-0 items-center gap-3">
-                                        {statusLoading && !group.authStatus ? (
+                                        {interactiveOAuth && statusLoading && !group.authStatus ? (
                                             <Button
                                                 variant="outline"
                                                 size="sm"
@@ -102,7 +104,7 @@ export function McpConnectionsDialog({
                                             >
                                                 <Spinner className="size-3" />
                                             </Button>
-                                        ) : group.authType === 'oauth' ? (
+                                        ) : interactiveOAuth ? (
                                             <RemoteMcpConnectionButton
                                                 appId={group.appId}
                                                 collectionId={group.representativeId}
@@ -113,6 +115,10 @@ export function McpConnectionsDialog({
                                                 showDisconnect
                                                 readOnly={readOnly}
                                             />
+                                        ) : group.authType === 'oauth' ? (
+                                            <Badge variant="outline" className="h-6 w-32 justify-center px-2 text-xs">
+                                                {t('mcpConnections.managedByApp')}
+                                            </Badge>
                                         ) : null}
                                         {onChange && (
                                             <Switch

package/src/features/oauth/useMcpConnections.ts

@@ -7,22 +7,21 @@ import {
 import { useUserSession } from '@vertesia/ui/session';
 import { useCallback, useEffect, useRef, useState } from 'react';
 
-/**
- * A group of MCP tool collections that share authentication and activation state.
- */
+/** A visible MCP collection row. OAuth authentication may be shared with sibling rows. */
 export interface McpConnectionGroup {
     key: string;
     appId: string;
     appName: string;
-    /** Display label: provider display_name, oauth_app name, or individual collection name */
+    /** Display label for the MCP collection. */
     label: string;
-    /** Representative collection ID used for status and, for OAuth groups, connection operations. */
+    /** Collection ID used for status and OAuth operations; shared when collections use the same provider. */
     representativeId: string;
-    /** All collection IDs in this group (used for per-conversation activation toggles) */
+    /** Collection IDs controlled by this row's per-conversation activation toggle. */
     memberIds: string[];
-    /** Names of all collections in this group (for tooltip when > 1) */
+    /** Collection names represented by this row. */
     memberNames: string[];
     authType: 'oauth' | 'api_key';
+    oauthGrantType?: 'authorization_code' | 'client_credentials';
     authStatus?: OAuthAuthStatus;
 }
 
@@ -80,29 +79,36 @@ export function useMcpConnections() {
                 }
 
                 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),
-                        authType: 'oauth',
-                    });
+                    const representativeId = cols[0].id;
+                    for (const col of cols) {
+                        allGroups.push({
+                            key: `${inst.id}:provider:${providerKey}:${col.id}`,
+                            appId: inst.id,
+                            appName: inst.manifest.title || inst.manifest.name,
+                            label: col.name,
+                            representativeId,
+                            memberIds: [col.id],
+                            memberNames: [col.name],
+                            authType: 'oauth',
+                            oauthGrantType: manifestProviders[providerKey]?.grant_type,
+                        });
+                    }
                 }
 
                 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),
-                        authType: 'oauth',
-                    });
+                    const representativeId = cols[0].id;
+                    for (const col of cols) {
+                        allGroups.push({
+                            key: `${inst.id}:oauthapp:${oauthApp}:${col.id}`,
+                            appId: inst.id,
+                            appName: inst.manifest.title || inst.manifest.name,
+                            label: col.name,
+                            representativeId,
+                            memberIds: [col.id],
+                            memberNames: [col.name],
+                            authType: 'oauth',
+                        });
+                    }
                 }
 
                 for (const col of individualCols) {