@datalayer/agent-runtimes 0.0.10 → 0.0.12

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

@@ -19,7 +19,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { IconButton, Text, Tooltip } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { XIcon, CommentDiscussionIcon, SidebarExpandIcon, SidebarCollapseIcon, } from '@primer/octicons-react';
+import { XIcon, CommentDiscussionIcon } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
 import { ChatBase, } from './base/ChatBase';
 import { useChatOpen, useChatMessages, useChatStore } from '../store/chatStore';
@@ -43,7 +43,7 @@ function useIsMobile(breakpoint = 640) {
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', showPanelBackdrop = false, availableModels, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, showTokenUsage = true, runtimeId, historyEndpoint, historyAuthToken, panelProps, }) {
+export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode = true, title = 'Chat', description = 'Start a conversation with the AI agent.', position = 'bottom-right', defaultOpen = false, width = 400, height = 550, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick = true, hideMessagesAfterToolUI = false, defaultViewMode = 'floating', onViewModeChange, showPanelBackdrop = false, availableModels, showModelSelector = false, showToolsMenu = false, showSkillsMenu = false, showTokenUsage = true, runtimeId, historyEndpoint, historyAuthToken, pendingPrompt, showInformation = false, onInformationClick, panelProps, }) {
     // Store-based state
     const storeIsOpen = useChatOpen();
     const storeMessages = useChatMessages();
@@ -61,6 +61,22 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
     const [isHovered, setIsHovered] = useState(false);
     const [viewMode, setViewMode] = useState(defaultViewMode);
     const [focusTrigger, setFocusTrigger] = useState(0);
+    // Map internal viewMode to ChatViewMode for the header toggle
+    const chatViewMode = viewMode === 'panel' ? 'sidebar' : viewMode;
+    // Handle view mode changes from the header segmented toggle
+    const handleChatViewModeChange = useCallback((mode) => {
+        if (mode === 'sidebar') {
+            // 'sidebar' means the parent should switch to a ChatSidebar layout.
+            // Notify parent and let it handle the transition.
+            onViewModeChange?.(mode);
+        }
+        else {
+            // 'floating' or 'floating-small' stays within ChatFloating
+            setViewMode(mode);
+            setFocusTrigger(prev => prev + 1);
+            onViewModeChange?.(mode);
+        }
+    }, [onViewModeChange]);
     // Build protocol config from endpoint if not provided directly
     // Memoize to avoid creating new object on every render (which would trigger useEffect re-runs)
     const protocol = useMemo(() => {
@@ -258,13 +274,6 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
             borderRadius: 0,
         }
         : {};
-    // Toggle view mode handler
-    const handleToggleViewMode = useCallback(() => {
-        setViewMode(prev => (prev === 'floating' ? 'panel' : 'floating'));
-        setFocusTrigger(prev => prev + 1);
-    }, []);
-    // View mode toggle button
-    const viewModeToggle = !isMobile && (_jsx(Tooltip, { text: viewMode === 'floating' ? 'Expand to panel' : 'Collapse to popup', direction: "s", children: _jsx(IconButton, { icon: viewMode === 'floating' ? SidebarExpandIcon : SidebarCollapseIcon, "aria-label": viewMode === 'floating' ? 'Expand to panel' : 'Collapse to popup', onClick: handleToggleViewMode, variant: "invisible", size: "small" }) }));
     // Close button for header
     const closeButton = (_jsx(Tooltip, { text: `Close${escapeToClose ? ' (Esc)' : ''}`, direction: "s", children: _jsx(IconButton, { icon: XIcon, "aria-label": "Close", onClick: handleToggle, variant: "invisible", size: "small" }) }));
     return (_jsxs(_Fragment, { children: [showButton && !isOpen && (_jsx(Box, { sx: {
@@ -344,7 +353,19 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                     zIndex: 1000,
                 }, onClick: handleToggle })), _jsx(Box, { ref: popupRef, className: className, sx: {
                     position: 'fixed',
-                    ...(viewMode === 'floating' && !isMobile ? getPositionStyles() : {}),
+                    // floating (normal) — full-height column pinned to the right edge
+                    ...(viewMode === 'floating' && !isMobile
+                        ? {
+                            top: 0,
+                            right: 0,
+                            bottom: 0,
+                            left: 'auto',
+                        }
+                        : {}),
+                    // floating-small — standard popup positioned via getPositionStyles()
+                    ...(viewMode === 'floating-small' && !isMobile
+                        ? getPositionStyles()
+                        : {}),
                     ...(viewMode === 'panel' && !isMobile
                         ? {
                             top: 0,
@@ -355,18 +376,30 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                         : {}),
                     width: viewMode === 'panel' && !isMobile
                         ? '420px'
-                        : isMobile
-                            ? '100%'
-                            : typeof popupWidth === 'number'
+                        : viewMode === 'floating' && !isMobile
+                            ? typeof popupWidth === 'number'
                                 ? `${popupWidth}px`
-                                : popupWidth,
-                    height: viewMode === 'panel' && !isMobile
+                                : popupWidth
+                            : viewMode === 'floating-small' && !isMobile
+                                ? typeof popupWidth === 'number'
+                                    ? `${popupWidth}px`
+                                    : popupWidth
+                                : isMobile
+                                    ? '100%'
+                                    : typeof popupWidth === 'number'
+                                        ? `${popupWidth}px`
+                                        : popupWidth,
+                    height: (viewMode === 'panel' || viewMode === 'floating') && !isMobile
                         ? 'auto'
-                        : isMobile
-                            ? '100%'
-                            : typeof popupHeight === 'number'
+                        : viewMode === 'floating-small' && !isMobile
+                            ? typeof popupHeight === 'number'
                                 ? `${popupHeight}px`
-                                : popupHeight,
+                                : popupHeight
+                            : isMobile
+                                ? '100%'
+                                : typeof popupHeight === 'number'
+                                    ? `${popupHeight}px`
+                                    : popupHeight,
                     display: 'flex',
                     flexDirection: 'column',
                     bg: 'canvas.default',
@@ -394,12 +427,12 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                         onNewChat: handleNewChat,
                         onClear: handleClear,
                         onSettings: onSettingsClick,
-                    }, headerActions: _jsxs(_Fragment, { children: [viewModeToggle, closeButton] }), showPoweredBy: showPoweredBy, poweredByProps: {
+                    }, headerActions: _jsx(_Fragment, { children: closeButton }), chatViewMode: chatViewMode, onChatViewModeChange: handleChatViewModeChange, showPoweredBy: showPoweredBy, poweredByProps: {
                         brandName: 'Datalayer',
                         brandUrl: 'https://datalayer.ai',
                         ...poweredByProps,
                     }, renderToolResult: renderToolResult, description: description, onStateUpdate: onStateUpdate, onNewChat: onNewChat, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, hideMessagesAfterToolUI: hideMessagesAfterToolUI, avatarConfig: {
                         showAvatars: true,
-                    }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: _tools, showModelSelector: showModelSelector, availableModels: availableModels, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, runtimeId: runtimeId, historyEndpoint: historyEndpoint, historyAuthToken: historyAuthToken, ...panelProps, children: children }) })] }));
+                    }, placeholder: "Type a message...", backgroundColor: "canvas.subtle", frontendTools: frontendTools, showModelSelector: showModelSelector, availableModels: availableModels, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, runtimeId: runtimeId, historyEndpoint: historyEndpoint, historyAuthToken: historyAuthToken, pendingPrompt: pendingPrompt, showInformation: showInformation, onInformationClick: onInformationClick, ...panelProps, children: children }) })] }));
 }
 export default ChatFloating;

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

@@ -34,9 +34,13 @@ export interface ChatInlineProps {
     onSaveSelection?: () => void;
     /** Callback to restore selection after input blur */
     onRestoreSelection?: () => void;
+    /** A pending prompt to submit automatically (from toolbar dropdown action) */
+    pendingPrompt?: string | null;
+    /** Callback after the pending prompt has been consumed */
+    onPendingPromptConsumed?: () => void;
 }
 /**
  * ChatInline - Inline AI chat component for text selection assistance.
  */
-export declare function ChatInline({ selectedText, protocol, onReplaceSelection, onInsertInline, onInsertBelow, onClose, onSaveSelection, onRestoreSelection, }: ChatInlineProps): JSX.Element;
+export declare function ChatInline({ selectedText, protocol, onReplaceSelection, onInsertInline, onInsertBelow, onClose, onSaveSelection, onRestoreSelection, pendingPrompt, onPendingPromptConsumed, }: ChatInlineProps): JSX.Element;
 export default ChatInline;

package/lib/components/chat/components/ChatInline.js

@@ -91,7 +91,7 @@ const AI_OPTIONS_GROUPS = [
 /**
  * ChatInline - Inline AI chat component for text selection assistance.
  */
-export function ChatInline({ selectedText, protocol, onReplaceSelection, onInsertInline, onInsertBelow, onClose, onSaveSelection, onRestoreSelection, }) {
+export function ChatInline({ selectedText, protocol, onReplaceSelection, onInsertInline, onInsertBelow, onClose, onSaveSelection, onRestoreSelection, pendingPrompt, onPendingPromptConsumed, }) {
     // Input state
     const [input, setInput] = useState('');
     // AI state
@@ -195,6 +195,13 @@ ${selectedText || ''}
             setAiState('initial');
         }
     }, [selectedText]);
+    // Handle pending prompt from toolbar dropdown
+    useEffect(() => {
+        if (pendingPrompt && aiState === 'initial') {
+            submitPrompt(pendingPrompt);
+            onPendingPromptConsumed?.();
+        }
+    }, [pendingPrompt, aiState, submitPrompt, onPendingPromptConsumed]);
     // Handle form submission
     const handleSubmit = useCallback((e) => {
         e.preventDefault();

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

@@ -68,11 +68,16 @@ export interface ChatSidebarProps {
     placeholder?: string;
     /** Description shown in empty state */
     description?: string;
+    /**
+     * A prompt to append and send after the conversation history is loaded.
+     * The message is shown in the chat and sent to the agent exactly once.
+     */
+    pendingPrompt?: string;
     /** Additional ChatBase props */
     panelProps?: Partial<ChatBaseProps>;
 }
 /**
  * Chat Sidebar component
  */
-export declare function ChatSidebar({ title, defaultOpen, position, width, showHeader, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, onSendMessage, enableStreaming, placeholder, description, panelProps, }: ChatSidebarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatSidebar({ title, defaultOpen, position, width, showHeader, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, onSendMessage, enableStreaming, placeholder, description, pendingPrompt, panelProps, }: ChatSidebarProps): import("react/jsx-runtime").JSX.Element;
 export default ChatSidebar;

package/lib/components/chat/components/ChatSidebar.js

@@ -37,7 +37,7 @@ function useIsMobile(breakpoint = 640) {
 /**
  * Chat Sidebar component
  */
-export function ChatSidebar({ title = 'Chat', defaultOpen = true, position = 'right', width = 400, showHeader = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = 'k', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, onSendMessage, enableStreaming = true, placeholder = 'Ask a question...', description, panelProps, }) {
+export function ChatSidebar({ title = 'Chat', defaultOpen = true, position = 'right', width = 400, showHeader = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = 'k', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, onSendMessage, enableStreaming = true, placeholder = 'Ask a question...', description, pendingPrompt, panelProps, }) {
     const isOpen = useChatOpen();
     const messages = useChatMessages();
     const setOpen = useChatStore(state => state.setOpen);
@@ -219,6 +219,6 @@ export function ChatSidebar({ title = 'Chat', defaultOpen = true, position = 'ri
                         ...poweredByProps,
                     }, avatarConfig: {
                         showAvatars: true,
-                    }, placeholder: placeholder, description: description, onSendMessage: onSendMessage, enableStreaming: enableStreaming, ...panelProps, children: children }) })] }));
+                    }, placeholder: placeholder, description: description, onSendMessage: onSendMessage, enableStreaming: enableStreaming, pendingPrompt: pendingPrompt, ...panelProps, children: children }) })] }));
 }
 export default ChatSidebar;

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

@@ -94,6 +94,11 @@ export interface ChatStandaloneProps {
      * When provided, tool calls will be rendered inline in the chat.
      */
     renderToolResult?: RenderToolResult;
+    /**
+     * A prompt to append and send after the conversation history is loaded.
+     * The message is shown in the chat and sent to the agent exactly once.
+     */
+    pendingPrompt?: string;
     /** Additional ChatBase props */
     panelProps?: Partial<ChatBaseProps>;
 }
@@ -101,5 +106,5 @@ export interface ChatStandaloneProps {
  * ChatStandalone component
  * A floating popup chat that uses ChatBase with custom onSendMessage handler
  */
-export declare function ChatStandalone({ onSendMessage, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, placeholder, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, enableStreaming, emptyStateMessage, renderToolResult, panelProps, }: ChatStandaloneProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatStandalone({ onSendMessage, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, placeholder, onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, enableStreaming, emptyStateMessage, renderToolResult, pendingPrompt, panelProps, }: ChatStandaloneProps): import("react/jsx-runtime").JSX.Element;
 export default ChatStandalone;

package/lib/components/chat/components/ChatStandalone.js

@@ -41,7 +41,7 @@ function useIsMobile(breakpoint = 640) {
  * ChatStandalone component
  * A floating popup chat that uses ChatBase with custom onSendMessage handler
  */
-export function ChatStandalone({ onSendMessage, title = 'Chat', description = 'Start a conversation.', position = 'bottom-right', defaultOpen = false, width = 380, height = 520, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, placeholder = 'Type a message...', onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, enableStreaming = true, emptyStateMessage = 'Start a conversation', renderToolResult, panelProps, }) {
+export function ChatStandalone({ onSendMessage, title = 'Chat', description = 'Start a conversation.', position = 'bottom-right', defaultOpen = false, width = 380, height = 520, showHeader = true, showButton = true, showNewChatButton = true, showClearButton = true, showSettingsButton = false, enableKeyboardShortcuts = true, toggleShortcut = '/', showPoweredBy = true, poweredByProps, clickOutsideToClose = true, escapeToClose = true, className, placeholder = 'Type a message...', onSettingsClick, onNewChat, onOpen, onClose, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor = '#7c3aed', offset = 20, animationDuration = 200, enableStreaming = true, emptyStateMessage = 'Start a conversation', renderToolResult, pendingPrompt, panelProps, }) {
     // Use Zustand store for state management
     const isOpen = useChatOpen();
     const messages = useChatMessages();
@@ -310,7 +310,7 @@ export function ChatStandalone({ onSendMessage, title = 'Chat', description = 'S
                             title: emptyStateMessage,
                         }, avatarConfig: {
                             showAvatars: true,
-                        }, backgroundColor: "canvas.subtle", focusTrigger: focusTrigger, ...panelProps, children: children }), showPoweredBy && (_jsx(Box, { sx: {
+                        }, backgroundColor: "canvas.subtle", focusTrigger: focusTrigger, pendingPrompt: pendingPrompt, ...panelProps, children: children }), showPoweredBy && (_jsx(Box, { sx: {
                             p: 2,
                             borderTop: '1px solid',
                             borderColor: 'border.default',

package/lib/components/chat/components/ContextDistribution.js

@@ -67,7 +67,7 @@ export function ContextDistribution({ agentId, height = '250px', }) {
                 borderColor: 'border.default',
             }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load context distribution" }) }));
     }
-    const { distribution, totalTokens, contextWindow } = snapshotData;
+    const { distribution, totalTokens } = snapshotData;
     const hasData = distribution.children && distribution.children.length > 0;
     // ECharts option for treemap
     const chartOption = {
@@ -121,7 +121,7 @@ export function ContextDistribution({ agentId, height = '250px', }) {
                     justifyContent: 'space-between',
                     alignItems: 'center',
                     mb: 2,
-                }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: ["Current Context (", formatTokens(totalTokens), " /", ' ', formatTokens(contextWindow), " tokens)"] }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowDetails(!showDetails), leadingVisual: ListUnorderedIcon, children: showDetails ? 'Hide Details' : 'Show Details' })] }), hasData ? (_jsx(ReactECharts, { option: chartOption, style: { height }, opts: { renderer: 'svg' } })) : (_jsx(Box, { sx: {
+                }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: ["Current Context (", formatTokens(totalTokens), " total)"] }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowDetails(!showDetails), leadingVisual: ListUnorderedIcon, children: showDetails ? 'Hide Details' : 'Show Details' })] }), hasData ? (_jsx(ReactECharts, { option: chartOption, style: { height }, opts: { renderer: 'svg' } })) : (_jsx(Box, { sx: {
                     p: 4,
                     bg: 'canvas.subtle',
                     borderRadius: 2,

package/lib/components/chat/components/ContextInspector.js

@@ -194,9 +194,11 @@ export function ContextInspector({ agentId, apiBase }) {
             }, children: _jsx(Text, { sx: { color: 'attention.fg' }, children: contextData.error }) }));
     }
     const { tokenSummary, modelConfiguration } = contextData;
-    return (_jsxs(Box, { children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between', mb: 1 }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: ["Context Usage: ", formatTokens(tokenSummary.total), " /", ' ', formatTokens(tokenSummary.contextWindow)] }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: [tokenSummary.usagePercent.toFixed(1), "%"] })] }), _jsx(ProgressBar, { progress: tokenSummary.usagePercent, sx: { height: 8 }, bg: tokenSummary.usagePercent > 80
+    return (_jsxs(Box, { children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: ["Total usage: ", formatTokens(tokenSummary.total), " /", ' ', formatTokens(tokenSummary.contextWindow), " (", Math.round(tokenSummary.usagePercent), "%)"] }), _jsx(ProgressBar, { progress: Math.min(tokenSummary.usagePercent, 100), sx: { mt: 2, height: 8 }, bg: tokenSummary.usagePercent > 90
                             ? 'danger.emphasis'
-                            : 'accent.emphasis' }), _jsxs(Box, { sx: {
+                            : tokenSummary.usagePercent > 70
+                                ? 'attention.emphasis'
+                                : 'success.emphasis' }), _jsxs(Box, { sx: {
                             display: 'flex',
                             gap: 3,
                             mt: 2,

package/lib/components/chat/components/ContextPanel.js

@@ -270,7 +270,6 @@ export function ContextPanel({ agentId, apiBase, messageCount = 0, defaultView =
                     }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load context details. Make sure the agent is running." }) })] }));
     }
     const { totalTokens, contextWindow, sessionUsage, turnUsage, distribution } = snapshotData;
-    const contextUsagePercent = (totalTokens / contextWindow) * 100;
     const hasDistributionData = distribution?.children && distribution.children.length > 0;
     const hasHistoryData = snapshotData.perRequestUsage && snapshotData.perRequestUsage.length > 0;
     return (_jsxs(Box, { children: [_jsxs(Box, { sx: {
@@ -288,11 +287,7 @@ export function ContextPanel({ agentId, apiBase, messageCount = 0, defaultView =
                     borderRadius: 2,
                     border: '1px solid',
                     borderColor: 'border.default',
-                }, children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                    mb: 1,
-                                }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: [formatTokens(totalTokens), " / ", formatTokens(contextWindow), " tokens"] }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: [contextUsagePercent.toFixed(1), "%"] })] }), _jsx(ProgressBar, { progress: Math.min(contextUsagePercent, 100), sx: { height: 8 }, bg: contextUsagePercent > 80 ? 'danger.emphasis' : 'accent.emphasis' })] }), (sessionUsage || turnUsage) && (_jsxs(Box, { sx: {
+                }, children: [_jsx(Box, { sx: { mb: 3 }, children: _jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: ["Total usage: ", formatTokens(totalTokens)] }) }), (sessionUsage || turnUsage) && (_jsxs(Box, { sx: {
                             display: 'flex',
                             gap: 3,
                             mb: 3,

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

@@ -4,8 +4,14 @@ import type { ChatMessage } from '../../types/message';
 import type { TransportType } from '../../types/protocol';
 import type { McpServerSelection } from '../../types/inference';
 import type { FrontendToolDefinition } from '../../types/tool';
-import type { BuiltinTool as BuiltinToolType } from '../../../../types';
-import type { MCPServerConfig as MCPServerConfigType } from '../../../AgentConfiguration';
+import type { BuiltinTool as BuiltinToolType } from '../../../../types/Types';
+/**
+ * View mode for the chat component.
+ * - 'floating': Full-height floating panel (pinned to the right edge with offset)
+ * - 'floating-small': Standard floating popup
+ * - 'sidebar': Docked sidebar panel
+ */
+export type ChatViewMode = 'floating' | 'floating-small' | 'sidebar';
 /**
  * Tool call status for tool rendering
  */
@@ -145,15 +151,27 @@ export interface MCPServerTool {
 /**
  * MCP Server configuration from backend
  */
-/**
- * MCP Server configuration (re-exported from AgentConfiguration)
- */
-export type MCPServerConfig = MCPServerConfigType;
+export interface MCPServerConfig {
+    id: string;
+    name: string;
+    description?: string;
+    url?: string;
+    enabled: boolean;
+    tools: MCPServerTool[];
+    command?: string;
+    args?: string[];
+    requiredEnvVars?: string[];
+    isAvailable?: boolean;
+    transport?: string;
+    isConfig?: boolean;
+    isRunning?: boolean;
+}
 /**
  * Remote configuration from server
  */
 export interface RemoteConfig {
     models: ModelConfig[];
+    defaultModel?: string;
     builtinTools: BuiltinTool[];
     mcpServers?: MCPServerConfig[];
 }
@@ -237,6 +255,16 @@ export interface ChatBaseProps {
     loadingState?: React.ReactNode;
     /** Header actions */
     headerActions?: React.ReactNode;
+    /**
+     * Current chat view mode.
+     * When provided, a segmented view-mode toggle is rendered in the header
+     * with icons for each mode: floating (popup), floating-small (compact), sidebar (docked).
+     */
+    chatViewMode?: ChatViewMode;
+    /**
+     * Callback when the user clicks a different view mode in the header toggle.
+     */
+    onChatViewModeChange?: (mode: ChatViewMode) => void;
     /**
      * Use Zustand store for state management.
      * When true, uses the shared store. When false with protocol, uses protocol mode.
@@ -293,6 +321,14 @@ export interface ChatBaseProps {
     renderToolResult?: RenderToolResult;
     /** Custom footer content (rendered above input) */
     footerContent?: ReactNode;
+    /**
+     * Show the information icon in the header.
+     * When clicked, fires onInformationClick.
+     * @default false
+     */
+    showInformation?: boolean;
+    /** Callback when the information icon is clicked */
+    onInformationClick?: () => void;
     /** Custom header content (rendered below title row) */
     headerContent?: ReactNode;
     /** Children to render in the messages area (for custom content) */
@@ -398,7 +434,7 @@ export interface ChatBaseProps {
      * Endpoint URL for fetching conversation history.
      * When runtimeId is provided, this endpoint is called to fetch
      * the conversation history on mount.
-     * If not provided, defaults to `{protocol.endpoint}/history`.
+     * If not provided, defaults to `{protocol.endpoint}/api/v1/history`.
      */
     historyEndpoint?: string;
     /**
@@ -406,10 +442,15 @@ export interface ChatBaseProps {
      * If not provided, uses the protocol's authToken.
      */
     historyAuthToken?: string;
+    /**
+     * A prompt to append and send after the conversation history is loaded.
+     * The message is shown in the chat and sent to the agent exactly once.
+     */
+    pendingPrompt?: string;
 }
 /**
  * ChatBase component - Universal chat panel supporting store, protocol, and custom modes
  */
-export declare function ChatBase({ title, showHeader, showTokenUsage, showLoadingIndicator, showErrors, showInput, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, initialModel, availableModels, mcpServers, initialSkills, className, loadingState, headerActions, useStore: useStoreMode, protocol: protocolProp, agentRuntimeConfig, onSendMessage, enableStreaming, brandIcon, avatarConfig, headerButtons, showPoweredBy, poweredByProps, emptyState, renderToolResult, footerContent, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact, placeholder, description, onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, focusTrigger, frontendTools, onAuthorizationRequired, connectedIdentities, runtimeId, historyEndpoint, historyAuthToken, }: ChatBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatBase({ title, showHeader, showTokenUsage, showLoadingIndicator, showErrors, showInput, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, initialModel, availableModels, mcpServers, initialSkills, className, loadingState, headerActions, chatViewMode, onChatViewModeChange, useStore: useStoreMode, protocol: protocolProp, agentRuntimeConfig, onSendMessage, enableStreaming, brandIcon, avatarConfig, headerButtons, showPoweredBy, poweredByProps, emptyState, renderToolResult, footerContent, showInformation, onInformationClick, headerContent, children, borderRadius, backgroundColor, border, boxShadow, compact, placeholder, description, onStateUpdate, onNewChat, onClear, onMessagesChange, autoFocus, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, focusTrigger, frontendTools, onAuthorizationRequired, connectedIdentities, runtimeId, historyEndpoint, historyAuthToken, pendingPrompt, }: ChatBaseProps): import("react/jsx-runtime").JSX.Element;
 export type { PoweredByTagProps };
 export default ChatBase;