@datalayer/agent-runtimes 0.0.9 → 0.0.11

package/lib/components/chat/components/AgentDetails.js

@@ -1,18 +1,27 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright (c) 2025-2026 Datalayer, Inc.
 // Distributed under the terms of the Modified BSD License.
 /**
  * AgentDetails component - Shows detailed information about the agent
  * including name, protocol, URL, message count, and context details.
  */
-import { ArrowLeftIcon, GlobeIcon, CommentDiscussionIcon, CheckCircleIcon, XCircleIcon, } from '@primer/octicons-react';
-import { Box, Button, Heading, IconButton, Text, Label, Spinner, } from '@primer/react';
+import { ArrowLeftIcon, CheckCircleIcon, XCircleIcon, CodeIcon, ZapIcon, DownloadIcon, NoteIcon, ServerIcon, } from '@primer/octicons-react';
+import { Button, Heading, IconButton, Text, Label, Spinner, ToggleSwitch, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { AiAgentIcon } from '@datalayer/icons-react';
-import { useQuery } from '@tanstack/react-query';
-import { ContextUsage } from './ContextUsage';
-import { ContextDistribution } from './ContextDistribution';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { ContextPanel } from './ContextPanel';
+import { ContextInspector } from './ContextInspector';
 import { AgentIdentity } from './AgentIdentity';
-function getLocalApiBase() {
+/**
+ * Get the API base URL for fetching data.
+ * If apiBase prop is provided, use it.
+ * Otherwise, fall back to localhost for local development.
+ */
+function getApiBase(apiBase) {
+    if (apiBase) {
+        return apiBase;
+    }
     if (typeof window === 'undefined') {
         return '';
     }
@@ -21,16 +30,155 @@ function getLocalApiBase() {
         ? 'http://127.0.0.1:8765'
         : '';
 }
+/**
+ * Convert context snapshot data to CSV format and trigger download
+ */
+async function downloadContextSnapshotAsCSV(agentId, apiBase) {
+    const base = getApiBase(apiBase);
+    const response = await fetch(`${base}/api/v1/configure/agents/${encodeURIComponent(agentId)}/full-context`);
+    if (!response.ok) {
+        throw new Error('Failed to fetch context snapshot');
+    }
+    const data = await response.json();
+    const rows = [];
+    // Header section
+    rows.push(['Context Snapshot for Agent', data.agentId]);
+    rows.push(['Generated At', new Date().toISOString()]);
+    rows.push([]);
+    // Model Configuration
+    rows.push(['=== Model Configuration ===']);
+    rows.push([
+        'Model Name',
+        data.modelConfiguration?.modelName || 'Not specified',
+    ]);
+    rows.push([
+        'Context Window',
+        String(data.modelConfiguration?.contextWindow || 0),
+    ]);
+    rows.push([]);
+    // Token Summary
+    rows.push(['=== Token Summary ===']);
+    rows.push(['Category', 'Tokens']);
+    rows.push(['System Prompts', String(data.tokenSummary?.systemPrompts || 0)]);
+    rows.push(['Tools', String(data.tokenSummary?.tools || 0)]);
+    rows.push(['Memory', String(data.tokenSummary?.memory || 0)]);
+    rows.push(['History', String(data.tokenSummary?.history || 0)]);
+    rows.push(['Current', String(data.tokenSummary?.current || 0)]);
+    rows.push(['Total', String(data.tokenSummary?.total || 0)]);
+    rows.push(['Context Window', String(data.tokenSummary?.contextWindow || 0)]);
+    rows.push([
+        'Usage Percent',
+        `${(data.tokenSummary?.usagePercent || 0).toFixed(2)}%`,
+    ]);
+    rows.push([]);
+    // System Prompts
+    if (data.systemPrompts?.length > 0) {
+        rows.push(['=== System Prompts ===']);
+        rows.push(['Index', 'Tokens', 'Content']);
+        data.systemPrompts.forEach((prompt, idx) => {
+            rows.push([
+                String(idx + 1),
+                String(prompt.tokens),
+                prompt.content.replace(/"/g, '""'),
+            ]);
+        });
+        rows.push([]);
+    }
+    // Tools
+    if (data.tools?.length > 0) {
+        rows.push(['=== Tools ===']);
+        rows.push([
+            'Name',
+            'Description',
+            'Source Type',
+            'Is Async',
+            'Requires Approval',
+            'Total Tokens',
+        ]);
+        data.tools.forEach(tool => {
+            rows.push([
+                tool.name,
+                (tool.description || '').replace(/"/g, '""'),
+                tool.sourceType,
+                String(tool.isAsync),
+                String(tool.requiresApproval),
+                String(tool.totalTokens),
+            ]);
+        });
+        rows.push([]);
+    }
+    // Messages
+    if (data.messages?.length > 0) {
+        rows.push(['=== Messages ===']);
+        rows.push([
+            'Role',
+            'In Context',
+            'Estimated Tokens',
+            'Tool Name',
+            'Is Tool Call',
+            'Is Tool Result',
+            'Timestamp',
+            'Content',
+        ]);
+        data.messages.forEach(msg => {
+            rows.push([
+                msg.role,
+                String(msg.inContext),
+                String(msg.estimatedTokens),
+                msg.toolName || '',
+                String(msg.isToolCall),
+                String(msg.isToolResult),
+                msg.timestamp || '',
+                msg.content.replace(/"/g, '""'),
+            ]);
+        });
+        rows.push([]);
+    }
+    // Memory Blocks
+    if (data.memoryBlocks?.length > 0) {
+        rows.push(['=== Memory Blocks ===']);
+        rows.push(['Index', 'Content (JSON)']);
+        data.memoryBlocks.forEach((block, idx) => {
+            rows.push([String(idx + 1), JSON.stringify(block).replace(/"/g, '""')]);
+        });
+        rows.push([]);
+    }
+    // Tool Environment
+    if (data.toolEnvironment && Object.keys(data.toolEnvironment).length > 0) {
+        rows.push(['=== Tool Environment ===']);
+        rows.push(['Key', 'Value']);
+        Object.entries(data.toolEnvironment).forEach(([key, value]) => {
+            rows.push([key, value]);
+        });
+        rows.push([]);
+    }
+    // Convert to CSV string
+    const csvContent = rows
+        .map(row => row.map(cell => `"${cell}"`).join(','))
+        .join('\n');
+    // Create and trigger download
+    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
+    const link = document.createElement('a');
+    const url = URL.createObjectURL(blob);
+    link.setAttribute('href', url);
+    link.setAttribute('download', `context-snapshot-${agentId}-${new Date().toISOString().slice(0, 10)}.csv`);
+    link.style.visibility = 'hidden';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+}
 /**
  * AgentDetails component displays comprehensive information about the agent.
  */
-export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, agentId, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, }) {
+export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, agentId, apiBase, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, }) {
+    const queryClient = useQueryClient();
     // Fetch MCP toolsets status
     const { data: mcpStatus, isLoading: mcpLoading } = useQuery({
-        queryKey: ['mcp-toolsets-status'],
+        queryKey: ['mcp-toolsets-status', apiBase],
         queryFn: async () => {
-            const apiBase = getLocalApiBase();
-            const response = await fetch(`${apiBase}/api/v1/configure/mcp-toolsets-status`);
+            const base = getApiBase(apiBase);
+            const response = await fetch(`${base}/api/v1/configure/mcp-toolsets-status`);
             if (!response.ok) {
                 throw new Error('Failed to fetch MCP status');
             }
@@ -38,6 +186,53 @@ export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, a
         },
         refetchInterval: 5000, // Refresh every 5 seconds
     });
+    // Fetch Codemode status
+    const { data: codemodeStatus, isLoading: codemodeLoading } = useQuery({
+        queryKey: ['codemode-status', apiBase],
+        queryFn: async () => {
+            const base = getApiBase(apiBase);
+            const response = await fetch(`${base}/api/v1/configure/codemode-status`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch Codemode status');
+            }
+            return response.json();
+        },
+        refetchInterval: 5000, // Refresh every 5 seconds
+    });
+    // Mutation to toggle codemode
+    const toggleCodemodeMutation = useMutation({
+        mutationFn: async (enabled) => {
+            const base = getApiBase(apiBase);
+            const response = await fetch(`${base}/api/v1/configure/codemode/toggle`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ enabled }),
+            });
+            if (!response.ok) {
+                throw new Error('Failed to toggle codemode');
+            }
+            return response.json();
+        },
+        onSuccess: () => {
+            // Invalidate the codemode status query to refetch
+            queryClient.invalidateQueries({ queryKey: ['codemode-status'] });
+        },
+    });
+    // Fetch agent spec (original creation request with separated system prompts)
+    const { data: agentSpec, isLoading: specLoading } = useQuery({
+        queryKey: ['agent-spec', agentId, apiBase],
+        queryFn: async () => {
+            const base = getApiBase(apiBase);
+            const response = await fetch(`${base}/api/v1/configure/agents/${encodeURIComponent(agentId)}/spec`);
+            if (!response.ok) {
+                throw new Error('Failed to fetch agent spec');
+            }
+            return response.json();
+        },
+        enabled: !!agentId,
+    });
     return (_jsxs(Box, { sx: {
             display: 'flex',
             flexDirection: 'column',
@@ -64,7 +259,7 @@ export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, a
                                     p: 2,
                                     bg: 'accent.subtle',
                                     borderRadius: 2,
-                                }, children: _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 }), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center' }, children: [_jsx(Label, { variant: "accent", size: "small", children: protocol.toUpperCase().replace(/-/g, ' ') }), agentId && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["ID: ", agentId] }))] })] })] }), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
+                                }, children: _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] }))] })] }), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
                                     fontSize: 1,
                                     fontWeight: 'semibold',
                                     mb: 2,
@@ -75,7 +270,7 @@ export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, a
                                     borderRadius: 2,
                                     border: '1px solid',
                                     borderColor: 'border.default',
-                                }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(GlobeIcon, { size: 16 }), _jsx(Text, { sx: {
+                                }, 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: {
                                                 fontSize: 1,
                                                 fontFamily: 'mono',
                                                 wordBreak: 'break-all',
@@ -84,21 +279,152 @@ export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, a
                                     fontWeight: 'semibold',
                                     mb: 2,
                                     color: 'fg.muted',
-                                }, children: "Conversation" }), _jsxs(Box, { sx: {
+                                }, children: "Agent Spec" }), _jsx(Box, { sx: {
                                     p: 3,
                                     bg: 'canvas.subtle',
                                     borderRadius: 2,
                                     border: '1px solid',
                                     borderColor: 'border.default',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: 2,
-                                }, children: [_jsx(CommentDiscussionIcon, { size: 16 }), _jsxs(Text, { sx: { fontSize: 1 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold' }, children: messageCount }), ' ', messageCount === 1 ? 'message' : 'messages'] })] })] }), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
+                                }, 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: [_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: {
+                                                                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: { 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: {
+                                                                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: {
+                                                            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: {
+                                                                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: {
+                                                            fontSize: 0,
+                                                            fontFamily: 'mono',
+                                                            whiteSpace: 'pre-wrap',
+                                                            wordBreak: 'break-word',
+                                                            color: 'fg.default',
+                                                        }, children: agentSpec.system_prompt_codemode_addons }) })] }))] })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No agent spec available" })) })] }), agentSpec?.sandbox && (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
                                     fontSize: 1,
                                     fontWeight: 'semibold',
                                     mb: 2,
                                     color: 'fg.muted',
-                                }, children: "MCP Toolsets" }), _jsx(Box, { sx: {
+                                }, 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 === 'local-jupyter'
+                                                        ? 'accent'
+                                                        : 'secondary', size: "small", children: agentSpec.sandbox.variant })] }), _jsxs(Box, { sx: { 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 === 'local-jupyter' && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                color: 'fg.muted',
+                                                                width: 100,
+                                                                pl: 4,
+                                                            }, children: "Jupyter URL:" }), _jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                fontFamily: 'mono',
+                                                                color: 'fg.default',
+                                                                overflow: 'hidden',
+                                                                textOverflow: 'ellipsis',
+                                                                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: {
+                                                                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: {
+                                                                        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: {
+                                                        fontSize: 0,
+                                                        color: 'fg.muted',
+                                                        width: 100,
+                                                        pl: 4,
+                                                    }, children: "Generated:" }), _jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        fontFamily: 'mono',
+                                                        color: 'fg.default',
+                                                        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: {
+                                                        fontSize: 0,
+                                                        color: 'fg.muted',
+                                                        width: 100,
+                                                        pl: 4,
+                                                    }, children: "Skills:" }), _jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        fontFamily: 'mono',
+                                                        color: 'fg.default',
+                                                        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: {
+                                                        fontSize: 0,
+                                                        color: 'fg.muted',
+                                                        width: 100,
+                                                        pl: 4,
+                                                    }, children: "Python:" }), _jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        fontFamily: 'mono',
+                                                        color: 'fg.default',
+                                                        overflow: 'hidden',
+                                                        textOverflow: 'ellipsis',
+                                                        whiteSpace: 'nowrap',
+                                                    }, title: agentSpec.sandbox.python_path, children: agentSpec.sandbox.python_path })] }))] }) })] })), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
+                                    fontSize: 1,
+                                    fontWeight: 'semibold',
+                                    mb: 2,
+                                    color: 'fg.muted',
+                                }, children: "Config MCP Servers" }), _jsx(Box, { sx: {
                                     p: 3,
                                     bg: 'canvas.subtle',
                                     borderRadius: 2,
@@ -133,17 +459,141 @@ export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, a
                                                                 pl: 4,
                                                                 whiteSpace: 'pre-wrap',
                                                                 wordBreak: 'break-word',
-                                                            }, children: error.split('\n')[0] })] }, server)))] }))] })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load MCP status" })) })] }), agentId && _jsx(ContextUsage, { agentId: agentId }), agentId && (_jsxs(Box, { sx: { mt: 3 }, children: [_jsx(Heading, { as: "h4", sx: {
+                                                            }, children: error.split('\n')[0] })] }, server)))] }))] })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load MCP status" })) })] }), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
                                     fontSize: 1,
                                     fontWeight: 'semibold',
                                     mb: 2,
                                     color: 'fg.muted',
-                                }, children: "Current Context Distribution" }), _jsx(Box, { sx: {
+                                }, children: "Codemode" }), _jsx(Box, { sx: {
+                                    p: 3,
+                                    bg: 'canvas.subtle',
+                                    borderRadius: 2,
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                }, children: 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: { 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: {
+                                                                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 === 'local-jupyter'
+                                                                        ? 'accent'
+                                                                        : 'secondary', size: "small", children: codemodeStatus.sandbox.variant })] }), codemodeStatus.sandbox.variant === 'local-jupyter' && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                                                                        display: 'flex',
+                                                                        alignItems: 'center',
+                                                                        gap: 2,
+                                                                    }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "URL:" }), _jsx(Text, { sx: {
+                                                                                fontSize: 0,
+                                                                                fontFamily: 'mono',
+                                                                                color: 'fg.default',
+                                                                                overflow: 'hidden',
+                                                                                textOverflow: 'ellipsis',
+                                                                                whiteSpace: 'nowrap',
+                                                                            }, children: codemodeStatus.sandbox.jupyter_url ||
+                                                                                'Not configured' })] }), _jsxs(Box, { sx: {
+                                                                        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: {
+                                                                                        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: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "Generated:" }), _jsx(Text, { sx: {
+                                                                        fontSize: 0,
+                                                                        fontFamily: 'mono',
+                                                                        color: 'fg.default',
+                                                                        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: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "Skills:" }), _jsx(Text, { sx: {
+                                                                        fontSize: 0,
+                                                                        fontFamily: 'mono',
+                                                                        color: 'fg.default',
+                                                                        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: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "Python Path:" }), _jsx(Text, { sx: {
+                                                                        fontSize: 0,
+                                                                        fontFamily: 'mono',
+                                                                        color: 'fg.default',
+                                                                        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(ZapIcon, { 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: {
+                                                        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 skills available. Add skills to the skills/ directory." }))] })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load Codemode status" })) })] }), agentId && (_jsx(ContextPanel, { agentId: agentId, apiBase: apiBase, messageCount: messageCount, chartHeight: "200px" })), 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: {
+                                            fontSize: 1,
+                                            fontWeight: 'semibold',
+                                            color: 'fg.muted',
+                                        }, children: "Context Snapshot" }), _jsx(Button, { size: "small", variant: "invisible", leadingVisual: DownloadIcon, onClick: () => downloadContextSnapshotAsCSV(agentId, apiBase), children: "Download" })] }), _jsx(Box, { sx: {
                                     p: 3,
                                     bg: 'canvas.subtle',
                                     borderRadius: 2,
                                     border: '1px solid',
                                     borderColor: 'border.default',
-                                }, children: _jsx(ContextDistribution, { agentId: agentId, height: "250px" }) })] })), _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 }), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { variant: "primary", onClick: onBack, sx: { width: '100%' }, children: "Back to Chat" }) })] })] }));
+                                }, children: _jsx(ContextInspector, { agentId: agentId, apiBase: apiBase }) })] })), _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 }), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { variant: "primary", onClick: onBack, sx: { width: '100%' }, children: "Back to Chat" }) })] })] }));
 }
 export default AgentDetails;