@agentuity/workbench 0.0.93 → 0.0.95

package/src/components/internal/Chat.tsx

@@ -19,13 +19,14 @@ export interface ChatProps {
 	className?: string;
 	schemaOpen: boolean;
 	onSchemaToggle: () => void;
+	emptyState?: React.ReactNode;
 }
 
 /**
  * Chat component - conversation and input area (everything except header)
  * Must be used within WorkbenchProvider
  */
-export function Chat({ className: _className, schemaOpen, onSchemaToggle }: ChatProps) {
+export function Chat({ className: _className, schemaOpen, onSchemaToggle, emptyState }: ChatProps) {
 	const logger = useLogger('Chat');
 	const {
 		agents,
@@ -35,6 +36,7 @@ export function Chat({ className: _className, schemaOpen, onSchemaToggle }: Chat
 		setSelectedAgent,
 		isLoading,
 		submitMessage,
+		connectionStatus,
 	} = useWorkbench();
 
 	const [value, setValue] = useState('');
@@ -63,116 +65,120 @@ export function Chat({ className: _className, schemaOpen, onSchemaToggle }: Chat
 	return (
 		<div className="flex flex-col h-full overflow-hidden">
 			<Conversation className="flex-1 overflow-y-auto">
-				<ConversationContent className="pb-0">
-					{messages.map((message) => {
-						const { role, parts, id } = message;
-						const isStreaming = parts.some(
-							(part) => part.type === 'text' && part.state === 'streaming'
-						);
-						const tokens =
-							'tokens' in message ? (message as { tokens?: string }).tokens : undefined;
-						const duration =
-							'duration' in message
-								? (message as { duration?: string }).duration
-								: undefined;
+				{connectionStatus === 'disconnected' && emptyState ? (
+					<div className="flex flex-col h-full">{emptyState}</div>
+				) : (
+					<ConversationContent className="pb-0">
+						{messages.map((message) => {
+							const { role, parts, id } = message;
+							const isStreaming = parts.some(
+								(part) => part.type === 'text' && part.state === 'streaming'
+							);
+							const tokens =
+								'tokens' in message ? (message as { tokens?: string }).tokens : undefined;
+							const duration =
+								'duration' in message
+									? (message as { duration?: string }).duration
+									: undefined;
 
-						return (
-							<div key={id} className="mb-2">
-								{role === 'assistant' && (
-									<div
-										className={cn(
-											'w-fit flex items-center mb-2 text-muted-foreground text-sm transition-colors',
-											!isStreaming && 'hover:text-foreground cursor-pointer'
-										)}
-									>
-										<Loader
+							return (
+								<div key={id} className="mb-2">
+									{role === 'assistant' && (
+										<div
 											className={cn(
-												'size-4 transition-all',
-												isStreaming || isLoading ? 'animate-spin mr-2' : 'w-0 mr-2.5'
+												'w-fit flex items-center mb-2 text-muted-foreground text-sm transition-colors',
+												!isStreaming && 'hover:text-foreground cursor-pointer'
 											)}
-										/>
-
-										{isStreaming || isLoading ? (
-											<Shimmer duration={1}>Running...</Shimmer>
-										) : (
-											<>
-												{duration && (
-													<>
-														Ran for
-														<span className="mx-1">{duration}</span>
-													</>
+										>
+											<Loader
+												className={cn(
+													'size-4 transition-all',
+													isStreaming ? 'animate-spin mr-2' : 'w-0 mr-2.5'
 												)}
-												{duration && tokens && ` and consumed  ${tokens} tokens`}
-												{(duration || tokens) && <ChevronRight className="size-4" />}
-											</>
-										)}
-									</div>
-								)}
+											/>
 
-								{(role === 'user' || !(isStreaming || isLoading)) && (
-									<>
-										<Message
-											key={id}
-											from={role as 'user' | 'system' | 'assistant'}
-											className="p-0"
-										>
-											<MessageContent>
-												{parts.map((part, index) => {
-													switch (part.type) {
-														case 'text':
-															return (
-																<div key={`${id}-${part.text}-${index}`}>
-																	{part.text || ''}
-																</div>
-															);
-													}
-												})}
-											</MessageContent>
-										</Message>
+											{isStreaming ? (
+												<Shimmer duration={1}>Running...</Shimmer>
+											) : (
+												<>
+													{duration && (
+														<>
+															Ran for
+															<span className="mx-1">{duration}</span>
+														</>
+													)}
+													{duration && tokens && ` and consumed  ${tokens} tokens`}
+													{(duration || tokens) && <ChevronRight className="size-4" />}
+												</>
+											)}
+										</div>
+									)}
+
+									{(role === 'user' || !isStreaming) && (
+										<>
+											<Message
+												key={id}
+												from={role as 'user' | 'system' | 'assistant'}
+												className="p-0"
+											>
+												<MessageContent>
+													{parts.map((part, index) => {
+														switch (part.type) {
+															case 'text':
+																return (
+																	<div key={`${id}-${part.text}-${index}`}>
+																		{part.text || ''}
+																	</div>
+																);
+														}
+													})}
+												</MessageContent>
+											</Message>
+
+											<Actions
+												className={cn('mt-1 gap-0', role === 'user' && 'justify-end')}
+											>
+												{role === 'user' && (
+													<Action
+														label="Retry"
+														className="size-8 hover:bg-transparent!"
+														onClick={() =>
+															setValue(
+																parts
+																	.filter((part) => part.type === 'text')
+																	.map((part) => part.text)
+																	.join('')
+															)
+														}
+													>
+														<RefreshCcw className="size-4" />
+													</Action>
+												)}
 
-										<Actions
-											className={cn('mt-1 gap-0', role === 'user' && 'justify-end')}
-										>
-											{role === 'user' && (
 												<Action
-													label="Retry"
-													className="size-8 hover:bg-transparent!"
 													onClick={() =>
-														setValue(
+														navigator.clipboard.writeText(
 															parts
 																.filter((part) => part.type === 'text')
 																.map((part) => part.text)
 																.join('')
 														)
 													}
+													label="Copy"
+													className="size-8 hover:bg-transparent!"
 												>
-													<RefreshCcw className="size-4" />
+													<Copy className="size-4" />
 												</Action>
-											)}
-
-											<Action
-												onClick={() =>
-													navigator.clipboard.writeText(
-														parts
-															.filter((part) => part.type === 'text')
-															.map((part) => part.text)
-															.join('')
-													)
-												}
-												label="Copy"
-												className="size-8 hover:bg-transparent!"
-											>
-												<Copy className="size-4" />
-											</Action>
-										</Actions>
-									</>
-								)}
-							</div>
-						);
-					})}
-				</ConversationContent>
+											</Actions>
+										</>
+									)}
+								</div>
+							);
+						})}
+					</ConversationContent>
+				)}
 
-				<ConversationScrollButton />
+				{connectionStatus !== 'disconnected' && <ConversationScrollButton />}
 			</Conversation>
 			<InputSection
 				value={value}

package/src/components/internal/Header.tsx

@@ -10,7 +10,7 @@ export interface HeaderProps {
 	className?: string;
 }
 
-function StatusIndicator({ status }: { status: ConnectionStatus }) {
+export function StatusIndicator({ status }: { status: ConnectionStatus }) {
 	if (status === 'connected') {
 		return (
 			<div className="flex items-center gap-1.5 text-xs text-green-600 dark:text-green-400">

package/src/components/internal/InputSection.tsx

@@ -25,12 +25,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;
@@ -70,6 +71,7 @@ export function InputSection({
 	onSchemaToggle,
 }: 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 +161,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 +266,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'}
@@ -293,58 +323,66 @@ export function InputSection({
 
 			<PromptInput onSubmit={onSubmit} className="px-3 pb-3">
 				<PromptInputBody>
-					{(() => {
-						switch (inputType) {
-							case 'object':
-								return (
-									<MonacoJsonEditor
-										value={value}
-										onChange={onChange}
-										schema={selectedAgentData?.schema.input?.json}
-										schemaUri={`agentuity://schema/${selectedAgentData?.metadata.id}/input`}
-										aria-invalid={!isValidInput}
-										onValidationChange={setMonacoHasErrors}
-									/>
-								);
+					{!selectedAgent ? (
+						<div className="flex flex-col items-center justify-center py-8 px-4 text-center">
+							<p className="text-sm text-muted-foreground">
+								Select an agent to get started.
+							</p>
+						</div>
+					) : (
+						(() => {
+							switch (inputType) {
+								case 'object':
+									return (
+										<MonacoJsonEditor
+											value={value}
+											onChange={onChange}
+											schema={selectedAgentData?.schema.input?.json}
+											schemaUri={`agentuity://schema/${selectedAgentData?.metadata.id}/input`}
+											aria-invalid={!isValidInput}
+											onValidationChange={setMonacoHasErrors}
+										/>
+									);
 
-							case 'string':
-								return (
-									<PromptInputTextarea
-										placeholder="Enter a message to send..."
-										value={value}
-										onChange={(e) => onChange(e.target.value)}
-									/>
-								);
-							default:
-								return (
-									<div className="flex flex-col items-center justify-center py-8 px-4 text-center ">
-										<p className="text-sm text-muted-foreground">
-											<span className="font-medium">
-												This agent has no input schema.{' '}
-											</span>
-										</p>
-										<Button
-											aria-label="Run Agent"
-											size="sm"
-											variant="default"
-											disabled={isLoading}
-											onClick={onSubmit}
-											className="mt-2"
-										>
-											{isLoading ? (
-												<Loader2Icon className="size-4 animate-spin mr-2" />
-											) : (
-												<SendIcon className="size-4 mr-2" />
-											)}
-											Run Agent
-										</Button>
-									</div>
-								);
-						}
-					})()}
+								case 'string':
+									return (
+										<PromptInputTextarea
+											placeholder="Enter a message to send..."
+											value={value}
+											onChange={(e) => onChange(e.target.value)}
+										/>
+									);
+								default:
+									return (
+										<div className="flex flex-col items-center justify-center py-8 px-4 text-center ">
+											<p className="text-sm text-muted-foreground">
+												<span className="font-medium">
+													This agent has no input schema.{' '}
+												</span>
+											</p>
+											<Button
+												aria-label="Run Agent"
+												size="sm"
+												variant="default"
+												disabled={isLoading}
+												onClick={onSubmit}
+												className="mt-2"
+											>
+												{isLoading ? (
+													<Loader2Icon className="size-4 animate-spin mr-2" />
+												) : (
+													<SendIcon className="size-4 mr-2" />
+												)}
+												Run Agent
+											</Button>
+										</div>
+									);
+							}
+						})()
+					)}
 				</PromptInputBody>
 				<PromptInputFooter>
-					{inputType !== 'none' && (
+					{selectedAgent && inputType !== 'none' && (
 						<Button
 							aria-label="Submit"
 							size="icon"

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) =>