@datalayer/agent-runtimes 1.0.3 → 1.0.5

package/lib/client/SdkAgentRuntimesClient.js

@@ -0,0 +1,134 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * {@link IAgentRuntimesClient} implementation that forwards every call to a
+ * pre-composed `DatalayerClient + AgentsMixin` instance.
+ *
+ * Construct with:
+ *
+ * ```ts
+ * import { DatalayerClient } from '@datalayer/core/lib/client';
+ * import { AgentsMixin, SdkAgentRuntimesClient } from '@datalayer/agent-runtimes';
+ *
+ * const ClientWithAgents = AgentsMixin(DatalayerClient);
+ * const sdk = new ClientWithAgents({ iamRunUrl, runtimesRunUrl, spacerRunUrl });
+ * const client = new SdkAgentRuntimesClient(sdk);
+ * ```
+ */
+export class SdkAgentRuntimesClient {
+    sdk;
+    /**
+     * Constructs the default client.
+     *
+     * @param sdk - A composed `DatalayerClient + AgentsMixin` instance whose
+     *   `getToken()` / service URL resolvers already return valid values.
+     *   When `null`, every method throws — pass a real SDK to use the client.
+     */
+    constructor(sdk) {
+        this.sdk = sdk;
+    }
+    /**
+     * Asserts the SDK is available for control-plane operations.
+     *
+     * @throws When the client was constructed without an SDK.
+     *
+     * @returns The SDK instance.
+     */
+    requireSdk() {
+        if (!this.sdk) {
+            throw new Error('Control-plane operations require an SDK instance. ' +
+                'Construct SdkAgentRuntimesClient with a DatalayerClient+AgentsMixin.');
+        }
+        return this.sdk;
+    }
+    /** @inheritdoc */
+    async listRunningAgents() {
+        return this.requireSdk().getRunningAgents();
+    }
+    /** @inheritdoc */
+    async getAgentStatus(podName, agentId) {
+        return this.requireSdk().getAgentStatus(podName, agentId);
+    }
+    /** @inheritdoc */
+    async pauseAgent(podName) {
+        return this.requireSdk().pauseAgent(podName);
+    }
+    /** @inheritdoc */
+    async resumeAgent(podName) {
+        return this.requireSdk().resumeAgent(podName);
+    }
+    /** @inheritdoc */
+    async getAgentCheckpoints(podName, agentId) {
+        return this.requireSdk().getAgentCheckpoints(podName, agentId);
+    }
+    /** @inheritdoc */
+    async getAgentUsage(podName, agentId) {
+        return this.requireSdk().getAgentUsage(podName, agentId);
+    }
+    /** @inheritdoc */
+    async listNotifications(filters) {
+        return this.requireSdk().getNotifications(filters);
+    }
+    /** @inheritdoc */
+    async markNotificationRead(notificationId) {
+        return this.requireSdk().markNotificationRead(notificationId);
+    }
+    /** @inheritdoc */
+    async markAllNotificationsRead() {
+        return this.requireSdk().markAllNotificationsRead();
+    }
+    /** @inheritdoc */
+    async createEvent(data) {
+        return this.requireSdk().createEvent(data);
+    }
+    /** @inheritdoc */
+    async listEvents(agentId, params) {
+        return this.requireSdk().listEvents(agentId, params);
+    }
+    /** @inheritdoc */
+    async getEvent(agentId, eventId) {
+        return this.requireSdk().getEvent(agentId, eventId);
+    }
+    /** @inheritdoc */
+    async updateEvent(agentId, eventId, data) {
+        return this.requireSdk().updateEvent(agentId, eventId, data);
+    }
+    /** @inheritdoc */
+    async getAgentOutputs(agentId) {
+        return this.requireSdk().getAgentOutputs(agentId);
+    }
+    /** @inheritdoc */
+    async getAgentOutput(agentId, outputId) {
+        return this.requireSdk().getAgentOutput(agentId, outputId);
+    }
+    /** @inheritdoc */
+    async generateAgentOutput(agentId, format, options) {
+        return this.requireSdk().generateAgentOutput(agentId, format, options);
+    }
+    /** @inheritdoc */
+    async runEvals(agentId, request) {
+        return this.requireSdk().runEvals(agentId, request);
+    }
+    /** @inheritdoc */
+    async listEvals(agentId) {
+        return this.requireSdk().listEvals(agentId);
+    }
+    /** @inheritdoc */
+    async getEval(agentId, evalId) {
+        return this.requireSdk().getEval(agentId, evalId);
+    }
+    /** @inheritdoc */
+    async getContextUsage(agentId) {
+        return this.requireSdk().getContextUsage(agentId);
+    }
+    /** @inheritdoc */
+    async getCostUsage(agentId) {
+        return this.requireSdk().getCostUsage(agentId);
+    }
+    /** @inheritdoc */
+    async createAgentRuntime(data) {
+        return this.requireSdk().createAgentRuntime(data);
+    }
+}

package/lib/client/index.d.ts

@@ -1,6 +1,9 @@
 /**
- * Client mixins for agent-runtimes.
+ * Client mixins and domain-level client abstractions for agent-runtimes.
  *
  * @module client
  */
 export { AgentsMixin } from './AgentsMixin';
+export type { IAgentRuntimesClient } from './IAgentRuntimesClient';
+export { SdkAgentRuntimesClient, type AgentsSdkLike, } from './SdkAgentRuntimesClient';
+export { AgentRuntimesClientProvider, useAgentRuntimesClient, useOptionalAgentRuntimesClient, type AgentRuntimesClientProviderProps, } from './AgentRuntimesClientContext';

package/lib/client/index.js

@@ -3,8 +3,10 @@
  * Distributed under the terms of the Modified BSD License.
  */
 /**
- * Client mixins for agent-runtimes.
+ * Client mixins and domain-level client abstractions for agent-runtimes.
  *
  * @module client
  */
 export { AgentsMixin } from './AgentsMixin';
+export { SdkAgentRuntimesClient, } from './SdkAgentRuntimesClient';
+export { AgentRuntimesClientProvider, useAgentRuntimesClient, useOptionalAgentRuntimesClient, } from './AgentRuntimesClientContext';

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,21 @@ 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/config/AgentConfiguration.js

@@ -431,7 +431,7 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
                                 .map(spec => {
                                 const pkg = spec.id.includes('/') ? spec.id.split('/')[0] : '';
                                 return (_jsxs(Select.Option, { value: `spec:${spec.id}`, children: [spec.emoji ? `${spec.emoji} ` : '', pkg ? `[${pkg}] ` : '', spec.name] }, `spec:${spec.id}`));
-                            }), agents.map(agent => (_jsxs(Select.Option, { value: agent.id, children: ["[Example] ", agent.status === 'running' && '● ', agent.name] }, agent.id)))] }), _jsx(FormControl.Caption, { children: isNewAgentMode
+                            }), agents.map(agent => (_jsxs(Select.Option, { value: agent.id, children: ["[Persona] ", agent.status === 'running' && '● ', agent.name] }, agent.id)))] }), _jsx(FormControl.Caption, { children: isNewAgentMode
                             ? selectedSpec
                                 ? `Creating from spec: ${selectedSpec.name} — capabilities are locked`
                                 : 'Configure a new custom agent'
@@ -444,7 +444,7 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
                             : 'The base URL of your agent-runtimes server' })] }), _jsxs(Box, { sx: { display: 'flex', gap: 3, marginBottom: 3 }, children: [_jsxs(FormControl, { sx: { flex: 1 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Agent Library" }), _jsx(Select, { value: agentLibrary, onChange: e => onAgentLibraryChange(e.target.value), sx: { width: '100%' }, children: AGENT_LIBRARIES.map(lib => (_jsxs(Select.Option, { value: lib.value, disabled: lib.disabled, children: [lib.label, lib.disabled && ' (Coming Soon)'] }, lib.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, disabled: isFormReadOnly || models.length === 0, children: [_jsx(FormControl.Label, { children: "Model" }), _jsx(Select, { value: model, onChange: e => onModelChange(e.target.value), sx: { width: '100%' }, children: models.length === 0 ? (_jsx(Select.Option, { value: "", children: "Loading models..." })) : (models.map(m => (_jsxs(Select.Option, { value: m.id, disabled: !m.isAvailable, children: [m.name, !m.isAvailable && ' (API key required)'] }, m.id)))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Transport" }), _jsx(Select, { value: transport, onChange: e => onTransportChange(e.target.value), sx: { width: '100%' }, children: TRANSPORTS.map(t => (_jsx(Select.Option, { value: t.value, children: t.label }, t.value))) })] }), _jsxs(FormControl, { sx: { flex: 1 }, children: [_jsx(FormControl.Label, { children: "Extensions" }), _jsx(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: EXTENSIONS.map(ext => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { value: ext.value, checked: extensions.includes(ext.value), disabled: isFormReadOnly || !isExtensionEnabled(ext.value), onChange: e => handleExtensionChange(ext.value, e.target.checked) }), _jsx(Text, { children: ext.label })] }, ext.value))) })] })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "System Prompt" }), _jsx(TextInput, { value: systemPrompt, onChange: e => onSystemPromptChange(e.target.value), placeholder: "You are a helpful AI assistant.", sx: { width: '100%' } })] }), _jsxs(FormControl, { sx: { marginBottom: 3 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "System Prompt Codemode Addons" }), _jsx(TextInput, { value: systemPromptCodemodeAddons, onChange: e => onSystemPromptCodemodeAddonsChange(e.target.value), placeholder: "Additional codemode instructions", sx: { width: '100%' } })] }), _jsxs(Box, { sx: { display: 'flex', gap: 3, marginBottom: 3 }, children: [_jsxs(FormControl, { sx: { flex: 1 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Tools (comma-separated)" }), _jsx(TextInput, { value: tools.join(', '), onChange: e => onToolsChange(e.target.value
                                     .split(',')
                                     .map(tool => tool.trim())
-                                    .filter(Boolean)), placeholder: "tool_a, tool_b", sx: { width: '100%' } })] }), _jsxs(FormControl, { sx: { flex: 1 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Sandbox Variant" }), _jsxs(Select, { value: sandboxVariant, onChange: e => onSandboxVariantChange(e.target.value), sx: { width: '100%' }, children: [_jsx(Select.Option, { value: "", children: "Default" }), _jsx(Select.Option, { value: "local-eval", children: "local-eval" }), _jsx(Select.Option, { value: "jupyter", children: "jupyter" }), _jsx(Select.Option, { value: "local-jupyter", children: "local-jupyter" })] })] })] }), _jsxs(Box, { sx: {
+                                    .filter(Boolean)), placeholder: "tool_a, tool_b", sx: { width: '100%' } })] }), _jsxs(FormControl, { sx: { flex: 1 }, disabled: isFormReadOnly, children: [_jsx(FormControl.Label, { children: "Sandbox Variant" }), _jsxs(Select, { value: sandboxVariant, onChange: e => onSandboxVariantChange(e.target.value), sx: { width: '100%' }, children: [_jsx(Select.Option, { value: "", children: "Default" }), _jsx(Select.Option, { value: "eval", children: "eval" }), _jsx(Select.Option, { value: "jupyter", children: "jupyter" })] })] })] }), _jsxs(Box, { sx: {
                     marginBottom: 3,
                     padding: 3,
                     border: '1px solid',
@@ -470,7 +470,7 @@ export const AgentConfiguration = ({ agentLibrary, protocol: transport, extensio
                                     color: 'fg.muted',
                                     fontWeight: 'normal',
                                     ml: 2,
-                                }, children: "\u2014 defined by spec" }))] }), _jsx(Box, { sx: { display: 'flex', gap: 4, opacity: isSpecMode ? 0.6 : 1 }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableCodemode, disabled: !isNewAgentMode || isSpecMode, onChange: e => onEnableCodemodeChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code to compose tools" })] })] }) }), skillsEnabled && enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills provide curated capabilities; Codemode composes tools with Python for multi-step execution." }) })), skillsEnabled && !enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills will run with a standalone code sandbox for script execution. Enable Codemode to compose skills with other tools." }) })), enableCodemode && (_jsxs(Box, { sx: { mt: 3, display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: allowDirectToolCalls, disabled: !isNewAgentMode || isSpecMode, onChange: e => onAllowDirectToolCallsChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Allow direct tool calls" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Expose call_tool for simple, single-tool operations" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableToolReranker, disabled: !isNewAgentMode || isSpecMode, onChange: e => onEnableToolRerankerChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Enable tool reranker" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Reorder search results using the configured reranker" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: useJupyterSandbox, disabled: !isNewAgentMode || isSpecMode, onChange: e => onUseJupyterSandboxChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Use Jupyter Sandbox" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code in a Jupyter Sandbox instead of local-eval Sandbox" })] })] })] }))] }), _jsxs(Box, { sx: {
+                                }, children: "\u2014 defined by spec" }))] }), _jsx(Box, { sx: { display: 'flex', gap: 4, opacity: isSpecMode ? 0.6 : 1 }, children: _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableCodemode, disabled: !isNewAgentMode || isSpecMode, onChange: e => onEnableCodemodeChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Codemode" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code to compose tools" })] })] }) }), skillsEnabled && enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills provide curated capabilities; Codemode composes tools with Python for multi-step execution." }) })), skillsEnabled && !enableCodemode && (_jsx(Flash, { variant: "default", sx: { mt: 3 }, children: _jsx(Text, { sx: { fontSize: 0 }, children: "Skills will run with a standalone code sandbox for script execution. Enable Codemode to compose skills with other tools." }) })), enableCodemode && (_jsxs(Box, { sx: { mt: 3, display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: allowDirectToolCalls, disabled: !isNewAgentMode || isSpecMode, onChange: e => onAllowDirectToolCallsChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Allow direct tool calls" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Expose call_tool for simple, single-tool operations" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: enableToolReranker, disabled: !isNewAgentMode || isSpecMode, onChange: e => onEnableToolRerankerChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Enable tool reranker" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Reorder search results using the configured reranker" })] })] }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Checkbox, { checked: useJupyterSandbox, disabled: !isNewAgentMode || isSpecMode, onChange: e => onUseJupyterSandboxChange?.(e.target.checked) }), _jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Use Jupyter Sandbox" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: "Execute code in a Jupyter Sandbox instead of eval Sandbox" })] })] })] }))] }), _jsxs(Box, { sx: {
                     marginBottom: 3,
                     padding: 3,
                     border: '1px solid',

package/lib/context/ContextDistribution.d.ts

@@ -103,9 +103,11 @@ export interface ContextDistributionProps {
     agentId: string;
     /** Height of the chart */
     height?: string;
+    /** Live snapshot data from WS — bypasses REST polling when provided */
+    liveData?: ContextSnapshotResponse | null;
 }
 /**
  * ContextDistribution component displays context distribution as a treemap.
  */
-export declare function ContextDistribution({ agentId, height, }: ContextDistributionProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContextDistribution({ agentId, height, liveData, }: ContextDistributionProps): import("react/jsx-runtime").JSX.Element;
 export default ContextDistribution;

package/lib/context/ContextDistribution.js

@@ -6,18 +6,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  */
 import { Box, Text, Spinner, Button } from '@primer/react';
 import { ListUnorderedIcon } from '@primer/octicons-react';
-import { useQuery } from '@tanstack/react-query';
 import ReactECharts from 'echarts-for-react';
 import { useState } from 'react';
-function getLocalApiBase() {
-    if (typeof window === 'undefined') {
-        return '';
-    }
-    const host = window.location.hostname;
-    return host === 'localhost' || host === '127.0.0.1'
-        ? 'http://127.0.0.1:8765'
-        : '';
-}
 /**
  * Format token count for display
  */
@@ -33,23 +23,14 @@ function formatTokens(tokens) {
 /**
  * ContextDistribution component displays context distribution as a treemap.
  */
-export function ContextDistribution({ agentId, height = '250px', }) {
+export function ContextDistribution({ agentId, height = '250px', liveData, }) {
     const [showDetails, setShowDetails] = useState(false);
-    const { data: snapshotData, isLoading, error, } = useQuery({
-        queryKey: ['context-snapshot', agentId],
-        queryFn: async () => {
-            const apiBase = getLocalApiBase();
-            const response = await fetch(`${apiBase}/api/v1/configure/agents/${encodeURIComponent(agentId)}/context-snapshot`);
-            if (!response.ok) {
-                throw new Error('Failed to fetch context snapshot');
-            }
-            return response.json();
-        },
-        refetchInterval: 10000, // Refresh every 10 seconds
-        refetchOnMount: 'always',
-        staleTime: 0,
-    });
-    if (isLoading) {
+    const hasLiveData = liveData !== undefined;
+    // REST polling removed — data comes exclusively via WS `agent.snapshot`.
+    const snapshotData = liveData;
+    const showLoading = !hasLiveData;
+    const hasError = false;
+    if (showLoading) {
         return (_jsxs(Box, { sx: {
                 p: 3,
                 display: 'flex',
@@ -58,7 +39,7 @@ export function ContextDistribution({ agentId, height = '250px', }) {
                 height,
             }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { ml: 2, fontSize: 1, color: 'fg.muted' }, children: "Loading context distribution..." })] }));
     }
-    if (error || !snapshotData) {
+    if (hasError || !snapshotData) {
         return (_jsx(Box, { sx: {
                 p: 3,
                 bg: 'canvas.subtle',

package/lib/context/ContextInspector.d.ts

@@ -73,9 +73,11 @@ export interface ContextInspectorProps {
     agentId: string;
     /** API base URL for fetching context data */
     apiBase?: string;
+    /** Live full-context data from WS — bypasses REST polling when provided */
+    liveData?: FullContextResponse | null;
 }
 /**
  * ContextInspector component displays full detailed context snapshot.
  */
-export declare function ContextInspector({ agentId, apiBase }: ContextInspectorProps): import("react/jsx-runtime").JSX.Element;
+export declare function ContextInspector({ agentId, apiBase, liveData, }: ContextInspectorProps): import("react/jsx-runtime").JSX.Element;
 export default ContextInspector;