@datalayer/agent-runtimes 1.0.9 → 1.0.17

package/lib/chat/Chat.js

@@ -20,7 +20,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useEffect, useMemo, useState, useRef, useCallback } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Text, Button, Spinner } from '@primer/react';
+import { Text, Button, Spinner, ThemeProvider } from '@primer/react';
 import { AlertIcon, SyncIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { useConnectedIdentities } from '../identity';
@@ -136,7 +136,7 @@ function getProtocolType(protocol) {
  * />
  * ```
  */
-export function Chat({ protocol: transport, extensions: _extensions, baseUrl = 'http://localhost:8765', wsUrl, agentId, authToken: authTokenProp, placeholder = 'Type your message...', title, subtitle, brandIcon, autoConnect: _autoConnect = true, streaming: _streaming = true, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height = '600px', showHeader = true, showNewChatButton = true, showClearButton = true, showModelSelector = true, showToolsMenu = true, showInput = true, disableInputPrompt = false, showSkillsMenu = true, codemodeEnabled = false, onToggleCodemode, showTokenUsage = true, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount = true, suggestions, submitOnSuggestionClick = true, description, headerContent, headerActions, autoFocus = false, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, pendingPrompt, errorBanner, showInformation = true, chatViewMode, onChatViewModeChange, frontendTools, onToolCallStart, onToolCallComplete, renderToolResult, hideMessagesAfterToolUI = false, contextSnapshot, mcpStatusData, codemodeStatusData, sandboxStatusData, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, }) {
+export function Chat({ protocol: transport, extensions: _extensions, baseUrl = 'http://localhost:8765', wsUrl, agentId, authToken: authTokenProp, placeholder = 'Type your message...', title, subtitle, brandIcon, autoConnect = true, streaming: _streaming = true, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height = '600px', showHeader = true, showNewChatButton = true, showClearButton = true, showModelSelector = true, showToolsMenu = true, showInput = true, disableInputPrompt = false, overlay, launching = false, launchingMessage, showSkillsMenu = true, codemodeEnabled = false, onToggleCodemode, showTokenUsage = true, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount = true, suggestions, submitOnSuggestionClick = true, description, headerContent, headerActions, autoFocus = false, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, pendingPrompt, errorBanner, showInformation = true, chatViewMode, onChatViewModeChange, frontendTools, enableEphemeralNotebook, initialEphemeralNotebookOpen, onEphemeralNotebookOpenChange, enableEphemeralDocument, initialEphemeralSurfaceMode, onEphemeralSurfaceModeChange, collapsed = false, onExpandFromCollapsed, ephemeralNotebookToolbar, onToolCallStart, onToolCallComplete, renderToolResult, hideMessagesAfterToolUI = false, contextSnapshot, mcpStatusData, codemodeStatusData, sandboxStatusData, kernel, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, disableInternalJupyterTheme = false, }) {
     const resolvedAgentId = typeof agentId === 'string' && agentId.trim().length > 0
         ? agentId.trim()
         : 'default';
@@ -292,63 +292,63 @@ export function Chat({ protocol: transport, extensions: _extensions, baseUrl = '
     const avatarConfig = useMemo(() => ({ showAvatars: true }), []);
     // Render error state
     if (error) {
-        return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Box, { className: className, sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    height,
-                    p: 4,
-                    bg: 'canvas.default',
-                }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { mt: 3, color: 'danger.fg', fontSize: 2 }, children: "Connection Error" }), _jsx(Text, { sx: { mt: 1, color: 'fg.muted', fontSize: 1 }, children: error }), _jsx(Button, { variant: "primary", sx: { mt: 3 }, leadingVisual: SyncIcon, onClick: handleReconnect, children: "Retry" })] }) }));
+        return (_jsx(ThemeProvider, { children: _jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Box, { className: className, sx: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        height,
+                        p: 4,
+                        bg: 'canvas.default',
+                    }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { mt: 3, color: 'danger.fg', fontSize: 2 }, children: "Connection Error" }), _jsx(Text, { sx: { mt: 1, color: 'fg.muted', fontSize: 1 }, children: error }), _jsx(Button, { variant: "primary", sx: { mt: 3 }, leadingVisual: SyncIcon, onClick: handleReconnect, children: "Retry" })] }) }) }));
     }
     // Render loading state
     if (isInitializing || !protocolConfig) {
-        return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Box, { className: className, sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    justifyContent: 'center',
+        return (_jsx(ThemeProvider, { children: _jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Box, { className: className, sx: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        height,
+                        p: 4,
+                        bg: 'canvas.default',
+                    }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { mt: 3, color: 'fg.muted' }, children: ["Connecting to ", transport.toUpperCase().replace('-', ' '), " agent..."] })] }) }) }));
+    }
+    return (_jsx(ThemeProvider, { children: _jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Box, { className: className, sx: {
+                    position: 'relative',
                     height,
-                    p: 4,
                     bg: 'canvas.default',
-                }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { mt: 3, color: 'fg.muted' }, children: ["Connecting to ", transport.toUpperCase().replace('-', ' '), " agent..."] })] }) }));
-    }
-    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(Box, { className: className, sx: {
-                position: 'relative',
-                height,
-                bg: 'canvas.default',
-                display: 'flex',
-                flexDirection: 'column',
-            }, children: [_jsx(Box, { sx: {
-                        display: showDetails ? 'flex' : 'none',
-                        flexDirection: 'column',
-                        height: '100%',
-                    }, children: _jsx(AgentDetails, { name: title || 'AI Agent', icon: brandIcon, protocol: transport, url: protocolConfig?.endpoint || baseUrl, messageCount: messageCount, agentId: agentId, apiBase: baseUrl, identityProviders: identityProviders, onIdentityConnect: onIdentityConnect, onIdentityDisconnect: onIdentityDisconnect, onBack: handleBackFromDetails, mcpStatusData: mcpStatusData, codemodeStatusData: codemodeStatusData }) }), _jsxs(Box, { sx: {
-                        display: showDetails ? 'none' : 'flex',
-                        flexDirection: 'column',
-                        height: '100%',
-                    }, children: [errorBanner && (_jsxs(Box, { sx: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                gap: 2,
-                                px: 3,
-                                py: 2,
-                                bg: errorBanner.variant === 'warning'
-                                    ? 'attention.subtle'
-                                    : 'danger.subtle',
-                                borderBottom: '1px solid',
-                                borderColor: errorBanner.variant === 'warning'
-                                    ? 'attention.muted'
-                                    : 'danger.muted',
-                            }, children: [_jsx(AlertIcon, { size: 16, fill: errorBanner.variant === 'warning'
-                                        ? 'attention.fg'
-                                        : 'danger.fg' }), _jsx(Text, { sx: {
-                                        fontSize: 1,
-                                        color: errorBanner.variant === 'warning'
+                    display: 'flex',
+                    flexDirection: 'column',
+                }, children: [_jsx(Box, { sx: {
+                            display: showDetails ? 'flex' : 'none',
+                            flexDirection: 'column',
+                            height: '100%',
+                        }, children: _jsx(AgentDetails, { name: title || 'AI Agent', icon: brandIcon, protocol: transport, url: protocolConfig?.endpoint || baseUrl, messageCount: messageCount, agentId: agentId, apiBase: baseUrl, identityProviders: identityProviders, onIdentityConnect: onIdentityConnect, onIdentityDisconnect: onIdentityDisconnect, onBack: handleBackFromDetails, mcpStatusData: mcpStatusData, codemodeStatusData: codemodeStatusData }) }), _jsxs(Box, { sx: {
+                            display: showDetails ? 'none' : 'flex',
+                            flexDirection: 'column',
+                            height: '100%',
+                        }, children: [errorBanner && (_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: 2,
+                                    px: 3,
+                                    py: 2,
+                                    bg: errorBanner.variant === 'warning'
+                                        ? 'attention.subtle'
+                                        : 'danger.subtle',
+                                    borderBottom: '1px solid',
+                                    borderColor: errorBanner.variant === 'warning'
+                                        ? 'attention.muted'
+                                        : 'danger.muted',
+                                }, children: [_jsx(AlertIcon, { size: 16, fill: errorBanner.variant === 'warning'
                                             ? 'attention.fg'
-                                            : 'danger.fg',
-                                        flex: 1,
-                                    }, children: errorBanner.message })] })), _jsx(ChatBase, { title: title, subtitle: subtitle, brandIcon: brandIcon, showHeader: showHeader, protocol: protocolConfig, placeholder: placeholder, description: description, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, autoFocus: autoFocus, runtimeId: runtimeId, historyEndpoint: historyEndpoint, pendingPrompt: pendingPrompt, showInformation: showInformation, onInformationClick: handleInformationClick, headerContent: headerContent, headerActions: headerActions, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showInput: showInput, disableInputPrompt: disableInputPrompt, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, codemodeEnabled: codemodeEnabled, onToggleCodemode: onToggleCodemode, initialModel: initialModel, availableModels: availableModels, mcpServers: mcpServers, initialSkills: initialSkills, connectedIdentities: identitiesForChat, onNewChat: handleNewChat, onMessagesChange: handleMessagesChange, headerButtons: headerButtons, avatarConfig: avatarConfig, backgroundColor: "canvas.default", focusTrigger: focusTrigger, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange, frontendTools: frontendTools, onToolCallStart: onToolCallStart, onToolCallComplete: onToolCallComplete, renderToolResult: renderToolResult, hideMessagesAfterToolUI: hideMessagesAfterToolUI, contextSnapshot: contextSnapshot, mcpStatusData: mcpStatusData, sandboxStatusData: sandboxStatusData, showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval })] })] }) }));
+                                            : 'danger.fg' }), _jsx(Text, { sx: {
+                                            fontSize: 1,
+                                            color: errorBanner.variant === 'warning'
+                                                ? 'attention.fg'
+                                                : 'danger.fg',
+                                            flex: 1,
+                                        }, children: errorBanner.message })] })), _jsx(ChatBase, { title: title, subtitle: subtitle, brandIcon: brandIcon, showHeader: showHeader, protocol: protocolConfig, placeholder: placeholder, description: description, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, autoFocus: autoFocus, runtimeId: runtimeId, historyEndpoint: historyEndpoint, pendingPrompt: pendingPrompt, showInformation: showInformation, onInformationClick: handleInformationClick, headerContent: headerContent, headerActions: headerActions, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showInput: showInput, disableInputPrompt: disableInputPrompt, overlay: overlay, launching: launching, launchingMessage: launchingMessage, autoConnect: autoConnect, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, codemodeEnabled: codemodeEnabled, onToggleCodemode: onToggleCodemode, initialModel: initialModel, availableModels: availableModels, mcpServers: mcpServers, initialSkills: initialSkills, connectedIdentities: identitiesForChat, onNewChat: handleNewChat, onMessagesChange: handleMessagesChange, headerButtons: headerButtons, avatarConfig: avatarConfig, backgroundColor: "canvas.default", focusTrigger: focusTrigger, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange, frontendTools: frontendTools, enableEphemeralNotebook: enableEphemeralNotebook, initialEphemeralNotebookOpen: initialEphemeralNotebookOpen, onEphemeralNotebookOpenChange: onEphemeralNotebookOpenChange, enableEphemeralDocument: enableEphemeralDocument, initialEphemeralSurfaceMode: initialEphemeralSurfaceMode, onEphemeralSurfaceModeChange: onEphemeralSurfaceModeChange, collapsed: collapsed, onExpandFromCollapsed: onExpandFromCollapsed, ephemeralNotebookToolbar: ephemeralNotebookToolbar, onToolCallStart: onToolCallStart, onToolCallComplete: onToolCallComplete, renderToolResult: renderToolResult, hideMessagesAfterToolUI: hideMessagesAfterToolUI, contextSnapshot: contextSnapshot, mcpStatusData: mcpStatusData, sandboxStatusData: sandboxStatusData, kernel: kernel, showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval, disableInternalJupyterTheme: disableInternalJupyterTheme })] })] }) }) }));
 }
 export default Chat;

package/lib/chat/ChatFloating.d.ts

@@ -18,7 +18,7 @@ import type { ChatCommonProps, ChatViewMode } from '../types';
  */
 export interface ChatFloatingProps extends ChatCommonProps {
     /**
-     * AG-UI endpoint URL (e.g., `http://localhost:8000/api/v1/examples/agentic_chat`).
+     * AG-UI endpoint URL (e.g., `http://localhost:8000/api/v1/ag-ui/{agentId}/`).
      * When provided with useStore=false, enables AG-UI protocol mode.
      */
     endpoint?: string;
@@ -81,5 +81,5 @@ export interface ChatFloatingProps extends ChatCommonProps {
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, onViewModeChange, showPanelBackdrop, availableModels, showModelSelector, showToolsMenu, showSkillsMenu, showTokenUsage, runtimeId, historyEndpoint, authToken, historyAuthToken, pendingPrompt, showInformation, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, }: ChatFloatingProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, renderToolResult, frontendTools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, onViewModeChange, showPanelBackdrop, availableModels, showModelSelector, showToolsMenu, showSkillsMenu, showTokenUsage, runtimeId, historyEndpoint, authToken, historyAuthToken, pendingPrompt, showInformation, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, launching, launchingMessage, }: ChatFloatingProps): import("react/jsx-runtime").JSX.Element;
 export default ChatFloating;

package/lib/chat/ChatFloating.js

@@ -16,7 +16,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * @module chat/ChatFloating
  */
-import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
 import { IconButton, Text, Tooltip } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { XIcon, CommentDiscussionIcon } from '@primer/octicons-react';
@@ -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 = false, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor, 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, authToken, historyAuthToken, pendingPrompt, showInformation = false, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, 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 = false, escapeToClose = true, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip = 'Chat with AI', brandColor, 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, authToken, historyAuthToken, pendingPrompt, showInformation = false, onInformationClick, onToolCallStart, onToolCallComplete, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, panelProps, launching = false, launchingMessage, }) {
     // Store-based state
     const storeIsOpen = useChatOpen();
     const storeMessages = useChatMessages();
@@ -61,14 +61,23 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
     const [isHovered, setIsHovered] = useState(false);
     const [viewMode, setViewMode] = useState(defaultViewMode);
     const [focusTrigger, setFocusTrigger] = useState(0);
+    const [panelInFlow, setPanelInFlow] = useState(false);
+    const [panelHostRect, setPanelHostRect] = useState(null);
     // 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);
+            // When a parent callback is provided, let it switch the host layout
+            // (e.g. swap to ChatSidebar). Otherwise, fall back to the built-in
+            // full-height side panel mode so examples still honor the sidebar
+            // selection instead of staying in floating popup mode.
+            if (onViewModeChange) {
+                onViewModeChange(mode);
+                return;
+            }
+            setViewMode('panel');
+            setFocusTrigger(prev => prev + 1);
         }
         else {
             // 'floating' or 'floating-small' stays within ChatFloating
@@ -77,6 +86,80 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
             onViewModeChange?.(mode);
         }
     }, [onViewModeChange]);
+    // Detect whether the chat is mounted inside a parent that is intentionally
+    // configured for docked side panels (Notebook example lays the chat out as a
+    // flex sibling). Those hosts dock the panel in-flow. Plain content pages
+    // (AG-UI demos) instead get a fixed panel measured against the host region.
+    useLayoutEffect(() => {
+        if (viewMode !== 'panel' || isMobile) {
+            setPanelInFlow(false);
+            return;
+        }
+        const parent = popupRef.current?.parentElement;
+        if (!parent) {
+            setPanelInFlow(false);
+            return;
+        }
+        const style = window.getComputedStyle(parent);
+        const isFlexRow = style.display.includes('flex') &&
+            (style.flexDirection === 'row' || style.flexDirection === 'row-reverse');
+        const isGrid = style.display.includes('grid');
+        setPanelInFlow(isFlexRow || isGrid);
+    }, [viewMode, isMobile, isOpen]);
+    // For fixed (non-flow) panel mode, measure the host region so the docked
+    // panel aligns to the visible content area (below any app header) at full
+    // height, and reserve horizontal space so the page content reflows to the
+    // left instead of being covered like an overlay.
+    const panelWidthPx = typeof width === 'number'
+        ? width
+        : typeof width === 'string'
+            ? Number.parseInt(width, 10) || 420
+            : 420;
+    useLayoutEffect(() => {
+        if (isMobile || viewMode !== 'panel' || panelInFlow || !isOpen) {
+            setPanelHostRect(null);
+            return;
+        }
+        const host = popupRef.current?.parentElement;
+        if (!host) {
+            setPanelHostRect(null);
+            return;
+        }
+        const prevPaddingRight = host.style.paddingRight;
+        const prevBoxSizing = host.style.boxSizing;
+        const basePaddingRight = window.getComputedStyle(host).paddingRight;
+        host.style.boxSizing = 'border-box';
+        host.style.paddingRight = `calc(${basePaddingRight} + ${panelWidthPx}px)`;
+        const measure = () => {
+            const rect = host.getBoundingClientRect();
+            setPanelHostRect(prev => {
+                const next = {
+                    top: rect.top,
+                    height: rect.height,
+                    right: Math.max(0, window.innerWidth - rect.right),
+                };
+                if (prev &&
+                    Math.abs(prev.top - next.top) < 1 &&
+                    Math.abs(prev.height - next.height) < 1 &&
+                    Math.abs(prev.right - next.right) < 1) {
+                    return prev;
+                }
+                return next;
+            });
+        };
+        measure();
+        window.addEventListener('resize', measure);
+        window.addEventListener('scroll', measure, true);
+        const observer = new ResizeObserver(measure);
+        observer.observe(host);
+        return () => {
+            window.removeEventListener('resize', measure);
+            window.removeEventListener('scroll', measure, true);
+            observer.disconnect();
+            host.style.paddingRight = prevPaddingRight;
+            host.style.boxSizing = prevBoxSizing;
+        };
+    }, [isMobile, viewMode, panelInFlow, isOpen, panelWidthPx]);
     // 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(() => {
@@ -360,7 +443,9 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                     opacity: 0.3,
                     zIndex: 1000,
                 }, onClick: handleToggle })), _jsx(Box, { ref: popupRef, className: className, sx: {
-                    position: 'fixed',
+                    position: viewMode === 'panel' && !isMobile && panelInFlow
+                        ? 'relative'
+                        : 'fixed',
                     // floating (normal) — full-height column pinned to the right edge
                     ...(viewMode === 'floating' && !isMobile
                         ? {
@@ -376,14 +461,30 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                         : {}),
                     ...(viewMode === 'panel' && !isMobile
                         ? {
-                            top: 0,
-                            right: 0,
-                            bottom: 0,
-                            left: 'auto',
+                            ...(panelInFlow
+                                ? {
+                                    top: 'auto',
+                                    right: 'auto',
+                                    bottom: 'auto',
+                                    left: 'auto',
+                                    marginLeft: 'auto',
+                                    alignSelf: 'stretch',
+                                }
+                                : {
+                                    // Fixed panel aligned to the measured host region so it
+                                    // docks below any app header at full content height,
+                                    // instead of overlaying from the very top of the viewport.
+                                    top: panelHostRect ? `${panelHostRect.top}px` : 0,
+                                    right: panelHostRect ? `${panelHostRect.right}px` : 0,
+                                    bottom: panelHostRect ? 'auto' : 0,
+                                    left: 'auto',
+                                }),
                         }
                         : {}),
                     width: viewMode === 'panel' && !isMobile
-                        ? '420px'
+                        ? isOpen || isAnimating
+                            ? `${panelWidthPx}px`
+                            : '0px'
                         : viewMode === 'floating' && !isMobile
                             ? typeof popupWidth === 'number'
                                 ? `${popupWidth}px`
@@ -397,24 +498,30 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                                     : typeof popupWidth === 'number'
                                         ? `${popupWidth}px`
                                         : popupWidth,
-                    height: (viewMode === 'panel' || viewMode === 'floating') && !isMobile
-                        ? 'auto'
-                        : viewMode === 'floating-small' && !isMobile
-                            ? typeof popupHeight === 'number'
-                                ? `${popupHeight}px`
-                                : popupHeight
-                            : isMobile
-                                ? '100%'
-                                : typeof popupHeight === 'number'
+                    height: viewMode === 'panel' && !isMobile
+                        ? panelInFlow
+                            ? '100%'
+                            : panelHostRect
+                                ? `${panelHostRect.height}px`
+                                : '100%'
+                        : viewMode === 'floating' && !isMobile
+                            ? '100%'
+                            : 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',
                     border: '1px solid',
                     borderColor: 'border.default',
                     borderRadius: viewMode === 'panel' || isMobile ? 0 : '12px',
-                    boxShadow: viewMode === 'panel' ? 'shadow.large' : 'shadow.extra-large',
+                    boxShadow: viewMode === 'panel' ? 'shadow.none' : 'shadow.extra-large',
                     overflow: 'hidden',
                     transform: viewMode === 'panel'
                         ? isOpen
@@ -422,13 +529,17 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                             : 'translateX(100%)'
                         : getAnimationTransform(isOpen),
                     opacity: viewMode === 'panel' ? 1 : isOpen ? 1 : 0,
-                    transition: `transform ${animationDuration}ms ease, opacity ${animationDuration}ms ease`,
-                    zIndex: 1001,
+                    transition: `transform ${animationDuration}ms ease, opacity ${animationDuration}ms ease, width ${animationDuration}ms ease`,
+                    zIndex: viewMode === 'panel' && !isMobile
+                        ? panelInFlow
+                            ? 'auto'
+                            : 1001
+                        : 1001,
                     // Hide from accessibility and pointer events when closed
                     visibility: isOpen || isAnimating ? 'visible' : 'hidden',
                     pointerEvents: isOpen ? 'auto' : 'none',
                     ...mobileStyles,
-                }, children: _jsx(ChatBase, { title: title, showHeader: showHeader, useStore: useStoreMode, protocol: protocol, autoFocus: isOpen, focusTrigger: focusTrigger, brandIcon: brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), headerButtons: {
+                }, children: _jsx(ChatBase, { title: title, showHeader: showHeader, useStore: useStoreMode, protocol: protocol, autoFocus: isOpen, focusTrigger: focusTrigger, launching: launching, launchingMessage: launchingMessage, brandIcon: brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), headerButtons: {
                         showNewChat: showNewChatButton,
                         showClear: showClearButton && messages.length > 0,
                         showSettings: showSettingsButton && !!onSettingsClick,

package/lib/chat/ChatSidebar.js

@@ -15,7 +15,7 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { IconButton } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { SidebarCollapseIcon, SidebarExpandIcon, XIcon, } from '@primer/octicons-react';
+import { XIcon, SidebarExpandIcon, SidebarCollapseIcon, } from '@primer/octicons-react';
 import { useChatKeyboardShortcuts, getShortcutDisplay, } from '@datalayer/core/lib/hooks';
 import { ChatBase } from './base/ChatBase';
 import { useChatStore, useChatOpen, useChatMessages, } from '../stores/chatStore';
@@ -161,11 +161,7 @@ export function ChatSidebar({ title = 'Chat', protocol: protocolProp, defaultOpe
         })
         : undefined;
     // Collapse toggle button for header
-    const collapseButton = (_jsx(IconButton, { icon: isMobile
-            ? XIcon
-            : position === 'right'
-                ? SidebarCollapseIcon
-                : SidebarExpandIcon, "aria-label": `Close sidebar${shortcutHint ? ` (${shortcutHint})` : ''}`, onClick: handleToggle, variant: "invisible", size: "small" }));
+    const collapseButton = (_jsx(IconButton, { icon: XIcon, "aria-label": `Close sidebar${shortcutHint ? ` (${shortcutHint})` : ''}`, onClick: handleToggle, variant: "invisible", size: "small" }));
     // Collapsed state
     if (!isOpen) {
         const collapsedLauncher = (_jsx(Box, { ref: sidebarRef, className: className, sx: {
@@ -231,27 +227,29 @@ export function ChatSidebar({ title = 'Chat', protocol: protocolProp, defaultOpe
                     bg: 'neutral.muted',
                     opacity: 0.5,
                     zIndex: 999,
-                }, onClick: handleToggle })), _jsx(Box, { ref: sidebarRef, className: className, sx: {
+                }, onClick: handleToggle })), _jsx(Box, { ref: sidebarRef, className: className, 
+                // Frequently-changing pixel dimensions (resizable width and the
+                // viewport-derived height that updates on scroll/resize) are applied
+                // via the inline `style` prop instead of `sx`. Passing them through
+                // `sx` makes styled-components generate a brand-new, never-reused class
+                // for every unique pixel value, quickly exceeding its 200-class warning
+                // threshold on the shared Box styled component.
+                style: isMobile
+                    ? { width: '100%', height: '100%' }
+                    : {
+                        width: typeof width === 'number' ? `${width}px` : width,
+                        height: desktopViewportHeight
+                            ? `${desktopViewportHeight}px`
+                            : 'calc(100dvh - 8px)',
+                        maxHeight: desktopViewportHeight
+                            ? `${desktopViewportHeight}px`
+                            : 'calc(100dvh - 8px)',
+                    }, sx: {
                     position: 'relative',
                     display: 'flex',
                     flexDirection: 'column',
                     alignSelf: 'stretch',
-                    width: isMobile
-                        ? '100%'
-                        : typeof width === 'number'
-                            ? `${width}px`
-                            : width,
-                    height: isMobile
-                        ? '100%'
-                        : desktopViewportHeight
-                            ? `${desktopViewportHeight}px`
-                            : 'calc(100dvh - 8px)',
                     minHeight: 0,
-                    maxHeight: isMobile
-                        ? '100%'
-                        : desktopViewportHeight
-                            ? `${desktopViewportHeight}px`
-                            : 'calc(100dvh - 8px)',
                     marginBlock: isMobile ? 0 : '4px',
                     flex: isMobile ? '1 1 auto' : '0 0 auto',
                     bg: 'canvas.default',