@girardmedia/bootspring 1.2.0 → 2.0.3

package/cli/visualize.js

@@ -0,0 +1,527 @@
+/**
+ * Bootspring Visualize Command
+ * Terminal-based workflow visualization and status display
+ *
+ * @package bootspring
+ * @command visualize
+ */
+
+const fs = require('fs');
+const path = require('path');
+const config = require('../core/config');
+const utils = require('../core/utils');
+
+// Colors
+const c = {
+  reset: '\x1b[0m',
+  bold: '\x1b[1m',
+  dim: '\x1b[2m',
+  green: '\x1b[32m',
+  blue: '\x1b[34m',
+  yellow: '\x1b[33m',
+  cyan: '\x1b[36m',
+  red: '\x1b[31m',
+  magenta: '\x1b[35m',
+  white: '\x1b[37m',
+  bgGreen: '\x1b[42m',
+  bgYellow: '\x1b[43m',
+  bgRed: '\x1b[41m',
+  bgBlue: '\x1b[44m',
+  bgCyan: '\x1b[46m'
+};
+
+// Box drawing characters
+const box = {
+  topLeft: '┌',
+  topRight: '┐',
+  bottomLeft: '└',
+  bottomRight: '┘',
+  horizontal: '─',
+  vertical: '│',
+  teeRight: '├',
+  teeLeft: '┤',
+  teeDown: '┬',
+  teeUp: '┴',
+  cross: '┼',
+  arrow: '→',
+  arrowDown: '↓',
+  check: '✓',
+  cross_mark: '✗',
+  circle: '○',
+  filledCircle: '●',
+  diamond: '◆',
+  square: '■'
+};
+
+/**
+ * Get all workflow states
+ */
+function getWorkflowStates(projectRoot) {
+  const workflows = {};
+  const workflowNames = ['onboard', 'analyze', 'audit', 'preseed', 'seed', 'deploy', 'loop'];
+
+  for (const name of workflowNames) {
+    const stateFile = path.join(projectRoot, '.bootspring', name, 'workflow-state.json');
+
+    if (fs.existsSync(stateFile)) {
+      try {
+        const state = JSON.parse(fs.readFileSync(stateFile, 'utf-8'));
+        const phases = state.phases || {};
+        const phaseList = Object.entries(phases);
+        const completed = phaseList.filter(([, p]) => p.status === 'completed').length;
+        const total = phaseList.length;
+
+        workflows[name] = {
+          exists: true,
+          status: state.status || 'unknown',
+          progress: total > 0 ? Math.round((completed / total) * 100) : 0,
+          phases: phases,
+          lastUpdated: state.lastUpdated,
+          isComplete: completed === total && total > 0
+        };
+      } catch {
+        workflows[name] = { exists: true, error: true };
+      }
+    } else {
+      workflows[name] = { exists: false };
+    }
+  }
+
+  // Check loop session state separately
+  const loopStateFile = path.join(projectRoot, '.bootspring', 'loop', 'session-state.json');
+  if (fs.existsSync(loopStateFile)) {
+    try {
+      const loopState = JSON.parse(fs.readFileSync(loopStateFile, 'utf-8'));
+      workflows.loop = {
+        exists: true,
+        status: loopState.status || 'idle',
+        progress: loopState.maxIterations > 0
+          ? Math.round((loopState.iteration / loopState.maxIterations) * 100)
+          : 0,
+        iteration: loopState.iteration,
+        maxIterations: loopState.maxIterations,
+        lastUpdated: loopState.lastUpdated,
+        isComplete: loopState.status === 'completed'
+      };
+    } catch {
+      // Keep existing state
+    }
+  }
+
+  return workflows;
+}
+
+/**
+ * Get todo stats
+ */
+function getTodoStats(projectRoot) {
+  const todoPath = path.join(projectRoot, 'todo.md');
+  if (!fs.existsSync(todoPath)) {
+    return { exists: false };
+  }
+
+  try {
+    const content = fs.readFileSync(todoPath, 'utf-8');
+    const pending = (content.match(/- \[ \]/g) || []).length;
+    const completed = (content.match(/- \[x\]/gi) || []).length;
+
+    return {
+      exists: true,
+      pending,
+      completed,
+      total: pending + completed,
+      progress: pending + completed > 0
+        ? Math.round((completed / (pending + completed)) * 100)
+        : 0
+    };
+  } catch {
+    return { exists: true, error: true };
+  }
+}
+
+/**
+ * Get PRD stats
+ */
+function getPRDStats(projectRoot) {
+  const prdPath = path.join(projectRoot, 'tasks', 'prd.json');
+  if (!fs.existsSync(prdPath)) {
+    return { exists: false };
+  }
+
+  try {
+    const prd = JSON.parse(fs.readFileSync(prdPath, 'utf-8'));
+    const stories = prd.stories || [];
+    const completed = stories.filter(s => s.status === 'complete').length;
+
+    return {
+      exists: true,
+      name: prd.name,
+      total: stories.length,
+      completed,
+      pending: stories.length - completed,
+      progress: stories.length > 0
+        ? Math.round((completed / stories.length) * 100)
+        : 0
+    };
+  } catch {
+    return { exists: true, error: true };
+  }
+}
+
+/**
+ * Draw a progress bar
+ */
+function drawProgressBar(progress, width = 20, filled = '█', empty = '░') {
+  const filledCount = Math.round((progress / 100) * width);
+  const emptyCount = width - filledCount;
+
+  let color = c.green;
+  if (progress < 50) color = c.red;
+  else if (progress < 80) color = c.yellow;
+
+  return `${color}${filled.repeat(filledCount)}${c.dim}${empty.repeat(emptyCount)}${c.reset}`;
+}
+
+/**
+ * Draw workflow pipeline visualization
+ */
+function drawWorkflowPipeline(workflows) {
+  const pipelineOrder = ['onboard', 'preseed', 'seed', 'analyze', 'audit', 'deploy'];
+
+  console.log(`\n${c.cyan}${c.bold}Workflow Pipeline${c.reset}\n`);
+
+  // Draw pipeline
+  let pipeline = '';
+  let statusLine = '';
+
+  for (let i = 0; i < pipelineOrder.length; i++) {
+    const name = pipelineOrder[i];
+    const workflow = workflows[name];
+    const shortName = name.slice(0, 7).padEnd(7);
+
+    let statusIcon, statusColor;
+    if (!workflow.exists) {
+      statusIcon = box.circle;
+      statusColor = c.dim;
+    } else if (workflow.error) {
+      statusIcon = box.cross_mark;
+      statusColor = c.red;
+    } else if (workflow.isComplete) {
+      statusIcon = box.check;
+      statusColor = c.green;
+    } else if (workflow.progress > 0) {
+      statusIcon = box.filledCircle;
+      statusColor = c.yellow;
+    } else {
+      statusIcon = box.circle;
+      statusColor = c.dim;
+    }
+
+    // Build pipeline segment
+    const boxContent = `${statusColor}${statusIcon}${c.reset} ${shortName}`;
+    const boxWidth = 11;
+
+    pipeline += `${box.topLeft}${box.horizontal.repeat(boxWidth)}${box.topRight}`;
+    if (i < pipelineOrder.length - 1) {
+      pipeline += `${c.dim}${box.arrow}${c.reset}`;
+    }
+
+    statusLine += `${box.vertical} ${boxContent} ${box.vertical}`;
+    if (i < pipelineOrder.length - 1) {
+      statusLine += ' ';
+    }
+  }
+
+  console.log(pipeline);
+  console.log(statusLine);
+
+  // Bottom border
+  let bottomLine = '';
+  for (let i = 0; i < pipelineOrder.length; i++) {
+    bottomLine += `${box.bottomLeft}${box.horizontal.repeat(11)}${box.bottomRight}`;
+    if (i < pipelineOrder.length - 1) {
+      bottomLine += ' ';
+    }
+  }
+  console.log(bottomLine);
+
+  // Legend
+  console.log(`\n${c.dim}Legend: ${c.green}${box.check}${c.reset}${c.dim} Complete  ${c.yellow}${box.filledCircle}${c.reset}${c.dim} In Progress  ${box.circle} Not Started  ${c.red}${box.cross_mark}${c.reset}${c.dim} Error${c.reset}`);
+}
+
+/**
+ * Draw workflow details
+ */
+function drawWorkflowDetails(workflows) {
+  console.log(`\n${c.cyan}${c.bold}Workflow Details${c.reset}\n`);
+
+  for (const [name, workflow] of Object.entries(workflows)) {
+    if (!workflow.exists) continue;
+
+    const statusIcon = workflow.isComplete ? `${c.green}${box.check}${c.reset}` :
+      workflow.progress > 0 ? `${c.yellow}${box.filledCircle}${c.reset}` :
+        `${c.dim}${box.circle}${c.reset}`;
+
+    const progress = workflow.progress || 0;
+    const progressBar = drawProgressBar(progress, 15);
+
+    console.log(`  ${statusIcon} ${c.bold}${name.padEnd(10)}${c.reset} ${progressBar} ${progress}%`);
+
+    // Show phases if available
+    if (workflow.phases && Object.keys(workflow.phases).length > 0) {
+      const phaseEntries = Object.entries(workflow.phases);
+      for (let i = 0; i < phaseEntries.length; i++) {
+        const [phaseName, phase] = phaseEntries[i];
+        const isLast = i === phaseEntries.length - 1;
+        const prefix = isLast ? '    └' : '    ├';
+
+        const phaseIcon = phase.status === 'completed' ? `${c.green}${box.check}${c.reset}` :
+          phase.status === 'in_progress' ? `${c.yellow}${box.arrow}${c.reset}` :
+            `${c.dim}${box.circle}${c.reset}`;
+
+        console.log(`${prefix}─ ${phaseIcon} ${c.dim}${phaseName}${c.reset}`);
+      }
+    }
+
+    // Show loop-specific info
+    if (name === 'loop' && workflow.iteration !== undefined) {
+      console.log(`    ${c.dim}Iteration: ${workflow.iteration}/${workflow.maxIterations}${c.reset}`);
+    }
+  }
+}
+
+/**
+ * Draw task overview
+ */
+function drawTaskOverview(todoStats, prdStats) {
+  console.log(`\n${c.cyan}${c.bold}Task Overview${c.reset}\n`);
+
+  // Todos
+  if (todoStats.exists && !todoStats.error) {
+    const todoBar = drawProgressBar(todoStats.progress, 15);
+    console.log(`  ${c.bold}Todos${c.reset}`);
+    console.log(`    ${todoBar} ${todoStats.completed}/${todoStats.total} (${todoStats.progress}%)`);
+    if (todoStats.pending > 0) {
+      console.log(`    ${c.yellow}${todoStats.pending} pending${c.reset}`);
+    }
+  } else {
+    console.log(`  ${c.dim}Todos: Not configured${c.reset}`);
+  }
+
+  console.log();
+
+  // PRD
+  if (prdStats.exists && !prdStats.error) {
+    const prdBar = drawProgressBar(prdStats.progress, 15);
+    console.log(`  ${c.bold}PRD: ${prdStats.name || 'Unnamed'}${c.reset}`);
+    console.log(`    ${prdBar} ${prdStats.completed}/${prdStats.total} stories (${prdStats.progress}%)`);
+    if (prdStats.pending > 0) {
+      console.log(`    ${c.yellow}${prdStats.pending} stories remaining${c.reset}`);
+    }
+  } else {
+    console.log(`  ${c.dim}PRD: Not configured${c.reset}`);
+  }
+}
+
+/**
+ * Draw ASCII art project status
+ */
+function drawProjectStatus(projectRoot, cfg) {
+  const projectName = cfg.project?.name || path.basename(projectRoot);
+
+  console.log(`
+${c.cyan}╔══════════════════════════════════════════════════════════════╗
+║                                                                ║
+║   ${c.bold}⚡ BOOTSPRING PROJECT STATUS${c.reset}${c.cyan}                               ║
+║                                                                ║
+║   ${c.white}${projectName.padEnd(52)}${c.cyan}   ║
+║                                                                ║
+╚══════════════════════════════════════════════════════════════╝${c.reset}
+`);
+}
+
+/**
+ * Draw dependency graph (simplified)
+ */
+function drawDependencyGraph() {
+  console.log(`\n${c.cyan}${c.bold}Workflow Dependencies${c.reset}\n`);
+
+  console.log(`
+  ${c.dim}┌─────────┐${c.reset}
+  ${c.dim}│${c.reset} onboard ${c.dim}│${c.reset}
+  ${c.dim}└────┬────┘${c.reset}
+       ${c.dim}│${c.reset}
+       ${c.dim}▼${c.reset}
+  ${c.dim}┌─────────┐     ┌─────────┐${c.reset}
+  ${c.dim}│${c.reset} preseed ${c.dim}│────▶│${c.reset}   seed  ${c.dim}│${c.reset}
+  ${c.dim}└────┬────┘     └────┬────┘${c.reset}
+       ${c.dim}│               │${c.reset}
+       ${c.dim}└───────┬───────┘${c.reset}
+               ${c.dim}│${c.reset}
+               ${c.dim}▼${c.reset}
+          ${c.dim}┌─────────┐${c.reset}
+          ${c.dim}│${c.reset} analyze ${c.dim}│${c.reset}
+          ${c.dim}└────┬────┘${c.reset}
+               ${c.dim}│${c.reset}
+               ${c.dim}▼${c.reset}
+          ${c.dim}┌─────────┐${c.reset}
+          ${c.dim}│${c.reset}  audit  ${c.dim}│${c.reset}
+          ${c.dim}└────┬────┘${c.reset}
+               ${c.dim}│${c.reset}
+               ${c.dim}▼${c.reset}
+          ${c.dim}┌─────────┐${c.reset}
+          ${c.dim}│${c.reset} deploy  ${c.dim}│${c.reset}
+          ${c.dim}└─────────┘${c.reset}
+`);
+}
+
+/**
+ * Show full visualization
+ */
+function showVisualization(projectRoot, options = {}) {
+  const cfg = config.load();
+
+  // Get all states
+  const workflows = getWorkflowStates(projectRoot);
+  const todoStats = getTodoStats(projectRoot);
+  const prdStats = getPRDStats(projectRoot);
+
+  // Draw visualizations
+  drawProjectStatus(projectRoot, cfg);
+
+  if (options.pipeline !== false) {
+    drawWorkflowPipeline(workflows);
+  }
+
+  if (options.details !== false) {
+    drawWorkflowDetails(workflows);
+  }
+
+  if (options.tasks !== false) {
+    drawTaskOverview(todoStats, prdStats);
+  }
+
+  if (options.graph) {
+    drawDependencyGraph();
+  }
+
+  // Timestamp
+  console.log(`\n${c.dim}Generated: ${new Date().toISOString()}${c.reset}\n`);
+}
+
+/**
+ * Watch mode - refresh visualization periodically
+ */
+async function watchMode(projectRoot, interval = 2000) {
+  const readline = require('readline');
+
+  console.clear();
+  console.log(`${c.cyan}${c.bold}⚡ Bootspring Live View${c.reset}`);
+  console.log(`${c.dim}Press Ctrl+C to exit${c.reset}\n`);
+
+  const refresh = () => {
+    console.clear();
+    showVisualization(projectRoot, { graph: false });
+    console.log(`${c.dim}Refreshing every ${interval / 1000}s...${c.reset}`);
+  };
+
+  refresh();
+  const timer = setInterval(refresh, interval);
+
+  process.on('SIGINT', () => {
+    clearInterval(timer);
+    console.log(`\n${c.dim}Exiting live view...${c.reset}`);
+    process.exit(0);
+  });
+}
+
+/**
+ * Show help
+ */
+function showHelp() {
+  console.log(`
+${c.cyan}${c.bold}⚡ Bootspring Visualize${c.reset}
+${c.dim}Terminal-based workflow visualization${c.reset}
+
+${c.bold}Usage:${c.reset}
+  bootspring visualize [options]
+
+${c.bold}Options:${c.reset}
+  --watch           Live updating view
+  --interval <ms>   Refresh interval for watch mode (default: 2000)
+  --graph           Show workflow dependency graph
+  --pipeline        Show only pipeline view
+  --details         Show only workflow details
+  --tasks           Show only task overview
+  --json            Output as JSON
+
+${c.bold}Examples:${c.reset}
+  bootspring visualize                    # Full visualization
+  bootspring visualize --watch            # Live updating view
+  bootspring visualize --graph            # Include dependency graph
+  bootspring visualize --pipeline         # Pipeline only
+`);
+}
+
+/**
+ * Run visualize command
+ */
+async function run(args) {
+  const parsedArgs = utils.parseArgs(args);
+  const subcommand = parsedArgs._[0];
+
+  if (subcommand === 'help' || parsedArgs.help || parsedArgs.h) {
+    showHelp();
+    return;
+  }
+
+  const cfg = config.load();
+  const projectRoot = cfg._projectRoot;
+
+  if (parsedArgs.json) {
+    const data = {
+      workflows: getWorkflowStates(projectRoot),
+      todos: getTodoStats(projectRoot),
+      prd: getPRDStats(projectRoot),
+      timestamp: new Date().toISOString()
+    };
+    console.log(JSON.stringify(data, null, 2));
+    return;
+  }
+
+  if (parsedArgs.watch) {
+    const interval = parseInt(parsedArgs.interval, 10) || 2000;
+    await watchMode(projectRoot, interval);
+    return;
+  }
+
+  const options = {
+    pipeline: !parsedArgs.details && !parsedArgs.tasks,
+    details: !parsedArgs.pipeline && !parsedArgs.tasks,
+    tasks: !parsedArgs.pipeline && !parsedArgs.details,
+    graph: parsedArgs.graph
+  };
+
+  // If specific view requested, only show that
+  if (parsedArgs.pipeline) {
+    options.details = false;
+    options.tasks = false;
+  } else if (parsedArgs.details) {
+    options.pipeline = false;
+    options.tasks = false;
+  } else if (parsedArgs.tasks) {
+    options.pipeline = false;
+    options.details = false;
+  }
+
+  showVisualization(projectRoot, options);
+}
+
+module.exports = {
+  run,
+  getWorkflowStates,
+  getTodoStats,
+  getPRDStats,
+  drawProgressBar,
+  showVisualization
+};