@datalayer/agent-runtimes 1.0.1 → 1.0.3

package/lib/client/AgentsMixin.d.ts

@@ -0,0 +1,169 @@
+/**
+ * Agents mixin providing durable agent management functionality.
+ *
+ * Wraps the ai-agents API functions into the DatalayerClient mixin pattern,
+ * providing methods for listing, inspecting, pausing, resuming, and monitoring
+ * durable agents, their checkpoints, tool approvals, notifications, evals, and costs.
+ *
+ * This mixin is designed to be composed into a DatalayerClient instance from
+ * `@datalayer/core`. Import and compose it alongside the other core mixins.
+ *
+ * @module client/AgentsMixin
+ */
+import type { Constructor } from '@datalayer/core/lib/client/utils/mixins';
+import type { AgentEvent, CreateAgentEventRequest, GetAgentEventResponse, ListAgentEventsParams, ListAgentEventsResponse, UpdateAgentEventRequest, RunningAgent, AgentUsageSummary, ConversationCheckpoint, AgentNotification, NotificationFilters, OutputArtifact, EvalReport, RunEvalsRequest, ContextUsage, CostUsage } from '../types';
+import type { ToolApproval, ToolApprovalFilters } from '../types/tool-approvals';
+/** Agents mixin providing durable agent management. */
+export declare function AgentsMixin<TBase extends Constructor>(Base: TBase): {
+    new (...args: any[]): {
+        /**
+         * List all running agents across runtimes.
+         * @returns Array of running agent summaries
+         */
+        getRunningAgents(): Promise<RunningAgent[]>;
+        /**
+         * Get the status of a specific agent.
+         * @param podName - Pod name hosting the agent
+         * @param agentId - Optional agent ID within the pod
+         * @returns Detailed agent status
+         */
+        getAgentStatus(podName: string, agentId?: string): Promise<RunningAgent>;
+        /**
+         * Pause a running agent (light checkpoint by default, CRIU optional).
+         * @param podName - Pod name hosting the agent
+         */
+        pauseAgent(podName: string): Promise<void>;
+        /**
+         * Resume a paused/checkpointed agent.
+         * @param podName - Pod name hosting the agent
+         */
+        resumeAgent(podName: string): Promise<void>;
+        /**
+         * Get conversation checkpoints for an agent.
+         * @param podName - Pod name
+         * @param agentId - Optional agent ID
+         * @returns Array of checkpoints
+         */
+        getAgentCheckpoints(podName: string, agentId?: string): Promise<ConversationCheckpoint[]>;
+        /**
+         * Get usage summary for an agent.
+         * @param podName - Pod name
+         * @param agentId - Optional agent ID
+         * @returns Usage summary including tokens, cost, iterations
+         */
+        getAgentUsage(podName: string, agentId?: string): Promise<AgentUsageSummary>;
+        /**
+         * List tool approval requests, optionally filtered.
+         * @param filters - Optional filters (status, agentId)
+         * @returns Array of tool approval records
+         */
+        getToolApprovals(filters?: ToolApprovalFilters): Promise<ToolApproval[]>;
+        /**
+         * Approve a tool execution request.
+         * @param approvalId - ID of the approval to approve
+         */
+        approveToolRequest(approvalId: string): Promise<void>;
+        /**
+         * Reject a tool execution request.
+         * @param approvalId - ID of the approval to reject
+         * @param reason - Optional rejection reason
+         */
+        rejectToolRequest(approvalId: string, reason?: string): Promise<void>;
+        /**
+         * List notifications, optionally filtered.
+         * @param filters - Optional filters (level, read status)
+         * @returns Array of notifications
+         */
+        getNotifications(filters?: NotificationFilters): Promise<AgentNotification[]>;
+        /**
+         * Mark a single notification as read.
+         * @param notificationId - ID of the notification
+         */
+        markNotificationRead(notificationId: string): Promise<void>;
+        /**
+         * Mark all notifications as read.
+         */
+        markAllNotificationsRead(): Promise<void>;
+        /**
+         * Create an event for an agent.
+         * @param data - Event payload
+         * @returns Created event
+         */
+        createEvent(data: CreateAgentEventRequest): Promise<{
+            success: boolean;
+            event: AgentEvent;
+        }>;
+        /**
+         * List events with optional filters.
+         * @param params - Optional list filters
+         * @returns Paginated events response
+         */
+        listEvents(agentId: string, params?: Omit<ListAgentEventsParams, "agent_id">): Promise<ListAgentEventsResponse>;
+        /**
+         * Get a single event by identifier.
+         * @param eventId - Event identifier
+         * @returns Event response
+         */
+        getEvent(agentId: string, eventId: string): Promise<GetAgentEventResponse>;
+        /**
+         * Update an event.
+         * @param eventId - Event identifier
+         * @param data - Event patch payload
+         * @returns Updated event response
+         */
+        updateEvent(agentId: string, eventId: string, data: UpdateAgentEventRequest): Promise<GetAgentEventResponse>;
+        /**
+         * List output artifacts for an agent.
+         * @param agentId - Agent identifier
+         * @returns Array of output artifacts
+         */
+        getAgentOutputs(agentId: string): Promise<OutputArtifact[]>;
+        /**
+         * Get a specific output artifact.
+         * @param agentId - Agent identifier
+         * @param outputId - Output artifact ID
+         * @returns Output artifact details
+         */
+        getAgentOutput(agentId: string, outputId: string): Promise<OutputArtifact>;
+        /**
+         * Generate a new output artifact (e.g. PDF).
+         * @param agentId - Agent identifier
+         * @param format - Output format
+         * @param options - Generation options
+         * @returns Generated output artifact
+         */
+        generateAgentOutput(agentId: string, format: string, options?: Record<string, any>): Promise<OutputArtifact>;
+        /**
+         * Run evaluations on an agent.
+         * @param agentId - Agent identifier
+         * @param request - Eval run request parameters
+         * @returns Eval report
+         */
+        runEvals(agentId: string, request: RunEvalsRequest): Promise<EvalReport>;
+        /**
+         * List eval reports for an agent.
+         * @param agentId - Agent identifier
+         * @returns Array of eval reports
+         */
+        listEvals(agentId: string): Promise<EvalReport[]>;
+        /**
+         * Get a specific eval report.
+         * @param agentId - Agent identifier
+         * @param evalId - Eval report ID
+         * @returns Eval report details
+         */
+        getEval(agentId: string, evalId: string): Promise<EvalReport>;
+        /**
+         * Get context window usage for an agent.
+         * @param agentId - Agent identifier
+         * @returns Context usage details
+         */
+        getContextUsage(agentId: string): Promise<ContextUsage>;
+        /**
+         * Get cost usage for an agent.
+         * @param agentId - Agent identifier
+         * @returns Cost usage including per-model breakdown
+         */
+        getCostUsage(agentId: string): Promise<CostUsage>;
+    };
+} & TBase;

package/lib/client/AgentsMixin.js

@@ -0,0 +1,279 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import * as agents from '../api/agents';
+import * as toolApprovals from '../api/tool-approvals';
+import * as notifications from '../api/notifications';
+import * as events from '../api/events';
+import * as output from '../api/output';
+import * as evals from '../api/evals';
+import * as context from '../api/context';
+/** Agents mixin providing durable agent management. */
+export function AgentsMixin(Base) {
+    return class extends Base {
+        // ========================================================================
+        // Running Agents
+        // ========================================================================
+        /**
+         * List all running agents across runtimes.
+         * @returns Array of running agent summaries
+         */
+        async getRunningAgents() {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return agents.getRunningAgents(token, baseUrl);
+        }
+        /**
+         * Get the status of a specific agent.
+         * @param podName - Pod name hosting the agent
+         * @param agentId - Optional agent ID within the pod
+         * @returns Detailed agent status
+         */
+        async getAgentStatus(podName, agentId) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return agents.getAgentStatus(token, podName, agentId, baseUrl);
+        }
+        /**
+         * Pause a running agent (light checkpoint by default, CRIU optional).
+         * @param podName - Pod name hosting the agent
+         */
+        async pauseAgent(podName) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return agents.pauseAgent(token, podName, baseUrl);
+        }
+        /**
+         * Resume a paused/checkpointed agent.
+         * @param podName - Pod name hosting the agent
+         */
+        async resumeAgent(podName) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return agents.resumeAgent(token, podName, baseUrl);
+        }
+        /**
+         * Get conversation checkpoints for an agent.
+         * @param podName - Pod name
+         * @param agentId - Optional agent ID
+         * @returns Array of checkpoints
+         */
+        async getAgentCheckpoints(podName, agentId) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return agents.getAgentCheckpoints(token, podName, agentId, baseUrl);
+        }
+        /**
+         * Get usage summary for an agent.
+         * @param podName - Pod name
+         * @param agentId - Optional agent ID
+         * @returns Usage summary including tokens, cost, iterations
+         */
+        async getAgentUsage(podName, agentId) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return agents.getAgentUsage(token, podName, agentId, baseUrl);
+        }
+        // ========================================================================
+        // Tool Approvals
+        // ========================================================================
+        /**
+         * List tool approval requests, optionally filtered.
+         * @param filters - Optional filters (status, agentId)
+         * @returns Array of tool approval records
+         */
+        async getToolApprovals(filters) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return toolApprovals.getToolApprovals(token, filters, baseUrl);
+        }
+        /**
+         * Approve a tool execution request.
+         * @param approvalId - ID of the approval to approve
+         */
+        async approveToolRequest(approvalId) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return toolApprovals.approveToolRequest(token, approvalId, baseUrl);
+        }
+        /**
+         * Reject a tool execution request.
+         * @param approvalId - ID of the approval to reject
+         * @param reason - Optional rejection reason
+         */
+        async rejectToolRequest(approvalId, reason) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return toolApprovals.rejectToolRequest(token, approvalId, reason, baseUrl);
+        }
+        // ========================================================================
+        // Notifications
+        // ========================================================================
+        /**
+         * List notifications, optionally filtered.
+         * @param filters - Optional filters (level, read status)
+         * @returns Array of notifications
+         */
+        async getNotifications(filters) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return notifications.getNotifications(token, filters, baseUrl);
+        }
+        /**
+         * Mark a single notification as read.
+         * @param notificationId - ID of the notification
+         */
+        async markNotificationRead(notificationId) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return notifications.markNotificationRead(token, notificationId, baseUrl);
+        }
+        /**
+         * Mark all notifications as read.
+         */
+        async markAllNotificationsRead() {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return notifications.markAllRead(token, undefined, baseUrl);
+        }
+        // ========================================================================
+        // Events
+        // ========================================================================
+        /**
+         * Create an event for an agent.
+         * @param data - Event payload
+         * @returns Created event
+         */
+        async createEvent(data) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return events.createEvent(token, data, baseUrl);
+        }
+        /**
+         * List events with optional filters.
+         * @param params - Optional list filters
+         * @returns Paginated events response
+         */
+        async listEvents(agentId, params = {}) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return events.listEvents(token, agentId, params, baseUrl);
+        }
+        /**
+         * Get a single event by identifier.
+         * @param eventId - Event identifier
+         * @returns Event response
+         */
+        async getEvent(agentId, eventId) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return events.getEvent(token, agentId, eventId, baseUrl);
+        }
+        /**
+         * Update an event.
+         * @param eventId - Event identifier
+         * @param data - Event patch payload
+         * @returns Updated event response
+         */
+        async updateEvent(agentId, eventId, data) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return events.updateEvent(token, agentId, eventId, data, baseUrl);
+        }
+        // ========================================================================
+        // Output
+        // ========================================================================
+        /**
+         * List output artifacts for an agent.
+         * @param agentId - Agent identifier
+         * @returns Array of output artifacts
+         */
+        async getAgentOutputs(agentId) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return output.getAgentOutputs(token, agentId, baseUrl);
+        }
+        /**
+         * Get a specific output artifact.
+         * @param agentId - Agent identifier
+         * @param outputId - Output artifact ID
+         * @returns Output artifact details
+         */
+        async getAgentOutput(agentId, outputId) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return output.getAgentOutput(token, agentId, outputId, baseUrl);
+        }
+        /**
+         * Generate a new output artifact (e.g. PDF).
+         * @param agentId - Agent identifier
+         * @param format - Output format
+         * @param options - Generation options
+         * @returns Generated output artifact
+         */
+        async generateAgentOutput(agentId, format, options) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return output.generateAgentOutput(token, agentId, format, options, baseUrl);
+        }
+        // ========================================================================
+        // Evals
+        // ========================================================================
+        /**
+         * Run evaluations on an agent.
+         * @param agentId - Agent identifier
+         * @param request - Eval run request parameters
+         * @returns Eval report
+         */
+        async runEvals(agentId, request) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return evals.runEvals(token, agentId, request, baseUrl);
+        }
+        /**
+         * List eval reports for an agent.
+         * @param agentId - Agent identifier
+         * @returns Array of eval reports
+         */
+        async listEvals(agentId) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return evals.listEvals(token, agentId, baseUrl);
+        }
+        /**
+         * Get a specific eval report.
+         * @param agentId - Agent identifier
+         * @param evalId - Eval report ID
+         * @returns Eval report details
+         */
+        async getEval(agentId, evalId) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return evals.getEval(token, agentId, evalId, baseUrl);
+        }
+        // ========================================================================
+        // Context & Cost
+        // ========================================================================
+        /**
+         * Get context window usage for an agent.
+         * @param agentId - Agent identifier
+         * @returns Context usage details
+         */
+        async getContextUsage(agentId) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return context.getContextUsage(token, agentId, baseUrl);
+        }
+        /**
+         * Get cost usage for an agent.
+         * @param agentId - Agent identifier
+         * @returns Cost usage including per-model breakdown
+         */
+        async getCostUsage(agentId) {
+            const token = this.getToken();
+            const baseUrl = this.getIamRunUrl();
+            return context.getCostUsage(token, agentId, baseUrl);
+        }
+    };
+}

package/lib/client/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Client mixins for agent-runtimes.
+ *
+ * @module client
+ */
+export { AgentsMixin } from './AgentsMixin';

package/lib/client/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Client mixins for agent-runtimes.
+ *
+ * @module client
+ */
+export { AgentsMixin } from './AgentsMixin';

package/lib/components/NotificationEventCard.d.ts

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

package/lib/components/NotificationEventCard.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { Button, Label, Text, Truncate } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { DownloadIcon, EyeClosedIcon, EyeIcon, TrashIcon, } from '@primer/octicons-react';
+import { createMarkdownDownloadPayload, downloadTextPayload, formatRelativeTime, } from '@datalayer/core/lib/utils';
+import { Streamdown } from 'streamdown';
+import { streamdownMarkdownStyles } from '../chat/styles/streamdownStyles';
+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;
+};
+const isRunningEvent = (evt) => {
+    const status = String(evt?.status ?? '').toLowerCase();
+    return evt?.kind === 'agent-started' && status === 'running';
+};
+export function NotificationEventCard({ event, onToggleRead, onDelete, onOpenAgent, }) {
+    const startedAt = eventStartedAt(event);
+    const endedAt = eventEndedAt(event);
+    const running = isRunningEvent(event);
+    const outputText = event.kind === 'agent-ended' && event.payload?.outputs
+        ? String(event.payload.outputs)
+        : null;
+    const runtimeId = String(event?.agent_id ||
+        event?.runtime_id ||
+        event?.payload?.runtime_id ||
+        event?.payload?.agent_id ||
+        'runtime');
+    const 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 (key === 'outputs') {
+            return;
+        }
+        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 === '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: {
+                    fontSize: 0,
+                    color: 'fg.muted',
+                    mt: 1,
+                    minWidth: 0,
+                    overflowWrap: 'anywhere',
+                }, children: [(startedAt ||
+                        endedAt ||
+                        (event.kind === 'agent-ended' &&
+                            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' &&
+                                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: {
+                            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: {
+                                                    cursor: 'pointer',
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    minWidth: 0,
+                                                }, children: _jsxs(Box, { sx: {
+                                                        display: 'flex',
+                                                        alignItems: 'center',
+                                                        gap: 2,
+                                                        minWidth: 0,
+                                                        width: '100%',
+                                                        flexWrap: 'nowrap',
+                                                    }, children: [_jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                fontWeight: 'semibold',
+                                                                flexShrink: 0,
+                                                            }, children: "Output" }), _jsx(Truncate, { maxWidth: "100%", title: outputText, sx: {
+                                                                fontSize: 0,
+                                                                color: 'fg.muted',
+                                                                minWidth: 0,
+                                                                flex: 1,
+                                                            }, children: outputText })] }) }), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Box, { sx: streamdownMarkdownStyles, children: _jsx(Streamdown, { children: outputText }) }) })] }) }), _jsx(Button, { size: "small", variant: "invisible", sx: { p: 1, flexShrink: 0 }, title: "Download output markdown", "aria-label": "Download output markdown", onClick: () => {
+                                        const payload = createMarkdownDownloadPayload(outputText, `${runtimeId}-output`);
+                                        downloadTextPayload(payload);
+                                    }, children: _jsx(DownloadIcon, { size: 12 }) })] }) })), _jsx(Box, { sx: {
+                            mt: 2,
+                            p: 2,
+                            borderRadius: 2,
+                            border: '1px solid',
+                            borderColor: 'border.muted',
+                            bg: 'canvas.subtle',
+                        }, children: _jsxs("details", { children: [_jsx("summary", { style: { cursor: 'pointer' }, children: _jsx(Text, { sx: { fontSize: 0, fontWeight: 'semibold' }, children: "View details" }) }), _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;