@datalayer/agent-runtimes 1.0.19 → 1.0.20

package/lib/examples/NotebookAgentSidebarExample.d.ts

@@ -1,6 +1,6 @@
 import { ServiceManager } from '@jupyterlab/services';
 /**
- * Agent Runtime Notebook Sidebar Example with Simple integration
+ * Agent Runtime Notebook Chat  Sidebar Example with Simple integration
  */
 interface ChatJupyterNotebookExampleProps {
     serviceManager?: ServiceManager.IManager;

package/lib/examples/NotebookAgentSidebarExample.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Distributed under the terms of the Modified BSD License.
  */
 /**
- * Agent Runtime Notebook Example - Next generation chat with Jupyter Notebook.
+ * Agent Runtime Notebook Example - Chat with Jupyter Notebook.
  *
  * This example demonstrates using the chat component with:
  * - Jupyter Notebook integration
@@ -14,7 +14,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  *
  * To run this example:
  * 1. Start the agent-runtimes server: `npm run start:ag-ui`
- * 2. Create a .env file with VITE_BASE_URL if not using defaults
+ * 2. Optionally set `VITE_DATALAYER_AGENT_RUNTIMES_URL` (and
+ *    `VITE_DATALAYER_RUNTIMES_URL` for cloud target) when overriding defaults.
  *
  * @module examples/NotebookAgentSidebarExample
  */
@@ -130,8 +131,8 @@ export function AgentRuntimeNotebookExampleInner({ serviceManager, }) {
                                 p: 3,
                                 borderBottom: '1px solid',
                                 borderColor: 'border.default',
-                                bg: 'canvas.subtle',
-                            }, children: [_jsx("h1", { style: { margin: 0, fontSize: '1.5rem' }, children: "Agent Runtime Notebook Sidebar Example" }), _jsx("p", { style: { margin: '8px 0 0', color: 'var(--fgColor-muted)' }, children: "Next generation chat with Jupyter Notebook integration" })] }), _jsx(Box, { sx: {
+                                bg: 'canvas.default',
+                            }, children: [_jsx("h1", { style: { margin: 0, fontSize: '1.5rem' }, children: "Agent Runtime Notebook Chat Sidebar Example" }), _jsx("p", { style: { margin: '8px 0 0', color: 'var(--fgColor-muted)' }, children: "Chat with Jupyter Notebook integration" })] }), _jsx(Box, { sx: {
                                 flex: 1,
                                 display: 'flex',
                                 overflow: 'hidden',

package/lib/examples/NotebookCollaborationExample.js

@@ -78,7 +78,7 @@ const NotebookCollaborationExample = (props) => {
                                 borderRadius: 2,
                             }, children: [_jsx(Box, { sx: {
                                         p: 2,
-                                        bg: 'canvas.subtle',
+                                        bg: 'canvas.default',
                                         borderBottom: '1px solid',
                                         borderColor: 'border.default',
                                         fontWeight: 'bold',
@@ -89,7 +89,7 @@ const NotebookCollaborationExample = (props) => {
                                 borderRadius: 2,
                             }, children: [_jsx(Box, { sx: {
                                         p: 2,
-                                        bg: 'canvas.subtle',
+                                        bg: 'canvas.default',
                                         borderBottom: '1px solid',
                                         borderColor: 'border.default',
                                         fontWeight: 'bold',
@@ -97,6 +97,6 @@ const NotebookCollaborationExample = (props) => {
                         border: '1px solid',
                         borderColor: 'border.default',
                         borderRadius: 2,
-                    }, children: serviceManager ? (_jsx(Notebook, { id: NOTEBOOK_ID, height: "calc(100vh - 200px)", nbformat: nbformat, readonly: readonly, serviceManager: serviceManager, startDefaultKernel: true, collaborationProvider: collaborationProvider })) : (_jsx(Box, { sx: { p: 4, textAlign: 'center' }, children: "Loading ServiceManager..." })) })), _jsxs(Box, { sx: { mt: 2, fontSize: 1, color: 'fg.subtle' }, children: [_jsx("p", { children: "This example demonstrates how to use Datalayer services with Notebook:" }), _jsxs("ul", { children: [_jsxs("li", { children: [_jsx("strong", { children: "DatalayerServiceManager:" }), " Connects to Datalayer infrastructure for kernel management"] }), _jsxs("li", { children: [_jsx("strong", { children: "DatalayerCollaborationProvider:" }), " Enables real-time collaboration"] }), _jsx("li", { children: "Both require Datalayer credentials (datalayerUrl and token)" }), _jsx("li", { children: "Pass them directly to the base Notebook component" }), _jsx("li", { children: "No wrapper components needed - just create the services and pass them as props" }), _jsx("li", { children: "This shows the explicit, composable pattern for Datalayer integration" })] })] })] }) }));
+                    }, children: serviceManager ? (_jsx(Notebook, { id: NOTEBOOK_ID, height: "calc(100vh - 200px)", nbformat: nbformat, readonly: readonly, serviceManager: serviceManager, startDefaultKernel: true, collaborationProvider: collaborationProvider })) : (_jsx(Box, { sx: { p: 4, textAlign: 'center' }, children: "Loading ServiceManager..." })) })), _jsxs(Box, { sx: { mt: 2, fontSize: 1, color: 'fg.subtle' }, children: [_jsx(Box, { as: "p", sx: { m: 0, mb: 2 }, children: "This example demonstrates how to use Datalayer services with Notebook:" }), _jsxs(Box, { as: "ul", sx: { m: 0, pl: 3, '& li': { mb: 1 } }, children: [_jsxs("li", { children: [_jsx("strong", { children: "DatalayerServiceManager:" }), " Connects to Datalayer infrastructure for kernel management"] }), _jsxs("li", { children: [_jsx("strong", { children: "DatalayerCollaborationProvider:" }), " Enables real-time collaboration"] }), _jsx("li", { children: "Both require Datalayer credentials (datalayerUrl and token)" }), _jsx("li", { children: "Pass them directly to the base Notebook component" }), _jsx("li", { children: "No wrapper components needed - just create the services and pass them as props" }), _jsx("li", { children: "This shows the explicit, composable pattern for Datalayer integration" })] })] })] }) }));
 };
 export default NotebookCollaborationExample;

package/lib/examples/NotebookExample.js

@@ -18,8 +18,8 @@ export const JupyterNotebookExample = (props) => {
     const { serviceManager } = props;
     const extensions = useMemo(() => [new CellSidebarExtension({ factory: CellSidebarButton })], []);
     if (!serviceManager) {
-        return (_jsxs(Box, { as: "h1", children: ["A Jupyter Notebook", _jsx("div", { children: "Loading..." })] }));
+        return (_jsxs(Box, { as: "h1", children: ["Notebook Example", _jsx("div", { children: "Loading..." })] }));
     }
-    return (_jsxs(ThemedJupyterProvider, { children: [_jsx(Box, { as: "h1", children: "A Jupyter Notebook" }), _jsx(Notebook, { id: NOTEBOOK_ID, nbformat: nbformatExample, serviceManager: serviceManager, startDefaultKernel: true, extensions: extensions, Toolbar: NotebookToolbar })] }));
+    return (_jsxs(ThemedJupyterProvider, { children: [_jsx(Box, { as: "h1", children: "Notebook Example" }), _jsx(Notebook, { id: NOTEBOOK_ID, nbformat: nbformatExample, serviceManager: serviceManager, startDefaultKernel: true, extensions: extensions, Toolbar: NotebookToolbar })] }));
 };
 export default JupyterNotebookExample;

package/lib/examples/components/ExampleWrapper.js

@@ -32,6 +32,11 @@ export const ExampleWrapper = ({ children, }) => {
             overflow: 'hidden',
             display: 'flex',
             flexDirection: 'column',
+            fontFamily: 'var(--fontStack-sansSerif, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif)',
+            lineHeight: 1.5,
+            '& h1, & h2, & h3, & h4, & h5, & h6, & p, & li, & span, & label, & button, & input, & textarea, & select': {
+                fontFamily: 'inherit',
+            },
             // Generic constraint: every example's root child fills the wrapper
             // exactly and cannot exceed it. This neutralises stray `100vh`/
             // `calc(100vh - Npx)` heights inside individual examples so the

package/lib/examples/components/Header.js

@@ -141,7 +141,7 @@ export const Header = ({ activeSession, agentName, agentDescription, agentStatus
                     border: '1px solid',
                     borderColor: 'border.default',
                     borderRadius: 2,
-                    bg: 'canvas.subtle',
+                    bg: 'canvas.default',
                 }, children: [_jsxs(Box, { sx: {
                             display: 'flex',
                             justifyContent: 'space-between',
@@ -204,7 +204,7 @@ export const Header = ({ activeSession, agentName, agentDescription, agentStatus
                     border: '1px solid',
                     borderColor: 'border.default',
                     borderRadius: 2,
-                    bg: 'canvas.subtle',
+                    bg: 'canvas.default',
                 }, children: [_jsx(Text, { sx: {
                             fontSize: 1,
                             fontWeight: 'bold',

package/lib/examples/components/HeaderControls.js

@@ -20,5 +20,5 @@ export const HeaderControls = ({ onToggleContextTree, }) => {
             '&:hover': {
                 opacity: 0.8,
             },
-        }, onClick: onToggleContextTree, children: _jsx(Box, { sx: { width: '120px', height: '30px' }, children: _jsx(Sparklines, { data: sparklineData, width: 120, height: 30, children: _jsx(SparklinesLine, { color: "#0969da", style: { strokeWidth: '2' } }) }) }) }));
+        }, onClick: onToggleContextTree, children: _jsx(Box, { sx: { width: '120px', height: '30px' }, children: _jsx(Sparklines, { data: sparklineData, width: 120, height: 30, children: _jsx(SparklinesLine, { color: "var(--fgColor-accent, #16A085)", style: { strokeWidth: '2' } }) }) }) }));
 };

package/lib/examples/components/LexicalEditor.js

@@ -104,5 +104,5 @@ export const LexicalEditor = ({ content = INITIAL_CONTENT, serviceManager, extra
             padding: 3,
             backgroundColor: 'canvas.default',
             minHeight: '600px',
-        }, children: _jsx(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: extraItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), children] }) }) }) }));
+        }, children: _jsx(LexicalConfigProvider, { lexicalId: LEXICAL_ID, serviceManager: serviceManager, children: _jsx(LexicalComposer, { initialConfig: editorConfig, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(RichTextPlugin, { contentEditable: _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), ErrorBoundary: LexicalErrorBoundary }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(HistoryPlugin, {}), _jsx(AutoFocusPlugin, {}), _jsx(ListPlugin, {}), _jsx(CheckListPlugin, {}), _jsx(LinkPlugin, {}), _jsx(AutoLinkPlugin, {}), _jsx(ListMaxIndentLevelPlugin, { maxDepth: 7 }), _jsx(MarkdownShortcutPlugin, { transformers: TRANSFORMERS }), _jsx(LoadContentPlugin, { content: content }), _jsx(CodeHighlightPlugin, {}), _jsx(ImagesPlugin, { captionsEnabled: false }), _jsx(HorizontalRulePlugin, {}), _jsx(EquationsPlugin, {}), _jsx(YouTubePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { useBaseStyles: false, children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode, extraItems: extraItems }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] })), children] }) }) }) }));
 };

package/lib/examples/components/MainContent.js

@@ -12,7 +12,7 @@ export const MainContent = ({ showWelcomeMessage = true, baseUrl, agentId, enabl
     return (_jsxs(Box, { sx: { height: '100%', overflow: 'auto', padding: 3 }, children: [isConfigured && baseUrl && (_jsx(Box, { sx: {
                     mb: 4,
                     p: 3,
-                    bg: 'canvas.subtle',
+                    bg: 'canvas.default',
                     borderRadius: 2,
                     border: '1px solid',
                     borderColor: 'border.default',

package/lib/examples/components/MockFileBrowser.js

@@ -29,35 +29,35 @@ export const MockFileBrowser = ({ codemode = false, }) => {
                                     }, children: "Documents" }), _jsxs(Box, { sx: { fontSize: 0, mb: 2 }, children: [_jsx(Box, { sx: {
                                                 py: 1,
                                                 cursor: 'pointer',
-                                                '&:hover': { bg: 'canvas.subtle' },
+                                                '&:hover': { bg: 'canvas.default' },
                                             }, children: "\uD83D\uDCC1 notebooks/" }), _jsx(Box, { sx: {
                                                 py: 1,
                                                 pl: 3,
                                                 cursor: 'pointer',
-                                                '&:hover': { bg: 'canvas.subtle' },
+                                                '&:hover': { bg: 'canvas.default' },
                                             }, children: "\uD83D\uDCD3 analysis.ipynb" }), _jsx(Box, { sx: {
                                                 py: 1,
                                                 pl: 3,
                                                 cursor: 'pointer',
-                                                '&:hover': { bg: 'canvas.subtle' },
+                                                '&:hover': { bg: 'canvas.default' },
                                             }, children: "\uD83D\uDCD3 demo.ipynb" }), _jsx(Box, { sx: {
                                                 py: 1,
                                                 cursor: 'pointer',
-                                                '&:hover': { bg: 'canvas.subtle' },
+                                                '&:hover': { bg: 'canvas.default' },
                                             }, children: "\uD83D\uDCC1 data/" }), _jsx(Box, { sx: {
                                                 py: 1,
                                                 pl: 3,
                                                 cursor: 'pointer',
-                                                '&:hover': { bg: 'canvas.subtle' },
+                                                '&:hover': { bg: 'canvas.default' },
                                             }, children: "\uD83D\uDCC4 dataset.csv" }), _jsx(Box, { sx: {
                                                 py: 1,
                                                 cursor: 'pointer',
-                                                '&:hover': { bg: 'canvas.subtle' },
+                                                '&:hover': { bg: 'canvas.default' },
                                             }, children: "\uD83D\uDCC1 models/" }), _jsx(Box, { sx: {
                                                 py: 1,
                                                 pl: 3,
                                                 cursor: 'pointer',
-                                                '&:hover': { bg: 'canvas.subtle' },
+                                                '&:hover': { bg: 'canvas.default' },
                                             }, children: "\uD83D\uDCC4 agent.py" })] }), _jsx(Text, { sx: {
                                         fontSize: 0,
                                         fontWeight: 'semibold',
@@ -67,7 +67,7 @@ export const MockFileBrowser = ({ codemode = false, }) => {
                                     }, children: "Buckets" }), _jsx(Box, { sx: { fontSize: 0 }, children: _jsx(Box, { sx: {
                                             py: 1,
                                             cursor: 'pointer',
-                                            '&:hover': { bg: 'canvas.subtle' },
+                                            '&:hover': { bg: 'canvas.default' },
                                         }, children: "\uD83E\uDEA3 s3://nasa-1" }) })] }), _jsxs(Box, { children: [_jsx(Text, { sx: {
                                         fontSize: 1,
                                         fontWeight: 'semibold',

package/lib/examples/components/TimeTravel.js

@@ -13,7 +13,7 @@ export const TimeTravel = ({ value, onChange, min = 0, max = 100, step = 1, }) =
             border: '1px solid',
             borderColor: 'border.default',
             borderRadius: 2,
-            backgroundColor: 'canvas.subtle',
+            backgroundColor: 'canvas.default',
         }, children: [_jsxs(Box, { sx: {
                     display: 'flex',
                     alignItems: 'center',

package/lib/examples/components/haiku/HaikuDisplay.js

@@ -34,7 +34,7 @@ export function HaikuDisplay({ haikus, title = 'Generated Haikus', }) {
                 border: '2px dashed',
                 borderColor: 'var(--borderColor-muted, #d0d7de)',
                 borderRadius: 12,
-                backgroundColor: 'var(--bgColor-subtle, #f6f8fa)',
+                backgroundColor: 'var(--bgColor-default, #ffffff)',
                 minHeight: 200,
             }, children: [_jsx(Text, { sx: {
                         fontSize: 1,
@@ -96,7 +96,7 @@ export function HaikuDisplay({ haikus, title = 'Generated Haikus', }) {
                         borderRadius: 4,
                         border: 'none',
                         backgroundColor: index === currentIndex
-                            ? 'var(--fgColor-accent, #0969da)'
+                            ? 'var(--fgColor-accent, #16A085)'
                             : 'var(--borderColor-muted, #d0d7de)',
                         cursor: 'pointer',
                         transition: 'all 0.2s ease',

package/lib/examples/example-selector.js

@@ -76,13 +76,14 @@ export const EXAMPLE_ENTRIES = [
     makeEntry('AgUiSharedStateExample', () => import('./AgUiSharedStateExample'), 'AG-UI shared state synchronization example.'),
     makeEntry('AgUiToolsBasedGenUiExample', () => import('./AgUiToolsBasedGenUiExample'), 'AG-UI tool-based generative UI example.'),
     makeEntry('AgentspecsExample', () => import('./AgentspecsExample'), 'Configure and run agents from specs and transports.'),
-    makeEntry('CellSimpleExample', () => import('./CellSimpleExample'), 'Simple Jupyter cell integration example.'),
+    makeEntry('CellExample', () => import('./CellExample'), 'Simple cell example.'),
     makeEntry('ChatCustomExample', () => import('./ChatCustomExample'), 'Custom chat experience composition example.'),
     makeEntry('ChatExample', () => import('./ChatExample'), 'Baseline chat integration example.'),
     makeEntry('ChatStandaloneExample', () => import('./ChatStandaloneExample'), 'Standalone chat component usage example.'),
     makeEntry('CopilotKitLexicalExample', () => import('./CopilotKitLexicalExample'), 'CopilotKit integration with Lexical editor.'),
     makeEntry('CopilotKitNotebookExample', () => import('./CopilotKitNotebookExample'), 'CopilotKit integration with notebook workflows.'),
     makeEntry('AgentCheckpointsExample', () => import('./AgentCheckpointsExample'), 'Checkpoint and resume lifecycle for agents.'),
+    makeEntry('AgentCompactionExample', () => import('./AgentCompactionExample'), 'Set a context token budget and watch history compaction summarize older messages, with live from/to token and timing details.', ['example', 'agent', 'compaction', 'context', 'tokens']),
     makeEntry('AgentCodemodeExample', () => import('./AgentCodemodeExample'), 'Code mode execution and tool orchestration example.'),
     makeEntry('AgentCodeSandboxesExample', () => import('./AgentCodeSandboxesExample'), 'Launch sandbox-variant agent specs and compare code execution across backends.', ['example', 'agent', 'sandbox', 'codemode']),
     makeEntry('AgentEvalsExample', () => import('./AgentEvalsExample'), 'Evaluation workflows for agent outputs.'),
@@ -95,9 +96,9 @@ export const EXAMPLE_ENTRIES = [
     makeEntry('AgentSkillsExample', () => import('./AgentSkillsExample'), 'Skills discovery, execution, and monitoring example.'),
     makeEntry('AgentMCPExample', () => import('./AgentMCPExample'), 'MCP servers and toolset integration example.'),
     makeEntry('AgentOtelExample', () => import('./AgentOtelExample'), 'OpenTelemetry instrumentation and traces example.'),
-    makeEntry('AgentSandboxExample', () => import('./AgentSandboxExample'), 'Sandbox execution variants and context controls.'),
+    makeEntry('AgentCodeSandboxExample', () => import('./AgentCodeSandboxExample'), 'Sandbox execution variants and context controls.'),
     makeEntry('AgentMonitoringExample', () => import('./AgentMonitoringExample'), 'Runtime monitoring and live metrics example.'),
-    makeEntry('AgentSubagentsExample', () => import('./AgentSubagentsExample'), 'Multi-agent delegation with subagents-pydantic-ai.'),
+    makeEntry('AgentSubagentsExample', () => import('./AgentSubagentsExample'), 'Multi-agent delegation with the in-repo subagents capability.'),
     makeEntry('AgentNotificationsExample', () => import('./AgentNotificationsExample'), 'Notifications and event routing example.'),
     makeEntry('AgentOutputsExample', () => import('./AgentOutputsExample'), 'Structured outputs and rendering patterns.'),
     makeEntry('AgentParametersExample', () => import('./AgentParametersExample'), 'Launch-time parameterized agent creation with JSON schema.'),

package/lib/examples/hooks/useExampleAgentRuntime.js

@@ -42,13 +42,22 @@ export function useExampleAgentRuntime(options) {
         });
     }, [isCloud, connectToRuntime, agentName, environmentName, baseUrl]);
     useEffect(() => {
+        // Agent status and code sandbox status are both reported by the
+        // agent-runtimes API server. For local runs that server is `baseUrl`
+        // (e.g. http://localhost:8765); the Jupyter sandbox lives elsewhere
+        // (`runtime.agentBaseUrl`). For cloud runs the per-agent runtime URL
+        // (`runtime.agentBaseUrl`) hosts the API, so prefer it when present.
+        const agentApiBaseUrl = isCloud
+            ? runtime?.agentBaseUrl || baseUrl
+            : baseUrl;
         agentSummaryStore.getState().setActive({
             exampleId,
             agentName,
             agentId: runtime?.agentId,
             specId,
             location,
-            baseUrl: runtime?.agentBaseUrl || baseUrl,
+            baseUrl: agentApiBaseUrl,
+            sandboxBaseUrl: runtime?.agentBaseUrl,
             status,
             isReady,
             error: error || undefined,
@@ -64,6 +73,7 @@ export function useExampleAgentRuntime(options) {
         specId,
         location,
         baseUrl,
+        isCloud,
         status,
         isReady,
         error,

package/lib/examples/hooks/useExampleAgentRuntimes.d.ts

@@ -0,0 +1,7 @@
+import { type UseAgentOptions, type UseAgentReturn } from '../../hooks/useAgentRuntimes';
+/**
+ * High-level examples hook that applies the shared Local/Cloud runtime target
+ * defaults while preserving explicit overrides from individual examples.
+ */
+export declare function useExampleAgentRuntimes(options: UseAgentOptions): UseAgentReturn;
+export default useExampleAgentRuntimes;

package/lib/examples/hooks/useExampleAgentRuntimes.js

@@ -0,0 +1,82 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useAgentRuntimes, } from '../../hooks/useAgentRuntimes';
+import { useEffect, useMemo, useRef } from 'react';
+import { useRuntimeTargetStore } from '../utils/runtimeTargetStore';
+import { useExampleAgentRuntimesUrl } from '../utils/useExampleAgentRuntimesUrl';
+/**
+ * High-level examples hook that applies the shared Local/Cloud runtime target
+ * defaults while preserving explicit overrides from individual examples.
+ */
+export function useExampleAgentRuntimes(options) {
+    const runtimeTarget = useRuntimeTargetStore(state => state.target);
+    const localRuntimeBaseUrl = useExampleAgentRuntimesUrl();
+    const runtimeCreationTarget = options.runtimeCreationTarget ??
+        (runtimeTarget === 'cloud' ? 'backend-services' : 'local-agent-runtimes');
+    const runtimeCreationBaseUrl = options.runtimeCreationBaseUrl ??
+        (runtimeCreationTarget === 'local-agent-runtimes'
+            ? localRuntimeBaseUrl
+            : undefined);
+    const autoStart = options.autoStart ?? runtimeCreationTarget === 'backend-services';
+    const result = useAgentRuntimes({
+        ...options,
+        runtimeCreationTarget,
+        runtimeCreationBaseUrl,
+        autoStart,
+    });
+    const bootstrapAttemptKeyRef = useRef(null);
+    const fallbackPodName = useMemo(() => {
+        const configuredName = typeof options.agentConfig?.name === 'string'
+            ? options.agentConfig.name.trim()
+            : '';
+        if (configuredName) {
+            return configuredName;
+        }
+        const configuredSpecId = typeof options.agentSpecId === 'string' ? options.agentSpecId.trim() : '';
+        if (configuredSpecId) {
+            return configuredSpecId;
+        }
+        return 'example-agent-runtime';
+    }, [options.agentConfig?.name, options.agentSpecId]);
+    useEffect(() => {
+        if (result.runtime || result.isLaunching) {
+            return;
+        }
+        const bootstrapKey = `${runtimeTarget}:${runtimeCreationTarget}:${fallbackPodName}`;
+        if (bootstrapAttemptKeyRef.current === bootstrapKey) {
+            return;
+        }
+        if (runtimeCreationTarget === 'local-agent-runtimes') {
+            bootstrapAttemptKeyRef.current = bootstrapKey;
+            result.connectToRuntime({
+                podName: fallbackPodName,
+                environmentName: 'local-agent-runtimes',
+                jupyterBaseUrl: runtimeCreationBaseUrl,
+            });
+            return;
+        }
+        if (runtimeCreationTarget === 'backend-services' &&
+            !autoStart &&
+            options.agentSpecId) {
+            bootstrapAttemptKeyRef.current = bootstrapKey;
+            void result.launchRuntime().catch(() => {
+                bootstrapAttemptKeyRef.current = null;
+            });
+        }
+    }, [
+        runtimeTarget,
+        runtimeCreationTarget,
+        runtimeCreationBaseUrl,
+        fallbackPodName,
+        autoStart,
+        options.agentSpecId,
+        result.runtime,
+        result.isLaunching,
+        result.connectToRuntime,
+        result.launchRuntime,
+    ]);
+    return result;
+}
+export default useExampleAgentRuntimes;

package/lib/examples/index.d.ts

@@ -10,13 +10,14 @@ export { default as AgUiHaikuGenUiExample } from './AgUiHaikuGenUiExample';
 export { default as AgUiHumanInTheLoopExample } from './AgUiHumanInTheLoopExample';
 export { default as AgUiSharedStateExample } from './AgUiSharedStateExample';
 export { default as AgUiToolsBasedGenUiExample } from './AgUiToolsBasedGenUiExample';
-export { default as CellExample } from './CellSimpleExample';
+export { default as CellExample } from './CellExample';
 export { default as ChatStandaloneExample } from './ChatStandaloneExample';
 export { default as CopilotKitLexicalExample } from './CopilotKitLexicalExample';
 export { default as CopilotKitNotebookExample } from './CopilotKitNotebookExample';
 export { default as CustomExample } from './ChatCustomExample';
 export { default as NotebookCollaborationExample } from './NotebookCollaborationExample';
 export { default as AgentCheckpointsExample } from './AgentCheckpointsExample';
+export { default as AgentCompactionExample } from './AgentCompactionExample';
 export { default as AgentCodemodeExample } from './AgentCodemodeExample';
 export { default as AgentCodeSandboxesExample } from './AgentCodeSandboxesExample';
 export { default as AgentEvalsExample } from './AgentEvalsExample';

package/lib/examples/index.js

@@ -14,13 +14,14 @@ export { default as AgUiHaikuGenUiExample } from './AgUiHaikuGenUiExample';
 export { default as AgUiHumanInTheLoopExample } from './AgUiHumanInTheLoopExample';
 export { default as AgUiSharedStateExample } from './AgUiSharedStateExample';
 export { default as AgUiToolsBasedGenUiExample } from './AgUiToolsBasedGenUiExample';
-export { default as CellExample } from './CellSimpleExample';
+export { default as CellExample } from './CellExample';
 export { default as ChatStandaloneExample } from './ChatStandaloneExample';
 export { default as CopilotKitLexicalExample } from './CopilotKitLexicalExample';
 export { default as CopilotKitNotebookExample } from './CopilotKitNotebookExample';
 export { default as CustomExample } from './ChatCustomExample';
 export { default as NotebookCollaborationExample } from './NotebookCollaborationExample';
 export { default as AgentCheckpointsExample } from './AgentCheckpointsExample';
+export { default as AgentCompactionExample } from './AgentCompactionExample';
 export { default as AgentCodemodeExample } from './AgentCodemodeExample';
 export { default as AgentCodeSandboxesExample } from './AgentCodeSandboxesExample';
 export { default as AgentEvalsExample } from './AgentEvalsExample';