vibecodingmachine-cli 2026.2.20-438 → 2026.2.26-1739

package/src/utils/trui-req-tree.js

@@ -2,13 +2,82 @@
  * TRUI Requirements Tree Navigator
  *
  * Shows expandable sections using showQuickMenu with letter shortcuts.
- * Sections: TODO SPECIFICATIONS, VERIFIED, TO VERIFY, TODO REQUIREMENTS
+ * Sections: TODO SPECIFICATIONS, Verified, To Verify, TODO REQUIREMENTS
  * Each section is collapsible; requirements shown as sub-items when expanded.
  */
 
 const chalk = require('chalk');
 const fs = require('fs-extra');
 const path = require('path');
+const os = require('os');
+
+// CLI state management functions
+const getStateFilePath = () => path.join(os.homedir(), '.vibecodingmachine-cli-states.json');
+
+const saveCliStates = async (expanded, expandedSpecs) => {
+  try {
+    const states = {
+      expanded: expanded,
+      expandedSpecs: Array.from(expandedSpecs)
+    };
+    await fs.writeFile(getStateFilePath(), JSON.stringify(states, null, 2));
+    console.log('💾 Saved CLI list states');
+  } catch (error) {
+    console.error('❌ Error saving CLI states:', error.message);
+  }
+};
+
+const loadCliStates = async () => {
+  try {
+    const stateFile = getStateFilePath();
+    if (await fs.pathExists(stateFile)) {
+      const content = await fs.readFile(stateFile, 'utf8');
+      const states = JSON.parse(content);
+      console.log('📂 Loaded CLI list states');
+      return {
+        expanded: states.expanded || { specifications: false, verified: false, verify: false, todo: false, recycled: false },
+        expandedSpecs: new Set(states.expandedSpecs || [])
+      };
+    }
+    console.log('📂 No saved CLI states found, using defaults (all closed)');
+    return null;
+  } catch (error) {
+    console.error('❌ Error loading CLI states:', error.message);
+    return null;
+  }
+};
+
+/**
+
+/**
+ * Create progress bar string with green/orange gradient based on completion percentage
+ * @param {number} percentage - Completion percentage (0-100)
+ * @param {number} done - Number of completed tasks
+ * @param {number} total - Total number of tasks
+ * @returns {string} Progress bar with colors
+ */
+function createProgressBar(percentage, done, total) {
+  if (total === 0) return chalk.gray(' TODO');
+
+  const isComplete = percentage === 100;
+  if (isComplete) {
+    return chalk.bgGreen.black(` ${percentage}%, ${done}/${total} tasks complete`);
+  }
+
+  // For partial progress, split the text background based on actual percentage
+  const progressText = `${percentage}%, ${done}/${total} tasks complete`;
+  const textLength = progressText.length;
+  const splitPoint = Math.floor((percentage / 100) * textLength);
+
+  const firstHalf = progressText.substring(0, splitPoint);
+  const secondHalf = progressText.substring(splitPoint);
+
+  // Apply green background to percentage portion, orange to remaining
+  const greenHalf = chalk.bgGreen.black(firstHalf);
+  const orangeHalf = chalk.bgHex('#f59e0b').black(secondHalf);
+
+  return ` ${greenHalf}${orangeHalf}`;
+}
 
 // ─── Data loading (ported from old interactive.js) ───────────────────────────
 
@@ -84,9 +153,14 @@ async function buildTreeItems(sections, expanded, expandedSpecs, specUserStories
     const count = reqs.length;
     const isOpen = expanded[key];
     const arrow = isOpen ? '▾' : '▸';
+    const percentage = total > 0 ? pct(count) : 0;
+    
+    // Use createProgressBar for consistent colored progress bars
+    const progressStr = total > 0 ? ' ' + createProgressBar(percentage, count, total) : ` (${count})`;
+    
     items.push({
       type: isOpen ? 'header' : 'action',
-      name: `${arrow} ${icon} ${label} (${count}${total > 0 ? ' — ' + pct(count) + '%' : ''})`,
+      name: `${arrow} ${icon} ${label}${progressStr}`,
       value: `section:${key}`,
     });
     if (expanded[key]) {
@@ -114,11 +188,27 @@ async function buildTreeItems(sections, expanded, expandedSpecs, specUserStories
     const { getSpecsList } = require('./trui-specifications');
     const specs = await getSpecsList();
     const specsCount = specs.length;
+    
+    // Calculate overall specs progress
+    let specsTotalTasks = 0;
+    let specsDoneTasks = 0;
+    specs.forEach(spec => {
+      if (spec.taskTotal > 0) {
+        specsTotalTasks += spec.taskTotal;
+        specsDoneTasks += spec.taskDone;
+      }
+    });
+    const specsPct = specsTotalTasks > 0 ? Math.round((specsDoneTasks / specsTotalTasks) * 100) : 0;
+    
     const specsOpen = expanded.specifications;
     const specsArrow = specsOpen ? '▾' : '▸';
+    
+    // Use createProgressBar for consistent colored progress bars
+    const specsProgressStr = specsTotalTasks > 0 ? ' ' + createProgressBar(specsPct, specsDoneTasks, specsTotalTasks) : '';
+    
     items.push({
       type: specsOpen ? 'header' : 'action',
-      name: `${specsArrow} 📋 TODO SPECIFICATIONS (${specsCount})`,
+      name: `${specsArrow} 📋 TODO Specifications${specsProgressStr}`,
       value: 'section:specifications',
     });
     if (specsOpen) {
@@ -128,7 +218,7 @@ async function buildTreeItems(sections, expanded, expandedSpecs, specUserStories
         specs.forEach((spec, idx) => {
           let progressStr = '';
           if (spec.taskTotal > 0) {
-            progressStr = chalk.gray(` [${spec.pct}%, ${spec.taskDone}/${spec.taskTotal} tasks complete]`);
+            progressStr = ' ' + createProgressBar(spec.pct, spec.taskDone, spec.taskTotal);
           }
           const isSpecExpanded = expandedSpecs && expandedSpecs.has(idx);
           const specArrow = isSpecExpanded ? '▾' : '▸';
@@ -150,7 +240,7 @@ async function buildTreeItems(sections, expanded, expandedSpecs, specUserStories
                 const phaseTitle = typeof phase === 'string' ? phase : phase.title;
                 let phaseProgress = '';
                 if (phase && typeof phase === 'object' && phase.total > 0) {
-                  phaseProgress = chalk.gray(` [${phase.pct}%, ${phase.done}/${phase.total}]`);
+                  phaseProgress = chalk.gray(` ${phase.pct}%, ${phase.done}/${phase.total}`);
                 }
                 items.push({
                   type: 'info',
@@ -167,9 +257,30 @@ async function buildTreeItems(sections, expanded, expandedSpecs, specUserStories
     items.push({ type: 'header', name: '▸ 📋 TODO SPECIFICATIONS', value: 'section:specifications' });
   }
 
-  addSection('verified', '🎉', 'VERIFIED', sections.verified);
-  addSection('verify', '✅', 'TO VERIFY', sections.verify);
-  addSection('todo', '⏳', 'TODO REQUIREMENTS', sections.todo);
+  addSection('verified', '🎉', 'Verified', sections.verified);
+  addSection('verify', '✅', 'To Verify', sections.verify);
+  
+  // Calculate requirements progress
+  let reqsTotalTasks = 0;
+  let reqsDoneTasks = 0;
+  if (sections.todo && sections.todo.length > 0) {
+    sections.todo.forEach(req => {
+      if (req.total > 0) {
+        reqsTotalTasks += req.total;
+        reqsDoneTasks += req.done;
+      }
+    });
+  }
+  const reqsPct = reqsTotalTasks > 0 ? Math.round((reqsDoneTasks / reqsTotalTasks) * 100) : 0;
+  
+  // Use createProgressBar for consistent colored progress bars
+  const reqsProgressStr = reqsTotalTasks > 0 ? ' ' + createProgressBar(reqsPct, reqsDoneTasks, reqsTotalTasks) : '';
+  
+  const reqsTitle = reqsTotalTasks > 0
+    ? `TODO Requirements${reqsProgressStr}`
+    : 'TODO Requirements';
+  
+  addSection('todo', '⏳', reqsTitle, sections.todo);
 
   if (sections.recycled && sections.recycled.length > 0) {
     addSection('recycled', '♻️', 'RECYCLED', sections.recycled);
@@ -186,6 +297,15 @@ async function showRequirementsTree() {
   const { getOrCreateRequirementsFilePath, getRequirementsPath } = require('vibecodingmachine-core');
   const { getRepoPath } = require('./config');
 
+  // Toggle all items functionality
+  const extraKeys = (str, key, selectedIndex, context) => {
+    if (str === '*' || str === '8') {
+      context.resolveWith({ value: 'toggle-all', selectedIndex });
+      return true;
+    }
+    return false;
+  };
+
   // Resolve requirements file path exactly like loadAllSections does (getRequirementsPath,
   // NOT getOrCreate) so reads and writes always go to the same file regardless of
   // whether it lives inside the repo or in a sibling directory.
@@ -202,12 +322,19 @@ async function showRequirementsTree() {
     return getOrCreateRequirementsFilePath(effectiveRepoPath);
   };
 
-  const expanded = { specifications: false, verified: false, verify: false, todo: true, recycled: false };
+  const expanded = { specifications: false, verified: false, verify: false, todo: false, recycled: false };
   const expandedSpecs = new Set();   // indices of expanded spec items
   const specPhases = new Map();      // specIdx -> string[]
   let sections = await loadAllSections();
   let lastIndex = 0;
 
+  // Load saved states from file
+  const savedStates = await loadCliStates();
+  if (savedStates) {
+    Object.assign(expanded, savedStates.expanded);
+    savedStates.expandedSpecs.forEach(idx => expandedSpecs.add(idx));
+  }
+
   const printHeader = () => {
     console.clear();
     process.stdout.write(chalk.bold.cyan('📋 Requirements\n\n'));
@@ -371,6 +498,60 @@ async function showRequirementsTree() {
       continue;
     }
 
+    // Handle */8: toggle all items
+    if (value === 'toggle-all') {
+      try {
+        const reqPath = await getReqPath();
+        let content = await fs.readFile(reqPath, 'utf8');
+        let hasChanges = false;
+        
+        // Toggle all requirements
+        if (sections.todo && sections.todo.length > 0) {
+          sections.todo.forEach(req => {
+            const title = req.title;
+            if (!title.startsWith('DISABLED: ')) {
+              // Disable all
+              const escaped = title.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+              content = content.replace(new RegExp(`^(###\\s*)${escaped}\\s*$`, 'm'), `$1DISABLED: ${title}`);
+              hasChanges = true;
+            }
+          });
+        }
+        
+        // Toggle all specifications
+        const { getSpecsList } = require('./trui-specifications');
+        const specs = await getSpecsList();
+        for (const spec of specs) {
+          if (spec.taskTotal > 0) {
+            const specDir = spec.path || path.join(await getRepoPath(), 'specs', spec.directory);
+            const tasksMdPath = path.join(specDir, 'tasks.md');
+            if (await fs.pathExists(tasksMdPath)) {
+              let specContent = await fs.readFile(tasksMdPath, 'utf8');
+              const specTitle = spec.title || spec.directory;
+              if (!specContent.includes('DISABLED:')) {
+                // Disable spec
+                specContent = `DISABLED: ${specTitle}\n${specContent}`;
+                hasChanges = true;
+              } else {
+                // Enable spec
+                specContent = specContent.replace(/^DISABLED: .+\n/, '');
+                hasChanges = true;
+              }
+              if (hasChanges) {
+                await fs.writeFile(tasksMdPath, specContent, 'utf8');
+              }
+            }
+          }
+        }
+        
+        if (hasChanges) {
+          sections = await loadAllSections();
+        }
+      } catch (_) {}
+      printHeader();
+      continue;
+    }
+
     // Handle Space: toggle spec enabled/disabled (rename directory DISABLED- prefix)
     if (value.startsWith('toggle-disabled-spec:')) {
       const itemIdx = parseInt(value.split(':')[1], 10);
@@ -434,13 +615,13 @@ async function showRequirementsTree() {
     if (value.startsWith('section:')) {
       const key = value.slice('section:'.length);
       expanded[key] = !expanded[key];
+      await saveCliStates(expanded, expandedSpecs);
       if (!expanded[key]) {
-        // Closing: position cursor back on the header
+        // Closing: position cursor back on header
         const newItems = await buildTreeItems(sections, expanded, expandedSpecs, specPhases);
         const headerIdx = newItems.findIndex(item => item.value === `section:${key}`);
         if (headerIdx !== -1) lastIndex = headerIdx;
       }
-      // Opening: lastIndex stays pointing at header pos; showQuickMenu auto-advances past info
       printHeader();
       continue;
     }
@@ -465,6 +646,7 @@ async function showRequirementsTree() {
     if (value.startsWith('expand-section:')) {
       const key = value.slice('expand-section:'.length);
       expanded[key] = true;
+      await saveCliStates(expanded, expandedSpecs);
       printHeader();
       continue;
     }
@@ -473,6 +655,7 @@ async function showRequirementsTree() {
     if (value.startsWith('collapse-section:')) {
       const key = value.slice('collapse-section:'.length);
       expanded[key] = false;
+      await saveCliStates(expanded, expandedSpecs);
       // Rebuild to find the now-selectable (action) section header position
       const newItems = await buildTreeItems(sections, expanded, expandedSpecs, specPhases);
       const headerIdx = newItems.findIndex(item => item.value === `section:${key}`);
@@ -485,6 +668,7 @@ async function showRequirementsTree() {
     if (value.startsWith('expand-spec:')) {
       const specIdx = parseInt(value.split(':')[1], 10);
       expandedSpecs.add(specIdx);
+      await saveCliStates(expanded, expandedSpecs);
       if (!specPhases.has(specIdx)) {
         try {
           const { getSpecsList, extractPhases } = require('./trui-specifications');
@@ -501,6 +685,7 @@ async function showRequirementsTree() {
     if (value.startsWith('collapse-spec:')) {
       const specIdx = parseInt(value.split(':')[1], 10);
       expandedSpecs.delete(specIdx);
+      await saveCliStates(expanded, expandedSpecs);
       // Rebuild to find the now-selectable spec item position
       const newItems = await buildTreeItems(sections, expanded, expandedSpecs, specPhases);
       const specItemIdx = newItems.findIndex(item => item.value === `spec:${specIdx}`);

package/src/utils/trui-specifications.js

@@ -8,6 +8,36 @@ const chalk = require('chalk');
 const fs = require('fs');
 const path = require('path');
 const { showQuickMenu } = require('./trui-quick-menu');
+
+/**
+ * Create progress bar string with green/orange gradient based on completion percentage
+ * @param {number} percentage - Completion percentage (0-100)
+ * @param {number} done - Number of completed tasks
+ * @param {number} total - Total number of tasks
+ * @returns {string} Progress bar with colors
+ */
+function createProgressBar(percentage, done, total) {
+  if (total === 0) return chalk.gray(' TODO');
+
+  const isComplete = percentage === 100;
+  if (isComplete) {
+    return chalk.bgGreen.black(` ${percentage}%, ${done}/${total} tasks complete`);
+  }
+
+  // For partial progress, split the text background based on actual percentage
+  const progressText = `${percentage}%, ${done}/${total} tasks complete`;
+  const textLength = progressText.length;
+  const splitPoint = Math.floor((percentage / 100) * textLength);
+
+  const firstHalf = progressText.substring(0, splitPoint);
+  const secondHalf = progressText.substring(splitPoint);
+
+  // Apply green background to percentage portion, orange to remaining
+  const greenHalf = chalk.bgGreen.black(firstHalf);
+  const orangeHalf = chalk.bgHex('#f59e0b').black(secondHalf);
+
+  return ` ${greenHalf}${orangeHalf}`;
+}
 const { debugLogger } = require('./trui-debug');
 
 /**
@@ -167,7 +197,7 @@ async function showSpecificationsList() {
   specs.forEach((spec, index) => {
     let progressStr = '';
     if (spec.taskTotal > 0) {
-      progressStr = chalk.gray(` [${spec.pct}%, ${spec.taskDone}/${spec.taskTotal} tasks complete]`);
+      progressStr = ' ' + createProgressBar(spec.pct, spec.taskDone, spec.taskTotal);
     }
     items.push({
       type: 'action',