@datalayer/core 1.1.60 → 1.2.10

package/lib/views/mcp/EnterpriseConsole.js

@@ -0,0 +1,195 @@
+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 { 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' },
+    { id: 'agents', label: 'Agents' },
+    { 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' },
+];
+/** Which pages each organization role may read. */
+export const pagesForRoles = (roles) => {
+    if (roles.includes('organization_owner')) {
+        return [
+            'overview',
+            'usage',
+            'agents',
+            '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',
+        ];
+    }
+    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',
+            // 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',
+        ];
+    }
+    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 === '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;

package/lib/views/mcp/IdentityProviders.js

@@ -0,0 +1,299 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { ActionList, ActionMenu, Button, Flash, FormControl, Heading, IconButton, Label, Select, Spinner, Text, TextInput, ToggleSwitch, } from '@primer/react';
+import { Blankslate, DataTable, Dialog, Table, } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { KebabHorizontalIcon, KeyIcon, TrashIcon, } from '@primer/octicons-react';
+import { McpErrorBlankslate } from '../../components/mcp/index.js';
+import { useCreateIdentityProvider, useDeleteIdentityProvider, useDomainVerification, useIdentityProviders, useSetIdentityProviderEnabled, useUpdateIdentityProvider, useVerifyDomain, } from '../../hooks/useMcp.js';
+import { useToast } from '../../hooks/index.js';
+import { IdentityProviderInvalid, ORGANIZATION_ROLES, TEAM_ROLES, } from '../../api/iam/identityProviders.js';
+const ROLE_LABELS = {
+    organization_owner: 'Organization owner',
+    organization_security_auditor: 'Organization security auditor',
+    organization_user_reviewer: 'Organization usage reviewer',
+    organization_member: 'Organization member',
+    team_owner: 'Team owner',
+    team_member: 'Team member',
+};
+const roleLabel = (role) => ROLE_LABELS[role] ?? role;
+const isTeamRole = (role) => TEAM_ROLES.includes(role);
+const BLANK = {
+    name: '',
+    protocol: 'oidc',
+    issuer: '',
+    clientId: '',
+    clientSecretRef: '',
+    domains: [],
+    groupClaim: 'groups',
+    allowEmailLinking: false,
+    roleMappings: [],
+    enabled: true,
+};
+const domainsToText = (domains) => domains.join(', ');
+const textToDomains = (text) => Array.from(new Set(text
+    .split(/[,\s]+/)
+    .map(domain => domain.trim().toLowerCase())
+    .filter(Boolean)));
+export const IdentityProviders = ({ errorState, orgUid, readOnly = false, showTitle = true, }) => {
+    const { enqueueToast } = useToast();
+    const providers = useIdentityProviders(orgUid);
+    const create = useCreateIdentityProvider(orgUid);
+    const update = useUpdateIdentityProvider(orgUid);
+    const setEnabled = useSetIdentityProviderEnabled(orgUid);
+    const remove = useDeleteIdentityProvider(orgUid);
+    const domainVerification = useDomainVerification(orgUid);
+    const verifyDomain = useVerifyDomain(orgUid);
+    const [editing, setEditing] = useState(null);
+    const [creating, setCreating] = useState(false);
+    const [draft, setDraft] = useState(BLANK);
+    const [domainsText, setDomainsText] = useState('');
+    const [refusal, setRefusal] = useState('');
+    const [removing, setRemoving] = useState(null);
+    const [managingDomains, setManagingDomains] = 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(() => (providers.data ?? []).map(provider => ({
+        ...provider,
+        id: provider.uid,
+    })), [providers.data]);
+    const openCreate = () => {
+        setDraft(BLANK);
+        setDomainsText('');
+        setRefusal('');
+        setCreating(true);
+    };
+    const openEdit = (provider) => {
+        const { uid: _uid, orgUid: _org, verifiedDomains: _verified, createdBy: _by, createdAt: _c, updatedAt: _u, version: _v, ...rest } = provider;
+        setDraft(rest);
+        setDomainsText(domainsToText(provider.domains));
+        setRefusal('');
+        setEditing(provider);
+    };
+    const close = () => {
+        setCreating(false);
+        setEditing(null);
+        setRefusal('');
+    };
+    const onError = (error) => {
+        if (error instanceof IdentityProviderInvalid) {
+            // The registry's own words, beside the form: it names what is wrong,
+            // and the person can still fix it without guessing.
+            setRefusal(error.message);
+            return;
+        }
+        enqueueToast(`Could not save: ${error.message}`, { variant: 'error' });
+    };
+    const apply = () => {
+        setRefusal('');
+        const domains = textToDomains(domainsText);
+        if (domains.length === 0) {
+            setRefusal('At least one email domain is needed; a provider no domain routes ' +
+                'to is one nobody can sign in through.');
+            return;
+        }
+        const payload = { ...draft, domains };
+        if (editing) {
+            update.mutate({ uid: editing.uid, provider: payload }, {
+                onSuccess: () => {
+                    close();
+                    enqueueToast('Identity provider saved.', { variant: 'success' });
+                },
+                onError,
+            });
+            return;
+        }
+        create.mutate(payload, {
+            onSuccess: () => {
+                close();
+                enqueueToast('Identity provider registered. Verify a domain before anybody ' +
+                    'signs in through it.', { variant: 'success' });
+            },
+            onError,
+        });
+    };
+    /** Switching a provider off leaves its configuration here; only sign-in
+     * through it stops. */
+    const toggle = (provider, enabled) => {
+        setEnabled.mutate({ uid: provider.uid, enabled }, {
+            onError: error => enqueueToast(`Could not change the provider: ${error.message}`, {
+                variant: 'error',
+            }),
+        });
+    };
+    const confirmRemove = () => {
+        const provider = removing;
+        if (!provider) {
+            return;
+        }
+        remove.mutate(provider.uid, {
+            onSuccess: () => {
+                setRemoving(null);
+                enqueueToast('Identity provider removed.', { variant: 'success' });
+            },
+            onError: error => {
+                setRemoving(null);
+                enqueueToast(`Could not remove: ${error.message}`, {
+                    variant: 'error',
+                });
+            },
+        });
+    };
+    const set = (key, value) => setDraft(current => ({ ...current, [key]: value }));
+    const setMapping = (index, patch) => {
+        setDraft(current => ({
+            ...current,
+            roleMappings: current.roleMappings.map((mapping, i) => i === index ? { ...mapping, ...patch } : mapping),
+        }));
+    };
+    const addMapping = () => setDraft(current => ({
+        ...current,
+        roleMappings: [
+            ...current.roleMappings,
+            { group: '', role: 'organization_member', teamUid: '' },
+        ],
+    }));
+    const removeMapping = (index) => setDraft(current => ({
+        ...current,
+        roleMappings: current.roleMappings.filter((_, i) => i !== index),
+    }));
+    const columns = [
+        {
+            header: 'Provider',
+            id: 'name',
+            rowHeader: true,
+            width: 'growCollapse',
+            renderCell: row => (_jsxs(Box, { sx: { display: 'grid' }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: row.name }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: row.issuer })] })),
+        },
+        {
+            header: 'Domains',
+            id: 'domains',
+            width: 'growCollapse',
+            renderCell: row => (_jsxs(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1 }, children: [row.domains.length === 0 && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "none" })), row.domains.map(domain => (_jsxs(Label, { size: "small", variant: row.verifiedDomains.includes(domain) ? 'success' : 'secondary', children: [domain, row.verifiedDomains.includes(domain)
+                                ? ' · verified'
+                                : ' · claimed'] }, domain)))] })),
+        },
+        {
+            header: 'On',
+            id: 'enabled',
+            width: '90px',
+            renderCell: row => (_jsxs(_Fragment, { children: [_jsx(Text, { id: `idp-toggle-${row.uid}`, sx: { display: 'none' }, children: `Sign-in through ${row.name}` }), _jsx(ToggleSwitch, { size: "small", checked: row.enabled, disabled: readOnly || setEnabled.isPending, "aria-labelledby": `idp-toggle-${row.uid}`, onClick: () => toggle(row, !row.enabled) })] })),
+        },
+        {
+            header: '',
+            id: 'actions',
+            width: '48px',
+            align: 'end',
+            renderCell: row => readOnly ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "\u2014" })) : (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { variant: "invisible", size: "small", "aria-label": `Actions for ${row.name}`, icon: KebabHorizontalIcon }) }), _jsx(ActionMenu.Overlay, { align: "end", children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { onSelect: () => openEdit(row), children: "Edit" }), _jsx(ActionList.Item, { onSelect: () => setManagingDomains(row), disabled: row.domains.length === 0, children: "Manage domains" }), _jsx(ActionList.Item, { variant: "danger", onSelect: () => setRemoving(row), children: "Remove" })] }) })] })),
+        },
+    ];
+    if (providers.isError) {
+        return (_jsx(McpErrorBlankslate, { state: errorState(providers.error, 'Identity providers'), onRetry: () => providers.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: "Identity providers" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "The directory this organization signs in through. A domain is claimed the moment it is typed here and routes nothing until it is verified." })] }), !readOnly && (_jsx(Button, { variant: "primary", onClick: openCreate, children: "New provider" }))] })), providers.isPending && !providers.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: "identity-providers", children: "Providers" }), _jsx(Table.Subtitle, { as: "p", id: "identity-providers-subtitle", children: "A provider switched off keeps its configuration and its verified domains; only sign-in through it stops." }), _jsx(DataTable, { "aria-labelledby": "identity-providers", "aria-describedby": "identity-providers-subtitle", data: rows, columns: columns })] })) : (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(KeyIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "No directory registered" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "People here sign in the ordinary way. Register a provider to let them sign in through the directory this organization already has." }) }), !readOnly && (_jsx(Button, { size: "small", onClick: openCreate, children: "New provider" }))] })), (creating || editing) && (_jsx(Dialog, { title: editing ? 'Edit identity provider' : 'New identity provider', onClose: close, returnFocusRef: returnFocusRef, footerButtons: [
+                    { buttonType: 'default', content: 'Cancel', onClick: close },
+                    {
+                        buttonType: 'primary',
+                        content: editing ? 'Save' : 'Register',
+                        onClick: apply,
+                        disabled: create.isPending || update.isPending,
+                    },
+                ], children: _jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [refusal && (_jsx(Flash, { variant: "danger", children: _jsx(Text, { sx: { fontSize: 1 }, children: refusal }) })), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: draft.name, onChange: event => set('name', event.target.value), placeholder: "Acme Okta" }), _jsx(FormControl.Caption, { children: "What an administrator sees in this list." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Issuer" }), _jsx(TextInput, { block: true, value: draft.issuer, onChange: event => set('issuer', event.target.value), placeholder: "https://acme.okta.com" }), _jsx(FormControl.Caption, { children: "Must be https \u2014 discovery, the signing keys and the sign-in redirect all travel over it." })] }), _jsxs(Box, { sx: { display: 'grid', gap: 2, gridTemplateColumns: '1fr 1fr' }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Client ID" }), _jsx(TextInput, { block: true, value: draft.clientId, onChange: event => set('clientId', event.target.value) })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Client secret" }), _jsx(TextInput, { block: true, value: draft.clientSecretRef, onChange: event => set('clientSecretRef', event.target.value), placeholder: "the secret's name, not the secret" }), _jsx(FormControl.Caption, { children: "The name of a secret already in this organization\u2019s store \u2014 never the secret itself." })] })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Email domains" }), _jsx(TextInput, { block: true, value: domainsText, onChange: event => setDomainsText(event.target.value), placeholder: "acme.com, acme.io" }), _jsx(FormControl.Caption, { children: "Comma-separated. Claiming a domain is free and routes nothing \u2014 verify it below once it is registered before anybody can sign in through it." })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Group claim" }), _jsx(TextInput, { block: true, value: draft.groupClaim, onChange: event => set('groupClaim', event.target.value), placeholder: "groups" }), _jsx(FormControl.Caption, { children: "Which claim in the token carries the groups the mapping below reads." })] }), _jsxs(FormControl, { children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(ToggleSwitch, { size: "small", checked: draft.allowEmailLinking, "aria-labelledby": "allow-email-linking-label", onClick: () => set('allowEmailLinking', !draft.allowEmailLinking) }), _jsx(FormControl.Label, { id: "allow-email-linking-label", children: "Adopt an existing account on a verified address" })] }), _jsx(FormControl.Caption, { children: "Off by default: a sign-in whose address already has a Datalayer account is refused rather than signed in as that account, and the person is told to connect the two from a session they already hold. Turn this on only if the smoother rollout is worth it \u2014 the address still has to be on a verified domain, and the provider still has to say it verified it itself." })] }), _jsxs(Box, { children: [_jsxs(Box, { sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        justifyContent: 'space-between',
+                                        mb: 2,
+                                    }, children: [_jsx(FormControl.Label, { children: "Group \u2192 role mapping" }), _jsx(Button, { size: "small", onClick: addMapping, children: "Add mapping" })] }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 0, mb: 2 }, children: "Granted the next time somebody in the group signs in, and never taken back by a sign-in that omits it \u2014 a slow directory sync should not read as a demotion. Reaches no further than this organization and its own teams." }), draft.roleMappings.length === 0 && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "No mapping: everybody who signs in through this provider becomes an organization member and nothing more." })), _jsx(Box, { sx: { display: 'grid', gap: 2 }, children: draft.roleMappings.map((mapping, index) => (_jsxs(Box, { sx: {
+                                            display: 'grid',
+                                            gap: 2,
+                                            gridTemplateColumns: isTeamRole(mapping.role)
+                                                ? '1fr 1fr 1fr auto'
+                                                : '1fr 1fr auto',
+                                            alignItems: 'end',
+                                        }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Group" }), _jsx(TextInput, { block: true, value: mapping.group, onChange: event => setMapping(index, { group: event.target.value }), placeholder: "admins" })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Grants" }), _jsxs(Select, { value: mapping.role, onChange: event => setMapping(index, {
+                                                            role: event.target.value,
+                                                        }), children: [ORGANIZATION_ROLES.map(role => (_jsx(Select.Option, { value: role, children: roleLabel(role) }, role))), TEAM_ROLES.map(role => (_jsx(Select.Option, { value: role, children: roleLabel(role) }, role)))] })] }), isTeamRole(mapping.role) && (_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Team" }), _jsx(TextInput, { block: true, value: mapping.teamUid, onChange: event => setMapping(index, { teamUid: event.target.value }), placeholder: "team uid" })] })), _jsx(IconButton, { icon: TrashIcon, variant: "danger", size: "small", "aria-label": "Remove this mapping", onClick: () => removeMapping(index) })] }, index))) })] })] }) })), managingDomains && (_jsx(DomainVerificationDialog, { provider: managingDomains, orgUid: orgUid, onClose: () => setManagingDomains(null), fetchVerification: domainVerification, verify: verifyDomain })), removing && (_jsx(Dialog, { title: "Remove this identity provider?", onClose: () => setRemoving(null), returnFocusRef: returnFocusRef, footerButtons: [
+                    {
+                        buttonType: 'default',
+                        content: 'Keep it',
+                        onClick: () => setRemoving(null),
+                    },
+                    {
+                        buttonType: 'danger',
+                        content: 'Remove',
+                        onClick: confirmRemove,
+                        disabled: remove.isPending,
+                    },
+                ], children: _jsx(Text, { sx: { fontSize: 1 }, children: "Sign-in through it stops immediately and its domains stop being claimed. If people have used it before, consider turning it off instead \u2014 that keeps its uid resolvable for the sign-in rows that name it." }) }))] }));
+};
+/**
+ * Proving one domain: what to publish, and the button that checks it.
+ *
+ * Kept as its own dialog rather than inline in the edit form, because
+ * proving a domain is not part of editing the provider's configuration —
+ * it is a separate act, done once DNS has actually been changed, and
+ * conflating the two would make "Save" look like it also verifies.
+ */
+const DomainVerificationDialog = ({ provider, onClose, fetchVerification, verify, }) => {
+    const { enqueueToast } = useToast();
+    const [selected, setSelected] = useState(provider.domains[0] ?? '');
+    const [record, setRecord] = useState(null);
+    const [verified, setVerified] = useState(provider.verifiedDomains.includes(selected));
+    const [refusal, setRefusal] = useState('');
+    const returnFocusRef = useRef(null);
+    const load = (domain) => {
+        setSelected(domain);
+        setRecord(null);
+        setRefusal('');
+        fetchVerification.mutate({ uid: provider.uid, domain }, {
+            onSuccess: result => {
+                setRecord(result.verification);
+                setVerified(result.verified);
+            },
+            onError: error => setRefusal(error.message),
+        });
+    };
+    const runVerify = () => {
+        setRefusal('');
+        verify.mutate({ uid: provider.uid, domain: selected }, {
+            onSuccess: updated => {
+                const done = updated.verifiedDomains.includes(selected);
+                setVerified(done);
+                if (done) {
+                    enqueueToast(`${selected} is verified and now routes sign-in.`, {
+                        variant: 'success',
+                    });
+                }
+            },
+            onError: error => {
+                if (error instanceof IdentityProviderInvalid) {
+                    // "No TXT record was found" and the like — the exact reason DNS
+                    // did not check out, worth showing rather than a generic failure.
+                    setRefusal(error.message);
+                    return;
+                }
+                setRefusal(error.message);
+            },
+        });
+    };
+    return (_jsx(Dialog, { title: `Verify a domain for ${provider.name}`, onClose: onClose, returnFocusRef: returnFocusRef, footerButtons: [
+            { buttonType: 'default', content: 'Close', onClick: onClose },
+        ], children: _jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [_jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: "Publish the record below at your DNS provider, then check it here. Until it checks out, this domain routes no sign-in \u2014 a claim is not proof." }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Domain" }), _jsx(Select, { value: selected, onChange: event => load(event.target.value), children: provider.domains.map(domain => (_jsxs(Select.Option, { value: domain, children: [domain, provider.verifiedDomains.includes(domain) ? ' — verified' : ''] }, domain))) })] }), refusal && (_jsx(Flash, { variant: "danger", children: _jsx(Text, { sx: { fontSize: 1 }, children: refusal }) })), fetchVerification.isPending ? (_jsx(Spinner, { size: "small" })) : record ? (_jsxs(Box, { sx: {
+                        display: 'grid',
+                        gap: 1,
+                        p: 2,
+                        border: '1px solid',
+                        borderColor: 'border.default',
+                        borderRadius: 2,
+                        fontFamily: 'mono',
+                        fontSize: 0,
+                    }, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Type: ", record.type] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Host: ", record.host] }), _jsxs(Text, { sx: { fontSize: 0, wordBreak: 'break-all' }, children: ["Value: ", record.value] })] })) : (_jsx(Button, { size: "small", onClick: () => load(selected), children: "Show what to publish" })), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Label, { variant: verified ? 'success' : 'secondary', children: verified ? 'Verified — routes sign-in' : 'Not yet verified' }), !verified && (_jsx(Button, { variant: "primary", size: "small", onClick: runVerify, disabled: verify.isPending || !selected, children: verify.isPending ? 'Checking…' : 'Check DNS now' }))] })] }) }));
+};
+export default IdentityProviders;

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;