@datalayer/core 1.1.66 → 1.2.10

package/lib/views/mcp/ToolAccess.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button, Heading, Label, Spinner, Text, Truncate, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { McpErrorBlankslate } from '../../components/mcp/index.js';
+import { useContentSources, useMcpSessions, useMcpTools, useRevokeMcpSession, } from '../../hooks/useContents.js';
+/**
+ * The tools a session can really call: what it was granted, still allowed by
+ * the source.
+ *
+ * The same intersection Contents applies, computed here so the page shows
+ * what will happen rather than what was asked for. Sorted, so two sessions
+ * of the same source read the same way.
+ */
+export const effectiveTools = (sessionAllowed, sourceAllowed) => {
+    const source = new Set(sourceAllowed ?? []);
+    return [...new Set(sessionAllowed ?? [])].filter(tool => source.has(tool)).sort();
+};
+/**
+ * The tools a session still lists that its source has stopped allowing.
+ *
+ * Worth its own answer rather than a subtraction at the call site: this is
+ * the set that makes an agent fail in a way nobody can explain from either
+ * record alone, and naming it is the whole reason to read the two together.
+ */
+export const withdrawnTools = (sessionAllowed, sourceAllowed) => {
+    const source = new Set(sourceAllowed ?? []);
+    return [...new Set(sessionAllowed ?? [])].filter(tool => !source.has(tool)).sort();
+};
+/** How a source's approval policy reads to somebody deciding whether to trust it. */
+export const APPROVAL_POLICY_LOOK = {
+    explicit: {
+        label: 'Approval required',
+        variant: 'attention',
+        note: 'Every call waits for somebody to allow it.',
+    },
+    'auto-allowlisted': {
+        label: 'Allowlisted',
+        variant: 'success',
+        note: 'Calls to allowed tools run; anything else is refused.',
+    },
+    never: {
+        label: 'No approval',
+        variant: 'secondary',
+        note: 'Calls to allowed tools run without asking.',
+    },
+};
+/** The MCP configuration of a source, where it has one. */
+export const mcpConfigOf = (source) => source.kind === 'mcp'
+    ? source.configuration
+    : undefined;
+const SessionRow = ({ session, sourceTools, mayRevoke, onRevoke, revoking, }) => {
+    const effective = effectiveTools(session.allowedTools, sourceTools);
+    const withdrawn = withdrawnTools(session.allowedTools, sourceTools);
+    return (_jsxs(Box, { sx: {
+            display: 'grid',
+            gap: 1,
+            py: 2,
+            borderTop: '1px solid',
+            borderColor: 'border.muted',
+        }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(Label, { size: "small", variant: session.status === 'active' ? 'success' : 'secondary', children: session.status }), _jsx(Truncate, { title: session.actorUid, sx: { fontSize: 0, fontFamily: 'mono', maxWidth: '16rem' }, children: session.actorUid }), session.status === 'active' && mayRevoke && (_jsx(Button, { size: "small", variant: "danger", disabled: revoking, onClick: onRevoke, children: revoking ? 'Revoking…' : 'Revoke' }))] }), effective.length === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'attention.fg' }, children: "This session can call nothing. An empty allowlist allows no tool \u2014 it does not mean unrestricted." })) : (_jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: effective.map(tool => (_jsx(Label, { size: "small", variant: "secondary", children: tool }, tool))) })), withdrawn.length > 0 && (_jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Refused at every call, because the source no longer allows", ' ', withdrawn.join(', '), " \u2014 the session still lists it."] }))] }));
+};
+const SourceCard = ({ source, permissions, errorState, }) => {
+    const config = mcpConfigOf(source);
+    const sourceTools = config?.allowedTools ?? [];
+    const sessions = useMcpSessions({ sourceUid: source.uid });
+    const revoke = useRevokeMcpSession();
+    const manifest = useMcpTools(source.uid);
+    const [revoking, setRevoking] = useState('');
+    const look = config ? APPROVAL_POLICY_LOOK[config.approvalPolicy] : undefined;
+    const offered = manifest.data?.tools?.length ?? 0;
+    return (_jsxs(Box, { sx: {
+            border: '1px solid',
+            borderColor: 'border.default',
+            borderRadius: 2,
+            p: 3,
+            display: 'grid',
+            gap: 2,
+            minWidth: 0,
+        }, children: [_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center', flexWrap: 'wrap' }, children: [_jsx(Heading, { as: "h3", sx: { fontSize: 1 }, children: source.name }), look && (_jsx(Label, { size: "small", variant: look.variant, children: look.label })), config?.transport && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: config.transport }))] }), look && (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: look.note })), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: sourceTools.length === 0
+                    ? 'No tool is allowed on this source, so an agent can call none of it.'
+                    : `${sourceTools.length} of ${offered || sourceTools.length} tools allowed to agents.` }), sourceTools.length > 0 && (_jsx(Box, { sx: { display: 'flex', gap: 1, flexWrap: 'wrap' }, children: [...sourceTools].sort().map(tool => (_jsx(Label, { size: "small", variant: "accent", children: tool }, tool))) })), _jsxs(Box, { children: [_jsx(Heading, { as: "h4", sx: { fontSize: 0, color: 'fg.muted', mb: 1 }, children: "Open sessions" }), sessions.isError ? (_jsx(McpErrorBlankslate, { state: errorState(sessions.error, 'The sessions'), onRetry: () => sessions.refetch() })) : sessions.isPending ? (_jsx(Spinner, { size: "small" })) : (sessions.data?.items.length ?? 0) === 0 ? (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "No agent has opened this source." })) : ((sessions.data?.items ?? []).map(session => (_jsx(SessionRow, { session: session, sourceTools: sourceTools, 
+                        // Revoking a session withdraws an agent's access to this
+                        // source, so it follows the source's own write permission
+                        // rather than being offered to everyone who can read the page.
+                        mayRevoke: permissions.update || permissions.isOwner, revoking: revoking === session.uid, onRevoke: () => {
+                            setRevoking(session.uid);
+                            revoke.mutate(session.uid, {
+                                onSettled: () => setRevoking(''),
+                            });
+                        } }, session.uid))))] })] }));
+};
+export const ToolAccess = ({ errorState, spaceUid, }) => {
+    const sources = useContentSources({ kind: 'mcp', ...(spaceUid ? { spaceUid } : {}) });
+    // The listing wraps each source with what this caller may do with it, and
+    // both halves are used: the source to read the allowlist, the permissions
+    // to decide whether revoking is offered at all.
+    const items = (sources.data?.items ?? []);
+    return (_jsxs(Box, { sx: { display: 'grid', gap: 3, minWidth: 0 }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Tools" }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', m: 0 }, children: "The MCP sources your agents may reach, the tools allowed on each, and the sessions open against them. A session can only narrow what the source allows, never widen it." })] }), sources.isError ? (_jsx(McpErrorBlankslate, { state: errorState(sources.error, 'The sources'), onRetry: () => sources.refetch() })) : sources.isPending ? (_jsx(Box, { sx: { display: 'flex', justifyContent: 'center', py: 5 }, children: _jsx(Spinner, {}) })) : items.length === 0 ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No MCP source is connected here. A source has to be created before its tools can be offered to an agent." })) : (items.map(entry => (_jsx(SourceCard, { source: entry.source, permissions: entry.permissions, errorState: errorState }, entry.source.uid))))] }));
+};
+export default ToolAccess;

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

@@ -0,0 +1,81 @@
+/**
+ * Where a run's time went.
+ *
+ * A run crosses four processes — the gateway that accepted the call, the
+ * durable engine that recorded it, the worker that executed it, and the
+ * sandbox that ran the code — and the question a person actually has when a
+ * run took eleven minutes is *which of them* took the eleven minutes. A list
+ * of spans does not answer that; the same spans laid against one clock do.
+ *
+ * **The bars are proportional, the rows are the tree.** Nesting comes from
+ * `parent_span_id`, so a step that waited on a sandbox sits under the step
+ * that waited, and its bar sits inside its parent's — a gap between a
+ * parent's bar and its children's is queue time, which is the thing worth
+ * seeing and the thing a table of durations hides.
+ *
+ * **It draws spans from every service, not the gateway's alone.** The
+ * `durable.*` and `runtimes.*` spans are the ones that explain a slow run;
+ * showing only what the gateway emitted would show the eleven minutes as one
+ * unexplained bar. Services are told apart by colour and named on the row.
+ *
+ * @module views/mcp/TraceTimeline
+ */
+import type { JSX } from 'react';
+import type { OtelSpan } from '../../api/otel/types';
+import type { McpSpanNode } from '../../api/mcp/observability';
+/**
+ * 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 declare const MIN_BAR_PERCENT = 0.75;
+/** One span, placed against the run's clock. */
+export interface TimelineRow {
+    span: OtelSpan;
+    /** How deep in the span tree, for the indent. */
+    depth: number;
+    /** Where the bar starts, as a percentage of the whole run. */
+    left: number;
+    /** How wide it is, as a percentage. Never zero — an instant is still a mark. */
+    width: number;
+}
+/**
+ * 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 declare const timelineRows: (tree: McpSpanNode[]) => TimelineRow[];
+/**
+ * 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 declare const SERVICE_TONE: Record<string, string>;
+/** The bar colour of a span, by the service that emitted it and how it ended. */
+export declare const toneOf: (span: OtelSpan) => string;
+export interface TraceTimelineProps {
+    /** The spans, already parented — `McpRunTrace.tree`. */
+    tree: McpSpanNode[];
+    /** The trace these are of, shown so it can be copied into a log query. */
+    traceId?: string;
+    /** Whether the run is still going, which is why the trace may be short. */
+    live?: boolean;
+}
+export declare const TraceTimeline: ({ tree, traceId, live, }: TraceTimelineProps) => JSX.Element;
+/** The timeline under its own heading, as the Runs detail draws it. */
+export declare const TraceTimelineSection: (props: TraceTimelineProps) => JSX.Element;
+export default TraceTimeline;

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

@@ -14,6 +14,8 @@ 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';
@@ -27,3 +29,6 @@ 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

@@ -22,6 +22,8 @@ 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';
@@ -35,3 +37,6 @@ 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/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.js

@@ -44,7 +44,8 @@ export const SecretEdit = ({ secretsListRoute = '/settings/secrets', } = {}) =>
                 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 = ({ secretsListRoute = '/settings/secrets', } = {}) =>
         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) {

package/lib/views/secrets/SecretNew.js

@@ -76,7 +76,11 @@ export const SecretNew = ({ secretsListRoute = '/settings/secrets', } = {}) => {
             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) {