@agentuity/workbench 0.0.64 → 0.0.65

package/src/components/internal/WorkbenchProvider.tsx

@@ -0,0 +1,265 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import type { UIMessage } from 'ai';
+import type { WorkbenchConfig } from '@agentuity/core/workbench';
+import type { WorkbenchContextType, ConnectionStatus } from '../../types/config';
+import { useAgentSchemas } from '../../hooks/useAgentSchemas';
+import { useWorkbenchWebsocket } from '../../hooks/useWorkbenchWebsocket';
+
+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;
+}
+
+interface WorkbenchProviderProps {
+	config: WorkbenchConfig;
+	children: React.ReactNode;
+}
+
+export function WorkbenchProvider({ config, children }: WorkbenchProviderProps) {
+	const [messages, setMessages] = useState<UIMessage[]>([]);
+	const [selectedAgent, setSelectedAgent] = useState<string>('');
+	const [inputMode, setInputMode] = useState<'text' | 'form'>('text');
+	const [isLoading, setIsLoading] = useState(false);
+	const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>('disconnected');
+
+	// Config values
+	const baseUrl = config.port ? `http://localhost:${config.port}` : undefined;
+	const apiKey = config.apiKey;
+	const shouldUseSchemas = true;
+
+	// Debug logging
+	useEffect(() => {
+		if (process.env.NODE_ENV === 'development') {
+			console.log('WorkbenchProvider Debug:', {
+				baseUrl,
+				shouldUseSchemas,
+			});
+		}
+	}, [baseUrl, shouldUseSchemas]);
+
+	const {
+		data: schemaData,
+		isLoading: schemasLoading,
+		error: schemasError,
+		refetch: refetchSchemas,
+	} = useAgentSchemas({
+		baseUrl,
+		apiKey,
+		enabled: shouldUseSchemas,
+	});
+
+	// WebSocket connection for dev server restart detection
+	const { connected } = useWorkbenchWebsocket({
+		baseUrl,
+		apiKey,
+		onConnect: () => {
+			setConnectionStatus('connected');
+			refetchSchemas();
+		},
+		onReconnect: () => {
+			setConnectionStatus('connected');
+			refetchSchemas();
+		},
+		onAlive: () => {
+			setConnectionStatus('connected');
+			refetchSchemas();
+		},
+		onRestarting: () => {
+			setConnectionStatus('restarting');
+		},
+	});
+
+	// Update connection status based on WebSocket connection state
+	useEffect(() => {
+		if (!connected && connectionStatus !== 'restarting') {
+			setConnectionStatus('disconnected');
+		}
+	}, [connected, connectionStatus]);
+
+	// Convert schema data to Agent format, no fallback
+	const agents = schemaData?.agents;
+	// Log schema fetch errors for debugging
+	useEffect(() => {
+		if (schemasError) {
+			console.warn(
+				'Failed to fetch agent schemas from API, using static configuration:',
+				schemasError.message
+			);
+		}
+	}, [schemasError]);
+
+	const [suggestions, _setSuggestions] = useState<string[]>([]);
+
+	// Set initial agent selection
+	useEffect(() => {
+		if (agents && Object.keys(agents).length > 0 && !selectedAgent) {
+			setSelectedAgent(Object.keys(agents)[0]);
+		}
+	}, [agents, selectedAgent]);
+
+	// 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;
+
+		const selectedAgentData = agents?.[selectedAgent];
+		const hasInputSchema = selectedAgentData?.schema?.input?.json;
+
+		// Only require value for agents with input schemas
+		if (hasInputSchema && !value.trim()) return;
+
+		// Add user message
+		const displayText = hasInputSchema
+			? value
+			: `Running ${selectedAgentData?.metadata.name || 'agent'}...`;
+		const userMessage: UIMessage = {
+			id: Date.now().toString(),
+			role: 'user',
+			parts: [{ type: 'text', text: displayText }],
+		};
+
+		setMessages((prev) => [...prev, userMessage]);
+		setIsLoading(true);
+
+		if (!baseUrl) {
+			const errorMessage: UIMessage = {
+				id: (Date.now() + 1).toString(),
+				role: 'assistant',
+				parts: [
+					{
+						type: 'text',
+						text: 'Error: No base URL configured. Please configure a port in the workbench config.',
+					},
+				],
+			};
+			setMessages((prev) => [...prev, errorMessage]);
+			setIsLoading(false);
+			return;
+		}
+
+		try {
+			// 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 {
+				try {
+					parsedInput = JSON.parse(value);
+				} catch {
+					parsedInput = value;
+				}
+			}
+
+			// Call execution endpoint with timeout
+			const headers: Record<string, string> = {
+				'Content-Type': 'application/json',
+			};
+			if (apiKey) {
+				headers.Authorization = `Bearer ${apiKey}`;
+			}
+
+			const controller = new AbortController();
+			const timeoutId = setTimeout(() => controller.abort(), 30000); // 30s timeout
+
+			try {
+				const response = await fetch(`${baseUrl}/_agentuity/workbench/execute`, {
+					method: 'POST',
+					headers,
+					body: JSON.stringify({
+						agentId: selectedAgent,
+						input: parsedInput,
+					}),
+					signal: controller.signal,
+				});
+				clearTimeout(timeoutId);
+
+				if (!response.ok) {
+					const errorData = await response
+						.json()
+						.catch(() => ({ error: response.statusText }));
+					throw new Error(errorData.error || `Request failed with status ${response.status}`);
+				}
+
+				const result = await response.json();
+
+				// Format result as JSON string for display
+				const resultText =
+					typeof result === 'object' ? JSON.stringify(result, null, 2) : String(result);
+
+				const assistantMessage: UIMessage = {
+					id: (Date.now() + 1).toString(),
+					role: 'assistant',
+					parts: [{ type: 'text', text: resultText }],
+				};
+
+				setMessages((prev) => [...prev, assistantMessage]);
+			} catch (fetchError) {
+				clearTimeout(timeoutId);
+				throw fetchError;
+			}
+		} catch (error) {
+			console.error('Failed to submit message:', error);
+			const errorText =
+				error instanceof Error
+					? error.name === 'AbortError'
+						? 'Request timed out. Please try again.'
+						: error.message
+					: 'Sorry, I encountered an error processing your message.';
+
+			const errorMessage: UIMessage = {
+				id: (Date.now() + 1).toString(),
+				role: 'assistant',
+				parts: [
+					{
+						type: 'text',
+						text: errorText,
+					},
+				],
+			};
+			setMessages((prev) => [...prev, errorMessage]);
+		} finally {
+			setIsLoading(false);
+		}
+	};
+
+	const handleAgentSelect = async (agentId: string) => {
+		setSelectedAgent(agentId);
+		// No handlers configured for now
+	};
+
+	const contextValue: WorkbenchContextType = {
+		config,
+		agents: agents || {},
+		suggestions,
+		messages,
+		setMessages,
+		selectedAgent,
+		setSelectedAgent: handleAgentSelect,
+		inputMode,
+		setInputMode,
+		isLoading: isLoading || (shouldUseSchemas && !!schemasLoading),
+		submitMessage,
+		// Schema data from API
+		schemas: schemaData,
+		schemasLoading: !!schemasLoading,
+		schemasError,
+		refetchSchemas,
+		// Connection status
+		connectionStatus,
+	};
+
+	return <WorkbenchContext.Provider value={contextValue}>{children}</WorkbenchContext.Provider>;
+}

package/src/components/internal/logo.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+export default function Logo() {
+	return (
+		<div className="flex items-center space-x-2">
+			<div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-lg flex items-center justify-center">
+				<span className="text-white font-bold text-sm">A</span>
+			</div>
+			<span className="font-semibold text-lg">Agentuity</span>
+		</div>
+	);
+}

package/src/components/ui/alert.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const alertVariants = cva(
+	'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+	{
+		variants: {
+			variant: {
+				default: 'bg-card text-card-foreground',
+				destructive:
+					'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	}
+);
+
+function Alert({
+	className,
+	variant,
+	...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+	return (
+		<div
+			data-slot="alert"
+			role="alert"
+			className={cn(alertVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="alert-title"
+			className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			data-slot="alert-description"
+			className={cn(
+				'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/src/components/ui/avatar.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '../../lib/utils';
+
+function Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+	return (
+		<AvatarPrimitive.Root
+			data-slot="avatar"
+			className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}
+			{...props}
+		/>
+	);
+}
+
+function AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+	return (
+		<AvatarPrimitive.Image
+			data-slot="avatar-image"
+			className={cn('aspect-square size-full', className)}
+			{...props}
+		/>
+	);
+}
+
+function AvatarFallback({
+	className,
+	...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+	return (
+		<AvatarPrimitive.Fallback
+			data-slot="avatar-fallback"
+			className={cn(
+				'bg-muted flex size-full items-center justify-center rounded-full',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Avatar, AvatarImage, AvatarFallback };

package/src/components/ui/badge.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const badgeVariants = cva(
+	'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none 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 transition-[color,box-shadow] overflow-hidden',
+	{
+		variants: {
+			variant: {
+				default:
+					'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+				secondary:
+					'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+				destructive:
+					'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+				outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+		},
+	}
+);
+
+function Badge({
+	className,
+	variant,
+	asChild = false,
+	...props
+}: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+	const Comp = asChild ? Slot : 'span';
+
+	return (
+		<Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
+	);
+}
+
+export { Badge, badgeVariants };

package/src/components/ui/button.tsx

@@ -1,6 +1,7 @@
 import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
-import * as React from 'react';
+import type * as React from 'react';
+
 import { cn } from '../../lib/utils';
 
 const buttonVariants = cva(
@@ -33,12 +34,16 @@ const buttonVariants = cva(
 	}
 );
 
-export type ButtonProps = React.ComponentProps<'button'> &
+function Button({
+	className,
+	variant,
+	size,
+	asChild = false,
+	...props
+}: React.ComponentProps<'button'> &
 	VariantProps<typeof buttonVariants> & {
 		asChild?: boolean;
-	};
-
-function Button({ className, variant, size, asChild = false, ...props }: ButtonProps) {
+	}) {
 	const Comp = asChild ? Slot : 'button';
 
 	return (

package/src/components/ui/card.tsx

@@ -10,6 +10,9 @@ function Card({ className, ...props }: React.ComponentProps<'div'>) {
 	);
 }
 
+function CardAction({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />;
+}
 function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
 	return <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />;
 }
@@ -35,4 +38,4 @@ function CardFooter({ className, ...props }: React.ComponentProps<'div'>) {
 	return <div className={cn('flex items-center p-6 pt-0', className)} {...props} />;
 }
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };

package/src/components/ui/carousel.tsx

@@ -0,0 +1,234 @@
+'use client';
+
+import * as React from 'react';
+import useEmblaCarousel, { type UseEmblaCarouselType } from 'embla-carousel-react';
+import { ArrowLeft, ArrowRight } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+import { Button } from './button';
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+	opts?: CarouselOptions;
+	plugins?: CarouselPlugin;
+	orientation?: 'horizontal' | 'vertical';
+	setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+	carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+	api: ReturnType<typeof useEmblaCarousel>[1];
+	scrollPrev: () => void;
+	scrollNext: () => void;
+	canScrollPrev: boolean;
+	canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+	const context = React.useContext(CarouselContext);
+
+	if (!context) {
+		throw new Error('useCarousel must be used within a <Carousel />');
+	}
+
+	return context;
+}
+
+function Carousel({
+	orientation = 'horizontal',
+	opts,
+	setApi,
+	plugins,
+	className,
+	children,
+	...props
+}: React.ComponentProps<'div'> & CarouselProps) {
+	const [carouselRef, api] = useEmblaCarousel(
+		{
+			...opts,
+			axis: orientation === 'horizontal' ? 'x' : 'y',
+		},
+		plugins
+	);
+	const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+	const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+	const onSelect = React.useCallback((api: CarouselApi) => {
+		if (!api) return;
+		setCanScrollPrev(api.canScrollPrev());
+		setCanScrollNext(api.canScrollNext());
+	}, []);
+
+	const scrollPrev = React.useCallback(() => {
+		api?.scrollPrev();
+	}, [api]);
+
+	const scrollNext = React.useCallback(() => {
+		api?.scrollNext();
+	}, [api]);
+
+	const handleKeyDown = React.useCallback(
+		(event: React.KeyboardEvent<HTMLDivElement>) => {
+			if (event.key === 'ArrowLeft') {
+				event.preventDefault();
+				scrollPrev();
+			} else if (event.key === 'ArrowRight') {
+				event.preventDefault();
+				scrollNext();
+			}
+		},
+		[scrollPrev, scrollNext]
+	);
+
+	React.useEffect(() => {
+		if (!api || !setApi) return;
+		setApi(api);
+	}, [api, setApi]);
+
+	React.useEffect(() => {
+		if (!api) return;
+		onSelect(api);
+		api.on('reInit', onSelect);
+		api.on('select', onSelect);
+
+		return () => {
+			api?.off('select', onSelect);
+		};
+	}, [api, onSelect]);
+
+	return (
+		<CarouselContext.Provider
+			value={{
+				carouselRef,
+				api: api,
+				opts,
+				orientation: orientation || (opts?.axis === 'y' ? 'vertical' : 'horizontal'),
+				scrollPrev,
+				scrollNext,
+				canScrollPrev,
+				canScrollNext,
+			}}
+		>
+			<div
+				onKeyDownCapture={handleKeyDown}
+				className={cn('relative', className)}
+				role="region"
+				aria-roledescription="carousel"
+				data-slot="carousel"
+				{...props}
+			>
+				{children}
+			</div>
+		</CarouselContext.Provider>
+	);
+}
+
+function CarouselContent({ className, ...props }: React.ComponentProps<'div'>) {
+	const { carouselRef, orientation } = useCarousel();
+
+	return (
+		<div ref={carouselRef} className="overflow-hidden" data-slot="carousel-content">
+			<div
+				className={cn(
+					'flex',
+					orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+					className
+				)}
+				{...props}
+			/>
+		</div>
+	);
+}
+
+function CarouselItem({ className, ...props }: React.ComponentProps<'div'>) {
+	const { orientation } = useCarousel();
+
+	return (
+		<div
+			role="group"
+			aria-roledescription="slide"
+			data-slot="carousel-item"
+			className={cn(
+				'min-w-0 shrink-0 grow-0 basis-full',
+				orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+				className
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CarouselPrevious({
+	className,
+	variant = 'outline',
+	size = 'icon',
+	...props
+}: React.ComponentProps<typeof Button>) {
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+	return (
+		<Button
+			data-slot="carousel-previous"
+			variant={variant}
+			size={size}
+			className={cn(
+				'absolute size-8 rounded-full',
+				orientation === 'horizontal'
+					? 'top-1/2 -left-12 -translate-y-1/2'
+					: '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+				className
+			)}
+			disabled={!canScrollPrev}
+			onClick={scrollPrev}
+			{...props}
+		>
+			<ArrowLeft />
+			<span className="sr-only">Previous slide</span>
+		</Button>
+	);
+}
+
+function CarouselNext({
+	className,
+	variant = 'outline',
+	size = 'icon',
+	...props
+}: React.ComponentProps<typeof Button>) {
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+	return (
+		<Button
+			data-slot="carousel-next"
+			variant={variant}
+			size={size}
+			className={cn(
+				'absolute size-8 rounded-full',
+				orientation === 'horizontal'
+					? 'top-1/2 -right-12 -translate-y-1/2'
+					: '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+				className
+			)}
+			disabled={!canScrollNext}
+			onClick={scrollNext}
+			{...props}
+		>
+			<ArrowRight />
+			<span className="sr-only">Next slide</span>
+		</Button>
+	);
+}
+
+export {
+	type CarouselApi,
+	Carousel,
+	CarouselContent,
+	CarouselItem,
+	CarouselPrevious,
+	CarouselNext,
+};