@datalayer/agent-runtimes 1.0.4 → 1.0.5

package/lib/examples/example-selector.d.ts

@@ -1,14 +1,27 @@
+export type ExampleLoader = () => Promise<{
+    default: React.ComponentType;
+}>;
+export interface ExampleEntry {
+    id: string;
+    title: string;
+    description: string;
+    tags: string[];
+    loader: ExampleLoader;
+}
+/**
+ * Central examples registry. Keep all example definitions in this list so
+ * the header dropdown and the home cards always stay in sync.
+ */
+export declare const EXAMPLE_ENTRIES: ExampleEntry[];
 /**
  * Registry of available examples with dynamic imports.
- * Add new examples here to make them available in the example runner.
  */
-export declare const EXAMPLES: Record<string, () => Promise<{
-    default: React.ComponentType;
-}>>;
+export declare const EXAMPLES: Record<string, ExampleLoader>;
 /**
  * Get the list of available example names
  */
 export declare function getExampleNames(): string[];
+export declare function getExampleEntries(): ExampleEntry[];
 /**
  * Get the selected example based on environment variable
  * Falls back to 'NotebookExample' if not specified or invalid

package/lib/examples/example-selector.js

@@ -3,54 +3,120 @@
  * Distributed under the terms of the Modified BSD License.
  */
 /// <reference types="vite/client" />
+const DISPLAY_NAME_EXCEPTIONS = [
+    [/\bAg Ui\b/g, 'AG-UI'],
+    [/\bA2 Ui\b/g, 'A2UI'],
+    [/\bCopilot Kit\b/g, 'CopilotKit'],
+    [/\bGen Ui\b/g, 'Gen UI'],
+    [/\bM C P\b/g, 'MCP'],
+    [/\bOtel\b/g, 'OTEL'],
+    [/\bAgent Specs\b/g, 'Agent Specifications'],
+];
+function humanizeExampleName(name) {
+    let result = name
+        .replace(/Example$/, '')
+        .replace(/([A-Z])/g, ' $1')
+        .replace(/^\s+/, '')
+        .trim();
+    for (const [pattern, replacement] of DISPLAY_NAME_EXCEPTIONS) {
+        result = result.replace(pattern, replacement);
+    }
+    return result;
+}
+function inferTags(id) {
+    const tags = new Set(['example']);
+    if (id.startsWith('Agent'))
+        tags.add('agent');
+    if (id.startsWith('AgUi'))
+        tags.add('ag-ui');
+    if (id.startsWith('A2Ui'))
+        tags.add('a2ui');
+    if (id.includes('Notebook'))
+        tags.add('notebook');
+    if (id.includes('Lexical'))
+        tags.add('lexical');
+    if (id.includes('Chat'))
+        tags.add('chat');
+    if (id.includes('Sandbox'))
+        tags.add('sandbox');
+    if (id.includes('Monitoring') || id.includes('Otel'))
+        tags.add('observability');
+    if (id.includes('Skills'))
+        tags.add('skills');
+    if (id.includes('Subagent'))
+        tags.add('subagents');
+    if (id.includes('MCP'))
+        tags.add('mcp');
+    return Array.from(tags);
+}
+function makeEntry(id, loader, description, tags) {
+    return {
+        id,
+        title: humanizeExampleName(id),
+        description,
+        tags: tags ?? inferTags(id),
+        loader,
+    };
+}
+/**
+ * Central examples registry. Keep all example definitions in this list so
+ * the header dropdown and the home cards always stay in sync.
+ */
+export const EXAMPLE_ENTRIES = [
+    makeEntry('HomeExample', () => import('./HomeExample'), 'Browse all available examples with search and quick navigation.', ['home', 'navigation']),
+    makeEntry('A2UiComponentGalleryExample', () => import('./A2UiComponentGalleryExample'), 'Gallery showcasing A2UI component patterns.'),
+    makeEntry('A2UiContactCardExample', () => import('./A2UiContactCardExample'), 'A2UI example rendering contact card interactions.'),
+    makeEntry('A2UiRestaurantExample', () => import('./A2UiRestaurantExample'), 'A2UI restaurant flow example.'),
+    makeEntry('A2UiViewerExample', () => import('./A2UiViewerExample'), 'A2UI viewer integration example.'),
+    makeEntry('AgUiAgenticExample', () => import('./AgUiAgenticExample'), 'AG-UI agentic workflow example.'),
+    makeEntry('AgUiBackendToolRenderingExample', () => import('./AgUiBackendToolRenderingExample'), 'AG-UI backend tool rendering example.'),
+    makeEntry('AgUiHaikuGenUiExample', () => import('./AgUiHaikuGenUiExample'), 'AG-UI generative UI Haiku example.'),
+    makeEntry('AgUiHumanInTheLoopExample', () => import('./AgUiHumanInTheLoopExample'), 'AG-UI human-in-the-loop approvals example.'),
+    makeEntry('AgUiSharedStateExample', () => import('./AgUiSharedStateExample'), 'AG-UI shared state synchronization example.'),
+    makeEntry('AgUiToolsBasedGenUiExample', () => import('./AgUiToolsBasedGenUiExample'), 'AG-UI tool-based generative UI example.'),
+    makeEntry('AgentSpecsExample', () => import('./AgentSpecsExample'), 'Configure and run agents from specs and transports.'),
+    makeEntry('CellSimpleExample', () => import('./CellSimpleExample'), 'Simple Jupyter cell integration example.'),
+    makeEntry('ChatCustomExample', () => import('./ChatCustomExample'), 'Custom chat experience composition example.'),
+    makeEntry('ChatExample', () => import('./ChatExample'), 'Baseline chat integration example.'),
+    makeEntry('ChatStandaloneExample', () => import('./ChatStandaloneExample'), 'Standalone chat component usage example.'),
+    makeEntry('CopilotKitLexicalExample', () => import('./CopilotKitLexicalExample'), 'CopilotKit integration with Lexical editor.'),
+    makeEntry('CopilotKitNotebookExample', () => import('./CopilotKitNotebookExample'), 'CopilotKit integration with notebook workflows.'),
+    makeEntry('AgentCheckpointsExample', () => import('./AgentCheckpointsExample'), 'Checkpoint and resume lifecycle for agents.'),
+    makeEntry('AgentCodemodeExample', () => import('./AgentCodemodeExample'), 'Code mode execution and tool orchestration example.'),
+    makeEntry('AgentEvalsExample', () => import('./AgentEvalsExample'), 'Evaluation workflows for agent outputs.'),
+    makeEntry('AgentGuardrailsExample', () => import('./AgentGuardrailsExample'), 'Guardrails and safety checks for agent runs.'),
+    makeEntry('AgentHooksExample', () => import('./AgentHooksExample'), 'Pre-hooks and post-hooks lifecycle execution example.'),
+    makeEntry('AgentToolApprovalsExample', () => import('./AgentToolApprovalsExample'), 'Tool approval workflows and manual decisions.'),
+    makeEntry('AgentMemoryExample', () => import('./AgentMemoryExample'), 'Memory-aware conversation and retrieval example.'),
+    makeEntry('AgentSkillsExample', () => import('./AgentSkillsExample'), 'Skills discovery, execution, and monitoring example.'),
+    makeEntry('AgentMCPExample', () => import('./AgentMCPExample'), 'MCP servers and toolset integration example.'),
+    makeEntry('AgentOtelExample', () => import('./AgentOtelExample'), 'OpenTelemetry instrumentation and traces example.'),
+    makeEntry('AgentSandboxExample', () => import('./AgentSandboxExample'), 'Sandbox execution variants and context controls.'),
+    makeEntry('AgentMonitoringExample', () => import('./AgentMonitoringExample'), 'Runtime monitoring and live metrics example.'),
+    makeEntry('AgentSubagentsExample', () => import('./AgentSubagentsExample'), 'Multi-agent delegation with subagents-pydantic-ai.'),
+    makeEntry('AgentNotificationsExample', () => import('./AgentNotificationsExample'), 'Notifications and event routing example.'),
+    makeEntry('AgentOutputsExample', () => import('./AgentOutputsExample'), 'Structured outputs and rendering patterns.'),
+    makeEntry('AgentParametersExample', () => import('./AgentParametersExample'), 'Launch-time parameterized agent creation with JSON schema.'),
+    makeEntry('AgentTriggersExample', () => import('./AgentTriggersExample'), 'Scheduled and one-shot trigger flows.'),
+    makeEntry('LexicalAgentExample', () => import('./LexicalAgentExample'), 'Lexical document integration example.'),
+    makeEntry('LexicalAgentSidebarExample', () => import('./LexicalAgentSidebarExample'), 'Lexical with sidebar orchestration example.'),
+    makeEntry('NotebookAgentExample', () => import('./NotebookAgentExample'), 'Notebook orchestration and runtime example.'),
+    makeEntry('NotebookAgentSidebarExample', () => import('./NotebookAgentSidebarExample'), 'Notebook plus sidebar controls example.'),
+    makeEntry('NotebookExample', () => import('./NotebookExample'), 'Minimal notebook integration example.'),
+    makeEntry('NotebookCollaborationExample', () => import('./NotebookCollaborationExample'), 'Notebook collaboration runtime integration example.'),
+];
 /**
  * Registry of available examples with dynamic imports.
- * Add new examples here to make them available in the example runner.
  */
-export const EXAMPLES = {
-    //  Lexical2Example: () => import('./Lexical2Example'),
-    A2UiComponentGalleryExample: () => import('./A2UiComponentGalleryExample'),
-    A2UiContactCardExample: () => import('./A2UiContactCardExample'),
-    A2UiRestaurantExample: () => import('./A2UiRestaurantExample'),
-    A2UiViewerExample: () => import('./A2UiViewerExample'),
-    AgUiAgenticExample: () => import('./AgUiAgenticExample'),
-    AgUiBackendToolRenderingExample: () => import('./AgUiBackendToolRenderingExample'),
-    AgUiHaikuGenUiExample: () => import('./AgUiHaikuGenUiExample'),
-    AgUiHumanInTheLoopExample: () => import('./AgUiHumanInTheLoopExample'),
-    AgUiSharedStateExample: () => import('./AgUiSharedStateExample'),
-    AgUiToolsBasedGenUiExample: () => import('./AgUiToolsBasedGenUiExample'),
-    AgentspecExample: () => import('./AgentspecExample'),
-    CellSimpleExample: () => import('./CellSimpleExample'),
-    ChatCustomExample: () => import('./ChatCustomExample'),
-    ChatExample: () => import('./ChatExample'),
-    ChatStandaloneExample: () => import('./ChatStandaloneExample'),
-    CopilotKitLexicalExample: () => import('./CopilotKitLexicalExample'),
-    CopilotKitNotebookExample: () => import('./CopilotKitNotebookExample'),
-    DatalayerNotebookExample: () => import('./DatalayerNotebookExample'),
-    AgentCheckpointsExample: () => import('./AgentCheckpointsExample'),
-    AgentCodemodeExample: () => import('./AgentCodemodeExample'),
-    AgentEvalsExample: () => import('./AgentEvalsExample'),
-    AgentGuardrailsExample: () => import('./AgentGuardrailsExample'),
-    AgentToolApprovalsExample: () => import('./AgentToolApprovalsExample'),
-    AgentMemoryExample: () => import('./AgentMemoryExample'),
-    AgentSkillsExample: () => import('./AgentSkillsExample'),
-    AgentOtelExample: () => import('./AgentOtelExample'),
-    AgentSandboxExample: () => import('./AgentSandboxExample'),
-    AgentMonitoringExample: () => import('./AgentMonitoringExample'),
-    AgentNotificationsExample: () => import('./AgentNotificationsExample'),
-    AgentOutputsExample: () => import('./AgentOutputsExample'),
-    AgentTriggersExample: () => import('./AgentTriggersExample'),
-    LexicalExample: () => import('./LexicalExample'),
-    LexicalSidebarExample: () => import('./LexicalSidebarExample'),
-    NotebookExample: () => import('./NotebookExample'),
-    NotebookSidebarExample: () => import('./NotebookSidebarExample'),
-    NotebookSimpleExample: () => import('./NotebookSimpleExample'),
-};
+export const EXAMPLES = Object.fromEntries(EXAMPLE_ENTRIES.map(entry => [entry.id, entry.loader]));
 /**
  * Get the list of available example names
  */
 export function getExampleNames() {
-    return Object.keys(EXAMPLES);
+    return EXAMPLE_ENTRIES.map(entry => entry.id);
+}
+export function getExampleEntries() {
+    return [...EXAMPLE_ENTRIES];
 }
 /**
  * Get the selected example based on environment variable

package/lib/examples/index.d.ts

@@ -1,4 +1,4 @@
-export { default as AgentspecExample } from './AgentspecExample';
+export { default as AgentSpecsExample } from './AgentSpecsExample';
 export { default as A2UiComponentGalleryExample } from './A2UiComponentGalleryExample';
 export { default as A2UiContactCardExample } from './A2UiContactCardExample';
 export { default as A2UiRestaurantExample } from './A2UiRestaurantExample';
@@ -14,21 +14,24 @@ export { default as ChatStandaloneExample } from './ChatStandaloneExample';
 export { default as CopilotKitLexicalExample } from './CopilotKitLexicalExample';
 export { default as CopilotKitNotebookExample } from './CopilotKitNotebookExample';
 export { default as CustomExample } from './ChatCustomExample';
-export { default as DatalayerNotebookExample } from './DatalayerNotebookExample';
+export { default as NotebookCollaborationExample } from './NotebookCollaborationExample';
 export { default as AgentCheckpointsExample } from './AgentCheckpointsExample';
 export { default as AgentCodemodeExample } from './AgentCodemodeExample';
 export { default as AgentEvalsExample } from './AgentEvalsExample';
 export { default as AgentGuardrailsExample } from './AgentGuardrailsExample';
+export { default as AgentHooksExample } from './AgentHooksExample';
 export { default as AgentToolApprovalsExample } from './AgentToolApprovalsExample';
 export { default as AgentMemoryExample } from './AgentMemoryExample';
 export { default as AgentOtelExample } from './AgentOtelExample';
+export { default as AgentMCPExample } from './AgentMCPExample';
 export { default as AgentMonitoringExample } from './AgentMonitoringExample';
 export { default as AgentNotificationsExample } from './AgentNotificationsExample';
 export { default as AgentOutputsExample } from './AgentOutputsExample';
+export { default as AgentParametersExample } from './AgentParametersExample';
 export { default as AgentTriggersExample } from './AgentTriggersExample';
 export { default as Lexical2Example } from './Lexical2Example';
-export { default as LexicalExample } from './LexicalExample';
-export { default as LexicalSidebarExample } from './LexicalSidebarExample';
+export { default as LexicalAgentExample } from './LexicalAgentExample';
+export { default as LexicalAgentSidebarExample } from './LexicalAgentSidebarExample';
+export { default as NotebookAgentExample } from './NotebookAgentExample';
+export { default as NotebookAgentSidebarExample } from './NotebookAgentSidebarExample';
 export { default as NotebookExample } from './NotebookExample';
-export { default as NotebookSidebarExample } from './NotebookSidebarExample';
-export { default as NotebookSimpleExample } from './NotebookSimpleExample';

package/lib/examples/index.js

@@ -2,7 +2,7 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-export { default as AgentspecExample } from './AgentspecExample';
+export { default as AgentSpecsExample } from './AgentSpecsExample';
 export { default as A2UiComponentGalleryExample } from './A2UiComponentGalleryExample';
 export { default as A2UiContactCardExample } from './A2UiContactCardExample';
 export { default as A2UiRestaurantExample } from './A2UiRestaurantExample';
@@ -18,21 +18,24 @@ export { default as ChatStandaloneExample } from './ChatStandaloneExample';
 export { default as CopilotKitLexicalExample } from './CopilotKitLexicalExample';
 export { default as CopilotKitNotebookExample } from './CopilotKitNotebookExample';
 export { default as CustomExample } from './ChatCustomExample';
-export { default as DatalayerNotebookExample } from './DatalayerNotebookExample';
+export { default as NotebookCollaborationExample } from './NotebookCollaborationExample';
 export { default as AgentCheckpointsExample } from './AgentCheckpointsExample';
 export { default as AgentCodemodeExample } from './AgentCodemodeExample';
 export { default as AgentEvalsExample } from './AgentEvalsExample';
 export { default as AgentGuardrailsExample } from './AgentGuardrailsExample';
+export { default as AgentHooksExample } from './AgentHooksExample';
 export { default as AgentToolApprovalsExample } from './AgentToolApprovalsExample';
 export { default as AgentMemoryExample } from './AgentMemoryExample';
 export { default as AgentOtelExample } from './AgentOtelExample';
+export { default as AgentMCPExample } from './AgentMCPExample';
 export { default as AgentMonitoringExample } from './AgentMonitoringExample';
 export { default as AgentNotificationsExample } from './AgentNotificationsExample';
 export { default as AgentOutputsExample } from './AgentOutputsExample';
+export { default as AgentParametersExample } from './AgentParametersExample';
 export { default as AgentTriggersExample } from './AgentTriggersExample';
 export { default as Lexical2Example } from './Lexical2Example';
-export { default as LexicalExample } from './LexicalExample';
-export { default as LexicalSidebarExample } from './LexicalSidebarExample';
+export { default as LexicalAgentExample } from './LexicalAgentExample';
+export { default as LexicalAgentSidebarExample } from './LexicalAgentSidebarExample';
+export { default as NotebookAgentExample } from './NotebookAgentExample';
+export { default as NotebookAgentSidebarExample } from './NotebookAgentSidebarExample';
 export { default as NotebookExample } from './NotebookExample';
-export { default as NotebookSidebarExample } from './NotebookSidebarExample';
-export { default as NotebookSimpleExample } from './NotebookSimpleExample';

package/lib/examples/main.js

@@ -1,19 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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.
  */
 /// <reference types="vite/client" />
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { loadJupyterConfig, JupyterReactTheme, createServerSettings, setJupyterServerUrl, setJupyterServerToken, getJupyterServerUrl, getJupyterServerToken, } from '@datalayer/jupyter-react';
 import { ServiceManager } from '@jupyterlab/services';
-import { DatalayerThemeProvider, DatalayerLogo, getLogoColors, themeConfigs, Box, } from '@datalayer/primer-addons';
+import { DatalayerThemeProvider, DatalayerLogoText, getLogoColors, themeConfigs, Box, } from '@datalayer/primer-addons';
+import { HomeIcon, SignInIcon, SignOutIcon } from '@primer/octicons-react';
+import { Button } from '@primer/react';
 import { AppearanceControlsWithStore } from '@datalayer/primer-addons/lib/components/appearance';
 import { coreStore, iamStore, createDatalayerServiceManager, } from '@datalayer/core';
-import { useChatStore } from '../stores';
+import { SignInSimple } from '@datalayer/core/lib/views/iam';
+import { UserBadge } from '@datalayer/core/lib/views/profile';
+import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
+import { agentRuntimeStore, useChatStore, useConversationStore, } from '../stores';
 import { OAuthCallback } from '../identity';
-import { EXAMPLES } from './example-selector';
+import { EXAMPLES, getExampleEntries, } from './example-selector';
 import { useExampleThemeStore } from './utils/themeStore';
 import { ExampleWrapper } from './components/ExampleWrapper';
 import nbformatExample from './utils/notebooks/NotebookExample1.ipynb.json';
@@ -60,7 +65,7 @@ const loadConfigurations = () => {
                                 CLI: 0,
                                 VSCode: 0,
                             },
-                            position: {},
+                            position: 'top',
                             tours: {},
                         },
                         events: [],
@@ -91,13 +96,15 @@ const loadConfigurations = () => {
         }
     }
 };
-const getExampleNames = () => Object.keys(EXAMPLES);
+const getExampleEntriesList = () => getExampleEntries();
+const getInitialSearchQuery = () => {
+    const params = new URLSearchParams(window.location.search);
+    return (params.get('q') || '').trim();
+};
 // Check if we're on the notebook-only route
 const isNotebookOnlyRoute = () => {
     const path = window.location.pathname;
-    console.log('Current pathname:', path);
     const isNotebookRoute = path === '/datalayer/notebook';
-    console.log('Is notebook-only route:', isNotebookRoute);
     return isNotebookRoute;
 };
 // Check if we're handling an OAuth callback (code and state in URL params)
@@ -139,7 +146,6 @@ const NotebookOnlyApp = () => {
                             runUrl: configuration.runUrl,
                             token: configuration.token,
                         });
-                        console.log('[NotebookOnlyApp] Created collaboration provider:', provider);
                         setCollaborationProvider(provider);
                     }
                     catch (error) {
@@ -193,11 +199,6 @@ const NotebookOnlyApp = () => {
         return null;
     }
     const NOTEBOOK_ID = '01JZQRQ35GG871QQCZW9TB1A8J';
-    console.log('[NotebookOnlyApp] Rendering with:', {
-        hasServiceManager: !!serviceManager,
-        hasCollaborationProvider: !!collaborationProvider,
-        notebookId: NOTEBOOK_ID,
-    });
     return (_jsx(JupyterReactTheme, { children: _jsx("div", { style: { width: '100vw', height: '100vh' }, children: _jsx(NotebookComponent, { id: NOTEBOOK_ID, height: "100vh", nbformat: nbformat, readonly: false, serviceManager: serviceManager, startDefaultKernel: true, collaborationProvider: collaborationProvider }) }) }));
 };
 // Main App component that loads and renders the selected example
@@ -207,7 +208,26 @@ export const ExampleApp = () => {
     const [error, setError] = useState(null);
     const [serviceManager, setServiceManager] = useState(null);
     const [selectedExample, setSelectedExample] = useState(getDefaultExampleName());
+    const [searchQuery, setSearchQuery] = useState(getInitialSearchQuery());
     const [isChangingExample, setIsChangingExample] = useState(false);
+    const filteredExampleEntries = useMemo(() => {
+        const normalized = searchQuery.trim().toLowerCase();
+        const all = getExampleEntriesList();
+        if (!normalized) {
+            return all;
+        }
+        return all.filter(entry => {
+            const haystack = [
+                entry.id,
+                entry.title,
+                entry.description,
+                entry.tags.join(' '),
+            ]
+                .join(' ')
+                .toLowerCase();
+            return haystack.includes(normalized);
+        });
+    }, [searchQuery]);
     const loadExample = async (exampleName, _manager) => {
         try {
             setIsChangingExample(true);
@@ -276,8 +296,75 @@ export const ExampleApp = () => {
     const handleExampleChange = async (newExample) => {
         if (newExample === selectedExample || !serviceManager)
             return;
-        // Clear chat store when changing examples to start fresh
-        useChatStore.getState().clearMessages();
+        // 1) Unmount the current example FIRST so its useEffect cleanup hooks
+        //    (e.g. AGUIAdapter.disconnect → /ag-ui/terminate, abort fetches,
+        //    close runtime sandboxes) run against a still-valid store state.
+        setIsChangingExample(true);
+        setExampleComponent(null);
+        // Yield to React so the unmount actually commits before we wipe stores.
+        await new Promise(resolve => {
+            requestAnimationFrame(() => resolve());
+        });
+        // 2) Tear down any server-side agents created by the previous example.
+        //    Each example caches its agent id in sessionStorage via
+        //    `uniqueAgentId(baseName)` under key `agent-runtimes:agentId:<base>`.
+        //    Delete those agents on the server and drop the cached ids so the
+        //    next example (and a future re-entry into this one) boots fresh.
+        const agentBaseUrl = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+        const token = useSimpleAuthStore.getState().token;
+        const agentIdKeys = [];
+        try {
+            for (let i = 0; i < sessionStorage.length; i++) {
+                const key = sessionStorage.key(i);
+                if (key && key.startsWith('agent-runtimes:agentId:')) {
+                    agentIdKeys.push(key);
+                }
+            }
+        }
+        catch {
+            // sessionStorage unavailable; skip teardown.
+        }
+        await Promise.all(agentIdKeys.map(async (key) => {
+            let agentId = null;
+            try {
+                agentId = sessionStorage.getItem(key);
+            }
+            catch {
+                /* ignore */
+            }
+            if (!agentId)
+                return;
+            try {
+                await fetch(`${agentBaseUrl}/api/v1/agents/${encodeURIComponent(agentId)}`, {
+                    method: 'DELETE',
+                    headers: token ? { Authorization: `Bearer ${token}` } : {},
+                });
+            }
+            catch {
+                // Best-effort teardown: ignore network / 404 errors.
+            }
+            try {
+                sessionStorage.removeItem(key);
+            }
+            catch {
+                /* ignore */
+            }
+        }));
+        // 3) Wipe every piece of in-process agent state so the next example boots
+        //    with a clean slate (no leftover messages, threads, pending tool
+        //    calls, runtime snapshots, monitoring caches, or sockets).
+        useChatStore.getState().reset();
+        useConversationStore.getState().clearAll();
+        agentRuntimeStore.getState().reset();
+        // 4) Drop the persisted slice from localStorage so a fresh example never
+        //    rehydrates a previous example's agents / monitoring cache.
+        try {
+            localStorage.removeItem('agent-runtimes-storage');
+        }
+        catch {
+            // Ignore storage failures (e.g. private mode).
+        }
+        // 5) Load and mount the new example.
         setSelectedExample(newExample);
         localStorage.setItem('selectedExample', newExample);
         await loadExample(newExample, serviceManager);
@@ -297,16 +384,42 @@ export const ExampleApp = () => {
     if (serviceManager) {
         exampleProps.serviceManager = serviceManager;
     }
-    return (_jsx(ExampleAppThemed, { selectedExample: selectedExample, isChangingExample: isChangingExample, error: error, ExampleComponent: ExampleComponent, exampleProps: exampleProps, onExampleChange: handleExampleChange }));
+    exampleProps.examples = filteredExampleEntries.filter(entry => entry.id !== 'HomeExample');
+    exampleProps.searchQuery = searchQuery;
+    exampleProps.onSearchChange = (value) => setSearchQuery(value);
+    exampleProps.onSelectExample = (name) => {
+        void handleExampleChange(name);
+    };
+    return (_jsx(ExampleAppThemed, { selectedExample: selectedExample, isChangingExample: isChangingExample, error: error, ExampleComponent: ExampleComponent, exampleProps: exampleProps, onExampleChange: handleExampleChange, availableExamples: getExampleEntriesList() }));
 };
 /**
  * Inner shell that reads from the theme store and wires
  * DatalayerThemeProvider + the header bar with selectors.
  */
-const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleComponent, exampleProps, onExampleChange, }) => {
+const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleComponent, exampleProps, onExampleChange, availableExamples, }) => {
     const { colorMode, theme: themeVariant } = useExampleThemeStore();
     const cfg = themeConfigs[themeVariant];
     const logoColors = getLogoColors(themeVariant, colorMode);
+    const { token, setAuth, clearAuth } = useSimpleAuthStore();
+    const [showSignIn, setShowSignIn] = useState(false);
+    const syncTokenToIamStore = useCallback((newToken) => {
+        import('@datalayer/core/lib/state').then(({ iamStore: coreIamStore }) => {
+            coreIamStore.setState({ token: newToken });
+        });
+    }, []);
+    useEffect(() => {
+        // Keep iamStore aligned with persisted auth token on app load/refresh.
+        syncTokenToIamStore(token || undefined);
+    }, [token, syncTokenToIamStore]);
+    const handleHeaderSignIn = useCallback((newToken, handle) => {
+        setAuth(newToken, handle);
+        syncTokenToIamStore(newToken);
+        setShowSignIn(false);
+    }, [setAuth, syncTokenToIamStore]);
+    const handleHeaderLogout = useCallback(() => {
+        clearAuth();
+        syncTokenToIamStore(undefined);
+    }, [clearAuth, syncTokenToIamStore]);
     return (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: cfg.primerTheme, themeStyles: cfg.themeStyles, children: _jsxs(Box, { sx: {
                 width: '100vw',
                 height: '100vh',
@@ -328,7 +441,19 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                         bg: 'canvas.subtle',
                         borderBottom: '1px solid',
                         borderColor: 'border.default',
-                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { as: "select", value: selectedExample, onChange: (e) => onExampleChange(e.target.value), disabled: isChangingExample, sx: {
+                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { as: "button", onClick: () => void onExampleChange('HomeExample'), title: "Home", "aria-label": "Go to examples home", sx: {
+                                        display: 'inline-flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'center',
+                                        width: '32px',
+                                        height: '32px',
+                                        border: '1px solid',
+                                        borderColor: 'border.default',
+                                        borderRadius: 2,
+                                        bg: 'canvas.default',
+                                        color: 'fg.default',
+                                        cursor: isChangingExample ? 'not-allowed' : 'pointer',
+                                    }, disabled: isChangingExample, children: _jsx(HomeIcon, { size: 16 }) }), _jsx(Box, { as: "select", value: selectedExample, onChange: (e) => onExampleChange(e.target.value), disabled: isChangingExample, sx: {
                                         px: 2,
                                         py: '6px',
                                         fontSize: 1,
@@ -344,13 +469,81 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                                         '&:focus-visible': {
                                             boxShadow: '0 0 0 2px var(--bgColor-accent-muted, rgba(9,105,218,0.3))',
                                         },
-                                    }, children: getExampleNames()
-                                        .sort()
-                                        .map(name => (_jsx("option", { value: name, children: name }, name))) }), isChangingExample && (_jsx(Box, { as: "span", sx: { color: 'fg.muted', fontSize: 0 }, children: "Loading\u2026" })), error && (_jsxs(Box, { as: "span", sx: { color: 'danger.fg', fontSize: 0 }, children: ["Error: ", error] }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 3 }, children: [_jsx(AppearanceControlsWithStore, { useStore: useExampleThemeStore }), _jsx(DatalayerLogo, { size: 24, primaryColor: logoColors.primary, secondaryColor: logoColors.secondary })] })] }), _jsx(Box, { sx: {
+                                    }, children: (() => {
+                                        const home = availableExamples.find(e => e.id === 'HomeExample');
+                                        const rest = availableExamples.filter(e => e.id !== 'HomeExample');
+                                        // Classify each example into a named group.
+                                        const groupOf = (id) => {
+                                            if (id === 'AgentSpecsExample')
+                                                return 'Personas';
+                                            if (id.startsWith('A2Ui'))
+                                                return 'A2UI';
+                                            if (id.startsWith('AgUi'))
+                                                return 'AG-UI';
+                                            if (id.startsWith('CopilotKit'))
+                                                return 'CopilotKit';
+                                            if (id.startsWith('Agent'))
+                                                return 'Agent';
+                                            if (id.startsWith('Chat'))
+                                                return 'Chat';
+                                            if (id.startsWith('Lexical'))
+                                                return 'Lexical';
+                                            if (id.startsWith('Notebook') ||
+                                                id === 'NotebookCollaborationExample')
+                                                return 'Notebook';
+                                            return 'Cell';
+                                        };
+                                        const groupOrder = [
+                                            'Personas',
+                                            'A2UI',
+                                            'AG-UI',
+                                            'Agent',
+                                            'Chat',
+                                            'Lexical',
+                                            'Notebook',
+                                            'Cell',
+                                            'CopilotKit',
+                                        ];
+                                        const grouped = new Map();
+                                        for (const ex of rest) {
+                                            const g = groupOf(ex.id);
+                                            if (!grouped.has(g))
+                                                grouped.set(g, []);
+                                            grouped.get(g).push(ex);
+                                        }
+                                        for (const list of grouped.values()) {
+                                            list.sort((a, b) => a.title.localeCompare(b.title));
+                                        }
+                                        const nodes = [];
+                                        if (home) {
+                                            nodes.push(_jsx("option", { value: home.id, children: home.title }, home.id));
+                                        }
+                                        let sepIndex = 0;
+                                        for (const g of groupOrder) {
+                                            const items = grouped.get(g);
+                                            if (!items || items.length === 0)
+                                                continue;
+                                            nodes.push(_jsxs("option", { disabled: true, value: `__sep_${sepIndex}`, children: ["\u2500\u2500\u2500\u2500\u2500\u2500 ", g, " \u2500\u2500\u2500\u2500\u2500\u2500"] }, `__sep_${sepIndex++}`));
+                                            for (const example of items) {
+                                                nodes.push(_jsx("option", { value: example.id, children: example.title }, example.id));
+                                            }
+                                        }
+                                        return _jsx(_Fragment, { children: nodes });
+                                    })() }), isChangingExample && (_jsx(Box, { as: "span", sx: { color: 'fg.muted', fontSize: 0 }, children: "Loading\u2026" })), error && (_jsxs(Box, { as: "span", sx: { color: 'danger.fg', fontSize: 0 }, children: ["Error: ", error] }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 3 }, children: [_jsx(AppearanceControlsWithStore, { useStore: useExampleThemeStore }), _jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: token ? (_jsxs(_Fragment, { children: [_jsx(UserBadge, { token: token, variant: "small" }), _jsx(Button, { size: "small", variant: "invisible", onClick: handleHeaderLogout, leadingVisual: SignOutIcon, sx: { color: 'fg.muted' }, children: "Sign out" })] })) : (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowSignIn(true), leadingVisual: SignInIcon, sx: { color: 'fg.muted' }, children: "Sign in" })) }), _jsx(Box, { as: "a", href: "https://datalayer.ai", target: "_blank", rel: "noopener noreferrer", "aria-label": "Open Datalayer website", sx: { display: 'inline-flex', alignItems: 'center' }, children: _jsx(DatalayerLogoText, { size: 24, variant: themeVariant, colorMode: colorMode, primaryColor: logoColors.primary, secondaryColor: logoColors.secondary, textColor: logoColors.textColor, primaryGradient: logoColors.primaryGradient, secondaryGradient: logoColors.secondaryGradient, gradient: true }) })] })] }), showSignIn && !token && (_jsx(Box, { sx: {
+                        position: 'fixed',
+                        top: 60,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        zIndex: 150,
+                        bg: 'canvas.backdrop',
+                        p: 3,
+                        overflow: 'auto',
+                    }, children: _jsxs(Box, { sx: { maxWidth: 640, mx: 'auto' }, children: [_jsx(SignInSimple, { onSignIn: handleHeaderSignIn, onApiKeySignIn: apiKey => handleHeaderSignIn(apiKey, 'api-key-user'), title: "Agent Runtimes Examples", description: "Sign in to run authenticated examples and tools.", leadingIcon: _jsx(HomeIcon, { size: 24 }) }), _jsx(Box, { sx: { mt: 2, display: 'flex', justifyContent: 'center' }, children: _jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowSignIn(false), children: "Cancel" }) })] }) })), _jsx(Box, { sx: {
                         marginTop: '60px',
                         height: 'calc(100vh - 60px)',
                         overflow: 'hidden',
-                    }, children: isChangingExample ? (_jsxs(Box, { sx: { p: 5, textAlign: 'center', color: 'fg.muted' }, children: [_jsxs("h3", { children: ["Loading ", selectedExample, "\u2026"] }), _jsx("p", { children: "Please wait while the example loads." })] })) : ExampleComponent ? (_jsx(ExampleWrapper, { children: _jsx(ExampleComponent, { ...exampleProps }) })) : null })] }) }));
+                    }, children: isChangingExample ? (_jsxs(Box, { sx: { p: 5, textAlign: 'center', color: 'fg.muted' }, children: [_jsxs("h3", { children: ["Loading ", selectedExample, "\u2026"] }), _jsx("p", { children: "Please wait while the example loads." })] })) : ExampleComponent ? (_jsx(ExampleWrapper, { children: _jsx(ExampleComponent, { ...exampleProps }, selectedExample) }, selectedExample)) : null })] }) }));
 };
 // Mount the app - check route to determine which app to render
 const root = document.getElementById('root');
@@ -359,15 +552,12 @@ if (root) {
         (window.__agentRuntimesExamplesRoot = createRoot(root));
     if (isOAuthCallback()) {
         // Handle OAuth callback - render OAuthCallback component
-        console.log('Rendering OAuthCallback (popup flow)');
         appRoot.render(_jsx(JupyterReactTheme, { children: _jsx(OAuthCallback, { autoClose: true, autoCloseDelay: 1000 }) }));
     }
     else if (isNotebookOnlyRoute()) {
-        console.log('Rendering NotebookOnlyApp');
         appRoot.render(_jsx(NotebookOnlyApp, {}));
     }
     else {
-        console.log('Rendering ExampleApp');
         appRoot.render(_jsx(ExampleApp, {}));
     }
 }