@covibes/zeroshot 1.0.1 → 1.1.3

package/task-lib/tui/index.js

@@ -0,0 +1,197 @@
+/**
+ * TUI - Task Logs Dashboard
+ *
+ * Coordinates:
+ * - Screen and layout
+ * - Log file polling
+ * - Rendering
+ * - Keybindings
+ */
+
+import blessed from 'blessed';
+import { createLayout } from './layout.js';
+import Renderer from './renderer.js';
+import { statSync, openSync, readSync, closeSync } from 'fs';
+
+class TaskLogsTUI {
+  constructor(options) {
+    this.taskId = options.taskId;
+    this.logFile = options.logFile;
+    this.taskInfo = options.taskInfo;
+    this.pid = options.pid;
+
+    // State
+    this.lastSize = 0;
+    this.pollInterval = null;
+    this.widgets = null;
+    this.screen = null;
+    this.renderer = null;
+    this.resourceStats = { cpu: 0, memory: 0 };
+  }
+
+  async start() {
+    // Create screen
+    this.screen = blessed.screen({
+      smartCSR: true,
+      title: `Task Logs: ${this.taskId}`,
+      dockBorders: true,
+      fullUnicode: true,
+    });
+
+    // Create layout
+    this.widgets = createLayout(this.screen, this.taskId);
+
+    // Create renderer
+    this.renderer = new Renderer(this.widgets, this.screen);
+
+    // Setup keybindings
+    this._setupKeybindings();
+
+    // Render initial task info
+    this.renderer.renderTaskInfo(this.taskInfo, this.resourceStats);
+
+    // Read existing log content
+    await this._readExistingLogs();
+
+    // Start polling for new content
+    this._startPolling();
+
+    // Initial render
+    this.screen.render();
+  }
+
+  _setupKeybindings() {
+    // Quit on 'q' or Ctrl+C
+    this.screen.key(['q', 'C-c'], () => {
+      this.exit();
+    });
+
+    // Scroll with arrow keys (blessed handles this automatically for logsBox)
+    // Just ensure logsBox has focus
+    this.widgets.logsBox.focus();
+  }
+
+  _readExistingLogs() {
+    try {
+      const fd = openSync(this.logFile, 'r');
+      const size = statSync(this.logFile).size;
+
+      if (size > 0) {
+        const buffer = Buffer.alloc(size);
+        readSync(fd, buffer, 0, size, 0);
+        closeSync(fd);
+
+        const content = buffer.toString();
+        const lines = content.split('\n').filter((l) => l.trim());
+
+        this.renderer.renderLogLines(lines);
+        this.screen.render();
+      }
+
+      this.lastSize = size;
+    } catch {
+      // File might not exist yet
+      this.lastSize = 0;
+    }
+  }
+
+  _startPolling() {
+    let noChangeCount = 0;
+
+    this.pollInterval = setInterval(() => {
+      try {
+        const currentSize = statSync(this.logFile).size;
+
+        if (currentSize > this.lastSize) {
+          // Read new content
+          const buffer = Buffer.alloc(currentSize - this.lastSize);
+          const fd = openSync(this.logFile, 'r');
+          readSync(fd, buffer, 0, buffer.length, this.lastSize);
+          closeSync(fd);
+
+          // Parse and render new lines
+          const newContent = buffer.toString();
+          const newLines = newContent.split('\n').filter((l) => l.trim());
+
+          this.renderer.renderLogLines(newLines);
+          this.screen.render();
+
+          this.lastSize = currentSize;
+          noChangeCount = 0;
+        } else {
+          noChangeCount++;
+
+          // Check if process is still running after 5 seconds of no output
+          if (noChangeCount >= 10 && this.pid && !this._isProcessRunning(this.pid)) {
+            // Read any final content
+            const finalSize = statSync(this.logFile).size;
+            if (finalSize > this.lastSize) {
+              const buffer = Buffer.alloc(finalSize - this.lastSize);
+              const fd = openSync(this.logFile, 'r');
+              readSync(fd, buffer, 0, buffer.length, this.lastSize);
+              closeSync(fd);
+
+              const finalContent = buffer.toString();
+              const finalLines = finalContent.split('\n').filter((l) => l.trim());
+
+              this.renderer.renderLogLines(finalLines);
+            }
+
+            // Update task status to completed
+            this.taskInfo.status = 'completed';
+            this.renderer.renderTaskInfo(this.taskInfo, this.resourceStats);
+            this.screen.render();
+
+            // Show completion message
+            this.widgets.logsBox.log('{dim}--- Task completed ---{/}');
+            this.screen.render();
+          }
+        }
+
+        // Update resource stats periodically
+        if (this.pid && this._isProcessRunning(this.pid)) {
+          this.resourceStats = this._getResourceStats(this.pid);
+          this.renderer.renderTaskInfo(this.taskInfo, this.resourceStats);
+          this.screen.render();
+        }
+      } catch (error) {
+        // File might have been deleted
+        this.widgets.logsBox.log(`{red-fg}Error reading log: ${error.message}{/}`);
+        this.screen.render();
+      }
+    }, 500); // Poll every 500ms
+  }
+
+  _isProcessRunning(pid) {
+    if (!pid) return false;
+
+    try {
+      // Send signal 0 (no-op) to check if process exists
+      process.kill(pid, 0);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  _getResourceStats(_pid) {
+    // This is a simplified version - full implementation would use pidusage or similar
+    // For now, return dummy data (the important part is the UI structure)
+    return {
+      cpu: 0,
+      memory: 0,
+    };
+  }
+
+  exit() {
+    if (this.pollInterval) {
+      clearInterval(this.pollInterval);
+    }
+    if (this.screen) {
+      this.screen.destroy();
+    }
+    process.exit(0);
+  }
+}
+
+export default TaskLogsTUI;

package/task-lib/tui/layout.js

@@ -0,0 +1,111 @@
+/**
+ * TUI Layout for Task Logs
+ * Creates a blessed layout for monitoring a single task
+ *
+ * Layout:
+ * - Top: Task info box (ID, status, runtime, CPU, memory)
+ * - Middle: Live logs (scrollable, auto-scroll to bottom)
+ * - Bottom: Help bar (keyboard shortcuts)
+ */
+
+import blessed from 'blessed';
+import contrib from 'blessed-contrib';
+
+/**
+ * Create task logs TUI layout
+ * @param {blessed.screen} screen - Blessed screen instance
+ * @param {string} taskId - Task ID being monitored
+ * @returns {object} Layout widgets
+ */
+function createLayout(screen, taskId) {
+  // Create 20x12 grid for responsive layout
+  const grid = new contrib.grid({ rows: 20, cols: 12, screen });
+
+  // ============================================================
+  // TASK INFO BOX (3 rows x 12 cols)
+  // Shows: Task ID, Status, Runtime, CPU, Memory
+  // ============================================================
+
+  const taskInfoBox = grid.set(0, 0, 3, 12, blessed.box, {
+    label: ` Task: ${taskId} `,
+    content: '',
+    tags: true,
+    border: { type: 'line', fg: 'cyan' },
+    style: {
+      border: { fg: 'cyan' },
+      label: { fg: 'cyan' },
+    },
+    padding: {
+      left: 2,
+      right: 2,
+    },
+  });
+
+  // ============================================================
+  // LIVE LOGS (15 rows x 12 cols)
+  // Scrollable log output with auto-scroll
+  // ============================================================
+
+  const logsBox = grid.set(3, 0, 15, 12, contrib.log, {
+    fg: 'white',
+    label: ' Live Logs ',
+    border: { type: 'line', fg: 'cyan' },
+    tags: true,
+    style: {
+      border: { fg: 'cyan' },
+      label: { fg: 'cyan' },
+      text: { fg: 'white' },
+    },
+    scrollable: true,
+    mouse: true,
+    keyable: true,
+    alwaysScroll: true,
+    scrollbar: {
+      ch: ' ',
+      track: {
+        bg: 'gray',
+      },
+      style: {
+        inverse: true,
+      },
+    },
+  });
+
+  // ============================================================
+  // HELP BAR (2 rows x 12 cols)
+  // Keyboard shortcuts
+  // ============================================================
+
+  const helpBar = grid.set(18, 0, 2, 12, blessed.box, {
+    label: ' Help ',
+    content:
+      '{cyan-fg}[↑/↓]{/} Scroll  ' +
+      '{cyan-fg}[PgUp/PgDn]{/} Page  ' +
+      '{cyan-fg}[Home/End]{/} Top/Bottom  ' +
+      '{cyan-fg}[q]{/} Quit',
+    tags: true,
+    border: { type: 'line', fg: 'cyan' },
+    style: {
+      border: { fg: 'cyan' },
+      label: { fg: 'cyan' },
+      text: { fg: 'white' },
+    },
+    padding: {
+      left: 1,
+      right: 1,
+    },
+  });
+
+  // Focus on logs by default
+  logsBox.focus();
+
+  return {
+    screen,
+    grid,
+    taskInfoBox,
+    logsBox,
+    helpBar,
+  };
+}
+
+export { createLayout };

package/task-lib/tui/renderer.js

@@ -0,0 +1,119 @@
+/**
+ * TUI Renderer for Task Logs
+ * Transforms task data and log events into widget updates
+ */
+
+import { formatTimestamp, formatBytes, formatCPU, stateIcon, parseEvent } from './formatters.js';
+
+class Renderer {
+  /**
+   * Create renderer instance
+   * @param {object} widgets - Widget objects from layout
+   * @param {object} screen - Blessed screen instance
+   */
+  constructor(widgets, screen) {
+    if (!widgets) {
+      throw new Error('Renderer requires widgets object from layout');
+    }
+    if (!screen) {
+      throw new Error('Renderer requires screen instance');
+    }
+
+    this.widgets = widgets;
+    this.screen = screen;
+  }
+
+  /**
+   * Render task info box
+   * @param {object} taskInfo - Task metadata
+   * @param {object} stats - CPU/memory stats
+   */
+  renderTaskInfo(taskInfo, stats = {}) {
+    if (!taskInfo) return;
+
+    const icon = stateIcon(taskInfo.status || 'unknown');
+    const runtime = taskInfo.createdAt ? formatTimestamp(Date.now() - taskInfo.createdAt) : '-';
+    const cpu = stats.cpu !== undefined ? formatCPU(stats.cpu) : '0.0%';
+    const memory = stats.memory !== undefined ? formatBytes(stats.memory) : '0 B';
+
+    const content = [
+      `${icon} {bold}Status:{/bold} {white-fg}${taskInfo.status || 'unknown'}{/}`,
+      `{bold}Runtime:{/bold} {white-fg}${runtime}{/}`,
+      `{bold}CPU:{/bold} {white-fg}${cpu}{/}  {bold}Memory:{/bold} {white-fg}${memory}{/}`,
+      taskInfo.prompt
+        ? `{bold}Task:{/bold} {gray-fg}${taskInfo.prompt.substring(0, 80)}${taskInfo.prompt.length > 80 ? '...' : ''}{/}`
+        : '',
+    ]
+      .filter(Boolean)
+      .join('  ');
+
+    if (this.widgets.taskInfoBox && this.widgets.taskInfoBox.setContent) {
+      this.widgets.taskInfoBox.setContent(content);
+    }
+  }
+
+  /**
+   * Render log entry to logs widget
+   * @param {string} line - Raw log line
+   */
+  renderLogLine(line) {
+    if (!line) return;
+
+    const event = parseEvent(line);
+    if (!event) return;
+
+    let logMessage = '';
+
+    switch (event.type) {
+      case 'text':
+        // Plain text output
+        logMessage = event.text;
+        break;
+
+      case 'tool':
+        // Tool invocation
+        logMessage = `{cyan-fg}[Tool: ${event.toolName}]{/}`;
+        break;
+
+      case 'error':
+        // Error message
+        logMessage = `{red-fg}[ERROR] ${event.text}{/}`;
+        break;
+
+      case 'raw':
+        // Raw non-JSON line
+        logMessage = `{gray-fg}${event.text}{/}`;
+        break;
+
+      default:
+        return;
+    }
+
+    if (this.widgets.logsBox && this.widgets.logsBox.log) {
+      this.widgets.logsBox.log(logMessage);
+    }
+  }
+
+  /**
+   * Render multiple log lines at once
+   * @param {string[]} lines - Array of log lines
+   */
+  renderLogLines(lines) {
+    if (!Array.isArray(lines)) return;
+
+    for (const line of lines) {
+      this.renderLogLine(line);
+    }
+  }
+
+  /**
+   * Trigger screen render
+   */
+  render() {
+    if (this.screen && this.screen.render) {
+      this.screen.render();
+    }
+  }
+}
+
+export default Renderer;