@datalayer/agent-runtimes 1.0.10 → 1.0.18

package/lib/AgentNotebook.js

@@ -21,23 +21,57 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { Text, Spinner } from '@primer/react';
 import { AlertIcon } from '@primer/octicons-react';
-import { Box, DatalayerThemeProvider, setupPrimerPortals, } from '@datalayer/primer-addons';
-import { Notebook, JupyterReactTheme, loadJupyterConfig, createServerSettings, getJupyterServerUrl, getJupyterServerToken, setJupyterServerUrl, setJupyterServerToken, } from '@datalayer/jupyter-react';
-import { ServiceManager } from '@jupyterlab/services';
+import { AppearanceControlsWithStore, Box, createThemeStore, DatalayerThemeProvider, setupPrimerPortals, themeConfigs, useSystemColorMode, } from '@datalayer/primer-addons';
+import { Notebook, JupyterReactTheme, notebookStore, disposeServiceManager, loadJupyterConfig, getJupyterServerUrl, getJupyterServerToken, setJupyterServerUrl, setJupyterServerToken, } from '@datalayer/jupyter-react';
+import { ServiceManager, ServerConnection } from '@jupyterlab/services';
 import { Chat } from './chat';
 import { useNotebookTools } from './tools/adapters/agent-runtimes/notebookHooks';
 import { DEFAULT_MODEL } from './specs';
-import MatplotlibNotebook from './examples/utils/notebooks/Matplotlib.ipynb.json';
+import EmptyNotebook from './examples/utils/notebooks/Empty.ipynb.json';
 import '../style/primer-primitives.css';
 setupPrimerPortals();
 const BASE_URL = window.location.origin;
 const NOTEBOOK_ID = 'agent-notebook';
+const NOTEBOOK_THEME_STORAGE_KEY = 'agent-runtimes-agent-notebook-theme';
+// Fixed height (px) of the top appearance bar. The notebook fills the
+// remaining viewport height via calc(100vh - TOP_BAR_HEIGHT) so it does not
+// depend on a `height: 100%` chain (JupyterReactTheme renders an intermediate
+// auto-height div that would collapse the notebook to 0).
+const TOP_BAR_HEIGHT = 49;
+const useAgentNotebookThemeStore = createThemeStore(NOTEBOOK_THEME_STORAGE_KEY, {
+    colorMode: 'auto',
+    theme: 'earth',
+});
 function getQueryParam(name) {
     return new URLSearchParams(window.location.search).get(name);
 }
 function getAgentId() {
     return getQueryParam('agentId') || 'default';
 }
+function getKernelId() {
+    const kernelId = getQueryParam('kernelId') || getQueryParam('kernel_id');
+    return kernelId || undefined;
+}
+async function fetchStartupKernelId() {
+    try {
+        const resp = await fetch(`${BASE_URL}/health/startup`);
+        if (!resp.ok) {
+            return undefined;
+        }
+        const payload = await resp.json();
+        const sandbox = payload?.sandbox;
+        if (sandbox?.variant !== 'jupyter') {
+            return undefined;
+        }
+        const kernelId = sandbox?.kernel_id;
+        return typeof kernelId === 'string' && kernelId.length > 0
+            ? kernelId
+            : undefined;
+    }
+    catch {
+        return undefined;
+    }
+}
 /**
  * Initialise Jupyter configuration.
  *
@@ -50,45 +84,111 @@ function initJupyterConfig() {
     loadJupyterConfig();
     // Override with query parameters when supplied by codeai
     const qBaseUrl = getQueryParam('jupyterBaseUrl');
-    const qToken = getQueryParam('jupyterToken');
+    const qToken = getQueryParam('jupyterToken') || getQueryParam('token');
     if (qBaseUrl)
         setJupyterServerUrl(qBaseUrl);
     if (qToken)
         setJupyterServerToken(qToken);
+    let resolvedBaseUrl = qBaseUrl || getJupyterServerUrl();
+    let resolvedToken = qToken || getJupyterServerToken();
     // 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)
+            if (!qBaseUrl && cfg.baseUrl) {
                 setJupyterServerUrl(cfg.baseUrl);
-            if (!qToken && cfg.token)
+                resolvedBaseUrl = cfg.baseUrl;
+            }
+            if (!qToken && cfg.token) {
                 setJupyterServerToken(cfg.token);
+                resolvedToken = cfg.token;
+            }
         }
         catch {
             // ignore
         }
     }
+    return {
+        baseUrl: resolvedBaseUrl,
+        token: resolvedToken,
+    };
 }
-const NotebookPanel = ({ serviceManager }) => (_jsx(Box, { sx: {
+function buildServerSettings(baseUrl, token) {
+    const wsUrl = baseUrl.replace(/^http/, 'ws');
+    const authenticatedFetch = (input, init) => {
+        if (!token) {
+            return fetch(input, init);
+        }
+        const headers = new Headers(init?.headers || undefined);
+        headers.set('Authorization', `token ${token}`);
+        return fetch(input, { ...init, headers });
+    };
+    return ServerConnection.makeSettings({
+        baseUrl,
+        wsUrl,
+        token,
+        appendToken: !!token,
+        fetch: authenticatedFetch,
+    });
+}
+// ─── Notebook kernel tracking ───────────────────────────────────────────────
+/**
+ * Track the live kernel connection of the notebook running on the sandbox.
+ *
+ * The kernel connection is created asynchronously by the `<Notebook>` adapter
+ * after it mounts (and can change on restart), so we read it from the notebook
+ * store, polling and subscribing to store mutations. The resolved connection is
+ * fed to the chat header's `<KernelIndicator>` so it reflects the sandbox.
+ */
+function useNotebookKernel(notebookId, active) {
+    const [kernel, setKernel] = useState(null);
+    useEffect(() => {
+        if (!active) {
+            setKernel(null);
+            return;
+        }
+        const readKernel = () => {
+            const notebook = notebookStore.getState().selectNotebook(notebookId);
+            const adapter = notebook?.adapter;
+            return adapter?.kernel ?? null;
+        };
+        const sync = () => {
+            const next = readKernel();
+            setKernel(prev => (prev?.id === next?.id ? prev : next));
+        };
+        sync();
+        const intervalId = window.setInterval(sync, 750);
+        const unsubscribe = notebookStore.subscribe(sync);
+        return () => {
+            window.clearInterval(intervalId);
+            unsubscribe();
+        };
+    }, [notebookId, active]);
+    return kernel;
+}
+const NotebookPanel = ({ serviceManager, kernelId, colormode, backgroundColor, }) => (_jsx(Box, { sx: {
         flex: 1,
+        minWidth: '360px',
+        minHeight: 0,
         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 }) => {
+    }, children: _jsx(JupyterReactTheme, { colormode: colormode, backgroundColor: backgroundColor, children: _jsx(Notebook, { nbformat: EmptyNotebook, id: NOTEBOOK_ID, serviceManager: serviceManager, kernelId: kernelId, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`, cellSidebarMargin: 120, startDefaultKernel: !kernelId }) }) }));
+const ChatPanel = ({ agentId, kernel }) => {
     // Register notebook tools so the agent can manipulate cells
     const notebookTools = useNotebookTools(NOTEBOOK_ID);
     return (_jsx(Box, { sx: {
             width: '420px',
             minWidth: '320px',
+            flexShrink: 0,
             display: 'flex',
             flexDirection: 'column',
             overflow: 'hidden',
-        }, children: _jsx(Chat, { protocol: "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: [
+        }, children: _jsx(Chat, { protocol: "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: "100%", showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, disableInternalJupyterTheme: true, frontendTools: notebookTools, autoFocus: true, runtimeId: agentId, kernel: kernel, historyEndpoint: `${BASE_URL}/api/v1/history`, suggestions: [
                 {
                     title: 'Add a cell',
                     message: 'Insert a new code cell into the notebook',
@@ -106,12 +206,25 @@ const ChatPanel = ({ agentId }) => {
 // ─── Main component ─────────────────────────────────────────────────────────
 export const AgentNotebook = () => {
     const [agentId] = useState(getAgentId);
+    const [kernelId, setKernelId] = useState(getKernelId);
     const [isReady, setIsReady] = useState(false);
     const [error, setError] = useState(null);
     const [serviceManager, setServiceManager] = useState(null);
+    const { colorMode, theme } = useAgentNotebookThemeStore();
+    const themeConfig = themeConfigs[theme];
+    const systemMode = useSystemColorMode();
+    const resolvedMode = colorMode === 'auto' ? systemMode : colorMode;
+    const modeStyles = resolvedMode === 'dark'
+        ? themeConfig.themeStyles.dark
+        : themeConfig.themeStyles.light;
+    const themeBackground = modeStyles.backgroundColor ?? '';
+    // Live kernel connection from the notebook running on the sandbox, wired to
+    // the chat header's kernel indicator.
+    const notebookKernel = useNotebookKernel(NOTEBOOK_ID, Boolean(serviceManager));
     // Verify the agent exists AND initialise the Jupyter service manager
     useEffect(() => {
         let cancelled = false;
+        let managerForCleanup = null;
         const init = async () => {
             try {
                 // 1. Ensure agent exists — create if missing
@@ -135,14 +248,19 @@ export const AgentNotebook = () => {
                     }
                 }
                 // 2. Initialise Jupyter
-                initJupyterConfig();
-                const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
+                const jupyterConfig = initJupyterConfig();
+                const serverSettings = buildServerSettings(jupyterConfig.baseUrl, jupyterConfig.token);
                 const manager = new ServiceManager({ serverSettings });
+                managerForCleanup = manager;
                 await manager.ready;
                 if (!cancelled) {
                     setServiceManager(manager);
                     setIsReady(true);
                 }
+                else {
+                    disposeServiceManager(manager);
+                    managerForCleanup = null;
+                }
             }
             catch (err) {
                 if (!cancelled) {
@@ -153,11 +271,32 @@ export const AgentNotebook = () => {
         init();
         return () => {
             cancelled = true;
+            if (managerForCleanup) {
+                disposeServiceManager(managerForCleanup);
+                managerForCleanup = null;
+            }
         };
     }, [agentId]);
+    // If kernelId is not provided via URL, reuse the startup sandbox kernel when
+    // available so notebook/editor and agent runtime share the same execution context.
+    useEffect(() => {
+        if (kernelId) {
+            return;
+        }
+        let cancelled = false;
+        void (async () => {
+            const startupKernelId = await fetchStartupKernelId();
+            if (!cancelled && startupKernelId) {
+                setKernelId(startupKernelId);
+            }
+        })();
+        return () => {
+            cancelled = true;
+        };
+    }, [kernelId]);
     // Loading
     if (!isReady && !error) {
-        return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+        return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsxs(Box, { sx: {
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'center',
@@ -169,7 +308,7 @@ export const AgentNotebook = () => {
     }
     // Error
     if (error) {
-        return (_jsx(DatalayerThemeProvider, { children: _jsxs(Box, { sx: {
+        return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsxs(Box, { sx: {
                     display: 'flex',
                     flexDirection: 'column',
                     alignItems: 'center',
@@ -180,12 +319,28 @@ export const AgentNotebook = () => {
                 }, 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: {
+    return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: themeConfig.primerTheme, themeStyles: themeConfig.themeStyles, children: _jsxs(Box, { sx: {
                 display: 'flex',
+                flexDirection: 'column',
                 height: '100vh',
                 width: '100vw',
                 overflow: 'hidden',
                 bg: 'canvas.default',
-            }, children: [serviceManager && _jsx(NotebookPanel, { serviceManager: serviceManager }), _jsx(ChatPanel, { agentId: agentId })] }) }));
+            }, children: [_jsx(Box, { sx: {
+                        display: 'flex',
+                        justifyContent: 'flex-end',
+                        alignItems: 'center',
+                        px: 3,
+                        height: `${TOP_BAR_HEIGHT}px`,
+                        boxSizing: 'border-box',
+                        borderBottom: '1px solid',
+                        borderColor: 'border.default',
+                        flexShrink: 0,
+                    }, children: _jsx(AppearanceControlsWithStore, { useStore: useAgentNotebookThemeStore }) }), _jsxs(Box, { sx: {
+                        display: 'flex',
+                        flex: 1,
+                        minHeight: 0,
+                        overflow: 'hidden',
+                    }, children: [serviceManager && (_jsx(NotebookPanel, { serviceManager: serviceManager, kernelId: kernelId, colormode: resolvedMode, backgroundColor: themeBackground })), _jsx(ChatPanel, { agentId: agentId, kernel: notebookKernel })] })] }) }));
 };
 export default AgentNotebook;

package/lib/AppExamples2.css

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  /*  text-align: center; */
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

package/lib/AppExamples2.d.ts

@@ -0,0 +1,3 @@
+import './AppExamples2.css';
+export declare function App(): import("react/jsx-runtime").JSX.Element;
+export default App;

package/lib/AppExamples2.js

@@ -0,0 +1,21 @@
+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.
+ */
+import { useState } from 'react';
+import reactLogo from './assets/react.svg';
+import { useJupyter, JupyterReactTheme } from '@datalayer/jupyter-react';
+import { CellExample } from './examples2/CellExample';
+import { NotebookExample } from './examples2/NotebookExample';
+import './AppExamples2.css';
+export function App() {
+    const { serviceManager } = useJupyter({
+        jupyterServerUrl: 'https://oss.datalayer.run/api/jupyter-server',
+        jupyterServerToken: '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6',
+        startDefaultKernel: true,
+    });
+    const [count, setCount] = useState(0);
+    return (_jsxs("div", { className: "App", children: [_jsx(_Fragment, { children: _jsxs(JupyterReactTheme, { children: [serviceManager && _jsx(CellExample, { serviceManager: serviceManager }), serviceManager && (_jsx(NotebookExample, { serviceManager: serviceManager }))] }) }), _jsxs("div", { children: [_jsx("a", { href: "https://reactjs.org", target: "_blank", rel: "noreferrer", children: _jsx("img", { src: reactLogo, className: "logo react", alt: "React logo" }) }), _jsx("a", { href: "https://vitejs.dev", target: "_blank", rel: "noreferrer", children: _jsx("img", { src: "/vite.svg", className: "logo", alt: "Vite logo" }) })] }), _jsx("h1", { children: "React + Vite" }), _jsx("h2", { children: "On CodeSandbox!" }), _jsxs("div", { className: "card", children: [_jsxs("button", { onClick: () => setCount(count => count + 1), children: ["count is ", count] }), _jsxs("p", { children: ["Edit ", _jsx("code", { children: "src/App.tsx" }), " and save to test HMR."] }), _jsx("p", { children: "Tip: you can use the inspector button next to address bar to click on components in the preview and open the code in the editor!" })] }), _jsx("p", { className: "read-the-docs", children: "Click on the Vite and React logos to learn more" })] }));
+}
+export default App;

package/lib/{agent-lexical-main.js → agent-document-main.js}

@@ -4,8 +4,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 import { createRoot } from 'react-dom/client';
-import { AgentLexical } from './AgentLexical';
+import { AgentDocument } from './AgentDocument';
 const rootElement = document.getElementById('root');
 if (rootElement) {
-    createRoot(rootElement).render(_jsx(AgentLexical, {}));
+    createRoot(rootElement).render(_jsx(AgentDocument, {}));
 }

package/lib/agents/AgentRuntimeChat.d.ts

@@ -0,0 +1,73 @@
+/**
+ * AgentRuntimeChat - Generic, full-page chat surface for a live agent runtime.
+ *
+ * This is the shared component used to render the plain (non-floating) chat
+ * view for an agent runtime. It is designed to be reused across the app:
+ * - The agent runtime detail page (e.g. `/agents/runtime-...`).
+ * - Gallery example pages (e.g. `/gallery/agents/analyze-excel-spreadsheet`).
+ *
+ * Behaviour:
+ * - It launches (or connects to) a runtime from the given `agentSpecId` using
+ *   {@link useAgentRuntimes}.
+ * - The plain chat shell is shown as soon as possible. While the runtime is
+ *   still being created/launched, the input and controls are disabled and a
+ *   spinner overlay is shown (via the `launching` prop of {@link Chat}).
+ * - When ready, the same shell becomes interactive with the live endpoint.
+ * - An optional `overlay` (e.g. a sign-in gate) can be shown on top of the
+ *   disabled chat for anonymous users.
+ *
+ * @module agents/AgentRuntimeChat
+ */
+import { type ReactNode } from 'react';
+import type { AgentConfig } from '../types/config';
+import type { AgentConnection } from '../types/connection';
+import type { Protocol, Suggestion } from '../types';
+/**
+ * Props for {@link AgentRuntimeChat}.
+ */
+export interface AgentRuntimeChatProps {
+    /** Agentspec id to launch, e.g. `gallery-analyze-excel-spreadsheet`. */
+    agentSpecId: string;
+    /** Human-friendly title shown in the chat header. */
+    title?: string;
+    /** Custom brand icon rendered in the header / empty state. */
+    brandIcon?: ReactNode;
+    /** Description shown in the empty state. */
+    description?: string;
+    /** Transport protocol (default: `vercel-ai`). */
+    protocol?: Protocol;
+    /** Chat height (default: `100%` so it fills the enclosing box). */
+    height?: string | number;
+    /** Suggestion chips shown in the empty state. */
+    suggestions?: Suggestion[];
+    /** Optional overlay rendered above the (disabled) chat, e.g. a sign-in gate. */
+    overlay?: ReactNode;
+    /**
+     * When false, the runtime is not launched and the chat renders in a disabled
+     * launching state. Useful for anonymous users who must sign in first.
+     * @default true
+     */
+    launch?: boolean;
+    /** Show the model selector control (default: true). */
+    showModelSelector?: boolean;
+    /** Show the tools menu control (default: true). */
+    showToolsMenu?: boolean;
+    /** Show the skills menu control (default: true). */
+    showSkillsMenu?: boolean;
+    /** Show the chat header (default: true). */
+    showHeader?: boolean;
+    /** Show the "powered by" tag (default: false). */
+    showPoweredBy?: boolean;
+    /** Override the agent config used when creating the agent. */
+    agentConfig?: Partial<AgentConfig>;
+    /** Optional callback invoked when runtime connection state changes. */
+    onRuntimeChange?: (runtime: AgentConnection | null) => void;
+}
+/**
+ * Full-page chat surface for a live agent runtime, with a launching state.
+ *
+ * @param props - Component props.
+ * @returns The rendered chat surface.
+ */
+export declare function AgentRuntimeChat({ agentSpecId, title, brandIcon, description, protocol, height, suggestions, overlay, launch, showModelSelector, showToolsMenu, showSkillsMenu, showHeader, showPoweredBy, agentConfig, onRuntimeChange, }: AgentRuntimeChatProps): import("react/jsx-runtime").JSX.Element | null;
+export default AgentRuntimeChat;

package/lib/agents/AgentRuntimeChat.js

@@ -0,0 +1,198 @@
+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.
+/**
+ * AgentRuntimeChat - Generic, full-page chat surface for a live agent runtime.
+ *
+ * This is the shared component used to render the plain (non-floating) chat
+ * view for an agent runtime. It is designed to be reused across the app:
+ * - The agent runtime detail page (e.g. `/agents/runtime-...`).
+ * - Gallery example pages (e.g. `/gallery/agents/analyze-excel-spreadsheet`).
+ *
+ * Behaviour:
+ * - It launches (or connects to) a runtime from the given `agentSpecId` using
+ *   {@link useAgentRuntimes}.
+ * - The plain chat shell is shown as soon as possible. While the runtime is
+ *   still being created/launched, the input and controls are disabled and a
+ *   spinner overlay is shown (via the `launching` prop of {@link Chat}).
+ * - When ready, the same shell becomes interactive with the live endpoint.
+ * - An optional `overlay` (e.g. a sign-in gate) can be shown on top of the
+ *   disabled chat for anonymous users.
+ *
+ * @module agents/AgentRuntimeChat
+ */
+import { useEffect, useMemo, useRef } from 'react';
+import { Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { useIAMStore } from '@datalayer/core/lib/state';
+import { Chat } from '../chat';
+import { useAgentRuntimes } from '../hooks/useAgentRuntimes';
+import { getAgentspecs } from '../specs';
+/**
+ * Full-page chat surface for a live agent runtime, with a launching state.
+ *
+ * @param props - Component props.
+ * @returns The rendered chat surface.
+ */
+export function AgentRuntimeChat({ agentSpecId, title, brandIcon, description, protocol = 'vercel-ai', height = '100%', suggestions, overlay, launch = true, showModelSelector = true, showToolsMenu = true, showSkillsMenu = true, showHeader = true, showPoweredBy = false, agentConfig, onRuntimeChange, }) {
+    const { token } = useIAMStore();
+    const spec = useMemo(() => getAgentspecs(agentSpecId), [agentSpecId]);
+    const { runtime, isReady, endpoint, error, createAgent, isCreating } = useAgentRuntimes({
+        agentSpecId,
+        autoStart: launch,
+        autoCreateAgent: launch,
+        agentConfig: {
+            name: agentSpecId,
+            agentSpecId,
+            model: spec?.model,
+            systemPrompt: spec?.systemPrompt,
+            ...agentConfig,
+        },
+    });
+    const resolvedTitle = title || spec?.name || 'Agent';
+    const authToken = token ?? undefined;
+    useEffect(() => {
+        onRuntimeChange?.(runtime ?? null);
+    }, [onRuntimeChange, runtime]);
+    const launchingError = launch ? error : null;
+    const runtimeAgentId = runtime?.agentId || '';
+    const hasAssignedAgent = runtimeAgentId.trim().length > 0;
+    const assignmentAttemptedForPodRef = useRef(null);
+    const launchStateLogRef = useRef('');
+    const isInteractiveReady = launch && isReady && !!endpoint && hasAssignedAgent;
+    useEffect(() => {
+        const podName = String(runtime?.podName || '').trim();
+        if (!podName) {
+            assignmentAttemptedForPodRef.current = null;
+            return;
+        }
+        if (hasAssignedAgent) {
+            assignmentAttemptedForPodRef.current = podName;
+            return;
+        }
+        if (!launch || !isReady || !endpoint || !!error || isCreating) {
+            return;
+        }
+        if (assignmentAttemptedForPodRef.current === podName) {
+            return;
+        }
+        assignmentAttemptedForPodRef.current = podName;
+        void createAgent();
+    }, [
+        runtime?.podName,
+        hasAssignedAgent,
+        launch,
+        isReady,
+        endpoint,
+        error,
+        isCreating,
+        createAgent,
+    ]);
+    useEffect(() => {
+        if (!launch) {
+            return;
+        }
+        const state = launchingError
+            ? 'error'
+            : !isReady || !endpoint
+                ? 'waiting-endpoint'
+                : !hasAssignedAgent
+                    ? 'waiting-assignment'
+                    : 'ready';
+        const signature = [
+            state,
+            String(runtime?.podName || ''),
+            String(endpoint || ''),
+        ].join('|');
+        if (launchStateLogRef.current === signature) {
+            return;
+        }
+        launchStateLogRef.current = signature;
+        if (state === 'error') {
+            console.error('[AgentRuntimeChat] launch failed', {
+                agentSpecId,
+                podName: runtime?.podName,
+                endpoint,
+                error: launchingError,
+            });
+            return;
+        }
+        if (state === 'waiting-endpoint') {
+            console.info('[AgentRuntimeChat] waiting for runtime endpoint', {
+                agentSpecId,
+                podName: runtime?.podName,
+                isReady,
+                endpoint,
+            });
+            return;
+        }
+        if (state === 'waiting-assignment') {
+            console.info('[AgentRuntimeChat] waiting for agent assignment', {
+                agentSpecId,
+                podName: runtime?.podName,
+                endpoint,
+            });
+            return;
+        }
+        console.info('[AgentRuntimeChat] runtime ready', {
+            agentSpecId,
+            podName: runtime?.podName,
+            endpoint,
+            agentId: runtimeAgentId,
+        });
+    }, [
+        launch,
+        launchStateLogRef,
+        launchingError,
+        isReady,
+        endpoint,
+        hasAssignedAgent,
+        runtime?.podName,
+        runtimeAgentId,
+        agentSpecId,
+    ]);
+    const commonChatProps = {
+        protocol,
+        useStore: false,
+        title: resolvedTitle,
+        brandIcon,
+        description: description || spec?.welcomeMessage || 'Ask me to analyse your data.',
+        height,
+        showHeader,
+        showInput: true,
+        showModelSelector,
+        showToolsMenu,
+        showSkillsMenu,
+        showPoweredBy,
+        suggestions,
+        // Show the in-memory ephemeral notebook next to the chat (with a footer
+        // toggle to hide it) for agent runtime + gallery surfaces.
+        enableEphemeralNotebook: true,
+    };
+    if (launchingError) {
+        return (_jsxs(Box, { sx: {
+                p: 3,
+                borderRadius: 2,
+                border: '1px solid',
+                borderColor: 'danger.emphasis',
+                bg: 'danger.subtle',
+                color: 'danger.fg',
+            }, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "Failed to launch the agent" }), _jsx(Text, { sx: { display: 'block', mt: 1, fontSize: 1 }, children: launchingError })] }));
+    }
+    // Live and ready: interactive chat wired to the runtime endpoint.
+    if (isInteractiveReady) {
+        return (_jsx(Chat, { ...commonChatProps, baseUrl: endpoint, agentId: runtimeAgentId, runtimeId: "default", authToken: authToken, historyEndpoint: `${endpoint}/api/v1/history`, showTokenUsage: true, autoFocus: true }));
+    }
+    // Strict path: do not mount a live Chat until endpoint + assignment are
+    // ready. This avoids default localhost fallback connections in launch states.
+    //
+    // Anonymous visitors (overlay set) still get the full chat shell — including
+    // the ephemeral gallery notebook — rendered disabled underneath, with the
+    // centered sign-in gate on top. `autoConnect={false}` keeps it from opening
+    // any protocol connection while unauthenticated.
+    if (overlay) {
+        return _jsx(Chat, { ...commonChatProps, autoConnect: false, overlay: overlay });
+    }
+    return null;
+}
+export default AgentRuntimeChat;