@datalayer/agent-runtimes 1.0.28 → 1.3.10

package/lib/examples/LoopWorkspaceExample.d.ts

@@ -0,0 +1,150 @@
+/**
+ * The LOOP workspace: a blank shell, and everything else on a checkbox.
+ *
+ * Two claims made checkable in one page.
+ *
+ * The **sidebar** says the extension model is real. The workspace itself
+ * renders one view host and some slots — no prompt, no chat, no editor. Untick
+ * the chat and the prompt goes with it, because the prompt is the chat's.
+ * Untick the notebook and it leaves the chat's editor picker. The panel doing
+ * the unticking is itself a plugin, which is the joke and also the proof — and
+ * the button above it draws the whole graph, so the relationships being claimed
+ * here can be looked at rather than taken on trust.
+ *
+ * The **browser / local / cloud** control in the header says the sandbox is an
+ * interface rather than one implementation with a type annotation. `browser` is
+ * Pyodide in this page; `local` and `cloud` are server-backed and differ in the
+ * variant the server runs. The notebook binds to whichever kernel is there, and
+ * does not know the difference.
+ *
+ * It starts on `browser` because that is the target that needs nothing: no
+ * server, no runtime, no credentials. Move it once there is something to move
+ * it to.
+ *
+ * @module examples/LoopWorkspaceExample
+ */
+import type { JSX } from 'react';
+import { type ReactNode } from 'react';
+import { type SandboxTarget } from '../loop/plugins/agents';
+export type LoopWorkspaceExampleProps = {
+    /** Server backing the session. Defaults to this page's origin. */
+    serverUrl?: string;
+    /**
+     * Render without wrapping the workspace in a theme provider.
+     *
+     * For a host that owns the theme — the landing page embeds this example, and
+     * `ThemedProvider` does not merely provide a theme: it writes the examples'
+     * own choice into the shared primer-addons singleton, which is where that
+     * host reads its theme from. Mounting this unconditionally overwrote the
+     * reader's theme the moment the workspace finished loading.
+     */
+    inheritTheme?: boolean;
+    /**
+     * Which editor opens beside the chat.
+     *
+     * `'none'` leaves the chat full width; the others open that editor as soon
+     * as it can be opened — its plugin has loaded and, for these two, a sandbox
+     * is running.
+     */
+    defaultEditor?: 'none' | 'notebook' | 'document';
+    /** Agent to start with. */
+    agentId?: string;
+    /** Where the sandbox starts. Defaults to the browser, which needs nothing. */
+    initialTarget?: SandboxTarget;
+    /**
+     * Whether a reader may choose where the agent runs.
+     *
+     * True by default: the segmented control in the header is most of what this
+     * example is for.
+     *
+     * False pins the workspace to the browser and hides the control. That is
+     * what a public page needs — a visitor with no account cannot reach a local
+     * server or a Datalayer runtime, so offering all four is offering three
+     * doors of which two are locked.
+     */
+    showAgentVariants?: boolean;
+    /**
+     * The team to work with, by id.
+     *
+     * Given one, the header gains a control for choosing which member the next
+     * prompt reaches. `jupyter` is the notebook's six specialists — analyst,
+     * reviewer, writer, decks, tutor, compactor — behind a supervising analyst.
+     */
+    teamId?: string;
+    /**
+     * Whether the plugin graph is available.
+     *
+     * True by default: the graph is one of the things this example exists to
+     * show, and switching it off in the sidebar is part of that.
+     *
+     * False leaves the plugin out entirely — no view, and no button in the
+     * sidebar, since the graph plugin owns that button. What a public page
+     * wants: a visitor came for a notebook and an agent, and a diagram of the
+     * plugin system is a developer's tool shown to somebody who did not ask for
+     * one.
+     */
+    showGraph?: boolean;
+    /** Whether Ctrl-K opens the command palette. */
+    showCommandPalette?: boolean;
+    /**
+     * Whether the workspace is drawn inside a window.
+     *
+     * The frame is how a page embeds Loop — the landing page does exactly this —
+     * so the example shows it rather than describing it. Off gives the bare
+     * workspace filling whatever it was given, which is what a full-page host
+     * wants.
+     */
+    showWindowFrame?: boolean;
+    /**
+     * Whether the plugin manager is mounted.
+     *
+     * True by default: the sidebar is how this example shows that the extension
+     * model is real, and switching plugins on and off is the point of it.
+     *
+     * False leaves the plugin out, which takes the sidebar with it — the column
+     * exists because something contributed to it, so there is no empty gutter
+     * to tidy up afterwards. What a public page wants: a visitor came for a
+     * notebook and an agent, not for a list of the parts they are made of.
+     */
+    showPluginsManager?: boolean;
+    /**
+     * Whether the header offers a choice of view.
+     *
+     * True by default. False opens on `defaultEditor` and stays there, for a
+     * host embedding the workspace to show one thing.
+     */
+    showViewSelector?: boolean;
+    /**
+     * Whether to hide the chat's own title bar.
+     *
+     * False by default. True for a host whose page already names the workspace,
+     * where the bar repeats a heading the reader has just read.
+     */
+    hideChatHeader?: boolean;
+    /**
+     * Whether the workspace draws its header row.
+     *
+     * True by default. False removes the row and every control a plugin put in
+     * it, for a host whose page already frames the workspace. The plugins stay
+     * switched on — this is about where their controls render, not what they do.
+     */
+    showHeader?: boolean;
+    /**
+     * Where the prompt sits.
+     *
+     * `bottom` (the default) spans the workspace; `bottom-chat` keeps it inside
+     * the chat column, under the transcript, as the other examples do.
+     */
+    promptPlacement?: 'bottom' | 'bottom-chat';
+    /**
+     * Extra controls for the chat's own title bar.
+     *
+     * For a host with something to add beside the agent's name without writing
+     * a plugin to add it. Plugins reach the same row through
+     * `LoopSlots.chatHeader`, which is where anything belonging to a capability
+     * belongs — the trial-key countdown arrives that way.
+     */
+    chatHeaderActions?: ReactNode;
+};
+export declare function LoopWorkspaceExample({ serverUrl, agentId, initialTarget, showAgentVariants, teamId, showGraph, showCommandPalette, showWindowFrame, showPluginsManager, showViewSelector, hideChatHeader, showHeader, promptPlacement, inheritTheme, defaultEditor, chatHeaderActions, }: LoopWorkspaceExampleProps): JSX.Element;
+export default LoopWorkspaceExample;

package/lib/examples/LoopWorkspaceExample.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import { Box } from '@primer/react';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { useReactor, useSignalValue } from '@datalayer/reactor/react';
+import { buildLoopReactor, LoopWorkspace } from '../loop/shell';
+import { loopPlugins } from '../loop/presets';
+import { WindowFrame } from '../loop/plugins/window-frame';
+import { IDLE_SANDBOX_SNAPSHOT_SIGNAL, IDLE_SANDBOX_TARGET_SIGNAL, } from '../loop/core';
+import { AGENTS_PLUGIN_NAME, } from '../loop/plugins/agents';
+import { internalQueryClient } from '../utils';
+import { resolveExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { ThemedProvider } from './utils/themedProvider';
+import { agentSummaryStore } from './utils/agentSummaryStore';
+import { targetHasAgent } from './utils/runtimeTargetStore';
+export function LoopWorkspaceExample({ 
+// The examples Vite server deliberately has no /api proxy. Using the page
+// origin here sends sandbox switches to port 3000 and produces the exact
+// "clicked, nothing happened" failure this example is meant to expose.
+serverUrl = resolveExampleAgentRuntimesUrl('local'), agentId = 'loop-workspace', initialTarget = 'browser', showAgentVariants = true, teamId = 'jupyter', showGraph = true, showCommandPalette = true, showWindowFrame = true, showPluginsManager = true, showViewSelector = true, hideChatHeader = false, showHeader = true, promptPlacement = 'bottom', inheritTheme = false, defaultEditor = 'notebook', chatHeaderActions, }) {
+    // Built once: rebuilding would restart every plugin on each render.
+    const reactor = useMemo(() => buildLoopReactor(loopPlugins({
+        serverUrl,
+        target: initialTarget,
+        defaultEditor,
+        showViewSelector,
+        hideChatHeader,
+        promptPlacement,
+        showAgentVariants,
+        teamId,
+        localAgentSpec: 'example-simple',
+        // The demonstration's switches. Each is left out rather than
+        // mounted-and-hidden: the sidebar is drawn only when something
+        // contributes to it, so leaving these out is what removes the column.
+        graph: showGraph,
+        commandPalette: showCommandPalette,
+        // Opens the title bar's two slots; the frame itself is composed below,
+        // because a plugin cannot wrap the shell.
+        windowFrame: showWindowFrame,
+        pluginsPanel: showPluginsManager,
+    })), [
+        serverUrl,
+        initialTarget,
+        showAgentVariants,
+        teamId,
+        showGraph,
+        showCommandPalette,
+        showWindowFrame,
+        showPluginsManager,
+        showViewSelector,
+        hideChatHeader,
+        promptPlacement,
+        defaultEditor,
+    ]);
+    // Registered here rather than inside the workspace: the checkbox list below
+    // renders first and reads the platform, so it has to exist by then.
+    useReactor(reactor);
+    // The plugin list is a plugin, so it arrives through the sidebar slot rather
+    // than being wrapped around the workspace. Nothing here is above the shell.
+    // Tell the page where this workspace is running.
+    //
+    // The examples shell draws its "Active Agent" panel from a summary store,
+    // and the workspace's segmented control is a *different* control over a
+    // *different* signal — so switching from Browser to Local moved the sandbox
+    // and left the header saying `browser` with no agent id.
+    //
+    // The summary only. Writing the page's `runtimeTargetStore` too looked
+    // tidier — one notion of where things run — but the page mounts each example
+    // under `key={`${example}:${runtimeTarget}`}`, so changing it tore the
+    // workspace down and rebuilt it at its initial target: the control snapped
+    // straight back to Browser. The page-level target is which target the
+    // *example* was opened for; this workspace moves within that, and the two
+    // are not the same fact.
+    //
+    // This example is where they meet: the plugin must not know an examples page
+    // exists, and the page cannot see inside the reactor.
+    const sandbox = reactor.getOutput(AGENTS_PLUGIN_NAME)?.sandbox;
+    const sandboxTarget = useSignalValue(sandbox?.target ?? IDLE_SANDBOX_TARGET_SIGNAL);
+    const sandboxSnapshot = useSignalValue(sandbox?.snapshot ?? IDLE_SANDBOX_SNAPSHOT_SIGNAL);
+    const sandboxState = sandboxSnapshot.state;
+    const sandboxJupyterUrl = sandboxSnapshot.jupyterUrl;
+    useEffect(() => {
+        if (!sandboxTarget) {
+            return;
+        }
+        const summary = {
+            exampleId: 'LoopWorkspaceExample',
+            agentName: agentId,
+            // Only the targets that bring an agent report one. On Browser and
+            // Jupyter the panel should say there is none rather than name one that
+            // cannot answer.
+            agentId: targetHasAgent(sandboxTarget) ? agentId : undefined,
+            location: sandboxTarget,
+            baseUrl: serverUrl,
+            sandboxBaseUrl: sandboxJupyterUrl,
+            status: sandboxState,
+            isReady: sandboxState === 'running',
+        };
+        const publish = () => agentSummaryStore.getState().setActive(summary);
+        publish();
+        // Hold it against the page's own seed.
+        //
+        // The shell re-seeds a base summary whenever its inputs change, and only
+        // spares a richer one whose `location` matches the *page* target — which
+        // this one deliberately does not, because the workspace moves within the
+        // target it was opened at. Without this, an unrelated change on the page
+        // would quietly put the panel back to `browser`.
+        //
+        // Compared by identity against the exact object published above, so a
+        // re-publish cannot trigger itself.
+        return agentSummaryStore.subscribe(state => {
+            if (state.active !== summary) {
+                publish();
+            }
+        });
+    }, [agentId, sandboxTarget, sandboxState, sandboxJupyterUrl, serverUrl]);
+    const shell = (_jsx(LoopWorkspace, { serverUrl: serverUrl, agentId: agentId, reactor: reactor, manageReactor: false, showViewSelector: showViewSelector, showHeader: showHeader, chatHeaderActions: chatHeaderActions }));
+    const workspace = (_jsx(QueryClientProvider, { client: internalQueryClient, children: showWindowFrame ? (
+        /*
+         * The window, composed rather than injected: a plugin cannot wrap the
+         * shell, so the host puts the frame around it. That is the one thing
+         * the host still does, and the one thing only it knows — how much of
+         * its page to give away.
+         *
+         * The room around it is what makes the frame read as a window sitting
+         * on a page rather than as a border drawn at the edges of the screen.
+         */
+        _jsx(Box, { sx: { height: '100%', minHeight: 0, p: 3, boxSizing: 'border-box' }, children: _jsx(WindowFrame, { title: _jsx(Box, { as: "span", sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Loop" }), children: shell }) })) : (_jsx(Box, { sx: { height: '100%', minHeight: 0 }, children: shell })) }));
+    // A host that owns the theme gets the workspace and nothing else.
+    if (inheritTheme) {
+        return workspace;
+    }
+    return (
+    // The theme, as every other example provides it.
+    //
+    // Not decoration: it is what defines the Primer CSS custom properties —
+    // `--bgColor-default` among them — on an ancestor of everything below.
+    // The workspace's own chrome reads Primer tokens through `sx` and looked
+    // right without this, which is why its absence went unnoticed; the
+    // document editor reads them as *CSS variables*, because that is how
+    // Lexical's stylesheets are written (`background: var(--bgColor-default,
+    // #fff)`). With no provider the variable was undefined and every one of
+    // those rules took its white fallback, so the document rendered as a white
+    // sheet inside a dark workspace.
+    //
+    // The plugins the views mount pass `inheritTheme`, so this is the one
+    // provider in the tree — nested providers fight over BaseStyles and font
+    // tokens, and the inner one wins for the wrong reasons.
+    _jsx(ThemedProvider, { children: workspace }));
+}
+export default LoopWorkspaceExample;

package/lib/examples/NotebookAgentExample.d.ts

@@ -1,3 +1,16 @@
+/**
+ * Notebook Agent with Agent-Runtimes Integration
+ *
+ * This example demonstrates using the agent-runtimes ChatFloating component
+ * with notebook tools for AI-assisted notebook editing.
+ *
+ * To run this example:
+ * 1. Start the agent-runtimes server: `npm run start:server`
+ * 2. Start the frontend: `npm run dev`
+ *
+ * @module examples/NotebookAgentExample
+ */
+import type { JSX } from 'react';
 import { ServiceManager } from '@jupyterlab/services';
 /**
  * Main Agent Runtime notebook example component

package/lib/examples/NotebookAgentExample.js

@@ -1,56 +1,20 @@
 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.
- */
-/**
- * Agent Runtime Notebook Example with Agent-Runtimes Integration
- *
- * This example demonstrates using the agent-runtimes ChatFloating component
- * with notebook tools for AI-assisted notebook editing.
- *
- * To run this example:
- * 1. Start the agent-runtimes server: `npm run start:server`
- * 2. Start the frontend: `npm run dev`
- *
- * @module examples/NotebookAgentExample
- */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { Box } from '@datalayer/primer-addons';
 import { Notebook } from '@datalayer/jupyter-react';
 import { ThemedJupyterProvider } from './utils/themedProvider';
 // Agent-runtimes imports
 import { ChatFloating } from '../chat';
 import { useNotebookTools } from '../tools/adapters/agent-runtimes/notebookHooks';
-import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
-import { useExampleAgentRuntime } from './hooks/useExampleAgentRuntime';
+import { useExampleJupyterAgent } from './hooks/useExampleJupyterAgent';
 // Import Matplotlib notebook
 import MatplotlibNotebook from './utils/notebooks/Matplotlib.ipynb.json';
-import { DEFAULT_MODEL } from '../specs';
+import { ExampleNotebookToolbar } from './utils/notebookToolbarItems';
 // Fixed notebook ID
 const NOTEBOOK_ID = 'agui-notebook-example';
 // Use the imported Matplotlib notebook
 const NOTEBOOK_CONTENT = MatplotlibNotebook;
 const AGENT_ID = 'notebook-agent-runtime-example';
-function getJupyterSandboxUrl(serviceManager) {
-    const envUrl = import.meta.env.VITE_JUPYTER_SANDBOX_URL;
-    if (envUrl) {
-        return envUrl;
-    }
-    const baseUrl = serviceManager?.serverSettings?.baseUrl?.replace(/\/$/, '');
-    if (!baseUrl) {
-        return undefined;
-    }
-    if (baseUrl.includes('token=')) {
-        return baseUrl;
-    }
-    const token = serviceManager?.serverSettings?.token;
-    if (!token) {
-        return baseUrl;
-    }
-    const separator = baseUrl.includes('?') ? '&' : '?';
-    return `${baseUrl}${separator}token=${encodeURIComponent(token)}`;
-}
 const NotebookUI = React.memo(function NotebookUI({ serviceManager, onSessionConnection, }) {
     return (_jsxs(Box, { sx: {
             flex: 1,
@@ -63,71 +27,41 @@ const NotebookUI = React.memo(function NotebookUI({ serviceManager, onSessionCon
                     paddingBottom: 3,
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
-                }, children: [_jsx(Box, { as: "h1", sx: { margin: 0 }, children: "Agent Runtime Notebook Example" }), _jsx("p", { children: "Platform-agnostic tool usage with agent-runtimes integration. Use the AI copilot to manipulate the notebook." })] }), _jsx(Box, { sx: {
+                }, children: [_jsx(Box, { as: "h1", sx: { margin: 0 }, children: "Notebook Agent Example" }), _jsx("p", { children: "Platform-agnostic usage with agent-runtimes integration. Use the AI Agent to manipulate the Notebook." })] }), _jsx(Box, { sx: {
                     border: '1px solid',
                     borderColor: 'border.default',
                     borderRadius: 2,
                     padding: 3,
                     backgroundColor: 'canvas.default',
-                }, children: serviceManager ? (_jsx(ThemedJupyterProvider, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, serviceManager: serviceManager, onSessionConnection: onSessionConnection, height: "calc(100vh - 300px)", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { sx: { padding: 3 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }));
+                }, children: serviceManager ? (_jsx(ThemedJupyterProvider, { children: _jsx(Notebook, { nbformat: NOTEBOOK_CONTENT, id: NOTEBOOK_ID, Toolbar: ExampleNotebookToolbar, serviceManager: serviceManager, onSessionConnection: onSessionConnection, height: "calc(100vh - 300px)", cellSidebarMargin: 120, startDefaultKernel: true }) })) : (_jsx(Box, { sx: { padding: 3 }, children: _jsx("p", { children: "Loading service manager..." }) })) })] }));
 });
 function NotebookWithChat({ serviceManager, }) {
-    const baseUrl = useExampleAgentRuntimesUrl();
-    const jupyterSandboxUrl = useMemo(() => getJupyterSandboxUrl(serviceManager), [serviceManager]);
-    const [createRequested, setCreateRequested] = useState(false);
     const [notebookKernel, setNotebookKernel] = useState(null);
-    const { agentId, isReady, status, error, createAgent } = useExampleAgentRuntime({
+    // Get notebook tools. Which of the chat and the harness runs them depends on
+    // where the loop turns, and the hook decides that.
+    const frontendTools = useNotebookTools(NOTEBOOK_ID);
+    const { agentReady, protocol: protocolConfig, chatFrontendTools, error, unavailableReason, } = useExampleJupyterAgent({
         exampleId: 'NotebookAgentExample',
         agentName: AGENT_ID,
-        autoCreateAgent: false,
-        agentConfig: {
-            name: AGENT_ID,
-            description: 'Demo agent for notebook example',
-            protocol: 'vercel-ai',
-            model: DEFAULT_MODEL,
-            systemPrompt: 'You are a helpful AI assistant that helps users work with Jupyter notebooks. For notebook operations, always use the notebook frontend tools (runCell, readAllCells, readCell, insertCell, updateCell, deleteCells) so actions happen in the live notebook UI. Use executeCode only for temporary inspection code that should not modify notebook cells.',
-            enableCodemode: false,
-            sandboxVariant: 'jupyter',
-            jupyterSandbox: jupyterSandboxUrl,
-        },
+        description: 'Demo agent for notebook example',
+        systemPrompt: 'You are a helpful AI assistant that helps users work with Jupyter notebooks. For notebook operations, always use the notebook frontend tools (runCell, readAllCells, readCell, insertCell, updateCell, deleteCells) so actions happen in the live notebook UI. Use executeCodeInNotebook only for temporary inspection code that should not modify notebook cells.',
+        serviceManager,
+        frontendTools,
     });
-    useEffect(() => {
-        if (!jupyterSandboxUrl || createRequested || agentId) {
-            return;
-        }
-        setCreateRequested(true);
-        void createAgent({
-            name: AGENT_ID,
-            description: 'Demo agent for notebook example',
-            protocol: 'vercel-ai',
-            model: DEFAULT_MODEL,
-            systemPrompt: 'You are a helpful AI assistant that helps users work with Jupyter notebooks. For notebook operations, always use the notebook frontend tools (runCell, readAllCells, readCell, insertCell, updateCell, deleteCells) so actions happen in the live notebook UI. Use executeCode only for temporary inspection code that should not modify notebook cells.',
-            enableCodemode: false,
-            sandboxVariant: 'jupyter',
-            jupyterSandbox: jupyterSandboxUrl,
-        }).catch(() => {
-            setCreateRequested(false);
-        });
-    }, [jupyterSandboxUrl, createRequested, agentId, createAgent]);
-    const effectiveReady = isReady || status === 'ready';
+    // The example's own agent, not merely the runtime: on the cloud target the
+    // runtime is ready before this agent has been registered on it.
+    const effectiveReady = agentReady;
+    // One failed attempt is reported, not retried — see `useExampleJupyterAgent`.
+    const chatError = error || unavailableReason;
     const handleSessionConnection = useCallback((session) => {
         setNotebookKernel(session?.kernel ?? null);
     }, []);
-    const protocolConfig = useMemo(() => ({
-        type: 'vercel-ai',
-        endpoint: `${baseUrl}/api/v1/vercel-ai/${AGENT_ID}`,
-        agentId: AGENT_ID,
-        enableConfigQuery: true,
-        configEndpoint: `${baseUrl}/api/v1/configure`,
-    }), [baseUrl]);
-    // Get notebook tools for ChatFloating
-    const frontendTools = useNotebookTools(NOTEBOOK_ID);
     return (_jsxs(Box, { sx: {
             height: '100%',
             width: '100%',
             display: 'flex',
             overflow: 'hidden',
-        }, children: [_jsx(NotebookUI, { serviceManager: serviceManager, onSessionConnection: handleSessionConnection }), error && (_jsxs(Box, { sx: {
+        }, children: [_jsx(NotebookUI, { serviceManager: serviceManager, onSessionConnection: handleSessionConnection }), chatError && (_jsxs(Box, { sx: {
                     position: 'fixed',
                     bottom: 20,
                     right: 20,
@@ -136,7 +70,23 @@ function NotebookWithChat({ serviceManager, }) {
                     color: 'danger.fg',
                     borderRadius: 2,
                     maxWidth: 300,
-                }, children: [_jsx("strong", { children: "Error:" }), " ", error] })), effectiveReady && (_jsx(ChatFloating, { protocol: protocolConfig, title: "Notebook AI Agent Runtime", description: "Hi! I can help you edit notebook cells. Try: 'Add a new code cell', 'Run cell 1', or 'Delete the last cell'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", frontendTools: frontendTools, useStore: false, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, panelProps: {
+                }, children: [_jsx("strong", { children: "Error:" }), " ", chatError] })), effectiveReady && (_jsx(ChatFloating, { protocol: protocolConfig, title: "Notebook AI Agent Runtime", description: "Hi! I can help you edit notebook cells. Try: 'Add a new code cell', 'Run cell 1', or 'Delete the last cell'", defaultOpen: true, defaultViewMode: "panel", position: "bottom-right", frontendTools: chatFrontendTools, useStore: false, 
+                /*
+                  Every control this chat has, which is what an example is for.
+      
+                  The menus draw themselves only where there is something behind
+                  them: on a remote agent the config request answers and all three
+                  appear, while an in-page agent has no config endpoint to ask, so
+                  tools and skills are simply absent rather than pending. That used
+                  to read as "Loading controls..." for ever.
+                */
+                showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, 
+                // The ring, here of all places: an agent working through a notebook
+                // is the case that actually fills a context window, so how it is
+                // being spent is worth a picture rather than two numbers.
+                showContextRing: true, showInformation: true, showHeader: true, 
+                // The Lexical editor, which is the one with the `@` menu.
+                promptVariant: "lexical", panelProps: {
                     kernel: notebookKernel,
                 }, suggestions: [
                     {

package/lib/examples/NotebookAgentSidebarExample.d.ts

@@ -1,13 +1,19 @@
 import { ServiceManager } from '@jupyterlab/services';
 /**
- * Agent Runtime Notebook Chat  Sidebar Example with Simple integration
+ * Notebook Chat Sidebar Example
  */
 interface ChatJupyterNotebookExampleProps {
     serviceManager?: ServiceManager.IManager;
 }
-export declare function AgentRuntimeNotebookExampleInner({ serviceManager, }: ChatJupyterNotebookExampleProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentRuntimeNotebookExampleInner({ serviceManager, }: ChatJupyterNotebookExampleProps): import("react").JSX.Element;
 /**
- * Main example component with Simple wrapper
+ * The example, in the app's theme.
+ *
+ * The service manager comes from the shell, as it does in every other example:
+ * the shell owns which of the four runtime targets is selected, and reading it
+ * from an ambient Jupyter provider instead — which is what this example used
+ * to do — meant it could be showing a notebook on a different runtime than the
+ * one the picker says.
  */
-export declare function AgentRuntimeNotebookAgentSidebarExample(): import("react/jsx-runtime").JSX.Element;
+export declare function AgentRuntimeNotebookAgentSidebarExample({ serviceManager, }: ChatJupyterNotebookExampleProps): import("react").JSX.Element;
 export default AgentRuntimeNotebookAgentSidebarExample;