@datalayer/agent-runtimes 1.0.5 → 1.0.6

package/lib/examples/AgentSpecsExample.js

@@ -1,694 +0,0 @@
-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, useRef } from 'react';
-import { PageLayout, IconButton } from '@primer/react';
-import { SidebarCollapseIcon, SidebarExpandIcon } 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 { 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 } from '../config/AgentConfiguration';
-import { MockFileBrowser, MainContent, Header } from './components';
-import { useChatStore } from '../stores';
-// 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 = 'demo-agent';
-const DEFAULT_SYSTEM_PROMPT = 'You are a helpful AI assistant.';
-const RIGHT_PANE_WIDTH = {
-    min: '420px',
-    default: '80vw',
-    max: '95vw',
-};
-// 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 || 'demo-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 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 AgentRuntimeFormExample = ({ 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 [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;
-    // =====================================================================
-    // 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 (!baseUrl)
-            return;
-        const loadServers = async () => {
-            try {
-                const response = await fetch(`${baseUrl}/api/v1/configure`);
-                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, baseUrl]);
-    // 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]);
-    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);
-            setEnableCodemode(false);
-            setAllowDirectToolCalls(false);
-            setEnableToolReranker(false);
-            setUseJupyterSandbox(false);
-            setTransport('vercel-ai');
-        }
-        else if (isSpecSelection(agentId)) {
-            // Populate form fields from the selected library spec
-            const specId = getSpecId(agentId);
-            const specs = await fetchLibrarySpecs();
-            const spec = specs.find(s => s.id === specId);
-            if (spec) {
-                setSelectedLibrarySpec(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');
-            }
-            else {
-                setSelectedLibrarySpec(null);
-            }
-        }
-        else {
-            setSelectedLibrarySpec(null);
-            const agent = agents.find(a => a.id === agentId);
-            if (agent) {
-                setAgentName(agent.id);
-                setTransport(agent.protocol);
-            }
-        }
-    };
-    /**
-     * Create a new agent via the API
-     */
-    const createAgentOnServer = useCallback(async () => {
-        setIsCreatingAgent(true);
-        setCreateError(null);
-        try {
-            // Resolve spec ID if creating from a library spec
-            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: selectedLibrarySpec || undefined,
-                    ...(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,
-        selectedLibrarySpec,
-    ]);
-    /**
-     * 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);
-    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;
-        }
-        // 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 () => {
-        // 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: _jsx(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: '90px' }, 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: baseUrl, agentId: currentAgent?.id || agentName, 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 ? (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
-                                    position: 'fixed',
-                                    right: 0,
-                                    top: '50%',
-                                    transform: 'translateY(-50%)',
-                                    zIndex: 100,
-                                }, children: _jsx(IconButton, { icon: SidebarCollapseIcon, "aria-label": "Collapse right pane", size: "small", onClick: () => setRightPaneVisible(false), sx: {
-                                        borderRadius: '6px 0 0 6px',
-                                        bg: 'canvas.default',
-                                        border: '1px solid',
-                                        borderRight: 'none',
-                                        borderColor: 'border.default',
-                                    } }) }), _jsx(PageLayout.Pane, { position: "end", "aria-label": "Agent configuration and chat pane", width: RIGHT_PANE_WIDTH, resizable: true, sticky: true, children: _jsx(Box, { sx: {
-                                        height: '100%',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        p: 2,
-                                    }, children: !isConfigured ? (_jsx(AgentConfiguration, { agentLibrary: agentLibrary, protocol: currentAgent?.protocol || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: baseUrl, 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, identityProviders: oauthProvidersConfig, onIdentityConnect: handleIdentityConnect, onIdentityDisconnect: handleIdentityDisconnect, onAgentLibraryChange: setAgentLibrary, onTransportChange: setTransport, onExtensionsChange: setExtensions, onWsUrlChange: setWsUrl, onBaseUrlChange: 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: baseUrl, isConfigured: isConfigured, enableCodemode: enableCodemode, useJupyterSandbox: useJupyterSandbox, chatProps: {
-                                                protocol: currentAgent?.protocol || transport,
-                                                extensions: extensions,
-                                                wsUrl: wsUrl,
-                                                baseUrl: baseUrl,
-                                                agentId: currentAgent?.id || agentName,
-                                                title: currentAgent?.name || agentName || 'AI Assistant',
-                                                autoConnect: true,
-                                                autoFocus: true,
-                                                placeholder: 'Type your message to the agent...',
-                                                height: 'calc(100vh - 150px)',
-                                                showModelSelector: true,
-                                                showToolsMenu: true,
-                                                showSkillsMenu: true,
-                                                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',
-                            } }) }))] }) }) }));
-};
-export default AgentRuntimeFormExample;