@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/chat/display/FloatingBrandButton.js

@@ -10,6 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @module chat/display/FloatingBrandButton
  */
 import { useState } from 'react';
+import { createPortal } from 'react-dom';
 import { Box, IconButton, Tooltip, Text } from '@primer/react';
 import { CommentDiscussionIcon, XIcon } from '@primer/octicons-react';
 /**
@@ -26,7 +27,7 @@ export function FloatingBrandButton({ isOpen, onToggle, position = 'bottom-right
         'top-left': { top: 20, left: 20 },
     };
     const posStyle = positionStyles[position];
-    return (_jsx(Box, { className: className, sx: {
+    const floatingButton = (_jsx(Box, { className: className, sx: {
             position: 'fixed',
             zIndex: 1000,
             ...posStyle,
@@ -84,5 +85,11 @@ export function FloatingBrandButton({ isOpen, onToggle, position = 'bottom-right
                             },
                         },
                     } }))] }) }));
+    // Render in a body portal so fixed positioning stays anchored to the
+    // actual viewport edge even inside transformed containers.
+    if (typeof document !== 'undefined' && document.body) {
+        return createPortal(floatingButton, document.body);
+    }
+    return floatingButton;
 }
 export default FloatingBrandButton;

package/lib/chat/header/ChatHeader.d.ts

@@ -9,6 +9,8 @@ export interface ChatHeaderProps {
     description?: string;
     /** Current connection state */
     connectionState: ConnectionState;
+    /** Marks the runtime as actively executing for busy-state animation. */
+    runtimeBusy?: boolean;
     /** Callback when reconnect is clicked */
     onReconnect?: () => void;
     /** Callback when disconnect is clicked */
@@ -36,5 +38,5 @@ export interface ChatHeaderProps {
  * />
  * ```
  */
-export declare function ChatHeader({ title, description, connectionState, onReconnect, onDisconnect, onLogout, onCollapsePanel, }: ChatHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatHeader({ title, description, connectionState, runtimeBusy, onReconnect, onDisconnect, onLogout, onCollapsePanel, }: ChatHeaderProps): import("react/jsx-runtime").JSX.Element;
 export default ChatHeader;

package/lib/chat/header/ChatHeader.js

@@ -10,6 +10,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { Text, IconButton, Button } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
+import { KernelIndicator, KERNEL_STATE_VISUALS, } from '@datalayer/jupyter-react';
 import { SyncIcon, SignOutIcon, SidebarCollapseIcon, } from '@primer/octicons-react';
 /**
  * Chat header component with connection status indicator.
@@ -29,13 +30,17 @@ import { SyncIcon, SignOutIcon, SidebarCollapseIcon, } from '@primer/octicons-re
  * />
  * ```
  */
-export function ChatHeader({ title, description, connectionState, onReconnect, onDisconnect, onLogout, onCollapsePanel, }) {
-    const colors = {
-        connected: 'success.fg',
-        connecting: 'attention.fg',
-        disconnected: 'neutral.fg',
-        error: 'danger.fg',
-    };
+export function ChatHeader({ title, description, connectionState, runtimeBusy = false, onReconnect, onDisconnect, onLogout, onCollapsePanel, }) {
+    const indicatorState = connectionState === 'connected'
+        ? runtimeBusy
+            ? 'connected-busy'
+            : 'connected-idle'
+        : connectionState === 'connecting'
+            ? 'connecting'
+            : connectionState === 'error'
+                ? 'connected-dead'
+                : 'disconnected';
+    const statusColor = KERNEL_STATE_VISUALS[indicatorState].color;
     const labels = {
         connected: 'Connected',
         connecting: 'Connecting...',
@@ -56,11 +61,9 @@ export function ChatHeader({ title, description, connectionState, onReconnect, o
                         gap: 2,
                         fontSize: 0,
                     }, children: [_jsx(Box, { sx: {
-                                width: 8,
-                                height: 8,
-                                borderRadius: '50%',
-                                backgroundColor: colors[connectionState],
-                            } }), _jsx(Text, { sx: { color: colors[connectionState] }, children: labels[connectionState] }), (connectionState === 'disconnected' ||
+                                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.d.ts

@@ -8,20 +8,44 @@
  * @module chat/header/ChatHeaderBase
  */
 import { type ReactNode } from 'react';
+import { type ExecutionState } from '@datalayer/jupyter-react';
+import type { IKernelConnection } from '@jupyterlab/services/lib/kernel/kernel';
 import type { ChatViewMode, HeaderButtonsConfig } from '../../types/chat';
 import type { SandboxStatusData } from '../../types/context';
+import type { SandboxWsStatus } from '../../types/sandbox';
+type RuntimeStatus = SandboxStatusData | SandboxWsStatus;
+export declare function toRuntimeExecutionState(runtimeStatus?: RuntimeStatus | null): ExecutionState | undefined;
 export interface ChatBaseHeaderProps {
     title?: string;
+    subtitle?: string;
     brandIcon?: ReactNode;
     headerContent?: ReactNode;
     headerActions?: ReactNode;
     showInformation?: boolean;
     onInformationClick?: () => void;
     padding: number;
-    /** Sandbox status from the backend */
-    sandboxStatus?: SandboxStatusData;
-    /** Callback to interrupt sandbox code execution */
-    onSandboxInterrupt: () => void;
+    /** Optional kernel indicator state override from notebook runtime. */
+    kernelIndicatorState?: ExecutionState;
+    /**
+     * Runtime status from agent-runtimes sandbox status stream.
+     * Uses the same execution-state model as KernelIndicator.
+     */
+    runtimeStatus?: RuntimeStatus | null;
+    /**
+     * Live kernel connection from the notebook runtime. When provided,
+     * the chat header renders the same `<KernelIndicator>` as the notebook
+     * toolbar — subscribing to the kernel's live signals so the colour and
+     * tooltip stay in sync with the notebook indicator.
+     */
+    kernel?: IKernelConnection | null;
+    /** Optional environment name shown in indicator details. */
+    kernelEnvironmentName?: string;
+    /** Optional CPU info shown in indicator details. */
+    kernelCpu?: string;
+    /** Optional memory info shown in indicator details. */
+    kernelMemory?: string;
+    /** Optional GPU info shown in indicator details. */
+    kernelGpu?: string;
     /** Header button configuration */
     headerButtons?: HeaderButtonsConfig;
     /** Current count of messages (used to conditionally show clear button) */
@@ -35,4 +59,5 @@ export interface ChatBaseHeaderProps {
     /** Callback when view mode changes */
     onChatViewModeChange?: (mode: ChatViewMode) => void;
 }
-export declare function ChatBaseHeader({ title, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, sandboxStatus, onSandboxInterrupt, headerButtons, messageCount, onNewChat, onClear, chatViewMode, onChatViewModeChange, }: ChatBaseHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatBaseHeader({ title, subtitle, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, kernelIndicatorState, runtimeStatus, kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, headerButtons, messageCount, onNewChat, onClear, chatViewMode, onChatViewModeChange, }: ChatBaseHeaderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/chat/header/ChatHeaderBase.js

@@ -1,12 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Heading, IconButton, Truncate } from '@primer/react';
+import { Heading, IconButton, Text, Truncate } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { PlusIcon, TrashIcon, GearIcon, CircleIcon, SquareFillIcon, CommentDiscussionIcon, DeviceMobileIcon, SidebarExpandIcon, InfoIcon, } from '@primer/octicons-react';
+import { KernelIndicator } from '@datalayer/jupyter-react';
+import { PlusIcon, TrashIcon, GearIcon, CommentDiscussionIcon, DeviceMobileIcon, SidebarExpandIcon, InfoIcon, } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
+export function toRuntimeExecutionState(runtimeStatus) {
+    if (!runtimeStatus) {
+        return undefined;
+    }
+    if ('available' in runtimeStatus && runtimeStatus.available === false) {
+        return undefined;
+    }
+    if (runtimeStatus.variant === 'unavailable' ||
+        runtimeStatus.variant === 'error') {
+        return undefined;
+    }
+    if (runtimeStatus.sandbox_running === false) {
+        return 'disconnected';
+    }
+    if (runtimeStatus.is_executing === true) {
+        return 'connected-busy';
+    }
+    if (runtimeStatus.sandbox_running === true) {
+        return 'connected-idle';
+    }
+    return undefined;
+}
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export function ChatBaseHeader({ title, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, sandboxStatus, onSandboxInterrupt, headerButtons, messageCount, onNewChat, onClear, chatViewMode, onChatViewModeChange, }) {
+export function ChatBaseHeader({ title, subtitle, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, kernelIndicatorState, runtimeStatus, kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, headerButtons, messageCount, onNewChat, onClear, chatViewMode, onChatViewModeChange, }) {
+    const effectiveIndicatorState = kernelIndicatorState ?? toRuntimeExecutionState(runtimeStatus);
     return (_jsx(Box, { sx: {
             display: 'flex',
             flexDirection: 'column',
@@ -23,21 +47,22 @@ export function ChatBaseHeader({ title, brandIcon, headerContent, headerActions,
                         gap: 2,
                         minWidth: 0,
                         flex: '1 1 auto',
-                    }, children: [brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), title && (_jsx(Heading, { as: "h3", sx: {
-                                fontSize: 2,
-                                fontWeight: 'semibold',
+                    }, children: [brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), (title || subtitle) && (_jsxs(Box, { sx: {
+                                display: 'flex',
+                                flexDirection: 'column',
                                 minWidth: 0,
                                 maxWidth: '100%',
-                            }, children: _jsx(Truncate, { title: title, maxWidth: "28ch", children: title }) })), headerContent, showInformation && (_jsx(IconButton, { icon: InfoIcon, "aria-label": "Information", variant: "invisible", size: "small", onClick: onInformationClick }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }, children: [sandboxStatus?.available &&
-                            sandboxStatus?.sandbox_running &&
-                            (sandboxStatus.is_executing ? (_jsx(IconButton, { icon: SquareFillIcon, "aria-label": "Interrupt code execution", variant: "invisible", size: "small", sx: { color: 'danger.fg' }, onClick: onSandboxInterrupt })) : (_jsx(Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    width: 28,
-                                    height: 28,
-                                    color: 'fg.subtle',
-                                }, title: "Code sandbox ready", children: _jsx(CircleIcon, { size: 12 }) }))), headerButtons?.showNewChat && (_jsx(IconButton, { icon: PlusIcon, "aria-label": "New chat", variant: "invisible", size: "small", onClick: 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 })), chatViewMode && onChatViewModeChange && (_jsx(Box, { sx: {
+                            }, children: [title && (_jsx(Heading, { as: "h3", sx: {
+                                        fontSize: 2,
+                                        fontWeight: 'semibold',
+                                        minWidth: 0,
+                                        maxWidth: '100%',
+                                    }, children: _jsx(Truncate, { title: title, maxWidth: "28ch", children: title }) })), subtitle && (_jsx(Text, { sx: {
+                                        fontSize: 0,
+                                        color: 'fg.muted',
+                                        minWidth: 0,
+                                        maxWidth: '100%',
+                                    }, children: _jsx(Truncate, { title: subtitle, maxWidth: "40ch", children: subtitle }) }))] })), headerContent, showInformation && (_jsx(IconButton, { icon: InfoIcon, "aria-label": "Information", variant: "invisible", size: "small", onClick: onInformationClick }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }, children: [kernel ? (_jsx(KernelIndicator, { kernel: kernel, environmentName: kernelEnvironmentName, cpu: kernelCpu, memory: kernelMemory, gpu: kernelGpu, position: "sw", bordered: false })) : (_jsx(KernelIndicator, { state: effectiveIndicatorState ?? 'undefined', environmentName: kernelEnvironmentName, cpu: kernelCpu, memory: kernelMemory, gpu: kernelGpu, position: "sw", bordered: false })), 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 })), chatViewMode && onChatViewModeChange && (_jsx(Box, { sx: {
                                 display: 'inline-flex',
                                 alignItems: 'center',
                                 bg: 'neutral.muted',

package/lib/chat/indicators/McpStatusIndicator.d.ts

@@ -1,9 +1,12 @@
+import type { McpToolsetsStatusResponse } from '../../types/mcp';
 export interface McpStatusIndicatorProps {
-    /** API base URL (e.g. "http://127.0.0.1:8765"). Defaults to
-     *  the current host on non-localhost, or localhost:8765. */
+    /** Pre-fetched MCP status data pushed via WebSocket.  When provided the
+     *  component will NOT poll the REST endpoint. */
+    data?: McpToolsetsStatusResponse | null;
+    /** @deprecated — Only used when `data` is not provided. */
     apiBase?: string;
-    /** Optional auth token for authenticated requests (e.g. K8s ingress). */
+    /** @deprecated — Only used when `data` is not provided. */
     authToken?: string;
 }
-export declare function McpStatusIndicator({ apiBase, authToken, }: McpStatusIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function McpStatusIndicator({ data: wsData, apiBase, authToken, }: McpStatusIndicatorProps): import("react/jsx-runtime").JSX.Element;
 export default McpStatusIndicator;

package/lib/chat/indicators/McpStatusIndicator.js

@@ -21,19 +21,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo } from 'react';
 import { Tooltip } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { useQuery } from '@tanstack/react-query';
 import { MCP_STATUS_COLORS, MCP_STATUS_LABELS } from '../../types/mcp';
 /* ── Helpers ───────────────────────────────────────────── */
-function getApiBase(apiBase) {
-    if (apiBase)
-        return apiBase;
-    if (typeof window === 'undefined')
-        return '';
-    const host = window.location.hostname;
-    return host === 'localhost' || host === '127.0.0.1'
-        ? 'http://127.0.0.1:8765'
-        : '';
-}
 function deriveAggregate(servers) {
     if (!servers || servers.length === 0)
         return 'none';
@@ -47,7 +36,7 @@ function deriveAggregate(servers) {
 }
 function buildTooltipText(aggregate, servers) {
     if (aggregate === 'none')
-        return MCP_STATUS_LABELS.none;
+        return 'No MCP Server defined';
     const lines = [MCP_STATUS_LABELS[aggregate]];
     for (const s of servers) {
         let detail = `• ${s.id}: ${s.status}`;
@@ -79,29 +68,15 @@ function useInjectKeyframes() {
     }, []);
 }
 /* ── Component ─────────────────────────────────────────── */
-export function McpStatusIndicator({ apiBase, authToken, }) {
+export function McpStatusIndicator({ data: wsData, apiBase, authToken, }) {
     useInjectKeyframes();
-    const { data } = useQuery({
-        queryKey: ['mcp-toolsets-status', apiBase],
-        queryFn: async () => {
-            const base = getApiBase(apiBase);
-            const headers = {};
-            if (authToken) {
-                headers['Authorization'] = `Bearer ${authToken}`;
-            }
-            const response = await fetch(`${base}/api/v1/configure/mcp-toolsets-status`, { headers });
-            if (!response.ok)
-                throw new Error('Failed to fetch MCP status');
-            return response.json();
-        },
-        refetchInterval: 5000,
-    });
-    const servers = data?.servers ?? [];
+    // REST polling removed — data comes exclusively via WS `agent.snapshot`.
+    const effectiveData = wsData;
+    const servers = effectiveData?.servers ?? [];
     const aggregate = useMemo(() => deriveAggregate(servers), [servers]);
     const tooltipText = useMemo(() => buildTooltipText(aggregate, servers), [aggregate, servers]);
-    // Hide when no servers are configured at all.
-    if (aggregate === 'none')
-        return null;
+    // Show a subtle gray dot when no MCP servers are configured.
+    // The tooltip tells the user none are defined.
     return (_jsx(Tooltip, { text: tooltipText, direction: "n", children: _jsx("button", { type: "button", "aria-label": tooltipText, style: {
                 display: 'inline-flex',
                 alignItems: 'center',

package/lib/chat/indicators/SandboxStatusIndicator.d.ts

@@ -1,3 +1,4 @@
+import type { SandboxWsStatus } from '../../types/sandbox';
 export interface SandboxStatusIndicatorProps {
     /** API base URL (e.g. "http://127.0.0.1:8765"). */
     apiBase?: string;
@@ -5,6 +6,8 @@ export interface SandboxStatusIndicatorProps {
     authToken?: string;
     /** Agent ID to scope sandbox status to a specific agent. */
     agentId?: string;
+    /** Optional status override to update indicator immediately from parent UI. */
+    statusOverride?: SandboxWsStatus | null;
 }
-export declare function SandboxStatusIndicator({ apiBase, authToken, agentId, }: SandboxStatusIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function SandboxStatusIndicator({ apiBase, authToken, agentId, statusOverride, }: SandboxStatusIndicatorProps): import("react/jsx-runtime").JSX.Element;
 export default SandboxStatusIndicator;

package/lib/chat/indicators/SandboxStatusIndicator.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /*
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
@@ -7,12 +7,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * SandboxStatusIndicator — Round coloured dot that shows the
  * real-time sandbox execution status via a WebSocket connection.
  *
- * Aggregate logic
+ * Aggregate logic (mapped to jupyter-react KernelIndicator states)
  * ───────────────
- * - variant === "unavailable" → hidden
- * - sandbox_running === false → "stopped"  (gray)
- * - is_executing === false    → "idle"     (green)
- * - is_executing === true     → "executing" (blue, pulsing)
+ * - variant === "unavailable" → connected-unknown
+ * - sandbox_running === false → disconnected
+ * - is_executing === false    → connected-idle
+ * - is_executing === true     → connected-busy (themed fade animation)
  *
  * The component connects to the `/configure/sandbox/ws` WebSocket
  * and receives status updates in real time.  It can also send
@@ -21,9 +21,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @module chat/indicators/SandboxStatusIndicator
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Tooltip } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { SANDBOX_STATUS_COLORS, SANDBOX_STATUS_LABELS, } from '../../types/sandbox';
+import { SANDBOX_STATUS_LABELS } from '../../types/sandbox';
+const SANDBOX_INDICATOR_COLORS = {
+    unavailable: 'fg.muted',
+    stopped: 'fg.muted',
+    idle: 'success.fg',
+    executing: 'attention.fg',
+};
 /* ── Helpers ───────────────────────────────────────────── */
 function getWsUrl(apiBase, authToken, agentId) {
     if (typeof window === 'undefined')
@@ -63,27 +68,39 @@ function deriveAggregate(status) {
         return 'executing';
     return 'idle';
 }
-const SANDBOX_PULSE_KEYFRAMES = `
-@keyframes sandbox-pulse {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.4; }
-}
-`;
-function useInjectKeyframes() {
-    useEffect(() => {
-        const id = '__sandbox-pulse-keyframes__';
-        if (document.getElementById(id))
-            return;
-        const style = document.createElement('style');
-        style.id = id;
-        style.textContent = SANDBOX_PULSE_KEYFRAMES;
-        document.head.appendChild(style);
-    }, []);
+function renderSandboxGlyph(aggregate) {
+    return (_jsx(Box, { as: "span", sx: {
+            display: 'inline-block',
+            width: 10,
+            height: 10,
+            borderRadius: '50%',
+            bg: SANDBOX_INDICATOR_COLORS[aggregate],
+            ...(aggregate === 'executing' && {
+                animation: 'sandbox-busy-fade 1.2s ease-in-out infinite',
+                '@keyframes sandbox-busy-fade': {
+                    '0%': {
+                        opacity: 1,
+                        transform: 'scale(1)',
+                        filter: 'saturate(1)',
+                    },
+                    '50%': {
+                        opacity: 0.45,
+                        transform: 'scale(0.92)',
+                        filter: 'saturate(0.75)',
+                    },
+                    '100%': {
+                        opacity: 1,
+                        transform: 'scale(1)',
+                        filter: 'saturate(1)',
+                    },
+                },
+            }),
+        } }));
 }
 /* ── Component ─────────────────────────────────────────── */
-export function SandboxStatusIndicator({ apiBase, authToken, agentId, }) {
-    useInjectKeyframes();
+export function SandboxStatusIndicator({ apiBase, authToken, agentId, statusOverride, }) {
     const [status, setStatus] = useState(null);
+    const [isOverlayOpen, setIsOverlayOpen] = useState(false);
     const wsRef = useRef(null);
     const reconnectTimerRef = useRef();
     const wsUrl = useMemo(() => getWsUrl(apiBase, authToken, agentId), [apiBase, authToken, agentId]);
@@ -138,38 +155,56 @@ export function SandboxStatusIndicator({ apiBase, authToken, agentId, }) {
         }
     }, []);
     // ---- Derived display values ----
-    const aggregate = useMemo(() => deriveAggregate(status), [status]);
+    const effectiveStatus = statusOverride ?? status;
+    const aggregate = useMemo(() => deriveAggregate(effectiveStatus), [effectiveStatus]);
     const tooltipText = useMemo(() => {
-        if (!status)
-            return SANDBOX_STATUS_LABELS.unavailable;
+        if (!effectiveStatus)
+            return 'No Sandbox defined';
         const label = SANDBOX_STATUS_LABELS[aggregate];
-        const variant = status.variant;
+        const variant = effectiveStatus.variant;
         return `${label} (${variant})`;
-    }, [aggregate, status]);
-    // Hide when sandbox is not available at all.
-    if (aggregate === 'unavailable')
-        return null;
-    return (_jsx(Tooltip, { text: tooltipText, direction: "n", children: _jsx("button", { type: "button", "aria-label": tooltipText, onClick: aggregate === 'executing' ? sendInterrupt : undefined, style: {
-                display: 'inline-flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: 28,
-                height: 28,
-                padding: 0,
-                border: 'none',
-                background: 'none',
-                cursor: aggregate === 'executing' ? 'pointer' : 'default',
-                lineHeight: 0,
-            }, children: _jsx(Box, { as: "span", sx: {
-                    display: 'inline-block',
-                    width: 12,
-                    height: 12,
-                    borderRadius: '50%',
-                    bg: SANDBOX_STATUS_COLORS[aggregate],
-                    flexShrink: 0,
-                    ...(aggregate === 'executing' && {
-                        animation: 'sandbox-pulse 1.5s ease-in-out infinite',
-                    }),
-                } }) }) }));
+    }, [aggregate, effectiveStatus]);
+    // Show a subtle gray dot when sandbox is unavailable.
+    // The tooltip tells the user none is configured.
+    return (_jsxs(Box, { as: "span", sx: {
+            position: 'relative',
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }, onMouseEnter: () => setIsOverlayOpen(true), onMouseLeave: () => setIsOverlayOpen(false), children: [_jsx("button", { type: "button", "aria-label": tooltipText, onClick: aggregate === 'executing' ? sendInterrupt : undefined, onFocus: () => setIsOverlayOpen(true), onBlur: () => setIsOverlayOpen(false), style: {
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    width: 28,
+                    height: 28,
+                    padding: 0,
+                    border: 'none',
+                    background: 'none',
+                    outline: 'none',
+                    boxShadow: 'none',
+                    borderRadius: 0,
+                    WebkitAppearance: 'none',
+                    appearance: 'none',
+                    cursor: aggregate === 'executing' ? 'pointer' : 'default',
+                    lineHeight: 0,
+                }, children: _jsx(Box, { as: "span", sx: { display: 'inline-flex', alignItems: 'center', flexShrink: 0 }, children: renderSandboxGlyph(aggregate) }) }), isOverlayOpen && (_jsxs(Box, { role: "tooltip", sx: {
+                    position: 'absolute',
+                    right: 0,
+                    top: 'calc(100% + 6px)',
+                    minWidth: 220,
+                    px: 2,
+                    py: 2,
+                    borderRadius: 2,
+                    bg: 'canvas.overlay',
+                    color: 'fg.default',
+                    fontSize: 0,
+                    lineHeight: 1.5,
+                    boxShadow: 'shadow.medium',
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    zIndex: 1000,
+                    fontFamily: 'mono',
+                    pointerEvents: 'none',
+                }, children: [_jsx(Box, { sx: { mb: 1, fontWeight: 600, fontFamily: 'normal' }, children: tooltipText }), effectiveStatus ? (_jsxs(_Fragment, { children: [_jsxs(Box, { children: [_jsxs(Box, { as: "span", sx: { fontWeight: 600 }, children: ["variant:", ' '] }), _jsx(Box, { as: "span", children: effectiveStatus.variant })] }), _jsxs(Box, { children: [_jsxs(Box, { as: "span", sx: { fontWeight: 600 }, children: ["sandbox_running:", ' '] }), _jsx(Box, { as: "span", children: String(effectiveStatus.sandbox_running) })] }), _jsxs(Box, { children: [_jsxs(Box, { as: "span", sx: { fontWeight: 600 }, children: ["is_executing:", ' '] }), _jsx(Box, { as: "span", children: String(effectiveStatus.is_executing) })] }), effectiveStatus.jupyter_url && (_jsxs(Box, { sx: { wordBreak: 'break-all' }, children: [_jsxs(Box, { as: "span", sx: { fontWeight: 600 }, children: ["jupyter_url:", ' '] }), _jsx(Box, { as: "span", children: effectiveStatus.jupyter_url })] })), effectiveStatus.error && (_jsx(Box, { sx: { mt: 1, color: 'danger.fg' }, children: effectiveStatus.error })), aggregate === 'executing' && (_jsx(Box, { sx: { mt: 1, fontFamily: 'normal', color: 'fg.muted' }, children: "Click to interrupt execution" }))] })) : (_jsx(Box, { sx: { fontFamily: 'normal', color: 'fg.muted' }, children: "No sandbox configured for this agent." }))] }))] }));
 }
 export default SandboxStatusIndicator;

package/lib/chat/indicators/SkillsStatusIndicator.d.ts

@@ -0,0 +1,7 @@
+export interface SkillsStatusIndicatorProps {
+    skillsCount: number;
+    enabledCount: number;
+    loading?: boolean;
+}
+export declare function SkillsStatusIndicator({ skillsCount, enabledCount, loading, }: SkillsStatusIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export default SkillsStatusIndicator;

package/lib/chat/indicators/SkillsStatusIndicator.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * SkillsStatusIndicator — Round status dot representing skill state.
+ *
+ * Aggregate logic:
+ * - no skills configured -> none (gray)
+ * - skills loading       -> loading (amber, pulsing)
+ * - some enabled         -> active (green)
+ * - none enabled         -> inactive (gray)
+ */
+import { useEffect, useMemo } from 'react';
+import { Tooltip } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+const SKILLS_STATUS_COLORS = {
+    none: '#8b949e',
+    loading: '#d29922',
+    inactive: '#8b949e',
+    active: '#3fb950',
+};
+const SKILLS_PULSE_KEYFRAMES = `
+@keyframes skills-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+`;
+function useInjectKeyframes() {
+    useEffect(() => {
+        const id = '__skills-pulse-keyframes__';
+        if (document.getElementById(id))
+            return;
+        const style = document.createElement('style');
+        style.id = id;
+        style.textContent = SKILLS_PULSE_KEYFRAMES;
+        document.head.appendChild(style);
+    }, []);
+}
+function deriveAggregate(skillsCount, enabledCount, loading) {
+    if (skillsCount <= 0)
+        return 'none';
+    if (loading)
+        return 'loading';
+    if (enabledCount > 0)
+        return 'active';
+    return 'inactive';
+}
+function buildTooltip(aggregate, skillsCount, enabledCount) {
+    if (aggregate === 'none')
+        return 'No Skills defined';
+    if (aggregate === 'loading') {
+        return `Skills loading (${enabledCount}/${skillsCount} enabled)`;
+    }
+    if (aggregate === 'active') {
+        return `Skills active (${enabledCount}/${skillsCount} enabled)`;
+    }
+    return `Skills available (${enabledCount}/${skillsCount} enabled)`;
+}
+export function SkillsStatusIndicator({ skillsCount, enabledCount, loading = false, }) {
+    useInjectKeyframes();
+    const aggregate = useMemo(() => deriveAggregate(skillsCount, enabledCount, loading), [skillsCount, enabledCount, loading]);
+    const tooltipText = useMemo(() => buildTooltip(aggregate, skillsCount, enabledCount), [aggregate, skillsCount, enabledCount]);
+    return (_jsx(Tooltip, { text: tooltipText, direction: "n", children: _jsx("button", { type: "button", "aria-label": tooltipText, style: {
+                display: 'inline-flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: 28,
+                height: 28,
+                padding: 0,
+                border: 'none',
+                background: 'none',
+                cursor: 'default',
+                lineHeight: 0,
+            }, children: _jsx(Box, { as: "span", sx: {
+                    display: 'inline-block',
+                    width: 12,
+                    height: 12,
+                    borderRadius: '50%',
+                    bg: SKILLS_STATUS_COLORS[aggregate],
+                    flexShrink: 0,
+                    ...(aggregate === 'loading' && {
+                        animation: 'skills-pulse 1.5s ease-in-out infinite',
+                    }),
+                } }) }) }));
+}
+export default SkillsStatusIndicator;

package/lib/chat/indicators/index.d.ts

@@ -15,3 +15,4 @@ export { McpStatusIndicator, type McpStatusIndicatorProps, } from './McpStatusIn
 export type { McpServerStatus, McpAggregateStatus } from '../../types/mcp';
 export { SandboxStatusIndicator, type SandboxStatusIndicatorProps, } from './SandboxStatusIndicator';
 export type { SandboxAggregateStatus, SandboxWsStatus, } from '../../types/sandbox';
+export { SkillsStatusIndicator, type SkillsStatusIndicatorProps, } from './SkillsStatusIndicator';

package/lib/chat/indicators/index.js

@@ -17,3 +17,4 @@
  */
 export { McpStatusIndicator, } from './McpStatusIndicator';
 export { SandboxStatusIndicator, } from './SandboxStatusIndicator';
+export { SkillsStatusIndicator, } from './SkillsStatusIndicator';