@agentuity/workbench 0.0.87 → 0.0.88

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@agentuity/workbench",
-	"version": "0.0.87",
+	"version": "0.0.88",
 	"license": "Apache-2.0",
 	"author": "Agentuity employees and contributors",
 	"type": "module",
@@ -9,13 +9,16 @@
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
-			"import": "./dist/index.js"
+			"import": "./dist/index.js",
+			"style": "./src/integration.css"
 		},
 		"./server": {
 			"types": "./dist/server.d.ts",
 			"import": "./dist/server.js"
 		},
-		"./styles": "./dist/styles.css"
+		"./styles": "./src/integration.css",
+		"./styles-standalone": "./dist/standalone.css",
+		"./base": "./src/base.css"
 	},
 	"files": [
 		"README.md",
@@ -26,38 +29,22 @@
 		"clean": "rm -rf dist",
 		"build": "bun run build:ts && bun run build:css",
 		"build:ts": "bunx tsc --build --force",
-		"build:css": "bun x tailwindcss -i ./src/styles.css -o ./dist/styles.css",
+		"build:css": "bun x tailwindcss -i ./src/standalone.css -o ./dist/standalone.css",
 		"dev": "bun run build && concurrently \"bun run dev:ts\" \"bun run dev:css\" --names \"ts,css\" --prefix-colors \"blue,yellow\"",
 		"dev:ts": "bunx tsc --watch",
-		"dev:css": "bun x tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch",
+		"dev:css": "bun x tailwindcss -i ./src/standalone.css -o ./dist/standalone.css --watch",
 		"typecheck": "bunx tsc --noEmit",
 		"prepublishOnly": "bun run clean && bun run build"
 	},
 	"dependencies": {
-		"@agentuity/core": "0.0.87",
-		"@agentuity/react": "0.0.87",
+		"@agentuity/core": "0.0.88",
+		"@agentuity/react": "0.0.88",
 		"@ai-sdk/react": "^2.0.82",
 		"@hookform/resolvers": "^5.2.2",
-		"@radix-ui/react-avatar": "^1.1.10",
-		"@radix-ui/react-checkbox": "^1.3.3",
-		"@radix-ui/react-collapsible": "^1.1.12",
-		"@radix-ui/react-dialog": "^1.1.15",
-		"@radix-ui/react-dropdown-menu": "^2.1.16",
-		"@radix-ui/react-hover-card": "^1.1.15",
-		"@radix-ui/react-label": "^2.1.7",
-		"@radix-ui/react-popover": "^1.1.15",
-		"@radix-ui/react-progress": "^1.1.7",
-		"@radix-ui/react-scroll-area": "^1.2.10",
-		"@radix-ui/react-select": "^2.2.6",
-		"@radix-ui/react-separator": "^1.1.7",
-		"@radix-ui/react-slot": "^1.2.3",
-		"@radix-ui/react-switch": "^1.2.6",
-		"@radix-ui/react-tabs": "^1.1.13",
-		"@radix-ui/react-toggle": "^1.1.10",
-		"@radix-ui/react-tooltip": "^1.2.8",
-		"@radix-ui/react-use-controllable-state": "^1.2.2",
-		"@xyflow/react": "^12.9.1",
 		"@monaco-editor/react": "^4.6.0",
+		"@shikijs/langs": "^3.19.0",
+		"@shikijs/themes": "^3.19.0",
+		"@xyflow/react": "^12.9.1",
 		"ai": "^5.0.82",
 		"bun-plugin-tailwind": "^0.0.14",
 		"class-variance-authority": "^0.7.1",
@@ -81,26 +68,39 @@
 		"zod-from-json-schema": "^0.5.2"
 	},
 	"devDependencies": {
-		"@tailwindcss/cli": "^4.1.17",
+		"@tailwindcss/cli": "^4.1.12",
 		"@types/bun": "latest",
 		"@types/hast": "^3.0.4",
 		"bun-types": "latest",
 		"concurrently": "^9.2.1",
-		"tailwindcss": "^4.1.11",
+		"tailwindcss": "^4.1.12",
 		"typescript": "^5.9.0"
 	},
 	"peerDependencies": {
+		"@radix-ui/react-avatar": "^1.1.8",
+		"@radix-ui/react-dialog": "^1.1.12",
+		"@radix-ui/react-dropdown-menu": "^2.1.13",
+		"@radix-ui/react-hover-card": "^1.1.12",
+		"@radix-ui/react-popover": "^1.1.12",
+		"@radix-ui/react-scroll-area": "^1.2.7",
+		"@radix-ui/react-select": "^2.2.3",
+		"@radix-ui/react-slot": "^1.1.2",
+		"@radix-ui/react-tooltip": "^1.2.5",
+		"@radix-ui/react-use-controllable-state": "^1.2.2",
 		"@types/react": "^19.0.0",
 		"@types/react-dom": "^19.0.0",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0"
 	},
+	"resolutions": {
+		"@radix-ui/react-dismissable-layer": "1.1.5",
+		"@radix-ui/react-focus-scope": "1.1.2"
+	},
 	"publishConfig": {
 		"access": "public"
 	},
 	"sideEffects": [
 		"**/*.css",
-		"src/components/ai-elements/canvas.tsx",
 		"src/components/internal/Chat.tsx"
 	]
 }

package/src/{styles.css → base.css}

@@ -1,8 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Geist:wght@100..900&display=block');
-@import 'tailwindcss';
-@plugin "tailwindcss-animate";
-@variant dark (&:is(.dark *));
-@import 'tailwindcss';
+/* Common base CSS - shared between standalone and integration versions */
+/* This file contains CSS variables, theme, and keyframes used by both versions */
 
 :root {
 	--background: hsl(0 0% 100%);
@@ -173,63 +170,50 @@
 	--animate-accordion-down: accordion-down 0.2s ease-out;
 	--animate-accordion-up: accordion-up 0.2s ease-out;
 	--animate-ellipsis: ellipsis 1.5s steps(4, end) infinite;
+}
 
-	@keyframes accordion-down {
-		from {
-			height: 0;
-		}
-		to {
-			height: var(--radix-accordion-content-height);
-		}
+@keyframes accordion-down {
+	from {
+		height: 0;
 	}
-
-	@keyframes accordion-up {
-		from {
-			height: var(--radix-accordion-content-height);
-		}
-		to {
-			height: 0;
-		}
+	to {
+		height: var(--radix-accordion-content-height);
 	}
+}
 
-	@keyframes ellipsis {
-		0% {
-			content: '.';
-		}
-		25% {
-			content: '..';
-		}
-		50% {
-			content: '...';
-		}
-		75% {
-			content: '';
-		}
+@keyframes accordion-up {
+	from {
+		height: var(--radix-accordion-content-height);
+	}
+	to {
+		height: 0;
 	}
 }
 
-@layer base {
-	:root {
-		@apply font-sans;
+@keyframes ellipsis {
+	0% {
+		content: '.';
 	}
-
-	* {
-		@apply border-border outline-ring/50;
+	25% {
+		content: '..';
 	}
-
-	#root {
-		@apply w-full h-screen relative flex flex-col m-0 bg-background text-foreground;
+	50% {
+		content: '...';
 	}
-
-	button:not([disabled]):not([aria-disabled='true']),
-	[role='button']:not([disabled]):not([aria-disabled='true']) {
-		@apply cursor-pointer;
+	75% {
+		content: '';
 	}
+}
 
-	[data-loading]::after {
-		content: '.';
-		display: inline-block;
-		width: 1em;
-		@apply animate-ellipsis;
-	}
+/* Shared base styles for buttons and loading indicators */
+button:not([disabled]):not([aria-disabled='true']),
+[role='button']:not([disabled]):not([aria-disabled='true']) {
+	cursor: pointer;
+}
+
+[data-loading]::after {
+	content: '.';
+	display: inline-block;
+	width: 1em;
+	animation: ellipsis 1.5s steps(4, end) infinite;
 }

package/src/components/App.tsx

@@ -1,25 +1,61 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { WorkbenchProvider } from './internal/WorkbenchProvider';
 import { Header } from './internal/Header';
 import { Chat } from './internal/Chat';
+import { Schema } from './internal/Schema';
 import { ThemeProvider } from './ui/theme-provider';
 import { ResizableProvider } from './ui/resizable-provider';
+import { ResizablePanelGroup, ResizablePanel, ResizableHandle } from './ui/resizable';
+import { useResizable } from './ui/resizable-provider';
 import { decodeWorkbenchConfig } from '@agentuity/core/workbench';
 
 export interface AppProps {
 	configBase64: string;
 }
 
+function AppContent() {
+	const [schemaOpen, setSchemaOpen] = useState(false);
+	const { getPanelSizes, setPanelSizes } = useResizable();
+
+	const defaultSizes = [55, 45];
+	const panelSizes = getPanelSizes('main-layout') || defaultSizes;
+
+	return (
+		<div className="flex flex-col h-full">
+			<Header />
+			<ResizablePanelGroup
+				direction="horizontal"
+				className="flex-1"
+				onLayout={(sizes) => {
+					// Only save sizes when schema panel is open
+					if (schemaOpen && sizes.length === 2) {
+						setPanelSizes('main-layout', sizes);
+					}
+				}}
+			>
+				<ResizablePanel defaultSize={panelSizes[0]} minSize={30} className="flex flex-col">
+					<Chat schemaOpen={schemaOpen} onSchemaToggle={() => setSchemaOpen(!schemaOpen)} />
+				</ResizablePanel>
+				{schemaOpen && (
+					<>
+						<ResizableHandle withHandle />
+						<ResizablePanel defaultSize={panelSizes[1]} minSize={20} maxSize={50}>
+							<Schema onOpenChange={setSchemaOpen} />
+						</ResizablePanel>
+					</>
+				)}
+			</ResizablePanelGroup>
+		</div>
+	);
+}
+
 export function App({ configBase64 }: AppProps) {
 	const decodedConfig = decodeWorkbenchConfig(configBase64);
 	return (
 		<WorkbenchProvider config={decodedConfig}>
 			<ThemeProvider>
 				<ResizableProvider>
-					<div className="flex flex-col h-screen">
-						<Header />
-						<Chat />
-					</div>
+					<AppContent />
 				</ResizableProvider>
 			</ThemeProvider>
 		</WorkbenchProvider>

package/src/components/ai-elements/code-block.tsx

@@ -13,11 +13,28 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { type BundledLanguage, codeToHtml, type ShikiTransformer } from 'shiki';
+import { createHighlighterCore } from 'shiki/core';
+import { createOnigurumaEngine } from 'shiki/engine/oniguruma';
+import type { ShikiTransformer, ThemeRegistration } from 'shiki';
+import oneLightModule from '@shikijs/themes/one-light';
+import oneDarkProModule from '@shikijs/themes/one-dark-pro';
+import jsonLang from '@shikijs/langs/json';
+import javascriptLang from '@shikijs/langs/javascript';
+import typescriptLang from '@shikijs/langs/typescript';
+
+// Extract theme objects from default exports
+const oneLight = (
+	'default' in oneLightModule ? oneLightModule.default : oneLightModule
+) as ThemeRegistration;
+const oneDarkPro = (
+	'default' in oneDarkProModule ? oneDarkProModule.default : oneDarkProModule
+) as ThemeRegistration;
+
+type SupportedLanguage = 'json' | 'javascript' | 'typescript';
 
 type CodeBlockProps = HTMLAttributes<HTMLDivElement> & {
 	code: string;
-	language: BundledLanguage;
+	language: SupportedLanguage;
 	showLineNumbers?: boolean;
 };
 
@@ -29,6 +46,20 @@ const CodeBlockContext = createContext<CodeBlockContextType>({
 	code: '',
 });
 
+// Initialize highlighter with only the languages and themes we need
+let highlighterPromise: ReturnType<typeof createHighlighterCore> | null = null;
+
+function getHighlighter() {
+	if (!highlighterPromise) {
+		highlighterPromise = createHighlighterCore({
+			themes: [oneLight, oneDarkPro],
+			langs: [jsonLang, javascriptLang, typescriptLang],
+			engine: createOnigurumaEngine(import('shiki/wasm')),
+		});
+	}
+	return highlighterPromise;
+}
+
 const lineNumberTransformer: ShikiTransformer = {
 	name: 'line-numbers',
 	line(node: Element, line: number) {
@@ -52,23 +83,24 @@ const lineNumberTransformer: ShikiTransformer = {
 
 export async function highlightCode(
 	code: string,
-	language: BundledLanguage,
+	language: SupportedLanguage,
 	showLineNumbers = false
-) {
+): Promise<readonly [string, string]> {
+	const highlighter = await getHighlighter();
 	const transformers: ShikiTransformer[] = showLineNumbers ? [lineNumberTransformer] : [];
 
-	return await Promise.all([
-		codeToHtml(code, {
+	return [
+		highlighter.codeToHtml(code, {
 			lang: language,
-			theme: 'one-light',
+			theme: oneLight.name ?? 'one-light',
 			transformers,
 		}),
-		codeToHtml(code, {
+		highlighter.codeToHtml(code, {
 			lang: language,
-			theme: 'one-dark-pro',
+			theme: oneDarkPro.name ?? 'one-dark-pro',
 			transformers,
 		}),
-	]);
+	] as const;
 }
 
 export const CodeBlock = ({

package/src/components/internal/Chat.tsx

@@ -1,4 +1,5 @@
-import '../../styles.css';
+/* Styles should be imported in app's CSS file (e.g., globals.css) */
+/* import '../../styles.css'; */
 import React, { useState } from 'react';
 import { ChevronRight, Copy, Loader, RefreshCcw } from 'lucide-react';
 import { Action, Actions } from '../ai-elements/actions';
@@ -13,17 +14,18 @@ import { Shimmer } from '../ai-elements/shimmer';
 import { cn } from '../../lib/utils';
 import { useWorkbench } from './WorkbenchProvider';
 import { useLogger } from '../../hooks/useLogger';
-import { Schema } from './Schema';
 
 export interface ChatProps {
 	className?: string;
+	schemaOpen: boolean;
+	onSchemaToggle: () => void;
 }
 
 /**
  * Chat component - conversation and input area (everything except header)
  * Must be used within WorkbenchProvider
  */
-export function Chat({ className: _className }: ChatProps) {
+export function Chat({ className: _className, schemaOpen, onSchemaToggle }: ChatProps) {
 	const logger = useLogger('Chat');
 	const {
 		agents,
@@ -36,7 +38,6 @@ export function Chat({ className: _className }: ChatProps) {
 	} = useWorkbench();
 
 	const [value, setValue] = useState('');
-	const [schemaOpen, setSchemaOpen] = useState(false);
 
 	const handleSubmit = async () => {
 		logger.debug('🎯 Chat handleSubmit - selectedAgent:', selectedAgent, 'value:', value);
@@ -60,140 +61,131 @@ export function Chat({ className: _className }: ChatProps) {
 	};
 
 	return (
-		<div className="relative flex flex-1 overflow-hidden">
-			<div
-				className={cn(
-					'flex flex-col flex-1 transition-all duration-300 ease-in-out min-w-0',
-					schemaOpen && 'mr-[600px]'
-				)}
-			>
-				<Conversation className="flex-1 overflow-y-auto">
-					<ConversationContent className="pb-0">
-						{messages.map((message) => {
-							const { role, parts, id } = message;
-							const isStreaming = parts.some(
-								(part) => part.type === 'text' && part.state === 'streaming'
-							);
-							const tokens =
-								'tokens' in message ? (message as { tokens?: string }).tokens : undefined;
-							const duration =
-								'duration' in message
-									? (message as { duration?: string }).duration
-									: undefined;
+		<div className="flex flex-col h-full overflow-hidden">
+			<Conversation className="flex-1 overflow-y-auto">
+				<ConversationContent className="pb-0">
+					{messages.map((message) => {
+						const { role, parts, id } = message;
+						const isStreaming = parts.some(
+							(part) => part.type === 'text' && part.state === 'streaming'
+						);
+						const tokens =
+							'tokens' in message ? (message as { tokens?: string }).tokens : undefined;
+						const duration =
+							'duration' in message
+								? (message as { duration?: string }).duration
+								: undefined;
 
-							return (
-								<div key={id} className="mb-2">
-									{role === 'assistant' && (
-										<div
+						return (
+							<div key={id} className="mb-2">
+								{role === 'assistant' && (
+									<div
+										className={cn(
+											'w-fit flex items-center mb-2 text-muted-foreground text-sm transition-colors',
+											!isStreaming && 'hover:text-foreground cursor-pointer'
+										)}
+									>
+										<Loader
 											className={cn(
-												'w-fit flex items-center mb-2 text-muted-foreground text-sm transition-colors',
-												!isStreaming && 'hover:text-foreground cursor-pointer'
+												'size-4 transition-all',
+												isStreaming || isLoading ? 'animate-spin mr-2' : 'w-0 mr-2.5'
 											)}
-										>
-											<Loader
-												className={cn(
-													'size-4 transition-all',
-													isStreaming || isLoading ? 'animate-spin mr-2' : 'w-0 mr-2.5'
-												)}
-											/>
-
-											{isStreaming || isLoading ? (
-												<Shimmer duration={1}>Running...</Shimmer>
-											) : (
-												<>
-													{duration && (
-														<>
-															Ran for
-															<span className="mx-1">{duration}</span>
-														</>
-													)}
-													{duration && tokens && ` and consumed  ${tokens} tokens`}
-													{(duration || tokens) && <ChevronRight className="size-4" />}
-												</>
-											)}
-										</div>
-									)}
+										/>
 
-									{(role === 'user' || !(isStreaming || isLoading)) && (
-										<>
-											<Message
-												key={id}
-												from={role as 'user' | 'system' | 'assistant'}
-												className="p-0"
-											>
-												<MessageContent>
-													{parts.map((part, index) => {
-														switch (part.type) {
-															case 'text':
-																return (
-																	<div key={`${id}-${part.text}-${index}`}>
-																		{part.text || ''}
-																	</div>
-																);
-														}
-													})}
-												</MessageContent>
-											</Message>
-
-											<Actions
-												className={cn('mt-1 gap-0', role === 'user' && 'justify-end')}
-											>
-												{role === 'user' && (
-													<Action
-														label="Retry"
-														className="size-8 hover:bg-transparent!"
-														onClick={() =>
-															setValue(
-																parts
-																	.filter((part) => part.type === 'text')
-																	.map((part) => part.text)
-																	.join('')
-															)
-														}
-													>
-														<RefreshCcw className="size-4" />
-													</Action>
+										{isStreaming || isLoading ? (
+											<Shimmer duration={1}>Running...</Shimmer>
+										) : (
+											<>
+												{duration && (
+													<>
+														Ran for
+														<span className="mx-1">{duration}</span>
+													</>
 												)}
+												{duration && tokens && ` and consumed  ${tokens} tokens`}
+												{(duration || tokens) && <ChevronRight className="size-4" />}
+											</>
+										)}
+									</div>
+								)}
 
+								{(role === 'user' || !(isStreaming || isLoading)) && (
+									<>
+										<Message
+											key={id}
+											from={role as 'user' | 'system' | 'assistant'}
+											className="p-0"
+										>
+											<MessageContent>
+												{parts.map((part, index) => {
+													switch (part.type) {
+														case 'text':
+															return (
+																<div key={`${id}-${part.text}-${index}`}>
+																	{part.text || ''}
+																</div>
+															);
+													}
+												})}
+											</MessageContent>
+										</Message>
+
+										<Actions
+											className={cn('mt-1 gap-0', role === 'user' && 'justify-end')}
+										>
+											{role === 'user' && (
 												<Action
+													label="Retry"
+													className="size-8 hover:bg-transparent!"
 													onClick={() =>
-														navigator.clipboard.writeText(
+														setValue(
 															parts
 																.filter((part) => part.type === 'text')
 																.map((part) => part.text)
 																.join('')
 														)
 													}
-													label="Copy"
-													className="size-8 hover:bg-transparent!"
 												>
-													<Copy className="size-4" />
+													<RefreshCcw className="size-4" />
 												</Action>
-											</Actions>
-										</>
-									)}
-								</div>
-							);
-						})}
-					</ConversationContent>
+											)}
 
-					<ConversationScrollButton />
-				</Conversation>
-				<InputSection
-					value={value}
-					onChange={setValue}
-					onSubmit={handleSubmit}
-					isLoading={isLoading}
-					agents={agents}
-					selectedAgent={selectedAgent}
-					setSelectedAgent={setSelectedAgent}
-					suggestions={suggestions}
-					isSchemaOpen={schemaOpen}
-					onSchemaToggle={() => setSchemaOpen(!schemaOpen)}
-				/>
-			</div>
+											<Action
+												onClick={() =>
+													navigator.clipboard.writeText(
+														parts
+															.filter((part) => part.type === 'text')
+															.map((part) => part.text)
+															.join('')
+													)
+												}
+												label="Copy"
+												className="size-8 hover:bg-transparent!"
+											>
+												<Copy className="size-4" />
+											</Action>
+										</Actions>
+									</>
+								)}
+							</div>
+						);
+					})}
+				</ConversationContent>
 
-			<Schema open={schemaOpen} onOpenChange={setSchemaOpen} />
+				<ConversationScrollButton />
+			</Conversation>
+			<InputSection
+				value={value}
+				onChange={setValue}
+				onSubmit={handleSubmit}
+				isLoading={isLoading}
+				agents={agents}
+				selectedAgent={selectedAgent}
+				setSelectedAgent={setSelectedAgent}
+				suggestions={suggestions}
+				isSchemaOpen={schemaOpen}
+				onSchemaToggle={onSchemaToggle}
+			/>
 		</div>
 	);
 }