@datalayer/agent-runtimes 1.3.89 → 1.3.91

package/lib/mcp/McpServerManager.js

@@ -256,52 +256,21 @@ export function McpServerManager({ baseUrl, agentId, enableCodemode = false, sel
     }, [selectedServers, onSelectedServersChange]);
     const isLoading = catalogQuery.isLoading;
     const isMutating = enableMutation.isPending || disableMutation.isPending;
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ToolsIcon, { size: 16 }), _jsx(Text, { sx: { fontWeight: 'semibold' }, children: "MCP Server Management" })] }), _jsx(IconButton, { icon: SyncIcon, "aria-label": "Refresh server lists", size: "small", onClick: handleRefresh, disabled: isLoading || isMutating })] }), error && (_jsx(Flash, { variant: "danger", children: _jsx(Text, { sx: { fontSize: 1 }, children: error }) })), enableCodemode && (_jsx(Flash, { variant: "default", children: _jsxs(Text, { sx: { fontSize: 0 }, children: [_jsx("strong", { children: "Codemode enabled:" }), " Adding or removing MCP servers will regenerate the Codemode tool registry."] }) })), isLoading && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, py: 3 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Loading MCP servers..." })] })), !isLoading && assignedConfigServers.length > 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: ["Assigned Configured Servers (", assignedConfigServers.length, ")"] }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "These servers are from ~/.datalayer/mcp.json and assigned to this agent." }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: assignedConfigServers.map(server => (_jsx(ServerCard, { server: server, variant: "config", disabled: disabled, isSelected: true, onSelect: onSelectedServersChange ? handleServerSelect : undefined, onRemove: () => handleRemoveServer(server.id, true) }, server.id))) })] })), !isLoading && assignedCatalogServers.length > 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: ["Assigned Catalog Servers (", assignedCatalogServers.length, ")"] }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: assignedCatalogServers.map(server => (_jsx(ServerCard, { server: server, variant: "active", disabled: disabled || isMutating, isSelected: true, onSelect: onSelectedServersChange ? handleServerSelect : undefined, onRemove: () => handleDisableServer(server.id), isRemoving: disableMutation.isPending &&
-                                disableMutation.variables === server.id }, server.id))) })] })), !isLoading && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: ["Available from Catalog (", availableCatalogServers.length, ")"] }), availableCatalogServers.length > 3 && (_jsx(TextInput, { leadingVisual: SearchIcon, placeholder: "Search servers...", value: searchQuery, onChange: e => setSearchQuery(e.target.value), sx: { width: '100%' } })), filteredCatalogServers.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: searchQuery
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 4, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(ToolsIcon, { size: 16 }), _jsx(Text, { sx: { fontWeight: 'semibold' }, children: "MCP Server Management" })] }), _jsx(IconButton, { icon: SyncIcon, "aria-label": "Refresh server lists", size: "small", onClick: handleRefresh, disabled: isLoading || isMutating })] }), error && (_jsx(Flash, { variant: "danger", children: _jsx(Text, { sx: { fontSize: 1 }, children: error }) })), enableCodemode && (_jsx(Flash, { variant: "default", children: _jsxs(Text, { sx: { fontSize: 0 }, children: [_jsx("strong", { children: "Codemode enabled:" }), " Adding or removing MCP servers will regenerate the Codemode tool registry."] }) })), isLoading && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, py: 3, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Loading MCP servers..." })] })), !isLoading && assignedConfigServers.length > 0 && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: ["Assigned Configured Servers (", assignedConfigServers.length, ")"] }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "These servers are from ~/.datalayer/mcp.json and assigned to this agent." }), _jsx(Box, { display: "flex", flexDirection: "column", gap: 2, children: assignedConfigServers.map(server => (_jsx(ServerCard, { server: server, variant: "config", disabled: disabled, isSelected: true, onSelect: onSelectedServersChange ? handleServerSelect : undefined, onRemove: () => handleRemoveServer(server.id, true) }, server.id))) })] })), !isLoading && assignedCatalogServers.length > 0 && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: ["Assigned Catalog Servers (", assignedCatalogServers.length, ")"] }), _jsx(Box, { display: "flex", flexDirection: "column", gap: 2, children: assignedCatalogServers.map(server => (_jsx(ServerCard, { server: server, variant: "active", disabled: disabled || isMutating, isSelected: true, onSelect: onSelectedServersChange ? handleServerSelect : undefined, onRemove: () => handleDisableServer(server.id), isRemoving: disableMutation.isPending &&
+                                disableMutation.variables === server.id }, server.id))) })] })), !isLoading && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: ["Available from Catalog (", availableCatalogServers.length, ")"] }), availableCatalogServers.length > 3 && (_jsx(TextInput, { leadingVisual: SearchIcon, placeholder: "Search servers...", value: searchQuery, onChange: e => setSearchQuery(e.target.value), sx: { width: '100%' } })), filteredCatalogServers.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: searchQuery
                             ? 'No servers match your search.'
-                            : 'All catalog servers are already enabled.' })) : (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: filteredCatalogServers.map(server => (_jsx(ServerCard, { server: server, variant: "catalog", disabled: disabled || isMutating, onAdd: () => handleEnableServer(server.id), isAdding: enableMutation.isPending &&
+                            : 'All catalog servers are already enabled.' })) : (_jsx(Box, { display: "flex", flexDirection: "column", gap: 2, children: filteredCatalogServers.map(server => (_jsx(ServerCard, { server: server, variant: "catalog", disabled: disabled || isMutating, onAdd: () => handleEnableServer(server.id), isAdding: enableMutation.isPending &&
                                 enableMutation.variables === server.id }, server.id))) }))] }))] }));
 }
 function ServerCard({ server, variant, disabled = false, isSelected = false, onSelect, onAdd, onRemove, isAdding = false, isRemoving = false, }) {
     // Check availability based on isAvailable field from the server
     const isAvailable = server.isAvailable !== false;
     const missingEnvVars = !isAvailable && server.requiredEnvVars && server.requiredEnvVars.length > 0;
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            alignItems: 'flex-start',
-            gap: 2,
-            padding: 2,
-            borderRadius: 2,
-            backgroundColor: 'canvas.subtle',
-            border: '1px solid',
-            borderColor: isSelected ? 'accent.emphasis' : 'border.default',
-            opacity: disabled || !isAvailable ? 0.6 : 1,
-            cursor: onSelect && !disabled && isAvailable ? 'pointer' : 'default',
-        }, onClick: () => {
+    return (_jsxs(Box, { display: "flex", alignItems: "flex-start", gap: 2, padding: 2, borderRadius: 2, backgroundColor: "canvas.subtle", border: "1px solid", borderColor: isSelected ? 'accent.emphasis' : 'border.default', opacity: disabled || !isAvailable ? 0.6 : 1, cursor: onSelect && !disabled && isAvailable ? 'pointer' : 'default', onClick: () => {
             if (onSelect && !disabled && isAvailable) {
                 onSelect(server, !isSelected);
             }
-        }, children: [_jsx(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    width: 32,
-                    height: 32,
-                    borderRadius: 2,
-                    backgroundColor: variant === 'config' ? 'attention.subtle' : 'accent.subtle',
-                    flexShrink: 0,
-                }, children: _jsx(ServerIcon, { size: 16 }) }), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 1 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: server.name }), variant === 'active' && (_jsx(Label, { variant: "success", size: "small", children: "Active" })), variant === 'config' && (_jsx(Label, { variant: "attention", size: "small", children: "Config" })), !isAvailable && (_jsx(Label, { variant: "danger", size: "small", children: "Missing env vars" })), isSelected && (_jsxs(Label, { variant: "accent", size: "small", children: [_jsx(CheckIcon, { size: 12 }), " Selected"] }))] }), server.description && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', mb: 1 }, children: server.description })), missingEnvVars && (_jsxs(Box, { sx: {
-                            fontSize: 0,
-                            color: 'danger.fg',
-                            mb: 1,
-                            p: 1,
-                            bg: 'danger.subtle',
-                            borderRadius: 1,
-                        }, children: [_jsx(Text, { sx: { fontWeight: 'semibold', display: 'block', mb: 1 }, children: "Missing environment variables:" }), server.requiredEnvVars.map(envVar => (_jsx(Text, { as: "code", sx: {
+        }, children: [_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", width: 32, height: 32, borderRadius: 2, backgroundColor: variant === 'config' ? 'attention.subtle' : 'accent.subtle', flexShrink: 0, children: _jsx(ServerIcon, { size: 16 }) }), _jsxs(Box, { flex: 1, minWidth: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 1, children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: server.name }), variant === 'active' && (_jsx(Label, { variant: "success", size: "small", children: "Active" })), variant === 'config' && (_jsx(Label, { variant: "attention", size: "small", children: "Config" })), !isAvailable && (_jsx(Label, { variant: "danger", size: "small", children: "Missing env vars" })), isSelected && (_jsxs(Label, { variant: "accent", size: "small", children: [_jsx(CheckIcon, { size: 12 }), " Selected"] }))] }), server.description && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', mb: 1 }, children: server.description })), missingEnvVars && (_jsxs(Box, { fontSize: 0, color: "danger.fg", mb: 1, p: 1, bg: "danger.subtle", borderRadius: 1, children: [_jsx(Text, { sx: { fontWeight: 'semibold', display: 'block', mb: 1 }, children: "Missing environment variables:" }), server.requiredEnvVars.map(envVar => (_jsx(Text, { as: "code", sx: {
                                     display: 'inline-block',
                                     mr: 1,
                                     mb: 1,
@@ -317,7 +286,7 @@ function ServerCard({ server, variant, disabled = false, isSelected = false, onS
                             overflow: 'hidden',
                             textOverflow: 'ellipsis',
                             whiteSpace: 'nowrap',
-                        }, children: ["Tools: ", server.tools.map(t => t.name).join(', ')] })), server.transport && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Transport: ", server.transport] }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }, children: [variant === 'catalog' && onAdd && (_jsx(Button, { variant: "primary", size: "small", leadingVisual: isAdding ? Spinner : PlusIcon, onClick: e => {
+                        }, children: ["Tools: ", server.tools.map(t => t.name).join(', ')] })), server.transport && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Transport: ", server.transport] }))] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, flexShrink: 0, children: [variant === 'catalog' && onAdd && (_jsx(Button, { variant: "primary", size: "small", leadingVisual: isAdding ? Spinner : PlusIcon, onClick: e => {
                             e.stopPropagation();
                             onAdd();
                         }, disabled: disabled || !isAvailable || isAdding, children: "Add" })), variant === 'active' && onRemove && (_jsx(Button, { variant: "danger", size: "small", leadingVisual: isRemoving ? Spinner : TrashIcon, onClick: e => {

package/lib/portable/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * What any JavaScript runtime can import from Agent Runtimes: no React, DOM,
+ * Jupyter or Node built-in. Re-exports only; the mobile app reaches Agent
+ * Runtimes through this entry alone.
+ *
+ * @module portable
+ */
+export { messageOfApproval, normalizeApproval, whyAsked, type ApprovalArgs, type ApprovalRecord, type MessageAsked, } from '../utils/approvals';
+export { AGUIAdapter, type AGUIAdapterConfig } from '../protocols/AGUIAdapter';
+export { createActivityMessage, createAssistantMessage, createUserMessage, generateMessageId, type ChatMessage, type ChatMessageDelta, type ChatMessageInput, type ChatThread, type ContentPart, type MessageRole, type ToolCallStatus, } from '../types/messages';
+export type { ProtocolAdapterConfig, ProtocolConnectionState, ProtocolEvent, ProtocolEventHandler, } from '../types/protocol';

package/lib/portable/index.js

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * What any JavaScript runtime can import from Agent Runtimes: no React, DOM,
+ * Jupyter or Node built-in. Re-exports only; the mobile app reaches Agent
+ * Runtimes through this entry alone.
+ *
+ * @module portable
+ */
+export { messageOfApproval, normalizeApproval, whyAsked, } from '../utils/approvals';
+// The AG-UI stream client and the messages it builds; a phone passes a
+// streaming `fetch` in the adapter's config.
+export { AGUIAdapter } from '../protocols/AGUIAdapter';
+export { createActivityMessage, createAssistantMessage, createUserMessage, generateMessageId, } from '../types/messages';

package/lib/protocols/AGUIAdapter.js

@@ -99,7 +99,7 @@ export class AGUIAdapter extends BaseProtocolAdapter {
             // e.g., http://localhost:8765/api/v1/ag-ui/default -> http://localhost:8765/api/v1/ag-ui/terminate
             const baseUrl = new URL(this.aguiConfig.baseUrl);
             const terminateUrl = `${baseUrl.origin}/api/v1/ag-ui/terminate`;
-            const response = await fetch(terminateUrl, {
+            const response = await this.fetchOf()(terminateUrl, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -205,7 +205,7 @@ export class AGUIAdapter extends BaseProtocolAdapter {
             console.log('[AGUIAdapter] Sending with identities:', options.identities.map(i => i.provider));
         }
         try {
-            const response = await fetch(this.aguiConfig.baseUrl, {
+            const response = await this.fetchOf()(this.aguiConfig.baseUrl, {
                 method: 'POST',
                 headers: this.buildHeaders({
                     Accept: 'text/event-stream',

package/lib/protocols/BaseProtocolAdapter.d.ts

@@ -70,6 +70,8 @@ export declare abstract class BaseProtocolAdapter implements ProtocolAdapter {
      * Build headers for HTTP requests
      */
     protected buildHeaders(additionalHeaders?: Record<string, string>): Record<string, string>;
+    /** The fetch the caller gave, else the global one; read per call so a test can stub the global. */
+    protected fetchOf(): typeof fetch;
     /**
      * Create abort signal with timeout
      */

package/lib/protocols/BaseProtocolAdapter.js

@@ -110,6 +110,10 @@ export class BaseProtocolAdapter {
         }
         return { ...headers, ...additionalHeaders };
     }
+    /** The fetch the caller gave, else the global one; read per call so a test can stub the global. */
+    fetchOf() {
+        return this.config.fetch ?? ((input, init) => fetch(input, init));
+    }
     /**
      * Create abort signal with timeout
      */

package/lib/specs/apps.js

@@ -3515,6 +3515,7 @@ export const APP_SOURCES = {
             },
         ],
         interface: {
+            accent: 'green',
             welcome: "Ask me for a report from the books: open invoices, aged balances, a trial balance or a customer's ledger. I read Odoo; I change nothing.",
             starters: [
                 {
@@ -3869,6 +3870,7 @@ export const APP_SOURCES = {
         agent: 'jupyter-data-analyst:0.0.1',
         contents: ['The dataset under investigation'],
         interface: {
+            accent: 'green',
             components: [
                 'Card',
                 'Column',
@@ -4230,6 +4232,7 @@ export const APP_SOURCES = {
             },
         ],
         interface: {
+            accent: 'green',
             welcome: 'I sort your mail and draft the replies. I ask before I send, and I never delete.',
             starters: [
                 {
@@ -4321,6 +4324,7 @@ export const APP_SOURCES = {
             'The Models page: how each model is billed (standard or credits) and who hosts it',
         ],
         interface: {
+            accent: 'green',
             components: [
                 'Card',
                 'Column',
@@ -5247,6 +5251,7 @@ export const APP_SOURCES = {
         agent: 'jupyter-data-analyst:0.0.1',
         contents: ['The benchmark run: task results, traces, cost and latency'],
         interface: {
+            accent: 'green',
             components: [
                 'Card',
                 'Column',
@@ -5354,6 +5359,7 @@ export const APP_SOURCES = {
         agent: 'jupyter-data-analyst:0.0.1',
         contents: ['Order history', 'Supplier price lists', 'Delivery records'],
         interface: {
+            accent: 'green',
             components: [
                 'Card',
                 'Column',

package/lib/specs/appspecSchema.js

@@ -435,9 +435,16 @@ export const APPSPEC_SCHEMA = {
                     description: "`chat`, `page` or `split`; the kind's own when unsaid",
                 },
                 accent: {
-                    $ref: '#/$defs/Accent',
-                    default: 'green',
-                    description: "The application's one colour",
+                    anyOf: [
+                        {
+                            $ref: '#/$defs/Accent',
+                        },
+                        {
+                            type: 'null',
+                        },
+                    ],
+                    default: null,
+                    description: "The application's one colour, over whichever theme it runs in; unsaid, it wears the theme's own colours",
                 },
                 theme: {
                     anyOf: [
@@ -449,7 +456,7 @@ export const APPSPEC_SCHEMA = {
                         },
                     ],
                     default: null,
-                    description: "The theme it runs in by default, at its address, embedded, in the Studio's Preview and as an example: a `variant` and, optionally, a colour `mode`. The person's own when unsaid. Its `accent` colours the `loop` theme only",
+                    description: "The theme it runs in by default, at its address, embedded, in the Studio's Preview and as an example: a `variant` and, optionally, a colour `mode`. The person's own when unsaid. Its `accent`, when it names one, colours it, whichever theme it is",
                 },
                 welcome: {
                     default: '',

package/lib/stories/loop/ReferenceScreens.js

@@ -20,8 +20,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @module stories/loop/ReferenceScreens
  */
 import { useEffect, useRef, useState } from 'react';
-import { Box, Button, Heading, Text } from '@primer/react';
-import { DatalayerThemeProvider, loopAccentStyles, setupPrimerPortals, themeConfigs, } from '@datalayer/primer-addons';
+import { Button, Heading, Text } from '@primer/react';
+import { Box, DatalayerThemeProvider, setupPrimerPortals, themeAccentVars, themeConfigs, } from '@datalayer/primer-addons';
 import { ChatBaseHeader } from '../../chat/header/ChatHeaderBase';
 import { ChatMessageList } from '../../chat/messages/ChatMessageList';
 import { InputPrompt } from '../../chat/prompt/InputPrompt';
@@ -84,29 +84,12 @@ export function ReferenceTheme({ theme, mode, children, }) {
         document.documentElement.setAttribute('data-reference-mode', mode);
     }, [theme, mode]);
     return (_jsx(DatalayerThemeProvider, { colorMode: mode, theme: config.primerTheme, themeStyles: config.themeStyles, baseStyles: theme === 'loop'
-            ? loopAccentStyles('green', mode)
-            : undefined, children: _jsx(Box, { "data-reference-stage": "", sx: {
-                position: 'fixed',
-                inset: 0,
-                p: 4,
-                bg: 'var(--loop-stage, var(--bgColor-muted))',
-                color: 'fg.default',
-                display: 'flex',
-            }, children: children }) }));
+            ? themeAccentVars('green', mode)
+            : undefined, children: _jsx(Box, { "data-reference-stage": "", position: "fixed", inset: 0, p: 4, bg: theme === 'loop' ? 'var(--theme-stage)' : 'var(--bgColor-muted)', color: "fg.default", display: "flex", children: children }) }));
 }
 /** One rounded surface on the stage: the theme's frame. */
 function Frame({ children }) {
-    return (_jsx(Box, { sx: {
-            flex: 1,
-            minWidth: 0,
-            display: 'flex',
-            overflow: 'hidden',
-            bg: 'canvas.default',
-            borderRadius: 'var(--theme-radius-frame, 12px)',
-            border: 'var(--theme-hairline, 1px) solid',
-            borderColor: 'border.muted',
-            boxShadow: 'var(--theme-shadow, none)',
-        }, children: children }));
+    return (_jsx(Box, { flex: 1, minWidth: 0, display: "flex", overflow: "hidden", bg: "canvas.default", borderRadius: "var(--theme-radius-frame, 12px)", border: "var(--theme-hairline, 1px) solid", borderColor: "border.muted", boxShadow: "var(--theme-shadow, none)", children: children }));
 }
 // ---------------------------------------------------------------------------
 // Fixed data
@@ -188,47 +171,30 @@ const AVATARS = {
 function Conversation({ name, face, presence, items, composer = true, mcpServers, }) {
     const endRef = useRef(null);
     const [input, setInput] = useState('');
-    return (_jsxs(Box, { sx: {
-            flex: 1,
-            minWidth: 0,
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%',
-        }, children: [_jsx(ChatBaseHeader, { title: name, brandIcon: _jsx(PresenceFace, { face: face, size: 20, state: presence }), headerContent: _jsx(PresenceLine, { state: presence }), padding: 3, messageCount: items.length, onNewChat: () => undefined, onClear: () => undefined }), _jsx(Box, { sx: { flex: 1, minHeight: 0, overflow: 'hidden' }, children: _jsx(ChatMessageList, { displayItems: items, isLoading: false, isStreaming: false, showLoadingIndicator: false, hideMessagesAfterToolUI: false, avatarConfig: AVATARS, padding: 3, emptyContent: null, messagesEndRef: endRef, onRespond: async () => undefined, mcpServers: mcpServers }) }), composer && (_jsx(InputPrompt, { input: input, setInput: setInput, isLoading: false, connectionConfirmed: true, placeholder: "Send a message", autoFocus: false, padding: 3, onSend: () => undefined, onStop: () => undefined, showTokenUsage: false, showModelSelector: false, showToolsMenu: false, showSkillsMenu: false, codemodeEnabled: false, hasConfigData: false, hasSkillsData: false, isA2AProtocol: false }))] }));
+    return (_jsxs(Box, { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", height: "100%", children: [_jsx(ChatBaseHeader, { title: name, brandIcon: _jsx(PresenceFace, { face: face, size: 20, state: presence }), headerContent: _jsx(PresenceLine, { state: presence }), padding: 3, messageCount: items.length, onNewChat: () => undefined, onClear: () => undefined }), _jsx(Box, { flex: 1, minHeight: 0, overflow: "hidden", children: _jsx(ChatMessageList, { displayItems: items, isLoading: false, isStreaming: false, showLoadingIndicator: false, hideMessagesAfterToolUI: false, avatarConfig: AVATARS, padding: 3, emptyContent: null, messagesEndRef: endRef, onRespond: async () => undefined, mcpServers: mcpServers }) }), composer && (_jsx(InputPrompt, { input: input, setInput: setInput, isLoading: false, connectionConfirmed: true, placeholder: "Send a message", autoFocus: false, padding: 3, onSend: () => undefined, onStop: () => undefined, showTokenUsage: false, showModelSelector: false, showToolsMenu: false, showSkillsMenu: false, codemodeEnabled: false, hasConfigData: false, hasSkillsData: false, isA2AProtocol: false }))] }));
 }
 // ---------------------------------------------------------------------------
 // The four screens
 // ---------------------------------------------------------------------------
 /** A conversation. */
 export function ConversationScreen() {
-    return (_jsx(Frame, { children: _jsx(Box, { sx: { flex: 1, display: 'flex', justifyContent: 'center' }, children: _jsx(Box, { sx: { width: '100%', maxWidth: 640, display: 'flex' }, children: _jsx(Conversation, { name: "Support desk", face: "\uD83E\uDD8A", presence: "idle", items: CONVERSATION }) }) }) }));
+    return (_jsx(Frame, { children: _jsx(Box, { flex: 1, display: "flex", justifyContent: "center", children: _jsx(Box, { width: "100%", maxWidth: 640, display: "flex", children: _jsx(Conversation, { name: "Support desk", face: "\uD83E\uDD8A", presence: "idle", items: CONVERSATION }) }) }) }));
 }
 /** A conversation beside its work: the split, one hairline between them. */
 export function BesideWorkScreen() {
-    return (_jsxs(Frame, { children: [_jsx(Box, { sx: { width: 400, flexShrink: 0, display: 'flex' }, children: _jsx(Conversation, { name: "Support desk", face: "\uD83E\uDD8A", presence: "idle", items: BESIDE_WORK }) }), _jsx(Box, { sx: {
-                    width: 'var(--theme-hairline, 1px)',
-                    bg: 'border.muted',
-                    flexShrink: 0,
-                } }), _jsxs(Box, { "data-reference-work": "", sx: {
-                    flex: 1,
-                    minWidth: 0,
-                    p: 4,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 3,
-                }, children: [_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Draft \u00B7 reply" }), _jsx(Heading, { as: "h2", sx: { fontSize: 3, fontWeight: 600 }, children: "Your order 1042" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "To ada@example.com" }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(Text, { as: "p", sx: { m: 0 }, children: "Dear Ada," }), _jsx(Text, { as: "p", sx: { m: 0 }, children: "We are sorry your order arrived four days late. It left our warehouse on Monday and is with you by Thursday, 8 October." }), _jsx(Text, { as: "p", sx: { m: 0 }, children: "Your next order ships free, with no code to enter." }), _jsx(Text, { as: "p", sx: { m: 0 }, children: "The support desk" })] }), _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 'auto' }, children: [_jsx(Button, { variant: "primary", children: "Send" }), _jsx(Button, { children: "Edit" })] })] })] }));
+    return (_jsxs(Frame, { children: [_jsx(Box, { width: 400, flexShrink: 0, display: "flex", children: _jsx(Conversation, { name: "Support desk", face: "\uD83E\uDD8A", presence: "idle", items: BESIDE_WORK }) }), _jsx(Box, { width: "var(--theme-hairline, 1px)", bg: "border.muted", flexShrink: 0 }), _jsxs(Box, { "data-reference-work": "", flex: 1, minWidth: 0, p: 4, display: "flex", flexDirection: "column", gap: 3, children: [_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Draft \u00B7 reply" }), _jsx(Heading, { as: "h2", sx: { fontSize: 3, fontWeight: 600 }, children: "Your order 1042" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "To ada@example.com" }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [_jsx(Text, { as: "p", sx: { m: 0 }, children: "Dear Ada," }), _jsx(Text, { as: "p", sx: { m: 0 }, children: "We are sorry your order arrived four days late. It left our warehouse on Monday and is with you by Thursday, 8 October." }), _jsx(Text, { as: "p", sx: { m: 0 }, children: "Your next order ships free, with no code to enter." }), _jsx(Text, { as: "p", sx: { m: 0 }, children: "The support desk" })] }), _jsxs(Box, { display: "flex", gap: 2, mt: "auto", children: [_jsx(Button, { variant: "primary", children: "Send" }), _jsx(Button, { children: "Edit" })] })] })] }));
 }
 /** The activity of a worker: what it did on its own, as it did it. */
 export function WorkerActivityScreen() {
-    return (_jsx(Frame, { children: _jsx(Box, { sx: { flex: 1, display: 'flex', justifyContent: 'center' }, children: _jsx(Box, { sx: { width: '100%', maxWidth: 680, display: 'flex' }, children: _jsx(Conversation, { name: "Inbox triage", face: "\uD83D\uDCEC", presence: "working", items: WORKER_ACTIVITY, composer: false }) }) }) }));
+    return (_jsx(Frame, { children: _jsx(Box, { flex: 1, display: "flex", justifyContent: "center", children: _jsx(Box, { width: "100%", maxWidth: 680, display: "flex", children: _jsx(Conversation, { name: "Inbox triage", face: "\uD83D\uDCEC", presence: "working", items: WORKER_ACTIVITY, composer: false }) }) }) }));
 }
 /** An approval: the action, the rule that asks, and the one decision. */
 export function ApprovalScreen() {
-    return (_jsx(Frame, { children: _jsx(Box, { sx: { flex: 1, display: 'flex', justifyContent: 'center' }, children: _jsx(Box, { sx: { width: '100%', maxWidth: 640, display: 'flex' }, children: _jsx(Conversation, { name: "Support desk", face: "\uD83E\uDD8A", presence: "waiting", items: APPROVAL }) }) }) }));
+    return (_jsx(Frame, { children: _jsx(Box, { flex: 1, display: "flex", justifyContent: "center", children: _jsx(Box, { width: "100%", maxWidth: 640, display: "flex", children: _jsx(Conversation, { name: "Support desk", face: "\uD83E\uDD8A", presence: "waiting", items: APPROVAL }) }) }) }));
 }
 /** Tool calls, each led by the mark of whoever the tool belongs to. */
 export function ToolMarksScreen() {
-    return (_jsx(Frame, { children: _jsx(Box, { sx: { flex: 1, display: 'flex', justifyContent: 'center' }, children: _jsx(Box, { sx: { width: '100%', maxWidth: 680, display: 'flex' }, children: _jsx(Conversation, { name: "Bookkeeper", face: "\uD83E\uDDEE", presence: "idle", items: TOOL_MARKS, composer: false, mcpServers: TOOL_MARKS_SERVERS }) }) }) }));
+    return (_jsx(Frame, { children: _jsx(Box, { flex: 1, display: "flex", justifyContent: "center", children: _jsx(Box, { width: "100%", maxWidth: 680, display: "flex", children: _jsx(Conversation, { name: "Bookkeeper", face: "\uD83E\uDDEE", presence: "idle", items: TOOL_MARKS, composer: false, mcpServers: TOOL_MARKS_SERVERS }) }) }) }));
 }
 export const REFERENCE_SCREEN_COMPONENTS = {
     conversation: ConversationScreen,
@@ -284,20 +250,7 @@ export function AssistantScreen({ picture, }) {
             ? 'working'
             : picture;
     const balloon = BALLOONS[picture];
-    return (_jsxs(Box, { sx: { flex: 1, position: 'relative' }, children: [picture === 'open' && _jsx(OpenConversation, {}), picture === 'aside' && (_jsxs(Box, { role: "dialog", "aria-label": "A dialog over the assistant", sx: {
-                    position: 'fixed',
-                    right: 24,
-                    bottom: 24,
-                    width: 280,
-                    height: 160,
-                    p: 3,
-                    zIndex: 2000,
-                    bg: 'canvas.overlay',
-                    border: 'var(--theme-hairline, 1px) solid',
-                    borderColor: 'border.default',
-                    borderRadius: 'var(--theme-radius-card, 6px)',
-                    boxShadow: 'var(--theme-shadow, none)',
-                }, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "A dialog" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1 }, children: "The assistant steps aside while this is open." })] })), _jsx(AssistantStage, { character: "paperclip", state: state, place: { right: 48, bottom: 48 }, stageRef: stageRef, onDragStart: () => undefined, open: picture === 'open', onToggle: () => undefined, balloon: balloon, balloonDisplay: picture === 'current' ? 'current' : 'history', insist: !!balloon, onDismiss: () => undefined })] }));
+    return (_jsxs(Box, { flex: 1, position: "relative", children: [picture === 'open' && _jsx(OpenConversation, {}), picture === 'aside' && (_jsxs(Box, { role: "dialog", "aria-label": "A dialog over the assistant", position: "fixed", right: 24, bottom: 24, width: 280, height: 160, p: 3, zIndex: 2000, bg: "canvas.overlay", border: "var(--theme-hairline, 1px) solid", borderColor: "border.default", borderRadius: "var(--theme-radius-card, 6px)", boxShadow: "var(--theme-shadow, none)", children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "A dialog" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1 }, children: "The assistant steps aside while this is open." })] })), _jsx(AssistantStage, { character: "paperclip", state: state, place: { right: 48, bottom: 48 }, stageRef: stageRef, onDragStart: () => undefined, open: picture === 'open', onToggle: () => undefined, balloon: balloon, balloonDisplay: picture === 'current' ? 'current' : 'history', insist: !!balloon, onDismiss: () => undefined })] }));
 }
 /** What the open picture's conversation holds. */
 const OPEN_CONVERSATION = [
@@ -316,37 +269,10 @@ function OpenConversation() {
     const [input, setInput] = useState('');
     const height = conversationBalloonHeight(window.innerHeight);
     const left = window.innerWidth - 48 - CONVERSATION_BALLOON_WIDTH;
-    return (_jsxs(Box, { "data-conversation-balloon": "", sx: {
-            position: 'fixed',
-            right: '48px',
-            bottom: `${48 + 88 + 16}px`,
-            width: `${CONVERSATION_BALLOON_WIDTH}px`,
-            height: `${height}px`,
-            zIndex: 1001,
-            display: 'flex',
-            flexDirection: 'column',
-            bg: 'canvas.default',
-            border: '1px solid',
-            borderColor: 'border.default',
-            boxShadow: 'shadow.extra-large',
-            ...conversationBalloonSx({
-                edge: 'bottom',
-                at: balloonTailAt(window.innerWidth - 48 - 44, left),
-            }, 'canvas.subtle'),
-        }, children: [_jsx(ConversationBalloonClose, { onClose: () => undefined }), _jsx(ConversationBalloonHeader, { count: OPEN_CONVERSATION.length - 1 }), _jsxs(Box, { sx: {
-                    flex: 1,
-                    minHeight: 0,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    borderRadius: 'var(--theme-radius-bubble, 16px)',
-                    overflow: 'hidden',
-                }, children: [_jsx(Box, { sx: { flex: 1, minHeight: 0, overflow: 'auto' }, children: _jsx(ChatMessageList, { displayItems: OPEN_CONVERSATION, isLoading: false, isStreaming: false, showLoadingIndicator: false, hideMessagesAfterToolUI: false, avatarConfig: { ...AVATARS, showAvatars: true }, padding: 2, emptyContent: null, messagesEndRef: endRef, onRespond: async () => undefined }) }), _jsx(Box, { sx: {
-                            px: 3,
-                            pb: 1,
-                            display: 'flex',
-                            justifyContent: 'flex-end',
-                            fontSize: 0,
-                        }, children: _jsx(DecisionAsk, { ask: async () => ({}) }) }), _jsx(InputPrompt, { input: input, setInput: setInput, isLoading: false, connectionConfirmed: true, placeholder: "Type a message...", autoFocus: false, padding: 2, promptVariant: "lexical", onSend: () => undefined, onStop: () => undefined, showTokenUsage: false, showModelSelector: false, showToolsMenu: false, showSkillsMenu: false, showAgentsMenu: false, codemodeEnabled: false, hasConfigData: false, hasSkillsData: false, isA2AProtocol: false })] })] }));
+    return (_jsxs(Box, { "data-conversation-balloon": "", position: "fixed", right: "48px", bottom: `${48 + 88 + 16}px`, width: `${CONVERSATION_BALLOON_WIDTH}px`, height: `${height}px`, zIndex: 1001, display: "flex", flexDirection: "column", bg: "canvas.default", border: "1px solid", borderColor: "border.default", boxShadow: "shadow.extra-large", sx: conversationBalloonSx({
+            edge: 'bottom',
+            at: balloonTailAt(window.innerWidth - 48 - 44, left),
+        }, 'canvas.subtle'), children: [_jsx(ConversationBalloonClose, { onClose: () => undefined }), _jsx(ConversationBalloonHeader, { count: OPEN_CONVERSATION.length - 1 }), _jsxs(Box, { flex: 1, minHeight: 0, display: "flex", flexDirection: "column", borderRadius: "var(--theme-radius-bubble, 16px)", overflow: "hidden", children: [_jsx(Box, { flex: 1, minHeight: 0, overflow: "auto", children: _jsx(ChatMessageList, { displayItems: OPEN_CONVERSATION, isLoading: false, isStreaming: false, showLoadingIndicator: false, hideMessagesAfterToolUI: false, avatarConfig: { ...AVATARS, showAvatars: true }, padding: 2, emptyContent: null, messagesEndRef: endRef, onRespond: async () => undefined }) }), _jsx(Box, { px: 3, pb: 1, display: "flex", justifyContent: "flex-end", fontSize: 0, children: _jsx(DecisionAsk, { ask: async () => ({}) }) }), _jsx(InputPrompt, { input: input, setInput: setInput, isLoading: false, connectionConfirmed: true, placeholder: "Type a message...", autoFocus: false, padding: 2, promptVariant: "lexical", onSend: () => undefined, onStop: () => undefined, showTokenUsage: false, showModelSelector: false, showToolsMenu: false, showSkillsMenu: false, showAgentsMenu: false, codemodeEnabled: false, hasConfigData: false, hasSkillsData: false, isA2AProtocol: false })] })] }));
 }
 // ---------------------------------------------------------------------------
 // The characters (T-25, T-24)
@@ -364,5 +290,5 @@ characterReactor.start();
 export function CharacterScreen({ character, ready, }) {
     const stageRef = useRef(null);
     const drawn = assistantCharacterNamed(characterReactor, character);
-    return (_jsxs(Box, { sx: { flex: 1, position: 'relative' }, children: [_jsx(AssistantStage, { character: drawn, state: "idle", place: { right: 48, bottom: 48 }, stageRef: stageRef, onDragStart: () => undefined, open: false, onToggle: () => undefined, onDismiss: () => undefined }), ready] }));
+    return (_jsxs(Box, { flex: 1, position: "relative", children: [_jsx(AssistantStage, { character: drawn, state: "idle", place: { right: 48, bottom: 48 }, stageRef: stageRef, onDragStart: () => undefined, open: false, onToggle: () => undefined, onDismiss: () => undefined }), ready] }));
 }

package/lib/stories/loop/pictures-main.js

@@ -68,7 +68,7 @@ function Ready() {
  */
 function GalleryScreen() {
     const { characters, ready } = useGalleryCharacters();
-    return (_jsxs(Box, { sx: { flex: 1, bg: 'canvas.default', p: 2, overflow: 'hidden' }, children: [_jsx(AssistantGalleryGrid, { characters: characters }), ready && _jsx(Ready, {})] }));
+    return (_jsxs(Box, { flex: 1, bg: "canvas.default", p: 2, overflow: "hidden", children: [_jsx(AssistantGalleryGrid, { characters: characters }), ready && _jsx(Ready, {})] }));
 }
 function Page() {
     if (gallery) {

package/lib/types/agentspecs.d.ts

@@ -670,8 +670,11 @@ export interface AppUploadsSpec {
 /** What the user of an application sees. */
 export interface AppInterfaceSpec {
     layout: AppLayout;
-    /** Its one colour, over the `loop` theme only. */
-    accent: AppAccent;
+    /**
+     * Its one colour, over whichever theme it runs in; unsaid, it wears the
+     * theme's own colours (decided 2026-10-07).
+     */
+    accent?: AppAccent;
     /** The theme it runs in by default; the person's own when unsaid (T-30). */
     theme?: AppThemeSpec;
     welcome: string;

package/lib/types/protocol.d.ts

@@ -67,6 +67,8 @@ export interface ProtocolAdapterConfig {
     maxReconnectAttempts?: number;
     /** Request timeout in milliseconds */
     timeout?: number;
+    /** The fetch to use; a phone passes one whose response body streams (e.g. `expo/fetch`). Default: the global `fetch`. */
+    fetch?: typeof fetch;
     /** Additional protocol-specific options */
     options?: Record<string, unknown>;
 }

package/lib/utils/approvals.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Normalised approval record. Both snake_case (server-native) and
+ * camelCase (TypeScript-idiomatic) keys are present so existing UI
+ * consumers keep working regardless of which naming they read.
+ */
+export type ApprovalRecord = {
+    id: string;
+    agent_id: string;
+    agentId: string;
+    runtime_name: string;
+    runtimeName: string;
+    tool_name: string;
+    toolName: string;
+    tool_call_id?: string;
+    toolCallId?: string;
+    tool_args: Record<string, unknown>;
+    toolArgs: Record<string, unknown>;
+    status: string;
+    note?: string | null;
+    requester_uid?: string;
+    requesterUid?: string;
+    requested_by?: string;
+    requestedBy?: string;
+    resolved_by?: string;
+    resolvedBy?: string;
+    resolved_at?: string;
+    resolvedAt?: string;
+    created_at: string;
+    createdAt: string;
+    updated_at?: string;
+    updatedAt?: string;
+    read?: boolean;
+};
+/** An approval as the server or the `/ws` stream sends it; null without an id. */
+export declare function normalizeApproval(raw: unknown): ApprovalRecord | null;
+/** An approval's arguments, under either key: the web reads `tool_args`, mobile `toolArgs`. */
+export type ApprovalArgs = {
+    tool_args?: Record<string, unknown>;
+    toolArgs?: Record<string, unknown>;
+};
+/** A message it asks to send, as the approval carries it, whole (LOOP W-05). */
+export type MessageAsked = {
+    to: string;
+    cc: string;
+    bcc: string;
+    subject: string;
+    body: string;
+    /** It forwards a message received, named by its id. */
+    forwards: boolean;
+    /** A reply, in the conversation it names. */
+    replies: boolean;
+};
+/**
+ * The message a send asks for, to show whole before *Approve* (LOOP W-05):
+ * an approval whose arguments say to whom and what. `null` for anything else.
+ */
+export declare function messageOfApproval(approval: ApprovalArgs): MessageAsked | null;
+/** Why it was asked: the rule (`_rule`) or the check (`_check`). */
+export declare const whyAsked: (approval: ApprovalArgs) => string;

package/lib/utils/approvals.js

@@ -0,0 +1,101 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+function str(value) {
+    return typeof value === 'string' ? value : value == null ? '' : String(value);
+}
+/** An approval as the server or the `/ws` stream sends it; null without an id. */
+export function normalizeApproval(raw) {
+    if (!raw || typeof raw !== 'object')
+        return null;
+    const rec = raw;
+    const idSource = rec.id ?? rec.approval_id ?? rec.approvalId;
+    const id = typeof idSource === 'string' ? idSource : undefined;
+    if (!id)
+        return null;
+    const agent = str(rec.agent_id ?? rec.agentId);
+    const pod = str(rec.runtime_name ?? rec.runtimeName);
+    const tool = str(rec.tool_name ?? rec.toolName ?? 'unknown');
+    const toolCall = rec.tool_call_id ?? rec.toolCallId;
+    const args = rec.tool_args ??
+        rec.toolArgs ??
+        {};
+    const created = str(rec.created_at ?? rec.createdAt);
+    const updated = str(rec.updated_at ?? rec.updatedAt);
+    const resolvedBy = str(rec.resolved_by ?? rec.resolvedBy);
+    const requesterUid = str(rec.requester_uid ?? rec.requesterUid);
+    const requestedBy = str(rec.requested_by ?? rec.requestedBy);
+    const resolvedAtRaw = str(rec.resolved_at ?? rec.resolvedAt);
+    const status = str(rec.status ?? 'pending');
+    // Keep reviewer metadata from WS payloads. If this is dropped during
+    // normalization, downstream pages receive status=approved/rejected but no
+    // reviewer/timestamp context and can incorrectly render "review pending".
+    // Some producers only set updated_at on decision; for non-pending statuses,
+    // fall back to updated_at so UI can still show a decision time.
+    const resolvedAt = resolvedAtRaw || (status !== 'pending' ? updated || undefined : undefined);
+    return {
+        id,
+        agent_id: agent,
+        agentId: agent,
+        runtime_name: pod,
+        runtimeName: pod,
+        tool_name: tool,
+        toolName: tool,
+        tool_call_id: typeof toolCall === 'string' ? toolCall : undefined,
+        toolCallId: typeof toolCall === 'string' ? toolCall : undefined,
+        tool_args: args,
+        toolArgs: args,
+        status,
+        note: typeof rec.note === 'string'
+            ? rec.note
+            : rec.note === null
+                ? null
+                : undefined,
+        requester_uid: requesterUid || undefined,
+        requesterUid: requesterUid || undefined,
+        requested_by: requestedBy || undefined,
+        requestedBy: requestedBy || undefined,
+        resolved_by: resolvedBy || undefined,
+        resolvedBy: resolvedBy || undefined,
+        resolved_at: resolvedAt,
+        resolvedAt: resolvedAt,
+        created_at: created,
+        createdAt: created,
+        updated_at: updated || undefined,
+        updatedAt: updated || undefined,
+        read: typeof rec.read === 'boolean' ? rec.read : undefined,
+    };
+}
+const argsOf = (approval) => approval.tool_args ?? approval.toolArgs ?? {};
+const said = (approval, key) => {
+    const value = argsOf(approval)[key];
+    return typeof value === 'string' ? value : '';
+};
+const addressed = (value) => Array.isArray(value)
+    ? value.filter(item => typeof item === 'string').join(', ')
+    : typeof value === 'string'
+        ? value
+        : '';
+/**
+ * The message a send asks for, to show whole before *Approve* (LOOP W-05):
+ * an approval whose arguments say to whom and what. `null` for anything else.
+ */
+export function messageOfApproval(approval) {
+    const args = argsOf(approval);
+    const to = addressed(args.to);
+    if (!to || typeof args.body !== 'string') {
+        return null;
+    }
+    return {
+        to,
+        cc: addressed(args.cc),
+        bcc: addressed(args.bcc),
+        subject: said(approval, 'subject'),
+        body: args.body,
+        forwards: Boolean(said(approval, 'forward_message_id')),
+        replies: Boolean(said(approval, 'thread_id') || said(approval, 'in_reply_to')),
+    };
+}
+/** Why it was asked: the rule (`_rule`) or the check (`_check`). */
+export const whyAsked = (approval) => said(approval, '_rule') || said(approval, '_check');