@datalayer/agent-runtimes 1.0.2 → 1.0.3

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

@@ -1,2242 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-/*
- * Copyright (c) 2025-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-/**
- * Main ChatBase component.
- * Provides a full chat interface with messages and input.
- * This is the base component used by all other chat container components.
- *
- * Supports multiple modes:
- * 1. Store mode: Uses Zustand store for state management (default)
- * 2. Protocol mode: Connects to backend via AG-UI, A2A, ACP, or Vercel AI protocols
- * 3. Custom mode: Uses onSendMessage prop for custom message handling
- *
- * @module components/chat/components/ChatBase
- */
-import { useContext } from 'react';
-import { useCallback, useEffect, useRef, useState, } from 'react';
-import { Heading, Text, Spinner, IconButton, Button, ActionMenu, ActionList, LabelGroup, Label, ToggleSwitch, } from '@primer/react';
-import { Box } from '@datalayer/primer-addons';
-import { AlertIcon, PlusIcon, TrashIcon, GearIcon, PersonIcon, ToolsIcon, AiModelIcon, BriefcaseIcon, CircleIcon, SquareFillIcon, CommentDiscussionIcon, DeviceMobileIcon, SidebarExpandIcon, InfoIcon, } from '@primer/octicons-react';
-import { AiAgentIcon } from '@datalayer/icons-react';
-import ReactECharts from 'echarts-for-react';
-import { useQuery, QueryClient, QueryClientProvider, QueryClientContext, } from '@tanstack/react-query';
-import { Streamdown } from 'streamdown';
-import { streamdownMarkdownStyles, streamdownCodeBlockStyles, } from '../styles/streamdownStyles';
-import { PoweredByTag } from '../elements/PoweredByTag';
-import { requestAPI } from '../../handler';
-import { useChatStore } from '../../store/chatStore';
-import { useConversationStore } from '../../store/conversationStore';
-import { generateMessageId, createUserMessage, createAssistantMessage, } from '../../types/message';
-import { AGUIAdapter, A2AAdapter, VercelAIAdapter, ACPAdapter, } from '../../protocols';
-import { ToolCallDisplay } from '../display/ToolCallDisplay';
-import { InputPrompt } from './InputPrompt';
-// 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
- */
-function isToolCallMessage(item) {
-    return 'type' in item && item.type === 'tool-call';
-}
-/**
- * Extract text content from a ChatMessage
- */
-function getMessageText(message) {
-    if (typeof message.content === 'string') {
-        return message.content;
-    }
-    // Array of ContentPart - extract text parts
-    return message.content
-        .filter((part) => part.type === 'text')
-        .map(part => part.text)
-        .join('');
-}
-/**
- * Convert history messages to display items.
- *
- * History returns:
- * - Assistant messages with `toolCalls` array (tool invocations)
- * - Tool messages (role='tool') with content (tool results)
- *
- * For display, we need to:
- * 1. Keep user/assistant text messages as ChatMessage
- * 2. Convert each toolCall from assistant messages into a ToolCallMessage
- * 3. Match tool result messages (role='tool') to their ToolCallMessage and update result
- * 4. Filter out raw tool messages (role='tool') from display — they're merged into ToolCallMessage
- */
-function convertHistoryToDisplayItems(messages) {
-    const displayItems = [];
-    const toolCallMap = new Map();
-    // First pass: collect all tool calls and build the initial display list
-    for (const msg of messages) {
-        if (msg.role === 'tool') {
-            // Tool result messages — will be merged later
-            const toolCallId = msg.metadata?.toolCallId;
-            if (toolCallId && toolCallMap.has(toolCallId)) {
-                // Update the existing tool call with the result
-                const toolCall = toolCallMap.get(toolCallId);
-                toolCall.result = msg.content;
-                toolCall.status = 'complete';
-            }
-            // Don't add tool messages to display — they're represented by ToolCallMessage
-            continue;
-        }
-        if (msg.role === 'assistant' && msg.toolCalls && msg.toolCalls.length > 0) {
-            // Assistant message with tool calls
-            // First add any text content as a regular message
-            const textContent = typeof msg.content === 'string' ? msg.content.trim() : '';
-            if (textContent) {
-                displayItems.push({
-                    ...msg,
-                    toolCalls: undefined, // Remove toolCalls from the text message
-                });
-            }
-            // Then add each tool call as a ToolCallMessage
-            // Map from message.ts ToolCallStatus to ChatBase ToolCallStatus
-            for (const tc of msg.toolCalls) {
-                let status = 'complete';
-                if (tc.status === 'pending' || tc.status === 'awaiting-approval') {
-                    status = 'inProgress';
-                }
-                else if (tc.status === 'executing') {
-                    status = 'executing';
-                }
-                else if (tc.status === 'failed') {
-                    status = 'error';
-                }
-                const toolCallMsg = {
-                    id: `tc-${tc.toolCallId}`,
-                    type: 'tool-call',
-                    toolCallId: tc.toolCallId,
-                    toolName: tc.toolName,
-                    args: tc.args || {},
-                    status,
-                    result: tc.result,
-                };
-                toolCallMap.set(tc.toolCallId, toolCallMsg);
-                displayItems.push(toolCallMsg);
-            }
-        }
-        else {
-            // Regular user/assistant/system message
-            displayItems.push(msg);
-        }
-    }
-    return displayItems;
-}
-/**
- * Create protocol adapter based on configuration
- */
-function createProtocolAdapter(config) {
-    const adapterConfig = {
-        type: config.type,
-        baseUrl: config.endpoint,
-        authToken: config.authToken,
-        agentId: config.agentId,
-        ...config.options,
-    };
-    switch (config.type) {
-        case 'ag-ui':
-            return new AGUIAdapter(adapterConfig);
-        case 'a2a':
-            return new A2AAdapter(adapterConfig);
-        case 'vercel-ai':
-            return new VercelAIAdapter(adapterConfig);
-        case 'acp':
-            return new ACPAdapter(adapterConfig);
-        default:
-            console.warn(`[ChatBase] Unknown protocol type: ${config.type}`);
-            return null;
-    }
-}
-/**
- * Hook to safely use query when QueryClient is available
- * Returns null if no QueryClientProvider is present
- */
-function useConfigQuery(enabled, configEndpoint, authToken) {
-    const queryClient = useContext(QueryClientContext);
-    // If no QueryClient is available, return a mock result
-    if (!queryClient) {
-        return {
-            data: undefined,
-            isLoading: false,
-            isError: false,
-            error: null,
-        };
-    }
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useQuery({
-        queryFn: async () => {
-            // If configEndpoint is provided, use direct fetch (for FastAPI)
-            if (configEndpoint) {
-                const headers = {
-                    'Content-Type': 'application/json',
-                };
-                if (authToken) {
-                    headers['Authorization'] = `Bearer ${authToken}`;
-                }
-                const response = await fetch(configEndpoint, { headers });
-                if (!response.ok) {
-                    throw new Error(`Config fetch failed: ${response.statusText}`);
-                }
-                return response.json();
-            }
-            // Otherwise use Jupyter requestAPI
-            return requestAPI('configure');
-        },
-        queryKey: ['models', configEndpoint || 'jupyter'],
-        enabled,
-        retry: 1,
-    });
-}
-/**
- * Hook to fetch available skills from backend
- */
-function useSkillsQuery(enabled, baseEndpoint, authToken) {
-    const queryClient = useContext(QueryClientContext);
-    // If no QueryClient is available, return a mock result
-    if (!queryClient) {
-        return {
-            data: undefined,
-            isLoading: false,
-            isError: false,
-            error: null,
-            refetch: () => Promise.resolve({ data: undefined }),
-        };
-    }
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useQuery({
-        queryFn: async () => {
-            if (!baseEndpoint) {
-                return { skills: [], total: 0 };
-            }
-            // Derive skills endpoint from config endpoint
-            const skillsEndpoint = baseEndpoint.replace('/configure', '/skills');
-            const headers = {
-                'Content-Type': 'application/json',
-            };
-            if (authToken) {
-                headers['Authorization'] = `Bearer ${authToken}`;
-            }
-            const response = await fetch(skillsEndpoint, { headers });
-            if (!response.ok) {
-                throw new Error(`Skills fetch failed: ${response.statusText}`);
-            }
-            return response.json();
-        },
-        queryKey: ['skills', baseEndpoint || 'jupyter'],
-        enabled,
-        staleTime: 5 * 60 * 1000, // 5 minutes
-        retry: 1,
-    });
-}
-/**
- * Format token count for compact display
- */
-function formatTokenCount(tokens) {
-    if (tokens >= 1_000_000)
-        return `${(tokens / 1_000_000).toFixed(1)}M`;
-    if (tokens >= 1_000)
-        return `${(tokens / 1_000).toFixed(1)}K`;
-    return tokens.toString();
-}
-/**
- * Derive the API base URL from a configEndpoint.
- * configEndpoint may look like:
- *   "http://host:port/api/v1/config"     (from agentRuntimeConfig)
- *   "http://host:port/api/v1/configure"   (from Chat component)
- * We strip the trailing path segment to get "http://host:port/api/v1".
- */
-function getApiBaseFromConfig(configEndpoint) {
-    return configEndpoint.replace(/\/(config|configure)\/?$/, '');
-}
-/**
- * Hook to poll agent context-snapshot from the backend.
- * Returns cumulative token usage (input/output breakdown) tracked by the agent server.
- * Uses the same endpoint as codeai: GET /api/v1/configure/agents/{agentId}/context-snapshot
- */
-function useContextSnapshotQuery(enabled, configEndpoint, agentId, authToken) {
-    const queryClient = useContext(QueryClientContext);
-    if (!queryClient) {
-        return { data: undefined, isLoading: false, isError: false, error: null };
-    }
-    const snapshotUrl = configEndpoint && agentId
-        ? `${getApiBaseFromConfig(configEndpoint)}/configure/agents/${encodeURIComponent(agentId)}/context-snapshot`
-        : undefined;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const result = useQuery({
-        queryKey: ['context-snapshot-header', agentId, snapshotUrl],
-        queryFn: async () => {
-            if (!snapshotUrl) {
-                throw new Error('No context-snapshot URL available');
-            }
-            const headers = { 'Content-Type': 'application/json' };
-            if (authToken) {
-                headers['Authorization'] = `Bearer ${authToken}`;
-            }
-            const response = await fetch(snapshotUrl, { headers });
-            if (!response.ok) {
-                throw new Error(`Context snapshot fetch failed: ${response.statusText}`);
-            }
-            return response.json();
-        },
-        enabled: enabled && !!snapshotUrl,
-        // Poll every 10 seconds, but stop polling once the query has errored (e.g. runtime terminated)
-        refetchInterval: query => (query.state.status === 'error' ? false : 10_000),
-        refetchOnMount: 'always',
-        staleTime: 0,
-        retry: 1,
-    });
-    return result;
-}
-/**
- * Hook to poll sandbox execution status from the backend.
- * Returns whether a sandbox is available and if code is currently executing.
- */
-function useSandboxStatusQuery(enabled, configEndpoint, authToken) {
-    const queryClient = useContext(QueryClientContext);
-    if (!queryClient) {
-        return {
-            data: undefined,
-            isLoading: false,
-            isError: false,
-            error: null,
-            refetch: () => Promise.resolve({}),
-        };
-    }
-    const statusUrl = configEndpoint
-        ? `${getApiBaseFromConfig(configEndpoint)}/configure/sandbox-status`
-        : undefined;
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const result = useQuery({
-        queryKey: ['sandbox-status', statusUrl],
-        queryFn: async () => {
-            if (!statusUrl) {
-                throw new Error('No sandbox status URL available');
-            }
-            const headers = { 'Content-Type': 'application/json' };
-            if (authToken) {
-                headers['Authorization'] = `Bearer ${authToken}`;
-            }
-            const response = await fetch(statusUrl, { headers });
-            if (!response.ok) {
-                throw new Error(`Sandbox status fetch failed: ${response.statusText}`);
-            }
-            return response.json();
-        },
-        enabled: enabled && !!statusUrl,
-        refetchInterval: query => (query.state.status === 'error' ? false : 2_000),
-        refetchOnMount: 'always',
-        staleTime: 0,
-        retry: 1,
-    });
-    return result;
-}
-/**
- * ChatBase component - Universal chat panel supporting store, protocol, and custom modes
- */
-export function ChatBase({ title, showHeader = false, showTokenUsage = true, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, codemodeEnabled = false, initialModel, availableModels, mcpServers, initialSkills, className, loadingState, headerActions, chatViewMode, onChatViewModeChange, 
-// Mode selection
-useStore: useStoreMode = true, protocol: protocolProp, agentRuntimeConfig, onSendMessage, enableStreaming = false, 
-// Extended props
-brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, emptyState, renderToolResult, footerContent, showInformation = false, onInformationClick, 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, 
-// Identity/Authorization props
-onAuthorizationRequired, connectedIdentities, 
-// Conversation persistence
-runtimeId, historyEndpoint, historyAuthToken, 
-// Pending prompt
-pendingPrompt, }) {
-    const protocol = agentRuntimeConfig
-        ? {
-            type: agentRuntimeConfig.protocol || 'ag-ui',
-            endpoint: agentRuntimeConfig.url,
-            authToken: agentRuntimeConfig.authToken,
-            agentId: agentRuntimeConfig.agentId,
-            enableConfigQuery: true,
-            configEndpoint: `${agentRuntimeConfig.url}/api/v1/config`,
-        }
-        : protocolProp;
-    // If agentRuntimeConfig is provided, force protocol mode
-    const effectiveUseStoreMode = agentRuntimeConfig ? false : useStoreMode;
-    // 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, showTokenUsage: showTokenUsage, showLoadingIndicator: showLoadingIndicator, showErrors: showErrors, showInput: showInput, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, codemodeEnabled: codemodeEnabled, initialModel: initialModel, availableModels: availableModels, mcpServers: mcpServers, initialSkills: initialSkills, className: className, loadingState: loadingState, headerActions: headerActions, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange, useStore: effectiveUseStoreMode, protocol: protocol, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon, avatarConfig: avatarConfig, headerButtons: headerButtons, showPoweredBy: showPoweredBy, poweredByProps: poweredByProps, emptyState: emptyState, renderToolResult: renderToolResult, footerContent: footerContent, showInformation: showInformation, onInformationClick: onInformationClick, 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, onAuthorizationRequired: onAuthorizationRequired, connectedIdentities: connectedIdentities, runtimeId: runtimeId, historyEndpoint: historyEndpoint, historyAuthToken: historyAuthToken, pendingPrompt: pendingPrompt }) }));
-    }
-    // QueryClient already available, render inner component directly
-    return (_jsx(ChatBaseInner, { title: title, showHeader: showHeader, showTokenUsage: showTokenUsage, showLoadingIndicator: showLoadingIndicator, showErrors: showErrors, showInput: showInput, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, codemodeEnabled: codemodeEnabled, initialModel: initialModel, availableModels: availableModels, mcpServers: mcpServers, initialSkills: initialSkills, className: className, loadingState: loadingState, headerActions: headerActions, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange, useStore: effectiveUseStoreMode, protocol: protocol, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon, avatarConfig: avatarConfig, headerButtons: headerButtons, showPoweredBy: showPoweredBy, poweredByProps: poweredByProps, emptyState: emptyState, renderToolResult: renderToolResult, footerContent: footerContent, showInformation: showInformation, onInformationClick: onInformationClick, 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, onAuthorizationRequired: onAuthorizationRequired, connectedIdentities: connectedIdentities, runtimeId: runtimeId, historyEndpoint: historyEndpoint, historyAuthToken: historyAuthToken, pendingPrompt: pendingPrompt }));
-}
-/**
- * Inner ChatBase component - contains all the actual logic
- */
-function ChatBaseInner({ title, showHeader = false, showTokenUsage = true, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, codemodeEnabled = false, initialModel, availableModels, mcpServers, initialSkills, className, loadingState, headerActions, chatViewMode, onChatViewModeChange, 
-// Mode selection
-useStore: useStoreMode = true, protocol, onSendMessage, enableStreaming = false, 
-// Extended props
-brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, emptyState, renderToolResult, footerContent, showInformation = false, onInformationClick, 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, 
-// Identity/Authorization props
-onAuthorizationRequired, connectedIdentities, 
-// Conversation persistence
-runtimeId, historyEndpoint, historyAuthToken, 
-// Pending prompt
-pendingPrompt, }) {
-    useHighZIndexPortal();
-    // Stabilize the protocol reference so that the adapter-init effect only
-    // re-runs when the protocol *contents* actually change, not just when the
-    // parent re-renders with a new object literal that has the same values.
-    const protocolKey = protocol ? JSON.stringify(protocol) : '';
-    // 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);
-    const [isStreaming, setIsStreaming] = useState(false);
-    const [error, setError] = useState(null);
-    const [input, setInput] = useState('');
-    // History-loaded flag — true immediately when there is nothing to fetch
-    const [historyLoaded, setHistoryLoaded] = useState(!runtimeId);
-    // Adapter-ready flag — flipped to true once the protocol adapter is initialised
-    const [adapterReady, setAdapterReady] = useState(false);
-    // Guard so the pending prompt is sent at most once
-    const pendingPromptSentRef = useRef(false);
-    const [selectedModel, setSelectedModel] = useState('');
-    // 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([]);
-    // Skills state - tracks which skills are enabled
-    const [enabledSkills, setEnabledSkills] = useState(new Set());
-    // Config query (for protocols that support it)
-    // Safely handles missing QueryClientProvider
-    const configQuery = useConfigQuery(Boolean(protocol?.enableConfigQuery), protocol?.configEndpoint, protocol?.authToken);
-    // Skills query (for protocols that support it)
-    const skillsQuery = useSkillsQuery(Boolean(protocol?.enableConfigQuery) && showSkillsMenu, protocol?.configEndpoint, protocol?.authToken);
-    // Context snapshot query — polls agent-level cumulative token usage (input/output breakdown)
-    // Gated by showTokenUsage (not showHeader), so usage is visible even without a title bar.
-    const contextSnapshotQuery = useContextSnapshotQuery(Boolean(protocol?.enableConfigQuery) && showTokenUsage, protocol?.configEndpoint, protocol?.agentId, protocol?.authToken);
-    const agentUsage = contextSnapshotQuery.data;
-    // Sandbox status query — polls sandbox execution state for the header indicator.
-    // Only active when codemode is enabled and there's a config endpoint.
-    const sandboxStatusQuery = useSandboxStatusQuery(Boolean(protocol?.enableConfigQuery) && codemodeEnabled && showHeader, protocol?.configEndpoint, protocol?.authToken);
-    const sandboxStatus = sandboxStatusQuery.data;
-    // Refs
-    const adapterRef = useRef(null);
-    const unsubscribeRef = useRef(null);
-    const toolCallsRef = useRef(new Map());
-    // Track the number of in-flight frontend tool executions.
-    // While > 0, isLoading must stay true (the agent turn is not finished).
-    const pendingToolExecutionsRef = useRef(0);
-    const currentAssistantMessageRef = useRef(null);
-    const threadIdRef = useRef(generateMessageId());
-    const messagesEndRef = useRef(null);
-    const inputRef = useRef(null);
-    const abortControllerRef = useRef(null);
-    // State for context pie chart overlay
-    const [contextOverlayOpen, setContextOverlayOpen] = useState(false);
-    const contextAnchorRef = useRef(null);
-    const hoverTimeoutRef = useRef(null);
-    // Use a ref for connectedIdentities to avoid infinite loops in useCallback
-    // (the array reference changes on every render even if contents are the same)
-    const connectedIdentitiesRef = useRef(connectedIdentities);
-    connectedIdentitiesRef.current = connectedIdentities;
-    const isServerSelected = useCallback((server) => {
-        if (!mcpServers)
-            return true;
-        const origin = server.isConfig === false ? 'catalog' : 'config';
-        return mcpServers.some(s => s.id === server.id && s.origin === origin);
-    }, [mcpServers]);
-    // Auto-focus input on mount
-    useEffect(() => {
-        if (autoFocus && inputRef.current) {
-            // Small delay to ensure the component is fully rendered
-            const timeoutId = setTimeout(() => {
-                inputRef.current?.focus();
-            }, 100);
-            return () => clearTimeout(timeoutId);
-        }
-    }, [autoFocus]);
-    // Refocus input when focusTrigger changes
-    useEffect(() => {
-        if (focusTrigger !== undefined && focusTrigger > 0 && inputRef.current) {
-            // Small delay to ensure any layout changes have completed
-            const timeoutId = setTimeout(() => {
-                inputRef.current?.focus();
-            }, 150);
-            return () => clearTimeout(timeoutId);
-        }
-    }, [focusTrigger]);
-    // Track previous loading state to detect when loading completes
-    const wasLoadingRef = useRef(false);
-    // Refocus input when loading completes
-    useEffect(() => {
-        if (wasLoadingRef.current && !isLoading && inputRef.current) {
-            // Small delay to ensure the input is fully enabled
-            const timeoutId = setTimeout(() => {
-                inputRef.current?.focus();
-            }, 50);
-            return () => clearTimeout(timeoutId);
-        }
-        wasLoadingRef.current = isLoading;
-    }, [isLoading]);
-    // Auto-resize textarea based on content
-    const adjustTextareaHeight = useCallback(() => {
-        const textarea = inputRef.current;
-        if (textarea) {
-            // Reset height to auto to get proper scrollHeight
-            textarea.style.height = 'auto';
-            // Set height to scrollHeight, capped at maxHeight (120px)
-            const maxHeight = 120;
-            const minHeight = 40;
-            const newHeight = Math.min(Math.max(textarea.scrollHeight, minHeight), maxHeight);
-            textarea.style.height = `${newHeight}px`;
-            // Add overflow if content exceeds maxHeight
-            textarea.style.overflowY =
-                textarea.scrollHeight > maxHeight ? 'auto' : 'hidden';
-        }
-    }, []);
-    // Adjust textarea height when input changes
-    useEffect(() => {
-        adjustTextareaHeight();
-    }, [input, adjustTextareaHeight]);
-    // Ensure textarea has a minimum height on mount
-    useEffect(() => {
-        const timer = setTimeout(adjustTextareaHeight, 0);
-        return () => clearTimeout(timer);
-    }, [adjustTextareaHeight]);
-    // Initialize model and tools when config is available
-    useEffect(() => {
-        if ((configQuery.data || availableModels) && !selectedModel) {
-            // Use availableModels override if provided, otherwise use config models
-            const modelsList = availableModels || configQuery.data?.models || [];
-            // Priority: initialModel prop > defaultModel from config > first available model
-            const preferredModel = initialModel || configQuery.data?.defaultModel;
-            if (preferredModel) {
-                // Check if the preferred model exists in the models list
-                const modelExists = modelsList.some(m => m.id === preferredModel);
-                if (modelExists) {
-                    setSelectedModel(preferredModel);
-                }
-                else {
-                    // Fallback to first available model if preferred model not found
-                    const firstAvailableModel = modelsList.find(m => m.isAvailable !== false);
-                    const firstModel = firstAvailableModel || modelsList[0];
-                    if (firstModel) {
-                        setSelectedModel(firstModel.id);
-                    }
-                }
-            }
-            else {
-                // No preferred model, select first available model
-                const firstAvailableModel = modelsList.find(m => m.isAvailable !== false);
-                const firstModel = firstAvailableModel || modelsList[0];
-                if (firstModel) {
-                    setSelectedModel(firstModel.id);
-                }
-            }
-            const allToolIds = configQuery.data?.builtinTools?.map(tool => tool.id) || [];
-            setEnabledTools(allToolIds);
-            // Initialize MCP server tools
-            if (configQuery.data?.mcpServers) {
-                const newEnabledMcpTools = new Map();
-                for (const server of configQuery.data.mcpServers) {
-                    if (server.isAvailable && server.enabled) {
-                        // If mcpServers is provided, only enable those servers
-                        // If not provided, enable all available servers
-                        const shouldEnableServer = isServerSelected(server);
-                        if (shouldEnableServer) {
-                            const enabledToolNames = new Set(server.tools.filter(t => t.enabled).map(t => t.name));
-                            newEnabledMcpTools.set(server.id, enabledToolNames);
-                        }
-                    }
-                }
-                setEnabledMcpTools(newEnabledMcpTools);
-            }
-        }
-    }, [
-        configQuery.data,
-        selectedModel,
-        initialModel,
-        availableModels,
-        mcpServers,
-        isServerSelected,
-    ]);
-    // Update enabled MCP servers when mcpServers prop changes (e.g., server removed)
-    useEffect(() => {
-        if (!configQuery.data?.mcpServers || !mcpServers)
-            return;
-        setEnabledMcpTools(prev => {
-            const newMap = new Map();
-            // Only keep servers that are in mcpServers
-            for (const server of configQuery.data?.mcpServers ?? []) {
-                if (isServerSelected(server) && prev.has(server.id)) {
-                    // Keep existing tool selection for this server
-                    newMap.set(server.id, prev.get(server.id));
-                }
-                else if (isServerSelected(server) &&
-                    server.isAvailable &&
-                    server.enabled) {
-                    // Newly added server - enable all tools
-                    const enabledToolNames = new Set(server.tools.filter(t => t.enabled).map(t => t.name));
-                    newMap.set(server.id, enabledToolNames);
-                }
-                // Servers not in mcpServers are excluded
-            }
-            return newMap;
-        });
-    }, [mcpServers, configQuery.data?.mcpServers, isServerSelected]);
-    // Initialize enabled skills from initialSkills prop
-    useEffect(() => {
-        if (initialSkills && initialSkills.length > 0) {
-            setEnabledSkills(new Set(initialSkills));
-        }
-    }, [initialSkills]);
-    // 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;
-        });
-    }, []);
-    // Helper to toggle skill enabled state
-    const toggleSkill = useCallback((skillId) => {
-        setEnabledSkills(prev => {
-            const newSet = new Set(prev);
-            if (newSet.has(skillId)) {
-                newSet.delete(skillId);
-            }
-            else {
-                newSet.add(skillId);
-            }
-            return newSet;
-        });
-    }, []);
-    // Helper to toggle all skills
-    const toggleAllSkills = useCallback((allSkillIds, enable) => {
-        setEnabledSkills(enable ? new Set(allSkillIds) : new Set());
-    }, []);
-    // Get all enabled MCP tool names (for sending with requests)
-    // Only counts tools from servers that are in mcpServers (if provided)
-    const getEnabledMcpToolNames = useCallback(() => {
-        const toolNames = [];
-        enabledMcpTools.forEach((tools, serverId) => {
-            // Filter by mcpServers if provided
-            if (!mcpServers || mcpServers.some(s => s.id === serverId)) {
-                tools.forEach(toolName => toolNames.push(toolName));
-            }
-        });
-        return toolNames;
-    }, [enabledMcpTools, mcpServers]);
-    // Get all enabled skill IDs (for sending with requests)
-    const getEnabledSkillIds = useCallback(() => {
-        return Array.from(enabledSkills);
-    }, [enabledSkills]);
-    // Load messages from store on mount when useStoreMode is enabled
-    useEffect(() => {
-        if (useStoreMode) {
-            const storeMessages = useChatStore.getState().messages;
-            if (storeMessages.length > 0) {
-                setDisplayItems(storeMessages);
-            }
-        }
-    }, [useStoreMode]);
-    // Track previous runtimeId to detect changes
-    const prevRuntimeIdRef = useRef(undefined);
-    // Clear displayItems and load messages when runtimeId changes
-    // This ensures each agent runtime has isolated conversation history
-    useEffect(() => {
-        // If runtimeId changed, clear displayItems first
-        if (runtimeId !== prevRuntimeIdRef.current) {
-            prevRuntimeIdRef.current = runtimeId;
-            // Clear current display items when switching runtime
-            setDisplayItems([]);
-            toolCallsRef.current.clear();
-            // If no runtimeId, nothing more to do
-            if (!runtimeId)
-                return;
-        }
-        else {
-            // runtimeId didn't change, skip
-            return;
-        }
-        const store = useConversationStore.getState();
-        // Check if we need to fetch (not already fetched and not currently fetching)
-        if (!store.needsFetch(runtimeId)) {
-            // Already fetched - load from in-memory store
-            const storedMessages = store.getMessages(runtimeId);
-            if (storedMessages.length > 0) {
-                setDisplayItems(storedMessages);
-            }
-            setHistoryLoaded(true);
-            return;
-        }
-        // Mark as fetching to prevent duplicate requests
-        store.setFetching(runtimeId, true);
-        // Build the history endpoint URL
-        let endpoint = historyEndpoint ||
-            (protocol?.endpoint ? `${protocol.endpoint}/api/v1/history` : null);
-        if (!endpoint) {
-            console.warn('[ChatBase] No history endpoint available for runtimeId:', runtimeId);
-            store.markFetched(runtimeId);
-            setHistoryLoaded(true);
-            return;
-        }
-        // Append agent_id query param if the protocol has an agentId
-        // and the URL doesn't already include one
-        if (protocol?.agentId && !endpoint.includes('agent_id=')) {
-            const separator = endpoint.includes('?') ? '&' : '?';
-            endpoint = `${endpoint}${separator}agent_id=${encodeURIComponent(protocol.agentId)}`;
-        }
-        // Fetch conversation history from server
-        const fetchHistory = async () => {
-            try {
-                const authToken = historyAuthToken || protocol?.authToken;
-                const headers = {
-                    'Content-Type': 'application/json',
-                };
-                if (authToken) {
-                    headers['Authorization'] = `Bearer ${authToken}`;
-                }
-                const response = await fetch(endpoint, {
-                    method: 'GET',
-                    headers,
-                    credentials: 'include',
-                });
-                if (!response.ok) {
-                    throw new Error(`Failed to fetch history: ${response.status} ${response.statusText}`);
-                }
-                const data = await response.json();
-                // Map server history messages to ChatMessage format.
-                // The server may return toolCalls in either the legacy {id, name, arguments}
-                // shape or the correct ToolCallContentPart {toolCallId, toolName, args} shape.
-                // Normalize both to ToolCallContentPart so the AG-UI adapter can serialize them.
-                const messages = (data.messages || []).map((msg) => {
-                    if (msg.toolCalls && Array.isArray(msg.toolCalls)) {
-                        msg.toolCalls = msg.toolCalls.map((tc) => {
-                            // If already in ToolCallContentPart format, keep as-is
-                            if (tc.toolCallId && tc.toolName)
-                                return tc;
-                            // Legacy format: {id, name, arguments} → ToolCallContentPart
-                            let parsedArgs = tc.args ?? tc.arguments ?? {};
-                            if (typeof parsedArgs === 'string') {
-                                try {
-                                    parsedArgs = JSON.parse(parsedArgs);
-                                }
-                                catch {
-                                    parsedArgs = {};
-                                }
-                            }
-                            return {
-                                type: 'tool-call',
-                                toolCallId: tc.toolCallId ?? tc.id ?? tc.tool_call_id ?? '',
-                                toolName: tc.toolName ?? tc.name ?? tc.tool_name ?? '',
-                                args: parsedArgs,
-                                status: tc.status ?? 'completed',
-                            };
-                        });
-                    }
-                    return msg;
-                });
-                // Store in memory and convert to display items
-                if (messages.length > 0) {
-                    store.setMessages(runtimeId, messages);
-                    // Convert to display items: expand tool calls, merge tool results
-                    const items = convertHistoryToDisplayItems(messages);
-                    setDisplayItems(items);
-                }
-                store.markFetched(runtimeId);
-                setHistoryLoaded(true);
-            }
-            catch (err) {
-                console.error('[ChatBase] Failed to fetch conversation history:', err);
-                store.markFetched(runtimeId);
-                setHistoryLoaded(true);
-            }
-        };
-        fetchHistory();
-    }, [
-        runtimeId,
-        historyEndpoint,
-        historyAuthToken,
-        protocol?.endpoint,
-        protocol?.authToken,
-    ]);
-    // Keep in-memory store in sync with displayItems (for session persistence)
-    useEffect(() => {
-        if (runtimeId && displayItems.length > 0) {
-            // Filter to only save ChatMessage items (not tool call items)
-            const messagesToSave = displayItems.filter((item) => !isToolCallMessage(item));
-            if (messagesToSave.length > 0) {
-                useConversationStore.getState().setMessages(runtimeId, messagesToSave);
-            }
-        }
-    }, [runtimeId, displayItems]);
-    // Derived state
-    const messages = displayItems.filter((item) => !isToolCallMessage(item));
-    const ready = true;
-    // Track previous message count to avoid unnecessary callbacks
-    const prevMessageCountRef = useRef(0);
-    // Notify parent when messages change (only when count actually changes)
-    useEffect(() => {
-        const currentCount = messages.length;
-        if (currentCount !== prevMessageCountRef.current) {
-            prevMessageCountRef.current = currentCount;
-            onMessagesChange?.(messages);
-        }
-    }, [displayItems, onMessagesChange]); // Use displayItems instead of messages to avoid infinite loop
-    // Padding based on compact mode
-    const padding = compact ? 2 : 3;
-    // Default avatar config
-    const defaultAvatarConfig = {
-        userAvatar: _jsx(PersonIcon, { size: 16 }),
-        assistantAvatar: _jsx(AiAgentIcon, { colored: true, size: 16 }),
-        showAvatars: true,
-        avatarSize: 32,
-        userAvatarBg: 'neutral.muted',
-        assistantAvatarBg: 'accent.emphasis',
-        ...avatarConfig,
-    };
-    // Initialize protocol adapter
-    useEffect(() => {
-        if (!protocol)
-            return;
-        const adapter = createProtocolAdapter(protocol);
-        if (!adapter)
-            return;
-        adapterRef.current = adapter;
-        setAdapterReady(true);
-        // Subscribe to protocol events
-        unsubscribeRef.current = adapter.subscribe((event) => {
-            switch (event.type) {
-                case 'message':
-                    // Update or create assistant message
-                    if (event.message) {
-                        const incomingId = event.message.id;
-                        const currentId = currentAssistantMessageRef.current?.id;
-                        const isNewMessage = !currentId || (incomingId && incomingId !== currentId);
-                        if (currentAssistantMessageRef.current && !isNewMessage) {
-                            // Update existing message (same ID)
-                            setDisplayItems(prev => {
-                                const newItems = [...prev];
-                                const idx = newItems.findIndex(item => !isToolCallMessage(item) &&
-                                    item.id === currentAssistantMessageRef.current?.id);
-                                if (idx >= 0 && !isToolCallMessage(newItems[idx])) {
-                                    newItems[idx] = {
-                                        ...newItems[idx],
-                                        content: event.message?.content ?? '',
-                                    };
-                                }
-                                return newItems;
-                            });
-                            // Update message in store
-                            if (useStoreMode && currentAssistantMessageRef.current) {
-                                useChatStore
-                                    .getState()
-                                    .updateMessage(currentAssistantMessageRef.current.id, {
-                                    content: event.message?.content ?? '',
-                                });
-                            }
-                        }
-                        else {
-                            // Create new assistant message (new ID or first message)
-                            const content = event.message.content;
-                            const contentStr = typeof content === 'string' ? content : (content ?? '');
-                            const newMessage = createAssistantMessage(typeof contentStr === 'string' ? contentStr : '');
-                            newMessage.id = event.message.id || newMessage.id;
-                            currentAssistantMessageRef.current = newMessage;
-                            // Guard against duplicates: if an item with the same ID
-                            // already exists (e.g. continuation arriving after
-                            // handleSend's finally cleared currentAssistantMessageRef),
-                            // update it in place instead of appending a second copy.
-                            setDisplayItems(prev => {
-                                const existingIdx = prev.findIndex(item => !isToolCallMessage(item) && item.id === newMessage.id);
-                                if (existingIdx >= 0) {
-                                    const newItems = [...prev];
-                                    newItems[existingIdx] = {
-                                        ...newItems[existingIdx],
-                                        content: event.message?.content ?? '',
-                                    };
-                                    return newItems;
-                                }
-                                return [...prev, newMessage];
-                            });
-                            // Add message to store (only if truly new)
-                            if (useStoreMode) {
-                                const existingInStore = useChatStore
-                                    .getState()
-                                    .messages.find(m => m.id === newMessage.id);
-                                if (existingInStore) {
-                                    useChatStore.getState().updateMessage(newMessage.id, {
-                                        content: event.message?.content ?? '',
-                                    });
-                                }
-                                else {
-                                    useChatStore.getState().addMessage(newMessage);
-                                }
-                            }
-                        }
-                    }
-                    break;
-                case 'tool-call':
-                    // Handle tool call start or update
-                    if (event.toolCall) {
-                        const toolCallId = event.toolCall.toolCallId || generateMessageId();
-                        const toolName = event.toolCall.toolName;
-                        const args = event.toolCall.args || {};
-                        // Check if this tool call already exists (update args)
-                        if (toolCallsRef.current.has(toolCallId)) {
-                            const existingToolCall = toolCallsRef.current.get(toolCallId);
-                            if (existingToolCall) {
-                                // Merge new args with existing (update from TOOL_CALL_END)
-                                const updatedToolCall = {
-                                    ...existingToolCall,
-                                    args: {
-                                        ...existingToolCall.args,
-                                        ...args,
-                                    },
-                                };
-                                toolCallsRef.current.set(toolCallId, updatedToolCall);
-                                // Always update displayItems (default ToolCallDisplay will be used if no custom renderer)
-                                setDisplayItems(prev => prev.map(item => isToolCallMessage(item) && item.toolCallId === toolCallId
-                                    ? updatedToolCall
-                                    : item));
-                                // Check if this is a frontend tool and we have complete args
-                                // Execute the tool handler if available
-                                const frontendTool = frontendTools?.find(t => t.name === toolName);
-                                const toolHandler = frontendTool?.handler;
-                                if (toolHandler && Object.keys(args).length > 0) {
-                                    // Execute frontend tool
-                                    pendingToolExecutionsRef.current++;
-                                    (async () => {
-                                        try {
-                                            const result = await toolHandler(updatedToolCall.args);
-                                            // Send result back to adapter
-                                            if (adapterRef.current) {
-                                                await adapterRef.current.sendToolResult(toolCallId, {
-                                                    toolCallId,
-                                                    success: true,
-                                                    result,
-                                                });
-                                            }
-                                            // Update tool call with result
-                                            const completedToolCall = {
-                                                ...updatedToolCall,
-                                                result,
-                                                status: 'complete',
-                                            };
-                                            toolCallsRef.current.set(toolCallId, completedToolCall);
-                                            setDisplayItems(prev => prev.map(item => isToolCallMessage(item) &&
-                                                item.toolCallId === toolCallId
-                                                ? completedToolCall
-                                                : item));
-                                        }
-                                        catch (err) {
-                                            console.error('[ChatBase] Frontend tool execution error:', err);
-                                            const errorToolCall = {
-                                                ...updatedToolCall,
-                                                status: 'error',
-                                                error: err.message,
-                                            };
-                                            toolCallsRef.current.set(toolCallId, errorToolCall);
-                                            setDisplayItems(prev => prev.map(item => isToolCallMessage(item) &&
-                                                item.toolCallId === toolCallId
-                                                ? errorToolCall
-                                                : item));
-                                        }
-                                        finally {
-                                            pendingToolExecutionsRef.current--;
-                                            if (pendingToolExecutionsRef.current <= 0) {
-                                                pendingToolExecutionsRef.current = 0;
-                                                setIsLoading(false);
-                                                setIsStreaming(false);
-                                            }
-                                        }
-                                    })();
-                                }
-                            }
-                        }
-                        else {
-                            // New tool call - add it
-                            const toolCallMsg = {
-                                id: `tool-${toolCallId}`,
-                                type: 'tool-call',
-                                toolCallId,
-                                toolName,
-                                args,
-                                status: 'executing',
-                            };
-                            toolCallsRef.current.set(toolCallId, toolCallMsg);
-                            // Always add to displayItems (default ToolCallDisplay will be used if no custom renderer)
-                            setDisplayItems(prev => [...prev, toolCallMsg]);
-                            // Execute frontend tool if available and args are present
-                            const frontendTool = frontendTools?.find(t => t.name === toolName);
-                            const toolHandler = frontendTool?.handler;
-                            if (toolHandler && Object.keys(args).length > 0) {
-                                pendingToolExecutionsRef.current++;
-                                (async () => {
-                                    try {
-                                        const result = await toolHandler(args);
-                                        // Send result back to adapter
-                                        if (adapterRef.current) {
-                                            await adapterRef.current.sendToolResult(toolCallId, {
-                                                toolCallId,
-                                                success: true,
-                                                result,
-                                            });
-                                        }
-                                        // Update tool call with result
-                                        const completedToolCall = {
-                                            ...toolCallMsg,
-                                            result,
-                                            status: 'complete',
-                                        };
-                                        toolCallsRef.current.set(toolCallId, completedToolCall);
-                                        setDisplayItems(prev => prev.map(item => isToolCallMessage(item) &&
-                                            item.toolCallId === toolCallId
-                                            ? completedToolCall
-                                            : item));
-                                    }
-                                    catch (err) {
-                                        console.error('[ChatBase] Frontend tool execution error:', err);
-                                        const errorToolCall = {
-                                            ...toolCallMsg,
-                                            status: 'error',
-                                            error: err.message,
-                                        };
-                                        toolCallsRef.current.set(toolCallId, errorToolCall);
-                                        setDisplayItems(prev => prev.map(item => isToolCallMessage(item) &&
-                                            item.toolCallId === toolCallId
-                                            ? errorToolCall
-                                            : item));
-                                    }
-                                    finally {
-                                        pendingToolExecutionsRef.current--;
-                                        if (pendingToolExecutionsRef.current <= 0) {
-                                            pendingToolExecutionsRef.current = 0;
-                                            setIsLoading(false);
-                                            setIsStreaming(false);
-                                        }
-                                    }
-                                })();
-                            }
-                        }
-                    }
-                    break;
-                case 'tool-result':
-                    // Handle tool result - always update status even without custom renderToolResult
-                    if (event.toolResult) {
-                        const toolCallId = event.toolResult.toolCallId;
-                        if (toolCallId && toolCallsRef.current.has(toolCallId)) {
-                            const existingToolCall = toolCallsRef.current.get(toolCallId);
-                            if (existingToolCall) {
-                                // Check if this is a human-in-the-loop tool (has steps in args)
-                                // If so, keep status as 'executing' until user responds
-                                const isHumanInTheLoop = existingToolCall.args &&
-                                    'steps' in existingToolCall.args &&
-                                    Array.isArray(existingToolCall.args.steps);
-                                // Extract rich error information from result if available
-                                const resultData = event.toolResult.result;
-                                let executionError;
-                                let codeError;
-                                let exitCode;
-                                let hasError = !!event.toolResult.error;
-                                if (resultData && typeof resultData === 'object') {
-                                    // Check for execution_error (infrastructure/sandbox errors)
-                                    if (resultData.execution_error &&
-                                        typeof resultData.execution_error === 'string') {
-                                        executionError = resultData.execution_error;
-                                        hasError = true;
-                                    }
-                                    // Check for code_error (Python exceptions)
-                                    if (resultData.code_error &&
-                                        typeof resultData.code_error === 'object') {
-                                        const ce = resultData.code_error;
-                                        codeError = {
-                                            name: ce.name || 'Error',
-                                            value: ce.value || 'Unknown error',
-                                            traceback: ce.traceback,
-                                        };
-                                        hasError = true;
-                                    }
-                                    // Check for exit_code (non-zero exit from sys.exit())
-                                    if ('exit_code' in resultData) {
-                                        const ec = resultData.exit_code;
-                                        exitCode = typeof ec === 'number' ? ec : null;
-                                        // Non-zero exit code counts as an error condition
-                                        if (exitCode != null && exitCode !== 0) {
-                                            hasError = true;
-                                        }
-                                    }
-                                    // Check for execution_ok flag
-                                    if ('execution_ok' in resultData &&
-                                        resultData.execution_ok === false) {
-                                        hasError = true;
-                                    }
-                                }
-                                const updatedToolCall = {
-                                    ...existingToolCall,
-                                    result: event.toolResult.result,
-                                    // Keep executing for HITL, otherwise mark complete/error
-                                    status: hasError
-                                        ? 'error'
-                                        : isHumanInTheLoop
-                                            ? 'executing'
-                                            : 'complete',
-                                    error: event.toolResult.error,
-                                    executionError,
-                                    codeError,
-                                    exitCode,
-                                };
-                                toolCallsRef.current.set(toolCallId, updatedToolCall);
-                                setDisplayItems(prev => prev.map(item => isToolCallMessage(item) && item.toolCallId === toolCallId
-                                    ? updatedToolCall
-                                    : item));
-                            }
-                        }
-                    }
-                    break;
-                case 'state-update':
-                    onStateUpdate?.(event.data);
-                    // When we receive a state update, mark the last executing tool as complete
-                    // This handles tools that return state events (STATE_SNAPSHOT/STATE_DELTA) instead of TOOL_CALL_RESULT
-                    if (event.data) {
-                        // Find any tool calls that are still in 'executing' status
-                        const executingToolCalls = Array.from(toolCallsRef.current.entries()).filter(([_, tc]) => tc.status === 'executing');
-                        // Mark the most recent executing tool as complete
-                        if (executingToolCalls.length > 0) {
-                            const [lastToolCallId, existingToolCall] = executingToolCalls[executingToolCalls.length - 1];
-                            // Check if this is NOT a human-in-the-loop tool
-                            const isHumanInTheLoop = existingToolCall.args &&
-                                'steps' in existingToolCall.args &&
-                                Array.isArray(existingToolCall.args.steps);
-                            if (!isHumanInTheLoop) {
-                                // Extract result from state data if available
-                                const stateData = event.data;
-                                const result = stateData.weather ??
-                                    stateData.result ??
-                                    stateData.toolResult ??
-                                    stateData;
-                                const updatedToolCall = {
-                                    ...existingToolCall,
-                                    result,
-                                    status: 'complete',
-                                };
-                                toolCallsRef.current.set(lastToolCallId, updatedToolCall);
-                                setDisplayItems(prev => prev.map(item => isToolCallMessage(item) &&
-                                    item.toolCallId === lastToolCallId
-                                    ? updatedToolCall
-                                    : item));
-                            }
-                        }
-                    }
-                    break;
-                case 'error':
-                    console.error('[ChatBase] Protocol error:', event.error);
-                    setError(event.error || new Error('Unknown error'));
-                    setIsLoading(false);
-                    setIsStreaming(false);
-                    break;
-            }
-        });
-        // Connect to protocol
-        adapter.connect().catch(console.error);
-        return () => {
-            unsubscribeRef.current?.();
-            adapterRef.current?.disconnect();
-        };
-        // protocolKey (JSON-serialised) replaces the protocol object reference so
-        // that parent re-renders producing a new-but-identical protocol object
-        // don't tear down and re-create the adapter mid-request.
-        // frontendTools is accessed via ref-like closure, not as reactive dependency
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [protocolKey, renderToolResult, onStateUpdate, useStoreMode]);
-    // Auto-scroll to bottom
-    useEffect(() => {
-        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
-    }, [displayItems]);
-    // Handle sending message in protocol mode or custom mode.
-    // An optional messageOverride bypasses the input state (used by pendingPrompt).
-    const handleSend = useCallback(async (messageOverride) => {
-        const messageContent = (messageOverride ?? input).trim();
-        if (!messageContent || isLoading)
-            return;
-        // Need either an adapter (protocol mode) or onSendMessage handler (custom mode)
-        if (!adapterRef.current && !onSendMessage)
-            return;
-        const userMessage = createUserMessage(messageContent);
-        const currentMessages = displayItems.filter((item) => !isToolCallMessage(item));
-        const allMessages = [...currentMessages, userMessage];
-        setDisplayItems(prev => [...prev, userMessage]);
-        setInput('');
-        setIsLoading(true);
-        setIsStreaming(true);
-        setError(null);
-        currentAssistantMessageRef.current = null;
-        // Persist user message to store if enabled
-        if (useStoreMode) {
-            useChatStore.getState().addMessage(userMessage);
-        }
-        try {
-            if (onSendMessage) {
-                // Custom mode: use the provided message handler
-                if (enableStreaming) {
-                    // Streaming mode: create assistant message placeholder and stream updates
-                    const assistantMessageId = generateMessageId();
-                    const assistantMessage = createAssistantMessage('');
-                    assistantMessage.id = assistantMessageId;
-                    setDisplayItems(prev => [...prev, assistantMessage]);
-                    currentAssistantMessageRef.current = assistantMessage;
-                    if (useStoreMode) {
-                        useChatStore.getState().addMessage(assistantMessage);
-                        useChatStore.getState().startStreaming(assistantMessageId);
-                    }
-                    // Create abort controller for cancellation
-                    abortControllerRef.current = new AbortController();
-                    await onSendMessage(messageContent, allMessages, {
-                        onChunk: (chunk) => {
-                            // Append chunk to the assistant message
-                            setDisplayItems(prev => prev.map(item => item.id === assistantMessageId
-                                ? {
-                                    ...item,
-                                    content: item.content + chunk,
-                                }
-                                : item));
-                            if (useStoreMode) {
-                                useChatStore
-                                    .getState()
-                                    .appendToStream(assistantMessageId, chunk);
-                            }
-                        },
-                        onComplete: (fullResponse) => {
-                            // Update assistant message with final content
-                            setDisplayItems(prev => prev.map(item => item.id === assistantMessageId
-                                ? { ...item, content: fullResponse }
-                                : item));
-                            if (useStoreMode) {
-                                useChatStore.getState().updateMessage(assistantMessageId, {
-                                    content: fullResponse,
-                                });
-                                useChatStore.getState().stopStreaming();
-                            }
-                        },
-                        onError: (error) => {
-                            // Update assistant message with error
-                            const errorContent = `Error: ${error.message}`;
-                            setDisplayItems(prev => prev.map(item => item.id === assistantMessageId
-                                ? { ...item, content: errorContent }
-                                : item));
-                            if (useStoreMode) {
-                                useChatStore.getState().updateMessage(assistantMessageId, {
-                                    content: errorContent,
-                                });
-                                useChatStore.getState().stopStreaming();
-                            }
-                            setError(error);
-                        },
-                        signal: abortControllerRef.current.signal,
-                    });
-                }
-                else {
-                    // Non-streaming mode: wait for full response
-                    const response = await onSendMessage(messageContent, allMessages);
-                    if (response) {
-                        const assistantMessage = createAssistantMessage(response);
-                        setDisplayItems(prev => [...prev, assistantMessage]);
-                        if (useStoreMode) {
-                            useChatStore.getState().addMessage(assistantMessage);
-                        }
-                    }
-                }
-            }
-            else if (adapterRef.current) {
-                // Protocol mode: use the adapter
-                // Convert frontend tools to AG-UI format (only serializable properties)
-                const toolsForRequest = (frontendTools || []).map(tool => ({
-                    name: tool.name,
-                    description: tool.description,
-                    parameters: tool.parameters || { type: 'object', properties: {} },
-                }));
-                // Get enabled MCP tool names and skill IDs
-                const enabledMcpToolNames = getEnabledMcpToolNames();
-                const enabledSkillIds = getEnabledSkillIds();
-                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,
-                    // Include enabled skills for backend
-                    skills: enabledSkillIds,
-                    // Include connected identities with access tokens (use ref to avoid infinite loops)
-                    identities: connectedIdentitiesRef.current,
-                });
-            }
-        }
-        catch (err) {
-            if (err.name !== 'AbortError') {
-                console.error('[ChatBase] Send error:', err);
-                const errorMessage = createAssistantMessage(`Error: ${err.message}`);
-                setDisplayItems(prev => [...prev, errorMessage]);
-                setError(err);
-            }
-        }
-        finally {
-            // Only clear loading state if no frontend tool executions are
-            // still in flight.  When tools are pending, sendToolResult will
-            // trigger a continuation that eventually clears isLoading.
-            if (pendingToolExecutionsRef.current <= 0) {
-                setIsLoading(false);
-                setIsStreaming(false);
-            }
-            currentAssistantMessageRef.current = null;
-            abortControllerRef.current = null;
-        }
-    }, [
-        input,
-        isLoading,
-        displayItems,
-        selectedModel,
-        frontendTools,
-        useStoreMode,
-        onSendMessage,
-        enableStreaming,
-        getEnabledMcpToolNames,
-        getEnabledSkillIds,
-    ]);
-    // Send the pending prompt once history is loaded and the
-    // adapter (or custom handler) is available.
-    useEffect(() => {
-        if (!pendingPrompt || pendingPromptSentRef.current)
-            return;
-        if (!historyLoaded)
-            return;
-        if (!adapterReady && !onSendMessage)
-            return;
-        pendingPromptSentRef.current = true;
-        // Use a microtask to ensure the adapter subscription is fully wired.
-        queueMicrotask(() => handleSend(pendingPrompt));
-    }, [pendingPrompt, historyLoaded, adapterReady, handleSend, onSendMessage]);
-    // Handle stop
-    const handleStop = useCallback(() => {
-        // Abort custom mode request
-        abortControllerRef.current?.abort();
-        // Disconnect protocol adapter
-        adapterRef.current?.disconnect();
-        // Stop streaming in store
-        if (useStoreMode) {
-            useChatStore.getState().stopStreaming();
-        }
-        // Reset pending tool counter so loading can clear
-        pendingToolExecutionsRef.current = 0;
-        setIsLoading(false);
-        setIsStreaming(false);
-    }, [useStoreMode]);
-    // Handle new chat
-    const handleNewChat = useCallback(() => {
-        setDisplayItems([]);
-        toolCallsRef.current.clear();
-        pendingToolExecutionsRef.current = 0;
-        setInput('');
-        threadIdRef.current = generateMessageId();
-        if (useStoreMode) {
-            clearStoreMessages();
-        }
-        // Clear from conversation store if runtimeId is provided
-        if (runtimeId) {
-            useConversationStore.getState().clearMessages(runtimeId);
-        }
-        onNewChat?.();
-        headerButtons?.onNewChat?.();
-    }, [clearStoreMessages, onNewChat, headerButtons, useStoreMode, runtimeId]);
-    // Handle clear
-    const handleClear = useCallback(() => {
-        if (window.confirm('Clear all messages?')) {
-            setDisplayItems([]);
-            toolCallsRef.current.clear();
-            if (useStoreMode) {
-                clearStoreMessages();
-            }
-            // Clear from conversation store if runtimeId is provided
-            if (runtimeId) {
-                useConversationStore.getState().clearMessages(runtimeId);
-            }
-            onClear?.();
-            headerButtons?.onClear?.();
-        }
-    }, [clearStoreMessages, onClear, headerButtons, useStoreMode, runtimeId]);
-    // Handle sandbox interrupt
-    const handleSandboxInterrupt = useCallback(async () => {
-        if (!protocol?.configEndpoint)
-            return;
-        const interruptUrl = `${getApiBaseFromConfig(protocol.configEndpoint)}/configure/sandbox/interrupt`;
-        try {
-            const headers = { 'Content-Type': 'application/json' };
-            if (protocol.authToken) {
-                headers['Authorization'] = `Bearer ${protocol.authToken}`;
-            }
-            await fetch(interruptUrl, { method: 'POST', headers });
-            // Refetch status immediately so the icon updates
-            sandboxStatusQuery.refetch();
-        }
-        catch (e) {
-            // Interrupt is best-effort
-        }
-    }, [protocol?.configEndpoint, protocol?.authToken, sandboxStatusQuery]);
-    // Not ready yet (store mode only)
-    if (!ready) {
-        return (_jsx(Box, { className: className, sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-                p: 4,
-                borderRadius: borderRadius,
-                bg: backgroundColor || 'canvas.default',
-                border: border,
-                boxShadow: boxShadow,
-            }, children: loadingState || (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { mt: 3, color: 'fg.muted' }, children: "Initializing chat..." })] })) }));
-    }
-    // Render header with buttons
-    const renderHeader = () => {
-        if (!showHeader)
-            return null;
-        return (_jsx(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                borderBottom: '1px solid',
-                borderColor: 'border.default',
-            }, children: _jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    p: padding,
-                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), title && (_jsx(Heading, { as: "h3", sx: { fontSize: 2, fontWeight: 'semibold' }, children: title })), headerContent, showInformation && (_jsx(IconButton, { icon: InfoIcon, "aria-label": "Information", variant: "invisible", size: "small", onClick: onInformationClick }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [sandboxStatus?.available &&
-                                sandboxStatus?.sandbox_running &&
-                                (sandboxStatus.is_executing ? (_jsx(IconButton, { icon: SquareFillIcon, "aria-label": "Interrupt code execution", variant: "invisible", size: "small", sx: { color: 'danger.fg' }, onClick: handleSandboxInterrupt })) : (_jsx(Box, { sx: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        width: 28,
-                                        height: 28,
-                                        color: 'fg.subtle',
-                                    }, title: "Code sandbox ready", children: _jsx(CircleIcon, { size: 12 }) }))), headerButtons?.showNewChat && (_jsx(IconButton, { icon: PlusIcon, "aria-label": "New chat", variant: "invisible", size: "small", onClick: handleNewChat })), headerButtons?.showClear && messages.length > 0 && (_jsx(IconButton, { icon: TrashIcon, "aria-label": "Clear messages", variant: "invisible", size: "small", onClick: handleClear })), headerButtons?.showSettings && (_jsx(IconButton, { icon: GearIcon, "aria-label": "Settings", variant: "invisible", size: "small", onClick: headerButtons.onSettings })), chatViewMode && onChatViewModeChange && (_jsx(Box, { sx: {
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    bg: 'neutral.muted',
-                                    borderRadius: '6px',
-                                    p: '2px',
-                                    gap: '1px',
-                                }, children: [
-                                    {
-                                        mode: 'floating',
-                                        icon: CommentDiscussionIcon,
-                                        label: 'Full-height popup',
-                                    },
-                                    {
-                                        mode: 'floating-small',
-                                        icon: DeviceMobileIcon,
-                                        label: 'Floating popup',
-                                    },
-                                    {
-                                        mode: 'sidebar',
-                                        icon: SidebarExpandIcon,
-                                        label: 'Sidebar panel',
-                                    },
-                                ].map(({ mode, icon: ModeIcon, label }) => (_jsx(Box, { as: "button", "aria-label": label, title: label, onClick: () => onChatViewModeChange(mode), sx: {
-                                        display: 'inline-flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        width: 26,
-                                        height: 24,
-                                        borderRadius: '4px',
-                                        border: 'none',
-                                        cursor: 'pointer',
-                                        bg: chatViewMode === mode
-                                            ? 'canvas.default'
-                                            : 'transparent',
-                                        boxShadow: chatViewMode === mode ? 'shadow.small' : 'none',
-                                        color: chatViewMode === mode ? 'fg.default' : 'fg.muted',
-                                        transition: 'all 0.15s ease',
-                                        '&:hover': {
-                                            color: 'fg.default',
-                                            bg: chatViewMode === mode
-                                                ? 'canvas.default'
-                                                : 'neutral.subtle',
-                                        },
-                                    }, children: _jsx(ModeIcon, { size: 14 }) }, mode))) })), headerActions] })] }) }));
-    };
-    // Render token usage bar between input and selectors
-    const renderTokenUsage = () => {
-        if (!showTokenUsage)
-            return null;
-        // Show bar when we have any context data (totalTokens > 0 means agent is active)
-        const hasContext = agentUsage && !agentUsage.error && agentUsage.totalTokens > 0;
-        const hasTurn = agentUsage?.turnUsage &&
-            (agentUsage.turnUsage.inputTokens > 0 ||
-                agentUsage.turnUsage.outputTokens > 0);
-        const hasSession = agentUsage?.sessionUsage &&
-            (agentUsage.sessionUsage.inputTokens > 0 ||
-                agentUsage.sessionUsage.outputTokens > 0);
-        if (!hasContext)
-            return null;
-        // Build pie chart data from distribution or fallback to fields
-        const usedTokens = agentUsage.totalTokens;
-        const windowTokens = agentUsage.contextWindow;
-        const freeTokens = Math.max(0, windowTokens - usedTokens);
-        const pct = windowTokens > 0 ? (usedTokens / windowTokens) * 100 : 0;
-        // Build category breakdown from distribution or individual fields
-        const categories = [];
-        if (agentUsage.distribution?.children?.length) {
-            const colorMap = {
-                'System Prompts': '#8250df',
-                'Tool Definitions': '#bf8700',
-                'User Messages': '#0969da',
-                'Assistant Messages': '#1a7f37',
-                'Tool Usage': '#cf222e',
-            };
-            for (const child of agentUsage.distribution.children) {
-                categories.push({
-                    name: child.name,
-                    value: child.value,
-                    color: colorMap[child.name] || '#6e7781',
-                });
-            }
-        }
-        else {
-            // Fallback: build from individual fields
-            if (agentUsage.systemPromptTokens > 0) {
-                categories.push({
-                    name: 'System Prompts',
-                    value: agentUsage.systemPromptTokens,
-                    color: '#8250df',
-                });
-            }
-            if (agentUsage.toolTokens > 0) {
-                categories.push({
-                    name: 'Tool Definitions',
-                    value: agentUsage.toolTokens,
-                    color: '#bf8700',
-                });
-            }
-            const messageTokens = (agentUsage.userMessageTokens || 0) +
-                (agentUsage.assistantMessageTokens || 0);
-            if (messageTokens > 0) {
-                categories.push({
-                    name: 'Messages',
-                    value: messageTokens,
-                    color: '#0969da',
-                });
-            }
-            const toolResultTokens = (agentUsage.toolCallTokens || 0) + (agentUsage.toolReturnTokens || 0);
-            if (toolResultTokens > 0) {
-                categories.push({
-                    name: 'Tool Results',
-                    value: toolResultTokens,
-                    color: '#cf222e',
-                });
-            }
-        }
-        // Tiny filled pie chart options
-        const pieColor = pct > 90 ? '#cf222e' : pct > 70 ? '#bf8700' : '#0969da';
-        const freeSliceColor = 'var(--bgColor-muted, #f6f8fa)';
-        const freeSliceOverlayColor = 'var(--borderColor-default, #d1d9e0)';
-        const miniPieOption = {
-            animation: false,
-            series: [
-                {
-                    type: 'pie',
-                    radius: [0, '90%'],
-                    center: ['50%', '50%'],
-                    silent: true,
-                    label: { show: false },
-                    labelLine: { show: false },
-                    data: [
-                        { value: usedTokens, itemStyle: { color: pieColor } },
-                        { value: freeTokens, itemStyle: { color: freeSliceColor } },
-                    ],
-                },
-            ],
-        };
-        // Overlay detail pie options (donut for category breakdown)
-        const overlayPieOption = {
-            animation: false,
-            series: [
-                {
-                    type: 'pie',
-                    radius: ['45%', '80%'],
-                    center: ['50%', '50%'],
-                    silent: true,
-                    label: { show: false },
-                    labelLine: { show: false },
-                    itemStyle: {
-                        borderColor: 'var(--bgColor-default, #ffffff)',
-                        borderWidth: 1,
-                    },
-                    data: [
-                        ...categories.map(c => ({
-                            value: c.value,
-                            itemStyle: { color: c.color },
-                        })),
-                        { value: freeTokens, itemStyle: { color: freeSliceOverlayColor } },
-                    ],
-                },
-            ],
-        };
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                gap: 2,
-                py: 1,
-                px: padding,
-                bg: 'canvas.subtle',
-                flexWrap: 'nowrap',
-                overflow: 'visible',
-                whiteSpace: 'nowrap',
-                minWidth: 0,
-            }, children: [_jsxs(Box, { sx: { position: 'relative', flexShrink: 0 }, onMouseEnter: () => {
-                        if (hoverTimeoutRef.current)
-                            clearTimeout(hoverTimeoutRef.current);
-                        hoverTimeoutRef.current = setTimeout(() => setContextOverlayOpen(true), 150);
-                    }, onMouseLeave: () => {
-                        if (hoverTimeoutRef.current)
-                            clearTimeout(hoverTimeoutRef.current);
-                        hoverTimeoutRef.current = setTimeout(() => setContextOverlayOpen(false), 250);
-                    }, children: [_jsx(Box, { ref: contextAnchorRef, sx: {
-                                cursor: 'pointer',
-                                width: 20,
-                                height: 20,
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                                borderRadius: '50%',
-                            }, children: _jsx(ReactECharts, { option: miniPieOption, style: { width: 18, height: 18 }, opts: { renderer: 'svg' } }) }), contextOverlayOpen && (_jsxs(Box, { sx: {
-                                position: 'absolute',
-                                bottom: '100%',
-                                left: 0,
-                                mb: 1,
-                                p: 3,
-                                width: 260,
-                                bg: 'canvas.overlay',
-                                borderRadius: 2,
-                                boxShadow: 'shadow.large',
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                                zIndex: 100,
-                            }, children: [_jsx(Text, { sx: {
-                                        fontWeight: 'bold',
-                                        fontSize: 1,
-                                        color: 'fg.default',
-                                        display: 'block',
-                                        mb: 2,
-                                    }, children: "Context Window" }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 1 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default' }, children: formatTokenCount(usedTokens) }), ' / ', formatTokenCount(windowTokens), ' tokens'] }), _jsxs(Text, { sx: {
-                                        fontSize: 0,
-                                        color: pct > 90
-                                            ? 'danger.fg'
-                                            : pct > 70
-                                                ? 'attention.fg'
-                                                : 'fg.muted',
-                                        fontWeight: 'semibold',
-                                        display: 'block',
-                                        mb: 2,
-                                    }, children: ['• ', pct.toFixed(0), "%"] }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'center', mb: 2 }, children: _jsx(ReactECharts, { option: overlayPieOption, style: { width: 80, height: 80 }, opts: { renderer: 'svg' } }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: categories.map(cat => {
-                                        const catPct = usedTokens > 0 ? (cat.value / usedTokens) * 100 : 0;
-                                        return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { sx: {
-                                                        width: 8,
-                                                        height: 8,
-                                                        borderRadius: '50%',
-                                                        bg: cat.color,
-                                                        flexShrink: 0,
-                                                    } }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', flex: 1 }, children: cat.name }), _jsxs(Text, { sx: {
-                                                        fontSize: 0,
-                                                        color: 'fg.default',
-                                                        fontWeight: 'semibold',
-                                                    }, children: [catPct.toFixed(1), "%"] })] }, cat.name));
-                                    }) }), pct > 70 && (_jsx(Text, { sx: {
-                                        fontSize: 0,
-                                        color: 'attention.fg',
-                                        display: 'block',
-                                        mt: 2,
-                                        fontStyle: 'italic',
-                                    }, children: "Quality may decline as limit nears." }))] }))] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default', fontSize: 0 }, children: formatTokenCount(agentUsage.totalTokens) }), ' / ', formatTokenCount(agentUsage.contextWindow), ' ctx'] }), hasSession && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: ['· ', formatTokenCount(agentUsage.sessionUsage.inputTokens), _jsx(Text, { as: "span", sx: { color: 'success.fg', fontSize: 0 }, children: '▲' }), ' ', formatTokenCount(agentUsage.sessionUsage.outputTokens), _jsx(Text, { as: "span", sx: { color: 'attention.fg', fontSize: 0 }, children: '▼' })] })), hasTurn && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: ['· turn ', formatTokenCount(agentUsage.turnUsage.inputTokens), _jsx(Text, { as: "span", sx: { color: 'success.fg', fontSize: 0 }, children: '▲' }), ' ', formatTokenCount(agentUsage.turnUsage.outputTokens), _jsx(Text, { as: "span", sx: { color: 'attention.fg', fontSize: 0 }, children: '▼' })] }))] }));
-    };
-    // Render empty state
-    const renderEmptyState = () => {
-        if (emptyState?.render) {
-            return emptyState.render();
-        }
-        // Handler for suggestion clicks
-        const handleSuggestionClick = (suggestion) => {
-            if (submitOnSuggestionClick) {
-                // Auto-submit the suggestion message
-                const userMessage = {
-                    id: generateMessageId(),
-                    role: 'user',
-                    content: suggestion.message,
-                    createdAt: new Date(),
-                };
-                setDisplayItems(prev => [...prev, userMessage]);
-                setIsLoading(true);
-                setIsStreaming(true);
-                // Convert frontend tools to AG-UI format (same as regular message send)
-                const toolsForSuggestion = (frontendTools || []).map(tool => ({
-                    name: tool.name,
-                    description: tool.description,
-                    parameters: tool.parameters || { type: 'object', properties: {} },
-                }));
-                adapterRef.current
-                    ?.sendMessage(userMessage, {
-                    threadId: threadIdRef.current,
-                    messages: [userMessage],
-                    tools: toolsForSuggestion,
-                })
-                    .catch(err => {
-                    console.error('[ChatBase] Suggestion send error:', err);
-                    setError(err instanceof Error ? err : new Error(String(err)));
-                })
-                    .finally(() => {
-                    setIsLoading(false);
-                    setIsStreaming(false);
-                });
-            }
-            else {
-                // Just fill the input without submitting
-                setInput(suggestion.message);
-                setTimeout(() => {
-                    inputRef.current?.focus();
-                }, 0);
-            }
-        };
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-                p: 4,
-                color: 'fg.muted',
-                textAlign: 'center',
-                gap: 2,
-            }, children: [emptyState?.icon || brandIcon || _jsx(AiAgentIcon, { colored: true, size: 48 }), _jsx(Text, { sx: { fontSize: 2 }, children: emptyState?.title || 'Start a conversation' }), (emptyState?.subtitle || description) && (_jsx(Text, { sx: { fontSize: 1 }, children: emptyState?.subtitle || description })), suggestions && suggestions.length > 0 && (_jsx(LabelGroup, { sx: { mt: 2, justifyContent: 'center' }, children: suggestions.map((suggestion, index) => (_jsx(Label, { variant: "accent", sx: {
-                            cursor: 'pointer',
-                            '&:hover': {
-                                bg: 'accent.emphasis',
-                                color: 'var(--button-primary-fgColor-rest)',
-                                borderColor: 'accent.emphasis',
-                            },
-                        }, onClick: () => handleSuggestionClick(suggestion), children: suggestion.title }, index))) }))] }));
-    };
-    // Render protocol mode messages with tool call support
-    const renderProtocolMessages = () => {
-        if (displayItems.length === 0) {
-            return renderEmptyState();
-        }
-        // Create respond callback for a tool call (human-in-the-loop)
-        const createRespondCallback = (toolCallId) => {
-            return async (result) => {
-                // Update tool call status to complete with the user's response
-                const existingToolCall = toolCallsRef.current.get(toolCallId);
-                if (existingToolCall && existingToolCall.status === 'executing') {
-                    const updatedToolCall = {
-                        ...existingToolCall,
-                        result,
-                        status: 'complete',
-                    };
-                    toolCallsRef.current.set(toolCallId, updatedToolCall);
-                    setDisplayItems(prev => prev.map(item => isToolCallMessage(item) && item.toolCallId === toolCallId
-                        ? updatedToolCall
-                        : item));
-                    // Send the user's response back to the agent as a new message
-                    // This continues the conversation with the HITL response
-                    if (adapterRef.current) {
-                        // Format the response as a clear text message the agent can understand
-                        let responseText;
-                        if (typeof result === 'string') {
-                            responseText = result;
-                        }
-                        else if (result &&
-                            typeof result === 'object' &&
-                            'accepted' in result) {
-                            const hitlResult = result;
-                            if (hitlResult.accepted) {
-                                const stepDescriptions = hitlResult.steps?.map(s => s.description).join(', ') || '';
-                                responseText = stepDescriptions
-                                    ? `I confirm and approve the following steps: ${stepDescriptions}`
-                                    : 'I confirm and approve the plan.';
-                            }
-                            else {
-                                responseText =
-                                    'I reject this plan. Please suggest something else.';
-                            }
-                        }
-                        else {
-                            responseText = JSON.stringify(result, null, 2);
-                        }
-                        // Create a user message with the HITL response
-                        const userMessage = {
-                            id: generateMessageId(),
-                            role: 'user',
-                            content: responseText,
-                            createdAt: new Date(),
-                        };
-                        setIsLoading(true);
-                        setIsStreaming(true);
-                        try {
-                            // Get all chat messages for context
-                            const allMessages = displayItems.filter((item) => !isToolCallMessage(item));
-                            await adapterRef.current.sendMessage(userMessage, {
-                                threadId: threadIdRef.current,
-                                messages: [...allMessages, userMessage],
-                            });
-                        }
-                        catch (err) {
-                            console.error('[ChatBase] HITL respond error:', err);
-                        }
-                        finally {
-                            setIsLoading(false);
-                            setIsStreaming(false);
-                        }
-                    }
-                }
-            };
-        };
-        // Check if there are tool calls being rendered
-        // This is used to hide duplicate assistant text when UI is shown
-        const renderedToolCallIds = new Set();
-        displayItems.forEach(item => {
-            if (isToolCallMessage(item)) {
-                if (renderToolResult) {
-                    // Check if custom renderer produces a rendered UI
-                    const rendered = renderToolResult({
-                        toolCallId: item.toolCallId,
-                        toolName: item.toolName,
-                        name: item.toolName,
-                        args: item.args,
-                        result: item.result,
-                        status: item.status,
-                        error: item.error,
-                    });
-                    if (rendered !== null && rendered !== undefined) {
-                        renderedToolCallIds.add(item.toolCallId);
-                    }
-                }
-                else {
-                    // Default display always renders tool calls
-                    renderedToolCallIds.add(item.toolCallId);
-                }
-            }
-        });
-        const hasRenderedToolCall = renderedToolCallIds.size > 0;
-        return (_jsxs(_Fragment, { children: [displayItems.map((item, index) => {
-                    // Render tool call
-                    if (isToolCallMessage(item)) {
-                        // Only provide respond callback when status is 'executing'
-                        const respond = item.status === 'executing'
-                            ? createRespondCallback(item.toolCallId)
-                            : undefined;
-                        // Use custom renderToolResult if provided, otherwise use default display
-                        const toolUI = renderToolResult ? (renderToolResult({
-                            toolCallId: item.toolCallId,
-                            toolName: item.toolName,
-                            name: item.toolName,
-                            args: item.args,
-                            result: item.result,
-                            status: item.status,
-                            error: item.error,
-                            respond,
-                        })) : (_jsx(ToolCallDisplay, { toolCallId: item.toolCallId, toolName: item.toolName, args: item.args, result: item.result, status: item.status, error: item.error, executionError: item.executionError, codeError: item.codeError, exitCode: item.exitCode }));
-                        // Skip if custom render returns null/undefined
-                        if (toolUI === null || toolUI === undefined)
-                            return null;
-                        return (_jsx(Box, { sx: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                alignItems: 'flex-start',
-                                maxWidth: '95%',
-                                px: padding,
-                                py: 1,
-                            }, children: toolUI }, item.id));
-                    }
-                    // Render regular chat message
-                    const message = item;
-                    const isUser = message.role === 'user';
-                    // Skip assistant messages when hideMessagesAfterToolUI is enabled and there's a rendered tool call
-                    if (!isUser && hideMessagesAfterToolUI && hasRenderedToolCall) {
-                        // Get message text safely
-                        const messageText = getMessageText(message);
-                        // Check if this assistant message follows a rendered tool call
-                        const prevIndex = index - 1;
-                        if (prevIndex >= 0) {
-                            const prevItem = displayItems[prevIndex];
-                            if (isToolCallMessage(prevItem) &&
-                                renderedToolCallIds.has(prevItem.toolCallId)) {
-                                // Skip this assistant message as it describes the tool result
-                                return null;
-                            }
-                        }
-                        // Also check for HITL-specific patterns (step descriptions)
-                        const hitlToolCall = displayItems.find(item => isToolCallMessage(item) &&
-                            renderedToolCallIds.has(item.toolCallId) &&
-                            item.args &&
-                            'steps' in item.args &&
-                            Array.isArray(item.args.steps));
-                        if (hitlToolCall && messageText) {
-                            const steps = hitlToolCall.args.steps;
-                            // Check if message contains step descriptions or step-like patterns
-                            const hasStepContent = steps.some(step => step.description &&
-                                messageText
-                                    .toLowerCase()
-                                    .includes(step.description.toLowerCase().slice(0, 20))) ||
-                                // Also hide if message contains numbered list patterns
-                                /^\s*(\d+\.\s|[-*]\s|\*\*)/.test(messageText) ||
-                                messageText.includes('**Enabled**') ||
-                                messageText.includes('steps below');
-                            if (hasStepContent) {
-                                return null;
-                            }
-                        }
-                    }
-                    return (_jsx(Box, { sx: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            alignItems: isUser ? 'flex-end' : 'flex-start',
-                            px: padding,
-                            py: 1,
-                        }, children: _jsxs(Box, { sx: {
-                                display: 'flex',
-                                gap: 2,
-                                flexDirection: isUser ? 'row-reverse' : 'row',
-                                alignItems: 'flex-start',
-                            }, children: [defaultAvatarConfig.showAvatars && (_jsx(Box, { sx: {
-                                        width: defaultAvatarConfig.avatarSize,
-                                        height: defaultAvatarConfig.avatarSize,
-                                        borderRadius: '50%',
-                                        bg: isUser
-                                            ? defaultAvatarConfig.userAvatarBg
-                                            : defaultAvatarConfig.assistantAvatarBg,
-                                        color: isUser ? 'fg.default' : 'fg.onEmphasis',
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        flexShrink: 0,
-                                    }, children: isUser
-                                        ? defaultAvatarConfig.userAvatar
-                                        : defaultAvatarConfig.assistantAvatar })), _jsx(Box, { sx: {
-                                        maxWidth: '85%',
-                                        p: 2,
-                                        borderRadius: 2,
-                                        backgroundColor: isUser
-                                            ? 'accent.emphasis'
-                                            : 'canvas.subtle',
-                                        color: isUser ? 'fg.onEmphasis' : 'fg.default',
-                                        ...streamdownCodeBlockStyles,
-                                    }, children: isUser ? (_jsx(Text, { sx: {
-                                            fontSize: 1,
-                                            whiteSpace: 'pre-wrap',
-                                            wordBreak: 'break-word',
-                                        }, children: getMessageText(message) })) : (_jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: getMessageText(message) || (isStreaming ? '...' : '') }) })) })] }) }, message.id));
-                }), showLoadingIndicator && (isLoading || isStreaming) && (_jsx(Box, { sx: {
-                        display: 'flex',
-                        alignItems: 'flex-start',
-                        px: padding,
-                        py: 1,
-                    }, children: _jsxs(Box, { sx: {
-                            display: 'flex',
-                            gap: 2,
-                            alignItems: 'flex-start',
-                        }, children: [defaultAvatarConfig.showAvatars && (_jsx(Box, { sx: {
-                                    width: defaultAvatarConfig.avatarSize,
-                                    height: defaultAvatarConfig.avatarSize,
-                                    borderRadius: '50%',
-                                    bg: defaultAvatarConfig.assistantAvatarBg,
-                                    color: 'fg.onEmphasis',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    flexShrink: 0,
-                                }, children: defaultAvatarConfig.assistantAvatar })), _jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: '4px',
-                                    p: 2,
-                                    borderRadius: 2,
-                                    bg: 'canvas.subtle',
-                                    minHeight: '32px',
-                                }, children: [_jsx(Box, { sx: {
-                                            width: '8px',
-                                            height: '8px',
-                                            borderRadius: '50%',
-                                            bg: 'fg.muted',
-                                            animation: 'typingPulse 1.4s ease-in-out infinite',
-                                            '@keyframes typingPulse': {
-                                                '0%, 60%, 100%': {
-                                                    transform: 'scale(0.6)',
-                                                    opacity: 0.4,
-                                                },
-                                                '30%': {
-                                                    transform: 'scale(1)',
-                                                    opacity: 1,
-                                                },
-                                            },
-                                        } }), _jsx(Box, { sx: {
-                                            width: '8px',
-                                            height: '8px',
-                                            borderRadius: '50%',
-                                            bg: 'fg.muted',
-                                            animation: 'typingPulse 1.4s ease-in-out infinite',
-                                            animationDelay: '0.2s',
-                                            '@keyframes typingPulse': {
-                                                '0%, 60%, 100%': {
-                                                    transform: 'scale(0.6)',
-                                                    opacity: 0.4,
-                                                },
-                                                '30%': {
-                                                    transform: 'scale(1)',
-                                                    opacity: 1,
-                                                },
-                                            },
-                                        } }), _jsx(Box, { sx: {
-                                            width: '8px',
-                                            height: '8px',
-                                            borderRadius: '50%',
-                                            bg: 'fg.muted',
-                                            animation: 'typingPulse 1.4s ease-in-out infinite',
-                                            animationDelay: '0.4s',
-                                            '@keyframes typingPulse': {
-                                                '0%, 60%, 100%': {
-                                                    transform: 'scale(0.6)',
-                                                    opacity: 0.4,
-                                                },
-                                                '30%': {
-                                                    transform: 'scale(1)',
-                                                    opacity: 1,
-                                                },
-                                            },
-                                        } })] })] }) })), _jsx("div", { ref: messagesEndRef })] }));
-    };
-    // Render input prompt
-    const renderInputPrompt = () => {
-        const availableTools = configQuery.data?.builtinTools || [];
-        const models = availableModels || configQuery.data?.models || [];
-        return (_jsxs(Box, { children: [_jsx(InputPrompt, { placeholder: placeholder || 'Type a message...', isLoading: isLoading, onSend: () => handleSend(), onStop: handleStop, autoFocus: autoFocus, focusTrigger: focusTrigger, padding: padding, value: input, onChange: setInput }), renderTokenUsage(), (showModelSelector || showToolsMenu || showSkillsMenu) &&
-                    (configQuery.data || skillsQuery.data) && (_jsxs(Box, { sx: {
-                        display: 'flex',
-                        gap: 2,
-                        px: padding,
-                        py: 1,
-                        borderTop: '1px solid',
-                        borderColor: 'border.default',
-                        alignItems: 'center',
-                        bg: 'canvas.subtle',
-                    }, children: [showToolsMenu && (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { type: "button", variant: "invisible", size: "small", leadingVisual: ToolsIcon, children: _jsxs(Text, { sx: { fontSize: 0 }, children: ["Tools", getEnabledMcpToolNames().length > 0 &&
-                                                    ` (${getEnabledMcpToolNames().length})`] }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: {
-                                            maxHeight: '60vh',
-                                            overflowY: 'auto',
-                                        }, children: _jsxs(ActionList, { children: [codemodeEnabled && (_jsx(ActionList.Group, { title: "Codemode", children: _jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "MCP tools are accessible via Codemode meta-tools (search_tools, list_tool_names, execute_code)." }) }) })), configQuery.data?.mcpServers &&
-                                                    configQuery.data.mcpServers.length > 0 ? (
-                                                // Filter to only show selected servers (if mcpServers was provided)
-                                                // If mcpServers is empty array, show no servers
-                                                configQuery.data.mcpServers.filter(server => !mcpServers || isServerSelected(server)).length > 0 ? (configQuery.data.mcpServers
-                                                    .filter(server => !mcpServers || isServerSelected(server))
-                                                    .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: "MCP Servers", children: _jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: {
-                                                                color: 'fg.muted',
-                                                                fontStyle: 'italic',
-                                                            }, children: "No MCP servers selected" }) }) }))) : (_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" }) })) }))] }) }) })] })), showSkillsMenu && (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { type: "button", variant: "invisible", size: "small", leadingVisual: BriefcaseIcon, children: _jsxs(Text, { sx: { fontSize: 0 }, children: ["Skills", enabledSkills.size > 0 && ` (${enabledSkills.size})`] }) }) }), _jsx(ActionMenu.Overlay, { side: "outside-top", align: "start", width: "large", children: _jsx(Box, { sx: {
-                                            maxHeight: '60vh',
-                                            overflowY: 'auto',
-                                        }, children: _jsx(ActionList, { children: skillsQuery.isLoading ? (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "Loading skills..." }) })) : skillsQuery.data?.skills &&
-                                                skillsQuery.data.skills.length > 0 ? (_jsxs(_Fragment, { children: [_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-skills", sx: {
-                                                                    fontSize: 0,
-                                                                    fontWeight: 'semibold',
-                                                                    color: 'fg.muted',
-                                                                }, children: ["Enable all (", enabledSkills.size, "/", skillsQuery.data.skills.length, ")"] }), _jsx(ToggleSwitch, { size: "small", checked: enabledSkills.size ===
-                                                                    skillsQuery.data.skills.length, onClick: () => toggleAllSkills(skillsQuery.data.skills.map(s => s.id), enabledSkills.size !==
-                                                                    skillsQuery.data.skills.length), "aria-labelledby": "toggle-all-skills" })] }), skillsQuery.data.skills.map(skill => (_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-skill-${skill.id}`, sx: { fontWeight: 'semibold' }, children: skill.name }), skill.description && (_jsx(Text, { sx: {
-                                                                            display: 'block',
-                                                                            fontSize: 0,
-                                                                            color: 'fg.muted',
-                                                                            overflow: 'hidden',
-                                                                            textOverflow: 'ellipsis',
-                                                                            whiteSpace: 'nowrap',
-                                                                        }, children: skill.description }))] }), _jsx(ToggleSwitch, { size: "small", checked: enabledSkills.has(skill.id), onClick: () => toggleSkill(skill.id), "aria-labelledby": `toggle-skill-${skill.id}` })] }, skill.id)))] })) : (_jsx(ActionList.Item, { disabled: true, children: _jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: "No skills 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',
-            flexDirection: 'column',
-            height: '100%',
-            bg: backgroundColor || 'canvas.default',
-            borderRadius: borderRadius,
-            border: border,
-            boxShadow: boxShadow,
-            overflow: 'hidden',
-        }, children: [renderHeader(), showErrors && error && (_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    p: padding,
-                    bg: 'danger.subtle',
-                    borderBottom: '1px solid',
-                    borderColor: 'danger.muted',
-                }, children: [_jsx(AlertIcon, { size: 16 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: error.message })] })), _jsx(Box, { sx: { flex: 1, flexGrow: 1, overflow: 'auto', bg: 'canvas.default' }, children: children ? (children) : (_jsx(Box, { sx: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        minHeight: '100%',
-                        bg: 'canvas.default',
-                    }, children: renderProtocolMessages() })) }), footerContent, showInput && renderInputPrompt(), showPoweredBy && _jsx(PoweredByTag, { ...poweredByProps })] }));
-}
-export default ChatBase;