agileflow 2.89.2 → 2.90.0

package/scripts/tui/panels/SessionPanel.js

@@ -0,0 +1,178 @@
+'use strict';
+
+const React = require('react');
+const { Box, Text } = require('ink');
+const fs = require('fs');
+const path = require('path');
+
+// Get session-manager functions
+let getSessions;
+try {
+  const sessionManager = require('../../session-manager');
+  getSessions = sessionManager.getSessions;
+} catch (e) {
+  // Fallback if module not found
+  getSessions = () => ({ sessions: [], cleaned: 0 });
+}
+
+/**
+ * Get thread type color
+ */
+function getThreadColor(threadType) {
+  const colors = {
+    base: 'green',
+    parallel: 'cyan',
+    chained: 'yellow',
+    fusion: 'magenta',
+    big: 'blue',
+    long: 'white'
+  };
+  return colors[threadType] || 'gray';
+}
+
+/**
+ * Get status color
+ */
+function getStatusColor(active, current) {
+  if (current) return 'green';
+  if (active) return 'cyan';
+  return 'gray';
+}
+
+/**
+ * Format session for display
+ */
+function formatSession(session) {
+  const { id, branch, story, nickname, thread_type, active, current, is_main } = session;
+
+  // Build display name
+  let displayName = `Session ${id}`;
+  if (nickname) displayName += ` "${nickname}"`;
+  if (is_main) displayName += ' [main]';
+
+  return {
+    displayName,
+    branch: branch || 'unknown',
+    story: story || 'none',
+    threadType: thread_type || 'base',
+    active,
+    current
+  };
+}
+
+/**
+ * SessionRow component - displays a single session
+ */
+function SessionRow({ session }) {
+  const fmt = formatSession(session);
+  const statusColor = getStatusColor(fmt.active, fmt.current);
+  const threadColor = getThreadColor(fmt.threadType);
+
+  // Current session indicator
+  const indicator = fmt.current ? '▶' : ' ';
+  const indicatorColor = fmt.current ? 'green' : 'gray';
+
+  return React.createElement(
+    Box,
+    { flexDirection: 'column', marginBottom: 1 },
+    // Session name row
+    React.createElement(
+      Box,
+      null,
+      React.createElement(Text, { color: indicatorColor }, indicator + ' '),
+      React.createElement(Text, { bold: true, color: statusColor }, fmt.displayName),
+      React.createElement(Text, { dimColor: true }, ' ['),
+      React.createElement(Text, { color: threadColor }, fmt.threadType),
+      React.createElement(Text, { dimColor: true }, ']')
+    ),
+    // Branch and story
+    React.createElement(
+      Box,
+      { paddingLeft: 3 },
+      React.createElement(Text, { dimColor: true }, 'Branch: '),
+      React.createElement(Text, { color: 'cyan' }, fmt.branch)
+    ),
+    React.createElement(
+      Box,
+      { paddingLeft: 3 },
+      React.createElement(Text, { dimColor: true }, 'Story: '),
+      React.createElement(Text, { color: fmt.story === 'none' ? 'gray' : 'yellow' }, fmt.story)
+    )
+  );
+}
+
+/**
+ * SessionPanel component - displays all sessions
+ */
+function SessionPanel({ refreshInterval = 5000 }) {
+  const [sessions, setSessions] = React.useState([]);
+  const [lastUpdate, setLastUpdate] = React.useState(new Date());
+
+  // Load sessions on mount and on interval
+  React.useEffect(() => {
+    function loadSessions() {
+      try {
+        const result = getSessions();
+        setSessions(result.sessions || []);
+        setLastUpdate(new Date());
+      } catch (e) {
+        // Silently handle errors
+        setSessions([]);
+      }
+    }
+
+    // Initial load
+    loadSessions();
+
+    // Refresh periodically
+    const interval = setInterval(loadSessions, refreshInterval);
+
+    return () => clearInterval(interval);
+  }, [refreshInterval]);
+
+  // Empty state
+  if (sessions.length === 0) {
+    return React.createElement(
+      Box,
+      { flexDirection: 'column', borderStyle: 'single', borderColor: 'gray', padding: 1 },
+      React.createElement(
+        Text,
+        { bold: true, color: 'cyan' },
+        'SESSIONS'
+      ),
+      React.createElement(
+        Text,
+        { dimColor: true, italic: true },
+        'No active sessions'
+      )
+    );
+  }
+
+  return React.createElement(
+    Box,
+    { flexDirection: 'column', borderStyle: 'single', borderColor: 'gray', padding: 1 },
+    // Header
+    React.createElement(
+      Box,
+      { marginBottom: 1 },
+      React.createElement(Text, { bold: true, color: 'cyan' }, 'SESSIONS'),
+      React.createElement(Text, { dimColor: true }, ` (${sessions.length})`)
+    ),
+    // Session list
+    ...sessions.map((session, index) =>
+      React.createElement(SessionRow, { key: session.id || index, session })
+    ),
+    // Footer with refresh info
+    React.createElement(
+      Box,
+      { marginTop: 1 },
+      React.createElement(
+        Text,
+        { dimColor: true, italic: true },
+        `Updated: ${lastUpdate.toLocaleTimeString()}`
+      )
+    )
+  );
+}
+
+module.exports = { SessionPanel, SessionRow, formatSession, getThreadColor };

package/scripts/tui/panels/TracePanel.js

@@ -0,0 +1,333 @@
+'use strict';
+
+/**
+ * Agent Trace Panel - Quality gate and iteration tracking
+ *
+ * Shows active agent loops with:
+ *   - Current gate (tests, coverage, lint, types, visual)
+ *   - Iteration count and progress
+ *   - Pass/fail status with color coding
+ *   - Progress bars for coverage
+ */
+
+const React = require('react');
+const { Box, Text } = require('ink');
+const { getLoopStatus } = require('../lib/loopControl');
+
+/**
+ * Quality gate definitions
+ */
+const QUALITY_GATES = {
+  tests: { name: 'Tests', color: 'green', icon: '✓' },
+  coverage: { name: 'Coverage', color: 'magenta', icon: '%' },
+  lint: { name: 'Lint', color: 'yellow', icon: '◆' },
+  types: { name: 'Types', color: 'blue', icon: '⬡' },
+  visual: { name: 'Visual', color: 'cyan', icon: '◉' }
+};
+
+/**
+ * Get status color
+ */
+function getStatusColor(status) {
+  switch (status) {
+    case 'passed':
+    case 'complete':
+    case true:
+      return 'green';
+    case 'failed':
+    case 'error':
+    case false:
+      return 'red';
+    case 'running':
+    case 'in_progress':
+      return 'cyan';
+    case 'pending':
+    case 'waiting':
+      return 'gray';
+    default:
+      return 'white';
+  }
+}
+
+/**
+ * Get status symbol
+ */
+function getStatusSymbol(status) {
+  switch (status) {
+    case 'passed':
+    case 'complete':
+    case true:
+      return '✓';
+    case 'failed':
+    case 'error':
+    case false:
+      return '✗';
+    case 'running':
+    case 'in_progress':
+      return '↻';
+    case 'pending':
+    case 'waiting':
+      return '○';
+    case 'paused':
+      return '⏸';
+    default:
+      return '•';
+  }
+}
+
+/**
+ * Progress bar component
+ */
+function ProgressBar({ value, max = 100, width = 20, fillChar = '█', emptyChar = '░' }) {
+  const percent = Math.min(100, Math.max(0, (value / max) * 100));
+  const filled = Math.round((percent / 100) * width);
+  const empty = width - filled;
+
+  const filledStr = fillChar.repeat(filled);
+  const emptyStr = emptyChar.repeat(empty);
+
+  // Color based on progress
+  let color = 'red';
+  if (percent >= 80) color = 'green';
+  else if (percent >= 50) color = 'yellow';
+
+  return React.createElement(
+    Box,
+    { flexDirection: 'row' },
+    React.createElement(Text, { color }, filledStr),
+    React.createElement(Text, { dimColor: true }, emptyStr),
+    React.createElement(Text, { dimColor: true }, ` ${percent.toFixed(0)}%`)
+  );
+}
+
+/**
+ * Quality gate row component
+ */
+function GateRow({ gate, status, value }) {
+  const gateConfig = QUALITY_GATES[gate] || { name: gate, color: 'white', icon: '•' };
+  const statusColor = getStatusColor(status);
+  const statusSymbol = getStatusSymbol(status);
+
+  return React.createElement(
+    Box,
+    { flexDirection: 'row', marginLeft: 2 },
+    React.createElement(
+      Text,
+      { color: gateConfig.color },
+      `${gateConfig.icon} `
+    ),
+    React.createElement(
+      Text,
+      { color: statusColor },
+      `${statusSymbol} `
+    ),
+    React.createElement(
+      Text,
+      null,
+      `${gateConfig.name}`
+    ),
+    value !== undefined && React.createElement(
+      Text,
+      { dimColor: true },
+      `: ${value}`
+    )
+  );
+}
+
+/**
+ * Active loop trace component
+ */
+function LoopTrace({ loopStatus }) {
+  if (!loopStatus || !loopStatus.active) {
+    return React.createElement(
+      Text,
+      { dimColor: true, italic: true },
+      'No active loop'
+    );
+  }
+
+  const {
+    epic,
+    currentStory,
+    iteration,
+    maxIterations,
+    paused,
+    coverageMode,
+    coverageThreshold,
+    coverageCurrent,
+    visualMode
+  } = loopStatus;
+
+  // Build gates list
+  const gates = [];
+
+  // Tests always present
+  gates.push({
+    gate: 'tests',
+    status: 'running',
+    value: null
+  });
+
+  // Coverage if enabled
+  if (coverageMode) {
+    gates.push({
+      gate: 'coverage',
+      status: coverageCurrent >= coverageThreshold ? 'passed' : 'running',
+      value: `${coverageCurrent?.toFixed(1) || 0}% / ${coverageThreshold}%`
+    });
+  }
+
+  // Visual if enabled
+  if (visualMode) {
+    gates.push({
+      gate: 'visual',
+      status: 'pending',
+      value: null
+    });
+  }
+
+  return React.createElement(
+    Box,
+    { flexDirection: 'column' },
+    // Loop header
+    React.createElement(
+      Box,
+      { flexDirection: 'row', marginBottom: 1 },
+      React.createElement(
+        Text,
+        { bold: true, color: paused ? 'yellow' : 'green' },
+        paused ? '⏸ PAUSED' : '▶ RUNNING'
+      ),
+      React.createElement(Text, { dimColor: true }, ` • ${epic}`)
+    ),
+    // Current story
+    React.createElement(
+      Box,
+      { flexDirection: 'row' },
+      React.createElement(Text, { dimColor: true }, 'Story: '),
+      React.createElement(Text, { color: 'cyan' }, currentStory || 'none')
+    ),
+    // Iteration progress
+    React.createElement(
+      Box,
+      { flexDirection: 'row', marginY: 1 },
+      React.createElement(Text, { dimColor: true }, 'Iteration: '),
+      React.createElement(
+        ProgressBar,
+        { value: iteration || 0, max: maxIterations || 20, width: 15 }
+      ),
+      React.createElement(Text, { dimColor: true }, ` ${iteration || 0}/${maxIterations || 20}`)
+    ),
+    // Coverage progress (if enabled)
+    coverageMode && React.createElement(
+      Box,
+      { flexDirection: 'row', marginBottom: 1 },
+      React.createElement(Text, { dimColor: true }, 'Coverage: '),
+      React.createElement(
+        ProgressBar,
+        { value: coverageCurrent || 0, max: 100, width: 15 }
+      )
+    ),
+    // Quality gates
+    React.createElement(
+      Box,
+      { flexDirection: 'column', marginTop: 1 },
+      React.createElement(Text, { dimColor: true }, 'Quality Gates:'),
+      gates.map((g, i) =>
+        React.createElement(GateRow, { key: `gate-${i}`, ...g })
+      )
+    )
+  );
+}
+
+/**
+ * Main Trace Panel component
+ */
+function TracePanel({ visible = true, refreshInterval = 2000 }) {
+  const [loopStatus, setLoopStatus] = React.useState(null);
+
+  React.useEffect(() => {
+    if (!visible) return;
+
+    const loadStatus = () => {
+      try {
+        const status = getLoopStatus();
+        setLoopStatus(status);
+      } catch (e) {
+        // Ignore errors
+      }
+    };
+
+    loadStatus();
+    const interval = setInterval(loadStatus, refreshInterval);
+
+    return () => clearInterval(interval);
+  }, [visible, refreshInterval]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: 'column',
+      borderStyle: 'single',
+      borderColor: 'blue',
+      padding: 1
+    },
+    // Header
+    React.createElement(
+      Box,
+      { marginBottom: 1 },
+      React.createElement(
+        Text,
+        { bold: true, color: 'blue' },
+        'AGENT TRACE'
+      ),
+      React.createElement(
+        Text,
+        { dimColor: true },
+        ' (T to toggle)'
+      )
+    ),
+    // Loop trace
+    React.createElement(LoopTrace, { loopStatus })
+  );
+}
+
+/**
+ * Compact trace indicator (for status bar)
+ */
+function CompactTrace({ loopStatus }) {
+  if (!loopStatus || !loopStatus.active) {
+    return React.createElement(
+      Text,
+      { dimColor: true },
+      'Loop: inactive'
+    );
+  }
+
+  const { iteration, maxIterations, paused, currentStory } = loopStatus;
+  const statusIcon = paused ? '⏸' : '▶';
+  const statusColor = paused ? 'yellow' : 'green';
+
+  return React.createElement(
+    Box,
+    { flexDirection: 'row' },
+    React.createElement(Text, { color: statusColor }, statusIcon),
+    React.createElement(Text, null, ` ${currentStory || '?'} `),
+    React.createElement(Text, { dimColor: true }, `[${iteration || 0}/${maxIterations || 20}]`)
+  );
+}
+
+module.exports = {
+  TracePanel,
+  LoopTrace,
+  GateRow,
+  ProgressBar,
+  CompactTrace,
+  getStatusColor,
+  getStatusSymbol,
+  QUALITY_GATES
+};

package/src/core/commands/tui.md

@@ -0,0 +1,91 @@
+---
+description: Launch Terminal User Interface for real-time session monitoring
+argument-hint:
+---
+
+# /agileflow:tui
+
+Launch the AgileFlow Terminal User Interface for real-time session visualization.
+
+---
+
+## Purpose
+
+The TUI provides a unified dashboard for:
+- **Session monitoring** - See all active sessions and their current stories
+- **Agent visualization** - Watch multi-agent orchestration in real-time
+- **Loop control** - Pause, resume, and manage autonomous loops
+- **Event streaming** - Live feed of agent activity and test results
+
+---
+
+## IMMEDIATE ACTIONS
+
+Upon invocation, execute these steps:
+
+### Step 1: Launch TUI
+
+```bash
+node packages/cli/scripts/tui/index.js
+```
+
+### Step 2: Display Key Bindings
+
+The TUI shows key bindings in the footer:
+- **Q** - Quit TUI
+- **S** - Start loop on current story
+- **P** - Pause active loop
+- **R** - Resume paused loop
+- **T** - Toggle trace panel
+- **1-9** - Switch session focus
+
+---
+
+## Key Features
+
+### Session Overview Panel
+- Lists all active sessions with ID, branch, and current story
+- Color coding by thread type (base=green, parallel=cyan)
+- Shows loop progress and iteration count
+
+### Agent Output Panel
+- Real-time stream of agent messages
+- Timestamps and agent identification
+- Auto-scroll with history buffer
+
+### Trace Panel (Toggle with T)
+- Detailed view of agent loops and quality gates
+- Progress bars for each gate (tests, coverage, lint, types)
+- Pass/fail status indicators
+
+---
+
+## Example Session
+
+```
+┌─────────────────────────────────────────────────────────────────────┐
+│                        AgileFlow TUI                                │
+├─────────────────────────────┬───────────────────────────────────────┤
+│  SESSIONS                   │  AGENT OUTPUT                         │
+│  ─────────                  │  ────────────                         │
+│  ▶ Session 1 [main]         │  [agileflow-api] Reading status.json  │
+│    Story: US-0115           │  [agileflow-api] Running tests...     │
+│    Loop: 3/20 iterations    │  ✓ 47 tests passed                    │
+├─────────────────────────────┴───────────────────────────────────────┤
+│ [S]tart  [P]ause  [R]esume  [T]race  [Q]uit                        │
+└─────────────────────────────────────────────────────────────────────┘
+```
+
+---
+
+## Related Commands
+
+- `/agileflow:babysit MODE=loop` - Autonomous story processing
+- `/agileflow:session:status` - Session information (non-TUI)
+- `/agileflow:session:new` - Create parallel sessions
+
+---
+
+## Research
+
+Based on Ralph TUI research: `docs/10-research/20260114-ralph-loop-ralph-tui.md`

package/tools/cli/commands/config.js

@@ -7,11 +7,12 @@
 const chalk = require('chalk');
 const path = require('node:path');
 const fs = require('fs-extra');
-const yaml = require('js-yaml');
+const { safeLoad, safeDump } = require('../../../lib/yaml-utils');
 const { Installer } = require('../installers/core/installer');
 const { IdeManager } = require('../installers/ide/manager');
 const { displayLogo, displaySection, success, warning, error, info } = require('../lib/ui');
 const { ErrorHandler } = require('../lib/error-handler');
+const { IdeRegistry } = require('../lib/ide-registry');
 
 const installer = new Installer();
 const ideManager = new IdeManager();
@@ -194,7 +195,7 @@ async function handleSet(directory, status, manifestPath, key, value) {
 
   // Read current manifest
   const manifestContent = await fs.readFile(manifestPath, 'utf8');
-  const manifest = yaml.load(manifestContent);
+  const manifest = safeLoad(manifestContent);
 
   // Track if we need to update IDE configs
   let needsIdeUpdate = false;
@@ -209,11 +210,12 @@ async function handleSet(directory, status, manifestPath, key, value) {
 
     case 'ides': {
       const newIdes = value.split(',').map(ide => ide.trim());
-      const validIdes = ['claude-code', 'cursor', 'windsurf'];
+      const validIdes = IdeRegistry.getAll();
 
       // Validate IDEs
       for (const ide of newIdes) {
-        if (!validIdes.includes(ide)) {
+        const validation = IdeRegistry.validate(ide);
+        if (!validation.ok) {
           handler.warning(
             `Invalid IDE: ${ide}`,
             `Valid IDEs: ${validIdes.join(', ')}`,
@@ -247,7 +249,7 @@ async function handleSet(directory, status, manifestPath, key, value) {
   manifest.updated_at = new Date().toISOString();
 
   // Write manifest
-  await fs.writeFile(manifestPath, yaml.dump(manifest), 'utf8');
+  await fs.writeFile(manifestPath, safeDump(manifest), 'utf8');
   success('Configuration updated');
 
   // Update IDE configs if needed
@@ -261,10 +263,10 @@ async function handleSet(directory, status, manifestPath, key, value) {
     // Remove old IDE configs
     for (const ide of oldIdes) {
       if (!manifest.ides.includes(ide)) {
-        const configPath = getIdeConfigPath(directory, ide);
+        const configPath = IdeRegistry.getConfigPath(ide, directory);
         if (await fs.pathExists(configPath)) {
           await fs.remove(configPath);
-          info(`Removed ${formatIdeName(ide)} configuration`);
+          info(`Removed ${IdeRegistry.getDisplayName(ide)} configuration`);
         }
       }
     }
@@ -272,7 +274,7 @@ async function handleSet(directory, status, manifestPath, key, value) {
     // Add new IDE configs
     for (const ide of manifest.ides) {
       await ideManager.setup(ide, directory, status.path);
-      success(`Updated ${formatIdeName(ide)} configuration`);
+      success(`Updated ${IdeRegistry.getDisplayName(ide)} configuration`);
     }
 
     console.log();
@@ -282,28 +284,3 @@ async function handleSet(directory, status, manifestPath, key, value) {
   console.log();
 }
 
-/**
- * Get IDE config path
- */
-function getIdeConfigPath(projectDir, ide) {
-  const paths = {
-    'claude-code': '.claude/commands/agileflow',
-    cursor: '.cursor/rules/agileflow',
-    windsurf: '.windsurf/workflows/agileflow',
-  };
-
-  return path.join(projectDir, paths[ide] || '');
-}
-
-/**
- * Format IDE name for display
- */
-function formatIdeName(ide) {
-  const names = {
-    'claude-code': 'Claude Code',
-    cursor: 'Cursor',
-    windsurf: 'Windsurf',
-  };
-
-  return names[ide] || ide;
-}