@datalayer/agent-runtimes 1.3.89 → 1.3.91

package/lib/loop/plugins/page-layout/SplitLayout.js

@@ -68,39 +68,16 @@ export function SplitLayout({ editors, hasEditor, transcript, prompt, chips, pic
         }
     };
     const percent = Math.round(share * 100);
-    return (_jsxs(Box, { "data-testid": "loop-split-layout", sx: {
-            flex: '1 1 auto',
-            minHeight: 0,
-            display: 'flex',
-            flexDirection: 'column',
-        }, children: [picker, _jsxs(Box, { ref: row, sx: {
-                    flex: '1 1 auto',
-                    minHeight: 0,
-                    display: 'flex',
-                    // The hidden editors position themselves against this row.
-                    position: 'relative',
-                    overflow: 'hidden',
-                }, children: [_jsxs(Box, { "data-testid": "loop-split-conversation", sx: {
-                            flex: hasEditor ? `0 0 ${percent}%` : '1 1 auto',
-                            minWidth: 0,
-                            minHeight: 0,
-                            display: 'flex',
-                            flexDirection: 'column',
-                            // The transcript draws a rule on its left when an editor is on
-                            // screen, for the split it sits on the right of. Here it is on
-                            // the left, and the hairline is the separator: the rule is
-                            // pushed out of the row, which clips it.
-                            ml: hasEditor ? '-1px' : 0,
-                        }, children: [transcript, chips, prompt] }), hasEditor ? (_jsx(Box, { role: "separator", "aria-orientation": "vertical", "aria-label": "Resize the conversation and the page", "aria-valuemin": Math.round(SPLIT_MIN_SHARE * 100), "aria-valuemax": Math.round(SPLIT_MAX_SHARE * 100), "aria-valuenow": percent, tabIndex: 0, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, sx: {
-                            // A hairline to the eye, a few pixels to the pointer.
-                            flex: '0 0 7px',
-                            mx: '-3px',
-                            zIndex: 1,
-                            cursor: 'col-resize',
-                            touchAction: 'none',
-                            display: 'flex',
-                            justifyContent: 'center',
-                            outline: 'none',
+    return (_jsxs(Box, { "data-testid": "loop-split-layout", flex: "1 1 auto", minHeight: 0, display: "flex", flexDirection: "column", children: [picker, _jsxs(Box, { ref: row, flex: "1 1 auto", minHeight: 0, display: "flex", 
+                // The hidden editors position themselves against this row.
+                position: "relative", overflow: "hidden", children: [_jsxs(Box, { "data-testid": "loop-split-conversation", flex: hasEditor ? `0 0 ${percent}%` : '1 1 auto', minWidth: 0, minHeight: 0, display: "flex", flexDirection: "column", 
+                        // The transcript draws a rule on its left when an editor is on
+                        // screen, for the split it sits on the right of. Here it is on
+                        // the left, and the hairline is the separator: the rule is
+                        // pushed out of the row, which clips it.
+                        ml: hasEditor ? '-1px' : 0, children: [transcript, chips, prompt] }), hasEditor ? (_jsx(Box, { role: "separator", "aria-orientation": "vertical", "aria-label": "Resize the conversation and the page", "aria-valuemin": Math.round(SPLIT_MIN_SHARE * 100), "aria-valuemax": Math.round(SPLIT_MAX_SHARE * 100), "aria-valuenow": percent, tabIndex: 0, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerUp: onPointerUp, onPointerCancel: onPointerUp, onKeyDown: onKeyDown, 
+                        // A hairline to the eye, a few pixels to the pointer.
+                        flex: "0 0 7px", mx: "-3px", zIndex: 1, cursor: "col-resize", display: "flex", justifyContent: "center", outline: "none", touchAction: "none", sx: {
                             '&::before': {
                                 content: '""',
                                 width: '1px',
@@ -110,7 +87,7 @@ export function SplitLayout({ editors, hasEditor, transcript, prompt, chips, pic
                             '&:hover::before, &:focus-visible::before': {
                                 width: '3px',
                                 bg: 'accent.emphasis',
-                            },
+                            }
                         } })) : null, _jsx(Box, { "data-testid": "loop-split-page", sx: hasEditor
                             ? {
                                 flex: '1 1 0',

package/lib/loop/plugins/page-layout/TurnPanel.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Box, IconButton, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { IconButton, Text } from '@primer/react';
 import { CheckIcon, CommentDiscussionIcon, CopyIcon, XIcon, } from '@primer/octicons-react';
 import { useContributions, useSignalValue } from '@datalayer/reactor/react';
 import { signal } from '@datalayer/reactor';
@@ -16,10 +17,7 @@ const NO_TURN = signal({ id: 0, status: 'idle' });
 const MAX_HEIGHT = 168;
 /** The three dots, while the agent has said nothing yet. */
 function Thinking() {
-    return (_jsxs(Box, { as: "span", "aria-label": "The agent is thinking", sx: {
-            display: 'inline-flex',
-            gap: '4px',
-            alignItems: 'center',
+    return (_jsxs(Box, { as: "span", "aria-label": "The agent is thinking", display: "inline-flex", gap: "4px", alignItems: "center", sx: {
             height: '1.5em',
             '& > i': {
                 width: 5,
@@ -75,17 +73,7 @@ export function TurnPanel({ footer = 'full', }) {
         return null;
     }
     const working = turn.status === 'thinking' || turn.status === 'streaming';
-    return (_jsxs(Box, { "data-turn-panel": "", sx: {
-            borderTop: '1px solid',
-            borderColor: 'border.muted',
-            px: 3,
-            pt: 2,
-            pb: footer === 'none' ? 2 : 1,
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 2,
-            bg: 'canvas.default',
-        }, children: [_jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end' }, children: _jsx(Text, { sx: {
+    return (_jsxs(Box, { "data-turn-panel": "", borderTop: "1px solid", borderColor: "border.muted", px: 3, pt: 2, pb: footer === 'none' ? 2 : 1, display: "flex", flexDirection: "column", gap: 2, bg: "canvas.default", children: [_jsx(Box, { display: "flex", justifyContent: "flex-end", children: _jsx(Text, { sx: {
                         fontSize: 0,
                         lineHeight: 1.45,
                         px: 2,
@@ -98,29 +86,15 @@ export function TurnPanel({ footer = 'full', }) {
                         display: '-webkit-box',
                         WebkitLineClamp: 2,
                         WebkitBoxOrient: 'vertical',
-                    }, children: turn.user }) }), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'flex-start' }, children: [_jsx(Box, { ref: replyRef, sx: {
-                            flex: '1 1 auto',
-                            minWidth: 0,
-                            maxHeight: MAX_HEIGHT,
-                            overflowY: 'auto',
-                            fontSize: 0,
-                            lineHeight: 1.5,
-                            color: turn.assistant ? 'fg.default' : 'fg.muted',
-                            // Rendered markdown brings its own flow; the plain fallbacks
-                            // below keep their line breaks.
-                            whiteSpace: turn.assistant ? 'normal' : 'pre-wrap',
-                            overflowWrap: 'anywhere',
-                        }, children: turn.assistant ? (_jsx(Box, { sx: { ...streamdownMarkdownStyles, fontSize: 0 }, children: _jsx(Streamdown, { children: normalizeAssistantMarkdown(turn.assistant) }) })) : turn.activity ? (_jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: turn.activity })) : working ? (_jsx(Thinking, {})) : turn.status === 'error' ? ('The agent could not answer.') : ('Done — the result is in the page.') }), _jsx(IconButton, { icon: CommentDiscussionIcon, size: "small", variant: "invisible", "aria-label": "Open the conversation", onClick: openPagePanel, sx: { color: 'fg.muted', flexShrink: 0 } })] }), turn.assistant && turn.activity ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontStyle: 'italic' }, children: turn.activity })) : null, footer === 'full' ? (
+                    }, children: turn.user }) }), _jsxs(Box, { display: "flex", gap: 2, alignItems: "flex-start", children: [_jsx(Box, { ref: replyRef, flex: "1 1 auto", minWidth: 0, maxHeight: MAX_HEIGHT, overflowY: "auto", fontSize: 0, lineHeight: 1.5, color: turn.assistant ? 'fg.default' : 'fg.muted', 
+                        // Rendered markdown brings its own flow; the plain fallbacks
+                        // below keep their line breaks.
+                        whiteSpace: turn.assistant ? 'normal' : 'pre-wrap', overflowWrap: "anywhere", children: turn.assistant ? (_jsx(Box, { sx: { ...streamdownMarkdownStyles, fontSize: 0 }, children: _jsx(Streamdown, { children: normalizeAssistantMarkdown(turn.assistant) }) })) : turn.activity ? (_jsx(Text, { sx: { color: 'fg.muted', fontStyle: 'italic' }, children: turn.activity })) : working ? (_jsx(Thinking, {})) : turn.status === 'error' ? ('The agent could not answer.') : ('Done — the result is in the page.') }), _jsx(IconButton, { icon: CommentDiscussionIcon, size: "small", variant: "invisible", "aria-label": "Open the conversation", onClick: openPagePanel, sx: { color: 'fg.muted', flexShrink: 0 } })] }), turn.assistant && turn.activity ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontStyle: 'italic' }, children: turn.activity })) : null, footer === 'full' ? (
             // The same footer the transcript draws under a turn: the window's
             // fill, this turn's tokens in and out, copy, and dismiss.
             _jsx(TurnFooter, { usage: turn.usage, live: working, latest: true, padding: 0, onCopy: copyTurn, onRemove: () => setDismissedId(turn.id) })) : footer === 'actions' ? (
             // The actions without the counters, for a host whose readers are not
             // asking about tokens.
-            _jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                    gap: 1,
-                    mt: -1,
-                }, children: [_jsx(IconButton, { icon: copied ? CheckIcon : CopyIcon, size: "small", variant: "invisible", "aria-label": copied ? 'Copied' : 'Copy this turn', onClick: () => void copyTurn(), sx: { color: 'fg.muted' } }), _jsx(IconButton, { icon: XIcon, size: "small", variant: "invisible", "aria-label": "Dismiss until the next turn", onClick: () => setDismissedId(turn.id), sx: { color: 'fg.muted' } })] })) : null] }));
+            _jsxs(Box, { display: "flex", justifyContent: "flex-end", gap: 1, mt: -1, children: [_jsx(IconButton, { icon: copied ? CheckIcon : CopyIcon, size: "small", variant: "invisible", "aria-label": copied ? 'Copied' : 'Copy this turn', onClick: () => void copyTurn(), sx: { color: 'fg.muted' } }), _jsx(IconButton, { icon: XIcon, size: "small", variant: "invisible", "aria-label": "Dismiss until the next turn", onClick: () => setDismissedId(turn.id), sx: { color: 'fg.muted' } })] })) : null] }));
 }
 export default TurnPanel;

package/lib/loop/plugins/shell/useEditorPreviews.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState, useSyncExternalStore } from 'react';
-import { Box, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text } from '@primer/react';
 import { getEditorChoice, subscribeEditorChoice } from './editorChoice';
 let jupyterReact = null;
 function loadJupyterReact() {
@@ -21,7 +22,7 @@ function stripped(source) {
 }
 /** The card's body: one row per cell or block. */
 function PreviewList({ title, rows, }) {
-    return (_jsxs(Box, { children: [_jsx(Text, { sx: { fontWeight: 'semibold', display: 'block', mb: 1 }, children: title }), rows.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted' }, children: "Empty so far." })) : (rows.map((row, index) => (_jsxs(Box, { sx: { display: 'flex', gap: 2, py: '2px', alignItems: 'baseline' }, children: [_jsxs(Text, { sx: { color: 'fg.muted', flexShrink: 0, fontFamily: 'mono' }, children: [index, " \u00B7 ", row.kind] }), _jsx(Text, { sx: {
+    return (_jsxs(Box, { children: [_jsx(Text, { sx: { fontWeight: 'semibold', display: 'block', mb: 1 }, children: title }), rows.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted' }, children: "Empty so far." })) : (rows.map((row, index) => (_jsxs(Box, { display: "flex", gap: 2, py: "2px", alignItems: "baseline", children: [_jsxs(Text, { sx: { color: 'fg.muted', flexShrink: 0, fontFamily: 'mono' }, children: [index, " \u00B7 ", row.kind] }), _jsx(Text, { sx: {
                             fontFamily: 'mono',
                             whiteSpace: 'nowrap',
                             overflow: 'hidden',

package/lib/loop/plugins/subagent-activity/SubagentPulse.js

@@ -28,18 +28,6 @@ export function SubagentPulse() {
     const label = overA2A
         ? `${name} is working over A2A…`
         : `${name} is working…`;
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: KEYFRAMES }), _jsx(Tooltip, { text: label, direction: "n", children: _jsx(Box, { as: "button", type: "button", "aria-label": label, "data-subagent-pulse": name, sx: {
-                        display: 'inline-flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        width: 28,
-                        height: 28,
-                        p: 0,
-                        border: 0,
-                        bg: 'transparent',
-                        color: 'accent.fg',
-                        cursor: 'default',
-                        animation: `${PULSE_ANIMATION} 1.4s ease-in-out infinite`,
-                    }, children: _jsx(Icon, { size: 16 }) }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: KEYFRAMES }), _jsx(Tooltip, { text: label, direction: "n", children: _jsx(Box, { as: "button", type: "button", "aria-label": label, "data-subagent-pulse": name, display: "inline-flex", alignItems: "center", justifyContent: "center", width: 28, height: 28, p: 0, border: 0, bg: "transparent", color: "accent.fg", cursor: "default", animation: `${PULSE_ANIMATION} 1.4s ease-in-out infinite`, children: _jsx(Icon, { size: 16 }) }) })] }));
 }
 export default SubagentPulse;

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.