@datalayer/agent-runtimes 1.3.89 → 1.3.91

package/lib/chat/base/ChatBase.js

@@ -17,11 +17,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { useContext } from 'react';
 import React, { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
-import { Box, Text, Spinner, IconButton } from '@primer/react';
+import { Text, Spinner, IconButton } from '@primer/react';
 import { SkeletonText } from '@primer/react/experimental';
 import { SidebarExpandIcon } from '@primer/octicons-react';
 import { notebookStore, JupyterReactTheme } from '@datalayer/jupyter-react';
-import { setupPrimerPortals, useThemeStore, getColorPalette, getThemeConfig, useSystemColorMode, } from '@datalayer/primer-addons';
+import { Box, setupPrimerPortals, useThemeStore, getColorPalette, getThemeConfig, useSystemColorMode, } from '@datalayer/primer-addons';
 import { AlertIcon, PersonIcon } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
 import { QueryClientProvider, QueryClientContext } from '@tanstack/react-query';
@@ -97,31 +97,7 @@ function frontendToolExpectsArgs(tool) {
     return Object.keys(parameters).length > 0;
 }
 function CompanionSurfaceSkeleton({ mode }) {
-    return (_jsx(Box, { "aria-label": mode === 'notebook' ? 'Preparing notebook…' : 'Preparing document…', sx: {
-            flex: 1,
-            minHeight: 0,
-            overflow: 'hidden',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 3,
-            p: 4,
-        }, children: mode === 'notebook' ? (_jsx(_Fragment, { children: [0, 1, 2].map(i => (_jsxs(Box, { sx: {
-                    p: 3,
-                    border: '1px solid',
-                    borderColor: 'border.muted',
-                    borderRadius: 2,
-                    bg: 'canvas.subtle',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 2,
-                }, children: [_jsx(SkeletonText, { lines: 1 }), _jsx(SkeletonText, { lines: i === 0 ? 2 : 3 })] }, i))) })) : (_jsxs(Box, { sx: {
-                maxWidth: 860,
-                width: '100%',
-                mx: 'auto',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 3,
-            }, children: [_jsx(SkeletonText, { lines: 1 }), _jsx(SkeletonText, { lines: 4 }), _jsx(SkeletonText, { lines: 3 }), _jsx(SkeletonText, { lines: 5 })] })) }));
+    return (_jsx(Box, { "aria-label": mode === 'notebook' ? 'Preparing notebook…' : 'Preparing document…', flex: 1, minHeight: 0, overflow: "hidden", display: "flex", flexDirection: "column", gap: 3, p: 4, children: mode === 'notebook' ? (_jsx(_Fragment, { children: [0, 1, 2].map(i => (_jsxs(Box, { p: 3, border: "1px solid", borderColor: "border.muted", borderRadius: 2, bg: "canvas.subtle", display: "flex", flexDirection: "column", gap: 2, children: [_jsx(SkeletonText, { lines: 1 }), _jsx(SkeletonText, { lines: i === 0 ? 2 : 3 })] }, i))) })) : (_jsxs(Box, { maxWidth: 860, width: "100%", mx: "auto", display: "flex", flexDirection: "column", gap: 3, children: [_jsx(SkeletonText, { lines: 1 }), _jsx(SkeletonText, { lines: 4 }), _jsx(SkeletonText, { lines: 3 }), _jsx(SkeletonText, { lines: 5 })] })) }));
 }
 // JupyterReactTheme forwards unknown props (e.g. `style`) to its inner Primer
 // `BaseStyles`. `style` is not part of its typings, so we widen the type here.
@@ -3567,18 +3543,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             ? notebookToolSurfacesRenderer(notebookToolSurfacesId)
             : undefined), [renderToolResult, notebookToolSurfacesId]);
     if (!ready) {
-        return (_jsx(Box, { className: className, sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-                p: 4,
-                borderRadius,
-                bg: backgroundColor || 'canvas.default',
-                border,
-                boxShadow,
-            }, children: loadingState || (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { mt: 3, color: 'fg.muted' }, children: "Initializing chat..." })] })) }));
+        return (_jsx(Box, { className: className, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", p: 4, borderRadius: borderRadius, bg: backgroundColor || 'canvas.default', border: border, boxShadow: boxShadow, children: loadingState || (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { mt: 3, color: 'fg.muted' }, children: "Initializing chat..." })] })) }));
     }
     // ---- apiBase for indicators (derived from configEndpoint) ----
     // Indicators (McpStatusIndicator, SandboxStatusIndicator) prepend
@@ -3645,23 +3610,16 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
             ...displayItems,
         ]
         : displayItems;
-    const messagesContent = children ? (children) : (_jsxs(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            minHeight: 0,
-            /*
-              A reading column, not a full-bleed sheet.
-    
-              The transcript keeps a book-page width and centres itself; on a
-              narrow chat column the cap never binds and nothing changes. The
-              rows inside carry their own horizontal padding, which becomes the
-              margin once the cap does bind.
-            */
-            width: '100%',
-            maxWidth: 920,
-            mx: 'auto',
-            bg: 'canvas.default',
-        }, children: [_jsx(ChatMessageList, { displayItems: welcomedItems, isLoading: isLoading, isStreaming: isStreaming, showLoadingIndicator: showLoadingIndicator, hideMessagesAfterToolUI: hideMessagesAfterToolUI, avatarConfig: defaultAvatarConfig, padding: padding, renderToolResult: effectiveRenderToolResult, approvalConfig: approvalConfig, messagesEndRef: messagesEndRef, onRespond: handleRespond, showTurnFooters: showTurnFooter, agentUsage: agentUsage, onRemoveItems: handleRemoveItems, mcpServers: filteredMcpServers, emptyContent: launching ? null : (_jsx(ChatEmptyState, { emptyState: emptyState, brandIcon: brandIcon, description: resolvedDescription, suggestions: resolvedSuggestions, submitOnSuggestionClick: submitOnSuggestionClick, onSuggestionSubmit: handleSuggestionSubmit, onSuggestionFill: handleSuggestionFill })) }), trailingContent] }));
+    const messagesContent = children ? (children) : (_jsxs(Box, { display: "flex", flexDirection: "column", minHeight: 0, 
+        /*
+            A reading column, not a full-bleed sheet.
+  
+            The transcript keeps a book-page width and centres itself; on a
+            narrow chat column the cap never binds and nothing changes. The
+            rows inside carry their own horizontal padding, which becomes the
+            margin once the cap does bind.
+          */
+        width: "100%", maxWidth: 920, mx: "auto", bg: "canvas.default", children: [_jsx(ChatMessageList, { displayItems: welcomedItems, isLoading: isLoading, isStreaming: isStreaming, showLoadingIndicator: showLoadingIndicator, hideMessagesAfterToolUI: hideMessagesAfterToolUI, avatarConfig: defaultAvatarConfig, padding: padding, renderToolResult: effectiveRenderToolResult, approvalConfig: approvalConfig, messagesEndRef: messagesEndRef, onRespond: handleRespond, showTurnFooters: showTurnFooter, agentUsage: agentUsage, onRemoveItems: handleRemoveItems, mcpServers: filteredMcpServers, emptyContent: launching ? null : (_jsx(ChatEmptyState, { emptyState: emptyState, brandIcon: brandIcon, description: resolvedDescription, suggestions: resolvedSuggestions, submitOnSuggestionClick: submitOnSuggestionClick, onSuggestionSubmit: handleSuggestionSubmit, onSuggestionFill: handleSuggestionFill })) }), trailingContent] }));
     // The microphone, in the composer's footer (VO-10).
     const voiceControl = hearing && voice ? (_jsx(VoiceInput, { hearing: hearing, language: voice.language, consentKey: voice.consentKey ?? 'chat', disabled: disabled || launching, speaking: voiceSpeaking, onStopSpeaking: onStopSpeaking, onListen: onStopSpeaking, onTranscript: (transcript) => {
             if (voice.sendWhatISay) {
@@ -3754,33 +3712,19 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     // ========================================================================
     // Render
     // ========================================================================
-    return (_jsxs(Box, { className: className, sx: {
-            position: 'relative',
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%',
-            maxHeight: '100%',
-            minHeight: 0,
-            /*
-              As wide as the host, always.
-    
-              The root set its height and said nothing about width, so mounted in
-              a flex row — which is how the LOOP chat mounts it — it was a
-              shrink-to-fit item: as wide as its widest line and no wider,
-              anchored to the left of a row it should have filled, and re-sizing
-              with every streamed chunk. That is what made the person's own
-              bubble drift while the agent answered. A chat fills the column it
-              is given; the column decides the width, not the transcript.
-            */
-            flex: '1 1 auto',
-            width: '100%',
-            minWidth: 0,
-            bg: backgroundColor || 'canvas.default',
-            borderRadius,
-            border,
-            boxShadow,
-            overflow: 'hidden',
-        }, children: [!surfaceVisible && chatHeaderElement, showDetails && (
+    return (_jsxs(Box, { className: className, position: "relative", display: "flex", flexDirection: "column", height: "100%", maxHeight: "100%", minHeight: 0, 
+        /*
+            As wide as the host, always.
+  
+            The root set its height and said nothing about width, so mounted in
+            a flex row — which is how the LOOP chat mounts it — it was a
+            shrink-to-fit item: as wide as its widest line and no wider,
+            anchored to the left of a row it should have filled, and re-sizing
+            with every streamed chunk. That is what made the person's own
+            bubble drift while the agent answered. A chat fills the column it
+            is given; the column decides the width, not the transcript.
+          */
+        flex: "1 1 auto", width: "100%", minWidth: 0, bg: backgroundColor || 'canvas.default', borderRadius: borderRadius, border: border, boxShadow: boxShadow, overflow: "hidden", children: [!surfaceVisible && chatHeaderElement, showDetails && (
             /*
               A column, not a row.
            
@@ -3795,43 +3739,16 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
               stretches across that by default. `Chat.tsx` mounts the same component
               the same way and has always looked right for exactly this reason.
             */
-            _jsx(Box, { sx: {
-                    flex: '1 1 auto',
-                    minHeight: 0,
-                    display: 'flex',
-                    flexDirection: 'column',
-                }, children: _jsx(AgentDetails, { name: title || 'AI Agent', icon: brandIcon, protocol: protocol?.type ?? 'unknown', url: protocol?.endpoint || '', messageCount: displayItems.length, agentId: activeAgentId, apiBase: protocol?.configEndpoint, onBack: () => setShowDetails(false) }) })), showToolApprovalBanner &&
+            _jsx(Box, { flex: "1 1 auto", minHeight: 0, display: "flex", flexDirection: "column", children: _jsx(AgentDetails, { name: title || 'AI Agent', icon: brandIcon, protocol: protocol?.type ?? 'unknown', url: protocol?.endpoint || '', messageCount: displayItems.length, agentId: activeAgentId, apiBase: protocol?.configEndpoint, onBack: () => setShowDetails(false) }) })), showToolApprovalBanner &&
                 pendingApprovals &&
-                pendingApprovals.length > 0 && (_jsx(ToolApprovalBannerSection, { pendingApprovals: pendingApprovals, onApprove: handleBannerApprove, onReject: handleBannerReject })), showErrors && error && (_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    p: padding,
-                    bg: 'danger.subtle',
-                    borderBottom: '1px solid',
-                    borderColor: 'danger.muted',
-                }, children: [_jsx(AlertIcon, { size: 16 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: error.message })] })), surfaceVisible ? (_jsxs(Box, { sx: {
-                    flex: 1,
-                    minHeight: 0,
-                    display: 'flex',
-                    overflow: 'hidden',
-                    position: 'relative',
-                }, children: [_jsx(Box, { sx: {
-                            flex: 1,
-                            minWidth: 0,
-                            minHeight: 0,
-                            display: 'flex',
-                            flexDirection: 'column',
-                            overflow: 'hidden',
-                            ...(surfaceChatFloating
+                pendingApprovals.length > 0 && (_jsx(ToolApprovalBannerSection, { pendingApprovals: pendingApprovals, onApprove: handleBannerApprove, onReject: handleBannerReject })), showErrors && error && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, p: padding, bg: "danger.subtle", borderBottom: "1px solid", borderColor: "danger.muted", children: [_jsx(AlertIcon, { size: 16 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: error.message })] })), surfaceVisible ? (_jsxs(Box, { flex: 1, minHeight: 0, display: "flex", overflow: "hidden", position: "relative", children: [_jsx(Box, { flex: 1, minWidth: 0, minHeight: 0, display: "flex", flexDirection: "column", overflow: "hidden", sx: surfaceChatFloating
+                            ? null
+                            : surfaceCollapsed
                                 ? null
-                                : surfaceCollapsed
-                                    ? null
-                                    : {
-                                        borderRight: '1px solid',
-                                        borderColor: 'border.default',
-                                    }),
-                        }, children: launching || overlay ? (_jsx(CompanionSurfaceSkeleton, { mode: notebookVisible ? 'notebook' : 'document' })) : notebookVisible ? (_jsx(EphemeralNotebook, { notebookId: ephemeralNotebookId, runtimeName: runtimeId || activeAgentId, runtimeOverride: ephemeralRuntimeOverride, themeVariant: themeVariant, colorMode: colorMode, nbformat: persistedEphemeralNbformat ?? undefined, onNbformatChange: handleEphemeralNotebookChange, toolbarComponent: ephemeralNotebookToolbar, toolbarExtraItems: notebookToolbarItems, collaborationProvider: ephemeralNotebookCollaborationProvider })) : (_jsx(React.Suspense, { fallback: null, children: _jsx(EphemeralDocument, { documentId: ephemeralDocumentId, runtimeName: runtimeId || activeAgentId, runtimeOverride: ephemeralRuntimeOverride, themeVariant: themeVariant, colorMode: colorMode, content: persistedEphemeralDocument ?? undefined, onContentChange: handleEphemeralDocumentChange, onToolsReady: handleDocumentToolsReady, onKernelChange: handleDocumentKernelChange, collaboration: ephemeralDocumentCollaboration, toolbarExtraItems: documentToolbarItems }) })) }), !surfaceCollapsed && (_jsxs(Box, { sx: surfaceChatFloating
+                                : {
+                                    borderRight: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: launching || overlay ? (_jsx(CompanionSurfaceSkeleton, { mode: notebookVisible ? 'notebook' : 'document' })) : notebookVisible ? (_jsx(EphemeralNotebook, { notebookId: ephemeralNotebookId, runtimeName: runtimeId || activeAgentId, runtimeOverride: ephemeralRuntimeOverride, themeVariant: themeVariant, colorMode: colorMode, nbformat: persistedEphemeralNbformat ?? undefined, onNbformatChange: handleEphemeralNotebookChange, toolbarComponent: ephemeralNotebookToolbar, toolbarExtraItems: notebookToolbarItems, collaborationProvider: ephemeralNotebookCollaborationProvider })) : (_jsx(React.Suspense, { fallback: null, children: _jsx(EphemeralDocument, { documentId: ephemeralDocumentId, runtimeName: runtimeId || activeAgentId, runtimeOverride: ephemeralRuntimeOverride, themeVariant: themeVariant, colorMode: colorMode, content: persistedEphemeralDocument ?? undefined, onContentChange: handleEphemeralDocumentChange, onToolsReady: handleDocumentToolsReady, onKernelChange: handleDocumentKernelChange, collaboration: ephemeralDocumentCollaboration, toolbarExtraItems: documentToolbarItems }) })) }), !surfaceCollapsed && (_jsxs(Box, { sx: surfaceChatFloating
                             ? {
                                 position: 'absolute',
                                 right: 16,
@@ -3861,61 +3778,9 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                                 flexDirection: 'column',
                                 overflow: 'hidden',
                                 bg: 'canvas.default',
-                            }, children: [chatHeaderElement, _jsx(Box, { ref: messagesContainerRef, sx: {
-                                    flex: 1,
-                                    minHeight: 0,
-                                    overflow: 'auto',
-                                    bg: 'canvas.default',
-                                }, children: messagesContent }), footerContent, inputToolbar] })), surfaceCollapsed &&
+                            }, children: [chatHeaderElement, _jsx(Box, { ref: messagesContainerRef, flex: 1, minHeight: 0, overflow: "auto", bg: "canvas.default", children: messagesContent }), footerContent, inputToolbar] })), surfaceCollapsed &&
                         onExpandFromCollapsed &&
-                        (chatViewMode === 'sidebar' ? (_jsx(Box, { sx: {
-                                position: 'absolute',
-                                top: 8,
-                                right: 8,
-                                zIndex: 6,
-                            }, children: _jsx(IconButton, { icon: SidebarExpandIcon, "aria-label": "Open chat", onClick: onExpandFromCollapsed, variant: "default", size: "small" }) })) : (_jsx(FloatingBrandButton, { isOpen: false, onToggle: onExpandFromCollapsed, position: "bottom-right", tooltip: "Open chat" })))] })) : (_jsxs(_Fragment, { children: [_jsx(Box, { ref: messagesContainerRef, "data-chat-history": "", sx: {
-                            flex: 1,
-                            flexGrow: 1,
-                            minHeight: 0,
-                            overflow: 'auto',
-                            bg: 'canvas.default',
-                        }, children: messagesContent }), footerContent, inputToolbar] })), showPoweredBy && _jsx(PoweredByTag, { ...poweredByProps }), overlay && (_jsxs(Box, { sx: {
-                    position: 'absolute',
-                    inset: 0,
-                    zIndex: 20,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    p: 3,
-                    overflow: 'auto',
-                }, children: [_jsx(Box, { "aria-hidden": true, sx: {
-                            position: 'absolute',
-                            inset: 0,
-                            bg: 'canvas.default',
-                            opacity: 0.4,
-                            backdropFilter: 'blur(1px)',
-                        } }), _jsx(Box, { sx: { position: 'relative', zIndex: 1, maxWidth: '100%' }, children: overlay })] })), launching && !overlay && (_jsxs(Box, { sx: {
-                    position: 'absolute',
-                    inset: 0,
-                    zIndex: 15,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    p: 3,
-                }, children: [_jsx(Box, { "aria-hidden": true, sx: {
-                            position: 'absolute',
-                            inset: 0,
-                            bg: 'canvas.default',
-                            opacity: 0.35,
-                            backdropFilter: 'blur(1px)',
-                        } }), _jsxs(Box, { sx: {
-                            position: 'relative',
-                            zIndex: 1,
-                            display: 'flex',
-                            flexDirection: 'column',
-                            alignItems: 'center',
-                            gap: 3,
-                        }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: launchingMessage || 'Launching your agent…' })] })] }))] }));
+                        (chatViewMode === 'sidebar' ? (_jsx(Box, { position: "absolute", top: 8, right: 8, zIndex: 6, children: _jsx(IconButton, { icon: SidebarExpandIcon, "aria-label": "Open chat", onClick: onExpandFromCollapsed, variant: "default", size: "small" }) })) : (_jsx(FloatingBrandButton, { isOpen: false, onToggle: onExpandFromCollapsed, position: "bottom-right", tooltip: "Open chat" })))] })) : (_jsxs(_Fragment, { children: [_jsx(Box, { ref: messagesContainerRef, "data-chat-history": "", flex: 1, flexGrow: 1, minHeight: 0, overflow: "auto", bg: "canvas.default", children: messagesContent }), footerContent, inputToolbar] })), showPoweredBy && _jsx(PoweredByTag, { ...poweredByProps }), overlay && (_jsxs(Box, { position: "absolute", inset: 0, zIndex: 20, display: "flex", alignItems: "center", justifyContent: "center", p: 3, overflow: "auto", children: [_jsx(Box, { "aria-hidden": true, position: "absolute", inset: 0, bg: "canvas.default", opacity: 0.4, backdropFilter: "blur(1px)" }), _jsx(Box, { position: "relative", zIndex: 1, maxWidth: "100%", children: overlay })] })), launching && !overlay && (_jsxs(Box, { position: "absolute", inset: 0, zIndex: 15, display: "flex", alignItems: "center", justifyContent: "center", p: 3, children: [_jsx(Box, { "aria-hidden": true, position: "absolute", inset: 0, bg: "canvas.default", opacity: 0.35, backdropFilter: "blur(1px)" }), _jsxs(Box, { position: "relative", zIndex: 1, display: "flex", flexDirection: "column", alignItems: "center", gap: 3, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: launchingMessage || 'Launching your agent…' })] })] }))] }));
 }
 /**
  * Internal component rendering the top-of-chat approval banner + review dialog.

package/lib/chat/display/EmptyState.js

@@ -70,50 +70,22 @@ export function ChatEmptyState({ emptyState, brandIcon, description, suggestions
                     handleSuggestionClick(suggestion);
                 }
             }, children: _jsx(Truncate, { inline: true, title: suggestion.message, maxWidth: "100%", sx: { minWidth: 0 }, children: suggestion.title }) }, index))) }));
-    return (_jsx(ThemeProvider, { children: _jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                // Centred across the column, anchored to its top: the introduction
-                // is where a conversation starts, and the first message should
-                // appear under it rather than push it around the canvas.
-                alignItems: 'center',
-                justifyContent: 'flex-start',
-                p: 4,
-                color: 'fg.muted',
-                textAlign: 'center',
-                gap: 2,
-            }, children: [sections.length > 0 ? (
+    return (_jsx(ThemeProvider, { children: _jsxs(Box, { display: "flex", flexDirection: "column", 
+            // Centred across the column, anchored to its top: the introduction
+            // is where a conversation starts, and the first message should
+            // appear under it rather than push it around the canvas.
+            alignItems: "center", justifyContent: "flex-start", p: 4, color: "fg.muted", textAlign: "center", gap: 2, children: [sections.length > 0 ? (
                 /*
                  * Levels: the first at full size, the ones under it a step
                  * smaller and set off by a rule — a team, then the member of it
                  * being addressed, each introducing itself and offering its own
                  * openers.
                  */
-                sections.map((section, level) => (_jsxs(Box, { sx: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        gap: 2,
-                        width: '100%',
-                        ...(level > 0
-                            ? {
-                                mt: 3,
-                                pt: 3,
-                                borderTop: '1px solid',
-                                borderColor: 'border.muted',
-                            }
-                            : null),
-                    }, children: [section.icon, _jsx(Text, { sx: {
+                sections.map((section, level) => (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 2, width: "100%", mt: level > 0 ? 3 : undefined, pt: level > 0 ? 3 : undefined, borderTop: level > 0 ? '1px solid' : undefined, borderColor: level > 0 ? 'border.muted' : undefined, children: [section.icon, _jsx(Text, { sx: {
                                 fontSize: level === 0 ? 2 : 1,
                                 fontWeight: level === 0 ? 'normal' : 'semibold',
                             }, children: section.title }), section.subtitle ? (_jsx(Text, { sx: { fontSize: level === 0 ? 1 : 0 }, children: section.subtitle })) : null, (() => {
                             const own = (suggestions ?? []).filter(suggestion => suggestion.group === section.group);
                             return own.length > 0 ? chips(own) : null;
-                        })()] }, section.group)))) : (_jsxs(_Fragment, { children: [emptyState?.icon || brandIcon || _jsx(AiAgentIcon, { colored: true, size: 48 }), _jsx(Text, { sx: { fontSize: 2 }, children: emptyState?.title || chatText.startConversation }), (emptyState?.subtitle || description) && (_jsx(Text, { sx: { fontSize: 1 }, children: emptyState?.subtitle || description }))] })), blocks.map(block => (_jsxs(Box, { sx: {
-                        display: 'flex',
-                        flexDirection: 'column',
-                        alignItems: 'center',
-                        gap: 1,
-                        mt: 2,
-                    }, children: [block.group ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: block.group })) : null, chips(block.items)] }, block.group ?? '')))] }) }));
+                        })()] }, section.group)))) : (_jsxs(_Fragment, { children: [emptyState?.icon || brandIcon || _jsx(AiAgentIcon, { colored: true, size: 48 }), _jsx(Text, { sx: { fontSize: 2 }, children: emptyState?.title || chatText.startConversation }), (emptyState?.subtitle || description) && (_jsx(Text, { sx: { fontSize: 1 }, children: emptyState?.subtitle || description }))] })), blocks.map(block => (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 1, mt: 2, children: [block.group ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: block.group })) : null, chips(block.items)] }, block.group ?? '')))] }) }));
 }

package/lib/chat/display/FloatingBrandButton.js

@@ -11,7 +11,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useState } from 'react';
 import { createPortal } from 'react-dom';
-import { Box, IconButton, Tooltip, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { IconButton, Tooltip, Text } from '@primer/react';
 import { CommentDiscussionIcon, XIcon } from '@primer/octicons-react';
 /**
  * Floating brand button component
@@ -27,14 +28,7 @@ export function FloatingBrandButton({ isOpen, onToggle, position = 'bottom-right
         'top-left': { top: 20, left: 20 },
     };
     const posStyle = positionStyles[position];
-    const floatingButton = (_jsx(Box, { className: className, sx: {
-            position: 'fixed',
-            zIndex: 1000,
-            ...posStyle,
-        }, children: _jsxs(Box, { sx: {
-                position: 'relative',
-                display: 'inline-flex',
-            }, onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx(Tooltip, { text: tooltip, direction: "w", children: _jsx(IconButton, { icon: isOpen
+    const floatingButton = (_jsx(Box, { className: className, position: "fixed", zIndex: 1000, sx: posStyle, children: _jsxs(Box, { position: "relative", display: "inline-flex", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [_jsx(Tooltip, { text: tooltip, direction: "w", children: _jsx(IconButton, { icon: isOpen
                             ? XIcon
                             : icon || CommentDiscussionIcon, "aria-label": isOpen ? 'Close chat' : 'Open chat', onClick: onToggle, size: "large", sx: {
                             width: 56,
@@ -49,31 +43,7 @@ export function FloatingBrandButton({ isOpen, onToggle, position = 'bottom-right
                                 bg: brandColor || 'accent.emphasis',
                                 boxShadow: 'shadow.extra-large',
                             },
-                        } }) }), unreadCount > 0 && !isOpen && (_jsx(Box, { sx: {
-                        position: 'absolute',
-                        top: -4,
-                        right: -4,
-                        minWidth: 20,
-                        height: 20,
-                        px: 1,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        bg: 'danger.emphasis',
-                        color: 'fg.onEmphasis',
-                        borderRadius: '50%',
-                        fontSize: 0,
-                        fontWeight: 'bold',
-                    }, children: _jsx(Text, { sx: { fontSize: 0 }, children: unreadCount > 99 ? '99+' : unreadCount }) })), unreadCount > 0 && !isOpen && (_jsx(Box, { sx: {
-                        position: 'absolute',
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        bottom: 0,
-                        borderRadius: '50%',
-                        border: '2px solid',
-                        borderColor: 'accent.emphasis',
-                        animation: 'pulse 2s infinite',
+                        } }) }), unreadCount > 0 && !isOpen && (_jsx(Box, { position: "absolute", top: -4, right: -4, minWidth: 20, height: 20, px: 1, display: "flex", alignItems: "center", justifyContent: "center", bg: "danger.emphasis", color: "fg.onEmphasis", borderRadius: "50%", fontSize: 0, fontWeight: "bold", children: _jsx(Text, { sx: { fontSize: 0 }, children: unreadCount > 99 ? '99+' : unreadCount }) })), unreadCount > 0 && !isOpen && (_jsx(Box, { position: "absolute", top: 0, left: 0, right: 0, bottom: 0, borderRadius: "50%", border: "2px solid", borderColor: "accent.emphasis", animation: "pulse 2s infinite", sx: {
                         '@keyframes pulse': {
                             '0%': {
                                 transform: 'scale(1)',

package/lib/chat/display/PoweredByTag.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Link } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Link } from '@primer/react';
 /**
  * PoweredBy tag component
  * Displays a "Powered by X" branding tag
@@ -8,19 +9,7 @@ export function PoweredByTag({ show = true, brandName = 'Datalayer', brandUrl =
     if (!show) {
         return null;
     }
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            gap: 1,
-            py: 2,
-            px: 3,
-            fontSize: 0,
-            color: 'fg.muted',
-            borderTop: '1px solid',
-            borderColor: 'border.default',
-            bg: 'canvas.subtle',
-        }, children: [brandIcon && (_jsx(Box, { sx: { display: 'flex', alignItems: 'center' }, children: brandIcon })), _jsx("span", { children: "Powered by" }), _jsx(Link, { href: brandUrl, target: "_blank", rel: "noopener noreferrer", sx: {
+    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "center", gap: 1, py: 2, px: 3, fontSize: 0, color: "fg.muted", borderTop: "1px solid", borderColor: "border.default", bg: "canvas.subtle", children: [brandIcon && (_jsx(Box, { display: "flex", alignItems: "center", children: brandIcon })), _jsx("span", { children: "Powered by" }), _jsx(Link, { href: brandUrl, target: "_blank", rel: "noopener noreferrer", sx: {
                     color: 'fg.muted',
                     fontWeight: 'semibold',
                     textDecoration: 'none',

package/lib/chat/document/EphemeralDocument.js

@@ -37,8 +37,7 @@ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext
 import { AutoFocusExtension, getExtensionDependencyFromEditor, } from '@lexical/extension';
 import { HistoryExtension } from '@lexical/history';
 import { ServerConnection, ServiceManager } from '@jupyterlab/services';
-import { DatalayerThemeProvider, getThemeConfig, useSystemColorMode, useThemeStore, } from '@datalayer/primer-addons';
-import { Box } from '@primer/react';
+import { Box, DatalayerThemeProvider, getThemeConfig, useSystemColorMode, useThemeStore, } from '@datalayer/primer-addons';
 import { JupyterReactTheme, Kernel, disposeServiceManager, } from '@datalayer/jupyter-react';
 import { ComponentPickerMenuPlugin, JupyterLexicalExtension, JupyterInputOutputPlugin, DraggableBlockPlugin, TableCellResizerPlugin, TableActionMenuPlugin, TableHoverActionsV2Plugin, LexicalConfigProvider, LexicalStatePlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ToolbarPlugin, ToolbarContext, CommentsProvider, DocumentSkeleton, commentTheme, } from '@datalayer/jupyter-lexical';
 import { createWebsocketProvider, LoroCollaborationPlugin, } from '@datalayer/lexical-loro';
@@ -385,14 +384,7 @@ export function EphemeralDocument({ documentId, runtimeName, runtimeOverride, se
         ? themeConfig.themeStyles.dark
         : themeConfig.themeStyles.light;
     const themeBackground = modeStyles.backgroundColor ?? '';
-    return (_jsx(Box, { sx: {
-            flex: 1,
-            minHeight: 0,
-            height: '100%',
-            position: 'relative',
-            overflow: 'hidden',
-            bg: 'canvas.default',
-        }, children: activeServiceManager ? (_jsx(ThemeRoot, { inherit: inheritTheme, colorMode: effectiveColorMode, themeConfig: themeConfig, children: _jsx(JupyterReactTheme, { colormode: resolvedMode, backgroundColor: themeBackground, children: _jsx(Box, { sx: {
+    return (_jsx(Box, { flex: 1, minHeight: 0, height: "100%", position: "relative", overflow: "hidden", bg: "canvas.default", children: activeServiceManager ? (_jsx(ThemeRoot, { inherit: inheritTheme, colorMode: effectiveColorMode, themeConfig: themeConfig, children: _jsx(JupyterReactTheme, { colormode: resolvedMode, backgroundColor: themeBackground, children: _jsx(Box, { sx: {
                         position: 'absolute',
                         inset: 0,
                         display: 'flex',
@@ -486,13 +478,6 @@ export function EphemeralDocument({ documentId, runtimeName, runtimeOverride, se
                     }, children: _jsx(LexicalConfigProvider, { lexicalId: documentId, serviceManager: activeServiceManager, children: _jsx(LexicalExtensionComposer, { extension: extension, contentEditable: null, children: _jsx(CommentsProvider, { children: _jsx(ToolbarContext, { children: _jsxs("div", { className: "editor-shell", children: [showToolbar ? (_jsx(DocumentToolbar, { setIsLinkEditMode: setIsLinkEditMode, extraItems: toolbarExtraItems })) : null, _jsx("div", { className: "editor-container", children: _jsxs("div", { className: "editor-inner", children: [isCollaborative && collaboration ? (_jsx(LoroCollaborationPlugin, { id: collaboration.roomId, providerFactory: createWebsocketProvider, websocketUrl: collaboration.websocketUrl, shouldBootstrap: true, showCollaborators: true, username: collaborationName, cursorColor: collaborationColor, awarenessData: collaborationAwarenessData, onInitialization: onRoomInitialization })) : null, _jsx(LexicalStatePlugin, {}), documentReady ? (_jsx("div", { className: "editor-scroller", children: _jsx("div", { className: "editor", ref: onAnchorRef, children: _jsx(ContentEditable, { className: "editor-input", "aria-label": "Ephemeral document editor" }) }) })) : (_jsx(DocumentSkeleton, { maxWidth: "100%" })), !isCollaborative && (_jsx(OnChangePlugin, { onChange: handleChange })), _jsx(HistoryTogglePlugin, { disabled: isCollaborative }), !isCollaborative && (_jsx(LoadContentPlugin, { content: initialContent })), _jsx(TableCellResizerPlugin, {}), _jsx(TableActionMenuPlugin, {}), _jsx(TableHoverActionsV2Plugin, {}), _jsx(ComponentPickerMenuPlugin, { kernel: documentKernel }), _jsx(JupyterInputOutputPlugin, { kernel: documentKernel }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] }) })] }) }) }) }) }) }) }) })) : isRuntimeStarting ? (
         // The document's shape while its runtime starts, where the document
         // will be — not a wheel, which says nothing about what is coming.
-        _jsx(ThemeRoot, { inherit: inheritTheme, colorMode: effectiveColorMode, themeConfig: themeConfig, children: _jsx(Box, { sx: {
-                    position: 'absolute',
-                    inset: 0,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    padding: 2,
-                    backgroundColor: themeBackground,
-                }, children: _jsx(DocumentSkeleton, { label: "Starting the document", maxWidth: "100%" }) }) })) : null }));
+        _jsx(ThemeRoot, { inherit: inheritTheme, colorMode: effectiveColorMode, themeConfig: themeConfig, children: _jsx(Box, { position: "absolute", inset: 0, display: "flex", flexDirection: "column", padding: 2, backgroundColor: themeBackground, children: _jsx(DocumentSkeleton, { label: "Starting the document", maxWidth: "100%" }) }) })) : null }));
 }
 export default EphemeralDocument;

package/lib/chat/header/ChatHeader.js

@@ -47,23 +47,7 @@ export function ChatHeader({ title, description, connectionState, runtimeBusy =
         disconnected: 'Disconnected',
         error: 'Connection Error',
     };
-    return (_jsx(Box, { sx: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'flex-end',
-            p: 3,
-            borderBottom: '1px solid',
-            borderColor: 'border.default',
-            backgroundColor: 'canvas.subtle',
-        }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(Box, { sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 2,
-                        fontSize: 0,
-                    }, children: [_jsx(Box, { sx: {
-                                display: 'inline-flex',
-                                alignItems: 'center',
-                            }, children: _jsx(KernelIndicator, { state: indicatorState }) }), _jsx(Text, { sx: { color: statusColor }, children: labels[connectionState] }), (connectionState === 'disconnected' ||
+    return (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "flex-end", p: 3, borderBottom: "1px solid", borderColor: "border.default", backgroundColor: "canvas.subtle", children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, fontSize: 0, children: [_jsx(Box, { display: "inline-flex", alignItems: "center", children: _jsx(KernelIndicator, { state: indicatorState }) }), _jsx(Text, { sx: { color: statusColor }, children: labels[connectionState] }), (connectionState === 'disconnected' ||
                             connectionState === 'error') &&
                             onReconnect && (_jsx(IconButton, { icon: SyncIcon, "aria-label": "Reconnect", size: "small", variant: "invisible", onClick: onReconnect }))] }), onDisconnect && connectionState === 'connected' && (_jsx(Button, { variant: "invisible", size: "small", onClick: onDisconnect, children: "Disconnect" })), onLogout && (_jsx(IconButton, { icon: SignOutIcon, "aria-label": "Logout", size: "small", variant: "invisible", onClick: onLogout })), onCollapsePanel && (_jsx(IconButton, { icon: SidebarCollapseIcon, "aria-label": "Collapse panel", size: "small", variant: "invisible", onClick: onCollapsePanel }))] }) }));
 }

package/lib/chat/header/ChatHeaderBase.js

@@ -48,29 +48,7 @@ export function ChatBaseHeader({ title, subtitle, disableReason, brandIcon, head
      * honest rendering of silence is nothing at all.
      */
     const kernelIndicatorElement = kernel ? (_jsx(KernelIndicator, { kernel: kernel, environmentName: kernelEnvironmentName, cpu: kernelCpu, memory: kernelMemory, gpu: kernelGpu, position: "s", bordered: false })) : effectiveIndicatorState ? (_jsx(KernelIndicator, { state: effectiveIndicatorState, environmentName: kernelEnvironmentName, cpu: kernelCpu, memory: kernelMemory, gpu: kernelGpu, position: "s", bordered: false })) : null;
-    return (_jsx(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            bg: 'canvas.default',
-            borderBottom: '1px solid',
-            borderColor: 'border.default',
-        }, children: _jsxs(Box, { sx: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                p: padding,
-            }, children: [_jsxs(Box, { sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        gap: 2,
-                        minWidth: 0,
-                        flex: '1 1 auto',
-                    }, children: [kernelIndicatorPlacement === 'left' && kernelIndicatorElement, brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), (title || subtitle) && (_jsxs(Box, { sx: {
-                                display: 'flex',
-                                flexDirection: 'column',
-                                minWidth: 0,
-                                maxWidth: '100%',
-                            }, children: [title && (_jsx(Heading, { as: "h3", sx: {
+    return (_jsx(Box, { display: "flex", flexDirection: "column", bg: "canvas.default", borderBottom: "1px solid", borderColor: "border.default", children: _jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", p: padding, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, minWidth: 0, flex: "1 1 auto", children: [kernelIndicatorPlacement === 'left' && kernelIndicatorElement, brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), (title || subtitle) && (_jsxs(Box, { display: "flex", flexDirection: "column", minWidth: 0, maxWidth: "100%", children: [title && (_jsx(Heading, { as: "h3", sx: {
                                         fontSize: 2,
                                         fontWeight: 'semibold',
                                         minWidth: 0,
@@ -80,5 +58,5 @@ export function ChatBaseHeader({ title, subtitle, disableReason, brandIcon, head
                                         color: 'fg.muted',
                                         minWidth: 0,
                                         maxWidth: '100%',
-                                    }, children: _jsx(Truncate, { title: subtitle, maxWidth: "40ch", children: subtitle }) }))] })), disableReason && (_jsx(Label, { variant: "attention", sx: { flexShrink: 0 }, children: disableReason })), headerContent, showInformation && (_jsx(IconButton, { icon: InfoIcon, "aria-label": "Information", variant: "invisible", size: "small", onClick: onInformationClick })), kernelIndicatorPlacement === 'center' && kernelIndicatorElement] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }, children: [kernelIndicatorPlacement === 'right' && kernelIndicatorElement, headerButtons?.showNewChat && (_jsx(IconButton, { icon: PlusIcon, "aria-label": "New chat", variant: "invisible", size: "small", onClick: onNewChat })), headerButtons?.showClear && messageCount > 0 && (_jsx(IconButton, { icon: TrashIcon, "aria-label": "Clear messages", variant: "invisible", size: "small", onClick: onClear })), headerButtons?.showSettings && (_jsx(IconButton, { icon: GearIcon, "aria-label": "Settings", variant: "invisible", size: "small", onClick: headerButtons.onSettings })), showEphemeralSurfaceControl && (_jsx(EphemeralSurfaceControl, { mode: ephemeralSurfaceMode, onChange: onEphemeralSurfaceModeChange, enableNotebook: enableEphemeralNotebookOption, enableDocument: enableEphemeralDocumentOption })), chatViewMode && onChatViewModeChange && (_jsx(ChatViewModeToggle, { value: chatViewMode, onChange: onChatViewModeChange, disabledModes: disabledViewModes })), headerActions] })] }) }));
+                                    }, children: _jsx(Truncate, { title: subtitle, maxWidth: "40ch", children: subtitle }) }))] })), disableReason && (_jsx(Label, { variant: "attention", sx: { flexShrink: 0 }, children: disableReason })), headerContent, showInformation && (_jsx(IconButton, { icon: InfoIcon, "aria-label": "Information", variant: "invisible", size: "small", onClick: onInformationClick })), kernelIndicatorPlacement === 'center' && kernelIndicatorElement] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, flexShrink: 0, children: [kernelIndicatorPlacement === 'right' && kernelIndicatorElement, headerButtons?.showNewChat && (_jsx(IconButton, { icon: PlusIcon, "aria-label": "New chat", variant: "invisible", size: "small", onClick: onNewChat })), headerButtons?.showClear && messageCount > 0 && (_jsx(IconButton, { icon: TrashIcon, "aria-label": "Clear messages", variant: "invisible", size: "small", onClick: onClear })), headerButtons?.showSettings && (_jsx(IconButton, { icon: GearIcon, "aria-label": "Settings", variant: "invisible", size: "small", onClick: headerButtons.onSettings })), showEphemeralSurfaceControl && (_jsx(EphemeralSurfaceControl, { mode: ephemeralSurfaceMode, onChange: onEphemeralSurfaceModeChange, enableNotebook: enableEphemeralNotebookOption, enableDocument: enableEphemeralDocumentOption })), chatViewMode && onChatViewModeChange && (_jsx(ChatViewModeToggle, { value: chatViewMode, onChange: onChatViewModeChange, disabledModes: disabledViewModes })), headerActions] })] }) }));
 }

package/lib/chat/header/ChatViewModeToggle.js

@@ -12,14 +12,7 @@ export const VIEW_MODE_ICONS = {
     sidebar: SidebarExpandIcon,
 };
 export function ChatViewModeToggle({ value, onChange, disabledModes = [], tooltipDirection = 'n', }) {
-    return (_jsx(Box, { role: "group", "aria-label": "Display mode", "data-chat-view-mode-toggle": "", sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            bg: 'neutral.muted',
-            borderRadius: '6px',
-            p: '2px',
-            gap: '1px',
-        }, children: CHAT_VIEW_MODES.map(({ mode, label }) => {
+    return (_jsx(Box, { role: "group", "aria-label": "Display mode", "data-chat-view-mode-toggle": "", display: "inline-flex", alignItems: "center", bg: "neutral.muted", borderRadius: "6px", p: "2px", gap: "1px", children: CHAT_VIEW_MODES.map(({ mode, label }) => {
             const ModeIcon = VIEW_MODE_ICONS[mode];
             const selected = value === mode;
             /* Greyed rather than left out: the person sees the mode exists, and
@@ -33,26 +26,11 @@ export function ChatViewModeToggle({ value, onChange, disabledModes = [], toolti
                         if (!disabled) {
                             onChange(mode);
                         }
-                    }, sx: {
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        width: 26,
-                        height: 24,
-                        borderRadius: '4px',
-                        border: 'none',
-                        cursor: disabled ? 'not-allowed' : 'pointer',
-                        opacity: disabled ? 0.45 : 1,
-                        bg: selected ? 'canvas.default' : 'transparent',
-                        boxShadow: selected ? 'shadow.small' : 'none',
-                        color: selected ? 'fg.default' : 'fg.muted',
-                        transition: 'all 0.15s ease',
-                        '&:hover': disabled
-                            ? {}
-                            : {
-                                color: 'fg.default',
-                                bg: selected ? 'canvas.default' : 'neutral.subtle',
-                            },
-                    }, children: _jsx(ModeIcon, { size: 14 }) }) }, mode));
+                    }, display: "inline-flex", alignItems: "center", justifyContent: "center", width: 26, height: 24, borderRadius: "4px", border: "none", cursor: disabled ? 'not-allowed' : 'pointer', opacity: disabled ? 0.45 : 1, bg: selected ? 'canvas.default' : 'transparent', boxShadow: selected ? 'shadow.small' : 'none', color: selected ? 'fg.default' : 'fg.muted', transition: "all 0.15s ease", hover: disabled
+                        ? {}
+                        : {
+                            color: 'fg.default',
+                            bg: selected ? 'canvas.default' : 'neutral.subtle',
+                        }, children: _jsx(ModeIcon, { size: 14 }) }) }, mode));
         }) }));
 }

package/lib/chat/indicators/McpStatusIndicator.js

@@ -94,17 +94,8 @@ export function McpStatusIndicator({ data: wsData, apiBase, authToken, }) {
                 background: 'none',
                 cursor: 'default',
                 lineHeight: 0,
-            }, children: _jsx(Box, { as: "span", sx: {
-                    display: 'inline-block',
-                    width: 12,
-                    height: 12,
-                    borderRadius: '50%',
-                    bg: MCP_STATUS_COLORS[aggregate],
-                    flexShrink: 0,
-                    ...(aggregate === 'starting' && {
-                        animation: 'mcp-pulse 1.5s ease-in-out infinite',
-                    }),
-                    '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
-                } }) }) }));
+            }, children: _jsx(Box, { as: "span", display: "inline-block", width: 12, height: 12, borderRadius: "50%", bg: MCP_STATUS_COLORS[aggregate], flexShrink: 0, animation: aggregate === 'starting'
+                    ? 'mcp-pulse 1.5s ease-in-out infinite'
+                    : undefined, reducedMotion: { animation: 'none' } }) }) }));
 }
 export default McpStatusIndicator;