@datalayer/core 1.1.60 → 1.2.10

package/lib/views/mcp/McpHome.js

@@ -0,0 +1,153 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Heading, IconButton, Link, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { CheckIcon, CopyIcon, KeyIcon, PlugIcon, PulseIcon, ShareIcon, TelescopeIcon, ToolsIcon, } from '@primer/octicons-react';
+import { useConnectedAgents, useMcpActivity, useMcpMetrics, useTasks, } from '../../hooks/useMcp.js';
+import { useNavigate } from '../../hooks/index.js';
+import { useCoreStore, useIAMStore } from '../../state/index.js';
+import { plural, timeAgo } from './format.js';
+/**
+ * The clients the documentation carries a page for, in the order it lists
+ * them, with the name `datalayer mcp setup` takes.
+ */
+/**
+ * The command that writes a client's configuration.
+ *
+ * One function rather than the string written wherever it is shown. It is
+ * shown in two places that must not disagree — the Access view and the
+ * documentation page for each client — and a command a reader copies from
+ * the documentation that differs by a word from the one the interface shows
+ * is worse than either alone: it is two answers to "what do I run", and no
+ * way to tell which is current.
+ */
+export const mcpSetupCommand = (client) => `datalayer mcp setup ${client}`;
+export const MCP_CLIENTS = [
+    { name: 'Claude Code', setup: 'claude-code' },
+    { name: 'Claude Desktop', setup: 'claude-desktop' },
+    { name: 'Codex', setup: 'codex' },
+    { name: 'Cursor', setup: 'cursor' },
+    { name: 'VS Code', setup: 'vscode' },
+    { name: 'Windsurf', setup: 'windsurf' },
+    { name: 'Cline', setup: 'cline' },
+];
+/**
+ * A line of text with the button that copies it.
+ *
+ * Exported so the documentation shows a command the same way this view
+ * does: a reader who has seen one and then the other should not have to
+ * work out whether they are the same affordance.
+ */
+export const Copyable = ({ text }) => {
+    const [copied, setCopied] = useState(false);
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            alignItems: 'center',
+            gap: 2,
+            p: 2,
+            bg: 'canvas.inset',
+            borderRadius: 2,
+            minWidth: 0,
+        }, children: [_jsx(Text, { sx: {
+                    fontFamily: 'mono',
+                    fontSize: 0,
+                    flex: 1,
+                    minWidth: 0,
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                }, children: text }), _jsx(IconButton, { size: "small", variant: "invisible", "aria-label": copied ? 'Copied' : `Copy ${text}`, icon: copied ? CheckIcon : CopyIcon, onClick: () => {
+                    navigator.clipboard?.writeText(text);
+                    setCopied(true);
+                    window.setTimeout(() => setCopied(false), 1500);
+                } })] }));
+};
+/** One of the five summaries: a heading, what it holds, and the way in. */
+const Summary = ({ icon: Icon, title, children, action, }) => (_jsxs(Box, { sx: {
+        p: 3,
+        border: '1px solid',
+        borderColor: 'border.default',
+        borderRadius: 2,
+        display: 'grid',
+        gap: 2,
+        alignContent: 'start',
+        minWidth: 0,
+    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Icon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: title })] }), _jsx(Box, { sx: { fontSize: 0, color: 'fg.muted', display: 'grid', gap: 1 }, children: children }), action && (_jsx(Box, { children: _jsx(Link, { as: "button", sx: { fontSize: 0, cursor: 'pointer' }, onClick: action.onClick, children: action.label }) }))] }));
+export const McpHome = ({ routes, clientDocsBase = '/docs/mcp-clients', showTitle = true, showSummaries = true, showSetup = true, onOpenDocs, }) => {
+    const navigate = useNavigate();
+    const endpoint = useCoreStore(state => state.configuration.jupyterMcpServerUrl);
+    // Whether there is a token, never what it is: this page shows an address
+    // and a status, and a credential belongs on neither.
+    const signedIn = Boolean(useIAMStore(state => state.token));
+    const agents = useConnectedAgents();
+    const tasks = useTasks({ limit: 5 });
+    const activity = useMcpActivity();
+    const metrics = useMcpMetrics();
+    const connected = agents.data ?? [];
+    const runs = tasks.data?.items ?? [];
+    const live = activity.data?.clients.length ?? 0;
+    return (_jsxs(Box, { sx: { display: 'grid', gap: 4, minWidth: 0 }, children: [showTitle && (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "MCP" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "Connect your agents to your notebooks, data and sandboxes through the Model Context Protocol." })] })), showSetup && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: 3,
+                            flexWrap: 'wrap',
+                            p: 3,
+                            borderRadius: 2,
+                            bg: 'canvas.subtle',
+                            border: '1px solid',
+                            borderColor: 'border.default',
+                        }, children: [_jsx(Text, { sx: { fontSize: 1 }, children: live > 0
+                                    ? `${plural(live, 'client')} connected right now.`
+                                    : 'No client is connected right now.' }), _jsx(Button, { size: "small", leadingVisual: PulseIcon, onClick: () => navigate(routes.dashboard), children: "What is going on" })] }), _jsxs(Box, { sx: { display: 'grid', gap: 2 }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "The endpoint" }), _jsx(Copyable, { text: endpoint || 'https://mcp.datalayer.run/mcp' }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(KeyIcon, { size: 14 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: signedIn
+                                            ? 'You are signed in, so a client you set up from here authorizes through OAuth without a shared token.'
+                                            : 'Sign in to authorize a client through OAuth; without it a client can only use a personal access token.' })] })] }), _jsxs(Box, { sx: { display: 'grid', gap: 2 }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Set up a client" }), _jsx(Box, { sx: {
+                                    display: 'grid',
+                                    gap: 3,
+                                    gridTemplateColumns: [
+                                        '1fr',
+                                        'repeat(2, 1fr)',
+                                        'repeat(3, 1fr)',
+                                    ],
+                                }, children: MCP_CLIENTS.map(client => (_jsxs(Box, { sx: {
+                                        p: 3,
+                                        border: '1px solid',
+                                        borderColor: 'border.default',
+                                        borderRadius: 2,
+                                        display: 'grid',
+                                        gap: 2,
+                                        minWidth: 0,
+                                    }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: client.name }), _jsx(Copyable, { text: mcpSetupCommand(client.setup) }), _jsx(Link, { href: `${clientDocsBase}/${client.setup}`, sx: { fontSize: 0, cursor: 'pointer', textAlign: 'left' }, onClick: event => {
+                                                // A modified click is the reader asking for a new tab or
+                                                // window, and `href` is real so it still leads to the
+                                                // full page — for that, for the status bar and for the
+                                                // context menu.
+                                                if (event.metaKey || event.ctrlKey || event.shiftKey) {
+                                                    return;
+                                                }
+                                                event.preventDefault();
+                                                onOpenDocs(`${clientDocsBase}/${client.setup}`);
+                                            }, children: "Configuration and authorization" })] }, client.setup))) })] })] })), showSummaries && (_jsxs(Box, { sx: {
+                    display: 'grid',
+                    gap: 3,
+                    gridTemplateColumns: ['1fr', 'repeat(2, 1fr)', 'repeat(3, 1fr)'],
+                }, children: [_jsx(Summary, { icon: PlugIcon, title: "Agents", action: {
+                            label: 'Connected agents',
+                            onClick: () => navigate(routes.agents),
+                        }, children: connected.length === 0 ? (_jsx(Text, { children: "No agent has been authorized yet. Set up a client above and approve the scopes it asks for." })) : (_jsxs(_Fragment, { children: [_jsxs(Text, { children: [plural(connected.length, 'agent'), " authorized."] }), connected.slice(0, 3).map(agent => (_jsxs(Text, { children: [agent.clientName || agent.clientId, " \u2014", ' ', agent.lastUsedAt
+                                            ? `used ${timeAgo(agent.lastUsedAt)}`
+                                            : 'never used'] }, agent.uid)))] })) }), _jsx(Summary, { icon: PulseIcon, title: "Runs", action: { label: 'All runs', onClick: () => navigate(routes.runs) }, children: runs.length === 0 ? (_jsx(Text, { children: "Nothing has run yet. A tool call that outlives its request becomes a run you can watch and cancel." })) : (runs.map(task => (_jsxs(Text, { children: [task.tool, " \u2014 ", task.status, " ", timeAgo(task.lastUpdatedAt)] }, task.uid)))) }), _jsxs(Summary, { icon: TelescopeIcon, title: "Observability", action: {
+                            label: 'Runs and metrics',
+                            onClick: () => navigate(routes.observability),
+                        }, children: [_jsx(Text, { children: metrics.data?.slis.samples.calls
+                                    ? `${plural(metrics.data.slis.samples.calls, 'call')} measured.`
+                                    : 'No call measured yet.' }), _jsx(Text, { children: metrics.data?.slis.p95CallDurationMs
+                                    ? `p95 ${Math.round(metrics.data.slis.p95CallDurationMs)}ms`
+                                    : 'Latency not measured yet.' }), _jsx(Text, { children: metrics.data?.slis.availability === null ||
+                                    metrics.data?.slis.availability === undefined
+                                    ? 'Error rate not measured yet.'
+                                    : `${((1 - metrics.data.slis.availability) * 100).toFixed(1)}% of calls failed.` })] }), _jsx(Summary, { icon: ToolsIcon, title: "Tools", children: _jsx(Text, { children: "The toolsets an agent may execute \u2014 the Contents sources you have enabled for it, their tools, their approval policy and their health \u2014 are managed here once toolset bindings ship." }) }), _jsx(Summary, { icon: ShareIcon, title: "Reach", children: _jsx(Text, { children: "Which notebooks and sources an agent can actually reach, as a list you can read at a glance, arrives with sharing to agents as principals." }) }), _jsx(Summary, { icon: KeyIcon, title: "Policies", action: {
+                            label: 'What applies',
+                            onClick: () => navigate(routes.policies),
+                        }, children: _jsx(Text, { children: "What your agents are allowed to do, and which layer decided each rule." }) })] }))] }));
+};
+export default McpHome;

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

@@ -0,0 +1,79 @@
+/**
+ * How a call ran, as opposed to whether it was allowed.
+ *
+ * Two panes over the Datalayer OTEL service, read directly with the
+ * caller's token: **Runs**, the span tree of one call across the gateway,
+ * the policy check and the worker, with the durations that matter called
+ * out; and **Metrics**, the four service level indicators and the metric
+ * catalog for the caller's agents or, for an owner, the organization.
+ *
+ * There is no gateway route behind this and no second store: the gateway
+ * exports spans, metrics and logs through the collector the platform
+ * already runs, and this page queries that. Which is exactly why the page
+ * says on itself that it is telemetry — short retention, sampled, no
+ * security claim. The audit log is the trail that answers "was this
+ * allowed", and every pane links to it.
+ *
+ * Milestone 1 draws the two panes over synchronous calls. The workflow
+ * steps and sandbox spans of a durable task, and the live stream of calls
+ * as they land, arrive with milestone 2.
+ *
+ * @module views/mcp/McpObservability
+ */
+import type { JSX } from 'react';
+import type { McpWorkflowsHealth } from '../../api/mcp/operations';
+import { type McpErrorStateFn, type McpRoutes } from './types';
+export type McpObservabilityPane = 'runs' | 'live' | 'metrics';
+export interface McpObservabilityProps {
+    /** The application's words for a failed request. */
+    errorState: McpErrorStateFn;
+    /** Where this application puts the surfaces this view links to. */
+    routes: McpRoutes;
+    /** Which pane is open; the address owns it. */
+    pane: McpObservabilityPane;
+    onPaneChange: (pane: McpObservabilityPane) => void;
+    /** The run to open, when the address names one. */
+    taskUid?: string;
+    /** The trace to open — what a synchronous call leaves behind. */
+    traceId?: string;
+    /** Asked to write a new selection into the address. */
+    onSelect: (selection: {
+        task?: string;
+        trace?: string;
+    }) => void;
+    /** One agent's reading, rather than every agent of the caller. */
+    agent?: string;
+    /** An owner's reading of one organization. */
+    org?: string;
+    showTitle?: boolean;
+}
+/**
+ * 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 declare const stageOf: (name: string) => string;
+/**
+ * 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 declare const engineLook: (health: McpWorkflowsHealth | undefined, failed: boolean) => {
+    label: string;
+    variant: "success" | "attention" | "danger" | "secondary";
+    note: string;
+};
+export declare const McpObservability: ({ errorState, routes, pane, onPaneChange, taskUid, traceId, onSelect, agent, org, showTitle, }: McpObservabilityProps) => JSX.Element;
+export default McpObservability;

package/lib/views/mcp/McpObservability.js

@@ -0,0 +1,236 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Heading, Label, SegmentedControl, Spinner, Text, TextInput, } from '@primer/react';
+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, 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, 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';
+    }
+    if (name.startsWith('mcp.request')) {
+        return 'Gateway';
+    }
+    if (name.startsWith('sandbox.')) {
+        return 'Sandbox';
+    }
+    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 = stageOf(node.span.span_name);
+    const failed = (node.span.status_code ?? '').toUpperCase() === 'ERROR';
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 2,
+                    py: 1,
+                    pl: depth * 3,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.muted',
+                    minWidth: 0,
+                }, children: [_jsx(Text, { sx: {
+                            fontSize: 0,
+                            fontFamily: 'mono',
+                            flex: 1,
+                            minWidth: 0,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            color: failed ? 'danger.fg' : 'fg.default',
+                        }, children: node.span.span_name }), stage && (_jsx(Label, { size: "small", variant: "secondary", children: stage })), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: node.span.service_name }), _jsx(Text, { sx: {
+                            fontSize: 0,
+                            fontWeight: 'semibold',
+                            minWidth: 60,
+                            textAlign: 'right',
+                        }, children: durationLabel(node.span.duration_ms) })] }), node.children.map(child => (_jsx(SpanRow, { node: child, depth: depth + 1 }, child.span.span_id)))] }));
+};
+/** A number the reader can act on, or a plain statement that it is not measured. */
+const Sli = ({ label, value, note, }) => (_jsxs(Box, { sx: {
+        p: 3,
+        border: '1px solid',
+        borderColor: 'border.default',
+        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)}%`;
+export const McpObservability = ({ errorState, routes, pane, onPaneChange, taskUid, traceId, onSelect, agent, org, showTitle = true, }) => {
+    const navigate = useNavigate();
+    const [find, setFind] = useState(taskUid ?? traceId ?? '');
+    // One of the two, never both: a task names its own trace, and a trace
+    // names itself.
+    const byTask = useRunTrace(taskUid, { enabled: Boolean(taskUid) });
+    const byTrace = useMcpTrace(traceId, {
+        enabled: Boolean(traceId) && !taskUid,
+    });
+    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 === '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',
+                            flexWrap: 'wrap',
+                        }, children: [_jsx(TextInput, { size: "small", leadingVisual: SearchIcon, "aria-label": "Task or trace id", placeholder: "Task uid or trace id", value: find, sx: { minWidth: 320 }, onChange: event => setFind(event.currentTarget.value) }), _jsx(Button, { size: "small", onClick: () => {
+                                    const value = find.trim();
+                                    if (!value) {
+                                        onSelect({});
+                                        return;
+                                    }
+                                    // A trace id is 32 hexadecimal characters; anything else is a
+                                    // task uid, and the gateway tells us which by answering.
+                                    onSelect(/^[0-9a-f]{32}$/i.test(value)
+                                        ? { trace: value }
+                                        : { task: value });
+                                }, children: "Show the run" })] }), !taskUid && !traceId ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(TelescopeIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "Pick a run" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "Open a call from the audit log or the dashboard, or paste its task uid or trace id here, and its spans across the gateway, the policy check and the worker appear with the time each took." }) }), _jsx(Button, { size: "small", onClick: () => navigate(routes.audit), children: "Open the audit log" })] })) : run.isError ? (_jsx(McpErrorBlankslate, { state: errorState(run.error, 'This run'), onRetry: () => run.refetch() })) : run.isPending ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 5 }, children: _jsx(Spinner, {}) })) : (run.data?.spans.length ?? 0) === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(TelescopeIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "No span for this call" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "Spans reach the collector a few seconds after the call and are kept for a short time. A call older than the retention window has an audit row but no trace." }) })] })) : (_jsxs(Box, { sx: { display: 'grid', gap: 2 }, children: [_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    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(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))) })] }))] })), 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: [
+                                    '1fr',
+                                    'repeat(2, 1fr)',
+                                    'repeat(4, 1fr)',
+                                ],
+                            }, children: [_jsx(Sli, { label: "Availability", value: percentLabel(metrics.data?.slis.availability), note: `${metrics.data?.slis.samples.calls ?? 0} calls` }), _jsx(Sli, { label: "Call latency, p95", value: metrics.data?.slis.p95CallDurationMs === null ||
+                                        metrics.data?.slis.p95CallDurationMs === undefined
+                                        ? 'Not measured'
+                                        : durationLabel(metrics.data.slis.p95CallDurationMs) }), _jsx(Sli, { label: "Task success", value: percentLabel(metrics.data?.slis.taskSuccessRate), note: `${metrics.data?.slis.samples.tasks ?? 0} tasks` }), _jsx(Sli, { label: "Sandbox launch, p95", value: Object.keys(metrics.data?.slis.p95SandboxLaunchSeconds ?? {}).length === 0
+                                        ? 'Not measured'
+                                        : Object.entries(metrics.data?.slis.p95SandboxLaunchSeconds ?? {})
+                                            .map(([provider, seconds]) => `${provider} ${seconds.toFixed(1)}s`)
+                                            .join(' · '), note: `${metrics.data?.slis.samples.launches ?? 0} launches` })] }), _jsx(Box, { sx: {
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                                borderRadius: 2,
+                                overflowX: 'auto',
+                            }, children: MCP_METRIC_CATALOG.map(name => {
+                                const reporting = metrics.data?.reporting.includes(name) ?? false;
+                                return (_jsxs(Box, { sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: 3,
+                                        py: 1,
+                                        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: 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.`
+                                    : ''] })] })) }))] }));
+};
+export default McpObservability;

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.d.ts

@@ -0,0 +1,45 @@
+/**
+ * What an organization narrows for its agents, and the form that writes it.
+ *
+ * The sibling `Policies` view is the *read*: every layer intersected, with
+ * the layer that decided each rule. This is the *write*, and only one
+ * layer's — an organization owner cannot edit the platform's defaults or
+ * somebody's personal rules, and would not want to.
+ *
+ * Three things this page owes the person filling it in:
+ *
+ * **Only rules the gateway enforces.** IAM refuses anything else, so a form
+ * offering more would collect a setting that is thrown away at the write —
+ * and `toolDenyList` would read as a working denylist rather than a typo.
+ * The fields come from `MCP_POLICY_RULES` so the form cannot drift.
+ *
+ * **An empty allowlist is not an allowlist.** Leaving the field blank means
+ * "I have not set one", not "nothing is permitted" — the second would stop
+ * every agent in the organization, and the first conclusion anybody draws
+ * from that is that the platform is down. The captions say so where
+ * somebody is about to make that mistake.
+ *
+ * **A limit of zero is refused rather than stored.** The gateway reads a
+ * non-positive cap as *no cap*, so a zero written to stop an organization's
+ * agents lifts its limit instead — the one value whose stored meaning is the
+ * opposite of its plain reading.
+ *
+ * @module views/mcp/OrganizationPolicy
+ */
+import type { JSX } from 'react';
+import type { McpErrorStateFn } from './types';
+export interface OrganizationPolicyProps {
+    /** The application's words for a failed request. */
+    errorState: McpErrorStateFn;
+    /** The organization whose layer this is. */
+    orgUid: string;
+    /**
+     * Read-only for anybody who is not an owner. IAM refuses their writes
+     * either way; this keeps the page from offering an action that would be
+     * refused.
+     */
+    readOnly?: boolean;
+    showTitle?: boolean;
+}
+export declare const OrganizationPolicy: ({ errorState, orgUid, readOnly, showTitle, }: OrganizationPolicyProps) => JSX.Element;
+export default OrganizationPolicy;