@datalayer/agent-runtimes 1.0.1 → 1.0.3

package/lib/components/OutputCard.js

@@ -0,0 +1,80 @@
+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.
+ */
+import { Button, Label, Text, Truncate } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { DownloadIcon, EyeClosedIcon, EyeIcon, TrashIcon, } from '@primer/octicons-react';
+import { createMarkdownDownloadPayload, downloadTextPayload, formatRelativeTime, } from '@datalayer/core/lib/utils';
+import { Streamdown } from 'streamdown';
+import { streamdownMarkdownStyles } from '../chat/styles/streamdownStyles';
+export function OutputCard({ event, onToggleRead, onDelete, onOpenAgent, }) {
+    const outputText = event.kind === 'agent-ended' && event.payload?.outputs
+        ? String(event.payload.outputs)
+        : null;
+    const runtimeId = String(event?.agent_id ||
+        event?.runtime_id ||
+        event?.payload?.runtime_id ||
+        event?.payload?.agent_id ||
+        'runtime');
+    const startedAt = event?.started_at || event?.payload?.started_at || null;
+    const endedAt = event?.ended_at || event?.payload?.ended_at || null;
+    const durationMs = event.kind === 'agent-ended' ? event.payload?.duration_ms : null;
+    return (_jsxs(Box, { sx: {
+            minWidth: 0,
+            maxWidth: '100%',
+            overflow: 'hidden',
+            p: 3,
+            borderRadius: 2,
+            border: '1px solid',
+            borderColor: event.read ? 'border.default' : 'accent.muted',
+            bg: event.read ? 'canvas.default' : 'accent.subtle',
+        }, children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'flex-start',
+                    gap: 2,
+                    mb: 2,
+                    minWidth: 0,
+                }, children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 2,
+                            minWidth: 0,
+                            flex: 1,
+                        }, children: [_jsx(Label, { variant: "success", children: "output" }), _jsx(Truncate, { maxWidth: "50%", title: String(event.title || runtimeId), sx: { fontWeight: 'semibold', fontSize: 1, minWidth: 0 }, children: event.title || runtimeId }), event.payload?.exit_status && (_jsxs(Label, { variant: "success", sx: { fontSize: 0, whiteSpace: 'nowrap' }, children: ["Status: ", String(event.payload.exit_status)] })), event.agent_id && (_jsx(Truncate, { maxWidth: 240, title: String(event.agent_id), children: _jsx(Label, { variant: "secondary", sx: { fontSize: 0, maxWidth: '100%' }, children: event.agent_id }) }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }, children: [event.agent_id && onOpenAgent && (_jsx(Button, { size: "small", variant: "invisible", onClick: () => onOpenAgent(String(event.agent_id)), children: "Open agent" })), event.created_at && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', whiteSpace: 'nowrap' }, children: new Date(event.created_at).toLocaleString() })), _jsx(Button, { size: "small", variant: "invisible", onClick: () => onToggleRead(event), sx: { p: 1 }, children: event.read ? _jsx(EyeClosedIcon, { size: 12 }) : _jsx(EyeIcon, { size: 12 }) }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => onDelete(event), sx: { p: 1, color: 'danger.fg' }, children: _jsx(TrashIcon, { size: 12 }) })] })] }), (startedAt || endedAt || durationMs != null) && (_jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mb: 2 }, children: [startedAt ? `Started: ${formatRelativeTime(startedAt)}` : '', startedAt && endedAt ? ' · ' : '', endedAt ? `Ended: ${formatRelativeTime(endedAt)}` : '', (startedAt || endedAt) && durationMs != null ? ' · ' : '', durationMs != null
+                        ? `Duration: ${(Number(durationMs) / 1000).toFixed(1)}s`
+                        : ''] })), outputText && (_jsx(Box, { sx: {
+                    p: 2,
+                    borderRadius: 2,
+                    border: '1px solid',
+                    borderColor: 'border.muted',
+                    bg: 'canvas.subtle',
+                }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'flex-start', gap: 1 }, children: [_jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: _jsxs("details", { children: [_jsx("summary", { style: {
+                                            cursor: 'pointer',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            minWidth: 0,
+                                        }, children: _jsxs(Box, { sx: {
+                                                display: 'flex',
+                                                alignItems: 'center',
+                                                gap: 2,
+                                                minWidth: 0,
+                                                width: '100%',
+                                                flexWrap: 'nowrap',
+                                            }, children: [_jsx(Text, { sx: {
+                                                        fontSize: 0,
+                                                        fontWeight: 'semibold',
+                                                        flexShrink: 0,
+                                                    }, children: "Output" }), _jsx(Truncate, { maxWidth: "100%", title: outputText, sx: {
+                                                        fontSize: 0,
+                                                        color: 'fg.muted',
+                                                        minWidth: 0,
+                                                        flex: 1,
+                                                    }, children: outputText })] }) }), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: outputText }) }) })] }) }), _jsx(Button, { size: "small", variant: "invisible", sx: { p: 1, flexShrink: 0 }, title: "Download output markdown", "aria-label": "Download output markdown", onClick: () => {
+                                const payload = createMarkdownDownloadPayload(outputText, `${runtimeId}-output`);
+                                downloadTextPayload(payload);
+                            }, children: _jsx(DownloadIcon, { size: 12 }) })] }) }))] }));
+}
+export default OutputCard;

package/lib/components/ToolApprovalCard.d.ts

@@ -0,0 +1,33 @@
+export type ApprovalStatus = 'pending' | 'approved' | 'approved_with_changes' | 'rejected';
+type RiskLevel = 'low' | 'medium' | 'high';
+export declare const TOOL_APPROVAL_STATUS_CONFIG: Record<ApprovalStatus, {
+    label: string;
+    variant: 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'attention' | 'severe' | 'danger' | 'done';
+}>;
+export interface ToolApprovalCardData {
+    id: string;
+    toolName: string;
+    toolDescription: string;
+    sourceType: 'agent' | 'team';
+    sourceName: string;
+    requestedBy: string;
+    requestedAt: string;
+    status: ApprovalStatus;
+    reviewedBy?: string;
+    reviewedAt?: string;
+    reason: string;
+    reviewComment?: string;
+    changes?: string;
+    parameters?: Record<string, string>;
+    riskLevel: RiskLevel;
+    isRead?: boolean;
+}
+export interface ToolApprovalCardProps {
+    approval: ToolApprovalCardData;
+    onApprove?: (id: string) => void;
+    onReject?: (id: string) => void;
+    onToggleRead?: (id: string, read: boolean) => void;
+    onDelete?: (id: string) => void;
+}
+export declare function ToolApprovalCard({ approval, onApprove, onReject, onToggleRead, onDelete, }: ToolApprovalCardProps): import("react/jsx-runtime").JSX.Element;
+export default ToolApprovalCard;

package/lib/components/ToolApprovalCard.js

@@ -0,0 +1,60 @@
+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.
+ */
+import { Button, Label, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { CheckCircleIcon, EyeClosedIcon, EyeIcon, TrashIcon, XCircleIcon, } from '@primer/octicons-react';
+import { formatRelativeTime } from '@datalayer/core/lib/utils';
+export const TOOL_APPROVAL_STATUS_CONFIG = {
+    pending: { label: 'Pending', variant: 'attention' },
+    approved: { label: 'Approved', variant: 'success' },
+    approved_with_changes: { label: 'Approved with Changes', variant: 'accent' },
+    rejected: { label: 'Rejected', variant: 'danger' },
+};
+const RISK_CONFIG = {
+    low: { label: 'Low Risk', variant: 'success' },
+    medium: { label: 'Medium Risk', variant: 'attention' },
+    high: { label: 'High Risk', variant: 'severe' },
+};
+export function ToolApprovalCard({ approval, onApprove, onReject, onToggleRead, onDelete, }) {
+    const statusConfig = TOOL_APPROVAL_STATUS_CONFIG[approval.status];
+    const riskConfig = RISK_CONFIG[approval.riskLevel];
+    const parameterCount = approval.parameters
+        ? Object.keys(approval.parameters).length
+        : 0;
+    const detailLineSx = { fontSize: 0, overflowWrap: 'anywhere' };
+    const detailLabelSx = { color: 'fg.muted' };
+    const detailValueSx = { color: 'fg.default' };
+    const isRead = approval.isRead ?? false;
+    return (_jsx(Box, { sx: {
+            p: 3,
+            borderRadius: 2,
+            border: '1px solid',
+            borderColor: isRead ? 'transparent' : 'accent.muted',
+            bg: isRead ? 'canvas.default' : 'accent.subtle',
+        }, children: _jsxs(Box, { sx: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'flex-start',
+                gap: 3,
+            }, children: [_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 2,
+                                mb: 1,
+                                flexWrap: 'wrap',
+                            }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: approval.toolName }), _jsx(Label, { variant: statusConfig.variant, children: statusConfig.label }), _jsx(Label, { variant: riskConfig.variant, children: riskConfig.label }), !isRead && _jsx(Label, { variant: "accent", children: "Unread" })] }), _jsxs(Text, { sx: { color: 'fg.muted', fontSize: 0, display: 'block' }, children: ["Requested by ", approval.requestedBy, ' ', formatRelativeTime(approval.requestedAt), approval.reviewedAt
+                                    ? `, reviewed by ${approval.reviewedBy || 'reviewer'} ${formatRelativeTime(approval.reviewedAt)}`
+                                    : ', review pending'] }), _jsx(Box, { sx: {
+                                mt: 2,
+                                width: '100%',
+                                p: 2,
+                                borderRadius: 2,
+                                border: '1px solid',
+                                borderColor: 'border.muted',
+                                bg: 'canvas.subtle',
+                            }, children: _jsxs("details", { children: [_jsx("summary", { style: { cursor: 'pointer' }, children: _jsx(Text, { sx: { fontSize: 0, fontWeight: 'semibold' }, children: "View details" }) }), _jsxs(Box, { sx: { mt: 2, display: 'grid', gap: 1 }, children: [_jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Source:", ' '] }), _jsxs(Text, { as: "span", sx: detailValueSx, children: [approval.sourceName, " (", approval.sourceType, ")"] })] }), _jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Request ID:", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: approval.id })] }), _jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Requested at:", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: new Date(approval.requestedAt).toLocaleString() })] }), _jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Requested by:", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: approval.requestedBy })] }), approval.reviewedAt && (_jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Reviewed at:", ' '] }), _jsxs(Text, { as: "span", sx: detailValueSx, children: [new Date(approval.reviewedAt).toLocaleString(), " by", ' ', approval.reviewedBy || 'reviewer'] })] })), _jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Parameters:", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: parameterCount })] }), _jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: ["Reason:", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: approval.reason || approval.toolDescription })] })] }), parameterCount > 0 && (_jsx(Box, { sx: { mt: 2, display: 'grid', gap: 1 }, children: Object.entries(approval.parameters || {}).map(([key, value]) => (_jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: [key, ":", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: String(value) })] }, key))) }))] }) })] }), approval.status === 'pending' && (_jsxs(Box, { sx: { display: 'flex', gap: 2, flexShrink: 0 }, children: [_jsx(Button, { size: "small", variant: "primary", leadingVisual: CheckCircleIcon, onClick: () => onApprove?.(approval.id), children: "Approve" }), _jsx(Button, { size: "small", variant: "danger", leadingVisual: XCircleIcon, onClick: () => onReject?.(approval.id), children: "Reject" })] })), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }, children: [_jsx(Button, { size: "small", variant: "invisible", onClick: () => onToggleRead?.(approval.id, isRead), sx: { p: 1 }, title: `Mark as ${isRead ? 'unread' : 'read'}`, "aria-label": `Mark as ${isRead ? 'unread' : 'read'}`, children: isRead ? _jsx(EyeClosedIcon, { size: 12 }) : _jsx(EyeIcon, { size: 12 }) }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => onDelete?.(approval.id), sx: { p: 1, color: 'danger.fg' }, title: "Delete", "aria-label": "Delete", children: _jsx(TrashIcon, { size: 12 }) })] })] }) }));
+}
+export default ToolApprovalCard;

package/lib/components/index.d.ts

@@ -1,7 +1,3 @@
-export * from './chat';
-export type { ToolCallStatus } from './chat/types/message';
-export type { ToolCallStatus as DisplayToolCallStatus } from './chat/components/base/ChatBase';
-export { AgentConfiguration, AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS, isSpecSelection, getSpecId, } from './AgentConfiguration';
-export type { AgentLibrary, Transport, Extension, AgentConfigurationProps, SkillOption, MCPServerTool, LibraryAgentSpec, } from './AgentConfiguration';
-export { McpServerManager } from './McpServerManager';
-export type { McpServerSelection, McpServerManagerProps, } from './McpServerManager';
+export * from './ToolApprovalCard';
+export * from './NotificationEventCard';
+export * from './OutputCard';

package/lib/components/index.js

@@ -2,7 +2,6 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-// Primary exports from chat (next-gen chat component)
-export * from './chat';
-export { AgentConfiguration, AGENT_LIBRARIES, TRANSPORTS, EXTENSIONS, isSpecSelection, getSpecId, } from './AgentConfiguration';
-export { McpServerManager } from './McpServerManager';
+export * from './ToolApprovalCard';
+export * from './NotificationEventCard';
+export * from './OutputCard';

package/lib/{components → config}/AgentConfiguration.d.ts

@@ -1,27 +1,45 @@
 import React from 'react';
-import type { Agent } from '../types/Types';
-import type { Transport } from './chat/components';
-import type { Extension } from './chat/types';
-import type { McpServerSelection } from './McpServerManager';
+import type { ExampleAgent } from '../types';
 import type { OAuthProvider, Identity } from '../identity';
-import type { MCPServerTool as MCPServerToolType } from '../types/Types';
+import type { AgentLibrary, Extension, McpServerSelection, Protocol } from '../types';
 /**
  * Agent spec entry from the library endpoint.
  */
 export interface LibraryAgentSpec {
+    [key: string]: unknown;
     id: string;
+    version?: string;
     name: string;
     description: string;
     tags: string[];
     enabled: boolean;
+    model?: string | null;
+    goal?: string | null;
     emoji?: string | null;
     icon?: string | null;
     color?: string | null;
     skills: string[];
+    tools?: string[];
     systemPrompt?: string | null;
     systemPromptCodemodeAddons?: string | null;
     suggestions: string[];
     welcomeMessage?: string | null;
+    welcomeNotebook?: string | null;
+    welcomeDocument?: string | null;
+    sandboxVariant?: string | null;
+    protocol?: string | null;
+    uiExtension?: string | null;
+    trigger?: Record<string, unknown> | null;
+    modelConfig?: Record<string, unknown> | null;
+    mcpServerTools?: Array<Record<string, unknown>> | null;
+    guardrails?: Array<Record<string, unknown>> | null;
+    evals?: Array<Record<string, unknown>> | null;
+    codemode?: Record<string, unknown> | null;
+    output?: Record<string, unknown> | null;
+    advanced?: Record<string, unknown> | null;
+    authorizationPolicy?: string | null;
+    notifications?: Record<string, unknown> | null;
+    memory?: string | null;
     mcpServers: {
         name: string;
         id: string;
@@ -35,19 +53,11 @@ export declare const isSpecSelection: (id: string) => boolean;
  * Helper: extract the spec id from a spec selection value.
  */
 export declare const getSpecId: (id: string) => string;
-/**
- * MCP Server Tool type (re-exported from types.ts)
- */
-export type MCPServerTool = MCPServerToolType;
 export interface SkillOption {
     id: string;
     name: string;
     description?: string;
 }
-type AgentLibrary = 'pydantic-ai' | 'langchain' | 'jupyter-ai';
-export type { AgentLibrary };
-export type { Transport };
-export type { Extension };
 declare const AGENT_LIBRARIES: {
     value: AgentLibrary;
     label: string;
@@ -55,7 +65,7 @@ declare const AGENT_LIBRARIES: {
     disabled?: boolean;
 }[];
 declare const TRANSPORTS: {
-    value: Transport;
+    value: Protocol;
     label: string;
     description: string;
 }[];
@@ -76,13 +86,19 @@ export interface AIModelConfig {
 }
 export interface AgentConfigurationProps {
     agentLibrary: AgentLibrary;
-    transport: Transport;
+    protocol: Protocol;
     extensions: Extension[];
     wsUrl: string;
     baseUrl: string;
     agentName: string;
+    description: string;
+    goal: string;
     model: string;
-    agents: readonly Agent[];
+    systemPrompt: string;
+    systemPromptCodemodeAddons: string;
+    tools: string[];
+    sandboxVariant: string;
+    agents: readonly ExampleAgent[];
     selectedAgentId: string;
     isCreatingAgent?: boolean;
     createError?: string | null;
@@ -103,12 +119,18 @@ export interface AgentConfigurationProps {
     onIdentityConnect?: (identity: Identity) => void;
     onIdentityDisconnect?: (provider: OAuthProvider) => void;
     onAgentLibraryChange: (library: AgentLibrary) => void;
-    onTransportChange: (transport: Transport) => void;
+    onTransportChange: (protocol: Protocol) => void;
     onExtensionsChange: (extensions: Extension[]) => void;
     onWsUrlChange: (url: string) => void;
     onBaseUrlChange: (url: string) => void;
     onAgentNameChange: (name: string) => void;
+    onDescriptionChange: (description: string) => void;
+    onGoalChange: (goal: string) => void;
     onModelChange: (model: string) => void;
+    onSystemPromptChange: (systemPrompt: string) => void;
+    onSystemPromptCodemodeAddonsChange: (addons: string) => void;
+    onToolsChange: (tools: string[]) => void;
+    onSandboxVariantChange: (sandboxVariant: string) => void;
     onAgentSelect: (agentId: string) => void;
     onConnect: () => void;
     onEnableCodemodeChange?: (enabled: boolean) => void;
@@ -122,10 +144,10 @@ export interface AgentConfigurationProps {
     richEditor?: boolean;
     /** Callback when rich editor changes */
     onRichEditorChange?: (enabled: boolean) => void;
-    /** Durable mode */
-    durable?: boolean;
-    /** Callback when durable changes */
-    onDurableChange?: (enabled: boolean) => void;
+    /** Managed lifecycle mode */
+    managed?: boolean;
+    /** Callback when managed changes */
+    onManagedChange?: (enabled: boolean) => void;
 }
 /**
  * Agent Configuration Component

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';