@agentuity/workbench 0.0.79 → 0.0.84

package/src/components/internal/MonacoJsonEditor.tsx

@@ -0,0 +1,359 @@
+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';
+
+interface MonacoJsonEditorProps {
+	value: string;
+	onChange: (value: string) => void;
+	schema?: JSONSchema7;
+	schemaUri?: string;
+	className?: string;
+}
+
+// Convert color value to valid hex for Monaco
+function normalizeColorForMonaco(color: string | undefined, isDark: boolean): string {
+	if (!color) return isDark ? 'abb2bf' : '383a42'; // Default foreground colors
+
+	// Remove # prefix if present
+	let normalized = color.replace('#', '');
+
+	// Handle common color names that might appear in themes
+	const colorMap: Record<string, string> = {
+		white: isDark ? 'ffffff' : '383a42',
+		black: isDark ? '000000' : 'abb2bf',
+		red: 'e45649',
+		green: '50a14f',
+		blue: '4078f2',
+		yellow: '986801',
+		cyan: '0184bc',
+		magenta: 'a626a4',
+	};
+
+	if (colorMap[normalized.toLowerCase()]) {
+		normalized = colorMap[normalized.toLowerCase()];
+	}
+
+	// Validate it's a proper hex color (3 or 6 characters)
+	if (!/^[0-9a-fA-F]{3}$|^[0-9a-fA-F]{6}$/.test(normalized)) {
+		return isDark ? 'abb2bf' : '383a42'; // Fallback to default
+	}
+
+	return normalized;
+}
+
+// Convert Shiki theme to Monaco theme
+function convertShikiToMonaco(
+	shikiTheme: {
+		colors?: Record<string, string>;
+		tokenColors?: Array<{
+			scope?: string | string[];
+			settings?: { foreground?: string; fontStyle?: string };
+		}>;
+	},
+	themeName: string
+) {
+	const colors = shikiTheme.colors || {};
+	const tokenColors = shikiTheme.tokenColors || [];
+	const isDark = themeName.includes('dark');
+
+	// Convert token colors to Monaco rules
+	const rules: Array<{ token: string; foreground: string; fontStyle?: string }> = [];
+	tokenColors.forEach((tokenColor) => {
+		if (tokenColor.scope && tokenColor.settings?.foreground) {
+			const scopes = Array.isArray(tokenColor.scope) ? tokenColor.scope : [tokenColor.scope];
+			scopes.forEach((scope: string) => {
+				// Map common scopes to Monaco tokens
+				let token = scope;
+				if (scope.includes('string.quoted.double.json')) token = 'string.value.json';
+				if (scope.includes('support.type.property-name.json')) token = 'string.key.json';
+				if (scope.includes('constant.numeric.json')) token = 'number.json';
+				if (scope.includes('constant.language.json')) token = 'keyword.json';
+				if (scope.includes('punctuation.definition.string.json'))
+					token = 'delimiter.bracket.json';
+
+				const normalizedColor = normalizeColorForMonaco(
+					tokenColor.settings?.foreground,
+					isDark
+				);
+
+				rules.push({
+					token,
+					foreground: normalizedColor,
+					fontStyle: tokenColor.settings?.fontStyle || undefined,
+				});
+			});
+		}
+	});
+
+	return {
+		base: isDark ? 'vs-dark' : 'vs',
+		inherit: true,
+		rules,
+		colors: {
+			'editor.background': '#00000000', // Always transparent
+			'editor.foreground': normalizeColorForMonaco(colors['editor.foreground'], isDark),
+		},
+	};
+}
+
+export function MonacoJsonEditor({
+	value,
+	onChange,
+	schema,
+	schemaUri = 'agentuity://schema/default',
+	className = '',
+}: MonacoJsonEditorProps) {
+	const { theme } = useTheme();
+	const [editorInstance, setEditorInstance] = useState<Parameters<OnMount>[0] | null>(null);
+	const [monacoInstance, setMonacoInstance] = useState<Monaco | null>(null);
+	const [editorHeight, setEditorHeight] = useState(120);
+
+	// Get resolved theme (similar to useTheme's resolvedTheme from next-themes)
+	const resolvedTheme = React.useMemo(() => {
+		if (theme === 'system') {
+			return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+		}
+		return theme;
+	}, [theme]);
+
+	// Configure JSON schema when schema or monacoInstance changes
+	useEffect(() => {
+		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,
+			schemas: [
+				{
+					uri: schemaUri,
+					fileMatch: ['*'],
+					schema: schemaObject,
+				},
+			],
+		});
+	}, [monacoInstance, schema, schemaUri]);
+
+	// Handle theme changes for existing editor instance
+	useEffect(() => {
+		if (editorInstance && monacoInstance) {
+			editorInstance.updateOptions({
+				theme: resolvedTheme === 'light' ? 'custom-light' : 'custom-dark',
+			});
+		}
+	}, [resolvedTheme, editorInstance, monacoInstance]);
+
+	return (
+		<div
+			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` }}
+		>
+			<Editor
+				value={value || '{}'}
+				onChange={(newValue) => onChange(newValue || '')}
+				language="json"
+				theme={resolvedTheme === 'light' ? 'custom-light' : 'custom-dark'}
+				height="100%"
+				options={{
+					minimap: { enabled: false },
+					lineNumbers: 'off',
+					folding: false,
+					scrollBeyondLastLine: false,
+					wordWrap: 'on',
+					renderLineHighlight: 'none',
+					overviewRulerBorder: false,
+					overviewRulerLanes: 0,
+					hideCursorInOverviewRuler: true,
+					fixedOverflowWidgets: true,
+					roundedSelection: false,
+					occurrencesHighlight: 'off',
+					selectionHighlight: false,
+					renderWhitespace: 'none',
+					fontSize: 14,
+					fontWeight: '400',
+					formatOnPaste: true,
+					formatOnType: true,
+					autoIndent: 'full',
+					glyphMargin: false,
+					lineDecorationsWidth: 0,
+					lineNumbersMinChars: 0,
+					automaticLayout: true,
+					scrollbar: {
+						vertical: 'auto',
+						horizontal: 'auto',
+						verticalScrollbarSize: 10,
+						horizontalScrollbarSize: 10,
+						// Disable scroll shadows
+						verticalHasArrows: false,
+						horizontalHasArrows: false,
+					},
+					padding: { top: 12, bottom: 12 },
+					// Additional background transparency options
+					renderValidationDecorations: 'off',
+					guides: {
+						indentation: false,
+						highlightActiveIndentation: false,
+					},
+					// Disable sticky scroll feature
+					stickyScroll: { enabled: false },
+					// Disable scroll decorations/shadows
+					scrollBeyondLastColumn: 0,
+					renderLineHighlightOnlyWhenFocus: true,
+				}}
+				onMount={(editor, monaco) => {
+					setEditorInstance(editor);
+					setMonacoInstance(monaco);
+					editor.focus();
+
+					// Auto-resize based on content
+					const updateHeight = () => {
+						const contentHeight = editor.getContentHeight();
+						const maxHeight = 192; // max-h-48 = 12rem = 192px
+						const minHeight = 64; // min-h-16 = 4rem = 64px
+						const newHeight = Math.min(Math.max(contentHeight + 24, minHeight), maxHeight);
+						setEditorHeight(newHeight);
+
+						// Layout after height change
+						setTimeout(() => editor.layout(), 0);
+					};
+
+					// Update height on content changes
+					editor.onDidChangeModelContent(updateHeight);
+
+					// Initial height update
+					setTimeout(updateHeight, 0);
+
+					// Ensure background transparency and remove shadows
+					setTimeout(() => {
+						const editorElement = editor.getDomNode();
+						if (editorElement) {
+							// Set transparent backgrounds on all relevant elements
+							const elementsToMakeTransparent = [
+								'.monaco-editor',
+								'.monaco-editor .monaco-editor-background',
+								'.monaco-editor .view-lines',
+								'.monaco-editor .margin',
+								'.monaco-editor .monaco-scrollable-element',
+								'.monaco-editor .overflow-guard',
+								'.view-overlays',
+								'.decorationsOverviewRuler',
+							];
+
+							elementsToMakeTransparent.forEach((selector) => {
+								const element = editorElement.querySelector(selector);
+								if (element) {
+									(element as HTMLElement).style.backgroundColor = 'transparent';
+									(element as HTMLElement).style.boxShadow = 'none';
+								}
+							});
+
+							// Remove scroll shadows specifically - target the exact classes
+							const shadowTop = editorElement.querySelector(
+								'.monaco-scrollable-element > .shadow.top'
+							);
+							if (shadowTop) {
+								(shadowTop as HTMLElement).style.display = 'none';
+							}
+
+							const scrollDecorations = editorElement.querySelectorAll(
+								'.monaco-editor .scroll-decoration, .scroll-decoration'
+							);
+							scrollDecorations.forEach((decoration) => {
+								(decoration as HTMLElement).style.display = 'none';
+							});
+
+							const scrollableElement = editorElement.querySelector(
+								'.monaco-scrollable-element'
+							);
+							if (scrollableElement) {
+								(scrollableElement as HTMLElement).style.setProperty(
+									'--scroll-shadow',
+									'none'
+								);
+								(scrollableElement as HTMLElement).style.setProperty(
+									'box-shadow',
+									'none',
+									'important'
+								);
+							}
+
+							// Also set transparent and remove shadow on the editor element itself
+							(editorElement as HTMLElement).style.backgroundColor = 'transparent';
+							(editorElement as HTMLElement).style.boxShadow = 'none';
+						}
+					}, 0);
+				}}
+				beforeMount={async (monaco) => {
+					setMonacoInstance(monaco);
+
+					try {
+						// Try to use actual Shiki themes
+						const oneLightThemeModule = await bundledThemes['one-light']();
+						const oneDarkProThemeModule = await bundledThemes['one-dark-pro']();
+
+						if (oneLightThemeModule?.default) {
+							const lightMonacoTheme = convertShikiToMonaco(
+								oneLightThemeModule.default,
+								'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',
+							},
+						});
+					}
+				}}
+			/>
+		</div>
+	);
+}

package/src/components/internal/Schema.tsx

@@ -14,7 +14,8 @@ export interface SchemaProps {
 export function Schema({ open, onOpenChange }: SchemaProps) {
 	const { agents, selectedAgent, schemasLoading, schemasError } = useWorkbench();
 
-	const selectedAgentData = agents[selectedAgent] || null;
+	const selectedAgentData =
+		Object.values(agents).find((agent) => agent.metadata.agentId === selectedAgent) || null;
 
 	return (
 		<>

package/src/components/internal/WorkbenchProvider.tsx

@@ -4,7 +4,8 @@ import type { WorkbenchConfig } from '@agentuity/core/workbench';
 import type { WorkbenchContextType, ConnectionStatus } from '../../types/config';
 import { useAgentSchemas } from '../../hooks/useAgentSchemas';
 import { useWorkbenchWebsocket } from '../../hooks/useWorkbenchWebsocket';
-import { getTotalTokens, parseTokensHeader } from '../../lib/utils';
+import { useLogger } from '../../hooks/useLogger';
+import { getTotalTokens, parseTokensHeader, defaultBaseUrl } from '../../lib/utils';
 
 const WorkbenchContext = createContext<WorkbenchContextType | null>(null);
 
@@ -22,6 +23,8 @@ interface WorkbenchProviderProps {
 }
 
 export function WorkbenchProvider({ config, children }: WorkbenchProviderProps) {
+	const logger = useLogger('WorkbenchProvider');
+
 	const [messages, setMessages] = useState<UIMessage[]>([]);
 	const [selectedAgent, setSelectedAgent] = useState<string>('');
 	const [inputMode, setInputMode] = useState<'text' | 'form'>('text');
@@ -29,7 +32,7 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 	const [connectionStatus, setConnectionStatus] = useState<ConnectionStatus>('disconnected');
 
 	// Config values
-	const baseUrl = config.port ? `http://localhost:${config.port}` : undefined;
+	const baseUrl = defaultBaseUrl;
 	const apiKey = config.apiKey;
 	const shouldUseSchemas = true;
 
@@ -99,7 +102,14 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 	// Set initial agent selection
 	useEffect(() => {
 		if (agents && Object.keys(agents).length > 0 && !selectedAgent) {
-			setSelectedAgent(Object.keys(agents)[0]);
+			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);
 		}
 	}, [agents, selectedAgent]);
 
@@ -115,11 +125,21 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 	const submitMessage = async (value: string, _mode: 'text' | 'form' = 'text') => {
 		if (!selectedAgent) return;
 
-		const selectedAgentData = agents?.[selectedAgent];
+		logger.debug('🚀 Submitting message with selectedAgent:', selectedAgent);
+		const selectedAgentData = agents
+			? Object.values(agents).find((agent) => agent.metadata.agentId === selectedAgent)
+			: undefined;
+		logger.debug('📊 Found selectedAgentData:', selectedAgentData);
 		const hasInputSchema = selectedAgentData?.schema?.input?.json;
+		logger.debug('📝 hasInputSchema:', hasInputSchema, 'value:', value);
 
 		// Only require value for agents with input schemas
-		if (hasInputSchema && !value.trim()) return;
+		if (hasInputSchema && !value.trim()) {
+			logger.debug('❌ Returning early - hasInputSchema but no value');
+			return;
+		}
+
+		logger.debug('✅ Validation passed, continuing with message submission...');
 
 		// Add user message
 		const displayText = hasInputSchema
@@ -134,7 +154,9 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 		setMessages((prev) => [...prev, userMessage]);
 		setIsLoading(true);
 
+		logger.debug('🔗 baseUrl:', baseUrl);
 		if (!baseUrl) {
+			logger.debug('❌ No baseUrl configured!');
 			const errorMessage: UIMessage = {
 				id: (Date.now() + 1).toString(),
 				role: 'assistant',
@@ -164,6 +186,7 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 				}
 			}
 
+			logger.debug('🌐 About to make API call...');
 			// Call execution endpoint with timeout
 			const headers: Record<string, string> = {
 				'Content-Type': 'application/json',
@@ -178,13 +201,15 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 			const startTime = performance.now();
 
 			try {
+				const requestPayload = {
+					agentId: selectedAgent,
+					input: parsedInput,
+				};
+				logger.debug('📤 API Request payload:', requestPayload);
 				const response = await fetch(`${baseUrl}/_agentuity/workbench/execute`, {
 					method: 'POST',
 					headers,
-					body: JSON.stringify({
-						agentId: selectedAgent,
-						input: parsedInput,
-					}),
+					body: JSON.stringify(requestPayload),
 					signal: controller.signal,
 				});
 				clearTimeout(timeoutId);
@@ -252,6 +277,7 @@ export function WorkbenchProvider({ config, children }: WorkbenchProviderProps)
 	};
 
 	const handleAgentSelect = async (agentId: string) => {
+		logger.debug('🔄 handleAgentSelect called with:', agentId);
 		setSelectedAgent(agentId);
 		// No handlers configured for now
 	};

package/src/components.tsx

@@ -15,6 +15,7 @@ export {
 	useWorkbenchAgentSchema,
 	useWorkbenchAllAgentSchemas,
 } from './hooks/useWorkbenchSchemas';
+export { useLogger } from './hooks/useLogger';
 
 export type {
 	AgentSchema,

package/src/hooks/index.ts

@@ -5,6 +5,7 @@ export {
 	useWorkbenchAllAgentSchemas,
 } from './useWorkbenchSchemas';
 export { useWorkbenchWebsocket } from './useWorkbenchWebsocket';
+export { useLogger } from './useLogger';
 export type {
 	AgentSchema,
 	AgentMetadata,

package/src/hooks/useAgentSchemas.ts

@@ -19,6 +19,7 @@ export interface AgentMetadata {
 	version?: string;
 	filename?: string;
 	identifier?: string;
+	agentId: string;
 }
 
 export interface AgentSchemaData {

package/src/hooks/useLogger.ts

@@ -0,0 +1,57 @@
+import { useCallback } from 'react';
+
+type LogLevel = 'debug' | 'info' | 'warn' | 'error';
+
+interface Logger {
+	debug: (...args: unknown[]) => void;
+	info: (...args: unknown[]) => void;
+	warn: (...args: unknown[]) => void;
+	error: (...args: unknown[]) => void;
+}
+
+const getLogLevel = (): LogLevel | null => {
+	try {
+		const level = localStorage.getItem('AGENTUITY_LOG_LEVEL');
+		if (level && ['debug', 'info', 'warn', 'error'].includes(level)) {
+			return level as LogLevel;
+		}
+		return null;
+	} catch {
+		return null;
+	}
+};
+
+const shouldLog = (messageLevel: LogLevel): boolean => {
+	const currentLevel = getLogLevel();
+	if (!currentLevel) return false;
+
+	const levels: Record<LogLevel, number> = {
+		debug: 0,
+		info: 1,
+		warn: 2,
+		error: 3,
+	};
+
+	return levels[messageLevel] >= levels[currentLevel];
+};
+
+export function useLogger(component?: string): Logger {
+	const createLogFunction = useCallback(
+		(level: LogLevel) =>
+			(...args: unknown[]) => {
+				if (!shouldLog(level)) return;
+
+				const prefix = component ? `[${component}]` : '[Workbench]';
+				const consoleFn = console[level] || console.log;
+				consoleFn(prefix, ...args);
+			},
+		[component]
+	);
+
+	return {
+		debug: createLogFunction('debug'),
+		info: createLogFunction('info'),
+		warn: createLogFunction('warn'),
+		error: createLogFunction('error'),
+	};
+}

package/src/index.ts

@@ -16,4 +16,5 @@ export { Input } from './components/ui/input';
 // Export components
 export { default as App } from './components/App';
 export { default as Inline } from './components/Inline';
+export { MonacoJsonEditor } from './components/internal/MonacoJsonEditor';
 export { createWorkbench } from './workbench';

package/src/lib/utils.ts

@@ -38,3 +38,44 @@ export function parseTokensHeader(header: string): Record<string, number> {
 export function getTotalTokens(tokens: Record<string, number>): number {
 	return Object.keys(tokens).reduce((sum, key) => sum + tokens[key], 0);
 }
+
+export const getProcessEnv = (key: string): string | undefined => {
+	if (typeof process !== 'undefined' && process.env) {
+		return process.env[key];
+	}
+	if (typeof import.meta.env !== 'undefined') {
+		return import.meta.env[key];
+	}
+	return undefined;
+};
+
+export const buildUrl = (
+	base: string,
+	path: string,
+	subpath?: string,
+	query?: URLSearchParams
+): string => {
+	path = path.startsWith('/') ? path : `/${path}`;
+	let url = base.replace(/\/$/, '') + path;
+	if (subpath) {
+		subpath = subpath.startsWith('/') ? subpath : `/${subpath}`;
+		url += subpath;
+	}
+	if (query) {
+		url += `?${query.toString()}`;
+	}
+	return url;
+};
+
+const tryOrigin = () => {
+	if (typeof window !== 'undefined') {
+		return window.location.origin;
+	}
+};
+
+export const defaultBaseUrl: string =
+	getProcessEnv('NEXT_PUBLIC_AGENTUITY_URL') ||
+	getProcessEnv('VITE_AGENTUITY_URL') ||
+	getProcessEnv('AGENTUITY_URL') ||
+	tryOrigin() ||
+	'http://localhost:3500';