@datalayer/agent-runtimes 1.3.88 → 1.3.90

package/lib/examples/AgentCompactionExample.js

@@ -40,33 +40,7 @@ const numberFmt = new Intl.NumberFormat();
 /** Live compaction status: spinner while running, details when complete. */
 const CompactionPanel = ({ maxTokens }) => {
     const compaction = useAgentRuntimeCompaction();
-    return (_jsxs(Box, { sx: {
-            p: 3,
-            borderBottom: '1px solid',
-            borderColor: 'border.default',
-        }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Compaction" }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 2 }, children: [_jsx(StackIcon, { size: 14 }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Budget: ", numberFmt.format(maxTokens), " tokens"] })] }), !compaction && (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "No compaction yet. Keep chatting \u2014 once the history exceeds the token budget, older messages are summarized automatically." })), compaction?.phase === 'start' && (_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    p: 2,
-                    border: '1px solid',
-                    borderColor: 'attention.emphasis',
-                    borderRadius: 2,
-                    bg: 'attention.subtle',
-                }, children: [_jsx(Spinner, { size: "small" }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: "Compacting\u2026" }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: ["Summarizing ", numberFmt.format(compaction.beforeMessages), " messages (~", numberFmt.format(compaction.beforeTokens), " tokens)"] })] })] })), compaction?.phase === 'end' && (_jsxs(Box, { sx: {
-                    p: 2,
-                    border: '1px solid',
-                    borderColor: compaction.reduced
-                        ? 'success.emphasis'
-                        : 'border.default',
-                    borderRadius: 2,
-                    bg: compaction.reduced ? 'success.subtle' : 'canvas.subtle',
-                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 2 }, children: [_jsx(CheckCircleIcon, { size: 14 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: compaction.reduced ? 'Compacted' : 'History already minimal' })] }), _jsxs(Box, { sx: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            gap: 1,
-                            fontSize: 0,
-                        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { sx: { color: 'fg.muted', minWidth: 64 }, children: "Tokens" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: numberFmt.format(compaction.beforeTokens) }), _jsx(ArrowRightIcon, { size: 12 }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: numberFmt.format(compaction.afterTokens ?? compaction.beforeTokens) })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { sx: { color: 'fg.muted', minWidth: 64 }, children: "Messages" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: numberFmt.format(compaction.beforeMessages) }), _jsx(ArrowRightIcon, { size: 12 }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: numberFmt.format(compaction.afterMessages ?? compaction.beforeMessages) })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(ClockIcon, { size: 12 }), _jsx(Text, { sx: { color: 'fg.muted', minWidth: 52 }, children: "Time" }), _jsxs(Text, { sx: { fontFamily: 'mono' }, children: [numberFmt.format(Math.round(compaction.durationMs ?? 0)), " ms"] })] }), typeof compaction.compactionCount === 'number' && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Text, { sx: { color: 'fg.muted', minWidth: 64 }, children: "Total runs" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: numberFmt.format(compaction.compactionCount) })] }))] })] }))] }));
+    return (_jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Compaction" }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [_jsx(StackIcon, { size: 14 }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Budget: ", numberFmt.format(maxTokens), " tokens"] })] }), !compaction && (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "No compaction yet. Keep chatting \u2014 once the history exceeds the token budget, older messages are summarized automatically." })), compaction?.phase === 'start' && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, p: 2, border: "1px solid", borderColor: "attention.emphasis", borderRadius: 2, bg: "attention.subtle", children: [_jsx(Spinner, { size: "small" }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: "Compacting\u2026" }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: ["Summarizing ", numberFmt.format(compaction.beforeMessages), " messages (~", numberFmt.format(compaction.beforeTokens), " tokens)"] })] })] })), compaction?.phase === 'end' && (_jsxs(Box, { p: 2, border: "1px solid", borderColor: compaction.reduced ? 'success.emphasis' : 'border.default', borderRadius: 2, bg: compaction.reduced ? 'success.subtle' : 'canvas.subtle', children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [_jsx(CheckCircleIcon, { size: 14 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: compaction.reduced ? 'Compacted' : 'History already minimal' })] }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, fontSize: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(Text, { sx: { color: 'fg.muted', minWidth: 64 }, children: "Tokens" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: numberFmt.format(compaction.beforeTokens) }), _jsx(ArrowRightIcon, { size: 12 }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: numberFmt.format(compaction.afterTokens ?? compaction.beforeTokens) })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(Text, { sx: { color: 'fg.muted', minWidth: 64 }, children: "Messages" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: numberFmt.format(compaction.beforeMessages) }), _jsx(ArrowRightIcon, { size: 12 }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: numberFmt.format(compaction.afterMessages ?? compaction.beforeMessages) })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(ClockIcon, { size: 12 }), _jsx(Text, { sx: { color: 'fg.muted', minWidth: 52 }, children: "Time" }), _jsxs(Text, { sx: { fontFamily: 'mono' }, children: [numberFmt.format(Math.round(compaction.durationMs ?? 0)), " ms"] })] }), typeof compaction.compactionCount === 'number' && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(Text, { sx: { color: 'fg.muted', minWidth: 64 }, children: "Total runs" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: numberFmt.format(compaction.compactionCount) })] }))] })] }))] }));
 };
 const AgentCompactionInner = () => {
     const agentName = useRef(uniqueAgentId(AGENT_NAME)).current;
@@ -81,48 +55,13 @@ const AgentCompactionInner = () => {
         : [createAgentCompactionPlugin(launchedMaxTokens)], [launchedMaxTokens]);
     // Setup phase: choose the compaction token budget before launching.
     if (launchedMaxTokens === null) {
-        return (_jsx(Box, { sx: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-                bg: 'canvas.default',
-            }, children: _jsxs(Box, { sx: {
-                    width: 460,
-                    maxWidth: '90%',
-                    p: 4,
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    bg: 'canvas.subtle',
-                }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mb: 2 }, children: [_jsx(HistoryIcon, { size: 20 }), _jsx(Heading, { as: "h3", sx: { fontSize: 3 }, children: "History Compaction" })] }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', mt: 0, mb: 3 }, children: "Set the context token budget before launching. When the conversation grows past this budget, older messages are summarized so the input stays within the limit. A lower budget triggers compaction sooner." }), _jsxs(FormControl, { children: [_jsxs(FormControl.Label, { children: ["Max context tokens: ", numberFmt.format(maxTokensInput)] }), _jsx(Box, { sx: { mt: 2 }, children: _jsx("input", { type: "range", min: MIN_MAX_TOKENS, max: tokenLimit, step: 500, value: maxTokensInput, onChange: e => setMaxTokensInput(Number(e.target.value)), style: { width: '100%' } }) }), _jsxs(FormControl.Caption, { children: ["Agentspec max: ", numberFmt.format(tokenLimit), " tokens (model limit)"] })] }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'flex-end', mt: 3 }, children: _jsx(Button, { variant: "primary", leadingVisual: HistoryIcon, "data-compaction-launch": true, onClick: () => {
+        return (_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", height: "100%", bg: "canvas.default", children: _jsxs(Box, { width: 460, maxWidth: "90%", p: 4, border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.subtle", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [_jsx(HistoryIcon, { size: 20 }), _jsx(Heading, { as: "h3", sx: { fontSize: 3 }, children: "History Compaction" })] }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', mt: 0, mb: 3 }, children: "Set the context token budget before launching. When the conversation grows past this budget, older messages are summarized so the input stays within the limit. A lower budget triggers compaction sooner." }), _jsxs(FormControl, { children: [_jsxs(FormControl.Label, { children: ["Max context tokens: ", numberFmt.format(maxTokensInput)] }), _jsx(Box, { mt: 2, children: _jsx("input", { type: "range", min: MIN_MAX_TOKENS, max: tokenLimit, step: 500, value: maxTokensInput, onChange: e => setMaxTokensInput(Number(e.target.value)), style: { width: '100%' } }) }), _jsxs(FormControl.Caption, { children: ["Agentspec max: ", numberFmt.format(tokenLimit), " tokens (model limit)"] })] }), _jsx(Box, { display: "flex", justifyContent: "flex-end", mt: 3, children: _jsx(Button, { variant: "primary", leadingVisual: HistoryIcon, "data-compaction-launch": true, onClick: () => {
                                 // Clear any prior compaction status from a previous stream.
                                 agentRuntimeStore.getState().setCompaction(null);
                                 setLaunchedMaxTokens(maxTokensInput);
                             }, children: "Launch agent" }) })] }) }));
     }
-    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(HistoryIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Compaction Demo" }), _jsx(Label, { variant: "accent", children: "local" }), _jsxs(Label, { variant: "accent", children: [numberFmt.format(launchedMaxTokens), " tok budget"] })] }), _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: plugins }, launchedMaxTokens) }), _jsxs(Box, { sx: {
-                            width: 320,
-                            borderLeft: '1px solid',
-                            borderColor: 'border.default',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            overflow: 'auto',
-                        }, children: [_jsx(CompactionPanel, { maxTokens: launchedMaxTokens }), _jsxs(Box, { sx: { p: 3 }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "How It Works" }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 2 }, children: ["Before each model request, the compaction capability estimates the history size. When it exceeds a fraction of the", ' ', numberFmt.format(launchedMaxTokens), "-token budget, older messages are replaced by an LLM-generated summary while recent messages are preserved."] }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 0 }, children: ["The budget is capped at the agentspec model's token limit (", numberFmt.format(tokenLimit), "). Lower it to trigger compaction with a shorter conversation."] })] })] })] })] }));
+    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(HistoryIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Compaction Demo" }), _jsx(Label, { variant: "accent", children: "local" }), _jsxs(Label, { variant: "accent", children: [numberFmt.format(launchedMaxTokens), " tok budget"] })] }), _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: plugins }, launchedMaxTokens) }), _jsxs(Box, { width: 320, borderLeft: "1px solid", borderColor: "border.default", display: "flex", flexDirection: "column", overflow: "auto", children: [_jsx(CompactionPanel, { maxTokens: launchedMaxTokens }), _jsxs(Box, { p: 3, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "How It Works" }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 2 }, children: ["Before each model request, the compaction capability estimates the history size. When it exceeds a fraction of the", ' ', numberFmt.format(launchedMaxTokens), "-token budget, older messages are replaced by an LLM-generated summary while recent messages are preserved."] }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 0 }, children: ["The budget is capped at the agentspec model's token limit (", numberFmt.format(tokenLimit), "). Lower it to trigger compaction with a shorter conversation."] })] })] })] })] }));
 };
 const AgentCompactionExample = () => (_jsx(ThemedProvider, { children: _jsx(AgentCompactionInner, {}) }));
 export default AgentCompactionExample;

package/lib/examples/AgentDecideExample.js

@@ -56,18 +56,6 @@ const AgentDecideExample = () => {
     // The Local agent is the application's: created under its id with its
     // spec, so that the server runs its instructions, its tool and its rule.
     const localAgent = useMemo(() => ({ createPayload: appDatalayerCreatePayload(app) }), [app]);
-    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
-                height: '100vh',
-                minHeight: 0,
-                display: 'flex',
-                bg: 'canvas.default',
-            }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0, minHeight: 0 }, children: _jsx(AppRenderer, { app: app, serverUrl: serverUrl, target: "local", localAgent: localAgent, plugins: plugins }) }), _jsxs(Box, { as: "aside", sx: {
-                        width: 320,
-                        flexShrink: 0,
-                        p: 3,
-                        borderLeft: '1px solid',
-                        borderColor: 'border.default',
-                        overflowY: 'auto',
-                    }, children: [_jsxs(Heading, { as: "h2", sx: { fontSize: 2, mb: 2 }, children: [app.emoji, " Decide"] }), _jsx(Text, { as: "p", sx: { fontSize: 1, mb: 2 }, children: "Typed decisions asked of Jev, the typed-decision model: yes or no with its probability, one of named options, or a score, each with its confidence." }), _jsxs(Text, { as: "p", sx: { fontSize: 1, mb: 2 }, children: [_jsx("strong", { children: "In the chat" }), ": ask \u201CIs this ticket urgent? \u2018Help! My payouts have been failing for 3 days.\u2019\u201D Its agent calls the ", _jsx("code", { children: "decide" }), " tool, a read it does without asking."] }), _jsxs(Text, { as: "p", sx: { fontSize: 1, mb: 2 }, children: [_jsx("strong", { children: "From the assistant" }), ": hover the character below and choose ", _jsx("em", { children: "Ask a decision" }), " \u2014 the situation, the question, and its type. The answer comes back in its balloon."] }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted' }, children: ["Runs on the local agent-runtimes server at ", serverUrl, ", which asks Jev through ai-inference."] })] })] }) }));
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { height: "100vh", minHeight: 0, display: "flex", bg: "canvas.default", children: [_jsx(Box, { flex: 1, minWidth: 0, minHeight: 0, children: _jsx(AppRenderer, { app: app, serverUrl: serverUrl, target: "local", localAgent: localAgent, plugins: plugins }) }), _jsxs(Box, { as: "aside", width: 320, flexShrink: 0, p: 3, borderLeft: "1px solid", borderColor: "border.default", overflowY: "auto", children: [_jsxs(Heading, { as: "h2", sx: { fontSize: 2, mb: 2 }, children: [app.emoji, " Decide"] }), _jsx(Text, { as: "p", sx: { fontSize: 1, mb: 2 }, children: "Typed decisions asked of Jev, the typed-decision model: yes or no with its probability, one of named options, or a score, each with its confidence." }), _jsxs(Text, { as: "p", sx: { fontSize: 1, mb: 2 }, children: [_jsx("strong", { children: "In the chat" }), ": ask \u201CIs this ticket urgent? \u2018Help! My payouts have been failing for 3 days.\u2019\u201D Its agent calls the ", _jsx("code", { children: "decide" }), " tool, a read it does without asking."] }), _jsxs(Text, { as: "p", sx: { fontSize: 1, mb: 2 }, children: [_jsx("strong", { children: "From the assistant" }), ": hover the character below and choose ", _jsx("em", { children: "Ask a decision" }), " \u2014 the situation, the question, and its type. The answer comes back in its balloon."] }), _jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted' }, children: ["Runs on the local agent-runtimes server at ", serverUrl, ", which asks Jev through ai-inference."] })] })] }) }));
 };
 export default AgentDecideExample;

package/lib/examples/AgentEvalsExample.js

@@ -342,14 +342,7 @@ const AgentEvalsInner = ({ onLogout, executionTarget }) => {
     // ── Loading / Error ───────────────────────────────────────────────────
     // Local: the Loop must mount to create the agent, so no waiting screen.
     if (executionTarget !== 'local' && !isAgentReady && agentStatus !== 'error') {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-                gap: 3,
-            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: agentStatus === 'launching'
+        return (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", gap: 3, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: agentStatus === 'launching'
                         ? 'Launching runtime for eval agent…'
                         : 'Creating eval example agent…' })] }));
     }
@@ -357,70 +350,22 @@ const AgentEvalsInner = ({ onLogout, executionTarget }) => {
         return _jsx(ErrorView, { error: effectiveError, onLogout: onLogout });
     }
     if (isBootstrapping) {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100%',
-                gap: 3,
-            }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Preparing hosted eval and experiment..." })] }));
+        return (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%", gap: 3, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Preparing hosted eval and experiment..." })] }));
     }
     const latestScore = evalRuns.length > 0 ? evalRuns[0].score : null;
     void latestScore;
-    return (_jsxs(Box, { sx: {
-            height: '100%',
-            minHeight: 0,
-            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(BeakerIcon, { size: 16 }), _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2 }, children: ["Evaluation \u2014 ", runtimeName] }), _jsxs(Text, { sx: {
+    return (_jsxs(Box, { height: "100%", minHeight: 0, 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(BeakerIcon, { size: 16 }), _jsxs(Box, { flex: 1, minWidth: 0, children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2 }, children: ["Evaluation \u2014 ", runtimeName] }), _jsxs(Text, { sx: {
                                     fontSize: 0,
                                     color: 'fg.muted',
                                     display: 'block',
                                     overflow: 'hidden',
                                     textOverflow: 'ellipsis',
                                     whiteSpace: 'nowrap',
-                                }, children: ["Runtime API: ", runtimeCreationBaseUrl, "/api/runtimes/v1/runtimes"] })] }), _jsxs(Label, { size: "small", variant: "accent", children: ["Target: ", runtimeTargetCapabilities(executionTarget).label] })] }), _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: LOOP_PLUGINS_AGENTEVA }) }), _jsxs(Box, { sx: {
-                            width: 350,
-                            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(BeakerIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Run Evaluation" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: "Execute the default evaluation suite and persist results to /api/ai-agents/v1/evals." }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: PlayIcon, onClick: handleRunEval, disabled: isRunning, sx: { width: '100%' }, children: isRunning ? 'Running…' : 'Run Eval Suite' }), flash && (_jsx(Flash, { variant: flash.toLowerCase().includes('failed') ? 'danger' : 'success', sx: { mt: 2, fontSize: 0 }, children: flash }))] }), _jsxs(Box, { sx: { p: 3, flex: 1, overflow: 'auto' }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Evaluation History" }), evalRuns.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "No evaluation runs recorded yet." })) : (evalRuns.slice(0, 20).map(run => (_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: 0, fontWeight: 'bold' }, children: run.suiteName }), _jsxs(Label, { variant: run.score >= 0.8
+                                }, children: ["Runtime API: ", runtimeCreationBaseUrl, "/api/runtimes/v1/runtimes"] })] }), _jsxs(Label, { size: "small", variant: "accent", children: ["Target: ", runtimeTargetCapabilities(executionTarget).label] })] }), _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: LOOP_PLUGINS_AGENTEVA }) }), _jsxs(Box, { width: 350, 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(BeakerIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Run Evaluation" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: "Execute the default evaluation suite and persist results to /api/ai-agents/v1/evals." }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: PlayIcon, onClick: handleRunEval, disabled: isRunning, sx: { width: '100%' }, children: isRunning ? 'Running…' : 'Run Eval Suite' }), flash && (_jsx(Flash, { variant: flash.toLowerCase().includes('failed') ? 'danger' : 'success', sx: { mt: 2, fontSize: 0 }, children: flash }))] }), _jsxs(Box, { p: 3, flex: 1, overflow: "auto", children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Evaluation History" }), evalRuns.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "No evaluation runs recorded yet." })) : (evalRuns.slice(0, 20).map(run => (_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: 0, fontWeight: 'bold' }, children: run.suiteName }), _jsxs(Label, { variant: run.score >= 0.8
                                                             ? 'success'
                                                             : run.score >= 0.5
                                                                 ? 'attention'
-                                                                : 'danger', size: "small", children: [(run.score * 100).toFixed(0), "%"] })] }), _jsx(ProgressBar, { progress: run.score * 100, sx: { mb: 1 } }), _jsxs(Box, { sx: {
-                                                    display: 'flex',
-                                                    justifyContent: 'space-between',
-                                                    fontSize: 0,
-                                                    color: 'fg.muted',
-                                                }, children: [_jsxs(Text, { children: [_jsx(CheckCircleIcon, { size: 12 }), " ", run.passed, " passed"] }), _jsxs(Text, { children: [_jsx(XCircleIcon, { size: 12 }), " ", run.failed, " failed"] }), _jsx(Text, { children: new Date(run.timestamp).toLocaleDateString() })] })] }, run.id))))] })] })] })] }));
+                                                                : 'danger', size: "small", children: [(run.score * 100).toFixed(0), "%"] })] }), _jsx(ProgressBar, { progress: run.score * 100, sx: { mb: 1 } }), _jsxs(Box, { display: "flex", justifyContent: "space-between", fontSize: 0, color: "fg.muted", children: [_jsxs(Text, { children: [_jsx(CheckCircleIcon, { size: 12 }), " ", run.passed, " passed"] }), _jsxs(Text, { children: [_jsx(XCircleIcon, { size: 12 }), " ", run.failed, " failed"] }), _jsx(Text, { children: new Date(run.timestamp).toLocaleDateString() })] })] }, run.id))))] })] })] })] }));
 };
 // ─── Sync token to core IAM store ──────────────────────────────────────────
 const syncTokenToIamStore = (token) => {

package/lib/examples/AgentGuardrailsExample.js

@@ -423,37 +423,13 @@ const AgentGuardrailsInner = ({ onLogout, }) => {
         : costPercent > 50
             ? 'attention.fg'
             : 'success.fg';
-    return (_jsxs(Box, { sx: {
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-        }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 3,
-                    px: 3,
-                    py: 2,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                    flexShrink: 0,
-                }, children: [isReconnectedAgent && (_jsx(Label, { variant: "secondary", size: "small", children: "Reconnected" })), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(ShieldCheckIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2 }, children: ["Guardrails Demo \u2014 ", runtimeName] })] }), _jsx(Label, { variant: wsState === 'connected' ? 'success' : 'secondary', children: wsState }), _jsxs(Box, { sx: { flex: 1, maxWidth: 300 }, children: [_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    justifyContent: 'space-between',
-                                    fontSize: 0,
-                                    mb: 1,
-                                }, children: [_jsxs(Text, { sx: { color: costColor, fontWeight: 'semibold' }, children: ["$", runCostUsd.toFixed(4)] }), _jsx(Text, { sx: { color: 'fg.muted' }, children: runBudgetUsd != null
+    return (_jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 3, px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, children: [isReconnectedAgent && (_jsx(Label, { variant: "secondary", size: "small", children: "Reconnected" })), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(ShieldCheckIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2 }, children: ["Guardrails Demo \u2014 ", runtimeName] })] }), _jsx(Label, { variant: wsState === 'connected' ? 'success' : 'secondary', children: wsState }), _jsxs(Box, { flex: 1, maxWidth: 300, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", fontSize: 0, mb: 1, children: [_jsxs(Text, { sx: { color: costColor, fontWeight: 'semibold' }, children: ["$", runCostUsd.toFixed(4)] }), _jsx(Text, { sx: { color: 'fg.muted' }, children: runBudgetUsd != null
                                             ? ` / $${runBudgetUsd.toFixed(2)} run budget`
-                                            : ' / no run budget' })] }), _jsxs(ProgressBar, { "aria-label": "Run budget usage", "aria-valuenow": Math.max(0, costPercent), sx: { height: 6 }, children: [_jsx(ProgressBar.Item, { progress: usageSafePercent, style: { backgroundColor: 'var(--bgColor-success-emphasis)' }, "aria-label": `Healthy usage ${usageSafePercent.toFixed(1)}%` }), _jsx(ProgressBar.Item, { progress: usageWatchPercent, style: { backgroundColor: 'var(--bgColor-accent-emphasis)' }, "aria-label": `Watch usage ${usageWatchPercent.toFixed(1)}%` }), _jsx(ProgressBar.Item, { progress: usageDangerPercent, style: { backgroundColor: 'var(--bgColor-danger-emphasis)' }, "aria-label": `Critical usage ${usageDangerPercent.toFixed(1)}%` })] }), _jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: 2,
-                                    flexWrap: 'wrap',
-                                    mt: 1,
-                                }, role: "presentation", children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(DotFillIcon, { size: 12, fill: "var(--bgColor-success-emphasis)" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "0-50%" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(DotFillIcon, { size: 12, fill: "var(--bgColor-accent-emphasis)" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "50-80%" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(DotFillIcon, { size: 12, fill: "var(--bgColor-danger-emphasis)" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "80-100%" })] }), overBudgetPercent > 0 && (_jsxs(Label, { variant: "danger", size: "small", children: ["+", overBudgetPercent.toFixed(1), "% over"] }))] })] }), _jsxs(Label, { variant: otelSampleTimestamp == null ? 'secondary' : 'success', children: ["OTEL ", otelSampleTimestamp == null ? 'waiting' : 'live'] }), cumulativeCostUsd != null && (_jsxs(Label, { variant: "secondary", children: ["Total $", cumulativeCostUsd.toFixed(4)] })), _jsxs(Label, { variant: "secondary", children: [totalTokens.toLocaleString(), " tokens"] })] }), isOverRunBudget && (_jsx(Flash, { variant: "danger", sx: { mx: 3, mt: 2 }, children: _jsxs(Text, { sx: { fontSize: 1 }, children: [_jsx("strong", { children: "Run budget exceeded." }), " Current run cost is $", runCostUsd.toFixed(4), " against a budget of $", runBudgetDisplayUsd, overBudgetAmountUsd > 0
+                                            : ' / no run budget' })] }), _jsxs(ProgressBar, { "aria-label": "Run budget usage", "aria-valuenow": Math.max(0, costPercent), sx: { height: 6 }, children: [_jsx(ProgressBar.Item, { progress: usageSafePercent, style: { backgroundColor: 'var(--bgColor-success-emphasis)' }, "aria-label": `Healthy usage ${usageSafePercent.toFixed(1)}%` }), _jsx(ProgressBar.Item, { progress: usageWatchPercent, style: { backgroundColor: 'var(--bgColor-accent-emphasis)' }, "aria-label": `Watch usage ${usageWatchPercent.toFixed(1)}%` }), _jsx(ProgressBar.Item, { progress: usageDangerPercent, style: { backgroundColor: 'var(--bgColor-danger-emphasis)' }, "aria-label": `Critical usage ${usageDangerPercent.toFixed(1)}%` })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap", mt: 1, role: "presentation", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(DotFillIcon, { size: 12, fill: "var(--bgColor-success-emphasis)" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "0-50%" })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(DotFillIcon, { size: 12, fill: "var(--bgColor-accent-emphasis)" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "50-80%" })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(DotFillIcon, { size: 12, fill: "var(--bgColor-danger-emphasis)" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "80-100%" })] }), overBudgetPercent > 0 && (_jsxs(Label, { variant: "danger", size: "small", children: ["+", overBudgetPercent.toFixed(1), "% over"] }))] })] }), _jsxs(Label, { variant: otelSampleTimestamp == null ? 'secondary' : 'success', children: ["OTEL ", otelSampleTimestamp == null ? 'waiting' : 'live'] }), cumulativeCostUsd != null && (_jsxs(Label, { variant: "secondary", children: ["Total $", cumulativeCostUsd.toFixed(4)] })), _jsxs(Label, { variant: "secondary", children: [totalTokens.toLocaleString(), " tokens"] })] }), isOverRunBudget && (_jsx(Flash, { variant: "danger", sx: { mx: 3, mt: 2 }, children: _jsxs(Text, { sx: { fontSize: 1 }, children: [_jsx("strong", { children: "Run budget exceeded." }), " Current run cost is $", runCostUsd.toFixed(4), " against a budget of $", runBudgetDisplayUsd, overBudgetAmountUsd > 0
                             ? ` (over by $${overBudgetAmountUsd.toFixed(4)}).`
-                            : '.', ' ', "Start a new run or increase the run budget before continuing."] }) })), approvals.map(req => (_jsx(Flash, { variant: "warning", sx: { mx: 3, mt: 2 }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(Text, { sx: { flex: 1, fontSize: 1 }, children: [_jsx("strong", { children: req.tool_name }), " requests approval", req.tool_args
+                            : '.', ' ', "Start a new run or increase the run budget before continuing."] }) })), approvals.map(req => (_jsx(Flash, { variant: "warning", sx: { mx: 3, mt: 2 }, children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsxs(Text, { sx: { flex: 1, fontSize: 1 }, children: [_jsx("strong", { children: req.tool_name }), " requests approval", req.tool_args
                                     ? ` — ${JSON.stringify(req.tool_args).slice(0, 120)}`
-                                    : ''] }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckIcon, onClick: () => handleApprove(req.id), disabled: approvalLoading === req.id, children: "Approve" }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: XIcon, onClick: () => handleReject(req.id), disabled: approvalLoading === req.id, children: "Reject" })] }) }, req.id))), _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: chatPlugins }) })] }));
+                                    : ''] }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckIcon, onClick: () => handleApprove(req.id), disabled: approvalLoading === req.id, children: "Approve" }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: XIcon, onClick: () => handleReject(req.id), disabled: approvalLoading === req.id, children: "Reject" })] }) }, req.id))), _jsx(Box, { flex: 1, minHeight: 0, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: chatPlugins }) })] }));
 };
 // ─── Sync token to core IAM store ──────────────────────────────────────────
 const syncTokenToIamStore = (token) => {

package/lib/examples/AgentHooksExample.js

@@ -27,7 +27,7 @@ const AgentHooksExample = () => {
     // Unique per mount, so two tabs do not fight over one server-side agent.
     const agentName = useMemo(() => uniqueAgentId(AGENT_NAME), []);
     const plugins = useMemo(() => [AgentHooksPlugin], []);
-    return (_jsx(ThemedProvider, { children: _jsx(Box, { sx: { height: '100vh', minHeight: 0 }, children: _jsx(LoopEmbed
+    return (_jsx(ThemedProvider, { children: _jsx(Box, { height: "100vh", minHeight: 0, children: _jsx(LoopEmbed
             // The examples Vite server has no /api proxy; the page origin would
             // send agent creation to port 3000 and fail loudly.
             , { 

package/lib/examples/AgentInferenceProviderExample.js

@@ -6,7 +6,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /// <reference types="vite/client" />
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { Button, Box, Heading, SegmentedControl, Spinner, Text, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Button, Heading, SegmentedControl, Spinner, Text, } from '@primer/react';
 import { ThemedProvider } from './utils/themedProvider';
 import { uniqueAgentId } from './utils/agentId';
 import { useExampleAgentRuntimesUrl } from './utils/useExampleAgentRuntimesUrl';
@@ -30,18 +31,7 @@ const stringifyPayload = (value) => {
         return String(value);
     }
 };
-const ProviderBadge = ({ provider, }) => (_jsx(Box, { sx: {
-        px: 2,
-        py: '2px',
-        borderRadius: 999,
-        border: '1px solid',
-        borderColor: 'border.default',
-        fontSize: 0,
-        color: 'fg.muted',
-        bg: 'canvas.default',
-        textTransform: 'uppercase',
-        letterSpacing: '0.03em',
-    }, children: provider }));
+const ProviderBadge = ({ provider, }) => (_jsx(Box, { px: 2, py: "2px", borderRadius: 999, border: "1px solid", borderColor: "border.default", fontSize: 0, color: "fg.muted", bg: "canvas.default", textTransform: "uppercase", letterSpacing: "0.03em", children: provider }));
 const AgentInferenceProviderExampleInner = () => {
     const { token } = useSimpleAuthStore();
     const [provider, setProvider] = useState('local');
@@ -187,88 +177,7 @@ const AgentInferenceProviderExampleInner = () => {
             return next;
         });
     }, []);
-    return (_jsx(ThemedProvider, { children: _jsxs(Box, { sx: {
-                height: '100%',
-                minHeight: 0,
-                width: '100%',
-                display: 'grid',
-                gridTemplateColumns: ['1fr', '1fr', 'minmax(680px, 1fr) 420px'],
-                gridTemplateRows: 'minmax(0, 1fr)',
-                overflow: 'hidden',
-                bg: 'canvas.default',
-            }, children: [_jsxs(Box, { sx: {
-                        height: '100%',
-                        borderRight: ['none', 'none', '1px solid'],
-                        borderColor: 'border.default',
-                        p: 3,
-                        display: 'flex',
-                        flexDirection: 'column',
-                        gap: 3,
-                        minHeight: 0,
-                        overflow: 'hidden',
-                    }, children: [_jsxs(Box, { sx: {
-                                display: 'flex',
-                                justifyContent: 'space-between',
-                                alignItems: 'center',
-                                flexWrap: 'wrap',
-                                gap: 2,
-                            }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 4, mb: 1 }, children: "Agent Inference Provider Example" }), _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Launches a local agent runtime from ", AGENTSPEC_ID, " and lets you switch between local and datalayer inference."] })] }), _jsx(ProviderBadge, { provider: provider })] }), _jsxs(SegmentedControl, { "aria-label": "Inference provider", fullWidth: true, children: [_jsx(SegmentedControl.Button, { selected: provider === 'local', onClick: () => onProviderChange('local'), children: "local" }), _jsx(SegmentedControl.Button, { selected: provider === 'datalayer', onClick: () => onProviderChange('datalayer'), children: "datalayer" })] }), _jsxs(Box, { sx: {
-                                display: 'flex',
-                                gap: 2,
-                                alignItems: 'center',
-                                flexWrap: 'wrap',
-                            }, children: [isLaunching ? _jsx(Spinner, { size: "small" }) : null, _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Runtime URL: ", baseUrl] }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Inference URL: ", inferenceUrl] }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Agent ID: ", agentId || 'launching...'] })] }), error ? (_jsx(Box, { sx: {
-                                p: 2,
-                                borderRadius: 2,
-                                border: '1px solid',
-                                borderColor: 'danger.emphasis',
-                                bg: 'danger.subtle',
-                                color: 'danger.fg',
-                                fontSize: 1,
-                            }, children: error })) : null, _jsx(Box, { sx: {
-                                flexGrow: 1,
-                                flexShrink: 1,
-                                flexBasis: 0,
-                                minHeight: 0,
-                                border: '1px solid',
-                                borderColor: 'border.default',
-                                borderRadius: 2,
-                                overflow: 'hidden',
-                                bg: 'canvas.default',
-                            }, children: agentId && !isLaunching ? (_jsx(LoopEmbed, { serverUrl: baseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: plugins }, agentId)) : (_jsxs(Box, { sx: {
-                                    height: '100%',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    gap: 2,
-                                    color: 'fg.muted',
-                                }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1 }, children: "Launching provider runtime\u2026" })] })) })] }), _jsxs(Box, { sx: {
-                        p: 3,
-                        display: ['none', 'none', 'flex'],
-                        flexDirection: 'column',
-                        gap: 2,
-                        minHeight: 0,
-                        overflow: 'hidden',
-                        bg: 'canvas.default',
-                    }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Provider Event Stream" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Low-level request/response events exchanged with the inference provider (newest first)." }), _jsx(Box, { sx: {
-                                flex: 1,
-                                minHeight: 0,
-                                overflowY: 'auto',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                gap: 2,
-                            }, children: providerEvents.length === 0 ? (_jsx(Box, { sx: {
-                                    border: '1px dashed',
-                                    borderColor: 'border.default',
-                                    borderRadius: 2,
-                                    p: 3,
-                                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No provider events yet." }) })) : (orderedProviderEvents.map(event => (_jsxs(Box, { sx: {
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    borderRadius: 2,
-                                    p: 2,
-                                    bg: 'canvas.default',
-                                }, children: [_jsx(Text, { sx: {
+    return (_jsx(ThemedProvider, { children: _jsxs(Box, { height: "100%", minHeight: 0, width: "100%", display: "grid", gridTemplateColumns: ['1fr', '1fr', 'minmax(680px, 1fr) 420px'], gridTemplateRows: "minmax(0, 1fr)", overflow: "hidden", bg: "canvas.default", children: [_jsxs(Box, { height: "100%", borderRight: ['none', 'none', '1px solid'], borderColor: "border.default", p: 3, display: "flex", flexDirection: "column", gap: 3, minHeight: 0, overflow: "hidden", children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 2, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 4, mb: 1 }, children: "Agent Inference Provider Example" }), _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: ["Launches a local agent runtime from ", AGENTSPEC_ID, " and lets you switch between local and datalayer inference."] })] }), _jsx(ProviderBadge, { provider: provider })] }), _jsxs(SegmentedControl, { "aria-label": "Inference provider", fullWidth: true, children: [_jsx(SegmentedControl.Button, { selected: provider === 'local', onClick: () => onProviderChange('local'), children: "local" }), _jsx(SegmentedControl.Button, { selected: provider === 'datalayer', onClick: () => onProviderChange('datalayer'), children: "datalayer" })] }), _jsxs(Box, { display: "flex", gap: 2, alignItems: "center", flexWrap: "wrap", children: [isLaunching ? _jsx(Spinner, { size: "small" }) : null, _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Runtime URL: ", baseUrl] }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Inference URL: ", inferenceUrl] }), _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Agent ID: ", agentId || 'launching...'] })] }), error ? (_jsx(Box, { p: 2, borderRadius: 2, border: "1px solid", borderColor: "danger.emphasis", bg: "danger.subtle", color: "danger.fg", fontSize: 1, children: error })) : null, _jsx(Box, { flexGrow: 1, flexShrink: 1, flexBasis: 0, minHeight: 0, border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", bg: "canvas.default", children: agentId && !isLaunching ? (_jsx(LoopEmbed, { serverUrl: baseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: plugins }, agentId)) : (_jsxs(Box, { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", gap: 2, color: "fg.muted", children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1 }, children: "Launching provider runtime\u2026" })] })) })] }), _jsxs(Box, { p: 3, display: ['none', 'none', 'flex'], flexDirection: "column", gap: 2, minHeight: 0, overflow: "hidden", bg: "canvas.default", children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Provider Event Stream" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Low-level request/response events exchanged with the inference provider (newest first)." }), _jsx(Box, { flex: 1, minHeight: 0, overflowY: "auto", display: "flex", flexDirection: "column", gap: 2, children: providerEvents.length === 0 ? (_jsx(Box, { border: "1px dashed", borderColor: "border.default", borderRadius: 2, p: 3, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "No provider events yet." }) })) : (orderedProviderEvents.map(event => (_jsxs(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 2, bg: "canvas.default", children: [_jsx(Text, { sx: {
                                             display: 'block',
                                             fontSize: 0,
                                             color: 'fg.muted',
@@ -284,7 +193,7 @@ const AgentInferenceProviderExampleInner = () => {
                                             color: 'fg.muted',
                                             fontSize: 0,
                                             mt: 1,
-                                        }, children: new Date(event.createdAt).toLocaleTimeString() }), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { size: "small", variant: "invisible", onClick: () => toggleEventExpanded(event.id), children: expandedEventIds.has(event.id)
+                                        }, children: new Date(event.createdAt).toLocaleTimeString() }), _jsx(Box, { mt: 2, children: _jsx(Button, { size: "small", variant: "invisible", onClick: () => toggleEventExpanded(event.id), children: expandedEventIds.has(event.id)
                                                 ? 'Hide details'
                                                 : 'Show details' }) }), expandedEventIds.has(event.id) ? (_jsx(Text, { as: "pre", sx: {
                                             mt: 2,

package/lib/examples/AgentMCPExample.js

@@ -41,29 +41,15 @@ const McpToolCard = ({ tool }) => {
     const schemaProps = tool.inputSchema
         ?.properties;
     const paramNames = schemaProps ? Object.keys(schemaProps) : [];
-    return (_jsxs(Box, { sx: {
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: 2,
-            p: 2,
-            mb: 2,
-            bg: 'canvas.default',
-        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [_jsx(ToolsIcon, { size: 14 }), _jsx(Text, { sx: { fontWeight: 600, fontSize: 1 }, children: tool.name })] }), tool.description && (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 1, mt: 0 }, children: tool.description })), _jsxs(Text, { sx: {
+    return (_jsxs(Box, { border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 2, mb: 2, bg: "canvas.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 1, children: [_jsx(ToolsIcon, { size: 14 }), _jsx(Text, { sx: { fontWeight: 600, fontSize: 1 }, children: tool.name })] }), tool.description && (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 1, mt: 0 }, children: tool.description })), _jsxs(Text, { sx: {
                     fontSize: 0,
                     fontFamily: 'mono',
                     color: 'fg.muted',
                     display: 'block',
-                }, children: ["server: ", tool.serverName] }), paramNames.length > 0 && (_jsx(Box, { sx: { mt: 1, display: 'flex', gap: 1, flexWrap: 'wrap' }, children: paramNames.map(p => (_jsx(PrimerToken, { text: p, size: "small" }, p))) }))] }));
+                }, children: ["server: ", tool.serverName] }), paramNames.length > 0 && (_jsx(Box, { mt: 1, display: "flex", gap: 1, flexWrap: "wrap", children: paramNames.map(p => (_jsx(PrimerToken, { text: p, size: "small" }, p))) }))] }));
 };
 /* ── Server status card ───────────────────────────────── */
-const McpServerCard = ({ server }) => (_jsxs(Box, { sx: {
-        p: 2,
-        mb: 2,
-        border: '1px solid',
-        borderColor: 'border.default',
-        borderRadius: 2,
-        bg: 'canvas.default',
-    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [server.emoji && _jsx(Text, { sx: { fontSize: 2 }, children: server.emoji }), _jsx(Text, { sx: { fontWeight: 600, fontSize: 1 }, children: server.name }), _jsx(Label, { size: "small", variant: server.status === 'started' ? 'success' : 'secondary', children: server.status })] }), server.description && (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 1 }, children: server.description })), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [server.toolsCount, " tool", server.toolsCount !== 1 ? 's' : '', " available"] })] }));
+const McpServerCard = ({ server }) => (_jsxs(Box, { p: 2, mb: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 1, children: [server.emoji && _jsx(Text, { sx: { fontSize: 2 }, children: server.emoji }), _jsx(Text, { sx: { fontWeight: 600, fontSize: 1 }, children: server.name }), _jsx(Label, { size: "small", variant: server.status === 'started' ? 'success' : 'secondary', children: server.status })] }), server.description && (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 1 }, children: server.description })), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [server.toolsCount, " tool", server.toolsCount !== 1 ? 's' : '', " available"] })] }));
 const McpStatusPanel = ({ data }) => {
     const servers = data?.servers ?? [];
     const aggregate = deriveAggregate(servers);
@@ -71,43 +57,10 @@ const McpStatusPanel = ({ data }) => {
         return (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Waiting for websocket snapshot..." }));
     }
     if (aggregate === 'none') {
-        return (_jsxs(Box, { sx: {
-                p: 2,
-                border: '1px solid',
-                borderColor: 'border.default',
-                borderRadius: 2,
-                display: 'flex',
-                alignItems: 'center',
-                gap: 2,
-            }, children: [_jsx(ServerIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No MCP server is defined for this agent." })] }));
+        return (_jsxs(Box, { p: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, display: "flex", alignItems: "center", gap: 2, children: [_jsx(ServerIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No MCP server is defined for this agent." })] }));
     }
-    return (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                }, children: [_jsx(Box, { as: "span", sx: {
-                            display: 'inline-block',
-                            width: 10,
-                            height: 10,
-                            borderRadius: '50%',
-                            bg: MCP_STATUS_COLORS[aggregate],
-                            flexShrink: 0,
-                        } }), _jsx(Text, { sx: { fontSize: 1 }, children: MCP_STATUS_LABELS[aggregate] })] }), servers.map(s => (_jsx(Box, { sx: {
-                    p: 2,
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                }, children: _jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [s.status === 'started' ? (_jsx(CheckCircleIcon, { size: 14, fill: "success.fg" })) : s.status === 'failed' ? (_jsx(XCircleIcon, { size: 14, fill: "danger.fg" })) : (_jsx(Box, { as: "span", sx: {
-                                        width: 8,
-                                        height: 8,
-                                        borderRadius: '50%',
-                                        bg: MCP_STATUS_COLORS[s.status] ??
-                                            MCP_STATUS_COLORS.not_started,
-                                        display: 'inline-block',
-                                    } })), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: s.id })] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [s.status, s.status === 'started' && s.tools_count !== undefined
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Box, { as: "span", display: "inline-block", width: 10, height: 10, borderRadius: "50%", bg: MCP_STATUS_COLORS[aggregate], flexShrink: 0 }), _jsx(Text, { sx: { fontSize: 1 }, children: MCP_STATUS_LABELS[aggregate] })] }), servers.map(s => (_jsx(Box, { p: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, display: "flex", alignItems: "center", gap: 2, children: _jsxs(Box, { flex: 1, minWidth: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [s.status === 'started' ? (_jsx(CheckCircleIcon, { size: 14, fill: "success.fg" })) : s.status === 'failed' ? (_jsx(XCircleIcon, { size: 14, fill: "danger.fg" })) : (_jsx(Box, { as: "span", width: 8, height: 8, borderRadius: "50%", bg: MCP_STATUS_COLORS[s.status] ??
+                                        MCP_STATUS_COLORS.not_started, display: "inline-block" })), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: s.id })] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [s.status, s.status === 'started' && s.tools_count !== undefined
                                     ? ` · ${s.tools_count} tool${s.tools_count !== 1 ? 's' : ''}`
                                     : '', s.status === 'failed' && s.error ? ` — ${s.error}` : ''] })] }) }, s.id)))] }));
 };
@@ -350,58 +303,7 @@ const AgentMCPInner = ({ onLogout }) => {
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
-    return (_jsxs(Box, { sx: {
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-        }, children: [isReconnectedAgent && (_jsx(Box, { sx: {
-                    px: 3,
-                    py: 1,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                }, children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running - reconnected." }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: chatPlugins }) }), _jsxs(Box, { sx: {
-                            width: 320,
-                            minWidth: 260,
-                            borderLeft: '1px solid',
-                            borderColor: 'border.default',
-                            display: 'flex',
-                            flexDirection: 'column',
-                            minHeight: 0,
-                            bg: 'canvas.default',
-                        }, children: [_jsxs(Box, { sx: {
-                                    p: 2,
-                                    borderBottom: '1px solid',
-                                    borderColor: 'border.default',
-                                }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 1 }, children: _jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(ServerIcon, { size: 16 }), "MCP Servers & Tools"] }) }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { as: "span", sx: {
-                                                    display: 'inline-block',
-                                                    width: 8,
-                                                    height: 8,
-                                                    borderRadius: '50%',
-                                                    bg: MCP_STATUS_COLORS[aggregate],
-                                                    flexShrink: 0,
-                                                } }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [MCP_STATUS_LABELS[aggregate], " \u00B7 ", totalTools, " tool", totalTools !== 1 ? 's' : ''] })] })] }), _jsxs(Box, { sx: { p: 2, overflow: 'auto', flex: 1 }, children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsx(Heading, { as: "h5", sx: { fontSize: 1, mb: 2 }, children: "MCP Servers" }), _jsx(McpStatusPanel, { data: mcpStatusData })] }), mcpServers.length === 0 ? (_jsxs(Box, { sx: {
-                                            display: 'flex',
-                                            flexDirection: 'column',
-                                            alignItems: 'center',
-                                            gap: 2,
-                                            py: 4,
-                                        }, children: [_jsx(Spinner, { size: "medium" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Waiting for MCP servers to start..." })] })) : (_jsxs(_Fragment, { children: [mcpServers.map(server => (_jsxs(Box, { children: [_jsx(McpServerCard, { server: server }), server.tools.length > 0 && (_jsx(Box, { sx: { pl: 2 }, children: server.tools.map(tool => (_jsx(McpToolCard, { tool: tool }, `${tool.serverId}-${tool.name}`))) }))] }, server.id))), _jsxs(Box, { sx: {
-                                                    mt: 3,
-                                                    p: 2,
-                                                    borderRadius: 2,
-                                                    bg: 'canvas.default',
-                                                    border: '1px solid',
-                                                    borderColor: 'border.muted',
-                                                }, children: [_jsx(Heading, { as: "h5", sx: { fontSize: 0, mb: 1 }, children: "MCP (Model Context Protocol)" }), _jsxs(Box, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsxs(Box, { sx: {
-                                                                    display: 'flex',
-                                                                    alignItems: 'center',
-                                                                    gap: 1,
-                                                                    mb: 1,
-                                                                }, children: [_jsx(GlobeIcon, { size: 12 }), _jsxs(Text, { children: [_jsx("strong", { children: "Servers:" }), " Discover and start MCP servers that expose tools to the agent"] })] }), _jsxs(Box, { sx: {
-                                                                    display: 'flex',
-                                                                    alignItems: 'center',
-                                                                    gap: 1,
-                                                                }, children: [_jsx(ToolsIcon, { size: 12 }), _jsxs(Text, { children: [_jsx("strong", { children: "Tools:" }), " Individual capabilities exposed by each server (search, fetch, etc.)"] })] })] })] })] }))] })] })] })] }));
+    return (_jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", children: [isReconnectedAgent && (_jsx(Box, { px: 3, py: 1, borderBottom: "1px solid", borderColor: "border.default", children: _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Agent already running - reconnected." }) })), _jsxs(Box, { 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: chatPlugins }) }), _jsxs(Box, { width: 320, minWidth: 260, borderLeft: "1px solid", borderColor: "border.default", display: "flex", flexDirection: "column", minHeight: 0, bg: "canvas.default", children: [_jsxs(Box, { p: 2, borderBottom: "1px solid", borderColor: "border.default", children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 1 }, children: _jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, children: [_jsx(ServerIcon, { size: 16 }), "MCP Servers & Tools"] }) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Box, { as: "span", display: "inline-block", width: 8, height: 8, borderRadius: "50%", bg: MCP_STATUS_COLORS[aggregate], flexShrink: 0 }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [MCP_STATUS_LABELS[aggregate], " \u00B7 ", totalTools, " tool", totalTools !== 1 ? 's' : ''] })] })] }), _jsxs(Box, { p: 2, overflow: "auto", flex: 1, children: [_jsxs(Box, { mb: 3, children: [_jsx(Heading, { as: "h5", sx: { fontSize: 1, mb: 2 }, children: "MCP Servers" }), _jsx(McpStatusPanel, { data: mcpStatusData })] }), mcpServers.length === 0 ? (_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 2, py: 4, children: [_jsx(Spinner, { size: "medium" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Waiting for MCP servers to start..." })] })) : (_jsxs(_Fragment, { children: [mcpServers.map(server => (_jsxs(Box, { children: [_jsx(McpServerCard, { server: server }), server.tools.length > 0 && (_jsx(Box, { pl: 2, children: server.tools.map(tool => (_jsx(McpToolCard, { tool: tool }, `${tool.serverId}-${tool.name}`))) }))] }, server.id))), _jsxs(Box, { mt: 3, p: 2, borderRadius: 2, bg: "canvas.default", border: "1px solid", borderColor: "border.muted", children: [_jsx(Heading, { as: "h5", sx: { fontSize: 0, mb: 1 }, children: "MCP (Model Context Protocol)" }), _jsxs(Box, { fontSize: 0, color: "fg.muted", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 1, children: [_jsx(GlobeIcon, { size: 12 }), _jsxs(Text, { children: [_jsx("strong", { children: "Servers:" }), " Discover and start MCP servers that expose tools to the agent"] })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(ToolsIcon, { size: 12 }), _jsxs(Text, { children: [_jsx("strong", { children: "Tools:" }), " Individual capabilities exposed by each server (search, fetch, etc.)"] })] })] })] })] }))] })] })] })] }));
 };
 const syncTokenToIamStore = (token) => {
     import('../state/substates').then(({ iamStore }) => {