@datalayer/core 1.0.25 → 1.1.43

package/lib/views/api-keys/APIKeys.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /*
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
 import { useState, useEffect, useRef } from 'react';
-import { PageLayout, Button, IconButton, TextInput, Text, Label, RelativeTime, } from '@primer/react';
+import { PageLayout, Button, IconButton, Spinner, TextInput, Text, Label, RelativeTime, } from '@primer/react';
 import { Blankslate, Dialog, PageHeader, Table, DataTable, } from '@primer/react/experimental';
 import { Box } from '@datalayer/primer-addons';
 import { EditIcon } from '@datalayer/icons-react';
@@ -20,6 +20,10 @@ const APIKeysTable = ({ apiKeysListRoute, showTitle = true, }) => {
     const [deletingAPIKey, setDeletingAPIKey] = useState(null);
     const [deleteNameConfirm, setDeleteNameConfirm] = useState('');
     const returnFocusRef = useRef(null);
+    const showInitialSpinner = apiKeys.length === 0
+        && (getAPIKeysQuery.isLoading
+            || getAPIKeysQuery.isFetching
+            || !Array.isArray(getAPIKeysQuery.data));
     useEffect(() => {
         if (getAPIKeysQuery.data) {
             const normalized = getAPIKeysQuery.data.filter((apiKey) => Boolean(apiKey));
@@ -57,7 +61,12 @@ const APIKeysTable = ({ apiKeysListRoute, showTitle = true, }) => {
             },
         });
     };
-    return apiKeys.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [showTitle && _jsx(Blankslate.Heading, { children: "API Keys" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No API Keys found." }) })] })) : (_jsxs(_Fragment, { children: [_jsxs(Table.Container, { children: [showTitle && (_jsxs(_Fragment, { children: [_jsx(Table.Title, { as: "h2", id: "api-keys", children: "API Keys" }), _jsx(Table.Subtitle, { as: "p", id: "api-keys-subtitle", children: "Your API keys." })] })), _jsx(DataTable, { "aria-labelledby": "api-keys", "aria-describedby": "api-keys-subtitle", data: apiKeys, columns: [
+    return apiKeys.length === 0 ? (_jsx(Blankslate, { border: true, spacious: true, children: showInitialSpinner ? (_jsx(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                minHeight: '40px',
+            }, children: _jsx(Spinner, {}) })) : (_jsxs(_Fragment, { children: [showTitle && _jsx(Blankslate.Heading, { children: "API Keys" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No API Keys found." }) })] })) })) : (_jsxs(_Fragment, { children: [_jsxs(Table.Container, { children: [showTitle && (_jsxs(_Fragment, { children: [_jsx(Table.Title, { as: "h2", id: "api-keys", children: "API Keys" }), _jsx(Table.Subtitle, { as: "p", id: "api-keys-subtitle", children: "Your API keys." })] })), _jsx(DataTable, { "aria-labelledby": "api-keys", "aria-describedby": "api-keys-subtitle", data: apiKeys, columns: [
                             {
                                 header: 'Type',
                                 field: 'variant',

package/lib/views/datasources/DatasourceDetail.d.ts

@@ -2,7 +2,7 @@ export type DatasourceDetailProps = {
     /** Optional principal uid used to scope datasource reads/updates. */
     principalUid?: string;
     /** Optional principal kind used to scope datasource reads/updates. */
-    principalKind?: 'user' | 'organization' | 'team';
+    principalKind?: 'personal' | 'organization' | 'team';
 };
 export declare const DatasourceDetail: ({ principalUid, principalKind, }?: DatasourceDetailProps) => import("react/jsx-runtime").JSX.Element;
 export default DatasourceDetail;

package/lib/views/datasources/DatasourceNew.d.ts

@@ -7,7 +7,7 @@ export type DatasourceNewProps = {
     /** Optional principal uid used to scope datasource creation. */
     principalUid?: string;
     /** Optional principal kind used to scope datasource creation. */
-    principalKind?: 'user' | 'organization' | 'team';
+    principalKind?: 'personal' | 'organization' | 'team';
     /** Optional contextual principal summary rendered below the page intro. */
     accountPrincipal?: ReactNode;
 };

package/lib/views/datasources/Datasources.d.ts

@@ -6,7 +6,7 @@ export type DatasourcesProps = {
     /** Optional principal uid used to scope datasource reads. */
     principalUid?: string;
     /** Optional principal kind used to scope datasource reads. */
-    principalKind?: 'user' | 'organization' | 'team';
+    principalKind?: 'personal' | 'organization' | 'team';
 };
 export declare const Datasources: ({ newDatasourceRoute, datasourcesListRoute, principalUid, principalKind, }?: DatasourcesProps) => import("react/jsx-runtime").JSX.Element;
 export default Datasources;

package/lib/views/datasources/Datasources.js

@@ -1,10 +1,10 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /*
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
 import { useState, useEffect } from 'react';
-import { PageLayout, Button, IconButton, Text, Label, Heading, } from '@primer/react';
+import { PageLayout, Button, IconButton, Spinner, Text, Label, Heading, } from '@primer/react';
 import { Blankslate, Table, DataTable } from '@primer/react/experimental';
 import { DatabaseIcon } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
@@ -15,12 +15,21 @@ const DatasourcesTable = ({ datasourcesListRoute, principalUid, principalKind, }
     const datasourcesQuery = useDatasources({ principalUid, principalKind });
     const navigate = useNavigate();
     const [datasources, setDatasources] = useState([]);
+    const showInitialSpinner = datasources.length === 0
+        && (datasourcesQuery.isLoading
+            || datasourcesQuery.isFetching
+            || !Array.isArray(datasourcesQuery.data));
     useEffect(() => {
         if (datasourcesQuery.data) {
             setDatasources(datasourcesQuery.data || []);
         }
     }, [datasourcesQuery.data]);
-    return datasources.length === 0 ? (_jsxs(Blankslate, { border: true, spacious: true, children: [_jsx(Blankslate.Heading, { children: "Datasources" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No Datasources found." }) })] })) : (_jsx(Table.Container, { children: _jsx(DataTable, { "aria-labelledby": "teams", "aria-describedby": "teams-subtitle", data: datasources, columns: [
+    return datasources.length === 0 ? (_jsx(Blankslate, { border: true, spacious: true, children: showInitialSpinner ? (_jsx(Box, { sx: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                minHeight: '40px',
+            }, children: _jsx(Spinner, {}) })) : (_jsxs(_Fragment, { children: [_jsx(Blankslate.Heading, { children: "Datasources" }), _jsx(Blankslate.Description, { children: _jsx(Text, { sx: { textAlign: 'center' }, children: "No Datasources found." }) })] })) })) : (_jsx(Table.Container, { children: _jsx(DataTable, { "aria-labelledby": "teams", "aria-describedby": "teams-subtitle", data: datasources, columns: [
                 // @ts-ignore
                 {
                     header: 'Type',

package/lib/views/iam/SignInSimple.d.ts

@@ -5,7 +5,7 @@
  * `{ handle, password }`, then calls `onSignIn(token, handle)` on
  * success so the caller can persist credentials as needed.
  *
- * @module views/signin
+ * @module views/iam
  */
 import React from 'react';
 export interface SignInSimpleProps {
@@ -25,19 +25,55 @@ export interface SignInSimpleProps {
      * `{ success: boolean; token?: string; message?: string }`.
      */
     loginUrl?: string;
+    /**
+     * Optional product/app name shown as heading.
+     */
+    name?: string;
     /**
      * Optional heading text.  Defaults to `"Datalayer OTEL"`.
+     * @deprecated Use `name`.
      */
     title?: string;
     /**
      * Optional subtitle / description.
      */
     description?: string;
+    /**
+     * Optional icon element rendered next to the heading.
+     */
+    icon?: React.ReactNode;
     /**
      * Leading icon element rendered next to the title.
      * Defaults to `<TelescopeIcon size={24} />`.
+     * @deprecated Use `icon`.
      */
     leadingIcon?: React.ReactNode;
+    /**
+     * Show GitHub OAuth sign-in button.
+     */
+    github?: boolean;
+    /**
+     * Show Google OAuth sign-in button.
+     */
+    google?: boolean;
+    /**
+     * Show LinkedIn OAuth sign-in button.
+     */
+    linkedin?: boolean;
+    /**
+     * Show API key sign-in button.
+     */
+    apiKey?: boolean;
+    /**
+     * Show sign up button.
+     */
+    signUp?: boolean;
+    /**
+     * Optional target route to navigate to after social sign-in callback.
+     * - `undefined` keeps current behavior (use current route when not `/`).
+     * - `null`/empty disables forwarding any callback navigation target.
+     */
+    socialSignInNavigationTarget?: string | null;
 }
 export declare const SignInSimple: React.FC<SignInSimpleProps>;
 export default SignInSimple;

package/lib/views/iam/SignInSimple.js

@@ -10,29 +10,122 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * `{ handle, password }`, then calls `onSignIn(token, handle)` on
  * success so the caller can persist credentials as needed.
  *
- * @module views/signin
+ * @module views/iam
  */
 import { useState, useCallback, useRef, useMemo, useEffect, } from 'react';
+import { PageConfig, URLExt } from '@jupyterlab/coreutils';
 import { Box, Button, FormControl, Heading, Text, Textarea, TextInput, } from '@primer/react';
 import { EyeIcon, EyeClosedIcon, KeyIcon, LinkExternalIcon, TelescopeIcon, } from '@primer/octicons-react';
-import { coreStore } from '../../state/index.js';
+import { GithubMarkIcon, LinkedInGreyIcon } from '@datalayer/icons-react';
+import { isInsideJupyterLab } from '../../utils/Jupyter.js';
+const GoogleIcon = () => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: "xMidYMid", viewBox: "0 0 256 262", height: "16px", fill: "currentColor", "aria-hidden": "true", children: [_jsx("path", { fill: "currentColor", d: "M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" }), _jsx("path", { fill: "currentColor", d: "M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" }), _jsx("path", { fill: "currentColor", d: "M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" }), _jsx("path", { fill: "currentColor", d: "M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" })] }));
+const OAUTH2_PROVIDERS = {
+    github: {
+        name: 'github',
+        oauth2CallbackServerRoute: 'jupyter_iam/oauth2/callback',
+        oauth2CallbackUIRoute: '/iam/oauth2/github/callback',
+    },
+    google: {
+        name: 'google',
+        oauth2CallbackServerRoute: 'jupyter_iam/oauth2/callback',
+        oauth2CallbackUIRoute: '/iam/oauth2/google/callback',
+    },
+    linkedin: {
+        name: 'linkedin',
+        oauth2CallbackServerRoute: 'jupyter_iam/oauth2/callback',
+        oauth2CallbackUIRoute: '/iam/oauth2/linkedin/callback',
+    },
+};
+const getIAMUrlFromDocumentConfig = () => {
+    if (typeof document === 'undefined') {
+        return '';
+    }
+    const configScript = document.getElementById('datalayer-config-data');
+    if (!configScript?.textContent) {
+        return '';
+    }
+    try {
+        const config = JSON.parse(configScript.textContent);
+        return String(config?.iamUrl || '').replace(/\/$/, '');
+    }
+    catch {
+        return '';
+    }
+};
 // ── Component ────────────────────────────────────────────────────────
-export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp, title = 'Datalayer OTEL', description = 'Sign in to access the observability dashboard.', leadingIcon = _jsx(TelescopeIcon, { size: 24 }), }) => {
+export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp, name, title = 'Datalayer OTEL', description = 'Sign in to access the observability dashboard.', icon, leadingIcon = _jsx(TelescopeIcon, { size: 24 }), github = false, google = false, linkedin = false, apiKey = false, signUp = true, socialSignInNavigationTarget, }) => {
+    const headingText = name ?? title;
+    const headingIcon = icon ?? leadingIcon;
     const loginUrl = useMemo(() => {
         if (loginUrlProp)
             return loginUrlProp;
-        const iamRunUrl = coreStore.getState().configuration?.iamRunUrl;
-        return iamRunUrl ? `${iamRunUrl}/api/iam/v1/login` : '/api/iam/v1/login';
+        const iamUrl = getIAMUrlFromDocumentConfig();
+        return iamUrl ? `${iamUrl}/api/iam/v1/login` : '/api/iam/v1/login';
     }, [loginUrlProp]);
     const [handle, setHandle] = useState('');
     const [password, setPassword] = useState('');
     const [showPassword, setShowPassword] = useState(false);
     const [loading, setLoading] = useState(false);
+    const [socialLoading, setSocialLoading] = useState(false);
     const [error, setError] = useState(null);
     // API Key dialog state
     const [showApiKeyDialog, setShowApiKeyDialog] = useState(false);
-    const [apiKey, setApiKey] = useState('');
+    const [apiKeyValue, setApiKeyValue] = useState('');
     const apiKeyRef = useRef(null);
+    const buildCallbackURI = useCallback((providerSpec) => {
+        if (isInsideJupyterLab()) {
+            return URLExt.join(PageConfig.getBaseUrl(), providerSpec.oauth2CallbackServerRoute);
+        }
+        return `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}${providerSpec.oauth2CallbackUIRoute}`;
+    }, []);
+    const currentRelativeRoute = useMemo(() => {
+        if (typeof window === 'undefined') {
+            return '/';
+        }
+        const route = `${window.location.pathname}${window.location.search}${window.location.hash}`;
+        return route.startsWith('/') ? route : '/';
+    }, []);
+    const startOAuthSignIn = useCallback(async (providerSpec) => {
+        setError(null);
+        setSocialLoading(true);
+        try {
+            const iamUrl = getIAMUrlFromDocumentConfig();
+            const params = new URLSearchParams({
+                provider: providerSpec.name,
+                callback_uri: buildCallbackURI(providerSpec),
+            });
+            const explicitNavigationTarget = socialSignInNavigationTarget === undefined
+                ? undefined
+                : String(socialSignInNavigationTarget || '').trim();
+            const callbackNavigationTarget = explicitNavigationTarget === undefined
+                ? currentRelativeRoute && currentRelativeRoute !== '/'
+                    ? currentRelativeRoute
+                    : undefined
+                : explicitNavigationTarget &&
+                    explicitNavigationTarget.startsWith('/') &&
+                    !explicitNavigationTarget.startsWith('//')
+                    ? explicitNavigationTarget
+                    : undefined;
+            if (callbackNavigationTarget) {
+                params.set('post_auth_redirect', callbackNavigationTarget);
+            }
+            const endpointBase = iamUrl || '';
+            const endpoint = `${endpointBase}/api/iam/v1/oauth2/authz/url?${params.toString()}`;
+            const response = await fetch(endpoint);
+            const payload = await response.json();
+            const authorizationURL = payload?.autorization_url;
+            if (!response.ok || !authorizationURL) {
+                throw new Error(payload?.message || 'Unable to start social sign-in.');
+            }
+            window.location.assign(authorizationURL);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Unable to start social sign-in.');
+        }
+        finally {
+            setSocialLoading(false);
+        }
+    }, [buildCallbackURI, currentRelativeRoute, socialSignInNavigationTarget]);
     useEffect(() => {
         if (showApiKeyDialog) {
             apiKeyRef.current?.focus();
@@ -40,14 +133,14 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
     }, [showApiKeyDialog]);
     const closeApiKeyDialog = useCallback(() => {
         setShowApiKeyDialog(false);
-        setApiKey('');
+        setApiKeyValue('');
     }, []);
     const handleApiKeyAuthenticate = useCallback(() => {
-        if (!apiKey.trim() || !onApiKeySignIn)
+        if (!apiKeyValue.trim() || !onApiKeySignIn)
             return;
-        onApiKeySignIn(apiKey.trim());
+        onApiKeySignIn(apiKeyValue.trim());
         closeApiKeyDialog();
-    }, [apiKey, onApiKeySignIn, closeApiKeyDialog]);
+    }, [apiKeyValue, onApiKeySignIn, closeApiKeyDialog]);
     const handleSignUp = useCallback(() => {
         window.open('https://datalayer.ai/signup', '_blank', 'noopener,noreferrer');
     }, []);
@@ -104,7 +197,12 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
                         gap: 2,
                         mb: 4,
                         justifyContent: 'center',
-                    }, children: [leadingIcon, _jsx(Heading, { sx: { fontSize: 3 }, children: title })] }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', mb: 3, textAlign: 'center' }, children: description }), _jsxs(FormControl, { required: true, sx: { mb: 3 }, children: [_jsx(FormControl.Label, { children: "Username" }), _jsx(TextInput, { autoFocus: true, block: true, placeholder: "Your username", value: handle, onChange: e => setHandle(e.target.value), onKeyDown: handleKeyDown })] }), _jsxs(FormControl, { required: true, sx: { mb: 3 }, children: [_jsx(FormControl.Label, { children: "Password" }), _jsx(TextInput, { block: true, placeholder: "Your password", type: showPassword ? 'text' : 'password', value: password, onChange: e => setPassword(e.target.value), onKeyDown: handleKeyDown, trailingAction: _jsx(TextInput.Action, { onClick: () => setShowPassword(!showPassword), icon: showPassword ? EyeClosedIcon : EyeIcon, "aria-label": showPassword ? 'Hide password' : 'Show password', sx: { color: 'var(--fgColor-muted)' } }) })] }), error && (_jsx(Text, { sx: { color: 'danger.fg', fontSize: 1, mb: 3, display: 'block' }, children: error })), _jsx(Button, { variant: "primary", block: true, disabled: loading || !handle || !password, onClick: submit, children: loading ? 'Signing in…' : 'Sign in' }), _jsx(Box, { sx: { mt: 2, display: 'flex', justifyContent: 'center' }, children: _jsx(Button, { size: "small", variant: "invisible", leadingVisual: LinkExternalIcon, onClick: handleSignUp, children: "Sign Up" }) }), onApiKeySignIn && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                    }, children: [headingIcon, _jsx(Heading, { sx: { fontSize: 3 }, children: headingText })] }), _jsx(Text, { as: "p", sx: { fontSize: 1, color: 'fg.muted', mb: 3, textAlign: 'center' }, children: description }), _jsxs(FormControl, { required: true, sx: { mb: 3 }, children: [_jsx(FormControl.Label, { children: "Username" }), _jsx(TextInput, { autoFocus: true, block: true, placeholder: "Your username", value: handle, onChange: e => setHandle(e.target.value), onKeyDown: handleKeyDown })] }), _jsxs(FormControl, { required: true, sx: { mb: 3 }, children: [_jsx(FormControl.Label, { children: "Password" }), _jsx(TextInput, { block: true, placeholder: "Your password", type: showPassword ? 'text' : 'password', value: password, onChange: e => setPassword(e.target.value), onKeyDown: handleKeyDown, trailingAction: _jsx(TextInput.Action, { onClick: () => setShowPassword(!showPassword), icon: showPassword ? EyeClosedIcon : EyeIcon, "aria-label": showPassword ? 'Hide password' : 'Show password', sx: { color: 'var(--fgColor-muted)' } }) })] }), error && (_jsx(Text, { sx: { color: 'danger.fg', fontSize: 1, mb: 3, display: 'block' }, children: error })), _jsx(Button, { variant: "primary", block: true, disabled: loading || !handle || !password, onClick: submit, children: loading ? 'Signing in…' : 'Sign in' }), (github || google || linkedin) && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                                display: 'flex',
+                                alignItems: 'center',
+                                gap: 2,
+                                my: 3,
+                            }, children: [_jsx(Box, { sx: { flex: 1, height: '1px', bg: 'border.default' } }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "or" }), _jsx(Box, { sx: { flex: 1, height: '1px', bg: 'border.default' } })] }), github && (_jsx(Button, { block: true, leadingVisual: GithubMarkIcon, disabled: socialLoading, onClick: () => startOAuthSignIn(OAUTH2_PROVIDERS.github), sx: { mb: 2 }, children: "Sign in with GitHub" })), google && (_jsx(Button, { block: true, leadingVisual: GoogleIcon, disabled: socialLoading, onClick: () => startOAuthSignIn(OAUTH2_PROVIDERS.google), sx: { mb: linkedin ? 2 : 0 }, children: "Sign in with Google" })), linkedin && (_jsx(Button, { block: true, leadingVisual: LinkedInGreyIcon, disabled: socialLoading, onClick: () => startOAuthSignIn(OAUTH2_PROVIDERS.linkedin), children: "Sign in with LinkedIn" }))] })), signUp && (_jsx(Box, { sx: { mt: 2, display: 'flex', justifyContent: 'center' }, children: _jsx(Button, { size: "small", variant: "invisible", leadingVisual: LinkExternalIcon, onClick: handleSignUp, children: "Sign Up" }) })), apiKey && onApiKeySignIn && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
                                 display: 'flex',
                                 alignItems: 'center',
                                 gap: 2,
@@ -134,11 +232,11 @@ export const SignInSimple = ({ onSignIn, onApiKeySignIn, loginUrl: loginUrlProp,
                                     bg: 'canvas.overlay',
                                     color: 'fg.default',
                                     boxShadow: 'shadow.large',
-                                }, children: [_jsx(Heading, { id: "signin-api-key-title", sx: { fontSize: 2, mb: 2 }, children: "Enter your API Key" }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "API Key" }), _jsx(Textarea, { block: true, required: true, autoFocus: true, placeholder: "Paste your API key here", value: apiKey, onInput: (e) => setApiKey(e.target.value), ref: apiKeyRef })] }), _jsxs(Box, { sx: {
+                                }, children: [_jsx(Heading, { id: "signin-api-key-title", sx: { fontSize: 2, mb: 2 }, children: "Enter your API Key" }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "API Key" }), _jsx(Textarea, { block: true, required: true, autoFocus: true, placeholder: "Paste your API key here", value: apiKeyValue, onInput: (e) => setApiKeyValue(e.target.value), ref: apiKeyRef })] }), _jsxs(Box, { sx: {
                                             mt: 3,
                                             display: 'flex',
                                             justifyContent: 'flex-end',
                                             gap: 2,
-                                        }, children: [_jsx(Button, { type: "button", onClick: closeApiKeyDialog, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", disabled: !apiKey.trim(), children: "Authenticate" })] })] }) }))] }))] }) }));
+                                        }, children: [_jsx(Button, { type: "button", onClick: closeApiKeyDialog, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", disabled: !apiKeyValue.trim(), children: "Authenticate" })] })] }) }))] }))] }) }));
 };
 export default SignInSimple;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/core",
-  "version": "1.0.25",
+  "version": "1.1.43",
   "type": "module",
   "workspaces": [
     ".",
@@ -51,8 +51,9 @@
     "clean:lib": "rimraf lib tsconfig.tsbuildinfo",
     "clean:dist": "rimraf dist",
     "clean:cache": "rimraf node_modules/.vite",
-    "build": "npm run clean && gulp resources-to-lib && tsc -b && vite build",
+    "build": "npm run clean && gulp resources-to-lib && tsc -b && vite build && vite build --config vite.cli-login.config.ts",
     "build:lib": "npm run clean:lib && gulp resources-to-lib && tsc -b && node scripts/fix-esm-imports.cjs",
+    "build:cli-login": "vite build --config vite.cli-login.config.ts",
     "build:types": "npm run clean:lib && tsc -b",
     "build:nextjs": "npm run build --workspace=nextjj-example",
     "build:examples": "npm run build:nextjs",
@@ -89,7 +90,7 @@
     "watch:lib:src": "tsc -b -w",
     "type-check:watch": "tsc -b -w --noEmit",
     "examples": "run-p jupyter:start examples:vite",
-    "examples:vite": "VITE_DATALAYER_RUN_URL=http://localhost:8888 vite --config vite.examples.config.ts",
+    "examples:vite": "VITE_DATALAYER_URL=http://localhost:8888 vite --config vite.examples.config.ts",
     "examples:nextjs": "npm run dev --workspace=nextjj-example",
     "jupyter:start": "./dev/sh/start-jupyter-server.sh",
     "prepare": "husky || true",
@@ -102,6 +103,7 @@
     "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",

package/lib/App.css

@@ -1,47 +0,0 @@
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  /*  text-align: center; */
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

package/lib/App.d.ts

@@ -1,3 +0,0 @@
-import './App.css';
-export declare function App(): import("react/jsx-runtime").JSX.Element;
-export default App;

package/lib/App.js

@@ -1,21 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-/*
- * Copyright (c) 2023-2025 Datalayer, Inc.
- * Distributed under the terms of the Modified BSD License.
- */
-import { useState } from 'react';
-import reactLogo from './assets/react.svg';
-import { useJupyter, JupyterReactTheme } from '@datalayer/jupyter-react';
-import { CellExample } from './examples/CellExample.js';
-import { NotebookExample } from './examples/NotebookExample.js';
-import './App.css';
-export function App() {
-    const { serviceManager } = useJupyter({
-        jupyterServerUrl: 'https://oss.datalayer.run/api/jupyter-server',
-        jupyterServerToken: '60c1661cc408f978c309d04157af55c9588ff9557c9380e4fb50785750703da6',
-        startDefaultKernel: true,
-    });
-    const [count, setCount] = useState(0);
-    return (_jsxs("div", { className: "App", children: [_jsx(_Fragment, { children: _jsxs(JupyterReactTheme, { children: [serviceManager && _jsx(CellExample, { serviceManager: serviceManager }), serviceManager && (_jsx(NotebookExample, { serviceManager: serviceManager }))] }) }), _jsxs("div", { children: [_jsx("a", { href: "https://reactjs.org", target: "_blank", rel: "noreferrer", children: _jsx("img", { src: reactLogo, className: "logo react", alt: "React logo" }) }), _jsx("a", { href: "https://vitejs.dev", target: "_blank", rel: "noreferrer", children: _jsx("img", { src: "/vite.svg", className: "logo", alt: "Vite logo" }) })] }), _jsx("h1", { children: "React + Vite" }), _jsx("h2", { children: "On CodeSandbox!" }), _jsxs("div", { className: "card", children: [_jsxs("button", { onClick: () => setCount(count => count + 1), children: ["count is ", count] }), _jsxs("p", { children: ["Edit ", _jsx("code", { children: "src/App.tsx" }), " and save to test HMR."] }), _jsx("p", { children: "Tip: you can use the inspector button next to address bar to click on components in the preview and open the code in the editor!" })] }), _jsx("p", { className: "read-the-docs", children: "Click on the Vite and React logos to learn more" })] }));
-}
-export default App;

package/lib/api/runtimes/checkpoints.d.ts

@@ -1,122 +0,0 @@
-/**
- * A single runtime checkpoint record.
- */
-export interface RuntimeCheckpointData {
-    /** Unique identifier (ULID) */
-    id: string;
-    /** Human-readable name */
-    name: string;
-    /** Checkpoint description */
-    description: string;
-    /** Runtime that was checkpointed */
-    runtime_uid: string;
-    /** Agentspec identifier (e.g. "mocks/monitor-sales-kpis") */
-    agent_spec_id: string;
-    /** Full agentspec payload */
-    agentspec: Record<string, any>;
-    /** Additional metadata */
-    metadata: Record<string, any>;
-    /** Checkpoint mode: criu (full) or light (history-only) */
-    checkpoint_mode?: 'criu' | 'light';
-    /** Lightweight checkpoint message history */
-    messages?: string[];
-    /** Status: requested | created | failed | deleted */
-    status: string;
-    /** Human-readable details about the current status (e.g. error message) */
-    status_message?: string;
-    /** ISO 8601 timestamp */
-    updated_at: string;
-}
-/**
- * Request payload for creating a checkpoint.
- */
-export interface CreateRuntimeCheckpointRequest {
-    /** Runtime UID of the runtime that was checkpointed */
-    runtime_uid: string;
-    /** Human-readable name */
-    name?: string;
-    /** Checkpoint description */
-    description?: string;
-    /** Agentspec identifier */
-    agentspec_id?: string;
-    /** Full agentspec payload to persist */
-    agentspec?: Record<string, any>;
-    /** Additional metadata */
-    metadata?: Record<string, any>;
-}
-/**
- * Response for listing checkpoints.
- */
-export interface ListRuntimeCheckpointsResponse {
-    success: boolean;
-    message: string;
-    checkpoints: RuntimeCheckpointData[];
-}
-/**
- * Response for getting a single checkpoint.
- */
-export interface GetRuntimeCheckpointResponse {
-    success: boolean;
-    message: string;
-    checkpoint: RuntimeCheckpointData;
-}
-/**
- * Response for creating a checkpoint.
- */
-export interface CreateRuntimeCheckpointResponse {
-    success: boolean;
-    message: string;
-    checkpoint: RuntimeCheckpointData;
-}
-/**
- * List runtime checkpoints for a specific runtime.
- * @param token - Authentication token
- * @param baseUrl - Base URL for the runtimes API
- * @param runtimeUid - Runtime UID to list checkpoints for
- * @returns Promise resolving to list of checkpoints
- */
-export declare const listCheckpoints: (token: string, baseUrl?: string, runtimeUid?: string) => Promise<ListRuntimeCheckpointsResponse>;
-/**
- * Get a single runtime checkpoint by ID.
- * @param token - Authentication token
- * @param runtimeUid - The runtime UID
- * @param checkpointId - The checkpoint ID (ULID)
- * @param baseUrl - Base URL for the runtimes API
- * @returns Promise resolving to checkpoint details
- */
-export declare const getCheckpoint: (token: string, runtimeUid: string, checkpointId: string, baseUrl?: string) => Promise<GetRuntimeCheckpointResponse>;
-/**
- * Create a checkpoint record (after a CRIU checkpoint has been taken).
- * @param token - Authentication token
- * @param data - Checkpoint creation payload (runtime_uid, agentspec, etc.)
- * @param baseUrl - Base URL for the runtimes API
- * @returns Promise resolving to the created checkpoint
- */
-export declare const createCheckpoint: (token: string, data: CreateRuntimeCheckpointRequest, baseUrl?: string) => Promise<CreateRuntimeCheckpointResponse>;
-/**
- * Poll a checkpoint until it reaches one of the target statuses.
- *
- * Useful for waiting until an async pause (status "paused")
- * completes before proceeding.  Checkpoint status stays "paused"
- * during resume — only the agent runtime status transitions.
- *
- * @param token - Authentication token
- * @param runtimeUid - The runtime UID that owns the checkpoint
- * @param checkpointId - The checkpoint ID (ULID) to poll
- * @param targetStatuses - Set of statuses that signal completion (e.g. ["paused", "failed"])
- * @param baseUrl - Base URL for the runtimes API
- * @param intervalMs - Polling interval in milliseconds (default: 2000)
- * @param timeoutMs - Maximum wait time in milliseconds (default: 600000 = 10 min)
- * @returns Promise resolving to the checkpoint data once a target status is reached
- * @throws {Error} If polling times out or the request fails
- */
-export declare const waitForCheckpointStatus: (token: string, runtimeUid: string, checkpointId: string, targetStatuses: string[], baseUrl?: string, intervalMs?: number, timeoutMs?: number) => Promise<RuntimeCheckpointData>;
-/**
- * Delete a runtime checkpoint.
- * @param token - Authentication token
- * @param runtimeUid - The runtime UID that owns the checkpoint
- * @param checkpointId - The checkpoint ID (ULID) to delete
- * @param baseUrl - Base URL for the runtimes API
- * @returns Promise resolving when deletion is complete
- */
-export declare const deleteCheckpoint: (token: string, runtimeUid: string, checkpointId: string, baseUrl?: string) => Promise<void>;