@datalayer/agent-runtimes 1.3.89 → 1.3.90

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');

package/lib/voice/VoiceInput.js

@@ -158,24 +158,7 @@ export function VoiceInput({ hearing, language, onTranscript, onListen, consentK
     const label = listening
         ? 'Listening — let go to stop'
         : 'Hold to talk (Ctrl+Space)';
-    return (_jsxs(Box, { "data-voice-input": state, sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 1,
-            position: 'relative',
-        }, children: [speaking && onStopSpeaking && (_jsx(Tooltip, { text: "Stop speaking (Esc)", direction: "n", children: _jsx(IconButton, { icon: MuteIcon, "aria-label": "Stop speaking", size: "small", variant: "invisible", "data-voice-stop": "", onClick: onStopSpeaking }) })), listening && (_jsx(Box, { "aria-hidden": "true", sx: {
-                    width: 40,
-                    height: 4,
-                    borderRadius: 2,
-                    bg: 'neutral.muted',
-                    overflow: 'hidden',
-                }, children: _jsx(Box, { ref: meter, sx: {
-                        width: '100%',
-                        height: '100%',
-                        bg: 'danger.emphasis',
-                        transformOrigin: 'left',
-                        transform: prefersStill() ? 'scaleX(1)' : 'scaleX(0.04)',
-                    } }) })), (state === 'loading' || state === 'hearing') && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, "data-voice-progress": "", children: state === 'loading' && progress !== undefined ? `${progress}%` : '…' })), _jsx(Tooltip, { text: label, direction: "n", children: _jsx(IconButton, { icon: () => _jsx(MicrophoneIcon, { size: 16 }), "aria-label": label, "aria-pressed": listening, size: "small", variant: listening ? 'danger' : 'invisible', disabled: disabled || state === 'hearing', "data-voice-mic": "", onPointerDown: event => {
+    return (_jsxs(Box, { "data-voice-input": state, display: "inline-flex", alignItems: "center", gap: 1, position: "relative", children: [speaking && onStopSpeaking && (_jsx(Tooltip, { text: "Stop speaking (Esc)", direction: "n", children: _jsx(IconButton, { icon: MuteIcon, "aria-label": "Stop speaking", size: "small", variant: "invisible", "data-voice-stop": "", onClick: onStopSpeaking }) })), listening && (_jsx(Box, { "aria-hidden": "true", width: 40, height: 4, borderRadius: 2, bg: "neutral.muted", overflow: "hidden", children: _jsx(Box, { ref: meter, width: "100%", height: "100%", bg: "danger.emphasis", transformOrigin: "left", transform: prefersStill() ? 'scaleX(1)' : 'scaleX(0.04)' }) })), (state === 'loading' || state === 'hearing') && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, "data-voice-progress": "", children: state === 'loading' && progress !== undefined ? `${progress}%` : '…' })), _jsx(Tooltip, { text: label, direction: "n", children: _jsx(IconButton, { icon: () => _jsx(MicrophoneIcon, { size: 16 }), "aria-label": label, "aria-pressed": listening, size: "small", variant: listening ? 'danger' : 'invisible', disabled: disabled || state === 'hearing', "data-voice-mic": "", onPointerDown: event => {
                         if (event.button !== 0) {
                             return;
                         }
@@ -203,31 +186,12 @@ export function VoiceInput({ hearing, language, onTranscript, onListen, consentK
                                 void start();
                             }
                         }
-                    } }) }), state === 'asking' && (_jsxs(Box, { role: "dialog", "aria-label": "Talk instead of typing", "data-voice-consent": "", sx: {
-                    position: 'absolute',
-                    bottom: '100%',
-                    right: 0,
-                    mb: 2,
-                    width: 280,
-                    p: 3,
-                    bg: 'canvas.overlay',
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    boxShadow: 'shadow.large',
-                    zIndex: 10,
-                }, children: [_jsx(Text, { as: "p", sx: { fontSize: 1, mb: 2 }, children: CONSENT_SENTENCE }), _jsxs(Box, { sx: { display: 'flex', gap: 2, justifyContent: 'flex-end' }, children: [_jsx(Button, { size: "small", onClick: () => setState('idle'), children: "Not now" }), _jsx(Button, { size: "small", variant: "primary", "data-voice-consent-yes": "", onClick: () => {
+                    } }) }), state === 'asking' && (_jsxs(Box, { role: "dialog", "aria-label": "Talk instead of typing", "data-voice-consent": "", position: "absolute", bottom: "100%", right: 0, mb: 2, width: 280, p: 3, bg: "canvas.overlay", border: "1px solid", borderColor: "border.default", borderRadius: 2, boxShadow: "shadow.large", zIndex: 10, children: [_jsx(Text, { as: "p", sx: { fontSize: 1, mb: 2 }, children: CONSENT_SENTENCE }), _jsxs(Box, { display: "flex", gap: 2, justifyContent: "flex-end", children: [_jsx(Button, { size: "small", onClick: () => setState('idle'), children: "Not now" }), _jsx(Button, { size: "small", variant: "primary", "data-voice-consent-yes": "", onClick: () => {
                                     consent(consentKey);
                                     // Asked, and said yes: listen now, without another press.
                                     stateRef.current = 'idle';
                                     setState('idle');
                                     void start();
-                                }, children: "Use the microphone" })] })] })), _jsx(Box, { as: "span", role: "status", "aria-live": "polite", sx: {
-                    position: 'absolute',
-                    width: 1,
-                    height: 1,
-                    overflow: 'hidden',
-                    clip: 'rect(0 0 0 0)',
-                }, children: WORDS[state] || said }), problem && (_jsx(Text, { role: "alert", sx: { fontSize: 0, color: 'danger.fg', maxWidth: 220 }, "data-voice-problem": "", children: problem }))] }));
+                                }, children: "Use the microphone" })] })] })), _jsx(Box, { as: "span", role: "status", "aria-live": "polite", position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)", children: WORDS[state] || said }), problem && (_jsx(Text, { role: "alert", sx: { fontSize: 0, color: 'danger.fg', maxWidth: 220 }, "data-voice-problem": "", children: problem }))] }));
 }
 export default VoiceInput;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@datalayer/agent-runtimes",
-    "version": "1.3.89",
+    "version": "1.3.90",
     "type": "module",
     "workspaces": [
         ".",
@@ -154,7 +154,7 @@
         "@datalayer/jupyter-react": "^2.0.20",
         "@datalayer/jupyter-server-nbmodel": "^0.2.8",
         "@datalayer/lexical-loro": "^1.0.6",
-        "@datalayer/primer-addons": "^1.0.23",
+        "@datalayer/primer-addons": "^1.0.39",
         "@datalayer/primer-rjsf": "^1.0.3",
         "@datalayer/reactor": "^1.0.4",
         "@datalayer/reactor-commands": "^1.0.4",

package/lib/shims/primerAddonsBox.d.ts

@@ -1 +0,0 @@
-export { Box as default, Box } from '@primer/react';

package/lib/shims/primerAddonsBox.js

@@ -1,7 +0,0 @@
-/*
- * Copyright (c) 2025-2026 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-// Runtime shim: force the primer-addons Box export to use Primer's Box.
-// This prevents `sx` from being forwarded to raw DOM nodes as an attribute.
-export { Box as default, Box } from '@primer/react';