agileflow 3.4.2 → 4.0.0-alpha.1

package/scripts/tui/blessed/index.js

@@ -1,244 +0,0 @@
-#!/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

@@ -1,101 +0,0 @@
-'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

@@ -1,150 +0,0 @@
-'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

@@ -1,97 +0,0 @@
-'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

@@ -1,77 +0,0 @@
-'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;
-    },
-  };
-};