@datalayer/core 1.2.10 → 1.2.12

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

@@ -0,0 +1,82 @@
+/** The signed-in shell: the platform, the business cases, or the admin. */
+export type NavigationView = 'home' | 'agentify' | 'admin';
+/** The shells, and where each one opens when it has not been visited. */
+export declare const NAVIGATION_VIEW_HOMES: Record<NavigationView, string>;
+/** Well-known view identifiers for {@link NavigationState.tabsByView}. */
+export declare const LIBRARY_VIEW = "library";
+export declare const AGENTS_VIEW = "agents";
+export declare const SETTINGS_VIEW = "settings";
+export declare const DATALAYER_VIEW = "datalayer";
+export declare const CONTENTS_VIEW = "contents";
+export declare const TUTOR_VIEW = "tutor";
+export type NavigationState = {
+    /** The shell the reader last chose. */
+    view: NavigationView;
+    /** State which shell is being shown. */
+    setView: (view: NavigationView) => void;
+    /** Swap the platform and the business cases. */
+    toggleView: () => void;
+    /** The page each shell was last on. */
+    lastRouteByView: Partial<Record<NavigationView, string>>;
+    /**
+     * Remember a page as the current shell's, or as another's when told.
+     *
+     * Called by {@link useNavigate} for every navigation, which is what makes
+     * this the one place the answer comes from.
+     */
+    rememberRoute: (route: string, view?: NavigationView) => void;
+    /** Where a shell was left, or where it opens when it never was. */
+    routeForView: (view: NavigationView) => string;
+    /** Last selected tab, by view identifier. */
+    tabsByView: Record<string, string>;
+    /** Keep the tab a view was left on. */
+    setViewTab: (view: string, tab: string) => void;
+    /** The tab a view was left on, if any. */
+    getViewTab: (view: string) => string | undefined;
+    /**
+     * The route a signed-out reader asked for, to resume after signing in.
+     *
+     * Never persisted: a reload must land on the default route, and the OAuth
+     * round trip carries its target in `post_auth_redirect` instead.
+     */
+    requestedRoute?: string;
+    setRequestedRoute: (route: string) => void;
+    clearRequestedRoute: () => void;
+    /** The address the reader was on before the documentation. */
+    docsOrigin?: string;
+    setDocsOrigin: (origin: string) => void;
+};
+/**
+ * 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 declare function isRememberableRoute(route: string): boolean;
+/**
+ * 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 declare function viewForRoute(route: string): NavigationView;
+export declare const navigationStore: import("zustand").StoreApi<NavigationState>;
+/**
+ * The hook, shaped like a `zustand` store created with `create`: callable
+ * with or without a selector, and carrying `getState`, `setState` and
+ * `subscribe` for the callers — a router guard, a test — that read it outside
+ * a render.
+ */
+export interface UseNavigationStore {
+    (): NavigationState;
+    <T>(selector: (state: NavigationState) => T): T;
+    getState: () => NavigationState;
+    setState: typeof navigationStore.setState;
+    subscribe: typeof navigationStore.subscribe;
+}
+export declare const useNavigationStore: UseNavigationStore;
+export default useNavigationStore;

package/lib/state/substates/NavigationState.js

@@ -0,0 +1,255 @@
+/*
+ * 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 = {
+    home: '/',
+    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 === '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 }`.
+            persisted = parsed?.state ?? parsed ?? {};
+        }
+        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;
+    }
+    return persisted;
+}
+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];
+    if (path === '/agentify' || path.startsWith('/agentify/')) {
+        return 'agentify';
+    }
+    if (path === '/admin' || path.startsWith('/admin/')) {
+        return 'admin';
+    }
+    return 'home';
+}
+const initial = restore();
+export const navigationStore = createStore((set, get) => ({
+    view: initial.view ?? 'home',
+    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.
+        const remembered = get().lastRouteByView[view];
+        return remembered && viewForRoute(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/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/McpHome.js

@@ -75,7 +75,7 @@ const Summary = ({ icon: Icon, title, children, action, }) => (_jsxs(Box, { sx:
     }, 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 }) }))] }));
 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));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@datalayer/core",
-    "version": "1.2.10",
+    "version": "1.2.12",
     "type": "module",
     "workspaces": [
         ".",
@@ -111,8 +111,8 @@
     "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/jupyter-lexical": "^1.0.24",
+        "@datalayer/jupyter-react": "^2.0.15",
         "@datalayer/primer-addons": "^1.0.15",
         "@datalayer/primer-rjsf": "^1.0.3",
         "@fluentui/react": "^8.125.3",
@@ -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: