@datalayer/core 1.1.60 → 1.1.66

package/lib/views/mcp/PolicyHistory.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Label, RelativeTime, Spinner, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { useAuditEvents } from '../../hooks/useMcp.js';
+/** The methods IAM writes when a policy layer is written or removed. */
+export const POLICY_AUDIT_METHODS = [
+    'mcp.policy.set',
+    'mcp.policy.remove',
+];
+/** What one row says about a change, in the words of the page it is on. */
+export const describeChange = (event) => {
+    const info = (event.clientInfo ?? {});
+    const scope = String(info.scope ?? '');
+    const rules = String(info.rules ?? '');
+    if (event.method === 'mcp.policy.remove') {
+        return `removed the ${scope || 'policy'} layer`;
+    }
+    if (rules && rules !== '(none)') {
+        return `set ${rules.split(',').join(', ')}`;
+    }
+    // A layer written with no rules narrows nothing. Saying "set (none)" would
+    // read as a failure; saying what it means is the point of the row.
+    return 'set a layer that narrows nothing';
+};
+export const PolicyHistory = ({ orgUid, subjectUid, limit = 20, }) => {
+    // Both methods in one read: two queries would page independently and
+    // interleave wrongly, showing a removal before the set that preceded it.
+    const events = useAuditEvents({ org: orgUid, method: POLICY_AUDIT_METHODS[0], limit }, { enabled: Boolean(orgUid) });
+    const removals = useAuditEvents({ org: orgUid, method: POLICY_AUDIT_METHODS[1], limit }, { enabled: Boolean(orgUid) });
+    const rows = useMemo(() => {
+        const all = [
+            ...(events.data?.items ?? []),
+            ...(removals.data?.items ?? []),
+        ];
+        const mine = subjectUid
+            ? all.filter(event => String(event.clientInfo?.subject_uid ?? '') === subjectUid)
+            : all;
+        // Newest first, merged across the two reads.
+        return mine
+            .slice()
+            .sort((a, b) => (a.at < b.at ? 1 : a.at > b.at ? -1 : 0))
+            .slice(0, limit);
+    }, [events.data, removals.data, subjectUid, limit]);
+    if ((events.isPending || removals.isPending) && rows.length === 0) {
+        return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 3 }, children: _jsx(Spinner, { size: "small" }) }));
+    }
+    if (events.isError || removals.isError) {
+        return (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "The history could not be read. The policy above is unaffected." }));
+    }
+    if (rows.length === 0) {
+        return (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "No recorded change. Either this layer has not been edited, or this deployment routes identity records to a log pipeline rather than to the audit \u2014 an administrator can tell you which." }));
+    }
+    return (_jsx(Box, { sx: { display: 'grid', gap: 2 }, children: rows.map(event => (_jsxs(Box, { sx: {
+                display: 'flex',
+                gap: 2,
+                alignItems: 'baseline',
+                flexWrap: 'wrap',
+                fontSize: 0,
+            }, children: [_jsx(Text, { sx: { color: 'fg.muted', whiteSpace: 'nowrap' }, children: _jsx(RelativeTime, { datetime: event.at }) }), _jsx(Text, { sx: { fontWeight: 'semibold' }, children: event.userUid || 'unknown' }), _jsx(Text, { children: describeChange(event) }), String(event.clientInfo?.version ?? '') && (_jsxs(Label, { size: "small", variant: "secondary", children: ["v", String(event.clientInfo?.version ?? '')] }))] }, event.uid))) }));
+};
+export default PolicyHistory;

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

@@ -0,0 +1,46 @@
+/**
+ * The organization's service agents: principals rather than proxies.
+ *
+ * The Agents page next door lists *grants* — somebody's authority narrowed
+ * to one client, dying with their account. This page lists the other kind:
+ * an agent that belongs to the organization, holds its own key, spends
+ * under its own name and outlives whoever set it up. An organization whose
+ * nightly pipeline runs on an engineer's grant loses the pipeline when the
+ * engineer leaves, and its spend shows against somebody who was asleep.
+ *
+ * Three things this page has to get right, all of them about the key:
+ *
+ * **It is shown once**, in the dialog that creates or rotates it, and the
+ * dialog says so before it says anything else. IAM stores a hash and cannot
+ * show it again, so somebody who does not read that sentence stores nothing
+ * and rotates an hour later.
+ *
+ * **Rotating breaks the old key immediately.** There is no grace period, by
+ * design, so the confirmation says what will stop rather than asking a
+ * yes/no about a word.
+ *
+ * **Revoking does not remove the row.** Its audit rows name it, and a uid
+ * that resolves to nothing makes a year-old row unreadable. Revoked is a
+ * state in the table, never a reason to hide it.
+ *
+ * @module views/mcp/ServiceAgents
+ */
+import type { JSX } from 'react';
+import type { McpErrorStateFn } from './types';
+export interface ServiceAgentsProps {
+    /** The application's words for a failed request. */
+    errorState: McpErrorStateFn;
+    /** The organization whose agents these are. */
+    orgUid: string;
+    /**
+     * Read-only for anybody who is not an owner. Members may *see* the list —
+     * an agent spending their organization's budget is one they will ask
+     * about — and IAM refuses their writes either way; this only keeps the
+     * page from offering an action that would be refused.
+     */
+    readOnly?: boolean;
+    /** Drawn without its heading, when the page around it carries one. */
+    showTitle?: boolean;
+}
+export declare const ServiceAgents: ({ errorState, orgUid, readOnly, showTitle, }: ServiceAgentsProps) => JSX.Element;
+export default ServiceAgents;

package/lib/views/mcp/ServiceAgents.js

@@ -0,0 +1,194 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { ActionList, ActionMenu, Button, Checkbox, FormControl, Heading, Label, RelativeTime, Spinner, Text, TextInput, } from '@primer/react';
+import { Blankslate, DataTable, Dialog, Table, } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { KebabHorizontalIcon, KeyIcon } from '@primer/octicons-react';
+import { McpErrorBlankslate, ScopeList } from '../../components/mcp/index.js';
+import { useCreateServiceAgent, useRevokeServiceAgent, useRotateServiceAgentKey, useServiceAgents, } from '../../hooks/useMcp.js';
+import { useToast } from '../../hooks/index.js';
+import { SERVICE_AGENT_SCOPES, } from '../../api/iam/serviceAgents.js';
+export const ServiceAgents = ({ errorState, orgUid, readOnly = false, showTitle = true, }) => {
+    const { enqueueToast } = useToast();
+    const agents = useServiceAgents(orgUid);
+    const create = useCreateServiceAgent(orgUid);
+    const rotate = useRotateServiceAgentKey(orgUid);
+    const revoke = useRevokeServiceAgent(orgUid);
+    const [creating, setCreating] = useState(false);
+    const [name, setName] = useState('');
+    const [scopes, setScopes] = useState(['runtimes:read']);
+    const [rotating, setRotating] = useState(null);
+    const [revoking, setRevoking] = useState(null);
+    const [keyShown, setKeyShown] = useState(null);
+    // Primer 37 types Dialog's focus refs with React 18's non-nullable
+    // `RefObject<HTMLElement>`. React 19's `useRef(null)` is nullable, and this
+    // ref is only handed to Dialog, so narrow it once here.
+    const returnFocusRef = useRef(null);
+    const rows = useMemo(() => (agents.data ?? []).map(agent => ({ ...agent, id: agent.uid })), [agents.data]);
+    const closeCreate = () => {
+        setCreating(false);
+        setName('');
+        setScopes(['runtimes:read']);
+    };
+    const confirmCreate = () => {
+        create.mutate({ name: name.trim(), scopes }, {
+            onSuccess: agent => {
+                closeCreate();
+                setKeyShown({
+                    agent: agent.name || agent.uid,
+                    key: agent.key,
+                    rotated: false,
+                });
+            },
+            onError: reason => {
+                enqueueToast(`Could not create the agent: ${reason.message}`, {
+                    variant: 'error',
+                });
+            },
+        });
+    };
+    const confirmRotate = () => {
+        const agent = rotating;
+        if (!agent) {
+            return;
+        }
+        rotate.mutate(agent.uid, {
+            onSuccess: rotated => {
+                setRotating(null);
+                setKeyShown({
+                    agent: agent.name || agent.uid,
+                    key: rotated.key,
+                    rotated: true,
+                });
+            },
+            onError: reason => {
+                enqueueToast(`Could not rotate the key: ${reason.message}`, {
+                    variant: 'error',
+                });
+                setRotating(null);
+            },
+        });
+    };
+    const confirmRevoke = () => {
+        const agent = revoking;
+        if (!agent) {
+            return;
+        }
+        revoke.mutate(agent.uid, {
+            onSuccess: () => {
+                enqueueToast(`${agent.name || agent.uid} is revoked.`, {
+                    variant: 'success',
+                });
+                setRevoking(null);
+            },
+            onError: reason => {
+                enqueueToast(`Could not revoke: ${reason.message}`, {
+                    variant: 'error',
+                });
+                setRevoking(null);
+            },
+        });
+    };
+    const toggleScope = (scope, on) => setScopes(current => on
+        ? [...current, scope]
+        : current.filter(candidate => candidate !== scope));
+    const columns = [
+        {
+            header: 'Agent',
+            field: 'name',
+            rowHeader: true,
+            renderCell: row => (_jsxs(Box, { sx: { display: 'grid' }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: row.name || row.uid }), row.description && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: row.description }))] })),
+        },
+        {
+            header: 'Kind',
+            id: 'kind',
+            width: '110px',
+            renderCell: () => (_jsx(Label, { size: "small", variant: "accent", children: "Service" })),
+        },
+        {
+            header: 'Allowed to',
+            id: 'scopes',
+            width: 'growCollapse',
+            renderCell: row => (_jsx(ScopeList, { scopes: row.scopes.split(' ').filter(Boolean) })),
+        },
+        {
+            header: 'State',
+            id: 'state',
+            width: '110px',
+            renderCell: row => row.revoked ? (_jsx(Label, { size: "small", variant: "danger", children: "Revoked" })) : (_jsx(Label, { size: "small", variant: "success", children: "Active" })),
+        },
+        {
+            header: 'Key rotated',
+            id: 'rotated',
+            width: '130px',
+            renderCell: row => row.keyRotatedAt ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: _jsx(RelativeTime, { datetime: row.keyRotatedAt }) })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "\u2014" })),
+        },
+        {
+            header: '',
+            id: 'actions',
+            width: '48px',
+            align: 'end',
+            renderCell: row => readOnly || row.revoked ? (_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 || row.uid}`, icon: KebabHorizontalIcon }) }), _jsx(ActionMenu.Overlay, { align: "end", children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { onSelect: () => setRotating(row), children: "Rotate key" }), _jsx(ActionList.Item, { variant: "danger", onSelect: () => setRevoking(row), children: "Revoke" })] }) })] })),
+        },
+    ];
+    if (agents.isError) {
+        return (_jsx(McpErrorBlankslate, { state: errorState(agents.error, 'Service 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: "Service Agents" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "Agents that belong to this organization rather than to a person: a pipeline, a CI job, a bot. Each holds its own key and spends under its own name." })] }), !readOnly && (_jsx(Button, { variant: "primary", onClick: () => setCreating(true), children: "New service agent" }))] })), 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: "service-agents", children: "Service agents" }), _jsx(Table.Subtitle, { as: "p", id: "service-agents-subtitle", children: "A revoked agent stays listed: its audit rows name it, and a uid that resolves to nothing makes them unreadable a year from now." }), _jsx(DataTable, { "aria-labelledby": "service-agents", "aria-describedby": "service-agents-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 service agent" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "An agent that runs on somebody\u2019s grant stops when that person leaves, and its spend shows against them. A service agent is the organization\u2019s own." }) }), !readOnly && (_jsx(Button, { size: "small", onClick: () => setCreating(true), children: "New service agent" }))] })), creating && (_jsx(Dialog, { title: "New service agent", onClose: closeCreate, returnFocusRef: returnFocusRef, footerButtons: [
+                    { buttonType: 'default', content: 'Cancel', onClick: closeCreate },
+                    {
+                        buttonType: 'primary',
+                        content: 'Create',
+                        onClick: confirmCreate,
+                        // Both are refused by IAM anyway — a nameless agent is
+                        // unreadable in an audit row, and a scopeless one is a key
+                        // that fails at its first call. Disabling here turns a refusal
+                        // into an obvious gap in the form.
+                        disabled: create.isPending || !name.trim() || scopes.length === 0,
+                    },
+                ], children: _jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: name, onChange: event => setName(event.target.value), placeholder: "nightly ingest" }), _jsx(FormControl.Caption, { children: "What somebody reading an audit row or a spend line a year from now has to go on." })] }), _jsxs(Box, { children: [_jsx(Text, { as: "p", sx: { fontSize: 1, fontWeight: 'semibold', mb: 1 }, children: "Allowed to" }), _jsx(Box, { sx: { display: 'grid', gap: 1 }, children: SERVICE_AGENT_SCOPES.map(scope => (_jsxs(FormControl, { children: [_jsx(Checkbox, { checked: scopes.includes(scope), onChange: event => toggleScope(scope, event.target.checked) }), _jsx(FormControl.Label, { children: scope })] }, scope))) }), _jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 1 }, children: "The scopes about a person \u2014 their profile, acting as them \u2014 are not here: a pipeline is not a person, and granting one to it would do nothing while looking like it did something." })] })] }) })), keyShown && (_jsx(Dialog, { title: keyShown.rotated ? 'The new key' : 'The key', onClose: () => setKeyShown(null), returnFocusRef: returnFocusRef, footerButtons: [
+                    {
+                        buttonType: 'primary',
+                        content: 'I have stored it',
+                        onClick: () => setKeyShown(null),
+                    },
+                ], children: _jsxs(Box, { sx: { display: 'grid', gap: 2 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: "This is shown once and cannot be shown again." }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "We store a hash of it, so there is no page and no support request that can show it to you a second time. If you lose it, rotate \u2014 that issues a new key and stops this one." }), _jsx(Box, { as: "pre", sx: {
+                                fontFamily: 'mono',
+                                fontSize: 1,
+                                p: 2,
+                                m: 0,
+                                bg: 'canvas.subtle',
+                                borderRadius: 2,
+                                overflowX: 'auto',
+                            }, children: keyShown.key }), keyShown.rotated && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [keyShown.agent, "\u2019s previous key stopped working when this one was issued."] }))] }) })), rotating && (_jsx(Dialog, { title: "Rotate this key?", onClose: () => setRotating(null), returnFocusRef: returnFocusRef, footerButtons: [
+                    {
+                        buttonType: 'default',
+                        content: 'Keep it',
+                        onClick: () => setRotating(null),
+                    },
+                    {
+                        buttonType: 'danger',
+                        content: 'Rotate',
+                        onClick: confirmRotate,
+                        disabled: rotate.isPending,
+                    },
+                ], children: _jsxs(Text, { sx: { fontSize: 1 }, children: [rotating.name || rotating.uid, " gets a new key and the current one stops working immediately \u2014 there is no grace period, which is the point of rotating. Anything still using the old key fails until you give it the new one. The new key is shown once."] }) })), revoking && (_jsx(Dialog, { title: "Revoke this agent?", onClose: () => setRevoking(null), returnFocusRef: returnFocusRef, footerButtons: [
+                    {
+                        buttonType: 'default',
+                        content: 'Keep it',
+                        onClick: () => setRevoking(null),
+                    },
+                    {
+                        buttonType: 'danger',
+                        content: 'Revoke',
+                        onClick: confirmRevoke,
+                        disabled: revoke.isPending,
+                    },
+                ], children: _jsxs(Text, { sx: { fontSize: 1 }, children: [revoking.name || revoking.uid, " stops authenticating within a minute and anything running on its key fails. It stays in this list, marked revoked, because its audit rows name it \u2014 and nothing it already did is undone."] }) }))] }));
+};
+export default ServiceAgents;

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

@@ -0,0 +1,33 @@
+/**
+ * What each team narrows, on top of the organization's own layer.
+ *
+ * A team is a scope, not a label: its layer sits between the
+ * organization's and the person's, and everything intersects. A team can be
+ * stricter than its organization and never looser — permitting a tool the
+ * organization denies does nothing, and a cap above the organization's
+ * leaves the organization's in force.
+ *
+ * The one rule that behaves differently is worth saying on this page rather
+ * than leaving to be discovered: **a team's sandbox limit counts the team's
+ * own sandboxes**, not the organization's. Every other rule is one number
+ * checked once; a counted quota belongs to a scope, and a team cap measured
+ * against the organization's count would refuse a team running nothing
+ * because other teams are busy.
+ *
+ * Team owners administer their own slice — no new role, the existing
+ * `team_owner` handle carries it — and an organization owner may write any
+ * of them, since an owner who could not narrow one of their own teams would
+ * have to remove the team to do it.
+ *
+ * @module views/mcp/TeamPolicies
+ */
+import type { JSX } from 'react';
+import type { McpErrorStateFn } from './types';
+export interface TeamPoliciesProps {
+    errorState: McpErrorStateFn;
+    orgUid: string;
+    readOnly?: boolean;
+    showTitle?: boolean;
+}
+export declare const TeamPolicies: ({ errorState, orgUid, readOnly, showTitle, }: TeamPoliciesProps) => JSX.Element;
+export default TeamPolicies;

package/lib/views/mcp/TeamPolicies.js

@@ -0,0 +1,98 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Button, Flash, Heading, Select, Spinner, Text } from '@primer/react';
+import { Blankslate } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { PeopleIcon } from '@primer/octicons-react';
+import { McpErrorBlankslate } from '../../components/mcp/index.js';
+import { useMcpPolicyLayer, useOrganizationTeams, useSetMcpPolicyLayer, useDeleteMcpPolicyLayer, } from '../../hooks/useMcp.js';
+import { useToast } from '../../hooks/index.js';
+import { McpPolicyConflict } from '../../api/iam/mcpPolicy.js';
+import { PolicyHistory } from './PolicyHistory.js';
+import { EMPTY_POLICY_DRAFT, PolicyForm, draftOf, policyChanged, rulesFrom, } from './PolicyForm.js';
+/**
+ * The form for one team.
+ *
+ * Its own component so that choosing a different team unmounts it: a form
+ * that kept its draft across a change of team would offer to save one
+ * team's rules onto another, which is the one mistake on this page nobody
+ * would notice until it had happened.
+ */
+const TeamPolicyForm = ({ orgUid, teamUid, teamName, readOnly, }) => {
+    const { enqueueToast } = useToast();
+    const layer = useMcpPolicyLayer('team', teamUid);
+    const save = useSetMcpPolicyLayer('team', teamUid);
+    const remove = useDeleteMcpPolicyLayer('team', teamUid);
+    const [draft, setDraft] = useState(EMPTY_POLICY_DRAFT);
+    const [conflict, setConflict] = useState('');
+    const [refusal, setRefusal] = useState('');
+    const stored = useMemo(() => draftOf(layer.data), [layer.data]);
+    useEffect(() => setDraft(stored), [stored]);
+    const changed = useMemo(() => policyChanged(draft, stored), [draft, stored]);
+    const set = (key, value) => setDraft(current => ({ ...current, [key]: value }));
+    const apply = () => {
+        const rules = rulesFrom(draft);
+        if (typeof rules === 'string') {
+            setRefusal(rules);
+            return;
+        }
+        setRefusal('');
+        setConflict('');
+        save.mutate({ rules, expectedVersion: layer.data?.version }, {
+            onSuccess: () => enqueueToast(`${teamName}'s policy saved.`, { variant: 'success' }),
+            onError: error => {
+                if (error instanceof McpPolicyConflict) {
+                    setConflict(error.message);
+                    return;
+                }
+                enqueueToast(`Could not save: ${error.message}`, {
+                    variant: 'error',
+                });
+            },
+        });
+    };
+    if (layer.isPending && layer.data === undefined) {
+        return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 4 }, children: _jsx(Spinner, {}) }));
+    }
+    return (_jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [conflict && (_jsxs(Flash, { variant: "warning", children: [_jsx(Text, { sx: { fontSize: 1 }, children: conflict }), _jsx(Box, { sx: { mt: 2 }, children: _jsx(Button, { size: "small", onClick: () => {
+                                setConflict('');
+                                layer.refetch();
+                            }, children: "Read it again" }) })] })), refusal && (_jsx(Flash, { variant: "danger", children: _jsx(Text, { sx: { fontSize: 1 }, children: refusal }) })), _jsx(PolicyForm, { draft: draft, onChange: set, disabled: readOnly, notes: {
+                    maxConcurrentSandboxes: "Counted over this team's own sandboxes, not the organization's " +
+                        '— so another team being busy never uses up this limit. The ' +
+                        "organization's cap still applies on top.",
+                } }), !readOnly && (_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center' }, children: [_jsxs(Button, { variant: "primary", onClick: apply, disabled: !changed || save.isPending, children: ["Save ", teamName, "\u2019s policy"] }), changed && (_jsx(Button, { variant: "invisible", onClick: () => setDraft(stored), children: "Discard changes" })), layer.data && (_jsx(Box, { sx: { marginLeft: 'auto' }, children: _jsx(Button, { variant: "danger", disabled: remove.isPending, onClick: () => remove.mutate(undefined, {
+                                onSuccess: () => enqueueToast(`${teamName} narrows nothing of its own.`, {
+                                    variant: 'success',
+                                }),
+                                onError: error => enqueueToast(`Could not remove: ${error.message}`, {
+                                    variant: 'error',
+                                }),
+                            }), children: "Remove" }) }))] })), _jsxs(Box, { sx: {
+                    borderTop: '1px solid',
+                    borderColor: 'border.muted',
+                    pt: 3,
+                    display: 'grid',
+                    gap: 2,
+                }, children: [_jsx(Text, { as: "h3", sx: { fontSize: 1, fontWeight: 'semibold', m: 0 }, children: "History" }), _jsx(PolicyHistory, { orgUid: orgUid, subjectUid: teamUid })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "A team can be stricter than its organization and never looser. Permitting a tool the organization denies does nothing, and a cap above the organization\u2019s leaves the organization\u2019s in force." })] }));
+};
+export const TeamPolicies = ({ errorState, orgUid, readOnly = false, showTitle = true, }) => {
+    const teams = useOrganizationTeams(orgUid);
+    const [chosen, setChosen] = useState('');
+    const current = useMemo(() => (teams.data ?? []).find(team => team.uid === chosen) ??
+        (teams.data ?? [])[0], [teams.data, chosen]);
+    if (teams.isError) {
+        return (_jsx(McpErrorBlankslate, { state: errorState(teams.error, "The organization's teams"), onRetry: () => teams.refetch() }));
+    }
+    if (teams.isPending && !teams.data) {
+        return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 5 }, children: _jsx(Spinner, {}) }));
+    }
+    if ((teams.data ?? []).length === 0) {
+        return (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(PeopleIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "No teams" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "A team is a scope, not a label: it gets its own rules, its own sandbox limit and its own alerts. Create one in the organization\u2019s settings and it appears here." }) })] }));
+    }
+    return (_jsxs(Box, { sx: { display: 'grid', gap: 3, minWidth: 0, maxWidth: '52rem' }, children: [showTitle && (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Team policies" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "What each team narrows, on top of this organization\u2019s own rules. A team owner may write their own team\u2019s." })] })), _jsx(Box, { sx: { maxWidth: '20rem' }, children: _jsx(Select, { value: current?.uid ?? '', onChange: event => setChosen(event.target.value), "aria-label": "Team", children: (teams.data ?? []).map(team => (_jsx(Select.Option, { value: team.uid, children: team.name }, team.uid))) }) }), current && (
+            // Keyed by the team, so choosing another unmounts the form rather
+            // than carrying one team's unsaved draft onto the next.
+            _jsx(TeamPolicyForm, { orgUid: orgUid, teamUid: current.uid, teamName: current.name, readOnly: readOnly }, current.uid))] }));
+};
+export default TeamPolicies;

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

@@ -0,0 +1,25 @@
+/**
+ * The small readings every MCP surface shares: how long ago, how long it
+ * took, and whether a client is still there.
+ *
+ * Plain functions with no React in them, so the wording of "4m ago" is one
+ * decision rather than one per view.
+ *
+ * @module views/mcp/format
+ */
+/** A client that called within this window is drawn as active. */
+export declare const MCP_ACTIVE_WINDOW_MS: number;
+/**
+ * A client idle longer than this has left the activity answer, and its card
+ * leaves the home grid — the same window the gateway bounds `/activity` by.
+ */
+export declare const MCP_ACTIVITY_WINDOW_MS: number;
+/** Where a client is, from when it last called. */
+export type McpClientStatus = 'active' | 'idle' | 'disconnected';
+export declare const clientStatusOf: (lastCallAt: string | null | undefined, now?: number) => McpClientStatus;
+/** How long ago a moment was, in the words the home page uses. */
+export declare const timeAgo: (iso: string | null | undefined, now?: number) => string;
+/** A duration in the unit that reads: milliseconds, seconds, minutes. */
+export declare const durationLabel: (milliseconds: number | null | undefined) => string;
+/** A count in the page's terms: `1 call`, `12 calls`, `no call`. */
+export declare const plural: (count: number, singular: string, many?: string) => string;

package/lib/views/mcp/format.js

@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The small readings every MCP surface shares: how long ago, how long it
+ * took, and whether a client is still there.
+ *
+ * Plain functions with no React in them, so the wording of "4m ago" is one
+ * decision rather than one per view.
+ *
+ * @module views/mcp/format
+ */
+/** A client that called within this window is drawn as active. */
+export const MCP_ACTIVE_WINDOW_MS = 5 * 60_000;
+/**
+ * A client idle longer than this has left the activity answer, and its card
+ * leaves the home grid — the same window the gateway bounds `/activity` by.
+ */
+export const MCP_ACTIVITY_WINDOW_MS = 30 * 60_000;
+export const clientStatusOf = (lastCallAt, now = Date.now()) => {
+    if (!lastCallAt) {
+        // A grant that has never been used is connected but has done nothing.
+        return 'idle';
+    }
+    const at = Date.parse(lastCallAt);
+    if (Number.isNaN(at)) {
+        return 'idle';
+    }
+    const age = now - at;
+    if (age <= MCP_ACTIVE_WINDOW_MS) {
+        return 'active';
+    }
+    return age <= MCP_ACTIVITY_WINDOW_MS ? 'idle' : 'disconnected';
+};
+/** How long ago a moment was, in the words the home page uses. */
+export const timeAgo = (iso, now = Date.now()) => {
+    if (!iso) {
+        return '';
+    }
+    const at = Date.parse(iso);
+    if (Number.isNaN(at)) {
+        return '';
+    }
+    const seconds = Math.max(0, (now - at) / 1000);
+    if (seconds < 60) {
+        return 'just now';
+    }
+    if (seconds < 3600) {
+        return `${Math.floor(seconds / 60)}m ago`;
+    }
+    if (seconds < 86400) {
+        return `${Math.floor(seconds / 3600)}h ago`;
+    }
+    return `${Math.floor(seconds / 86400)}d ago`;
+};
+/** A duration in the unit that reads: milliseconds, seconds, minutes. */
+export const durationLabel = (milliseconds) => {
+    if (milliseconds === null || milliseconds === undefined) {
+        return '';
+    }
+    if (milliseconds < 1000) {
+        return `${Math.round(milliseconds)}ms`;
+    }
+    if (milliseconds < 60_000) {
+        return `${(milliseconds / 1000).toFixed(1)}s`;
+    }
+    const minutes = Math.floor(milliseconds / 60_000);
+    const seconds = Math.round((milliseconds % 60_000) / 1000);
+    return `${minutes}m ${seconds}s`;
+};
+/** A count in the page's terms: `1 call`, `12 calls`, `no call`. */
+export const plural = (count, singular, many = `${singular}s`) => `${count} ${count === 1 ? singular : many}`;

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

@@ -0,0 +1,29 @@
+/**
+ * The MCP surfaces, as views the application composes: the dashboard, the
+ * setup page, the connected agents, the audit log, the observability panes,
+ * the effective policy and the organization's console.
+ *
+ * Every one of them owns its data and its states and nothing about routing,
+ * which is what lets the web application, JupyterLab, VS Code and Desktop
+ * draw the same page.
+ *
+ * @module views/mcp
+ */
+export * from './types';
+export * from './format';
+export * from './McpDashboard';
+export * from './McpHome';
+export * from './ConnectedAgents';
+export * from './AlertDestinations';
+export * from './AlertRules';
+export * from './OrganizationPolicy';
+export * from './PersonalPolicy';
+export * from './PolicyForm';
+export * from './PolicyHistory';
+export * from './TeamPolicies';
+export * from './ServiceAgents';
+export * from './AuditLog';
+export * from './McpObservability';
+export * from './Policies';
+export * from './OrganizationUsage';
+export * from './EnterpriseConsole';

package/lib/views/mcp/index.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The MCP surfaces, as views the application composes: the dashboard, the
+ * setup page, the connected agents, the audit log, the observability panes,
+ * the effective policy and the organization's console.
+ *
+ * Every one of them owns its data and its states and nothing about routing,
+ * which is what lets the web application, JupyterLab, VS Code and Desktop
+ * draw the same page.
+ *
+ * @module views/mcp
+ */
+export * from './types.js';
+export * from './format.js';
+export * from './McpDashboard.js';
+export * from './McpHome.js';
+export * from './ConnectedAgents.js';
+export * from './AlertDestinations.js';
+export * from './AlertRules.js';
+export * from './OrganizationPolicy.js';
+export * from './PersonalPolicy.js';
+export * from './PolicyForm.js';
+export * from './PolicyHistory.js';
+export * from './TeamPolicies.js';
+export * from './ServiceAgents.js';
+export * from './AuditLog.js';
+export * from './McpObservability.js';
+export * from './Policies.js';
+export * from './OrganizationUsage.js';
+export * from './EnterpriseConsole.js';