@datalayer/agent-runtimes 0.0.7 → 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,3 +1,4 @@
 export * from './components';
 export * from './state';
 export * from './runtime';
+export * from './identity';

package/lib/index.js

@@ -5,3 +5,4 @@
 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/test-setup.d.ts

@@ -1 +1 @@
-export {};
+import '@testing-library/jest-dom/vitest';

package/lib/test-setup.js

@@ -4,6 +4,7 @@
  */
 // Test setup for unit tests
 // Add any global test configuration here
+import '@testing-library/jest-dom/vitest';
 // Define webpack globals that are expected by some dependencies
 global.__webpack_public_path__ = '';
 // Native FormData and fetch should work in Node.js 20+

package/lib/tools/adapters/agent-runtimes/AgentRuntimesToolAdapter.js

@@ -38,6 +38,34 @@ function isRecentDuplicate(toolName, params) {
     executionCache.set(signature, Date.now());
     return false;
 }
+/**
+ * Process parameters to handle JSON strings that should be objects
+ * LLMs sometimes generate JSON strings instead of objects for nested parameters
+ */
+function processParameters(params) {
+    if (!params || typeof params !== 'object' || Array.isArray(params)) {
+        return params;
+    }
+    const processed = {};
+    for (const [key, value] of Object.entries(params)) {
+        // If value is a string that looks like JSON, try to parse it
+        if (typeof value === 'string' &&
+            (value.startsWith('{') || value.startsWith('['))) {
+            try {
+                processed[key] = JSON.parse(value);
+                console.log(`[agent-runtimes] 📝 Parsed JSON string for parameter '${key}'`);
+            }
+            catch {
+                // If parsing fails, keep the original string
+                processed[key] = value;
+            }
+        }
+        else {
+            processed[key] = value;
+        }
+    }
+    return processed;
+}
 /**
  * Converts unified tool definition to agent-runtimes tool format
  *
@@ -67,8 +95,11 @@ export function createAgentRuntimesTool(definition, operation, context) {
                 };
             }
             try {
+                // Process parameters to handle JSON strings
+                const processedParams = processParameters(params);
+                console.log(`[agent-runtimes] Processed params:`, processedParams);
                 // Use OperationRunner to execute operation with TOON format
-                const result = await runner.execute(operation, params, {
+                const result = await runner.execute(operation, processedParams, {
                     ...context,
                     format: 'toon', // Return human/LLM-readable string
                 });

package/lib/tools/adapters/agent-runtimes/lexicalHooks.d.ts

@@ -1,3 +1,9 @@
+/**
+ * React hooks for agent-runtimes lexical tool registration.
+ * Provides: useLexicalTools hook for ChatFloating integration.
+ *
+ * @module tools/adapters/agent-runtimes/lexicalHooks
+ */
 import type { ToolExecutionContext } from '@datalayer/jupyter-react';
 import { type AgentRuntimesTool } from './AgentRuntimesToolAdapter';
 /**

package/lib/tools/adapters/agent-runtimes/lexicalHooks.js

@@ -2,13 +2,6 @@
  * Copyright (c) 2025-2026 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-/**
- * React hooks for agent-runtimes lexical tool registration.
- * Provides: useLexicalTools hook for ChatFloating integration.
- *
- * @module tools/adapters/agent-runtimes/lexicalHooks
- */
-import { useMemo } from 'react';
 import { useLexicalStore, DefaultExecutor as LexicalDefaultExecutor, lexicalToolDefinitions, lexicalToolOperations, } from '@datalayer/jupyter-lexical';
 import { createAllAgentRuntimesTools, } from './AgentRuntimesToolAdapter';
 /**
@@ -32,19 +25,25 @@ import { createAllAgentRuntimesTools, } from './AgentRuntimesToolAdapter';
  * ```
  */
 export function useLexicalTools(documentId, contextOverrides) {
-    // Call useLexicalStore() with no selector to get state object
+    console.log('[useLexicalTools] 🎣 Hook called with documentId:', documentId);
+    // Get fresh store state every render - NO MEMOIZATION
+    // This ensures we always use the latest patched methods after hot reload
     const lexicalStoreState = useLexicalStore();
-    // Create LexicalDefaultExecutor (stable reference)
-    // Only recreate when documentId changes, not on every state update
-    const executor = useMemo(() => new LexicalDefaultExecutor(documentId, lexicalStoreState), [documentId]);
-    // Create stable context object with useMemo
-    // Defaults: format='toon' for conversational AI responses
-    const context = useMemo(() => ({
+    console.log('[useLexicalTools] 📦 Store state obtained:', !!lexicalStoreState);
+    // Create new executor every render - NO MEMOIZATION
+    console.log('[useLexicalTools] 🔧 Creating new executor for documentId:', documentId);
+    const executor = new LexicalDefaultExecutor(documentId, lexicalStoreState);
+    // Create new context every render - NO MEMOIZATION
+    console.log('[useLexicalTools] 📝 Creating context');
+    const context = {
         documentId,
         executor,
         format: 'toon',
         ...contextOverrides,
-    }), [documentId, executor, contextOverrides]);
-    // Create and return tools (stable reference)
-    return useMemo(() => createAllAgentRuntimesTools(lexicalToolDefinitions, lexicalToolOperations, context), [context]);
+    };
+    // Create new tools array every render - NO MEMOIZATION
+    console.log('[useLexicalTools] 🛠️ Creating tools array');
+    const tools = createAllAgentRuntimesTools(lexicalToolDefinitions, lexicalToolOperations, context);
+    console.log('[useLexicalTools] ✅ Created', tools.length, 'tools');
+    return tools;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/agent-runtimes",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "type": "module",
   "workspaces": [
     ".",
@@ -69,6 +69,7 @@
     "create:patches": "bash scripts/create-patches.sh",
     "examples": "run-p server:start examples:vite",
     "examples:fresh": "npm run clean:cache && npm run examples",
+    "examples:codemode-mcp": "EXAMPLE=AgentCodemodeMcpExample VITE_APP_TARGET=examples VITE_DATALAYER_RUN_URL=http://localhost:8888 vite",
     "examples:nextjs": "npm run dev --workspace=nextjs-notebook-example",
     "examples:vite": "VITE_APP_TARGET=examples VITE_DATALAYER_RUN_URL=http://localhost:8888 vite",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,json,md}\" \"examples/**/*.{js,jsx,ts,tsx,css,json,md,mjs}\"",
@@ -88,7 +89,7 @@
     "preview": "vite preview",
     "rebuild:fresh": "npm run create:patches && npm install && npm run build && npm run clean:cache",
     "server": "python -m agent_runtimes",
-    "server:start": "python -m agent_runtimes --port 8765 --reload --debug",
+    "server:start": "PYTHONIOENCODING=utf-8 python -m agent_runtimes --port 8765 --reload --debug",
     "showcase:vercel-ai-elements": "VITE_APP_TARGET=showcase-vercel-ai-elements vite",
     "start": "vite",
     "start:acp": "run-p server:start start:acp:vite",
@@ -122,10 +123,10 @@
     "@agentclientprotocol/sdk": "^0.8.0",
     "@ai-sdk/react": "3.0.30",
     "@anthropic-ai/sdk": "^0.52.0",
-    "@datalayer/core": "^0.0.24",
+    "@datalayer/core": "^0.0.25",
     "@datalayer/icons-react": "^1.0.6",
-    "@datalayer/jupyter-lexical": "^1.0.6",
-    "@datalayer/jupyter-react": "^2.0.0",
+    "@datalayer/jupyter-lexical": "^1.0.9",
+    "@datalayer/jupyter-react": "^2.0.3",
     "@datalayer/primer-addons": "^1.0.4",
     "@datalayer/primer-rjsf": "^1.0.1",
     "@jupyter-widgets/base-manager": "^1.0.12",
@@ -145,7 +146,7 @@
     "@lumino/disposable": "^2.1.5",
     "@lumino/polling": "^2.1.5",
     "@lumino/signaling": "^2.1.5",
-    "@lumino/widgets": "^2.7.2",
+    "@lumino/widgets": "^2.7.3",
     "@mcp-ui/client": "^5.17.1",
     "@modelcontextprotocol/ext-apps": "^0.2.2",
     "@primer/behaviors": "^1.8.4",
@@ -159,17 +160,24 @@
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
     "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-hover-card": "^1.1.15",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-menubar": "^1.1.16",
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-toast": "^1.2.15",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
@@ -183,6 +191,7 @@
     "ansi-to-html": "^0.7.2",
     "axios": "^1.7.7",
     "boring-avatars": "^2.0.1",
+    "class-variance-authority": "^0.7.1",
     "cmdk": "^1.1.1",
     "date-fns": "^2.29.3",
     "deepmerge": "^4.3.1",
@@ -199,14 +208,16 @@
     "mock-socket": "^9.3.1",
     "motion": "^12.23.26",
     "nanoid": "^5.1.6",
+    "next-themes": "^0.4.6",
     "react": "18.3.1",
     "react-confetti": "^6.4.0",
     "react-dom": "18.3.1",
     "react-hook-form": "^7.69.0",
     "react-is": "^19.2.0",
+    "react-resizable-panels": "^4.4.1",
     "react-router-dom": "^6.0.0",
     "react-toastify": "^11.0.5",
-    "recharts": "^3.6.0",
+    "recharts": "^3.7.0",
     "shiki": "^3.20.0",
     "sonner": "^2.0.7",
     "streamdown": "^1.6.10",
@@ -240,6 +251,8 @@
     "@storybook/builder-vite": "^9.1.1",
     "@storybook/react-vite": "^9.1.1",
     "@tailwindcss/postcss": "^4.1.16",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/jest-dom": "^6.4.8",
     "@types/node": "^20.11.0",
     "@types/react": "18.3.20",
     "@types/react-dom": "18.3.6",