@datalayer/agent-runtimes 1.3.80 → 1.3.82

package/lib/chat/base/ChatBase.js

@@ -61,6 +61,7 @@ import { useNotebookTools } from '../../tools/adapters/agent-runtimes/notebookHo
 import { useAgentInspectorSink } from '../../components/inspector/agentInspector';
 import { chatInspectorRecorder, } from '../../components/inspector/chatInspect';
 import { loopMessageChange, speakerOf, withLoopMessage } from './loopMessage';
+import { loopStepOf, withLoopStep } from './loopStep';
 // Tracks pending prompts already auto-sent for a given conversation scope.
 // This prevents layout-driven unmount/remount cycles from re-sending prompts.
 const sentPendingPromptKeys = new Set();
@@ -510,7 +511,7 @@ export function ChatBase(props) {
 // ---------------------------------------------------------------------------
 // ChatBaseInner — contains all actual logic
 // ---------------------------------------------------------------------------
-function ChatBaseInner({ title, subtitle, showHeader = false, showTokenUsage = true, showContextRing = false, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = true, showToolsMenu = true, showSkillsMenu = true, disableInputPrompt = false, promptVariant, mentionableAgents: mentionableAgentsProp, showAgentsMenu = true, agents: agentsProp, selectedAgentId, onSelectAgent, disabled: disabledProp, disableReason: disableReasonProp, overlay, launching = false, launchingMessage, autoConnect = true, codemodeEnabled = false, onToggleCodemode, initialModel, availableModels, mcpServers, initialSkills: _initialSkills, className, loadingState, headerActions, kernelIndicatorState, kernelIndicatorPlacement = 'left', kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, themeVariant, colorMode, chatViewMode, onChatViewModeChange, disabledViewModes, 
+function ChatBaseInner({ title, subtitle, showHeader = false, showTokenUsage = true, showContextRing = false, showLoadingIndicator = true, showErrors = true, showInput = true, showModelSelector = true, showToolsMenu = true, showSkillsMenu = true, disableInputPrompt = false, promptVariant, mentionableAgents: mentionableAgentsProp, promptCommands, showAgentsMenu = true, agents: agentsProp, selectedAgentId, onSelectAgent, disabled: disabledProp, disableReason: disableReasonProp, overlay, launching = false, launchingMessage, autoConnect = true, codemodeEnabled = false, onToggleCodemode, initialModel, availableModels, mcpServers, initialSkills: _initialSkills, className, loadingState, headerActions, kernelIndicatorState, kernelIndicatorPlacement = 'left', kernel, kernelEnvironmentName, kernelCpu, kernelMemory, kernelGpu, themeVariant, colorMode, chatViewMode, onChatViewModeChange, disabledViewModes, 
 // Mode selection
 useStore: useStoreMode = true, protocol: protocolRaw, onSendMessage, onSendReady, onLoadingChange, onContextSnapshot, enableStreaming = false, 
 // Extended props
@@ -520,7 +521,7 @@ onToolCallStart, onToolCallComplete, inspector: inspectorGiven,
 // Identity/Authorization props
 onAuthorizationRequired: _onAuthorizationRequired, connectedIdentities, 
 // Conversation persistence
-runtimeId, historyEndpoint, historyAuthToken: _historyAuthToken, 
+runtimeId, thread, historyEndpoint, historyAuthToken: _historyAuthToken, 
 // Pending prompt
 pendingPrompt, contextSnapshot: externalContextSnapshot, mcpStatusData, sandboxStatusData, 
 // Tool approval banner
@@ -1573,7 +1574,20 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     const suppressAssistantTextForToolOnlyRef = useRef(false);
     const hideMessagesAfterToolUIRef = useRef(hideMessagesAfterToolUI);
     hideMessagesAfterToolUIRef.current = hideMessagesAfterToolUI;
-    const threadIdRef = useRef(generateMessageId());
+    const threadIdRef = useRef(thread?.id || generateMessageId());
+    /*
+     * The thread a host gave, kept as it was given at mount (LOOP D-13), and
+     * told when a message is first sent on a thread: the host keeps it.
+     */
+    const threadGivenRef = useRef(thread);
+    const threadStartedRef = useRef(thread?.messages.length ? thread.id : null);
+    const noteThreadStarted = useCallback(() => {
+        const id = threadIdRef.current;
+        if (threadStartedRef.current !== id) {
+            threadStartedRef.current = id;
+            threadGivenRef.current?.onStarted?.(id);
+        }
+    }, []);
     const messagesContainerRef = useRef(null);
     const messagesEndRef = useRef(null);
     const inputRef = useRef(null);
@@ -2131,6 +2145,8 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
     // Set when the next load must come from a fresh snapshot, not the one in
     // the store: what the store holds is the transcript before the change.
     const freshSnapshotRef = useRef(false);
+    // The given thread drawn, by its id: once.
+    const threadSeededRef = useRef(null);
     useEffect(() => {
         if (historyScopeId !== prevHistoryScopeRef.current) {
             if (historyScopeId) {
@@ -2144,6 +2160,24 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         }
         if (!historyScopeId)
             return;
+        /*
+         * A thread the host gave (LOOP D-13): its session's conversation, drawn
+         * once, and never replaced by the runtime's snapshot, which is its
+         * agent's — every session's — not this one's.
+         */
+        const given = threadGivenRef.current;
+        if (given) {
+            if (threadSeededRef.current !== given.id) {
+                threadSeededRef.current = given.id;
+                useConversationStore
+                    .getState()
+                    .setMessages(historyScopeId, given.messages);
+                setDisplayItems(convertHistoryToDisplayItems(given.messages));
+                useConversationStore.getState().markFetched(historyScopeId);
+                setHistoryLoaded(true);
+            }
+            return;
+        }
         if (historyVersion !== historyVersionRef.current) {
             historyVersionRef.current = historyVersion;
             if (historyVersion > 0) {
@@ -2684,6 +2718,12 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                     }
                     break;
                 case 'activity': {
+                    // A step of an application's code, drawn as it runs (LOOP P-16).
+                    const step = loopStepOf(event.activity);
+                    if (step) {
+                        setDisplayItems(prev => withLoopStep(prev, step));
+                        break;
+                    }
                     // An application's code changed a message it sent: its author
                     // said, or the message taken away (LOOP P-15).
                     const change = loopMessageChange(event.activity);
@@ -3004,6 +3044,8 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
                 console.warn('[ChatBase] frontendTools count:', frontendTools?.length ?? 0, 'toolsForRequest:', toolsForRequest.map(t => t.name));
                 const enabledMcpToolNames = getEnabledMcpToolNames();
                 const enabledSkillIds = getEnabledSkillIds();
+                // The thread is opened by this run: its host keeps it (D-13).
+                noteThreadStarted();
                 await adapterRef.current.sendMessage(userMessage, {
                     threadId: threadIdRef.current,
                     messages: allMessages,
@@ -3051,6 +3093,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         enableStreaming,
         getEnabledMcpToolNames,
         getEnabledSkillIds,
+        noteThreadStarted,
     ]);
     // Send pending prompt once history loaded and adapter/handler available
     useEffect(() => {
@@ -3620,7 +3663,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
           somebody typing, and what they would have typed is the message the
           chip sends, not the label on it.
         */
-        typingSuggestions: resolvedSuggestions?.map(item => item.message || item.title), autoFocus: autoFocus, focusTrigger: focusTrigger, padding: padding, onSend: () => handleSend(), onStop: handleStop, disableInputPrompt: disableInputPrompt || disabled || !!overlay || launching, promptVariant: promptVariant, mentionableAgents: mentionableAgents, 
+        typingSuggestions: resolvedSuggestions?.map(item => item.message || item.title), autoFocus: autoFocus, focusTrigger: focusTrigger, padding: padding, onSend: () => handleSend(), onStop: handleStop, disableInputPrompt: disableInputPrompt || disabled || !!overlay || launching, promptVariant: promptVariant, mentionableAgents: mentionableAgents, promptCommands: promptCommands, 
         // The runtime's memory of what was sent to this agent, for the arrow
         // keys — part of the same initial state as the models and tools.
         promptHistory: configQuery.data?.promptHistory, showTokenUsage: showTokenUsage, showContextRing: showContextRing, agentUsage: agentUsage, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, codemodeEnabled: codemodeEnabled, onToggleCodemode: onToggleCodemode, isA2AProtocol: isA2AProtocol, showAgentsMenu: showAgentsMenu, agents: footerAgents, selectedAgentId: selectedAgentId ?? footerAgents[0]?.id, onSelectAgent: onSelectAgent, hasConfigData: !!configQuery.data, hasSkillsData: !!skillsQuery.data, 

package/lib/chat/base/loopStep.d.ts

@@ -0,0 +1,40 @@
+/**
+ * A step of an application's code, shown in the conversation as it runs
+ * (LOOP P-16): the chain of thought.
+ *
+ * AG-UI's `STEP_STARTED` and `STEP_FINISHED` carry a step's name only; the
+ * session API says the step whole beside them, with a `CUSTOM` event named
+ * `loop.step` — `{id, name, kind, parent_id, input, output, error,
+ * started_at, ended_at}` — which the AG-UI adapter hands on as an
+ * `activity`. A step is drawn as the chat draws a tool call: one row,
+ * collapsed, its input and output inside, running until it ends; a nested
+ * step says the step it is in.
+ */
+import type { DisplayItem, ToolCallMessage } from '../../types/chat';
+/** The `CUSTOM` event's name. */
+export declare const LOOP_STEP = "loop.step";
+/** A step, as the event says it. */
+export type LoopStep = {
+    id: string;
+    name: string;
+    kind: string;
+    parentId: string | null;
+    input: unknown;
+    output: unknown;
+    error: string;
+    ended: boolean;
+};
+/** The step an activity says, or `null` when it says none. */
+export declare function loopStepOf(activity: {
+    type: string;
+    data: unknown;
+} | undefined): LoopStep | null;
+/** The id of the row a step is drawn as. */
+export declare const stepCallId: (id: string) => string;
+/** A step as the row the chat draws a tool call as. */
+export declare function stepItem(step: LoopStep, inside?: string): ToolCallMessage;
+/**
+ * The conversation with the step drawn: its row changed in place when it is
+ * there (a step ending), else added after the rest.
+ */
+export declare function withLoopStep(items: DisplayItem[], step: LoopStep): DisplayItem[];

package/lib/chat/base/loopStep.js

@@ -0,0 +1,73 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/** The `CUSTOM` event's name. */
+export const LOOP_STEP = 'loop.step';
+/** The step an activity says, or `null` when it says none. */
+export function loopStepOf(activity) {
+    if (!activity || activity.type !== LOOP_STEP)
+        return null;
+    const data = activity.data;
+    if (!data ||
+        typeof data.id !== 'string' ||
+        !data.id ||
+        typeof data.name !== 'string') {
+        return null;
+    }
+    return {
+        id: data.id,
+        name: data.name,
+        kind: typeof data.kind === 'string' ? data.kind : 'run',
+        parentId: typeof data.parent_id === 'string' && data.parent_id
+            ? data.parent_id
+            : null,
+        input: data.input ?? null,
+        output: data.output ?? null,
+        error: typeof data.error === 'string' ? data.error : '',
+        ended: typeof data.ended_at === 'string' && data.ended_at !== '',
+    };
+}
+/** The id of the row a step is drawn as. */
+export const stepCallId = (id) => `step-${id}`;
+/** A step as the row the chat draws a tool call as. */
+export function stepItem(step, inside) {
+    const callId = stepCallId(step.id);
+    const kind = `${step.kind} step`;
+    return {
+        id: callId,
+        type: 'tool-call',
+        toolCallId: callId,
+        toolName: step.name,
+        args: {
+            kind: step.kind,
+            ...(step.input !== null ? { input: step.input } : {}),
+        },
+        ...(step.ended && !step.error && step.output !== null
+            ? { result: step.output }
+            : {}),
+        status: !step.ended ? 'executing' : step.error ? 'error' : 'complete',
+        ...(step.error ? { error: step.error } : {}),
+        summary: inside ? `${kind}, inside ${inside}` : kind,
+    };
+}
+/**
+ * The conversation with the step drawn: its row changed in place when it is
+ * there (a step ending), else added after the rest.
+ */
+export function withLoopStep(items, step) {
+    const parent = step.parentId
+        ? items.find(item => 'toolCallId' in item &&
+            item.toolCallId === stepCallId(step.parentId))
+        : undefined;
+    const row = stepItem(step, parent && 'toolName' in parent ? parent.toolName : undefined);
+    let found = false;
+    const changed = items.map(item => {
+        if ('toolCallId' in item && item.toolCallId === row.toolCallId) {
+            found = true;
+            return row;
+        }
+        return item;
+    });
+    return found ? changed : [...items, row];
+}

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.Element;
+export declare function McpStatusIndicator({ data: wsData, apiBase, authToken, }: McpStatusIndicatorProps): import("react").JSX.Element | null;
 export default McpStatusIndicator;

package/lib/chat/indicators/McpStatusIndicator.js

@@ -10,7 +10,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  *
  * Aggregate logic
  * ───────────────
- * - no servers array / empty → "none"  (gray, hidden or subtle)
+ * - no servers array / empty → "none"  (not drawn: nothing to report)
  * - any server "starting"   → "starting"  (amber, pulsing)
  * - any server "failed"     → "failed"    (red)
  * - all servers "started"   → "started"   (green)
@@ -35,8 +35,6 @@ function deriveAggregate(servers) {
     return 'not_started';
 }
 function buildTooltipText(aggregate, servers) {
-    if (aggregate === 'none')
-        return 'No MCP Server defined';
     const lines = [MCP_STATUS_LABELS[aggregate]];
     for (const s of servers) {
         let detail = `• ${s.id}: ${s.status}`;
@@ -75,9 +73,17 @@ export function McpStatusIndicator({ data: wsData, apiBase, authToken, }) {
     const servers = effectiveData?.servers ?? [];
     const aggregate = useMemo(() => deriveAggregate(servers), [servers]);
     const tooltipText = useMemo(() => buildTooltipText(aggregate, servers), [aggregate, servers]);
-    // Show a subtle gray dot when no MCP servers are configured.
-    // The tooltip tells the user none are defined.
-    return (_jsx(Tooltip, { text: tooltipText, direction: "n", children: _jsx("button", { type: "button", "aria-label": tooltipText, style: {
+    /*
+     * Nothing drawn when the agent has no MCP server (LOOP H-21): a control
+     * that only says so was read out as *No MCP Server defined* in every
+     * composer, an in-page agent's and an application's alike. When there are
+     * some, it is named by their state, and the tooltip — its description —
+     * lists them.
+     */
+    if (aggregate === 'none') {
+        return null;
+    }
+    return (_jsx(Tooltip, { text: tooltipText, direction: "n", children: _jsx("button", { type: "button", "aria-label": MCP_STATUS_LABELS[aggregate], style: {
                 display: 'inline-flex',
                 alignItems: 'center',
                 justifyContent: 'center',
@@ -98,6 +104,7 @@ export function McpStatusIndicator({ data: wsData, apiBase, authToken, }) {
                     ...(aggregate === 'starting' && {
                         animation: 'mcp-pulse 1.5s ease-in-out infinite',
                     }),
+                    '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
                 } }) }) }));
 }
 export default McpStatusIndicator;

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.Element;
+export declare function SkillsStatusIndicator({ skillsCount, enabledCount, loading, }: SkillsStatusIndicatorProps): import("react").JSX.Element | null;
 export default SkillsStatusIndicator;

package/lib/chat/indicators/SkillsStatusIndicator.js

@@ -7,7 +7,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * SkillsStatusIndicator — Round status dot representing skill state.
  *
  * Aggregate logic:
- * - no skills configured -> none (gray)
+ * - no skills configured -> none (not drawn)
  * - skills loading       -> loading (amber, pulsing)
  * - some enabled         -> active (green)
  * - none enabled         -> inactive (gray)
@@ -48,8 +48,6 @@ function deriveAggregate(skillsCount, enabledCount, loading) {
     return 'inactive';
 }
 function buildTooltip(aggregate, skillsCount, enabledCount) {
-    if (aggregate === 'none')
-        return 'No Skills defined';
     if (aggregate === 'loading') {
         return `Skills loading (${enabledCount}/${skillsCount} enabled)`;
     }
@@ -62,6 +60,11 @@ export function SkillsStatusIndicator({ skillsCount, enabledCount, loading = fal
     useInjectKeyframes();
     const aggregate = useMemo(() => deriveAggregate(skillsCount, enabledCount, loading), [skillsCount, enabledCount, loading]);
     const tooltipText = useMemo(() => buildTooltip(aggregate, skillsCount, enabledCount), [aggregate, skillsCount, enabledCount]);
+    // Nothing drawn when the agent has no skill (LOOP H-21): a control that
+    // only says so was read out as *No Skills defined* in every composer.
+    if (aggregate === 'none') {
+        return null;
+    }
     return (_jsx(Tooltip, { text: tooltipText, direction: "n", children: _jsx("button", { type: "button", "aria-label": tooltipText, style: {
                 display: 'inline-flex',
                 alignItems: 'center',
@@ -83,6 +86,7 @@ export function SkillsStatusIndicator({ skillsCount, enabledCount, loading = fal
                     ...(aggregate === 'loading' && {
                         animation: 'skills-pulse 1.5s ease-in-out infinite',
                     }),
+                    '@media (prefers-reduced-motion: reduce)': { animation: 'none' },
                 } }) }) }));
 }
 export default SkillsStatusIndicator;

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

@@ -14,6 +14,7 @@ import type { BuiltinTool, ContextSnapshotData, MCPServerConfig, McpToolsetsStat
 import { type InputPromptVariant } from './InputPromptBase';
 import type { PromptSuggestion } from './menus/SuggestionsMenu';
 import type { MentionableAgent } from './plugins/AgentMentionPlugin';
+import type { PromptCommand } from './plugins/CommandPlugin';
 /** One agent the footer may offer. */
 import type { FooterAgent } from '../../types/chat';
 import type { Decisions } from '../base/modelChoice';
@@ -111,6 +112,8 @@ export interface InputPromptProps {
     promptVariant?: InputPromptVariant;
     /** Agents the prompt may address by typing `@`. Lexical only. */
     mentionableAgents?: MentionableAgent[];
+    /** Commands listed while `/` is typed, before the prompt's own (LOOP P-19). Lexical only. */
+    promptCommands?: PromptCommand[];
     /**
      * What was sent to this agent before this page loaded, oldest first.
      *
@@ -223,4 +226,4 @@ export interface InputPromptProps {
     /** Pre-fetched MCP status from WebSocket — bypasses REST polling */
     mcpStatusData?: McpToolsetsStatusResponse | null;
 }
-export declare function InputPrompt({ input, setInput, isLoading, kernelStatus, connectionConfirmed, placeholder, typingSuggestions, autoFocus, focusTrigger, padding, placement, floatingAnchor, draggable, container, footerExtras, leadingPanel, trailingPanel, onSend, onStop, disableInputPrompt, promptVariant, mentionableAgents, promptHistory, headerContent, showAgentsMenu, showInlineAgentsMenu, agents, selectedAgentId, onSelectAgent, showTokenUsage, showContextRing, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, showSuggestionsMenu, suggestions, codemodeEnabled, onToggleCodemode, isA2AProtocol, hasConfigData, hasSkillsData, configLoading, models, decisions, selectedModel, onModelSelect, availableTools, availableFrontendTools, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, approvedMcpTools, onToggleMcpToolApproval, skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, approvedSkills, onToggleSkillApproval, apiBase, authToken, mcpStatusData, }: InputPromptProps): import("react").JSX.Element;
+export declare function InputPrompt({ input, setInput, isLoading, kernelStatus, connectionConfirmed, placeholder, typingSuggestions, autoFocus, focusTrigger, padding, placement, floatingAnchor, draggable, container, footerExtras, leadingPanel, trailingPanel, onSend, onStop, disableInputPrompt, promptVariant, mentionableAgents, promptCommands, promptHistory, headerContent, showAgentsMenu, showInlineAgentsMenu, agents, selectedAgentId, onSelectAgent, showTokenUsage, showContextRing, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, showSuggestionsMenu, suggestions, codemodeEnabled, onToggleCodemode, isA2AProtocol, hasConfigData, hasSkillsData, configLoading, models, decisions, selectedModel, onModelSelect, availableTools, availableFrontendTools, mcpServers, enabledMcpTools, enabledMcpToolCount, onToggleMcpTool, onToggleAllMcpServerTools, approvedMcpTools, onToggleMcpToolApproval, skills, skillsLoading, enabledSkills, onToggleSkill, onToggleAllSkills, approvedSkills, onToggleSkillApproval, apiBase, authToken, mcpStatusData, }: InputPromptProps): import("react").JSX.Element;

package/lib/chat/prompt/InputPrompt.js

@@ -29,7 +29,7 @@ const EMPTY_ID_SET = new Set();
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export function InputPrompt({ input, setInput, isLoading, kernelStatus, connectionConfirmed, placeholder, typingSuggestions, autoFocus, focusTrigger, padding, placement, floatingAnchor = 'bottom', draggable = false, container, footerExtras, leadingPanel, trailingPanel, onSend, onStop, disableInputPrompt = false, promptVariant, mentionableAgents, promptHistory, headerContent, showAgentsMenu = false, showInlineAgentsMenu = true, agents = [], selectedAgentId, onSelectAgent, showTokenUsage, showContextRing = false, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, showSuggestionsMenu = true, suggestions, codemodeEnabled, onToggleCodemode, isA2AProtocol, hasConfigData, hasSkillsData, configLoading = false, models = [], decisions, selectedModel = '', onModelSelect = () => { }, availableTools = [], availableFrontendTools = [], mcpServers = [], enabledMcpTools = EMPTY_TOOL_MAP, enabledMcpToolCount = 0, onToggleMcpTool = () => { }, onToggleAllMcpServerTools = () => { }, approvedMcpTools = EMPTY_TOOL_MAP, onToggleMcpToolApproval = () => { }, skills = [], skillsLoading = false, enabledSkills = EMPTY_ID_SET, onToggleSkill = () => { }, onToggleAllSkills = () => { }, approvedSkills = EMPTY_ID_SET, onToggleSkillApproval = () => { }, apiBase, authToken, mcpStatusData, }) {
+export function InputPrompt({ input, setInput, isLoading, kernelStatus, connectionConfirmed, placeholder, typingSuggestions, autoFocus, focusTrigger, padding, placement, floatingAnchor = 'bottom', draggable = false, container, footerExtras, leadingPanel, trailingPanel, onSend, onStop, disableInputPrompt = false, promptVariant, mentionableAgents, promptCommands, promptHistory, headerContent, showAgentsMenu = false, showInlineAgentsMenu = true, agents = [], selectedAgentId, onSelectAgent, showTokenUsage, showContextRing = false, agentUsage, showModelSelector, showToolsMenu, showSkillsMenu, showSuggestionsMenu = true, suggestions, codemodeEnabled, onToggleCodemode, isA2AProtocol, hasConfigData, hasSkillsData, configLoading = false, models = [], decisions, selectedModel = '', onModelSelect = () => { }, availableTools = [], availableFrontendTools = [], mcpServers = [], enabledMcpTools = EMPTY_TOOL_MAP, enabledMcpToolCount = 0, onToggleMcpTool = () => { }, onToggleAllMcpServerTools = () => { }, approvedMcpTools = EMPTY_TOOL_MAP, onToggleMcpToolApproval = () => { }, skills = [], skillsLoading = false, enabledSkills = EMPTY_ID_SET, onToggleSkill = () => { }, onToggleAllSkills = () => { }, approvedSkills = EMPTY_ID_SET, onToggleSkillApproval = () => { }, apiBase, authToken, mcpStatusData, }) {
     const isKernelBusy = kernelStatus === 'busy';
     /*
      * Each menu is offered when it is switched on *and* has something behind it.
@@ -105,7 +105,7 @@ export function InputPrompt({ input, setInput, isLoading, kernelStatus, connecti
      * from the start; this shows it.
      */
     const hasContext = Boolean(agentUsage && !agentUsage.error);
-    const body = (_jsxs(Box, { children: [leadingPanel, _jsx(InputPromptBase, { variant: promptVariant, mentionableAgents: mentionableAgents, promptHistory: promptHistory, 
+    const body = (_jsxs(Box, { children: [leadingPanel, _jsx(InputPromptBase, { variant: promptVariant, mentionableAgents: mentionableAgents, promptCommands: promptCommands, promptHistory: promptHistory, 
                 /*
                   Whatever the host puts inside the prompt, and the agent chip beside
                   it. Both, rather than either: a host contributing its own controls

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

@@ -17,6 +17,7 @@
 import type { ReactNode } from 'react';
 import type { PromptStack } from './stack';
 import type { MentionableAgent } from './plugins/AgentMentionPlugin';
+import type { PromptCommand } from './plugins/CommandPlugin';
 /** Input variant type. */
 export type InputPromptVariant = 'text' | 'lexical';
 /**
@@ -75,6 +76,8 @@ export interface InputPromptBaseProps {
      * suggestion a person cannot see is worse than none.
      */
     mentionableAgents?: MentionableAgent[];
+    /** Commands listed while `/` is typed, before the prompt's own (LOOP P-19). Lexical only. */
+    promptCommands?: PromptCommand[];
     /**
      * What was sent to this agent before this composer mounted, oldest first.
      *
@@ -108,5 +111,5 @@ export interface InputPromptBaseProps {
 /**
  * InputPromptBase — the editor, its header and its footer with header, input area, and footer.
  */
-export declare function InputPromptBase({ variant, placeholder, typingSuggestions, isLoading, isKernelBusy, onSend, onStop, autoFocus, focusTrigger, showBorderTop, showBackground, padding, disabled, readOnly, mentionableAgents, promptHistory, sx, value: controlledValue, onChange: controlledOnChange, headerContent, headerStacks, footerContent, footerStacks, footerRightContent, }: InputPromptBaseProps): import("react").JSX.Element;
+export declare function InputPromptBase({ variant, placeholder, typingSuggestions, isLoading, isKernelBusy, onSend, onStop, autoFocus, focusTrigger, showBorderTop, showBackground, padding, disabled, readOnly, mentionableAgents, promptCommands, promptHistory, sx, value: controlledValue, onChange: controlledOnChange, headerContent, headerStacks, footerContent, footerStacks, footerRightContent, }: InputPromptBaseProps): import("react").JSX.Element;
 export default InputPromptBase;

package/lib/chat/prompt/InputPromptBase.js

@@ -10,7 +10,7 @@ import { usePromptHistory } from './promptHistory';
 /**
  * InputPromptBase — the editor, its header and its footer with header, input area, and footer.
  */
-export function InputPromptBase({ variant = 'lexical', placeholder = 'Ask anything…', typingSuggestions, isLoading = false, isKernelBusy = false, onSend, onStop, autoFocus = false, focusTrigger, showBorderTop = true, showBackground = true, padding = 3, disabled = false, readOnly = false, mentionableAgents, promptHistory, sx, value: controlledValue, onChange: controlledOnChange, headerContent, headerStacks, footerContent, footerStacks, footerRightContent, }) {
+export function InputPromptBase({ variant = 'lexical', placeholder = 'Ask anything…', typingSuggestions, isLoading = false, isKernelBusy = false, onSend, onStop, autoFocus = false, focusTrigger, showBorderTop = true, showBackground = true, padding = 3, disabled = false, readOnly = false, mentionableAgents, promptCommands, promptHistory, sx, value: controlledValue, onChange: controlledOnChange, headerContent, headerStacks, footerContent, footerStacks, footerRightContent, }) {
     // ---- Controlled / uncontrolled state -----------------------------------
     const [internalInput, setInternalInput] = useState('');
     const input = controlledValue !== undefined ? controlledValue : internalInput;
@@ -221,6 +221,6 @@ export function InputPromptBase({ variant = 'lexical', placeholder = 'Ask anythi
                         borderColor: 'accent.fg',
                         boxShadow: (t) => `0 0 0 1px ${t?.colors?.accent?.fg ?? '#16A085'}`,
                     },
-                }, children: [_jsx(InPromptHeader, { stacks: headerStacks, children: headerContent }), variant === 'lexical' ? (_jsx(InputPromptLexical, { value: input, onChange: handleChange, placeholder: animatedPlaceholder, disabled: isLoading || disabled, readOnly: readOnly, onSubmit: handleSend, onHistory: navigateHistory, autoFocus: autoFocus, focusSignal: lexicalFocusSignal, mentionableAgents: mentionableAgents })) : (_jsx(InputPromptText, { value: input, onChange: handleChange, placeholder: animatedPlaceholder, disabled: isLoading || disabled, readOnly: readOnly, onSubmit: handleSend, onHistory: navigateHistory, inputRef: inputRef })), _jsx(InPromptFooter, { stacks: footerStacks, isLoading: isLoading, isKernelBusy: isKernelBusy, sendDisabled: !input.trim() || disabled || readOnly, onSend: handleSend, onStop: handleStop, rightContent: footerRightContent, children: footerContent })] }) }) }));
+                }, children: [_jsx(InPromptHeader, { stacks: headerStacks, children: headerContent }), variant === 'lexical' ? (_jsx(InputPromptLexical, { value: input, onChange: handleChange, placeholder: animatedPlaceholder, disabled: isLoading || disabled, readOnly: readOnly, onSubmit: handleSend, onHistory: navigateHistory, autoFocus: autoFocus, focusSignal: lexicalFocusSignal, mentionableAgents: mentionableAgents, promptCommands: promptCommands })) : (_jsx(InputPromptText, { value: input, onChange: handleChange, placeholder: animatedPlaceholder, disabled: isLoading || disabled, readOnly: readOnly, onSubmit: handleSend, onHistory: navigateHistory, inputRef: inputRef })), _jsx(InPromptFooter, { stacks: footerStacks, isLoading: isLoading, isKernelBusy: isKernelBusy, sendDisabled: !input.trim() || disabled || readOnly, onSend: handleSend, onStop: handleStop, rightContent: footerRightContent, children: footerContent })] }) }) }));
 }
 export default InputPromptBase;

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

@@ -1,4 +1,5 @@
 import { type MentionableAgent } from './plugins/AgentMentionPlugin';
+import { type PromptCommand } from './plugins/CommandPlugin';
 import type { HistoryDirection } from './promptHistory';
 export interface InputPromptLexicalProps {
     /** Current input value */
@@ -30,6 +31,11 @@ export interface InputPromptLexicalProps {
      * choose between, and a menu on every `@` would be in the way.
      */
     mentionableAgents?: MentionableAgent[];
+    /**
+     * Commands listed while `/` is typed, before the prompt's own: an
+     * application's (LOOP P-19).
+     */
+    promptCommands?: PromptCommand[];
 }
-export declare function InputPromptLexical({ value, onChange, placeholder, disabled, readOnly, onSubmit, onHistory, autoFocus, focusSignal, mentionableAgents, }: InputPromptLexicalProps): import("react").JSX.Element;
+export declare function InputPromptLexical({ value, onChange, placeholder, disabled, readOnly, onSubmit, onHistory, autoFocus, focusSignal, mentionableAgents, promptCommands, }: InputPromptLexicalProps): import("react").JSX.Element;
 export default InputPromptLexical;

package/lib/chat/prompt/InputPromptLexical.js

@@ -28,7 +28,7 @@ import { PlainTextExtension } from '@lexical/plain-text';
 import { MentionNode } from './plugins/MentionNode';
 import { Box } from '@datalayer/primer-addons';
 import { AgentMentionPlugin, } from './plugins/AgentMentionPlugin';
-import { CommandPlugin, PROMPT_COMMANDS } from './plugins/CommandPlugin';
+import { CommandPlugin, PROMPT_COMMANDS, } from './plugins/CommandPlugin';
 // ---- Lexical extension (plain-text only) ---------------------------------
 // Module scope on purpose: the composer rebuilds the editor whenever this
 // reference changes.
@@ -265,7 +265,7 @@ function ReadOnlyPlugin({ readOnly }) {
     }, [editor, readOnly]);
     return null;
 }
-export function InputPromptLexical({ value, onChange, placeholder = 'Ask anything…', disabled = false, readOnly = false, onSubmit, onHistory, autoFocus = false, focusSignal, mentionableAgents, }) {
+export function InputPromptLexical({ value, onChange, placeholder = 'Ask anything…', disabled = false, readOnly = false, onSubmit, onHistory, autoFocus = false, focusSignal, mentionableAgents, promptCommands, }) {
     return (_jsx(Box, { sx: {
             /*
               The placeholder is positioned against this box.
@@ -321,6 +321,8 @@ export function InputPromptLexical({ value, onChange, placeholder = 'Ask anythin
                         fontSize: 14,
                         lineHeight: '1.5',
                         padding: '2px 0',
-                    } }), _jsx(SyncPlugin, { value: value, onChange: onChange }), _jsx(ReadOnlyPlugin, { readOnly: readOnly || disabled }), _jsx(EnterSubmitPlugin, { onSubmit: onSubmit, disabled: disabled, readOnly: readOnly }), _jsx(AutoFocusPlugin, { autoFocus: autoFocus, focusSignal: focusSignal }), _jsx(CommandPlugin, { commands: PROMPT_COMMANDS }), mentionableAgents?.length ? (_jsx(AgentMentionPlugin, { agents: mentionableAgents })) : null, _jsx(HistoryPlugin, { onHistory: onHistory, disabled: disabled, readOnly: readOnly })] }) }));
+                    } }), _jsx(SyncPlugin, { value: value, onChange: onChange }), _jsx(ReadOnlyPlugin, { readOnly: readOnly || disabled }), _jsx(EnterSubmitPlugin, { onSubmit: onSubmit, disabled: disabled, readOnly: readOnly }), _jsx(AutoFocusPlugin, { autoFocus: autoFocus, focusSignal: focusSignal }), _jsx(CommandPlugin, { commands: promptCommands?.length
+                        ? [...promptCommands, ...PROMPT_COMMANDS]
+                        : PROMPT_COMMANDS }), mentionableAgents?.length ? (_jsx(AgentMentionPlugin, { agents: mentionableAgents })) : null, _jsx(HistoryPlugin, { onHistory: onHistory, disabled: disabled, readOnly: readOnly })] }) }));
 }
 export default InputPromptLexical;

package/lib/components/teams/index.d.ts

@@ -9,6 +9,7 @@
 export * from './a2aTeamFlow';
 export * from './teamConnections';
 export * from './useA2ATeam';
+export * from './usePeerSandbox';
 export * from './A2ATeamGraph';
 export * from './TeamNotebook';
 export * from './NotebookPreview';

package/lib/components/teams/index.js

@@ -13,6 +13,7 @@
 export * from './a2aTeamFlow';
 export * from './teamConnections';
 export * from './useA2ATeam';
+export * from './usePeerSandbox';
 export * from './A2ATeamGraph';
 export * from './TeamNotebook';
 export * from './NotebookPreview';

package/lib/components/teams/usePeerSandbox.d.ts

@@ -0,0 +1,13 @@
+import { type AssistantSandbox } from '../../chat/assistant/assistantDetails';
+/**
+ * The runtime an A2A address is served from: its base, before
+ * `/api/v1/a2a/agents/<id>`.
+ */
+export declare function runtimeBaseOfA2AUrl(url: string): string;
+/**
+ * The sandbox of the runtime a peer answers from, read again each time
+ * `refresh` changes (when a turn ends, it may have started one). Until the
+ * runtime says, or when it does not answer, the peer's sandbox is offered
+ * as not running, with the runtime it would be on.
+ */
+export declare function usePeerSandbox(a2aUrl: string, refresh?: unknown): AssistantSandbox;

package/lib/components/teams/usePeerSandbox.js

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * A peer's code sandbox, for its *Code Sandbox Details…*: the codemode
+ * sandbox of the runtime it is served from, as that runtime reports it.
+ *
+ * @module components/teams/usePeerSandbox
+ */
+import { useEffect, useState } from 'react';
+import { assistantSandboxOf, } from '../../chat/assistant/assistantDetails';
+/**
+ * The runtime an A2A address is served from: its base, before
+ * `/api/v1/a2a/agents/<id>`.
+ */
+export function runtimeBaseOfA2AUrl(url) {
+    return url
+        .replace(/\/api\/v1\/a2a\/agents\/[^/]+\/?$/, '')
+        .replace(/\/+$/, '');
+}
+/**
+ * The sandbox of the runtime a peer answers from, read again each time
+ * `refresh` changes (when a turn ends, it may have started one). Until the
+ * runtime says, or when it does not answer, the peer's sandbox is offered
+ * as not running, with the runtime it would be on.
+ */
+export function usePeerSandbox(a2aUrl, refresh) {
+    const serverUrl = runtimeBaseOfA2AUrl(a2aUrl);
+    const [sandbox, setSandbox] = useState({
+        kind: 'runtime',
+        status: 'not running',
+        serverUrl,
+    });
+    useEffect(() => {
+        let current = true;
+        fetch(`${serverUrl}/api/v1/configure/codemode/status`)
+            .then(response => (response.ok ? response.json() : null))
+            .then((status) => {
+            if (!current) {
+                return;
+            }
+            setSandbox(assistantSandboxOf(status?.sandbox, { serverUrl }) ?? {
+                kind: 'runtime',
+                status: 'not running',
+                serverUrl,
+            });
+        })
+            .catch(() => {
+            if (current) {
+                setSandbox({ kind: 'runtime', status: 'unreachable', serverUrl });
+            }
+        });
+        return () => {
+            current = false;
+        };
+    }, [serverUrl, refresh]);
+    return sandbox;
+}

package/lib/examples/AgentA2ATeamExample.js

@@ -10,7 +10,7 @@ import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { useBrowserInference } from '../hooks/useBrowserInference';
 import { readJwtClaims, tokenLifetimeMs, useAnonymousSessionStore, } from '../runtimes/browser/anonymousToken';
 import { connectA2APeer } from '../runtimes/browser/a2aPeer';
-import { A2ATeamGraph, NOTEBOOK_AND_WORDS, teamConnectionsOf, teamToolClassifier, useA2ATeam, } from '../components/teams';
+import { A2ATeamGraph, NOTEBOOK_AND_WORDS, teamConnectionsOf, teamToolClassifier, useA2ATeam, usePeerSandbox, } from '../components/teams';
 import { ACCOUNTING_APP_0_0_1, SALES_APP_0_0_1 } from '../specs/apps';
 import { AgentInspector, classifyToolCall, inspectA2AFetch, useAgentInspector, } from '../components/inspector';
 import { SALES_AND_ACCOUNTING_TEAM_SPEC_0_0_1 } from '../specs/teams/teams';
@@ -89,6 +89,9 @@ function AgentA2ATeam() {
         accept: NOTEBOOK_AND_WORDS,
         inspector,
     });
+    // Accounting works in codemode: its sandbox, on the runtime it answers
+    // from, read again when a turn ends.
+    const accountingSandbox = usePeerSandbox(accountingUrl, team.busy);
     // Sales' starters, in its balloon while it waits for a question.
     const suggestions = useMemo(() => (SALES.interface.starters ?? []).map(starter => ({
         label: starter.label,
@@ -142,7 +145,8 @@ function AgentA2ATeam() {
                     }, peer: {
                         id: ACCOUNTING.id,
                         name: ACCOUNTING.name,
-                        emoji: ACCOUNTING.emoji,
+                        // Its face as its card says it, once it is reached.
+                        emoji: peer?.face?.emoji ?? ACCOUNTING.emoji,
                         character: ACCOUNTING.interface.assistant ?? 'wizard',
                         where: accountingWhere,
                         persona: team.peerPersona,
@@ -150,6 +154,7 @@ function AgentA2ATeam() {
                         history: team.peerHistory,
                         connections: ACCOUNTING_CONNECTIONS,
                         inspector,
+                        sandbox: accountingSandbox,
                         about: {
                             name: ACCOUNTING.name,
                             spec: `${ACCOUNTING.id}:${ACCOUNTING.version}`,