@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/chat/base/ChatBase.js

@@ -18,23 +18,157 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useContext } from 'react';
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { Text, Spinner } from '@primer/react';
-import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
+import { Box, setupPrimerPortals, useThemeStore, getColorPalette, } from '@datalayer/primer-addons';
 import { AlertIcon, PersonIcon } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
 import { QueryClientProvider, QueryClientContext } from '@tanstack/react-query';
+import { useCoreStore } from '@datalayer/core';
+import { DEFAULT_SERVICE_URLS } from '@datalayer/core/lib/api/constants';
 import { useChatStore } from '../../stores/chatStore';
 import { useConversationStore } from '../../stores/conversationStore';
 import { generateMessageId, createUserMessage, createAssistantMessage, } from '../../types/messages';
 import { internalQueryClient, isToolCallMessage, convertHistoryToDisplayItems, createProtocolAdapter, getApiBaseFromConfig, sanitizeAssistantContent, } from '../../utils';
-import { useConfig, useSkills, useContextSnapshot, useSandbox, } from '../../hooks';
+import { useConfig, useSkills, useSkillActions, useContextSnapshot, useSandbox, } from '../../hooks';
+import { useAgentRuntimeWebSocket } from '../../hooks/useAgentRuntimes';
+import { agentRuntimeStore, useAgentRuntimeStore, useAgentRuntimeWsState, } from '../../stores/agentRuntimeStore';
 import { ChatBaseHeader } from '../header/ChatHeaderBase';
 import { ChatEmptyState } from '../display/EmptyState';
 import { PoweredByTag } from '../display/PoweredByTag';
 import { ChatMessageList, } from '../messages/ChatMessageList';
 import { InputToolbar } from '../prompt/InputFooter';
+import { ToolApprovalBanner, ToolApprovalDialog, } from '../tools';
 // Tracks pending prompts already auto-sent for a given conversation scope.
 // This prevents layout-driven unmount/remount cycles from re-sending prompts.
 const sentPendingPromptKeys = new Set();
+const AI_AGENTS_API_PREFIX = '/api/ai-agents/v1';
+const isDevTraceEnabled = () => {
+    try {
+        return Boolean(import.meta.env?.DEV);
+    }
+    catch {
+        return false;
+    }
+};
+const logApprovalTrace = (label, details) => {
+    if (!isDevTraceEnabled()) {
+        return;
+    }
+    console.debug(`[approval-trace] ${label}`, details);
+};
+const normalizeAgentId = (value) => (value ?? '').trim().toLowerCase();
+const normalizeToolName = (value) => value.replace(/[-_]/g, '').toLowerCase();
+const normalizeSkillApprovalId = (value) => {
+    const idx = value.indexOf(':');
+    if (idx <= 0)
+        return value;
+    return value.slice(0, idx);
+};
+const stableStringify = (value) => {
+    if (value === null || typeof value !== 'object') {
+        return JSON.stringify(value);
+    }
+    if (Array.isArray(value)) {
+        return `[${value.map(item => stableStringify(item)).join(',')}]`;
+    }
+    const entries = Object.entries(value)
+        .sort(([a], [b]) => a.localeCompare(b))
+        .map(([key, itemValue]) => `${JSON.stringify(key)}:${stableStringify(itemValue)}`);
+    return `{${entries.join(',')}}`;
+};
+const approvalSignature = (toolName, args) => `${normalizeToolName(toolName)}::${stableStringify(args ?? {})}`;
+const normalizeAiAgentsBaseUrl = (rawBaseUrl) => {
+    const trimmed = rawBaseUrl.replace(/\/$/, '');
+    if (trimmed.endsWith(AI_AGENTS_API_PREFIX)) {
+        return trimmed.slice(0, -AI_AGENTS_API_PREFIX.length);
+    }
+    return trimmed;
+};
+const toWsUrl = (baseUrl, path, token) => {
+    try {
+        const url = new URL(baseUrl);
+        url.protocol = url.protocol === 'https:' ? 'wss:' : 'ws:';
+        url.pathname = path;
+        if (token) {
+            url.searchParams.set('token', token);
+        }
+        else {
+            url.search = '';
+        }
+        return url.toString();
+    }
+    catch {
+        return null;
+    }
+};
+const normalizeApprovalPayload = (input) => {
+    const id = (typeof input.id === 'string' && input.id) ||
+        (typeof input.approval_id === 'string' && input.approval_id) ||
+        (typeof input.approvalId === 'string' && input.approvalId) ||
+        '';
+    const toolName = (typeof input.tool_name === 'string' && input.tool_name) ||
+        (typeof input.toolName === 'string' && input.toolName) ||
+        '';
+    if (!id || !toolName) {
+        return null;
+    }
+    const toolArgs = (input.tool_args && typeof input.tool_args === 'object'
+        ? input.tool_args
+        : input.toolArgs && typeof input.toolArgs === 'object'
+            ? input.toolArgs
+            : undefined) ?? {};
+    return {
+        id,
+        tool_name: toolName,
+        tool_args: toolArgs,
+        tool_call_id: (typeof input.tool_call_id === 'string' && input.tool_call_id) ||
+            (typeof input.toolCallId === 'string' && input.toolCallId) ||
+            undefined,
+        note: (typeof input.note === 'string' && input.note) ||
+            (typeof input.message === 'string' && input.message) ||
+            undefined,
+        status: (typeof input.status === 'string' && input.status) || 'pending',
+        agent_id: (typeof input.agent_id === 'string' && input.agent_id) ||
+            (typeof input.agentId === 'string' && input.agentId) ||
+            undefined,
+        created_at: (typeof input.created_at === 'string' && input.created_at) ||
+            (typeof input.createdAt === 'string' && input.createdAt) ||
+            undefined,
+        updated_at: (typeof input.updated_at === 'string' && input.updated_at) ||
+            (typeof input.updatedAt === 'string' && input.updatedAt) ||
+            undefined,
+    };
+};
+const statusFromApprovalEvent = (eventName) => {
+    if (eventName === 'tool_approval_created') {
+        return 'pending';
+    }
+    if (eventName === 'tool_approval_approved') {
+        return 'approved';
+    }
+    if (eventName === 'tool_approval_rejected') {
+        return 'rejected';
+    }
+    if (eventName === 'tool_approval_deleted') {
+        return 'deleted';
+    }
+    return undefined;
+};
+const RESOLVED_TOOL_CALL_SUPPRESSION_MS = 15_000;
+const isApprovalForAgent = (approval, activeAgentId) => {
+    if (!activeAgentId) {
+        return true;
+    }
+    if (!approval.agent_id) {
+        return false;
+    }
+    if (approval.agent_id === activeAgentId) {
+        return true;
+    }
+    const normalizedApprovalAgentId = normalizeAgentId(approval.agent_id);
+    const normalizedActiveAgentId = normalizeAgentId(activeAgentId);
+    return (normalizedApprovalAgentId.includes(normalizedActiveAgentId) ||
+        normalizedActiveAgentId.includes(normalizedApprovalAgentId));
+};
 function isToolCallOnlyPrompt(content) {
     const normalized = content.toLowerCase();
     return (/tool\s*call\s*only/.test(normalized) ||
@@ -59,6 +193,87 @@ function formatToolResultFallback(result) {
         return 'Tool completed successfully.';
     }
 }
+function extractChatMessagesFromFullContext(fullContext) {
+    if (!fullContext) {
+        return [];
+    }
+    const rawMessages = Array.isArray(fullContext.messages)
+        ? fullContext.messages
+        : [];
+    return rawMessages
+        .map((msg, index) => {
+        const role = String(msg.role || '').toLowerCase();
+        // Only hydrate conversational turns in the visible history.
+        // System/tool messages may contain internal prompts and metadata.
+        if (role !== 'user' && role !== 'assistant') {
+            return null;
+        }
+        const timestampValue = typeof msg.timestamp === 'string' && msg.timestamp.length > 0
+            ? msg.timestamp
+            : new Date().toISOString();
+        const createdAt = new Date(timestampValue);
+        const content = typeof msg.content === 'string'
+            ? msg.content
+            : JSON.stringify(msg.content ?? '');
+        return {
+            id: `history-${role}-${index}-${timestampValue}`,
+            role,
+            content,
+            createdAt: Number.isNaN(createdAt.getTime()) ? new Date() : createdAt,
+        };
+    })
+        .filter((m) => m !== null);
+}
+function parseEnabledMcpToolsByServer(mcpStatusData) {
+    if (!mcpStatusData || typeof mcpStatusData !== 'object') {
+        return null;
+    }
+    const raw = mcpStatusData.enabled_tools_by_server;
+    if (raw == null) {
+        return new Map();
+    }
+    if (typeof raw !== 'object') {
+        return new Map();
+    }
+    const parsed = new Map();
+    for (const [serverId, toolNames] of Object.entries(raw)) {
+        if (!Array.isArray(toolNames)) {
+            continue;
+        }
+        const validToolNames = toolNames.filter((name) => typeof name === 'string' && name.length > 0);
+        const normalizedToolNames = validToolNames.map(name => {
+            const sep = name.indexOf('__');
+            return sep >= 0 ? name.slice(sep + 2) : name;
+        });
+        parsed.set(serverId, new Set(normalizedToolNames));
+    }
+    return parsed;
+}
+function parseApprovedMcpToolsByServer(mcpStatusData) {
+    if (!mcpStatusData || typeof mcpStatusData !== 'object') {
+        return null;
+    }
+    const raw = mcpStatusData.approved_tools_by_server;
+    if (raw == null) {
+        return new Map();
+    }
+    if (typeof raw !== 'object') {
+        return new Map();
+    }
+    const parsed = new Map();
+    for (const [serverId, toolNames] of Object.entries(raw)) {
+        if (!Array.isArray(toolNames)) {
+            continue;
+        }
+        const validToolNames = toolNames.filter((name) => typeof name === 'string' && name.length > 0);
+        const normalizedToolNames = validToolNames.map(name => {
+            const sep = name.indexOf('__');
+            return sep >= 0 ? name.slice(sep + 2) : name;
+        });
+        parsed.set(serverId, new Set(normalizedToolNames));
+    }
+    return parsed;
+}
 // ---------------------------------------------------------------------------
 // ChatBase (outer wrapper — ensures QueryClient is available)
 // ---------------------------------------------------------------------------
@@ -100,26 +315,429 @@ export function ChatBase(props) {
 // ---------------------------------------------------------------------------
 // ChatBaseInner — contains all 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, 
+function ChatBaseInner({ title, subtitle, showHeader = false, showTokenUsage = true, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = true, showToolsMenu = true, showSkillsMenu = true, disableInputPrompt = false, codemodeEnabled = false, onToggleCodemode, initialModel, availableModels, mcpServers, initialSkills: _initialSkills, className, loadingState, headerActions, kernelIndicatorState, kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, chatViewMode, onChatViewModeChange, 
 // Mode selection
 useStore: useStoreMode = true, protocol: protocolRaw, 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, 
+// Tool invocation hooks
+onToolCallStart, onToolCallComplete, 
 // Identity/Authorization props
-onAuthorizationRequired, connectedIdentities, 
+onAuthorizationRequired: _onAuthorizationRequired, connectedIdentities, 
 // Conversation persistence
-runtimeId, historyEndpoint, historyAuthToken, 
+runtimeId, historyEndpoint, historyAuthToken: _historyAuthToken, 
 // Pending prompt
-pendingPrompt, }) {
+pendingPrompt, contextSnapshot: externalContextSnapshot, mcpStatusData, sandboxStatusData, 
+// Tool approval banner
+showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApproveApproval: onApproveApprovalProp, onRejectApproval: onRejectApprovalProp, }) {
     useEffect(() => {
         setupPrimerPortals();
     }, []);
+    const { theme } = useThemeStore();
+    const assistantIconColor = getColorPalette(theme, 'dark').textLight;
+    // ── Built-in pending approvals from the agent-runtime Zustand store ──
+    // When the parent doesn't supply the `pendingApprovals` prop, derive them
+    // from the shared store so the banner works out-of-the-box.
+    const storeApprovals = useAgentRuntimeStore(s => s.approvals);
+    const storeMcpStatus = useAgentRuntimeStore(s => s.mcpStatus);
+    const effectiveMcpStatusData = mcpStatusData ?? storeMcpStatus;
+    const protocolConfig = typeof protocolRaw === 'object'
+        ? protocolRaw
+        : undefined;
+    const configuredAiAgentsBaseUrl = useCoreStore((s) => s.configuration?.aiagentsRunUrl);
+    const activeAgentId = protocolConfig?.agentId || runtimeId;
+    const historyScopeId = runtimeId || activeAgentId;
+    const aiAgentsAuthToken = protocolConfig?.authToken;
+    const aiAgentsBaseUrl = useMemo(() => normalizeAiAgentsBaseUrl(configuredAiAgentsBaseUrl || DEFAULT_SERVICE_URLS.AI_AGENTS), [configuredAiAgentsBaseUrl]);
+    const aiAgentsApprovalWsRef = useRef(null);
+    const resolvedToolCallSuppressionsRef = useRef(new Map());
+    const sendAiAgentsApprovalDecision = useCallback((approvalId, approved, note) => {
+        const ws = aiAgentsApprovalWsRef.current;
+        if (!ws || ws.readyState !== WebSocket.OPEN) {
+            logApprovalTrace('send_decision_skipped_ws_not_ready', {
+                approvalId,
+                approved,
+                wsReadyState: ws?.readyState,
+            });
+            return false;
+        }
+        try {
+            logApprovalTrace('send_decision', {
+                approvalId,
+                approved,
+                hasNote: Boolean(note),
+            });
+            ws.send(JSON.stringify({
+                type: 'tool_approval_decision',
+                approvalId,
+                approved,
+                ...(note ? { note } : {}),
+            }));
+            return true;
+        }
+        catch {
+            logApprovalTrace('send_decision_failed', {
+                approvalId,
+                approved,
+            });
+            return false;
+        }
+    }, []);
+    const requestAiAgentsApprovalHistory = useCallback(() => {
+        const ws = aiAgentsApprovalWsRef.current;
+        if (!ws || ws.readyState !== WebSocket.OPEN) {
+            return false;
+        }
+        try {
+            ws.send(JSON.stringify({ type: 'tool-approvals-history' }));
+            logApprovalTrace('request_history', {});
+            return true;
+        }
+        catch {
+            return false;
+        }
+    }, []);
+    const rememberResolvedToolCall = useCallback((toolCallId) => {
+        if (!toolCallId) {
+            return;
+        }
+        resolvedToolCallSuppressionsRef.current.set(toolCallId, Date.now() + RESOLVED_TOOL_CALL_SUPPRESSION_MS);
+        logApprovalTrace('suppress_pending_for_tool_call', {
+            toolCallId,
+            windowMs: RESOLVED_TOOL_CALL_SUPPRESSION_MS,
+        });
+    }, []);
+    const isSuppressedPending = useCallback((toolCallId) => {
+        if (!toolCallId) {
+            return false;
+        }
+        const expiresAt = resolvedToolCallSuppressionsRef.current.get(toolCallId);
+        if (!expiresAt) {
+            return false;
+        }
+        if (expiresAt < Date.now()) {
+            resolvedToolCallSuppressionsRef.current.delete(toolCallId);
+            return false;
+        }
+        return true;
+    }, []);
+    const queueApprovalDecisionRetry = useCallback((approvalId, approved, note) => {
+        window.setTimeout(() => {
+            const stillPending = agentRuntimeStore
+                .getState()
+                .approvals.some(approval => approval.id === approvalId && approval.status === 'pending');
+            if (!stillPending) {
+                return;
+            }
+            const resent = sendAiAgentsApprovalDecision(approvalId, approved, note);
+            logApprovalTrace('retry_send_decision', {
+                approvalId,
+                approved,
+                sent: resent,
+            });
+            if (resent) {
+                requestAiAgentsApprovalHistory();
+            }
+        }, 500);
+    }, [requestAiAgentsApprovalHistory, sendAiAgentsApprovalDecision]);
+    const storePendingApprovals = useMemo(() => {
+        if (pendingApprovalsProp)
+            return pendingApprovalsProp;
+        return storeApprovals
+            .filter(a => a.status === 'pending' && isApprovalForAgent(a, activeAgentId))
+            .map(a => ({
+            id: a.id,
+            toolName: a.tool_name,
+            toolDescription: a.note ?? undefined,
+            args: a.tool_args ?? {},
+            agentId: a.agent_id ?? '',
+            requestedAt: a.created_at ?? new Date().toISOString(),
+        }));
+    }, [pendingApprovalsProp, storeApprovals, activeAgentId]);
+    const pendingApprovals = storePendingApprovals;
+    // Persist a one-off approval decision into the tools/skills dropdown state
+    // on the agent-runtime so the "Approved" toggle moves Off→On across
+    // sessions and reloads.  For MCP tool approvals (``<server>__<tool>``) this
+    // sends ``mcp_server_tool_approve``.  For skill approvals
+    // (``skill:<skill_id>``) this sends ``skill_approve`` /
+    // ``skill_unapprove``.
+    const persistApprovalDecision = useCallback((approvalId, approved) => {
+        const approval = agentRuntimeStore
+            .getState()
+            .approvals.find(a => a.id === approvalId);
+        const toolName = approval?.tool_name;
+        if (!toolName)
+            return;
+        // Derive the skill id either from a synthetic ``skill:<id>`` tool_name
+        // OR from a skill-tool call (``run_skill_script`` / ``load_skill`` /
+        // ``read_skill_resource``) carrying ``skill`` / ``skill_name`` / ``name``
+        // in its args.  This belt-and-suspenders approach makes sure the
+        // Approved toggle flips even if the server emits a bare approval
+        // request without the ``skill:`` prefix.
+        const deriveSkillId = () => {
+            if (toolName.startsWith('skill:')) {
+                const skillRef = toolName.slice('skill:'.length);
+                if (!skillRef)
+                    return null;
+                return normalizeSkillApprovalId(skillRef);
+            }
+            const SKILL_TOOLS = new Set([
+                'run_skill_script',
+                'load_skill',
+                'read_skill_resource',
+            ]);
+            if (!SKILL_TOOLS.has(toolName))
+                return null;
+            const a = (approval?.tool_args ?? {});
+            const raw = a.skill_name ?? a.skill ?? a.name;
+            if (typeof raw !== 'string' || !raw)
+                return null;
+            return normalizeSkillApprovalId(raw);
+        };
+        const skillId = deriveSkillId();
+        if (skillId) {
+            setLocalSkillApproval(prev => {
+                const next = new Map(prev);
+                next.set(skillId, approved);
+                return next;
+            });
+            const ok = agentRuntimeStore.getState().sendRawMessage({
+                type: approved ? 'skill_approve' : 'skill_unapprove',
+                skillId,
+            }, activeAgentId);
+            if (!ok) {
+                console.warn('[ChatBase] skill_approve persistence dropped: websocket not ready');
+            }
+            return;
+        }
+        // MCP tool approvals: tool_name is ``<serverId>__<toolName>``.
+        const sep = toolName.indexOf('__');
+        if (sep !== -1) {
+            const serverId = toolName.slice(0, sep);
+            const toolOnly = toolName.slice(sep + 2);
+            const ok = agentRuntimeStore.getState().sendRawMessage({
+                type: 'mcp_server_tool_approve',
+                serverId,
+                toolName: toolOnly,
+                approved,
+            }, activeAgentId);
+            if (!ok) {
+                console.warn('[ChatBase] mcp_server_tool_approve persistence dropped: websocket not ready');
+            }
+        }
+    }, [activeAgentId]);
+    // Built-in approve/reject: send decisions to the runtime WS only.
+    // Approval state updates are sourced from the ai-agents WS listener.
+    const onApproveApproval = useCallback(async (approvalId, note, toolCallId) => {
+        const approval = agentRuntimeStore
+            .getState()
+            .approvals.find(a => a.id === approvalId);
+        const resolvedToolCallId = approval?.tool_call_id ?? toolCallId;
+        rememberResolvedToolCall(resolvedToolCallId);
+        // Persist approval decision to the ai-agents backend WS (single source
+        // of truth). This drives SaaS Tool Approvals state and broadcast events.
+        const persistedViaBackend = sendAiAgentsApprovalDecision(approvalId, true, note);
+        if (!persistedViaBackend) {
+            console.warn('[ChatBase] ai-agents tool_approval_decision not sent: websocket not ready');
+        }
+        // Keep the runtime decision path so the in-flight tool call can resume.
+        const runtimeOk = agentRuntimeStore
+            .getState()
+            .sendDecision(approvalId, true, note, resolvedToolCallId, activeAgentId);
+        if (runtimeOk) {
+            // Persist non-approval decisions locally; tool approvals are reconciled
+            // from ai-agents WS events/history to keep a single source of truth.
+            persistApprovalDecision(approvalId, true);
+        }
+        else {
+            console.warn('[ChatBase] tool_approval_decision dropped: websocket not ready');
+        }
+        if (persistedViaBackend || runtimeOk) {
+            // Optimistically clear local pending UI so completed tool calls do not
+            // stay pinned when websocket reconciliation is delayed.
+            agentRuntimeStore.getState().removeApproval(approvalId);
+        }
+        requestAiAgentsApprovalHistory();
+        queueApprovalDecisionRetry(approvalId, true, note);
+        await onApproveApprovalProp?.(approvalId, note);
+    }, [
+        activeAgentId,
+        rememberResolvedToolCall,
+        onApproveApprovalProp,
+        persistApprovalDecision,
+        queueApprovalDecisionRetry,
+        requestAiAgentsApprovalHistory,
+        sendAiAgentsApprovalDecision,
+    ]);
+    const onRejectApproval = useCallback(async (approvalId, note, toolCallId) => {
+        const approval = agentRuntimeStore
+            .getState()
+            .approvals.find(a => a.id === approvalId);
+        const resolvedToolCallId = approval?.tool_call_id ?? toolCallId;
+        rememberResolvedToolCall(resolvedToolCallId);
+        const persistedViaBackend = sendAiAgentsApprovalDecision(approvalId, false, note);
+        if (!persistedViaBackend) {
+            console.warn('[ChatBase] ai-agents tool_approval_decision not sent: websocket not ready');
+        }
+        const runtimeOk = agentRuntimeStore
+            .getState()
+            .sendDecision(approvalId, false, note, resolvedToolCallId, activeAgentId);
+        if (runtimeOk) {
+            // Tool approval list is reconciled from ai-agents WS updates/history.
+        }
+        else {
+            console.warn('[ChatBase] tool_approval_decision dropped: websocket not ready');
+        }
+        if (persistedViaBackend || runtimeOk) {
+            // Optimistically clear local pending UI so completed tool calls do not
+            // stay pinned when websocket reconciliation is delayed.
+            agentRuntimeStore.getState().removeApproval(approvalId);
+        }
+        requestAiAgentsApprovalHistory();
+        queueApprovalDecisionRetry(approvalId, false, note);
+        await onRejectApprovalProp?.(approvalId, note);
+    }, [
+        activeAgentId,
+        rememberResolvedToolCall,
+        onRejectApprovalProp,
+        queueApprovalDecisionRetry,
+        requestAiAgentsApprovalHistory,
+        sendAiAgentsApprovalDecision,
+    ]);
+    // Optional ai-agents bridge for server-mode visibility.
+    // This keeps approval synchronization in ChatBase so examples do not need
+    // their own approval websocket plumbing.
+    useEffect(() => {
+        if (!showToolApprovalBanner || pendingApprovalsProp) {
+            return;
+        }
+        if (!aiAgentsAuthToken) {
+            return;
+        }
+        const wsUrl = toWsUrl(aiAgentsBaseUrl, `${AI_AGENTS_API_PREFIX}/ws`, aiAgentsAuthToken);
+        if (!wsUrl) {
+            return;
+        }
+        let closedByCleanup = false;
+        const ws = new WebSocket(wsUrl);
+        aiAgentsApprovalWsRef.current = ws;
+        ws.onopen = () => {
+            logApprovalTrace('ws_open_request_history', {
+                activeAgentId,
+            });
+            ws.send(JSON.stringify({ type: 'tool-approvals-history' }));
+        };
+        ws.onmessage = (event) => {
+            try {
+                const raw = JSON.parse(String(event.data));
+                const records = [];
+                const msgType = typeof raw.type === 'string' ? raw.type : undefined;
+                const msgEvent = typeof raw.event === 'string' ? raw.event : undefined;
+                if (msgType === 'tool-approvals-history') {
+                    const data = raw.data && typeof raw.data === 'object'
+                        ? raw.data
+                        : {};
+                    const approvals = data.approvals;
+                    if (Array.isArray(approvals)) {
+                        for (const item of approvals) {
+                            if (item && typeof item === 'object') {
+                                records.push(item);
+                            }
+                        }
+                    }
+                }
+                else if (msgEvent?.startsWith('tool_approval_')) {
+                    const data = raw.data && typeof raw.data === 'object'
+                        ? raw.data
+                        : raw.payload && typeof raw.payload === 'object'
+                            ? raw.payload
+                            : null;
+                    if (data) {
+                        const eventStatus = statusFromApprovalEvent(msgEvent);
+                        logApprovalTrace('recv_tool_approval_event', {
+                            event: msgEvent,
+                            approvalId: typeof data.id === 'string'
+                                ? data.id
+                                : typeof data.approval_id === 'string'
+                                    ? data.approval_id
+                                    : undefined,
+                            status: typeof data.status === 'string' ? data.status : eventStatus,
+                        });
+                        records.push(eventStatus && typeof data.status !== 'string'
+                            ? { ...data, status: eventStatus }
+                            : data);
+                    }
+                }
+                if (records.length === 0) {
+                    return;
+                }
+                const state = agentRuntimeStore.getState();
+                for (const record of records) {
+                    const approval = normalizeApprovalPayload(record);
+                    if (!approval) {
+                        continue;
+                    }
+                    const scopedApproval = approval.agent_id || !activeAgentId
+                        ? approval
+                        : { ...approval, agent_id: activeAgentId };
+                    if (!isApprovalForAgent(scopedApproval, activeAgentId)) {
+                        continue;
+                    }
+                    if (scopedApproval.status === 'pending' &&
+                        isSuppressedPending(scopedApproval.tool_call_id)) {
+                        logApprovalTrace('drop_transient_pending', {
+                            approvalId: scopedApproval.id,
+                            toolCallId: scopedApproval.tool_call_id,
+                            status: scopedApproval.status,
+                        });
+                        continue;
+                    }
+                    logApprovalTrace('apply_tool_approval_update', {
+                        approvalId: scopedApproval.id,
+                        status: scopedApproval.status,
+                        agentId: scopedApproval.agent_id,
+                        activeAgentId,
+                    });
+                    if (scopedApproval.status === 'pending') {
+                        state.upsertApproval(scopedApproval);
+                    }
+                    else {
+                        state.removeApproval(scopedApproval.id);
+                    }
+                }
+            }
+            catch {
+                // Ignore malformed payloads.
+            }
+        };
+        ws.onclose = () => {
+            if (!closedByCleanup) {
+                aiAgentsApprovalWsRef.current = null;
+            }
+        };
+        ws.onerror = () => {
+            aiAgentsApprovalWsRef.current = null;
+        };
+        return () => {
+            closedByCleanup = true;
+            aiAgentsApprovalWsRef.current = null;
+            ws.close();
+        };
+    }, [
+        showToolApprovalBanner,
+        pendingApprovalsProp,
+        aiAgentsBaseUrl,
+        aiAgentsAuthToken,
+        activeAgentId,
+        isSuppressedPending,
+    ]);
     // The outer ChatBase wrapper always resolves a string Protocol to a full
     // ProtocolConfig (or undefined).  Narrow the type for internal use.
     const protocol = typeof protocolRaw === 'object' ? protocolRaw : undefined;
     // Stabilize the protocol reference so that the adapter-init effect only
     // re-runs when the protocol *contents* actually change.
     const protocolKey = protocol ? JSON.stringify(protocol) : '';
+    const monitoringServiceName = 'agent-runtimes';
     // Store (optional for message persistence)
     const clearStoreMessages = useChatStore(state => state.clearMessages);
     // Check if protocol is A2A (doesn't support per-request model override)
@@ -127,11 +745,28 @@ pendingPrompt, }) {
     // ---- Component state ----
     const [displayItems, setDisplayItems] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
+    const [liveKernelStatus, setLiveKernelStatus] = useState();
     const [isStreaming, setIsStreaming] = useState(false);
     const [error, setError] = useState(null);
     const [input, setInput] = useState('');
+    useEffect(() => {
+        if (!kernel) {
+            setLiveKernelStatus(undefined);
+            return;
+        }
+        setLiveKernelStatus(kernel.status);
+        const handleStatusChange = (_, nextStatus) => {
+            setLiveKernelStatus(nextStatus);
+        };
+        kernel.statusChanged.connect(handleStatusChange);
+        return () => {
+            kernel.statusChanged.disconnect(handleStatusChange);
+        };
+    }, [kernel]);
     // History-loaded flag — true immediately when there is nothing to fetch
-    const [historyLoaded, setHistoryLoaded] = useState(!runtimeId);
+    const [historyLoaded, setHistoryLoaded] = useState(!historyScopeId);
+    const [historyRefreshTick, setHistoryRefreshTick] = useState(0);
+    const historyRetryAttemptsRef = useRef(new Map());
     // 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
@@ -147,27 +782,99 @@ pendingPrompt, }) {
     // enabledTools tracks which MCP server tools are enabled
     // Format: Map<serverId, Set<toolName>>
     const [enabledMcpTools, setEnabledMcpTools] = useState(new Map());
+    // approvedMcpTools tracks which MCP server tools are approved per server.
+    // Default: no tools approved until explicitly toggled.
+    const [approvedMcpTools, setApprovedMcpTools] = useState(new Map());
     // Note: legacy _enabledTools for backend-defined tools from config query
     const [_enabledTools, setEnabledTools] = useState([]);
-    // Skills state
-    const [enabledSkills, setEnabledSkills] = useState(new Set());
+    const wsState = useAgentRuntimeWsState();
     // ---- Data queries ----
-    const configQuery = useConfig(Boolean(protocol?.enableConfigQuery), protocol?.configEndpoint, protocol?.authToken);
+    const configQuery = useConfig(Boolean(protocol?.enableConfigQuery), protocol?.configEndpoint, protocol?.authToken, protocol?.agentId);
     const skillsQuery = useSkills(Boolean(protocol?.enableConfigQuery) && showSkillsMenu, protocol?.configEndpoint, protocol?.authToken);
+    const { enableSkill: wsEnableSkill, disableSkill: wsDisableSkill, approveSkill: wsApproveSkill, unapproveSkill: wsUnapproveSkill, } = useSkillActions(activeAgentId);
+    // Optimistic skill-approval overrides so inline approval updates the
+    // Skills selector immediately before the next WS snapshot lands.
+    const [localSkillApproval, setLocalSkillApproval] = useState(new Map());
+    useEffect(() => {
+        setLocalSkillApproval(new Map());
+    }, [activeAgentId]);
+    // Derive enabledSkills from the WS-pushed skill statuses.
+    const enabledSkills = useMemo(() => {
+        const set = new Set();
+        for (const s of skillsQuery.data?.skills ?? []) {
+            if (s.status === 'enabled' || s.status === 'loaded') {
+                set.add(s.id);
+            }
+        }
+        return set;
+    }, [skillsQuery.data]);
+    // Backward-compatibility bootstrap: if a running agent reports skills as
+    // available-only, enable them once. This is gated per agent so explicit
+    // user disable actions are not overridden later.
+    useEffect(() => {
+        if (!activeAgentId) {
+            return;
+        }
+        if (defaultSkillsBootstrapRef.current.has(activeAgentId)) {
+            return;
+        }
+        const skills = skillsQuery.data?.skills ?? [];
+        if (skills.length === 0) {
+            return;
+        }
+        const hasAnyEnabled = skills.some(s => s.status === 'enabled' || s.status === 'loaded');
+        if (hasAnyEnabled) {
+            defaultSkillsBootstrapRef.current.add(activeAgentId);
+            return;
+        }
+        const availableSkillIds = skills
+            .filter(s => s.status === 'available')
+            .map(s => s.id)
+            .filter(Boolean);
+        if (availableSkillIds.length === 0) {
+            defaultSkillsBootstrapRef.current.add(activeAgentId);
+            return;
+        }
+        const allSent = availableSkillIds.every(skillId => wsEnableSkill(skillId));
+        if (allSent) {
+            defaultSkillsBootstrapRef.current.add(activeAgentId);
+        }
+    }, [activeAgentId, skillsQuery.data, wsEnableSkill]);
+    // Derive approvedSkills from the WS-pushed skill statuses (default: not approved).
+    const approvedSkills = useMemo(() => {
+        const set = new Set();
+        for (const s of skillsQuery.data?.skills ?? []) {
+            if (s.approved === true) {
+                set.add(s.id);
+            }
+        }
+        localSkillApproval.forEach((approved, skillId) => {
+            if (approved) {
+                set.add(skillId);
+            }
+            else {
+                set.delete(skillId);
+            }
+        });
+        return set;
+    }, [localSkillApproval, skillsQuery.data]);
     const contextSnapshotQuery = useContextSnapshot(Boolean(protocol?.enableConfigQuery) && showTokenUsage, protocol?.configEndpoint, protocol?.agentId, protocol?.authToken);
-    const agentUsage = contextSnapshotQuery.data;
-    const sandboxStatusQuery = useSandbox(Boolean(protocol?.enableConfigQuery) && codemodeEnabled && showHeader, protocol?.configEndpoint, protocol?.authToken);
-    const sandboxStatus = sandboxStatusQuery.data;
+    const agentUsage = externalContextSnapshot ?? contextSnapshotQuery.data;
+    const sandboxStatusQuery = useSandbox(Boolean(protocol?.enableConfigQuery) && showHeader, protocol?.configEndpoint, protocol?.authToken, protocol?.agentId);
     // ---- Refs ----
     const adapterRef = useRef(null);
     const unsubscribeRef = useRef(null);
     const toolCallsRef = useRef(new Map());
     const pendingToolExecutionsRef = useRef(0);
     const currentAssistantMessageRef = useRef(null);
+    const respondedApprovalIdsRef = useRef(new Set());
+    const defaultSkillsBootstrapRef = useRef(new Set());
+    const defaultMcpToolsBootstrapRef = useRef(new Set());
     const suppressAssistantTextForToolOnlyRef = useRef(false);
     const hideMessagesAfterToolUIRef = useRef(hideMessagesAfterToolUI);
     hideMessagesAfterToolUIRef.current = hideMessagesAfterToolUI;
     const threadIdRef = useRef(generateMessageId());
+    const messagesContainerRef = useRef(null);
     const messagesEndRef = useRef(null);
     const inputRef = useRef(null);
     const abortControllerRef = useRef(null);
@@ -180,6 +887,86 @@ pendingPrompt, }) {
     // re-created when frontendTools changes) always accesses the latest value.
     const frontendToolsRef = useRef(frontendTools);
     frontendToolsRef.current = frontendTools;
+    // Stable refs for tool invocation hooks (pre/post)
+    const onToolCallStartRef = useRef(onToolCallStart);
+    onToolCallStartRef.current = onToolCallStart;
+    const onToolCallCompleteRef = useRef(onToolCallComplete);
+    onToolCallCompleteRef.current = onToolCallComplete;
+    const handleRespondRef = useRef(null);
+    const applyServerApprovalDecision = useCallback((approval, approved, note) => {
+        if (!approval?.id) {
+            return false;
+        }
+        if (respondedApprovalIdsRef.current.has(approval.id)) {
+            return false;
+        }
+        let targetToolCallId = approval.tool_call_id;
+        if (!targetToolCallId) {
+            for (const [tcId, tc] of toolCallsRef.current.entries()) {
+                if (tc.status !== 'inProgress' && tc.status !== 'executing') {
+                    continue;
+                }
+                const tcSig = approvalSignature(tc.toolName, tc.args ?? {});
+                const approvalSig = approvalSignature(approval.tool_name, approval.tool_args ?? {});
+                if (tcSig === approvalSig) {
+                    targetToolCallId = tcId;
+                    break;
+                }
+            }
+        }
+        if (!targetToolCallId) {
+            return false;
+        }
+        const target = toolCallsRef.current.get(targetToolCallId);
+        if (!target) {
+            return false;
+        }
+        if (target.status !== 'inProgress' && target.status !== 'executing') {
+            return false;
+        }
+        respondedApprovalIdsRef.current.add(approval.id);
+        void handleRespondRef.current?.(targetToolCallId, {
+            type: 'tool-approval-decision',
+            approved,
+            approvalId: approval.id,
+            toolName: approval.tool_name || target.toolName,
+            _fromServerEcho: true,
+            _alreadyDispatched: true,
+            ...(note ? { message: note } : {}),
+        });
+        return true;
+    }, [activeAgentId]);
+    // ---- Agent-runtime WebSocket (monitoring stream) ----
+    // Derive the bare base URL from configEndpoint or protocol.endpoint.
+    const wsBaseUrl = protocol?.configEndpoint
+        ? protocol.configEndpoint.replace(/\/api\/v1\/(config|configure)\/?$/, '')
+        : (protocol?.endpoint?.replace(/\/api\/v1\/.*$/, '') ?? '');
+    useAgentRuntimeWebSocket({
+        enabled: !!protocol && !!wsBaseUrl,
+        baseUrl: wsBaseUrl,
+        authToken: protocol?.authToken,
+        agentId: protocol?.agentId,
+        onMessage: msg => {
+            if (msg.type !== 'tool_approval_created' &&
+                msg.type !== 'tool_approval_approved' &&
+                msg.type !== 'tool_approval_rejected') {
+                return;
+            }
+            const payload = msg.payload;
+            if (!payload) {
+                return;
+            }
+            // Keep the top approval banner populated in local/no-token flows by
+            // ingesting pending approval events from the runtime stream.
+            if (msg.type === 'tool_approval_created') {
+                if (isApprovalForAgent(payload, activeAgentId)) {
+                    agentRuntimeStore.getState().upsertApproval(payload);
+                }
+                return;
+            }
+            applyServerApprovalDecision(payload, msg.type === 'tool_approval_approved', payload.note ?? undefined);
+        },
+    });
     // ---- Helpers ----
     const isServerSelected = useCallback((server) => {
         if (!mcpServers)
@@ -259,7 +1046,13 @@ pendingPrompt, }) {
                     if (server.isAvailable && server.enabled) {
                         const shouldEnableServer = isServerSelected(server);
                         if (shouldEnableServer) {
-                            const enabledToolNames = new Set(server.tools.filter(t => t.enabled).map(t => t.name));
+                            // Default to "all tools enabled" so the dropdown reflects an
+                            // immediately-usable state. The WS sync effect will reconcile
+                            // with server-side state once it arrives, and user toggles
+                            // win after that.
+                            const enabledToolNames = new Set(server.tools
+                                .map(t => t.name)
+                                .filter((name) => Boolean(name)));
                             newEnabledMcpTools.set(server.id, enabledToolNames);
                         }
                     }
@@ -283,24 +1076,147 @@ pendingPrompt, }) {
             const newMap = new Map();
             for (const server of configQuery.data?.mcpServers ?? []) {
                 if (isServerSelected(server) && prev.has(server.id)) {
-                    newMap.set(server.id, prev.get(server.id));
+                    const existing = prev.get(server.id);
+                    if (existing)
+                        newMap.set(server.id, existing);
                 }
                 else if (isServerSelected(server) &&
                     server.isAvailable &&
                     server.enabled) {
-                    const enabledToolNames = new Set(server.tools.filter(t => t.enabled).map(t => t.name));
+                    const enabledToolNames = new Set(server.tools
+                        .map(t => t.name)
+                        .filter((name) => Boolean(name)));
                     newMap.set(server.id, enabledToolNames);
                 }
             }
             return newMap;
         });
     }, [mcpServers, configQuery.data?.mcpServers, isServerSelected]);
-    // Initialize enabled skills from initialSkills prop
+    // Keep MCP tool selection synchronized with backend WS snapshots.
+    // On first load per agent, if server state reports no enabled tools,
+    // bootstrap to "all enabled" from config so codemode starts usable by
+    // default. Later user toggles still win because bootstrap runs once.
+    const mcpServersRef = useRef(mcpServers);
+    mcpServersRef.current = mcpServers;
     useEffect(() => {
-        if (initialSkills && initialSkills.length > 0) {
-            setEnabledSkills(new Set(initialSkills));
+        const wsEnabledMcpTools = parseEnabledMcpToolsByServer(effectiveMcpStatusData);
+        if (!wsEnabledMcpTools) {
+            return;
         }
-    }, [initialSkills]);
+        const bootstrapAgentKey = activeAgentId || '__global__';
+        const shouldBootstrap = !defaultMcpToolsBootstrapRef.current.has(bootstrapAgentKey) &&
+            wsState === 'connected';
+        setEnabledMcpTools(prev => {
+            const next = new Map(prev);
+            // Apply WS state per server, but only when it carries an authoritative,
+            // non-empty list. An empty list from WS is treated as "no information"
+            // (likely a transient snapshot before backend defaults are projected)
+            // so we keep whatever the user / bootstrap already set, preventing
+            // the dropdown from flickering between enabled and disabled states.
+            wsEnabledMcpTools.forEach((toolNames, serverId) => {
+                const selectedInProps = !mcpServersRef.current ||
+                    mcpServersRef.current.some(server => server.id === serverId);
+                if (!selectedInProps) {
+                    return;
+                }
+                if (toolNames.size === 0) {
+                    return;
+                }
+                next.set(serverId, new Set(toolNames));
+            });
+            if (shouldBootstrap) {
+                const bootstrapMessages = [];
+                for (const server of configQuery.data?.mcpServers ?? []) {
+                    const selectedInProps = !mcpServersRef.current ||
+                        mcpServersRef.current.some(s => s.id === server.id);
+                    if (!selectedInProps || !server.isAvailable || !server.enabled) {
+                        continue;
+                    }
+                    const allToolNames = server.tools
+                        .map(t => t.name)
+                        .filter((name) => Boolean(name));
+                    if (allToolNames.length === 0) {
+                        continue;
+                    }
+                    const current = next.get(server.id);
+                    if (!current || current.size === 0) {
+                        next.set(server.id, new Set(allToolNames));
+                        bootstrapMessages.push({
+                            serverId: server.id,
+                            enabledToolNames: allToolNames,
+                        });
+                    }
+                }
+                let allMessagesSent = true;
+                for (const msg of bootstrapMessages) {
+                    const ok = agentRuntimeStore.getState().sendRawMessage({
+                        type: 'mcp_server_tools_set',
+                        serverId: msg.serverId,
+                        enabledToolNames: msg.enabledToolNames,
+                    }, activeAgentId);
+                    if (!ok) {
+                        allMessagesSent = false;
+                        console.warn('[ChatBase] initial mcp_server_tools_set dropped: websocket not ready');
+                    }
+                }
+                if (allMessagesSent) {
+                    defaultMcpToolsBootstrapRef.current.add(bootstrapAgentKey);
+                }
+            }
+            return next;
+        });
+    }, [
+        effectiveMcpStatusData,
+        activeAgentId,
+        configQuery.data?.mcpServers,
+        wsState,
+    ]);
+    // Keep MCP tool *approval* synchronized with backend WS snapshots.
+    useEffect(() => {
+        const wsApprovedMcpTools = parseApprovedMcpToolsByServer(effectiveMcpStatusData);
+        if (!wsApprovedMcpTools) {
+            return;
+        }
+        setApprovedMcpTools(() => {
+            const next = new Map();
+            wsApprovedMcpTools.forEach((toolNames, serverId) => {
+                const selectedInProps = !mcpServersRef.current ||
+                    mcpServersRef.current.some(server => server.id === serverId);
+                if (selectedInProps) {
+                    next.set(serverId, new Set(toolNames));
+                }
+            });
+            return next;
+        });
+    }, [effectiveMcpStatusData]);
+    // Refetch configQuery when WS reports MCP servers as started but the
+    // cached config response has missing servers or empty tools.
+    const lastConfigMcpKeyRef = useRef('');
+    useEffect(() => {
+        const wsServers = effectiveMcpStatusData?.servers;
+        if (!wsServers || wsServers.length === 0)
+            return;
+        const startedIds = wsServers
+            .filter(s => s.status === 'started')
+            .map(s => s.id)
+            .sort();
+        if (startedIds.length === 0)
+            return;
+        const configServers = configQuery.data?.mcpServers || [];
+        const needsRefetch = startedIds.some(id => {
+            const cs = configServers.find(s => s.id === id);
+            return !cs || cs.tools.length === 0;
+        });
+        // Only refetch once per unique set of started server IDs
+        const key = startedIds.join(',');
+        if (needsRefetch &&
+            key !== lastConfigMcpKeyRef.current &&
+            configQuery.refetch) {
+            lastConfigMcpKeyRef.current = key;
+            configQuery.refetch();
+        }
+    }, [effectiveMcpStatusData, configQuery]);
+    // initialSkills are now handled server-side during agent creation.
     // ---- Toggle helpers ----
     const toggleMcpTool = useCallback((serverId, toolName) => {
         setEnabledMcpTools(prev => {
@@ -313,36 +1229,99 @@ pendingPrompt, }) {
                 serverTools.add(toolName);
             }
             newMap.set(serverId, serverTools);
+            const ok = agentRuntimeStore.getState().sendRawMessage({
+                type: 'mcp_server_tools_set',
+                serverId,
+                enabledToolNames: Array.from(serverTools),
+            }, activeAgentId);
+            if (!ok) {
+                console.warn('[ChatBase] mcp_server_tools_set dropped: websocket not ready');
+            }
             return newMap;
         });
-    }, []);
+    }, [activeAgentId]);
     const toggleAllMcpServerTools = useCallback((serverId, allToolNames, enable) => {
         setEnabledMcpTools(prev => {
             const newMap = new Map(prev);
+            const nextTools = enable ? new Set(allToolNames) : new Set();
             if (enable) {
-                newMap.set(serverId, new Set(allToolNames));
+                newMap.set(serverId, nextTools);
             }
             else {
-                newMap.set(serverId, new Set());
+                newMap.set(serverId, nextTools);
+            }
+            const ok = agentRuntimeStore.getState().sendRawMessage({
+                type: 'mcp_server_tools_set',
+                serverId,
+                enabledToolNames: Array.from(nextTools),
+            }, activeAgentId);
+            if (!ok) {
+                console.warn('[ChatBase] mcp_server_tools_set dropped: websocket not ready');
             }
             return newMap;
         });
-    }, []);
+    }, [activeAgentId]);
     const toggleSkill = useCallback((skillId) => {
-        setEnabledSkills(prev => {
-            const newSet = new Set(prev);
-            if (newSet.has(skillId)) {
-                newSet.delete(skillId);
+        if (enabledSkills.has(skillId)) {
+            wsDisableSkill(skillId);
+        }
+        else {
+            wsEnableSkill(skillId);
+        }
+    }, [enabledSkills, wsEnableSkill, wsDisableSkill]);
+    const toggleAllSkills = useCallback((allSkillIds, enable) => {
+        for (const id of allSkillIds) {
+            if (enable) {
+                wsEnableSkill(id);
             }
             else {
-                newSet.add(skillId);
+                wsDisableSkill(id);
             }
-            return newSet;
+        }
+    }, [wsEnableSkill, wsDisableSkill]);
+    const toggleMcpToolApproval = useCallback((serverId, toolName) => {
+        setApprovedMcpTools(prev => {
+            const newMap = new Map(prev);
+            // Default: if no entry for this server, no tool is approved.
+            const serverTools = new Set(prev.get(serverId) ?? []);
+            const currentlyApproved = serverTools.has(toolName);
+            if (currentlyApproved) {
+                serverTools.delete(toolName);
+            }
+            else {
+                serverTools.add(toolName);
+            }
+            newMap.set(serverId, serverTools);
+            const ok = agentRuntimeStore.getState().sendRawMessage({
+                type: 'mcp_server_tool_approve',
+                serverId,
+                toolName,
+                approved: !currentlyApproved,
+            }, activeAgentId);
+            if (!ok) {
+                console.warn('[ChatBase] mcp_server_tool_approve dropped: websocket not ready');
+            }
+            return newMap;
         });
-    }, []);
-    const toggleAllSkills = useCallback((allSkillIds, enable) => {
-        setEnabledSkills(enable ? new Set(allSkillIds) : new Set());
-    }, []);
+    }, [activeAgentId]);
+    const toggleSkillApproval = useCallback((skillId) => {
+        if (approvedSkills.has(skillId)) {
+            setLocalSkillApproval(prev => {
+                const next = new Map(prev);
+                next.set(skillId, false);
+                return next;
+            });
+            wsUnapproveSkill(skillId);
+        }
+        else {
+            setLocalSkillApproval(prev => {
+                const next = new Map(prev);
+                next.set(skillId, true);
+                return next;
+            });
+            wsApproveSkill(skillId);
+        }
+    }, [approvedSkills, wsApproveSkill, wsUnapproveSkill]);
     const getEnabledMcpToolNames = useCallback(() => {
         const toolNames = [];
         enabledMcpTools.forEach((tools, serverId) => {
@@ -356,123 +1335,165 @@ pendingPrompt, }) {
         return Array.from(enabledSkills);
     }, [enabledSkills]);
     // ---- Load messages from store on mount ----
+    // Only hydrate from the shared ``useChatStore`` when there is no
+    // ``runtimeId`` (pure store mode without server-backed history).  When a
+    // ``runtimeId`` is provided the "Conversation history loading" effect
+    // below is the single source of truth — reading from the shared store
+    // here would otherwise leak messages from a previously-mounted
+    // ``ChatBase`` (e.g. after switching examples) before the store reset
+    // or history fetch completes.
     useEffect(() => {
-        if (useStoreMode) {
+        if (useStoreMode && !runtimeId) {
             const storeMessages = useChatStore.getState().messages;
             if (storeMessages.length > 0) {
                 setDisplayItems(storeMessages);
             }
         }
-    }, [useStoreMode]);
+    }, [useStoreMode, runtimeId]);
     // ---- Conversation history loading ----
-    const prevRuntimeIdRef = useRef(undefined);
+    const prevHistoryScopeRef = useRef(undefined);
     useEffect(() => {
-        if (runtimeId !== prevRuntimeIdRef.current) {
-            prevRuntimeIdRef.current = runtimeId;
+        if (historyScopeId !== prevHistoryScopeRef.current) {
+            if (historyScopeId) {
+                historyRetryAttemptsRef.current.set(historyScopeId, 0);
+            }
+            prevHistoryScopeRef.current = historyScopeId;
             setDisplayItems([]);
             toolCallsRef.current.clear();
-            if (!runtimeId)
+            if (!historyScopeId)
                 return;
         }
-        else {
+        if (!historyScopeId)
             return;
-        }
         const store = useConversationStore.getState();
-        if (!store.needsFetch(runtimeId)) {
-            const storedMessages = store.getMessages(runtimeId);
-            if (storedMessages.length > 0) {
-                setDisplayItems(storedMessages);
-            }
+        const currentlyFetching = store.isFetching(historyScopeId);
+        const storedMessages = store.getMessages(historyScopeId);
+        // 1) Fast local hydration for view switches in the same browser session.
+        if (storedMessages.length > 0) {
+            setDisplayItems(storedMessages);
             setHistoryLoaded(true);
+        }
+        if (currentlyFetching) {
             return;
         }
-        store.setFetching(runtimeId, true);
-        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);
+        // 2) On refresh/mount, prefer websocket refresh from the runtime.
+        // If the socket is not connected yet, keep retryable fetch state and wait.
+        if (wsState !== 'connected') {
+            if (storedMessages.length === 0) {
+                setHistoryLoaded(false);
+            }
             return;
         }
-        if (protocol?.agentId && !endpoint.includes('agent_id=')) {
-            const separator = endpoint.includes('?') ? '&' : '?';
-            endpoint = `${endpoint}${separator}agent_id=${encodeURIComponent(protocol.agentId)}`;
+        store.setFetching(historyScopeId, true);
+        const fullContextToMessages = () => extractChatMessagesFromFullContext(agentRuntimeStore.getState().fullContext);
+        const applyMessages = (messages) => {
+            store.setMessages(historyScopeId, messages);
+            setDisplayItems(convertHistoryToDisplayItems(messages));
+            historyRetryAttemptsRef.current.set(historyScopeId, 0);
+            store.markFetched(historyScopeId);
+            setHistoryLoaded(true);
+        };
+        const existingMessages = fullContextToMessages();
+        if (existingMessages.length > 0) {
+            applyMessages(existingMessages);
+            return;
         }
-        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 requestSnapshotRefresh = () => {
+            const candidates = [
+                activeAgentId,
+                protocolConfig?.agentId,
+                runtimeId,
+                historyScopeId,
+                'default',
+                undefined,
+            ];
+            const tried = new Set();
+            for (const candidate of candidates) {
+                const normalized = typeof candidate === 'string' ? candidate.trim() : undefined;
+                const key = normalized || '__global__';
+                if (tried.has(key)) {
+                    continue;
                 }
-                const data = await response.json();
-                const messages = (data.messages || []).map((msg) => {
-                    if (msg.toolCalls && Array.isArray(msg.toolCalls)) {
-                        msg.toolCalls = msg.toolCalls.map((tc) => {
-                            if (tc.toolCallId && tc.toolName)
-                                return tc;
-                            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;
-                });
-                if (messages.length > 0) {
-                    store.setMessages(runtimeId, messages);
-                    const items = convertHistoryToDisplayItems(messages);
-                    setDisplayItems(items);
+                tried.add(key);
+                const ok = agentRuntimeStore.getState().requestRefresh(normalized);
+                if (ok) {
+                    return true;
                 }
-                store.markFetched(runtimeId);
-                setHistoryLoaded(true);
             }
-            catch (err) {
-                console.error('[ChatBase] Failed to fetch conversation history:', err);
-                store.markFetched(runtimeId);
+            return false;
+        };
+        // Ask the monitoring websocket for a fresh snapshot and wait briefly
+        // for `fullContext.messages` to arrive.
+        const refreshRequested = requestSnapshotRefresh();
+        if (!refreshRequested) {
+            // Socket not ready yet; allow a later retry (e.g. when wsState changes).
+            store.setFetching(historyScopeId, false);
+            if (storedMessages.length === 0) {
+                setHistoryLoaded(false);
+            }
+            return;
+        }
+        let resolved = false;
+        const retryRefreshTimeout = window.setTimeout(() => {
+            if (!resolved) {
+                requestSnapshotRefresh();
+            }
+        }, 500);
+        const unsubscribe = agentRuntimeStore.subscribe(state => state.fullContext, nextFullContext => {
+            if (resolved || !nextFullContext) {
+                return;
+            }
+            const messages = extractChatMessagesFromFullContext(nextFullContext);
+            resolved = true;
+            unsubscribe();
+            applyMessages(messages);
+        });
+        const timeout = window.setTimeout(() => {
+            if (resolved) {
+                return;
+            }
+            resolved = true;
+            unsubscribe();
+            // Do not mark as fetched on timeout; keep it retryable for late WS snapshots.
+            store.setFetching(historyScopeId, false);
+            setHistoryLoaded(storedMessages.length > 0);
+            const attempts = historyRetryAttemptsRef.current.get(historyScopeId) ?? 0;
+            const canRetry = wsState === 'connected' && attempts < 3;
+            if (canRetry) {
+                historyRetryAttemptsRef.current.set(historyScopeId, attempts + 1);
+                requestSnapshotRefresh();
+                setHistoryRefreshTick(tick => tick + 1);
+            }
+            else {
+                // After retries are exhausted, treat the conversation as loaded-empty
+                // so pending prompts are not blocked forever on fresh runtimes.
                 setHistoryLoaded(true);
             }
+        }, 2000);
+        return () => {
+            window.clearTimeout(retryRefreshTimeout);
+            window.clearTimeout(timeout);
+            unsubscribe();
         };
-        fetchHistory();
     }, [
-        runtimeId,
+        historyScopeId,
         historyEndpoint,
-        historyAuthToken,
-        protocol?.endpoint,
-        protocol?.authToken,
+        protocol?.agentId,
+        wsState,
+        activeAgentId,
+        historyRefreshTick,
     ]);
     // Keep in-memory store in sync with displayItems
     useEffect(() => {
-        if (runtimeId && displayItems.length > 0) {
+        if (historyScopeId && displayItems.length > 0) {
             const messagesToSave = displayItems.filter((item) => !isToolCallMessage(item));
             if (messagesToSave.length > 0) {
-                useConversationStore.getState().setMessages(runtimeId, messagesToSave);
+                useConversationStore
+                    .getState()
+                    .setMessages(historyScopeId, messagesToSave);
             }
         }
-    }, [runtimeId, displayItems]);
+    }, [historyScopeId, displayItems]);
     // ---- Derived state ----
     const messages = displayItems.filter((item) => !isToolCallMessage(item));
     const ready = true;
@@ -483,7 +1504,7 @@ pendingPrompt, }) {
             prevMessageCountRef.current = currentCount;
             onMessagesChange?.(messages);
         }
-    }, [displayItems, onMessagesChange]);
+    }, [displayItems, messages, onMessagesChange]);
     const padding = compact ? 2 : 3;
     // Derive approval config from protocol for built-in tool approval support
     const approvalConfig = useMemo(() => {
@@ -496,7 +1517,7 @@ pendingPrompt, }) {
     }, [protocol?.configEndpoint, protocol?.authToken]);
     const defaultAvatarConfig = {
         userAvatar: _jsx(PersonIcon, { size: 16 }),
-        assistantAvatar: _jsx(AiAgentIcon, { size: 16 }),
+        assistantAvatar: _jsx(AiAgentIcon, { size: 16, color: assistantIconColor }),
         showAvatars: true,
         avatarSize: 32,
         userAvatarBg: 'neutral.muted',
@@ -517,6 +1538,33 @@ pendingPrompt, }) {
         unsubscribeRef.current = adapter.subscribe((event) => {
             switch (event.type) {
                 case 'message':
+                    if (event.usage) {
+                        const timestampMs = event.timestamp instanceof Date
+                            ? event.timestamp.getTime()
+                            : Date.now();
+                        const promptTokens = Math.max(0, event.usage.promptTokens ?? 0);
+                        const completionTokens = Math.max(0, event.usage.completionTokens ?? 0);
+                        const totalTokens = Math.max(promptTokens + completionTokens, event.usage.totalTokens ?? 0);
+                        const runtimeState = agentRuntimeStore.getState();
+                        runtimeState.appendLocalTokenTurn({
+                            serviceName: monitoringServiceName,
+                            agentId: protocol?.agentId,
+                            timestampMs,
+                            promptTokens,
+                            completionTokens,
+                            totalTokens,
+                        });
+                        const liveCumulativeUsd = runtimeState.costUsage?.cumulativeCostUsd;
+                        if (typeof liveCumulativeUsd === 'number' &&
+                            Number.isFinite(liveCumulativeUsd)) {
+                            runtimeState.upsertLocalCostPoint({
+                                serviceName: monitoringServiceName,
+                                agentId: protocol?.agentId,
+                                timestampMs,
+                                cumulativeUsd: Math.max(0, liveCumulativeUsd),
+                            });
+                        }
+                    }
                     if (suppressAssistantTextForToolOnlyRef.current) {
                         const suppressedMessageId = currentAssistantMessageRef.current?.id;
                         if (suppressedMessageId) {
@@ -635,6 +1683,12 @@ pendingPrompt, }) {
                             };
                             toolCallsRef.current.set(toolCallId, toolCallMsg);
                             setDisplayItems(prev => [...prev, toolCallMsg]);
+                            // Fire pre-hook for new tool calls
+                            onToolCallStartRef.current?.({
+                                toolName,
+                                toolCallId,
+                                args,
+                            });
                             const frontendTool = frontendToolsRef.current?.find(t => t.name === toolName);
                             const toolHandler = frontendTool?.handler;
                             // Only execute when we have actual args. AG-UI emits an
@@ -714,6 +1768,15 @@ pendingPrompt, }) {
                                 setDisplayItems(prev => prev.map(item => isToolCallMessage(item) && item.toolCallId === toolCallId
                                     ? updatedToolCall
                                     : item));
+                                // Fire post-hook for tool results
+                                onToolCallCompleteRef.current?.({
+                                    toolName: existingToolCall.toolName,
+                                    toolCallId,
+                                    args: existingToolCall.args,
+                                    result: event.toolResult.result,
+                                    status: updatedToolCall.status,
+                                    error: event.toolResult.error,
+                                });
                             }
                         }
                     }
@@ -779,6 +1842,7 @@ pendingPrompt, }) {
                     pendingToolExecutionsRef.current = 0;
                     setIsLoading(false);
                     setIsStreaming(false);
+                    agentRuntimeStore.getState().requestRefresh(activeAgentId);
                     break;
                 case 'error':
                     console.error('[ChatBase] Protocol error:', event.error);
@@ -813,6 +1877,7 @@ pendingPrompt, }) {
                     pendingToolExecutionsRef.current = 0;
                     setIsLoading(false);
                     setIsStreaming(false);
+                    agentRuntimeStore.getState().requestRefresh(activeAgentId);
                     break;
             }
         });
@@ -879,6 +1944,14 @@ pendingPrompt, }) {
     }
     // ---- Auto-scroll to bottom ----
     useEffect(() => {
+        const container = messagesContainerRef.current;
+        if (container) {
+            container.scrollTo({
+                top: container.scrollHeight,
+                behavior: 'smooth',
+            });
+            return;
+        }
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     }, [displayItems]);
     // ========================================================================
@@ -976,7 +2049,7 @@ pendingPrompt, }) {
                     description: tool.description,
                     parameters: tool.parameters || { type: 'object', properties: {} },
                 }));
-                console.log('[ChatBase] frontendTools count:', frontendTools?.length ?? 0, 'toolsForRequest:', toolsForRequest.map(t => t.name));
+                console.warn('[ChatBase] frontendTools count:', frontendTools?.length ?? 0, 'toolsForRequest:', toolsForRequest.map(t => t.name));
                 const enabledMcpToolNames = getEnabledMcpToolNames();
                 const enabledSkillIds = getEnabledSkillIds();
                 await adapterRef.current.sendMessage(userMessage, {
@@ -1007,6 +2080,7 @@ pendingPrompt, }) {
             if (!adapterRef.current) {
                 setIsLoading(false);
                 setIsStreaming(false);
+                agentRuntimeStore.getState().requestRefresh(activeAgentId);
             }
             suppressAssistantTextForToolOnlyRef.current = false;
             currentAssistantMessageRef.current = null;
@@ -1020,6 +2094,7 @@ pendingPrompt, }) {
         frontendTools,
         useStoreMode,
         onSendMessage,
+        activeAgentId,
         enableStreaming,
         getEnabledMcpToolNames,
         getEnabledSkillIds,
@@ -1048,6 +2123,7 @@ pendingPrompt, }) {
         adapterReady,
         handleSend,
         onSendMessage,
+        applyServerApprovalDecision,
     ]);
     // ---- handleStop ----
     const handleStop = useCallback(() => {
@@ -1102,22 +2178,20 @@ pendingPrompt, }) {
         pendingToolExecutionsRef.current = 0;
         setIsLoading(false);
         setIsStreaming(false);
+        agentRuntimeStore.getState().requestRefresh(activeAgentId);
         suppressAssistantTextForToolOnlyRef.current = false;
         currentAssistantMessageRef.current = null;
         // Also interrupt any code running in the sandbox (best-effort).
-        if (protocol?.configEndpoint) {
-            const query = protocol.agentId
-                ? `?agent_id=${encodeURIComponent(protocol.agentId)}`
-                : '';
-            const interruptUrl = `${getApiBaseFromConfig(protocol.configEndpoint)}/configure/sandbox/interrupt${query}`;
-            const headers = { 'Content-Type': 'application/json' };
-            if (protocol.authToken) {
-                headers['Authorization'] = `Bearer ${protocol.authToken}`;
-            }
-            fetch(interruptUrl, { method: 'POST', headers }).catch(() => { });
+        sandboxStatusQuery.interrupt();
+        // Interrupt the connected notebook kernel as well (best-effort),
+        // matching the toolbar's stop/interrupt behavior.
+        if (kernel && kernel.status === 'busy') {
+            void kernel.interrupt().catch(() => { });
         }
     }, [
+        kernel,
         useStoreMode,
+        activeAgentId,
         protocol?.configEndpoint,
         protocol?.authToken,
         protocol?.agentId,
@@ -1131,8 +2205,8 @@ pendingPrompt, }) {
         threadIdRef.current = generateMessageId();
         if (useStoreMode)
             clearStoreMessages();
-        if (runtimeId)
-            useConversationStore.getState().clearMessages(runtimeId);
+        if (historyScopeId)
+            useConversationStore.getState().clearMessages(historyScopeId);
         onNewChat?.();
         headerButtons?.onNewChat?.();
     }, [clearStoreMessages, onNewChat, headerButtons, useStoreMode, runtimeId]);
@@ -1143,29 +2217,12 @@ pendingPrompt, }) {
             toolCallsRef.current.clear();
             if (useStoreMode)
                 clearStoreMessages();
-            if (runtimeId)
-                useConversationStore.getState().clearMessages(runtimeId);
+            if (historyScopeId)
+                useConversationStore.getState().clearMessages(historyScopeId);
             onClear?.();
             headerButtons?.onClear?.();
         }
     }, [clearStoreMessages, onClear, headerButtons, useStoreMode, runtimeId]);
-    // ---- handleSandboxInterrupt ----
-    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 });
-            sandboxStatusQuery.refetch();
-        }
-        catch {
-            // Interrupt is best-effort
-        }
-    }, [protocol?.configEndpoint, protocol?.authToken, sandboxStatusQuery]);
     // ---- HITL respond handler (passed to MessageList) ----
     const handleRespond = useCallback(async (toolCallId, result) => {
         const existingToolCall = toolCallsRef.current.get(toolCallId);
@@ -1174,28 +2231,85 @@ pendingPrompt, }) {
                 existingToolCall.status === 'inProgress')) {
             const isApprovalDecision = !!result &&
                 typeof result === 'object' &&
-                result.type === 'tool-approval-decision' &&
+                result.type ===
+                    'tool-approval-decision' &&
                 typeof result.approved === 'boolean';
             if (isApprovalDecision && adapterRef.current) {
-                const approved = Boolean(result.approved);
-                const updatedToolCall = {
-                    ...existingToolCall,
-                    result,
-                    status: approved ? 'complete' : 'error',
-                    error: approved ? undefined : 'Tool approval rejected by user',
-                };
-                toolCallsRef.current.set(toolCallId, updatedToolCall);
-                setDisplayItems(prev => prev.map(item => isToolCallMessage(item) && item.toolCallId === toolCallId
-                    ? updatedToolCall
-                    : item));
-                setIsLoading(true);
-                setIsStreaming(true);
+                const resultRecord = result;
+                const approved = Boolean(resultRecord.approved);
+                const fromServerEcho = resultRecord._fromServerEcho === true;
+                const alreadyDispatched = resultRecord._alreadyDispatched === true;
+                const requiresClientContinuation = existingToolCall.status === 'inProgress';
+                const rawToolName = typeof resultRecord.toolName === 'string'
+                    ? resultRecord.toolName
+                    : existingToolCall.toolName;
+                const isMcpApprovalTool = rawToolName.includes('__');
+                // When the user approves a tool call inline, immediately reflect that
+                // approval in the tools dropdown so the toggle switches to "On".
+                // Tool names follow the convention "serverId__toolName" (MCP) or are
+                // bare skill names. We extract the server prefix for MCP tools.
+                if (approved) {
+                    const sep = rawToolName.indexOf('__');
+                    if (sep !== -1) {
+                        const serverId = rawToolName.slice(0, sep);
+                        const toolName = rawToolName.slice(sep + 2);
+                        setApprovedMcpTools(prev => {
+                            const newMap = new Map(prev);
+                            const tools = new Set(prev.get(serverId) ?? []);
+                            tools.add(toolName);
+                            newMap.set(serverId, tools);
+                            return newMap;
+                        });
+                    }
+                }
                 try {
                     const approvalId = typeof result === 'object' &&
                         result !== null &&
                         typeof result.approvalId === 'string'
                         ? result.approvalId
                         : undefined;
+                    // Match AgentToolApprovalsExample semantics: first click sends only
+                    // a websocket decision; continuation waits for server echo.
+                    // Deferred pending-approval calls (`status === 'inProgress'`) still
+                    // require an explicit sendToolResult continuation from the client,
+                    // so do not return early in that mode.
+                    if (!fromServerEcho && !requiresClientContinuation) {
+                        if (approvalId) {
+                            if (approved) {
+                                await onApproveApproval?.(approvalId, undefined, toolCallId);
+                            }
+                            else {
+                                await onRejectApproval?.(approvalId, undefined, toolCallId);
+                            }
+                        }
+                        return;
+                    }
+                    if (approvalId && !alreadyDispatched) {
+                        if (approved) {
+                            await onApproveApproval?.(approvalId, undefined, toolCallId);
+                        }
+                        else {
+                            await onRejectApproval?.(approvalId, undefined, toolCallId);
+                        }
+                    }
+                    // MCP approvals are unblocked server-side by the websocket decision
+                    // and continue on the same stream. Avoid sending an extra
+                    // sendToolResult continuation, which can trigger duplicate approvals.
+                    if (isMcpApprovalTool && !requiresClientContinuation) {
+                        return;
+                    }
+                    const updatedToolCall = {
+                        ...existingToolCall,
+                        result,
+                        status: approved ? 'complete' : 'error',
+                        error: approved ? undefined : 'Tool approval rejected by user',
+                    };
+                    toolCallsRef.current.set(toolCallId, updatedToolCall);
+                    setDisplayItems(prev => prev.map(item => isToolCallMessage(item) && item.toolCallId === toolCallId
+                        ? updatedToolCall
+                        : item));
+                    setIsLoading(true);
+                    setIsStreaming(true);
                     await adapterRef.current.sendToolResult(toolCallId, {
                         toolCallId,
                         success: approved,
@@ -1210,9 +2324,7 @@ pendingPrompt, }) {
                                 message: 'Tool call rejected by user.',
                                 ...(approvalId ? { approvalId } : {}),
                             },
-                        ...(approved
-                            ? {}
-                            : { error: 'Tool approval rejected by user' }),
+                        ...(approved ? {} : { error: 'Tool approval rejected by user' }),
                     });
                 }
                 catch (err) {
@@ -1275,7 +2387,8 @@ pendingPrompt, }) {
                 // event will handle it when the run truly completes.
             }
         }
-    }, [displayItems]);
+    }, [displayItems, onApproveApproval, onRejectApproval]);
+    handleRespondRef.current = handleRespond;
     // ---- Suggestion handlers (for EmptyState) ----
     const handleSuggestionSubmit = useCallback((suggestion) => {
         void handleSend(suggestion.message);
@@ -1284,6 +2397,78 @@ pendingPrompt, }) {
         setInput(message);
         setTimeout(() => inputRef.current?.focus(), 0);
     }, []);
+    // Banner approvals dispatch the decision immediately; the continuation is
+    // resumed when the runtime websocket echoes approved/rejected.
+    const handleBannerApprove = useCallback(async (approvalId, note) => {
+        // Decision dispatch happens here; continuation is resumed on server echo.
+        await onApproveApproval?.(approvalId, note);
+    }, [onApproveApproval]);
+    const handleBannerReject = useCallback(async (approvalId, note) => {
+        // Decision dispatch happens here; continuation is resumed on server echo.
+        await onRejectApproval?.(approvalId, note);
+    }, [onRejectApproval]);
+    // ---- Compute data for InputToolbar ----
+    // Merge real-time WebSocket MCP status into the cached config data so the
+    // dropdown reflects live availability even when the config query was cached
+    // before the MCP servers finished starting.
+    const configMcpServers = (configQuery.data?.mcpServers || []).filter(server => !mcpServers || isServerSelected(server));
+    const filteredMcpServers = useMemo(() => {
+        const merged = configMcpServers.map(server => {
+            const wsServer = effectiveMcpStatusData?.servers?.find(s => s.id === server.id);
+            if (wsServer && wsServer.status === 'started') {
+                const updates = {};
+                if (!server.isAvailable) {
+                    updates.isAvailable = true;
+                }
+                // Always prefer WS-discovered tools over cached config data.
+                // The config query may have been fetched before MCP servers
+                // finished starting, leaving tools empty or stale.
+                if (wsServer.tools && wsServer.tools.length > 0) {
+                    updates.tools = wsServer.tools.map(t => ({
+                        name: t.name,
+                        description: t.description || '',
+                        enabled: t.enabled ?? true,
+                    }));
+                }
+                if (Object.keys(updates).length > 0) {
+                    return { ...server, ...updates };
+                }
+            }
+            return server;
+        });
+        // Include WS-only servers that are started but missing from the config
+        // query (e.g. config was fetched before the MCP server finished starting).
+        const configIds = new Set(configMcpServers.map(s => s.id));
+        for (const wsServer of effectiveMcpStatusData?.servers ?? []) {
+            if (wsServer.status === 'started' &&
+                !configIds.has(wsServer.id) &&
+                wsServer.tools &&
+                wsServer.tools.length > 0) {
+                const selected = !mcpServers || mcpServers.some(s => s.id === wsServer.id);
+                if (selected) {
+                    merged.push({
+                        id: wsServer.id,
+                        name: wsServer.id,
+                        description: '',
+                        url: '',
+                        enabled: true,
+                        tools: wsServer.tools.map(t => ({
+                            name: t.name,
+                            description: t.description || '',
+                            enabled: t.enabled ?? true,
+                        })),
+                        args: [],
+                        requiredEnvVars: [],
+                        isAvailable: true,
+                        transport: 'stdio',
+                        isConfig: false,
+                        isRunning: true,
+                    });
+                }
+            }
+        }
+        return merged;
+    }, [configMcpServers, effectiveMcpStatusData, mcpServers]);
     // ---- Not ready ----
     if (!ready) {
         return (_jsx(Box, { className: className, sx: {
@@ -1306,8 +2491,10 @@ pendingPrompt, }) {
     const indicatorApiBase = protocol?.configEndpoint
         ? protocol.configEndpoint.replace(/\/api\/v1\/(config|configure)\/?$/, '')
         : undefined;
-    // ---- Compute data for InputToolbar ----
-    const filteredMcpServers = (configQuery.data?.mcpServers || []).filter(server => !mcpServers || isServerSelected(server));
+    const connectionConfirmed = !protocol ||
+        protocol.enableConfigQuery === false ||
+        !!configQuery.data ||
+        !!skillsQuery.data;
     // ========================================================================
     // Render
     // ========================================================================
@@ -1315,12 +2502,16 @@ pendingPrompt, }) {
             display: 'flex',
             flexDirection: 'column',
             height: '100%',
+            maxHeight: '100%',
+            minHeight: 0,
             bg: backgroundColor || 'canvas.default',
             borderRadius,
             border,
             boxShadow,
             overflow: 'hidden',
-        }, children: [showHeader && (_jsx(ChatBaseHeader, { title: title, brandIcon: brandIcon, headerContent: headerContent, headerActions: headerActions, showInformation: showInformation, onInformationClick: onInformationClick, padding: padding, sandboxStatus: sandboxStatus, onSandboxInterrupt: handleSandboxInterrupt, headerButtons: headerButtons, messageCount: messages.length, onNewChat: handleNewChat, onClear: handleClear, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange })), showErrors && error && (_jsxs(Box, { sx: {
+        }, children: [showHeader && (_jsx(ChatBaseHeader, { title: title, subtitle: subtitle, brandIcon: brandIcon, headerContent: headerContent, headerActions: headerActions, showInformation: showInformation, onInformationClick: onInformationClick, padding: padding, kernelIndicatorState: kernelIndicatorState, runtimeStatus: sandboxStatusData ?? sandboxStatusQuery.data, kernel: kernel, kernelEnvironmentName: kernelEnvironmentName, kernelCpu: kernelCpu, kernelMemory: kernelMemory, kernelGpu: kernelGpu, headerButtons: headerButtons, messageCount: messages.length, onNewChat: handleNewChat, onClear: handleClear, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange })), showToolApprovalBanner &&
+                pendingApprovals &&
+                pendingApprovals.length > 0 && (_jsx(ToolApprovalBannerSection, { pendingApprovals: pendingApprovals, onApprove: handleBannerApprove, onReject: handleBannerReject })), showErrors && error && (_jsxs(Box, { sx: {
                     display: 'flex',
                     alignItems: 'center',
                     gap: 2,
@@ -1328,11 +2519,60 @@ pendingPrompt, }) {
                     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: {
+                }, children: [_jsx(AlertIcon, { size: 16 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: error.message })] })), _jsx(Box, { ref: messagesContainerRef, sx: {
+                    flex: 1,
+                    flexGrow: 1,
+                    minHeight: 0,
+                    overflow: 'auto',
+                    bg: 'canvas.default',
+                }, children: children ? (children) : (_jsx(Box, { sx: {
                         display: 'flex',
                         flexDirection: 'column',
-                        minHeight: '100%',
+                        minHeight: 0,
                         bg: 'canvas.default',
-                    }, children: _jsx(ChatMessageList, { displayItems: displayItems, isLoading: isLoading, isStreaming: isStreaming, showLoadingIndicator: showLoadingIndicator, hideMessagesAfterToolUI: hideMessagesAfterToolUI, avatarConfig: defaultAvatarConfig, padding: padding, renderToolResult: renderToolResult, approvalConfig: approvalConfig, messagesEndRef: messagesEndRef, onRespond: handleRespond, emptyContent: _jsx(ChatEmptyState, { emptyState: emptyState, brandIcon: brandIcon, description: description, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, onSuggestionSubmit: handleSuggestionSubmit, onSuggestionFill: handleSuggestionFill }) }) })) }), footerContent, showInput && (_jsx(InputToolbar, { input: input, setInput: setInput, isLoading: isLoading, placeholder: placeholder, autoFocus: autoFocus, focusTrigger: focusTrigger, padding: padding, onSend: () => handleSend(), onStop: handleStop, showTokenUsage: showTokenUsage, agentUsage: agentUsage, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, codemodeEnabled: codemodeEnabled, isA2AProtocol: isA2AProtocol, hasConfigData: !!configQuery.data, hasSkillsData: !!skillsQuery.data, models: availableModels || configQuery.data?.models || [], selectedModel: selectedModel, onModelSelect: setSelectedModel, availableTools: configQuery.data?.builtinTools || [], mcpServers: filteredMcpServers, enabledMcpTools: enabledMcpTools, enabledMcpToolCount: getEnabledMcpToolNames().length, onToggleMcpTool: toggleMcpTool, onToggleAllMcpServerTools: toggleAllMcpServerTools, skills: skillsQuery.data?.skills || [], skillsLoading: !!skillsQuery.isLoading, enabledSkills: enabledSkills, onToggleSkill: toggleSkill, onToggleAllSkills: toggleAllSkills, apiBase: indicatorApiBase, authToken: protocol?.authToken, agentId: protocol?.agentId })), showPoweredBy && _jsx(PoweredByTag, { ...poweredByProps })] }));
+                    }, children: _jsx(ChatMessageList, { displayItems: displayItems, isLoading: isLoading, isStreaming: isStreaming, showLoadingIndicator: showLoadingIndicator, hideMessagesAfterToolUI: hideMessagesAfterToolUI, avatarConfig: defaultAvatarConfig, padding: padding, renderToolResult: renderToolResult, approvalConfig: approvalConfig, messagesEndRef: messagesEndRef, onRespond: handleRespond, emptyContent: _jsx(ChatEmptyState, { emptyState: emptyState, brandIcon: brandIcon, description: description, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, onSuggestionSubmit: handleSuggestionSubmit, onSuggestionFill: handleSuggestionFill }) }) })) }), footerContent, showInput && (_jsx(InputToolbar, { input: input, setInput: setInput, isLoading: isLoading, kernelStatus: liveKernelStatus, connectionConfirmed: connectionConfirmed, placeholder: placeholder, autoFocus: autoFocus, focusTrigger: focusTrigger, padding: padding, onSend: () => handleSend(), onStop: handleStop, disableInputPrompt: disableInputPrompt, showTokenUsage: showTokenUsage, agentUsage: agentUsage, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, codemodeEnabled: codemodeEnabled, onToggleCodemode: onToggleCodemode, isA2AProtocol: isA2AProtocol, hasConfigData: !!configQuery.data, hasSkillsData: !!skillsQuery.data, models: availableModels || configQuery.data?.models || [], selectedModel: selectedModel, onModelSelect: setSelectedModel, availableTools: configQuery.data?.builtinTools || [], mcpServers: filteredMcpServers, enabledMcpTools: enabledMcpTools, enabledMcpToolCount: getEnabledMcpToolNames().length, onToggleMcpTool: toggleMcpTool, onToggleAllMcpServerTools: toggleAllMcpServerTools, approvedMcpTools: approvedMcpTools, onToggleMcpToolApproval: toggleMcpToolApproval, skills: skillsQuery.data?.skills || [], skillsLoading: !!skillsQuery.isLoading, enabledSkills: enabledSkills, onToggleSkill: toggleSkill, onToggleAllSkills: toggleAllSkills, approvedSkills: approvedSkills, onToggleSkillApproval: toggleSkillApproval, apiBase: indicatorApiBase, authToken: protocol?.authToken, mcpStatusData: effectiveMcpStatusData })), showPoweredBy && _jsx(PoweredByTag, { ...poweredByProps })] }));
+}
+/**
+ * Internal component rendering the top-of-chat approval banner + review dialog.
+ * Extracted so we can keep `ChatBase` focused on chat flow while still owning
+ * the banner UX via the `showToolApprovalBanner` prop.
+ */
+function ToolApprovalBannerSection({ pendingApprovals, onApprove, onReject, }) {
+    const [activeApproval, setActiveApproval] = useState(null);
+    // Keep the active approval in sync with the incoming list; if the active
+    // one is no longer pending (resolved), dismiss the dialog.
+    useEffect(() => {
+        if (!activeApproval) {
+            return;
+        }
+        if (!pendingApprovals.some(a => a.id === activeApproval.id)) {
+            setActiveApproval(null);
+        }
+    }, [pendingApprovals, activeApproval]);
+    return (_jsxs(_Fragment, { children: [_jsx(ToolApprovalBanner, { pendingApprovals: pendingApprovals, onReview: approval => setActiveApproval(approval), onApproveAll: async () => {
+                    if (!onApprove)
+                        return;
+                    for (const approval of pendingApprovals) {
+                        await onApprove(approval.id);
+                    }
+                } }), _jsx(ToolApprovalDialog, { isOpen: !!activeApproval, toolName: activeApproval?.toolName ?? '', toolDescription: activeApproval?.toolDescription, args: activeApproval?.args ?? {}, onApprove: async () => {
+                    if (!activeApproval || !onApprove) {
+                        setActiveApproval(null);
+                        return;
+                    }
+                    const result = await onApprove(activeApproval.id);
+                    if (result !== false) {
+                        setActiveApproval(null);
+                    }
+                }, onDeny: async () => {
+                    if (!activeApproval || !onReject) {
+                        setActiveApproval(null);
+                        return;
+                    }
+                    const result = await onReject(activeApproval.id, 'Rejected from tool approval dialog');
+                    if (result !== false) {
+                        setActiveApproval(null);
+                    }
+                }, onClose: () => setActiveApproval(null) })] }));
 }
 export default ChatBase;