@datalayer/agent-runtimes 1.3.89 → 1.3.90

package/lib/loop/plugins/window-frame/WindowFrame.js

@@ -13,50 +13,16 @@ export function WindowFrame({ children, title, height, slotProps = {}, }) {
      * actions and fills them in when the workspace registers one.
      */
     const actions = useOptionalSlotComponents(WINDOW_ACTIONS_SLOT);
-    return (_jsxs(Box, { sx: {
-            position: 'relative',
-            // Filling is the default: with no height given the frame takes the
-            // space it was handed and the body gets the remainder.
-            ...(height === undefined
-                ? { height: '100%', display: 'flex', flexDirection: 'column' }
-                : null),
-            borderRadius: '14px',
-            overflow: 'hidden',
-            border: '1px solid',
-            borderColor: 'border.default',
-            bg: 'canvas.default',
-            // Lifted off the field, so the workspace reads as a thing sitting on
-            // the page rather than a hole cut into it.
-            boxShadow: '0 24px 60px -28px rgba(0, 0, 0, 0.55)',
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    px: 3,
-                    py: 2,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                    bg: 'canvas.subtle',
-                    // The bar may be the page's first line of type as well as its
-                    // chrome, so it takes a second row on a narrow screen rather than
-                    // shedding its actions off the edge.
-                    flexWrap: 'wrap',
-                    rowGap: 2,
-                    // Never squeezed by the body beside it.
-                    flex: '0 0 auto',
-                }, children: [_jsx(Box, { sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: '6px',
-                            mr: 1,
-                            flexShrink: 0,
-                        }, children: _jsx(ReactorSlot, { slot: WINDOW_CONTROLS_SLOT, props: slotProps }) }), _jsx(Box, { sx: { minWidth: 0, flex: '1 1 auto' }, children: title }), actions.length > 0 ? (_jsx(Box, { sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 2,
-                            flexShrink: 0,
-                            ml: 'auto',
-                        }, children: _jsx(ReactorSlot, { slot: WINDOW_ACTIONS_SLOT, props: slotProps }) })) : null] }), _jsx(Box, { sx: height === undefined
+    return (_jsxs(Box, { position: "relative", borderRadius: "14px", overflow: "hidden", border: "1px solid", borderColor: "border.default", bg: "canvas.default", 
+        // Lifted off the field, so the workspace reads as a thing sitting on
+        // the page rather than a hole cut into it.
+        boxShadow: "0 24px 60px -28px rgba(0, 0, 0, 0.55)", height: height === undefined ? '100%' : undefined, display: height === undefined ? 'flex' : undefined, flexDirection: height === undefined ? 'column' : undefined, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", bg: "canvas.subtle", 
+                // The bar may be the page's first line of type as well as its
+                // chrome, so it takes a second row on a narrow screen rather than
+                // shedding its actions off the edge.
+                flexWrap: "wrap", rowGap: 2, 
+                // Never squeezed by the body beside it.
+                flex: "0 0 auto", children: [_jsx(Box, { display: "flex", alignItems: "center", gap: "6px", mr: 1, flexShrink: 0, children: _jsx(ReactorSlot, { slot: WINDOW_CONTROLS_SLOT, props: slotProps }) }), _jsx(Box, { minWidth: 0, flex: "1 1 auto", children: title }), actions.length > 0 ? (_jsx(Box, { display: "flex", alignItems: "center", gap: 2, flexShrink: 0, ml: "auto", children: _jsx(ReactorSlot, { slot: WINDOW_ACTIONS_SLOT, props: slotProps }) })) : null] }), _jsx(Box, { sx: height === undefined
                     ? { flex: '1 1 auto', minHeight: 0 }
                     : { height, minHeight: 0 }, children: children })] }));
 }

package/lib/loop/plugins/window-frame/index.js

@@ -48,7 +48,7 @@ export const WINDOW_FRAME_PLUGIN_NAME = '@datalayer/loop-plugin-window-frame';
  * controls can switch this plugin off and fill the slot itself.
  */
 function WindowControls() {
-    return (_jsx(_Fragment, { children: ['danger.emphasis', 'attention.emphasis', 'success.emphasis'].map(token => (_jsx(Box, { sx: { width: 10, height: 10, borderRadius: '50%', bg: token } }, token))) }));
+    return (_jsx(_Fragment, { children: ['danger.emphasis', 'attention.emphasis', 'success.emphasis'].map(token => (_jsx(Box, { width: 10, height: 10, borderRadius: "50%", bg: token }, token))) }));
 }
 export const WindowFramePlugin = definePlugin({
     name: WINDOW_FRAME_PLUGIN_NAME,

package/lib/loop/shell/LoopWorkspace.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { buildReactorFromPlugins, onView, } from '@datalayer/reactor';
 import { ReactorSlot, ReactorViewHost, useContributions, useReactorEvent, useSlotComponents, useReactor, } from '@datalayer/reactor/react';
 import { LoopCommand, LoopSlots, LoopViewType, canOpenView, createPromptChannel, parseCommand, loopSurfaceId, } from '../core';
@@ -168,82 +168,39 @@ function WorkspaceBody({ serverUrl, agentId: initialAgentId, conversationId, mod
       through the context: the plugin needs a DOM node and nothing else, and
       the shell should not have to publish one to be found.
     */
-    , { "data-loop-workspace": "", sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%',
-            minHeight: 0,
-            // The containing block for anything in the root slot that positions
-            // itself absolutely — the floating prompt does. Without this it would
-            // resolve against whatever ancestor happens to be positioned, and
-            // float over the host's page instead of over the workspace.
-            position: 'relative',
-            bg: 'canvas.default',
-            color: 'fg.default',
-        }, children: [showHeader && headerContainer
-                ? createPortal(_jsx(Box, { sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        flexWrap: 'wrap',
-                        gap: 2,
-                    }, children: headerControls }), headerContainer)
-                : null, showHeader && headerContainer === undefined ? (_jsx(Box, { as: "header", sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    // In a column there is no room for a row: the header wraps rather
-                    // than pushing the model chip off the edge.
-                    justifyContent: compact ? 'flex-start' : 'space-between',
-                    /*
-                      Allowed to wrap at any width.
-                      
-                      `nowrap` meant the row absorbed whatever a plugin put in it by
-                      squeezing everything else — a sandbox failure message, a long
-                      agent name — instead of taking a second line. The controls stayed
-                      on one row and got narrower, which is the wrong trade: a header
-                      two lines tall is legible, a compressed one is not.
-                    */
-                    flexWrap: 'wrap',
-                    gap: 2,
-                    px: compact ? 2 : 3,
-                    py: 2,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                    flex: '0 0 auto',
-                }, children: headerControls })) : null, _jsxs(Box, { sx: { flex: '1 1 auto', minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: {
-                            flex: '1 1 auto',
-                            minWidth: 0,
-                            minHeight: 0,
-                            position: 'relative',
-                        }, children: _jsx(ReactorViewHost, { point: LoopViewType, active: effectiveViewType, props: { viewType: effectiveViewType, workspace }, fallback: _jsx(Centered, { children: "Loading\u2026" }), empty: _jsx(Centered, { children: "No view is available yet." }), errorFallback: error => (_jsxs(Centered, { children: ["This view failed to load: ", error.message] })) }) }), sidebar.length > 0 && sidebarRail && !compact ? (_jsx(SidebarRail, { components: sidebar, props: { workspace }, width: SIDEBAR_WIDTH })) : sidebar.length > 0 ? (_jsx(Box, { as: "aside", sx: {
-                            flex: '0 0 auto',
-                            // Wide enough for a plugin's name, its description and a switch
-                            // on one line. The panel truncates to the same number, and takes
-                            // it from `SIDEBAR_WIDTH` so the two cannot drift.
-                            width: compact ? '100%' : `${SIDEBAR_WIDTH}px`,
-                            minWidth: 0,
-                            // On the trailing edge: the work is what a person reads first,
-                            // and the switches belong beside it rather than in front of it.
-                            borderLeft: compact ? 'none' : '1px solid',
-                            borderTop: compact ? '1px solid' : 'none',
-                            borderColor: 'border.default',
-                            bg: 'canvas.subtle',
-                            overflowY: 'auto',
-                            // The shell's chrome, not the plugins': a contributed panel
-                            // should not have to guess how far its host keeps things from
-                            // the edge, and two of them would guess differently.
-                            px: 3,
-                            py: 3,
-                        }, children: _jsx(ReactorSlot, { slot: LoopSlots.sidebar, props: { workspace } }) })) : null] }), _jsxs(Box, { sx: { flex: '0 0 auto' }, children: [_jsx(ReactorSlot, { slot: LoopSlots.footer, props: { workspace } }), _jsx(ReactorSlot, { slot: LoopSlots.status, props: { workspace } })] }), _jsx(ReactorSlot, { slot: LoopSlots.root, props: { workspace } })] }));
+    , { "data-loop-workspace": "", display: "flex", flexDirection: "column", height: "100%", minHeight: 0, 
+        // The containing block for anything in the root slot that positions
+        // itself absolutely — the floating prompt does. Without this it would
+        // resolve against whatever ancestor happens to be positioned, and
+        // float over the host's page instead of over the workspace.
+        position: "relative", bg: "canvas.default", color: "fg.default", children: [showHeader && headerContainer
+                ? createPortal(_jsx(Box, { display: "flex", alignItems: "center", flexWrap: "wrap", gap: 2, children: headerControls }), headerContainer)
+                : null, showHeader && headerContainer === undefined ? (_jsx(Box, { as: "header", display: "flex", alignItems: "center", 
+                // In a column there is no room for a row: the header wraps rather
+                // than pushing the model chip off the edge.
+                justifyContent: compact ? 'flex-start' : 'space-between', 
+                /*
+                    Allowed to wrap at any width.
+                    
+                    `nowrap` meant the row absorbed whatever a plugin put in it by
+                    squeezing everything else — a sandbox failure message, a long
+                    agent name — instead of taking a second line. The controls stayed
+                    on one row and got narrower, which is the wrong trade: a header
+                    two lines tall is legible, a compressed one is not.
+                  */
+                flexWrap: "wrap", gap: 2, px: compact ? 2 : 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", flex: "0 0 auto", children: headerControls })) : null, _jsxs(Box, { flex: "1 1 auto", minHeight: 0, display: "flex", children: [_jsx(Box, { flex: "1 1 auto", minWidth: 0, minHeight: 0, position: "relative", children: _jsx(ReactorViewHost, { point: LoopViewType, active: effectiveViewType, props: { viewType: effectiveViewType, workspace }, fallback: _jsx(Centered, { children: "Loading\u2026" }), empty: _jsx(Centered, { children: "No view is available yet." }), errorFallback: error => (_jsxs(Centered, { children: ["This view failed to load: ", error.message] })) }) }), sidebar.length > 0 && sidebarRail && !compact ? (_jsx(SidebarRail, { components: sidebar, props: { workspace }, width: SIDEBAR_WIDTH })) : sidebar.length > 0 ? (_jsx(Box, { as: "aside", flex: "0 0 auto", 
+                        // Wide enough for a plugin's name, its description and a switch
+                        // on one line. The panel truncates to the same number, and takes
+                        // it from `SIDEBAR_WIDTH` so the two cannot drift.
+                        width: compact ? '100%' : `${SIDEBAR_WIDTH}px`, minWidth: 0, 
+                        // On the trailing edge: the work is what a person reads first,
+                        // and the switches belong beside it rather than in front of it.
+                        borderLeft: compact ? 'none' : '1px solid', borderTop: compact ? '1px solid' : 'none', borderColor: "border.default", bg: "canvas.subtle", overflowY: "auto", 
+                        // The shell's chrome, not the plugins': a contributed panel
+                        // should not have to guess how far its host keeps things from
+                        // the edge, and two of them would guess differently.
+                        px: 3, py: 3, children: _jsx(ReactorSlot, { slot: LoopSlots.sidebar, props: { workspace } }) })) : null] }), _jsxs(Box, { flex: "0 0 auto", children: [_jsx(ReactorSlot, { slot: LoopSlots.footer, props: { workspace } }), _jsx(ReactorSlot, { slot: LoopSlots.status, props: { workspace } })] }), _jsx(ReactorSlot, { slot: LoopSlots.root, props: { workspace } })] }));
 }
 function Centered({ children }) {
-    return (_jsx(Box, { sx: {
-            height: '100%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            color: 'fg.muted',
-            fontSize: 1,
-            px: 3,
-            textAlign: 'center',
-        }, children: children }));
+    return (_jsx(Box, { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "fg.muted", fontSize: 1, px: 3, textAlign: "center", children: children }));
 }

package/lib/loop/shell/PluginToggles.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useSyncExternalStore } from 'react';
-import { Box, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text } from '@primer/react';
 import { useReactorPlatform } from '@datalayer/reactor/react';
 /** Trim the package scope so the list reads as names rather than paths. */
 function shortName(name) {
@@ -21,21 +22,9 @@ export function PluginToggles({ locked = [], title = 'Plugins', }) {
             reactor.disable(name);
         }
     }, [reactor]);
-    return (_jsxs(Box, { sx: {
-            p: 3,
-            borderBottom: '1px solid',
-            borderColor: 'border.default',
-            bg: 'canvas.subtle',
-        }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: title }), _jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 3, mt: 2 }, children: reactor.listPlugins().map(name => {
+    return (_jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", bg: "canvas.subtle", children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: title }), _jsx(Box, { display: "flex", flexWrap: "wrap", gap: 3, mt: 2, children: reactor.listPlugins().map(name => {
                     const isLocked = locked.includes(name);
-                    return (_jsxs(Box, { as: "label", sx: {
-                            display: 'inline-flex',
-                            alignItems: 'center',
-                            gap: 1,
-                            fontSize: 1,
-                            cursor: isLocked ? 'not-allowed' : 'pointer',
-                            opacity: isLocked ? 0.6 : 1,
-                        }, children: [_jsx("input", { type: "checkbox", checked: reactor.isEnabled(name), disabled: isLocked, onChange: event => toggle(name, event.target.checked) }), shortName(name)] }, name));
+                    return (_jsxs(Box, { as: "label", display: "inline-flex", alignItems: "center", gap: 1, fontSize: 1, cursor: isLocked ? 'not-allowed' : 'pointer', opacity: isLocked ? 0.6 : 1, children: [_jsx("input", { type: "checkbox", checked: reactor.isEnabled(name), disabled: isLocked, onChange: event => toggle(name, event.target.checked) }), shortName(name)] }, name));
                 }) })] }));
 }
 export default PluginToggles;

package/lib/loop/shell/SidebarRail.js

@@ -23,51 +23,19 @@ export function SidebarRail({ components, props, width, }) {
     const [chosen, setChosen] = useState(items[0]?.id ?? null);
     // A panel that left the slot is no longer chosen.
     const open = items.some(item => item.id === chosen) ? chosen : null;
-    return (_jsxs(Box, { as: "aside", "data-loop-rail-sidebar": "", sx: { flex: '0 0 auto', display: 'flex', minHeight: 0 }, children: [_jsx(Box, { "data-loop-rail-panel": open ?? undefined, sx: {
-                    display: open ? 'block' : 'none',
-                    width: `${width}px`,
-                    minWidth: 0,
-                    borderLeft: 'var(--theme-hairline, 1px) solid',
-                    borderColor: 'border.default',
-                    overflowY: 'auto',
-                    px: 3,
-                    py: 3,
-                }, children: components.map(component => {
+    return (_jsxs(Box, { as: "aside", "data-loop-rail-sidebar": "", flex: "0 0 auto", display: "flex", minHeight: 0, children: [_jsx(Box, { "data-loop-rail-panel": open ?? undefined, display: open ? 'block' : 'none', width: `${width}px`, minWidth: 0, borderLeft: "var(--theme-hairline, 1px) solid", borderColor: "border.default", overflowY: "auto", px: 3, py: 3, children: components.map(component => {
                     const { Component } = component;
                     const shown = component.id === open;
                     return (_jsx(Box, { id: `loop-rail-panel-${component.id}`, role: "region", "aria-label": railItemsOf([component])[0].label, hidden: !shown, sx: shown ? paneOpening('right') : undefined, children: _jsx(Component, { ...props }) }, component.id));
-                }) }), _jsx(Box, { as: "nav", "aria-label": "Panels", sx: {
-                    width: `${RAIL_WIDTH}px`,
-                    flex: `0 0 ${RAIL_WIDTH}px`,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'center',
-                    gap: 1,
-                    py: 2,
-                    borderLeft: 'var(--theme-hairline, 1px) solid',
-                    borderColor: 'border.default',
-                }, children: items.map(item => {
+                }) }), _jsx(Box, { as: "nav", "aria-label": "Panels", width: `${RAIL_WIDTH}px`, flex: `0 0 ${RAIL_WIDTH}px`, display: "flex", flexDirection: "column", alignItems: "center", gap: 1, py: 2, borderLeft: "var(--theme-hairline, 1px) solid", borderColor: "border.default", children: items.map(item => {
                     const Icon = item.icon;
                     const active = item.id === open;
-                    return (_jsx(Box, { as: "button", type: "button", "data-loop-rail-item": item.id, "aria-label": item.label, title: item.label, "aria-pressed": active, "aria-controls": `loop-rail-panel-${item.id}`, onClick: () => setChosen(railChoiceAfter(open, item.id)), sx: {
-                            width: 32,
-                            height: 32,
-                            display: 'inline-flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            p: 0,
-                            border: 'none',
-                            borderRadius: 2,
-                            cursor: 'pointer',
-                            // One weight, no colour: the ink, quieter when not chosen.
-                            color: active ? 'fg.default' : 'fg.muted',
-                            bg: active ? 'neutral.muted' : 'transparent',
-                            '&:hover': { color: 'fg.default', bg: 'neutral.subtle' },
-                            '&:focus-visible': {
-                                outline: '2px solid',
-                                outlineColor: 'var(--focus-outlineColor, #0969da)',
-                                outlineOffset: '1px',
-                            },
+                    return (_jsx(Box, { as: "button", type: "button", "data-loop-rail-item": item.id, "aria-label": item.label, title: item.label, "aria-pressed": active, "aria-controls": `loop-rail-panel-${item.id}`, onClick: () => setChosen(railChoiceAfter(open, item.id)), width: 32, height: 32, display: "inline-flex", alignItems: "center", justifyContent: "center", p: 0, border: "none", borderRadius: 2, cursor: "pointer", 
+                        // One weight, no colour: the ink, quieter when not chosen.
+                        color: active ? 'fg.default' : 'fg.muted', bg: active ? 'neutral.muted' : 'transparent', hover: { color: 'fg.default', bg: 'neutral.subtle' }, focusVisible: {
+                            outline: '2px solid',
+                            outlineColor: 'var(--focus-outlineColor, #0969da)',
+                            outlineOffset: '1px',
                         }, children: _jsx(Icon, { size: 16 }) }, item.id));
                 }) })] }));
 }

package/lib/loop/shell/ViewSwitcher.js

@@ -1,19 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Tooltip } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Tooltip } from '@primer/react';
 import { canOpenView, } from '../core';
 export function ViewSwitcher({ views, workspace, compact = false, }) {
     // One choice is not a choice.
     if (views.length < 2) {
         return null;
     }
-    return (_jsx(Box, { role: "tablist", "aria-label": "Workspace views", sx: {
-            display: 'inline-flex',
-            alignItems: 'center',
-            bg: 'neutral.muted',
-            borderRadius: '6px',
-            p: '2px',
-            gap: '1px',
-        }, children: views.map(entry => {
+    return (_jsx(Box, { role: "tablist", "aria-label": "Workspace views", display: "inline-flex", alignItems: "center", bg: "neutral.muted", borderRadius: "6px", p: "2px", gap: "1px", children: views.map(entry => {
             const view = entry.value;
             const open = canOpenView(view, workspace);
             const active = workspace.activeViewType === view.viewType;
@@ -24,20 +18,6 @@ export function ViewSwitcher({ views, workspace, compact = false, }) {
             const label = open
                 ? view.title
                 : `${view.title} — ${view.unavailableReason?.(workspace) ?? 'unavailable'}`;
-            return (_jsx(Tooltip, { text: label, direction: "n", children: _jsxs(Box, { as: "button", role: "tab", "aria-selected": active, "aria-disabled": !open, onClick: () => open && workspace.setActiveViewType(view.viewType), sx: {
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                        gap: 1,
-                        border: 'none',
-                        borderRadius: '5px',
-                        px: 2,
-                        py: '4px',
-                        fontSize: 0,
-                        cursor: open ? 'pointer' : 'not-allowed',
-                        opacity: open ? 1 : 0.5,
-                        bg: active ? 'canvas.default' : 'transparent',
-                        color: active ? 'fg.default' : 'fg.muted',
-                        boxShadow: active ? 'shadow.small' : 'none',
-                    }, children: [Icon ? _jsx(Icon, { size: 14 }) : null, compact && Icon ? null : view.title] }) }, view.viewType));
+            return (_jsx(Tooltip, { text: label, direction: "n", children: _jsxs(Box, { as: "button", role: "tab", "aria-selected": active, "aria-disabled": !open, onClick: () => open && workspace.setActiveViewType(view.viewType), display: "inline-flex", alignItems: "center", gap: 1, border: "none", borderRadius: "5px", px: 2, py: "4px", fontSize: 0, cursor: open ? 'pointer' : 'not-allowed', opacity: open ? 1 : 0.5, bg: active ? 'canvas.default' : 'transparent', color: active ? 'fg.default' : 'fg.muted', boxShadow: active ? 'shadow.small' : 'none', children: [Icon ? _jsx(Icon, { size: 14 }) : null, compact && Icon ? null : view.title] }) }, view.viewType));
         }) }));
 }

package/lib/loop-main.js

@@ -31,8 +31,7 @@ if (globals['__webpack_public_path__'] === undefined) {
 import { StrictMode, useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { QueryClientProvider } from '@tanstack/react-query';
-import { Box } from '@primer/react';
-import { DatalayerThemeProvider, setupPrimerPortals, themeConfigs, useSystemColorMode, useThemeStore, } from '@datalayer/primer-addons';
+import { Box, DatalayerThemeProvider, setupPrimerPortals, themeConfigs, useSystemColorMode, useThemeStore, } from '@datalayer/primer-addons';
 import { configurePlugin } from '@datalayer/reactor';
 import { LoopWorkspace } from './loop/shell/LoopWorkspace';
 import { ChatPlugin } from './loop/plugins/chat';
@@ -113,7 +112,7 @@ function LoopPage() {
         const serverUrl = window.location.origin;
         void resolveSession(serverUrl).then(setSession);
     }, []);
-    return (_jsx(DatalayerThemeProvider, { colorMode: resolvedMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsx(QueryClientProvider, { client: internalQueryClient, children: _jsx(Box, { sx: { height: '100vh', overflow: 'hidden' }, children: session ? (_jsx(LoopWorkspace, { serverUrl: session.serverUrl, agentId: session.agentId, conversationId: session.conversationId, model: session.model, sandbox: session.sandbox, initialViewType: session.view, 
+    return (_jsx(DatalayerThemeProvider, { colorMode: resolvedMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsx(QueryClientProvider, { client: internalQueryClient, children: _jsx(Box, { height: "100vh", overflow: "hidden", children: session ? (_jsx(LoopWorkspace, { serverUrl: session.serverUrl, agentId: session.agentId, conversationId: session.conversationId, model: session.model, sandbox: session.sandbox, initialViewType: session.view, 
                     // The notebook and document plugins depend on the sandbox, so
                     // the reactor pulls it in; it is named here only to be told which
                     // server it talks to.

package/lib/mcp/McpServerManager.js

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

package/lib/portable/index.d.ts

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

package/lib/portable/index.js

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

package/lib/protocols/AGUIAdapter.js

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

package/lib/protocols/BaseProtocolAdapter.d.ts

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

package/lib/protocols/BaseProtocolAdapter.js

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

package/lib/specs/apps.js

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

package/lib/specs/appspecSchema.js

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