feat: add support for dual frontend (JS and React) in the CCW application

- Updated CLI to include `--frontend` option for selecting frontend type (js, react, both).
- Modified serve command to start React frontend when specified.
- Implemented React frontend startup and shutdown logic.
- Enhanced server routing to handle requests for both JS and React frontends.
- Added workspace selector component with i18n support.
- Updated tests to reflect changes in header and A2UI components.
- Introduced new Radix UI components for improved UI consistency.
- Refactored A2UIButton and A2UIDateTimeInput components for better code clarity.
- Created migration plan for gradual transition from JS to React frontend.

ccw/src/commands/serve.ts

@@ -1,6 +1,7 @@
 import { startServer } from '../core/server.js';
 import { launchBrowser } from '../utils/browser-launcher.js';
 import { resolvePath, validatePath } from '../utils/path-resolver.js';
+import { startReactFrontend, stopReactFrontend } from '../utils/react-frontend.js';
 import chalk from 'chalk';
 import type { Server } from 'http';
 
@@ -9,6 +10,7 @@ interface ServeOptions {
   path?: string;
   host?: string;
   browser?: boolean;
+  frontend?: 'js' | 'react' | 'both';
 }
 
 /**
@@ -18,6 +20,7 @@ interface ServeOptions {
 export async function serveCommand(options: ServeOptions): Promise<void> {
   const port = options.port || 3456;
   const host = options.host || '127.0.0.1';
+  const frontend = options.frontend || 'js';
 
   // Validate project path
   let initialPath = process.cwd();
@@ -33,12 +36,31 @@ export async function serveCommand(options: ServeOptions): Promise<void> {
   console.log(chalk.blue.bold('\n  CCW Dashboard Server\n'));
   console.log(chalk.gray(`  Initial project: ${initialPath}`));
   console.log(chalk.gray(`  Host: ${host}`));
-  console.log(chalk.gray(`  Port: ${port}\n`));
+  console.log(chalk.gray(`  Port: ${port}`));
+  console.log(chalk.gray(`  Frontend: ${frontend}\n`));
+
+  // Start React frontend if needed
+  let reactPort: number | undefined;
+  if (frontend === 'react' || frontend === 'both') {
+    reactPort = port + 1;
+    try {
+      await startReactFrontend(reactPort);
+    } catch (error) {
+      console.error(chalk.red(`\n  Failed to start React frontend: ${error}\n`));
+      process.exit(1);
+    }
+  }
 
   try {
     // Start server
     console.log(chalk.cyan('  Starting server...'));
-    const server = await startServer({ port, host, initialPath });
+    const server = await startServer({ 
+      port, 
+      host, 
+      initialPath,
+      frontend,
+      reactPort
+    });
 
     const boundUrl = `http://${host}:${port}`;
     const browserUrl = host === '0.0.0.0' || host === '::' ? `http://localhost:${port}` : boundUrl;
@@ -50,11 +72,24 @@ export async function serveCommand(options: ServeOptions): Promise<void> {
 
     console.log(chalk.green(`  Server running at ${boundUrl}`));
 
+    // Display frontend URLs
+    if (frontend === 'both') {
+      console.log(chalk.gray(`  JS Frontend:    ${boundUrl}`));
+      console.log(chalk.gray(`  React Frontend: ${boundUrl}/react`));
+    } else if (frontend === 'react') {
+      console.log(chalk.gray(`  React Frontend: ${boundUrl}/react`));
+    }
+
     // Open browser
     if (options.browser !== false) {
       console.log(chalk.cyan('  Opening in browser...'));
       try {
-        await launchBrowser(browserUrl);
+        // Determine which URL to open based on frontend setting
+        let openUrl = browserUrl;
+        if (frontend === 'react') {
+          openUrl = `${browserUrl}/react`;
+        }
+        await launchBrowser(openUrl);
         console.log(chalk.green.bold('\n  Dashboard opened in browser!'));
       } catch (err) {
         const error = err as Error;
@@ -68,6 +103,7 @@ export async function serveCommand(options: ServeOptions): Promise<void> {
     // Handle graceful shutdown
     process.on('SIGINT', () => {
       console.log(chalk.yellow('\n  Shutting down server...'));
+      stopReactFrontend();
       server.close(() => {
         console.log(chalk.green('  Server stopped.\n'));
         process.exit(0);
@@ -81,6 +117,7 @@ export async function serveCommand(options: ServeOptions): Promise<void> {
       console.error(chalk.yellow(`  Port ${port} is already in use.`));
       console.error(chalk.gray(`  Try a different port: ccw serve --port ${port + 1}\n`));
     }
+    stopReactFrontend();
     process.exit(1);
   }
 }