@datalayer/agent-runtimes 1.0.18 → 1.0.20

package/lib/components/runtimes/RuntimePickerBase.js

@@ -23,57 +23,92 @@ const RUNTIME_DISPLAY_NAME_MAX_LENGTH = 25;
  */
 export function RuntimePickerBase(props) {
     const { disabled, display, filterRuntime, multiServiceManager, postActions, preActions, preference, runtimeDesc, sessionContext, setRuntimeDesc, translator, variant, } = props;
-    const [groupedRuntimeDescs, _] = useState(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterRuntime, variant));
+    const [groupedRuntimeDescs, setGroupedRuntimeDescs] = useState(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterRuntime, variant));
     const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
     const [defaultSet, setDefaultSet] = useState(false);
+    const [remoteModelsReady, setRemoteModelsReady] = useState(!multiServiceManager.remote);
     // Trick because overflow is an unknown prop of ActionMenu.Overlay.
     const overlayProps = {
         maxHeight: 'large',
         width: (variant === 'cell' ? 'small' : 'auto'),
     };
-    /*
-    // TODO this effect generates refresh of the react components which discards any change in the selection.
     useEffect(() => {
-      const updateGroupedRuntimeDescs = () => {
-        setGroupedKernelDescs(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterKernel, variant));
-      };
-      multiServiceManager.browser?.kernels.runningChanged.connect(updateGroupedRuntimeDescs);
-      multiServiceManager.browser?.kernelspecs.specsChanged.connect(updateGroupedRuntimeDescs);
-      multiServiceManager.browser?.sessions.runningChanged.connect(updateGroupedRuntimeDescs);
-      multiServiceManager.local.kernels.runningChanged.connect(updateGroupedRuntimeDescs);
-      multiServiceManager.local.kernelspecs.specsChanged.connect(updateGroupedRuntimeDescs);
-      multiServiceManager.local.sessions.runningChanged.connect(updateGroupedRuntimeDescs);
-      multiServiceManager.remote?.kernels.changed.connect(updateGroupedRuntimeDescs);
-      multiServiceManager.remote?.environments.changed.connect(updateGroupedRuntimeDescs);
-      // multiServiceManager.remote?.sessions.runningChanged.connect(updateOptions);
-      return () => {
-        multiServiceManager.browser?.kernels.runningChanged.disconnect(updateGroupedRuntimeDescs);
-        multiServiceManager.browser?.kernelspecs.specsChanged.disconnect(updateGroupedRuntimeDescs);
-        multiServiceManager.browser?.sessions.runningChanged.disconnect(updateGroupedRuntimeDescs);
-        multiServiceManager.local.kernels.runningChanged.disconnect(updateGroupedRuntimeDescs);
-        multiServiceManager.local.kernelspecs.specsChanged.disconnect(updateGroupedRuntimeDescs);
-        multiServiceManager.local.sessions.runningChanged.disconnect(updateGroupedRuntimeDescs);
-        multiServiceManager.remote?.kernels.changed.disconnect(updateGroupedRuntimeDescs);
-        multiServiceManager.remote?.environments.changed.disconnect(updateGroupedRuntimeDescs);
-        // multiServiceManager.remote?.sessions.runningChanged.disconnect(updateOptions);
-      };
-    }, [multiServiceManager, preference, translator, filterKernel, variant]);
-    */
+        let disposed = false;
+        const updateGroupedRuntimeDescs = () => {
+            if (disposed) {
+                return;
+            }
+            setGroupedRuntimeDescs(getGroupedRuntimeDescs(multiServiceManager, preference?.id, translator, filterRuntime, variant));
+        };
+        const refreshRuntimeModels = multiServiceManager.remote?.runtimesManager.refreshRuntimeModels?.();
+        if (refreshRuntimeModels) {
+            refreshRuntimeModels
+                .catch(reason => {
+                console.error('Failed to resolve remote runtimes for the runtime picker.', reason);
+            })
+                .finally(() => {
+                if (disposed) {
+                    return;
+                }
+                updateGroupedRuntimeDescs();
+                setRemoteModelsReady(true);
+            });
+        }
+        else {
+            setRemoteModelsReady(true);
+        }
+        // Recompute immediately in case a runtime changed between the initial
+        // render and connecting the manager signals.
+        updateGroupedRuntimeDescs();
+        multiServiceManager.browser?.kernels.runningChanged.connect(updateGroupedRuntimeDescs);
+        multiServiceManager.browser?.kernelspecs.specsChanged.connect(updateGroupedRuntimeDescs);
+        multiServiceManager.browser?.sessions.runningChanged.connect(updateGroupedRuntimeDescs);
+        multiServiceManager.local.kernels.runningChanged.connect(updateGroupedRuntimeDescs);
+        multiServiceManager.local.kernelspecs.specsChanged.connect(updateGroupedRuntimeDescs);
+        multiServiceManager.local.sessions.runningChanged.connect(updateGroupedRuntimeDescs);
+        multiServiceManager.remote?.runtimesManager.changed.connect(updateGroupedRuntimeDescs);
+        multiServiceManager.remote?.environments.changed.connect(updateGroupedRuntimeDescs);
+        return () => {
+            disposed = true;
+            multiServiceManager.browser?.kernels.runningChanged.disconnect(updateGroupedRuntimeDescs);
+            multiServiceManager.browser?.kernelspecs.specsChanged.disconnect(updateGroupedRuntimeDescs);
+            multiServiceManager.browser?.sessions.runningChanged.disconnect(updateGroupedRuntimeDescs);
+            multiServiceManager.local.kernels.runningChanged.disconnect(updateGroupedRuntimeDescs);
+            multiServiceManager.local.kernelspecs.specsChanged.disconnect(updateGroupedRuntimeDescs);
+            multiServiceManager.local.sessions.runningChanged.disconnect(updateGroupedRuntimeDescs);
+            multiServiceManager.remote?.runtimesManager.changed.disconnect(updateGroupedRuntimeDescs);
+            multiServiceManager.remote?.environments.changed.disconnect(updateGroupedRuntimeDescs);
+        };
+    }, [multiServiceManager, preference?.id, translator, filterRuntime, variant]);
     useEffect(() => {
+        if (defaultSet) {
+            return;
+        }
         if (sessionContext && groupedRuntimeDescs) {
             const kernelId = sessionContext.session?.kernel?.id;
             if (kernelId) {
+                let matched = false;
                 Object.entries(groupedRuntimeDescs).forEach(([group, runtimeDescs]) => {
                     runtimeDescs.forEach(runtimeDesc => {
                         if (runtimeDesc.kernelId === kernelId) {
+                            matched = true;
                             setRuntimeDesc(runtimeDesc);
                         }
                     });
                 });
+                if (!matched && !remoteModelsReady) {
+                    return;
+                }
             }
         }
         setDefaultSet(true);
-    }, [groupedRuntimeDescs]);
+    }, [
+        defaultSet,
+        groupedRuntimeDescs,
+        remoteModelsReady,
+        sessionContext,
+        setRuntimeDesc,
+    ]);
     // For cell using submenu instead of group would be nice unfortunately the feature
     // is not yet implemented in the component there has been a not-great demo story.
     // https://github.com/primer/react/pull/3585

package/lib/components/runtimes/RuntimePickerCell.js

@@ -99,6 +99,6 @@ export function RuntimePickerCell(props) {
     const datalayerMeta = model.getMetadata('datalayer') ?? {};
     return (_jsxs(_Fragment, { children: [_jsx(RuntimePickerBase, { display: "menu", filterRuntime: filterKernel, preference: preference, multiServiceManager: multiServiceManager, runtimeDesc: datalayerMeta.kernel ? datalayerMeta.kernel : undefined, setRuntimeDesc: setSelectedRuntimeDesc, variant: 'cell', preActions: _jsxs(ActionList.Item, { disabled: !multiServiceManager.remote, onSelect: setCell, selected: hasCellRuntime, title: !multiServiceManager.remote
                         ? 'You are not connected with Datalayer.'
-                        : 'Assign a new temporary Runtime on each Cell execution.', children: [_jsx(ActionList.LeadingVisual, { children: _jsx(CloudUploadIcon, {}) }), trans.__('Assign a Cell Runtime')] }), postActions: token || !logIn ? (_jsxs(_Fragment, { children: [RuntimeSnippetsFacade.supports(preference?.language ?? '') && (_jsx(ActionList.Item, { onSelect: openVariableDialog, disabled: !isForeign, title: trans.__('Define variables to transfer between the document kernel and the cell kernel.'), children: trans.__('Define Cell Variables Transfer') })), !configuration.whiteLabel && (_jsx(ActionList.Item, { onSelect: openSnippetDialog, disabled: snippets.length === 0, title: trans.__('Inject a code snippet at the end of the cell.'), children: trans.__('Inject Code Snippet') }))] })) : (_jsx(ActionList.Item, { onSelect: props.logIn, title: 'Connect to the Runtime provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Connect to the Runtime provider" }) })), translator: translator }), isVariableDialogOpen && (_jsx(RuntimeCellVariablesDialog, { model: model, onClose: closeVariableDialog, preference: preference, sessionContext: sessionContext, translator: translator })), isSnippetDialogOpen && (_jsx(SnippetDialog, { language: language, model: model, snippets: snippets, onClose: closeSnippetDialog, markdownParser: markdownParser, sanitizer: sanitizer })), isKernelDialogOpen && (_jsx(RuntimeLauncherDialog, { manager: multiServiceManager.remote, onSubmit: onStartRemote, startRuntime: 'defer', submitLabel: "Assign", markdownParser: markdownParser, sanitizer: sanitizer }))] }));
+                        : 'Assign a new temporary Runtime on each Cell execution.', children: [_jsx(ActionList.LeadingVisual, { children: _jsx(CloudUploadIcon, {}) }), trans.__('Assign a Cell Runtime')] }), postActions: token || !logIn ? (_jsxs(_Fragment, { children: [RuntimeSnippetsFacade.supports(preference?.language ?? '') && (_jsx(ActionList.Item, { onSelect: openVariableDialog, disabled: !isForeign, title: trans.__('Define variables to transfer between the document kernel and the cell kernel.'), children: trans.__('Define Cell Variables Transfer') })), !configuration.whiteLabel && (_jsx(ActionList.Item, { onSelect: openSnippetDialog, disabled: snippets.length === 0, title: trans.__('Inject a code snippet at the end of the cell.'), children: trans.__('Inject Code Snippet') }))] })) : (_jsx(ActionList.Item, { onSelect: props.logIn, title: 'Runtime Provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Click to sign in" }) })), translator: translator }), isVariableDialogOpen && (_jsx(RuntimeCellVariablesDialog, { model: model, onClose: closeVariableDialog, preference: preference, sessionContext: sessionContext, translator: translator })), isSnippetDialogOpen && (_jsx(SnippetDialog, { language: language, model: model, snippets: snippets, onClose: closeSnippetDialog, markdownParser: markdownParser, sanitizer: sanitizer })), isKernelDialogOpen && (_jsx(RuntimeLauncherDialog, { manager: multiServiceManager.remote, onSubmit: onStartRemote, startRuntime: 'defer', submitLabel: "Assign", markdownParser: markdownParser, sanitizer: sanitizer }))] }));
 }
 export default RuntimePickerCell;

package/lib/components/runtimes/RuntimePickerNotebook.js

@@ -220,7 +220,7 @@ export function RuntimePickerNotebook(props) {
                     Launch a New Runtime
                   </Button>
                   */
-                    _jsx(_Fragment, {})) : (_jsx(ActionList.Item, { onSelect: props.logIn, title: 'Connect to Runtime provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Connect to the Runtime provider" }) })) }) }), !selectedRuntimeDesc?.kernelId &&
+                    _jsx(_Fragment, {})) : (_jsx(ActionList.Item, { onSelect: props.logIn, title: 'Runtime Provider.', children: _jsx(ExternalTokenSilentLogin, { message: "Click to sign in." }) })) }) }), !selectedRuntimeDesc?.kernelId &&
                 selectedRuntimeDesc?.location === 'remote' && (_jsxs(_Fragment, { children: [_jsx(RuntimeReservationControl, { disabled: outOfCredits || selectedRuntimeDesc?.location !== 'remote', label: 'Time reservation', max: effectiveMaxMinutes, time: timeLimit, onTimeChange: setTimeLimit, error: outOfCredits && maxFromCredits >= 0
                             ? 'You must add credits to your account.'
                             : timeLimit === 0

package/lib/components/runtimes/RuntimeSimplePicker.js

@@ -134,7 +134,7 @@ export function RuntimeSimplePicker(props) {
                                                     setRuntimeLocation('remote');
                                                     assignRuntime({
                                                         runtimeDesc: {
-                                                            name: kernelModel.environment_name,
+                                                            name: kernelModel.environment.name,
                                                             language: '',
                                                             location: 'remote',
                                                             displayName: kernelModel.given_name,
@@ -144,7 +144,8 @@ export function RuntimeSimplePicker(props) {
                                                         },
                                                         runtimeModel: kernelModel,
                                                     });
-                                                }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(ArtifactIcon, { type: "runtime" }) }), kernelModel.given_name, _jsx(ActionList.Description, { variant: "block", children: kernelModel.environment_name })] }, kernelModel.id));
+                                                }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(ArtifactIcon, { type: "runtime" }) }), kernelModel.given_name, _jsx(ActionList.Description, { variant: "block", children: kernelModel.environment.title ||
+                                                            kernelModel.environment.name })] }, kernelModel.id));
                                         })] })), _jsx(ActionList.Divider, {}), _jsxs(ActionList.Group, { children: [_jsxs(ActionList.Item, { selected: false, onSelect: handleLaunchRemoteKernel, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PlusIcon, {}) }), "Launch a new Runtime\u2026"] }), _jsxs(ActionList.Item, { disabled: runtimeLocation !== 'browser', selected: false, onSelect: () => {
                                                 setDialogCause(RuntimeDialogCause.Transfer);
                                             }, title: "Transfer the state of the current Runtime to a new Remote Runtime.", children: [_jsx(ActionList.LeadingVisual, { children: _jsx(UnfoldIcon, {}) }), "Transfer state to a new Runtime\u2026"] })] })] }) })] }), multiServiceManager?.remote && dialogCause > 0 && (_jsx(RuntimeLauncherDialog, { dialogTitle: dialogCause === RuntimeDialogCause.Transfer

package/lib/components/runtimes/RuntimeUtils.js

@@ -64,12 +64,12 @@ export function getGroupedRuntimeDescs(multiServiceManager, kernelId, translator
         .map(runtime => {
         const environment = multiServiceManager
             .remote.environments.get()
-            .find(env => env.name === runtime.environment_name);
+            .find(env => env.name === runtime.environment.name);
         return {
             kernelId: runtime.id,
             name: environment.name,
             language: environment.language,
-            displayName: runtime.given_name ?? environment.title,
+            displayName: environment.title || runtime.given_name || environment.name,
             location: 'remote',
             podName: runtime.pod_name,
             gpu: environment.resources?.['nvidia.com/gpu'],

package/lib/context/GraphFlowChart.js

@@ -14,7 +14,7 @@ import { useMemo } from 'react';
 import ReactECharts from 'echarts-for-react';
 /** Category definitions for ECharts graph. */
 const CATEGORIES = [
-    { name: 'start', itemStyle: { color: '#58a6ff' } },
+    { name: 'start', itemStyle: { color: '#16A085' } },
     { name: 'step', itemStyle: { color: '#3fb950' } },
     { name: 'end', itemStyle: { color: '#f85149' } },
     { name: 'end_or_continue', itemStyle: { color: '#d29922' } },

package/lib/context/TokenUsageChart.js

@@ -568,7 +568,7 @@ export function TokenUsageChart({ serviceName, agentId, runtimeId, apiKey, datal
                     ]
                     : [[initialTimestampMsRef.current, 0]],
             })),
-            color: ['#2da44e', '#0969da', '#8250df', '#bf8700', '#cf222e'],
+            color: ['#2da44e', '#16A085', '#0ea5a5', '#bf8700', '#cf222e'],
         };
     }, [turns]);
     return (_jsx(ReactECharts, { option: option, style: { height, width: '100%' }, opts: { renderer: 'canvas' }, notMerge: true, lazyUpdate: true }));

package/lib/context/TurnGraphChart.js

@@ -40,8 +40,8 @@ import { Text } from '@primer/react';
 //   - reducer    → alias for the reducer half of a join
 //   - start/end  → graph entry / exit markers
 const NODE_COLORS = {
-    root: '#58a6ff',
-    start: '#58a6ff',
+    root: '#16A085',
+    start: '#16A085',
     step: '#3fb950',
     end: '#f85149',
     end_or_continue: '#d29922',

package/lib/examples/A2UiAgentExample.js

@@ -312,7 +312,7 @@ const A2UiAgentExample = () => {
                         borderRadius: 2,
                         px: 3,
                         py: 2,
-                        bg: 'canvas.subtle',
+                        bg: 'canvas.default',
                         display: 'flex',
                         alignItems: 'center',
                         gap: 2,
@@ -355,7 +355,7 @@ const A2UiAgentExample = () => {
                                             py: 2,
                                             borderBottom: '1px solid',
                                             borderColor: 'border.default',
-                                            bg: 'canvas.subtle',
+                                            bg: 'canvas.default',
                                             display: 'flex',
                                             justifyContent: 'space-between',
                                             alignItems: 'center',
@@ -411,7 +411,7 @@ const A2UiAgentExample = () => {
                                                 m: 0,
                                                 p: 2,
                                                 borderRadius: 2,
-                                                bg: 'canvas.subtle',
+                                                bg: 'canvas.default',
                                                 border: '1px solid',
                                                 borderColor: 'border.default',
                                                 fontSize: 0,
@@ -437,6 +437,6 @@ const A2UiAgentExample = () => {
                                 justifyContent: 'center',
                                 height: '100%',
                                 gap: 3,
-                            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Creating A2UI agent..." })] })) : chatError || !agentId ? (_jsx(Box, { sx: { p: 3 }, children: _jsxs(Text, { sx: { color: 'danger.fg' }, children: ["Failed to initialize chat:", ' ', chatError || 'No agent id returned'] }) })) : (_jsx(Chat, { protocol: "ag-ui", baseUrl: baseUrl, agentId: agentId, title: "A2UI Agent", description: "Generate interactive A2UI surfaces", placeholder: "Describe the UI you want...", showHeader: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${baseUrl}/api/v1/history`, suggestions: SUGGESTIONS, submitOnSuggestionClick: true, pendingPrompt: pendingPrompt, renderToolResult: renderToolResult })) })] }) }) }));
+                            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Creating A2UI agent..." })] })) : chatError || !agentId ? (_jsx(Box, { sx: { p: 3 }, children: _jsxs(Text, { sx: { color: 'danger.fg' }, children: ["Failed to initialize chat:", ' ', chatError || 'No agent id returned'] }) })) : (_jsx(Chat, { protocol: "ag-ui", baseUrl: baseUrl, agentId: agentId, title: "A2UI Agent", description: "Generate interactive A2UI surfaces", placeholder: "Describe the UI you want...", showHeader: true, kernelIndicatorPlacement: "right", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${baseUrl}/api/v1/history`, suggestions: SUGGESTIONS, submitOnSuggestionClick: true, pendingPrompt: pendingPrompt, renderToolResult: renderToolResult })) })] }) }) }));
 };
 export default A2UiAgentExample;

package/lib/examples/A2UiComponentsGalleryExample.js

@@ -817,7 +817,7 @@ function GalleryContent({ onAction, }) {
                     borderColor: 'border.default',
                     borderRadius: 2,
                     p: 3,
-                    backgroundColor: 'canvas.subtle',
+                    backgroundColor: 'canvas.default',
                     display: 'flex',
                     flexDirection: 'column',
                     gap: 3,
@@ -845,14 +845,14 @@ const A2UiComponentsGalleryExample = () => {
                             py: 3,
                             borderBottom: '1px solid',
                             borderColor: 'border.default',
-                            backgroundColor: 'canvas.subtle',
+                            backgroundColor: 'canvas.default',
                         }, children: [_jsx(Text, { as: "h1", sx: { fontSize: 3, fontWeight: 'bold' }, children: "\uD83C\uDFA8 A2UI Components Gallery" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Showcases the A2UI basic catalog rendered live via MessageProcessor and A2uiSurface." })] }), _jsx(GalleryContent, { onAction: handleAction }), _jsx(Box, { sx: {
                             borderTop: '1px solid',
                             borderColor: 'border.default',
                             p: 3,
                             fontFamily: 'mono',
                             fontSize: 0,
-                            backgroundColor: 'canvas.subtle',
+                            backgroundColor: 'canvas.default',
                             whiteSpace: 'pre-wrap',
                             maxHeight: 220,
                             overflow: 'auto',

package/lib/examples/A2UiContactCardExample.js

@@ -138,7 +138,7 @@ function ContactCardContent({ onAction, }) {
                         borderColor: 'border.default',
                         borderRadius: 2,
                         p: 3,
-                        backgroundColor: 'canvas.subtle',
+                        backgroundColor: 'canvas.default',
                     }, children: _jsx(A2uiSurfaceComposed, { surface: surface }) }, surface.id))) })] }));
 }
 const A2UiContactCardExample = () => {
@@ -158,7 +158,7 @@ const A2UiContactCardExample = () => {
                             py: 3,
                             borderBottom: '1px solid',
                             borderColor: 'border.default',
-                            backgroundColor: 'canvas.subtle',
+                            backgroundColor: 'canvas.default',
                         }, children: [_jsx(Text, { as: "h1", sx: { fontSize: 3, fontWeight: 'bold' }, children: "\uD83D\uDC64 A2UI Contact Card" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Uses MessageProcessor + A2uiSurface with native A2UI protocol messages." })] }), _jsxs(Box, { sx: {
                             display: 'grid',
                             gridTemplateColumns: ['1fr', '2fr 1fr'],
@@ -169,7 +169,7 @@ const A2UiContactCardExample = () => {
                                     borderColor: 'border.default',
                                     borderRadius: 2,
                                     p: 3,
-                                    backgroundColor: 'canvas.subtle',
+                                    backgroundColor: 'canvas.default',
                                     fontFamily: 'mono',
                                     fontSize: 0,
                                     whiteSpace: 'pre-wrap',

package/lib/examples/A2UiRestaurantExample.js

@@ -152,7 +152,7 @@ const A2UiRestaurantExample = () => {
                             p: 3,
                             borderBottom: '1px solid',
                             borderColor: 'border.default',
-                            backgroundColor: 'canvas.subtle',
+                            backgroundColor: 'canvas.default',
                         }, children: [_jsx(Text, { as: "h1", sx: { fontSize: '1.25rem', fontWeight: 'bold' }, children: "\uD83E\uDD16 A2UI Restaurant Example" }), _jsx(Text, { sx: { fontSize: '0.875rem', color: 'fg.muted' }, children: "Uses MessageProcessor and A2uiSurface with native A2UI backend messages." })] }), _jsxs(Box, { sx: { flex: 1, p: 3 }, children: [!hasData && !isLoading && !error && (_jsx(RestaurantSearch, { onSearch: handleSearch, isLoading: isLoading })), isLoading && (_jsxs(Box, { sx: {
                                     display: 'flex',
                                     flexDirection: 'column',
@@ -180,7 +180,7 @@ const A2UiRestaurantExample = () => {
                             p: 2,
                             borderTop: '1px solid',
                             borderColor: 'border.default',
-                            backgroundColor: 'canvas.subtle',
+                            backgroundColor: 'canvas.default',
                             textAlign: 'center',
                         }, children: _jsxs(Text, { sx: { fontSize: '0.75rem', color: 'fg.muted' }, children: ["Backend: ", a2uiRestaurantEndpoint] }) })] }) }) }));
 };

package/lib/examples/A2UiViewerExample.js

@@ -345,7 +345,7 @@ function ViewerContent({ onAction, }) {
                     borderColor: 'border.default',
                     borderRadius: 2,
                     p: 3,
-                    backgroundColor: 'canvas.subtle',
+                    backgroundColor: 'canvas.default',
                     display: 'flex',
                     flexDirection: 'column',
                     gap: 3,
@@ -368,14 +368,14 @@ const A2UiViewerExample = () => {
                             py: 3,
                             borderBottom: '1px solid',
                             borderColor: 'border.default',
-                            backgroundColor: 'canvas.subtle',
+                            backgroundColor: 'canvas.default',
                         }, children: [_jsx(Text, { as: "h1", sx: { fontSize: 3, fontWeight: 'bold' }, children: "\uD83D\uDD0D A2UI Viewer" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Standalone viewer scenes powered by MessageProcessor and A2uiSurface." })] }), _jsx(ViewerContent, { onAction: handleAction }), _jsx(Box, { sx: {
                             borderTop: '1px solid',
                             borderColor: 'border.default',
                             p: 3,
                             fontFamily: 'mono',
                             fontSize: 0,
-                            backgroundColor: 'canvas.subtle',
+                            backgroundColor: 'canvas.default',
                             whiteSpace: 'pre-wrap',
                             maxHeight: 180,
                             overflow: 'auto',

package/lib/examples/AgUiAgenticExample.js

@@ -78,7 +78,7 @@ const AgUiAgenticExample = () => {
                                 borderColor: 'danger.muted',
                             }, children: _jsxs(Text, { sx: { color: 'danger.fg', fontSize: 1 }, children: ["Failed to initialize managed agent runtime: ", error] }) })), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
@@ -89,11 +89,11 @@ const AgUiAgenticExample = () => {
                                     }, children: "Try asking: \"hi\" or \"what can you help with?\"" })] }), _jsxs(Box, { sx: {
                                 marginTop: 4,
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
-                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: "This example demonstrates the AG-UI (Agent User Interface) protocol for streaming AI interactions. The agent uses SSE (Server-Sent Events) to stream responses and tool calls in real-time." }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: [_jsx("strong", { children: "Protocol Events:" }), " TEXT_MESSAGE_START, TEXT_MESSAGE_CONTENT, TEXT_MESSAGE_END, TOOL_CALL_START, TOOL_CALL_END"] })] })] }), agenticChatEndpoint && (_jsx(ChatFloating, { protocol: "ag-ui", endpoint: agenticChatEndpoint, title: "Agentic Chat", description: "Chat with a managed AG-UI agent runtime.", position: "bottom-right", defaultOpen: true, suggestions: [
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: "This example demonstrates the AG-UI (Agent User Interface) protocol for streaming AI interactions. The agent uses SSE (Server-Sent Events) to stream responses and tool calls in real-time." }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: [_jsx("strong", { children: "Protocol Events:" }), " TEXT_MESSAGE_START, TEXT_MESSAGE_CONTENT, TEXT_MESSAGE_END, TOOL_CALL_START, TOOL_CALL_END"] })] })] }), agenticChatEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: agenticChatEndpoint, title: "Agentic Chat", description: "Chat with a managed AG-UI agent runtime.", position: "bottom-right", defaultOpen: true, suggestions: [
                         {
                             title: 'What time is it?',
                             message: 'What is the current time?',

package/lib/examples/AgUiBackendToolRenderingExample.js

@@ -91,7 +91,7 @@ const AgUiBackendToolRenderingExample = () => {
                                 marginBottom: 4,
                             }, children: ["Ask about the weather anywhere in the world. Weather cards are rendered ", _jsx("strong", { children: "inline in the chat" }), " with dynamic theming!"] }), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
@@ -105,7 +105,7 @@ const AgUiBackendToolRenderingExample = () => {
                                                 marginTop: 1,
                                                 fontSize: 1,
                                                 color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "\"What's the weather in New York?\"" }), _jsx("li", { children: "\"Weather in London and Paris\"" }), _jsx("li", { children: "\"Is it sunny in Sydney?\"" }), _jsx("li", { children: "\"How's the weather in Tokyo today?\"" })] })] })] })] }), backendToolRenderingEndpoint && (_jsx(ChatFloating, { protocol: "ag-ui", endpoint: backendToolRenderingEndpoint, title: "Weather Assistant", description: "Ask me about the weather anywhere in the world!", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, renderToolResult: renderToolResult, suggestions: [
+                                            }, children: [_jsx("li", { children: "\"What's the weather in New York?\"" }), _jsx("li", { children: "\"Weather in London and Paris\"" }), _jsx("li", { children: "\"Is it sunny in Sydney?\"" }), _jsx("li", { children: "\"How's the weather in Tokyo today?\"" })] })] })] })] }), backendToolRenderingEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: backendToolRenderingEndpoint, title: "Weather Assistant", description: "Ask me about the weather anywhere in the world!", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, renderToolResult: renderToolResult, suggestions: [
                         {
                             title: 'Paris weather',
                             message: "What's the weather like in Paris?",

package/lib/examples/AgUiHaikuGenUiExample.js

@@ -129,14 +129,14 @@ const AgUiHaikuGenUiExample = () => {
                                 marginBottom: 4,
                             }, children: "Ask the assistant to generate haiku poetry. Haikus appear both in the chat and in the display area below!" }), _jsx(Box, { sx: {
                                 padding: 5,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
                                 marginBottom: 4,
                             }, children: _jsx(HaikuDisplayWithRef, { ref: displayRef, title: "Your Haiku Collection" }) }), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
@@ -150,7 +150,7 @@ const AgUiHaikuGenUiExample = () => {
                                                 marginTop: 1,
                                                 fontSize: 1,
                                                 color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "\"Write me a haiku about cherry blossoms\"" }), _jsx("li", { children: "\"Create a haiku about coding late at night\"" }), _jsx("li", { children: "\"Generate a haiku about the ocean\"" }), _jsx("li", { children: "\"Write a haiku about autumn leaves\"" })] })] })] })] }), _jsx(ChatFloating, { protocol: "ag-ui", endpoint: haikuGenUiEndpoint, launching: !haikuGenUiEndpoint, launchingMessage: "Starting the haiku agent runtime\u2026", title: "Haiku Generator", description: "Ask me to write haiku poetry about any topic!", position: "bottom-right", brandColor: brandColor, defaultOpen: true, renderToolResult: renderToolResult, hideMessagesAfterToolUI: true, suggestions: [
+                                            }, children: [_jsx("li", { children: "\"Write me a haiku about cherry blossoms\"" }), _jsx("li", { children: "\"Create a haiku about coding late at night\"" }), _jsx("li", { children: "\"Generate a haiku about the ocean\"" }), _jsx("li", { children: "\"Write a haiku about autumn leaves\"" })] })] })] })] }), _jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: haikuGenUiEndpoint, launching: !haikuGenUiEndpoint, launchingMessage: "Starting the haiku agent runtime\u2026", title: "Haiku Generator", description: "Ask me to write haiku poetry about any topic!", position: "bottom-right", brandColor: brandColor, defaultOpen: true, renderToolResult: renderToolResult, hideMessagesAfterToolUI: true, suggestions: [
                         {
                             title: 'Cherry blossoms',
                             message: 'Write me a haiku about cherry blossoms in spring.',

package/lib/examples/AgUiHumanInTheLoopExample.js

@@ -100,7 +100,7 @@ const StepsFeedback = ({ args, status, respond, result }) => {
     return (_jsxs(Box, { "data-testid": "select-steps", sx: {
             width: '100%',
             padding: 3,
-            backgroundColor: 'canvas.subtle',
+            backgroundColor: 'canvas.default',
             borderRadius: 2,
             border: '1px solid',
             borderColor: 'border.default',
@@ -211,18 +211,18 @@ const AgUiHumanInTheLoopExample = () => {
                                 marginBottom: 4,
                             }, children: "This example demonstrates human review workflows. Ask the AI to create a plan, then use the Reject/Confirm buttons to respond." }), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
                                 marginBottom: 4,
                             }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "About This Example" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted' }, children: "This demonstrates the \"Human in the Loop\" pattern where AI-generated task plans require human approval before proceeding. The pattern follows CopilotKit's useHumanInTheLoop hook." }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: _jsx("strong", { children: "How it works:" }) }), _jsxs(Box, { as: "ul", sx: { fontSize: 1, color: 'fg.muted', mt: 1, pl: 3 }, children: [_jsx("li", { children: "The agent calls the generate_task_steps tool" }), _jsx("li", { children: "A custom UI renders with toggleable steps" }), _jsx("li", { children: "User clicks Reject or Confirm to send response back" }), _jsx("li", { children: "The UI updates to show Rejected or Accepted state" })] }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', marginTop: 2 }, children: [_jsx("strong", { children: "Try:" }), " \"Create a plan to learn machine learning\" or \"Plan a trip to Paris in 5 steps\""] })] }), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'accent.subtle',
+                                backgroundColor: 'neutral.muted',
                                 borderRadius: 2,
                                 border: '1px solid',
-                                borderColor: 'accent.muted',
-                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "Key Concept: respond() Callback" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.default' }, children: ["The ", _jsx("code", { children: "renderToolResult" }), " function receives a", ' ', _jsx("code", { children: "respond" }), " callback when the tool status is \"executing\". Calling ", _jsxs("code", { children: ["respond(", '{ accepted: true, steps: [...] }', ")"] }), ' ', "sends the user's decision back to the agent, completing the human-in-the-loop interaction."] })] })] }), humanInTheLoopEndpoint && (_jsx(ChatFloating, { protocol: "ag-ui", endpoint: humanInTheLoopEndpoint, title: "Task Planner", description: "I can help you plan tasks. I'll generate steps for your review.", position: "bottom-right", brandColor: brandColor, renderToolResult: renderTaskStepsTool, hideMessagesAfterToolUI: true, suggestions: [
+                                borderColor: 'border.default',
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "Key Concept: respond() Callback" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.default' }, children: ["The ", _jsx("code", { children: "renderToolResult" }), " function receives a", ' ', _jsx("code", { children: "respond" }), " callback when the tool status is \"executing\". Calling ", _jsxs("code", { children: ["respond(", '{ accepted: true, steps: [...] }', ")"] }), ' ', "sends the user's decision back to the agent, completing the human-in-the-loop interaction."] })] })] }), humanInTheLoopEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: humanInTheLoopEndpoint, title: "Task Planner", description: "I can help you plan tasks. I'll generate steps for your review.", position: "bottom-right", brandColor: brandColor, renderToolResult: renderTaskStepsTool, hideMessagesAfterToolUI: true, suggestions: [
                         {
                             title: 'Plan a trip',
                             message: 'Plan a weekend trip to Paris.',

package/lib/examples/AgUiSharedStateExample.js

@@ -163,7 +163,7 @@ const AgUiSharedStateExample = () => {
                                                 color: 'fg.muted',
                                             }, children: "Build a recipe together with AI. Both you and the agent can edit the recipe." })] }), _jsx(Button, { variant: "danger", onClick: handleClear, children: "Clear Recipe" })] }), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
@@ -175,7 +175,7 @@ const AgUiSharedStateExample = () => {
                                         marginBottom: 3,
                                     }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold' }, children: "Recipe Builder" }), _jsx(Label, { variant: "accent", children: "Shared State" })] }), _jsx(RecipeDisplay, { recipe: recipe, onUpdate: handleLocalUpdate })] }), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
@@ -184,7 +184,7 @@ const AgUiSharedStateExample = () => {
                                                 marginTop: 1,
                                                 fontSize: 1,
                                                 color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "\"Create a recipe for chocolate chip cookies\"" }), _jsx("li", { children: "\"Add butter and sugar to the ingredients\"" }), _jsx("li", { children: "\"Update the prep time to 20 minutes\"" }), _jsx("li", { children: "\"Suggest 3 more ingredients for my recipe\"" })] })] })] })] }), sharedStateEndpoint && (_jsx(ChatFloating, { protocol: "ag-ui", endpoint: sharedStateEndpoint, title: "Recipe Assistant", description: "Let's build a recipe together! I can add ingredients, instructions, and more.", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, suggestions: [
+                                            }, children: [_jsx("li", { children: "\"Create a recipe for chocolate chip cookies\"" }), _jsx("li", { children: "\"Add butter and sugar to the ingredients\"" }), _jsx("li", { children: "\"Update the prep time to 20 minutes\"" }), _jsx("li", { children: "\"Suggest 3 more ingredients for my recipe\"" })] })] })] })] }), sharedStateEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: sharedStateEndpoint, title: "Recipe Assistant", description: "Let's build a recipe together! I can add ingredients, instructions, and more.", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, suggestions: [
                         {
                             title: 'Pasta recipe',
                             message: 'Help me create a simple pasta recipe.',

package/lib/examples/AgUiToolsBasedGenUiExample.js

@@ -47,7 +47,7 @@ const PlanStepItem = ({ step, index, onClick, isInteractive = false }) => {
                 : step.status === 'completed'
                     ? 'success.subtle'
                     : isEnabled
-                        ? 'canvas.subtle'
+                        ? 'canvas.default'
                         : 'canvas.default',
             border: '1px solid',
             borderColor: step.status === 'in_progress'
@@ -64,7 +64,9 @@ const PlanStepItem = ({ step, index, onClick, isInteractive = false }) => {
             width: '100%',
             '&:hover': isInteractive
                 ? {
-                    backgroundColor: step.status === 'completed' ? 'success.subtle' : 'canvas.inset',
+                    backgroundColor: step.status === 'completed'
+                        ? 'success.subtle'
+                        : 'canvas.default',
                     borderColor: 'accent.muted',
                 }
                 : {},
@@ -242,7 +244,7 @@ const AgUiToolsBasedGenUiExample = () => {
                                 marginBottom: 4,
                             }, children: "Watch the AI create and update a plan in real-time using STATE_SNAPSHOT and STATE_DELTA events." }), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
@@ -250,7 +252,7 @@ const AgUiToolsBasedGenUiExample = () => {
                                 minHeight: '300px',
                             }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 3 }, children: "Generated Plan" }), _jsx(PlanDisplay, { plan: plan, isInteractive: true, onStepToggle: handleStepToggle, onConfirm: handleConfirm, onReject: handleReject, decision: decision })] }), _jsxs(Box, { sx: {
                                 padding: 4,
-                                backgroundColor: 'canvas.subtle',
+                                backgroundColor: 'canvas.default',
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'border.default',
@@ -259,7 +261,7 @@ const AgUiToolsBasedGenUiExample = () => {
                                                 marginTop: 1,
                                                 fontSize: 1,
                                                 color: 'fg.muted',
-                                            }, children: [_jsx("li", { children: "STATE_SNAPSHOT - Full state replacement" }), _jsx("li", { children: "STATE_DELTA - Incremental JSON Patch updates (RFC 6902)" }), _jsx("li", { children: "TOOL_CALL_START / TOOL_CALL_END - Tool execution tracking" })] })] })] })] }), agenticGenerativeUiEndpoint && (_jsx(ChatFloating, { protocol: "ag-ui", endpoint: agenticGenerativeUiEndpoint, title: "Plan Generator", description: "I can create detailed plans and update them in real-time.", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, suggestions: [
+                                            }, children: [_jsx("li", { children: "STATE_SNAPSHOT - Full state replacement" }), _jsx("li", { children: "STATE_DELTA - Incremental JSON Patch updates (RFC 6902)" }), _jsx("li", { children: "TOOL_CALL_START / TOOL_CALL_END - Tool execution tracking" })] })] })] })] }), agenticGenerativeUiEndpoint && (_jsx(ChatFloating, { kernelIndicatorPlacement: "right", protocol: "ag-ui", endpoint: agenticGenerativeUiEndpoint, title: "Plan Generator", description: "I can create detailed plans and update them in real-time.", position: "bottom-right", brandColor: brandColor, onStateUpdate: handleStateUpdate, suggestions: [
                         {
                             title: 'Project plan',
                             message: 'Create a project plan for building a mobile app.',

package/lib/examples/AgentCheckpointsExample.js

@@ -29,7 +29,8 @@ import { AuthRequiredView, ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { Chat } from '../chat';
-import { useAgentsRuntimes, useAgentRuntimes, useAgentRuntimesQuery, useRefreshAgentRuntimes, } from '../hooks/useAgentRuntimes';
+import { useAgentsRuntimes, useAgentRuntimesQuery, useRefreshAgentRuntimes, } from '../hooks/useAgentRuntimes';
+import { useExampleAgentRuntimes as useAgentRuntimes } from './hooks/useExampleAgentRuntimes';
 import { useAgentLifecycle } from '../hooks/useCheckpoints';
 import { useDeletePausedAgentRuntime } from '../hooks/useCheckpoints';
 import { AGENT_STATUS_COLORS } from '../types/agents';
@@ -189,10 +190,10 @@ const AgentCheckpointsInner = ({ onLogout, }) => {
             id: rt.id,
             podName: rt.pod_name,
             name: rt.name,
-            description: rt.environment_title || rt.environment_name,
+            description: rt.environment.title || rt.environment.name,
             status: rt.status,
             protocol: 'vercel-ai',
-            environmentName: rt.environment_name,
+            environmentName: rt.environment.name,
             jupyterBaseUrl: rt.url,
         }));
     }, [agentRuntimes, runningAgentsOverride]);
@@ -312,7 +313,7 @@ const AgentCheckpointsInner = ({ onLogout, }) => {
                             borderRight: '1px solid',
                             borderColor: 'border.default',
                             overflowY: 'auto',
-                            bg: 'canvas.subtle',
+                            bg: 'canvas.default',
                         }, children: [_jsxs(Box, { sx: {
                                     order: 3,
                                     p: 3,
@@ -435,7 +436,7 @@ const AgentCheckpointsInner = ({ onLogout, }) => {
                                 gap: 3,
                                 px: 3,
                             }, children: [_jsx(AgentIcon, { size: 48 }), _jsx(Heading, { as: "h2", sx: { fontSize: 3 }, children: "Checkpoint Agent" }), _jsxs(Text, { sx: { color: 'fg.muted', textAlign: 'center', maxWidth: 560 }, children: ["Launch a cloud agent runtime with pause/resume checkpointing. The agent will be deployed from the", ' ', _jsx("strong", { children: AGENTSPEC_ID }), " spec."] }), displayError && (_jsx(Flash, { variant: "danger", sx: { maxWidth: 560, width: '100%' }, children: displayError })), _jsx(Button, { variant: "primary", size: "large", leadingVisual: PlayIcon, onClick: handleLaunch, children: "Launch Agent" })] })) : (isReady || runtimeStatus === 'resumed') &&
-                            runtimeStatus !== 'paused' ? (_jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, title: "Monitor Sales KPI Agent", brandIcon: _jsx(AgentIcon, { size: 16 }), placeholder: "Ask about sales KPIs\u2026", description: "Monitor Sales KPI agent with pause/resume checkpointing", showHeader: true, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                            runtimeStatus !== 'paused' ? (_jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, title: "Monitor Sales KPI Agent", brandIcon: _jsx(AgentIcon, { size: 16 }), placeholder: "Ask about sales KPIs\u2026", description: "Monitor Sales KPI agent with pause/resume checkpointing", showHeader: true, kernelIndicatorPlacement: "right", showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
                                 {
                                     title: 'KPIs',
                                     message: "Show me today's sales KPI dashboard",