@datalayer/core 1.2.19 → 1.2.21

package/lib/models/IAMProviderLinked.js

@@ -2,12 +2,41 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
+/**
+ * The account a provider returned, as IAM keeps it in `linked_account_s`.
+ * GitHub, Google and LinkedIn keep a JSON object; Bluesky and X keep a plain
+ * handle, which is no object to read, so it reads as `{}`.
+ */
+function linkedAccountOf(raw) {
+    if (typeof raw !== 'string' || raw.trim() === '') {
+        return {};
+    }
+    try {
+        const parsed = JSON.parse(raw);
+        return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
+            ? parsed
+            : {};
+    }
+    catch {
+        return {};
+    }
+}
+/**
+ * One `iam_providers` child of the user IAM returns (whoami, login): its
+ * Solr fields `iam_provider_name_s`, `linked_account_s`,
+ * `linked_account_url_s`, `linked_account_id_s`.
+ */
 export function asIAMProviderLinked(iamProvider) {
-    const info = iamProvider.linkedAccount.replaceAll("'", '"');
     return {
-        iamProviderName: iamProvider.iam_ProviderName,
-        linkedAccount: JSON.parse(info === '' ? '{}' : info),
-        linkedAccountUrl: iamProvider.linkedAccountUrl,
-        linkedAccountId: iamProvider.linkedAccountId,
+        iamProviderName: String(iamProvider.iam_provider_name_s ?? '')
+            .trim()
+            .toLowerCase(),
+        linkedAccount: linkedAccountOf(iamProvider.linked_account_s),
+        linkedAccountUrl: iamProvider.linked_account_url_s ?? '',
+        linkedAccountId: iamProvider.linked_account_id_s ?? '',
     };
 }
+/** Whether the user has linked this provider in IAM. */
+export function hasLinkedIAMProvider(user, name) {
+    return (user?.iamProviders ?? []).some(p => p.iamProviderName === name);
+}

package/lib/models/McpTask.d.ts

@@ -58,7 +58,12 @@ export interface McpTask {
     pollIntervalMs?: number | null;
     /** The `CallToolResult` for small results; a resource URI otherwise. */
     result?: McpCallToolResult | string | null;
-    error?: string | null;
+    /**
+     * Why it failed, as the server keeps it: an object — empty while nothing
+     * failed, else its `reason`, and where one applies the `code`, the `step`
+     * and what the resource was doing.
+     */
+    error?: McpTaskError | null;
     traceId?: string | null;
     workflowEngine?: McpWorkflowEngine | null;
     /** Always the task uid, so a retried start cannot create a second execution. */
@@ -92,3 +97,15 @@ export interface McpTaskEvent {
 /** The statuses from which nothing more happens. */
 export declare const MCP_TERMINAL_TASK_STATUSES: ReadonlySet<McpTaskStatus>;
 export declare const isMcpTaskTerminal: (status: McpTaskStatus) => boolean;
+/** A task's failure, as the server keeps it (camel-cased like the rest). */
+export type McpTaskError = {
+    reason?: string;
+    code?: string;
+    step?: string;
+    [key: string]: unknown;
+};
+/**
+ * Why a task failed, in a line: its reason, after its code where it has one;
+ * `null` when the server's object says nothing — an empty one is no failure.
+ */
+export declare const taskFailureOf: (error: McpTaskError | null | undefined) => string | null;

package/lib/models/McpTask.js

@@ -5,3 +5,18 @@
 /** The statuses from which nothing more happens. */
 export const MCP_TERMINAL_TASK_STATUSES = new Set(['completed', 'failed', 'cancelled']);
 export const isMcpTaskTerminal = (status) => MCP_TERMINAL_TASK_STATUSES.has(status);
+/**
+ * Why a task failed, in a line: its reason, after its code where it has one;
+ * `null` when the server's object says nothing — an empty one is no failure.
+ */
+export const taskFailureOf = (error) => {
+    if (!error || Object.keys(error).length === 0) {
+        return null;
+    }
+    const reason = typeof error.reason === 'string' ? error.reason : null;
+    const code = typeof error.code === 'string' ? error.code : null;
+    if (reason) {
+        return code ? `${code}: ${reason}` : reason;
+    }
+    return code ?? JSON.stringify(error);
+};

package/lib/models/Profile.d.ts

@@ -34,8 +34,8 @@ export interface Profile {
     avatar_url_s?: string;
     avatar_icon_s?: string;
     banner_s?: string;
-    /** Onboarding state as JSON string */
-    onboarding_s?: string;
+    /** Onboarding state: the child IAM keeps on the user (read by `userOnboardingOf`). */
+    onboarding?: Record<string, unknown>;
     /** New password request timestamp */
     new_password_request_ts_dt?: string | null;
     /** New password confirmation timestamp */

package/lib/models/Secret.d.ts

@@ -144,7 +144,7 @@ export declare class SecretDTO {
     get variant(): ISecretVariant;
     get name(): string;
     get description(): string;
-    /** The value as its owner wrote it (PLAN_ENVS.md E3-05). */
+    /** The value as its owner wrote it (E3-05). */
     get value(): string;
     /**
      * Update this secret.

package/lib/models/Secret.js

@@ -74,7 +74,7 @@ export class SecretDTO {
         this._checkDeleted();
         return this._data.description_t;
     }
-    /** The value as its owner wrote it (PLAN_ENVS.md E3-05). */
+    /** The value as its owner wrote it (E3-05). */
     get value() {
         this._checkDeleted();
         return this._data.value_s;

package/lib/models/StartedBy.d.ts

@@ -50,7 +50,7 @@ export declare const startedBy: (metadata: UsageMetadata) => StartedBy;
  * The words a search box matches on for this row.
  *
  * "agent" matches every agent-started runtime, the client id matches one
- * client, and "you" matches your own — so the filter the plan asks for is the
+ * client, and "you" matches your own — so the filter asked for is the
  * search box that is already there rather than a second control beside it.
  */
 export declare const startedBySearchTerms: (metadata: UsageMetadata) => string;

package/lib/models/StartedBy.js

@@ -65,7 +65,7 @@ export const startedBy = (metadata) => {
  * The words a search box matches on for this row.
  *
  * "agent" matches every agent-started runtime, the client id matches one
- * client, and "you" matches your own — so the filter the plan asks for is the
+ * client, and "you" matches your own — so the filter asked for is the
  * search box that is already there rather than a second control beside it.
  */
 export const startedBySearchTerms = (metadata) => {

package/lib/models/User.js

@@ -4,7 +4,7 @@
  */
 import { asDisplayName, namesAsInitials, toFriendlyName } from '../utils/index.js';
 import { asIAMProviderLinked } from './IAMProviderLinked.js';
-import { BOOTSTRAP_USER_ONBOARDING } from './UserOnboarding.js';
+import { userOnboardingOf } from './UserOnboarding.js';
 import { UserSettings } from './UserSettings.js';
 import { asUserEvent } from './UserEvent.js';
 export const ANONYMOUS_USER = undefined;
@@ -76,20 +76,13 @@ export class User {
         this.credits = u.credits_i ? Number(u.credits_i) : 0;
         this.creditsCustomerId = u.stripe_customer_id_s;
         this.roles = u.roles_ss ?? [];
-        let iamProviders = [];
-        try {
-            iamProviders = (u.iam_providers ?? []).map(iamProvider => asIAMProviderLinked(iamProvider));
-        }
-        catch (e) {
-            // no-op for backwards compatibility.
-        }
-        this.iamProviders = iamProviders;
+        // IAM sends one linked provider as an object, several as a list.
+        const rawIAMProviders = u.iam_providers ?? [];
+        this.iamProviders = (Array.isArray(rawIAMProviders) ? rawIAMProviders : [rawIAMProviders]).map(asIAMProviderLinked);
         this.settings = new UserSettings(u.settings ?? {});
         this.unsubscribedFromOutbounds = u.unsubscribed_from_outbounds_b ?? false;
         this.mfaUrl = u.mfa_url_s;
-        this.onboarding = u.onboarding_s
-            ? JSON.parse(u.onboarding_s)
-            : BOOTSTRAP_USER_ONBOARDING;
+        this.onboarding = userOnboardingOf(u.onboarding);
         this.linkedContactId = u.linked_contact_uid;
         this.subscription = u.subscription;
         let events = u.events ?? [];

package/lib/models/UserOnboarding.d.ts

@@ -12,3 +12,12 @@ export type IUserOnboarding = {
     position: IOnboardingPosition;
     tours: IOnboardingTours;
 };
+/**
+ * The user's onboarding, as IAM keeps it: a child of the user whose fields
+ * say the guide's position (`position_s`), each client's progress
+ * (`client_<client>_i`) and each tour's status (`tour_<tour>_status_s`), over
+ * what nothing has said yet. Read from the old `onboarding_s` string, a
+ * status saved since was never seen: the welcome tour started again on every
+ * load and was saved again (13 October 2026).
+ */
+export declare const userOnboardingOf: (child: unknown) => IUserOnboarding;

package/lib/models/UserOnboarding.js

@@ -17,3 +17,36 @@ export const BOOTSTRAP_USER_ONBOARDING = {
         },
     },
 };
+/**
+ * The user's onboarding, as IAM keeps it: a child of the user whose fields
+ * say the guide's position (`position_s`), each client's progress
+ * (`client_<client>_i`) and each tour's status (`tour_<tour>_status_s`), over
+ * what nothing has said yet. Read from the old `onboarding_s` string, a
+ * status saved since was never seen: the welcome tour started again on every
+ * load and was saved again (13 October 2026).
+ */
+export const userOnboardingOf = (child) => {
+    const stored = (Array.isArray(child) ? child[0] : child);
+    const onboarding = {
+        clients: { ...BOOTSTRAP_USER_ONBOARDING.clients },
+        position: BOOTSTRAP_USER_ONBOARDING.position,
+        tours: { ...BOOTSTRAP_USER_ONBOARDING.tours },
+    };
+    if (!stored || typeof stored !== 'object') {
+        return onboarding;
+    }
+    if (typeof stored.position_s === 'string') {
+        onboarding.position = stored.position_s;
+    }
+    for (const [key, value] of Object.entries(stored)) {
+        const client = /^client_(.+)_i$/.exec(key)?.[1];
+        if (client && typeof value === 'number') {
+            onboarding.clients[client] = value;
+        }
+        const tour = /^tour_(.+)_status_s$/.exec(key)?.[1];
+        if (tour && typeof value === 'string') {
+            onboarding.tours[tour] = { status: value };
+        }
+    }
+    return onboarding;
+};

package/lib/portable/index.d.ts

@@ -1,8 +1,9 @@
 /**
  * What any JavaScript runtime can import from Core: no React, DOM, Jupyter or
- * Node built-in. Re-exports only; the mobile app reaches Core through this
- * entry alone.
+ * Node built-in. The mobile app reaches Core through this entry alone, and
+ * its modules import nothing but each other and Core's pure models.
  *
  * @module portable
  */
 export { personOf, type Person } from '../models/Person';
+export { detailOf, isProblem, kindOfStatus, Problem, PROBLEM_WORDS, problemOf, retries, STATE_WORDS, type ProblemKind, } from './states';

package/lib/portable/index.js

@@ -4,9 +4,11 @@
  */
 /**
  * What any JavaScript runtime can import from Core: no React, DOM, Jupyter or
- * Node built-in. Re-exports only; the mobile app reaches Core through this
- * entry alone.
+ * Node built-in. The mobile app reaches Core through this entry alone, and
+ * its modules import nothing but each other and Core's pure models.
  *
  * @module portable
  */
 export { personOf } from '../models/Person.js';
+// Loading, empty and problem states, in a person's words (MOBILE M-013b).
+export { detailOf, isProblem, kindOfStatus, Problem, PROBLEM_WORDS, problemOf, retries, STATE_WORDS, } from './states.js';

package/lib/portable/states.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Loading, empty and problem states as a person is told them (MOBILE M-013b):
+ * what went wrong in their words, the diagnostic detail kept behind
+ * *Details* (never a token, a prompt or tool arguments, never a query value),
+ * whether trying again can help, and the words around them. A renderer on
+ * any platform draws these; it does not word them itself.
+ *
+ * @module portable/states
+ */
+/** What went wrong, as a person is told it. */
+export type ProblemKind = 'unauthenticated' | 'forbidden' | 'not-found' | 'conflict' | 'rate-limited' | 'unavailable' | 'timeout' | 'offline' | 'unexpected';
+export declare const PROBLEM_WORDS: Record<ProblemKind, string>;
+/** The words around a state: loading, nothing yet, trying again, the detail. */
+export declare const STATE_WORDS: {
+    readonly loading: "Loading";
+    readonly empty: "Nothing yet.";
+    readonly retry: "Try again";
+    readonly details: "Details";
+    readonly hideDetails: "Hide details";
+    readonly showDetailsLabel: "Show diagnostic details";
+    readonly hideDetailsLabel: "Hide diagnostic details";
+};
+/** A failed request: the person's words, and the detail behind *Details*. */
+export declare class Problem extends Error {
+    readonly kind: ProblemKind;
+    readonly status?: number;
+    /** For *Details* only; never a token, a prompt or tool arguments. */
+    readonly detail: string;
+    constructor(kind: ProblemKind, detail: string, status?: number);
+}
+export declare const isProblem: (error: unknown) => error is Problem;
+/** A thrown value as a Problem: anything unknown is *unexpected*. */
+export declare const problemOf: (error: unknown) => Problem;
+/** The kind of an HTTP status that failed. */
+export declare function kindOfStatus(status: number): ProblemKind;
+/** Whether trying again can help: not for what is gone or not theirs. */
+export declare const retries: (problem: Problem) => boolean;
+/** The detail a server gave, without query values that could carry a token. */
+export declare function detailOf(method: string, url: string, status: number, body: unknown): string;

package/lib/portable/states.js

@@ -0,0 +1,71 @@
+/*
+ * Copyright (c) 2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export const PROBLEM_WORDS = {
+    unauthenticated: 'Your session has ended. Sign in again.',
+    forbidden: 'You do not have access to this.',
+    'not-found': 'This item is no longer available.',
+    conflict: 'This changed somewhere else. It has been refreshed.',
+    'rate-limited': 'Too many requests. Try again in a moment.',
+    unavailable: 'Datalayer is not answering right now. Try again.',
+    timeout: 'This is taking too long. Try again.',
+    offline: 'You are offline. Connect to continue.',
+    unexpected: 'Something went wrong.',
+};
+/** The words around a state: loading, nothing yet, trying again, the detail. */
+export const STATE_WORDS = {
+    loading: 'Loading',
+    empty: 'Nothing yet.',
+    retry: 'Try again',
+    details: 'Details',
+    hideDetails: 'Hide details',
+    showDetailsLabel: 'Show diagnostic details',
+    hideDetailsLabel: 'Hide diagnostic details',
+};
+/** A failed request: the person's words, and the detail behind *Details*. */
+export class Problem extends Error {
+    kind;
+    status;
+    /** For *Details* only; never a token, a prompt or tool arguments. */
+    detail;
+    constructor(kind, detail, status) {
+        super(PROBLEM_WORDS[kind]);
+        this.name = 'Problem';
+        this.kind = kind;
+        this.detail = detail;
+        this.status = status;
+    }
+}
+export const isProblem = (error) => error instanceof Problem;
+/** A thrown value as a Problem: anything unknown is *unexpected*. */
+export const problemOf = (error) => isProblem(error)
+    ? error
+    : new Problem('unexpected', error instanceof Error ? error.message : String(error));
+/** The kind of an HTTP status that failed. */
+export function kindOfStatus(status) {
+    if (status === 401)
+        return 'unauthenticated';
+    if (status === 403)
+        return 'forbidden';
+    if (status === 404)
+        return 'not-found';
+    if (status === 409)
+        return 'conflict';
+    if (status === 429)
+        return 'rate-limited';
+    if (status === 502 || status === 503 || status === 504)
+        return 'unavailable';
+    return 'unexpected';
+}
+/** Whether trying again can help: not for what is gone or not theirs. */
+export const retries = (problem) => problem.kind !== 'not-found' && problem.kind !== 'forbidden';
+/** The detail a server gave, without query values that could carry a token. */
+export function detailOf(method, url, status, body) {
+    const path = url.split('?')[0];
+    const said = body && typeof body === 'object'
+        ? (body.detail ??
+            body.message)
+        : undefined;
+    return `${method} ${path} → ${status}${typeof said === 'string' ? `: ${said}` : ''}`;
+}

package/lib/state/substates/NavigationState.d.ts

@@ -1,6 +1,5 @@
-/** The signed-in shell: the platform, the business cases, or the admin. */
 /**
- * The five shells of the signed-in application.
+ * The six shells of the signed-in application.
  *
  * `studio` is where an agentic UI application is composed, validated and
  * shipped — the default for somebody who has not chosen, and what the root
@@ -12,8 +11,11 @@
  * a sidebar of their own, every address under `/apps`, and the workspace at
  * `/apps` itself. It was `loop`, at `/loop`: a cookie still saying `loop`
  * names no shell and is ignored, the reader opening on the Studio.
+ * `research` is the research areas, each one a space of the
+ * `datalayer-research` organization, at `/research` (the public papers, read
+ * signed in, at `/research/papers/…` beside them).
  */
-export type NavigationView = 'studio' | 'home' | 'agentify' | 'admin' | 'apps';
+export type NavigationView = 'studio' | 'home' | 'agentify' | 'research' | 'admin' | 'apps';
 /** The shells, and where each one opens when it has not been visited. */
 export declare const NAVIGATION_VIEW_HOMES: Record<NavigationView, string>;
 /** Well-known view identifiers for {@link NavigationState.tabsByView}. */

package/lib/state/substates/NavigationState.js

@@ -34,10 +34,13 @@ import { registerSessionState } from '../sessionEnd.js';
 /** The shells, and where each one opens when it has not been visited. */
 export const NAVIGATION_VIEW_HOMES = {
     studio: '/studio',
-    // Not `/`: the root is the Studio's, so the Power shell has an address of
-    // its own to be sent to.
-    home: '/power',
+    // Not `/`: the root is the Studio's, so the Platform shell has an address
+    // of its own to be sent to. It was `/power` until 2026-10-09, when the
+    // shell took the name it is called by everywhere else.
+    home: '/platform',
     agentify: '/agentify',
+    // The research areas and their spaces.
+    research: '/research',
     admin: '/admin',
     // The applications: what a builder opens the Apps shell for.
     apps: '/apps/apps',
@@ -58,6 +61,7 @@ const COOKIE_MAX_AGE_DAYS = 365;
 const isView = (value) => value === 'studio' ||
     value === 'home' ||
     value === 'agentify' ||
+    value === 'research' ||
     value === 'admin' ||
     value === 'apps';
 function readCookie(name) {
@@ -244,6 +248,11 @@ export function viewForRoute(route, current) {
     if (path === '/agentify' || path.startsWith('/agentify/')) {
         return 'agentify';
     }
+    // The research areas — and the papers, read signed in under
+    // `/research/papers/…`, with the areas' sidebar beside them.
+    if (path === '/research' || path.startsWith('/research/')) {
+        return 'research';
+    }
     if (path === '/admin' || path.startsWith('/admin/')) {
         return 'admin';
     }

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';
@@ -62,6 +62,6 @@ export const AlertDestinations = ({ errorState, orgUid, readOnly = false, }) =>
     if (settings.isPending && settings.data === undefined) {
         return (_jsx(Box, { display: "flex", justifyContent: "center", py: 4, children: _jsx(Spinner, {}) }));
     }
-    return (_jsxs(Box, { 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, { 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/ApprovalQueue.js

@@ -1,7 +1,7 @@
 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';
 /** How each state of an approval is drawn. */
@@ -59,7 +59,7 @@ export const ApprovalQueue = ({ errorState, sourceUid, }) => {
                     : `No ${APPROVAL_LOOK[status].label.toLowerCase()} approvals.` })) : (items.map(approval => {
                 const look = approvalLook(approval);
                 const decidable = isDecidable(approval);
-                return (_jsxs(Box, { border: "1px solid", borderColor: decidable ? 'attention.emphasis' : 'border.default', borderRadius: 2, 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 => ({
+                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, { display: "flex", gap: 2, children: [_jsx(Button, { variant: "primary", disabled: decide.isPending, onClick: () => decide.mutate({

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,7 +90,7 @@ export const pagesForRoles = (roles) => {
     }
     return [];
 };
-const Metric = ({ label, value, note, tone = 'neutral', }) => (_jsxs(Box, { 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',

package/lib/views/mcp/McpDashboard.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useRef, useState } from 'react';
 import { ActionList, ActionMenu, Button, Heading, Label, Link, RelativeTime, Select, Spinner, Text, } from '@primer/react';
 import { Blankslate, DataTable, Dialog, Table, } from '@primer/react/experimental';
-import { Box } from '@datalayer/primer-addons';
+import { Box, Card } from '@datalayer/primer-addons';
 import { ChecklistIcon, KebabHorizontalIcon, PlayIcon, PlugIcon, StackIcon, } from '@primer/octicons-react';
 import { ShareAccessDialog, sandboxSharingUrl } from '../../components/sharing/index.js';
 import { ClientBadge, McpErrorBlankslate } from '../../components/mcp/index.js';
@@ -54,7 +54,7 @@ const boundTo = (client) => {
     return '';
 };
 const countLook = (tone) => tone === 'danger' ? 'danger.fg' : 'fg.default';
-const Count = ({ label, value, tone = 'neutral', note, to, onOpen, }) => (_jsxs(Box, { p: 3, border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.default", minWidth: 0, children: [_jsx(Text, { sx: {
+const Count = ({ label, value, tone = 'neutral', note, to, onOpen, }) => (_jsxs(Card, { border: true, shadow: "none", display: "block", p: 3, minWidth: 0, children: [_jsx(Text, { sx: {
                 display: 'block',
                 fontSize: 4,
                 fontWeight: 'bold',

package/lib/views/mcp/McpHome.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useState } from 'react';
 import { AiAgentIcon } from '@datalayer/icons-react';
 import { Button, Heading, IconButton, Link, Text } from '@primer/react';
-import { Box } from '@datalayer/primer-addons';
+import { Box, Card } from '@datalayer/primer-addons';
 import { CheckIcon, CopyIcon, KeyIcon, PulseIcon, RssIcon, ShieldCheckIcon, TelescopeIcon, ToolsIcon, } from '@primer/octicons-react';
 import { useConnectedAgents, useMcpActivity, useMcpMetrics, useTasks, } from '../../hooks/useMcp.js';
 import { useNavigate } from '../../hooks/index.js';
@@ -56,7 +56,7 @@ export const Copyable = ({ text }) => {
                 } })] }));
 };
 /** One of the five summaries: a heading, what it holds, and the way in. */
-const Summary = ({ icon: Icon, title, children, action, to, onOpen, }) => (_jsxs(Box, { p: 3, border: "1px solid", borderColor: "border.default", borderRadius: 2, display: "grid", gap: 2, alignContent: "start", minWidth: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Icon, { size: 16 }), to ? (_jsx(Link, { href: to, onClick: event => {
+const Summary = ({ icon: Icon, title, children, action, to, onOpen, }) => (_jsxs(Card, { border: true, shadow: "none", p: 3, display: "grid", gap: 2, alignContent: "start", minWidth: 0, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(Icon, { size: 16 }), to ? (_jsx(Link, { href: to, onClick: event => {
                         // A modified click asks for a new tab; `href` is real, so let it.
                         if (event.metaKey || event.ctrlKey || event.shiftKey) {
                             return;
@@ -77,11 +77,11 @@ export const McpHome = ({ routes, clientDocsBase = '/docs/mcp-clients', showTitl
     const connected = agents.data ?? [];
     const runs = tasks.data?.items ?? [];
     const live = activity.data?.clients.length ?? 0;
-    return (_jsxs(Box, { display: "grid", gap: 4, minWidth: 0, children: [showTitle && (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "MCP" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "Connect your agents to your notebooks, data and sandboxes through the Model Context Protocol." })] })), showSetup && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 3, flexWrap: "wrap", p: 3, borderRadius: 2, bg: "canvas.subtle", border: "1px solid", borderColor: "border.default", children: [_jsx(Text, { sx: { fontSize: 1 }, children: live > 0
+    return (_jsxs(Box, { display: "grid", gap: 4, minWidth: 0, children: [showTitle && (_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "MCP" }), _jsx(Text, { as: "p", sx: { color: 'fg.muted', fontSize: 1, m: 0 }, children: "Connect your agents to your notebooks, data and sandboxes through the Model Context Protocol." })] })), showSetup && (_jsxs(_Fragment, { children: [_jsxs(Card, { border: true, shadow: "none", variant: "subtle", flexDirection: "row", display: "flex", alignItems: "center", gap: 3, flexWrap: "wrap", p: 3, children: [_jsx(Text, { sx: { fontSize: 1 }, children: live > 0
                                     ? `${plural(live, 'client')} connected right now.`
                                     : 'No client is connected right now.' }), _jsx(Button, { size: "small", leadingVisual: PulseIcon, onClick: () => navigate(routes.dashboard), children: "What is going on" })] }), _jsxs(Box, { display: "grid", gap: 2, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "The endpoint" }), _jsx(Copyable, { text: endpoint || 'https://mcp.datalayer.run/mcp' }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, children: [_jsx(KeyIcon, { size: 14 }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: signedIn
                                             ? 'You are signed in, so a client you set up from here authorizes through OAuth without a shared token.'
-                                            : 'Sign in to authorize a client through OAuth; without it a client can only use a personal access token.' })] })] }), _jsxs(Box, { display: "grid", gap: 2, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Set up a client" }), _jsx(Box, { display: "grid", gap: 3, gridTemplateColumns: ['1fr', 'repeat(2, 1fr)', 'repeat(3, 1fr)'], children: MCP_CLIENTS.map(client => (_jsxs(Box, { p: 3, border: "1px solid", borderColor: "border.default", borderRadius: 2, display: "grid", gap: 2, minWidth: 0, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: client.name }), _jsx(Copyable, { text: mcpSetupCommand(client.setup) }), _jsx(Link, { href: `${clientDocsBase}/${client.setup}`, sx: { fontSize: 0, cursor: 'pointer', textAlign: 'left' }, onClick: event => {
+                                            : 'Sign in to authorize a client through OAuth; without it a client can only use a personal access token.' })] })] }), _jsxs(Box, { display: "grid", gap: 2, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 2 }, children: "Set up a client" }), _jsx(Box, { display: "grid", gap: 3, gridTemplateColumns: ['1fr', 'repeat(2, 1fr)', 'repeat(3, 1fr)'], children: MCP_CLIENTS.map(client => (_jsxs(Card, { border: true, shadow: "none", p: 3, display: "grid", gap: 2, minWidth: 0, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: client.name }), _jsx(Copyable, { text: mcpSetupCommand(client.setup) }), _jsx(Link, { href: `${clientDocsBase}/${client.setup}`, sx: { fontSize: 0, cursor: 'pointer', textAlign: 'left' }, onClick: event => {
                                                 // A modified click is the reader asking for a new tab or
                                                 // window, and `href` is real so it still leads to the
                                                 // full page — for that, for the status bar and for the