@datalayer/core 1.1.60 → 1.2.10

package/lib/views/iam/SignInSimple.js

@@ -101,7 +101,7 @@ const SignInInputGlobalStyle = createGlobalStyle `
   }
 `;
 // ── Component ────────────────────────────────────────────────────────
-export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp, name, title = 'Datalayer OTEL', description = 'Sign in to access the observability dashboard.', icon, leadingIcon = _jsx(TelescopeIcon, { size: 24 }), github = false, google = false, linkedin = false, apiKey = false, signUp = true, socialSignInNavigationTarget, asDoc = false, hideHero = false, calloutTitle, calloutDescription, passwordToggleLabel = 'Sign in with a password', signUpTitle = "Don't have an account?", signUpDescription = 'Create a free Datalayer account with your email address.', signUpLabel = 'Sign up with email', signUpHref = 'https://datalayer.ai/signup', forgotPasswordHref = '/password', forgotPasswordLabel = 'Forgot password?', showForgotPassword = true, socialButtonMarginTop = 3, actionButtonMaxWidth = 320, }) => {
+export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp, name, title = 'Datalayer OTEL', description = 'Sign in to access the observability dashboard.', icon, leadingIcon = _jsx(TelescopeIcon, { size: 24 }), github = false, google = false, linkedin = false, apiKey = false, signUp = true, socialSignInNavigationTarget, asDoc = false, fillHeight = true, hideHero = false, calloutTitle, calloutDescription, passwordToggleLabel = 'Sign in with a password', signUpTitle = "Don't have an account?", signUpDescription = 'Create a free Datalayer account with your email address.', signUpLabel = 'Sign up with email', signUpHref = 'https://datalayer.ai/signup', forgotPasswordHref = '/password', forgotPasswordLabel = 'Forgot password?', showForgotPassword = true, socialButtonMarginTop = 3, actionButtonMaxWidth = 320, }) => {
     const compactDocMode = asDoc && !hideHero;
     const headingText = name ?? (asDoc && title === 'Datalayer OTEL' ? 'Datalayer Sign In' : title);
     const headingIcon = icon ?? (asDoc ? _jsx(SignInIcon, { size: 24 }) : leadingIcon);
@@ -316,9 +316,9 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
     const socialDisabled = socialLoading || loading || asDoc;
     return (_jsxs(Box, { className: "signin-input-theme-scope", sx: {
             display: 'flex',
-            alignItems: hideHero || compactDocMode ? 'flex-start' : 'center',
+            alignItems: hideHero || compactDocMode || !fillHeight ? 'flex-start' : 'center',
             justifyContent: 'center',
-            minHeight: hideHero || compactDocMode ? 'auto' : '100vh',
+            minHeight: hideHero || compactDocMode || !fillHeight ? 'auto' : '100vh',
             bg: hideHero ? 'transparent' : 'canvas.default',
             color: 'fg.default',
             py: hideHero ? 0 : compactDocMode ? 2 : 4,
@@ -407,7 +407,7 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
                                         bg: 'canvas.overlay',
                                         color: 'fg.default',
                                         boxShadow: 'shadow.large',
-                                    }, children: [_jsx(Heading, { id: "signin-api-key-title", sx: { fontSize: 2, mb: 2 }, children: "Enter your API Key" }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "API Key" }), _jsx(Textarea, { block: true, required: true, autoFocus: true, placeholder: "Paste your API key here", value: apiKeyValue, onInput: (e) => setApiKeyValue(e.target.value), ref: apiKeyRef })] }), _jsxs(Box, { sx: {
+                                    }, children: [_jsx(Heading, { id: "signin-api-key-title", sx: { fontSize: 2, mb: 2 }, children: "Enter your API Key" }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "API Key" }), _jsx(Textarea, { block: true, required: true, autoFocus: true, placeholder: "Paste your API key here", value: apiKeyValue, onInput: e => setApiKeyValue(e.currentTarget.value), ref: apiKeyRef })] }), _jsxs(Box, { sx: {
                                                 mt: 3,
                                                 display: 'flex',
                                                 justifyContent: 'flex-end',

package/lib/views/index.d.ts

@@ -1,3 +1,4 @@
 export * from './iam';
+export * from './mcp';
 export * from './profile';
 export * from './otel';

package/lib/views/index.js

@@ -3,5 +3,6 @@
  * Distributed under the terms of the Modified BSD License.
  */
 export * from './iam/index.js';
+export * from './mcp/index.js';
 export * from './profile/index.js';
 export * from './otel/index.js';

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

@@ -0,0 +1,44 @@
+/**
+ * What the admitted-clients list actually admits.
+ *
+ * The field above it is a textarea of client ids, because that is what they
+ * are: a client id is a URL somebody pastes, and there is nothing to pick
+ * from. What a textarea cannot do is tell whoever typed it whether an entry
+ * resolves — and this is the one policy rule whose typo fails silently in
+ * the direction that matters. A misspelled entry does not refuse anything
+ * loudly; it never matches, and every agent from that vendor is turned away
+ * with "your organization does not admit this client", which reads to its
+ * owner as a decision somebody made on purpose.
+ *
+ * So each stored entry is shown with what it names. Three states, and the
+ * reason this is a component rather than a line of text is that collapsing
+ * any two of them misleads:
+ *
+ * * a **hostname** admits every client that host publishes. There is no
+ *   document and none is expected — shown as unresolved it would send
+ *   somebody chasing a fetch that was never going to happen.
+ * * a **document that resolves**, with the name and publishing host.
+ * * a **document that does not**, with the reason. The state the whole
+ *   thing is for.
+ *
+ * **It describes what is stored, not the draft.** Resolving on every
+ * keystroke would make a textarea a source of outbound requests, so this
+ * goes stale while somebody edits and says so rather than pretending to
+ * describe a line that has not been saved.
+ *
+ * @module views/mcp/AdmittedClients
+ */
+import type { JSX } from 'react';
+import type { McpPolicyScope } from '../../api/iam/mcpPolicy';
+export interface AdmittedClientsProps {
+    scope: McpPolicyScope;
+    subjectUid: string;
+    /**
+     * Whether the textarea above differs from what is stored. The entries
+     * below describe the *stored* list, and saying so is the difference
+     * between a stale panel and a wrong one.
+     */
+    edited?: boolean;
+}
+export declare const AdmittedClients: ({ scope, subjectUid, edited, }: AdmittedClientsProps) => JSX.Element | null;
+export default AdmittedClients;

package/lib/views/mcp/AdmittedClients.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Label, Link, Spinner, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { AlertIcon, CheckCircleIcon, GlobeIcon, QuestionIcon, } from '@primer/octicons-react';
+import { useAdmittedClients } from '../../hooks/useMcp.js';
+const Row = ({ client }) => {
+    const unreadable = client.kind === 'url' && client.resolved === false;
+    const unusable = client.kind === 'unusable';
+    const icon = unusable ? (_jsx(QuestionIcon, {})) : unreadable ? (_jsx(AlertIcon, {})) : client.kind === 'hostname' ? (_jsx(GlobeIcon, {})) : (_jsx(CheckCircleIcon, {}));
+    const tone = unusable || unreadable ? 'danger.fg' : 'fg.muted';
+    return (_jsxs(Box, { sx: {
+            display: 'grid',
+            gridTemplateColumns: 'auto 1fr',
+            gap: 2,
+            alignItems: 'start',
+            py: 2,
+            borderTop: '1px solid',
+            borderColor: 'border.muted',
+        }, children: [_jsx(Box, { sx: { color: tone, pt: '2px' }, children: icon }), _jsxs(Box, { sx: { display: 'grid', gap: 1, minWidth: 0 }, children: [_jsxs(Box, { sx: {
+                            display: 'flex',
+                            gap: 2,
+                            alignItems: 'center',
+                            flexWrap: 'wrap',
+                        }, children: [client.clientName && (_jsx(Text, { sx: { fontWeight: 'semibold' }, children: client.clientName })), client.kind === 'hostname' && (_jsx(Label, { variant: "accent", size: "small", children: "Whole host" })), client.localhostOnly && (
+                            // Worth a label of its own: every redirect goes to the reader's
+                            // own machine, and a document cannot prove which local program
+                            // is listening on the port.
+                            _jsx(Label, { variant: "attention", size: "small", children: "Redirects to localhost" })), unreadable && (_jsx(Label, { variant: "danger", size: "small", children: "Cannot be read" })), unusable && (_jsx(Label, { variant: "danger", size: "small", children: "Matches nothing" }))] }), _jsx(Text, { sx: {
+                            fontSize: 0,
+                            fontFamily: 'mono',
+                            color: 'fg.muted',
+                            overflowWrap: 'anywhere',
+                        }, children: client.entry }), client.detail && (_jsx(Text, { sx: { fontSize: 0, color: tone }, children: client.detail })), client.clientUri && (_jsx(Link, { href: client.clientUri, target: "_blank", rel: "noreferrer noopener", sx: { fontSize: 0 }, children: client.clientHostname || client.clientUri }))] })] }));
+};
+export const AdmittedClients = ({ scope, subjectUid, edited = false, }) => {
+    const described = useAdmittedClients(scope, subjectUid);
+    if (described.isPending && !described.data) {
+        return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 3 }, children: _jsx(Spinner, { size: "small" }) }));
+    }
+    // An error here is not worth a blankslate: the field above still works and
+    // the policy is unaffected. Saying nothing would be worse than saying it
+    // could not be checked, so it says that and stays out of the way.
+    if (described.isError) {
+        return (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: "The admitted clients could not be described just now. The list above is still what is enforced." }));
+    }
+    const answer = described.data;
+    if (!answer) {
+        return null;
+    }
+    if (!answer.allowlisted) {
+        // Said, not rendered as an empty list. An empty allowlist is not an
+        // allowlist, and "no clients admitted" would be the opposite of what
+        // the gateway does with a blank one.
+        return (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', m: 0 }, children: answer.detail ??
+                'This layer names no client allowlist, so every client is admitted by it.' }));
+    }
+    return (_jsxs(Box, { sx: { display: 'grid', gap: 1 }, children: [edited && (_jsxs(Text, { as: "p", sx: { fontSize: 0, color: 'attention.fg', m: 0 }, children: ["Describing the ", _jsx("strong", { children: "saved" }), " list. Save to check what you have just typed."] })), answer.clients.map(client => (_jsx(Row, { client: client }, client.entry)))] }));
+};
+export default AdmittedClients;

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

@@ -0,0 +1,34 @@
+/**
+ * Where a fired alert goes, besides the notice in the app.
+ *
+ * These sit beside the rules because they are half of the same decision: a
+ * rule with nowhere to go is a row somebody has to remember to look at, and
+ * a destination with no rules is nothing at all.
+ *
+ * They live on the organization rather than on each rule, and that is worth
+ * knowing while editing them: a URL repeated on twenty rules is nineteen
+ * places to forget when it rotates, and the rules would disagree about where
+ * the organization is reachable.
+ *
+ * **Slack has its own field.** Not fussiness — the transport is the same and
+ * the body is not. Slack renders a generic JSON POST as one grey line of
+ * text; given Block Kit it renders a coloured attachment with the reading,
+ * the severity and the scope as separate fields. IAM refuses a
+ * non-Slack URL here, because anything else sent Block Kit half-works and
+ * looks configured.
+ *
+ * Only what changed is sent. IAM merges these settings, and this form does
+ * not show retention or SIEM forwarding — sending them empty would clear
+ * decisions made on another page by somebody else.
+ *
+ * @module views/mcp/AlertDestinations
+ */
+import type { JSX } from 'react';
+import type { McpErrorStateFn } from './types';
+export interface AlertDestinationsProps {
+    errorState: McpErrorStateFn;
+    orgUid: string;
+    readOnly?: boolean;
+}
+export declare const AlertDestinations: ({ errorState, orgUid, readOnly, }: AlertDestinationsProps) => JSX.Element;
+export default AlertDestinations;

package/lib/views/mcp/AlertDestinations.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import { Button, Flash, FormControl, Heading, Spinner, Text, TextInput, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { McpErrorBlankslate } from '../../components/mcp/index.js';
+import { useAuditSettings, useSetAuditSettings } from '../../hooks/useMcp.js';
+import { useToast } from '../../hooks/index.js';
+import { AuditSettingInvalid } from '../../api/iam/mcpAuditSettings.js';
+const EMPTY = {
+    alertEmails: '',
+    alertWebhookUrl: '',
+    alertSlackWebhookUrl: '',
+};
+export const AlertDestinations = ({ errorState, orgUid, readOnly = false, }) => {
+    const { enqueueToast } = useToast();
+    const settings = useAuditSettings(orgUid);
+    const save = useSetAuditSettings(orgUid);
+    const [draft, setDraft] = useState(EMPTY);
+    const [refusal, setRefusal] = useState('');
+    const stored = useMemo(() => ({
+        alertEmails: settings.data?.alertEmails ?? '',
+        alertWebhookUrl: settings.data?.alertWebhookUrl ?? '',
+        alertSlackWebhookUrl: settings.data?.alertSlackWebhookUrl ?? '',
+    }), [settings.data]);
+    useEffect(() => setDraft(stored), [stored]);
+    const changed = useMemo(() => Object.keys(EMPTY).some(key => draft[key] !== stored[key]), [draft, stored]);
+    const set = (key, value) => setDraft(current => ({ ...current, [key]: value }));
+    const apply = () => {
+        setRefusal('');
+        // Only the fields this form owns, and only those that changed. Sending
+        // an untouched retention as empty would clear a decision made on
+        // another page by somebody else.
+        const changes = {};
+        for (const key of Object.keys(EMPTY)) {
+            if (draft[key] !== stored[key]) {
+                changes[key] = draft[key].trim();
+            }
+        }
+        save.mutate({ settings: changes, expectedVersion: settings.data?.version }, {
+            onSuccess: () => {
+                enqueueToast('Saved. The next firing goes there.', {
+                    variant: 'success',
+                });
+            },
+            onError: error => {
+                if (error instanceof AuditSettingInvalid) {
+                    // IAM's own words. "That is not a Slack incoming webhook" is the
+                    // whole answer, and a generic failure would send somebody
+                    // looking for a problem that is already named.
+                    setRefusal(error.message);
+                    return;
+                }
+                enqueueToast(`Could not save: ${error.message}`, {
+                    variant: 'error',
+                });
+            },
+        });
+    };
+    if (settings.isError) {
+        return (_jsx(McpErrorBlankslate, { state: errorState(settings.error, 'Alert destinations'), onRetry: () => settings.refetch() }));
+    }
+    if (settings.isPending && settings.data === undefined) {
+        return (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 4 }, children: _jsx(Spinner, {}) }));
+    }
+    return (_jsxs(Box, { sx: {
+            display: 'grid',
+            gap: 3,
+            maxWidth: '42rem',
+            p: 3,
+            border: '1px solid',
+            borderColor: 'border.default',
+            borderRadius: 2,
+        }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 1 }, children: "Where alerts go" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "Set once for the organization, not per rule \u2014 a URL repeated on twenty rules is nineteen places to forget when it rotates. Every firing also appears in the app, and that copy is sent first so it is not lost when one of these is down." })] }), refusal && (_jsx(Flash, { variant: "danger", children: _jsx(Text, { sx: { fontSize: 1 }, children: refusal }) })), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Email" }), _jsx(TextInput, { block: true, disabled: readOnly, value: draft.alertEmails, onChange: event => set('alertEmails', event.target.value), placeholder: "ops@example.co, oncall@example.co" }), _jsx(FormControl.Caption, { children: "Comma-separated, up to twenty. An alert list is the people who want to know, not a mailing list \u2014 a firing that emails two hundred people is a firing that gets the rule switched off." })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Slack" }), _jsx(TextInput, { block: true, disabled: readOnly, value: draft.alertSlackWebhookUrl, onChange: event => set('alertSlackWebhookUrl', event.target.value), placeholder: "https://hooks.slack.com/services/\u2026" }), _jsx(FormControl.Caption, { children: "A Slack incoming webhook, and only Slack\u2019s \u2014 anything else belongs in the field below. Through this one Slack gets a coloured attachment with the reading, the severity and the scope as separate fields; through the generic webhook it shows one grey line." })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Webhook" }), _jsx(TextInput, { block: true, disabled: readOnly, value: draft.alertWebhookUrl, onChange: event => set('alertWebhookUrl', event.target.value), placeholder: "https://events.pagerduty.com/\u2026" }), _jsxs(FormControl.Caption, { children: ["Anything that takes a JSON POST: PagerDuty, a chat relay, your own endpoint. ", _jsx("strong", { children: "https only" }), " \u2014 an alert names your organization and what its agents did. It carries no credential."] })] }), !readOnly && (_jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Button, { variant: "primary", onClick: apply, disabled: !changed || save.isPending, children: "Save destinations" }), changed && (_jsx(Button, { variant: "invisible", onClick: () => setDraft(stored), children: "Discard changes" }))] })), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: ["Each copy is attempted on its own: if the webhook is down you still get the email. A copy that fails is recorded and", ' ', _jsx("strong", { children: "not retried" }), " \u2014 retrying a notice against an endpoint that is down turns its outage into a loop against it, and the alert is already in the app."] })] }));
+};
+export default AlertDestinations;

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

@@ -0,0 +1,32 @@
+/**
+ * What this organization asked to be told about.
+ *
+ * A rule is a condition over a number the gateway already counts, checked
+ * once a minute, firing at most once per condition per window. The
+ * evaluator has been able to evaluate these since milestone 1; until this
+ * page they could only be written with `curl`.
+ *
+ * The form is built from the vocabulary the evaluator publishes, and that
+ * is the point rather than a convenience. A rule it cannot evaluate is
+ * refused at the write — and a rule that never fires because of a typo is
+ * indistinguishable from a condition that never happened, which is what
+ * somebody will believe. A dropdown cannot produce one.
+ *
+ * The same reasoning runs one level deeper. A condition the evaluator knows
+ * but has **no reader** for is stored, evaluated every minute, counted
+ * `unreadable`, and never fires — worse than a typo, because it looks
+ * configured. Those are shown as not yet measurable and cannot be chosen.
+ *
+ * @module views/mcp/AlertRules
+ */
+import type { JSX } from 'react';
+import type { McpErrorStateFn } from './types';
+export interface AlertRulesProps {
+    errorState: McpErrorStateFn;
+    orgUid: string;
+    /** Read-only for anybody who is not an owner. */
+    readOnly?: boolean;
+    showTitle?: boolean;
+}
+export declare const AlertRules: ({ errorState, orgUid, readOnly, showTitle, }: AlertRulesProps) => JSX.Element;
+export default AlertRules;

package/lib/views/mcp/AlertRules.js

@@ -0,0 +1,245 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { ActionList, ActionMenu, Button, Flash, FormControl, Heading, Label, Select, Spinner, Text, TextInput, ToggleSwitch, } from '@primer/react';
+import { Blankslate, DataTable, Dialog, Table, } from '@primer/react/experimental';
+import { Box } from '@datalayer/primer-addons';
+import { BellIcon, KebabHorizontalIcon } from '@primer/octicons-react';
+import { McpErrorBlankslate } from '../../components/mcp/index.js';
+import { AlertDestinations } from './AlertDestinations.js';
+import { useAlertRules, useTestAlertRule, useCreateAlertRule, useDeleteAlertRule, useUpdateAlertRule, } from '../../hooks/useMcp.js';
+import { useToast } from '../../hooks/index.js';
+import { ALERT_CONDITIONS, ALERT_OPERATORS, ALERT_SEVERITIES, AlertRuleInvalid, } from '../../api/iam/mcpAlertRules.js';
+/** The windows worth offering, in seconds. */
+const WINDOWS = [
+    { seconds: 300, label: '5 minutes' },
+    { seconds: 900, label: '15 minutes' },
+    { seconds: 3600, label: 'an hour' },
+    { seconds: 21600, label: '6 hours' },
+    { seconds: 86400, label: 'a day' },
+];
+const MEASURABLE = ALERT_CONDITIONS.filter(condition => condition.measurable);
+const BLANK = {
+    condition: MEASURABLE[0]?.name ?? 'tasks.open',
+    operator: 'gt',
+    threshold: 1,
+    severity: 'warning',
+    windowSeconds: 3600,
+    scopeKind: 'organization',
+    scopeUid: '',
+    enabled: true,
+};
+const labelOf = (condition) => ALERT_CONDITIONS.find(entry => entry.name === condition)?.label ?? condition;
+const operatorOf = (operator) => ALERT_OPERATORS.find(entry => entry.name === operator)?.label ?? operator;
+const windowOf = (seconds) => WINDOWS.find(entry => entry.seconds === seconds)?.label ?? `${seconds}s`;
+export const AlertRules = ({ errorState, orgUid, readOnly = false, showTitle = true, }) => {
+    const { enqueueToast } = useToast();
+    const rules = useAlertRules(orgUid);
+    const create = useCreateAlertRule(orgUid);
+    const update = useUpdateAlertRule(orgUid);
+    const remove = useDeleteAlertRule(orgUid);
+    const test = useTestAlertRule();
+    const [editing, setEditing] = useState(null);
+    const [creating, setCreating] = useState(false);
+    const [draft, setDraft] = useState(BLANK);
+    const [refusal, setRefusal] = useState('');
+    const [trial, setTrial] = useState(null);
+    const [removing, setRemoving] = useState(null);
+    // Primer 37 types Dialog's focus refs with React 18's non-nullable
+    // `RefObject<HTMLElement>`. React 19's `useRef(null)` is nullable, and this
+    // ref is only handed to Dialog, so narrow it once here.
+    const returnFocusRef = useRef(null);
+    const rows = useMemo(() => (rules.data ?? []).map(rule => ({ ...rule, id: rule.uid })), [rules.data]);
+    const openCreate = () => {
+        setDraft(BLANK);
+        setRefusal('');
+        setTrial(null);
+        setCreating(true);
+    };
+    const openEdit = (rule) => {
+        const { uid, orgUid: _org, version: _version, ...rest } = rule;
+        setDraft(rest);
+        setRefusal('');
+        setTrial(null);
+        setEditing(rule);
+    };
+    const close = () => {
+        setCreating(false);
+        setEditing(null);
+        setRefusal('');
+    };
+    const onError = (error) => {
+        if (error instanceof AlertRuleInvalid) {
+            // The evaluator's own words, beside the form rather than in a toast:
+            // it names what is wrong, and the person can still fix it.
+            setRefusal(error.message);
+            return;
+        }
+        enqueueToast(`Could not save the rule: ${error.message}`, {
+            variant: 'error',
+        });
+    };
+    const apply = () => {
+        setRefusal('');
+        if (draft.scopeKind !== 'organization' && !draft.scopeUid.trim()) {
+            setRefusal(`A ${draft.scopeKind} rule needs the ${draft.scopeKind} it is about. ` +
+                'Without one it would be measured over the whole organization ' +
+                'under a name saying otherwise.');
+            return;
+        }
+        if (!Number.isFinite(draft.threshold)) {
+            setRefusal('The threshold must be a number.');
+            return;
+        }
+        if (editing) {
+            update.mutate({ uid: editing.uid, rule: draft }, {
+                onSuccess: () => {
+                    close();
+                    enqueueToast('Rule saved.', { variant: 'success' });
+                },
+                onError,
+            });
+            return;
+        }
+        create.mutate(draft, {
+            onSuccess: () => {
+                close();
+                enqueueToast('Rule created. It is evaluated on the next tick.', {
+                    variant: 'success',
+                });
+            },
+            onError,
+        });
+    };
+    /** Switching a rule off leaves it here; it stops being evaluated. */
+    const toggle = (rule, enabled) => {
+        const { uid, orgUid: _org, version: _version, ...rest } = rule;
+        update.mutate({ uid, rule: { ...rest, enabled } }, {
+            onError: error => enqueueToast(`Could not change the rule: ${error.message}`, {
+                variant: 'error',
+            }),
+        });
+    };
+    const confirmRemove = () => {
+        const rule = removing;
+        if (!rule) {
+            return;
+        }
+        remove.mutate(rule.uid, {
+            onSuccess: () => {
+                setRemoving(null);
+                enqueueToast('Rule removed. What it watched is unwatched.', {
+                    variant: 'success',
+                });
+            },
+            onError: error => {
+                setRemoving(null);
+                enqueueToast(`Could not remove: ${error.message}`, {
+                    variant: 'error',
+                });
+            },
+        });
+    };
+    const set = (key, value) => {
+        // A reading belongs to the rule that produced it. Left on screen after
+        // the condition changes, it would be somebody reading last question's
+        // answer as this question's.
+        setTrial(null);
+        setDraft(current => ({ ...current, [key]: value }));
+    };
+    const tryIt = () => {
+        setRefusal('');
+        test.mutate({
+            condition: draft.condition,
+            operator: draft.operator,
+            threshold: draft.threshold,
+            windowSeconds: draft.windowSeconds,
+            scopeKind: draft.scopeKind,
+            scopeUid: draft.scopeUid,
+        }, {
+            onSuccess: setTrial,
+            onError: error => setRefusal(error.message),
+        });
+    };
+    const columns = [
+        {
+            header: 'Tell me when',
+            id: 'condition',
+            rowHeader: true,
+            width: 'growCollapse',
+            renderCell: row => (_jsxs(Box, { sx: { display: 'grid' }, children: [_jsxs(Text, { sx: { fontSize: 1 }, children: [labelOf(row.condition), " ", operatorOf(row.operator), " ", row.threshold] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["over ", windowOf(row.windowSeconds), row.scopeKind !== 'organization' && ` · this ${row.scopeKind}`] })] })),
+        },
+        {
+            header: 'Severity',
+            id: 'severity',
+            width: '110px',
+            renderCell: row => (_jsx(Label, { size: "small", variant: row.severity === 'critical'
+                    ? 'danger'
+                    : row.severity === 'warning'
+                        ? 'attention'
+                        : 'secondary', children: row.severity })),
+        },
+        {
+            header: 'On',
+            id: 'enabled',
+            width: '90px',
+            renderCell: row => (
+            // The label is drawn and hidden rather than passed as `aria-label`:
+            // Primer's switch names itself from an element, and a row of
+            // unlabelled switches is a row a screen reader reads as "on, on,
+            // off" with nothing said about what.
+            _jsxs(_Fragment, { children: [_jsx(Text, { id: `alert-toggle-${row.uid}`, sx: { display: 'none' }, children: `Evaluate ${labelOf(row.condition)}` }), _jsx(ToggleSwitch, { size: "small", checked: row.enabled, disabled: readOnly || update.isPending, "aria-labelledby": `alert-toggle-${row.uid}`, onClick: () => toggle(row, !row.enabled) })] })),
+        },
+        {
+            header: '',
+            id: 'actions',
+            width: '48px',
+            align: 'end',
+            renderCell: row => readOnly ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "\u2014" })) : (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsx(Button, { variant: "invisible", size: "small", "aria-label": `Actions for ${labelOf(row.condition)}`, icon: KebabHorizontalIcon }) }), _jsx(ActionMenu.Overlay, { align: "end", children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { onSelect: () => openEdit(row), children: "Edit" }), _jsx(ActionList.Item, { variant: "danger", onSelect: () => setRemoving(row), children: "Remove" })] }) })] })),
+        },
+    ];
+    if (rules.isError) {
+        return (_jsx(McpErrorBlankslate, { state: errorState(rules.error, 'Alert rules'), onRetry: () => rules.refetch() }));
+    }
+    const chosen = ALERT_CONDITIONS.find(entry => entry.name === draft.condition);
+    return (_jsxs(Box, { sx: { display: 'grid', gap: 3, minWidth: 0 }, children: [showTitle && (_jsxs(Box, { sx: {
+                    display: 'flex',
+                    alignItems: 'start',
+                    justifyContent: 'space-between',
+                    gap: 3,
+                }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Alerts" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "What this organization asked to be told about. Each rule is checked once a minute and fires at most once per window." })] }), !readOnly && (_jsx(Button, { variant: "primary", onClick: openCreate, children: "New rule" }))] })), rules.isPending && !rules.data ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 5 }, children: _jsx(Spinner, {}) })) : rows.length > 0 ? (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h3", id: "alert-rules", children: "Rules" }), _jsx(Table.Subtitle, { as: "p", id: "alert-rules-subtitle", children: "A rule switched off stays here and stops being evaluated." }), _jsx(DataTable, { "aria-labelledby": "alert-rules", "aria-describedby": "alert-rules-subtitle", data: rows, columns: columns })] })) : (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(BellIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "Nothing is watched" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "Runs are recorded either way. A rule is what turns a number somebody would have to go and look at into something that reaches you." }) }), !readOnly && (_jsx(Button, { size: "small", onClick: openCreate, children: "New rule" }))] })), _jsx(AlertDestinations, { errorState: errorState, orgUid: orgUid, readOnly: readOnly }), (creating || editing) && (_jsx(Dialog, { title: editing ? 'Edit rule' : 'New alert rule', onClose: close, returnFocusRef: returnFocusRef, footerButtons: [
+                    { buttonType: 'default', content: 'Cancel', onClick: close },
+                    {
+                        buttonType: 'default',
+                        content: test.isPending ? 'Testing…' : 'Test',
+                        onClick: tryIt,
+                        disabled: test.isPending || !draft.condition,
+                    },
+                    {
+                        buttonType: 'primary',
+                        content: editing ? 'Save' : 'Create',
+                        onClick: apply,
+                        disabled: create.isPending || update.isPending,
+                    },
+                ], children: _jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [refusal && (_jsx(Flash, { variant: "danger", children: _jsx(Text, { sx: { fontSize: 1 }, children: refusal }) })), trial && (_jsxs(Flash, { variant: trial.readable ? 'default' : 'warning', children: [_jsx(Text, { sx: { fontSize: 1 }, children: trial.readable
+                                        ? `Right now it reads ${trial.value}, so this rule ${trial.wouldFire ? 'would fire' : 'would not fire'}.`
+                                        : 'This cannot be read at the moment, so the rule would ' +
+                                            'not fire — and a rule that never fires looks exactly ' +
+                                            'like a condition that never happens.' }), trial.detail && (_jsx(Text, { as: "p", sx: { fontSize: 0, color: 'fg.muted', mt: 1, mb: 0 }, children: trial.detail }))] })), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Tell me when" }), _jsx(Select, { value: draft.condition, onChange: event => set('condition', event.target.value), children: ALERT_CONDITIONS.map(condition => (_jsxs(Select.Option, { value: condition.name, 
+                                        // A condition nothing reads would be stored, evaluated
+                                        // every minute and never fire. Offering it as though it
+                                        // worked is the silence rules exist to break.
+                                        disabled: !condition.measurable, children: [condition.label, condition.measurable ? '' : ' — not measurable yet'] }, condition.name))) }), chosen && (_jsx(FormControl.Caption, { children: chosen.help }))] }), _jsxs(Box, { sx: { display: 'grid', gap: 2, gridTemplateColumns: '1fr 1fr' }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Comparison" }), _jsx(Select, { value: draft.operator, onChange: event => set('operator', event.target.value), children: ALERT_OPERATORS.map(operator => (_jsx(Select.Option, { value: operator.name, children: operator.label }, operator.name))) })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Threshold" }), _jsx(TextInput, { block: true, type: "number", value: String(draft.threshold), onChange: event => set('threshold', Number(event.target.value)) })] })] }), _jsxs(Box, { sx: { display: 'grid', gap: 2, gridTemplateColumns: '1fr 1fr' }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Over" }), _jsx(Select, { value: String(draft.windowSeconds), onChange: event => set('windowSeconds', Number(event.target.value)), children: WINDOWS.map(window => (_jsx(Select.Option, { value: String(window.seconds), children: window.label }, window.seconds))) }), _jsx(FormControl.Caption, { children: "It fires once per window, not once per check." })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Severity" }), _jsx(Select, { value: draft.severity, onChange: event => set('severity', event.target.value), children: ALERT_SEVERITIES.map(severity => (_jsx(Select.Option, { value: severity, children: severity }, severity))) }), _jsx(FormControl.Caption, { children: "Sets the colour in Slack and the wording of the notice." })] })] }), _jsxs(Box, { sx: { display: 'grid', gap: 2, gridTemplateColumns: '1fr 1fr' }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Measured over" }), _jsxs(Select, { value: draft.scopeKind, onChange: event => set('scopeKind', event.target.value), children: [_jsx(Select.Option, { value: "organization", children: "The whole organization" }), _jsx(Select.Option, { value: "team", children: "One team" }), _jsx(Select.Option, { value: "user", children: "One person" }), _jsx(Select.Option, { value: "agent", children: "One agent" })] })] }), draft.scopeKind !== 'organization' && (_jsxs(FormControl, { required: true, children: [_jsxs(FormControl.Label, { children: ["Which ", draft.scopeKind] }), _jsx(TextInput, { block: true, value: draft.scopeUid, onChange: event => set('scopeUid', event.target.value), placeholder: "uid" }), _jsx(FormControl.Caption, { children: "Without one the rule would be measured over the whole organization under a name saying otherwise." })] }))] })] }) })), removing && (_jsx(Dialog, { title: "Remove this rule?", onClose: () => setRemoving(null), returnFocusRef: returnFocusRef, footerButtons: [
+                    {
+                        buttonType: 'default',
+                        content: 'Keep it',
+                        onClick: () => setRemoving(null),
+                    },
+                    {
+                        buttonType: 'danger',
+                        content: 'Remove',
+                        onClick: confirmRemove,
+                        disabled: remove.isPending,
+                    },
+                ], children: _jsx(Text, { sx: { fontSize: 1 }, children: "What it watched is unwatched from the next check, and nothing will say so again. If you only want it quiet for now, switch it off instead \u2014 it stays in the list." }) }))] }));
+};
+export default AlertRules;

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

@@ -0,0 +1,66 @@
+/**
+ * The calls an agent cannot make without somebody saying yes.
+ *
+ * A source set to `explicit` stops every call it does not already hold an
+ * approval for. The call waits as `pending-approval`, and the person who
+ * owns the source is the only one who can move it — which means that until
+ * this page existed, "approval required" was a setting that stopped agents
+ * and gave nobody a way to unstop them.
+ *
+ * **An approval is bound to the arguments it was asked about.** Contents
+ * hashes them and re-checks the hash when the call runs, so approving is
+ * approving *those* arguments and not that tool in general. That is why the
+ * redacted arguments are drawn in full rather than summarised: a reader who
+ * cannot see what they are allowing is a reader who approves everything.
+ *
+ * **A pending approval that has expired is not decidable**, and the buttons
+ * go rather than fail. Contents expires them lazily — the record still says
+ * `pending` until something looks at it — so a row can arrive here already
+ * over, and offering an Approve button on it would be offering a decision
+ * the server will refuse.
+ *
+ * @module views/mcp/ApprovalQueue
+ */
+import type { JSX } from 'react';
+import type { McpApproval } from '../../api/contents/generated';
+import { type McpErrorStateFn } from './types';
+/** How each state of an approval is drawn. */
+export declare const APPROVAL_LOOK: Record<McpApproval['status'], {
+    label: string;
+    variant: 'attention' | 'success' | 'danger' | 'secondary';
+}>;
+/**
+ * Whether this approval can still be decided.
+ *
+ * Two conditions, and the second is the one that matters: the record says
+ * `pending`, *and* its deadline has not passed. Contents expires an approval
+ * when something next reads it rather than on a timer, so a row fetched a
+ * minute ago can be `pending` and over. Trusting the status alone would draw
+ * buttons whose only outcome is an error.
+ *
+ * An unparseable deadline is treated as passed. That is the safe direction:
+ * the worst case is somebody has to ask the agent to try again, where the
+ * other way round is a decision taken on a record nobody can date.
+ */
+export declare const isDecidable: (approval: Pick<McpApproval, "status" | "expiresAt">, now?: number) => boolean;
+/**
+ * What a row says about its own deadline.
+ *
+ * A pending approval that has run out is drawn as expired even though the
+ * record still says pending — the reader's question is "can I still act on
+ * this", and the record's answer to that is stale by construction.
+ */
+export declare const approvalLook: (approval: Pick<McpApproval, "status" | "expiresAt">, now?: number) => {
+    label: string;
+    variant: "attention" | "success" | "danger" | "secondary";
+};
+/** The states this page can be filtered to. `pending` is what it opens on. */
+export declare const APPROVAL_FILTERS: McpApproval['status'][];
+export interface ApprovalQueueProps {
+    /** The application's words for a failed request. */
+    errorState: McpErrorStateFn;
+    /** Only the approvals of one source, when the caller has one in mind. */
+    sourceUid?: string;
+}
+export declare const ApprovalQueue: ({ errorState, sourceUid, }: ApprovalQueueProps) => JSX.Element;
+export default ApprovalQueue;