@datalayer/core 1.1.66 → 1.2.12

package/lib/views/mcp/McpObservability.js

@@ -5,12 +5,21 @@ import { Blankslate } from '@primer/react/experimental';
 import { Box } from '@datalayer/primer-addons';
 import { SearchIcon, TelescopeIcon } from '@primer/octicons-react';
 import { McpErrorBlankslate } from '../../components/mcp/index.js';
-import { useMcpMetrics, useMcpTrace, useRunTrace } from '../../hooks/useMcp.js';
+import { useMcpMetrics, useMcpTrace, useMcpWorkflowsHealth, useRunTrace, useTasks, } from '../../hooks/useMcp.js';
+import { TraceTimeline } from './TraceTimeline.js';
 import { useNavigate } from '../../hooks/index.js';
 import { MCP_METRIC_CATALOG } from '../../api/mcp/index.js';
-import { durationLabel } from './format.js';
-/** The gateway's own spans, so the tree can call out what each stage cost. */
-const STAGE = (name) => {
+import { durationLabel, timeAgo } from './format.js';
+/**
+ * What part of the platform a span belongs to, from its name.
+ *
+ * By prefix rather than by service, because one service emits spans for more
+ * than one stage — the gateway does its own policy check — and because a
+ * durable run's spans arrive from a process the gateway never talks to. A
+ * name nothing recognises gets no label rather than a wrong one: the span is
+ * still drawn, still timed, and still named.
+ */
+export const stageOf = (name) => {
     if (name.startsWith('mcp.policy')) {
         return 'Policy';
     }
@@ -23,10 +32,16 @@ const STAGE = (name) => {
     if (name.startsWith('durable.')) {
         return 'Workflow';
     }
+    // The Runtimes service is where a sandbox is actually started and a kernel
+    // actually executes; its spans are the ones that explain a run that spent
+    // its eleven minutes somewhere other than this gateway.
+    if (name.startsWith('runtimes.')) {
+        return 'Runtime';
+    }
     return '';
 };
 const SpanRow = ({ node, depth, }) => {
-    const stage = STAGE(node.span.span_name);
+    const stage = stageOf(node.span.span_name);
     const failed = (node.span.status_code ?? '').toUpperCase() === 'ERROR';
     return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
                     display: 'flex',
@@ -61,6 +76,46 @@ const Sli = ({ label, value, note, }) => (_jsxs(Box, { sx: {
         borderRadius: 2,
         minWidth: 0,
     }, children: [_jsx(Text, { sx: { display: 'block', fontSize: 3, fontWeight: 'bold' }, children: value }), _jsx(Text, { sx: { display: 'block', fontSize: 0, color: 'fg.muted' }, children: label }), note && (_jsx(Text, { sx: { display: 'block', fontSize: 0, color: 'fg.subtle' }, children: note }))] }));
+/**
+ * What the durable engine's own report amounts to, in one line.
+ *
+ * Three states, not two. "Unreachable" is deliberately not "unhealthy": the
+ * gateway answers `/operations/workflows` even when it cannot reach the
+ * engine, precisely so an operator can tell "the engine says it is unwell"
+ * from "nobody could ask it" — the first is a problem with the engine, the
+ * second is usually a problem with the network between them, and sending
+ * somebody to the wrong one costs an hour.
+ *
+ * A healthy engine with a backlog is still healthy, and says so with the
+ * backlog beside it: a queue is a queue, not a fault.
+ */
+export const engineLook = (health, failed) => {
+    if (failed) {
+        return {
+            label: 'Unreachable',
+            variant: 'secondary',
+            note: 'The gateway could not ask the durable engine how it is. That is a question about the network between them, not about the engine.',
+        };
+    }
+    if (!health) {
+        return { label: 'Asking…', variant: 'secondary', note: '' };
+    }
+    const backlog = (health.queues ?? []).reduce((total, queue) => total + (queue.backlog ?? 0), 0);
+    if (!health.healthy) {
+        return {
+            label: 'Unhealthy',
+            variant: 'danger',
+            note: health.detail || 'The engine reports itself unhealthy.',
+        };
+    }
+    return {
+        label: 'Healthy',
+        variant: backlog > 0 ? 'attention' : 'success',
+        note: backlog > 0
+            ? `${backlog} ${backlog === 1 ? 'run is' : 'runs are'} waiting to be picked up.`
+            : 'Nothing is waiting to be picked up.',
+    };
+};
 const percentLabel = (value) => value === null || value === undefined
     ? 'Not measured'
     : `${(value * 100).toFixed(1)}%`;
@@ -75,8 +130,12 @@ export const McpObservability = ({ errorState, routes, pane, onPaneChange, taskU
     });
     const run = taskUid ? byTask : byTrace;
     const metrics = useMcpMetrics({ agent, org });
+    // Only while the Live pane is open. A pane nobody is looking at should not
+    // be asking the durable engine how it is every thirty seconds.
+    const engine = useMcpWorkflowsHealth({ enabled: pane === 'live' });
+    const live = useTasks({ status: 'working' }, { enabled: pane === 'live' });
     const telemetryNotice = (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: ["This is telemetry: spans and metrics are sampled, kept for a short time and meant for understanding how a call ran. It is not the record of what was allowed \u2014", ' ', _jsx(Text, { as: "span", sx: { color: 'accent.fg', cursor: 'pointer' }, onClick: () => navigate(routes.audit), children: "the audit log" }), ' ', "is, and it is kept per plan and never changed."] }));
-    return (_jsxs(Box, { sx: { display: 'grid', gap: 3, minWidth: 0 }, children: [showTitle && (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Observability" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "How the calls of your agents ran: where the time went, and how the service is behaving." })] })), _jsxs(SegmentedControl, { "aria-label": "Observability panes", size: "small", children: [_jsx(SegmentedControl.Button, { selected: pane === 'runs', onClick: () => onPaneChange('runs'), children: "Runs" }), _jsx(SegmentedControl.Button, { selected: pane === 'metrics', onClick: () => onPaneChange('metrics'), children: "Metrics" })] }), telemetryNotice, pane === 'runs' && (_jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [_jsxs(Box, { sx: {
+    return (_jsxs(Box, { sx: { display: 'grid', gap: 3, minWidth: 0 }, children: [showTitle && (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Observability" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "How the calls of your agents ran: where the time went, and how the service is behaving." })] })), _jsxs(SegmentedControl, { "aria-label": "Observability panes", size: "small", children: [_jsx(SegmentedControl.Button, { selected: pane === 'runs', onClick: () => onPaneChange('runs'), children: "Runs" }), _jsx(SegmentedControl.Button, { selected: pane === 'live', onClick: () => onPaneChange('live'), children: "Live" }), _jsx(SegmentedControl.Button, { selected: pane === 'metrics', onClick: () => onPaneChange('metrics'), children: "Metrics" })] }), telemetryNotice, pane === 'runs' && (_jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [_jsxs(Box, { sx: {
                             display: 'flex',
                             gap: 2,
                             alignItems: 'center',
@@ -97,12 +156,46 @@ export const McpObservability = ({ errorState, routes, pane, onPaneChange, taskU
                                     gap: 3,
                                     alignItems: 'center',
                                     flexWrap: 'wrap',
-                                }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontFamily: 'mono' }, children: run.data?.traceId }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [run.data?.spans.length, " spans"] }), _jsx(Button, { size: "small", onClick: () => navigate(`${routes.audit}?trace=${encodeURIComponent(run.data?.traceId ?? '')}`), children: "The audit row" })] }), _jsx(Box, { sx: {
+                                }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontFamily: 'mono' }, children: run.data?.traceId }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [run.data?.spans.length, " spans"] }), _jsx(Button, { size: "small", onClick: () => navigate(`${routes.audit}?trace=${encodeURIComponent(run.data?.traceId ?? '')}`), children: "The audit row" })] }), _jsx(TraceTimeline, { tree: run.data?.tree ?? [] }), _jsx(Box, { sx: {
                                     border: '1px solid',
                                     borderColor: 'border.default',
                                     borderRadius: 2,
                                     overflowX: 'auto',
-                                }, children: (run.data?.tree ?? []).map(node => (_jsx(SpanRow, { node: node, depth: 0 }, node.span.span_id))) }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "The workflow steps and the sandbox launch of a durable task join this tree with milestone 2, and so does the live stream of calls as they land." })] }))] })), pane === 'metrics' && (_jsx(Box, { sx: { display: 'grid', gap: 3 }, children: metrics.isError ? (_jsx(McpErrorBlankslate, { state: errorState(metrics.error, 'Metrics'), onRetry: () => metrics.refetch() })) : metrics.isPending && !metrics.data ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 5 }, children: _jsx(Spinner, {}) })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                                }, children: (run.data?.tree ?? []).map(node => (_jsx(SpanRow, { node: node, depth: 0 }, node.span.span_id))) })] }))] })), pane === 'live' && (_jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [(() => {
+                        const look = engineLook(engine.data, engine.isError);
+                        const queues = engine.data?.queues ?? [];
+                        return (_jsxs(Box, { sx: {
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                                borderRadius: 2,
+                                p: 3,
+                                display: 'grid',
+                                gap: 2,
+                            }, children: [_jsxs(Box, { sx: {
+                                        display: 'flex',
+                                        gap: 2,
+                                        alignItems: 'center',
+                                        flexWrap: 'wrap',
+                                    }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 1 }, children: "The durable engine" }), _jsx(Label, { size: "small", variant: look.variant, children: look.label }), engine.data?.engine && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: engine.data.engine }))] }), look.note && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: look.note })), queues.length > 0 && (_jsx(Box, { sx: { display: 'grid', gap: 1 }, children: queues.map(queue => (_jsxs(Box, { sx: {
+                                            display: 'flex',
+                                            gap: 2,
+                                            alignItems: 'center',
+                                            fontSize: 0,
+                                        }, children: [_jsx(Text, { sx: { fontFamily: 'mono' }, children: queue.name }), _jsxs(Text, { sx: { color: 'fg.muted' }, children: [queue.backlog, " waiting"] }), typeof queue.oldestWaitSeconds === 'number' && (_jsxs(Text, { sx: { color: 'fg.muted' }, children: ["oldest", ' ', durationLabel(queue.oldestWaitSeconds * 1000)] }))] }, queue.name))) }))] }));
+                    })(), _jsxs(Box, { sx: { display: 'grid', gap: 2 }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 1 }, children: "Running now" }), live.isError ? (_jsx(McpErrorBlankslate, { state: errorState(live.error, 'The running calls'), onRetry: () => live.refetch() })) : live.isPending ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 4 }, children: _jsx(Spinner, {}) })) : (live.data?.items.length ?? 0) === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Nothing of yours is running. A call that finishes inside its own request never appears here \u2014 it is over before this pane could draw it \u2014 and is found by its trace in Runs." })) : ((live.data?.items ?? []).map(task => (_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    gap: 2,
+                                    alignItems: 'center',
+                                    flexWrap: 'wrap',
+                                    py: 1,
+                                    borderBottom: '1px solid',
+                                    borderColor: 'border.muted',
+                                }, children: [_jsx(Label, { size: "small", variant: "success", children: "Working" }), _jsx(Text, { sx: { fontSize: 0 }, children: task.tool || 'Run' }), _jsx(Text, { sx: {
+                                            fontSize: 0,
+                                            fontFamily: 'mono',
+                                            color: 'accent.fg',
+                                            cursor: 'pointer',
+                                        }, onClick: () => onSelect({ task: task.uid }), children: task.uid }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["started ", timeAgo(task.createdAt)] })] }, task.uid))))] })] })), pane === 'metrics' && (_jsx(Box, { sx: { display: 'grid', gap: 3 }, children: metrics.isError ? (_jsx(McpErrorBlankslate, { state: errorState(metrics.error, 'Metrics'), onRetry: () => metrics.refetch() })) : metrics.isPending && !metrics.data ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 5 }, children: _jsx(Spinner, {}) })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
                                 display: 'grid',
                                 gap: 3,
                                 gridTemplateColumns: [
@@ -123,8 +216,7 @@ export const McpObservability = ({ errorState, routes, pane, onPaneChange, taskU
                                 borderRadius: 2,
                                 overflowX: 'auto',
                             }, children: MCP_METRIC_CATALOG.map(name => {
-                                const points = metrics.data?.metrics[name] ?? [];
-                                const last = points[points.length - 1];
+                                const reporting = metrics.data?.reporting.includes(name) ?? false;
                                 return (_jsxs(Box, { sx: {
                                         display: 'flex',
                                         alignItems: 'center',
@@ -133,16 +225,10 @@ export const McpObservability = ({ errorState, routes, pane, onPaneChange, taskU
                                         px: 2,
                                         borderBottom: '1px solid',
                                         borderColor: 'border.muted',
-                                    }, children: [_jsx(Text, { sx: { fontSize: 0, fontFamily: 'mono', flex: 1 }, children: name }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: points.length === 0
-                                                ? 'no point'
-                                                : `${points.length} points` }), _jsx(Text, { sx: {
+                                    }, children: [_jsx(Text, { sx: { fontSize: 0, fontFamily: 'mono', flex: 1 }, children: name }), _jsx(Text, { sx: {
                                                 fontSize: 0,
-                                                fontWeight: 'semibold',
-                                                minWidth: 80,
-                                                textAlign: 'right',
-                                            }, children: last
-                                                ? `${last.value}${last.unit ? ` ${last.unit}` : ''}`
-                                                : '—' })] }, name));
+                                                color: reporting ? 'success.fg' : 'fg.muted',
+                                            }, children: reporting ? 'reporting' : 'no point' })] }, name));
                             }) }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: ["Metrics carry no user, agent or organization label by design, so a per-agent reading is computed from the request spans, which do.", metrics.data?.spans.length
                                     ? ` ${metrics.data.spans.length} spans read.`
                                     : ''] })] })) }))] }));

package/lib/views/mcp/NotebookRuns.d.ts

@@ -0,0 +1,39 @@
+/**
+ * The runs of one notebook, beside the notebook.
+ *
+ * A run outlives the call that started it, so the agent that asked is
+ * usually gone — and the person who notices is the one looking at the
+ * notebook. `/mcp/runs` lists every run they own; this answers the narrower
+ * question they actually have in front of them: what is happening to *this*
+ * notebook, right now.
+ *
+ * It lists rather than acts. Cancelling and answering live on the run's own
+ * page, next to the output that gives the question its context; a second set
+ * of buttons here would be a second implementation of the same two calls,
+ * and a panel beside a notebook is a poor place to decide to stop something
+ * you cannot see the output of.
+ *
+ * @module views/mcp/NotebookRuns
+ */
+import type { JSX } from 'react';
+import type { McpTask } from '../../models/McpTask';
+import { type McpRoutes } from './types';
+/**
+ * The runs worth a person's attention first.
+ *
+ * A notebook accumulates finished runs and keeps only one or two live ones,
+ * so ordering by time alone buries the live ones under yesterday's. Waiting
+ * first, then working, then whatever finished most recently — the same order
+ * the Runs panel uses, for the same reason.
+ */
+export declare const orderedRuns: (tasks: McpTask[]) => McpTask[];
+export interface NotebookRunsProps {
+    /** The notebook whose runs these are. */
+    notebookUid: string;
+    /** Where this application puts the surfaces this view links to. */
+    routes: McpRoutes;
+    /** How many to draw; a rail, not a page. */
+    limit?: number;
+}
+export declare const NotebookRuns: ({ notebookUid, routes, limit, }: NotebookRunsProps) => JSX.Element;
+export default NotebookRuns;

package/lib/views/mcp/NotebookRuns.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading, Label, Link, RelativeTime, Spinner, Text, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { useNotebookTasks } from '../../hooks/useMcp.js';
+import { RUN_STATUS_LOOK, isRunOver } from './RunDetail.js';
+/**
+ * The runs worth a person's attention first.
+ *
+ * A notebook accumulates finished runs and keeps only one or two live ones,
+ * so ordering by time alone buries the live ones under yesterday's. Waiting
+ * first, then working, then whatever finished most recently — the same order
+ * the Runs panel uses, for the same reason.
+ */
+export const orderedRuns = (tasks) => {
+    const rank = (task) => {
+        if (task.status === 'input_required') {
+            return 0;
+        }
+        return isRunOver(task.status) ? 2 : 1;
+    };
+    return [...tasks].sort((left, right) => rank(left) - rank(right) ||
+        right.lastUpdatedAt.localeCompare(left.lastUpdatedAt));
+};
+export const NotebookRuns = ({ notebookUid, routes, limit = 20, }) => {
+    const runs = useNotebookTasks(notebookUid);
+    const tasks = orderedRuns(runs.data?.items ?? []).slice(0, limit);
+    if (runs.isLoading) {
+        return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', p: 3 }, children: _jsx(Spinner, { size: "small" }) }));
+    }
+    return (_jsxs(Box, { sx: { display: 'grid', gap: 2, minWidth: 0 }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 1 }, children: "Runs" }), tasks.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Nothing has run on this notebook yet. A tool call that outlives its request appears here while it runs." })) : (tasks.map(task => {
+                const look = RUN_STATUS_LOOK[task.status];
+                return (_jsxs(Box, { sx: {
+                        display: 'grid',
+                        gap: 1,
+                        p: 2,
+                        borderRadius: 2,
+                        border: '1px solid',
+                        borderColor: task.status === 'input_required'
+                            ? 'attention.emphasis'
+                            : 'border.default',
+                    }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center' }, children: [_jsx(Label, { size: "small", variant: look.variant, children: look.label }), _jsx(Text, { sx: { fontSize: 0 }, children: task.tool || 'Run' })] }), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center' }, children: [_jsxs(Link, { href: `${routes.runs}/${encodeURIComponent(task.uid)}`, sx: { fontFamily: 'mono', fontSize: 0 }, children: [task.uid.slice(0, 16), "\u2026"] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: _jsx(RelativeTime, { datetime: task.lastUpdatedAt }) })] })] }, task.uid));
+            }))] }));
+};
+export default NotebookRuns;

package/lib/views/mcp/OrganizationPolicy.js

@@ -7,6 +7,7 @@ import { McpErrorBlankslate } from '../../components/mcp/index.js';
 import { useDeleteMcpPolicyLayer, useMcpPolicyLayer, useSetMcpPolicyLayer, } from '../../hooks/useMcp.js';
 import { useToast } from '../../hooks/index.js';
 import { McpPolicyConflict } from '../../api/iam/mcpPolicy.js';
+import { AdmittedClients } from './AdmittedClients.js';
 import { PolicyHistory } from './PolicyHistory.js';
 import { EMPTY_POLICY_DRAFT, PolicyForm, draftOf, policyChanged, rulesFrom, } from './PolicyForm.js';
 export const OrganizationPolicy = ({ errorState, orgUid, readOnly = false, showTitle = true, }) => {
@@ -84,7 +85,7 @@ export const OrganizationPolicy = ({ errorState, orgUid, readOnly = false, showT
     return (_jsxs(Box, { sx: { display: 'grid', gap: 3, minWidth: 0, maxWidth: '52rem' }, children: [showTitle && (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Organization Policy" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "What this organization narrows for every agent acting in it. Each layer only narrows \u2014 a team, or a person, can be stricter than this and never looser." })] })), conflict && (_jsxs(Flash, { variant: "warning", children: [_jsx(Text, { sx: { fontSize: 1 }, children: conflict }), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { size: "small", onClick: () => {
                                 setConflict('');
                                 layer.refetch();
-                            }, children: "Read it again" }) })] })), refusal && (_jsx(Flash, { variant: "danger", children: _jsx(Text, { sx: { fontSize: 1 }, children: refusal }) })), _jsx(PolicyForm, { draft: draft, onChange: set, disabled: readOnly }), !readOnly && (_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center' }, children: [_jsx(Button, { variant: "primary", onClick: apply, disabled: !changed || save.isPending, children: "Save policy" }), changed && (_jsx(Button, { variant: "invisible", onClick: () => setDraft(stored), children: "Discard changes" })), layer.data && (_jsx(Box, { sx: { marginLeft: 'auto' }, children: _jsx(Button, { variant: "danger", onClick: () => setRemoving(true), children: "Remove policy" }) }))] })), _jsxs(Box, { sx: {
+                            }, children: "Read it again" }) })] })), refusal && (_jsx(Flash, { variant: "danger", children: _jsx(Text, { sx: { fontSize: 1 }, children: refusal }) })), _jsx(PolicyForm, { draft: draft, onChange: set, disabled: readOnly, belowAllowedClients: _jsx(AdmittedClients, { scope: "organization", subjectUid: orgUid, edited: draft.allowedClients !== stored.allowedClients }) }), !readOnly && (_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center' }, children: [_jsx(Button, { variant: "primary", onClick: apply, disabled: !changed || save.isPending, children: "Save policy" }), changed && (_jsx(Button, { variant: "invisible", onClick: () => setDraft(stored), children: "Discard changes" })), layer.data && (_jsx(Box, { sx: { marginLeft: 'auto' }, children: _jsx(Button, { variant: "danger", onClick: () => setRemoving(true), children: "Remove policy" }) }))] })), _jsxs(Box, { sx: {
                     borderTop: '1px solid',
                     borderColor: 'border.muted',
                     pt: 3,

package/lib/views/mcp/PersonalPolicy.js

@@ -6,6 +6,7 @@ import { McpErrorBlankslate } from '../../components/mcp/index.js';
 import { useDeleteMcpPolicyLayer, useMcpPolicyLayer, useSetMcpPolicyLayer, } from '../../hooks/useMcp.js';
 import { useToast } from '../../hooks/index.js';
 import { McpPolicyConflict, } from '../../api/iam/mcpPolicy.js';
+import { AdmittedClients } from './AdmittedClients.js';
 import { EMPTY_POLICY_DRAFT, PolicyForm, draftOf, policyChanged, rulesFrom, } from './PolicyForm.js';
 /** A list rule already denied elsewhere, as a sentence naming who. */
 export const deniedElsewhere = (typed, organizations) => {
@@ -113,7 +114,7 @@ export const PersonalPolicy = ({ errorState, userUid, organizations = [], showTi
     return (_jsxs(Box, { sx: { display: 'grid', gap: 3, minWidth: 0, maxWidth: '52rem' }, children: [showTitle && (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Your MCP policy" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: ["Rules for your own agents. These can only make things", ' ', _jsx("strong", { children: "stricter" }), " \u2014 where you belong to an organization, its rules apply underneath and nothing here can loosen them."] })] })), conflict && (_jsxs(Flash, { variant: "warning", children: [_jsx(Text, { sx: { fontSize: 1 }, children: conflict }), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { size: "small", onClick: () => {
                                 setConflict('');
                                 layer.refetch();
-                            }, children: "Read it again" }) })] })), refusal && (_jsx(Flash, { variant: "danger", children: _jsx(Text, { sx: { fontSize: 1 }, children: refusal }) })), _jsx(PolicyForm, { draft: draft, onChange: set, notes: notes }), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center' }, children: [_jsx(Button, { variant: "primary", onClick: apply, disabled: !changed || save.isPending, children: "Save" }), changed && (_jsx(Button, { variant: "invisible", onClick: () => setDraft(stored), children: "Discard changes" })), layer.data && (_jsx(Box, { sx: { marginLeft: 'auto' }, children: _jsx(Button, { variant: "danger", disabled: remove.isPending, onClick: () => remove.mutate(undefined, {
+                            }, children: "Read it again" }) })] })), refusal && (_jsx(Flash, { variant: "danger", children: _jsx(Text, { sx: { fontSize: 1 }, children: refusal }) })), _jsx(PolicyForm, { draft: draft, onChange: set, notes: notes, belowAllowedClients: _jsx(AdmittedClients, { scope: "personal", subjectUid: userUid, edited: draft.allowedClients !== stored.allowedClients }) }), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center' }, children: [_jsx(Button, { variant: "primary", onClick: apply, disabled: !changed || save.isPending, children: "Save" }), changed && (_jsx(Button, { variant: "invisible", onClick: () => setDraft(stored), children: "Discard changes" })), layer.data && (_jsx(Box, { sx: { marginLeft: 'auto' }, children: _jsx(Button, { variant: "danger", disabled: remove.isPending, onClick: () => remove.mutate(undefined, {
                                 onSuccess: () => enqueueToast('Removed. You narrow nothing of your own.', {
                                     variant: 'success',
                                 }),

package/lib/views/mcp/PolicyForm.d.ts

@@ -24,6 +24,11 @@ export type PolicyDraft = {
     maxCallsPerMinute: string;
     maxCreditsPerDay: string;
     maxConcurrentSandboxes: string;
+    gpuHoursPerMonth: string;
+    storageBytes: string;
+    sessionMaxHours: string;
+    /** A checkbox, held as `'true'`/`''` so every field stays a string. */
+    ssoAdmitsWithoutConsent: string;
 };
 export declare const EMPTY_POLICY_DRAFT: PolicyDraft;
 /** A stored list as the textarea shows it: one entry a line. */
@@ -62,6 +67,17 @@ export interface PolicyFormProps {
      * needs to know while their hands are on it, not after they save.
      */
     notes?: Partial<Record<keyof PolicyDraft, React.ReactNode>>;
+    /**
+     * Rendered under the admitted-clients field: what the stored entries
+     * actually name.
+     *
+     * Passed in rather than fetched here, because it needs the scope and
+     * subject this form is editing and the form is deliberately presentational
+     * — organization, team and personal all render it, and each knows its own
+     * layer. Not a `note`: those are one warning line in attention colour, and
+     * this is a list.
+     */
+    belowAllowedClients?: React.ReactNode;
 }
-export declare const PolicyForm: ({ draft, onChange, disabled, notes, }: PolicyFormProps) => JSX.Element;
+export declare const PolicyForm: ({ draft, onChange, disabled, notes, belowAllowedClients, }: PolicyFormProps) => JSX.Element;
 export default PolicyForm;

package/lib/views/mcp/PolicyForm.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { FormControl, TextInput, Textarea, Text } from '@primer/react';
+import { FormControl, TextInput, Textarea, Text, ToggleSwitch, } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
 export const EMPTY_POLICY_DRAFT = {
     toolDenylist: '',
@@ -8,6 +8,10 @@ export const EMPTY_POLICY_DRAFT = {
     maxCallsPerMinute: '',
     maxCreditsPerDay: '',
     maxConcurrentSandboxes: '',
+    gpuHoursPerMonth: '',
+    storageBytes: '',
+    sessionMaxHours: '',
+    ssoAdmitsWithoutConsent: '',
 };
 /** A stored list as the textarea shows it: one entry a line. */
 export const linesOf = (value) => (value ?? []).join('\n');
@@ -43,6 +47,10 @@ export const draftOf = (rules) => ({
     maxCallsPerMinute: textOf(rules?.maxCallsPerMinute),
     maxCreditsPerDay: textOf(rules?.maxCreditsPerDay),
     maxConcurrentSandboxes: textOf(rules?.maxConcurrentSandboxes),
+    gpuHoursPerMonth: textOf(rules?.gpuHoursPerMonth),
+    storageBytes: textOf(rules?.storageBytes),
+    sessionMaxHours: textOf(rules?.sessionMaxHours),
+    ssoAdmitsWithoutConsent: rules?.ssoAdmitsWithoutConsent ? 'true' : '',
 });
 /**
  * The draft as it will be stored, or the reason it will not be.
@@ -56,6 +64,9 @@ export const rulesFrom = (draft) => {
         ['maxCallsPerMinute', 'Calls per minute'],
         ['maxCreditsPerDay', 'Credits per day'],
         ['maxConcurrentSandboxes', 'Sandboxes at once'],
+        ['gpuHoursPerMonth', 'GPU-hours per month'],
+        ['storageBytes', 'Storage'],
+        ['sessionMaxHours', 'Session at most'],
     ];
     for (const [key, label] of numbers) {
         const typed = draft[key].trim();
@@ -79,13 +90,24 @@ export const rulesFrom = (draft) => {
         maxCallsPerMinute: numberFrom(draft.maxCallsPerMinute),
         maxCreditsPerDay: numberFrom(draft.maxCreditsPerDay),
         maxConcurrentSandboxes: numberFrom(draft.maxConcurrentSandboxes),
+        gpuHoursPerMonth: numberFrom(draft.gpuHoursPerMonth),
+        storageBytes: numberFrom(draft.storageBytes),
+        sessionMaxHours: numberFrom(draft.sessionMaxHours),
+        // `undefined` rather than `false` when it is off, so an organization that
+        // never touched it stores no rule at all — the same distinction the lists
+        // draw between "not set" and "set to nothing".
+        ssoAdmitsWithoutConsent: draft.ssoAdmitsWithoutConsent === 'true' ? true : undefined,
     };
 };
 export const policyChanged = (a, b) => Object.keys(EMPTY_POLICY_DRAFT).some(key => a[key] !== b[key]);
 const Note = ({ children, }) => children ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'attention.fg', mt: 1, mb: 0 }, children: children })) : null;
-export const PolicyForm = ({ draft, onChange, disabled = false, notes = {}, }) => (_jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Denied tools" }), _jsx(Textarea, { block: true, rows: 3, disabled: disabled, value: draft.toolDenylist, onChange: event => onChange('toolDenylist', event.target.value), placeholder: 'execute_cell\ndelete_file' }), _jsx(FormControl.Caption, { children: "One a line. A denial is added to every other layer\u2019s and can never be lifted by one." }), _jsx(Note, { children: notes.toolDenylist })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Permitted tools" }), _jsx(Textarea, { block: true, rows: 3, disabled: disabled, value: draft.toolAllowlist, onChange: event => onChange('toolAllowlist', event.target.value), placeholder: 'read_cell\nlist_notebooks' }), _jsxs(FormControl.Caption, { children: ["One a line, and everything else is refused.", ' ', _jsx("strong", { children: "Leave it empty to set no allowlist" }), " \u2014 empty means \u201CI have not set one\u201D, not \u201Cnothing is permitted\u201D, because the second would stop every agent at once."] }), _jsx(Note, { children: notes.toolAllowlist })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Admitted clients" }), _jsx(Textarea, { block: true, rows: 3, disabled: disabled, value: draft.allowedClients, onChange: event => onChange('allowedClients', event.target.value), placeholder: 'https://claude.ai/.well-known/mcp-client.json\ncursor.com' }), _jsx(FormControl.Caption, { children: "A client\u2019s document URL, or just its hostname. Empty is not an allowlist, for the same reason as above." }), _jsx(Note, { children: notes.allowedClients })] }), _jsxs(Box, { sx: {
+export const PolicyForm = ({ draft, onChange, disabled = false, notes = {}, belowAllowedClients, }) => (_jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Denied tools" }), _jsx(Textarea, { block: true, rows: 3, disabled: disabled, value: draft.toolDenylist, onChange: event => onChange('toolDenylist', event.target.value), placeholder: 'execute_cell\ndelete_file' }), _jsx(FormControl.Caption, { children: "One a line. A denial is added to every other layer\u2019s and can never be lifted by one." }), _jsx(Note, { children: notes.toolDenylist })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Permitted tools" }), _jsx(Textarea, { block: true, rows: 3, disabled: disabled, value: draft.toolAllowlist, onChange: event => onChange('toolAllowlist', event.target.value), placeholder: 'read_cell\nlist_notebooks' }), _jsxs(FormControl.Caption, { children: ["One a line, and everything else is refused.", ' ', _jsx("strong", { children: "Leave it empty to set no allowlist" }), " \u2014 empty means \u201CI have not set one\u201D, not \u201Cnothing is permitted\u201D, because the second would stop every agent at once."] }), _jsx(Note, { children: notes.toolAllowlist })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Admitted clients" }), _jsx(Textarea, { block: true, rows: 3, disabled: disabled, value: draft.allowedClients, onChange: event => onChange('allowedClients', event.target.value), placeholder: 'https://claude.ai/.well-known/mcp-client.json\ncursor.com' }), _jsx(FormControl.Caption, { children: "A client\u2019s document URL, or just its hostname. Empty is not an allowlist, for the same reason as above." }), _jsx(Note, { children: notes.allowedClients }), belowAllowedClients && _jsx(Box, { sx: { mt: 2 }, children: belowAllowedClients })] }), _jsxs(Box, { sx: {
                 display: 'grid',
                 gap: 3,
                 gridTemplateColumns: ['1fr', '1fr 1fr 1fr'],
-            }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Calls per minute" }), _jsx(TextInput, { block: true, type: "number", min: 1, disabled: disabled, value: draft.maxCallsPerMinute, onChange: event => onChange('maxCallsPerMinute', event.target.value) }), _jsx(FormControl.Caption, { children: "Empty for no limit." }), _jsx(Note, { children: notes.maxCallsPerMinute })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Credits per day" }), _jsx(TextInput, { block: true, type: "number", min: 1, disabled: disabled, value: draft.maxCreditsPerDay, onChange: event => onChange('maxCreditsPerDay', event.target.value) }), _jsx(FormControl.Caption, { children: "Checked before a launch, never mid-session." }), _jsx(Note, { children: notes.maxCreditsPerDay })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Sandboxes at once" }), _jsx(TextInput, { block: true, type: "number", min: 1, disabled: disabled, value: draft.maxConcurrentSandboxes, onChange: event => onChange('maxConcurrentSandboxes', event.target.value) }), _jsx(FormControl.Caption, { children: "Counted across the layer that set it." }), _jsx(Note, { children: notes.maxConcurrentSandboxes })] })] })] }));
+            }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Calls per minute" }), _jsx(TextInput, { block: true, type: "number", min: 1, disabled: disabled, value: draft.maxCallsPerMinute, onChange: event => onChange('maxCallsPerMinute', event.target.value) }), _jsx(FormControl.Caption, { children: "Empty for no limit." }), _jsx(Note, { children: notes.maxCallsPerMinute })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Credits per day" }), _jsx(TextInput, { block: true, type: "number", min: 1, disabled: disabled, value: draft.maxCreditsPerDay, onChange: event => onChange('maxCreditsPerDay', event.target.value) }), _jsx(FormControl.Caption, { children: "Checked before a launch, never mid-session." }), _jsx(Note, { children: notes.maxCreditsPerDay })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Sandboxes at once" }), _jsx(TextInput, { block: true, type: "number", min: 1, disabled: disabled, value: draft.maxConcurrentSandboxes, onChange: event => onChange('maxConcurrentSandboxes', event.target.value) }), _jsx(FormControl.Caption, { children: "Counted across the layer that set it." }), _jsx(Note, { children: notes.maxConcurrentSandboxes })] })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "GPU-hours per month" }), _jsx(TextInput, { block: true, type: "number", min: 0, step: "any", disabled: disabled, value: draft.gpuHoursPerMonth, onChange: event => onChange('gpuHoursPerMonth', event.target.value) }), _jsxs(FormControl.Caption, { children: ["Empty for no limit. Refuses a launch on an environment that", ' ', _jsx("strong", { children: "has a GPU" }), " \u2014 a CPU sandbox is never affected, whatever this reads. Fractions are allowed: half an hour on one card is 0.5.", _jsx("br", {}), "Over the ", _jsx("strong", { children: "last 30 days" }), ", not the calendar month, so a limit cannot be spent twice across a reset \u2014 which means it will not line up with an invoice period.", ' ', _jsx("strong", { children: "Every GPU-hour billed to this scope counts, not only your agents\u2019" }), ' ', "\u2014 a notebook somebody ran by hand is in this number too."] }), _jsx(Note, { children: notes.gpuHoursPerMonth })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Storage" }), _jsx(TextInput, { block: true, type: "number", min: 0, step: 1, disabled: disabled, value: draft.storageBytes, onChange: event => onChange('storageBytes', event.target.value), trailingVisual: "bytes" }), _jsxs(FormControl.Caption, { children: ["Empty for no limit. In ", _jsx("strong", { children: "bytes" }), " \u2014 1 GB is 1073741824, 1 TB is 1099511627776. A number whose unit is implied is one somebody eventually reads as the other, and this is compared against a figure reported in bytes.", _jsx("br", {}), "Checked on ", _jsx("strong", { children: "every" }), " launch, not only one that attaches content: every sandbox can write.", ' ', _jsx("strong", { children: "Every kept version counts" }), " \u2014 an object\u2019s size is its newest version\u2019s, so a hundred versions of a 1\u00A0GB file are 100\u00A0GB, and deleting the newest frees none of the rest."] }), _jsx(Note, { children: notes.storageBytes })] }), _jsxs(Box, { sx: {
+                display: 'grid',
+                gap: 3,
+                gridTemplateColumns: ['1fr', '1fr 1fr'],
+            }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Session at most" }), _jsx(TextInput, { block: true, type: "number", min: 1, disabled: disabled, value: draft.sessionMaxHours, onChange: event => onChange('sessionMaxHours', event.target.value) }), _jsx(FormControl.Caption, { children: "Hours before a person signs in and consents again. It bites at the refresh: a token already minted lives out its own short life, and the connection ends when the client next tries to extend it. Empty for no limit." }), _jsx(Note, { children: notes.sessionMaxHours })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Your directory may stand in for the consent screen" }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mt: 1 }, children: [_jsx(ToggleSwitch, { size: "small", checked: draft.ssoAdmitsWithoutConsent === 'true', disabled: disabled, "aria-labelledby": "sso-admits-without-consent-label", onClick: () => onChange('ssoAdmitsWithoutConsent', draft.ssoAdmitsWithoutConsent === 'true' ? '' : 'true') }), _jsx(Text, { id: "sso-admits-without-consent-label", sx: { fontSize: 1 }, children: "Skip it for clients you already admit" })] }), _jsxs(FormControl.Caption, { children: ["Only for somebody who signed in through one of", ' ', _jsx("strong", { children: "your own" }), " enabled identity providers, and only for a client named in ", _jsx("strong", { children: "Admitted clients" }), " above \u2014 which must not be empty. Every other session still sees the screen. This does not require anyone to sign in through your directory; it only says the screen adds nothing when they did."] }), _jsx(Note, { children: notes.ssoAdmitsWithoutConsent })] })] })] }));
 export default PolicyForm;

package/lib/views/mcp/PolicyHistory.d.ts

@@ -39,6 +39,19 @@ export interface PolicyHistoryProps {
     subjectUid?: string;
     limit?: number;
 }
+/**
+ * What a change was made *through*, or `''` for somebody's own browser.
+ *
+ * The row names the person either way — an agent acts with exactly the
+ * access of whoever authorized it, so the person is accountable for what it
+ * did. What the row must not do is stop there: this drawer exists for the
+ * administrator who finds a denylist they did not write, and a row naming
+ * only them tells them they wrote it.
+ *
+ * The agent's own uid wins over the client id. A service agent is a named
+ * thing somebody can go and look at; a client id is the software it ran in.
+ */
+export declare const actedThrough: (event: McpAuditEvent) => string;
 /** What one row says about a change, in the words of the page it is on. */
 export declare const describeChange: (event: McpAuditEvent) => string;
 export declare const PolicyHistory: ({ orgUid, subjectUid, limit, }: PolicyHistoryProps) => JSX.Element;

package/lib/views/mcp/PolicyHistory.js

@@ -8,6 +8,19 @@ export const POLICY_AUDIT_METHODS = [
     'mcp.policy.set',
     'mcp.policy.remove',
 ];
+/**
+ * What a change was made *through*, or `''` for somebody's own browser.
+ *
+ * The row names the person either way — an agent acts with exactly the
+ * access of whoever authorized it, so the person is accountable for what it
+ * did. What the row must not do is stop there: this drawer exists for the
+ * administrator who finds a denylist they did not write, and a row naming
+ * only them tells them they wrote it.
+ *
+ * The agent's own uid wins over the client id. A service agent is a named
+ * thing somebody can go and look at; a client id is the software it ran in.
+ */
+export const actedThrough = (event) => String(event.agentUid || event.clientId || '');
 /** What one row says about a change, in the words of the page it is on. */
 export const describeChange = (event) => {
     const info = (event.clientInfo ?? {});
@@ -57,6 +70,6 @@ export const PolicyHistory = ({ orgUid, subjectUid, limit = 20, }) => {
                 alignItems: 'baseline',
                 flexWrap: 'wrap',
                 fontSize: 0,
-            }, children: [_jsx(Text, { sx: { color: 'fg.muted', whiteSpace: 'nowrap' }, children: _jsx(RelativeTime, { datetime: event.at }) }), _jsx(Text, { sx: { fontWeight: 'semibold' }, children: event.userUid || 'unknown' }), _jsx(Text, { children: describeChange(event) }), String(event.clientInfo?.version ?? '') && (_jsxs(Label, { size: "small", variant: "secondary", children: ["v", String(event.clientInfo?.version ?? '')] }))] }, event.uid))) }));
+            }, children: [_jsx(Text, { sx: { color: 'fg.muted', whiteSpace: 'nowrap' }, children: _jsx(RelativeTime, { datetime: event.at }) }), _jsx(Text, { sx: { fontWeight: 'semibold' }, children: event.userUid || 'unknown' }), actedThrough(event) && (_jsxs(Label, { size: "small", variant: "attention", children: ["through ", actedThrough(event)] })), _jsx(Text, { children: describeChange(event) }), String(event.clientInfo?.version ?? '') && (_jsxs(Label, { size: "small", variant: "secondary", children: ["v", String(event.clientInfo?.version ?? '')] }))] }, event.uid))) }));
 };
 export default PolicyHistory;

package/lib/views/mcp/RunDetail.d.ts

@@ -0,0 +1,87 @@
+/**
+ * One run: what it is doing, what it has printed, and the two things a
+ * person can do about it.
+ *
+ * A task is a tool call that outlived the request that asked for it, so the
+ * client that started it is usually gone. This is where somebody comes back
+ * to it — from another device, another session, or after closing the
+ * notebook — which is why it reads from the task record rather than from
+ * anything the caller held.
+ *
+ * **Cancelling stops the work, not just the record of it.** The gateway
+ * interrupts the kernel and then gives the tool a moment to hand back what
+ * the cell printed, so a run cancelled at minute nine of ten arrives here
+ * with its nine minutes of output and the `KeyboardInterrupt` that ended it.
+ * That is the reason the outputs are drawn for a cancelled run at all, and
+ * the reason the button says "Cancel" rather than "Stop watching".
+ *
+ * **`input_required` is a run asking, not a run idling.** It has stopped and
+ * will not move until somebody answers, so it is drawn as an open question
+ * with the answer box beside it rather than as another status label.
+ *
+ * Live while it runs: `useTaskEvents` patches the task's cache entry from
+ * the server's event stream, and `useTask` polls underneath as the fallback
+ * for a proxy that will not hold a stream open.
+ *
+ * @module views/mcp/RunDetail
+ */
+import type { JSX } from 'react';
+import type { McpTask, McpTaskStatus } from '../../models/McpTask';
+import type { McpSpanNode } from '../../api/mcp/observability';
+import { type McpErrorStateFn, type McpRoutes } from './types';
+/** How a run's status is drawn. Shared with the runs list. */
+export declare const RUN_STATUS_LOOK: Record<McpTaskStatus, {
+    label: string;
+    variant: 'success' | 'attention' | 'secondary' | 'danger';
+}>;
+/** Whether the run has stopped for good. */
+export declare const isRunOver: (status: McpTaskStatus) => boolean;
+/**
+ * Everything the run has printed, as text.
+ *
+ * Two shapes reach here and both are the run's output: the streamed
+ * `outputs`, and the `result` a finished tool returned. A cancelled run has
+ * the first and usually the second — the partial output is promoted to the
+ * result when it stops — so they are concatenated rather than chosen
+ * between, and de-duplicated by text so a promoted partial is not printed
+ * twice.
+ */
+export declare const outputTextOf: (task: McpTask) => string;
+/**
+ * A run for the documentation to draw: cancelled mid-flight, holding the
+ * lines it printed before it stopped.
+ *
+ * Cancelled rather than completed on purpose. It is the state that shows
+ * both halves of what this view is for — the output a run keeps when it is
+ * stopped, and the reason it stopped — and it is the one a reader is most
+ * likely to be looking at when they open the documentation.
+ */
+export declare const SAMPLE_RUN: McpTask;
+/**
+ * The spans that run left behind, for the documentation to draw.
+ *
+ * The shape is the one a reader needs to recognise: the gateway's twenty-two
+ * seconds are almost entirely the sandbox's, and the durable step between
+ * them explains the gap. A timeline drawn from an empty trace would teach
+ * nobody what the timeline is for.
+ */
+export declare const SAMPLE_TRACE: McpSpanNode[];
+export interface RunDetailProps {
+    /** The run to draw. */
+    taskUid: string;
+    /** The application's words for a failed request. */
+    errorState: McpErrorStateFn;
+    /** Where this application puts the surfaces this view links to. */
+    routes: McpRoutes;
+    /**
+     * Draw `SAMPLE_RUN` instead of asking the server, for documentation.
+     *
+     * The real component with fixed data, rather than a screenshot or a copy:
+     * a change to how a run is drawn reaches the documentation by itself, and
+     * a change that breaks it breaks the build rather than going unnoticed
+     * until somebody compares a picture.
+     */
+    mock?: boolean;
+}
+export declare const RunDetail: ({ taskUid, errorState, routes, mock, }: RunDetailProps) => JSX.Element;
+export default RunDetail;