@friggframework/devtools 2.0.0--canary.398.7664c46.0 → 2.0.0--canary.400.bed3308.0

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",
+    "postcss": "^8.4.41",
+    "tailwindcss": "^3.4.10",
+    "vite": "^5.3.4",
+    "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",
+    "typescript": "^5.2.2",
+    "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/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;

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

@@ -0,0 +1,315 @@
+import express from 'express'
+import { spawn } from 'child_process'
+import path from 'path'
+import { createStandardResponse, createErrorResponse, ERROR_CODES, asyncHandler } from '../utils/response.js'
+
+const router = express.Router()
+
+// Available Frigg CLI commands
+const AVAILABLE_COMMANDS = [
+    {
+        name: 'init',
+        description: 'Initialize a new Frigg project',
+        usage: 'frigg init [project-name]',
+        options: [
+            { name: '--template', description: 'Template to use (serverless, express)' },
+            { name: '--skip-install', description: 'Skip npm install' },
+            { name: '--force', description: 'Overwrite existing directory' }
+        ]
+    },
+    {
+        name: 'create',
+        description: 'Create a new integration module',
+        usage: 'frigg create [integration-name]',
+        options: [
+            { name: '--template', description: 'Integration template to use' },
+            { name: '--skip-config', description: 'Skip initial configuration' }
+        ]
+    },
+    {
+        name: 'install',
+        description: 'Install an integration module',
+        usage: 'frigg install [module-name]',
+        options: [
+            { name: '--version', description: 'Specific version to install' },
+            { name: '--save-dev', description: 'Install as dev dependency' }
+        ]
+    },
+    {
+        name: 'start',
+        description: 'Start the Frigg application',
+        usage: 'frigg start',
+        options: [
+            { name: '--port', description: 'Port to run on' },
+            { name: '--stage', description: 'Environment stage' },
+            { name: '--verbose', description: 'Verbose logging' }
+        ]
+    },
+    {
+        name: 'build',
+        description: 'Build the Frigg application',
+        usage: 'frigg build',
+        options: [
+            { name: '--stage', description: 'Build for specific stage' },
+            { name: '--optimize', description: 'Enable optimizations' }
+        ]
+    },
+    {
+        name: 'deploy',
+        description: 'Deploy the Frigg application',
+        usage: 'frigg deploy',
+        options: [
+            { name: '--stage', description: 'Deploy to specific stage' },
+            { name: '--region', description: 'AWS region' },
+            { name: '--dry-run', description: 'Preview deployment without executing' }
+        ]
+    },
+    {
+        name: 'ui',
+        description: 'Launch the management UI',
+        usage: 'frigg ui',
+        options: [
+            { name: '--port', description: 'UI port (default: 3001)' },
+            { name: '--open', description: 'Auto-open browser' }
+        ]
+    }
+]
+
+/**
+ * Get available CLI commands
+ */
+router.get('/commands', asyncHandler(async (req, res) => {
+    res.json(createStandardResponse({
+        commands: AVAILABLE_COMMANDS,
+        friggPath: await getFriggPath()
+    }))
+}))
+
+/**
+ * Execute a CLI command
+ */
+router.post('/execute', asyncHandler(async (req, res) => {
+    const { command, args = [], options = {} } = req.body
+
+    if (!command) {
+        return res.status(400).json(
+            createErrorResponse(ERROR_CODES.INVALID_REQUEST, 'Command is required')
+        )
+    }
+
+    // Validate command
+    const validCommand = AVAILABLE_COMMANDS.find(cmd => cmd.name === command)
+    if (!validCommand) {
+        return res.status(400).json(
+            createErrorResponse(ERROR_CODES.CLI_COMMAND_NOT_FOUND, `Unknown command: ${command}`)
+        )
+    }
+
+    try {
+        const result = await executeFriggCommand(command, args, options, req.app.get('io'))
+        
+        res.json(createStandardResponse({
+            command,
+            args,
+            options,
+            output: result.output,
+            exitCode: result.exitCode,
+            duration: result.duration
+        }))
+
+    } catch (error) {
+        return res.status(500).json(
+            createErrorResponse(ERROR_CODES.CLI_COMMAND_FAILED, error.message, {
+                command,
+                args,
+                options
+            })
+        )
+    }
+}))
+
+/**
+ * Get CLI command history
+ */
+router.get('/history', asyncHandler(async (req, res) => {
+    // In a real implementation, this would read from a persistent history
+    // For now, return empty array
+    res.json(createStandardResponse({
+        history: [],
+        message: 'Command history not yet implemented'
+    }))
+}))
+
+/**
+ * Get Frigg CLI version and info
+ */
+router.get('/info', asyncHandler(async (req, res) => {
+    try {
+        const result = await executeFriggCommand('--version', [], {}, null)
+        
+        res.json(createStandardResponse({
+            version: result.output.trim(),
+            path: await getFriggPath(),
+            nodeVersion: process.version,
+            platform: process.platform
+        }))
+
+    } catch (error) {
+        return res.status(500).json(
+            createErrorResponse(ERROR_CODES.CLI_COMMAND_FAILED, 'Failed to get CLI info', {
+                error: error.message
+            })
+        )
+    }
+}))
+
+/**
+ * Execute a Frigg CLI command
+ */
+async function executeFriggCommand(command, args = [], options = {}, io = null) {
+    return new Promise((resolve, reject) => {
+        const startTime = Date.now()
+        
+        // Build command arguments
+        const cmdArgs = [command, ...args]
+        
+        // Add options as flags
+        Object.entries(options).forEach(([key, value]) => {
+            if (value === true) {
+                cmdArgs.push(`--${key}`)
+            } else if (value !== false && value !== null && value !== undefined) {
+                cmdArgs.push(`--${key}`, value.toString())
+            }
+        })
+
+        let output = ''
+        let errorOutput = ''
+
+        // Try to find frigg command
+        const friggCommand = process.platform === 'win32' ? 'frigg.cmd' : 'frigg'
+        
+        // Spawn the command
+        const childProcess = spawn(friggCommand, cmdArgs, {
+            cwd: process.cwd(),
+            env: process.env,
+            shell: true
+        })
+
+        // Capture stdout
+        childProcess.stdout?.on('data', (data) => {
+            const chunk = data.toString()
+            output += chunk
+            
+            // Broadcast real-time output via WebSocket
+            if (io) {
+                io.emit('cli:output', {
+                    type: 'stdout',
+                    data: chunk,
+                    command,
+                    timestamp: new Date().toISOString()
+                })
+            }
+        })
+
+        // Capture stderr
+        childProcess.stderr?.on('data', (data) => {
+            const chunk = data.toString()
+            errorOutput += chunk
+            
+            // Broadcast real-time output via WebSocket
+            if (io) {
+                io.emit('cli:output', {
+                    type: 'stderr',
+                    data: chunk,
+                    command,
+                    timestamp: new Date().toISOString()
+                })
+            }
+        })
+
+        // Handle process completion
+        childProcess.on('close', (code) => {
+            const duration = Date.now() - startTime
+            
+            // Broadcast completion via WebSocket
+            if (io) {
+                io.emit('cli:complete', {
+                    command,
+                    args,
+                    options,
+                    exitCode: code,
+                    duration,
+                    timestamp: new Date().toISOString()
+                })
+            }
+
+            if (code === 0) {
+                resolve({
+                    output: output || errorOutput,
+                    exitCode: code,
+                    duration
+                })
+            } else {
+                reject(new Error(`Command failed with exit code ${code}: ${errorOutput || output}`))
+            }
+        })
+
+        // Handle process errors
+        childProcess.on('error', (error) => {
+            const duration = Date.now() - startTime
+            
+            // Broadcast error via WebSocket
+            if (io) {
+                io.emit('cli:error', {
+                    command,
+                    args,
+                    options,
+                    error: error.message,
+                    duration,
+                    timestamp: new Date().toISOString()
+                })
+            }
+
+            reject(error)
+        })
+
+        // Set timeout for long-running commands (5 minutes)
+        setTimeout(() => {
+            if (!childProcess.killed) {
+                childProcess.kill('SIGTERM')
+                reject(new Error('Command timed out after 5 minutes'))
+            }
+        }, 5 * 60 * 1000)
+    })
+}
+
+/**
+ * Get the path to the Frigg CLI
+ */
+async function getFriggPath() {
+    return new Promise((resolve) => {
+        const which = process.platform === 'win32' ? 'where' : 'which'
+        const friggCommand = process.platform === 'win32' ? 'frigg.cmd' : 'frigg'
+        
+        const childProcess = spawn(which, [friggCommand], { shell: true })
+        
+        let output = ''
+        childProcess.stdout?.on('data', (data) => {
+            output += data.toString()
+        })
+        
+        childProcess.on('close', (code) => {
+            if (code === 0) {
+                resolve(output.trim().split('\n')[0])
+            } else {
+                resolve('frigg command not found in PATH')
+            }
+        })
+        
+        childProcess.on('error', () => {
+            resolve('frigg command not found')
+        })
+    })
+}
+
+export default router