@datalayer/agent-runtimes 1.0.0 → 1.0.2

package/lib/examples/AgentRuntimeStandaloneExample.js

@@ -18,7 +18,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
 import { Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { DatalayerThemeProvider } from '@datalayer/core';
+import { ThemedProvider } from './stores/themedProvider';
 import { ChatStandalone } from '../components/chat';
 /**
  * Simulated AI responses for demo purposes.
@@ -97,7 +97,7 @@ const AgentRuntimePopupStandaloneExample = () => {
             throw err;
         }
     }, []);
-    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
                 minHeight: '100vh',
                 backgroundColor: 'canvas.default',
                 padding: 4,
@@ -153,6 +153,6 @@ const AgentRuntimePopupStandaloneExample = () => {
                                 borderRadius: 2,
                                 border: '1px solid',
                                 borderColor: 'attention.muted',
-                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "When to Use" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, marginBottom: 2 }, children: ["Use ", _jsx("strong", { children: "ChatStandalone" }), " when:"] }), _jsxs(Box, { as: "ul", sx: { paddingLeft: 3, fontSize: 1 }, children: [_jsx("li", { children: "You have a custom AI backend that does not use AG-UI/ACP" }), _jsx("li", { children: "You want full control over the message handling logic" }), _jsx("li", { children: "You need to integrate with a specific API (OpenAI, etc.)" }), _jsx("li", { children: "You want a quick demo without setting up a backend server" })] }), _jsxs(Text, { as: "p", sx: { fontSize: 1, marginTop: 2 }, children: ["Use ", _jsx("strong", { children: "ChatFloating" }), " instead when:"] }), _jsxs(Box, { as: "ul", sx: { paddingLeft: 3, fontSize: 1 }, children: [_jsx("li", { children: "You have an AG-UI compatible backend" }), _jsx("li", { children: "You need built-in tool rendering support" }), _jsx("li", { children: "You want automatic protocol handling" })] })] })] }), _jsx(ChatStandalone, { title: "Demo Assistant", onSendMessage: handleSendMessage, position: "bottom-right", brandColor: "#7c3aed", enableStreaming: true, emptyStateMessage: "Hi! I'm a demo assistant. Try asking me for the time, a joke, or what I can do!", buttonTooltip: "Chat with Demo Assistant", showPoweredBy: true })] }) }));
+                            }, children: [_jsx(Text, { as: "h2", sx: { fontSize: 2, fontWeight: 'semibold', marginBottom: 2 }, children: "When to Use" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, marginBottom: 2 }, children: ["Use ", _jsx("strong", { children: "ChatStandalone" }), " when:"] }), _jsxs(Box, { as: "ul", sx: { paddingLeft: 3, fontSize: 1 }, children: [_jsx("li", { children: "You have a custom AI backend that does not use AG-UI/ACP" }), _jsx("li", { children: "You want full control over the message handling logic" }), _jsx("li", { children: "You need to integrate with a specific API (OpenAI, etc.)" }), _jsx("li", { children: "You want a quick demo without setting up a backend server" })] }), _jsxs(Text, { as: "p", sx: { fontSize: 1, marginTop: 2 }, children: ["Use ", _jsx("strong", { children: "ChatFloating" }), " instead when:"] }), _jsxs(Box, { as: "ul", sx: { paddingLeft: 3, fontSize: 1 }, children: [_jsx("li", { children: "You have an AG-UI compatible backend" }), _jsx("li", { children: "You need built-in tool rendering support" }), _jsx("li", { children: "You want automatic protocol handling" })] })] })] }), _jsx(ChatStandalone, { title: "Demo Assistant", onSendMessage: handleSendMessage, position: "bottom-right", enableStreaming: true, emptyStateMessage: "Hi! I'm a demo assistant. Try asking me for the time, a joke, or what I can do!", buttonTooltip: "Chat with Demo Assistant", showPoweredBy: true })] }) }));
 };
 export default AgentRuntimePopupStandaloneExample;

package/lib/examples/CopilotKitLexicalExample.js

@@ -47,7 +47,8 @@ import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
 import { CopilotKit, useFrontendTool } from '@copilotkit/react-core';
 import { CopilotSidebar } from '@copilotkit/react-ui';
 import { Box } from '@datalayer/primer-addons';
-import { JupyterReactTheme, useJupyter } from '@datalayer/jupyter-react';
+import { useJupyter } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 import { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, ExcalidrawPlugin, CollapsiblePlugin, AutoLinkPlugin, AutoEmbedPlugin, LexicalConfigProvider, LexicalStatePlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, TableCellResizerPlugin, TablePlugin, } from '@datalayer/jupyter-lexical';
 import { ActionRegistrar, useLexicalToolActions, } from '../tools/adapters/copilotkit/lexicalHooks';
 import { editorConfig } from './lexical/editorConfig';
@@ -146,7 +147,7 @@ const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, ser
                         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(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _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(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(JupyterReactTheme, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] }) }) }) })] }) }));
+                    }, 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(TablePlugin, {}), _jsx(TableCellResizerPlugin, {}), _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(ExcalidrawPlugin, {}), _jsx(CollapsiblePlugin, {}), _jsx(AutoEmbedPlugin, {}), _jsx(JupyterCellPlugin, {}), _jsx(ThemedJupyterProvider, { children: _jsx(SimpleKernelPluginsInner, {}) }), floatingAnchorElem && (_jsxs(_Fragment, { children: [_jsx(DraggableBlockPlugin, { anchorElem: floatingAnchorElem }), _jsx(FloatingTextFormatToolbarPlugin, { anchorElem: floatingAnchorElem, setIsLinkEditMode: setIsLinkEditMode }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] }) }) }) })] }) }));
 });
 function LexicalWithTools({ content, serviceManager, }) {
     // Get all actions for this lexical document

package/lib/examples/CopilotKitNotebookExample.js

@@ -16,7 +16,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import React from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { JupyterReactTheme, Notebook } from '@datalayer/jupyter-react';
+import { Notebook } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 // CopilotKit imports
 import { CopilotKit, useFrontendTool } from '@copilotkit/react-core';
 import { CopilotSidebar } from '@copilotkit/react-ui';
@@ -50,7 +51,7 @@ const NotebookUI = React.memo(function NotebookUI({ serviceManager, }) {
                         borderRadius: 8,
                         padding: 24,
                         backgroundColor: 'var(--bgColor-default)',
-                    }, children: serviceManager ? (_jsx(JupyterReactTheme, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "600px", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { style: { padding: 24 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }) }));
+                    }, children: serviceManager ? (_jsx(ThemedJupyterProvider, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "600px", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { style: { padding: 24 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }) }));
 });
 /**
  * Component to register actions with CopilotKit.

package/lib/examples/DatalayerNotebookExample.js

@@ -7,7 +7,8 @@ import { useState, useEffect, useMemo } from 'react';
 import { Checkbox, FormControl, Heading } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { useCoreStore, createDatalayerServiceManager, DatalayerCollaborationProvider, } from '@datalayer/core';
-import { loadJupyterConfig, JupyterReactTheme, Notebook, } from '@datalayer/jupyter-react';
+import { loadJupyterConfig, Notebook } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 import nbformatExample from './stores/notebooks/NotebookExample1.ipynb.json';
 // This corresponds to the notebook ID in the URL when you open an existing notbook in your library
 const NOTEBOOK_ID = '01JZQRQ35GG871QQCZW9TB1A8J';
@@ -64,7 +65,7 @@ const DatalayerNotebookExample = (props) => {
             token,
         });
     }, [enableCollaboration, configuration]);
-    return (_jsx(JupyterReactTheme, { children: _jsxs(Box, { p: 3, children: [_jsx(Heading, { as: "h2", sx: { mb: 3 }, children: "Datalayer Notebook Collaboration Example" }), _jsx(Box, { sx: { mb: 3 }, children: _jsxs(FormControl, { children: [_jsx(Checkbox, { checked: enableCollaboration, onChange: e => setEnableCollaboration(e.target.checked) }), _jsx(FormControl.Label, { children: "Enable Datalayer Collaboration" })] }) }), (!configuration?.runUrl || !configuration?.token) && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'danger.subtle' }, children: "Warning: Datalayer configuration is missing. Please configure runUrl and token to use DatalayerServiceManager and collaboration features." })), !serviceManager && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'attention.subtle' }, children: "Note: DatalayerServiceManager is not available. Notebook functionality will be limited." })), enableCollaboration ? (_jsxs(Box, { sx: {
+    return (_jsx(ThemedJupyterProvider, { children: _jsxs(Box, { p: 3, children: [_jsx(Heading, { as: "h2", sx: { mb: 3 }, children: "Datalayer Notebook Collaboration Example" }), _jsx(Box, { sx: { mb: 3 }, children: _jsxs(FormControl, { children: [_jsx(Checkbox, { checked: enableCollaboration, onChange: e => setEnableCollaboration(e.target.checked) }), _jsx(FormControl.Label, { children: "Enable Datalayer Collaboration" })] }) }), (!configuration?.runUrl || !configuration?.token) && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'danger.subtle' }, children: "Warning: Datalayer configuration is missing. Please configure runUrl and token to use DatalayerServiceManager and collaboration features." })), !serviceManager && (_jsx(Box, { sx: { mb: 2, p: 2, bg: 'attention.subtle' }, children: "Note: DatalayerServiceManager is not available. Notebook functionality will be limited." })), enableCollaboration ? (_jsxs(Box, { sx: {
                         display: 'flex',
                         gap: 2,
                         flexDirection: 'row',

package/lib/examples/JupyterCellExample.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { JupyterReactTheme, Cell, KernelIndicator, useJupyter, useKernelsStore, useCellsStore, } from '@datalayer/jupyter-react';
+import { Cell, KernelIndicator, useJupyter, useKernelsStore, useCellsStore, } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 import { Button, Label } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 const CELL_ID = 'cell-example-1';
@@ -14,6 +15,6 @@ const JupyterCellExampleContent = () => {
     return (_jsxs(Box, { p: 4, children: [_jsx(Box, { as: "h1", children: "Jupyter Cell Example" }), _jsxs(Box, { children: ["Source: ", cellsStore.getSource(CELL_ID)] }), _jsxs(Box, { children: ["Outputs Count: ", cellsStore.getOutputsCount(CELL_ID)] }), _jsxs(Box, { children: ["Kernel State:", ' ', _jsx(Label, { children: defaultKernel && kernelsStore.getExecutionState(defaultKernel.id) })] }), _jsxs(Box, { children: ["Kernel Phase:", ' ', _jsx(Label, { children: defaultKernel && kernelsStore.getExecutionPhase(defaultKernel.id) })] }), _jsxs(Box, { display: "flex", children: [_jsx(Box, { children: "Kernel Indicator:" }), _jsx(Box, { ml: 3, children: _jsx(KernelIndicator, { kernel: defaultKernel && defaultKernel.connection }) })] }), _jsx(Box, { children: _jsx(Button, { onClick: () => cellsStore.execute(CELL_ID), children: "Run cell" }) }), _jsx(Cell, { source: DEFAULT_SOURCE, id: CELL_ID, kernel: defaultKernel })] }));
 };
 export const JupyterCellExample = (props) => {
-    return (_jsx(JupyterReactTheme, { children: _jsx(JupyterCellExampleContent, {}) }));
+    return (_jsx(ThemedJupyterProvider, { children: _jsx(JupyterCellExampleContent, {}) }));
 };
 export default JupyterCellExample;

package/lib/examples/JupyterNotebookExample.js

@@ -10,12 +10,13 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  */
 import { useMemo } from 'react';
 import { Box } from '@datalayer/primer-addons';
-import { JupyterReactTheme, Notebook, NotebookToolbar, CellSidebarExtension, CellSidebarButton, } from '@datalayer/jupyter-react';
+import { Notebook, NotebookToolbar, CellSidebarExtension, CellSidebarButton, } from '@datalayer/jupyter-react';
+import { ThemedJupyterProvider } from './stores/themedProvider';
 import nbformatExample from './stores/notebooks/NotebookExample1.ipynb.json';
 const NOTEBOOK_ID = 'notebook-example-1';
 export const JupyterNotebookExample = (props) => {
     const { serviceManager } = props;
     const extensions = useMemo(() => [new CellSidebarExtension({ factory: CellSidebarButton })], []);
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { as: "h1", children: "Jupyter Notebook Example" }), serviceManager && (_jsx(JupyterReactTheme, { children: _jsx(Notebook, { id: NOTEBOOK_ID, nbformat: nbformatExample, serviceManager: serviceManager, startDefaultKernel: true, extensions: extensions, Toolbar: NotebookToolbar }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { as: "h1", children: "Jupyter Notebook Example" }), serviceManager && (_jsx(ThemedJupyterProvider, { children: _jsx(Notebook, { id: NOTEBOOK_ID, nbformat: nbformatExample, serviceManager: serviceManager, startDefaultKernel: true, extensions: extensions, Toolbar: NotebookToolbar }) }))] }));
 };
 export default JupyterNotebookExample;

package/lib/examples/main.js

@@ -8,10 +8,15 @@ import { useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { loadJupyterConfig, JupyterReactTheme, createServerSettings, setJupyterServerUrl, setJupyterServerToken, getJupyterServerUrl, getJupyterServerToken, } from '@datalayer/jupyter-react';
 import { ServiceManager } from '@jupyterlab/services';
-import { coreStore, iamStore, createDatalayerServiceManager, DatalayerThemeProvider, } from '@datalayer/core';
+import { DatalayerThemeProvider, themeConfigs, themeVariants, } from '@datalayer/primer-addons';
+import { SegmentedControl } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { MoonIcon, SunIcon, DeviceDesktopIcon } from '@primer/octicons-react';
+import { coreStore, iamStore, createDatalayerServiceManager, } from '@datalayer/core';
 import { useChatStore } from '../components/chat/store';
 import { OAuthCallback } from '../identity';
 import { EXAMPLES } from './example-selector';
+import { useExampleThemeStore } from './stores/themeStore';
 import nbformatExample from './stores/notebooks/NotebookExample1.ipynb.json';
 // Load configurations from DOM
 const loadConfigurations = () => {
@@ -292,39 +297,84 @@ export const ExampleApp = () => {
     if (serviceManager) {
         exampleProps.serviceManager = serviceManager;
     }
-    return (_jsx(DatalayerThemeProvider, { children: _jsxs("div", { style: { width: '100vw', height: '100vh', overflow: 'hidden' }, children: [_jsxs("div", { style: {
+    return (_jsx(ExampleAppThemed, { selectedExample: selectedExample, isChangingExample: isChangingExample, error: error, ExampleComponent: ExampleComponent, exampleProps: exampleProps, onExampleChange: handleExampleChange }));
+};
+/**
+ * Inner shell that reads from the theme store and wires
+ * DatalayerThemeProvider + the header bar with selectors.
+ */
+const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleComponent, exampleProps, onExampleChange, }) => {
+    const { colorMode, theme: themeVariant } = useExampleThemeStore();
+    const cfg = themeConfigs[themeVariant];
+    return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: cfg.primerTheme, themeStyles: cfg.themeStyles, children: _jsxs(Box, { sx: {
+                width: '100vw',
+                height: '100vh',
+                overflow: 'hidden',
+                bg: 'canvas.default',
+                color: 'fg.default',
+            }, children: [_jsxs(Box, { sx: {
                         position: 'fixed',
                         top: 0,
                         left: 0,
                         right: 0,
                         zIndex: 100,
-                        padding: '10px 20px',
-                        background: '#f0f0f0',
-                        borderBottom: '1px solid #ccc',
+                        px: 3,
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'space-between',
-                        gap: '15px',
-                        fontSize: '14px',
-                        fontFamily: 'system-ui, -apple-system, sans-serif',
+                        gap: 3,
                         height: '50px',
-                        boxSizing: 'border-box',
-                    }, children: [_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '15px' }, children: [_jsx("label", { style: { fontWeight: 500, color: '#333' }, children: "Select Example:" }), _jsx("select", { value: selectedExample, onChange: e => handleExampleChange(e.target.value), disabled: isChangingExample, style: {
-                                        padding: '6px 12px',
-                                        fontSize: '14px',
-                                        border: '1px solid #ccc',
-                                        borderRadius: '4px',
-                                        background: 'white',
+                        bg: 'canvas.subtle',
+                        borderBottom: '1px solid',
+                        borderColor: 'border.default',
+                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { as: "select", value: selectedExample, onChange: (e) => onExampleChange(e.target.value), disabled: isChangingExample, sx: {
+                                        px: 2,
+                                        py: '6px',
+                                        fontSize: 1,
+                                        fontFamily: 'mono',
+                                        border: '1px solid',
+                                        borderColor: 'border.default',
+                                        borderRadius: 2,
+                                        bg: 'canvas.default',
+                                        color: 'fg.default',
                                         cursor: isChangingExample ? 'not-allowed' : 'pointer',
-                                        fontFamily: 'monospace',
                                         minWidth: '250px',
+                                        outline: 'none',
+                                        '&:focus-visible': {
+                                            boxShadow: '0 0 0 2px var(--bgColor-accent-muted, rgba(9,105,218,0.3))',
+                                        },
                                     }, children: getExampleNames()
                                         .sort()
-                                        .map(name => (_jsx("option", { value: name, children: name }, name))) }), isChangingExample && (_jsx("span", { style: { color: '#666', fontSize: '12px' }, children: "Loading..." })), error && (_jsxs("span", { style: { color: '#dc3545', fontSize: '12px' }, children: ["Error: ", error] }))] }), _jsx("img", { src: "https://assets.datalayer.tech/datalayer-25.svg", alt: "Datalayer", style: { height: '24px' } })] }), _jsx("div", { style: {
+                                        .map(name => (_jsx("option", { value: name, children: name }, name))) }), isChangingExample && (_jsx(Box, { as: "span", sx: { color: 'fg.muted', fontSize: 0 }, children: "Loading\u2026" })), error && (_jsxs(Box, { as: "span", sx: { color: 'danger.fg', fontSize: 0 }, children: ["Error: ", error] }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 3 }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: themeVariants.map(variant => {
+                                        const tcfg = themeConfigs[variant];
+                                        const isSelected = themeVariant === variant;
+                                        return (_jsx(Box, { as: "button", "aria-label": tcfg.label, "aria-pressed": isSelected, onClick: () => useExampleThemeStore.getState().setTheme(variant, false), sx: {
+                                                width: 24,
+                                                height: 24,
+                                                borderRadius: '50%',
+                                                backgroundColor: tcfg.brandColor,
+                                                border: '2px solid',
+                                                borderColor: isSelected ? 'accent.fg' : 'border.default',
+                                                cursor: 'pointer',
+                                                padding: 0,
+                                                outline: 'none',
+                                                transition: 'border-color 0.15s ease',
+                                                boxShadow: isSelected
+                                                    ? '0 0 0 2px var(--bgColor-accent-muted, rgba(9,105,218,0.3))'
+                                                    : 'none',
+                                                '&:hover': { borderColor: 'accent.fg' },
+                                                '&:focus-visible': {
+                                                    boxShadow: '0 0 0 2px var(--bgColor-accent-muted, rgba(9,105,218,0.3))',
+                                                },
+                                            } }, variant));
+                                    }) }), _jsxs(SegmentedControl, { "aria-label": "Color mode", size: "small", onChange: (index) => {
+                                        const modes = ['light', 'dark', 'auto'];
+                                        useExampleThemeStore.getState().setColorMode(modes[index]);
+                                    }, children: [_jsx(SegmentedControl.IconButton, { selected: colorMode === 'light', icon: SunIcon, "aria-label": "Light" }), _jsx(SegmentedControl.IconButton, { selected: colorMode === 'dark', icon: MoonIcon, "aria-label": "Dark" }), _jsx(SegmentedControl.IconButton, { selected: colorMode === 'auto', icon: DeviceDesktopIcon, "aria-label": "Auto" })] }), _jsx("img", { src: "https://assets.datalayer.tech/datalayer-25.svg", alt: "Datalayer", style: { height: '24px' } })] })] }), _jsx(Box, { sx: {
                         marginTop: '50px',
                         height: 'calc(100vh - 50px)',
                         overflow: 'auto',
-                    }, children: isChangingExample ? (_jsxs("div", { style: { padding: '40px', textAlign: 'center', color: '#666' }, children: [_jsxs("h3", { children: ["Loading ", selectedExample, "..."] }), _jsx("p", { children: "Please wait while the example loads." })] })) : ExampleComponent ? (_jsx(ExampleComponent, { ...exampleProps })) : null })] }) }));
+                    }, children: isChangingExample ? (_jsxs(Box, { sx: { p: 5, textAlign: 'center', color: 'fg.muted' }, children: [_jsxs("h3", { children: ["Loading ", selectedExample, "\u2026"] }), _jsx("p", { children: "Please wait while the example loads." })] })) : ExampleComponent ? (_jsx(ExampleComponent, { ...exampleProps })) : null })] }) }));
 };
 // Mount the app - check route to determine which app to render
 const root = document.getElementById('root');

package/lib/examples/stores/themeStore.d.ts

@@ -0,0 +1,33 @@
+import { type ThemeVariant, type ColorMode } from '@datalayer/primer-addons';
+export type { ThemeVariant, ColorMode };
+export interface ThemeState {
+    /** Current color mode (light, dark, or auto = follow OS). */
+    colorMode: ColorMode;
+    /** Current theme variant. */
+    theme: ThemeVariant;
+    /** Cycle through light → dark → auto. */
+    toggleColorMode: () => void;
+    /** Set a specific color mode. */
+    setColorMode: (mode: ColorMode) => void;
+    /**
+     * Set the active theme variant.
+     * @param applyDefaultColorMode When true (default), also switches the
+     *   color mode to the theme's configured default.
+     */
+    setTheme: (theme: ThemeVariant, applyDefaultColorMode?: boolean) => void;
+}
+/**
+ * Zustand store for theme preferences in the examples app.
+ * Persisted to localStorage under 'agent-runtimes-theme' key.
+ */
+export declare const useExampleThemeStore: import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<ThemeState>, "persist"> & {
+    persist: {
+        setOptions: (options: Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown>>) => void;
+        clearStorage: () => void;
+        rehydrate: () => Promise<void> | void;
+        hasHydrated: () => boolean;
+        onHydrate: (fn: (state: ThemeState) => void) => () => void;
+        onFinishHydration: (fn: (state: ThemeState) => void) => () => void;
+        getOptions: () => Partial<import("zustand/middleware").PersistOptions<ThemeState, unknown>>;
+    };
+}>;

package/lib/examples/stores/themeStore.js

@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { create } from 'zustand';
+import { persist, createJSONStorage } from 'zustand/middleware';
+import { themeConfigs, } from '@datalayer/primer-addons';
+/**
+ * Zustand store for theme preferences in the examples app.
+ * Persisted to localStorage under 'agent-runtimes-theme' key.
+ */
+export const useExampleThemeStore = create()(persist(set => ({
+    colorMode: 'light',
+    theme: 'datalayer',
+    toggleColorMode: () => set(state => {
+        const cycle = {
+            light: 'dark',
+            dark: 'auto',
+            auto: 'light',
+        };
+        return { colorMode: cycle[state.colorMode] };
+    }),
+    setColorMode: (mode) => set({ colorMode: mode }),
+    setTheme: (theme, applyDefaultColorMode = true) => set(() => {
+        const next = { theme };
+        if (applyDefaultColorMode) {
+            next.colorMode = themeConfigs[theme].defaultColorMode;
+        }
+        return next;
+    }),
+}), {
+    name: 'agent-runtimes-theme',
+    storage: createJSONStorage(() => localStorage),
+    partialize: state => ({
+        colorMode: state.colorMode,
+        theme: state.theme,
+    }),
+}));

package/lib/examples/stores/themedProvider.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Theme-aware wrappers for example components.
+ *
+ * These are drop-in replacements for `DatalayerThemeProvider` and
+ * `JupyterReactTheme` that automatically read theme / color-mode
+ * from the shared `useExampleThemeStore`.
+ *
+ * Usage: replace
+ *   import { DatalayerThemeProvider } from '@datalayer/primer-addons';
+ * with
+ *   import { ThemedProvider } from './stores/themedProvider';
+ *
+ * and swap `<DatalayerThemeProvider>` → `<ThemedProvider>`.
+ */
+import React from 'react';
+import { type IDatalayerThemeProviderProps } from '@datalayer/primer-addons';
+/**
+ * Drop-in replacement for `<DatalayerThemeProvider>`.
+ * Reads theme/colorMode from the example theme store and
+ * forwards them to the real provider. Any explicit props
+ * (colorMode, theme, themeStyles) are still respected as overrides.
+ */
+export declare const ThemedProvider: React.FC<React.PropsWithChildren<Omit<IDatalayerThemeProviderProps, 'ref'>>>;
+/**
+ * Drop-in replacement for `<JupyterReactTheme>`.
+ * Wraps children in `ThemedProvider` so Jupyter components also
+ * pick up the selected theme/color-mode.
+ *
+ * The wrapper automatically derives `colormode` and `backgroundColor`
+ * from the shared theme store so every Jupyter component inherits
+ * the correct palette — mirroring the pattern used by
+ * `ProjectNotebookEditor`.
+ *
+ * @param useJupyterReactTheme - When `true`, wraps children in
+ *   `<JupyterReactTheme>` inside the themed provider. Defaults to `true`.
+ */
+/**
+ * Hook that returns the `brandColor` for the currently selected theme.
+ * Use this in example components to pass a dynamic brand color to
+ * `<ChatFloating>` or any other component that accepts a `brandColor` prop.
+ */
+export declare const useThemeBrandColor: () => string;
+export declare const ThemedJupyterProvider: React.FC<React.PropsWithChildren<{
+    useJupyterReactTheme?: boolean;
+}>>;

package/lib/examples/stores/themedProvider.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DatalayerThemeProvider, themeConfigs, } from '@datalayer/primer-addons';
+import { JupyterReactTheme } from '@datalayer/jupyter-react';
+import { useExampleThemeStore } from './themeStore';
+/**
+ * Drop-in replacement for `<DatalayerThemeProvider>`.
+ * Reads theme/colorMode from the example theme store and
+ * forwards them to the real provider. Any explicit props
+ * (colorMode, theme, themeStyles) are still respected as overrides.
+ */
+export const ThemedProvider = ({ children, ...rest }) => {
+    const { colorMode, theme: themeVariant } = useExampleThemeStore();
+    const cfg = themeConfigs[themeVariant];
+    return (_jsx(DatalayerThemeProvider, { colorMode: rest.colorMode ?? colorMode, theme: rest.theme ?? cfg.primerTheme, themeStyles: rest.themeStyles ?? cfg.themeStyles, ...rest, children: children }));
+};
+/**
+ * Drop-in replacement for `<JupyterReactTheme>`.
+ * Wraps children in `ThemedProvider` so Jupyter components also
+ * pick up the selected theme/color-mode.
+ *
+ * The wrapper automatically derives `colormode` and `backgroundColor`
+ * from the shared theme store so every Jupyter component inherits
+ * the correct palette — mirroring the pattern used by
+ * `ProjectNotebookEditor`.
+ *
+ * @param useJupyterReactTheme - When `true`, wraps children in
+ *   `<JupyterReactTheme>` inside the themed provider. Defaults to `true`.
+ */
+/**
+ * Hook that returns the `brandColor` for the currently selected theme.
+ * Use this in example components to pass a dynamic brand color to
+ * `<ChatFloating>` or any other component that accepts a `brandColor` prop.
+ */
+export const useThemeBrandColor = () => {
+    const { theme: themeVariant } = useExampleThemeStore();
+    return themeConfigs[themeVariant].brandColor;
+};
+export const ThemedJupyterProvider = ({ children, useJupyterReactTheme = true }) => {
+    const { colorMode, theme: themeVariant } = useExampleThemeStore();
+    const cfg = themeConfigs[themeVariant];
+    // Resolve 'auto' to an actual mode so we can pick the right style set.
+    const resolvedMode = colorMode === 'auto'
+        ? typeof window !== 'undefined' &&
+            window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light'
+        : colorMode === 'dark'
+            ? 'dark'
+            : 'light';
+    // Extract the canvas background from the theme's CSS-var overrides.
+    const modeStyles = resolvedMode === 'dark' ? cfg.themeStyles.dark : cfg.themeStyles.light;
+    const backgroundColor = modeStyles['--bgColor-default'];
+    return (_jsx(ThemedProvider, { children: useJupyterReactTheme ? (_jsx(JupyterReactTheme, { colormode: colorMode, backgroundColor: backgroundColor, children: children })) : (children) }));
+};

package/lib/hooks/index.d.ts

@@ -65,4 +65,12 @@ export { useVercelChat } from './useVercelChat';
  * Datalayer AI Agents REST API hook.
  */
 export * from './useAgents';
+/**
+ * Agent runtimes service hooks for managing agent runtime instances.
+ */
+export * from './useAgentRuntimes';
+/**
+ * Centralized agent catalog store for available agent specs and running agents.
+ */
+export * from './useAgentStore';
 export * from './useNotebookAIAgent';

package/lib/hooks/index.js

@@ -78,4 +78,12 @@ export { useVercelChat } from './useVercelChat';
  * Datalayer AI Agents REST API hook.
  */
 export * from './useAgents';
+/**
+ * Agent runtimes service hooks for managing agent runtime instances.
+ */
+export * from './useAgentRuntimes';
+/**
+ * Centralized agent catalog store for available agent specs and running agents.
+ */
+export * from './useAgentStore';
 export * from './useNotebookAIAgent';