@datalayer/agent-runtimes 1.0.29 → 1.3.10

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

@@ -18,6 +18,13 @@ export declare function toRuntimeExecutionState(runtimeStatus?: RuntimeStatus |
 export interface ChatBaseHeaderProps {
     title?: string;
     subtitle?: string;
+    /**
+     * Why the chat is off, shown beside the title.
+     *
+     * The header is where someone looks when a control does not respond, so the
+     * reason belongs here rather than in a tooltip they would have to find.
+     */
+    disableReason?: string;
     brandIcon?: ReactNode;
     headerContent?: ReactNode;
     headerActions?: ReactNode;
@@ -60,6 +67,8 @@ export interface ChatBaseHeaderProps {
     chatViewMode?: ChatViewMode;
     /** Callback when view mode changes */
     onChatViewModeChange?: (mode: ChatViewMode) => void;
+    /** Modes shown greyed out: the sidebar, when the host has no mount point. */
+    disabledViewModes?: readonly ChatViewMode[];
     /** Show the companion-surface segmented control (None / Notebook / Document). */
     showEphemeralSurfaceControl?: boolean;
     /** Whether the Notebook option is available in the surface control. */
@@ -71,5 +80,5 @@ export interface ChatBaseHeaderProps {
     /** Callback fired when the user changes the companion-surface mode. */
     onEphemeralSurfaceModeChange?: (mode: EphemeralSurfaceMode) => void;
 }
-export declare function ChatBaseHeader({ title, subtitle, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, kernelIndicatorState, kernelIndicatorPlacement, runtimeStatus, kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, headerButtons, messageCount, onNewChat, onClear, chatViewMode, onChatViewModeChange, showEphemeralSurfaceControl, enableEphemeralNotebookOption, enableEphemeralDocumentOption, ephemeralSurfaceMode, onEphemeralSurfaceModeChange, }: ChatBaseHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatBaseHeader({ title, subtitle, disableReason, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, kernelIndicatorState, kernelIndicatorPlacement, runtimeStatus, kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, headerButtons, messageCount, onNewChat, onClear, chatViewMode, onChatViewModeChange, disabledViewModes, showEphemeralSurfaceControl, enableEphemeralNotebookOption, enableEphemeralDocumentOption, ephemeralSurfaceMode, onEphemeralSurfaceModeChange, }: ChatBaseHeaderProps): import("react").JSX.Element;
 export {};

package/lib/chat/header/ChatHeaderBase.js

@@ -1,9 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Heading, IconButton, Text, Tooltip, Truncate } from '@primer/react';
+import { Heading, IconButton, Label, Text, Tooltip, Truncate, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { KernelIndicator } from '@datalayer/jupyter-react';
-import { PlusIcon, TrashIcon, GearIcon, CommentDiscussionIcon, DeviceMobileIcon, SidebarExpandIcon, InfoIcon, RowsIcon, FileIcon, CircleSlashIcon, } from '@primer/octicons-react';
+import { PlusIcon, TrashIcon, GearIcon, CommentDiscussionIcon, DeviceMobileIcon, SidebarExpandIcon, GrabberIcon, InfoIcon, } from '@primer/octicons-react';
+import { CHAT_VIEW_MODES, SIDEBAR_NEEDS_MOUNT_POINT } from '../viewModes';
 import { AiAgentIcon } from '@datalayer/icons-react';
+import { EphemeralSurfaceControl } from '../EphemeralSurfaceControl';
 export function toRuntimeExecutionState(runtimeStatus) {
     if (!runtimeStatus) {
         return undefined;
@@ -27,11 +29,35 @@ export function toRuntimeExecutionState(runtimeStatus) {
     return undefined;
 }
 // ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+/** The drawing of each mode in the header's toggle. */
+const VIEW_MODE_ICONS = {
+    floating: CommentDiscussionIcon,
+    'floating-small': DeviceMobileIcon,
+    'floating-draggable': GrabberIcon,
+    sidebar: SidebarExpandIcon,
+};
+// ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export function ChatBaseHeader({ title, subtitle, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, kernelIndicatorState, kernelIndicatorPlacement = 'left', runtimeStatus, kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, headerButtons, messageCount, onNewChat, onClear, chatViewMode, onChatViewModeChange, showEphemeralSurfaceControl = false, enableEphemeralNotebookOption = false, enableEphemeralDocumentOption = false, ephemeralSurfaceMode = 'none', onEphemeralSurfaceModeChange, }) {
+export function ChatBaseHeader({ title, subtitle, disableReason, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, kernelIndicatorState, kernelIndicatorPlacement = 'left', runtimeStatus, kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, headerButtons, messageCount, onNewChat, onClear, chatViewMode, onChatViewModeChange, disabledViewModes = [], showEphemeralSurfaceControl = false, enableEphemeralNotebookOption = false, enableEphemeralDocumentOption = false, ephemeralSurfaceMode = 'none', onEphemeralSurfaceModeChange, }) {
     const effectiveIndicatorState = kernelIndicatorState ?? toRuntimeExecutionState(runtimeStatus);
-    const kernelIndicatorElement = kernel ? (_jsx(KernelIndicator, { kernel: kernel, environmentName: kernelEnvironmentName, cpu: kernelCpu, memory: kernelMemory, gpu: kernelGpu, position: "s", bordered: false })) : (_jsx(KernelIndicator, { state: effectiveIndicatorState ?? 'undefined', environmentName: kernelEnvironmentName, cpu: kernelCpu, memory: kernelMemory, gpu: kernelGpu, position: "s", bordered: false }));
+    /*
+     * No indicator where there is nothing to indicate.
+     *
+     * It used to fall back to `'undefined'` with no kernel and no state, which
+     * draws a full control — dot, label and a details overlay reading
+     * "State: undefined, Kernel: unknown-kernel, Server: unknown-url" down to
+     * the last field. A reader cannot tell that apart from a runtime that has
+     * genuinely gone wrong, so a host that simply never wired the indicator up
+     * was reporting a broken sandbox on every page.
+     *
+     * A host with something to say passes a `kernel`, a state, or a runtime
+     * status. Passing none of the three is not a state; it is silence, and the
+     * honest rendering of silence is nothing at all.
+     */
+    const kernelIndicatorElement = kernel ? (_jsx(KernelIndicator, { kernel: kernel, environmentName: kernelEnvironmentName, cpu: kernelCpu, memory: kernelMemory, gpu: kernelGpu, position: "s", bordered: false })) : effectiveIndicatorState ? (_jsx(KernelIndicator, { state: effectiveIndicatorState, environmentName: kernelEnvironmentName, cpu: kernelCpu, memory: kernelMemory, gpu: kernelGpu, position: "s", bordered: false })) : null;
     return (_jsx(Box, { sx: {
             display: 'flex',
             flexDirection: 'column',
@@ -64,102 +90,47 @@ 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 })), kernelIndicatorPlacement === 'center' && kernelIndicatorElement] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }, children: [kernelIndicatorPlacement === 'right' && kernelIndicatorElement, headerButtons?.showNewChat && (_jsx(IconButton, { icon: PlusIcon, "aria-label": "New chat", variant: "invisible", size: "small", onClick: onNewChat })), headerButtons?.showClear && messageCount > 0 && (_jsx(IconButton, { icon: TrashIcon, "aria-label": "Clear messages", variant: "invisible", size: "small", onClick: onClear })), headerButtons?.showSettings && (_jsx(IconButton, { icon: GearIcon, "aria-label": "Settings", variant: "invisible", size: "small", onClick: headerButtons.onSettings })), showEphemeralSurfaceControl && (_jsx(Box, { sx: {
-                                display: 'inline-flex',
-                                alignItems: 'center',
-                                bg: 'neutral.muted',
-                                borderRadius: '6px',
-                                p: '2px',
-                                gap: '1px',
-                            }, children: [
-                                {
-                                    mode: 'none',
-                                    icon: CircleSlashIcon,
-                                    label: 'Chat only',
-                                    enabled: true,
-                                },
-                                {
-                                    mode: 'notebook',
-                                    icon: RowsIcon,
-                                    label: 'Notebook',
-                                    enabled: enableEphemeralNotebookOption,
-                                },
-                                {
-                                    mode: 'document',
-                                    icon: FileIcon,
-                                    label: 'Document',
-                                    enabled: enableEphemeralDocumentOption,
-                                },
-                            ]
-                                .filter(({ enabled }) => enabled)
-                                .map(({ mode, icon: ModeIcon, label }) => (_jsx(Tooltip, { text: label, direction: "n", children: _jsx(Box, { as: "button", "aria-label": label, onClick: () => onEphemeralSurfaceModeChange?.(mode), sx: {
-                                        display: 'inline-flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        width: 26,
-                                        height: 24,
-                                        borderRadius: '4px',
-                                        border: 'none',
-                                        cursor: 'pointer',
-                                        bg: ephemeralSurfaceMode === mode
-                                            ? 'canvas.default'
-                                            : 'transparent',
-                                        boxShadow: ephemeralSurfaceMode === mode
-                                            ? 'shadow.small'
-                                            : 'none',
-                                        color: ephemeralSurfaceMode === mode
-                                            ? 'fg.default'
-                                            : 'fg.muted',
-                                        transition: 'all 0.15s ease',
-                                        '&:hover': {
-                                            color: 'fg.default',
-                                            bg: ephemeralSurfaceMode === mode
-                                                ? 'canvas.default'
-                                                : 'neutral.subtle',
-                                        },
-                                    }, children: _jsx(ModeIcon, { size: 14 }) }) }, mode))) })), chatViewMode && onChatViewModeChange && (_jsx(Box, { sx: {
+                                    }, children: _jsx(Truncate, { title: subtitle, maxWidth: "40ch", children: subtitle }) }))] })), disableReason && (_jsx(Label, { variant: "attention", sx: { flexShrink: 0 }, children: disableReason })), headerContent, showInformation && (_jsx(IconButton, { icon: InfoIcon, "aria-label": "Information", variant: "invisible", size: "small", onClick: onInformationClick })), kernelIndicatorPlacement === 'center' && kernelIndicatorElement] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }, children: [kernelIndicatorPlacement === 'right' && kernelIndicatorElement, headerButtons?.showNewChat && (_jsx(IconButton, { icon: PlusIcon, "aria-label": "New chat", variant: "invisible", size: "small", onClick: onNewChat })), headerButtons?.showClear && messageCount > 0 && (_jsx(IconButton, { icon: TrashIcon, "aria-label": "Clear messages", variant: "invisible", size: "small", onClick: onClear })), headerButtons?.showSettings && (_jsx(IconButton, { icon: GearIcon, "aria-label": "Settings", variant: "invisible", size: "small", onClick: headerButtons.onSettings })), showEphemeralSurfaceControl && (_jsx(EphemeralSurfaceControl, { mode: ephemeralSurfaceMode, onChange: onEphemeralSurfaceModeChange, enableNotebook: enableEphemeralNotebookOption, enableDocument: enableEphemeralDocumentOption })), chatViewMode && onChatViewModeChange && (_jsx(Box, { sx: {
                                 display: 'inline-flex',
                                 alignItems: 'center',
                                 bg: 'neutral.muted',
                                 borderRadius: '6px',
                                 p: '2px',
                                 gap: '1px',
-                            }, children: [
-                                {
-                                    mode: 'floating',
-                                    icon: CommentDiscussionIcon,
-                                    label: 'Full-height popup',
-                                },
-                                {
-                                    mode: 'floating-small',
-                                    icon: DeviceMobileIcon,
-                                    label: 'Floating popup',
-                                },
-                                {
-                                    mode: 'sidebar',
-                                    icon: SidebarExpandIcon,
-                                    label: 'Sidebar panel',
-                                },
-                            ].map(({ mode, icon: ModeIcon, label }) => (_jsx(Tooltip, { text: label, direction: "n", children: _jsx(Box, { as: "button", "aria-label": label, onClick: () => onChatViewModeChange(mode), sx: {
-                                        display: 'inline-flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        width: 26,
-                                        height: 24,
-                                        borderRadius: '4px',
-                                        border: 'none',
-                                        cursor: 'pointer',
-                                        bg: chatViewMode === mode
-                                            ? 'canvas.default'
-                                            : 'transparent',
-                                        boxShadow: chatViewMode === mode ? 'shadow.small' : 'none',
-                                        color: chatViewMode === mode ? 'fg.default' : 'fg.muted',
-                                        transition: 'all 0.15s ease',
-                                        '&:hover': {
-                                            color: 'fg.default',
-                                            bg: chatViewMode === mode
-                                                ? 'canvas.default'
-                                                : 'neutral.subtle',
-                                        },
-                                    }, children: _jsx(ModeIcon, { size: 14 }) }) }, mode))) })), headerActions] })] }) }));
+                            }, children: CHAT_VIEW_MODES.map(({ mode, label }) => {
+                                const ModeIcon = VIEW_MODE_ICONS[mode];
+                                const selected = chatViewMode === mode;
+                                /* Greyed rather than left out: the person sees the mode
+                                   exists, and that this page has no place for it. */
+                                const disabled = disabledViewModes.includes(mode);
+                                return (_jsx(Tooltip, { text: disabled && mode === 'sidebar'
+                                        ? `${label} — ${SIDEBAR_NEEDS_MOUNT_POINT}`
+                                        : label, direction: "n", children: _jsx(Box, { as: "button", "aria-label": label, "aria-disabled": disabled || undefined, onClick: () => {
+                                            if (!disabled) {
+                                                onChatViewModeChange(mode);
+                                            }
+                                        }, sx: {
+                                            display: 'inline-flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            width: 26,
+                                            height: 24,
+                                            borderRadius: '4px',
+                                            border: 'none',
+                                            cursor: disabled ? 'not-allowed' : 'pointer',
+                                            opacity: disabled ? 0.45 : 1,
+                                            bg: selected ? 'canvas.default' : 'transparent',
+                                            boxShadow: selected ? 'shadow.small' : 'none',
+                                            color: selected ? 'fg.default' : 'fg.muted',
+                                            transition: 'all 0.15s ease',
+                                            '&:hover': disabled
+                                                ? {}
+                                                : {
+                                                    color: 'fg.default',
+                                                    bg: selected
+                                                        ? 'canvas.default'
+                                                        : 'neutral.subtle',
+                                                },
+                                        }, children: _jsx(ModeIcon, { size: 14 }) }) }, mode));
+                            }) })), headerActions] })] }) }));
 }

package/lib/chat/index.d.ts

@@ -49,10 +49,12 @@
  * ```
  */
 export { ChatMessages, type ChatMessagesProps } from './messages/ChatMessages';
+export { ChatMessageList, type ChatMessageListProps, } from './messages/ChatMessageList';
+export { NotebookToolSurfaces, notebookToolSurfacesRenderer, } from './messages/NotebookToolSurfaces';
 export { ChatSidebar, type ChatSidebarProps } from './ChatSidebar';
 export { ChatStandalone } from './ChatStandalone';
 export { ChatBase } from './base/ChatBase';
-export { InputPrompt, type InputPromptProps } from './prompt';
+export { InputPrompt, type InputPromptProps, InputPromptBase, type InputPromptBaseProps, } from './prompt';
 export { McpStatusIndicator, type McpStatusIndicatorProps, type McpServerStatus, type McpAggregateStatus, SandboxStatusIndicator, type SandboxStatusIndicatorProps, type SandboxAggregateStatus, type SandboxWsStatus, } from './indicators';
 export { PoweredByTag, type PoweredByTagProps } from './display/PoweredByTag';
 export { FloatingBrandButton, type FloatingBrandButtonProps, } from './display/FloatingBrandButton';
@@ -65,3 +67,4 @@ export { Chat, type ChatProps } from './Chat';
 export { ChatFloating, type ChatFloatingProps } from './ChatFloating';
 export { ChatInline, type ChatInlineProps, type ChatInlineProtocolConfig, } from './ChatInline';
 export { AgentRuntimeChat, type AgentRuntimeChatProps, } from '../agents/AgentRuntimeChat';
+export * from './EphemeralSurfaceControl';

package/lib/chat/index.js

@@ -54,10 +54,16 @@
  */
 // Components - Chat elements
 export { ChatMessages } from './messages/ChatMessages';
+// The transcript renderer `ChatBase` itself draws with — a `DisplayItem[]`
+// straight in, no protocol underneath — for a host with its own transcript
+// to show rather than a live runtime to talk to (a team's run, watched as
+// its agents' own conversation).
+export { ChatMessageList, } from './messages/ChatMessageList';
+export { NotebookToolSurfaces, notebookToolSurfacesRenderer, } from './messages/NotebookToolSurfaces';
 export { ChatSidebar } from './ChatSidebar';
 export { ChatStandalone } from './ChatStandalone';
 export { ChatBase } from './base/ChatBase';
-export { InputPrompt } from './prompt';
+export { InputPrompt, InputPromptBase, } from './prompt';
 export { McpStatusIndicator, SandboxStatusIndicator, } from './indicators';
 export { PoweredByTag } from './display/PoweredByTag';
 export { FloatingBrandButton, } from './display/FloatingBrandButton';
@@ -74,3 +80,4 @@ export { ChatFloating } from './ChatFloating';
 export { ChatInline, } from './ChatInline';
 // Generic full-page chat surface for a live agent runtime (with launching state)
 export { AgentRuntimeChat, } from '../agents/AgentRuntimeChat';
+export * from './EphemeralSurfaceControl';

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

@@ -8,5 +8,5 @@ export interface McpStatusIndicatorProps {
     /** @deprecated — Only used when `data` is not provided. */
     authToken?: string;
 }
-export declare function McpStatusIndicator({ data: wsData, apiBase, authToken, }: McpStatusIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export declare function McpStatusIndicator({ data: wsData, apiBase, authToken, }: McpStatusIndicatorProps): import("react").JSX.Element;
 export default McpStatusIndicator;

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

@@ -9,5 +9,5 @@ export interface SandboxStatusIndicatorProps {
     /** Optional status override to update indicator immediately from parent UI. */
     statusOverride?: SandboxWsStatus | null;
 }
-export declare function SandboxStatusIndicator({ apiBase, authToken, agentId, statusOverride, }: SandboxStatusIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export declare function SandboxStatusIndicator({ apiBase, authToken, agentId, statusOverride, }: SandboxStatusIndicatorProps): import("react").JSX.Element;
 export default SandboxStatusIndicator;

package/lib/chat/indicators/SandboxStatusIndicator.js

@@ -102,7 +102,7 @@ export function SandboxStatusIndicator({ apiBase, authToken, agentId, statusOver
     const [status, setStatus] = useState(null);
     const [isOverlayOpen, setIsOverlayOpen] = useState(false);
     const wsRef = useRef(null);
-    const reconnectTimerRef = useRef();
+    const reconnectTimerRef = useRef(undefined);
     const wsUrl = useMemo(() => getWsUrl(apiBase, authToken, agentId), [apiBase, authToken, agentId]);
     // ---- WebSocket lifecycle ----
     useEffect(() => {

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

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

package/lib/chat/messages/ChatMessageList.d.ts

@@ -6,6 +6,8 @@
  */
 import { type ReactNode, type RefObject } from 'react';
 import type { DisplayItem, AvatarConfig, RenderToolResult } from '../../types/chat';
+import type { ChatMessage } from '../../types/messages';
+import type { ContextSnapshotData } from '../../types/context';
 export interface ToolApprovalConfig {
     /** Base API URL for the agent runtime (e.g., `http://localhost:8765/api/v1`). */
     apiBaseUrl: string;
@@ -45,6 +47,25 @@ export interface ChatMessageListProps {
      * approval API.
      */
     approvalConfig?: ToolApprovalConfig;
+    /**
+     * Whether each turn closes with a `TurnFooter` — the quiet accounting row
+     * (`ctx · turn ▲▼`) with copy/remove actions once the turn is over.
+     */
+    showTurnFooters?: boolean;
+    /** The live usage snapshot the footers read while their turn is current. */
+    agentUsage?: ContextSnapshotData;
+    /**
+     * Take these display items out of the transcript — the remove action of a
+     * turn's footer, handing the whole turn's ids back to the state owner.
+     */
+    onRemoveItems?: (ids: string[]) => void;
+    /**
+     * Renders below a message's bubble — an escape hatch for whatever a host's
+     * own domain knows about it (an answer's document link, what it spent)
+     * that this list has no opinion on. Not called for tool calls or for a
+     * `note`, which has no footer of its own.
+     */
+    renderMessageFooter?: (message: ChatMessage) => ReactNode;
 }
 type SubagentAvatarConfig = Required<Pick<AvatarConfig, 'userAvatar' | 'assistantAvatar' | 'showAvatars' | 'avatarSize' | 'userAvatarBg' | 'assistantAvatarBg'>>;
 export interface SubagentChatPanelProps {
@@ -64,5 +85,5 @@ export interface SubagentChatPanelProps {
  * approval decisions are sent over the shared monitoring socket.
  */
 export declare function SubagentChatPanel({ toolCallId, subagentName: subagentNameHint, height, avatarConfig, }: SubagentChatPanelProps): React.ReactElement | null;
-export declare function ChatMessageList({ displayItems, isLoading, isStreaming, showLoadingIndicator, hideMessagesAfterToolUI, avatarConfig, padding, renderToolResult, emptyContent, messagesEndRef, onRespond, approvalConfig, }: ChatMessageListProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatMessageList({ displayItems, isLoading, isStreaming, showLoadingIndicator, hideMessagesAfterToolUI, avatarConfig, padding, renderToolResult, emptyContent, messagesEndRef, onRespond, approvalConfig, showTurnFooters, agentUsage, onRemoveItems, renderMessageFooter, }: ChatMessageListProps): import("react").JSX.Element;
 export {};