@agentuity/workbench 0.0.86 → 0.0.88

package/src/components/internal/InputSection.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useMemo, useState, useCallback, useEffect } from 'react';
 import {
 	CheckIcon,
 	ChevronsUpDownIcon,
@@ -41,7 +41,8 @@ export interface InputSectionProps {
 	selectedAgent: string;
 	setSelectedAgent: (agentId: string) => void;
 	suggestions: string[];
-	onSchemaOpen: () => void;
+	isSchemaOpen: boolean;
+	onSchemaToggle: () => void;
 }
 
 function isSchemaRootObject(schemaJson?: JSONSchema7): boolean {
@@ -65,10 +66,13 @@ export function InputSection({
 	selectedAgent,
 	setSelectedAgent,
 	suggestions,
-	onSchemaOpen,
+	isSchemaOpen,
+	onSchemaToggle,
 }: InputSectionProps) {
 	const logger = useLogger('InputSection');
 	const [agentSelectOpen, setAgentSelectOpen] = useState(false);
+	const [isValidInput, setIsValidInput] = useState(true);
+	const [monacoHasErrors, setMonacoHasErrors] = useState<boolean | null>(null);
 
 	const selectedAgentData = Object.values(agents).find(
 		(agent) => agent.metadata.agentId === selectedAgent
@@ -95,10 +99,66 @@ export function InputSection({
 			return 'string'; // String schema
 		}
 		return 'none'; // Default to none for other types
-	}, [selectedAgentData?.schema.input?.json]);
+	}, [selectedAgentData?.schema.input?.json, logger]);
 
 	const isObjectSchema = inputType === 'object';
 
+	// Validate JSON input against schema using zod (fallback for non-Monaco cases)
+	const validateInput = useCallback(
+		(inputValue: string, schema?: JSONSchema7): boolean => {
+			if (!schema || !isObjectSchema || !inputValue.trim()) {
+				return true; // No validation needed or empty input
+			}
+
+			try {
+				// Parse JSON first
+				const parsedJson = JSON.parse(inputValue);
+
+				// Convert schema to zod and validate
+				const schemaObject = typeof schema === 'string' ? JSON.parse(schema) : schema;
+				const zodSchema = convertJsonSchemaToZod(schemaObject);
+
+				// Validate with zod
+				const result = zodSchema.safeParse(parsedJson);
+				return result.success;
+			} catch {
+				// JSON parse error or schema validation error
+				return false;
+			}
+		},
+		[isObjectSchema]
+	);
+
+	// Reset Monaco error state when schema changes
+	useEffect(() => {
+		if (isObjectSchema) {
+			setMonacoHasErrors(null);
+		}
+	}, [selectedAgentData?.schema?.input?.json, isObjectSchema]);
+
+	// Update validation state - use Monaco errors if available, otherwise fall back to zod validation
+	useEffect(() => {
+		if (isObjectSchema) {
+			if (monacoHasErrors !== null) {
+				// Monaco is handling validation, use its error state
+				setIsValidInput(!monacoHasErrors);
+			} else {
+				// Monaco hasn't reported yet, use zod validation as fallback
+				const isValid = validateInput(value, selectedAgentData?.schema?.input?.json);
+				setIsValidInput(isValid);
+			}
+		} else {
+			// No schema or not object schema
+			setIsValidInput(true);
+		}
+	}, [
+		value,
+		selectedAgentData?.schema?.input?.json,
+		validateInput,
+		isObjectSchema,
+		monacoHasErrors,
+	]);
+
 	const handleGenerateSample = () => {
 		if (!selectedAgentData?.schema.input?.json || !isObjectSchema) return;
 
@@ -115,6 +175,14 @@ export function InputSection({
 		}
 	};
 
+	// 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;
+		return false;
+	}, [isLoading, inputType, value, isValidInput]);
+
 	return (
 		<>
 			<div className="flex items-center gap-2 py-2 px-3">
@@ -213,11 +281,11 @@ export function InputSection({
 				)}
 
 				<Button
-					aria-label="View Schema"
+					aria-label={isSchemaOpen ? 'Hide Schema' : 'View Schema'}
 					size="sm"
-					variant="outline"
-					className="bg-none font-normal"
-					onClick={onSchemaOpen}
+					variant={isSchemaOpen ? 'default' : 'outline'}
+					className={cn('font-normal', isSchemaOpen ? 'bg-primary' : 'bg-none')}
+					onClick={onSchemaToggle}
 				>
 					<FileJson className="size-4" /> Schema
 				</Button>
@@ -234,6 +302,8 @@ export function InputSection({
 										onChange={onChange}
 										schema={selectedAgentData?.schema.input?.json}
 										schemaUri={`agentuity://schema/${selectedAgentData?.metadata.id}/input`}
+										aria-invalid={!isValidInput}
+										onValidationChange={setMonacoHasErrors}
 									/>
 								);
 
@@ -279,7 +349,7 @@ export function InputSection({
 							aria-label="Submit"
 							size="icon"
 							variant="default"
-							disabled={isLoading || (inputType === 'string' && !value.trim())}
+							disabled={isSubmitDisabled}
 							onClick={() => {
 								logger.debug(
 									'🔥 Submit button clicked! inputType:',

package/src/components/internal/MonacoJsonEditor.tsx

@@ -1,8 +1,11 @@
 import React, { useEffect, useState } from 'react';
 import Editor, { type Monaco, type OnMount } from '@monaco-editor/react';
 import { useTheme } from '../ui/theme-provider';
-import { bundledThemes } from 'shiki';
 import type { JSONSchema7 } from 'ai';
+import type * as monaco from 'monaco-editor';
+import type { ThemeRegistration } from 'shiki';
+import oneLightModule from '@shikijs/themes/one-light';
+import oneDarkProModule from '@shikijs/themes/one-dark-pro';
 
 interface MonacoJsonEditorProps {
 	value: string;
@@ -10,6 +13,8 @@ interface MonacoJsonEditorProps {
 	schema?: JSONSchema7;
 	schemaUri?: string;
 	className?: string;
+	'aria-invalid'?: boolean;
+	onValidationChange?: (hasErrors: boolean) => void;
 }
 
 // Convert color value to valid hex for Monaco
@@ -104,6 +109,8 @@ export function MonacoJsonEditor({
 	schema,
 	schemaUri = 'agentuity://schema/default',
 	className = '',
+	'aria-invalid': ariaInvalid,
+	onValidationChange,
 }: MonacoJsonEditorProps) {
 	const { theme } = useTheme();
 	const [editorInstance, setEditorInstance] = useState<Parameters<OnMount>[0] | null>(null);
@@ -120,13 +127,16 @@ export function MonacoJsonEditor({
 
 	// Configure JSON schema when schema or monacoInstance changes
 	useEffect(() => {
-		if (!monacoInstance || !schema) return;
+		if (!monacoInstance || !schema) {
+			return;
+		}
 
 		const schemaObject = typeof schema === 'string' ? JSON.parse(schema) : schema;
 
 		// Configure Monaco JSON language support for schema validation
 		monacoInstance.languages.json.jsonDefaults.setDiagnosticsOptions({
 			validate: true,
+			allowComments: false,
 			schemas: [
 				{
 					uri: schemaUri,
@@ -134,6 +144,9 @@ export function MonacoJsonEditor({
 					schema: schemaObject,
 				},
 			],
+			enableSchemaRequest: true,
+			schemaRequest: 'error',
+			schemaValidation: 'error',
 		});
 	}, [monacoInstance, schema, schemaUri]);
 
@@ -148,6 +161,8 @@ export function MonacoJsonEditor({
 
 	return (
 		<div
+			data-slot="input-group-control"
+			aria-invalid={ariaInvalid}
 			className={`w-full pl-3 pb-3 [&_.monaco-editor]:!bg-transparent [&_.monaco-editor-background]:!bg-transparent [&_.view-lines]:!bg-transparent [&_.monaco-editor]:!shadow-none [&_.monaco-scrollable-element]:!shadow-none [&_.overflow-guard]:!shadow-none [&_.monaco-scrollable-element>.shadow.top]:!hidden [&_.monaco-editor_.scroll-decoration]:!hidden [&_.shadow.top]:!hidden [&_.scroll-decoration]:!hidden ${className}`}
 			style={{ minHeight: '64px', maxHeight: '192px', height: `${editorHeight}px` }}
 		>
@@ -192,7 +207,7 @@ export function MonacoJsonEditor({
 					},
 					padding: { top: 12, bottom: 12 },
 					// Additional background transparency options
-					renderValidationDecorations: 'off',
+					renderValidationDecorations: 'on',
 					guides: {
 						indentation: false,
 						highlightActiveIndentation: false,
@@ -223,6 +238,35 @@ export function MonacoJsonEditor({
 					// Update height on content changes
 					editor.onDidChangeModelContent(updateHeight);
 
+					// Listen to validation markers to detect schema errors
+					if (onValidationChange) {
+						const checkValidationErrors = () => {
+							const model = editor.getModel();
+							if (model) {
+								const markers = monaco.editor.getModelMarkers({ resource: model.uri });
+								const hasErrors = markers.some(
+									(marker: monaco.editor.IMarker) =>
+										marker.severity === monaco.MarkerSeverity.Error
+								);
+								onValidationChange(hasErrors);
+							}
+						};
+
+						// Check on model changes
+						editor.onDidChangeModelContent(checkValidationErrors);
+
+						// Check when markers change
+						monaco.editor.onDidChangeMarkers((uris: monaco.Uri[]) => {
+							const model = editor.getModel();
+							if (model && uris.includes(model.uri)) {
+								checkValidationErrors();
+							}
+						});
+
+						// Initial check
+						setTimeout(checkValidationErrors, 100);
+					}
+
 					// Initial height update
 					setTimeout(updateHeight, 0);
 
@@ -286,72 +330,22 @@ export function MonacoJsonEditor({
 						}
 					}, 0);
 				}}
-				beforeMount={async (monaco) => {
+				beforeMount={(monaco) => {
 					setMonacoInstance(monaco);
 
-					try {
-						// Try to use actual Shiki themes
-						const oneLightThemeModule = await bundledThemes['one-light']();
-						const oneDarkProThemeModule = await bundledThemes['one-dark-pro']();
+					// Use the same direct theme imports as code-block
+					const oneLight = (
+						'default' in oneLightModule ? oneLightModule.default : oneLightModule
+					) as ThemeRegistration;
+					const oneDarkPro = (
+						'default' in oneDarkProModule ? oneDarkProModule.default : oneDarkProModule
+					) as ThemeRegistration;
 
-						if (oneLightThemeModule?.default) {
-							const lightMonacoTheme = convertShikiToMonaco(
-								oneLightThemeModule.default,
-								'one-light'
-							);
-							monaco.editor.defineTheme('custom-light', lightMonacoTheme);
-						}
+					const lightMonacoTheme = convertShikiToMonaco(oneLight, 'one-light');
+					monaco.editor.defineTheme('custom-light', lightMonacoTheme);
 
-						if (oneDarkProThemeModule?.default) {
-							const darkMonacoTheme = convertShikiToMonaco(
-								oneDarkProThemeModule.default,
-								'one-dark-pro'
-							);
-							monaco.editor.defineTheme('custom-dark', darkMonacoTheme);
-						}
-					} catch (error) {
-						console.warn(
-							'Failed to load Shiki themes, falling back to manual themes:',
-							error
-						);
-
-						// Fallback to manual theme definitions
-						monaco.editor.defineTheme('custom-light', {
-							base: 'vs',
-							inherit: true,
-							rules: [
-								{ token: 'string.key.json', foreground: 'e45649' },
-								{ token: 'string.value.json', foreground: '50a14f' },
-								{ token: 'number.json', foreground: '986801' },
-								{ token: 'keyword.json', foreground: '986801' },
-								{ token: 'string', foreground: '50a14f' },
-								{ token: 'number', foreground: '986801' },
-								{ token: 'keyword', foreground: '986801' },
-							],
-							colors: {
-								'editor.background': '#00000000',
-								'editor.foreground': '#383a42',
-							},
-						});
-
-						monaco.editor.defineTheme('custom-dark', {
-							base: 'vs-dark',
-							inherit: true,
-							rules: [
-								{ token: 'string.key.json', foreground: 'e06c75' },
-								{ token: 'string.value.json', foreground: '98c379' },
-								{ token: 'number.json', foreground: 'd19a66' },
-								{ token: 'keyword.json', foreground: 'c678dd' },
-								{ token: 'string', foreground: '98c379' },
-								{ token: 'number', foreground: 'd19a66' },
-								{ token: 'keyword', foreground: 'c678dd' },
-							],
-							colors: {
-								'editor.background': '#00000000',
-								'editor.foreground': '#abb2bf',
-							},
-						});
-					}
+					const darkMonacoTheme = convertShikiToMonaco(oneDarkPro, 'one-dark-pro');
+					monaco.editor.defineTheme('custom-dark', darkMonacoTheme);
 				}}
 			/>
 		</div>

package/src/components/internal/Schema.tsx

@@ -3,109 +3,97 @@ import { X, FileJson } from 'lucide-react';
 import { Button } from '../ui/button';
 import { CodeBlock, CodeBlockCopyButton } from '../ai-elements/code-block';
 import { ScrollArea } from '../ui/scroll-area';
-import { cn } from '../../lib/utils';
 import { useWorkbench } from './WorkbenchProvider';
 
 export interface SchemaProps {
-	open: boolean;
 	onOpenChange: (open: boolean) => void;
 }
 
-export function Schema({ open, onOpenChange }: SchemaProps) {
+export function Schema({ onOpenChange }: SchemaProps) {
 	const { agents, selectedAgent, schemasLoading, schemasError } = useWorkbench();
 
 	const selectedAgentData =
 		Object.values(agents).find((agent) => agent.metadata.agentId === selectedAgent) || null;
 
 	return (
-		<>
-			{/* Sidebar */}
-			<div
-				className={cn(
-					'absolute top-0 right-0 h-full w-[600px] max-w-[90vw] bg-background border-l border-border z-50 shadow-xl transition-transform duration-300 ease-in-out flex flex-col',
-					open ? 'translate-x-0' : 'translate-x-full'
-				)}
-			>
-				{/* Header */}
-				<div className="flex items-center justify-between p-4 border-b border-border">
-					<div className="flex items-center gap-2">
-						<FileJson className="size-5 text-muted-foreground" />
-						<div>
-							<h2 className="text-lg font-semibold">Schema</h2>
-							{selectedAgentData && (
-								<p className="text-sm text-muted-foreground">
-									{selectedAgentData.metadata.name}
-								</p>
-							)}
-						</div>
+		<div className="h-full bg-background border-l border-border flex flex-col">
+			{/* Header */}
+			<div className="flex items-center justify-between p-4 border-b border-border">
+				<div className="flex items-center gap-2">
+					<FileJson className="size-5 text-muted-foreground" />
+					<div>
+						<h2 className="text-lg font-semibold">Schema</h2>
+						{selectedAgentData && (
+							<p className="text-sm text-muted-foreground">
+								{selectedAgentData.metadata.name}
+							</p>
+						)}
 					</div>
-					<Button
-						variant="ghost"
-						size="icon"
-						onClick={() => onOpenChange(false)}
-						className="size-8"
-					>
-						<X className="size-4" />
-					</Button>
 				</div>
-				{/* Content */}
-				<ScrollArea className="flex-1">
-					<div className="p-6 space-y-6">
-						{schemasLoading && (
-							<div className="text-center text-muted-foreground py-8">
-								Loading schemas...
-							</div>
-						)}
+				<Button
+					variant="ghost"
+					size="icon"
+					onClick={() => onOpenChange(false)}
+					className="size-8"
+				>
+					<X className="size-4" />
+				</Button>
+			</div>
+			{/* Content */}
+			<ScrollArea className="flex-1">
+				<div className="p-6 space-y-6">
+					{schemasLoading && (
+						<div className="text-center text-muted-foreground py-8">Loading schemas...</div>
+					)}
 
-						{schemasError && (
-							<div className="rounded-md bg-destructive/10 text-destructive p-4">
-								<p className="font-medium">Error loading schemas</p>
-								<p className="text-sm mt-1">{schemasError.message}</p>
-							</div>
-						)}
+					{schemasError && (
+						<div className="rounded-md bg-destructive/10 text-destructive p-4">
+							<p className="font-medium">Error loading schemas</p>
+							<p className="text-sm mt-1">{schemasError.message}</p>
+						</div>
+					)}
 
-						{!schemasLoading && !schemasError && !selectedAgentData && (
-							<div className="text-center text-muted-foreground py-8">
-								<p>No schema available for selected agent</p>
-							</div>
-						)}
+					{!schemasLoading && !schemasError && !selectedAgentData && (
+						<div className="text-center text-muted-foreground py-8">
+							<p>No schema available for selected agent</p>
+						</div>
+					)}
 
-						{!schemasLoading && !schemasError && selectedAgentData && (
-							<>
-								{/* Input Schema */}
-								{selectedAgentData.schema.input?.code ? (
-									<div className="space-y-2">
-										<h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
-											Input Schema
-										</h3>
-										<CodeBlock
-											code={selectedAgentData.schema.input?.code}
-											language="typescript"
-										>
-											<CodeBlockCopyButton />
-										</CodeBlock>
-									</div>
-								) : null}
-								{/* Output Schema */}
-								{selectedAgentData.schema.output?.code ? (
-									<div className="space-y-2">
-										<h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
-											Output Schema
-										</h3>
-										<CodeBlock
-											code={selectedAgentData.schema.output?.code}
-											language="typescript"
-										>
-											<CodeBlockCopyButton />
-										</CodeBlock>
-									</div>
-								) : null}
-							</>
-						)}
-					</div>
-				</ScrollArea>
-			</div>
-		</>
+					{!schemasLoading && !schemasError && selectedAgentData && (
+						<>
+							{/* Input Schema */}
+							{selectedAgentData.schema.input?.code ? (
+								<div className="space-y-2">
+									<h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+										Input Schema
+									</h3>
+									<CodeBlock
+										code={selectedAgentData.schema.input?.code}
+										language="typescript"
+									>
+										<CodeBlockCopyButton />
+									</CodeBlock>
+								</div>
+							) : null}
+							{/* Output Schema */}
+							{selectedAgentData.schema.output?.code ? (
+								<div className="space-y-2">
+									<h3 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
+										Output Schema
+									</h3>
+									<CodeBlock
+										code={selectedAgentData.schema.output?.code}
+										language="typescript"
+									>
+										<CodeBlockCopyButton />
+									</CodeBlock>
+								</div>
+							) : null}
+						</>
+					)}
+				</div>
+			</ScrollArea>
+		</div>
 	);
 }
 

package/src/components/internal/WorkbenchProvider.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React, { createContext, useContext, useEffect, useState, useMemo, useCallback } from 'react';
 import type { UIMessage } from 'ai';
 import type { WorkbenchConfig } from '@agentuity/core/workbench';
 import type { WorkbenchContextType, ConnectionStatus } from '../../types/config';
@@ -25,6 +25,43 @@ interface WorkbenchProviderProps {
 export function WorkbenchProvider({ config, 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 saveSelectedAgent = useCallback(
+		(agentId: string) => {
+			try {
+				localStorage.setItem(getStorageKey('selected_agent'), agentId);
+			} catch (error) {
+				console.warn('Failed to save selected agent to localStorage:', error);
+			}
+		},
+		[getStorageKey]
+	);
+
+	const loadSelectedAgent = useCallback((): string | null => {
+		try {
+			return localStorage.getItem(getStorageKey('selected_agent'));
+		} catch (error) {
+			console.warn('Failed to load selected agent from localStorage:', error);
+			return null;
+		}
+	}, [getStorageKey]);
+
 	const [messages, setMessages] = useState<UIMessage[]>([]);
 	const [selectedAgent, setSelectedAgent] = useState<string>('');
 	const [inputMode, setInputMode] = useState<'text' | 'form'>('text');
@@ -103,15 +140,36 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 	useEffect(() => {
 		if (agents && Object.keys(agents).length > 0 && !selectedAgent) {
 			logger.debug('🔍 Available agents:', agents);
-			const sortedAgents = Object.values(agents).sort((a, b) =>
-				a.metadata.name.localeCompare(b.metadata.name)
-			);
-			const firstAgent = sortedAgents[0];
-			logger.debug('🎯 First agent (alphabetically):', firstAgent);
-			logger.debug('🆔 Setting selectedAgent to:', firstAgent.metadata.agentId);
-			setSelectedAgent(firstAgent.metadata.agentId);
+
+			// Try to load previously selected agent from localStorage
+			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;
+
+			if (savedAgent && savedAgentId) {
+				logger.debug('✅ Restoring saved agent:', savedAgent.metadata.name);
+				setSelectedAgent(savedAgentId);
+			} else {
+				// Fallback to first agent alphabetically
+				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
+				);
+				logger.debug('🆔 Setting selectedAgent to:', firstAgent.metadata.agentId);
+				setSelectedAgent(firstAgent.metadata.agentId);
+				// Save this selection for next time
+				saveSelectedAgent(firstAgent.metadata.agentId);
+			}
 		}
-	}, [agents, selectedAgent]);
+	}, [agents, selectedAgent, loadSelectedAgent, saveSelectedAgent, logger]);
 
 	// Fetch suggestions from API if endpoint is provided
 	useEffect(() => {
@@ -279,7 +337,8 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 	const handleAgentSelect = async (agentId: string) => {
 		logger.debug('🔄 handleAgentSelect called with:', agentId);
 		setSelectedAgent(agentId);
-		// No handlers configured for now
+		// Save selection to localStorage for persistence across sessions
+		saveSelectedAgent(agentId);
 	};
 
 	const contextValue: WorkbenchContextType = {

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

@@ -26,8 +26,8 @@ function InputGroup({ className, ...props }: React.ComponentProps<'div'>) {
 				// Focus state.
 				'has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]',
 
-				// Error state.
-				'has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40',
+				// Error state - use destructive theme color.
+				'has-[[data-slot][aria-invalid=true]]:border-destructive',
 
 				className
 			)}

package/src/components/ui/input.tsx

@@ -8,9 +8,8 @@ function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
 			type={type}
 			data-slot="input"
 			className={cn(
-				'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
-				'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
-				'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
+				'border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+				'aria-invalid:focus-visible:ring-0',
 				className
 			)}
 			{...props}