@datalayer/agent-runtimes 0.0.11 → 0.0.12

package/lib/AgentNotebook.js

@@ -0,0 +1,192 @@
+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.
+ */
+/**
+ * AgentNotebook
+ *
+ * Standalone notebook + chat interface served at /static/agent-notebook.html.
+ * Connects to the agent-runtimes AG-UI endpoint and provides a Jupyter
+ * notebook alongside the Chat component with notebook tools registered.
+ *
+ * The page is opened by codeai with a URL like:
+ *   http://127.0.0.1:<port>/static/agent-notebook.html?agentId=<id>
+ *
+ * Query parameters:
+ *   - agentId: the agent identifier (required, set by codeai)
+ *   - jupyterBaseUrl: base URL for the Jupyter server (optional, falls back to jupyter-config-data)
+ *   - jupyterToken: token for the Jupyter server (optional, falls back to jupyter-config-data)
+ */
+import { useEffect, useState } from 'react';
+import { Text, Spinner } from '@primer/react';
+import { AlertIcon } from '@primer/octicons-react';
+import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
+import { DatalayerThemeProvider } from '@datalayer/core';
+import { Notebook, JupyterReactTheme, loadJupyterConfig, createServerSettings, getJupyterServerUrl, getJupyterServerToken, setJupyterServerUrl, setJupyterServerToken, } from '@datalayer/jupyter-react';
+import { ServiceManager } from '@jupyterlab/services';
+import { Chat } from './components/chat';
+import { useNotebookTools } from './tools/adapters/agent-runtimes/notebookHooks';
+import { DEFAULT_MODEL } from './specs';
+import MatplotlibNotebook from './examples/stores/notebooks/Matplotlib.ipynb.json';
+import '../style/primer-primitives.css';
+setupPrimerPortals();
+const BASE_URL = window.location.origin;
+const NOTEBOOK_ID = 'agent-notebook';
+function getQueryParam(name) {
+    return new URLSearchParams(window.location.search).get(name);
+}
+function getAgentId() {
+    return getQueryParam('agentId') || 'default';
+}
+/**
+ * Initialise Jupyter configuration.
+ *
+ * Priority:
+ *   1. Query parameters (jupyterBaseUrl / jupyterToken)
+ *   2. <script id="jupyter-config-data"> block in the HTML page
+ */
+function initJupyterConfig() {
+    // Load embedded config first
+    loadJupyterConfig();
+    // Override with query parameters when supplied by codeai
+    const qBaseUrl = getQueryParam('jupyterBaseUrl');
+    const qToken = getQueryParam('jupyterToken');
+    if (qBaseUrl)
+        setJupyterServerUrl(qBaseUrl);
+    if (qToken)
+        setJupyterServerToken(qToken);
+    // Also check for jupyter-config-data embedded in the page (may contain
+    // values injected at build/serve time)
+    const el = document.getElementById('jupyter-config-data');
+    if (el?.textContent) {
+        try {
+            const cfg = JSON.parse(el.textContent);
+            if (!qBaseUrl && cfg.baseUrl)
+                setJupyterServerUrl(cfg.baseUrl);
+            if (!qToken && cfg.token)
+                setJupyterServerToken(cfg.token);
+        }
+        catch {
+            // ignore
+        }
+    }
+}
+const NotebookPanel = ({ serviceManager }) => (_jsx(Box, { sx: {
+        flex: 1,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        borderRight: '1px solid',
+        borderColor: 'border.default',
+    }, children: _jsx(JupyterReactTheme, { children: _jsx(Box, { sx: { height: '100vh' }, children: _jsx(Notebook, { nbformat: MatplotlibNotebook, id: NOTEBOOK_ID, serviceManager: serviceManager, height: "100vh", cellSidebarMargin: 120, startDefaultKernel: true }) }) }) }));
+const ChatPanel = ({ agentId }) => {
+    // Register notebook tools so the agent can manipulate cells
+    const notebookTools = useNotebookTools(NOTEBOOK_ID);
+    return (_jsx(Box, { sx: {
+            width: '420px',
+            minWidth: '320px',
+            display: 'flex',
+            flexDirection: 'column',
+            overflow: 'hidden',
+        }, children: _jsx(Chat, { transport: "ag-ui", baseUrl: BASE_URL, agentId: agentId, title: "Agent Notebook", placeholder: "Ask about the notebook...", description: "Chat with the agent to manipulate the notebook", showHeader: true, height: "100vh", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, frontendTools: notebookTools, autoFocus: true, runtimeId: agentId, historyEndpoint: `${BASE_URL}/api/v1/history`, suggestions: [
+                {
+                    title: 'Add a cell',
+                    message: 'Insert a new code cell into the notebook',
+                },
+                {
+                    title: 'Run first cell',
+                    message: 'Run the first cell in the notebook',
+                },
+                {
+                    title: 'Show cells',
+                    message: 'Show the notebook cells content and compute the number of cells',
+                },
+            ], submitOnSuggestionClick: true }) }));
+};
+// ─── Main component ─────────────────────────────────────────────────────────
+export const AgentNotebook = () => {
+    const [agentId] = useState(getAgentId);
+    const [isReady, setIsReady] = useState(false);
+    const [error, setError] = useState(null);
+    const [serviceManager, setServiceManager] = useState(null);
+    // Verify the agent exists AND initialise the Jupyter service manager
+    useEffect(() => {
+        let cancelled = false;
+        const init = async () => {
+            try {
+                // 1. Ensure agent exists — create if missing
+                const getResp = await fetch(`${BASE_URL}/api/v1/agents/${encodeURIComponent(agentId)}`);
+                if (!getResp.ok) {
+                    const createResp = await fetch(`${BASE_URL}/api/v1/agents`, {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify({
+                            name: agentId,
+                            description: 'Agent created by Agent Notebook page',
+                            agent_library: 'pydantic-ai',
+                            transport: 'ag-ui',
+                            model: DEFAULT_MODEL,
+                            system_prompt: 'You are a helpful AI assistant that helps users work with Jupyter notebooks. You can help with code, explanations, and data analysis.',
+                        }),
+                    });
+                    if (!createResp.ok && createResp.status !== 400) {
+                        const d = await createResp.json().catch(() => ({}));
+                        throw new Error(d.detail || `Failed to create agent: ${createResp.status}`);
+                    }
+                }
+                // 2. Initialise Jupyter
+                initJupyterConfig();
+                const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
+                const manager = new ServiceManager({ serverSettings });
+                await manager.ready;
+                if (!cancelled) {
+                    setServiceManager(manager);
+                    setIsReady(true);
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err instanceof Error ? err.message : 'Failed to initialise');
+                }
+            }
+        };
+        init();
+        return () => {
+            cancelled = true;
+        };
+    }, [agentId]);
+    // Loading
+    if (!isReady && !error) {
+        return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: '100vh',
+                    gap: 3,
+                    bg: 'canvas.default',
+                }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { color: 'fg.muted' }, children: ["Connecting to agent ", agentId, "\u2026"] })] }) }));
+    }
+    // Error
+    if (error) {
+        return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: '100vh',
+                    gap: 3,
+                    bg: 'canvas.default',
+                }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 2 }, children: "Failed to connect" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: error })] }) }));
+    }
+    // Ready — notebook + chat side-by-side
+    return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+                display: 'flex',
+                height: '100vh',
+                width: '100vw',
+                overflow: 'hidden',
+                bg: 'canvas.default',
+            }, children: [serviceManager && _jsx(NotebookPanel, { serviceManager: serviceManager }), _jsx(ChatPanel, { agentId: agentId })] }) }));
+};
+export default AgentNotebook;

package/lib/agent-lexical-main.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/agent-lexical-main.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { createRoot } from 'react-dom/client';
+import { AgentLexical } from './AgentLexical';
+const rootElement = document.getElementById('root');
+if (rootElement) {
+    createRoot(rootElement).render(_jsx(AgentLexical, {}));
+}

package/lib/agent-main.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/agent-main.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { createRoot } from 'react-dom/client';
+import { Agent } from './Agent';
+const rootElement = document.getElementById('root');
+if (rootElement) {
+    createRoot(rootElement).render(_jsx(Agent, {}));
+}

package/lib/agent-notebook-main.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/agent-notebook-main.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { createRoot } from 'react-dom/client';
+// import { Agent as AgentNotebook } from './Agent';
+import { AgentNotebook } from './AgentNotebook';
+const rootElement = document.getElementById('root');
+if (rootElement) {
+    createRoot(rootElement).render(_jsx(AgentNotebook, {}));
+}

package/lib/components/AgentConfiguration.d.ts

@@ -1,9 +1,10 @@
 import React from 'react';
-import type { Agent } from '../examples/stores/examplesStore';
-import type { Transport, Extension } from './chat';
+import type { Agent } from '../types/Types';
+import type { Transport } from './chat/components';
+import type { Extension } from './chat/types';
 import type { McpServerSelection } from './McpServerManager';
 import type { OAuthProvider, Identity } from '../identity';
-import type { MCPServerTool as MCPServerToolType } from '../types';
+import type { MCPServerTool as MCPServerToolType } from '../types/Types';
 /**
  * Agent spec entry from the library endpoint.
  */
@@ -43,25 +44,6 @@ export interface SkillOption {
     name: string;
     description?: string;
 }
-/**
- * MCP Server configuration from backend
- */
-export interface MCPServerConfig {
-    id: string;
-    name: string;
-    url?: string;
-    enabled: boolean;
-    tools: MCPServerTool[];
-    command?: string;
-    args?: string[];
-    isAvailable?: boolean;
-    isRunning?: boolean;
-    /** True if this server is from mcp.json config (vs catalog) */
-    isConfig?: boolean;
-    transport?: string;
-    /** Required environment variables for this server */
-    requiredEnvVars?: string[];
-}
 type AgentLibrary = 'pydantic-ai' | 'langchain' | 'jupyter-ai';
 export type { AgentLibrary };
 export type { Transport };

package/lib/components/AgentConfiguration.js

@@ -8,8 +8,8 @@ import { Text, TextInput, Button, FormControl, Select, Checkbox, Spinner, Flash,
 import { ToolsIcon, KeyIcon, SyncIcon, PlusIcon, XIcon, LinkExternalIcon, } from '@primer/octicons-react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
+import { IdentityCard } from './chat/components';
 import { IdentityConnect, useIdentity } from '../identity';
-import { IdentityCard } from './chat';
 /**
  * Helper: is the selected agent id a library spec?
  */
@@ -262,7 +262,7 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
     const isNewAgentMode = selectedAgentId === 'new-agent' || isSpecSelection(selectedAgentId);
     // True when a library spec is selected (fields locked down except Name, URL, Library, Model, Transport, Extensions)
     const isSpecMode = isSpecSelection(selectedAgentId);
-    // Fetch skills from the backend (only when codemode is enabled)
+    // Fetch skills from the backend (always available, independent of codemode)
     const skillsQuery = useQuery({
         queryKey: ['agent-skills', baseUrl],
         queryFn: async () => {
@@ -272,7 +272,7 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
             }
             return response.json();
         },
-        enabled: !!baseUrl && enableCodemode,
+        enabled: !!baseUrl,
         staleTime: 1000 * 60 * 5, // 5 minutes
         retry: 1,
     });
@@ -314,9 +314,9 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
     const configServers = mcpServersQuery.data || configQuery.data?.mcpServers || [];
     const catalogServers = catalogServersQuery.data || [];
     const models = configQuery.data?.models || [];
-    // Use fetched skills when codemode is enabled, otherwise use passed availableSkills (which may be empty)
+    // Use fetched skills when available, otherwise use passed availableSkills (which may be empty)
     const fetchedSkills = skillsQuery.data?.skills || [];
-    const displaySkills = enableCodemode ? fetchedSkills : availableSkills;
+    const displaySkills = fetchedSkills.length > 0 ? fetchedSkills : availableSkills;
     const skillsEnabled = selectedSkills.length > 0;
     const selectedConfigServers = selectedMcpServers
         .filter(s => s.origin === 'config')
@@ -452,14 +452,14 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
                                     color: 'fg.muted',
                                     fontWeight: 'normal',
                                     ml: 2,
-                                }, children: "\u2014 defined by spec" }))] }), _jsx(Box, { sx: { display: 'flex', gap: 4, opacity: isSpecMode ? 0.6 : 1 }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableCodemode, disabled: !isNewAgentMode || isSpecMode, onChange: e => onEnableCodemodeChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code to compose tools" })] })] }) }), skillsEnabled && enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills provide curated capabilities; Codemode composes tools with Python for multi-step execution." }) })), enableCodemode && (_jsxs(Box, { sx: { mt: 3, display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: allowDirectToolCalls, disabled: !isNewAgentMode || isSpecMode, onChange: e => onAllowDirectToolCallsChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Allow direct tool calls" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Expose call_tool for simple, single-tool operations" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableToolReranker, disabled: !isNewAgentMode || isSpecMode, onChange: e => onEnableToolRerankerChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Enable tool reranker" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Reorder search results using the configured reranker" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: useJupyterSandbox, disabled: !isNewAgentMode || isSpecMode, onChange: e => onUseJupyterSandboxChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Use Jupyter Sandbox" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code in a Jupyter kernel instead of local-eval" })] })] })] }))] }), _jsxs(Box, { sx: {
+                                }, children: "\u2014 defined by spec" }))] }), _jsx(Box, { sx: { display: 'flex', gap: 4, opacity: isSpecMode ? 0.6 : 1 }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableCodemode, disabled: !isNewAgentMode || isSpecMode, onChange: e => onEnableCodemodeChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code to compose tools" })] })] }) }), skillsEnabled && enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills provide curated capabilities; Codemode composes tools with Python for multi-step execution." }) })), skillsEnabled && !enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills will run with a standalone code sandbox for script execution. Enable Codemode to compose skills with other tools." }) })), enableCodemode && (_jsxs(Box, { sx: { mt: 3, display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: allowDirectToolCalls, disabled: !isNewAgentMode || isSpecMode, onChange: e => onAllowDirectToolCallsChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Allow direct tool calls" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Expose call_tool for simple, single-tool operations" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableToolReranker, disabled: !isNewAgentMode || isSpecMode, onChange: e => onEnableToolRerankerChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Enable tool reranker" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Reorder search results using the configured reranker" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: useJupyterSandbox, disabled: !isNewAgentMode || isSpecMode, onChange: e => onUseJupyterSandboxChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Use Jupyter Sandbox" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code in a Jupyter kernel instead of local-eval" })] })] })] }))] }), _jsxs(Box, { sx: {
                     marginBottom: 3,
                     padding: 3,
                     border: '1px solid',
                     borderColor: 'border.default',
                     borderRadius: 2,
                     backgroundColor: 'canvas.default',
-                    opacity: isSpecMode ? 0.6 : enableCodemode ? 1 : 0.5,
+                    opacity: isSpecMode ? 0.6 : 1,
                 }, children: [_jsxs(Box, { sx: {
                             display: 'flex',
                             alignItems: 'center',
@@ -470,7 +470,7 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
                                             color: 'fg.muted',
                                             fontWeight: 'normal',
                                             ml: 2,
-                                        }, children: "\u2014 defined by spec" }))] }), skillsQuery.isLoading && _jsx(Spinner, { size: "small" }), enableCodemode && !skillsQuery.isLoading && (_jsx(Button, { variant: "invisible", size: "small", onClick: () => skillsQuery.refetch(), sx: { padding: 1 }, "aria-label": "Refresh skills", children: _jsx(SyncIcon, { size: 14 }) }))] }), !enableCodemode ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Enable Codemode to use skills." })) : skillsQuery.isError ? (_jsx(Flash, { variant: "warning", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Unable to fetch skills. Check that the server is running." }) })) : displaySkills.length === 0 && !skillsQuery.isLoading ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No skills available." })) : (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: displaySkills.map(skill => (_jsxs(Box, { sx: {
+                                        }, children: "\u2014 defined by spec" }))] }), skillsQuery.isLoading && _jsx(Spinner, { size: "small" }), !skillsQuery.isLoading && (_jsx(Button, { variant: "invisible", size: "small", onClick: () => skillsQuery.refetch(), sx: { padding: 1 }, "aria-label": "Refresh skills", children: _jsx(SyncIcon, { size: 14 }) }))] }), skillsQuery.isError ? (_jsx(Flash, { variant: "warning", sx: { marginBottom: 2 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Unable to fetch skills. Check that the server is running." }) })) : displaySkills.length === 0 && !skillsQuery.isLoading ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No skills available." })) : (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: displaySkills.map(skill => (_jsxs(Box, { sx: {
                                 display: 'flex',
                                 alignItems: 'center',
                                 gap: 2,

package/lib/components/chat/components/AgentDetails.d.ts

@@ -26,9 +26,11 @@ export interface AgentDetailsProps {
     onIdentityDisconnect?: (provider: OAuthProvider) => void;
     /** Callback to go back to chat view */
     onBack: () => void;
+    /** Whether to show the header with back button (default: true) */
+    showBackHeader?: boolean;
 }
 /**
  * AgentDetails component displays comprehensive information about the agent.
  */
-export declare function AgentDetails({ name, protocol, url, messageCount, agentId, apiBase, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, }: AgentDetailsProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentDetails({ name, protocol, url, messageCount, agentId, apiBase, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, showBackHeader, }: AgentDetailsProps): import("react/jsx-runtime").JSX.Element;
 export default AgentDetails;

package/lib/components/chat/components/AgentDetails.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * AgentDetails component - Shows detailed information about the agent
  * including name, protocol, URL, message count, and context details.
  */
-import { ArrowLeftIcon, CheckCircleIcon, XCircleIcon, CodeIcon, ZapIcon, DownloadIcon, NoteIcon, ServerIcon, } from '@primer/octicons-react';
+import { ArrowLeftIcon, CheckCircleIcon, XCircleIcon, CodeIcon, BriefcaseIcon, DownloadIcon, NoteIcon, ServerIcon, } from '@primer/octicons-react';
 import { Button, Heading, IconButton, Text, Label, Spinner, ToggleSwitch, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { AiAgentIcon } from '@datalayer/icons-react';
@@ -171,7 +171,7 @@ async function downloadContextSnapshotAsCSV(agentId, apiBase) {
 /**
  * AgentDetails component displays comprehensive information about the agent.
  */
-export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, agentId, apiBase, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, }) {
+export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, agentId, apiBase, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, showBackHeader = true, }) {
     const queryClient = useQueryClient();
     // Fetch MCP toolsets status
     const { data: mcpStatus, isLoading: mcpLoading } = useQuery({
@@ -239,14 +239,14 @@ export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, a
             height: '100%',
             bg: 'canvas.default',
             overflow: 'auto',
-        }, children: [_jsxs(Box, { sx: {
+        }, children: [showBackHeader && (_jsxs(Box, { sx: {
                     display: 'flex',
                     alignItems: 'center',
                     gap: 2,
                     p: 3,
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
-                }, children: [_jsx(IconButton, { icon: ArrowLeftIcon, "aria-label": "Back to chat", variant: "invisible", onClick: onBack }), _jsx(Heading, { as: "h2", sx: { fontSize: 3, fontWeight: 'semibold' }, children: "Agent Details" })] }), _jsxs(Box, { sx: { p: 3, display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs(Box, { sx: {
+                }, children: [_jsx(IconButton, { icon: ArrowLeftIcon, "aria-label": "Back to chat", variant: "invisible", onClick: onBack }), _jsx(Heading, { as: "h2", sx: { fontSize: 3, fontWeight: 'semibold' }, children: "Agent Details" })] })), _jsxs(Box, { sx: { p: 3, display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsxs(Box, { sx: {
                             display: 'flex',
                             alignItems: 'center',
                             gap: 3,
@@ -557,7 +557,7 @@ export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, a
                                                                         overflow: 'hidden',
                                                                         textOverflow: 'ellipsis',
                                                                         whiteSpace: 'nowrap',
-                                                                    }, title: codemodeStatus.sandbox.python_path, children: codemodeStatus.sandbox.python_path })] }))] })] })), codemodeStatus.skills.length > 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ZapIcon, { size: 16 }), _jsxs(Text, { sx: {
+                                                                    }, title: codemodeStatus.sandbox.python_path, children: codemodeStatus.sandbox.python_path })] }))] })] })), codemodeStatus.skills.length > 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(BriefcaseIcon, { size: 16 }), _jsxs(Text, { sx: {
                                                                 fontSize: 0,
                                                                 fontWeight: 'semibold',
                                                                 color: 'fg.muted',
@@ -594,6 +594,6 @@ export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, a
                                     borderRadius: 2,
                                     border: '1px solid',
                                     borderColor: 'border.default',
-                                }, children: _jsx(ContextInspector, { agentId: agentId, apiBase: apiBase }) })] })), _jsx(AgentIdentity, { providers: identityProviders, title: "Connected Accounts", showHeader: true, showDescription: true, description: "OAuth identities connected to this agent. Agents can use these to access external services like GitHub repositories on your behalf.", showExpirationDetails: true, allowReconnect: Boolean(identityProviders), onConnect: onIdentityConnect, onDisconnect: onIdentityDisconnect }), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { variant: "primary", onClick: onBack, sx: { width: '100%' }, children: "Back to Chat" }) })] })] }));
+                                }, children: _jsx(ContextInspector, { agentId: agentId, apiBase: apiBase }) })] })), _jsx(AgentIdentity, { providers: identityProviders, title: "Connected Accounts", showHeader: true, showDescription: true, description: "OAuth identities connected to this agent. Agents can use these to access external services like GitHub repositories on your behalf.", showExpirationDetails: true, allowReconnect: Boolean(identityProviders), onConnect: onIdentityConnect, onDisconnect: onIdentityDisconnect }), showBackHeader && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { variant: "primary", onClick: onBack, sx: { width: '100%' }, children: "Back to Chat" }) }))] })] }));
 }
 export default AgentDetails;

package/lib/components/chat/components/Chat.d.ts

@@ -1,5 +1,6 @@
 import { type Suggestion } from './base/ChatBase';
-import type { ModelConfig } from './base/ChatBase';
+import type { ModelConfig, ChatViewMode } from './base/ChatBase';
+import type { FrontendToolDefinition } from '../types/tool';
 import type { McpServerSelection } from '../types';
 import type { OAuthProvider, OAuthProviderConfig, Identity } from '../../../identity';
 /**
@@ -105,9 +106,14 @@ export interface ChatProps {
      * Endpoint URL for fetching conversation history.
      * When runtimeId is provided, this endpoint is called to fetch
      * the conversation history on mount.
-     * If not provided, defaults to `{protocol.endpoint}/history`.
+     * If not provided, defaults to `{protocol.endpoint}/api/v1/history`.
      */
     historyEndpoint?: string;
+    /**
+     * A prompt to append and send after the conversation history is loaded.
+     * The message is shown in the chat and sent to the agent exactly once.
+     */
+    pendingPrompt?: string;
     /**
      * Error banner to display at the top of the chat.
      * Use this to show sandbox connection errors or other warnings.
@@ -116,6 +122,26 @@ export interface ChatProps {
         message: string;
         variant?: 'danger' | 'warning';
     };
+    /**
+     * Show the information icon in the header.
+     * When clicked, it opens the agent details panel.
+     * @default false
+     */
+    showInformation?: boolean;
+    /**
+     * Current chat view mode for the header segmented toggle.
+     * When provided, a view-mode toggle is rendered in the header.
+     */
+    chatViewMode?: ChatViewMode;
+    /**
+     * Callback when the user switches chat view mode via the header toggle.
+     */
+    onChatViewModeChange?: (mode: ChatViewMode) => void;
+    /**
+     * Frontend tool definitions to register with the chat.
+     * Pass an empty array to explicitly disable all frontend tools.
+     */
+    frontendTools?: FrontendToolDefinition[];
 }
 /**
  * Chat Component
@@ -158,5 +184,5 @@ export interface ChatProps {
  * />
  * ```
  */
-export declare function Chat({ transport, extensions: _extensions, baseUrl, wsUrl, agentId, placeholder, title, autoConnect: _autoConnect, streaming: _streaming, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height, showHeader, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, showTokenUsage, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount, suggestions, submitOnSuggestionClick, description, autoFocus, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, errorBanner, }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chat({ transport, extensions: _extensions, baseUrl, wsUrl, agentId, placeholder, title, autoConnect: _autoConnect, streaming: _streaming, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height, showHeader, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, showTokenUsage, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount, suggestions, submitOnSuggestionClick, description, autoFocus, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, pendingPrompt, errorBanner, showInformation, chatViewMode, onChatViewModeChange, frontendTools, }: ChatProps): import("react/jsx-runtime").JSX.Element;
 export default Chat;