@datalayer/core 1.2.10 → 1.2.13

package/lib/state/substates/NavigationState.js

@@ -0,0 +1,304 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Where the reader is, where they were, and where they left each shell.
+ *
+ * One store for navigation, in core, so every surface reads and writes the
+ * same thing. It answers five questions that used to be four stores in the
+ * landing and a handful of ad-hoc effects:
+ *
+ * - **the shell** — the platform Home, Agentify, or Admin;
+ * - **the page each shell was left on**, so switching shells returns the
+ *   reader to their work rather than to a landing page;
+ *   {@link useNavigate} records it on every navigation;
+ * - **the tab** last chosen in each tabbed view;
+ * - **the route asked for** before signing in, to resume afterwards;
+ * - **the address before the documentation**, for its way back.
+ *
+ * **Where each is kept.** The shell rides in a cookie, so it is sent with
+ * every request and a server render can read it. The shells' last pages and
+ * the tabs are in `localStorage`, which a cookie should not carry. The
+ * requested route and the documentation's origin are memory only, on
+ * purpose: a reload must forget the route asked for before signing in.
+ *
+ * Every read and write goes through the storage in a `try`: a browser that
+ * refuses its storage forgets, and never throws into a render.
+ *
+ * @module state/substates/NavigationState
+ */
+import { useStore } from 'zustand';
+import { createStore } from 'zustand/vanilla';
+import { registerSessionState } from '../sessionEnd.js';
+/** The shells, and where each one opens when it has not been visited. */
+export const NAVIGATION_VIEW_HOMES = {
+    studio: '/studio',
+    // Not `/`: the root is the Studio's, so the Power shell has an address of
+    // its own to be sent to.
+    home: '/power',
+    agentify: '/agentify',
+    admin: '/admin',
+};
+/** Well-known view identifiers for {@link NavigationState.tabsByView}. */
+export const LIBRARY_VIEW = 'library';
+export const AGENTS_VIEW = 'agents';
+export const SETTINGS_VIEW = 'settings';
+export const DATALAYER_VIEW = 'datalayer';
+export const CONTENTS_VIEW = 'contents';
+export const TUTOR_VIEW = 'tutor';
+/** Where this store is kept, and what the landing kept it under before. */
+const STORAGE_KEY = 'datalayer-navigation';
+const SHELL_COOKIE = 'datalayer-signed-in-view';
+const FORMER_TABS_KEY = 'datalayer_view_tabs';
+/** Days a remembered shell lives in the cookie. */
+const COOKIE_MAX_AGE_DAYS = 365;
+const isView = (value) => value === 'studio' ||
+    value === 'home' ||
+    value === 'agentify' ||
+    value === 'admin';
+function readCookie(name) {
+    if (typeof document === 'undefined') {
+        return undefined;
+    }
+    const match = document.cookie
+        .split('; ')
+        .find(row => row.startsWith(`${name}=`));
+    return match ? decodeURIComponent(match.slice(name.length + 1)) : undefined;
+}
+function writeCookie(name, value) {
+    if (typeof document === 'undefined') {
+        return;
+    }
+    const maxAge = COOKIE_MAX_AGE_DAYS * 24 * 60 * 60;
+    document.cookie = `${name}=${encodeURIComponent(value)}; path=/; max-age=${maxAge}; SameSite=Lax`;
+}
+function readLocal(name) {
+    try {
+        return globalThis.localStorage?.getItem(name) ?? null;
+    }
+    catch {
+        return null;
+    }
+}
+/**
+ * What the last visit left, from the two places it belongs in.
+ *
+ * The shell is taken from the cookie it has always used, so a reader who
+ * chose Agentify before this store existed still finds it. The tabs kept
+ * under the landing's former key are picked up once.
+ */
+function restore() {
+    let persisted = {};
+    const stored = readLocal(STORAGE_KEY);
+    if (stored) {
+        try {
+            const parsed = JSON.parse(stored);
+            // The landing kept this under the same key through zustand's
+            // `persist`, which wraps what it writes in `{ state, version }`.
+            const kept = parsed?.state ?? parsed;
+            persisted = kept && typeof kept === 'object' ? kept : {};
+        }
+        catch {
+            persisted = {};
+        }
+    }
+    else {
+        const former = readLocal(FORMER_TABS_KEY);
+        if (former) {
+            try {
+                const { state } = JSON.parse(former);
+                persisted = { tabsByView: state?.tabsByView ?? {} };
+            }
+            catch {
+                persisted = {};
+            }
+        }
+    }
+    const shell = readCookie(SHELL_COOKIE);
+    if (isView(shell)) {
+        persisted.view = shell;
+    }
+    persisted.lastRouteByView = restoredRoutes(persisted.lastRouteByView);
+    return persisted;
+}
+/**
+ * The shells' pages as they were written down, less the ones no shell
+ * returns to.
+ *
+ * What is in storage was written by whichever version ran last, under that
+ * version's rules. Before the Power shell had an address of its own, its
+ * page could be the root — which is now the Studio's, and would send Power
+ * to the Studio — and an earlier version filed pages under the shell the
+ * toggle named. Such a page is dropped here rather than carried, so the next
+ * write does not put it back.
+ */
+function restoredRoutes(stored) {
+    const routes = {};
+    if (!stored || typeof stored !== 'object') {
+        return routes;
+    }
+    for (const [view, route] of Object.entries(stored)) {
+        if (isView(view) && isRouteOfView(route, view)) {
+            routes[view] = route;
+        }
+    }
+    return routes;
+}
+function persist(state) {
+    const written = {
+        view: state.view,
+        lastRouteByView: state.lastRouteByView,
+        tabsByView: state.tabsByView,
+    };
+    try {
+        globalThis.localStorage?.setItem(STORAGE_KEY, JSON.stringify(written));
+    }
+    catch {
+        /* the shells' pages are not remembered */
+    }
+    writeCookie(SHELL_COOKIE, state.view);
+}
+/**
+ * Whether a page is worth remembering as a shell's.
+ *
+ * Not the sign-in pages, the OAuth callbacks or the documentation: coming
+ * back to a shell should land on the work, not on the door the reader came
+ * through or on a page that belongs to no shell.
+ */
+export function isRememberableRoute(route) {
+    if (!route.startsWith('/')) {
+        return false;
+    }
+    const path = route.split('?')[0];
+    return ![
+        '/signin',
+        '/signup',
+        '/login',
+        '/logout',
+        '/oauth2',
+        '/oauth',
+        '/docs',
+        '/join',
+    ].some(prefix => path === prefix || path.startsWith(`${prefix}/`));
+}
+/**
+ * The shell a route belongs to, read off its first segment.
+ *
+ * The store used to trust whatever `view` said when a route was recorded,
+ * and `view` was only ever written by the header toggle. A reader who
+ * reached Home through a sidebar link while the toggle still said Agentify
+ * had their Home pages filed under Agentify — and the toggle, seeing
+ * "Agentify" already chosen, did nothing when they clicked it.
+ */
+export function viewForRoute(route) {
+    const path = route.split('?')[0];
+    // The root is the Studio: what a signed-in reader opens on. The settings
+    // are read from it too, with its sidebar beside them.
+    if (path === '/' ||
+        path === '/studio' ||
+        path.startsWith('/studio/') ||
+        path === '/settings' ||
+        path.startsWith('/settings/')) {
+        return 'studio';
+    }
+    if (path === '/agentify' || path.startsWith('/agentify/')) {
+        return 'agentify';
+    }
+    if (path === '/admin' || path.startsWith('/admin/')) {
+        return 'admin';
+    }
+    return 'home';
+}
+/** Whether a page may be the one a shell returns to. */
+function isRouteOfView(route, view) {
+    return (typeof route === 'string' &&
+        isRememberableRoute(route) &&
+        viewForRoute(route) === view);
+}
+const initial = restore();
+export const navigationStore = createStore((set, get) => ({
+    // The Studio, for a reader who never chose: a cookie from before it
+    // existed says `home`, and is honoured.
+    view: initial.view ?? 'studio',
+    lastRouteByView: initial.lastRouteByView ?? {},
+    tabsByView: initial.tabsByView ?? {},
+    requestedRoute: undefined,
+    docsOrigin: undefined,
+    setView: view => {
+        set({ view });
+        persist(get());
+    },
+    toggleView: () => {
+        set(state => ({ view: state.view === 'home' ? 'agentify' : 'home' }));
+        persist(get());
+    },
+    rememberRoute: (route, view) => {
+        if (!isRememberableRoute(route)) {
+            return;
+        }
+        // The route says which shell it belongs to; the caller may only insist
+        // when it knows better. And being on a shell's page *is* being in that
+        // shell, so the view follows.
+        const shell = view ?? viewForRoute(route);
+        // Told which shell, the caller is filing a page away, not going there.
+        const follow = view === undefined;
+        const current = get();
+        if (current.lastRouteByView[shell] === route &&
+            (!follow || current.view === shell)) {
+            return;
+        }
+        set(state => ({
+            view: follow ? shell : state.view,
+            lastRouteByView: { ...state.lastRouteByView, [shell]: route },
+        }));
+        persist(get());
+    },
+    routeForView: view => {
+        // Only a page of that shell: an earlier version filed pages under the
+        // shell the toggle named rather than the one the route belonged to, so a
+        // reader can still have `/items` written down as Agentify's page. Going
+        // "to Agentify" must never land on a Home page — nor Power on the root,
+        // which was its page before it had `/power` and is now the Studio's.
+        const remembered = get().lastRouteByView[view];
+        return isRouteOfView(remembered, view)
+            ? remembered
+            : NAVIGATION_VIEW_HOMES[view];
+    },
+    setViewTab: (view, tab) => {
+        if (get().tabsByView[view] === tab) {
+            return;
+        }
+        set(state => ({ tabsByView: { ...state.tabsByView, [view]: tab } }));
+        persist(get());
+    },
+    getViewTab: view => get().tabsByView[view],
+    setRequestedRoute: route => set({ requestedRoute: route }),
+    clearRequestedRoute: () => set({ requestedRoute: undefined }),
+    setDocsOrigin: origin => set({ docsOrigin: origin }),
+}));
+// The pages each shell was left on, the tabs, the route asked for and the
+// way back from the documentation belong to the person who was signed in:
+// forgotten when the session ends. The shell itself stays — it is the
+// browser's choice of surface, read by the anonymous landing too.
+registerSessionState({
+    forget: () => {
+        navigationStore.setState({
+            lastRouteByView: {},
+            tabsByView: {},
+            requestedRoute: undefined,
+            docsOrigin: undefined,
+        });
+        persist(navigationStore.getState());
+    },
+    localStorageKeys: [FORMER_TABS_KEY],
+});
+function useNavigationState(selector) {
+    return useStore(navigationStore, selector ?? ((state) => state));
+}
+export const useNavigationStore = Object.assign(useNavigationState, {
+    getState: navigationStore.getState,
+    setState: navigationStore.setState,
+    subscribe: navigationStore.subscribe,
+});
+export default useNavigationStore;

package/lib/state/substates/index.d.ts

@@ -1,6 +1,7 @@
 export * from './CoreState';
 export * from './IAMState';
 export * from './LayoutState';
+export * from './NavigationState';
 export * from './ProfileState';
 export * from './OrganizationState';
 export * from './SurveysState';

package/lib/state/substates/index.js

@@ -5,6 +5,7 @@
 export * from './CoreState.js';
 export * from './IAMState.js';
 export * from './LayoutState.js';
+export * from './NavigationState.js';
 export * from './ProfileState.js';
 export * from './OrganizationState.js';
 export * from './SurveysState.js';

package/lib/utils/Handles.js

@@ -2,7 +2,7 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-const EXT_URN_PREFIX = 'urn:dla:iam:ext::';
+import { IAM_PROVIDER_URN_PREFIX as EXT_URN_PREFIX } from '../models/URN.js';
 export function isExternalUrnHandle(handle) {
     const normalized = (handle || '').trim().toLowerCase();
     return normalized.startsWith(EXT_URN_PREFIX);

package/lib/utils/Screencapture.d.ts

@@ -1 +1,16 @@
+/**
+ * A picture of one rendered node, as a PNG data URL.
+ *
+ * This used `html2canvas`, which does not capture a node: it clones the
+ * **whole document** into a hidden iframe and paints all of it, then crops.
+ * On a rendered notebook that is every cell, every editor and every output,
+ * and the clone is synchronous — the page froze for ten seconds or more with
+ * the share dialog saying "preparing…", which reads as a hang, and on a
+ * longer notebook it was one. `html-to-image` serialises the node's own
+ * subtree into an SVG `foreignObject` and rasterises that: the work is
+ * proportional to the output being shared, and it yields to the page.
+ *
+ * Cross-origin pictures are fetched for the clone, as before, so a cell
+ * carrying an `<img>` from the web does not capture as a blank rectangle.
+ */
 export declare const takeHTMLNodeScreencapture: (node: HTMLDivElement) => Promise<string>;

package/lib/utils/Screencapture.js

@@ -2,29 +2,32 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import html2canvas from 'html2canvas';
+import { toPng } from 'html-to-image';
+/**
+ * A picture of one rendered node, as a PNG data URL.
+ *
+ * This used `html2canvas`, which does not capture a node: it clones the
+ * **whole document** into a hidden iframe and paints all of it, then crops.
+ * On a rendered notebook that is every cell, every editor and every output,
+ * and the clone is synchronous — the page froze for ten seconds or more with
+ * the share dialog saying "preparing…", which reads as a hang, and on a
+ * longer notebook it was one. `html-to-image` serialises the node's own
+ * subtree into an SVG `foreignObject` and rasterises that: the work is
+ * proportional to the output being shared, and it yields to the page.
+ *
+ * Cross-origin pictures are fetched for the clone, as before, so a cell
+ * carrying an `<img>` from the web does not capture as a blank rectangle.
+ */
 export const takeHTMLNodeScreencapture = async (node) => {
-    const sc = html2canvas(node, {
-        width: node.getBoundingClientRect().width,
-        height: node.getBoundingClientRect().height,
-        // Cross-origin pictures are otherwise left out and their space kept, so a
-        // cell carrying an `<img>` from the web captures as a blank rectangle.
-        useCORS: true,
-    });
-    return sc.then(canvas => {
-        const croppedCanvas = document.createElement('canvas');
-        const croppedCanvasContext = croppedCanvas.getContext('2d');
-        const top = 0;
-        const left = 0;
-        const width = canvas.width;
-        const height = canvas.height;
-        croppedCanvas.width = width;
-        croppedCanvas.height = height;
-        croppedCanvasContext?.drawImage(canvas, left, top, width, height, left, top, width, height);
-        //    const type = 'image/jpeg';
-        const type = 'image/png';
-        const quality = 1;
-        const outputshotData = croppedCanvas.toDataURL(type, quality);
-        return outputshotData;
+    const { backgroundColor } = getComputedStyle(node);
+    return toPng(node, {
+        // Crisp on a dense display, still a modest file for a text output.
+        pixelRatio: Math.min(window.devicePixelRatio || 1, 2),
+        // Outputs are usually transparent over the page's canvas: give the
+        // picture that canvas rather than a transparent one.
+        backgroundColor: backgroundColor && backgroundColor !== 'rgba(0, 0, 0, 0)'
+            ? backgroundColor
+            : getComputedStyle(document.body).backgroundColor || '#ffffff',
+        cacheBust: true,
     });
 };

package/lib/views/mcp/McpDashboard.js

@@ -3,7 +3,7 @@ import { useMemo, useRef, useState } from 'react';
 import { ActionList, ActionMenu, Button, Heading, Label, Link, RelativeTime, Select, Spinner, Text, } from '@primer/react';
 import { Blankslate, DataTable, Dialog, Table, } from '@primer/react/experimental';
 import { Box } from '@datalayer/primer-addons';
-import { ChecklistIcon, KebabHorizontalIcon, PlayIcon, PlugIcon, StackIcon, TelescopeIcon, } from '@primer/octicons-react';
+import { ChecklistIcon, KebabHorizontalIcon, PlayIcon, PlugIcon, StackIcon, } from '@primer/octicons-react';
 import { ShareAccessDialog, sandboxSharingUrl } from '../../components/sharing/index.js';
 import { ClientBadge, McpErrorBlankslate } from '../../components/mcp/index.js';
 import { useDisconnectAgent, useMcpActivity, useTerminateBinding, } from '../../hooks/useMcp.js';
@@ -54,7 +54,7 @@ const boundTo = (client) => {
     return '';
 };
 const countLook = (tone) => tone === 'danger' ? 'danger.fg' : 'fg.default';
-const Count = ({ label, value, tone = 'neutral', note, }) => (_jsxs(Box, { sx: {
+const Count = ({ label, value, tone = 'neutral', note, to, onOpen, }) => (_jsxs(Box, { sx: {
         p: 3,
         border: '1px solid',
         borderColor: 'border.default',
@@ -66,7 +66,14 @@ const Count = ({ label, value, tone = 'neutral', note, }) => (_jsxs(Box, { sx: {
                 fontSize: 4,
                 fontWeight: 'bold',
                 color: countLook(tone),
-            }, children: value }), _jsx(Text, { sx: { display: 'block', fontSize: 0, color: 'fg.muted' }, children: label }), note && (_jsx(Text, { sx: { display: 'block', fontSize: 0, color: 'fg.subtle', mt: 1 }, children: note }))] }));
+            }, children: value }), to ? (_jsx(Link, { href: to, onClick: (event) => {
+                // A modified click asks for a new tab; `href` is real, so let it.
+                if (event.metaKey || event.ctrlKey || event.shiftKey) {
+                    return;
+                }
+                event.preventDefault();
+                onOpen?.(to);
+            }, sx: { display: 'block', fontSize: 0 }, children: label })) : (_jsx(Text, { sx: { display: 'block', fontSize: 0, color: 'fg.muted' }, children: label })), note && (_jsx(Text, { sx: { display: 'block', fontSize: 0, color: 'fg.subtle', mt: 1 }, children: note }))] }));
 /** A panel that has nothing to show, and the step that would fill it. */
 const PanelEmpty = ({ icon: Icon, heading, description, action, }) => (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Visual, { children: _jsx(Icon, { size: "medium" }) }), _jsx(Blankslate.Heading, { children: heading }), _jsx(Blankslate.Description, { children: _jsx(Text, { as: "p", sx: { textAlign: 'center', m: 0 }, children: description }) }), action && (_jsx(Button, { size: "small", onClick: action.onClick, children: action.label }))] }));
 export const McpDashboard = ({ errorState, routes, org, showTitle = true, section, }) => {
@@ -379,7 +386,10 @@ export const McpDashboard = ({ errorState, routes, org, showTitle = true, sectio
                             'repeat(3, 1fr)',
                             'repeat(6, 1fr)',
                         ],
-                    }, children: [_jsx(Count, { label: "Clients connected", value: clients.length }), _jsx(Count, { label: "Sandboxes bound", value: sandboxes.filter(binding => (binding.state ?? 'active') === 'active').length }), _jsx(Count, { label: "Tasks running", value: data?.tasks.length ?? 0 }), _jsx(Count, { label: "Calls today", value: data?.today.calls ?? 0 }), _jsx(Count, { label: "Refusals today", value: data?.today.refusals ?? 0, tone: (data?.today.refusals ?? 0) > 0 ? 'danger' : 'neutral' }), _jsx(Count, { label: "Credits by agents", value: data?.today.credits ?? 0, note: "today" })] }))), draws('agents') &&
+                    }, children: [_jsx(Count, { label: "Clients connected", value: clients.length, to: routes.agents, onOpen: navigate }), _jsx(Count, { label: "Sandboxes bound", to: routes.sandboxes, onOpen: navigate, value: sandboxes.filter(binding => (binding.state ?? 'active') === 'active').length }), _jsx(Count, { label: "Tasks running", value: data?.tasks.length ?? 0, to: routes.runs, onOpen: navigate }), _jsx(Count, { label: "Calls today", value: data?.today.calls ?? 0, to: routes.calls, onOpen: navigate }), _jsx(Count, { label: "Refusals today", value: data?.today.refusals ?? 0, to: routes.audit, onOpen: navigate, tone: (data?.today.refusals ?? 0) > 0 ? 'danger' : 'neutral' }), _jsx(Count, { label: "Credits by agents", value: data?.today.credits ?? 0, note: "today", 
+                            // Credits are summed from the day's calls, which the Calls tab
+                            // lists.
+                            to: routes.calls, onOpen: navigate })] }))), draws('agents') &&
                 !loading &&
                 (clients.length > 0 ? (_jsxs(Table.Container, { children: [_jsx(Table.Title, { as: "h3", id: "mcp-clients", children: "Connected clients" }), _jsxs(Table.Subtitle, { as: "p", id: "mcp-clients-subtitle", children: [plural(clients.length, 'client'), " with a live grant on your workspace."] }), _jsx(DataTable, { "aria-labelledby": "mcp-clients", "aria-describedby": "mcp-clients-subtitle", data: clients, columns: clientColumns })] })) : (_jsx(PanelEmpty, { icon: PlugIcon, heading: "No client connected", description: "Connect Claude Code, Codex, Cursor, VS Code or any MCP client to your workspace, and it appears here on its first call.", action: {
                         label: 'Set up a client',
@@ -396,12 +406,7 @@ export const McpDashboard = ({ errorState, routes, org, showTitle = true, sectio
                             }, children: "No call matches these filters." }))] })) : (_jsx(PanelEmpty, { icon: ChecklistIcon, heading: "No call yet", description: "Ask your agent to list your notebooks. The call, its decision and its outcome land here and in the audit log.", action: {
                         label: 'Open the audit log',
                         onClick: () => navigate(routes.audit),
-                    } }))), !loading && (_jsxs(Box, { sx: {
-                    display: 'flex',
-                    gap: 3,
-                    alignItems: 'center',
-                    flexWrap: 'wrap',
-                }, children: [_jsx(Button, { size: "small", leadingVisual: TelescopeIcon, onClick: () => navigate(routes.observability), children: "Observability" }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["Refreshed ", timeAgo(data?.at) || 'just now', ", and again every ten seconds."] })] })), disconnecting && (_jsx(Dialog, { title: "Disconnect this client?", onClose: () => setDisconnecting(null), returnFocusRef: returnFocusRef, footerButtons: [
+                    } }))), disconnecting && (_jsx(Dialog, { title: "Disconnect this client?", onClose: () => setDisconnecting(null), returnFocusRef: returnFocusRef, footerButtons: [
                     {
                         buttonType: 'default',
                         content: 'Keep it',

package/lib/views/mcp/McpHome.js

@@ -63,7 +63,7 @@ export const Copyable = ({ text }) => {
                 } })] }));
 };
 /** One of the five summaries: a heading, what it holds, and the way in. */
-const Summary = ({ icon: Icon, title, children, action, }) => (_jsxs(Box, { sx: {
+const Summary = ({ icon: Icon, title, children, action, to, onOpen, }) => (_jsxs(Box, { sx: {
         p: 3,
         border: '1px solid',
         borderColor: 'border.default',
@@ -72,10 +72,17 @@ const Summary = ({ icon: Icon, title, children, action, }) => (_jsxs(Box, { sx:
         gap: 2,
         alignContent: 'start',
         minWidth: 0,
-    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Icon, { size: 16 }), _jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: title })] }), _jsx(Box, { sx: { fontSize: 0, color: 'fg.muted', display: 'grid', gap: 1 }, children: children }), action && (_jsx(Box, { children: _jsx(Link, { as: "button", sx: { fontSize: 0, cursor: 'pointer' }, onClick: action.onClick, children: action.label }) }))] }));
+    }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Icon, { size: 16 }), to ? (_jsx(Link, { href: to, onClick: event => {
+                        // A modified click asks for a new tab; `href` is real, so let it.
+                        if (event.metaKey || event.ctrlKey || event.shiftKey) {
+                            return;
+                        }
+                        event.preventDefault();
+                        onOpen?.(to);
+                    }, sx: { fontSize: 1, fontWeight: 'semibold' }, children: title })) : (_jsx(Text, { sx: { fontSize: 1, fontWeight: 'semibold' }, children: title }))] }), _jsx(Box, { sx: { fontSize: 0, color: 'fg.muted', display: 'grid', gap: 1 }, children: children }), action && (_jsx(Box, { children: _jsx(Link, { as: "button", sx: { fontSize: 0, cursor: 'pointer' }, onClick: action.onClick, children: action.label }) }))] }));
 export const McpHome = ({ routes, clientDocsBase = '/docs/mcp-clients', showTitle = true, showSummaries = true, showSetup = true, onOpenDocs, }) => {
     const navigate = useNavigate();
-    const endpoint = useCoreStore(state => state.configuration.jupyterMcpServerUrl);
+    const endpoint = useCoreStore(state => state.configuration.datalayerMcpServerUrl);
     // Whether there is a token, never what it is: this page shows an address
     // and a status, and a credential belongs on neither.
     const signedIn = Boolean(useIAMStore(state => state.token));
@@ -130,12 +137,12 @@ export const McpHome = ({ routes, clientDocsBase = '/docs/mcp-clients', showTitl
                     display: 'grid',
                     gap: 3,
                     gridTemplateColumns: ['1fr', 'repeat(2, 1fr)', 'repeat(3, 1fr)'],
-                }, children: [_jsx(Summary, { icon: PlugIcon, title: "Agents", action: {
+                }, children: [_jsx(Summary, { icon: PlugIcon, title: "Agents", to: routes.agents, onOpen: navigate, action: {
                             label: 'Connected agents',
                             onClick: () => navigate(routes.agents),
                         }, children: connected.length === 0 ? (_jsx(Text, { children: "No agent has been authorized yet. Set up a client above and approve the scopes it asks for." })) : (_jsxs(_Fragment, { children: [_jsxs(Text, { children: [plural(connected.length, 'agent'), " authorized."] }), connected.slice(0, 3).map(agent => (_jsxs(Text, { children: [agent.clientName || agent.clientId, " \u2014", ' ', agent.lastUsedAt
                                             ? `used ${timeAgo(agent.lastUsedAt)}`
-                                            : 'never used'] }, agent.uid)))] })) }), _jsx(Summary, { icon: PulseIcon, title: "Runs", action: { label: 'All runs', onClick: () => navigate(routes.runs) }, children: runs.length === 0 ? (_jsx(Text, { children: "Nothing has run yet. A tool call that outlives its request becomes a run you can watch and cancel." })) : (runs.map(task => (_jsxs(Text, { children: [task.tool, " \u2014 ", task.status, " ", timeAgo(task.lastUpdatedAt)] }, task.uid)))) }), _jsxs(Summary, { icon: TelescopeIcon, title: "Observability", action: {
+                                            : 'never used'] }, agent.uid)))] })) }), _jsx(Summary, { icon: PulseIcon, title: "Runs", to: routes.runs, onOpen: navigate, action: { label: 'All runs', onClick: () => navigate(routes.runs) }, children: runs.length === 0 ? (_jsx(Text, { children: "Nothing has run yet. A tool call that outlives its request becomes a run you can watch and cancel." })) : (runs.map(task => (_jsxs(Text, { children: [task.tool, " \u2014 ", task.status, " ", timeAgo(task.lastUpdatedAt)] }, task.uid)))) }), _jsxs(Summary, { icon: TelescopeIcon, title: "Observability", to: routes.observability, onOpen: navigate, action: {
                             label: 'Runs and metrics',
                             onClick: () => navigate(routes.observability),
                         }, children: [_jsx(Text, { children: metrics.data?.slis.samples.calls
@@ -145,7 +152,7 @@ export const McpHome = ({ routes, clientDocsBase = '/docs/mcp-clients', showTitl
                                     : 'Latency not measured yet.' }), _jsx(Text, { children: metrics.data?.slis.availability === null ||
                                     metrics.data?.slis.availability === undefined
                                     ? 'Error rate not measured yet.'
-                                    : `${((1 - metrics.data.slis.availability) * 100).toFixed(1)}% of calls failed.` })] }), _jsx(Summary, { icon: ToolsIcon, title: "Tools", children: _jsx(Text, { children: "The toolsets an agent may execute \u2014 the Contents sources you have enabled for it, their tools, their approval policy and their health \u2014 are managed here once toolset bindings ship." }) }), _jsx(Summary, { icon: ShareIcon, title: "Reach", children: _jsx(Text, { children: "Which notebooks and sources an agent can actually reach, as a list you can read at a glance, arrives with sharing to agents as principals." }) }), _jsx(Summary, { icon: KeyIcon, title: "Policies", action: {
+                                    : `${((1 - metrics.data.slis.availability) * 100).toFixed(1)}% of calls failed.` })] }), _jsx(Summary, { icon: ToolsIcon, title: "Tools", children: _jsx(Text, { children: "The toolsets an agent may execute \u2014 the Contents sources you have enabled for it, their tools, their approval policy and their health \u2014 are managed here once toolset bindings ship." }) }), _jsx(Summary, { icon: ShareIcon, title: "Reach", children: _jsx(Text, { children: "Which notebooks and sources an agent can actually reach, as a list you can read at a glance, arrives with sharing to agents as principals." }) }), _jsx(Summary, { icon: KeyIcon, title: "Policies", to: routes.policies, onOpen: navigate, action: {
                             label: 'What applies',
                             onClick: () => navigate(routes.policies),
                         }, children: _jsx(Text, { children: "What your agents are allowed to do, and which layer decided each rule." }) })] }))] }));

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

@@ -63,4 +63,8 @@ export interface McpRoutes {
     agents: string;
     /** The effective policy. */
     policies: string;
+    /** The calls list, where an Overview count of calls or credits leads. */
+    calls?: string;
+    /** The bound code sandboxes, where the Overview's sandbox count leads. */
+    sandboxes?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@datalayer/core",
-    "version": "1.2.10",
+    "version": "1.2.13",
     "type": "module",
     "workspaces": [
         ".",
@@ -109,11 +109,11 @@
         "rebuild:fresh": "npm run create:patches && npm install && npm run build && npm run clean:cache"
     },
     "dependencies": {
-        "@datalayer/design": "^1.0.0",
-        "@datalayer/icons-react": "^1.0.7",
-        "@datalayer/jupyter-lexical": "^1.0.16",
-        "@datalayer/jupyter-react": "^2.0.7",
-        "@datalayer/primer-addons": "^1.0.15",
+        "@datalayer/design": "^1.0.3",
+        "@datalayer/icons-react": "^1.0.14",
+        "@datalayer/jupyter-lexical": "^2.0.18",
+        "@datalayer/jupyter-react": "^2.0.18",
+        "@datalayer/primer-addons": "^1.0.23",
         "@datalayer/primer-rjsf": "^1.0.3",
         "@fluentui/react": "^8.125.3",
         "@jupyter-widgets/base-manager": "^1.0.12",
@@ -155,7 +155,7 @@
         "diff": "^8.0.2",
         "echarts": "^5.5.0",
         "echarts-for-react": "^3.0.2",
-        "html2canvas": "^1.4.1",
+        "html-to-image": "^1.11.13",
         "jwt-decode": "^2.2.0",
         "localforage": "^1.10.0",
         "lucide-react": "^0.542.0",
@@ -200,6 +200,8 @@
         "@storybook/builder-vite": "^9.1.1",
         "@storybook/react-vite": "^9.1.1",
         "@tailwindcss/postcss": "^4.1.16",
+        "@testing-library/dom": "^10.4.1",
+        "@testing-library/react": "^16.3.3",
         "@types/node": "^20.11.0",
         "@types/react": "19.2.18",
         "@types/react-dom": "19.2.5",

package/scripts/generate-mcp-types.py

@@ -6,13 +6,14 @@
 # Distributed under the terms of the Modified BSD License.
 
 """
-Generate deterministic TypeScript wire types from the Jupyter MCP Server's
-OpenAPI document, on the `generate-contents-types.py` pattern.
+Generate TypeScript wire types from the Jupyter MCP Server's OpenAPI document.
+
+The output is deterministic, on the `generate-contents-types.py` pattern.
 
 The gateway keeps no contract file: its FastAPI application *is* the
 contract, and the document is read from it — imported from the sibling
 checkout of the service when there is one, otherwise fetched from a running
-gateway. `DATALAYER_JUPYTER_MCP_OPENAPI` names either a file or an URL and
+gateway. `DATALAYER_MCP_OPENAPI` names either a file or an URL and
 wins over both; the deployed gateway publishes its document without
 authentication at ``/api/mcp/v1/openapi.json``.
 
@@ -40,9 +41,9 @@ from typing import Any
 from urllib.request import Request, urlopen
 
 ROOT = Path(__file__).parents[1]
-DEFAULT_GATEWAY_CHECKOUT = ROOT.parents[2] / "k8s/services/jupyter-mcp-server"
+DEFAULT_GATEWAY_CHECKOUT = ROOT.parents[2] / "k8s/services/mcp-server"
 DEFAULT_GATEWAY_OPENAPI_URL = "https://r1.datalayer.run/api/mcp/v1/openapi.json"
-GATEWAY_APP = "datalayer_jupyter_mcp_server.main:app"
+GATEWAY_APP = "datalayer_mcp_server.main:app"
 OUTPUT = ROOT / "src/api/mcp/generated.ts"
 #: The licence header every source file in this repository carries. It is
 #: emitted here because `fix-license-header` adds it to whatever this writes,
@@ -106,13 +107,14 @@ def camel(name: str) -> str:
 
 
 def _read_from_checkout(checkout: Path) -> dict[str, Any] | None:
-    """The document of the application in a sibling checkout, in a subprocess.
+    """
+    The document of the application in a sibling checkout, in a subprocess.
 
     A subprocess so the gateway's imports — its dependencies, its logging
     configuration — never leak into this one, and so an environment that
     cannot import it says so cleanly and the fetch takes over.
     """
-    if not (checkout / "datalayer_jupyter_mcp_server").is_dir():
+    if not (checkout / "datalayer_mcp_server").is_dir():
         return None
     module, _, attribute = GATEWAY_APP.partition(":")
     code = (
@@ -137,13 +139,17 @@ def _read_from_checkout(checkout: Path) -> dict[str, Any] | None:
 
 
 def _read_from_url(url: str) -> dict[str, Any]:
-    with urlopen(Request(url, headers={"Accept": "application/json"}), timeout=15) as response:
+    if not url.startswith(("http://", "https://")):
+        raise ValueError(f"Not an HTTP(S) URL: {url}")
+    with urlopen(  # nosec B310 - the scheme is checked above
+        Request(url, headers={"Accept": "application/json"}), timeout=15
+    ) as response:
         return json.load(response)
 
 
 def read_openapi() -> dict[str, Any]:
     """The document, from the override, the sibling checkout or the deployed gateway."""
-    override = os.environ.get("DATALAYER_JUPYTER_MCP_OPENAPI", "").strip()
+    override = os.environ.get("DATALAYER_MCP_OPENAPI", "").strip()
     if override.startswith(("http://", "https://")):
         return _read_from_url(override)
     if override: