@datalayer/agent-runtimes 1.0.4 → 1.0.5

package/README.md

@@ -55,6 +55,27 @@ Agent Runtimes solves the complexity of deploying AI agents by providing:
 - 💾 **Persistence**: DBOS support for durable execution
 - 🔒 **Context Optimization**: LLM context management
 
+## Examples
+
+The examples will demonstrate how to use the Agent Runtimes functionality in various scenarios and frameworks.
+
+```bash
+make examples
+```
+
+On the main page, you’ll find an example gallery (cards) that break things down into practical building blocks:
+
+• UX patterns (aka GenUI) with protocols like A2UI and AG-UI
+• Interactive or triggered workflows
+• Agent Identity and Controls with guardrails, monitoring, tool approvals
+• Programmatic tooling with Sandbox and Codemode for MCP and Skills
+• Outputs and Notifications
+• Real-time collaboration with users, subagents, and multi-agent teams
+• Custom agents built from Agentspecs
+• ...
+
+Each of these concerns deserves more than a one-off solution—they need deep, composable, and pluggable implementations.
+
 ## Documentation
 
 The detailed guides for architecture, use cases, interactive chat, key concepts, and runtime configuration are now in Docusaurus docs:
@@ -65,3 +86,16 @@ The detailed guides for architecture, use cases, interactive chat, key concepts,
 - [Transports](https://agent-runtimes.datalayer.tech/transports)
 - [Programmatic Tools](https://agent-runtimes.datalayer.tech/programmatic-tools)
 - [CLI](https://agent-runtimes.datalayer.tech/cli)
+
+## Agentspecs
+
+Generated catalogs are produced via:
+
+```bash
+make specs
+```
+
+Generation scripts are under [scripts/codegen](https://github.com/datalayer/agent-runtimes/tree/main/scripts/codegen), and outputs are written to:
+
+- Python: [agent_runtimes/specs](https://github.com/datalayer/agent-runtimes/tree/main/agent_runtimes/specs)
+- TypeScript: [src/specs](https://github.com/datalayer/agent-runtimes/tree/main/src/specs)

package/lib/App.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  */
 import { useJupyter, JupyterReactTheme } from '@datalayer/jupyter-react';
 import { JupyterCellExample } from './examples/CellSimpleExample';
-import { JupyterNotebookExample } from './examples/NotebookSimpleExample';
+import { JupyterNotebookExample } from './examples/NotebookExample';
 import './App.css';
 export function App() {
     const { serviceManager } = useJupyter({

package/lib/agents/AgentDetails.d.ts

@@ -3,7 +3,10 @@
  * including name, protocol, URL, message count, and context details.
  */
 import type { ReactNode } from 'react';
+import { type FullContextResponse } from '../context/ContextInspector';
+import type { ContextSnapshotResponse } from '../context/ContextPanel';
 import type { OAuthProvider, OAuthProviderConfig, Identity } from '../identity';
+import type { CodemodeStatusData } from '../types/stream';
 export interface AgentDetailsProps {
     /** Agent name/title */
     name?: string;
@@ -39,9 +42,27 @@ export interface AgentDetailsProps {
     showBackHeader?: boolean;
     /** Whether to show context usage/history and context snapshot sections (default: true) */
     showUsage?: boolean;
+    /** Live MCP status from WS — bypasses REST polling when provided */
+    mcpStatusData?: MCPToolsetsStatus | null;
+    /** Live codemode status from WS — bypasses REST polling when provided */
+    codemodeStatusData?: CodemodeStatusData | null;
+    /** Live context usage snapshot from WS — bypasses REST polling when provided */
+    contextSnapshotData?: ContextSnapshotResponse | null;
+    /** Live full context from WS — bypasses REST polling when provided */
+    fullContextData?: FullContextResponse | null;
+}
+/**
+ * MCP toolsets status response
+ */
+interface MCPToolsetsStatus {
+    initialized: boolean;
+    ready_count: number;
+    failed_count: number;
+    ready_servers: string[];
+    failed_servers: Record<string, string>;
 }
 /**
  * AgentDetails component displays comprehensive information about the agent.
  */
-export declare function AgentDetails({ name, icon, emoji, protocol, url, messageCount, agentId, apiBase, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, showBackHeader, showUsage, }: AgentDetailsProps): import("react/jsx-runtime").JSX.Element;
+export declare function AgentDetails({ name, icon, emoji, protocol, url, messageCount, agentId, apiBase, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, showBackHeader, showUsage, mcpStatusData, codemodeStatusData, contextSnapshotData, fullContextData, }: AgentDetailsProps): import("react/jsx-runtime").JSX.Element;
 export default AgentDetails;

package/lib/agents/AgentDetails.js

@@ -3,10 +3,11 @@ import { ArrowLeftIcon, CheckCircleIcon, XCircleIcon, CodeIcon, BriefcaseIcon, D
 import { Button, Heading, IconButton, Text, Label, Spinner, ToggleSwitch, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 import { AiAgentIcon } from '@datalayer/icons-react';
-import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useQuery, useMutation } from '@tanstack/react-query';
 import { ContextPanel } from '../context/ContextPanel';
 import { ContextInspector, } from '../context/ContextInspector';
 import { AgentIdentity } from '../identity/AgentIdentity';
+import { useAgentRuntimeCodemodeStatus, useAgentRuntimeContextSnapshot, useAgentRuntimeFullContext, useAgentRuntimeMcpStatus, useAgentRuntimeWsState, } from '../stores';
 /**
  * Get the API base URL for fetching data.
  * If apiBase prop is provided, use it.
@@ -27,13 +28,11 @@ function getApiBase(apiBase) {
 /**
  * Convert context snapshot data to CSV format and trigger download
  */
-async function downloadContextSnapshotAsCSV(agentId, apiBase) {
-    const base = getApiBase(apiBase);
-    const response = await fetch(`${base}/api/v1/configure/agents/${encodeURIComponent(agentId)}/full-context`);
-    if (!response.ok) {
-        throw new Error('Failed to fetch context snapshot');
+async function downloadContextSnapshotAsCSV(agentId, _apiBase, preloadedData) {
+    if (!preloadedData) {
+        throw new Error('No context data available for CSV export. Data is delivered via WebSocket.');
     }
-    const data = await response.json();
+    const data = preloadedData;
     const rows = [];
     // Header section
     rows.push(['Context Snapshot for Agent', data.agentId]);
@@ -165,34 +164,23 @@ async function downloadContextSnapshotAsCSV(agentId, apiBase) {
 /**
  * AgentDetails component displays comprehensive information about the agent.
  */
-export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, messageCount, agentId, apiBase, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, showBackHeader = true, showUsage = true, }) {
-    const queryClient = useQueryClient();
-    // Fetch MCP toolsets status
-    const { data: mcpStatus, isLoading: mcpLoading } = useQuery({
-        queryKey: ['mcp-toolsets-status', apiBase],
-        queryFn: async () => {
-            const base = getApiBase(apiBase);
-            const response = await fetch(`${base}/api/v1/configure/mcp-toolsets-status`);
-            if (!response.ok) {
-                throw new Error('Failed to fetch MCP status');
-            }
-            return response.json();
-        },
-        refetchInterval: 5000, // Refresh every 5 seconds
-    });
-    // Fetch Codemode status
-    const { data: codemodeStatus, isLoading: codemodeLoading } = useQuery({
-        queryKey: ['codemode-status', apiBase],
-        queryFn: async () => {
-            const base = getApiBase(apiBase);
-            const response = await fetch(`${base}/api/v1/configure/codemode-status`);
-            if (!response.ok) {
-                throw new Error('Failed to fetch Codemode status');
-            }
-            return response.json();
-        },
-        refetchInterval: 5000, // Refresh every 5 seconds
-    });
+export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, messageCount, agentId, apiBase, identityProviders, onIdentityConnect, onIdentityDisconnect, onBack, showBackHeader = true, showUsage = true, mcpStatusData, codemodeStatusData, contextSnapshotData, fullContextData, }) {
+    const wsMcpStatus = useAgentRuntimeMcpStatus();
+    const wsCodemodeStatus = useAgentRuntimeCodemodeStatus();
+    const wsContextSnapshot = useAgentRuntimeContextSnapshot();
+    const wsFullContext = useAgentRuntimeFullContext();
+    const wsState = useAgentRuntimeWsState();
+    const mcpStatus = mcpStatusData ?? wsMcpStatus;
+    const codemodeStatus = codemodeStatusData ??
+        wsCodemodeStatus;
+    const resolvedContextSnapshot = contextSnapshotData ??
+        wsContextSnapshot;
+    const resolvedFullContext = fullContextData ?? wsFullContext;
+    const hasMcpLiveData = mcpStatusData !== undefined || wsState !== 'closed';
+    const hasCodemodeLiveData = codemodeStatusData !== undefined || wsState !== 'closed';
+    // REST polling removed — data comes exclusively via WS `agent.snapshot`.
+    const mcpLoading = wsState === 'connecting' && !mcpStatus;
+    const codemodeLoading = wsState === 'connecting' && !codemodeStatus;
     // Mutation to toggle codemode
     const toggleCodemodeMutation = useMutation({
         mutationFn: async (enabled) => {
@@ -210,8 +198,7 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
             return response.json();
         },
         onSuccess: () => {
-            // Invalidate the codemode status query to refetch
-            queryClient.invalidateQueries({ queryKey: ['codemode-status'] });
+            // Status update will arrive via WS `agent.snapshot` push
         },
     });
     // Fetch agent spec (original creation request with separated system prompts)
@@ -330,7 +317,7 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                     borderRadius: 2,
                                     border: '1px solid',
                                     borderColor: 'border.default',
-                                }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ServerIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Variant:" }), _jsx(Label, { variant: agentSpec.sandbox.variant === 'local-jupyter'
+                                }, children: _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ServerIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100 }, children: "Variant:" }), _jsx(Label, { variant: agentSpec.sandbox.variant === 'jupyter'
                                                         ? 'accent'
                                                         : 'secondary', size: "small", children: agentSpec.sandbox.variant })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 100, pl: 4 }, children: "Running:" }), agentSpec.sandbox.sandbox_running ? (_jsxs(Box, { sx: {
                                                         display: 'flex',
@@ -340,7 +327,7 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                                         display: 'flex',
                                                         alignItems: 'center',
                                                         gap: 1,
-                                                    }, children: [_jsx(XCircleIcon, { size: 12, fill: "fg.muted" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No" })] }))] }), agentSpec.sandbox.variant === 'local-jupyter' && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
+                                                    }, children: [_jsx(XCircleIcon, { size: 12, fill: "fg.muted" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No" })] }))] }), agentSpec.sandbox.variant === 'jupyter' && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: {
                                                                 fontSize: 0,
                                                                 color: 'fg.muted',
                                                                 width: 100,
@@ -424,7 +411,7 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                     borderRadius: 2,
                                     border: '1px solid',
                                     borderColor: 'border.default',
-                                }, children: mcpLoading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading MCP status..." })] })) : mcpStatus ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: _jsxs(Text, { sx: { fontSize: 1 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold' }, children: mcpStatus.ready_count }), ' ', "ready,", ' ', _jsx(Text, { as: "span", sx: { fontWeight: 'semibold' }, children: mcpStatus.failed_count }), ' ', "failed"] }) }), mcpStatus.ready_servers.length > 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(Text, { sx: {
+                                }, children: !hasMcpLiveData && mcpLoading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading MCP status..." })] })) : mcpStatus ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsx(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: _jsxs(Text, { sx: { fontSize: 1 }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'semibold' }, children: mcpStatus.ready_count }), ' ', "ready,", ' ', _jsx(Text, { as: "span", sx: { fontWeight: 'semibold' }, children: mcpStatus.failed_count }), ' ', "failed"] }) }), mcpStatus.ready_servers.length > 0 && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 1 }, children: [_jsx(Text, { sx: {
                                                         fontSize: 0,
                                                         fontWeight: 'semibold',
                                                         color: 'fg.muted',
@@ -453,7 +440,7 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                                                 pl: 4,
                                                                 whiteSpace: 'pre-wrap',
                                                                 wordBreak: 'break-word',
-                                                            }, children: error.split('\n')[0] })] }, server)))] }))] })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load MCP status" })) })] }), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
+                                                            }, children: error.split('\n')[0] })] }, server)))] }))] })) : hasMcpLiveData ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Waiting for MCP status from WebSocket stream..." })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load MCP status" })) })] }), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: {
                                     fontSize: 1,
                                     fontWeight: 'semibold',
                                     mb: 2,
@@ -464,7 +451,7 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                     borderRadius: 2,
                                     border: '1px solid',
                                     borderColor: 'border.default',
-                                }, children: codemodeLoading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading Codemode status..." })] })) : codemodeStatus ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsxs(Box, { sx: {
+                                }, children: !hasCodemodeLiveData && codemodeLoading ? (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Loading Codemode status..." })] })) : codemodeStatus ? (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 3 }, children: [_jsxs(Box, { sx: {
                                                 display: 'flex',
                                                 alignItems: 'center',
                                                 justifyContent: 'space-between',
@@ -486,9 +473,9 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                                         flexDirection: 'column',
                                                         gap: 1,
                                                         pl: 4,
-                                                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "Variant:" }), _jsx(Label, { variant: codemodeStatus.sandbox.variant === 'local-jupyter'
+                                                    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', width: 80 }, children: "Variant:" }), _jsx(Label, { variant: codemodeStatus.sandbox.variant === 'jupyter'
                                                                         ? 'accent'
-                                                                        : 'secondary', size: "small", children: codemodeStatus.sandbox.variant })] }), codemodeStatus.sandbox.variant === 'local-jupyter' && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                                                                        : 'secondary', size: "small", children: codemodeStatus.sandbox.variant })] }), codemodeStatus.sandbox.variant === 'jupyter' && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
                                                                         display: 'flex',
                                                                         alignItems: 'center',
                                                                         gap: 2,
@@ -573,7 +560,7 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                                         gap: 1,
                                                         flexWrap: 'wrap',
                                                         mt: 1,
-                                                    }, children: codemodeStatus.available_skills.map(skill => (_jsx(Label, { variant: "secondary", size: "small", children: skill.name }, skill.name))) })] })), codemodeStatus.available_skills.length === 0 && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No skills available. Add skills to the skills/ directory." }))] })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load Codemode status" })) })] }), showUsage && agentId && (_jsx(ContextPanel, { agentId: agentId, apiBase: apiBase, messageCount: messageCount, chartHeight: "200px" })), showUsage && agentId && (_jsxs(Box, { sx: { mt: 3 }, children: [_jsxs(Box, { sx: {
+                                                    }, children: codemodeStatus.available_skills.map(skill => (_jsx(Label, { variant: "secondary", size: "small", children: skill.name }, skill.name))) })] })), codemodeStatus.available_skills.length === 0 && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No CodeMode skills are available for this agent. You can still use MCP tools by selecting MCP servers." }))] })) : hasCodemodeLiveData ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Waiting for Codemode status from WebSocket stream..." })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Failed to load Codemode status" })) })] }), showUsage && agentId && (_jsx(ContextPanel, { agentId: agentId, apiBase: apiBase, liveData: resolvedContextSnapshot, messageCount: messageCount, chartHeight: "200px" })), showUsage && agentId && (_jsxs(Box, { sx: { mt: 3 }, children: [_jsxs(Box, { sx: {
                                     display: 'flex',
                                     alignItems: 'center',
                                     justifyContent: 'space-between',
@@ -582,12 +569,12 @@ export function AgentDetails({ name = 'AI Agent', icon, emoji, protocol, url, me
                                             fontSize: 1,
                                             fontWeight: 'semibold',
                                             color: 'fg.muted',
-                                        }, children: "Context Snapshot" }), _jsx(Button, { size: "small", variant: "invisible", leadingVisual: DownloadIcon, onClick: () => downloadContextSnapshotAsCSV(agentId, apiBase), children: "Download" })] }), _jsx(Box, { sx: {
+                                        }, children: "Context Snapshot" }), _jsx(Button, { size: "small", variant: "invisible", leadingVisual: DownloadIcon, onClick: () => downloadContextSnapshotAsCSV(agentId, apiBase, resolvedFullContext), children: "Download" })] }), _jsx(Box, { sx: {
                                     p: 3,
                                     bg: 'canvas.subtle',
                                     borderRadius: 2,
                                     border: '1px solid',
                                     borderColor: 'border.default',
-                                }, children: _jsx(ContextInspector, { agentId: agentId, apiBase: apiBase }) })] })), _jsx(AgentIdentity, { providers: identityProviders, title: "Connected Accounts", showHeader: true, showDescription: true, description: "OAuth identities connected to this agent. Agents can use these to access external services like GitHub repositories on your behalf.", showExpirationDetails: true, allowReconnect: Boolean(identityProviders), onConnect: onIdentityConnect, onDisconnect: onIdentityDisconnect }), showBackHeader && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { variant: "primary", onClick: onBack, sx: { width: '100%' }, children: "Back to Chat" }) }))] })] }));
+                                }, children: _jsx(ContextInspector, { agentId: agentId, apiBase: apiBase, liveData: resolvedFullContext }) })] })), _jsx(AgentIdentity, { providers: identityProviders, title: "Connected Accounts", showHeader: true, showDescription: true, description: "OAuth identities connected to this agent. Agents can use these to access external services like GitHub repositories on your behalf.", showExpirationDetails: true, allowReconnect: Boolean(identityProviders), onConnect: onIdentityConnect, onDisconnect: onIdentityDisconnect }), showBackHeader && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { variant: "primary", onClick: onBack, sx: { width: '100%' }, children: "Back to Chat" }) }))] })] }));
 }
 export default AgentDetails;

package/lib/api/index.d.ts

@@ -12,4 +12,3 @@ export * as evals from './evals';
 export * as events from './events';
 export * as notifications from './notifications';
 export * as output from './output';
-export * as toolApprovals from './tool-approvals';

package/lib/api/index.js

@@ -10,11 +10,13 @@
  *
  * @module api
  */
-// Agents Service API (agents, tool-approvals, notifications, etc.)
+// Agents Service API (agents, notifications, etc.)
+// Tool approvals are intentionally NOT exposed over REST here — all
+// approval interactions flow over the websocket stream; see
+// `hooks/useToolApprovals` and `components/ToolApprovalBanner`.
 export * as agents from './agents';
 export * as context from './context';
 export * as evals from './evals';
 export * as events from './events';
 export * as notifications from './notifications';
 export * as output from './output';
-export * as toolApprovals from './tool-approvals';

package/lib/chat/Chat.d.ts

@@ -1,11 +1,10 @@
-import type { ReactNode } from 'react';
 import type { OAuthProvider, OAuthProviderConfig, Identity } from '../identity';
-import type { Extension, FrontendToolDefinition, McpServerSelection, Protocol, ChatViewMode, ModelConfig, RenderToolResult, Suggestion } from '../types';
+import type { ChatCommonProps, Extension, Protocol } from '../types';
 /**
- * Chat props
+ * Chat props — extends ChatCommonProps with transport-specific configuration.
  */
-export interface ChatProps {
-    /** Transport to use */
+export interface ChatProps extends ChatCommonProps {
+    /** Transport to use — REQUIRED (narrows protocol to string enum) */
     protocol: Protocol;
     /** Extensions for chat features */
     extensions?: Extension[];
@@ -15,14 +14,6 @@ export interface ChatProps {
     wsUrl?: string;
     /** Agent ID */
     agentId?: string;
-    /** Authentication token (JWT) to send as Authorization Bearer header */
-    authToken?: string;
-    /** Custom placeholder text */
-    placeholder?: string;
-    /** Custom title */
-    title?: string;
-    /** Brand icon shown in chat header/empty state and details title */
-    brandIcon?: ReactNode;
     /** Whether to auto-connect on mount */
     autoConnect?: boolean;
     /** Whether to use streaming (for protocols that support it) */
@@ -37,57 +28,10 @@ export interface ChatProps {
     onLogout?: () => void;
     /** Callback when collapse panel is clicked */
     onCollapsePanel?: () => void;
-    /** Custom styles */
-    className?: string;
     /** Height of the chat container */
     height?: string | number;
-    /** Show header with connection status */
-    showHeader?: boolean;
-    /** Show the new chat (+) button in the header */
-    showNewChatButton?: boolean;
-    /** Show the clear chat button in the header */
-    showClearButton?: boolean;
-    /** Show model selector (fetched from /configure endpoint) */
-    showModelSelector?: boolean;
-    /** Show tools menu (fetched from /configure endpoint) */
-    showToolsMenu?: boolean;
-    /** Show input area */
-    showInput?: boolean;
-    /** Show skills menu (fetched from /skills endpoint) */
-    showSkillsMenu?: boolean;
-    /** Indicate tools are accessed via Codemode meta-tools */
-    codemodeEnabled?: boolean;
-    /**
-     * Show token usage bar between input and selectors.
-     * @default true
-     */
-    showTokenUsage?: boolean;
-    /** Initial model ID to select (e.g., 'openai:gpt-4o-mini') */
-    initialModel?: string;
-    /**
-     * Override the list of available models.
-     * When provided, this list replaces the models returned by the config endpoint.
-     * Use this to restrict the model selector to a specific subset of models.
-     */
-    availableModels?: ModelConfig[];
-    /** MCP server selections to enable (others will be disabled) */
-    mcpServers?: McpServerSelection[];
-    /** Initial skill IDs to enable */
-    initialSkills?: string[];
     /** Clear messages when component mounts or agentId changes */
     clearOnMount?: boolean;
-    /** Suggestions to show in empty state */
-    suggestions?: Suggestion[];
-    /** Whether to automatically submit the message when a suggestion is clicked */
-    submitOnSuggestionClick?: boolean;
-    /** Description shown in empty state */
-    description?: string;
-    /** Custom content to render in the chat header title row (left side). */
-    headerContent?: ReactNode;
-    /** Custom actions to render in the chat header title row (right side). */
-    headerActions?: ReactNode;
-    /** Auto-focus the input on mount */
-    autoFocus?: boolean;
     /** Identity providers configuration for OAuth */
     identityProviders?: {
         [K in OAuthProvider]?: {
@@ -100,24 +44,6 @@ export interface ChatProps {
     onIdentityConnect?: (identity: Identity) => void;
     /** Callback when identity disconnects */
     onIdentityDisconnect?: (provider: OAuthProvider) => void;
-    /**
-     * Runtime ID for conversation persistence.
-     * When provided, messages are fetched from the server API on page reload
-     * and prevents message mixing between different agent runtimes.
-     */
-    runtimeId?: string;
-    /**
-     * Endpoint URL for fetching conversation history.
-     * When runtimeId is provided, this endpoint is called to fetch
-     * the conversation history on mount.
-     * If not provided, defaults to `{protocol.endpoint}/api/v1/history`.
-     */
-    historyEndpoint?: string;
-    /**
-     * A prompt to append and send after the conversation history is loaded.
-     * The message is shown in the chat and sent to the agent exactly once.
-     */
-    pendingPrompt?: string;
     /**
      * Error banner to display at the top of the chat.
      * Use this to show sandbox connection errors or other warnings.
@@ -126,33 +52,6 @@ export interface ChatProps {
         message: string;
         variant?: 'danger' | 'warning';
     };
-    /**
-     * Show the information icon in the header.
-     * When clicked, it opens the agent details panel.
-     * @default false
-     */
-    showInformation?: boolean;
-    /**
-     * Current chat view mode for the header segmented toggle.
-     * When provided, a view-mode toggle is rendered in the header.
-     */
-    chatViewMode?: ChatViewMode;
-    /**
-     * Callback when the user switches chat view mode via the header toggle.
-     */
-    onChatViewModeChange?: (mode: ChatViewMode) => void;
-    /**
-     * Frontend tool definitions to register with the chat.
-     * Pass an empty array to explicitly disable all frontend tools.
-     */
-    frontendTools?: FrontendToolDefinition[];
-    /** Optional custom renderer for tool-call message cards. */
-    renderToolResult?: RenderToolResult;
-    /**
-     * Hide assistant messages that follow a rendered tool call UI.
-     * Useful to suppress raw tool-call/continuation text and show only tool cards.
-     */
-    hideMessagesAfterToolUI?: boolean;
 }
 /**
  * Chat Component
@@ -195,5 +94,5 @@ export interface ChatProps {
  * />
  * ```
  */
-export declare function Chat({ protocol: transport, extensions: _extensions, baseUrl, wsUrl, agentId, authToken: authTokenProp, placeholder, title, brandIcon, autoConnect: _autoConnect, streaming: _streaming, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height, showHeader, showNewChatButton, showClearButton, showModelSelector, showToolsMenu, showInput, showSkillsMenu, codemodeEnabled, showTokenUsage, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount, suggestions, submitOnSuggestionClick, description, headerContent, headerActions, autoFocus, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, pendingPrompt, errorBanner, showInformation, chatViewMode, onChatViewModeChange, frontendTools, renderToolResult, hideMessagesAfterToolUI, }: ChatProps): import("react/jsx-runtime").JSX.Element;
+export declare function Chat({ protocol: transport, extensions: _extensions, baseUrl, wsUrl, agentId, authToken: authTokenProp, placeholder, title, subtitle, brandIcon, autoConnect: _autoConnect, streaming: _streaming, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height, showHeader, showNewChatButton, showClearButton, showModelSelector, showToolsMenu, showInput, disableInputPrompt, showSkillsMenu, codemodeEnabled, onToggleCodemode, showTokenUsage, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount, suggestions, submitOnSuggestionClick, description, headerContent, headerActions, autoFocus, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, pendingPrompt, errorBanner, showInformation, chatViewMode, onChatViewModeChange, frontendTools, onToolCallStart, onToolCallComplete, renderToolResult, hideMessagesAfterToolUI, contextSnapshot, mcpStatusData, codemodeStatusData, sandboxStatusData, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, }: ChatProps): import("react/jsx-runtime").JSX.Element;
 export default Chat;

package/lib/chat/Chat.js

@@ -133,7 +133,7 @@ function getProtocolType(protocol) {
  * />
  * ```
  */
-export function Chat({ protocol: transport, extensions: _extensions, baseUrl = 'http://localhost:8765', wsUrl, agentId, authToken: authTokenProp, placeholder = 'Type your message...', title, brandIcon, autoConnect: _autoConnect = true, streaming: _streaming = true, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height = '600px', showHeader = true, showNewChatButton = true, showClearButton = true, showModelSelector = true, showToolsMenu = true, showInput = true, showSkillsMenu = false, codemodeEnabled = false, showTokenUsage = true, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount = true, suggestions, submitOnSuggestionClick = true, description, headerContent, headerActions, autoFocus = false, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, pendingPrompt, errorBanner, showInformation = true, chatViewMode, onChatViewModeChange, frontendTools, renderToolResult, hideMessagesAfterToolUI = false, }) {
+export function Chat({ protocol: transport, extensions: _extensions, baseUrl = 'http://localhost:8765', wsUrl, agentId, authToken: authTokenProp, placeholder = 'Type your message...', title, subtitle, brandIcon, autoConnect: _autoConnect = true, streaming: _streaming = true, onMessageSent: _onMessageSent, onMessageReceived: _onMessageReceived, onDisconnect, onLogout: _onLogout, onCollapsePanel: _onCollapsePanel, className, height = '600px', showHeader = true, showNewChatButton = true, showClearButton = true, showModelSelector = true, showToolsMenu = true, showInput = true, disableInputPrompt = false, showSkillsMenu = true, codemodeEnabled = false, onToggleCodemode, showTokenUsage = true, initialModel, availableModels, mcpServers, initialSkills, clearOnMount: _clearOnMount = true, suggestions, submitOnSuggestionClick = true, description, headerContent, headerActions, autoFocus = false, identityProviders, onIdentityConnect, onIdentityDisconnect, runtimeId, historyEndpoint, pendingPrompt, errorBanner, showInformation = true, chatViewMode, onChatViewModeChange, frontendTools, onToolCallStart, onToolCallComplete, renderToolResult, hideMessagesAfterToolUI = false, contextSnapshot, mcpStatusData, codemodeStatusData, sandboxStatusData, showToolApprovalBanner, pendingApprovals, onApproveApproval, onRejectApproval, }) {
     const [error, setError] = useState(null);
     const [isInitializing, setIsInitializing] = useState(true);
     const [showDetails, setShowDetails] = useState(false);
@@ -285,7 +285,7 @@ export function Chat({ protocol: transport, extensions: _extensions, baseUrl = '
                         display: showDetails ? 'flex' : 'none',
                         flexDirection: 'column',
                         height: '100%',
-                    }, children: _jsx(AgentDetails, { name: title || 'AI Agent', icon: brandIcon, protocol: transport, url: protocolConfig?.endpoint || baseUrl, messageCount: messageCount, agentId: agentId, apiBase: baseUrl, identityProviders: identityProviders, onIdentityConnect: onIdentityConnect, onIdentityDisconnect: onIdentityDisconnect, onBack: () => setShowDetails(false) }) }), _jsxs(Box, { sx: {
+                    }, children: _jsx(AgentDetails, { name: title || 'AI Agent', icon: brandIcon, protocol: transport, url: protocolConfig?.endpoint || baseUrl, messageCount: messageCount, agentId: agentId, apiBase: baseUrl, identityProviders: identityProviders, onIdentityConnect: onIdentityConnect, onIdentityDisconnect: onIdentityDisconnect, onBack: () => setShowDetails(false), mcpStatusData: mcpStatusData, codemodeStatusData: codemodeStatusData }) }), _jsxs(Box, { sx: {
                         display: showDetails ? 'none' : 'flex',
                         flexDirection: 'column',
                         height: '100%',
@@ -310,12 +310,12 @@ export function Chat({ protocol: transport, extensions: _extensions, baseUrl = '
                                             ? 'attention.fg'
                                             : 'danger.fg',
                                         flex: 1,
-                                    }, children: errorBanner.message })] })), _jsx(ChatBase, { title: title, brandIcon: brandIcon, showHeader: showHeader, protocol: protocolConfig, placeholder: placeholder, description: description, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, autoFocus: autoFocus, runtimeId: runtimeId, historyEndpoint: historyEndpoint, pendingPrompt: pendingPrompt, showInformation: showInformation, onInformationClick: () => setShowDetails(true), headerContent: headerContent, headerActions: headerActions, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showInput: showInput, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, codemodeEnabled: codemodeEnabled, initialModel: initialModel, availableModels: availableModels, mcpServers: mcpServers, initialSkills: initialSkills, connectedIdentities: identitiesForChat, onNewChat: handleNewChat, onMessagesChange: messages => setMessageCount(messages.length), headerButtons: {
+                                    }, children: errorBanner.message })] })), _jsx(ChatBase, { title: title, subtitle: subtitle, brandIcon: brandIcon, showHeader: showHeader, protocol: protocolConfig, placeholder: placeholder, description: description, suggestions: suggestions, submitOnSuggestionClick: submitOnSuggestionClick, autoFocus: autoFocus, runtimeId: runtimeId, historyEndpoint: historyEndpoint, pendingPrompt: pendingPrompt, showInformation: showInformation, onInformationClick: () => setShowDetails(true), headerContent: headerContent, headerActions: headerActions, showModelSelector: showModelSelector, showToolsMenu: showToolsMenu, showInput: showInput, disableInputPrompt: disableInputPrompt, showSkillsMenu: showSkillsMenu, showTokenUsage: showTokenUsage, codemodeEnabled: codemodeEnabled, onToggleCodemode: onToggleCodemode, initialModel: initialModel, availableModels: availableModels, mcpServers: mcpServers, initialSkills: initialSkills, connectedIdentities: identitiesForChat, onNewChat: handleNewChat, onMessagesChange: messages => setMessageCount(messages.length), headerButtons: {
                                 showNewChat: showNewChatButton,
                                 showClear: showClearButton,
                                 onNewChat: handleNewChat,
                             }, avatarConfig: {
                                 showAvatars: true,
-                            }, backgroundColor: "canvas.default", focusTrigger: focusTrigger, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange, frontendTools: frontendTools, renderToolResult: renderToolResult, hideMessagesAfterToolUI: hideMessagesAfterToolUI })] })] }) }));
+                            }, backgroundColor: "canvas.default", focusTrigger: focusTrigger, chatViewMode: chatViewMode, onChatViewModeChange: onChatViewModeChange, frontendTools: frontendTools, onToolCallStart: onToolCallStart, onToolCallComplete: onToolCallComplete, renderToolResult: renderToolResult, hideMessagesAfterToolUI: hideMessagesAfterToolUI, contextSnapshot: contextSnapshot, mcpStatusData: mcpStatusData, sandboxStatusData: sandboxStatusData, showToolApprovalBanner: showToolApprovalBanner, pendingApprovals: pendingApprovals, onApproveApproval: onApproveApproval, onRejectApproval: onRejectApproval })] })] }) }));
 }
 export default Chat;