@datalayer/core 1.1.60 → 1.1.66

package/lib/views/mcp/AuditLog.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { ActionList, ActionMenu, Button, Heading, Label, Link, Flash, RelativeTime, Select, Spinner, Text, TextInput, } from '@primer/react';
+import { Blankslate, Dialog } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { CheckCircleIcon, ChevronLeftIcon, ChevronRightIcon, DownloadIcon, HistoryIcon, ShieldLockIcon, XCircleIcon, } from '@primer/octicons-react';
+import { McpErrorBlankslate } from '../../components/mcp/index.js';
+import { useAuditEvents, useAuditExport, useMcpForwarding, } from '../../hooks/useMcp.js';
+import { useNavigate, useToast } from '../../hooks/index.js';
+import { durationLabel } from './format.js';
+/** How many rows a page holds. */
+const PAGE_SIZE = 50;
+const decisionLook = (event) => {
+    if (event.decision === 'refused') {
+        return { fg: 'danger.fg', bg: 'danger.subtle', Icon: ShieldLockIcon };
+    }
+    if (event.outcome && event.outcome !== 'ok') {
+        return { fg: 'attention.fg', bg: 'attention.subtle', Icon: XCircleIcon };
+    }
+    return { fg: 'success.fg', bg: 'success.subtle', Icon: CheckCircleIcon };
+};
+/** Save a document the browser never navigated to. */
+const download = (content, filename, mime) => {
+    const url = URL.createObjectURL(new Blob([content], { type: mime }));
+    const anchor = document.createElement('a');
+    anchor.href = url;
+    anchor.download = filename;
+    anchor.click();
+    URL.revokeObjectURL(url);
+};
+export const AuditLog = ({ errorState, routes, filters, onFiltersChange, retentionDays, showTitle = true, subject = 'your agents', }) => {
+    const navigate = useNavigate();
+    const { enqueueToast } = useToast();
+    const page = useAuditEvents({ limit: PAGE_SIZE, ...filters });
+    const exporting = useAuditExport();
+    // Only an organization forwards; a personal audit has nowhere to go.
+    const forwarding = useMcpForwarding(filters.org ?? '', {
+        enabled: Boolean(filters.org),
+    });
+    const [open, setOpen] = 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 cursors already walked, so "Newer" is a step back rather than a guess. */
+    const [walked, setWalked] = useState([]);
+    const rows = page.data?.items ?? [];
+    const nextCursor = page.data?.nextCursor ?? null;
+    const set = (patch) => {
+        // Any change to what is selected starts the walk again: a cursor is a
+        // position in one query's answer, and means nothing in another's.
+        setWalked([]);
+        onFiltersChange({ ...filters, ...patch, cursor: undefined });
+    };
+    const older = () => {
+        if (!nextCursor) {
+            return;
+        }
+        setWalked(current => [...current, filters.cursor ?? '']);
+        onFiltersChange({ ...filters, cursor: nextCursor });
+    };
+    const newer = () => {
+        const previous = walked[walked.length - 1];
+        setWalked(current => current.slice(0, -1));
+        onFiltersChange({ ...filters, cursor: previous || undefined });
+    };
+    const exportAs = (format) => {
+        const { cursor: _cursor, limit: _limit, ...selection } = filters;
+        exporting.mutate({ filters: selection, format }, {
+            onSuccess: content => {
+                download(content, `mcp-audit-${new Date().toISOString().slice(0, 10)}.${format}`, format === 'csv' ? 'text/csv' : 'application/x-ndjson');
+            },
+            onError: reason => enqueueToast(`Could not export: ${reason.message}`, {
+                variant: 'error',
+            }),
+        });
+    };
+    const retention = useMemo(() => retentionDays
+        ? `Rows are kept for ${retentionDays} days on this plan, then deleted.`
+        : 'Rows are kept for the retention period of this plan, then deleted.', [retentionDays]);
+    if (page.isError) {
+        return (_jsx(McpErrorBlankslate, { state: errorState(page.error, 'Audit'), onRetry: () => page.refetch() }));
+    }
+    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: "Audit" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: ["Every call ", subject, " made through MCP, what was decided, and why."] })] })), forwarding.data?.configured && forwarding.data.state && (_jsx(Flash, { variant: forwarding.data.state.healthy ? 'default' : 'danger', children: _jsx(Text, { sx: { fontSize: 1 }, children: forwarding.data.state.healthy ? (_jsxs(_Fragment, { children: ["Forwarded to your own system of record \u2014", ' ', forwarding.data.state.delivered, " batches", forwarding.data.state.lastDeliveredAt && (_jsxs(_Fragment, { children: [", last", ' ', _jsx(RelativeTime, { datetime: forwarding.data.state.lastDeliveredAt })] })), "."] })) : (_jsxs(_Fragment, { children: [_jsx("strong", { children: "Forwarding is failing." }), " These rows are kept here and are not reaching your own system of record:", ' ', forwarding.data.state.lastError, forwarding.data.state.lastErrorAt && (_jsxs(_Fragment, { children: [' ', "(", _jsx(RelativeTime, { datetime: forwarding.data.state.lastErrorAt }), ")"] })), ". ", forwarding.data.state.failed, " batches have failed."] })) }) })), _jsxs(Box, { sx: {
+                    display: 'grid',
+                    gap: 2,
+                    gridTemplateColumns: ['1fr', 'repeat(2, 1fr)', 'repeat(5, 1fr)'],
+                    alignItems: 'end',
+                }, children: [_jsx(TextInput, { size: "small", "aria-label": "Agent", placeholder: "Agent", value: filters.agent ?? '', onChange: event => set({ agent: event.currentTarget.value || undefined }) }), _jsx(TextInput, { size: "small", "aria-label": "Tool", placeholder: "Tool", value: filters.tool ?? '', onChange: event => set({ tool: event.currentTarget.value || undefined }) }), _jsxs(Select, { size: "small", "aria-label": "Decision", value: filters.decision ?? '', onChange: event => set({
+                            decision: (event.currentTarget.value ||
+                                undefined),
+                        }), children: [_jsx(Select.Option, { value: "", children: "Every decision" }), _jsx(Select.Option, { value: "allowed", children: "Allowed" }), _jsx(Select.Option, { value: "refused", children: "Refused" })] }), _jsxs(Select, { size: "small", "aria-label": "Outcome", value: filters.outcome ?? '', onChange: event => set({
+                            outcome: (event.currentTarget.value ||
+                                undefined),
+                        }), 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: "is_error", children: "Tool error" })] }), _jsx(Box, { sx: { display: 'flex', gap: 2, justifyContent: 'flex-end' }, children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { size: "small", leadingVisual: DownloadIcon, disabled: exporting.isPending, children: "Export" }), _jsx(ActionMenu.Overlay, { align: "end", children: _jsxs(ActionList, { children: [_jsxs(ActionList.Item, { onSelect: () => exportAs('jsonl'), children: ["JSONL", _jsx(ActionList.Description, { variant: "block", children: "One row per line, as a SIEM reads it." })] }), _jsxs(ActionList.Item, { onSelect: () => exportAs('csv'), children: ["CSV", _jsx(ActionList.Description, { variant: "block", children: "The same rows for a spreadsheet." })] })] }) })] }) })] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: ["Audit rows are written once and never changed or deleted by anyone, here or elsewhere. Arguments are redacted before they are written.", ' ', retention] }), page.isPending && !page.data ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 6 }, children: _jsx(Spinner, {}) })) : rows.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(HistoryIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "Nothing to audit yet" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "Every call an agent makes is written down here with its decision and its outcome. Connect a client and ask it to list your notebooks." }) }), _jsx(Button, { size: "small", onClick: () => navigate(routes.access), children: "Connect an agent" })] })) : (
+            /* The rail of the activity view: each mark on a tinted disc, the discs
+               linked by a line, so the rows carry no border of their own. */
+            _jsx(Box, { sx: { display: 'grid' }, children: rows.map((event, index) => {
+                    const look = decisionLook(event);
+                    const isLast = index === rows.length - 1;
+                    return (_jsxs(Box, { sx: { display: 'flex', gap: 3 }, children: [_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    alignItems: 'center',
+                                }, children: [_jsx(Box, { sx: {
+                                            width: 26,
+                                            height: 26,
+                                            borderRadius: '50%',
+                                            display: 'inline-flex',
+                                            alignItems: 'center',
+                                            justifyContent: 'center',
+                                            color: look.fg,
+                                            bg: look.bg,
+                                            flexShrink: 0,
+                                        }, children: _jsx(look.Icon, { size: 13 }) }), !isLast && (_jsx(Box, { sx: { width: '2px', flex: 1, bg: 'border.muted', my: 1 } }))] }), _jsxs(Box, { sx: {
+                                    flexGrow: 1,
+                                    minWidth: 0,
+                                    pb: isLast ? 0 : 3,
+                                    pt: '3px',
+                                }, children: [_jsx(Link, { as: "button", sx: {
+                                            fontSize: 1,
+                                            display: 'block',
+                                            textAlign: 'left',
+                                            cursor: 'pointer',
+                                        }, onClick: () => setOpen(event), children: event.tool || event.method }), _jsxs(Box, { sx: {
+                                            display: 'flex',
+                                            gap: 2,
+                                            alignItems: 'center',
+                                            mt: 1,
+                                            flexWrap: 'wrap',
+                                        }, children: [_jsx(Label, { size: "small", variant: event.decision === 'refused' ? 'danger' : 'success', children: event.decision }), event.clientId && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: event.clientId })), event.itemUid && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["on ", event.itemUid] })), event.durationMs !== null &&
+                                                event.durationMs !== undefined && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: durationLabel(event.durationMs) })), event.refusalReason && (_jsx(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: event.refusalReason }))] })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: _jsx(RelativeTime, { datetime: event.at }) })] }, event.uid));
+                }) })), (walked.length > 0 || nextCursor) && (_jsxs(Box, { sx: { display: 'flex', gap: 2, justifyContent: 'center' }, children: [_jsx(Button, { size: "small", leadingVisual: ChevronLeftIcon, disabled: walked.length === 0, onClick: newer, children: "Newer" }), _jsx(Button, { size: "small", trailingVisual: ChevronRightIcon, disabled: !nextCursor, onClick: older, children: "Older" })] })), open && (_jsx(Dialog, { title: open.tool || open.method, subtitle: `${open.decision} · ${open.outcome ?? 'no outcome recorded'}`, onClose: () => setOpen(null), returnFocusRef: returnFocusRef, width: "large", children: _jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [_jsxs(Box, { sx: { display: 'grid', gap: 1 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "When" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [_jsx(RelativeTime, { datetime: open.at }), " \u2014 ", open.at] })] }), _jsxs(Box, { sx: { display: 'grid', gap: 1 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Who" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [open.clientId || 'unknown client', open.act &&
+                                            open.act.length > 0 &&
+                                            ` acting for ${open.act.join(' → ')}`] })] }), open.refusalReason && (_jsxs(Box, { sx: { display: 'grid', gap: 1 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Why it was refused" }), _jsx(Text, { sx: { fontSize: 1, color: 'danger.fg' }, children: open.refusalReason })] })), _jsxs(Box, { sx: { display: 'grid', gap: 1 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Arguments, redacted before they were written" }), _jsx(Box, { as: "pre", sx: {
+                                        m: 0,
+                                        p: 2,
+                                        fontSize: 0,
+                                        bg: 'canvas.inset',
+                                        borderRadius: 2,
+                                        overflowX: 'auto',
+                                    }, children: JSON.stringify(open.redactedArguments ?? {}, null, 2) }), open.argumentsHash && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle', fontFamily: 'mono' }, children: open.argumentsHash }))] }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [open.taskId && (_jsx(Button, { size: "small", onClick: () => navigate(`${routes.runs}/${encodeURIComponent(open.taskId)}`), children: "The run" })), open.traceId && (_jsx(Button, { size: "small", onClick: () => navigate(`${routes.observability}?trace=${encodeURIComponent(open.traceId)}`), children: "The trace" }))] })] }) }))] }));
+};
+export default AuditLog;

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

@@ -0,0 +1,34 @@
+/**
+ * The agents a person has connected, and the one action that matters:
+ * disconnecting one.
+ *
+ * A grant is not a setting — it is authority a person handed to a piece of
+ * software — so the table says which client holds it, what it was allowed
+ * to do, when it last used it, and how its identity was established. A
+ * client registered by Client ID Metadata Document *is* its URL, and the
+ * URL is what is shown as its id: the host is the part nobody can invent.
+ *
+ * Disconnecting revokes the grant. The refresh token stops working at once
+ * and the next call is refused; an access token the agent still holds dies
+ * with its own short expiry, which is why they are short. The dialog says
+ * so rather than implying an instantaneous kill.
+ *
+ * @module views/mcp/ConnectedAgents
+ */
+import type { JSX } from 'react';
+import { type McpErrorStateFn, type McpRoutes } from './types';
+export interface ConnectedAgentsProps {
+    /** The application's words for a failed request. */
+    errorState: McpErrorStateFn;
+    /** Where this application puts the surfaces this view links to. */
+    routes: McpRoutes;
+    /** Drawn without its heading, when the page around it carries one. */
+    showTitle?: boolean;
+    /**
+     * Read-only: an owner looking at the delegated grants of an
+     * organization's members may see them, and asks the member to revoke.
+     */
+    readOnly?: boolean;
+}
+export declare const ConnectedAgents: ({ errorState, routes, showTitle, readOnly, }: ConnectedAgentsProps) => JSX.Element;
+export default ConnectedAgents;

package/lib/views/mcp/ConnectedAgents.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { ActionList, ActionMenu, Button, Heading, Label, RelativeTime, Spinner, Text, } from '@primer/react';
+import { Blankslate, DataTable, Dialog, Table, } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { KebabHorizontalIcon, PlugIcon } from '@primer/octicons-react';
+import { ClientBadge, McpErrorBlankslate, ScopeList, } from '../../components/mcp/index.js';
+import { useConnectedAgents, useDisconnectAgent } from '../../hooks/useMcp.js';
+import { useNavigate, useToast } from '../../hooks/index.js';
+export const ConnectedAgents = ({ errorState, routes, showTitle = true, readOnly = false, }) => {
+    const navigate = useNavigate();
+    const { enqueueToast } = useToast();
+    const agents = useConnectedAgents();
+    const disconnect = useDisconnectAgent();
+    const [disconnecting, setDisconnecting] = 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);
+    const rows = useMemo(() => (agents.data ?? []).map(agent => ({ ...agent, id: agent.uid })), [agents.data]);
+    const confirmDisconnect = () => {
+        const agent = disconnecting;
+        if (!agent) {
+            return;
+        }
+        disconnect.mutate(agent.uid, {
+            onSuccess: () => {
+                enqueueToast(`${agent.clientName || agent.clientId} is disconnected.`, {
+                    variant: 'success',
+                });
+                setDisconnecting(null);
+            },
+            onError: reason => {
+                enqueueToast(`Could not disconnect: ${reason.message}`, {
+                    variant: 'error',
+                });
+                setDisconnecting(null);
+            },
+        });
+    };
+    const columns = [
+        {
+            header: 'Client',
+            field: 'clientId',
+            rowHeader: true,
+            renderCell: row => (_jsx(ClientBadge, { clientId: row.clientId, clientName: row.clientName, registration: row.registration, clientHostname: row.clientHostname })),
+        },
+        {
+            header: 'Kind',
+            id: 'kind',
+            width: '110px',
+            // Every grant IAM answers here is a delegation of the signed-in
+            // person; an organization's service agents are its own principals and
+            // are listed on the organization's page from milestone 3.
+            renderCell: () => (_jsx(Label, { size: "small", variant: "secondary", children: "Delegated" })),
+        },
+        {
+            header: 'Allowed to',
+            id: 'scopes',
+            width: 'growCollapse',
+            renderCell: row => _jsx(ScopeList, { scopes: row.scopes }),
+        },
+        {
+            header: 'Connected',
+            id: 'created',
+            width: '130px',
+            renderCell: row => row.createdAt ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: _jsx(RelativeTime, { datetime: row.createdAt }) })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "\u2014" })),
+        },
+        {
+            header: 'Last used',
+            id: 'last-used',
+            width: '130px',
+            renderCell: row => row.lastUsedAt ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: _jsx(RelativeTime, { datetime: row.lastUsedAt }) })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Never" })),
+        },
+        {
+            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.runs}?agent=${encodeURIComponent(row.clientId)}`), children: "Runs" }), _jsx(ActionList.Item, { onSelect: () => navigate(`${routes.audit}?agent=${encodeURIComponent(row.clientId)}`), children: "Audit" }), !readOnly && (_jsxs(_Fragment, { children: [_jsx(ActionList.Divider, {}), _jsx(ActionList.Item, { variant: "danger", onSelect: () => setDisconnecting(row), children: "Disconnect" })] }))] }) })] })),
+        },
+    ];
+    if (agents.isError) {
+        return (_jsx(McpErrorBlankslate, { state: errorState(agents.error, 'Connected agents'), onRetry: () => agents.refetch() }));
+    }
+    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: "Connected Agents" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "Every agent you have authorized, what it may do, and when it last did it." })] })), agents.isPending && !agents.data ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 5 }, children: _jsx(Spinner, {}) })) : rows.length > 0 ? (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h3", id: "connected-agents", children: "Agents" }), _jsx(Table.Subtitle, { as: "p", id: "connected-agents-subtitle", children: "An agent acts with exactly the access of the person who authorized it, and no more." }), _jsx(DataTable, { "aria-labelledby": "connected-agents", "aria-describedby": "connected-agents-subtitle", data: rows, columns: columns })] })) : (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(PlugIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "No agent connected" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "Connect an MCP client and approve the scopes it asks for; the grant appears here and can be revoked from here." }) }), _jsx(Button, { size: "small", onClick: () => navigate(routes.access), children: "Connect an agent" })] })), _jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "Narrowing a grant to fewer scopes without disconnecting arrives with the organization policy." }), disconnecting && (_jsx(Dialog, { title: "Disconnect this agent?", 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 and its next call is refused. An access token it still holds dies with its own short expiry. The other agents are untouched, and nothing this one already did is undone."] }) }))] }));
+};
+export default ConnectedAgents;

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

@@ -0,0 +1,74 @@
+/**
+ * One console for an administrator of an organization, rather than four
+ * unrelated settings tabs.
+ *
+ * Every page here is the person's own view of the same Core pieces with the
+ * organization as the scope: the audit page *is* the audit view, the
+ * observability page *is* the observability view. There is one component to
+ * test per surface, and an administrator who has learned the personal page
+ * has learned this one.
+ *
+ * Milestone 1 carried Overview, Agents, Audit and Observability, read-only
+ * over what exists. **Service Agents** joins them in milestone 3, and is the
+ * one page here that *writes*: an organization's own principals, created,
+ * rotated and revoked from it. Teams, Policies, Quotas, Alerts, Approvals
+ * and Runs join as the layers behind them ship; the sub-navigation says so
+ * rather than hiding what is coming.
+ *
+ * Roles: an `organization_owner` sees everything; an
+ * `organization_security_auditor` sees the Overview, the Service Agents,
+ * the Audit and the Observability, which is the directory an auditor asks
+ * for — the service agents because an audit row naming `agent_uid` needs
+ * somewhere to say what that agent is, and the list carries no key; an
+ * `organization_usage_reviewer` sees the Overview. Anyone else is told
+ * plainly that this is not theirs to read.
+ *
+ * The auditor's view of Service Agents is read-only, and the page is told
+ * so rather than working it out: IAM refuses their writes either way, and a
+ * button that exists to be refused is worse than no button.
+ *
+ * @module views/mcp/EnterpriseConsole
+ */
+import type { JSX } from 'react';
+import type { McpAuditFilters } from '../../api/mcp';
+import { type McpObservabilityPane } from './McpObservability';
+import { type McpErrorStateFn, type McpRoutes } from './types';
+/** The pages milestone 1 carries. */
+export type EnterpriseConsolePage = 'overview' | 'usage' | 'agents' | 'service-agents' | 'policy' | 'teams' | 'alerts' | 'audit' | 'observability';
+export declare const ENTERPRISE_CONSOLE_PAGES: {
+    id: EnterpriseConsolePage;
+    label: string;
+}[];
+/** Which pages each organization role may read. */
+export declare const pagesForRoles: (roles: string[]) => EnterpriseConsolePage[];
+export interface EnterpriseConsoleProps {
+    /** The application's words for a failed request. */
+    errorState: McpErrorStateFn;
+    /** Where this application puts the surfaces this view links to. */
+    routes: McpRoutes;
+    /** The organization this console is of. */
+    organization: {
+        uid: string;
+        handle: string;
+        name?: string;
+    };
+    /** The roles the signed-in person holds in this organization. */
+    roles: string[];
+    /** The page open; the address owns it. */
+    page: EnterpriseConsolePage;
+    onPageChange: (page: EnterpriseConsolePage) => void;
+    /** The audit page's filters, as the address holds them. */
+    auditFilters: McpAuditFilters;
+    onAuditFiltersChange: (filters: McpAuditFilters) => void;
+    /** The observability page's selection, likewise. */
+    observabilityPane: McpObservabilityPane;
+    onObservabilityPaneChange: (pane: McpObservabilityPane) => void;
+    observabilityTask?: string;
+    observabilityTrace?: string;
+    onObservabilitySelect: (selection: {
+        task?: string;
+        trace?: string;
+    }) => void;
+}
+export declare const EnterpriseConsole: ({ errorState, routes, organization, roles, page, onPageChange, auditFilters, onAuditFiltersChange, observabilityPane, onObservabilityPaneChange, observabilityTask, observabilityTrace, onObservabilitySelect, }: EnterpriseConsoleProps) => JSX.Element;
+export default EnterpriseConsole;

package/lib/views/mcp/EnterpriseConsole.js

@@ -0,0 +1,173 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Heading, Label, SegmentedControl, Spinner, Text, } from '@primer/react';
+import { Blankslate, DataTable, Table } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { AlertIcon, CheckCircleIcon, LockIcon, PlugIcon, } from '@primer/octicons-react';
+import { ClientBadge, McpErrorBlankslate, ScopeList, } from '../../components/mcp/index.js';
+import { useDisconnectAgent, useMcpActivity, useOrgMcpOverview, } from '../../hooks/useMcp.js';
+import { useNavigate, useToast } from '../../hooks/index.js';
+import { AuditLog } from './AuditLog.js';
+import { McpObservability, } from './McpObservability.js';
+import { AlertRules } from './AlertRules.js';
+import { TeamPolicies } from './TeamPolicies.js';
+import { OrganizationUsage } from './OrganizationUsage.js';
+import { OrganizationPolicy } from './OrganizationPolicy.js';
+import { ServiceAgents } from './ServiceAgents.js';
+import { clientStatusOf, plural, timeAgo } from './format.js';
+export const ENTERPRISE_CONSOLE_PAGES = [
+    { id: 'overview', label: 'Overview' },
+    { id: 'usage', label: 'Usage' },
+    { id: 'agents', label: 'Agents' },
+    { id: 'service-agents', label: 'Service Agents' },
+    { id: 'policy', label: 'Policy' },
+    { id: 'teams', label: 'Teams' },
+    { id: 'alerts', label: 'Alerts' },
+    { id: 'audit', label: 'Audit' },
+    { id: 'observability', label: 'Observability' },
+];
+/** Which pages each organization role may read. */
+export const pagesForRoles = (roles) => {
+    if (roles.includes('organization_owner')) {
+        return [
+            'overview',
+            'usage',
+            'agents',
+            'service-agents',
+            'policy',
+            'teams',
+            'alerts',
+            'audit',
+            'observability',
+        ];
+    }
+    if (roles.includes('organization_security_auditor')) {
+        // The service agents too, read-only: an auditor reading a row that names
+        // `agent_uid` needs somewhere to find out what that agent is, and the
+        // list carries no key.
+        // The policy too, read-only: an auditor asked why a call was refused
+        // needs to see the rule that refused it, and the page carries no secret.
+        return [
+            'overview',
+            'service-agents',
+            'policy',
+            // The team layers too: an auditor asked why one team's agents are
+            // treated differently needs the layer that treats them so.
+            'teams',
+            // The alerts too: what an organization watches for is part of the
+            // security posture an auditor is there to read.
+            'alerts',
+            'audit',
+            'observability',
+        ];
+    }
+    if (roles.includes('organization_usage_reviewer')) {
+        // The page the role is named for. It saw only the Overview, which counts
+        // runs and refusals and says nothing about a limit — a usage reviewer
+        // with no usage page had nothing to review.
+        return ['overview', 'usage'];
+    }
+    return [];
+};
+const Metric = ({ label, value, note, tone = 'neutral', }) => (_jsxs(Box, { sx: {
+        p: 3,
+        border: '1px solid',
+        borderColor: 'border.default',
+        borderRadius: 2,
+        minWidth: 0,
+    }, children: [_jsx(Text, { sx: {
+                display: 'block',
+                fontSize: 4,
+                fontWeight: 'bold',
+                color: tone === 'danger' ? 'danger.fg' : 'fg.default',
+            }, 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 }))] }));
+export const EnterpriseConsole = ({ errorState, routes, organization, roles, page, onPageChange, auditFilters, onAuditFiltersChange, observabilityPane, onObservabilityPaneChange, observabilityTask, observabilityTrace, onObservabilitySelect, }) => {
+    const navigate = useNavigate();
+    const { enqueueToast } = useToast();
+    const allowed = pagesForRoles(roles);
+    const current = allowed.includes(page) ? page : allowed[0];
+    const overview = useOrgMcpOverview(organization.uid, {}, {
+        enabled: Boolean(current) && (current === 'overview' || current === 'agents'),
+    });
+    const activity = useMcpActivity({ org: organization.uid }, { enabled: current === 'agents' });
+    const disconnect = useDisconnectAgent();
+    if (allowed.length === 0) {
+        return (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(LockIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "Unauthorized" }), _jsx(Blankslate.Description, { children: _jsxs(Text, { sx: { textAlign: 'center' }, children: ["The MCP console of an organization is read by its owners, its security auditors and its usage reviewers. Ask an owner of", ' ', organization.name || organization.handle, " for the role you need."] }) })] }));
+    }
+    const agentRows = (activity.data?.clients ?? []).map(client => ({
+        ...client,
+        id: client.clientId,
+    }));
+    const agentColumns = [
+        {
+            header: 'Client',
+            field: 'clientId',
+            rowHeader: true,
+            renderCell: row => (_jsx(ClientBadge, { clientId: row.clientId, clientName: row.clientName })),
+        },
+        {
+            header: 'Member',
+            id: 'member',
+            renderCell: row => (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: row.lastCall?.userUid || '—' })),
+        },
+        {
+            header: 'Allowed to',
+            id: 'scopes',
+            width: 'growCollapse',
+            renderCell: row => _jsx(ScopeList, { scopes: row.scopes ?? [] }),
+        },
+        {
+            header: 'Last used',
+            id: 'last-used',
+            width: '120px',
+            renderCell: row => (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: timeAgo(row.lastCall?.at) || 'Never' })),
+        },
+        {
+            header: 'Status',
+            id: 'status',
+            width: '120px',
+            renderCell: row => {
+                const status = clientStatusOf(row.lastCall?.at);
+                return (_jsx(Label, { size: "small", variant: status === 'active'
+                        ? 'success'
+                        : status === 'idle'
+                            ? 'attention'
+                            : 'secondary', children: status }));
+            },
+        },
+        {
+            header: '',
+            id: 'actions',
+            width: '200px',
+            align: 'end',
+            renderCell: row => (_jsxs(Box, { sx: { display: 'flex', gap: 2, justifyContent: 'flex-end' }, children: [_jsx(Button, { size: "small", onClick: () => navigate(`${routes.audit}?org=${encodeURIComponent(organization.uid)}&agent=${encodeURIComponent(row.clientId)}`), children: "Audit" }), _jsx(Button, { size: "small", variant: "danger", disabled: !row.grantUid, onClick: () => row.grantUid &&
+                            disconnect.mutate(row.grantUid, {
+                                onSuccess: () => enqueueToast(`${row.clientName || row.clientId} is disconnected.`, {
+                                    variant: 'success',
+                                }),
+                                onError: () => enqueueToast('That grant belongs to another member and is revoked by them today. Revoking on their behalf arrives with the organization agent directory.', { variant: 'error' }),
+                            }), children: "Revoke" })] })),
+        },
+    ];
+    return (_jsxs(Box, { sx: { display: 'grid', gap: 4, minWidth: 0 }, children: [_jsxs(Box, { children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2, mb: 1 }, children: ["MCP \u2014 ", organization.name || organization.handle] }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "What the agents of this organization are doing, what they were allowed to do, and how it ran." })] }), _jsx(SegmentedControl, { "aria-label": "MCP console pages", size: "small", children: ENTERPRISE_CONSOLE_PAGES.filter(entry => allowed.includes(entry.id)).map(entry => (_jsx(SegmentedControl.Button, { selected: current === entry.id, onClick: () => onPageChange(entry.id), children: entry.label }, entry.id))) }), current === 'overview' &&
+                (overview.isError ? (_jsx(McpErrorBlankslate, { state: errorState(overview.error, 'The overview'), onRetry: () => overview.refetch() })) : overview.isPending && !overview.data ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 6 }, children: _jsx(Spinner, {}) })) : (_jsxs(Box, { sx: { display: 'grid', gap: 4 }, children: [_jsxs(Box, { sx: {
+                                display: 'grid',
+                                gap: 3,
+                                gridTemplateColumns: [
+                                    'repeat(2, 1fr)',
+                                    'repeat(3, 1fr)',
+                                    'repeat(5, 1fr)',
+                                ],
+                            }, children: [_jsx(Metric, { label: "Agents active today", value: overview.data?.agents.activeToday ?? 0, note: `${overview.data?.agents.delegated ?? 0} delegated · ${overview.data?.agents.service ?? 0} service` }), _jsx(Metric, { label: "Runs today", value: overview.data?.runs.today ?? 0 }), _jsx(Metric, { label: "Success rate", value: overview.data?.runs.successRate === null ||
+                                        overview.data?.runs.successRate === undefined
+                                        ? '—'
+                                        : `${(overview.data.runs.successRate * 100).toFixed(0)}%`, note: `${overview.data?.runs.failed ?? 0} failed` }), _jsx(Metric, { label: "Credits today", value: overview.data?.spend?.creditsToday ?? '—', note: overview.data?.spend?.quotaMonth
+                                        ? `${overview.data.spend.creditsMonth} of ${overview.data.spend.quotaMonth} this month`
+                                        : 'Quotas arrive with the organization policy' }), _jsx(Metric, { label: "Refusals today", value: (overview.data?.refusals ?? []).reduce((sum, row) => sum + row.count, 0), tone: (overview.data?.refusals ?? []).length > 0
+                                        ? 'danger'
+                                        : 'neutral' })] }), (overview.data?.refusals ?? []).length > 0 && (_jsxs(Box, { sx: { display: 'grid', gap: 2 }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1 }, children: "Why calls were refused" }), _jsx(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: (overview.data?.refusals ?? []).map(row => (_jsxs(Label, { size: "small", variant: "danger", children: [row.reason, " \u00B7 ", row.count] }, row.reason))) })] })), _jsxs(Box, { sx: { display: 'grid', gap: 2 }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1 }, children: "Compliance" }), (overview.data?.compliance ?? []).length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Nothing to check yet: the strip fills as the organization's sign-in, admitted clients and audit export are configured." })) : (_jsx(Box, { sx: { display: 'grid', gap: 1 }, children: (overview.data?.compliance ?? []).map(check => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { sx: {
+                                                    color: check.ok ? 'success.fg' : 'attention.fg',
+                                                    display: 'flex',
+                                                }, children: check.ok ? (_jsx(CheckCircleIcon, { size: 14 })) : (_jsx(AlertIcon, { size: 14 })) }), _jsx(Text, { sx: { fontSize: 1 }, children: check.name }), !check.ok && check.detail && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: check.detail }))] }, check.name))) }))] }), _jsxs(Box, { sx: { display: 'flex', gap: 3, flexWrap: 'wrap' }, children: [_jsx(Metric, { label: "Approvals waiting", value: overview.data?.approvalsWaiting ?? '—', note: "The queue arrives with durable execution" }), _jsx(Metric, { label: "Alerts firing", value: overview.data?.alertsFiring ?? '—', note: "Alert rules arrive with quotas" })] })] }))), current === 'usage' && (_jsx(OrganizationUsage, { errorState: errorState, orgUid: organization.uid, showTitle: false })), current === 'teams' && (_jsx(TeamPolicies, { errorState: errorState, orgUid: organization.uid, readOnly: !roles.includes('organization_owner') })), current === 'alerts' && (_jsx(AlertRules, { errorState: errorState, orgUid: organization.uid, readOnly: !roles.includes('organization_owner') })), current === 'policy' && (_jsx(OrganizationPolicy, { errorState: errorState, orgUid: organization.uid, readOnly: !roles.includes('organization_owner') })), current === 'service-agents' && (_jsx(ServiceAgents, { errorState: errorState, orgUid: organization.uid, readOnly: !roles.includes('organization_owner') })), current === 'agents' &&
+                (activity.isError ? (_jsx(McpErrorBlankslate, { state: errorState(activity.error, "The organization's agents"), onRetry: () => activity.refetch() })) : activity.isPending && !activity.data ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 6 }, children: _jsx(Spinner, {}) })) : agentRows.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(PlugIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "No agent acts for this organization" }), _jsx(Blankslate.Description, { children: _jsxs(Text, { sx: { textAlign: 'center' }, children: ["A member who authorizes a client while acting for", ' ', organization.name || organization.handle, " appears here with the scopes the grant carries and what it last did."] }) })] })) : (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h4", id: "org-agents", children: "Agents" }), _jsxs(Table.Subtitle, { as: "p", id: "org-agents-subtitle", children: [plural(agentRows.length, 'principal'), " acting through MCP for this organization. A member's own grant is revoked by that member; revoking on their behalf arrives with the organization's agent directory."] }), _jsx(DataTable, { "aria-labelledby": "org-agents", "aria-describedby": "org-agents-subtitle", data: agentRows, columns: agentColumns })] }))), current === 'audit' && (_jsx(AuditLog, { errorState: errorState, routes: routes, showTitle: false, subject: organization.name || organization.handle, filters: { ...auditFilters, org: organization.uid }, onFiltersChange: filters => onAuditFiltersChange({ ...filters, org: undefined }) })), current === 'observability' && (_jsx(McpObservability, { errorState: errorState, routes: routes, showTitle: false, org: organization.uid, pane: observabilityPane, onPaneChange: onObservabilityPaneChange, taskUid: observabilityTask, traceId: observabilityTrace, onSelect: onObservabilitySelect })), _jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "Teams, Policies, Quotas, Alerts, Approvals and Runs join this console as the layers behind them ship. Identity \u2014 providers, group mapping, SCIM and session controls \u2014 comes last, with enterprise sign-in." })] }));
+};
+export default EnterpriseConsole;

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

@@ -0,0 +1,50 @@
+/**
+ * What the connected MCP clients are doing right now.
+ *
+ * One data call — `GET /api/mcp/v1/activity` — answers the whole page, so
+ * the counts and the four panels can never disagree with each other, and
+ * the home page's cards, which read the same query, can never disagree with
+ * this. It is refetched every ten seconds as the fallback under the
+ * ai-agents websocket, which patches the same cache entry.
+ *
+ * Top: the counts that answer "is anything happening". Then, in the idiom
+ * of the runtimes tables, four panels: the clients with a live grant, the
+ * tasks running, the sandboxes bound and the calls as they land. Each empty
+ * state names the next step rather than saying "nothing here".
+ *
+ * Milestone 1 draws the clients, the sandboxes, the calls and the counts;
+ * the running tasks and the live pane arrive with durable execution in
+ * milestone 2 and say so where they will be.
+ *
+ * @module views/mcp/McpDashboard
+ */
+import type { JSX } from 'react';
+import { type McpErrorStateFn, type McpRoutes } from './types';
+export interface McpDashboardProps {
+    /** The application's words for a failed request. */
+    errorState: McpErrorStateFn;
+    /** Where the surfaces this page links to live. */
+    /** Where this application puts the surfaces this view links to. */
+    routes: McpRoutes;
+    /** An owner's view of one organization, rather than the caller's own. */
+    org?: string;
+    /** Drawn without its heading, when the page around it carries one. */
+    showTitle?: boolean;
+    /**
+     * Which part of the page to draw.
+     *
+     * Required, and there is no "draw everything": the whole thing on one page
+     * was a column of tables and blankslates a reader scrolled past to find
+     * the one they came for. Each part is a tab now, and a caller that has not
+     * decided which one it wants has not decided what it is showing.
+     *
+     * The counts belong to `'overview'` rather than repeating on each tab:
+     * they answer "is anything happening", which is the question somebody has
+     * *before* choosing where to look.
+     */
+    section: McpDashboardSection;
+}
+/** The parts of the dashboard, each its own tab. */
+export type McpDashboardSection = 'overview' | 'agents' | 'runs' | 'sandboxes' | 'calls';
+export declare const McpDashboard: ({ errorState, routes, org, showTitle, section, }: McpDashboardProps) => JSX.Element;
+export default McpDashboard;