@agentuity/workbench 0.0.105 → 0.0.107

package/src/components/internal/{WorkbenchProvider.tsx → workbench-provider.tsx}

@@ -1,19 +1,22 @@
-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';
+import type { UIMessage } from 'ai';
+import type React from 'react';
+import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import { useAgentSchemas } from '../../hooks/useAgentSchemas';
-import { useWorkbenchWebsocket } from '../../hooks/useWorkbenchWebsocket';
 import { useLogger } from '../../hooks/useLogger';
-import { getTotalTokens, parseTokensHeader, defaultBaseUrl } from '../../lib/utils';
+import { useWorkbenchWebsocket } from '../../hooks/useWorkbenchWebsocket';
+import { defaultBaseUrl, getTotalTokens, parseTokensHeader } from '../../lib/utils';
+import type { ConnectionStatus, WorkbenchContextType } from '../../types/config';
 
 const WorkbenchContext = createContext<WorkbenchContextType | null>(null);
 
 export function useWorkbench() {
 	const context = useContext(WorkbenchContext);
+
 	if (!context) {
 		throw new Error('useWorkbench must be used within a WorkbenchProvider');
 	}
+
 	return context;
 }
 
@@ -22,25 +25,38 @@ interface WorkbenchProviderProps {
 		baseUrl?: string | null;
 		projectId?: string;
 	};
-	isAuthenticated: boolean;
+	env: {
+		agentuity: boolean;
+		authenticated: boolean;
+		cloud: boolean;
+	};
 	children: React.ReactNode;
 }
 
-export function WorkbenchProvider({ config, isAuthenticated, children }: WorkbenchProviderProps) {
+export function WorkbenchProvider({
+	config,
+	env = {
+		agentuity: false,
+		authenticated: false,
+		cloud: false,
+	},
+	children,
+}: WorkbenchProviderProps) {
 	const logger = useLogger('WorkbenchProvider');
 
 	// localStorage utilities scoped by project
 	const getStorageKey = useCallback(
-		(key: string) => `agentuity_workbench_${config.projectId}_${key}`,
+		(key: string) =>
+			`agentuity-workbench-${config.projectId ? `${config.projectId}-` : ''}${key}`,
 		[config.projectId]
 	);
 
 	const saveSelectedAgent = useCallback(
 		(agentId: string) => {
 			try {
-				localStorage.setItem(getStorageKey('selected_agent'), agentId);
+				localStorage.setItem(getStorageKey('selected-agent'), agentId);
 			} catch (error) {
-				console.warn('Failed to save selected agent to localStorage:', error);
+				logger.warn('Failed to save selected agent to localStorage:', error);
 			}
 		},
 		[getStorageKey]
@@ -48,9 +64,9 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 
 	const loadSelectedAgent = useCallback((): string | null => {
 		try {
-			return localStorage.getItem(getStorageKey('selected_agent'));
+			return localStorage.getItem(getStorageKey('selected-agent'));
 		} catch (error) {
-			console.warn('Failed to load selected agent from localStorage:', error);
+			logger.warn('Failed to load selected agent from localStorage:', error);
 			return null;
 		}
 	}, [getStorageKey]);
@@ -58,9 +74,9 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 	const saveThreadId = useCallback(
 		(threadId: string) => {
 			try {
-				localStorage.setItem(getStorageKey('thread_id'), threadId);
+				localStorage.setItem(getStorageKey('thread-id'), threadId);
 			} catch (error) {
-				console.warn('Failed to save thread id to localStorage:', error);
+				logger.warn('Failed to save thread id to localStorage:', error);
 			}
 		},
 		[getStorageKey]
@@ -68,9 +84,10 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 
 	const loadThreadId = useCallback((): string | null => {
 		try {
-			return localStorage.getItem(getStorageKey('thread_id'));
+			return localStorage.getItem(getStorageKey('thread-id'));
 		} catch (error) {
-			console.warn('Failed to load thread id from localStorage:', error);
+			logger.warn('Failed to load thread id from localStorage:', error);
+
 			return null;
 		}
 	}, [getStorageKey]);
@@ -120,6 +137,7 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 	useEffect(() => {
 		if (isBaseUrlNull) {
 			logger.debug('🔌 Setting connection status to disconnected (baseUrl is null)');
+
 			setConnectionStatus('disconnected');
 		}
 	}, [isBaseUrlNull, logger]);
@@ -143,6 +161,7 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 
 	// WebSocket connection for dev server restart detection
 	const wsBaseUrl = isBaseUrlNull ? undefined : baseUrl;
+
 	useEffect(() => {
 		if (isBaseUrlNull) {
 			logger.debug('🔌 WebSocket connection disabled (baseUrl is null)');
@@ -178,18 +197,17 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 
 	// Convert schema data to Agent format, no fallback
 	const agents = schemaData?.agents;
+
 	// Log schema fetch errors for debugging
 	useEffect(() => {
 		if (schemasError) {
-			console.warn(
+			logger.warn(
 				'Failed to fetch agent schemas from API, using static configuration:',
 				schemasError.message
 			);
 		}
 	}, [schemasError]);
 
-	const [suggestions, _setSuggestions] = useState<string[]>([]);
-
 	// Fetch state for an agent
 	const fetchAgentState = useCallback(
 		async (agentId: string) => {
@@ -205,18 +223,23 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 
 			try {
 				const headers: Record<string, string> = {};
+
 				if (apiKey) {
 					headers.Authorization = `Bearer ${apiKey}`;
 				}
+
 				applyThreadIdHeader(headers);
 
 				const url = `${baseUrl}/_agentuity/workbench/state?agentId=${encodeURIComponent(agentId)}`;
+
 				logger.debug('📡 Fetching state for agent:', agentId);
+
 				const response = await fetch(url, {
 					method: 'GET',
 					headers,
 					credentials: 'include',
 				});
+
 				persistThreadIdFromResponse(response);
 
 				if (response.ok) {
@@ -233,8 +256,10 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 							typeof msg.data === 'object'
 								? JSON.stringify(msg.data, null, 2)
 								: String(msg.data);
+
 						// Use stable ID based on index and a hash of content to maintain identity
 						const contentHash = text.substring(0, 20).replace(/[^a-zA-Z0-9]/g, '');
+
 						return {
 							id: `state_${agentId}_${index}_${contentHash}`,
 							role: msg.type === 'input' ? 'user' : 'assistant',
@@ -243,13 +268,16 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 					});
 
 					setMessages(uiMessages);
+
 					logger.debug('✅ Loaded state messages:', uiMessages.length);
 				} else {
 					logger.debug('⚠️ Failed to fetch state, starting with empty messages');
+
 					setMessages([]);
 				}
 			} catch (error) {
 				logger.debug('⚠️ Error fetching state:', error);
+
 				setMessages([]);
 			}
 		},
@@ -264,16 +292,20 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 			// First, check for agent query parameter in URL
 			const urlParams = new URLSearchParams(window.location.search);
 			const agentFromUrl = urlParams.get('agent');
+
 			logger.debug('🔗 Agent from URL query param:', agentFromUrl);
 
 			// Try to find agent by URL param (matches agentId only)
 			let agentToSelect: string | null = null;
+
 			if (agentFromUrl) {
 				const matchedAgent = Object.values(agents).find(
 					(agent) => agent.metadata.agentId === agentFromUrl
 				);
+
 				if (matchedAgent) {
 					logger.debug('✅ Found agent from URL param:', matchedAgent.metadata.name);
+
 					agentToSelect = matchedAgent.metadata.agentId;
 				}
 			}
@@ -281,6 +313,7 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 			// If no URL param match, try localStorage
 			if (!agentToSelect) {
 				const savedAgentId = loadSelectedAgent();
+
 				logger.debug('💾 Saved agent from localStorage:', savedAgentId);
 
 				const savedAgent = savedAgentId
@@ -289,6 +322,7 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 
 				if (savedAgent && savedAgentId) {
 					logger.debug('✅ Restoring saved agent:', savedAgent.metadata.name);
+
 					agentToSelect = savedAgentId;
 				}
 			}
@@ -298,44 +332,44 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 				const sortedAgents = Object.values(agents).sort((a, b) =>
 					a.metadata.name.localeCompare(b.metadata.name)
 				);
+
 				const firstAgent = sortedAgents[0];
+
 				logger.debug(
 					'🎯 No saved agent found, using first agent (alphabetically):',
 					firstAgent
 				);
+
 				agentToSelect = firstAgent.metadata.agentId;
 			}
 
 			logger.debug('🆔 Setting selectedAgent to:', agentToSelect);
+
 			setSelectedAgent(agentToSelect);
 			saveSelectedAgent(agentToSelect);
 			fetchAgentState(agentToSelect);
 		}
 	}, [agents, selectedAgent, loadSelectedAgent, saveSelectedAgent, logger, fetchAgentState]);
 
-	// Fetch suggestions from API if endpoint is provided
-	useEffect(() => {
-		// No API endpoints hardcoded for now
-	}, []);
-
-	const _fetchSuggestions = async () => {
-		// No API endpoints for now
-	};
-
 	const submitMessage = async (value: string, _mode: 'text' | 'form' = 'text') => {
 		if (!selectedAgent) return;
 
 		logger.debug('🚀 Submitting message with selectedAgent:', selectedAgent);
+
 		const selectedAgentData = agents
 			? Object.values(agents).find((agent) => agent.metadata.agentId === selectedAgent)
 			: undefined;
+
 		logger.debug('📊 Found selectedAgentData:', selectedAgentData);
+
 		const hasInputSchema = selectedAgentData?.schema?.input?.json;
+
 		logger.debug('📝 hasInputSchema:', hasInputSchema, 'value:', value);
 
 		// Only require value for agents with input schemas
 		if (hasInputSchema && !value.trim()) {
 			logger.debug('❌ Returning early - hasInputSchema but no value');
+
 			return;
 		}
 
@@ -353,7 +387,6 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 			role: 'user',
 			parts: [{ type: 'text', text: displayText }],
 		};
-
 		const assistantMessageId = (now + 1).toString();
 		const placeholderAssistantMessage: UIMessage = {
 			id: assistantMessageId,
@@ -365,8 +398,10 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 		setIsLoading(true);
 
 		logger.debug('🔗 baseUrl:', baseUrl, 'isBaseUrlNull:', isBaseUrlNull);
+
 		if (!baseUrl || isBaseUrlNull) {
 			logger.debug('❌ Message submission blocked - baseUrl is null or missing');
+
 			const errorMessage: UIMessage = {
 				id: assistantMessageId,
 				role: 'assistant',
@@ -377,8 +412,11 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 					},
 				],
 			};
+
 			setMessages((prev) => prev.map((m) => (m.id === assistantMessageId ? errorMessage : m)));
+
 			setIsLoading(false);
+
 			return;
 		}
 
@@ -386,6 +424,7 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 			// Parse input - if it's JSON, parse it, otherwise use as string
 			// For agents without input schema, send undefined
 			let parsedInput: unknown;
+
 			if (!hasInputSchema) {
 				parsedInput = undefined;
 			} else {
@@ -397,17 +436,17 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 			}
 
 			logger.debug('🌐 About to make API call...');
+
 			// Call execution endpoint with timeout
 			const headers: Record<string, string> = {
 				'Content-Type': 'application/json',
 			};
+
 			if (apiKey) {
 				headers.Authorization = `Bearer ${apiKey}`;
 			}
-			applyThreadIdHeader(headers);
 
-			const controller = new AbortController();
-			const timeoutId = setTimeout(() => controller.abort(), 30000); // 30s timeout
+			applyThreadIdHeader(headers);
 
 			const startTime = performance.now();
 
@@ -416,32 +455,55 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 					agentId: selectedAgent,
 					input: parsedInput,
 				};
+
 				logger.debug('📤 API Request payload:', requestPayload);
+
 				const response = await fetch(`${baseUrl}/_agentuity/workbench/execute`, {
 					method: 'POST',
 					headers,
 					body: JSON.stringify(requestPayload),
-					signal: controller.signal,
 					credentials: 'include',
 				});
+
 				persistThreadIdFromResponse(response);
-				clearTimeout(timeoutId);
 
 				if (!response.ok) {
-					let errorMessage = `Request failed with status ${response.status}`;
+					let errorText = `Request failed with status ${response.status}`;
+
 					try {
 						const errorData = await response.json();
-						errorMessage = errorData.error || errorData.message || errorMessage;
+
+						errorText = errorData.error || errorData.message || errorText;
 					} catch {
 						// If JSON parsing fails, use status text
-						errorMessage = response.statusText || errorMessage;
+						errorText = response.statusText || errorText;
 					}
-					throw new Error(errorMessage);
+
+					const errorPayload = JSON.stringify({
+						__agentError: true,
+						message: errorText,
+						code: `HTTP_${response.status}`,
+					});
+
+					const errorMessage: UIMessage = {
+						id: assistantMessageId,
+						role: 'assistant',
+						parts: [{ type: 'text', text: errorPayload }],
+					};
+
+					setMessages((prev) =>
+						prev.map((m) => (m.id === assistantMessageId ? errorMessage : m))
+					);
+
+					setIsLoading(false);
+
+					return;
 				}
 
-				let result;
+				let responseBody: unknown;
+
 				try {
-					result = await response.json();
+					responseBody = await response.json();
 				} catch (jsonError) {
 					throw new Error(`Invalid JSON response from server: ${jsonError}`);
 				}
@@ -458,27 +520,79 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 				const tokensRecord = tokensHeader ? parseTokensHeader(tokensHeader) : undefined;
 				const totalTokens = tokensRecord ? getTotalTokens(tokensRecord) : undefined;
 
+				// Handle wrapped response shape: { success, data?, error? }
+				const envelope =
+					typeof responseBody === 'object' && responseBody !== null
+						? (responseBody as {
+								success?: boolean;
+								data?: unknown;
+								error?: {
+									message?: string;
+									stack?: string;
+									code?: string;
+									cause?: unknown;
+								};
+							})
+						: null;
+
+				if (envelope && 'success' in envelope && envelope.success === false && envelope.error) {
+					// Agent execution error - encode as special JSON format for ErrorBubble
+					const errorPayload = JSON.stringify({
+						__agentError: true,
+						message: envelope.error.message || 'Unknown error',
+						stack: envelope.error.stack,
+						code: envelope.error.code,
+						cause: envelope.error.cause,
+					});
+
+					const errorMessage: UIMessage = {
+						id: assistantMessageId,
+						role: 'assistant',
+						parts: [{ type: 'text', text: errorPayload }],
+					};
+
+					setMessages((prev) =>
+						prev.map((m) => (m.id === assistantMessageId ? errorMessage : m))
+					);
+					return;
+				}
+
+				// Success - extract data from envelope (or use raw response if not wrapped)
+				const result =
+					envelope && 'success' in envelope && envelope.success === true
+						? envelope.data
+						: responseBody;
+
 				// Format result as JSON string for display
 				const resultText =
 					typeof result === 'object' ? JSON.stringify(result, null, 2) : String(result);
 
-				const assistantMessage: UIMessage & { tokens?: string; duration?: string } = {
+				const sessionId = response.headers.get('x-session-id') || undefined;
+
+				const assistantMessage: UIMessage & {
+					tokens?: string;
+					duration?: string;
+					sessionId?: string;
+				} = {
 					id: assistantMessageId,
 					role: 'assistant',
 					parts: [{ type: 'text', text: resultText }],
 					tokens: totalTokens?.toString(),
 					duration,
+					sessionId,
 				};
 
 				setMessages((prev) =>
 					prev.map((m) => (m.id === assistantMessageId ? assistantMessage : m))
 				);
 			} catch (fetchError) {
-				clearTimeout(timeoutId);
+				logger.error('❌ Failed to submit message:', fetchError);
+
 				throw fetchError;
 			}
 		} catch (error) {
-			console.error('Failed to submit message:', error);
+			logger.error('❌ Failed to submit message:', error);
+
 			const errorText =
 				error instanceof Error
 					? error.name === 'AbortError'
@@ -486,16 +600,19 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 						: error.message
 					: 'Sorry, I encountered an error processing your message.';
 
+			const errorPayload = JSON.stringify({
+				__agentError: true,
+				message: errorText,
+				code:
+					error instanceof Error && error.name === 'AbortError' ? 'TIMEOUT' : 'REQUEST_ERROR',
+			});
+
 			const errorMessage: UIMessage = {
 				id: assistantMessageId,
 				role: 'assistant',
-				parts: [
-					{
-						type: 'text',
-						text: errorText,
-					},
-				],
+				parts: [{ type: 'text', text: errorPayload }],
 			};
+
 			setMessages((prev) => prev.map((m) => (m.id === assistantMessageId ? errorMessage : m)));
 		} finally {
 			setIsLoading(false);
@@ -508,6 +625,7 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 		}
 
 		setIsGeneratingSample(true);
+
 		try {
 			const url = `${baseUrl}/_agentuity/workbench/sample?agentId=${encodeURIComponent(agentId)}`;
 			const headers: HeadersInit = {
@@ -515,8 +633,9 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 			};
 
 			if (apiKey) {
-				headers['Authorization'] = `Bearer ${apiKey}`;
+				headers.Authorization = `Bearer ${apiKey}`;
 			}
+
 			// Keep thread id stable across workbench endpoints.
 			if (typeof headers === 'object' && headers && !Array.isArray(headers)) {
 				applyThreadIdHeader(headers as Record<string, string>);
@@ -527,23 +646,29 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 				headers,
 				credentials: 'include',
 			});
+
 			persistThreadIdFromResponse(response);
 
 			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);
@@ -552,6 +677,7 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 
 	const handleAgentSelect = async (agentId: string) => {
 		logger.debug('🔄 handleAgentSelect called with:', agentId);
+
 		setSelectedAgent(agentId);
 		// Save selection to localStorage for persistence across sessions
 		saveSelectedAgent(agentId);
@@ -567,9 +693,11 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 
 			try {
 				const headers: Record<string, string> = {};
+
 				if (apiKey) {
 					headers.Authorization = `Bearer ${apiKey}`;
 				}
+
 				applyThreadIdHeader(headers);
 
 				const url = `${baseUrl}/_agentuity/workbench/state?agentId=${encodeURIComponent(agentId)}`;
@@ -578,10 +706,12 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 					headers,
 					credentials: 'include',
 				});
+
 				persistThreadIdFromResponse(response);
 
 				if (response.ok) {
 					setMessages([]);
+
 					logger.debug('✅ Cleared state for agent:', agentId);
 				} else {
 					logger.debug('⚠️ Failed to clear state');
@@ -594,29 +724,25 @@ export function WorkbenchProvider({ config, isAuthenticated, children }: Workben
 	);
 
 	const contextValue: WorkbenchContextType = {
-		config,
 		agents: agents || {},
-		suggestions,
-		messages,
-		setMessages,
-		selectedAgent,
-		setSelectedAgent: handleAgentSelect,
-		inputMode,
-		setInputMode,
-		isLoading: isLoading || !!schemasLoading,
-		submitMessage,
+		clearAgentState,
+		config,
+		connectionStatus,
+		env,
 		generateSample,
+		inputMode,
 		isGeneratingSample,
-		isAuthenticated,
-		// Schema data from API
+		isLoading: isLoading || !!schemasLoading,
+		messages,
+		refetchSchemas,
 		schemas: schemaData,
-		schemasLoading: !!schemasLoading,
 		schemasError,
-		refetchSchemas,
-		// Connection status
-		connectionStatus,
-		// Clear agent state
-		clearAgentState,
+		schemasLoading: !!schemasLoading,
+		selectedAgent,
+		setInputMode,
+		setMessages,
+		setSelectedAgent: handleAgentSelect,
+		submitMessage,
 	};
 
 	return <WorkbenchContext.Provider value={contextValue}>{children}</WorkbenchContext.Provider>;

package/src/components/ui/avatar.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import type * as React from 'react';
 
 import { cn } from '../../lib/utils';
 

package/src/components/ui/command.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import { Command as CommandPrimitive } from 'cmdk';
 import { SearchIcon } from 'lucide-react';
+import type * as React from 'react';
 
 import { cn } from '../../lib/utils';
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog';

package/src/components/ui/dialog.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { XIcon } from 'lucide-react';
+import type * as React from 'react';
 
 import { cn } from '../../lib/utils';
 

package/src/components/ui/dropdown-menu.tsx

@@ -1,8 +1,8 @@
 'use client';
 
-import * as React from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react';
+import type * as React from 'react';
 
 import { cn } from '../../lib/utils';
 

package/src/components/ui/hover-card.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
 import * as HoverCardPrimitive from '@radix-ui/react-hover-card';
+import type * as React from 'react';
 
 import { cn } from '../../lib/utils';
 

package/src/components/ui/input-group.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
+import type * as React from 'react';
 
 import { cn } from '../../lib/utils';
 import { Button } from './button';

package/src/components/ui/input.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 
 import { cn } from '../../lib/utils';