@appkit/llamacpp-cli 1.8.0 → 1.10.0

package/src/tui/HistoricalMonitorApp.ts

@@ -12,6 +12,9 @@ import {
 
 type ViewMode = 'recent' | 'hour';
 
+// Shared view mode across both history screens - persists for the session
+let sharedViewMode: ViewMode = 'recent';
+
 interface ChartStats {
   avg: number;
   max: number;
@@ -155,7 +158,6 @@ export async function createHistoricalUI(
   const REFRESH_INTERVAL = 1000;
   let lastGoodRender: string | null = null;
   let consecutiveErrors = 0;
-  let viewMode: ViewMode = 'recent';
 
   const contentBox = createContentBox();
   screen.append(contentBox);
@@ -163,21 +165,21 @@ export async function createHistoricalUI(
   // Chart configurations
   const chartConfigs: Record<string, ChartConfig> = {
     tokenSpeed: {
-      title: 'Model Token Generation Speed (tok/s)',
+      title: 'Server Token Generation Speed (tok/s)',
       color: asciichart.cyan,
       formatValue: (x: number) => Math.round(x).toFixed(0).padStart(6, ' '),
       isPercentage: false,
       noDataMessage: 'No generation activity in this time window',
     },
     cpu: {
-      title: 'Model CPU Usage (%)',
+      title: 'Server CPU Usage (%)',
       color: asciichart.blue,
       formatValue: (x: number) => Math.round(x).toFixed(0).padStart(6, ' '),
       isPercentage: true,
       noDataMessage: 'No CPU data in this time window',
     },
     memory: {
-      title: 'Model Memory Usage (GB)',
+      title: 'Server Memory Usage (GB)',
       color: asciichart.magenta,
       formatValue: (x: number) => x.toFixed(2).padStart(6, ' '),
       isPercentage: false,
@@ -206,8 +208,8 @@ export async function createHistoricalUI(
       }
 
       // Header
-      const modeLabel = viewMode === 'recent' ? 'Minute' : 'Hour';
-      const modeColor = viewMode === 'recent' ? 'cyan' : 'magenta';
+      const modeLabel = sharedViewMode === 'recent' ? 'Minute' : 'Hour';
+      const modeColor = sharedViewMode === 'recent' ? 'cyan' : 'magenta';
       let content = `{bold}{blue-fg}\u2550\u2550\u2550 ${server.modelName} (${server.port}) {/blue-fg} `;
       content += `{${modeColor}-fg}[${modeLabel}]{/${modeColor}-fg}{/bold}\n\n`;
 
@@ -218,14 +220,14 @@ export async function createHistoricalUI(
         content += 'Historical data is collected when you run the monitor command.\n';
         content += 'Start monitoring to begin collecting history.\n\n';
         content += divider + '\n';
-        content += '{gray-fg}ESC = Back  Q = Quit{/gray-fg}';
+        content += '{gray-fg}[ESC] Back [Q]uit{/gray-fg}';
         contentBox.setContent(content);
         screen.render();
         return;
       }
 
       const maxChartPoints = Math.min(chartWidth, 80);
-      const displaySnapshots = viewMode === 'recent' && snapshots.length > maxChartPoints
+      const displaySnapshots = sharedViewMode === 'recent' && snapshots.length > maxChartPoints
         ? snapshots.slice(-maxChartPoints)
         : snapshots;
 
@@ -249,7 +251,7 @@ export async function createHistoricalUI(
       }
 
       // Apply downsampling based on view mode
-      const useDownsampling = viewMode === 'hour';
+      const useDownsampling = sharedViewMode === 'hour';
       const values = {
         tokenSpeed: useDownsampling
           ? downsampleMaxTimeWithFullHour(rawData.tokenSpeed, maxChartPoints)
@@ -273,7 +275,7 @@ export async function createHistoricalUI(
 
       // Footer
       content += divider + '\n';
-      content += `{gray-fg}Updated: ${new Date().toLocaleTimeString()} | H = Toggle Hour View  ESC = Back  Q = Quit{/gray-fg}`;
+      content += `{gray-fg}[T]oggle Hour View [ESC] Back [Q]uit{/gray-fg}`;
 
       contentBox.setContent(content);
       screen.render();
@@ -290,7 +292,7 @@ export async function createHistoricalUI(
           '{bold}{red-fg}Render Error{/red-fg}{/bold}\n\n' +
           `{red-fg}${errorMsg}{/red-fg}\n\n` +
           `Consecutive errors: ${consecutiveErrors}\n\n` +
-          '{gray-fg}ESC = Back  Q = Quit{/gray-fg}'
+          '{gray-fg}[ESC] Back [Q]uit{/gray-fg}'
         );
       }
       screen.render();
@@ -302,24 +304,43 @@ export async function createHistoricalUI(
       clearInterval(refreshIntervalId);
       refreshIntervalId = null;
     }
+    unregisterHandlers();
   }
 
-  screen.key(['h', 'H'], () => {
-    viewMode = viewMode === 'recent' ? 'hour' : 'recent';
-    render();
-  });
+  // Key handler functions (stored for unregistration)
+  const keyHandlers = {
+    toggle: () => {
+      sharedViewMode = sharedViewMode === 'recent' ? 'hour' : 'recent';
+      render();
+    },
+    escape: () => {
+      cleanup();
+      screen.remove(contentBox);
+      onBack();
+    },
+    quit: () => {
+      cleanup();
+      screen.destroy();
+      process.exit(0);
+    },
+  };
 
-  screen.key(['escape'], () => {
-    cleanup();
-    screen.remove(contentBox);
-    onBack();
-  });
+  function registerHandlers(): void {
+    screen.key(['t', 'T'], keyHandlers.toggle);
+    screen.key(['escape'], keyHandlers.escape);
+    screen.key(['q', 'Q', 'C-c'], keyHandlers.quit);
+  }
 
-  screen.key(['q', 'Q', 'C-c'], () => {
-    cleanup();
-    screen.destroy();
-    process.exit(0);
-  });
+  function unregisterHandlers(): void {
+    screen.unkey('t', keyHandlers.toggle);
+    screen.unkey('T', keyHandlers.toggle);
+    screen.unkey('escape', keyHandlers.escape);
+    screen.unkey('q', keyHandlers.quit);
+    screen.unkey('Q', keyHandlers.quit);
+    screen.unkey('C-c', keyHandlers.quit);
+  }
+
+  registerHandlers();
 
   contentBox.setContent('{cyan-fg}\u23f3 Loading historical data...{/cyan-fg}');
   screen.render();
@@ -339,7 +360,6 @@ export async function createMultiServerHistoricalUI(
   const REFRESH_INTERVAL = 3000;
   let lastGoodRender: string | null = null;
   let consecutiveErrors = 0;
-  let viewMode: ViewMode = 'recent';
 
   const contentBox = createContentBox();
   screen.append(contentBox);
@@ -347,21 +367,21 @@ export async function createMultiServerHistoricalUI(
   // Chart configurations for multi-server view
   const chartConfigs: Record<string, ChartConfig> = {
     tokenSpeed: {
-      title: 'Total Model Token Generation Speed (tok/s)',
+      title: 'Total Server Token Generation Speed (tok/s)',
       color: asciichart.cyan,
       formatValue: (x: number) => Math.round(x).toFixed(0).padStart(6, ' '),
       isPercentage: false,
       noDataMessage: 'No generation activity in this time window',
     },
     cpu: {
-      title: 'Total Model CPU Usage (%)',
+      title: 'Total Server CPU Usage (%)',
       color: asciichart.blue,
       formatValue: (x: number) => Math.round(x).toFixed(0).padStart(6, ' '),
       isPercentage: true,
       noDataMessage: 'No CPU data in this time window',
     },
     memory: {
-      title: 'Total Model Memory Usage (GB)',
+      title: 'Total Server Memory Usage (GB)',
       color: asciichart.magenta,
       formatValue: (x: number) => x.toFixed(2).padStart(6, ' '),
       isPercentage: false,
@@ -384,8 +404,8 @@ export async function createMultiServerHistoricalUI(
       const chartHeight = 5;
 
       // Header
-      const modeLabel = viewMode === 'recent' ? 'Minute' : 'Hour';
-      const modeColor = viewMode === 'recent' ? 'cyan' : 'magenta';
+      const modeLabel = sharedViewMode === 'recent' ? 'Minute' : 'Hour';
+      const modeColor = sharedViewMode === 'recent' ? 'cyan' : 'magenta';
       let content = `{bold}{blue-fg}\u2550\u2550\u2550 All servers (${servers.length}){/blue-fg} `;
       content += `{${modeColor}-fg}[${modeLabel}]{/${modeColor}-fg}{/bold}\n\n`;
 
@@ -453,11 +473,11 @@ export async function createMultiServerHistoricalUI(
 
       if (aggregatedData.length > 0) {
         const maxPoints = Math.min(chartWidth, 80);
-        const displayData = viewMode === 'recent' && aggregatedData.length > maxPoints
+        const displayData = sharedViewMode === 'recent' && aggregatedData.length > maxPoints
           ? aggregatedData.slice(-maxPoints)
           : aggregatedData;
 
-        const useDownsampling = viewMode === 'hour';
+        const useDownsampling = sharedViewMode === 'hour';
 
         // Extract time-series data
         const rawData = {
@@ -492,7 +512,7 @@ export async function createMultiServerHistoricalUI(
 
       // Footer
       content += divider + '\n';
-      content += `{gray-fg}Updated: ${new Date().toLocaleTimeString()} | H = Toggle Hour View  ESC = Back  Q = Quit{/gray-fg}`;
+      content += `{gray-fg}[T]oggle Hour View [ESC] Back [Q]uit{/gray-fg}`;
 
       contentBox.setContent(content);
       screen.render();
@@ -509,7 +529,7 @@ export async function createMultiServerHistoricalUI(
           '{bold}{red-fg}Render Error{/red-fg}{/bold}\n\n' +
           `{red-fg}${errorMsg}{/red-fg}\n\n` +
           `Consecutive errors: ${consecutiveErrors}\n\n` +
-          '{gray-fg}ESC = Back  Q = Quit{/gray-fg}'
+          '{gray-fg}[ESC] Back [Q]uit{/gray-fg}'
         );
       }
       screen.render();
@@ -521,24 +541,43 @@ export async function createMultiServerHistoricalUI(
       clearInterval(refreshIntervalId);
       refreshIntervalId = null;
     }
+    unregisterHandlers();
   }
 
-  screen.key(['h', 'H'], () => {
-    viewMode = viewMode === 'recent' ? 'hour' : 'recent';
-    render();
-  });
+  // Key handler functions (stored for unregistration)
+  const keyHandlers = {
+    toggle: () => {
+      sharedViewMode = sharedViewMode === 'recent' ? 'hour' : 'recent';
+      render();
+    },
+    escape: () => {
+      cleanup();
+      screen.remove(contentBox);
+      onBack();
+    },
+    quit: () => {
+      cleanup();
+      screen.destroy();
+      process.exit(0);
+    },
+  };
 
-  screen.key(['escape'], () => {
-    cleanup();
-    screen.remove(contentBox);
-    onBack();
-  });
+  function registerHandlers(): void {
+    screen.key(['t', 'T'], keyHandlers.toggle);
+    screen.key(['escape'], keyHandlers.escape);
+    screen.key(['q', 'Q', 'C-c'], keyHandlers.quit);
+  }
 
-  screen.key(['q', 'Q', 'C-c'], () => {
-    cleanup();
-    screen.destroy();
-    process.exit(0);
-  });
+  function unregisterHandlers(): void {
+    screen.unkey('t', keyHandlers.toggle);
+    screen.unkey('T', keyHandlers.toggle);
+    screen.unkey('escape', keyHandlers.escape);
+    screen.unkey('q', keyHandlers.quit);
+    screen.unkey('Q', keyHandlers.quit);
+    screen.unkey('C-c', keyHandlers.quit);
+  }
+
+  registerHandlers();
 
   contentBox.setContent('{cyan-fg}\u23f3 Loading historical data...{/cyan-fg}');
   screen.render();

package/src/tui/ModelsApp.ts

@@ -0,0 +1,368 @@
+import blessed from 'blessed';
+import { modelScanner } from '../lib/model-scanner.js';
+import { stateManager } from '../lib/state-manager.js';
+import { launchctlManager } from '../lib/launchctl-manager.js';
+import { ModelInfo } from '../types/model-info.js';
+import { ServerConfig } from '../types/server-config.js';
+import { formatBytes, formatDateShort } from '../utils/format-utils.js';
+import * as fs from 'fs/promises';
+import { createSearchUI } from './SearchApp.js';
+
+/**
+ * Models management TUI
+ * Display installed models and allow deletion
+ */
+export async function createModelsUI(
+  screen: blessed.Widgets.Screen,
+  onBack: () => void,
+  onSearch: () => void
+): Promise<void> {
+  let models: ModelInfo[] = [];
+  let selectedIndex = 0;
+  let isLoading = false;
+
+  // Create content box
+  const contentBox = blessed.box({
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    tags: true,
+    scrollable: true,
+    alwaysScroll: true,
+    keys: true,
+    vi: true,
+    mouse: true,
+    scrollbar: {
+      ch: '█',
+      style: {
+        fg: 'blue',
+      },
+    },
+  });
+  screen.append(contentBox);
+
+  // Render models view
+  async function render() {
+    const termWidth = (screen.width as number) || 80;
+    const divider = '─'.repeat(termWidth - 2);
+    let content = '';
+
+    // Header
+    content += '{bold}{blue-fg}═══ Models Management{/blue-fg}{/bold}\n\n';
+
+    if (isLoading) {
+      content += '{cyan-fg}⏳ Loading models...{/cyan-fg}\n';
+      contentBox.setContent(content);
+      screen.render();
+      return;
+    }
+
+    if (models.length === 0) {
+      content += '{yellow-fg}No models found{/yellow-fg}\n\n';
+      content += '{dim}Models directory: ' + await stateManager.getModelsDirectory() + '{/dim}\n';
+      content += '{dim}Download models: Press [S] to search HuggingFace{/dim}\n';
+      content += '\n' + divider + '\n';
+      content += `{gray-fg}[S]earch [ESC] Back [Q]uit{/gray-fg}`;
+      contentBox.setContent(content);
+      screen.render();
+      return;
+    }
+
+    // System info
+    const totalSize = models.reduce((sum, m) => sum + m.size, 0);
+    content += `{bold}Total: ${models.length} models{/bold} - ${formatBytes(totalSize)}\n`;
+    content += divider + '\n';
+
+    // Get all servers to check dependencies
+    const allServers = await stateManager.getAllServers();
+
+    // Table header
+    content += '{bold}  │ Model File                                    │ Size       │ Modified   │ Servers{/bold}\n';
+    content += divider + '\n';
+
+    // Model rows
+    for (let i = 0; i < models.length; i++) {
+      const model = models[i];
+      const isSelected = i === selectedIndex;
+
+      // Count servers using this model
+      const serversUsingModel = allServers.filter(s => s.modelPath === model.path);
+      const serverCount = serversUsingModel.length;
+
+      // Selection indicator
+      const indicator = isSelected ? '►' : ' ';
+
+      // Model filename (truncate if too long)
+      const maxFilenameLen = 46;
+      let filename = model.filename;
+      if (filename.length > maxFilenameLen) {
+        filename = filename.substring(0, maxFilenameLen - 3) + '...';
+      }
+      filename = filename.padEnd(maxFilenameLen);
+
+      // Size
+      const size = model.sizeFormatted.padStart(11);
+
+      // Modified date
+      const modified = formatDateShort(model.modified).padStart(11);
+
+      // Servers count with color coding
+      let serversText = '';
+      let serversTextPlain = '';
+      if (serverCount === 0) {
+        serversText = '{green-fg}0 servers{/green-fg}';
+        serversTextPlain = '0 servers';
+      } else {
+        const runningCount = serversUsingModel.filter(s => s.status === 'running').length;
+        if (runningCount > 0) {
+          serversText = `{yellow-fg}${serverCount} (${runningCount} running){/yellow-fg}`;
+          serversTextPlain = `${serverCount} (${runningCount} running)`;
+        } else {
+          serversText = `{gray-fg}${serverCount} stopped{/gray-fg}`;
+          serversTextPlain = `${serverCount} stopped`;
+        }
+      }
+
+      // Build row content
+      let rowContent = '';
+      if (isSelected) {
+        // Selected row: cyan background with bright white text
+        rowContent = `{cyan-bg}{15-fg}${indicator} │ ${filename} │ ${size} │ ${modified} │ ${serversTextPlain}{/15-fg}{/cyan-bg}`;
+      } else {
+        // Normal row: with colored server text
+        rowContent = `${indicator} │ ${filename} │ ${size} │ ${modified} │ ${serversText}`;
+      }
+
+      content += rowContent + '\n';
+    }
+
+    // Footer
+    content += '\n' + divider + '\n';
+    content += '{gray-fg}[↑/↓] Navigate [D]elete [S]earch [R]efresh [ESC] Back [Q]uit{/gray-fg}';
+
+    contentBox.setContent(content);
+    screen.render();
+  }
+
+  // Load models
+  async function loadModels() {
+    isLoading = true;
+    await render();
+
+    models = await modelScanner.scanModels();
+    selectedIndex = Math.min(selectedIndex, Math.max(0, models.length - 1));
+
+    isLoading = false;
+    await render();
+  }
+
+  // Delete selected model
+  async function deleteModel() {
+    if (models.length === 0) return;
+
+    const model = models[selectedIndex];
+    const allServers = await stateManager.getAllServers();
+    const serversUsingModel = allServers.filter(s => s.modelPath === model.path);
+
+    // Show confirmation dialog
+    const confirmBox = blessed.message({
+      parent: screen,
+      top: 'center',
+      left: 'center',
+      width: '60%',
+      height: 'shrink',
+      border: { type: 'line' },
+      style: {
+        border: { fg: 'red' },
+        fg: 'white',
+      },
+      tags: true,
+    });
+
+    let confirmText = `{bold}Delete model: ${model.filename}?{/bold}\n\n`;
+    confirmText += `Size: ${model.sizeFormatted}\n\n`;
+
+    if (serversUsingModel.length > 0) {
+      confirmText += `{yellow-fg}⚠️  This model has ${serversUsingModel.length} server(s) configured:{/yellow-fg}\n`;
+      for (const server of serversUsingModel) {
+        const statusColor = server.status === 'running' ? 'green-fg' : 'gray-fg';
+        confirmText += `   - ${server.id} ({${statusColor}}${server.status}{/${statusColor}})\n`;
+      }
+      confirmText += `\n{yellow-fg}These servers will be deleted before removing the model.{/yellow-fg}\n\n`;
+    }
+
+    confirmText += `Type 'yes' to confirm:\n\n\n\n`; // Extra lines for input box space
+
+    // Create input box for confirmation
+    const inputBox = blessed.textbox({
+      parent: confirmBox,
+      bottom: 1,
+      left: 2,
+      right: 2,
+      height: 3,
+      inputOnFocus: true,
+      border: { type: 'line' },
+      style: {
+        border: { fg: 'cyan' },
+        focus: { border: { fg: 'green' } },
+      },
+    });
+
+    confirmBox.setContent(confirmText);
+    screen.append(confirmBox);
+    confirmBox.focus();
+    inputBox.focus();
+    screen.render();
+
+    inputBox.on('submit', async (value: string) => {
+      screen.remove(confirmBox);
+
+      if (value.toLowerCase() !== 'yes') {
+        await render();
+        return;
+      }
+
+      // Show deleting message
+      isLoading = true;
+      contentBox.setContent('{cyan-fg}⏳ Deleting model...{/cyan-fg}');
+      screen.render();
+
+      try {
+        // Delete all servers using this model
+        for (const server of serversUsingModel) {
+          // Unload service (stops and removes from launchd)
+          try {
+            await launchctlManager.unloadService(server.plistPath);
+            if (server.status === 'running') {
+              await launchctlManager.waitForServiceStop(server.label, 5000);
+            }
+          } catch (error) {
+            // Continue even if unload fails
+          }
+
+          // Delete plist
+          await launchctlManager.deletePlist(server.plistPath);
+
+          // Delete server config
+          await stateManager.deleteServerConfig(server.id);
+        }
+
+        // Delete model file
+        await fs.unlink(model.path);
+
+        // Reload models
+        await loadModels();
+      } catch (error) {
+        // Show error
+        const errorBox = blessed.message({
+          parent: screen,
+          top: 'center',
+          left: 'center',
+          width: '60%',
+          height: 'shrink',
+          border: { type: 'line' },
+          style: {
+            border: { fg: 'red' },
+            fg: 'red',
+          },
+          tags: true,
+        });
+
+        const errorMsg = error instanceof Error ? error.message : 'Unknown error';
+        errorBox.display(`{bold}Delete failed{/bold}\n\n${errorMsg}\n\nPress any key to continue`, () => {
+          screen.remove(errorBox);
+          isLoading = false;
+          render();
+        });
+      }
+    });
+
+    inputBox.on('cancel', () => {
+      screen.remove(confirmBox);
+      render();
+    });
+
+    inputBox.key(['escape'], () => {
+      screen.remove(confirmBox);
+      render();
+    });
+  }
+
+  // Store key handler references for cleanup
+  const keyHandlers = {
+    up: () => {
+      if (models.length === 0) return;
+      selectedIndex = Math.max(0, selectedIndex - 1);
+      render();
+    },
+    down: () => {
+      if (models.length === 0) return;
+      selectedIndex = Math.min(models.length - 1, selectedIndex + 1);
+      render();
+    },
+    delete: () => {
+      deleteModel();
+    },
+    search: async () => {
+      // Cleanup current handlers before switching views
+      cleanup();
+
+      // Open search view
+      await createSearchUI(screen, async () => {
+        // onBack callback - return to models view
+        // Re-register handlers
+        registerHandlers();
+        screen.append(contentBox);
+        await loadModels();
+      });
+    },
+    refresh: () => {
+      loadModels();
+    },
+    escape: async () => {
+      cleanup();
+      await onBack();
+    },
+    quit: () => {
+      screen.destroy();
+      process.exit(0);
+    },
+  };
+
+  // Cleanup function to unregister all handlers
+  function cleanup() {
+    screen.unkey('up', keyHandlers.up);
+    screen.unkey('k', keyHandlers.up);
+    screen.unkey('down', keyHandlers.down);
+    screen.unkey('j', keyHandlers.down);
+    screen.unkey('d', keyHandlers.delete);
+    screen.unkey('D', keyHandlers.delete);
+    screen.unkey('s', keyHandlers.search);
+    screen.unkey('S', keyHandlers.search);
+    screen.unkey('r', keyHandlers.refresh);
+    screen.unkey('R', keyHandlers.refresh);
+    screen.unkey('escape', keyHandlers.escape);
+    screen.unkey('q', keyHandlers.quit);
+    screen.unkey('Q', keyHandlers.quit);
+    screen.unkey('C-c', keyHandlers.quit);
+    screen.remove(contentBox);
+  }
+
+  // Register key handlers
+  function registerHandlers() {
+    screen.key(['up', 'k'], keyHandlers.up);
+    screen.key(['down', 'j'], keyHandlers.down);
+    screen.key(['d', 'D'], keyHandlers.delete);
+    screen.key(['s', 'S'], keyHandlers.search);
+    screen.key(['r', 'R'], keyHandlers.refresh);
+    screen.key(['escape'], keyHandlers.escape);
+    screen.key(['q', 'Q', 'C-c'], keyHandlers.quit);
+  }
+
+  // Register initial handlers
+  registerHandlers();
+
+  // Initial load
+  await loadModels();
+}