@datalayer/core 1.1.60 → 1.1.66

package/lib/views/mcp/McpObservability.js

@@ -0,0 +1,150 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Heading, Label, SegmentedControl, Spinner, Text, TextInput, } from '@primer/react';
+import { Blankslate } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { SearchIcon, TelescopeIcon } from '@primer/octicons-react';
+import { McpErrorBlankslate } from '../../components/mcp/index.js';
+import { useMcpMetrics, useMcpTrace, useRunTrace } from '../../hooks/useMcp.js';
+import { useNavigate } from '../../hooks/index.js';
+import { MCP_METRIC_CATALOG } from '../../api/mcp/index.js';
+import { durationLabel } from './format.js';
+/** The gateway's own spans, so the tree can call out what each stage cost. */
+const STAGE = (name) => {
+    if (name.startsWith('mcp.policy')) {
+        return 'Policy';
+    }
+    if (name.startsWith('mcp.request')) {
+        return 'Gateway';
+    }
+    if (name.startsWith('sandbox.')) {
+        return 'Sandbox';
+    }
+    if (name.startsWith('durable.')) {
+        return 'Workflow';
+    }
+    return '';
+};
+const SpanRow = ({ node, depth, }) => {
+    const stage = STAGE(node.span.span_name);
+    const failed = (node.span.status_code ?? '').toUpperCase() === 'ERROR';
+    return (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: 2,
+                    py: 1,
+                    pl: depth * 3,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.muted',
+                    minWidth: 0,
+                }, children: [_jsx(Text, { sx: {
+                            fontSize: 0,
+                            fontFamily: 'mono',
+                            flex: 1,
+                            minWidth: 0,
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            color: failed ? 'danger.fg' : 'fg.default',
+                        }, children: node.span.span_name }), stage && (_jsx(Label, { size: "small", variant: "secondary", children: stage })), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: node.span.service_name }), _jsx(Text, { sx: {
+                            fontSize: 0,
+                            fontWeight: 'semibold',
+                            minWidth: 60,
+                            textAlign: 'right',
+                        }, children: durationLabel(node.span.duration_ms) })] }), node.children.map(child => (_jsx(SpanRow, { node: child, depth: depth + 1 }, child.span.span_id)))] }));
+};
+/** A number the reader can act on, or a plain statement that it is not measured. */
+const Sli = ({ label, value, note, }) => (_jsxs(Box, { sx: {
+        p: 3,
+        border: '1px solid',
+        borderColor: 'border.default',
+        borderRadius: 2,
+        minWidth: 0,
+    }, children: [_jsx(Text, { sx: { display: 'block', fontSize: 3, fontWeight: 'bold' }, children: value }), _jsx(Text, { sx: { display: 'block', fontSize: 0, color: 'fg.muted' }, children: label }), note && (_jsx(Text, { sx: { display: 'block', fontSize: 0, color: 'fg.subtle' }, children: note }))] }));
+const percentLabel = (value) => value === null || value === undefined
+    ? 'Not measured'
+    : `${(value * 100).toFixed(1)}%`;
+export const McpObservability = ({ errorState, routes, pane, onPaneChange, taskUid, traceId, onSelect, agent, org, showTitle = true, }) => {
+    const navigate = useNavigate();
+    const [find, setFind] = useState(taskUid ?? traceId ?? '');
+    // One of the two, never both: a task names its own trace, and a trace
+    // names itself.
+    const byTask = useRunTrace(taskUid, { enabled: Boolean(taskUid) });
+    const byTrace = useMcpTrace(traceId, {
+        enabled: Boolean(traceId) && !taskUid,
+    });
+    const run = taskUid ? byTask : byTrace;
+    const metrics = useMcpMetrics({ agent, org });
+    const telemetryNotice = (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: ["This is telemetry: spans and metrics are sampled, kept for a short time and meant for understanding how a call ran. It is not the record of what was allowed \u2014", ' ', _jsx(Text, { as: "span", sx: { color: 'accent.fg', cursor: 'pointer' }, onClick: () => navigate(routes.audit), children: "the audit log" }), ' ', "is, and it is kept per plan and never changed."] }));
+    return (_jsxs(Box, { sx: { display: 'grid', gap: 3, minWidth: 0 }, children: [showTitle && (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Observability" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "How the calls of your agents ran: where the time went, and how the service is behaving." })] })), _jsxs(SegmentedControl, { "aria-label": "Observability panes", size: "small", children: [_jsx(SegmentedControl.Button, { selected: pane === 'runs', onClick: () => onPaneChange('runs'), children: "Runs" }), _jsx(SegmentedControl.Button, { selected: pane === 'metrics', onClick: () => onPaneChange('metrics'), children: "Metrics" })] }), telemetryNotice, pane === 'runs' && (_jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            gap: 2,
+                            alignItems: 'center',
+                            flexWrap: 'wrap',
+                        }, children: [_jsx(TextInput, { size: "small", leadingVisual: SearchIcon, "aria-label": "Task or trace id", placeholder: "Task uid or trace id", value: find, sx: { minWidth: 320 }, onChange: event => setFind(event.currentTarget.value) }), _jsx(Button, { size: "small", onClick: () => {
+                                    const value = find.trim();
+                                    if (!value) {
+                                        onSelect({});
+                                        return;
+                                    }
+                                    // A trace id is 32 hexadecimal characters; anything else is a
+                                    // task uid, and the gateway tells us which by answering.
+                                    onSelect(/^[0-9a-f]{32}$/i.test(value)
+                                        ? { trace: value }
+                                        : { task: value });
+                                }, children: "Show the run" })] }), !taskUid && !traceId ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(TelescopeIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "Pick a run" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "Open a call from the audit log or the dashboard, or paste its task uid or trace id here, and its spans across the gateway, the policy check and the worker appear with the time each took." }) }), _jsx(Button, { size: "small", onClick: () => navigate(routes.audit), children: "Open the audit log" })] })) : run.isError ? (_jsx(McpErrorBlankslate, { state: errorState(run.error, 'This run'), onRetry: () => run.refetch() })) : run.isPending ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 5 }, children: _jsx(Spinner, {}) })) : (run.data?.spans.length ?? 0) === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(TelescopeIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "No span for this call" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "Spans reach the collector a few seconds after the call and are kept for a short time. A call older than the retention window has an audit row but no trace." }) })] })) : (_jsxs(Box, { sx: { display: 'grid', gap: 2 }, children: [_jsxs(Box, { sx: {
+                                    display: 'flex',
+                                    gap: 3,
+                                    alignItems: 'center',
+                                    flexWrap: 'wrap',
+                                }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontFamily: 'mono' }, children: run.data?.traceId }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [run.data?.spans.length, " spans"] }), _jsx(Button, { size: "small", onClick: () => navigate(`${routes.audit}?trace=${encodeURIComponent(run.data?.traceId ?? '')}`), children: "The audit row" })] }), _jsx(Box, { sx: {
+                                    border: '1px solid',
+                                    borderColor: 'border.default',
+                                    borderRadius: 2,
+                                    overflowX: 'auto',
+                                }, children: (run.data?.tree ?? []).map(node => (_jsx(SpanRow, { node: node, depth: 0 }, node.span.span_id))) }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "The workflow steps and the sandbox launch of a durable task join this tree with milestone 2, and so does the live stream of calls as they land." })] }))] })), pane === 'metrics' && (_jsx(Box, { sx: { display: 'grid', gap: 3 }, children: metrics.isError ? (_jsx(McpErrorBlankslate, { state: errorState(metrics.error, 'Metrics'), onRetry: () => metrics.refetch() })) : metrics.isPending && !metrics.data ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 5 }, children: _jsx(Spinner, {}) })) : (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                                display: 'grid',
+                                gap: 3,
+                                gridTemplateColumns: [
+                                    '1fr',
+                                    'repeat(2, 1fr)',
+                                    'repeat(4, 1fr)',
+                                ],
+                            }, children: [_jsx(Sli, { label: "Availability", value: percentLabel(metrics.data?.slis.availability), note: `${metrics.data?.slis.samples.calls ?? 0} calls` }), _jsx(Sli, { label: "Call latency, p95", value: metrics.data?.slis.p95CallDurationMs === null ||
+                                        metrics.data?.slis.p95CallDurationMs === undefined
+                                        ? 'Not measured'
+                                        : durationLabel(metrics.data.slis.p95CallDurationMs) }), _jsx(Sli, { label: "Task success", value: percentLabel(metrics.data?.slis.taskSuccessRate), note: `${metrics.data?.slis.samples.tasks ?? 0} tasks` }), _jsx(Sli, { label: "Sandbox launch, p95", value: Object.keys(metrics.data?.slis.p95SandboxLaunchSeconds ?? {}).length === 0
+                                        ? 'Not measured'
+                                        : Object.entries(metrics.data?.slis.p95SandboxLaunchSeconds ?? {})
+                                            .map(([provider, seconds]) => `${provider} ${seconds.toFixed(1)}s`)
+                                            .join(' · '), note: `${metrics.data?.slis.samples.launches ?? 0} launches` })] }), _jsx(Box, { sx: {
+                                border: '1px solid',
+                                borderColor: 'border.default',
+                                borderRadius: 2,
+                                overflowX: 'auto',
+                            }, children: MCP_METRIC_CATALOG.map(name => {
+                                const points = metrics.data?.metrics[name] ?? [];
+                                const last = points[points.length - 1];
+                                return (_jsxs(Box, { sx: {
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        gap: 3,
+                                        py: 1,
+                                        px: 2,
+                                        borderBottom: '1px solid',
+                                        borderColor: 'border.muted',
+                                    }, children: [_jsx(Text, { sx: { fontSize: 0, fontFamily: 'mono', flex: 1 }, children: name }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: points.length === 0
+                                                ? 'no point'
+                                                : `${points.length} points` }), _jsx(Text, { sx: {
+                                                fontSize: 0,
+                                                fontWeight: 'semibold',
+                                                minWidth: 80,
+                                                textAlign: 'right',
+                                            }, children: last
+                                                ? `${last.value}${last.unit ? ` ${last.unit}` : ''}`
+                                                : '—' })] }, name));
+                            }) }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: ["Metrics carry no user, agent or organization label by design, so a per-agent reading is computed from the request spans, which do.", metrics.data?.spans.length
+                                    ? ` ${metrics.data.spans.length} spans read.`
+                                    : ''] })] })) }))] }));
+};
+export default McpObservability;

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

@@ -0,0 +1,45 @@
+/**
+ * What an organization narrows for its agents, and the form that writes it.
+ *
+ * The sibling `Policies` view is the *read*: every layer intersected, with
+ * the layer that decided each rule. This is the *write*, and only one
+ * layer's — an organization owner cannot edit the platform's defaults or
+ * somebody's personal rules, and would not want to.
+ *
+ * Three things this page owes the person filling it in:
+ *
+ * **Only rules the gateway enforces.** IAM refuses anything else, so a form
+ * offering more would collect a setting that is thrown away at the write —
+ * and `toolDenyList` would read as a working denylist rather than a typo.
+ * The fields come from `MCP_POLICY_RULES` so the form cannot drift.
+ *
+ * **An empty allowlist is not an allowlist.** Leaving the field blank means
+ * "I have not set one", not "nothing is permitted" — the second would stop
+ * every agent in the organization, and the first conclusion anybody draws
+ * from that is that the platform is down. The captions say so where
+ * somebody is about to make that mistake.
+ *
+ * **A limit of zero is refused rather than stored.** The gateway reads a
+ * non-positive cap as *no cap*, so a zero written to stop an organization's
+ * agents lifts its limit instead — the one value whose stored meaning is the
+ * opposite of its plain reading.
+ *
+ * @module views/mcp/OrganizationPolicy
+ */
+import type { JSX } from 'react';
+import type { McpErrorStateFn } from './types';
+export interface OrganizationPolicyProps {
+    /** The application's words for a failed request. */
+    errorState: McpErrorStateFn;
+    /** The organization whose layer this is. */
+    orgUid: string;
+    /**
+     * Read-only for anybody who is not an owner. IAM refuses their writes
+     * either way; this keeps the page from offering an action that would be
+     * refused.
+     */
+    readOnly?: boolean;
+    showTitle?: boolean;
+}
+export declare const OrganizationPolicy: ({ errorState, orgUid, readOnly, showTitle, }: OrganizationPolicyProps) => JSX.Element;
+export default OrganizationPolicy;

package/lib/views/mcp/OrganizationPolicy.js

@@ -0,0 +1,107 @@
+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 { 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 }), !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;