agileflow 2.90.2 → 2.90.4

package/CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [2.90.4] - 2026-01-17
+
+### Fixed
+- Fix TUI to use simple-tui by default
+
 ## [2.90.2] - 2026-01-17
 
 ### Fixed

package/package.json

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

package/scripts/tui/Dashboard.js

@@ -0,0 +1,277 @@
+'use strict';
+
+/**
+ * AgileFlow TUI Dashboard
+ *
+ * Main layout component using Ink's Flexbox for responsive design.
+ * Adapts to terminal size automatically.
+ *
+ * Layout:
+ * ┌────────────────────────────────────────────────────────────────┐
+ * │                     AgileFlow TUI v2.x                         │
+ * ├──────────────────┬─────────────────────────────────────────────┤
+ * │ SESSIONS         │ AGENT OUTPUT                                │
+ * │ ────────         │ ────────────                                │
+ * │ ▶ Session 1      │ [10:30] [api] Running tests...              │
+ * │   Branch: main   │ [10:31] [api] ✓ 47 tests passed             │
+ * │   Story: US-0115 │ [10:32] [ci] Building project...            │
+ * │                  │                                             │
+ * │ Session 2        │                                             │
+ * │   Branch: feat   │                                             │
+ * ├──────────────────┴─────────────────────────────────────────────┤
+ * │ Loop: EP-0020 US-0115 | ████████░░░░ 65% | Q S P R T 1-9       │
+ * └────────────────────────────────────────────────────────────────┘
+ */
+
+const React = require('react');
+const { Box, Text, useInput, useApp, useStdout } = require('ink');
+const { SessionPanel } = require('./panels/SessionPanel');
+const { OutputPanel } = require('./panels/OutputPanel');
+const { TracePanel } = require('./panels/TracePanel');
+const { getLoopStatus } = require('./lib/loopControl');
+
+/**
+ * Version display
+ */
+const VERSION = '2.90.2';
+
+/**
+ * Status bar showing loop progress and key bindings
+ */
+function StatusBar({ loopStatus, showTrace }) {
+  const progress = loopStatus?.progress || 0;
+  const epic = loopStatus?.epic || '';
+  const story = loopStatus?.story || '';
+  const state = loopStatus?.state || 'idle';
+
+  // Build progress bar
+  const barWidth = 15;
+  const filled = Math.round((progress / 100) * barWidth);
+  const empty = barWidth - filled;
+  const progressBar = '█'.repeat(filled) + '░'.repeat(empty);
+
+  // Progress color
+  let progressColor = 'red';
+  if (progress >= 80) progressColor = 'green';
+  else if (progress >= 50) progressColor = 'yellow';
+  else if (progress >= 20) progressColor = 'cyan';
+
+  // State indicator
+  const stateColors = {
+    running: 'green',
+    paused: 'yellow',
+    idle: 'gray',
+    error: 'red',
+  };
+
+  return React.createElement(
+    Box,
+    {
+      borderStyle: 'single',
+      borderColor: 'gray',
+      paddingX: 1,
+      justifyContent: 'space-between',
+      flexShrink: 0,
+    },
+    // Left: Loop info
+    React.createElement(
+      Box,
+      { flexDirection: 'row' },
+      React.createElement(Text, { color: stateColors[state] || 'gray' }, '● '),
+      epic && React.createElement(Text, { bold: true }, `${epic} `),
+      story && React.createElement(Text, { color: 'yellow' }, story),
+      !epic && !story && React.createElement(Text, { dimColor: true }, 'No active loop')
+    ),
+    // Center: Progress bar
+    React.createElement(
+      Box,
+      { flexDirection: 'row' },
+      React.createElement(Text, { color: progressColor }, progressBar),
+      React.createElement(Text, null, ` ${progress}%`)
+    ),
+    // Right: Key bindings
+    React.createElement(
+      Box,
+      { flexDirection: 'row' },
+      React.createElement(Text, { dimColor: true }, '['),
+      React.createElement(Text, { color: 'cyan' }, 'Q'),
+      React.createElement(Text, { dimColor: true }, ']uit ['),
+      React.createElement(Text, { color: 'green' }, 'S'),
+      React.createElement(Text, { dimColor: true }, ']tart ['),
+      React.createElement(Text, { color: 'yellow' }, 'P'),
+      React.createElement(Text, { dimColor: true }, ']ause ['),
+      React.createElement(Text, { color: 'cyan' }, 'R'),
+      React.createElement(Text, { dimColor: true }, ']esume ['),
+      React.createElement(Text, { color: showTrace ? 'green' : 'gray' }, 'T'),
+      React.createElement(Text, { dimColor: true }, ']race'),
+      React.createElement(Text, { dimColor: true }, ' | '),
+      React.createElement(Text, { color: 'blue' }, `v${VERSION}`)
+    )
+  );
+}
+
+/**
+ * Main Dashboard component
+ */
+function Dashboard({ onAction = null }) {
+  const { exit } = useApp();
+  const { stdout } = useStdout();
+
+  // Terminal dimensions
+  const [dimensions, setDimensions] = React.useState({
+    width: stdout?.columns || 80,
+    height: stdout?.rows || 24,
+  });
+
+  // UI state
+  const [showTrace, setShowTrace] = React.useState(false);
+  const [loopStatus, setLoopStatus] = React.useState(null);
+  const [selectedSession, setSelectedSession] = React.useState(1);
+
+  // Handle terminal resize
+  React.useEffect(() => {
+    const handleResize = () => {
+      setDimensions({
+        width: stdout?.columns || 80,
+        height: stdout?.rows || 24,
+      });
+    };
+
+    stdout?.on('resize', handleResize);
+    return () => stdout?.off('resize', handleResize);
+  }, [stdout]);
+
+  // Load loop status periodically
+  React.useEffect(() => {
+    const loadStatus = () => {
+      try {
+        const status = getLoopStatus();
+        setLoopStatus(status);
+      } catch (e) {
+        // Silently ignore errors
+      }
+    };
+
+    loadStatus();
+    const interval = setInterval(loadStatus, 2000);
+    return () => clearInterval(interval);
+  }, []);
+
+  // Handle keyboard input
+  useInput((input, key) => {
+    const lowerInput = input.toLowerCase();
+
+    // Quit
+    if (lowerInput === 'q' || (key.ctrl && lowerInput === 'c')) {
+      exit();
+      return;
+    }
+
+    // Toggle trace
+    if (lowerInput === 't') {
+      setShowTrace(prev => !prev);
+      return;
+    }
+
+    // Session selection (1-9)
+    if (input >= '1' && input <= '9') {
+      setSelectedSession(parseInt(input, 10));
+      return;
+    }
+
+    // Forward actions to parent
+    if (onAction) {
+      if (lowerInput === 's') onAction({ action: 'start' });
+      if (lowerInput === 'p') onAction({ action: 'pause' });
+      if (lowerInput === 'r') onAction({ action: 'resume' });
+    }
+  });
+
+  // Calculate panel widths based on terminal size
+  const isNarrow = dimensions.width < 100;
+  const sessionPanelWidth = isNarrow ? 25 : 30;
+
+  // Main content height (subtract header + status bar)
+  const contentHeight = Math.max(10, dimensions.height - 6);
+
+  return React.createElement(
+    Box,
+    {
+      flexDirection: 'column',
+      width: dimensions.width,
+      height: dimensions.height,
+    },
+    // Header
+    React.createElement(
+      Box,
+      {
+        borderStyle: 'double',
+        borderColor: 'cyan',
+        justifyContent: 'center',
+        paddingX: 1,
+        flexShrink: 0,
+      },
+      React.createElement(Text, { bold: true, color: 'cyan' }, 'AgileFlow TUI'),
+      React.createElement(Text, { dimColor: true }, ` v${VERSION}`)
+    ),
+
+    // Main content area (sessions + output + optional trace)
+    React.createElement(
+      Box,
+      {
+        flexDirection: 'row',
+        flexGrow: 1,
+        height: contentHeight,
+      },
+      // Session panel (left sidebar)
+      React.createElement(
+        Box,
+        {
+          width: sessionPanelWidth,
+          flexShrink: 0,
+          borderStyle: 'single',
+          borderColor: 'gray',
+          flexDirection: 'column',
+          overflow: 'hidden',
+        },
+        React.createElement(SessionPanel, { refreshInterval: 3000 })
+      ),
+
+      // Output panel (center, grows to fill)
+      React.createElement(
+        Box,
+        {
+          flexGrow: 1,
+          flexDirection: 'column',
+          borderStyle: 'single',
+          borderColor: 'green',
+          overflow: 'hidden',
+        },
+        React.createElement(OutputPanel, {
+          maxMessages: 50,
+          showTimestamp: !isNarrow,
+        })
+      ),
+
+      // Trace panel (right, optional)
+      showTrace &&
+        React.createElement(
+          Box,
+          {
+            width: isNarrow ? 25 : 35,
+            flexShrink: 0,
+            borderStyle: 'single',
+            borderColor: 'magenta',
+            flexDirection: 'column',
+            overflow: 'hidden',
+          },
+          React.createElement(TracePanel, null)
+        )
+    ),
+
+    // Status bar (bottom)
+    React.createElement(StatusBar, { loopStatus, showTrace })
+  );
+}
+
+module.exports = { Dashboard, StatusBar };

package/scripts/tui/index.js

@@ -20,12 +20,47 @@
  *   1-9 - Switch session focus
  */
 
-// Use the simple TUI implementation (pure Node.js, no React dependencies)
-const { main } = require('./simple-tui');
+// Ink-based TUI is disabled due to React version conflicts in monorepo
+// The simple-tui provides responsive layouts and works reliably
+const useInk = false;
+
+/**
+ * Main entry point
+ */
+async function main() {
+  if (useInk) {
+    // Use the React/Ink-based Dashboard for modern terminals
+    const React = require('react');
+    const { render } = require('ink');
+    const { Dashboard } = require('./Dashboard');
+
+    // Handle actions from the dashboard
+    const handleAction = action => {
+      // TODO: Implement loop control actions
+      // console.log('Action:', action);
+    };
+
+    // Render the dashboard
+    const { waitUntilExit } = render(
+      React.createElement(Dashboard, { onAction: handleAction })
+    );
+
+    // Wait for exit
+    await waitUntilExit();
+  } else {
+    // Fallback to simple TUI (pure Node.js, no React)
+    console.log('React/Ink not available, using simple TUI...');
+    const { main: simpleTuiMain } = require('./simple-tui');
+    simpleTuiMain();
+  }
+}
 
 // Run if executed directly
 if (require.main === module) {
-  main();
+  main().catch(err => {
+    console.error('TUI Error:', err.message);
+    process.exit(1);
+  });
 }
 
 module.exports = { main };

package/scripts/tui/panels/OutputPanel.js

@@ -149,8 +149,6 @@ function OutputPanel({
     Box,
     {
       flexDirection: 'column',
-      borderStyle: 'single',
-      borderColor: isConnected ? 'green' : 'gray',
       padding: 1,
       flexGrow: 1,
     },

package/scripts/tui/panels/SessionPanel.js

@@ -134,7 +134,7 @@ function SessionPanel({ refreshInterval = 5000 }) {
   if (sessions.length === 0) {
     return React.createElement(
       Box,
-      { flexDirection: 'column', borderStyle: 'single', borderColor: 'gray', padding: 1 },
+      { flexDirection: 'column', padding: 1 },
       React.createElement(Text, { bold: true, color: 'cyan' }, 'SESSIONS'),
       React.createElement(Text, { dimColor: true, italic: true }, 'No active sessions')
     );
@@ -142,7 +142,7 @@ function SessionPanel({ refreshInterval = 5000 }) {
 
   return React.createElement(
     Box,
-    { flexDirection: 'column', borderStyle: 'single', borderColor: 'gray', padding: 1 },
+    { flexDirection: 'column', padding: 1 },
     // Header
     React.createElement(
       Box,

package/scripts/tui/simple-tui.js

@@ -293,116 +293,175 @@ class SimpleTUI {
     // Clear screen
     output.push(ANSI.clear + ANSI.home);
 
-    // Header
-    const title = ' AgileFlow TUI ';
+    // Determine layout mode based on terminal width
+    const isWide = width >= 100;
+    const isNarrow = width < 60;
+
+    // Header - compact on narrow terminals
+    const title = isNarrow ? ' TUI ' : ' AgileFlow TUI ';
     const headerPadding = Math.floor((width - title.length) / 2);
     output.push(
       `${ANSI.bgCyan}${ANSI.black}${'═'.repeat(headerPadding)}${ANSI.bold}${title}${ANSI.reset}${ANSI.bgCyan}${ANSI.black}${'═'.repeat(width - headerPadding - title.length)}${ANSI.reset}`
     );
-    output.push('');
-
-    // Calculate panel widths
-    const leftWidth = Math.floor(width * 0.4);
-    const rightWidth = width - leftWidth - 1;
-    const panelHeight = height - 6; // Leave room for header and footer
 
     // Get data
     const sessions = getSessions();
     const loopStatus = getLoopStatus();
-    const agentEvents = getAgentEvents(8);
+    const agentEvents = getAgentEvents(isNarrow ? 4 : 8);
+
+    if (isWide) {
+      // Side-by-side layout for wide terminals
+      this.renderSideBySide(output, width, height, sessions, loopStatus, agentEvents);
+    } else {
+      // Stacked layout for normal/narrow terminals
+      this.renderStacked(output, width, height, sessions, loopStatus, agentEvents, isNarrow);
+    }
+
+    // Output everything
+    process.stdout.write(output.join('\n'));
+  }
+
+  renderSideBySide(output, width, height, sessions, loopStatus, agentEvents) {
+    // Calculate panel widths: 30% sessions, 70% output
+    const leftWidth = Math.max(25, Math.floor(width * 0.3));
+    const rightWidth = width - leftWidth - 3;
+    const panelHeight = Math.max(6, height - 5);
+
+    // Build both panels line by line
+    const leftLines = this.buildSessionPanel(leftWidth, panelHeight, sessions);
+    const rightLines = this.buildOutputPanel(rightWidth, panelHeight, agentEvents);
+
+    // Combine side by side
+    for (let i = 0; i < panelHeight; i++) {
+      const left = leftLines[i] || pad('', leftWidth);
+      const right = rightLines[i] || pad('', rightWidth);
+      output.push(`${left} ${right}`);
+    }
+
+    // Status bar and footer
+    this.renderStatusBar(output, width, loopStatus);
+  }
+
+  renderStacked(output, width, height, sessions, loopStatus, agentEvents, isNarrow) {
+    // Calculate heights
+    const sessionHeight = isNarrow ? 4 : Math.min(6, sessions.length * 3 + 2);
+    const outputHeight = Math.max(4, height - sessionHeight - 5);
+
+    // Build panels
+    const sessionLines = this.buildSessionPanel(width - 2, sessionHeight, sessions);
+    const outputLines = this.buildOutputPanel(width - 2, outputHeight, agentEvents);
+
+    // Add session panel
+    for (const line of sessionLines) {
+      output.push(line);
+    }
+    output.push('');
+
+    // Add output panel
+    for (const line of outputLines) {
+      output.push(line);
+    }
+
+    // Status bar and footer
+    this.renderStatusBar(output, width, loopStatus);
+  }
+
+  buildSessionPanel(panelWidth, panelHeight, sessions) {
+    const lines = [];
+    const innerWidth = panelWidth - 2;
 
-    // Build left panel (sessions)
-    output.push(`${ANSI.cyan}${ANSI.bold}┌─ SESSIONS ─${'─'.repeat(leftWidth - 14)}┐${ANSI.reset}`);
+    // Header
+    const header = `─ SESSIONS ─`;
+    lines.push(`${ANSI.cyan}┌${header}${'─'.repeat(Math.max(0, innerWidth - header.length))}┐${ANSI.reset}`);
 
     if (sessions.length === 0) {
-      output.push(
-        `${ANSI.cyan}│${ANSI.reset} ${ANSI.dim}No active sessions${ANSI.reset}${' '.repeat(leftWidth - 21)}${ANSI.cyan}│${ANSI.reset}`
-      );
+      lines.push(`${ANSI.cyan}│${ANSI.reset} ${ANSI.dim}${pad('No active sessions', innerWidth)}${ANSI.reset}${ANSI.cyan}│${ANSI.reset}`);
     } else {
-      for (const session of sessions.slice(0, 5)) {
-        const indicator = session.current ? `${ANSI.green}>` : ' ';
+      const maxSessions = Math.floor((panelHeight - 2) / 2);
+      for (const session of sessions.slice(0, maxSessions)) {
+        const indicator = session.current ? `${ANSI.green}▶` : ' ';
         const name = `Session ${session.id}${session.is_main ? ' [main]' : ''}`;
-        const branch = session.branch || 'unknown';
-        const story = session.story || 'none';
-
-        output.push(
-          `${ANSI.cyan}│${ANSI.reset} ${indicator} ${ANSI.bold}${pad(name, leftWidth - 6)}${ANSI.reset}${ANSI.cyan}│${ANSI.reset}`
-        );
-        output.push(
-          `${ANSI.cyan}│${ANSI.reset}   ${ANSI.dim}Branch:${ANSI.reset} ${ANSI.cyan}${pad(branch, leftWidth - 12)}${ANSI.reset}${ANSI.cyan}│${ANSI.reset}`
-        );
-        output.push(
-          `${ANSI.cyan}│${ANSI.reset}   ${ANSI.dim}Story:${ANSI.reset}  ${ANSI.yellow}${pad(story, leftWidth - 12)}${ANSI.reset}${ANSI.cyan}│${ANSI.reset}`
-        );
+        lines.push(`${ANSI.cyan}│${ANSI.reset}${indicator} ${ANSI.bold}${pad(name, innerWidth - 2)}${ANSI.reset}${ANSI.cyan}│${ANSI.reset}`);
+
+        const info = `${session.branch || '?'}${session.story ? ' / ' + session.story : ''}`;
+        lines.push(`${ANSI.cyan}│${ANSI.reset}  ${ANSI.dim}${pad(info, innerWidth - 1)}${ANSI.reset}${ANSI.cyan}│${ANSI.reset}`);
       }
     }
 
-    // Fill remaining space in left panel
-    const usedRows = sessions.length === 0 ? 1 : Math.min(sessions.length, 5) * 3;
-    const remainingRows = Math.max(0, panelHeight - usedRows - 2);
-    for (let i = 0; i < remainingRows; i++) {
-      output.push(
-        `${ANSI.cyan}│${ANSI.reset}${' '.repeat(leftWidth - 2)}${ANSI.cyan}│${ANSI.reset}`
-      );
+    // Fill remaining rows
+    while (lines.length < panelHeight - 1) {
+      lines.push(`${ANSI.cyan}│${ANSI.reset}${' '.repeat(innerWidth)}${ANSI.cyan}│${ANSI.reset}`);
     }
 
-    output.push(`${ANSI.cyan}└${'─'.repeat(leftWidth - 2)}┘${ANSI.reset}`);
+    // Footer
+    lines.push(`${ANSI.cyan}└${'─'.repeat(innerWidth)}┘${ANSI.reset}`);
 
-    // Move cursor to right panel position and draw
-    // For simplicity, we'll draw the right panel below the left panel
-    output.push('');
-    output.push(
-      `${ANSI.green}${ANSI.bold}┌─ AGENT OUTPUT ─${'─'.repeat(width - 19)}┐${ANSI.reset}`
-    );
+    return lines;
+  }
 
-    if (agentEvents.length === 0 && this.messages.length === 0) {
-      output.push(
-        `${ANSI.green}│${ANSI.reset} ${ANSI.dim}Waiting for agent activity...${ANSI.reset}${' '.repeat(width - 34)}${ANSI.green}│${ANSI.reset}`
-      );
-    } else {
-      // Show recent events
-      const allMessages = [
-        ...agentEvents.map(e => ({
-          timestamp: e.timestamp ? new Date(e.timestamp).toLocaleTimeString() : '',
-          agent: e.agent || 'unknown',
-          message:
-            e.message ||
-            (e.event === 'iteration' ? `Iteration ${e.iter}` : e.event || JSON.stringify(e)),
-        })),
-        ...this.messages,
-      ].slice(-8);
+  buildOutputPanel(panelWidth, panelHeight, agentEvents) {
+    const lines = [];
+    const innerWidth = panelWidth - 2;
 
+    // Header
+    const header = `─ OUTPUT ─`;
+    lines.push(`${ANSI.green}┌${header}${'─'.repeat(Math.max(0, innerWidth - header.length))}┐${ANSI.reset}`);
+
+    // Combine events and messages
+    const allMessages = [
+      ...agentEvents.map(e => ({
+        time: e.timestamp ? new Date(e.timestamp).toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' }) : '',
+        agent: (e.agent || 'unknown').replace('agileflow-', ''),
+        msg: e.message || (e.event === 'iteration' ? `Iter ${e.iter}` : e.event || ''),
+      })),
+      ...this.messages.map(m => ({
+        time: m.timestamp || '',
+        agent: (m.agent || 'unknown').replace('agileflow-', ''),
+        msg: m.message || '',
+      })),
+    ].slice(-(panelHeight - 2));
+
+    if (allMessages.length === 0) {
+      lines.push(`${ANSI.green}│${ANSI.reset} ${ANSI.dim}${pad('Waiting for activity...', innerWidth)}${ANSI.reset}${ANSI.green}│${ANSI.reset}`);
+    } else {
       for (const msg of allMessages) {
-        const line = `[${msg.timestamp}] [${ANSI.cyan}${msg.agent}${ANSI.reset}] ${msg.message}`;
-        const cleanLine = `[${msg.timestamp}] [${msg.agent}] ${msg.message}`;
-        const padding = width - cleanLine.length - 4;
-        output.push(
-          `${ANSI.green}│${ANSI.reset} ${line}${' '.repeat(Math.max(0, padding))}${ANSI.green}│${ANSI.reset}`
-        );
+        const prefix = `${msg.time} [${msg.agent}] `;
+        const maxMsgLen = Math.max(10, innerWidth - prefix.length - 1);
+        const truncatedMsg = msg.msg.length > maxMsgLen ? msg.msg.slice(0, maxMsgLen - 2) + '..' : msg.msg;
+        const line = `${ANSI.dim}${msg.time}${ANSI.reset} [${ANSI.cyan}${msg.agent}${ANSI.reset}] ${truncatedMsg}`;
+        const cleanLen = prefix.length + truncatedMsg.length;
+        lines.push(`${ANSI.green}│${ANSI.reset} ${line}${' '.repeat(Math.max(0, innerWidth - cleanLen - 1))}${ANSI.green}│${ANSI.reset}`);
       }
     }
 
-    output.push(`${ANSI.green}└${'─'.repeat(width - 2)}┘${ANSI.reset}`);
-
-    // Loop status (if active)
-    if (loopStatus.active) {
-      output.push('');
-      const statusIcon = loopStatus.paused
-        ? `${ANSI.yellow}||${ANSI.reset}`
-        : `${ANSI.green}>${ANSI.reset}`;
-      output.push(
-        `${statusIcon} ${ANSI.bold}Loop:${ANSI.reset} ${loopStatus.epic || 'unknown'} | Story: ${loopStatus.currentStory || 'none'} | ${progressBar(loopStatus.iteration, loopStatus.maxIterations, 15)}`
-      );
+    // Fill remaining rows
+    while (lines.length < panelHeight - 1) {
+      lines.push(`${ANSI.green}│${ANSI.reset}${' '.repeat(innerWidth)}${ANSI.green}│${ANSI.reset}`);
     }
 
-    // Footer with key bindings
+    // Footer
+    lines.push(`${ANSI.green}└${'─'.repeat(innerWidth)}┘${ANSI.reset}`);
+
+    return lines;
+  }
+
+  renderStatusBar(output, width, loopStatus) {
     output.push('');
-    output.push(
-      `${ANSI.dim}[Q]uit  [S]tart  [P]ause  [R]esume  [T]race  [1-9]Sessions  ${ANSI.reset}${ANSI.cyan}AgileFlow v2.90.0${ANSI.reset}`
-    );
 
-    // Output everything
-    process.stdout.write(output.join('\n'));
+    // Loop status
+    if (loopStatus.active) {
+      const statusIcon = loopStatus.paused ? `${ANSI.yellow}⏸${ANSI.reset}` : `${ANSI.green}▶${ANSI.reset}`;
+      const bar = progressBar(loopStatus.iteration, loopStatus.maxIterations, Math.min(15, Math.floor(width / 6)));
+      const info = `${loopStatus.epic || ''}${loopStatus.currentStory ? ' / ' + loopStatus.currentStory : ''}`;
+      output.push(`${statusIcon} ${ANSI.bold}${info}${ANSI.reset} ${bar}`);
+    }
+
+    // Key bindings - compact on narrow terminals
+    const keys = width >= 70
+      ? `${ANSI.dim}[Q]uit [S]tart [P]ause [R]esume [T]race [1-9]Sessions${ANSI.reset}`
+      : `${ANSI.dim}Q S P R T 1-9${ANSI.reset}`;
+    const version = `${ANSI.cyan}v2.90.3${ANSI.reset}`;
+    output.push(`${keys}  ${version}`);
   }
 }