@agentuity/workbench 0.0.55 → 0.0.57

package/package.json

@@ -1,16 +1,17 @@
 {
 	"name": "@agentuity/workbench",
-	"version": "0.0.55",
+	"version": "0.0.57",
 	"license": "Apache-2.0",
 	"author": "Agentuity employees and contributors",
 	"type": "module",
-	"main": "./src/index.ts",
+	"main": "./dist/index.js",
 	"types": "./dist/index.d.ts",
 	"exports": {
 		".": {
-			"import": "./src/index.ts",
-			"types": "./dist/index.d.ts"
-		}
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js"
+		},
+		"./styles": "./dist/styles.css"
 	},
 	"files": [
 		"README.md",
@@ -19,17 +20,30 @@
 	],
 	"scripts": {
 		"clean": "rm -rf dist",
-		"build": "bunx tsc --build --force",
+		"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",
+		"dev": "bun run build && bun run dev:watch",
+		"dev:watch": "bunx tsc --watch",
 		"typecheck": "bunx tsc --noEmit",
 		"prepublishOnly": "bun run clean && bun run build"
 	},
 	"dependencies": {
-		"@agentuity/core": "0.0.55",
-		"@agentuity/react": "0.0.55"
+		"@agentuity/core": "0.0.57",
+		"@agentuity/react": "0.0.57",
+		"@radix-ui/react-label": "^2.1.7",
+		"@radix-ui/react-select": "^2.2.6",
+		"@radix-ui/react-slot": "^1.2.3",
+		"class-variance-authority": "^0.7.1",
+		"clsx": "^2.1.1",
+		"lucide-react": "^0.545.0",
+		"tailwind-merge": "^3.3.1"
 	},
 	"devDependencies": {
+		"@tailwindcss/cli": "^4.1.17",
 		"@types/bun": "latest",
 		"bun-types": "latest",
+		"tailwindcss": "^4.1.11",
 		"typescript": "^5.9.0"
 	},
 	"peerDependencies": {

package/src/components/ui/button.tsx

@@ -0,0 +1,53 @@
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+	"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-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",
+	{
+		variants: {
+			variant: {
+				default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+				destructive:
+					'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+				outline:
+					'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+				secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+				ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+				link: 'text-primary underline-offset-4 hover:underline',
+			},
+			size: {
+				default: 'h-9 px-4 py-2 has-[>svg]:px-3',
+				sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5',
+				lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+				icon: 'size-9',
+				'icon-sm': 'size-8',
+				'icon-lg': 'size-10',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	}
+);
+
+export type ButtonProps = React.ComponentProps<'button'> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	};
+
+function Button({ className, variant, size, asChild = false, ...props }: ButtonProps) {
+	const Comp = asChild ? Slot : 'button';
+
+	return (
+		<Comp
+			data-slot="button"
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...props}
+		/>
+	);
+}
+
+export { Button, buttonVariants };

package/src/components/ui/card.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+function Card({ className, ...props }: React.ComponentProps<'div'>) {
+	return (
+		<div
+			className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+			{...props}
+		/>
+	);
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />;
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<'h3'>) {
+	return (
+		<h3
+			className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
+			{...props}
+		/>
+	);
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<'p'>) {
+	return <p className={cn('text-sm text-muted-foreground', className)} {...props} />;
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<'div'>) {
+	return <div className={cn('p-6 pt-0', className)} {...props} />;
+}
+
+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 };

package/src/components/ui/input.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+export type InputProps = React.ComponentProps<'input'>;
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+	({ className, type, ...props }, ref) => {
+		return (
+			<input
+				type={type}
+				className={cn(
+					'flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+					className
+				)}
+				ref={ref}
+				{...props}
+			/>
+		);
+	}
+);
+Input.displayName = 'Input';
+
+export { Input };

package/src/components.tsx

@@ -1,6 +1,16 @@
 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;
@@ -39,31 +49,26 @@ export function Workbench({ workbench, className }: WorkbenchProps) {
 	};
 
 	return (
-		<div className={`workbench ${className || ''}`}>
-			<div className="workbench-header">
-				<h3>Workbench</h3>
-				<p>Route: {workbench.config.route}</p>
-			</div>
+		<div className={cn('p-8', className)}>
+			<Card>
+				<CardHeader>
+					<CardTitle>Workbench</CardTitle>
+					<CardDescription>Route: {workbench.config.route}</CardDescription>
+				</CardHeader>
 
-			<div className="workbench-controls">
-				<button onClick={handleApiCall} disabled={status === 'loading'}>
-					{status === 'loading' ? 'Loading...' : 'Hit API'}
-				</button>
-			</div>
+				<CardContent className="space-y-4">
+					<Button onClick={handleApiCall} disabled={status === 'loading'}>
+						{status === 'loading' ? 'Loading...' : 'Hit API'}
+					</Button>
+				</CardContent>
 
-			<div className="workbench-response">
-				<h4>Response:</h4>
-				<pre
-					style={{
-						background: '#f5f5f5',
-						padding: '10px',
-						borderRadius: '4px',
-						overflow: 'auto',
-					}}
-				>
-					{response ? JSON.stringify(response, null, 2) : 'No response yet'}
-				</pre>
-			</div>
+				<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>
 	);
 }

package/src/index.ts

@@ -1,5 +1,21 @@
 export { createWorkbench, Workbench } from './workbench';
 export type { WorkbenchInstance } from './types';
+
+// Export UI components
+export { Button } from './components/ui/button';
+export {
+	Card,
+	CardHeader,
+	CardTitle,
+	CardDescription,
+	CardContent,
+	CardFooter,
+} 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,

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

package/src/styles.css

@@ -0,0 +1,80 @@
+@import 'tailwindcss';
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-ring: var(--ring);
+	--color-input: var(--input);
+	--color-border: var(--border);
+	--color-destructive: var(--destructive);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-accent: var(--accent);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-muted: var(--muted);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-secondary: var(--secondary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-primary: var(--primary);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-popover: var(--popover);
+	--color-card-foreground: var(--card-foreground);
+	--color-card: var(--card);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}

package/dist/app/workbench.d.ts

@@ -1,8 +0,0 @@
-/**
- * This file is the entry point for the Workbench app, it sets up the root
- * element and renders the Workbench component to the DOM.
- *
- * It is included in `src/app/index.html`.
- */
-export {};
-//# sourceMappingURL=workbench.d.ts.map

package/dist/app/workbench.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"workbench.d.ts","sourceRoot":"","sources":["../../src/app/workbench.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG"}

package/dist/app/workbench.js

@@ -1,26 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * This file is the entry point for the Workbench app, it sets up the root
- * element and renders the Workbench component to the DOM.
- *
- * It is included in `src/app/index.html`.
- */
-import { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { AgentuityContext } from '@agentuity/react';
-import { Workbench } from '../components';
-import { getWorkbenchConfig } from '@agentuity/core';
-// Get workbench config from environment variable (set during build)
-const workbenchConfig = getWorkbenchConfig();
-const workbenchInstance = { config: workbenchConfig };
-// Use the port from config to set the base URL
-const baseUrl = `http://localhost:${workbenchConfig.port}`;
-const elem = document.getElementById('workbench-root');
-if (!elem) {
-    console.error('workbench-root element not found');
-    throw new Error('Failed to mount workbench: root element not found');
-}
-const app = (_jsx(StrictMode, { children: _jsxs(AgentuityContext.Provider, { value: { baseUrl }, children: [baseUrl, _jsx(Workbench, { workbench: workbenchInstance })] }) }));
-// Simple rendering without hot module reloading for compatibility
-createRoot(elem).render(app);
-//# sourceMappingURL=workbench.js.map

package/dist/app/workbench.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"workbench.js","sourceRoot":"","sources":["../../src/app/workbench.tsx"],"names":[],"mappings":";AAAA;;;;;GAKG;AAEH,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAErD,oEAAoE;AACpE,MAAM,eAAe,GAAG,kBAAkB,EAAE,CAAC;AAC7C,MAAM,iBAAiB,GAAG,EAAE,MAAM,EAAE,eAAe,EAAE,CAAC;AAEtD,+CAA+C;AAC/C,MAAM,OAAO,GAAG,oBAAoB,eAAe,CAAC,IAAI,EAAE,CAAC;AAE3D,MAAM,IAAI,GAAG,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;AACvD,IAAI,CAAC,IAAI,EAAE,CAAC;IACX,OAAO,CAAC,KAAK,CAAC,kCAAkC,CAAC,CAAC;IAClD,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;AACtE,CAAC;AACD,MAAM,GAAG,GAAG,CACX,KAAC,UAAU,cACV,MAAC,gBAAgB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,OAAO,EAAE,aAC3C,OAAO,EACR,KAAC,SAAS,IAAC,SAAS,EAAE,iBAAiB,GAAI,IAChB,GAChB,CACb,CAAC;AAEF,kEAAkE;AAClE,UAAU,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC"}

package/src/app/index.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Workbench</title>
-		<script type="module" src="./workbench.tsx" async></script>
-	</head>
-	<body>
-		<div id="workbench-root"></div>
-	</body>
-</html>

package/src/app/workbench.tsx

@@ -1,36 +0,0 @@
-/**
- * This file is the entry point for the Workbench app, it sets up the root
- * element and renders the Workbench component to the DOM.
- *
- * It is included in `src/app/index.html`.
- */
-
-import React, { StrictMode } from 'react';
-import { createRoot } from 'react-dom/client';
-import { AgentuityContext } from '@agentuity/react';
-import { Workbench } from '../components';
-import { getWorkbenchConfig } from '@agentuity/core';
-
-// Get workbench config from environment variable (set during build)
-const workbenchConfig = getWorkbenchConfig();
-const workbenchInstance = { config: workbenchConfig };
-
-// Use the port from config to set the base URL
-const baseUrl = `http://localhost:${workbenchConfig.port}`;
-
-const elem = document.getElementById('workbench-root');
-if (!elem) {
-	console.error('workbench-root element not found');
-	throw new Error('Failed to mount workbench: root element not found');
-}
-const app = (
-	<StrictMode>
-		<AgentuityContext.Provider value={{ baseUrl }}>
-			{baseUrl}
-			<Workbench workbench={workbenchInstance} />
-		</AgentuityContext.Provider>
-	</StrictMode>
-);
-
-// Simple rendering without hot module reloading for compatibility
-createRoot(elem).render(app);