musubi-sdd 2.2.0 → 3.0.0

package/bin/musubi-gui.js

@@ -0,0 +1,270 @@
+#!/usr/bin/env node
+
+/**
+ * @fileoverview MUSUBI Web GUI CLI
+ * @description Command-line interface for the Web GUI Dashboard
+ * @module bin/musubi-gui
+ */
+
+const { Command } = require('commander');
+const path = require('path');
+const chalk = require('chalk');
+
+const program = new Command();
+
+program
+  .name('musubi-gui')
+  .description('MUSUBI Web GUI Dashboard - Visual interface for SDD workflow')
+  .version('0.1.0');
+
+/**
+ * Start command - Launch the GUI server
+ */
+program
+  .command('start')
+  .description('Start the Web GUI server')
+  .option('-p, --port <port>', 'Server port', '3000')
+  .option('-d, --dir <directory>', 'Project directory', process.cwd())
+  .option('--no-open', 'Do not open browser automatically')
+  .action(async (options) => {
+    try {
+      const Server = require('../src/gui/server');
+      const projectPath = path.resolve(options.dir);
+      
+      console.log(chalk.blue('🔮 MUSUBI Web GUI'));
+      console.log(chalk.gray(`Project: ${projectPath}`));
+      
+      const server = new Server(projectPath, {
+        port: parseInt(options.port, 10),
+      });
+      
+      await server.start();
+      
+      console.log(chalk.green(`\n✓ Server running at http://localhost:${options.port}`));
+      console.log(chalk.gray('Press Ctrl+C to stop\n'));
+      
+      // Open browser if requested
+      if (options.open !== false) {
+        const open = await import('open');
+        await open.default(`http://localhost:${options.port}`);
+      }
+      
+      // Handle shutdown
+      process.on('SIGINT', async () => {
+        console.log(chalk.yellow('\n\nShutting down...'));
+        await server.stop();
+        process.exit(0);
+      });
+      
+    } catch (error) {
+      console.error(chalk.red(`Error: ${error.message}`));
+      process.exit(1);
+    }
+  });
+
+/**
+ * Build command - Build the frontend
+ */
+program
+  .command('build')
+  .description('Build the frontend for production')
+  .option('-o, --outdir <directory>', 'Output directory', 'dist')
+  .action(async (options) => {
+    try {
+      const { execSync } = require('child_process');
+      const guiDir = path.join(__dirname, '..', 'src', 'gui', 'client');
+      
+      console.log(chalk.blue('Building frontend...'));
+      
+      // Check if client directory exists
+      const fs = require('fs');
+      if (!fs.existsSync(guiDir)) {
+        console.log(chalk.yellow('Frontend client not found. Creating minimal build...'));
+        return;
+      }
+      
+      execSync('npm run build', {
+        cwd: guiDir,
+        stdio: 'inherit',
+      });
+      
+      console.log(chalk.green(`✓ Frontend built to ${options.outdir}`));
+    } catch (error) {
+      console.error(chalk.red(`Build failed: ${error.message}`));
+      process.exit(1);
+    }
+  });
+
+/**
+ * Dev command - Start development mode with hot reload
+ */
+program
+  .command('dev')
+  .description('Start in development mode with hot reload')
+  .option('-p, --port <port>', 'Server port', '3000')
+  .option('-d, --dir <directory>', 'Project directory', process.cwd())
+  .action(async (options) => {
+    try {
+      const Server = require('../src/gui/server');
+      const projectPath = path.resolve(options.dir);
+      
+      console.log(chalk.blue('🔮 MUSUBI Web GUI (Development Mode)'));
+      console.log(chalk.gray(`Project: ${projectPath}`));
+      
+      const server = new Server(projectPath, {
+        port: parseInt(options.port, 10),
+        dev: true,
+      });
+      
+      await server.start();
+      
+      console.log(chalk.green(`\n✓ Server running at http://localhost:${options.port}`));
+      console.log(chalk.cyan('Hot reload enabled'));
+      console.log(chalk.gray('Press Ctrl+C to stop\n'));
+      
+      // Handle shutdown
+      process.on('SIGINT', async () => {
+        console.log(chalk.yellow('\n\nShutting down...'));
+        await server.stop();
+        process.exit(0);
+      });
+      
+    } catch (error) {
+      console.error(chalk.red(`Error: ${error.message}`));
+      process.exit(1);
+    }
+  });
+
+/**
+ * Status command - Show project status
+ */
+program
+  .command('status')
+  .description('Show project status summary')
+  .option('-d, --dir <directory>', 'Project directory', process.cwd())
+  .option('--json', 'Output as JSON')
+  .action(async (options) => {
+    try {
+      const ProjectScanner = require('../src/gui/services/project-scanner');
+      const projectPath = path.resolve(options.dir);
+      
+      const scanner = new ProjectScanner(projectPath);
+      const project = await scanner.scan();
+      
+      if (options.json) {
+        console.log(JSON.stringify(project, null, 2));
+        return;
+      }
+      
+      console.log(chalk.blue('\n🔮 MUSUBI Project Status\n'));
+      console.log(chalk.white(`Project: ${chalk.bold(project.name)}`));
+      console.log(chalk.white(`Path: ${project.path}`));
+      console.log('');
+      
+      if (project.hasSteering) {
+        console.log(chalk.green('✓ Steering directory found'));
+        if (project.constitution) {
+          console.log(chalk.green(`  ✓ Constitution: ${project.constitution.articles.length} articles`));
+        }
+        if (project.steering) {
+          const docs = ['product', 'structure', 'tech'].filter(d => project.steering[d]);
+          console.log(chalk.green(`  ✓ Documents: ${docs.join(', ')}`));
+        }
+      } else {
+        console.log(chalk.yellow('⚠ No steering directory (run musubi init)'));
+      }
+      
+      if (project.hasSpecs) {
+        console.log(chalk.green(`✓ Specs: ${project.specs.length} specification files`));
+        
+        let totalReqs = 0;
+        let totalTasks = 0;
+        let completedTasks = 0;
+        
+        for (const spec of project.specs) {
+          totalReqs += spec.requirements.length;
+          totalTasks += spec.tasks.length;
+          completedTasks += spec.tasks.filter(t => t.completed).length;
+        }
+        
+        console.log(chalk.white(`  • Requirements: ${totalReqs}`));
+        console.log(chalk.white(`  • Tasks: ${completedTasks}/${totalTasks} completed`));
+      } else {
+        console.log(chalk.gray('○ No specs yet'));
+      }
+      
+      console.log('');
+    } catch (error) {
+      console.error(chalk.red(`Error: ${error.message}`));
+      process.exit(1);
+    }
+  });
+
+/**
+ * Matrix command - Show traceability matrix
+ */
+program
+  .command('matrix')
+  .description('Display traceability matrix')
+  .option('-d, --dir <directory>', 'Project directory', process.cwd())
+  .option('--json', 'Output as JSON')
+  .action(async (options) => {
+    try {
+      const TraceabilityService = require('../src/gui/services/traceability-service');
+      const projectPath = path.resolve(options.dir);
+      
+      const service = new TraceabilityService(projectPath);
+      const matrix = await service.buildMatrix();
+      
+      if (options.json) {
+        console.log(JSON.stringify(matrix, null, 2));
+        return;
+      }
+      
+      console.log(chalk.blue('\n🔮 Traceability Matrix\n'));
+      
+      const coverage = await service.getCoverage();
+      console.log(chalk.white('Coverage:'));
+      console.log(chalk.white(`  Total Requirements: ${coverage.total}`));
+      console.log(chalk.white(`  Linked: ${coverage.linked} (${coverage.linkedPercent}%)`));
+      console.log(chalk.white(`  Implemented: ${coverage.implemented} (${coverage.implementedPercent}%)`));
+      console.log('');
+      
+      if (matrix.requirements.length === 0) {
+        console.log(chalk.gray('No requirements found.'));
+        return;
+      }
+      
+      console.log(chalk.white('Requirements:'));
+      for (const req of matrix.requirements) {
+        const statusColor = req.status === 'implemented' ? 'green' : 
+                           req.status === 'tasked' ? 'yellow' : 
+                           req.status === 'designed' ? 'cyan' : 'gray';
+        console.log(chalk[statusColor](`  ${req.id}: ${req.title} [${req.status}]`));
+        
+        if (req.links.designs.length > 0) {
+          console.log(chalk.gray(`    → Designs: ${req.links.designs.map(d => d.id).join(', ')}`));
+        }
+        if (req.links.tasks.length > 0) {
+          console.log(chalk.gray(`    → Tasks: ${req.links.tasks.map(t => t.id).join(', ')}`));
+        }
+      }
+      
+      console.log('');
+      
+      const gaps = await service.findGaps();
+      if (gaps.length > 0) {
+        console.log(chalk.yellow('Gaps:'));
+        for (const gap of gaps) {
+          console.log(chalk.yellow(`  ⚠ ${gap.message}`));
+        }
+        console.log('');
+      }
+      
+    } catch (error) {
+      console.error(chalk.red(`Error: ${error.message}`));
+      process.exit(1);
+    }
+  });
+
+program.parse();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "musubi-sdd",
-  "version": "2.2.0",
+  "version": "3.0.0",
   "description": "Ultimate Specification Driven Development Tool with 27 Agents for 7 AI Coding Platforms + MCP Integration (Claude Code, GitHub Copilot, Cursor, Gemini CLI, Windsurf, Codex, Qwen Code)",
   "main": "src/index.js",
   "bin": {
@@ -20,7 +20,10 @@
     "musubi-change": "bin/musubi-change.js",
     "musubi-workflow": "bin/musubi-workflow.js",
     "musubi-remember": "bin/musubi-remember.js",
-    "musubi-resolve": "bin/musubi-resolve.js"
+    "musubi-resolve": "bin/musubi-resolve.js",
+    "musubi-convert": "bin/musubi-convert.js",
+    "musubi-browser": "bin/musubi-browser.js",
+    "musubi-gui": "bin/musubi-gui.js"
   },
   "scripts": {
     "test": "jest",
@@ -54,11 +57,18 @@
   "dependencies": {
     "@octokit/rest": "^22.0.1",
     "chalk": "^4.1.2",
+    "chokidar": "^3.5.3",
     "commander": "^11.0.0",
+    "cors": "^2.8.5",
+    "express": "^4.18.2",
     "fs-extra": "^11.3.2",
     "glob": "^10.5.0",
+    "gray-matter": "^4.0.3",
     "inquirer": "^9.0.0",
-    "js-yaml": "^4.1.0"
+    "js-yaml": "^4.1.0",
+    "open": "^10.1.0",
+    "playwright": "^1.40.0",
+    "ws": "^8.14.2"
   },
   "devDependencies": {
     "eslint": "^8.50.0",

package/src/agents/browser/action-executor.js

@@ -0,0 +1,255 @@
+/**
+ * @fileoverview Action Executor for Browser Automation
+ * @module agents/browser/action-executor
+ */
+
+/**
+ * @typedef {Object} ActionResult
+ * @property {boolean} success - Whether the action succeeded
+ * @property {string} type - Action type
+ * @property {string} [error] - Error message if failed
+ * @property {*} [data] - Result data
+ */
+
+/**
+ * @typedef {Object} ExecutionContext
+ * @property {import('playwright').Page} page - Playwright page instance
+ * @property {import('./screenshot')} screenshot - Screenshot capture instance
+ * @property {number} timeout - Default timeout
+ */
+
+/**
+ * Action Executor - Executes parsed actions using Playwright
+ */
+class ActionExecutor {
+  constructor() {
+    this.defaultTimeout = 30000;
+  }
+
+  /**
+   * Execute a single action
+   * @param {import('./nl-parser').Action} action - Action to execute
+   * @param {ExecutionContext} context - Execution context
+   * @returns {Promise<ActionResult>}
+   */
+  async execute(action, context) {
+    const { page, timeout = this.defaultTimeout } = context;
+
+    try {
+      switch (action.type) {
+        case 'navigate':
+          return await this.executeNavigate(action, page, timeout);
+        case 'click':
+          return await this.executeClick(action, page, timeout);
+        case 'fill':
+          return await this.executeFill(action, page, timeout);
+        case 'select':
+          return await this.executeSelect(action, page, timeout);
+        case 'wait':
+          return await this.executeWait(action);
+        case 'screenshot':
+          return await this.executeScreenshot(action, context);
+        case 'assert':
+          return await this.executeAssert(action, page, timeout);
+        default:
+          return {
+            success: false,
+            type: action.type,
+            error: `Unknown action type: ${action.type}`,
+          };
+      }
+    } catch (error) {
+      return {
+        success: false,
+        type: action.type,
+        error: error.message,
+      };
+    }
+  }
+
+  /**
+   * Execute navigate action
+   * @param {Object} action
+   * @param {import('playwright').Page} page
+   * @param {number} timeout
+   * @returns {Promise<ActionResult>}
+   */
+  async executeNavigate(action, page, timeout) {
+    await page.goto(action.url, { timeout, waitUntil: 'domcontentloaded' });
+    
+    return {
+      success: true,
+      type: 'navigate',
+      data: { url: action.url, currentUrl: page.url() },
+    };
+  }
+
+  /**
+   * Execute click action
+   * @param {Object} action
+   * @param {import('playwright').Page} page
+   * @param {number} timeout
+   * @returns {Promise<ActionResult>}
+   */
+  async executeClick(action, page, timeout) {
+    const selectors = action.selector.split(',').map(s => s.trim());
+    
+    // Try each selector until one works
+    for (const selector of selectors) {
+      try {
+        await page.click(selector, { timeout });
+        return {
+          success: true,
+          type: 'click',
+          data: { selector },
+        };
+      } catch (e) {
+        // Try next selector
+      }
+    }
+
+    // If none worked, try with the original selector and let it fail
+    await page.click(action.selector, { timeout });
+    
+    return {
+      success: true,
+      type: 'click',
+      data: { selector: action.selector },
+    };
+  }
+
+  /**
+   * Execute fill action
+   * @param {Object} action
+   * @param {import('playwright').Page} page
+   * @param {number} timeout
+   * @returns {Promise<ActionResult>}
+   */
+  async executeFill(action, page, timeout) {
+    const selectors = action.selector.split(',').map(s => s.trim());
+    
+    // Try each selector until one works
+    for (const selector of selectors) {
+      try {
+        await page.fill(selector, action.value, { timeout });
+        return {
+          success: true,
+          type: 'fill',
+          data: { selector, value: action.value },
+        };
+      } catch (e) {
+        // Try next selector
+      }
+    }
+
+    // If none worked, try with the original selector
+    await page.fill(action.selector, action.value, { timeout });
+    
+    return {
+      success: true,
+      type: 'fill',
+      data: { selector: action.selector, value: action.value },
+    };
+  }
+
+  /**
+   * Execute select action
+   * @param {Object} action
+   * @param {import('playwright').Page} page
+   * @param {number} timeout
+   * @returns {Promise<ActionResult>}
+   */
+  async executeSelect(action, page, timeout) {
+    const selectors = action.selector.split(',').map(s => s.trim());
+    
+    for (const selector of selectors) {
+      try {
+        await page.selectOption(selector, action.value, { timeout });
+        return {
+          success: true,
+          type: 'select',
+          data: { selector, value: action.value },
+        };
+      } catch (e) {
+        // Try next selector
+      }
+    }
+
+    await page.selectOption(action.selector, action.value, { timeout });
+    
+    return {
+      success: true,
+      type: 'select',
+      data: { selector: action.selector, value: action.value },
+    };
+  }
+
+  /**
+   * Execute wait action
+   * @param {Object} action
+   * @returns {Promise<ActionResult>}
+   */
+  async executeWait(action) {
+    await new Promise(resolve => setTimeout(resolve, action.delay));
+    
+    return {
+      success: true,
+      type: 'wait',
+      data: { delay: action.delay },
+    };
+  }
+
+  /**
+   * Execute screenshot action
+   * @param {Object} action
+   * @param {ExecutionContext} context
+   * @returns {Promise<ActionResult>}
+   */
+  async executeScreenshot(action, context) {
+    const { page, screenshot } = context;
+    
+    const path = await screenshot.capture(page, {
+      name: action.name,
+      fullPage: action.fullPage,
+    });
+    
+    return {
+      success: true,
+      type: 'screenshot',
+      data: { path, fullPage: action.fullPage },
+    };
+  }
+
+  /**
+   * Execute assert action
+   * @param {Object} action
+   * @param {import('playwright').Page} page
+   * @param {number} timeout
+   * @returns {Promise<ActionResult>}
+   */
+  async executeAssert(action, page, timeout) {
+    const locator = page.locator(action.selector);
+    
+    await locator.waitFor({ state: 'visible', timeout });
+    
+    let text = null;
+    if (action.expectedText) {
+      text = await locator.textContent();
+      if (!text.includes(action.expectedText)) {
+        return {
+          success: false,
+          type: 'assert',
+          error: `Expected "${action.expectedText}" but found "${text}"`,
+        };
+      }
+    }
+    
+    return {
+      success: true,
+      type: 'assert',
+      data: { selector: action.selector, visible: true, text },
+    };
+  }
+}
+
+module.exports = ActionExecutor;