@datalayer/agent-runtimes 1.0.19 → 1.0.21

package/lib/chat/document/EphemeralDocument.d.ts

@@ -40,6 +40,10 @@ export interface EphemeralDocumentProps {
     runtimePodName?: string;
     /** Optional explicit runtime endpoint (agent-node tunnel proxy path). */
     runtimeOverride?: EphemeralRuntimeOverride;
+    /** Optional theme variant override from host chat context. */
+    themeVariant?: string;
+    /** Optional color mode override from host chat context. */
+    colorMode?: 'light' | 'dark' | 'auto';
     /** Optional persisted Lexical editor state (JSON string) to restore. */
     content?: string;
     /** Callback fired when the document's editor state changes. */
@@ -63,5 +67,5 @@ export interface EphemeralDocumentProps {
 /**
  * Renders an in-memory Lexical document backed by a sandbox kernel.
  */
-export declare function EphemeralDocument({ documentId, runtimePodName, runtimeOverride, content, onContentChange, onToolsReady, onKernelChange, collaboration, }: EphemeralDocumentProps): import("react/jsx-runtime").JSX.Element;
+export declare function EphemeralDocument({ documentId, runtimePodName, runtimeOverride, themeVariant, colorMode, content, onContentChange, onToolsReady, onKernelChange, collaboration, }: EphemeralDocumentProps): import("react/jsx-runtime").JSX.Element;
 export default EphemeralDocument;

package/lib/chat/document/EphemeralDocument.js

@@ -108,7 +108,7 @@ function DocumentToolbar({ setIsLinkEditMode, }) {
 /**
  * Renders an in-memory Lexical document backed by a sandbox kernel.
  */
-export function EphemeralDocument({ documentId, runtimePodName, runtimeOverride, content, onContentChange, onToolsReady, onKernelChange, collaboration, }) {
+export function EphemeralDocument({ documentId, runtimePodName, runtimeOverride, themeVariant, colorMode, content, onContentChange, onToolsReady, onKernelChange, collaboration, }) {
     // Real-time collaboration is active only when both a WebSocket endpoint and a
     // room id are supplied. In that mode the shared Loro CRDT is the single source
     // of truth: local content-seeding and undo history are disabled so the local
@@ -296,10 +296,12 @@ export function EphemeralDocument({ documentId, runtimePodName, runtimeOverride,
     // Resolve the active theme/color-mode exactly like the notebook editor so
     // the document honours dark / branded themes instead of always rendering
     // light.
-    const { colorMode, theme: themeVariant } = useThemeStore();
+    const { colorMode: storeColorMode, theme: storeThemeVariant } = useThemeStore();
+    const effectiveColorMode = colorMode ?? storeColorMode;
+    const effectiveThemeVariant = themeVariant ?? storeThemeVariant;
     const systemMode = useSystemColorMode();
-    const themeConfig = getThemeConfig(themeVariant);
-    const resolvedMode = colorMode === 'auto' ? systemMode : colorMode;
+    const themeConfig = getThemeConfig(effectiveThemeVariant);
+    const resolvedMode = effectiveColorMode === 'auto' ? systemMode : effectiveColorMode;
     const modeStyles = resolvedMode === 'dark'
         ? themeConfig.themeStyles.dark
         : themeConfig.themeStyles.light;
@@ -311,7 +313,7 @@ export function EphemeralDocument({ documentId, runtimePodName, runtimeOverride,
             position: 'relative',
             overflow: 'hidden',
             bg: 'canvas.default',
-        }, children: activeServiceManager ? (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsx(JupyterReactTheme, { colormode: resolvedMode, backgroundColor: themeBackground, children: _jsx(Box, { sx: {
+        }, children: activeServiceManager ? (_jsx(DatalayerThemeProvider, { colorMode: effectiveColorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsx(JupyterReactTheme, { colormode: resolvedMode, backgroundColor: themeBackground, children: _jsx(Box, { sx: {
                         position: 'absolute',
                         inset: 0,
                         display: 'flex',

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

@@ -26,6 +26,8 @@ export interface ChatBaseHeaderProps {
     padding: number;
     /** Optional kernel indicator state override from notebook runtime. */
     kernelIndicatorState?: ExecutionState;
+    /** Horizontal placement for the kernel indicator in the title row. */
+    kernelIndicatorPlacement?: 'left' | 'center' | 'right';
     /**
      * Runtime status from agent-runtimes sandbox status stream.
      * Uses the same execution-state model as KernelIndicator.
@@ -69,5 +71,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, 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, 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 {};

package/lib/chat/header/ChatHeaderBase.js

@@ -29,11 +29,13 @@ export function toRuntimeExecutionState(runtimeStatus) {
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export function ChatBaseHeader({ title, subtitle, brandIcon, headerContent, headerActions, showInformation, onInformationClick, padding, kernelIndicatorState, 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, 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, }) {
     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 }));
     return (_jsx(Box, { sx: {
             display: 'flex',
             flexDirection: 'column',
+            bg: 'canvas.default',
             borderBottom: '1px solid',
             borderColor: 'border.default',
         }, children: _jsxs(Box, { sx: {
@@ -47,7 +49,7 @@ export function ChatBaseHeader({ title, subtitle, brandIcon, headerContent, head
                         gap: 2,
                         minWidth: 0,
                         flex: '1 1 auto',
-                    }, children: [brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), 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 })), (title || subtitle) && (_jsxs(Box, { sx: {
+                    }, children: [kernelIndicatorPlacement === 'left' && kernelIndicatorElement, brandIcon || _jsx(AiAgentIcon, { colored: true, size: 20 }), (title || subtitle) && (_jsxs(Box, { sx: {
                                 display: 'flex',
                                 flexDirection: 'column',
                                 minWidth: 0,
@@ -62,7 +64,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: [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: {
+                                    }, 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',

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

@@ -46,4 +46,23 @@ export interface ChatMessageListProps {
      */
     approvalConfig?: ToolApprovalConfig;
 }
+type SubagentAvatarConfig = Required<Pick<AvatarConfig, 'userAvatar' | 'assistantAvatar' | 'showAvatars' | 'avatarSize' | 'userAvatarBg' | 'assistantAvatarBg'>>;
+export interface SubagentChatPanelProps {
+    /** Parent `delegate_task` tool call id used to look up streamed events. */
+    toolCallId: string;
+    /** Subagent name used as a fallback when the tool-call id does not match. */
+    subagentName?: string;
+    /** Fixed viewport height in pixels. */
+    height?: number;
+    /** Avatar configuration for the embedded message list. */
+    avatarConfig?: SubagentAvatarConfig;
+}
+/**
+ * Fixed-height, chat-style viewport for a single delegated subagent run.
+ * Reuses {@link ChatMessageList} so subagent output is formatted exactly like
+ * the primary agent, including tool-call cards and inline approvals. Tool
+ * 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 {};

package/lib/chat/messages/ChatMessageList.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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.
@@ -9,14 +9,15 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  *
  * @module chat/messages/MessageList
  */
-import { useState, useCallback, useMemo, } from 'react';
-import { Text } from '@primer/react';
+import { useState, useCallback, useEffect, useMemo, useRef, } from 'react';
+import { Text, Spinner } from '@primer/react';
+import { DependabotIcon, PersonIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { Streamdown } from 'streamdown';
 import { streamdownMarkdownStyles, streamdownCodeBlockStyles, } from '../styles/streamdownStyles';
 import { ToolCallDisplay } from '../tools/ToolCallDisplay';
 import { isToolCallMessage, getMessageText } from '../../utils';
-import { useAgentRuntimeStore } from '../../stores/agentRuntimeStore';
+import { useAgentRuntimeStore, useAgentRuntimeSubagentActivityByToolCall, agentRuntimeStore, } from '../../stores/agentRuntimeStore';
 // ---------------------------------------------------------------------------
 // Normalize helper
 // ---------------------------------------------------------------------------
@@ -70,6 +71,171 @@ function normalizeAssistantMarkdown(text) {
     });
     return out;
 }
+const SUBAGENT_AVATAR_CONFIG = {
+    userAvatar: _jsx(PersonIcon, { size: 14 }),
+    assistantAvatar: _jsx(DependabotIcon, { size: 14 }),
+    showAvatars: true,
+    avatarSize: 24,
+    userAvatarBg: 'neutral.muted',
+    assistantAvatarBg: 'accent.emphasis',
+};
+/**
+ * Convert streamed subagent activity into the `DisplayItem[]` shape the main
+ * chat renders: text deltas merge into markdown messages, and tool events pair
+ * into tool-call cards (with approval controls when the runtime requests one).
+ * Reasoning (`thinking`) is omitted to mirror the primary agent view.
+ */
+function buildSubagentDisplayItems(events, keyPrefix) {
+    const items = [];
+    const openByName = new Map();
+    let textBuffer = '';
+    let seq = 0;
+    const flushText = () => {
+        if (textBuffer.trim()) {
+            items.push({
+                id: `${keyPrefix}:msg:${seq++}`,
+                role: 'assistant',
+                content: textBuffer,
+                createdAt: new Date(0),
+            });
+        }
+        textBuffer = '';
+    };
+    for (const event of events) {
+        switch (event.phase) {
+            case 'text':
+                textBuffer += event.text ?? '';
+                break;
+            case 'tool_call': {
+                flushText();
+                const id = `${keyPrefix}:tool:${seq++}`;
+                const toolCall = {
+                    id,
+                    type: 'tool-call',
+                    toolCallId: id,
+                    toolName: event.toolName ?? 'tool',
+                    args: event.toolArgs ?? {},
+                    status: 'inProgress',
+                };
+                items.push(toolCall);
+                if (event.toolName) {
+                    openByName.set(event.toolName, toolCall);
+                }
+                break;
+            }
+            case 'tool_result': {
+                flushText();
+                const open = event.toolName
+                    ? openByName.get(event.toolName)
+                    : undefined;
+                if (open) {
+                    open.result = event.result;
+                    open.status = 'complete';
+                    if (event.toolName) {
+                        openByName.delete(event.toolName);
+                    }
+                }
+                else {
+                    const id = `${keyPrefix}:tool:${seq++}`;
+                    items.push({
+                        id,
+                        type: 'tool-call',
+                        toolCallId: id,
+                        toolName: event.toolName ?? 'tool',
+                        args: {},
+                        result: event.result,
+                        status: 'complete',
+                    });
+                }
+                break;
+            }
+            case 'error':
+                flushText();
+                items.push({
+                    id: `${keyPrefix}:msg:${seq++}`,
+                    role: 'assistant',
+                    content: `**\u26a0\ufe0f ${event.error ?? 'Subagent failed'}**`,
+                    createdAt: new Date(0),
+                });
+                break;
+            // `start`, `thinking`, and `end` do not produce display items.
+            default:
+                break;
+        }
+    }
+    flushText();
+    return items;
+}
+/**
+ * Fixed-height, chat-style viewport for a single delegated subagent run.
+ * Reuses {@link ChatMessageList} so subagent output is formatted exactly like
+ * the primary agent, including tool-call cards and inline approvals. Tool
+ * approval decisions are sent over the shared monitoring socket.
+ */
+export function SubagentChatPanel({ toolCallId, subagentName: subagentNameHint, height = 280, avatarConfig = SUBAGENT_AVATAR_CONFIG, }) {
+    const events = useAgentRuntimeSubagentActivityByToolCall(toolCallId, subagentNameHint);
+    const displayItems = useMemo(() => buildSubagentDisplayItems(events, toolCallId), [events, toolCallId]);
+    const messagesEndRef = useRef(null);
+    const subagentName = useMemo(() => {
+        for (const event of events) {
+            if (event.subagentName)
+                return event.subagentName;
+        }
+        return subagentNameHint ?? 'subagent';
+    }, [events, subagentNameHint]);
+    const isDone = useMemo(() => events.some(e => e.phase === 'end' || e.phase === 'error'), [events]);
+    const hasError = useMemo(() => events.some(e => e.phase === 'error'), [events]);
+    // Forward inline tool-approval decisions to the shared monitoring socket.
+    const handleRespond = useCallback(async (_toolCallId, result) => {
+        if (result && typeof result === 'object') {
+            const record = result;
+            if (record.type === 'tool-approval-decision' &&
+                typeof record.approved === 'boolean' &&
+                typeof record.approvalId === 'string') {
+                agentRuntimeStore
+                    .getState()
+                    .sendDecision(record.approvalId, record.approved);
+            }
+        }
+    }, []);
+    useEffect(() => {
+        messagesEndRef.current?.scrollIntoView({ block: 'end' });
+    }, [displayItems]);
+    if (events.length === 0) {
+        return null;
+    }
+    return (_jsxs(Box, { sx: {
+            mt: 2,
+            display: 'flex',
+            flexDirection: 'column',
+            height,
+            width: '100%',
+            border: '1px solid',
+            borderColor: 'border.default',
+            borderRadius: 2,
+            overflow: 'hidden',
+            bg: 'canvas.default',
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1,
+                    px: 2,
+                    py: 1,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.muted',
+                    bg: 'canvas.subtle',
+                    flexShrink: 0,
+                }, children: [_jsx(Box, { sx: {
+                            display: 'flex',
+                            color: hasError ? 'danger.fg' : isDone ? 'success.fg' : 'accent.fg',
+                        }, children: _jsx(DependabotIcon, { size: 14 }) }), _jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.default' }, children: subagentName }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', ml: 'auto' }, children: hasError ? 'failed' : isDone ? 'done' : 'working\u2026' })] }), _jsx(Box, { sx: { flex: 1, minHeight: 0, overflowY: 'auto' }, children: _jsx(ChatMessageList, { displayItems: displayItems, isLoading: !isDone, isStreaming: !isDone, showLoadingIndicator: !isDone, hideMessagesAfterToolUI: false, avatarConfig: avatarConfig, padding: 2, onRespond: handleRespond, messagesEndRef: messagesEndRef, emptyContent: _jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 1,
+                            color: 'fg.muted',
+                            p: 2,
+                        }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 0 }, children: "Starting\u2026" })] }) }) })] }));
+}
 // ---------------------------------------------------------------------------
 // DefaultToolCallRenderer — reads approvals from the Zustand store,
 // sends decisions over the shared WebSocket (no REST polling).
@@ -175,11 +341,16 @@ function DefaultToolCallRenderer({ item, onRespond, }) {
         : externalDecision
             ? 'external'
             : undefined;
-    return (_jsx(ToolCallDisplay, { toolCallId: item.toolCallId, toolName: item.toolName, args: item.args, result: item.result, status: item.status, error: item.error, executionError: item.executionError, codeError: item.codeError, exitCode: item.exitCode, approvalRequired: hasApproval, approvalState: approvalState, approvalDecisionSource: approvalDecisionSource, onApprove: effectiveApprovalId && !decision && !externalDecision
-            ? () => makeDecision('approve')
-            : undefined, onDeny: effectiveApprovalId && !decision && !externalDecision
-            ? () => makeDecision('reject')
-            : undefined, approvalLoading: false }));
+    // `normalizeName` strips underscores, so compare against the normalized form.
+    const isSubagentDelegation = normalizedToolName === 'delegatetask';
+    const delegatedSubagentName = typeof item.args?.subagent_name === 'string'
+        ? item.args.subagent_name
+        : undefined;
+    return (_jsxs(_Fragment, { children: [_jsx(ToolCallDisplay, { toolCallId: item.toolCallId, toolName: item.toolName, args: item.args, result: item.result, status: item.status, error: item.error, executionError: item.executionError, codeError: item.codeError, exitCode: item.exitCode, approvalRequired: hasApproval, approvalState: approvalState, approvalDecisionSource: approvalDecisionSource, onApprove: effectiveApprovalId && !decision && !externalDecision
+                    ? () => makeDecision('approve')
+                    : undefined, onDeny: effectiveApprovalId && !decision && !externalDecision
+                    ? () => makeDecision('reject')
+                    : undefined, approvalLoading: false }), isSubagentDelegation && (_jsx(SubagentChatPanel, { toolCallId: item.toolCallId, subagentName: delegatedSubagentName }))] }));
 }
 // ---------------------------------------------------------------------------
 // Component

package/lib/chat/notebook/EphemeralNotebook.d.ts

@@ -43,6 +43,10 @@ export interface EphemeralNotebookProps {
     onNbformatChange?: (content: INotebookContent) => void;
     /** Optional toolbar component override. */
     toolbarComponent?: EphemeralNotebookToolbarComponent;
+    /** Optional theme variant override from host chat context. */
+    themeVariant?: string;
+    /** Optional color mode override from host chat context. */
+    colorMode?: 'light' | 'dark' | 'auto';
     /**
      * Optional real-time collaboration provider. When supplied, the notebook
      * joins a shared collaborative room (the ydoc becomes the source of truth)
@@ -55,5 +59,5 @@ export interface EphemeralNotebookProps {
 /**
  * Renders an in-memory notebook backed by a sandbox kernel.
  */
-export declare function EphemeralNotebook({ notebookId, runtimePodName, runtimeOverride, cellSidebarMargin, nbformat, onNbformatChange, toolbarComponent, collaborationProvider, }: EphemeralNotebookProps): import("react/jsx-runtime").JSX.Element;
+export declare function EphemeralNotebook({ notebookId, runtimePodName, runtimeOverride, cellSidebarMargin, nbformat, onNbformatChange, toolbarComponent, themeVariant, colorMode, collaborationProvider, }: EphemeralNotebookProps): import("react/jsx-runtime").JSX.Element;
 export default EphemeralNotebook;

package/lib/chat/notebook/EphemeralNotebook.js

@@ -55,7 +55,7 @@ const EPHEMERAL_NOTEBOOK_CONTENT = {
 /**
  * Renders an in-memory notebook backed by a sandbox kernel.
  */
-export function EphemeralNotebook({ notebookId, runtimePodName, runtimeOverride, cellSidebarMargin = 120, nbformat, onNbformatChange, toolbarComponent, collaborationProvider, }) {
+export function EphemeralNotebook({ notebookId, runtimePodName, runtimeOverride, cellSidebarMargin = 120, nbformat, onNbformatChange, toolbarComponent, themeVariant, colorMode, collaborationProvider, }) {
     // The `nbformat` passed to the `Notebook` component MUST stay a stable
     // reference for the lifetime of a given `notebookId`: the underlying
     // `useNotebookModel` hook rebuilds the notebook model (and its context /
@@ -139,7 +139,8 @@ export function EphemeralNotebook({ notebookId, runtimePodName, runtimeOverride,
             }
             try {
                 const token = String(selectedRuntime?.token || '').trim();
-                const wsUrl = String(selectedRuntime?.wsUrl || '').trim() || baseUrl.replace(/^http/, 'ws');
+                const wsUrl = String(selectedRuntime?.wsUrl || '').trim() ||
+                    baseUrl.replace(/^http/, 'ws');
                 const serverSettings = ServerConnection.makeSettings({
                     baseUrl,
                     wsUrl,
@@ -236,10 +237,12 @@ export function EphemeralNotebook({ notebookId, runtimePodName, runtimeOverride,
     // Resolve the active theme/color-mode exactly like the notebook editor
     // (NotebookEditorPanel) so the notebook honours dark / branded themes
     // instead of always rendering light.
-    const { colorMode, theme: themeVariant } = useThemeStore();
+    const { colorMode: storeColorMode, theme: storeThemeVariant } = useThemeStore();
+    const effectiveColorMode = colorMode ?? storeColorMode;
+    const effectiveThemeVariant = themeVariant ?? storeThemeVariant;
     const systemMode = useSystemColorMode();
-    const themeConfig = getThemeConfig(themeVariant);
-    const resolvedMode = colorMode === 'auto' ? systemMode : colorMode;
+    const themeConfig = getThemeConfig(effectiveThemeVariant);
+    const resolvedMode = effectiveColorMode === 'auto' ? systemMode : effectiveColorMode;
     const modeStyles = resolvedMode === 'dark'
         ? themeConfig.themeStyles.dark
         : themeConfig.themeStyles.light;
@@ -252,7 +255,7 @@ export function EphemeralNotebook({ notebookId, runtimePodName, runtimeOverride,
             position: 'relative',
             overflow: 'hidden',
             bg: 'canvas.default',
-        }, children: activeServiceManager ? (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsx(JupyterReactTheme, { colormode: resolvedMode, backgroundColor: themeBackground, children: _jsx(Box, { sx: {
+        }, children: activeServiceManager ? (_jsx(DatalayerThemeProvider, { colorMode: effectiveColorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsx(JupyterReactTheme, { colormode: resolvedMode, backgroundColor: themeBackground, children: _jsx(Box, { sx: {
                         position: 'absolute',
                         inset: 0,
                         display: 'flex',

package/lib/chat/prompt/InputPrompt.js

@@ -76,7 +76,7 @@ export function InputPrompt({ variant = 'text', placeholder = 'Ask anything…',
                     transition: 'border-color 0.2s ease',
                     '&:focus-within': {
                         borderColor: 'accent.fg',
-                        boxShadow: (t) => `0 0 0 1px ${t?.colors?.accent?.fg ?? '#0969da'}`,
+                        boxShadow: (t) => `0 0 0 1px ${t?.colors?.accent?.fg ?? '#16A085'}`,
                     },
                 }, 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 })] }) }) }));
 }

package/lib/chat/tools/SubagentActivity.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Live subagent activity panel.
+ *
+ * Renders the streamed interaction timeline for a `delegate_task` tool call:
+ * text/thinking deltas, nested tool calls and results, and the final output.
+ * Events are sourced from the agent runtime store, keyed by the parent
+ * delegation tool call id.
+ *
+ * @module chat/tools/SubagentActivity
+ */
+import React from 'react';
+export interface SubagentActivityProps {
+    /** Parent `delegate_task` tool call id used to look up streamed events. */
+    toolCallId: string;
+}
+/**
+ * Displays the live activity timeline for a delegated subagent run.
+ * Renders nothing until the first event for `toolCallId` arrives.
+ */
+export declare function SubagentActivity({ toolCallId, }: SubagentActivityProps): React.ReactElement | null;

package/lib/chat/tools/SubagentActivity.js

@@ -0,0 +1,154 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Live subagent activity panel.
+ *
+ * Renders the streamed interaction timeline for a `delegate_task` tool call:
+ * text/thinking deltas, nested tool calls and results, and the final output.
+ * Events are sourced from the agent runtime store, keyed by the parent
+ * delegation tool call id.
+ *
+ * @module chat/tools/SubagentActivity
+ */
+import { useMemo, useState } from 'react';
+import { Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ChevronDownIcon, ChevronRightIcon, DependabotIcon, ToolsIcon, CheckCircleIcon, AlertIcon, LightBulbIcon, } from '@primer/octicons-react';
+import { useAgentRuntimeSubagentActivity } from '../../stores/agentRuntimeStore';
+/**
+ * Collapse the ordered event stream into render segments, merging consecutive
+ * text/thinking deltas into single blocks.
+ */
+function buildSegments(events) {
+    const segments = [];
+    for (const event of events) {
+        const phase = event.phase;
+        if (phase === 'text' || phase === 'thinking') {
+            const kind = phase;
+            const last = segments[segments.length - 1];
+            if (last && last.kind === kind) {
+                last.text = (last.text ?? '') + (event.text ?? '');
+            }
+            else {
+                segments.push({ kind, text: event.text ?? '' });
+            }
+        }
+        else if (phase === 'tool_call') {
+            segments.push({
+                kind: 'tool_call',
+                toolName: event.toolName,
+                toolArgs: event.toolArgs,
+            });
+        }
+        else if (phase === 'tool_result') {
+            segments.push({
+                kind: 'tool_result',
+                toolName: event.toolName,
+                result: event.result,
+            });
+        }
+        else if (phase === 'error') {
+            segments.push({ kind: 'error', error: event.error });
+        }
+        // `start` and `end` phases are represented by header/status, not segments.
+    }
+    return segments;
+}
+/**
+ * Displays the live activity timeline for a delegated subagent run.
+ * Renders nothing until the first event for `toolCallId` arrives.
+ */
+export function SubagentActivity({ toolCallId, }) {
+    const events = useAgentRuntimeSubagentActivity(toolCallId);
+    const [expanded, setExpanded] = useState(true);
+    const subagentName = useMemo(() => {
+        for (const event of events) {
+            if (event.subagentName)
+                return event.subagentName;
+        }
+        return 'subagent';
+    }, [events]);
+    const isDone = useMemo(() => events.some(e => e.phase === 'end' || e.phase === 'error'), [events]);
+    const hasError = useMemo(() => events.some(e => e.phase === 'error'), [events]);
+    const segments = useMemo(() => buildSegments(events), [events]);
+    if (events.length === 0) {
+        return null;
+    }
+    const StatusIcon = hasError
+        ? AlertIcon
+        : isDone
+            ? CheckCircleIcon
+            : DependabotIcon;
+    const statusColor = hasError
+        ? 'danger.fg'
+        : isDone
+            ? 'success.fg'
+            : 'accent.fg';
+    return (_jsxs(Box, { sx: {
+            mt: 1,
+            ml: 2,
+            borderLeft: '2px solid',
+            borderColor: 'border.muted',
+            pl: 2,
+        }, children: [_jsxs(Box, { as: "button", onClick: () => setExpanded(prev => !prev), sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 1,
+                    width: '100%',
+                    border: 'none',
+                    background: 'transparent',
+                    cursor: 'pointer',
+                    p: 0,
+                    color: 'fg.muted',
+                    textAlign: 'left',
+                }, children: [expanded ? (_jsx(ChevronDownIcon, { size: 12 })) : (_jsx(ChevronRightIcon, { size: 12 })), _jsx(Box, { sx: { color: statusColor, display: 'flex' }, children: _jsx(StatusIcon, { size: 14 }) }), _jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.default' }, children: subagentName }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: hasError ? 'failed' : isDone ? 'done' : 'working…' })] }), expanded && (_jsx(Box, { sx: { mt: 1, display: 'flex', flexDirection: 'column', gap: 1 }, children: segments.map((segment, index) => (_jsx(SubagentSegmentView, { segment: segment }, index))) }))] }));
+}
+function SubagentSegmentView({ segment, }) {
+    switch (segment.kind) {
+        case 'text':
+            if (!segment.text)
+                return null;
+            return (_jsx(Text, { sx: {
+                    fontSize: 0,
+                    color: 'fg.default',
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-word',
+                }, children: segment.text }));
+        case 'thinking':
+            if (!segment.text)
+                return null;
+            return (_jsxs(Box, { sx: { display: 'flex', gap: 1, color: 'fg.muted' }, children: [_jsx(Box, { sx: { mt: '2px', flexShrink: 0 }, children: _jsx(LightBulbIcon, { size: 12 }) }), _jsx(Text, { sx: {
+                            fontSize: 0,
+                            fontStyle: 'italic',
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'break-word',
+                        }, children: segment.text })] }));
+        case 'tool_call':
+            return (_jsxs(Box, { sx: { display: 'flex', gap: 1, color: 'fg.muted' }, children: [_jsx(Box, { sx: { mt: '2px', flexShrink: 0 }, children: _jsx(ToolsIcon, { size: 12 }) }), _jsxs(Box, { sx: { minWidth: 0 }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold' }, children: segment.toolName ?? 'tool' }), segment.toolArgs && Object.keys(segment.toolArgs).length > 0 && (_jsx(Text, { as: "pre", sx: {
+                                    fontSize: 0,
+                                    fontFamily: 'mono',
+                                    m: 0,
+                                    mt: '2px',
+                                    whiteSpace: 'pre-wrap',
+                                    wordBreak: 'break-word',
+                                    color: 'fg.muted',
+                                }, children: JSON.stringify(segment.toolArgs) }))] })] }));
+        case 'tool_result':
+            if (!segment.result)
+                return null;
+            return (_jsxs(Box, { sx: { display: 'flex', gap: 1, color: 'fg.muted' }, children: [_jsx(Box, { sx: { mt: '2px', flexShrink: 0, color: 'success.fg' }, children: _jsx(CheckCircleIcon, { size: 12 }) }), _jsx(Text, { as: "pre", sx: {
+                            fontSize: 0,
+                            fontFamily: 'mono',
+                            m: 0,
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'break-word',
+                        }, children: segment.result })] }));
+        case 'error':
+            return (_jsxs(Box, { sx: { display: 'flex', gap: 1, color: 'danger.fg' }, children: [_jsx(Box, { sx: { mt: '2px', flexShrink: 0 }, children: _jsx(AlertIcon, { size: 12 }) }), _jsx(Text, { sx: { fontSize: 0 }, children: segment.error ?? 'Subagent failed' })] }));
+        default:
+            return null;
+    }
+}

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

@@ -4,5 +4,6 @@
  * @module chat/tools
  */
 export { ToolCallDisplay, type ToolCallDisplayProps, type ErrorType, } from './ToolCallDisplay';
+export { SubagentActivity, type SubagentActivityProps, } from './SubagentActivity';
 export { ToolApprovalBanner, type ToolApprovalBannerProps, type PendingApproval, } from './ToolApprovalBanner';
 export { ToolApprovalDialog, useToolApprovalDialog, type ToolApprovalDialogProps, } from './ToolApprovalDialog';

package/lib/chat/tools/index.js

@@ -8,5 +8,6 @@
  * @module chat/tools
  */
 export { ToolCallDisplay, } from './ToolCallDisplay';
+export { SubagentActivity, } from './SubagentActivity';
 export { ToolApprovalBanner, } from './ToolApprovalBanner';
 export { ToolApprovalDialog, useToolApprovalDialog, } from './ToolApprovalDialog';