@datalayer/agent-runtimes 1.3.89 → 1.3.90

package/lib/examples/AgentSkillsExample.js

@@ -38,29 +38,11 @@ const SkillCard = ({ skill, onToggle, onToggleApproval }) => {
             : sourceVariant === 'path'
                 ? skill.path
                 : undefined;
-    return (_jsxs(_Fragment, { children: [_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(Text, { sx: { fontWeight: 600, fontSize: 1 }, children: skill.name }), skill.status && (_jsx(Label, { size: "small", variant: skill.status === 'loaded'
+    return (_jsxs(_Fragment, { children: [_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(Text, { sx: { fontWeight: 600, fontSize: 1 }, children: skill.name }), skill.status && (_jsx(Label, { size: "small", variant: skill.status === 'loaded'
                                     ? 'success'
                                     : skill.status === 'enabled'
                                         ? 'attention'
-                                        : 'secondary', children: skill.status })), skill.approved && (_jsx(Label, { size: "small", variant: "success", children: "approved" })), skill.status === 'loaded' && skill.skill_definition && (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowDefinition(true), leadingVisual: FileIcon, sx: { fontSize: 0, p: 0, color: 'fg.muted' }, "aria-label": "View SKILL.md", children: "SKILL.md" })), _jsxs(Box, { sx: { ml: 'auto', display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Button, { size: "small", variant: "invisible", onClick: () => onToggleApproval(skill.id), sx: { fontSize: 0 }, children: skill.approved ? 'Unapprove' : 'Approve' }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => onToggle(skill.id), sx: { fontSize: 0 }, children: skill.status === 'available' ? 'Enable' : 'Disable' })] })] }), skill.description && (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 1, mt: 0 }, children: skill.description })), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [_jsx(Label, { size: "small", variant: "secondary", children: sourceLabel }), sourceDetail && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: sourceDetail }))] }), skill.tags && skill.tags.length > 0 && (_jsx(Box, { sx: { mt: 1, display: 'flex', gap: 1, flexWrap: 'wrap' }, children: skill.tags.map(tag => (_jsx(PrimerToken, { text: tag, size: "small" }, tag))) }))] }), showDefinition && skill.skill_definition && (_jsx(Dialog, { title: `${skill.name} — SKILL.md`, onClose: () => setShowDefinition(false), width: "xlarge", children: _jsx(Box, { sx: { p: 3, maxHeight: '70vh', overflow: 'auto' }, children: _jsx(Box, { as: "pre", sx: {
-                            fontFamily: 'mono',
-                            fontSize: 0,
-                            whiteSpace: 'pre-wrap',
-                            wordBreak: 'break-word',
-                            m: 0,
-                            p: 3,
-                            bg: 'canvas.default',
-                            borderRadius: 2,
-                            border: '1px solid',
-                            borderColor: 'border.muted',
-                        }, children: skill.skill_definition }) }) }))] }));
+                                        : 'secondary', children: skill.status })), skill.approved && (_jsx(Label, { size: "small", variant: "success", children: "approved" })), skill.status === 'loaded' && skill.skill_definition && (_jsx(Button, { size: "small", variant: "invisible", onClick: () => setShowDefinition(true), leadingVisual: FileIcon, sx: { fontSize: 0, p: 0, color: 'fg.muted' }, "aria-label": "View SKILL.md", children: "SKILL.md" })), _jsxs(Box, { ml: "auto", display: "flex", alignItems: "center", gap: 1, children: [_jsx(Button, { size: "small", variant: "invisible", onClick: () => onToggleApproval(skill.id), sx: { fontSize: 0 }, children: skill.approved ? 'Unapprove' : 'Approve' }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => onToggle(skill.id), sx: { fontSize: 0 }, children: skill.status === 'available' ? 'Enable' : 'Disable' })] })] }), skill.description && (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 1, mt: 0 }, children: skill.description })), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 1, children: [_jsx(Label, { size: "small", variant: "secondary", children: sourceLabel }), sourceDetail && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: sourceDetail }))] }), skill.tags && skill.tags.length > 0 && (_jsx(Box, { mt: 1, display: "flex", gap: 1, flexWrap: "wrap", children: skill.tags.map(tag => (_jsx(PrimerToken, { text: tag, size: "small" }, tag))) }))] }), showDefinition && skill.skill_definition && (_jsx(Dialog, { title: `${skill.name} — SKILL.md`, onClose: () => setShowDefinition(false), width: "xlarge", children: _jsx(Box, { p: 3, maxHeight: "70vh", overflow: "auto", children: _jsx(Box, { as: "pre", fontFamily: "mono", fontSize: 0, whiteSpace: "pre-wrap", wordBreak: "break-word", m: 0, p: 3, bg: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.muted", children: skill.skill_definition }) }) }))] }));
 };
 const AgentSkillsInner = ({ onLogout }) => {
     const { token } = useSimpleAuthStore();
@@ -107,31 +89,7 @@ const AgentSkillsInner = ({ onLogout }) => {
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
-    return (_jsx(Box, { sx: {
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column',
-        }, children: _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_AGENTSKI }) }), _jsxs(Box, { sx: {
-                        width: 320,
-                        minWidth: 280,
-                        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(BriefcaseIcon, { size: 16 }), "Agent Skills"] }) }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [skills.length, " skill", skills.length !== 1 ? 's' : '', " \u00B7", ' ', skills.filter(s => s.status === 'loaded').length, " loaded \u00B7", ' ', skills.filter(s => s.approved).length, " approved"] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', mt: 1, display: 'block' }, children: [fileBasedSkills.length, " file-based \u00B7", ' ', packageBasedSkills.length, " package-based \u00B7", ' ', moduleBasedSkills.length, " module-based"] })] }), _jsxs(Box, { sx: { p: 2, overflow: 'auto', flex: 1 }, children: [skills.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Waiting for skills snapshot..." })) : (skills.map(skill => (_jsx(SkillCard, { skill: skill, onToggle: toggleSkill, onToggleApproval: toggleSkillApproval }, skill.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: "Skill Statuses" }), _jsxs(Box, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [_jsx(Label, { size: "small", variant: "secondary", children: "available" }), _jsx(Text, { children: "In catalog, not yet enabled" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, mb: 1 }, children: [_jsx(Label, { size: "small", variant: "attention", children: "enabled" }), _jsx(Text, { children: "Enabled, loading pending" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Label, { size: "small", variant: "success", children: "loaded" }), _jsx(Text, { children: "SKILL.md loaded, in system prompt" })] })] })] })] })] })] }) }));
+    return (_jsx(Box, { height: "100%", display: "flex", flexDirection: "column", children: _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_AGENTSKI }) }), _jsxs(Box, { width: 320, minWidth: 280, 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(BriefcaseIcon, { size: 16 }), "Agent Skills"] }) }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [skills.length, " skill", skills.length !== 1 ? 's' : '', " \u00B7", ' ', skills.filter(s => s.status === 'loaded').length, " loaded \u00B7", ' ', skills.filter(s => s.approved).length, " approved"] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', mt: 1, display: 'block' }, children: [fileBasedSkills.length, " file-based \u00B7", ' ', packageBasedSkills.length, " package-based \u00B7", ' ', moduleBasedSkills.length, " module-based"] })] }), _jsxs(Box, { p: 2, overflow: "auto", flex: 1, children: [skills.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Waiting for skills snapshot..." })) : (skills.map(skill => (_jsx(SkillCard, { skill: skill, onToggle: toggleSkill, onToggleApproval: toggleSkillApproval }, skill.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: "Skill Statuses" }), _jsxs(Box, { fontSize: 0, color: "fg.muted", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 1, children: [_jsx(Label, { size: "small", variant: "secondary", children: "available" }), _jsx(Text, { children: "In catalog, not yet enabled" })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, mb: 1, children: [_jsx(Label, { size: "small", variant: "attention", children: "enabled" }), _jsx(Text, { children: "Enabled, loading pending" })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(Label, { size: "small", variant: "success", children: "loaded" }), _jsx(Text, { children: "SKILL.md loaded, in system prompt" })] })] })] })] })] })] }) }));
 };
 const syncTokenToIamStore = (token) => {
     import('../state/substates').then(({ iamStore }) => {

package/lib/examples/AgentSubagentsExample.js

@@ -41,20 +41,7 @@ const ACTIVE_PANEL_HEIGHT = 280;
  */
 const ActiveSubagentPanel = () => {
     const activeToolCallId = useAgentRuntimeActiveSubagentToolCallId();
-    return (_jsxs(Box, { sx: {
-            p: 3,
-            borderBottom: '1px solid',
-            borderColor: 'border.default',
-        }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Active Subagent" }), activeToolCallId ? (_jsx(SubagentChatPanel, { toolCallId: activeToolCallId, height: ACTIVE_PANEL_HEIGHT })) : (_jsx(Box, { sx: {
-                    height: ACTIVE_PANEL_HEIGHT,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'center',
-                    border: '1px solid',
-                    borderColor: 'border.muted',
-                    borderRadius: 2,
-                    bg: 'canvas.subtle',
-                }, children: _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "No active Subagent" }) }))] }));
+    return (_jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Active Subagent" }), activeToolCallId ? (_jsx(SubagentChatPanel, { toolCallId: activeToolCallId, height: ACTIVE_PANEL_HEIGHT })) : (_jsx(Box, { height: ACTIVE_PANEL_HEIGHT, display: "flex", alignItems: "center", justifyContent: "center", border: "1px solid", borderColor: "border.muted", borderRadius: 2, bg: "canvas.subtle", children: _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "No active Subagent" }) }))] }));
 };
 /**
  * The subagents the spec declares, each badged "Running" while a delegation
@@ -65,62 +52,25 @@ const SubagentRoster = ({ subagents }) => {
     const running = useAgentRuntimeRunningSubagentNames();
     return (_jsx(Timeline, { children: subagents.map(sa => {
             const isRunning = running.includes(sa.name);
-            return (_jsxs(Timeline.Item, { "data-subagent-roster": sa.name, "data-subagent-running": isRunning ? 'true' : undefined, children: [_jsx(Timeline.Badge, { children: _jsx(PersonIcon, {}) }), _jsxs(Timeline.Body, { children: [_jsxs(Box, { sx: { mb: 1, display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: sa.name }), isRunning ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small" }), _jsx(Label, { variant: "accent", size: "small", children: "Running" })] })) : null] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 1 }, children: sa.description })] })] }, sa.name));
+            return (_jsxs(Timeline.Item, { "data-subagent-roster": sa.name, "data-subagent-running": isRunning ? 'true' : undefined, children: [_jsx(Timeline.Badge, { children: _jsx(PersonIcon, {}) }), _jsxs(Timeline.Body, { children: [_jsxs(Box, { mb: 1, display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: sa.name }), isRunning ? (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "small" }), _jsx(Label, { variant: "accent", size: "small", children: "Running" })] })) : null] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 1 }, children: sa.description })] })] }, sa.name));
         }) }));
 };
 const AgentSubagentsExample = () => {
     const agentName = useMemo(() => uniqueAgentId(AGENT_NAME), []);
     const subagents = useMemo(declaredSubagents, []);
-    return (_jsx(ThemedProvider, { children: _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(PeopleIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Subagents Demo" }), _jsx(Label, { variant: "accent", children: "local" }), _jsxs(Label, { variant: "accent", children: [subagents.length, " subagent", subagents.length === 1 ? '' : 's'] })] }), _jsxs(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(LoopEmbed, { serverUrl: resolveExampleAgentRuntimesUrl('local'), target: "local", showAgentVariants: true, agentId: agentName, 
+    return (_jsx(ThemedProvider, { children: _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(PeopleIcon, { size: 16 }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, flex: 1 }, children: "Subagents Demo" }), _jsx(Label, { variant: "accent", children: "local" }), _jsxs(Label, { variant: "accent", children: [subagents.length, " subagent", subagents.length === 1 ? '' : 's'] })] }), _jsxs(Box, { flex: 1, minHeight: 0, display: "flex", children: [_jsx(Box, { flex: 1, minWidth: 0, children: _jsx(LoopEmbed, { serverUrl: resolveExampleAgentRuntimesUrl('local'), target: "local", showAgentVariants: true, agentId: agentName, 
                                 // The chat alone: delegation is the point here, and a notebook
                                 // or a document beside it would only invite the wrong request.
-                                editors: false, showHeader: true, plugins: LOOP_PLUGINS_AGENTSUB }) }), _jsxs(Box, { sx: {
-                                width: 320,
-                                borderLeft: '1px solid',
-                                borderColor: 'border.default',
-                                display: 'flex',
-                                flexDirection: 'column',
-                                overflow: 'auto',
-                            }, children: [_jsx(ActiveSubagentPanel, {}), _jsxs(Box, { sx: {
-                                        p: 3,
-                                        borderBottom: '1px solid',
-                                        borderColor: 'border.default',
-                                    }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Available Subagents" }), _jsx(SubagentRoster, { subagents: subagents })] }), _jsxs(Box, { sx: {
-                                        p: 3,
-                                        borderBottom: '1px solid',
-                                        borderColor: 'border.default',
-                                    }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Delegation Tools" }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [
+                                editors: false, showHeader: true, plugins: LOOP_PLUGINS_AGENTSUB }) }), _jsxs(Box, { width: 320, borderLeft: "1px solid", borderColor: "border.default", display: "flex", flexDirection: "column", overflow: "auto", children: [_jsx(ActiveSubagentPanel, {}), _jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Available Subagents" }), _jsx(SubagentRoster, { subagents: subagents })] }), _jsxs(Box, { p: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, mb: 2 }, children: "Delegation Tools" }), _jsx(Box, { display: "flex", flexDirection: "column", gap: 2, children: [
                                                 {
                                                     name: 'delegate_task',
                                                     desc: 'Run a named subagent on a task and return its answer',
                                                     icon: PeopleIcon,
                                                 },
-                                            ].map(tool => (_jsxs(Box, { sx: {
-                                                    p: 2,
-                                                    border: '1px solid',
-                                                    borderColor: 'border.default',
-                                                    borderRadius: 2,
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    gap: 2,
-                                                }, children: [_jsx(tool.icon, { size: 14 }), _jsxs(Box, { children: [_jsx(Text, { sx: {
+                                            ].map(tool => (_jsxs(Box, { p: 2, border: "1px solid", borderColor: "border.default", borderRadius: 2, display: "flex", alignItems: "center", gap: 2, children: [_jsx(tool.icon, { size: 14 }), _jsxs(Box, { children: [_jsx(Text, { sx: {
                                                                     fontSize: 1,
                                                                     fontWeight: 'bold',
                                                                     fontFamily: 'mono',
-                                                                }, children: tool.name }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 0 }, children: tool.desc })] })] }, tool.name))) })] }), _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: ["The orchestrator agent delegates tasks to specialised subagents using the ", _jsx("code", { children: "delegate_task" }), " tool. Each subagent runs in an isolated child run with its own model and instructions."] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 0 }, children: "Token and request usage from each delegation is forwarded to the parent run, so budget limits stay accurate across delegation." })] })] })] })] }) }));
+                                                                }, children: tool.name }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 0 }, children: tool.desc })] })] }, tool.name))) })] }), _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: ["The orchestrator agent delegates tasks to specialised subagents using the ", _jsx("code", { children: "delegate_task" }), " tool. Each subagent runs in an isolated child run with its own model and instructions."] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 0 }, children: "Token and request usage from each delegation is forwarded to the parent run, so budget limits stay accurate across delegation." })] })] })] })] }) }));
 };
 export default AgentSubagentsExample;

package/lib/examples/AgentToolApprovalsExample.js

@@ -154,17 +154,7 @@ const AgentToolApprovalsInner = ({ onLogout, }) => {
     if (runtimeStatus === 'error' || hookError) {
         return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
-    return (_jsxs(Box, { sx: {
-            height: '100%',
-            minHeight: 0,
-            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." }) })), _jsx(Box, { sx: { flex: 1, minHeight: 0, display: 'flex' }, children: _jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: plugins }, agentName) }) })] }));
+    return (_jsxs(Box, { height: "100%", minHeight: 0, 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." }) })), _jsx(Box, { flex: 1, minHeight: 0, display: "flex", children: _jsx(Box, { flex: 1, minWidth: 0, children: _jsx(LoopEmbed, { serverUrl: agentBaseUrl, target: "local", showAgentVariants: true, agentId: agentId, editors: false, showHeader: true, plugins: plugins }, agentName) }) })] }));
 };
 const syncTokenToIamStore = (token) => {
     import('../state/substates').then(({ iamStore }) => {