@datalayer/agent-runtimes 1.0.29 → 1.3.11

package/lib/examples/main.js

@@ -4,14 +4,20 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Distributed under the terms of the Modified BSD License.
  */
 /// <reference types="vite/client" />
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { createRoot } from 'react-dom/client';
-import { loadJupyterConfig, JupyterReactTheme, createServerSettings, setJupyterServerUrl, setJupyterServerToken, getJupyterServerUrl, getJupyterServerToken, } from '@datalayer/jupyter-react';
+// From the lean `/core` entry: the barrel drags the whole component
+// library (notebook, CodeMirror, cells) into the gallery's first paint,
+// and the gallery only needs the theme and the server config helpers.
+import { loadJupyterConfig, JupyterReactTheme, createServerSettings, jupyterReactStore, setJupyterServerUrl, setJupyterServerToken, getJupyterServerUrl, getJupyterServerToken, } from '@datalayer/jupyter-react/core';
 import { ServiceManager } from '@jupyterlab/services';
 import { DatalayerThemeProvider, DatalayerLogoText, getLogoColors, themeConfigs, Box, SlidingPanel, } from '@datalayer/primer-addons';
-import { AgentSummary } from '../components';
+// Straight from its module: the components barrel re-exports the
+// code-sandbox gallery and friends, none of which belong in the
+// example gallery's first paint.
+import { AgentSummary } from '../components/agents/AgentSummary';
 import { HomeIcon, SignInIcon, SignOutIcon } from '@primer/octicons-react';
-import { Button, SegmentedControl, Spinner, Text } from '@primer/react';
+import { ActionList, ActionMenu, Button, SegmentedControl, Spinner, Text, TextInput, } from '@primer/react';
 import { AppearanceControlsWithStore } from '@datalayer/primer-addons/lib/components/appearance';
 import { coreStore, iamStore } from '@datalayer/core';
 import { DATALAYER_IAM_TOKEN_KEY, DATALAYER_IAM_USER_KEY, } from '../state/substates';
@@ -21,14 +27,18 @@ import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { teardownExampleAgents } from './utils/teardownAgents';
 import { OAuthCallback } from '../identity';
 import { EXAMPLES, getExampleEntries, } from './example-selector';
-import { runtimeTargetStore, useRuntimeTargetStore, } from './utils/runtimeTargetStore';
+import { RUNTIME_TARGETS, runtimeTargetCapabilities, runtimeTargetStore, targetHasAgent, useRuntimeTargetStore, } from './utils/runtimeTargetStore';
 import { resolveExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
+import { isLocalUrl } from './utils/localUrl';
 import { agentSummaryStore } from './utils/agentSummaryStore';
+import { isSandboxOnlyExample } from './utils/exampleSurfaces';
 import { useAgentSummaryStore } from './utils/agentSummaryStore';
 import { useExampleThemeStore } from './utils/themeStore';
+import HomeExample from './HomeExample';
 import { ExampleWrapper } from './components/ExampleWrapper';
 import { ExampleErrorBoundary } from './components/ExampleErrorBoundary';
 import { createServiceManagerFromAgentSandbox } from '../hooks/useAgentRuntimes';
+import { useAgentRuntimes } from '../hooks/useAgentRuntimes';
 import { DEFAULT_MODEL } from '../specs/models';
 import nbformatExample from './utils/notebooks/NotebookExample1.ipynb.json';
 import '../../style/primer-primitives.css';
@@ -36,9 +46,68 @@ const DEFAULT_RUNTIMES_URL = 'https://r1.datalayer.run';
 const DEFAULT_LOCAL_JUPYTER_SERVER_URL = 'http://localhost:8888/api/jupyter-server';
 const DEFAULT_LOCAL_JUPYTER_SERVER_TOKEN = '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6';
 const DEFAULT_CLOUD_RUNTIME_ENVIRONMENT = 'ai-agents-env';
-const isNotebookOrCellExample = (exampleId) => {
-    return ((exampleId.includes('Notebook') || exampleId.includes('Cell')) &&
-        !exampleId.includes('Agent'));
+const EXAMPLE_GROUP_ORDER = [
+    'Loop',
+    'A2UI',
+    'A2A',
+    'AG-UI',
+    'Capabilities',
+    'Chat',
+    'Document',
+    'Notebook',
+    'Cell',
+    'CopilotKit',
+];
+/**
+ * The examples that open without an account.
+ *
+ * A list, not a rule: most examples here allocate a runtime somebody pays
+ * for, and this one happens to run entirely in the visitor's browser. Adding
+ * another is adding an id.
+ */
+const ANONYMOUS_EXAMPLES = new Set([
+    'LoopWorkspaceExample',
+    // Runs on the browser sandbox: nothing to allocate, nothing to sign into.
+    'LoopShellExample',
+    // Temporarily anonymous so the Jupyter output surface can be driven and
+    // debugged without a session. Remove once that work is finished.
+    'A2UiJupyterOutputExample',
+    // The two page layouts, on the browser sandbox like the shell.
+    'NotebookPageAgent',
+    'DocumentPageAgent',
+    // The decks plugin in a Loop; the agent and the decks both live in the page.
+    'DecksAgent',
+]);
+const getExampleGroup = (id) => {
+    if (id === 'AgentspecsExample' ||
+        id === 'AgentLoopExample' ||
+        id === 'LoopWorkspaceExample' ||
+        id === 'LoopShellExample' ||
+        id === 'DecksAgent') {
+        return 'Loop';
+    }
+    if (id.startsWith('A2Ui'))
+        return 'A2UI';
+    // Agents reached over the A2A protocol: their own category, after A2UI.
+    if (id.startsWith('AgentA2A'))
+        return 'A2A';
+    if (id.startsWith('AgUi'))
+        return 'AG-UI';
+    if (id.startsWith('CopilotKit'))
+        return 'CopilotKit';
+    // Each remaining Agent* example demonstrates one capability of the
+    // runtime: checkpoints, hooks, memory, guardrails…
+    if (id.startsWith('Agent'))
+        return 'Capabilities';
+    if (id.startsWith('Chat'))
+        return 'Chat';
+    // The document examples: the ones on the Lexical editor, and the page
+    // with a document on it.
+    if (id.startsWith('Lexical') || id.startsWith('Document'))
+        return 'Document';
+    if (id.startsWith('Notebook'))
+        return 'Notebook';
+    return 'Cell';
 };
 const wait = (ms) => new Promise(resolve => {
     window.setTimeout(resolve, ms);
@@ -50,22 +119,6 @@ const safeExampleId = (value) => {
         .replace(/^-+|-+$/g, '')
         .slice(0, 40);
 };
-const toAgentApiBaseUrl = (ingress) => {
-    const normalized = ingress.replace(/\/$/, '');
-    if (normalized.includes('/api/agent-runtimes')) {
-        return normalized;
-    }
-    if (normalized.includes('/api/jupyter-server')) {
-        return normalized.replace('/api/jupyter-server', '/api/agent-runtimes');
-    }
-    if (normalized.includes('/jupyter/server/')) {
-        return normalized.replace('/jupyter/server/', '/agent-runtimes/');
-    }
-    if (normalized.includes('/jupyter-server/')) {
-        return normalized.replace('/jupyter-server/', '/agent-runtimes/');
-    }
-    return normalized.replace('/jupyter/', '/agent-runtimes/');
-};
 const toSurfaceLabel = (exampleId) => {
     if (exampleId.toLowerCase().includes('cell')) {
         return 'cell';
@@ -94,24 +147,6 @@ const normalizeSandboxBaseUrl = (sandboxBaseUrl, agentBaseUrl) => {
         return sandboxRaw;
     }
 };
-const withTokenQueryParam = (rawUrl, token) => {
-    const normalizedUrl = String(rawUrl || '').trim();
-    const normalizedToken = String(token || '').trim();
-    if (!normalizedUrl || !normalizedToken) {
-        return normalizedUrl;
-    }
-    try {
-        const parsed = new URL(normalizedUrl);
-        if (!parsed.searchParams.get('token') &&
-            !parsed.searchParams.get('jupyter_token')) {
-            parsed.searchParams.set('token', normalizedToken);
-        }
-        return parsed.toString();
-    }
-    catch {
-        return normalizedUrl;
-    }
-};
 const resolveRuntimesUrl = (configured) => {
     const envRuntimeUrl = import.meta.env.VITE_DATALAYER_RUNTIMES_URL;
     const envBaseUrl = import.meta.env.VITE_DATALAYER_IAM_URL;
@@ -134,17 +169,16 @@ const toAgentRuntimesBaseUrl = (value) => {
     }
     return normalized;
 };
-const isProd1JupyterServerUrl = (value) => {
-    if (!value) {
-        return false;
-    }
-    try {
-        return new URL(value).hostname === 'prod1.datalayer.run';
-    }
-    catch {
-        return value.includes('prod1.datalayer.run');
-    }
-};
+/**
+ * The anonymous Jupyter server the `jupyter` target uses.
+ *
+ * The same one the jupyter-react examples point at: a real server, reachable
+ * without an account, so an example can execute code with nothing installed
+ * and nobody signed in. It is a sandbox and only a sandbox — no agent lives
+ * there, which is why that target shows the chat switched off.
+ */
+const ANONYMOUS_JUPYTER_SERVER_URL = 'https://prod1.datalayer.run/api/jupyter-server';
+const ANONYMOUS_JUPYTER_SERVER_TOKEN = '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6';
 const resolveLocalJupyterServerUrl = () => {
     const normalizeLoopbackHost = (raw) => {
         const trimmed = raw.trim().replace(/\/$/, '');
@@ -167,11 +201,58 @@ const resolveLocalJupyterServerUrl = () => {
         return normalizeLoopbackHost(envLocalUrl);
     }
     const configured = getJupyterServerUrl();
-    if (configured && !isProd1JupyterServerUrl(configured)) {
+    if (configured && isLocalUrl(configured)) {
         return normalizeLoopbackHost(configured);
     }
     return normalizeLoopbackHost(DEFAULT_LOCAL_JUPYTER_SERVER_URL);
 };
+/**
+ * The one in-page JupyterLite manager, created at most once.
+ *
+ * A `LiteServer` registers a mock WebSocket server per kernel URL, so building
+ * a second one on the same page throws `A mock server is already listening on
+ * this url` and leaves the notebook without a kernel. Switching to Browser,
+ * away, and back is an ordinary thing to do, so the manager is remembered
+ * rather than rebuilt — which is what jupyter-react does behind `<Jupyter
+ * lite>`, where it is created only `if (!serviceManager)`.
+ *
+ * The promise is cached, not the resolved value: a second switch arriving
+ * mid-start awaits the same start instead of racing it into the same error.
+ */
+let browserServiceManager = null;
+/** A sandbox in this page: JupyterLite over a Pyodide kernel, no server. */
+const createBrowserServiceManager = async () => {
+    // The in-page server is this page. Whichever target ran before left the
+    // Jupyter base url pointing at its own server — `prod1`, or localhost —
+    // and JupyterLite builds its kernel WebSocket addresses from that, so
+    // without this the browser sandbox dials a remote host for a kernel that
+    // only exists here.
+    setJupyterServerUrl(window.location.origin);
+    setJupyterServerToken('');
+    browserServiceManager =
+        browserServiceManager ??
+            // JupyterLite and the Pyodide kernel are megabytes; a person who never
+            // picks this target should not pay for them.
+            import('@datalayer/jupyter-react')
+                .then(({ createLiteServiceManager }) => createLiteServiceManager())
+                .then(manager => manager)
+                .catch(error => {
+                // A failed start must not be cached, or the target stays dead for
+                // the rest of the session.
+                browserServiceManager = null;
+                throw error;
+            });
+    return browserServiceManager;
+};
+/** A sandbox on the anonymous Jupyter server — real server, no account. */
+const createAnonymousJupyterServiceManager = async () => {
+    setJupyterServerUrl(ANONYMOUS_JUPYTER_SERVER_URL);
+    setJupyterServerToken(ANONYMOUS_JUPYTER_SERVER_TOKEN);
+    const serverSettings = createServerSettings(ANONYMOUS_JUPYTER_SERVER_URL, ANONYMOUS_JUPYTER_SERVER_TOKEN);
+    const manager = new ServiceManager({ serverSettings });
+    await manager.ready;
+    return manager;
+};
 const ensureLocalJupyterToken = () => {
     const token = (getJupyterServerToken() || '').trim();
     if (!token) {
@@ -253,6 +334,15 @@ const loadConfigurations = () => {
     }
 };
 const getExampleEntriesList = () => getExampleEntries();
+/**
+ * Those examples, as cards.
+ *
+ * Module scope, not a `useMemo`: the list is a constant, and computing it in
+ * the component put a hook after three early returns — so a render that took
+ * one of them called fewer hooks than the render before it, which React
+ * refuses outright. A value that never changes has no business being a hook.
+ */
+const ANONYMOUS_EXAMPLE_ENTRIES = getExampleEntriesList().filter(entry => ANONYMOUS_EXAMPLES.has(entry.id));
 const getInitialSearchQuery = () => {
     const params = new URLSearchParams(window.location.search);
     return (params.get('q') || '').trim();
@@ -481,11 +571,11 @@ const NotebookOnlyApp = () => {
                     }
                 }
                 // Create service manager
-                if (runtimeTargetStore.getState().target === 'cloud' &&
+                if (runtimeTargetStore.getState().target === 'datalayer' &&
                     configuration?.token) {
                     try {
                         const activeSummary = agentSummaryStore.getState().active;
-                        if (!activeSummary || activeSummary.location !== 'cloud') {
+                        if (!activeSummary || activeSummary.location !== 'datalayer') {
                             throw new Error('No active cloud agent sandbox found for notebook-only mode.');
                         }
                         const manager = await createServiceManagerFromAgentSandbox({
@@ -504,11 +594,21 @@ const NotebookOnlyApp = () => {
                     }
                 }
                 else {
-                    setJupyterServerUrl(resolveLocalJupyterServerUrl());
-                    ensureLocalJupyterToken();
-                    const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
-                    const manager = new ServiceManager({ serverSettings });
-                    await manager.ready;
+                    // Notebook-only mode has no agent of its own, but it still runs on
+                    // whichever sandbox the person picked.
+                    const target = runtimeTargetStore.getState().target;
+                    const manager = target === 'browser'
+                        ? await createBrowserServiceManager()
+                        : target === 'jupyter'
+                            ? await createAnonymousJupyterServiceManager()
+                            : await (async () => {
+                                setJupyterServerUrl(resolveLocalJupyterServerUrl());
+                                ensureLocalJupyterToken();
+                                const serverSettings = createServerSettings(getJupyterServerUrl(), getJupyterServerToken());
+                                const local = new ServiceManager({ serverSettings });
+                                await local.ready;
+                                return local;
+                            })();
                     setServiceManager(manager);
                 }
                 setLoading(false);
@@ -546,11 +646,19 @@ export const ExampleApp = () => {
     const [error, setError] = useState(null);
     const [serviceManager, setServiceManager] = useState(null);
     const [selectedExample, setSelectedExample] = useState(getDefaultExampleName());
+    // The example on screen, readable from closures that were frozen at the
+    // first render — see `createCloudServiceManager`.
+    const selectedExampleRef = useRef(selectedExample);
+    selectedExampleRef.current = selectedExample;
     const [searchQuery, setSearchQuery] = useState(getInitialSearchQuery());
     const [isChangingExample, setIsChangingExample] = useState(false);
     const [topNotice, setTopNotice] = useState(null);
     const runtimeTarget = useRuntimeTargetStore(state => state.target);
     const setRuntimeTarget = useRuntimeTargetStore(state => state.setTarget);
+    const shellRuntime = useAgentRuntimes({
+        autoCreateAgent: false,
+        runtimeCreationTarget: 'backend-services',
+    });
     const showTopNotice = useCallback((message, tone = 'info', durationMs = 4500, details) => {
         setTopNotice({
             id: Date.now() + Math.floor(Math.random() * 1000),
@@ -606,6 +714,12 @@ export const ExampleApp = () => {
         return manager;
     };
     const createCloudServiceManager = async () => {
+        // Read, not captured: `createServiceManagerForTarget` is a `useCallback`
+        // with no dependencies, so anything this closure takes from render scope
+        // is frozen at the first render. Switching example and then switching
+        // target would otherwise bootstrap a sandbox for whichever example was
+        // on screen when the app started.
+        const exampleId = selectedExampleRef.current;
         const { configuration } = coreStore.getState();
         if (!configuration?.token) {
             throw new Error('Cloud runtime requires authentication. Please sign in.');
@@ -645,108 +759,34 @@ export const ExampleApp = () => {
             throw lastError;
         };
         const bootstrapCloudSandbox = async () => {
-            const runtimesUrl = resolveRuntimesUrl(configuration.runtimesUrl);
-            const exampleSlug = safeExampleId(selectedExample || 'example');
-            const runtimeResp = await fetch(`${runtimesUrl}/api/runtimes/v1/runtimes`, {
-                method: 'POST',
-                headers: {
-                    Authorization: `Bearer ${configuration.token}`,
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    environment: {
-                        name: DEFAULT_CLOUD_RUNTIME_ENVIRONMENT,
-                    },
-                    given_name: `${exampleSlug}-sandbox`,
-                    credits_limit: 5,
-                    type: 'notebook',
-                    editor_variant: 'none',
-                }),
+            const exampleSlug = safeExampleId(exampleId || 'example');
+            const connection = await shellRuntime.launchRuntime({
+                environmentName: DEFAULT_CLOUD_RUNTIME_ENVIRONMENT,
+                givenName: `${exampleSlug}-sandbox`,
+                creditsLimit: 5,
+                type: 'notebook',
             });
-            if (!runtimeResp.ok) {
-                const failure = await runtimeResp.json().catch(() => ({}));
-                throw new Error(String(failure.detail ||
-                    `Failed to launch cloud runtime (${runtimeResp.status}).`));
-            }
-            const runtimePayload = (await runtimeResp.json());
-            const ingress = String(runtimePayload.runtime?.ingress || runtimePayload.ingress || '').trim();
-            if (!ingress) {
-                throw new Error('Cloud runtime launched but did not expose a Jupyter ingress URL.');
-            }
-            const agentBaseUrl = toAgentApiBaseUrl(ingress);
             const agentId = `${exampleSlug}-cloud-agent`;
-            const agentResp = await fetch(`${agentBaseUrl}/api/v1/agents`, {
-                method: 'POST',
-                headers: {
-                    Authorization: `Bearer ${configuration.token}`,
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify({
-                    name: agentId,
-                    description: `Cloud sandbox agent for ${selectedExample}`,
-                    agent_library: 'pydantic-ai',
-                    transport: 'ag-ui',
-                    model: DEFAULT_MODEL,
-                    system_prompt: 'You are a helpful AI assistant.',
-                }),
+            const agent = await shellRuntime.createAgent({
+                name: agentId,
+                description: `Cloud sandbox agent for ${exampleId}`,
+                agentLibrary: 'pydantic-ai',
+                protocol: 'ag-ui',
+                model: DEFAULT_MODEL,
+                systemPrompt: 'You are a helpful AI assistant.',
             });
-            if (!agentResp.ok &&
-                agentResp.status !== 400 &&
-                agentResp.status !== 409) {
-                const failure = await agentResp.json().catch(() => ({}));
-                throw new Error(String(failure.detail ||
-                    `Cloud runtime launched but agent creation failed (${agentResp.status}).`));
-            }
-            const agentPayload = (await agentResp
-                .clone()
-                .json()
-                .catch(() => ({})));
-            const resolvedAgentId = String(agentPayload.agent_id ||
-                agentPayload.id ||
-                agentPayload.agent?.agent_id ||
-                agentPayload.agent?.id ||
-                '').trim() || agentId;
-            const resolvedJupyterToken = String(agentPayload.jupyter_token ||
-                agentPayload.token ||
-                runtimePayload.runtime?.jupyter_token ||
-                runtimePayload.runtime?.token ||
-                runtimePayload.jupyter_token ||
-                runtimePayload.token ||
-                '').trim();
             const runtimeEnvironment = {
-                environmentName: String(runtimePayload.runtime?.environment?.name || '').trim() ||
-                    undefined,
-                environmentTitle: String(runtimePayload.runtime?.environment?.title || '').trim() ||
-                    undefined,
-                cpu: String(runtimePayload.runtime?.environment?.cpu ||
-                    runtimePayload.runtime?.environment?.resources?.cpu ||
-                    '').trim() || undefined,
-                memory: String(runtimePayload.runtime?.environment?.memory ||
-                    runtimePayload.runtime?.environment?.resources?.memory ||
-                    '').trim() || undefined,
-                gpu: [
-                    runtimePayload.runtime?.environment?.gpu ||
-                        runtimePayload.runtime?.environment?.resources?.gpu ||
-                        runtimePayload.runtime?.environment?.resources?.gpu_count ||
-                        runtimePayload.runtime?.environment?.resources?.['nvidia.com/gpu'] ||
-                        '',
-                    runtimePayload.runtime?.environment?.resources?.gpu_type || '',
-                    runtimePayload.runtime?.environment?.resources?.gpu_memory ||
-                        '',
-                ]
-                    .map(value => String(value || '').trim())
-                    .filter(Boolean)
-                    .join(' ') || undefined,
+                environmentName: connection.environmentName,
             };
             return {
-                agentBaseUrl,
-                agentId: resolvedAgentId,
-                ingress: withTokenQueryParam(ingress, resolvedJupyterToken),
+                agentBaseUrl: connection.agentBaseUrl,
+                agentId: agent.agentId || agentId,
+                ingress: connection.jupyterBaseUrl,
                 runtimeEnvironment,
             };
         };
         const activeSummary = agentSummaryStore.getState().active;
-        if (activeSummary?.location === 'cloud' &&
+        if (activeSummary?.location === 'datalayer' &&
             (activeSummary.sandboxBaseUrl || activeSummary.baseUrl)) {
             try {
                 return await connectFromSummary({
@@ -756,30 +796,27 @@ export const ExampleApp = () => {
                     runtimeEnvironment: activeSummary.runtimeEnvironment,
                 });
             }
-            catch (error) {
-                if (!isNotebookOrCellExample(selectedExample)) {
-                    throw error;
-                }
+            catch {
+                // The published sandbox is gone or unreachable. A fresh one is
+                // always allowed: an agent needs a runtime to run on, not a
+                // particular kind of example to run in.
                 showTopNotice('Existing cloud sandbox is unavailable. Launching a fresh sandbox...', 'warning', 3500);
             }
         }
-        if (!isNotebookOrCellExample(selectedExample)) {
-            throw new Error('No active cloud agent sandbox found. Open an agent example and launch a cloud agent first.');
-        }
         showTopNotice('Starting a cloud agent sandbox...', 'info', 2600);
         const launched = await bootstrapCloudSandbox();
         agentSummaryStore.getState().setActive({
-            exampleId: selectedExample,
+            exampleId,
             agentName: launched.agentId,
             agentId: launched.agentId,
-            location: 'cloud',
+            location: 'datalayer',
             baseUrl: launched.agentBaseUrl,
             sandboxBaseUrl: launched.ingress,
             runtimeEnvironment: launched.runtimeEnvironment,
             status: 'running',
             isReady: true,
         });
-        showTopNotice(`Cloud sandbox ready. Connecting ${toSurfaceLabel(selectedExample)} to it...`, 'success', 2600);
+        showTopNotice(`Cloud sandbox ready. Connecting ${toSurfaceLabel(exampleId)} to it...`, 'success', 2600);
         return connectFromSummary({
             baseUrl: launched.agentBaseUrl,
             sandboxBaseUrl: launched.ingress,
@@ -787,6 +824,54 @@ export const ExampleApp = () => {
             runtimeEnvironment: launched.runtimeEnvironment,
         });
     };
+    /**
+     * The service manager for a target.
+     *
+     * The single place that knows what each of the four positions means. The
+     * examples never see this: they read the target and what it offers, and the
+     * shell hands them a connected manager.
+     */
+    const createServiceManagerForTarget = useCallback(async (target) => {
+        const manager = await (() => {
+            switch (target) {
+                case 'browser':
+                    return createBrowserServiceManager();
+                case 'jupyter':
+                    return createAnonymousJupyterServiceManager();
+                case 'datalayer':
+                    return createCloudServiceManager();
+                case 'local':
+                default:
+                    return createLocalServiceManager();
+            }
+        })();
+        /*
+         * Say out loud which manager this page is using.
+         *
+         * A component that calls `useJupyter()` without one of its own — and
+         * jupyter-react's `Output` is one, so any document holding a Jupyter
+         * output node reaches it — first looks for a manager published in the
+         * jupyter-react store, and builds its own from the page's
+         * `jupyter-config-data` only if it finds none. Nothing published one,
+         * so it built one; and that page config defaults to
+         * `<VITE_DATALAYER_RUNTIMES_URL>/api/jupyter-server`, which is the
+         * cloud. The Document Agent Sidebar was therefore opening a second
+         * service manager against `r1.datalayer.run` while the shell's own
+         * pointed at localhost — twenty-odd cross-origin requests, all refused,
+         * on the target whose whole meaning is "this machine".
+         *
+         * Publishing here is the mechanism the store already documents for
+         * exactly this ("adopt it rather than racing it with a second
+         * manager"), and it covers every target rather than the one that
+         * happened to show the symptom.
+         */
+        jupyterReactStore.getState().setServiceManager(manager);
+        return manager;
+    }, 
+    // The factories close over stable setters and store reads; re-creating this
+    // on every render would restart the sandbox on each keystroke.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
     useEffect(() => {
         // Load configurations
         loadConfigurations();
@@ -794,30 +879,22 @@ export const ExampleApp = () => {
         const initializeApp = async () => {
             try {
                 const runtimeTarget = runtimeTargetStore.getState().target;
-                // Only create a cloud Datalayer runtime when the user picked "cloud".
-                // In "local" mode we must never hit the cloud runtimes API.
-                if (runtimeTarget === 'cloud') {
-                    try {
-                        const manager = await createCloudServiceManager();
-                        setServiceManager(manager);
-                        showTopNotice('Code sandbox connected successfully (cloud).', 'success', 2600);
-                        // Load initial example
-                        await loadExample(selectedExample, manager);
-                    }
-                    catch (error) {
-                        console.error('Failed to create DatalayerServiceManager:', error);
-                        showTopNotice(`Cloud runtime unavailable, using local instead: ${error instanceof Error ? error.message : String(error)}`, 'warning', 5500);
-                        const manager = await createLocalServiceManager();
-                        setServiceManager(manager);
-                        // Load initial example
-                        await loadExample(selectedExample, manager);
-                    }
+                const capabilities = runtimeTargetCapabilities(runtimeTarget);
+                try {
+                    const manager = await createServiceManagerForTarget(runtimeTarget);
+                    setServiceManager(manager);
+                    showTopNotice(`Code sandbox connected successfully (${capabilities.label.toLowerCase()}).`, 'success', 2600);
+                    await loadExample(selectedExample, manager);
                 }
-                else {
-                    // Local runtime target (or no token): use the local Jupyter server.
+                catch (error) {
+                    console.error(`Failed to create a service manager for ${runtimeTarget}:`, error);
+                    // Local is the fallback because it needs neither an account nor the
+                    // network. Falling back to the target that just failed would only
+                    // fail again.
+                    showTopNotice(`${capabilities.label} unavailable, using local instead: ${error instanceof Error ? error.message : String(error)}`, 'warning', 5500);
+                    setRuntimeTarget('local');
                     const manager = await createLocalServiceManager();
                     setServiceManager(manager);
-                    // Load initial example
                     await loadExample(selectedExample, manager);
                 }
                 setLoading(false);
@@ -846,9 +923,15 @@ export const ExampleApp = () => {
         });
         // 2) Tear down any server-side agents created by the previous example and
         //    wipe in-process agent state so the next example boots fresh.
-        const agentBaseUrl = resolveExampleAgentRuntimesUrl(runtimeTargetStore.getState().target);
+        const currentTarget = runtimeTargetStore.getState().target;
+        const activeRuntime = agentSummaryStore.getState().active;
+        const agentBaseUrl = activeRuntime?.location === currentTarget && activeRuntime.baseUrl
+            ? activeRuntime.baseUrl
+            : resolveExampleAgentRuntimesUrl(currentTarget);
         const token = useSimpleAuthStore.getState().token;
-        await teardownExampleAgents(agentBaseUrl, token ?? undefined);
+        if (targetHasAgent(currentTarget)) {
+            await teardownExampleAgents(agentBaseUrl, token ?? undefined);
+        }
         // 3) Load and mount the new example.
         setSelectedExample(newExample);
         localStorage.setItem('selectedExample', newExample);
@@ -857,33 +940,51 @@ export const ExampleApp = () => {
     const handleRuntimeTargetChange = async (newTarget) => {
         if (newTarget === runtimeTarget || !serviceManager)
             return;
+        const previousManager = serviceManager;
+        // 1) Unmount the current example FIRST so its cleanup hooks run against the
+        //    still-valid OLD runtime (AG-UI disconnect, abort fetches, sandboxes).
+        setIsChangingExample(true);
+        setExampleComponent(null);
+        await new Promise(resolve => {
+            requestAnimationFrame(() => resolve());
+        });
+        // 2) Tear down the agents created on the OLD target, then wipe in-process
+        //    agent state.
+        const activeRuntime = agentSummaryStore.getState().active;
+        const oldAgentBaseUrl = activeRuntime?.location === runtimeTarget && activeRuntime.baseUrl
+            ? activeRuntime.baseUrl
+            : resolveExampleAgentRuntimesUrl(runtimeTarget);
+        const token = useSimpleAuthStore.getState().token;
+        if (targetHasAgent(runtimeTarget)) {
+            await teardownExampleAgents(oldAgentBaseUrl, token ?? undefined);
+        }
+        /*
+         * 3) Only now build the new target's sandbox.
+         *
+         * The order matters and used to be the other way round. Creating the
+         * manager first meant that for the cloud target — where building one
+         * launches a runtime and registers an agent, writing them into the shared
+         * `agentRuntimeStore` — the teardown above then wiped the runtime that had
+         * just been created for the *new* target while cleaning up after the old
+         * one. The example mounted with no runtime connected, could not create its
+         * agent on one, and showed no chat at all.
+         */
         let nextManager;
         try {
-            nextManager =
-                newTarget === 'cloud'
-                    ? await createCloudServiceManager()
-                    : await createLocalServiceManager();
+            nextManager = await createServiceManagerForTarget(newTarget);
         }
         catch (switchError) {
             showTopNotice(`Failed to switch to ${newTarget}: ${switchError instanceof Error
                 ? switchError.message
                 : String(switchError)}`, 'error', 6000);
+            // Put the person back where they were. The example is already unmounted
+            // and the old agents are gone, so the old target is re-entered from
+            // scratch rather than left half-torn-down.
+            await loadExample(selectedExample, previousManager);
             return;
         }
-        // 1) Unmount the current example FIRST so its cleanup hooks run against the
-        //    still-valid OLD runtime (AG-UI disconnect, abort fetches, sandboxes).
-        setIsChangingExample(true);
-        setExampleComponent(null);
-        await new Promise(resolve => {
-            requestAnimationFrame(() => resolve());
-        });
-        // 2) Tear down the agents created on the OLD target, then wipe state so a
-        //    brand-new runtime is launched for the new target.
-        const oldAgentBaseUrl = resolveExampleAgentRuntimesUrl(runtimeTarget);
-        const token = useSimpleAuthStore.getState().token;
-        await teardownExampleAgents(oldAgentBaseUrl, token ?? undefined);
-        // 3) Switch the target and re-mount the example (its key includes the
-        //    target, so this launches/connects a fresh runtime).
+        // 4) Switch the target and re-mount the example (its key includes the
+        //    target, so this connects to the runtime built above).
         setRuntimeTarget(newTarget);
         setServiceManager(nextManager);
         setError(null);
@@ -911,22 +1012,87 @@ export const ExampleApp = () => {
     exampleProps.onSelectExample = (name) => {
         void handleExampleChange(name);
     };
-    return (_jsx(ExampleAppThemed, { selectedExample: selectedExample, isChangingExample: isChangingExample, error: error, ExampleComponent: ExampleComponent, exampleProps: exampleProps, serviceManager: serviceManager, onExampleChange: handleExampleChange, onRuntimeTargetChange: handleRuntimeTargetChange, availableExamples: getExampleEntriesList(), topNotice: topNotice, onDismissTopNotice: () => setTopNotice(null) }));
+    return (_jsx(ExampleAppThemed, { selectedExample: selectedExample, isChangingExample: isChangingExample, error: error, ExampleComponent: ExampleComponent, exampleProps: exampleProps, serviceManager: serviceManager, onExampleChange: handleExampleChange, anonymousExampleEntries: ANONYMOUS_EXAMPLE_ENTRIES, onRuntimeTargetChange: handleRuntimeTargetChange, availableExamples: getExampleEntriesList(), topNotice: topNotice, onDismissTopNotice: () => setTopNotice(null) }));
 };
 /**
  * Inner shell that reads from the theme store and wires
  * DatalayerThemeProvider + the header bar with selectors.
  */
-const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleComponent, exampleProps, serviceManager, onExampleChange, onRuntimeTargetChange, availableExamples, topNotice, onDismissTopNotice, }) => {
+const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleComponent, exampleProps, serviceManager, onExampleChange, anonymousExampleEntries, onRuntimeTargetChange, availableExamples, topNotice, onDismissTopNotice, }) => {
     const { colorMode, theme: themeVariant } = useExampleThemeStore();
     const runtimeTarget = useRuntimeTargetStore(state => state.target);
     const agentSummary = useAgentSummaryStore(state => state.active);
+    // Some examples bring their own sandbox switch — the LOOP workspace has one
+    // in its header. Two controls for one sandbox is one too many, and the
+    // second would not agree with the first.
+    const exampleOwnsSandboxControl = Boolean(availableExamples
+        .find(entry => entry.id === selectedExample)
+        ?.tags?.includes('owns-sandbox-control'));
     const isHome = selectedExample === 'HomeExample';
+    // The one example that describes its own agent — see the header below.
+    const isLoopWorkspace = selectedExample === 'LoopWorkspaceExample';
     const cfg = themeConfigs[themeVariant];
     const logoColors = getLogoColors(themeVariant, colorMode);
     const { token, setAuth, clearAuth } = useSimpleAuthStore();
     const [showSignIn, setShowSignIn] = useState(false);
-    const shouldShowAuthScreen = showSignIn && !token;
+    const [exampleSearch, setExampleSearch] = useState('');
+    /*
+     * The sign-in screen stands aside for an example that needs no account.
+     *
+     * Without this the screen offered the Loop workspace as a card and then
+     * stayed put when it was chosen: the example *was* selected, and nothing
+     * rendered it, because `showSignIn` knows only that nobody is signed in.
+     * Offering a way through and then not taking it is worse than not offering
+     * it.
+     */
+    const shouldShowAuthScreen = showSignIn && !token && !ANONYMOUS_EXAMPLES.has(selectedExample);
+    const selectedExampleEntry = availableExamples.find(example => example.id === selectedExample);
+    const exampleMenuGroups = useMemo(() => {
+        const groups = new Map();
+        for (const example of availableExamples) {
+            if (example.id === 'HomeExample')
+                continue;
+            const groupName = getExampleGroup(example.id);
+            const group = groups.get(groupName) ?? [];
+            group.push(example);
+            groups.set(groupName, group);
+        }
+        for (const [groupName, examples] of groups) {
+            examples.sort((left, right) => {
+                if (groupName === 'Loop') {
+                    // The shells first, most naked first; then the loop that drives a
+                    // notebook; then the library of specs behind them all.
+                    const LOOP_ORDER = [
+                        'LoopShellExample',
+                        'LoopWorkspaceExample',
+                        'AgentLoopExample',
+                        'AgentspecsExample',
+                    ];
+                    const loopOrder = (id) => {
+                        const index = LOOP_ORDER.indexOf(id);
+                        return index === -1 ? LOOP_ORDER.length : index;
+                    };
+                    const order = loopOrder(left.id) - loopOrder(right.id);
+                    if (order !== 0)
+                        return order;
+                }
+                return left.title.localeCompare(right.title);
+            });
+        }
+        return groups;
+    }, [availableExamples]);
+    const filteredExampleMenuGroups = useMemo(() => {
+        const query = exampleSearch.trim().toLowerCase();
+        if (!query)
+            return exampleMenuGroups;
+        const filtered = new Map();
+        for (const [groupName, examples] of exampleMenuGroups) {
+            const matches = examples.filter(example => example.title.toLowerCase().includes(query));
+            if (matches.length)
+                filtered.set(groupName, matches);
+        }
+        return filtered;
+    }, [exampleMenuGroups, exampleSearch]);
     const syncTokenToIamStore = useCallback((newToken) => {
         import('../state/substates').then(({ iamStore: coreIamStore }) => {
             coreIamStore.setState({ token: newToken });
@@ -935,9 +1101,7 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
     useEffect(() => {
         const jupyterSandboxBaseUrl = toAgentRuntimesBaseUrl(serviceManager?.serverSettings.baseUrl);
         const agentApiBaseUrl = resolveExampleAgentRuntimesUrl(runtimeTarget);
-        const isSandboxOnlyExample = (selectedExample.includes('Notebook') ||
-            selectedExample.includes('Cell')) &&
-            !selectedExample.includes('Agent');
+        const sandboxOnly = isSandboxOnlyExample(selectedExample);
         // Seed a base summary for the selected example. Do NOT clobber a richer
         // summary that the mounted example already published (spec id, agent id,
         // readiness) for the same example + target — otherwise fast-settling local
@@ -956,8 +1120,8 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
             exampleId: selectedExample,
             agentName: selectedExample,
             location: runtimeTarget,
-            baseUrl: isSandboxOnlyExample ? '' : agentApiBaseUrl,
-            sandboxBaseUrl: isSandboxOnlyExample ? jupyterSandboxBaseUrl : undefined,
+            baseUrl: sandboxOnly ? '' : agentApiBaseUrl,
+            sandboxBaseUrl: sandboxOnly ? jupyterSandboxBaseUrl : undefined,
             status: isChangingExample ? 'switching' : 'selected',
         });
     }, [selectedExample, runtimeTarget, isChangingExample, serviceManager]);
@@ -1007,7 +1171,13 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                         bg: 'canvas.default',
                         borderBottom: '1px solid',
                         borderColor: 'border.default',
-                    }, 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: {
+                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { as: "button", onClick: () => {
+                                        // Also the way back out of the sign-in view, which nothing
+                                        // else dismisses: with the example chooser hidden behind it,
+                                        // a person who changed their mind would otherwise be stuck.
+                                        setShowSignIn(false);
+                                        void onExampleChange('HomeExample');
+                                    }, title: "Home", "aria-label": "Go to examples home", sx: {
                                         display: 'inline-flex',
                                         alignItems: 'center',
                                         justifyContent: 'center',
@@ -1019,128 +1189,86 @@ const ExampleAppThemed = ({ selectedExample, isChangingExample, error, ExampleCo
                                         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,
-                                        fontFamily: 'inherit',
-                                        border: '1px solid',
-                                        borderColor: 'border.default',
-                                        borderRadius: 2,
-                                        bg: 'canvas.default',
-                                        color: 'fg.default',
-                                        cursor: isChangingExample ? 'not-allowed' : 'pointer',
-                                        minWidth: '250px',
-                                        outline: 'none',
-                                        '&:focus-visible': {
-                                            boxShadow: '0 0 0 2px var(--bgColor-accent-muted, rgba(26,188,156,0.3))',
-                                        },
-                                    }, 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' || id === 'AgentLoopExample')
-                                                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);
-                                            const group = grouped.get(g);
-                                            if (group) {
-                                                group.push(ex);
-                                            }
-                                            else {
-                                                grouped.set(g, [ex]);
-                                            }
-                                        }
-                                        for (const [groupName, list] of grouped.entries()) {
-                                            if (groupName === 'Personas') {
-                                                const personaOrder = (id) => {
-                                                    if (id === 'AgentspecsExample')
-                                                        return 0;
-                                                    if (id === 'AgentLoopExample')
-                                                        return 1;
-                                                    return 2;
-                                                };
-                                                list.sort((a, b) => {
-                                                    const orderDelta = personaOrder(a.id) - personaOrder(b.id);
-                                                    if (orderDelta !== 0)
-                                                        return orderDelta;
-                                                    return a.title.localeCompare(b.title);
-                                                });
-                                            }
-                                            else {
-                                                list.sort((a, b) => a.title.localeCompare(b.title));
-                                            }
-                                        }
-                                        const nodes = [];
-                                        if (home) {
-                                            nodes.push(_jsx("option", { value: home.id, disabled: home.id === selectedExample, 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, disabled: example.id === selectedExample, children: example.title }, example.id));
-                                            }
-                                        }
-                                        return _jsx(_Fragment, { children: nodes });
-                                    })() }), _jsx(Box, { "aria-label": "Runtime target", title: "Runtime target", sx: {
-                                        minWidth: '160px',
+                                    }, disabled: isChangingExample, children: _jsx(HomeIcon, { size: 16 }) }), !shouldShowAuthScreen && (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { disabled: isChangingExample, "aria-label": "Select example", sx: { minWidth: '250px', justifyContent: 'space-between' }, onClick: () => setExampleSearch(''), children: selectedExampleEntry?.title ?? selectedExample }), _jsxs(ActionMenu.Overlay, { width: "large", sx: {
+                                                maxHeight: 'calc(100vh - 72px)',
+                                                overflowY: 'auto',
+                                                overscrollBehavior: 'contain',
+                                            }, children: [_jsx(Box, { sx: {
+                                                        p: 2,
+                                                        borderBottom: '1px solid',
+                                                        borderColor: 'border.default',
+                                                    }, children: _jsx(TextInput, { autoFocus: true, block: true, "aria-label": "Filter examples", placeholder: "Filter examples...", value: exampleSearch, onChange: event => setExampleSearch(event.target.value) }) }), _jsxs(ActionList, { selectionVariant: "single", children: [availableExamples
+                                                            .filter(example => example.id === 'HomeExample' &&
+                                                            (!exampleSearch.trim() ||
+                                                                example.title
+                                                                    .toLowerCase()
+                                                                    .includes(exampleSearch.trim().toLowerCase())))
+                                                            .map(example => (_jsx(ActionList.Item, { selected: example.id === selectedExample, onSelect: () => void onExampleChange(example.id), children: example.title }, example.id))), _jsx(ActionList.Divider, {}), EXAMPLE_GROUP_ORDER.map(groupName => {
+                                                            const examples = filteredExampleMenuGroups.get(groupName);
+                                                            if (!examples?.length)
+                                                                return null;
+                                                            return (_jsx(ActionList.Group, { title: groupName, children: examples.map(example => (_jsx(ActionList.Item, { selected: example.id === selectedExample, onSelect: () => void onExampleChange(example.id), children: example.title }, example.id))) }, groupName));
+                                                        })] })] })] })), !shouldShowAuthScreen && !exampleOwnsSandboxControl && (_jsx(Box, { "aria-label": "Where the example runs", sx: {
+                                        minWidth: '320px',
                                         opacity: isHome || isChangingExample ? 0.6 : 1,
-                                    }, children: _jsxs(SegmentedControl, { "aria-label": "Runtime target", fullWidth: true, children: [_jsx(SegmentedControl.Button, { selected: runtimeTarget === 'local', disabled: isHome, onClick: () => {
-                                                    if (!isHome && !isChangingExample) {
-                                                        void onRuntimeTargetChange('local');
+                                    }, children: _jsx(SegmentedControl, { "aria-label": "Where the example runs", fullWidth: true, size: "small", children: RUNTIME_TARGETS.map(target => {
+                                            const capabilities = runtimeTargetCapabilities(target);
+                                            // Signing in is what the Datalayer target needs; saying so on
+                                            // the button beats letting the switch fail and explaining
+                                            // afterwards.
+                                            const needsSignIn = capabilities.requiresAuth && !token;
+                                            const unavailable = isHome || needsSignIn;
+                                            return (_jsx(SegmentedControl.Button, { selected: runtimeTarget === target, disabled: unavailable, title: needsSignIn
+                                                    ? `${capabilities.hint} Sign in to use it.`
+                                                    : capabilities.hint, onClick: () => {
+                                                    if (!unavailable && !isChangingExample) {
+                                                        void onRuntimeTargetChange(target);
                                                     }
-                                                }, children: "Local" }), _jsx(SegmentedControl.Button, { selected: runtimeTarget === 'cloud', disabled: isHome, onClick: () => {
-                                                    if (!isHome && !isChangingExample) {
-                                                        void onRuntimeTargetChange('cloud');
-                                                    }
-                                                }, children: "Cloud" })] }) }), !isHome && _jsx(AgentSummary, { summary: agentSummary }), isChangingExample && (_jsx(Box, { as: "span", sx: { color: 'fg.muted', fontSize: 0 }, children: "Loading\u2026" }))] }), _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", onTokenExpired: () => {
+                                                }, children: capabilities.label }, target));
+                                        }) }) })), !isHome && !shouldShowAuthScreen && !isLoopWorkspace && (_jsx(AgentSummary, { summary: agentSummary })), isChangingExample && (_jsx(Box, { as: "span", sx: { color: 'fg.muted', fontSize: 0 }, children: "Loading\u2026" }))] }), _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", onTokenExpired: () => {
                                                     handleHeaderLogout();
                                                     setShowSignIn(true);
                                                 } }), _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 }) })] })] }), _jsx(Box, { sx: {
                         marginTop: '60px',
                         height: 'calc(100vh - 60px)',
                         overflow: 'hidden',
-                    }, children: shouldShowAuthScreen ? (_jsx(Box, { sx: {
+                    }, children: shouldShowAuthScreen ? (
+                    /*
+                      Signing in, beside what can be seen without it.
+                      
+                      A sign-in screen on its own says only "not yet". Most of these
+                      examples do need an account — they allocate runtimes somebody
+                      pays for — but the Loop workspace runs entirely in the page, so
+                      putting it here turns a closed door into a choice: sign in for
+                      the rest, or try this one now.
+                    */
+                    _jsx(Box, { sx: {
                             width: '100%',
                             height: '100%',
                             bg: 'canvas.backdrop',
                             p: 3,
                             overflow: 'auto',
-                        }, children: _jsx(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 }) }) }) })) : 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(ExampleErrorBoundary, { children: _jsx(ExampleWrapper, { children: _jsx(ExampleComponent, { ...exampleProps }, `${selectedExample}:${runtimeTarget}`) }, `${selectedExample}:${runtimeTarget}`) }, `${selectedExample}:${runtimeTarget}`)) : null }), _jsx(SlidingPanel, { isOpen: Boolean(topNotice), onDismiss: onDismissTopNotice, position: "north", variant: topNotice?.tone ?? 'info', durationMs: topNotice?.durationMs ?? 0, fullWidth: true, offset: 60, zIndex: 160, message: topNotice?.message || '', details: topNotice?.details })] }) }));
+                        }, children: _jsxs(Box, { sx: {
+                                display: 'grid',
+                                // Stacked on a narrow window, sign-in first: it is what the
+                                // reader came here for, and a column of cards above the form
+                                // would bury it.
+                                gridTemplateColumns: ['1fr', '1fr', '440px minmax(0, 1fr)'],
+                                gap: 4,
+                                maxWidth: 1400,
+                                mx: 'auto',
+                                alignItems: 'start',
+                            }, 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 }), 
+                                    // Level with the cards beside it. Left to itself the form
+                                    // centres in `100vh`, which put it half a screen below the
+                                    // column it shares a row with.
+                                    fillHeight: false }), _jsx(Box, { sx: {
+                                        border: '1px solid',
+                                        borderColor: 'border.default',
+                                        borderRadius: 2,
+                                        overflow: 'hidden',
+                                        bg: 'canvas.default',
+                                    }, children: _jsx(HomeExample, { examples: anonymousExampleEntries, searchQuery: "", onSelectExample: name => void onExampleChange(name) }) })] }) })) : 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(ExampleErrorBoundary, { children: _jsx(ExampleWrapper, { children: _jsx(ExampleComponent, { ...exampleProps }, `${selectedExample}:${runtimeTarget}`) }, `${selectedExample}:${runtimeTarget}`) }, `${selectedExample}:${runtimeTarget}`)) : null }), _jsx(SlidingPanel, { isOpen: Boolean(topNotice), onDismiss: onDismissTopNotice, position: "north", variant: topNotice?.tone ?? 'info', durationMs: topNotice?.durationMs ?? 0, fullWidth: true, offset: 60, zIndex: 160, message: topNotice?.message || '', details: topNotice?.details })] }) }));
 };
 // Mount the app - check route to determine which app to render
 const root = document.getElementById('root');