@datalayer/agent-runtimes 0.0.2

package/lib/examples/CopilotKitLexicalExample.js

@@ -0,0 +1,161 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * CopilotKit Lexical Example with CopilotKit Integration.
+ *
+ * To run this example, create a .env file in the core directory with:
+ * - VITE_DATALAYER_API_TOKEN: Get from https://datalayer.app/settings/iam/tokens
+ * - VITE_COPILOT_KIT_API_KEY: Get from https://cloud.copilotkit.ai/dashboard
+ *
+ * You also will need to connect copilot kit to some sort of LLM Add LLM Provider API Key.
+ *
+ * https://docs.copilotkit.ai/reference/hooks/useFrontendTool
+ *
+ * @module examples/CopilotKitLexicalExample
+ */
+import 'prismjs';
+import 'prismjs/components/prism-clike';
+import 'prismjs/components/prism-javascript';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-css';
+import 'prismjs/components/prism-objectivec';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-rust';
+import 'prismjs/components/prism-swift';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { $getRoot, $createParagraphNode } from 'lexical';
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
+import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';
+import { TRANSFORMERS } from '@lexical/markdown';
+import { registerCodeHighlighting } from '@lexical/code';
+import { ListPlugin } from '@lexical/react/LexicalListPlugin';
+import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';
+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 { ComponentPickerMenuPlugin, JupyterCellPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, ImagesPlugin, HorizontalRulePlugin, EquationsPlugin, YouTubePlugin, AutoLinkPlugin, AutoEmbedPlugin, LexicalConfigProvider, LexicalStatePlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, ListMaxIndentLevelPlugin, } from '@datalayer/jupyter-lexical';
+import { ActionRegistrar, useLexicalToolActions, } from '../tools/adapters/copilotkit/lexicalHooks';
+import { editorConfig } from './lexical/editorConfig';
+import '@datalayer/jupyter-lexical/style/index.css';
+import '@copilotkit/react-ui/styles.css';
+import './lexical/lexical-theme.css';
+// Fixed lexical document ID
+const LEXICAL_ID = 'agui-lexical-example';
+// import contentLexical from './lexicals/vscode.lexical';
+// const INITIAL_CONTENT = JSON.stringify(contentLexical);
+const INITIAL_CONTENT = undefined; // Use default empty document
+/**
+ * Lexical plugin for loading initial content into the editor.
+ */
+function LoadContentPlugin({ content }) {
+    const [editor] = useLexicalComposerContext();
+    const isFirstRender = useRef(true);
+    useEffect(() => {
+        if (!content || !isFirstRender.current) {
+            return;
+        }
+        isFirstRender.current = false;
+        try {
+            const parsed = JSON.parse(content);
+            if (parsed && typeof parsed === 'object' && parsed.root) {
+                const editorState = editor.parseEditorState(content);
+                editor.setEditorState(editorState, {
+                    tag: 'history-merge',
+                });
+            }
+            else {
+                throw new Error('Invalid Lexical editor state format');
+            }
+        }
+        catch {
+            editor.update(() => {
+                const root = $getRoot();
+                root.clear();
+                const paragraph = $createParagraphNode();
+                root.append(paragraph);
+            }, {
+                tag: 'history-merge',
+            });
+        }
+    }, [content, editor]);
+    return null;
+}
+/**
+ * Lexical plugin for Simple code syntax highlighting.
+ */
+function CodeHighlightPlugin() {
+    const [editor] = useLexicalComposerContext();
+    useEffect(() => {
+        return registerCodeHighlighting(editor);
+    }, [editor]);
+    return null;
+}
+/**
+ * Wrapper component for kernel-dependent Simple plugins.
+ */
+function SimpleKernelPluginsInner() {
+    const { defaultKernel } = useJupyter();
+    return (_jsxs(_Fragment, { children: [_jsx(ComponentPickerMenuPlugin, { kernel: defaultKernel }), _jsx(JupyterInputOutputPlugin, { kernel: defaultKernel })] }));
+}
+const LexicalUI = React.memo(function LexicalUI({ content = INITIAL_CONTENT, serviceManager, }) {
+    const [floatingAnchorElem, setFloatingAnchorElem] = useState(null);
+    const onRef = (_floatingAnchorElem) => {
+        if (_floatingAnchorElem !== null) {
+            setFloatingAnchorElem(_floatingAnchorElem);
+        }
+    };
+    const handleChange = useCallback((_editorState) => {
+        // onChange handler - can be used for tracking changes
+    }, []);
+    return (_jsx(Box, { sx: {
+            height: '100vh',
+            width: '100vw',
+            display: 'flex',
+            overflow: 'hidden',
+        }, children: _jsxs(Box, { sx: {
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'auto',
+                padding: 3,
+            }, children: [_jsxs(Box, { sx: {
+                        marginBottom: 3,
+                        paddingBottom: 3,
+                        borderBottom: '1px solid',
+                        borderColor: 'border.default',
+                    }, children: [_jsx("h1", { children: "CopilotKit Lexical Example" }), _jsx("p", { children: "Platform-agnostic tool usage with CopilotKit integration. Use the AI copilot to manipulate the document." })] }), _jsx(Box, { sx: {
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 2,
+                        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 }), _jsx(CodeActionMenuPlugin, { anchorElem: floatingAnchorElem })] }))] }) }) }) })] }) }));
+});
+function LexicalWithTools({ content, serviceManager, }) {
+    // Get all actions for this lexical document
+    const actions = useLexicalToolActions(LEXICAL_ID);
+    return (_jsxs(_Fragment, { children: [actions.map((action, i) => (_jsx(ActionRegistrar, { action: action, useFrontendTool: useFrontendTool }, action.name || i))), _jsx(LexicalUI, { content: content, serviceManager: serviceManager })] }));
+}
+function CopilotKitLexicalExample({ content, serviceManager, }) {
+    return (_jsx(CopilotKit, { showDevConsole: true, publicApiKey: import.meta.env.VITE_COPILOT_KIT_API_KEY, children: _jsx(CopilotSidebar, { defaultOpen: true, labels: {
+                title: 'Lexical AI Copilot',
+                initial: 'Hi! I can help you edit lexical documents. Try: "Insert a heading", "Add a code block", or "Create a list"',
+            }, children: _jsx(LexicalWithTools, { content: content, serviceManager: serviceManager }) }) }));
+}
+export default CopilotKitLexicalExample;

package/lib/examples/CopilotKitNotebookExample.d.ts

@@ -0,0 +1,11 @@
+import { ServiceManager } from '@jupyterlab/services';
+import '@copilotkit/react-ui/styles.css';
+/**
+ * Main CopilotKit notebook example component with tool registration
+ * IMPORTANT: This must be inside CopilotKit context
+ */
+interface CopilotKitNotebookExampleProps {
+    serviceManager?: ServiceManager.IManager;
+}
+declare function CopilotKitNotebookExample({ serviceManager, }: CopilotKitNotebookExampleProps): JSX.Element;
+export default CopilotKitNotebookExample;

package/lib/examples/CopilotKitNotebookExample.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * CopilotKit Notebook Example with CopilotKit Integration
+ *
+ * To run this example, create a .env file in the core directory with:
+ * - VITE_DATALAYER_API_TOKEN: Get from https://datalayer.app/settings/iam/tokens
+ * - VITE_COPILOT_KIT_API_KEY: Get from https://cloud.copilotkit.ai/dashboard
+ *
+ * You also will need to connect co[pilot kit to some sort of LLM Add LLM Provider API Key
+ *
+ * @module datalayer-core/CopilotKitNotebookExample
+ */
+import React from 'react';
+import { Box } from '@datalayer/primer-addons';
+import { Notebook } from '@datalayer/jupyter-react';
+// CopilotKit imports
+import { CopilotKit, useFrontendTool } from '@copilotkit/react-core';
+import { CopilotSidebar } from '@copilotkit/react-ui';
+import '@copilotkit/react-ui/styles.css';
+// Import CopilotKit components and hooks
+import { ActionRegistrar, useNotebookToolActions, } from '../tools/adapters/copilotkit/notebookHooks';
+// Import Matplotlib notebook
+import MatplotlibNotebook from './stores/notebooks/Matplotlib.ipynb.json';
+// Fixed notebook ID
+const NOTEBOOK_ID = 'agui-notebook-example';
+// Use the imported Matplotlib notebook
+const NOTEBOOK_CONTENT = MatplotlibNotebook;
+const NotebookUI = React.memo(function NotebookUI({ serviceManager, }) {
+    return (_jsx(Box, { style: {
+            height: '100vh',
+            width: '100vw',
+            display: 'flex',
+            overflow: 'hidden',
+        }, children: _jsxs(Box, { style: {
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'auto',
+                padding: 24,
+            }, children: [_jsxs(Box, { style: {
+                        marginBottom: 24,
+                        paddingBottom: 24,
+                        borderBottom: '1px solid var(--borderColor-default)',
+                    }, children: [_jsx("h1", { children: "CopilotKit Notebook Example" }), _jsx("p", { children: "Platform-agnostic tool usage with CopilotKit integration." })] }), _jsx(Box, { style: {
+                        border: '1px solid var(--borderColor-default)',
+                        borderRadius: 8,
+                        padding: 24,
+                        backgroundColor: 'var(--bgColor-default)',
+                    }, children: serviceManager ? (_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.
+ * Must be inside CopilotKit context.
+ */
+function NotebookActions() {
+    // Create notebook tool actions (stable reference)
+    const actions = useNotebookToolActions(NOTEBOOK_ID);
+    return (_jsx(_Fragment, { children: actions.map((action, i) => (_jsx(ActionRegistrar, { action: action, useFrontendTool: useFrontendTool }, action.name || i))) }));
+}
+function CopilotKitNotebookExample({ serviceManager, }) {
+    return (_jsx(CopilotKit, { showDevConsole: true, publicApiKey: import.meta.env.VITE_COPILOT_KIT_API_KEY, children: _jsxs(CopilotSidebar, { defaultOpen: true, labels: {
+                title: 'Notebook AI Copilot',
+                initial: 'Hi! I can help you edit notebook cells.',
+            }, children: [_jsx(NotebookActions, {}), _jsx(NotebookUI, { serviceManager: serviceManager })] }) }));
+}
+export default CopilotKitNotebookExample;

package/lib/examples/DatalayerNotebookExample.d.ts

@@ -0,0 +1,16 @@
+import { ServiceManager } from '@jupyterlab/services';
+/**
+ * Example demonstrating how to use Datalayer services with Notebook
+ *
+ * This example shows:
+ * 1. How to create and use DatalayerServiceManager for kernel management
+ * 2. How to create and use DatalayerCollaborationProvider for real-time collaboration
+ * 3. How to enable/disable Datalayer collaboration
+ * 4. How to pass these to the base Notebook component
+ * 5. Graceful fallback when Datalayer credentials are not available
+ */
+type IDatalayerNotebookExampleProps = {
+    serviceManager?: ServiceManager.IManager;
+};
+declare const DatalayerNotebookExample: (props: IDatalayerNotebookExampleProps) => import("react/jsx-runtime").JSX.Element;
+export default DatalayerNotebookExample;

package/lib/examples/DatalayerNotebookExample.js

@@ -0,0 +1,99 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+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 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';
+const DatalayerNotebookExample = (props) => {
+    // Load config on component mount
+    loadJupyterConfig();
+    const [nbformat] = useState(nbformatExample);
+    const [enableCollaboration, setEnableCollaboration] = useState(false);
+    const [readonly] = useState(false);
+    const [serviceManager, setServiceManager] = useState(props.serviceManager);
+    const { configuration } = useCoreStore();
+    useEffect(() => {
+        // Create DatalayerServiceManager if not provided
+        const createManager = async () => {
+            if (props.serviceManager) {
+                // Use provided service manager (should be DatalayerServiceManager from main.tsx)
+                // Wait for it to be ready
+                await props.serviceManager.ready;
+                return;
+            }
+            // Create DatalayerServiceManager if we have credentials
+            if (configuration?.token && configuration?.runUrl) {
+                try {
+                    // Now we can pass undefined to use config/defaults
+                    const manager = await createDatalayerServiceManager(configuration?.cpuEnvironment, configuration?.credits);
+                    await manager.ready;
+                    setServiceManager(manager);
+                }
+                catch (error) {
+                    console.error('Failed to create DatalayerServiceManager:', error);
+                }
+            }
+            else {
+                console.warn('Datalayer credentials not configured. Please set runUrl and token.');
+            }
+        };
+        createManager();
+    }, [props.serviceManager, configuration]);
+    // Create the collaboration provider when enabled
+    const collaborationProvider = useMemo(() => {
+        if (!enableCollaboration) {
+            return undefined;
+        }
+        const runUrl = configuration?.runUrl;
+        const token = configuration?.token;
+        if (!runUrl || !token) {
+            console.warn('Datalayer collaboration enabled but runUrl or token not configured. ' +
+                'Please configure them in the Datalayer store or environment.');
+            return undefined;
+        }
+        // Create and return the Datalayer collaboration provider
+        return new DatalayerCollaborationProvider({
+            runUrl,
+            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: {
+                        display: 'flex',
+                        gap: 2,
+                        flexDirection: 'row',
+                    }, children: [_jsxs(Box, { sx: {
+                                flex: 1,
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                                borderRadius: 2,
+                            }, children: [_jsx(Box, { sx: {
+                                        p: 2,
+                                        bg: 'canvas.subtle',
+                                        borderBottom: '1px solid',
+                                        borderColor: 'border.default',
+                                        fontWeight: 'bold',
+                                    }, children: "Collaborator 1" }), serviceManager ? (_jsx(Notebook, { id: `${NOTEBOOK_ID}-collab-1`, height: "calc(100vh - 280px)", nbformat: nbformat, readonly: readonly, serviceManager: serviceManager, startDefaultKernel: true, collaborationProvider: collaborationProvider })) : (_jsx(Box, { sx: { p: 4, textAlign: 'center' }, children: "Loading ServiceManager..." }))] }), _jsxs(Box, { sx: {
+                                flex: 1,
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                                borderRadius: 2,
+                            }, children: [_jsx(Box, { sx: {
+                                        p: 2,
+                                        bg: 'canvas.subtle',
+                                        borderBottom: '1px solid',
+                                        borderColor: 'border.default',
+                                        fontWeight: 'bold',
+                                    }, children: "Collaborator 2" }), serviceManager ? (_jsx(Notebook, { id: `${NOTEBOOK_ID}-collab-2`, height: "calc(100vh - 280px)", nbformat: nbformat, readonly: readonly, serviceManager: serviceManager, startDefaultKernel: false, collaborationProvider: collaborationProvider })) : (_jsx(Box, { sx: { p: 4, textAlign: 'center' }, children: "Loading ServiceManager..." }))] })] })) : (_jsx(Box, { sx: {
+                        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 (runUrl 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 DatalayerNotebookExample;

package/lib/examples/JupyterCellExample.d.ts

@@ -0,0 +1,6 @@
+import { ServiceManager } from '@jupyterlab/services';
+type IJupyterCellExampleProps = {
+    serviceManager?: ServiceManager.IManager;
+};
+export declare const JupyterCellExample: (props: IJupyterCellExampleProps) => import("react/jsx-runtime").JSX.Element;
+export default JupyterCellExample;

package/lib/examples/JupyterCellExample.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { JupyterReactTheme, Cell, KernelIndicator, useJupyter, useKernelsStore, useCellsStore, } from '@datalayer/jupyter-react';
+import { Button, Label } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+const CELL_ID = 'cell-example-1';
+const DEFAULT_SOURCE = `from IPython.display import display
+
+for i in range(10):
+    display('I am a long string which is repeatedly added to the dom in separated divs: %d' % i)`;
+const JupyterCellExampleContent = () => {
+    const { defaultKernel } = useJupyter({ startDefaultKernel: true });
+    const cellsStore = useCellsStore();
+    const kernelsStore = useKernelsStore();
+    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, {}) }));
+};
+export default JupyterCellExample;

package/lib/examples/JupyterNotebookExample.d.ts

@@ -0,0 +1,6 @@
+import { ServiceManager } from '@jupyterlab/services';
+type IJupyterNotebookExampleProps = {
+    serviceManager?: ServiceManager.IManager;
+};
+export declare const JupyterNotebookExample: (props: IJupyterNotebookExampleProps) => import("react/jsx-runtime").JSX.Element;
+export default JupyterNotebookExample;

package/lib/examples/JupyterNotebookExample.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+import { useMemo } from 'react';
+import { Box } from '@datalayer/primer-addons';
+import { Notebook, NotebookToolbar, CellSidebarExtension, CellSidebarButton, } from '@datalayer/jupyter-react';
+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(Notebook, { id: NOTEBOOK_ID, nbformat: nbformatExample, serviceManager: serviceManager, startDefaultKernel: true, extensions: extensions, Toolbar: NotebookToolbar }))] }));
+};
+export default JupyterNotebookExample;

package/lib/examples/ag-ui/haiku/HaikuDisplay.d.ts

@@ -0,0 +1,18 @@
+import { type HaikuResult } from './InlineHaikuCard';
+/**
+ * Props for HaikuDisplay
+ */
+export interface HaikuDisplayProps {
+    /** Array of haikus to display */
+    haikus: HaikuResult[];
+    /** Title for the display section */
+    title?: string;
+}
+/**
+ * HaikuDisplay Component
+ *
+ * Displays a carousel of haiku cards with navigation controls.
+ * Shows the most recent haiku first with ability to browse older ones.
+ */
+export declare function HaikuDisplay({ haikus, title, }: HaikuDisplayProps): import("react/jsx-runtime").JSX.Element;
+export default HaikuDisplay;

package/lib/examples/ag-ui/haiku/HaikuDisplay.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * HaikuDisplay - A carousel display for haiku collections.
+ *
+ * This component displays a collection of haikus in a carousel format
+ * for the main view area. Inspired by the AG-UI Dojo implementation.
+ *
+ * @module examples/ag-ui/haiku/HaikuDisplay
+ */
+import { useState } from 'react';
+import { IconButton, Text } from '@primer/react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@primer/octicons-react';
+import { InlineHaikuCard } from './InlineHaikuCard';
+/**
+ * HaikuDisplay Component
+ *
+ * Displays a carousel of haiku cards with navigation controls.
+ * Shows the most recent haiku first with ability to browse older ones.
+ */
+export function HaikuDisplay({ haikus, title = 'Generated Haikus', }) {
+    const [currentIndex, setCurrentIndex] = useState(0);
+    // No haikus to display
+    if (haikus.length === 0) {
+        return (_jsxs("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: 40,
+                border: '2px dashed',
+                borderColor: 'var(--borderColor-muted, #d0d7de)',
+                borderRadius: 12,
+                backgroundColor: 'var(--bgColor-subtle, #f6f8fa)',
+                minHeight: 200,
+            }, children: [_jsx(Text, { sx: {
+                        fontSize: 1,
+                        color: 'fg.muted',
+                        textAlign: 'center',
+                    }, children: "No haikus yet. Ask the assistant to generate one!" }), _jsx(Text, { sx: {
+                        fontSize: 0,
+                        color: 'fg.subtle',
+                        marginTop: 2,
+                        textAlign: 'center',
+                    }, children: "Try: \"Write me a haiku about cherry blossoms\"" })] }));
+    }
+    const canGoLeft = currentIndex > 0;
+    const canGoRight = currentIndex < haikus.length - 1;
+    const goLeft = () => {
+        if (canGoLeft) {
+            setCurrentIndex(currentIndex - 1);
+        }
+    };
+    const goRight = () => {
+        if (canGoRight) {
+            setCurrentIndex(currentIndex + 1);
+        }
+    };
+    return (_jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            width: '100%',
+        }, children: [_jsx(Text, { as: "h3", sx: {
+                    fontSize: 2,
+                    fontWeight: 'semibold',
+                    marginBottom: 3,
+                    color: 'fg.default',
+                }, children: title }), _jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 16,
+                    width: '100%',
+                    justifyContent: 'center',
+                }, children: [_jsx(IconButton, { icon: ChevronLeftIcon, "aria-label": "Previous haiku", onClick: goLeft, disabled: !canGoLeft, variant: "invisible", sx: {
+                            opacity: canGoLeft ? 1 : 0.3,
+                            cursor: canGoLeft ? 'pointer' : 'not-allowed',
+                        } }), _jsx("div", { style: {
+                            display: 'flex',
+                            justifyContent: 'center',
+                            minWidth: 320,
+                        }, children: _jsx(InlineHaikuCard, { haiku: haikus[currentIndex], status: "complete", size: "large" }) }), _jsx(IconButton, { icon: ChevronRightIcon, "aria-label": "Next haiku", onClick: goRight, disabled: !canGoRight, variant: "invisible", sx: {
+                            opacity: canGoRight ? 1 : 0.3,
+                            cursor: canGoRight ? 'pointer' : 'not-allowed',
+                        } })] }), haikus.length > 1 && (_jsx("div", { style: {
+                    display: 'flex',
+                    gap: 8,
+                    marginTop: 16,
+                    alignItems: 'center',
+                }, children: haikus.map((_, index) => (_jsx("button", { onClick: () => setCurrentIndex(index), style: {
+                        width: index === currentIndex ? 24 : 8,
+                        height: 8,
+                        borderRadius: 4,
+                        border: 'none',
+                        backgroundColor: index === currentIndex
+                            ? 'var(--fgColor-accent, #0969da)'
+                            : 'var(--borderColor-muted, #d0d7de)',
+                        cursor: 'pointer',
+                        transition: 'all 0.2s ease',
+                        padding: 0,
+                    }, "aria-label": `Go to haiku ${index + 1}` }, index))) })), _jsxs(Text, { sx: {
+                    fontSize: 0,
+                    color: 'fg.muted',
+                    marginTop: 2,
+                }, children: [currentIndex + 1, " of ", haikus.length] })] }));
+}
+export default HaikuDisplay;

package/lib/examples/ag-ui/haiku/InlineHaikuCard.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Haiku data structure returned by the backend tool
+ */
+export interface HaikuResult {
+    japanese: string[];
+    english: string[];
+    gradient: string;
+}
+/**
+ * Props for InlineHaikuCard
+ * Status aligned with tool rendering patterns
+ */
+export interface InlineHaikuCardProps {
+    /** Haiku data */
+    haiku?: HaikuResult;
+    /**
+     * Current status:
+     * - 'inProgress': Arguments are being streamed
+     * - 'executing': Tool is executing on backend
+     * - 'complete': Tool completed successfully
+     * - 'error': Tool execution failed
+     */
+    status: 'inProgress' | 'executing' | 'complete' | 'error';
+    /** Error message if status is 'error' */
+    error?: string;
+    /** Optional size variant */
+    size?: 'normal' | 'large';
+}
+/**
+ * InlineHaikuCard Component
+ *
+ * Renders a beautiful haiku card inline in the chat or in a display area with:
+ * - Custom gradient background
+ * - Japanese text (decorative, larger)
+ * - English translation (below)
+ * - Decorative corner accents
+ */
+export declare function InlineHaikuCard({ haiku, status, error, size, }: InlineHaikuCardProps): import("react/jsx-runtime").JSX.Element;
+export default InlineHaikuCard;