@datalayer/agent-runtimes 0.0.5 → 0.0.8

package/lib/identity/useIdentity.js

@@ -0,0 +1,323 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * React hook for identity management.
+ *
+ * Provides a simple interface for OAuth 2.1 identity management.
+ *
+ * @module identity/useIdentity
+ */
+import { useCallback, useEffect, useMemo } from 'react';
+import { useIdentityStore, useConnectedIdentities, useConnectedProviders, usePendingAuthorization, useIdentityLoading, useIdentityError, configureBuiltinProviders, } from './identityStore';
+/**
+ * Hook for managing OAuth identities
+ *
+ * @example
+ * ```tsx
+ * const {
+ *   identities,
+ *   connect,
+ *   disconnect,
+ *   isConnected,
+ * } = useIdentity({
+ *   providers: {
+ *     github: { clientId: 'your-client-id' },
+ *   },
+ * });
+ *
+ * // Connect to GitHub
+ * await connect('github', ['repo', 'read:user']);
+ *
+ * // Check connection
+ * if (isConnected('github')) {
+ *   const token = await getAccessToken('github');
+ * }
+ * ```
+ */
+export function useIdentity(options = {}) {
+    const { providers, baseUrl = typeof window !== 'undefined' ? window.location.origin : '', callbackPath = typeof window !== 'undefined'
+        ? window.location.pathname
+        : '/oauth/callback', autoHandleCallback = true, } = options;
+    // Store state
+    const identities = useConnectedIdentities();
+    const connectedProviders = useConnectedProviders();
+    const pendingAuthorization = usePendingAuthorization();
+    const isLoading = useIdentityLoading();
+    const error = useIdentityError();
+    // Store actions
+    const startAuthorization = useIdentityStore(s => s.startAuthorization);
+    const completeAuthorizationAction = useIdentityStore(s => s.completeAuthorization);
+    const cancelAuthorizationAction = useIdentityStore(s => s.cancelAuthorization);
+    const disconnectAction = useIdentityStore(s => s.disconnect);
+    const getIdentityAction = useIdentityStore(s => s.getIdentity);
+    const isConnectedAction = useIdentityStore(s => s.isConnected);
+    const getTokenAction = useIdentityStore(s => s.getToken);
+    const configureProviderAction = useIdentityStore(s => s.configureProvider);
+    // Configure providers on mount
+    useEffect(() => {
+        if (!providers)
+            return;
+        const redirectUri = `${baseUrl}${callbackPath}`;
+        if (providers.github) {
+            configureBuiltinProviders({
+                github: {
+                    clientId: providers.github.clientId,
+                    redirectUri: providers.github.redirectUri || redirectUri,
+                },
+            });
+        }
+        if (providers.google) {
+            configureBuiltinProviders({
+                google: {
+                    clientId: providers.google.clientId,
+                    redirectUri: providers.google.redirectUri || redirectUri,
+                },
+            });
+        }
+        if (providers.kaggle) {
+            configureBuiltinProviders({
+                kaggle: {
+                    clientId: providers.kaggle.clientId,
+                    redirectUri: providers.kaggle.redirectUri || redirectUri,
+                },
+            });
+        }
+        // Configure custom providers
+        if (providers.custom) {
+            providers.custom.forEach(config => {
+                configureProviderAction(config);
+            });
+        }
+    }, [providers, baseUrl, callbackPath, configureProviderAction]);
+    // Auto-handle OAuth callback from URL
+    useEffect(() => {
+        if (!autoHandleCallback || typeof window === 'undefined')
+            return;
+        const params = new URLSearchParams(window.location.search);
+        const code = params.get('code');
+        const state = params.get('state');
+        const error = params.get('error');
+        const errorDescription = params.get('error_description');
+        if ((code && state) || error) {
+            completeAuthorizationAction({
+                code: code || '',
+                state: state || '',
+                error: error || undefined,
+                errorDescription: errorDescription || undefined,
+            })
+                .then(() => {
+                // Clean up URL
+                const cleanUrl = window.location.pathname;
+                window.history.replaceState({}, '', cleanUrl);
+            })
+                .catch(err => {
+                console.error('OAuth callback error:', err);
+                // Clean up URL even on error
+                const cleanUrl = window.location.pathname;
+                window.history.replaceState({}, '', cleanUrl);
+            });
+        }
+    }, [autoHandleCallback, completeAuthorizationAction]);
+    // Connect via redirect
+    const connect = useCallback(async (provider, scopes) => {
+        const authUrl = await startAuthorization(provider, scopes);
+        // Redirect to authorization URL
+        window.location.href = authUrl;
+    }, [startAuthorization]);
+    // Connect via popup
+    const connectWithPopup = useCallback(async (provider, scopes) => {
+        // Start authorization first (async), then create promise for popup flow
+        const authUrl = await startAuthorization(provider, scopes, {
+            onComplete: () => { },
+            onError: () => { },
+        });
+        return new Promise((resolve, reject) => {
+            // Update callbacks for the pending authorization
+            const store = useIdentityStore.getState();
+            if (store.pendingAuthorization) {
+                store.pendingAuthorization.onComplete = resolve;
+                store.pendingAuthorization.onError = reject;
+            }
+            // Open popup
+            const width = 600;
+            const height = 700;
+            const left = window.screenX + (window.outerWidth - width) / 2;
+            const top = window.screenY + (window.outerHeight - height) / 2;
+            const popup = window.open(authUrl, 'oauth_popup', `width=${width},height=${height},left=${left},top=${top},toolbar=no,menubar=no`);
+            if (!popup) {
+                reject(new Error('Failed to open popup window'));
+                return;
+            }
+            // Listen for callback via postMessage from OAuthCallback component
+            const handleMessage = (event) => {
+                if (event.origin !== window.location.origin)
+                    return;
+                // Handle success message from OAuthCallback
+                if (event.data?.type === 'oauth-callback-success') {
+                    window.removeEventListener('message', handleMessage);
+                    clearInterval(pollTimer);
+                    popup.close();
+                    const providerName = event.data.provider;
+                    const identityFromPopup = event.data.identity;
+                    console.debug('[Identity] Received oauth-callback-success for provider:', providerName);
+                    console.debug('[Identity] Identity from popup:', identityFromPopup);
+                    if (identityFromPopup) {
+                        // Use the identity directly from the popup message
+                        // Create a new Map to ensure React detects the change
+                        const currentIdentities = useIdentityStore.getState().identities;
+                        const newIdentities = new Map(currentIdentities);
+                        newIdentities.set(providerName, identityFromPopup);
+                        // Update the store
+                        useIdentityStore.setState({
+                            identities: newIdentities,
+                            pendingAuthorization: null,
+                        });
+                        console.debug('[Identity] Store updated with identity from popup, identities count:', newIdentities.size);
+                        resolve(identityFromPopup);
+                        return;
+                    }
+                    // Fallback: read from localStorage if identity not in message
+                    setTimeout(() => {
+                        const STORAGE_KEY = 'agent-runtimes-identity';
+                        const stored = localStorage.getItem(STORAGE_KEY);
+                        console.debug('[Identity] Fallback: reading from localStorage');
+                        if (stored) {
+                            try {
+                                const data = JSON.parse(stored);
+                                const identitiesArray = data.state?.identities || [];
+                                const identitiesMap = new Map(identitiesArray);
+                                const identity = identitiesMap.get(providerName);
+                                if (identity) {
+                                    const currentIdentities = useIdentityStore.getState().identities;
+                                    const newIdentities = new Map(currentIdentities);
+                                    newIdentities.set(providerName, identity);
+                                    useIdentityStore.setState({
+                                        identities: newIdentities,
+                                        pendingAuthorization: null,
+                                    });
+                                    resolve(identity);
+                                    return;
+                                }
+                            }
+                            catch (e) {
+                                console.error('[Identity] Failed to parse identity from localStorage:', e);
+                            }
+                        }
+                        // Final fallback
+                        useIdentityStore.setState({ pendingAuthorization: null });
+                        reject(new Error('Identity not found after OAuth success'));
+                    }, 100);
+                }
+                // Handle error message from OAuthCallback
+                else if (event.data?.type === 'oauth-callback-error') {
+                    window.removeEventListener('message', handleMessage);
+                    clearInterval(pollTimer);
+                    popup.close();
+                    useIdentityStore.setState({ pendingAuthorization: null });
+                    reject(new Error(event.data.error || 'OAuth authentication failed'));
+                }
+                // Legacy: handle 'oauth_callback' message type
+                else if (event.data?.type === 'oauth_callback') {
+                    window.removeEventListener('message', handleMessage);
+                    clearInterval(pollTimer);
+                    popup.close();
+                    completeAuthorizationAction(event.data.payload)
+                        .then(resolve)
+                        .catch(reject);
+                }
+            };
+            window.addEventListener('message', handleMessage);
+            // Also poll for popup close (user cancelled)
+            const pollTimer = setInterval(() => {
+                if (popup.closed) {
+                    clearInterval(pollTimer);
+                    window.removeEventListener('message', handleMessage);
+                    // Don't reject if we already got a message
+                    if (useIdentityStore.getState().pendingAuthorization) {
+                        cancelAuthorizationAction();
+                        reject(new Error('Popup closed by user'));
+                    }
+                }
+            }, 500);
+        });
+    }, [
+        startAuthorization,
+        completeAuthorizationAction,
+        cancelAuthorizationAction,
+    ]);
+    // Connect with token (for token-based providers like Kaggle)
+    const connectWithTokenAction = useIdentityStore(s => s.connectWithToken);
+    const connectWithToken = useCallback(async (provider, token, options) => {
+        return connectWithTokenAction(provider, token, options);
+    }, [connectWithTokenAction]);
+    // Disconnect
+    const disconnect = useCallback(async (provider) => {
+        await disconnectAction(provider);
+    }, [disconnectAction]);
+    // Complete authorization
+    const completeAuthorization = useCallback(async (callback) => {
+        return completeAuthorizationAction(callback);
+    }, [completeAuthorizationAction]);
+    // Cancel authorization
+    const cancelAuthorization = useCallback(() => {
+        cancelAuthorizationAction();
+    }, [cancelAuthorizationAction]);
+    // Check if connected
+    const isConnected = useCallback((provider) => {
+        return isConnectedAction(provider);
+    }, [isConnectedAction]);
+    // Get identity
+    const getIdentity = useCallback((provider) => {
+        return getIdentityAction(provider);
+    }, [getIdentityAction]);
+    // Get access token
+    const getAccessToken = useCallback(async (provider) => {
+        const token = await getTokenAction(provider);
+        return token?.accessToken ?? null;
+    }, [getTokenAction]);
+    // Configure provider
+    const configureProvider = useCallback((config) => {
+        configureProviderAction(config);
+    }, [configureProviderAction]);
+    // Derived state
+    const isAuthorizing = pendingAuthorization !== null;
+    return useMemo(() => ({
+        // State
+        identities,
+        connectedProviders,
+        isAuthorizing,
+        isLoading,
+        error,
+        pendingAuthorization,
+        // Actions
+        connect,
+        connectWithPopup,
+        connectWithToken,
+        disconnect,
+        completeAuthorization,
+        cancelAuthorization,
+        isConnected,
+        getIdentity,
+        getAccessToken,
+        configureProvider,
+    }), [
+        identities,
+        connectedProviders,
+        isAuthorizing,
+        isLoading,
+        error,
+        pendingAuthorization,
+        connect,
+        connectWithPopup,
+        connectWithToken,
+        disconnect,
+        completeAuthorization,
+        cancelAuthorization,
+        isConnected,
+        getIdentity,
+        getAccessToken,
+        configureProvider,
+    ]);
+}

package/lib/index.d.ts

@@ -1,2 +1,4 @@
 export * from './components';
 export * from './state';
+export * from './runtime';
+export * from './identity';

package/lib/index.js

@@ -4,3 +4,5 @@
  */
 export * from './components';
 export * from './state';
+export * from './runtime';
+export * from './identity';

package/lib/lib/utils.js

@@ -2,7 +2,7 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { clsx } from "clsx";
+import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 export function cn(...inputs) {
     return twMerge(clsx(inputs));

package/lib/renderers/a2ui/lib/utils.js

@@ -17,7 +17,7 @@
  See the License for the specific language governing permissions and
  limitations under the License.
  */
-import { clsx } from "clsx";
+import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 /**
  * Utility function to merge Tailwind CSS classes.

package/lib/runtime/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Runtime management module for agent-runtimes.
+ *
+ * Provides a Zustand store and hooks for launching and managing cloud runtimes
+ * with integrated AI agent support.
+ *
+ * @module runtime
+ *
+ * @example
+ * ```typescript
+ * import { useRuntimeStore, useRuntime, useAgent } from '@datalayer/agent-runtimes/lib/runtime';
+ *
+ * // Launch a new runtime
+ * const { launchRuntime, createAgent } = useRuntimeStore();
+ * const runtime = await launchRuntime({ environmentName: 'python-simple', creditsLimit: 100 });
+ * const agent = await createAgent({ model: 'anthropic:claude-sonnet-4-5' });
+ *
+ * // Use in ChatFloating
+ * <ChatFloating endpoint={agent.endpoint} />
+ *
+ * // Or connect to an existing runtime
+ * const { connectToRuntime } = useRuntimeStore();
+ * connectToRuntime({
+ *   podName: 'my-pod',
+ *   environmentName: 'python-simple',
+ *   serviceManager: myServiceManager,
+ * });
+ * ```
+ */
+export { useRuntimeStore, useRuntime, useAgent, useRuntimeStatus, useRuntimeError, useIsLaunching, getRuntimeState, subscribeToRuntime, } from './runtimeStore';
+export { useAgentConnection } from './useAgentConnection';
+export { useAgentRuntime } from './useAgentRuntime';
+export type { IRuntimeLocation, IRuntimeType, IRuntimeCapabilities, IRuntimePod, IRuntimeOptions, IRuntimeDesc, } from './types';
+export type { RuntimeConnection, AgentRuntimeStatus as RuntimeStatus, AgentConfig, AgentConnection, AgentRuntimeState, } from './types';
+export { DEFAULT_AGENT_CONFIG } from './types';

package/lib/runtime/index.js

@@ -0,0 +1,40 @@
+/*
+ * Copyright (c) 2025-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Runtime management module for agent-runtimes.
+ *
+ * Provides a Zustand store and hooks for launching and managing cloud runtimes
+ * with integrated AI agent support.
+ *
+ * @module runtime
+ *
+ * @example
+ * ```typescript
+ * import { useRuntimeStore, useRuntime, useAgent } from '@datalayer/agent-runtimes/lib/runtime';
+ *
+ * // Launch a new runtime
+ * const { launchRuntime, createAgent } = useRuntimeStore();
+ * const runtime = await launchRuntime({ environmentName: 'python-simple', creditsLimit: 100 });
+ * const agent = await createAgent({ model: 'anthropic:claude-sonnet-4-5' });
+ *
+ * // Use in ChatFloating
+ * <ChatFloating endpoint={agent.endpoint} />
+ *
+ * // Or connect to an existing runtime
+ * const { connectToRuntime } = useRuntimeStore();
+ * connectToRuntime({
+ *   podName: 'my-pod',
+ *   environmentName: 'python-simple',
+ *   serviceManager: myServiceManager,
+ * });
+ * ```
+ */
+// Zustand store
+export { useRuntimeStore, useRuntime, useAgent, useRuntimeStatus, useRuntimeError, useIsLaunching, getRuntimeState, subscribeToRuntime, } from './runtimeStore';
+// Hooks
+export { useAgentConnection } from './useAgentConnection';
+export { useAgentRuntime } from './useAgentRuntime';
+// Constants
+export { DEFAULT_AGENT_CONFIG } from './types';

package/lib/runtime/runtimeStore.d.ts

@@ -0,0 +1,77 @@
+import type { ServiceManager } from '@jupyterlab/services';
+import type { IRuntimeOptions, RuntimeConnection, AgentRuntimeStatus, AgentConfig, AgentConnection } from './types';
+/**
+ * Runtime store state interface.
+ */
+interface RuntimeStoreState {
+    /** Current runtime connection */
+    runtime: RuntimeConnection | null;
+    /** Current agent connection */
+    agent: AgentConnection | null;
+    /** Current status */
+    status: AgentRuntimeStatus;
+    /** Error message if any */
+    error: string | null;
+    /** Whether a launch is in progress */
+    isLaunching: boolean;
+}
+/**
+ * Runtime store actions interface.
+ */
+interface RuntimeStoreActions {
+    /** Launch a new runtime */
+    launchRuntime: (options: IRuntimeOptions) => Promise<RuntimeConnection>;
+    /** Connect to an existing runtime */
+    connectToRuntime: (connection: {
+        podName: string;
+        environmentName: string;
+        serviceManager: ServiceManager.IManager;
+        kernelId?: string;
+    }) => void;
+    /** Create an agent on the current runtime */
+    createAgent: (config?: AgentConfig) => Promise<AgentConnection>;
+    /** Disconnect from the current runtime */
+    disconnect: () => void;
+    /** Clear any errors */
+    clearError: () => void;
+    /** Set error */
+    setError: (error: string) => void;
+    /** Reset store to initial state */
+    reset: () => void;
+}
+type RuntimeStore = RuntimeStoreState & RuntimeStoreActions;
+/**
+ * Zustand store for runtime management.
+ *
+ * @example
+ * ```typescript
+ * import { useRuntimeStore } from '@datalayer/agent-runtimes/lib/runtime';
+ *
+ * // In a component
+ * const { runtime, launchRuntime, status } = useRuntimeStore();
+ *
+ * // Launch a runtime
+ * await launchRuntime({ environmentName: 'python-simple', creditsLimit: 100 });
+ *
+ * // Access runtime info
+ * console.log(runtime?.agentBaseUrl);
+ * ```
+ */
+export declare const useRuntimeStore: import("zustand").UseBoundStore<import("zustand").StoreApi<RuntimeStore>>;
+/**
+ * Selector hooks for common use cases.
+ */
+export declare const useRuntime: () => RuntimeConnection | null;
+export declare const useAgent: () => AgentConnection | null;
+export declare const useRuntimeStatus: () => AgentRuntimeStatus;
+export declare const useRuntimeError: () => string | null;
+export declare const useIsLaunching: () => boolean;
+/**
+ * Get runtime store state without React (for use outside components).
+ */
+export declare const getRuntimeState: () => RuntimeStore;
+/**
+ * Subscribe to runtime store changes (for use outside React).
+ */
+export declare const subscribeToRuntime: (listener: (state: RuntimeStore, prevState: RuntimeStore) => void) => () => void;
+export {};