@covibes/zeroshot 1.0.1

package/src/tui/layout.js

@@ -0,0 +1,317 @@
+/**
+ * TUI Dashboard Layout
+ * Creates a blessed-contrib grid with multiple widgets for cluster monitoring
+ *
+ * Layout Grid (20 rows x 12 columns):
+ * - Rows 0-5:   Clusters Table (cols 0-7) | System Stats (cols 8-11)
+ * - Rows 6-11:  Agents Table (cols 0-11)
+ * - Rows 12-17: Live Logs (cols 0-11)
+ * - Rows 18-19: Help Bar (cols 0-11)
+ */
+
+const blessed = require('blessed');
+const contrib = require('blessed-contrib');
+
+/**
+ * Create main TUI layout with grid-based widget organization
+ * @param {blessed.screen} screen - Blessed screen instance
+ * @returns {object} Layout object containing all widgets
+ */
+function createLayout(screen) {
+  // Create 20x12 grid for responsive layout
+  const grid = new contrib.grid({ rows: 20, cols: 12, screen });
+
+  // ============================================================
+  // OVERVIEW MODE LAYOUT:
+  // - Clusters Table (0-16 rows, 8 cols) - LARGE
+  // - System Stats (0-6 rows, 4 cols)
+  // - Help Bar (18-20 rows, 12 cols)
+  //
+  // DETAIL MODE LAYOUT:
+  // - Agents Table (0-9 rows, 12 cols)
+  // - Logs (9-18 rows, 12 cols)
+  // - Help Bar (18-20 rows, 12 cols)
+  // ============================================================
+
+  const clustersTable = grid.set(0, 0, 16, 8, contrib.table, {
+    keys: true,
+    fg: 'white',
+    selectedFg: 'black',
+    selectedBg: 'cyan',
+    interactive: true,
+    label: ' Clusters ',
+    border: { type: 'line', fg: 'cyan' },
+    columnSpacing: 2,
+    columnWidth: [15, 12, 8, 10, 8],
+    style: {
+      header: {
+        fg: 'cyan',
+        bold: true,
+      },
+      cell: {
+        selected: {
+          fg: 'black',
+          bg: 'cyan',
+        },
+      },
+    },
+  });
+
+  // Set initial columns for clusters table
+  clustersTable.setData({
+    headers: ['ID', 'Status', 'Agents', 'Config', 'Uptime'],
+    data: [],
+  });
+
+  const statsBox = grid.set(0, 8, 16, 4, blessed.box, {
+    label: ' System Stats ',
+    content: '',
+    tags: true,
+    border: { type: 'line', fg: 'cyan' },
+    style: {
+      border: { fg: 'cyan' },
+      label: { fg: 'cyan' },
+    },
+    padding: {
+      left: 2,
+      right: 2,
+    },
+  });
+
+  // ============================================================
+  // AGENTS TABLE (Detail mode only - 9 rows x 12 cols full width)
+  // ============================================================
+
+  const agentTable = grid.set(0, 0, 9, 12, contrib.table, {
+    keys: true,
+    fg: 'white',
+    selectedFg: 'black',
+    selectedBg: 'cyan',
+    interactive: true,
+    label: ' Agents ',
+    border: { type: 'line', fg: 'cyan' },
+    columnSpacing: 1,
+    columnWidth: [12, 15, 12, 8, 8, 10, 10],
+    style: {
+      header: {
+        fg: 'cyan',
+        bold: true,
+      },
+      cell: {
+        selected: {
+          fg: 'black',
+          bg: 'cyan',
+        },
+      },
+    },
+  });
+
+  // Set initial columns for agents table
+  agentTable.setData({
+    headers: ['Cluster ID', 'Agent ID', 'Role', 'Status', 'Iter', 'CPU', 'Memory'],
+    data: [],
+  });
+
+  // ============================================================
+  // LOGS (Detail mode only - 9 rows x 12 cols full width)
+  // ============================================================
+
+  const logsBox = grid.set(9, 0, 9, 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,
+  });
+
+  // ============================================================
+  // HELP BAR (2 rows x 12 cols):
+  // - Keyboard shortcuts and commands
+  // ============================================================
+
+  const helpBar = grid.set(18, 0, 2, 12, blessed.box, {
+    label: ' Help ',
+    content:
+      '{cyan-fg}[Enter]{/} View  ' +
+      '{cyan-fg}[↑/↓]{/} Navigate  ' +
+      '{cyan-fg}[K]{/} Kill  ' +
+      '{cyan-fg}[s]{/} Stop  ' +
+      '{cyan-fg}[l]{/} Logs  ' +
+      '{cyan-fg}[r]{/} Refresh  ' +
+      '{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 clusters table by default
+  clustersTable.focus();
+
+  // Initially hide agent table and logs (overview mode)
+  agentTable.hide();
+  logsBox.hide();
+
+  // ============================================================
+  // Widget Navigation
+  // ============================================================
+
+  const widgets = [clustersTable, agentTable, logsBox];
+  let currentFocus = 0;
+
+  /**
+   * Cycle focus to next widget (Tab key)
+   */
+  screen.key(['tab'], () => {
+    currentFocus = (currentFocus + 1) % widgets.length;
+    widgets[currentFocus].focus();
+  });
+
+  /**
+   * Cycle focus to previous widget (Shift+Tab)
+   */
+  screen.key(['shift-tab'], () => {
+    currentFocus = (currentFocus - 1 + widgets.length) % widgets.length;
+    widgets[currentFocus].focus();
+  });
+
+  // ============================================================
+  // Return all widgets for external access
+  // ============================================================
+
+  return {
+    screen,
+    grid,
+    clustersTable,
+    statsBox,
+    agentTable,
+    logsBox,
+    helpBar,
+    widgets,
+    focus: (widgetIndex) => {
+      if (widgetIndex >= 0 && widgetIndex < widgets.length) {
+        currentFocus = widgetIndex;
+        widgets[widgetIndex].focus();
+      }
+    },
+    getCurrentFocus: () => currentFocus,
+  };
+}
+
+/**
+ * Update clusters table with current cluster data
+ * @param {object} clustersTable - Clusters table widget
+ * @param {array} clusters - Array of cluster objects with properties: id, status, agentCount, config, uptime
+ */
+function updateClustersTable(clustersTable, clusters) {
+  const data = clusters.map((cluster) => [
+    cluster.id || 'N/A',
+    cluster.status || 'unknown',
+    String(cluster.agentCount || 0),
+    cluster.config || 'N/A',
+    cluster.uptime || '0s',
+  ]);
+
+  clustersTable.setData({
+    headers: ['ID', 'Status', 'Agents', 'Config', 'Uptime'],
+    data,
+  });
+}
+
+/**
+ * Update agents table with current agent data
+ * @param {object} agentTable - Agents table widget
+ * @param {array} agents - Array of agent objects
+ */
+function updateAgentsTable(agentTable, agents) {
+  const data = agents.map((agent) => [
+    agent.clusterId || 'N/A',
+    agent.id || 'N/A',
+    agent.role || 'worker',
+    agent.status || 'idle',
+    String(agent.iteration || 0),
+    agent.cpu || '0.0%',
+    agent.memory || '0 MB',
+  ]);
+
+  agentTable.setData({
+    headers: ['Cluster ID', 'Agent ID', 'Role', 'Status', 'Iter', 'CPU', 'Memory'],
+    data,
+  });
+}
+
+/**
+ * Update system stats box with current metrics
+ * @param {object} statsBox - Stats box widget
+ * @param {object} stats - Object with properties: totalMemory, usedMemory, totalCPU, activeClusters, totalAgents
+ */
+function updateStatsBox(statsBox, stats) {
+  const content =
+    `{cyan-fg}Active Clusters:{/}\n` +
+    `  {white-fg}${stats.activeClusters || 0}{/}\n\n` +
+    `{cyan-fg}Total Agents:{/}\n` +
+    `  {white-fg}${stats.totalAgents || 0}{/}\n\n` +
+    `{cyan-fg}System Memory:{/}\n` +
+    `  {white-fg}${stats.usedMemory || '0 MB'}{/}\n` +
+    `  {gray-fg}/ ${stats.totalMemory || '0 MB'}{/}\n\n` +
+    `{cyan-fg}System CPU:{/}\n` +
+    `  {white-fg}${stats.totalCPU || '0.0%'}{/}`;
+
+  statsBox.setContent(content);
+}
+
+/**
+ * Add log entry to logs widget
+ * @param {object} logsBox - Logs box widget
+ * @param {string} message - Log message
+ * @param {string} level - Log level (info, warn, error, debug)
+ */
+function addLogEntry(logsBox, message, level = 'info') {
+  const timestamp = new Date().toLocaleTimeString();
+  const levelColor = {
+    info: 'white-fg',
+    warn: 'yellow-fg',
+    error: 'red-fg',
+    debug: 'gray-fg',
+  };
+
+  const color = levelColor[level] || 'white-fg';
+  const logMessage = `{${color}}[${timestamp}]{/} ${message}`;
+
+  logsBox.log(logMessage);
+}
+
+/**
+ * Clear logs widget by resetting content
+ * @param {object} logsBox - Logs box widget
+ */
+function clearLogs(logsBox) {
+  // Log widget doesn't have clearData, so we destroy and recreate
+  // Or use native content clearing
+  if (logsBox._logLines) {
+    logsBox._logLines = [];
+  }
+}
+
+module.exports = {
+  createLayout,
+  updateClustersTable,
+  updateAgentsTable,
+  updateStatsBox,
+  addLogEntry,
+  clearLogs,
+};

package/src/tui/renderer.js

@@ -0,0 +1,194 @@
+/**
+ * TUI Screen Renderer
+ * Transforms polled data into widget updates using formatters and layout widgets
+ */
+
+const { formatTimestamp, formatBytes, formatCPU, stateIcon, truncate } = require('./formatters');
+
+class Renderer {
+  /**
+   * Create renderer instance
+   * @param {object} widgets - Widget objects from layout.js
+   * @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;
+    this.selectedClusterId = null;
+  }
+
+  /**
+   * Set the currently selected cluster ID
+   * @param {string|null} id - Cluster ID to select
+   */
+  setSelectedCluster(id) {
+    this.selectedClusterId = id;
+  }
+
+  /**
+   * Render clusters table with state icons and uptime
+   * @param {Array} clusters - Array of cluster objects
+   */
+  renderClustersTable(clusters) {
+    if (!clusters || !Array.isArray(clusters)) {
+      clusters = [];
+    }
+
+    const data = clusters.map((c) => {
+      if (!c) return ['', '', '', ''];
+
+      const icon = stateIcon(c.state || 'unknown');
+      const uptime =
+        c.state === 'running' && c.createdAt ? formatTimestamp(Date.now() - c.createdAt) : '-';
+      const clusterId = truncate(c.id || '', 18);
+      const state = (c.state || 'unknown').toUpperCase();
+      const agentCount = `${c.agentCount || 0} agents`;
+
+      return [`${icon} ${clusterId}`, state, agentCount, uptime];
+    });
+
+    if (this.widgets.clustersTable && this.widgets.clustersTable.setData) {
+      this.widgets.clustersTable.setData({
+        headers: ['ID', 'State', 'Agents', 'Uptime'],
+        data,
+      });
+    }
+  }
+
+  /**
+   * Render system statistics box with aggregate metrics
+   * @param {Array} clusters - Array of cluster objects
+   * @param {Map} resourceStats - Map of PID -> {cpu, memory}
+   */
+  renderSystemStats(clusters, resourceStats) {
+    if (!clusters || !Array.isArray(clusters)) {
+      clusters = [];
+    }
+    if (!resourceStats || !(resourceStats instanceof Map)) {
+      resourceStats = new Map();
+    }
+
+    // Calculate aggregate stats
+    const activeClusters = clusters.filter((c) => c && c.state === 'running').length;
+    const totalAgents = clusters.reduce((sum, c) => sum + (c?.agentCount || 0), 0);
+
+    // Calculate average CPU and memory from resource stats
+    let totalCpu = 0;
+    let totalMemory = 0;
+    let statCount = 0;
+
+    resourceStats.forEach((stat) => {
+      if (stat && typeof stat.cpu === 'number' && typeof stat.memory === 'number') {
+        totalCpu += stat.cpu;
+        totalMemory += stat.memory;
+        statCount++;
+      }
+    });
+
+    const avgCpu = statCount > 0 ? totalCpu / statCount : 0;
+    const avgMemory = statCount > 0 ? totalMemory / statCount : 0;
+
+    // Format output with blessed color tags
+    const statsText = [
+      '{cyan-fg}Active Clusters:{/} ' + activeClusters,
+      '{cyan-fg}Total Agents:{/}    ' + totalAgents,
+      '{cyan-fg}Avg CPU:{/}         ' + formatCPU(avgCpu),
+      '{cyan-fg}Avg Memory:{/}      ' + formatBytes(avgMemory),
+    ].join('\n');
+
+    if (this.widgets.statsBox && this.widgets.statsBox.setContent) {
+      this.widgets.statsBox.setContent(statsText);
+    }
+  }
+
+  /**
+   * Render agent table for selected cluster
+   * @param {Array} agents - Array of agent objects
+   * @param {Map} resourceStats - Map of PID -> {cpu, memory}
+   */
+  renderAgentTable(agents, resourceStats) {
+    if (!this.selectedClusterId) {
+      // No cluster selected, show empty table
+      if (this.widgets.agentTable && this.widgets.agentTable.setData) {
+        this.widgets.agentTable.setData({
+          headers: ['Agent', 'Role', 'State', 'Iter', 'CPU%', 'Mem'],
+          data: [],
+        });
+      }
+      return;
+    }
+
+    if (!agents || !Array.isArray(agents)) {
+      agents = [];
+    }
+    if (!resourceStats || !(resourceStats instanceof Map)) {
+      resourceStats = new Map();
+    }
+
+    const data = agents.map((a) => {
+      if (!a) return ['', '', '', '', '', ''];
+
+      const pid = a.pid;
+      const stats = resourceStats.get(pid) || { cpu: 0, memory: 0 };
+
+      const agentId = truncate(a.id || '', 12);
+      const role = truncate(a.role || '', 12);
+      const state = a.state || 'unknown';
+      const iteration = `${a.iteration || 0}/${a.maxIterations || 0}`;
+      const cpu = formatCPU(stats.cpu);
+      const memory = formatBytes(stats.memory);
+
+      return [agentId, role, state, iteration, cpu, memory];
+    });
+
+    if (this.widgets.agentTable && this.widgets.agentTable.setData) {
+      this.widgets.agentTable.setData({
+        headers: ['Agent', 'Role', 'State', 'Iter', 'CPU%', 'Mem'],
+        data,
+      });
+    }
+  }
+
+  /**
+   * Render log messages to log widget
+   * @param {Array} messages - Array of message objects
+   */
+  renderLogs(messages) {
+    if (!messages || !Array.isArray(messages)) {
+      return;
+    }
+
+    if (!this.widgets.logsBox || !this.widgets.logsBox.log) {
+      return;
+    }
+
+    messages.forEach((msg) => {
+      if (!msg) return;
+
+      const timestamp = msg.timestamp || Date.now();
+      const time = new Date(timestamp).toLocaleTimeString();
+      const sender = truncate(msg.sender || 'unknown', 15);
+      const text = truncate(msg.content?.text || '', 60);
+
+      this.widgets.logsBox.log(`[${time}] ${sender}: ${text}`);
+    });
+  }
+
+  /**
+   * Trigger screen render to update display
+   */
+  render() {
+    if (this.screen && this.screen.render) {
+      this.screen.render();
+    }
+  }
+}
+
+module.exports = Renderer;