@datalayer/agent-runtimes 1.0.3 → 1.0.4

package/lib/components/NotificationEventCard.js

@@ -3,12 +3,22 @@ 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 { DownloadIcon, EyeClosedIcon, EyeIcon, TrashIcon, } from '@primer/octicons-react';
-import { createMarkdownDownloadPayload, downloadTextPayload, formatRelativeTime, } from '@datalayer/core/lib/utils';
+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;
@@ -17,15 +27,15 @@ const eventEndedAt = (evt) => {
     const endedAt = evt?.ended_at || evt?.payload?.ended_at;
     return typeof endedAt === 'string' && endedAt ? endedAt : null;
 };
-const isRunningEvent = (evt) => {
-    const status = String(evt?.status ?? '').toLowerCase();
-    return evt?.kind === 'agent-started' && status === 'running';
-};
 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 running = isRunningEvent(event);
-    const outputText = event.kind === 'agent-ended' && event.payload?.outputs
+    const outputText = eventKind === 'agent-output' && event.payload?.outputs
         ? String(event.payload.outputs)
         : null;
     const runtimeId = String(event?.agent_id ||
@@ -33,6 +43,7 @@ export function NotificationEventCard({ event, onToggleRead, onDelete, onOpenAge
         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' };
@@ -51,9 +62,6 @@ export function NotificationEventCard({ event, onToggleRead, onDelete, onOpenAge
         detailEntries.push({ label: key, value: String(value) });
     });
     Object.entries(event?.payload || {}).forEach(([key, value]) => {
-        if (key === 'outputs') {
-            return;
-        }
         if (value === undefined || value === null || value === '') {
             return;
         }
@@ -88,13 +96,7 @@ export function NotificationEventCard({ event, onToggleRead, onDelete, onOpenAge
                             gap: 2,
                             minWidth: 0,
                             flex: 1,
-                        }, children: [_jsx(Label, { variant: event.kind === 'agent-started'
-                                    ? 'accent'
-                                    : event.kind === 'agent-ended'
-                                        ? 'success'
-                                        : event.kind?.includes('alert')
-                                            ? 'danger'
-                                            : 'attention', children: event.kind }), _jsx(Truncate, { maxWidth: "50%", title: String(event.title || ''), sx: { fontWeight: 'semibold', fontSize: 1, minWidth: 0 }, children: event.title }), event.kind === 'agent-ended' && 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: [running && event.agent_id && (_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 }) })] })] }), event.payload && (_jsxs(Box, { sx: {
+                        }, 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,
@@ -102,21 +104,24 @@ export function NotificationEventCard({ event, onToggleRead, onDelete, onOpenAge
                     overflowWrap: 'anywhere',
                 }, children: [(startedAt ||
                         endedAt ||
-                        (event.kind === 'agent-ended' &&
+                        (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) &&
-                                event.kind === 'agent-ended' &&
+                                eventKind === 'agent-output' &&
                                 event.payload.duration_ms != null
                                 ? ' · '
-                                : '', event.kind === 'agent-ended' && event.payload.duration_ms != null
-                                ? `Duration: ${(Number(event.payload.duration_ms) / 1000).toFixed(1)}s`
-                                : ''] })), event.kind?.includes('guardrail') && event.payload.message && (_jsx(Text, { as: "p", sx: { mb: 1 }, children: String(event.payload.message) })), event.kind?.includes('guardrail') && event.payload.action_taken && (_jsxs(Text, { as: "p", children: ["Action: ", String(event.payload.action_taken)] })), event.kind === 'agent-started' && event.payload.trigger_type && (_jsxs(Text, { as: "p", children: ["Trigger: ", String(event.payload.trigger_type)] })), outputText && (_jsx(Box, { sx: {
+                                : '', 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", { children: [_jsx("summary", { style: {
+                        }, 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',
@@ -128,7 +133,16 @@ export function NotificationEventCard({ event, onToggleRead, onDelete, onOpenAge
                                                         minWidth: 0,
                                                         width: '100%',
                                                         flexWrap: 'nowrap',
-                                                    }, children: [_jsx(Text, { sx: {
+                                                    }, 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,
@@ -147,6 +161,17 @@ export function NotificationEventCard({ event, onToggleRead, onDelete, onOpenAge
                             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" }) }), _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))) })] }) })] }))] }));
+                        }, 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.js

@@ -3,14 +3,16 @@ 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 { DownloadIcon, EyeClosedIcon, EyeIcon, TrashIcon, } from '@primer/octicons-react';
-import { createMarkdownDownloadPayload, downloadTextPayload, formatRelativeTime, } from '@datalayer/core/lib/utils';
+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 outputText = event.kind === 'agent-ended' && event.payload?.outputs
+    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 ||
@@ -20,7 +22,7 @@ export function OutputCard({ event, onToggleRead, onDelete, onOpenAgent, }) {
         '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;
+    const durationMs = event.kind === 'agent-output' ? event.payload?.duration_ms : null;
     return (_jsxs(Box, { sx: {
             minWidth: 0,
             maxWidth: '100%',
@@ -44,14 +46,17 @@ export function OutputCard({ event, onToggleRead, onDelete, onOpenAgent, }) {
                             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`
+                        ? `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", { children: [_jsx("summary", { style: {
+                }, 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',
@@ -63,7 +68,16 @@ export function OutputCard({ event, onToggleRead, onDelete, onOpenAgent, }) {
                                                 minWidth: 0,
                                                 width: '100%',
                                                 flexWrap: 'nowrap',
-                                            }, children: [_jsx(Text, { sx: {
+                                            }, 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,

package/lib/components/ToolApprovalCard.js

@@ -3,9 +3,10 @@ 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, EyeClosedIcon, EyeIcon, TrashIcon, XCircleIcon, } from '@primer/octicons-react';
+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' },
@@ -19,6 +20,7 @@ const RISK_CONFIG = {
     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
@@ -55,6 +57,22 @@ export function ToolApprovalCard({ approval, onApprove, onReject, onToggleRead,
                                 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 }) })] })] }) }));
+                            }, 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/examples/AgentCheckpointsExample.js

@@ -25,6 +25,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Text, Button, IconButton, Spinner, Label, Flash, Heading, Tooltip, } from '@primer/react';
 import { AlertIcon, PlayIcon, SquareIcon, HistoryIcon, CheckCircleIcon, WorkflowIcon, SignOutIcon, XCircleIcon, ClockIcon, TagIcon, GlobeIcon, ZapIcon, GraphIcon, AiModelIcon, PeopleIcon, SidebarCollapseIcon, SidebarExpandIcon, SyncIcon, AgentIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
+import { ErrorView } from './components';
 import { coreStore } from '@datalayer/core';
 import { ThemedProvider } from './utils/themedProvider';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
@@ -285,14 +286,7 @@ const AgentCheckpointsInner = ({ onLogout, }) => {
         isStarting;
     // ── Error ────────────────────────────────────────────────────────────────
     if (runtimeStatus === 'error' && !runtime) {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100vh',
-                gap: 3,
-            }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg', fontSize: 2 }, children: "Agent failed to start" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: displayError })] }));
+        return _jsx(ErrorView, { detail: displayError, onLogout: onLogout });
     }
     // ── Running / Paused ─────────────────────────────────────────────────────
     return (_jsxs(Box, { sx: {

package/lib/examples/AgentCodemodeExample.js

@@ -17,8 +17,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /// <reference types="vite/client" />
 import { useEffect, useState, useCallback, useRef } from 'react';
 import { Text, Button, Spinner, Heading, Label, Flash } from '@primer/react';
-import { AlertIcon, CodeIcon, DiffIcon, FileCodeIcon, CheckIcon, XIcon, SignOutIcon, } from '@primer/octicons-react';
+import { CodeIcon, DiffIcon, FileCodeIcon, CheckIcon, XIcon, SignOutIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
+import { ErrorView } from './components';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { SignInSimple } from '@datalayer/core/lib/views/iam';
@@ -111,14 +112,7 @@ const AgentCodemodeInner = ({ onLogout, }) => {
                         : 'Creating codemode demo agent…' })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100vh',
-                gap: 3,
-            }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg' }, children: hookError || 'Agent failed to start' })] }));
+        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
     const selected = artifacts.find(a => a.id === selectedId) ?? artifacts[0] ?? null;
     const pendingCount = artifacts.filter(a => a.status === 'pending').length;

package/lib/examples/AgentEvalsExample.js

@@ -18,8 +18,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useCallback, useRef } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Text, Button, Spinner, Heading, Label, Flash, ProgressBar, } from '@primer/react';
-import { AlertIcon, BeakerIcon, CheckCircleIcon, XCircleIcon, PlayIcon, SignOutIcon, } from '@primer/octicons-react';
+import { BeakerIcon, CheckCircleIcon, XCircleIcon, PlayIcon, SignOutIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
+import { ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { SignInSimple } from '@datalayer/core/lib/views/iam';
@@ -113,14 +114,7 @@ const AgentEvalsInner = ({ onLogout }) => {
                         : 'Creating eval demo agent…' })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100vh',
-                gap: 3,
-            }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg' }, children: hookError || 'Agent failed to start' })] }));
+        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
     const latestScore = evalRuns.length > 0 ? evalRuns[0].score : null;
     return (_jsxs(Box, { sx: {

package/lib/examples/AgentGuardrailsExample.js

@@ -18,8 +18,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useCallback, useRef } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Text, Button, Spinner, Heading, Label, Flash, ProgressBar, } from '@primer/react';
-import { AlertIcon, ShieldCheckIcon, CheckIcon, XIcon, SignOutIcon, } from '@primer/octicons-react';
+import { ShieldCheckIcon, CheckIcon, XIcon, SignOutIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
+import { ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
 const queryClient = new QueryClient();
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
@@ -142,14 +143,7 @@ const AgentGuardrailsInner = ({ onLogout, }) => {
                         : 'Creating guardrails demo agent…' })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100vh',
-                gap: 3,
-            }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg' }, children: hookError || 'Agent failed to start' })] }));
+        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
     const costPercent = Math.min((costUsd / COST_LIMIT_USD) * 100, 100);
     const costColor = costPercent > 80

package/lib/examples/AgentMemoryExample.js

@@ -18,8 +18,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useCallback, useRef } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Text, Button, Spinner, TextInput, Heading, Label, Flash, } from '@primer/react';
-import { AlertIcon, SearchIcon, DatabaseIcon, SignOutIcon, } from '@primer/octicons-react';
+import { SearchIcon, DatabaseIcon, SignOutIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
+import { ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
 const queryClient = new QueryClient();
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
@@ -116,14 +117,7 @@ const AgentMemoryInner = ({ onLogout }) => {
                         : 'Creating memory-enabled agent…' })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100vh',
-                gap: 3,
-            }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg' }, children: hookError || 'Agent failed to start' })] }));
+        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
     // ── Main layout ──────────────────────────────────────────────────────────
     return (_jsxs(Box, { sx: {

package/lib/examples/AgentMonitoringExample.js

@@ -17,8 +17,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useCallback, useRef } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Text, Button, Spinner, Heading, Label } from '@primer/react';
-import { AlertIcon, CheckCircleIcon, GraphIcon, SignOutIcon, } from '@primer/octicons-react';
+import { CheckCircleIcon, GraphIcon, SignOutIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
+import { ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
 const queryClient = new QueryClient();
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
@@ -213,14 +214,7 @@ const AgentMonitoringInner = ({ onLogout, }) => {
                         : 'Creating monitoring demo agent…' })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100vh',
-                gap: 3,
-            }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg' }, children: hookError || 'Agent failed to start' })] }));
+        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
     const latest = snapshots[0] ?? createSyntheticSnapshot();
     return (_jsxs(Box, { sx: {

package/lib/examples/AgentNotificationsExample.js

@@ -20,6 +20,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Text, Button, Spinner, Heading, Label, TextInput, Flash, Timeline, } from '@primer/react';
 import { AlertIcon, BellIcon, MailIcon, CheckCircleIcon, MuteIcon, SignOutIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
+import { ErrorView } from './components';
 import { ThemedProvider } from './utils/themedProvider';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { SignInSimple } from '@datalayer/core/lib/views/iam';
@@ -160,14 +161,7 @@ const AgentNotificationsInner = ({ onLogout, }) => {
                         : 'Creating notification demo agent…' })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100vh',
-                gap: 3,
-            }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg' }, children: hookError || 'Agent failed to start' })] }));
+        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
     const unreadCount = notifications.filter(n => !n.read).length;
     const channelIcon = (ch) => {

package/lib/examples/AgentOutputsExample.js

@@ -18,8 +18,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState, useCallback, useRef } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Text, Button, Spinner, Heading, Label } from '@primer/react';
-import { AlertIcon, TableIcon, FileIcon, CodeIcon, GraphIcon, DownloadIcon, SignOutIcon, } from '@primer/octicons-react';
+import { TableIcon, FileIcon, CodeIcon, GraphIcon, DownloadIcon, SignOutIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
+import { ErrorView } from './components';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { SignInSimple } from '@datalayer/core/lib/views/iam';
 import { UserBadge } from '@datalayer/core/lib/views/profile';
@@ -90,14 +91,7 @@ const AgentOutputsInner = ({ onLogout, }) => {
                         : 'Creating output demo agent…' })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100vh',
-                gap: 3,
-            }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg' }, children: hookError || 'Agent failed to start' })] }));
+        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
     const filtered = artifacts.filter(a => a.type === activeTab);
     return (_jsxs(Box, { sx: {

package/lib/examples/AgentSandboxExample.js

@@ -21,8 +21,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
+import { ErrorView } from './components';
 import { Button, Flash, Heading, Label, SegmentedControl, Spinner, Text, } from '@primer/react';
-import { AlertIcon, CodeIcon, SignOutIcon, StopIcon, TerminalIcon, } from '@primer/octicons-react';
+import { CodeIcon, SignOutIcon, StopIcon, TerminalIcon, } from '@primer/octicons-react';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { SignInSimple } from '@datalayer/core/lib/views/iam';
 import { UserBadge } from '@datalayer/core/lib/views/profile';
@@ -343,14 +344,7 @@ const AgentSandboxInner = ({ onLogout, }) => {
     }
     // ── Error state ──
     if (runtimeStatus === 'error' || hookError) {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100vh',
-                gap: 3,
-            }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg' }, children: hookError || 'Agent failed to start' })] }));
+        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
     // ── Sidebar ──
     const sidebar = (_jsxs(Box, { sx: {

package/lib/examples/AgentSkillsExample.js

@@ -7,8 +7,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Box } from '@datalayer/primer-addons';
+import { ErrorView } from './components';
 import { Button, Heading, Label, Spinner, Text, Token as PrimerToken, } from '@primer/react';
-import { AlertIcon, BeakerIcon, BriefcaseIcon, PackageIcon, SignOutIcon, } from '@primer/octicons-react';
+import { BeakerIcon, BriefcaseIcon, PackageIcon, SignOutIcon, } from '@primer/octicons-react';
 import { useSimpleAuthStore } from '@datalayer/core/lib/views/otel';
 import { SignInSimple } from '@datalayer/core/lib/views/iam';
 import { UserBadge } from '@datalayer/core/lib/views/profile';
@@ -187,14 +188,7 @@ const AgentSkillsInner = ({ onLogout }) => {
             }, children: [_jsx(Spinner, { size: "large" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Launching skills demo agent..." })] }));
     }
     if (runtimeStatus === 'error' || hookError) {
-        return (_jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                justifyContent: 'center',
-                height: '100vh',
-                gap: 3,
-            }, children: [_jsx(AlertIcon, { size: 48 }), _jsx(Text, { sx: { color: 'danger.fg' }, children: hookError || 'Agent failed to start' })] }));
+        return _jsx(ErrorView, { error: hookError, onLogout: onLogout });
     }
     return (_jsxs(Box, { sx: {
             height: 'calc(100vh - 60px)',