@datalayer/core 1.2.18 → 1.2.20

package/lib/views/iam/SignInSimple.js

@@ -15,7 +15,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState, useCallback, useRef, useMemo, useEffect, } from 'react';
 import { PageConfig, URLExt } from '@jupyterlab/coreutils';
 import { createGlobalStyle } from 'styled-components';
-import { Box, Button, FormControl, Heading, Link, Spinner, Text, Textarea, TextInput, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Button, FormControl, Heading, Link, Spinner, Text, Textarea, TextInput, } from '@primer/react';
 import { EyeIcon, EyeClosedIcon, KeyIcon, MailIcon, SignInIcon, TelescopeIcon, } from '@primer/octicons-react';
 import { GithubMarkIcon, GoogleIcon, LinkedInGreyIcon, } from '@datalayer/icons-react';
 import { useToast } from '../../hooks/index.js';
@@ -318,30 +319,12 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
         }
     }, [mfaUserUid, submit, submitMfa]);
     const socialDisabled = socialLoading || loading || asDoc;
-    return (_jsxs(Box, { className: "signin-input-theme-scope", sx: {
-            display: 'flex',
-            alignItems: hideHero || compactDocMode || !fillHeight ? 'flex-start' : 'center',
-            justifyContent: 'center',
-            minHeight: hideHero || compactDocMode || !fillHeight ? 'auto' : '100vh',
-            bg: hideHero ? 'transparent' : 'canvas.default',
-            color: 'fg.default',
-            py: hideHero ? 0 : compactDocMode ? 2 : 4,
-        }, children: [_jsx(SignInInputGlobalStyle, {}), _jsxs(Box, { sx: {
-                    width: '100%',
-                    maxWidth: 440,
-                    p: 0,
-                }, children: [!hideHero && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: 2,
-                                    mb: compactDocMode ? 2 : 3,
-                                    justifyContent: 'center',
-                                }, children: [headingIcon, _jsx(Heading, { sx: { fontSize: 3 }, children: headingText })] }), _jsx(Text, { as: "p", sx: {
+    return (_jsxs(Box, { className: "signin-input-theme-scope", display: "flex", alignItems: hideHero || compactDocMode || !fillHeight ? 'flex-start' : 'center', justifyContent: "center", minHeight: hideHero || compactDocMode || !fillHeight ? 'auto' : '100vh', bg: hideHero ? 'transparent' : 'canvas.default', color: "fg.default", py: hideHero ? 0 : compactDocMode ? 2 : 4, children: [_jsx(SignInInputGlobalStyle, {}), _jsxs(Box, { width: "100%", maxWidth: 440, p: 0, children: [!hideHero && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, mb: compactDocMode ? 2 : 3, justifyContent: "center", children: [headingIcon, _jsx(Heading, { sx: { fontSize: 3 }, children: headingText })] }), _jsx(Text, { as: "p", sx: {
                                     fontSize: 1,
                                     color: 'fg.muted',
                                     mb: compactDocMode ? 2 : 3,
                                     textAlign: 'center',
-                                }, children: description })] })), (calloutTitle || calloutDescription) && (_jsxs(Box, { sx: { mb: 3, textAlign: 'center' }, children: [calloutTitle && (_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 1 }, children: calloutTitle })), calloutDescription && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: calloutDescription }))] })), !mfaUserUid && (github || google || linkedin) && (_jsxs(_Fragment, { children: [github && (_jsx(Button, { block: true, size: "large", leadingVisual: pendingSocialProvider === 'github'
+                                }, children: description })] })), (calloutTitle || calloutDescription) && (_jsxs(Box, { mb: 3, textAlign: "center", children: [calloutTitle && (_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 1 }, children: calloutTitle })), calloutDescription && (_jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: calloutDescription }))] })), !mfaUserUid && (github || google || linkedin) && (_jsxs(_Fragment, { children: [github && (_jsx(Button, { block: true, size: "large", leadingVisual: pendingSocialProvider === 'github'
                                     ? () => _jsx(Spinner, { size: "small" })
                                     : GithubMarkIcon, disabled: socialDisabled, onClick: () => startOAuthSignIn(OAUTH2_PROVIDERS.github), sx: {
                                     mt: socialButtonMarginTop,
@@ -359,12 +342,7 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
                                     mt: socialButtonMarginTop,
                                     maxWidth: actionButtonMaxWidth,
                                     mx: 'auto',
-                                }, children: "Sign in with LinkedIn" }))] })), !mfaUserUid && !showPasswordForm && (_jsx(Box, { sx: { mt: 3, display: 'flex', justifyContent: 'center' }, children: _jsx(Button, { leadingVisual: KeyIcon, size: "large", block: true, disabled: asDoc || loading || socialLoading, onClick: () => setShowPasswordForm(true), sx: { maxWidth: actionButtonMaxWidth, mx: 'auto' }, children: passwordToggleLabel }) })), !mfaUserUid && showPasswordForm && (_jsxs(Box, { sx: { mt: 4 }, children: [_jsxs(FormControl, { required: true, sx: { mb: 3 }, children: [_jsx(FormControl.Label, { children: "Username" }), _jsx(TextInput, { autoFocus: true, block: true, placeholder: "Your username", value: handle, disabled: loading || asDoc, onChange: e => setHandle(e.target.value), onKeyDown: handleKeyDown })] }), _jsxs(FormControl, { required: true, sx: { mb: 3 }, children: [_jsx(FormControl.Label, { children: "Password" }), _jsx(TextInput, { block: true, placeholder: "Your password", type: showPassword ? 'text' : 'password', value: password, disabled: loading || asDoc, onChange: e => setPassword(e.target.value), onKeyDown: handleKeyDown, trailingAction: _jsx(TextInput.Action, { onClick: () => setShowPassword(!showPassword), disabled: loading || asDoc, icon: showPassword ? EyeClosedIcon : EyeIcon, "aria-label": showPassword ? 'Hide password' : 'Show password', sx: { color: 'var(--fgColor-muted)' } }) })] }), _jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'space-between',
-                                    mt: 3,
-                                }, children: [_jsx(Button, { variant: "primary", disabled: loading || asDoc || !handle || !password, onClick: submit, children: loading ? 'Signing in…' : 'Sign In' }), showForgotPassword && (_jsx(Link, { as: "button", sx: {
+                                }, children: "Sign in with LinkedIn" }))] })), !mfaUserUid && !showPasswordForm && (_jsx(Box, { mt: 3, display: "flex", justifyContent: "center", children: _jsx(Button, { leadingVisual: KeyIcon, size: "large", block: true, disabled: asDoc || loading || socialLoading, onClick: () => setShowPasswordForm(true), sx: { maxWidth: actionButtonMaxWidth, mx: 'auto' }, children: passwordToggleLabel }) })), !mfaUserUid && showPasswordForm && (_jsxs(Box, { mt: 4, children: [_jsxs(FormControl, { required: true, sx: { mb: 3 }, children: [_jsx(FormControl.Label, { children: "Username" }), _jsx(TextInput, { autoFocus: true, block: true, placeholder: "Your username", value: handle, disabled: loading || asDoc, onChange: e => setHandle(e.target.value), onKeyDown: handleKeyDown })] }), _jsxs(FormControl, { required: true, sx: { mb: 3 }, children: [_jsx(FormControl.Label, { children: "Password" }), _jsx(TextInput, { block: true, placeholder: "Your password", type: showPassword ? 'text' : 'password', value: password, disabled: loading || asDoc, onChange: e => setPassword(e.target.value), onKeyDown: handleKeyDown, trailingAction: _jsx(TextInput.Action, { onClick: () => setShowPassword(!showPassword), disabled: loading || asDoc, icon: showPassword ? EyeClosedIcon : EyeIcon, "aria-label": showPassword ? 'Hide password' : 'Show password', sx: { color: 'var(--fgColor-muted)' } }) })] }), _jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", mt: 3, children: [_jsx(Button, { variant: "primary", disabled: loading || asDoc || !handle || !password, onClick: submit, children: loading ? 'Signing in…' : 'Sign In' }), showForgotPassword && (_jsx(Link, { as: "button", sx: {
                                             fontSize: 1,
                                             cursor: asDoc ? 'not-allowed' : 'pointer',
                                             background: 'none',
@@ -375,47 +353,13 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
                                                 return;
                                             }
                                             handleForgotPassword();
-                                        }, children: forgotPasswordLabel }))] })] })), mfaUserUid && (_jsxs(_Fragment, { children: [_jsxs(FormControl, { required: true, sx: { mb: 3, mt: 2 }, children: [_jsx(FormControl.Label, { children: "MFA Code" }), _jsx(TextInput, { autoFocus: true, block: true, placeholder: "Your MFA code", value: mfaCode, disabled: loading || asDoc, onChange: e => setMfaCode(e.target.value), onKeyDown: handleKeyDown })] }), _jsx(Button, { variant: "primary", block: true, disabled: loading || asDoc || !mfaCode.trim(), onClick: submitMfa, sx: { maxWidth: actionButtonMaxWidth, mx: 'auto' }, children: loading ? 'Validating…' : 'Validate MFA Code' })] })), error && (_jsx(Text, { sx: { color: 'danger.fg', fontSize: 1, mt: 3, display: 'block' }, children: error })), signUp && (_jsxs(Box, { sx: {
-                            mt: 4,
-                            pt: 4,
-                            textAlign: 'center',
-                            borderTop: '1px solid',
-                            borderColor: 'border.muted',
-                        }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: signUpTitle }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, mb: 3 }, children: signUpDescription }), _jsx(Box, { sx: { display: 'flex', justifyContent: 'center' }, children: _jsx(Button, { variant: "primary", size: "large", leadingVisual: MailIcon, disabled: asDoc || loading, onClick: handleSignUp, children: signUpLabel }) })] })), apiKey && onApiKeySignIn && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    gap: 2,
-                                    my: 3,
-                                }, children: [_jsx(Box, { sx: { flex: 1, height: '1px', bg: 'border.default' } }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "or" }), _jsx(Box, { sx: { flex: 1, height: '1px', bg: 'border.default' } })] }), _jsx(Button, { block: true, leadingVisual: KeyIcon, disabled: asDoc || loading || socialLoading, onClick: () => setShowApiKeyDialog(true), sx: { maxWidth: actionButtonMaxWidth, mx: 'auto' }, children: "Sign in with an API Key" }), showApiKeyDialog && (_jsx(Box, { role: "dialog", "aria-modal": "true", "aria-labelledby": "signin-api-key-title", onKeyDown: event => {
+                                        }, children: forgotPasswordLabel }))] })] })), mfaUserUid && (_jsxs(_Fragment, { children: [_jsxs(FormControl, { required: true, sx: { mb: 3, mt: 2 }, children: [_jsx(FormControl.Label, { children: "MFA Code" }), _jsx(TextInput, { autoFocus: true, block: true, placeholder: "Your MFA code", value: mfaCode, disabled: loading || asDoc, onChange: e => setMfaCode(e.target.value), onKeyDown: handleKeyDown })] }), _jsx(Button, { variant: "primary", block: true, disabled: loading || asDoc || !mfaCode.trim(), onClick: submitMfa, sx: { maxWidth: actionButtonMaxWidth, mx: 'auto' }, children: loading ? 'Validating…' : 'Validate MFA Code' })] })), error && (_jsx(Text, { sx: { color: 'danger.fg', fontSize: 1, mt: 3, display: 'block' }, children: error })), signUp && (_jsxs(Box, { mt: 4, pt: 4, textAlign: "center", borderTop: "1px solid", borderColor: "border.muted", children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 2 }, children: signUpTitle }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, mb: 3 }, children: signUpDescription }), _jsx(Box, { display: "flex", justifyContent: "center", children: _jsx(Button, { variant: "primary", size: "large", leadingVisual: MailIcon, disabled: asDoc || loading, onClick: handleSignUp, children: signUpLabel }) })] })), apiKey && onApiKeySignIn && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, my: 3, children: [_jsx(Box, { flex: 1, height: "1px", bg: "border.default" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "or" }), _jsx(Box, { flex: 1, height: "1px", bg: "border.default" })] }), _jsx(Button, { block: true, leadingVisual: KeyIcon, disabled: asDoc || loading || socialLoading, onClick: () => setShowApiKeyDialog(true), sx: { maxWidth: actionButtonMaxWidth, mx: 'auto' }, children: "Sign in with an API Key" }), showApiKeyDialog && (_jsx(Box, { role: "dialog", "aria-modal": "true", "aria-labelledby": "signin-api-key-title", onKeyDown: event => {
                                     if (event.key === 'Escape') {
                                         closeApiKeyDialog();
                                     }
-                                }, onClick: closeApiKeyDialog, sx: {
-                                    position: 'fixed',
-                                    inset: 0,
-                                    zIndex: 200,
-                                    p: 3,
-                                    bg: 'canvas.backdrop',
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                }, children: _jsxs(Box, { as: "form", onClick: event => event.stopPropagation(), onSubmit: event => {
+                                }, onClick: closeApiKeyDialog, position: "fixed", inset: 0, zIndex: 200, p: 3, bg: "canvas.backdrop", display: "flex", alignItems: "center", justifyContent: "center", children: _jsxs(Box, { as: "form", onClick: event => event.stopPropagation(), onSubmit: event => {
                                         event.preventDefault();
                                         handleApiKeyAuthenticate();
-                                    }, sx: {
-                                        width: 'min(560px, 100%)',
-                                        p: 3,
-                                        borderRadius: 2,
-                                        border: '1px solid',
-                                        borderColor: 'border.default',
-                                        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.currentTarget.value), ref: apiKeyRef })] }), _jsxs(Box, { sx: {
-                                                mt: 3,
-                                                display: 'flex',
-                                                justifyContent: 'flex-end',
-                                                gap: 2,
-                                            }, children: [_jsx(Button, { type: "button", onClick: closeApiKeyDialog, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", disabled: !apiKeyValue.trim(), children: "Authenticate" })] })] }) }))] }))] })] }));
+                                    }, width: "min(560px, 100%)", p: 3, borderRadius: 2, border: "1px solid", borderColor: "border.default", 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.currentTarget.value), ref: apiKeyRef })] }), _jsxs(Box, { mt: 3, display: "flex", justifyContent: "flex-end", gap: 2, children: [_jsx(Button, { type: "button", onClick: closeApiKeyDialog, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", disabled: !apiKeyValue.trim(), children: "Authenticate" })] })] }) }))] }))] })] }));
 };
 export default SignInSimple;

package/lib/views/mcp/AdmittedClients.js

@@ -8,20 +8,7 @@ const Row = ({ client }) => {
     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 && (
+    return (_jsxs(Box, { display: "grid", gridTemplateColumns: "auto 1fr", gap: 2, alignItems: "start", py: 2, borderTop: "1px solid", borderColor: "border.muted", children: [_jsx(Box, { color: tone, pt: "2px", children: icon }), _jsxs(Box, { display: "grid", gap: 1, minWidth: 0, children: [_jsxs(Box, { 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.
@@ -35,7 +22,7 @@ const Row = ({ client }) => {
 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" }) }));
+        return (_jsx(Box, { 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
@@ -54,6 +41,6 @@ export const AdmittedClients = ({ scope, subjectUid, edited = false, }) => {
         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)))] }));
+    return (_jsxs(Box, { 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.js

@@ -1,7 +1,7 @@
 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 { Box, Card } from '@datalayer/primer-addons';
 import { McpErrorBlankslate } from '../../components/mcp/index.js';
 import { useAuditSettings, useSetAuditSettings } from '../../hooks/useMcp.js';
 import { useToast } from '../../hooks/index.js';
@@ -60,16 +60,8 @@ export const AlertDestinations = ({ errorState, orgUid, readOnly = false, }) =>
         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 (_jsx(Box, { 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."] })] }));
+    return (_jsxs(Card, { border: true, shadow: "none", display: "grid", gap: 3, maxWidth: "42rem", p: 3, 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, { 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.js

@@ -166,7 +166,7 @@ export const AlertRules = ({ errorState, orgUid, readOnly = false, showTitle = t
             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}`] })] })),
+            renderCell: row => (_jsxs(Box, { 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',
@@ -201,12 +201,7 @@ export const AlertRules = ({ errorState, orgUid, readOnly = false, showTitle = t
         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: [
+    return (_jsxs(Box, { display: "grid", gap: 3, minWidth: 0, children: [showTitle && (_jsxs(Box, { 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, { 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',
@@ -220,7 +215,7 @@ export const AlertRules = ({ errorState, orgUid, readOnly = false, showTitle = t
                         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
+                ], children: _jsxs(Box, { 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 ' +
@@ -228,7 +223,7 @@ export const AlertRules = ({ errorState, orgUid, readOnly = false, showTitle = t
                                         // 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: [
+                                        disabled: !condition.measurable, children: [condition.label, condition.measurable ? '' : ' — not measurable yet'] }, condition.name))) }), chosen && (_jsx(FormControl.Caption, { children: chosen.help }))] }), _jsxs(Box, { 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, { 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, { 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',

package/lib/views/mcp/ApprovalQueue.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Button, Heading, Label, RelativeTime, SegmentedControl, Spinner, Text, Textarea, } from '@primer/react';
-import { Box } from '@datalayer/primer-addons';
+import { Box, Card } from '@datalayer/primer-addons';
 import { McpErrorBlankslate } from '../../components/mcp/index.js';
-import { useDecideMcpApproval, useMcpApprovals, } from '../../hooks/useContents.js';
+import { useDecideMcpApproval, useMcpApprovals } from '../../hooks/useContents.js';
 /** How each state of an approval is drawn. */
 export const APPROVAL_LOOK = {
     pending: { label: 'Waiting on you', variant: 'attention' },
@@ -54,32 +54,15 @@ export const ApprovalQueue = ({ errorState, sourceUid, }) => {
     const approvals = useMcpApprovals(status, sourceUid ? { sourceUid } : {});
     const decide = useDecideMcpApproval();
     const items = approvals.data?.items ?? [];
-    return (_jsxs(Box, { sx: { display: 'grid', gap: 3, minWidth: 0 }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 1 }, children: "Approvals" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: "A source set to require approval stops each call until you allow it. An approval covers the exact arguments below and nothing else, so a second call with different arguments asks again." })] }), _jsx(SegmentedControl, { "aria-label": "Which approvals", size: "small", children: APPROVAL_FILTERS.map(state => (_jsx(SegmentedControl.Button, { selected: status === state, onClick: () => setStatus(state), children: APPROVAL_LOOK[state].label }, state))) }), approvals.isError ? (_jsx(McpErrorBlankslate, { state: errorState(approvals.error, 'The approvals'), onRetry: () => approvals.refetch() })) : approvals.isPending ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 5 }, children: _jsx(Spinner, {}) })) : items.length === 0 ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: status === 'pending'
+    return (_jsxs(Box, { display: "grid", gap: 3, minWidth: 0, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2, mb: 1 }, children: "Approvals" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: "A source set to require approval stops each call until you allow it. An approval covers the exact arguments below and nothing else, so a second call with different arguments asks again." })] }), _jsx(SegmentedControl, { "aria-label": "Which approvals", size: "small", children: APPROVAL_FILTERS.map(state => (_jsx(SegmentedControl.Button, { selected: status === state, onClick: () => setStatus(state), children: APPROVAL_LOOK[state].label }, state))) }), approvals.isError ? (_jsx(McpErrorBlankslate, { state: errorState(approvals.error, 'The approvals'), onRetry: () => approvals.refetch() })) : approvals.isPending ? (_jsx(Box, { display: "flex", justifyContent: "center", py: 5, children: _jsx(Spinner, {}) })) : items.length === 0 ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: status === 'pending'
                     ? 'Nothing is waiting on you.'
                     : `No ${APPROVAL_LOOK[status].label.toLowerCase()} approvals.` })) : (items.map(approval => {
                 const look = approvalLook(approval);
                 const decidable = isDecidable(approval);
-                return (_jsxs(Box, { sx: {
-                        border: '1px solid',
-                        borderColor: decidable ? 'attention.emphasis' : 'border.default',
-                        borderRadius: 2,
-                        p: 3,
-                        display: 'grid',
-                        gap: 2,
-                        minWidth: 0,
-                    }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(Label, { size: "small", variant: look.variant, children: look.label }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: approval.tool }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontFamily: 'mono' }, children: approval.actorUid }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["asked ", _jsx(RelativeTime, { datetime: approval.createdAt })] }), decidable && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["expires ", _jsx(RelativeTime, { datetime: approval.expiresAt })] }))] }), _jsx(Box, { as: "pre", sx: {
-                                fontFamily: 'mono',
-                                fontSize: 0,
-                                whiteSpace: 'pre-wrap',
-                                overflowX: 'auto',
-                                bg: 'canvas.subtle',
-                                borderRadius: 2,
-                                p: 2,
-                                m: 0,
-                            }, children: JSON.stringify(approval.argumentsRedacted, null, 2) }), approval.destinationUri && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Writes to", ' ', _jsx(Text, { as: "span", sx: { fontFamily: 'mono' }, children: approval.destinationUri })] })), decidable ? (_jsxs(_Fragment, { children: [_jsx(Textarea, { "aria-label": `Why, for ${approval.tool}`, rows: 2, placeholder: "Why (optional; kept with the decision)", value: noteFor[approval.uid] ?? '', onChange: event => setNoteFor(current => ({
+                return (_jsxs(Card, { border: true, shadow: "none", borderColor: decidable ? 'attention.emphasis' : 'border.default', p: 3, display: "grid", gap: 2, minWidth: 0, children: [_jsxs(Box, { display: "flex", gap: 2, alignItems: "center", flexWrap: "wrap", children: [_jsx(Label, { size: "small", variant: look.variant, children: look.label }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: approval.tool }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontFamily: 'mono' }, children: approval.actorUid }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["asked ", _jsx(RelativeTime, { datetime: approval.createdAt })] }), decidable && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["expires ", _jsx(RelativeTime, { datetime: approval.expiresAt })] }))] }), _jsx(Box, { as: "pre", fontFamily: "mono", fontSize: 0, whiteSpace: "pre-wrap", overflowX: "auto", bg: "canvas.subtle", borderRadius: 2, p: 2, m: 0, children: JSON.stringify(approval.argumentsRedacted, null, 2) }), approval.destinationUri && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Writes to", ' ', _jsx(Text, { as: "span", sx: { fontFamily: 'mono' }, children: approval.destinationUri })] })), decidable ? (_jsxs(_Fragment, { children: [_jsx(Textarea, { "aria-label": `Why, for ${approval.tool}`, rows: 2, placeholder: "Why (optional; kept with the decision)", value: noteFor[approval.uid] ?? '', onChange: event => setNoteFor(current => ({
                                         ...current,
                                         [approval.uid]: event.target.value,
-                                    })) }), _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Button, { variant: "primary", disabled: decide.isPending, onClick: () => decide.mutate({
+                                    })) }), _jsxs(Box, { display: "flex", gap: 2, children: [_jsx(Button, { variant: "primary", disabled: decide.isPending, onClick: () => decide.mutate({
                                                 approvalUid: approval.uid,
                                                 decision: 'approve',
                                                 note: noteFor[approval.uid] || undefined,

package/lib/views/mcp/AuditLog.js

@@ -81,64 +81,27 @@ export const AuditLog = ({ errorState, routes, filters, onFiltersChange, retenti
     if (page.isError) {
         return (_jsx(McpErrorBlankslate, { state: errorState(page.error, 'Audit'), onRetry: () => page.refetch() }));
     }
-    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: "Audit" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: ["Every call ", subject, " made through MCP, what was decided, and why."] })] })), forwarding.data?.configured && forwarding.data.state && (_jsx(Flash, { variant: forwarding.data.state.healthy ? 'default' : 'danger', children: _jsx(Text, { sx: { fontSize: 1 }, children: forwarding.data.state.healthy ? (_jsxs(_Fragment, { children: ["Forwarded to your own system of record \u2014", ' ', forwarding.data.state.delivered, " batches", forwarding.data.state.lastDeliveredAt && (_jsxs(_Fragment, { children: [", last", ' ', _jsx(RelativeTime, { datetime: forwarding.data.state.lastDeliveredAt })] })), "."] })) : (_jsxs(_Fragment, { children: [_jsx("strong", { children: "Forwarding is failing." }), " These rows are kept here and are not reaching your own system of record:", ' ', forwarding.data.state.lastError, forwarding.data.state.lastErrorAt && (_jsxs(_Fragment, { children: [' ', "(", _jsx(RelativeTime, { datetime: forwarding.data.state.lastErrorAt }), ")"] })), ". ", forwarding.data.state.failed, " batches have failed."] })) }) })), _jsxs(Box, { sx: {
-                    display: 'grid',
-                    gap: 2,
-                    gridTemplateColumns: ['1fr', 'repeat(2, 1fr)', 'repeat(5, 1fr)'],
-                    alignItems: 'end',
-                }, children: [_jsx(TextInput, { size: "small", "aria-label": "Agent", placeholder: "Agent", value: filters.agent ?? '', onChange: event => set({ agent: event.currentTarget.value || undefined }) }), _jsx(TextInput, { size: "small", "aria-label": "Tool", placeholder: "Tool", value: filters.tool ?? '', onChange: event => set({ tool: event.currentTarget.value || undefined }) }), _jsxs(Select, { size: "small", "aria-label": "Decision", value: filters.decision ?? '', onChange: event => set({
+    return (_jsxs(Box, { display: "grid", gap: 3, minWidth: 0, children: [showTitle && (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Audit" }), _jsxs(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: ["Every call ", subject, " made through MCP, what was decided, and why."] })] })), forwarding.data?.configured && forwarding.data.state && (_jsx(Flash, { variant: forwarding.data.state.healthy ? 'default' : 'danger', children: _jsx(Text, { sx: { fontSize: 1 }, children: forwarding.data.state.healthy ? (_jsxs(_Fragment, { children: ["Forwarded to your own system of record \u2014", ' ', forwarding.data.state.delivered, " batches", forwarding.data.state.lastDeliveredAt && (_jsxs(_Fragment, { children: [", last", ' ', _jsx(RelativeTime, { datetime: forwarding.data.state.lastDeliveredAt })] })), "."] })) : (_jsxs(_Fragment, { children: [_jsx("strong", { children: "Forwarding is failing." }), " These rows are kept here and are not reaching your own system of record:", ' ', forwarding.data.state.lastError, forwarding.data.state.lastErrorAt && (_jsxs(_Fragment, { children: [' ', "(", _jsx(RelativeTime, { datetime: forwarding.data.state.lastErrorAt }), ")"] })), ". ", forwarding.data.state.failed, " batches have failed."] })) }) })), _jsxs(Box, { display: "grid", gap: 2, gridTemplateColumns: ['1fr', 'repeat(2, 1fr)', 'repeat(5, 1fr)'], alignItems: "end", children: [_jsx(TextInput, { size: "small", "aria-label": "Agent", placeholder: "Agent", value: filters.agent ?? '', onChange: event => set({ agent: event.currentTarget.value || undefined }) }), _jsx(TextInput, { size: "small", "aria-label": "Tool", placeholder: "Tool", value: filters.tool ?? '', onChange: event => set({ tool: event.currentTarget.value || undefined }) }), _jsxs(Select, { size: "small", "aria-label": "Decision", value: filters.decision ?? '', onChange: event => set({
                             decision: (event.currentTarget.value ||
                                 undefined),
                         }), children: [_jsx(Select.Option, { value: "", children: "Every decision" }), _jsx(Select.Option, { value: "allowed", children: "Allowed" }), _jsx(Select.Option, { value: "refused", children: "Refused" })] }), _jsxs(Select, { size: "small", "aria-label": "Outcome", value: filters.outcome ?? '', onChange: event => set({
                             outcome: (event.currentTarget.value ||
                                 undefined),
-                        }), children: [_jsx(Select.Option, { value: "", children: "Every outcome" }), _jsx(Select.Option, { value: "ok", children: "Succeeded" }), _jsx(Select.Option, { value: "error", children: "Failed" }), _jsx(Select.Option, { value: "is_error", children: "Tool error" })] }), _jsx(Box, { sx: { display: 'flex', gap: 2, justifyContent: 'flex-end' }, children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { size: "small", leadingVisual: DownloadIcon, disabled: exporting.isPending, children: "Export" }), _jsx(ActionMenu.Overlay, { align: "end", children: _jsxs(ActionList, { children: [_jsxs(ActionList.Item, { onSelect: () => exportAs('jsonl'), children: ["JSONL", _jsx(ActionList.Description, { variant: "block", children: "One row per line, as a SIEM reads it." })] }), _jsxs(ActionList.Item, { onSelect: () => exportAs('csv'), children: ["CSV", _jsx(ActionList.Description, { variant: "block", children: "The same rows for a spreadsheet." })] })] }) })] }) })] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: ["Audit rows are written once and never changed or deleted by anyone, here or elsewhere. Arguments are redacted before they are written.", ' ', retention] }), page.isPending && !page.data ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 6 }, children: _jsx(Spinner, {}) })) : rows.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(HistoryIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "Nothing to audit yet" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "Every call an agent makes is written down here with its decision and its outcome. Connect a client and ask it to list your notebooks." }) }), _jsx(Button, { size: "small", onClick: () => navigate(routes.access), children: "Connect an agent" })] })) : (
+                        }), children: [_jsx(Select.Option, { value: "", children: "Every outcome" }), _jsx(Select.Option, { value: "ok", children: "Succeeded" }), _jsx(Select.Option, { value: "error", children: "Failed" }), _jsx(Select.Option, { value: "is_error", children: "Tool error" })] }), _jsx(Box, { display: "flex", gap: 2, justifyContent: "flex-end", children: _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Button, { size: "small", leadingVisual: DownloadIcon, disabled: exporting.isPending, children: "Export" }), _jsx(ActionMenu.Overlay, { align: "end", children: _jsxs(ActionList, { children: [_jsxs(ActionList.Item, { onSelect: () => exportAs('jsonl'), children: ["JSONL", _jsx(ActionList.Description, { variant: "block", children: "One row per line, as a SIEM reads it." })] }), _jsxs(ActionList.Item, { onSelect: () => exportAs('csv'), children: ["CSV", _jsx(ActionList.Description, { variant: "block", children: "The same rows for a spreadsheet." })] })] }) })] }) })] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: ["Audit rows are written once and never changed or deleted by anyone, here or elsewhere. Arguments are redacted before they are written.", ' ', retention] }), page.isPending && !page.data ? (_jsx(Box, { display: "flex", justifyContent: "center", py: 6, children: _jsx(Spinner, {}) })) : rows.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(HistoryIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "Nothing to audit yet" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "Every call an agent makes is written down here with its decision and its outcome. Connect a client and ask it to list your notebooks." }) }), _jsx(Button, { size: "small", onClick: () => navigate(routes.access), children: "Connect an agent" })] })) : (
             /* The rail of the activity view: each mark on a tinted disc, the discs
                linked by a line, so the rows carry no border of their own. */
-            _jsx(Box, { sx: { display: 'grid' }, children: rows.map((event, index) => {
+            _jsx(Box, { display: "grid", children: rows.map((event, index) => {
                     const look = decisionLook(event);
                     const isLast = index === rows.length - 1;
-                    return (_jsxs(Box, { sx: { display: 'flex', gap: 3 }, children: [_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    flexDirection: 'column',
-                                    alignItems: 'center',
-                                }, children: [_jsx(Box, { sx: {
-                                            width: 26,
-                                            height: 26,
-                                            borderRadius: '50%',
-                                            display: 'inline-flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'center',
-                                            color: look.fg,
-                                            bg: look.bg,
-                                            flexShrink: 0,
-                                        }, children: _jsx(look.Icon, { size: 13 }) }), !isLast && (_jsx(Box, { sx: { width: '2px', flex: 1, bg: 'border.muted', my: 1 } }))] }), _jsxs(Box, { sx: {
-                                    flexGrow: 1,
-                                    minWidth: 0,
-                                    pb: isLast ? 0 : 3,
-                                    pt: '3px',
-                                }, children: [_jsx(Link, { as: "button", sx: {
+                    return (_jsxs(Box, { display: "flex", gap: 3, children: [_jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", children: [_jsx(Box, { width: 26, height: 26, borderRadius: "50%", display: "inline-flex", alignItems: "center", justifyContent: "center", color: look.fg, bg: look.bg, flexShrink: 0, children: _jsx(look.Icon, { size: 13 }) }), !isLast && (_jsx(Box, { width: "2px", flex: 1, bg: "border.muted", my: 1 }))] }), _jsxs(Box, { flexGrow: 1, minWidth: 0, pb: isLast ? 0 : 3, pt: "3px", children: [_jsx(Link, { as: "button", sx: {
                                             fontSize: 1,
                                             display: 'block',
                                             textAlign: 'left',
                                             cursor: 'pointer',
-                                        }, onClick: () => setOpen(event), children: event.tool || event.method }), _jsxs(Box, { sx: {
-                                            display: 'flex',
-                                            gap: 2,
-                                            alignItems: 'center',
-                                            mt: 1,
-                                            flexWrap: 'wrap',
-                                        }, children: [_jsx(Label, { size: "small", variant: event.decision === 'refused' ? 'danger' : 'success', children: event.decision }), event.clientId && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: event.clientId })), event.itemUid && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["on ", event.itemUid] })), event.durationMs !== null &&
+                                        }, onClick: () => setOpen(event), children: event.tool || event.method }), _jsxs(Box, { display: "flex", gap: 2, alignItems: "center", mt: 1, flexWrap: "wrap", children: [_jsx(Label, { size: "small", variant: event.decision === 'refused' ? 'danger' : 'success', children: event.decision }), event.clientId && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: event.clientId })), event.itemUid && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["on ", event.itemUid] })), event.durationMs !== null &&
                                                 event.durationMs !== undefined && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: durationLabel(event.durationMs) })), event.refusalReason && (_jsx(Text, { sx: { fontSize: 0, color: 'danger.fg' }, children: event.refusalReason }))] })] }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', flexShrink: 0 }, children: _jsx(RelativeTime, { datetime: event.at }) })] }, event.uid));
-                }) })), (walked.length > 0 || nextCursor) && (_jsxs(Box, { sx: { display: 'flex', gap: 2, justifyContent: 'center' }, children: [_jsx(Button, { size: "small", leadingVisual: ChevronLeftIcon, disabled: walked.length === 0, onClick: newer, children: "Newer" }), _jsx(Button, { size: "small", trailingVisual: ChevronRightIcon, disabled: !nextCursor, onClick: older, children: "Older" })] })), open && (_jsx(Dialog, { title: open.tool || open.method, subtitle: `${open.decision} · ${open.outcome ?? 'no outcome recorded'}`, onClose: () => setOpen(null), returnFocusRef: returnFocusRef, width: "large", children: _jsxs(Box, { sx: { display: 'grid', gap: 3 }, children: [_jsxs(Box, { sx: { display: 'grid', gap: 1 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "When" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [_jsx(RelativeTime, { datetime: open.at }), " \u2014 ", open.at] })] }), _jsxs(Box, { sx: { display: 'grid', gap: 1 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Who" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [open.clientId || 'unknown client', open.act &&
+                }) })), (walked.length > 0 || nextCursor) && (_jsxs(Box, { display: "flex", gap: 2, justifyContent: "center", children: [_jsx(Button, { size: "small", leadingVisual: ChevronLeftIcon, disabled: walked.length === 0, onClick: newer, children: "Newer" }), _jsx(Button, { size: "small", trailingVisual: ChevronRightIcon, disabled: !nextCursor, onClick: older, children: "Older" })] })), open && (_jsx(Dialog, { title: open.tool || open.method, subtitle: `${open.decision} · ${open.outcome ?? 'no outcome recorded'}`, onClose: () => setOpen(null), returnFocusRef: returnFocusRef, width: "large", children: _jsxs(Box, { display: "grid", gap: 3, children: [_jsxs(Box, { display: "grid", gap: 1, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "When" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [_jsx(RelativeTime, { datetime: open.at }), " \u2014 ", open.at] })] }), _jsxs(Box, { display: "grid", gap: 1, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Who" }), _jsxs(Text, { sx: { fontSize: 1 }, children: [open.clientId || 'unknown client', open.act &&
                                             open.act.length > 0 &&
-                                            ` acting for ${open.act.join(' → ')}`] })] }), open.refusalReason && (_jsxs(Box, { sx: { display: 'grid', gap: 1 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Why it was refused" }), _jsx(Text, { sx: { fontSize: 1, color: 'danger.fg' }, children: open.refusalReason })] })), _jsxs(Box, { sx: { display: 'grid', gap: 1 }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Arguments, redacted before they were written" }), _jsx(Box, { as: "pre", sx: {
-                                        m: 0,
-                                        p: 2,
-                                        fontSize: 0,
-                                        bg: 'canvas.inset',
-                                        borderRadius: 2,
-                                        overflowX: 'auto',
-                                    }, children: JSON.stringify(open.redactedArguments ?? {}, null, 2) }), open.argumentsHash && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle', fontFamily: 'mono' }, children: open.argumentsHash }))] }), _jsxs(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: [open.taskId && (_jsx(Button, { size: "small", onClick: () => navigate(`${routes.runs}/${encodeURIComponent(open.taskId)}`), children: "The run" })), open.traceId && (_jsx(Button, { size: "small", onClick: () => navigate(`${routes.observability}?trace=${encodeURIComponent(open.traceId)}`), children: "The trace" }))] })] }) }))] }));
+                                            ` acting for ${open.act.join(' → ')}`] })] }), open.refusalReason && (_jsxs(Box, { display: "grid", gap: 1, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Why it was refused" }), _jsx(Text, { sx: { fontSize: 1, color: 'danger.fg' }, children: open.refusalReason })] })), _jsxs(Box, { display: "grid", gap: 1, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Arguments, redacted before they were written" }), _jsx(Box, { as: "pre", m: 0, p: 2, fontSize: 0, bg: "canvas.inset", borderRadius: 2, overflowX: "auto", children: JSON.stringify(open.redactedArguments ?? {}, null, 2) }), open.argumentsHash && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle', fontFamily: 'mono' }, children: open.argumentsHash }))] }), _jsxs(Box, { display: "flex", gap: 2, flexWrap: "wrap", children: [open.taskId && (_jsx(Button, { size: "small", onClick: () => navigate(`${routes.runs}/${encodeURIComponent(open.taskId)}`), children: "The run" })), open.traceId && (_jsx(Button, { size: "small", onClick: () => navigate(`${routes.observability}?trace=${encodeURIComponent(open.traceId)}`), children: "The trace" }))] })] }) }))] }));
 };
 export default AuditLog;

package/lib/views/mcp/ConnectedAgents.js

@@ -101,12 +101,7 @@ export const ConnectedAgents = ({ errorState, routes, showTitle = true, readOnly
     if (agents.isError) {
         return (_jsx(McpErrorBlankslate, { state: errorState(agents.error, 'Connected agents'), onRetry: () => agents.refetch() }));
     }
-    return (_jsxs(Box, { sx: { display: 'grid', gap: 3, minWidth: 0 }, children: [showTitle && (_jsxs(Box, { sx: {
-                    display: 'flex',
-                    alignItems: 'start',
-                    justifyContent: 'space-between',
-                    gap: 3,
-                }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Connected Agents" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "Every agent you have authorized, what it may do, and when it last did it." })] }), !readOnly && rows.length > 0 && (_jsx(Button, { variant: "danger", onClick: () => setDisconnectingEvery(true), disabled: disconnectEvery.isPending, children: "Disconnect all" }))] })), agents.isPending && !agents.data ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 5 }, children: _jsx(Spinner, {}) })) : rows.length > 0 ? (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h3", id: "connected-agents", children: "Agents" }), _jsx(Table.Subtitle, { as: "p", id: "connected-agents-subtitle", children: "An agent acts with exactly the access of the person who authorized it, and no more." }), _jsx(DataTable, { "aria-labelledby": "connected-agents", "aria-describedby": "connected-agents-subtitle", data: rows, columns: columns })] })) : (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(PlugIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "No agent connected" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "Connect an MCP client and approve the scopes it asks for; the grant appears here and can be revoked from here." }) }), _jsx(Button, { size: "small", onClick: () => navigate(routes.access), children: "Connect an agent" })] })), _jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "Narrowing a grant to fewer scopes without disconnecting arrives with the organization policy." }), disconnecting && (_jsx(Dialog, { title: "Disconnect this agent?", onClose: () => setDisconnecting(null), returnFocusRef: returnFocusRef, footerButtons: [
+    return (_jsxs(Box, { display: "grid", gap: 3, minWidth: 0, children: [showTitle && (_jsxs(Box, { display: "flex", alignItems: "start", justifyContent: "space-between", gap: 3, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Connected Agents" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "Every agent you have authorized, what it may do, and when it last did it." })] }), !readOnly && rows.length > 0 && (_jsx(Button, { variant: "danger", onClick: () => setDisconnectingEvery(true), disabled: disconnectEvery.isPending, children: "Disconnect all" }))] })), agents.isPending && !agents.data ? (_jsx(Box, { display: "flex", justifyContent: "center", py: 5, children: _jsx(Spinner, {}) })) : rows.length > 0 ? (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h3", id: "connected-agents", children: "Agents" }), _jsx(Table.Subtitle, { as: "p", id: "connected-agents-subtitle", children: "An agent acts with exactly the access of the person who authorized it, and no more." }), _jsx(DataTable, { "aria-labelledby": "connected-agents", "aria-describedby": "connected-agents-subtitle", data: rows, columns: columns })] })) : (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(PlugIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "No agent connected" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "Connect an MCP client and approve the scopes it asks for; the grant appears here and can be revoked from here." }) }), _jsx(Button, { size: "small", onClick: () => navigate(routes.access), children: "Connect an agent" })] })), _jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "Narrowing a grant to fewer scopes without disconnecting arrives with the organization policy." }), disconnecting && (_jsx(Dialog, { title: "Disconnect this agent?", onClose: () => setDisconnecting(null), returnFocusRef: returnFocusRef, footerButtons: [
                     {
                         buttonType: 'default',
                         content: 'Keep it',

package/lib/views/mcp/EnterpriseConsole.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button, Heading, Label, SegmentedControl, Spinner, Text, } from '@primer/react';
 import { Blankslate, DataTable, Table } from '@primer/react/experimental';
-import { Box } from '@datalayer/primer-addons';
+import { Box, Card } from '@datalayer/primer-addons';
 import { AlertIcon, CheckCircleIcon, LockIcon, PlugIcon, } from '@primer/octicons-react';
 import { ClientBadge, McpErrorBlankslate, ScopeList, } from '../../components/mcp/index.js';
 import { useDisconnectAgent, useMcpActivity, useOrgMcpOverview, } from '../../hooks/useMcp.js';
@@ -90,13 +90,7 @@ export const pagesForRoles = (roles) => {
     }
     return [];
 };
-const Metric = ({ label, value, note, tone = 'neutral', }) => (_jsxs(Box, { sx: {
-        p: 3,
-        border: '1px solid',
-        borderColor: 'border.default',
-        borderRadius: 2,
-        minWidth: 0,
-    }, children: [_jsx(Text, { sx: {
+const Metric = ({ label, value, note, tone = 'neutral', }) => (_jsxs(Card, { border: true, shadow: "none", display: "block", p: 3, minWidth: 0, children: [_jsx(Text, { sx: {
                 display: 'block',
                 fontSize: 4,
                 fontWeight: 'bold',
@@ -161,7 +155,7 @@ export const EnterpriseConsole = ({ errorState, routes, organization, roles, pag
             id: 'actions',
             width: '200px',
             align: 'end',
-            renderCell: row => (_jsxs(Box, { sx: { display: 'flex', gap: 2, justifyContent: 'flex-end' }, children: [_jsx(Button, { size: "small", onClick: () => navigate(`${routes.audit}?org=${encodeURIComponent(organization.uid)}&agent=${encodeURIComponent(row.clientId)}`), children: "Audit" }), _jsx(Button, { size: "small", variant: "danger", disabled: !row.grantUid, onClick: () => row.grantUid &&
+            renderCell: row => (_jsxs(Box, { display: "flex", gap: 2, justifyContent: "flex-end", children: [_jsx(Button, { size: "small", onClick: () => navigate(`${routes.audit}?org=${encodeURIComponent(organization.uid)}&agent=${encodeURIComponent(row.clientId)}`), children: "Audit" }), _jsx(Button, { size: "small", variant: "danger", disabled: !row.grantUid, onClick: () => row.grantUid &&
                             disconnect.mutate(row.grantUid, {
                                 onSuccess: () => enqueueToast(`${row.clientName || row.clientId} is disconnected.`, {
                                     variant: 'success',
@@ -170,26 +164,19 @@ export const EnterpriseConsole = ({ errorState, routes, organization, roles, pag
                             }), children: "Revoke" })] })),
         },
     ];
-    return (_jsxs(Box, { sx: { display: 'grid', gap: 4, minWidth: 0 }, children: [_jsxs(Box, { children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2, mb: 1 }, children: ["MCP \u2014 ", organization.name || organization.handle] }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "What the agents of this organization are doing, what they were allowed to do, and how it ran." })] }), _jsx(SegmentedControl, { "aria-label": "MCP console pages", size: "small", children: ENTERPRISE_CONSOLE_PAGES.filter(entry => allowed.includes(entry.id)).map(entry => (_jsx(SegmentedControl.Button, { selected: current === entry.id, onClick: () => onPageChange(entry.id), children: entry.label }, entry.id))) }), current === 'overview' &&
-                (overview.isError ? (_jsx(McpErrorBlankslate, { state: errorState(overview.error, 'The overview'), onRetry: () => overview.refetch() })) : overview.isPending && !overview.data ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 6 }, children: _jsx(Spinner, {}) })) : (_jsxs(Box, { sx: { display: 'grid', gap: 4 }, children: [_jsxs(Box, { sx: {
-                                display: 'grid',
-                                gap: 3,
-                                gridTemplateColumns: [
-                                    'repeat(2, 1fr)',
-                                    'repeat(3, 1fr)',
-                                    'repeat(5, 1fr)',
-                                ],
-                            }, children: [_jsx(Metric, { label: "Agents active today", value: overview.data?.agents.activeToday ?? 0, note: `${overview.data?.agents.delegated ?? 0} delegated · ${overview.data?.agents.service ?? 0} service` }), _jsx(Metric, { label: "Runs today", value: overview.data?.runs.today ?? 0 }), _jsx(Metric, { label: "Success rate", value: overview.data?.runs.successRate === null ||
+    return (_jsxs(Box, { display: "grid", gap: 4, minWidth: 0, children: [_jsxs(Box, { children: [_jsxs(Heading, { as: "h3", sx: { fontSize: 2, mb: 1 }, children: ["MCP \u2014 ", organization.name || organization.handle] }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "What the agents of this organization are doing, what they were allowed to do, and how it ran." })] }), _jsx(SegmentedControl, { "aria-label": "MCP console pages", size: "small", children: ENTERPRISE_CONSOLE_PAGES.filter(entry => allowed.includes(entry.id)).map(entry => (_jsx(SegmentedControl.Button, { selected: current === entry.id, onClick: () => onPageChange(entry.id), children: entry.label }, entry.id))) }), current === 'overview' &&
+                (overview.isError ? (_jsx(McpErrorBlankslate, { state: errorState(overview.error, 'The overview'), onRetry: () => overview.refetch() })) : overview.isPending && !overview.data ? (_jsx(Box, { display: "flex", justifyContent: "center", py: 6, children: _jsx(Spinner, {}) })) : (_jsxs(Box, { display: "grid", gap: 4, children: [_jsxs(Box, { display: "grid", gap: 3, gridTemplateColumns: [
+                                'repeat(2, 1fr)',
+                                'repeat(3, 1fr)',
+                                'repeat(5, 1fr)',
+                            ], children: [_jsx(Metric, { label: "Agents active today", value: overview.data?.agents.activeToday ?? 0, note: `${overview.data?.agents.delegated ?? 0} delegated · ${overview.data?.agents.service ?? 0} service` }), _jsx(Metric, { label: "Runs today", value: overview.data?.runs.today ?? 0 }), _jsx(Metric, { label: "Success rate", value: overview.data?.runs.successRate === null ||
                                         overview.data?.runs.successRate === undefined
                                         ? '—'
                                         : `${(overview.data.runs.successRate * 100).toFixed(0)}%`, note: `${overview.data?.runs.failed ?? 0} failed` }), _jsx(Metric, { label: "Credits today", value: overview.data?.spend?.creditsToday ?? '—', note: overview.data?.spend?.quotaMonth
                                         ? `${overview.data.spend.creditsMonth} of ${overview.data.spend.quotaMonth} this month`
                                         : 'Quotas arrive with the organization policy' }), _jsx(Metric, { label: "Refusals today", value: (overview.data?.refusals ?? []).reduce((sum, row) => sum + row.count, 0), tone: (overview.data?.refusals ?? []).length > 0
                                         ? 'danger'
-                                        : 'neutral' })] }), (overview.data?.refusals ?? []).length > 0 && (_jsxs(Box, { sx: { display: 'grid', gap: 2 }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1 }, children: "Why calls were refused" }), _jsx(Box, { sx: { display: 'flex', gap: 2, flexWrap: 'wrap' }, children: (overview.data?.refusals ?? []).map(row => (_jsxs(Label, { size: "small", variant: "danger", children: [row.reason, " \u00B7 ", row.count] }, row.reason))) })] })), _jsxs(Box, { sx: { display: 'grid', gap: 2 }, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1 }, children: "Compliance" }), (overview.data?.compliance ?? []).length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Nothing to check yet: the strip fills as the organization's sign-in, admitted clients and audit export are configured." })) : (_jsx(Box, { sx: { display: 'grid', gap: 1 }, children: (overview.data?.compliance ?? []).map(check => (_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { sx: {
-                                                    color: check.ok ? 'success.fg' : 'attention.fg',
-                                                    display: 'flex',
-                                                }, children: check.ok ? (_jsx(CheckCircleIcon, { size: 14 })) : (_jsx(AlertIcon, { size: 14 })) }), _jsx(Text, { sx: { fontSize: 1 }, children: check.name }), !check.ok && check.detail && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: check.detail }))] }, check.name))) }))] }), _jsxs(Box, { sx: { display: 'flex', gap: 3, flexWrap: 'wrap' }, children: [_jsx(Metric, { label: "Approvals waiting", value: overview.data?.approvalsWaiting ?? '—', note: "The queue arrives with durable execution" }), _jsx(Metric, { label: "Alerts firing", value: overview.data?.alertsFiring ?? '—', note: "Alert rules arrive with quotas" })] })] }))), current === 'usage' && (_jsx(OrganizationUsage, { errorState: errorState, orgUid: organization.uid, showTitle: false })), current === 'teams' && (_jsx(TeamPolicies, { errorState: errorState, orgUid: organization.uid, readOnly: !roles.includes('organization_owner') })), current === 'identity-providers' && (_jsxs(Box, { sx: { display: 'grid', gap: 5, minWidth: 0 }, children: [_jsx(IdentityProviders, { errorState: errorState, orgUid: organization.uid, readOnly: !roles.includes('organization_owner') }), _jsx(ScimProvisioning, { errorState: errorState, orgUid: organization.uid, readOnly: !roles.includes('organization_owner') })] })), current === 'alerts' && (_jsx(AlertRules, { errorState: errorState, orgUid: organization.uid, readOnly: !roles.includes('organization_owner') })), current === 'approvals' && _jsx(ApprovalQueue, { errorState: errorState }), current === 'policy' && (_jsx(OrganizationPolicy, { errorState: errorState, orgUid: organization.uid, readOnly: !roles.includes('organization_owner') })), current === 'service-agents' && (_jsx(ServiceAgents, { errorState: errorState, orgUid: organization.uid, readOnly: !roles.includes('organization_owner') })), current === 'agents' &&
-                (activity.isError ? (_jsx(McpErrorBlankslate, { state: errorState(activity.error, "The organization's agents"), onRetry: () => activity.refetch() })) : activity.isPending && !activity.data ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 6 }, children: _jsx(Spinner, {}) })) : agentRows.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(PlugIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "No agent acts for this organization" }), _jsx(Blankslate.Description, { children: _jsxs(Text, { sx: { textAlign: 'center' }, children: ["A member who authorizes a client while acting for", ' ', organization.name || organization.handle, " appears here with the scopes the grant carries and what it last did."] }) })] })) : (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h4", id: "org-agents", children: "Agents" }), _jsxs(Table.Subtitle, { as: "p", id: "org-agents-subtitle", children: [plural(agentRows.length, 'principal'), " acting through MCP for this organization. A member's own grant is revoked by that member; revoking on their behalf arrives with the organization's agent directory."] }), _jsx(DataTable, { "aria-labelledby": "org-agents", "aria-describedby": "org-agents-subtitle", data: agentRows, columns: agentColumns })] }))), current === 'audit' && (_jsx(AuditLog, { errorState: errorState, routes: routes, showTitle: false, subject: organization.name || organization.handle, filters: { ...auditFilters, org: organization.uid }, onFiltersChange: filters => onAuditFiltersChange({ ...filters, org: undefined }) })), current === 'observability' && (_jsx(McpObservability, { errorState: errorState, routes: routes, showTitle: false, org: organization.uid, pane: observabilityPane, onPaneChange: onObservabilityPaneChange, taskUid: observabilityTask, traceId: observabilityTrace, onSelect: onObservabilitySelect })), _jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "Teams, Policies, Quotas, Alerts, Approvals and Runs join this console as the layers behind them ship. Identity \u2014 providers, group mapping, SCIM and session controls \u2014 comes last, with enterprise sign-in." })] }));
+                                        : 'neutral' })] }), (overview.data?.refusals ?? []).length > 0 && (_jsxs(Box, { display: "grid", gap: 2, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1 }, children: "Why calls were refused" }), _jsx(Box, { display: "flex", gap: 2, flexWrap: "wrap", children: (overview.data?.refusals ?? []).map(row => (_jsxs(Label, { size: "small", variant: "danger", children: [row.reason, " \u00B7 ", row.count] }, row.reason))) })] })), _jsxs(Box, { display: "grid", gap: 2, children: [_jsx(Heading, { as: "h4", sx: { fontSize: 1 }, children: "Compliance" }), (overview.data?.compliance ?? []).length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Nothing to check yet: the strip fills as the organization's sign-in, admitted clients and audit export are configured." })) : (_jsx(Box, { display: "grid", gap: 1, children: (overview.data?.compliance ?? []).map(check => (_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Box, { color: check.ok ? 'success.fg' : 'attention.fg', display: "flex", children: check.ok ? (_jsx(CheckCircleIcon, { size: 14 })) : (_jsx(AlertIcon, { size: 14 })) }), _jsx(Text, { sx: { fontSize: 1 }, children: check.name }), !check.ok && check.detail && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: check.detail }))] }, check.name))) }))] }), _jsxs(Box, { display: "flex", gap: 3, flexWrap: "wrap", children: [_jsx(Metric, { label: "Approvals waiting", value: overview.data?.approvalsWaiting ?? '—', note: "The queue arrives with durable execution" }), _jsx(Metric, { label: "Alerts firing", value: overview.data?.alertsFiring ?? '—', note: "Alert rules arrive with quotas" })] })] }))), current === 'usage' && (_jsx(OrganizationUsage, { errorState: errorState, orgUid: organization.uid, showTitle: false })), current === 'teams' && (_jsx(TeamPolicies, { errorState: errorState, orgUid: organization.uid, readOnly: !roles.includes('organization_owner') })), current === 'identity-providers' && (_jsxs(Box, { display: "grid", gap: 5, minWidth: 0, children: [_jsx(IdentityProviders, { errorState: errorState, orgUid: organization.uid, readOnly: !roles.includes('organization_owner') }), _jsx(ScimProvisioning, { errorState: errorState, orgUid: organization.uid, readOnly: !roles.includes('organization_owner') })] })), current === 'alerts' && (_jsx(AlertRules, { errorState: errorState, orgUid: organization.uid, readOnly: !roles.includes('organization_owner') })), current === 'approvals' && _jsx(ApprovalQueue, { errorState: errorState }), current === 'policy' && (_jsx(OrganizationPolicy, { errorState: errorState, orgUid: organization.uid, readOnly: !roles.includes('organization_owner') })), current === 'service-agents' && (_jsx(ServiceAgents, { errorState: errorState, orgUid: organization.uid, readOnly: !roles.includes('organization_owner') })), current === 'agents' &&
+                (activity.isError ? (_jsx(McpErrorBlankslate, { state: errorState(activity.error, "The organization's agents"), onRetry: () => activity.refetch() })) : activity.isPending && !activity.data ? (_jsx(Box, { display: "flex", justifyContent: "center", py: 6, children: _jsx(Spinner, {}) })) : agentRows.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(PlugIcon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: "No agent acts for this organization" }), _jsx(Blankslate.Description, { children: _jsxs(Text, { sx: { textAlign: 'center' }, children: ["A member who authorizes a client while acting for", ' ', organization.name || organization.handle, " appears here with the scopes the grant carries and what it last did."] }) })] })) : (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h4", id: "org-agents", children: "Agents" }), _jsxs(Table.Subtitle, { as: "p", id: "org-agents-subtitle", children: [plural(agentRows.length, 'principal'), " acting through MCP for this organization. A member's own grant is revoked by that member; revoking on their behalf arrives with the organization's agent directory."] }), _jsx(DataTable, { "aria-labelledby": "org-agents", "aria-describedby": "org-agents-subtitle", data: agentRows, columns: agentColumns })] }))), current === 'audit' && (_jsx(AuditLog, { errorState: errorState, routes: routes, showTitle: false, subject: organization.name || organization.handle, filters: { ...auditFilters, org: organization.uid }, onFiltersChange: filters => onAuditFiltersChange({ ...filters, org: undefined }) })), current === 'observability' && (_jsx(McpObservability, { errorState: errorState, routes: routes, showTitle: false, org: organization.uid, pane: observabilityPane, onPaneChange: onObservabilityPaneChange, taskUid: observabilityTask, traceId: observabilityTrace, onSelect: onObservabilitySelect })), _jsx(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: "Teams, Policies, Quotas, Alerts, Approvals and Runs join this console as the layers behind them ship. Identity \u2014 providers, group mapping, SCIM and session controls \u2014 comes last, with enterprise sign-in." })] }));
 };
 export default EnterpriseConsole;