@datalayer/core 1.1.60 → 1.2.10

package/lib/views/mcp/Policies.js

@@ -0,0 +1,210 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Heading, Label, Link, Select, Spinner, Text } from '@primer/react';
+import { Blankslate, Table } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { ShieldCheckIcon } from '@primer/octicons-react';
+import { McpErrorBlankslate } from '../../components/mcp/index.js';
+import { useConnectedAgents, useEffectivePolicy } from '../../hooks/useMcp.js';
+import { useNavigate } from '../../hooks/index.js';
+/**
+ * The filter for a preview choice.
+ *
+ * A blank choice is *nobody*, not an agent whose client id is the empty
+ * string: sent as a filter that matches nothing, and a table that renders
+ * empty looks like a policy that grants nothing rather than a query that
+ * asked for no one.
+ */
+export const policyFiltersOf = (previewAs) => ({
+    agent: previewAs.trim() || undefined,
+});
+/** How each layer is named on a row, in the reader's terms. */
+export const layerLabel = (layer, organizationName) => {
+    switch (layer) {
+        case 'platform':
+            return 'Datalayer default';
+        case 'organization':
+            return organizationName
+                ? `required by ${organizationName} (organization)`
+                : 'required by your organization';
+        case 'team':
+            return 'required by your team';
+        default:
+            return 'you asked';
+    }
+};
+const LAYER_VARIANT = {
+    platform: 'secondary',
+    organization: 'accent',
+    team: 'accent',
+    personal: 'attention',
+};
+/**
+ * The rules this page names, in the order it names them, with the words a
+ * reader uses rather than the field names of the policy document.
+ */
+const ROW_ORDER = [
+    {
+        name: 'approval_policy',
+        label: 'Default approval',
+        description: 'What happens before a tool your agent calls actually runs.',
+    },
+    {
+        name: 'allowed_clients',
+        label: 'Clients admitted',
+        description: 'Which MCP clients may hold a grant at all.',
+    },
+    {
+        name: 'require_org_sso',
+        label: 'Sign-in required',
+        description: 'Whether an agent must be authorized through your organization.',
+    },
+    {
+        name: 'require_dpop',
+        label: 'Token binding',
+        description: 'Whether a token must be bound to the key of the client holding it.',
+    },
+    {
+        name: 'max_scopes',
+        label: 'Scopes at most',
+        description: 'The ceiling on what any agent of yours may be granted.',
+    },
+    {
+        name: 'allowed_environments',
+        label: 'Compute: environments',
+        description: 'The environments an agent may launch a sandbox in.',
+    },
+    {
+        name: 'allowed_providers',
+        label: 'Compute: providers',
+        description: 'Where those sandboxes may run.',
+    },
+    { name: 'max_gpu', label: 'Compute: GPU at most', description: '' },
+    {
+        name: 'max_reservation_minutes',
+        label: 'Compute: reservation at most',
+        description: '',
+    },
+    { name: 'credits_per_day', label: 'Spend: credits a day', description: '' },
+    { name: 'calls_per_minute', label: 'Rate: calls a minute', description: '' },
+    { name: 'session_max_hours', label: 'Session at most', description: '' },
+];
+/** A rule's value in the words of the page, whatever shape it arrived in. */
+export const ruleValueLabel = (value) => {
+    if (value === null || value === undefined) {
+        return 'No limit';
+    }
+    if (typeof value === 'boolean') {
+        return value ? 'Required' : 'Not required';
+    }
+    if (Array.isArray(value)) {
+        return value.length === 0 ? 'Nothing admitted' : value.join(', ');
+    }
+    if (typeof value === 'object') {
+        return Object.entries(value)
+            .map(([key, item]) => `${key}: ${String(item)}`)
+            .join(' · ');
+    }
+    return String(value);
+};
+/** The tools of one access kind, and what happens before they run. */
+const ToolGroup = ({ title, description, tools, organizationName, }) => (_jsxs(Box, { sx: { display: 'grid', gap: 2 }, children: [_jsxs(Box, { children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold', display: 'block' }, children: title }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: description })] }), tools.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "No tool of this kind is available to your agents." })) : (_jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: tools.map(tool => (_jsx(Label, { size: "small", variant: !tool.allowed
+                    ? 'danger'
+                    : tool.approval === 'explicit'
+                        ? 'attention'
+                        : 'secondary', title: `${tool.scope} · ${tool.approval ?? 'no approval rule'} · ${layerLabel(tool.decidedBy, organizationName)}`, children: tool.tool }, tool.tool))) }))] }));
+export const Policies = ({ errorState, routes, organizationName, showTitle = true, }) => {
+    const navigate = useNavigate();
+    // Whose policy is being read. Empty is the reader's own.
+    //
+    // The layers differ per agent — a client admitted by one organization and
+    // not another, a scope one grant carries and the next does not — so "what
+    // applies" has no single answer once somebody has connected more than one
+    // agent. Without this the page answered for the reader's own token and
+    // said nothing about which, which is the answer to a question nobody
+    // asked.
+    const [previewAs, setPreviewAs] = useState('');
+    const agents = useConnectedAgents();
+    const policy = useEffectivePolicy(policyFiltersOf(previewAs).agent);
+    const rows = useMemo(() => {
+        const effective = policy.data;
+        if (!effective) {
+            return [];
+        }
+        const byName = new Map(effective.rules.map(rule => [rule.name, rule]));
+        const known = ROW_ORDER.filter(row => byName.has(row.name)).map(row => ({
+            ...row,
+            rule: byName.get(row.name),
+        }));
+        // A rule the gateway answers that this page has no wording for is still
+        // shown: hiding it would make the page a partial answer to "what applies".
+        const rest = effective.rules
+            .filter(rule => !ROW_ORDER.some(row => row.name === rule.name))
+            .map(rule => ({
+            name: rule.name,
+            label: rule.name,
+            description: '',
+            rule,
+        }));
+        return [...known, ...rest];
+    }, [policy.data]);
+    const tools = policy.data?.tools ?? [];
+    const readOnlyTools = tools.filter(tool => tool.access === 'read');
+    const writeTools = tools.filter(tool => tool.access === 'write');
+    const executeTools = tools.filter(tool => tool.access === 'execute' || !tool.access);
+    if (policy.isError) {
+        return (_jsx(McpErrorBlankslate, { state: errorState(policy.error, 'Policies'), onRetry: () => policy.refetch() }));
+    }
+    return (_jsxs(Box, { sx: { display: 'grid', gap: 4, minWidth: 0 }, children: [showTitle && (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Policies" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: previewAs
+                            ? 'What applies to this agent, and which layer decided it.'
+                            : 'What applies to your agents, and which layer decided it.' })] })), (agents.data?.length ?? 0) > 1 && (_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 2,
+                    flexWrap: 'wrap',
+                }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Preview as" }), _jsx(Box, { sx: { minWidth: '18rem' }, children: _jsxs(Select, { value: previewAs, onChange: event => setPreviewAs(event.target.value), "aria-label": "Preview the policy as", children: [_jsx(Select.Option, { value: "", children: "You \u2014 your own token" }), (agents.data ?? []).map(agent => (_jsx(Select.Option, { value: agent.clientId, children: agent.clientName || agent.clientId }, agent.uid)))] }) }), previewAs && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "A grant carries its own scopes and its own admitted clients, so this can differ from what applies to you." }))] })), policy.isPending && !policy.data ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 6 }, children: _jsx(Spinner, {}) })) : rows.length === 0 && tools.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(ShieldCheckIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "The defaults apply" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No agent is connected yet, so nothing narrows the Datalayer defaults. Connect a client and this page fills with what its calls are allowed to do." }) }), _jsx(Link, { as: "button", sx: { cursor: 'pointer' }, onClick: () => navigate(routes.access), children: "Set up a client" })] })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: { display: 'grid', gap: 2 }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "What applies to your agents" }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Scope of this reading: ", policy.data?.scope ?? 'personal', policy.data?.evaluatedAt
+                                        ? ` · evaluated ${policy.data.evaluatedAt}`
+                                        : ''] })] }), _jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h4", id: "effective-policy", children: "Effective policy" }), _jsx(Table.Subtitle, { as: "p", id: "effective-policy-subtitle", children: "Each layer only narrows the one above it, so the strictest rule is what applies." }), _jsxs(Box, { as: "table", "aria-labelledby": "effective-policy", "aria-describedby": "effective-policy-subtitle", sx: { width: '100%', borderCollapse: 'collapse' }, children: [_jsx(Box, { as: "thead", children: _jsx(Box, { as: "tr", children: ['Rule', 'What applies', 'Decided by'].map(header => (_jsx(Box, { as: "th", sx: {
+                                                    textAlign: 'left',
+                                                    fontSize: 0,
+                                                    color: 'fg.muted',
+                                                    fontWeight: 'semibold',
+                                                    py: 2,
+                                                    px: 2,
+                                                    borderBottom: '1px solid',
+                                                    borderColor: 'border.default',
+                                                }, children: header }, header))) }) }), _jsx(Box, { as: "tbody", children: rows.map(row => (_jsxs(Box, { as: "tr", children: [_jsxs(Box, { as: "td", sx: {
+                                                        py: 2,
+                                                        px: 2,
+                                                        borderBottom: '1px solid',
+                                                        borderColor: 'border.muted',
+                                                        verticalAlign: 'top',
+                                                    }, children: [_jsx(Text, { sx: { fontSize: 1, display: 'block' }, children: row.label }), row.description && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: row.description }))] }), _jsx(Box, { as: "td", sx: {
+                                                        py: 2,
+                                                        px: 2,
+                                                        borderBottom: '1px solid',
+                                                        borderColor: 'border.muted',
+                                                        verticalAlign: 'top',
+                                                    }, children: _jsx(Text, { sx: { fontSize: 1 }, children: ruleValueLabel(row.rule.value) }) }), _jsxs(Box, { as: "td", sx: {
+                                                        py: 2,
+                                                        px: 2,
+                                                        borderBottom: '1px solid',
+                                                        borderColor: 'border.muted',
+                                                        verticalAlign: 'top',
+                                                        whiteSpace: 'nowrap',
+                                                    }, children: [_jsx(Label, { size: "small", variant: LAYER_VARIANT[row.rule.decidedBy], children: layerLabel(row.rule.decidedBy, organizationName) }), row.rule.reason && (_jsx(Text, { sx: {
+                                                                fontSize: 0,
+                                                                color: 'fg.muted',
+                                                                display: 'block',
+                                                                mt: 1,
+                                                            }, children: row.rule.reason }))] })] }, row.name))) })] })] }), _jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [_jsx(ToolGroup, { title: "Read-only tools", description: "Tools that only look: listing, reading a cell, reading a source.", tools: readOnlyTools, organizationName: organizationName }), _jsx(ToolGroup, { title: "Tools that change things", description: "Tools that write to a notebook, a document or a source.", tools: writeTools, organizationName: organizationName }), _jsx(ToolGroup, { title: "Tools that launch or spend", description: "Tools that execute code, launch a sandbox or reserve compute.", tools: executeTools, organizationName: organizationName })] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Your token carries ", policy.data?.scopes.length ?? 0, " scopes, which is the ceiling over every rule above:", ' ', (policy.data?.scopes ?? []).join(', ') || 'none', "."] })] })), _jsxs(Box, { sx: {
+                    p: 3,
+                    border: '1px solid',
+                    borderColor: 'border.default',
+                    borderRadius: 2,
+                    bg: 'canvas.subtle',
+                    display: 'grid',
+                    gap: 1,
+                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: "Your own rules" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Narrowing the defaults for your own agents \u2014 approval by tool, a daily credits cap, a denylist, the environments they may use \u2014 is edited here once the policy layers ship. When your agents act inside an organization, that organization's policy applies instead of yours." }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold', mt: 2 }, children: "Organizations you own" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "The policy form for each organization you own, with its history and a preview of what one agent would get, is the same form the organization's MCP tab carries. It joins this page with the layers." })] })] }));
+};
+export default Policies;

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

@@ -0,0 +1,83 @@
+/**
+ * The fields of a policy layer, and the reading of them a layer cannot get
+ * wrong twice.
+ *
+ * One component for the organization's layer and a person's own, because
+ * the rules are the same rules and two forms would be two chances to word
+ * "an empty allowlist is not an allowlist" differently — the reading that
+ * differs from the plain one is exactly the reading that must not drift.
+ *
+ * What the two callers do differ about is what a rule *means*. An
+ * organization's layer is the floor everyone in it stands on; a person's
+ * only narrows further, and cannot loosen. `notes` is how a caller says so
+ * per field, beside the field, at the moment somebody is typing into it.
+ *
+ * @module views/mcp/PolicyForm
+ */
+import type { JSX } from 'react';
+import type { McpPolicyRules } from '../../api/iam/mcpPolicy';
+/** The form's own shape: every field a string, as an input holds it. */
+export type PolicyDraft = {
+    toolDenylist: string;
+    toolAllowlist: string;
+    allowedClients: string;
+    maxCallsPerMinute: string;
+    maxCreditsPerDay: string;
+    maxConcurrentSandboxes: string;
+    gpuHoursPerMonth: string;
+    storageBytes: string;
+    sessionMaxHours: string;
+    /** A checkbox, held as `'true'`/`''` so every field stays a string. */
+    ssoAdmitsWithoutConsent: string;
+};
+export declare const EMPTY_POLICY_DRAFT: PolicyDraft;
+/** A stored list as the textarea shows it: one entry a line. */
+export declare const linesOf: (value: string[] | undefined) => string;
+/**
+ * A textarea back to a list, or `undefined` where nothing was typed.
+ *
+ * `undefined`, never `[]`. An empty array is a rule *set* to nothing, and
+ * for an allowlist that is the difference between "I have not set one" and
+ * a setting that refuses everything.
+ */
+export declare const listFrom: (value: string) => string[] | undefined;
+/** A number field back to a number, or `undefined` where left blank. */
+export declare const numberFrom: (value: string) => number | undefined;
+export declare const textOf: (value: number | undefined) => string;
+/** A stored layer as the form holds it. */
+export declare const draftOf: (rules: McpPolicyRules | null | undefined) => PolicyDraft;
+/**
+ * The draft as it will be stored, or the reason it will not be.
+ *
+ * A cap of zero is caught here rather than at the write, because IAM's
+ * refusal is correct and unhelpful: somebody who typed 0 meant "stop my
+ * agents", and the answer they need is what to do instead.
+ */
+export declare const rulesFrom: (draft: PolicyDraft) => McpPolicyRules | string;
+export declare const policyChanged: (a: PolicyDraft, b: PolicyDraft) => boolean;
+export interface PolicyFormProps {
+    draft: PolicyDraft;
+    onChange: (key: keyof PolicyDraft, value: string) => void;
+    disabled?: boolean;
+    /**
+     * A line drawn under one field, when this layer's reading of it needs
+     * something said — "your organization already caps this at 30", say.
+     *
+     * Beside the field rather than at the top: somebody typing 60 into a box
+     * needs to know while their hands are on it, not after they save.
+     */
+    notes?: Partial<Record<keyof PolicyDraft, React.ReactNode>>;
+    /**
+     * Rendered under the admitted-clients field: what the stored entries
+     * actually name.
+     *
+     * Passed in rather than fetched here, because it needs the scope and
+     * subject this form is editing and the form is deliberately presentational
+     * — organization, team and personal all render it, and each knows its own
+     * layer. Not a `note`: those are one warning line in attention colour, and
+     * this is a list.
+     */
+    belowAllowedClients?: React.ReactNode;
+}
+export declare const PolicyForm: ({ draft, onChange, disabled, notes, belowAllowedClients, }: PolicyFormProps) => JSX.Element;
+export default PolicyForm;

package/lib/views/mcp/PolicyForm.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, TextInput, Textarea, Text, ToggleSwitch, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+export const EMPTY_POLICY_DRAFT = {
+    toolDenylist: '',
+    toolAllowlist: '',
+    allowedClients: '',
+    maxCallsPerMinute: '',
+    maxCreditsPerDay: '',
+    maxConcurrentSandboxes: '',
+    gpuHoursPerMonth: '',
+    storageBytes: '',
+    sessionMaxHours: '',
+    ssoAdmitsWithoutConsent: '',
+};
+/** A stored list as the textarea shows it: one entry a line. */
+export const linesOf = (value) => (value ?? []).join('\n');
+/**
+ * A textarea back to a list, or `undefined` where nothing was typed.
+ *
+ * `undefined`, never `[]`. An empty array is a rule *set* to nothing, and
+ * for an allowlist that is the difference between "I have not set one" and
+ * a setting that refuses everything.
+ */
+export const listFrom = (value) => {
+    const entries = value
+        .split('\n')
+        .map(entry => entry.trim())
+        .filter(Boolean);
+    return entries.length > 0 ? entries : undefined;
+};
+/** A number field back to a number, or `undefined` where left blank. */
+export const numberFrom = (value) => {
+    const trimmed = value.trim();
+    if (!trimmed) {
+        return undefined;
+    }
+    const parsed = Number(trimmed);
+    return Number.isFinite(parsed) ? parsed : undefined;
+};
+export const textOf = (value) => value === undefined || value === null ? '' : String(value);
+/** A stored layer as the form holds it. */
+export const draftOf = (rules) => ({
+    toolDenylist: linesOf(rules?.toolDenylist),
+    toolAllowlist: linesOf(rules?.toolAllowlist),
+    allowedClients: linesOf(rules?.allowedClients),
+    maxCallsPerMinute: textOf(rules?.maxCallsPerMinute),
+    maxCreditsPerDay: textOf(rules?.maxCreditsPerDay),
+    maxConcurrentSandboxes: textOf(rules?.maxConcurrentSandboxes),
+    gpuHoursPerMonth: textOf(rules?.gpuHoursPerMonth),
+    storageBytes: textOf(rules?.storageBytes),
+    sessionMaxHours: textOf(rules?.sessionMaxHours),
+    ssoAdmitsWithoutConsent: rules?.ssoAdmitsWithoutConsent ? 'true' : '',
+});
+/**
+ * The draft as it will be stored, or the reason it will not be.
+ *
+ * A cap of zero is caught here rather than at the write, because IAM's
+ * refusal is correct and unhelpful: somebody who typed 0 meant "stop my
+ * agents", and the answer they need is what to do instead.
+ */
+export const rulesFrom = (draft) => {
+    const numbers = [
+        ['maxCallsPerMinute', 'Calls per minute'],
+        ['maxCreditsPerDay', 'Credits per day'],
+        ['maxConcurrentSandboxes', 'Sandboxes at once'],
+        ['gpuHoursPerMonth', 'GPU-hours per month'],
+        ['storageBytes', 'Storage'],
+        ['sessionMaxHours', 'Session at most'],
+    ];
+    for (const [key, label] of numbers) {
+        const typed = draft[key].trim();
+        if (!typed) {
+            continue;
+        }
+        const parsed = Number(typed);
+        if (!Number.isFinite(parsed)) {
+            return `${label} must be a number, or empty for no limit.`;
+        }
+        if (parsed <= 0) {
+            return (`${label} cannot be 0. A non-positive limit reads as *no limit*, so ` +
+                'a zero written to stop your agents would lift the limit instead. ' +
+                'To stop an agent, revoke its grant or deny the tools it uses.');
+        }
+    }
+    return {
+        toolDenylist: listFrom(draft.toolDenylist),
+        toolAllowlist: listFrom(draft.toolAllowlist),
+        allowedClients: listFrom(draft.allowedClients),
+        maxCallsPerMinute: numberFrom(draft.maxCallsPerMinute),
+        maxCreditsPerDay: numberFrom(draft.maxCreditsPerDay),
+        maxConcurrentSandboxes: numberFrom(draft.maxConcurrentSandboxes),
+        gpuHoursPerMonth: numberFrom(draft.gpuHoursPerMonth),
+        storageBytes: numberFrom(draft.storageBytes),
+        sessionMaxHours: numberFrom(draft.sessionMaxHours),
+        // `undefined` rather than `false` when it is off, so an organization that
+        // never touched it stores no rule at all — the same distinction the lists
+        // draw between "not set" and "set to nothing".
+        ssoAdmitsWithoutConsent: draft.ssoAdmitsWithoutConsent === 'true' ? true : undefined,
+    };
+};
+export const policyChanged = (a, b) => Object.keys(EMPTY_POLICY_DRAFT).some(key => a[key] !== b[key]);
+const Note = ({ children, }) => children ? (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'attention.fg', mt: 1, mb: 0 }, children: children })) : null;
+export const PolicyForm = ({ draft, onChange, disabled = false, notes = {}, belowAllowedClients, }) => (_jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Denied tools" }), _jsx(Textarea, { block: true, rows: 3, disabled: disabled, value: draft.toolDenylist, onChange: event => onChange('toolDenylist', event.target.value), placeholder: 'execute_cell\ndelete_file' }), _jsx(FormControl.Caption, { children: "One a line. A denial is added to every other layer\u2019s and can never be lifted by one." }), _jsx(Note, { children: notes.toolDenylist })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Permitted tools" }), _jsx(Textarea, { block: true, rows: 3, disabled: disabled, value: draft.toolAllowlist, onChange: event => onChange('toolAllowlist', event.target.value), placeholder: 'read_cell\nlist_notebooks' }), _jsxs(FormControl.Caption, { children: ["One a line, and everything else is refused.", ' ', _jsx("strong", { children: "Leave it empty to set no allowlist" }), " \u2014 empty means \u201CI have not set one\u201D, not \u201Cnothing is permitted\u201D, because the second would stop every agent at once."] }), _jsx(Note, { children: notes.toolAllowlist })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Admitted clients" }), _jsx(Textarea, { block: true, rows: 3, disabled: disabled, value: draft.allowedClients, onChange: event => onChange('allowedClients', event.target.value), placeholder: 'https://claude.ai/.well-known/mcp-client.json\ncursor.com' }), _jsx(FormControl.Caption, { children: "A client\u2019s document URL, or just its hostname. Empty is not an allowlist, for the same reason as above." }), _jsx(Note, { children: notes.allowedClients }), belowAllowedClients && _jsx(Box, { sx: { mt: 2 }, children: belowAllowedClients })] }), _jsxs(Box, { sx: {
+                display: 'grid',
+                gap: 3,
+                gridTemplateColumns: ['1fr', '1fr 1fr 1fr'],
+            }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Calls per minute" }), _jsx(TextInput, { block: true, type: "number", min: 1, disabled: disabled, value: draft.maxCallsPerMinute, onChange: event => onChange('maxCallsPerMinute', event.target.value) }), _jsx(FormControl.Caption, { children: "Empty for no limit." }), _jsx(Note, { children: notes.maxCallsPerMinute })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Credits per day" }), _jsx(TextInput, { block: true, type: "number", min: 1, disabled: disabled, value: draft.maxCreditsPerDay, onChange: event => onChange('maxCreditsPerDay', event.target.value) }), _jsx(FormControl.Caption, { children: "Checked before a launch, never mid-session." }), _jsx(Note, { children: notes.maxCreditsPerDay })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Sandboxes at once" }), _jsx(TextInput, { block: true, type: "number", min: 1, disabled: disabled, value: draft.maxConcurrentSandboxes, onChange: event => onChange('maxConcurrentSandboxes', event.target.value) }), _jsx(FormControl.Caption, { children: "Counted across the layer that set it." }), _jsx(Note, { children: notes.maxConcurrentSandboxes })] })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "GPU-hours per month" }), _jsx(TextInput, { block: true, type: "number", min: 0, step: "any", disabled: disabled, value: draft.gpuHoursPerMonth, onChange: event => onChange('gpuHoursPerMonth', event.target.value) }), _jsxs(FormControl.Caption, { children: ["Empty for no limit. Refuses a launch on an environment that", ' ', _jsx("strong", { children: "has a GPU" }), " \u2014 a CPU sandbox is never affected, whatever this reads. Fractions are allowed: half an hour on one card is 0.5.", _jsx("br", {}), "Over the ", _jsx("strong", { children: "last 30 days" }), ", not the calendar month, so a limit cannot be spent twice across a reset \u2014 which means it will not line up with an invoice period.", ' ', _jsx("strong", { children: "Every GPU-hour billed to this scope counts, not only your agents\u2019" }), ' ', "\u2014 a notebook somebody ran by hand is in this number too."] }), _jsx(Note, { children: notes.gpuHoursPerMonth })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Storage" }), _jsx(TextInput, { block: true, type: "number", min: 0, step: 1, disabled: disabled, value: draft.storageBytes, onChange: event => onChange('storageBytes', event.target.value), trailingVisual: "bytes" }), _jsxs(FormControl.Caption, { children: ["Empty for no limit. In ", _jsx("strong", { children: "bytes" }), " \u2014 1 GB is 1073741824, 1 TB is 1099511627776. A number whose unit is implied is one somebody eventually reads as the other, and this is compared against a figure reported in bytes.", _jsx("br", {}), "Checked on ", _jsx("strong", { children: "every" }), " launch, not only one that attaches content: every sandbox can write.", ' ', _jsx("strong", { children: "Every kept version counts" }), " \u2014 an object\u2019s size is its newest version\u2019s, so a hundred versions of a 1\u00A0GB file are 100\u00A0GB, and deleting the newest frees none of the rest."] }), _jsx(Note, { children: notes.storageBytes })] }), _jsxs(Box, { sx: {
+                display: 'grid',
+                gap: 3,
+                gridTemplateColumns: ['1fr', '1fr 1fr'],
+            }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Session at most" }), _jsx(TextInput, { block: true, type: "number", min: 1, disabled: disabled, value: draft.sessionMaxHours, onChange: event => onChange('sessionMaxHours', event.target.value) }), _jsx(FormControl.Caption, { children: "Hours before a person signs in and consents again. It bites at the refresh: a token already minted lives out its own short life, and the connection ends when the client next tries to extend it. Empty for no limit." }), _jsx(Note, { children: notes.sessionMaxHours })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Your directory may stand in for the consent screen" }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, mt: 1 }, children: [_jsx(ToggleSwitch, { size: "small", checked: draft.ssoAdmitsWithoutConsent === 'true', disabled: disabled, "aria-labelledby": "sso-admits-without-consent-label", onClick: () => onChange('ssoAdmitsWithoutConsent', draft.ssoAdmitsWithoutConsent === 'true' ? '' : 'true') }), _jsx(Text, { id: "sso-admits-without-consent-label", sx: { fontSize: 1 }, children: "Skip it for clients you already admit" })] }), _jsxs(FormControl.Caption, { children: ["Only for somebody who signed in through one of", ' ', _jsx("strong", { children: "your own" }), " enabled identity providers, and only for a client named in ", _jsx("strong", { children: "Admitted clients" }), " above \u2014 which must not be empty. Every other session still sees the screen. This does not require anyone to sign in through your directory; it only says the screen adds nothing when they did."] }), _jsx(Note, { children: notes.ssoAdmitsWithoutConsent })] })] })] }));
+export default PolicyForm;

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

@@ -0,0 +1,58 @@
+/**
+ * Who changed this policy, and when.
+ *
+ * The one question a policy page cannot answer from the policy itself: it
+ * shows what is in force, and says nothing about how it got that way. An
+ * administrator who finds a denylist they did not write has, without this,
+ * nowhere to ask.
+ *
+ * The rows come from the audit — IAM records `mcp.policy.set` and
+ * `mcp.policy.remove` with who, when, the scope, the subject and the
+ * version. They are read with `?method=`, narrowed to the organization,
+ * which is why that filter exists: without it these rows are reachable only
+ * by reading past every tool call in the collection.
+ *
+ * **It can be empty for a real reason.** IAM's rows only reach the
+ * collection where a deployment has configured the Solr audit sink; with the
+ * default log sink they are in a log pipeline instead. An empty drawer that
+ * implied "nobody has ever changed this" would be a lie in exactly the
+ * deployment where somebody is trying to find out, so it says which of the
+ * two it is.
+ *
+ * @module views/mcp/PolicyHistory
+ */
+import type { JSX } from 'react';
+import type { McpAuditEvent } from '../../models/McpAuditEvent';
+/** The methods IAM writes when a policy layer is written or removed. */
+export declare const POLICY_AUDIT_METHODS: readonly ["mcp.policy.set", "mcp.policy.remove"];
+export interface PolicyHistoryProps {
+    /** The organization whose audit this is read from. */
+    orgUid: string;
+    /**
+     * The layer, when the drawer is about one.
+     *
+     * The audit is queried by organization and method — `subject_uid` lives in
+     * `clientInfo` and is not a Solr field — so one layer's rows are picked
+     * out of the answer here. That is honest for a handful of policy changes
+     * and would not be for a busy tool-call listing.
+     */
+    subjectUid?: string;
+    limit?: number;
+}
+/**
+ * What a change was made *through*, or `''` for somebody's own browser.
+ *
+ * The row names the person either way — an agent acts with exactly the
+ * access of whoever authorized it, so the person is accountable for what it
+ * did. What the row must not do is stop there: this drawer exists for the
+ * administrator who finds a denylist they did not write, and a row naming
+ * only them tells them they wrote it.
+ *
+ * The agent's own uid wins over the client id. A service agent is a named
+ * thing somebody can go and look at; a client id is the software it ran in.
+ */
+export declare const actedThrough: (event: McpAuditEvent) => string;
+/** What one row says about a change, in the words of the page it is on. */
+export declare const describeChange: (event: McpAuditEvent) => string;
+export declare const PolicyHistory: ({ orgUid, subjectUid, limit, }: PolicyHistoryProps) => JSX.Element;
+export default PolicyHistory;

package/lib/views/mcp/PolicyHistory.js

@@ -0,0 +1,75 @@
+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 a change was made *through*, or `''` for somebody's own browser.
+ *
+ * The row names the person either way — an agent acts with exactly the
+ * access of whoever authorized it, so the person is accountable for what it
+ * did. What the row must not do is stop there: this drawer exists for the
+ * administrator who finds a denylist they did not write, and a row naming
+ * only them tells them they wrote it.
+ *
+ * The agent's own uid wins over the client id. A service agent is a named
+ * thing somebody can go and look at; a client id is the software it ran in.
+ */
+export const actedThrough = (event) => String(event.agentUid || event.clientId || '');
+/** 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' }), actedThrough(event) && (_jsxs(Label, { size: "small", variant: "attention", children: ["through ", actedThrough(event)] })), _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/RunDetail.d.ts

@@ -0,0 +1,87 @@
+/**
+ * One run: what it is doing, what it has printed, and the two things a
+ * person can do about it.
+ *
+ * A task is a tool call that outlived the request that asked for it, so the
+ * client that started it is usually gone. This is where somebody comes back
+ * to it — from another device, another session, or after closing the
+ * notebook — which is why it reads from the task record rather than from
+ * anything the caller held.
+ *
+ * **Cancelling stops the work, not just the record of it.** The gateway
+ * interrupts the kernel and then gives the tool a moment to hand back what
+ * the cell printed, so a run cancelled at minute nine of ten arrives here
+ * with its nine minutes of output and the `KeyboardInterrupt` that ended it.
+ * That is the reason the outputs are drawn for a cancelled run at all, and
+ * the reason the button says "Cancel" rather than "Stop watching".
+ *
+ * **`input_required` is a run asking, not a run idling.** It has stopped and
+ * will not move until somebody answers, so it is drawn as an open question
+ * with the answer box beside it rather than as another status label.
+ *
+ * Live while it runs: `useTaskEvents` patches the task's cache entry from
+ * the server's event stream, and `useTask` polls underneath as the fallback
+ * for a proxy that will not hold a stream open.
+ *
+ * @module views/mcp/RunDetail
+ */
+import type { JSX } from 'react';
+import type { McpTask, McpTaskStatus } from '../../models/McpTask';
+import type { McpSpanNode } from '../../api/mcp/observability';
+import { type McpErrorStateFn, type McpRoutes } from './types';
+/** How a run's status is drawn. Shared with the runs list. */
+export declare const RUN_STATUS_LOOK: Record<McpTaskStatus, {
+    label: string;
+    variant: 'success' | 'attention' | 'secondary' | 'danger';
+}>;
+/** Whether the run has stopped for good. */
+export declare const isRunOver: (status: McpTaskStatus) => boolean;
+/**
+ * Everything the run has printed, as text.
+ *
+ * Two shapes reach here and both are the run's output: the streamed
+ * `outputs`, and the `result` a finished tool returned. A cancelled run has
+ * the first and usually the second — the partial output is promoted to the
+ * result when it stops — so they are concatenated rather than chosen
+ * between, and de-duplicated by text so a promoted partial is not printed
+ * twice.
+ */
+export declare const outputTextOf: (task: McpTask) => string;
+/**
+ * A run for the documentation to draw: cancelled mid-flight, holding the
+ * lines it printed before it stopped.
+ *
+ * Cancelled rather than completed on purpose. It is the state that shows
+ * both halves of what this view is for — the output a run keeps when it is
+ * stopped, and the reason it stopped — and it is the one a reader is most
+ * likely to be looking at when they open the documentation.
+ */
+export declare const SAMPLE_RUN: McpTask;
+/**
+ * The spans that run left behind, for the documentation to draw.
+ *
+ * The shape is the one a reader needs to recognise: the gateway's twenty-two
+ * seconds are almost entirely the sandbox's, and the durable step between
+ * them explains the gap. A timeline drawn from an empty trace would teach
+ * nobody what the timeline is for.
+ */
+export declare const SAMPLE_TRACE: McpSpanNode[];
+export interface RunDetailProps {
+    /** The run to draw. */
+    taskUid: string;
+    /** The application's words for a failed request. */
+    errorState: McpErrorStateFn;
+    /** Where this application puts the surfaces this view links to. */
+    routes: McpRoutes;
+    /**
+     * Draw `SAMPLE_RUN` instead of asking the server, for documentation.
+     *
+     * The real component with fixed data, rather than a screenshot or a copy:
+     * a change to how a run is drawn reaches the documentation by itself, and
+     * a change that breaks it breaks the build rather than going unnoticed
+     * until somebody compares a picture.
+     */
+    mock?: boolean;
+}
+export declare const RunDetail: ({ taskUid, errorState, routes, mock, }: RunDetailProps) => JSX.Element;
+export default RunDetail;