@agentuity/workbench 0.0.104 → 0.0.106

package/src/components/internal/{Header.tsx → header.tsx}

@@ -1,20 +1,50 @@
-import React from 'react';
 import { Settings } from 'lucide-react';
-import Logo from './logo';
+import { cn } from '../../lib/utils';
+import type { ConnectionStatus } from '../../types/config';
 import { Button } from '../ui/button';
 import { ThemeToggle } from '../ui/theme-toggle';
-import { useWorkbench } from './WorkbenchProvider';
-import type { ConnectionStatus } from '../../types/config';
+import Logo from './logo';
+import { useWorkbench } from './workbench-provider';
 
 export interface HeaderProps {
 	className?: string;
+	title?: string;
+	showSettings?: boolean;
+}
+
+export function Header({ className, title = 'Workbench', showSettings = false }: HeaderProps) {
+	const { connectionStatus } = useWorkbench();
+
+	return (
+		<nav className={cn('flex items-center justify-between gap-6 py-2 px-4 border-b', className)}>
+			<div className="flex items-center gap-2.5">
+				<Logo />
+
+				<h1 className="text-sm">{title}</h1>
+			</div>
+
+			<div className="flex items-center gap-3">
+				<StatusIndicator status={connectionStatus} />
+
+				<div className="flex items-center gap-1">
+					<ThemeToggle />
+
+					{showSettings && (
+						<Button size="icon" variant="ghost">
+							<Settings />
+						</Button>
+					)}
+				</div>
+			</div>
+		</nav>
+	);
 }
 
 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">
-				<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
+				<div className="size-2 rounded-full bg-green-500 animate-pulse"></div>
 				<span>Connected</span>
 			</div>
 		);
@@ -23,7 +53,7 @@ export function StatusIndicator({ status }: { status: ConnectionStatus }) {
 	if (status === 'restarting') {
 		return (
 			<div className="flex items-center gap-1.5 text-xs text-amber-600 dark:text-amber-400">
-				<div className="w-2 h-2 rounded-full bg-amber-500 animate-spin"></div>
+				<div className="size-2 rounded-full bg-amber-500 animate-pulse"></div>
 				<span>Restarting...</span>
 			</div>
 		);
@@ -32,7 +62,7 @@ export function StatusIndicator({ status }: { status: ConnectionStatus }) {
 	if (status === 'disconnected') {
 		return (
 			<div className="flex items-center gap-1.5 text-xs text-red-600 dark:text-red-400">
-				<div className="w-2 h-2 rounded-full bg-red-500"></div>
+				<div className="size-2 rounded-full bg-red-500"></div>
 				<span>Disconnected</span>
 			</div>
 		);
@@ -41,37 +71,4 @@ export function StatusIndicator({ status }: { status: ConnectionStatus }) {
 	return null;
 }
 
-/**
- * Header component - navigation bar with logo, title, and settings
- * Must be used within WorkbenchProvider
- */
-export function Header({ className }: HeaderProps) {
-	const { connectionStatus } = useWorkbench();
-	const LogoComponent = Logo;
-	const title = 'Workbench';
-	const showSettings = true;
-
-	return (
-		<nav
-			className={`flex items-center justify-between gap-6 py-2 px-4 border-b ${className || ''}`}
-		>
-			<div className="flex items-center gap-2.5">
-				<LogoComponent />
-				<h1 className="mt-0.5 text-sm">{title}</h1>
-			</div>
-			<div className="flex items-center gap-3">
-				<StatusIndicator status={connectionStatus} />
-				<div className="flex items-center gap-1">
-					<ThemeToggle />
-					{showSettings && (
-						<Button size="icon" variant="ghost">
-							<Settings />
-						</Button>
-					)}
-				</div>
-			</div>
-		</nav>
-	);
-}
-
 export default Header;

package/src/components/internal/{InputSection.tsx → input-section.tsx}

@@ -1,14 +1,22 @@
-import React, { useMemo, useState, useCallback, useEffect } from 'react';
+import type { JSONSchema7 } from 'ai';
 import {
+	ArrowUp,
+	Braces,
 	CheckIcon,
+	ChevronDownIcon,
 	ChevronsUpDownIcon,
-	FileJson,
-	SendIcon,
+	ListPlus,
 	Loader2Icon,
+	SendIcon,
 	Sparkles,
+	SquareCode,
 	Trash2,
 } from 'lucide-react';
-import { MonacoJsonEditor } from './MonacoJsonEditor';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { convertJsonSchemaToZod } from 'zod-from-json-schema';
+import type { AgentSchemaData } from '../../hooks/useAgentSchemas';
+import { useLogger } from '../../hooks/useLogger';
+import { cn, generateTemplateFromSchema } from '../../lib/utils';
 import {
 	PromptInput,
 	PromptInputBody,
@@ -25,31 +33,27 @@ import {
 	CommandList,
 } 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 { JsonEditor } from './json-editor';
+import { useWorkbench } from './workbench-provider';
 
 export interface InputSectionProps {
-	value: string;
+	agents: Record<string, AgentSchemaData>;
+	className?: string;
+	clearAgentState?: (agentId: string) => Promise<void>;
+	isLoading: boolean;
+	isSchemaOpen: boolean;
 	onChange: (value: string) => void;
+	onSchemaToggle: () => void;
 	onSubmit: () => void | Promise<void>;
-	isLoading: boolean;
-	agents: Record<string, AgentSchemaData>;
 	selectedAgent: string;
 	setSelectedAgent: (agentId: string) => void;
-	suggestions: string[];
-	isSchemaOpen: boolean;
-	onSchemaToggle: () => void;
-	clearAgentState?: (agentId: string) => Promise<void>;
+	value: string;
 }
 
 function isSchemaRootObject(schemaJson?: JSONSchema7): boolean {
 	if (!schemaJson) return false;
+
 	try {
 		return (
 			schemaJson.type === 'object' ||
@@ -61,21 +65,23 @@ function isSchemaRootObject(schemaJson?: JSONSchema7): boolean {
 }
 
 export function InputSection({
-	value,
+	agents,
+	className,
+	clearAgentState,
+	isLoading,
+	isSchemaOpen,
 	onChange,
+	onSchemaToggle,
 	onSubmit,
-	isLoading,
-	agents,
 	selectedAgent,
 	setSelectedAgent,
-	suggestions,
-	isSchemaOpen,
-	onSchemaToggle,
-	clearAgentState,
+	value,
 }: InputSectionProps) {
 	const logger = useLogger('InputSection');
-	const { generateSample, isGeneratingSample, isAuthenticated } = useWorkbench();
+	const { generateSample, isGeneratingSample, env } = useWorkbench();
+	const isAuthenticated = env.authenticated;
 	const [agentSelectOpen, setAgentSelectOpen] = useState(false);
+	const [prefillOpen, setPrefillOpen] = useState(false);
 	const [isValidInput, setIsValidInput] = useState(true);
 	const [monacoHasErrors, setMonacoHasErrors] = useState<boolean | null>(null);
 
@@ -86,6 +92,7 @@ export function InputSection({
 	// Determine input type for switch case
 	const inputType = useMemo(() => {
 		const schema = selectedAgentData?.schema?.input?.json;
+
 		logger.debug(
 			'🎛️ InputSection - selectedAgent:',
 			selectedAgent,
@@ -94,17 +101,21 @@ export function InputSection({
 			'schema:',
 			schema
 		);
+
 		if (!schema) {
 			return 'none'; // Agent has no input schema
 		}
+
 		if (isSchemaRootObject(schema)) {
 			return 'object'; // Complex object schema
 		}
+
 		if (schema.type === 'string') {
 			return 'string'; // String schema
 		}
+
 		return 'none'; // Default to none for other types
-	}, [selectedAgentData?.schema.input?.json, logger]);
+	}, [selectedAgentData, logger, selectedAgent]);
 
 	const isObjectSchema = inputType === 'object';
 
@@ -125,6 +136,7 @@ export function InputSection({
 
 				// Validate with zod
 				const result = zodSchema.safeParse(parsedJson);
+
 				return result.success;
 			} catch {
 				// JSON parse error or schema validation error
@@ -135,11 +147,12 @@ export function InputSection({
 	);
 
 	// Reset Monaco error state when schema changes
+	// biome-ignore lint/correctness/useExhaustiveDependencies: Trigger on schema change
 	useEffect(() => {
 		if (isObjectSchema) {
 			setMonacoHasErrors(null);
 		}
-	}, [selectedAgentData?.schema?.input?.json, isObjectSchema]);
+	}, [selectedAgentData, isObjectSchema]);
 
 	// Update validation state - use Monaco errors if available, otherwise fall back to zod validation
 	useEffect(() => {
@@ -150,6 +163,7 @@ export function InputSection({
 			} else {
 				// Monaco hasn't reported yet, use zod validation as fallback
 				const isValid = validateInput(value, selectedAgentData?.schema?.input?.json);
+
 				setIsValidInput(isValid);
 			}
 		} else {
@@ -169,31 +183,42 @@ export function InputSection({
 
 		try {
 			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);
 		}
 	};
 
 	// Memoized submit disabled condition for readability
 	const isSubmitDisabled = useMemo(() => {
-		if (isLoading) return true;
-		if (inputType === 'string' && !value.trim()) return true;
-		if (inputType === 'object' && (!isValidInput || !value.trim())) return true;
+		if (isLoading) {
+			return true;
+		}
+
+		if (inputType === 'string' && !value.trim()) {
+			return true;
+		}
+
+		if (inputType === 'object' && (!isValidInput || !value.trim())) {
+			return true;
+		}
+
 		return false;
 	}, [isLoading, inputType, value, isValidInput]);
 
 	return (
-		<>
-			<div className="flex items-center gap-2 py-2 px-3">
+		<div className={cn('flex flex-col gap-4 p-4 z-100', className)}>
+			<div className="flex items-center gap-2">
 				<Popover open={agentSelectOpen} onOpenChange={setAgentSelectOpen}>
 					<PopoverTrigger asChild>
 						<Button
 							aria-expanded={agentSelectOpen}
-							className="font-normal bg-transparent dark:bg-transparent"
 							variant="outline"
 							size="sm"
+							className="font-normal bg-background dark:bg-background hover:bg-background dark:hover:bg-background dark:hover:border-border/70"
 						>
 							{Object.values(agents).find(
 								(agent) => agent.metadata.agentId === selectedAgent
@@ -201,7 +226,7 @@ export function InputSection({
 							<ChevronsUpDownIcon className="size-4 shrink-0 opacity-50" />
 						</Button>
 					</PopoverTrigger>
-					<PopoverContent className="w-fit p-0">
+					<PopoverContent side="top" align="start" className="w-fit p-0 z-101">
 						<Command>
 							<CommandInput placeholder="Search agents..." />
 							<CommandList>
@@ -211,8 +236,10 @@ export function InputSection({
 										.sort((a, b) => a.metadata.name.localeCompare(b.metadata.name))
 										.map((agent) => {
 											const isSelected = selectedAgent === agent.metadata.agentId;
+
 											// Use name for search but include agentId to ensure uniqueness
 											const searchValue = `${agent.metadata.name}|${agent.metadata.agentId}`;
+
 											return (
 												<CommandItem
 													key={agent.metadata.agentId}
@@ -223,6 +250,7 @@ export function InputSection({
 														const selectedAgentData = Object.values(agents).find(
 															(a) => a.metadata.agentId === agentId
 														);
+
 														if (selectedAgentData) {
 															logger.debug(
 																'🎯 Agent selected by name:',
@@ -230,8 +258,10 @@ export function InputSection({
 																'agentId:',
 																agentId
 															);
+
 															setSelectedAgent(agentId);
 														}
+
 														setAgentSelectOpen(false);
 													}}
 												>
@@ -251,96 +281,116 @@ export function InputSection({
 					</PopoverContent>
 				</Popover>
 
-				{suggestions.length > 0 && (
-					<Select onValueChange={(value) => onChange(value)}>
-						<SelectTrigger
-							size="sm"
-							className="ml-auto bg-transparent dark:bg-transparent text-foreground!"
-						>
-							Suggestions
-						</SelectTrigger>
-						<SelectContent className="text-sm" side="top" align="end">
-							{suggestions.map((suggestion) => (
-								<SelectItem key={suggestion} value={suggestion}>
-									{suggestion}
-								</SelectItem>
-							))}
-						</SelectContent>
-					</Select>
-				)}
-
-				{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'}
 					size="sm"
-					variant={isSchemaOpen ? 'default' : 'outline'}
-					className={cn('font-normal', isSchemaOpen ? 'bg-primary' : 'bg-none')}
+					variant="outline"
+					className={cn(
+						'font-normal bg-background dark:bg-background hover:bg-background dark:hover:bg-background dark:hover:border-border/50',
+						isSchemaOpen && 'bg-secondary!'
+					)}
 					onClick={onSchemaToggle}
 				>
-					<FileJson className="size-4" /> Schema
+					<Braces className="size-4" />
+					Schema
 				</Button>
 
+				{isObjectSchema && (
+					<Popover open={prefillOpen} onOpenChange={setPrefillOpen}>
+						<PopoverTrigger asChild>
+							<Button
+								aria-expanded={prefillOpen}
+								aria-label="Pre-fill input"
+								size="sm"
+								variant="outline"
+								className="font-normal bg-background dark:bg-background hover:bg-background dark:hover:bg-background dark:hover:border-border/70"
+							>
+								<ListPlus className="size-4" />
+								Pre-fill
+								<ChevronDownIcon className="size-4 shrink-0 opacity-50" />
+							</Button>
+						</PopoverTrigger>
+						<PopoverContent side="top" align="start" className="w-fit max-w-xl p-0 z-101">
+							<Command>
+								<CommandList>
+									<CommandGroup>
+										<CommandItem
+											onSelect={() => {
+												const template = generateTemplateFromSchema(
+													selectedAgentData?.schema?.input?.json
+												);
+
+												onChange(template);
+												setPrefillOpen(false);
+											}}
+										>
+											<SquareCode className="size-4" />
+											<span>Template</span>
+											<span className="ml-auto text-xs text-muted-foreground">
+												Empty schema structure
+											</span>
+										</CommandItem>
+
+										{isAuthenticated ? (
+											<CommandItem
+												disabled={isGeneratingSample}
+												onSelect={() => {
+													handleGenerateSample();
+													setPrefillOpen(false);
+												}}
+											>
+												{isGeneratingSample ? (
+													<Loader2Icon className="size-4 animate-spin" />
+												) : (
+													<Sparkles className="size-4" />
+												)}
+												<span>Mock Input</span>
+												<span className="ml-auto text-xs text-muted-foreground">
+													AI-generated data
+												</span>
+											</CommandItem>
+										) : (
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<CommandItem disabled className="opacity-50">
+														<Sparkles className="size-4" />
+														<span>Mock Input</span>
+														<span className="ml-auto text-xs text-muted-foreground">
+															Login required
+														</span>
+													</CommandItem>
+												</TooltipTrigger>
+												<TooltipContent>
+													Login to generate a mock input using AI
+												</TooltipContent>
+											</Tooltip>
+										)}
+									</CommandGroup>
+								</CommandList>
+							</Command>
+						</PopoverContent>
+					</Popover>
+				)}
+
 				{clearAgentState && selectedAgent && (
 					<Button
 						aria-label="Clear conversation history"
 						size="sm"
 						variant="outline"
-						className="bg-none font-normal text-muted-foreground hover:text-destructive"
+						className="ml-auto font-normal bg-background dark:bg-background hover:bg-background dark:hover:bg-background dark:hover:border-border/50 text-foreground hover:text-destructive"
 						onClick={() => clearAgentState(selectedAgent)}
 					>
-						<Trash2 className="size-4" /> Clear
+						<Trash2 className="size-4" />
+						Clear Thread
 					</Button>
 				)}
 			</div>
 
-			<PromptInput onSubmit={onSubmit} className="px-3 pb-3">
+			<PromptInput onSubmit={onSubmit}>
 				<PromptInputBody>
 					{!selectedAgent ? (
-						<div className="flex flex-col items-center justify-center py-8 px-4 text-center">
-							<p className="text-sm text-muted-foreground">
+						<div className="flex flex-col items-center justify-center py-6 px-4 text-center">
+							<p className="text-sm text-muted-foreground/70">
 								Select an agent to get started.
 							</p>
 						</div>
@@ -349,22 +399,23 @@ export function InputSection({
 							switch (inputType) {
 								case 'object':
 									return (
-										<MonacoJsonEditor
-											value={value}
+										<JsonEditor
+											aria-invalid={!isValidInput}
 											onChange={onChange}
+											onSubmit={onSubmit}
+											onValidationChange={setMonacoHasErrors}
 											schema={selectedAgentData?.schema.input?.json}
 											schemaUri={`agentuity://schema/${selectedAgentData?.metadata.id}/input`}
-											aria-invalid={!isValidInput}
-											onValidationChange={setMonacoHasErrors}
+											value={value}
 										/>
 									);
 
 								case 'string':
 									return (
 										<PromptInputTextarea
+											onChange={(e) => onChange(e.target.value)}
 											placeholder="Enter a message to send..."
 											value={value}
-											onChange={(e) => onChange(e.target.value)}
 										/>
 									);
 								default:
@@ -372,9 +423,10 @@ export function InputSection({
 										<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.{' '}
+													This agent has no input schema.
 												</span>
 											</p>
+
 											<Button
 												aria-label="Run Agent"
 												size="sm"
@@ -396,7 +448,8 @@ export function InputSection({
 						})()
 					)}
 				</PromptInputBody>
-				<PromptInputFooter>
+
+				<PromptInputFooter className="pt-0">
 					{selectedAgent && inputType !== 'none' && (
 						<Button
 							aria-label="Submit"
@@ -410,19 +463,20 @@ export function InputSection({
 									'value:',
 									value
 								);
+
 								onSubmit();
 							}}
-							className="ml-auto"
+							className={cn('ml-auto', isSubmitDisabled && 'opacity-10!')}
 						>
 							{isLoading ? (
 								<Loader2Icon className="size-4 animate-spin" />
 							) : (
-								<SendIcon className="size-4" />
+								<ArrowUp className="size-4" />
 							)}
 						</Button>
 					)}
 				</PromptInputFooter>
 			</PromptInput>
-		</>
+		</div>
 	);
 }