@friggframework/devtools 2.0.0-next.3 → 2.0.0-next.30

package/management-ui/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@friggframework/management-ui",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "dev:server": "concurrently \"npm run server\" \"npm run dev\"",
+    "build": "vite build",
+    "preview": "vite preview",
+    "server": "node server/server.js",
+    "server:old": "node server/index.js",
+    "server:dev": "nodemon server/server.js",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:watch": "vitest --watch",
+    "test:coverage": "vitest --coverage",
+    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "lint:fix": "eslint src --ext js,jsx --fix",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@aws-sdk/client-api-gateway": "^3.478.0",
+    "@aws-sdk/client-cloudwatch": "^3.478.0",
+    "@aws-sdk/client-lambda": "^3.478.0",
+    "@aws-sdk/client-sqs": "^3.478.0",
+    "@friggframework/ui": "^2.0.0-next.0",
+    "@friggframework/ui-react": "file:../../ui/react",
+    "@radix-ui/react-dropdown-menu": "^2.1.15",
+    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-slot": "^1.2.3",
+    "axios": "^1.6.7",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
+    "framer-motion": "^12.20.1",
+    "fs-extra": "^11.2.0",
+    "handlebars": "^4.7.8",
+    "lucide-react": "^0.473.0",
+    "node-cache": "^5.1.2",
+    "node-fetch": "^3.3.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.22.0",
+    "semver": "^7.5.4",
+    "socket.io": "^4.7.4",
+    "socket.io-client": "^4.7.4",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "concurrently": "^8.2.2",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-refresh": "^0.4.7",
+    "nodemon": "^3.0.3",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10",
+    "typescript": "^5.2.2",
+    "vite": "^5.3.4",
+    "vitest": "^1.6.0",
+    "@vitest/ui": "^1.6.0",
+    "@vitest/coverage-v8": "^1.6.0",
+    "@testing-library/react": "^14.3.1",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/user-event": "^14.5.2",
+    "jsdom": "^24.1.0",
+    "msw": "^2.3.1"
+  }
+}

package/management-ui/packages/devtools/frigg-cli/ui-command/index.js

@@ -0,0 +1,302 @@
+<<<<<<< HEAD
+<<<<<<< HEAD
+const open = require('open');
+const chalk = require('chalk');
+const path = require('path');
+const ProcessManager = require('../utils/process-manager');
+const {
+    getCurrentRepositoryInfo,
+    discoverFriggRepositories,
+    promptRepositorySelection,
+    formatRepositoryInfo
+} = require('../utils/repo-detection');
+
+async function uiCommand(options) {
+    const { port = 3001, open: shouldOpen = true, repo: specifiedRepo } = options;
+
+    let targetRepo = null;
+    let workingDirectory = process.cwd();
+
+    // If a specific repo path is provided, use it
+    if (specifiedRepo) {
+        const repoPath = path.resolve(specifiedRepo);
+        console.log(chalk.blue(`Using specified repository: ${repoPath}`));
+        workingDirectory = repoPath;
+        targetRepo = { path: repoPath, name: path.basename(repoPath) };
+    } else {
+        // Check if we're already in a Frigg repository
+        console.log(chalk.blue('Detecting Frigg repository...'));
+        const currentRepo = await getCurrentRepositoryInfo();
+
+        if (currentRepo) {
+            console.log(chalk.green(`✓ Found Frigg repository: ${formatRepositoryInfo(currentRepo)}`));
+            if (currentRepo.currentSubPath) {
+                console.log(chalk.gray(`  Currently in subdirectory: ${currentRepo.currentSubPath}`));
+            }
+            targetRepo = currentRepo;
+            workingDirectory = currentRepo.path;
+        } else {
+            // Discover Frigg repositories
+            console.log(chalk.yellow('Current directory is not a Frigg repository.'));
+            console.log(chalk.blue('Searching for Frigg repositories...'));
+
+            const discoveredRepos = await discoverFriggRepositories();
+            targetRepo = await promptRepositorySelection(discoveredRepos);
+
+            if (!targetRepo) {
+                console.log(chalk.red('No Frigg repository selected. Exiting.'));
+                process.exit(1);
+            }
+
+            workingDirectory = targetRepo.path;
+        }
+    }
+
+    console.log(chalk.blue('🚀 Starting Frigg Management UI...'));
+
+    const processManager = new ProcessManager();
+
+    try {
+        const managementUiPath = path.join(__dirname, '../../management-ui');
+
+        // Check if we're in development mode (no dist folder)
+        const distPath = path.join(managementUiPath, 'dist');
+        const fs = require('fs');
+        const isDevelopment = !fs.existsSync(distPath);
+
+        if (isDevelopment) {
+            const env = {
+                ...process.env,
+                VITE_API_URL: `http://localhost:${port}`,
+                PORT: port,
+                PROJECT_ROOT: workingDirectory,
+                REPOSITORY_INFO: JSON.stringify(targetRepo)
+            };
+
+            // Start backend server
+            processManager.spawnProcess(
+                'backend',
+                'npm',
+                ['run', 'server'],
+                { cwd: managementUiPath, env }
+            );
+
+            // Start frontend dev server
+            processManager.spawnProcess(
+                'frontend',
+                'npm',
+                ['run', 'dev'],
+                { cwd: managementUiPath, env }
+            );
+
+            // Wait for servers to start
+            await new Promise(resolve => setTimeout(resolve, 2000));
+
+            // Display clean status
+            processManager.printStatus(
+                'http://localhost:5173',
+                `http://localhost:${port}`,
+                targetRepo.name
+            );
+
+            // Open browser if requested
+            if (shouldOpen) {
+                setTimeout(() => {
+                    open('http://localhost:5173');
+                }, 1000);
+            }
+
+        } else {
+            // Production mode - just start the backend server
+            const { FriggManagementServer } = await import('../../management-ui/server/index.js');
+
+            const server = new FriggManagementServer({
+                port,
+                projectRoot: workingDirectory,
+                repositoryInfo: targetRepo
+            });
+            await server.start();
+
+            processManager.printStatus(
+                `http://localhost:${port}`,
+                `http://localhost:${port}/api`,
+                targetRepo.name
+            );
+
+            if (shouldOpen) {
+                setTimeout(() => {
+                    open(`http://localhost:${port}`);
+                }, 1000);
+            }
+        }
+
+        // Keep the process running
+        process.stdin.resume();
+
+    } catch (error) {
+        console.error(chalk.red('Failed to start Management UI:'), error.message);
+        if (error.code === 'EADDRINUSE') {
+            console.log(chalk.yellow(`Port ${port} is already in use. Try using a different port with --port <number>`));
+        }
+=======
+const { FriggManagementServer } = require('../../management-ui/server');
+=======
+>>>>>>> f153939e (refactor: clean up CLI help display and remove unused dependencies)
+const open = require('open');
+const chalk = require('chalk');
+const path = require('path');
+const ProcessManager = require('../utils/process-manager');
+const { 
+    getCurrentRepositoryInfo, 
+    discoverFriggRepositories, 
+    promptRepositorySelection,
+    formatRepositoryInfo 
+} = require('../utils/repo-detection');
+
+async function uiCommand(options) {
+    const { port = 3001, open: shouldOpen = true, repo: specifiedRepo, dev = false } = options;
+    
+    let targetRepo = null;
+    let workingDirectory = process.cwd();
+
+    // If a specific repo path is provided, use it
+    if (specifiedRepo) {
+        const repoPath = path.resolve(specifiedRepo);
+        console.log(chalk.blue(`Using specified repository: ${repoPath}`));
+        workingDirectory = repoPath;
+        targetRepo = { path: repoPath, name: path.basename(repoPath) };
+    } else {
+        // Check if we're already in a Frigg repository
+        console.log(chalk.blue('Detecting Frigg repository...'));
+        const currentRepo = await getCurrentRepositoryInfo();
+        
+        if (currentRepo) {
+            console.log(chalk.green(`✓ Found Frigg repository: ${formatRepositoryInfo(currentRepo)}`));
+            if (currentRepo.currentSubPath) {
+                console.log(chalk.gray(`  Currently in subdirectory: ${currentRepo.currentSubPath}`));
+            }
+            targetRepo = currentRepo;
+            workingDirectory = currentRepo.path;
+        } else {
+            // Discover Frigg repositories
+            console.log(chalk.yellow('Current directory is not a Frigg repository.'));
+            console.log(chalk.blue('Searching for Frigg repositories...'));
+            
+            const discoveredRepos = await discoverFriggRepositories();
+            
+            if (discoveredRepos.length === 0) {
+                console.log(chalk.red('No Frigg repositories found. Please create one first.'));
+                process.exit(1);
+            }
+            
+            // For UI command, we'll let the UI handle repository selection
+            // Set a placeholder and pass the discovered repos via environment
+            targetRepo = { 
+                name: 'Multiple Repositories Available', 
+                path: process.cwd(),
+                isMultiRepo: true,
+                availableRepos: discoveredRepos
+            };
+            workingDirectory = process.cwd();
+            
+            console.log(chalk.blue(`Found ${discoveredRepos.length} Frigg repositories. You'll be able to select one in the UI.`));
+        }
+    }
+
+    console.log(chalk.blue('🚀 Starting Frigg Management UI...'));
+    
+    const processManager = new ProcessManager();
+    
+    try {
+        const managementUiPath = path.join(__dirname, '../../management-ui');
+        
+        // Check if we're in development mode
+        // For CLI usage, we prefer development mode unless explicitly set to production
+        const fs = require('fs');
+        const isDevelopment = dev || process.env.NODE_ENV !== 'production';
+        
+        if (isDevelopment) {
+            const env = {
+                ...process.env,
+                VITE_API_URL: `http://localhost:${port}`,
+                PORT: port,
+                PROJECT_ROOT: workingDirectory,
+                REPOSITORY_INFO: JSON.stringify(targetRepo),
+                AVAILABLE_REPOSITORIES: targetRepo.isMultiRepo ? JSON.stringify(targetRepo.availableRepos) : null
+            };
+            
+            // Start backend server
+            processManager.spawnProcess(
+                'backend',
+                'npm',
+                ['run', 'server'],
+                { cwd: managementUiPath, env }
+            );
+            
+            // Start frontend dev server
+            processManager.spawnProcess(
+                'frontend',
+                'npm',
+                ['run', 'dev'],
+                { cwd: managementUiPath, env }
+            );
+            
+            // Wait for servers to start
+            await new Promise(resolve => setTimeout(resolve, 2000));
+            
+            // Display clean status
+            processManager.printStatus(
+                'http://localhost:5173',
+                `http://localhost:${port}`,
+                targetRepo.name
+            );
+            
+            // Open browser if requested
+            if (shouldOpen) {
+                setTimeout(() => {
+                    open('http://localhost:5173');
+                }, 1000);
+            }
+            
+        } else {
+            // Production mode - just start the backend server
+            const { FriggManagementServer } = await import('../../management-ui/server/index.js');
+            
+            const server = new FriggManagementServer({ 
+                port, 
+                projectRoot: workingDirectory,
+                repositoryInfo: targetRepo,
+                availableRepositories: targetRepo.isMultiRepo ? targetRepo.availableRepos : null
+            });
+            await server.start();
+            
+            processManager.printStatus(
+                `http://localhost:${port}`,
+                `http://localhost:${port}/api`,
+                targetRepo.name
+            );
+            
+            if (shouldOpen) {
+                setTimeout(() => {
+                    open(`http://localhost:${port}`);
+                }, 1000);
+            }
+        }
+        
+        // Keep the process running
+        process.stdin.resume();
+        
+    } catch (error) {
+        console.error(chalk.red('Failed to start Management UI:'), error.message);
+<<<<<<< HEAD
+>>>>>>> 652520a5 (Claude Flow RFC related development)
+=======
+        if (error.code === 'EADDRINUSE') {
+            console.log(chalk.yellow(`Port ${port} is already in use. Try using a different port with --port <number>`));
+        }
+>>>>>>> f153939e (refactor: clean up CLI help display and remove unused dependencies)
+        process.exit(1);
+    }
+}
+
+module.exports = { uiCommand };

package/management-ui/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/management-ui/server/api/backend.js

@@ -0,0 +1,256 @@
+import express from 'express';
+import { spawn } from 'child_process';
+import path from 'path';
+import fs from 'fs-extra';
+import { wsHandler } from '../websocket/handler.js';
+
+const router = express.Router();
+
+// Track backend process
+let backendProcess = null;
+let backendStatus = 'stopped';
+let backendLogs = [];
+const MAX_LOGS = 1000;
+
+// Helper function to find the backend directory
+async function findBackendDirectory() {
+    const cwd = process.cwd();
+    const possiblePaths = [
+        path.join(cwd, 'backend'),
+        path.join(cwd, '../../../backend'),
+        path.join(cwd, '../../backend'),
+        path.join(process.env.HOME || '', 'frigg', 'backend')
+    ];
+
+    for (const backendPath of possiblePaths) {
+        if (await fs.pathExists(backendPath)) {
+            return backendPath;
+        }
+    }
+
+    throw new Error('Backend directory not found');
+}
+
+// Get backend status
+router.get('/status', (req, res) => {
+    res.json({
+        status: backendStatus,
+        pid: backendProcess ? backendProcess.pid : null,
+        uptime: backendProcess ? process.uptime() : 0,
+        logs: backendLogs.slice(-100) // Return last 100 logs
+    });
+});
+
+// Start backend
+router.post('/start', async (req, res) => {
+    if (backendProcess && backendStatus === 'running') {
+        return res.status(400).json({
+            error: 'Backend is already running'
+        });
+    }
+
+    try {
+        const backendPath = await findBackendDirectory();
+        const { stage = 'dev', verbose = false } = req.body;
+
+        // Clear previous logs
+        backendLogs = [];
+        backendStatus = 'starting';
+
+        // Broadcast status update
+        wsHandler.broadcast('backend-status', {
+            status: 'starting',
+            message: 'Starting Frigg backend...'
+        });
+
+        // Start the backend process
+        const args = ['run', 'start'];
+        if (stage !== 'dev') {
+            args.push('--stage', stage);
+        }
+        if (verbose) {
+            args.push('--verbose');
+        }
+
+        backendProcess = spawn('npm', args, {
+            cwd: backendPath,
+            env: { ...process.env, NODE_ENV: stage === 'production' ? 'production' : 'development' },
+            shell: true
+        });
+
+        // Handle stdout
+        backendProcess.stdout.on('data', (data) => {
+            const log = {
+                type: 'stdout',
+                message: data.toString(),
+                timestamp: new Date().toISOString()
+            };
+            backendLogs.push(log);
+            if (backendLogs.length > MAX_LOGS) {
+                backendLogs.shift();
+            }
+            wsHandler.broadcast('backend-log', log);
+        });
+
+        // Handle stderr
+        backendProcess.stderr.on('data', (data) => {
+            const log = {
+                type: 'stderr',
+                message: data.toString(),
+                timestamp: new Date().toISOString()
+            };
+            backendLogs.push(log);
+            if (backendLogs.length > MAX_LOGS) {
+                backendLogs.shift();
+            }
+            wsHandler.broadcast('backend-log', log);
+        });
+
+        // Handle process exit
+        backendProcess.on('exit', (code, signal) => {
+            backendStatus = 'stopped';
+            backendProcess = null;
+            
+            const message = {
+                status: 'stopped',
+                code,
+                signal,
+                message: `Backend process exited with code ${code}`
+            };
+            
+            wsHandler.broadcast('backend-status', message);
+        });
+
+        // Wait a bit to ensure process started
+        await new Promise(resolve => setTimeout(resolve, 2000));
+
+        if (backendProcess && !backendProcess.killed) {
+            backendStatus = 'running';
+            wsHandler.broadcast('backend-status', {
+                status: 'running',
+                message: 'Backend started successfully'
+            });
+
+            res.json({
+                status: 'success',
+                message: 'Backend started',
+                pid: backendProcess.pid
+            });
+        } else {
+            throw new Error('Failed to start backend process');
+        }
+
+    } catch (error) {
+        backendStatus = 'stopped';
+        res.status(500).json({
+            error: error.message,
+            details: 'Failed to start backend'
+        });
+    }
+});
+
+// Stop backend
+router.post('/stop', (req, res) => {
+    if (!backendProcess || backendStatus !== 'running') {
+        return res.status(400).json({
+            error: 'Backend is not running'
+        });
+    }
+
+    try {
+        backendStatus = 'stopping';
+        wsHandler.broadcast('backend-status', {
+            status: 'stopping',
+            message: 'Stopping Frigg backend...'
+        });
+
+        // Kill the process group
+        if (process.platform === 'win32') {
+            spawn('taskkill', ['/pid', backendProcess.pid, '/T', '/F']);
+        } else {
+            process.kill(-backendProcess.pid, 'SIGTERM');
+        }
+
+        // Give it time to shut down gracefully
+        setTimeout(() => {
+            if (backendProcess && !backendProcess.killed) {
+                backendProcess.kill('SIGKILL');
+            }
+        }, 5000);
+
+        res.json({
+            status: 'success',
+            message: 'Backend stopping'
+        });
+
+    } catch (error) {
+        res.status(500).json({
+            error: error.message,
+            details: 'Failed to stop backend'
+        });
+    }
+});
+
+// Restart backend
+router.post('/restart', async (req, res) => {
+    try {
+        // Stop if running
+        if (backendProcess && backendStatus === 'running') {
+            await new Promise((resolve) => {
+                backendProcess.on('exit', resolve);
+                
+                if (process.platform === 'win32') {
+                    spawn('taskkill', ['/pid', backendProcess.pid, '/T', '/F']);
+                } else {
+                    process.kill(-backendProcess.pid, 'SIGTERM');
+                }
+            });
+        }
+
+        // Wait a moment
+        await new Promise(resolve => setTimeout(resolve, 1000));
+
+        // Start again
+        const response = await fetch('http://localhost:3001/api/backend/start', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(req.body)
+        });
+
+        const result = await response.json();
+        res.json(result);
+
+    } catch (error) {
+        res.status(500).json({
+            error: error.message,
+            details: 'Failed to restart backend'
+        });
+    }
+});
+
+// Get logs
+router.get('/logs', (req, res) => {
+    const { limit = 100, type } = req.query;
+    
+    let logs = backendLogs;
+    
+    if (type && ['stdout', 'stderr'].includes(type)) {
+        logs = logs.filter(log => log.type === type);
+    }
+    
+    res.json({
+        logs: logs.slice(-parseInt(limit)),
+        total: logs.length
+    });
+});
+
+// Clear logs
+router.delete('/logs', (req, res) => {
+    backendLogs = [];
+    res.json({
+        status: 'success',
+        message: 'Logs cleared'
+    });
+});
+
+export default router;