@datalayer/agent-runtimes 1.3.89 → 1.3.91

package/lib/loop/embed/embedTheme.js

@@ -2,7 +2,7 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { getThemeConfig, loopAccentStyles, loopFontFamily, scopeThemeCss, THEME_SCOPE_ATTRIBUTE, } from '@datalayer/primer-addons';
+import { getThemeConfig, loopFontFamily, scopeThemeCss, THEME_SCOPE_ATTRIBUTE, themeAccentVars, } from '@datalayer/primer-addons';
 /** One mode's properties, with the theme's face replaced by the host's. */
 function withFace(styles, font, own) {
     if (!font || !own) {
@@ -20,18 +20,22 @@ function faceOf(variant, styles) {
     }
     return typeof styles.fontFamily === 'string' ? styles.fontFamily : '';
 }
-/** The accent over a theme: `loop`'s colours, over `loop` only (T-30). */
-const accentOver = (variant, accent, which) => variant === 'loop' ? loopAccentStyles(accent, which) : {};
+/**
+ * The accent over a theme, whichever theme (T-05, T-30; every theme since
+ * 2026-10-07); none when neither the application nor the host names one —
+ * the theme's own colours.
+ */
+const accentOver = (accent, which) => (accent ? themeAccentVars(accent, which) : {});
 /**
  * The theme as the embed wears it — `loop`, or the one the application
- * names (T-30) — with the application's accent over `loop` in both modes
+ * names (T-30) — with the application's accent over it in both modes
  * (T-05), and the host's face when it named one.
  */
 export function embedThemeStyles({ accent, font = '', variant = 'loop', }) {
     const base = getThemeConfig(variant).themeStyles;
     const mode = (which) => {
         const theme = base[which];
-        return withFace({ ...theme, ...accentOver(variant, accent, which) }, font, faceOf(variant, theme));
+        return withFace({ ...theme, ...accentOver(accent, which) }, font, faceOf(variant, theme));
     };
     return {
         ...base,
@@ -43,7 +47,7 @@ export function embedThemeStyles({ accent, font = '', variant = 'loop', }) {
  * The same accent and face laid over the conversation's own theme (T-05,
  * D-11): the chat sets its theme again inside it, which would put the
  * theme's colours and face back over what the embed set around it. The
- * accent's properties in each mode (over `loop` only), and, when the host
+ * accent's properties in each mode (over any theme), and, when the host
  * named a face, every property of the theme that names its own.
  */
 export function embedThemeOverrides({ accent, font = '', variant = 'loop', }) {
@@ -51,7 +55,7 @@ export function embedThemeOverrides({ accent, font = '', variant = 'loop', }) {
     const mode = (which) => {
         const theme = base[which];
         const faced = Object.fromEntries(Object.entries(withFace(theme, font, faceOf(variant, theme))).filter(([name, value]) => typeof value === 'string' && value !== theme[name]));
-        return { ...faced, ...accentOver(variant, accent, which) };
+        return { ...faced, ...accentOver(accent, which) };
     };
     return { light: mode('light'), dark: mode('dark') };
 }

package/lib/loop/plugins/a2a-sidebar/A2ASidebar.js

@@ -100,14 +100,14 @@ const STATUS_LABEL = {
 function StatusBadge({ status, }) {
     switch (status) {
         case 'done':
-            return (_jsx(Box, { sx: { color: 'success.fg', display: 'flex' }, children: _jsx(CheckCircleIcon, {}) }));
+            return (_jsx(Box, { color: "success.fg", display: "flex", children: _jsx(CheckCircleIcon, {}) }));
         case 'stopped':
-            return (_jsx(Box, { sx: { color: 'attention.fg', display: 'flex' }, children: _jsx(AlertIcon, {}) }));
+            return (_jsx(Box, { color: "attention.fg", display: "flex", children: _jsx(AlertIcon, {}) }));
         case 'failed':
-            return (_jsx(Box, { sx: { color: 'danger.fg', display: 'flex' }, children: _jsx(AlertIcon, {}) }));
+            return (_jsx(Box, { color: "danger.fg", display: "flex", children: _jsx(AlertIcon, {}) }));
         case 'launching':
         case 'working':
-            return (_jsx(Box, { sx: { color: 'accent.fg', display: 'flex' }, children: _jsx(DependabotIcon, {}) }));
+            return (_jsx(Box, { color: "accent.fg", display: "flex", children: _jsx(DependabotIcon, {}) }));
         default:
             return _jsx(BroadcastIcon, {});
     }
@@ -120,13 +120,7 @@ function LaunchChip({ launch, }) {
         : launch === 'local'
             ? DeviceDesktopIcon
             : BroadcastIcon;
-    return (_jsxs(Box, { sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            gap: 1,
-            fontSize: 0,
-            color: 'fg.muted',
-        }, children: [_jsx(Icon, { size: 12 }), _jsx(Text, { sx: { fontSize: 0 }, children: launch })] }));
+    return (_jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, fontSize: 0, color: "fg.muted", children: [_jsx(Icon, { size: 12 }), _jsx(Text, { sx: { fontSize: 0 }, children: launch })] }));
 }
 function SectionHeading({ children }) {
     return (_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: children }));
@@ -142,30 +136,9 @@ export function A2ASidebar(_props) {
     const [shown, setShown] = useState(null);
     const activeOverA2A = activeKey !== null &&
         (activity[activeKey] ?? []).some(event => event.transport === 'a2a');
-    return (_jsxs(Box, { "data-a2a-sidebar": true, sx: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(BroadcastIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, m: 0, flex: 1 }, children: "A2A agents" }), _jsx(Label, { variant: "accent", children: agents.length })] }), _jsxs(Box, { children: [_jsx(SectionHeading, { children: "Running now" }), activeKey && activeOverA2A ? (_jsx(SubagentChatPanel, { toolCallId: activeKey, height: A2A_ACTIVE_PANEL_HEIGHT })) : (_jsx(Box, { "data-a2a-sidebar-idle": true, sx: {
-                            height: A2A_ACTIVE_PANEL_HEIGHT,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            border: '1px solid',
-                            borderColor: 'border.muted',
-                            borderRadius: 2,
-                            bg: 'canvas.default',
-                        }, children: _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "No A2A agent running" }) }))] }), _jsxs(Box, { children: [_jsx(SectionHeading, { children: "Remote agents" }), agents.length === 0 ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "This agent declares no A2A agents." })) : (_jsx(Timeline, { children: agents.map(agent => {
+    return (_jsxs(Box, { "data-a2a-sidebar": true, display: "flex", flexDirection: "column", gap: 4, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(BroadcastIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, m: 0, flex: 1 }, children: "A2A agents" }), _jsx(Label, { variant: "accent", children: agents.length })] }), _jsxs(Box, { children: [_jsx(SectionHeading, { children: "Running now" }), activeKey && activeOverA2A ? (_jsx(SubagentChatPanel, { toolCallId: activeKey, height: A2A_ACTIVE_PANEL_HEIGHT })) : (_jsx(Box, { "data-a2a-sidebar-idle": true, height: A2A_ACTIVE_PANEL_HEIGHT, display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid", borderColor: "border.muted", borderRadius: 2, bg: "canvas.default", children: _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "No A2A agent running" }) }))] }), _jsxs(Box, { children: [_jsx(SectionHeading, { children: "Remote agents" }), agents.length === 0 ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "This agent declares no A2A agents." })) : (_jsx(Timeline, { children: agents.map(agent => {
                             const status = STATUS_LABEL[agent.status];
-                            return (_jsxs(Timeline.Item, { "data-a2a-agent": agent.name, children: [_jsx(Timeline.Badge, { children: _jsx(StatusBadge, { status: agent.status }) }), _jsxs(Timeline.Body, { children: [_jsxs(Box, { sx: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    gap: 2,
-                                                    mb: 1,
-                                                    flexWrap: 'wrap',
-                                                }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: agent.name }), _jsx(Label, { variant: status.variant, size: "small", children: status.text }), _jsx(LaunchChip, { launch: agent.launch })] }), agent.description ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 1 }, children: agent.description })) : null, _jsxs(Box, { sx: {
-                                                    display: 'flex',
-                                                    flexDirection: 'column',
-                                                    gap: '2px',
-                                                    fontSize: 0,
-                                                    color: 'fg.muted',
-                                                }, children: [agent.card?.name ? (_jsxs(Text, { sx: { fontSize: 0 }, children: ["Card: ", agent.card.name, agent.card.version ? ` v${agent.card.version}` : ''] })) : agent.ref ? (_jsx(Text, { sx: { fontSize: 0, fontFamily: 'mono' }, children: agent.ref })) : null, agent.url ? (_jsx(Link, { as: "button", type: "button", "data-a2a-card-button": agent.name, onClick: () => setShown(agent), sx: {
+                            return (_jsxs(Timeline.Item, { "data-a2a-agent": agent.name, children: [_jsx(Timeline.Badge, { children: _jsx(StatusBadge, { status: agent.status }) }), _jsxs(Timeline.Body, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 1, flexWrap: "wrap", children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: agent.name }), _jsx(Label, { variant: status.variant, size: "small", children: status.text }), _jsx(LaunchChip, { launch: agent.launch })] }), agent.description ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 1 }, children: agent.description })) : null, _jsxs(Box, { display: "flex", flexDirection: "column", gap: "2px", fontSize: 0, color: "fg.muted", children: [agent.card?.name ? (_jsxs(Text, { sx: { fontSize: 0 }, children: ["Card: ", agent.card.name, agent.card.version ? ` v${agent.card.version}` : ''] })) : agent.ref ? (_jsx(Text, { sx: { fontSize: 0, fontFamily: 'mono' }, children: agent.ref })) : null, agent.url ? (_jsx(Link, { as: "button", type: "button", "data-a2a-card-button": agent.name, onClick: () => setShown(agent), sx: {
                                                             fontSize: 0,
                                                             fontFamily: 'mono',
                                                             overflow: 'hidden',

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

@@ -5,7 +5,8 @@ import { Box } from '@datalayer/primer-addons';
 import { signal } from '@datalayer/reactor';
 import { useContributions, useSignalValue } from '@datalayer/reactor/react';
 import { useIAMStore } from '@datalayer/core/lib/state/substates/IAMState';
-import { LoopChatTurn, } from '../../core';
+import { useChatWords } from '../../../chat/ChatLanguage';
+import { LoopChatTurn, agentServerOf, noRuntimeSaid, IDLE_SANDBOX_SNAPSHOT, } from '../../core';
 import { COMPUTER_PARTS, COMPUTER_WORDS, computerParts, downloadComputerFile, handBackComputer, hasComputer, listComputerFiles, parentOf, partsOff, readComputer, runOnComputer, takeOverComputer, terminalEntries, } from '../../apps/computer';
 const NO_TURN = signal({ id: 0, status: 'idle' });
 const NO_CONVERSATION = signal([]);
@@ -20,19 +21,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 +63,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 +94,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 })] }));
 }
@@ -125,9 +110,23 @@ export function AppComputer({ app, workspace, }) {
             setEnded(turn.id);
         }
     }, [settled, turn.id]);
-    const serverUrl = workspace?.sandbox.agentBaseUrl || workspace?.serverUrl || '';
+    const chatText = useChatWords();
+    /*
+     * The runtime its agent is on, or nothing while none is assigned: then the
+     * computer is asked nothing and says why, rather than asking the host's
+     * server (on a hosted page, the page's own origin). Outside a workspace
+     * there is none either.
+     */
+    const serverUrl = workspace
+        ? agentServerOf(workspace.sandbox, workspace.serverUrl)
+        : undefined;
+    const noRuntime = serverUrl === undefined
+        ? noRuntimeSaid(workspace?.sandbox ?? IDLE_SANDBOX_SNAPSHOT, chatText)
+        : undefined;
     const agentId = workspace?.agentId || app.id;
-    const context = useMemo(() => ({ serverUrl, agentId, token: token || undefined }), [serverUrl, agentId, token]);
+    const context = useMemo(() => serverUrl === undefined
+        ? undefined
+        : { serverUrl, agentId, token: token || undefined }, [serverUrl, agentId, token]);
     const parts = computerParts(app);
     const [state, setState] = useState();
     const [error, setError] = useState('');
@@ -141,6 +140,9 @@ export function AppComputer({ app, workspace, }) {
         };
     }, []);
     const read = useCallback(() => {
+        if (!context) {
+            return;
+        }
         readComputer(context).then(found => {
             if (alive.current) {
                 setState(found);
@@ -151,11 +153,14 @@ export function AppComputer({ app, workspace, }) {
     }, [context]);
     const used = hasComputer(parts);
     useEffect(() => {
-        if (used && serverUrl) {
+        if (used && context) {
             read();
         }
-    }, [used, serverUrl, read, ended]);
+    }, [used, context, read, ended]);
     const act = (step) => {
+        if (!context) {
+            return;
+        }
         setBusy(true);
         step(context).then(() => {
             if (alive.current) {
@@ -170,10 +175,10 @@ 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 }), noRuntime ? (_jsx(Text, { as: "p", role: "status", sx: { fontSize: 1, color: 'fg.default', m: 0, mt: 2 }, children: noRuntime })) : null, error ? (_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'danger.fg', m: 0, mt: 2 }, children: error })) : null, state && context ? (_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
-                                        : COMPUTER_WORDS.someoneHas }), !state.held ? (_jsx(Button, { size: "small", disabled: busy, onClick: () => act(takeOverComputer), children: COMPUTER_WORDS.takeOver })) : me ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", variant: "primary", disabled: busy, onClick: () => act(handBackComputer), children: COMPUTER_WORDS.handBack }), _jsx(YourTerminal, { context: context })] })) : null] })) : null, _jsx(Terminal, { conversation: conversation }), state ? (_jsx(Files, { context: context, state: state, ended: ended })) : null] }))] }));
+                                        : COMPUTER_WORDS.someoneHas }), !state.held ? (_jsx(Button, { size: "small", disabled: busy, onClick: () => act(takeOverComputer), children: COMPUTER_WORDS.takeOver })) : me ? (_jsxs(_Fragment, { children: [_jsx(Button, { size: "small", variant: "primary", disabled: busy, onClick: () => act(handBackComputer), children: COMPUTER_WORDS.handBack }), _jsx(YourTerminal, { context: context })] })) : null] })) : null, _jsx(Terminal, { conversation: conversation }), state && context ? (_jsx(Files, { context: context, state: state, ended: ended })) : null] }))] }));
 }
 export default AppComputer;

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

@@ -5,7 +5,8 @@ import { Box } from '@datalayer/primer-addons';
 import { signal } from '@datalayer/reactor';
 import { useContributions, useSignalValue } from '@datalayer/reactor/react';
 import { catalogOfBlocks } from '../../../components/a2ui';
-import { LoopCanvasBlock, LoopChatTurn, } from '../../core';
+import { useChatWords } from '../../../chat/ChatLanguage';
+import { LoopCanvasBlock, LoopChatTurn, agentServerOf, noRuntimeSaid, } from '../../core';
 import { InlineSurface, SURFACE_CATALOG_ID, } from '../a2ui-surface/InlineSurface';
 import { useOwnComponents } from '../a2ui-surface/ownComponents';
 import { appPageAction, appPageData, appPageMessages, pageInputsOf, pageOf, } from './appPageModel';
@@ -73,12 +74,25 @@ export function AppPage({ app, workspace }) {
         ...outputsData(outputs),
     }), [app, turn, conversation, outputs]);
     const token = useIAMStore(state => state.token) ?? '';
-    const pageContext = useRef({ serverUrl: '', agentId: '' });
-    pageContext.current = {
-        serverUrl: workspace.sandbox?.agentBaseUrl || workspace.serverUrl || '',
-        agentId: workspace.agentId || app.id,
-        token: token || undefined,
-    };
+    const chatText = useChatWords();
+    /*
+     * Where its page runs: the runtime its agent is on, or nothing while none
+     * is assigned — then a run is not sent and the page says why, rather than
+     * reaching for the host's server (on a hosted page, the page's own origin).
+     */
+    const pageServer = agentServerOf(workspace.sandbox, workspace.serverUrl);
+    const pageContext = useRef(null);
+    pageContext.current =
+        pageServer === undefined
+            ? null
+            : {
+                serverUrl: pageServer,
+                agentId: workspace.agentId || app.id,
+                token: token || undefined,
+            };
+    const noRuntime = useRef('');
+    noRuntime.current =
+        pageServer === undefined ? noRuntimeSaid(workspace.sandbox, chatText) : '';
     const pageSession = useRef(null);
     const pageRunning = useRef(false);
     const pageNext = useRef(null);
@@ -96,6 +110,10 @@ export function AppPage({ app, workspace }) {
                 const next = pageNext.current;
                 pageNext.current = null;
                 const context = pageContext.current;
+                if (!context) {
+                    setRefusal(noRuntime.current);
+                    continue;
+                }
                 try {
                     pageSession.current ??= openPageSession(context);
                     const turn = await runPageIn(context, await pageSession.current, next);
@@ -201,7 +219,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)) }));
 }