@agentuity/workbench 0.0.94 → 0.0.96

package/src/components/internal/InputSection.tsx

@@ -6,6 +6,7 @@ import {
 	SendIcon,
 	Loader2Icon,
 	Sparkles,
+	Trash2,
 } from 'lucide-react';
 import { MonacoJsonEditor } from './MonacoJsonEditor';
 import {
@@ -25,12 +26,13 @@ import {
 } from '../ui/command';
 import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
 import { Select, SelectContent, SelectItem, SelectTrigger } from '../ui/select';
+import { Tooltip, TooltipContent, TooltipTrigger } from '../ui/tooltip';
 import { cn } from '../../lib/utils';
 import type { AgentSchemaData } from '../../hooks/useAgentSchemas';
 import { useLogger } from '../../hooks/useLogger';
 import type { JSONSchema7 } from 'ai';
+import { useWorkbench } from './WorkbenchProvider';
 import { convertJsonSchemaToZod } from 'zod-from-json-schema';
-import { zocker } from 'zocker';
 
 export interface InputSectionProps {
 	value: string;
@@ -43,6 +45,7 @@ export interface InputSectionProps {
 	suggestions: string[];
 	isSchemaOpen: boolean;
 	onSchemaToggle: () => void;
+	clearAgentState?: (agentId: string) => Promise<void>;
 }
 
 function isSchemaRootObject(schemaJson?: JSONSchema7): boolean {
@@ -68,8 +71,10 @@ export function InputSection({
 	suggestions,
 	isSchemaOpen,
 	onSchemaToggle,
+	clearAgentState,
 }: InputSectionProps) {
 	const logger = useLogger('InputSection');
+	const { generateSample, isGeneratingSample, isAuthenticated } = useWorkbench();
 	const [agentSelectOpen, setAgentSelectOpen] = useState(false);
 	const [isValidInput, setIsValidInput] = useState(true);
 	const [monacoHasErrors, setMonacoHasErrors] = useState<boolean | null>(null);
@@ -159,18 +164,14 @@ export function InputSection({
 		monacoHasErrors,
 	]);
 
-	const handleGenerateSample = () => {
-		if (!selectedAgentData?.schema.input?.json || !isObjectSchema) return;
+	const handleGenerateSample = async () => {
+		if (!selectedAgentData?.schema.input?.json || !isObjectSchema || !selectedAgent) return;
 
 		try {
-			const jsonSchema = selectedAgentData.schema.input.json;
-			const schemaObject = typeof jsonSchema === 'string' ? JSON.parse(jsonSchema) : jsonSchema;
-
-			const zodSchema = convertJsonSchemaToZod(schemaObject);
-			const sampleData = zocker(zodSchema).generate();
-			const sampleJson = JSON.stringify(sampleData, null, 2);
+			const sampleJson = await generateSample(selectedAgent);
 			onChange(sampleJson);
 		} catch (error) {
+			logger.error('Failed to generate sample JSON:', error);
 			console.error('Failed to generate sample JSON:', error);
 		}
 	};
@@ -268,17 +269,49 @@ export function InputSection({
 					</Select>
 				)}
 
-				{isObjectSchema && (
-					<Button
-						aria-label="Generate Sample JSON"
-						size="sm"
-						variant="outline"
-						className="bg-none font-normal"
-						onClick={handleGenerateSample}
-					>
-						<Sparkles className="size-4" /> Sample
-					</Button>
-				)}
+				{isObjectSchema &&
+					(isAuthenticated ? (
+						<Button
+							aria-label="Generate Sample JSON"
+							size="sm"
+							variant="outline"
+							className="bg-none font-normal"
+							onClick={handleGenerateSample}
+							disabled={isGeneratingSample || !isAuthenticated}
+						>
+							{isGeneratingSample ? (
+								<Loader2Icon className="size-4 animate-spin" />
+							) : (
+								<Sparkles className="size-4" />
+							)}{' '}
+							Sample
+						</Button>
+					) : (
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<span className="inline-flex">
+									<Button
+										aria-label="Generate Sample JSON"
+										size="sm"
+										variant="outline"
+										className="bg-none font-normal"
+										onClick={handleGenerateSample}
+										disabled={isGeneratingSample || !isAuthenticated}
+									>
+										{isGeneratingSample ? (
+											<Loader2Icon className="size-4 animate-spin" />
+										) : (
+											<Sparkles className="size-4" />
+										)}{' '}
+										Sample
+									</Button>
+								</span>
+							</TooltipTrigger>
+							<TooltipContent>
+								<p>Login to generate a sample</p>
+							</TooltipContent>
+						</Tooltip>
+					))}
 
 				<Button
 					aria-label={isSchemaOpen ? 'Hide Schema' : 'View Schema'}
@@ -289,6 +322,18 @@ export function InputSection({
 				>
 					<FileJson className="size-4" /> Schema
 				</Button>
+
+				{clearAgentState && selectedAgent && (
+					<Button
+						aria-label="Clear conversation history"
+						size="sm"
+						variant="outline"
+						className="bg-none font-normal text-muted-foreground hover:text-destructive"
+						onClick={() => clearAgentState(selectedAgent)}
+					>
+						<Trash2 className="size-4" /> Clear
+					</Button>
+				)}
 			</div>
 
 			<PromptInput onSubmit={onSubmit} className="px-3 pb-3">

package/src/components/internal/MonacoJsonEditor.tsx

@@ -167,7 +167,8 @@ export function MonacoJsonEditor({
 			style={{ minHeight: '64px', maxHeight: '192px', height: `${editorHeight}px` }}
 		>
 			<Editor
-				value={value || '{}'}
+				// Allow the editor to be truly empty. We intentionally do NOT coerce to `{}`.
+				value={value}
 				onChange={(newValue) => onChange(newValue || '')}
 				language="json"
 				theme={resolvedTheme === 'light' ? 'custom-light' : 'custom-dark'}
@@ -243,6 +244,12 @@ export function MonacoJsonEditor({
 						const checkValidationErrors = () => {
 							const model = editor.getModel();
 							if (model) {
+								// Treat an empty editor as a valid "empty state" (avoid Monaco's JSON parse error).
+								if (!model.getValue().trim()) {
+									onValidationChange(false);
+									return;
+								}
+
 								const markers = monaco.editor.getModelMarkers({ resource: model.uri });
 								const hasErrors = markers.some(
 									(marker: monaco.editor.IMarker) =>

package/src/components/internal/WorkbenchProvider.tsx

@@ -22,10 +22,11 @@ interface WorkbenchProviderProps {
 		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');
 
 	// localStorage utilities scoped by project
@@ -54,10 +55,51 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 		}
 	}, [getStorageKey]);
 
+	const saveThreadId = useCallback(
+		(threadId: string) => {
+			try {
+				localStorage.setItem(getStorageKey('thread_id'), threadId);
+			} catch (error) {
+				console.warn('Failed to save thread id to localStorage:', error);
+			}
+		},
+		[getStorageKey]
+	);
+
+	const loadThreadId = useCallback((): string | null => {
+		try {
+			return localStorage.getItem(getStorageKey('thread_id'));
+		} catch (error) {
+			console.warn('Failed to load thread id from localStorage:', error);
+			return null;
+		}
+	}, [getStorageKey]);
+
+	const applyThreadIdHeader = useCallback(
+		(headers: Record<string, string>) => {
+			const threadId = loadThreadId();
+			if (threadId) {
+				headers['x-thread-id'] = threadId;
+			}
+		},
+		[loadThreadId]
+	);
+
+	const persistThreadIdFromResponse = useCallback(
+		(response: Response) => {
+			const threadId = response.headers.get('x-thread-id');
+			if (threadId) {
+				saveThreadId(threadId);
+			}
+		},
+		[saveThreadId]
+	);
+
 	const [messages, setMessages] = useState<UIMessage[]>([]);
 	const [selectedAgent, setSelectedAgent] = useState<string>('');
 	const [inputMode, setInputMode] = useState<'text' | 'form'>('text');
 	const [isLoading, setIsLoading] = useState(false);
+	const [isGeneratingSample, setIsGeneratingSample] = useState(false);
 	const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>('connected'); // Default to connected when websocket is disabled
 
 	// Config values
@@ -148,25 +190,111 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 
 	const [suggestions, _setSuggestions] = useState<string[]>([]);
 
+	// Fetch state for an agent
+	const fetchAgentState = useCallback(
+		async (agentId: string) => {
+			if (!baseUrl) {
+				logger.debug('⚠️ No baseUrl configured, skipping state fetch');
+				return;
+			}
+
+			if (!agentId) {
+				logger.debug('⚠️ No agentId provided, skipping state fetch');
+				return;
+			}
+
+			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) {
+					const data = await response.json();
+					const stateMessages = (data.messages || []) as Array<{
+						type: 'input' | 'output';
+						data: unknown;
+					}>;
+
+					// Convert state messages to UIMessage format
+					// Use stable IDs based on message index to prevent unnecessary re-renders
+					const uiMessages: UIMessage[] = stateMessages.map((msg, index) => {
+						const text =
+							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',
+							parts: [{ type: 'text', text }],
+						};
+					});
+
+					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([]);
+			}
+		},
+		[baseUrl, apiKey, logger, applyThreadIdHeader, persistThreadIdFromResponse]
+	);
+
 	// Set initial agent selection
 	useEffect(() => {
 		if (agents && Object.keys(agents).length > 0 && !selectedAgent) {
 			logger.debug('🔍 Available agents:', agents);
 
-			// Try to load previously selected agent from localStorage
-			const savedAgentId = loadSelectedAgent();
-			logger.debug('💾 Saved agent from localStorage:', savedAgentId);
+			// 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;
+				}
+			}
+
+			// If no URL param match, try localStorage
+			if (!agentToSelect) {
+				const savedAgentId = loadSelectedAgent();
+				logger.debug('💾 Saved agent from localStorage:', savedAgentId);
 
-			// Check if saved agent still exists in available agents
-			const savedAgent = savedAgentId
-				? Object.values(agents).find((agent) => agent.metadata.agentId === savedAgentId)
-				: null;
+				const savedAgent = savedAgentId
+					? Object.values(agents).find((agent) => agent.metadata.agentId === savedAgentId)
+					: null;
 
-			if (savedAgent && savedAgentId) {
-				logger.debug('✅ Restoring saved agent:', savedAgent.metadata.name);
-				setSelectedAgent(savedAgentId);
-			} else {
-				// Fallback to first agent alphabetically
+				if (savedAgent && savedAgentId) {
+					logger.debug('✅ Restoring saved agent:', savedAgent.metadata.name);
+					agentToSelect = savedAgentId;
+				}
+			}
+
+			// Fallback to first agent alphabetically
+			if (!agentToSelect) {
 				const sortedAgents = Object.values(agents).sort((a, b) =>
 					a.metadata.name.localeCompare(b.metadata.name)
 				);
@@ -175,13 +303,15 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 					'🎯 No saved agent found, using first agent (alphabetically):',
 					firstAgent
 				);
-				logger.debug('🆔 Setting selectedAgent to:', firstAgent.metadata.agentId);
-				setSelectedAgent(firstAgent.metadata.agentId);
-				// Save this selection for next time
-				saveSelectedAgent(firstAgent.metadata.agentId);
+				agentToSelect = firstAgent.metadata.agentId;
 			}
+
+			logger.debug('🆔 Setting selectedAgent to:', agentToSelect);
+			setSelectedAgent(agentToSelect);
+			saveSelectedAgent(agentToSelect);
+			fetchAgentState(agentToSelect);
 		}
-	}, [agents, selectedAgent, loadSelectedAgent, saveSelectedAgent, logger]);
+	}, [agents, selectedAgent, loadSelectedAgent, saveSelectedAgent, logger, fetchAgentState]);
 
 	// Fetch suggestions from API if endpoint is provided
 	useEffect(() => {
@@ -212,23 +342,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, '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: [
 					{
@@ -237,7 +377,7 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 					},
 				],
 			};
-			setMessages((prev) => [...prev, errorMessage]);
+			setMessages((prev) => prev.map((m) => (m.id === assistantMessageId ? errorMessage : m)));
 			setIsLoading(false);
 			return;
 		}
@@ -264,6 +404,7 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 			if (apiKey) {
 				headers.Authorization = `Bearer ${apiKey}`;
 			}
+			applyThreadIdHeader(headers);
 
 			const controller = new AbortController();
 			const timeoutId = setTimeout(() => controller.abort(), 30000); // 30s timeout
@@ -281,7 +422,9 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 					headers,
 					body: JSON.stringify(requestPayload),
 					signal: controller.signal,
+					credentials: 'include',
 				});
+				persistThreadIdFromResponse(response);
 				clearTimeout(timeoutId);
 
 				if (!response.ok) {
@@ -320,14 +463,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;
@@ -342,7 +487,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: [
 					{
@@ -351,19 +496,103 @@ 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}`;
+			}
+			// Keep thread id stable across workbench endpoints.
+			if (typeof headers === 'object' && headers && !Array.isArray(headers)) {
+				applyThreadIdHeader(headers as Record<string, string>);
+			}
+
+			const response = await fetch(url, {
+				method: 'GET',
+				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);
+		}
+	};
+
 	const handleAgentSelect = async (agentId: string) => {
 		logger.debug('🔄 handleAgentSelect called with:', agentId);
 		setSelectedAgent(agentId);
 		// Save selection to localStorage for persistence across sessions
 		saveSelectedAgent(agentId);
+		// Fetch state for the selected agent
+		await fetchAgentState(agentId);
 	};
 
+	const clearAgentState = useCallback(
+		async (agentId: string) => {
+			if (!baseUrl) {
+				return;
+			}
+
+			try {
+				const headers: Record<string, string> = {};
+				if (apiKey) {
+					headers.Authorization = `Bearer ${apiKey}`;
+				}
+				applyThreadIdHeader(headers);
+
+				const url = `${baseUrl}/_agentuity/workbench/state?agentId=${encodeURIComponent(agentId)}`;
+				const response = await fetch(url, {
+					method: 'DELETE',
+					headers,
+					credentials: 'include',
+				});
+				persistThreadIdFromResponse(response);
+
+				if (response.ok) {
+					setMessages([]);
+					logger.debug('✅ Cleared state for agent:', agentId);
+				} else {
+					logger.debug('⚠️ Failed to clear state');
+				}
+			} catch (error) {
+				logger.debug('⚠️ Error clearing state:', error);
+			}
+		},
+		[baseUrl, apiKey, logger, applyThreadIdHeader, persistThreadIdFromResponse]
+	);
+
 	const contextValue: WorkbenchContextType = {
 		config,
 		agents: agents || {},
@@ -376,6 +605,9 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 		setInputMode,
 		isLoading: isLoading || !!schemasLoading,
 		submitMessage,
+		generateSample,
+		isGeneratingSample,
+		isAuthenticated,
 		// Schema data from API
 		schemas: schemaData,
 		schemasLoading: !!schemasLoading,
@@ -383,6 +615,8 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 		refetchSchemas,
 		// Connection status
 		connectionStatus,
+		// Clear agent state
+		clearAgentState,
 	};
 
 	return <WorkbenchContext.Provider value={contextValue}>{children}</WorkbenchContext.Provider>;

package/src/lib/utils.ts

@@ -40,12 +40,13 @@ export function getTotalTokens(tokens: Record<string, number>): number {
 }
 
 export const getProcessEnv = (key: string): string | undefined => {
-	if (typeof process !== 'undefined' && process.env) {
-		return process.env[key];
-	}
+	// Prioritize import.meta.env for browser/Vite environments
 	if (typeof import.meta.env !== 'undefined') {
 		return import.meta.env[key];
 	}
+	if (typeof process !== 'undefined' && process.env) {
+		return process.env[key];
+	}
 	return undefined;
 };
 

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;
@@ -31,4 +34,6 @@ export interface WorkbenchContextType {
 	refetchSchemas: () => void;
 	// Connection status
 	connectionStatus: ConnectionStatus;
+	// Clear agent state
+	clearAgentState: (agentId: string) => Promise<void>;
 }