@datalayer/agent-runtimes 0.0.11 → 0.0.12

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

@@ -17,12 +17,14 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { useContext } from 'react';
 import { useCallback, useEffect, useRef, useState, } from 'react';
-import { Heading, Text, Spinner, IconButton, Textarea, Button, ActionMenu, ActionList, LabelGroup, Label, ToggleSwitch, } from '@primer/react';
+import { Heading, Text, Spinner, IconButton, Button, ActionMenu, ActionList, LabelGroup, Label, ToggleSwitch, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { AlertIcon, PlusIcon, TrashIcon, GearIcon, PersonIcon, PaperAirplaneIcon, SquareCircleIcon, ToolsIcon, AiModelIcon, BriefcaseIcon, } from '@primer/octicons-react';
+import { AlertIcon, PlusIcon, TrashIcon, GearIcon, PersonIcon, ToolsIcon, AiModelIcon, BriefcaseIcon, CircleIcon, SquareFillIcon, CommentDiscussionIcon, DeviceMobileIcon, SidebarExpandIcon, InfoIcon, } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
+import ReactECharts from 'echarts-for-react';
 import { useQuery, QueryClient, QueryClientProvider, QueryClientContext, } from '@tanstack/react-query';
 import { Streamdown } from 'streamdown';
+import { streamdownMarkdownStyles, streamdownCodeBlockStyles, } from '../styles/streamdownStyles';
 import { PoweredByTag } from '../elements/PoweredByTag';
 import { requestAPI } from '../../handler';
 import { useChatStore } from '../../store/chatStore';
@@ -30,6 +32,7 @@ import { useConversationStore } from '../../store/conversationStore';
 import { generateMessageId, createUserMessage, createAssistantMessage, } from '../../types/message';
 import { AGUIAdapter, A2AAdapter, VercelAIAdapter, ACPAdapter, } from '../../protocols';
 import { ToolCallDisplay } from '../display/ToolCallDisplay';
+import { InputPrompt } from './InputPrompt';
 // Singleton QueryClient for ChatBase instances without external QueryClientProvider
 const internalQueryClient = new QueryClient({
     defaultOptions: {
@@ -94,6 +97,79 @@ function getMessageText(message) {
         .map(part => part.text)
         .join('');
 }
+/**
+ * Convert history messages to display items.
+ *
+ * History returns:
+ * - Assistant messages with `toolCalls` array (tool invocations)
+ * - Tool messages (role='tool') with content (tool results)
+ *
+ * For display, we need to:
+ * 1. Keep user/assistant text messages as ChatMessage
+ * 2. Convert each toolCall from assistant messages into a ToolCallMessage
+ * 3. Match tool result messages (role='tool') to their ToolCallMessage and update result
+ * 4. Filter out raw tool messages (role='tool') from display — they're merged into ToolCallMessage
+ */
+function convertHistoryToDisplayItems(messages) {
+    const displayItems = [];
+    const toolCallMap = new Map();
+    // First pass: collect all tool calls and build the initial display list
+    for (const msg of messages) {
+        if (msg.role === 'tool') {
+            // Tool result messages — will be merged later
+            const toolCallId = msg.metadata?.toolCallId;
+            if (toolCallId && toolCallMap.has(toolCallId)) {
+                // Update the existing tool call with the result
+                const toolCall = toolCallMap.get(toolCallId);
+                toolCall.result = msg.content;
+                toolCall.status = 'complete';
+            }
+            // Don't add tool messages to display — they're represented by ToolCallMessage
+            continue;
+        }
+        if (msg.role === 'assistant' && msg.toolCalls && msg.toolCalls.length > 0) {
+            // Assistant message with tool calls
+            // First add any text content as a regular message
+            const textContent = typeof msg.content === 'string' ? msg.content.trim() : '';
+            if (textContent) {
+                displayItems.push({
+                    ...msg,
+                    toolCalls: undefined, // Remove toolCalls from the text message
+                });
+            }
+            // Then add each tool call as a ToolCallMessage
+            // Map from message.ts ToolCallStatus to ChatBase ToolCallStatus
+            for (const tc of msg.toolCalls) {
+                let status = 'complete';
+                if (tc.status === 'pending' || tc.status === 'awaiting-approval') {
+                    status = 'inProgress';
+                }
+                else if (tc.status === 'executing') {
+                    status = 'executing';
+                }
+                else if (tc.status === 'failed') {
+                    status = 'error';
+                }
+                const toolCallMsg = {
+                    id: `tc-${tc.toolCallId}`,
+                    type: 'tool-call',
+                    toolCallId: tc.toolCallId,
+                    toolName: tc.toolName,
+                    args: tc.args || {},
+                    status,
+                    result: tc.result,
+                };
+                toolCallMap.set(tc.toolCallId, toolCallMsg);
+                displayItems.push(toolCallMsg);
+            }
+        }
+        else {
+            // Regular user/assistant/system message
+            displayItems.push(msg);
+        }
+    }
+    return displayItems;
+}
 /**
  * Create protocol adapter based on configuration
  */
@@ -259,19 +335,63 @@ function useContextSnapshotQuery(enabled, configEndpoint, agentId, authToken) {
     });
     return result;
 }
+/**
+ * Hook to poll sandbox execution status from the backend.
+ * Returns whether a sandbox is available and if code is currently executing.
+ */
+function useSandboxStatusQuery(enabled, configEndpoint, authToken) {
+    const queryClient = useContext(QueryClientContext);
+    if (!queryClient) {
+        return {
+            data: undefined,
+            isLoading: false,
+            isError: false,
+            error: null,
+            refetch: () => Promise.resolve({}),
+        };
+    }
+    const statusUrl = configEndpoint
+        ? `${getApiBaseFromConfig(configEndpoint)}/configure/sandbox-status`
+        : undefined;
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const result = useQuery({
+        queryKey: ['sandbox-status', statusUrl],
+        queryFn: async () => {
+            if (!statusUrl) {
+                throw new Error('No sandbox status URL available');
+            }
+            const headers = { 'Content-Type': 'application/json' };
+            if (authToken) {
+                headers['Authorization'] = `Bearer ${authToken}`;
+            }
+            const response = await fetch(statusUrl, { headers });
+            if (!response.ok) {
+                throw new Error(`Sandbox status fetch failed: ${response.statusText}`);
+            }
+            return response.json();
+        },
+        enabled: enabled && !!statusUrl,
+        refetchInterval: query => (query.state.status === 'error' ? false : 2_000),
+        refetchOnMount: 'always',
+        staleTime: 0,
+        retry: 1,
+    });
+    return result;
+}
 /**
  * ChatBase component - Universal chat panel supporting store, protocol, and custom modes
  */
-export function ChatBase({ title, showHeader = false, showTokenUsage = true, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, codemodeEnabled = false, initialModel, availableModels, mcpServers, initialSkills, className, loadingState, headerActions, 
+export function ChatBase({ title, showHeader = false, showTokenUsage = true, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, codemodeEnabled = false, initialModel, availableModels, mcpServers, initialSkills, className, loadingState, headerActions, chatViewMode, onChatViewModeChange, 
 // Mode selection
 useStore: useStoreMode = true, protocol: protocolProp, agentRuntimeConfig, onSendMessage, enableStreaming = false, 
 // Extended props
-brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, emptyState, renderToolResult, footerContent, 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, 
+brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, emptyState, renderToolResult, footerContent, showInformation = false, onInformationClick, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact = false, placeholder, description = 'Start a conversation with the AI agent.', onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus = false, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, focusTrigger, frontendTools, 
 // Identity/Authorization props
 onAuthorizationRequired, connectedIdentities, 
 // Conversation persistence
-runtimeId, historyEndpoint, historyAuthToken, }) {
-    // Convert agentRuntimeConfig to protocol if provided
+runtimeId, historyEndpoint, historyAuthToken, 
+// Pending prompt
+pendingPrompt, }) {
     const protocol = agentRuntimeConfig
         ? {
             type: agentRuntimeConfig.protocol || 'ag-ui',
@@ -288,25 +408,30 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
     const existingQueryClient = useContext(QueryClientContext);
     // If no QueryClient is available, wrap with our internal provider
     if (!existingQueryClient) {
-        return (_jsx(QueryClientProvider, { client: internalQueryClient, children: _jsx(ChatBaseInner, { title: title, showHeader: showHeader, showTokenUsage: showTokenUsage, showLoadingIndicator: showLoadingIndicator, showErrors: showErrors, showInput: showInput, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, codemodeEnabled: codemodeEnabled, initialModel: initialModel, availableModels: availableModels, mcpServers: mcpServers, initialSkills: initialSkills, className: className, loadingState: loadingState, headerActions: headerActions, useStore: effectiveUseStoreMode, protocol: protocol, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon, avatarConfig: avatarConfig, headerButtons: headerButtons, showPoweredBy: showPoweredBy, poweredByProps: poweredByProps, emptyState: emptyState, renderToolResult: renderToolResult, footerContent: footerContent, headerContent: headerContent, children: children, borderRadius: borderRadius, backgroundColor: backgroundColor, border: border, boxShadow: boxShadow, compact: compact, placeholder: placeholder, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, onClear: onClear, onMessagesChange: onMessagesChange, autoFocus: autoFocus, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, focusTrigger: focusTrigger, frontendTools: frontendTools, onAuthorizationRequired: onAuthorizationRequired, connectedIdentities: connectedIdentities, runtimeId: runtimeId, historyEndpoint: historyEndpoint, historyAuthToken: historyAuthToken }) }));
+        return (_jsx(QueryClientProvider, { client: internalQueryClient, children: _jsx(ChatBaseInner, { title: title, showHeader: showHeader, showTokenUsage: showTokenUsage, showLoadingIndicator: showLoadingIndicator, showErrors: showErrors, showInput: showInput, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, codemodeEnabled: codemodeEnabled, initialModel: initialModel, availableModels: availableModels, mcpServers: mcpServers, initialSkills: initialSkills, className: className, loadingState: loadingState, headerActions: headerActions, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange, useStore: effectiveUseStoreMode, protocol: protocol, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon, avatarConfig: avatarConfig, headerButtons: headerButtons, showPoweredBy: showPoweredBy, poweredByProps: poweredByProps, emptyState: emptyState, renderToolResult: renderToolResult, footerContent: footerContent, showInformation: showInformation, onInformationClick: onInformationClick, headerContent: headerContent, children: children, borderRadius: borderRadius, backgroundColor: backgroundColor, border: border, boxShadow: boxShadow, compact: compact, placeholder: placeholder, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, onClear: onClear, onMessagesChange: onMessagesChange, autoFocus: autoFocus, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, focusTrigger: focusTrigger, frontendTools: frontendTools, onAuthorizationRequired: onAuthorizationRequired, connectedIdentities: connectedIdentities, runtimeId: runtimeId, historyEndpoint: historyEndpoint, historyAuthToken: historyAuthToken, pendingPrompt: pendingPrompt }) }));
     }
     // QueryClient already available, render inner component directly
-    return (_jsx(ChatBaseInner, { title: title, showHeader: showHeader, showTokenUsage: showTokenUsage, showLoadingIndicator: showLoadingIndicator, showErrors: showErrors, showInput: showInput, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, codemodeEnabled: codemodeEnabled, initialModel: initialModel, availableModels: availableModels, mcpServers: mcpServers, initialSkills: initialSkills, className: className, loadingState: loadingState, headerActions: headerActions, useStore: effectiveUseStoreMode, protocol: protocol, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon, avatarConfig: avatarConfig, headerButtons: headerButtons, showPoweredBy: showPoweredBy, poweredByProps: poweredByProps, emptyState: emptyState, renderToolResult: renderToolResult, footerContent: footerContent, headerContent: headerContent, children: children, borderRadius: borderRadius, backgroundColor: backgroundColor, border: border, boxShadow: boxShadow, compact: compact, placeholder: placeholder, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, onClear: onClear, onMessagesChange: onMessagesChange, autoFocus: autoFocus, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, focusTrigger: focusTrigger, frontendTools: frontendTools, onAuthorizationRequired: onAuthorizationRequired, connectedIdentities: connectedIdentities, runtimeId: runtimeId, historyEndpoint: historyEndpoint, historyAuthToken: historyAuthToken }));
+    return (_jsx(ChatBaseInner, { title: title, showHeader: showHeader, showTokenUsage: showTokenUsage, showLoadingIndicator: showLoadingIndicator, showErrors: showErrors, showInput: showInput, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, codemodeEnabled: codemodeEnabled, initialModel: initialModel, availableModels: availableModels, mcpServers: mcpServers, initialSkills: initialSkills, className: className, loadingState: loadingState, headerActions: headerActions, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange, useStore: effectiveUseStoreMode, protocol: protocol, onSendMessage: onSendMessage, enableStreaming: enableStreaming, brandIcon: brandIcon, avatarConfig: avatarConfig, headerButtons: headerButtons, showPoweredBy: showPoweredBy, poweredByProps: poweredByProps, emptyState: emptyState, renderToolResult: renderToolResult, footerContent: footerContent, showInformation: showInformation, onInformationClick: onInformationClick, headerContent: headerContent, children: children, borderRadius: borderRadius, backgroundColor: backgroundColor, border: border, boxShadow: boxShadow, compact: compact, placeholder: placeholder, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, onClear: onClear, onMessagesChange: onMessagesChange, autoFocus: autoFocus, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, focusTrigger: focusTrigger, frontendTools: frontendTools, onAuthorizationRequired: onAuthorizationRequired, connectedIdentities: connectedIdentities, runtimeId: runtimeId, historyEndpoint: historyEndpoint, historyAuthToken: historyAuthToken, pendingPrompt: pendingPrompt }));
 }
 /**
  * Inner ChatBase component - contains all the actual logic
  */
-function ChatBaseInner({ title, showHeader = false, showTokenUsage = true, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, codemodeEnabled = false, initialModel, availableModels, mcpServers, initialSkills, className, loadingState, headerActions, 
+function ChatBaseInner({ title, showHeader = false, showTokenUsage = true, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, codemodeEnabled = false, initialModel, availableModels, mcpServers, initialSkills, className, loadingState, headerActions, chatViewMode, onChatViewModeChange, 
 // Mode selection
 useStore: useStoreMode = true, protocol, onSendMessage, enableStreaming = false, 
 // Extended props
-brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, emptyState, renderToolResult, footerContent, 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, 
+brandIcon, avatarConfig, headerButtons, showPoweredBy = false, poweredByProps, emptyState, renderToolResult, footerContent, showInformation = false, onInformationClick, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact = false, placeholder, description = 'Start a conversation with the AI agent.', onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus = false, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, focusTrigger, frontendTools, 
 // Identity/Authorization props
 onAuthorizationRequired, connectedIdentities, 
 // Conversation persistence
-runtimeId, historyEndpoint, historyAuthToken, }) {
-    // Ensure Primer's default portal has high z-index for ActionMenu overlays
+runtimeId, historyEndpoint, historyAuthToken, 
+// Pending prompt
+pendingPrompt, }) {
     useHighZIndexPortal();
+    // Stabilize the protocol reference so that the adapter-init effect only
+    // re-runs when the protocol *contents* actually change, not just when the
+    // parent re-renders with a new object literal that has the same values.
+    const protocolKey = protocol ? JSON.stringify(protocol) : '';
     // Store (optional for message persistence)
     const clearStoreMessages = useChatStore(state => state.clearMessages);
     // Check if protocol is A2A (doesn't support per-request model override)
@@ -317,7 +442,12 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
     const [isStreaming, setIsStreaming] = useState(false);
     const [error, setError] = useState(null);
     const [input, setInput] = useState('');
-    // Model and tools state
+    // History-loaded flag — true immediately when there is nothing to fetch
+    const [historyLoaded, setHistoryLoaded] = useState(!runtimeId);
+    // Adapter-ready flag — flipped to true once the protocol adapter is initialised
+    const [adapterReady, setAdapterReady] = useState(false);
+    // Guard so the pending prompt is sent at most once
+    const pendingPromptSentRef = useRef(false);
     const [selectedModel, setSelectedModel] = useState('');
     // enabledTools tracks which MCP server tools are enabled
     // Format: Map<serverId, Set<toolName>>
@@ -336,15 +466,26 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
     // Gated by showTokenUsage (not showHeader), so usage is visible even without a title bar.
     const contextSnapshotQuery = useContextSnapshotQuery(Boolean(protocol?.enableConfigQuery) && showTokenUsage, protocol?.configEndpoint, protocol?.agentId, protocol?.authToken);
     const agentUsage = contextSnapshotQuery.data;
+    // Sandbox status query — polls sandbox execution state for the header indicator.
+    // Only active when codemode is enabled and there's a config endpoint.
+    const sandboxStatusQuery = useSandboxStatusQuery(Boolean(protocol?.enableConfigQuery) && codemodeEnabled && showHeader, protocol?.configEndpoint, protocol?.authToken);
+    const sandboxStatus = sandboxStatusQuery.data;
     // Refs
     const adapterRef = useRef(null);
     const unsubscribeRef = useRef(null);
     const toolCallsRef = useRef(new Map());
+    // Track the number of in-flight frontend tool executions.
+    // While > 0, isLoading must stay true (the agent turn is not finished).
+    const pendingToolExecutionsRef = useRef(0);
     const currentAssistantMessageRef = useRef(null);
     const threadIdRef = useRef(generateMessageId());
     const messagesEndRef = useRef(null);
     const inputRef = useRef(null);
     const abortControllerRef = useRef(null);
+    // State for context pie chart overlay
+    const [contextOverlayOpen, setContextOverlayOpen] = useState(false);
+    const contextAnchorRef = useRef(null);
+    const hoverTimeoutRef = useRef(null);
     // Use a ref for connectedIdentities to avoid infinite loops in useCallback
     // (the array reference changes on every render even if contents are the same)
     const connectedIdentitiesRef = useRef(connectedIdentities);
@@ -418,15 +559,16 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
         if ((configQuery.data || availableModels) && !selectedModel) {
             // Use availableModels override if provided, otherwise use config models
             const modelsList = availableModels || configQuery.data?.models || [];
-            // Use initialModel if provided, otherwise select first available model
-            if (initialModel) {
-                // Check if the initial model exists in the models list
-                const modelExists = modelsList.some(m => m.id === initialModel);
+            // Priority: initialModel prop > defaultModel from config > first available model
+            const preferredModel = initialModel || configQuery.data?.defaultModel;
+            if (preferredModel) {
+                // Check if the preferred model exists in the models list
+                const modelExists = modelsList.some(m => m.id === preferredModel);
                 if (modelExists) {
-                    setSelectedModel(initialModel);
+                    setSelectedModel(preferredModel);
                 }
                 else {
-                    // Fallback to first available model if initialModel not found
+                    // Fallback to first available model if preferred model not found
                     const firstAvailableModel = modelsList.find(m => m.isAvailable !== false);
                     const firstModel = firstAvailableModel || modelsList[0];
                     if (firstModel) {
@@ -435,7 +577,7 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
                 }
             }
             else {
-                // No initialModel provided, select first available model
+                // No preferred model, select first available model
                 const firstAvailableModel = modelsList.find(m => m.isAvailable !== false);
                 const firstModel = firstAvailableModel || modelsList[0];
                 if (firstModel) {
@@ -596,18 +738,26 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
             if (storedMessages.length > 0) {
                 setDisplayItems(storedMessages);
             }
+            setHistoryLoaded(true);
             return;
         }
         // Mark as fetching to prevent duplicate requests
         store.setFetching(runtimeId, true);
         // Build the history endpoint URL
-        const endpoint = historyEndpoint ||
-            (protocol?.endpoint ? `${protocol.endpoint}/history` : null);
+        let endpoint = historyEndpoint ||
+            (protocol?.endpoint ? `${protocol.endpoint}/api/v1/history` : null);
         if (!endpoint) {
             console.warn('[ChatBase] No history endpoint available for runtimeId:', runtimeId);
             store.markFetched(runtimeId);
+            setHistoryLoaded(true);
             return;
         }
+        // Append agent_id query param if the protocol has an agentId
+        // and the URL doesn't already include one
+        if (protocol?.agentId && !endpoint.includes('agent_id=')) {
+            const separator = endpoint.includes('?') ? '&' : '?';
+            endpoint = `${endpoint}${separator}agent_id=${encodeURIComponent(protocol.agentId)}`;
+        }
         // Fetch conversation history from server
         const fetchHistory = async () => {
             try {
@@ -627,17 +777,51 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
                     throw new Error(`Failed to fetch history: ${response.status} ${response.statusText}`);
                 }
                 const data = await response.json();
-                const messages = data.messages || [];
-                // Store in memory and update display
+                // Map server history messages to ChatMessage format.
+                // The server may return toolCalls in either the legacy {id, name, arguments}
+                // shape or the correct ToolCallContentPart {toolCallId, toolName, args} shape.
+                // Normalize both to ToolCallContentPart so the AG-UI adapter can serialize them.
+                const messages = (data.messages || []).map((msg) => {
+                    if (msg.toolCalls && Array.isArray(msg.toolCalls)) {
+                        msg.toolCalls = msg.toolCalls.map((tc) => {
+                            // If already in ToolCallContentPart format, keep as-is
+                            if (tc.toolCallId && tc.toolName)
+                                return tc;
+                            // Legacy format: {id, name, arguments} → ToolCallContentPart
+                            let parsedArgs = tc.args ?? tc.arguments ?? {};
+                            if (typeof parsedArgs === 'string') {
+                                try {
+                                    parsedArgs = JSON.parse(parsedArgs);
+                                }
+                                catch {
+                                    parsedArgs = {};
+                                }
+                            }
+                            return {
+                                type: 'tool-call',
+                                toolCallId: tc.toolCallId ?? tc.id ?? tc.tool_call_id ?? '',
+                                toolName: tc.toolName ?? tc.name ?? tc.tool_name ?? '',
+                                args: parsedArgs,
+                                status: tc.status ?? 'completed',
+                            };
+                        });
+                    }
+                    return msg;
+                });
+                // Store in memory and convert to display items
                 if (messages.length > 0) {
                     store.setMessages(runtimeId, messages);
-                    setDisplayItems(messages);
+                    // Convert to display items: expand tool calls, merge tool results
+                    const items = convertHistoryToDisplayItems(messages);
+                    setDisplayItems(items);
                 }
                 store.markFetched(runtimeId);
+                setHistoryLoaded(true);
             }
             catch (err) {
                 console.error('[ChatBase] Failed to fetch conversation history:', err);
                 store.markFetched(runtimeId);
+                setHistoryLoaded(true);
             }
         };
         fetchHistory();
@@ -691,6 +875,7 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
         if (!adapter)
             return;
         adapterRef.current = adapter;
+        setAdapterReady(true);
         // Subscribe to protocol events
         unsubscribeRef.current = adapter.subscribe((event) => {
             switch (event.type) {
@@ -730,10 +915,35 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
                             const newMessage = createAssistantMessage(typeof contentStr === 'string' ? contentStr : '');
                             newMessage.id = event.message.id || newMessage.id;
                             currentAssistantMessageRef.current = newMessage;
-                            setDisplayItems(prev => [...prev, newMessage]);
-                            // Add message to store
+                            // Guard against duplicates: if an item with the same ID
+                            // already exists (e.g. continuation arriving after
+                            // handleSend's finally cleared currentAssistantMessageRef),
+                            // update it in place instead of appending a second copy.
+                            setDisplayItems(prev => {
+                                const existingIdx = prev.findIndex(item => !isToolCallMessage(item) && item.id === newMessage.id);
+                                if (existingIdx >= 0) {
+                                    const newItems = [...prev];
+                                    newItems[existingIdx] = {
+                                        ...newItems[existingIdx],
+                                        content: event.message?.content ?? '',
+                                    };
+                                    return newItems;
+                                }
+                                return [...prev, newMessage];
+                            });
+                            // Add message to store (only if truly new)
                             if (useStoreMode) {
-                                useChatStore.getState().addMessage(newMessage);
+                                const existingInStore = useChatStore
+                                    .getState()
+                                    .messages.find(m => m.id === newMessage.id);
+                                if (existingInStore) {
+                                    useChatStore.getState().updateMessage(newMessage.id, {
+                                        content: event.message?.content ?? '',
+                                    });
+                                }
+                                else {
+                                    useChatStore.getState().addMessage(newMessage);
+                                }
                             }
                         }
                     }
@@ -767,6 +977,7 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
                                 const toolHandler = frontendTool?.handler;
                                 if (toolHandler && Object.keys(args).length > 0) {
                                     // Execute frontend tool
+                                    pendingToolExecutionsRef.current++;
                                     (async () => {
                                         try {
                                             const result = await toolHandler(updatedToolCall.args);
@@ -803,6 +1014,14 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
                                                 ? errorToolCall
                                                 : item));
                                         }
+                                        finally {
+                                            pendingToolExecutionsRef.current--;
+                                            if (pendingToolExecutionsRef.current <= 0) {
+                                                pendingToolExecutionsRef.current = 0;
+                                                setIsLoading(false);
+                                                setIsStreaming(false);
+                                            }
+                                        }
                                     })();
                                 }
                             }
@@ -824,6 +1043,7 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
                             const frontendTool = frontendTools?.find(t => t.name === toolName);
                             const toolHandler = frontendTool?.handler;
                             if (toolHandler && Object.keys(args).length > 0) {
+                                pendingToolExecutionsRef.current++;
                                 (async () => {
                                     try {
                                         const result = await toolHandler(args);
@@ -860,6 +1080,14 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
                                             ? errorToolCall
                                             : item));
                                     }
+                                    finally {
+                                        pendingToolExecutionsRef.current--;
+                                        if (pendingToolExecutionsRef.current <= 0) {
+                                            pendingToolExecutionsRef.current = 0;
+                                            setIsLoading(false);
+                                            setIsStreaming(false);
+                                        }
+                                    }
                                 })();
                             }
                         }
@@ -987,21 +1215,25 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
             unsubscribeRef.current?.();
             adapterRef.current?.disconnect();
         };
-        // Note: frontendTools is accessed via ref-like closure, not as reactive dependency
+        // protocolKey (JSON-serialised) replaces the protocol object reference so
+        // that parent re-renders producing a new-but-identical protocol object
+        // don't tear down and re-create the adapter mid-request.
+        // frontendTools is accessed via ref-like closure, not as reactive dependency
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [protocol, renderToolResult, onStateUpdate, useStoreMode]);
+    }, [protocolKey, renderToolResult, onStateUpdate, useStoreMode]);
     // Auto-scroll to bottom
     useEffect(() => {
         messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
     }, [displayItems]);
-    // Handle sending message in protocol mode or custom mode
-    const handleSend = useCallback(async () => {
-        if (!input.trim() || isLoading)
+    // Handle sending message in protocol mode or custom mode.
+    // An optional messageOverride bypasses the input state (used by pendingPrompt).
+    const handleSend = useCallback(async (messageOverride) => {
+        const messageContent = (messageOverride ?? input).trim();
+        if (!messageContent || isLoading)
             return;
         // Need either an adapter (protocol mode) or onSendMessage handler (custom mode)
         if (!adapterRef.current && !onSendMessage)
             return;
-        const messageContent = input.trim();
         const userMessage = createUserMessage(messageContent);
         const currentMessages = displayItems.filter((item) => !isToolCallMessage(item));
         const allMessages = [...currentMessages, userMessage];
@@ -1052,9 +1284,9 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
                                 ? { ...item, content: fullResponse }
                                 : item));
                             if (useStoreMode) {
-                                useChatStore
-                                    .getState()
-                                    .updateMessage(assistantMessageId, { content: fullResponse });
+                                useChatStore.getState().updateMessage(assistantMessageId, {
+                                    content: fullResponse,
+                                });
                                 useChatStore.getState().stopStreaming();
                             }
                         },
@@ -1065,9 +1297,9 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
                                 ? { ...item, content: errorContent }
                                 : item));
                             if (useStoreMode) {
-                                useChatStore
-                                    .getState()
-                                    .updateMessage(assistantMessageId, { content: errorContent });
+                                useChatStore.getState().updateMessage(assistantMessageId, {
+                                    content: errorContent,
+                                });
                                 useChatStore.getState().stopStreaming();
                             }
                             setError(error);
@@ -1121,8 +1353,13 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
             }
         }
         finally {
-            setIsLoading(false);
-            setIsStreaming(false);
+            // Only clear loading state if no frontend tool executions are
+            // still in flight.  When tools are pending, sendToolResult will
+            // trigger a continuation that eventually clears isLoading.
+            if (pendingToolExecutionsRef.current <= 0) {
+                setIsLoading(false);
+                setIsStreaming(false);
+            }
             currentAssistantMessageRef.current = null;
             abortControllerRef.current = null;
         }
@@ -1138,6 +1375,19 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
         getEnabledMcpToolNames,
         getEnabledSkillIds,
     ]);
+    // Send the pending prompt once history is loaded and the
+    // adapter (or custom handler) is available.
+    useEffect(() => {
+        if (!pendingPrompt || pendingPromptSentRef.current)
+            return;
+        if (!historyLoaded)
+            return;
+        if (!adapterReady && !onSendMessage)
+            return;
+        pendingPromptSentRef.current = true;
+        // Use a microtask to ensure the adapter subscription is fully wired.
+        queueMicrotask(() => handleSend(pendingPrompt));
+    }, [pendingPrompt, historyLoaded, adapterReady, handleSend, onSendMessage]);
     // Handle stop
     const handleStop = useCallback(() => {
         // Abort custom mode request
@@ -1148,20 +1398,16 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
         if (useStoreMode) {
             useChatStore.getState().stopStreaming();
         }
+        // Reset pending tool counter so loading can clear
+        pendingToolExecutionsRef.current = 0;
         setIsLoading(false);
         setIsStreaming(false);
     }, [useStoreMode]);
-    // Handle key press
-    const handleKeyDown = useCallback((e) => {
-        if (e.key === 'Enter' && !e.shiftKey) {
-            e.preventDefault();
-            handleSend();
-        }
-    }, [handleSend]);
     // Handle new chat
     const handleNewChat = useCallback(() => {
         setDisplayItems([]);
         toolCallsRef.current.clear();
+        pendingToolExecutionsRef.current = 0;
         setInput('');
         threadIdRef.current = generateMessageId();
         if (useStoreMode) {
@@ -1190,6 +1436,24 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
             headerButtons?.onClear?.();
         }
     }, [clearStoreMessages, onClear, headerButtons, useStoreMode, runtimeId]);
+    // Handle sandbox interrupt
+    const handleSandboxInterrupt = useCallback(async () => {
+        if (!protocol?.configEndpoint)
+            return;
+        const interruptUrl = `${getApiBaseFromConfig(protocol.configEndpoint)}/configure/sandbox/interrupt`;
+        try {
+            const headers = { 'Content-Type': 'application/json' };
+            if (protocol.authToken) {
+                headers['Authorization'] = `Bearer ${protocol.authToken}`;
+            }
+            await fetch(interruptUrl, { method: 'POST', headers });
+            // Refetch status immediately so the icon updates
+            sandboxStatusQuery.refetch();
+        }
+        catch (e) {
+            // Interrupt is best-effort
+        }
+    }, [protocol?.configEndpoint, protocol?.authToken, sandboxStatusQuery]);
     // Not ready yet (store mode only)
     if (!ready) {
         return (_jsx(Box, { className: className, sx: {
@@ -1219,7 +1483,60 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
                     alignItems: 'center',
                     justifyContent: 'space-between',
                     p: padding,
-                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), title && (_jsx(Heading, { as: "h3", sx: { fontSize: 2, fontWeight: 'semibold' }, children: title })), headerContent] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [headerButtons?.showNewChat && (_jsx(IconButton, { icon: PlusIcon, "aria-label": "New chat", variant: "invisible", size: "small", onClick: handleNewChat })), headerButtons?.showClear && messages.length > 0 && (_jsx(IconButton, { icon: TrashIcon, "aria-label": "Clear messages", variant: "invisible", size: "small", onClick: handleClear })), headerButtons?.showSettings && (_jsx(IconButton, { icon: GearIcon, "aria-label": "Settings", variant: "invisible", size: "small", onClick: headerButtons.onSettings })), headerActions] })] }) }));
+                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), title && (_jsx(Heading, { as: "h3", sx: { fontSize: 2, fontWeight: 'semibold' }, children: title })), headerContent, showInformation && (_jsx(IconButton, { icon: InfoIcon, "aria-label": "Information", variant: "invisible", size: "small", onClick: onInformationClick }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [sandboxStatus?.available &&
+                                sandboxStatus?.sandbox_running &&
+                                (sandboxStatus.is_executing ? (_jsx(IconButton, { icon: SquareFillIcon, "aria-label": "Interrupt code execution", variant: "invisible", size: "small", sx: { color: 'danger.fg' }, onClick: handleSandboxInterrupt })) : (_jsx(Box, { sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        width: 28,
+                                        height: 28,
+                                        color: 'fg.subtle',
+                                    }, title: "Code sandbox ready", children: _jsx(CircleIcon, { size: 12 }) }))), headerButtons?.showNewChat && (_jsx(IconButton, { icon: PlusIcon, "aria-label": "New chat", variant: "invisible", size: "small", onClick: handleNewChat })), headerButtons?.showClear && messages.length > 0 && (_jsx(IconButton, { icon: TrashIcon, "aria-label": "Clear messages", variant: "invisible", size: "small", onClick: handleClear })), headerButtons?.showSettings && (_jsx(IconButton, { icon: GearIcon, "aria-label": "Settings", variant: "invisible", size: "small", onClick: headerButtons.onSettings })), chatViewMode && onChatViewModeChange && (_jsx(Box, { sx: {
+                                    display: 'inline-flex',
+                                    alignItems: 'center',
+                                    bg: 'neutral.muted',
+                                    borderRadius: '6px',
+                                    p: '2px',
+                                    gap: '1px',
+                                }, children: [
+                                    {
+                                        mode: 'floating',
+                                        icon: CommentDiscussionIcon,
+                                        label: 'Full-height popup',
+                                    },
+                                    {
+                                        mode: 'floating-small',
+                                        icon: DeviceMobileIcon,
+                                        label: 'Floating popup',
+                                    },
+                                    {
+                                        mode: 'sidebar',
+                                        icon: SidebarExpandIcon,
+                                        label: 'Sidebar panel',
+                                    },
+                                ].map(({ mode, icon: ModeIcon, label }) => (_jsx(Box, { as: "button", "aria-label": label, title: label, onClick: () => onChatViewModeChange(mode), sx: {
+                                        display: 'inline-flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        width: 26,
+                                        height: 24,
+                                        borderRadius: '4px',
+                                        border: 'none',
+                                        cursor: 'pointer',
+                                        bg: chatViewMode === mode
+                                            ? 'canvas.default'
+                                            : 'transparent',
+                                        boxShadow: chatViewMode === mode ? 'shadow.small' : 'none',
+                                        color: chatViewMode === mode ? 'fg.default' : 'fg.muted',
+                                        transition: 'all 0.15s ease',
+                                        '&:hover': {
+                                            color: 'fg.default',
+                                            bg: chatViewMode === mode
+                                                ? 'canvas.default'
+                                                : 'neutral.subtle',
+                                        },
+                                    }, children: _jsx(ModeIcon, { size: 14 }) }, mode))) })), headerActions] })] }) }));
     };
     // Render token usage bar between input and selectors
     const renderTokenUsage = () => {
@@ -1235,6 +1552,109 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
                 agentUsage.sessionUsage.outputTokens > 0);
         if (!hasContext)
             return null;
+        // Build pie chart data from distribution or fallback to fields
+        const usedTokens = agentUsage.totalTokens;
+        const windowTokens = agentUsage.contextWindow;
+        const freeTokens = Math.max(0, windowTokens - usedTokens);
+        const pct = windowTokens > 0 ? (usedTokens / windowTokens) * 100 : 0;
+        // Build category breakdown from distribution or individual fields
+        const categories = [];
+        if (agentUsage.distribution?.children?.length) {
+            const colorMap = {
+                'System Prompts': '#8250df',
+                'Tool Definitions': '#bf8700',
+                'User Messages': '#0969da',
+                'Assistant Messages': '#1a7f37',
+                'Tool Usage': '#cf222e',
+            };
+            for (const child of agentUsage.distribution.children) {
+                categories.push({
+                    name: child.name,
+                    value: child.value,
+                    color: colorMap[child.name] || '#6e7781',
+                });
+            }
+        }
+        else {
+            // Fallback: build from individual fields
+            if (agentUsage.systemPromptTokens > 0) {
+                categories.push({
+                    name: 'System Prompts',
+                    value: agentUsage.systemPromptTokens,
+                    color: '#8250df',
+                });
+            }
+            if (agentUsage.toolTokens > 0) {
+                categories.push({
+                    name: 'Tool Definitions',
+                    value: agentUsage.toolTokens,
+                    color: '#bf8700',
+                });
+            }
+            const messageTokens = (agentUsage.userMessageTokens || 0) +
+                (agentUsage.assistantMessageTokens || 0);
+            if (messageTokens > 0) {
+                categories.push({
+                    name: 'Messages',
+                    value: messageTokens,
+                    color: '#0969da',
+                });
+            }
+            const toolResultTokens = (agentUsage.toolCallTokens || 0) + (agentUsage.toolReturnTokens || 0);
+            if (toolResultTokens > 0) {
+                categories.push({
+                    name: 'Tool Results',
+                    value: toolResultTokens,
+                    color: '#cf222e',
+                });
+            }
+        }
+        // Tiny filled pie chart options
+        const pieColor = pct > 90 ? '#cf222e' : pct > 70 ? '#bf8700' : '#0969da';
+        const freeSliceColor = 'var(--bgColor-muted, #f6f8fa)';
+        const freeSliceOverlayColor = 'var(--borderColor-default, #d1d9e0)';
+        const miniPieOption = {
+            animation: false,
+            series: [
+                {
+                    type: 'pie',
+                    radius: [0, '90%'],
+                    center: ['50%', '50%'],
+                    silent: true,
+                    label: { show: false },
+                    labelLine: { show: false },
+                    data: [
+                        { value: usedTokens, itemStyle: { color: pieColor } },
+                        { value: freeTokens, itemStyle: { color: freeSliceColor } },
+                    ],
+                },
+            ],
+        };
+        // Overlay detail pie options (donut for category breakdown)
+        const overlayPieOption = {
+            animation: false,
+            series: [
+                {
+                    type: 'pie',
+                    radius: ['45%', '80%'],
+                    center: ['50%', '50%'],
+                    silent: true,
+                    label: { show: false },
+                    labelLine: { show: false },
+                    itemStyle: {
+                        borderColor: 'var(--bgColor-default, #ffffff)',
+                        borderWidth: 1,
+                    },
+                    data: [
+                        ...categories.map(c => ({
+                            value: c.value,
+                            itemStyle: { color: c.color },
+                        })),
+                        { value: freeTokens, itemStyle: { color: freeSliceOverlayColor } },
+                    ],
+                },
+            ],
+        };
         return (_jsxs(Box, { sx: {
                 display: 'flex',
                 alignItems: 'center',
@@ -1244,10 +1664,76 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
                 px: padding,
                 bg: 'canvas.subtle',
                 flexWrap: 'nowrap',
-                overflow: 'hidden',
+                overflow: 'visible',
                 whiteSpace: 'nowrap',
                 minWidth: 0,
-            }, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default', fontSize: 0 }, children: formatTokenCount(agentUsage.totalTokens) }), ' / ', formatTokenCount(agentUsage.contextWindow), ' ctx'] }), hasSession && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: ['· ', formatTokenCount(agentUsage.sessionUsage.inputTokens), _jsx(Text, { as: "span", sx: { color: 'success.fg', fontSize: 0 }, children: '▲' }), ' ', formatTokenCount(agentUsage.sessionUsage.outputTokens), _jsx(Text, { as: "span", sx: { color: 'attention.fg', fontSize: 0 }, children: '▼' })] })), hasTurn && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: ['· turn ', formatTokenCount(agentUsage.turnUsage.inputTokens), _jsx(Text, { as: "span", sx: { color: 'success.fg', fontSize: 0 }, children: '▲' }), ' ', formatTokenCount(agentUsage.turnUsage.outputTokens), _jsx(Text, { as: "span", sx: { color: 'attention.fg', fontSize: 0 }, children: '▼' })] }))] }));
+            }, children: [_jsxs(Box, { sx: { position: 'relative', flexShrink: 0 }, onMouseEnter: () => {
+                        if (hoverTimeoutRef.current)
+                            clearTimeout(hoverTimeoutRef.current);
+                        hoverTimeoutRef.current = setTimeout(() => setContextOverlayOpen(true), 150);
+                    }, onMouseLeave: () => {
+                        if (hoverTimeoutRef.current)
+                            clearTimeout(hoverTimeoutRef.current);
+                        hoverTimeoutRef.current = setTimeout(() => setContextOverlayOpen(false), 250);
+                    }, children: [_jsx(Box, { ref: contextAnchorRef, sx: {
+                                cursor: 'pointer',
+                                width: 20,
+                                height: 20,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                                borderRadius: '50%',
+                            }, children: _jsx(ReactECharts, { option: miniPieOption, style: { width: 18, height: 18 }, opts: { renderer: 'svg' } }) }), contextOverlayOpen && (_jsxs(Box, { sx: {
+                                position: 'absolute',
+                                bottom: '100%',
+                                left: 0,
+                                mb: 1,
+                                p: 3,
+                                width: 260,
+                                bg: 'canvas.overlay',
+                                borderRadius: 2,
+                                boxShadow: 'shadow.large',
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                                zIndex: 100,
+                            }, children: [_jsx(Text, { sx: {
+                                        fontWeight: 'bold',
+                                        fontSize: 1,
+                                        color: 'fg.default',
+                                        display: 'block',
+                                        mb: 2,
+                                    }, children: "Context Window" }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 1 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default' }, children: formatTokenCount(usedTokens) }), ' / ', formatTokenCount(windowTokens), ' tokens'] }), _jsxs(Text, { sx: {
+                                        fontSize: 0,
+                                        color: pct > 90
+                                            ? 'danger.fg'
+                                            : pct > 70
+                                                ? 'attention.fg'
+                                                : 'fg.muted',
+                                        fontWeight: 'semibold',
+                                        display: 'block',
+                                        mb: 2,
+                                    }, children: ['• ', pct.toFixed(0), "%"] }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'center', mb: 2 }, children: _jsx(ReactECharts, { option: overlayPieOption, style: { width: 80, height: 80 }, opts: { renderer: 'svg' } }) }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: categories.map(cat => {
+                                        const catPct = usedTokens > 0 ? (cat.value / usedTokens) * 100 : 0;
+                                        return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { sx: {
+                                                        width: 8,
+                                                        height: 8,
+                                                        borderRadius: '50%',
+                                                        bg: cat.color,
+                                                        flexShrink: 0,
+                                                    } }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', flex: 1 }, children: cat.name }), _jsxs(Text, { sx: {
+                                                        fontSize: 0,
+                                                        color: 'fg.default',
+                                                        fontWeight: 'semibold',
+                                                    }, children: [catPct.toFixed(1), "%"] })] }, cat.name));
+                                    }) }), pct > 70 && (_jsx(Text, { sx: {
+                                        fontSize: 0,
+                                        color: 'attention.fg',
+                                        display: 'block',
+                                        mt: 2,
+                                        fontStyle: 'italic',
+                                    }, children: "Quality may decline as limit nears." }))] }))] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold', color: 'fg.default', fontSize: 0 }, children: formatTokenCount(agentUsage.totalTokens) }), ' / ', formatTokenCount(agentUsage.contextWindow), ' ctx'] }), hasSession && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: ['· ', formatTokenCount(agentUsage.sessionUsage.inputTokens), _jsx(Text, { as: "span", sx: { color: 'success.fg', fontSize: 0 }, children: '▲' }), ' ', formatTokenCount(agentUsage.sessionUsage.outputTokens), _jsx(Text, { as: "span", sx: { color: 'attention.fg', fontSize: 0 }, children: '▼' })] })), hasTurn && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: ['· turn ', formatTokenCount(agentUsage.turnUsage.inputTokens), _jsx(Text, { as: "span", sx: { color: 'success.fg', fontSize: 0 }, children: '▲' }), ' ', formatTokenCount(agentUsage.turnUsage.outputTokens), _jsx(Text, { as: "span", sx: { color: 'attention.fg', fontSize: 0 }, children: '▼' })] }))] }));
     };
     // Render empty state
     const renderEmptyState = () => {
@@ -1516,88 +2002,12 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
                                             ? 'accent.emphasis'
                                             : 'canvas.subtle',
                                         color: isUser ? 'fg.onEmphasis' : 'fg.default',
-                                        // Streamdown code block styling
-                                        // Code block container
-                                        '& [data-streamdown="code-block"]': {
-                                            borderRadius: '8px',
-                                            border: '1px solid',
-                                            borderColor: 'border.default',
-                                            overflow: 'hidden',
-                                            my: 2,
-                                        },
-                                        // Code block header with language label and buttons
-                                        '& [data-streamdown="code-block-header"]': {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'space-between',
-                                            backgroundColor: 'canvas.subtle',
-                                            padding: '8px 12px',
-                                            fontSize: '12px',
-                                            color: 'fg.muted',
-                                        },
-                                        // Style the buttons in the header
-                                        '& [data-streamdown="code-block-header"] button': {
-                                            background: 'none',
-                                            border: 'none',
-                                            cursor: 'pointer',
-                                            padding: '4px',
-                                            color: 'fg.muted',
-                                            borderRadius: '4px',
-                                            '&:hover': {
-                                                backgroundColor: 'neutral.muted',
-                                                color: 'fg.default',
-                                            },
-                                        },
-                                        // Code block body
-                                        '& [data-streamdown="code-block-body"]': {
-                                            backgroundColor: 'canvas.subtle',
-                                            padding: '12px',
-                                            margin: 0,
-                                            overflow: 'auto',
-                                            fontSize: '13px',
-                                            lineHeight: 1.5,
-                                        },
-                                        // Make each line display as a block for line breaks
-                                        '& [data-streamdown="code-block-body"] code': {
-                                            display: 'block',
-                                            fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
-                                        },
-                                        '& [data-streamdown="code-block-body"] code > span.block': {
-                                            display: 'block',
-                                        },
-                                        '& [data-streamdown="code-block-body"] code > span': {
-                                            display: 'block',
-                                        },
-                                        // General pre/code styling fallback
-                                        '& pre': {
-                                            whiteSpace: 'pre-wrap',
-                                            wordBreak: 'break-word',
-                                            overflowX: 'auto',
-                                            margin: 0,
-                                        },
-                                        '& pre code': {
-                                            whiteSpace: 'pre-wrap',
-                                        },
-                                        '& code': {
-                                            fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace',
-                                        },
+                                        ...streamdownCodeBlockStyles,
                                     }, children: isUser ? (_jsx(Text, { sx: {
                                             fontSize: 1,
                                             whiteSpace: 'pre-wrap',
                                             wordBreak: 'break-word',
-                                        }, children: getMessageText(message) })) : (_jsx(Box, { sx: {
-                                            fontSize: 1,
-                                            lineHeight: 1.5,
-                                            '& ul, & ol': {
-                                                marginTop: '0.5em',
-                                                marginBottom: '0.5em',
-                                                paddingInlineStart: '1.25em',
-                                                listStylePosition: 'inside',
-                                            },
-                                            '& li': {
-                                                paddingInlineStart: '0.25em',
-                                            },
-                                        }, children: _jsx(Streamdown, { children: getMessageText(message) || (isStreaming ? '...' : '') }) })) })] }) }, message.id));
+                                        }, children: getMessageText(message) })) : (_jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: getMessageText(message) || (isStreaming ? '...' : '') }) })) })] }) }, message.id));
                 }), showLoadingIndicator && (isLoading || isStreaming) && (_jsx(Box, { sx: {
                         display: 'flex',
                         alignItems: 'flex-start',
@@ -1677,26 +2087,11 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
                                             },
                                         } })] })] }) })), _jsx("div", { ref: messagesEndRef })] }));
     };
-    // Render protocol mode input
-    const renderProtocolInput = () => {
+    // Render input prompt
+    const renderInputPrompt = () => {
         const availableTools = configQuery.data?.builtinTools || [];
         const models = availableModels || configQuery.data?.models || [];
-        return (_jsxs(Box, { children: [_jsx(Box, { sx: {
-                        p: padding,
-                        borderTop: '1px solid',
-                        borderColor: 'border.default',
-                        bg: 'canvas.subtle',
-                    }, children: _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'flex-end' }, children: [_jsx(Textarea, { ref: inputRef, value: input, onChange: e => {
-                                    setInput(e.target.value);
-                                    // Height adjustment happens via useEffect watching input
-                                }, onKeyDown: handleKeyDown, placeholder: placeholder || 'Type a message...', disabled: isLoading, sx: {
-                                    flex: 1,
-                                    resize: 'none',
-                                    minHeight: '40px',
-                                    maxHeight: '120px',
-                                    overflow: 'hidden',
-                                    transition: 'height 0.1s ease-out',
-                                }, rows: 1 }), isLoading ? (_jsx(IconButton, { icon: SquareCircleIcon, "aria-label": "Stop", onClick: handleStop, sx: { alignSelf: 'flex-end' } })) : (_jsx(IconButton, { icon: PaperAirplaneIcon, "aria-label": "Send", onClick: handleSend, disabled: !input.trim(), sx: { alignSelf: 'flex-end' } }))] }) }), renderTokenUsage(), (showModelSelector || showToolsMenu || showSkillsMenu) &&
+        return (_jsxs(Box, { children: [_jsx(InputPrompt, { placeholder: placeholder || 'Type a message...', isLoading: isLoading, onSend: () => handleSend(), onStop: handleStop, autoFocus: autoFocus, focusTrigger: focusTrigger, padding: padding, value: input, onChange: setInput }), renderTokenUsage(), (showModelSelector || showToolsMenu || showSkillsMenu) &&
                     (configQuery.data || skillsQuery.data) && (_jsxs(Box, { sx: {
                         display: 'flex',
                         gap: 2,
@@ -1840,6 +2235,6 @@ runtimeId, historyEndpoint, historyAuthToken, }) {
                         flexDirection: 'column',
                         minHeight: '100%',
                         bg: 'canvas.default',
-                    }, children: renderProtocolMessages() })) }), footerContent, showInput && renderProtocolInput(), showPoweredBy && _jsx(PoweredByTag, { ...poweredByProps })] }));
+                    }, children: renderProtocolMessages() })) }), footerContent, showInput && renderInputPrompt(), showPoweredBy && _jsx(PoweredByTag, { ...poweredByProps })] }));
 }
 export default ChatBase;