@datalayer/agent-runtimes 0.0.2 → 0.0.4

package/lib/components/chat/components/AgentDetails.js

@@ -5,9 +5,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * AgentDetails component - Shows detailed information about the agent
  * including name, protocol, URL, message count, and context details.
  */
-import { ArrowLeftIcon, GlobeIcon, CommentDiscussionIcon, DatabaseIcon, FileIcon, ToolsIcon, ClockIcon, } from '@primer/octicons-react';
-import { Box, Button, Heading, IconButton, Text, Label, ProgressBar, } from '@primer/react';
+import { ArrowLeftIcon, GlobeIcon, CommentDiscussionIcon, DatabaseIcon, FileIcon, ToolsIcon, ClockIcon, CheckCircleIcon, XCircleIcon, } from '@primer/octicons-react';
+import { Box, Button, Heading, IconButton, Text, Label, ProgressBar, Spinner, } from '@primer/react';
 import { AiAgentIcon } from '@datalayer/icons-react';
+import { useQuery } from '@tanstack/react-query';
 // Mock context data for display
 const MOCK_CONTEXT_DATA = {
     name: 'Context',
@@ -51,6 +52,15 @@ const MOCK_CONTEXT_DATA = {
         },
     ],
 };
+function getLocalApiBase() {
+    if (typeof window === 'undefined') {
+        return '';
+    }
+    const host = window.location.hostname;
+    return host === 'localhost' || host === '127.0.0.1'
+        ? 'http://127.0.0.1:8765'
+        : '';
+}
 /**
  * Format token count for display
  */
@@ -85,6 +95,19 @@ function getCategoryIcon(name) {
  */
 export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, agentId, onBack, }) {
     const contextUsagePercent = (MOCK_CONTEXT_DATA.usedTokens / MOCK_CONTEXT_DATA.totalTokens) * 100;
+    // Fetch MCP toolsets status
+    const { data: mcpStatus, isLoading: mcpLoading } = useQuery({
+        queryKey: ['mcp-toolsets-status'],
+        queryFn: async () => {
+            const apiBase = getLocalApiBase();
+            const response = await fetch(`${apiBase}/api/v1/configure/mcp-toolsets-status`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch MCP status');
+            }
+            return response.json();
+        },
+        refetchInterval: 5000, // Refresh every 5 seconds
+    });
     return (_jsxs(Box, { sx: {
             display: 'flex',
             flexDirection: 'column',
@@ -145,6 +168,46 @@ export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, a
                                     fontWeight: 'semibold',
                                     mb: 2,
                                     color: 'fg.muted',
+                                }, children: "MCP Toolsets" }), _jsx(Box, { sx: {
+                                    p: 3,
+                                    bg: 'canvas.subtle',
+                                    borderRadius: 2,
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: mcpLoading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading MCP status..." })] })) : mcpStatus ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: _jsxs(Text, { sx: { fontSize: 1 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold' }, children: mcpStatus.ready_count }), ' ', "ready,", ' ', _jsx(Text, { as: "span", sx: { fontWeight: 'semibold' }, children: mcpStatus.failed_count }), ' ', "failed"] }) }), mcpStatus.ready_servers.length > 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        fontWeight: 'semibold',
+                                                        color: 'fg.muted',
+                                                    }, children: "Ready:" }), mcpStatus.ready_servers.map(server => (_jsxs(Box, { sx: {
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        gap: 2,
+                                                        pl: 2,
+                                                    }, children: [_jsx(CheckCircleIcon, { size: 16, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 1 }, children: server })] }, server)))] })), Object.keys(mcpStatus.failed_servers).length > 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        fontWeight: 'semibold',
+                                                        color: 'fg.muted',
+                                                    }, children: "Failed:" }), Object.entries(mcpStatus.failed_servers).map(([server, error]) => (_jsxs(Box, { sx: {
+                                                        display: 'flex',
+                                                        flexDirection: 'column',
+                                                        gap: 1,
+                                                        pl: 2,
+                                                    }, children: [_jsxs(Box, { sx: {
+                                                                display: 'flex',
+                                                                alignItems: 'center',
+                                                                gap: 2,
+                                                            }, children: [_jsx(XCircleIcon, { size: 16, fill: "danger.fg" }), _jsx(Text, { sx: { fontSize: 1 }, children: server })] }), _jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                color: 'danger.fg',
+                                                                fontFamily: 'mono',
+                                                                pl: 4,
+                                                                whiteSpace: 'pre-wrap',
+                                                                wordBreak: 'break-word',
+                                                            }, children: error.split('\n')[0] })] }, server)))] }))] })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load MCP status" })) })] }), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
+                                    fontSize: 1,
+                                    fontWeight: 'semibold',
+                                    mb: 2,
+                                    color: 'fg.muted',
                                 }, children: "Context Usage" }), _jsxs(Box, { sx: {
                                     p: 3,
                                     bg: 'canvas.subtle',

package/lib/components/chat/components/ChatFloating.d.ts

@@ -12,9 +12,9 @@
  * @module components/chat/components/ChatFloating
  */
 import React from 'react';
-import { type ChatBaseProps, type RenderToolResult, type ToolCallRenderContext, type ToolCallStatus, type ProtocolConfig, type RespondCallback, type Suggestion } from './base/ChatBase';
+import { type ChatBaseProps, type RenderToolResult, type ToolCallRenderContext, type ToolCallStatus, type ProtocolConfig, type RespondCallback, type Suggestion, type RemoteConfig, type ModelConfig, type BuiltinTool, type MCPServerConfig, type MCPServerTool } from './base/ChatBase';
 import type { PoweredByTagProps } from './elements/PoweredByTag';
-export type { ToolCallStatus, ToolCallRenderContext, RenderToolResult, RespondCallback, Suggestion, };
+export type { ToolCallStatus, ToolCallRenderContext, RenderToolResult, RespondCallback, Suggestion, RemoteConfig, ModelConfig, BuiltinTool, MCPServerConfig, MCPServerTool, };
 /**
  * ChatFloating props
  */
@@ -135,6 +135,16 @@ export interface ChatFloatingProps {
      * @default false
      */
     showPanelBackdrop?: boolean;
+    /**
+     * Show model selector in footer.
+     * @default false
+     */
+    showModelSelector?: boolean;
+    /**
+     * Show tools menu in footer.
+     * @default false
+     */
+    showToolsMenu?: boolean;
     /** Additional ChatBase props */
     panelProps?: Partial<ChatBaseProps>;
 }
@@ -142,5 +152,5 @@ export interface ChatFloatingProps {
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, showPanelBackdrop, panelProps, }: ChatFloatingProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, showPanelBackdrop, showModelSelector, showToolsMenu, panelProps, }: ChatFloatingProps): import("react/jsx-runtime").JSX.Element;
 export default ChatFloating;

package/lib/components/chat/components/ChatFloating.js

@@ -43,7 +43,7 @@ function useIsMobile(breakpoint = 640) {
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', showPanelBackdrop = false, panelProps, }) {
+export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', showPanelBackdrop = false, showModelSelector = false, showToolsMenu = false, panelProps, }) {
     // Store-based state
     const storeIsOpen = useChatOpen();
     const storeMessages = useChatMessages();
@@ -63,13 +63,24 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
     const [focusTrigger, setFocusTrigger] = useState(0);
     // Build protocol config from endpoint if not provided directly
     // Memoize to avoid creating new object on every render (which would trigger useEffect re-runs)
-    const protocol = useMemo(() => protocolProp ||
-        (endpoint
-            ? {
-                type: 'ag-ui',
-                endpoint,
-            }
-            : undefined), [protocolProp, endpoint]);
+    const protocol = useMemo(() => {
+        if (protocolProp)
+            return protocolProp;
+        if (!endpoint)
+            return undefined;
+        // Extract base URL from endpoint (e.g., http://localhost:8765/api/v1/ag-ui/agent/ -> http://localhost:8765)
+        const baseUrl = endpoint.match(/^(https?:\/\/[^/]+)/)?.[1] || '';
+        return {
+            type: 'ag-ui',
+            endpoint,
+            // Enable config query for model/tools selector when showModelSelector or showToolsMenu is true
+            enableConfigQuery: showModelSelector || showToolsMenu,
+            // Config endpoint is at /api/v1/configure (global, not per-agent)
+            configEndpoint: showModelSelector || showToolsMenu
+                ? `${baseUrl}/api/v1/configure`
+                : undefined,
+        };
+    }, [protocolProp, endpoint, showModelSelector, showToolsMenu]);
     // Clear messages when endpoint/protocol changes (e.g., switching examples)
     useEffect(() => {
         clearStoreMessages();
@@ -376,6 +387,6 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                         ...poweredByProps,
                     }, renderToolResult: renderToolResult, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, avatarConfig: {
                         showAvatars: true,
-                    }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: _tools, ...panelProps, children: children }) })] }));
+                    }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: _tools, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, ...panelProps, children: children }) })] }));
 }
 export default ChatFloating;

package/lib/components/chat/components/base/ChatBase.d.ts

@@ -124,6 +124,7 @@ export interface ModelConfig {
     id: string;
     name: string;
     builtinTools?: string[];
+    isAvailable?: boolean;
 }
 /**
  * Builtin tool configuration
@@ -132,12 +133,36 @@ export interface BuiltinTool {
     name: string;
     id: string;
 }
+/**
+ * MCP Server Tool configuration
+ */
+export interface MCPServerTool {
+    name: string;
+    description: string;
+    enabled: boolean;
+    inputSchema?: Record<string, unknown>;
+}
+/**
+ * MCP Server configuration from backend
+ */
+export interface MCPServerConfig {
+    id: string;
+    name: string;
+    url?: string;
+    enabled: boolean;
+    tools: MCPServerTool[];
+    command?: string;
+    args?: string[];
+    isAvailable?: boolean;
+    transport?: string;
+}
 /**
  * Remote configuration from server
  */
 export interface RemoteConfig {
     models: ModelConfig[];
     builtinTools: BuiltinTool[];
+    mcpServers?: MCPServerConfig[];
 }
 /**
  * Protocol configuration for ChatBase

package/lib/components/chat/components/base/ChatBase.js

@@ -17,11 +17,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { useContext } from 'react';
 import { useCallback, useEffect, useRef, useState, } from 'react';
-import { Heading, Text, Spinner, IconButton, Textarea, Button, ActionMenu, ActionList, LabelGroup, Label, } from '@primer/react';
+import { Heading, Text, Spinner, IconButton, Textarea, Button, ActionMenu, ActionList, LabelGroup, Label, ToggleSwitch, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { AlertIcon, PlusIcon, TrashIcon, GearIcon, PersonIcon, PaperAirplaneIcon, SquareCircleIcon, ToolsIcon, AiModelIcon, } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
-import { useQuery, QueryClientContext } from '@tanstack/react-query';
+import { useQuery, QueryClient, QueryClientProvider, QueryClientContext, } from '@tanstack/react-query';
 import { Streamdown } from 'streamdown';
 import { PoweredByTag } from '../elements/PoweredByTag';
 import { requestAPI } from '../../handler';
@@ -29,6 +29,51 @@ import { useChatStore } from '../../store/chatStore';
 import { generateMessageId, createUserMessage, createAssistantMessage, } from '../../types/message';
 import { AGUIAdapter, A2AAdapter, VercelAIAdapter, ACPAdapter, } from '../../protocols';
 import { ToolCallDisplay } from '../display/ToolCallDisplay';
+// Singleton QueryClient for ChatBase instances without external QueryClientProvider
+const internalQueryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            staleTime: 5 * 60 * 1000, // 5 minutes
+            refetchOnWindowFocus: false,
+        },
+    },
+});
+// Primer's default portal root ID
+const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
+/**
+ * Hook to ensure Primer's default portal root has a high z-index.
+ * This ensures dropdown menus appear above floating chat panels.
+ */
+function useHighZIndexPortal() {
+    useEffect(() => {
+        // Set up a MutationObserver to watch for the portal root being added
+        const setPortalZIndex = () => {
+            const portalRoot = document.getElementById(PRIMER_PORTAL_ROOT_ID);
+            if (portalRoot) {
+                portalRoot.style.zIndex = '9999';
+                return true;
+            }
+            return false;
+        };
+        // Try immediately
+        if (setPortalZIndex()) {
+            return;
+        }
+        // If not found yet, observe for it
+        const observer = new MutationObserver(() => {
+            if (setPortalZIndex()) {
+                observer.disconnect();
+            }
+        });
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+        return () => {
+            observer.disconnect();
+        };
+    }, []);
+}
 /**
  * Check if an item is a tool call message
  */
@@ -120,8 +165,29 @@ export function ChatBase({ title, showHeader = false, showLoadingIndicator = tru
 useStore: useStoreMode = true, protocol, onSendMessage, enableStreaming = false, 
 // Extended props
 brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, emptyState, renderToolResult, footerContent, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact = false, placeholder, description = 'Start a conversation with the AI agent.', onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus = false, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, focusTrigger, frontendTools, }) {
+    // Check if QueryClientProvider is already available
+    const existingQueryClient = useContext(QueryClientContext);
+    // If no QueryClient is available, wrap with our internal provider
+    if (!existingQueryClient) {
+        return (_jsx(QueryClientProvider, { client: internalQueryClient, children: _jsx(ChatBaseInner, { title: title, showHeader: showHeader, showLoadingIndicator: showLoadingIndicator, showErrors: showErrors, showInput: showInput, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, className: className, loadingState: loadingState, headerActions: headerActions, useStore: useStoreMode, protocol: protocol, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon, avatarConfig: avatarConfig, headerButtons: headerButtons, showPoweredBy: showPoweredBy, poweredByProps: poweredByProps, emptyState: emptyState, renderToolResult: renderToolResult, footerContent: footerContent, headerContent: headerContent, children: children, borderRadius: borderRadius, backgroundColor: backgroundColor, border: border, boxShadow: boxShadow, compact: compact, placeholder: placeholder, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, onClear: onClear, onMessagesChange: onMessagesChange, autoFocus: autoFocus, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, focusTrigger: focusTrigger, frontendTools: frontendTools }) }));
+    }
+    // QueryClient already available, render inner component directly
+    return (_jsx(ChatBaseInner, { title: title, showHeader: showHeader, showLoadingIndicator: showLoadingIndicator, showErrors: showErrors, showInput: showInput, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, className: className, loadingState: loadingState, headerActions: headerActions, useStore: useStoreMode, protocol: protocol, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon, avatarConfig: avatarConfig, headerButtons: headerButtons, showPoweredBy: showPoweredBy, poweredByProps: poweredByProps, emptyState: emptyState, renderToolResult: renderToolResult, footerContent: footerContent, headerContent: headerContent, children: children, borderRadius: borderRadius, backgroundColor: backgroundColor, border: border, boxShadow: boxShadow, compact: compact, placeholder: placeholder, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, onClear: onClear, onMessagesChange: onMessagesChange, autoFocus: autoFocus, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, focusTrigger: focusTrigger, frontendTools: frontendTools }));
+}
+/**
+ * Inner ChatBase component - contains all the actual logic
+ */
+function ChatBaseInner({ title, showHeader = false, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = false, showToolsMenu = false, className, loadingState, headerActions, 
+// Mode selection
+useStore: useStoreMode = true, protocol, onSendMessage, enableStreaming = false, 
+// Extended props
+brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, emptyState, renderToolResult, footerContent, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact = false, placeholder, description = 'Start a conversation with the AI agent.', onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus = false, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, focusTrigger, frontendTools, }) {
+    // Ensure Primer's default portal has high z-index for ActionMenu overlays
+    useHighZIndexPortal();
     // Store (optional for message persistence)
     const clearStoreMessages = useChatStore(state => state.clearMessages);
+    // Check if protocol is A2A (doesn't support per-request model override)
+    const isA2AProtocol = protocol?.type === 'a2a';
     // Component state
     const [displayItems, setDisplayItems] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
@@ -130,10 +196,12 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
     const [input, setInput] = useState('');
     // Model and tools state
     const [selectedModel, setSelectedModel] = useState('');
-    // Note: enabledTools is used for backend-defined tools from config query
+    // enabledTools tracks which MCP server tools are enabled
+    // Format: Map<serverId, Set<toolName>>
+    const [enabledMcpTools, setEnabledMcpTools] = useState(new Map());
+    // Note: legacy _enabledTools for backend-defined tools from config query
     // Frontend tools are passed via frontendTools prop
-    const [enabledTools, setEnabledTools] = useState([]);
-    void enabledTools; // Suppress unused warning - may be used in future
+    const [_enabledTools, setEnabledTools] = useState([]);
     // Config query (for protocols that support it)
     // Safely handles missing QueryClientProvider
     const configQuery = useConfigQuery(Boolean(protocol?.enableConfigQuery), protocol?.configEndpoint, protocol?.authToken);
@@ -201,14 +269,63 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
     // Initialize model and tools when config is available
     useEffect(() => {
         if (configQuery.data && !selectedModel) {
-            const firstModel = configQuery.data.models[0];
+            // Select first available model, or fallback to first model if none available
+            const firstAvailableModel = configQuery.data.models.find(m => m.isAvailable !== false);
+            const firstModel = firstAvailableModel || configQuery.data.models[0];
             if (firstModel) {
                 setSelectedModel(firstModel.id);
                 const allToolIds = configQuery.data.builtinTools?.map(tool => tool.id) || [];
                 setEnabledTools(allToolIds);
             }
+            // Initialize MCP server tools - all enabled by default
+            if (configQuery.data.mcpServers) {
+                const newEnabledMcpTools = new Map();
+                for (const server of configQuery.data.mcpServers) {
+                    if (server.isAvailable && server.enabled) {
+                        const enabledToolNames = new Set(server.tools.filter(t => t.enabled).map(t => t.name));
+                        newEnabledMcpTools.set(server.id, enabledToolNames);
+                    }
+                }
+                setEnabledMcpTools(newEnabledMcpTools);
+            }
         }
     }, [configQuery.data, selectedModel]);
+    // Helper to toggle MCP tool enabled state
+    const toggleMcpTool = useCallback((serverId, toolName) => {
+        setEnabledMcpTools(prev => {
+            const newMap = new Map(prev);
+            const serverTools = new Set(prev.get(serverId) || []);
+            if (serverTools.has(toolName)) {
+                serverTools.delete(toolName);
+            }
+            else {
+                serverTools.add(toolName);
+            }
+            newMap.set(serverId, serverTools);
+            return newMap;
+        });
+    }, []);
+    // Helper to toggle all tools for a MCP server
+    const toggleAllMcpServerTools = useCallback((serverId, allToolNames, enable) => {
+        setEnabledMcpTools(prev => {
+            const newMap = new Map(prev);
+            if (enable) {
+                newMap.set(serverId, new Set(allToolNames));
+            }
+            else {
+                newMap.set(serverId, new Set());
+            }
+            return newMap;
+        });
+    }, []);
+    // Get all enabled MCP tool names (for sending with requests)
+    const getEnabledMcpToolNames = useCallback(() => {
+        const toolNames = [];
+        enabledMcpTools.forEach(tools => {
+            tools.forEach(toolName => toolNames.push(toolName));
+        });
+        return toolNames;
+    }, [enabledMcpTools]);
     // Load messages from store on mount when useStoreMode is enabled
     useEffect(() => {
         if (useStoreMode) {
@@ -499,6 +616,8 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
             unsubscribeRef.current?.();
             adapterRef.current?.disconnect();
         };
+        // Note: frontendTools is accessed via ref-like closure, not as reactive dependency
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [protocol, renderToolResult, onStateUpdate, useStoreMode]);
     // Auto-scroll to bottom
     useEffect(() => {
@@ -605,14 +724,15 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
                     description: tool.description,
                     parameters: tool.parameters || { type: 'object', properties: {} },
                 }));
-                if (toolsForRequest.length > 0) {
-                    console.log('[ChatBase] Sending tools to AG-UI:', toolsForRequest.map(t => t.name));
-                }
+                // Get enabled MCP tool names
+                const enabledMcpToolNames = getEnabledMcpToolNames();
                 await adapterRef.current.sendMessage(userMessage, {
                     threadId: threadIdRef.current,
                     messages: allMessages,
                     ...(selectedModel && { model: selectedModel }),
                     tools: toolsForRequest,
+                    // Include enabled MCP tools as builtin_tools for backend
+                    builtinTools: enabledMcpToolNames,
                 });
             }
         }
@@ -639,6 +759,7 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
         useStoreMode,
         onSendMessage,
         enableStreaming,
+        getEnabledMcpToolNames,
     ]);
     // Handle stop
     const handleStop = useCallback(() => {
@@ -1049,8 +1170,20 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
                                             fontSize: 1,
                                             whiteSpace: 'pre-wrap',
                                             wordBreak: 'break-word',
-                                        }, children: getMessageText(message) })) : (_jsx(Box, { sx: { fontSize: 1, lineHeight: 1.5 }, children: _jsx(Streamdown, { children: getMessageText(message) || (isStreaming ? '...' : '') }) })) })] }) }, message.id));
-                }), (isLoading || isStreaming) && (_jsx(Box, { sx: {
+                                        }, children: getMessageText(message) })) : (_jsx(Box, { sx: {
+                                            fontSize: 1,
+                                            lineHeight: 1.5,
+                                            '& ul, & ol': {
+                                                marginTop: '0.5em',
+                                                marginBottom: '0.5em',
+                                                paddingInlineStart: '1.25em',
+                                                listStylePosition: 'inside',
+                                            },
+                                            '& li': {
+                                                paddingInlineStart: '0.25em',
+                                            },
+                                        }, children: _jsx(Streamdown, { children: getMessageText(message) || (isStreaming ? '...' : '') }) })) })] }) }, message.id));
+                }), showLoadingIndicator && (isLoading || isStreaming) && (_jsx(Box, { sx: {
                         display: 'flex',
                         alignItems: 'flex-start',
                         px: padding,
@@ -1157,13 +1290,70 @@ brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, e
                         borderColor: 'border.default',
                         alignItems: 'center',
                         bg: 'canvas.subtle',
-                    }, children: [showToolsMenu && (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { icon: ToolsIcon, "aria-label": "Tools", variant: "invisible", size: "small" }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", children: _jsx(ActionList, { children: _jsx(ActionList.Group, { title: "Available Tools", children: availableTools.length > 0 ? (availableTools.map(tool => (_jsxs(ActionList.Item, { disabled: true, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(Box, { sx: {
-                                                                width: 8,
-                                                                height: 8,
-                                                                borderRadius: '50%',
-                                                                backgroundColor: 'success.emphasis',
-                                                            } }) }), tool.name] }, tool.id)))) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: "No tools available" }) })) }) }) })] })), showModelSelector && models.length > 0 && selectedModel && (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { type: "button", variant: "invisible", size: "small", leadingVisual: AiModelIcon, children: _jsx(Text, { sx: { fontSize: 0 }, children: models.find(m => m.id === selectedModel)?.name ||
-                                                'Select Model' }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "end", children: _jsx(ActionList, { selectionVariant: "single", children: models.map(modelItem => (_jsx(ActionList.Item, { selected: selectedModel === modelItem.id, onSelect: () => setSelectedModel(modelItem.id), children: modelItem.name }, modelItem.id))) }) })] }))] }))] }));
+                    }, children: [showToolsMenu && (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(IconButton, { icon: ToolsIcon, "aria-label": "Tools", variant: "invisible", size: "small" }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: {
+                                            maxHeight: '60vh',
+                                            overflowY: 'auto',
+                                        }, children: _jsx(ActionList, { children: configQuery.data?.mcpServers &&
+                                                configQuery.data.mcpServers.length > 0 ? (configQuery.data.mcpServers.map(server => {
+                                                const serverTools = enabledMcpTools.get(server.id);
+                                                const allToolNames = server.tools.map(t => t.name);
+                                                const enabledCount = serverTools?.size ?? 0;
+                                                const allEnabled = enabledCount === allToolNames.length &&
+                                                    allToolNames.length > 0;
+                                                return (_jsxs(ActionList.Group, { title: `${server.name}${server.isAvailable ? '' : ' (unavailable)'}`, children: [server.isAvailable &&
+                                                            server.tools.length > 0 && (_jsxs(Box, { sx: {
+                                                                display: 'flex',
+                                                                alignItems: 'center',
+                                                                justifyContent: 'space-between',
+                                                                px: 3,
+                                                                py: 2,
+                                                                borderBottom: '1px solid',
+                                                                borderColor: 'border.muted',
+                                                            }, children: [_jsxs(Text, { id: `toggle-all-${server.id}`, sx: {
+                                                                        fontSize: 0,
+                                                                        fontWeight: 'semibold',
+                                                                        color: 'fg.muted',
+                                                                    }, children: ["Enable all (", enabledCount, "/", allToolNames.length, ")"] }), _jsx(ToggleSwitch, { size: "small", checked: allEnabled, onClick: () => toggleAllMcpServerTools(server.id, allToolNames, !allEnabled), "aria-labelledby": `toggle-all-${server.id}` })] })), server.isAvailable && server.tools.length > 0 ? (server.tools.map(tool => {
+                                                            const isEnabled = serverTools?.has(tool.name) ?? false;
+                                                            return (_jsxs(Box, { sx: {
+                                                                    display: 'flex',
+                                                                    alignItems: 'center',
+                                                                    justifyContent: 'space-between',
+                                                                    px: 3,
+                                                                    py: 2,
+                                                                    '&:hover': {
+                                                                        backgroundColor: 'canvas.subtle',
+                                                                    },
+                                                                }, children: [_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { id: `toggle-tool-${server.id}-${tool.name}`, sx: { fontWeight: 'semibold' }, children: tool.name }), tool.description && (_jsx(Text, { sx: {
+                                                                                    display: 'block',
+                                                                                    fontSize: 0,
+                                                                                    color: 'fg.muted',
+                                                                                    overflow: 'hidden',
+                                                                                    textOverflow: 'ellipsis',
+                                                                                    whiteSpace: 'nowrap',
+                                                                                }, children: tool.description }))] }), _jsx(ToggleSwitch, { size: "small", checked: isEnabled, onClick: () => toggleMcpTool(server.id, tool.name), "aria-labelledby": `toggle-tool-${server.id}-${tool.name}` })] }, `${server.id}-${tool.name}`));
+                                                        })) : server.isAvailable ? (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: {
+                                                                    color: 'fg.muted',
+                                                                    fontStyle: 'italic',
+                                                                }, children: "No tools discovered" }) })) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: {
+                                                                    color: 'fg.muted',
+                                                                    fontStyle: 'italic',
+                                                                }, children: "Server unavailable" }) }))] }, server.id));
+                                            })) : (_jsx(ActionList.Group, { title: "Available Tools", children: availableTools.length > 0 ? (availableTools.map(tool => (_jsxs(ActionList.Item, { disabled: true, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(Box, { sx: {
+                                                                    width: 8,
+                                                                    height: 8,
+                                                                    borderRadius: '50%',
+                                                                    backgroundColor: 'success.emphasis',
+                                                                } }) }), tool.name] }, tool.id)))) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: "No tools available" }) })) })) }) }) })] })), showModelSelector && models.length > 0 && selectedModel && (_jsxs(Box, { sx: {
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'flex-end',
+                            }, children: [_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { type: "button", variant: "invisible", size: "small", leadingVisual: AiModelIcon, disabled: isA2AProtocol, sx: isA2AProtocol
+                                                    ? { opacity: 0.5, cursor: 'not-allowed' }
+                                                    : undefined, children: _jsx(Text, { sx: { fontSize: 0 }, children: models.find(m => m.id === selectedModel)?.name ||
+                                                        'Select Model' }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "end", children: _jsx(ActionList, { selectionVariant: "single", children: models.map(modelItem => (_jsxs(ActionList.Item, { selected: selectedModel === modelItem.id, onSelect: () => setSelectedModel(modelItem.id), disabled: modelItem.isAvailable === false || isA2AProtocol, sx: modelItem.isAvailable === false
+                                                        ? { color: 'fg.muted' }
+                                                        : undefined, children: [modelItem.name, modelItem.isAvailable === false && (_jsx(ActionList.Description, { variant: "block", children: "Missing API key" }))] }, modelItem.id))) }) })] }), isA2AProtocol && (_jsx(Text, { sx: { fontSize: 0, color: 'attention.fg', mt: 1 }, children: "A2A: Model set by agent config" }))] }))] }))] }));
     };
     return (_jsxs(Box, { className: className, sx: {
             display: 'flex',

package/lib/components/chat/components/index.d.ts

@@ -17,5 +17,5 @@ export { MessagePart, type MessagePartProps } from './elements/MessagePart';
 export { TextPart, type TextPartProps, ReasoningPart, type ReasoningPartProps, ToolPart, type ToolPartProps, DynamicToolPart, type DynamicToolPartProps, } from './parts';
 export { ToolCallDisplay, type ToolCallDisplayProps } from './display';
 export { Chat, type ChatProps, type Transport, type Extension } from './Chat';
-export { ChatFloating, type ChatFloatingProps, type ToolCallRenderContext, type ToolCallStatus, type RenderToolResult, type RespondCallback, type Suggestion, } from './ChatFloating';
+export { ChatFloating, type ChatFloatingProps, type ToolCallRenderContext, type ToolCallStatus, type RenderToolResult, type RespondCallback, type Suggestion, type RemoteConfig, type ModelConfig, type BuiltinTool, type MCPServerConfig, type MCPServerTool, } from './ChatFloating';
 export { ChatInline, type ChatInlineProps, type ChatInlineProtocolConfig, } from './ChatInline';

package/lib/components/chat/components/parts/TextPart.js

@@ -47,7 +47,11 @@ export function TextPart({ text, message, isLastPart, onRegenerate, }) {
                     '& ul, & ol': {
                         marginTop: '0.5em',
                         marginBottom: '0.5em',
-                        paddingLeft: '1.5em',
+                        paddingLeft: '1.2em',
+                        marginLeft: '0.3em',
+                    },
+                    '& li': {
+                        listStylePosition: 'inside',
                     },
                     '& code': {
                         backgroundColor: 'neutral.muted',

package/lib/components/chat/index.d.ts

@@ -56,6 +56,6 @@ export { BaseProtocolAdapter, AGUIAdapter, A2AAdapter, ACPAdapter, type AGUIAdap
 export { ToolExecutor, type ToolExecutionContext } from './tools';
 export { MiddlewarePipeline, createMiddleware, loggingMiddleware, createHITLMiddleware, type RequestContext, type ResponseContext, } from './middleware';
 export { ExtensionRegistry, createMessageRenderer, createActivityRenderer, createA2UIRenderer, A2UIExtensionImpl, type A2UIMessage, } from './extensions';
-export { ChatMessages, ChatInputPrompt, ChatSidebar, ChatStandalone, ChatBase, ToolApprovalDialog, useToolApprovalDialog, PoweredByTag, FloatingBrandButton, ChatHeader, MessagePart, TextPart, ReasoningPart, ToolPart, DynamicToolPart, ToolCallDisplay, Chat, ChatFloating, type ChatMessagesProps, type ChatInputPromptProps, type ChatSidebarProps, type ChatStandaloneProps, type MessageHandler, type ChatBaseProps, type ProtocolConfig, type ToolApprovalDialogProps, type PoweredByTagProps, type FloatingBrandButtonProps, type ChatFloatingProps, type ToolCallRenderContext, type ToolCallStatus, type RenderToolResult, type RespondCallback, type Suggestion, type ChatHeaderProps, type ConnectionState, type MessagePartProps, type TextPartProps, type ReasoningPartProps, type ToolPartProps, type DynamicToolPartProps, type ToolCallDisplayProps, type ChatProps, type Transport, type Extension, } from './components';
+export { ChatMessages, ChatInputPrompt, ChatSidebar, ChatStandalone, ChatBase, ToolApprovalDialog, useToolApprovalDialog, PoweredByTag, FloatingBrandButton, ChatHeader, MessagePart, TextPart, ReasoningPart, ToolPart, DynamicToolPart, ToolCallDisplay, Chat, ChatFloating, type ChatMessagesProps, type ChatInputPromptProps, type ChatSidebarProps, type ChatStandaloneProps, type MessageHandler, type ChatBaseProps, type ProtocolConfig, type ToolApprovalDialogProps, type PoweredByTagProps, type FloatingBrandButtonProps, type ChatFloatingProps, type ToolCallRenderContext, type ToolCallStatus, type RenderToolResult, type RespondCallback, type Suggestion, type RemoteConfig, type ModelConfig, type BuiltinTool, type MCPServerConfig, type MCPServerTool, type ChatHeaderProps, type ConnectionState, type MessagePartProps, type TextPartProps, type ReasoningPartProps, type ToolPartProps, type DynamicToolPartProps, type ToolCallDisplayProps, type ChatProps, type Transport, type Extension, } from './components';
 export { requestAPI } from './handler';
 export { useKeyboardShortcuts, useChatKeyboardShortcuts, getShortcutDisplay, type KeyboardShortcut, type UseKeyboardShortcutsOptions, } from '../../hooks';

package/lib/components/chat/protocols/A2AAdapter.d.ts

@@ -51,6 +51,8 @@ export declare class A2AAdapter extends BaseProtocolAdapter {
         tools?: ToolDefinition[];
         threadId?: string;
         metadata?: Record<string, unknown>;
+        /** Model to use for this request (overrides agent default) */
+        model?: string;
     }): Promise<void>;
     /**
      * Send tool result back

package/lib/components/chat/protocols/A2AAdapter.js

@@ -137,10 +137,19 @@ export class A2AAdapter extends BaseProtocolAdapter {
                 configuration: {
                     acceptedOutputModes: ['text', 'text/plain'],
                     requestedExtensions: this.a2aConfig.enableA2UI ? ['a2ui'] : [],
+                    // Model override for per-request model selection
+                    // Note: fasta2a/pydantic-ai A2A doesn't currently support per-request model override
+                    // The model is configured at agent creation time
+                    ...(options?.model && { model: options.model }),
                 },
+                // Also send model in metadata for potential future support
+                ...(options?.model && { metadata: { model: options.model } }),
             },
             id: taskId,
         };
+        if (options?.model) {
+            console.log('[A2AAdapter] Sending with model:', options.model, '(Note: A2A uses agent-level model, not per-request)');
+        }
         try {
             const response = await fetch(this.a2aConfig.baseUrl, {
                 method: 'POST',

package/lib/components/chat/protocols/ACPAdapter.d.ts

@@ -113,6 +113,8 @@ export declare class ACPAdapter extends BaseProtocolAdapter {
         tools?: ToolDefinition[];
         threadId?: string;
         metadata?: Record<string, unknown>;
+        /** Model to use for this request (overrides agent default) */
+        model?: string;
     }): Promise<void>;
     /**
      * Send tool result back through ACP