@datalayer/agent-runtimes 0.0.9 → 0.0.10

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, } 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,40 @@ 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'] });
+        },
+    });
     return (_jsxs(Box, { sx: {
             display: 'flex',
             flexDirection: 'column',
@@ -64,7 +246,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 +257,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 +266,7 @@ export function AgentDetails({ name = 'AI Agent', protocol, url, messageCount, a
                                     fontWeight: 'semibold',
                                     mb: 2,
                                     color: 'fg.muted',
-                                }, children: "Conversation" }), _jsxs(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: {
-                                    fontSize: 1,
-                                    fontWeight: 'semibold',
-                                    mb: 2,
-                                    color: 'fg.muted',
-                                }, children: "MCP Toolsets" }), _jsx(Box, { sx: {
+                                }, children: "Config MCP Servers" }), _jsx(Box, { sx: {
                                     p: 3,
                                     bg: 'canvas.subtle',
                                     borderRadius: 2,
@@ -133,17 +301,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;

package/lib/components/chat/components/Chat.d.ts

@@ -1,4 +1,6 @@
 import { type Suggestion } from './base/ChatBase';
+import type { ModelConfig } from './base/ChatBase';
+import type { McpServerSelection } from '../types';
 import type { OAuthProvider, OAuthProviderConfig, Identity } from '../../../identity';
 /**
  * Supported transports (communication transports)
@@ -54,10 +56,21 @@ export interface ChatProps {
     showSkillsMenu?: boolean;
     /** Indicate tools are accessed via Codemode meta-tools */
     codemodeEnabled?: boolean;
+    /**
+     * Show token usage bar between input and selectors.
+     * @default true
+     */
+    showTokenUsage?: boolean;
     /** Initial model ID to select (e.g., 'openai:gpt-4o-mini') */
     initialModel?: string;
-    /** Initial MCP server IDs to enable (others will be disabled) */
-    initialMcpServers?: string[];
+    /**
+     * Override the list of available models.
+     * When provided, this list replaces the models returned by the config endpoint.
+     * Use this to restrict the model selector to a specific subset of models.
+     */
+    availableModels?: ModelConfig[];
+    /** MCP server selections to enable (others will be disabled) */
+    mcpServers?: McpServerSelection[];
     /** Initial skill IDs to enable */
     initialSkills?: string[];
     /** Clear messages when component mounts or agentId changes */
@@ -82,6 +95,27 @@ export interface ChatProps {
     onIdentityConnect?: (identity: Identity) => void;
     /** Callback when identity disconnects */
     onIdentityDisconnect?: (provider: OAuthProvider) => void;
+    /**
+     * Runtime ID for conversation persistence.
+     * When provided, messages are fetched from the server API on page reload
+     * and prevents message mixing between different agent spaces.
+     */
+    runtimeId?: string;
+    /**
+     * Endpoint URL for fetching conversation history.
+     * When runtimeId is provided, this endpoint is called to fetch
+     * the conversation history on mount.
+     * If not provided, defaults to `{protocol.endpoint}/history`.
+     */
+    historyEndpoint?: string;
+    /**
+     * Error banner to display at the top of the chat.
+     * Use this to show sandbox connection errors or other warnings.
+     */
+    errorBanner?: {
+        message: string;
+        variant?: 'danger' | 'warning';
+    };
 }
 /**
  * Chat Component
@@ -124,5 +158,5 @@ export interface ChatProps {
  * />
  * ```
  */
-export declare function Chat({ transport, extensions: _extensions, baseUrl, wsUrl, agentId, placeholder, title, autoConnect: _autoConnect, streaming: _streaming, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height, showHeader, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, initialModel, initialMcpServers, initialSkills, clearOnMount: _clearOnMount, suggestions, submitOnSuggestionClick, description, autoFocus, identityProviders, onIdentityConnect, onIdentityDisconnect, }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chat({ transport, extensions: _extensions, baseUrl, wsUrl, agentId, placeholder, title, autoConnect: _autoConnect, streaming: _streaming, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height, showHeader, showModelSelector, showToolsMenu, showSkillsMenu, codemodeEnabled, showTokenUsage, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount, suggestions, submitOnSuggestionClick, description, autoFocus, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, errorBanner, }: ChatProps): import("react/jsx-runtime").JSX.Element;
 export default Chat;

package/lib/components/chat/components/Chat.js

@@ -70,7 +70,7 @@ function getEndpointPath(transport, agentId) {
         case 'ag-ui':
             return `/api/v1/ag-ui/${agentId}/`;
         case 'a2a':
-            // A2A requires trailing slash
+            // A2A requires trailing slash for FastA2A compatibility
             return `/api/v1/a2a/agents/${agentId}/`;
         case 'acp':
             return `/api/v1/acp/ws/${agentId}`;
@@ -130,7 +130,7 @@ function getProtocolType(transport) {
  * />
  * ```
  */
-export function Chat({ transport, extensions: _extensions, baseUrl = 'http://localhost:8765', wsUrl, agentId, placeholder = 'Type your message...', title, autoConnect: _autoConnect = true, streaming: _streaming = true, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height = '600px', showHeader = true, showModelSelector = true, showToolsMenu = true, showSkillsMenu = false, codemodeEnabled = false, initialModel, initialMcpServers, initialSkills, clearOnMount: _clearOnMount = true, suggestions, submitOnSuggestionClick = true, description, autoFocus = false, identityProviders, onIdentityConnect, onIdentityDisconnect, }) {
+export function Chat({ transport, extensions: _extensions, baseUrl = 'http://localhost:8765', wsUrl, agentId, placeholder = 'Type your message...', title, autoConnect: _autoConnect = true, streaming: _streaming = true, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height = '600px', showHeader = true, showModelSelector = true, showToolsMenu = true, showSkillsMenu = false, codemodeEnabled = false, showTokenUsage = true, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount = true, suggestions, submitOnSuggestionClick = true, description, autoFocus = false, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, errorBanner, }) {
     const [error, setError] = useState(null);
     const [isInitializing, setIsInitializing] = useState(true);
     const [showDetails, setShowDetails] = useState(false);
@@ -282,16 +282,35 @@ export function Chat({ transport, extensions: _extensions, baseUrl = 'http://loc
                     display: showDetails ? 'flex' : 'none',
                     flexDirection: 'column',
                     height: '100%',
-                }, children: _jsx(AgentDetails, { name: title || 'AI Agent', protocol: transport, url: protocolConfig?.endpoint || baseUrl, messageCount: messageCount, agentId: agentId, identityProviders: identityProviders, onIdentityConnect: onIdentityConnect, onIdentityDisconnect: onIdentityDisconnect, onBack: () => setShowDetails(false) }) }), _jsx(Box, { sx: {
+                }, children: _jsx(AgentDetails, { name: title || 'AI Agent', protocol: transport, url: protocolConfig?.endpoint || baseUrl, messageCount: messageCount, agentId: agentId, apiBase: baseUrl, identityProviders: identityProviders, onIdentityConnect: onIdentityConnect, onIdentityDisconnect: onIdentityDisconnect, onBack: () => setShowDetails(false) }) }), _jsxs(Box, { sx: {
                     display: showDetails ? 'none' : 'flex',
                     flexDirection: 'column',
                     height: '100%',
-                }, children: _jsx(ChatBase, { title: title, showHeader: showHeader, protocol: protocolConfig, placeholder: placeholder, description: description, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, autoFocus: autoFocus, headerContent: _jsx(IconButton, { icon: InfoIcon, "aria-label": "Agent details", variant: "invisible", size: "small", onClick: () => setShowDetails(true) }), showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, codemodeEnabled: codemodeEnabled, initialModel: initialModel, initialMcpServers: initialMcpServers, initialSkills: initialSkills, connectedIdentities: identitiesForChat, onNewChat: handleNewChat, onMessagesChange: messages => setMessageCount(messages.length), headerButtons: {
-                        showNewChat: true,
-                        showClear: true,
-                        onNewChat: handleNewChat,
-                    }, avatarConfig: {
-                        showAvatars: true,
-                    }, backgroundColor: "canvas.default", focusTrigger: focusTrigger }) })] }));
+                }, children: [errorBanner && (_jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 2,
+                            px: 3,
+                            py: 2,
+                            bg: errorBanner.variant === 'warning'
+                                ? 'attention.subtle'
+                                : 'danger.subtle',
+                            borderBottom: '1px solid',
+                            borderColor: errorBanner.variant === 'warning'
+                                ? 'attention.muted'
+                                : 'danger.muted',
+                        }, children: [_jsx(AlertIcon, { size: 16, fill: errorBanner.variant === 'warning' ? 'attention.fg' : 'danger.fg' }), _jsx(Text, { sx: {
+                                    fontSize: 1,
+                                    color: errorBanner.variant === 'warning'
+                                        ? 'attention.fg'
+                                        : 'danger.fg',
+                                    flex: 1,
+                                }, children: errorBanner.message })] })), _jsx(ChatBase, { title: title, showHeader: showHeader, protocol: protocolConfig, placeholder: placeholder, description: description, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, autoFocus: autoFocus, runtimeId: runtimeId, historyEndpoint: historyEndpoint, headerContent: _jsx(IconButton, { icon: InfoIcon, "aria-label": "Agent details", variant: "invisible", size: "small", onClick: () => setShowDetails(true) }), showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, codemodeEnabled: codemodeEnabled, initialModel: initialModel, availableModels: availableModels, mcpServers: mcpServers, initialSkills: initialSkills, connectedIdentities: identitiesForChat, onNewChat: handleNewChat, onMessagesChange: messages => setMessageCount(messages.length), headerButtons: {
+                            showNewChat: true,
+                            showClear: true,
+                            onNewChat: handleNewChat,
+                        }, avatarConfig: {
+                            showAvatars: true,
+                        }, backgroundColor: "canvas.default", focusTrigger: focusTrigger })] })] }));
 }
 export default Chat;

package/lib/components/chat/components/ChatFloating.d.ts

@@ -20,7 +20,7 @@ export type { ToolCallStatus, ToolCallRenderContext, RenderToolResult, RespondCa
  */
 export interface ChatFloatingProps {
     /**
-     * AG-UI endpoint URL (e.g., http://localhost:8000/api/v1/examples/agentic_chat/).
+     * AG-UI endpoint URL (e.g., http://localhost:8000/api/v1/examples/agentic_chat).
      * When provided with useStore=false, enables AG-UI protocol mode.
      */
     endpoint?: string;
@@ -135,6 +135,12 @@ export interface ChatFloatingProps {
      * @default false
      */
     showPanelBackdrop?: boolean;
+    /**
+     * Override the list of available models.
+     * When provided, this list replaces the models returned by the config endpoint.
+     * Use this to restrict the model selector to a specific subset of models.
+     */
+    availableModels?: ModelConfig[];
     /**
      * Show model selector in footer.
      * @default false
@@ -150,6 +156,25 @@ export interface ChatFloatingProps {
      * @default false
      */
     showSkillsMenu?: boolean;
+    /**
+     * Show token usage bar between input and selectors.
+     * @default true
+     */
+    showTokenUsage?: boolean;
+    /**
+     * Runtime ID used to scope and persist conversation history.
+     * When provided, history is fetched on mount from the historyEndpoint.
+     */
+    runtimeId?: string;
+    /**
+     * Endpoint URL for fetching conversation history.
+     * Defaults to `{protocol.endpoint}/history` when runtimeId is set.
+     */
+    historyEndpoint?: string;
+    /**
+     * Auth token for the history endpoint.
+     */
+    historyAuthToken?: string;
     /** Additional ChatBase props */
     panelProps?: Partial<ChatBaseProps>;
 }
@@ -157,5 +182,5 @@ export interface ChatFloatingProps {
  * ChatFloating component
  * A floating chat window built on ChatBase
  */
-export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, showPanelBackdrop, showModelSelector, showToolsMenu, showSkillsMenu, panelProps, }: ChatFloatingProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatFloating({ endpoint, protocol: protocolProp, useStore: useStoreMode, title, description, position, defaultOpen, width, height, showHeader, showButton, showNewChatButton, showClearButton, showSettingsButton, enableKeyboardShortcuts, toggleShortcut, showPoweredBy, poweredByProps, clickOutsideToClose, escapeToClose, className, onSettingsClick, onNewChat, onOpen, onClose, onStateUpdate, children, brandIcon, buttonIcon, buttonTooltip, brandColor, offset, animationDuration, renderToolResult, tools: _tools, initialState: _initialState, suggestions, submitOnSuggestionClick, hideMessagesAfterToolUI, defaultViewMode, showPanelBackdrop, availableModels, showModelSelector, showToolsMenu, showSkillsMenu, showTokenUsage, runtimeId, historyEndpoint, historyAuthToken, panelProps, }: ChatFloatingProps): import("react/jsx-runtime").JSX.Element;
 export default ChatFloating;