vibecodingmachine-cli 1.0.5 → 1.0.7

package/src/utils/auto-mode-simple-ui.js

@@ -1,161 +1,161 @@
-const chalk = require('chalk');
-const boxen = require('boxen');
-
-/**
- * Simple status-line UI for Auto Mode with persistent workflow card
- * Shows a purple card similar to Electron app that stays visible
- */
-class AutoModeSimpleUI {
-  constructor(options = {}) {
-    this.menuContent = options.menuContent || '';
-    this.requirement = 'Loading...';
-    this.step = 'PREPARE';
-    this.chatCount = 0;
-    this.maxChats = null;
-    this.progress = 0;
-    this.outputLineCount = 0; // Track output lines for periodic re-render
-    this.lastCardPrintTime = Date.now(); // Track when we last printed the card
-    this.lastCardPrintLine = 0; // Track line count when we last printed the card
-
-    // Print header once
-    console.log('\n' + chalk.bold.cyan('═══════════════════════════════════════════════════════════'));
-    console.log(this.menuContent);
-    console.log(chalk.bold.cyan('═══════════════════════════════════════════════════════════') + '\n');
-
-    // Initial workflow card
-    this.printWorkflowCard();
-  }
-
-  updateStatus(status) {
-    if (status.requirement !== undefined) this.requirement = status.requirement;
-    if (status.step !== undefined) this.step = status.step;
-    if (status.chatCount !== undefined) this.chatCount = status.chatCount;
-    if (status.maxChats !== undefined) this.maxChats = status.maxChats;
-    if (status.progress !== undefined) this.progress = status.progress;
-
-    this.printWorkflowCard();
-  }
-
-  /**
-   * Get icon for each workflow stage based on current step
-   */
-  getStepIcon(stage, currentStage) {
-    const stageOrder = ['PREPARE', 'ACT', 'CLEAN UP', 'VERIFY', 'DONE'];
-    const currentIndex = stageOrder.indexOf(currentStage);
-    const stepIndex = stageOrder.indexOf(stage);
-
-    if (stepIndex < currentIndex) {
-      return '✅'; // Completed steps
-    } else if (stepIndex === currentIndex) {
-      if (currentStage === 'DONE') {
-        return '✅'; // Done is always checked
-      } else {
-        return '🔨'; // Current step
-      }
-    } else {
-      return '⏳'; // Pending steps
-    }
-  }
-
-  /**
-   * Render the persistent workflow card (similar to Electron app's purple card)
-   */
-  printWorkflowCard() {
-    // Step color mapping
-    const stepColors = {
-      'PREPARE': chalk.cyan,
-      'ACT': chalk.yellow,
-      'CLEAN UP': chalk.magenta,
-      'VERIFY': chalk.blue,
-      'DONE': chalk.green,
-      'UNKNOWN': chalk.gray
-    };
-
-    const currentStepColor = stepColors[this.step] || chalk.gray;
-
-    // Build workflow states line: PREPARE ⏳ ACT ⏳ CLEAN UP ⏳ VERIFY ⏳ DONE
-    const stages = [
-      { name: 'PREPARE', color: chalk.cyan },
-      { name: 'ACT', color: chalk.yellow },
-      { name: 'CLEAN UP', color: chalk.magenta },
-      { name: 'VERIFY', color: chalk.blue },
-      { name: 'DONE', color: chalk.green }
-    ];
-
-    const workflowLine = stages.map((stage, index) => {
-      const icon = this.getStepIcon(stage.name, this.step);
-      const isCurrent = stage.name === this.step;
-      const stageColor = isCurrent ? currentStepColor.bold : stage.color;
-      return `${icon} ${stageColor(stage.name)}`;
-    }).join(` ${chalk.gray('⏳')} `);
-
-    // Truncate requirement if too long
-    const displayReq = this.requirement.length > 70
-      ? this.requirement.substring(0, 67) + '...'
-      : this.requirement;
-
-    // Build card content
-    const cardContent = [
-      workflowLine,
-      '',
-      chalk.bold.white(`🎯 Working on: ${displayReq}`)
-    ].join('\n');
-
-    // Render card with purple/magenta border (matching Electron app)
-    const card = boxen(cardContent, {
-      padding: { left: 1, right: 1, top: 1, bottom: 1 },
-      margin: { top: 0, right: 0, bottom: 1, left: 0 },
-      borderStyle: 'round',
-      borderColor: 'magenta',
-      backgroundColor: 'black'
-    });
-    
-    // Print the card with a separator line before it for visibility
-    if (this.outputLineCount > 0) {
-      // Add separator when re-printing after output
-      console.log(chalk.gray('─'.repeat(80)));
-    }
-    console.log(card);
-    this.lastCardPrintTime = Date.now();
-    this.lastCardPrintLine = this.outputLineCount;
-  }
-
-  appendOutput(line) {
-    // Periodically re-print the workflow card to keep it visible
-    // Re-print every 20 lines of output, or if more than 5 seconds have passed
-    const linesSinceLastCard = this.outputLineCount - this.lastCardPrintLine;
-    const timeSinceLastCard = Date.now() - this.lastCardPrintTime;
-    
-    if (linesSinceLastCard >= 20 || timeSinceLastCard > 5000) {
-      this.printWorkflowCard();
-    }
-    
-    // Increment output line counter
-    if (line && line.trim()) {
-      this.outputLineCount++;
-      console.log(line);
-    }
-  }
-
-  clearOutput() {
-    // No-op for simple UI
-  }
-
-  destroy() {
-    console.log('\n' + chalk.bold.green('Auto mode exited.') + '\n');
-  }
-}
-
-/**
- * Create and display a simple status UI for Auto Mode
- * @param {object} options - UI configuration
- * @returns {AutoModeSimpleUI} UI instance
- */
-function createAutoModeUI(options = {}) {
-  return new AutoModeSimpleUI(options);
-}
-
-module.exports = {
-  createAutoModeUI,
-  AutoModeSimpleUI
-};
+const chalk = require('chalk');
+const boxen = require('boxen');
+
+/**
+ * Simple status-line UI for Auto Mode with persistent workflow card
+ * Shows a purple card similar to Electron app that stays visible
+ */
+class AutoModeSimpleUI {
+  constructor(options = {}) {
+    this.menuContent = options.menuContent || '';
+    this.requirement = 'Loading...';
+    this.step = 'PREPARE';
+    this.chatCount = 0;
+    this.maxChats = null;
+    this.progress = 0;
+    this.outputLineCount = 0; // Track output lines for periodic re-render
+    this.lastCardPrintTime = Date.now(); // Track when we last printed the card
+    this.lastCardPrintLine = 0; // Track line count when we last printed the card
+
+    // Print header once
+    console.log('\n' + chalk.bold.cyan('═══════════════════════════════════════════════════════════'));
+    console.log(this.menuContent);
+    console.log(chalk.bold.cyan('═══════════════════════════════════════════════════════════') + '\n');
+
+    // Initial workflow card
+    this.printWorkflowCard();
+  }
+
+  updateStatus(status) {
+    if (status.requirement !== undefined) this.requirement = status.requirement;
+    if (status.step !== undefined) this.step = status.step;
+    if (status.chatCount !== undefined) this.chatCount = status.chatCount;
+    if (status.maxChats !== undefined) this.maxChats = status.maxChats;
+    if (status.progress !== undefined) this.progress = status.progress;
+
+    this.printWorkflowCard();
+  }
+
+  /**
+   * Get icon for each workflow stage based on current step
+   */
+  getStepIcon(stage, currentStage) {
+    const stageOrder = ['PREPARE', 'ACT', 'CLEAN UP', 'VERIFY', 'DONE'];
+    const currentIndex = stageOrder.indexOf(currentStage);
+    const stepIndex = stageOrder.indexOf(stage);
+
+    if (stepIndex < currentIndex) {
+      return '✅'; // Completed steps
+    } else if (stepIndex === currentIndex) {
+      if (currentStage === 'DONE') {
+        return '✅'; // Done is always checked
+      } else {
+        return '🔨'; // Current step
+      }
+    } else {
+      return '⏳'; // Pending steps
+    }
+  }
+
+  /**
+   * Render the persistent workflow card (similar to Electron app's purple card)
+   */
+  printWorkflowCard() {
+    // Step color mapping
+    const stepColors = {
+      'PREPARE': chalk.cyan,
+      'ACT': chalk.yellow,
+      'CLEAN UP': chalk.magenta,
+      'VERIFY': chalk.blue,
+      'DONE': chalk.green,
+      'UNKNOWN': chalk.gray
+    };
+
+    const currentStepColor = stepColors[this.step] || chalk.gray;
+
+    // Build workflow states line: PREPARE ⏳ ACT ⏳ CLEAN UP ⏳ VERIFY ⏳ DONE
+    const stages = [
+      { name: 'PREPARE', color: chalk.cyan },
+      { name: 'ACT', color: chalk.yellow },
+      { name: 'CLEAN UP', color: chalk.magenta },
+      { name: 'VERIFY', color: chalk.blue },
+      { name: 'DONE', color: chalk.green }
+    ];
+
+    const workflowLine = stages.map((stage, index) => {
+      const icon = this.getStepIcon(stage.name, this.step);
+      const isCurrent = stage.name === this.step;
+      const stageColor = isCurrent ? currentStepColor.bold : stage.color;
+      return `${icon} ${stageColor(stage.name)}`;
+    }).join(` ${chalk.gray('⏳')} `);
+
+    // Truncate requirement if too long
+    const displayReq = this.requirement.length > 70
+      ? this.requirement.substring(0, 67) + '...'
+      : this.requirement;
+
+    // Build card content
+    const cardContent = [
+      workflowLine,
+      '',
+      chalk.bold.white(`🎯 Working on: ${displayReq}`)
+    ].join('\n');
+
+    // Render card with purple/magenta border (matching Electron app)
+    const card = boxen(cardContent, {
+      padding: { left: 1, right: 1, top: 1, bottom: 1 },
+      margin: { top: 0, right: 0, bottom: 1, left: 0 },
+      borderStyle: 'round',
+      borderColor: 'magenta',
+      backgroundColor: 'black'
+    });
+    
+    // Print the card with a separator line before it for visibility
+    if (this.outputLineCount > 0) {
+      // Add separator when re-printing after output
+      console.log(chalk.gray('─'.repeat(80)));
+    }
+    console.log(card);
+    this.lastCardPrintTime = Date.now();
+    this.lastCardPrintLine = this.outputLineCount;
+  }
+
+  appendOutput(line) {
+    // Periodically re-print the workflow card to keep it visible
+    // Re-print every 20 lines of output, or if more than 5 seconds have passed
+    const linesSinceLastCard = this.outputLineCount - this.lastCardPrintLine;
+    const timeSinceLastCard = Date.now() - this.lastCardPrintTime;
+    
+    if (linesSinceLastCard >= 20 || timeSinceLastCard > 5000) {
+      this.printWorkflowCard();
+    }
+    
+    // Increment output line counter
+    if (line && line.trim()) {
+      this.outputLineCount++;
+      console.log(line);
+    }
+  }
+
+  clearOutput() {
+    // No-op for simple UI
+  }
+
+  destroy() {
+    console.log('\n' + chalk.bold.green('Auto mode exited.') + '\n');
+  }
+}
+
+/**
+ * Create and display a simple status UI for Auto Mode
+ * @param {object} options - UI configuration
+ * @returns {AutoModeSimpleUI} UI instance
+ */
+function createAutoModeUI(options = {}) {
+  return new AutoModeSimpleUI(options);
+}
+
+module.exports = {
+  createAutoModeUI,
+  AutoModeSimpleUI
+};