@datalayer/core 1.1.60 → 1.2.10

package/lib/views/mcp/TraceTimeline.js

@@ -0,0 +1,132 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading, Label, Text, Truncate } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { durationLabel } from './format.js';
+/**
+ * The narrowest a bar is drawn, as a percentage of the run.
+ *
+ * A 2ms authorization check inside a ten-minute run is 0.003% wide, which is
+ * nothing at all — and the check happening is exactly what somebody reading
+ * a trace is looking for. It is drawn as a mark rather than dropped; the
+ * label carries the real duration.
+ */
+export const MIN_BAR_PERCENT = 0.75;
+/**
+ * The instants a span covers, as epoch milliseconds.
+ *
+ * `end` is never before `start`, and one comparison is enough for both ways
+ * that happens: an end that will not parse is `NaN`, and every comparison
+ * with `NaN` is false, so it falls to `start` along with an end that is
+ * merely backwards. A `Number.isFinite` check beside it reads as belt and
+ * braces but is dead code — which is what the mutation run showed.
+ *
+ * The `NaN` case is the one that matters. A single unparseable timestamp
+ * left in would poison the window every other bar is measured against, and
+ * the timeline would go on drawing — as a column of identical marks.
+ */
+const extentOf = (span) => {
+    const start = Date.parse(span.start_time);
+    const end = Date.parse(span.end_time);
+    return { start, end: end > start ? end : start };
+};
+/**
+ * The spans of a trace, flattened depth-first and placed against one clock.
+ *
+ * Three cases are not the ordinary one and each is drawn rather than
+ * dropped, because a trace a person opens is a trace they need to read:
+ *
+ * - a span whose timestamps do not parse is placed at the left as a mark —
+ *   it happened, we cannot say when;
+ * - a trace with no duration at all — one instant, or a single unfinished
+ *   span — gives every bar the full width, since there is nothing to divide;
+ * - a child that starts before its parent, which clock skew between two
+ *   services makes real, is clamped into the run rather than drawn off the
+ *   end of it.
+ */
+export const timelineRows = (tree) => {
+    const flat = [];
+    const walk = (nodes, depth) => {
+        for (const node of nodes) {
+            flat.push({ span: node.span, depth });
+            walk(node.children, depth + 1);
+        }
+    };
+    walk(tree, 0);
+    let first = Number.POSITIVE_INFINITY;
+    let last = Number.NEGATIVE_INFINITY;
+    for (const { span } of flat) {
+        const { start, end } = extentOf(span);
+        if (Number.isFinite(start)) {
+            first = Math.min(first, start);
+            last = Math.max(last, end);
+        }
+    }
+    const total = last - first;
+    return flat.map(({ span, depth }) => {
+        const { start, end } = extentOf(span);
+        if (!Number.isFinite(start) || !Number.isFinite(total) || total <= 0) {
+            // No clock to divide: an unplaceable span is a mark, and a run with no
+            // duration is one bar across.
+            const placeable = Number.isFinite(start) && Number.isFinite(total);
+            return { span, depth, left: 0, width: placeable ? 100 : MIN_BAR_PERCENT };
+        }
+        // The width is settled first, then the bar is slid left far enough to
+        // hold it: a zero-length span at the very end of a run is a mark that
+        // has to fit inside the track, not one hanging off its right edge.
+        const width = Math.max(MIN_BAR_PERCENT, ((end - start) / total) * 100);
+        const left = Math.min(100 - width, Math.max(0, ((start - first) / total) * 100));
+        return { span, depth, left, width };
+    });
+};
+/**
+ * A colour per service, so the four processes are told apart at a glance.
+ *
+ * Named by what the service *is* rather than by its span prefix: the same
+ * palette has to hold when a fifth service starts emitting, and the fallback
+ * is a neutral rather than a collision.
+ */
+export const SERVICE_TONE = {
+    'jupyter-mcp-server': 'accent.emphasis',
+    'datalayer-durable': 'done.emphasis',
+    'datalayer-runtimes': 'success.emphasis',
+    'datalayer-iam': 'severe.emphasis',
+};
+/** The bar colour of a span, by the service that emitted it and how it ended. */
+export const toneOf = (span) => {
+    if (span.status_code === 'STATUS_CODE_ERROR' || span.status_code === 'ERROR') {
+        return 'danger.emphasis';
+    }
+    return SERVICE_TONE[span.service_name] ?? 'neutral.emphasis';
+};
+export const TraceTimeline = ({ tree, traceId, live = false, }) => {
+    const rows = timelineRows(tree);
+    if (rows.length === 0) {
+        return (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: live
+                ? 'No spans yet. They arrive as the services report them.'
+                : 'This run reported no spans. A run started before tracing reached the service that ran it has none.' }));
+    }
+    return (_jsxs(Box, { sx: { display: 'grid', gap: 1, minWidth: 0 }, children: [traceId && (_jsx(Text, { sx: { fontFamily: 'mono', fontSize: 0, color: 'fg.muted' }, children: traceId })), rows.map(row => (_jsxs(Box, { sx: {
+                    display: 'grid',
+                    gridTemplateColumns: 'minmax(0, 14rem) 1fr auto',
+                    gap: 2,
+                    alignItems: 'center',
+                    minWidth: 0,
+                }, children: [_jsx(Box, { sx: { pl: row.depth, minWidth: 0 }, children: _jsx(Truncate, { title: `${row.span.span_name} · ${row.span.service_name}`, sx: { fontSize: 0, maxWidth: '100%' }, children: row.span.span_name }) }), _jsx(Box, { sx: {
+                            position: 'relative',
+                            height: '0.75rem',
+                            bg: 'canvas.subtle',
+                            borderRadius: 1,
+                            minWidth: 0,
+                        }, children: _jsx(Box, { sx: {
+                                position: 'absolute',
+                                top: 0,
+                                bottom: 0,
+                                left: `${row.left}%`,
+                                width: `${row.width}%`,
+                                bg: toneOf(row.span),
+                                borderRadius: 1,
+                            }, title: `${row.span.service_name} · ${durationLabel(row.span.duration_ms)}` }) }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', fontVariantNumeric: 'tabular-nums' }, children: durationLabel(row.span.duration_ms) })] }, row.span.span_id)))] }));
+};
+/** The timeline under its own heading, as the Runs detail draws it. */
+export const TraceTimelineSection = (props) => (_jsxs(Box, { children: [_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', mb: 2 }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 1 }, children: "Where the time went" }), props.live && (_jsx(Label, { size: "small", variant: "success", children: "Live" }))] }), _jsx(TraceTimeline, { ...props })] }));
+export default TraceTimeline;

package/lib/views/mcp/format.d.ts

@@ -0,0 +1,25 @@
+/**
+ * The small readings every MCP surface shares: how long ago, how long it
+ * took, and whether a client is still there.
+ *
+ * Plain functions with no React in them, so the wording of "4m ago" is one
+ * decision rather than one per view.
+ *
+ * @module views/mcp/format
+ */
+/** A client that called within this window is drawn as active. */
+export declare const MCP_ACTIVE_WINDOW_MS: number;
+/**
+ * A client idle longer than this has left the activity answer, and its card
+ * leaves the home grid — the same window the gateway bounds `/activity` by.
+ */
+export declare const MCP_ACTIVITY_WINDOW_MS: number;
+/** Where a client is, from when it last called. */
+export type McpClientStatus = 'active' | 'idle' | 'disconnected';
+export declare const clientStatusOf: (lastCallAt: string | null | undefined, now?: number) => McpClientStatus;
+/** How long ago a moment was, in the words the home page uses. */
+export declare const timeAgo: (iso: string | null | undefined, now?: number) => string;
+/** A duration in the unit that reads: milliseconds, seconds, minutes. */
+export declare const durationLabel: (milliseconds: number | null | undefined) => string;
+/** A count in the page's terms: `1 call`, `12 calls`, `no call`. */
+export declare const plural: (count: number, singular: string, many?: string) => string;

package/lib/views/mcp/format.js

@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The small readings every MCP surface shares: how long ago, how long it
+ * took, and whether a client is still there.
+ *
+ * Plain functions with no React in them, so the wording of "4m ago" is one
+ * decision rather than one per view.
+ *
+ * @module views/mcp/format
+ */
+/** A client that called within this window is drawn as active. */
+export const MCP_ACTIVE_WINDOW_MS = 5 * 60_000;
+/**
+ * A client idle longer than this has left the activity answer, and its card
+ * leaves the home grid — the same window the gateway bounds `/activity` by.
+ */
+export const MCP_ACTIVITY_WINDOW_MS = 30 * 60_000;
+export const clientStatusOf = (lastCallAt, now = Date.now()) => {
+    if (!lastCallAt) {
+        // A grant that has never been used is connected but has done nothing.
+        return 'idle';
+    }
+    const at = Date.parse(lastCallAt);
+    if (Number.isNaN(at)) {
+        return 'idle';
+    }
+    const age = now - at;
+    if (age <= MCP_ACTIVE_WINDOW_MS) {
+        return 'active';
+    }
+    return age <= MCP_ACTIVITY_WINDOW_MS ? 'idle' : 'disconnected';
+};
+/** How long ago a moment was, in the words the home page uses. */
+export const timeAgo = (iso, now = Date.now()) => {
+    if (!iso) {
+        return '';
+    }
+    const at = Date.parse(iso);
+    if (Number.isNaN(at)) {
+        return '';
+    }
+    const seconds = Math.max(0, (now - at) / 1000);
+    if (seconds < 60) {
+        return 'just now';
+    }
+    if (seconds < 3600) {
+        return `${Math.floor(seconds / 60)}m ago`;
+    }
+    if (seconds < 86400) {
+        return `${Math.floor(seconds / 3600)}h ago`;
+    }
+    return `${Math.floor(seconds / 86400)}d ago`;
+};
+/** A duration in the unit that reads: milliseconds, seconds, minutes. */
+export const durationLabel = (milliseconds) => {
+    if (milliseconds === null || milliseconds === undefined) {
+        return '';
+    }
+    if (milliseconds < 1000) {
+        return `${Math.round(milliseconds)}ms`;
+    }
+    if (milliseconds < 60_000) {
+        return `${(milliseconds / 1000).toFixed(1)}s`;
+    }
+    const minutes = Math.floor(milliseconds / 60_000);
+    const seconds = Math.round((milliseconds % 60_000) / 1000);
+    return `${minutes}m ${seconds}s`;
+};
+/** A count in the page's terms: `1 call`, `12 calls`, `no call`. */
+export const plural = (count, singular, many = `${singular}s`) => `${count} ${count === 1 ? singular : many}`;

package/lib/views/mcp/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * The MCP surfaces, as views the application composes: the dashboard, the
+ * setup page, the connected agents, the audit log, the observability panes,
+ * the effective policy and the organization's console.
+ *
+ * Every one of them owns its data and its states and nothing about routing,
+ * which is what lets the web application, JupyterLab, VS Code and Desktop
+ * draw the same page.
+ *
+ * @module views/mcp
+ */
+export * from './types';
+export * from './format';
+export * from './McpDashboard';
+export * from './McpHome';
+export * from './ConnectedAgents';
+export * from './RunDetail';
+export * from './NotebookRuns';
+export * from './AlertDestinations';
+export * from './AlertRules';
+export * from './OrganizationPolicy';
+export * from './PersonalPolicy';
+export * from './PolicyForm';
+export * from './PolicyHistory';
+export * from './TeamPolicies';
+export * from './ServiceAgents';
+export * from './AuditLog';
+export * from './McpObservability';
+export * from './Policies';
+export * from './OrganizationUsage';
+export * from './EnterpriseConsole';
+export * from './TraceTimeline';
+export * from './ApprovalQueue';
+export * from './ToolAccess';

package/lib/views/mcp/index.js

@@ -0,0 +1,42 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * The MCP surfaces, as views the application composes: the dashboard, the
+ * setup page, the connected agents, the audit log, the observability panes,
+ * the effective policy and the organization's console.
+ *
+ * Every one of them owns its data and its states and nothing about routing,
+ * which is what lets the web application, JupyterLab, VS Code and Desktop
+ * draw the same page.
+ *
+ * @module views/mcp
+ */
+export * from './types.js';
+export * from './format.js';
+export * from './McpDashboard.js';
+export * from './McpHome.js';
+export * from './ConnectedAgents.js';
+export * from './RunDetail.js';
+export * from './NotebookRuns.js';
+export * from './AlertDestinations.js';
+export * from './AlertRules.js';
+export * from './OrganizationPolicy.js';
+export * from './PersonalPolicy.js';
+export * from './PolicyForm.js';
+export * from './PolicyHistory.js';
+export * from './TeamPolicies.js';
+export * from './ServiceAgents.js';
+export * from './AuditLog.js';
+export * from './McpObservability.js';
+export * from './Policies.js';
+export * from './OrganizationUsage.js';
+export * from './EnterpriseConsole.js';
+export * from './TraceTimeline.js';
+export * from './ApprovalQueue.js';
+export * from './ToolAccess.js';

package/lib/views/mcp/types.d.ts

@@ -0,0 +1,66 @@
+/**
+ * What every MCP view is given by the application that draws it.
+ *
+ * Two things a Core view does not decide for itself: the words for a
+ * failure, and the addresses to link to. Both belong to the application —
+ * the web application says "Sign in to see your agents" and routes at
+ * `/audit`, JupyterLab says something else and routes somewhere else — so
+ * they arrive as props rather than as a second copy of the same catalog
+ * inside Core.
+ *
+ * The classification itself lives once, in the application, beside its
+ * specification: `ui/src/views/mcp/mcpErrorState.ts` and its spec.
+ *
+ * @module views/mcp/types
+ */
+/** What a failed request actually was, in the reader's terms. */
+export type McpErrorReason = 'unauthenticated' | 'forbidden' | 'not-found' | 'unavailable' | 'unknown';
+export interface McpErrorState {
+    reason: McpErrorReason;
+    heading: string;
+    description: string;
+    /** Whether retrying in place could plausibly succeed. */
+    retryable: boolean;
+}
+/**
+ * Describe a failure in terms of what the reader was looking at; `subject`
+ * names it as it appears on screen ("Connected agents", "Audit").
+ */
+export type McpErrorStateFn = (error: unknown, subject: string) => McpErrorState;
+/**
+ * Where the MCP surfaces live in the application drawing them.
+ *
+ * A view links onward — a call to its audit row, an agent to its runs — and
+ * must not invent the addresses; the application owns its routing.
+ */
+/**
+ * Where an application puts the surfaces these views link to.
+ *
+ * Required at every mount, with no defaults. There were defaults, naming the
+ * layout the web application had when these views were written — the audit at
+ * `/audit`, the runs at `/runs`. The application moved them under `/mcp`, and
+ * every view mounted without `routes` went on linking to the old addresses:
+ * the page rendered, the links looked right, and clicking one left the tabs
+ * or landed on a route that had stopped existing.
+ *
+ * That was found four separate times by clicking, and fixed four times by
+ * eye. A default here is a wrong answer that looks like a right one, so
+ * there is none: an application that mounts these says where its own pages
+ * are, or it does not compile.
+ */
+export interface McpRoutes {
+    /** The dashboard: what the connected clients are doing right now. */
+    dashboard: string;
+    /** Setup and access: the endpoint and the per-client cards. */
+    access: string;
+    /** The audit log. */
+    audit: string;
+    /** The runs list; a task appends `/{uid}`. */
+    runs: string;
+    /** The observability panes. */
+    observability: string;
+    /** The connected agents. */
+    agents: string;
+    /** The effective policy. */
+    policies: string;
+}

package/lib/views/mcp/types.js

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

package/lib/views/otel/simpleAuthStore.js

@@ -14,9 +14,12 @@
  */
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
+import { registerSessionState } from '../../state/sessionEnd.js';
 export const useSimpleAuthStore = create()(persist(set => ({
     token: null,
     handle: null,
     setAuth: (token, handle) => set({ token, handle }),
     clearAuth: () => set({ token: null, handle: null }),
 }), { name: 'datalayer-simple-auth' }));
+// A token is the session's: forgotten when it ends.
+registerSessionState({ forget: () => useSimpleAuthStore.getState().clearAuth() });

package/lib/views/secrets/SecretEdit.d.ts

@@ -1,2 +1,6 @@
-export declare const SecretEdit: () => import("react/jsx-runtime").JSX.Element;
+export type SecretEditProps = {
+    /** The list to return to once the secret is deleted. */
+    secretsListRoute?: string;
+};
+export declare const SecretEdit: ({ secretsListRoute, }?: SecretEditProps) => import("react").JSX.Element;
 export default SecretEdit;

package/lib/views/secrets/SecretEdit.js

@@ -11,7 +11,7 @@ import { EyeIcon, EyeClosedIcon } from '@primer/octicons-react';
 import { BoringAvatar } from '../../components/avatars/index.js';
 import { useCache, useNavigate, useToast } from '../../hooks/index.js';
 import { useRunStore } from '../../state/index.js';
-export const SecretEdit = () => {
+export const SecretEdit = ({ secretsListRoute = '/settings/secrets', } = {}) => {
     const { secretId } = useParams();
     const runStore = useRunStore();
     const navigate = useNavigate();
@@ -44,7 +44,8 @@ export const SecretEdit = () => {
                 name: secret.name || '',
                 nameConfirm: '',
                 description: secret.description || '',
-                value: secret.value ? atob(secret.value) : '',
+                // `secret.value` is already what its owner wrote (E3-05).
+                value: secret.value ?? '',
             });
         }
     }, [secretQuery.data]);
@@ -97,7 +98,7 @@ export const SecretEdit = () => {
         runStore.layout().showBackdrop('Updating the secret...');
         secret.name = formValues.name;
         secret.description = formValues.description;
-        secret.value = btoa(formValues.value);
+        secret.value = formValues.value;
         updateSecretMutation.mutate(secret, {
             onSuccess: (resp) => {
                 if (resp.success) {
@@ -120,7 +121,7 @@ export const SecretEdit = () => {
                     enqueueToast('The secret is successfully deleted.', {
                         variant: 'success',
                     });
-                    navigate(`/settings/iam/secrets`);
+                    navigate(secretsListRoute);
                 }
             },
             onSettled: () => {

package/lib/views/secrets/SecretNew.d.ts

@@ -1,2 +1,12 @@
-export declare const SecretNew: () => import("react/jsx-runtime").JSX.Element;
+export type SecretNewProps = {
+    /**
+     * The list to return to once the secret is created.
+     *
+     * It was hardcoded to a settings address this view no longer lives at, so a
+     * caller that mounted it elsewhere — and passed this prop, which did not
+     * exist — landed on a dead URL after every successful save.
+     */
+    secretsListRoute?: string;
+};
+export declare const SecretNew: ({ secretsListRoute, }?: SecretNewProps) => import("react").JSX.Element;
 export default SecretNew;

package/lib/views/secrets/SecretNew.js

@@ -8,7 +8,7 @@ import { PageHeader, FormControl, Button, TextInput, Textarea, Select, } from '@
 import { Box } from '@datalayer/primer-addons';
 import { useCache, useNavigate, useToast } from '../../hooks/index.js';
 import { useRunStore } from '../../state/index.js';
-export const SecretNew = () => {
+export const SecretNew = ({ secretsListRoute = '/settings/secrets', } = {}) => {
     const runStore = useRunStore();
     const navigate = useNavigate();
     const { useCreateSecret } = useCache();
@@ -76,12 +76,16 @@ export const SecretNew = () => {
             variant: formValues.variant,
             name: formValues.name,
             description: formValues.description,
-            value: btoa(formValues.value),
+            // As it is: a secret has one representation end to end
+            // (PLAN_ENVS.md E3-05). This used to `btoa` and nothing on the read
+            // side undid it, so a build secret arrived at its build encoded and
+            // opened nothing.
+            value: formValues.value,
         }, {
             onSuccess: (resp) => {
                 if (resp.success) {
                     enqueueToast(resp.message, { variant: 'success' });
-                    navigate(`/settings/iam/secrets`);
+                    navigate(secretsListRoute);
                 }
             },
             onSettled: () => {

package/lib/views/secrets/Secrets.d.ts

@@ -1,2 +1,13 @@
-export declare const Secrets: () => import("react/jsx-runtime").JSX.Element;
+export type SecretsProps = {
+    /**
+     * Where the "New Secret" button goes.
+     *
+     * A prop because the same list is mounted at more than one base: the web
+     * application serves it under the settings, a JupyterLab extension under its
+     * own route. Hardcoding one of those sent the other somewhere that does not
+     * exist.
+     */
+    newSecretRoute?: string;
+};
+export declare const Secrets: ({ newSecretRoute, }?: SecretsProps) => import("react").JSX.Element;
 export default Secrets;

package/lib/views/secrets/Secrets.js

@@ -41,8 +41,8 @@ const SecretsTable = () => {
                 },
             ] }) }));
 };
-export const Secrets = () => {
+export const Secrets = ({ newSecretRoute = '/settings/secrets/new', } = {}) => {
     const navigate = useNavigate();
-    return (_jsxs(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [_jsx(PageLayout.Header, { children: _jsxs(PageHeader, { children: [_jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "Secrets" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate('/secrets/new', e), children: "New secret" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(SecretsTable, {}) }) })] }));
+    return (_jsxs(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [_jsx(PageLayout.Header, { children: _jsxs(PageHeader, { children: [_jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "Secrets" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate(newSecretRoute, e), children: "New secret" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(SecretsTable, {}) }) })] }));
 };
 export default Secrets;