@vertesia/ui 1.6.0-dev.20260918.090710Z → 1.6.0-dev.20260923.085325Z

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

@@ -61,6 +61,8 @@ vi.mock('./ModernAgentOutput/Header', () => ({
 vi.mock('./ModernAgentOutput/MessageInput', () => ({
     default: (props: {
         onSend: (message: string) => void;
+        value?: string;
+        onValueChange?: (value: string) => void;
         activeTaskCount?: number;
         activeWorkstreams?: Array<{ workstream_id: string; status: string }>;
         onSelectWorkstream?: (workstreamId: string) => void;
@@ -81,6 +83,11 @@ vi.mock('./ModernAgentOutput/MessageInput', () => ({
         return (
             <div>
                 {props.approvalModeSlot}
+                <textarea
+                    aria-label="composer draft"
+                    value={props.value}
+                    onChange={(event) => props.onValueChange?.(event.target.value)}
+                />
                 <button type="button" onClick={() => props.onSend('follow up')}>
                     composer send
                 </button>
@@ -1706,6 +1713,80 @@ describe('ModernAgentConversation send handling', () => {
         );
     });
 
+    it('restores the composer draft after an option response without sending it as part of that response', async () => {
+        const requestMessage = {
+            ...createMessage(AgentMessageType.REQUEST_INPUT, 'What is your favorite color?'),
+            details: {
+                request_id: 'ask-user-1',
+                ux: {
+                    options: [
+                        { id: 'red', label: 'Red' },
+                        { id: 'blue', label: 'Blue' },
+                    ],
+                },
+            },
+        };
+        mockStreamState({ messages: [], isCompleted: false, agentRunStatus: 'RUNNING' });
+
+        const view = renderConversation({ hideMessageInput: false });
+        fireEvent.change(screen.getByRole('textbox', { name: 'composer draft' }), {
+            target: { value: 'My pending message' },
+        });
+
+        mockStreamState({ messages: [requestMessage], isCompleted: false, agentRunStatus: 'RUNNING' });
+        view.rerender(
+            <ModernAgentConversation
+                agentRunId="agent-run-1"
+                title="Agent"
+                hideHeader
+                hideMessageInput={false}
+                showRightPanel={false}
+            />,
+        );
+
+        await act(async () => {
+            fireEvent.click(screen.getByRole('button', { name: 'Blue' }));
+            await Promise.resolve();
+        });
+        await waitFor(() => {
+            expect(mocks.sendSignal).toHaveBeenCalledWith(
+                'agent-run-1',
+                'UserInput',
+                expect.objectContaining({ message: 'blue' }),
+            );
+        });
+
+        mockStreamState({
+            messages: [
+                requestMessage,
+                {
+                    ...createMessage(AgentMessageType.QUESTION, 'blue'),
+                    details: { request_input_response: { request_id: 'ask-user-1' } },
+                },
+            ],
+            isCompleted: false,
+            agentRunStatus: 'RUNNING',
+        });
+        view.rerender(
+            <ModernAgentConversation
+                agentRunId="agent-run-1"
+                title="Agent"
+                hideHeader
+                hideMessageInput={false}
+                showRightPanel={false}
+            />,
+        );
+
+        expect((screen.getByRole('textbox', { name: 'composer draft' }) as HTMLTextAreaElement).value).toBe(
+            'My pending message',
+        );
+        expect(mocks.sendSignal).not.toHaveBeenCalledWith(
+            'agent-run-1',
+            'UserInput',
+            expect.objectContaining({ message: 'My pending message' }),
+        );
+    });
+
     it('does not resurrect an answered request overlay after remounting before the persisted echo arrives', async () => {
         const requestMessage = {
             ...createMessage(AgentMessageType.REQUEST_INPUT, 'What is your favorite color?'),

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

@@ -1586,6 +1586,9 @@ function ModernAgentConversationInner({
     const conversationRef = useRef<HTMLDivElement | null>(null);
     const conversationLayoutRef = useRef<HTMLDivElement | null>(null);
     const [isSending, setIsSending] = useState(false);
+    // Request-input overlays replace the composer while the user chooses a response. Keep the
+    // ordinary composer draft here so that temporary unmount does not discard it.
+    const [composerValue, setComposerValue] = useState('');
     const [isCompactingContext, setIsCompactingContext] = useState(false);
     const [internalViewMode, setInternalViewMode] = useState<AgentConversationViewMode>('sliding');
     const viewMode = controlledViewMode ?? internalViewMode;
@@ -2908,6 +2911,8 @@ function ModernAgentConversationInner({
                                     {composerContext}
                                     <MessageInput
                                         onSend={handleSendMessage}
+                                        value={composerValue}
+                                        onValueChange={setComposerValue}
                                         onStop={allowWorkflowControl ? handleStopWorkflow : undefined}
                                         approvalModeSlot={
                                             interactive && toolApprovalMode ? (

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

@@ -55,6 +55,10 @@ function formatTokenCountInK(tokens: number): string {
 
 interface MessageInputProps {
     onSend: (message: string) => void;
+    /** Controlled composer draft. When omitted, the composer manages its own draft. */
+    value?: string;
+    /** Called whenever the composer draft changes. */
+    onValueChange?: (value: string) => void;
     onStop?: () => void;
     disabled?: boolean;
     isSending?: boolean;
@@ -121,6 +125,8 @@ interface MessageInputProps {
 
 export default function MessageInput({
     onSend,
+    value: controlledValue,
+    onValueChange,
     onStop,
     approvalModeSlot,
     mcpSlot,
@@ -163,7 +169,17 @@ export default function MessageInput({
     const resolvedPlaceholder = placeholder ?? t('agent.typeYourMessage');
     const ref = useRef<HTMLTextAreaElement | null>(null);
     const fileInputRef = useRef<HTMLInputElement | null>(null);
-    const [value, setValue] = useState('');
+    const [uncontrolledValue, setUncontrolledValue] = useState('');
+    const value = controlledValue ?? uncontrolledValue;
+    const setValue = useCallback(
+        (nextValue: string) => {
+            if (controlledValue === undefined) {
+                setUncontrolledValue(nextValue);
+            }
+            onValueChange?.(nextValue);
+        },
+        [controlledValue, onValueChange],
+    );
     const [isObjectModalOpen, setIsObjectModalOpen] = useState(false);
     const [isDocSearchOpen, setIsDocSearchOpen] = useState(false);
     const [isDragOver, setIsDragOver] = useState(false);

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

@@ -659,7 +659,7 @@ function PageWithOverlay({
                             'absolute cursor-pointer border rounded-[1px] transition-colors',
                             citation.misaligned && 'border-dashed',
                             isSelected
-                                ? 'border-2 border-info bg-info z-10'
+                                ? 'border-2 border-info bg-info/20 z-10'
                                 : citation.verified
                                   ? 'border-success/70 hover:bg-success/20'
                                   : citation.reviewed
@@ -853,7 +853,7 @@ function ArrayTable({
                                                 className={cn(
                                                     'text-start rounded px-1 w-full',
                                                     isSelected
-                                                        ? 'bg-info ring-1 ring-primary'
+                                                        ? 'bg-info/15 ring-1 ring-primary'
                                                         : citation
                                                           ? 'hover:bg-muted cursor-pointer'
                                                           : 'text-muted cursor-default',
@@ -909,7 +909,7 @@ function LeafRow({
             onClick={() => citation && onSelect(path)}
             className={cn(
                 'flex items-center gap-2 w-full text-start text-sm rounded px-1.5 py-0.5',
-                isSelected ? 'bg-info ring-1 ring-primary' : citation ? 'hover:bg-muted' : '',
+                isSelected ? 'bg-info/15 ring-1 ring-primary' : citation ? 'hover:bg-muted' : '',
                 !citation && 'cursor-default',
             )}
         >

package/src/features/media-viewer/AudioPanel.test.ts

@@ -0,0 +1,84 @@
+import { act, render } from '@testing-library/react';
+import type { AudioResult } from '@vertesia/common';
+import { createElement } from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { AudioPanel, pcm16LeToWav } from './AudioPanel.js';
+
+describe('pcm16LeToWav', () => {
+    it('adds a WAV header for 16-bit little-endian PCM', async () => {
+        const pcm = new Uint8Array([0x01, 0x00, 0xff, 0x7f]).buffer;
+        const wav = new DataView(await pcm16LeToWav(pcm, { sampleRate: 24_000, channels: 1 }).arrayBuffer());
+
+        expect(String.fromCharCode(...new Uint8Array(wav.buffer, 0, 4))).toBe('RIFF');
+        expect(String.fromCharCode(...new Uint8Array(wav.buffer, 8, 4))).toBe('WAVE');
+        expect(wav.getUint16(22, true)).toBe(1);
+        expect(wav.getUint32(24, true)).toBe(24_000);
+        expect(wav.getUint16(34, true)).toBe(16);
+        expect(String.fromCharCode(...new Uint8Array(wav.buffer, 36, 4))).toBe('data');
+        expect(wav.getUint32(40, true)).toBe(4);
+        expect([...new Uint8Array(wav.buffer, 44)]).toEqual([0x01, 0x00, 0xff, 0x7f]);
+    });
+});
+
+const { client } = vi.hoisted(() => ({ client: { files: { getDownloadUrl: vi.fn() } } }));
+vi.mock('@vertesia/ui/core', () => ({ Spinner: () => null }));
+vi.mock('@vertesia/ui/i18n', () => ({ useUITranslation: () => ({ t: (key: string) => key }) }));
+vi.mock('@vertesia/ui/session', () => ({ useUserSession: () => ({ client }) }));
+
+const audio: AudioResult = {
+    type: 'audio',
+    value: 'artifact:sample.pcm',
+    mime_type: 'audio/pcm',
+    container: 'raw',
+    codec: 'pcm',
+    sample_rate: 24000,
+    channels: 1,
+    sample_encoding: 'int16',
+    byte_order: 'little',
+};
+
+afterEach(() => {
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+    client.files.getDownloadUrl.mockReset();
+});
+
+describe('AudioPanel cancellation', () => {
+    it('aborts an in-flight PCM download on unmount without reporting an error', async () => {
+        let downloadSignal: AbortSignal | undefined;
+        const fetchMock = vi.fn(
+            (_url: string, init: RequestInit) =>
+                new Promise<Response>((_resolve, reject) => {
+                    downloadSignal = init.signal ?? undefined;
+                    downloadSignal?.addEventListener('abort', () => reject(downloadSignal?.reason), { once: true });
+                }),
+        );
+        vi.stubGlobal('fetch', fetchMock);
+        const log = vi.spyOn(console, 'error').mockImplementation(() => {});
+        const view = render(createElement(AudioPanel, { url: '/sample.pcm', audio }));
+        expect(fetchMock).toHaveBeenCalledOnce();
+
+        await act(async () => view.unmount());
+
+        expect(downloadSignal?.aborted).toBe(true);
+        expect(log).not.toHaveBeenCalled();
+    });
+
+    it('does not start a PCM download when a signed URL resolves after unmount', async () => {
+        let resolveUrl!: (value: { url: string }) => void;
+        client.files.getDownloadUrl.mockReturnValue(
+            new Promise<{ url: string }>((resolve) => {
+                resolveUrl = resolve;
+            }),
+        );
+        const fetchMock = vi.fn();
+        vi.stubGlobal('fetch', fetchMock);
+        const view = render(createElement(AudioPanel, { source: audio.value, audio }));
+        expect(client.files.getDownloadUrl).toHaveBeenCalledWith(audio.value);
+        view.unmount();
+
+        await act(async () => resolveUrl({ url: '/sample.pcm' }));
+
+        expect(fetchMock).not.toHaveBeenCalled();
+    });
+});

package/src/features/media-viewer/AudioPanel.tsx

@@ -1,4 +1,10 @@
-import { AUDIO_RENDITION_NAME, type AudioMetadata, ContentNature, type ContentObject } from '@vertesia/common';
+import {
+    AUDIO_RENDITION_NAME,
+    type AudioMetadata,
+    type AudioResult,
+    ContentNature,
+    type ContentObject,
+} from '@vertesia/common';
 import { Spinner } from '@vertesia/ui/core';
 import { useUITranslation } from '@vertesia/ui/i18n';
 import { useUserSession } from '@vertesia/ui/session';
@@ -12,15 +18,66 @@ interface AudioPanelProps {
     source?: string;
     /** ContentObject — uses the audio rendition or falls back to the original if web-supported. */
     object?: ContentObject;
+    /** Audio result metadata used to make raw PCM playable in browser media controls. */
+    audio?: AudioResult;
     /** Extra classes for the wrapper. */
     className?: string;
 }
 
+export interface PcmFormat {
+    sampleRate: number;
+    channels: number;
+}
+
+function pcmFormat(audio?: AudioResult): PcmFormat | undefined {
+    if (
+        audio?.container !== 'raw' ||
+        audio.codec !== 'pcm' ||
+        audio.sample_encoding !== 'int16' ||
+        audio.byte_order !== 'little' ||
+        !audio.sample_rate ||
+        !audio.channels
+    ) {
+        return undefined;
+    }
+
+    return { sampleRate: audio.sample_rate, channels: audio.channels };
+}
+
+/** Wrap provider PCM16-LE bytes in a WAV header so browser media controls can decode them. */
+export function pcm16LeToWav(pcm: ArrayBuffer, format: PcmFormat): Blob {
+    const headerSize = 44;
+    const bytesPerSample = 2;
+    const blockAlign = format.channels * bytesPerSample;
+    const bytesPerSecond = format.sampleRate * blockAlign;
+    const wav = new ArrayBuffer(headerSize);
+    const view = new DataView(wav);
+    const writeAscii = (offset: number, value: string) => {
+        for (let index = 0; index < value.length; index++) view.setUint8(offset + index, value.charCodeAt(index));
+    };
+
+    writeAscii(0, 'RIFF');
+    view.setUint32(4, 36 + pcm.byteLength, true);
+    writeAscii(8, 'WAVE');
+    writeAscii(12, 'fmt ');
+    view.setUint32(16, 16, true);
+    view.setUint16(20, 1, true);
+    view.setUint16(22, format.channels, true);
+    view.setUint32(24, format.sampleRate, true);
+    view.setUint32(28, bytesPerSecond, true);
+    view.setUint16(32, blockAlign, true);
+    view.setUint16(34, 16, true);
+    writeAscii(36, 'data');
+    view.setUint32(40, pcm.byteLength, true);
+
+    return new Blob([wav, pcm], { type: 'audio/wav' });
+}
+
 /**
  * Renders an audio player from a direct URL, a storage source path, or a Vertesia ContentObject.
  * Resolution priority: `url` > `source` > `object`. Duration is shown only in object mode.
  */
-export function AudioPanel({ url, source, object, className }: AudioPanelProps) {
+export function AudioPanel({ url, source, object, audio, className }: AudioPanelProps) {
     const { t } = useUITranslation();
     const { client } = useUserSession();
     const [audioUrl, setAudioUrl] = useState<string | undefined>(url);
@@ -34,19 +91,37 @@ export function AudioPanel({ url, source, object, className }: AudioPanelProps)
         !!object && object.metadata?.type === ContentNature.Audio && !audioRendition && !isOriginalWebSupported;
 
     useEffect(() => {
-        if (url) {
-            setAudioUrl(url);
-            setIsLoading(false);
-            return;
-        }
-
+        let generatedUrl: string | undefined;
+        const controller = new AbortController();
+        const { signal } = controller;
         setAudioUrl(undefined);
 
+        const setPlayableUrl = async (downloadUrl: string) => {
+            signal.throwIfAborted();
+            const format = pcmFormat(audio);
+            if (!format) {
+                if (!signal.aborted) setAudioUrl(downloadUrl);
+                return;
+            }
+
+            const response = await fetch(downloadUrl, { signal });
+            if (!response.ok) throw new Error(`Failed to fetch PCM audio: ${response.status}`);
+            const pcm = await response.arrayBuffer();
+            signal.throwIfAborted();
+            generatedUrl = URL.createObjectURL(pcm16LeToWav(pcm, format));
+            setAudioUrl(generatedUrl);
+        };
+
         const load = async () => {
             try {
+                if (url) {
+                    await setPlayableUrl(url);
+                    return;
+                }
+
                 if (source) {
                     const downloadUrl = await client.files.getDownloadUrl(source);
-                    setAudioUrl(downloadUrl.url);
+                    await setPlayableUrl(downloadUrl.url);
                     return;
                 }
 
@@ -60,22 +135,30 @@ export function AudioPanel({ url, source, object, className }: AudioPanelProps)
                     downloadUrl = await client.files.getDownloadUrl(object.content.source);
                 }
                 if (downloadUrl) {
-                    setAudioUrl(downloadUrl.url);
+                    await setPlayableUrl(downloadUrl.url);
                 }
             } catch (error) {
-                console.error('Failed to get audio URL', error);
+                if (!signal.aborted) console.error('Failed to get audio URL', error);
             } finally {
-                setIsLoading(false);
+                if (!signal.aborted) {
+                    setIsLoading(false);
+                }
             }
         };
 
-        if (source || object) {
+        if (url || source || object) {
             setIsLoading(true);
             void load();
         } else {
             setIsLoading(false);
         }
-    }, [url, source, object, audioRendition, isOriginalWebSupported, client]);
+        return () => {
+            controller.abort();
+            if (generatedUrl) {
+                URL.revokeObjectURL(generatedUrl);
+            }
+        };
+    }, [url, source, object, audio, audioRendition, isOriginalWebSupported, client]);
 
     if (showsObjectFallbackEmpty) {
         return (

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

@@ -183,6 +183,62 @@ describe('MCP connection controls', () => {
         expect(onChange).toHaveBeenCalledWith(['linear']);
     });
 
+    it.each([{ oauthIds: [] }, { oauthIds: ['anonymous'] }])(
+        'shows anonymous servers without status requests, including stale OAuth ids %j',
+        async ({ oauthIds }) => {
+            mocks.getInstalledApps.mockResolvedValue([
+                {
+                    id: 'anonymous-app',
+                    manifest: {
+                        name: 'anonymous-app',
+                        tool_collections: [
+                            {
+                                type: 'mcp',
+                                id: 'anonymous',
+                                name: 'Anonymous MCP',
+                                namespace: 'anonymous',
+                                url: 'https://anonymous.example.com/mcp',
+                                auth: 'none',
+                                oauth_app: 'stale-oauth-app',
+                            },
+                        ],
+                    },
+                    oauth_collection_ids: oauthIds,
+                },
+            ]);
+            const onChange = vi.fn();
+            const { rerender } = renderWithProviders(
+                <McpConnectionsInlineList disabledCollections={['other']} onChange={onChange} />,
+            );
+
+            expect(await screen.findByText('Anonymous MCP')).not.toBeNull();
+            expect(screen.getAllByText('No authentication')).toHaveLength(1);
+            expect(screen.queryByRole('button', { name: /connect/i })).toBeNull();
+            expect(mocks.getStatus).not.toHaveBeenCalled();
+            expect(mocks.getCollectionStatus).not.toHaveBeenCalled();
+
+            fireEvent.click(screen.getByRole('switch', { name: 'Deactivate Anonymous MCP for this conversation' }));
+            expect(onChange).toHaveBeenLastCalledWith(['other', 'anonymous']);
+            rerender(<McpConnectionsInlineList disabledCollections={['other', 'anonymous']} onChange={onChange} />);
+            fireEvent.click(screen.getByRole('switch', { name: 'Activate Anonymous MCP for this conversation' }));
+            expect(onChange).toHaveBeenLastCalledWith(['other']);
+            rerender(<McpConnectionsInlineList onChange={onChange} readOnly />);
+            expect(screen.getByRole('switch')).toHaveProperty('disabled', true);
+
+            rerender(<McpConnectionsActionMenu onChange={onChange} />);
+            fireEvent.pointerDown(await screen.findByRole('button', { name: /settings/i }));
+            const menuItem = await screen.findByText('MCP');
+            expect(screen.getByText('1')).not.toBeNull();
+            fireEvent.click(menuItem);
+            expect(await screen.findByText('Anonymous MCP')).not.toBeNull();
+            expect(screen.getByText('No authentication')).not.toBeNull();
+            expect(screen.queryByRole('button', { name: /connect/i })).toBeNull();
+            fireEvent.click(screen.getByRole('switch', { name: 'Deactivate Anonymous MCP for this conversation' }));
+            expect(onChange).toHaveBeenLastCalledWith(['anonymous']);
+            expect(mocks.getStatus).not.toHaveBeenCalled();
+        },
+    );
+
     it('renders MCP rows before connection statuses finish loading', async () => {
         const statusRequest =
             deferred<

package/src/features/oauth/McpConnectionsButton.tsx

@@ -7,6 +7,7 @@ import { RemoteMcpConnectionButton } from './RemoteMcpConnectionButton.js';
 import {
     countConnectedActiveGroups,
     getConnectedActiveGroupLabels,
+    isGroupConnected,
     isGroupDisabled,
     toggleGroupDisabled,
     useMcpConnections,
@@ -29,7 +30,7 @@ export interface McpConnectionsButtonProps {
 /**
  * Toolbar button that opens the MCP connections dialog. The badge shows how many MCP
  * servers are connected and active for this conversation.
- * Renders nothing when the project has no OAuth MCP servers installed.
+ * Renders nothing when the project has no MCP servers installed.
  */
 export function McpConnectionsButton({
     disabledCollections,
@@ -93,7 +94,7 @@ export function McpConnectionsButton({
 }
 
 /**
- * Inline MCP status list for forms. It shows all available authenticated MCP groups
+ * Inline MCP status list for forms. It shows all available MCP groups
  * without requiring the user to open the management dialog.
  */
 export function McpConnectionsInlineList({
@@ -127,7 +128,7 @@ export function McpConnectionsInlineList({
         <div className="space-y-1">
             {groups.map((group) => {
                 const active = !isGroupDisabled(group, disabledCollections);
-                const connected = group.authStatus?.authenticated === true;
+                const connected = isGroupConnected(group);
                 const interactiveOAuth = group.authType === 'oauth' && group.oauthGrantType !== 'client_credentials';
                 const StatusIcon = connected ? Link2 : Link2Off;
                 return (
@@ -179,9 +180,11 @@ export function McpConnectionsInlineList({
                             />
                         ) : (
                             <Badge variant="outline" className="h-6 w-32 justify-center px-2 text-xs">
-                                {group.authType === 'api_key'
-                                    ? t('mcpConnections.apiKey')
-                                    : t('mcpConnections.managedByApp')}
+                                {group.authType === 'none'
+                                    ? t('mcpConnections.noAuthentication')
+                                    : group.authType === 'api_key'
+                                      ? t('mcpConnections.apiKey')
+                                      : t('mcpConnections.managedByApp')}
                             </Badge>
                         )}
                         {onChange && (

package/src/features/oauth/McpConnectionsDialog.tsx

@@ -2,7 +2,12 @@ import { useUITranslation } from '@vertesia/ui/i18n';
 import { Link2, Link2Off } from 'lucide-react';
 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';
+import {
+    isGroupConnected,
+    isGroupDisabled,
+    type McpConnectionGroup,
+    toggleGroupDisabled,
+} from './useMcpConnections.js';
 
 export interface McpConnectionsDialogProps {
     isOpen: boolean;
@@ -61,7 +66,7 @@ export function McpConnectionsDialog({
                     <div className="space-y-1">
                         {groups.map((group) => {
                             const active = !isGroupDisabled(group, disabledCollections);
-                            const connected = group.authStatus?.authenticated === true;
+                            const connected = isGroupConnected(group);
                             const interactiveOAuth =
                                 group.authType === 'oauth' && group.oauthGrantType !== 'client_credentials';
                             const StatusIcon = connected ? Link2 : Link2Off;
@@ -115,11 +120,15 @@ 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')}
+                                                {group.authType === 'none'
+                                                    ? t('mcpConnections.noAuthentication')
+                                                    : group.authType === 'api_key'
+                                                      ? t('mcpConnections.apiKey')
+                                                      : t('mcpConnections.managedByApp')}
                                             </Badge>
-                                        ) : null}
+                                        )}
                                         {onChange && (
                                             <Switch
                                                 size="sm"

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

@@ -93,3 +93,13 @@ describe('toggleGroupDisabled', () => {
         expect(toggleGroupDisabled(g, disabled, true)).toEqual([]);
     });
 });
+
+describe('anonymous MCP groups', () => {
+    it('counts anonymous servers without credential status and respects disabled collections', () => {
+        const anonymous = { ...group(['anonymous'], false, 'Anonymous'), authType: 'none' as const };
+        expect(countConnectedActiveGroups([anonymous])).toBe(1);
+        expect(getConnectedActiveGroupLabels([anonymous])).toEqual(['Anonymous']);
+        expect(countConnectedActiveGroups([anonymous], ['anonymous'])).toBe(0);
+        expect(getConnectedActiveGroupLabels([anonymous], ['anonymous'])).toEqual([]);
+    });
+});