agileflow 2.90.7 → 2.92.0

package/scripts/tui/blessed/data/watcher.js

@@ -0,0 +1,180 @@
+'use strict';
+
+const fs = require('fs');
+const path = require('path');
+const chokidar = require('chokidar');
+
+// Import centralized path utilities
+const { getStatusPath, getBusLogPath, getSessionStatePath } = require('../../../lib/paths');
+
+/**
+ * DataWatcher - watches status.json and log files for changes
+ * Triggers refresh callback when data updates
+ */
+class DataWatcher {
+  constructor(state, onUpdate) {
+    this.state = state;
+    this.onUpdate = onUpdate;
+    this.watcher = null;
+    this.cwd = process.cwd();
+
+    // Paths to watch (using centralized path utilities)
+    this.statusPath = getStatusPath(this.cwd);
+    this.logPath = getBusLogPath(this.cwd);
+    this.sessionStatePath = getSessionStatePath(this.cwd);
+  }
+
+  start() {
+    // Initial load
+    this.loadStatus();
+    this.loadLogs();
+    this.loadSessionState();
+
+    // Set up file watcher
+    const watchPaths = [this.statusPath, this.logPath, this.sessionStatePath].filter(p => {
+      const dir = path.dirname(p);
+      return fs.existsSync(dir);
+    });
+
+    if (watchPaths.length === 0) {
+      // No paths to watch yet, check periodically
+      this.pollInterval = setInterval(() => {
+        this.loadStatus();
+        this.loadLogs();
+        this.loadSessionState();
+        this.onUpdate();
+      }, 2000);
+      return;
+    }
+
+    this.watcher = chokidar.watch(watchPaths, {
+      persistent: true,
+      ignoreInitial: true,
+      usePolling: false,
+      awaitWriteFinish: {
+        stabilityThreshold: 100,
+        pollInterval: 50,
+      },
+    });
+
+    this.watcher.on('change', filePath => {
+      if (filePath.endsWith('status.json')) {
+        this.loadStatus();
+      } else if (filePath.endsWith('log.jsonl')) {
+        this.loadLogs();
+      } else if (filePath.endsWith('session-state.json')) {
+        this.loadSessionState();
+      }
+      this.onUpdate();
+    });
+
+    this.watcher.on('error', err => {
+      // Silently handle watcher errors
+    });
+  }
+
+  loadStatus() {
+    try {
+      if (fs.existsSync(this.statusPath)) {
+        const content = fs.readFileSync(this.statusPath, 'utf8');
+        const data = JSON.parse(content);
+
+        // Extract stories with in_progress status as "sessions"
+        const stories = data.stories || [];
+        this.state.sessions = stories
+          .filter(s => s.status === 'in_progress')
+          .map((s, i) => ({
+            id: `S-${i + 1}`,
+            story: s.id || s.title || 'Unknown',
+            status: 'active',
+            duration: this.formatDuration(s.started_at),
+            progress: s.progress || '--',
+          }));
+
+        // If no active stories, show all stories summary
+        if (this.state.sessions.length === 0) {
+          const ready = stories.filter(s => s.status === 'ready').length;
+          const completed = stories.filter(s => s.status === 'completed').length;
+          this.state.sessions = [
+            {
+              id: '--',
+              story: `${ready} ready, ${completed} completed`,
+              status: 'idle',
+              duration: '--',
+              progress: '--',
+            },
+          ];
+        }
+      }
+    } catch (err) {
+      // Ignore parse errors
+    }
+  }
+
+  loadLogs() {
+    try {
+      if (fs.existsSync(this.logPath)) {
+        const content = fs.readFileSync(this.logPath, 'utf8');
+        const lines = content.trim().split('\n').filter(Boolean);
+
+        // Take last 100 lines
+        this.state.logs = lines.slice(-100).map(line => {
+          try {
+            return JSON.parse(line);
+          } catch {
+            return { message: line, level: 'info' };
+          }
+        });
+      }
+    } catch (err) {
+      // Ignore read errors
+    }
+  }
+
+  loadSessionState() {
+    try {
+      if (fs.existsSync(this.sessionStatePath)) {
+        const content = fs.readFileSync(this.sessionStatePath, 'utf8');
+        const data = JSON.parse(content);
+
+        // Extract traces from active commands
+        if (data.active_commands) {
+          this.state.traces = data.active_commands.map((cmd, i) => ({
+            action: cmd.command || cmd,
+            status: 'running',
+            duration: '--',
+            details: cmd.args || '',
+          }));
+        }
+      }
+    } catch (err) {
+      // Ignore errors
+    }
+  }
+
+  formatDuration(startedAt) {
+    if (!startedAt) return '--';
+    try {
+      const start = new Date(startedAt);
+      const now = new Date();
+      const diff = Math.floor((now - start) / 1000);
+
+      if (diff < 60) return `${diff}s`;
+      if (diff < 3600) return `${Math.floor(diff / 60)}m`;
+      return `${Math.floor(diff / 3600)}h ${Math.floor((diff % 3600) / 60)}m`;
+    } catch {
+      return '--';
+    }
+  }
+
+  stop() {
+    if (this.watcher) {
+      this.watcher.close();
+    }
+    if (this.pollInterval) {
+      clearInterval(this.pollInterval);
+    }
+  }
+}
+
+module.exports = DataWatcher;

package/scripts/tui/blessed/index.js

@@ -0,0 +1,244 @@
+#!/usr/bin/env node
+'use strict';
+
+/**
+ * AgileFlow TUI - Terminal User Interface
+ *
+ * Full-screen, flicker-free dashboard with tabs and live updates.
+ *
+ * Key bindings:
+ *   1-3       Switch tabs (Sessions, Output, Trace)
+ *   Tab       Next tab
+ *   j/k       Navigate items
+ *   r         Refresh data
+ *   ?/h       Toggle help overlay
+ *   q         Quit TUI
+ */
+
+const blessed = require('blessed');
+
+// UI components
+const createScreen = require('./ui/screen');
+const createTabBar = require('./ui/tabbar');
+const createStatusBar = require('./ui/statusbar');
+const createHelpOverlay = require('./ui/help');
+
+// Panels
+const createSessionsPanel = require('./panels/sessions');
+const createOutputPanel = require('./panels/output');
+const createTracePanel = require('./panels/trace');
+
+// Data
+const DataWatcher = require('./data/watcher');
+
+class AgileFlowTUI {
+  constructor() {
+    this.state = {
+      activeTab: 0,
+      tabs: ['Sessions', 'Output', 'Trace'],
+      sessions: [],
+      logs: [],
+      traces: [],
+      showHelp: false,
+    };
+    this.components = {};
+    this.watcher = null;
+    this.screen = null;
+  }
+
+  init() {
+    // Create screen with flicker-free rendering
+    this.screen = createScreen();
+
+    // Wrapper to pass screen to panels (they expect grid.screen)
+    const gridLike = { screen: this.screen };
+
+    // Create UI components
+    this.components.tabBar = createTabBar(this.screen, this.state);
+    this.components.statusBar = createStatusBar(this.screen, this.state);
+    this.components.help = createHelpOverlay(this.screen, this.state);
+
+    // Create panels (pass screen wrapper)
+    this.components.sessions = createSessionsPanel(gridLike, this.state);
+    this.components.output = createOutputPanel(gridLike, this.state);
+    this.components.trace = createTracePanel(gridLike, this.state);
+
+    // Hide all panels initially
+    this.components.sessions.hide();
+    this.components.output.hide();
+    this.components.trace.hide();
+
+    // Set up keybindings
+    this.setupKeys();
+
+    // Start data watcher for live updates
+    this.watcher = new DataWatcher(this.state, () => this.refresh());
+    this.watcher.start();
+
+    // Show initial tab
+    this.switchTab(0);
+
+    // Initial render
+    this.screen.render();
+  }
+
+  setupKeys() {
+    // Quit
+    this.screen.key(['q', 'C-c'], () => {
+      this.cleanup();
+      process.exit(0);
+    });
+
+    // Tab switching with number keys
+    this.screen.key(['1', '2', '3'], ch => {
+      if (this.components.help.isVisible()) return;
+      this.switchTab(parseInt(ch) - 1);
+    });
+
+    // Tab switching with Tab key
+    this.screen.key(['tab'], () => {
+      if (this.components.help.isVisible()) return;
+      this.switchTab((this.state.activeTab + 1) % this.state.tabs.length);
+    });
+
+    // Shift+Tab for reverse tab
+    this.screen.key(['S-tab'], () => {
+      if (this.components.help.isVisible()) return;
+      const prev = (this.state.activeTab - 1 + this.state.tabs.length) % this.state.tabs.length;
+      this.switchTab(prev);
+    });
+
+    // Help overlay
+    this.screen.key(['?', 'h'], () => {
+      this.state.showHelp = !this.state.showHelp;
+      this.components.help.toggle();
+      this.screen.render();
+    });
+
+    // Refresh
+    this.screen.key(['r'], () => {
+      if (this.components.help.isVisible()) return;
+      this.components.statusBar.setStatus('{yellow-fg}Refreshing...{/}');
+      this.screen.render();
+
+      // Reload data
+      if (this.watcher) {
+        this.watcher.loadStatus();
+        this.watcher.loadLogs();
+        this.watcher.loadSessionState();
+      }
+
+      setTimeout(() => {
+        this.refresh();
+        this.components.statusBar.resetHints();
+        this.screen.render();
+      }, 100);
+    });
+
+    // Navigation (j/k)
+    this.screen.key(['j', 'down'], () => {
+      if (this.components.help.isVisible()) return;
+      if (this.state.activeTab === 0 && this.components.sessions.selectNext) {
+        this.components.sessions.selectNext();
+        this.screen.render();
+      }
+    });
+
+    this.screen.key(['k', 'up'], () => {
+      if (this.components.help.isVisible()) return;
+      if (this.state.activeTab === 0 && this.components.sessions.selectPrev) {
+        this.components.sessions.selectPrev();
+        this.screen.render();
+      }
+    });
+
+    // Escape to close help
+    this.screen.key(['escape'], () => {
+      if (this.components.help.isVisible()) {
+        this.components.help.hide();
+        this.screen.render();
+      }
+    });
+  }
+
+  switchTab(index) {
+    if (index < 0 || index >= this.state.tabs.length) return;
+
+    this.state.activeTab = index;
+
+    // Hide all panels
+    this.components.sessions.hide();
+    this.components.output.hide();
+    this.components.trace.hide();
+
+    // Show and focus active panel
+    switch (index) {
+      case 0:
+        this.components.sessions.show();
+        this.components.sessions.focus();
+        break;
+      case 1:
+        this.components.output.show();
+        this.components.output.focus();
+        break;
+      case 2:
+        this.components.trace.show();
+        this.components.trace.focus();
+        break;
+    }
+
+    // Update tab bar highlighting
+    this.components.tabBar.setTab(index);
+
+    // Render changes
+    this.screen.render();
+  }
+
+  refresh() {
+    // Update panels with current state
+    this.components.sessions.setData(this.state.sessions);
+    this.components.output.setData(this.state.logs);
+    this.components.trace.setData(this.state.traces);
+
+    // Re-render
+    this.screen.render();
+  }
+
+  cleanup() {
+    // Stop watching files
+    if (this.watcher) {
+      this.watcher.stop();
+    }
+
+    // Destroy screen
+    if (this.screen) {
+      this.screen.destroy();
+    }
+  }
+
+  run() {
+    try {
+      this.init();
+    } catch (err) {
+      console.error('Failed to initialize TUI:', err.message);
+      console.error('');
+      console.error('Try running: npx agileflow tui --fallback');
+      process.exit(1);
+    }
+  }
+}
+
+/**
+ * Main entry point
+ */
+function main() {
+  const tui = new AgileFlowTUI();
+  tui.run();
+}
+
+// Run if executed directly
+if (require.main === module) {
+  main();
+}
+
+module.exports = { AgileFlowTUI, main };

package/scripts/tui/blessed/panels/output.js

@@ -0,0 +1,101 @@
+'use strict';
+
+const blessed = require('blessed');
+
+/**
+ * Create the output panel showing log stream
+ */
+module.exports = function createOutputPanel(grid, state) {
+  const box = blessed.box({
+    parent: grid.screen,
+    top: 3,
+    left: 0,
+    width: '100%',
+    height: '100%-4',
+    label: ' {green-fg}{bold}Output{/bold}{/green-fg} ',
+    tags: true,
+    border: {
+      type: 'line',
+      fg: 'green',
+    },
+    style: {
+      fg: 'white',
+      bg: 'black',
+      border: { fg: 'green' },
+    },
+    scrollable: true,
+    alwaysScroll: true,
+    scrollbar: {
+      ch: '│',
+      style: { fg: 'green' },
+    },
+    keys: true,
+    vi: true,
+    mouse: true,
+  });
+
+  let logs = [];
+
+  function render() {
+    if (logs.length === 0) {
+      box.setContent(`
+  {gray-fg}Waiting for output...{/}
+
+  {green-fg}What shows here:{/}
+  • Agent activity logs
+  • Command execution output
+  • Tool call results
+  • Error messages
+
+  {gray-fg}Logs are read from docs/09-agents/bus/log.jsonl{/}
+      `);
+      return;
+    }
+
+    let lines = [];
+    logs.forEach(entry => {
+      const time = entry.timestamp
+        ? new Date(entry.timestamp).toLocaleTimeString('en-US', { hour12: false })
+        : '--:--:--';
+
+      const level = entry.level || 'info';
+      let levelTag = '{gray-fg}INFO{/}';
+      if (level === 'error') levelTag = '{red-fg}ERRO{/}';
+      else if (level === 'warn' || level === 'warning') levelTag = '{yellow-fg}WARN{/}';
+      else if (level === 'debug') levelTag = '{gray-fg}DEBG{/}';
+      else if (level === 'success') levelTag = '{green-fg}DONE{/}';
+
+      const msg = entry.message || (typeof entry === 'string' ? entry : JSON.stringify(entry));
+      lines.push(`  {gray-fg}${time}{/} ${levelTag} ${msg}`);
+    });
+
+    box.setContent(lines.join('\n'));
+    box.setScrollPerc(100); // Auto-scroll to bottom
+  }
+
+  return {
+    element: box,
+    show() {
+      box.show();
+    },
+    hide() {
+      box.hide();
+    },
+    focus() {
+      box.focus();
+    },
+    setData(data) {
+      logs = data || [];
+      render();
+    },
+    addLine(text, level = 'info') {
+      logs.push({ message: text, level, timestamp: new Date().toISOString() });
+      if (logs.length > 200) logs.shift();
+      render();
+    },
+    clear() {
+      logs = [];
+      render();
+    },
+  };
+};

package/scripts/tui/blessed/panels/sessions.js

@@ -0,0 +1,150 @@
+'use strict';
+
+const blessed = require('blessed');
+
+/**
+ * Create the sessions panel with a better styled list
+ */
+module.exports = function createSessionsPanel(grid, state) {
+  // Use a list instead of table for better control
+  const box = blessed.box({
+    parent: grid.screen,
+    top: 3,
+    left: 0,
+    width: '100%',
+    height: '100%-4',
+    label: ' {cyan-fg}{bold}Sessions{/bold}{/cyan-fg} ',
+    tags: true,
+    border: {
+      type: 'line',
+      fg: 'cyan',
+    },
+    style: {
+      fg: 'white',
+      bg: 'black',
+      border: { fg: 'cyan' },
+    },
+    scrollable: true,
+    alwaysScroll: true,
+    scrollbar: {
+      ch: '│',
+      style: { fg: 'cyan' },
+    },
+    keys: true,
+    vi: true,
+  });
+
+  // Header row
+  const header = blessed.box({
+    parent: box,
+    top: 0,
+    left: 0,
+    width: '100%-2',
+    height: 1,
+    content:
+      '{bold}{cyan-fg}  ID          Story                              Status        Time{/}{/}',
+    tags: true,
+    style: {
+      bg: '#222222',
+    },
+  });
+
+  // Divider
+  blessed.box({
+    parent: box,
+    top: 1,
+    left: 0,
+    width: '100%-2',
+    height: 1,
+    content: '  ──────────  ─────────────────────────────────  ────────────  ──────',
+    style: {
+      fg: 'gray',
+    },
+  });
+
+  // Content area
+  const content = blessed.box({
+    parent: box,
+    top: 2,
+    left: 0,
+    width: '100%-2',
+    height: '100%-3',
+    tags: true,
+    style: {
+      fg: 'white',
+    },
+  });
+
+  let sessions = [];
+  let selectedIndex = 0;
+
+  function render() {
+    if (sessions.length === 0) {
+      content.setContent(`
+  {gray-fg}No active sessions{/}
+
+  {cyan-fg}Quick Start:{/}
+  • Run {bold}/agileflow:start{/} to begin a session
+  • Use {bold}/agileflow:loop{/} for autonomous mode
+  • Press {bold}?{/} for help
+      `);
+      return;
+    }
+
+    let lines = [];
+    sessions.forEach((s, i) => {
+      const selected = i === selectedIndex;
+      const prefix = selected ? '{inverse}' : '';
+      const suffix = selected ? '{/inverse}' : '';
+
+      // Status with colors
+      let statusText = s.status || 'unknown';
+      if (statusText === 'active') statusText = '{green-fg}● active{/}';
+      else if (statusText === 'running') statusText = '{green-fg}● running{/}';
+      else if (statusText === 'paused') statusText = '{yellow-fg}◉ paused{/}';
+      else if (statusText === 'idle') statusText = '{gray-fg}○ idle{/}';
+      else if (statusText === 'error') statusText = '{red-fg}✖ error{/}';
+      else statusText = `{gray-fg}○ ${statusText}{/}`;
+
+      const id = (s.id || '--').padEnd(10);
+      const story = (s.story || 'No story').substring(0, 34).padEnd(34);
+      const time = (s.duration || '--').padStart(6);
+
+      lines.push(`${prefix}  ${id}  ${story}  ${statusText.padEnd(22)}  ${time}${suffix}`);
+    });
+
+    content.setContent(lines.join('\n'));
+  }
+
+  return {
+    element: box,
+    show() {
+      box.show();
+    },
+    hide() {
+      box.hide();
+    },
+    focus() {
+      box.focus();
+    },
+    setData(data) {
+      sessions = data || [];
+      render();
+    },
+    getSelected() {
+      return selectedIndex;
+    },
+    selectNext() {
+      if (selectedIndex < sessions.length - 1) {
+        selectedIndex++;
+        render();
+      }
+    },
+    selectPrev() {
+      if (selectedIndex > 0) {
+        selectedIndex--;
+        render();
+      }
+    },
+  };
+};