@datalayer/core 1.2.18 → 1.2.20

package/lib/mocks/views/DashboardMock.js

@@ -3,36 +3,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { Box, Link, Text, LabelGroup, Label, ActionMenu, ActionList, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Link, Text, LabelGroup, Label, ActionMenu, ActionList, } from '@primer/react';
 import { ArrowRightIcon, CloudIcon, StarIcon, DotFillIcon, RepoForkedIcon, LinkIcon, } from '@primer/octicons-react';
 import { ReactJsIcon } from '@datalayer/icons-react';
 import { lazyWithPreload, WithSuspense } from '../../utils/index.js';
 import { ECHART_MOCK_1, ECHART_MOCK_2, ECHART_MOCK_3, FlashMock, } from '../../mocks/index.js';
 const ReactECharts = WithSuspense(lazyWithPreload(() => import('echarts-for-react')), true);
 export const DashboardMock = () => {
-    return (_jsxs(_Fragment, { children: [_jsx(Box, { mb: 3, children: _jsx(FlashMock, {}) }), _jsxs(Box, { sx: {
-                    display: 'grid',
-                    gridTemplateColumns: '1fr 1fr 1fr',
-                    gap: 4,
-                }, children: [_jsxs(Box, { sx: {
-                            gridColumn: '1 / 3',
-                            minHeight: '200px',
-                        }, children: [_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'space-between',
-                                    paddingRight: 4,
-                                }, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '4px solid #28b899', paddingLeft: 2 }, children: "My latest work" }), _jsxs(Link, { children: ["View all work", _jsx(ArrowRightIcon, {})] })] }), _jsxs(Box, { sx: {
-                                    display: 'grid',
-                                    gridTemplateColumns: '1fr 1fr',
-                                    gap: 4,
-                                }, children: [_jsxs(Box, { sx: {
-                                            borderColor: 'border.default',
-                                            borderStyle: 'solid',
-                                            borderWidth: '1',
-                                            borderRadius: '2',
-                                            padding: 4,
-                                        }, children: [_jsxs(Text, { as: "h3", sx: { paddingBottom: 2 }, children: ["clouder ", _jsx(Label, { children: "Public" })] }), _jsxs(Text, { as: "p", sx: { color: 'fg.subtle', fontWeight: 'semibold' }, children: [_jsx(CloudIcon
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { mb: 3, children: _jsx(FlashMock, {}) }), _jsxs(Box, { display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: 4, children: [_jsxs(Box, { gridColumn: "1 / 3", minHeight: "200px", children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", paddingRight: 4, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '4px solid #28b899', paddingLeft: 2 }, children: "My latest work" }), _jsxs(Link, { children: ["View all work", _jsx(ArrowRightIcon, {})] })] }), _jsxs(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 4, children: [_jsxs(Box, { borderColor: "border.default", borderStyle: "solid", borderWidth: "1", borderRadius: "2", padding: 4, children: [_jsxs(Text, { as: "h3", sx: { paddingBottom: 2 }, children: ["clouder ", _jsx(Label, { children: "Public" })] }), _jsxs(Text, { as: "p", sx: { color: 'fg.subtle', fontWeight: 'semibold' }, children: [_jsx(CloudIcon
                                                     //                  sx={{ margin: "0 4px" }}
                                                     , {}), "Create, manage and share Kubernetes clusters."] }), _jsxs(LabelGroup, { sx: { paddingTop: 2, paddingBottom: 2 }, children: [_jsx(Label, { variant: "accent", children: "Kubernetes" }), _jsx(Label, { variant: "accent", children: "cloud" }), _jsx(Label, { variant: "accent", children: "kubernets-cluster" }), _jsx(Label, { variant: "accent", children: "datalayer" })] }), _jsxs(Text, { as: "p", sx: {
                                                     color: 'fg.subtle',
@@ -47,13 +26,7 @@ export const DashboardMock = () => {
                                                             //                    sx={{ marginRight: 1, marginBottom: "3px" }}
                                                             , {}), "3"] }), _jsxs(Text, { children: [_jsx(StarIcon
                                                             //                    sx={{ marginRight: 1, marginBottom: "3px" }}
-                                                            , {}), "11"] })] })] }), _jsxs(Box, { sx: {
-                                            borderColor: 'border.default',
-                                            borderStyle: 'solid',
-                                            borderWidth: '1',
-                                            borderRadius: '2',
-                                            padding: 4,
-                                        }, children: [_jsxs(Text, { as: "h3", sx: { paddingBottom: 2 }, children: ["jupyter-ui ", _jsx(Label, { children: "Public" })] }), _jsxs(Text, { as: "p", children: [_jsx(ReactJsIcon, { style: { margin: '0 4px' } }), "React.js components 100% compatible with Jupyter.", ' ', _jsx(Link, { href: "https://jupyter-ui-storybook.datalayer.tech", children: "https://jupyter-ui-storybook.datalayer.tech" })] }), _jsxs(LabelGroup, { sx: { paddingTop: 2, paddingBottom: 2 }, children: [_jsx(Label, { variant: "accent", children: "data-science" }), _jsx(Label, { variant: "accent", children: "data" }), _jsx(Label, { variant: "accent", children: "ui" }), _jsx(Label, { variant: "accent", children: "jupyter" }), _jsx(Label, { children: "+4" })] }), _jsxs(Text, { as: "p", sx: {
+                                                            , {}), "11"] })] })] }), _jsxs(Box, { borderColor: "border.default", borderStyle: "solid", borderWidth: "1", borderRadius: "2", padding: 4, children: [_jsxs(Text, { as: "h3", sx: { paddingBottom: 2 }, children: ["jupyter-ui ", _jsx(Label, { children: "Public" })] }), _jsxs(Text, { as: "p", children: [_jsx(ReactJsIcon, { style: { margin: '0 4px' } }), "React.js components 100% compatible with Jupyter.", ' ', _jsx(Link, { href: "https://jupyter-ui-storybook.datalayer.tech", children: "https://jupyter-ui-storybook.datalayer.tech" })] }), _jsxs(LabelGroup, { sx: { paddingTop: 2, paddingBottom: 2 }, children: [_jsx(Label, { variant: "accent", children: "data-science" }), _jsx(Label, { variant: "accent", children: "data" }), _jsx(Label, { variant: "accent", children: "ui" }), _jsx(Label, { variant: "accent", children: "jupyter" }), _jsx(Label, { children: "+4" })] }), _jsxs(Text, { as: "p", sx: {
                                                     color: 'fg.subtle',
                                                     '> *': { paddingLeft: 1, paddingRight: 1 },
                                                 }, children: [_jsxs(Text, { children: [_jsx(DotFillIcon
@@ -68,51 +41,12 @@ export const DashboardMock = () => {
                                                             //                    sx={{ marginRight: 1, marginBottom: "3px" }}
                                                             , {}), "3"] }), _jsxs(Text, { children: [_jsx(StarIcon
                                                             //                    sx={{ marginRight: 1, marginBottom: "3px" }}
-                                                            , {}), "11"] })] })] })] })] }), _jsxs(Box, { sx: {
-                            gridColumn: '3 / 4',
-                            gridRow: '1 / 3',
-                            minHeight: '200px',
-                        }, children: [_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'space-between',
-                                    paddingRight: 4,
-                                }, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '4px solid #28b899', paddingLeft: 2 }, children: "Usage" }), _jsxs(Link, { children: ["More Usage", _jsx(ArrowRightIcon, {})] })] }), _jsxs(Box, { sx: {
-                                    borderColor: 'border.default',
-                                    borderStyle: 'solid',
-                                    borderWidth: '1',
-                                    borderRadius: '2',
-                                    padding: 4,
-                                }, children: [_jsxs(Box, { sx: {
-                                            display: 'inline-flex',
-                                            flexDirection: 'row',
-                                            alignItems: 'center',
-                                        }, children: [_jsx(Text, { as: "h3", sx: { marginRight: '20px' }, children: "Kernels Activity" }), _jsxs(ActionMenu, { children: [_jsxs(ActionMenu.Button, { children: [_jsx(Box, { sx: { color: 'fg.muted', display: 'inline-block' }, children: "View:" }), ' ', 'All kernels'] }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsx(ActionList, { selectionVariant: "single", children: _jsx(ActionList.Item, { selected: true, children: "All kernels" }) }) })] })] }), _jsx(Text, { as: "h3", children: "Credits usage" }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle' }, children: "Amount today" }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle' }, children: "Balance yesterday" }), _jsx(Text, { as: "h3", children: "Last invoice" }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle', fontSize: '3', fontWeight: 'bold' }, children: "$216" })] })] }), _jsxs(Box, { sx: {
-                            gridColumn: '1 / 3',
-                            minHeight: '200px',
-                        }, children: [_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'space-between',
-                                    paddingRight: 4,
-                                }, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '4px solid #28b899', paddingLeft: 2 }, children: "Trending Notebooks" }), _jsxs(Link, { children: ["All Notebooks", _jsx(ArrowRightIcon, {})] })] }), _jsxs(Box, { sx: {
-                                    borderColor: 'border.default',
-                                    borderStyle: 'solid',
-                                    borderWidth: '1',
-                                    borderRadius: '2',
-                                    display: 'grid',
-                                    gridTemplateColumns: '1fr 1fr',
+                                                            , {}), "11"] })] })] })] })] }), _jsxs(Box, { gridColumn: "3 / 4", gridRow: "1 / 3", minHeight: "200px", children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", paddingRight: 4, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '4px solid #28b899', paddingLeft: 2 }, children: "Usage" }), _jsxs(Link, { children: ["More Usage", _jsx(ArrowRightIcon, {})] })] }), _jsxs(Box, { borderColor: "border.default", borderStyle: "solid", borderWidth: "1", borderRadius: "2", padding: 4, children: [_jsxs(Box, { display: "inline-flex", flexDirection: "row", alignItems: "center", children: [_jsx(Text, { as: "h3", sx: { marginRight: '20px' }, children: "Kernels Activity" }), _jsxs(ActionMenu, { children: [_jsxs(ActionMenu.Button, { children: [_jsx(Box, { color: "fg.muted", display: "inline-block", children: "View:" }), ' ', 'All kernels'] }), _jsx(ActionMenu.Overlay, { width: "auto", children: _jsx(ActionList, { selectionVariant: "single", children: _jsx(ActionList.Item, { selected: true, children: "All kernels" }) }) })] })] }), _jsx(Text, { as: "h3", children: "Credits usage" }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle' }, children: "Amount today" }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle' }, children: "Balance yesterday" }), _jsx(Text, { as: "h3", children: "Last invoice" }), _jsx(Text, { as: "p", sx: { color: 'fg.subtle', fontSize: '3', fontWeight: 'bold' }, children: "$216" })] })] }), _jsxs(Box, { gridColumn: "1 / 3", minHeight: "200px", children: [_jsxs(Box, { display: "flex", alignItems: "center", justifyContent: "space-between", paddingRight: 4, children: [_jsx(Text, { as: "h2", sx: { borderLeft: '4px solid #28b899', paddingLeft: 2 }, children: "Trending Notebooks" }), _jsxs(Link, { children: ["All Notebooks", _jsx(ArrowRightIcon, {})] })] }), _jsxs(Box, { borderColor: "border.default", borderStyle: "solid", borderWidth: "1", borderRadius: "2", display: "grid", gridTemplateColumns: "1fr 1fr", sx: {
                                     '> :not(:last-child)': {
                                         borderRightColor: 'border.default',
                                         borderRightStyle: 'solid',
                                         borderRightWidth: '1',
                                     },
-                                }, children: [_jsxs(Box, { sx: {
-                                            padding: 4,
-                                        }, children: [_jsx(Text, { as: "h3", children: "Notebook name abc" }), _jsx(Text, { sx: { color: 'fg.subtle' }, children: "Subtitle comes here" }), _jsxs(Box, { sx: { height: '300px', maxWidth: '380px' }, children: [_jsx(ReactECharts, { option: ECHART_MOCK_1 }), ";"] }), _jsxs(Text, { as: "p", sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Link, { children: "Link to somewhere" }), _jsxs(Link, { children: ["Second link", _jsx(LinkIcon, {})] })] })] }), _jsxs(Box, { sx: {
-                                            padding: 4,
-                                        }, children: [_jsx(Text, { as: "h3", children: "Notebook name abc" }), _jsx(Text, { sx: { color: 'fg.subtle' }, children: "Subtitle comes here" }), _jsxs(Box, { sx: { height: '300px', maxWidth: '380px' }, children: [_jsx(ReactECharts, { option: ECHART_MOCK_3 }), ";"] }), _jsxs(Text, { as: "p", sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Link, { children: "Link to somewhere" }), _jsxs(Link, { children: ["Second link", _jsx(LinkIcon, {})] })] })] }), _jsxs(Box, { sx: {
-                                            padding: 4,
-                                        }, children: [_jsx(Text, { as: "h3", children: "Notebook name abc" }), _jsx(Text, { sx: { color: 'fg.subtle' }, children: "Subtitle comes here" }), _jsxs(Box, { sx: { height: '300px', maxWidth: '380px' }, children: [_jsx(ReactECharts, { option: ECHART_MOCK_2 }), ";"] }), _jsxs(Text, { as: "p", sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Link, { children: "Link to somewhere" }), _jsxs(Link, { children: ["Second link", _jsx(LinkIcon, {})] })] })] })] })] })] })] }));
+                                }, children: [_jsxs(Box, { padding: 4, children: [_jsx(Text, { as: "h3", children: "Notebook name abc" }), _jsx(Text, { sx: { color: 'fg.subtle' }, children: "Subtitle comes here" }), _jsxs(Box, { height: "300px", maxWidth: "380px", children: [_jsx(ReactECharts, { option: ECHART_MOCK_1 }), ";"] }), _jsxs(Text, { as: "p", sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Link, { children: "Link to somewhere" }), _jsxs(Link, { children: ["Second link", _jsx(LinkIcon, {})] })] })] }), _jsxs(Box, { padding: 4, children: [_jsx(Text, { as: "h3", children: "Notebook name abc" }), _jsx(Text, { sx: { color: 'fg.subtle' }, children: "Subtitle comes here" }), _jsxs(Box, { height: "300px", maxWidth: "380px", children: [_jsx(ReactECharts, { option: ECHART_MOCK_3 }), ";"] }), _jsxs(Text, { as: "p", sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Link, { children: "Link to somewhere" }), _jsxs(Link, { children: ["Second link", _jsx(LinkIcon, {})] })] })] }), _jsxs(Box, { padding: 4, children: [_jsx(Text, { as: "h3", children: "Notebook name abc" }), _jsx(Text, { sx: { color: 'fg.subtle' }, children: "Subtitle comes here" }), _jsxs(Box, { height: "300px", maxWidth: "380px", children: [_jsx(ReactECharts, { option: ECHART_MOCK_2 }), ";"] }), _jsxs(Text, { as: "p", sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsx(Link, { children: "Link to somewhere" }), _jsxs(Link, { children: ["Second link", _jsx(LinkIcon, {})] })] })] })] })] })] })] }));
 };
 export default DashboardMock;

package/lib/mocks/views/FormMock.js

@@ -4,7 +4,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
  * Distributed under the terms of the Modified BSD License.
  */
 import { useState } from 'react';
-import { Box, FormControl, TextInputWithTokens, Autocomplete, Select, Textarea, Heading, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { FormControl, TextInputWithTokens, Autocomplete, Select, Textarea, Heading, } from '@primer/react';
 export const FormMock = (props) => {
     const { title } = props;
     const [tokens, setTokens] = useState([
@@ -15,7 +16,7 @@ export const FormMock = (props) => {
     const onTokenRemove = tokenId => {
         setTokens(tokens.filter(token => token.id !== tokenId));
     };
-    return (_jsxs(Box, { display: "grid", sx: { gap: 3 }, children: [_jsx(Heading, { children: title }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "TextInputWithTokens" }), _jsx(TextInputWithTokens, { onTokenRemove: onTokenRemove, tokens: tokens })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Autocomplete" }), _jsxs(Autocomplete, { children: [_jsx(Autocomplete.Input, { block: true }), _jsx(Autocomplete.Overlay, { children: _jsx(Autocomplete.Menu, { items: [
+    return (_jsxs(Box, { display: "grid", gap: 3, children: [_jsx(Heading, { children: title }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "TextInputWithTokens" }), _jsx(TextInputWithTokens, { onTokenRemove: onTokenRemove, tokens: tokens })] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Autocomplete" }), _jsxs(Autocomplete, { children: [_jsx(Autocomplete.Input, { block: true }), _jsx(Autocomplete.Overlay, { children: _jsx(Autocomplete.Menu, { items: [
                                         { text: 'css', id: '0' },
                                         { text: 'css-in-js', id: '1' },
                                         { text: 'styled-system', id: '2' },

package/lib/mocks/views/TableMock.js

@@ -3,7 +3,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { Box, LabelGroup, ActionMenu, ActionList, IconButton, Label, RelativeTime, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { LabelGroup, ActionMenu, ActionList, IconButton, Label, RelativeTime, } from '@primer/react';
 import { Table, DataTable } from '@primer/react/experimental';
 import { KebabHorizontalIcon, DownloadIcon } from '@primer/octicons-react';
 import { VisuallyHidden } from './../../components/display/index.js';
@@ -101,7 +102,7 @@ function uppercase(input) {
 }
 export const TableMock = (props) => {
     const { title } = props;
-    return (_jsx(Box, { display: "grid", sx: { gap: 3 }, children: _jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h2", id: "repositories", children: title }), _jsx(Table.Subtitle, { as: "p", id: "repositories-subtitle", children: "A subtitle could appear here to give extra context to the data." }), _jsx(DataTable, { "aria-labelledby": "repositories", "aria-describedby": "repositories-subtitle", data: data, columns: [
+    return (_jsx(Box, { display: "grid", gap: 3, children: _jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h2", id: "repositories", children: title }), _jsx(Table.Subtitle, { as: "p", id: "repositories-subtitle", children: "A subtitle could appear here to give extra context to the data." }), _jsx(DataTable, { "aria-labelledby": "repositories", "aria-describedby": "repositories-subtitle", data: data, columns: [
                         {
                             header: 'Repository',
                             field: 'name',

package/lib/mocks/views/WipMock.js

@@ -3,7 +3,8 @@ 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.
  */
-import { Box, PageHeader, Flash, PageLayout } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { PageHeader, Flash, PageLayout } from '@primer/react';
 import { ConstructionIcon } from '@datalayer/icons-react';
 export const WipMock = (props) => {
     const { title } = props;

package/lib/models/IAMProviderLinked.d.ts

@@ -1,6 +1,15 @@
 import { JSONObject } from '@lumino/coreutils';
 import { IIAMProviderName } from './IAMProvidersSpecs';
+/**
+ * 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 declare function asIAMProviderLinked(iamProvider: any): IIAMProviderLinked;
+/** Whether the user has linked this provider in IAM. */
+export declare function hasLinkedIAMProvider(user: {
+    iamProviders?: Array<IIAMProviderLinked>;
+} | null | undefined, name: IIAMProviderName): boolean;
 export type IIAMProviderLinked = {
     iamProviderName: IIAMProviderName;
     linkedAccount: JSONObject;

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/Person.d.ts

@@ -0,0 +1,9 @@
+/** The signed-in person, as a shell needs one. */
+export type Person = {
+    uid: string;
+    handle: string;
+    displayName: string;
+    avatarIcon?: string;
+};
+/** The person in IAM's `GET /api/iam/v1/me` answer (`me`); undefined without a uid and a handle. */
+export declare function personOf(raw: unknown): Person | undefined;

package/lib/models/Person.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/** The person in IAM's `GET /api/iam/v1/me` answer (`me`); undefined without a uid and a handle. */
+export function personOf(raw) {
+    if (!raw || typeof raw !== 'object') {
+        return undefined;
+    }
+    const user = raw;
+    const handle = typeof user.handle_s === 'string' ? user.handle_s : '';
+    const uid = typeof user.uid === 'string' ? user.uid : '';
+    if (!handle || !uid) {
+        return undefined;
+    }
+    const names = [user.first_name_t, user.last_name_t].filter((part) => typeof part === 'string' && part.trim() !== '');
+    return {
+        uid,
+        handle,
+        displayName: names.length ? names.join(' ') : handle,
+        avatarIcon: typeof user.avatar_icon_s === 'string' ? user.avatar_icon_s : undefined,
+    };
+}

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/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/otel/views/OtelLive.js

@@ -13,7 +13,8 @@ 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, Text, Button, Label } from '@primer/react';
+import { Box } 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';
 import { useOtelTraces, useOtelTrace, useOtelLogs, useOtelMetrics, useOtelServices, useOtelWebSocket, } from '../hooks/index.js';
@@ -287,70 +288,11 @@ export const OtelLive = ({ baseUrl = getOtelConsumeUrl(), wsBaseUrl, token, auto
             return ts >= s && ts <= e;
         });
     }, [metrics, isRangeActive, rangeStart, rangeEnd]);
-    return (_jsxs(Box, { sx: {
-            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, { sx: { display: 'flex', alignItems: 'center', gap: 0 }, children: [_jsx(Box, { sx: { 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(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'
                                 ? tracesLoading
                                 : signal === 'logs'
                                     ? logsLoading
-                                    : metricsLoading }) }), _jsx(Box, { sx: { pr: 2, flexShrink: 0 }, children: _jsx(Label, { variant: wsConnected ? 'success' : 'secondary', size: "small", children: wsConnected ? '● Live' : '○ Polling' }) })] }), timelineBounds && rangeStart && rangeEnd && (_jsx(Box, { sx: {
-                    px: 3,
-                    pt: 2,
-                    pb: 1,
-                    borderBottom: '1px solid',
-                    borderColor: 'border.default',
-                    bg: 'canvas.subtle',
-                    flexShrink: 0,
-                    position: 'relative',
-                    zIndex: 0,
-                }, children: _jsx(OtelTimelineRangeSlider, { timelineStart: timelineBounds.start, timelineEnd: timelineBounds.end, selectedStart: rangeStart, selectedEnd: rangeEnd, onRangeChange: handleRangeChange, histogram: histogram, height: 48, tickCount: 6 }) })), _jsxs(Box, { sx: { display: 'flex', flex: 1, minHeight: 0, overflow: 'hidden' }, children: [_jsxs(Box, { sx: {
-                            display: 'flex',
-                            flexDirection: 'column',
-                            flex: hasDetail ? '0 0 55%' : '1 1 100%',
-                            minHeight: 0,
-                            overflow: 'hidden',
-                        }, children: [signal === 'traces' && (_jsx(OtelTracesList, { spans: filteredTraces, loading: tracesLoading, selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect })), signal === 'logs' && (_jsx(OtelLogsList, { logs: filteredLogs, loading: logsLoading, selectedLogIndex: selectedLogIdx, onSelectLog: handleLogSelect })), signal === 'metrics' && (_jsx(OtelMetricsList, { metrics: filteredMetrics, loading: metricsLoading }))] }), hasDetail && (_jsxs(Box, { sx: {
-                            flex: '0 0 45%',
-                            minHeight: 0,
-                            overflow: 'auto',
-                            borderLeft: '1px solid',
-                            borderColor: 'border.default',
-                        }, children: [signal === 'traces' && selectedSpan && (_jsx(OtelSpanDetail, { span: selectedSpan, traceSpans: traceSpans ?? undefined, onClose: handleCloseDetail })), signal === 'logs' && selectedLogIdx !== null && logs && (_jsxs(Box, { sx: { p: 3 }, children: [_jsxs(Box, { sx: {
-                                            display: 'flex',
-                                            justifyContent: 'space-between',
-                                            mb: 3,
-                                        }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: "Log Detail" }), _jsx(Button, { size: "small", variant: "invisible", onClick: handleCloseDetail, children: "\u2715" })] }), _jsx(Box, { as: "pre", sx: {
-                                            m: 0,
-                                            fontSize: 1,
-                                            fontFamily: 'mono',
-                                            whiteSpace: 'pre-wrap',
-                                            wordBreak: 'break-word',
-                                        }, children: JSON.stringify(logs[selectedLogIdx], null, 2) })] }))] }))] }), signal === 'traces' && selectedSpan && spanTree.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
-                            display: 'flex',
-                            gap: 1,
-                            px: 3,
-                            py: 1,
-                            bg: 'canvas.subtle',
-                            borderTop: '1px solid',
-                            borderColor: 'border.default',
-                            flexShrink: 0,
-                        }, children: [_jsx(Button, { size: "small", variant: bottomPane === 'timeline' ? 'primary' : 'invisible', leadingVisual: ClockIcon, onClick: () => toggleBottomPane('timeline'), children: "Timeline" }), _jsx(Button, { size: "small", variant: bottomPane === 'tree' ? 'primary' : 'invisible', leadingVisual: GitBranchIcon, onClick: () => toggleBottomPane('tree'), children: "Span Tree" })] }), bottomPane && (_jsxs(Box, { sx: {
-                            height: 260,
-                            overflow: 'auto',
-                            borderTop: '1px solid',
-                            borderColor: 'border.default',
-                            flexShrink: 0,
-                        }, children: [bottomPane === 'timeline' && (_jsx(OtelTimeline, { spans: traceSpans ?? [], selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect })), bottomPane === 'tree' && (_jsx(OtelSpanTree, { spans: spanTree, selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect, defaultExpandDepth: 3 }))] }))] }))] }));
+                                    : metricsLoading }) }), _jsx(Box, { pr: 2, flexShrink: 0, children: _jsx(Label, { variant: wsConnected ? 'success' : 'secondary', size: "small", children: wsConnected ? '● Live' : '○ Polling' }) })] }), timelineBounds && rangeStart && rangeEnd && (_jsx(Box, { px: 3, pt: 2, pb: 1, borderBottom: "1px solid", borderColor: "border.default", bg: "canvas.subtle", flexShrink: 0, position: "relative", zIndex: 0, children: _jsx(OtelTimelineRangeSlider, { timelineStart: timelineBounds.start, timelineEnd: timelineBounds.end, selectedStart: rangeStart, selectedEnd: rangeEnd, onRangeChange: handleRangeChange, histogram: histogram, height: 48, tickCount: 6 }) })), _jsxs(Box, { display: "flex", flex: 1, minHeight: 0, overflow: "hidden", children: [_jsxs(Box, { display: "flex", flexDirection: "column", flex: hasDetail ? '0 0 55%' : '1 1 100%', minHeight: 0, overflow: "hidden", children: [signal === 'traces' && (_jsx(OtelTracesList, { spans: filteredTraces, loading: tracesLoading, selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect })), signal === 'logs' && (_jsx(OtelLogsList, { logs: filteredLogs, loading: logsLoading, selectedLogIndex: selectedLogIdx, onSelectLog: handleLogSelect })), signal === 'metrics' && (_jsx(OtelMetricsList, { metrics: filteredMetrics, loading: metricsLoading }))] }), hasDetail && (_jsxs(Box, { flex: "0 0 45%", minHeight: 0, overflow: "auto", borderLeft: "1px solid", borderColor: "border.default", children: [signal === 'traces' && selectedSpan && (_jsx(OtelSpanDetail, { span: selectedSpan, traceSpans: traceSpans ?? undefined, onClose: handleCloseDetail })), signal === 'logs' && selectedLogIdx !== null && logs && (_jsxs(Box, { p: 3, children: [_jsxs(Box, { display: "flex", justifyContent: "space-between", mb: 3, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 2 }, children: "Log Detail" }), _jsx(Button, { size: "small", variant: "invisible", onClick: handleCloseDetail, children: "\u2715" })] }), _jsx(Box, { as: "pre", m: 0, fontSize: 1, fontFamily: "mono", whiteSpace: "pre-wrap", wordBreak: "break-word", children: JSON.stringify(logs[selectedLogIdx], null, 2) })] }))] }))] }), signal === 'traces' && selectedSpan && spanTree.length > 0 && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", gap: 1, px: 3, py: 1, bg: "canvas.subtle", borderTop: "1px solid", borderColor: "border.default", flexShrink: 0, children: [_jsx(Button, { size: "small", variant: bottomPane === 'timeline' ? 'primary' : 'invisible', leadingVisual: ClockIcon, onClick: () => toggleBottomPane('timeline'), children: "Timeline" }), _jsx(Button, { size: "small", variant: bottomPane === 'tree' ? 'primary' : 'invisible', leadingVisual: GitBranchIcon, onClick: () => toggleBottomPane('tree'), children: "Span Tree" })] }), bottomPane && (_jsxs(Box, { height: 260, overflow: "auto", borderTop: "1px solid", borderColor: "border.default", flexShrink: 0, children: [bottomPane === 'timeline' && (_jsx(OtelTimeline, { spans: traceSpans ?? [], selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect })), bottomPane === 'tree' && (_jsx(OtelSpanTree, { spans: spanTree, selectedSpanId: selectedSpan?.span_id, onSelectSpan: handleSpanSelect, defaultExpandDepth: 3 }))] }))] }))] }));
 };
 // ── Client-side filter helpers ──────────────────────────────────────
 function filterSpans(spans, q) {

package/lib/otel/views/OtelLiveSpans.js

@@ -16,7 +16,8 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
  * @module otel/views/OtelLiveSpans
  */
 import { useMemo, useState } from 'react';
-import { ActionList, ActionMenu, Box, Button, Text } from '@primer/react';
+import { Box } 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';
 import { spansOfService } from '../live/filter.js';
@@ -93,22 +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": "", sx: {
-            border: '1px solid',
-            borderColor: 'border.default',
-            borderRadius: 2,
-            bg: 'canvas.default',
-            color: 'fg.default',
-            minWidth: 0,
-        }, children: [_jsxs(Box, { role: "toolbar", "aria-label": label, sx: {
-                    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, { sx: { flex: 1 } }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, "data-otel-span-count": "", children: [rows.length === shown.length
+    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
                                 ? `${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);
@@ -123,17 +109,6 @@ export const OtelLiveSpans = ({ tracer, spans: given, service, facets = DEFAULT_
                         }, "data-otel-clear": "", children: "Clear" }), _jsx(Button, { size: "small", leadingVisual: DownloadIcon, disabled: !recorded.length, onClick: () => download(exportName, {
                             exportedAt: new Date().toISOString(),
                             spans: [...recorded],
-                        }), "data-otel-export": "", children: "Export" })] }), _jsxs(Box, { sx: {
-                    display: side ? 'grid' : 'block',
-                    gridTemplateColumns: side
-                        ? 'minmax(0, 3fr) minmax(0, 2fr)'
-                        : undefined,
-                }, children: [_jsx(Box, { sx: { maxHeight, overflowY: 'auto', minWidth: 0 }, children: _jsx(OtelTracesList, { spans: rows, selectedSpanId: selectedSpanId, onSelectSpan: span => setSelectedSpanId(span.span_id), emptyText: emptyText, compact: compact, defaultExpanded: true, renderSpanMark: renderSpanMark, describeSpan: describeSpan }) }), selectedSpan && (_jsx(Box, { "data-otel-live-detail": "", sx: {
-                            maxHeight,
-                            overflowY: 'auto',
-                            minWidth: 0,
-                            borderTop: side ? 'none' : '1px solid',
-                            borderColor: 'border.default',
-                        }, children: _jsx(OtelSpanDetail, { span: selectedSpan, traceSpans: traceSpans, onClose: () => setSelectedSpanId(null) }) }))] })] }));
+                        }), "data-otel-export": "", children: "Export" })] }), _jsxs(Box, { display: side ? 'grid' : 'block', gridTemplateColumns: side ? 'minmax(0, 3fr) minmax(0, 2fr)' : undefined, children: [_jsx(Box, { maxHeight: maxHeight, overflowY: "auto", minWidth: 0, children: _jsx(OtelTracesList, { spans: rows, selectedSpanId: selectedSpanId, onSelectSpan: span => setSelectedSpanId(span.span_id), emptyText: emptyText, compact: compact, defaultExpanded: true, renderSpanMark: renderSpanMark, describeSpan: describeSpan }) }), selectedSpan && (_jsx(Box, { "data-otel-live-detail": "", maxHeight: maxHeight, overflowY: "auto", minWidth: 0, borderTop: side ? 'none' : '1px solid', borderColor: "border.default", children: _jsx(OtelSpanDetail, { span: selectedSpan, traceSpans: traceSpans, onClose: () => setSelectedSpanId(null) }) }))] })] }));
 };
 export default OtelLiveSpans;