@datalayer/agent-runtimes 1.3.89 → 1.3.91

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

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

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

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

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. */
@@ -41,7 +41,7 @@ import { AGENTS_PLUGIN_NAME } from '../agents/plugin';
 import { useConfig } from '../../../hooks/useConfig';
 import { useSkills, useSkillActions } from '../../../hooks/useSkills';
 import { AI_MODEL_CATALOGUE, isChatModel } from '../../../specs/models';
-import { LoopAgentBlueprint, LoopAgentGate, LoopChatComposer, LoopChatExtras, LoopChatHeader, LoopChatLayout, LoopChatSuggestion, LoopChatSurface, LoopChatTurn, LoopCommand, LoopFrontendTool, LoopRunProps, LoopSlots, canOpenView, runForwardedProps, onPromptFocusRequest, onSurfaceRequest, useLoopPromptStore, } from '../../core';
+import { LoopAgentBlueprint, LoopAgentGate, LoopChatComposer, LoopChatExtras, LoopChatHeader, LoopChatLayout, LoopChatSuggestion, LoopChatSurface, LoopChatTurn, LoopCommand, LoopFrontendTool, LoopRunProps, LoopSlots, agentServerOf, noRuntimeSaid, canOpenView, runForwardedProps, onPromptFocusRequest, onSurfaceRequest, useLoopPromptStore, } from '../../core';
 import { messageText, turnWritersOf } from './turnState';
 import { isInactiveSurfaceContribution, orderToolContributions, toolsForChatView, } from './chatViewTools';
 import { useAgentCommandTools } from '../../../tools/adapters/commands';
@@ -946,8 +946,12 @@ export default function ChatView({ workspace }) {
      * opened against. Addressing the latter would be talking to a machine that
      * has never heard of it. The same value for every other target, where the
      * two are the same server.
+     *
+     * Nothing while a Datalayer runtime is not assigned (the pool had none, or
+     * it is still being given): the chat is off and says so below, rather than
+     * sending to the host's server — on a hosted page, the page's own origin.
      */
-    const agentServerUrl = workspace.sandbox.agentBaseUrl || workspace.serverUrl;
+    const agentServerUrl = agentServerOf(workspace.sandbox, workspace.serverUrl);
     /*
      * Who a single request may be addressed to.
      *
@@ -1041,12 +1045,25 @@ export default function ChatView({ workspace }) {
      * Studio's Preview and the hosted page, rather than left unanswered.
      */
     const ambient = useChatAvailability();
-    const chatDisabled = gateBlocked || keyExpired || Boolean(inPageRefusal) || ambient.disabled;
+    /*
+     * No agent to talk to: a Datalayer runtime not assigned (STUDIO P-24,
+     * round 9). Said in a sentence — why, when its launch was refused — and
+     * nothing is sent; the header does not say *Ready*.
+     */
+    const noRuntime = agentServerUrl === undefined
+        ? noRuntimeSaid(workspace.sandbox, chatText)
+        : undefined;
+    const chatDisabled = gateBlocked ||
+        keyExpired ||
+        Boolean(inPageRefusal) ||
+        Boolean(noRuntime) ||
+        ambient.disabled;
     const disabledReason = keyExpired
         ? expiredKeyIsTemporary
             ? chatText.demoKeyExpired
             : chatText.keyExpired
         : (inPageRefusal ??
+            noRuntime ??
             gateReason ??
             (ambient.disabled ? ambient.disableReason : undefined));
     /*
@@ -1250,6 +1267,10 @@ export default function ChatView({ workspace }) {
             ? openedThread.thread
             : undefined
         : givenThread;
+    /*
+     * None without a server (`noRuntime`): the chat is off and connects to
+     * nothing — no address is made up for it.
+     */
     const protocol = useMemo(() => inPage
         ? browserProtocolConfig({
             agentId: member?.specId ?? agentId,
@@ -1280,23 +1301,25 @@ export default function ChatView({ workspace }) {
             // its session API does on a runtime.
             modeEffect: blueprintTurn?.modeEffect,
         })
-        : {
-            type: 'ag-ui',
-            // An application's agent is spoken to through its session API
-            // (LOOP R-04): each thread a session, recorded under its uid,
-            // run in the name the application runs in, and taking what the
-            // page did besides the message — the same AG-UI events back.
-            endpoint: runsApp
-                ? `${agentServerUrl}/api/v1/apps/agents/${encodeURIComponent(agentId)}/ag-ui/`
-                : `${agentServerUrl}/api/v1/ag-ui/${agentId}/`,
-            ...(runsApp && iamToken ? { authToken: iamToken } : {}),
-            agentId,
-            // `/api/v1/configure`, not `/api/v1/configure/config`: the hooks
-            // strip one trailing `config`/`configure` segment to find the API
-            // base, so the longer form doubles it.
-            configEndpoint: `${agentServerUrl}/api/v1/configure`,
-            enableConfigQuery: true,
-        }, [
+        : agentServerUrl !== undefined
+            ? {
+                type: 'ag-ui',
+                // An application's agent is spoken to through its session API
+                // (LOOP R-04): each thread a session, recorded under its uid,
+                // run in the name the application runs in, and taking what the
+                // page did besides the message — the same AG-UI events back.
+                endpoint: runsApp
+                    ? `${agentServerUrl}/api/v1/apps/agents/${encodeURIComponent(agentId)}/ag-ui/`
+                    : `${agentServerUrl}/api/v1/ag-ui/${agentId}/`,
+                ...(runsApp && iamToken ? { authToken: iamToken } : {}),
+                agentId,
+                // `/api/v1/configure`, not `/api/v1/configure/config`: the hooks
+                // strip one trailing `config`/`configure` segment to find the API
+                // base, so the longer form doubles it.
+                configEndpoint: `${agentServerUrl}/api/v1/configure`,
+                enableConfigQuery: true,
+            }
+            : undefined, [
         agentId,
         inPage,
         inference,
@@ -1321,7 +1344,7 @@ export default function ChatView({ workspace }) {
      * need one, and a browser agent has none — hence the menus below being
      * gated on the data rather than switched on unconditionally.
      */
-    const configQuery = useConfig(!inPage, protocol.type === 'ag-ui' ? protocol.configEndpoint : undefined, undefined, agentId);
+    const configQuery = useConfig(!inPage, protocol?.type === 'ag-ui' ? protocol.configEndpoint : undefined, undefined, agentId);
     const skillsQuery = useSkills(true);
     const skillActions = useSkillActions(agentId);
     // `undefined` until the runtime answers: its answer is then the list.
@@ -1338,7 +1361,7 @@ export default function ChatView({ workspace }) {
          * catalogue that was never going to arrive. The agentspecs catalogue below
          * is the answer for this case and needs no request at all.
          */
-        if (inPage) {
+        if (inPage || agentServerUrl === undefined) {
             return undefined;
         }
         let cancelled = false;
@@ -1424,7 +1447,7 @@ export default function ChatView({ workspace }) {
      */
     const selectModel = useCallback(async (model) => {
         setPickedModel(model);
-        if (inPage) {
+        if (inPage || agentServerUrl === undefined) {
             return;
         }
         await fetch(`${agentServerUrl}/api/v1/configure/inference/provider`, {
@@ -1597,41 +1620,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).
@@ -1673,7 +1686,9 @@ export default function ChatView({ workspace }) {
                         brandIcon: presence?.face ? (_jsx(PresenceFace, { face: presence.face, size: 20, state: presenceNow })) : (_jsx(BrandIcon, { size: 20 })), 
                         // An application says what it is doing, in plain words, beside
                         // its name (T-08); an agent's chat keeps its header as it is.
-                        headerContent: presence ? _jsx(PresenceLine, { state: presenceNow }) : undefined, emptyState: {
+                        headerContent: 
+                        // Not *Ready* with no runtime: the header says why instead.
+                        presence && !noRuntime ? (_jsx(PresenceLine, { state: presenceNow })) : undefined, emptyState: {
                             // An application's own face, at the page's size of the three
                             // (LOOP T-08, T-19): the thing a person's eye lands on first.
                             icon: presence?.face ? (_jsx("span", { "aria-hidden": true, style: { fontSize: FACE_LARGE, lineHeight: 1 }, children: _jsx(FaceDrawing, { face: presence.face, size: FACE_LARGE }) })) : (_jsx(BrandIcon, { size: 48 })),
@@ -1748,7 +1763,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 +1858,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 +1909,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 +1928,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 +1950,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