@datalayer/agent-runtimes 1.0.3 → 1.0.5

package/lib/examples/AgentHooksExample.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect, useState } from 'react';
+import { Text, Spinner } from '@primer/react';
+import { Box, setupPrimerPortals } from '@datalayer/primer-addons';
+import { ThemedProvider } from './utils/themedProvider';
+import { uniqueAgentId } from './utils/agentId';
+import { ErrorView } from './components';
+import { Chat } from '../chat';
+setupPrimerPortals();
+const BASE_URL = 'http://localhost:8765';
+const AGENT_SPEC_ID = 'demo-hooks';
+const AGENT_NAME = 'hooks-demo';
+const AgentHooksExample = () => {
+    const [agentId, setAgentId] = useState(null);
+    const [error, setError] = useState(null);
+    const [isCreating, setIsCreating] = useState(true);
+    useEffect(() => {
+        let cancelled = false;
+        const name = uniqueAgentId(AGENT_NAME);
+        const createAgent = async () => {
+            try {
+                const response = await fetch(`${BASE_URL}/api/v1/agents`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        name,
+                        agent_spec_id: AGENT_SPEC_ID,
+                        transport: 'vercel-ai',
+                    }),
+                });
+                if (!response.ok) {
+                    const data = await response
+                        .json()
+                        .catch(() => ({ detail: 'Unknown error' }));
+                    throw new Error(data.detail || `Failed to create agent: ${response.status}`);
+                }
+                const data = await response.json();
+                if (!cancelled) {
+                    setAgentId(data.id);
+                    setIsCreating(false);
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err instanceof Error ? err.message : 'Failed to create agent');
+                    setIsCreating(false);
+                }
+            }
+        };
+        createAgent();
+        return () => {
+            cancelled = true;
+        };
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (!agentId) {
+                return;
+            }
+            void fetch(`${BASE_URL}/api/v1/agents/${encodeURIComponent(agentId)}`, {
+                method: 'DELETE',
+            }).catch(() => {
+                // Ignore teardown failures in example mode.
+            });
+        };
+    }, [agentId]);
+    if (isCreating) {
+        return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
+                    display: 'flex',
+                    flexDirection: 'column',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    height: '100vh',
+                    gap: 3,
+                    bg: 'canvas.default',
+                }, children: [_jsx(Spinner, { size: "large" }), _jsxs(Text, { sx: { color: 'fg.muted' }, children: ["Creating agent from ", AGENT_SPEC_ID, "..."] })] }) }));
+    }
+    if (error || !agentId) {
+        return (_jsx(ThemedProvider, { children: _jsx(ErrorView, { error: "Failed to start hooks agent", detail: error || 'No agent ID returned' }) }));
+    }
+    return (_jsx(Chat, { protocol: "vercel-ai", baseUrl: BASE_URL, agentId: agentId, title: "Hooks Agent", placeholder: "Ask about lifecycle hooks...", description: "Pre-hook installed 'rich', wrote a marker file, and set hook_name / hook_ran_at / hook_env variables in the sandbox", showHeader: true, showModelSelector: true, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, showInformation: true, autoFocus: true, height: "100vh", runtimeId: agentId, historyEndpoint: `${BASE_URL}/api/v1/history`, suggestions: [
+            {
+                title: 'Read the pre-hook marker file',
+                message: 'Use execute_code to read /tmp/agent_runtimes_pre_hook_demo.txt and show its contents.',
+            },
+            {
+                title: 'Verify hook variables',
+                message: 'Use execute_code to run this verification:\n```python\nassert isinstance(hook_name, str) and hook_name == "demo-hooks:pre", f"❌ hook_name wrong: {hook_name!r}"\nassert isinstance(hook_ran_at, str) and len(hook_ran_at) > 0, f"❌ hook_ran_at wrong: {hook_ran_at!r}"\nassert isinstance(hook_env, dict) and len(hook_env) > 0, f"❌ hook_env wrong: {hook_env!r}"\nprint("✅ hook_name =", hook_name)\nprint("✅ hook_ran_at =", hook_ran_at)\nprint("✅ hook_env =", hook_env)\n```\nThrow an exception with a ❌ message if any variable is missing or has the wrong type, print ✅ lines if all pass.',
+            },
+            {
+                title: "Verify 'rich' was installed",
+                message: 'Use execute_code to import rich and print its version — the pre-hook installed it via pip.',
+            },
+            {
+                title: 'Explain the hook lifecycle',
+                message: 'What pre-hooks and post-hooks are configured for this agent, and when does each run?',
+            },
+        ], submitOnSuggestionClick: true }));
+};
+export default AgentHooksExample;

package/lib/examples/AgentMCPExample.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const AgentMCPExample: React.FC;
+export default AgentMCPExample;

package/lib/examples/AgentMCPExample.js

@@ -0,0 +1,480 @@
+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 { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { Box } from '@datalayer/primer-addons';
+import { AuthRequiredView, ErrorView } from './components';
+import { Heading, Label, Spinner, Text, Token as PrimerToken, } from '@primer/react';
+import { GlobeIcon, CheckCircleIcon, ServerIcon, XCircleIcon, ToolsIcon, } from '@primer/octicons-react';
+import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
+import { ThemedProvider } from './utils/themedProvider';
+import { uniqueAgentId } from './utils/agentId';
+import { Chat } from '../chat';
+import { useAIAgentsWebSocket } from '../hooks';
+import { parseAgentStreamMessage } from '../types/stream';
+import { MCP_STATUS_COLORS, MCP_STATUS_LABELS } from '../types/mcp';
+import { MCP_SERVER_LIBRARY } from '../specs/mcpServers';
+const queryClient = new QueryClient();
+const AGENT_NAME = 'mcp-demo-agent';
+const AGENT_SPEC_ID = 'demo-mcp';
+const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+/* ── Aggregate MCP status helpers ─────────────────────── */
+function deriveAggregate(servers) {
+    if (!servers || servers.length === 0)
+        return 'none';
+    if (servers.some(s => s.status === 'starting'))
+        return 'starting';
+    if (servers.some(s => s.status === 'failed'))
+        return 'failed';
+    if (servers.every(s => s.status === 'started'))
+        return 'started';
+    return 'not_started';
+}
+/* ── Tool card ────────────────────────────────────────── */
+const McpToolCard = ({ tool }) => {
+    const schemaProps = tool.inputSchema
+        ?.properties;
+    const paramNames = schemaProps ? Object.keys(schemaProps) : [];
+    return (_jsxs(Box, { sx: {
+            border: '1px solid',
+            borderColor: 'border.default',
+            borderRadius: 2,
+            p: 2,
+            mb: 2,
+            bg: 'canvas.default',
+        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [_jsx(ToolsIcon, { size: 14 }), _jsx(Text, { sx: { fontWeight: 600, fontSize: 1 }, children: tool.name })] }), tool.description && (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 1, mt: 0 }, children: tool.description })), _jsxs(Text, { sx: {
+                    fontSize: 0,
+                    fontFamily: 'mono',
+                    color: 'fg.muted',
+                    display: 'block',
+                }, children: ["server: ", tool.serverName] }), paramNames.length > 0 && (_jsx(Box, { sx: { mt: 1, display: 'flex', gap: 1, flexWrap: 'wrap' }, children: paramNames.map(p => (_jsx(PrimerToken, { text: p, size: "small" }, p))) }))] }));
+};
+/* ── Server status card ───────────────────────────────── */
+const McpServerCard = ({ server }) => (_jsxs(Box, { sx: {
+        p: 2,
+        mb: 2,
+        border: '1px solid',
+        borderColor: 'border.default',
+        borderRadius: 2,
+        bg: 'canvas.default',
+    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [server.emoji && _jsx(Text, { sx: { fontSize: 2 }, children: server.emoji }), _jsx(Text, { sx: { fontWeight: 600, fontSize: 1 }, children: server.name }), _jsx(Label, { size: "small", variant: server.status === 'started' ? 'success' : 'secondary', children: server.status })] }), server.description && (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 1 }, children: server.description })), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [server.toolsCount, " tool", server.toolsCount !== 1 ? 's' : '', " available"] })] }));
+const McpStatusPanel = ({ data }) => {
+    const servers = data?.servers ?? [];
+    const aggregate = deriveAggregate(servers);
+    if (!data) {
+        return (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Waiting for websocket snapshot..." }));
+    }
+    if (aggregate === 'none') {
+        return (_jsxs(Box, { sx: {
+                p: 2,
+                border: '1px solid',
+                borderColor: 'border.default',
+                borderRadius: 2,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 2,
+            }, children: [_jsx(ServerIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No MCP server is defined for this agent." })] }));
+    }
+    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 2,
+                }, children: [_jsx(Box, { as: "span", sx: {
+                            display: 'inline-block',
+                            width: 10,
+                            height: 10,
+                            borderRadius: '50%',
+                            bg: MCP_STATUS_COLORS[aggregate],
+                            flexShrink: 0,
+                        } }), _jsx(Text, { sx: { fontSize: 1 }, children: MCP_STATUS_LABELS[aggregate] })] }), servers.map(s => (_jsx(Box, { sx: {
+                    p: 2,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 2,
+                }, children: _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [s.status === 'started' ? (_jsx(CheckCircleIcon, { size: 14, fill: "success.fg" })) : s.status === 'failed' ? (_jsx(XCircleIcon, { size: 14, fill: "danger.fg" })) : (_jsx(Box, { as: "span", sx: {
+                                        width: 8,
+                                        height: 8,
+                                        borderRadius: '50%',
+                                        bg: MCP_STATUS_COLORS[s.status] ??
+                                            MCP_STATUS_COLORS.not_started,
+                                        display: 'inline-block',
+                                    } })), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: s.id })] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [s.status, s.status === 'started' && s.tools_count !== undefined
+                                    ? ` · ${s.tools_count} tool${s.tools_count !== 1 ? 's' : ''}`
+                                    : '', s.status === 'failed' && s.error ? ` — ${s.error}` : ''] })] }) }, s.id)))] }));
+};
+/* ── Main inner component ─────────────────────────────── */
+const AgentMCPInner = ({ onLogout }) => {
+    const { token } = useSimpleAuthStore();
+    const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
+    const [runtimeStatus, setRuntimeStatus] = useState('launching');
+    const [isReady, setIsReady] = useState(false);
+    const [hookError, setHookError] = useState(null);
+    const [agentId, setAgentId] = useState(agentName);
+    const [isReconnectedAgent, setIsReconnectedAgent] = useState(false);
+    // MCP server IDs from the agent creation spec (e.g. ["tavily"])
+    const [selectedServerIds, setSelectedServerIds] = useState([]);
+    // Per-agent tool definitions from WS fullContext.tools
+    const [agentTools, setAgentTools] = useState([]);
+    // WS-provided mcpStatus (global – used as fallback for indicator)
+    const [liveMcpStatus, setLiveMcpStatus] = useState(undefined);
+    // Pending approvals are now managed internally by ChatBase via the Zustand
+    // agent-runtime store — no local state needed.
+    const agentBaseUrl = DEFAULT_LOCAL_BASE_URL;
+    const chatAuthToken = token === null ? undefined : token;
+    const authFetch = useCallback((url, opts = {}) => fetch(url, {
+        ...opts,
+        headers: {
+            'Content-Type': 'application/json',
+            ...(token ? { Authorization: `Bearer ${token}` } : {}),
+            ...(opts.headers ?? {}),
+        },
+    }), [token]);
+    // ── Create agent ──────────────────────────────────────
+    useEffect(() => {
+        let isCancelled = false;
+        const createAgent = async () => {
+            setRuntimeStatus('launching');
+            setIsReady(false);
+            setHookError(null);
+            setIsReconnectedAgent(false);
+            try {
+                const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        name: agentName,
+                        description: 'MCP demo agent – web crawling and research via Tavily',
+                        agent_library: 'pydantic-ai',
+                        transport: 'vercel-ai',
+                        agent_spec_id: AGENT_SPEC_ID,
+                        enable_codemode: false,
+                        enable_skills: true,
+                        tools: [],
+                    }),
+                });
+                let resolvedAgentId = agentName;
+                let isAlreadyRunning = false;
+                if (response.ok) {
+                    const data = await response.json();
+                    resolvedAgentId = data?.id || agentName;
+                }
+                else {
+                    const contentType = response.headers.get('content-type') || '';
+                    let detail = '';
+                    if (contentType.includes('application/json')) {
+                        const data = await response.json().catch(() => null);
+                        detail =
+                            (typeof data?.detail === 'string' && data.detail) ||
+                                (typeof data?.message === 'string' && data.message) ||
+                                '';
+                    }
+                    else {
+                        detail = await response.text();
+                    }
+                    if (response.status === 409 || /already exists/i.test(detail || '')) {
+                        isAlreadyRunning = true;
+                    }
+                    else {
+                        throw new Error(detail || `Failed to create agent: ${response.status}`);
+                    }
+                }
+                if (!isCancelled) {
+                    setAgentId(resolvedAgentId);
+                    setIsReconnectedAgent(isAlreadyRunning);
+                    setIsReady(true);
+                    setRuntimeStatus('ready');
+                }
+            }
+            catch (error) {
+                if (!isCancelled) {
+                    setHookError(error instanceof Error ? error.message : 'Agent failed to start');
+                    setRuntimeStatus('error');
+                }
+            }
+        };
+        void createAgent();
+        return () => {
+            isCancelled = true;
+        };
+    }, [agentBaseUrl, agentName, authFetch]);
+    // ── WebSocket: receive MCP status + fullContext tools from agent.snapshot ─
+    const handleSnapshotMessage = useCallback((message) => {
+        try {
+            const stream = parseAgentStreamMessage(message?.raw ?? message);
+            if (!stream || stream.type !== 'agent.snapshot')
+                return;
+            const payload = stream.payload;
+            if (payload.mcpStatus !== undefined) {
+                setLiveMcpStatus(payload.mcpStatus ?? undefined);
+            }
+            // Extract per-agent tool definitions from fullContext.tools
+            const fc = payload.fullContext;
+            if (fc && Array.isArray(fc.tools) && fc.tools.length > 0) {
+                setAgentTools(fc.tools);
+            }
+        }
+        catch {
+            // Ignore malformed payloads.
+        }
+    }, []);
+    useAIAgentsWebSocket({
+        enabled: isReady && Boolean(agentBaseUrl),
+        baseUrl: agentBaseUrl,
+        path: '/api/v1/tool-approvals/ws',
+        queryParams: { agent_id: agentId },
+        onMessage: handleSnapshotMessage,
+        reconnectDelayMs: attempt => Math.min(1000 * 2 ** Math.max(0, attempt - 1), 10000),
+    });
+    // ── Fetch creation spec to get selected MCP server IDs ──
+    useEffect(() => {
+        if (!isReady)
+            return;
+        const fetchSpec = async () => {
+            try {
+                const res = await authFetch(`${agentBaseUrl}/api/v1/configure/agents/${agentId}/spec`);
+                if (!res.ok)
+                    return;
+                const spec = await res.json();
+                const servers = (spec?.selected_mcp_servers ?? []);
+                setSelectedServerIds(servers.map(s => s.id));
+            }
+            catch {
+                // Non-fatal: sidebar info is informational
+            }
+        };
+        void fetchSpec();
+    }, [isReady, agentId, agentBaseUrl, authFetch]);
+    // ── Build McpServerInfo[] from selected servers + catalog + WS tools ──
+    const mcpServers = useMemo(() => {
+        if (selectedServerIds.length === 0)
+            return [];
+        return selectedServerIds.map(serverId => {
+            const catalogServer = MCP_SERVER_LIBRARY[serverId];
+            const serverName = catalogServer?.name ?? serverId;
+            // Live status from WS snapshot — the most reliable source of truth.
+            const liveServer = liveMcpStatus?.servers?.find(s => s.id === serverId);
+            // Match tools by prefix convention: "tavily__tavily_search" → server "tavily"
+            // (fallback when live data is not yet available)
+            const serverTools = agentTools
+                .filter(t => t.name.startsWith(`${serverId}__`))
+                .map(t => ({
+                name: t.name,
+                description: t.description,
+                serverId,
+                serverName,
+                inputSchema: t.parametersSchema,
+            }));
+            // Prefer live tools from WS snapshot; fall back to agentTools-derived tools.
+            const toolsFromLive = (liveServer?.tools ?? []).map(t => ({
+                name: t.name,
+                description: t.description ?? '',
+                serverId,
+                serverName,
+                inputSchema: undefined,
+            }));
+            const tools = toolsFromLive.length > 0 ? toolsFromLive : serverTools;
+            const status = liveServer?.status ?? (serverTools.length > 0 ? 'started' : 'starting');
+            const toolsCount = liveServer?.tools_count ?? tools.length;
+            return {
+                id: serverId,
+                name: serverName,
+                description: catalogServer?.description,
+                status,
+                toolsCount,
+                tools,
+                emoji: catalogServer?.emoji,
+                icon: catalogServer?.icon,
+            };
+        });
+    }, [selectedServerIds, agentTools, liveMcpStatus]);
+    // ── Build synthetic McpToolsetsStatusResponse for the Chat MCP indicator ──
+    const mcpStatusData = useMemo(() => {
+        const derivedEnabledToolsByServer = {};
+        const derivedApprovedToolsByServer = {};
+        for (const s of mcpServers) {
+            if (s.tools.length > 0) {
+                derivedEnabledToolsByServer[s.id] = s.tools.map(t => t.name);
+                // Keep approval default explicit: enabled but not approved.
+                derivedApprovedToolsByServer[s.id] = [];
+            }
+        }
+        // If the WS-provided global mcpStatus has actual servers, prefer it
+        if (liveMcpStatus && liveMcpStatus.servers.length > 0) {
+            const live = liveMcpStatus;
+            const enabledToolsByServer = {
+                ...(live.enabled_tools_by_server ?? {}),
+            };
+            for (const [serverId, tools] of Object.entries(derivedEnabledToolsByServer)) {
+                if (!enabledToolsByServer[serverId] ||
+                    enabledToolsByServer[serverId].length === 0) {
+                    enabledToolsByServer[serverId] = tools;
+                }
+            }
+            const approvedToolsByServer = {
+                ...(live.approved_tools_by_server ?? {}),
+            };
+            for (const [serverId, tools] of Object.entries(derivedApprovedToolsByServer)) {
+                if (!approvedToolsByServer[serverId]) {
+                    approvedToolsByServer[serverId] = tools;
+                }
+            }
+            return {
+                ...live,
+                enabled_tools_by_server: enabledToolsByServer,
+                approved_tools_by_server: approvedToolsByServer,
+            };
+        }
+        // Otherwise build from our per-agent derived info
+        if (mcpServers.length === 0)
+            return undefined;
+        const servers = mcpServers.map(s => ({
+            id: s.id,
+            status: s.status,
+            tools_count: s.toolsCount,
+            tools: s.tools.map(t => ({
+                name: t.name,
+                description: t.description,
+                enabled: true,
+            })),
+        }));
+        const readyServers = servers
+            .filter(s => s.status === 'started')
+            .map(s => s.id);
+        // Build enabled_tools_by_server so the InputFooter ToolsMenu can render
+        // tools as enabled immediately on first open.
+        const enabledToolsByServer = derivedEnabledToolsByServer;
+        const approvedToolsByServer = derivedApprovedToolsByServer;
+        return {
+            initialized: true,
+            ready_count: readyServers.length,
+            failed_count: servers.filter(s => s.status === 'failed').length,
+            ready_servers: readyServers,
+            failed_servers: {},
+            servers,
+            enabled_tools_by_server: enabledToolsByServer,
+            approved_tools_by_server: approvedToolsByServer,
+            enabled_tools_count: mcpServers.reduce((sum, s) => sum + s.tools.length, 0),
+        };
+    }, [liveMcpStatus, mcpServers]);
+    const totalTools = mcpServers.reduce((sum, s) => sum + s.toolsCount, 0);
+    const aggregate = deriveAggregate(mcpStatusData?.servers ?? []);
+    if (!isReady && runtimeStatus !== 'error') {
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100vh',
+                gap: 3,
+            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching MCP demo agent..." })] }));
+    }
+    if (runtimeStatus === 'error' || hookError) {
+        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
+    }
+    return (_jsxs(Box, { sx: {
+            height: 'calc(100vh - 60px)',
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: [isReconnectedAgent && (_jsx(Box, { sx: {
+                    px: 3,
+                    py: 1,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running - reconnected." }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "MCP Demo Agent", placeholder: "Ask the agent to search the web or explore GitHub...", showHeader: true, showNewChatButton: true, showClearButton: false, showToolsMenu: true, showSkillsMenu: true, showTokenUsage: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, mcpStatusData: mcpStatusData, showToolApprovalBanner: true, headerActions: _jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["MCP Tools: ", totalTools] }) }), suggestions: [
+                                {
+                                    title: '🔍 Search the web',
+                                    message: 'Search the web for recent news about AI agents.',
+                                },
+                                {
+                                    title: '🐙 GitHub repos',
+                                    message: 'Find trending open-source Python projects on GitHub.',
+                                },
+                                {
+                                    title: '📚 Research topic',
+                                    message: 'Research best practices for building RAG applications.',
+                                },
+                                {
+                                    title: '⚡ Compare frameworks',
+                                    message: 'Compare popular JavaScript frameworks in 2024.',
+                                },
+                                {
+                                    title: '😄 Tell me a joke',
+                                    message: 'Use your jokes skill to tell me a random joke.',
+                                },
+                            ], submitOnSuggestionClick: true }) }), _jsxs(Box, { sx: {
+                            width: 320,
+                            minWidth: 260,
+                            borderLeft: '1px solid',
+                            borderColor: 'border.default',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            minHeight: 0,
+                            bg: 'canvas.subtle',
+                        }, children: [_jsxs(Box, { sx: {
+                                    p: 2,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 1 }, children: _jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(ServerIcon, { size: 16 }), "MCP Servers & Tools"] }) }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { as: "span", sx: {
+                                                    display: 'inline-block',
+                                                    width: 8,
+                                                    height: 8,
+                                                    borderRadius: '50%',
+                                                    bg: MCP_STATUS_COLORS[aggregate],
+                                                    flexShrink: 0,
+                                                } }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [MCP_STATUS_LABELS[aggregate], " \u00B7 ", totalTools, " tool", totalTools !== 1 ? 's' : ''] })] })] }), _jsxs(Box, { sx: { p: 2, overflow: 'auto', flex: 1 }, children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Heading, { as: "h5", sx: { fontSize: 1, mb: 2 }, children: "MCP Servers" }), _jsx(McpStatusPanel, { data: mcpStatusData })] }), mcpServers.length === 0 ? (_jsxs(Box, { sx: {
+                                            display: 'flex',
+                                            flexDirection: 'column',
+                                            alignItems: 'center',
+                                            gap: 2,
+                                            py: 4,
+                                        }, children: [_jsx(Spinner, { size: "medium" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Waiting for MCP servers to start..." })] })) : (_jsxs(_Fragment, { children: [mcpServers.map(server => (_jsxs(Box, { children: [_jsx(McpServerCard, { server: server }), server.tools.length > 0 && (_jsx(Box, { sx: { pl: 2 }, children: server.tools.map(tool => (_jsx(McpToolCard, { tool: tool }, `${tool.serverId}-${tool.name}`))) }))] }, server.id))), _jsxs(Box, { sx: {
+                                                    mt: 3,
+                                                    p: 2,
+                                                    borderRadius: 2,
+                                                    bg: 'canvas.inset',
+                                                    border: '1px solid',
+                                                    borderColor: 'border.muted',
+                                                }, children: [_jsx(Heading, { as: "h5", sx: { fontSize: 0, mb: 1 }, children: "MCP (Model Context Protocol)" }), _jsxs(Box, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsxs(Box, { sx: {
+                                                                    display: 'flex',
+                                                                    alignItems: 'center',
+                                                                    gap: 1,
+                                                                    mb: 1,
+                                                                }, children: [_jsx(GlobeIcon, { size: 12 }), _jsxs(Text, { children: [_jsx("strong", { children: "Servers:" }), " Discover and start MCP servers that expose tools to the agent"] })] }), _jsxs(Box, { sx: {
+                                                                    display: 'flex',
+                                                                    alignItems: 'center',
+                                                                    gap: 1,
+                                                                }, children: [_jsx(ToolsIcon, { size: 12 }), _jsxs(Text, { children: [_jsx("strong", { children: "Tools:" }), " Individual capabilities exposed by each server (search, fetch, etc.)"] })] })] })] })] }))] })] })] })] }));
+};
+const syncTokenToIamStore = (token) => {
+    import('@datalayer/core/lib/state').then(({ iamStore }) => {
+        iamStore.setState({ token });
+    });
+};
+const AgentMCPExample = () => {
+    const { token, clearAuth } = useSimpleAuthStore();
+    const hasSynced = useRef(false);
+    useEffect(() => {
+        if (token && !hasSynced.current) {
+            hasSynced.current = true;
+            syncTokenToIamStore(token);
+        }
+    }, [token]);
+    const handleLogout = useCallback(() => {
+        clearAuth();
+        hasSynced.current = false;
+        import('@datalayer/core/lib/state').then(({ iamStore }) => {
+            iamStore.setState({ token: undefined });
+        });
+    }, [clearAuth]);
+    if (!token) {
+        return (_jsx(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
+    }
+    return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentMCPInner, { onLogout: handleLogout }) }) }));
+};
+export default AgentMCPExample;