@datalayer/agent-runtimes 1.3.81 → 1.3.83

package/lib/chat/assistant/SpeechBalloon.js

@@ -132,7 +132,22 @@ export function SpeechBalloon({ text, more = false, onOpen, above, side = 'above
                 borderColor: current ? 'accent.muted' : 'border.default',
                 transform: side === 'above' ? 'rotate(45deg)' : 'rotate(225deg)',
             },
-        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'flex-start', gap: 1 }, children: [current && !approval ? (_jsx(Box, { as: "button", type: "button", "data-balloon-peek": "", onClick: onOpen, sx: {
+        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'flex-start', gap: 1 }, children: [current && !approval ? (
+                    // Not a <button>: the body draws the chat's tool card, a button of
+                    // its own, and a click on that card is the card's alone.
+                    _jsx(Box, { role: "button", tabIndex: 0, "data-balloon-peek": "", onClick: (event) => {
+                            const inner = event.target.closest('button');
+                            if (inner && event.currentTarget.contains(inner)) {
+                                return;
+                            }
+                            onOpen();
+                        }, onKeyDown: (event) => {
+                            if (event.target === event.currentTarget &&
+                                (event.key === 'Enter' || event.key === ' ')) {
+                                event.preventDefault();
+                                onOpen();
+                            }
+                        }, sx: {
                             flex: 1,
                             minWidth: 0,
                             m: 0,

package/lib/chat/base/ChatBase.js

@@ -511,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
@@ -521,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
@@ -1574,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);
@@ -2132,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) {
@@ -2145,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) {
@@ -3011,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,
@@ -3058,6 +3093,7 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
         enableStreaming,
         getEnabledMcpToolNames,
         getEnabledSkillIds,
+        noteThreadStarted,
     ]);
     // Send pending prompt once history loaded and adapter/handler available
     useEffect(() => {
@@ -3627,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/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/a2ui/datalayer/Form.js

@@ -12,6 +12,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * its action is dispatched, so the action's context reads them. A form the
  * schema refuses says why beside each field and sends nothing.
  *
+ * A form without an action is a set of settings (C-16) — an application's
+ * `interface.settings` drawn beside its conversation: no button, its values
+ * written where `values` points as they are filled, for the next run to take;
+ * the runtime checks them against the same schema.
+ *
  * @module components/a2ui/datalayer/Form
  */
 import { useEffect, useMemo, useState } from 'react';
@@ -34,11 +39,23 @@ export function FormView({ props }) {
     useEffect(() => {
         setLocal(JSON.parse(shownKey));
     }, [shownKey]);
-    const uiSchema = useMemo(() => ({ 'ui:submitButtonOptions': { submitText: submitLabel } }), [submitLabel]);
+    // Without an action, nothing is sent: no button, the values written as filled.
+    const live = action === undefined;
+    const uiSchema = useMemo(() => ({
+        'ui:submitButtonOptions': live
+            ? { norender: true }
+            : { submitText: submitLabel },
+    }), [live, submitLabel]);
     const problem = schema.type !== undefined && schema.type !== 'object'
         ? 'Its fields are not an object schema: a form asks for several named values.'
         : null;
-    return (_jsx(BlockFrame, { title: title, label: "Form", weight: props.weight, testId: "a2ui-form", children: problem ? (_jsx(Problem, { children: problem })) : (_jsx(SchemaForm, { schema: schema, uiSchema: uiSchema, formData: values, validator: validator, liveValidate: touched, onBlur: () => setTouched(true), onError: () => setTouched(true), showErrorList: false, onChange: event => setLocal((event.formData ?? {})), onSubmit: event => {
+    return (_jsx(BlockFrame, { title: title, label: "Form", weight: props.weight, testId: "a2ui-form", children: problem ? (_jsx(Problem, { children: problem })) : (_jsx(SchemaForm, { schema: schema, uiSchema: uiSchema, formData: values, validator: validator, liveValidate: touched, onBlur: () => setTouched(true), onError: () => setTouched(true), showErrorList: false, onChange: event => {
+                const filled = (event.formData ?? {});
+                setLocal(filled);
+                if (live) {
+                    setValues(filled);
+                }
+            }, onSubmit: event => {
                 setValues((event.formData ?? {}));
                 action?.();
             } })) }));

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}`,

package/lib/loop/apps/AppComposer.d.ts

@@ -0,0 +1,31 @@
+/**
+ * An application's commands and modes in the composer (LOOP P-19).
+ *
+ * - Each of its **commands** is a workspace command (`LoopCommand`), listed
+ *   in the composer's `/` menu (`composer`): picking it writes `/<name> `,
+ *   and sending runs it — its prompt goes to the agent, the words typed
+ *   after it in place of `{input}`.
+ * - Its **modes** are switches beside the composer (`LoopSlots.promptAction`),
+ *   one menu each; the option picked goes with every run as
+ *   `forwardedProps.loop.modes` (`LoopRunProps`), and the runtime tells the
+ *   agent its instructions, on the model it names, for that run.
+ *
+ * @module loop/apps/AppComposer
+ */
+import type { JSX } from 'react';
+import type { AppSpec } from '../../types/agentspecs';
+/** The plugin's name, before the application's id. */
+export declare const APP_COMPOSER_PLUGIN_NAME = "@datalayer/loop-plugin-app-composer";
+/**
+ * The plugin that puts an application's commands in the composer's `/` menu
+ * and its modes beside the composer. Nothing for an application with
+ * neither: its plugin contributes nothing.
+ */
+export declare function defineAppComposerPlugin(app: AppSpec): import("@datalayer/reactor").ReactorPlugin<Record<string, never>, unknown, {
+    components: {
+        id: string;
+        slot: "loop.promptAction";
+        order: number;
+        Component: () => JSX.Element | null;
+    }[];
+}>;