@agentuity/cli 1.0.59 → 2.0.0-beta.1

package/src/cmd/build/vite/vite-asset-server-config.ts

@@ -1,20 +1,162 @@
 /**
- * Vite Asset Server Configuration
+ * Vite Dev Server Configuration
  *
- * Minimal Vite config for serving frontend assets with HMR only.
- * Does NOT handle API routes, workbench, or WebSocket - that's the Bun server's job.
+ * Vite is the primary dev server — serves frontend assets natively and proxies
+ * API/WebSocket requests to the Bun backend server.
  */
 
 import { join } from 'node:path';
-import { createRequire } from 'node:module';
-import type { InlineConfig } from 'vite';
+import { existsSync } from 'node:fs';
+import type { InlineConfig, Plugin } from 'vite';
 import type { Logger } from '../../../types';
 
 export interface GenerateAssetServerConfigOptions {
 	rootDir: string;
 	logger: Logger;
 	workbenchPath?: string;
-	port: number; // The port Vite will run on (for HMR client configuration)
+	port: number; // The port Vite will listen on (user-facing)
+	backendPort: number; // The port Bun backend is running on (internal)
+	/** User-defined route mount paths from createApp({ router }) (e.g., ['/api', '/v1']) */
+	routePaths?: string[];
+}
+
+/**
+ * Vite plugin that injects analytics scripts in dev mode.
+ *
+ * In production the beacon plugin handles this at build time. In dev mode
+ * the analytics config + session + beacon scripts are served by the Bun
+ * backend at /_agentuity/webanalytics/* routes, but we need to inject the
+ * `<script>` tags into the HTML so the browser loads them.
+ */
+function devAnalyticsPlugin(): Plugin {
+	return {
+		name: 'agentuity:dev-analytics',
+		transformIndexHtml: {
+			order: 'pre',
+			handler(html) {
+				// Default analytics config — matches resolveAnalyticsConfig(undefined) in runtime
+				const config = {
+					enabled: true,
+					trackClicks: true,
+					trackScroll: true,
+					trackOutboundLinks: true,
+					trackForms: false,
+					trackWebVitals: true,
+					trackErrors: true,
+					trackSPANavigation: true,
+					isDevmode: true,
+				};
+
+				const injection =
+					`<script>window.__AGENTUITY_ANALYTICS__=${JSON.stringify(config)};</script>` +
+					'<script src="/_agentuity/webanalytics/session.js" async></script>' +
+					'<script src="/_agentuity/webanalytics/analytics.js"></script>';
+
+				if (html.includes('</head>')) {
+					return html.replace('</head>', `${injection}</head>`);
+				}
+				return html;
+			},
+		},
+	};
+}
+
+/**
+ * Vite plugin that serves src/web/index.html as the SPA fallback.
+ *
+ * Vite's built-in SPA fallback only serves index.html from the project root.
+ * Since Agentuity apps keep their HTML entry at src/web/index.html, we need
+ * this plugin to rewrite the URL so Vite's built-in transform pipeline
+ * (including React Fast Refresh injection) processes it correctly.
+ */
+function spaFallbackPlugin(rootDir: string, routePaths: string[], workbenchPath?: string): Plugin {
+	const htmlPath = join(rootDir, 'src', 'web', 'index.html');
+	const hasHtml = existsSync(htmlPath);
+
+	return {
+		name: 'agentuity:spa-fallback',
+		configureServer(server) {
+			if (!hasHtml) return;
+
+			server.middlewares.use(async (req, res, next) => {
+				// Only handle GET/HEAD navigation requests
+				if (req.method !== 'GET' && req.method !== 'HEAD') return next();
+
+				const url = req.url || '/';
+				const pathname = url.split('?')[0] || '/';
+				const accept = req.headers.accept || '';
+				const secFetchDest = req.headers['sec-fetch-dest'] || '';
+
+				// For robustness, treat unknown GET/HEAD routes as potential SPA navigations.
+				// We still avoid intercepting assets/backend paths via the filters below.
+				// (This also makes non-browser readiness probes like fetch('/streams') work.)
+				const isDocumentRequest = secFetchDest === 'document' || accept.includes('text/html');
+
+				// Skip file requests (have an extension)
+				if (pathname !== '/' && /\.[a-zA-Z0-9]+$/.test(pathname)) return next();
+
+				// For non-document requests, only allow root path fallback.
+				// (e.g. don't turn module/script fetches into HTML accidentally)
+				if (!isDocumentRequest && pathname === '/') {
+					// allow root fallback for simple probes
+				}
+
+				// Skip Vite/module/internal asset paths
+				if (
+					pathname.startsWith('/@vite') ||
+					pathname.startsWith('/@react-refresh') ||
+					pathname.startsWith('/@id/') ||
+					pathname.startsWith('/@fs/') ||
+					pathname.startsWith('/node_modules/') ||
+					pathname.startsWith('/src/') ||
+					(pathname.startsWith('/@') && !pathname.startsWith('/_agentuity'))
+				) {
+					return next();
+				}
+
+				// Skip paths that are proxied to the Bun backend
+				if (
+					pathname.startsWith('/_agentuity') ||
+					pathname.startsWith('/_health') ||
+					pathname.startsWith('/_idle')
+				) {
+					return next();
+				}
+				// Skip workbench path (served by Bun)
+				if (
+					workbenchPath &&
+					(pathname === workbenchPath || pathname.startsWith(workbenchPath + '/'))
+				) {
+					return next();
+				}
+				for (const rp of routePaths) {
+					if (pathname === rp || pathname.startsWith(rp + '/')) return next();
+				}
+
+				// If this isn't clearly a document navigation, still allow SPA fallback
+				// for extensionless client-side routes like /streams, /rpc, /webrtc.
+				// We already excluded backend paths and asset/module paths above.
+
+				try {
+					let html = await Bun.file(htmlPath).text();
+					// Match old devHtmlHandler behavior from the generated Bun entry:
+					// rewrite relative paths so the app works from / and client-side routes.
+					html = html
+						.replace(/src="\.\//g, 'src="/src/web/')
+						.replace(/href="\.\//g, 'href="/src/web/');
+
+					// Let Vite inject HMR client, React refresh preamble, etc.
+					html = await server.transformIndexHtml(url, html, req.originalUrl);
+
+					res.statusCode = 200;
+					res.setHeader('Content-Type', 'text/html; charset=utf-8');
+					res.end(html);
+				} catch (error) {
+					next(error as Error);
+				}
+			});
+		},
+	};
 }
 
 /**
@@ -23,23 +165,7 @@ export interface GenerateAssetServerConfigOptions {
 export async function generateAssetServerConfig(
 	options: GenerateAssetServerConfigOptions
 ): Promise<InlineConfig> {
-	const { rootDir, logger, workbenchPath, port } = options;
-
-	// Load custom user config for define values and plugins
-	const { loadAgentuityConfig } = await import('./config-loader');
-	const userConfig = await loadAgentuityConfig(rootDir, logger);
-	const userDefine = userConfig?.define || {};
-	const userPlugins = userConfig?.plugins || [];
-
-	if (Object.keys(userDefine).length > 0) {
-		logger.debug(
-			'Loaded %d custom define(s) from agentuity.config.ts',
-			Object.keys(userDefine).length
-		);
-	}
-	if (userPlugins.length > 0) {
-		logger.debug('Loaded %d custom plugin(s) from agentuity.config.ts', userPlugins.length);
-	}
+	const { rootDir, logger, workbenchPath, port, backendPort, routePaths = ['/api'] } = options;
 
 	// Load path aliases from tsconfig.json if available
 	const tsconfigPath = join(rootDir, 'tsconfig.json');
@@ -74,51 +200,75 @@ export async function generateAssetServerConfig(
 
 		resolve: {
 			alias,
-			// Deduplicate React to prevent multiple instances
+			// Deduplicate React to prevent multiple instances (if used)
 			dedupe: ['react', 'react-dom', 'react/jsx-runtime', 'react/jsx-dev-runtime'],
 		},
 
-		// Pre-bundle dependencies to avoid React preamble issues with pre-built JSX
+		// Pre-bundle dependencies to avoid issues with pre-built packages
 		// Only include @agentuity/workbench if workbench is enabled
 		optimizeDeps: {
-			include: workbenchPath
-				? ['@agentuity/workbench', '@agentuity/core', '@agentuity/react']
-				: ['@agentuity/core', '@agentuity/react'],
+			include: workbenchPath ? ['@agentuity/workbench', '@agentuity/core'] : ['@agentuity/core'],
 		},
 
 		// Only allow frontend env vars (server uses process.env)
 		envPrefix: ['VITE_', 'AGENTUITY_PUBLIC_', 'PUBLIC_'],
 
 		server: {
-			// Use the port we selected
+			// Vite is the primary dev server — listens on the user-facing port
 			port,
 			strictPort: true, // Port is pre-verified as available by findAvailablePort()
 			host: '127.0.0.1',
 
-			// CORS headers to allow Bun server on port 3500 to proxy requests
-			cors: {
-				origin: 'http://127.0.0.1:3500',
-				credentials: true,
+			// Proxy backend routes to Bun server (HTTP only).
+			// WebSocket upgrades are handled by the front-door TCP proxy (ws-proxy.ts)
+			// which routes them directly to the Bun backend, bypassing Vite entirely.
+			// This avoids Bun's broken node:http upgrade socket implementation.
+			proxy: {
+				// User-defined route mounts (from createApp({ router }))
+				...Object.fromEntries(
+					routePaths.map((routePath) => [
+						routePath,
+						{
+							target: `http://127.0.0.1:${backendPort}`,
+							changeOrigin: true,
+						},
+					])
+				),
+				// Agentuity system routes (workbench API, health, analytics, etc.)
+				'/_agentuity': {
+					target: `http://127.0.0.1:${backendPort}`,
+					changeOrigin: true,
+				},
+				// Workbench UI route (served by Bun, references /@fs/* paths handled by Vite)
+				...(workbenchPath
+					? {
+							[workbenchPath]: {
+								target: `http://127.0.0.1:${backendPort}`,
+								changeOrigin: true,
+							},
+						}
+					: {}),
+				// Legacy health check routes
+				'/_health': {
+					target: `http://127.0.0.1:${backendPort}`,
+					changeOrigin: true,
+				},
+				'/_idle': {
+					target: `http://127.0.0.1:${backendPort}`,
+					changeOrigin: true,
+				},
 			},
 
-			// HMR configuration for development with tunnel support (*.agentuity.live)
-			// Do NOT set host/protocol - let Vite auto-detect from page origin
-			// This allows HMR to work both locally and through the Gravity tunnel
-			// The Bun server proxies /__vite_hmr WebSocket connections to Vite
-			hmr: {
-				// Use a dedicated path for HMR WebSocket to enable proxying
-				path: '/__vite_hmr',
-			},
+			// HMR works natively — Vite is the primary server, no proxy needed
+			// Auto-detect host/protocol from page origin for tunnel support
+			hmr: true,
 
-			// Don't open browser - Bun server will be the entry point
+			// Don't open browser automatically
 			open: false,
 		},
 
 		// Define environment variables for browser
 		define: {
-			// Merge user-defined constants first
-			...userDefine,
-			// Then add default defines (these will override any user-defined protected keys)
 			...(workbenchPath
 				? { 'import.meta.env.AGENTUITY_PUBLIC_WORKBENCH_PATH': JSON.stringify(workbenchPath) }
 				: {}),
@@ -128,40 +278,20 @@ export async function generateAssetServerConfig(
 			'process.env.NODE_ENV': JSON.stringify('development'),
 		},
 
-		// Plugins: User plugins first (includes framework plugin like React/Svelte/Vue), then browser env
-		// Try project's node_modules first, fall back to CLI's bundled version
+		// Agentuity-specific plugins (Vite loads user plugins from vite.config.ts automatically)
 		plugins: await (async () => {
 			const { browserEnvPlugin } = await import('./browser-env-plugin');
-			const { tailwindSourcePlugin } = await import('./tailwind-source-plugin');
 			const { publicAssetPathPlugin } = await import('./public-asset-path-plugin');
-			const { hasFrameworkPlugin } = await import('./config-loader');
-
-			// Auto-add React plugin if no framework plugin is present (backwards compatibility)
-			const resolvedUserPlugins = [...userPlugins];
-			if (resolvedUserPlugins.length === 0 || !hasFrameworkPlugin(resolvedUserPlugins)) {
-				logger.debug(
-					'No framework plugin found in agentuity.config.ts plugins, adding React automatically for dev server'
-				);
-				const projectRequire = createRequire(join(rootDir, 'package.json'));
-				let reactPluginPath = '@vitejs/plugin-react';
-				try {
-					reactPluginPath = projectRequire.resolve('@vitejs/plugin-react');
-				} catch {
-					// Project doesn't have @vitejs/plugin-react, use CLI's bundled version
-				}
-				const reactModule = await import(reactPluginPath);
-				resolvedUserPlugins.unshift(reactModule.default());
-			}
 
 			return [
-				// Fix Tailwind oxide scanner hang in containers
-				tailwindSourcePlugin(),
-				// User-defined plugins from agentuity.config.ts (framework plugin + extras)
-				...resolvedUserPlugins,
 				// Browser env plugin to map process.env to import.meta.env
 				browserEnvPlugin(),
 				// Warn about incorrect public asset paths in dev mode
 				publicAssetPathPlugin({ warnInDev: true }),
+				// Inject analytics scripts in dev HTML
+				devAnalyticsPlugin(),
+				// SPA fallback: serve src/web/index.html for navigation requests
+				spaFallbackPlugin(rootDir, routePaths, workbenchPath),
 			];
 		})(),
 

package/src/cmd/build/vite/vite-asset-server.ts

@@ -1,8 +1,9 @@
 /**
- * Vite Asset Server
+ * Vite Dev Server (Primary)
  *
- * Starts a minimal Vite dev server for frontend asset transformation and HMR only.
- * Does NOT handle API routes or WebSocket - the Bun server proxies to this.
+ * Starts Vite as the primary dev server on the user-facing port.
+ * Serves frontend assets natively and proxies API/WebSocket requests
+ * to the Bun backend server.
  */
 
 import { join } from 'node:path';
@@ -21,6 +22,10 @@ export interface StartViteAssetServerOptions {
 	rootDir: string;
 	logger: Logger;
 	workbenchPath?: string;
+	port?: number; // Preferred user-facing port (default: 3500)
+	backendPort: number; // Port of the Bun backend server
+	/** User-defined route mount paths from createApp({ router }) */
+	routePaths?: string[];
 }
 
 /**
@@ -68,27 +73,34 @@ async function findAvailablePort(
 export async function startViteAssetServer(
 	options: StartViteAssetServerOptions
 ): Promise<ViteAssetServerResult> {
-	const { rootDir, logger, workbenchPath } = options;
+	const {
+		rootDir,
+		logger,
+		workbenchPath,
+		port: preferredPort = 3500,
+		backendPort,
+		routePaths,
+	} = options;
 
-	logger.debug('Starting Vite asset server (HMR only)...');
+	logger.debug('Starting Vite dev server (primary, proxying backend on port %d)...', backendPort);
 
-	// Find an available port before starting Vite
-	// This avoids relying on Vite's strictPort:false fallback which can fail
-	const preferredPort = 5173;
+	// Find an available port for the user-facing Vite server
 	const availablePort = await findAvailablePort(preferredPort, '127.0.0.1');
 
 	if (availablePort !== preferredPort) {
 		logger.info(
-			`Port ${preferredPort} is in use, using port ${availablePort} for Vite asset server`
+			`Port ${preferredPort} is in use, using port ${availablePort} for Vite dev server`
 		);
 	}
 
-	// Generate minimal config with the available port
+	// Generate config with proxy to Bun backend
 	const config = await generateAssetServerConfig({
 		rootDir,
 		logger,
 		workbenchPath,
 		port: availablePort,
+		backendPort,
+		routePaths,
 	});
 
 	// Dynamically import vite from the project's node_modules
@@ -130,11 +142,9 @@ export async function startViteAssetServer(
 	// Port was pre-verified and strictPort:true ensures Vite uses exactly this port
 	const actualPort = availablePort;
 
-	logger.info(`Vite asset server running on port ${actualPort}`);
-	logger.debug(`Asset server will handle: HMR, React transformation, source maps`);
-	logger.debug(
-		`HMR WebSocket configured at /__vite_hmr (proxied through Bun server for tunnel support)`
-	);
+	logger.debug(`Vite dev server running on port ${actualPort} (primary)`);
+	logger.debug(`Frontend: HMR, React transformation, source maps (native)`);
+	logger.debug(`Backend: proxying to Bun on port ${backendPort}`);
 
 	return { server, port: actualPort };
 }