agileflow 2.90.7 → 2.91.0

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,95 @@
+'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,143 @@
+'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();
+      }
+    }
+  };
+};

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

@@ -0,0 +1,91 @@
+'use strict';
+
+const blessed = require('blessed');
+
+/**
+ * Create the trace panel showing execution steps
+ */
+module.exports = function createTracePanel(grid, state) {
+  const box = blessed.box({
+    parent: grid.screen,
+    top: 3,
+    left: 0,
+    width: '100%',
+    height: '100%-4',
+    label: ' {yellow-fg}{bold}Trace{/bold}{/yellow-fg} ',
+    tags: true,
+    border: {
+      type: 'line',
+      fg: 'yellow'
+    },
+    style: {
+      fg: 'white',
+      bg: 'black',
+      border: { fg: 'yellow' }
+    },
+    scrollable: true,
+    alwaysScroll: true,
+    scrollbar: {
+      ch: '│',
+      style: { fg: 'yellow' }
+    },
+    keys: true,
+    vi: true
+  });
+
+  let traces = [];
+
+  function render() {
+    if (traces.length === 0) {
+      box.setContent(`
+  {gray-fg}No trace data{/}
+
+  {yellow-fg}What shows here:{/}
+  • Active command execution
+  • Step-by-step agent workflow
+  • Tool calls and responses
+  • Timing information
+
+  {gray-fg}Trace data comes from .agileflow/session-state.json{/}
+      `);
+      return;
+    }
+
+    let lines = [];
+    traces.forEach((t, i) => {
+      // Status indicator
+      let statusIcon = '{gray-fg}○{/}';
+      if (t.status === 'running') statusIcon = '{yellow-fg}◉{/}';
+      else if (t.status === 'completed') statusIcon = '{green-fg}●{/}';
+      else if (t.status === 'error') statusIcon = '{red-fg}✖{/}';
+
+      const stepNum = String(i + 1).padStart(2, '0');
+      const action = (t.action || 'Unknown').substring(0, 40);
+      const duration = t.duration || '--';
+
+      lines.push(`  ${statusIcon} Step ${stepNum}: {bold}${action}{/}`);
+      if (t.details) {
+        lines.push(`           {gray-fg}${t.details.substring(0, 60)}{/}`);
+      }
+      lines.push(`           {gray-fg}Duration: ${duration}{/}`);
+      lines.push('');
+    });
+
+    box.setContent(lines.join('\n'));
+  }
+
+  return {
+    element: box,
+    show() { box.show(); },
+    hide() { box.hide(); },
+    focus() { box.focus(); },
+    setData(data) {
+      traces = data || [];
+      render();
+    },
+    addStep(action, status = 'running', details = '') {
+      traces.push({ action, status, details, duration: '--' });
+      render();
+    }
+  };
+};

package/scripts/tui/blessed/ui/help.js

@@ -0,0 +1,77 @@
+'use strict';
+
+const blessed = require('blessed');
+
+/**
+ * Create the help overlay that shows all available commands
+ * Toggled with ? or h key
+ */
+module.exports = function createHelpOverlay(screen, state) {
+  const help = blessed.box({
+    parent: screen,
+    top: 'center',
+    left: 'center',
+    width: 55,
+    height: 22,
+    tags: true,
+    border: { type: 'line', fg: 'yellow' },
+    style: {
+      fg: 'white',
+      bg: 'black',
+      border: { fg: 'yellow' }
+    },
+    label: ' {yellow-fg}Help{/yellow-fg} ',
+    hidden: true,
+    content: `
+{bold}Navigation{/bold}
+  {cyan-fg}1{/}         Sessions tab
+  {cyan-fg}2{/}         Output tab
+  {cyan-fg}3{/}         Trace tab
+  {cyan-fg}Tab{/}       Next tab
+  {cyan-fg}j/k or {/}{cyan-fg}arrow-down/arrow-up{/} Navigate list items
+  {cyan-fg}Enter{/}     Select item
+
+{bold}Actions{/bold}
+  {cyan-fg}r{/}         Refresh data
+  {cyan-fg}s{/}         Start loop on current story
+  {cyan-fg}p{/}         Pause active loop
+
+{bold}Display{/bold}
+  {cyan-fg}?{/} or {cyan-fg}h{/}   Toggle this help
+  {cyan-fg}Escape{/}    Close help/dialogs
+
+{bold}Exit{/bold}
+  {cyan-fg}q{/}         Quit TUI
+  {cyan-fg}Ctrl+C{/}    Force quit
+
+{gray-fg}Press Escape or ? to close{/gray-fg}`
+  });
+
+  // Close help on various keys
+  help.key(['escape', 'q', '?', 'h', 'enter', 'space'], () => {
+    help.hide();
+    screen.render();
+  });
+
+  return {
+    element: help,
+    toggle() {
+      if (help.hidden) {
+        help.show();
+        help.focus();
+      } else {
+        help.hide();
+      }
+    },
+    show() {
+      help.show();
+      help.focus();
+    },
+    hide() {
+      help.hide();
+    },
+    isVisible() {
+      return !help.hidden;
+    }
+  };
+};

package/scripts/tui/blessed/ui/screen.js

@@ -0,0 +1,52 @@
+'use strict';
+
+const blessed = require('blessed');
+
+/**
+ * Create the main blessed screen with flicker-free rendering
+ *
+ * Key settings:
+ * - smartCSR: Enable differential rendering (only update changed cells)
+ * - fullUnicode: Support Unicode characters like box drawing
+ */
+module.exports = function createScreen() {
+  const screen = blessed.screen({
+    smartCSR: true,      // Key for flicker-free differential rendering
+    fullUnicode: true,   // Support Unicode characters
+    title: 'AgileFlow TUI',
+    cursor: {
+      artificial: true,
+      blink: true,
+      shape: 'line'
+    },
+    debug: false,
+    warnings: false,
+    autoPadding: true,
+    dockBorders: true
+  });
+
+  // Enable synchronized output mode for atomic updates
+  // This batches all screen updates and flushes them at once
+  // Note: Not all terminals support this, but it gracefully degrades
+  try {
+    process.stdout.write('\x1b[?2026h');
+  } catch (e) {
+    // Ignore if terminal doesn't support
+  }
+
+  // Disable synchronized output on exit
+  process.on('exit', () => {
+    try {
+      process.stdout.write('\x1b[?2026l');
+    } catch (e) {
+      // Ignore
+    }
+  });
+
+  // Handle resize gracefully
+  screen.on('resize', () => {
+    screen.render();
+  });
+
+  return screen;
+};