@agentuity/workbench 0.0.93 → 0.0.95

package/src/components/internal/WorkbenchProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useState, useMemo, useCallback } from 'react';
+import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
 import type { UIMessage } from 'ai';
 import type { WorkbenchConfig } from '@agentuity/core/workbench';
 import type { WorkbenchContextType, ConnectionStatus } from '../../types/config';
@@ -18,29 +18,22 @@ export function useWorkbench() {
 }
 
 interface WorkbenchProviderProps {
-	config: WorkbenchConfig;
+	config: Omit<WorkbenchConfig, 'route'> & {
+		baseUrl?: string | null;
+		projectId?: string;
+	};
+	isAuthenticated: boolean;
 	children: React.ReactNode;
 }
 
-export function WorkbenchProvider({ config, children }: WorkbenchProviderProps) {
+export function WorkbenchProvider({ config, isAuthenticated, children }: WorkbenchProviderProps) {
 	const logger = useLogger('WorkbenchProvider');
 
-	// Generate project identifier from config for localStorage scoping
-	const projectId = useMemo(() => {
-		// Use a combination of baseUrl and apiKey hash to create unique project identifier
-		const configHash = btoa(
-			JSON.stringify({
-				route: config.route,
-				apiKey: config.apiKey?.substring(0, 8), // Only first 8 chars for uniqueness without exposing key
-			})
-		)
-			.replace(/[^a-zA-Z0-9]/g, '')
-			.substring(0, 16);
-		return `project_${configHash}`;
-	}, [config]);
-
 	// localStorage utilities scoped by project
-	const getStorageKey = useCallback((key: string) => `agentuity_${projectId}_${key}`, [projectId]);
+	const getStorageKey = useCallback(
+		(key: string) => `agentuity_workbench_${config.projectId}_${key}`,
+		[config.projectId]
+	);
 
 	const saveSelectedAgent = useCallback(
 		(agentId: string) => {
@@ -66,22 +59,36 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 	const [selectedAgent, setSelectedAgent] = useState<string>('');
 	const [inputMode, setInputMode] = useState<'text' | 'form'>('text');
 	const [isLoading, setIsLoading] = useState(false);
-	const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>('disconnected');
+	const [isGeneratingSample, setIsGeneratingSample] = useState(false);
+	const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>('connected'); // Default to connected when websocket is disabled
 
 	// Config values
-	const baseUrl = config.baseUrl ?? defaultBaseUrl;
+	const baseUrl = config.baseUrl === undefined ? defaultBaseUrl : config.baseUrl;
 	const apiKey = config.apiKey;
-	const shouldUseSchemas = true;
+	const isBaseUrlNull = config.baseUrl === null;
 
-	// Debug logging
+	// Log baseUrl state
 	useEffect(() => {
-		if (process.env.NODE_ENV === 'development') {
-			console.log('WorkbenchProvider Debug:', {
-				baseUrl,
-				shouldUseSchemas,
-			});
+		if (isBaseUrlNull) {
+			logger.debug('🚫 baseUrl is null - disabling API calls and websocket');
+		} else {
+			logger.debug('✅ baseUrl configured:', baseUrl);
+		}
+	}, [isBaseUrlNull, baseUrl, logger]);
+
+	// Set disconnected status if baseUrl is null
+	useEffect(() => {
+		if (isBaseUrlNull) {
+			logger.debug('🔌 Setting connection status to disconnected (baseUrl is null)');
+			setConnectionStatus('disconnected');
+		}
+	}, [isBaseUrlNull, logger]);
+
+	useEffect(() => {
+		if (isBaseUrlNull) {
+			logger.debug('📋 Schema fetching disabled (baseUrl is null)');
 		}
-	}, [baseUrl, shouldUseSchemas]);
+	}, [isBaseUrlNull, logger]);
 
 	const {
 		data: schemaData,
@@ -91,12 +98,20 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 	} = useAgentSchemas({
 		baseUrl,
 		apiKey,
-		enabled: shouldUseSchemas,
+		enabled: !isBaseUrlNull,
 	});
 
 	// WebSocket connection for dev server restart detection
+	const wsBaseUrl = isBaseUrlNull ? undefined : baseUrl;
+	useEffect(() => {
+		if (isBaseUrlNull) {
+			logger.debug('🔌 WebSocket connection disabled (baseUrl is null)');
+		}
+	}, [isBaseUrlNull, logger]);
+
 	const { connected } = useWorkbenchWebsocket({
-		baseUrl,
+		enabled: !isBaseUrlNull,
+		baseUrl: wsBaseUrl,
 		apiKey,
 		onConnect: () => {
 			setConnectionStatus('connected');
@@ -115,12 +130,11 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 		},
 	});
 
-	// Update connection status based on WebSocket connection state
 	useEffect(() => {
-		if (!connected && connectionStatus !== 'restarting') {
+		if (!isBaseUrlNull && !connected && connectionStatus !== 'restarting') {
 			setConnectionStatus('disconnected');
 		}
-	}, [connected, connectionStatus]);
+	}, [connected, connectionStatus, isBaseUrlNull]);
 
 	// Convert schema data to Agent format, no fallback
 	const agents = schemaData?.agents;
@@ -200,23 +214,33 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 		logger.debug('✅ Validation passed, continuing with message submission...');
 
 		// Add user message
+		// Note: We also add a placeholder assistant message so only the last message
+		// shows a loading state while the request is in-flight.
+		const now = Date.now();
 		const displayText = hasInputSchema
 			? value
 			: `Running ${selectedAgentData?.metadata.name || 'agent'}...`;
 		const userMessage: UIMessage = {
-			id: Date.now().toString(),
+			id: now.toString(),
 			role: 'user',
 			parts: [{ type: 'text', text: displayText }],
 		};
 
-		setMessages((prev) => [...prev, userMessage]);
+		const assistantMessageId = (now + 1).toString();
+		const placeholderAssistantMessage: UIMessage = {
+			id: assistantMessageId,
+			role: 'assistant',
+			parts: [{ type: 'text', text: '', state: 'streaming' }],
+		};
+
+		setMessages((prev) => [...prev, userMessage, placeholderAssistantMessage]);
 		setIsLoading(true);
 
-		logger.debug('🔗 baseUrl:', baseUrl);
-		if (!baseUrl) {
-			logger.debug('❌ No baseUrl configured!');
+		logger.debug('🔗 baseUrl:', baseUrl, 'isBaseUrlNull:', isBaseUrlNull);
+		if (!baseUrl || isBaseUrlNull) {
+			logger.debug('❌ Message submission blocked - baseUrl is null or missing');
 			const errorMessage: UIMessage = {
-				id: (Date.now() + 1).toString(),
+				id: assistantMessageId,
 				role: 'assistant',
 				parts: [
 					{
@@ -225,7 +249,7 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 					},
 				],
 			};
-			setMessages((prev) => [...prev, errorMessage]);
+			setMessages((prev) => prev.map((m) => (m.id === assistantMessageId ? errorMessage : m)));
 			setIsLoading(false);
 			return;
 		}
@@ -273,13 +297,24 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 				clearTimeout(timeoutId);
 
 				if (!response.ok) {
-					const errorData = await response
-						.json()
-						.catch(() => ({ error: response.statusText }));
-					throw new Error(errorData.error || `Request failed with status ${response.status}`);
+					let errorMessage = `Request failed with status ${response.status}`;
+					try {
+						const errorData = await response.json();
+						errorMessage = errorData.error || errorData.message || errorMessage;
+					} catch {
+						// If JSON parsing fails, use status text
+						errorMessage = response.statusText || errorMessage;
+					}
+					throw new Error(errorMessage);
+				}
+
+				let result;
+				try {
+					result = await response.json();
+				} catch (jsonError) {
+					throw new Error(`Invalid JSON response from server: ${jsonError}`);
 				}
 
-				const result = await response.json();
 				const endTime = performance.now();
 				const clientDuration = ((endTime - startTime) / 1000).toFixed(1); // Duration in seconds
 
@@ -297,14 +332,16 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 					typeof result === 'object' ? JSON.stringify(result, null, 2) : String(result);
 
 				const assistantMessage: UIMessage & { tokens?: string; duration?: string } = {
-					id: (Date.now() + 1).toString(),
+					id: assistantMessageId,
 					role: 'assistant',
 					parts: [{ type: 'text', text: resultText }],
 					tokens: totalTokens?.toString(),
 					duration,
 				};
 
-				setMessages((prev) => [...prev, assistantMessage]);
+				setMessages((prev) =>
+					prev.map((m) => (m.id === assistantMessageId ? assistantMessage : m))
+				);
 			} catch (fetchError) {
 				clearTimeout(timeoutId);
 				throw fetchError;
@@ -319,7 +356,7 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 					: 'Sorry, I encountered an error processing your message.';
 
 			const errorMessage: UIMessage = {
-				id: (Date.now() + 1).toString(),
+				id: assistantMessageId,
 				role: 'assistant',
 				parts: [
 					{
@@ -328,12 +365,54 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 					},
 				],
 			};
-			setMessages((prev) => [...prev, errorMessage]);
+			setMessages((prev) => prev.map((m) => (m.id === assistantMessageId ? errorMessage : m)));
 		} finally {
 			setIsLoading(false);
 		}
 	};
 
+	const generateSample = async (agentId: string): Promise<string> => {
+		if (!baseUrl || isBaseUrlNull) {
+			throw new Error('Base URL not configured');
+		}
+
+		setIsGeneratingSample(true);
+		try {
+			const url = `${baseUrl}/_agentuity/workbench/sample?agentId=${encodeURIComponent(agentId)}`;
+			const headers: HeadersInit = {
+				'Content-Type': 'application/json',
+			};
+
+			if (apiKey) {
+				headers['Authorization'] = `Bearer ${apiKey}`;
+			}
+
+			const response = await fetch(url, {
+				method: 'GET',
+				headers,
+			});
+
+			if (!response.ok) {
+				let errorMessage = `Request failed with status ${response.status}`;
+				try {
+					const errorData = await response.json();
+					errorMessage = errorData.error || errorData.message || errorMessage;
+				} catch {
+					errorMessage = response.statusText || errorMessage;
+				}
+				throw new Error(errorMessage);
+			}
+
+			const sample = await response.json();
+			return JSON.stringify(sample, null, 2);
+		} catch (error) {
+			logger.error('Failed to generate sample JSON:', error);
+			throw error;
+		} finally {
+			setIsGeneratingSample(false);
+		}
+	};
+
 	const handleAgentSelect = async (agentId: string) => {
 		logger.debug('🔄 handleAgentSelect called with:', agentId);
 		setSelectedAgent(agentId);
@@ -351,8 +430,11 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 		setSelectedAgent: handleAgentSelect,
 		inputMode,
 		setInputMode,
-		isLoading: isLoading || (shouldUseSchemas && !!schemasLoading),
+		isLoading: isLoading || !!schemasLoading,
 		submitMessage,
+		generateSample,
+		isGeneratingSample,
+		isAuthenticated,
 		// Schema data from API
 		schemas: schemaData,
 		schemasLoading: !!schemasLoading,

package/src/hooks/useAgentSchemas.ts

@@ -93,14 +93,26 @@ export function useAgentSchemas(options: UseAgentSchemasOptions = {}): UseAgentS
 			});
 
 			if (!response.ok) {
+				// Handle 404/500 gracefully without throwing
 				if (response.status === 401) {
-					throw new Error('Unauthorized: Invalid or missing API key');
+					setError(new Error('Unauthorized: Invalid or missing API key'));
+					return;
 				}
-				throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+				if (response.status === 404 || response.status >= 500) {
+					setError(new Error(`Server error: ${response.status} ${response.statusText}`));
+					return;
+				}
+				setError(new Error(`HTTP ${response.status}: ${response.statusText}`));
+				return;
 			}
 
-			const result = (await response.json()) as AgentSchemasResponse;
-			setData(result);
+			try {
+				const result = (await response.json()) as AgentSchemasResponse;
+				setData(result);
+			} catch (jsonError) {
+				setError(new Error('Invalid JSON response from server'));
+				console.error('Failed to parse JSON response:', jsonError);
+			}
 		} catch (err) {
 			const error = err instanceof Error ? err : new Error('Unknown error occurred');
 			setError(error);

package/src/hooks/useWorkbenchWebsocket.ts

@@ -77,6 +77,7 @@ function createReconnectManager(opts: ReconnectOptions): ReconnectManager {
 export interface UseWorkbenchWebsocketOptions {
 	baseUrl?: string;
 	apiKey?: string;
+	enabled?: boolean;
 	onConnect?: () => void;
 	onReconnect?: () => void;
 	onAlive?: () => void;
@@ -126,7 +127,7 @@ export function useWorkbenchWebsocket(
 	}, [baseUrl, apiKey]);
 
 	const connect = useCallback(() => {
-		if (manualClose.current) return;
+		if (manualClose.current || !options.enabled) return;
 		const url = wsUrl();
 		if (!url) return;
 

package/src/index.ts

@@ -1,11 +1,12 @@
 // Export types
 export type { WorkbenchInstance } from './types';
+export type { ConnectionStatus } from './types/config';
 
 // Export components
 export { default as App } from './components/App';
 export { Chat } from './components/internal/Chat';
 export { Schema } from './components/internal/Schema';
+export { StatusIndicator } from './components/internal/Header';
 export { WorkbenchProvider, useWorkbench } from './components/internal/WorkbenchProvider';
-
 // Export workbench functions
 export { createWorkbench } from './workbench';

package/src/types/config.ts

@@ -24,6 +24,9 @@ export interface WorkbenchContextType {
 	setInputMode: (mode: 'text' | 'form') => void;
 	isLoading: boolean;
 	submitMessage: (value: string, mode?: 'text' | 'form') => Promise<void>;
+	generateSample: (agentId: string) => Promise<string>;
+	isGeneratingSample: boolean;
+	isAuthenticated: boolean;
 	// Schema data from API
 	schemas: AgentSchemasResponse | null;
 	schemasLoading: boolean;