@vertesia/ui 1.5.0-dev.20260901.052906Z → 1.5.0-dev.20260910.051115Z

package/src/features/magic-pdf/AnnotatedImageSlider.tsx

@@ -326,9 +326,7 @@ function ImageTypeButton({ type, currentType, onClick, icon, tooltip }: ImageTyp
             aria-pressed={isSelected}
             className={clsx(
                 'p-1 rounded cursor-pointer transition-colors',
-                isSelected
-                    ? 'text-primary bg-primary/10'
-                    : 'text-muted-foreground hover:text-foreground hover:bg-muted',
+                isSelected ? 'text-primary bg-primary/10' : 'text-muted hover:text-foreground hover:bg-muted',
             )}
             onClick={onClick}
         >
@@ -355,25 +353,21 @@ function ZoomControls({ zoom, onZoomIn, onZoomOut, onFitToView, canZoomIn, canZo
                 variant="unstyled"
                 className={clsx(
                     'p-1 rounded cursor-pointer transition-colors',
-                    canZoomOut
-                        ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
-                        : 'text-muted-foreground/40 cursor-not-allowed',
+                    canZoomOut ? 'text-muted hover:text-foreground hover:bg-muted' : 'text-muted/40 cursor-not-allowed',
                 )}
                 onClick={onZoomOut}
                 disabled={!canZoomOut}
             >
                 <Minus className="size-4" />
             </Button>
-            <span className="text-xs text-muted-foreground min-w-[32px] text-center">{zoom}%</span>
+            <span className="text-xs text-muted min-w-[32px] text-center">{zoom}%</span>
             <Button
                 title={t('pdf.zoomIn')}
                 tooltipPlacement="bottom"
                 variant="unstyled"
                 className={clsx(
                     'p-1 rounded cursor-pointer transition-colors',
-                    canZoomIn
-                        ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
-                        : 'text-muted-foreground/40 cursor-not-allowed',
+                    canZoomIn ? 'text-muted hover:text-foreground hover:bg-muted' : 'text-muted/40 cursor-not-allowed',
                 )}
                 onClick={onZoomIn}
                 disabled={!canZoomIn}
@@ -386,9 +380,7 @@ function ZoomControls({ zoom, onZoomIn, onZoomOut, onFitToView, canZoomIn, canZo
                 variant="unstyled"
                 className={clsx(
                     'p-1 rounded cursor-pointer transition-colors',
-                    zoom !== DEFAULT_ZOOM
-                        ? 'text-muted-foreground hover:text-foreground hover:bg-muted'
-                        : 'text-muted-foreground/40',
+                    zoom !== DEFAULT_ZOOM ? 'text-muted hover:text-foreground hover:bg-muted' : 'text-muted/40',
                 )}
                 onClick={onFitToView}
             >
@@ -431,10 +423,10 @@ function PageThumbnail({ pageNumber, currentPage, aspectRatio, zoom, url, onSele
                 {url ? (
                     <img src={url} alt={`Page ${pageNumber}`} className="w-full" />
                 ) : (
-                    <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
+                    <Loader2 className="w-6 h-6 animate-spin text-muted" />
                 )}
             </Button>
-            <Center className="text-sm text-muted-foreground pt-1 font-semibold">{pageNumber}</Center>
+            <Center className="text-sm text-muted pt-1 font-semibold">{pageNumber}</Center>
         </div>
     );
 }
@@ -479,7 +471,7 @@ function PageNavigator({ currentPage, totalPages, onChange }: PageNavigatorProps
     };
 
     return (
-        <div className="flex items-center gap-1 text-xs text-muted-foreground">
+        <div className="flex items-center gap-1 text-xs text-muted">
             <span>{t('pdf.page')}</span>
             <input
                 ref={inputRef}

package/src/features/magic-pdf/ExtractedContentView.tsx

@@ -7,7 +7,7 @@ import type { ViewType } from './types';
 function LoadingSpinner({ className }: { className?: string }) {
     return (
         <div className={`flex items-center justify-center ${className || ''}`}>
-            <Loader2 className="w-6 h-6 animate-spin text-gray-400" />
+            <Loader2 className="w-6 h-6 animate-spin text-muted" />
         </div>
     );
 }
@@ -61,7 +61,7 @@ function JsonPageLayoutView({ pageNumber }: JsonPageLayoutViewProps) {
     }
 
     if (error) {
-        return <div className="px-4 py-2 text-red-500 text-sm">{error}</div>;
+        return <div className="px-4 py-2 text-destructive text-sm">{error}</div>;
     }
 
     return content ? <JSONCode className="w-full" data={content} /> : null;
@@ -96,13 +96,13 @@ function MarkdownPageView({ pageNumber }: MarkdownPageViewProps) {
         return (
             <div className="h-full flex flex-col items-center justify-center gap-2">
                 <LoadingSpinner />
-                <span className="text-sm text-muted-foreground">Loading...</span>
+                <span className="text-sm text-muted">Loading...</span>
             </div>
         );
     }
 
     if (error) {
-        return <div className="px-4 py-2 text-red-500 text-sm">{error}</div>;
+        return <div className="px-4 py-2 text-destructive text-sm">{error}</div>;
     }
 
     return (

package/src/features/magic-pdf/MagicPdfView.tsx

@@ -144,7 +144,7 @@ function MagicPdfViewImpl({ object, onClose }: _MagicPdfViewProps) {
                     <div className="flex items-center gap-x-2">
                         <DownloadPopover object={object} />
                     </div>
-                    <span className="text-xs text-muted-foreground">{t('pdf.pageOf', { pageNumber, totalPages })}</span>
+                    <span className="text-xs text-muted">{t('pdf.pageOf', { pageNumber, totalPages })}</span>
                     <div className="flex items-center gap-x-2">
                         {!!onClose && (
                             <Button variant="ghost" size="xs" onClick={onClose} title={t('pdf.close')}>

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) {

package/src/features/pdf-viewer/PdfPageRenderer.tsx

@@ -11,7 +11,7 @@ function LoadingSpinner({ className, size = 'md' }: { className?: string; size?:
     };
     return (
         <div className={`flex items-center justify-center ${className || ''}`}>
-            <Loader2 className={`${sizeClasses[size]} animate-spin text-muted-foreground`} />
+            <Loader2 className={`${sizeClasses[size]} animate-spin text-muted`} />
         </div>
     );
 }
@@ -327,7 +327,7 @@ function VirtualizedThumbnail({
             className="flex items-center justify-center bg-muted"
             style={{ height: placeholderHeight, width: width || '100%' }}
         >
-            <span className="text-muted-foreground text-xs">{pageNumber}</span>
+            <span className="text-muted text-xs">{pageNumber}</span>
         </div>
     );
 

package/src/features/pdf-viewer/PdfPageSlider.tsx

@@ -367,7 +367,7 @@ export function PdfPageSlider({
                             </Button>
                             <Center
                                 className={clsx(
-                                    'text-muted-foreground font-semibold',
+                                    'text-muted font-semibold',
                                     compact ? 'text-xs pt-0.5' : 'text-sm pt-1',
                                 )}
                             >
@@ -426,7 +426,7 @@ function PageNavigator({ currentPage, totalPages, onChange }: PageNavigatorProps
     };
 
     return (
-        <div className="flex items-center gap-1 text-xs text-muted-foreground">
+        <div className="flex items-center gap-1 text-xs text-muted">
             <span>{t('pdf.page')}</span>
             <input
                 ref={inputRef}
@@ -457,7 +457,7 @@ function ZoomControls({ zoom, onZoomIn, onZoomOut, onFitToView, canZoomIn, canZo
             <Button variant="ghost" size="xs" onClick={onZoomOut} isDisabled={!canZoomOut} title={t('pdf.zoomOut')}>
                 <Minus />
             </Button>
-            <span className="text-xs text-muted-foreground min-w-[32px] text-center">{zoom}%</span>
+            <span className="text-xs text-muted min-w-[32px] text-center">{zoom}%</span>
             <Button variant="ghost" size="xs" onClick={onZoomIn} isDisabled={!canZoomIn} title={t('pdf.zoomIn')}>
                 <Plus />
             </Button>
@@ -466,7 +466,7 @@ function ZoomControls({ zoom, onZoomIn, onZoomOut, onFitToView, canZoomIn, canZo
                 size="xs"
                 onClick={onFitToView}
                 title={t('pdf.fitToWidth')}
-                className={zoom === DEFAULT_ZOOM ? 'text-muted-foreground/40' : undefined}
+                className={zoom === DEFAULT_ZOOM ? 'text-muted/40' : undefined}
             >
                 <Maximize />
             </Button>

package/src/features/pdf-viewer/SimplePdfViewer.tsx

@@ -135,7 +135,7 @@ export function SimplePdfViewer({ object, url, source, className }: SimplePdfVie
                         title={t('pdf.fullscreen')}
                         tooltipPlacement="bottom"
                         variant="unstyled"
-                        className="p-1 rounded cursor-pointer transition-colors text-muted-foreground hover:text-foreground hover:bg-muted"
+                        className="p-1 rounded cursor-pointer transition-colors text-muted hover:text-foreground hover:bg-muted"
                         onClick={() => setIsFullscreen(true)}
                     >
                         <Maximize2 className="size-4" />