@datalayer/agent-runtimes 1.0.4 → 1.0.6

package/lib/examples/AgentCodemodeExample.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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.
@@ -6,51 +6,77 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /**
  * AgentCodemodeExample
  *
- * Demonstrates Codemode: tools that return structured outputs with schemas
- * rendered inline as executable code blocks, diffs, or file previews.
+ * Compares two tooling modes side-by-side:
+ * - MCP tools without codemode conversion
+ * - MCP tools with codemode conversion
  *
- * - Creates a cloud agent runtime (environment: 'ai-agents-env') via the Datalayer
- *   Runtimes API and deploys an agent on its sidecar
- * - Shows a code panel alongside the chat displaying tool outputs with
- *   syntax highlighting, diff views, and the ability to accept/reject changes
+ * A sidebar gauge tracks consumed tokens for each agent in real time.
  */
 /// <reference types="vite/client" />
-import { useEffect, useState, useCallback, useRef } from 'react';
-import { Text, Button, Spinner, Heading, Label, Flash } from '@primer/react';
-import { CodeIcon, DiffIcon, FileCodeIcon, CheckIcon, XIcon, SignOutIcon, } from '@primer/octicons-react';
+import { useEffect, useState, useCallback, useRef, useMemo, } from 'react';
+import { Text, Spinner, Heading, Label, Flash } from '@primer/react';
+import { CodeIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
-import { ErrorView } from './components';
+import ReactECharts from 'echarts-for-react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
-import { SignInSimple } from '@datalayer/core/lib/views/iam';
-import { UserBadge } from '@datalayer/core/lib/views/profile';
 import { ThemedProvider } from './utils/themedProvider';
-import { useAgents } from '../hooks/useAgents';
+import { AuthRequiredView } from './components';
+import { uniqueAgentId } from './utils/agentId';
+import { useAIAgentsWebSocket } from '../hooks';
 import { Chat } from '../chat';
+import { ContextPanel, } from '../context/ContextPanel';
+import { parseAgentStreamMessage, } from '../types/stream';
+import { MCP_SERVER_LIBRARY } from '../specs/mcpServers';
 const queryClient = new QueryClient();
-// ─── Constants ─────────────────────────────────────────────────────────────
-const AGENT_NAME = 'codemode-demo-agent';
-const AGENT_SPEC_ID = 'monitor-sales-kpis';
-// ─── Inner component (rendered after auth) ─────────────────────────────────
-const AgentCodemodeInner = ({ onLogout, }) => {
-    const { token } = useSimpleAuthStore();
-    const { runtime, status: runtimeStatus, isReady, error: hookError, } = useAgents({
-        agentSpecId: AGENT_SPEC_ID,
-        autoStart: true,
-        agentConfig: {
-            name: AGENT_NAME,
-            protocol: 'ag-ui',
-            description: 'Agent with Codemode structured tool outputs',
-        },
-    });
-    const [codeView, setCodeView] = useState('output');
-    const [artifacts, setArtifacts] = useState([]);
-    const [selectedId, setSelectedId] = useState(null);
-    const [flash, setFlash] = useState(null);
-    const agentBaseUrl = runtime?.agentBaseUrl || '';
-    const agentId = runtime?.agentId || AGENT_NAME;
-    const podName = runtime?.podName || '(launching…)';
-    // Authenticated fetch helper
+// Each pane talks to its own agent-runtimes process so the two agents are
+// fully isolated (no shared global codemode/MCP state). Override via env:
+//   VITE_BASE_URL_NO_CODEMODE=http://localhost:8765
+//   VITE_BASE_URL_CODEMODE=http://localhost:8766
+const NO_CODEMODE_BASE_URL = import.meta.env.VITE_BASE_URL_NO_CODEMODE ||
+    import.meta.env.VITE_BASE_URL ||
+    'http://localhost:8765';
+const CODEMODE_BASE_URL = import.meta.env.VITE_BASE_URL_CODEMODE || 'http://localhost:8766';
+const NO_CODEMODE_SUGGESTION_MESSAGE = 'Use the MCP extract tool to extract information from https://datalayer.ai, then use your sandbox to persist that information in a variable named "about_datalayer".';
+const CODEMODE_SUGGESTION_MESSAGE = 'Extract information from the https://datalayer.ai website and assign it to the variable "about_datalayer", all in one step using the sandbox';
+const DEMO_AGENT_CONFIGS = [
+    {
+        key: 'no-codemode',
+        title: 'MCP Tools (No Codemode)',
+        subtitle: 'Raw MCP tools without codemode conversion',
+        suggestionMessage: NO_CODEMODE_SUGGESTION_MESSAGE,
+        specId: 'example-no-codemode',
+        color: '#0969DA',
+        baseUrl: NO_CODEMODE_BASE_URL,
+    },
+    {
+        key: 'codemode',
+        title: 'Codemode Tools',
+        subtitle: 'MCP tools converted into programmatic tools',
+        suggestionMessage: CODEMODE_SUGGESTION_MESSAGE,
+        specId: 'example-codemode',
+        color: '#8250DF',
+        baseUrl: CODEMODE_BASE_URL,
+    },
+];
+function extractConsumedTokens(payload) {
+    const snapshotCost = payload.contextSnapshot?.costUsage ?? payload.costUsage;
+    const totalFromCost = Number(snapshotCost?.totalTokensUsed ?? 0);
+    if (totalFromCost > 0) {
+        return totalFromCost;
+    }
+    return Number(payload.contextSnapshot?.totalTokens ?? 0);
+}
+const AgentRuntimePane = ({ config, token, onTokenConsumed, onAgentIdChange, onContextSnapshot, }) => {
+    const runtimeName = useRef(uniqueAgentId(`codemode-${config.key}`)).current;
+    const [runtimeStatus, setRuntimeStatus] = useState('launching');
+    const [hookError, setHookError] = useState(null);
+    const [agentId, setAgentId] = useState(runtimeName);
+    const [isReconnectedAgent, setIsReconnectedAgent] = useState(false);
+    const [selectedServerIds, setSelectedServerIds] = useState([]);
+    const [agentTools, setAgentTools] = useState([]);
+    const [liveMcpStatus, setLiveMcpStatus] = useState(undefined);
+    const [codemodeEnabled, setCodemodeEnabled] = useState(config.key === 'codemode');
     const authFetch = useCallback((url, opts = {}) => fetch(url, {
         ...opts,
         headers: {
@@ -59,63 +85,449 @@ const AgentCodemodeInner = ({ onLogout, }) => {
             ...(opts.headers ?? {}),
         },
     }), [token]);
-    // ── Poll code artifacts ───────────────────────────────────────────────
     useEffect(() => {
-        if (!isReady || !agentBaseUrl)
+        let cancelled = false;
+        const launchTimeoutMs = 20_000;
+        const createLocalAgent = async () => {
+            setRuntimeStatus('launching');
+            setHookError(null);
+            setIsReconnectedAgent(false);
+            try {
+                const controller = new AbortController();
+                const timeoutId = window.setTimeout(() => {
+                    controller.abort();
+                }, launchTimeoutMs);
+                const response = await authFetch(`${config.baseUrl}/api/v1/agents`, {
+                    method: 'POST',
+                    signal: controller.signal,
+                    body: JSON.stringify({
+                        name: runtimeName,
+                        description: config.subtitle,
+                        agent_library: 'pydantic-ai',
+                        transport: 'vercel-ai',
+                        agent_spec_id: config.specId,
+                        enable_skills: true,
+                        tools: [],
+                    }),
+                });
+                window.clearTimeout(timeoutId);
+                let resolvedAgentId = runtimeName;
+                let alreadyRunning = false;
+                if (response.ok) {
+                    const data = await response.json();
+                    resolvedAgentId = data?.id || runtimeName;
+                }
+                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 || '')) {
+                        alreadyRunning = true;
+                    }
+                    else {
+                        throw new Error(detail || `Failed to create local agent: ${response.status}`);
+                    }
+                }
+                if (!cancelled) {
+                    setAgentId(resolvedAgentId);
+                    onAgentIdChange?.(config.key, resolvedAgentId);
+                    setIsReconnectedAgent(alreadyRunning);
+                    setRuntimeStatus('ready');
+                }
+            }
+            catch (error) {
+                if (!cancelled) {
+                    const isAbortError = error instanceof DOMException && error.name === 'AbortError';
+                    setHookError(isAbortError
+                        ? `Timed out after ${Math.round(launchTimeoutMs / 1000)}s while creating '${config.specId}' at ${config.baseUrl}. Ensure the no-codemode endpoint is reachable.`
+                        : error instanceof Error
+                            ? `${error.message} (endpoint: ${config.baseUrl}, spec: ${config.specId})`
+                            : `Agent failed to start (endpoint: ${config.baseUrl}, spec: ${config.specId})`);
+                    setRuntimeStatus('error');
+                }
+            }
+        };
+        void createLocalAgent();
+        return () => {
+            cancelled = true;
+        };
+    }, [authFetch, config.specId, config.subtitle, config.baseUrl, runtimeName]);
+    const handleStreamMessage = useCallback((message) => {
+        try {
+            const stream = parseAgentStreamMessage(message?.raw ?? message);
+            if (!stream || stream.type !== 'agent.snapshot') {
+                return;
+            }
+            const payload = stream.payload;
+            const consumed = extractConsumedTokens(payload);
+            if (consumed >= 0) {
+                onTokenConsumed(config.key, consumed);
+            }
+            if (payload.mcpStatus !== undefined) {
+                setLiveMcpStatus(payload.mcpStatus ?? undefined);
+            }
+            if (payload.contextSnapshot) {
+                onContextSnapshot?.(config.key, payload.contextSnapshot);
+            }
+            const fc = payload.fullContext;
+            if (fc && Array.isArray(fc.tools) && fc.tools.length > 0) {
+                setAgentTools(fc.tools);
+            }
+            if (payload.codemodeStatus &&
+                typeof payload.codemodeStatus.enabled === 'boolean') {
+                setCodemodeEnabled(payload.codemodeStatus.enabled);
+            }
+        }
+        catch {
+            // Ignore malformed stream payloads.
+        }
+    }, [config.key, onTokenConsumed, onContextSnapshot]);
+    useAIAgentsWebSocket({
+        enabled: runtimeStatus === 'ready',
+        baseUrl: config.baseUrl,
+        path: '/api/v1/tool-approvals/ws',
+        queryParams: { agent_id: agentId },
+        onMessage: handleStreamMessage,
+        reconnectDelayMs: attempt => Math.min(1000 * 2 ** Math.max(0, attempt - 1), 10000),
+    });
+    // Fetch creation spec to get selected MCP server IDs (for the MCP indicator).
+    useEffect(() => {
+        if (runtimeStatus !== 'ready')
             return;
-        const poll = async () => {
+        let cancelled = false;
+        const fetchSpec = async () => {
             try {
-                const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/codemode/artifacts`);
-                if (res.ok) {
-                    const d = await res.json();
-                    setArtifacts(Array.isArray(d) ? d : (d.artifacts ?? []));
+                const res = await authFetch(`${config.baseUrl}/api/v1/configure/agents/${agentId}/spec`);
+                if (!res.ok)
+                    return;
+                const spec = await res.json();
+                const servers = (spec?.selected_mcp_servers ?? []);
+                if (!cancelled) {
+                    setSelectedServerIds(servers.map(s => s.id));
                 }
             }
             catch {
-                /* ok */
+                // Non-fatal.
             }
         };
-        poll();
-        const interval = setInterval(poll, 5_000);
-        return () => clearInterval(interval);
-    }, [isReady, agentBaseUrl, agentId, authFetch]);
-    // ── Accept / Reject ───────────────────────────────────────────────────
-    const handleDecision = useCallback(async (artifactId, decision) => {
-        if (!agentBaseUrl)
-            return;
-        setFlash(null);
+        void fetchSpec();
+        return () => {
+            cancelled = true;
+        };
+    }, [runtimeStatus, agentId, authFetch, config.baseUrl]);
+    // 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;
+            const liveServer = liveMcpStatus?.servers?.find(s => s.id === serverId);
+            const serverTools = agentTools
+                .filter(t => t.name.startsWith(`${serverId}__`))
+                .map(t => ({
+                name: t.name,
+                description: t.description,
+                serverId,
+                serverName,
+                inputSchema: t.parametersSchema,
+            }));
+            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 a 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);
+                derivedApprovedToolsByServer[s.id] = [];
+            }
+        }
+        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,
+            };
+        }
+        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);
+        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: derivedEnabledToolsByServer,
+            approved_tools_by_server: derivedApprovedToolsByServer,
+            enabled_tools_count: mcpServers.reduce((sum, s) => sum + s.tools.length, 0),
+        };
+    }, [liveMcpStatus, mcpServers]);
+    // Synthetic codemode status so the Info panel never shows
+    // "Waiting for Codemode status from WebSocket stream...".
+    // This is configuration, so it's known locally from the spec/toggle state.
+    const codemodeStatusData = useMemo(() => ({
+        enabled: codemodeEnabled,
+        skills: [],
+        available_skills: [],
+        sandbox: null,
+    }), [codemodeEnabled]);
+    const handleToggleCodemode = useCallback(async (enabled) => {
+        // Optimistic update; WS snapshot will reconcile.
+        setCodemodeEnabled(enabled);
         try {
-            const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/codemode/artifacts/${artifactId}`, {
-                method: 'PATCH',
-                body: JSON.stringify({ status: decision }),
+            const res = await authFetch(`${config.baseUrl}/api/v1/configure/codemode/toggle`, {
+                method: 'POST',
+                body: JSON.stringify({ enabled, agent_id: agentId }),
             });
-            if (res.ok) {
-                setArtifacts(prev => prev.map(a => a.id === artifactId ? { ...a, status: decision } : a));
-                setFlash(`Change ${decision}`);
+            if (!res.ok) {
+                throw new Error(`Toggle failed: ${res.status}`);
             }
         }
         catch {
-            setFlash('Network error');
+            // Rollback optimistic update on failure.
+            setCodemodeEnabled(prev => !prev);
         }
-    }, [agentBaseUrl, agentId, authFetch]);
-    // ── Loading / Error ───────────────────────────────────────────────────
-    if (!isReady && runtimeStatus !== 'error') {
+    }, [authFetch, agentId, config.baseUrl]);
+    if (runtimeStatus === 'launching') {
         return (_jsxs(Box, { sx: {
+                border: '1px solid',
+                borderColor: 'border.default',
+                borderRadius: 2,
+                p: 3,
+                minHeight: 220,
                 display: 'flex',
-                flexDirection: 'column',
                 alignItems: 'center',
                 justifyContent: 'center',
-                height: '100vh',
-                gap: 3,
-            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: runtimeStatus === 'launching'
-                        ? 'Launching runtime for codemode agent…'
-                        : 'Creating codemode demo agent…' })] }));
+                flexDirection: 'column',
+                gap: 2,
+            }, children: [_jsx(Spinner, { size: "small" }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Launching ", config.title, "..."] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: config.baseUrl })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
-        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
+        return (_jsxs(Flash, { variant: "danger", sx: { borderRadius: 2 }, children: [config.title, ": ", hookError || 'Failed to start'] }));
+    }
+    return (_jsx(Box, { sx: {
+            border: '1px solid',
+            borderColor: 'border.default',
+            borderRadius: 2,
+            overflow: 'hidden',
+            minHeight: 560,
+            display: 'flex',
+            flexDirection: 'column',
+        }, children: _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: config.baseUrl, agentId: agentId, authToken: token, title: config.title, brandIcon: _jsx(CodeIcon, { size: 16 }), subtitle: config.subtitle, placeholder: "Ask both agents the same request to compare behavior...", description: config.subtitle, showHeader: true, headerActions: isReconnectedAgent ? (_jsx(Label, { size: "small", variant: "attention", children: "Reconnected" })) : undefined, autoFocus: false, height: "100%", runtimeId: agentId, historyEndpoint: `${config.baseUrl}/api/v1/history`, mcpStatusData: mcpStatusData, codemodeStatusData: codemodeStatusData, codemodeEnabled: codemodeEnabled, onToggleCodemode: handleToggleCodemode, suggestions: [
+                    {
+                        title: 'Datalayer extraction',
+                        message: config.suggestionMessage,
+                    },
+                ], submitOnSuggestionClick: true }) }) }));
+};
+const AgentCodemodeInner = ({ onLogout, }) => {
+    const { token } = useSimpleAuthStore();
+    const [consumedByAgent, setConsumedByAgent] = useState({
+        'no-codemode': 0,
+        codemode: 0,
+    });
+    const [agentIdByKey, setAgentIdByKey] = useState({});
+    const [contextSnapshotByKey, setContextSnapshotByKey] = useState({});
+    const handleAgentIdChange = useCallback((agentKey, agentId) => {
+        setAgentIdByKey(prev => prev[agentKey] === agentId ? prev : { ...prev, [agentKey]: agentId });
+    }, []);
+    const handleContextSnapshot = useCallback((agentKey, snapshot) => {
+        setContextSnapshotByKey(prev => ({ ...prev, [agentKey]: snapshot }));
+    }, []);
+    const handleTokenConsumed = useCallback((agentKey, tokens) => {
+        setConsumedByAgent(prev => ({
+            ...prev,
+            [agentKey]: Math.max(prev[agentKey] ?? 0, tokens),
+        }));
+    }, []);
+    const maxGaugeValue = useMemo(() => {
+        const values = Object.values(consumedByAgent);
+        const currentMax = values.length > 0 ? Math.max(...values) : 0;
+        if (currentMax <= 2000) {
+            return 2000;
+        }
+        const magnitude = 10 ** Math.floor(Math.log10(currentMax));
+        return Math.ceil((currentMax * 1.2) / magnitude) * magnitude;
+    }, [consumedByAgent]);
+    const tokenComparison = useMemo(() => {
+        const noCodemodeTokens = consumedByAgent['no-codemode'] ?? 0;
+        const codemodeTokens = consumedByAgent.codemode ?? 0;
+        if (noCodemodeTokens === codemodeTokens) {
+            return {
+                tie: true,
+                winnerKey: null,
+                loserKey: null,
+            };
+        }
+        const winnerKey = noCodemodeTokens < codemodeTokens ? 'no-codemode' : 'codemode';
+        return {
+            tie: false,
+            winnerKey,
+            loserKey: winnerKey === 'codemode'
+                ? 'no-codemode'
+                : 'codemode',
+        };
+    }, [consumedByAgent]);
+    const displayNameFor = useCallback((agentKey) => agentKey === 'codemode' ? 'Codemode' : 'No codemode', []);
+    const outcomeFor = useCallback((agentKey) => {
+        if (tokenComparison.tie) {
+            return {
+                emoji: '🤝',
+                title: 'Tie',
+                message: 'Both agents are tied on token usage.',
+                bg: 'canvas.subtle',
+                borderColor: 'border.default',
+                color: 'fg.default',
+            };
+        }
+        if (tokenComparison.winnerKey === agentKey) {
+            return {
+                emoji: '🏆',
+                title: 'Winner',
+                message: `${displayNameFor(agentKey)} is the winner.`,
+                bg: 'success.subtle',
+                borderColor: 'success.muted',
+                color: 'success.fg',
+            };
+        }
+        return {
+            emoji: '😓',
+            title: 'Loser',
+            message: `${displayNameFor(agentKey)} is the loser.`,
+            bg: 'attention.subtle',
+            borderColor: 'attention.muted',
+            color: 'attention.fg',
+        };
+    }, [displayNameFor, tokenComparison]);
+    const gaugeOptionFor = useCallback((config) => ({
+        series: [
+            {
+                type: 'gauge',
+                center: ['50%', '55%'],
+                radius: '80%',
+                min: 0,
+                max: maxGaugeValue,
+                splitNumber: 5,
+                progress: {
+                    show: true,
+                    width: 14,
+                    itemStyle: {
+                        color: config.color,
+                    },
+                },
+                axisLine: {
+                    lineStyle: {
+                        width: 14,
+                        color: [[1, '#d1d9e0']],
+                    },
+                },
+                axisTick: { show: false },
+                splitLine: {
+                    length: 10,
+                    lineStyle: { color: '#8c959f', width: 1 },
+                },
+                axisLabel: {
+                    distance: 14,
+                    color: '#57606a',
+                    fontSize: 10,
+                },
+                pointer: {
+                    width: 3,
+                    length: '60%',
+                },
+                anchor: {
+                    show: true,
+                    size: 8,
+                    itemStyle: {
+                        color: config.color,
+                    },
+                },
+                title: { show: false },
+                detail: {
+                    valueAnimation: true,
+                    offsetCenter: [0, '70%'],
+                    color: '#24292f',
+                    fontSize: 14,
+                    fontWeight: 'bold',
+                    formatter: (value) => `${Math.round(value).toLocaleString()} tok`,
+                },
+                data: [
+                    {
+                        value: consumedByAgent[config.key] ?? 0,
+                        name: config.title,
+                    },
+                ],
+            },
+        ],
+        tooltip: {
+            trigger: 'item',
+            formatter: (params) => `${params.seriesName || 'Agent'}<br/>${Math.round(params.value || 0).toLocaleString()} tokens`,
+        },
+    }), [consumedByAgent, maxGaugeValue]);
+    if (!token) {
+        return null;
     }
-    const selected = artifacts.find(a => a.id === selectedId) ?? artifacts[0] ?? null;
-    const pendingCount = artifacts.filter(a => a.status === 'pending').length;
     return (_jsxs(Box, { sx: {
             height: 'calc(100vh - 60px)',
             display: 'flex',
@@ -129,106 +541,133 @@ const AgentCodemodeInner = ({ onLogout, }) => {
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
                     flexShrink: 0,
-                }, children: [_jsx(CodeIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Codemode \u2014 ", podName] }), pendingCount > 0 && (_jsxs(Label, { variant: "attention", size: "small", children: [pendingCount, " pending"] })), token && _jsx(UserBadge, { token: token, variant: "small" }), _jsx(Button, { size: "small", variant: "invisible", onClick: onLogout, leadingVisual: SignOutIcon, sx: { color: 'fg.muted' }, children: "Sign out" })] }), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(Chat, { protocol: "ag-ui", baseUrl: agentBaseUrl, agentId: agentId, title: "Codemode Agent", placeholder: "Ask the agent to generate or modify code\u2026", description: `${artifacts.length} code artifact${artifacts.length !== 1 ? 's' : ''}`, showHeader: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
-                                {
-                                    title: 'Generate script',
-                                    message: 'Write a Python script to analyze the KPI data',
-                                },
-                                {
-                                    title: 'Refactor',
-                                    message: 'Refactor the last code block for readability',
-                                },
-                            ], submitOnSuggestionClick: true }) }), _jsxs(Box, { sx: {
-                            width: 480,
-                            borderLeft: '1px solid',
-                            borderColor: 'border.default',
-                            display: 'flex',
-                            flexDirection: 'column',
-                        }, children: [_jsx(Box, { sx: {
-                                    display: 'flex',
-                                    borderBottom: '1px solid',
-                                    borderColor: 'border.default',
-                                    flexShrink: 0,
-                                }, children: [
-                                    {
-                                        key: 'output',
-                                        icon: FileCodeIcon,
-                                        label: 'Output',
-                                    },
-                                    { key: 'diff', icon: DiffIcon, label: 'Diff' },
-                                ].map(t => (_jsx(Button, { size: "small", variant: "invisible", leadingVisual: t.icon, onClick: () => setCodeView(t.key), sx: {
-                                        flex: 1,
-                                        borderRadius: 0,
-                                        borderBottom: codeView === t.key ? '2px solid' : '2px solid transparent',
-                                        borderColor: codeView === t.key ? 'accent.fg' : 'transparent',
-                                        fontWeight: codeView === t.key ? 'bold' : 'normal',
-                                    }, children: t.label }, t.key))) }), _jsxs(Box, { sx: { display: 'flex', flex: 1, minHeight: 0 }, children: [_jsx(Box, { sx: {
-                                            width: 140,
-                                            borderRight: '1px solid',
-                                            borderColor: 'border.default',
-                                            overflow: 'auto',
-                                        }, children: artifacts.length === 0 ? (_jsx(Text, { sx: {
-                                                p: 2,
+                }, children: [_jsx(CodeIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Codemode \u2014 MCP Tools vs Codemode Tools" })] }), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [DEMO_AGENT_CONFIGS.filter(c => c.key === 'no-codemode').map(config => (() => {
+                        const outcome = outcomeFor(config.key);
+                        return (_jsxs(Box, { sx: {
+                                width: 320,
+                                borderRight: '1px solid',
+                                borderColor: 'border.default',
+                                p: 3,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 3,
+                                flexShrink: 0,
+                                overflow: 'auto',
+                            }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 1 }, children: config.title }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: "Tokens consumed (no codemode)." }), _jsx(Text, { sx: {
                                                 color: 'fg.muted',
                                                 fontSize: 0,
+                                                fontFamily: 'mono',
+                                                display: 'block',
+                                                mt: 1,
+                                            }, children: config.baseUrl }), _jsx(Text, { sx: {
+                                                color: 'fg.muted',
+                                                fontSize: 0,
+                                                fontFamily: 'mono',
+                                                display: 'block',
+                                                mt: 1,
+                                                wordBreak: 'break-all',
+                                            }, children: agentIdByKey[config.key] || 'launching…' })] }), _jsxs(Box, { sx: {
+                                        p: 2,
+                                        borderRadius: 2,
+                                        border: '1px solid',
+                                        bg: outcome.bg,
+                                        borderColor: outcome.borderColor,
+                                        textAlign: 'center',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        alignItems: 'center',
+                                    }, children: [_jsx(Text, { sx: { fontSize: 4, lineHeight: 1, mb: 1 }, children: outcome.emoji }), _jsx(Text, { sx: {
+                                                fontSize: 0,
+                                                color: outcome.color,
+                                                fontWeight: 'bold',
+                                            }, children: outcome.title }), _jsx(Text, { sx: {
+                                                fontSize: 0,
+                                                color: 'fg.muted',
+                                                display: 'block',
+                                                mt: 1,
+                                            }, children: outcome.message })] }), _jsx(ReactECharts, { option: gaugeOptionFor(config), style: {
+                                        height: 240,
+                                        minHeight: 240,
+                                        maxHeight: 240,
+                                        width: '100%',
+                                        flexShrink: 0,
+                                    } }), _jsxs(Box, { sx: {
+                                        display: 'flex',
+                                        justifyContent: 'space-between',
+                                        gap: 2,
+                                    }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Consumed" }), _jsxs(Text, { sx: { fontSize: 0, fontWeight: 'bold' }, children: [(consumedByAgent[config.key] ?? 0).toLocaleString(), " tokens"] })] }), agentIdByKey[config.key] && (_jsx(ContextPanel, { agentId: agentIdByKey[config.key], apiBase: config.baseUrl, liveData: contextSnapshotByKey[config.key] ?? null, chartHeight: "180px" }))] }, config.key));
+                    })()), _jsx(Box, { sx: {
+                            flex: 1,
+                            minWidth: 0,
+                            p: 3,
+                            display: 'grid',
+                            gridTemplateColumns: ['1fr', null, '1fr 1fr'],
+                            gap: 3,
+                            overflow: 'auto',
+                        }, children: DEMO_AGENT_CONFIGS.map(config => (_jsx(AgentRuntimePane, { config: config, token: token, onTokenConsumed: handleTokenConsumed, onAgentIdChange: handleAgentIdChange, onContextSnapshot: handleContextSnapshot }, config.key))) }), DEMO_AGENT_CONFIGS.filter(c => c.key === 'codemode').map(config => (() => {
+                        const outcome = outcomeFor(config.key);
+                        return (_jsxs(Box, { sx: {
+                                width: 320,
+                                borderLeft: '1px solid',
+                                borderColor: 'border.default',
+                                p: 3,
+                                display: 'flex',
+                                flexDirection: 'column',
+                                gap: 3,
+                                flexShrink: 0,
+                                overflow: 'auto',
+                            }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 1 }, children: config.title }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: "Tokens consumed (codemode)." }), _jsx(Text, { sx: {
+                                                color: 'fg.muted',
+                                                fontSize: 0,
+                                                fontFamily: 'mono',
+                                                display: 'block',
+                                                mt: 1,
+                                            }, children: config.baseUrl }), _jsx(Text, { sx: {
+                                                color: 'fg.muted',
+                                                fontSize: 0,
+                                                fontFamily: 'mono',
+                                                display: 'block',
+                                                mt: 1,
+                                                wordBreak: 'break-all',
+                                            }, children: agentIdByKey[config.key] || 'launching…' })] }), _jsxs(Box, { sx: {
+                                        p: 2,
+                                        borderRadius: 2,
+                                        border: '1px solid',
+                                        bg: outcome.bg,
+                                        borderColor: outcome.borderColor,
+                                        textAlign: 'center',
+                                        display: 'flex',
+                                        flexDirection: 'column',
+                                        alignItems: 'center',
+                                    }, children: [_jsx(Text, { sx: { fontSize: 4, lineHeight: 1, mb: 1 }, children: outcome.emoji }), _jsx(Text, { sx: {
+                                                fontSize: 0,
+                                                color: outcome.color,
+                                                fontWeight: 'bold',
+                                            }, children: outcome.title }), _jsx(Text, { sx: {
+                                                fontSize: 0,
+                                                color: 'fg.muted',
                                                 display: 'block',
-                                            }, children: "No artifacts yet." })) : (artifacts.map(a => (_jsxs(Box, { onClick: () => setSelectedId(a.id), sx: {
-                                                p: 2,
-                                                borderBottom: '1px solid',
-                                                borderColor: 'border.muted',
-                                                bg: selected?.id === a.id ? 'accent.subtle' : 'transparent',
-                                                cursor: 'pointer',
-                                                ':hover': { bg: 'canvas.subtle' },
-                                            }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', display: 'block' }, children: a.tool_name }), _jsx(Label, { size: "small", variant: a.status === 'accepted'
-                                                        ? 'success'
-                                                        : a.status === 'rejected'
-                                                            ? 'danger'
-                                                            : 'attention', children: a.status })] }, a.id)))) }), _jsx(Box, { sx: {
-                                            flex: 1,
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            overflow: 'auto',
-                                        }, children: selected ? (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
-                                                        p: 2,
-                                                        borderBottom: '1px solid',
-                                                        borderColor: 'border.default',
-                                                        display: 'flex',
-                                                        justifyContent: 'space-between',
-                                                        alignItems: 'center',
-                                                        flexShrink: 0,
-                                                    }, children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: selected.tool_name }), _jsx(Label, { size: "small", variant: "secondary", sx: { ml: 1 }, children: selected.language })] }), selected.status === 'pending' && (_jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckIcon, onClick: () => handleDecision(selected.id, 'accepted'), children: "Accept" }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: XIcon, onClick: () => handleDecision(selected.id, 'rejected'), children: "Reject" })] }))] }), _jsx(Box, { sx: {
-                                                        flex: 1,
-                                                        overflow: 'auto',
-                                                        bg: 'canvas.subtle',
-                                                        p: 3,
-                                                    }, children: _jsx(Box, { as: "pre", sx: {
-                                                            fontFamily: 'mono',
-                                                            fontSize: 0,
-                                                            m: 0,
-                                                            whiteSpace: 'pre-wrap',
-                                                            wordBreak: 'break-word',
-                                                        }, children: codeView === 'diff' && selected.diff
-                                                            ? selected.diff
-                                                            : selected.content }) })] })) : (_jsx(Box, { sx: {
-                                                flex: 1,
-                                                display: 'flex',
-                                                alignItems: 'center',
-                                                justifyContent: 'center',
-                                            }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Ask the agent to generate code to see it here." }) })) })] }), flash && (_jsx(Flash, { variant: flash.includes('accepted')
-                                    ? 'success'
-                                    : flash.includes('rejected')
-                                        ? 'warning'
-                                        : 'danger', sx: { m: 2, fontSize: 0 }, children: flash }))] })] })] }));
+                                                mt: 1,
+                                            }, children: outcome.message })] }), _jsx(ReactECharts, { option: gaugeOptionFor(config), style: {
+                                        height: 240,
+                                        minHeight: 240,
+                                        maxHeight: 240,
+                                        width: '100%',
+                                        flexShrink: 0,
+                                    } }), _jsxs(Box, { sx: {
+                                        display: 'flex',
+                                        justifyContent: 'space-between',
+                                        gap: 2,
+                                    }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Consumed" }), _jsxs(Text, { sx: { fontSize: 0, fontWeight: 'bold' }, children: [(consumedByAgent[config.key] ?? 0).toLocaleString(), " tokens"] })] }), agentIdByKey[config.key] && (_jsx(ContextPanel, { agentId: agentIdByKey[config.key], apiBase: config.baseUrl, liveData: contextSnapshotByKey[config.key] ?? null, chartHeight: "180px" }))] }, config.key));
+                    })())] })] }));
 };
-// ─── Sync token to core IAM store ──────────────────────────────────────────
 const syncTokenToIamStore = (token) => {
     import('@datalayer/core/lib/state').then(({ iamStore }) => {
         iamStore.setState({ token });
     });
 };
-// ─── Main component with auth gate ─────────────────────────────────────────
 const AgentCodemodeExample = () => {
-    const { token, setAuth, clearAuth } = useSimpleAuthStore();
+    const { token, clearAuth } = useSimpleAuthStore();
     const hasSynced = useRef(false);
     useEffect(() => {
         if (token && !hasSynced.current) {
@@ -236,11 +675,6 @@ const AgentCodemodeExample = () => {
             syncTokenToIamStore(token);
         }
     }, [token]);
-    const handleSignIn = useCallback((newToken, handle) => {
-        setAuth(newToken, handle);
-        hasSynced.current = true;
-        syncTokenToIamStore(newToken);
-    }, [setAuth]);
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
@@ -249,7 +683,7 @@ const AgentCodemodeExample = () => {
         });
     }, [clearAuth]);
     if (!token) {
-        return (_jsx(ThemedProvider, { children: _jsx(SignInSimple, { onSignIn: handleSignIn, onApiKeySignIn: apiKey => handleSignIn(apiKey, 'api-key-user'), title: "Agent Codemode", description: "Sign in to use Codemode with structured tool outputs.", leadingIcon: _jsx(CodeIcon, { size: 24 }) }) }));
+        return (_jsx(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
     }
     return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentCodemodeInner, { onLogout: handleLogout }) }) }));
 };