@datalayer/agent-runtimes 1.0.2 → 1.0.4

package/lib/{components → config}/AgentConfiguration.js

@@ -8,8 +8,7 @@ import { Text, TextInput, Button, FormControl, Select, Checkbox, Spinner, Flash,
 import { ToolsIcon, KeyIcon, SyncIcon, PlusIcon, XIcon, LinkExternalIcon, } from '@primer/octicons-react';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
-import { IdentityCard } from './chat/components';
-import { IdentityConnect, useIdentity } from '../identity';
+import { IdentityCard, IdentityConnect, useIdentity } from '../identity';
 /**
  * Helper: is the selected agent id a library spec?
  */
@@ -153,13 +152,13 @@ const AGENT_LIBRARIES = [
     {
         value: 'langchain',
         label: 'LangChain',
-        description: 'Complex chains and agent workflows',
+        description: 'LangChain agent implementations and tools',
         disabled: true,
     },
     {
-        value: 'jupyter-ai',
-        label: 'Simple AI',
-        description: 'Simple notebook integration',
+        value: 'google-adk',
+        label: 'Google ADK',
+        description: 'Google’s Agent Development Kit',
         disabled: true,
     },
 ];
@@ -182,32 +181,32 @@ const TRANSPORTS = [
     {
         value: 'vercel-ai-jupyter',
         label: 'Vercel AI (Jupyter)',
-        description: 'Vercel AI via Jupyter server endpoint',
+        description: 'Vercel AI via Jupyter Server endpoint',
     },
     {
         value: 'a2a',
         label: 'A2A (Agent-to-Agent)',
-        description: 'Inter-agent communication',
+        description: 'A2A Inter-agent communication',
     },
 ];
 const EXTENSIONS = [
-    {
-        value: 'mcp-ui',
-        label: 'MCP-UI',
-        description: 'MCP UI resources extension',
-    },
     {
         value: 'a2ui',
         label: 'A2UI',
         description: 'Agent-to-UI extension',
     },
+    {
+        value: 'mcp-ui',
+        label: 'MCP-UI',
+        description: 'MCP UI resources extension',
+    },
 ];
 /**
  * Agent Configuration Component
  *
  * Form for configuring agent connection settings.
  */
-export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl, baseUrl, agentName, model, agents, selectedAgentId, isCreatingAgent = false, createError = null, enableCodemode = false, allowDirectToolCalls = false, enableToolReranker = false, useJupyterSandbox = false, availableSkills = [], selectedSkills = [], selectedMcpServers = [], identityProviders, onIdentityConnect, onIdentityDisconnect, onAgentLibraryChange, onTransportChange, onExtensionsChange, onWsUrlChange, onBaseUrlChange, onAgentNameChange, onModelChange, onAgentSelect, onConnect, onEnableCodemodeChange, onAllowDirectToolCallsChange, onEnableToolRerankerChange, onUseJupyterSandboxChange, onSelectedSkillsChange, onSelectedMcpServersChange, }) => {
+export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensions, wsUrl, baseUrl, agentName, description, goal, model, systemPrompt, systemPromptCodemodeAddons, tools, sandboxVariant, agents, selectedAgentId, isCreatingAgent = false, createError = null, enableCodemode = false, allowDirectToolCalls = false, enableToolReranker = false, useJupyterSandbox = false, availableSkills = [], selectedSkills = [], selectedMcpServers = [], identityProviders, onIdentityConnect, onIdentityDisconnect, onAgentLibraryChange, onTransportChange, onExtensionsChange, onWsUrlChange, onBaseUrlChange, onAgentNameChange, onDescriptionChange, onGoalChange, onModelChange, onSystemPromptChange, onSystemPromptCodemodeAddonsChange, onToolsChange, onSandboxVariantChange, onAgentSelect, onConnect, onEnableCodemodeChange, onAllowDirectToolCallsChange, onEnableToolRerankerChange, onUseJupyterSandboxChange, onSelectedSkillsChange, onSelectedMcpServersChange, }) => {
     // Fetch general configuration from the backend (models, etc.)
     const configQuery = useQuery({
         queryKey: ['agent-config', baseUrl],
@@ -258,10 +257,17 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
         const specId = getSpecId(selectedAgentId);
         return librarySpecs.find(s => s.id === specId) || null;
     }, [selectedAgentId, librarySpecs]);
+    const selectedSpecEntries = useMemo(() => {
+        if (!selectedSpec)
+            return [];
+        return Object.entries(selectedSpec).filter(([, value]) => value !== undefined);
+    }, [selectedSpec]);
     // When a spec is selected, form behaves like new-agent but with pre-filled values
     const isNewAgentMode = selectedAgentId === 'new-agent' || isSpecSelection(selectedAgentId);
     // True when a library spec is selected (fields locked down except Name, URL, Library, Model, Transport, Extensions)
     const isSpecMode = isSpecSelection(selectedAgentId);
+    // Entire form is read-only for existing agents and library spec selections.
+    const isFormReadOnly = !isNewAgentMode || isSpecMode;
     // Fetch skills from the backend (always available, independent of codemode)
     const skillsQuery = useQuery({
         queryKey: ['agent-skills', baseUrl],
@@ -414,19 +420,31 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
                     fontWeight: 'bold',
                     display: 'block',
                     marginBottom: 3,
-                }, children: "Create a new Agent" }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: "Available Agents" }), _jsxs(Select, { value: selectedAgentId, onChange: e => onAgentSelect(e.target.value), sx: { width: '100%' }, children: [_jsx(Select.Option, { value: "new-agent", children: "+ New Agent..." }), librarySpecs
+                }, children: "Create a new Agent" }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: "Available Agents" }), _jsxs(Select, { value: selectedAgentId, onChange: e => onAgentSelect(e.target.value), sx: { width: '100%' }, children: [_jsx(Select.Option, { value: "new-agent", children: "+ New Agent..." }), [...librarySpecs]
                                 .filter(s => s.enabled)
-                                .map(spec => (_jsxs(Select.Option, { value: `spec:${spec.id}`, children: [spec.emoji ? `${spec.emoji} ` : '', spec.name] }, `spec:${spec.id}`))), agents.map(agent => (_jsxs(Select.Option, { value: agent.id, children: [agent.status === 'running' && '● ', agent.name] }, agent.id)))] }), _jsx(FormControl.Caption, { children: isNewAgentMode
+                                .sort((a, b) => {
+                                const pkgA = a.id.includes('/') ? a.id.split('/')[0] : '';
+                                const pkgB = b.id.includes('/') ? b.id.split('/')[0] : '';
+                                const cmp = pkgA.localeCompare(pkgB);
+                                return cmp !== 0 ? cmp : a.name.localeCompare(b.name);
+                            })
+                                .map(spec => {
+                                const pkg = spec.id.includes('/') ? spec.id.split('/')[0] : '';
+                                return (_jsxs(Select.Option, { value: `spec:${spec.id}`, children: [spec.emoji ? `${spec.emoji} ` : '', pkg ? `[${pkg}] ` : '', spec.name] }, `spec:${spec.id}`));
+                            }), agents.map(agent => (_jsxs(Select.Option, { value: agent.id, children: ["[Example] ", agent.status === 'running' && '● ', agent.name] }, agent.id)))] }), _jsx(FormControl.Caption, { children: isNewAgentMode
                             ? selectedSpec
                                 ? `Creating from spec: ${selectedSpec.name} — capabilities are locked`
                                 : 'Configure a new custom agent'
-                            : 'Selected agent - form fields below are disabled' })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: "Agent Name" }), _jsx(TextInput, { value: agentName, onChange: e => onAgentNameChange(e.target.value), disabled: !isNewAgentMode, placeholder: "demo-agent", sx: { width: '100%' } }), _jsx(FormControl.Caption, { children: "The name of the agent to connect to" })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, children: [_jsx(FormControl.Label, { children: transport === 'acp' ? 'WebSocket URL' : 'Base URL' }), _jsx(TextInput, { value: transport === 'acp' ? wsUrl : baseUrl, onChange: e => transport === 'acp'
+                            : 'Selected agent - form fields below are disabled' })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Agent Name" }), _jsx(TextInput, { value: agentName, onChange: e => onAgentNameChange(e.target.value), placeholder: "demo-agent", sx: { width: '100%' } }), _jsx(FormControl.Caption, { children: "The name of the agent to connect to" })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(TextInput, { value: description, onChange: e => onDescriptionChange(e.target.value), placeholder: "Short agent description", sx: { width: '100%' } })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Goal" }), _jsx(TextInput, { value: goal, onChange: e => onGoalChange(e.target.value), placeholder: "User-facing objective", sx: { width: '100%' } })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: transport === 'acp' ? 'WebSocket URL' : 'Base URL' }), _jsx(TextInput, { value: transport === 'acp' ? wsUrl : baseUrl, onChange: e => transport === 'acp'
                             ? onWsUrlChange(e.target.value)
-                            : onBaseUrlChange(e.target.value), disabled: !isNewAgentMode, placeholder: transport === 'acp'
+                            : onBaseUrlChange(e.target.value), placeholder: transport === 'acp'
                             ? 'ws://localhost:8000/api/v1/acp/ws'
                             : 'http://localhost:8000', sx: { width: '100%' } }), _jsx(FormControl.Caption, { children: transport === 'acp'
                             ? 'The WebSocket endpoint of your agent-runtimes server'
-                            : 'The base URL of your agent-runtimes server' })] }), _jsxs(Box, { sx: { display: 'flex', gap: 3, marginBottom: 3 }, children: [_jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Agent Library" }), _jsx(Select, { value: agentLibrary, onChange: e => onAgentLibraryChange(e.target.value), disabled: !isNewAgentMode, sx: { width: '100%' }, children: AGENT_LIBRARIES.map(lib => (_jsxs(Select.Option, { value: lib.value, disabled: lib.disabled, children: [lib.label, lib.disabled && ' (Coming Soon)'] }, lib.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Model" }), _jsx(Select, { value: model, onChange: e => onModelChange(e.target.value), disabled: !isNewAgentMode || models.length === 0, sx: { width: '100%' }, children: models.length === 0 ? (_jsx(Select.Option, { value: "", children: "Loading models..." })) : (models.map(m => (_jsxs(Select.Option, { value: m.id, disabled: !m.isAvailable, children: [m.name, !m.isAvailable && ' (API key required)'] }, m.id)))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Transport" }), _jsx(Select, { value: transport, onChange: e => onTransportChange(e.target.value), disabled: !isNewAgentMode, sx: { width: '100%' }, children: TRANSPORTS.map(t => (_jsx(Select.Option, { value: t.value, children: t.label }, t.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Extensions" }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: EXTENSIONS.map(ext => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { value: ext.value, checked: extensions.includes(ext.value), disabled: !isExtensionEnabled(ext.value), onChange: e => handleExtensionChange(ext.value, e.target.checked) }), _jsx(Text, { children: ext.label })] }, ext.value))) })] })] }), _jsxs(Box, { sx: {
+                            : 'The base URL of your agent-runtimes server' })] }), _jsxs(Box, { sx: { display: 'flex', gap: 3, marginBottom: 3 }, children: [_jsxs(FormControl, { sx: { flex: 1 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Agent Library" }), _jsx(Select, { value: agentLibrary, onChange: e => onAgentLibraryChange(e.target.value), sx: { width: '100%' }, children: AGENT_LIBRARIES.map(lib => (_jsxs(Select.Option, { value: lib.value, disabled: lib.disabled, children: [lib.label, lib.disabled && ' (Coming Soon)'] }, lib.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, disabled: isFormReadOnly || models.length === 0, children: [_jsx(FormControl.Label, { children: "Model" }), _jsx(Select, { value: model, onChange: e => onModelChange(e.target.value), sx: { width: '100%' }, children: models.length === 0 ? (_jsx(Select.Option, { value: "", children: "Loading models..." })) : (models.map(m => (_jsxs(Select.Option, { value: m.id, disabled: !m.isAvailable, children: [m.name, !m.isAvailable && ' (API key required)'] }, m.id)))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Transport" }), _jsx(Select, { value: transport, onChange: e => onTransportChange(e.target.value), sx: { width: '100%' }, children: TRANSPORTS.map(t => (_jsx(Select.Option, { value: t.value, children: t.label }, t.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Extensions" }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: EXTENSIONS.map(ext => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { value: ext.value, checked: extensions.includes(ext.value), disabled: isFormReadOnly || !isExtensionEnabled(ext.value), onChange: e => handleExtensionChange(ext.value, e.target.checked) }), _jsx(Text, { children: ext.label })] }, ext.value))) })] })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "System Prompt" }), _jsx(TextInput, { value: systemPrompt, onChange: e => onSystemPromptChange(e.target.value), placeholder: "You are a helpful AI assistant.", sx: { width: '100%' } })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "System Prompt Codemode Addons" }), _jsx(TextInput, { value: systemPromptCodemodeAddons, onChange: e => onSystemPromptCodemodeAddonsChange(e.target.value), placeholder: "Additional codemode instructions", sx: { width: '100%' } })] }), _jsxs(Box, { sx: { display: 'flex', gap: 3, marginBottom: 3 }, children: [_jsxs(FormControl, { sx: { flex: 1 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Tools (comma-separated)" }), _jsx(TextInput, { value: tools.join(', '), onChange: e => onToolsChange(e.target.value
+                                    .split(',')
+                                    .map(tool => tool.trim())
+                                    .filter(Boolean)), placeholder: "tool_a, tool_b", sx: { width: '100%' } })] }), _jsxs(FormControl, { sx: { flex: 1 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Sandbox Variant" }), _jsxs(Select, { value: sandboxVariant, onChange: e => onSandboxVariantChange(e.target.value), sx: { width: '100%' }, children: [_jsx(Select.Option, { value: "", children: "Default" }), _jsx(Select.Option, { value: "local-eval", children: "local-eval" }), _jsx(Select.Option, { value: "jupyter", children: "jupyter" }), _jsx(Select.Option, { value: "local-jupyter", children: "local-jupyter" })] })] })] }), _jsxs(Box, { sx: {
                     marginBottom: 3,
                     padding: 3,
                     border: '1px solid',
@@ -452,7 +470,7 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
                                     color: 'fg.muted',
                                     fontWeight: 'normal',
                                     ml: 2,
-                                }, children: "\u2014 defined by spec" }))] }), _jsx(Box, { sx: { display: 'flex', gap: 4, opacity: isSpecMode ? 0.6 : 1 }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableCodemode, disabled: !isNewAgentMode || isSpecMode, onChange: e => onEnableCodemodeChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code to compose tools" })] })] }) }), skillsEnabled && enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills provide curated capabilities; Codemode composes tools with Python for multi-step execution." }) })), skillsEnabled && !enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills will run with a standalone code sandbox for script execution. Enable Codemode to compose skills with other tools." }) })), enableCodemode && (_jsxs(Box, { sx: { mt: 3, display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: allowDirectToolCalls, disabled: !isNewAgentMode || isSpecMode, onChange: e => onAllowDirectToolCallsChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Allow direct tool calls" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Expose call_tool for simple, single-tool operations" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableToolReranker, disabled: !isNewAgentMode || isSpecMode, onChange: e => onEnableToolRerankerChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Enable tool reranker" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Reorder search results using the configured reranker" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: useJupyterSandbox, disabled: !isNewAgentMode || isSpecMode, onChange: e => onUseJupyterSandboxChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Use Jupyter Sandbox" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code in a Jupyter kernel instead of local-eval" })] })] })] }))] }), _jsxs(Box, { sx: {
+                                }, children: "\u2014 defined by spec" }))] }), _jsx(Box, { sx: { display: 'flex', gap: 4, opacity: isSpecMode ? 0.6 : 1 }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableCodemode, disabled: !isNewAgentMode || isSpecMode, onChange: e => onEnableCodemodeChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code to compose tools" })] })] }) }), skillsEnabled && enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills provide curated capabilities; Codemode composes tools with Python for multi-step execution." }) })), skillsEnabled && !enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills will run with a standalone code sandbox for script execution. Enable Codemode to compose skills with other tools." }) })), enableCodemode && (_jsxs(Box, { sx: { mt: 3, display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: allowDirectToolCalls, disabled: !isNewAgentMode || isSpecMode, onChange: e => onAllowDirectToolCallsChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Allow direct tool calls" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Expose call_tool for simple, single-tool operations" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableToolReranker, disabled: !isNewAgentMode || isSpecMode, onChange: e => onEnableToolRerankerChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Enable tool reranker" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Reorder search results using the configured reranker" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: useJupyterSandbox, disabled: !isNewAgentMode || isSpecMode, onChange: e => onUseJupyterSandboxChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Use Jupyter Sandbox" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code in a Jupyter Sandbox instead of local-eval Sandbox" })] })] })] }))] }), _jsxs(Box, { sx: {
                     marginBottom: 3,
                     padding: 3,
                     border: '1px solid',
@@ -562,18 +580,20 @@ export const AgentConfiguration = ({ agentLibrary, transport, extensions, wsUrl,
                                             flex: 1,
                                         }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: server.name }), enableCatalogServerMutation.isPending &&
                                                         enableCatalogServerMutation.variables === server.id ? (_jsx(Label, { variant: "accent", size: "small", children: "Starting..." })) : server.isRunning ? (_jsx(Label, { variant: "success", size: "small", children: "Running" })) : (_jsx(Label, { variant: "secondary", size: "small", children: "Not Started" })), server.isConfig && (_jsx(Label, { variant: "secondary", size: "small", children: "From Config" }))] }), hasRequiredEnvVars ? (_jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1 }, children: server.requiredEnvVars?.map(envVar => (_jsx(Label, { variant: envVarsAvailable ? 'success' : 'danger', size: "small", children: envVar }, envVar))) })) : (_jsx(Box, { sx: { display: 'flex' }, children: _jsx(Label, { variant: "success", size: "small", children: "No env vars required" }) })), server.tools && server.tools.length > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Tools: ", server.tools.map(t => t.name).join(', ')] }))] })] }, server.id));
-                        }) })] })), createError && (_jsx(Flash, { variant: "danger", sx: { marginBottom: 3 }, children: createError })), _jsxs(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: 2,
+                        }) })] })), createError && (_jsx(Flash, { variant: "danger", sx: { marginBottom: 3 }, children: createError })), selectedSpec && (_jsxs(Box, { sx: {
                     marginBottom: 3,
                     padding: 3,
-                    bg: 'canvas.subtle',
-                    borderRadius: 2,
                     border: '1px solid',
                     borderColor: 'border.default',
-                    opacity: 0.6,
-                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold', color: 'fg.muted' }, children: "Coming Soon" }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: false, disabled: true, onChange: () => { } }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Rich Editor" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "\u2014 Enable rich text editing with formatting options" })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: false, disabled: true, onChange: () => { } }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Durable" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "\u2014 Persist agent state across sessions" })] })] }), _jsx(Button, { variant: "primary", onClick: onConnect, disabled: isCreatingAgent ||
+                    borderRadius: 2,
+                    backgroundColor: 'canvas.default',
+                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', display: 'block', mb: 2 }, children: "Agent Spec Attributes" }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: selectedSpecEntries.map(([key, value]) => (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(Text, { sx: { fontSize: 0, fontWeight: 'semibold' }, children: key }), _jsx(Text, { sx: {
+                                        fontSize: 0,
+                                        color: 'fg.muted',
+                                        whiteSpace: 'pre-wrap',
+                                    }, children: typeof value === 'string'
+                                        ? value
+                                        : JSON.stringify(value, null, 2) })] }, key))) })] })), _jsx(Button, { variant: "primary", onClick: onConnect, disabled: isCreatingAgent ||
                     !agentName ||
                     (transport === 'acp' ? !wsUrl : !baseUrl), sx: { width: '100%' }, children: isCreatingAgent ? (_jsxs(Box, { sx: {
                         display: 'flex',

package/lib/config/index.d.ts

@@ -1 +1,3 @@
 export * from './utils';
+export { AgentConfiguration, AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS, isSpecSelection, getSpecId, } from './AgentConfiguration';
+export type { AgentConfigurationProps, SkillOption, LibraryAgentSpec, } from './AgentConfiguration';

package/lib/config/index.js

@@ -3,3 +3,4 @@
  * Distributed under the terms of the Modified BSD License.
  */
 export * from './utils';
+export { AgentConfiguration, AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS, isSpecSelection, getSpecId, } from './AgentConfiguration';

package/lib/{components/chat/components → context}/ContextInspector.js

@@ -9,7 +9,8 @@ import { Text, Spinner, Button, Label, ProgressBar } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { AiModelIcon, TerminalIcon, CommentDiscussionIcon, DatabaseIcon, KeyIcon, CodeIcon, CheckCircleIcon, XCircleIcon, ChevronDownIcon, ChevronRightIcon, InfoIcon, } from '@primer/octicons-react';
 import { useQuery } from '@tanstack/react-query';
-import React, { useState, useMemo } from 'react';
+import React, { useState, useMemo, useEffect } from 'react';
+const RETRY_INTERVAL_SECONDS = 5;
 /**
  * Get the API base URL for fetching context data.
  * If apiBase prop is provided, use it.
@@ -143,7 +144,8 @@ function MessageDetailView({ message }) {
  * ContextInspector component displays full detailed context snapshot.
  */
 export function ContextInspector({ agentId, apiBase }) {
-    const { data: contextData, isLoading, error, } = useQuery({
+    const [retryCountdown, setRetryCountdown] = useState(RETRY_INTERVAL_SECONDS);
+    const { data: contextData, isLoading, error, refetch, } = useQuery({
         queryKey: ['full-context', agentId, apiBase],
         queryFn: async () => {
             const base = getApiBase(apiBase);
@@ -153,10 +155,22 @@ export function ContextInspector({ agentId, apiBase }) {
             }
             return response.json();
         },
-        refetchInterval: 30000, // Refresh every 30 seconds (less frequent than snapshot)
+        refetchInterval: RETRY_INTERVAL_SECONDS * 1000,
         refetchOnMount: 'always',
         staleTime: 0,
     });
+    const hasRetryError = Boolean(error) || Boolean(contextData?.error);
+    useEffect(() => {
+        if (!hasRetryError) {
+            setRetryCountdown(RETRY_INTERVAL_SECONDS);
+            return;
+        }
+        setRetryCountdown(RETRY_INTERVAL_SECONDS);
+        const timer = window.setInterval(() => {
+            setRetryCountdown(prev => prev <= 1 ? RETRY_INTERVAL_SECONDS : prev - 1);
+        }, 1000);
+        return () => window.clearInterval(timer);
+    }, [hasRetryError]);
     // Separate messages by in_context status
     const { inContextMessages, outOfContextMessages } = useMemo(() => {
         if (!contextData?.messages) {
@@ -178,11 +192,19 @@ export function ContextInspector({ agentId, apiBase }) {
     if (error || !contextData) {
         return (_jsx(Box, { sx: {
                 p: 3,
-                bg: 'danger.subtle',
+                bg: 'attention.subtle',
                 borderRadius: 2,
                 border: '1px solid',
-                borderColor: 'danger.muted',
-            }, children: _jsx(Text, { sx: { color: 'danger.fg' }, children: "Failed to load context snapshot" }) }));
+                borderColor: 'attention.muted',
+            }, children: _jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 2,
+                }, children: [_jsxs(Text, { sx: { color: 'attention.fg' }, children: ["Service not available for context snapshot. Retrying in", ' ', retryCountdown, " second", retryCountdown === 1 ? '' : 's', "..."] }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => {
+                            setRetryCountdown(RETRY_INTERVAL_SECONDS);
+                            void refetch();
+                        }, children: "Retry now" })] }) }));
     }
     if (contextData.error) {
         return (_jsx(Box, { sx: {
@@ -191,7 +213,15 @@ export function ContextInspector({ agentId, apiBase }) {
                 borderRadius: 2,
                 border: '1px solid',
                 borderColor: 'attention.muted',
-            }, children: _jsx(Text, { sx: { color: 'attention.fg' }, children: contextData.error }) }));
+            }, children: _jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 2,
+                }, children: [_jsx(Text, { sx: { color: 'attention.fg' }, children: `${contextData.error} Retrying in ${retryCountdown} second${retryCountdown === 1 ? '' : 's'}...` }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => {
+                            setRetryCountdown(RETRY_INTERVAL_SECONDS);
+                            void refetch();
+                        }, children: "Retry now" })] }) }));
     }
     const { tokenSummary, modelConfiguration } = contextData;
     return (_jsxs(Box, { children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: ["Total usage: ", formatTokens(tokenSummary.total), " /", ' ', formatTokens(tokenSummary.contextWindow), " (", Math.round(tokenSummary.usagePercent), "%)"] }), _jsx(ProgressBar, { progress: Math.min(tokenSummary.usagePercent, 100), sx: { mt: 2, height: 8 }, bg: tokenSummary.usagePercent > 90
@@ -205,7 +235,7 @@ export function ContextInspector({ agentId, apiBase }) {
                             flexWrap: 'wrap',
                             fontSize: 0,
                             color: 'fg.muted',
-                        }, children: [_jsxs(Text, { children: ["System: ", formatTokens(tokenSummary.systemPrompts)] }), _jsxs(Text, { children: ["Tools: ", formatTokens(tokenSummary.tools)] }), tokenSummary.memory > 0 && (_jsxs(Text, { children: ["Memory: ", formatTokens(tokenSummary.memory)] })), _jsxs(Text, { children: ["History: ", formatTokens(tokenSummary.history)] }), _jsxs(Text, { children: ["Current: ", formatTokens(tokenSummary.current)] })] })] }), _jsx(CollapsibleSection, { title: "Model Configuration", icon: AiModelIcon, defaultExpanded: true, children: _jsxs(Box, { sx: { display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: "Model:" }), _jsx(Text, { sx: { fontSize: 1, fontFamily: 'mono' }, children: modelConfiguration.modelName || 'Not specified' }), _jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: "Context Window:" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [formatTokens(modelConfiguration.contextWindow), " tokens"] }), Object.keys(modelConfiguration.settings).length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: "Settings:" }), _jsx(Box, { as: "pre", sx: {
+                        }, children: [_jsxs(Text, { children: ["System: ", formatTokens(tokenSummary.systemPrompts)] }), _jsxs(Text, { children: ["Tools: ", formatTokens(tokenSummary.tools)] }), tokenSummary.memory > 0 && (_jsxs(Text, { children: ["Memory: ", formatTokens(tokenSummary.memory)] })), _jsxs(Text, { children: ["History: ", formatTokens(tokenSummary.history)] }), _jsxs(Text, { children: ["Current: ", formatTokens(tokenSummary.current)] })] })] }), _jsx(CollapsibleSection, { title: "Model Configuration", icon: AiModelIcon, defaultExpanded: false, children: _jsxs(Box, { sx: { display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 2 }, children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: "Model:" }), _jsx(Text, { sx: { fontSize: 1, fontFamily: 'mono' }, children: modelConfiguration.modelName || 'Not specified' }), _jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: "Context Window:" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [formatTokens(modelConfiguration.contextWindow), " tokens"] }), Object.keys(modelConfiguration.settings).length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontWeight: 'semibold', fontSize: 1 }, children: "Settings:" }), _jsx(Box, { as: "pre", sx: {
                                         fontSize: 0,
                                         p: 2,
                                         bg: 'canvas.inset',

package/lib/{components/chat/components → context}/ContextPanel.js

@@ -12,7 +12,7 @@ import { Heading, Text, ProgressBar, Spinner, Button, SegmentedControl, } from '
 import { Box } from '@datalayer/primer-addons';
 import { useQuery } from '@tanstack/react-query';
 import ReactECharts from 'echarts-for-react';
-import { useState, useMemo } from 'react';
+import { useState, useMemo, useEffect } from 'react';
 /**
  * Format token count for display
  */
@@ -59,6 +59,7 @@ function getCategoryIcon(name) {
             return ClockIcon;
     }
 }
+const RETRY_INTERVAL_SECONDS = 5;
 /**
  * Get the API base URL for fetching context data.
  * If apiBase prop is provided, use it.
@@ -82,7 +83,8 @@ function getApiBase(apiBase) {
 export function ContextPanel({ agentId, apiBase, messageCount = 0, defaultView = 'overview', chartHeight = '200px', }) {
     const [viewMode, setViewMode] = useState(defaultView);
     const [showDetails, setShowDetails] = useState(false);
-    const { data: snapshotData, isLoading, error, } = useQuery({
+    const [retryCountdown, setRetryCountdown] = useState(RETRY_INTERVAL_SECONDS);
+    const { data: snapshotData, isLoading, error, refetch, } = useQuery({
         queryKey: ['context-snapshot', agentId, apiBase],
         queryFn: async () => {
             const base = getApiBase(apiBase);
@@ -92,10 +94,21 @@ export function ContextPanel({ agentId, apiBase, messageCount = 0, defaultView =
             }
             return response.json();
         },
-        refetchInterval: 5000,
+        refetchInterval: RETRY_INTERVAL_SECONDS * 1000,
         refetchOnMount: 'always',
         staleTime: 0,
     });
+    useEffect(() => {
+        if (!error) {
+            setRetryCountdown(RETRY_INTERVAL_SECONDS);
+            return;
+        }
+        setRetryCountdown(RETRY_INTERVAL_SECONDS);
+        const timer = window.setInterval(() => {
+            setRetryCountdown(prev => prev <= 1 ? RETRY_INTERVAL_SECONDS : prev - 1);
+        }, 1000);
+        return () => window.clearInterval(timer);
+    }, [error]);
     // Build historic usage chart data from perRequestUsage
     const historyChartOption = useMemo(() => {
         if (!snapshotData?.perRequestUsage ||
@@ -263,11 +276,19 @@ export function ContextPanel({ agentId, apiBase, messageCount = 0, defaultView =
                         color: 'fg.muted',
                     }, children: "Context Usage" }), _jsx(Box, { sx: {
                         p: 3,
-                        bg: 'canvas.subtle',
+                        bg: 'attention.subtle',
                         borderRadius: 2,
                         border: '1px solid',
-                        borderColor: 'border.default',
-                    }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load context details. Make sure the agent is running." }) })] }));
+                        borderColor: 'attention.muted',
+                    }, children: _jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'space-between',
+                            gap: 2,
+                        }, children: [_jsxs(Text, { sx: { fontSize: 1, color: 'attention.fg' }, children: ["Service not available for context usage. Retrying in", ' ', retryCountdown, " second", retryCountdown === 1 ? '' : 's', "..."] }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => {
+                                    setRetryCountdown(RETRY_INTERVAL_SECONDS);
+                                    void refetch();
+                                }, children: "Retry now" })] }) })] }));
     }
     const { totalTokens, contextWindow, sessionUsage, turnUsage, distribution } = snapshotData;
     const hasDistributionData = distribution?.children && distribution.children.length > 0;

package/lib/context/CostTracker.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Cost usage response from the agent-runtimes API.
+ */
+export interface CostUsageResponse {
+    agentId: string;
+    /** Cost for the current run in USD */
+    currentRunCostUsd: number;
+    /** Total cumulative cost in USD */
+    cumulativeCostUsd: number;
+    /** Per-run budget limit (from guardrails) */
+    perRunBudgetUsd: number | null;
+    /** Cumulative budget limit (from guardrails) */
+    cumulativeBudgetUsd: number | null;
+    /** Number of model requests made */
+    requestCount: number;
+    /** Total tokens used across all requests */
+    totalTokensUsed: number;
+    /** Breakdown by model */
+    modelBreakdown: Array<{
+        model: string;
+        inputTokens: number;
+        outputTokens: number;
+        costUsd: number;
+        requests: number;
+    }>;
+}
+export interface CostTrackerProps {
+    /** Agent ID for fetching cost data */
+    agentId: string;
+    /** Compact mode — show only the summary bar */
+    compact?: boolean;
+}
+/**
+ * Displays running cost and budget utilization for an agent.
+ */
+export declare function CostTracker({ agentId, compact }: CostTrackerProps): import("react/jsx-runtime").JSX.Element;
+export default CostTracker;

package/lib/context/CostTracker.js

@@ -0,0 +1,124 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * CostTracker component — displays running cost for an agent.
+ *
+ * Shows per-run cost, cumulative cost, and budget utilization
+ * with a progress bar and optional alert when approaching limits.
+ *
+ * @module components/context/CostTracker
+ */
+import { Box, Heading, Text, ProgressBar, Spinner, Flash, Label, } from '@primer/react';
+import { CreditCardIcon, AlertIcon } from '@primer/octicons-react';
+import { useQuery } from '@tanstack/react-query';
+function getLocalApiBase() {
+    if (typeof window === 'undefined')
+        return '';
+    const host = window.location.hostname;
+    return host === 'localhost' || host === '127.0.0.1'
+        ? 'http://127.0.0.1:8765'
+        : '';
+}
+function formatUsd(amount) {
+    if (amount < 0.01)
+        return `$${amount.toFixed(4)}`;
+    if (amount < 1)
+        return `$${amount.toFixed(3)}`;
+    return `$${amount.toFixed(2)}`;
+}
+function formatTokens(tokens) {
+    if (tokens >= 1_000_000)
+        return `${(tokens / 1_000_000).toFixed(1)}M`;
+    if (tokens >= 1_000)
+        return `${(tokens / 1_000).toFixed(1)}K`;
+    return tokens.toString();
+}
+/**
+ * Displays running cost and budget utilization for an agent.
+ */
+export function CostTracker({ agentId, compact = false }) {
+    const { data: costData, isLoading, error, } = useQuery({
+        queryKey: ['cost-usage', agentId],
+        queryFn: async () => {
+            const apiBase = getLocalApiBase();
+            const response = await fetch(`${apiBase}/api/v1/configure/agents/${encodeURIComponent(agentId)}/cost-usage`);
+            if (!response.ok)
+                throw new Error('Failed to fetch cost data');
+            return response.json();
+        },
+        refetchInterval: 5000,
+        staleTime: 0,
+    });
+    if (isLoading) {
+        return (_jsxs(Box, { sx: {
+                p: 2,
+                display: 'flex',
+                alignItems: 'center',
+                gap: 2,
+            }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading cost\u2026" })] }));
+    }
+    if (error || !costData) {
+        return (_jsx(Box, { sx: { p: 2 }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Cost data unavailable" }) }));
+    }
+    const cumulativePercent = costData.cumulativeBudgetUsd != null && costData.cumulativeBudgetUsd > 0
+        ? (costData.cumulativeCostUsd / costData.cumulativeBudgetUsd) * 100
+        : null;
+    const runPercent = costData.perRunBudgetUsd != null && costData.perRunBudgetUsd > 0
+        ? (costData.currentRunCostUsd / costData.perRunBudgetUsd) * 100
+        : null;
+    const isOverBudget = cumulativePercent != null && cumulativePercent > 100;
+    const isNearBudget = cumulativePercent != null && cumulativePercent > 80;
+    // Compact: single row summary
+    if (compact) {
+        return (_jsxs(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 2,
+                px: 2,
+                py: 1,
+            }, children: [_jsx(CreditCardIcon, { size: 14 }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Run: ", formatUsd(costData.currentRunCostUsd), " | Total:", ' ', formatUsd(costData.cumulativeCostUsd), costData.cumulativeBudgetUsd != null &&
+                            ` / ${formatUsd(costData.cumulativeBudgetUsd)}`] }), isOverBudget && (_jsx(Label, { variant: "danger", size: "small", children: "Over budget" })), !isOverBudget && isNearBudget && (_jsx(Label, { variant: "attention", size: "small", children: "Near limit" }))] }));
+    }
+    // Full display
+    return (_jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1, fontWeight: 'semibold', mb: 2, color: 'fg.muted' }, children: "Cost Tracker" }), isOverBudget && (_jsxs(Flash, { variant: "danger", sx: { mb: 2 }, children: [_jsx(AlertIcon, { size: 16 }), "Cumulative cost (", formatUsd(costData.cumulativeCostUsd), ") exceeds budget (", formatUsd(costData.cumulativeBudgetUsd), ")."] })), _jsxs(Box, { sx: {
+                    p: 3,
+                    bg: 'canvas.subtle',
+                    borderRadius: 2,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                }, children: [_jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    mb: 1,
+                                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Current run" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [formatUsd(costData.currentRunCostUsd), costData.perRunBudgetUsd != null &&
+                                                ` / ${formatUsd(costData.perRunBudgetUsd)}`] })] }), runPercent != null && (_jsx(ProgressBar, { progress: Math.min(runPercent, 100), sx: { height: 6 }, bg: runPercent > 80 ? 'danger.emphasis' : 'accent.emphasis' }))] }), _jsxs(Box, { sx: { mb: 3 }, children: [_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    mb: 1,
+                                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Cumulative" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [formatUsd(costData.cumulativeCostUsd), costData.cumulativeBudgetUsd != null &&
+                                                ` / ${formatUsd(costData.cumulativeBudgetUsd)}`] })] }), cumulativePercent != null && (_jsx(ProgressBar, { progress: Math.min(cumulativePercent, 100), sx: { height: 6 }, bg: cumulativePercent > 100
+                                    ? 'danger.emphasis'
+                                    : cumulativePercent > 80
+                                        ? 'attention.emphasis'
+                                        : 'accent.emphasis' }))] }), _jsxs(Box, { sx: {
+                            display: 'flex',
+                            gap: 3,
+                            borderTop: '1px solid',
+                            borderColor: 'border.default',
+                            pt: 2,
+                        }, children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Requests" }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: costData.requestCount })] }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Tokens" }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: formatTokens(costData.totalTokensUsed) })] })] }), costData.modelBreakdown.length > 0 && (_jsxs(Box, { sx: {
+                            mt: 2,
+                            pt: 2,
+                            borderTop: '1px solid',
+                            borderColor: 'border.default',
+                        }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 1 }, children: "By model" }), costData.modelBreakdown.map(m => (_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    justifyContent: 'space-between',
+                                    alignItems: 'center',
+                                    py: '2px',
+                                }, children: [_jsx(Text, { sx: { fontSize: 0 }, children: m.model }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [formatUsd(m.costUsd), " (", m.requests, " req)"] })] }, m.model)))] }))] })] }));
+}
+export default CostTracker;

package/lib/context/TokenUsageChart.d.ts

@@ -0,0 +1,10 @@
+export interface TokenUsageChartProps {
+    serviceName?: string;
+    apiKey?: string;
+    runUrl?: string;
+    wsRunUrl?: string;
+    height?: number;
+    days?: number;
+}
+export declare function TokenUsageChart({ serviceName, apiKey, runUrl, wsRunUrl, height, days, }: TokenUsageChartProps): import("react/jsx-runtime").JSX.Element;
+export default TokenUsageChart;