@datalayer/agent-runtimes 1.0.5 → 1.0.6

package/lib/chat/base/ChatBase.js

@@ -18,7 +18,7 @@ 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';
@@ -41,6 +41,20 @@ import { ToolApprovalBanner, ToolApprovalDialog, } from '../tools';
 // 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) => {
@@ -124,6 +138,22 @@ const normalizeApprovalPayload = (input) => {
             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;
@@ -173,10 +203,9 @@ function extractChatMessagesFromFullContext(fullContext) {
     return rawMessages
         .map((msg, index) => {
         const role = String(msg.role || '').toLowerCase();
-        if (role !== 'user' &&
-            role !== 'assistant' &&
-            role !== 'system' &&
-            role !== 'tool') {
+        // 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
@@ -286,7 +315,7 @@ export function ChatBase(props) {
 // ---------------------------------------------------------------------------
 // ChatBaseInner — contains all actual logic
 // ---------------------------------------------------------------------------
-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, 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
@@ -304,18 +333,113 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     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;
@@ -408,36 +532,78 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         const approval = agentRuntimeStore
             .getState()
             .approvals.find(a => a.id === approvalId);
-        const ok = agentRuntimeStore
+        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, approval?.tool_call_id ?? toolCallId, activeAgentId);
-        if (ok) {
-            // Persist decision and clear pending approval only after a successful
-            // WS send so failed sends keep the retryable pending UI visible.
+            .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);
-            agentRuntimeStore.getState().removeApproval(approvalId);
         }
         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, onApproveApprovalProp, persistApprovalDecision]);
+    }, [
+        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 ok = agentRuntimeStore
+        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, approval?.tool_call_id ?? toolCallId, activeAgentId);
-        if (ok) {
-            // Keep pending approval visible when send fails, so the user can retry.
-            agentRuntimeStore.getState().removeApproval(approvalId);
+            .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, onRejectApprovalProp]);
+    }, [
+        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.
@@ -456,6 +622,9 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         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) => {
@@ -484,7 +653,19 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                             ? raw.payload
                             : null;
                     if (data) {
-                        records.push(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) {
@@ -502,6 +683,21 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                     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);
                     }
@@ -533,6 +729,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         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.
@@ -548,11 +745,28 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     // ---- 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
@@ -660,6 +874,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     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);
@@ -732,7 +947,8 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         authToken: protocol?.authToken,
         agentId: protocol?.agentId,
         onMessage: msg => {
-            if (msg.type !== 'tool_approval_approved' &&
+            if (msg.type !== 'tool_approval_created' &&
+                msg.type !== 'tool_approval_approved' &&
                 msg.type !== 'tool_approval_rejected') {
                 return;
             }
@@ -740,6 +956,14 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             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);
         },
     });
@@ -875,7 +1099,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     const mcpServersRef = useRef(mcpServers);
     mcpServersRef.current = mcpServers;
     useEffect(() => {
-        const wsEnabledMcpTools = parseEnabledMcpToolsByServer(mcpStatusData);
+        const wsEnabledMcpTools = parseEnabledMcpToolsByServer(effectiveMcpStatusData);
         if (!wsEnabledMcpTools) {
             return;
         }
@@ -941,10 +1165,15 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             }
             return next;
         });
-    }, [mcpStatusData, activeAgentId, configQuery.data?.mcpServers, wsState]);
+    }, [
+        effectiveMcpStatusData,
+        activeAgentId,
+        configQuery.data?.mcpServers,
+        wsState,
+    ]);
     // Keep MCP tool *approval* synchronized with backend WS snapshots.
     useEffect(() => {
-        const wsApprovedMcpTools = parseApprovedMcpToolsByServer(mcpStatusData);
+        const wsApprovedMcpTools = parseApprovedMcpToolsByServer(effectiveMcpStatusData);
         if (!wsApprovedMcpTools) {
             return;
         }
@@ -959,12 +1188,12 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             });
             return next;
         });
-    }, [mcpStatusData]);
+    }, [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 = mcpStatusData?.servers;
+        const wsServers = effectiveMcpStatusData?.servers;
         if (!wsServers || wsServers.length === 0)
             return;
         const startedIds = wsServers
@@ -986,7 +1215,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             lastConfigMcpKeyRef.current = key;
             configQuery.refetch();
         }
-    }, [mcpStatusData, configQuery]);
+    }, [effectiveMcpStatusData, configQuery]);
     // initialSkills are now handled server-side during agent creation.
     // ---- Toggle helpers ----
     const toggleMcpTool = useCallback((serverId, toolName) => {
@@ -1122,38 +1351,46 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         }
     }, [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;
         }
-        if (!runtimeId)
+        if (!historyScopeId)
             return;
         const store = useConversationStore.getState();
-        const currentlyFetching = store.isFetching(runtimeId);
-        if (!store.needsFetch(runtimeId)) {
-            if (currentlyFetching) {
-                return;
-            }
-            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;
+        }
+        // 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;
         }
-        store.setFetching(runtimeId, true);
+        store.setFetching(historyScopeId, true);
         const fullContextToMessages = () => extractChatMessagesFromFullContext(agentRuntimeStore.getState().fullContext);
         const applyMessages = (messages) => {
-            if (messages.length > 0) {
-                store.setMessages(runtimeId, messages);
-                setDisplayItems(convertHistoryToDisplayItems(messages));
-            }
-            store.markFetched(runtimeId);
+            store.setMessages(historyScopeId, messages);
+            setDisplayItems(convertHistoryToDisplayItems(messages));
+            historyRetryAttemptsRef.current.set(historyScopeId, 0);
+            store.markFetched(historyScopeId);
             setHistoryLoaded(true);
         };
         const existingMessages = fullContextToMessages();
@@ -1161,23 +1398,54 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             applyMessages(existingMessages);
             return;
         }
+        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;
+                }
+                tried.add(key);
+                const ok = agentRuntimeStore.getState().requestRefresh(normalized);
+                if (ok) {
+                    return true;
+                }
+            }
+            return false;
+        };
         // Ask the monitoring websocket for a fresh snapshot and wait briefly
         // for `fullContext.messages` to arrive.
-        const refreshRequested = agentRuntimeStore.getState().requestRefresh();
+        const refreshRequested = requestSnapshotRefresh();
         if (!refreshRequested) {
             // Socket not ready yet; allow a later retry (e.g. when wsState changes).
-            store.setFetching(runtimeId, false);
-            setHistoryLoaded(true);
+            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();
-            const messages = extractChatMessagesFromFullContext(nextFullContext);
             applyMessages(messages);
         });
         const timeout = window.setTimeout(() => {
@@ -1187,23 +1455,45 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             resolved = true;
             unsubscribe();
             // Do not mark as fetched on timeout; keep it retryable for late WS snapshots.
-            store.setFetching(runtimeId, false);
-            setHistoryLoaded(true);
+            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();
         };
-    }, [runtimeId, historyEndpoint, protocol?.agentId, wsState]);
+    }, [
+        historyScopeId,
+        historyEndpoint,
+        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;
@@ -1227,7 +1517,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     }, [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',
@@ -1552,7 +1842,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                     pendingToolExecutionsRef.current = 0;
                     setIsLoading(false);
                     setIsStreaming(false);
-                    agentRuntimeStore.getState().requestRefresh();
+                    agentRuntimeStore.getState().requestRefresh(activeAgentId);
                     break;
                 case 'error':
                     console.error('[ChatBase] Protocol error:', event.error);
@@ -1587,7 +1877,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                     pendingToolExecutionsRef.current = 0;
                     setIsLoading(false);
                     setIsStreaming(false);
-                    agentRuntimeStore.getState().requestRefresh();
+                    agentRuntimeStore.getState().requestRefresh(activeAgentId);
                     break;
             }
         });
@@ -1654,6 +1944,14 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     }
     // ---- 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]);
     // ========================================================================
@@ -1782,7 +2080,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             if (!adapterRef.current) {
                 setIsLoading(false);
                 setIsStreaming(false);
-                agentRuntimeStore.getState().requestRefresh();
+                agentRuntimeStore.getState().requestRefresh(activeAgentId);
             }
             suppressAssistantTextForToolOnlyRef.current = false;
             currentAssistantMessageRef.current = null;
@@ -1796,6 +2094,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         frontendTools,
         useStoreMode,
         onSendMessage,
+        activeAgentId,
         enableStreaming,
         getEnabledMcpToolNames,
         getEnabledSkillIds,
@@ -1879,13 +2178,20 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         pendingToolExecutionsRef.current = 0;
         setIsLoading(false);
         setIsStreaming(false);
-        agentRuntimeStore.getState().requestRefresh();
+        agentRuntimeStore.getState().requestRefresh(activeAgentId);
         suppressAssistantTextForToolOnlyRef.current = false;
         currentAssistantMessageRef.current = null;
         // Also interrupt any code running in the sandbox (best-effort).
         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,
@@ -1899,8 +2205,8 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         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]);
@@ -1911,8 +2217,8 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             toolCallsRef.current.clear();
             if (useStoreMode)
                 clearStoreMessages();
-            if (runtimeId)
-                useConversationStore.getState().clearMessages(runtimeId);
+            if (historyScopeId)
+                useConversationStore.getState().clearMessages(historyScopeId);
             onClear?.();
             headerButtons?.onClear?.();
         }
@@ -2108,7 +2414,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     const configMcpServers = (configQuery.data?.mcpServers || []).filter(server => !mcpServers || isServerSelected(server));
     const filteredMcpServers = useMemo(() => {
         const merged = configMcpServers.map(server => {
-            const wsServer = mcpStatusData?.servers?.find(s => s.id === server.id);
+            const wsServer = effectiveMcpStatusData?.servers?.find(s => s.id === server.id);
             if (wsServer && wsServer.status === 'started') {
                 const updates = {};
                 if (!server.isAvailable) {
@@ -2133,7 +2439,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         // 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 mcpStatusData?.servers ?? []) {
+        for (const wsServer of effectiveMcpStatusData?.servers ?? []) {
             if (wsServer.status === 'started' &&
                 !configIds.has(wsServer.id) &&
                 wsServer.tools &&
@@ -2162,7 +2468,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             }
         }
         return merged;
-    }, [configMcpServers, mcpStatusData, mcpServers]);
+    }, [configMcpServers, effectiveMcpStatusData, mcpServers]);
     // ---- Not ready ----
     if (!ready) {
         return (_jsx(Box, { className: className, sx: {
@@ -2196,12 +2502,14 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             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, subtitle: subtitle, brandIcon: brandIcon, headerContent: headerContent, headerActions: headerActions, showInformation: showInformation, onInformationClick: onInformationClick, padding: padding, sandboxApiBase: indicatorApiBase, sandboxAuthToken: protocol?.authToken, sandboxAgentId: protocol?.agentId, sandboxStatusData: sandboxStatusData, headerButtons: headerButtons, messageCount: messages.length, onNewChat: handleNewChat, onClear: handleClear, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange })), showToolApprovalBanner &&
+        }, 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',
@@ -2211,12 +2519,18 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                     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, 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: mcpStatusData })), 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.