@datalayer/core 1.1.60 → 1.2.10

package/lib/views/mcp/McpDashboard.js

@@ -0,0 +1,430 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { ActionList, ActionMenu, Button, Heading, Label, Link, RelativeTime, 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 { ShareAccessDialog, sandboxSharingUrl } from '../../components/sharing/index.js';
+import { ClientBadge, McpErrorBlankslate } from '../../components/mcp/index.js';
+import { useDisconnectAgent, useMcpActivity, useTerminateBinding, } from '../../hooks/useMcp.js';
+import { useNavigate, useToast } from '../../hooks/index.js';
+import { useCoreStore } from '../../state/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' },
+};
+/**
+ * How a task's status is drawn.
+ *
+ * `input_required` is `attention` rather than `secondary` because it is the
+ * one status that is waiting on a person: a run stopped for an approval is
+ * not idling, it is asking, and it stays asking until somebody answers.
+ */
+const TASK_LOOK = {
+    working: { label: 'Working', variant: 'success' },
+    input_required: { label: 'Waiting on you', variant: 'attention' },
+    completed: { label: 'Completed', variant: 'secondary' },
+    failed: { label: 'Failed', variant: 'danger' },
+    cancelled: { label: 'Cancelled', variant: 'secondary' },
+};
+/** What a task is running, in one phrase. */
+const taskContext = (task) => {
+    if (task.notebookUid) {
+        return task.cellId
+            ? `Notebook ${task.notebookUid} · cell ${task.cellId}`
+            : `Notebook ${task.notebookUid}`;
+    }
+    return task.sandboxUid ? `Sandbox ${task.sandboxUid}` : '';
+};
+/** 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);
+    const [sharing, setSharing] = useState(null);
+    // Runtimes owns a sandbox's sharing, and addresses it by the *runtime's*
+    // name rather than by the handle the session holds.
+    const runtimesUrl = useCoreStore(state => state.configuration.runtimesUrl || state.configuration.managerUrl || '');
+    // 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]);
+    /**
+     * The runs, the ones asking for a person first.
+     *
+     * `input_required` is a run that has stopped and will not move until
+     * somebody answers it, so it goes to the top however long it has been
+     * there; `working` next; then whatever has just finished, newest first. A
+     * list ordered only by time buries the one row that needs a hand.
+     */
+    const tasks = useMemo(() => {
+        const rank = {
+            input_required: 0,
+            working: 1,
+            failed: 2,
+            completed: 3,
+            cancelled: 3,
+        };
+        return [...(data?.tasks ?? [])]
+            .map(task => ({ ...task, id: task.uid }))
+            .sort((left, right) => rank[left.status] - rank[right.status] ||
+            right.lastUpdatedAt.localeCompare(left.lastUpdatedAt));
+    }, [data?.tasks]);
+    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 taskColumns = [
+        {
+            header: 'Run',
+            field: 'uid',
+            rowHeader: true,
+            renderCell: row => (_jsx(Link, { href: `${routes.runs}/${encodeURIComponent(row.uid)}`, onClick: event => {
+                    event.preventDefault();
+                    navigate(`${routes.runs}/${encodeURIComponent(row.uid)}`);
+                }, sx: { fontFamily: 'mono', fontSize: 0 }, children: row.uid })),
+        },
+        {
+            header: 'Status',
+            id: 'status',
+            width: '150px',
+            renderCell: row => (_jsx(Label, { size: "small", variant: TASK_LOOK[row.status].variant, children: TASK_LOOK[row.status].label })),
+        },
+        {
+            header: 'Tool',
+            id: 'tool',
+            width: '160px',
+            renderCell: row => _jsx(Text, { sx: { fontSize: 0 }, children: row.tool || '—' }),
+        },
+        {
+            header: 'Running',
+            id: 'context',
+            width: 'growCollapse',
+            renderCell: row => (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: taskContext(row) || '—' })),
+        },
+        {
+            header: 'Updated',
+            id: 'updated',
+            width: '140px',
+            renderCell: row => (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: _jsx(RelativeTime, { datetime: row.lastUpdatedAt }) })),
+        },
+    ];
+    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: '190px',
+            align: 'end',
+            renderCell: row => (_jsxs(Box, { sx: { display: 'flex', gap: 2, justifyContent: 'flex-end' }, children: [sandboxSharingUrl(runtimesUrl, row.runtimeName) && (_jsx(Button, { size: "small", disabled: row.state === 'closed', onClick: () => setSharing(row), children: "Share" })), _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 && (_jsx(Box, { children: tasks.length > 0 ? (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h3", id: "mcp-runs", children: "Running now" }), _jsx(Table.Subtitle, { as: "p", id: "mcp-runs-subtitle", children: "A tool call that outlives its request. Open one to watch its output, cancel it, or answer it when it is waiting on you." }), _jsx(DataTable, { "aria-labelledby": "mcp-runs", "aria-describedby": "mcp-runs-subtitle", data: tasks, columns: taskColumns })] })) : (_jsx(PanelEmpty, { icon: PlayIcon, heading: "Nothing is running", description: "A tool call that outlives its request becomes a task you can watch, cancel and answer. Ask a client for one \u2014 an agent that runs a long cell \u2014 and it appears here while it runs." })) })), 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."] }) })), sandboxSharingUrl(runtimesUrl, sharing?.runtimeName) && (_jsx(ShareAccessDialog, { isOpen: true, requestUrl: sandboxSharingUrl(runtimesUrl, sharing?.runtimeName), resourceLabel: "Sandbox", resourceName: sharing?.alias || sharing?.uid, resourceDescription: "Who else may look at this sandbox, change it, or run code on it. Sharing ends when the sandbox does.", onClose: () => setSharing(null) }))] }));
+};
+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;