@agentuity/workbench 0.0.64 → 0.0.65

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '../../lib/utils';
+
+function TooltipProvider({
+	delayDuration = 0,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+	return (
+		<TooltipPrimitive.Provider
+			data-slot="tooltip-provider"
+			delayDuration={delayDuration}
+			{...props}
+		/>
+	);
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return (
+		<TooltipProvider>
+			<TooltipPrimitive.Root data-slot="tooltip" {...props} />
+		</TooltipProvider>
+	);
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+	className,
+	sideOffset = 0,
+	children,
+	...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot="tooltip-content"
+				sideOffset={sideOffset}
+				className={cn(
+					'bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance',
+					className
+				)}
+				{...props}
+			>
+				{children}
+				<TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	);
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/components.tsx

@@ -1,74 +1,28 @@
-import React, { useState, useContext } from 'react';
-import { AgentuityContext } from '@agentuity/react';
-import type { WorkbenchInstance } from './types';
-import { Button } from './components/ui/button';
-import {
-	Card,
-	CardContent,
-	CardDescription,
-	CardFooter,
-	CardHeader,
-	CardTitle,
-} from './components/ui/card';
-import { cn } from './lib/utils';
-
-export interface WorkbenchProps {
-	workbench: WorkbenchInstance;
-	className?: string;
-}
-
-export function Workbench({ workbench, className }: WorkbenchProps) {
-	const { baseUrl } = useContext(AgentuityContext);
-	const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
-	const [response, setResponse] = useState<unknown>(null);
-
-	const handleApiCall = async () => {
-		setStatus('loading');
-		try {
-			const url = `${baseUrl}/api`;
-			const res = await fetch(url, {
-				method: 'GET',
-				headers: {
-					'Content-Type': 'application/json',
-					...workbench.config.headers,
-				},
-			});
-
-			if (!res.ok) {
-				throw new Error(`HTTP ${res.status}: ${res.statusText}`);
-			}
-
-			const data = await res.json();
-			setResponse(data);
-			setStatus('success');
-		} catch (error) {
-			console.error('API call failed:', error);
-			setResponse({ error: error instanceof Error ? error.message : 'Unknown error' });
-			setStatus('error');
-		}
-	};
-
-	return (
-		<div className={cn('p-8', className)}>
-			<Card>
-				<CardHeader>
-					<CardTitle>Workbench</CardTitle>
-					<CardDescription>Route: {workbench.config.route}</CardDescription>
-				</CardHeader>
-
-				<CardContent className="space-y-4">
-					<Button onClick={handleApiCall} disabled={status === 'loading'}>
-						{status === 'loading' ? 'Loading...' : 'Hit API'}
-					</Button>
-				</CardContent>
-
-				<CardFooter className="flex-col items-start space-y-2">
-					<h4 className="font-semibold">Response:</h4>
-					<pre className="bg-muted p-4 rounded-md overflow-auto w-full text-sm">
-						{response ? JSON.stringify(response, null, 2) : 'No response yet'}
-					</pre>
-				</CardFooter>
-			</Card>
-		</div>
-	);
-}
+// Export 4 main AI elements/components
+export { Chat } from './components/internal/Chat';
+export { Header } from './components/internal/Header';
+export { App } from './components/App';
+export { Inline } from './components/Inline';
+export { ConnectionStatus } from './components/ConnectionStatus';
+
+// Export provider
+export { WorkbenchProvider } from './components/internal/WorkbenchProvider';
+
+// Export hooks
+export { useAgentSchemas, useAgentSchema } from './hooks/useAgentSchemas';
+export {
+	useWorkbenchSchemas,
+	useWorkbenchAgentSchema,
+	useWorkbenchAllAgentSchemas,
+} from './hooks/useWorkbenchSchemas';
+
+export type {
+	AgentSchema,
+	AgentMetadata,
+	AgentSchemaData,
+	AgentSchemasResponse,
+	UseAgentSchemasOptions,
+	UseAgentSchemasResult,
+} from './hooks/useAgentSchemas';
+
+export type { ConnectionStatus as ConnectionStatusType } from './types/config';

package/src/hooks/index.ts

@@ -0,0 +1,19 @@
+export { useAgentSchemas, useAgentSchema } from './useAgentSchemas';
+export {
+	useWorkbenchSchemas,
+	useWorkbenchAgentSchema,
+	useWorkbenchAllAgentSchemas,
+} from './useWorkbenchSchemas';
+export { useWorkbenchWebsocket } from './useWorkbenchWebsocket';
+export type {
+	AgentSchema,
+	AgentMetadata,
+	AgentSchemaData,
+	AgentSchemasResponse,
+	UseAgentSchemasOptions,
+	UseAgentSchemasResult,
+} from './useAgentSchemas';
+export type {
+	UseWorkbenchWebsocketOptions,
+	UseWorkbenchWebsocketResult,
+} from './useWorkbenchWebsocket';

package/src/hooks/useAgentSchemas.ts

@@ -0,0 +1,144 @@
+import { JSONSchema7 } from 'ai';
+import { useState, useEffect, useCallback } from 'react';
+
+export interface AgentSchema {
+	input?: {
+		code?: string;
+		json?: JSONSchema7;
+	};
+	output?: {
+		code?: string;
+		json?: string;
+	};
+}
+
+export interface AgentMetadata {
+	id: string;
+	name: string;
+	description?: string;
+	version?: string;
+	filename?: string;
+	identifier?: string;
+}
+
+export interface AgentSchemaData {
+	schema: AgentSchema;
+	metadata: AgentMetadata;
+}
+
+export interface AgentSchemasResponse {
+	agents: Record<string, AgentSchemaData>;
+}
+
+export interface UseAgentSchemasOptions {
+	baseUrl?: string;
+	apiKey?: string;
+	enabled?: boolean;
+}
+
+export interface UseAgentSchemasResult {
+	data: AgentSchemasResponse | null;
+	isLoading: boolean;
+	error: Error | null;
+	refetch: () => void;
+}
+
+/**
+ * React hook for fetching agent schemas from the workbench metadata endpoint
+ *
+ * @example
+ * ```tsx
+ * const { data, isLoading, error, refetch } = useAgentSchemas({
+ *   baseUrl: 'http://localhost:3000',
+ *   apiKey: 'your-api-key', // optional
+ *   enabled: true
+ * });
+ *
+ * if (isLoading) return <div>Loading schemas...</div>;
+ * if (error) return <div>Error: {error.message}</div>;
+ * if (data) {
+ *   Object.entries(data.agents).forEach(([name, agentData]) => {
+ *     console.log(`Agent ${name}:`, agentData.schema);
+ *   });
+ * }
+ * ```
+ */
+export function useAgentSchemas(options: UseAgentSchemasOptions = {}): UseAgentSchemasResult {
+	const { baseUrl = '', apiKey, enabled = true } = options;
+
+	const [data, setData] = useState<AgentSchemasResponse | null>(null);
+	const [isLoading, setIsLoading] = useState(false);
+	const [error, setError] = useState<Error | null>(null);
+
+	const fetchSchemas = useCallback(async () => {
+		if (!enabled) return;
+
+		setIsLoading(true);
+		setError(null);
+
+		try {
+			const url = `${baseUrl}/_agentuity/workbench/metadata.json`;
+			const headers: HeadersInit = {
+				'Content-Type': 'application/json',
+			};
+
+			if (apiKey) {
+				headers['Authorization'] = `Bearer ${apiKey}`;
+			}
+
+			const response = await fetch(url, {
+				method: 'GET',
+				headers,
+			});
+
+			if (!response.ok) {
+				if (response.status === 401) {
+					throw new Error('Unauthorized: Invalid or missing API key');
+				}
+				throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+			}
+
+			const result = (await response.json()) as AgentSchemasResponse;
+			setData(result);
+		} catch (err) {
+			const error = err instanceof Error ? err : new Error('Unknown error occurred');
+			setError(error);
+			console.error('Failed to fetch agent schemas:', error);
+		} finally {
+			setIsLoading(false);
+		}
+	}, [baseUrl, apiKey, enabled]);
+
+	const refetch = useCallback(() => {
+		void fetchSchemas();
+	}, [fetchSchemas]);
+
+	useEffect(() => {
+		void fetchSchemas();
+	}, [fetchSchemas]);
+
+	return {
+		data,
+		isLoading,
+		error,
+		refetch,
+	};
+}
+
+/**
+ * Helper hook to get a specific agent's schema by name
+ */
+export function useAgentSchema(agentName: string, options: UseAgentSchemasOptions = {}) {
+	const { data, isLoading, error, refetch } = useAgentSchemas(options);
+
+	const agentData = data?.agents[agentName] || null;
+
+	return {
+		data: agentData,
+		isLoading,
+		error,
+		refetch,
+		schema: agentData?.schema || null,
+		metadata: agentData?.metadata || null,
+	};
+}

package/src/hooks/useWorkbenchSchemas.ts

@@ -0,0 +1,69 @@
+import { useWorkbench } from '../components/internal/WorkbenchProvider';
+/**
+ * Hook to access agent schemas from the WorkbenchProvider context
+ * This is preferred over using useAgentSchemas directly in components
+ * since the provider manages the schema data centrally
+ */
+export function useWorkbenchSchemas() {
+	const { schemas, schemasLoading, schemasError, refetchSchemas } = useWorkbench();
+
+	return {
+		/** Raw schema data from the API */
+		schemas,
+		/** Whether schemas are currently loading */
+		isLoading: schemasLoading,
+		/** Any error that occurred while fetching schemas */
+		error: schemasError,
+		/** Function to refetch schemas from the API */
+		refetch: refetchSchemas,
+		/** Array of agent names available in schemas */
+		agentNames: schemas ? Object.keys(schemas.agents) : [],
+		/** Number of agents available */
+		agentCount: schemas ? Object.keys(schemas.agents).length : 0,
+	};
+}
+
+/**
+ * Hook to get a specific agent's schema by name
+ */
+export function useWorkbenchAgentSchema(agentName: string) {
+	const { schemas } = useWorkbench();
+
+	const agentData = schemas?.agents[agentName] || null;
+
+	return {
+		/** Agent schema data if found */
+		data: agentData,
+		/** Input schema for the agent */
+		inputSchema: agentData?.schema.input || null,
+		/** Output schema for the agent */
+		outputSchema: agentData?.schema.output || null,
+		/** Agent metadata */
+		metadata: agentData?.metadata || null,
+		/** Whether the agent exists in the current schemas */
+		exists: !!agentData,
+	};
+}
+
+/**
+ * Hook to get all agent schemas as an array
+ */
+export function useWorkbenchAllAgentSchemas() {
+	const { schemas } = useWorkbench();
+
+	const allAgents = schemas
+		? Object.entries(schemas.agents).map(([name, agentData]) => ({
+				name,
+				...agentData,
+			}))
+		: [];
+
+	return {
+		/** Array of all agent schema data */
+		agents: allAgents,
+		/** Whether any schemas are available */
+		hasSchemas: allAgents.length > 0,
+		/** Count of available schemas */
+		count: allAgents.length,
+	};
+}

package/src/hooks/useWorkbenchWebsocket.ts

@@ -0,0 +1,220 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface ReconnectOptions {
+	onReconnect: () => void;
+	threshold?: number;
+	baseDelay?: number;
+	factor?: number;
+	maxDelay?: number;
+	jitter?: number;
+	enabled?: () => boolean;
+}
+
+interface ReconnectManager {
+	recordFailure: () => { scheduled: boolean; delay: number | null };
+	recordSuccess: () => void;
+	cancel: () => void;
+	reset: () => void;
+	dispose: () => void;
+	getAttempts: () => number;
+}
+
+function createReconnectManager(opts: ReconnectOptions): ReconnectManager {
+	let attempts = 0;
+	let timer: ReturnType<typeof setTimeout> | null = null;
+
+	const cancel = () => {
+		if (timer) {
+			clearTimeout(timer);
+			timer = null;
+		}
+	};
+
+	const reset = () => {
+		attempts = 0;
+		cancel();
+	};
+
+	const recordSuccess = () => reset();
+
+	const computeDelay = (attemptAfterThreshold: number) => {
+		const base = opts.baseDelay ?? 500;
+		const factor = opts.factor ?? 2;
+		const max = opts.maxDelay ?? 30000;
+		const jitterMax = opts.jitter ?? 250;
+		const backoff = Math.min(base * Math.pow(factor, attemptAfterThreshold), max);
+		const jitter = jitterMax > 0 ? Math.random() * jitterMax : 0;
+		return backoff + jitter;
+	};
+
+	const recordFailure = () => {
+		attempts += 1;
+		const threshold = opts.threshold ?? 0;
+		if (opts.enabled && !opts.enabled()) {
+			return { scheduled: false, delay: null };
+		}
+
+		if (attempts - threshold >= 0) {
+			const after = Math.max(0, attempts - threshold);
+			const delay = computeDelay(after);
+			cancel();
+			timer = setTimeout(() => {
+				if (opts.enabled && !opts.enabled()) return;
+				opts.onReconnect();
+			}, delay);
+			return { scheduled: true, delay };
+		}
+		return { scheduled: false, delay: null };
+	};
+
+	const dispose = () => cancel();
+
+	const getAttempts = () => attempts;
+
+	return { recordFailure, recordSuccess, cancel, reset, dispose, getAttempts };
+}
+
+export interface UseWorkbenchWebsocketOptions {
+	baseUrl?: string;
+	apiKey?: string;
+	onConnect?: () => void;
+	onReconnect?: () => void;
+	onAlive?: () => void;
+	onRestarting?: () => void;
+}
+
+export interface UseWorkbenchWebsocketResult {
+	connected: boolean;
+	error: Error | null;
+}
+
+export function useWorkbenchWebsocket(
+	options: UseWorkbenchWebsocketOptions = {}
+): UseWorkbenchWebsocketResult {
+	const { baseUrl, apiKey, onConnect, onReconnect, onAlive, onRestarting } = options;
+
+	const manualClose = useRef(false);
+	const wsRef = useRef<WebSocket | undefined>(undefined);
+	const reconnectManagerRef = useRef<ReturnType<typeof createReconnectManager> | undefined>(
+		undefined
+	);
+	const onConnectRef = useRef(onConnect);
+	const onReconnectRef = useRef(onReconnect);
+	const onAliveRef = useRef(onAlive);
+	const onRestartingRef = useRef(onRestarting);
+	const hasConnectedOnce = useRef(false);
+
+	const [connected, setConnected] = useState(false);
+	const [error, setError] = useState<Error | null>(null);
+
+	// Update refs when callbacks change
+	useEffect(() => {
+		onConnectRef.current = onConnect;
+		onReconnectRef.current = onReconnect;
+		onAliveRef.current = onAlive;
+		onRestartingRef.current = onRestarting;
+	}, [onConnect, onReconnect, onAlive, onRestarting]);
+
+	const wsUrl = useCallback(() => {
+		if (!baseUrl) return null;
+		const wsBase = baseUrl.replace(/^http(s?):/, 'ws$1:');
+		const url = new URL(`${wsBase}/_agentuity/workbench/ws`);
+		if (apiKey) {
+			url.searchParams.set('apiKey', apiKey);
+		}
+		return url.toString();
+	}, [baseUrl, apiKey]);
+
+	const connect = useCallback(() => {
+		if (manualClose.current) return;
+		const url = wsUrl();
+		if (!url) return;
+
+		wsRef.current = new WebSocket(url);
+
+		wsRef.current.onopen = () => {
+			reconnectManagerRef.current?.recordSuccess();
+			setConnected(true);
+			setError(null);
+
+			// Call onConnect or onReconnect based on whether this is the first connection
+			if (hasConnectedOnce.current) {
+				onReconnectRef.current?.();
+			} else {
+				hasConnectedOnce.current = true;
+				onConnectRef.current?.();
+			}
+		};
+
+		wsRef.current.onerror = () => {
+			setError(new Error('WebSocket error'));
+		};
+
+		wsRef.current.onclose = (evt) => {
+			wsRef.current = undefined;
+			setConnected(false);
+			if (manualClose.current) {
+				return;
+			}
+			if (evt.code !== 1000) {
+				setError(new Error(`WebSocket closed: ${evt.code} ${evt.reason || ''}`));
+			}
+			reconnectManagerRef.current?.recordFailure();
+		};
+
+		wsRef.current.onmessage = (event: { data: string }) => {
+			if (event.data === 'alive') {
+				// Server is alive - trigger onAlive callback to refetch schemas
+				onAliveRef.current?.();
+			} else if (event.data === 'restarting') {
+				// Server is about to restart - trigger onRestarting callback
+				onRestartingRef.current?.();
+			}
+		};
+	}, [wsUrl]);
+
+	useEffect(() => {
+		reconnectManagerRef.current = createReconnectManager({
+			onReconnect: connect,
+			threshold: 0,
+			baseDelay: 500,
+			factor: 2,
+			maxDelay: 30000,
+			jitter: 500,
+			enabled: () => !manualClose.current && !!baseUrl,
+		});
+		return () => reconnectManagerRef.current?.dispose();
+	}, [connect, baseUrl]);
+
+	const cleanup = useCallback(() => {
+		manualClose.current = true;
+		reconnectManagerRef.current?.dispose();
+		const ws = wsRef.current;
+		if (ws) {
+			ws.onopen = null;
+			ws.onerror = null;
+			ws.onclose = null;
+			ws.onmessage = null;
+			ws.close();
+		}
+		wsRef.current = undefined;
+		setConnected(false);
+		// Don't reset hasConnectedOnce here - we want to track if we've ever connected
+	}, []);
+
+	useEffect(() => {
+		if (!baseUrl) return;
+
+		manualClose.current = false;
+		connect();
+
+		return () => {
+			cleanup();
+		};
+	}, [connect, cleanup, baseUrl]);
+
+	return {
+		connected,
+		error,
+	};
+}

package/src/index.ts

@@ -1,4 +1,4 @@
-export { createWorkbench, Workbench } from './workbench';
+// Export types
 export type { WorkbenchInstance } from './types';
 
 // Export UI components
@@ -13,13 +13,7 @@ export {
 } from './components/ui/card';
 export { Input } from './components/ui/input';
 
-// Export utilities
-export { cn } from './lib/utils';
-
-// Re-export workbench config utilities from core
-export {
-	encodeWorkbenchConfig,
-	decodeWorkbenchConfig,
-	getWorkbenchConfig,
-	type WorkbenchConfig,
-} from '@agentuity/core';
+// Export components
+export { default as App } from './components/App';
+export { default as Inline } from './components/Inline';
+export { createWorkbench } from './workbench';

package/src/server.ts

@@ -0,0 +1,6 @@
+// Server-side workbench exports
+// This file exports only the server-side createWorkbench function
+// without pulling in browser-side React components
+
+export { createWorkbench } from './workbench';
+export type { WorkbenchInstance } from './types';