agileflow 2.90.6 → 2.90.7

package/CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.90.7] - 2026-01-17
+
+### Fixed
+- Fix TUI bouncing with in-place rendering
+
 ## [2.90.6] - 2026-01-17
 
 ### Changed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agileflow",
-  "version": "2.90.6",
+  "version": "2.90.7",
   "description": "AI-driven agile development system for Claude Code, Cursor, Windsurf, and more",
   "keywords": [
     "agile",

package/scripts/tui/index.js

@@ -20,8 +20,7 @@
  *   1-9 - Switch session focus
  */
 
-// Ink-based TUI is disabled due to React version conflicts in monorepo
-// The simple-tui provides responsive layouts and works reliably
+// Use simple-tui (pure Node.js) - Ink has React version conflicts in monorepo
 const useInk = false;
 
 /**
@@ -46,8 +45,7 @@ async function main() {
     // Wait for exit
     await waitUntilExit();
   } else {
-    // Fallback to simple TUI (pure Node.js, no React)
-    console.log('React/Ink not available, using simple TUI...');
+    // Use simple TUI (pure Node.js, no React dependencies)
     const { main: simpleTuiMain } = require('./simple-tui');
     simpleTuiMain();
   }

package/scripts/tui/simple-tui.js

@@ -55,6 +55,7 @@ const ANSI = {
   showCursor: '\x1b[?25h',
   saveCursor: '\x1b[s',
   restoreCursor: '\x1b[u',
+  clearLine: '\x1b[K', // Clear from cursor to end of line
 };
 
 // Get project root
@@ -213,7 +214,8 @@ class SimpleTUI {
       this.render();
     });
 
-    // Initial render
+    // Clear screen once at start, then render
+    process.stdout.write(ANSI.clear + ANSI.home);
     this.render();
 
     // Update loop
@@ -290,8 +292,8 @@ class SimpleTUI {
     const height = process.stdout.rows || 24;
     const output = [];
 
-    // Clear screen
-    output.push(ANSI.clear + ANSI.home);
+    // Move to home position (don't clear - prevents bouncing)
+    output.push(ANSI.home);
 
     // Determine layout mode based on terminal width
     const isWide = width >= 100;
@@ -317,8 +319,9 @@ class SimpleTUI {
       this.renderStacked(output, width, height, sessions, loopStatus, agentEvents, isNarrow);
     }
 
-    // Output everything
-    process.stdout.write(output.join('\n'));
+    // Output everything with line clearing to prevent artifacts
+    const outputWithClear = output.map(line => line + ANSI.clearLine);
+    process.stdout.write(outputWithClear.join('\n'));
   }
 
   renderSideBySide(output, width, height, sessions, loopStatus, agentEvents) {

package/tools/cli/commands/tui.js

@@ -1,287 +1,56 @@
-#!/usr/bin/env node
-
 /**
- * AgileFlow TUI Dashboard
- *
- * Static dashboard view - prints once and exits.
- * No continuous refresh, no screen clearing, scrollable output.
+ * AgileFlow CLI - TUI Command
  *
- * Usage: npx agileflow tui
+ * Launches the Terminal User Interface for real-time session monitoring.
+ * Uses React/Ink for a proper live-updating terminal UI.
  */
 
-const path = require('path');
+const path = require('node:path');
+const { spawn } = require('node:child_process');
 const fs = require('fs');
-const { c: colors } = require('../../../lib/colors');
-
-function showHeader(version) {
-  console.log('');
-  console.log(
-    `${colors.orange}${colors.bold}  ╔═══════════════════════════════════════════╗${colors.reset}`
-  );
-  console.log(
-    `${colors.orange}${colors.bold}  ║         AgileFlow Dashboard               ║${colors.reset}`
-  );
-  console.log(
-    `${colors.orange}${colors.bold}  ╚═══════════════════════════════════════════╝${colors.reset}`
-  );
-  if (version) {
-    console.log(`${colors.dim}  v${version}${colors.reset}`);
-  }
-  console.log('');
-}
-
-async function loadStatus() {
-  const statusPath = path.join(process.cwd(), 'docs', '09-agents', 'status.json');
-
-  if (!fs.existsSync(statusPath)) {
-    return null;
-  }
-
-  try {
-    const content = fs.readFileSync(statusPath, 'utf8');
-    return JSON.parse(content);
-  } catch (err) {
-    return null;
-  }
-}
-
-function loadLoopStatus() {
-  const loopPath = path.join(process.cwd(), 'docs', '09-agents', 'loop-status.json');
-
-  if (!fs.existsSync(loopPath)) {
-    return null;
-  }
-
-  try {
-    const content = fs.readFileSync(loopPath, 'utf8');
-    return JSON.parse(content);
-  } catch (err) {
-    return null;
-  }
-}
-
-function getStatusColor(status) {
-  switch (status) {
-    case 'completed':
-    case 'done':
-      return colors.green;
-    case 'in_progress':
-    case 'in-progress':
-      return colors.yellow;
-    case 'blocked':
-      return colors.red;
-    case 'ready':
-      return colors.cyan;
-    default:
-      return colors.dim;
-  }
-}
-
-function getStatusSymbol(status) {
-  switch (status) {
-    case 'completed':
-    case 'done':
-      return '✓';
-    case 'in_progress':
-    case 'in-progress':
-      return '▶';
-    case 'blocked':
-      return '✗';
-    case 'ready':
-      return '○';
-    default:
-      return '·';
-  }
-}
-
-function formatStory(story, compact = false) {
-  const statusColor = getStatusColor(story.status);
-  const symbol = getStatusSymbol(story.status);
-  const id = story.id || story.story_id || 'Unknown';
-  const title = story.title || story.summary || 'Untitled';
-  const status = (story.status || 'unknown').replace(/_/g, ' ');
-  const owner = story.owner || '-';
-
-  if (compact) {
-    const truncTitle = title.length > 35 ? title.substring(0, 32) + '...' : title;
-    return `  ${statusColor}${symbol}${colors.reset} ${colors.bold}${id}${colors.reset} ${truncTitle}`;
-  }
-
-  return `  ${statusColor}${symbol}${colors.reset} ${colors.bold}${id}${colors.reset} ${title.substring(0, 50)}${title.length > 50 ? '...' : ''}
-     ${statusColor}${status}${colors.reset} ${colors.dim}│ Owner: ${owner}${colors.reset}`;
-}
-
-function drawProgressBar(percent, width = 20) {
-  const filled = Math.round((percent / 100) * width);
-  const empty = width - filled;
-  const bar = '█'.repeat(filled) + '░'.repeat(empty);
-
-  let color = colors.red;
-  if (percent >= 80) color = colors.green;
-  else if (percent >= 50) color = colors.yellow;
-  else if (percent >= 20) color = colors.cyan;
-
-  return `${color}${bar}${colors.reset} ${percent}%`;
-}
-
-async function showDashboard(options = {}) {
-  const version = options.version;
-  const compact = options.compact || false;
-
-  showHeader(version);
 
-  const status = await loadStatus();
-  const loopStatus = loadLoopStatus();
-
-  if (!status) {
-    console.log(
-      `${colors.dim}  No status.json found. Run /agileflow:story to create stories.${colors.reset}`
-    );
-    console.log('');
-    return;
-  }
-
-  // Count stories by status
-  const stories = Object.values(status).filter(
-    s => s && typeof s === 'object' && (s.id || s.story_id)
-  );
-  const counts = {
-    in_progress: stories.filter(s => ['in_progress', 'in-progress'].includes(s.status)).length,
-    blocked: stories.filter(s => s.status === 'blocked').length,
-    ready: stories.filter(s => s.status === 'ready').length,
-    completed: stories.filter(s => ['completed', 'done'].includes(s.status)).length,
-  };
-
-  const total = stories.length;
-  const completionPct = total > 0 ? Math.round((counts.completed / total) * 100) : 0;
+module.exports = {
+  name: 'tui',
+  description: 'Launch Terminal User Interface for session monitoring',
+  options: [['-d, --directory <path>', 'Project directory (default: current directory)']],
+  action: async options => {
+    const directory = path.resolve(options.directory || '.');
+
+    // Check if AgileFlow is installed
+    const agileflowDir = path.join(directory, '.agileflow');
+    if (!fs.existsSync(agileflowDir)) {
+      console.error('Error: AgileFlow is not installed in this directory');
+      console.log("Run 'npx agileflow setup' first\n");
+      process.exit(1);
+    }
 
-  // Summary Section
-  console.log(`${colors.bold}  SUMMARY${colors.reset}`);
-  console.log(`  ${'─'.repeat(45)}`);
-  console.log(
-    `  ${colors.yellow}● In Progress:${colors.reset} ${counts.in_progress}   ${colors.red}● Blocked:${colors.reset} ${counts.blocked}   ${colors.cyan}● Ready:${colors.reset} ${counts.ready}   ${colors.green}● Done:${colors.reset} ${counts.completed}`
-  );
-  console.log(`  Progress: ${drawProgressBar(completionPct)}`);
-  console.log('');
+    // Find the TUI script - relative to this file in packages/cli
+    const cliRoot = path.join(__dirname, '..', '..', '..');
+    const tuiScript = path.join(cliRoot, 'scripts', 'tui', 'index.js');
 
-  // Loop Status (if active)
-  if (loopStatus && loopStatus.state && loopStatus.state !== 'idle') {
-    const stateColor =
-      loopStatus.state === 'running'
-        ? colors.green
-        : loopStatus.state === 'paused'
-          ? colors.yellow
-          : colors.dim;
-    console.log(`${colors.bold}  ACTIVE LOOP${colors.reset}`);
-    console.log(`  ${'─'.repeat(45)}`);
-    console.log(
-      `  ${stateColor}●${colors.reset} ${loopStatus.epic || '-'} / ${loopStatus.story || '-'}`
-    );
-    if (loopStatus.progress !== undefined) {
-      console.log(`  Progress: ${drawProgressBar(loopStatus.progress)}`);
+    if (!fs.existsSync(tuiScript)) {
+      console.error('Error: TUI script not found at', tuiScript);
+      process.exit(1);
     }
-    console.log('');
-  }
-
-  // In Progress Stories
-  const inProgressStories = stories.filter(s => ['in_progress', 'in-progress'].includes(s.status));
-  if (inProgressStories.length > 0) {
-    console.log(`${colors.bold}  ${colors.yellow}IN PROGRESS${colors.reset}`);
-    console.log(`  ${'─'.repeat(45)}`);
-    inProgressStories.forEach(story => {
-      console.log(formatStory(story, compact));
-    });
-    console.log('');
-  }
 
-  // Blocked Stories
-  const blockedStories = stories.filter(s => s.status === 'blocked');
-  if (blockedStories.length > 0) {
-    console.log(`${colors.bold}  ${colors.red}BLOCKED${colors.reset}`);
-    console.log(`  ${'─'.repeat(45)}`);
-    blockedStories.forEach(story => {
-      console.log(formatStory(story, compact));
+    // Spawn the TUI process from packages/cli directory to use correct deps
+    const child = spawn('node', [tuiScript], {
+      cwd: cliRoot, // Run from packages/cli to use its node_modules
+      stdio: 'inherit',
+      env: {
+        ...process.env,
+        FORCE_COLOR: '1',
+        AGILEFLOW_PROJECT_DIR: directory, // Pass project dir as env var
+      },
     });
-    console.log('');
-  }
 
-  // Ready Stories (up to 5)
-  const readyStories = stories.filter(s => s.status === 'ready').slice(0, 5);
-  if (readyStories.length > 0) {
-    const moreReady =
-      counts.ready > 5 ? ` ${colors.dim}(+${counts.ready - 5} more)${colors.reset}` : '';
-    console.log(`${colors.bold}  ${colors.cyan}READY${colors.reset}${moreReady}`);
-    console.log(`  ${'─'.repeat(45)}`);
-    readyStories.forEach(story => {
-      console.log(formatStory(story, compact));
+    child.on('error', err => {
+      console.error('Error launching TUI:', err.message);
+      process.exit(1);
     });
-    console.log('');
-  }
 
-  // Completed Stories (last 3)
-  const completedStories = stories
-    .filter(s => ['completed', 'done'].includes(s.status))
-    .slice(-3)
-    .reverse();
-  if (completedStories.length > 0) {
-    const moreCompleted =
-      counts.completed > 3 ? ` ${colors.dim}(+${counts.completed - 3} more)${colors.reset}` : '';
-    console.log(`${colors.bold}  ${colors.green}RECENTLY COMPLETED${colors.reset}${moreCompleted}`);
-    console.log(`  ${'─'.repeat(45)}`);
-    completedStories.forEach(story => {
-      console.log(formatStory(story, compact));
+    child.on('exit', code => {
+      process.exit(code || 0);
     });
-    console.log('');
-  }
-
-  // Footer
-  console.log(`${colors.dim}  ─────────────────────────────────────────────${colors.reset}`);
-  console.log(`${colors.dim}  /agileflow:board       Interactive kanban view${colors.reset}`);
-  console.log(`${colors.dim}  /agileflow:story:list  Full story listing${colors.reset}`);
-  console.log('');
-}
-
-async function main(options = {}) {
-  const args = process.argv.slice(2);
-
-  // Check for help flag
-  if (args.includes('--help') || args.includes('-h')) {
-    console.log('');
-    console.log(`${colors.bold}AgileFlow TUI Dashboard${colors.reset}`);
-    console.log('');
-    console.log(`${colors.bold}Usage:${colors.reset}`);
-    console.log('  npx agileflow tui           Show dashboard');
-    console.log('  npx agileflow tui --compact Compact view');
-    console.log('  npx agileflow tui --help    Show this help');
-    console.log('');
-    return;
-  }
-
-  const compact = args.includes('--compact') || args.includes('-c');
-
-  // Get version from package.json
-  let version;
-  try {
-    const pkgPath = path.join(__dirname, '..', '..', '..', 'package.json');
-    const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
-    version = pkg.version;
-  } catch (e) {
-    version = null;
-  }
-
-  await showDashboard({ version, compact, ...options });
-}
-
-// Run directly if executed as script
-if (require.main === module) {
-  main().catch(err => {
-    console.error(`${colors.red}Error:${colors.reset}`, err.message);
-    process.exit(1);
-  });
-}
-
-module.exports = {
-  name: 'tui',
-  description: 'Show project dashboard',
-  action: main,
+  },
 };