@datalayer/core 1.1.60 → 1.2.10

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,159 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Button, Flash, Heading, Select, Spinner, Text } from '@primer/react';
+import { Blankslate, Dialog } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { PeopleIcon } from '@primer/octicons-react';
+import { McpErrorBlankslate } from '../../components/mcp/index.js';
+import { useDisconnectEveryAgentInTeam, useMcpPolicyLayer, useOrganizationTeams, useSetMcpPolicyLayer, useDeleteMcpPolicyLayer, } from '../../hooks/useMcp.js';
+import { useToast } from '../../hooks/index.js';
+import { McpPolicyConflict } from '../../api/iam/mcpPolicy.js';
+import { AdmittedClients } from './AdmittedClients.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.",
+                }, belowAllowedClients: _jsx(AdmittedClients, { scope: "team", subjectUid: teamUid, edited: draft.allowedClients !== stored.allowedClients }) }), !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" }) }))] })), !readOnly && _jsx(TeamSessions, { teamUid: teamUid, teamName: teamName }), _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." })] }));
+};
+/**
+ * Ending every session consented in one team.
+ *
+ * On the team's own page rather than on Connected agents, because that page
+ * is a person's list of their own grants — "disconnect all" there means
+ * *yours*, and a control that quietly meant a whole team's would be the same
+ * word doing two very different things one click apart.
+ *
+ * It is the team's counterpart of the personal one, and the same authority
+ * as removing somebody from the team: IAM asks `_can_manage_team`, so a team
+ * owner or the organization's owner may do it and nobody else. Narrow in the
+ * way deprovisioning is — no personal agent and no other team's grant is
+ * touched.
+ *
+ * **Not a policy rule, and kept out of the form above on purpose.** Saving a
+ * policy is reversible and takes effect on the next call; this ends live
+ * sessions now. Folding it into the same Save button would make somebody
+ * adjusting a cap sign every one of their team's agents out.
+ */
+const TeamSessions = ({ teamUid, teamName, }) => {
+    const { enqueueToast } = useToast();
+    const disconnect = useDisconnectEveryAgentInTeam();
+    const [asking, setAsking] = useState(false);
+    const returnFocusRef = useRef(null);
+    const confirm = () => {
+        disconnect.mutate(teamUid, {
+            onSuccess: answer => {
+                enqueueToast(answer.revoked === 1
+                    ? `1 session ended for ${teamName}.`
+                    : `${answer.revoked} sessions ended for ${teamName}.`, { variant: 'success' });
+                setAsking(false);
+            },
+            onError: error => {
+                setAsking(false);
+                enqueueToast(`Could not end sessions: ${error.message}`, {
+                    variant: 'error',
+                });
+            },
+        });
+    };
+    return (_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: "Sessions" }), _jsxs(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: ["Every agent connected while acting for ", teamName, " loses its grant at once. Each asks again the next time somebody connects it, and goes through the approval screen rather than being answered from what was agreed before \u2014 so this is also how a fresh approval is forced."] }), _jsx(Box, { children: _jsxs(Button, { variant: "danger", ref: returnFocusRef, onClick: () => setAsking(true), disabled: disconnect.isPending, children: ["End ", teamName, "\u2019s sessions"] }) }), asking && (_jsxs(Dialog, { title: `End every session in ${teamName}?`, onClose: () => setAsking(false), returnFocusRef: returnFocusRef, footerButtons: [
+                    {
+                        buttonType: 'default',
+                        content: 'Keep them',
+                        onClick: () => setAsking(false),
+                    },
+                    {
+                        buttonType: 'danger',
+                        content: 'End them',
+                        onClick: confirm,
+                        disabled: disconnect.isPending,
+                    },
+                ], children: [_jsxs(Text, { sx: { fontSize: 1 }, children: ["Every grant consented in ", teamName, " ends now, whoever holds it. Work an agent is in the middle of stops where it is."] }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', mt: 2, mb: 0 }, children: "This team only. Nobody\u2019s personal agents end, no other team\u2019s do, and nothing any agent already did is undone." })] }))] }));
+};
+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/ToolAccess.d.ts

@@ -0,0 +1,60 @@
+/**
+ * What an agent may actually call, in one space or one organization.
+ *
+ * A source is not exposed to agents because it exists. Somebody allows a set
+ * of its tools on the source, and each session an agent opens narrows that
+ * further. This is where those two lists are read together — because the
+ * only list that matters is their **intersection**, and neither record shows
+ * it on its own.
+ *
+ * That gap is not theoretical. Contents computes the effective policy as
+ * `session ∩ source` and refuses anything outside it, so a tool removed from
+ * the source after a session opened goes on sitting in that session's
+ * `allowedTools` and is refused at every call. A page that drew the session's
+ * list would show a tool the agent cannot use, and the person debugging it
+ * would be reading a page that agreed with them.
+ *
+ * **An empty allowlist allows nothing.** It is not "unrestricted", here or
+ * in Contents: `check_tool` refuses every tool not in the list, so a session
+ * whose effective set is empty can call none of them. Said plainly on the
+ * row, because the opposite reading is the natural one and it is the
+ * dangerous direction to be wrong in.
+ *
+ * @module views/mcp/ToolAccess
+ */
+import type { JSX } from 'react';
+import type { ContentSource, McpConfiguration } from '../../api/contents/generated';
+import { type McpErrorStateFn } from './types';
+/**
+ * The tools a session can really call: what it was granted, still allowed by
+ * the source.
+ *
+ * The same intersection Contents applies, computed here so the page shows
+ * what will happen rather than what was asked for. Sorted, so two sessions
+ * of the same source read the same way.
+ */
+export declare const effectiveTools: (sessionAllowed: readonly string[] | null | undefined, sourceAllowed: readonly string[] | null | undefined) => string[];
+/**
+ * The tools a session still lists that its source has stopped allowing.
+ *
+ * Worth its own answer rather than a subtraction at the call site: this is
+ * the set that makes an agent fail in a way nobody can explain from either
+ * record alone, and naming it is the whole reason to read the two together.
+ */
+export declare const withdrawnTools: (sessionAllowed: readonly string[] | null | undefined, sourceAllowed: readonly string[] | null | undefined) => string[];
+/** How a source's approval policy reads to somebody deciding whether to trust it. */
+export declare const APPROVAL_POLICY_LOOK: Record<McpConfiguration['approvalPolicy'], {
+    label: string;
+    variant: 'attention' | 'success' | 'secondary';
+    note: string;
+}>;
+/** The MCP configuration of a source, where it has one. */
+export declare const mcpConfigOf: (source: ContentSource) => McpConfiguration | undefined;
+export interface ToolAccessProps {
+    /** The application's words for a failed request. */
+    errorState: McpErrorStateFn;
+    /** One space's sources, rather than every source the caller can see. */
+    spaceUid?: string;
+}
+export declare const ToolAccess: ({ errorState, spaceUid, }: ToolAccessProps) => JSX.Element;
+export default ToolAccess;

package/lib/views/mcp/ToolAccess.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Heading, Label, Spinner, Text, Truncate, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { McpErrorBlankslate } from '../../components/mcp/index.js';
+import { useContentSources, useMcpSessions, useMcpTools, useRevokeMcpSession, } from '../../hooks/useContents.js';
+/**
+ * The tools a session can really call: what it was granted, still allowed by
+ * the source.
+ *
+ * The same intersection Contents applies, computed here so the page shows
+ * what will happen rather than what was asked for. Sorted, so two sessions
+ * of the same source read the same way.
+ */
+export const effectiveTools = (sessionAllowed, sourceAllowed) => {
+    const source = new Set(sourceAllowed ?? []);
+    return [...new Set(sessionAllowed ?? [])].filter(tool => source.has(tool)).sort();
+};
+/**
+ * The tools a session still lists that its source has stopped allowing.
+ *
+ * Worth its own answer rather than a subtraction at the call site: this is
+ * the set that makes an agent fail in a way nobody can explain from either
+ * record alone, and naming it is the whole reason to read the two together.
+ */
+export const withdrawnTools = (sessionAllowed, sourceAllowed) => {
+    const source = new Set(sourceAllowed ?? []);
+    return [...new Set(sessionAllowed ?? [])].filter(tool => !source.has(tool)).sort();
+};
+/** How a source's approval policy reads to somebody deciding whether to trust it. */
+export const APPROVAL_POLICY_LOOK = {
+    explicit: {
+        label: 'Approval required',
+        variant: 'attention',
+        note: 'Every call waits for somebody to allow it.',
+    },
+    'auto-allowlisted': {
+        label: 'Allowlisted',
+        variant: 'success',
+        note: 'Calls to allowed tools run; anything else is refused.',
+    },
+    never: {
+        label: 'No approval',
+        variant: 'secondary',
+        note: 'Calls to allowed tools run without asking.',
+    },
+};
+/** The MCP configuration of a source, where it has one. */
+export const mcpConfigOf = (source) => source.kind === 'mcp'
+    ? source.configuration
+    : undefined;
+const SessionRow = ({ session, sourceTools, mayRevoke, onRevoke, revoking, }) => {
+    const effective = effectiveTools(session.allowedTools, sourceTools);
+    const withdrawn = withdrawnTools(session.allowedTools, sourceTools);
+    return (_jsxs(Box, { sx: {
+            display: 'grid',
+            gap: 1,
+            py: 2,
+            borderTop: '1px solid',
+            borderColor: 'border.muted',
+        }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(Label, { size: "small", variant: session.status === 'active' ? 'success' : 'secondary', children: session.status }), _jsx(Truncate, { title: session.actorUid, sx: { fontSize: 0, fontFamily: 'mono', maxWidth: '16rem' }, children: session.actorUid }), session.status === 'active' && mayRevoke && (_jsx(Button, { size: "small", variant: "danger", disabled: revoking, onClick: onRevoke, children: revoking ? 'Revoking…' : 'Revoke' }))] }), effective.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'attention.fg' }, children: "This session can call nothing. An empty allowlist allows no tool \u2014 it does not mean unrestricted." })) : (_jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: effective.map(tool => (_jsx(Label, { size: "small", variant: "secondary", children: tool }, tool))) })), withdrawn.length > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Refused at every call, because the source no longer allows", ' ', withdrawn.join(', '), " \u2014 the session still lists it."] }))] }));
+};
+const SourceCard = ({ source, permissions, errorState, }) => {
+    const config = mcpConfigOf(source);
+    const sourceTools = config?.allowedTools ?? [];
+    const sessions = useMcpSessions({ sourceUid: source.uid });
+    const revoke = useRevokeMcpSession();
+    const manifest = useMcpTools(source.uid);
+    const [revoking, setRevoking] = useState('');
+    const look = config ? APPROVAL_POLICY_LOOK[config.approvalPolicy] : undefined;
+    const offered = manifest.data?.tools?.length ?? 0;
+    return (_jsxs(Box, { sx: {
+            border: '1px solid',
+            borderColor: '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(Heading, { as: "h3", sx: { fontSize: 1 }, children: source.name }), look && (_jsx(Label, { size: "small", variant: look.variant, children: look.label })), config?.transport && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: config.transport }))] }), look && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: look.note })), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: sourceTools.length === 0
+                    ? 'No tool is allowed on this source, so an agent can call none of it.'
+                    : `${sourceTools.length} of ${offered || sourceTools.length} tools allowed to agents.` }), sourceTools.length > 0 && (_jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: [...sourceTools].sort().map(tool => (_jsx(Label, { size: "small", variant: "accent", children: tool }, tool))) })), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 0, color: 'fg.muted', mb: 1 }, children: "Open sessions" }), sessions.isError ? (_jsx(McpErrorBlankslate, { state: errorState(sessions.error, 'The sessions'), onRetry: () => sessions.refetch() })) : sessions.isPending ? (_jsx(Spinner, { size: "small" })) : (sessions.data?.items.length ?? 0) === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No agent has opened this source." })) : ((sessions.data?.items ?? []).map(session => (_jsx(SessionRow, { session: session, sourceTools: sourceTools, 
+                        // Revoking a session withdraws an agent's access to this
+                        // source, so it follows the source's own write permission
+                        // rather than being offered to everyone who can read the page.
+                        mayRevoke: permissions.update || permissions.isOwner, revoking: revoking === session.uid, onRevoke: () => {
+                            setRevoking(session.uid);
+                            revoke.mutate(session.uid, {
+                                onSettled: () => setRevoking(''),
+                            });
+                        } }, session.uid))))] })] }));
+};
+export const ToolAccess = ({ errorState, spaceUid, }) => {
+    const sources = useContentSources({ kind: 'mcp', ...(spaceUid ? { spaceUid } : {}) });
+    // The listing wraps each source with what this caller may do with it, and
+    // both halves are used: the source to read the allowlist, the permissions
+    // to decide whether revoking is offered at all.
+    const items = (sources.data?.items ?? []);
+    return (_jsxs(Box, { sx: { display: 'grid', gap: 3, minWidth: 0 }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Tools" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: "The MCP sources your agents may reach, the tools allowed on each, and the sessions open against them. A session can only narrow what the source allows, never widen it." })] }), sources.isError ? (_jsx(McpErrorBlankslate, { state: errorState(sources.error, 'The sources'), onRetry: () => sources.refetch() })) : sources.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: "No MCP source is connected here. A source has to be created before its tools can be offered to an agent." })) : (items.map(entry => (_jsx(SourceCard, { source: entry.source, permissions: entry.permissions, errorState: errorState }, entry.source.uid))))] }));
+};
+export default ToolAccess;

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

@@ -0,0 +1,81 @@
+/**
+ * Where a run's time went.
+ *
+ * A run crosses four processes — the gateway that accepted the call, the
+ * durable engine that recorded it, the worker that executed it, and the
+ * sandbox that ran the code — and the question a person actually has when a
+ * run took eleven minutes is *which of them* took the eleven minutes. A list
+ * of spans does not answer that; the same spans laid against one clock do.
+ *
+ * **The bars are proportional, the rows are the tree.** Nesting comes from
+ * `parent_span_id`, so a step that waited on a sandbox sits under the step
+ * that waited, and its bar sits inside its parent's — a gap between a
+ * parent's bar and its children's is queue time, which is the thing worth
+ * seeing and the thing a table of durations hides.
+ *
+ * **It draws spans from every service, not the gateway's alone.** The
+ * `durable.*` and `runtimes.*` spans are the ones that explain a slow run;
+ * showing only what the gateway emitted would show the eleven minutes as one
+ * unexplained bar. Services are told apart by colour and named on the row.
+ *
+ * @module views/mcp/TraceTimeline
+ */
+import type { JSX } from 'react';
+import type { OtelSpan } from '../../api/otel/types';
+import type { McpSpanNode } from '../../api/mcp/observability';
+/**
+ * The narrowest a bar is drawn, as a percentage of the run.
+ *
+ * A 2ms authorization check inside a ten-minute run is 0.003% wide, which is
+ * nothing at all — and the check happening is exactly what somebody reading
+ * a trace is looking for. It is drawn as a mark rather than dropped; the
+ * label carries the real duration.
+ */
+export declare const MIN_BAR_PERCENT = 0.75;
+/** One span, placed against the run's clock. */
+export interface TimelineRow {
+    span: OtelSpan;
+    /** How deep in the span tree, for the indent. */
+    depth: number;
+    /** Where the bar starts, as a percentage of the whole run. */
+    left: number;
+    /** How wide it is, as a percentage. Never zero — an instant is still a mark. */
+    width: number;
+}
+/**
+ * The spans of a trace, flattened depth-first and placed against one clock.
+ *
+ * Three cases are not the ordinary one and each is drawn rather than
+ * dropped, because a trace a person opens is a trace they need to read:
+ *
+ * - a span whose timestamps do not parse is placed at the left as a mark —
+ *   it happened, we cannot say when;
+ * - a trace with no duration at all — one instant, or a single unfinished
+ *   span — gives every bar the full width, since there is nothing to divide;
+ * - a child that starts before its parent, which clock skew between two
+ *   services makes real, is clamped into the run rather than drawn off the
+ *   end of it.
+ */
+export declare const timelineRows: (tree: McpSpanNode[]) => TimelineRow[];
+/**
+ * A colour per service, so the four processes are told apart at a glance.
+ *
+ * Named by what the service *is* rather than by its span prefix: the same
+ * palette has to hold when a fifth service starts emitting, and the fallback
+ * is a neutral rather than a collision.
+ */
+export declare const SERVICE_TONE: Record<string, string>;
+/** The bar colour of a span, by the service that emitted it and how it ended. */
+export declare const toneOf: (span: OtelSpan) => string;
+export interface TraceTimelineProps {
+    /** The spans, already parented — `McpRunTrace.tree`. */
+    tree: McpSpanNode[];
+    /** The trace these are of, shown so it can be copied into a log query. */
+    traceId?: string;
+    /** Whether the run is still going, which is why the trace may be short. */
+    live?: boolean;
+}
+export declare const TraceTimeline: ({ tree, traceId, live, }: TraceTimelineProps) => JSX.Element;
+/** The timeline under its own heading, as the Runs detail draws it. */
+export declare const TraceTimelineSection: (props: TraceTimelineProps) => JSX.Element;
+export default TraceTimeline;