@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/examples/AgentspecsExample.js

@@ -0,0 +1,1096 @@
+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 React, { useState, useEffect, useCallback, useMemo, useRef, } from 'react';
+import { PageLayout, IconButton, Button, Text } from '@primer/react';
+import { SidebarCollapseIcon, SidebarExpandIcon, XIcon, AgentIcon, } from '@primer/octicons-react';
+import { AiAgentIcon } from '@datalayer/icons-react';
+import { Blankslate } from '@primer/react/experimental';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Box } from '@datalayer/primer-addons';
+import { useCoreStore } from '@datalayer/core';
+import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
+import { AgentConfiguration } from '../config';
+import { Chat } from '../chat';
+import { DEFAULT_MODEL } from '../specs';
+import { useIdentity } from '../identity';
+import { useAgentsStore } from './utils/examplesStore';
+import { ThemedProvider } from './utils/themedProvider';
+import { isSpecSelection, getSpecId, isCloudSpecSelection, getCloudSpecId, } from '../config/AgentConfiguration';
+import { MockFileBrowser, MainContent, Header } from './components';
+import { useChatStore } from '../stores';
+import { useAgentRuntimes } from '../hooks/useAgentRuntimes';
+// Create a query client for React Query
+const queryClient = new QueryClient({
+    defaultOptions: {
+        queries: {
+            staleTime: 1000 * 60 * 5, // 5 minutes
+            gcTime: 1000 * 60 * 10, // 10 minutes
+            retry: 1,
+            refetchOnWindowFocus: false,
+        },
+    },
+});
+/**
+ * Hook to fetch codemode status and compute Jupyter error banner.
+ * Must be used inside QueryClientProvider.
+ */
+function useJupyterSandboxStatus(baseUrl, isConfigured, enableCodemode, useJupyterSandbox, codemodeStatusData) {
+    // REST polling removed — data comes exclusively via WS `agent.snapshot`.
+    const codemodeStatus = codemodeStatusData;
+    return React.useMemo(() => {
+        if (!isConfigured || !enableCodemode || !useJupyterSandbox) {
+            return undefined;
+        }
+        const sandbox = codemodeStatus?.sandbox;
+        if (!sandbox) {
+            return undefined;
+        }
+        // Check if Jupyter variant is selected but not connected
+        if (sandbox.variant === 'jupyter' && !sandbox.jupyter_connected) {
+            return {
+                message: sandbox.jupyter_error
+                    ? `Jupyter Sandbox Error: ${sandbox.jupyter_error}`
+                    : 'Jupyter Sandbox not connected. Code execution may fail.',
+                variant: 'danger',
+            };
+        }
+        return undefined;
+    }, [isConfigured, enableCodemode, useJupyterSandbox, codemodeStatus]);
+}
+function ChatWithJupyterStatus({ baseUrl, isConfigured, enableCodemode, useJupyterSandbox, chatProps, }) {
+    const jupyterErrorBanner = useJupyterSandboxStatus(baseUrl, isConfigured, enableCodemode, useJupyterSandbox);
+    return _jsx(Chat, { ...chatProps, errorBanner: jupyterErrorBanner });
+}
+// Default configuration - use environment variable if available
+// Note: Vercel AI connects to Jupyter server (8888), other protocols connect to agent-runtimes server (8765)
+const DEFAULT_WS_URL = import.meta.env.VITE_ACP_WS_URL || 'ws://localhost:8765/api/v1/acp/ws';
+const DEFAULT_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+const DEFAULT_AGENT_ID = 'example-agent';
+const DEFAULT_SYSTEM_PROMPT = 'You are a helpful AI assistant.';
+const RIGHT_PANE_WIDTH = {
+    min: '520px',
+    default: '520px',
+    max: '520px',
+};
+// GitHub OAuth client ID - set via environment variable for security
+// For development, you can create a GitHub OAuth App at:
+// https://github.com/settings/developers
+const GITHUB_CLIENT_ID = import.meta.env.VITE_GITHUB_CLIENT_ID || 'example-client-id';
+// Kaggle API token - set via environment variable
+// Get your token at: https://www.kaggle.com/settings/account (API section)
+// Download kaggle.json and use the "key" value
+const KAGGLE_TOKEN = import.meta.env.VITE_KAGGLE_TOKEN || '';
+const isPlainObject = (value) => typeof value === 'object' && value !== null && !Array.isArray(value);
+const yamlScalar = (value) => {
+    if (value === null || value === undefined) {
+        return 'null';
+    }
+    if (typeof value === 'number' || typeof value === 'boolean') {
+        return String(value);
+    }
+    const str = String(value);
+    if (str === '') {
+        return "''";
+    }
+    if (/^[a-zA-Z0-9._/-]+$/.test(str)) {
+        return str;
+    }
+    return JSON.stringify(str);
+};
+const toYaml = (value, indent = 0) => {
+    const pad = '  '.repeat(indent);
+    if (Array.isArray(value)) {
+        if (value.length === 0) {
+            return '[]';
+        }
+        return value
+            .map(item => {
+            if (isPlainObject(item) || Array.isArray(item)) {
+                return `${pad}-\n${toYaml(item, indent + 1)}`;
+            }
+            return `${pad}- ${yamlScalar(item)}`;
+        })
+            .join('\n');
+    }
+    if (isPlainObject(value)) {
+        const entries = Object.entries(value).filter(([, v]) => v !== undefined);
+        if (entries.length === 0) {
+            return '{}';
+        }
+        return entries
+            .map(([key, val]) => {
+            if (isPlainObject(val) || Array.isArray(val)) {
+                return `${pad}${key}:\n${toYaml(val, indent + 1)}`;
+            }
+            return `${pad}${key}: ${yamlScalar(val)}`;
+        })
+            .join('\n');
+    }
+    return `${pad}${yamlScalar(value)}`;
+};
+const normalizeHttpUrl = (value) => {
+    if (typeof value !== 'string') {
+        return null;
+    }
+    const trimmed = value.trim();
+    if (!trimmed) {
+        return null;
+    }
+    if (!/^https?:\/\//i.test(trimmed)) {
+        return null;
+    }
+    try {
+        const url = new URL(trimmed);
+        url.pathname = url.pathname.replace(/\/$/, '');
+        return url.toString().replace(/\/$/, '');
+    }
+    catch {
+        return null;
+    }
+};
+const isLocalhostUrl = (value) => {
+    if (!value) {
+        return false;
+    }
+    try {
+        const url = new URL(value);
+        return (url.hostname === 'localhost' ||
+            url.hostname === '127.0.0.1' ||
+            url.hostname === '0.0.0.0');
+    }
+    catch {
+        return false;
+    }
+};
+const collectUrlCandidates = (value, out = [], visited = new Set()) => {
+    if (value == null || visited.has(value)) {
+        return out;
+    }
+    if (typeof value === 'string') {
+        const normalized = normalizeHttpUrl(value);
+        if (normalized) {
+            out.push(normalized);
+        }
+        return out;
+    }
+    if (typeof value !== 'object') {
+        return out;
+    }
+    visited.add(value);
+    if (Array.isArray(value)) {
+        for (const item of value) {
+            collectUrlCandidates(item, out, visited);
+        }
+        return out;
+    }
+    const record = value;
+    for (const [key, nested] of Object.entries(record)) {
+        const lower = key.toLowerCase();
+        if (lower.includes('url') ||
+            lower.includes('endpoint') ||
+            lower.includes('host')) {
+            collectUrlCandidates(nested, out, visited);
+            continue;
+        }
+        if (lower.includes('service') ||
+            lower.includes('run') ||
+            lower.includes('cloud') ||
+            lower.includes('runtime') ||
+            lower.includes('agent')) {
+            collectUrlCandidates(nested, out, visited);
+        }
+    }
+    return out;
+};
+const resolveCloudRuntimeBaseUrlFromSpec = (spec) => {
+    if (!spec) {
+        return null;
+    }
+    const preferredKeys = [
+        'runtimesRunUrl',
+        'runtimeRunUrl',
+        'runtimes_url',
+        'runtime_url',
+        'runUrl',
+        'baseUrl',
+        'endpoint',
+    ];
+    for (const key of preferredKeys) {
+        const candidate = normalizeHttpUrl(spec[key]);
+        if (candidate && !isLocalhostUrl(candidate)) {
+            return candidate;
+        }
+    }
+    const serviceRoots = [
+        spec.services,
+        spec.cloud,
+        spec.runtime,
+        spec.agent,
+        spec.metadata,
+        spec,
+    ];
+    const candidates = serviceRoots.flatMap(root => collectUrlCandidates(root));
+    const nonLocal = candidates.find(url => !isLocalhostUrl(url));
+    return nonLocal || null;
+};
+const MOCK_SKILLS = [];
+// Skills are now fetched dynamically from the backend API (/api/v1/skills)
+// when Codemode is enabled. The AgentConfiguration component handles this.
+// Build default identity providers from env vars (backward compatibility)
+const DEFAULT_IDENTITY_PROVIDERS = {
+    ...(GITHUB_CLIENT_ID
+        ? {
+            github: {
+                type: 'oauth',
+                clientId: GITHUB_CLIENT_ID,
+                scopes: ['read:user', 'user:email', 'repo'],
+            },
+        }
+        : {}),
+    ...(KAGGLE_TOKEN
+        ? {
+            kaggle: {
+                type: 'token',
+                token: KAGGLE_TOKEN,
+                displayName: 'Kaggle',
+                iconUrl: 'https://www.kaggle.com/static/images/favicon.ico',
+            },
+        }
+        : {}),
+};
+const AgentspecsExample = ({ initialWsUrl = DEFAULT_WS_URL, initialBaseUrl = DEFAULT_BASE_URL, initialAgentName = DEFAULT_AGENT_ID, initialAgentLibrary = 'pydantic-ai', initialTransport = 'vercel-ai', initialModel = DEFAULT_MODEL, initialEnableCodemode = false, initialAllowDirectToolCalls = false, initialEnableToolReranker = false, initialSelectedMcpServers = [], autoSelectMcpServers = false, identityProviders = DEFAULT_IDENTITY_PROVIDERS, 
+// Deprecated props - merged into identityProviders for backward compat
+githubClientId, kaggleToken, }) => {
+    const [wsUrl, setWsUrl] = useState(initialWsUrl);
+    const [baseUrl, setBaseUrl] = useState(initialBaseUrl);
+    const [agentName, setAgentName] = useState(initialAgentName);
+    const [selectedAgentId, setSelectedAgentId] = useState('new-agent');
+    const [agentLibrary, setAgentLibrary] = useState(initialAgentLibrary);
+    const [transport, setTransport] = useState(initialTransport);
+    const [extensions, setExtensions] = useState([]);
+    const [model, setModel] = useState(initialModel);
+    const [description, setDescription] = useState('');
+    const [goal, setGoal] = useState('');
+    const [systemPrompt, setSystemPrompt] = useState(DEFAULT_SYSTEM_PROMPT);
+    const [systemPromptCodemodeAddons, setSystemPromptCodemodeAddons] = useState('');
+    const [tools, setTools] = useState([]);
+    const [sandboxVariant, setSandboxVariant] = useState('');
+    const [selectedLibrarySpec, setSelectedLibrarySpec] = useState(null);
+    const [selectedCloudSpec, setSelectedCloudSpec] = useState(null);
+    const [cloudLibrarySpecs, setCloudLibrarySpecs] = useState([]);
+    const [cloudLibraryLoading, setCloudLibraryLoading] = useState(false);
+    const [cloudLibraryError, setCloudLibraryError] = useState(null);
+    const [showSpecOverlay, setShowSpecOverlay] = useState(false);
+    const [isConfigured, setIsConfigured] = useState(false);
+    // Agent capabilities state (moved from Header toggles)
+    const [selectedSkills, setSelectedSkills] = useState([]);
+    const [enableCodemode, setEnableCodemode] = useState(initialEnableCodemode);
+    const [useJupyterSandbox, setUseJupyterSandbox] = useState(false);
+    const [allowDirectToolCalls, setAllowDirectToolCalls] = useState(initialAllowDirectToolCalls);
+    const [enableToolReranker, setEnableToolReranker] = useState(initialEnableToolReranker);
+    const [selectedMcpServers, setSelectedMcpServers] = useState(initialSelectedMcpServers);
+    const autoSelectRef = useRef(false);
+    const enableSkills = selectedSkills.length > 0;
+    const { configuration } = useCoreStore();
+    const { token } = useSimpleAuthStore();
+    const cloudCatalogBaseUrl = useMemo(() => {
+        const configured = normalizeHttpUrl(configuration?.runtimesRunUrl);
+        const envConfigured = normalizeHttpUrl(import.meta.env.VITE_DATALAYER_AGENT_RUNTIMES_URL);
+        if (configured && !isLocalhostUrl(configured)) {
+            return configured;
+        }
+        return envConfigured || 'https://r1.datalayer.run';
+    }, [configuration?.runtimesRunUrl]);
+    const isCloudMode = isCloudSpecSelection(selectedAgentId);
+    const selectedSpec = selectedCloudSpec || selectedLibrarySpec;
+    const cloudRuntimeCreationBaseUrl = useMemo(() => {
+        if (!isCloudMode) {
+            return cloudCatalogBaseUrl;
+        }
+        return (resolveCloudRuntimeBaseUrlFromSpec(selectedCloudSpec) ||
+            cloudCatalogBaseUrl);
+    }, [isCloudMode, selectedCloudSpec, cloudCatalogBaseUrl]);
+    const serviceBaseUrlForSelection = isCloudMode
+        ? cloudRuntimeCreationBaseUrl
+        : baseUrl;
+    // =====================================================================
+    // Two-Container Codemode Architecture
+    // =====================================================================
+    //
+    // When Jupyter sandbox is enabled, the architecture uses two containers:
+    //
+    // ┌─────────────────────────────────────┐  ┌─────────────────────────────────┐
+    // │  agent-runtimes (port 8765)         │  │  jupyter server (port 8888)     │
+    // │  ┌─────────────────────────────┐    │  │  ┌─────────────────────────┐    │
+    // │  │  MCP Servers (stdio)        │    │  │  │  Jupyter Kernel         │    │
+    // │  │  - github, filesystem, etc  │◀───┼──┼──│  executes generated     │    │
+    // │  └─────────────────────────────┘    │  │  │  Python code            │    │
+    // │  ┌─────────────────────────────┐    │  │  └─────────────────────────┘    │
+    // │  │  /api/v1/mcp/proxy/*        │    │  │                                 │
+    // │  │  HTTP proxy for tool calls  │    │  │  Tool calls go via HTTP to     │
+    // │  └─────────────────────────────┘    │  │  agent-runtimes MCP proxy      │
+    // └─────────────────────────────────────┘  └─────────────────────────────────┘
+    //
+    // The backend automatically configures mcp_proxy_url when jupyter_sandbox
+    // is provided, defaulting to http://0.0.0.0:8765/api/v1/mcp/proxy
+    //
+    // =====================================================================
+    // Jupyter sandbox URL (used when useJupyterSandbox is true)
+    // Can be configured via VITE_JUPYTER_SANDBOX_URL environment variable
+    const jupyterSandboxUrl = import.meta.env.VITE_JUPYTER_SANDBOX_URL ||
+        'http://localhost:8888/api/jupyter-server?token=60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6';
+    const handleSelectedServersChange = React.useCallback((newServers) => {
+        const oldServers = selectedMcpServers;
+        // Find added and removed servers
+        const oldIds = new Set(oldServers.map(s => `${s.id}:${s.origin}`));
+        const newIds = new Set(newServers.map(s => `${s.id}:${s.origin}`));
+        const added = newServers.filter(s => !oldIds.has(`${s.id}:${s.origin}`));
+        const removed = oldServers.filter(s => !newIds.has(`${s.id}:${s.origin}`));
+        // Add system message about tool changes if there are any
+        if ((added.length > 0 || removed.length > 0) && isConfigured) {
+            let messageContent = '';
+            if (added.length > 0) {
+                const addedNames = added.map(s => `${s.id} (${s.origin})`).join(', ');
+                messageContent += `🔧 Tools added: ${addedNames}. `;
+            }
+            if (removed.length > 0) {
+                const removedNames = removed
+                    .map(s => `${s.id} (${s.origin})`)
+                    .join(', ');
+                messageContent += `🔧 Tools removed: ${removedNames}. You no longer have access to these tools.`;
+            }
+            if (messageContent) {
+                const systemMessage = {
+                    id: `system-mcp-${Date.now()}`,
+                    role: 'system',
+                    content: messageContent.trim(),
+                    createdAt: new Date(),
+                };
+                useChatStore.getState().addMessage(systemMessage);
+            }
+        }
+        setSelectedMcpServers(newServers);
+    }, [selectedMcpServers, isConfigured]);
+    // Merge deprecated props into identityProviders for backward compatibility
+    const mergedIdentityProviders = React.useMemo(() => {
+        const merged = { ...identityProviders };
+        // Add deprecated githubClientId if provided and not already in config
+        if (githubClientId && !merged.github) {
+            merged.github = {
+                type: 'oauth',
+                clientId: githubClientId,
+                scopes: ['read:user', 'user:email', 'repo'],
+            };
+        }
+        // Add deprecated kaggleToken if provided and not already in config
+        if (kaggleToken && !merged.kaggle) {
+            merged.kaggle = {
+                type: 'token',
+                token: kaggleToken,
+                displayName: 'Kaggle',
+                iconUrl: 'https://www.kaggle.com/static/images/favicon.ico',
+            };
+        }
+        return merged;
+    }, [identityProviders, githubClientId, kaggleToken]);
+    // Extract OAuth providers for useIdentity hook (token providers are handled separately)
+    const oauthProvidersConfig = React.useMemo(() => {
+        const providers = {};
+        for (const [provider, config] of Object.entries(mergedIdentityProviders)) {
+            if (config.type === 'oauth') {
+                providers[provider] = {
+                    clientId: config.clientId,
+                    scopes: config.scopes,
+                };
+            }
+        }
+        return Object.keys(providers).length > 0 ? providers : undefined;
+    }, [mergedIdentityProviders]);
+    // Extract token-based providers for auto-connection
+    const tokenProviders = React.useMemo(() => {
+        const providers = [];
+        for (const [provider, config] of Object.entries(mergedIdentityProviders)) {
+            if (config.type === 'token') {
+                providers.push({
+                    provider,
+                    token: config.token,
+                    displayName: config.displayName,
+                    iconUrl: config.iconUrl,
+                });
+            }
+        }
+        return providers;
+    }, [mergedIdentityProviders]);
+    // Identity state - pass OAuth providers to configure them before callback is processed
+    const { connectWithToken, isConnected: isIdentityConnected } = useIdentity({
+        providers: oauthProvidersConfig,
+        autoHandleCallback: true,
+    });
+    // Track which token providers we've attempted to connect
+    const connectedTokenProvidersRef = useRef(new Set());
+    // Auto-connect all token-based providers if available and not already connected
+    useEffect(() => {
+        for (const { provider, token, displayName, iconUrl } of tokenProviders) {
+            // Skip if we've already attempted to connect this provider
+            if (connectedTokenProvidersRef.current.has(provider)) {
+                continue;
+            }
+            // Skip if already connected
+            if (isIdentityConnected(provider)) {
+                connectedTokenProvidersRef.current.add(provider);
+                continue;
+            }
+            // Mark as attempted
+            connectedTokenProvidersRef.current.add(provider);
+            connectWithToken(provider, token, { displayName, iconUrl })
+                .then(() => {
+                console.log(`[AgentRuntimeFormExample] ${provider} connected with token`);
+            })
+                .catch(err => {
+                console.error(`[AgentRuntimeFormExample] Failed to connect ${provider}:`, err);
+                // Remove from attempted set so we can retry
+                connectedTokenProvidersRef.current.delete(provider);
+            });
+        }
+    }, [tokenProviders, connectWithToken, isIdentityConnected]);
+    // Handle identity connect/disconnect
+    const handleIdentityConnect = useCallback((identity) => {
+        console.log('[AgentRuntimeFormExample] Identity connected:', identity.provider, identity.userInfo?.name || identity.userInfo?.email);
+    }, []);
+    const handleIdentityDisconnect = useCallback((provider) => {
+        console.log('[AgentRuntimeFormExample] Identity disconnected:', provider);
+    }, []);
+    // Handle codemode change - keep MCP server selections to scope codemode tools
+    const handleEnableCodemodeChange = (enabled) => {
+        setEnableCodemode(enabled);
+        if (!enabled) {
+            setAllowDirectToolCalls(false);
+            setEnableToolReranker(false);
+            setUseJupyterSandbox(false);
+        }
+    };
+    // UI state
+    const [activeSession, setActiveSession] = useState('session-1');
+    const [codemode, _] = useState(false);
+    const [showContextTree, setShowContextTree] = useState(false);
+    const [leftPaneVisible, setLeftPaneVisible] = useState(false);
+    const [rightPaneVisible, setRightPaneVisible] = useState(true);
+    const [isCreatingAgent, setIsCreatingAgent] = useState(false);
+    const [createError, setCreateError] = useState(null);
+    // Get agents and current agent from store
+    const agents = useAgentsStore(state => state.agents);
+    const currentAgent = useAgentsStore(state => state.getAgentById(selectedAgentId));
+    const toggleAgentStatus = useAgentsStore(state => state.toggleAgentStatus);
+    // Initialize transport from selected agent on mount
+    useEffect(() => {
+        if (currentAgent) {
+            setTransport(currentAgent.protocol);
+            setAgentName(currentAgent.id);
+        }
+    }, [currentAgent]);
+    // Auto-select MCP servers for codemode when requested
+    useEffect(() => {
+        if (!autoSelectMcpServers || autoSelectRef.current)
+            return;
+        if (!enableCodemode)
+            return;
+        if (selectedMcpServers.length > 0)
+            return;
+        if (!serviceBaseUrlForSelection)
+            return;
+        const loadServers = async () => {
+            try {
+                const response = await fetch(`${serviceBaseUrlForSelection}/api/v1/configure`, {
+                    headers: token ? { Authorization: `Bearer ${token}` } : {},
+                });
+                if (!response.ok)
+                    return;
+                const data = await response.json();
+                const servers = data?.mcpServers || [];
+                const available = servers.filter((s) => s.isAvailable);
+                if (available.length > 0) {
+                    setSelectedMcpServers([{ id: available[0].id, origin: 'config' }]);
+                    autoSelectRef.current = true;
+                }
+            }
+            catch {
+                // no-op
+            }
+        };
+        void loadServers();
+    }, [
+        autoSelectMcpServers,
+        enableCodemode,
+        selectedMcpServers,
+        serviceBaseUrlForSelection,
+        token,
+    ]);
+    // Track previous MCP servers to detect changes
+    const prevMcpServersRef = useRef(selectedMcpServers);
+    // Cache for library specs (fetched on-demand, outside QueryClientProvider)
+    const librarySpecsRef = useRef(null);
+    const fetchLibrarySpecs = useCallback(async () => {
+        if (librarySpecsRef.current)
+            return librarySpecsRef.current;
+        try {
+            const response = await fetch(`${baseUrl}/api/v1/agents/library`);
+            if (!response.ok)
+                return [];
+            const data = await response.json();
+            librarySpecsRef.current = data;
+            return data;
+        }
+        catch {
+            return [];
+        }
+    }, [baseUrl]);
+    useEffect(() => {
+        let cancelled = false;
+        const fetchCloudLibrarySpecs = async () => {
+            if (!cloudCatalogBaseUrl) {
+                setCloudLibrarySpecs([]);
+                setCloudLibraryError(null);
+                return;
+            }
+            setCloudLibraryLoading(true);
+            setCloudLibraryError(null);
+            try {
+                const response = await fetch(`${cloudCatalogBaseUrl}/api/v1/agents/library`, {
+                    headers: token ? { Authorization: `Bearer ${token}` } : {},
+                });
+                if (!response.ok) {
+                    throw new Error(`Cloud library fetch failed (${response.status})`);
+                }
+                const payload = (await response.json());
+                if (!cancelled) {
+                    setCloudLibrarySpecs(payload || []);
+                }
+            }
+            catch (error) {
+                if (!cancelled) {
+                    setCloudLibrarySpecs([]);
+                    setCloudLibraryError(error instanceof Error
+                        ? error.message
+                        : 'Failed to fetch cloud agent specs');
+                }
+            }
+            finally {
+                if (!cancelled) {
+                    setCloudLibraryLoading(false);
+                }
+            }
+        };
+        void fetchCloudLibrarySpecs();
+        return () => {
+            cancelled = true;
+        };
+    }, [cloudCatalogBaseUrl, token]);
+    const applySpecToForm = useCallback((spec) => {
+        setAgentName(spec.id);
+        setDescription(spec.description || '');
+        setGoal(spec.goal || '');
+        setSystemPrompt(spec.systemPrompt || spec.goal || DEFAULT_SYSTEM_PROMPT);
+        setSystemPromptCodemodeAddons(spec.systemPromptCodemodeAddons || '');
+        setTools(spec.tools || []);
+        setSandboxVariant(spec.sandboxVariant || '');
+        if (spec.model) {
+            setModel(spec.model);
+        }
+        if (spec.protocol === 'ag-ui' ||
+            spec.protocol === 'acp' ||
+            spec.protocol === 'vercel-ai' ||
+            spec.protocol === 'a2a') {
+            setTransport(spec.protocol);
+        }
+        setSelectedMcpServers((spec.mcpServers || []).map(server => ({
+            id: server.id,
+            origin: 'config',
+        })));
+        setSelectedSkills(spec.skills || []);
+        const codemodeConfig = spec.codemode && typeof spec.codemode === 'object'
+            ? spec.codemode
+            : null;
+        const codemodeEnabled = !!spec.systemPromptCodemodeAddons || !!codemodeConfig?.enabled;
+        setEnableCodemode(codemodeEnabled);
+        setAllowDirectToolCalls(Boolean(codemodeConfig?.allowDirectToolCalls ??
+            codemodeConfig?.allow_direct_tool_calls));
+        setEnableToolReranker(Boolean(codemodeConfig?.enableToolReranker ??
+            codemodeConfig?.enable_tool_reranker));
+        setUseJupyterSandbox(spec.sandboxVariant === 'jupyter');
+    }, []);
+    const mergedSpecForLaunch = useMemo(() => {
+        const normalizedProtocol = transport === 'vercel-ai-jupyter' ? 'vercel-ai' : transport;
+        const baseSpec = selectedSpec
+            ? { ...selectedSpec }
+            : {};
+        const codemode = isPlainObject(baseSpec.codemode) && baseSpec.codemode
+            ? { ...baseSpec.codemode }
+            : {};
+        codemode.enabled = enableCodemode;
+        codemode.allowDirectToolCalls = allowDirectToolCalls;
+        codemode.enableToolReranker = enableToolReranker;
+        return {
+            ...baseSpec,
+            id: selectedSpec?.id || agentName,
+            name: agentName,
+            description: description || undefined,
+            goal: goal || undefined,
+            model: model || undefined,
+            protocol: normalizedProtocol,
+            systemPrompt: systemPrompt || undefined,
+            systemPromptCodemodeAddons: systemPromptCodemodeAddons || undefined,
+            tools,
+            sandboxVariant: sandboxVariant || undefined,
+            skills: selectedSkills,
+            mcpServers: selectedMcpServers.map(server => ({
+                id: server.id,
+                origin: server.origin,
+            })),
+            codemode,
+        };
+    }, [
+        transport,
+        selectedSpec,
+        agentName,
+        description,
+        goal,
+        model,
+        systemPrompt,
+        systemPromptCodemodeAddons,
+        tools,
+        sandboxVariant,
+        selectedSkills,
+        selectedMcpServers,
+        enableCodemode,
+        allowDirectToolCalls,
+        enableToolReranker,
+    ]);
+    const specYamlPreview = useMemo(() => toYaml(mergedSpecForLaunch), [mergedSpecForLaunch]);
+    useEffect(() => {
+        if (!showSpecOverlay) {
+            return;
+        }
+        const onKeyDown = (event) => {
+            if (event.key === 'Escape') {
+                setShowSpecOverlay(false);
+            }
+        };
+        window.addEventListener('keydown', onKeyDown);
+        return () => {
+            window.removeEventListener('keydown', onKeyDown);
+        };
+    }, [showSpecOverlay]);
+    const { runtime: cloudRuntime, status: cloudRuntimeStatus, error: cloudRuntimeError, launchRuntime: launchCloudRuntime, disconnect: disconnectCloudRuntime, } = useAgentRuntimes({
+        agentSpecId: isCloudMode ? getCloudSpecId(selectedAgentId) : undefined,
+        autoStart: false,
+        runtimeCreationTarget: 'backend-services',
+        runtimeCreationBaseUrl: cloudRuntimeCreationBaseUrl,
+        agentSpec: isCloudMode ? mergedSpecForLaunch : undefined,
+        agentConfig: {
+            name: agentName,
+            model,
+            protocol: transport === 'vercel-ai-jupyter' ? 'vercel-ai' : transport,
+            description: description || `Cloud agent launch for ${agentName}`,
+        },
+    });
+    const handleAgentSelect = async (agentId) => {
+        setSelectedAgentId(agentId);
+        setCreateError(null);
+        if (agentId === 'new-agent') {
+            // Reset to defaults for new agent
+            setAgentName(DEFAULT_AGENT_ID);
+            setDescription('');
+            setGoal('');
+            setSystemPrompt(DEFAULT_SYSTEM_PROMPT);
+            setSystemPromptCodemodeAddons('');
+            setTools([]);
+            setSandboxVariant('');
+            setSelectedSkills([]);
+            setSelectedMcpServers([]);
+            setSelectedLibrarySpec(null);
+            setSelectedCloudSpec(null);
+            setEnableCodemode(false);
+            setAllowDirectToolCalls(false);
+            setEnableToolReranker(false);
+            setUseJupyterSandbox(false);
+            setTransport('vercel-ai');
+        }
+        else if (isSpecSelection(agentId)) {
+            setSelectedCloudSpec(null);
+            const specId = getSpecId(agentId);
+            const specs = await fetchLibrarySpecs();
+            const spec = specs.find(s => s.id === specId);
+            if (spec) {
+                setSelectedLibrarySpec(spec);
+                applySpecToForm(spec);
+            }
+            else {
+                setSelectedLibrarySpec(null);
+            }
+        }
+        else if (isCloudSpecSelection(agentId)) {
+            setSelectedLibrarySpec(null);
+            const specId = getCloudSpecId(agentId);
+            const spec = cloudLibrarySpecs.find(s => s.id === specId) || null;
+            if (spec) {
+                setSelectedCloudSpec(spec);
+                applySpecToForm(spec);
+            }
+            else {
+                setSelectedCloudSpec(null);
+            }
+        }
+        else {
+            setSelectedLibrarySpec(null);
+            setSelectedCloudSpec(null);
+            const agent = agents.find(a => a.id === agentId);
+            if (agent) {
+                setAgentName(agent.id);
+                setTransport(agent.protocol);
+            }
+        }
+    };
+    useEffect(() => {
+        if (isCloudMode && cloudRuntimeStatus === 'error' && cloudRuntimeError) {
+            setCreateError(cloudRuntimeError);
+        }
+    }, [isCloudMode, cloudRuntimeStatus, cloudRuntimeError]);
+    /**
+     * Create a new agent via the API
+     */
+    const createAgentOnServer = useCallback(async () => {
+        setIsCreatingAgent(true);
+        setCreateError(null);
+        try {
+            // Resolve local spec ID when creating from local library specs.
+            const specId = isSpecSelection(selectedAgentId)
+                ? getSpecId(selectedAgentId)
+                : undefined;
+            const response = await fetch(`${baseUrl}/api/v1/agents`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    name: agentName,
+                    description: description || `Agent created via UI (${agentLibrary})`,
+                    goal: goal || undefined,
+                    agent_library: agentLibrary,
+                    transport: transport,
+                    model: model,
+                    system_prompt: systemPrompt || DEFAULT_SYSTEM_PROMPT,
+                    system_prompt_codemode_addons: systemPromptCodemodeAddons || undefined,
+                    tools: tools,
+                    sandbox_variant: sandboxVariant || undefined,
+                    enable_skills: enableSkills,
+                    enable_codemode: enableCodemode,
+                    allow_direct_tool_calls: allowDirectToolCalls,
+                    enable_tool_reranker: enableToolReranker,
+                    selected_mcp_servers: selectedMcpServers,
+                    skills: selectedSkills,
+                    jupyter_sandbox: useJupyterSandbox ? jupyterSandboxUrl : undefined,
+                    agent_spec: mergedSpecForLaunch,
+                    ...(specId ? { agent_spec_id: specId } : {}),
+                }),
+            });
+            if (!response.ok) {
+                const errorData = await response
+                    .json()
+                    .catch(() => ({ detail: 'Unknown error' }));
+                throw new Error(errorData.detail || `Failed to create agent: ${response.status}`);
+            }
+            const data = await response.json();
+            console.log('[AgentRuntimeExample] Agent created:', data);
+            return data.id;
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Failed to create agent';
+            console.error('[AgentRuntimeExample] Error creating agent:', errorMessage);
+            setCreateError(errorMessage);
+            return null;
+        }
+        finally {
+            setIsCreatingAgent(false);
+        }
+    }, [
+        baseUrl,
+        agentName,
+        agentLibrary,
+        description,
+        goal,
+        transport,
+        model,
+        systemPrompt,
+        systemPromptCodemodeAddons,
+        tools,
+        sandboxVariant,
+        enableSkills,
+        enableCodemode,
+        allowDirectToolCalls,
+        enableToolReranker,
+        selectedMcpServers,
+        selectedSkills,
+        useJupyterSandbox,
+        jupyterSandboxUrl,
+        selectedAgentId,
+        mergedSpecForLaunch,
+    ]);
+    /**
+     * Delete an agent via the API
+     */
+    const deleteAgentOnServer = useCallback(async (agentId) => {
+        try {
+            const response = await fetch(`${baseUrl}/api/v1/agents/${agentId}`, {
+                method: 'DELETE',
+            });
+            if (!response.ok) {
+                console.warn(`[AgentRuntimeExample] Failed to delete agent: ${response.status}`);
+                return false;
+            }
+            console.log('[AgentRuntimeExample] Agent deleted:', agentId);
+            return true;
+        }
+        catch (error) {
+            console.warn('[AgentRuntimeExample] Error deleting agent:', error);
+            return false;
+        }
+    }, [baseUrl]);
+    // Track MCP servers for reference (no longer triggers recreation)
+    // MCP server updates are now handled via PATCH endpoint by McpServerManager
+    useEffect(() => {
+        prevMcpServersRef.current = selectedMcpServers;
+    }, [selectedMcpServers]);
+    // True when creating a new agent (blank or from a library spec)
+    const isNewMode = selectedAgentId === 'new-agent' ||
+        isSpecSelection(selectedAgentId) ||
+        isCloudSpecSelection(selectedAgentId);
+    const effectiveBaseUrl = isCloudMode && cloudRuntime?.agentBaseUrl
+        ? cloudRuntime.agentBaseUrl
+        : baseUrl;
+    const effectiveAgentId = isCloudMode && cloudRuntime?.agentId
+        ? cloudRuntime.agentId
+        : currentAgent?.id || agentName;
+    const effectiveProtocol = currentAgent?.protocol || transport;
+    const launchStatus = useMemo(() => {
+        if (createError) {
+            return 'error';
+        }
+        if (isCloudMode) {
+            return cloudRuntimeStatus || 'idle';
+        }
+        if (isCreatingAgent) {
+            return 'launching';
+        }
+        return isConfigured ? 'ready' : 'idle';
+    }, [
+        createError,
+        isCloudMode,
+        cloudRuntimeStatus,
+        isCreatingAgent,
+        isConfigured,
+    ]);
+    const handleConnect = async () => {
+        // For existing agents (not new-agent or spec), ensure transport and agentName are set
+        if (!isNewMode) {
+            const agent = agents.find(a => a.id === selectedAgentId);
+            if (agent) {
+                setTransport(agent.protocol);
+                setAgentName(agent.id);
+            }
+            setIsConfigured(true);
+            return;
+        }
+        if (isCloudMode) {
+            try {
+                const connection = await launchCloudRuntime();
+                setAgentName(connection.agentId || agentName);
+                if (connection.agentBaseUrl) {
+                    setBaseUrl(connection.agentBaseUrl);
+                }
+                setIsConfigured(true);
+            }
+            catch (error) {
+                setCreateError(error instanceof Error
+                    ? error.message
+                    : 'Failed to launch cloud agent');
+            }
+            return;
+        }
+        // For vercel-ai-jupyter, no server-side agent creation needed
+        // It uses Jupyter server's built-in agent endpoint
+        if (transport === 'vercel-ai-jupyter') {
+            setIsConfigured(true);
+            return;
+        }
+        // For new agents, first create the agent on the server
+        if (transport === 'acp' && wsUrl && agentName) {
+            const createdAgentId = await createAgentOnServer();
+            if (createdAgentId) {
+                setAgentName(createdAgentId);
+                setIsConfigured(true);
+            }
+        }
+        else if ((transport === 'ag-ui' ||
+            transport === 'vercel-ai' ||
+            transport === 'a2a') &&
+            baseUrl &&
+            agentName) {
+            const createdAgentId = await createAgentOnServer();
+            if (createdAgentId) {
+                setAgentName(createdAgentId);
+                setIsConfigured(true);
+            }
+        }
+    };
+    const handleReset = async () => {
+        if (isCloudMode) {
+            disconnectCloudRuntime();
+            setIsConfigured(false);
+            return;
+        }
+        // Delete the agent from the server if we created it
+        if ((selectedAgentId === 'new-agent' || isSpecSelection(selectedAgentId)) &&
+            agentName) {
+            await deleteAgentOnServer(agentName);
+        }
+        setIsConfigured(false);
+    };
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(ThemedProvider, { children: [_jsxs(PageLayout, { containerWidth: "full", children: [_jsx(Header, { activeSession: activeSession, agentName: isNewMode ? undefined : currentAgent?.name, agentDescription: isNewMode ? undefined : currentAgent?.description, agentStatus: currentAgent?.status, showContextTree: showContextTree, isNewAgent: isNewMode, isConfigured: isConfigured, onSessionChange: setActiveSession, onToggleContextTree: () => setShowContextTree(!showContextTree), onToggleStatus: currentAgent
+                                ? () => toggleAgentStatus(currentAgent.id)
+                                : undefined }), leftPaneVisible ? (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
+                                        position: 'fixed',
+                                        left: 0,
+                                        top: '50%',
+                                        transform: 'translateY(-50%)',
+                                        zIndex: 100,
+                                    }, children: _jsx(IconButton, { icon: SidebarCollapseIcon, "aria-label": "Collapse left pane", size: "small", onClick: () => setLeftPaneVisible(false), sx: {
+                                            borderRadius: '0 6px 6px 0',
+                                            bg: 'canvas.default',
+                                            border: '1px solid',
+                                            borderLeft: 'none',
+                                            borderColor: 'border.default',
+                                        } }) }), _jsx(PageLayout.Pane, { position: "start", "aria-label": "File browser pane", resizable: true, sticky: true, width: { min: '250px', default: '300px', max: '1200px' }, children: isNewMode ? (_jsxs(Blankslate, { border: true, spacious: true, narrow: true, children: [_jsx(Blankslate.Visual, { children: _jsx(AiAgentIcon, { colored: true, size: 48 }) }), _jsx(Blankslate.Heading, { children: "Agent Runtimes" }), _jsx(Box, { sx: { textAlign: 'center' }, children: _jsx(Blankslate.Description, { children: "Expose AI Agents through multiple protocols." }) })] })) : (_jsx(MockFileBrowser, { codemode: codemode })) })] })) : (_jsx(Box, { sx: {
+                                position: 'fixed',
+                                left: 0,
+                                top: '50%',
+                                transform: 'translateY(-50%)',
+                                zIndex: 100,
+                            }, children: _jsx(IconButton, { icon: SidebarExpandIcon, "aria-label": "Expand left pane", size: "small", onClick: () => setLeftPaneVisible(true), sx: {
+                                    borderRadius: '0 6px 6px 0',
+                                    bg: 'canvas.default',
+                                    border: '1px solid',
+                                    borderLeft: 'none',
+                                    borderColor: 'border.default',
+                                } }) })), _jsx(PageLayout.Content, { children: _jsx(MainContent, { showWelcomeMessage: true, isConfigured: isConfigured, baseUrl: effectiveBaseUrl, agentId: effectiveAgentId, enableCodemode: enableCodemode, selectedMcpServers: selectedMcpServers, onSelectedMcpServersChange: handleSelectedServersChange, onMcpServersChange: () => {
+                                    // Trigger codemode tool regeneration when MCP servers change at runtime
+                                    console.log('[AgentRuntimeFormExample] MCP servers changed, regenerating codemode tools...');
+                                    // The Chat component will pick up the new selectedMcpServers via props
+                                } }) }), rightPaneVisible ? (_jsx(_Fragment, { children: _jsx(PageLayout.Pane, { position: "end", "aria-label": "Agent configuration and chat pane", width: RIGHT_PANE_WIDTH, sticky: true, children: _jsxs(Box, { sx: {
+                                        height: '100%',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        p: 2,
+                                    }, children: [_jsxs(Box, { sx: {
+                                                display: 'flex',
+                                                justifyContent: 'space-between',
+                                                alignItems: 'center',
+                                                mb: 2,
+                                                gap: 2,
+                                            }, children: [_jsx(IconButton, { icon: SidebarCollapseIcon, "aria-label": "Collapse right pane", size: "small", onClick: () => setRightPaneVisible(false), variant: "invisible" }), _jsx(Button, { size: "small", onClick: () => setShowSpecOverlay(true), children: "View Full Spec (YAML)" })] }), !isConfigured ? (_jsx(AgentConfiguration, { agentLibrary: agentLibrary, protocol: currentAgent?.protocol || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: serviceBaseUrlForSelection, agentName: agentName, description: description, goal: goal, model: model, systemPrompt: systemPrompt, systemPromptCodemodeAddons: systemPromptCodemodeAddons, tools: tools, sandboxVariant: sandboxVariant, agents: agents, selectedAgentId: selectedAgentId, isCreatingAgent: isCreatingAgent, createError: createError, enableCodemode: enableCodemode, useJupyterSandbox: useJupyterSandbox, allowDirectToolCalls: allowDirectToolCalls, enableToolReranker: enableToolReranker, availableSkills: MOCK_SKILLS, selectedSkills: selectedSkills, selectedMcpServers: selectedMcpServers, cloudLibrarySpecs: cloudLibrarySpecs, cloudLibraryLoading: cloudLibraryLoading, cloudLibraryError: cloudLibraryError, launchTarget: isCloudMode ? 'cloud' : 'local', launchStatus: launchStatus, launchBaseUrl: serviceBaseUrlForSelection, identityProviders: oauthProvidersConfig, onIdentityConnect: handleIdentityConnect, onIdentityDisconnect: handleIdentityDisconnect, onAgentLibraryChange: setAgentLibrary, onTransportChange: setTransport, onExtensionsChange: setExtensions, onWsUrlChange: setWsUrl, onBaseUrlChange: isCloudMode
+                                                ? (_) => {
+                                                    /* Cloud mode uses cloud service URLs from spec/config. */
+                                                }
+                                                : setBaseUrl, onAgentNameChange: setAgentName, onDescriptionChange: setDescription, onGoalChange: setGoal, onModelChange: setModel, onSystemPromptChange: setSystemPrompt, onSystemPromptCodemodeAddonsChange: setSystemPromptCodemodeAddons, onToolsChange: setTools, onSandboxVariantChange: setSandboxVariant, onAgentSelect: handleAgentSelect, onConnect: handleConnect, onEnableCodemodeChange: handleEnableCodemodeChange, onUseJupyterSandboxChange: setUseJupyterSandbox, onAllowDirectToolCallsChange: setAllowDirectToolCalls, onEnableToolRerankerChange: setEnableToolReranker, onSelectedSkillsChange: setSelectedSkills, onSelectedMcpServersChange: setSelectedMcpServers })) : (
+                                        /* Chat Interface */
+                                        _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(ChatWithJupyterStatus, { baseUrl: effectiveBaseUrl, isConfigured: isConfigured, enableCodemode: enableCodemode, useJupyterSandbox: useJupyterSandbox, chatProps: {
+                                                    protocol: effectiveProtocol,
+                                                    extensions: extensions,
+                                                    wsUrl: wsUrl,
+                                                    baseUrl: effectiveBaseUrl,
+                                                    agentId: effectiveAgentId,
+                                                    title: currentAgent?.name || agentName || 'AI Assistant',
+                                                    brandIcon: _jsx(AgentIcon, { size: 16 }),
+                                                    autoConnect: true,
+                                                    autoFocus: true,
+                                                    placeholder: 'Type your message to the agent...',
+                                                    height: 'calc(100vh - 150px)',
+                                                    showModelSelector: true,
+                                                    showToolsMenu: true,
+                                                    showSkillsMenu: true,
+                                                    showInformation: false,
+                                                    codemodeEnabled: enableCodemode,
+                                                    initialModel: model,
+                                                    mcpServers: selectedMcpServers,
+                                                    initialSkills: selectedSkills,
+                                                    identityProviders: oauthProvidersConfig,
+                                                    onIdentityConnect: handleIdentityConnect,
+                                                    onIdentityDisconnect: handleIdentityDisconnect,
+                                                    suggestions: [
+                                                        {
+                                                            title: '👋 Say hello',
+                                                            message: 'Hello! What can you help me with today?',
+                                                        },
+                                                        {
+                                                            title: '💡 Get ideas',
+                                                            message: 'Can you suggest some creative project ideas?',
+                                                        },
+                                                        {
+                                                            title: '📝 Explain concepts',
+                                                            message: 'Can you explain how AI agents work?',
+                                                        },
+                                                        {
+                                                            title: '🔧 Help with code',
+                                                            message: 'Can you help me write some Python code?',
+                                                        },
+                                                    ],
+                                                    onDisconnect: handleReset,
+                                                    onMessageSent: (_content) => {
+                                                        // Message sent
+                                                    },
+                                                    onMessageReceived: (_message) => {
+                                                        // Message received
+                                                    },
+                                                } }) }))] }) }) })) : (_jsx(Box, { sx: {
+                                position: 'fixed',
+                                right: 0,
+                                top: '50%',
+                                transform: 'translateY(-50%)',
+                                zIndex: 100,
+                            }, children: _jsx(IconButton, { icon: SidebarExpandIcon, "aria-label": "Expand right pane", size: "small", onClick: () => setRightPaneVisible(true), sx: {
+                                    borderRadius: '6px 0 0 6px',
+                                    bg: 'canvas.default',
+                                    border: '1px solid',
+                                    borderRight: 'none',
+                                    borderColor: 'border.default',
+                                } }) }))] }), showSpecOverlay && (_jsxs(Box, { sx: {
+                        position: 'fixed',
+                        inset: 24,
+                        zIndex: 300,
+                        bg: 'canvas.default',
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 1,
+                        boxShadow: 'shadow.large',
+                        display: 'flex',
+                        flexDirection: 'column',
+                    }, children: [_jsxs(Box, { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'space-between',
+                                px: 3,
+                                py: 2,
+                                borderBottom: '1px solid',
+                                borderColor: 'border.default',
+                            }, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: "Spec Payload Preview (YAML)" }), _jsx(IconButton, { icon: XIcon, "aria-label": "Close spec preview", size: "small", variant: "invisible", onClick: () => setShowSpecOverlay(false) })] }), _jsx(Box, { sx: { p: 3, overflow: 'auto', flex: 1 }, children: _jsx(Box, { as: "pre", sx: {
+                                    m: 0,
+                                    whiteSpace: 'pre',
+                                    fontFamily: 'monospace',
+                                    fontSize: 0,
+                                    lineHeight: '20px',
+                                }, children: specYamlPreview }) })] }))] }) }));
+};
+export default AgentspecsExample;