@appkit/llamacpp-cli 1.5.0 → 1.7.0

package/src/tui/MonitorApp.ts

@@ -2,6 +2,8 @@ import blessed from 'blessed';
 import { ServerConfig } from '../types/server-config.js';
 import { MetricsAggregator } from '../lib/metrics-aggregator.js';
 import { MonitorData } from '../types/monitor-types.js';
+import { HistoryManager } from '../lib/history-manager.js';
+import { createHistoricalUI } from './HistoricalMonitorApp.js';
 
 export async function createMonitorUI(
   screen: blessed.Widgets.Screen,
@@ -13,6 +15,7 @@ export async function createMonitorUI(
   let lastGoodData: MonitorData | null = null;
   const STALE_THRESHOLD = 5;
   const metricsAggregator = new MetricsAggregator(server);
+  const historyManager = new HistoryManager(server.id);
 
   // Single scrollable content box
   const contentBox = blessed.box({
@@ -51,13 +54,21 @@ export async function createMonitorUI(
       consecutiveFailures = 0;
       lastGoodData = data;
 
+      // Append to history (silent failure)
+      // Only save history for servers that are healthy and not stale
+      if (!data.server.stale && data.server.healthy) {
+        historyManager.appendSnapshot(data.server, data.system).catch(() => {
+          // Don't interrupt monitoring on history write failure
+        });
+      }
+
       const termWidth = (screen.width as number) || 80;
       const divider = '─'.repeat(termWidth - 2); // Account for padding
 
       let content = '';
 
       // Header
-      content += '{bold}{blue-fg}═══ llama.cpp Server Monitor ═══{/blue-fg}{/bold}\n\n';
+      content += `{bold}{blue-fg}═══ ${server.modelName} (${server.port}){/blue-fg}{/bold}\n\n`;
 
       // Server Info
       content += '{bold}Server Information{/bold}\n';
@@ -122,44 +133,40 @@ export async function createMonitorUI(
         }
       }
 
-      // System Resources
-      content += '{bold}System Resources{/bold}\n';
+      // Model Resources (per-process metrics)
+      content += '{bold}Model Resources{/bold}\n';
       content += divider + '\n';
 
-      if (data.system) {
-        if (data.system.gpuUsage !== undefined) {
-          const bar = createProgressBar(data.system.gpuUsage);
-          content += `GPU:    {cyan-fg}${bar}{/cyan-fg} ${Math.round(data.system.gpuUsage)}%`;
-
-          if (data.system.temperature !== undefined) {
-            content += ` - ${Math.round(data.system.temperature)}°C`;
-          }
+      // GPU: System-wide (can't get per-process on macOS)
+      if (data.system && data.system.gpuUsage !== undefined) {
+        const bar = createProgressBar(data.system.gpuUsage);
+        content += `GPU:    {cyan-fg}${bar}{/cyan-fg} ${Math.round(data.system.gpuUsage)}% {gray-fg}(system){/gray-fg}`;
 
-          content += '\n';
+        if (data.system.temperature !== undefined) {
+          content += ` - ${Math.round(data.system.temperature)}°C`;
         }
 
-        if (data.system.cpuUsage !== undefined) {
-          const bar = createProgressBar(data.system.cpuUsage);
-          content += `CPU:    {cyan-fg}${bar}{/cyan-fg} ${Math.round(data.system.cpuUsage)}%\n`;
-        }
+        content += '\n';
+      }
 
-        if (data.system.aneUsage !== undefined && data.system.aneUsage > 1) {
-          const bar = createProgressBar(data.system.aneUsage);
-          content += `ANE:    {cyan-fg}${bar}{/cyan-fg} ${Math.round(data.system.aneUsage)}%\n`;
-        }
+      // CPU: Per-process
+      if (data.server.processCpuUsage !== undefined) {
+        const bar = createProgressBar(data.server.processCpuUsage);
+        content += `CPU:    {cyan-fg}${bar}{/cyan-fg} ${Math.round(data.server.processCpuUsage)}%\n`;
+      }
 
-        if (data.system.memoryTotal > 0) {
-          const memoryUsedGB = data.system.memoryUsed / (1024 ** 3);
-          const memoryTotalGB = data.system.memoryTotal / (1024 ** 3);
-          const memoryPercentage = (data.system.memoryUsed / data.system.memoryTotal) * 100;
-          const bar = createProgressBar(memoryPercentage);
-          content += `Memory: {cyan-fg}${bar}{/cyan-fg} ${Math.round(memoryPercentage)}% `;
-          content += `(${memoryUsedGB.toFixed(1)} / ${memoryTotalGB.toFixed(1)} GB)\n`;
-        }
+      // Memory: Per-process
+      if (data.server.processMemory !== undefined) {
+        const memoryGB = data.server.processMemory / (1024 ** 3);
+        // For progress bar, estimate against typical model sizes (e.g., 8GB max)
+        const estimatedMax = 8;
+        const memoryPercentage = Math.min((memoryGB / estimatedMax) * 100, 100);
+        const bar = createProgressBar(memoryPercentage);
+        content += `Memory: {cyan-fg}${bar}{/cyan-fg} ${memoryGB.toFixed(2)} GB\n`;
+      }
 
-        if (data.system.warnings && data.system.warnings.length > 0) {
-          content += `\n{yellow-fg}⚠ ${data.system.warnings.join(', ')}{/yellow-fg}\n`;
-        }
+      if (data.system && data.system.warnings && data.system.warnings.length > 0) {
+        content += `\n{yellow-fg}⚠ ${data.system.warnings.join(', ')}{/yellow-fg}\n`;
       }
 
       content += '\n';
@@ -168,7 +175,7 @@ export async function createMonitorUI(
       content += divider + '\n';
       content += `{gray-fg}Updated: ${data.lastUpdated.toLocaleTimeString()} | `;
       content += `Interval: ${updateInterval}ms | `;
-      content += `[R]efresh [+/-]Speed [Q]uit{/gray-fg}`;
+      content += `[H]istory [R]efresh [+/-]Speed [Q]uit{/gray-fg}`;
 
       contentBox.setContent(content);
       screen.render();
@@ -185,7 +192,7 @@ export async function createMonitorUI(
         let content = '';
 
         // Header with stale warning
-        content += '{bold}{blue-fg}═══ llama.cpp Server Monitor ═══{/blue-fg}{/bold}\n';
+        content += `{bold}{blue-fg}═══ ${server.modelName} (${server.port}){/blue-fg}{/bold}\n`;
         content += '{bold}{yellow-fg}⚠ CONNECTION LOST - SHOWING STALE DATA{/yellow-fg}{/bold}\n\n';
 
         // Server Info
@@ -250,44 +257,39 @@ export async function createMonitorUI(
           }
         }
 
-        // System Resources
-        content += '{bold}System Resources{/bold} {yellow-fg}(stale){/yellow-fg}\n';
+        // Model Resources (per-process metrics)
+        content += '{bold}Model Resources{/bold} {yellow-fg}(stale){/yellow-fg}\n';
         content += divider + '\n';
 
-        if (lastGoodData.system) {
-          if (lastGoodData.system.gpuUsage !== undefined) {
-            const bar = createProgressBar(lastGoodData.system.gpuUsage);
-            content += `GPU:    {cyan-fg}${bar}{/cyan-fg} ${Math.round(lastGoodData.system.gpuUsage)}%`;
-
-            if (lastGoodData.system.temperature !== undefined) {
-              content += ` - ${Math.round(lastGoodData.system.temperature)}°C`;
-            }
+        // GPU: System-wide (can't get per-process on macOS)
+        if (lastGoodData.system && lastGoodData.system.gpuUsage !== undefined) {
+          const bar = createProgressBar(lastGoodData.system.gpuUsage);
+          content += `GPU:    {cyan-fg}${bar}{/cyan-fg} ${Math.round(lastGoodData.system.gpuUsage)}% {gray-fg}(system){/gray-fg}`;
 
-            content += '\n';
+          if (lastGoodData.system.temperature !== undefined) {
+            content += ` - ${Math.round(lastGoodData.system.temperature)}°C`;
           }
 
-          if (lastGoodData.system.cpuUsage !== undefined) {
-            const bar = createProgressBar(lastGoodData.system.cpuUsage);
-            content += `CPU:    {cyan-fg}${bar}{/cyan-fg} ${Math.round(lastGoodData.system.cpuUsage)}%\n`;
-          }
+          content += '\n';
+        }
 
-          if (lastGoodData.system.aneUsage !== undefined && lastGoodData.system.aneUsage > 1) {
-            const bar = createProgressBar(lastGoodData.system.aneUsage);
-            content += `ANE:    {cyan-fg}${bar}{/cyan-fg} ${Math.round(lastGoodData.system.aneUsage)}%\n`;
-          }
+        // CPU: Per-process
+        if (lastGoodData.server.processCpuUsage !== undefined) {
+          const bar = createProgressBar(lastGoodData.server.processCpuUsage);
+          content += `CPU:    {cyan-fg}${bar}{/cyan-fg} ${Math.round(lastGoodData.server.processCpuUsage)}%\n`;
+        }
 
-          if (lastGoodData.system.memoryTotal > 0) {
-            const memoryUsedGB = lastGoodData.system.memoryUsed / (1024 ** 3);
-            const memoryTotalGB = lastGoodData.system.memoryTotal / (1024 ** 3);
-            const memoryPercentage = (lastGoodData.system.memoryUsed / lastGoodData.system.memoryTotal) * 100;
-            const bar = createProgressBar(memoryPercentage);
-            content += `Memory: {cyan-fg}${bar}{/cyan-fg} ${Math.round(memoryPercentage)}% `;
-            content += `(${memoryUsedGB.toFixed(1)} / ${memoryTotalGB.toFixed(1)} GB)\n`;
-          }
+        // Memory: Per-process
+        if (lastGoodData.server.processMemory !== undefined) {
+          const memoryGB = lastGoodData.server.processMemory / (1024 ** 3);
+          const estimatedMax = 8;
+          const memoryPercentage = Math.min((memoryGB / estimatedMax) * 100, 100);
+          const bar = createProgressBar(memoryPercentage);
+          content += `Memory: {cyan-fg}${bar}{/cyan-fg} ${memoryGB.toFixed(2)} GB\n`;
+        }
 
-          if (lastGoodData.system.warnings && lastGoodData.system.warnings.length > 0) {
-            content += `\n{yellow-fg}⚠ ${lastGoodData.system.warnings.join(', ')}{/yellow-fg}\n`;
-          }
+        if (lastGoodData.system && lastGoodData.system.warnings && lastGoodData.system.warnings.length > 0) {
+          content += `\n{yellow-fg}⚠ ${lastGoodData.system.warnings.join(', ')}{/yellow-fg}\n`;
         }
 
         content += '\n';
@@ -296,7 +298,7 @@ export async function createMonitorUI(
         content += divider + '\n';
         content += `{yellow-fg}Last good data: ${lastGoodData.lastUpdated.toLocaleTimeString()}{/yellow-fg}\n`;
         content += `{yellow-fg}Connection failures: ${consecutiveFailures}{/yellow-fg}\n`;
-        content += `{gray-fg}Interval: ${updateInterval}ms | [R]efresh [+/-]Speed [Q]uit{/gray-fg}`;
+        content += `{gray-fg}Interval: ${updateInterval}ms | [H]istory [R]efresh [+/-]Speed [Q]uit{/gray-fg}`;
 
         contentBox.setContent(content);
         screen.render();
@@ -340,6 +342,29 @@ export async function createMonitorUI(
     startPolling();
   });
 
+  // Track whether we're in historical view to prevent H key conflicts
+  let inHistoricalView = false;
+
+  screen.key(['h', 'H'], async () => {
+    // Prevent entering historical view if already there
+    if (inHistoricalView) return;
+
+    // Keep polling in background for live historical updates
+    // Remove current content box
+    screen.remove(contentBox);
+
+    // Mark that we're in historical view
+    inHistoricalView = true;
+
+    // Show historical view (polling continues in background)
+    await createHistoricalUI(screen, server, () => {
+      // Mark that we've left historical view
+      inHistoricalView = false;
+      // Re-attach content box when returning from history
+      screen.append(contentBox);
+    });
+  });
+
   screen.key(['q', 'Q', 'C-c'], () => {
     if (intervalId) clearInterval(intervalId);
     screen.destroy();