Add rollback, log search/pause, stderr highlight, health alerts to monitor

Author: devalade

src/cli/monitor/App.tsx

@@ -12,14 +12,14 @@ import { AccessoriesPanel } from './panels/AccessoriesPanel.js';
 import { AppSelector } from './app-selector.js';
 import { HelpOverlay } from './components/HelpOverlay.js';
 import { ConfirmDialog } from './components/ConfirmDialog.js';
-import { restartProcess } from './actions.js';
+import { restartProcess, rollbackToRelease } from './actions.js';
 import chalk from 'chalk';
-import { useMonitorData } from './hooks/use-monitor-data.js';
+import { useMonitorData, HEALTH_ALERT_THRESHOLD } from './hooks/use-monitor-data.js';
 import { useLiveLogs } from './hooks/use-live-logs.js';
 import { MonitorFrame, WaitingPanel } from './layout/MonitorFrame.js';
 
 type View = 'dashboard' | 'logs';
-type Overlay = 'none' | 'selector' | 'help' | 'confirmRestart';
+type Overlay = 'none' | 'selector' | 'help' | 'confirmRestart' | 'confirmRollback';
 
 interface AppProps {
   executor: RemoteExecutor;
@@ -40,14 +40,33 @@ export function App({ executor, config, app: initialApp, apps, accessoryNames, t
   const [overlay, setOverlay] = useState<Overlay>('none');
   const [liveMode, setLiveMode] = useState(false);
   const [logFilter, setLogFilter] = useState<string | null>(null);
-  const [selectedProcess, setSelectedProcess] = useState(0);
+  const [logSearch, setLogSearch] = useState('');
+  const [searchTyping, setSearchTyping] = useState(false);
+  const [logsPaused, setLogsPaused] = useState(false);
+  const [selectedRow, setSelectedRow] = useState(0);
   const monitor = useMonitorData(executor, config, currentApp, interval, accessoryNames);
   const liveActive = liveMode || view === 'logs';
-  const liveLogs = useLiveLogs(executor, currentApp, liveActive, interval, logFilter);
+  const liveLogs = useLiveLogs(executor, currentApp, liveActive && !logsPaused, interval, logFilter);
 
+  // On the 24-row terminals this layout was tuned for, the releases box has
+  // room for exactly one row; taller terminals get a few more so a rollback
+  // selection made with ↑/↓ is actually visible before confirming.
+  const terminalRows = stdout?.rows ?? 24;
+  const releaseBoxExtra = Math.max(0, Math.min(6, terminalRows - 30));
+
+  // Selection runs over processes first, then the visible release rows, so
+  // ↓ walks straight from the PM2 panel into the Releases panel.
   const processes = monitor.snapshot?.processes ?? [];
-  const selectedIndex = processes.length === 0 ? 0 : Math.min(selectedProcess, processes.length - 1);
-  const selectedInfo = processes[selectedIndex];
+  const maxReleases = accessoryNames.length > 0 ? 4 : 5;
+  const releaseRows = (monitor.snapshot?.releases ?? []).slice(0, maxReleases);
+  const totalRows = processes.length + releaseRows.length;
+  const selectedIndex = totalRows === 0 ? 0 : Math.min(selectedRow, totalRows - 1);
+  const selectedInfo = selectedIndex < processes.length ? processes[selectedIndex] : undefined;
+  const selectedRelease =
+    selectedIndex >= processes.length ? releaseRows[selectedIndex - processes.length] : undefined;
+  const currentTimestamp = monitor.snapshot?.currentRelease?.split('/').pop() ?? null;
+  const alertStreak =
+    monitor.healthFailStreak >= HEALTH_ALERT_THRESHOLD ? monitor.healthFailStreak : 0;
 
   const confirmRestart = async (): Promise<void> => {
     setOverlay('none');
@@ -62,6 +81,26 @@ export function App({ executor, config, app: initialApp, apps, accessoryNames, t
     void monitor.refresh();
   };
 
+  const confirmRollback = async (): Promise<void> => {
+    setOverlay('none');
+    if (selectedRelease === undefined) return;
+    monitor.appendEvent(chalk.yellow(`Rolling back to ${selectedRelease.timestamp}…`));
+    const result = await rollbackToRelease(executor, config, currentApp, selectedRelease.timestamp);
+    if (result.isOk()) {
+      monitor.appendEvent(chalk.green(`Rolled back to ${chalk.bold(selectedRelease.timestamp)}`));
+    } else {
+      monitor.appendEvent(chalk.red(result.error.message));
+    }
+    void monitor.refresh();
+  };
+
+  const exitLogsView = (): void => {
+    setView('dashboard');
+    setSearchTyping(false);
+    setLogSearch('');
+    setLogsPaused(false);
+  };
+
   const cycleLogFilter = (direction: 1 | -1): void => {
     if (currentApp.appType === 'frontend') return;
     const names = monitor.snapshot?.processes.map((p) => p.pm2Name) ?? [];
@@ -79,6 +118,28 @@ export function App({ executor, config, app: initialApp, apps, accessoryNames, t
     }
     if (overlay !== 'none') return;
 
+    // While typing a search query every printable key belongs to the query,
+    // including q/f/r — this branch must stay ahead of the global bindings.
+    if (view === 'logs' && searchTyping) {
+      if (key.return) {
+        setSearchTyping(false);
+        return;
+      }
+      if (key.escape) {
+        setSearchTyping(false);
+        setLogSearch('');
+        return;
+      }
+      if (key.backspace || key.delete) {
+        setLogSearch((s) => s.slice(0, -1));
+        return;
+      }
+      if (input !== '' && !key.ctrl && !key.meta) {
+        setLogSearch((s) => s + input);
+      }
+      return;
+    }
+
     if (input === 'q') {
       exit();
       return;
@@ -93,14 +154,20 @@ export function App({ executor, config, app: initialApp, apps, accessoryNames, t
       return;
     }
     if (input === 'f' || input === 'F') {
-      setView((v) => (v === 'logs' ? 'dashboard' : 'logs'));
+      if (view === 'logs') exitLogsView();
+      else setView('logs');
       return;
     }
 
     if (view === 'logs') {
-      if (key.escape) setView('dashboard');
+      if (key.escape) exitLogsView();
       if (key.leftArrow) cycleLogFilter(-1);
       if (key.rightArrow) cycleLogFilter(1);
+      if (input === '/') {
+        setSearchTyping(true);
+        setLogSearch('');
+      }
+      if (input === ' ') setLogsPaused((p) => !p);
       return;
     }
 
@@ -109,19 +176,38 @@ export function App({ executor, config, app: initialApp, apps, accessoryNames, t
       return;
     }
     if (key.upArrow) {
-      setSelectedProcess(Math.max(0, selectedIndex - 1));
+      setSelectedRow(Math.max(0, selectedIndex - 1));
       return;
     }
     if (key.downArrow) {
-      setSelectedProcess(Math.min(Math.max(processes.length - 1, 0), selectedIndex + 1));
+      setSelectedRow(Math.min(Math.max(totalRows - 1, 0), selectedIndex + 1));
       return;
     }
-    if ((key.return || input === 'x' || input === 'X') && selectedInfo !== undefined) {
-      if (monitor.snapshot?.deployLock != null) {
-        monitor.appendEvent(chalk.red('Restart blocked: a deploy is in progress (lock held)'));
+    if (key.return || input === 'x' || input === 'X') {
+      if (selectedInfo !== undefined) {
+        if (monitor.snapshot?.deployLock != null) {
+          monitor.appendEvent(chalk.red('Restart blocked: a deploy is in progress (lock held)'));
+          return;
+        }
+        setOverlay('confirmRestart');
+        return;
+      }
+      if (selectedRelease !== undefined) {
+        if (monitor.snapshot?.deployLock != null) {
+          monitor.appendEvent(chalk.red('Rollback blocked: a deploy is in progress (lock held)'));
+          return;
+        }
+        if (selectedRelease.status !== 'success') {
+          monitor.appendEvent(chalk.red('Cannot roll back to a failed release'));
+          return;
+        }
+        if (selectedRelease.timestamp === currentTimestamp) {
+          monitor.appendEvent(chalk.yellow(`${selectedRelease.timestamp} is already the current release`));
+          return;
+        }
+        setOverlay('confirmRollback');
         return;
       }
-      setOverlay('confirmRestart');
       return;
     }
     if (input === 'l' || input === 'L') {
@@ -156,6 +242,23 @@ export function App({ executor, config, app: initialApp, apps, accessoryNames, t
     );
   }
 
+  if (overlay === 'confirmRollback' && selectedRelease !== undefined) {
+    return (
+      <ConfirmDialog
+        title={`Rollback ${currentApp.name} to ${selectedRelease.timestamp}?`}
+        lines={
+          currentApp.appType === 'backend'
+            ? ['Switches the current symlink and reloads PM2 from that release.']
+            : ['Switches the current symlink.']
+        }
+        onConfirm={() => {
+          void confirmRollback();
+        }}
+        onCancel={() => setOverlay('none')}
+      />
+    );
+  }
+
   if (overlay === 'selector') {
     return (
       <AppSelector
@@ -164,9 +267,9 @@ export function App({ executor, config, app: initialApp, apps, accessoryNames, t
         onSelect={(app) => {
           setCurrentApp(app);
           setOverlay('none');
-          setView('dashboard');
+          exitLogsView();
           setLogFilter(null);
-          setSelectedProcess(0);
+          setSelectedRow(0);
           monitor.reset();
           liveLogs.clearLogs();
           setLiveMode(false);
@@ -182,7 +285,7 @@ export function App({ executor, config, app: initialApp, apps, accessoryNames, t
     const title =
       currentApp.appType === 'frontend'
         ? `Caddy Access Log — ${currentApp.name}`
-        : `Live Logs — ${logFilter ?? 'all processes'}  (←/→ filter, F back)`;
+        : `Live Logs — ${logFilter ?? 'all processes'}  (←/→ filter, / search, space pause, F back)`;
     return (
       <MonitorFrame
         app={currentApp}
@@ -194,9 +297,17 @@ export function App({ executor, config, app: initialApp, apps, accessoryNames, t
         snapshot={monitor.snapshot}
         polling={monitor.polling}
         error={monitor.error}
+        healthFailStreak={alertStreak}
       >
         <Box flexGrow={1}>
-          <LogPanel logBuffer={liveLogs.logBuffer} maxLines={Math.max(10, rows - 6)} title={title} />
+          <LogPanel
+            logBuffer={liveLogs.logBuffer}
+            maxLines={Math.max(10, rows - 6)}
+            title={title}
+            search={logSearch}
+            searchTyping={searchTyping}
+            paused={logsPaused}
+          />
         </Box>
       </MonitorFrame>
     );
@@ -213,6 +324,7 @@ export function App({ executor, config, app: initialApp, apps, accessoryNames, t
       snapshot={monitor.snapshot}
       polling={monitor.polling}
       error={monitor.error}
+      healthFailStreak={alertStreak}
     >
       <Box flexGrow={1} flexDirection="row" minHeight={8}>
         <Box width="60%" flexDirection="column">
@@ -225,7 +337,7 @@ export function App({ executor, config, app: initialApp, apps, accessoryNames, t
               memHistory={monitor.history.memory}
               health={monitor.snapshot.health}
               responseHistory={monitor.history.responseMs}
-              selectedIndex={selectedIndex}
+              selectedIndex={selectedInfo !== undefined ? selectedIndex : undefined}
             />
           ) : (
             <WaitingPanel />
@@ -253,11 +365,14 @@ export function App({ executor, config, app: initialApp, apps, accessoryNames, t
       </Box>
 
       {monitor.snapshot && (
-        <Box height={accessoryNames.length > 0 ? 6 : 7}>
+        <Box height={(accessoryNames.length > 0 ? 6 : 7) + releaseBoxExtra}>
           <ReleasePanel
             currentRelease={monitor.snapshot.currentRelease}
             releases={monitor.snapshot.releases}
-            maxReleases={accessoryNames.length > 0 ? 4 : 5}
+            maxReleases={maxReleases}
+            selectedIndex={
+              selectedRelease !== undefined ? selectedIndex - processes.length : undefined
+            }
           />
         </Box>
       )}

src/cli/monitor/actions.ts

@@ -1,6 +1,8 @@
 import { Result, type Result as ResultType } from 'better-result';
 import type { RemoteExecutor } from '../../domain/remote/executor.js';
-import { ProcessRestartError } from '../../shared/result-errors.js';
+import type { ShipnodeApp, ShipnodeConfig } from '../../shared/types.js';
+import { ProcessRestartError, ReleaseRollbackError } from '../../shared/result-errors.js';
+import { getEcosystemPath } from '../../domain/pm2/apps.js';
 import { MISE, shellQuote } from './poller.js';
 
 /**
@@ -22,3 +24,51 @@ export async function restartProcess(
   }
   return Result.ok(undefined);
 }
+
+/**
+ * Switch the app's `current` symlink to an existing release and, for backend
+ * apps, reload PM2 from that release's ecosystem file (same recovery path as
+ * `shipnode rollback`, minus the interactive prompt — the TUI confirms first).
+ */
+export async function rollbackToRelease(
+  executor: RemoteExecutor,
+  config: ShipnodeConfig,
+  app: ShipnodeApp,
+  timestamp: string,
+): Promise<ResultType<void, ReleaseRollbackError>> {
+  const fail = (detail: string): ResultType<void, ReleaseRollbackError> =>
+    Result.err(new ReleaseRollbackError({ appName: app.name, timestamp, detail }));
+
+  const appPath = `${config.remotePath}/${app.name}`;
+  const releasePath = `${appPath}/releases/${timestamp}`;
+
+  const exists = await executor.exec(`[ -d ${shellQuote(releasePath)} ]`);
+  if (exists.exitCode !== 0) return fail('release directory not found on server');
+
+  const switched = await executor.exec(
+    `ln -sfn ${shellQuote(releasePath)} ${shellQuote(`${appPath}/current.tmp`)} && ` +
+    `mv -Tf ${shellQuote(`${appPath}/current.tmp`)} ${shellQuote(`${appPath}/current`)}`,
+  );
+  if (switched.exitCode !== 0) {
+    return fail((switched.stderr || switched.stdout).trim() || 'failed to switch current symlink');
+  }
+
+  const namespace = app.pm2?.apps[0]?.name;
+  if (app.appType === 'backend' && namespace !== undefined) {
+    const nodeVersion = config.nodeVersion === 'lts' ? '24' : config.nodeVersion;
+    const ecosystem = getEcosystemPath(config, app.name);
+    // Prefer the rolled-back release's ecosystem file (ADR-0001); fall back to
+    // a namespace reload for releases that predate per-release ecosystem files.
+    const reloaded = await executor.exec(
+      `${MISE}; mise exec node@${nodeVersion} -- ` +
+      `sh -c ${shellQuote(`pm2 reload "${ecosystem}" --update-env 2>/dev/null || pm2 reload ${namespace} --update-env`)}`,
+    );
+    if (reloaded.exitCode !== 0) {
+      return fail(
+        `symlink switched but PM2 reload failed: ${(reloaded.stderr || reloaded.stdout).trim() || `exit code ${reloaded.exitCode}`}`,
+      );
+    }
+  }
+
+  return Result.ok(undefined);
+}

src/cli/monitor/components/HelpOverlay.tsx

@@ -10,8 +10,10 @@ const BINDINGS: Array<[string, string]> = [
   ['l', 'toggle live log strip'],
   ['f', 'fullscreen logs'],
   ['←/→', 'filter logs by process (fullscreen)'],
-  ['↑/↓', 'select process'],
-  ['Enter/x', 'restart selected process'],
+  ['/', 'search logs (fullscreen)'],
+  ['space', 'pause/resume logs (fullscreen)'],
+  ['↑/↓', 'select process or release'],
+  ['Enter/x', 'restart process / rollback to release'],
   ['?', 'this help'],
 ];