@datalayer/agent-runtimes 1.3.88 → 1.3.90

package/lib/agents/AgentDetails.js

@@ -239,38 +239,7 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
         },
         enabled: !!agentId && runtime,
     });
-    return (_jsxs(Box, { sx: {
-            display: 'flex',
-            flexDirection: 'column',
-            height: '100%',
-            bg: 'canvas.default',
-            overflow: 'auto',
-        }, children: [showBackHeader && (_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    gap: 2,
-                    p: 3,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                }, children: [_jsx(IconButton, { icon: ArrowLeftIcon, "aria-label": "Back to chat", variant: "invisible", onClick: onBack }), _jsx(Heading, { as: "h2", sx: { fontSize: 3, fontWeight: 'semibold' }, children: "Agent Details" })] })), _jsxs(Box, { sx: {
-                    p: padded ? 3 : 0,
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 4,
-                }, children: [_jsxs(Box, { sx: {
-                            display: 'flex',
-                            alignItems: 'center',
-                            gap: 3,
-                            p: 3,
-                            bg: 'canvas.subtle',
-                            borderRadius: 2,
-                            border: '1px solid',
-                            borderColor: 'border.default',
-                        }, children: [_jsx(Box, { sx: {
-                                    p: 2,
-                                    bg: 'accent.subtle',
-                                    borderRadius: 2,
-                                }, children: icon ? (_jsx(Box, { sx: { display: 'inline-flex', color: 'accent.fg' }, children: icon })) : emoji ? (_jsx(Text, { sx: { fontSize: 5, lineHeight: 1 }, children: emoji })) : (_jsx(AiAgentIcon, { colored: true, size: 32 })) }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, fontWeight: 'semibold', mb: 1 }, children: name }), agentId && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["ID: ", agentId] }))] })] }), summary &&
+    return (_jsxs(Box, { display: "flex", flexDirection: "column", height: "100%", bg: "canvas.default", overflow: "auto", children: [showBackHeader && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, p: 3, borderBottom: "1px solid", borderColor: "border.default", children: [_jsx(IconButton, { icon: ArrowLeftIcon, "aria-label": "Back to chat", variant: "invisible", onClick: onBack }), _jsx(Heading, { as: "h2", sx: { fontSize: 3, fontWeight: 'semibold' }, children: "Agent Details" })] })), _jsxs(Box, { p: padded ? 3 : 0, display: "flex", flexDirection: "column", gap: 4, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 3, p: 3, bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: [_jsx(Box, { p: 2, bg: "accent.subtle", borderRadius: 2, children: icon ? (_jsx(Box, { display: "inline-flex", color: "accent.fg", children: icon })) : emoji ? (_jsx(Text, { sx: { fontSize: 5, lineHeight: 1 }, children: emoji })) : (_jsx(AiAgentIcon, { colored: true, size: 32 })) }), _jsxs(Box, { flex: 1, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, fontWeight: 'semibold', mb: 1 }, children: name }), agentId && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["ID: ", agentId] }))] })] }), summary &&
                         (summary.spec ||
                             summary.model ||
                             summary.where ||
@@ -280,33 +249,18 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                     fontWeight: 'semibold',
                                     mb: 2,
                                     color: 'fg.muted',
-                                }, children: "Agent" }), _jsxs(Box, { sx: {
-                                    p: 3,
-                                    bg: 'canvas.subtle',
-                                    borderRadius: 2,
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    gap: 1,
-                                }, children: [summary.description && (_jsx(Text, { as: "p", sx: { fontSize: 1, m: 0, mb: 1 }, children: summary.description })), [
+                                }, children: "Agent" }), _jsxs(Box, { p: 3, bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", display: "flex", flexDirection: "column", gap: 1, children: [summary.description && (_jsx(Text, { as: "p", sx: { fontSize: 1, m: 0, mb: 1 }, children: summary.description })), [
                                         ['Spec', summary.spec],
                                         ['Model', summary.model],
                                         ['Runs', summary.where],
                                     ]
                                         .filter(([, value]) => value)
-                                        .map(([key, value]) => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: [key, ":"] }), _jsx(Text, { sx: { fontSize: 0, fontFamily: 'mono' }, children: value })] }, key))), summary.skills && summary.skills.length > 0 && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Skills:" }), _jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: summary.skills.map(skill => (_jsx(Label, { variant: "secondary", size: "small", children: skill }, skill))) })] }))] })] })), url && (_jsx(_Fragment, { children: _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
+                                        .map(([key, value]) => (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: [key, ":"] }), _jsx(Text, { sx: { fontSize: 0, fontFamily: 'mono' }, children: value })] }, key))), summary.skills && summary.skills.length > 0 && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Skills:" }), _jsx(Box, { display: "flex", gap: 1, flexWrap: "wrap", children: summary.skills.map(skill => (_jsx(Label, { variant: "secondary", size: "small", children: skill }, skill))) })] }))] })] })), url && (_jsx(_Fragment, { children: _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
                                         fontSize: 1,
                                         fontWeight: 'semibold',
                                         mb: 2,
                                         color: 'fg.muted',
-                                    }, children: "Connection" }), _jsx(Box, { sx: {
-                                        p: 3,
-                                        bg: 'canvas.subtle',
-                                        borderRadius: 2,
-                                        border: '1px solid',
-                                        borderColor: 'border.default',
-                                    }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Label, { variant: "accent", size: "small", children: protocol.toUpperCase().replace(/-/g, ' ') }), _jsx(Text, { sx: {
+                                    }, children: "Connection" }), _jsx(Box, { p: 3, bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Label, { variant: "accent", size: "small", children: protocol.toUpperCase().replace(/-/g, ' ') }), _jsx(Text, { sx: {
                                                     fontSize: 1,
                                                     fontFamily: 'mono',
                                                     wordBreak: 'break-all',
@@ -315,60 +269,30 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                             fontWeight: 'semibold',
                                             mb: 2,
                                             color: 'fg.muted',
-                                        }, children: "Agentspec" }), _jsx(Box, { sx: {
-                                            p: 3,
-                                            bg: 'canvas.subtle',
-                                            borderRadius: 2,
-                                            border: '1px solid',
-                                            borderColor: 'border.default',
-                                        }, children: specLoading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading agent spec..." })] })) : agentSpec ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsx(Box, { children: _jsx(Button, { size: "small", leadingVisual: FileCodeIcon, onClick: () => setShowSpecPayload(true), children: "View spec payload" }) }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Model:" }), _jsx(Text, { sx: {
+                                        }, children: "Agentspec" }), _jsx(Box, { p: 3, bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: specLoading ? (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading agent spec..." })] })) : agentSpec ? (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 3, children: [_jsx(Box, { children: _jsx(Button, { size: "small", leadingVisual: FileCodeIcon, onClick: () => setShowSpecPayload(true), children: "View spec payload" }) }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Model:" }), _jsx(Text, { sx: {
                                                                         fontSize: 0,
                                                                         fontFamily: 'mono',
                                                                         color: 'fg.default',
-                                                                    }, children: agentSpec.model })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Library:" }), _jsx(Label, { variant: "secondary", size: "small", children: agentSpec.agent_library })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Codemode:" }), _jsx(Label, { variant: agentSpec.enable_codemode ? 'accent' : 'secondary', size: "small", children: agentSpec.enable_codemode ? 'Enabled' : 'Disabled' })] }), agentSpec.enable_skills &&
-                                                            agentSpec.skills.length > 0 && (_jsxs(Box, { sx: {
-                                                                display: 'flex',
-                                                                alignItems: 'center',
-                                                                gap: 2,
-                                                            }, children: [_jsx(Text, { sx: {
+                                                                    }, children: agentSpec.model })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Library:" }), _jsx(Label, { variant: "secondary", size: "small", children: agentSpec.agent_library })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Codemode:" }), _jsx(Label, { variant: agentSpec.enable_codemode ? 'accent' : 'secondary', size: "small", children: agentSpec.enable_codemode ? 'Enabled' : 'Disabled' })] }), agentSpec.enable_skills &&
+                                                            agentSpec.skills.length > 0 && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: {
                                                                         fontSize: 0,
                                                                         color: 'fg.muted',
                                                                         width: 100,
-                                                                    }, children: "Skills:" }), _jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: agentSpec.skills.map(skill => (_jsx(Label, { variant: "secondary", size: "small", children: skill }, skill))) })] }))] }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(NoteIcon, { size: 16 }), _jsx(Text, { sx: {
+                                                                    }, children: "Skills:" }), _jsx(Box, { display: "flex", gap: 1, flexWrap: "wrap", children: agentSpec.skills.map(skill => (_jsx(Label, { variant: "secondary", size: "small", children: skill }, skill))) })] }))] }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(NoteIcon, { size: 16 }), _jsx(Text, { sx: {
                                                                         fontSize: 0,
                                                                         fontWeight: 'semibold',
                                                                         color: 'fg.muted',
-                                                                    }, children: "System Prompt" })] }), _jsx(Box, { sx: {
-                                                                p: 2,
-                                                                bg: 'canvas.default',
-                                                                borderRadius: 2,
-                                                                border: '1px solid',
-                                                                borderColor: 'border.default',
-                                                                maxHeight: 200,
-                                                                overflow: 'auto',
-                                                            }, children: _jsx(Text, { sx: {
+                                                                    }, children: "System Prompt" })] }), _jsx(Box, { p: 2, bg: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.default", maxHeight: 200, overflow: "auto", children: _jsx(Text, { sx: {
                                                                     fontSize: 0,
                                                                     fontFamily: 'mono',
                                                                     whiteSpace: 'pre-wrap',
                                                                     wordBreak: 'break-word',
                                                                     color: 'fg.default',
-                                                                }, children: agentSpec.system_prompt }) })] }), agentSpec.system_prompt_codemode_addons && (_jsxs(Box, { sx: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        gap: 1,
-                                                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(CodeIcon, { size: 16 }), _jsx(Text, { sx: {
+                                                                }, children: agentSpec.system_prompt }) })] }), agentSpec.system_prompt_codemode_addons && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(CodeIcon, { size: 16 }), _jsx(Text, { sx: {
                                                                         fontSize: 0,
                                                                         fontWeight: 'semibold',
                                                                         color: 'fg.muted',
-                                                                    }, children: "Codemode Addon Prompt" }), agentSpec.enable_codemode ? (_jsx(Label, { variant: "accent", size: "small", children: "Active" })) : (_jsx(Label, { variant: "secondary", size: "small", children: "Inactive" }))] }), _jsx(Box, { sx: {
-                                                                p: 2,
-                                                                bg: 'canvas.default',
-                                                                borderRadius: 2,
-                                                                border: '1px solid',
-                                                                borderColor: 'border.default',
-                                                                maxHeight: 200,
-                                                                overflow: 'auto',
-                                                            }, children: _jsx(Text, { sx: {
+                                                                    }, children: "Codemode Addon Prompt" }), agentSpec.enable_codemode ? (_jsx(Label, { variant: "accent", size: "small", children: "Active" })) : (_jsx(Label, { variant: "secondary", size: "small", children: "Inactive" }))] }), _jsx(Box, { p: 2, bg: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.default", maxHeight: 200, overflow: "auto", children: _jsx(Text, { sx: {
                                                                     fontSize: 0,
                                                                     fontFamily: 'mono',
                                                                     whiteSpace: 'pre-wrap',
@@ -379,28 +303,14 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                             fontWeight: 'semibold',
                                             mb: 2,
                                             color: 'fg.muted',
-                                        }, children: "Code Sandbox" }), _jsx(Box, { sx: {
-                                            p: 3,
-                                            bg: 'canvas.subtle',
-                                            borderRadius: 2,
-                                            border: '1px solid',
-                                            borderColor: 'border.default',
-                                        }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ServerIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Variant:" }), _jsx(Label, { variant: agentSpec.sandbox.variant === 'jupyter-server'
+                                        }, children: "Code Sandbox" }), _jsx(Box, { p: 3, bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: _jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(ServerIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Variant:" }), _jsx(Label, { variant: agentSpec.sandbox.variant === 'jupyter-server'
                                                                 ? 'accent'
-                                                                : 'secondary', size: "small", children: agentSpec.sandbox.variant })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
+                                                                : 'secondary', size: "small", children: agentSpec.sandbox.variant })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: {
                                                                 fontSize: 0,
                                                                 color: 'fg.muted',
                                                                 width: 100,
                                                                 pl: 4,
-                                                            }, children: "Running:" }), agentSpec.sandbox.sandbox_running ? (_jsxs(Box, { sx: {
-                                                                display: 'flex',
-                                                                alignItems: 'center',
-                                                                gap: 1,
-                                                            }, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Yes" })] })) : (_jsxs(Box, { sx: {
-                                                                display: 'flex',
-                                                                alignItems: 'center',
-                                                                gap: 1,
-                                                            }, children: [_jsx(XCircleIcon, { size: 12, fill: "fg.muted" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No" })] }))] }), agentSpec.sandbox.variant === 'jupyter-server' && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
+                                                            }, children: "Running:" }), agentSpec.sandbox.sandbox_running ? (_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Yes" })] })) : (_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(XCircleIcon, { size: 12, fill: "fg.muted" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No" })] }))] }), agentSpec.sandbox.variant === 'jupyter-server' && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: {
                                                                         fontSize: 0,
                                                                         color: 'fg.muted',
                                                                         width: 100,
@@ -414,30 +324,18 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                                                         whiteSpace: 'nowrap',
                                                                     }, children: agentSpec.jupyter_sandbox ||
                                                                         agentSpec.sandbox.jupyter_url ||
-                                                                        'Not configured' })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
+                                                                        'Not configured' })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: {
                                                                         fontSize: 0,
                                                                         color: 'fg.muted',
                                                                         width: 100,
                                                                         pl: 4,
-                                                                    }, children: "Connection:" }), agentSpec.sandbox.jupyter_connected ? (_jsxs(Box, { sx: {
-                                                                        display: 'flex',
-                                                                        alignItems: 'center',
-                                                                        gap: 1,
-                                                                    }, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Connected" })] })) : (_jsxs(Box, { sx: {
-                                                                        display: 'flex',
-                                                                        flexDirection: 'column',
-                                                                        gap: 1,
-                                                                    }, children: [_jsxs(Box, { sx: {
-                                                                                display: 'flex',
-                                                                                alignItems: 'center',
-                                                                                gap: 1,
-                                                                            }, children: [_jsx(XCircleIcon, { size: 12, fill: "danger.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: "Not Connected" })] }), agentSpec.sandbox.jupyter_error && (_jsx(Text, { sx: {
+                                                                    }, children: "Connection:" }), agentSpec.sandbox.jupyter_connected ? (_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Connected" })] })) : (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(XCircleIcon, { size: 12, fill: "danger.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: "Not Connected" })] }), agentSpec.sandbox.jupyter_error && (_jsx(Text, { sx: {
                                                                                 fontSize: 0,
                                                                                 color: 'danger.fg',
                                                                                 fontFamily: 'mono',
                                                                                 whiteSpace: 'pre-wrap',
                                                                                 wordBreak: 'break-word',
-                                                                            }, children: agentSpec.sandbox.jupyter_error }))] }))] })] })), agentSpec.sandbox.generated_path && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
+                                                                            }, children: agentSpec.sandbox.jupyter_error }))] }))] })] })), agentSpec.sandbox.generated_path && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: {
                                                                 fontSize: 0,
                                                                 color: 'fg.muted',
                                                                 width: 100,
@@ -449,7 +347,7 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                                                 overflow: 'hidden',
                                                                 textOverflow: 'ellipsis',
                                                                 whiteSpace: 'nowrap',
-                                                            }, title: agentSpec.sandbox.generated_path, children: agentSpec.sandbox.generated_path })] })), agentSpec.sandbox.skills_path && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
+                                                            }, title: agentSpec.sandbox.generated_path, children: agentSpec.sandbox.generated_path })] })), agentSpec.sandbox.skills_path && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: {
                                                                 fontSize: 0,
                                                                 color: 'fg.muted',
                                                                 width: 100,
@@ -461,7 +359,7 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                                                 overflow: 'hidden',
                                                                 textOverflow: 'ellipsis',
                                                                 whiteSpace: 'nowrap',
-                                                            }, title: agentSpec.sandbox.skills_path, children: agentSpec.sandbox.skills_path })] })), agentSpec.sandbox.python_path && (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
+                                                            }, title: agentSpec.sandbox.skills_path, children: agentSpec.sandbox.skills_path })] })), agentSpec.sandbox.python_path && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: {
                                                                 fontSize: 0,
                                                                 color: 'fg.muted',
                                                                 width: 100,
@@ -478,43 +376,15 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                             fontWeight: 'semibold',
                                             mb: 2,
                                             color: 'fg.muted',
-                                        }, children: "Config MCP Servers" }), _jsx(Box, { sx: {
-                                            p: 3,
-                                            bg: 'canvas.subtle',
-                                            borderRadius: 2,
-                                            border: '1px solid',
-                                            borderColor: 'border.default',
-                                        }, children: !hasMcpLiveData && mcpLoading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading MCP status..." })] })) : mcpStatus ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: _jsxs(Text, { sx: { fontSize: 1 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold' }, children: mcpStatus.ready_count }), ' ', "ready,", ' ', _jsx(Text, { as: "span", sx: { fontWeight: 'semibold' }, children: mcpStatus.failed_count }), ' ', "failed"] }) }), mcpStatus.ready_servers.length > 0 && (_jsxs(Box, { sx: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        gap: 1,
-                                                    }, children: [_jsx(Text, { sx: {
+                                        }, children: "Config MCP Servers" }), _jsx(Box, { p: 3, bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: !hasMcpLiveData && mcpLoading ? (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading MCP status..." })] })) : mcpStatus ? (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, children: [_jsx(Box, { display: "flex", alignItems: "center", gap: 2, children: _jsxs(Text, { sx: { fontSize: 1 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold' }, children: mcpStatus.ready_count }), ' ', "ready,", ' ', _jsx(Text, { as: "span", sx: { fontWeight: 'semibold' }, children: mcpStatus.failed_count }), ' ', "failed"] }) }), mcpStatus.ready_servers.length > 0 && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, children: [_jsx(Text, { sx: {
                                                                 fontSize: 0,
                                                                 fontWeight: 'semibold',
                                                                 color: 'fg.muted',
-                                                            }, children: "Ready:" }), mcpStatus.ready_servers.map(server => (_jsxs(Box, { sx: {
-                                                                display: 'flex',
-                                                                alignItems: 'center',
-                                                                gap: 2,
-                                                                pl: 2,
-                                                            }, children: [_jsx(CheckCircleIcon, { size: 16, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 1 }, children: server })] }, server)))] })), Object.keys(mcpStatus.failed_servers).length > 0 && (_jsxs(Box, { sx: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        gap: 1,
-                                                    }, children: [_jsx(Text, { sx: {
+                                                            }, children: "Ready:" }), mcpStatus.ready_servers.map(server => (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, pl: 2, children: [_jsx(CheckCircleIcon, { size: 16, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 1 }, children: server })] }, server)))] })), Object.keys(mcpStatus.failed_servers).length > 0 && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, children: [_jsx(Text, { sx: {
                                                                 fontSize: 0,
                                                                 fontWeight: 'semibold',
                                                                 color: 'fg.muted',
-                                                            }, children: "Failed:" }), Object.entries(mcpStatus.failed_servers).map(([server, error]) => (_jsxs(Box, { sx: {
-                                                                display: 'flex',
-                                                                flexDirection: 'column',
-                                                                gap: 1,
-                                                                pl: 2,
-                                                            }, children: [_jsxs(Box, { sx: {
-                                                                        display: 'flex',
-                                                                        alignItems: 'center',
-                                                                        gap: 2,
-                                                                    }, children: [_jsx(XCircleIcon, { size: 16, fill: "danger.fg" }), _jsx(Text, { sx: { fontSize: 1 }, children: server })] }), _jsx(Text, { sx: {
+                                                            }, children: "Failed:" }), Object.entries(mcpStatus.failed_servers).map(([server, error]) => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, pl: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(XCircleIcon, { size: 16, fill: "danger.fg" }), _jsx(Text, { sx: { fontSize: 1 }, children: server })] }), _jsx(Text, { sx: {
                                                                         fontSize: 0,
                                                                         color: 'danger.fg',
                                                                         fontFamily: 'mono',
@@ -526,51 +396,19 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                             fontWeight: 'semibold',
                                             mb: 2,
                                             color: 'fg.muted',
-                                        }, children: "Codemode" }), _jsx(Box, { sx: {
-                                            p: 3,
-                                            bg: 'canvas.subtle',
-                                            borderRadius: 2,
-                                            border: '1px solid',
-                                            borderColor: 'border.default',
-                                        }, children: !hasCodemodeLiveData && codemodeLoading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading Codemode status..." })] })) : codemodeStatus ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsxs(Box, { sx: {
-                                                        display: 'flex',
-                                                        alignItems: 'center',
-                                                        justifyContent: 'space-between',
-                                                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(CodeIcon, { size: 16 }), _jsxs(Box, { children: [_jsx(Text, { id: "codemode-toggle-label", sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Codemode" }), _jsx(Text, { sx: {
+                                        }, children: "Codemode" }), _jsx(Box, { p: 3, bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: !hasCodemodeLiveData && codemodeLoading ? (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading Codemode status..." })] })) : codemodeStatus ? (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 3, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(CodeIcon, { size: 16 }), _jsxs(Box, { children: [_jsx(Text, { id: "codemode-toggle-label", sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Codemode" }), _jsx(Text, { sx: {
                                                                                 fontSize: 0,
                                                                                 color: 'fg.muted',
                                                                                 marginLeft: 1,
-                                                                            }, children: "MCP servers become programmatic tools" })] })] }), _jsx(ToggleSwitch, { "aria-labelledby": "codemode-toggle-label", checked: codemodeStatus.enabled, onClick: () => toggleCodemodeMutation.mutate(!codemodeStatus.enabled), disabled: toggleCodemodeMutation.isPending, size: "small" })] }), codemodeStatus.sandbox && (_jsxs(Box, { sx: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        gap: 2,
-                                                        p: 2,
-                                                        bg: 'canvas.default',
-                                                        borderRadius: 2,
-                                                        border: '1px solid',
-                                                        borderColor: 'border.default',
-                                                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(CodeIcon, { size: 16 }), _jsx(Text, { sx: {
+                                                                            }, children: "MCP servers become programmatic tools" })] })] }), _jsx(ToggleSwitch, { "aria-labelledby": "codemode-toggle-label", checked: codemodeStatus.enabled, onClick: () => toggleCodemodeMutation.mutate(!codemodeStatus.enabled), disabled: toggleCodemodeMutation.isPending, size: "small" })] }), codemodeStatus.sandbox && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 2, p: 2, bg: "canvas.default", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(CodeIcon, { size: 16 }), _jsx(Text, { sx: {
                                                                         fontSize: 0,
                                                                         fontWeight: 'semibold',
                                                                         color: 'fg.muted',
-                                                                    }, children: "Code Sandbox" })] }), _jsxs(Box, { sx: {
-                                                                display: 'flex',
-                                                                flexDirection: 'column',
-                                                                gap: 1,
-                                                                pl: 4,
-                                                            }, children: [_jsxs(Box, { sx: {
-                                                                        display: 'flex',
-                                                                        alignItems: 'center',
-                                                                        gap: 2,
-                                                                    }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "Variant:" }), _jsx(Label, { variant: codemodeStatus.sandbox.variant ===
+                                                                    }, children: "Code Sandbox" })] }), _jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, pl: 4, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "Variant:" }), _jsx(Label, { variant: codemodeStatus.sandbox.variant ===
                                                                                 'jupyter-server'
                                                                                 ? 'accent'
                                                                                 : 'secondary', size: "small", children: codemodeStatus.sandbox.variant })] }), codemodeStatus.sandbox.variant ===
-                                                                    'jupyter-server' && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
-                                                                                display: 'flex',
-                                                                                alignItems: 'center',
-                                                                                gap: 2,
-                                                                            }, children: [_jsx(Text, { sx: {
+                                                                    'jupyter-server' && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: {
                                                                                         fontSize: 0,
                                                                                         color: 'fg.muted',
                                                                                         width: 80,
@@ -582,49 +420,17 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                                                                         textOverflow: 'ellipsis',
                                                                                         whiteSpace: 'nowrap',
                                                                                     }, children: codemodeStatus.sandbox.jupyter_url ||
-                                                                                        'Not configured' })] }), _jsxs(Box, { sx: {
-                                                                                display: 'flex',
-                                                                                alignItems: 'center',
-                                                                                gap: 2,
-                                                                            }, children: [_jsx(Text, { sx: {
+                                                                                        'Not configured' })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: {
                                                                                         fontSize: 0,
                                                                                         color: 'fg.muted',
                                                                                         width: 80,
-                                                                                    }, children: "Status:" }), codemodeStatus.sandbox.jupyter_connected ? (_jsxs(Box, { sx: {
-                                                                                        display: 'flex',
-                                                                                        alignItems: 'center',
-                                                                                        gap: 1,
-                                                                                    }, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Connected" })] })) : (_jsxs(Box, { sx: {
-                                                                                        display: 'flex',
-                                                                                        flexDirection: 'column',
-                                                                                        gap: 1,
-                                                                                    }, children: [_jsxs(Box, { sx: {
-                                                                                                display: 'flex',
-                                                                                                alignItems: 'center',
-                                                                                                gap: 1,
-                                                                                            }, children: [_jsx(XCircleIcon, { size: 12, fill: "danger.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: "Not Connected" })] }), codemodeStatus.sandbox.jupyter_error && (_jsx(Text, { sx: {
+                                                                                    }, children: "Status:" }), codemodeStatus.sandbox.jupyter_connected ? (_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Connected" })] })) : (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(XCircleIcon, { size: 12, fill: "danger.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: "Not Connected" })] }), codemodeStatus.sandbox.jupyter_error && (_jsx(Text, { sx: {
                                                                                                 fontSize: 0,
                                                                                                 color: 'danger.fg',
                                                                                                 fontFamily: 'mono',
                                                                                                 whiteSpace: 'pre-wrap',
                                                                                                 wordBreak: 'break-word',
-                                                                                            }, children: codemodeStatus.sandbox.jupyter_error }))] }))] })] })), _jsxs(Box, { sx: {
-                                                                        display: 'flex',
-                                                                        alignItems: 'center',
-                                                                        gap: 2,
-                                                                    }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "Running:" }), codemodeStatus.sandbox.sandbox_running ? (_jsxs(Box, { sx: {
-                                                                                display: 'flex',
-                                                                                alignItems: 'center',
-                                                                                gap: 1,
-                                                                            }, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Yes" })] })) : (_jsxs(Box, { sx: {
-                                                                                display: 'flex',
-                                                                                alignItems: 'center',
-                                                                                gap: 1,
-                                                                            }, children: [_jsx(XCircleIcon, { size: 12, fill: "fg.muted" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No" })] }))] }), codemodeStatus.sandbox.generated_path && (_jsxs(Box, { sx: {
-                                                                        display: 'flex',
-                                                                        alignItems: 'center',
-                                                                        gap: 2,
-                                                                    }, children: [_jsx(Text, { sx: {
+                                                                                            }, children: codemodeStatus.sandbox.jupyter_error }))] }))] })] })), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "Running:" }), codemodeStatus.sandbox.sandbox_running ? (_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(CheckCircleIcon, { size: 12, fill: "success.fg" }), _jsx(Text, { sx: { fontSize: 0, color: 'success.fg' }, children: "Yes" })] })) : (_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(XCircleIcon, { size: 12, fill: "fg.muted" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No" })] }))] }), codemodeStatus.sandbox.generated_path && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: {
                                                                                 fontSize: 0,
                                                                                 color: 'fg.muted',
                                                                                 width: 80,
@@ -635,11 +441,7 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                                                                 overflow: 'hidden',
                                                                                 textOverflow: 'ellipsis',
                                                                                 whiteSpace: 'nowrap',
-                                                                            }, title: codemodeStatus.sandbox.generated_path, children: codemodeStatus.sandbox.generated_path })] })), codemodeStatus.sandbox.skills_path && (_jsxs(Box, { sx: {
-                                                                        display: 'flex',
-                                                                        alignItems: 'center',
-                                                                        gap: 2,
-                                                                    }, children: [_jsx(Text, { sx: {
+                                                                            }, title: codemodeStatus.sandbox.generated_path, children: codemodeStatus.sandbox.generated_path })] })), codemodeStatus.sandbox.skills_path && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: {
                                                                                 fontSize: 0,
                                                                                 color: 'fg.muted',
                                                                                 width: 80,
@@ -650,11 +452,7 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                                                                 overflow: 'hidden',
                                                                                 textOverflow: 'ellipsis',
                                                                                 whiteSpace: 'nowrap',
-                                                                            }, title: codemodeStatus.sandbox.skills_path, children: codemodeStatus.sandbox.skills_path })] })), codemodeStatus.sandbox.python_path && (_jsxs(Box, { sx: {
-                                                                        display: 'flex',
-                                                                        alignItems: 'center',
-                                                                        gap: 2,
-                                                                    }, children: [_jsx(Text, { sx: {
+                                                                            }, title: codemodeStatus.sandbox.skills_path, children: codemodeStatus.sandbox.skills_path })] })), codemodeStatus.sandbox.python_path && (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Text, { sx: {
                                                                                 fontSize: 0,
                                                                                 color: 'fg.muted',
                                                                                 width: 80,
@@ -665,55 +463,19 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                                                                 overflow: 'hidden',
                                                                                 textOverflow: 'ellipsis',
                                                                                 whiteSpace: 'nowrap',
-                                                                            }, title: codemodeStatus.sandbox.python_path, children: codemodeStatus.sandbox.python_path })] }))] })] })), codemodeStatus.skills.length > 0 && (_jsxs(Box, { sx: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        gap: 1,
-                                                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(BriefcaseIcon, { size: 16 }), _jsxs(Text, { sx: {
+                                                                            }, title: codemodeStatus.sandbox.python_path, children: codemodeStatus.sandbox.python_path })] }))] })] })), codemodeStatus.skills.length > 0 && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(BriefcaseIcon, { size: 16 }), _jsxs(Text, { sx: {
                                                                         fontSize: 0,
                                                                         fontWeight: 'semibold',
                                                                         color: 'fg.muted',
-                                                                    }, children: ["Active Skills (", codemodeStatus.skills.length, ")"] })] }), codemodeStatus.skills.map(skill => (_jsxs(Box, { sx: {
-                                                                display: 'flex',
-                                                                flexDirection: 'column',
-                                                                gap: 1,
-                                                                pl: 4,
-                                                                py: 1,
-                                                                borderLeft: '2px solid',
-                                                                borderColor: 'accent.emphasis',
-                                                            }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: skill.name }), skill.description && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: skill.description })), skill.tags && skill.tags.length > 0 && (_jsx(Box, { sx: {
-                                                                        display: 'flex',
-                                                                        gap: 1,
-                                                                        flexWrap: 'wrap',
-                                                                    }, children: skill.tags.map(tag => (_jsx(Label, { variant: "secondary", size: "small", children: tag }, tag))) }))] }, skill.name)))] })), codemodeStatus.available_skills.length > 0 &&
-                                                    codemodeStatus.skills.length === 0 && (_jsxs(Box, { sx: {
-                                                        display: 'flex',
-                                                        flexDirection: 'column',
-                                                        gap: 1,
-                                                    }, children: [_jsxs(Text, { sx: {
+                                                                    }, children: ["Active Skills (", codemodeStatus.skills.length, ")"] })] }), codemodeStatus.skills.map(skill => (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, pl: 4, py: 1, borderLeft: "2px solid", borderColor: "accent.emphasis", children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: skill.name }), skill.description && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: skill.description })), skill.tags && skill.tags.length > 0 && (_jsx(Box, { display: "flex", gap: 1, flexWrap: "wrap", children: skill.tags.map(tag => (_jsx(Label, { variant: "secondary", size: "small", children: tag }, tag))) }))] }, skill.name)))] })), codemodeStatus.available_skills.length > 0 &&
+                                                    codemodeStatus.skills.length === 0 && (_jsxs(Box, { display: "flex", flexDirection: "column", gap: 1, children: [_jsxs(Text, { sx: {
                                                                 fontSize: 0,
                                                                 fontWeight: 'semibold',
                                                                 color: 'fg.muted',
-                                                            }, children: ["Available Skills (", codemodeStatus.available_skills.length, ")"] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Enable skills via CLI with --skills flag" }), _jsx(Box, { sx: {
-                                                                display: 'flex',
-                                                                gap: 1,
-                                                                flexWrap: 'wrap',
-                                                                mt: 1,
-                                                            }, children: codemodeStatus.available_skills.map(skill => (_jsx(Label, { variant: "secondary", size: "small", children: skill.name }, skill.name))) })] })), codemodeStatus.available_skills.length === 0 && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No CodeMode skills are available for this agent. You can still use MCP tools by selecting MCP servers." }))] })) : hasCodemodeLiveData ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Waiting for Codemode status from WebSocket stream..." })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load Codemode status" })) })] }), showUsage && agentId && (_jsx(ContextPanel, { agentId: agentId, apiBase: apiBase, liveData: resolvedContextSnapshot, messageCount: messageCount, chartHeight: "200px" })), showUsage && agentId && (_jsxs(Box, { sx: { mt: 3 }, children: [_jsxs(Box, { sx: {
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'space-between',
-                                            mb: 2,
-                                        }, children: [_jsx(Heading, { as: "h4", sx: {
+                                                            }, children: ["Available Skills (", codemodeStatus.available_skills.length, ")"] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Enable skills via CLI with --skills flag" }), _jsx(Box, { display: "flex", gap: 1, flexWrap: "wrap", mt: 1, children: codemodeStatus.available_skills.map(skill => (_jsx(Label, { variant: "secondary", size: "small", children: skill.name }, skill.name))) })] })), codemodeStatus.available_skills.length === 0 && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No CodeMode skills are available for this agent. You can still use MCP tools by selecting MCP servers." }))] })) : hasCodemodeLiveData ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Waiting for Codemode status from WebSocket stream..." })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load Codemode status" })) })] }), showUsage && agentId && (_jsx(ContextPanel, { agentId: agentId, apiBase: apiBase, liveData: resolvedContextSnapshot, messageCount: messageCount, chartHeight: "200px" })), showUsage && agentId && (_jsxs(Box, { mt: 3, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsx(Heading, { as: "h4", sx: {
                                                     fontSize: 1,
                                                     fontWeight: 'semibold',
                                                     color: 'fg.muted',
-                                                }, children: "Context Snapshot" }), _jsx(Button, { size: "small", variant: "invisible", leadingVisual: DownloadIcon, onClick: () => downloadContextSnapshotAsCSV(agentId, apiBase, resolvedFullContext), children: "Download" })] }), _jsx(Box, { sx: {
-                                            p: 3,
-                                            bg: 'canvas.subtle',
-                                            borderRadius: 2,
-                                            border: '1px solid',
-                                            borderColor: 'border.default',
-                                        }, children: _jsx(ContextInspector, { agentId: agentId, apiBase: apiBase, liveData: resolvedFullContext }) })] })), _jsx(AgentIdentity, { providers: identityProviders, title: "Connected Accounts", showHeader: true, showDescription: true, description: "OAuth identities connected to this agent. Agents can use these to access external services like GitHub repositories on your behalf.", showExpirationDetails: true, allowReconnect: Boolean(identityProviders), onConnect: onIdentityConnect, onDisconnect: onIdentityDisconnect })] })), showBackHeader && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { variant: "primary", onClick: onBack, sx: { width: '100%' }, children: "Back to Chat" }) }))] }), showSpecPayload && agentSpec ? (_jsx(SpecPayloadPreview, { spec: agentSpec, onClose: () => setShowSpecPayload(false) })) : null] }));
+                                                }, children: "Context Snapshot" }), _jsx(Button, { size: "small", variant: "invisible", leadingVisual: DownloadIcon, onClick: () => downloadContextSnapshotAsCSV(agentId, apiBase, resolvedFullContext), children: "Download" })] }), _jsx(Box, { p: 3, bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", children: _jsx(ContextInspector, { agentId: agentId, apiBase: apiBase, liveData: resolvedFullContext }) })] })), _jsx(AgentIdentity, { providers: identityProviders, title: "Connected Accounts", showHeader: true, showDescription: true, description: "OAuth identities connected to this agent. Agents can use these to access external services like GitHub repositories on your behalf.", showExpirationDetails: true, allowReconnect: Boolean(identityProviders), onConnect: onIdentityConnect, onDisconnect: onIdentityDisconnect })] })), showBackHeader && (_jsx(Box, { mt: 2, children: _jsx(Button, { variant: "primary", onClick: onBack, sx: { width: '100%' }, children: "Back to Chat" }) }))] }), showSpecPayload && agentSpec ? (_jsx(SpecPayloadPreview, { spec: agentSpec, onClose: () => setShowSpecPayload(false) })) : null] }));
 }
 export default AgentDetails;

package/lib/agents/AgentRuntimeChat.js

@@ -170,14 +170,7 @@ export function AgentRuntimeChat({ agentSpecId, title, brandIcon, description, p
         enableEphemeralNotebook: true,
     };
     if (launchingError) {
-        return (_jsxs(Box, { sx: {
-                p: 3,
-                borderRadius: 2,
-                border: '1px solid',
-                borderColor: 'danger.emphasis',
-                bg: 'danger.subtle',
-                color: 'danger.fg',
-            }, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "Failed to launch the agent" }), _jsx(Text, { sx: { display: 'block', mt: 1, fontSize: 1 }, children: launchingError })] }));
+        return (_jsxs(Box, { p: 3, borderRadius: 2, border: "1px solid", borderColor: "danger.emphasis", bg: "danger.subtle", color: "danger.fg", children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "Failed to launch the agent" }), _jsx(Text, { sx: { display: 'block', mt: 1, fontSize: 1 }, children: launchingError })] }));
     }
     // Live and ready: interactive chat wired to the runtime endpoint.
     if (isInteractiveReady) {