@datalayer/core 1.1.60 → 1.2.10

package/lib/views/mcp/ApprovalQueue.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Heading, Label, RelativeTime, SegmentedControl, Spinner, Text, Textarea, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { McpErrorBlankslate } from '../../components/mcp/index.js';
+import { useDecideMcpApproval, useMcpApprovals, } from '../../hooks/useContents.js';
+/** How each state of an approval is drawn. */
+export const APPROVAL_LOOK = {
+    pending: { label: 'Waiting on you', variant: 'attention' },
+    approved: { label: 'Approved', variant: 'success' },
+    rejected: { label: 'Rejected', variant: 'danger' },
+    expired: { label: 'Expired', variant: 'secondary' },
+    consumed: { label: 'Used', variant: 'secondary' },
+};
+/**
+ * Whether this approval can still be decided.
+ *
+ * Two conditions, and the second is the one that matters: the record says
+ * `pending`, *and* its deadline has not passed. Contents expires an approval
+ * when something next reads it rather than on a timer, so a row fetched a
+ * minute ago can be `pending` and over. Trusting the status alone would draw
+ * buttons whose only outcome is an error.
+ *
+ * An unparseable deadline is treated as passed. That is the safe direction:
+ * the worst case is somebody has to ask the agent to try again, where the
+ * other way round is a decision taken on a record nobody can date.
+ */
+export const isDecidable = (approval, now = Date.now()) => {
+    if (approval.status !== 'pending') {
+        return false;
+    }
+    const deadline = Date.parse(approval.expiresAt);
+    return Number.isFinite(deadline) && deadline > now;
+};
+/**
+ * What a row says about its own deadline.
+ *
+ * A pending approval that has run out is drawn as expired even though the
+ * record still says pending — the reader's question is "can I still act on
+ * this", and the record's answer to that is stale by construction.
+ */
+export const approvalLook = (approval, now = Date.now()) => approval.status === 'pending' && !isDecidable(approval, now)
+    ? APPROVAL_LOOK.expired
+    : APPROVAL_LOOK[approval.status];
+/** The states this page can be filtered to. `pending` is what it opens on. */
+export const APPROVAL_FILTERS = [
+    'pending',
+    'approved',
+    'rejected',
+];
+export const ApprovalQueue = ({ errorState, sourceUid, }) => {
+    const [status, setStatus] = useState('pending');
+    const [noteFor, setNoteFor] = useState({});
+    const approvals = useMcpApprovals(status, sourceUid ? { sourceUid } : {});
+    const decide = useDecideMcpApproval();
+    const items = approvals.data?.items ?? [];
+    return (_jsxs(Box, { sx: { display: 'grid', gap: 3, minWidth: 0 }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 1 }, children: "Approvals" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: "A source set to require approval stops each call until you allow it. An approval covers the exact arguments below and nothing else, so a second call with different arguments asks again." })] }), _jsx(SegmentedControl, { "aria-label": "Which approvals", size: "small", children: APPROVAL_FILTERS.map(state => (_jsx(SegmentedControl.Button, { selected: status === state, onClick: () => setStatus(state), children: APPROVAL_LOOK[state].label }, state))) }), approvals.isError ? (_jsx(McpErrorBlankslate, { state: errorState(approvals.error, 'The approvals'), onRetry: () => approvals.refetch() })) : approvals.isPending ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 5 }, children: _jsx(Spinner, {}) })) : items.length === 0 ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: status === 'pending'
+                    ? 'Nothing is waiting on you.'
+                    : `No ${APPROVAL_LOOK[status].label.toLowerCase()} approvals.` })) : (items.map(approval => {
+                const look = approvalLook(approval);
+                const decidable = isDecidable(approval);
+                return (_jsxs(Box, { sx: {
+                        border: '1px solid',
+                        borderColor: decidable ? 'attention.emphasis' : 'border.default',
+                        borderRadius: 2,
+                        p: 3,
+                        display: 'grid',
+                        gap: 2,
+                        minWidth: 0,
+                    }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(Label, { size: "small", variant: look.variant, children: look.label }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: approval.tool }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontFamily: 'mono' }, children: approval.actorUid }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["asked ", _jsx(RelativeTime, { datetime: approval.createdAt })] }), decidable && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["expires ", _jsx(RelativeTime, { datetime: approval.expiresAt })] }))] }), _jsx(Box, { as: "pre", sx: {
+                                fontFamily: 'mono',
+                                fontSize: 0,
+                                whiteSpace: 'pre-wrap',
+                                overflowX: 'auto',
+                                bg: 'canvas.subtle',
+                                borderRadius: 2,
+                                p: 2,
+                                m: 0,
+                            }, children: JSON.stringify(approval.argumentsRedacted, null, 2) }), approval.destinationUri && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Writes to", ' ', _jsx(Text, { as: "span", sx: { fontFamily: 'mono' }, children: approval.destinationUri })] })), decidable ? (_jsxs(_Fragment, { children: [_jsx(Textarea, { "aria-label": `Why, for ${approval.tool}`, rows: 2, placeholder: "Why (optional; kept with the decision)", value: noteFor[approval.uid] ?? '', onChange: event => setNoteFor(current => ({
+                                        ...current,
+                                        [approval.uid]: event.target.value,
+                                    })) }), _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Button, { variant: "primary", disabled: decide.isPending, onClick: () => decide.mutate({
+                                                approvalUid: approval.uid,
+                                                decision: 'approve',
+                                                note: noteFor[approval.uid] || undefined,
+                                            }), children: "Allow this call" }), _jsx(Button, { variant: "danger", disabled: decide.isPending, onClick: () => decide.mutate({
+                                                approvalUid: approval.uid,
+                                                decision: 'reject',
+                                                note: noteFor[approval.uid] || undefined,
+                                            }), children: "Refuse" })] })] })) : (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [approval.decidedBy
+                                    ? `Decided by ${approval.decidedBy}`
+                                    : 'This request ran out before anybody decided it. The agent has to ask again.', approval.note ? ` — ${approval.note}` : ''] }))] }, approval.uid));
+            }))] }));
+};
+export default ApprovalQueue;

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

@@ -0,0 +1,42 @@
+/**
+ * Who did what, and was it allowed.
+ *
+ * The audit log is the trail an auditor reads, so it is drawn as the
+ * activity timeline is — newest first, one mark per row, the decision on
+ * the mark — rather than as a grid of identifiers. The filters live in the
+ * address, which is what makes a row's page shareable, and the page is
+ * cursor-paged: an audit query is bounded at the service, and a page number
+ * over an append-only collection would be a different set of rows every
+ * time it was asked for.
+ *
+ * Rows are immutable. This view never offers to edit or delete one, and it
+ * never shows an argument in clear — arguments are hashed and redacted with
+ * the Contents rules before they reach the row.
+ *
+ * Audit is not telemetry: a row carries the trace id so one call can be
+ * followed into the traces, and the traces say so about themselves on the
+ * observability page.
+ *
+ * @module views/mcp/AuditLog
+ */
+import type { JSX } from 'react';
+import type { McpAuditFilters } from '../../api/mcp';
+import { type McpErrorStateFn, type McpRoutes } from './types';
+export interface AuditLogProps {
+    /** The application's words for a failed request. */
+    errorState: McpErrorStateFn;
+    /** Where this application puts the surfaces this view links to. */
+    routes: McpRoutes;
+    /** The filters, exactly as the address holds them. */
+    filters: McpAuditFilters;
+    /** Asked to write a new set of filters into the address. */
+    onFiltersChange: (filters: McpAuditFilters) => void;
+    /** How long rows are kept on this account's plan, when it is known. */
+    retentionDays?: number;
+    /** Drawn without its heading, when the page around it carries one. */
+    showTitle?: boolean;
+    /** What this log is of: "your agents", "acme". */
+    subject?: string;
+}
+export declare const AuditLog: ({ errorState, routes, filters, onFiltersChange, retentionDays, showTitle, subject, }: AuditLogProps) => JSX.Element;
+export default AuditLog;

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,135 @@
+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, useDisconnectEveryAgent, } 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 disconnectEvery = useDisconnectEveryAgent();
+    const [disconnecting, setDisconnecting] = useState(null);
+    const [disconnectingEvery, setDisconnectingEvery] = useState(false);
+    // 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 confirmDisconnectEvery = () => {
+        disconnectEvery.mutate(undefined, {
+            onSuccess: answer => {
+                enqueueToast(answer.revoked === 1
+                    ? '1 agent disconnected.'
+                    : `${answer.revoked} agents disconnected.`, { variant: 'success' });
+                setDisconnectingEvery(false);
+            },
+            onError: error => {
+                setDisconnectingEvery(false);
+                enqueueToast(`Could not disconnect: ${error.message}`, {
+                    variant: 'error',
+                });
+            },
+        });
+    };
+    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, { sx: {
+                    display: 'flex',
+                    alignItems: 'start',
+                    justifyContent: 'space-between',
+                    gap: 3,
+                }, children: [_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." })] }), !readOnly && rows.length > 0 && (_jsx(Button, { variant: "danger", onClick: () => setDisconnectingEvery(true), disabled: disconnectEvery.isPending, children: "Disconnect all" }))] })), 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."] }) })), disconnectingEvery && (_jsxs(Dialog, { title: "Disconnect every agent?", onClose: () => setDisconnectingEvery(false), returnFocusRef: returnFocusRef, footerButtons: [
+                    {
+                        buttonType: 'default',
+                        content: 'Keep them',
+                        onClick: () => setDisconnectingEvery(false),
+                    },
+                    {
+                        buttonType: 'danger',
+                        content: 'Disconnect all',
+                        onClick: confirmDisconnectEvery,
+                        disabled: disconnectEvery.isPending,
+                    },
+                ], children: [_jsx(Text, { sx: { fontSize: 1 }, children: "Every agent you have authorized loses its grant at once \u2014 signing out everywhere. Each will ask again the next time you connect it, and this time it goes through the approval screen rather than being answered from what you agreed before, so this is also how you force a fresh approval." }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', mt: 2, mb: 0 }, children: "Yours only. Nobody else\u2019s sessions end, in this organization or any other, and nothing any agent 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' | 'identity-providers' | 'alerts' | 'approvals' | '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;