@datalayer/agent-runtimes 1.0.3 → 1.0.5

package/lib/examples/AgentMonitoringExample.js

@@ -16,141 +16,57 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /// <reference types="vite/client" />
 import { useEffect, useState, useCallback, useRef } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Text, Button, Spinner, Heading, Label } from '@primer/react';
-import { AlertIcon, CheckCircleIcon, GraphIcon, SignOutIcon, } from '@primer/octicons-react';
+import { Text, Spinner, Heading, Label } from '@primer/react';
+import { GraphIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
+import { AuthRequiredView, ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
+import { uniqueAgentId } from './utils/agentId';
+import { ContextPanel, } from '../context/ContextPanel';
+import { CostTracker } from '../context/CostTracker';
+import { CostUsageChart } from '../context/CostUsageChart';
+import { TokenUsageChart } from '../context/TokenUsageChart';
+import { GraphFlowChart } from '../context/GraphFlowChart';
+import { TurnGraphChart } from '../context/TurnGraphChart';
+import { useAIAgentsWebSocket } from '../hooks';
+import { parseAgentStreamMessage } from '../types/stream';
+import { useCoreStore } from '@datalayer/core/lib/state';
 const queryClient = new QueryClient();
 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 { Chat } from '../chat';
-import { useAgents } from '../hooks/useAgents';
 const AGENT_NAME = 'monitoring-demo-agent';
-const AGENT_SPEC_ID = 'monitor-sales-kpis';
-const clampPercent = (value) => Math.max(0, Math.min(100, value));
-const toNumber = (value, fallback) => {
-    const n = Number(value);
-    return Number.isFinite(n) ? n : fallback;
-};
-const randomOffset = (range) => (Math.random() - 0.5) * range;
-const createSyntheticSnapshot = (previous) => {
-    const baseCpu = previous?.cpuPercent ?? 42;
-    const baseMemory = previous?.memoryPercent ?? 57;
-    const baseLatency = previous?.latencyMs ?? 320;
-    const baseErrorRate = previous?.errorRatePercent ?? 1.6;
-    const baseQueueDepth = previous?.queueDepth ?? 12;
-    const cpuPercent = clampPercent(baseCpu + randomOffset(10));
-    const memoryPercent = clampPercent(baseMemory + randomOffset(8));
-    const latencyMs = Math.max(30, baseLatency + randomOffset(120));
-    const errorRatePercent = clampPercent(baseErrorRate + randomOffset(0.8));
-    const queueDepth = Math.max(0, Math.round(baseQueueDepth + randomOffset(8)));
-    let status = 'healthy';
-    if (errorRatePercent > 4 || latencyMs > 1200 || cpuPercent > 90) {
-        status = 'critical';
-    }
-    else if (errorRatePercent > 2 || latencyMs > 700 || cpuPercent > 80) {
-        status = 'degraded';
-    }
-    return {
-        timestamp: new Date().toISOString(),
-        cpuPercent,
-        memoryPercent,
-        latencyMs,
-        errorRatePercent,
-        queueDepth,
-        status,
-    };
-};
-const normalizeSnapshot = (raw, previous) => {
-    if (!raw || typeof raw !== 'object') {
-        return createSyntheticSnapshot(previous);
-    }
-    const data = raw;
-    const snapshot = createSyntheticSnapshot(previous);
-    const statusValue = String(data.status ?? snapshot.status).toLowerCase();
-    const status = statusValue === 'healthy' ||
-        statusValue === 'degraded' ||
-        statusValue === 'critical'
-        ? statusValue
-        : 'unknown';
-    return {
-        timestamp: String(data.timestamp ?? new Date().toISOString()),
-        cpuPercent: clampPercent(toNumber(data.cpuPercent ?? data.cpu, snapshot.cpuPercent)),
-        memoryPercent: clampPercent(toNumber(data.memoryPercent ?? data.memory, snapshot.memoryPercent)),
-        latencyMs: Math.max(0, toNumber(data.latencyMs ?? data.latency, snapshot.latencyMs)),
-        errorRatePercent: clampPercent(toNumber(data.errorRatePercent ?? data.errorRate, snapshot.errorRatePercent)),
-        queueDepth: Math.max(0, Math.round(toNumber(data.queueDepth, snapshot.queueDepth))),
-        status,
-    };
-};
-const normalizeAlert = (raw, index) => {
-    if (!raw || typeof raw !== 'object') {
-        return null;
-    }
-    const data = raw;
-    const severityValue = String(data.severity ?? 'info').toLowerCase();
-    const severity = severityValue === 'warning' || severityValue === 'critical'
-        ? severityValue
-        : 'info';
-    return {
-        id: String(data.id ?? `alert-${Date.now()}-${index}`),
-        title: String(data.title ?? 'Agent alert detected'),
-        severity,
-        timestamp: String(data.timestamp ?? new Date().toISOString()),
-    };
-};
-const statusVariant = (status) => {
-    if (status === 'healthy')
-        return 'success';
-    if (status === 'degraded')
-        return 'attention';
-    if (status === 'critical')
-        return 'danger';
-    return 'secondary';
-};
-const alertVariant = (severity) => {
-    if (severity === 'critical')
-        return 'danger';
-    if (severity === 'warning')
-        return 'attention';
-    return 'secondary';
-};
-const MetricRow = ({ label, value, percent }) => {
-    return (_jsxs(Box, { sx: { mb: 2 }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    mb: 1,
-                }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: label }), _jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold' }, children: value })] }), _jsx(Box, { sx: {
-                    width: '100%',
-                    height: 8,
-                    bg: 'canvas.subtle',
-                    borderRadius: 6,
-                    overflow: 'hidden',
-                }, children: _jsx(Box, { sx: {
-                        width: `${clampPercent(percent)}%`,
-                        height: '100%',
-                        bg: percent >= 85 ? 'danger.emphasis' : 'accent.emphasis',
-                        transition: 'width 300ms ease-out',
-                    } }) })] }));
-};
+const AGENT_SPEC_ID = 'demo-monitoring';
+const DEFAULT_LOCAL_BASE_URL = import.meta.env.VITE_BASE_URL || 'http://localhost:8765';
+const OTEL_BASE_URL_ENV = import.meta.env.VITE_OTEL_BASE_URL;
+const DATALAYER_RUN_URL_ENV = import.meta.env.DATALAYER_RUN_URL;
 const AgentMonitoringInner = ({ 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 runtime and alert monitoring signals',
-        },
-    });
-    const [snapshots, setSnapshots] = useState([]);
+    const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
+    const { configuration } = useCoreStore();
+    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);
     const [alerts, setAlerts] = useState([]);
-    const agentBaseUrl = runtime?.agentBaseUrl || '';
-    const agentId = runtime?.agentId || AGENT_NAME;
-    const podName = runtime?.podName || '(launching…)';
+    const [liveContext, setLiveContext] = useState(undefined);
+    const [liveContextSnapshot, setLiveContextSnapshot] = useState(undefined);
+    const [liveCost, setLiveCost] = useState(undefined);
+    const [liveMcpStatus, setLiveMcpStatus] = useState(undefined);
+    const [monitorLastSnapshotAt, setMonitorLastSnapshotAt] = useState(null);
+    const [liveGraphTelemetry, setLiveGraphTelemetry] = useState(undefined);
+    const agentBaseUrl = DEFAULT_LOCAL_BASE_URL;
+    const otelBaseUrl = configuration?.otelRunUrl ||
+        configuration?.runUrl ||
+        OTEL_BASE_URL_ENV ||
+        DATALAYER_RUN_URL_ENV ||
+        'https://prod1.datalayer.run';
+    const podName = agentId;
+    // The OTEL service_name resource attribute is 'agent-runtimes' (the
+    // application name), NOT the individual agent ID.  Use the correct value
+    // so the TokenUsageChart WS filter and HTTP query match actual rows.
+    const otelServiceName = 'agent-runtimes';
+    const chatAuthToken = token === null ? undefined : token;
     const authFetch = useCallback((url, opts = {}) => fetch(url, {
         ...opts,
         headers: {
@@ -160,46 +76,137 @@ const AgentMonitoringInner = ({ onLogout, }) => {
         },
     }), [token]);
     useEffect(() => {
-        if (!isReady || !agentBaseUrl)
-            return;
-        const poll = async () => {
-            let nextSnapshot = null;
-            let nextAlerts = null;
+        let isCancelled = false;
+        const createLocalAgent = async () => {
+            setRuntimeStatus('launching');
+            setIsReady(false);
+            setHookError(null);
+            setIsReconnectedAgent(false);
             try {
-                const res = await authFetch(`${agentBaseUrl}/api/v1/agents/${agentId}/monitoring`);
-                if (res.ok) {
-                    const data = await res.json();
-                    const rawSnapshot = data?.snapshot ?? data?.metrics ?? data;
-                    nextAlerts = Array.isArray(data?.alerts)
-                        ? data.alerts
-                            .map((a, i) => normalizeAlert(a, i))
-                            .filter((a) => !!a)
-                            .slice(0, 25)
-                        : [];
-                    setSnapshots(prev => {
-                        nextSnapshot = normalizeSnapshot(rawSnapshot, prev[0]);
-                        return [nextSnapshot, ...prev].slice(0, 40);
-                    });
-                    if (nextAlerts) {
-                        setAlerts(nextAlerts);
+                const response = await authFetch(`${agentBaseUrl}/api/v1/agents`, {
+                    method: 'POST',
+                    body: JSON.stringify({
+                        name: agentName,
+                        description: 'MCP monitoring demo – web crawling via Tavily with live cost/token metrics',
+                        agent_library: 'pydantic-ai',
+                        transport: 'vercel-ai',
+                        agent_spec_id: AGENT_SPEC_ID,
+                        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 local agent: ${response.status}`);
                     }
-                    return;
+                }
+                if (!isCancelled) {
+                    setAgentId(resolvedAgentId);
+                    setIsReconnectedAgent(isAlreadyRunning);
+                    setIsReady(true);
+                    setRuntimeStatus('ready');
                 }
             }
-            catch {
-                // Keep UI responsive with synthetic values when endpoint is unavailable.
-            }
-            setSnapshots(prev => {
-                if (prev.length > 0) {
-                    return prev;
+            catch (error) {
+                if (!isCancelled) {
+                    setHookError(error instanceof Error ? error.message : 'Agent failed to start');
+                    setRuntimeStatus('error');
                 }
-                return [createSyntheticSnapshot()];
-            });
+            }
+        };
+        void createLocalAgent();
+        return () => {
+            isCancelled = true;
         };
-        poll();
-        const interval = window.setInterval(poll, 10_000);
-        return () => window.clearInterval(interval);
-    }, [isReady, agentBaseUrl, agentId, authFetch]);
+    }, [agentBaseUrl, authFetch]);
+    const handleMonitoringStreamMessage = useCallback((message) => {
+        try {
+            const stream = parseAgentStreamMessage(message?.raw ?? message);
+            if (!stream || stream.type !== 'agent.snapshot') {
+                return;
+            }
+            const payload = stream.payload;
+            if (payload.contextSnapshot) {
+                setLiveContext(payload.contextSnapshot);
+                setLiveContextSnapshot(payload.contextSnapshot);
+                setMonitorLastSnapshotAt(Date.now());
+            }
+            if (payload.mcpStatus !== undefined) {
+                setLiveMcpStatus(payload.mcpStatus ?? undefined);
+            }
+            if (payload.graphTelemetry) {
+                setLiveGraphTelemetry(payload.graphTelemetry);
+            }
+            const snapshotCost = payload.contextSnapshot?.costUsage ?? payload.costUsage;
+            if (!snapshotCost) {
+                return;
+            }
+            setLiveCost({
+                agentId,
+                lastTurnCostUsd: Number(snapshotCost.lastTurnCostUsd ?? 0),
+                cumulativeCostUsd: Number(snapshotCost.cumulativeCostUsd ?? 0),
+                perRunBudgetUsd: snapshotCost.perRunBudgetUsd == null
+                    ? null
+                    : Number(snapshotCost.perRunBudgetUsd),
+                cumulativeBudgetUsd: snapshotCost.cumulativeBudgetUsd == null
+                    ? null
+                    : Number(snapshotCost.cumulativeBudgetUsd),
+                requestCount: Number(snapshotCost.requestCount ?? 0),
+                totalTokensUsed: Number(snapshotCost.totalTokensUsed ?? 0),
+                modelBreakdown: Array.isArray(snapshotCost.modelBreakdown)
+                    ? snapshotCost.modelBreakdown.map(item => ({
+                        model: String(item.model ?? 'unknown'),
+                        inputTokens: Number(item.inputTokens ?? 0),
+                        outputTokens: Number(item.outputTokens ?? 0),
+                        costUsd: Number(item.costUsd ?? 0),
+                        requests: Number(item.requests ?? 0),
+                    }))
+                    : [],
+                runs: Array.isArray(snapshotCost.runs)
+                    ? snapshotCost.runs.map(item => ({
+                        pricingResolved: Boolean(item.pricingResolved),
+                    }))
+                    : undefined,
+            });
+        }
+        catch {
+            // Ignore malformed stream payloads.
+        }
+    }, [agentId]);
+    const monitorSocket = useAIAgentsWebSocket({
+        enabled: isReady && Boolean(agentBaseUrl),
+        baseUrl: agentBaseUrl,
+        path: '/api/v1/tool-approvals/ws',
+        queryParams: { agent_id: agentId },
+        onMessage: handleMonitoringStreamMessage,
+        reconnectDelayMs: attempt => Math.min(1000 * 2 ** Math.max(0, attempt - 1), 10000),
+    });
+    useEffect(() => {
+        // Monitoring alerts endpoint is optional and may return 404 in local mode.
+        // Keep the UI quiet and rely on stream snapshots for now.
+        setAlerts([]);
+    }, [isReady, agentId]);
     if (!isReady && runtimeStatus !== 'error') {
         return (_jsxs(Box, { sx: {
                 display: 'flex',
@@ -208,21 +215,11 @@ const AgentMonitoringInner = ({ onLogout, }) => {
                 justifyContent: 'center',
                 height: '100vh',
                 gap: 3,
-            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: runtimeStatus === 'launching'
-                        ? 'Launching runtime for monitoring agent…'
-                        : 'Creating monitoring demo agent…' })] }));
+            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching local monitoring demo agent..." })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100vh',
-                gap: 3,
-            }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg' }, children: hookError || 'Agent failed to start' })] }));
+        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
-    const latest = snapshots[0] ?? createSyntheticSnapshot();
     return (_jsxs(Box, { sx: {
             height: 'calc(100vh - 60px)',
             display: 'flex',
@@ -236,46 +233,109 @@ const AgentMonitoringInner = ({ onLogout, }) => {
                     borderBottom: '1px solid',
                     borderColor: 'border.default',
                     flexShrink: 0,
-                }, children: [_jsx(GraphIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Monitoring \u2014 ", podName] }), _jsx(Label, { variant: statusVariant(latest.status), size: "small", children: latest.status }), 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: "Monitoring Agent", placeholder: "Ask about performance, latency, and alert trends\u2026", description: `${alerts.length} active alert${alerts.length !== 1 ? 's' : ''}`, showHeader: true, autoFocus: true, height: "100%", runtimeId: podName, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
+                }, children: [_jsx(GraphIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Monitoring \u2014 ", podName] }), isReconnectedAgent && (_jsx(Label, { variant: "secondary", size: "small", children: "Reconnected" })), _jsxs(Label, { variant: monitorSocket.connectionState === 'connected'
+                            ? 'success'
+                            : 'secondary', children: ["WS: ", monitorSocket.connectionState] })] }), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsxs(Box, { sx: {
+                            width: 320,
+                            minWidth: 280,
+                            borderRight: '1px solid',
+                            borderColor: 'border.default',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            overflow: 'auto',
+                            '@media (max-width: 1680px)': {
+                                width: 300,
+                                minWidth: 260,
+                            },
+                            '@media (max-width: 1400px)': {
+                                display: 'none',
+                            },
+                        }, children: [_jsxs(Box, { sx: {
+                                    p: 3,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Token Usage" }), _jsx(TokenUsageChart, { serviceName: otelServiceName, agentId: agentId, apiKey: token ?? undefined, runUrl: otelBaseUrl, liveSystemPromptTokens: liveContextSnapshot?.systemPromptTokens, liveUserMessageTokens: liveContextSnapshot?.userMessageTokens, liveAgentMessageTokens: liveContextSnapshot?.assistantMessageTokens, liveToolsUsageTokens: liveContextSnapshot?.toolTokens, liveTimestampMs: monitorLastSnapshotAt, height: 180 })] }), _jsxs(Box, { sx: {
+                                    p: 3,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Cost" }), _jsx(CostUsageChart, { serviceName: otelServiceName, agentId: agentId, apiKey: token ?? undefined, runUrl: otelBaseUrl, liveCumulativeUsd: liveCost?.cumulativeCostUsd, liveTimestampMs: monitorLastSnapshotAt, height: 180 })] }), _jsxs(Box, { sx: {
+                                    p: 3,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "LLM Cost Monitoring" }), liveCost ? (_jsx(CostTracker, { agentId: agentId, compact: false, liveData: liveCost })) : (_jsxs(Box, { children: [_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Waiting for first websocket snapshot..." }), monitorSocket.lastClose?.detail && (_jsxs(Text, { sx: {
+                                                    color: 'danger.fg',
+                                                    fontSize: 0,
+                                                    mt: 1,
+                                                    display: 'block',
+                                                }, children: ["Last close: ", monitorSocket.lastClose.detail] }))] }))] })] }), _jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(Chat, { protocol: "vercel-ai", baseUrl: agentBaseUrl, agentId: agentId, authToken: chatAuthToken, title: "Monitoring Agent", placeholder: "Ask for cost, token usage, and turn-level monitoring insights...", description: `${alerts.length} active alert${alerts.length !== 1 ? 's' : ''}`, showHeader: true, showTokenUsage: true, showToolsMenu: true, showSkillsMenu: true, autoFocus: true, height: "100%", runtimeId: agentId, historyEndpoint: `${agentBaseUrl}/api/v1/history`, suggestions: [
                                 {
-                                    title: 'Health summary',
-                                    message: 'Summarize current agent health and key bottlenecks',
+                                    title: '▶ No-tool turn',
+                                    message: 'Briefly introduce yourself without calling any tool or skill — produces a linear Start → Model → Decision → End graph.',
                                 },
                                 {
-                                    title: 'Alert triage',
-                                    message: 'List critical alerts first and suggest immediate mitigations',
+                                    title: '🔍 Single tool call',
+                                    message: 'Use the Tavily web search tool to find the latest news about pydantic-graph. Make a single search call.',
                                 },
-                            ], submitOnSuggestionClick: true }) }), _jsxs(Box, { sx: {
-                            width: 380,
+                                {
+                                    title: '🌀 Parallel tool fan-out',
+                                    message: 'Use Tavily to search the web in parallel for these three topics in the same turn: (1) OpenTelemetry traces, (2) agent observability, (3) LLM cost monitoring. Issue all three searches together so the turn graph fans out (Broadcast → Spread → Join).',
+                                },
+                                {
+                                    title: '🧩 Skill call',
+                                    message: 'Use the datalayer-whoami skill to identify my profile, then summarize it.',
+                                },
+                                {
+                                    title: '😄 Joke skill',
+                                    message: 'Use the jokes skill to tell me a random dad joke, then wrap it in one-sentence commentary.',
+                                },
+                                {
+                                    title: '🧪 Mixed tools + skills',
+                                    message: 'In one turn: (a) use Tavily to search for "OTEL traces best practices", (b) call the datalayer-whoami skill, (c) call the jokes skill. Summarize all three results together. This should produce a Broadcast → three Spread nodes → Join in the Turn Execution Graph.',
+                                },
+                                {
+                                    title: 'Monitoring summary',
+                                    message: 'Summarize my current token usage, cost status, and recent turn activity.',
+                                },
+                                {
+                                    title: 'Turn usage analysis',
+                                    message: 'Analyze the last turn usage and explain which parts drove input and output tokens.',
+                                },
+                            ], submitOnSuggestionClick: true, contextSnapshot: liveContextSnapshot, mcpStatusData: liveMcpStatus }) }), _jsxs(Box, { sx: {
+                            width: 360,
+                            minWidth: 320,
                             borderLeft: '1px solid',
                             borderColor: 'border.default',
                             display: 'flex',
                             flexDirection: 'column',
                             overflow: 'auto',
+                            '@media (max-width: 1680px)': {
+                                width: 340,
+                                minWidth: 300,
+                            },
+                            '@media (max-width: 1100px)': {
+                                width: 300,
+                                minWidth: 260,
+                            },
                         }, children: [_jsxs(Box, { sx: {
                                     p: 3,
                                     borderBottom: '1px solid',
                                     borderColor: 'border.default',
-                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Live Metrics" }), _jsx(MetricRow, { label: "CPU", value: `${latest.cpuPercent.toFixed(1)}%`, percent: latest.cpuPercent }), _jsx(MetricRow, { label: "Memory", value: `${latest.memoryPercent.toFixed(1)}%`, percent: latest.memoryPercent }), _jsx(MetricRow, { label: "Latency", value: `${Math.round(latest.latencyMs)} ms`, percent: (latest.latencyMs / 2000) * 100 }), _jsx(MetricRow, { label: "Error Rate", value: `${latest.errorRatePercent.toFixed(2)}%`, percent: latest.errorRatePercent * 20 }), _jsx(MetricRow, { label: "Queue Depth", value: `${latest.queueDepth}`, percent: latest.queueDepth })] }), _jsxs(Box, { sx: { p: 3, flex: 1, overflow: 'auto' }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Recent Alerts" }), alerts.length === 0 ? (_jsxs(Box, { sx: {
-                                            p: 2,
-                                            border: '1px solid',
-                                            borderColor: 'border.default',
-                                            borderRadius: 2,
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            gap: 2,
-                                        }, children: [_jsx(CheckCircleIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No active alerts." })] })) : (alerts.map(alert => (_jsxs(Box, { sx: {
-                                            p: 2,
-                                            mb: 2,
-                                            border: '1px solid',
-                                            borderColor: 'border.default',
-                                            borderRadius: 2,
-                                        }, children: [_jsxs(Box, { sx: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    alignItems: 'center',
-                                                    mb: 1,
-                                                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: alert.title }), _jsx(Label, { size: "small", variant: alertVariant(alert.severity), children: alert.severity })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: new Date(alert.timestamp).toLocaleString() })] }, alert.id))))] })] })] })] }));
+                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Turn and Session Usage" }), liveContext ? (_jsx(ContextPanel, { agentId: agentId, apiBase: agentBaseUrl, liveData: liveContext, defaultView: "overview", chartHeight: "160px" })) : (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Waiting for first websocket snapshot..." })), _jsxs(Text, { sx: { mt: 2, color: 'fg.muted', fontSize: 0 }, children: ["Live monitoring uses websocket snapshots only.", monitorLastSnapshotAt
+                                                ? ` Last snapshot ${new Date(monitorLastSnapshotAt).toLocaleTimeString()}.`
+                                                : '', monitorSocket.connectionState !== 'connected' &&
+                                                monitorSocket.reconnectAttempt > 0
+                                                ? ` Reconnect attempt ${monitorSocket.reconnectAttempt}.`
+                                                : ''] })] }), liveGraphTelemetry && (_jsxs(Box, { sx: {
+                                    p: 3,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Graph Execution (live)" }), _jsx(GraphFlowChart, { data: liveGraphTelemetry, height: 240 }), _jsxs(Text, { sx: { mt: 1, color: 'fg.muted', fontSize: 0 }, children: [liveGraphTelemetry.totalNodesExecuted, " node(s) executed across", ' ', liveGraphTelemetry.runCount, " run(s)", liveGraphTelemetry.totalDurationMs
+                                                ? ` — ${(liveGraphTelemetry.totalDurationMs / 1000).toFixed(2)}s total`
+                                                : ''] })] })), _jsxs(Box, { sx: {
+                                    p: 3,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Turn Execution Graph (OTEL traces)" }), _jsx(TurnGraphChart, { serviceName: otelServiceName, agentId: agentId, runUrl: otelBaseUrl, apiKey: token ?? undefined, autoRefreshMs: 10_000, height: 280 })] })] })] })] }));
 };
 const syncTokenToIamStore = (token) => {
     import('@datalayer/core/lib/state').then(({ iamStore }) => {
@@ -283,7 +343,7 @@ const syncTokenToIamStore = (token) => {
     });
 };
 const AgentMonitoringExample = () => {
-    const { token, setAuth, clearAuth } = useSimpleAuthStore();
+    const { token, clearAuth } = useSimpleAuthStore();
     const hasSynced = useRef(false);
     useEffect(() => {
         if (token && !hasSynced.current) {
@@ -291,11 +351,6 @@ const AgentMonitoringExample = () => {
             syncTokenToIamStore(token);
         }
     }, [token]);
-    const handleSignIn = useCallback((newToken, handle) => {
-        setAuth(newToken, handle);
-        hasSynced.current = true;
-        syncTokenToIamStore(newToken);
-    }, [setAuth]);
     const handleLogout = useCallback(() => {
         clearAuth();
         hasSynced.current = false;
@@ -304,7 +359,7 @@ const AgentMonitoringExample = () => {
         });
     }, [clearAuth]);
     if (!token) {
-        return (_jsx(ThemedProvider, { children: _jsx(SignInSimple, { onSignIn: handleSignIn, onApiKeySignIn: apiKey => handleSignIn(apiKey, 'api-key-user'), title: "Agent Monitoring", description: "Sign in to monitor runtime health and alerts.", leadingIcon: _jsx(GraphIcon, { size: 24 }) }) }));
+        return (_jsx(ThemedProvider, { children: _jsx(AuthRequiredView, {}) }));
     }
     return (_jsx(QueryClientProvider, { client: queryClient, children: _jsx(ThemedProvider, { children: _jsx(AgentMonitoringInner, { onLogout: handleLogout }) }) }));
 };