@datalayer/agent-runtimes 1.3.88 → 1.3.90

package/lib/loop/plugins/a2ui/A2uiView.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Box, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text } from '@primer/react';
 import { MessageProcessor, } from '@a2ui/web_core/v0_9';
 import { useSignalValue } from '@datalayer/reactor/react';
 import { A2uiSurfaceComposed, datalayerCatalog, } from '../../../components/a2ui';
@@ -80,17 +81,8 @@ export default function A2uiView({ workspace }) {
     if (surfaces.length === 0) {
         return (_jsx(Centered, { children: _jsx(Text, { children: "Nothing has run yet. Ask for something that executes code and the result appears here as a surface rather than as output." }) }));
     }
-    return (_jsx(Box, { sx: { height: '100%', overflowY: 'auto', px: 4, py: 3 }, style: INHERIT_THEME, children: surfaces.map(surface => (_jsx(A2uiSurfaceComposed, { surface: surface }, surface.id))) }));
+    return (_jsx(Box, { height: "100%", overflowY: "auto", px: 4, py: 3, style: INHERIT_THEME, children: surfaces.map(surface => (_jsx(A2uiSurfaceComposed, { surface: surface }, surface.id))) }));
 }
 function Centered({ children }) {
-    return (_jsx(Box, { sx: {
-            height: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: 'fg.muted',
-            fontSize: 1,
-            px: 4,
-            textAlign: 'center',
-        }, children: children }));
+    return (_jsx(Box, { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "fg.muted", fontSize: 1, px: 4, textAlign: "center", children: children }));
 }

package/lib/loop/plugins/a2ui-surface/InlineSurface.js

@@ -79,21 +79,6 @@ export function InlineSurface({ messages, onAction, validationError, data, catal
                 display: 'flex',
                 flexDirection: 'column',
                 gap: 2,
-            }, children: [notice ? (_jsx(Box, { role: "alert", sx: {
-                        px: 3,
-                        py: 2,
-                        borderRadius: 2,
-                        bg: 'danger.subtle',
-                        border: '1px solid',
-                        borderColor: 'danger.muted',
-                        color: 'danger.fg',
-                        fontSize: 1,
-                    }, children: notice })) : null, surfaces.map(surface => (_jsx(Box, { sx: {
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        borderRadius: 2,
-                        p: 3,
-                        bg: 'canvas.default',
-                    }, children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id)))] }) }));
+            }, children: [notice ? (_jsx(Box, { role: "alert", px: 3, py: 2, borderRadius: 2, bg: "danger.subtle", border: "1px solid", borderColor: "danger.muted", color: "danger.fg", fontSize: 1, children: notice })) : null, surfaces.map(surface => (_jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 3, bg: "canvas.default", children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id)))] }) }));
 }
 export default InlineSurface;

package/lib/loop/plugins/a2ui-surface/SurfaceToolResult.js

@@ -56,18 +56,8 @@ export function SurfaceToolResult({ context, send, onRendered, onSubmitted, }) {
         }
     }, [parsed, title, send, onSubmitted]);
     if (!parsed?.messages || parsed.messages.length === 0) {
-        return (_jsxs(Box, { sx: {
-                border: '1px solid',
-                borderColor: 'border.default',
-                borderRadius: 2,
-                px: 3,
-                py: 2,
-                bg: 'canvas.default',
-                display: 'flex',
-                alignItems: 'center',
-                gap: 2,
-            }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Rendering A2UI surface..." })] }));
+        return (_jsxs(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, px: 3, py: 2, bg: "canvas.default", display: "flex", alignItems: "center", gap: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Rendering A2UI surface..." })] }));
     }
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: title }), _jsx(InlineSurface, { messages: parsed.messages, onAction: handleAction, validationError: validationError, catalog: catalog })] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: title }), _jsx(InlineSurface, { messages: parsed.messages, onAction: handleAction, validationError: validationError, catalog: catalog })] }));
 }
 export default SurfaceToolResult;

package/lib/loop/plugins/agents/AnonymousKeyBadge.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text } from '@primer/react';
 /* Both by file rather than through their barrels. The barrels reach the
    sign-in form and the whole in-page harness, and a plugin that only draws a
    countdown should not put either in the graph of every host that mounts
@@ -18,7 +19,7 @@ import { targetRunsAgentInPage } from './switchable';
  * that lives.
  */
 export function AnonymousKeyHeaderBadge({ workspace, }) {
-    return (_jsx(Box, { sx: { order: 1, display: 'inline-flex', alignItems: 'center' }, children: _jsx(AnonymousKeyBadge, { workspace: workspace }) }));
+    return (_jsx(Box, { order: 1, display: "inline-flex", alignItems: "center", children: _jsx(AnonymousKeyBadge, { workspace: workspace }) }));
 }
 export function AnonymousKeyBadge({ workspace, }) {
     const session = useAnonymousSession();

package/lib/loop/plugins/agents/SandboxSelector.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
-import { Box, SegmentedControl, Spinner, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { SegmentedControl, Spinner, Text } from '@primer/react';
 import { KernelIndicator } from '@datalayer/jupyter-react/kernel-indicator';
 import { useSignalValue } from '@datalayer/reactor/react';
 import { IDLE_SANDBOX_SNAPSHOT_SIGNAL, sandboxIndicatorState, } from '../../core';
@@ -37,12 +38,7 @@ export function SandboxSelector(_props) {
         return null;
     }
     const index = Math.max(0, SANDBOX_TARGETS.indexOf(target));
-    return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, minWidth: 0 }, children: [_jsx(Box, { sx: {
-                    width: 16,
-                    flexShrink: 0,
-                    display: 'flex',
-                    justifyContent: 'center',
-                }, children: moving ? _jsx(Spinner, { size: "small" }) : null }), _jsx(KernelIndicator, { state: sandboxIndicatorState(snapshot.state, status?.execution_state, status?.is_executing), kernelId: snapshot.kernelId ?? status?.kernel_id, kernelName: status?.kernel_name, serverUrl: snapshot.jupyterUrl ?? status?.jupyter_url, websocketUrl: toWebsocketUrl(snapshot.jupyterUrl ?? status?.jupyter_url), 
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, minWidth: 0, children: [_jsx(Box, { width: 16, flexShrink: 0, display: "flex", justifyContent: "center", children: moving ? _jsx(Spinner, { size: "small" }) : null }), _jsx(KernelIndicator, { state: sandboxIndicatorState(snapshot.state, status?.execution_state, status?.is_executing), kernelId: snapshot.kernelId ?? status?.kernel_id, kernelName: status?.kernel_name, serverUrl: snapshot.jupyterUrl ?? status?.jupyter_url, websocketUrl: toWebsocketUrl(snapshot.jupyterUrl ?? status?.jupyter_url), 
                 /*
                   The target that was chosen, not the variant last reported.
         

package/lib/loop/plugins/agents/SandboxView.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Label, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Label, Text } from '@primer/react';
 import { useSignalValue } from '@datalayer/reactor/react';
 import { useSandboxService } from './useSandboxService';
 function Row({ label, value }) {
-    return (_jsxs(Box, { sx: { display: 'flex', gap: 3, py: 1, fontSize: 1 }, children: [_jsx(Text, { sx: { color: 'fg.muted', minWidth: '140px' }, children: label }), _jsx(Text, { sx: { fontFamily: 'mono', wordBreak: 'break-all' }, children: value || _jsx(Text, { sx: { color: 'fg.subtle' }, children: "\u2014" }) })] }));
+    return (_jsxs(Box, { display: "flex", gap: 3, py: 1, fontSize: 1, children: [_jsx(Text, { sx: { color: 'fg.muted', minWidth: '140px' }, children: label }), _jsx(Text, { sx: { fontFamily: 'mono', wordBreak: 'break-all' }, children: value || _jsx(Text, { sx: { color: 'fg.subtle' }, children: "\u2014" }) })] }));
 }
 export default function SandboxView(_props) {
     const service = useSandboxService();
@@ -15,29 +16,5 @@ export default function SandboxView(_props) {
         : snapshot.state === 'error'
             ? 'danger'
             : 'attention';
-    return (_jsxs(Box, { sx: { height: '100%', overflowY: 'auto', px: 4, py: 3 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 3 }, children: [_jsx(Text, { sx: { fontSize: 3, fontWeight: 'bold' }, children: "Code Sandbox" }), _jsx(Label, { variant: tone, children: snapshot.state })] }), _jsx(Row, { label: "Variant", value: snapshot.variant }), _jsx(Row, { label: "Kernel", value: status?.kernel_name ?? snapshot.kernelId }), _jsx(Row, { label: "Kernel id", value: snapshot.kernelId }), _jsx(Row, { label: "Jupyter server", value: snapshot.jupyterUrl }), _jsx(Row, { label: "Execution state", value: status?.execution_state }), snapshot.state !== 'running' ? (_jsx(Box, { sx: {
-                    mt: 3,
-                    p: 3,
-                    bg: 'attention.subtle',
-                    borderRadius: 2,
-                    fontSize: 1,
-                }, children: "No sandbox is attached. Views that need one \u2014 the notebook, the document \u2014 stay unavailable until there is a kernel to bind to." })) : null, lastExecution ? (_jsxs(Box, { sx: { mt: 4 }, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'bold' }, children: "Last execution" }), _jsx(Box, { sx: {
-                            mt: 2,
-                            p: 2,
-                            bg: 'canvas.subtle',
-                            borderRadius: 2,
-                            fontFamily: 'mono',
-                            fontSize: 0,
-                            whiteSpace: 'pre-wrap',
-                        }, children: lastExecution.code }), lastExecution.stdout ? (_jsx(Box, { sx: {
-                            mt: 1,
-                            fontFamily: 'mono',
-                            fontSize: 0,
-                            whiteSpace: 'pre-wrap',
-                        }, children: lastExecution.stdout })) : null, lastExecution.error ? (_jsx(Box, { sx: {
-                            mt: 1,
-                            color: 'danger.fg',
-                            fontFamily: 'mono',
-                            fontSize: 0,
-                        }, children: lastExecution.error })) : null] })) : null] }));
+    return (_jsxs(Box, { height: "100%", overflowY: "auto", px: 4, py: 3, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 3, children: [_jsx(Text, { sx: { fontSize: 3, fontWeight: 'bold' }, children: "Code Sandbox" }), _jsx(Label, { variant: tone, children: snapshot.state })] }), _jsx(Row, { label: "Variant", value: snapshot.variant }), _jsx(Row, { label: "Kernel", value: status?.kernel_name ?? snapshot.kernelId }), _jsx(Row, { label: "Kernel id", value: snapshot.kernelId }), _jsx(Row, { label: "Jupyter server", value: snapshot.jupyterUrl }), _jsx(Row, { label: "Execution state", value: status?.execution_state }), snapshot.state !== 'running' ? (_jsx(Box, { mt: 3, p: 3, bg: "attention.subtle", borderRadius: 2, fontSize: 1, children: "No sandbox is attached. Views that need one \u2014 the notebook, the document \u2014 stay unavailable until there is a kernel to bind to." })) : null, lastExecution ? (_jsxs(Box, { mt: 4, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'bold' }, children: "Last execution" }), _jsx(Box, { mt: 2, p: 2, bg: "canvas.subtle", borderRadius: 2, fontFamily: "mono", fontSize: 0, whiteSpace: "pre-wrap", children: lastExecution.code }), lastExecution.stdout ? (_jsx(Box, { mt: 1, fontFamily: "mono", fontSize: 0, whiteSpace: "pre-wrap", children: lastExecution.stdout })) : null, lastExecution.error ? (_jsx(Box, { mt: 1, color: "danger.fg", fontFamily: "mono", fontSize: 0, children: lastExecution.error })) : null] })) : null] }));
 }

package/lib/loop/plugins/agents/TeamMemberPicker.js

@@ -42,10 +42,10 @@ function TeamMemberMenu({ selection, }) {
         // than an id pointing at an icon would.
         , { ...anchorProps, "aria-labelledby": undefined, icon: AiAgentIcon, "aria-label": active
                 ? `Talking to ${active.name}. Choose another agent.`
-                : 'Choose an agent', variant: "invisible", size: "small" })), children: _jsx(Box, { sx: { width: 440, maxWidth: 'calc(100vw - 16px)' }, children: _jsxs(ActionList, { selectionVariant: "single", role: "listbox", "aria-label": `Agents in ${selection.team.name}`, children: [_jsx(ActionList.GroupHeading, { children: selection.team.name }), selection.members.map(member => (_jsxs(ActionList.Item, { selected: member.id === selectedId, onSelect: () => {
+                : 'Choose an agent', variant: "invisible", size: "small" })), children: _jsx(Box, { width: 440, maxWidth: "calc(100vw - 16px)", children: _jsxs(ActionList, { selectionVariant: "single", role: "listbox", "aria-label": `Agents in ${selection.team.name}`, children: [_jsx(ActionList.GroupHeading, { children: selection.team.name }), selection.members.map(member => (_jsxs(ActionList.Item, { selected: member.id === selectedId, onSelect: () => {
                             selection.select(member.id);
                             setOpen(false);
-                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(MemberIcon, { icon: member.icon }) }), _jsxs(Box, { as: "span", sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [member.name, member.isSupervisor ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "supervisor" })) : null] }), member.description ? (_jsx(ActionList.Description, { variant: "block", 
+                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(MemberIcon, { icon: member.icon }) }), _jsxs(Box, { as: "span", display: "flex", alignItems: "center", gap: 2, children: [member.name, member.isSupervisor ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "supervisor" })) : null] }), member.description ? (_jsx(ActionList.Description, { variant: "block", 
                                 /* Wrapped and breakable. `minWidth: 0` is the load-bearing
                                  one: a grid item defaults to `min-content`, so without it
                                  the description refuses to be narrower than its longest

package/lib/loop/plugins/agentspecs/AgentspecPicker.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useState } from 'react';
-import { ActionList, ActionMenu, Box, Spinner } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ActionList, ActionMenu, Spinner } from '@primer/react';
 import { getAgentspecs } from '../../../specs/agents';
 export function AgentspecPicker({ workspace, }) {
     const [agents, setAgents] = useState([]);
@@ -85,6 +86,6 @@ export function AgentspecPicker({ workspace, }) {
          */
         return null;
     }
-    return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [switching ? _jsx(Spinner, { size: "small" }) : null, _jsxs(ActionMenu, { children: [_jsxs(ActionMenu.Button, { variant: "invisible", size: "small", children: [current?.emoji ? `${current.emoji} ` : '', label] }), _jsx(ActionMenu.Overlay, { width: "medium", children: _jsx(ActionList, { selectionVariant: "single", children: agents.map(agent => (_jsxs(ActionList.Item, { selected: agent.id === active, onSelect: () => void choose(agent.id), children: [agent.emoji ? `${agent.emoji} ` : '', agent.name || agent.id, agent.description ? (_jsx(ActionList.Description, { variant: "block", children: agent.description })) : null] }, agent.id))) }) })] })] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [switching ? _jsx(Spinner, { size: "small" }) : null, _jsxs(ActionMenu, { children: [_jsxs(ActionMenu.Button, { variant: "invisible", size: "small", children: [current?.emoji ? `${current.emoji} ` : '', label] }), _jsx(ActionMenu.Overlay, { width: "medium", children: _jsx(ActionList, { selectionVariant: "single", children: agents.map(agent => (_jsxs(ActionList.Item, { selected: agent.id === active, onSelect: () => void choose(agent.id), children: [agent.emoji ? `${agent.emoji} ` : '', agent.name || agent.id, agent.description ? (_jsx(ActionList.Description, { variant: "block", children: agent.description })) : null] }, agent.id))) }) })] })] }));
 }
 export default AgentspecPicker;

package/lib/loop/plugins/app-activity/AppActivity.js

@@ -40,7 +40,7 @@ function useRead(load, key, when = true) {
 function Session({ context, session, }) {
     const [open, setOpen] = useState(false);
     const entries = useRead(() => readSession(context, session.sessionUid), `${session.sessionUid}:${context.token}`, open);
-    return (_jsxs(Box, { as: "details", onToggle: (event) => setOpen(event.currentTarget.open), sx: { borderTop: '1px solid', borderColor: 'border.muted', py: 2 }, children: [_jsxs(Box, { as: "summary", sx: { cursor: 'pointer', fontSize: 1 }, children: [session.createdAt ? (_jsx(RelativeTime, { datetime: session.createdAt })) : ('A session'), session.version ? ` · version ${session.version}` : '', entries.value ? ` · ${sessionSentence(entries.value)}` : ''] }), !open ? null : entries.loading ? (_jsx(Spinner, { size: "small" })) : entries.error ? (_jsx(Text, { role: "alert", sx: { fontSize: 1 }, children: entries.error })) : (_jsx(Box, { as: "ol", sx: { pl: 3, mt: 2, mb: 0, fontSize: 1 }, children: (entries.value ?? []).map(entry => (_jsxs(Box, { as: "li", sx: { mb: 1 }, children: [_jsx(Label, { sx: { mr: 2 }, children: RECORD_KIND_WORDS[entry.kind] ?? entry.kind }), entry.summary] }, entry.uid))) }))] }));
+    return (_jsxs(Box, { as: "details", onToggle: (event) => setOpen(event.currentTarget.open), borderTop: "1px solid", borderColor: "border.muted", py: 2, children: [_jsxs(Box, { as: "summary", cursor: "pointer", fontSize: 1, children: [session.createdAt ? (_jsx(RelativeTime, { datetime: session.createdAt })) : ('A session'), session.version ? ` · version ${session.version}` : '', entries.value ? ` · ${sessionSentence(entries.value)}` : ''] }), !open ? null : entries.loading ? (_jsx(Spinner, { size: "small" })) : entries.error ? (_jsx(Text, { role: "alert", sx: { fontSize: 1 }, children: entries.error })) : (_jsx(Box, { as: "ol", pl: 3, mt: 2, mb: 0, fontSize: 1, children: (entries.value ?? []).map(entry => (_jsxs(Box, { as: "li", mb: 1, children: [_jsx(Label, { sx: { mr: 2 }, children: RECORD_KIND_WORDS[entry.kind] ?? entry.kind }), entry.summary] }, entry.uid))) }))] }));
 }
 export function AppActivity({ appUid }) {
     const token = useIAMStore(state => state.token) ?? '';

package/lib/loop/plugins/app-computer/AppComputer.js

@@ -20,19 +20,11 @@ const MONO = {
 function Parts({ app }) {
     const parts = computerParts(app);
     const off = partsOff(parts);
-    return (_jsxs(Box, { "data-testid": "computer-parts", children: [_jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap', mb: 1 }, children: COMPUTER_PARTS.map(part => (_jsxs(Label, { variant: parts[part] ? 'success' : 'secondary', "data-part": part, "data-on": parts[part] ? 'true' : 'false', children: [COMPUTER_WORDS.part[part], ":", ' ', parts[part] ? COMPUTER_WORDS.on : COMPUTER_WORDS.off] }, part))) }), off.length > 0 && off.length < COMPUTER_PARTS.length ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: COMPUTER_WORDS.offSaid(off) })) : null] }));
+    return (_jsxs(Box, { "data-testid": "computer-parts", children: [_jsx(Box, { display: "flex", gap: 1, flexWrap: "wrap", mb: 1, children: COMPUTER_PARTS.map(part => (_jsxs(Label, { variant: parts[part] ? 'success' : 'secondary', "data-part": part, "data-on": parts[part] ? 'true' : 'false', children: [COMPUTER_WORDS.part[part], ":", ' ', parts[part] ? COMPUTER_WORDS.on : COMPUTER_WORDS.off] }, part))) }), off.length > 0 && off.length < COMPUTER_PARTS.length ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: COMPUTER_WORDS.offSaid(off) })) : null] }));
 }
 function Terminal({ conversation, }) {
     const entries = terminalEntries(conversation);
-    return (_jsxs(Box, { "data-testid": "computer-terminal", children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 1 }, children: COMPUTER_WORDS.terminal }), entries.length === 0 ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: COMPUTER_WORDS.nothingRan })) : (_jsx(Box, { sx: {
-                    bg: 'canvas.inset',
-                    border: '1px solid',
-                    borderColor: 'border.muted',
-                    borderRadius: 2,
-                    p: 2,
-                    maxHeight: 320,
-                    overflow: 'auto',
-                }, children: entries.map((entry, index) => (_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Text, { as: "p", sx: { ...MONO, fontWeight: 'semibold' }, children: `$ ${entry.tool}${entry.command ? `: ${entry.command}` : ''}` }), entry.output === undefined ? (_jsx(Spinner, { size: "small" })) : (_jsx(Text, { as: "pre", sx: { ...MONO, color: 'fg.muted' }, children: entry.output }))] }, index))) }))] }));
+    return (_jsxs(Box, { "data-testid": "computer-terminal", children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 1 }, children: COMPUTER_WORDS.terminal }), entries.length === 0 ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: COMPUTER_WORDS.nothingRan })) : (_jsx(Box, { bg: "canvas.inset", border: "1px solid", borderColor: "border.muted", borderRadius: 2, p: 2, maxHeight: 320, overflow: "auto", children: entries.map((entry, index) => (_jsxs(Box, { mb: 2, children: [_jsx(Text, { as: "p", sx: { ...MONO, fontWeight: 'semibold' }, children: `$ ${entry.tool}${entry.command ? `: ${entry.command}` : ''}` }), entry.output === undefined ? (_jsx(Spinner, { size: "small" })) : (_jsx(Text, { as: "pre", sx: { ...MONO, color: 'fg.muted' }, children: entry.output }))] }, index))) }))] }));
 }
 function save(blob, name) {
     const url = URL.createObjectURL(blob);
@@ -70,15 +62,7 @@ function Files({ context, state, ended, }) {
         state.started,
         ended,
     ]);
-    return (_jsxs(Box, { "data-testid": "computer-files", children: [_jsxs(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 1 }, children: [COMPUTER_WORDS.files, path !== '.' ? (_jsx(Text, { sx: { fontWeight: 'normal', color: 'fg.muted' }, children: ` · ${path}` })) : null] }), !state.started ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: COMPUTER_WORDS.notStarted })) : error ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'danger.fg', m: 0 }, children: error })) : !entries ? (_jsx(Spinner, { size: "small" })) : (_jsxs(Box, { as: "ul", sx: { listStyle: 'none', p: 0, m: 0 }, children: [path !== '.' ? (_jsx(Box, { as: "li", children: _jsx(Button, { size: "small", variant: "invisible", onClick: () => setPath(parentOf(path)), children: COMPUTER_WORDS.up }) })) : null, entries.length === 0 ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: COMPUTER_WORDS.emptyDirectory })) : null, entries.map(entry => (_jsx(Box, { as: "li", "data-path": entry.path, sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 2,
-                            fontSize: 1,
-                            py: 1,
-                            borderTop: '1px solid',
-                            borderColor: 'border.muted',
-                        }, children: entry.type === 'directory' ? (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setPath(entry.path), children: `${entry.name}/` })) : (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { flex: 1, fontFamily: MONO_FACE, fontSize: 0 }, children: entry.name }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: `${entry.size.toLocaleString('en')} bytes` }), _jsx(Button, { size: "small", "aria-label": `${COMPUTER_WORDS.download} ${entry.name}`, onClick: () => {
+    return (_jsxs(Box, { "data-testid": "computer-files", children: [_jsxs(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 1 }, children: [COMPUTER_WORDS.files, path !== '.' ? (_jsx(Text, { sx: { fontWeight: 'normal', color: 'fg.muted' }, children: ` · ${path}` })) : null] }), !state.started ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: COMPUTER_WORDS.notStarted })) : error ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'danger.fg', m: 0 }, children: error })) : !entries ? (_jsx(Spinner, { size: "small" })) : (_jsxs(Box, { as: "ul", listStyle: "none", p: 0, m: 0, children: [path !== '.' ? (_jsx(Box, { as: "li", children: _jsx(Button, { size: "small", variant: "invisible", onClick: () => setPath(parentOf(path)), children: COMPUTER_WORDS.up }) })) : null, entries.length === 0 ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: COMPUTER_WORDS.emptyDirectory })) : null, entries.map(entry => (_jsx(Box, { as: "li", "data-path": entry.path, display: "flex", alignItems: "center", gap: 2, fontSize: 1, py: 1, borderTop: "1px solid", borderColor: "border.muted", children: entry.type === 'directory' ? (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setPath(entry.path), children: `${entry.name}/` })) : (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { flex: 1, fontFamily: MONO_FACE, fontSize: 0 }, children: entry.name }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: `${entry.size.toLocaleString('en')} bytes` }), _jsx(Button, { size: "small", "aria-label": `${COMPUTER_WORDS.download} ${entry.name}`, onClick: () => {
                                         downloadComputerFile(context, entry.path).then(blob => save(blob, entry.name), (failed) => setError(failed instanceof Error
                                             ? failed.message
                                             : String(failed)));
@@ -109,7 +93,7 @@ function YourTerminal({ context }) {
             setRunning(false);
         });
     };
-    return (_jsxs(Box, { "data-testid": "computer-your-terminal", sx: { mt: 2 }, children: [outputs.map((each, index) => (_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Text, { as: "p", sx: { ...MONO, fontWeight: 'semibold' }, children: `>>> ${each.code}` }), _jsx(Text, { as: "pre", sx: { ...MONO, color: 'fg.muted' }, children: [each.output.stdout, each.output.stderr, each.output.error]
+    return (_jsxs(Box, { "data-testid": "computer-your-terminal", mt: 2, children: [outputs.map((each, index) => (_jsxs(Box, { mb: 2, children: [_jsx(Text, { as: "p", sx: { ...MONO, fontWeight: 'semibold' }, children: `>>> ${each.code}` }), _jsx(Text, { as: "pre", sx: { ...MONO, color: 'fg.muted' }, children: [each.output.stdout, each.output.stderr, each.output.error]
                             .filter(Boolean)
                             .join('\n') })] }, index))), _jsx(Textarea, { "aria-label": COMPUTER_WORDS.yourCode, placeholder: COMPUTER_WORDS.yourCode, value: code, onChange: event => setCode(event.target.value), sx: { width: '100%', fontFamily: MONO_FACE }, rows: 3 }), _jsx(Button, { size: "small", sx: { mt: 1 }, disabled: running || !code.trim(), onClick: run, children: COMPUTER_WORDS.run })] }));
 }
@@ -170,7 +154,7 @@ export function AppComputer({ app, workspace, }) {
         });
     };
     const me = Boolean(state?.yours);
-    return (_jsxs(Box, { "data-testid": "app-computer", children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: COMPUTER_WORDS.title }), _jsx(Parts, { app: app }), !used ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0, mt: 1 }, children: COMPUTER_WORDS.none })) : (_jsxs(_Fragment, { children: [_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0, mt: 1 }, children: COMPUTER_WORDS.noBrowser }), error ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'danger.fg', m: 0, mt: 2 }, children: error })) : null, state ? (_jsxs(Box, { sx: { mt: 2 }, "data-testid": "computer-holder", children: [_jsx(Text, { as: "p", sx: { fontSize: 1, m: 0, mb: 1 }, children: !state.held
+    return (_jsxs(Box, { "data-testid": "app-computer", children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: COMPUTER_WORDS.title }), _jsx(Parts, { app: app }), !used ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0, mt: 1 }, children: COMPUTER_WORDS.none })) : (_jsxs(_Fragment, { children: [_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0, mt: 1 }, children: COMPUTER_WORDS.noBrowser }), error ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'danger.fg', m: 0, mt: 2 }, children: error })) : null, state ? (_jsxs(Box, { mt: 2, "data-testid": "computer-holder", children: [_jsx(Text, { as: "p", sx: { fontSize: 1, m: 0, mb: 1 }, children: !state.held
                                     ? COMPUTER_WORDS.agentHas
                                     : me
                                         ? COMPUTER_WORDS.youHave

package/lib/loop/plugins/app-elements/AppElements.js

@@ -36,13 +36,7 @@ function ElementBody({ element, send, }) {
     , { messages: parsed.messages, onAction: onAction, catalog: catalog }, JSON.stringify(element.shows)));
 }
 function ElementHeader({ element }) {
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'space-between',
-            gap: 2,
-            mb: 2,
-        }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'bold', m: 0 }, children: element.title }), _jsx(IconButton, { icon: XIcon, variant: "invisible", size: "small", "aria-label": `Close ${element.title}`, onClick: () => closeLoopElement(element.id) })] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, mb: 2, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'bold', m: 0 }, children: element.title }), _jsx(IconButton, { icon: XIcon, variant: "invisible", size: "small", "aria-label": `Close ${element.title}`, onClick: () => closeLoopElement(element.id) })] }));
 }
 /** Every element open in a side panel or on a page, drawn where it belongs. */
 export function AppElements({ workspace, }) {
@@ -51,29 +45,6 @@ export function AppElements({ workspace, }) {
     const send = workspace?.viewControls.send;
     if (panels.length === 0 && page === null)
         return null;
-    return (_jsxs(_Fragment, { children: [panels.length > 0 ? (_jsx(Box, { as: "aside", "aria-label": "Side panel", sx: {
-                    position: 'absolute',
-                    top: 0,
-                    right: 0,
-                    bottom: 0,
-                    width: `min(${APP_PANEL_WIDTH}px, 100%)`,
-                    zIndex: 1,
-                    overflowY: 'auto',
-                    borderLeft: '1px solid',
-                    borderColor: 'border.default',
-                    bg: 'canvas.subtle',
-                    boxShadow: 'shadow.medium',
-                    p: 3,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 3,
-                }, children: panels.map(element => (_jsxs(Box, { as: "section", "aria-label": element.title, children: [_jsx(ElementHeader, { element: element }), _jsx(ElementBody, { element: element, send: send })] }, element.id))) })) : null, page !== null ? (_jsxs(Box, { role: "dialog", "aria-label": page.title, sx: {
-                    position: 'absolute',
-                    inset: 0,
-                    zIndex: 2,
-                    overflowY: 'auto',
-                    bg: 'canvas.default',
-                    p: [3, 4],
-                }, children: [_jsx(ElementHeader, { element: page }), _jsx(ElementBody, { element: page, send: send })] })) : null] }));
+    return (_jsxs(_Fragment, { children: [panels.length > 0 ? (_jsx(Box, { as: "aside", "aria-label": "Side panel", position: "absolute", top: 0, right: 0, bottom: 0, width: `min(${APP_PANEL_WIDTH}px, 100%)`, zIndex: 1, overflowY: "auto", borderLeft: "1px solid", borderColor: "border.default", bg: "canvas.subtle", boxShadow: "shadow.medium", p: 3, display: "flex", flexDirection: "column", gap: 3, children: panels.map(element => (_jsxs(Box, { as: "section", "aria-label": element.title, children: [_jsx(ElementHeader, { element: element }), _jsx(ElementBody, { element: element, send: send })] }, element.id))) })) : null, page !== null ? (_jsxs(Box, { role: "dialog", "aria-label": page.title, position: "absolute", inset: 0, zIndex: 2, overflowY: "auto", bg: "canvas.default", p: [3, 4], children: [_jsx(ElementHeader, { element: page }), _jsx(ElementBody, { element: page, send: send })] })) : null] }));
 }
 export default AppElements;

package/lib/loop/plugins/app-page/AppPage.js

@@ -201,7 +201,7 @@ export function AppPage({ app, workspace }) {
             }
         }
     }, [app, runPage]);
-    return (_jsx(Box, { "data-testid": "app-page", sx: { height: '100%', minHeight: 0, overflow: 'auto', p: 3 }, children: 'problem' in drawing ? (_jsx(Box, { role: "status", sx: { color: 'fg.muted', fontSize: 1 }, children: drawing.problem })) : (_jsx(InlineSurface
+    return (_jsx(Box, { "data-testid": "app-page", height: "100%", minHeight: 0, overflow: "auto", p: 3, children: 'problem' in drawing ? (_jsx(Box, { role: "status", color: "fg.muted", fontSize: 1, children: drawing.problem })) : (_jsx(InlineSurface
         // A new list of blocks is a new surface, drawn with it.
         , { messages: messages, data: data, onAction: onAction, validationError: refusal, catalog: drawing.catalog, ...(page ? { onSurface } : {}) }, drawnWith)) }));
 }

package/lib/loop/plugins/app-rules/AppRulesCard.js

@@ -49,36 +49,20 @@ export function approvalsOfApp(approvals, appId) {
 const PENDING = { status: 'pending' };
 /** A result it wants to keep, shown whole before it is (LOOP R-24). */
 export function DraftShown({ draft }) {
-    return (_jsxs(Box, { "data-testid": "app-draft", sx: { mt: 1 }, children: [_jsx(Text, { as: "p", sx: { m: 0, fontSize: 0, color: 'fg.muted' }, children: SAVE_WORDS.where(draft.space) }), _jsx(Text, { as: "p", sx: { m: 0, fontWeight: 'semibold' }, children: draft.title }), _jsx(Box, { as: "pre", sx: {
-                    m: 0,
-                    mt: 1,
-                    p: 2,
-                    maxHeight: 240,
-                    overflow: 'auto',
-                    whiteSpace: 'pre-wrap',
-                    fontFamily: 'inherit',
-                    fontSize: 0,
-                    bg: 'canvas.subtle',
-                    borderRadius: 2,
-                }, children: draft.content })] }));
+    return (_jsxs(Box, { "data-testid": "app-draft", mt: 1, children: [_jsx(Text, { as: "p", sx: { m: 0, fontSize: 0, color: 'fg.muted' }, children: SAVE_WORDS.where(draft.space) }), _jsx(Text, { as: "p", sx: { m: 0, fontWeight: 'semibold' }, children: draft.title }), _jsx(Box, { as: "pre", m: 0, mt: 1, p: 2, maxHeight: 240, overflow: "auto", whiteSpace: "pre-wrap", fontFamily: "inherit", fontSize: 0, bg: "canvas.subtle", borderRadius: 2, children: draft.content })] }));
 }
 function Approvals({ app }) {
     const query = useToolApprovalsQuery(PENDING);
     const approve = useApproveToolRequest();
     const reject = useRejectToolRequest();
     const waiting = useMemo(() => approvalsOfApp(query.data?.approvals ?? [], app.id), [query.data, app.id]);
-    return (_jsxs(Box, { "data-testid": "app-approvals", children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 1 }, children: APP_RULES_WORDS.waiting }), approve.connectionState !== 'connected' ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0, mb: 1 }, children: APP_RULES_WORDS.offline })) : null, waiting.length === 0 ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: APP_RULES_WORDS.nothingWaiting })) : (_jsx(Box, { as: "ul", sx: { listStyle: 'none', p: 0, m: 0 }, children: waiting.map(approval => {
+    return (_jsxs(Box, { "data-testid": "app-approvals", children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 1 }, children: APP_RULES_WORDS.waiting }), approve.connectionState !== 'connected' ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0, mb: 1 }, children: APP_RULES_WORDS.offline })) : null, waiting.length === 0 ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: APP_RULES_WORDS.nothingWaiting })) : (_jsx(Box, { as: "ul", listStyle: "none", p: 0, m: 0, children: waiting.map(approval => {
                     const draft = draftOfApproval(approval);
-                    return (_jsxs(Box, { as: "li", sx: {
-                            py: 2,
-                            borderTop: '1px solid',
-                            borderColor: 'border.muted',
-                            fontSize: 1,
-                        }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: approval.tool_name }), ruleOfApproval(approval) ? (_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: ruleOfApproval(approval) })) : null, draft ? _jsx(DraftShown, { draft: draft }) : null, _jsxs(Box, { sx: { display: 'flex', gap: 2, mt: 1 }, children: [_jsx(Button, { size: "small", variant: "primary", disabled: approve.isPending, onClick: () => approve.mutate({ id: approval.id }), children: draft ? SAVE_WORDS.approve : APP_RULES_WORDS.approve }), _jsx(Button, { size: "small", disabled: reject.isPending, onClick: () => reject.mutate({ id: approval.id }), children: draft ? SAVE_WORDS.decline : APP_RULES_WORDS.reject })] })] }, approval.id));
+                    return (_jsxs(Box, { as: "li", py: 2, borderTop: "1px solid", borderColor: "border.muted", fontSize: 1, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: approval.tool_name }), ruleOfApproval(approval) ? (_jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: ruleOfApproval(approval) })) : null, draft ? _jsx(DraftShown, { draft: draft }) : null, _jsxs(Box, { display: "flex", gap: 2, mt: 1, children: [_jsx(Button, { size: "small", variant: "primary", disabled: approve.isPending, onClick: () => approve.mutate({ id: approval.id }), children: draft ? SAVE_WORDS.approve : APP_RULES_WORDS.approve }), _jsx(Button, { size: "small", disabled: reject.isPending, onClick: () => reject.mutate({ id: approval.id }), children: draft ? SAVE_WORDS.decline : APP_RULES_WORDS.reject })] })] }, approval.id));
                 }) }))] }));
 }
 export function AppRulesCard({ app }) {
     const signedIn = Boolean(useIAMStore(state => state.token));
-    return (_jsxs(Box, { "data-testid": "app-rules", sx: { mb: 4 }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: APP_RULES_WORDS.title }), app.rules.length === 0 ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: APP_RULES_WORDS.none })) : (_jsx(Box, { as: "ul", sx: { listStyle: 'none', p: 0, m: 0 }, children: app.rules.map(ruleInWords).map((rule, index) => (_jsxs(Box, { as: "li", sx: { py: 1, fontSize: 1 }, children: [_jsx(Text, { children: rule.action }), ' ', _jsx(Label, { title: rule.means, children: rule.says }), _jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: rule.covers })] }, index))) })), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 1, mb: 0 }, children: APP_RULES_WORDS.byDefault }), signedIn ? (_jsx(Approvals, { app: app })) : (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', mt: 3, mb: 0 }, children: APP_RULES_WORDS.signedOut }))] }));
+    return (_jsxs(Box, { "data-testid": "app-rules", mb: 4, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: APP_RULES_WORDS.title }), app.rules.length === 0 ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: APP_RULES_WORDS.none })) : (_jsx(Box, { as: "ul", listStyle: "none", p: 0, m: 0, children: app.rules.map(ruleInWords).map((rule, index) => (_jsxs(Box, { as: "li", py: 1, fontSize: 1, children: [_jsx(Text, { children: rule.action }), ' ', _jsx(Label, { title: rule.means, children: rule.says }), _jsx(Text, { as: "p", sx: { m: 0, color: 'fg.muted', fontSize: 0 }, children: rule.covers })] }, index))) })), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 1, mb: 0 }, children: APP_RULES_WORDS.byDefault }), signedIn ? (_jsx(Approvals, { app: app })) : (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', mt: 3, mb: 0 }, children: APP_RULES_WORDS.signedOut }))] }));
 }
 export default AppRulesCard;

package/lib/loop/plugins/assistant/index.js

@@ -176,19 +176,7 @@ export function LoopAssistant({ app, person, appId, decisions, balloon: displayG
     }
     if ('problem' in chosen) {
         // Not replaced by another: what was named is said, where it would stand.
-        return (_jsx(Box, { role: "status", "data-assistant-problem": chosen.saidBy, sx: {
-                position: 'fixed',
-                right: 24,
-                bottom: 24,
-                zIndex: 1000,
-                maxWidth: 320,
-                p: 2,
-                borderRadius: 2,
-                border: '1px solid',
-                borderColor: 'attention.muted',
-                bg: 'attention.subtle',
-                boxShadow: 'shadow.medium',
-            }, children: _jsx(Text, { sx: { fontSize: 1 }, children: chosen.problem }) }));
+        return (_jsx(Box, { role: "status", "data-assistant-problem": chosen.saidBy, position: "fixed", right: 24, bottom: 24, zIndex: 1000, maxWidth: 320, p: 2, borderRadius: 2, border: "1px solid", borderColor: "attention.muted", bg: "attention.subtle", boxShadow: "shadow.medium", children: _jsx(Text, { sx: { fontSize: 1 }, children: chosen.problem }) }));
     }
     const state = assistantStateOfTurn(turn, presence, { arriving, leaving });
     const unheard = !!saying && saying.id !== heardId;