@datalayer/core 1.1.60 → 1.2.10

package/lib/views/mcp/OrganizationPolicy.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Button, Flash, Heading, Spinner, Text } from '@primer/react';
+import { Dialog } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { McpErrorBlankslate } from '../../components/mcp/index.js';
+import { useDeleteMcpPolicyLayer, useMcpPolicyLayer, useSetMcpPolicyLayer, } 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';
+export const OrganizationPolicy = ({ errorState, orgUid, readOnly = false, showTitle = true, }) => {
+    const { enqueueToast } = useToast();
+    const layer = useMcpPolicyLayer('organization', orgUid);
+    const save = useSetMcpPolicyLayer('organization', orgUid);
+    const remove = useDeleteMcpPolicyLayer('organization', orgUid);
+    const [draft, setDraft] = useState(EMPTY_POLICY_DRAFT);
+    const [removing, setRemoving] = useState(false);
+    const [conflict, setConflict] = useState('');
+    const [refusal, setRefusal] = useState('');
+    /**
+     * The version that was read, sent back with the write.
+     *
+     * `undefined` when nobody has written this layer: inventing a version
+     * would make the first write of every policy a conflict.
+     */
+    const version = layer.data?.version;
+    const stored = useMemo(() => draftOf(layer.data), [layer.data]);
+    // The form follows what was read, including after a conflict has been
+    // resolved by re-reading: an editor still showing the losing draft is how
+    // somebody reapplies the change that was already refused.
+    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: version }, {
+            onSuccess: () => {
+                enqueueToast('Policy saved. It applies to the next call.', {
+                    variant: 'success',
+                });
+            },
+            onError: error => {
+                if (error instanceof McpPolicyConflict) {
+                    // Not a toast. A toast disappears, and this needs an action —
+                    // the draft in front of them is the one that lost.
+                    setConflict(error.message);
+                    return;
+                }
+                enqueueToast(`Could not save: ${error.message}`, {
+                    variant: 'error',
+                });
+            },
+        });
+    };
+    const confirmRemove = () => {
+        remove.mutate(undefined, {
+            onSuccess: () => {
+                setRemoving(false);
+                enqueueToast('Policy removed. This layer narrows nothing.', {
+                    variant: 'success',
+                });
+            },
+            onError: error => {
+                setRemoving(false);
+                enqueueToast(`Could not remove: ${error.message}`, {
+                    variant: 'error',
+                });
+            },
+        });
+    };
+    if (layer.isError) {
+        return (_jsx(McpErrorBlankslate, { state: errorState(layer.error, "The organization's MCP policy"), onRetry: () => layer.refetch() }));
+    }
+    if (layer.isPending && layer.data === undefined) {
+        return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 5 }, children: _jsx(Spinner, {}) }));
+    }
+    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: "Organization Policy" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "What this organization narrows for every agent acting in it. Each layer only narrows \u2014 a team, or a person, can be stricter than this and never looser." })] })), 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, belowAllowedClients: _jsx(AdmittedClients, { scope: "organization", subjectUid: orgUid, edited: draft.allowedClients !== stored.allowedClients }) }), !readOnly && (_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center' }, children: [_jsx(Button, { variant: "primary", onClick: apply, disabled: !changed || save.isPending, children: "Save policy" }), changed && (_jsx(Button, { variant: "invisible", onClick: () => setDraft(stored), children: "Discard changes" })), layer.data && (_jsx(Box, { sx: { marginLeft: 'auto' }, children: _jsx(Button, { variant: "danger", onClick: () => setRemoving(true), children: "Remove policy" }) }))] })), _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: orgUid })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "Only these rules can be stored. A rule the gateway does not enforce is refused rather than kept, so this page cannot promise something that never happens." }), removing && (_jsx(Dialog, { title: "Remove this policy?", onClose: () => setRemoving(false), footerButtons: [
+                    {
+                        buttonType: 'default',
+                        content: 'Keep it',
+                        onClick: () => setRemoving(false),
+                    },
+                    {
+                        buttonType: 'danger',
+                        content: 'Remove',
+                        onClick: confirmRemove,
+                        disabled: remove.isPending,
+                    },
+                ], children: _jsxs(Text, { sx: { fontSize: 1 }, children: ["This organization stops narrowing anything. Its agents fall back to the platform defaults and to whatever each team and person has set \u2014 which may be ", _jsx("strong", { children: "wider" }), " than what you have now. Nothing already done is undone."] }) }))] }));
+};
+export default OrganizationPolicy;

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

@@ -0,0 +1,69 @@
+/**
+ * What the organization used, against what it may — and which agent used it.
+ *
+ * The console had a role called `organization_usage_reviewer` and no page of
+ * usage: the reviewer was sent to the Overview, which counts runs and
+ * refusals and says nothing about a limit. A budget with no spend against it
+ * is a number somebody set once.
+ *
+ * The breakdown underneath is the half that decides anything. A quota bar at
+ * ninety percent tells an administrator to act; it does not say what to turn
+ * off. The rows name the agents, biggest spender first, because that is the
+ * order the question is asked in.
+ *
+ * **Unreadable is not zero.** A figure the gateway could not read is drawn
+ * as "not available" with the reason, never as a blank or a 0 — they look
+ * the same in a dashboard and mean opposite things. For the same reason the
+ * breakdown is hidden entirely when the total could not be read: the parts
+ * under an unreadable whole make every agent look cheap, and a reader
+ * concludes the budget is fine.
+ *
+ * Limits are **changed in IAM**, not here. The page says where.
+ *
+ * @module views/mcp/OrganizationUsage
+ */
+import type { JSX } from 'react';
+import type { McpAgentSpend, McpOrganizationUsage } from '../../api/mcp/organizations';
+import { type McpErrorStateFn } from './types';
+export interface OrganizationUsageProps {
+    /** The application's words for a failed request. */
+    errorState: McpErrorStateFn;
+    /** The organization whose use this is. */
+    orgUid: string;
+    /** One team of it, rather than all of them. */
+    teamUid?: string;
+    /** Drawn without its heading, when the page around it carries one. */
+    showTitle?: boolean;
+}
+export type SpendRow = McpAgentSpend & {
+    id: string;
+};
+/** Two decimals for credits, none for counts. */
+export declare const amount: (value: number) => string;
+/**
+ * How close to the limit, said in colour.
+ *
+ * Three bands rather than a gradient: a reader acts at "nearly there" and
+ * not at eighty-one percent, and a bar that reddens smoothly gives them no
+ * moment to act on.
+ */
+export declare const quotaTone: (fraction: number) => "success" | "attention" | "danger";
+/**
+ * What the breakdown should show: the rows, nothing, or a refusal to guess.
+ *
+ * `unreadable` is not `empty`. The gateway sends no rows in both cases —
+ * because nobody spent anything, or because it could not read the ledger —
+ * and drawing them the same way tells a reader "your agents were quiet"
+ * when the truth is "we cannot tell you". They act on that differently.
+ */
+export declare const breakdownState: (usage: McpOrganizationUsage | undefined) => "unreadable" | "empty" | "rows";
+/**
+ * The rows, keyed the way the gateway grouped them.
+ *
+ * The agent uid first: service agents reach Runtimes through the gateway and
+ * carry *its* client id, so keying on that would collapse an organization's
+ * pipelines into one row costing the sum of several.
+ */
+export declare const spendRowsOf: (byAgent: McpAgentSpend[]) => SpendRow[];
+export declare const OrganizationUsage: ({ errorState, orgUid, teamUid, showTitle, }: OrganizationUsageProps) => JSX.Element;
+export default OrganizationUsage;

package/lib/views/mcp/OrganizationUsage.js

@@ -0,0 +1,113 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Heading, Label, ProgressBar, Spinner, Text } from '@primer/react';
+import { Blankslate, DataTable, Table } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { GraphIcon } from '@primer/octicons-react';
+import { ClientBadge, McpErrorBlankslate } from '../../components/mcp/index.js';
+import { useOrgMcpUsage } from '../../hooks/useMcp.js';
+/** The quotas, in the order they are read. */
+const QUOTAS = [
+    {
+        key: 'creditsPerDay',
+        label: 'Credits today',
+        // Named so the reader knows the window without reading the number: a
+        // daily budget and a monthly one differ by thirty, and the mistake is
+        // silent.
+        hint: 'Against the daily budget',
+    },
+    {
+        key: 'concurrentSandboxes',
+        label: 'Sandboxes running',
+        hint: 'Against the concurrency limit',
+    },
+    {
+        key: 'callsPerMinute',
+        label: 'Calls per minute',
+        // The gateway reports this limit without a use, and says why: the
+        // windows are per subject, so an organization's "calls this minute" is
+        // a sum over subjects that changes while it is being read.
+        hint: 'The cap; refusals are where you meet it',
+    },
+];
+/** Two decimals for credits, none for counts. */
+export const amount = (value) => Number.isInteger(value) ? String(value) : value.toFixed(2);
+/**
+ * How close to the limit, said in colour.
+ *
+ * Three bands rather than a gradient: a reader acts at "nearly there" and
+ * not at eighty-one percent, and a bar that reddens smoothly gives them no
+ * moment to act on.
+ */
+export const quotaTone = (fraction) => fraction >= 0.9 ? 'danger' : fraction >= 0.75 ? 'attention' : 'success';
+/**
+ * What the breakdown should show: the rows, nothing, or a refusal to guess.
+ *
+ * `unreadable` is not `empty`. The gateway sends no rows in both cases —
+ * because nobody spent anything, or because it could not read the ledger —
+ * and drawing them the same way tells a reader "your agents were quiet"
+ * when the truth is "we cannot tell you". They act on that differently.
+ */
+export const breakdownState = (usage) => {
+    if (!usage || usage.quotas?.creditsPerDay?.unknown) {
+        return 'unreadable';
+    }
+    return (usage.byAgent ?? []).length > 0 ? 'rows' : 'empty';
+};
+/**
+ * The rows, keyed the way the gateway grouped them.
+ *
+ * The agent uid first: service agents reach Runtimes through the gateway and
+ * carry *its* client id, so keying on that would collapse an organization's
+ * pipelines into one row costing the sum of several.
+ */
+export const spendRowsOf = (byAgent) => byAgent.map((entry, index) => ({
+    ...entry,
+    id: entry.agentUid || entry.clientId || String(index),
+}));
+const QuotaCard = ({ label, hint, quota, }) => {
+    const limit = quota?.limit;
+    const used = quota?.used;
+    const fraction = quota?.fraction;
+    return (_jsxs(Box, { sx: {
+            border: '1px solid',
+            borderColor: 'border.default',
+            borderRadius: 2,
+            p: 3,
+            flex: '1 1 220px',
+            minWidth: 0,
+        }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: label }), _jsx(Box, { sx: { mt: 2, display: 'flex', alignItems: 'baseline', gap: 2 }, children: quota?.unknown ? (_jsx(Text, { sx: { fontSize: 2, color: 'fg.muted' }, children: "Not available" })) : (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 4, fontWeight: 'bold' }, children: typeof used === 'number' ? amount(used) : '—' }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: typeof limit === 'number'
+                                ? `of ${amount(limit)}`
+                                : 'no limit set' })] })) }), typeof fraction === 'number' && (_jsx(Box, { sx: { mt: 2 }, children: _jsx(ProgressBar, { progress: Math.min(100, fraction * 100), barSize: "small", bg: `${quotaTone(fraction)}.emphasis`, "aria-label": `${label}: ${Math.round(fraction * 100)}% of the limit` }) })), _jsx(Text, { as: "p", sx: { mt: 2, mb: 0, fontSize: 0, color: 'fg.muted' }, children: quota?.unknown ? quota.unknown : hint })] }));
+};
+export const OrganizationUsage = ({ errorState, orgUid, teamUid, showTitle = true, }) => {
+    const usage = useOrgMcpUsage(orgUid, teamUid ? { team: teamUid } : {});
+    const rows = useMemo(() => spendRowsOf(usage.data?.byAgent ?? []), [usage.data]);
+    if (usage.isLoading) {
+        return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', p: 6 }, children: _jsx(Spinner, {}) }));
+    }
+    if (usage.isError) {
+        return (_jsx(McpErrorBlankslate, { state: errorState(usage.error, 'The usage'), onRetry: () => void usage.refetch() }));
+    }
+    const quotas = usage.data?.quotas ?? {};
+    const breakdown = breakdownState(usage.data);
+    return (_jsxs(Box, { children: [showTitle && (_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Usage" })), _jsx(Text, { as: "p", sx: { color: 'fg.muted', mt: 0, mb: 3 }, children: "What this organization's agents used over the last day, against what they may use. Limits are set in the organization's MCP policy, not here." }), _jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 3 }, children: QUOTAS.map(quota => (_jsx(QuotaCard, { label: quota.label, hint: quota.hint, quota: quotas[quota.key] }, quota.key))) }), _jsx(Heading, { as: "h3", sx: { fontSize: 2, mt: 4, mb: 2 }, children: "Credits by agent" }), breakdown === 'unreadable' ? (_jsxs(Blankslate, { border: true, children: [_jsx(Blankslate.Visual, { children: _jsx(GraphIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "The day's spend could not be read" }), _jsx(Blankslate.Description, { children: _jsx(Text, { as: "p", sx: { textAlign: 'center' }, children: "A breakdown of a total nobody could read would make every agent look cheap. Try again in a moment." }) })] })) : breakdown === 'empty' ? (_jsxs(Blankslate, { border: true, children: [_jsx(Blankslate.Visual, { children: _jsx(GraphIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "No agent spent credits today" }), _jsx(Blankslate.Description, { children: _jsx(Text, { as: "p", sx: { textAlign: 'center' }, children: "Work a person ran themselves is in the total above, and is not an agent's." }) })] })) : (_jsx(Table.Container, { children: _jsx(DataTable, { "aria-labelledby": "usage-by-agent", data: rows, columns: [
+                        {
+                            header: 'Agent',
+                            field: 'clientId',
+                            rowHeader: true,
+                            renderCell: row => row.clientId ? (_jsx(ClientBadge, { clientId: row.clientId })) : (_jsx(Label, { variant: "secondary", children: row.agentUid })),
+                        },
+                        {
+                            header: 'Credits',
+                            field: 'credits',
+                            renderCell: row => amount(row.credits),
+                        },
+                        {
+                            header: 'Records',
+                            field: 'records',
+                            renderCell: row => String(row.records),
+                        },
+                    ] }) }))] }));
+};
+export default OrganizationUsage;

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

@@ -0,0 +1,54 @@
+/**
+ * The rules a person sets for their own agents.
+ *
+ * The same six rules as an organization's layer, over the same
+ * `PolicyForm` — but they mean something narrower here, and the difference
+ * is the whole reason this page needs saying anything at all.
+ *
+ * **A personal layer only narrows.** Every layer intersects: the platform's
+ * defaults, then the organization's, then the team's, then this. Denying a
+ * tool here denies it. *Permitting* one an organization denies does nothing
+ * — the denial unions across layers and cannot be lifted from below. A cap
+ * of 60 under an organization's 30 leaves the effective cap at 30.
+ *
+ * So the page compares what is typed against the organizations the person
+ * belongs to and says, **beside the field while their hands are on it**,
+ * where a value will have no effect and why.
+ *
+ * It does not *refuse* those values, and that is deliberate. The same
+ * personal layer applies to personal-scope work, where no organization
+ * narrows anything — a rule that is wider than one employer's is still the
+ * rule that governs an agent acting for the person alone. Refusing it would
+ * make somebody's own policy unwritable because of a place they happen to
+ * work.
+ *
+ * @module views/mcp/PersonalPolicy
+ */
+import type { JSX } from 'react';
+import { type McpPolicyRules } from '../../api/iam/mcpPolicy';
+import type { McpErrorStateFn } from './types';
+/** One organization the person belongs to, and what it narrows. */
+export interface NarrowingOrganization {
+    uid: string;
+    name: string;
+    rules: McpPolicyRules | null;
+}
+export interface PersonalPolicyProps {
+    errorState: McpErrorStateFn;
+    /** The person whose layer this is. */
+    userUid: string;
+    /**
+     * The organizations they belong to, with each one's layer.
+     *
+     * Empty is the ordinary case for somebody with no organization, and the
+     * page simply says nothing about narrowing.
+     */
+    organizations?: NarrowingOrganization[];
+    showTitle?: boolean;
+}
+/** A list rule already denied elsewhere, as a sentence naming who. */
+export declare const deniedElsewhere: (typed: string, organizations: NarrowingOrganization[]) => string[];
+/** A number rule already capped lower elsewhere. */
+export declare const cappedLower: (typed: string, organizations: NarrowingOrganization[], rule: "maxCallsPerMinute" | "maxCreditsPerDay" | "maxConcurrentSandboxes") => string[];
+export declare const PersonalPolicy: ({ errorState, userUid, organizations, showTitle, }: PersonalPolicyProps) => JSX.Element;
+export default PersonalPolicy;

package/lib/views/mcp/PersonalPolicy.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Button, Flash, Heading, Spinner, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { McpErrorBlankslate } from '../../components/mcp/index.js';
+import { useDeleteMcpPolicyLayer, useMcpPolicyLayer, useSetMcpPolicyLayer, } from '../../hooks/useMcp.js';
+import { useToast } from '../../hooks/index.js';
+import { McpPolicyConflict, } from '../../api/iam/mcpPolicy.js';
+import { AdmittedClients } from './AdmittedClients.js';
+import { EMPTY_POLICY_DRAFT, PolicyForm, draftOf, policyChanged, rulesFrom, } from './PolicyForm.js';
+/** A list rule already denied elsewhere, as a sentence naming who. */
+export const deniedElsewhere = (typed, organizations) => {
+    const wanted = typed
+        .split('\n')
+        .map(entry => entry.trim())
+        .filter(Boolean);
+    const said = [];
+    for (const organization of organizations) {
+        const denied = (organization.rules?.toolDenylist ?? []).filter(tool => wanted.includes(tool));
+        if (denied.length > 0) {
+            said.push(`${organization.name} denies ${denied.join(', ')}`);
+        }
+    }
+    return said;
+};
+/** A number rule already capped lower elsewhere. */
+export const cappedLower = (typed, organizations, rule) => {
+    const value = Number(typed.trim());
+    // The blank check is belt-and-braces rather than load-bearing: `Number('')`
+    // is 0, and no positive organization cap is below 0, so a blank field says
+    // nothing either way today. It is kept because that depends on the
+    // `theirs > 0` guard below, and a reader changing one should not have to
+    // notice it was holding up the other.
+    if (!typed.trim() || !Number.isFinite(value)) {
+        return [];
+    }
+    const said = [];
+    for (const organization of organizations) {
+        const theirs = organization.rules?.[rule];
+        if (typeof theirs === 'number' && theirs > 0 && theirs < value) {
+            said.push(`${organization.name} caps it at ${theirs}`);
+        }
+    }
+    return said;
+};
+export const PersonalPolicy = ({ errorState, userUid, organizations = [], showTitle = true, }) => {
+    const { enqueueToast } = useToast();
+    const layer = useMcpPolicyLayer('personal', userUid);
+    const save = useSetMcpPolicyLayer('personal', userUid);
+    const remove = useDeleteMcpPolicyLayer('personal', userUid);
+    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 }));
+    /**
+     * What to say beside each field, and nothing where there is nothing to
+     * say. Recomputed as they type, because the point is to be read while
+     * the value is still being chosen.
+     */
+    const notes = useMemo(() => {
+        if (organizations.length === 0) {
+            return {};
+        }
+        const built = {};
+        const permitted = deniedElsewhere(draft.toolAllowlist, organizations);
+        if (permitted.length > 0) {
+            built.toolAllowlist = `Permitting a tool here does not lift a denial: ${permitted.join('; ')}. Your agents still cannot use those when acting for them.`;
+        }
+        for (const key of [
+            'maxCallsPerMinute',
+            'maxCreditsPerDay',
+            'maxConcurrentSandboxes',
+        ]) {
+            const lower = cappedLower(draft[key], organizations, key);
+            if (lower.length > 0) {
+                built[key] =
+                    `Wider than an organization you belong to allows — ${lower.join('; ')}. When you act for them, theirs applies; this still governs your own work.`;
+            }
+        }
+        return built;
+    }, [draft, organizations]);
+    const apply = () => {
+        const rules = rulesFrom(draft);
+        if (typeof rules === 'string') {
+            setRefusal(rules);
+            return;
+        }
+        setRefusal('');
+        setConflict('');
+        save.mutate({ rules, expectedVersion: layer.data?.version }, {
+            onSuccess: () => enqueueToast('Saved. It applies to your next call.', {
+                variant: 'success',
+            }),
+            onError: error => {
+                if (error instanceof McpPolicyConflict) {
+                    setConflict(error.message);
+                    return;
+                }
+                enqueueToast(`Could not save: ${error.message}`, {
+                    variant: 'error',
+                });
+            },
+        });
+    };
+    if (layer.isError) {
+        return (_jsx(McpErrorBlankslate, { state: errorState(layer.error, 'Your MCP policy'), onRetry: () => layer.refetch() }));
+    }
+    if (layer.isPending && layer.data === undefined) {
+        return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 5 }, children: _jsx(Spinner, {}) }));
+    }
+    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: "Your MCP policy" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: ["Rules for your own agents. These can only make things", ' ', _jsx("strong", { children: "stricter" }), " \u2014 where you belong to an organization, its rules apply underneath and nothing here can loosen them."] })] })), 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, notes: notes, belowAllowedClients: _jsx(AdmittedClients, { scope: "personal", subjectUid: userUid, edited: draft.allowedClients !== stored.allowedClients }) }), _jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center' }, children: [_jsx(Button, { variant: "primary", onClick: apply, disabled: !changed || save.isPending, children: "Save" }), 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('Removed. You narrow nothing of your own.', {
+                                    variant: 'success',
+                                }),
+                                onError: error => enqueueToast(`Could not remove: ${error.message}`, {
+                                    variant: 'error',
+                                }),
+                            }), children: "Remove my policy" }) }))] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "Removing yours does not widen anything your organization set. It only stops your own rules from narrowing further." })] }));
+};
+export default PersonalPolicy;

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

@@ -0,0 +1,53 @@
+/**
+ * What the Jupyter MCP Server lets a person's agents do — and who decided.
+ *
+ * Policy is layered and each layer only narrows: the platform's defaults,
+ * then the organization's rules for an organization-scope token, then the
+ * person's own. The gateway answers the **effective** policy for a token
+ * with, per rule, the layer that decided it, which is what turns "why was
+ * my agent refused" from a support question into a line on this page.
+ *
+ * Read-only, always: this table is the answer, not the form. The personal
+ * rules a person may narrow for themselves, and the forms for the
+ * organizations they own, are the two sections beneath it and arrive with
+ * the policy layers in milestone 3 — until then the gateway answers the
+ * platform defaults and the token's scopes, and every row says so.
+ *
+ * @module views/mcp/Policies
+ */
+import type { JSX } from 'react';
+import type { McpPolicyLayer } from '../../models/McpPolicy';
+import { type McpErrorStateFn, type McpRoutes } from './types';
+export interface PoliciesProps {
+    /** The application's words for a failed request. */
+    errorState: McpErrorStateFn;
+    /** Where this application puts the surfaces this view links to. */
+    routes: McpRoutes;
+    /** The organization whose name a row can carry, when the token has one. */
+    organizationName?: string;
+    showTitle?: boolean;
+}
+/**
+ * The agent a preview is taken as, or nothing for the reader's own token.
+ *
+ * Empty is the reader's own, which is the default and the honest one: the
+ * table answers "what applies to me" until somebody asks otherwise.
+ */
+export type PolicyPreviewAgent = string;
+/**
+ * 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 declare const policyFiltersOf: (previewAs: PolicyPreviewAgent) => {
+    agent: string | undefined;
+};
+/** How each layer is named on a row, in the reader's terms. */
+export declare const layerLabel: (layer: McpPolicyLayer, organizationName?: string) => string;
+/** A rule's value in the words of the page, whatever shape it arrived in. */
+export declare const ruleValueLabel: (value: unknown) => string;
+export declare const Policies: ({ errorState, routes, organizationName, showTitle, }: PoliciesProps) => JSX.Element;
+export default Policies;