@datalayer/agent-runtimes 1.3.88 → 1.3.90

package/lib/loop/plugins/chat/ChatView.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Box, IconButton, SegmentedControl, Text, Truncate, } from '@primer/react';
-import { loopShapeVars, useColorPalette } from '@datalayer/primer-addons';
+import { IconButton, SegmentedControl, Text, Truncate } from '@primer/react';
+import { Box, loopShapeVars, useColorPalette } from '@datalayer/primer-addons';
 import { ScreenFullIcon, ScreenNormalIcon } from '@primer/octicons-react';
 import { computed, signal } from '@datalayer/reactor';
 /* A signal to read when the layout publishes no live stance: the hook needs one. */
@@ -1597,41 +1597,31 @@ export default function ChatView({ workspace }) {
                             pointerEvents: 'none',
                             zIndex: -1,
                         }, children: _jsx(ReactorLazy, { load: surface.load, props: { surfaceId: surface.surfaceId, workspace }, fallback: _jsxs(Centered, { children: ["Loading ", surface.title, "\u2026"] }), errorFallback: error => (_jsxs(Centered, { children: [surface.title, " failed to load: ", error.message] })) }) }, surface.surfaceId));
-            }), !active && waiting ? (_jsx(Box, { sx: { flex: '1 1 0', minWidth: 0, minHeight: 0 }, children: _jsxs(Centered, { children: ["Starting ", waiting.title, "\u2026"] }) })) : null] }));
-    const transcriptEl = (_jsx(_Fragment, { children: _jsxs(Box, { sx: {
-                /*
-                    Beside an editor, with the prompt on top, the conversation is
-                    the narrower column: the editor is what a `top` host put the
-                    prompt over, and the transcript reads fine at a third of the
-                    width. Every other placement splits the row evenly.
-                  */
-                flex: topPrompt && active ? '0 0 34%' : '1 1 0',
-                maxWidth: topPrompt && active ? 460 : undefined,
-                minWidth: 0,
-                minHeight: 0,
-                display: 'flex',
-                flexDirection: 'column',
-                borderLeft: active ? '1px solid' : undefined,
-                borderColor: 'border.default',
-                // So the expired-key panel below can cover exactly this column and
-                // nothing else: the notebook beside it still works.
-                position: 'relative',
-            }, children: [chatExtras.errorBanner ? (_jsx(Box, { sx: {
-                        flexShrink: 0,
-                        px: 3,
-                        py: 2,
-                        fontSize: 1,
-                        borderBottom: '1px solid',
-                        bg: chatExtras.errorBanner.variant === 'warning'
-                            ? 'attention.subtle'
-                            : 'danger.subtle',
-                        color: chatExtras.errorBanner.variant === 'warning'
-                            ? 'attention.fg'
-                            : 'danger.fg',
-                        borderColor: chatExtras.errorBanner.variant === 'warning'
-                            ? 'attention.muted'
-                            : 'danger.muted',
-                    }, children: chatExtras.errorBanner.message })) : null, openedThread?.said && openedThread.given === givenThread?.id ? (_jsx(Text, { as: "p", role: "status", sx: { m: 0, px: 3, py: 2, fontSize: 1, color: 'fg.muted' }, children: openedThread.said })) : null, _jsx(Box, { sx: { flex: '1 1 auto', minHeight: 0, display: 'flex' }, children: opening ? (_jsx(Text, { as: "p", role: "status", sx: { m: 0, p: 3, fontSize: 1, color: 'fg.muted' }, children: THREAD_WORDS.opening })) : (_jsx(ChatBase
+            }), !active && waiting ? (_jsx(Box, { flex: "1 1 0", minWidth: 0, minHeight: 0, children: _jsxs(Centered, { children: ["Starting ", waiting.title, "\u2026"] }) })) : null] }));
+    const transcriptEl = (_jsx(_Fragment, { children: _jsxs(Box
+        /*
+              Beside an editor, with the prompt on top, the conversation is
+              the narrower column: the editor is what a `top` host put the
+              prompt over, and the transcript reads fine at a third of the
+              width. Every other placement splits the row evenly.
+            */
+        , { 
+            /*
+                  Beside an editor, with the prompt on top, the conversation is
+                  the narrower column: the editor is what a `top` host put the
+                  prompt over, and the transcript reads fine at a third of the
+                  width. Every other placement splits the row evenly.
+                */
+            flex: topPrompt && active ? '0 0 34%' : '1 1 0', maxWidth: topPrompt && active ? 460 : undefined, minWidth: 0, minHeight: 0, display: "flex", flexDirection: "column", borderLeft: active ? '1px solid' : undefined, borderColor: "border.default", 
+            // So the expired-key panel below can cover exactly this column and
+            // nothing else: the notebook beside it still works.
+            position: "relative", children: [chatExtras.errorBanner ? (_jsx(Box, { flexShrink: 0, px: 3, py: 2, fontSize: 1, borderBottom: "1px solid", bg: chatExtras.errorBanner.variant === 'warning'
+                        ? 'attention.subtle'
+                        : 'danger.subtle', color: chatExtras.errorBanner.variant === 'warning'
+                        ? 'attention.fg'
+                        : 'danger.fg', borderColor: chatExtras.errorBanner.variant === 'warning'
+                        ? 'attention.muted'
+                        : 'danger.muted', children: chatExtras.errorBanner.message })) : null, openedThread?.said && openedThread.given === givenThread?.id ? (_jsx(Text, { as: "p", role: "status", sx: { m: 0, px: 3, py: 2, fontSize: 1, color: 'fg.muted' }, children: openedThread.said })) : null, _jsx(Box, { flex: "1 1 auto", minHeight: 0, display: "flex", children: opening ? (_jsx(Text, { as: "p", role: "status", sx: { m: 0, p: 3, fontSize: 1, color: 'fg.muted' }, children: THREAD_WORDS.opening })) : (_jsx(ChatBase
                     // The theme it wears, when the host names one (an application's).
                     , { 
                         // The theme it wears, when the host names one (an application's).
@@ -1748,7 +1738,7 @@ export default function ChatView({ workspace }) {
                           See `toggleFullScreen` for why it is the browser's API rather
                           than a big box.
                         */
-                        headerActions: _jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 2 }, children: [workspace.chatHeaderActions, chatHeaderItems.length > 0 ? (_jsx(ReactorSlot, { slot: LoopSlots.chatHeader, props: { workspace } })) : null, _jsx(IconButton, { icon: fullScreen ? ScreenNormalIcon : ScreenFullIcon, "aria-label": fullScreen ? 'Exit full screen' : 'Enter full screen', variant: "invisible", size: "small", onClick: () => {
+                        headerActions: _jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 2, children: [workspace.chatHeaderActions, chatHeaderItems.length > 0 ? (_jsx(ReactorSlot, { slot: LoopSlots.chatHeader, props: { workspace } })) : null, _jsx(IconButton, { icon: fullScreen ? ScreenNormalIcon : ScreenFullIcon, "aria-label": fullScreen ? 'Exit full screen' : 'Enter full screen', variant: "invisible", size: "small", onClick: () => {
                                         // Whether or not it takes, the hint has been answered:
                                         // they found the control, which is all it was for.
                                         setHintFullScreen(false);
@@ -1843,45 +1833,23 @@ export default function ChatView({ workspace }) {
                         renderToolResult: chatExtras.renderToolResult, showTurnFooter: chatExtras.showTokenUsage ?? config?.showTokenUsage ?? true, onContextSnapshot: handleContextSnapshot, onLoadingChange: handleLoadingChange, onItemsChange: handleMessagesChange, onDisplayItemsChange: handleDisplayItemsChange, enableStreaming: true }, chatThread?.id)) }), besideChat && !promptHidden ? prompt : null] }) }));
     // Off when the host asked for the menu alone: the composer's suggestions
     // control carries the same openers (`suggestions` above).
-    const chipsEl = config?.suggestionLabels !== false && chatSuggestions.length > 0 ? (_jsx(Box, { "aria-label": chatText.suggestedPrompts, sx: { display: 'flex', flexWrap: 'wrap', gap: 2, px: 2, pb: '6px' }, children: chatSuggestions.map(item => (_jsx(Box, { as: "button", type: "button", 
+    const chipsEl = config?.suggestionLabels !== false && chatSuggestions.length > 0 ? (_jsx(Box, { "aria-label": chatText.suggestedPrompts, display: "flex", flexWrap: "wrap", gap: 2, px: 2, pb: "6px", children: chatSuggestions.map(item => (_jsx(Box, { as: "button", type: "button", 
             // The whole request, where the chip shows only its summary.
-            title: item.message, disabled: busy || chatDisabled, onClick: () => void handleSend(item.message), sx: {
-                appearance: 'none',
-                font: 'inherit',
-                fontSize: 0,
-                fontWeight: 'semibold',
-                // Room for descenders: the truncated span clips what falls
-                // below its line, and at a line-height of one that is the
-                // tail of every "y".
-                lineHeight: 1.25,
-                px: '10px',
-                py: '5px',
-                width: SUGGESTION_CHIP_WIDTH,
-                flex: `0 0 ${SUGGESTION_CHIP_WIDTH}px`,
-                borderRadius: '999px',
-                border: '1px solid',
+            title: item.message, disabled: busy || chatDisabled, onClick: () => void handleSend(item.message), appearance: "none", font: "inherit", fontSize: 0, fontWeight: "semibold", 
+            // Room for descenders: the truncated span clips what falls
+            // below its line, and at a line-height of one that is the
+            // tail of every "y".
+            lineHeight: 1.25, px: "10px", py: "5px", width: SUGGESTION_CHIP_WIDTH, flex: `0 0 ${SUGGESTION_CHIP_WIDTH}px`, borderRadius: "999px", border: "1px solid", bg: "canvas.subtle", whiteSpace: "nowrap", sx: {
                 borderColor: 'border.default',
-                bg: 'canvas.subtle',
                 color: 'fg.default',
                 cursor: 'pointer',
-                whiteSpace: 'nowrap',
                 '&:hover:not(:disabled)': {
                     borderColor: 'accent.fg',
                     color: 'accent.fg',
                 },
                 '&:disabled': { opacity: 0.5, cursor: 'default' },
             }, children: _jsx(Truncate, { title: item.title, maxWidth: "100%", sx: { minWidth: 0 }, children: item.title }) }, item.title))) })) : null;
-    const transientEl = transient ? (_jsx(Box, { sx: {
-            flex: '0 0 auto',
-            px: 3,
-            py: 2,
-            borderTop: '1px solid',
-            borderColor: 'border.default',
-            bg: 'canvas.subtle',
-            fontSize: 1,
-            maxHeight: '40%',
-            overflowY: 'auto',
-        }, children: transient })) : null;
+    const transientEl = transient ? (_jsx(Box, { flex: "0 0 auto", px: 3, py: 2, borderTop: "1px solid", borderColor: "border.default", bg: "canvas.subtle", fontSize: 1, maxHeight: "40%", overflowY: "auto", children: transient })) : null;
     return (_jsxs(Box, { ref: viewRef, sx: {
             height: '100%',
             minHeight: 0,
@@ -1916,25 +1884,9 @@ export default function ChatView({ workspace }) {
                     zIndex: 1000,
                 }
                 : null),
-        }, children: [layout ? (_jsx(layout.Component, { workspace: workspace, editors: editorsEl, hasEditor: !!active, transcript: transcriptEl, prompt: promptHidden ? null : prompt, chips: promptHidden ? null : chipsEl, picker: pickerEl, transient: transientEl })) : (_jsxs(_Fragment, { children: [topPrompt && !promptHidden ? (_jsxs(Box, { sx: {
-                            flex: '0 0 auto',
-                            borderBottom: '1px solid',
-                            borderColor: 'border.default',
-                        }, children: [prompt, chipsEl] })) : null, pickerEl, _jsxs(Box, { sx: {
-                            flex: '1 1 auto',
-                            minHeight: 0,
-                            display: 'flex',
-                            // The hidden editors position themselves against this row.
-                            position: 'relative',
-                        }, children: [editorsEl, transcriptEl] }), transientEl, besideChat || promptHidden || topPrompt ? null : prompt] })), keyExpired ? (_jsx(Box, { sx: {
-                    position: 'absolute',
-                    inset: 0,
-                    zIndex: 5,
-                    bg: 'canvas.default',
-                    display: 'flex',
-                    flexDirection: 'column',
-                    minHeight: 0,
-                }, children: _jsx(AnonymousKeyExpired, { agentName: member?.name ?? spec?.name, 
+        }, children: [layout ? (_jsx(layout.Component, { workspace: workspace, editors: editorsEl, hasEditor: !!active, transcript: transcriptEl, prompt: promptHidden ? null : prompt, chips: promptHidden ? null : chipsEl, picker: pickerEl, transient: transientEl })) : (_jsxs(_Fragment, { children: [topPrompt && !promptHidden ? (_jsxs(Box, { flex: "0 0 auto", borderBottom: "1px solid", borderColor: "border.default", children: [prompt, chipsEl] })) : null, pickerEl, _jsxs(Box, { flex: "1 1 auto", minHeight: 0, display: "flex", 
+                        // The hidden editors position themselves against this row.
+                        position: "relative", children: [editorsEl, transcriptEl] }), transientEl, besideChat || promptHidden || topPrompt ? null : prompt] })), keyExpired ? (_jsx(Box, { position: "absolute", inset: 0, zIndex: 5, bg: "canvas.default", display: "flex", flexDirection: "column", minHeight: 0, children: _jsx(AnonymousKeyExpired, { agentName: member?.name ?? spec?.name, 
                     // On the browser target the kernel is in this page and owes the
                     // inference service nothing, so the notebook is genuinely
                     // unaffected and the panel may say so.
@@ -1951,16 +1903,7 @@ export default function ChatView({ workspace }) {
  */
 function SurfacePicker({ surfaces, active, onChange, workspace, }) {
     const ordered = [...surfaces].sort((left, right) => (left.order ?? 100) - (right.order ?? 100));
-    return (_jsxs(Box, { sx: {
-            flex: '0 0 auto',
-            display: 'flex',
-            alignItems: 'center',
-            gap: 2,
-            px: 3,
-            py: 2,
-            borderBottom: '1px solid',
-            borderColor: 'border.default',
-        }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Beside the chat" }), _jsxs(SegmentedControl, { "aria-label": "Editor beside the chat", size: "small", children: [_jsx(SegmentedControl.Button, { selected: active === NO_SURFACE, onClick: () => onChange(NO_SURFACE), children: "Chat" }), ordered.map(surface => {
+    return (_jsxs(Box, { flex: "0 0 auto", display: "flex", alignItems: "center", gap: 2, px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Beside the chat" }), _jsxs(SegmentedControl, { "aria-label": "Editor beside the chat", size: "small", children: [_jsx(SegmentedControl.Button, { selected: active === NO_SURFACE, onClick: () => onChange(NO_SURFACE), children: "Chat" }), ordered.map(surface => {
                         const openable = canOpenView(surface, workspace);
                         const reason = openable
                             ? undefined
@@ -1982,14 +1925,5 @@ function SurfacePicker({ surfaces, active, onChange, 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/plugins/checkpoints-sidebar/CheckpointsSidebar.js

@@ -151,24 +151,13 @@ export function CheckpointsSidebar({ workspace, }) {
     const remove = useCallback((checkpoint) => act(`delete:${checkpoint.id}`, () => deleteConversationCheckpoint(serverUrl, agentId, checkpoint.id)), [act, agentId, serverUrl]);
     const checkpoints = useMemo(() => state?.checkpoints ?? [], [state]);
     const enabled = state?.enabled ?? false;
-    return (_jsxs(Box, { "data-checkpoints-sidebar": agentId || undefined, "data-checkpoints-count": checkpoints.length, sx: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(VersionsIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, m: 0, flex: 1 }, children: "Checkpoints" }), _jsx(Label, { variant: "accent", children: checkpoints.length }), _jsx(IconButton, { icon: SyncIcon, size: "small", variant: "invisible", "aria-label": "Refresh checkpoints", onClick: () => void reload() })] }), _jsxs(Box, { children: [_jsx(SectionHeading, { children: "How they are taken" }), state === null ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: error ? `Could not read them: ${error}` : 'Reading…' })) : !enabled ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "This agent's spec asks for no conversation checkpoints." })) : (_jsxs(Box, { sx: {
-                            display: 'grid',
-                            gridTemplateColumns: 'max-content 1fr',
-                            columnGap: 3,
-                            rowGap: 1,
-                            fontSize: 0,
-                        }, children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: "Snapshot" }), _jsx(Text, { children: FREQUENCY_LABEL[state.frequency ?? ''] ?? state.frequency }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Kept" }), _jsxs(Text, { children: ["the last ", state.maxCheckpoints ?? '—', ",", ' ', state.store ?? 'in_memory'] }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Turn" }), _jsx(Text, { "data-checkpoints-turn": state.turn, children: state.turn })] }))] }), enabled ? (_jsxs(Box, { children: [_jsx(SectionHeading, { children: "Save one now" }), _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(TextInput, { size: "small", sx: { flex: 1 }, placeholder: "Label, e.g. before-refactor", value: label, "aria-label": "Checkpoint label", onChange: event => setLabel(event.target.value), onKeyDown: event => {
+    return (_jsxs(Box, { "data-checkpoints-sidebar": agentId || undefined, "data-checkpoints-count": checkpoints.length, display: "flex", flexDirection: "column", gap: 4, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(VersionsIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, m: 0, flex: 1 }, children: "Checkpoints" }), _jsx(Label, { variant: "accent", children: checkpoints.length }), _jsx(IconButton, { icon: SyncIcon, size: "small", variant: "invisible", "aria-label": "Refresh checkpoints", onClick: () => void reload() })] }), _jsxs(Box, { children: [_jsx(SectionHeading, { children: "How they are taken" }), state === null ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: error ? `Could not read them: ${error}` : 'Reading…' })) : !enabled ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "This agent's spec asks for no conversation checkpoints." })) : (_jsxs(Box, { display: "grid", gridTemplateColumns: "max-content 1fr", columnGap: 3, rowGap: 1, fontSize: 0, children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: "Snapshot" }), _jsx(Text, { children: FREQUENCY_LABEL[state.frequency ?? ''] ?? state.frequency }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Kept" }), _jsxs(Text, { children: ["the last ", state.maxCheckpoints ?? '—', ",", ' ', state.store ?? 'in_memory'] }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Turn" }), _jsx(Text, { "data-checkpoints-turn": state.turn, children: state.turn })] }))] }), enabled ? (_jsxs(Box, { children: [_jsx(SectionHeading, { children: "Save one now" }), _jsxs(Box, { display: "flex", gap: 2, children: [_jsx(TextInput, { size: "small", sx: { flex: 1 }, placeholder: "Label, e.g. before-refactor", value: label, "aria-label": "Checkpoint label", onChange: event => setLabel(event.target.value), onKeyDown: event => {
                                     if (event.key === 'Enter')
                                         save();
                                 } }), _jsx(Button, { size: "small", leadingVisual: BookmarkIcon, disabled: !label.trim() || busy !== null, onClick: save, "data-checkpoints-save": true, children: "Save" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 1, mb: 0 }, children: "The conversation as the last turn left it." })] })) : null, error && state !== null ? (_jsx(Text, { sx: { fontSize: 0, color: 'danger.fg' }, "data-checkpoints-error": true, children: error })) : null, _jsxs(Box, { children: [_jsx(SectionHeading, { children: "Checkpoints" }), checkpoints.length === 0 ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: enabled ? 'None yet — one is taken as each turn ends.' : 'None.' })) : (_jsx(Timeline, { children: checkpoints.map(checkpoint => {
                             const auto = isAutoCheckpoint(checkpoint);
                             const rewinding = busy === `rewind:${checkpoint.id}`;
-                            return (_jsxs(Timeline.Item, { "data-checkpoint": checkpoint.id, "data-checkpoint-label": checkpoint.label, "data-checkpoint-auto": auto ? 'true' : 'false', children: [_jsx(Timeline.Badge, { children: auto ? _jsx(HistoryIcon, {}) : _jsx(BookmarkIcon, {}) }), _jsxs(Timeline.Body, { children: [_jsxs(Box, { sx: {
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    gap: 2,
-                                                    flexWrap: 'wrap',
-                                                }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: checkpoint.label }), _jsx(Label, { size: "small", variant: auto ? 'secondary' : 'accent', children: auto ? 'auto' : 'saved' })] }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 1 }, children: ["turn ", checkpoint.turn, " \u00B7 ", checkpoint.messageCount, " message", checkpoint.messageCount === 1 ? '' : 's', " \u00B7", ' ', ago(checkpoint.createdAt, now)] }), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center' }, children: [_jsx(Button, { size: "small", leadingVisual: HistoryIcon, disabled: busy !== null, onClick: () => void rewind(checkpoint), "data-checkpoints-rewind": checkpoint.id, children: rewinding ? 'Rewinding…' : 'Rewind' }), _jsx(IconButton, { icon: TrashIcon, size: "small", variant: "invisible", "aria-label": `Delete checkpoint ${checkpoint.label}`, disabled: busy !== null, onClick: () => void remove(checkpoint) })] })] })] }, checkpoint.id));
+                            return (_jsxs(Timeline.Item, { "data-checkpoint": checkpoint.id, "data-checkpoint-label": checkpoint.label, "data-checkpoint-auto": auto ? 'true' : 'false', children: [_jsx(Timeline.Badge, { children: auto ? _jsx(HistoryIcon, {}) : _jsx(BookmarkIcon, {}) }), _jsxs(Timeline.Body, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap", children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: checkpoint.label }), _jsx(Label, { size: "small", variant: auto ? 'secondary' : 'accent', children: auto ? 'auto' : 'saved' })] }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 1 }, children: ["turn ", checkpoint.turn, " \u00B7 ", checkpoint.messageCount, " message", checkpoint.messageCount === 1 ? '' : 's', " \u00B7", ' ', ago(checkpoint.createdAt, now)] }), _jsxs(Box, { display: "flex", gap: 2, alignItems: "center", children: [_jsx(Button, { size: "small", leadingVisual: HistoryIcon, disabled: busy !== null, onClick: () => void rewind(checkpoint), "data-checkpoints-rewind": checkpoint.id, children: rewinding ? 'Rewinding…' : 'Rewind' }), _jsx(IconButton, { icon: TrashIcon, size: "small", variant: "invisible", "aria-label": `Delete checkpoint ${checkpoint.label}`, disabled: busy !== null, onClick: () => void remove(checkpoint) })] })] })] }, checkpoint.id));
                         }) }))] })] }));
 }
 export default CheckpointsSidebar;

package/lib/loop/plugins/decks/DeckSurface.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { DecksView } from '@datalayer/decks/plugin';
 export default function DeckSurface(_) {
-    return (_jsx(Box, { sx: { height: '100%', minHeight: 0, overflow: 'auto' }, children: _jsx(DecksView, {}) }));
+    return (_jsx(Box, { height: "100%", minHeight: 0, overflow: "auto", children: _jsx(DecksView, {}) }));
 }

package/lib/loop/plugins/document/DocumentView.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { useContributions, useSignalValue } from '@datalayer/reactor/react';
-import { Box, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text } from '@primer/react';
 import { EphemeralDocument } from '../../../chat/document/EphemeralDocument';
 import { LoopDocumentToolbar, LoopDocumentToolbarItem, LoopOpeningDocument, } from '../../core';
 import { useEditorToolbar } from '../../core/toolbar';
@@ -30,16 +31,7 @@ export default function DocumentView({ workspace, }) {
     const opening = useMemo(() => JSON.stringify((contributedOpening?.document ?? openingDocument)()), [contributedOpening]);
     const autoFocus = contributedOpening?.autoFocus ?? true;
     if (snapshot.state !== 'running') {
-        return (_jsx(Box, { sx: {
-                height: '100%',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                color: 'fg.muted',
-                fontSize: 1,
-                px: 4,
-                textAlign: 'center',
-            }, children: _jsx(Text, { children: "The document needs a running sandbox for its code blocks. Open the Sandbox view to see what it is doing." }) }));
+        return (_jsx(Box, { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "fg.muted", fontSize: 1, px: 4, textAlign: "center", children: _jsx(Text, { children: "The document needs a running sandbox for its code blocks. Open the Sandbox view to see what it is doing." }) }));
     }
     // A browser sandbox already owns its kernel; binding to that manager is what
     // puts the agent's code blocks and the reader's in the same one. A server
@@ -48,7 +40,7 @@ export default function DocumentView({ workspace, }) {
     // came up blank on Pyodide.
     const browserManager = service.getServiceManager() ??
         undefined;
-    return (_jsx(Box, { sx: { height: '100%', minHeight: 0 }, children: _jsx(EphemeralDocument
+    return (_jsx(Box, { height: "100%", minHeight: 0, children: _jsx(EphemeralDocument
         // The entry point owns the theme; a second provider here would fight
         // it over BaseStyles and font tokens (§3.5, §3.6).
         , { 

package/lib/loop/plugins/document-toolbar/SandboxStatusItem.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useSignalValue } from '@datalayer/reactor/react';
-import { Box, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text } from '@primer/react';
 import { useOptionalSandboxService } from '../agents';
 import { IDLE_SANDBOX_SNAPSHOT_SIGNAL } from '../../core';
 /** How each state reads, and what colour it reads in. */
@@ -20,12 +21,6 @@ export function SandboxStatusItem() {
         return null;
     }
     const appearance = APPEARANCE[snapshot.state] ?? APPEARANCE.idle;
-    return (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, px: 2 }, children: [_jsx(Box, { sx: {
-                    width: 8,
-                    height: 8,
-                    borderRadius: '50%',
-                    bg: appearance.color,
-                    flexShrink: 0,
-                } }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: appearance.label })] }));
+    return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, px: 2, children: [_jsx(Box, { width: 8, height: 8, borderRadius: "50%", bg: appearance.color, flexShrink: 0 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: appearance.label })] }));
 }
 export default SandboxStatusItem;

package/lib/loop/plugins/graph/GraphView.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { Box } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { ReactorSlot } from '@datalayer/reactor/react';
 export default function GraphView() {
-    return (_jsx(Box, { sx: { height: '100%', overflowY: 'auto', px: 4, py: 3 }, children: _jsx(ReactorSlot, { slot: "graph" }) }));
+    return (_jsx(Box, { height: "100%", overflowY: "auto", px: 4, py: 3, children: _jsx(ReactorSlot, { slot: "graph" }) }));
 }

package/lib/loop/plugins/input-prompt/ComposerView.js

@@ -20,6 +20,6 @@ export function ComposerView({ workspace, composer, }) {
             const Panel = entry.value.Component;
             return _jsx(Panel, { workspace: workspace }, entry.value.id);
         }) })) : undefined;
-    return (_jsx(Box, { sx: { flex: '0 0 auto' }, children: _jsx(InputPrompt, { ...composer, leadingPanel: stack(above), trailingPanel: stack(below) }) }));
+    return (_jsx(Box, { flex: "0 0 auto", children: _jsx(InputPrompt, { ...composer, leadingPanel: stack(above), trailingPanel: stack(below) }) }));
 }
 export default ComposerView;

package/lib/loop/plugins/notebook/NotebookView.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from 'react';
 import { useContributions, useSignalValue } from '@datalayer/reactor/react';
-import { Box, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text } from '@primer/react';
 import { EphemeralNotebook } from '../../../chat/notebook/EphemeralNotebook';
 import { LoopNotebookToolbar, LoopNotebookToolbarItem, LoopOpeningNotebook, } from '../../core';
 import { useEditorToolbar } from '../../core/toolbar';
@@ -96,16 +97,7 @@ export default function NotebookView({ workspace, }) {
     // sandbox can go away while it is on screen — say so rather than rendering a
     // notebook wired to nothing.
     if (snapshot.state !== 'running') {
-        return (_jsx(Box, { sx: {
-                height: '100%',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                color: 'fg.muted',
-                fontSize: 1,
-                px: 4,
-                textAlign: 'center',
-            }, children: _jsx(Text, { children: "The notebook needs a running sandbox. Open the Sandbox view to see what it is doing." }) }));
+        return (_jsx(Box, { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", color: "fg.muted", fontSize: 1, px: 4, textAlign: "center", children: _jsx(Text, { children: "The notebook needs a running sandbox. Open the Sandbox view to see what it is doing." }) }));
     }
     // A browser sandbox already owns its kernel; binding to that manager is what
     // puts the agent's executions and the reader's cells in the same one. A

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;