@datalayer/agent-runtimes 1.3.15 → 1.3.16

package/README.md

@@ -4,7 +4,7 @@
   ~ BSD 3-Clause License
 -->
 
-[![Datalayer](https://assets.datalayer.tech/datalayer-25.svg)](https://datalayer.io)
+[![Datalayer](https://images.datalayer.io/legacy/datalayer-25.svg)](https://datalayer.ai)
 
 [![Become a Sponsor](https://img.shields.io/static/v1?label=Become%20a%20Sponsor&message=%E2%9D%A4&logo=GitHub&style=flat&color=1ABC9C)](https://github.com/sponsors/datalayer)
 

package/lib/chat/base/ChatBase.js

@@ -31,7 +31,7 @@ import { useChatStore } from '../../stores/chatStore';
 import { useConversationStore } from '../../stores/conversationStore';
 import { generateMessageId, createUserMessage, createAssistantMessage, } from '../../types/messages';
 import { AgentDetails } from '../../agents/AgentDetails';
-import { AI_MODEL_CATALOGUE, DEFAULT_MODEL } from '../../specs/models';
+import { AI_MODEL_CATALOGUE, DEFAULT_MODEL, isChatModel, } from '../../specs/models';
 import { internalQueryClient, isToolCallMessage, convertHistoryToDisplayItems, createProtocolAdapter, getApiBaseFromConfig, sanitizeAssistantContent, } from '../../utils';
 import { useConfig, useSkills, useSkillActions, useContextSnapshot, useSandbox, } from '../../hooks';
 import { useAgentRuntimeWebSocket } from '../../hooks/useAgentRuntimes';
@@ -1397,7 +1397,8 @@ showToolApprovalBanner = true, pendingApprovals: pendingApprovalsProp, onApprove
          * four are current.
          */
         const catalogued = Object.values(AI_MODEL_CATALOGUE)
-            .filter(model => model.available)
+            // A typed-judgment model answers typed questions, not a chat.
+            .filter(model => model.available && isChatModel(model))
             .map(model => ({
             id: model.id,
             name: model.name,

package/lib/config/AgentConfiguration.d.ts

@@ -28,7 +28,7 @@ export interface LibraryAgentspec {
     welcomeDocument?: string | null;
     sandboxVariant?: string | null;
     protocol?: string | null;
-    uiExtension?: string | null;
+    uiPlugin?: string | null;
     trigger?: Record<string, unknown> | null;
     modelConfig?: Record<string, unknown> | null;
     mcpServerTools?: Array<Record<string, unknown>> | null;

package/lib/loop/embed/LoopEmbed.d.ts

@@ -29,6 +29,11 @@ export type LoopEmbedProps = LoopPresetOptions & {
     chatHeaderActions?: ReactNode;
     /** The host's own controls for the workspace header row. */
     headerActions?: ReactNode;
+    /**
+     * An element in the host's own bar to render the header's controls in,
+     * instead of a header row. See `LoopWorkspaceProps.headerContainer`.
+     */
+    headerContainer?: HTMLElement | null;
     /**
      * Draw the workspace inside a window frame with this title bar.
      *
@@ -53,5 +58,5 @@ export type LoopEmbedProps = LoopPresetOptions & {
      */
     plugins?: PluginRef[];
 };
-export declare function LoopEmbed({ agentId, showHeader, chatHeaderActions, headerActions, frameTitle, frameHeight, plugins, ...preset }: LoopEmbedProps): React.JSX.Element;
+export declare function LoopEmbed({ agentId, showHeader, chatHeaderActions, headerActions, headerContainer, frameTitle, frameHeight, plugins, ...preset }: LoopEmbedProps): React.JSX.Element;
 export default LoopEmbed;

package/lib/loop/embed/LoopEmbed.js

@@ -30,7 +30,7 @@ import { internalQueryClient } from '../../utils';
 import { buildLoopReactor, LoopWorkspace } from '../shell';
 import { loopPlugins } from '../presets';
 import { WindowFrame } from '../plugins/window-frame';
-export function LoopEmbed({ agentId = '', showHeader = false, chatHeaderActions, headerActions, frameTitle, frameHeight, plugins = [], ...preset }) {
+export function LoopEmbed({ agentId = '', showHeader = false, chatHeaderActions, headerActions, headerContainer, frameTitle, frameHeight, plugins = [], ...preset }) {
     /*
      * The latest `firstPromptHook`, kept in a ref rather than closed over
      * directly.
@@ -69,6 +69,7 @@ export function LoopEmbed({ agentId = '', showHeader = false, chatHeaderActions,
         preset.chatHeaderButtons,
         preset.promptPlacement,
         preset.autoFocusPrompt,
+        preset.suggestionLabels,
         preset.fullScreenTopOffset,
         preset.showAgentVariants,
         preset.agentSummary,
@@ -119,7 +120,7 @@ export function LoopEmbed({ agentId = '', showHeader = false, chatHeaderActions,
      * view and the workspace draws "No view is available yet".
      */
     useReactor(reactor);
-    const shell = (_jsx(LoopWorkspace, { serverUrl: preset.serverUrl ?? '', agentId: agentId, reactor: reactor, manageReactor: false, showViewSelector: preset.showViewSelector, showHeader: showHeader, chatHeaderActions: chatHeaderActions, headerActions: headerActions }));
+    const shell = (_jsx(LoopWorkspace, { serverUrl: preset.serverUrl ?? '', agentId: agentId, reactor: reactor, manageReactor: false, showViewSelector: preset.showViewSelector, showHeader: showHeader, chatHeaderActions: chatHeaderActions, headerActions: headerActions, headerContainer: headerContainer }));
     return (_jsx(QueryClientProvider, { client: internalQueryClient, children: frameTitle !== undefined ? (_jsx(WindowFrame, { title: frameTitle, height: frameHeight, children: shell })) : (_jsx(Box, { sx: { height: '100%', minHeight: 0 }, children: shell })) }));
 }
 export default LoopEmbed;

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

@@ -37,7 +37,7 @@ import { agentRuntimeStore, useAgentRuntimeContextSnapshot, } from '../../../sto
 import { useIAMStore } from '../../../state';
 import { useConfig } from '../../../hooks/useConfig';
 import { useSkills, useSkillActions } from '../../../hooks/useSkills';
-import { AI_MODEL_CATALOGUE } from '../../../specs/models';
+import { AI_MODEL_CATALOGUE, isChatModel } from '../../../specs/models';
 import { LoopAgentBlueprint, LoopAgentGate, LoopChatComposer, LoopChatExtras, LoopChatHeader, LoopChatLayout, LoopChatSuggestion, LoopChatSurface, LoopChatTurn, LoopFrontendTool, LoopSlots, canOpenView, onPromptFocusRequest, onSurfaceRequest, useLoopPromptStore, } from '../../core';
 import { turnWritersOf } from './turnState';
 import { isInactiveSurfaceContribution, orderToolContributions, toolsForChatView, } from './chatViewTools';
@@ -1153,7 +1153,8 @@ export default function ChatView({ workspace }) {
     const offeredModels = useMemo(() => catalogModels.length > 0
         ? catalogModels
         : Object.values(AI_MODEL_CATALOGUE)
-            .filter(model => model.available)
+            // A typed-judgment model answers typed questions, not a chat.
+            .filter(model => model.available && isChatModel(model))
             .map(model => ({
             id: model.id,
             name: model.name,
@@ -1475,7 +1476,9 @@ export default function ChatView({ workspace }) {
                         // With the prompt on top the openers are already chips under
                         // it; the empty state repeating them was the same three buttons
                         // twice on one screen.
-                        suggestions: topPrompt || layout ? [] : chatSuggestions, 
+                        suggestions: topPrompt || layout || config?.suggestionLabels === false
+                            ? []
+                            : chatSuggestions, 
                         /*
                             The title bar arrives as a plugin: the chat-header plugin
                             contributes the component, this view hands it the assembled
@@ -1598,7 +1601,9 @@ export default function ChatView({ workspace }) {
                         // through the extras channel — the A2UI examples draw their
                         // surface here. Wins over the notebook surfaces in ChatBase.
                         renderToolResult: chatExtras.renderToolResult, showTurnFooter: chatExtras.showTokenUsage ?? true, onContextSnapshot: handleContextSnapshot, onLoadingChange: handleLoadingChange, onItemsChange: handleMessagesChange, onDisplayItemsChange: handleDisplayItemsChange, enableStreaming: true }) }), besideChat && !promptHidden ? prompt : null] }) }));
-    const chipsEl = chatSuggestions.length > 0 ? (_jsx(Box, { "aria-label": "Suggested prompts", sx: { display: 'flex', flexWrap: 'wrap', gap: 2, px: 2, pb: '6px' }, children: chatSuggestions.map(item => (_jsx(Box, { as: "button", type: "button", 
+    // 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": "Suggested prompts", sx: { 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',

package/lib/loop/plugins/chat/index.d.ts

@@ -105,6 +105,16 @@ export type ChatPluginConfig = {
      * them. Such a host passes `false` and lets the reader arrive at the prompt.
      */
     autoFocusPrompt: boolean;
+    /**
+     * Whether the openers are drawn as a row of labels by the composer.
+     *
+     * On by default: a person who has just opened the workspace sees what it is
+     * worth asking without opening anything. The same openers are always behind
+     * the composer's own suggestions menu, so a host with little room — a frame
+     * on a landing page, where the labels would be a row of the first screen —
+     * turns the labels off and loses nothing.
+     */
+    suggestionLabels: boolean;
     /**
      * Pixels to reserve at the top of the workspace when it goes full screen —
      * room for a host's own fixed header, drawn outside the workspace

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

@@ -48,6 +48,7 @@ export const ChatPlugin = definePlugin({
         hidePrompt: false,
         promptPlacement: 'bottom',
         autoFocusPrompt: true,
+        suggestionLabels: true,
         fullScreenTopOffset: 0,
     },
     displayName: 'Chat',

package/lib/loop/presets.d.ts

@@ -54,6 +54,12 @@ export type LoopPresetOptions = {
      * does not scroll the reader into the middle of the page.
      */
     autoFocusPrompt?: boolean;
+    /**
+     * Whether the openers show as labels by the composer. True by default; the
+     * composer's suggestions menu offers them either way. See
+     * `ChatPluginConfig.suggestionLabels`.
+     */
+    suggestionLabels?: boolean;
     /**
      * Pixels to reserve at the top of the workspace when it goes full screen,
      * for a host's own fixed header. Passed through to the chat plugin — see

package/lib/loop/presets.js

@@ -52,7 +52,7 @@ import { LoopPageLayoutPlugin } from './plugins/page-layout';
  * be installed or signed into, and the switches a demonstration wants are off.
  */
 export function loopPlugins(options = {}) {
-    const { serverUrl, target = 'browser', defaultEditor = 'notebook', showViewSelector = true, hideChatHeader = false, chatHeaderButtons = false, promptPlacement, autoFocusPrompt = true, fullScreenTopOffset = 0, showAgentVariants = false, agentSummary = true, teamId, teamPicker = true, pageLayout = false, pageLayoutTurnPanel = 'below', pageLayoutPrompt = 'docked', pageLayoutPromptAnchor = 'top', pageLayoutSize, pageLayoutTurnPanelFooter = 'full', localAgent, localAgentSpec, floatingPrompt = false, editorSelector = false, editors = true, graph = false, commandPalette = false, pluginsPanel = false, windowFrame = false, firstPromptHook, } = options;
+    const { serverUrl, target = 'browser', defaultEditor = 'notebook', showViewSelector = true, hideChatHeader = false, chatHeaderButtons = false, promptPlacement, autoFocusPrompt = true, suggestionLabels = true, fullScreenTopOffset = 0, showAgentVariants = false, agentSummary = true, teamId, teamPicker = true, pageLayout = false, pageLayoutTurnPanel = 'below', pageLayoutPrompt = 'docked', pageLayoutPromptAnchor = 'top', pageLayoutSize, pageLayoutTurnPanelFooter = 'full', localAgent, localAgentSpec, floatingPrompt = false, editorSelector = false, editors = true, graph = false, commandPalette = false, pluginsPanel = false, windowFrame = false, firstPromptHook, } = options;
     return [
         // The chat owns the editor beside it, so which one opens is its
         // configuration rather than the workspace's.
@@ -66,6 +66,7 @@ export function loopPlugins(options = {}) {
             headerButtons: { newChat: chatHeaderButtons, clear: chatHeaderButtons },
             promptPlacement: floatingPrompt ? 'floating' : promptPlacement,
             autoFocusPrompt,
+            suggestionLabels,
             fullScreenTopOffset,
         }),
         // The composer and the title bar are plugins of their own: the chat

package/lib/loop/shell/LoopWorkspace.d.ts

@@ -103,6 +103,20 @@ export type LoopWorkspaceProps = {
      * through `LoopSlots.header`.
      */
     headerActions?: ReactNode;
+    /**
+     * Where the header's controls go, when not in a row of their own.
+     *
+     * A host that already draws a bar above the workspace — a window's title
+     * bar, a frame with its own tabs — hands over an element in it, and the
+     * controls the header would have carried (the host's `headerActions`, every
+     * plugin's `LoopSlots.header` contribution, the view switcher) are rendered
+     * there instead, and the workspace draws no header row. They stay inside
+     * the workspace's React tree, so they keep their context and their state.
+     *
+     * `null` while the host's element is not mounted yet: nothing is rendered,
+     * and no row is drawn in its place.
+     */
+    headerContainer?: HTMLElement | null;
 };
 /** Build the platform for a set of plugins. */
 export declare function buildLoopReactor(extensions: PluginRef[]): ReactorPlatform;

package/lib/loop/shell/LoopWorkspace.js

@@ -1,5 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { Box } from '@primer/react';
 import { buildReactorFromPlugins, onView, } from '@datalayer/reactor';
 import { ReactorSlot, ReactorViewHost, useContributions, useReactorEvent, useSlotComponents, useReactor, } from '@datalayer/reactor/react';
@@ -11,21 +12,21 @@ export function buildLoopReactor(extensions) {
     return buildReactorFromPlugins(extensions);
 }
 export function LoopWorkspace(props) {
-    const { serverUrl, agentId, conversationId, model, sandbox = { state: 'idle' }, extensions = [], reactor: providedReactor, manageReactor = true, initialViewType, onSend, layout = 'page', showViewSelector = true, showHeader = true, chatHeaderActions, headerActions, } = props;
+    const { serverUrl, agentId, conversationId, model, sandbox = { state: 'idle' }, extensions = [], reactor: providedReactor, manageReactor = true, initialViewType, onSend, layout = 'page', showViewSelector = true, showHeader = true, chatHeaderActions, headerActions, headerContainer, } = props;
     // Building the platform is a one-time act: rebuilding it on every render
     // would restart every plugin.
     const reactor = useMemo(() => providedReactor ?? buildLoopReactor(extensions), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [providedReactor]);
     useReactor(reactor, { autoStart: manageReactor });
-    return (_jsx(WorkspaceBody, { serverUrl: serverUrl, agentId: agentId, conversationId: conversationId, model: model, initialSandbox: sandbox, initialViewType: initialViewType, onSend: onSend, layout: layout, showViewSelector: showViewSelector, showHeader: showHeader, chatHeaderActions: chatHeaderActions, headerActions: headerActions }));
+    return (_jsx(WorkspaceBody, { serverUrl: serverUrl, agentId: agentId, conversationId: conversationId, model: model, initialSandbox: sandbox, initialViewType: initialViewType, onSend: onSend, layout: layout, showViewSelector: showViewSelector, showHeader: showHeader, chatHeaderActions: chatHeaderActions, headerActions: headerActions, headerContainer: headerContainer }));
 }
 /**
  * Split from `LoopWorkspace` so the hooks below run with the platform already
  * registered — `useContributions` needs a reactor in the store, and `useReactor`
  * registers it during the parent's render.
  */
-function WorkspaceBody({ serverUrl, agentId: initialAgentId, conversationId, model, initialSandbox, initialViewType, onSend, layout = 'page', showViewSelector = true, showHeader = true, chatHeaderActions, headerActions, }) {
+function WorkspaceBody({ serverUrl, agentId: initialAgentId, conversationId, model, initialSandbox, initialViewType, onSend, layout = 'page', showViewSelector = true, showHeader = true, chatHeaderActions, headerActions, headerContainer, }) {
     /*
      * Which agent the session is talking to.
      *
@@ -146,6 +147,12 @@ function WorkspaceBody({ serverUrl, agentId: initialAgentId, conversationId, mod
     // activates whatever was waiting for it. A plugin that declares neither is
     // untouched, so this costs nothing until somebody uses it.
     useReactorEvent(effectiveViewType ? onView(effectiveViewType) : undefined);
+    /*
+     * The header's controls: the host's first, then the plugins', then the
+     * view switcher on the trailing edge. Drawn in the header row, or in the
+     * host's own bar when it handed one over (`headerContainer`).
+     */
+    const headerControls = (_jsxs(_Fragment, { children: [headerActions, _jsx(ReactorSlot, { slot: LoopSlots.header, props: { workspace } }), showViewSelector ? (_jsx(ViewSwitcher, { views: views, workspace: workspace, compact: compact })) : null] }));
     return (_jsxs(Box
     /*
       Marked so a plugin inside can find the workspace it is part of.
@@ -169,7 +176,14 @@ function WorkspaceBody({ serverUrl, agentId: initialAgentId, conversationId, mod
             position: 'relative',
             bg: 'canvas.default',
             color: 'fg.default',
-        }, children: [showHeader ? (_jsxs(Box, { as: "header", sx: {
+        }, children: [showHeader && headerContainer
+                ? createPortal(_jsx(Box, { sx: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        flexWrap: 'wrap',
+                        gap: 2,
+                    }, children: headerControls }), headerContainer)
+                : null, showHeader && headerContainer === undefined ? (_jsx(Box, { as: "header", sx: {
                     display: 'flex',
                     alignItems: 'center',
                     // In a column there is no room for a row: the header wraps rather
@@ -191,7 +205,7 @@ function WorkspaceBody({ serverUrl, agentId: initialAgentId, conversationId, mod
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
                     flex: '0 0 auto',
-                }, children: [headerActions, _jsx(ReactorSlot, { slot: LoopSlots.header, props: { workspace } }), showViewSelector ? (_jsx(ViewSwitcher, { views: views, workspace: workspace, compact: compact })) : null] })) : null, _jsxs(Box, { sx: { flex: '1 1 auto', minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: {
+                }, children: headerControls })) : null, _jsxs(Box, { sx: { flex: '1 1 auto', minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: {
                             flex: '1 1 auto',
                             minWidth: 0,
                             minHeight: 0,

package/lib/loop/shell/index.d.ts

@@ -6,5 +6,5 @@
 export { LoopWorkspace, buildLoopReactor, type LoopWorkspaceProps, } from './LoopWorkspace';
 export { ViewSwitcher, type ViewSwitcherProps } from './ViewSwitcher';
 export { PluginToggles, type PluginTogglesProps } from './PluginToggles';
-export { useWorkspaceFullScreen, type WorkspaceFullScreen, } from './useWorkspaceFullScreen';
+export { fullScreenNode, useWorkspaceFullScreen, type WorkspaceFullScreen, } from './useWorkspaceFullScreen';
 export { WorkspaceFullScreenAction } from './WorkspaceFullScreenAction';

package/lib/loop/shell/index.js

@@ -10,5 +10,5 @@
 export { LoopWorkspace, buildLoopReactor, } from './LoopWorkspace';
 export { ViewSwitcher } from './ViewSwitcher';
 export { PluginToggles } from './PluginToggles';
-export { useWorkspaceFullScreen, } from './useWorkspaceFullScreen';
+export { fullScreenNode, useWorkspaceFullScreen, } from './useWorkspaceFullScreen';
 export { WorkspaceFullScreenAction } from './WorkspaceFullScreenAction';

package/lib/loop/shell/useWorkspaceFullScreen.d.ts

@@ -79,15 +79,28 @@ export type WorkspaceFullScreenOptions = {
      */
     topOffset?: number | string;
 };
+/**
+ * What full screen promotes, found from the control that asked.
+ *
+ * The workspace (`[data-loop-workspace]`) — unless a host marked something
+ * around it with `data-loop-fullscreen-root`. A host that draws its own bar
+ * above the workspace and has the header's controls rendered in it
+ * (`LoopWorkspace`'s `headerContainer`) marks the element holding both: the
+ * controls are then outside the workspace, and promoting the workspace alone
+ * would leave them — the one that leaves full screen included — under the
+ * overlay. The anchor itself when there is neither.
+ */
+export declare function fullScreenNode(anchor: HTMLElement | null): HTMLElement | null;
 /**
  * Full-screen state and the toggle, anchored by any element inside the
  * workspace.
  *
  * The element promoted is the whole workspace — the nearest
- * `[data-loop-workspace]` above the anchor — so the header's controls come
- * along instead of being left on the page underneath. With no workspace
- * around it, the anchor's own element is promoted, which is what a view
- * mounted without a shell would want.
+ * `[data-loop-workspace]` above the anchor, or the host's
+ * `[data-loop-fullscreen-root]` around it (see `fullScreenNode`) — so the
+ * header's controls come along instead of being left on the page underneath.
+ * With neither around it, the anchor's own element is promoted, which is what
+ * a view mounted without a shell would want.
  */
 export declare function useWorkspaceFullScreen(anchorRef: RefObject<HTMLElement | null>, options?: WorkspaceFullScreenOptions): WorkspaceFullScreen;
 export default useWorkspaceFullScreen;

package/lib/loop/shell/useWorkspaceFullScreen.js

@@ -21,15 +21,32 @@ export function resolveTopOffset(offset) {
         ? Math.max(0, Math.round(element.getBoundingClientRect().bottom))
         : 0;
 }
+/**
+ * What full screen promotes, found from the control that asked.
+ *
+ * The workspace (`[data-loop-workspace]`) — unless a host marked something
+ * around it with `data-loop-fullscreen-root`. A host that draws its own bar
+ * above the workspace and has the header's controls rendered in it
+ * (`LoopWorkspace`'s `headerContainer`) marks the element holding both: the
+ * controls are then outside the workspace, and promoting the workspace alone
+ * would leave them — the one that leaves full screen included — under the
+ * overlay. The anchor itself when there is neither.
+ */
+export function fullScreenNode(anchor) {
+    return (anchor?.closest('[data-loop-fullscreen-root]') ??
+        anchor?.closest('[data-loop-workspace]') ??
+        anchor);
+}
 /**
  * Full-screen state and the toggle, anchored by any element inside the
  * workspace.
  *
  * The element promoted is the whole workspace — the nearest
- * `[data-loop-workspace]` above the anchor — so the header's controls come
- * along instead of being left on the page underneath. With no workspace
- * around it, the anchor's own element is promoted, which is what a view
- * mounted without a shell would want.
+ * `[data-loop-workspace]` above the anchor, or the host's
+ * `[data-loop-fullscreen-root]` around it (see `fullScreenNode`) — so the
+ * header's controls come along instead of being left on the page underneath.
+ * With neither around it, the anchor's own element is promoted, which is what
+ * a view mounted without a shell would want.
  */
 export function useWorkspaceFullScreen(anchorRef, options = {}) {
     const { forceOverlay = false, paintOverlay = false, topOffset = 0 } = options;
@@ -66,7 +83,7 @@ export function useWorkspaceFullScreen(anchorRef, options = {}) {
          * runs — so at full screen a reader would lose the two controls most
          * worth having room for.
          */
-        const node = anchorRef.current?.closest('[data-loop-workspace]') ?? anchorRef.current;
+        const node = fullScreenNode(anchorRef.current);
         if (fullScreen) {
             if (usingApi.current && document.fullscreenElement) {
                 void document.exitFullscreen();
@@ -116,7 +133,7 @@ export function useWorkspaceFullScreen(anchorRef, options = {}) {
         if (!paintOverlay || !fullScreen || usingApi.current) {
             return undefined;
         }
-        const node = anchorRef.current?.closest('[data-loop-workspace]') ?? anchorRef.current;
+        const node = fullScreenNode(anchorRef.current);
         if (!node) {
             return undefined;
         }

package/lib/specs/agents/agents.d.ts

@@ -22,6 +22,7 @@ export declare const EXAMPLE_ANALYZE_EXCEL_SPREADSHEET_AGENTSPEC_0_0_1: Agentspe
 export declare const EXAMPLE_BACKEND_TOOL_RENDERING_AGENTSPEC_0_0_1: Agentspec;
 export declare const EXAMPLE_BUILD_NOTEBOOK_WITH_ONE_PROMPT_AGENTSPEC_0_0_1: Agentspec;
 export declare const EXAMPLE_CHECKPOINTS_AGENTSPEC_0_0_1: Agentspec;
+export declare const EXAMPLE_CLOUDFLARE_AGENTSPEC_0_0_1: Agentspec;
 export declare const EXAMPLE_CODE_SANDBOX_AGENTSPEC_0_0_1: Agentspec;
 export declare const EXAMPLE_CODEMODE_AGENTSPEC_0_0_1: Agentspec;
 export declare const EXAMPLE_COMPACTION_AGENTSPEC_0_0_1: Agentspec;