@datalayer/core 1.2.27 → 1.2.28

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/useDatalayer.js

@@ -67,23 +67,19 @@ export function useDatalayer(props = {}) {
                 }
                 else {
                     if (notifyOnError_ && !isForbidden) {
-                        if (responseError.warnings) {
-                            responseError.warnings.forEach(warning => enqueueToast(`${warning}`, { variant: 'warning' }));
-                        }
-                        if (responseError.errors) {
-                            responseError.errors.forEach(error => enqueueToast(`${error}`, { variant: 'error' }));
-                        }
-                        if (responseError.message) {
-                            enqueueToast(`${responseError.message}`, { variant: 'error' });
-                        }
-                        else {
-                            enqueueToast(`API Error`, { variant: 'error' });
-                        }
-                        if (responseError.exceptionMessage) {
-                            enqueueToast(`${responseError.exceptionMessage}`, {
-                                variant: 'error',
-                            });
+                        // One toast per failed request, its lines together and each once
+                        // (2 November 2026: its message and its exception were a toast
+                        // each, so a page that asked twice showed four).
+                        const once = (lines) => Array.from(new Set(lines.map(line => `${line ?? ''}`.trim()).filter(Boolean))).join('\n');
+                        const warnings = once(responseError.warnings ?? []);
+                        if (warnings) {
+                            enqueueToast(warnings, { variant: 'warning' });
                         }
+                        enqueueToast(once([
+                            ...(responseError.errors ?? []),
+                            responseError.message || 'API Error',
+                            responseError.exceptionMessage,
+                        ]), { variant: 'error' });
                     }
                 }
                 const response = {

package/lib/hooks/useToast.d.ts

@@ -14,6 +14,12 @@ export type ToastProps = {
      */
     variant: 'info' | 'success' | 'warning' | 'error';
 };
+/**
+ * Toasts in JupyterLab, as they always were: its notifications, or
+ * react-toastify until they are loaded. Everywhere else (the SaaS, the
+ * desktop…) they go to `ToastPanel`, primer-addons' sliding panel, which the
+ * application mounts once (2 November 2026).
+ */
 export declare const useToast: () => Readonly<{
     /**
      * Emit a message as a toast.

package/lib/hooks/useToast.js

@@ -3,6 +3,7 @@ import React from 'react';
 import { toast } from 'react-toastify';
 import { Button } from '@primer/react';
 import { isInsideJupyterLab } from '../utils/index.js';
+import { defaultAutoClose, toastQueue } from '../components/toast/toastQueue.js';
 // `@datalayer/jupyter-react` and `@jupyterlab/apputils` are heavy (they pull
 // JupyterLab / CodeMirror / lumino) and are only needed when running INSIDE
 // JupyterLab. They are lazily loaded here so the standalone bundle (landing app)
@@ -76,11 +77,25 @@ function createContent(message, closeHandler, actions) {
                         return (_jsx(React.Suspense, { fallback: null, children: _jsx(JupyterReactTheme, { children: _jsx(ToastButton, { action: action, closeToast: closeHandler }) }) }, 'button-' + idx));
                     })] }))] }));
 }
+/**
+ * Toasts in JupyterLab, as they always were: its notifications, or
+ * react-toastify until they are loaded. Everywhere else (the SaaS, the
+ * desktop…) they go to `ToastPanel`, primer-addons' sliding panel, which the
+ * application mounts once (2 November 2026).
+ */
 export const useToast = () => {
     // This CANNOT use Jupyter React hooks as it may be used outside Jupyter React context.
     const insideJupyterLab = isInsideJupyterLab();
     const enqueueToast = (message, options = { variant: 'info' }) => {
         const { actions, autoClose } = options;
+        if (!insideJupyterLab) {
+            return toastQueue.push({
+                variant: options.variant,
+                message,
+                actions,
+                autoClose: autoClose ?? defaultAutoClose(options.variant),
+            });
+        }
         const theme = resolveToastTheme();
         switch (options.variant) {
             case 'info': {
@@ -138,6 +153,27 @@ export const useToast = () => {
         }
     };
     const trackAsyncTask = (promise, options) => {
+        if (!insideJupyterLab) {
+            // One toast for the task: pending, then what it came to.
+            const message = (value, result) => typeof value === 'function'
+                ? String(value(result))
+                : String(value);
+            const id = toastQueue.push({
+                variant: 'info',
+                message: message(options.pending.message, undefined),
+                autoClose: false,
+            });
+            promise.then(result => toastQueue.update(id, {
+                variant: 'success',
+                message: message(options.success.message, result),
+                autoClose: defaultAutoClose('success'),
+            }), reason => toastQueue.update(id, {
+                variant: 'error',
+                message: message(options.error.message, reason),
+                autoClose: defaultAutoClose('error'),
+            }));
+            return id;
+        }
         const theme = resolveToastTheme();
         return insideJupyterLab && NotificationApi
             ? NotificationApi.promise(promise, options)
@@ -169,7 +205,10 @@ export const useToast = () => {
          * @param id Toast id
          */
         dismiss: (id) => {
-            if (insideJupyterLab && NotificationApi) {
+            if (!insideJupyterLab) {
+                toastQueue.dismiss(id === undefined ? undefined : String(id));
+            }
+            else if (insideJupyterLab && NotificationApi) {
                 NotificationApi.dismiss(id);
             }
             else {

package/lib/models/McpAgentAccess.d.ts

@@ -0,0 +1,95 @@
+/**
+ * What one agent may execute and reach, as the Jupyter MCP Server decides it.
+ *
+ * Every answer here comes from the steps a call goes through — the token's
+ * scopes, the policy layers, then Spacer or Contents for the object — so a
+ * tool or a notebook listed as refused is one the agent would be refused.
+ *
+ * @module models/McpAgentAccess
+ */
+/** The agent an answer is about. `grant` is null for the token that asked. */
+export interface McpAgentNamed {
+    grant: string | null;
+    clientId: string | null;
+    clientName: string | null;
+    scopes: string[];
+    orgUid: string | null;
+    teamUid: string | null;
+}
+export type McpToolsetHealthState = 'ready' | 'degraded' | 'unknown';
+export interface McpToolsetHealth {
+    /** `unknown` is a toolset nothing here measures, never one reported well. */
+    state: McpToolsetHealthState;
+    detail: string;
+}
+/**
+ * How a client comes to hold a toolset: the plain endpoint serves `base`, a
+ * URL names an `optional` one, a `source` is enabled in a session, and an
+ * `application` one is reached through an application's connection.
+ */
+export type McpToolsetSelected = 'base' | 'optional' | 'source' | 'application';
+/** One tool, decided for this agent. */
+export interface McpAgentTool {
+    name: string;
+    /** The scopes it requires, space-separated. */
+    scope: string;
+    allowed: boolean;
+    /** Why not: `scope`, a policy rule, `connection` or `item`. */
+    rule: string | null;
+    /** Which layer decided. */
+    decidedBy: string | null;
+    detail: string | null;
+    /** The layer that makes a person approve a call first, when one does. */
+    approval: string | null;
+}
+/** A source's own rule for its calls, as Contents keeps it. */
+export type McpSourceApprovalPolicy = 'explicit' | 'auto-allowlisted' | 'never';
+export interface McpAgentToolset {
+    kind: 'toolset' | 'source';
+    /** The source, when it is one. */
+    uid?: string;
+    name: string;
+    title: string;
+    description: string | null;
+    selected: McpToolsetSelected;
+    health: McpToolsetHealth;
+    /** A source's; a toolset's tools each say their own `approval`. */
+    approvalPolicy: McpSourceApprovalPolicy | null;
+    tools: McpAgentTool[];
+}
+export interface McpAgentToolsets {
+    agent: McpAgentNamed;
+    toolsets: McpAgentToolset[];
+    /** Why the sources are missing, when Contents could not be read. */
+    sourcesError: string | null;
+}
+/** One notebook or source, and how far this agent reaches it. */
+export interface McpReachRow {
+    kind: 'notebook' | 'source';
+    uid: string;
+    name: string;
+    /** A notebook's Space, a source's kind. */
+    where: string | null;
+    read: boolean;
+    write: boolean;
+    execute: boolean;
+    /** Why it stops short of `execute`, in sentences. */
+    refused: string[];
+    /** Whether a source is the caller's own. */
+    yours?: boolean;
+    /** Set when the check could not run: an answer about the check, not the agent. */
+    unchecked: string | null;
+}
+export interface McpAgentReach {
+    agent: McpAgentNamed;
+    notebooks: McpReachRow[];
+    sources: McpReachRow[];
+    /** How many there are of each, of which `limit` were asked about. */
+    notebooksListed: number;
+    sourcesListed: number;
+    limit: number;
+    /** Contents has more than were read. */
+    sourcesTruncated: boolean;
+    notebooksError: string | null;
+    sourcesError: string | null;
+}

package/lib/models/McpAgentAccess.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export {};

package/lib/models/index.d.ts

@@ -51,6 +51,7 @@ export * from './Invite';
 export * from './LandingRoles';
 export * from './McpAuditEvent';
 export * from './McpBinding';
+export * from './McpAgentAccess';
 export * from './McpPolicy';
 export * from './McpTask';
 export * from './Member';

package/lib/models/index.js

@@ -55,6 +55,7 @@ export * from './Invite.js';
 export * from './LandingRoles.js';
 export * from './McpAuditEvent.js';
 export * from './McpBinding.js';
+export * from './McpAgentAccess.js';
 export * from './McpPolicy.js';
 export * from './McpTask.js';
 export * from './Member.js';

package/lib/otel/views/OtelLive.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * @module otel/OtelLive
  */
 import { useState, useCallback, useMemo, useEffect, useRef, } from 'react';
-import { Box } from '@datalayer/primer-addons';
+import { Box, Card } from '@datalayer/primer-addons';
 import { Text, Button, Label } from '@primer/react';
 import { GitBranchIcon, ClockIcon } from '@primer/octicons-react';
 import { getOtelConsumeUrl } from '../../state/substates/CoreState.js';
@@ -288,7 +288,7 @@ export const OtelLive = ({ baseUrl = getOtelConsumeUrl(), wsBaseUrl, token, auto
             return ts >= s && ts <= e;
         });
     }, [metrics, isRangeActive, rangeStart, rangeEnd]);
-    return (_jsxs(Box, { display: "flex", flexDirection: "column", flex: 1, minHeight: 0, height: "100%", color: "fg.default", bg: "canvas.default", border: "1px solid", borderColor: "border.default", borderRadius: 2, overflow: "hidden", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 0, children: [_jsx(Box, { flex: 1, children: _jsx(OtelSearchBar, { signal: signal, onSignalChange: setSignal, services: effectiveServices, selectedService: service, onServiceChange: setService, query: query, onQueryChange: setQuery, onRefresh: handleRefresh, loading: signal === 'traces'
+    return (_jsxs(Card, { border: true, shadow: "none", display: "flex", flexDirection: "column", flex: 1, minHeight: 0, height: "100%", color: "fg.default", overflow: "hidden", children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 0, children: [_jsx(Box, { flex: 1, children: _jsx(OtelSearchBar, { signal: signal, onSignalChange: setSignal, services: effectiveServices, selectedService: service, onServiceChange: setService, query: query, onQueryChange: setQuery, onRefresh: handleRefresh, loading: signal === 'traces'
                                 ? tracesLoading
                                 : signal === 'logs'
                                     ? logsLoading

package/lib/otel/views/OtelLiveSpans.js

@@ -16,7 +16,7 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
  * @module otel/views/OtelLiveSpans
  */
 import { useMemo, useState } from 'react';
-import { Box } from '@datalayer/primer-addons';
+import { Box, Card } from '@datalayer/primer-addons';
 import { ActionList, ActionMenu, Button, Text } from '@primer/react';
 import { DownloadIcon, PauseIcon, PlayIcon, TrashIcon, } from '@primer/octicons-react';
 import { toMs } from '../utils.js';
@@ -94,7 +94,7 @@ export const OtelLiveSpans = ({ tracer, spans: given, service, facets = DEFAULT_
         ? everything.filter(span => span.trace_id === selectedSpan.trace_id)
         : [], [everything, selectedSpan]);
     const side = detailPlacement === 'side' && !compact;
-    return (_jsxs(Box, { "data-otel-live-spans": "", border: "1px solid", borderColor: "border.default", borderRadius: 2, bg: "canvas.default", color: "fg.default", minWidth: 0, children: [_jsxs(Box, { role: "toolbar", "aria-label": label, display: "flex", flexWrap: "wrap", gap: 2, alignItems: "center", p: 2, borderBottom: "1px solid", borderColor: "border.default", children: [facets.map((facet, index) => (_jsx(FacetMenu, { facet: facet, options: options[index] ?? [], selected: selected[index] ?? new Set(), onChange: next => setSelected(prev => facets.map((_, at) => at === index ? next : (prev[at] ?? new Set()))) }, facet.label))), _jsx(Box, { flex: 1 }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, "data-otel-span-count": "", children: [rows.length === shown.length
+    return (_jsxs(Card, { border: true, shadow: "none", display: "block", "data-otel-live-spans": "", color: "fg.default", minWidth: 0, children: [_jsxs(Box, { role: "toolbar", "aria-label": label, display: "flex", flexWrap: "wrap", gap: 2, alignItems: "center", p: 2, borderBottom: "1px solid", borderColor: "border.default", children: [facets.map((facet, index) => (_jsx(FacetMenu, { facet: facet, options: options[index] ?? [], selected: selected[index] ?? new Set(), onChange: next => setSelected(prev => facets.map((_, at) => at === index ? next : (prev[at] ?? new Set()))) }, facet.label))), _jsx(Box, { flex: 1 }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, "data-otel-span-count": "", children: [rows.length === shown.length
                                 ? `${rows.length} ${rows.length === 1 ? 'span' : 'spans'}`
                                 : `${rows.length} of ${shown.length}`, waiting > 0 ? ` · ${waiting} new` : ''] }), _jsx(Button, { size: "small", leadingVisual: held ? PlayIcon : PauseIcon, "aria-pressed": held !== null, onClick: () => setHeld(held ? null : recorded), "data-otel-pause": "", children: held ? 'Resume' : 'Pause' }), _jsx(Button, { size: "small", leadingVisual: TrashIcon, onClick: () => {
                             setHeld(null);

package/lib/otel/views/OtelLogsList.js

@@ -12,7 +12,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * @module otel/OtelLogsList
  */
 import React, { useState } from 'react';
-import { Box } from '@datalayer/primer-addons';
+import { Box, Card } from '@datalayer/primer-addons';
 import { Text, Label, Spinner } from '@primer/react';
 import { Blankslate } from '@primer/react/experimental';
 import { LogIcon } from '@primer/octicons-react';
@@ -27,13 +27,13 @@ const LogDetail = ({ log }) => (_jsxs(Box, { gridColumn: "1 / -1", bg: "canvas.s
                         color: 'fg.muted',
                         display: 'block',
                         mb: 1,
-                    }, children: "Body" }), _jsx(Box, { as: "pre", fontSize: 1, fontFamily: "mono", whiteSpace: "pre-wrap", wordBreak: "break-word", m: 0, bg: "canvas.default", border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 2, children: log.body })] }), log.trace_id && (_jsxs(Box, { display: "flex", gap: 3, mb: 2, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontWeight: 'bold' }, children: "trace_id" }), _jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: log.trace_id }), log.span_id && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontWeight: 'bold' }, children: "span_id" }), _jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: log.span_id })] }))] })), log.attributes && Object.keys(log.attributes).length > 0 && (_jsxs(Box, { children: [_jsx(Text, { sx: {
+                    }, children: "Body" }), _jsx(Card, { border: true, shadow: "none", display: "block", as: "pre", fontSize: 1, fontFamily: "mono", whiteSpace: "pre-wrap", wordBreak: "break-word", m: 0, p: 2, children: log.body })] }), log.trace_id && (_jsxs(Box, { display: "flex", gap: 3, mb: 2, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontWeight: 'bold' }, children: "trace_id" }), _jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: log.trace_id }), log.span_id && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontWeight: 'bold' }, children: "span_id" }), _jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0 }, children: log.span_id })] }))] })), log.attributes && Object.keys(log.attributes).length > 0 && (_jsxs(Box, { children: [_jsx(Text, { sx: {
                         fontSize: 0,
                         fontWeight: 'bold',
                         color: 'fg.muted',
                         display: 'block',
                         mb: 1,
-                    }, children: "Attributes" }), _jsx(Box, { bg: "canvas.default", border: "1px solid", borderColor: "border.default", borderRadius: 2, p: 2, children: Object.entries(log.attributes).map(([k, v]) => (_jsxs(Box, { display: "flex", gap: 2, py: 1, borderBottom: "1px solid", borderColor: "border.muted", children: [_jsx(Text, { sx: {
+                    }, children: "Attributes" }), _jsx(Card, { border: true, shadow: "none", display: "block", p: 2, children: Object.entries(log.attributes).map(([k, v]) => (_jsxs(Box, { display: "flex", gap: 2, py: 1, borderBottom: "1px solid", borderColor: "border.muted", children: [_jsx(Text, { sx: {
                                     color: 'accent.fg',
                                     fontSize: 0,
                                     fontFamily: 'mono',

package/lib/otel/views/OtelMetricsChart.d.ts

@@ -13,6 +13,19 @@
  */
 import React from 'react';
 import type { OtelMetric } from '../types';
+/**
+ * The colours ECharts draws its text, axes, grid lines and tooltip with.
+ * A canvas reads no CSS variable, so they are read off a probe the theme
+ * colours (fg.default, fg.muted, border.muted, canvas.overlay), resolved to
+ * what the colour mode makes them: hard-coded, the axes and the tooltip were
+ * light-mode only and unreadable in the dark (28 October 2026).
+ */
+export interface ChartInk {
+    text: string;
+    muted: string;
+    line: string;
+    surface: string;
+}
 export interface OtelMetricsChartProps {
     metrics: OtelMetric[];
     /** Height per chart panel in px. Default 240. */

package/lib/otel/views/OtelMetricsChart.js

@@ -1,4 +1,22 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * OtelMetricsChart – Type-aware ECharts visualisation for OTEL metrics.
+ *
+ * Renders one chart section per `metric_type` (`sum`, `histogram`, `gauge`,
+ * and any other type present) with an appropriate chart style:
+ *
+ * - **sum** (counters): area-line chart with gradient fill
+ * - **histogram**: bar chart with grouped series
+ * - **gauge**: plain line chart (no area fill)
+ * - **other**: falls back to area-line
+ *
+ * @module otel/OtelMetricsChart
+ */
+import React, { useLayoutEffect, useRef, useState } from 'react';
 import * as echarts from 'echarts';
 import ReactECharts from 'echarts-for-react';
 import { Box } from '@datalayer/primer-addons';
@@ -108,30 +126,90 @@ const TYPE_ORDER = {
     gauge: 2,
     exponentialHistogram: 3,
 };
+/** Light-mode values, until the probe has been read. */
+const DEFAULT_INK = {
+    text: '#1f2328',
+    muted: '#59636e',
+    line: '#d1d9e0',
+    surface: '#ffffff',
+};
+function useChartInk() {
+    const probe = useRef(null);
+    const [ink, setInk] = useState(DEFAULT_INK);
+    useLayoutEffect(() => {
+        const node = probe.current;
+        if (!node || typeof getComputedStyle === 'undefined') {
+            return;
+        }
+        const read = () => {
+            const style = getComputedStyle(node);
+            const muted = node.firstElementChild
+                ? getComputedStyle(node.firstElementChild).color
+                : style.color;
+            const next = {
+                text: style.color || DEFAULT_INK.text,
+                muted: muted || DEFAULT_INK.muted,
+                line: style.borderTopColor || DEFAULT_INK.line,
+                surface: style.backgroundColor || DEFAULT_INK.surface,
+            };
+            setInk(current => current.text === next.text &&
+                current.muted === next.muted &&
+                current.line === next.line &&
+                current.surface === next.surface
+                ? current
+                : next);
+        };
+        read();
+        // The colour mode changes on the document's attributes.
+        const observer = new MutationObserver(read);
+        observer.observe(document.documentElement, {
+            attributes: true,
+            subtree: false,
+        });
+        observer.observe(document.body, { attributes: true, subtree: false });
+        return () => observer.disconnect();
+    });
+    return [probe, ink];
+}
+/** The probe the ink is read off: drawn, never seen. */
+const InkProbe = React.forwardRef((_, ref) => (_jsx(Box, { ref: ref, "aria-hidden": true, color: "fg.default", bg: "canvas.overlay", borderTop: "1px solid", borderColor: "border.muted", sx: {
+        position: 'absolute',
+        width: 0,
+        height: 0,
+        overflow: 'hidden',
+        pointerEvents: 'none',
+    }, children: _jsx(Box, { as: "span", color: "fg.muted" }) })));
+InkProbe.displayName = 'InkProbe';
 // ── Build ECharts option per type ──────────────────────────────────
-function buildOption(mtype, nameMap) {
+function buildOption(mtype, nameMap, ink = DEFAULT_INK) {
     const names = [...nameMap.keys()];
     const baseLegend = {
         data: names,
         top: 6,
-        textStyle: { fontSize: 11 },
+        textStyle: { fontSize: 11, color: ink.muted },
     };
     const baseGrid = { left: 50, right: 20, top: 40, bottom: 30 };
     const baseTooltip = {
         trigger: 'axis',
-        axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } },
+        axisPointer: {
+            type: 'cross',
+            label: { backgroundColor: ink.muted, color: ink.surface },
+        },
+        backgroundColor: ink.surface,
+        borderColor: ink.line,
+        textStyle: { color: ink.text },
     };
     const baseXAxis = {
         type: 'time',
         boundaryGap: false,
-        axisLine: { lineStyle: { color: '#ccc' } },
-        axisLabel: { fontSize: 10 },
+        axisLine: { lineStyle: { color: ink.line } },
+        axisLabel: { fontSize: 10, color: ink.muted },
     };
     const baseYAxis = {
         type: 'value',
-        splitLine: { lineStyle: { type: 'dashed', color: '#e8e8e8' } },
+        splitLine: { lineStyle: { type: 'dashed', color: ink.line } },
         axisLine: { show: false },
-        axisLabel: { fontSize: 10 },
+        axisLabel: { fontSize: 10, color: ink.muted },
     };
     if (mtype === 'histogram' || mtype === 'exponentialHistogram') {
         // ── Bar chart ──
@@ -257,29 +335,34 @@ function formatDuration(ms) {
 }
 // ── Component ───────────────────────────────────────────────────────
 export const OtelMetricsChart = ({ metrics, height = 240, }) => {
+    const [probe, ink] = useChartInk();
     if (!metrics || metrics.length === 0) {
-        return (_jsx(ReactECharts, { echarts: echarts, option: {
-                title: {
-                    text: 'No metrics data',
-                    left: 'center',
-                    top: 'center',
-                    textStyle: { color: '#999', fontSize: 14, fontWeight: 'normal' },
-                },
-            }, style: { width: '100%', height: `${height}px` }, notMerge: true }));
+        return (_jsxs(Box, { position: "relative", children: [_jsx(InkProbe, { ref: probe }), _jsx(ReactECharts, { echarts: echarts, option: {
+                        title: {
+                            text: 'No metrics data',
+                            left: 'center',
+                            top: 'center',
+                            textStyle: {
+                                color: ink.muted,
+                                fontSize: 14,
+                                fontWeight: 'normal',
+                            },
+                        },
+                    }, style: { width: '100%', height: `${height}px` }, notMerge: true })] }));
     }
     const byType = groupByType(metrics);
     // Sort types in a stable, user-friendly order.
     const sortedTypes = [...byType.keys()].sort((a, b) => (TYPE_ORDER[a] ?? 99) - (TYPE_ORDER[b] ?? 99));
-    return (_jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2, children: sortedTypes.map(mtype => {
-            const nameMap = byType.get(mtype);
-            const option = buildOption(mtype, nameMap);
-            const stats = computeStats(nameMap);
-            const durationMs = stats.startTs !== null && stats.endTs !== null
-                ? stats.endTs - stats.startTs
-                : null;
-            return (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 1, mb: 1, children: [_jsx(Label, { size: "small", variant: typeVariant(mtype), children: mtype }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', color: 'fg.muted' }, children: typeTitle(mtype) }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: ["(", [...nameMap.keys()].join(', '), ")"] })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 3, px: 1, mb: 1, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: "Sum:" }), ' ', stats.total.toLocaleString(undefined, {
-                                        maximumFractionDigits: 4,
-                                    })] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: "Points:" }), ' ', stats.count] }), stats.startTs !== null && stats.endTs !== null && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: "Interval:" }), ' ', formatTs(stats.startTs), " \u2192 ", formatTs(stats.endTs), durationMs !== null && durationMs > 0 && (_jsxs(Text, { as: "span", sx: { color: 'fg.subtle' }, children: [' ', "(", formatDuration(durationMs), ")"] }))] }))] }), _jsx(ReactECharts, { echarts: echarts, option: option, style: { width: '100%', height: `${height}px` }, notMerge: true })] }, mtype));
-        }) }));
+    return (_jsxs(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2, position: "relative", children: [_jsx(InkProbe, { ref: probe }), sortedTypes.map(mtype => {
+                const nameMap = byType.get(mtype);
+                const option = buildOption(mtype, nameMap, ink);
+                const stats = computeStats(nameMap);
+                const durationMs = stats.startTs !== null && stats.endTs !== null
+                    ? stats.endTs - stats.startTs
+                    : null;
+                return (_jsxs(Box, { children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 2, px: 1, mb: 1, children: [_jsx(Label, { size: "small", variant: typeVariant(mtype), children: mtype }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', color: 'fg.muted' }, children: typeTitle(mtype) }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.subtle' }, children: ["(", [...nameMap.keys()].join(', '), ")"] })] }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 3, px: 1, mb: 1, children: [_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: "Sum:" }), ' ', stats.total.toLocaleString(undefined, {
+                                            maximumFractionDigits: 4,
+                                        })] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: "Points:" }), ' ', stats.count] }), stats.startTs !== null && stats.endTs !== null && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [_jsx(Text, { as: "span", sx: { fontWeight: 'bold', color: 'fg.default' }, children: "Interval:" }), ' ', formatTs(stats.startTs), " \u2192 ", formatTs(stats.endTs), durationMs !== null && durationMs > 0 && (_jsxs(Text, { as: "span", sx: { color: 'fg.subtle' }, children: [' ', "(", formatDuration(durationMs), ")"] }))] }))] }), _jsx(ReactECharts, { echarts: echarts, option: option, style: { width: '100%', height: `${height}px` }, notMerge: true })] }, mtype));
+            })] }));
 };
 export default OtelMetricsChart;

package/lib/otel/views/OtelSpanDetail.js

@@ -12,7 +12,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * @module otel/OtelSpanDetail
  */
 import { useMemo, useState } from 'react';
-import { Box } from '@datalayer/primer-addons';
+import { Box, Card } from '@datalayer/primer-addons';
 import { Text, IconButton, UnderlineNav, CounterLabel, Label, } from '@primer/react';
 import { XIcon, ChevronDownIcon, ChevronRightIcon, } from '@primer/octicons-react';
 import { formatDuration, buildSpanTree } from '../utils.js';
@@ -39,7 +39,7 @@ const CollapsibleSection = ({ title, data, defaultOpen = false }) => {
     const [open, setOpen] = useState(defaultOpen);
     if (!data || Object.keys(data).length === 0)
         return null;
-    return (_jsxs(Box, { mt: 3, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, cursor: "pointer", py: 1, userSelect: "none", onClick: () => setOpen(!open), children: [open ? _jsx(ChevronDownIcon, { size: 16 }) : _jsx(ChevronRightIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: title }), _jsx(CounterLabel, { children: Object.keys(data).length })] }), open && (_jsx(Box, { bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", p: 2, mt: 1, overflowX: "auto", children: Object.entries(data).map(([key, val]) => (_jsx(AttributeRow, { attrKey: key, value: val, depth: 0 }, key))) }))] }));
+    return (_jsxs(Box, { mt: 3, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, cursor: "pointer", py: 1, userSelect: "none", onClick: () => setOpen(!open), children: [open ? _jsx(ChevronDownIcon, { size: 16 }) : _jsx(ChevronRightIcon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold' }, children: title }), _jsx(CounterLabel, { children: Object.keys(data).length })] }), open && (_jsx(Card, { border: true, shadow: "none", variant: "subtle", display: "block", p: 2, mt: 1, overflowX: "auto", children: Object.entries(data).map(([key, val]) => (_jsx(AttributeRow, { attrKey: key, value: val, depth: 0 }, key))) }))] }));
 };
 /**
  * A value as the detail unfolds it: JSON text of an object or an array (the
@@ -107,7 +107,7 @@ export const OtelSpanDetail = ({ span, traceSpans, onClose, }) => {
     }
     // Build tree from traceSpans for tree tab
     const tree = traceSpans && traceSpans.length > 0 ? buildSpanTree(traceSpans) : undefined;
-    return (_jsxs(Box, { height: "100%", overflow: "auto", borderLeft: "1px solid", borderColor: "border.default", bg: "canvas.default", display: "flex", flexDirection: "column", children: [_jsxs(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", display: "flex", justifyContent: "space-between", alignItems: "center", bg: "canvas.subtle", flexShrink: 0, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'bold' }, children: span.span_name }), onClose && (_jsx(IconButton, { icon: XIcon, "aria-label": "Close detail panel", variant: "invisible", size: "small", onClick: onClose }))] }), _jsxs(UnderlineNav, { "aria-label": "Span detail tabs", children: [_jsx(UnderlineNav.Item, { "aria-current": activeTab === 'details' ? 'page' : undefined, onClick: () => setActiveTab('details'), children: "Details" }), tree && (_jsx(UnderlineNav.Item, { "aria-current": activeTab === 'tree' ? 'page' : undefined, onClick: () => setActiveTab('tree'), children: "Trace Tree" })), _jsx(UnderlineNav.Item, { "aria-current": activeTab === 'raw' ? 'page' : undefined, onClick: () => setActiveTab('raw'), children: "Raw Data" })] }), _jsxs(Box, { flex: 1, overflow: "auto", children: [activeTab === 'details' && (_jsxs(Box, { p: 3, children: [_jsx(MetadataRow, { label: "span_name", value: span.span_name }), _jsx(MetadataRow, { label: "service_name", value: span.service_name }), _jsx(MetadataRow, { label: "otel_scope_name", value: span.otel_scope_name }), _jsx(MetadataRow, { label: "kind", value: span.kind }), _jsx(MetadataRow, { label: "trace_id", value: span.trace_id, mono: true }), _jsx(MetadataRow, { label: "span_id", value: span.span_id, mono: true }), _jsx(MetadataRow, { label: "parent_span_id", value: span.parent_span_id, mono: true }), _jsx(MetadataRow, { label: "duration", value: formatDuration(span.duration_ms) }), _jsx(MetadataRow, { label: "start_time", value: span.start_time, mono: true }), _jsx(MetadataRow, { label: "end_time", value: span.end_time, mono: true }), _jsx(MetadataRow, { label: "status_code", value: span.status_code }), _jsx(MetadataRow, { label: "status_message", value: span.status_message }), _jsx(CollapsibleSection, { title: "Arguments", data: genAiAttrs, defaultOpen: Object.keys(genAiAttrs).length > 0 }), _jsx(CollapsibleSection, { title: "Attributes", data: otherAttrs }), span.events && span.events.length > 0 && (_jsxs(Box, { mt: 3, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: "Events" }), _jsx(CounterLabel, { children: span.events.length })] }), span.events.map((ev, idx) => (_jsxs(Box, { bg: "canvas.subtle", borderRadius: 2, border: "1px solid", borderColor: "border.default", p: 2, mt: 2, children: [_jsxs(Box, { display: "flex", gap: 2, children: [_jsx(Label, { children: ev.name }), _jsx(Text, { sx: {
+    return (_jsxs(Box, { height: "100%", overflow: "auto", borderLeft: "1px solid", borderColor: "border.default", bg: "canvas.default", display: "flex", flexDirection: "column", children: [_jsxs(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.default", display: "flex", justifyContent: "space-between", alignItems: "center", bg: "canvas.subtle", flexShrink: 0, children: [_jsx(Text, { sx: { fontSize: 2, fontWeight: 'bold' }, children: span.span_name }), onClose && (_jsx(IconButton, { icon: XIcon, "aria-label": "Close detail panel", variant: "invisible", size: "small", onClick: onClose }))] }), _jsxs(UnderlineNav, { "aria-label": "Span detail tabs", children: [_jsx(UnderlineNav.Item, { "aria-current": activeTab === 'details' ? 'page' : undefined, onClick: () => setActiveTab('details'), children: "Details" }), tree && (_jsx(UnderlineNav.Item, { "aria-current": activeTab === 'tree' ? 'page' : undefined, onClick: () => setActiveTab('tree'), children: "Trace Tree" })), _jsx(UnderlineNav.Item, { "aria-current": activeTab === 'raw' ? 'page' : undefined, onClick: () => setActiveTab('raw'), children: "Raw Data" })] }), _jsxs(Box, { flex: 1, overflow: "auto", children: [activeTab === 'details' && (_jsxs(Box, { p: 3, children: [_jsx(MetadataRow, { label: "span_name", value: span.span_name }), _jsx(MetadataRow, { label: "service_name", value: span.service_name }), _jsx(MetadataRow, { label: "otel_scope_name", value: span.otel_scope_name }), _jsx(MetadataRow, { label: "kind", value: span.kind }), _jsx(MetadataRow, { label: "trace_id", value: span.trace_id, mono: true }), _jsx(MetadataRow, { label: "span_id", value: span.span_id, mono: true }), _jsx(MetadataRow, { label: "parent_span_id", value: span.parent_span_id, mono: true }), _jsx(MetadataRow, { label: "duration", value: formatDuration(span.duration_ms) }), _jsx(MetadataRow, { label: "start_time", value: span.start_time, mono: true }), _jsx(MetadataRow, { label: "end_time", value: span.end_time, mono: true }), _jsx(MetadataRow, { label: "status_code", value: span.status_code }), _jsx(MetadataRow, { label: "status_message", value: span.status_message }), _jsx(CollapsibleSection, { title: "Arguments", data: genAiAttrs, defaultOpen: Object.keys(genAiAttrs).length > 0 }), _jsx(CollapsibleSection, { title: "Attributes", data: otherAttrs }), span.events && span.events.length > 0 && (_jsxs(Box, { mt: 3, children: [_jsxs(Box, { display: "flex", alignItems: "center", gap: 1, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: "Events" }), _jsx(CounterLabel, { children: span.events.length })] }), span.events.map((ev, idx) => (_jsxs(Card, { border: true, shadow: "none", variant: "subtle", display: "block", p: 2, mt: 2, children: [_jsxs(Box, { display: "flex", gap: 2, children: [_jsx(Label, { children: ev.name }), _jsx(Text, { sx: {
                                                             fontSize: 0,
                                                             color: 'fg.muted',
                                                             fontFamily: 'mono',