@appkit/llamacpp-cli 2.0.0 → 2.1.0

package/dist/tui/MultiServerMonitorApp.js

@@ -38,7 +38,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createMultiServerMonitorUI = createMultiServerMonitorUI;
 const blessed_1 = __importDefault(require("blessed"));
-const path = __importStar(require("path"));
 const fs = __importStar(require("fs/promises"));
 const metrics_aggregator_js_1 = require("../lib/metrics-aggregator.js");
 const system_collector_js_1 = require("../lib/system-collector.js");
@@ -46,17 +45,19 @@ const history_manager_js_1 = require("../lib/history-manager.js");
 const HistoricalMonitorApp_js_1 = require("./HistoricalMonitorApp.js");
 const ConfigApp_js_1 = require("./ConfigApp.js");
 const state_manager_js_1 = require("../lib/state-manager.js");
-const launchctl_manager_js_1 = require("../lib/launchctl-manager.js");
-const status_checker_js_1 = require("../lib/status-checker.js");
+const server_lifecycle_service_js_1 = require("../lib/server-lifecycle-service.js");
 const model_scanner_js_1 = require("../lib/model-scanner.js");
 const port_manager_js_1 = require("../lib/port-manager.js");
-const config_generator_js_1 = require("../lib/config-generator.js");
 const file_utils_js_1 = require("../utils/file-utils.js");
-const process_utils_js_1 = require("../utils/process-utils.js");
-async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage = false, directJumpIndex, onModels, onFirstRender) {
+const modal_controller_js_1 = require("./shared/modal-controller.js");
+const overlay_utils_js_1 = require("./shared/overlay-utils.js");
+const keyboard_manager_js_1 = require("../lib/keyboard-manager.js");
+const log_utils_js_1 = require("../utils/log-utils.js");
+const log_parser_js_1 = require("../utils/log-parser.js");
+async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage = false, directJumpIndex, onModels, onRouter, onFirstRender) {
     let updateInterval = 5000;
     let intervalId = null;
-    let viewMode = directJumpIndex !== undefined ? 'detail' : 'list';
+    let viewMode = directJumpIndex !== undefined ? "detail" : "list";
     let selectedServerIndex = directJumpIndex ?? 0;
     let selectedRowIndex = directJumpIndex ?? 0; // Track which row is highlighted in list view
     let isLoading = false;
@@ -64,8 +65,15 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
     let cameFromDirectJump = directJumpIndex !== undefined; // Track if we entered via ps <id>
     let inHistoricalView = false; // Track whether we're in historical view to prevent key conflicts
     let hasCalledFirstRender = false; // Track if we've called onFirstRender callback
+    let detailSubView = "status"; // Track sub-view within detail view
+    let logsLastUpdated = null;
+    let logsRefreshInterval = null;
+    let logType = 'stdout'; // Track which log type to display (activity/system)
+    // Keyboard manager for centralized keyboard event handling
+    const keyboardManager = new keyboard_manager_js_1.KeyboardManager(screen);
+    const modalController = new modal_controller_js_1.ModalController(screen, keyboardManager);
     // Spinner animation
-    const spinnerFrames = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
+    const spinnerFrames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
     let spinnerFrameIndex = 0;
     let spinnerIntervalId = null;
     const systemCollector = new system_collector_js_1.SystemCollector();
@@ -86,8 +94,8 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
     const contentBox = blessed_1.default.box({
         top: 0,
         left: 0,
-        width: '100%',
-        height: '100%',
+        width: "100%",
+        height: "100%",
         tags: true,
         scrollable: true,
         alwaysScroll: true,
@@ -95,9 +103,9 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
         vi: true,
         mouse: true,
         scrollbar: {
-            ch: '█',
+            ch: "█",
             style: {
-                fg: 'blue',
+                fg: "blue",
             },
         },
     });
@@ -106,15 +114,18 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
     function createProgressBar(percentage, width = 30) {
         const filled = Math.round((percentage / 100) * width);
         const empty = width - filled;
-        return '[' + '█'.repeat(Math.max(0, filled)) + '░'.repeat(Math.max(0, empty)) + ']';
+        return ("[" +
+            "█".repeat(Math.max(0, filled)) +
+            "░".repeat(Math.max(0, empty)) +
+            "]");
     }
     // Render system resources section (system-wide for list view)
     function renderSystemResources(systemMetrics) {
-        let content = '';
-        content += '{bold}System Resources{/bold}\n';
+        let content = "";
+        content += "{bold}System Resources{/bold}\n";
         const termWidth = screen.width || 80;
-        const divider = '─'.repeat(termWidth - 2);
-        content += divider + '\n';
+        const divider = "─".repeat(termWidth - 2);
+        content += divider + "\n";
         if (systemMetrics) {
             if (systemMetrics.gpuUsage !== undefined) {
                 const bar = createProgressBar(systemMetrics.gpuUsage);
@@ -122,7 +133,7 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
                 if (systemMetrics.temperature !== undefined) {
                     content += ` - ${Math.round(systemMetrics.temperature)}°C`;
                 }
-                content += '\n';
+                content += "\n";
             }
             if (systemMetrics.cpuUsage !== undefined) {
                 const bar = createProgressBar(systemMetrics.cpuUsage);
@@ -133,36 +144,38 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
                 content += `ANE:    {cyan-fg}${bar}{/cyan-fg} ${Math.round(systemMetrics.aneUsage)}%\n`;
             }
             if (systemMetrics.memoryTotal > 0) {
-                const memoryUsedGB = systemMetrics.memoryUsed / (1024 ** 3);
-                const memoryTotalGB = systemMetrics.memoryTotal / (1024 ** 3);
+                const memoryUsedGB = systemMetrics.memoryUsed / 1024 ** 3;
+                const memoryTotalGB = systemMetrics.memoryTotal / 1024 ** 3;
                 const memoryPercentage = (systemMetrics.memoryUsed / systemMetrics.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`;
             }
             if (systemMetrics.warnings && systemMetrics.warnings.length > 0) {
-                content += `\n{yellow-fg}⚠ ${systemMetrics.warnings.join(', ')}{/yellow-fg}\n`;
+                content += `\n{yellow-fg}⚠ ${systemMetrics.warnings.join(", ")}{/yellow-fg}\n`;
             }
         }
         else {
-            content += '{gray-fg}Collecting system metrics...{/gray-fg}\n';
+            content += "{gray-fg}Collecting system metrics...{/gray-fg}\n";
         }
         return content;
     }
     // Render aggregate model resources (all running servers in list view)
     function renderAggregateModelResources() {
-        let content = '';
-        content += '{bold}Server Resources{/bold}\n';
+        let content = "";
+        content += "{bold}Server Resources{/bold}\n";
         const termWidth = screen.width || 80;
-        const divider = '─'.repeat(termWidth - 2);
-        content += divider + '\n';
+        const divider = "─".repeat(termWidth - 2);
+        content += divider + "\n";
         // Aggregate CPU and memory across all running servers (skip stopped servers)
         let totalCpu = 0;
         let totalMemoryBytes = 0;
         let serverCount = 0;
         for (const serverData of serverDataMap.values()) {
             // Only count running servers with valid data
-            if (serverData.server.status === 'running' && serverData.data?.server && !serverData.data.server.stale) {
+            if (serverData.server.status === "running" &&
+                serverData.data?.server &&
+                !serverData.data.server.stale) {
                 if (serverData.data.server.processCpuUsage !== undefined) {
                     totalCpu += serverData.data.server.processCpuUsage;
                     serverCount++;
@@ -173,29 +186,29 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
             }
         }
         if (serverCount === 0) {
-            content += '{gray-fg}No running servers{/gray-fg}\n';
+            content += "{gray-fg}No running servers{/gray-fg}\n";
             return content;
         }
         // CPU: Sum of all process CPU percentages
         const cpuBar = createProgressBar(Math.min(totalCpu, 100));
         content += `CPU:    {cyan-fg}${cpuBar}{/cyan-fg} ${Math.round(totalCpu)}%`;
-        content += ` {gray-fg}(${serverCount} ${serverCount === 1 ? 'server' : 'servers'}){/gray-fg}\n`;
+        content += ` {gray-fg}(${serverCount} ${serverCount === 1 ? "server" : "servers"}){/gray-fg}\n`;
         // Memory: Sum of all process memory
-        const totalMemoryGB = totalMemoryBytes / (1024 ** 3);
+        const totalMemoryGB = totalMemoryBytes / 1024 ** 3;
         const estimatedMaxGB = serverCount * 8; // Assume ~8GB per server max
         const memoryPercentage = Math.min((totalMemoryGB / estimatedMaxGB) * 100, 100);
         const memoryBar = createProgressBar(memoryPercentage);
         content += `Memory: {cyan-fg}${memoryBar}{/cyan-fg} ${totalMemoryGB.toFixed(2)} GB`;
-        content += ` {gray-fg}(${serverCount} ${serverCount === 1 ? 'server' : 'servers'}){/gray-fg}\n`;
+        content += ` {gray-fg}(${serverCount} ${serverCount === 1 ? "server" : "servers"}){/gray-fg}\n`;
         return content;
     }
     // Render model resources section (per-process for detail view)
     function renderModelResources(data) {
-        let content = '';
-        content += '{bold}Server Resources{/bold}\n';
+        let content = "";
+        content += "{bold}Server Resources{/bold}\n";
         const termWidth = screen.width || 80;
-        const divider = '─'.repeat(termWidth - 2);
-        content += divider + '\n';
+        const divider = "─".repeat(termWidth - 2);
+        content += divider + "\n";
         // GPU: System-wide (can't get per-process on macOS)
         if (data.system && data.system.gpuUsage !== undefined) {
             const bar = createProgressBar(data.system.gpuUsage);
@@ -203,7 +216,7 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
             if (data.system.temperature !== undefined) {
                 content += ` - ${Math.round(data.system.temperature)}°C`;
             }
-            content += '\n';
+            content += "\n";
         }
         // CPU: Per-process
         if (data.server.processCpuUsage !== undefined) {
@@ -212,14 +225,16 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
         }
         // Memory: Per-process
         if (data.server.processMemory !== undefined) {
-            const memoryGB = data.server.processMemory / (1024 ** 3);
+            const memoryGB = data.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 (data.system && 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`;
         }
         return content;
     }
@@ -233,8 +248,8 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
         spinnerIntervalId = setInterval(() => {
             spinnerFrameIndex = (spinnerFrameIndex + 1) % spinnerFrames.length;
             // Re-render current view with updated spinner frame
-            let content = '';
-            if (viewMode === 'list') {
+            let content = "";
+            if (viewMode === "list") {
                 content = renderListView(lastSystemMetrics);
             }
             else {
@@ -244,8 +259,8 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
             screen.render();
         }, 80);
         // Immediate first render
-        let content = '';
-        if (viewMode === 'list') {
+        let content = "";
+        if (viewMode === "list") {
             content = renderListView(lastSystemMetrics);
         }
         else {
@@ -265,22 +280,23 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
     // Render list view
     function renderListView(systemMetrics) {
         const termWidth = screen.width || 80;
-        const divider = '─'.repeat(termWidth - 2);
-        let content = '';
+        const divider = "─".repeat(termWidth - 2);
+        let content = "";
         // Header
-        content += '{bold}{blue-fg}═══ llama.cpp{/blue-fg}{/bold}\n\n';
+        content += "{bold}{blue-fg}═══ LLAMACPP{/blue-fg}{/bold}\n\n";
         // System resources
         content += renderSystemResources(systemMetrics);
-        content += '\n';
+        content += "\n";
         // Aggregate model resources (CPU + memory for all running servers)
         content += renderAggregateModelResources();
-        content += '\n';
+        content += "\n";
         // Server list header
-        const runningCount = servers.filter(s => s.status === 'running').length;
-        const stoppedCount = servers.filter(s => s.status !== 'running').length;
+        const runningCount = servers.filter((s) => s.status === "running").length;
+        const stoppedCount = servers.filter((s) => s.status !== "running").length;
         content += `{bold}Servers (${runningCount} running, ${stoppedCount} stopped){/bold}\n`;
-        content += '{gray-fg}Use arrow keys to navigate, Enter to view details{/gray-fg}\n';
-        content += divider + '\n';
+        content +=
+            "{gray-fg}Use arrow keys to navigate, Enter to view details{/gray-fg}\n";
+        content += divider + "\n";
         // Calculate Server ID column width (variable based on screen width)
         // Fixed columns breakdown:
         // indicator(1) + " │ "(3) + " │ "(3) + port(4) + " │ "(3) + status(6) + "│ "(2) +
@@ -290,60 +306,68 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
         const maxServerIdWidth = 60;
         const serverIdWidth = Math.max(minServerIdWidth, Math.min(maxServerIdWidth, termWidth - fixedColumnsWidth));
         // Table header with variable Server ID width
-        const serverIdHeader = 'Server ID'.padEnd(serverIdWidth);
+        const serverIdHeader = "Server ID".padEnd(serverIdWidth);
         content += `{bold}  │ ${serverIdHeader}│ Port │ Status │ Slots │ tok/s  │ Memory{/bold}\n`;
-        content += divider + '\n';
+        content += divider + "\n";
         // Server rows
         servers.forEach((server, index) => {
             const serverData = serverDataMap.get(server.id);
             const isSelected = index === selectedRowIndex;
             // Selection indicator (arrow for selected row)
             // Use plain arrow for selected (will be white), colored for unselected indicator
-            const indicator = isSelected ? '►' : ' ';
+            const indicator = isSelected ? "►" : " ";
             // Server ID (variable width, truncate if longer than available space)
-            const serverId = server.id.padEnd(serverIdWidth).substring(0, serverIdWidth);
+            // Show alias in parens if present
+            const serverIdText = server.alias
+                ? `${server.id} (${server.alias})`
+                : server.id;
+            const serverId = serverIdText
+                .padEnd(serverIdWidth)
+                .substring(0, serverIdWidth);
             // Port
             const port = server.port.toString().padStart(4);
             // Status - Check actual server status first, then health
             // Build two versions: colored for normal, plain for selected
-            let status = '';
-            let statusPlain = '';
-            if (server.status !== 'running') {
+            let status = "";
+            let statusPlain = "";
+            if (server.status !== "running") {
                 // Server is stopped according to config
-                status = '{gray-fg}○ OFF{/gray-fg} ';
-                statusPlain = '○ OFF ';
+                status = "{gray-fg}○ OFF{/gray-fg} ";
+                statusPlain = "○ OFF ";
             }
             else if (serverData?.data) {
                 // Server is running and we have data
                 if (serverData.data.server.healthy) {
-                    status = '{green-fg}● RUN{/green-fg} ';
-                    statusPlain = '● RUN ';
+                    status = "{green-fg}● RUN{/green-fg} ";
+                    statusPlain = "● RUN ";
                 }
                 else {
-                    status = '{red-fg}● ERR{/red-fg} ';
-                    statusPlain = '● ERR ';
+                    status = "{red-fg}● ERR{/red-fg} ";
+                    statusPlain = "● ERR ";
                 }
             }
             else {
                 // Server is running but no data yet (still loading)
-                status = '{yellow-fg}● ...{/yellow-fg} ';
-                statusPlain = '● ... ';
+                status = "{yellow-fg}● ...{/yellow-fg} ";
+                statusPlain = "● ... ";
             }
             // Slots
-            let slots = '-   ';
+            let slots = "-   ";
             if (serverData?.data?.server) {
                 const active = serverData.data.server.activeSlots;
                 const total = serverData.data.server.totalSlots;
                 slots = `${active}/${total}`.padStart(5);
             }
             // tok/s
-            let tokensPerSec = '-     ';
+            let tokensPerSec = "-     ";
             if (serverData?.data?.server.avgGenerateSpeed !== undefined &&
                 serverData.data.server.avgGenerateSpeed > 0) {
-                tokensPerSec = Math.round(serverData.data.server.avgGenerateSpeed).toString().padStart(6);
+                tokensPerSec = Math.round(serverData.data.server.avgGenerateSpeed)
+                    .toString()
+                    .padStart(6);
             }
             // Memory (actual process memory from top command)
-            let memory = '-      ';
+            let memory = "-      ";
             if (serverData?.data?.server.processMemory) {
                 const bytes = serverData.data.server.processMemory;
                 // Format as GB/MB depending on size
@@ -357,7 +381,7 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
                 }
             }
             // Build row content - use plain status for selected rows
-            let rowContent = '';
+            let rowContent = "";
             if (isSelected) {
                 // Use color code 15 (bright white) with cyan background
                 // When white-bg worked, it was probably auto-selecting bright white fg
@@ -367,11 +391,11 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
                 // Use colored status for normal rows
                 rowContent = `${indicator} │ ${serverId} │ ${port} │ ${status}│ ${slots} │ ${tokensPerSec} │ ${memory}`;
             }
-            content += rowContent + '\n';
+            content += rowContent + "\n";
         });
         // Footer
-        content += '\n' + divider + '\n';
-        content += `{gray-fg}Updated: ${new Date().toLocaleTimeString()} | [N]ew [M]odels [H]istory [Q]uit{/gray-fg}`;
+        content += "\n" + divider + "\n";
+        content += `{gray-fg}[N]ew [M]odels [R]outer [H]istory [Q]uit{/gray-fg}`;
         return content;
     }
     // Render detail view for selected server
@@ -379,72 +403,79 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
         const server = servers[selectedServerIndex];
         const serverData = serverDataMap.get(server.id);
         const termWidth = screen.width || 80;
-        const divider = '─'.repeat(termWidth - 2);
-        let content = '';
+        const divider = "─".repeat(termWidth - 2);
+        let content = "";
         // Header
-        content += `{bold}{blue-fg}═══ ${server.id} (${server.port}){/blue-fg}{/bold}\n\n`;
+        const headerText = server.alias
+            ? `${server.id} (${server.alias})`
+            : server.id;
+        content += `{bold}{blue-fg}═══ ${headerText} (${server.port}){/blue-fg}{/bold}\n\n`;
         // Check if server is stopped
-        if (server.status !== 'running') {
+        if (server.status !== "running") {
             // Show minimal stopped server info
-            content += '{bold}Server Information{/bold}\n';
-            content += divider + '\n';
+            content += "{bold}Server Information{/bold}\n";
+            content += divider + "\n";
             content += `Status:   {gray-fg}○ STOPPED{/gray-fg}\n`;
             content += `Model:    ${server.modelName}\n`;
-            const displayHost = server.host || '127.0.0.1';
+            const displayHost = server.host || "127.0.0.1";
             content += `Endpoint: http://${displayHost}:${server.port}\n`;
             // Footer - show [S]tart for stopped servers
-            content += '\n' + divider + '\n';
-            content += `{gray-fg}[S]tart [C]onfig [R]emove [H]istory [ESC] Back [Q]uit{/gray-fg}`;
+            content += "\n" + divider + "\n";
+            content += `{gray-fg}[S]tart [C]onfig [R]emove [L]ogs [H]istory [ESC] Back [Q]uit{/gray-fg}`;
             return content;
         }
         if (!serverData?.data) {
-            content += '{yellow-fg}Loading server data...{/yellow-fg}\n';
+            content += "{yellow-fg}Loading server data...{/yellow-fg}\n";
             return content;
         }
         const data = serverData.data;
         // Model resources (per-process)
         content += renderModelResources(data);
-        content += '\n';
+        content += "\n";
         // Server Information
-        content += '{bold}Server Information{/bold}\n';
-        content += divider + '\n';
-        const statusIcon = data.server.healthy ? '{green-fg}●{/green-fg}' : '{red-fg}●{/red-fg}';
-        const statusText = data.server.healthy ? 'RUNNING' : 'UNHEALTHY';
+        content += "{bold}Server Information{/bold}\n";
+        content += divider + "\n";
+        const statusIcon = data.server.healthy
+            ? "{green-fg}●{/green-fg}"
+            : "{red-fg}●{/red-fg}";
+        const statusText = data.server.healthy ? "RUNNING" : "UNHEALTHY";
         content += `Status:   ${statusIcon} ${statusText}`;
         if (data.server.uptime) {
             content += `                    Uptime: ${data.server.uptime}`;
         }
-        content += '\n';
+        content += "\n";
         content += `Model:    ${server.modelName}`;
         if (data.server.contextSize) {
             content += `    Context: ${formatContextSize(data.server.contextSize)}/slot`;
         }
-        content += '\n';
+        content += "\n";
         // Handle null host (legacy configs) by defaulting to 127.0.0.1
-        const displayHost = server.host || '127.0.0.1';
+        const displayHost = server.host || "127.0.0.1";
         content += `Endpoint: http://${displayHost}:${server.port}\n`;
         content += `Slots:    ${data.server.activeSlots} active / ${data.server.totalSlots} total\n`;
-        content += '\n';
+        content += "\n";
         // Request Metrics
         if (data.server.totalSlots > 0) {
-            content += '{bold}Request Metrics{/bold}\n';
-            content += divider + '\n';
+            content += "{bold}Request Metrics{/bold}\n";
+            content += divider + "\n";
             content += `Active:   ${data.server.activeSlots} / ${data.server.totalSlots}\n`;
             content += `Idle:     ${data.server.idleSlots} / ${data.server.totalSlots}\n`;
-            if (data.server.avgPromptSpeed !== undefined && data.server.avgPromptSpeed > 0) {
+            if (data.server.avgPromptSpeed !== undefined &&
+                data.server.avgPromptSpeed > 0) {
                 content += `Prompt:   ${Math.round(data.server.avgPromptSpeed)} tokens/sec\n`;
             }
-            if (data.server.avgGenerateSpeed !== undefined && data.server.avgGenerateSpeed > 0) {
+            if (data.server.avgGenerateSpeed !== undefined &&
+                data.server.avgGenerateSpeed > 0) {
                 content += `Generate: ${Math.round(data.server.avgGenerateSpeed)} tokens/sec\n`;
             }
-            content += '\n';
+            content += "\n";
         }
         // Active Slots Detail
         if (data.server.slots.length > 0) {
-            const activeSlots = data.server.slots.filter(s => s.state === 'processing');
+            const activeSlots = data.server.slots.filter((s) => s.state === "processing");
             if (activeSlots.length > 0) {
-                content += '{bold}Active Slots{/bold}\n';
-                content += divider + '\n';
+                content += "{bold}Active Slots{/bold}\n";
+                content += divider + "\n";
                 activeSlots.forEach((slot) => {
                     content += `Slot #${slot.id}: {yellow-fg}PROCESSING{/yellow-fg}`;
                     if (slot.timings?.predicted_per_second) {
@@ -455,28 +486,246 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
                         if (slot.n_ctx) {
                             content += ` / ${slot.n_ctx}`;
                         }
-                        content += ' tokens';
+                        content += " tokens";
                     }
-                    content += '\n';
+                    content += "\n";
                 });
-                content += '\n';
+                content += "\n";
             }
         }
         // Footer - show [S]top for running servers
-        content += divider + '\n';
-        content += `{gray-fg}[S]top [C]onfig [R]emove [H]istory [ESC] Back [Q]uit{/gray-fg}`;
+        content += divider + "\n";
+        content += `{gray-fg}[S]top [C]onfig [R]emove [L]ogs [H]istory [ESC] Back [Q]uit{/gray-fg}`;
+        return content;
+    }
+    // Render logs view for selected server
+    async function renderServerLogs() {
+        const server = servers[selectedServerIndex];
+        const termWidth = screen.width || 80;
+        const divider = "─".repeat(termWidth - 2);
+        let content = "";
+        // Header
+        const headerText = server.alias
+            ? `${server.id} (${server.alias})`
+            : server.id;
+        const logTypeLabel = logType === 'stdout' ? 'Activity' : 'System';
+        content += `{bold}{blue-fg}═══ ${headerText} - ${logTypeLabel} Logs{/blue-fg}{/bold}\n`;
+        // Show refresh status
+        const refreshStatus = logsRefreshInterval ? "ON" : "OFF";
+        const refreshColor = logsRefreshInterval ? "green" : "gray";
+        content += `{gray-fg}Auto-refresh: {${refreshColor}-fg}${refreshStatus}{/${refreshColor}-fg}{/gray-fg}\n`;
+        // Show slot status
+        const serverData = serverDataMap.get(server.id);
+        if (serverData?.data?.server) {
+            const active = serverData.data.server.activeSlots;
+            const total = serverData.data.server.totalSlots;
+            if (total > 0) {
+                if (active > 0) {
+                    const tokStr = serverData.data.server.avgGenerateSpeed
+                        ? ` · ${Math.round(serverData.data.server.avgGenerateSpeed)} tok/s`
+                        : '';
+                    content += `{green-fg}● Slots: ${active}/${total} processing${tokStr}{/green-fg}\n`;
+                }
+                else {
+                    content += `{gray-fg}○ Slots: ${total} idle{/gray-fg}\n`;
+                }
+            }
+        }
+        content += "\n";
+        const logPath = logType === 'stdout' ? server.httpLogPath : server.stderrPath;
+        // Check if log exists
+        if (!(await (0, file_utils_js_1.fileExists)(logPath))) {
+            content += `{yellow-fg}No ${logTypeLabel.toLowerCase()} logs found{/yellow-fg}\n`;
+            if (logType === 'stdout') {
+                content += `The server may not have processed any requests yet.\n`;
+            }
+            // Show notice if verbose logging is disabled for System logs
+            if (logType === 'stderr' && !server.verbose) {
+                content += `{yellow-fg}⚠ Verbose logging is disabled{/yellow-fg}\n`;
+            }
+            content += `Log file: ${logPath}\n\n`;
+            content += divider + "\n";
+            content += "{gray-fg}[T]oggle activity/system [R]efresh [ESC] Back{/gray-fg}";
+            return content;
+        }
+        // Show log size
+        const size = await (0, log_utils_js_1.getFileSize)(logPath);
+        content += `File: ${logPath}\n`;
+        content += `Size: ${(0, log_utils_js_1.formatFileSize)(size)}\n`;
+        // Show notice if verbose logging is disabled for System logs
+        if (logType === 'stderr' && !server.verbose) {
+            content += `{yellow-fg}⚠ Verbose logging is disabled{/yellow-fg}\n`;
+        }
+        content += `\n`;
+        // Show logs
+        try {
+            const { execSync } = require("child_process");
+            content += divider + "\n";
+            if (logType === 'stdout') {
+                // Activity logs: Read last 500 lines of HTTP log file (pre-parsed compact format)
+                // Using tail instead of cat avoids the 1MB default execSync buffer limit on large files
+                const output = execSync(`tail -n 500 "${logPath}"`, { encoding: "utf-8" });
+                const lines = output.split("\n").filter((l) => l.trim());
+                if (lines.length === 0) {
+                    content += "{yellow-fg}No HTTP requests logged yet{/yellow-fg}\n";
+                    content +=
+                        "{gray-fg}Send requests to the server to see them here{/gray-fg}\n";
+                }
+                else {
+                    // Filter out health check requests
+                    const parser = new log_parser_js_1.LogParser();
+                    const filteredLines = lines.filter((line) => !parser.isHealthCheckRequest(line));
+                    if (filteredLines.length === 0) {
+                        content += "{gray-fg}No requests logged yet{/gray-fg}\n";
+                    }
+                    else {
+                        // Show last 30 lines newest-first, truncate to fit terminal width
+                        const limitedLines = filteredLines.slice(-30).reverse();
+                        const maxWidth = termWidth - 4;
+                        for (const line of limitedLines) {
+                            if (line.length > maxWidth) {
+                                content += line.substring(0, maxWidth - 3) + "...\n";
+                            }
+                            else {
+                                content += line + "\n";
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                // System logs: Show last 30 lines of stderr, newest-first
+                const output = execSync(`tail -n 30 "${logPath}"`, { encoding: "utf-8" });
+                const lines = output.split("\n").filter((l) => l).reverse();
+                const maxWidth = termWidth - 4;
+                for (const line of lines) {
+                    // Remove ANSI color codes to calculate visible length
+                    const visibleLine = line.replace(/\x1b\[[0-9;]*m/g, '');
+                    if (visibleLine.length > maxWidth) {
+                        // Truncate and add ellipsis
+                        let visibleLen = 0;
+                        let truncated = '';
+                        for (let i = 0; i < line.length && visibleLen < maxWidth - 3; i++) {
+                            truncated += line[i];
+                            // Only count visible characters
+                            if (line[i] !== '\x1b' && !line.slice(i).match(/^\x1b\[[0-9;]*m/)) {
+                                visibleLen++;
+                            }
+                            else if (line.slice(i).match(/^\x1b\[[0-9;]*m/)) {
+                                // Skip the rest of the ANSI code
+                                const match = line.slice(i).match(/^\x1b\[[0-9;]*m/);
+                                if (match) {
+                                    truncated += match[0].slice(1);
+                                    i += match[0].length - 1;
+                                }
+                            }
+                        }
+                        content += truncated + '...\n';
+                    }
+                    else {
+                        content += line + '\n';
+                    }
+                }
+            }
+            content += divider + "\n";
+        }
+        catch (err) {
+            content += "{red-fg}Failed to read logs{/red-fg}\n";
+        }
+        const toggleRefreshText = logsRefreshInterval
+            ? "[F] Pause auto-refresh"
+            : "[F] Resume auto-refresh";
+        content += `{gray-fg}[T]oggle activity/system [R]efresh ${toggleRefreshText} [ESC] Back{/gray-fg}`;
+        // Update last updated time
+        logsLastUpdated = new Date();
         return content;
     }
+    // Start logs auto-refresh
+    function startLogsAutoRefresh() {
+        // Clear any existing interval
+        if (logsRefreshInterval) {
+            clearInterval(logsRefreshInterval);
+        }
+        // Set up auto-refresh every 3 seconds
+        logsRefreshInterval = setInterval(() => {
+            if (viewMode === "detail" && detailSubView === "logs") {
+                render();
+            }
+        }, 3000);
+    }
+    // Stop logs auto-refresh
+    function stopLogsAutoRefresh() {
+        if (logsRefreshInterval) {
+            clearInterval(logsRefreshInterval);
+            logsRefreshInterval = null;
+        }
+    }
+    // Render current view
+    async function render() {
+        // No more handler registration in render() - KeyboardManager handles this!
+        let content = "";
+        if (viewMode === "list") {
+            stopLogsAutoRefresh();
+            content = renderListView(lastSystemMetrics);
+        }
+        else if (viewMode === "detail") {
+            if (detailSubView === "status") {
+                stopLogsAutoRefresh();
+                content = renderDetailView(lastSystemMetrics);
+            }
+            else if (detailSubView === "logs") {
+                content = await renderServerLogs();
+                if (!logsRefreshInterval) {
+                    startLogsAutoRefresh();
+                }
+            }
+        }
+        contentBox.setContent(content);
+        screen.render();
+    }
     // Fetch and update display
     async function fetchData() {
         try {
+            // Reload server configs from disk to pick up changes made via web UI or CLI
+            try {
+                const freshServers = await state_manager_js_1.stateManager.getAllServers();
+                // Create aggregators/historyManagers for any newly added servers
+                for (const server of freshServers) {
+                    if (!aggregators.has(server.id)) {
+                        aggregators.set(server.id, new metrics_aggregator_js_1.MetricsAggregator(server));
+                        historyManagers.set(server.id, new history_manager_js_1.HistoryManager(server.id));
+                    }
+                }
+                // Clean up removed servers
+                for (const id of aggregators.keys()) {
+                    if (!freshServers.find((s) => s.id === id)) {
+                        aggregators.delete(id);
+                        historyManagers.delete(id);
+                        serverDataMap.delete(id);
+                    }
+                }
+                // Clamp selected index if server list shrank
+                if (selectedServerIndex >= freshServers.length) {
+                    selectedServerIndex = Math.max(0, freshServers.length - 1);
+                    selectedRowIndex = selectedServerIndex;
+                }
+                servers = freshServers;
+            }
+            catch {
+                // Keep using existing servers if the reload fails
+            }
+            // Skip fetching metrics if we're in logs view (don't need server data)
+            if (viewMode === "detail" && detailSubView === "logs") {
+                await render();
+                return;
+            }
             // Collect system metrics ONCE for all servers (not per-server)
             // This prevents spawning multiple macmon processes
             const systemMetricsPromise = systemCollector.collectSystemMetrics();
             // Batch collect process memory and CPU for ALL servers in parallel
             // This prevents spawning multiple top processes (5x speedup)
-            const { getBatchProcessMemory, getBatchProcessCpu } = await Promise.resolve().then(() => __importStar(require('../utils/process-utils.js')));
-            const pids = servers.filter(s => s.pid).map(s => s.pid);
+            const { getBatchProcessMemory, getBatchProcessCpu } = await Promise.resolve().then(() => __importStar(require("../utils/process-utils.js")));
+            const pids = servers.filter((s) => s.pid).map((s) => s.pid);
             const memoryMapPromise = pids.length > 0
                 ? getBatchProcessMemory(pids)
                 : Promise.resolve(new Map());
@@ -484,17 +733,20 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
                 ? getBatchProcessCpu(pids)
                 : Promise.resolve(new Map());
             // Wait for both batches to complete
-            const [memoryMap, cpuMap] = await Promise.all([memoryMapPromise, cpuMapPromise]);
+            const [memoryMap, cpuMap] = await Promise.all([
+                memoryMapPromise,
+                cpuMapPromise,
+            ]);
             // Collect server metrics only for RUNNING servers (skip stopped servers)
             const promises = servers
-                .filter(server => server.status === 'running')
+                .filter((server) => server.status === "running")
                 .map(async (server) => {
                 const aggregator = aggregators.get(server.id);
                 try {
                     // Use collectServerMetrics instead of collectMonitorData
                     // to avoid spawning macmon per server
                     // Pass pre-fetched memory and CPU to avoid spawning top per server
-                    const serverMetrics = await aggregator.collectServerMetrics(server, server.pid ? memoryMap.get(server.pid) ?? null : null, server.pid ? cpuMap.get(server.pid) ?? null : null);
+                    const serverMetrics = await aggregator.collectServerMetrics(server, server.pid ? (memoryMap.get(server.pid) ?? null) : null, server.pid ? (cpuMap.get(server.pid) ?? null) : null);
                     // Build MonitorData manually with shared system metrics
                     const data = {
                         server: serverMetrics,
@@ -513,14 +765,14 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
                     serverDataMap.set(server.id, {
                         server,
                         data: null,
-                        error: err instanceof Error ? err.message : 'Unknown error',
+                        error: err instanceof Error ? err.message : "Unknown error",
                     });
                 }
             });
             // Set null data for stopped servers (no metrics collection)
             servers
-                .filter(server => server.status !== 'running')
-                .forEach(server => {
+                .filter((server) => server.status !== "running")
+                .forEach((server) => {
                 serverDataMap.set(server.id, {
                     server,
                     data: null,
@@ -541,38 +793,33 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
             // Append to history for each server (silent failure)
             // Only save history for servers that are healthy and not stale
             for (const [serverId, serverData] of serverDataMap) {
-                if (serverData.data && !serverData.data.server.stale && serverData.data.server.healthy) {
+                if (serverData.data &&
+                    !serverData.data.server.stale &&
+                    serverData.data.server.healthy) {
                     const manager = historyManagers.get(serverId);
-                    manager?.appendSnapshot(serverData.data.server, serverData.data.system)
-                        .catch(err => {
+                    manager
+                        ?.appendSnapshot(serverData.data.server, serverData.data.system)
+                        .catch((err) => {
                         // Don't interrupt monitoring on history write failure
                         console.error(`Failed to save history for ${serverId}:`, err);
                     });
                 }
             }
-            // Render once with complete data
-            let content = '';
-            if (viewMode === 'list') {
-                content = renderListView(systemMetrics);
-            }
-            else {
-                content = renderDetailView(systemMetrics);
-            }
-            contentBox.setContent(content);
             // Call onFirstRender callback before first render (to clean up splash screen)
             if (!hasCalledFirstRender && onFirstRender) {
                 hasCalledFirstRender = true;
                 onFirstRender();
             }
-            screen.render();
+            // Render once with complete data
+            await render();
             // Clear loading state
             hideLoading();
         }
         catch (err) {
-            const errorMsg = err instanceof Error ? err.message : 'Unknown error';
-            contentBox.setContent('{bold}{red-fg}Error{/red-fg}{/bold}\n\n' +
+            const errorMsg = err instanceof Error ? err.message : "Unknown error";
+            contentBox.setContent("{bold}{red-fg}Error{/red-fg}{/bold}\n\n" +
                 `{red-fg}${errorMsg}{/red-fg}\n\n` +
-                '{gray-fg}Press [R] to retry or [Q] to quit{/gray-fg}');
+                "{gray-fg}Press [R] to retry or [Q] to quit{/gray-fg}");
             screen.render();
             // Clear loading state on error too
             isLoading = false;
@@ -592,7 +839,7 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
         if (!match)
             return null;
         const num = parseFloat(match[1]);
-        const hasK = match[2] === 'k';
+        const hasK = match[2] === "k";
         if (isNaN(num) || num <= 0)
             return null;
         return hasK ? Math.round(num * 1024) : Math.round(num);
@@ -604,18 +851,18 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
         }
         return value.toLocaleString();
     }
-    // Helper to create modal boxes
-    function createModal(title, height = 'shrink', borderColor = 'cyan') {
+    // Helper to create modal boxes (matches ModalController styling)
+    function createModal(title, height = "shrink", borderColor = "cyan") {
         return blessed_1.default.box({
             parent: screen,
-            top: 'center',
-            left: 'center',
-            width: '70%',
+            top: "center",
+            left: "center",
+            width: "70%",
             height,
-            border: { type: 'line' },
+            border: { type: "line" },
             style: {
                 border: { fg: borderColor },
-                fg: 'white',
+                fg: "white", // Matches ModalController
             },
             tags: true,
             label: ` ${title} `,
@@ -623,23 +870,11 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
     }
     // Show progress modal
     function showProgressModal(message) {
-        const modal = createModal('Working', 6);
-        modal.setContent(`\n  {cyan-fg}${message}{/cyan-fg}`);
-        screen.render();
-        return modal;
+        return modalController.showProgress(message);
     }
     // Show error modal
     async function showErrorModal(message) {
-        return new Promise((resolve) => {
-            const modal = createModal('Error', 8, 'red');
-            modal.setContent(`\n  {red-fg}❌ ${message}{/red-fg}\n\n  {gray-fg}[Enter] Close{/gray-fg}`);
-            screen.render();
-            modal.focus();
-            modal.key(['enter', 'escape'], () => {
-                screen.remove(modal);
-                resolve();
-            });
-        });
+        await modalController.showError(message, () => { });
     }
     // Remove server dialog
     async function showRemoveServerDialog(server) {
@@ -648,26 +883,30 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
             clearInterval(intervalId);
         if (spinnerIntervalId)
             clearInterval(spinnerIntervalId);
-        unregisterHandlers();
+        // Push empty blocking context to prevent main handlers from firing
+        // (This modal uses blessed's modal.key() directly, not KeyboardManager)
+        keyboardManager.pushContext('remove-server-dialog', {}, true);
         // Check if other servers use the same model
         const allServers = await state_manager_js_1.stateManager.getAllServers();
-        const otherServersWithSameModel = allServers.filter(s => s.id !== server.id && s.modelPath === server.modelPath);
+        const otherServersWithSameModel = allServers.filter((s) => s.id !== server.id && s.modelPath === server.modelPath);
         let deleteModelOption = false;
         const showDeleteModelOption = otherServersWithSameModel.length === 0;
         // 0 = checkbox (delete model), 1 = confirm button
         let selectedOption = showDeleteModelOption ? 0 : 1;
-        const modal = createModal('Remove Server', showDeleteModelOption ? 18 : 14, 'red');
+        const overlay = (0, overlay_utils_js_1.createOverlay)(screen);
+        screen.append(overlay);
+        const modal = createModal("Remove Server", showDeleteModelOption ? 18 : 14, "red");
         function renderDialog() {
-            let content = '\n';
+            let content = "\n";
             content += `  {bold}Remove server: ${server.id}{/bold}\n\n`;
             content += `  Model: ${server.modelName}\n`;
             content += `  Port:  ${server.port}\n`;
-            content += `  Status: ${server.status === 'running' ? '{green-fg}running{/green-fg}' : '{gray-fg}stopped{/gray-fg}'}\n\n`;
-            if (server.status === 'running') {
+            content += `  Status: ${server.status === "running" ? "{green-fg}running{/green-fg}" : "{gray-fg}stopped{/gray-fg}"}\n\n`;
+            if (server.status === "running") {
                 content += `  {yellow-fg}⚠ Server will be stopped{/yellow-fg}\n\n`;
             }
             if (showDeleteModelOption) {
-                const checkbox = deleteModelOption ? '☑' : '☐';
+                const checkbox = deleteModelOption ? "☑" : "☐";
                 const isCheckboxSelected = selectedOption === 0;
                 if (isCheckboxSelected) {
                     content += `  {cyan-bg}{15-fg}${checkbox} Also delete model file{/15-fg}{/cyan-bg}\n`;
@@ -694,71 +933,54 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
         renderDialog();
         modal.focus();
         return new Promise((resolve) => {
-            modal.key(['up', 'k'], () => {
+            modal.key(["up", "k"], () => {
                 if (showDeleteModelOption && selectedOption === 1) {
                     selectedOption = 0;
                     renderDialog();
                 }
             });
-            modal.key(['down', 'j'], () => {
+            modal.key(["down", "j"], () => {
                 if (showDeleteModelOption && selectedOption === 0) {
                     selectedOption = 1;
                     renderDialog();
                 }
             });
-            modal.key(['space'], () => {
+            modal.key(["space"], () => {
                 if (showDeleteModelOption && selectedOption === 0) {
                     deleteModelOption = !deleteModelOption;
                     renderDialog();
                 }
             });
-            modal.key(['escape'], () => {
+            modal.key(["escape"], () => {
                 screen.remove(modal);
-                registerHandlers();
+                screen.remove(overlay);
+                keyboardManager.popContext(); // Pop the blocking context
                 startPolling();
                 resolve();
             });
-            modal.key(['enter'], async () => {
+            modal.key(["enter"], async () => {
                 screen.remove(modal);
+                screen.remove(overlay);
                 // Show progress
-                const progressModal = showProgressModal('Removing server...');
+                const progressModal = showProgressModal("Removing server...");
                 try {
-                    // Stop and unload service if running
-                    if (server.status === 'running') {
-                        progressModal.setContent('\n  {cyan-fg}Stopping server...{/cyan-fg}');
-                        screen.render();
-                        try {
-                            await launchctl_manager_js_1.launchctlManager.unloadService(server.plistPath);
-                            await launchctl_manager_js_1.launchctlManager.waitForServiceStop(server.label, 5000);
-                        }
-                        catch (err) {
-                            // Continue even if unload fails
-                        }
-                    }
-                    else {
-                        // Still try to unload in case it's in a weird state
-                        try {
-                            await launchctl_manager_js_1.launchctlManager.unloadService(server.plistPath);
-                        }
-                        catch (err) {
-                            // Ignore
-                        }
-                    }
-                    // Delete plist
-                    progressModal.setContent('\n  {cyan-fg}Removing configuration...{/cyan-fg}');
-                    screen.render();
-                    await launchctl_manager_js_1.launchctlManager.deletePlist(server.plistPath);
-                    // Delete server config
-                    await state_manager_js_1.stateManager.deleteServerConfig(server.id);
+                    const result = await server_lifecycle_service_js_1.serverLifecycleService.deleteServer(server.id, {
+                        onProgress: (message) => {
+                            progressModal.setContent(`\n  {cyan-fg}${message}{/cyan-fg}`);
+                            screen.render();
+                        },
+                    });
+                    if (!result.success)
+                        throw new Error(result.error || 'Failed to delete server');
                     // Delete model if requested
                     if (deleteModelOption && showDeleteModelOption) {
-                        progressModal.setContent('\n  {cyan-fg}Deleting model file...{/cyan-fg}');
+                        progressModal.setContent("\n  {cyan-fg}Deleting model file...{/cyan-fg}");
                         screen.render();
                         await fs.unlink(server.modelPath);
                     }
-                    screen.remove(progressModal);
+                    modalController.closeProgress(progressModal);
                     // Remove server from our arrays
-                    const idx = servers.findIndex(s => s.id === server.id);
+                    const idx = servers.findIndex((s) => s.id === server.id);
                     if (idx !== -1) {
                         servers.splice(idx, 1);
                         aggregators.delete(server.id);
@@ -766,17 +988,18 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
                         serverDataMap.delete(server.id);
                     }
                     // Go back to list view
-                    viewMode = 'list';
+                    viewMode = "list";
                     selectedRowIndex = Math.min(selectedRowIndex, Math.max(0, servers.length - 1));
                     selectedServerIndex = selectedRowIndex;
-                    registerHandlers();
+                    keyboardManager.popContext(); // Pop the blocking context
+                    updateKeyboardContext(); // Update for list view
                     startPolling();
                     resolve();
                 }
                 catch (err) {
-                    screen.remove(progressModal);
-                    await showErrorModal(err instanceof Error ? err.message : 'Unknown error');
-                    registerHandlers();
+                    modalController.closeProgress(progressModal);
+                    await showErrorModal(err instanceof Error ? err.message : "Unknown error");
+                    keyboardManager.popContext(); // Pop the blocking context
                     startPolling();
                     resolve();
                 }
@@ -790,26 +1013,29 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
             clearInterval(intervalId);
         if (spinnerIntervalId)
             clearInterval(spinnerIntervalId);
-        unregisterHandlers();
+        // Push empty blocking context for create flow
+        keyboardManager.pushContext('create-server-flow', {}, true);
         // Step 1: Model selection
         const models = await model_scanner_js_1.modelScanner.scanModels();
         if (models.length === 0) {
-            await showErrorModal('No models found in ~/models directory.\nUse [M]odels → [S]earch to download models.');
+            await showErrorModal("No models found in ~/models directory.\nUse [M]odels → [S]earch to download models.");
             // Immediately render with cached data for instant feedback
             const content = renderListView(lastSystemMetrics);
             contentBox.setContent(content);
             screen.render();
-            registerHandlers();
+            keyboardManager.popContext(); // Pop the blocking context
             startPolling();
             return;
         }
         // Check which models already have servers
         const allServers = await state_manager_js_1.stateManager.getAllServers();
-        const modelsWithServers = new Set(allServers.map(s => s.modelPath));
+        const modelsWithServers = new Set(allServers.map((s) => s.modelPath));
         let selectedModelIndex = 0;
         let scrollOffset = 0;
         const maxVisible = 8;
-        const modelModal = createModal('Create Server - Select Model', maxVisible + 8);
+        const modelOverlay = (0, overlay_utils_js_1.createOverlay)(screen);
+        screen.append(modelOverlay);
+        const modelModal = createModal("Create Server - Select Model", maxVisible + 8);
         function renderModelPicker() {
             // Adjust scroll offset
             if (selectedModelIndex < scrollOffset) {
@@ -818,25 +1044,27 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
             else if (selectedModelIndex >= scrollOffset + maxVisible) {
                 scrollOffset = selectedModelIndex - maxVisible + 1;
             }
-            let content = '\n';
-            content += '  {bold}Select a model to create a server for:{/bold}\n\n';
+            let content = "\n";
+            content += "  {bold}Select a model to create a server for:{/bold}\n\n";
             const visibleModels = models.slice(scrollOffset, scrollOffset + maxVisible);
             for (let i = 0; i < visibleModels.length; i++) {
                 const model = visibleModels[i];
                 const actualIndex = scrollOffset + i;
                 const isSelected = actualIndex === selectedModelIndex;
                 const hasServer = modelsWithServers.has(model.path);
-                const indicator = isSelected ? '►' : ' ';
+                const indicator = isSelected ? "►" : " ";
                 // Truncate filename if too long
                 let displayName = model.filename;
                 const maxLen = 40;
                 if (displayName.length > maxLen) {
-                    displayName = displayName.substring(0, maxLen - 3) + '...';
+                    displayName = displayName.substring(0, maxLen - 3) + "...";
                 }
                 displayName = displayName.padEnd(maxLen);
                 const size = model.sizeFormatted.padStart(8);
-                const serverIndicator = hasServer ? ' {yellow-fg}(has server){/yellow-fg}' : '';
-                const serverIndicatorPlain = hasServer ? ' (has server)' : '';
+                const serverIndicator = hasServer
+                    ? " {yellow-fg}(has server){/yellow-fg}"
+                    : "";
+                const serverIndicatorPlain = hasServer ? " (has server)" : "";
                 if (isSelected) {
                     content += `  {cyan-bg}{15-fg}${indicator} ${displayName} ${size}${serverIndicatorPlain}{/15-fg}{/cyan-bg}\n`;
                 }
@@ -849,27 +1077,30 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
                 const scrollInfo = `${selectedModelIndex + 1}/${models.length}`;
                 content += `\n  {gray-fg}${scrollInfo}{/gray-fg}`;
             }
-            content += '\n\n  {gray-fg}[↑/↓] Navigate  [Enter] Select  [ESC] Cancel{/gray-fg}';
+            content +=
+                "\n\n  {gray-fg}[↑/↓] Navigate  [Enter] Select  [ESC] Cancel{/gray-fg}";
             modelModal.setContent(content);
             screen.render();
         }
         renderModelPicker();
         modelModal.focus();
         const selectedModel = await new Promise((resolve) => {
-            modelModal.key(['up', 'k'], () => {
+            modelModal.key(["up", "k"], () => {
                 selectedModelIndex = Math.max(0, selectedModelIndex - 1);
                 renderModelPicker();
             });
-            modelModal.key(['down', 'j'], () => {
+            modelModal.key(["down", "j"], () => {
                 selectedModelIndex = Math.min(models.length - 1, selectedModelIndex + 1);
                 renderModelPicker();
             });
-            modelModal.key(['escape'], () => {
+            modelModal.key(["escape"], () => {
                 screen.remove(modelModal);
+                screen.remove(modelOverlay);
                 resolve(null);
             });
-            modelModal.key(['enter'], () => {
+            modelModal.key(["enter"], () => {
                 screen.remove(modelModal);
+                screen.remove(modelOverlay);
                 resolve(models[selectedModelIndex]);
             });
         });
@@ -878,45 +1109,36 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
             const content = renderListView(lastSystemMetrics);
             contentBox.setContent(content);
             screen.render();
-            registerHandlers();
+            keyboardManager.popContext(); // Pop the blocking context
             startPolling();
             return;
         }
         // Create a non-null reference for closures
         const model = selectedModel;
-        // Check if server already exists for this model
-        const existingServer = allServers.find(s => s.modelPath === model.path);
-        if (existingServer) {
-            await showErrorModal(`Server already exists for this model.\nServer ID: ${existingServer.id}\nPort: ${existingServer.port}`);
-            // Immediately render with cached data for instant feedback
-            const content = renderListView(lastSystemMetrics);
-            contentBox.setContent(content);
-            screen.render();
-            registerHandlers();
-            startPolling();
-            return;
-        }
         // Generate smart defaults
         const defaultPort = await port_manager_js_1.portManager.findAvailablePort();
         const modelSize = model.size;
         // Smart context size based on model size
         let defaultCtxSize = 4096;
-        if (modelSize < 1024 * 1024 * 1024) { // < 1GB
+        if (modelSize < 1024 * 1024 * 1024) {
+            // < 1GB
             defaultCtxSize = 2048;
         }
-        else if (modelSize < 3 * 1024 * 1024 * 1024) { // < 3GB
+        else if (modelSize < 3 * 1024 * 1024 * 1024) {
+            // < 3GB
             defaultCtxSize = 4096;
         }
-        else if (modelSize < 6 * 1024 * 1024 * 1024) { // < 6GB
+        else if (modelSize < 6 * 1024 * 1024 * 1024) {
+            // < 6GB
             defaultCtxSize = 8192;
         }
         else {
             defaultCtxSize = 16384;
         }
-        const os = await Promise.resolve().then(() => __importStar(require('os')));
+        const os = await Promise.resolve().then(() => __importStar(require("os")));
         const defaultThreads = Math.max(1, Math.floor(os.cpus().length / 2));
         const config = {
-            host: '127.0.0.1',
+            host: "127.0.0.1",
             port: defaultPort,
             threads: defaultThreads,
             ctxSize: defaultCtxSize,
@@ -925,32 +1147,39 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
         };
         // Configuration fields
         const fields = [
-            { key: 'host', label: 'Host', type: 'select', options: ['127.0.0.1', '0.0.0.0'] },
-            { key: 'port', label: 'Port', type: 'number' },
-            { key: 'threads', label: 'Threads', type: 'number' },
-            { key: 'ctxSize', label: 'Context Size', type: 'number' },
-            { key: 'gpuLayers', label: 'GPU Layers', type: 'number' },
-            { key: 'verbose', label: 'Verbose Logs', type: 'toggle' },
+            {
+                key: "host",
+                label: "Host",
+                type: "select",
+                options: ["127.0.0.1", "0.0.0.0"],
+            },
+            { key: "port", label: "Port", type: "number" },
+            { key: "threads", label: "Threads", type: "number" },
+            { key: "ctxSize", label: "Context Size", type: "number" },
+            { key: "gpuLayers", label: "GPU Layers", type: "number" },
+            { key: "verbose", label: "Verbose Logs", type: "toggle" },
         ];
         let selectedFieldIndex = 0;
-        const configModal = createModal('Create Server - Configuration', 20);
+        const configOverlay = (0, overlay_utils_js_1.createOverlay)(screen);
+        screen.append(configOverlay);
+        const configModal = createModal("Create Server - Configuration", 20);
         function formatConfigValue(key, value) {
-            if (key === 'verbose')
-                return value ? 'Enabled' : 'Disabled';
-            if (key === 'ctxSize')
+            if (key === "verbose")
+                return value ? "Enabled" : "Disabled";
+            if (key === "ctxSize")
                 return formatContextSize(value);
             return String(value);
         }
         function renderConfigScreen() {
-            let content = '\n';
+            let content = "\n";
             content += `  {bold}Model:{/bold} ${model.filename}\n`;
             content += `  {bold}Size:{/bold}  ${model.sizeFormatted}\n\n`;
-            content += '  {bold}Server Configuration:{/bold}\n';
-            content += '  ─'.repeat(30) + '\n';
+            content += "  {bold}Server Configuration:{/bold}\n";
+            content += "  ─".repeat(30) + "\n";
             for (let i = 0; i < fields.length; i++) {
                 const field = fields[i];
                 const isSelected = i === selectedFieldIndex;
-                const indicator = isSelected ? '►' : ' ';
+                const indicator = isSelected ? "►" : " ";
                 const label = field.label.padEnd(14);
                 const value = formatConfigValue(field.key, config[field.key]);
                 if (isSelected) {
@@ -960,7 +1189,7 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
                     content += `  ${indicator} ${label}{cyan-fg}${value}{/cyan-fg}\n`;
                 }
             }
-            content += '\n';
+            content += "\n";
             const createSelected = selectedFieldIndex === fields.length;
             if (createSelected) {
                 content += `  {green-bg}{15-fg}[ Create Server ]{/15-fg}{/green-bg}\n`;
@@ -968,46 +1197,51 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
             else {
                 content += `  {green-fg}[ Create Server ]{/green-fg}\n`;
             }
-            content += '\n  {gray-fg}[↑/↓] Navigate  [Enter] Edit/Create  [ESC] Cancel{/gray-fg}';
+            content +=
+                "\n  {gray-fg}[↑/↓] Navigate  [Enter] Edit/Create  [ESC] Cancel{/gray-fg}";
             configModal.setContent(content);
             screen.render();
         }
         renderConfigScreen();
         configModal.focus();
         const shouldCreate = await new Promise((resolve) => {
-            configModal.key(['up', 'k'], () => {
+            configModal.key(["up", "k"], () => {
                 selectedFieldIndex = Math.max(0, selectedFieldIndex - 1);
                 renderConfigScreen();
             });
-            configModal.key(['down', 'j'], () => {
+            configModal.key(["down", "j"], () => {
                 selectedFieldIndex = Math.min(fields.length, selectedFieldIndex + 1);
                 renderConfigScreen();
             });
-            configModal.key(['escape'], () => {
+            configModal.key(["escape"], () => {
                 screen.remove(configModal);
+                screen.remove(configOverlay);
                 resolve(false);
             });
-            configModal.key(['enter'], async () => {
+            configModal.key(["enter"], async () => {
                 if (selectedFieldIndex === fields.length) {
                     // Create button selected
                     screen.remove(configModal);
+                    screen.remove(configOverlay);
                     resolve(true);
                 }
                 else {
                     // Edit field
                     const field = fields[selectedFieldIndex];
-                    if (field.type === 'select') {
+                    if (field.type === "select") {
                         // Show select dialog
                         const options = field.options;
                         let optionIndex = options.indexOf(config[field.key]);
                         if (optionIndex < 0)
                             optionIndex = 0;
+                        const selectOverlay = (0, overlay_utils_js_1.createOverlay)(screen);
+                        screen.append(selectOverlay);
                         const selectModal = createModal(field.label, options.length + 6);
                         function renderSelectOptions() {
-                            let content = '\n';
+                            let content = "\n";
                             for (let i = 0; i < options.length; i++) {
                                 const isOpt = i === optionIndex;
-                                const ind = isOpt ? '●' : '○';
+                                const ind = isOpt ? "●" : "○";
                                 if (isOpt) {
                                     content += `  {cyan-fg}${ind} ${options[i]}{/cyan-fg}\n`;
                                 }
@@ -1015,44 +1249,50 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
                                     content += `  {gray-fg}${ind} ${options[i]}{/gray-fg}\n`;
                                 }
                             }
-                            if (field.key === 'host' && options[optionIndex] === '0.0.0.0') {
-                                content += '\n  {yellow-fg}⚠ Warning: Exposes server to network{/yellow-fg}';
+                            if (field.key === "host" && options[optionIndex] === "0.0.0.0") {
+                                content +=
+                                    "\n  {yellow-fg}⚠ Warning: Exposes server to network{/yellow-fg}";
                             }
-                            content += '\n\n  {gray-fg}[↑/↓] Select  [Enter] Confirm{/gray-fg}';
+                            content +=
+                                "\n\n  {gray-fg}[↑/↓] Select  [Enter] Confirm{/gray-fg}";
                             selectModal.setContent(content);
                             screen.render();
                         }
                         renderSelectOptions();
                         selectModal.focus();
                         await new Promise((resolveSelect) => {
-                            selectModal.key(['up', 'k'], () => {
+                            selectModal.key(["up", "k"], () => {
                                 optionIndex = Math.max(0, optionIndex - 1);
                                 renderSelectOptions();
                             });
-                            selectModal.key(['down', 'j'], () => {
+                            selectModal.key(["down", "j"], () => {
                                 optionIndex = Math.min(options.length - 1, optionIndex + 1);
                                 renderSelectOptions();
                             });
-                            selectModal.key(['enter'], () => {
+                            selectModal.key(["enter"], () => {
                                 config[field.key] = options[optionIndex];
                                 screen.remove(selectModal);
+                                screen.remove(selectOverlay);
                                 resolveSelect();
                             });
-                            selectModal.key(['escape'], () => {
+                            selectModal.key(["escape"], () => {
                                 screen.remove(selectModal);
+                                screen.remove(selectOverlay);
                                 resolveSelect();
                             });
                         });
                         renderConfigScreen();
                         configModal.focus();
                     }
-                    else if (field.type === 'toggle') {
+                    else if (field.type === "toggle") {
                         config[field.key] = !config[field.key];
                         renderConfigScreen();
                     }
-                    else if (field.type === 'number') {
+                    else if (field.type === "number") {
                         // Number input
-                        const isCtxSize = field.key === 'ctxSize';
+                        const isCtxSize = field.key === "ctxSize";
+                        const inputOverlay = (0, overlay_utils_js_1.createOverlay)(screen);
+                        screen.append(inputOverlay);
                         const inputModal = createModal(`Edit ${field.label}`, isCtxSize ? 11 : 10);
                         const currentDisplay = isCtxSize
                             ? formatContextSize(config[field.key])
@@ -1070,7 +1310,7 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
                                 parent: inputModal,
                                 top: 2,
                                 left: 2,
-                                content: '{gray-fg}Accepts: 4096, 4k, 8k, 16k, 32k, 64k, 128k{/gray-fg}',
+                                content: "{gray-fg}Accepts: 4096, 4k, 8k, 16k, 32k, 64k, 128k{/gray-fg}",
                                 tags: true,
                             });
                         }
@@ -1081,17 +1321,17 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
                             right: 2,
                             height: 3,
                             inputOnFocus: true,
-                            border: { type: 'line' },
+                            border: { type: "line" },
                             style: {
-                                border: { fg: 'white' },
-                                focus: { border: { fg: 'green' } },
+                                border: { fg: "white" },
+                                focus: { border: { fg: "green" } },
                             },
                         });
                         blessed_1.default.text({
                             parent: inputModal,
                             bottom: 1,
                             left: 2,
-                            content: '{gray-fg}[Enter] Confirm  [ESC] Cancel{/gray-fg}',
+                            content: "{gray-fg}[Enter] Confirm  [ESC] Cancel{/gray-fg}",
                             tags: true,
                         });
                         // Pre-fill with k notation for context size
@@ -1102,7 +1342,7 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
                         screen.render();
                         inputBox.focus();
                         await new Promise((resolveInput) => {
-                            inputBox.on('submit', (value) => {
+                            inputBox.on("submit", (value) => {
                                 let numValue;
                                 if (isCtxSize) {
                                     numValue = parseContextSize(value);
@@ -1116,14 +1356,17 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
                                     config[field.key] = numValue;
                                 }
                                 screen.remove(inputModal);
+                                screen.remove(inputOverlay);
                                 resolveInput();
                             });
-                            inputBox.on('cancel', () => {
+                            inputBox.on("cancel", () => {
                                 screen.remove(inputModal);
+                                screen.remove(inputOverlay);
                                 resolveInput();
                             });
-                            inputBox.key(['escape'], () => {
+                            inputBox.key(["escape"], () => {
                                 screen.remove(inputModal);
+                                screen.remove(inputOverlay);
                                 resolveInput();
                             });
                         });
@@ -1138,94 +1381,36 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
             const content = renderListView(lastSystemMetrics);
             contentBox.setContent(content);
             screen.render();
-            registerHandlers();
+            keyboardManager.popContext(); // Pop the blocking context
             startPolling();
             return;
         }
         // Step 3: Create the server
-        const progressModal = showProgressModal('Creating server...');
+        const progressModal = showProgressModal("Creating server...");
         try {
-            // Generate full server config
-            const serverOptions = {
+            // Create server using centralized service
+            const result = await server_lifecycle_service_js_1.serverLifecycleService.createServer(model.baseModelName || model.filename, {
                 port: config.port,
                 host: config.host,
                 threads: config.threads,
                 ctxSize: config.ctxSize,
                 gpuLayers: config.gpuLayers,
                 verbose: config.verbose,
-            };
-            progressModal.setContent('\n  {cyan-fg}Generating configuration...{/cyan-fg}');
-            screen.render();
-            const serverConfig = await config_generator_js_1.configGenerator.generateConfig(model.path, model.filename, model.size, config.port, serverOptions);
-            // Ensure log directory exists
-            await (0, file_utils_js_1.ensureDir)(path.dirname(serverConfig.stdoutPath));
-            // Create plist
-            progressModal.setContent('\n  {cyan-fg}Creating launchctl service...{/cyan-fg}');
-            screen.render();
-            await launchctl_manager_js_1.launchctlManager.createPlist(serverConfig);
-            // Load service
-            try {
-                await launchctl_manager_js_1.launchctlManager.loadService(serverConfig.plistPath);
-            }
-            catch (error) {
-                await launchctl_manager_js_1.launchctlManager.deletePlist(serverConfig.plistPath);
-                throw new Error(`Failed to load service: ${error.message}`);
-            }
-            // Start service
-            progressModal.setContent('\n  {cyan-fg}Starting server...{/cyan-fg}');
-            screen.render();
-            try {
-                await launchctl_manager_js_1.launchctlManager.startService(serverConfig.label);
-            }
-            catch (error) {
-                await launchctl_manager_js_1.launchctlManager.unloadService(serverConfig.plistPath);
-                await launchctl_manager_js_1.launchctlManager.deletePlist(serverConfig.plistPath);
-                throw new Error(`Failed to start service: ${error.message}`);
-            }
-            // Wait for startup
-            progressModal.setContent('\n  {cyan-fg}Waiting for server to start...{/cyan-fg}');
-            screen.render();
-            const started = await launchctl_manager_js_1.launchctlManager.waitForServiceStart(serverConfig.label, 5000);
-            if (!started) {
-                await launchctl_manager_js_1.launchctlManager.unloadService(serverConfig.plistPath);
-                await launchctl_manager_js_1.launchctlManager.deletePlist(serverConfig.plistPath);
-                throw new Error('Server failed to start. Check logs.');
-            }
-            // Wait for port to be ready (server may take a moment to bind)
-            progressModal.setContent('\n  {cyan-fg}Waiting for server to be ready...{/cyan-fg}');
-            screen.render();
-            const portTimeout = 10000; // 10 seconds
-            const portStartTime = Date.now();
-            let portReady = false;
-            while (Date.now() - portStartTime < portTimeout) {
-                if (await (0, process_utils_js_1.isPortInUse)(serverConfig.port)) {
-                    portReady = true;
-                    break;
-                }
-                await new Promise(resolve => setTimeout(resolve, 500));
-            }
-            if (!portReady) {
-                await launchctl_manager_js_1.launchctlManager.unloadService(serverConfig.plistPath);
-                await launchctl_manager_js_1.launchctlManager.deletePlist(serverConfig.plistPath);
-                throw new Error('Server started but port not responding. Check logs.');
-            }
-            // Update config with running status
-            let updatedConfig = await status_checker_js_1.statusChecker.updateServerStatus(serverConfig);
-            // Parse Metal memory allocation (wait a bit for model to load)
-            progressModal.setContent('\n  {cyan-fg}Detecting GPU memory allocation...{/cyan-fg}');
-            screen.render();
-            await new Promise(resolve => setTimeout(resolve, 3000));
-            const metalMemoryMB = await (0, file_utils_js_1.parseMetalMemoryFromLog)(updatedConfig.stderrPath);
-            if (metalMemoryMB) {
-                updatedConfig = { ...updatedConfig, metalMemoryMB };
+                metalDetectionDelayMs: 3000,
+                onProgress: (message) => {
+                    progressModal.setContent(`\n  {cyan-fg}${message}{/cyan-fg}`);
+                    screen.render();
+                },
+            });
+            if (!result.success) {
+                throw new Error(result.error);
             }
-            // Save server config
-            await state_manager_js_1.stateManager.saveServerConfig(updatedConfig);
+            const updatedConfig = result.server;
             // Show success message briefly
-            progressModal.setContent('\n  {green-fg}✓ Server created successfully!{/green-fg}');
+            progressModal.setContent("\n  {green-fg}✓ Server created successfully!{/green-fg}");
             screen.render();
-            await new Promise(resolve => setTimeout(resolve, 1000));
-            screen.remove(progressModal);
+            await new Promise((resolve) => setTimeout(resolve, 1000));
+            modalController.closeProgress(progressModal);
             // Add to our arrays
             servers.push(updatedConfig);
             aggregators.set(updatedConfig.id, new metrics_aggregator_js_1.MetricsAggregator(updatedConfig));
@@ -1238,24 +1423,84 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
             // Select the new server in list view
             selectedRowIndex = servers.length - 1;
             selectedServerIndex = selectedRowIndex;
-            registerHandlers();
+            keyboardManager.popContext(); // Pop the blocking context
             startPolling();
         }
         catch (err) {
-            screen.remove(progressModal);
-            await showErrorModal(err instanceof Error ? err.message : 'Unknown error');
+            modalController.closeProgress(progressModal);
+            await showErrorModal(err instanceof Error ? err.message : "Unknown error");
             // Immediately render with cached data for instant feedback
             const content = renderListView(lastSystemMetrics);
             contentBox.setContent(content);
             screen.render();
-            registerHandlers();
+            keyboardManager.popContext(); // Pop the blocking context
             startPolling();
         }
     }
     // Store key handler references for cleanup when switching views
+    /**
+     * Helper function to update keyboard context based on current view state.
+     * Call this whenever viewMode or detailSubView changes.
+     */
+    function updateKeyboardContext() {
+        keyboardManager.updateCurrentContext(getHandlersForCurrentState());
+    }
+    /**
+     * Get keyboard handlers for the current view state.
+     * This function returns the appropriate handlers based on viewMode and detailSubView.
+     */
+    function getHandlersForCurrentState() {
+        const handlers = {};
+        // Always available keys
+        handlers['escape'] = keyHandlers.escape;
+        handlers['q'] = keyHandlers.quit;
+        handlers['Q'] = keyHandlers.quit;
+        handlers['C-c'] = keyHandlers.quit;
+        if (viewMode === 'list') {
+            // List view keys
+            handlers['up'] = keyHandlers.up;
+            handlers['k'] = keyHandlers.up;
+            handlers['down'] = keyHandlers.down;
+            handlers['j'] = keyHandlers.down;
+            handlers['enter'] = keyHandlers.enter;
+            handlers['m'] = keyHandlers.models;
+            handlers['M'] = keyHandlers.models;
+            handlers['r'] = keyHandlers.router;
+            handlers['R'] = keyHandlers.router;
+            handlers['h'] = keyHandlers.history;
+            handlers['H'] = keyHandlers.history;
+            handlers['n'] = keyHandlers.create;
+            handlers['N'] = keyHandlers.create;
+        }
+        else if (viewMode === 'detail') {
+            if (detailSubView === 'status') {
+                // Detail status view keys
+                handlers['h'] = keyHandlers.history;
+                handlers['H'] = keyHandlers.history;
+                handlers['c'] = keyHandlers.config;
+                handlers['C'] = keyHandlers.config;
+                handlers['r'] = keyHandlers.remove;
+                handlers['R'] = keyHandlers.remove;
+                handlers['s'] = keyHandlers.startStop;
+                handlers['S'] = keyHandlers.startStop;
+                handlers['l'] = keyHandlers.logs;
+                handlers['L'] = keyHandlers.logs;
+            }
+            else if (detailSubView === 'logs') {
+                // Logs view keys
+                handlers['t'] = keyHandlers.toggleLogType;
+                handlers['T'] = keyHandlers.toggleLogType;
+                handlers['r'] = keyHandlers.refreshLogs;
+                handlers['R'] = keyHandlers.refreshLogs;
+                handlers['f'] = keyHandlers.toggleLogsRefresh;
+                handlers['F'] = keyHandlers.toggleLogsRefresh;
+            }
+        }
+        return handlers;
+    }
     const keyHandlers = {
         up: () => {
-            if (viewMode === 'list') {
+            if (viewMode === "list") {
                 selectedRowIndex = Math.max(0, selectedRowIndex - 1);
                 // Re-render immediately for responsive feel
                 const content = renderListView(lastSystemMetrics);
@@ -1264,7 +1509,7 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
             }
         },
         down: () => {
-            if (viewMode === 'list') {
+            if (viewMode === "list") {
                 selectedRowIndex = Math.min(servers.length - 1, selectedRowIndex + 1);
                 // Re-render immediately for responsive feel
                 const content = renderListView(lastSystemMetrics);
@@ -1273,43 +1518,83 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
             }
         },
         enter: () => {
-            if (viewMode === 'list') {
+            if (viewMode === "list") {
                 showLoading();
                 selectedServerIndex = selectedRowIndex;
-                viewMode = 'detail';
+                viewMode = "detail";
+                updateKeyboardContext(); // Update handlers for new view
                 fetchData();
             }
         },
         escape: () => {
-            // Don't handle ESC if we're in historical view - let historical view handle it
+            // Don't handle ESC if we're in historical view
+            // Note: No need to check modalController.isModalOpen() - KeyboardManager handles this!
             if (inHistoricalView)
                 return;
-            if (viewMode === 'detail') {
+            if (viewMode === "detail" && detailSubView === "logs") {
+                // Return from logs to detail status view
+                detailSubView = "status";
+                stopLogsAutoRefresh();
+                updateKeyboardContext(); // Update handlers for new sub-view
+                render();
+            }
+            else if (viewMode === "detail") {
                 showLoading();
-                viewMode = 'list';
+                viewMode = "list";
+                detailSubView = "status"; // Reset to status when going back to list
                 cameFromDirectJump = false; // Clear direct jump flag when returning to list
+                updateKeyboardContext(); // Update handlers for new view
                 fetchData();
             }
-            else if (viewMode === 'list') {
-                // ESC in list view - exit
-                showLoading();
-                if (intervalId)
-                    clearInterval(intervalId);
-                if (spinnerIntervalId)
-                    clearInterval(spinnerIntervalId);
-                setTimeout(() => {
-                    screen.destroy();
-                    process.exit(0);
-                }, 100);
+            // ESC in list view does nothing - use 'q' or Ctrl-C to quit
+        },
+        logs: () => {
+            // Only available from detail view and not in historical view
+            if (viewMode !== "detail" || inHistoricalView)
+                return;
+            if (detailSubView === "status") {
+                detailSubView = "logs";
+                logType = 'stdout'; // Reset to activity logs when entering logs view
+                updateKeyboardContext(); // Update handlers for new sub-view
+                render();
+            }
+        },
+        refreshLogs: () => {
+            if (viewMode === "detail" && detailSubView === "logs") {
+                render();
+            }
+        },
+        toggleLogsRefresh: () => {
+            if (viewMode === "detail" && detailSubView === "logs") {
+                if (logsRefreshInterval) {
+                    stopLogsAutoRefresh();
+                }
+                else {
+                    startLogsAutoRefresh();
+                }
+                render();
+            }
+        },
+        toggleLogType: () => {
+            if (viewMode === "detail" && detailSubView === "logs") {
+                logType = logType === 'stdout' ? 'stderr' : 'stdout';
+                render();
             }
         },
         models: async () => {
-            if (onModels && viewMode === 'list' && !inHistoricalView) {
+            if (onModels && viewMode === "list" && !inHistoricalView) {
                 // Pause monitor (don't destroy - we'll resume when returning)
                 controls.pause();
                 await onModels(controls);
             }
         },
+        router: async () => {
+            if (onRouter && viewMode === "list" && !inHistoricalView) {
+                // Pause monitor (don't destroy - we'll resume when returning)
+                controls.pause();
+                await onRouter(controls);
+            }
+        },
         history: async () => {
             // Prevent entering historical view if already there
             if (inHistoricalView)
@@ -1322,7 +1607,7 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
             screen.remove(contentBox);
             // Mark that we're in historical view
             inHistoricalView = true;
-            if (viewMode === 'list') {
+            if (viewMode === "list") {
                 // Show multi-server historical view
                 await (0, HistoricalMonitorApp_js_1.createMultiServerHistoricalUI)(screen, servers, selectedServerIndex, () => {
                     // Mark that we've left historical view
@@ -1352,7 +1637,7 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
         },
         config: async () => {
             // Only available from detail view and not in historical view
-            if (viewMode !== 'detail' || inHistoricalView)
+            if (viewMode !== "detail" || inHistoricalView)
                 return;
             // Pause monitor
             controls.pause();
@@ -1390,7 +1675,7 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
         },
         remove: async () => {
             // Only available from detail view and not in historical view
-            if (viewMode !== 'detail' || inHistoricalView)
+            if (viewMode !== "detail" || inHistoricalView)
                 return;
             const selectedServer = servers[selectedServerIndex];
             // Show remove server dialog
@@ -1398,49 +1683,47 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
         },
         startStop: async () => {
             // Only available from detail view and not in historical view
-            if (viewMode !== 'detail' || inHistoricalView)
+            if (viewMode !== "detail" || inHistoricalView)
                 return;
             const selectedServer = servers[selectedServerIndex];
             // If running, stop it. If stopped, start it.
-            if (selectedServer.status === 'running') {
+            if (selectedServer.status === "running") {
                 // Stop the server
                 if (intervalId)
                     clearInterval(intervalId);
                 if (spinnerIntervalId)
                     clearInterval(spinnerIntervalId);
-                unregisterHandlers();
-                const progressModal = showProgressModal('Stopping server...');
+                const progressModal = showProgressModal("Stopping server...");
                 try {
-                    // Unload service (this stops and unregisters it)
-                    progressModal.setContent('\n  {cyan-fg}Stopping server...{/cyan-fg}');
-                    screen.render();
-                    await launchctl_manager_js_1.launchctlManager.unloadService(selectedServer.plistPath);
-                    // Wait for shutdown
-                    progressModal.setContent('\n  {cyan-fg}Waiting for server to stop...{/cyan-fg}');
-                    screen.render();
-                    await launchctl_manager_js_1.launchctlManager.waitForServiceStop(selectedServer.label, 5000);
-                    // Update server status
-                    const updatedServer = await status_checker_js_1.statusChecker.updateServerStatus(selectedServer);
-                    servers[selectedServerIndex] = updatedServer;
-                    serverDataMap.set(updatedServer.id, {
-                        server: updatedServer,
+                    // Use centralized lifecycle service
+                    const result = await server_lifecycle_service_js_1.serverLifecycleService.stopServer(selectedServer.id, {
+                        onProgress: (msg) => {
+                            progressModal.setContent(`\n  {cyan-fg}${msg}{/cyan-fg}`);
+                            screen.render();
+                        },
+                    });
+                    if (!result.success) {
+                        throw new Error(result.error);
+                    }
+                    // Update local state
+                    servers[selectedServerIndex] = result.server;
+                    serverDataMap.set(result.server.id, {
+                        server: result.server,
                         data: null,
                         error: null,
                     });
-                    // Save updated config
-                    await state_manager_js_1.stateManager.saveServerConfig(updatedServer);
+                    // Immediately update UI so it reflects the new state before modal closes
+                    await fetchData();
                     // Show success briefly
-                    progressModal.setContent('\n  {green-fg}✓ Server stopped successfully!{/green-fg}');
+                    progressModal.setContent("\n  {green-fg}✓ Server stopped successfully!{/green-fg}");
                     screen.render();
-                    await new Promise(resolve => setTimeout(resolve, 800));
-                    screen.remove(progressModal);
-                    registerHandlers();
+                    await new Promise((resolve) => setTimeout(resolve, 800));
+                    modalController.closeProgress(progressModal);
                     startPolling();
                 }
                 catch (err) {
-                    screen.remove(progressModal);
-                    await showErrorModal(err instanceof Error ? err.message : 'Unknown error');
-                    registerHandlers();
+                    modalController.closeProgress(progressModal);
+                    await showErrorModal(err instanceof Error ? err.message : "Unknown error");
                     startPolling();
                 }
                 return;
@@ -1451,80 +1734,43 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
                 clearInterval(intervalId);
             if (spinnerIntervalId)
                 clearInterval(spinnerIntervalId);
-            unregisterHandlers();
-            const progressModal = showProgressModal('Starting server...');
+            const progressModal = showProgressModal("Starting server...");
             try {
-                // Recreate plist if needed
-                const plistExists = await fs.access(selectedServer.plistPath).then(() => true).catch(() => false);
-                if (!plistExists) {
-                    progressModal.setContent('\n  {cyan-fg}Recreating plist...{/cyan-fg}');
-                    screen.render();
-                    await launchctl_manager_js_1.launchctlManager.createPlist(selectedServer);
-                }
-                // Load service
-                progressModal.setContent('\n  {cyan-fg}Loading service...{/cyan-fg}');
-                screen.render();
-                try {
-                    await launchctl_manager_js_1.launchctlManager.loadService(selectedServer.plistPath);
-                }
-                catch (err) {
-                    // May already be loaded, continue
-                }
-                // Start service
-                progressModal.setContent('\n  {cyan-fg}Starting server...{/cyan-fg}');
-                screen.render();
-                await launchctl_manager_js_1.launchctlManager.startService(selectedServer.label);
-                // Wait for startup
-                progressModal.setContent('\n  {cyan-fg}Waiting for server to start...{/cyan-fg}');
-                screen.render();
-                const started = await launchctl_manager_js_1.launchctlManager.waitForServiceStart(selectedServer.label, 5000);
-                if (!started) {
-                    throw new Error('Server failed to start. Check logs.');
-                }
-                // Wait for port to be ready
-                progressModal.setContent('\n  {cyan-fg}Waiting for server to be ready...{/cyan-fg}');
-                screen.render();
-                const portTimeout = 10000;
-                const portStartTime = Date.now();
-                let portReady = false;
-                while (Date.now() - portStartTime < portTimeout) {
-                    if (await (0, process_utils_js_1.isPortInUse)(selectedServer.port)) {
-                        portReady = true;
-                        break;
-                    }
-                    await new Promise(resolve => setTimeout(resolve, 500));
-                }
-                if (!portReady) {
-                    throw new Error('Server started but port not responding. Check logs.');
+                // Use centralized lifecycle service
+                const result = await server_lifecycle_service_js_1.serverLifecycleService.startServer(selectedServer.id, {
+                    onProgress: (msg) => {
+                        progressModal.setContent(`\n  {cyan-fg}${msg}{/cyan-fg}`);
+                        screen.render();
+                    },
+                });
+                if (!result.success) {
+                    throw new Error(result.error);
                 }
-                // Update server status
-                const updatedServer = await status_checker_js_1.statusChecker.updateServerStatus(selectedServer);
-                servers[selectedServerIndex] = updatedServer;
-                serverDataMap.set(updatedServer.id, {
-                    server: updatedServer,
+                // Update local state
+                servers[selectedServerIndex] = result.server;
+                serverDataMap.set(result.server.id, {
+                    server: result.server,
                     data: null,
                     error: null,
                 });
-                // Save updated config
-                await state_manager_js_1.stateManager.saveServerConfig(updatedServer);
+                // Immediately update UI so it reflects the new state before modal closes
+                await fetchData();
                 // Show success briefly
-                progressModal.setContent('\n  {green-fg}✓ Server started successfully!{/green-fg}');
+                progressModal.setContent("\n  {green-fg}✓ Server started successfully!{/green-fg}");
                 screen.render();
-                await new Promise(resolve => setTimeout(resolve, 800));
-                screen.remove(progressModal);
-                registerHandlers();
+                await new Promise((resolve) => setTimeout(resolve, 800));
+                modalController.closeProgress(progressModal);
                 startPolling();
             }
             catch (err) {
-                screen.remove(progressModal);
-                await showErrorModal(err instanceof Error ? err.message : 'Unknown error');
-                registerHandlers();
+                modalController.closeProgress(progressModal);
+                await showErrorModal(err instanceof Error ? err.message : "Unknown error");
                 startPolling();
             }
         },
         create: async () => {
             // Only available from list view and not in historical view
-            if (viewMode !== 'list' || inHistoricalView)
+            if (viewMode !== "list" || inHistoricalView)
                 return;
             // Show create server flow
             await showCreateServerFlow();
@@ -1542,60 +1788,28 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
             }, 100);
         },
     };
-    // Unregister all keyboard handlers
-    function unregisterHandlers() {
-        screen.unkey('up', keyHandlers.up);
-        screen.unkey('k', keyHandlers.up);
-        screen.unkey('down', keyHandlers.down);
-        screen.unkey('j', keyHandlers.down);
-        screen.unkey('enter', keyHandlers.enter);
-        screen.unkey('escape', keyHandlers.escape);
-        screen.unkey('m', keyHandlers.models);
-        screen.unkey('M', keyHandlers.models);
-        screen.unkey('h', keyHandlers.history);
-        screen.unkey('H', keyHandlers.history);
-        screen.unkey('c', keyHandlers.config);
-        screen.unkey('C', keyHandlers.config);
-        screen.unkey('r', keyHandlers.remove);
-        screen.unkey('R', keyHandlers.remove);
-        screen.unkey('s', keyHandlers.startStop);
-        screen.unkey('S', keyHandlers.startStop);
-        screen.unkey('n', keyHandlers.create);
-        screen.unkey('N', keyHandlers.create);
-        screen.unkey('q', keyHandlers.quit);
-        screen.unkey('Q', keyHandlers.quit);
-        screen.unkey('C-c', keyHandlers.quit);
-    }
-    // Register keyboard handlers
-    function registerHandlers() {
-        screen.key(['up', 'k'], keyHandlers.up);
-        screen.key(['down', 'j'], keyHandlers.down);
-        screen.key(['enter'], keyHandlers.enter);
-        screen.key(['escape'], keyHandlers.escape);
-        screen.key(['m', 'M'], keyHandlers.models);
-        screen.key(['h', 'H'], keyHandlers.history);
-        screen.key(['c', 'C'], keyHandlers.config);
-        screen.key(['r', 'R'], keyHandlers.remove);
-        screen.key(['s', 'S'], keyHandlers.startStop);
-        screen.key(['n', 'N'], keyHandlers.create);
-        screen.key(['q', 'Q', 'C-c'], keyHandlers.quit);
-    }
+    // NOTE: Old unregisterHandlers() and registerHandlers() functions removed.
+    // Keyboard handling now managed by KeyboardManager with context stack.
+    // See getHandlersForCurrentState() and updateKeyboardContext() above.
     // Controls object for pause/resume from other views
     const controls = {
         pause: () => {
-            unregisterHandlers();
+            keyboardManager.popContext(); // Pop our context when pausing
             if (intervalId)
                 clearInterval(intervalId);
             if (spinnerIntervalId)
                 clearInterval(spinnerIntervalId);
+            stopLogsAutoRefresh();
             screen.remove(contentBox);
         },
         resume: () => {
             screen.append(contentBox);
-            registerHandlers();
+            // Reset to status view when resuming
+            detailSubView = "status";
+            keyboardManager.pushContext('multi-server-monitor', getHandlersForCurrentState(), false);
             // Re-render with last known data (instant, no loading)
-            let content = '';
-            if (viewMode === 'list') {
+            let content = "";
+            if (viewMode === "list") {
                 content = renderListView(lastSystemMetrics);
             }
             else {
@@ -1608,18 +1822,20 @@ async function createMultiServerMonitorUI(screen, servers, skipConnectingMessage
         },
         getServers: () => servers,
     };
-    // Initial registration
-    registerHandlers();
+    // Initial keyboard context setup (non-blocking so other components can add contexts on top)
+    keyboardManager.pushContext('multi-server-monitor', getHandlersForCurrentState(), false);
     // Initial display - skip "Connecting" message when returning from another view
     if (!skipConnectingMessage) {
-        contentBox.setContent('{cyan-fg}⏳ Connecting to servers...{/cyan-fg}');
+        contentBox.setContent("{cyan-fg}⏳ Connecting to servers...{/cyan-fg}");
         screen.render();
     }
     startPolling();
     // Cleanup
-    screen.on('destroy', () => {
+    screen.on("destroy", () => {
         if (intervalId)
             clearInterval(intervalId);
+        stopLogsAutoRefresh();
+        keyboardManager.clearAll(); // Clear all keyboard contexts
         // Note: macmon child processes will automatically die when parent exits
         // since they're spawned with detached: false
     });