@datalayer/core 1.1.66 → 1.2.10

package/lib/utils/Screencapture.js

@@ -7,6 +7,9 @@ export const takeHTMLNodeScreencapture = async (node) => {
     const sc = html2canvas(node, {
         width: node.getBoundingClientRect().width,
         height: node.getBoundingClientRect().height,
+        // Cross-origin pictures are otherwise left out and their space kept, so a
+        // cell carrying an `<img>` from the web captures as a blank rectangle.
+        useCORS: true,
     });
     return sc.then(canvas => {
         const croppedCanvas = document.createElement('canvas');

package/lib/utils/WithSuspense.d.ts

@@ -1,2 +1,12 @@
-export declare const WithSuspense: (Component: any, preload?: boolean, skeleton?: boolean) => (props: any) => import("react").JSX.Element;
+import { type ReactNode } from 'react';
+/**
+ * A lazily-loaded route, with something to look at while it arrives.
+ *
+ * `skeleton` was a boolean between one grey box and **nothing at all**, and
+ * nothing was the default — so every route in the application showed a blank
+ * page for as long as its chunk took, which for an editor is seconds. It now
+ * also takes a node, so a route can hand over a drawing of the thing that is
+ * coming rather than a hole where it will be.
+ */
+export declare const WithSuspense: (Component: any, preload?: boolean, skeleton?: boolean | ReactNode) => (props: any) => import("react").JSX.Element;
 export default WithSuspense;

package/lib/utils/WithSuspense.js

@@ -9,10 +9,20 @@ const Loading = (props) => {
     const { skeleton } = props;
     return skeleton ? (_jsx(_Fragment, { children: _jsx(SkeletonBox, { height: "100px" }) })) : (_jsx(_Fragment, {}));
 };
+/**
+ * A lazily-loaded route, with something to look at while it arrives.
+ *
+ * `skeleton` was a boolean between one grey box and **nothing at all**, and
+ * nothing was the default — so every route in the application showed a blank
+ * page for as long as its chunk took, which for an editor is seconds. It now
+ * also takes a node, so a route can hand over a drawing of the thing that is
+ * coming rather than a hole where it will be.
+ */
 export const WithSuspense = (Component, preload = true, skeleton = false) => (props) => {
     if (preload) {
         Component.preload();
     }
-    return (_jsx(Suspense, { fallback: _jsx(Loading, { skeleton: skeleton }), children: _jsx(Component, { ...props }) }));
+    const fallback = typeof skeleton === 'boolean' ? (_jsx(Loading, { skeleton: skeleton })) : (skeleton);
+    return (_jsx(Suspense, { fallback: fallback, children: _jsx(Component, { ...props }) }));
 };
 export default WithSuspense;

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

@@ -0,0 +1,44 @@
+/**
+ * What the admitted-clients list actually admits.
+ *
+ * The field above it is a textarea of client ids, because that is what they
+ * are: a client id is a URL somebody pastes, and there is nothing to pick
+ * from. What a textarea cannot do is tell whoever typed it whether an entry
+ * resolves — and this is the one policy rule whose typo fails silently in
+ * the direction that matters. A misspelled entry does not refuse anything
+ * loudly; it never matches, and every agent from that vendor is turned away
+ * with "your organization does not admit this client", which reads to its
+ * owner as a decision somebody made on purpose.
+ *
+ * So each stored entry is shown with what it names. Three states, and the
+ * reason this is a component rather than a line of text is that collapsing
+ * any two of them misleads:
+ *
+ * * a **hostname** admits every client that host publishes. There is no
+ *   document and none is expected — shown as unresolved it would send
+ *   somebody chasing a fetch that was never going to happen.
+ * * a **document that resolves**, with the name and publishing host.
+ * * a **document that does not**, with the reason. The state the whole
+ *   thing is for.
+ *
+ * **It describes what is stored, not the draft.** Resolving on every
+ * keystroke would make a textarea a source of outbound requests, so this
+ * goes stale while somebody edits and says so rather than pretending to
+ * describe a line that has not been saved.
+ *
+ * @module views/mcp/AdmittedClients
+ */
+import type { JSX } from 'react';
+import type { McpPolicyScope } from '../../api/iam/mcpPolicy';
+export interface AdmittedClientsProps {
+    scope: McpPolicyScope;
+    subjectUid: string;
+    /**
+     * Whether the textarea above differs from what is stored. The entries
+     * below describe the *stored* list, and saying so is the difference
+     * between a stale panel and a wrong one.
+     */
+    edited?: boolean;
+}
+export declare const AdmittedClients: ({ scope, subjectUid, edited, }: AdmittedClientsProps) => JSX.Element | null;
+export default AdmittedClients;

package/lib/views/mcp/AdmittedClients.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label, Link, Spinner, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { AlertIcon, CheckCircleIcon, GlobeIcon, QuestionIcon, } from '@primer/octicons-react';
+import { useAdmittedClients } from '../../hooks/useMcp.js';
+const Row = ({ client }) => {
+    const unreadable = client.kind === 'url' && client.resolved === false;
+    const unusable = client.kind === 'unusable';
+    const icon = unusable ? (_jsx(QuestionIcon, {})) : unreadable ? (_jsx(AlertIcon, {})) : client.kind === 'hostname' ? (_jsx(GlobeIcon, {})) : (_jsx(CheckCircleIcon, {}));
+    const tone = unusable || unreadable ? 'danger.fg' : 'fg.muted';
+    return (_jsxs(Box, { sx: {
+            display: 'grid',
+            gridTemplateColumns: 'auto 1fr',
+            gap: 2,
+            alignItems: 'start',
+            py: 2,
+            borderTop: '1px solid',
+            borderColor: 'border.muted',
+        }, children: [_jsx(Box, { sx: { color: tone, pt: '2px' }, children: icon }), _jsxs(Box, { sx: { display: 'grid', gap: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            gap: 2,
+                            alignItems: 'center',
+                            flexWrap: 'wrap',
+                        }, children: [client.clientName && (_jsx(Text, { sx: { fontWeight: 'semibold' }, children: client.clientName })), client.kind === 'hostname' && (_jsx(Label, { variant: "accent", size: "small", children: "Whole host" })), client.localhostOnly && (
+                            // Worth a label of its own: every redirect goes to the reader's
+                            // own machine, and a document cannot prove which local program
+                            // is listening on the port.
+                            _jsx(Label, { variant: "attention", size: "small", children: "Redirects to localhost" })), unreadable && (_jsx(Label, { variant: "danger", size: "small", children: "Cannot be read" })), unusable && (_jsx(Label, { variant: "danger", size: "small", children: "Matches nothing" }))] }), _jsx(Text, { sx: {
+                            fontSize: 0,
+                            fontFamily: 'mono',
+                            color: 'fg.muted',
+                            overflowWrap: 'anywhere',
+                        }, children: client.entry }), client.detail && (_jsx(Text, { sx: { fontSize: 0, color: tone }, children: client.detail })), client.clientUri && (_jsx(Link, { href: client.clientUri, target: "_blank", rel: "noreferrer noopener", sx: { fontSize: 0 }, children: client.clientHostname || client.clientUri }))] })] }));
+};
+export const AdmittedClients = ({ scope, subjectUid, edited = false, }) => {
+    const described = useAdmittedClients(scope, subjectUid);
+    if (described.isPending && !described.data) {
+        return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 3 }, children: _jsx(Spinner, { size: "small" }) }));
+    }
+    // An error here is not worth a blankslate: the field above still works and
+    // the policy is unaffected. Saying nothing would be worse than saying it
+    // could not be checked, so it says that and stays out of the way.
+    if (described.isError) {
+        return (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "The admitted clients could not be described just now. The list above is still what is enforced." }));
+    }
+    const answer = described.data;
+    if (!answer) {
+        return null;
+    }
+    if (!answer.allowlisted) {
+        // Said, not rendered as an empty list. An empty allowlist is not an
+        // allowlist, and "no clients admitted" would be the opposite of what
+        // the gateway does with a blank one.
+        return (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: answer.detail ??
+                'This layer names no client allowlist, so every client is admitted by it.' }));
+    }
+    return (_jsxs(Box, { sx: { display: 'grid', gap: 1 }, children: [edited && (_jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'attention.fg', m: 0 }, children: ["Describing the ", _jsx("strong", { children: "saved" }), " list. Save to check what you have just typed."] })), answer.clients.map(client => (_jsx(Row, { client: client }, client.entry)))] }));
+};
+export default AdmittedClients;

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

@@ -0,0 +1,66 @@
+/**
+ * The calls an agent cannot make without somebody saying yes.
+ *
+ * A source set to `explicit` stops every call it does not already hold an
+ * approval for. The call waits as `pending-approval`, and the person who
+ * owns the source is the only one who can move it — which means that until
+ * this page existed, "approval required" was a setting that stopped agents
+ * and gave nobody a way to unstop them.
+ *
+ * **An approval is bound to the arguments it was asked about.** Contents
+ * hashes them and re-checks the hash when the call runs, so approving is
+ * approving *those* arguments and not that tool in general. That is why the
+ * redacted arguments are drawn in full rather than summarised: a reader who
+ * cannot see what they are allowing is a reader who approves everything.
+ *
+ * **A pending approval that has expired is not decidable**, and the buttons
+ * go rather than fail. Contents expires them lazily — the record still says
+ * `pending` until something looks at it — so a row can arrive here already
+ * over, and offering an Approve button on it would be offering a decision
+ * the server will refuse.
+ *
+ * @module views/mcp/ApprovalQueue
+ */
+import type { JSX } from 'react';
+import type { McpApproval } from '../../api/contents/generated';
+import { type McpErrorStateFn } from './types';
+/** How each state of an approval is drawn. */
+export declare const APPROVAL_LOOK: Record<McpApproval['status'], {
+    label: string;
+    variant: 'attention' | 'success' | 'danger' | '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 declare const isDecidable: (approval: Pick<McpApproval, "status" | "expiresAt">, now?: number) => boolean;
+/**
+ * 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 declare const approvalLook: (approval: Pick<McpApproval, "status" | "expiresAt">, now?: number) => {
+    label: string;
+    variant: "attention" | "success" | "danger" | "secondary";
+};
+/** The states this page can be filtered to. `pending` is what it opens on. */
+export declare const APPROVAL_FILTERS: McpApproval['status'][];
+export interface ApprovalQueueProps {
+    /** The application's words for a failed request. */
+    errorState: McpErrorStateFn;
+    /** Only the approvals of one source, when the caller has one in mind. */
+    sourceUid?: string;
+}
+export declare const ApprovalQueue: ({ errorState, sourceUid, }: ApprovalQueueProps) => JSX.Element;
+export default ApprovalQueue;

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/ConnectedAgents.js

@@ -5,19 +5,37 @@ import { Blankslate, DataTable, Dialog, Table, } from '@primer/react/experimenta
 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 { 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) {
@@ -83,7 +101,12 @@ export const ConnectedAgents = ({ errorState, routes, showTitle = true, readOnly
     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: [
+    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',
@@ -95,6 +118,18 @@ export const ConnectedAgents = ({ errorState, routes, showTitle = true, readOnly
                         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."] }) }))] }));
+                ], 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

@@ -34,7 +34,7 @@ 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 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;

package/lib/views/mcp/EnterpriseConsole.js

@@ -9,11 +9,14 @@ import { useNavigate, useToast } from '../../hooks/index.js';
 import { AuditLog } from './AuditLog.js';
 import { McpObservability, } from './McpObservability.js';
 import { AlertRules } from './AlertRules.js';
+import { IdentityProviders } from './IdentityProviders.js';
+import { ScimProvisioning } from './ScimProvisioning.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';
+import { ApprovalQueue } from './ApprovalQueue.js';
 export const ENTERPRISE_CONSOLE_PAGES = [
     { id: 'overview', label: 'Overview' },
     { id: 'usage', label: 'Usage' },
@@ -21,7 +24,9 @@ export const ENTERPRISE_CONSOLE_PAGES = [
     { id: 'service-agents', label: 'Service Agents' },
     { id: 'policy', label: 'Policy' },
     { id: 'teams', label: 'Teams' },
+    { id: 'identity-providers', label: 'Identity' },
     { id: 'alerts', label: 'Alerts' },
+    { id: 'approvals', label: 'Approvals' },
     { id: 'audit', label: 'Audit' },
     { id: 'observability', label: 'Observability' },
 ];
@@ -35,7 +40,12 @@ export const pagesForRoles = (roles) => {
             'service-agents',
             'policy',
             'teams',
+            // Who may sign in here at all, and as what, is the organization's own
+            // authority — the same reason a provider needs an owner to register,
+            // never a security auditor or a usage reviewer.
+            'identity-providers',
             'alerts',
+            'approvals',
             'audit',
             'observability',
         ];
@@ -53,9 +63,21 @@ export const pagesForRoles = (roles) => {
             // The team layers too: an auditor asked why one team's agents are
             // treated differently needs the layer that treats them so.
             'teams',
+            // Identity providers too, read-only: which directory an organization
+            // trusts and what its group mapping grants is exactly the posture an
+            // auditor is there to read, and the page carries no secret — the
+            // client secret is a reference, never the value.
+            'identity-providers',
             // The alerts too: what an organization watches for is part of the
             // security posture an auditor is there to read.
             'alerts',
+            // The approvals are deliberately NOT here. Contents scopes
+            // `/mcp-approvals` to the caller — the actor, or the person who owns
+            // the source and must decide — so an auditor would open a queue of
+            // their own approvals under an organization's console and read it as
+            // that organization having none. An empty table that looks like an
+            // answer is worse than no tab. What an auditor needs is the decision
+            // *after* it was taken, and that is an audit row.
             'audit',
             'observability',
         ];
@@ -167,7 +189,7 @@ export const EnterpriseConsole = ({ errorState, routes, organization, roles, pag
                                         : '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' &&
+                                                }, 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 === 'identity-providers' && (_jsxs(Box, { sx: { display: 'grid', gap: 5, minWidth: 0 }, children: [_jsx(IdentityProviders, { errorState: errorState, orgUid: organization.uid, readOnly: !roles.includes('organization_owner') }), _jsx(ScimProvisioning, { 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 === 'approvals' && _jsx(ApprovalQueue, { errorState: errorState }), 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/IdentityProviders.d.ts

@@ -0,0 +1,33 @@
+/**
+ * An organization's own identity provider.
+ *
+ * Enterprise sign-in used to be one Okta for the whole deployment. Here an
+ * organization registers the directory it already has — issuer, client id,
+ * the email domains it claims — and a sign-in with an address at one of
+ * those domains is routed to it.
+ *
+ * **A claim is not proof, and this page is careful to say so.** A domain
+ * just typed in and one proved by DNS are shown differently on purpose: a
+ * grey "claimed" label beside a domain that routes nothing yet, a green
+ * "verified" one beside a domain that does. Collapsing the two into one list
+ * would let an owner believe a claim is already live when it is not — and
+ * until it is verified, nobody signs in through it at all.
+ *
+ * **The client secret never appears here**, only its name in the
+ * organization's own secret store. This page has no field that could render
+ * one, by construction rather than by care taken while writing it.
+ *
+ * @module views/mcp/IdentityProviders
+ */
+import type { JSX } from 'react';
+import type { McpErrorStateFn } from './types';
+export interface IdentityProvidersProps {
+    errorState: McpErrorStateFn;
+    orgUid: string;
+    /** Read-only for anybody who is not an owner: registering a provider
+     * decides who may get into the organization at all. */
+    readOnly?: boolean;
+    showTitle?: boolean;
+}
+export declare const IdentityProviders: ({ errorState, orgUid, readOnly, showTitle, }: IdentityProvidersProps) => JSX.Element;
+export default IdentityProviders;