@datalayer/agent-runtimes 1.3.89 → 1.3.90

package/lib/examples/AgentMemoryExample.js

@@ -196,91 +196,22 @@ const AgentMemoryInner = ({ onLogout }) => {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
     // ── Main layout ──────────────────────────────────────────────────────────
-    return (_jsxs(Box, { sx: {
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-            bg: 'canvas.default',
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    px: 3,
-                    py: 2,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                    flexShrink: 0,
-                }, children: [_jsx(DatabaseIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Durable Memory \u2014 ", runtimeName] })] }), _jsxs(Box, { sx: { display: 'flex', flex: 1, minHeight: 0 }, children: [_jsx(Box, { sx: {
-                            flex: 1,
-                            minWidth: 0,
-                            borderRight: '1px solid',
-                            borderColor: 'border.default',
-                        }, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: LOOP_PLUGINS_AGENTMEM }) }), _jsxs(Box, { sx: {
-                            width: 340,
-                            flexShrink: 0,
-                            display: 'flex',
-                            flexDirection: 'column',
-                            bg: 'canvas.default',
-                        }, children: [_jsxs(Box, { sx: {
-                                    px: 3,
-                                    py: 2,
-                                    borderBottom: '1px solid',
-                                    borderColor: 'border.default',
-                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 2 }, children: [_jsx(DatabaseIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Memory Inspector" })] }), _jsx(Label, { variant: "accent", sx: { mb: 2 }, children: runtimeTarget === 'local'
+    return (_jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", bg: "canvas.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, children: [_jsx(DatabaseIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Durable Memory \u2014 ", runtimeName] })] }), _jsxs(Box, { display: "flex", flex: 1, minHeight: 0, children: [_jsx(Box, { flex: 1, minWidth: 0, borderRight: "1px solid", borderColor: "border.default", children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: LOOP_PLUGINS_AGENTMEM }) }), _jsxs(Box, { width: 340, flexShrink: 0, display: "flex", flexDirection: "column", bg: "canvas.default", children: [_jsxs(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [_jsx(DatabaseIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Memory Inspector" })] }), _jsx(Label, { variant: "accent", sx: { mb: 2 }, children: runtimeTarget === 'local'
                                             ? 'SQLite backend (local, persistent)'
-                                            : 'Mem0 pgvector backend (cloud)' }), _jsx(Flash, { variant: "default", sx: { fontSize: 0, mt: 2 }, children: "Memory persistence conditions: for local runs the agent uses a durable SQLite store; for cloud runs it uses Mem0. Durable facts are saved when the model emits a remember action (not every turn)." }), _jsxs(Box, { sx: { display: 'flex', gap: 1, mt: 2 }, children: [_jsx(TextInput, { size: "small", value: searchQuery, onChange: e => setSearchQuery(e.target.value), placeholder: "Search agent memory\u2026", sx: { flex: 1 }, onKeyDown: e => e.key === 'Enter' && handleSearch() }), _jsx(Button, { size: "small", leadingVisual: SearchIcon, onClick: handleSearch, disabled: searching, children: searching ? _jsx(Spinner, { size: "small" }) : 'Search' }), _jsx(Button, { size: "small", leadingVisual: ListUnorderedIcon, onClick: handleListAll, children: "List all" })] })] }), searchResults.length > 0 && (_jsxs(Box, { sx: {
-                                    px: 3,
-                                    py: 2,
-                                    borderBottom: '1px solid',
-                                    borderColor: 'border.default',
-                                }, children: [_jsxs(Text, { sx: {
+                                            : 'Mem0 pgvector backend (cloud)' }), _jsx(Flash, { variant: "default", sx: { fontSize: 0, mt: 2 }, children: "Memory persistence conditions: for local runs the agent uses a durable SQLite store; for cloud runs it uses Mem0. Durable facts are saved when the model emits a remember action (not every turn)." }), _jsxs(Box, { display: "flex", gap: 1, mt: 2, children: [_jsx(TextInput, { size: "small", value: searchQuery, onChange: e => setSearchQuery(e.target.value), placeholder: "Search agent memory\u2026", sx: { flex: 1 }, onKeyDown: e => e.key === 'Enter' && handleSearch() }), _jsx(Button, { size: "small", leadingVisual: SearchIcon, onClick: handleSearch, disabled: searching, children: searching ? _jsx(Spinner, { size: "small" }) : 'Search' }), _jsx(Button, { size: "small", leadingVisual: ListUnorderedIcon, onClick: handleListAll, children: "List all" })] })] }), searchResults.length > 0 && (_jsxs(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", children: [_jsxs(Text, { sx: {
                                             fontWeight: 'semibold',
                                             fontSize: 0,
                                             display: 'block',
                                             mb: 1,
-                                        }, children: ["Search Results (", searchResults.length, ")"] }), searchResults.map((entry, i) => (_jsxs(Box, { sx: {
-                                            p: 2,
-                                            mb: 1,
-                                            bg: 'canvas.default',
-                                            borderRadius: 2,
-                                            border: '1px solid',
-                                            borderColor: 'border.muted',
-                                            fontSize: 0,
-                                        }, children: [_jsx(Text, { sx: { display: 'block' }, children: entry.content }), entry.score != null && (_jsxs(Text, { sx: { color: 'fg.muted', fontSize: '10px' }, children: ["score: ", entry.score.toFixed(3)] }))] }, entry.id || i)))] })), searchAttempted &&
+                                        }, children: ["Search Results (", searchResults.length, ")"] }), searchResults.map((entry, i) => (_jsxs(Box, { p: 2, mb: 1, bg: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.muted", fontSize: 0, children: [_jsx(Text, { sx: { display: 'block' }, children: entry.content }), entry.score != null && (_jsxs(Text, { sx: { color: 'fg.muted', fontSize: '10px' }, children: ["score: ", entry.score.toFixed(3)] }))] }, entry.id || i)))] })), searchAttempted &&
                                 !searching &&
                                 searchQuery.trim() &&
-                                searchResults.length === 0 && (_jsx(Box, { sx: {
-                                    px: 3,
-                                    py: 2,
-                                    borderBottom: '1px solid',
-                                    borderColor: 'border.default',
-                                }, children: _jsx(Flash, { variant: "default", sx: { fontSize: 0 }, children: "No matching memories found for this query yet." }) })), _jsxs(Box, { sx: { flex: 1, overflow: 'auto', px: 3, py: 2 }, children: [_jsxs(Box, { sx: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'space-between',
-                                            mb: 2,
-                                        }, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 0 }, children: ["Stored Memories (", memories.length, ")"] }), _jsx(Button, { size: "small", variant: "invisible", onClick: fetchMemories, children: "Refresh" })] }), memories.length === 0 ? (_jsx(Flash, { variant: "default", sx: { fontSize: 0 }, children: "No memories yet. Start chatting \u2014 the agent will remember facts and preferences automatically." })) : (memories.map((entry, i) => (_jsx(Box, { sx: {
-                                            p: 2,
-                                            mb: 1,
-                                            bg: 'canvas.default',
-                                            borderRadius: 2,
-                                            border: '1px solid',
-                                            borderColor: 'border.muted',
-                                            fontSize: 0,
-                                        }, children: _jsx(Text, { sx: { display: 'block' }, children: entry.content }) }, entry.id || i)))), _jsxs(Box, { sx: { mt: 3 }, children: [_jsx(Text, { sx: {
+                                searchResults.length === 0 && (_jsx(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", children: _jsx(Flash, { variant: "default", sx: { fontSize: 0 }, children: "No matching memories found for this query yet." }) })), _jsxs(Box, { flex: 1, overflow: "auto", px: 3, py: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsxs(Text, { sx: { fontWeight: 'semibold', fontSize: 0 }, children: ["Stored Memories (", memories.length, ")"] }), _jsx(Button, { size: "small", variant: "invisible", onClick: fetchMemories, children: "Refresh" })] }), memories.length === 0 ? (_jsx(Flash, { variant: "default", sx: { fontSize: 0 }, children: "No memories yet. Start chatting \u2014 the agent will remember facts and preferences automatically." })) : (memories.map((entry, i) => (_jsx(Box, { p: 2, mb: 1, bg: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.muted", fontSize: 0, children: _jsx(Text, { sx: { display: 'block' }, children: entry.content }) }, entry.id || i)))), _jsxs(Box, { mt: 3, children: [_jsx(Text, { sx: {
                                                     fontWeight: 'semibold',
                                                     fontSize: 0,
                                                     display: 'block',
                                                     mb: 2,
-                                                }, children: "Runtimes API (account scoped)" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block', mb: 2 }, children: "Uses listRuntimeMemories against /api/runtimes/v1/memories. This endpoint is only available when the runtimes service is configured; local example-only runs may return Not Found." }), accountMemoriesError ? (_jsx(Flash, { variant: "warning", sx: { fontSize: 0, mb: 2 }, children: accountMemoriesError })) : null, accountMemories.length === 0 ? (_jsx(Flash, { variant: "default", sx: { fontSize: 0 }, children: "No runtime memories returned." })) : (accountMemories.map((entry, i) => (_jsx(Box, { sx: {
-                                                    p: 2,
-                                                    mb: 1,
-                                                    bg: 'canvas.default',
-                                                    borderRadius: 2,
-                                                    border: '1px solid',
-                                                    borderColor: 'border.muted',
-                                                    fontSize: 0,
-                                                }, children: _jsx(Text, { sx: { display: 'block' }, children: entry.content }) }, `runtime-${entry.id || i}`))))] })] })] })] })] }));
+                                                }, children: "Runtimes API (account scoped)" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block', mb: 2 }, children: "Uses listRuntimeMemories against /api/runtimes/v1/memories. This endpoint is only available when the runtimes service is configured; local example-only runs may return Not Found." }), accountMemoriesError ? (_jsx(Flash, { variant: "warning", sx: { fontSize: 0, mb: 2 }, children: accountMemoriesError })) : null, accountMemories.length === 0 ? (_jsx(Flash, { variant: "default", sx: { fontSize: 0 }, children: "No runtime memories returned." })) : (accountMemories.map((entry, i) => (_jsx(Box, { p: 2, mb: 1, bg: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.muted", fontSize: 0, children: _jsx(Text, { sx: { display: 'block' }, children: entry.content }) }, `runtime-${entry.id || i}`))))] })] })] })] })] }));
 };
 // ─── Sync token to core IAM store ──────────────────────────────────────────
 const syncTokenToIamStore = (token) => {

package/lib/examples/AgentMonitoringExample.js

@@ -262,29 +262,12 @@ const AgentMonitoringInner = ({ onLogout, }) => {
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
-    return (_jsxs(Box, { sx: {
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    px: 3,
-                    py: 2,
-                    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 ", runtimeName] }), isReconnectedAgent && (_jsx(Label, { variant: "secondary", size: "small", children: "Reconnected" })), _jsxs(Label, { variant: monitorSocket.connectionState === 'connected'
+    return (_jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 3, py: 2, 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 ", runtimeName] }), 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: {
+                            : 'secondary', children: ["WS: ", monitorSocket.connectionState] })] }), _jsxs(Box, { flex: 1, minHeight: 0, display: "flex", children: [_jsxs(Box, { borderRight: "1px solid", borderColor: "border.default", flexDirection: "column", overflow: "auto", 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,
@@ -292,31 +275,14 @@ const AgentMonitoringInner = ({ onLogout, }) => {
                             '@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, otelUrl: 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, otelUrl: 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: {
+                        }, children: [_jsxs(Box, { 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, otelUrl: otelBaseUrl, liveSystemPromptTokens: liveContextSnapshot?.systemPromptTokens, liveUserMessageTokens: liveContextSnapshot?.userMessageTokens, liveAgentMessageTokens: liveContextSnapshot?.assistantMessageTokens, liveToolsUsageTokens: liveContextSnapshot?.toolTokens, liveTimestampMs: monitorLastSnapshotAt, height: 180 })] }), _jsxs(Box, { 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, otelUrl: otelBaseUrl, liveCumulativeUsd: liveCost?.cumulativeCostUsd, liveTimestampMs: monitorLastSnapshotAt, height: 180 })] }), _jsxs(Box, { 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(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: chatPlugins }) }), _jsxs(Box, { sx: {
+                                                }, children: ["Last close: ", monitorSocket.lastClose.detail] }))] }))] })] }), _jsx(Box, { flex: 1, minWidth: 0, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: chatPlugins }) }), _jsxs(Box, { borderLeft: "1px solid", borderColor: "border.default", display: "flex", flexDirection: "column", overflow: "auto", 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,
@@ -325,26 +291,14 @@ const AgentMonitoringInner = ({ onLogout, }) => {
                                 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: "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
+                        }, children: [_jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", 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 && (_jsxs(Box, { 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, otelUrl: otelBaseUrl, apiKey: token ?? undefined, autoRefreshMs: 10_000, height: 280 })] })] })] })] }));
+                                                : ''] })] })), _jsxs(Box, { 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, otelUrl: otelBaseUrl, apiKey: token ?? undefined, autoRefreshMs: 10_000, height: 280 })] })] })] })] }));
 };
 const syncTokenToIamStore = (token) => {
     import('../state/substates').then(({ iamStore }) => {

package/lib/examples/AgentNotificationsExample.js

@@ -200,73 +200,15 @@ const AgentNotificationsInner = ({ onLogout, }) => {
                 return AlertIcon; // placeholder for Slack icon
         }
     };
-    return (_jsxs(Box, { sx: {
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    px: 3,
-                    py: 2,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                    flexShrink: 0,
-                }, children: [_jsx(BellIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Notifications \u2014 ", runtimeName] }), unreadCount > 0 && (_jsxs(Label, { variant: "accent", size: "small", children: [unreadCount, " unread"] }))] }), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: plugins }) }), _jsxs(Box, { sx: {
-                            width: 380,
-                            borderLeft: '1px solid',
-                            borderColor: 'border.default',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            overflow: 'auto',
-                        }, children: [_jsxs(Box, { sx: {
-                                    p: 3,
-                                    borderBottom: '1px solid',
-                                    borderColor: 'border.default',
-                                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 2 }, children: [_jsx(BellIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Channels" })] }), channels.map(ch => {
+    return (_jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, children: [_jsx(BellIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Notifications \u2014 ", runtimeName] }), unreadCount > 0 && (_jsxs(Label, { variant: "accent", size: "small", children: [unreadCount, " unread"] }))] }), _jsxs(Box, { flex: 1, minHeight: 0, display: "flex", children: [_jsx(Box, { flex: 1, minWidth: 0, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: plugins }) }), _jsxs(Box, { width: 380, borderLeft: "1px solid", borderColor: "border.default", display: "flex", flexDirection: "column", overflow: "auto", children: [_jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 2, children: [_jsx(BellIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Channels" })] }), channels.map(ch => {
                                         const Icon = channelIcon(ch.channel);
-                                        return (_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: ch.channel !== 'in-app' ? 1 : 0,
-                                                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { size: 14 }), _jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: ch.channel })] }), _jsx(Button, { size: "small", variant: ch.enabled ? 'danger' : 'primary', leadingVisual: ch.enabled ? MuteIcon : BellIcon, onClick: () => handleToggleChannel(ch.channel), disabled: isSaving, children: ch.enabled ? 'Disable' : 'Enable' })] }), ch.channel !== 'in-app' && (_jsx(TextInput, { value: editTargets[ch.channel] ?? ch.target ?? '', onChange: e => setEditTargets(prev => ({
+                                        return (_jsxs(Box, { p: 2, mb: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: ch.channel !== 'in-app' ? 1 : 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(Icon, { size: 14 }), _jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: ch.channel })] }), _jsx(Button, { size: "small", variant: ch.enabled ? 'danger' : 'primary', leadingVisual: ch.enabled ? MuteIcon : BellIcon, onClick: () => handleToggleChannel(ch.channel), disabled: isSaving, children: ch.enabled ? 'Disable' : 'Enable' })] }), ch.channel !== 'in-app' && (_jsx(TextInput, { value: editTargets[ch.channel] ?? ch.target ?? '', onChange: e => setEditTargets(prev => ({
                                                         ...prev,
                                                         [ch.channel]: e.target.value,
                                                     })), placeholder: ch.channel === 'email'
                                                         ? 'user@example.com'
                                                         : 'https://hooks.slack.com/…', size: "small", sx: { width: '100%' } }))] }, ch.channel));
-                                    }), _jsx(Button, { size: "small", leadingVisual: BellIcon, onClick: handleTestNotification, sx: { width: '100%' }, children: "Send Test Notification" }), flash && (_jsx(Flash, { variant: flash.includes('sent') ? 'success' : 'danger', sx: { mt: 2, fontSize: 0 }, children: flash }))] }), _jsxs(Box, { sx: {
-                                    p: 3,
-                                    borderBottom: '1px solid',
-                                    borderColor: 'border.default',
-                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Recent Alerts" }), recentAlerts.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." })] })) : (recentAlerts.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))))] }), _jsxs(Box, { sx: { p: 3, flex: 1, overflow: 'auto' }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Recent Notifications" }), notifications.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "No notifications yet." })) : (_jsx(Timeline, { children: notifications.slice(0, 25).map(n => (_jsxs(Timeline.Item, { "data-notification": n.id, children: [_jsx(Timeline.Badge, { sx: { cursor: n.read ? 'default' : 'pointer' }, onClick: () => {
+                                    }), _jsx(Button, { size: "small", leadingVisual: BellIcon, onClick: handleTestNotification, sx: { width: '100%' }, children: "Send Test Notification" }), flash && (_jsx(Flash, { variant: flash.includes('sent') ? 'success' : 'danger', sx: { mt: 2, fontSize: 0 }, children: flash }))] }), _jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Recent Alerts" }), recentAlerts.length === 0 ? (_jsxs(Box, { 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." })] })) : (recentAlerts.map(alert => (_jsxs(Box, { p: 2, mb: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, children: [_jsxs(Box, { 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))))] }), _jsxs(Box, { p: 3, flex: 1, overflow: "auto", children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Recent Notifications" }), notifications.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "No notifications yet." })) : (_jsx(Timeline, { children: notifications.slice(0, 25).map(n => (_jsxs(Timeline.Item, { "data-notification": n.id, children: [_jsx(Timeline.Badge, { sx: { cursor: n.read ? 'default' : 'pointer' }, onClick: () => {
                                                         if (!n.read)
                                                             void handleMarkRead(n.id);
                                                     }, title: n.read ? 'Read' : 'Mark as read', children: n.read ? _jsx(CheckCircleIcon, {}) : _jsx(BellIcon, {}) }), _jsxs(Timeline.Body, { children: [_jsx(Text, { sx: {

package/lib/examples/AgentOtelExample.js

@@ -76,29 +76,9 @@ const AgentLaunchPanel = ({ baseUrl, onConnected, onDisconnected, isConnected, c
         void handleLaunch();
     }, [handleLaunch, isConnected]);
     if (isConnected) {
-        return (_jsxs(Box, { sx: {
-                px: 3,
-                py: 2,
-                borderBottom: '1px solid',
-                borderColor: 'border.default',
-                display: 'flex',
-                alignItems: 'center',
-                gap: 2,
-                flexShrink: 0,
-                bg: 'success.subtle',
-            }, children: [_jsx(PlugIcon, { size: 14 }), _jsx(Text, { sx: { fontSize: 1, flex: 1, color: 'success.fg' }, children: connectedAgentName ?? 'Agent connected' }), _jsx(Button, { size: "small", variant: "invisible", onClick: onDisconnected, leadingVisual: XIcon, sx: { color: 'fg.muted' }, children: "Disconnect" })] }));
+        return (_jsxs(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", display: "flex", alignItems: "center", gap: 2, flexShrink: 0, bg: "success.subtle", children: [_jsx(PlugIcon, { size: 14 }), _jsx(Text, { sx: { fontSize: 1, flex: 1, color: 'success.fg' }, children: connectedAgentName ?? 'Agent connected' }), _jsx(Button, { size: "small", variant: "invisible", onClick: onDisconnected, leadingVisual: XIcon, sx: { color: 'fg.muted' }, children: "Disconnect" })] }));
     }
-    return (_jsxs(Box, { sx: {
-            px: 3,
-            py: 2,
-            borderBottom: '1px solid',
-            borderColor: 'border.default',
-            display: 'flex',
-            flexDirection: 'column',
-            gap: 2,
-            flexShrink: 0,
-            bg: 'canvas.default',
-        }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "AGENT" }), loading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Launching ", AGENTSPEC_ID, "\u2026"] })] })) : error ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 1, color: 'danger.fg' }, children: error }), _jsx(Button, { variant: "primary", size: "small", onClick: handleLaunch, leadingVisual: PlugIcon, sx: { width: '100%' }, children: "Retry" })] })) : (_jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Launching ", AGENTSPEC_ID, "\u2026"] }))] }));
+    return (_jsxs(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", display: "flex", flexDirection: "column", gap: 2, flexShrink: 0, bg: "canvas.default", children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "AGENT" }), loading ? (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Spinner, { size: "small" }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Launching ", AGENTSPEC_ID, "\u2026"] })] })) : error ? (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 1, color: 'danger.fg' }, children: error }), _jsx(Button, { variant: "primary", size: "small", onClick: handleLaunch, leadingVisual: PlugIcon, sx: { width: '100%' }, children: "Retry" })] })) : (_jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Launching ", AGENTSPEC_ID, "\u2026"] }))] }));
 };
 const TAB_SX = (active) => ({
     px: 3,
@@ -157,56 +137,7 @@ const AgentOtelExampleInner = ({ token }) => {
         setConnectedAgentId(null);
     }, [connectedAgentId, agentBaseUrl]);
     const otelPlugins = useMemo(() => [AgentOtelPlugin], []);
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%',
-            overflow: 'hidden',
-            bg: 'canvas.default',
-            color: 'fg.default',
-        }, children: [_jsx(OtelHeader, { baseUrl: otelBaseUrl, token: token, onNavigate: handleNavigate, showGenerateButtons: true, showAccountControls: false, trailing: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(TelescopeIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: otelBaseUrl })] }) }), _jsxs(Box, { sx: {
-                    display: 'flex',
-                    flex: 1,
-                    minHeight: 0,
-                    overflow: 'hidden',
-                }, children: [_jsxs(Box, { sx: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            flex: 1,
-                            minWidth: 0,
-                            overflow: 'hidden',
-                        }, children: [_jsx(Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    px: 2,
-                                    bg: 'canvas.default',
-                                    borderBottom: '1px solid',
-                                    borderColor: 'border.default',
-                                    flexShrink: 0,
-                                }, children: ['dashboard', 'sql', 'system'].map(v => (_jsx(Box, { sx: TAB_SX(view === v), onClick: () => setView(v), children: _jsx(Text, { children: v === 'dashboard' ? 'Live' : v === 'sql' ? 'SQL' : 'System' }) }, v))) }), _jsx(Box, { sx: {
-                                    display: 'flex',
-                                    flex: 1,
-                                    minHeight: 0,
-                                    overflow: 'hidden',
-                                }, children: view === 'dashboard' ? (_jsx(DashboardView, { baseUrl: otelBaseUrl, wsBaseUrl: otelBaseUrl, token: token, autoRefreshMs: 5000, defaultSignal: "traces", limit: 200, onSignalRef: handleSignalRef })) : view === 'sql' ? (_jsx(SqlView, { baseUrl: otelBaseUrl, token: token })) : (_jsx(SystemView, { baseUrl: otelBaseUrl, token: token })) })] }), _jsxs(Box, { sx: {
-                            width: 380,
-                            flexShrink: 0,
-                            display: 'flex',
-                            flexDirection: 'column',
-                            borderLeft: '1px solid',
-                            borderColor: 'border.default',
-                            bg: 'canvas.default',
-                            minHeight: 0,
-                        }, children: [_jsx(AgentLaunchPanel, { baseUrl: agentBaseUrl, onConnected: handleAgentConnected, onDisconnected: handleAgentDisconnected, isConnected: !!connectedAgentId, connectedAgentName: connectedAgentId ?? undefined }), _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: connectedAgentId ? (_jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: connectedAgentId, editors: false, plugins: otelPlugins }, connectedAgentId)) : (_jsx(Box, { sx: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        justifyContent: 'center',
-                                        height: '100%',
-                                        px: 3,
-                                        color: 'fg.muted',
-                                        fontSize: 1,
-                                        textAlign: 'center',
-                                    }, children: "Connect an agent to start chatting about your traces, logs, and metrics." })) })] })] })] }));
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", height: "100%", overflow: "hidden", bg: "canvas.default", color: "fg.default", children: [_jsx(OtelHeader, { baseUrl: otelBaseUrl, token: token, onNavigate: handleNavigate, showGenerateButtons: true, showAccountControls: false, trailing: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(TelescopeIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: otelBaseUrl })] }) }), _jsxs(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: [_jsxs(Box, { display: "flex", flexDirection: "column", flex: 1, minWidth: 0, overflow: "hidden", children: [_jsx(Box, { display: "flex", alignItems: "center", px: 2, bg: "canvas.default", borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, children: ['dashboard', 'sql', 'system'].map(v => (_jsx(Box, { sx: TAB_SX(view === v), onClick: () => setView(v), children: _jsx(Text, { children: v === 'dashboard' ? 'Live' : v === 'sql' ? 'SQL' : 'System' }) }, v))) }), _jsx(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: view === 'dashboard' ? (_jsx(DashboardView, { baseUrl: otelBaseUrl, wsBaseUrl: otelBaseUrl, token: token, autoRefreshMs: 5000, defaultSignal: "traces", limit: 200, onSignalRef: handleSignalRef })) : view === 'sql' ? (_jsx(SqlView, { baseUrl: otelBaseUrl, token: token })) : (_jsx(SystemView, { baseUrl: otelBaseUrl, token: token })) })] }), _jsxs(Box, { width: 380, flexShrink: 0, display: "flex", flexDirection: "column", borderLeft: "1px solid", borderColor: "border.default", bg: "canvas.default", minHeight: 0, children: [_jsx(AgentLaunchPanel, { baseUrl: agentBaseUrl, onConnected: handleAgentConnected, onDisconnected: handleAgentDisconnected, isConnected: !!connectedAgentId, connectedAgentName: connectedAgentId ?? undefined }), _jsx(Box, { flex: 1, minHeight: 0, children: connectedAgentId ? (_jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: connectedAgentId, editors: false, plugins: otelPlugins }, connectedAgentId)) : (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", px: 3, color: "fg.muted", fontSize: 1, textAlign: "center", children: "Connect an agent to start chatting about your traces, logs, and metrics." })) })] })] })] }));
 };
 /**
  * AgentOtelExample – themed root with auth gate.

package/lib/examples/AgentOutputsExample.js

@@ -207,18 +207,9 @@ const MarkdownTable = ({ source }) => {
         return { headers, rows };
     }, [source]);
     if (headers.length === 0) {
-        return (_jsx(Box, { as: "pre", sx: {
-                fontFamily: 'mono',
-                fontSize: 0,
-                whiteSpace: 'pre-wrap',
-                m: 0,
-            }, children: source }));
+        return (_jsx(Box, { as: "pre", fontFamily: "mono", fontSize: 0, whiteSpace: "pre-wrap", m: 0, children: source }));
     }
-    return (_jsx(Box, { sx: { overflowX: 'auto' }, children: _jsxs(Box, { as: "table", sx: {
-                width: '100%',
-                tableLayout: 'auto',
-                borderCollapse: 'collapse',
-                fontSize: 0,
+    return (_jsx(Box, { overflowX: "auto", children: _jsxs(Box, { as: "table", width: "100%", tableLayout: "auto", borderCollapse: "collapse", fontSize: 0, sx: {
                 'th, td': {
                     border: '1px solid',
                     borderColor: 'border.muted',
@@ -262,15 +253,7 @@ const ChartView = ({ source }) => {
         return (_jsx(Text, { sx: { color: 'danger.fg', fontSize: 0 }, children: "Could not parse chart spec as JSON." }));
     }
     if (!ReactECharts) {
-        return (_jsx(Box, { as: "pre", sx: {
-                fontFamily: 'mono',
-                fontSize: 0,
-                whiteSpace: 'pre-wrap',
-                bg: 'canvas.default',
-                p: 2,
-                borderRadius: 2,
-                m: 0,
-            }, children: source }));
+        return (_jsx(Box, { as: "pre", fontFamily: "mono", fontSize: 0, whiteSpace: "pre-wrap", bg: "canvas.default", p: 2, borderRadius: 2, m: 0, children: source }));
     }
     return (_jsx(ReactECharts, { option: option, style: { height: 280, width: '100%' } }));
 };
@@ -329,32 +312,7 @@ const AgentOutputsInner = () => {
         document.body.removeChild(a);
         URL.revokeObjectURL(url);
     };
-    return (_jsxs(Box, { sx: {
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    px: 3,
-                    py: 2,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                    flexShrink: 0,
-                }, children: [_jsx(TableIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Agent Outputs \u2014 Local Runtime" })] }), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentName, editors: false, showHeader: true, plugins: LOOP_PLUGINS_AGENTOUT }) }), _jsxs(Box, { sx: {
-                            width: 420,
-                            borderLeft: '1px solid',
-                            borderColor: 'border.default',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            overflow: 'hidden',
-                        }, children: [_jsx(Box, { sx: {
-                                    display: 'flex',
-                                    borderBottom: '1px solid',
-                                    borderColor: 'border.default',
-                                    flexShrink: 0,
-                                }, children: [
+    return (_jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, children: [_jsx(TableIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Agent Outputs \u2014 Local Runtime" })] }), _jsxs(Box, { flex: 1, minHeight: 0, display: "flex", children: [_jsx(Box, { flex: 1, minWidth: 0, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentName, editors: false, showHeader: true, plugins: LOOP_PLUGINS_AGENTOUT }) }), _jsxs(Box, { width: 420, borderLeft: "1px solid", borderColor: "border.default", display: "flex", flexDirection: "column", overflow: "hidden", children: [_jsx(Box, { display: "flex", borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, children: [
                                     { key: 'table', icon: TableIcon, label: 'Table' },
                                     { key: 'json', icon: CodeIcon, label: 'JSON' },
                                     { key: 'chart', icon: GraphIcon, label: 'Chart' },
@@ -370,47 +328,14 @@ const AgentOutputsInner = () => {
                                             borderColor: activeTab === t.key ? 'accent.fg' : 'transparent',
                                             fontWeight: activeTab === t.key ? 'bold' : 'normal',
                                         }, children: [t.label, n > 0 ? ` (${n})` : ''] }, t.key));
-                                }) }), _jsxs(Box, { sx: { p: 3, flex: 1, overflow: 'auto' }, children: [_jsxs(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: [activeTab.charAt(0).toUpperCase() + activeTab.slice(1), " outputs"] }), filtered.length === 0 ? (_jsxs(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: ["No ", activeTab, " outputs yet. Use one of the openers in the chat to produce one \u2014 the side panel will switch to the matching tab automatically."] })) : (filtered.map((d, idx) => (_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: 2,
-                                                    gap: 2,
-                                                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: d.filename ?? `${d.tab} output` }), _jsx(Label, { size: "small", variant: "secondary", children: d.tab })] }), d.tab === 'table' && _jsx(MarkdownTable, { source: d.payload }), d.tab === 'json' && (_jsx(Box, { as: "pre", sx: {
-                                                    bg: 'canvas.default',
-                                                    p: 2,
-                                                    borderRadius: 2,
-                                                    fontFamily: 'mono',
-                                                    fontSize: 0,
-                                                    maxHeight: 320,
-                                                    overflow: 'auto',
-                                                    whiteSpace: 'pre-wrap',
-                                                    m: 0,
-                                                }, children: (() => {
+                                }) }), _jsxs(Box, { p: 3, flex: 1, overflow: "auto", children: [_jsxs(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: [activeTab.charAt(0).toUpperCase() + activeTab.slice(1), " outputs"] }), filtered.length === 0 ? (_jsxs(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: ["No ", activeTab, " outputs yet. Use one of the openers in the chat to produce one \u2014 the side panel will switch to the matching tab automatically."] })) : (filtered.map((d, idx) => (_jsxs(Box, { p: 2, mb: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, gap: 2, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: d.filename ?? `${d.tab} output` }), _jsx(Label, { size: "small", variant: "secondary", children: d.tab })] }), d.tab === 'table' && _jsx(MarkdownTable, { source: d.payload }), d.tab === 'json' && (_jsx(Box, { as: "pre", bg: "canvas.default", p: 2, borderRadius: 2, fontFamily: "mono", fontSize: 0, maxHeight: 320, overflow: "auto", whiteSpace: "pre-wrap", m: 0, children: (() => {
                                                     try {
                                                         return JSON.stringify(JSON.parse(d.payload), null, 2);
                                                     }
                                                     catch {
                                                         return d.payload;
                                                     }
-                                                })() })), d.tab === 'chart' && _jsx(ChartView, { source: d.payload }), d.tab === 'files' && (_jsxs(_Fragment, { children: [_jsx(Box, { as: "pre", sx: {
-                                                            bg: 'canvas.default',
-                                                            p: 2,
-                                                            borderRadius: 2,
-                                                            fontFamily: 'mono',
-                                                            fontSize: 0,
-                                                            maxHeight: 200,
-                                                            overflow: 'auto',
-                                                            whiteSpace: 'pre-wrap',
-                                                            m: 0,
-                                                            mb: 2,
-                                                        }, children: d.payload }), _jsxs(Button, { size: "small", leadingVisual: DownloadIcon, onClick: () => download(d), children: ["Download ", d.filename ?? 'file'] })] }))] }, d.messageId + ':' + idx))))] })] })] })] }));
+                                                })() })), d.tab === 'chart' && _jsx(ChartView, { source: d.payload }), d.tab === 'files' && (_jsxs(_Fragment, { children: [_jsx(Box, { as: "pre", bg: "canvas.default", p: 2, borderRadius: 2, fontFamily: "mono", fontSize: 0, maxHeight: 200, overflow: "auto", whiteSpace: "pre-wrap", m: 0, mb: 2, children: d.payload }), _jsxs(Button, { size: "small", leadingVisual: DownloadIcon, onClick: () => download(d), children: ["Download ", d.filename ?? 'file'] })] }))] }, d.messageId + ':' + idx))))] })] })] })] }));
 };
 // ─── Sync token to core IAM store ──────────────────────────────────────────
 const syncTokenToIamStore = (token) => {

package/lib/examples/AgentParametersExample.js

@@ -176,44 +176,9 @@ const AgentParametersExample = () => {
     };
     const effectiveError = error || runtimeError;
     if (!agentId) {
-        return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
-                    maxWidth: 760,
-                    mx: 'auto',
-                    mt: 6,
-                    px: 3,
-                    py: 2,
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 2,
-                    bg: 'canvas.default',
-                }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "CONFIGURE AGENT" }), _jsx(Heading, { as: "h2", sx: { fontSize: 2 }, children: "Launch Parameterized Agent" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, maxWidth: 620 }, children: "Load the runtime schema directly from example-parameters, fill the generated form, then launch with validated parameters." }), _jsxs(Box, { sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 2,
-                            flexWrap: 'wrap',
-                        }, children: [_jsxs(Label, { variant: "accent", children: ["Spec: ", AGENTSPEC_ID] }), _jsx(Label, { variant: "secondary", children: "Transport: vercel-ai" })] }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [_jsx(Button, { variant: "primary", size: "small", type: "button", onClick: loadSchemaForm, disabled: isSchemaLoading, children: isSchemaLoading ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small" }), " Loading Schema..."] })) : ('Show Parameter Form') }), schema && (_jsx(Button, { variant: "invisible", size: "small", type: "button", onClick: () => {
+        return (_jsx(ThemedProvider, { children: _jsxs(Box, { maxWidth: 760, mx: "auto", mt: 6, px: 3, py: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, display: "flex", flexDirection: "column", gap: 2, bg: "canvas.default", children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold', color: 'fg.muted' }, children: "CONFIGURE AGENT" }), _jsx(Heading, { as: "h2", sx: { fontSize: 2 }, children: "Launch Parameterized Agent" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1, maxWidth: 620 }, children: "Load the runtime schema directly from example-parameters, fill the generated form, then launch with validated parameters." }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap", children: [_jsxs(Label, { variant: "accent", children: ["Spec: ", AGENTSPEC_ID] }), _jsx(Label, { variant: "secondary", children: "Transport: vercel-ai" })] }), _jsxs(Box, { display: "flex", gap: 2, flexWrap: "wrap", children: [_jsx(Button, { variant: "primary", size: "small", type: "button", onClick: loadSchemaForm, disabled: isSchemaLoading, children: isSchemaLoading ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small" }), " Loading Schema..."] })) : ('Show Parameter Form') }), schema && (_jsx(Button, { variant: "invisible", size: "small", type: "button", onClick: () => {
                                     setShowSchemaForm(v => !v);
-                                }, children: showSchemaForm ? 'Hide Form' : 'Show Form' }))] }), schema && (_jsxs(Box, { sx: {
-                            display: 'flex',
-                            gap: 2,
-                            flexWrap: 'wrap',
-                            alignItems: 'center',
-                            py: 2,
-                            px: 3,
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: 2,
-                            bg: 'canvas.default',
-                        }, children: [_jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Required fields:", ' ', Array.isArray(schema.required) ? schema.required.length : 0] }), _jsx(Label, { variant: hasRequired ? 'success' : 'attention', children: hasRequired ? 'Ready to launch' : 'Complete required fields' })] })), showSchemaForm && schema && (_jsx(Box, { sx: {
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                            borderRadius: 2,
-                            p: 2,
-                            bg: 'canvas.default',
-                        }, children: _jsx(Form, { schema: schema, formData: formData, uiSchema: { 'ui:submitButtonOptions': { norender: true } }, validator: validator, onChange: ({ formData: nextData }) => {
+                                }, children: showSchemaForm ? 'Hide Form' : 'Show Form' }))] }), schema && (_jsxs(Box, { display: "flex", gap: 2, flexWrap: "wrap", alignItems: "center", py: 2, px: 3, border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.default", children: [_jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Required fields:", ' ', Array.isArray(schema.required) ? schema.required.length : 0] }), _jsx(Label, { variant: hasRequired ? 'success' : 'attention', children: hasRequired ? 'Ready to launch' : 'Complete required fields' })] })), showSchemaForm && schema && (_jsx(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 2, bg: "canvas.default", children: _jsx(Form, { schema: schema, formData: formData, uiSchema: { 'ui:submitButtonOptions': { norender: true } }, validator: validator, onChange: ({ formData: nextData }) => {
                                 setFormTouched(true);
                                 setFormData(nextData ?? {});
                             }, onSubmit: (_, event) => {