@datalayer/agent-runtimes 1.0.29 → 1.3.10

package/lib/examples/AgentTriggersExample.js

@@ -24,17 +24,19 @@ import { AuthRequiredView, ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { Chat } from '../chat';
+import { LoopEmbed } from '../loop';
+import { AgentTriggersPlugin } from '../loop/plugins/agent-triggers';
 import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { waitForAgent } from './utils/waitForAgent';
 import { useConnectedIdentities } from '../identity';
 import { ToolApprovalBanner, ToolApprovalDialog, } from '../chat/tools';
 import { useAgentEvents, useDeleteAgentEvent, useMarkEventRead, useMarkEventUnread, useAIAgentsWebSocket, } from '../hooks';
-import { VercelAIAdapter } from '../protocols';
+import { AGUIAdapter, VercelAIAdapter } from '../protocols';
 import { createUserMessage } from '../types/messages';
+const LOOP_PLUGINS_AGENTTRI = [AgentTriggersPlugin];
 const queryClient = new QueryClient();
 // ─── Constants ─────────────────────────────────────────────────────────────
 const AGENT_NAME = 'trigger-example-agent';
-const AGENTSPEC_ID = 'example-one-trigger';
 const APPROVAL_AGENT_NAME = 'trigger-approval-agent';
 const APPROVAL_AGENTSPEC_ID = 'example-tool-approvals';
 const ONCE_TRIGGER_PROMPT = "List the user's top 3 public and top 3 private GitHub repositories, ranked by recent activity, and provide a brief summary of each. Execute exactly two tool calls: run_skill_script(skill_name='github', script_name='list_repos', kwargs={visibility:'public', sort:'updated', limit:3, format:'json'}) and run_skill_script(skill_name='github', script_name='list_repos', kwargs={visibility:'private', sort:'updated', limit:3, format:'json'}). Do not call list_skills/load_skill/read_skill_resource. Do not retry. If a tool call fails, report failure_reason/error/stderr exactly as returned.";
@@ -60,6 +62,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
     const [agentId, setAgentId] = useState(agentName);
     const agentBaseUrl = useExampleAgentRuntimesUrl();
     const chatAuthToken = token === null ? undefined : token;
+    void chatAuthToken;
     // Cron state
     const [cronExpr, setCronExpr] = useState(DEFAULT_CRON);
     const [editCron, setEditCron] = useState(DEFAULT_CRON);
@@ -110,6 +113,8 @@ const AgentTriggerInner = ({ onLogout, }) => {
     const [activeApproval, setActiveApproval] = useState(null);
     // Approval sidebar messages
     const [approvalSidebarMessages, setApprovalSidebarMessages] = useState([]);
+    // The approval agent's live stream, kept open while a tool waits: that
+    // agent speaks Vercel AI, whose adapter knows the deferred tool call.
     const approvalStreamRef = useRef(null);
     // Events hooks
     const eventsQuery = useAgentEvents(agentId);
@@ -221,56 +226,22 @@ const AgentTriggerInner = ({ onLogout, }) => {
     }), [token]);
     // ── Create agent on demand (no startup on initial page load) ────────────
     const createAgent = useCallback(async () => {
-        setRuntimeStatus('launching');
-        setIsReady(false);
         setHookError(null);
-        try {
-            const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
-                method: 'POST',
-                body: JSON.stringify({
-                    name: agentName,
-                    description: 'Agent with cron, webhook, event, and manual triggers',
-                    agent_library: 'pydantic-ai',
-                    transport: 'vercel-ai',
-                    agent_spec_id: AGENTSPEC_ID,
-                }),
-            });
-            let resolvedAgentId = agentName;
-            if (response.ok) {
-                const data = await response.json();
-                resolvedAgentId = data?.id || agentName;
-            }
-            else {
-                const contentType = response.headers.get('content-type') || '';
-                let detail = '';
-                if (contentType.includes('application/json')) {
-                    const data = await response.json().catch(() => null);
-                    detail =
-                        (typeof data?.detail === 'string' && data.detail) ||
-                            (typeof data?.message === 'string' && data.message) ||
-                            '';
-                }
-                else {
-                    detail = await response.text();
-                }
-                if (response.status === 409 || /already exists/i.test(detail || '')) {
-                    // Agent already running — reuse it
-                }
-                else {
-                    throw new Error(detail || `Failed to create agent: ${response.status}`);
-                }
-            }
-            setAgentId(resolvedAgentId);
-            setIsReady(true);
-            setRuntimeStatus('ready');
-            return true;
-        }
-        catch (error) {
-            setHookError(error instanceof Error ? error.message : 'Agent failed to start');
+        // Mounting the Loop is what creates the agent: it builds it from the
+        // triggers capacity plugin's blueprint — so the page is "ready" at once,
+        // and only waits for the server to have the agent before it fires
+        // triggers at it.
+        setAgentId(agentName);
+        setIsReady(true);
+        setRuntimeStatus('ready');
+        const found = await waitForAgent(agentBaseUrl, agentName);
+        if (!found) {
+            setHookError(`The agent '${agentName}' did not appear on ${agentBaseUrl}.`);
             setRuntimeStatus('error');
             return false;
         }
-    }, [agentBaseUrl, authFetch, agentName]);
+        return true;
+    }, [agentBaseUrl, agentName]);
     const ensureRuntimeReady = useCallback(async () => {
         if (isReady) {
             return true;
@@ -294,18 +265,30 @@ const AgentTriggerInner = ({ onLogout, }) => {
         });
     }, []);
     const streamRunMessages = useCallback(async (targetAgentId, prompt, setMessages, setError, options) => {
-        const endpoint = `${agentBaseUrl}/api/v1/vercel-ai/${encodeURIComponent(targetAgentId)}`;
+        // Two agents, two doors: the trigger agent is the Loop's and speaks
+        // AG-UI; the approval agent the page makes itself speaks Vercel AI,
+        // whose adapter can carry a deferred tool call through an approval.
+        const viaVercel = targetAgentId === approvalAgentName;
+        const endpoint = viaVercel
+            ? `${agentBaseUrl}/api/v1/vercel-ai/${encodeURIComponent(targetAgentId)}`
+            : `${agentBaseUrl}/api/v1/ag-ui/${encodeURIComponent(targetAgentId)}/`;
         if (options?.keepAliveForApproval && approvalStreamRef.current) {
             approvalStreamRef.current.unsubscribe();
             approvalStreamRef.current.adapter.disconnect();
             approvalStreamRef.current = null;
         }
-        const adapter = new VercelAIAdapter({
-            protocol: 'vercel-ai',
-            baseUrl: endpoint,
-            agentId: targetAgentId,
-            headers: token ? { Authorization: `Bearer ${token}` } : undefined,
-        });
+        const adapter = viaVercel
+            ? new VercelAIAdapter({
+                protocol: 'vercel-ai',
+                baseUrl: endpoint,
+                agentId: targetAgentId,
+                headers: token ? { Authorization: `Bearer ${token}` } : undefined,
+            })
+            : new AGUIAdapter({
+                protocol: 'ag-ui',
+                baseUrl: endpoint,
+                agentId: targetAgentId,
+            });
         let latestAssistantText = null;
         let pendingApproval = false;
         const unsubscribe = adapter.subscribe(event => {
@@ -363,7 +346,8 @@ const AgentTriggerInner = ({ onLogout, }) => {
             throw error;
         }
         finally {
-            if (options?.keepAliveForApproval) {
+            if (options?.keepAliveForApproval &&
+                adapter instanceof VercelAIAdapter) {
                 approvalStreamRef.current = { adapter, unsubscribe };
             }
             else {
@@ -814,7 +798,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
-    const triggerRunCurl = `curl -N -X POST '${agentBaseUrl}/api/v1/vercel-ai/${agentId}' -H 'Content-Type: application/json' -H 'Accept: text/event-stream'${token ? " -H 'Authorization: Bearer <TOKEN>'" : ''} --data '{"messages":[{"role":"user","parts":[{"type":"text","text":"${ONCE_TRIGGER_PROMPT.replace(/"/g, '\\"')}"}]}],"trigger":"submit-message","sdkVersion":6}'`;
+    const triggerRunCurl = `curl -X POST '${agentBaseUrl}/api/v1/agents/${agentId}/trigger/run' -H 'Content-Type: application/json'${token ? " -H 'Authorization: Bearer <TOKEN>'" : ''} --data '{"source":"once"}'`;
     const isAgentLaunching = isLaunchingOnce || isLaunchingApproval;
     return (_jsx("fieldset", { disabled: isAgentLaunching, style: {
             border: 0,
@@ -855,7 +839,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                 setActiveApproval(null);
                             }
                         }
-                    }, onClose: () => setActiveApproval(null) }), approvalError && (_jsx(Box, { sx: { px: 3, py: 1 }, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 0 }, children: approvalError }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: isReady ? (_jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Trigger Agent", brandIcon: _jsx(ZapIcon, { size: 16 }), description: `View-only trigger output. Cron: ${cronExpr} | Webhook: ${webhookEnabled ? 'on' : 'off'} | Event: ${eventSubscribed ? eventTopic : 'none'}`, showHeader: true, kernelIndicatorPlacement: "right", autoFocus: false, height: "100%", runtimeId: agentId, showInput: true, disableInputPrompt: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true })) : (_jsx(Box, { sx: {
+                    }, onClose: () => setActiveApproval(null) }), approvalError && (_jsx(Box, { sx: { px: 3, py: 1 }, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 0 }, children: approvalError }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: isReady ? (_jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: LOOP_PLUGINS_AGENTTRI })) : (_jsx(Box, { sx: {
                                     height: '100%',
                                     display: 'flex',
                                     alignItems: 'center',

package/lib/examples/AgentspecsExample.js

@@ -51,7 +51,7 @@ function useJupyterSandboxStatus(baseUrl, isConfigured, enableCodemode, useJupyt
             return undefined;
         }
         // Check if Jupyter variant is selected but not connected
-        if (sandbox.variant === 'jupyter' && !sandbox.jupyter_connected) {
+        if (sandbox.variant === 'jupyter-server' && !sandbox.jupyter_connected) {
             return {
                 message: sandbox.jupyter_error
                     ? `Jupyter Sandbox Error: ${sandbox.jupyter_error}`
@@ -301,7 +301,7 @@ githubClientId, kaggleToken, }) => {
     const localAgentRuntimesBaseUrl = useExampleAgentRuntimesUrl();
     const cloudCatalogBaseUrl = useMemo(() => {
         const configured = normalizeHttpUrl(configuration?.runtimesUrl);
-        const resolvedCloudBaseUrl = normalizeHttpUrl(resolveExampleAgentRuntimesUrl('cloud'));
+        const resolvedCloudBaseUrl = normalizeHttpUrl(resolveExampleAgentRuntimesUrl('datalayer'));
         if (configured && !isLocalhostUrl(configured)) {
             return configured;
         }
@@ -627,7 +627,7 @@ githubClientId, kaggleToken, }) => {
             codemodeConfig?.allow_direct_tool_calls));
         setEnableToolReranker(Boolean(codemodeConfig?.enableToolReranker ??
             codemodeConfig?.enable_tool_reranker));
-        setUseJupyterSandbox(spec.sandboxVariant === 'jupyter');
+        setUseJupyterSandbox(spec.sandboxVariant === 'jupyter-server');
     }, []);
     const mergedSpecForLaunch = useMemo(() => {
         const normalizedProtocol = transport === 'vercel-ai-jupyter' ? 'vercel-ai' : transport;
@@ -831,7 +831,7 @@ githubClientId, kaggleToken, }) => {
                     if (deleteResponse.ok) {
                         return await tryCreate();
                     }
-                    throw new Error(`Failed to delete existing agent '${agentName}' before retry: ${deleteResponse.status}`);
+                    throw new Error(`Failed to delete existing agent '${agentName}' before retry: ${deleteResponse.status}`, { cause: error });
                 }
                 throw error;
             }

package/lib/examples/CellExample.d.ts

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

package/lib/examples/ChatExample.d.ts

@@ -1,12 +1,19 @@
 /**
  * AgentRuntimeChatExample
  *
- * Demonstrates the unified Chat component with automatic agent creation.
- * On mount, it creates an agent from the codeai/simple spec via the
- * REST API, then renders a full-page Chat interface.
+ * The unified Chat component, with whatever agent the selected runtime target
+ * can give it.
  *
- * This mirrors how agent.html works but inside the examples runner,
- * without requiring a CLI `--agent-id` flag at server startup.
+ * Against a runtime that means creating one from the `example-simple` spec
+ * over the REST API and talking to its endpoint. In the browser it means the
+ * in-page harness: the spec asks for `pydantic-ai`, but a page has no server
+ * to turn that loop, so the location decides and the Vercel AI SDK runs it
+ * here instead.
+ *
+ * This example is the plainest case of that split — no sandbox, no tools, no
+ * surface, just a conversation — which is why the choice lives in
+ * `useExampleAgentProtocol` rather than in the notebook-shaped hook it started
+ * out in.
  *
  * Backend: POST /api/v1/agents  →  /api/v1/ag-ui/{agentId}/
  */

package/lib/examples/ChatExample.js

@@ -6,12 +6,19 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * AgentRuntimeChatExample
  *
- * Demonstrates the unified Chat component with automatic agent creation.
- * On mount, it creates an agent from the codeai/simple spec via the
- * REST API, then renders a full-page Chat interface.
+ * The unified Chat component, with whatever agent the selected runtime target
+ * can give it.
  *
- * This mirrors how agent.html works but inside the examples runner,
- * without requiring a CLI `--agent-id` flag at server startup.
+ * Against a runtime that means creating one from the `example-simple` spec
+ * over the REST API and talking to its endpoint. In the browser it means the
+ * in-page harness: the spec asks for `pydantic-ai`, but a page has no server
+ * to turn that loop, so the location decides and the Vercel AI SDK runs it
+ * here instead.
+ *
+ * This example is the plainest case of that split — no sandbox, no tools, no
+ * surface, just a conversation — which is why the choice lives in
+ * `useExampleAgentProtocol` rather than in the notebook-shaped hook it started
+ * out in.
  *
  * Backend: POST /api/v1/agents  →  /api/v1/ag-ui/{agentId}/
  */
@@ -20,17 +27,19 @@ import { Text, Spinner } from '@primer/react';
 import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
 import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
+import { BROWSER_SIGN_IN_REASON, useExampleAgentProtocol, } from './hooks/useExampleAgentProtocol';
+import { runsInBrowser } from '../runtimes/variants';
+import { EXAMPLE_SIMPLE_AGENTSPEC_0_0_1 } from '../specs/agents/agents';
 import { ErrorView } from './components';
 import { Chat } from '../chat';
 setupPrimerPortals();
 const AGENTSPEC_ID = 'example-simple';
 const AGENT_NAME = 'simple';
+const SPEC = EXAMPLE_SIMPLE_AGENTSPEC_0_0_1;
 const AgentRuntimeChatExample = () => {
-    const baseUrl = useExampleAgentRuntimesUrl();
     const agentName = useMemo(() => uniqueAgentId(AGENT_NAME), []);
-    const { agentId, error, status, isReady } = useExampleAgentRuntime({
+    const { agentId, baseUrl, error, status, isReady, variant } = useExampleAgentRuntime({
         exampleId: 'ChatExample',
         agentName,
         specId: AGENTSPEC_ID,
@@ -39,7 +48,16 @@ const AgentRuntimeChatExample = () => {
             agentSpecId: AGENTSPEC_ID,
         },
     });
-    const isCreating = !isReady && status !== 'error';
+    const inBrowser = runsInBrowser(variant);
+    const { protocol, needsSignIn } = useExampleAgentProtocol({
+        inBrowser,
+        agentName,
+        systemPrompt: SPEC.systemPrompt,
+        model: SPEC.model,
+        remoteBaseUrl: baseUrl,
+    });
+    // There is nothing to create in the browser, so nothing to wait for either.
+    const isCreating = !inBrowser && !isReady && status !== 'error';
     // Loading state while agent is being created
     if (isCreating) {
         return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
@@ -52,12 +70,19 @@ const AgentRuntimeChatExample = () => {
                     bg: 'canvas.default',
                 }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { color: 'fg.muted' }, children: ["Creating agent from ", AGENTSPEC_ID, "..."] })] }) }));
     }
-    // Error state
-    if (error || !agentId) {
-        return (_jsx(ThemedProvider, { children: _jsx(ErrorView, { error: "Failed to start agent", detail: error || 'No agent ID returned' }) }));
+    // Error state. In the browser there is no agent id to have — the loop is
+    // here — so the only thing that can be missing is the sign-in the inference
+    // service requires.
+    const failure = inBrowser
+        ? needsSignIn
+            ? BROWSER_SIGN_IN_REASON
+            : error
+        : error || (!agentId ? 'No agent ID returned' : undefined);
+    if (failure) {
+        return (_jsx(ThemedProvider, { children: _jsx(ErrorView, { error: "Failed to start agent", detail: failure }) }));
     }
     // Agent is ready — render the Chat component
-    return (_jsx(Chat, { protocol: "ag-ui", baseUrl: baseUrl, agentId: agentId, title: "Simple Agent", placeholder: "Send a message...", description: "Chat with a simple AI assistant", showHeader: true, kernelIndicatorPlacement: "right", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100vh", runtimeId: agentId, historyEndpoint: `${baseUrl}/api/v1/history`, suggestions: [
+    return (_jsx(Chat, { protocol: inBrowser ? protocol : 'ag-ui', baseUrl: baseUrl, agentId: agentName, title: "Simple Agent", placeholder: "Send a message...", description: "Chat with a simple AI assistant", showHeader: true, kernelIndicatorPlacement: "right", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100vh", runtimeId: agentName, historyEndpoint: inBrowser ? undefined : `${baseUrl}/api/v1/history`, suggestions: [
             {
                 title: 'Hello',
                 message: 'Hello, what can you do?',

package/lib/examples/CopilotKitLexicalExample.d.ts

@@ -11,6 +11,7 @@
  *
  * @module examples/CopilotKitLexicalExample
  */
+import type { JSX } from 'react';
 import '@datalayer/jupyter-react/lib/css/PrismCss';
 import type { ServiceManager } from '@jupyterlab/services';
 import '@datalayer/jupyter-lexical/style/index.css';

package/lib/examples/CopilotKitLexicalExample.js

@@ -1,47 +1,20 @@
 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_KEY: Get from https://datalayer.ai/settings/iam/tokens
- * - VITE_COPILOT_KIT_API_KEY: Get from https://cloud.copilotkit.ai/dashboard
- *
- * You also will need to connect copilotkit to some sort of LLM Add LLM Provider API Key.
- *
- * https://docs.copilotkit.ai/reference/hooks/useFrontendTool
- *
- * @module examples/CopilotKitLexicalExample
- */
 import '@datalayer/jupyter-react/lib/css/PrismCss';
 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 { LexicalExtensionComposer } from '@lexical/react/LexicalExtensionComposer';
 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 { useJupyter } from '@datalayer/jupyter-react';
 import { ThemedJupyterProvider } from './utils/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 { ComponentPickerMenuPlugin, JupyterInputOutputPlugin, DraggableBlockPlugin, LexicalConfigProvider, LexicalStatePlugin, FloatingTextFormatToolbarPlugin, CodeActionMenuPlugin, TableCellResizerPlugin, } from '@datalayer/jupyter-lexical';
 import { useLexicalToolActions } from '../tools/adapters/copilotkit/lexicalHooks';
 import { ActionRegistrar } from '../tools/adapters/copilotkit/CopilotKitToolAdapter';
-import { editorConfig } from './lexical/editorConfig';
+import { editorExtension } from './lexical/editorConfig';
 import '@datalayer/jupyter-lexical/style/index.css';
 import '@copilotkit/react-ui/styles.css';
 import './lexical/lexical-theme.css';
@@ -86,16 +59,6 @@ function LoadContentPlugin({ content }) {
     }, [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.
  */
@@ -137,7 +100,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(ThemedJupyterProvider, { 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(LexicalExtensionComposer, { extension: editorExtension, contentEditable: null, children: _jsxs("div", { className: "lexical-editor-inner", ref: onRef, children: [_jsx(LexicalStatePlugin, {}), _jsx(ContentEditable, { className: "lexical-editor-content", "aria-label": "Lexical Editor" }), _jsx(OnChangePlugin, { onChange: handleChange }), _jsx(TableCellResizerPlugin, {}), _jsx(LoadContentPlugin, { content: content }), _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.d.ts

@@ -1,3 +1,13 @@
+/**
+ * CopilotKit Notebook Example with CopilotKit Integration
+ *
+ * To run this example, create a .env file in the core directory with:
+ * - VITE_DATALAYER_API_KEY: Get from https://datalayer.ai/settings/iam/tokens
+ * - VITE_COPILOT_KIT_API_KEY: Get from https://cloud.copilotkit.ai/dashboard
+ *
+ * You also will need to connect copilotkit to some sort of LLM Add LLM Provider API Key
+ */
+import type { JSX } from 'react';
 import { ServiceManager } from '@jupyterlab/services';
 import '@copilotkit/react-ui/styles.css';
 /**

package/lib/examples/CopilotKitNotebookExample.js

@@ -1,17 +1,4 @@
 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_KEY: Get from https://datalayer.ai/settings/iam/tokens
- * - VITE_COPILOT_KIT_API_KEY: Get from https://cloud.copilotkit.ai/dashboard
- *
- * You also will need to connect copilotkit to some sort of LLM Add LLM Provider API Key
- */
 import React from 'react';
 import { Box } from '@datalayer/primer-addons';
 import { Notebook } from '@datalayer/jupyter-react';
@@ -25,6 +12,7 @@ import { useNotebookToolActions } from '../tools/adapters/copilotkit/notebookHoo
 import { ActionRegistrar } from '../tools/adapters/copilotkit/CopilotKitToolAdapter';
 // Import Matplotlib notebook
 import MatplotlibNotebook from './utils/notebooks/Matplotlib.ipynb.json';
+import { ExampleNotebookToolbar } from './utils/notebookToolbarItems';
 // Fixed notebook ID
 const NOTEBOOK_ID = 'agui-notebook-example';
 // Use the imported Matplotlib notebook
@@ -50,7 +38,7 @@ const NotebookUI = React.memo(function NotebookUI({ serviceManager, }) {
                         borderRadius: 8,
                         padding: 24,
                         backgroundColor: 'var(--bgColor-default)',
-                    }, 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..." }) })) })] }) }));
+                    }, children: serviceManager ? (_jsx(ThemedJupyterProvider, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, Toolbar: ExampleNotebookToolbar, 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/DecksAgent.d.ts

@@ -0,0 +1,21 @@
+/**
+ * A deck beside the chat, written by an agent.
+ *
+ * What this shows is a *plugin* joining a Loop: `@datalayer/decks` is a
+ * Reactor plugin with a Python half of its own, and here it is mounted into
+ * an agent workspace — its list in the sidebar, its view as an editor beside
+ * the conversation, its commands in the palette and in a menu on the
+ * composer, and its tools in the agent's hands. `worker-decks` writes a deck
+ * as data, saves it, opens it, and steps through it while you talk.
+ *
+ * Everything runs in the browser: the agent on the Vercel AI harness, the
+ * decks in the page's catalog. Point the plugin at a `datalayer-decks`
+ * server (`backendUrl`) and the same decks are saved there.
+ *
+ * The sidebar is the plugins panel — switch the decks plugin off and the
+ * Deck view, the menu and the tools all leave together — with the plugin
+ * graph a click away, as in the reactor's music example.
+ */
+import React from 'react';
+declare const DecksAgent: React.FC;
+export default DecksAgent;

package/lib/examples/DecksAgent.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@datalayer/primer-addons';
+import { ThemedProvider } from './utils/themedProvider';
+import { registerDecks } from '@datalayer/decks';
+import { exampleDecks } from '@datalayer/decks/examples';
+import { LoopEmbed } from '../loop';
+import { DeckViewPlugin, LoopDecksPlugin } from '../loop/plugins/decks';
+// The package's example decks, so the catalog has something to open and the
+// agent's suggestions point at decks that exist. Once, at module load.
+registerDecks(exampleDecks);
+// Module-level, so the embed builds its reactor once rather than on every
+// render of this component.
+const DECK_PLUGINS = [LoopDecksPlugin, DeckViewPlugin];
+const DecksAgent = () => (_jsx(ThemedProvider, { children: _jsx(Box, { sx: { height: '100vh', minHeight: 0 }, children: _jsx(LoopEmbed, { target: "browser", agentId: "worker-decks", 
+            /* The deck open beside the chat from the first frame. */
+            defaultEditor: "deck", 
+            /* The header carries the editor choice — deck, notebook, document, or
+               the conversation alone. */
+            showHeader: true, editorSelector: true, commandPalette: true, 
+            /* The plugins panel in the sidebar, and the plugin graph behind its
+               button. */
+            pluginsPanel: true, graph: true, agentSummary: false, plugins: DECK_PLUGINS }) }) }));
+export default DecksAgent;

package/lib/examples/DocumentPageAgent.d.ts

@@ -0,0 +1,19 @@
+/**
+ * A document as a page, with an agent writing in it.
+ *
+ * The same page layout as `NotebookPageAgent`, opened on the document
+ * editor instead of the notebook: a sheet at reading width, the composer
+ * docked above it at that same width, the conversation in a side panel. Ask for a
+ * paragraph, a heading, a code block that runs — the agent writes it into
+ * the document on the page, with the document's own tools, and the result
+ * is a document a reader can keep editing by hand.
+ *
+ * Reactor plugins only: `pageLayout` mounts the layout plugin, the Loop
+ * Shell's agent drives the document tools, and the loop turns in the
+ * browser.
+ *
+ * @module examples/DocumentPageAgent
+ */
+import React from 'react';
+declare const DocumentPageAgent: React.FC;
+export default DocumentPageAgent;

package/lib/examples/DocumentPageAgent.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@datalayer/primer-addons';
+import { ThemedProvider } from './utils/themedProvider';
+import { LoopEmbed } from '../loop';
+const DocumentPageAgent = () => (_jsx(ThemedProvider, { children: _jsx(Box, { sx: { height: '100vh', minHeight: 0 }, children: _jsx(LoopEmbed, { target: "browser", 
+            /* The Loop Shell's agent: it drives the document tools — insert a
+               block, run a code block, read the document — as readily as the
+               notebook's, and its openers work on either. */
+            agentId: "loop-shell", localAgentSpec: "loop-shell", teamId: "", 
+            /* The document, open on the page. */
+            defaultEditor: "document", pageLayout: true, 
+            /* The composer as a draggable card over the top of the page rather
+               than the docked band. */
+            pageLayoutPrompt: "floating", showHeader: true, editorSelector: true, commandPalette: true, agentSummary: false }) }) }));
+export default DocumentPageAgent;

package/lib/examples/Lexical2Example.d.ts

@@ -23,9 +23,9 @@ import './lexical/lexical-theme.css';
 interface ChatLexicalExampleProps {
     serviceManager?: ServiceManager.IManager;
 }
-export declare function ChatLexicalExampleInner({ serviceManager, }: ChatLexicalExampleProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatLexicalExampleInner({ serviceManager, }: ChatLexicalExampleProps): import("react").JSX.Element;
 /**
  * Main example component with Simple wrapper
  */
-export declare function AgentRuntimePopupLexicalExample(): import("react/jsx-runtime").JSX.Element;
+export declare function AgentRuntimePopupLexicalExample(): import("react").JSX.Element;
 export default AgentRuntimePopupLexicalExample;