@datalayer/agent-runtimes 0.0.5 → 0.0.8

package/lib/examples/main.js

@@ -10,6 +10,7 @@ import { loadJupyterConfig, JupyterReactTheme, createServerSettings, setJupyterS
 import { ServiceManager } from '@jupyterlab/services';
 import { coreStore, iamStore, createDatalayerServiceManager, } from '@datalayer/core';
 import { useChatStore } from '../components/chat/store';
+import { OAuthCallback } from '../identity';
 import { EXAMPLES } from './example-selector';
 import nbformatExample from './stores/notebooks/NotebookExample1.ipynb.json';
 // Load configurations from DOM
@@ -94,6 +95,14 @@ const isNotebookOnlyRoute = () => {
     console.log('Is notebook-only route:', isNotebookRoute);
     return isNotebookRoute;
 };
+// Check if we're handling an OAuth callback (code and state in URL params)
+const isOAuthCallback = () => {
+    const params = new URLSearchParams(window.location.search);
+    const hasCode = params.has('code');
+    const hasState = params.has('state');
+    const hasError = params.has('error');
+    return (hasCode && hasState) || hasError;
+};
 // Get the default example name from localStorage
 const getDefaultExampleName = () => {
     const stored = localStorage.getItem('selectedExample');
@@ -320,7 +329,12 @@ export const ExampleApp = () => {
 // Mount the app - check route to determine which app to render
 const root = document.getElementById('root');
 if (root) {
-    if (isNotebookOnlyRoute()) {
+    if (isOAuthCallback()) {
+        // Handle OAuth callback - render OAuthCallback component
+        console.log('Rendering OAuthCallback (popup flow)');
+        createRoot(root).render(_jsx(JupyterReactTheme, { children: _jsx(OAuthCallback, { autoClose: true, autoCloseDelay: 1000 }) }));
+    }
+    else if (isNotebookOnlyRoute()) {
         console.log('Rendering NotebookOnlyApp');
         createRoot(root).render(_jsx(NotebookOnlyApp, {}));
     }

package/lib/identity/IdentityConnect.d.ts

@@ -0,0 +1,90 @@
+import React from 'react';
+import type { OAuthProvider, OAuthProviderConfig, Identity } from './types';
+/**
+ * Props for IdentityButton component
+ */
+export interface IdentityButtonProps {
+    /** Provider type */
+    provider: OAuthProvider;
+    /** OAuth client ID (required for connecting) */
+    clientId?: string;
+    /** Custom provider configuration (for custom providers) */
+    providerConfig?: Partial<OAuthProviderConfig>;
+    /** Scopes to request (defaults to provider defaults) */
+    scopes?: string[];
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Size variant */
+    size?: 'small' | 'medium' | 'large';
+    /** Show full provider info or just icon */
+    variant?: 'full' | 'compact' | 'icon';
+    /** Callback when connection completes */
+    onConnect?: (identity: Identity) => void;
+    /** Callback when disconnection completes */
+    onDisconnect?: (provider: OAuthProvider) => void;
+    /** Callback when error occurs */
+    onError?: (error: Error) => void;
+}
+/**
+ * Single provider connect/disconnect button
+ */
+export declare const IdentityButton: React.FC<IdentityButtonProps>;
+/**
+ * Props for IdentityConnect component
+ */
+export interface IdentityConnectProps {
+    /** Provider configurations with client IDs */
+    providers: {
+        [K in OAuthProvider]?: {
+            clientId: string;
+            scopes?: string[];
+            config?: Partial<OAuthProviderConfig>;
+        };
+    };
+    /** Layout variant */
+    layout?: 'list' | 'grid' | 'inline';
+    /** Show title/header */
+    showHeader?: boolean;
+    /** Custom title */
+    title?: string;
+    /** Size variant */
+    size?: 'small' | 'medium' | 'large';
+    /** Whether to show descriptions */
+    showDescriptions?: boolean;
+    /** Callback when any identity connects */
+    onConnect?: (identity: Identity) => void;
+    /** Callback when any identity disconnects */
+    onDisconnect?: (provider: OAuthProvider) => void;
+    /** Callback when error occurs */
+    onError?: (provider: OAuthProvider, error: Error) => void;
+    /** Whether all buttons are disabled */
+    disabled?: boolean;
+}
+/**
+ * Multi-provider identity connection panel
+ */
+export declare const IdentityConnect: React.FC<IdentityConnectProps>;
+/**
+ * Props for IdentityMenu component
+ */
+export interface IdentityMenuProps {
+    /** Provider configurations with client IDs */
+    providers: {
+        [K in OAuthProvider]?: {
+            clientId: string;
+            scopes?: string[];
+            config?: Partial<OAuthProviderConfig>;
+        };
+    };
+    /** Callback when any identity connects */
+    onConnect?: (identity: Identity) => void;
+    /** Callback when any identity disconnects */
+    onDisconnect?: (provider: OAuthProvider) => void;
+    /** Whether the menu is disabled */
+    disabled?: boolean;
+}
+/**
+ * Dropdown menu for identity management
+ */
+export declare const IdentityMenu: React.FC<IdentityMenuProps>;
+export default IdentityConnect;

package/lib/identity/IdentityConnect.js

@@ -0,0 +1,316 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import React, { useCallback } from 'react';
+import { Box, Text, Button, Label, Flash, ActionList, ActionMenu, Avatar, } from '@primer/react';
+import { MarkGithubIcon, LinkIcon, UnlinkIcon, CheckCircleFillIcon, AlertIcon, KeyIcon, } from '@primer/octicons-react';
+import { useIdentity } from './useIdentity';
+import { GITHUB_PROVIDER, GOOGLE_PROVIDER, KAGGLE_PROVIDER } from './types';
+/**
+ * Provider-specific display configurations.
+ * - GitHub: Uses official GitHub icon and dark theme color
+ * - Google: Uses key icon placeholder and Google blue
+ * - Kaggle: Uses key icon placeholder and Kaggle cyan
+ */
+const PROVIDER_DISPLAY = {
+    github: {
+        name: 'GitHub',
+        icon: MarkGithubIcon, // Official GitHub Octicon
+        color: '#24292f', // GitHub dark theme color
+        description: 'Access GitHub repositories and APIs',
+    },
+    google: {
+        name: 'Google',
+        icon: KeyIcon, // Would use Google icon if available
+        color: '#4285f4',
+        description: 'Access Google services and APIs',
+    },
+    kaggle: {
+        name: 'Kaggle',
+        icon: KeyIcon, // Would use Kaggle icon if available
+        color: '#20beff',
+        description: 'Access Kaggle datasets and notebooks',
+    },
+    linkedin: {
+        name: 'LinkedIn',
+        icon: KeyIcon,
+        color: '#0077b5',
+        description: 'Access LinkedIn profile and connections',
+    },
+    slack: {
+        name: 'Slack',
+        icon: KeyIcon,
+        color: '#4a154b',
+        description: 'Access Slack workspaces and channels',
+    },
+    notion: {
+        name: 'Notion',
+        icon: KeyIcon,
+        color: '#000000',
+        description: 'Access Notion pages and databases',
+    },
+    custom: {
+        name: 'Custom',
+        icon: LinkIcon,
+        color: '#6f42c1',
+        description: 'Custom OAuth provider',
+    },
+};
+/**
+ * Default OAuth scopes for common providers.
+ * - GitHub: read:user and user:email for basic profile access
+ * - Google: OpenID Connect scopes for profile and email
+ * - Kaggle: read access for datasets
+ */
+const DEFAULT_SCOPES = {
+    github: ['read:user', 'user:email'], // GitHub scopes for user profile
+    google: ['openid', 'profile', 'email'], // OpenID Connect scopes
+    kaggle: ['read'],
+    linkedin: ['r_liteprofile', 'r_emailaddress'],
+    slack: ['users:read', 'channels:read'],
+    notion: ['read_content'],
+    custom: [],
+};
+/**
+ * Single provider connect/disconnect button
+ */
+export const IdentityButton = ({ provider, clientId, providerConfig, scopes, disabled = false, size = 'medium', variant = 'full', onConnect, onDisconnect, onError, }) => {
+    const { identities, isAuthorizing, error, connectWithPopup, disconnect, configureProvider, } = useIdentity();
+    const display = PROVIDER_DISPLAY[provider] || PROVIDER_DISPLAY.custom;
+    const identity = identities.find(id => id.provider === provider);
+    const isConnected = !!identity;
+    const isPending = isAuthorizing;
+    // Configure provider on mount if clientId is provided
+    React.useEffect(() => {
+        if (clientId) {
+            const baseConfig = provider === 'github'
+                ? GITHUB_PROVIDER
+                : provider === 'google'
+                    ? GOOGLE_PROVIDER
+                    : provider === 'kaggle'
+                        ? KAGGLE_PROVIDER
+                        : undefined;
+            if (baseConfig) {
+                // Build redirect URI from current page URL (without query params) if not provided
+                // This allows OAuth callback to return to the same page that initiated the flow
+                const redirectUri = providerConfig?.redirectUri ||
+                    (typeof window !== 'undefined'
+                        ? `${window.location.origin}${window.location.pathname}`
+                        : '');
+                configureProvider({
+                    ...baseConfig,
+                    ...providerConfig,
+                    provider,
+                    clientId,
+                    redirectUri,
+                });
+            }
+        }
+    }, [clientId, provider, providerConfig, configureProvider]);
+    const handleClick = useCallback(async () => {
+        try {
+            if (isConnected) {
+                await disconnect(provider);
+                onDisconnect?.(provider);
+            }
+            else {
+                // Use popup flow to avoid losing application state
+                const identity = await connectWithPopup(provider, scopes || DEFAULT_SCOPES[provider]);
+                onConnect?.(identity);
+            }
+        }
+        catch (err) {
+            // Don't treat 'popup closed by user' as an error to display
+            const errorMessage = err instanceof Error ? err.message : String(err);
+            if (errorMessage !== 'Popup closed by user') {
+                onError?.(err instanceof Error ? err : new Error(errorMessage));
+            }
+        }
+    }, [
+        isConnected,
+        provider,
+        scopes,
+        connectWithPopup,
+        disconnect,
+        onConnect,
+        onDisconnect,
+        onError,
+    ]);
+    // Handle error display
+    React.useEffect(() => {
+        if (error) {
+            onError?.(error instanceof Error ? error : new Error(String(error)));
+        }
+    }, [error, onError]);
+    const buttonProps = {
+        onClick: handleClick,
+        disabled: disabled || isPending || (!clientId && !isConnected),
+        size: size === 'large' ? 'large' : size === 'small' ? 'small' : 'medium',
+    };
+    if (variant === 'icon') {
+        return (_jsx(Button, { ...buttonProps, variant: isConnected ? 'primary' : 'default', "aria-label": isConnected ? `Disconnect ${display.name}` : `Connect ${display.name}`, sx: {
+                width: size === 'small' ? 28 : size === 'large' ? 44 : 36,
+                height: size === 'small' ? 28 : size === 'large' ? 44 : 36,
+                p: 0,
+            }, children: isPending ? (_jsx(Box, { as: "span", className: "anim-rotate", sx: { display: 'inline-block' }, children: "\u23F3" })) : (_jsx(display.icon, { size: size === 'small' ? 14 : 18 })) }));
+    }
+    if (variant === 'compact') {
+        return (_jsx(Button, { ...buttonProps, variant: isConnected ? 'primary' : 'default', leadingVisual: display.icon, trailingVisual: isConnected ? CheckCircleFillIcon : undefined, children: isPending ? 'Connecting...' : display.name }));
+    }
+    // Full variant
+    return (_jsxs(Box, { sx: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 2,
+            p: 2,
+            border: '1px solid',
+            borderColor: isConnected ? 'success.muted' : 'border.default',
+            borderRadius: 2,
+            backgroundColor: isConnected ? 'success.subtle' : 'canvas.subtle',
+        }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Box, { sx: {
+                            width: 40,
+                            height: 40,
+                            borderRadius: 2,
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            backgroundColor: display.color,
+                            color: 'white',
+                        }, children: _jsx(display.icon, { size: 20 }) }), _jsxs(Box, { sx: { flex: 1 }, children: [_jsx(Text, { sx: { fontWeight: 'bold', display: 'block' }, children: display.name }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: isConnected && identity?.userInfo
+                                    ? `Connected as ${identity.userInfo.name || identity.userInfo.email}`
+                                    : display.description })] }), !isConnected && (_jsx(Button, { ...buttonProps, variant: "primary", leadingVisual: LinkIcon, children: isPending ? 'Working...' : 'Connect' }))] }), isConnected && identity && (_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', gap: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2, pl: 1 }, children: [identity.userInfo?.avatarUrl && (_jsx("a", { href: identity.userInfo.profileUrl ||
+                                    `https://github.com/${identity.userInfo.username}`, target: "_blank", rel: "noopener noreferrer", style: { display: 'block', lineHeight: 0 }, children: _jsx("img", { src: identity.userInfo.avatarUrl, alt: identity.userInfo.name || 'User avatar', style: {
+                                        width: 32,
+                                        height: 32,
+                                        borderRadius: '50%',
+                                        cursor: 'pointer',
+                                    } }) })), _jsxs(Box, { sx: { flex: 1 }, children: [identity.userInfo?.username && (_jsx("a", { href: identity.userInfo.profileUrl ||
+                                            `https://github.com/${identity.userInfo.username}`, target: "_blank", rel: "noopener noreferrer", style: { textDecoration: 'none' }, children: _jsxs(Text, { sx: {
+                                                fontSize: 1,
+                                                color: 'fg.muted',
+                                                display: 'block',
+                                                ':hover': { textDecoration: 'underline' },
+                                            }, children: ["@", identity.userInfo.username] }) })), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block' }, children: identity.token?.expiresAt
+                                            ? `Expires ${new Date(identity.token.expiresAt).toLocaleDateString()}`
+                                            : 'Token does not expire' })] })] }), identity.scopes && identity.scopes.length > 0 && (_jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1, pl: 1 }, children: identity.scopes.map(scope => (_jsx(Text, { sx: {
+                                fontSize: 0,
+                                px: 2,
+                                py: 1,
+                                bg: 'neutral.muted',
+                                borderRadius: 2,
+                                color: 'fg.muted',
+                            }, children: scope }, scope))) })), _jsxs(Button, { ...buttonProps, variant: "danger", leadingVisual: UnlinkIcon, children: ["Disconnect from ", display.name] })] }))] }));
+};
+/**
+ * Multi-provider identity connection panel
+ */
+export const IdentityConnect = ({ providers, layout = 'list', showHeader = true, title = 'Connected Accounts', size = 'medium', showDescriptions = true, onConnect, onDisconnect, onError, disabled = false, }) => {
+    const { identities, error } = useIdentity();
+    const connectedCount = identities.length;
+    const providerKeys = Object.keys(providers);
+    const handleConnect = useCallback((identity) => {
+        onConnect?.(identity);
+    }, [onConnect]);
+    const handleDisconnect = useCallback((provider) => {
+        onDisconnect?.(provider);
+    }, [onDisconnect]);
+    const handleError = useCallback((provider) => (err) => {
+        onError?.(provider, err);
+    }, [onError]);
+    if (layout === 'inline') {
+        return (_jsxs(Box, { sx: { display: 'flex', gap: 2, alignItems: 'center' }, children: [showHeader && (_jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted', mr: 2 }, children: [title, ":"] })), providerKeys.map(provider => {
+                    const config = providers[provider];
+                    return (_jsx(IdentityButton, { provider: provider, clientId: config.clientId, scopes: config.scopes, providerConfig: config.config, size: size, variant: "icon", disabled: disabled, onConnect: handleConnect, onDisconnect: handleDisconnect, onError: handleError(provider) }, provider));
+                }), connectedCount > 0 && (_jsxs(Label, { variant: "success", children: [_jsx(Box, { as: "span", sx: {
+                                mr: 1,
+                                display: 'inline-flex',
+                                verticalAlign: 'text-bottom',
+                            }, children: _jsx(CheckCircleFillIcon, { size: 12 }) }), connectedCount, " connected"] }))] }));
+    }
+    return (_jsxs(Box, { sx: {
+            border: '1px solid',
+            borderColor: 'border.default',
+            borderRadius: 2,
+            backgroundColor: 'canvas.default',
+            overflow: 'hidden',
+        }, children: [showHeader && (_jsxs(Box, { sx: {
+                    px: 3,
+                    py: 2,
+                    borderBottom: '1px solid',
+                    borderColor: 'border.default',
+                    backgroundColor: 'canvas.subtle',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                }, children: [_jsx(Text, { sx: { fontWeight: 'bold' }, children: title }), connectedCount > 0 && (_jsxs(Label, { variant: "success", children: [_jsx(Box, { as: "span", sx: {
+                                    mr: 1,
+                                    display: 'inline-flex',
+                                    verticalAlign: 'text-bottom',
+                                }, children: _jsx(CheckCircleFillIcon, { size: 12 }) }), connectedCount, " connected"] }))] })), error && (_jsxs(Flash, { variant: "danger", sx: { m: 2, borderRadius: 1 }, children: [_jsx(Box, { as: "span", sx: { mr: 2, display: 'inline-flex', verticalAlign: 'text-bottom' }, children: _jsx(AlertIcon, { size: 16 }) }), error instanceof Error ? error.message : String(error)] })), _jsx(Box, { sx: {
+                    p: 2,
+                    display: layout === 'grid' ? 'grid' : 'flex',
+                    flexDirection: layout === 'list' ? 'column' : undefined,
+                    gridTemplateColumns: layout === 'grid'
+                        ? 'repeat(auto-fill, minmax(250px, 1fr))'
+                        : undefined,
+                    gap: 2,
+                }, children: providerKeys.map(provider => {
+                    const config = providers[provider];
+                    return (_jsx(IdentityButton, { provider: provider, clientId: config.clientId, scopes: config.scopes, providerConfig: config.config, size: size, variant: showDescriptions ? 'full' : 'compact', disabled: disabled, onConnect: handleConnect, onDisconnect: handleDisconnect, onError: handleError(provider) }, provider));
+                }) })] }));
+};
+/**
+ * Dropdown menu for identity management
+ */
+export const IdentityMenu = ({ providers, onConnect, onDisconnect, disabled = false, }) => {
+    const { identities, connect, disconnect, configureProvider, isAuthorizing } = useIdentity();
+    const providerKeys = Object.keys(providers);
+    const connectedCount = identities.length;
+    // Configure all providers on mount
+    React.useEffect(() => {
+        providerKeys.forEach(provider => {
+            const config = providers[provider];
+            const baseConfig = provider === 'github'
+                ? GITHUB_PROVIDER
+                : provider === 'google'
+                    ? GOOGLE_PROVIDER
+                    : provider === 'kaggle'
+                        ? KAGGLE_PROVIDER
+                        : undefined;
+            if (baseConfig) {
+                // Build redirect URI from current page URL
+                const redirectUri = typeof window !== 'undefined'
+                    ? `${window.location.origin}${window.location.pathname}`
+                    : '';
+                configureProvider({
+                    ...baseConfig,
+                    ...config.config,
+                    provider,
+                    clientId: config.clientId,
+                    redirectUri,
+                });
+            }
+        });
+    }, [providerKeys, providers, configureProvider]);
+    const handleProviderClick = useCallback(async (provider) => {
+        const identity = identities.find(id => id.provider === provider);
+        const config = providers[provider];
+        if (identity) {
+            await disconnect(provider);
+            onDisconnect?.(provider);
+        }
+        else if (config) {
+            await connect(provider, config.scopes || DEFAULT_SCOPES[provider]);
+            // Connection initiated, identity will be updated in store after callback
+        }
+    }, [identities, providers, connect, disconnect, onConnect, onDisconnect]);
+    return (_jsxs(ActionMenu, { children: [_jsxs(ActionMenu.Button, { disabled: disabled, variant: connectedCount > 0 ? 'primary' : 'default', leadingVisual: KeyIcon, children: ["Identities", connectedCount > 0 && (_jsx(Label, { variant: "accent", sx: { ml: 2 }, children: connectedCount }))] }), _jsx(ActionMenu.Overlay, { children: _jsx(ActionList, { children: _jsx(ActionList.Group, { title: "OAuth Providers", children: providerKeys.map(provider => {
+                            const display = PROVIDER_DISPLAY[provider] || PROVIDER_DISPLAY.custom;
+                            const identity = identities.find(id => id.provider === provider);
+                            const isConnected = !!identity;
+                            return (_jsxs(ActionList.Item, { onSelect: () => handleProviderClick(provider), disabled: isAuthorizing, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(display.icon, { size: 16 }) }), _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', gap: 2 }, children: [_jsx(Text, { children: display.name }), isConnected && (_jsxs(_Fragment, { children: [identity?.userInfo?.avatarUrl && (_jsx(Avatar, { src: identity.userInfo.avatarUrl, size: 16 })), _jsx(Label, { variant: "success", sx: { ml: 1 }, children: "Connected" })] }))] }), _jsx(ActionList.TrailingVisual, { children: isConnected ? (_jsx(UnlinkIcon, { size: 16 })) : (_jsx(LinkIcon, { size: 16 })) })] }, provider));
+                        }) }) }) })] }));
+};
+export default IdentityConnect;

package/lib/identity/OAuthCallback.d.ts

@@ -0,0 +1,58 @@
+import React from 'react';
+/**
+ * Props for OAuthCallback component
+ */
+export interface OAuthCallbackProps {
+    /**
+     * Custom success message
+     */
+    successMessage?: string;
+    /**
+     * Custom error message prefix
+     */
+    errorMessagePrefix?: string;
+    /**
+     * Whether to automatically close the window/tab on success
+     * @default true for popup flow, false for redirect flow
+     */
+    autoClose?: boolean;
+    /**
+     * Delay before auto-closing (in ms)
+     * @default 1500
+     */
+    autoCloseDelay?: number;
+    /**
+     * Callback when processing completes successfully
+     */
+    onSuccess?: (provider: string) => void;
+    /**
+     * Callback when processing fails
+     */
+    onError?: (error: Error) => void;
+    /**
+     * URL to redirect to after success (for redirect flow)
+     * If not provided, will try to use window.opener for popup flow
+     */
+    redirectUrl?: string;
+    /**
+     * Whether to show the close button
+     * @default true
+     */
+    showCloseButton?: boolean;
+}
+/**
+ * OAuth callback handler component.
+ *
+ * This component should be rendered on the OAuth callback URL (e.g., /oauth/callback).
+ * It handles the authorization code exchange and token storage.
+ *
+ * @example
+ * // For redirect flow - mount at /oauth/callback
+ * <Route path="/oauth/callback" element={<OAuthCallback redirectUrl="/" />} />
+ *
+ * @example
+ * // For popup flow - mount at /oauth/callback
+ * <Route path="/oauth/callback" element={<OAuthCallback autoClose />} />
+ */
+export declare const OAuthCallback: React.FC<OAuthCallbackProps>;
+export default OAuthCallback;