@datalayer/core 1.2.27 → 1.2.29

package/lib/api/otel/firewall.d.ts

@@ -0,0 +1,74 @@
+/** One connection the firewall decided. */
+export interface FirewallConnection {
+    /** Unix nanoseconds, which a JavaScript number holds only approximately. */
+    time_unix_nano: number;
+    decision: 'allow' | 'refuse';
+    /** The rule that decided, e.g. `spec:*`, `base:refused`, `spec:*_non-public`. */
+    rule: string;
+    /** `address:port`. */
+    destination: string;
+    /** The host the address was resolved from, when the firewall knows it. */
+    host: string;
+    port: number | null;
+    /** `tcp`, `udp` or `icmp`. */
+    protocol: string;
+    source: string;
+    /** Connections folded into this row, besides itself. */
+    repeated: number;
+}
+/** One apply of the runtime's rule. */
+export interface FirewallApplied {
+    time_unix_nano: number;
+    /** `start`, `configure`, `refresh` or `apply`. */
+    reason: string;
+    revision: string;
+    /** The egress entries applied: hosts, CIDRs, `*` for any public address. */
+    egress: string[];
+    ingress: string[];
+    /** The base layer's allowances, as the firewall wrote them. */
+    base?: unknown;
+    /** How many rules were compiled. */
+    rules: number | null;
+    /** Hosts that resolved to nothing. */
+    unresolved: string[];
+}
+/** A runtime's firewall over a window. */
+export interface RuntimeFirewall {
+    success: boolean;
+    runtime_uid: string;
+    window: {
+        since_unix_nano: number;
+        days: number;
+    };
+    /** Why the firewall did not take the runtime's rule, as its record says; empty when it holds. */
+    refused: string;
+    /** Latest first. None when the runtime has no firewall, or it has not reported yet. */
+    applied: FirewallApplied[];
+    /** The latest connections, latest first. */
+    connections: FirewallConnection[];
+    /** Over the whole window, each row counting itself and the connections folded into it. */
+    counts: {
+        allowed: number;
+        refused: number;
+        rows: number;
+    };
+    /** The window held more connection rows than were counted. */
+    truncated: boolean;
+}
+export interface RuntimeFirewallOptions {
+    /** How many days back, 1 to 30; 7 by default. */
+    days?: number;
+    /** How many connections to return, latest first; 200 by default. */
+    limit?: number;
+}
+/**
+ * A runtime's firewall: the rule applied, its latest connections and their counts.
+ *
+ * Answers 404 when the runtime is not the caller's (or no longer runs).
+ *
+ * @param token - Authentication token.
+ * @param runtimeUid - The runtime's uid.
+ * @param options - The window and how many connections.
+ * @param baseUrl - The OTEL service.
+ */
+export declare const getRuntimeFirewall: (token: string, runtimeUid: string, options?: RuntimeFirewallOptions, baseUrl?: string) => Promise<RuntimeFirewall>;

package/lib/api/otel/firewall.js

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * A runtime's network firewall, read back from Datalayer's observability.
+ *
+ * The runtime pod's `shield-firewall` sidecar (agent-shield's firewall)
+ * exports each rule it applies and each connection it allows or refuses as
+ * a span. The OTEL service reads them for the runtime's owner only: it asks
+ * the runtimes service for the runtime with the caller's own token first.
+ *
+ * @module api/otel/firewall
+ */
+import { requestDatalayerAPI } from '../DatalayerApi.js';
+import { API_BASE_PATHS, DEFAULT_SERVICE_URLS } from '../constants.js';
+import { validateToken } from '../utils/validation.js';
+/**
+ * A runtime's firewall: the rule applied, its latest connections and their counts.
+ *
+ * Answers 404 when the runtime is not the caller's (or no longer runs).
+ *
+ * @param token - Authentication token.
+ * @param runtimeUid - The runtime's uid.
+ * @param options - The window and how many connections.
+ * @param baseUrl - The OTEL service.
+ */
+export const getRuntimeFirewall = async (token, runtimeUid, options = {}, baseUrl = DEFAULT_SERVICE_URLS.OTEL) => {
+    validateToken(token);
+    const params = new URLSearchParams();
+    if (options.days)
+        params.set('days', String(options.days));
+    if (options.limit)
+        params.set('limit', String(options.limit));
+    const queryString = params.toString();
+    const url = `${baseUrl}${API_BASE_PATHS.OTEL}/firewall/runtimes/${encodeURIComponent(runtimeUid)}${queryString ? `?${queryString}` : ''}`;
+    return requestDatalayerAPI({
+        url,
+        method: 'GET',
+        token,
+    });
+};

package/lib/api/otel/index.d.ts

@@ -11,3 +11,4 @@ export * as logs from './logs';
 export * as services from './services';
 export * as query from './query';
 export * as dashboards from './dashboards';
+export * as firewall from './firewall';

package/lib/api/otel/index.js

@@ -15,3 +15,4 @@ export * as logs from './logs.js';
 export * as services from './services.js';
 export * as query from './query.js';
 export * as dashboards from './dashboards.js';
+export * as firewall from './firewall.js';

package/lib/cli-login.js

@@ -9,7 +9,7 @@ import { Button, Spinner, Text } from '@primer/react';
 import { ShieldLockIcon } from '@primer/octicons-react';
 import { Box, DatalayerThemeProvider, themeConfigs, createThemeStore, } from '@datalayer/primer-addons';
 import { SvgLinesLogo, SvgUsecasesHero } from '@datalayer/design';
-import { AppearanceControlsWithStore } from '@datalayer/primer-addons/lib/components/appearance';
+import { AppearanceControls } from '@datalayer/primer-addons/lib/components/appearance';
 import { ConfettiSuccess } from './components/confetti/index.js';
 import { formatFriendlyHandle } from './utils/Handles.js';
 import { SignInSimple } from './views/iam/SignInSimple.js';
@@ -90,7 +90,7 @@ function SignInCLIApp() {
             setState('signin');
         });
     }, [finalizeCliAuthentication]);
-    const renderLayout = (content) => (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: cfg.primerTheme, themeStyles: cfg.themeStyles, children: _jsxs(Box, { minHeight: "100vh", bg: "canvas.default", color: "fg.default", position: "relative", children: [_jsx(Box, { position: "fixed", top: 0, right: 0, zIndex: 20, p: 3, display: "flex", justifyContent: "flex-end", children: _jsx(AppearanceControlsWithStore, { useStore: useCliThemeStore }) }), content] }) }));
+    const renderLayout = (content) => (_jsx(DatalayerThemeProvider, { colorMode: colorMode, theme: cfg.primerTheme, themeStyles: cfg.themeStyles, children: _jsxs(Box, { minHeight: "100vh", bg: "canvas.default", color: "fg.default", position: "relative", children: [_jsx(Box, { position: "fixed", top: 0, right: 0, zIndex: 20, p: 3, display: "flex", justifyContent: "flex-end", children: _jsx(AppearanceControls, { layout: "inline", useStore: useCliThemeStore }) }), content] }) }));
     if (state === 'checking') {
         return renderLayout(_jsx(Box, { display: "flex", alignItems: "center", justifyContent: "center", minHeight: "100vh", children: _jsx(Spinner, {}) }));
     }

package/lib/components/anonymous/AnonymousKeyExpired.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import { Text } from '@primer/react';
+import { Button, Text } from '@primer/react';
 import { Box } from '@datalayer/primer-addons';
-import { KeyIcon } from '@primer/octicons-react';
+import { KeyIcon, SyncIcon } from '@primer/octicons-react';
 import { SignInSimple } from '../../views/iam/SignInSimple.js';
 import { useCoreStore, iamStore } from '../../state/substates/index.js';
 export function AnonymousKeyExpired({ agentName, sandboxStillRuns = false, temporary = true, onSignedIn, onSignUp, }) {
@@ -35,7 +35,19 @@ export function AnonymousKeyExpired({ agentName, sandboxStillRuns = false, tempo
                             ? `${agentName ?? 'The agent'} has used the time this key allows. Sign in to point your own agent at it, use your own data, and drop the time limit.`
                             : `${agentName ?? 'The agent'} stopped because your session ran out.`, sandboxStillRuns
                             ? ' Your notebook is still running in this page.'
-                            : ''] }), _jsx(SignInSimple
+                            : ''] }), temporary && (
+                /*
+                  Or another trial key (the user, 6 November 2026): a new page gets
+                  a new one, so the demo can go on without an account. The button
+                  reloads the browser rather than the chat, since the key is minted
+                  as the page opens; what was said is gone with it, and the line
+                  says so.
+                */
+                _jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "center", gap: 2, mb: 3, "data-anonymous-key-refresh": "", children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted', textAlign: 'center' }, children: "Or keep trying without an account: refreshing the page gives this demo a new key, and starts the conversation over." }), _jsx(Button, { leadingVisual: SyncIcon, onClick: () => {
+                                if (typeof window !== 'undefined') {
+                                    window.location.reload();
+                                }
+                            }, children: "Refresh the page for a new key" })] })), _jsx(SignInSimple
                 // The panel above has already said what happened and why; the form's
                 // own hero would say it a second time, in a bigger font.
                 , { 

package/lib/components/index.d.ts

@@ -8,3 +8,4 @@ export * from './sharing';
 export * from './sparklines';
 export * from './time';
 export * from './timeline';
+export * from './toast';

package/lib/components/index.js

@@ -12,3 +12,4 @@ export * from './sharing/index.js';
 export * from './sparklines/index.js';
 export * from './time/index.js';
 export * from './timeline/index.js';
+export * from './toast/index.js';

package/lib/components/mcp/ScopeList.js

@@ -9,6 +9,15 @@ export const ScopeList = ({ scopes, max = 3 }) => {
     }
     const shown = scopes.slice(0, max);
     const rest = scopes.length - shown.length;
-    return (_jsxs(Box, { display: "flex", gap: 1, flexWrap: "wrap", alignItems: "center", children: [shown.map(scope => (_jsx(Label, { size: "small", variant: "secondary", children: scope }, scope))), rest > 0 && (_jsxs(Text, { as: "span", title: scopes.join('\n'), "aria-label": `and ${rest} more: ${scopes.slice(max).join(', ')}`, sx: { fontSize: 0, color: 'fg.muted' }, children: ["+", rest] }))] }));
+    return (_jsxs(Box, { display: "flex", gap: 1, flexWrap: "wrap", alignItems: "center", minWidth: 0, maxWidth: "100%", children: [shown.map(scope => (
+            // A long scope is cut with an ellipsis and said in full on hover,
+            // never drawn past its cell into the next column.
+            _jsx(Label, { size: "small", variant: "secondary", title: scope, sx: {
+                    maxWidth: '100%',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                    display: 'inline-block',
+                }, children: scope }, scope))), rest > 0 && (_jsxs(Text, { as: "span", title: scopes.join('\n'), "aria-label": `and ${rest} more: ${scopes.slice(max).join(', ')}`, sx: { fontSize: 0, color: 'fg.muted' }, children: ["+", rest] }))] }));
 };
 export default ScopeList;

package/lib/components/principal/PrincipalSwitcherMenu.js

@@ -204,7 +204,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                             outline: '2px solid',
                             outlineColor: 'accent.emphasis',
                             outlineOffset: '2px',
-                        }, children: [_jsx(Box, { display: "inline-flex", alignItems: "center", color: "fg.muted", flexShrink: 0, children: selectedPrincipalKind === 'organization' ? (_jsx(PeopleIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(OrganizationIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { minWidth: 0, flex: 1, children: _jsx(Text, { sx: {
+                        }, children: [_jsx(Box, { display: "inline-flex", alignItems: "center", color: "fg.muted", flexShrink: 0, children: selectedPrincipalKind === 'organization' ? (_jsx(OrganizationIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(PeopleIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { minWidth: 0, flex: 1, children: _jsx(Text, { sx: {
                                         display: 'block',
                                         color: 'accent.fg',
                                         fontWeight: 'semibold',
@@ -216,7 +216,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                     }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(Box, { flexShrink: 0, display: "inline-flex", alignItems: "center", children: _jsx(AdminLabel, {}) })) : null, _jsx(Box, { display: "inline-flex", alignItems: "center", color: "fg.muted", flexShrink: 0, ml: isPlatformAdmin && isCurrentUserPrincipal ? 1 : 0, children: _jsx(TriangleDownIcon, { size: 12 }) })] })) : (_jsx(Button, { variant: "invisible", size: "small", "aria-label": "Switch principal", trailingVisual: TriangleDownIcon, sx: {
                             maxWidth: fullWidth ? '100%' : ['200px', '260px', '360px'],
                             width: fullWidth ? '100%' : 'auto',
-                        }, children: _jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, minWidth: 0, children: [_jsx(Box, { display: "inline-flex", alignItems: "center", color: "fg.muted", flexShrink: 0, children: selectedPrincipalKind === 'organization' ? (_jsx(PeopleIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(OrganizationIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: _jsx(Text, { sx: {
+                        }, children: _jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, minWidth: 0, children: [_jsx(Box, { display: "inline-flex", alignItems: "center", color: "fg.muted", flexShrink: 0, children: selectedPrincipalKind === 'organization' ? (_jsx(OrganizationIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(PeopleIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: _jsx(Text, { sx: {
                                             color: 'accent.fg',
                                             fontWeight: 'semibold',
                                         }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(AdminLabel, {})) : null] }) })) }), _jsx(ActionMenu.Overlay, { width: "large", children: _jsxs(ActionList, { selectionVariant: "single", children: [_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Personal" }), _jsxs(ActionList.Item, { disabled: isCurrentUserPrincipal, selected: isCurrentUserPrincipal, sx: isCurrentUserPrincipal ? selectedItemSx : undefined, onSelect: () => {
@@ -242,7 +242,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                                 if (organizationUid && organization.handle) {
                                                     selectOrganization(organizationUid, organization.handle);
                                                 }
-                                            }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PeopleIcon, {}) }), _jsxs(Box, { as: "span", title: displayHandleText(organization.handle), display: "block", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: [String(organization?.display_name ||
+                                            }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(OrganizationIcon, {}) }), _jsxs(Box, { as: "span", title: displayHandleText(organization.handle), display: "block", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: [String(organization?.display_name ||
                                                             organization?.displayName ||
                                                             organization?.name ||
                                                             organization?.handle ||
@@ -258,7 +258,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                                     return;
                                                 }
                                                 selectTeam(team, orgHandle);
-                                            }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(OrganizationIcon, {}) }), _jsxs(Box, { as: "span", title: `${displayHandleText(orgHandle)}/${displayHandleText(team.handle, { withAt: false })}`, display: "block", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: [String(team.displayName ||
+                                            }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PeopleIcon, {}) }), _jsxs(Box, { as: "span", title: `${displayHandleText(orgHandle)}/${displayHandleText(team.handle, { withAt: false })}`, display: "block", minWidth: 0, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", children: [String(team.displayName ||
                                                             team.name ||
                                                             team.handle ||
                                                             'Team').trim(), _jsxs(Box, { as: "span", color: "fg.muted", children: [' ', "\u00B7 ", _jsx(DisplayHandle, { handle: orgHandle }), "/", _jsx(DisplayHandle, { handle: team.handle, withAt: false })] })] })] }, team.uid));

package/lib/components/sharing/ShareAccessComponent.js

@@ -405,8 +405,18 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
     const [isSearchOverlayOpen, setIsSearchOverlayOpen] = useState(false);
     const [sharingAccessMessage, setSharingAccessMessage] = useState(null);
     const [isSharingAccessConfirmed, setIsSharingAccessConfirmed] = useState(false);
+    // Why the sharing could not be read, said where the sharing would be: a
+    // toast is gone in a few seconds and leaves the form disabled, unexplained.
+    const [sharingLoadError, setSharingLoadError] = useState(null);
     // ----- Refs -----
-    const hasLoadedForOpenRef = useRef(false);
+    // What the sharing was last asked from (the transport, or the URL): a load
+    // is started once per source, and started again when the source changes or
+    // when the load in flight was dropped before it answered.
+    const loadedSourceRef = useRef(null);
+    const levelsRef = useRef(levels);
+    levelsRef.current = levels;
+    const resourceLabelRef = useRef(resourceLabel);
+    resourceLabelRef.current = resourceLabel;
     const hasHydratedSharingRef = useRef(false);
     const lastSavedSharingRef = useRef(null);
     const autoSaveTimerRef = useRef(null);
@@ -471,7 +481,8 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
     }, [isOpen, defaultAccessLevel]);
     useEffect(() => {
         if (!isOpen) {
-            hasLoadedForOpenRef.current = false;
+            loadedSourceRef.current = null;
+            setSharingLoadError(null);
             hasHydratedSharingRef.current = false;
             lastSavedSharingRef.current = null;
             if (autoSaveTimerRef.current) {
@@ -496,15 +507,20 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
             setIsSharingAccessConfirmed(false);
             return;
         }
-        if (hasLoadedForOpenRef.current) {
+        const source = transport ?? requestUrl ?? null;
+        if (loadedSourceRef.current === source) {
             return;
         }
-        hasLoadedForOpenRef.current = true;
+        loadedSourceRef.current = source;
         let cancelled = false;
+        let settled = false;
+        const levels = levelsRef.current;
+        const resourceLabel = resourceLabelRef.current;
         const run = async () => {
             setIsLoading(true);
             setIsSharingAccessConfirmed(false);
             setSharingAccessMessage(null);
+            setSharingLoadError(null);
             try {
                 const response = transport
                     ? null
@@ -572,9 +588,11 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
                 const message = error instanceof Error
                     ? error.message
                     : `Unable to load ${resourceLabel.toLowerCase()} sharing.`;
+                setSharingLoadError(message);
                 enqueueToastRef.current(message, { variant: 'error' });
             }
             finally {
+                settled = true;
                 if (!cancelled) {
                     setIsLoading(false);
                 }
@@ -583,16 +601,23 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
         void run();
         return () => {
             cancelled = true;
+            // A load dropped before it answered never clears "Loading…" by itself
+            // and its answer is thrown away: the next run has to ask again. Before,
+            // the once-per-open guard stayed set, so any re-render that re-ran this
+            // effect mid-flight (the space's name arriving, say) left the form
+            // disabled on "Loading current sharing settings…" for good.
+            if (!settled && loadedSourceRef.current === source) {
+                loadedSourceRef.current = null;
+            }
         };
+        // Only what decides the request: the label and the levels are read
+        // through refs, so a parent's re-render does not drop a load in flight.
     }, [
         isOpen,
         canRequest,
         requestUrl,
         transport,
         token,
-        resourceLabel,
-        resourceName,
-        levels,
         mergePrincipalCacheEntry,
     ]);
     // ----- Fetch shareable principals on open -----
@@ -1215,7 +1240,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, transport, resourceLa
                         letterSpacing: 0.4,
                     }, children: label }), _jsx(Box, { display: "grid", gap: 1, children: items.map(renderShareablePrincipalRow) })] }));
     };
-    const content = (_jsxs(Box, { p: 3, display: "flex", flexDirection: "column", gap: 3, children: [sharingAccessMessage && (_jsxs(Box, { px: 3, py: 3, borderRadius: 2, borderWidth: 1, borderStyle: "solid", borderColor: "attention.muted", bg: "attention.subtle", display: "grid", gap: 1, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "Sharing access is restricted" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: sharingAccessMessage })] })), _jsxs(Box, { opacity: isReadOnly ? 0.6 : 1, pointerEvents: isReadOnly ? 'none' : 'auto', display: "flex", flexDirection: "column", gap: 3, "aria-disabled": isReadOnly, children: [_jsxs(Box, { px: 3, py: 2, borderRadius: 2, borderWidth: 1, borderStyle: "solid", borderColor: "border.default", bg: "canvas.subtle", display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 2, children: [_jsx(Box, { display: "grid", gap: 1, children: _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Share ", resourceName || `this ${resourceLabel.toLowerCase()}`, ". Pick a principal below \u2014 they will be granted the selected access level."] }) }), _jsxs(ActionMenu, { children: [_jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, children: [_jsx(ActionMenu.Anchor, { children: _jsxs(Button, { variant: "default", size: "small", leadingVisual: KeyIcon, disabled: isSaving || isReadOnly, children: ["Access:", ' ', levelLabels[selectedAccessLevel] || selectedAccessLevel] }) }), _jsx(Button, { variant: "invisible", size: "small", leadingVisual: isExpanded ? ChevronUpIcon : ChevronDownIcon, onClick: () => setIsExpanded(previous => !previous), "aria-label": isExpanded
+    const content = (_jsxs(Box, { p: 3, display: "flex", flexDirection: "column", gap: 3, children: [sharingAccessMessage && (_jsxs(Box, { px: 3, py: 3, borderRadius: 2, borderWidth: 1, borderStyle: "solid", borderColor: "attention.muted", bg: "attention.subtle", display: "grid", gap: 1, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "Sharing access is restricted" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: sharingAccessMessage })] })), sharingLoadError && (_jsxs(Box, { role: "alert", px: 3, py: 3, borderRadius: 2, borderWidth: 1, borderStyle: "solid", borderColor: "danger.muted", bg: "danger.subtle", display: "grid", gap: 1, children: [_jsx(Text, { sx: { fontWeight: 600 }, children: "The sharing settings could not be loaded" }), _jsx(Text, { sx: { color: 'fg.muted' }, children: sharingLoadError })] })), _jsxs(Box, { opacity: isReadOnly ? 0.6 : 1, pointerEvents: isReadOnly ? 'none' : 'auto', display: "flex", flexDirection: "column", gap: 3, "aria-disabled": isReadOnly, children: [_jsxs(Box, { px: 3, py: 2, borderRadius: 2, borderWidth: 1, borderStyle: "solid", borderColor: "border.default", bg: "canvas.subtle", display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 2, children: [_jsx(Box, { display: "grid", gap: 1, children: _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Share ", resourceName || `this ${resourceLabel.toLowerCase()}`, ". Pick a principal below \u2014 they will be granted the selected access level."] }) }), _jsxs(ActionMenu, { children: [_jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, children: [_jsx(ActionMenu.Anchor, { children: _jsxs(Button, { variant: "default", size: "small", leadingVisual: KeyIcon, disabled: isSaving || isReadOnly, children: ["Access:", ' ', levelLabels[selectedAccessLevel] || selectedAccessLevel] }) }), _jsx(Button, { variant: "invisible", size: "small", leadingVisual: isExpanded ? ChevronUpIcon : ChevronDownIcon, onClick: () => setIsExpanded(previous => !previous), "aria-label": isExpanded
                                                     ? 'Shrink sharing details'
                                                     : 'Expand sharing details', children: isExpanded ? 'Shrink details' : 'Expand details' })] }), _jsx(ActionMenu.Overlay, { width: "small", children: _jsx(ActionList, { selectionVariant: "single", children: levels.map(({ level, label }) => (_jsx(ActionList.Item, { selected: selectedAccessLevel === level, onSelect: () => setSelectedAccessLevel(level), children: label }, level))) }) })] })] }), !isExpanded && (_jsxs(Box, { px: 3, py: 2, borderRadius: 2, borderWidth: 1, borderStyle: "solid", borderColor: "border.default", bg: "canvas.default", display: "grid", gap: 1, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Sharing details are collapsed." }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [aclEntries.length, " principal", aclEntries.length === 1 ? '' : 's', ' ', "currently granted access."] })] })), isExpanded && (_jsxs(_Fragment, { children: [_jsxs(Box, { px: 3, py: 2, borderRadius: 2, borderWidth: 1, borderStyle: "solid", borderColor: "border.default", bg: "canvas.default", display: "grid", gap: 1, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Owner" }), ownerPrincipals.length > 0 ? (_jsx(Box, { display: "grid", children: ownerPrincipals.map((ownerPrincipal, index) => (_jsx(Box, { py: 1, borderTopWidth: index === 0 ? 0 : 1, borderTopStyle: "solid", borderColor: "border.subtle", children: _jsx(OwnerPrincipalRow, { ownerPrincipal: ownerPrincipal, cache: principalCache, showAvatarSkeleton: ownerPrincipal.kind === 'personal' &&
                                                     Boolean(hydratingUserUids[ownerPrincipal.uid]), isPlatformAdmin: isPlatformAdmin }) }, principalKey(ownerPrincipal.kind, ownerPrincipal.uid)))) })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Owner information is not available." }))] }), _jsxs(Box, { px: 3, py: 2, borderRadius: 2, borderWidth: 1, borderStyle: "solid", borderColor: "border.default", bg: "canvas.default", display: "grid", gap: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 600 }, children: "Share with\u2026" }), isLoadingShareable && (_jsxs(Box, { display: "inline-flex", alignItems: "center", gap: 1, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Loading\u2026" })] }))] }), !isLoadingShareable &&

package/lib/components/toast/ToastPanel.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Where `useToast` shows its toasts outside JupyterLab: primer-addons'
+ * sliding panel, one toast at a time, the next once it is gone. Mount it
+ * once, inside the application's theme. JupyterLab keeps its own
+ * notifications.
+ *
+ * @module components/toast/ToastPanel
+ */
+import type { JSX } from 'react';
+export declare const ToastPanel: () => JSX.Element;
+export default ToastPanel;

package/lib/components/toast/ToastPanel.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment, useSyncExternalStore } from 'react';
+import { Button } from '@primer/react';
+import { Box, SlidingPanel } from '@datalayer/primer-addons';
+import { toastQueue } from './toastQueue.js';
+const BUTTON_VARIANTS = {
+    accent: 'primary',
+    link: 'invisible',
+    warn: 'danger',
+    default: 'default',
+};
+export const ToastPanel = () => {
+    const toasts = useSyncExternalStore(toastQueue.subscribe, toastQueue.snapshot, toastQueue.snapshot);
+    const shown = toasts[0];
+    const close = () => {
+        if (shown) {
+            toastQueue.dismiss(shown.id);
+        }
+    };
+    return (_jsx(SlidingPanel
+    // A new toast is a new panel: it slides in, and its own clock runs.
+    , { isOpen: Boolean(shown), 
+        // A toast of several lines (a failed request's message and exception) says each on its own line.
+        message: (shown?.message ?? '').split('\n').map((line, index) => (_jsxs(Fragment, { children: [index > 0 ? _jsx("br", {}) : null, line] }, index))), variant: shown?.variant ?? 'default', position: "north", durationMs: shown && shown.autoClose !== false ? shown.autoClose : undefined, onDismiss: close, details: shown?.detail || shown?.actions?.length ? (_jsxs(_Fragment, { children: [shown?.detail ? (
+                // The technical detail: small, in monospace, whole, wrapped (never the message's type).
+                _jsx(Box, { as: "pre", "data-toast-detail": true, sx: {
+                        m: 0,
+                        mt: 1,
+                        fontFamily: 'mono',
+                        fontSize: 0,
+                        whiteSpace: 'pre-wrap',
+                        overflowWrap: 'anywhere',
+                        maxHeight: '12rem',
+                        overflowY: 'auto',
+                    }, children: shown.detail })) : null, shown?.actions?.length ? (_jsx(Box, { display: "flex", gap: 2, flexWrap: "wrap", mt: 2, children: shown.actions.map(action => (_jsx(Button, { size: "small", title: action.caption ?? action.label, variant: BUTTON_VARIANTS[action.displayType ?? 'default'], onClick: (event) => {
+                            action.callback(event.nativeEvent);
+                            if (!event.nativeEvent.defaultPrevented) {
+                                close();
+                            }
+                        }, children: action.label }, action.label))) })) : null] })) : undefined }, shown?.id ?? 'none'));
+};
+export default ToastPanel;

package/lib/components/toast/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ToastPanel';
+export * from './toastQueue';

package/lib/components/toast/index.js

@@ -0,0 +1,6 @@
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './ToastPanel.js';
+export * from './toastQueue.js';

package/lib/components/toast/toastQueue.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The toasts waiting to be shown outside JupyterLab, in the order they were
+ * asked for: `useToast` puts them here, `ToastPanel` shows the first in a
+ * sliding panel, and taking it away shows the next.
+ *
+ * @module components/toast/toastQueue
+ */
+export type ToastVariant = 'info' | 'success' | 'warning' | 'error';
+/** A button on a toast, as JupyterLab's notifications name one. */
+export type ToastAction = {
+    label: string;
+    caption?: string;
+    displayType?: 'default' | 'accent' | 'warn' | 'link';
+    callback: (event: MouseEvent) => void;
+};
+export type QueuedToast = {
+    id: string;
+    variant: ToastVariant;
+    message: string;
+    /** A technical detail drawn under the message, small and in monospace (a request's status, a server's words). */
+    detail?: string;
+    actions?: ToastAction[];
+    /** Milliseconds before it goes on its own; `false` stays until dismissed. */
+    autoClose: number | false;
+};
+/** Info and success go on their own after five seconds; a warning or an error stays. */
+export declare const defaultAutoClose: (variant: ToastVariant) => number | false;
+export declare const toastQueue: {
+    subscribe(listener: () => void): () => void;
+    snapshot(): readonly QueuedToast[];
+    push(toast: Omit<QueuedToast, "id">): string;
+    update(id: string, patch: Partial<Omit<QueuedToast, "id">>): void;
+    /** Take one toast away, or every toast without an id. */
+    dismiss(id?: string): void;
+};

package/lib/components/toast/toastQueue.js

@@ -0,0 +1,47 @@
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+let toasts = [];
+const listeners = new Set();
+let next = 0;
+const emit = () => {
+    for (const listener of listeners) {
+        listener();
+    }
+};
+/** Info and success go on their own after five seconds; a warning or an error stays. */
+export const defaultAutoClose = (variant) => variant === 'info' || variant === 'success' ? 5000 : false;
+export const toastQueue = {
+    subscribe(listener) {
+        listeners.add(listener);
+        return () => {
+            listeners.delete(listener);
+        };
+    },
+    snapshot() {
+        return toasts;
+    },
+    push(toast) {
+        // The same toast already waiting is not said twice: a page that asks
+        // twice, or two requests that fail alike, show it once.
+        const same = toasts.find(queued => queued.variant === toast.variant && queued.message === toast.message);
+        if (same) {
+            return same.id;
+        }
+        next += 1;
+        const id = `toast-${next}`;
+        toasts = [...toasts, { ...toast, id }];
+        emit();
+        return id;
+    },
+    update(id, patch) {
+        toasts = toasts.map(toast => toast.id === id ? { ...toast, ...patch } : toast);
+        emit();
+    },
+    /** Take one toast away, or every toast without an id. */
+    dismiss(id) {
+        toasts = id === undefined ? [] : toasts.filter(toast => toast.id !== id);
+        emit();
+    },
+};

package/lib/hooks/index.d.ts

@@ -20,6 +20,7 @@ export * from './useLocation';
 export * from './useLocationHandles';
 export * from './useMcp';
 export * from './useNavigate';
+export * from './useKeptScroll';
 export * from './useOrganizationPlugins';
 export * from './useParams';
 export * from './useOnClickOutside';

package/lib/hooks/index.js

@@ -25,6 +25,7 @@ export * from './useLocation.js';
 export * from './useLocationHandles.js';
 export * from './useMcp.js';
 export * from './useNavigate.js';
+export * from './useKeptScroll.js';
 export * from './useOrganizationPlugins.js';
 export * from './useParams.js';
 export * from './useOnClickOutside.js';

package/lib/hooks/useCache.d.ts

@@ -33,7 +33,7 @@
  * ```
  */
 import { QueryClient, UseQueryOptions, UseMutationOptions } from '@tanstack/react-query';
-import { IAnyOrganization, IContact, IIAMProviderName, IIAMToken, IOrganization, ISchool, ISecret, IStudent, ITeam, IUser, IUserOnboarding, IUserSettings } from '../models';
+import { IAnyOrganization, IContact, IIAMProviderName, IIAMToken, IOrganization, ISchool, ISecret, IStudent, ITeam, IUser, IUserOnboarding, IUserSettings, type UsageRuntimeEngine } from '../models';
 type IAnySpace = any;
 export type CacheProps = {
     loginRoute?: string;
@@ -635,7 +635,9 @@ export declare const useCache: ({ loginRoute }?: CacheProps) => {
         accountUid?: string;
     } | Omit<UseQueryOptions<unknown[]>, "queryKey" | "queryFn">, options?: Omit<UseQueryOptions<unknown[]>, "queryKey" | "queryFn">) => import("@tanstack/react-query").UseQueryResult<unknown[], Error>;
     useUsagesForUser: (userId: string, options?: Omit<UseQueryOptions<unknown[]>, "queryKey" | "queryFn">) => import("@tanstack/react-query").UseQueryResult<unknown[], Error>;
-    usePlatformUsages: (options?: Omit<UseQueryOptions<unknown[]>, "queryKey" | "queryFn">) => import("@tanstack/react-query").UseQueryResult<unknown[], Error>;
+    usePlatformUsages: (options?: Omit<UseQueryOptions<unknown[]>, "queryKey" | "queryFn">, filter?: {
+        runtimeEngine?: UsageRuntimeEngine;
+    }) => import("@tanstack/react-query").UseQueryResult<unknown[], Error>;
     useOrganization: (organizationId: string) => import("@tanstack/react-query").UseQueryResult<IOrganization, Error>;
     useOrganizationByHandle: (handle: string) => import("@tanstack/react-query").UseQueryResult<IOrganization | null, Error>;
     useOrganizationPublicProfileByHandle: (handle: string) => import("@tanstack/react-query").UseQueryResult<any, Error>;

package/lib/hooks/useCache.js

@@ -37,7 +37,7 @@
  * ```
  */
 import { useQuery, useQueries, useMutation, useQueryClient, } from '@tanstack/react-query';
-import { BOOTSTRAP_USER_ONBOARDING, asContact, asInvite, asOrganization, asSecret, asTeam, asToken, asUser, } from '../models/index.js';
+import { BOOTSTRAP_USER_ONBOARDING, asContact, asInvite, asOrganization, asSecret, asTeam, asToken, asUser, usageRuntimeEngineOf, } from '../models/index.js';
 import { asSpace } from './cacheConverters.js';
 import { parseDeckSpec } from './deckSpec.js';
 import { libraryAppFieldsOf } from './libraryApp.js';
@@ -6592,9 +6592,15 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
     /**
      * Get platform-wide usage statistics
      */
-    const usePlatformUsages = (options) => {
+    const usePlatformUsages = (options, 
+    /**
+     * Only the usage of one engine (`runtime_engine`), filtered by IAM:
+     * `kagent` for the usage page's KAgent tab. Every record otherwise.
+     */
+    filter) => {
+        const runtimeEngine = filter?.runtimeEngine;
         return useQuery({
-            queryKey: ['usage', 'platform'],
+            queryKey: ['usage', 'platform', runtimeEngine ?? 'all'],
             queryFn: async () => {
                 const parseUsageDate = (value) => {
                     if (!value) {
@@ -6642,11 +6648,14 @@ export const useCache = ({ loginRoute = '/login' } = {}) => {
                         usagePeriodLabel: u.usage_period_label,
                         usagePeriodStart: parseUsageDate(u.usage_period_start),
                         usagePeriodEnd: parseUsageDate(u.usage_period_end),
+                        runtimeEngine: usageRuntimeEngineOf(u.runtime_engine),
                         metadata,
                     };
                 };
                 const resp = await requestDatalayer({
-                    url: `${configuration.iamUrl}/api/iam/v1/usage/platform`,
+                    url: `${configuration.iamUrl}/api/iam/v1/usage/platform${runtimeEngine
+                        ? `?runtime_engine=${encodeURIComponent(runtimeEngine)}`
+                        : ''}`,
                     method: 'GET',
                 });
                 // Transform snake_case API response to camelCase IUsage interface