@datalayer/agent-runtimes 1.0.5 → 1.0.7

package/lib/agent-node/themeStore.d.ts

@@ -0,0 +1,3 @@
+import { type StoreApi, type UseBoundStore } from 'zustand';
+import { type ThemeState } from '@datalayer/primer-addons';
+export declare const useAgentNodeThemeStore: UseBoundStore<StoreApi<ThemeState>>;

package/lib/agent-node/themeStore.js

@@ -0,0 +1,156 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { create } from 'zustand';
+import { createJSONStorage, persist } from 'zustand/middleware';
+import { themeConfigs, } from '@datalayer/primer-addons';
+const STORAGE_KEY = 'agent-runtimes-agent-node-theme';
+const COOKIE_MAX_AGE_SECONDS = 60 * 60 * 24 * 365;
+const colorModeCycle = {
+    light: 'dark',
+    dark: 'auto',
+    auto: 'light',
+};
+const normalizeThemeVariant = (value) => {
+    // Backward compatibility: "ocean" maps to the Earth theme variant.
+    if (value === 'ocean') {
+        return 'earth';
+    }
+    if (value === 'datalayer' ||
+        value === 'spatial' ||
+        value === 'lovely' ||
+        value === 'matrix' ||
+        value === 'earth') {
+        return value;
+    }
+    return 'earth';
+};
+const cookieStorage = {
+    getItem: (name) => {
+        if (typeof document === 'undefined') {
+            return null;
+        }
+        const encodedName = `${encodeURIComponent(name)}=`;
+        const parts = document.cookie.split('; ');
+        for (const part of parts) {
+            if (part.startsWith(encodedName)) {
+                return decodeURIComponent(part.slice(encodedName.length));
+            }
+        }
+        return null;
+    },
+    setItem: (name, value) => {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; path=/; max-age=${COOKIE_MAX_AGE_SECONDS}; samesite=lax`;
+    },
+    removeItem: (name) => {
+        if (typeof document === 'undefined') {
+            return;
+        }
+        document.cookie = `${encodeURIComponent(name)}=; path=/; max-age=0; samesite=lax`;
+    },
+};
+export const useAgentNodeThemeStore = create()(persist(set => ({
+    // "ocean dark" default: Earth theme (ocean palette) + dark mode.
+    colorMode: 'dark',
+    theme: 'earth',
+    activeVariant: null,
+    variants: {},
+    toggleColorMode: () => set(state => {
+        const next = colorModeCycle[state.colorMode];
+        if (state.activeVariant && state.variants[state.activeVariant]) {
+            return {
+                colorMode: next,
+                variants: {
+                    ...state.variants,
+                    [state.activeVariant]: {
+                        ...state.variants[state.activeVariant],
+                        colorMode: next,
+                    },
+                },
+            };
+        }
+        return { colorMode: next };
+    }),
+    setColorMode: (mode) => set(state => {
+        if (state.activeVariant && state.variants[state.activeVariant]) {
+            return {
+                colorMode: mode,
+                variants: {
+                    ...state.variants,
+                    [state.activeVariant]: {
+                        ...state.variants[state.activeVariant],
+                        colorMode: mode,
+                    },
+                },
+            };
+        }
+        return { colorMode: mode };
+    }),
+    setTheme: (theme, applyDefaultColorMode = true) => set(state => {
+        const normalizedTheme = normalizeThemeVariant(theme);
+        const nextColorMode = applyDefaultColorMode
+            ? themeConfigs[normalizedTheme].defaultColorMode
+            : state.colorMode;
+        if (state.activeVariant && state.variants[state.activeVariant]) {
+            return {
+                theme: normalizedTheme,
+                colorMode: nextColorMode,
+                variants: {
+                    ...state.variants,
+                    [state.activeVariant]: {
+                        theme: normalizedTheme,
+                        colorMode: nextColorMode,
+                    },
+                },
+            };
+        }
+        return { theme: normalizedTheme, colorMode: nextColorMode };
+    }),
+    registerVariants: defs => set(state => {
+        const merged = { ...state.variants };
+        for (const [key, val] of Object.entries(defs)) {
+            if (!merged[key]) {
+                merged[key] = val;
+            }
+        }
+        return { variants: merged };
+    }),
+    setVariant: variant => set(state => {
+        const variantState = state.variants[variant];
+        if (!variantState) {
+            return { activeVariant: variant };
+        }
+        return {
+            activeVariant: variant,
+            theme: normalizeThemeVariant(variantState.theme),
+            colorMode: variantState.colorMode,
+        };
+    }),
+}), {
+    name: STORAGE_KEY,
+    version: 1,
+    storage: createJSONStorage(() => cookieStorage),
+    partialize: state => ({
+        colorMode: state.colorMode,
+        theme: state.theme,
+        activeVariant: state.activeVariant,
+        variants: state.variants,
+    }),
+    merge: (persisted, current) => {
+        const persistedState = (persisted ?? {});
+        const persistedTheme = normalizeThemeVariant(persistedState.theme);
+        return {
+            ...current,
+            ...persistedState,
+            theme: persistedTheme,
+            variants: {
+                ...current.variants,
+                ...(persistedState.variants ?? {}),
+            },
+        };
+    },
+}));

package/lib/agent-node-main.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/agent-node-main.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { createRoot } from 'react-dom/client';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { AgentNode } from './AgentNode';
+const queryClient = new QueryClient();
+const rootElement = document.getElementById('root');
+if (rootElement) {
+    createRoot(rootElement).render(_jsx(MemoryRouter, { initialEntries: ['/'], children: _jsx(QueryClientProvider, { client: queryClient, children: _jsx(AgentNode, {}) }) }));
+}

package/lib/chat/Chat.js

@@ -18,7 +18,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  *
  * @module chat/Chat
  */
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useState, useRef } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Text, Button, Spinner } from '@primer/react';
 import { AlertIcon, SyncIcon } from '@primer/octicons-react';
@@ -63,22 +63,25 @@ const queryClient = new QueryClient();
  * Get transport endpoint path
  */
 function getEndpointPath(protocol, agentId) {
+    const resolvedAgentId = typeof agentId === 'string' && agentId.trim().length > 0
+        ? agentId.trim()
+        : 'default';
     switch (protocol) {
         case 'vercel-ai':
-            return `/api/v1/vercel-ai/${agentId}`;
+            return `/api/v1/vercel-ai/${resolvedAgentId}`;
         case 'vercel-ai-jupyter':
             // Jupyter server endpoint - same protocol as vercel-ai
             // Note: no leading slash - will be joined with baseUrl that may have trailing slash
             return 'agent_runtimes/chat';
         case 'ag-ui':
-            return `/api/v1/ag-ui/${agentId}/`;
+            return `/api/v1/ag-ui/${resolvedAgentId}/`;
         case 'a2a':
             // A2A requires trailing slash for FastA2A compatibility
-            return `/api/v1/a2a/agents/${agentId}/`;
+            return `/api/v1/a2a/agents/${resolvedAgentId}/`;
         case 'acp':
-            return `/api/v1/acp/ws/${agentId}`;
+            return `/api/v1/acp/ws/${resolvedAgentId}`;
         default:
-            return `/api/v1/agents/${agentId}/chat`;
+            return `/api/v1/agents/${resolvedAgentId}/chat`;
     }
 }
 /**
@@ -134,11 +137,17 @@ 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, }) {
+    const resolvedAgentId = typeof agentId === 'string' && agentId.trim().length > 0
+        ? agentId.trim()
+        : 'default';
     const [error, setError] = useState(null);
     const [isInitializing, setIsInitializing] = useState(true);
     const [showDetails, setShowDetails] = useState(false);
     const [messageCount, setMessageCount] = useState(0);
     const [focusTrigger, setFocusTrigger] = useState(0);
+    const renderCountRef = useRef(0);
+    renderCountRef.current += 1;
+    console.log(`[AgentRuntimes][Chat] render count: ${renderCountRef.current}`);
     // Get connected identities to pass to backend for skill execution
     const connectedIdentities = useConnectedIdentities();
     // Map identities to the format expected by ChatBase
@@ -161,8 +170,9 @@ export function Chat({ protocol: transport, extensions: _extensions, baseUrl = '
             return () => clearTimeout(timer);
         }
     }, [showDetails]);
-    // Build protocol config based on transport
-    const protocolConfig = useMemo(() => {
+    // Build protocol config based on transport.
+    // Keep this pure: never call React state setters inside this memo.
+    const protocolConfigResult = useMemo(() => {
         try {
             let endpoint;
             let authToken = authTokenProp;
@@ -201,45 +211,56 @@ export function Chat({ protocol: transport, extensions: _extensions, baseUrl = '
                     break;
                 }
                 case 'acp': {
-                    endpoint = `${baseUrl}${getEndpointPath(transport, agentId)}`;
+                    endpoint = `${baseUrl}${getEndpointPath(transport, resolvedAgentId)}`;
                     const acpWsUrl = wsUrl ||
-                        `${baseUrl.replace('http', 'ws')}/api/v1/acp/ws/${agentId}`;
+                        `${baseUrl.replace('http', 'ws')}/api/v1/acp/ws/${resolvedAgentId}`;
                     options = { wsUrl: acpWsUrl };
                     break;
                 }
                 default: {
-                    endpoint = `${baseUrl}${getEndpointPath(transport, agentId)}`;
+                    endpoint = `${baseUrl}${getEndpointPath(transport, resolvedAgentId)}`;
                     break;
                 }
             }
             return {
-                type: getProtocolType(transport),
-                endpoint,
-                agentId,
-                authToken,
-                options,
-                // Enable config query for all protocols to fetch models and tools
-                enableConfigQuery: true,
-                // For Jupyter-based transports, use Jupyter requestAPI (configEndpoint undefined)
-                // For FastAPI-based transports, use direct fetch to the configure endpoint
-                configEndpoint: transport === 'vercel-ai-jupyter'
-                    ? undefined // Use Jupyter requestAPI
-                    : `${baseUrl}/api/v1/configure`,
+                config: {
+                    type: getProtocolType(transport),
+                    endpoint,
+                    agentId: resolvedAgentId,
+                    authToken,
+                    options,
+                    // Enable config query for all protocols to fetch models and tools
+                    enableConfigQuery: true,
+                    // For Jupyter-based transports, use Jupyter requestAPI (configEndpoint undefined)
+                    // For FastAPI-based transports, use direct fetch to the configure endpoint
+                    configEndpoint: transport === 'vercel-ai-jupyter'
+                        ? undefined // Use Jupyter requestAPI
+                        : `${baseUrl}/api/v1/configure`,
+                },
+                error: null,
             };
         }
         catch (err) {
             console.error('[Chat] Error building protocol config:', err);
-            setError(err instanceof Error ? err.message : 'Failed to configure');
-            return undefined;
+            return {
+                config: undefined,
+                error: err instanceof Error ? err.message : 'Failed to configure',
+            };
         }
-    }, [transport, baseUrl, wsUrl, agentId, authTokenProp]);
+    }, [transport, baseUrl, wsUrl, resolvedAgentId, authTokenProp]);
+    const protocolConfig = protocolConfigResult.config;
     // Set initialized once protocol config is built
     useEffect(() => {
+        if (protocolConfigResult.error) {
+            setError(protocolConfigResult.error);
+            setIsInitializing(false);
+            return;
+        }
         if (protocolConfig) {
             setIsInitializing(false);
             setError(null);
         }
-    }, [protocolConfig]);
+    }, [protocolConfig, protocolConfigResult.error]);
     // Handle reconnect
     const handleReconnect = () => {
         setError(null);

package/lib/chat/ChatFloating.js

@@ -431,7 +431,7 @@ export function ChatFloating({ endpoint, protocol: protocolProp, useStore: useSt
                 }, children: _jsx(ChatBase, { title: title, showHeader: showHeader, useStore: useStoreMode, protocol: protocol, autoFocus: isOpen, focusTrigger: focusTrigger, brandIcon: brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), headerButtons: {
                         showNewChat: showNewChatButton,
                         showClear: showClearButton && messages.length > 0,
-                        showSettings: showSettingsButton,
+                        showSettings: showSettingsButton && !!onSettingsClick,
                         onNewChat: handleNewChat,
                         onClear: handleClear,
                         onSettings: onSettingsClick,

package/lib/chat/ChatSidebar.js

@@ -12,10 +12,10 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * @module chat/ChatSidebar
  */
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { IconButton, Text } from '@primer/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 { AiAgentIcon } from '@datalayer/icons-react';
 import { useChatKeyboardShortcuts, getShortcutDisplay, } from '@datalayer/core/lib/hooks';
 import { ChatBase } from './base/ChatBase';
 import { useChatStore, useChatOpen, useChatMessages, } from '../stores/chatStore';
@@ -45,6 +45,37 @@ export function ChatSidebar({ title = 'Chat', protocol: protocolProp, defaultOpe
     const sidebarRef = useRef(null);
     const inputRef = useRef(null);
     const isMobile = useIsMobile();
+    const [desktopViewportHeight, setDesktopViewportHeight] = useState(null);
+    // Compute available desktop height from the element's top position so the
+    // sidebar always fits within the visible viewport.
+    useEffect(() => {
+        if (isMobile) {
+            setDesktopViewportHeight(null);
+            return;
+        }
+        const updateHeight = () => {
+            const el = sidebarRef.current;
+            if (!el)
+                return;
+            const rect = el.getBoundingClientRect();
+            const viewportHeight = window.visualViewport?.height || window.innerHeight || 0;
+            const bottomPadding = 4; // keep a small breathing space from viewport edge
+            const available = Math.max(220, Math.floor(viewportHeight - rect.top - bottomPadding));
+            setDesktopViewportHeight(prev => prev !== null && Math.abs(prev - available) < 2 ? prev : available);
+        };
+        updateHeight();
+        window.addEventListener('resize', updateHeight);
+        window.addEventListener('scroll', updateHeight, true);
+        const observer = new ResizeObserver(() => updateHeight());
+        if (sidebarRef.current) {
+            observer.observe(sidebarRef.current);
+        }
+        return () => {
+            window.removeEventListener('resize', updateHeight);
+            window.removeEventListener('scroll', updateHeight, true);
+            observer.disconnect();
+        };
+    }, [isMobile]);
     // Initialize open state from defaultOpen
     useEffect(() => {
         setOpen(defaultOpen);
@@ -137,58 +168,45 @@ export function ChatSidebar({ title = 'Chat', protocol: protocolProp, defaultOpe
                 : SidebarExpandIcon, "aria-label": `Close sidebar${shortcutHint ? ` (${shortcutHint})` : ''}`, onClick: handleToggle, variant: "invisible", size: "small" }));
     // Collapsed state
     if (!isOpen) {
-        return (_jsxs(Box, { ref: sidebarRef, className: className, sx: {
+        const collapsedLauncher = (_jsx(Box, { ref: sidebarRef, className: className, sx: {
                 position: 'fixed',
                 top: 12,
-                ...(position === 'right' ? { right: 12 } : { left: 12 }),
+                ...(position === 'right'
+                    ? { right: 'env(safe-area-inset-right)' }
+                    : { left: 'env(safe-area-inset-left)' }),
                 zIndex: 1001,
                 display: 'flex',
                 flexDirection: 'column',
                 alignItems: 'center',
                 gap: 2,
-            }, children: [_jsxs(Box, { sx: { position: 'relative' }, children: [_jsx(IconButton, { icon: position === 'right' ? SidebarExpandIcon : SidebarCollapseIcon, "aria-label": `Open chat${shortcutHint ? ` (${shortcutHint})` : ''}`, onClick: handleToggle, variant: "default", size: "small", sx: {
-                                bg: 'canvas.default',
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                                boxShadow: 'shadow.small',
-                            } }), messages.length > 0 && (_jsx(Box, { sx: {
-                                position: 'absolute',
-                                top: -6,
-                                right: -6,
-                                minWidth: 16,
-                                height: 16,
-                                px: 1,
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                                bg: 'accent.emphasis',
-                                color: 'fg.onEmphasis',
-                                borderRadius: '50%',
-                                fontSize: '10px',
-                                fontWeight: 'bold',
-                                boxShadow: 'shadow.small',
-                            }, children: messages.length > 99 ? '99+' : messages.length }))] }), _jsx(Box, { sx: {
-                        width: 32,
-                        height: 32,
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        bg: 'canvas.default',
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        borderRadius: 2,
-                        boxShadow: 'shadow.small',
-                    }, children: brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }) }), shortcutHint && (_jsx(Box, { sx: {
-                        px: 1,
-                        py: '2px',
-                        bg: 'canvas.default',
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        color: 'fg.muted',
-                        borderRadius: 1,
-                        fontSize: 0,
-                        boxShadow: 'shadow.small',
-                    }, children: _jsx(Text, { sx: { fontSize: '10px', fontFamily: 'mono' }, children: shortcutHint }) }))] }));
+            }, children: _jsxs(Box, { sx: { position: 'relative' }, children: [_jsx(IconButton, { icon: position === 'right' ? SidebarExpandIcon : SidebarCollapseIcon, "aria-label": "Open chat", description: shortcutHint ? `Open chat (${shortcutHint})` : 'Open chat', onClick: handleToggle, variant: "default", size: "small", sx: {
+                            bg: 'canvas.default',
+                            border: '1px solid',
+                            borderColor: 'border.default',
+                            boxShadow: 'shadow.small',
+                        } }), messages.length > 0 && (_jsx(Box, { sx: {
+                            position: 'absolute',
+                            top: -6,
+                            right: -6,
+                            minWidth: 16,
+                            height: 16,
+                            px: 1,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            bg: 'accent.emphasis',
+                            color: 'fg.onEmphasis',
+                            borderRadius: '50%',
+                            fontSize: '10px',
+                            fontWeight: 'bold',
+                            boxShadow: 'shadow.small',
+                        }, children: messages.length > 99 ? '99+' : messages.length }))] }) }));
+        // Render the collapsed launcher in a body portal so it stays pinned to the
+        // viewport edge even when ancestors use transforms/positioning contexts.
+        if (typeof document !== 'undefined' && document.body) {
+            return createPortal(collapsedLauncher, document.body);
+        }
+        return collapsedLauncher;
     }
     // Mobile full-screen overlay
     const mobileStyles = isMobile
@@ -217,21 +235,35 @@ export function ChatSidebar({ title = 'Chat', protocol: protocolProp, defaultOpe
                     position: 'relative',
                     display: 'flex',
                     flexDirection: 'column',
+                    alignSelf: 'stretch',
                     width: isMobile
                         ? '100%'
                         : typeof width === 'number'
                             ? `${width}px`
                             : width,
-                    height: '100%',
+                    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',
                     borderLeft: !isMobile && position === 'right' ? '1px solid' : 'none',
                     borderRight: !isMobile && position === 'left' ? '1px solid' : 'none',
                     borderColor: 'border.default',
+                    overflow: 'hidden',
                     ...mobileStyles,
                 }, children: _jsx(ChatBase, { title: title, showHeader: showHeader, brandIcon: brandIcon, protocol: protocolProp, headerButtons: {
                         showNewChat: showNewChatButton,
                         showClear: showClearButton && messages.length > 0,
-                        showSettings: showSettingsButton,
+                        showSettings: showSettingsButton && !!onSettingsClick,
                         onNewChat: handleNewChat,
                         onClear: handleClear,
                         onSettings: onSettingsClick,