@datalayer/agent-runtimes 1.3.89 → 1.3.91

package/lib/examples/AgentTriggersExample.js

@@ -786,14 +786,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
     }, [agentBaseUrl, agentId, streamRunMessages, ensureRuntimeReady]);
     // ── Loading / Error ──────────────────────────────────────────────────────
     if (runtimeStatus === 'launching') {
-        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: "Launching runtime for trigger agent..." })] }));
+        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: "Launching runtime for trigger agent..." })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
@@ -805,20 +798,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
             margin: 0,
             padding: 0,
             minWidth: 0,
-        }, children: _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(ClockIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Triggers \u2014 ", agentId] }), !isReady && (_jsx(Button, { size: "small", variant: "primary", onClick: () => void createAgent(), children: "Start Runtime" })), _jsxs(Label, { variant: aiAgentsConnectionState === 'connected' ? 'success' : 'secondary', children: ["Approvals WS: ", aiAgentsConnectionState] })] }), _jsx(ToolApprovalBanner, { pendingApprovals: pendingApprovals, onReview: approval => {
+        }, children: _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(ClockIcon, { size: 16 }), _jsxs(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: ["Triggers \u2014 ", agentId] }), !isReady && (_jsx(Button, { size: "small", variant: "primary", onClick: () => void createAgent(), children: "Start Runtime" })), _jsxs(Label, { variant: aiAgentsConnectionState === 'connected' ? 'success' : 'secondary', children: ["Approvals WS: ", aiAgentsConnectionState] })] }), _jsx(ToolApprovalBanner, { pendingApprovals: pendingApprovals, onReview: approval => {
                         const req = approvals.find(a => a.id === approval.id) || null;
                         setActiveApproval(req);
                     }, onApproveAll: async () => {
@@ -839,25 +819,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                 setActiveApproval(null);
                             }
                         }
-                    }, onClose: () => setActiveApproval(null) }), approvalError && (_jsx(Box, { sx: { px: 3, py: 1 }, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 0 }, children: approvalError }) })), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: isReady ? (_jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: LOOP_PLUGINS_AGENTTRI })) : (_jsx(Box, { sx: {
-                                    height: '100%',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    p: 4,
-                                }, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "Runtime is not started yet. Use Start Runtime or launch a trigger to start it." }) })) }), _jsxs(Box, { sx: {
-                                width: 380,
-                                borderLeft: '1px solid',
-                                borderColor: 'border.default',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                overflow: 'auto',
-                            }, children: [_jsx(Box, { sx: {
-                                        display: 'flex',
-                                        borderBottom: '1px solid',
-                                        borderColor: 'border.default',
-                                        flexShrink: 0,
-                                    }, children: [
+                    }, onClose: () => setActiveApproval(null) }), approvalError && (_jsx(Box, { px: 3, py: 1, children: _jsx(Text, { sx: { color: 'danger.fg', fontSize: 0 }, children: approvalError }) })), _jsxs(Box, { flex: 1, minHeight: 0, display: "flex", children: [_jsx(Box, { flex: 1, minWidth: 0, children: isReady ? (_jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: LOOP_PLUGINS_AGENTTRI })) : (_jsx(Box, { height: "100%", display: "flex", alignItems: "center", justifyContent: "center", p: 4, children: _jsx(Text, { sx: { color: 'fg.muted' }, children: "Runtime is not started yet. Use Start Runtime or launch a trigger to start it." }) })) }), _jsxs(Box, { width: 380, borderLeft: "1px solid", borderColor: "border.default", display: "flex", flexDirection: "column", overflow: "auto", children: [_jsx(Box, { display: "flex", borderBottom: "1px solid", borderColor: "border.default", flexShrink: 0, children: [
                                         { key: 'once', icon: ZapIcon, label: 'Once' },
                                         { key: 'cron', icon: ClockIcon, label: 'Cron' },
                                         {
@@ -879,20 +841,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                                 : '2px solid transparent',
                                             borderColor: activeTab === t.key ? 'accent.fg' : 'transparent',
                                             fontWeight: activeTab === t.key ? 'bold' : 'normal',
-                                        }, children: t.label }, t.key))) }), activeTab === 'once' && (_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(ZapIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Once Trigger" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: "Launch a single streaming run for the once-trigger prompt and watch tool calls, tool results, and assistant text update in real time." }), _jsxs(Box, { sx: {
-                                                bg: 'canvas.default',
-                                                border: '1px solid',
-                                                borderColor: 'border.default',
-                                                borderRadius: 2,
-                                                p: 2,
-                                                mb: 2,
-                                                display: 'grid',
-                                                gap: 1,
-                                            }, children: [_jsxs(Text, { sx: { fontSize: 0 }, children: [_jsx("strong", { children: "Agent ID:" }), " ", agentId] }), _jsxs(Text, { sx: { fontSize: 0 }, children: [_jsx("strong", { children: "Base URL:" }), " ", agentBaseUrl] }), lastOnceStartedAt && (_jsxs(Text, { sx: { fontSize: 0 }, children: [_jsx("strong", { children: "Last once launch:" }), ' ', new Date(lastOnceStartedAt).toLocaleString()] }))] }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: ZapIcon, onClick: handleLaunchOnce, disabled: isLaunchingOnce, sx: { width: '100%' }, children: isLaunchingOnce ? 'Launching…' : 'Launch Once' }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: ZapIcon, onClick: handleLaunchOnceApproval, disabled: isLaunchingApproval, sx: { width: '100%', mt: 2 }, children: isLaunchingApproval
+                                        }, children: t.label }, t.key))) }), activeTab === 'once' && (_jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 2, children: [_jsx(ZapIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Once Trigger" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: "Launch a single streaming run for the once-trigger prompt and watch tool calls, tool results, and assistant text update in real time." }), _jsxs(Box, { bg: "canvas.default", border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 2, mb: 2, display: "grid", gap: 1, children: [_jsxs(Text, { sx: { fontSize: 0 }, children: [_jsx("strong", { children: "Agent ID:" }), " ", agentId] }), _jsxs(Text, { sx: { fontSize: 0 }, children: [_jsx("strong", { children: "Base URL:" }), " ", agentBaseUrl] }), lastOnceStartedAt && (_jsxs(Text, { sx: { fontSize: 0 }, children: [_jsx("strong", { children: "Last once launch:" }), ' ', new Date(lastOnceStartedAt).toLocaleString()] }))] }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: ZapIcon, onClick: handleLaunchOnce, disabled: isLaunchingOnce, sx: { width: '100%' }, children: isLaunchingOnce ? 'Launching…' : 'Launch Once' }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: ZapIcon, onClick: handleLaunchOnceApproval, disabled: isLaunchingApproval, sx: { width: '100%', mt: 2 }, children: isLaunchingApproval
                                                 ? 'Launching…'
                                                 : 'Launch Once with Approval' }), onceFlash && (_jsx(Flash, { variant: onceFlash.includes('launched') ? 'success' : 'danger', sx: { mt: 2, fontSize: 0 }, children: onceFlash })), approvalFlash && (_jsx(Flash, { variant: approvalFlash.includes('launched') ? 'success' : 'danger', sx: { mt: 2, fontSize: 0 }, children: approvalFlash })), hasTriggeredOnce && (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 2 }, children: "Generated Output" }), (() => {
                                                     const outputEvent = lastOnceStartedAt
@@ -907,12 +856,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                                         !isLaunchingOnce &&
                                                         streamedOnceOutput !== null;
                                                     if (!outputEvent && !hasStreamFallback) {
-                                                        return (_jsxs(Box, { sx: {
-                                                                display: 'flex',
-                                                                alignItems: 'center',
-                                                                gap: 2,
-                                                                mb: 2,
-                                                            }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Waiting for agent output\u2026" })] }));
+                                                        return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Waiting for agent output\u2026" })] }));
                                                     }
                                                     const p = outputEvent?.payload;
                                                     const outputText = outputEvent
@@ -932,38 +876,18 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                                     const endedAt = outputEvent
                                                         ? p?.ended_at
                                                         : streamedOnceEndedAt;
-                                                    return (_jsxs(Box, { sx: {
-                                                            mb: 2,
-                                                            border: '1px solid',
-                                                            borderColor: exitStatus === 'error'
-                                                                ? 'danger.muted'
-                                                                : 'success.muted',
-                                                            borderRadius: 2,
-                                                            overflow: 'hidden',
-                                                        }, children: [_jsxs(Box, { sx: {
-                                                                    display: 'flex',
-                                                                    alignItems: 'center',
-                                                                    gap: 1,
-                                                                    px: 2,
-                                                                    py: 1,
-                                                                    bg: exitStatus === 'error'
-                                                                        ? 'danger.subtle'
-                                                                        : 'success.subtle',
-                                                                    borderBottom: '1px solid',
-                                                                    borderColor: exitStatus === 'error'
-                                                                        ? 'danger.muted'
-                                                                        : 'success.muted',
-                                                                }, children: [_jsx(Label, { variant: exitStatus === 'error' ? 'danger' : 'success', size: "small", children: exitStatus ?? 'completed' }), durationMs != null && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [(Number(durationMs) / 1000).toFixed(1), "s"] })), endedAt && (_jsx(Text, { sx: {
+                                                    return (_jsxs(Box, { mb: 2, border: "1px solid", borderColor: exitStatus === 'error'
+                                                            ? 'danger.muted'
+                                                            : 'success.muted', borderRadius: 2, overflow: "hidden", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, px: 2, py: 1, bg: exitStatus === 'error'
+                                                                    ? 'danger.subtle'
+                                                                    : 'success.subtle', borderBottom: "1px solid", borderColor: exitStatus === 'error'
+                                                                    ? 'danger.muted'
+                                                                    : 'success.muted', children: [_jsx(Label, { variant: exitStatus === 'error' ? 'danger' : 'success', size: "small", children: exitStatus ?? 'completed' }), durationMs != null && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [(Number(durationMs) / 1000).toFixed(1), "s"] })), endedAt && (_jsx(Text, { sx: {
                                                                             fontSize: 0,
                                                                             color: 'fg.muted',
                                                                             ml: 'auto',
                                                                             whiteSpace: 'nowrap',
-                                                                        }, children: new Date(endedAt).toLocaleString() })), _jsx(Button, { size: "small", variant: "invisible", sx: { p: 1 }, onClick: () => navigator.clipboard.writeText(outputText), children: _jsx(CopyIcon, { size: 12 }) })] }), _jsx(Box, { sx: {
-                                                                    p: 2,
-                                                                    bg: 'canvas.default',
-                                                                    maxHeight: 300,
-                                                                    overflow: 'auto',
-                                                                }, children: _jsx(Text, { sx: {
+                                                                        }, children: new Date(endedAt).toLocaleString() })), _jsx(Button, { size: "small", variant: "invisible", sx: { p: 1 }, onClick: () => navigator.clipboard.writeText(outputText), children: _jsx(CopyIcon, { size: 12 }) })] }), _jsx(Box, { p: 2, bg: "canvas.default", maxHeight: 300, overflow: "auto", children: _jsx(Text, { sx: {
                                                                         fontSize: 0,
                                                                         color: 'fg.default',
                                                                         display: 'block',
@@ -979,22 +903,12 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                                                 minWidth: 14,
                                                                 minHeight: 14,
                                                             } }))] }), sidebarMessagesError ? (_jsx(Flash, { variant: "danger", sx: { fontSize: 0, mb: 2 }, children: sidebarMessagesError })) : sidebarMessages.filter(msg => msg.role !== 'user')
-                                                    .length === 0 ? (_jsxs(Box, { sx: {
-                                                        display: 'flex',
-                                                        alignItems: 'center',
-                                                        gap: 2,
-                                                        mb: 2,
-                                                    }, children: [_jsx(Spinner, { size: "small", sx: {
+                                                    .length === 0 ? (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [_jsx(Spinner, { size: "small", sx: {
                                                                 width: 16,
                                                                 height: 16,
                                                                 minWidth: 16,
                                                                 minHeight: 16,
-                                                            } }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Waiting for streaming messages\u2026" })] })) : (_jsx(Box, { sx: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        gap: 2,
-                                                        mb: 2,
-                                                    }, children: sidebarMessages
+                                                            } }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Waiting for streaming messages\u2026" })] })) : (_jsx(Box, { display: "flex", flexDirection: "column", gap: 2, mb: 2, children: sidebarMessages
                                                         .slice()
                                                         .filter(msg => msg.role !== 'user')
                                                         .sort((a, b) => {
@@ -1011,18 +925,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                                         const content = typeof msg.content === 'string'
                                                             ? msg.content
                                                             : JSON.stringify(msg.content);
-                                                        return (_jsxs(Box, { sx: {
-                                                                p: 2,
-                                                                bg: 'canvas.default',
-                                                                borderRadius: 2,
-                                                                border: '1px solid',
-                                                                borderColor: 'border.default',
-                                                            }, children: [_jsxs(Box, { sx: {
-                                                                        display: 'flex',
-                                                                        alignItems: 'center',
-                                                                        gap: 1,
-                                                                        mb: 1,
-                                                                    }, children: [_jsx(Label, { size: "small", variant: msg.role === 'assistant'
+                                                        return (_jsxs(Box, { p: 2, bg: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 1, children: [_jsx(Label, { size: "small", variant: msg.role === 'assistant'
                                                                                 ? 'accent'
                                                                                 : msg.role === 'tool'
                                                                                     ? 'success'
@@ -1040,18 +943,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                                                     }, children: content.length > 320
                                                                         ? `${content.slice(0, 320)}…`
                                                                         : content })] }, `once-msg-${msg.id}`));
-                                                    }) }))] })), hasTriggeredApproval && approvals.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 2 }, children: "Pending Tool Approvals" }), _jsx(Box, { sx: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        gap: 2,
-                                                        mb: 2,
-                                                    }, children: approvals.map(a => (_jsxs(Box, { sx: {
-                                                            p: 2,
-                                                            border: '1px solid',
-                                                            borderColor: 'attention.muted',
-                                                            borderRadius: 2,
-                                                            bg: 'attention.subtle',
-                                                        }, children: [_jsxs(Text, { sx: {
+                                                    }) }))] })), hasTriggeredApproval && approvals.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 2 }, children: "Pending Tool Approvals" }), _jsx(Box, { display: "flex", flexDirection: "column", gap: 2, mb: 2, children: approvals.map(a => (_jsxs(Box, { p: 2, border: "1px solid", borderColor: "attention.muted", borderRadius: 2, bg: "attention.subtle", children: [_jsxs(Text, { sx: {
                                                                     fontWeight: 600,
                                                                     fontSize: 1,
                                                                     display: 'block',
@@ -1062,7 +954,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                                                     display: 'block',
                                                                     mb: 2,
                                                                     fontFamily: 'mono',
-                                                                }, children: JSON.stringify(a.tool_args) })), _jsxs(Box, { sx: { display: 'flex', gap: 1 }, children: [_jsx(Button, { size: "small", variant: "primary", onClick: () => void handleApprove(a.id), disabled: approvalLoading === a.id, children: approvalLoading === a.id
+                                                                }, children: JSON.stringify(a.tool_args) })), _jsxs(Box, { display: "flex", gap: 1, children: [_jsx(Button, { size: "small", variant: "primary", onClick: () => void handleApprove(a.id), disabled: approvalLoading === a.id, children: approvalLoading === a.id
                                                                             ? 'Approving…'
                                                                             : 'Approve' }), _jsx(Button, { size: "small", variant: "danger", onClick: () => void handleReject(a.id, 'Rejected from trigger panel'), disabled: approvalLoading === a.id, children: "Reject" })] })] }, a.id))) })] })), hasTriggeredApproval && (_jsxs(_Fragment, { children: [_jsxs(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 2 }, children: ["Approval Agent Messages", isLaunchingApproval && (_jsx(Spinner, { size: "small", sx: {
                                                                 ml: 2,
@@ -1084,12 +976,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                                                 return tb - ta;
                                                             })[0];
                                                             if (!latestAssistantOutput) {
-                                                                return (_jsxs(Box, { sx: {
-                                                                        display: 'flex',
-                                                                        alignItems: 'center',
-                                                                        gap: 2,
-                                                                        mb: 2,
-                                                                    }, children: [_jsx(Spinner, { size: "small", sx: {
+                                                                return (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [_jsx(Spinner, { size: "small", sx: {
                                                                                 width: 16,
                                                                                 height: 16,
                                                                                 minWidth: 16,
@@ -1099,32 +986,12 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                                             const outputText = typeof latestAssistantOutput.content === 'string'
                                                                 ? latestAssistantOutput.content
                                                                 : JSON.stringify(latestAssistantOutput.content);
-                                                            return (_jsxs(Box, { sx: {
-                                                                    mb: 2,
-                                                                    border: '1px solid',
-                                                                    borderColor: 'success.muted',
-                                                                    borderRadius: 2,
-                                                                    overflow: 'hidden',
-                                                                }, children: [_jsxs(Box, { sx: {
-                                                                            display: 'flex',
-                                                                            alignItems: 'center',
-                                                                            gap: 1,
-                                                                            px: 2,
-                                                                            py: 1,
-                                                                            bg: 'success.subtle',
-                                                                            borderBottom: '1px solid',
-                                                                            borderColor: 'success.muted',
-                                                                        }, children: [_jsx(Label, { variant: "success", size: "small", children: "completed" }), latestAssistantOutput.createdAt && (_jsx(Text, { sx: {
+                                                            return (_jsxs(Box, { mb: 2, border: "1px solid", borderColor: "success.muted", borderRadius: 2, overflow: "hidden", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, px: 2, py: 1, bg: "success.subtle", borderBottom: "1px solid", borderColor: "success.muted", children: [_jsx(Label, { variant: "success", size: "small", children: "completed" }), latestAssistantOutput.createdAt && (_jsx(Text, { sx: {
                                                                                     fontSize: 0,
                                                                                     color: 'fg.muted',
                                                                                     ml: 'auto',
                                                                                     whiteSpace: 'nowrap',
-                                                                                }, children: new Date(latestAssistantOutput.createdAt).toLocaleString() })), _jsx(Button, { size: "small", variant: "invisible", sx: { p: 1 }, onClick: () => navigator.clipboard.writeText(outputText), children: _jsx(CopyIcon, { size: 12 }) })] }), _jsx(Box, { sx: {
-                                                                            p: 2,
-                                                                            bg: 'canvas.default',
-                                                                            maxHeight: 300,
-                                                                            overflow: 'auto',
-                                                                        }, children: _jsx(Text, { sx: {
+                                                                                }, children: new Date(latestAssistantOutput.createdAt).toLocaleString() })), _jsx(Button, { size: "small", variant: "invisible", sx: { p: 1 }, onClick: () => navigator.clipboard.writeText(outputText), children: _jsx(CopyIcon, { size: 12 }) })] }), _jsx(Box, { p: 2, bg: "canvas.default", maxHeight: 300, overflow: "auto", children: _jsx(Text, { sx: {
                                                                                 fontSize: 0,
                                                                                 color: 'fg.default',
                                                                                 display: 'block',
@@ -1133,22 +1000,12 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                                                                 fontFamily: 'mono',
                                                                             }, children: outputText || '(empty output)' }) })] }));
                                                         })()] })), approvalSidebarMessages.filter(msg => msg.role !== 'user')
-                                                    .length === 0 ? (_jsxs(Box, { sx: {
-                                                        display: 'flex',
-                                                        alignItems: 'center',
-                                                        gap: 2,
-                                                        mb: 2,
-                                                    }, children: [_jsx(Spinner, { size: "small", sx: {
+                                                    .length === 0 ? (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: 2, children: [_jsx(Spinner, { size: "small", sx: {
                                                                 width: 16,
                                                                 height: 16,
                                                                 minWidth: 16,
                                                                 minHeight: 16,
-                                                            } }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Waiting for approval agent messages\u2026" })] })) : (_jsx(Box, { sx: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        gap: 2,
-                                                        mb: 2,
-                                                    }, children: approvalSidebarMessages
+                                                            } }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "Waiting for approval agent messages\u2026" })] })) : (_jsx(Box, { display: "flex", flexDirection: "column", gap: 2, mb: 2, children: approvalSidebarMessages
                                                         .slice()
                                                         .filter(msg => msg.role !== 'user')
                                                         .sort((a, b) => {
@@ -1165,18 +1022,7 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                                         const content = typeof msg.content === 'string'
                                                             ? msg.content
                                                             : JSON.stringify(msg.content);
-                                                        return (_jsxs(Box, { sx: {
-                                                                p: 2,
-                                                                bg: 'canvas.default',
-                                                                borderRadius: 2,
-                                                                border: '1px solid',
-                                                                borderColor: 'border.default',
-                                                            }, children: [_jsxs(Box, { sx: {
-                                                                        display: 'flex',
-                                                                        alignItems: 'center',
-                                                                        gap: 1,
-                                                                        mb: 1,
-                                                                    }, children: [_jsx(Label, { size: "small", variant: msg.role === 'assistant'
+                                                        return (_jsxs(Box, { p: 2, bg: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 1, children: [_jsx(Label, { size: "small", variant: msg.role === 'assistant'
                                                                                 ? 'accent'
                                                                                 : msg.role === 'tool'
                                                                                     ? 'success'
@@ -1194,64 +1040,14 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                                                     }, children: content.length > 320
                                                                         ? `${content.slice(0, 320)}…`
                                                                         : content })] }, `approval-msg-${msg.id}`));
-                                                    }) }))] })), _jsxs(Box, { sx: { mt: 2, display: 'grid', gap: 2 }, children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Stream once (local curl)" }), _jsx(Box, { sx: {
-                                                                mt: 1,
-                                                                bg: 'canvas.default',
-                                                                borderRadius: 2,
-                                                                p: 2,
-                                                                fontFamily: 'mono',
-                                                                fontSize: 0,
-                                                                wordBreak: 'break-all',
-                                                            }, children: triggerRunCurl })] }), _jsx(Button, { size: "small", leadingVisual: CopyIcon, onClick: () => navigator.clipboard.writeText(triggerRunCurl), children: "Copy streaming command" })] })] })), activeTab === 'cron' && (_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(ClockIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Cron Schedule" })] }), _jsxs(Label, { variant: "primary", sx: { mb: 2, display: 'inline-block' }, children: ["Current: ", cronExpr] }), nextRun && (_jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 2 }, children: ["Next run: ", new Date(nextRun).toLocaleString()] })), _jsxs(Box, { sx: { display: 'flex', gap: 2, mb: 2 }, children: [_jsx(TextInput, { value: editCron, onChange: e => setEditCron(e.target.value), placeholder: "* * * * *", sx: { flex: 1 }, size: "small" }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: SyncIcon, onClick: handleUpdateCron, disabled: isUpdating, children: isUpdating ? 'Saving…' : 'Update' })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted' }, children: "Standard cron syntax: minute hour day month weekday" })] })), activeTab === 'webhook' && (_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(GlobeIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Webhook Trigger" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: "Generate a unique URL that triggers this agent on incoming HTTP POST requests. Useful for CI/CD pipelines, external services, or custom integrations." }), webhookUrl ? (_jsxs(_Fragment, { children: [_jsx(Label, { variant: webhookEnabled ? 'success' : 'secondary', sx: { mb: 2, display: 'inline-block' }, children: webhookEnabled ? 'Active' : 'Disabled' }), _jsx(Box, { sx: {
-                                                        bg: 'canvas.default',
-                                                        p: 2,
-                                                        borderRadius: 2,
-                                                        mb: 2,
-                                                        fontFamily: 'mono',
-                                                        fontSize: 0,
-                                                        wordBreak: 'break-all',
-                                                    }, children: webhookUrl }), webhookSecret && (_jsxs(Box, { sx: { mb: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold' }, children: "Secret:" }), _jsx(Box, { sx: {
-                                                                bg: 'canvas.default',
-                                                                p: 2,
-                                                                borderRadius: 2,
-                                                                mt: 1,
-                                                                fontFamily: 'mono',
-                                                                fontSize: 0,
-                                                            }, children: webhookSecret })] })), _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Button, { size: "small", leadingVisual: CopyIcon, onClick: () => navigator.clipboard.writeText(webhookUrl), children: "Copy URL" }), _jsx(Button, { size: "small", variant: webhookEnabled ? 'danger' : 'primary', onClick: handleToggleWebhook, children: webhookEnabled ? 'Disable' : 'Enable' })] })] })) : (_jsx(Button, { size: "small", variant: "primary", leadingVisual: GlobeIcon, onClick: handleGenerateWebhook, disabled: isUpdating, sx: { width: '100%' }, children: isUpdating ? 'Generating…' : 'Generate Webhook URL' }))] })), activeTab === 'event' && (_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(ZapIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Event Trigger" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: "Subscribe to a Kafka topic or internal event stream. The agent triggers on matching messages." }), eventSubscribed ? (_jsxs(_Fragment, { children: [_jsxs(Label, { variant: "success", sx: { mb: 2, display: 'inline-block' }, children: ["Subscribed to: ", eventTopic] }), eventFilter && (_jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 2 }, children: ["Filter: ", eventFilter] })), _jsx(Button, { size: "small", variant: "danger", onClick: () => setEventSubscribed(false), sx: { width: '100%' }, children: "Unsubscribe" })] })) : (_jsxs(_Fragment, { children: [_jsx(TextInput, { value: eventTopic, onChange: e => setEventTopic(e.target.value), placeholder: "e.g. kpi.daily-report", sx: { width: '100%', mb: 2 }, size: "small" }), _jsx(TextInput, { value: eventFilter, onChange: e => setEventFilter(e.target.value), placeholder: "Optional JSONPath filter", sx: { width: '100%', mb: 2 }, size: "small" }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: ZapIcon, onClick: handleSubscribeEvent, disabled: isUpdating || !eventTopic.trim(), sx: { width: '100%' }, children: isUpdating ? 'Subscribing…' : 'Subscribe' })] }))] })), activeTab === 'manual' && (_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(PlayIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Manual Trigger" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: "Fire the agent immediately. This is equivalent to the cron job executing but bypasses the schedule." }), _jsx(Button, { size: "small", leadingVisual: PlayIcon, onClick: handleTriggerNow, disabled: isTriggeringNow, sx: { width: '100%' }, children: isTriggeringNow ? 'Triggering…' : 'Trigger Now' }), triggerFlash && (_jsx(Flash, { variant: triggerFlash.includes('success') ? 'success' : 'danger', sx: { mt: 2, fontSize: 0 }, children: triggerFlash }))] })), _jsxs(Box, { sx: { p: 3, flex: 1, overflow: 'auto' }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Trigger History" }), triggerHistory.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "No trigger runs recorded yet." })) : (_jsx(Timeline, { children: triggerHistory.slice(0, 20).map(rec => (_jsxs(Timeline.Item, { children: [_jsx(Timeline.Badge, { children: rec.status === 'success' ? (_jsx(CheckCircleIcon, {})) : rec.status === 'failure' ? (_jsx(XCircleIcon, {})) : (_jsx(Spinner, { size: "small" })) }), _jsx(Timeline.Body, { children: _jsxs(Text, { sx: { fontSize: 0 }, children: [new Date(rec.timestamp).toLocaleString(), ' — ', _jsx(Label, { variant: rec.status === 'success'
+                                                    }) }))] })), _jsxs(Box, { mt: 2, display: "grid", gap: 2, children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Stream once (local curl)" }), _jsx(Box, { mt: 1, bg: "canvas.default", borderRadius: 2, p: 2, fontFamily: "mono", fontSize: 0, wordBreak: "break-all", children: triggerRunCurl })] }), _jsx(Button, { size: "small", leadingVisual: CopyIcon, onClick: () => navigator.clipboard.writeText(triggerRunCurl), children: "Copy streaming command" })] })] })), activeTab === 'cron' && (_jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 2, children: [_jsx(ClockIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Cron Schedule" })] }), _jsxs(Label, { variant: "primary", sx: { mb: 2, display: 'inline-block' }, children: ["Current: ", cronExpr] }), nextRun && (_jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 2 }, children: ["Next run: ", new Date(nextRun).toLocaleString()] })), _jsxs(Box, { display: "flex", gap: 2, mb: 2, children: [_jsx(TextInput, { value: editCron, onChange: e => setEditCron(e.target.value), placeholder: "* * * * *", sx: { flex: 1 }, size: "small" }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: SyncIcon, onClick: handleUpdateCron, disabled: isUpdating, children: isUpdating ? 'Saving…' : 'Update' })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted' }, children: "Standard cron syntax: minute hour day month weekday" })] })), activeTab === 'webhook' && (_jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 2, children: [_jsx(GlobeIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Webhook Trigger" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: "Generate a unique URL that triggers this agent on incoming HTTP POST requests. Useful for CI/CD pipelines, external services, or custom integrations." }), webhookUrl ? (_jsxs(_Fragment, { children: [_jsx(Label, { variant: webhookEnabled ? 'success' : 'secondary', sx: { mb: 2, display: 'inline-block' }, children: webhookEnabled ? 'Active' : 'Disabled' }), _jsx(Box, { bg: "canvas.default", p: 2, borderRadius: 2, mb: 2, fontFamily: "mono", fontSize: 0, wordBreak: "break-all", children: webhookUrl }), webhookSecret && (_jsxs(Box, { mb: 2, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'bold' }, children: "Secret:" }), _jsx(Box, { bg: "canvas.default", p: 2, borderRadius: 2, mt: 1, fontFamily: "mono", fontSize: 0, children: webhookSecret })] })), _jsxs(Box, { display: "flex", gap: 2, children: [_jsx(Button, { size: "small", leadingVisual: CopyIcon, onClick: () => navigator.clipboard.writeText(webhookUrl), children: "Copy URL" }), _jsx(Button, { size: "small", variant: webhookEnabled ? 'danger' : 'primary', onClick: handleToggleWebhook, children: webhookEnabled ? 'Disable' : 'Enable' })] })] })) : (_jsx(Button, { size: "small", variant: "primary", leadingVisual: GlobeIcon, onClick: handleGenerateWebhook, disabled: isUpdating, sx: { width: '100%' }, children: isUpdating ? 'Generating…' : 'Generate Webhook URL' }))] })), activeTab === 'event' && (_jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 2, children: [_jsx(ZapIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Event Trigger" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: "Subscribe to a Kafka topic or internal event stream. The agent triggers on matching messages." }), eventSubscribed ? (_jsxs(_Fragment, { children: [_jsxs(Label, { variant: "success", sx: { mb: 2, display: 'inline-block' }, children: ["Subscribed to: ", eventTopic] }), eventFilter && (_jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 2 }, children: ["Filter: ", eventFilter] })), _jsx(Button, { size: "small", variant: "danger", onClick: () => setEventSubscribed(false), sx: { width: '100%' }, children: "Unsubscribe" })] })) : (_jsxs(_Fragment, { children: [_jsx(TextInput, { value: eventTopic, onChange: e => setEventTopic(e.target.value), placeholder: "e.g. kpi.daily-report", sx: { width: '100%', mb: 2 }, size: "small" }), _jsx(TextInput, { value: eventFilter, onChange: e => setEventFilter(e.target.value), placeholder: "Optional JSONPath filter", sx: { width: '100%', mb: 2 }, size: "small" }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: ZapIcon, onClick: handleSubscribeEvent, disabled: isUpdating || !eventTopic.trim(), sx: { width: '100%' }, children: isUpdating ? 'Subscribing…' : 'Subscribe' })] }))] })), activeTab === 'manual' && (_jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 2, children: [_jsx(PlayIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Manual Trigger" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 3 }, children: "Fire the agent immediately. This is equivalent to the cron job executing but bypasses the schedule." }), _jsx(Button, { size: "small", leadingVisual: PlayIcon, onClick: handleTriggerNow, disabled: isTriggeringNow, sx: { width: '100%' }, children: isTriggeringNow ? 'Triggering…' : 'Trigger Now' }), triggerFlash && (_jsx(Flash, { variant: triggerFlash.includes('success') ? 'success' : 'danger', sx: { mt: 2, fontSize: 0 }, children: triggerFlash }))] })), _jsxs(Box, { p: 3, flex: 1, overflow: "auto", children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Trigger History" }), triggerHistory.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "No trigger runs recorded yet." })) : (_jsx(Timeline, { children: triggerHistory.slice(0, 20).map(rec => (_jsxs(Timeline.Item, { children: [_jsx(Timeline.Badge, { children: rec.status === 'success' ? (_jsx(CheckCircleIcon, {})) : rec.status === 'failure' ? (_jsx(XCircleIcon, {})) : (_jsx(Spinner, { size: "small" })) }), _jsx(Timeline.Body, { children: _jsxs(Text, { sx: { fontSize: 0 }, children: [new Date(rec.timestamp).toLocaleString(), ' — ', _jsx(Label, { variant: rec.status === 'success'
                                                                         ? 'success'
                                                                         : rec.status === 'failure'
                                                                             ? 'danger'
-                                                                            : 'accent', size: "small", children: rec.status }), rec.duration_ms != null && (_jsxs(Text, { sx: { ml: 1, color: 'fg.muted' }, children: ["(", (rec.duration_ms / 1000).toFixed(1), "s)"] }))] }) })] }, rec.id))) })), _jsx(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 2 }, children: "Agent Events" }), agentEvents.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "No agent events yet." })) : (_jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [...agentEvents]
+                                                                            : 'accent', size: "small", children: rec.status }), rec.duration_ms != null && (_jsxs(Text, { sx: { ml: 1, color: 'fg.muted' }, children: ["(", (rec.duration_ms / 1000).toFixed(1), "s)"] }))] }) })] }, rec.id))) })), _jsx(Heading, { as: "h4", sx: { fontSize: 1, mt: 3, mb: 2 }, children: "Agent Events" }), agentEvents.length === 0 ? (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 0 }, children: "No agent events yet." })) : (_jsx(Box, { display: "flex", flexDirection: "column", gap: 2, children: [...agentEvents]
                                                 .sort((a, b) => new Date(b.created_at).getTime() -
                                                 new Date(a.created_at).getTime())
-                                                .map((evt) => (_jsxs(Box, { sx: {
-                                                    p: 2,
-                                                    bg: evt.read ? 'canvas.default' : 'neutral.muted',
-                                                    borderRadius: 2,
-                                                    border: '1px solid',
-                                                    borderColor: 'border.default',
-                                                }, children: [_jsxs(Box, { sx: {
-                                                            display: 'flex',
-                                                            alignItems: 'center',
-                                                            gap: 1,
-                                                            mb: 1,
-                                                        }, children: [_jsx(Label, { variant: evt.kind === 'agent-started'
+                                                .map((evt) => (_jsxs(Box, { p: 2, bg: evt.read ? 'canvas.default' : 'neutral.muted', borderRadius: 2, border: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 1, children: [_jsx(Label, { variant: evt.kind === 'agent-started'
                                                                     ? 'accent'
                                                                     : evt.kind === 'agent-output'
                                                                         ? 'success'
@@ -1275,18 +1071,12 @@ const AgentTriggerInner = ({ onLogout, }) => {
                                                                 }, sx: { p: 1 }, children: evt.read ? (_jsx(EyeClosedIcon, { size: 12 })) : (_jsx(EyeIcon, { size: 12 })) }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => deleteEventMutation.mutate(evt.id), sx: { p: 1, color: 'danger.fg' }, children: _jsx(TrashIcon, { size: 12 }) })] }), evt.payload &&
                                                         (() => {
                                                             const p = evt.payload;
-                                                            return (_jsxs(Box, { sx: { fontSize: 0, color: 'fg.muted' }, children: [evt.kind === 'agent-output' && p.outputs && (_jsx(Tooltip, { text: String(p.outputs), direction: "n", children: _jsx("button", { type: "button", "aria-label": String(p.outputs), style: {
+                                                            return (_jsxs(Box, { fontSize: 0, color: "fg.muted", children: [evt.kind === 'agent-output' && p.outputs && (_jsx(Tooltip, { text: String(p.outputs), direction: "n", children: _jsx("button", { type: "button", "aria-label": String(p.outputs), style: {
                                                                                 all: 'unset',
                                                                                 display: 'block',
                                                                                 width: '100%',
                                                                                 cursor: 'default',
-                                                                            }, children: _jsxs(Box, { sx: {
-                                                                                    mb: 1,
-                                                                                    display: 'flex',
-                                                                                    alignItems: 'baseline',
-                                                                                    gap: 1,
-                                                                                    minWidth: 0,
-                                                                                }, children: [_jsx(Text, { as: "span", sx: {
+                                                                            }, children: _jsxs(Box, { mb: 1, display: "flex", alignItems: "baseline", gap: 1, minWidth: 0, children: [_jsx(Text, { as: "span", sx: {
                                                                                             fontWeight: 'bold',
                                                                                             color: 'fg.default',
                                                                                             whiteSpace: 'nowrap',

package/lib/examples/AgentspecsExample.js

@@ -990,25 +990,13 @@ githubClientId, kaggleToken, }) => {
     };
     return (_jsx(QueryClientProvider, { client: queryClient, children: _jsxs(ThemedProvider, { children: [_jsxs(PageLayout, { containerWidth: "full", children: [_jsx(Header, { activeSession: activeSession, agentName: isNewMode ? undefined : currentAgent?.name, agentDescription: isNewMode ? undefined : currentAgent?.description, agentStatus: currentAgent?.status, showContextTree: showContextTree, isNewAgent: isNewMode, isConfigured: isConfigured, onSessionChange: setActiveSession, onToggleContextTree: () => setShowContextTree(!showContextTree), onToggleStatus: currentAgent
                                 ? () => toggleAgentStatus(currentAgent.id)
-                                : undefined }), leftPaneVisible ? (_jsxs(_Fragment, { children: [_jsx(Box, { sx: {
-                                        position: 'fixed',
-                                        left: 0,
-                                        top: '50%',
-                                        transform: 'translateY(-50%)',
-                                        zIndex: 100,
-                                    }, children: _jsx(IconButton, { icon: SidebarCollapseIcon, "aria-label": "Collapse left pane", size: "small", onClick: () => setLeftPaneVisible(false), sx: {
+                                : undefined }), leftPaneVisible ? (_jsxs(_Fragment, { children: [_jsx(Box, { position: "fixed", left: 0, top: "50%", transform: "translateY(-50%)", zIndex: 100, children: _jsx(IconButton, { icon: SidebarCollapseIcon, "aria-label": "Collapse left pane", size: "small", onClick: () => setLeftPaneVisible(false), sx: {
                                             borderRadius: '0 6px 6px 0',
                                             bg: 'canvas.default',
                                             border: '1px solid',
                                             borderLeft: 'none',
                                             borderColor: 'border.default',
-                                        } }) }), _jsx(PageLayout.Pane, { position: "start", "aria-label": "File browser pane", resizable: true, sticky: true, width: { min: '250px', default: '300px', max: '1200px' }, children: isNewMode ? (_jsxs(Blankslate, { border: true, spacious: true, narrow: true, children: [_jsx(Blankslate.Visual, { children: _jsx(AiAgentIcon, { colored: true, size: 48 }) }), _jsx(Blankslate.Heading, { children: "Agent Runtimes" }), _jsx(Box, { sx: { textAlign: 'center' }, children: _jsx(Blankslate.Description, { children: "Expose AI Agents through multiple protocols." }) })] })) : (_jsx(MockFileBrowser, { codemode: codemode })) })] })) : (_jsx(Box, { sx: {
-                                position: 'fixed',
-                                left: 0,
-                                top: '50%',
-                                transform: 'translateY(-50%)',
-                                zIndex: 100,
-                            }, children: _jsx(IconButton, { icon: SidebarExpandIcon, "aria-label": "Expand left pane", size: "small", onClick: () => setLeftPaneVisible(true), sx: {
+                                        } }) }), _jsx(PageLayout.Pane, { position: "start", "aria-label": "File browser pane", resizable: true, sticky: true, width: { min: '250px', default: '300px', max: '1200px' }, children: isNewMode ? (_jsxs(Blankslate, { border: true, spacious: true, narrow: true, children: [_jsx(Blankslate.Visual, { children: _jsx(AiAgentIcon, { colored: true, size: 48 }) }), _jsx(Blankslate.Heading, { children: "Agent Runtimes" }), _jsx(Box, { textAlign: "center", children: _jsx(Blankslate.Description, { children: "Expose AI Agents through multiple protocols." }) })] })) : (_jsx(MockFileBrowser, { codemode: codemode })) })] })) : (_jsx(Box, { position: "fixed", left: 0, top: "50%", transform: "translateY(-50%)", zIndex: 100, children: _jsx(IconButton, { icon: SidebarExpandIcon, "aria-label": "Expand left pane", size: "small", onClick: () => setLeftPaneVisible(true), sx: {
                                     borderRadius: '0 6px 6px 0',
                                     bg: 'canvas.default',
                                     border: '1px solid',
@@ -1018,24 +1006,13 @@ githubClientId, kaggleToken, }) => {
                                     // Trigger codemode tool regeneration when MCP servers change at runtime
                                     console.log('[AgentRuntimeFormExample] MCP servers changed, regenerating codemode tools...');
                                     // The Chat component will pick up the new selectedMcpServers via props
-                                } }) }), rightPaneVisible ? (_jsx(_Fragment, { children: _jsx(PageLayout.Pane, { position: "end", "aria-label": "Agent configuration and chat pane", width: RIGHT_PANE_WIDTH, sticky: true, children: _jsxs(Box, { sx: {
-                                        height: '100%',
-                                        display: 'flex',
-                                        flexDirection: 'column',
-                                        p: 2,
-                                    }, children: [_jsxs(Box, { sx: {
-                                                display: 'flex',
-                                                justifyContent: 'space-between',
-                                                alignItems: 'center',
-                                                mb: 2,
-                                                gap: 2,
-                                            }, children: [_jsx(IconButton, { icon: SidebarCollapseIcon, "aria-label": "Collapse right pane", size: "small", onClick: () => setRightPaneVisible(false), variant: "invisible" }), _jsx(Button, { size: "small", onClick: () => setShowSpecOverlay(true), children: "View Full Spec (YAML)" })] }), !isConfigured ? (_jsx(AgentConfiguration, { agentLibrary: agentLibrary, protocol: currentAgent?.protocol || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: serviceBaseUrlForSelection, agentName: agentName, description: description, goal: goal, model: model, systemPrompt: systemPrompt, systemPromptCodemodeAddons: systemPromptCodemodeAddons, tools: tools, sandboxVariant: sandboxVariant, agents: agents, selectedAgentId: selectedAgentId, isCreatingAgent: isCreatingAgent, createError: createError, enableCodemode: enableCodemode, useJupyterSandbox: useJupyterSandbox, allowDirectToolCalls: allowDirectToolCalls, enableToolReranker: enableToolReranker, availableSkills: MOCK_SKILLS, selectedSkills: selectedSkills, selectedMcpServers: selectedMcpServers, cloudLibrarySpecs: cloudLibrarySpecs, cloudLibraryLoading: cloudLibraryLoading, cloudLibraryError: cloudLibraryError, launchTarget: isCloudMode ? 'cloud' : 'local', launchStatus: launchStatus, launchBaseUrl: serviceBaseUrlForSelection, identityProviders: oauthProvidersConfig, onIdentityConnect: handleIdentityConnect, onIdentityDisconnect: handleIdentityDisconnect, onAgentLibraryChange: setAgentLibrary, onTransportChange: setTransport, onExtensionsChange: setExtensions, onWsUrlChange: setWsUrl, onBaseUrlChange: isCloudMode
+                                } }) }), rightPaneVisible ? (_jsx(_Fragment, { children: _jsx(PageLayout.Pane, { position: "end", "aria-label": "Agent configuration and chat pane", width: RIGHT_PANE_WIDTH, sticky: true, children: _jsxs(Box, { height: "100%", display: "flex", flexDirection: "column", p: 2, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 2, gap: 2, children: [_jsx(IconButton, { icon: SidebarCollapseIcon, "aria-label": "Collapse right pane", size: "small", onClick: () => setRightPaneVisible(false), variant: "invisible" }), _jsx(Button, { size: "small", onClick: () => setShowSpecOverlay(true), children: "View Full Spec (YAML)" })] }), !isConfigured ? (_jsx(AgentConfiguration, { agentLibrary: agentLibrary, protocol: currentAgent?.protocol || transport, extensions: extensions, wsUrl: wsUrl, baseUrl: serviceBaseUrlForSelection, agentName: agentName, description: description, goal: goal, model: model, systemPrompt: systemPrompt, systemPromptCodemodeAddons: systemPromptCodemodeAddons, tools: tools, sandboxVariant: sandboxVariant, agents: agents, selectedAgentId: selectedAgentId, isCreatingAgent: isCreatingAgent, createError: createError, enableCodemode: enableCodemode, useJupyterSandbox: useJupyterSandbox, allowDirectToolCalls: allowDirectToolCalls, enableToolReranker: enableToolReranker, availableSkills: MOCK_SKILLS, selectedSkills: selectedSkills, selectedMcpServers: selectedMcpServers, cloudLibrarySpecs: cloudLibrarySpecs, cloudLibraryLoading: cloudLibraryLoading, cloudLibraryError: cloudLibraryError, launchTarget: isCloudMode ? 'cloud' : 'local', launchStatus: launchStatus, launchBaseUrl: serviceBaseUrlForSelection, identityProviders: oauthProvidersConfig, onIdentityConnect: handleIdentityConnect, onIdentityDisconnect: handleIdentityDisconnect, onAgentLibraryChange: setAgentLibrary, onTransportChange: setTransport, onExtensionsChange: setExtensions, onWsUrlChange: setWsUrl, onBaseUrlChange: isCloudMode
                                                 ? (_) => {
                                                     /* Cloud mode uses cloud service URLs from spec/config. */
                                                 }
                                                 : setBaseUrl, onAgentNameChange: setAgentName, onDescriptionChange: setDescription, onGoalChange: setGoal, onModelChange: setModel, onSystemPromptChange: setSystemPrompt, onSystemPromptCodemodeAddonsChange: setSystemPromptCodemodeAddons, onToolsChange: setTools, onSandboxVariantChange: setSandboxVariant, onAgentSelect: handleAgentSelect, onConnect: handleConnect, onEnableCodemodeChange: handleEnableCodemodeChange, onUseJupyterSandboxChange: setUseJupyterSandbox, onAllowDirectToolCallsChange: setAllowDirectToolCalls, onEnableToolRerankerChange: setEnableToolReranker, onSelectedSkillsChange: setSelectedSkills, onSelectedMcpServersChange: setSelectedMcpServers })) : (
                                         /* Chat Interface */
-                                        _jsx(Box, { sx: { flex: 1, minHeight: 0 }, children: _jsx(ChatWithJupyterStatus, { baseUrl: effectiveBaseUrl, isConfigured: isConfigured, enableCodemode: enableCodemode, useJupyterSandbox: useJupyterSandbox, chatProps: {
+                                        _jsx(Box, { flex: 1, minHeight: 0, children: _jsx(ChatWithJupyterStatus, { baseUrl: effectiveBaseUrl, isConfigured: isConfigured, enableCodemode: enableCodemode, useJupyterSandbox: useJupyterSandbox, chatProps: {
                                                     protocol: effectiveProtocol,
                                                     extensions: extensions,
                                                     wsUrl: wsUrl,
@@ -1084,43 +1061,12 @@ githubClientId, kaggleToken, }) => {
                                                     onMessageReceived: (_message) => {
                                                         // Message received
                                                     },
-                                                } }) }))] }) }) })) : (_jsx(Box, { sx: {
-                                position: 'fixed',
-                                right: 0,
-                                top: '50%',
-                                transform: 'translateY(-50%)',
-                                zIndex: 100,
-                            }, children: _jsx(IconButton, { icon: SidebarExpandIcon, "aria-label": "Expand right pane", size: "small", onClick: () => setRightPaneVisible(true), sx: {
+                                                } }) }))] }) }) })) : (_jsx(Box, { position: "fixed", right: 0, top: "50%", transform: "translateY(-50%)", zIndex: 100, children: _jsx(IconButton, { icon: SidebarExpandIcon, "aria-label": "Expand right pane", size: "small", onClick: () => setRightPaneVisible(true), sx: {
                                     borderRadius: '6px 0 0 6px',
                                     bg: 'canvas.default',
                                     border: '1px solid',
                                     borderRight: 'none',
                                     borderColor: 'border.default',
-                                } }) }))] }), showSpecOverlay && (_jsxs(Box, { sx: {
-                        position: 'fixed',
-                        inset: 24,
-                        zIndex: 300,
-                        bg: 'canvas.default',
-                        border: '1px solid',
-                        borderColor: 'border.default',
-                        borderRadius: 1,
-                        boxShadow: 'shadow.large',
-                        display: 'flex',
-                        flexDirection: 'column',
-                    }, children: [_jsxs(Box, { sx: {
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'space-between',
-                                px: 3,
-                                py: 2,
-                                borderBottom: '1px solid',
-                                borderColor: 'border.default',
-                            }, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: "Spec Payload Preview (YAML)" }), _jsx(IconButton, { icon: XIcon, "aria-label": "Close spec preview", size: "small", variant: "invisible", onClick: () => setShowSpecOverlay(false) })] }), _jsx(Box, { sx: { p: 3, overflow: 'auto', flex: 1 }, children: _jsx(Box, { as: "pre", sx: {
-                                    m: 0,
-                                    whiteSpace: 'pre',
-                                    fontFamily: 'monospace',
-                                    fontSize: 0,
-                                    lineHeight: '20px',
-                                }, children: specYamlPreview }) })] }))] }) }));
+                                } }) }))] }), showSpecOverlay && (_jsxs(Box, { position: "fixed", inset: 24, zIndex: 300, bg: "canvas.default", border: "1px solid", borderColor: "border.default", borderRadius: 1, boxShadow: "shadow.large", display: "flex", flexDirection: "column", children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: "Spec Payload Preview (YAML)" }), _jsx(IconButton, { icon: XIcon, "aria-label": "Close spec preview", size: "small", variant: "invisible", onClick: () => setShowSpecOverlay(false) })] }), _jsx(Box, { p: 3, overflow: "auto", flex: 1, children: _jsx(Box, { as: "pre", m: 0, whiteSpace: "pre", fontFamily: "monospace", fontSize: 0, lineHeight: "20px", children: specYamlPreview }) })] }))] }) }));
 };
 export default AgentspecsExample;