@datalayer/agent-runtimes 1.0.5 → 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,8 +8,13 @@
  * @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;
@@ -19,14 +24,28 @@ export interface ChatBaseHeaderProps {
     showInformation?: boolean;
     onInformationClick?: () => void;
     padding: number;
-    /** API base URL passed to SandboxStatusIndicator */
-    sandboxApiBase?: string;
-    /** Auth token passed to SandboxStatusIndicator */
-    sandboxAuthToken?: string;
-    /** Agent ID passed to SandboxStatusIndicator for agent-scoped status */
-    sandboxAgentId?: string;
-    /** Optional sandbox status override for immediate indicator updates */
-    sandboxStatusData?: SandboxWsStatus | null;
+    /** 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) */
@@ -40,4 +59,5 @@ export interface ChatBaseHeaderProps {
     /** Callback when view mode changes */
     onChatViewModeChange?: (mode: ChatViewMode) => void;
 }
-export declare function ChatBaseHeader({ title, subtitle, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, sandboxApiBase, sandboxAuthToken, sandboxAgentId, sandboxStatusData, 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,13 +1,36 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Heading, IconButton, Text, Truncate } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
+import { KernelIndicator } from '@datalayer/jupyter-react';
 import { PlusIcon, TrashIcon, GearIcon, CommentDiscussionIcon, DeviceMobileIcon, SidebarExpandIcon, InfoIcon, } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
-import { SandboxStatusIndicator } from '../indicators/SandboxStatusIndicator';
+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, subtitle, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, sandboxApiBase, sandboxAuthToken, sandboxAgentId, sandboxStatusData, 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',
@@ -39,7 +62,7 @@ export function ChatBaseHeader({ title, subtitle, brandIcon, headerContent, head
                                         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: [_jsx(SandboxStatusIndicator, { apiBase: sandboxApiBase, authToken: sandboxAuthToken, agentId: sandboxAgentId, statusOverride: sandboxStatusData }), 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: _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/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, statusOverride, }) {
-    useInjectKeyframes();
     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]);
@@ -149,27 +166,45 @@ export function SandboxStatusIndicator({ apiBase, authToken, agentId, statusOver
     }, [aggregate, effectiveStatus]);
     // Show a subtle gray dot when sandbox is unavailable.
     // The tooltip tells the user none is configured.
-    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',
-                    }),
-                } }) }) }));
+    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/messages/ChatMessageList.js

@@ -26,6 +26,50 @@ function normalizeName(name) {
         .replace(/[-_]/g, '')
         .toLowerCase();
 }
+/**
+ * Expand a single-line markdown table (rows joined with `||`) into one row
+ * per line so a markdown renderer can produce a real HTML table. Idempotent:
+ * any pre-existing `|\n|` boundaries are unaffected.
+ */
+function expandCompactMarkdownTableBody(body) {
+    if (!body)
+        return body;
+    if (!/\|\s*[-:| ]{3,}\|/.test(body))
+        return body;
+    if (!body.includes('||'))
+        return body;
+    return body.replace(/\|\|/g, '|\n|');
+}
+/**
+ * Pre-process assistant text for Streamdown:
+ *  - Unwrap ```markdown / ```md fenced blocks so tables render as HTML
+ *    instead of as a code block.
+ *  - Inside any fenced block (or top-level body), expand compact one-line
+ *    markdown tables.
+ */
+function normalizeAssistantMarkdown(text) {
+    if (!text)
+        return text;
+    // Unwrap explicit ```markdown / ```md fences and expand compact tables.
+    let out = text.replace(/```(markdown|md)\s*\n([\s\S]*?)```/gi, (_match, _lang, body) => {
+        const expanded = expandCompactMarkdownTableBody(body.trim());
+        return `\n\n${expanded}\n\n`;
+    });
+    // Also expand compact tables inside other fenced blocks that happen to
+    // carry a markdown table (e.g. bare ``` fences).
+    out = out.replace(/```([a-zA-Z0-9_+-]*)\n([\s\S]*?)```/g, (match, lang, body) => {
+        const expanded = expandCompactMarkdownTableBody(body);
+        if (expanded === body)
+            return match;
+        // If we expanded an unlabeled fence containing a real markdown table,
+        // unwrap it so it renders as a table.
+        if (!lang || /^(text|plain)$/i.test(lang)) {
+            return `\n\n${expanded.trim()}\n\n`;
+        }
+        return `\`\`\`${lang}\n${expanded}\`\`\``;
+    });
+    return out;
+}
 // ---------------------------------------------------------------------------
 // DefaultToolCallRenderer — reads approvals from the Zustand store,
 // sends decisions over the shared WebSocket (no REST polling).
@@ -266,6 +310,7 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                                     : avatarConfig.assistantAvatar })), _jsx(Box, { sx: {
                                     maxWidth: '85%',
                                     p: 2,
+                                    overflowX: 'auto',
                                     borderRadius: 2,
                                     backgroundColor: isUser ? 'accent.emphasis' : 'canvas.subtle',
                                     // Use primary-button text token for better contrast when
@@ -278,7 +323,7 @@ export function ChatMessageList({ displayItems, isLoading, isStreaming, showLoad
                                         fontSize: 1,
                                         whiteSpace: 'pre-wrap',
                                         wordBreak: 'break-word',
-                                    }, children: getMessageText(message) })) : (_jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: getMessageText(message) || (isStreaming ? '...' : '') }) })) })] }) }, message.id));
+                                    }, children: getMessageText(message) })) : (_jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: normalizeAssistantMarkdown(getMessageText(message) || (isStreaming ? '...' : '')) }) })) })] }) }, message.id));
             }), showLoadingIndicator && (isLoading || isStreaming) && (_jsx(Box, { sx: {
                     display: 'flex',
                     alignItems: 'flex-start',

package/lib/chat/messages/ChatMessages.js

@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useRef, useEffect } from 'react';
 import { Text, RelativeTime } from '@primer/react';
-import { Box } from '@datalayer/primer-addons';
+import { Box, useThemeStore, getColorPalette } from '@datalayer/primer-addons';
 import { PersonIcon, ToolsIcon } from '@primer/octicons-react';
 import { AiAgentIcon } from '@datalayer/icons-react';
 import { useChatMessages, useChatExtensionRegistry, } from '../../stores/chatStore';
@@ -24,6 +24,10 @@ export function ChatMessages({ messageRenderer, activityRenderer, showTimestamps
     const extensionRegistry = extensionRegistryProp ?? storeExtensionRegistry;
     const containerRef = useRef(null);
     const lastMessageRef = useRef(null);
+    // Resolve a light color from the current user theme palette so the
+    // assistant icon contrasts the saturated `accent.emphasis` avatar bg.
+    const { theme, colorMode } = useThemeStore();
+    const assistantIconColor = getColorPalette(theme, colorMode).primary;
     // Auto-scroll to bottom on new messages
     useEffect(() => {
         if (autoScroll && lastMessageRef.current) {
@@ -73,7 +77,7 @@ export function ChatMessages({ messageRenderer, activityRenderer, showTimestamps
                             color: message.role === 'user'
                                 ? 'fg.default'
                                 : 'var(--button-primary-fgColor-rest, var(--fgColor-onEmphasis))',
-                        }, children: message.role === 'user' ? (_jsx(PersonIcon, { size: 16 })) : message.role === 'assistant' ? (_jsx(AiAgentIcon, { size: 16 })) : (_jsx(ToolsIcon, { size: 16 })) }) })), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: {
+                        }, children: message.role === 'user' ? (_jsx(PersonIcon, { size: 16 })) : message.role === 'assistant' ? (_jsx(AiAgentIcon, { size: 16, color: assistantIconColor })) : (_jsx(ToolsIcon, { size: 16 })) }) })), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: {
                                 display: 'flex',
                                 alignItems: 'center',
                                 gap: 2,

package/lib/chat/prompt/InputFooter.d.ts

@@ -1,8 +1,10 @@
+import type { KernelMessage } from '@jupyterlab/services';
 import type { BuiltinTool, ContextSnapshotData, MCPServerConfig, McpToolsetsStatusResponse, ModelConfig, SkillInfo } from '../../types';
 export interface InputToolbarProps {
     input: string;
     setInput: (value: string) => void;
     isLoading: boolean;
+    kernelStatus?: KernelMessage.Status;
     connectionConfirmed: boolean;
     placeholder?: string;
     autoFocus: boolean;
@@ -53,4 +55,4 @@ export interface InputToolbarProps {
     /** Pre-fetched MCP status from WebSocket — bypasses REST polling */
     mcpStatusData?: McpToolsetsStatusResponse | null;
 }
-export declare function InputToolbar({ input, setInput, isLoading, connectionConfirmed, placeholder, autoFocus, focusTrigger, padding, onSend, onStop, disableInputPrompt, showTokenUsage, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, onToggleCodemode, isA2AProtocol, hasConfigData, hasSkillsData, models, selectedModel, onModelSelect, availableTools, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, approvedMcpTools, onToggleMcpToolApproval, skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, approvedSkills, onToggleSkillApproval, apiBase, authToken, mcpStatusData, }: InputToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputToolbar({ input, setInput, isLoading, kernelStatus, connectionConfirmed, placeholder, autoFocus, focusTrigger, padding, onSend, onStop, disableInputPrompt, showTokenUsage, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, onToggleCodemode, isA2AProtocol, hasConfigData, hasSkillsData, models, selectedModel, onModelSelect, availableTools, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, approvedMcpTools, onToggleMcpToolApproval, skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, approvedSkills, onToggleSkillApproval, apiBase, authToken, mcpStatusData, }: InputToolbarProps): import("react/jsx-runtime").JSX.Element;

package/lib/chat/prompt/InputFooter.js

@@ -21,20 +21,23 @@ import { SkillsStatusIndicator } from '../indicators/SkillsStatusIndicator';
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export function InputToolbar({ input, setInput, isLoading, connectionConfirmed, placeholder, autoFocus, focusTrigger, padding, onSend, onStop, disableInputPrompt = false, showTokenUsage, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, onToggleCodemode, isA2AProtocol, hasConfigData, hasSkillsData, models, selectedModel, onModelSelect, availableTools, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, approvedMcpTools, onToggleMcpToolApproval, skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, approvedSkills, onToggleSkillApproval, apiBase, authToken, mcpStatusData, }) {
+export function InputToolbar({ input, setInput, isLoading, kernelStatus, connectionConfirmed, placeholder, autoFocus, focusTrigger, padding, onSend, onStop, disableInputPrompt = false, showTokenUsage, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, onToggleCodemode, isA2AProtocol, hasConfigData, hasSkillsData, models, selectedModel, onModelSelect, availableTools, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, approvedMcpTools, onToggleMcpToolApproval, skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, approvedSkills, onToggleSkillApproval, apiBase, authToken, mcpStatusData, }) {
+    const isKernelBusy = kernelStatus === 'busy';
+    const showSelectorsBar = showModelSelector || showToolsMenu || showSkillsMenu;
+    const hasSelectorsContent = hasConfigData || hasSkillsData;
     // Show token usage when we have valid context data
     const hasContext = Boolean(agentUsage && !agentUsage.error && agentUsage.totalTokens > 0);
-    return (_jsxs(Box, { children: [_jsx(InputPrompt, { placeholder: placeholder || 'Type a message...', isLoading: isLoading, disabled: disableInputPrompt, readOnly: !connectionConfirmed, onSend: onSend, onStop: onStop, autoFocus: autoFocus, focusTrigger: focusTrigger, padding: padding, value: input, onChange: setInput, footerRightContent: _jsxs(_Fragment, { children: [_jsx(McpStatusIndicator, { apiBase: apiBase, authToken: authToken, data: mcpStatusData }), _jsx(SkillsStatusIndicator, { skillsCount: skills.length, enabledCount: enabledSkills.size, loading: skillsLoading })] }) }), showTokenUsage && hasContext && agentUsage && (_jsx(TokenUsageBar, { agentUsage: agentUsage, padding: padding })), (showModelSelector || showToolsMenu || showSkillsMenu) &&
-                (hasConfigData || hasSkillsData) && (_jsxs(Box, { sx: {
+    return (_jsxs(Box, { children: [_jsx(InputPrompt, { placeholder: placeholder || 'Type a message...', isLoading: isLoading, isKernelBusy: isKernelBusy, disabled: disableInputPrompt, readOnly: !connectionConfirmed, onSend: onSend, onStop: onStop, autoFocus: autoFocus, focusTrigger: focusTrigger, padding: padding, value: input, onChange: setInput, footerRightContent: _jsxs(_Fragment, { children: [_jsx(McpStatusIndicator, { apiBase: apiBase, authToken: authToken, data: mcpStatusData }), _jsx(SkillsStatusIndicator, { skillsCount: skills.length, enabledCount: enabledSkills.size, loading: skillsLoading })] }) }), showTokenUsage && (_jsx(Box, { sx: { minHeight: hasContext && agentUsage ? 28 : 8 }, children: hasContext && agentUsage ? (_jsx(TokenUsageBar, { agentUsage: agentUsage, padding: padding })) : null })), showSelectorsBar && (_jsx(Box, { sx: {
                     display: 'flex',
                     gap: 2,
                     px: padding,
-                    py: 1,
+                    py: 0.5,
+                    minHeight: 36,
                     borderTop: '1px solid',
                     borderColor: 'border.default',
                     alignItems: 'center',
                     bg: 'canvas.subtle',
-                }, children: [showToolsMenu && (_jsx(ToolsMenu, { codemodeEnabled: codemodeEnabled, onToggleCodemode: onToggleCodemode, mcpServers: mcpServers, enabledMcpTools: enabledMcpTools, enabledMcpToolCount: enabledMcpToolCount, onToggleMcpTool: onToggleMcpTool, onToggleAllMcpServerTools: onToggleAllMcpServerTools, approvedMcpTools: approvedMcpTools, onToggleMcpToolApproval: onToggleMcpToolApproval, availableTools: availableTools })), showSkillsMenu && (_jsx(SkillsMenu, { skills: skills, skillsLoading: skillsLoading, enabledSkills: enabledSkills, onToggleSkill: onToggleSkill, onToggleAllSkills: onToggleAllSkills, approvedSkills: approvedSkills, onToggleSkillApproval: onToggleSkillApproval })), showModelSelector && models.length > 0 && selectedModel && (_jsx(ModelSelector, { models: models, selectedModel: selectedModel, onModelSelect: onModelSelect, isA2AProtocol: isA2AProtocol }))] }))] }));
+                }, children: hasSelectorsContent ? (_jsxs(_Fragment, { children: [showToolsMenu && (_jsx(ToolsMenu, { codemodeEnabled: codemodeEnabled, onToggleCodemode: onToggleCodemode, mcpServers: mcpServers, enabledMcpTools: enabledMcpTools, enabledMcpToolCount: enabledMcpToolCount, onToggleMcpTool: onToggleMcpTool, onToggleAllMcpServerTools: onToggleAllMcpServerTools, approvedMcpTools: approvedMcpTools, onToggleMcpToolApproval: onToggleMcpToolApproval, availableTools: availableTools })), showSkillsMenu && (_jsx(SkillsMenu, { skills: skills, skillsLoading: skillsLoading, enabledSkills: enabledSkills, onToggleSkill: onToggleSkill, onToggleAllSkills: onToggleAllSkills, approvedSkills: approvedSkills, onToggleSkillApproval: onToggleSkillApproval })), showModelSelector && models.length > 0 && selectedModel && (_jsx(ModelSelector, { models: models, selectedModel: selectedModel, onModelSelect: onModelSelect, isA2AProtocol: isA2AProtocol }))] })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Loading controls..." })) }))] }));
 }
 // ---------------------------------------------------------------------------
 // ToolsMenu (private sub-component)

package/lib/chat/prompt/InputPrompt.d.ts

@@ -24,6 +24,8 @@ export interface InputPromptProps {
     placeholder?: string;
     /** Whether the agent is loading / streaming */
     isLoading?: boolean;
+    /** Whether the connected kernel is currently busy */
+    isKernelBusy?: boolean;
     /** Callback when a message is submitted */
     onSend: (message: string) => void;
     /** Callback when the stop button is clicked */
@@ -58,5 +60,5 @@ export interface InputPromptProps {
 /**
  * InputPrompt — Integrated chat input with header, input area, and footer.
  */
-export declare function InputPrompt({ variant, placeholder, isLoading, onSend, onStop, autoFocus, focusTrigger, showBorderTop, showBackground, padding, disabled, readOnly, sx, value: controlledValue, onChange: controlledOnChange, headerContent, footerContent, footerRightContent, }: InputPromptProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputPrompt({ variant, placeholder, isLoading, isKernelBusy, onSend, onStop, autoFocus, focusTrigger, showBorderTop, showBackground, padding, disabled, readOnly, sx, value: controlledValue, onChange: controlledOnChange, headerContent, footerContent, footerRightContent, }: InputPromptProps): import("react/jsx-runtime").JSX.Element;
 export default InputPrompt;

package/lib/chat/prompt/InputPrompt.js

@@ -8,7 +8,7 @@ import { InputPromptLexical } from './InputPromptLexical';
 /**
  * InputPrompt — Integrated chat input with header, input area, and footer.
  */
-export function InputPrompt({ variant = 'text', placeholder = 'Ask anything…', isLoading = false, onSend, onStop, autoFocus = false, focusTrigger, showBorderTop = true, showBackground = true, padding = 3, disabled = false, readOnly = false, sx, value: controlledValue, onChange: controlledOnChange, headerContent, footerContent, footerRightContent, }) {
+export function InputPrompt({ variant = 'text', placeholder = 'Ask anything…', isLoading = false, isKernelBusy = false, onSend, onStop, autoFocus = false, focusTrigger, showBorderTop = true, showBackground = true, padding = 3, disabled = false, readOnly = false, sx, value: controlledValue, onChange: controlledOnChange, headerContent, footerContent, footerRightContent, }) {
     // ---- Controlled / uncontrolled state -----------------------------------
     const [internalInput, setInternalInput] = useState('');
     const input = controlledValue !== undefined ? controlledValue : internalInput;
@@ -78,6 +78,6 @@ export function InputPrompt({ variant = 'text', placeholder = 'Ask anything…',
                         borderColor: 'accent.fg',
                         boxShadow: (t) => `0 0 0 1px ${t?.colors?.accent?.fg ?? '#0969da'}`,
                     },
-                }, children: [_jsx(InputPromptHeader, { children: headerContent }), variant === 'lexical' ? (_jsx(InputPromptLexical, { value: input, onChange: setInput, placeholder: placeholder, disabled: isLoading || disabled, readOnly: readOnly, onSubmit: handleSend, autoFocus: autoFocus })) : (_jsx(InputPromptText, { value: input, onChange: setInput, placeholder: placeholder, disabled: isLoading || disabled, readOnly: readOnly, onSubmit: handleSend, inputRef: inputRef })), _jsx(InputPromptFooter, { isLoading: isLoading, sendDisabled: !input.trim() || disabled || readOnly, onSend: handleSend, onStop: handleStop, rightContent: footerRightContent, children: footerContent })] }) }) }));
+                }, children: [_jsx(InputPromptHeader, { children: headerContent }), variant === 'lexical' ? (_jsx(InputPromptLexical, { value: input, onChange: setInput, placeholder: placeholder, disabled: isLoading || disabled, readOnly: readOnly, onSubmit: handleSend, autoFocus: autoFocus })) : (_jsx(InputPromptText, { value: input, onChange: setInput, placeholder: placeholder, disabled: isLoading || disabled, readOnly: readOnly, onSubmit: handleSend, inputRef: inputRef })), _jsx(InputPromptFooter, { isLoading: isLoading, isKernelBusy: isKernelBusy, sendDisabled: !input.trim() || disabled || readOnly, onSend: handleSend, onStop: handleStop, rightContent: footerRightContent, children: footerContent })] }) }) }));
 }
 export default InputPrompt;

package/lib/chat/prompt/InputPromptFooter.d.ts

@@ -16,10 +16,12 @@ export interface InputPromptFooterProps {
     isLoading?: boolean;
     /** Whether the send button should be disabled */
     sendDisabled?: boolean;
+    /** Whether the connected kernel is currently busy */
+    isKernelBusy?: boolean;
     /** Callback when the send button is clicked */
     onSend: () => void;
     /** Callback when the stop button is clicked */
     onStop?: () => void;
 }
-export declare function InputPromptFooter({ children, rightContent, isLoading, sendDisabled, onSend, onStop, }: InputPromptFooterProps): import("react/jsx-runtime").JSX.Element;
+export declare function InputPromptFooter({ children, rightContent, isLoading, sendDisabled, isKernelBusy, onSend, onStop, }: InputPromptFooterProps): import("react/jsx-runtime").JSX.Element;
 export default InputPromptFooter;

package/lib/chat/prompt/InputPromptFooter.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { IconButton } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { PaperAirplaneIcon, SquareCircleIcon } from '@primer/octicons-react';
-export function InputPromptFooter({ children, rightContent, isLoading = false, sendDisabled = false, onSend, onStop, }) {
+import { PaperAirplaneIcon, SquareCircleIcon, PauseIcon, } from '@primer/octicons-react';
+export function InputPromptFooter({ children, rightContent, isLoading = false, sendDisabled = false, isKernelBusy = false, onSend, onStop, }) {
     return (_jsxs(Box, { sx: {
             display: 'flex',
             alignItems: 'center',
@@ -10,6 +10,6 @@ export function InputPromptFooter({ children, rightContent, isLoading = false, s
             px: 2,
             pt: 1,
             pb: 2,
-        }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, flex: 1 }, children: children }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [rightContent, isLoading ? (_jsx(IconButton, { icon: SquareCircleIcon, "aria-label": "Stop", onClick: onStop, size: "small", variant: "invisible" })) : (_jsx(IconButton, { icon: PaperAirplaneIcon, "aria-label": "Send", onClick: onSend, disabled: sendDisabled, size: "small", variant: "invisible" }))] })] }));
+        }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, flex: 1 }, children: children }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [rightContent, isLoading ? (_jsx(IconButton, { icon: SquareCircleIcon, "aria-label": "Stop", onClick: onStop, size: "small", variant: "invisible" })) : isKernelBusy ? (_jsx(IconButton, { icon: PauseIcon, "aria-label": "Pause (kernel busy)", onClick: onStop, size: "small", variant: "invisible", disabled: !onStop })) : (_jsx(IconButton, { icon: PaperAirplaneIcon, "aria-label": "Send", onClick: onSend, disabled: sendDisabled, size: "small", variant: "invisible" }))] })] }));
 }
 export default InputPromptFooter;