@datalayer/agent-runtimes 1.0.2 → 1.0.4

package/lib/components/NotificationEventCard.js

@@ -0,0 +1,177 @@
+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 { useState } from 'react';
+import { Button, Label, Text, Truncate } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ChevronDownIcon, DownloadIcon, EyeClosedIcon, EyeIcon, TrashIcon, } from '@primer/octicons-react';
+import { createMarkdownDownloadPayload, downloadTextPayload, formatDurationMs, formatRelativeTime, } from '@datalayer/core/lib/utils';
+import { Streamdown } from 'streamdown';
+import { streamdownMarkdownStyles } from '../chat/styles/streamdownStyles';
+const EVENT_KIND_VARIANT = {
+    'agent-start-requested': 'attention',
+    'agent-assigned': 'accent',
+    'agent-started': 'success',
+    'agent-output': 'accent',
+    'agent-termination-requested': 'attention',
+    'agent-terminated': 'danger',
+    'tool-approval-requested': 'attention',
+};
+const eventStartedAt = (evt) => {
+    const startedAt = evt?.started_at || evt?.payload?.started_at;
+    return typeof startedAt === 'string' && startedAt ? startedAt : null;
+};
+const eventEndedAt = (evt) => {
+    const endedAt = evt?.ended_at || evt?.payload?.ended_at;
+    return typeof endedAt === 'string' && endedAt ? endedAt : null;
+};
+export function NotificationEventCard({ event, onToggleRead, onDelete, onOpenAgent, }) {
+    const [isOutputExpanded, setIsOutputExpanded] = useState(false);
+    const [isDetailsExpanded, setIsDetailsExpanded] = useState(false);
+    const eventKind = String(event?.kind ?? '').toLowerCase();
+    const eventTitle = String(event?.title ?? '');
+    const eventOrigin = String(event?.metadata?.origin || '');
+    const startedAt = eventStartedAt(event);
+    const endedAt = eventEndedAt(event);
+    const outputText = eventKind === 'agent-output' && 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 hasAgentRoute = Boolean(onOpenAgent) && runtimeId !== 'runtime';
+    const detailEntries = [];
+    const detailLineSx = { fontSize: 0, overflowWrap: 'anywhere' };
+    const detailLabelSx = { color: 'fg.muted' };
+    const detailValueSx = { color: 'fg.default' };
+    Object.entries(event || {}).forEach(([key, value]) => {
+        if (key === 'payload' || key === 'outputs') {
+            return;
+        }
+        if (value === undefined || value === null || value === '') {
+            return;
+        }
+        if (typeof value === 'object') {
+            detailEntries.push({ label: key, value: JSON.stringify(value, null, 2) });
+            return;
+        }
+        detailEntries.push({ label: key, value: String(value) });
+    });
+    Object.entries(event?.payload || {}).forEach(([key, value]) => {
+        if (value === undefined || value === null || value === '') {
+            return;
+        }
+        if (typeof value === 'object') {
+            detailEntries.push({
+                label: `payload.${key}`,
+                value: JSON.stringify(value, null, 2),
+            });
+            return;
+        }
+        detailEntries.push({ label: `payload.${key}`, value: String(value) });
+    });
+    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: 1,
+                    minWidth: 0,
+                }, children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 2,
+                            minWidth: 0,
+                            flex: 1,
+                        }, children: [_jsx(Label, { variant: EVENT_KIND_VARIANT[eventKind] ?? 'secondary', children: eventKind }), _jsx(Truncate, { maxWidth: "50%", title: String(eventTitle || ''), sx: { fontWeight: 'semibold', fontSize: 1, minWidth: 0 }, children: eventTitle }), eventKind === 'agent-output' && 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 }) })), eventOrigin && (_jsxs(Label, { variant: "secondary", sx: { fontSize: 0, whiteSpace: 'nowrap' }, children: ["Origin: ", eventOrigin] }))] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1, flexShrink: 0 }, children: [hasAgentRoute && (_jsx(Button, { size: "small", variant: "invisible", onClick: () => onOpenAgent?.(runtimeId), children: "View 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 }) })] })] }), event.payload && (_jsxs(Box, { sx: {
+                    fontSize: 0,
+                    color: 'fg.muted',
+                    mt: 1,
+                    minWidth: 0,
+                    overflowWrap: 'anywhere',
+                }, children: [(startedAt ||
+                        endedAt ||
+                        (eventKind === 'agent-output' &&
+                            event.payload.duration_ms != null)) && (_jsxs(Text, { as: "p", children: [startedAt ? `Started: ${formatRelativeTime(startedAt)}` : '', startedAt && endedAt ? ' · ' : '', endedAt ? `Ended: ${formatRelativeTime(endedAt)}` : '', (startedAt || endedAt) &&
+                                eventKind === 'agent-output' &&
+                                event.payload.duration_ms != null
+                                ? ' · '
+                                : '', eventKind === 'agent-output' && event.payload.duration_ms != null
+                                ? `Duration: ${formatDurationMs(Number(event.payload.duration_ms))}`
+                                : ''] })), eventKind.includes('guardrail') && event.payload.message && (_jsx(Text, { as: "p", sx: { mb: 1 }, children: String(event.payload.message) })), eventKind.includes('guardrail') && event.payload.action_taken && (_jsxs(Text, { as: "p", children: ["Action: ", String(event.payload.action_taken)] })), eventKind === 'agent-started' && event.payload.trigger_type && (_jsxs(Text, { as: "p", children: ["Trigger: ", String(event.payload.trigger_type)] })), outputText && (_jsx(Box, { sx: {
+                            mt: 2,
+                            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", { open: isOutputExpanded, children: [_jsx("summary", { onClick: e => {
+                                                    e.preventDefault();
+                                                    setIsOutputExpanded(prev => !prev);
+                                                }, 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(Box, { sx: {
+                                                                display: 'flex',
+                                                                alignItems: 'center',
+                                                                color: 'fg.muted',
+                                                                flexShrink: 0,
+                                                                transition: 'transform 0.15s ease',
+                                                                transform: isOutputExpanded
+                                                                    ? 'rotate(180deg)'
+                                                                    : 'rotate(0deg)',
+                                                            }, children: _jsx(ChevronDownIcon, { size: 12 }) }), _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 }) })] }) })), _jsx(Box, { sx: {
+                            mt: 2,
+                            p: 2,
+                            borderRadius: 2,
+                            border: '1px solid',
+                            borderColor: 'border.muted',
+                            bg: 'canvas.subtle',
+                        }, children: _jsxs("details", { open: isDetailsExpanded, children: [_jsx("summary", { onClick: e => {
+                                        e.preventDefault();
+                                        setIsDetailsExpanded(prev => !prev);
+                                    }, style: { cursor: 'pointer', display: 'flex', alignItems: 'center' }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Box, { sx: {
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    color: 'fg.muted',
+                                                    transition: 'transform 0.15s ease',
+                                                    transform: isDetailsExpanded
+                                                        ? 'rotate(180deg)'
+                                                        : 'rotate(0deg)',
+                                                }, children: _jsx(ChevronDownIcon, { size: 12 }) }), _jsx(Text, { sx: { fontSize: 0, fontWeight: 'semibold' }, children: "View details" })] }) }), _jsx(Box, { sx: { mt: 2, display: 'grid', gap: 1 }, children: detailEntries.map(({ label, value }) => (_jsxs(Text, { sx: detailLineSx, children: [_jsxs(Text, { as: "span", sx: detailLabelSx, children: [label, ":", ' '] }), _jsx(Text, { as: "span", sx: detailValueSx, children: value })] }, label))) })] }) })] }))] }));
+}
+export default NotificationEventCard;

package/lib/components/OutputCard.d.ts

@@ -0,0 +1,8 @@
+export interface OutputCardProps {
+    event: any;
+    onToggleRead: (event: any) => void;
+    onDelete: (event: any) => void;
+    onOpenAgent?: (agentId: string) => void;
+}
+export declare function OutputCard({ event, onToggleRead, onDelete, onOpenAgent, }: OutputCardProps): import("react/jsx-runtime").JSX.Element;
+export default OutputCard;

package/lib/components/OutputCard.js

@@ -0,0 +1,94 @@
+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 { useState } from 'react';
+import { Button, Label, Text, Truncate } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { ChevronDownIcon, DownloadIcon, EyeClosedIcon, EyeIcon, TrashIcon, } from '@primer/octicons-react';
+import { createMarkdownDownloadPayload, downloadTextPayload, formatDurationMs, formatRelativeTime, } from '@datalayer/core/lib/utils';
+import { Streamdown } from 'streamdown';
+import { streamdownMarkdownStyles } from '../chat/styles/streamdownStyles';
+export function OutputCard({ event, onToggleRead, onDelete, onOpenAgent, }) {
+    const [isOutputExpanded, setIsOutputExpanded] = useState(false);
+    const outputText = event.kind === 'agent-output' && 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-output' ? 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: ${formatDurationMs(Number(durationMs))}`
+                        : ''] })), 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", { open: isOutputExpanded, children: [_jsx("summary", { onClick: e => {
+                                            e.preventDefault();
+                                            setIsOutputExpanded(prev => !prev);
+                                        }, 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(Box, { sx: {
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        color: 'fg.muted',
+                                                        flexShrink: 0,
+                                                        transition: 'transform 0.15s ease',
+                                                        transform: isOutputExpanded
+                                                            ? 'rotate(180deg)'
+                                                            : 'rotate(0deg)',
+                                                    }, children: _jsx(ChevronDownIcon, { size: 12 }) }), _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,78 @@
+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 { useState } from 'react';
+import { Button, Label, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { CheckCircleIcon, ChevronDownIcon, 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 [isDetailsExpanded, setIsDetailsExpanded] = useState(false);
+    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", { open: isDetailsExpanded, children: [_jsx("summary", { onClick: e => {
+                                            e.preventDefault();
+                                            setIsDetailsExpanded(prev => !prev);
+                                        }, style: {
+                                            cursor: 'pointer',
+                                            display: 'flex',
+                                            alignItems: 'center',
+                                            minWidth: 0,
+                                        }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 }, children: [_jsx(Box, { sx: {
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        color: 'fg.muted',
+                                                        transition: 'transform 0.15s ease',
+                                                        transform: isDetailsExpanded
+                                                            ? 'rotate(180deg)'
+                                                            : 'rotate(0deg)',
+                                                    }, children: _jsx(ChevronDownIcon, { size: 12 }) }), _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