@datalayer/core 1.1.59 → 1.1.66

package/lib/views/mcp/McpDashboard.js

@@ -0,0 +1,347 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { ActionList, ActionMenu, Button, Heading, Label, Link, Select, Spinner, Text, } from '@primer/react';
+import { Blankslate, DataTable, Dialog, Table, } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { ChecklistIcon, KebabHorizontalIcon, PlayIcon, PlugIcon, StackIcon, TelescopeIcon, } from '@primer/octicons-react';
+import { ClientBadge, McpErrorBlankslate } from '../../components/mcp/index.js';
+import { useDisconnectAgent, useMcpActivity, useTerminateBinding, } from '../../hooks/useMcp.js';
+import { useNavigate, useToast } from '../../hooks/index.js';
+import { clientStatusOf, durationLabel, plural, timeAgo } from './format.js';
+/** How a client's status is drawn. */
+const STATUS_LOOK = {
+    active: { label: 'Active', variant: 'success' },
+    idle: { label: 'Idle', variant: 'attention' },
+    disconnected: { label: 'Disconnected', variant: 'secondary' },
+};
+/** What a client is working on, in one phrase. */
+const boundTo = (client) => {
+    const call = client.lastCall;
+    if (!call) {
+        return '';
+    }
+    if (call.itemUid) {
+        return `Notebook ${call.itemUid}`;
+    }
+    if (call.sourceUid) {
+        return `Source ${call.sourceUid}`;
+    }
+    return '';
+};
+const countLook = (tone) => tone === 'danger' ? 'danger.fg' : 'fg.default';
+const Count = ({ label, value, tone = 'neutral', note, }) => (_jsxs(Box, { sx: {
+        p: 3,
+        border: '1px solid',
+        borderColor: 'border.default',
+        borderRadius: 2,
+        bg: 'canvas.default',
+        minWidth: 0,
+    }, children: [_jsx(Text, { sx: {
+                display: 'block',
+                fontSize: 4,
+                fontWeight: 'bold',
+                color: countLook(tone),
+            }, 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', mt: 1 }, children: note }))] }));
+/** A panel that has nothing to show, and the step that would fill it. */
+const PanelEmpty = ({ icon: Icon, heading, description, action, }) => (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(Icon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: heading }), _jsx(Blankslate.Description, { children: _jsx(Text, { as: "p", sx: { textAlign: 'center', m: 0 }, children: description }) }), action && (_jsx(Button, { size: "small", onClick: action.onClick, children: action.label }))] }));
+export const McpDashboard = ({ errorState, routes, org, showTitle = true, section, }) => {
+    /** Whether this section is the one being drawn. */
+    const draws = (name) => section === name;
+    const navigate = useNavigate();
+    const { enqueueToast } = useToast();
+    const activity = useMcpActivity(org ? { org } : {});
+    const disconnect = useDisconnectAgent();
+    const terminate = useTerminateBinding();
+    const [disconnecting, setDisconnecting] = useState(null);
+    const [terminating, setTerminating] = useState(null);
+    // Primer 37 types Dialog's focus refs with React 18's non-nullable
+    // `RefObject<HTMLElement>`. React 19's `useRef(null)` is nullable, and this
+    // ref is only handed to Dialog, so narrow it once here.
+    const returnFocusRef = useRef(null);
+    // The calls panel filters what is already in hand: the answer carries the
+    // last fifty calls, so narrowing them is a matter of the browser, not of
+    // another request.
+    const [callClient, setCallClient] = useState('');
+    const [callTool, setCallTool] = useState('');
+    const [callOutcome, setCallOutcome] = useState('');
+    const data = activity.data;
+    const clients = useMemo(() => (data?.clients ?? []).map(client => ({
+        ...client,
+        id: client.clientId,
+        status: clientStatusOf(client.lastCall?.at),
+    })), [data?.clients]);
+    const sandboxes = useMemo(() => (data?.sandboxes ?? []).map(binding => ({ ...binding, id: binding.uid })), [data?.sandboxes]);
+    const calls = useMemo(() => (data?.calls ?? []).map(call => ({ ...call, id: call.uid })), [data?.calls]);
+    const filteredCalls = useMemo(() => calls.filter(call => (!callClient || call.clientId === callClient) &&
+        (!callTool || call.tool === callTool) &&
+        (!callOutcome ||
+            (callOutcome === 'refused'
+                ? call.decision === 'refused'
+                : call.outcome === callOutcome))), [calls, callClient, callTool, callOutcome]);
+    const callTools = useMemo(() => [
+        ...new Set(calls.map(call => call.tool).filter(Boolean)),
+    ].sort(), [calls]);
+    const auditFor = (call) => {
+        const parameters = new URLSearchParams();
+        if (call.taskId) {
+            parameters.set('task', call.taskId);
+        }
+        else if (call.traceId) {
+            parameters.set('trace', call.traceId);
+        }
+        else {
+            if (call.clientId) {
+                parameters.set('agent', call.clientId);
+            }
+            if (call.tool) {
+                parameters.set('tool', call.tool);
+            }
+        }
+        const search = parameters.toString();
+        return search ? `${routes.audit}?${search}` : routes.audit;
+    };
+    const traceFor = (call) => {
+        if (call.taskId) {
+            return `${routes.observability}?task=${encodeURIComponent(call.taskId)}`;
+        }
+        if (call.traceId) {
+            return `${routes.observability}?trace=${encodeURIComponent(call.traceId)}`;
+        }
+        return null;
+    };
+    const confirmDisconnect = () => {
+        const client = disconnecting;
+        if (!client?.grantUid) {
+            return;
+        }
+        disconnect.mutate(client.grantUid, {
+            onSuccess: () => {
+                enqueueToast(`${client.clientName || client.clientId} is disconnected.`, {
+                    variant: 'success',
+                });
+                setDisconnecting(null);
+            },
+            onError: reason => {
+                enqueueToast(`Could not disconnect: ${reason.message}`, {
+                    variant: 'error',
+                });
+                setDisconnecting(null);
+            },
+        });
+    };
+    const confirmTerminate = () => {
+        const binding = terminating;
+        if (!binding) {
+            return;
+        }
+        terminate.mutate(binding.uid, {
+            onSuccess: () => {
+                enqueueToast(`Sandbox ${binding.uid} is terminated.`, {
+                    variant: 'success',
+                });
+                setTerminating(null);
+            },
+            onError: reason => {
+                enqueueToast(`Could not terminate: ${reason.message}`, {
+                    variant: 'error',
+                });
+                setTerminating(null);
+            },
+        });
+    };
+    const clientColumns = [
+        {
+            header: 'Client',
+            field: 'clientId',
+            rowHeader: true,
+            renderCell: row => (_jsx(ClientBadge, { clientId: row.clientId, clientName: row.clientName })),
+        },
+        {
+            header: 'Kind',
+            id: 'kind',
+            width: '110px',
+            // Service agents are principals of an organization and arrive with
+            // milestone 3; every grant IAM answers today is a delegation.
+            renderCell: () => (_jsx(Label, { size: "small", variant: "secondary", children: "Delegated" })),
+        },
+        {
+            header: 'Bound to',
+            id: 'bound',
+            width: 'growCollapse',
+            renderCell: row => (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: boundTo(row) || '—' })),
+        },
+        {
+            header: 'Last tool',
+            id: 'last-tool',
+            renderCell: row => row.lastCall ? (_jsxs(Box, { sx: { display: 'grid', gap: '2px', minWidth: 0 }, children: [_jsx(Text, { sx: { fontSize: 0 }, children: row.lastCall.tool || row.lastCall.method }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: timeAgo(row.lastCall.at) })] })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Nothing yet" })),
+        },
+        {
+            header: 'Status',
+            id: 'status',
+            width: '120px',
+            renderCell: row => (_jsx(Label, { size: "small", variant: STATUS_LOOK[row.status].variant, children: STATUS_LOOK[row.status].label })),
+        },
+        {
+            header: '',
+            id: 'actions',
+            width: '48px',
+            align: 'end',
+            renderCell: row => (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { variant: "invisible", size: "small", "aria-label": `Actions for ${row.clientName || row.clientId}`, icon: KebabHorizontalIcon }) }), _jsx(ActionMenu.Overlay, { align: "end", children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { onSelect: () => navigate(`${routes.audit}?agent=${encodeURIComponent(row.clientId)}`), children: "Audit" }), _jsx(ActionList.Divider, {}), _jsx(ActionList.Item, { variant: "danger", disabled: !row.grantUid, onSelect: () => setDisconnecting(row), children: "Disconnect" })] }) })] })),
+        },
+    ];
+    const sandboxColumns = [
+        {
+            header: 'Handle',
+            field: 'uid',
+            rowHeader: true,
+            renderCell: row => (_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: row.uid })),
+        },
+        {
+            header: 'Provider',
+            id: 'provider',
+            width: '120px',
+            renderCell: row => (_jsx(Text, { sx: { fontSize: 0 }, children: row.sandboxProvider || 'datalayer' })),
+        },
+        {
+            header: 'Capabilities',
+            id: 'capabilities',
+            width: 'growCollapse',
+            renderCell: row => (_jsxs(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: [(row.capabilities ?? []).map(capability => (_jsx(Label, { size: "small", variant: "secondary", children: capability }, capability))), (row.capabilities ?? []).length === 0 && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "\u2014" }))] })),
+        },
+        {
+            header: 'Last used',
+            id: 'last-used',
+            width: '120px',
+            renderCell: row => (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: timeAgo(row.lastUsedAt ?? row.createdAt) || '—' })),
+        },
+        {
+            header: 'State',
+            id: 'state',
+            width: '150px',
+            renderCell: row => row.state === 'lost' ? (
+            // The loss is a fact of the session, not a hiccup: it is named
+            // with the error the next call was answered with.
+            _jsx(Label, { size: "small", variant: "danger", children: "SANDBOX_LOST" })) : (_jsx(Label, { size: "small", variant: row.state === 'active' ? 'success' : 'secondary', children: row.state ?? 'active' })),
+        },
+        {
+            header: '',
+            id: 'actions',
+            width: '110px',
+            align: 'end',
+            renderCell: row => (_jsx(Button, { size: "small", variant: "danger", disabled: row.state === 'closed', onClick: () => setTerminating(row), children: "Terminate" })),
+        },
+    ];
+    const callColumns = [
+        {
+            header: 'Tool',
+            field: 'tool',
+            rowHeader: true,
+            renderCell: row => (_jsxs(Box, { sx: { display: 'grid', gap: '2px', minWidth: 0 }, children: [_jsx(Text, { sx: { fontSize: 1 }, children: row.tool || row.method }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: timeAgo(row.at) })] })),
+        },
+        {
+            header: 'Client',
+            id: 'client',
+            renderCell: row => (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: row.clientId || '—' })),
+        },
+        {
+            header: 'On',
+            id: 'item',
+            width: 'growCollapse',
+            renderCell: row => (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: row.itemUid || row.sourceUid || '—' })),
+        },
+        {
+            header: 'Decision',
+            id: 'decision',
+            width: '110px',
+            renderCell: row => (_jsx(Label, { size: "small", variant: row.decision === 'refused' ? 'danger' : 'success', children: row.decision })),
+        },
+        {
+            header: 'Outcome',
+            id: 'outcome',
+            width: '110px',
+            renderCell: row => (_jsx(Text, { sx: {
+                    fontSize: 0,
+                    color: row.outcome === 'ok' ? 'fg.muted' : 'danger.fg',
+                }, children: row.outcome ?? '—' })),
+        },
+        {
+            header: 'Took',
+            id: 'duration',
+            width: '90px',
+            renderCell: row => (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: durationLabel(row.durationMs) || '—' })),
+        },
+        {
+            header: '',
+            id: 'links',
+            width: '150px',
+            align: 'end',
+            renderCell: row => {
+                const trace = traceFor(row);
+                return (_jsxs(Box, { sx: { display: 'flex', gap: 2, justifyContent: 'flex-end' }, children: [_jsx(Link, { as: "button", sx: { fontSize: 0, cursor: 'pointer' }, onClick: () => navigate(auditFor(row)), children: "Audit" }), trace && (_jsx(Link, { as: "button", sx: { fontSize: 0, cursor: 'pointer' }, onClick: () => navigate(trace), children: "Trace" }))] }));
+            },
+        },
+    ];
+    if (activity.isError) {
+        return (_jsx(Box, { sx: { display: 'grid', gap: 3 }, children: _jsx(McpErrorBlankslate, { state: errorState(activity.error, 'MCP activity'), onRetry: () => activity.refetch() }) }));
+    }
+    const loading = activity.isPending && !data;
+    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: "What the agents connected to your workspace are doing right now." })] })), draws('overview') &&
+                (loading ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 5 }, children: _jsx(Spinner, {}) })) : (_jsxs(Box, { sx: {
+                        display: 'grid',
+                        gap: 3,
+                        gridTemplateColumns: [
+                            'repeat(2, 1fr)',
+                            'repeat(3, 1fr)',
+                            'repeat(6, 1fr)',
+                        ],
+                    }, children: [_jsx(Count, { label: "Clients connected", value: clients.length }), _jsx(Count, { label: "Sandboxes bound", value: sandboxes.filter(binding => (binding.state ?? 'active') === 'active').length }), _jsx(Count, { label: "Tasks running", value: data?.tasks.length ?? 0 }), _jsx(Count, { label: "Calls today", value: data?.today.calls ?? 0 }), _jsx(Count, { label: "Refusals today", value: data?.today.refusals ?? 0, tone: (data?.today.refusals ?? 0) > 0 ? 'danger' : 'neutral' }), _jsx(Count, { label: "Credits by agents", value: data?.today.credits ?? 0, note: "today" })] }))), draws('agents') &&
+                !loading &&
+                (clients.length > 0 ? (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h3", id: "mcp-clients", children: "Connected clients" }), _jsxs(Table.Subtitle, { as: "p", id: "mcp-clients-subtitle", children: [plural(clients.length, 'client'), " with a live grant on your workspace."] }), _jsx(DataTable, { "aria-labelledby": "mcp-clients", "aria-describedby": "mcp-clients-subtitle", data: clients, columns: clientColumns })] })) : (_jsx(PanelEmpty, { icon: PlugIcon, heading: "No client connected", description: "Connect Claude Code, Codex, Cursor, VS Code or any MCP client to your workspace, and it appears here on its first call.", action: {
+                        label: 'Set up a client',
+                        onClick: () => navigate(routes.access),
+                    } }))), draws('runs') && !loading && (_jsxs(Box, { children: [_jsx(Heading, { as: "h3", sx: { fontSize: 1, mb: 2 }, children: "Running now" }), _jsx(PanelEmpty, { icon: PlayIcon, heading: "Nothing is running", description: (data?.tasks.length ?? 0) > 0
+                            ? 'Tasks are running, and the live pane that shows their progress, their cell and their approvals arrives with durable execution in milestone 2.'
+                            : 'A tool call that outlives its request becomes a task you can watch, cancel and answer. Durable execution arrives in milestone 2; until then every call finishes inside its own request and is listed under Recent calls.' })] })), draws('sandboxes') &&
+                !loading &&
+                (sandboxes.length > 0 ? (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h3", id: "mcp-sandboxes", children: "Sandboxes bound" }), _jsx(Table.Subtitle, { as: "p", id: "mcp-sandboxes-subtitle", children: "The sessions your agents execute in. Terminating one ends its open work." }), _jsx(DataTable, { "aria-labelledby": "mcp-sandboxes", "aria-describedby": "mcp-sandboxes-subtitle", data: sandboxes, columns: sandboxColumns })] })) : (_jsx(PanelEmpty, { icon: StackIcon, heading: "No sandbox bound", description: "An agent that launches a sandbox keeps it for the session; it appears here with its provider, its capabilities and what it is doing." }))), draws('calls') &&
+                !loading &&
+                (calls.length > 0 ? (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h3", id: "mcp-calls", children: "Recent calls" }), _jsx(Table.Subtitle, { as: "p", id: "mcp-calls-subtitle", children: "The last calls as they landed. Every one of them has an audit row that outlives this page." }), _jsx(Table.Actions, { children: _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center' }, children: [_jsxs(Select, { size: "small", "aria-label": "Filter by client", value: callClient, onChange: event => setCallClient(event.currentTarget.value), children: [_jsx(Select.Option, { value: "", children: "Every client" }), clients.map(client => (_jsx(Select.Option, { value: client.clientId, children: client.clientName || client.clientId }, client.clientId)))] }), _jsxs(Select, { size: "small", "aria-label": "Filter by tool", value: callTool, onChange: event => setCallTool(event.currentTarget.value), children: [_jsx(Select.Option, { value: "", children: "Every tool" }), callTools.map(tool => (_jsx(Select.Option, { value: tool, children: tool }, tool)))] }), _jsxs(Select, { size: "small", "aria-label": "Filter by outcome", value: callOutcome, onChange: event => setCallOutcome(event.currentTarget.value), children: [_jsx(Select.Option, { value: "", children: "Every outcome" }), _jsx(Select.Option, { value: "ok", children: "Succeeded" }), _jsx(Select.Option, { value: "error", children: "Failed" }), _jsx(Select.Option, { value: "refused", children: "Refused" })] })] }) }), filteredCalls.length > 0 ? (_jsx(DataTable, { "aria-labelledby": "mcp-calls", "aria-describedby": "mcp-calls-subtitle", data: filteredCalls, columns: callColumns })) : (_jsx(Box, { sx: {
+                                p: 4,
+                                textAlign: 'center',
+                                color: 'fg.muted',
+                                fontSize: 1,
+                            }, children: "No call matches these filters." }))] })) : (_jsx(PanelEmpty, { icon: ChecklistIcon, heading: "No call yet", description: "Ask your agent to list your notebooks. The call, its decision and its outcome land here and in the audit log.", action: {
+                        label: 'Open the audit log',
+                        onClick: () => navigate(routes.audit),
+                    } }))), !loading && (_jsxs(Box, { sx: {
+                    display: 'flex',
+                    gap: 3,
+                    alignItems: 'center',
+                    flexWrap: 'wrap',
+                }, children: [_jsx(Button, { size: "small", leadingVisual: TelescopeIcon, onClick: () => navigate(routes.observability), children: "Observability" }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Refreshed ", timeAgo(data?.at) || 'just now', ", and again every ten seconds."] })] })), disconnecting && (_jsx(Dialog, { title: "Disconnect this client?", onClose: () => setDisconnecting(null), returnFocusRef: returnFocusRef, footerButtons: [
+                    {
+                        buttonType: 'default',
+                        content: 'Keep it',
+                        onClick: () => setDisconnecting(null),
+                    },
+                    {
+                        buttonType: 'danger',
+                        content: 'Disconnect',
+                        onClick: confirmDisconnect,
+                        disabled: disconnect.isPending,
+                    },
+                ], children: _jsxs(Text, { sx: { fontSize: 1 }, children: [disconnecting.clientName || disconnecting.clientId, " loses its grant at once. Its next call is refused; an access token it still holds dies with its own short expiry. Nothing it already did is undone."] }) })), terminating && (_jsx(Dialog, { title: "Terminate this sandbox?", onClose: () => setTerminating(null), returnFocusRef: returnFocusRef, footerButtons: [
+                    {
+                        buttonType: 'default',
+                        content: 'Keep it',
+                        onClick: () => setTerminating(null),
+                    },
+                    {
+                        buttonType: 'danger',
+                        content: 'Terminate',
+                        onClick: confirmTerminate,
+                        disabled: terminate.isPending,
+                    },
+                ], children: _jsxs(Text, { sx: { fontSize: 1 }, children: ["The runtime behind ", terminating.uid, " is stopped and its session closed. Work the agent has open there ends as", ' ', _jsx("code", { children: "SANDBOX_LOST" }), "; anything already written to a notebook stays."] }) }))] }));
+};
+export default McpDashboard;

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

@@ -0,0 +1,92 @@
+/**
+ * Access › MCP: how to connect a client, and what your agents may reach.
+ *
+ * This is the *setup and access* page, not the dashboard. It answers "how
+ * do I point my client at Datalayer" first — the endpoint, and one card per
+ * client with the command that writes its configuration — and then, in five
+ * summaries that link onward, "and what have they got": the agents
+ * connected, the runs, the toolsets, the notebooks and sources shared with
+ * an agent, and how the calls are behaving.
+ *
+ * What is happening *right now* is the dashboard's question, and the line
+ * at the top of the page opens it rather than answering it twice.
+ *
+ * Each card degrades to an explanatory empty state: a card with nothing in
+ * it says what would put something there.
+ *
+ * @module views/mcp/McpHome
+ */
+import type { JSX } from 'react';
+import { type McpRoutes } from './types';
+export interface McpHomeProps {
+    /** Where this application puts the surfaces this view links to. */
+    routes: McpRoutes;
+    /** Where the per-client manuals live; each client appends its own name. */
+    clientDocsBase?: string;
+    showTitle?: boolean;
+    /**
+     * Whether to draw the summary cards beneath the setup.
+     *
+     * Off where they have a page of their own. This page answers "how do I
+     * connect one", and six cards about what connected agents are *doing* sat
+     * under that question answering a different one — a reader looking for a
+     * command scrolled past them, and a reader looking for the numbers had to
+     * know they were filed under Access.
+     */
+    showSummaries?: boolean;
+    /**
+     * Whether to draw the setup half — the endpoint and the per-client cards.
+     *
+     * Off where only the summaries are wanted, which is how the MCP overview
+     * mounts this: the two halves answer different questions and now live on
+     * different tabs, and one component drawing either keeps the wording and
+     * the data of each in one place rather than two that drift.
+     */
+    showSetup?: boolean;
+    /**
+     * Open a documentation page beside this view rather than navigating to it.
+     *
+     * A client's "Configuration and authorization" opens the panel the
+     * application has rather than navigating: reading how to configure Cursor
+     * should not mean losing the endpoint, the other clients and the command
+     * that were on screen — the page you are reading about is the page you
+     * just left.
+     *
+     * Required, and a callback rather than the store itself: this view knows a
+     * documentation *path* and nothing about how an application shows one. An
+     * optional one would mean a second behaviour nobody chose, kept alive by
+     * whichever caller forgot to pass it.
+     */
+    onOpenDocs: (path: string) => void;
+}
+/**
+ * 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 declare const mcpSetupCommand: (client: string) => string;
+export declare const MCP_CLIENTS: {
+    name: string;
+    setup: string;
+}[];
+/**
+ * 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 declare const Copyable: ({ text }: {
+    text: string;
+}) => JSX.Element;
+export declare const McpHome: ({ routes, clientDocsBase, showTitle, showSummaries, showSetup, onOpenDocs, }: McpHomeProps) => JSX.Element;
+export default McpHome;

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,50 @@
+/**
+ * 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 McpErrorStateFn, type McpRoutes } from './types';
+export type McpObservabilityPane = 'runs' | '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;
+}
+export declare const McpObservability: ({ errorState, routes, pane, onPaneChange, taskUid, traceId, onSelect, agent, org, showTitle, }: McpObservabilityProps) => JSX.Element;
+export default McpObservability;